[datepicker-dropdown] Add :anchor-label part

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 > Committed but unreleased changes are put here, at the top. Older releases are detailed chronologically below. 
 
+## 2.21.16 (2024-08-05)
+
+#### Added
+
+- `datepicker-dropdown` - Can now target the `:anchor-label` part.
+
 ## 2.21.15 (2024-07-26)
 
 #### Changed
@@ -30,7 +36,6 @@
 - `dropdown` - Always drops down when not clipping. Before, this component would choose a body position closest to the vertical center of the viewport. Now, it chooses a position below the anchor, unless that would cause the body to clip.
 - `simple-v-table` - Renamed `:row-export-fn` to `:on-export-row-label-fn`.
 
-
 ## 2.21.11 (2024-07-11)
 
 #### Fixed

src/re_com/datepicker.cljs

@@ -9,13 +9,13 @@
    [cljs-time.predicates :refer [sunday?]]
    [cljs-time.format     :refer [parse unparse formatters formatter]]
    [re-com.box           :refer [border gap box line h-box flex-child-style]]
-   [re-com.util          :refer [deref-or-value now->utc]]
+   [re-com.util          :as u :refer [deref-or-value now->utc]]
    [re-com.popover       :refer [popover-anchor-wrapper popover-content-wrapper]]
    [clojure.string       :as string])
   (:import
    [goog.i18n DateTimeFormat]))
 
-;; Loosely based on ideas: https://github.com/dangrossman/bootstrap-daterangepicker
+;; Loosely based on ideas: https://github.com/dangrossman/bootstrap-daterangepicker`pf
 
 ;; --- cljs-time facades ------------------------------------------------------
 
@@ -467,7 +467,8 @@
 
 (def datepicker-parts-desc
   (when include-args-desc?
-    [{:name :wrapper         :level 0 :class "rc-datepicker-wrapper"         :impl "[datepicker]" :notes "Outer wrapper of the datepicker."}
+    [{:name :anchor-label   :level 0 :class "" :impl "[:label]" :notes "Only for [datepicker-dropdown]. The label element which displays the chosen date."}
+     {:name :wrapper         :level 0 :class "rc-datepicker-wrapper"         :impl "[datepicker]" :notes "Outer wrapper of the datepicker."}
      {:name :border          :level 1 :class "rc-datepicker-border"          :impl "[border]"     :notes "The datepicker border."}
      {:type :legacy          :level 2 :class "rc-datepicker"                 :impl "[:div]"       :notes "The datepicker container."}
      {:name :table           :level 3 :class "rc-datepicker-table"           :impl "[:table]"     :notes "The datepicker table."}
@@ -560,7 +561,7 @@
 
 (defn- anchor-button
   "Provide clickable field with current date label and dropdown button e.g. [ 2014 Sep 17 | # ]"
-  [shown? model format goog? placeholder width disabled?]
+  [shown? model format goog? placeholder width disabled? parts]
   [:div {:class    "rc-datepicker-dropdown-anchor input-group display-flex noselect"
          :style    (flex-child-style "none")
          :on-click (handler-fn
@@ -572,8 +573,13 @@
     :min-width (when-not width "10em")
     :max-width (when-not width "10em")
     :width     width
-    :children  [[:label {:disabled (deref-or-value disabled?)
-                         :class    (str "form-control dropdown-button" (when (deref-or-value disabled?) " dropdown-button-disabled"))}
+    :children  [[:label (merge
+                         {:disabled (deref-or-value disabled?)
+                          :style    (get-in parts [:anchor-label :style])
+                          :class    (str "form-control dropdown-button"
+                                         (when (deref-or-value disabled?) " dropdown-button-disabled")
+                                         (get-in parts [:anchor-label :class]))}
+                         (get-in parts [:anchor-label :attr]))
                  (cond (not (date-like? (deref-or-value model))) [:span {:style {:color "#bbb"}} placeholder]
                        goog?                                     (.format (DateTimeFormat. (if (seq format) format date-format-str)) (deref-or-value model))
                        :else                                     (unparse (if (seq format) (formatter format) date-format) (deref-or-value model)))]
@@ -601,7 +607,7 @@
          cancel-popover #(reset! shown? false)
          position       :below-left]
      (fn datepicker-dropdown-render
-       [& {:keys [model show-weeks? on-change format goog? no-clip? placeholder width disabled? position-offset position src debug-as]
+       [& {:keys [model show-weeks? on-change format goog? no-clip? placeholder width disabled? position-offset position src debug-as parts]
            :or {no-clip? true, position-offset 0, position :below-left}
            :as passthrough-args}]
        (or
@@ -622,7 +628,7 @@
            :class    "rc-datepicker-dropdown-wrapper"
            :showing? shown?
            :position position
-           :anchor   [anchor-button shown? model format goog? placeholder width disabled?]
+           :anchor   [anchor-button shown? model format goog? placeholder width disabled? parts]
            :popover  [popover-content-wrapper
                       :src             (at)
                       :position-offset (+ (if show-weeks? 43 44) position-offset)

src/re_com/theme/util.cljs

@@ -1,19 +1,16 @@
-(ns re-com.theme.util)
+(ns re-com.theme.util
+  (:require [re-com.util :as u]))
 
 (defn merge-props [& ms]
-  (let [class-vec #(if (vector? %) % [%])
-        ms (remove nil? ms)
+  (let [ms (remove nil? ms)
         ms (map #(cond-> % (and (map? %)
                                 (:class %))
-                         (update :class class-vec)) ms)]
+                         (update :class u/->v)) ms)]
     (cond
       (every? map? ms) (clojure.core/apply merge-with merge-props ms)
       (every? vector? ms) (reduce into ms)
       :else (last ms))))
 
-(merge-props {:class "a" :style {:b 1}}
-             {:class "x" :style {:width 2} :width 200 :ref :REF})
-
 (defn parts [part->props]
   (fn [props {:keys [part]}]
     (if-let [v (or (get part->props part)