diff --git a/frontend/deps.edn b/frontend/deps.edn index 8febd1edd..2fed348af 100644 --- a/frontend/deps.edn +++ b/frontend/deps.edn @@ -20,8 +20,8 @@ :git/url "https://github.com/funcool/beicon.git"} funcool/rumext - {:git/tag "v2.15" - :git/sha "28783a7" + {:git/tag "v2.18" + :git/sha "b6e8f45" :git/url "https://github.com/funcool/rumext.git"} instaparse/instaparse {:mvn/version "1.5.0"} diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.cljs b/frontend/src/app/main/ui/components/context_menu_a11y.cljs index 04475e7c2..546cec563 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.cljs +++ b/frontend/src/app/main/ui/components/context_menu_a11y.cljs @@ -52,8 +52,6 @@ (sm/lazy-validator schema:option)) (mf/defc context-menu* - {::mf/props :obj} - [{:keys [show on-close options selectable selected top left fixed min-width origin width] :as props}] @@ -90,7 +88,7 @@ (on-close))) props - (mf/spread props :on-close on-local-close) + (mf/spread-props props {:on-close on-local-close}) ids (mf/with-memo [levels] diff --git a/frontend/src/app/main/ui/components/radio_buttons.cljs b/frontend/src/app/main/ui/components/radio_buttons.cljs index 17a3fe594..c51aa6ab4 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.cljs +++ b/frontend/src/app/main/ui/components/radio_buttons.cljs @@ -87,10 +87,16 @@ (dom/blur! input)))) context-value - (mf/spread props - :on-change on-change' - :encode-fn encode-fn - :decode-fn decode-fn)] + (mf/spread-object props + ;; We pass a special metadata for disable + ;; key casing transformation in this + ;; concrete case, because this component + ;; uses legacy mode and props are in + ;; kebab-case style + ^{::mf/transform false} + {:on-change on-change' + :encode-fn encode-fn + :decode-fn decode-fn})] [:& (mf/provider context) {:value context-value} [:div {:class (dm/str class " " (stl/css :radio-btn-wrapper)) diff --git a/frontend/src/app/main/ui/ds/controls/input.cljs b/frontend/src/app/main/ui/ds/controls/input.cljs index 0df0c0c6d..963fe93e6 100644 --- a/frontend/src/app/main/ui/ds/controls/input.cljs +++ b/frontend/src/app/main/ui/ds/controls/input.cljs @@ -30,11 +30,11 @@ (let [ref (or ref (mf/use-ref)) type (d/nilv type "text") props (mf/spread-props props - :class (stl/css-case - :input true - :input-with-icon (some? icon)) - :ref ref - :type type) + {:class (stl/css-case + :input true + :input-with-icon (some? icon)) + :ref ref + :type type}) on-icon-click (mf/use-fn diff --git a/frontend/src/app/main/ui/ds/storybook.cljs b/frontend/src/app/main/ui/ds/storybook.cljs index d503f3a8f..bec97b7b0 100644 --- a/frontend/src/app/main/ui/ds/storybook.cljs +++ b/frontend/src/app/main/ui/ds/storybook.cljs @@ -1,4 +1,3 @@ - ;; This Source Code Form is subject to the terms of the Mozilla Public ;; License, v. 2.0. If a copy of the MPL was not distributed with this ;; file, You can obtain one at http://mozilla.org/MPL/2.0/. @@ -16,9 +15,9 @@ {::mf/props :obj} [{:keys [children size style] :rest other}] (let [class (stl/css :story-grid) - size (or size 16) - style (or style {}) - style (mf/spread style :--component-grid-size (dm/str size "px")) + size (or size 16) + style (or style #js {}) + style (mf/spread-props style {"--component-grid-size" (dm/str size "px")}) props (mf/spread-props other {:class class :style style})] [:> "article" props children])) @@ -41,4 +40,4 @@ [{:keys [children] :rest other}] (let [class (stl/css :story-grid-row) props (mf/spread-props other {:class class})] - [:> "article" props children])) \ No newline at end of file + [:> "article" props children])) diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs index 8261cea2b..8e160a564 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/context_menu.cljs @@ -536,7 +536,7 @@ [{:keys [mdata]}] (let [{:keys [disable-booleans disable-flatten]} mdata shapes (mf/deref refs/selected-objects) - props (mf/spread-props + props (mf/props {:shapes shapes :disable-booleans disable-booleans :disable-flatten disable-flatten})] diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 80f8a0379..e4c0cd93f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -25,7 +25,7 @@ [app.main.ui.workspace.sidebar.debug-shape-info :refer [debug-shape-info]] [app.main.ui.workspace.sidebar.history :refer [history-toolbox]] [app.main.ui.workspace.sidebar.layers :refer [layers-toolbox]] - [app.main.ui.workspace.sidebar.options :refer [options-toolbox]] + [app.main.ui.workspace.sidebar.options :refer [options-toolbox*]] [app.main.ui.workspace.sidebar.shortcuts :refer [shortcuts-container]] [app.main.ui.workspace.sidebar.sitemap :refer [sitemap]] [app.main.ui.workspace.sidebar.versions :refer [versions-toolbox]] @@ -212,9 +212,9 @@ (set-size (if (> size 276) 276 768)))) props - (mf/spread props - :on-change-section handle-change-section - :on-expand handle-expand) + (mf/spread-props props + {:on-change-section handle-change-section + :on-expand handle-expand}) history-tab (mf/html @@ -234,7 +234,7 @@ :id "right-sidebar-aside" :data-testid "right-sidebar" :data-size (str size) - :style #js {"--width" (if can-be-expanded? (dm/str size "px") "276px")}} + :style {"--width" (if can-be-expanded? (dm/str size "px") "276px")}} (when can-be-expanded? [:div {:class (stl/css :resize-area) :on-pointer-down on-pointer-down @@ -251,11 +251,17 @@ [:> comments-sidebar* {}] (true? is-history?) - [:> tab-switcher* - {:tabs #js [#js {:label (tr "workspace.versions.tab.history") :id "history" :content versions-tab} - #js {:label (tr "workspace.versions.tab.actions") :id "actions" :content history-tab}] - :default-selected "history" - :class (stl/css :left-sidebar-tabs)}] + (let [tabs (mf/object + [{:label (tr "workspace.versions.tab.history") + :id "history" + :content versions-tab} + {:label (tr "workspace.versions.tab.actions") + :id "actions" + :content history-tab}])] + [:> tab-switcher* + {:tabs tabs + :default-selected "history" + :class (stl/css :left-sidebar-tabs)}]) :else - [:> options-toolbox props])]]])) + [:> options-toolbox* props])]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 9dd8d234a..491b86707 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -43,7 +43,7 @@ [{:keys [selected] :as props}] (let [pending-selected (mf/use-var selected) current-selected (mf/use-state selected) - props (mf/spread props :selected @current-selected) + props (mf/spread-object props {:selected @current-selected}) set-selected (mf/use-memo diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index ebf93ffb8..f8fd19e1a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs @@ -129,9 +129,9 @@ :file-id file-id :shared-libs shared-libs}])])) -(mf/defc options-content +(mf/defc options-content* {::mf/memo true - ::mf/props :obj} + ::mf/private true} [{:keys [selected shapes shapes-with-children page-id file-id on-change-section on-expand]}] (let [objects (mf/deref refs/workspace-page-objects) permissions (mf/use-ctx ctx/permissions) @@ -202,20 +202,19 @@ ;; selected-objects-with-children are derefed always but they only ;; need on multiple selection in majority of cases -(mf/defc options-toolbox - {::mf/memo true - ::mf/props :obj} +(mf/defc options-toolbox* + {::mf/memo true} [{:keys [section selected on-change-section on-expand]}] (let [page-id (mf/use-ctx ctx/current-page-id) file-id (mf/use-ctx ctx/current-file-id) shapes (mf/deref refs/selected-objects) shapes-with-children (mf/deref refs/selected-shapes-with-children)] - [:& options-content {:shapes shapes - :selected selected - :shapes-with-children shapes-with-children - :file-id file-id - :page-id page-id - :section section - :on-change-section on-change-section - :on-expand on-expand}])) + [:> options-content* {:shapes shapes + :selected selected + :shapes-with-children shapes-with-children + :file-id file-id + :page-id page-id + :section section + :on-change-section on-change-section + :on-expand on-expand}])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 57cf42d9d..b1b1a1c7e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -456,7 +456,7 @@ type (if (= type "multiple") :simple :multiple)] (on-type-change type)))) - props (mf/spread props {:on-change on-change})] + props (mf/spread-object props {:on-change on-change})] (mf/with-effect [] ;; on destroy component diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index 681e879f3..21a5c5faf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -43,8 +43,7 @@ [prop] (select-margins (= prop :m1) (= prop :m2) (= prop :m3) (= prop :m4))) -(mf/defc margin-simple - {::mf/props :obj} +(mf/defc margin-simple* [{:keys [value on-change on-blur]}] (let [m1 (:m1 value) m2 (:m2 value) @@ -103,8 +102,7 @@ :nillable true :value m2}]]])) -(mf/defc margin-multiple - {::mf/props :obj} +(mf/defc margin-multiple* [{:keys [value on-change on-blur]}] (let [m1 (:m1 value) m2 (:m2 value) @@ -182,14 +180,13 @@ :value m4}]]])) -(mf/defc margin-section - {::mf/props :obj - ::mf/private true +(mf/defc margin-section* + {::mf/private true ::mf/expect-props #{:value :type :on-type-change :on-change}} [{:keys [type on-type-change] :as props}] (let [type (d/nilv type :simple) on-blur (mf/use-fn #(select-margins false false false false)) - props (mf/spread props :on-blur on-blur) + props (mf/spread-props props {:on-blur on-blur}) on-type-change' (mf/use-fn @@ -206,10 +203,10 @@ [:div {:class (stl/css :inputs-wrapper)} (cond (= type :simple) - [:> margin-simple props] + [:> margin-simple* props] (= type :multiple) - [:> margin-multiple props])] + [:> margin-multiple* props])] [:button {:class (stl/css-case :margin-mode true @@ -500,10 +497,10 @@ (when is-layout-child? [:div {:class (stl/css :row)} - [:& margin-section {:value (:layout-item-margin values) - :type (:layout-item-margin-type values) - :on-type-change on-margin-type-change - :on-change on-margin-change}]]) + [:> margin-section* {:value (:layout-item-margin values) + :type (:layout-item-margin-type values) + :on-type-change on-margin-type-change + :on-change on-margin-change}]]) (when (or (= h-sizing :fill) (= v-sizing :fill))