Repository: penpot/penpot
File: frontend/src/app/main/ui/workspace/tokens/modals/import.cljs (ClojureScript)

Code before:
   [rumext.v2 :as mf]))

(defn- on-stream-imported
  [type tokens-lib-stream]
  (rx/sub!
   tokens-lib-stream
   (fn [lib]
     (st/emit! (ptk/data-event ::ev/event {::ev/name "import-tokens" :type type})
               (dwtl/import-tokens-lib lib))
     (modal/hide!))
   (fn [err]
     (st/emit! (ntf/show {:content (dwte/humanize-errors [(ex-data err)])
                          :detail (dwte/detail-errors [(ex-data err)])
                          :type :toast
                          :level :error})))))

(mf/defc dropdown-button*
  {::mf/private true}
  [{:keys [options on-click text-render default]}]
  (let [initial-option (or (first (filter #(= (:value %) default) options))
                           (first options))
        selected-option* (mf/use-state initial-option)
        selected-option @selected-option*
        show-dropdown? (mf/use-state false)

        js-options (clj->js (mapv (fn [option]
                                    {:id (str (:value option))
                                     :label (:label option)
                                     :aria-label (:label option)})
                                  options))
        button-text (if text-render
                      (text-render selected-option)
                      (:label selected-option))

        toggle-dropdown
        (mf/use-fn
         (fn [event]
           (dom/prevent-default event)
           (dom/stop-propagation event)
           (swap! show-dropdown? not)))

        close-dropdown
        (mf/use-fn #(reset! show-dropdown? false))

        handle-option-click
        (mf/use-fn
         (mf/deps options)
         (fn [event]
           (let [target (dom/get-current-target event)
                 option-id (dom/get-attribute target "id")
                 option (first (filter #(= (str (:value %)) option-id) options))]

Review comment (suggestion):
Add `mf/use-memo` here with `mf/deps options` to avoid creating the array in each component render.

Also it's not very important here but you can use `mf/props` instead of `clj->js` and ensure it will do name transformations and other checks if needed in the future. https://github.com/funcool/rumext?tab=readme-ov-file#mfprops

Code after:
   [rumext.v2 :as mf]))

(defn- on-stream-imported
  [type tokens-lib-stream]
  (rx/sub!
   tokens-lib-stream
   (fn [lib]
     (st/emit! (ptk/data-event ::ev/event {::ev/name "import-tokens" :type type})
               (dwtl/import-tokens-lib lib))
     (modal/hide!))
   (fn [err]
     (st/emit! (ntf/show {:content (dwte/humanize-errors [(ex-data err)])
                          :detail (dwte/detail-errors [(ex-data err)])
                          :type :toast
                          :level :error})))))

(mf/defc import-type-dropdown*
  {::mf/private true}
  [{:keys [options on-click text-render default]}]
  (let [initial-option (or (first (filter #(= (:value %) default) options))
                           (first options))
        selected-option* (mf/use-state initial-option)
        selected-option @selected-option*
        show-dropdown? (mf/use-state false)

        js-options (mf/use-memo
                    (mf/deps options)
                    #(clj->js
                      (mapv (fn [option]
                              {:id (str (:value option))
                               :label (:label option)
                               :aria-label (:label option)})
                            options)))
        button-text (if text-render
                      (text-render selected-option)
                      (:label selected-option))

        toggle-dropdown
        (mf/use-fn
         (fn [event]
           (dom/prevent-default event)
           (dom/stop-propagation event)
           (swap! show-dropdown? not)))

        close-dropdown
        (mf/use-fn #(reset! show-dropdown? false))

        handle-option-click
        (mf/use-fn
         (mf/deps options)
         (fn [event]