Merge pull request #3436 from penpot/niwinz-enhancements

✨ Several enhacements

.clj-kondo/config.edn

@@ -6,7 +6,6 @@
   rumext.v2/defc clojure.core/defn
   rumext.v2/fnc clojure.core/fn
   app.common.data/export clojure.core/def
-  app.db/with-atomic clojure.core/with-open
   app.common.data.macros/get-in clojure.core/get-in
   app.common.data.macros/with-open clojure.core/with-open
   app.common.data.macros/select-keys clojure.core/select-keys
@@ -18,6 +17,7 @@
    potok.core/reify hooks.export/potok-reify
    app.util.services/defmethod hooks.export/service-defmethod
    app.common.record/defrecord hooks.export/penpot-defrecord
+   app.db/with-atomic hooks.export/penpot-with-atomic
    }}
 
  :output

.clj-kondo/hooks/export.clj

@@ -39,6 +39,20 @@
                          other))]
       {:node result})))
 
+(defn penpot-with-atomic
+  [{:keys [node]}]
+  (let [[_ params & other] (:children node)
+
+        result (if (api/vector-node? params)
+                 (api/list-node
+                  (into [(api/token-node (symbol "clojure.core" "with-open")) params] other))
+                 (api/list-node
+                  (into [(api/token-node (symbol "clojure.core" "with-open"))
+                         (api/vector-node [params params])]
+                        other)))
+
+        ]
+    {:node result}))
 
 (defn penpot-defrecord
   [{:keys [:node]}]

backend/src/app/db.clj

@@ -218,7 +218,13 @@
 
 (defmacro with-atomic
   [& args]
-  `(jdbc/with-transaction ~@args))
+  (if (symbol? (first args))
+    (let [cfgs (first args)
+          body (rest args)]
+      `(jdbc/with-transaction [conn# (::pool ~cfgs)]
+         (let [~cfgs (assoc ~cfgs ::conn conn#)]
+           ~@body)))
+    `(jdbc/with-transaction ~@args)))
 
 (defn open
   [pool]

frontend/src/app/main/data/events.cljs

@@ -222,9 +222,7 @@
                   :body (http/transit-data {:events events})}]
       (->> (http/send! params)
            (rx/mapcat rp/handle-response)
-           (rx/catch (fn [_]
+           (rx/catch (fn [_] (rx/of nil)))))
-                       (l/error :hint "unexpected error on persisting audit events")
-                       (rx/of nil)))))
 
     (rx/of nil)))
 

frontend/src/app/main/ui/auth/login.cljs

@@ -177,41 +177,46 @@
       [:div.buttons-stack
        (when (or (contains? cf/flags :login)
                  (contains? cf/flags :login-with-password))
-         [:& fm/submit-button
+         [:> fm/submit-button*
           {:label (tr "auth.login-submit")
            :data-test "login-submit"}])
 
        (when (contains? cf/flags :login-with-ldap)
-         [:& fm/submit-button
+         [:> fm/submit-button*
           {:label (tr "auth.login-with-ldap-submit")
            :on-click on-submit-ldap}])]]]))
 
 (mf/defc login-buttons
   [{:keys [params] :as props}]
+  (let [login-with-google (mf/use-fn (mf/deps params) #(login-with-oidc % :google params))
+        login-with-github (mf/use-fn (mf/deps params) #(login-with-oidc % :github params))
+        login-with-gitlab (mf/use-fn (mf/deps params) #(login-with-oidc % :gitlab params))
+        login-with-oidc   (mf/use-fn (mf/deps params) #(login-with-oidc % :oidc params))]
+
     [:div.auth-buttons
      (when (contains? cf/flags :login-with-google)
-     [:& bl/button-link {:action #(login-with-oidc % :google params)
+       [:& bl/button-link {:on-click login-with-google
                            :icon i/brand-google
-                         :name (tr "auth.login-with-google-submit")
+                           :label (tr "auth.login-with-google-submit")
-                         :klass "btn-google-auth"}])
+                           :class "btn-google-auth"}])
 
      (when (contains? cf/flags :login-with-github)
-     [:& bl/button-link {:action #(login-with-oidc % :github params)
+       [:& bl/button-link {:on-click login-with-github
                            :icon i/brand-github
-                         :name (tr "auth.login-with-github-submit")
+                           :label (tr "auth.login-with-github-submit")
-                         :klass "btn-github-auth"}])
+                           :class "btn-github-auth"}])
 
      (when (contains? cf/flags :login-with-gitlab)
-     [:& bl/button-link {:action #(login-with-oidc % :gitlab params)
+       [:& bl/button-link {:on-click login-with-gitlab
                            :icon i/brand-gitlab
-                         :name (tr "auth.login-with-gitlab-submit")
+                           :label (tr "auth.login-with-gitlab-submit")
-                         :klass "btn-gitlab-auth"}])
+                           :class "btn-gitlab-auth"}])
 
      (when (contains? cf/flags :login-with-oidc)
-     [:& bl/button-link {:action #(login-with-oidc % :oidc params)
+       [:& bl/button-link {:on-click login-with-oidc
                            :icon i/brand-openid
-                         :name (tr "auth.login-with-oidc-submit")
+                           :label (tr "auth.login-with-oidc-submit")
-                         :klass "btn-github-auth"}])])
+                           :class "btn-github-auth"}])]))
 
 (mf/defc login-button-oidc
   [{:keys [params] :as props}]

frontend/src/app/main/ui/auth/recovery.cljs

@@ -72,7 +72,7 @@
                     :name :password-2
                     :label (tr "auth.confirm-password")}]]
 
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (tr "auth.recovery-submit")}]]))
 
 ;; --- Recovery Request Page

frontend/src/app/main/ui/auth/recovery_request.cljs

@@ -82,7 +82,7 @@
                     :help-icon i/at
                     :type "text"}]]
 
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (tr "auth.recovery-request-submit")
        :data-test "recovery-resquest-submit"}]]))
 

frontend/src/app/main/ui/auth/register.cljs

@@ -124,7 +124,7 @@
                     :label (tr "auth.password")
                     :type "password"}]]
 
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (tr "auth.register-submit")
        :disabled @submitted?
        :data-test "register-form-submit"}]]))
@@ -259,7 +259,7 @@
          [:span ",\u00A0"]
          [:a {:href "https://penpot.app/privacy" :target "_blank"} (tr "auth.privacy-policy")]]])
 
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (tr "auth.register-submit")
        :disabled @submitted?}]]))
 

frontend/src/app/main/ui/components/button_link.cljs

@@ -11,16 +11,17 @@
 
 (mf/defc button-link
   {::mf/wrap-props false}
-  [{:keys [action icon name klass]}]
+  [{:keys [on-click icon label class]}]
   (let [on-key-down (mf/use-fn
-                     (mf/deps action)
+                     (mf/deps on-click)
                      (fn [event]
                        (when (kbd/enter? event)
-                         (action event))))]
+                         (when (fn? on-click)
+                           (on-click event)))))]
     [:a.btn-primary.btn-large.button-link
-     {:class klass
+     {:class class
       :tab-index "0"
-      :on-click action
+      :on-click on-click
       :on-key-down on-key-down}
      [:span.logo icon]
-     name]))
+     label]))

frontend/src/app/main/ui/components/code_block.cljs

@@ -9,12 +9,13 @@
    ["highlight.js" :as hljs]
    [rumext.v2 :as mf]))
 
-(mf/defc code-block [{:keys [code type]}]
+(mf/defc code-block
+  {::mf/wrap-props false}
+  [{:keys [code type]}]
   (let [block-ref (mf/use-ref)]
-    (mf/use-effect
+    (mf/with-effect [code type]
-     (mf/deps code type block-ref)
+      (when-let [node (mf/ref-val block-ref)]
-     (fn []
+        (hljs/highlightElement node)))
-       (hljs/highlightElement (mf/ref-val block-ref))))
+
-    [:pre.code-display {:class type
+    [:pre.code-display {:class type :ref block-ref} code]))
-                        :ref block-ref} code]))
 

frontend/src/app/main/ui/components/color_bullet.cljs

@@ -40,10 +40,10 @@
 (mf/defc color-name
   {::mf/wrap-props false}
   [{:keys [color size on-click on-double-click]}]
-  (let [color (if (string? color) {:color color :opacity 1} color)
+  (let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)]
-        {:keys [name color gradient]} color
-        color-str (or name color (uc/gradient-type->string (:type gradient)))]
     (when (or (not size) (= size :big))
-      [:span.color-text {:on-click #(when on-click (on-click %))
+      [:span.color-text
-                         :on-double-click #(when on-double-click (on-double-click %))
+       {:on-click on-click
-                         :title name} color-str])))
+        :on-double-click on-double-click
+        :title name}
+       (or name color (uc/gradient-type->string (:type gradient)))])))

frontend/src/app/main/ui/components/color_input.cljs

@@ -23,7 +23,7 @@
       (uc/parse-color)
       (uc/prepend-hash)))
 
-(mf/defc color-input
+(mf/defc color-input*
   {::mf/wrap-props false
    ::mf/forward-ref true}
   [props external-ref]

frontend/src/app/main/ui/components/editable_label.cljs

@@ -14,51 +14,89 @@
    [rumext.v2 :as mf]))
 
 (mf/defc editable-label
-  [{:keys [value on-change on-cancel editing? disable-dbl-click? class-name] :as props}]
+  {::mf/wrap-props false}
-  (let [display-value (get props :display-value value)
+  [props]
-        tooltip (get props :tooltip)
+  (let [display-value     (unchecked-get props "display-value")
-        input (mf/use-ref nil)
+        value             (unchecked-get props "value")
-        state (mf/use-state (:editing false))
+        on-change         (unchecked-get props "on-change")
+        on-cancel         (unchecked-get props "on-cancel")
+        editing?          (unchecked-get props "editing")
+        dbl-click?        (unchecked-get props "disable-dbl-click")
+        class             (unchecked-get props "class")
+        tooltip           (unchecked-get props "tooltip")
+
         new-css-system    (mf/use-ctx ctx/new-css-system)
-        is-editing (:editing @state)
+        input-ref         (mf/use-ref nil)
-        start-editing (fn []
+        internal-editing* (mf/use-state false)
-                        (swap! state assoc :editing true)
+        internal-editing? (deref internal-editing*)
-                        (timers/schedule 100 #(dom/focus! (mf/ref-val input))))
-        stop-editing (fn [] (swap! state assoc :editing false))
-        accept-editing (fn []
-                         (when (:editing @state)
-                           (let [value (-> (mf/ref-val input) dom/get-value)]
-                             (on-change value)
-                             (stop-editing))))
-        cancel-editing (fn []
-                         (stop-editing)
-                         (when on-cancel (on-cancel)))
-        on-dbl-click (fn [_] (when (not disable-dbl-click?) (start-editing)))
-        on-key-up (fn [e]
-                    (cond
-                      (kbd/esc? e)
-                      (cancel-editing)
 
-                      (kbd/enter? e)
+        start-edition
-                      (accept-editing)))]
+        (mf/use-fn
-
-    (mf/use-effect
-     (mf/deps editing?)
          (fn []
-       (when (and editing? (not (:editing @state)))
+           (reset! internal-editing* true)
-         (start-editing))))
+           (timers/schedule 100 (fn []
+                                  (when-let [node (mf/ref-val input-ref)]
+                                    (dom/focus! node))))))
 
-    (if is-editing
+        stop-edition
-      [:div.editable-label {:class class-name}
+        (mf/use-fn #(reset! internal-editing* false))
-       [:input.editable-label-input {:ref input
+
+        accept-edition
+        (mf/use-fn
+         (mf/deps internal-editing? on-change stop-edition)
+         (fn []
+           (when internal-editing?
+             (let [value (dom/get-value (mf/ref-val input-ref))]
+               (when (fn? on-change)
+                 (on-change value))
+
+               (stop-edition)))))
+
+        cancel-edition
+        (mf/use-fn
+         (mf/deps stop-edition on-cancel)
+         (fn []
+           (stop-edition)
+           (when (fn? on-cancel)
+             (on-cancel))))
+
+
+        on-dbl-click
+        (mf/use-fn
+         (mf/deps dbl-click? start-edition)
+         (fn [_]
+           (when-not dbl-click?
+             (start-edition))))
+
+        on-key-up
+        (mf/use-fn
+         (mf/deps cancel-edition accept-edition)
+         (fn [event]
+           (cond
+             (kbd/esc? event)
+             (cancel-edition)
+
+             (kbd/enter? event)
+             (accept-edition))))]
+
+    (mf/with-effect [editing? internal-editing? start-edition]
+      (when (and editing? (not internal-editing?))
+        (start-edition)))
+
+    (if ^boolean internal-editing?
+      [:div.editable-label {:class class}
+       [:input.editable-label-input
+        {:ref input-ref
          :default-value value
          :on-key-up on-key-up
-                                     :on-blur cancel-editing}]
+         :on-blur cancel-edition}]
 
-       [:span.editable-label-close {:on-click cancel-editing}
+       [:span.editable-label-close {:on-click cancel-edition}
-        (if new-css-system
+        (if ^boolean new-css-system
           i/delete-text-refactor
           i/close)]]
-      [:span.editable-label {:class class-name
+      [:span.editable-label
+       {:class class
         :title tooltip
-                             :on-double-click on-dbl-click} display-value])))
+        :on-double-click on-dbl-click}
+       display-value])))

frontend/src/app/main/ui/components/editable_select.cljs

@@ -10,7 +10,7 @@
    [app.common.math :as mth]
    [app.common.uuid :as uuid]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.keyboard :as kbd]
@@ -143,7 +143,7 @@
     [:div.editable-select {:class class
                            :ref on-node-load}
      (if (= type "number")
-       [:> numeric-input {:value (or (some-> @state :current-value value->label) "")
+       [:> numeric-input* {:value (or (some-> @state :current-value value->label) "")
                            :on-change set-value
                            :on-focus handle-focus
                            :on-blur handle-blur

frontend/src/app/main/ui/components/forms.cljs

@@ -236,56 +236,98 @@
        i/arrow-slide]]]))
 
 (mf/defc radio-buttons
-  [{:keys [name options form trim on-change-value] :as props}]
+  {::mf/wrap-props false}
-  (let [form            (or form (mf/use-ctx form-ctx))
+  [props]
-        value           (get-in @form [:data name] "")
+  (let [form          (or (unchecked-get props "form")
-        on-change-value (or on-change-value (constantly nil))
+                          (mf/use-ctx form-ctx))
-        on-change (fn [event]
+        name          (unchecked-get props "name")
-                    (let [value (-> event dom/get-target dom/get-value)]
-                      (swap! form assoc-in [:touched name] true)
-                      (fm/on-input-change form name value trim)
-                      (on-change-value name value)))]
-    [:div.custom-radio
-     (for [item options]
-       (let [id (str/ffmt "%-%" name (:value item))
-             image (:image item)]
-         [:div.input-radio {:key id :class (when image "with-image")}
-          [:input {:on-change on-change
-                   :type "radio"
-                   :id id
-                   :name name
-                   :value (:value item)
-                   :checked (= value (:value item))}]
-          [:label {:for id
-                   :style {:background-image (when image (str/ffmt "url(%)" image))}
-                   :class (when image "with-image")}
-           (:label item)]]))]))
 
-(mf/defc submit-button
+        current-value (or (dm/get-in @form [:data name] "")
-  [{:keys [label form on-click disabled data-test] :as props}]
+                          (unchecked-get props "value"))
-  (let [form (or form (mf/use-ctx form-ctx))]
+        on-change     (unchecked-get props "on-change")
-    [:input.btn-primary.btn-large
+        options       (unchecked-get props "options")
-     {:name "submit"
+        trim?         (unchecked-get props "trim")
-      :class (when (or (not (:valid @form)) (true? disabled)) "btn-disabled")
+        encode-fn     (d/nilv (unchecked-get props "encode-fn") identity)
-      :disabled (or (not (:valid @form)) (true? disabled))
+        decode-fn     (d/nilv (unchecked-get props "decode-fn") identity)
-      :tab-index "0"
+
-      :on-click on-click
+        on-change'
-      :on-key-down (fn [event]
+        (mf/use-fn
-                     (when (kbd/enter? event)
+         (mf/deps on-change form name)
-                       (on-click)))
+         (fn [event]
-      :value label
+           (let [value (-> event dom/get-target dom/get-value decode-fn)]
-      :data-test data-test
+             (when (some? form)
-      :type "submit"}]))
+               (swap! form assoc-in [:touched name] true)
+               (fm/on-input-change form name value trim?))
+
+             (when (fn? on-change)
+               (on-change name value)))))]
+
+    [:div.custom-radio
+     (for [{:keys [image value label]} options]
+       (let [image? (some? image)
+             value' (encode-fn value)
+             key    (str/ffmt "%-%" name value')]
+         [:div.input-radio {:key key :class (when image? "with-image")}
+          [:input {:on-change on-change'
+                   :type "radio"
+                   :id key
+                   :name name
+                   :value value'
+                   :checked (= value current-value)}]
+          [:label {:for key
+                   :style {:background-image (when image? (str/ffmt "url(%)" image))}
+                   :class (when image? "with-image")}
+           label]]))]))
+
+(mf/defc submit-button*
+  {::mf/wrap-props false}
+  [props]
+  (let [form      (or (unchecked-get props "form")
+                      (mf/use-ctx form-ctx))
+
+        label     (unchecked-get props "label")
+        on-click  (unchecked-get props "onClick")
+        children  (unchecked-get props "children")
+
+        class     (d/nilv (unchecked-get props "className") "btn-primary btn-large")
+        name      (d/nilv (unchecked-get props "name") "submit")
+
+        disabled? (or (and (some? form) (not (:valid @form)))
+                      (true? (unchecked-get props "disabled")))
+
+        klass     (dm/str class " " (if disabled? "btn-disabled" ""))
+
+        on-key-down
+        (mf/use-fn
+         (mf/deps on-click)
+         (fn [event]
+           (when (and (kbd/enter? event) (fn? on-click))
+             (on-click event))))
+
+        props     (-> (obj/clone props)
+                      (obj/unset! "children")
+                      (obj/set! "disabled" disabled?)
+                      (obj/set! "onKeyDown" on-key-down)
+                      (obj/set! "name" name)
+                      (obj/set! "label" mf/undefined)
+                      (obj/set! "className" klass)
+                      (obj/set! "type" "submit"))]
+
+    [:> "button" props
+     (if (some? children)
+       children
+       [:span label])]))
 
 (mf/defc form
-  [{:keys [on-submit form children class] :as props}]
+  {::mf/wrap-props false}
-  (let [on-submit (or on-submit (constantly nil))]
+  [{:keys [on-submit form children class]}]
-    [:& (mf/provider form-ctx) {:value form}
+  (let [on-submit' (mf/use-fn
-     [:form {:class class
+                    (fn [event]
-             :on-submit (fn [event]
                       (dom/prevent-default event)
-                          (on-submit form event))}
+                      (when (fn? on-submit)
-      children]]))
+                        (on-submit form event))))]
+    [:& (mf/provider form-ctx) {:value form}
+     [:form {:class class :on-submit on-submit'} children]]))
 
 (defn- conj-dedup
   "A helper that adds item into a vector and removes possible

frontend/src/app/main/ui/components/numeric_input.cljs

@@ -20,7 +20,7 @@
    [goog.events :as events]
    [rumext.v2 :as mf]))
 
-(mf/defc numeric-input
+(mf/defc numeric-input*
   {::mf/wrap-props false
    ::mf/forward-ref true}
   [props external-ref]

frontend/src/app/main/ui/components/radio_buttons.cljs

@@ -5,57 +5,72 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.components.radio-buttons
-  (:require-macros [app.main.style :refer [css]])
+  (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data :as d]
    [app.common.math :as math]
    [app.main.ui.formats :as fmt]
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
-(def ctx-radio-button (mf/create-context nil))
+(def context
+  (mf/create-context nil))
 
 (mf/defc radio-button
   {::mf/wrap-props false}
   [props]
-  (let [ctx (mf/use-ctx ctx-radio-button)
+  (let [context   (mf/use-ctx context)
+
         icon      (unchecked-get props "icon")
         id        (unchecked-get props "id")
-        on-change (:on-change ctx)
-        selected (:selected ctx)
         value     (unchecked-get props "value")
-        checked? (= selected value)
+
-        name (:name ctx)]
+        on-change (unchecked-get context "on-change")
+        selected  (unchecked-get context "selected")
+        name      (unchecked-get context "name")
+
+        encode-fn (unchecked-get context "encode-fn")
+        checked?  (= selected value)]
+
     [:label {:for id
-             :class (dom/classnames (css :radio-icon) true
+             :class (stl/css-case
-                                    (css :checked) checked?)}
+                     :radio-icon true
-     icon
+                     :checked checked?)}
+
+     (when (some? icon) icon)
+
      [:input {:id id
               :on-change on-change
               :type "radio"
               :name name
-              :value value
+              :value (encode-fn value)
               :checked checked?}]]))
 
 (mf/defc nilable-option
   {::mf/wrap-props false}
   [props]
-  (let [ctx (mf/use-ctx ctx-radio-button)
+  (let [context   (mf/use-ctx context)
         icon      (unchecked-get props "icon")
         id        (unchecked-get props "id")
-        on-change (:on-change ctx)
-        selected (:selected ctx)
         value     (unchecked-get props "value")
-        checked? (= selected value)
+
-        name (:name ctx)]
+        on-change (unchecked-get context "on-change")
+        selected  (unchecked-get context "selected")
+        name      (unchecked-get context "name")
+
+        encode-fn (unchecked-get context "encode-fn")
+        checked?  (= selected value)]
+
     [:label {:for id
-             :class (dom/classnames (css :radio-icon) true
+             :class (stl/css-case
-                                    (css :checked) checked?)}
+                     :radio-icon true
+                     :checked checked?)}
      icon
      [:input {:id id
               :on-change on-change
               :type "checkbox"
               :name name
-              :value value
+              :value (encode-fn value)
               :checked checked?}]]))
 
 (mf/defc radio-buttons
@@ -65,14 +80,36 @@
         on-change (unchecked-get props "on-change")
         selected  (unchecked-get props "selected")
         name      (unchecked-get props "name")
-        calculate-width (fmt/format-pixels (+ (math/pow 2 (count children)) (* 28 (count children))))
+
-        handle-change
+        encode-fn (d/nilv (unchecked-get props "encode-fn") identity)
+        decode-fn (d/nilv (unchecked-get props "encode-fn") identity)
+
+        nitems    (if (array? children)
+                    (alength children)
+                    1)
+
+        width     (mf/with-memo [nitems]
+                    (fmt/format-pixels
+                     (+ (math/pow 2 nitems)
+                        (* 28 nitems))))
+
+        on-change'
         (mf/use-fn
          (mf/deps on-change)
          (fn [event]
            (let [value (dom/get-target-val event)]
-             (on-change value event))))]
+             (when (fn? on-change)
-    [:& (mf/provider ctx-radio-button) {:value {:selected selected :on-change handle-change :name name}}
+               (on-change (decode-fn value) event)))))
-     [:div {:class (css :radio-btn-wrapper)
+
-                          :style {:width calculate-width}}
+        context-value
+        (mf/with-memo [selected on-change' name encode-fn decode-fn]
+          #js {:selected selected
+               :on-change on-change'
+               :name name
+               :encode-fn encode-fn
+               :decode-fn decode-fn})]
+
+    [:& (mf/provider context) {:value context-value}
+     [:div {:class (stl/css :radio-btn-wrapper)
+            :style {:width width}}
       children]]))

frontend/src/app/main/ui/dashboard.cljs

@@ -185,7 +185,7 @@
            :profile profile
            :section section
            :search-term search-term}]
-         (when (and team (seq projects))
+         (when (and team profile (seq projects))
            [:& dashboard-content
             {:projects projects
              :profile profile

frontend/src/app/main/ui/dashboard/team.cljs

@@ -185,7 +185,8 @@
                            :on-submit  on-submit}]]
 
       [:div.action-buttons
-       [:& fm/submit-button {:label (tr "modals.invite-member-confirm.accept")
+       [:> fm/submit-button*
+        {:label (tr "modals.invite-member-confirm.accept")
          :disabled (and (boolean (some current-data-emails current-members-emails))
                         (empty? (remove current-members-emails current-data-emails)))}]]]]))
 
@@ -814,7 +815,7 @@
           {:type "button"
            :value (tr "labels.cancel")
            :on-click #(modal/hide!)}]
-         [:& fm/submit-button
+         [:> fm/submit-button*
           {:label (if webhook
                     (tr "modals.edit-webhook.submit-label")
                     (tr "modals.create-webhook.submit-label"))}]]]]]]))

frontend/src/app/main/ui/dashboard/team_form.cljs

@@ -95,7 +95,7 @@
 
        [:div.modal-footer
         [:div.action-buttons
-         [:& fm/submit-button
+         [:> fm/submit-button*
           {:label (if team
                     (tr "labels.update-team")
                     (tr "labels.create-team"))}]]]]]]))

frontend/src/app/main/ui/onboarding/questions.cljs

@@ -26,7 +26,7 @@
    children
    [:div.buttons
     [:div.step-next
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (if (< step 4) (tr "questions.next") (tr "questions.start"))
        :class "step-next"}]]
 
@@ -114,7 +114,7 @@
                                      {:label (tr "questions.never-used-a-tool") :value "never-used-a-tool" :image "images/form/never-used.png"}
                                      {:label (tr "questions.other") :value "other"}]
                            :name :experience-design-tool
-                           :on-change-value on-design-tool-change}]
+                           :on-change on-design-tool-change}]
      [:div.other
       [:label (tr "questions.other")]
       [:& fm/input {:name :experience-design-tool-other :label (tr "questions.other") :disabled (not= experience-design-tool "other")}]]]))
@@ -152,7 +152,7 @@
                                      {:label (tr "questions.student-teacher") :value "student-teacher"}
                                      {:label (tr "questions.other") :value "other"}]
                            :name :role
-                           :on-change-value on-role-change}]
+                           :on-change on-role-change}]
      [:div.other
       [:label (tr "questions.other")]
       [:& fm/input {:name :role-other :label (tr "questions.other") :disabled (not= role "other")}]]

frontend/src/app/main/ui/onboarding/team_choice.cljs

@@ -87,7 +87,7 @@
                         :name :name
                         :label (tr "onboarding.choice.team-up.create-team-placeholder")}]
 
-          [:& fm/submit-button
+          [:> fm/submit-button*
            {:label (tr "labels.continue")}]]
 
          [:button.skip-action {:on-click on-skip} (tr "onboarding.choice.team-up.create-later")]]
@@ -199,8 +199,9 @@
                                                        :name name
                                                        :step 2}))}
           (tr "labels.back")]
-         [:& fm/submit-button
+         [:> fm/submit-button*
           {:label (tr "onboarding.choice.team-up.invite-members-submit")}]]
+
         [:div.skip-action
          {:on-click on-skip}
          [:div.action (tr "onboarding.choice.team-up.invite-members-skip")]]]]

frontend/src/app/main/ui/settings/access_tokens.cljs

@@ -166,7 +166,7 @@
              {:type "button"
               :value (tr "labels.cancel")
               :on-click #(modal/hide!)}]
-            [:& fm/submit-button
+            [:> fm/submit-button*
              {:label (tr "modals.create-access-token.submit-label")}]])]]]]]))
 
 (mf/defc access-tokens-hero

frontend/src/app/main/ui/settings/change_email.cljs

@@ -129,7 +129,7 @@
 
        [:div.modal-footer
         [:div.action-buttons {:data-test "change-email-submit"}
-         [:& fm/submit-button
+         [:> fm/submit-button*
           {:label (tr "modals.change-email.submit")}]]]]]]))
 
 

frontend/src/app/main/ui/settings/feedback.cljs

@@ -76,7 +76,7 @@
         :name :content
         :rows 5}]]
 
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (if @loading (tr "labels.sending") (tr "labels.send"))
        :disabled @loading}]
 

frontend/src/app/main/ui/settings/options.cljs

@@ -35,6 +35,7 @@
     (st/emit! (du/update-profile (with-meta data mdata)))))
 
 (mf/defc options-form
+  {::mf/wrap-props false}
   []
   (let [profile (mf/deref refs/profile)
         initial (mf/with-memo [profile]
@@ -66,7 +67,7 @@
                        :options [{:label "Penpot Dark (default)" :value "default"}
                                  {:label "Penpot Light" :value "light"}]
                        :data-test "setting-theme"}]])
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (tr "dashboard.update-settings")
        :data-test "submit-lang-change"}]]))
 

frontend/src/app/main/ui/settings/password.cljs

@@ -98,7 +98,7 @@
         :name :password-2
         :label (t locale "labels.confirm-password")}]]
 
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (t locale "dashboard.update-settings")
        :data-test "submit-password"}]]))
 

frontend/src/app/main/ui/settings/profile.cljs

@@ -69,7 +69,7 @@
         [:a {:on-click #(modal/show! :change-email {})}
          (tr "dashboard.change-email")]]]]
 
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (tr "dashboard.save-settings")
        :disabled (empty? (:touched @form))}]
 

frontend/src/app/main/ui/workspace/nudge.cljs

@@ -10,7 +10,7 @@
    [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -49,12 +49,12 @@
        [:div.input-wrapper
         [:span
          [:p.nudge-subtitle (tr "modals.small-nudge")]
-         [:> numeric-input {:min 0.01
+         [:> numeric-input* {:min 0.01
                              :value (:small nudge)
                              :on-change update-small}]]]
        [:div.input-wrapper
         [:span
          [:p.nudge-subtitle (tr "modals.big-nudge")]
-         [:> numeric-input {:min 0.01
+         [:> numeric-input* {:min 0.01
                              :value (:big nudge)
                              :on-change update-big}]]]]]]))

frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs

@@ -5,7 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.sidebar.assets.components
-  (:require-macros [app.main.style :refer [css]])
+  (:require-macros [app.main.style :as stl :refer [css]])
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
@@ -146,15 +146,15 @@
           (let [renaming? (= renaming (:id component))]
             [:*
              [:& editable-label
-              {:class-name (dom/classnames
+              {:class (dom/classnames
                        (css :cell-name) listing-thumbs?
                        (css :item-name) (not listing-thumbs?)
                        (css :editing) renaming?)
                :value (cph/merge-path-item (:path component) (:name component))
                :tooltip (cph/merge-path-item (:path component) (:name component))
                :display-value (:name component)
-               :editing? renaming?
+               :editing renaming?
-               :disable-dbl-click? true
+               :disable-dbl-click true
                :on-change do-rename
                :on-cancel cancel-rename}]
 
@@ -185,15 +185,15 @@
           (let [renaming? (= renaming (:id component))]
             [:*
              [:& editable-label
-              {:class-name (dom/classnames
+              {:class (dom/classnames
                        :cell-name listing-thumbs?
                        :item-name (not listing-thumbs?)
                        :editing renaming?)
                :value (cph/merge-path-item (:path component) (:name component))
                :tooltip (cph/merge-path-item (:path component) (:name component))
                :display-value (:name component)
-               :editing? renaming?
+               :editing renaming?
-               :disable-dbl-click? true
+               :disable-dbl-click true
                :on-change do-rename
                :on-cancel cancel-rename}]
 
@@ -569,21 +569,19 @@
                            :open? open?}
      (if ^boolean new-css-system
        [:& cmm/asset-section-block {:role :title-button}
-
+        [:*
          (when open?
-          [:div {:class (dom/classnames (css :listing-options) true)}
+           [:div {:class (stl/css :listing-options)}
-           (let [option-selected (if listing-thumbs?
+            [:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
-                                   "grid"
-                                   "list")]
-             [:& radio-buttons {:selected option-selected
                                :on-change toggle-list-style
                                :name "listing-style"}
-              [:& radio-button {:icon (mf/html i/view-as-list-refactor)
+             [:& radio-button {:icon i/view-as-list-refactor
                                :value "list"
                                :id :list}]
-              [:& radio-button {:icon (mf/html i/flex-grid-refactor)
+             [:& radio-button {:icon i/flex-grid-refactor
                                :value "grid"
-                                :id :grid}]])])
+                               :id :grid}]]])
+
          (when (and components-v2 (not read-only?) local?)
            [:div {:on-click add-component
                   :class (dom/classnames (css :add-component) true)}
@@ -591,7 +589,7 @@
             [:& file-uploader {:accept cm/str-image-types
                                :multi true
                                :ref input-ref
-                              :on-selected on-file-selected}]])]
+                               :on-selected on-file-selected}]])]]
        (when local?
          [:& cmm/asset-section-block {:role :title-button}
           (when (and components-v2 (not read-only?))

frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs

@@ -108,15 +108,15 @@
           (let [renaming? (= renaming (:id object))]
             [:*
              [:& editable-label
-              {:class-name (dom/classnames
+              {:class (dom/classnames
                        (css :cell-name) listing-thumbs?
                        (css :item-name) (not listing-thumbs?)
                        (css :editing) renaming?)
                :value (cph/merge-path-item (:path object) (:name object))
                :tooltip (cph/merge-path-item (:path object) (:name object))
                :display-value (:name object)
-               :editing? renaming?
+               :editing renaming?
-               :disable-dbl-click? true
+               :disable-dbl-click true
                :on-change do-rename
                :on-cancel cancel-rename}]
 
@@ -145,15 +145,15 @@
           (let [renaming? (= renaming (:id object))]
             [:*
              [:& editable-label
-              {:class-name (dom/classnames
+              {:class (dom/classnames
                        :cell-name listing-thumbs?
                        :item-name (not listing-thumbs?)
                        :editing renaming?)
                :value (cph/merge-path-item (:path object) (:name object))
                :tooltip (cph/merge-path-item (:path object) (:name object))
                :display-value (:name object)
-               :editing? renaming?
+               :editing renaming?
-               :disable-dbl-click? true
+               :disable-dbl-click true
                :on-change do-rename
                :on-cancel cancel-rename}]
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs

@@ -11,7 +11,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.editable-select :refer [editable-select]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
@@ -138,7 +138,7 @@
 
       (if (= type :square)
         [:div.input-element.pixels {:title (tr "workspace.options.size")}
-         [:> numeric-input {:min 0.01
+         [:> numeric-input* {:min 0.01
                              :value (or (:size params) "")
                              :no-validate true
                              :on-change (handle-change :params :size)}]]
@@ -202,7 +202,7 @@
           :label (if (= :row type)
                    (tr "workspace.options.grid.params.height")
                    (tr "workspace.options.grid.params.width"))}
-         [:> numeric-input
+         [:> numeric-input*
           {:placeholder "Auto"
            :value (or (:item-length params) "")
            :nillable true

frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs

@@ -10,7 +10,7 @@
    [app.common.data.macros :as dm]
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.menus.layout-container :as lyc]
    [app.util.dom :as dom]
@@ -125,7 +125,7 @@
           [:div.grid-columns-auto
            [:span.icon i/layout-rows]
            [:div.input-wrapper
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-click #(dom/select-target %)
               :on-change (partial on-change :all :column)
@@ -133,7 +133,7 @@
           [:div.grid-rows-auto
            [:span.icon i/layout-columns]
            [:div.input-wrapper
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-click #(dom/select-target %)
               :on-change (partial on-change :all :row)
@@ -156,12 +156,12 @@
           [:div.grid-columns-auto
            [:span.icon i/layout-rows]
            [:div.input-wrapper
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-pointer-down #(dom/select-target %)
               :on-change (partial on-change :start :column)
               :value column}]
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-pointer-down #(dom/select-target %)
               :on-change (partial on-change :end :column)
@@ -169,12 +169,12 @@
           [:div.grid-rows-auto
            [:span.icon i/layout-columns]
            [:div.input-wrapper
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-pointer-down #(dom/select-target %)
               :on-change (partial on-change :start :row)
               :value row}]
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-pointer-down #(dom/select-target %)
               :on-change (partial on-change :end :row)

frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs

@@ -17,7 +17,7 @@
    [app.main.data.workspace.interactions :as dwi]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -332,7 +332,7 @@
            [:div.interactions-element
             [:span.element-set-subtitle.wide (tr "workspace.options.interaction-delay")]
             [:div.input-element {:title (tr "workspace.options.interaction-ms")}
-             [:> numeric-input {:ref ext-delay-ref
+             [:> numeric-input* {:ref ext-delay-ref
                                  :on-change change-delay
                                  :value (:delay interaction)
                                  :title (tr "workspace.options.interaction-ms")}]
@@ -518,7 +518,7 @@
               [:div.interactions-element
                [:span.element-set-subtitle.wide (tr "workspace.options.interaction-duration")]
                [:div.input-element {:title (tr "workspace.options.interaction-ms")}
-                 [:> numeric-input {:ref ext-duration-ref
+                [:> numeric-input* {:ref ext-duration-ref
                                     :on-change change-duration
                                     :value (-> interaction :animation :duration)
                                     :title (tr "workspace.options.interaction-ms")}]

frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs

@@ -11,7 +11,7 @@
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.changes :as dch]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.icons :as i]
    [app.util.i18n :as i18n :refer [tr]]
@@ -162,7 +162,7 @@
 
        [:div.input-element {:title (tr "workspace.options.opacity")
                             :class "percentail"}
-        [:> numeric-input
+        [:> numeric-input*
          {:value (opacity->string current-opacity)
           :placeholder (tr "settings.multiple")
           :on-change handle-opacity-change

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs

@@ -15,7 +15,7 @@
    [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
@@ -278,7 +278,7 @@
         [:div.padding-item.tooltip.tooltip-bottom-left
          {:alt "Vertical padding"}
          [:span.icon.rotated i/auto-padding-both-sides]
-         [:> numeric-input
+         [:> numeric-input*
           {:placeholder "--"
            :on-change (partial on-change :simple :p1)
            :on-focus #(do
@@ -289,7 +289,7 @@
         [:div.padding-item.tooltip.tooltip-bottom-left
          {:alt "Horizontal padding"}
          [:span.icon i/auto-padding-both-sides]
-         [:> numeric-input
+         [:> numeric-input*
           {:placeholder "--"
            :on-change (partial on-change :simple :p2)
            :on-focus #(do (dom/select-target %)
@@ -308,7 +308,7 @@
                    :p3 "Bottom"
                    :p4 "Left")}
            [:div.input-element.auto
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-change (partial on-change :multiple num)
               :on-focus #(do (dom/select-target %)
@@ -342,7 +342,7 @@
        {:alt "Column gap"}
        [:span.icon
         i/auto-gap]
-       [:> numeric-input {:no-validate true
+       [:> numeric-input* {:no-validate true
                            :placeholder "--"
                            :on-focus (fn [event]
                                        (select-gap :column-gap)
@@ -359,7 +359,7 @@
        {:alt "Row gap"}
        [:span.icon.rotated
         i/auto-gap]
-       [:> numeric-input {:no-validate true
+       [:> numeric-input* {:no-validate true
                            :placeholder "--"
                            :on-focus (fn [event]
                                        (select-gap :row-gap)
@@ -465,7 +465,7 @@
               i/layout-columns)]
 
            [:div.grid-column-value
-            [:> numeric-input {:no-validate true
+            [:> numeric-input* {:no-validate true
                                 :value (:value column)
                                 :on-change #(set-column-value type index %)
                                 :placeholder "--"

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs

@@ -13,7 +13,7 @@
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]]
    [app.util.dom :as dom]
@@ -68,7 +68,7 @@
         [:div.margin-item.tooltip.tooltip-bottom-left
          {:alt "Vertical margin"}
          [:span.icon i/auto-margin-both-sides]
-         [:> numeric-input
+         [:> numeric-input*
           {:placeholder "--"
            :on-focus (fn [event]
                        (select-margins true false true false)
@@ -80,7 +80,7 @@
         [:div.margin-item.tooltip.tooltip-bottom-left
          {:alt "Horizontal margin"}
          [:span.icon.rotated i/auto-margin-both-sides]
-         [:> numeric-input
+         [:> numeric-input*
           {:placeholder "--"
            :on-focus (fn [event]
                        (select-margins false true false true)
@@ -100,7 +100,7 @@
                    :m3 "Bottom"
                    :m4 "Left")}
            [:div.input-element.auto
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-focus (fn [event]
                           (select-margin num)
@@ -269,7 +269,7 @@
 
           [:div.tooltip.tooltip-bottom-left.z-index {:alt "z-index"}
            i/layers
-           [:> numeric-input
+           [:> numeric-input*
             {:placeholder "--"
              :on-focus #(dom/select-target %)
              :on-change #(on-change-z-index %)
@@ -317,7 +317,7 @@
                                     "minW" (= item :layout-item-min-w))}
             [:div.input-element
              {:alt   (tr (dm/str "workspace.options.layout-item." (d/name item)))}
-             [:> numeric-input
+             [:> numeric-input*
               {:no-validate true
                :min 0
                :data-wrap true

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs

@@ -18,7 +18,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
@@ -316,7 +316,7 @@
          [:div.row-flex
           [:span.element-set-subtitle (tr "workspace.options.size")]
           [:div.input-element.width {:title (tr "workspace.options.width")}
-           [:> numeric-input {:min 0.01
+           [:> numeric-input* {:min 0.01
                                :no-validate true
                                :placeholder "--"
                                :on-change on-width-change
@@ -324,7 +324,7 @@
                                :value (:width values)}]]
 
           [:div.input-element.height {:title (tr "workspace.options.height")}
-           [:> numeric-input {:min 0.01
+           [:> numeric-input* {:min 0.01
                                :no-validate true
                                :placeholder "--"
                                :on-change on-height-change
@@ -344,13 +344,13 @@
          [:div.row-flex
           [:span.element-set-subtitle (tr "workspace.options.position")]
           [:div.input-element.Xaxis {:title (tr "workspace.options.x")}
-           [:> numeric-input {:no-validate true
+           [:> numeric-input* {:no-validate true
                                :placeholder "--"
                                :on-change on-pos-x-change
                                :disabled disabled-position-x?
                                :value (:x values)}]]
           [:div.input-element.Yaxis {:title (tr "workspace.options.y")}
-           [:> numeric-input {:no-validate true
+           [:> numeric-input* {:no-validate true
                                :placeholder "--"
                                :disabled disabled-position-y?
                                :on-change on-pos-y-change
@@ -361,7 +361,7 @@
          [:div.row-flex
           [:span.element-set-subtitle (tr "workspace.options.rotation")]
           [:div.input-element.degrees {:title (tr "workspace.options.rotation")}
-           [:> numeric-input
+           [:> numeric-input*
             {:no-validate true
              :min 0
              :max 359
@@ -390,7 +390,7 @@
           (cond
             (= radius-mode :radius-1)
             [:div.input-element.mini {:title (tr "workspace.options.radius")}
-             [:> numeric-input
+             [:> numeric-input*
               {:placeholder "--"
                :ref radius-input-ref
                :min 0
@@ -409,28 +409,28 @@
             (= radius-mode :radius-4)
             [:*
              [:div.input-element.mini {:title (tr "workspace.options.radius-top-left")}
-              [:> numeric-input
+              [:> numeric-input*
                {:placeholder "--"
                 :min 0
                 :on-change on-radius-r1-change
                 :value (:r1 values)}]]
 
              [:div.input-element.mini {:title (tr "workspace.options.radius-top-right")}
-              [:> numeric-input
+              [:> numeric-input*
                {:placeholder "--"
                 :min 0
                 :on-change on-radius-r2-change
                 :value (:r2 values)}]]
 
              [:div.input-element.mini {:title (tr "workspace.options.radius-bottom-right")}
-              [:> numeric-input
+              [:> numeric-input*
                {:placeholder "--"
                 :min 0
                 :on-change on-radius-r3-change
                 :value (:r3 values)}]]
 
              [:div.input-element.mini {:title (tr "workspace.options.radius-bottom-left")}
-              [:> numeric-input
+              [:> numeric-input*
                {:placeholder "--"
                 :min 0
                 :on-change on-radius-r4-change

frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs

@@ -15,7 +15,7 @@
    [app.main.data.workspace.colors :as dc]
    [app.main.data.workspace.undo :as dwu]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
@@ -178,7 +178,7 @@
 
        [:div.row-grid-2
         [:div.input-element {:title (tr "workspace.options.shadow-options.offsetx")}
-         [:> numeric-input {:ref adv-offset-x-ref
+         [:> numeric-input* {:ref adv-offset-x-ref
                              :no-validate true
                              :placeholder "--"
                              :on-change (update-attr index :offset-x basic-offset-x-ref)
@@ -187,7 +187,7 @@
          [:span.after (tr "workspace.options.shadow-options.offsetx")]]
 
         [:div.input-element {:title (tr "workspace.options.shadow-options.offsety")}
-         [:> numeric-input {:ref adv-offset-y-ref
+         [:> numeric-input* {:ref adv-offset-y-ref
                              :no-validate true
                              :placeholder "--"
                              :on-change (update-attr index :offset-y basic-offset-y-ref)
@@ -197,7 +197,7 @@
 
        [:div.row-grid-2
         [:div.input-element {:title (tr "workspace.options.shadow-options.blur")}
-         [:> numeric-input {:ref adv-blur-ref
+         [:> numeric-input* {:ref adv-blur-ref
                              :no-validate true
                              :placeholder "--"
                              :on-change (update-attr index :blur basic-blur-ref)
@@ -207,7 +207,7 @@
          [:span.after (tr "workspace.options.shadow-options.blur")]]
 
         [:div.input-element {:title (tr "workspace.options.shadow-options.spread")}
-         [:> numeric-input {:ref adv-spread-ref
+         [:> numeric-input* {:ref adv-spread-ref
                              :no-validate true
                              :placeholder "--"
                              :on-change (update-attr index :spread)

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -19,7 +19,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.editable-select :refer [editable-select]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.radio-buttons :refer [nilable-option radio-buttons]]
    [app.main.ui.components.search-bar :refer [search-bar]]
    [app.main.ui.components.select :refer [select]]
@@ -456,7 +456,7 @@
                 :alt (tr "workspace.options.text-options.line-height")}
          i/text-lineheight-refactor]
 
-        [:> numeric-input
+        [:> numeric-input*
          {:min -200
           :max 200
           :step 0.1
@@ -473,7 +473,7 @@
          {:class (css :icon)
           :alt (tr "workspace.options.text-options.letter-spacing")}
          i/text-letterspacing-refactor]
-        [:> numeric-input
+        [:> numeric-input*
          {:min -200
           :max 200
           :step 0.1
@@ -488,7 +488,7 @@
         [:span.icon-before.tooltip.tooltip-bottom
          {:alt (tr "workspace.options.text-options.line-height")}
          i/line-height]
-        [:> numeric-input
+        [:> numeric-input*
          {:min -200
           :max 200
           :step 0.1
@@ -503,7 +503,7 @@
         [:span.icon-before.tooltip.tooltip-bottom
          {:alt (tr "workspace.options.text-options.letter-spacing")}
          i/letter-spacing]
-        [:> numeric-input
+        [:> numeric-input*
          {:min -200
           :max 200
           :step 0.1

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -14,8 +14,8 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.color-bullet :as cb]
-   [app.main.ui.components.color-input :refer [color-input]]
+   [app.main.ui.components.color-input :refer [color-input*]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.formats :as fmt]
    [app.main.ui.hooks :as h]
@@ -193,7 +193,7 @@
        :else
        [:*
         [:div.color-info
-         [:> color-input {:value (if (uc/multiple? color)
+         [:> color-input* {:value (if (uc/multiple? color)
                                     ""
                                     (-> color :color uc/remove-hash))
                            :placeholder (tr "settings.multiple")
@@ -205,7 +205,7 @@
                    (not (:gradient color)))
           [:div.input-element
            {:class (dom/classnames :percentail (not= (:opacity color) :multiple))}
-           [:> numeric-input {:value (-> color :opacity opacity->string)
+           [:> numeric-input* {:value (-> color :opacity opacity->string)
                                :placeholder (tr "settings.multiple")
                                :select-on-focus select-on-focus
                                :on-focus on-focus

frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs

@@ -7,7 +7,7 @@
 (ns app.main.ui.workspace.sidebar.options.rows.input-row
   (:require
    [app.main.ui.components.editable-select :refer [editable-select]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
    [app.util.object :as obj]
    [rumext.v2 :as mf]))
@@ -40,7 +40,7 @@
                :class "input-text"
                :on-change on-change} ]
 
-      [:> numeric-input
+      [:> numeric-input*
        {:placeholder placeholder
         :min min
         :max max

frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs

@@ -9,7 +9,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
@@ -97,7 +97,7 @@
        {:class (dom/classnames :pixels (not= (:stroke-width stroke) :multiple))
         :title (tr "workspace.options.stroke-width")}
 
-       [:> numeric-input
+       [:> numeric-input*
         {:min 0
          :value (-> (:stroke-width stroke) width->string)
          :placeholder (tr "settings.multiple")