From 710a357a6ec0946158d51da66e02292c7afd7fea Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Thu, 15 Feb 2024 18:03:25 +0100
Subject: [PATCH 1/9] :zap: Optimize the `margin-section` react component

---
 .../sidebar/options/menus/layout_item.cljs    | 292 +++++++++++-------
 1 file changed, 178 insertions(+), 114 deletions(-)

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 6929eb505..8e8a2de0b 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
@@ -8,7 +8,6 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
-   [app.common.data.macros :as dm]
    [app.common.types.shape.layout :as ctl]
    [app.main.data.workspace :as udw]
    [app.main.data.workspace.shape-layout :as dwsl]
@@ -36,123 +35,188 @@
    :layout-item-absolute
    :layout-item-z-index])
 
+(defn- select-margins
+  [m1? m2? m3? m4?]
+  (st/emit! (udw/set-margins-selected {:m1 m1? :m2 m2? :m3 m3? :m4 m4?})))
+
+(defn- select-margin
+  [prop]
+  (select-margins (= prop :m1) (= prop :m2) (= prop :m3) (= prop :m4)))
+
+(mf/defc margin-simple
+  {::mf/props :obj}
+  [{:keys [values on-change on-blur]}]
+  (let [m1 (:m1 values)
+        m2 (:m2 values)
+        m3 (:m3 values)
+        m4 (:m4 values)
+
+        m1 (when (and (not= values :multiple) (= m1 m3)) m1)
+        m2 (when (and (not= values :multiple) (= m2 m4)) m2)
+
+        on-focus
+        (mf/use-fn
+         (fn [event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "name")
+                          (keyword))]
+             (case attr
+               :m1 (select-margins true false true false)
+               :m2 (select-margins false true false true))
+
+             (dom/select-target event))))
+
+        on-change'
+        (mf/use-fn
+         (mf/deps on-change)
+         (fn [value event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "name")
+                          (keyword))]
+             (on-change :simple attr value))))]
+
+
+    [:div {:class (stl/css :margin-simple)}
+     [:div {:class (stl/css :vertical-margin)
+            :title "Vertical margin"}
+      [:span {:class (stl/css :icon)}
+       i/margin-top-bottom-refactor]
+      [:> numeric-input* {:class (stl/css :numeric-input)
+                          :placeholder "--"
+                          :data-name "m1"
+                          :on-focus on-focus
+                          :on-change on-change'
+                          :on-blur on-blur
+                          :nillable true
+                          :value m1}]]
+
+     [:div {:class (stl/css :horizontal-margin)
+            :title "Horizontal margin"}
+      [:span {:class (stl/css :icon)}
+       i/margin-left-right-refactor]
+      [:> numeric-input* {:class (stl/css :numeric-input)
+                          :placeholder "--"
+                          :data-name "m2"
+                          :on-focus on-focus
+                          :on-change on-change'
+                          :on-blur on-blur
+                          :nillable true
+                          :value m2}]]]))
+
+(mf/defc margin-multiple
+  {::mf/props :obj}
+  [{:keys [values on-change on-blur]}]
+  (let [margin (:layout-item-margin values)
+        m1     (:m1 margin)
+        m2     (:m2 margin)
+        m3     (:m3 margin)
+        m4     (:m4 margin)
+
+        on-focus
+        (mf/use-fn
+         (fn [event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "name")
+                          (keyword))]
+             (select-margin attr)
+             (dom/select-target event))))
+
+        on-change'
+        (mf/use-fn
+         (mf/deps on-change)
+         (fn [value event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "name")
+                          (keyword))]
+             (on-change :multiple attr value))))]
+
+    [:div {:class (stl/css :margin-multiple)}
+     [:div {:class (stl/css :top-margin)
+            :title "Top margin"}
+      [:span {:class (stl/css :icon)}
+       i/margin-top-refactor]
+      [:> numeric-input* {:class (stl/css :numeric-input)
+                          :placeholder "--"
+                          :data-name "m1"
+                          :on-focus on-focus
+                          :on-change on-change'
+                          :on-blur on-blur
+                          :nillable true
+                          :value m1}]]
+     [:div {:class (stl/css :right-margin)
+            :title "Right margin"}
+      [:span {:class (stl/css :icon)}
+       i/margin-right-refactor]
+      [:> numeric-input* {:class (stl/css :numeric-input)
+                          :placeholder "--"
+                          :data-name "m2"
+                          :on-focus on-focus
+                          :on-change on-change'
+                          :on-blur on-blur
+                          :nillable true
+                          :value m2}]]
+
+     [:div {:class (stl/css :bottom-margin)
+            :title "Bottom margin"}
+      [:span {:class (stl/css :icon)}
+       i/margin-bottom-refactor]
+      [:> numeric-input* {:class (stl/css :numeric-input)
+                          :placeholder "--"
+                          :data-name "m3"
+                          :on-focus on-focus
+                          :on-change on-change'
+                          :on-blur on-blur
+                          :nillable true
+                          :value m3}]]
+
+     [:div {:class (stl/css :left-margin)
+            :title "Left margin"}
+      [:span {:class (stl/css :icon)}
+       i/margin-left-refactor]
+      [:> numeric-input* {:class (stl/css :numeric-input)
+                          :placeholder "--"
+                          :data-name "m4"
+                          :on-focus on-focus
+                          :on-change on-change'
+                          :on-blur on-blur
+                          :nillable true
+                          :value m4}]]]))
+
+
 (mf/defc margin-section
-  [{:keys [values change-margin-style on-margin-change] :as props}]
+  {::mf/props :obj
+   ::mf/private true
+   ::mf/expected-props #{:values :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-obj props {:on-blur on-blur})
 
-  (let [margin-type    (or (:layout-item-margin-type values) :simple)
-        m1             (when (and (not (= :multiple (:layout-item-margin values)))
-                                  (= (dm/get-in values [:layout-item-margin :m1])
-                                     (dm/get-in values [:layout-item-margin :m3])))
-                         (dm/get-in values [:layout-item-margin :m1]))
+        on-type-change'
+        (mf/use-fn
+         (mf/deps type on-type-change)
+         (fn [_]
+           (if (= type :multiple)
+             (on-type-change :simple)
+             (on-type-change :multiple))))]
 
-        m2             (when (and (not (= :multiple (:layout-item-margin values)))
-                                  (= (dm/get-in values [:layout-item-margin :m2])
-                                     (dm/get-in values [:layout-item-margin :m4])))
-                         (dm/get-in values [:layout-item-margin :m2]))
-        select-margins
-        (fn [m1? m2? m3? m4?]
-          (st/emit! (udw/set-margins-selected {:m1 m1? :m2 m2? :m3 m3? :m4 m4?})))
-
-        select-margin #(select-margins (= % :m1) (= % :m2) (= % :m3) (= % :m4))]
-
-    (mf/use-effect
-     (fn []
-       (fn []
-         ;;on destroy component
-         (select-margins false false false false))))
+    (mf/with-effect []
+      (fn [] (on-blur)))
 
     [:div {:class (stl/css :margin-row)}
      [:div {:class (stl/css :inputs-wrapper)}
       (cond
-        (= margin-type :simple)
-        [:div {:class (stl/css :margin-simple)}
-         [:div {:class (stl/css :vertical-margin)
-                :title "Vertical margin"}
-          [:span {:class (stl/css :icon)}
-           i/margin-top-bottom-refactor]
-          [:> numeric-input* {:className (stl/css :numeric-input)
-                              :placeholder "--"
-                              :nillable true
-                              :value m1
-                              :on-focus (fn [event]
-                                          (select-margins true false true false)
-                                          (dom/select-target event))
-                              :on-change  (partial on-margin-change :simple :m1)
-                              :on-blur #(select-margins false false false false)}]]
+        (= type :simple)
+        [:> margin-simple props]
 
-         [:div {:class (stl/css :horizontal-margin)
-                :title "Horizontal margin"}
-          [:span {:class (stl/css :icon)}
-           i/margin-left-right-refactor]
-          [:> numeric-input* {:className (stl/css :numeric-input)
-                              :placeholder "--"
-                              :on-focus (fn [event]
-                                          (select-margins false true false true)
-                                          (dom/select-target event))
-                              :on-change (partial on-margin-change :simple :m2)
-                              :on-blur #(select-margins false false false false)
-                              :nillable true
-                              :value m2}]]]
+        (= type :multiple)
+        [:> margin-multiple props])]
 
-        (= margin-type :multiple)
-        [:div {:class (stl/css :margin-multiple)}
-         [:div {:class (stl/css :top-margin)
-                :title "Top margin"}
-          [:span {:class (stl/css :icon)}
-           i/margin-top-refactor]
-          [:> numeric-input* {:className (stl/css :numeric-input)
-                              :placeholder "--"
-                              :on-focus (fn [event]
-                                          (select-margin :m1)
-                                          (dom/select-target event))
-                              :on-change (partial on-margin-change :multiple :m1)
-                              :on-blur #(select-margins false false false false)
-                              :nillable true
-                              :value (:m1 (:layout-item-margin values))}]]
-         [:div {:class (stl/css :right-margin)
-                :title "Right margin"}
-          [:span {:class (stl/css :icon)}
-           i/margin-right-refactor]
-          [:> numeric-input* {:className (stl/css :numeric-input)
-                              :placeholder "--"
-                              :on-focus (fn [event]
-                                          (select-margin :m2)
-                                          (dom/select-target event))
-                              :on-change (partial on-margin-change :multiple :m2)
-                              :on-blur #(select-margins false false false false)
-                              :nillable true
-                              :value (:m2 (:layout-item-margin values))}]]
-
-         [:div {:class (stl/css :bottom-margin)
-                :title "Bottom margin"}
-          [:span {:class (stl/css :icon)}
-           i/margin-bottom-refactor]
-          [:> numeric-input* {:className (stl/css :numeric-input)
-                              :placeholder "--"
-                              :on-focus (fn [event]
-                                          (select-margin :m3)
-                                          (dom/select-target event))
-                              :on-change (partial on-margin-change :multiple :m3)
-                              :on-blur #(select-margins false false false false)
-                              :nillable true
-                              :value (:m3 (:layout-item-margin values))}]]
-         [:div {:class (stl/css :left-margin)
-                :title "Left margin"}
-          [:span {:class (stl/css :icon)}
-           i/margin-left-refactor]
-          [:> numeric-input* {:className (stl/css :numeric-input)
-                              :placeholder "--"
-                              :on-focus (fn [event]
-                                          (select-margin :m4)
-                                          (dom/select-target event))
-                              :on-change (partial on-margin-change :multiple :m4)
-                              :on-blur #(select-margins false false false false)
-                              :nillable true
-                              :value (:m4 (:layout-item-margin values))}]]])]
-     [:button {:class (stl/css-case :margin-mode true
-                                    :selected (= margin-type :multiple))
+     [:button {:class (stl/css-case
+                       :margin-mode true
+                       :selected (= type :multiple))
                :title "Margin - multiple"
-               :on-click #(change-margin-style (if (= margin-type :multiple) :simple :multiple))}
+               :on-click on-type-change'}
       i/margin-refactor]]))
 
 (mf/defc element-behaviour-horizontal
@@ -297,7 +361,7 @@
 
         ;; Margin
 
-        change-margin-style
+        on-change-margin-type
         (fn [type]
           (st/emit! (dwsl/update-layout-child ids {:layout-item-margin-type type})))
 
@@ -418,9 +482,10 @@
 
         (when is-layout-child?
           [:div {:class (stl/css :row)}
-           [:& margin-section {:values values
-                               :change-margin-style change-margin-style
-                               :on-margin-change on-margin-change}]])
+           [:& margin-section {:values (:layout-item-margin values)
+                               :type (:layout-item-margin-type values)
+                               :on-type-change on-change-margin-type
+                               :on-change on-margin-change}]])
 
         (when (or (= (:layout-item-h-sizing values) :fill)
                   (= (:layout-item-v-sizing values) :fill))
@@ -446,8 +511,7 @@
 
                [:div {:class (stl/css :layout-item-max-w)
                       :title (tr "workspace.options.layout-item.layout-item-max-w")}
-                [:span {:class (stl/css :icon-text)}
-                 "MAX W"]
+                [:span {:class (stl/css :icon-text)} "MAX W"]
                 [:> numeric-input*
                  {:className (stl/css :numeric-input)
                   :no-validate true

From c7582e7887764f291b0385b2bfa420b00b7880fc Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Fri, 16 Feb 2024 10:34:25 +0100
Subject: [PATCH 2/9] :zap: Optimize the `element-behaviour-horizontal` react
 component

---
 .../sidebar/options/menus/layout_item.cljs      | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

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 8e8a2de0b..e9bc26945 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
@@ -220,11 +220,12 @@
       i/margin-refactor]]))
 
 (mf/defc element-behaviour-horizontal
-  [{:keys [auto? fill? layout-item-sizing on-change] :as props}]
+  {::mf/props :obj}
+  [{:keys [^boolean auto ^boolean fill layout-item-sizing on-change]}]
   [:div {:class (stl/css-case :horizontal-behaviour true
-                              :one-element (and (not fill?) (not auto?))
-                              :two-element (or fill? auto?)
-                              :three-element (and fill? auto?))}
+                              :one-element (and (not fill) (not auto))
+                              :two-element (or fill auto)
+                              :three-element (and fill auto))}
    [:& radio-buttons {:selected  (d/name layout-item-sizing)
                       :on-change on-change
                       :wide      true
@@ -233,12 +234,12 @@
                       :icon  i/fixed-width-refactor
                       :title "Fix width"
                       :id    "behaviour-h-fix"}]
-    (when fill?
+    (when fill
       [:& radio-button {:value "fill"
                         :icon  i/fill-content-refactor
                         :title "Width 100%"
                         :id    "behaviour-h-fill"}])
-    (when auto?
+    (when auto
       [:& radio-button {:value "auto"
                         :icon  i/hug-content-refactor
                         :title "Fit content"
@@ -281,8 +282,8 @@
            on-change-behaviour-v-refactor] :as props}]
   [:div {:class (stl/css-case :behaviour-menu true
                               :wrap (and fill? auto?))}
-   [:& element-behaviour-horizontal {:auto? auto?
-                                     :fill? fill?
+   [:& element-behaviour-horizontal {:auto auto?
+                                     :fill fill?
                                      :layout-item-sizing layout-item-h-sizing
                                      :on-change on-change-behaviour-h-refactor}]
    [:& element-behaviour-vertical {:auto? auto?

From ed336724a0c74edc91402b8e604440a575878da0 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Fri, 16 Feb 2024 10:36:56 +0100
Subject: [PATCH 3/9] :zap: Optimize the `element-behaviour-vertical` react
 component

---
 .../sidebar/options/menus/layout_item.cljs      | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

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 e9bc26945..2a217f4ad 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
@@ -246,11 +246,12 @@
                         :id    "behaviour-h-auto"}])]])
 
 (mf/defc element-behaviour-vertical
-  [{:keys [auto? fill? layout-item-sizing on-change] :as props}]
+  {::mf/props :obj}
+  [{:keys [^boolean auto ^boolean fill layout-item-sizing on-change]}]
   [:div {:class (stl/css-case :vertical-behaviour true
-                              :one-element (and (not fill?) (not auto?))
-                              :two-element (or fill? auto?)
-                              :three-element (and fill? auto?))}
+                              :one-element (and (not fill) (not auto))
+                              :two-element (or fill auto)
+                              :three-element (and fill auto))}
    [:& radio-buttons {:selected  (d/name layout-item-sizing)
                       :on-change on-change
                       :wide      true
@@ -260,13 +261,13 @@
                       :icon-class (stl/css :rotated)
                       :title      "Fix height"
                       :id         "behaviour-v-fix"}]
-    (when fill?
+    (when fill
       [:& radio-button {:value      "fill"
                         :icon       i/fill-content-refactor
                         :icon-class (stl/css :rotated)
                         :title      "Height 100%"
                         :id         "behaviour-v-fill"}])
-    (when auto?
+    (when auto
       [:& radio-button {:value      "auto"
                         :icon       i/hug-content-refactor
                         :icon-class (stl/css :rotated)
@@ -286,8 +287,8 @@
                                      :fill fill?
                                      :layout-item-sizing layout-item-h-sizing
                                      :on-change on-change-behaviour-h-refactor}]
-   [:& element-behaviour-vertical {:auto? auto?
-                                   :fill? fill?
+   [:& element-behaviour-vertical {:auto auto?
+                                   :fill fill?
                                    :layout-item-sizing layout-item-v-sizing
                                    :on-change on-change-behaviour-v-refactor}]])
 

From 71681532cdc08e8f47812d61d8c74b913d9480cf Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Fri, 16 Feb 2024 11:36:51 +0100
Subject: [PATCH 4/9] :zap: Optimize the `element-behaviour` react component

---
 .../sidebar/options/menus/layout_item.cljs    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

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 2a217f4ad..28b0075c4 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
@@ -275,20 +275,20 @@
                         :id         "behaviour-v-auto"}])]])
 
 (mf/defc element-behaviour
-  [{:keys [auto?
-           fill?
+  {::mf/props :obj}
+  [{:keys [^boolean auto ^boolean fill
            layout-item-h-sizing
            layout-item-v-sizing
            on-change-behaviour-h-refactor
-           on-change-behaviour-v-refactor] :as props}]
+           on-change-behaviour-v-refactor]}]
   [:div {:class (stl/css-case :behaviour-menu true
-                              :wrap (and fill? auto?))}
-   [:& element-behaviour-horizontal {:auto auto?
-                                     :fill fill?
+                              :wrap (and fill auto))}
+   [:& element-behaviour-horizontal {:auto auto
+                                     :fill fill
                                      :layout-item-sizing layout-item-h-sizing
                                      :on-change on-change-behaviour-h-refactor}]
-   [:& element-behaviour-vertical {:auto auto?
-                                   :fill fill?
+   [:& element-behaviour-vertical {:auto auto
+                                   :fill fill
                                    :layout-item-sizing layout-item-v-sizing
                                    :on-change on-change-behaviour-v-refactor}]])
 
@@ -468,8 +468,8 @@
               :value (:layout-item-z-index values)}]]])
 
         [:div {:class (stl/css :row)}
-         [:& element-behaviour {:fill? is-layout-child?
-                                :auto? is-layout-container?
+         [:& element-behaviour {:fill is-layout-child?
+                                :auto is-layout-container?
                                 :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix)
                                 :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix)
                                 :on-change-behaviour-h-refactor on-change-behaviour-h

From 46fca11b380e75adfb9a8701c3ee06e21c34f553 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Fri, 16 Feb 2024 11:39:17 +0100
Subject: [PATCH 5/9] :zap: Optimize the `align-self-row` react component

---
 .../workspace/sidebar/options/menus/layout_item.cljs  | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

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 28b0075c4..927f17765 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
@@ -293,21 +293,22 @@
                                    :on-change on-change-behaviour-v-refactor}]])
 
 (mf/defc align-self-row
-  [{:keys [is-col? align-self on-change] :as props}]
+  {::mf/props :obj}
+  [{:keys [^boolean is-col align-self on-change]}]
   [:& radio-buttons {:selected (d/name align-self)
                      :on-change on-change
                      :name "flex-align-self"
                      :allow-empty true}
    [:& radio-button {:value "start"
-                     :icon  (get-layout-flex-icon :align-self :start is-col?)
+                     :icon  (get-layout-flex-icon :align-self :start is-col)
                      :title "Align self start"
                      :id     "align-self-start"}]
    [:& radio-button {:value "center"
-                     :icon  (get-layout-flex-icon :align-self :center is-col?)
+                     :icon  (get-layout-flex-icon :align-self :center is-col)
                      :title "Align self center"
                      :id    "align-self-center"}]
    [:& radio-button {:value "end"
-                     :icon  (get-layout-flex-icon :align-self :end is-col?)
+                     :icon  (get-layout-flex-icon :align-self :end is-col)
                      :title "Align self end"
                      :id    "align-self-end"}]])
 
@@ -478,7 +479,7 @@
 
         (when (and is-layout-child? is-flex-parent?)
           [:div {:class (stl/css :row)}
-           [:& align-self-row {:is-col? is-col?
+           [:& align-self-row {:is-col is-col?
                                :align-self align-self
                                :on-change set-align-self}]])
 

From a1a9519cf5e010d0a0233b662351ea84a1226034 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Fri, 16 Feb 2024 12:06:26 +0100
Subject: [PATCH 6/9] :zap: Optimize the `layout-item-menu` react component

---
 .../sidebar/options/menus/layout_item.cljs    | 64 ++++++++++++-------
 1 file changed, 42 insertions(+), 22 deletions(-)

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 927f17765..7e14f7a15 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
@@ -313,36 +313,52 @@
                      :id    "align-self-end"}]])
 
 (mf/defc layout-item-menu
-  {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?" "is-grid-parent?" "is-flex-parent?"]))]}
-  [{:keys [ids values is-layout-child? is-layout-container? is-grid-parent? is-flex-parent? is-flex-layout? is-grid-layout?] :as props}]
+  {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?" "is-grid-parent?" "is-flex-parent?"]))]
+   ::mf/props :obj}
+  [{:keys [ids values
+           ^boolean is-layout-child?
+           ^boolean is-layout-container?
+           ^boolean is-grid-parent?
+           ^boolean is-flex-parent?
+           ^boolean is-flex-layout?
+           ^boolean is-grid-layout?]}]
 
   (let [selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
         selection-parents     (mf/deref selection-parents-ref)
 
         is-absolute?          (:layout-item-absolute values)
 
-        is-col? (every? ctl/col? selection-parents)
+        is-col?               (every? ctl/col? selection-parents)
 
-        is-layout-child? (and is-layout-child? (not is-absolute?))
+        is-layout-child?      (and is-layout-child? (not is-absolute?))
 
-        state*                 (mf/use-state true)
-        open?                  (deref state*)
-        toggle-content         (mf/use-fn #(swap! state* not))
-        has-content?           (or is-layout-child? is-flex-parent? is-grid-parent? is-layout-container?)
+        state*                (mf/use-state true)
+        open?                 (deref state*)
+
+        toggle-content        (mf/use-fn #(swap! state* not))
+        has-content?          (or ^boolean is-layout-child?
+                                  ^boolean is-flex-parent?
+                                  ^boolean is-grid-parent?
+                                  ^boolean is-layout-container?)
 
         ;; Align self
 
-        align-self         (:layout-item-align-self values)
+        align-self           (:layout-item-align-self values)
 
         title
         (cond
-          (and is-layout-container? (not is-layout-child?) is-flex-layout?)
+          (and is-layout-container?
+               is-flex-layout?
+               (not is-layout-child?))
           "Flex board"
 
-          (and is-layout-container? (not is-layout-child?) is-grid-layout?)
+          (and is-layout-container?
+               is-grid-layout?
+               (not is-layout-child?))
           "Grid board"
 
-          (and is-layout-container? (not is-layout-child?))
+          (and is-layout-container?
+               (not is-layout-child?))
           "Layout board"
 
           is-flex-parent?
@@ -365,20 +381,24 @@
         ;; Margin
 
         on-change-margin-type
-        (fn [type]
-          (st/emit! (dwsl/update-layout-child ids {:layout-item-margin-type type})))
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [type]
+           (st/emit! (dwsl/update-layout-child ids {:layout-item-margin-type type}))))
 
         on-margin-change
-        (fn [type prop val]
-          (cond
-            (and (= type :simple) (= prop :m1))
-            (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m1 val :m3 val}}))
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [type prop val]
+           (cond
+             (and (= type :simple) (= prop :m1))
+             (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m1 val :m3 val}}))
 
-            (and (= type :simple) (= prop :m2))
-            (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m2 val :m4 val}}))
+             (and (= type :simple) (= prop :m2))
+             (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m2 val :m4 val}}))
 
-            :else
-            (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}}))))
+             :else
+             (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}})))))
 
         ;; Behaviour
 

From 1e7a2b575faa376375f927cbda1dea0c75476384 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Fri, 16 Feb 2024 13:32:04 +0100
Subject: [PATCH 7/9] :lipstick: Add mostly cosmetic changes to `layout-item`
 ns code

---
 .../sidebar/options/menus/layout_item.cljs    | 221 +++++++++---------
 1 file changed, 111 insertions(+), 110 deletions(-)

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 7e14f7a15..c72bd4adb 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
@@ -221,76 +221,94 @@
 
 (mf/defc element-behaviour-horizontal
   {::mf/props :obj}
-  [{:keys [^boolean auto ^boolean fill layout-item-sizing on-change]}]
+  [{:keys [^boolean is-auto ^boolean has-fill item-sizing on-change]}]
   [:div {:class (stl/css-case :horizontal-behaviour true
-                              :one-element (and (not fill) (not auto))
-                              :two-element (or fill auto)
-                              :three-element (and fill auto))}
-   [:& radio-buttons {:selected  (d/name layout-item-sizing)
-                      :on-change on-change
-                      :wide      true
-                      :name      "flex-behaviour-h"}
-    [:& radio-button {:value "fix"
-                      :icon  i/fixed-width-refactor
-                      :title "Fix width"
-                      :id    "behaviour-h-fix"}]
-    (when fill
-      [:& radio-button {:value "fill"
-                        :icon  i/fill-content-refactor
-                        :title "Width 100%"
-                        :id    "behaviour-h-fill"}])
-    (when auto
-      [:& radio-button {:value "auto"
-                        :icon  i/hug-content-refactor
-                        :title "Fit content"
-                        :id    "behaviour-h-auto"}])]])
+                              :one-element (and (not has-fill) (not is-auto))
+                              :two-element (or has-fill is-auto)
+                              :three-element (and has-fill is-auto))}
+   [:& radio-buttons
+    {:selected  (d/name item-sizing)
+     :on-change on-change
+     :wide      true
+     :name      "flex-behaviour-h"}
+
+    [:& radio-button
+     {:value "fix"
+      :icon  i/fixed-width-refactor
+      :title "Fix width"
+      :id    "behaviour-h-fix"}]
+
+    (when has-fill
+      [:& radio-button
+       {:value "fill"
+        :icon  i/fill-content-refactor
+        :title "Width 100%"
+        :id    "behaviour-h-fill"}])
+    (when is-auto
+      [:& radio-button
+       {:value "auto"
+        :icon  i/hug-content-refactor
+        :title "Fit content"
+        :id    "behaviour-h-auto"}])]])
 
 (mf/defc element-behaviour-vertical
   {::mf/props :obj}
-  [{:keys [^boolean auto ^boolean fill layout-item-sizing on-change]}]
+  [{:keys [^boolean is-auto ^boolean has-fill item-sizing on-change]}]
   [:div {:class (stl/css-case :vertical-behaviour true
-                              :one-element (and (not fill) (not auto))
-                              :two-element (or fill auto)
-                              :three-element (and fill auto))}
-   [:& radio-buttons {:selected  (d/name layout-item-sizing)
-                      :on-change on-change
-                      :wide      true
-                      :name      "flex-behaviour-v"}
-    [:& radio-button {:value      "fix"
-                      :icon       i/fixed-width-refactor
-                      :icon-class (stl/css :rotated)
-                      :title      "Fix height"
-                      :id         "behaviour-v-fix"}]
-    (when fill
-      [:& radio-button {:value      "fill"
-                        :icon       i/fill-content-refactor
-                        :icon-class (stl/css :rotated)
-                        :title      "Height 100%"
-                        :id         "behaviour-v-fill"}])
-    (when auto
-      [:& radio-button {:value      "auto"
-                        :icon       i/hug-content-refactor
-                        :icon-class (stl/css :rotated)
-                        :title      "Fit content"
-                        :id         "behaviour-v-auto"}])]])
+                              :one-element (and (not has-fill) (not is-auto))
+                              :two-element (or has-fill is-auto)
+                              :three-element (and has-fill is-auto))}
+   [:& radio-buttons
+    {:selected  (d/name item-sizing)
+     :on-change on-change
+     :wide      true
+     :name      "flex-behaviour-v"}
+
+    [:& radio-button
+     {:value      "fix"
+      :icon       i/fixed-width-refactor
+      :icon-class (stl/css :rotated)
+      :title      "Fix height"
+      :id         "behaviour-v-fix"}]
+
+    (when has-fill
+      [:& radio-button
+       {:value      "fill"
+        :icon       i/fill-content-refactor
+        :icon-class (stl/css :rotated)
+        :title      "Height 100%"
+        :id         "behaviour-v-fill"}])
+    (when is-auto
+      [:& radio-button
+       {:value      "auto"
+        :icon       i/hug-content-refactor
+        :icon-class (stl/css :rotated)
+        :title      "Fit content"
+        :id         "behaviour-v-auto"}])]])
 
 (mf/defc element-behaviour
-  {::mf/props :obj}
-  [{:keys [^boolean auto ^boolean fill
-           layout-item-h-sizing
-           layout-item-v-sizing
-           on-change-behaviour-h-refactor
-           on-change-behaviour-v-refactor]}]
-  [:div {:class (stl/css-case :behaviour-menu true
-                              :wrap (and fill auto))}
-   [:& element-behaviour-horizontal {:auto auto
-                                     :fill fill
-                                     :layout-item-sizing layout-item-h-sizing
-                                     :on-change on-change-behaviour-h-refactor}]
-   [:& element-behaviour-vertical {:auto auto
-                                   :fill fill
-                                   :layout-item-sizing layout-item-v-sizing
-                                   :on-change on-change-behaviour-v-refactor}]])
+  {::mf/props :obj
+   ::mf/private true}
+  [{:keys [^boolean is-auto
+           ^boolean has-fill
+           item-h-sizing
+           item-v-sizing
+           on-h-change
+           on-v-change]}]
+  [:div {:class (stl/css-case
+                 :behaviour-menu true
+                 :wrap (and has-fill is-auto))}
+
+   [:& element-behaviour-horizontal
+    {:is-auto is-auto
+     :has-fill has-fill
+     :item-sizing item-h-sizing
+     :on-change on-h-change}]
+   [:& element-behaviour-vertical
+    {:is-auto is-auto
+     :has-fill has-fill
+     :item-sizing item-v-sizing
+     :on-change on-v-change}]])
 
 (mf/defc align-self-row
   {::mf/props :obj}
@@ -323,27 +341,29 @@
            ^boolean is-flex-layout?
            ^boolean is-grid-layout?]}]
 
-  (let [selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
-        selection-parents     (mf/deref selection-parents-ref)
+  (let [selection-parents* (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
+        selection-parents  (mf/deref selection-parents*)
 
-        is-absolute?          (:layout-item-absolute values)
+        ^boolean
+        is-absolute?       (:layout-item-absolute values)
 
-        is-col?               (every? ctl/col? selection-parents)
+        ^boolean
+        is-col?            (every? ctl/col? selection-parents)
 
-        is-layout-child?      (and is-layout-child? (not is-absolute?))
+        ^boolean
+        is-layout-child?   (and is-layout-child? (not is-absolute?))
 
-        state*                (mf/use-state true)
-        open?                 (deref state*)
+        state*             (mf/use-state true)
+        open?              (deref state*)
 
-        toggle-content        (mf/use-fn #(swap! state* not))
-        has-content?          (or ^boolean is-layout-child?
-                                  ^boolean is-flex-parent?
-                                  ^boolean is-grid-parent?
-                                  ^boolean is-layout-container?)
+        toggle-content     (mf/use-fn #(swap! state* not))
+        has-content?       (or is-layout-child?
+                               is-flex-parent?
+                               is-grid-parent?
+                               is-layout-container?)
 
         ;; Align self
-
-        align-self           (:layout-item-align-self values)
+        align-self         (:layout-item-align-self values)
 
         title
         (cond
@@ -401,21 +421,6 @@
              (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}})))))
 
         ;; Behaviour
-
-        on-change-behaviour
-        (mf/use-fn
-         (mf/deps ids)
-         (fn [event]
-           (let [value (-> (dom/get-current-target event)
-                           (dom/get-data "value")
-                           (keyword))
-                 dir (-> (dom/get-current-target event)
-                         (dom/get-data "direction")
-                         (keyword))]
-             (if (= dir :h)
-               (st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value}))
-               (st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value}))))))
-
         on-change-behaviour-h
         (mf/use-fn
          (mf/deps ids)
@@ -481,7 +486,7 @@
             [:span {:class (stl/css :icon-text)}
              "Z"]
             [:> numeric-input*
-             {:className (stl/css :numeric-input)
+             {:class (stl/css :numeric-input)
               :placeholder "--"
               :on-focus #(dom/select-target %)
               :on-change #(on-change-z-index %)
@@ -489,13 +494,12 @@
               :value (:layout-item-z-index values)}]]])
 
         [:div {:class (stl/css :row)}
-         [:& element-behaviour {:fill is-layout-child?
-                                :auto is-layout-container?
-                                :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix)
-                                :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix)
-                                :on-change-behaviour-h-refactor on-change-behaviour-h
-                                :on-change-behaviour-v-refactor on-change-behaviour-v
-                                :on-change on-change-behaviour}]]
+         [:& element-behaviour {:has-fill is-layout-child?
+                                :is-auto is-layout-container?
+                                :item-v-sizing (:layout-item-v-sizing values)
+                                :item-h-sizing (:layout-item-h-sizing values)
+                                :on-h-change on-change-behaviour-h
+                                :on-v-change on-change-behaviour-v}]]
 
         (when (and is-layout-child? is-flex-parent?)
           [:div {:class (stl/css :row)}
@@ -519,10 +523,9 @@
                [:div {:class (stl/css :layout-item-min-w)
                       :title (tr "workspace.options.layout-item.layout-item-min-w")}
 
-                [:span {:class (stl/css :icon-text)}
-                 "MIN W"]
+                [:span {:class (stl/css :icon-text)} "MIN W"]
                 [:> numeric-input*
-                 {:className (stl/css :numeric-input)
+                 {:class (stl/css :numeric-input)
                   :no-validate true
                   :min 0
                   :data-wrap true
@@ -536,7 +539,7 @@
                       :title (tr "workspace.options.layout-item.layout-item-max-w")}
                 [:span {:class (stl/css :icon-text)} "MAX W"]
                 [:> numeric-input*
-                 {:className (stl/css :numeric-input)
+                 {:class (stl/css :numeric-input)
                   :no-validate true
                   :min 0
                   :data-wrap true
@@ -550,10 +553,9 @@
                [:div {:class (stl/css :layout-item-min-h)
                       :title (tr "workspace.options.layout-item.layout-item-min-h")}
 
-                [:span {:class (stl/css :icon-text)}
-                 "MIN H"]
+                [:span {:class (stl/css :icon-text)} "MIN H"]
                 [:> numeric-input*
-                 {:className (stl/css :numeric-input)
+                 {:class (stl/css :numeric-input)
                   :no-validate true
                   :min 0
                   :data-wrap true
@@ -566,10 +568,9 @@
                [:div {:class (stl/css :layout-item-max-h)
                       :title (tr "workspace.options.layout-item.layout-item-max-h")}
 
-                [:span {:class (stl/css :icon-text)}
-                 "MAX H"]
+                [:span {:class (stl/css :icon-text)} "MAX H"]
                 [:> numeric-input*
-                 {:className (stl/css :numeric-input)
+                 {:class (stl/css :numeric-input)
                   :no-validate true
                   :min 0
                   :data-wrap true

From 00961808b48c64aef17aa48ff70c11d6341564ea Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Fri, 16 Feb 2024 14:24:12 +0100
Subject: [PATCH 8/9] :zap: Optimize the `layout-item-menu` react component

---
 .../sidebar/options/menus/layout_item.cljs    | 87 ++++++++++---------
 1 file changed, 47 insertions(+), 40 deletions(-)

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 c72bd4adb..1aaf1b949 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
@@ -45,14 +45,14 @@
 
 (mf/defc margin-simple
   {::mf/props :obj}
-  [{:keys [values on-change on-blur]}]
-  (let [m1 (:m1 values)
-        m2 (:m2 values)
-        m3 (:m3 values)
-        m4 (:m4 values)
+  [{:keys [margin on-change on-blur]}]
+  (let [m1 (:m1 margin)
+        m2 (:m2 margin)
+        m3 (:m3 margin)
+        m4 (:m4 margin)
 
-        m1 (when (and (not= values :multiple) (= m1 m3)) m1)
-        m2 (when (and (not= values :multiple) (= m2 m4)) m2)
+        m1 (when (and (not= margin :multiple) (= m1 m3)) m1)
+        m2 (when (and (not= margin :multiple) (= m2 m4)) m2)
 
         on-focus
         (mf/use-fn
@@ -105,9 +105,8 @@
 
 (mf/defc margin-multiple
   {::mf/props :obj}
-  [{:keys [values on-change on-blur]}]
-  (let [margin (:layout-item-margin values)
-        m1     (:m1 margin)
+  [{:keys [margin on-change on-blur]}]
+  (let [m1     (:m1 margin)
         m2     (:m2 margin)
         m3     (:m3 margin)
         m4     (:m4 margin)
@@ -186,7 +185,7 @@
 (mf/defc margin-section
   {::mf/props :obj
    ::mf/private true
-   ::mf/expected-props #{:values :type :on-type-change :on-change}}
+   ::mf/expected-props #{:margin :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))
@@ -221,13 +220,13 @@
 
 (mf/defc element-behaviour-horizontal
   {::mf/props :obj}
-  [{:keys [^boolean is-auto ^boolean has-fill item-sizing on-change]}]
+  [{:keys [^boolean is-auto ^boolean has-fill sizing on-change]}]
   [:div {:class (stl/css-case :horizontal-behaviour true
                               :one-element (and (not has-fill) (not is-auto))
                               :two-element (or has-fill is-auto)
                               :three-element (and has-fill is-auto))}
    [:& radio-buttons
-    {:selected  (d/name item-sizing)
+    {:selected  (d/name sizing)
      :on-change on-change
      :wide      true
      :name      "flex-behaviour-h"}
@@ -253,13 +252,13 @@
 
 (mf/defc element-behaviour-vertical
   {::mf/props :obj}
-  [{:keys [^boolean is-auto ^boolean has-fill item-sizing on-change]}]
+  [{:keys [^boolean is-auto ^boolean has-fill sizing on-change]}]
   [:div {:class (stl/css-case :vertical-behaviour true
                               :one-element (and (not has-fill) (not is-auto))
                               :two-element (or has-fill is-auto)
                               :three-element (and has-fill is-auto))}
    [:& radio-buttons
-    {:selected  (d/name item-sizing)
+    {:selected  (d/name sizing)
      :on-change on-change
      :wide      true
      :name      "flex-behaviour-v"}
@@ -291,8 +290,8 @@
    ::mf/private true}
   [{:keys [^boolean is-auto
            ^boolean has-fill
-           item-h-sizing
-           item-v-sizing
+           h-sizing
+           v-sizing
            on-h-change
            on-v-change]}]
   [:div {:class (stl/css-case
@@ -302,12 +301,12 @@
    [:& element-behaviour-horizontal
     {:is-auto is-auto
      :has-fill has-fill
-     :item-sizing item-h-sizing
+     :sizing h-sizing
      :on-change on-h-change}]
    [:& element-behaviour-vertical
     {:is-auto is-auto
      :has-fill has-fill
-     :item-sizing item-v-sizing
+     :sizing v-sizing
      :on-change on-v-change}]])
 
 (mf/defc align-self-row
@@ -364,6 +363,8 @@
 
         ;; Align self
         align-self         (:layout-item-align-self values)
+        h-sizing           (:layout-item-h-sizing values)
+        v-sizing           (:layout-item-v-sizing values)
 
         title
         (cond
@@ -399,7 +400,6 @@
              (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self (keyword value)})))))
 
         ;; Margin
-
         on-change-margin-type
         (mf/use-fn
          (mf/deps ids)
@@ -428,7 +428,6 @@
            (let [value (keyword value)]
              (st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value})))))
 
-
         on-change-behaviour-v
         (mf/use-fn
          (mf/deps ids)
@@ -437,10 +436,14 @@
              (st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value})))))
 
         ;; Size and position
-
         on-size-change
-        (fn [measure value]
-          (st/emit! (dwsl/update-layout-child ids {measure value})))
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [value event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "attr")
+                          (keyword))]
+             (st/emit! (dwsl/update-layout-child ids {attr value})))))
 
         on-change-position
         (mf/use-fn
@@ -483,8 +486,7 @@
            [:div {:class (stl/css :z-index-wrapper)
                   :title "z-index"}
 
-            [:span {:class (stl/css :icon-text)}
-             "Z"]
+            [:span {:class (stl/css :icon-text)} "Z"]
             [:> numeric-input*
              {:class (stl/css :numeric-input)
               :placeholder "--"
@@ -496,8 +498,8 @@
         [:div {:class (stl/css :row)}
          [:& element-behaviour {:has-fill is-layout-child?
                                 :is-auto is-layout-container?
-                                :item-v-sizing (:layout-item-v-sizing values)
-                                :item-h-sizing (:layout-item-h-sizing values)
+                                :v-sizing (:layout-item-v-sizing values)
+                                :h-sizing (:layout-item-h-sizing values)
                                 :on-h-change on-change-behaviour-h
                                 :on-v-change on-change-behaviour-v}]]
 
@@ -509,13 +511,13 @@
 
         (when is-layout-child?
           [:div {:class (stl/css :row)}
-           [:& margin-section {:values (:layout-item-margin values)
+           [:& margin-section {:margin (:layout-item-margin values)
                                :type (:layout-item-margin-type values)
                                :on-type-change on-change-margin-type
                                :on-change on-margin-change}]])
 
-        (when (or (= (:layout-item-h-sizing values) :fill)
-                  (= (:layout-item-v-sizing values) :fill))
+        (when (or (= h-sizing :fill)
+                  (= v-sizing :fill))
           [:div {:class (stl/css :row)}
            [:div {:class (stl/css :advanced-options)}
             (when (= (:layout-item-h-sizing values) :fill)
@@ -530,8 +532,9 @@
                   :min 0
                   :data-wrap true
                   :placeholder "--"
-                  :on-focus #(dom/select-target %)
-                  :on-change (partial on-size-change :layout-item-min-w)
+                  :data-attr "layout-item-min-w"
+                  :on-focus dom/select-target
+                  :on-change on-size-change
                   :value (get values :layout-item-min-w)
                   :nillable true}]]
 
@@ -544,11 +547,13 @@
                   :min 0
                   :data-wrap true
                   :placeholder "--"
-                  :on-focus #(dom/select-target %)
-                  :on-change (partial on-size-change :layout-item-max-w)
+                  :data-attr "layout-item-max-w"
+                  :on-focus dom/select-target
+                  :on-change on-size-change
                   :value (get values :layout-item-max-w)
                   :nillable true}]]])
-            (when (= (:layout-item-v-sizing values) :fill)
+
+            (when (= v-sizing :fill)
               [:div {:class (stl/css :vertical-fill)}
                [:div {:class (stl/css :layout-item-min-h)
                       :title (tr "workspace.options.layout-item.layout-item-min-h")}
@@ -560,8 +565,9 @@
                   :min 0
                   :data-wrap true
                   :placeholder "--"
-                  :on-focus #(dom/select-target %)
-                  :on-change (partial on-size-change :layout-item-min-h)
+                  :data-attr "layout-item-min-h"
+                  :on-focus dom/select-target
+                  :on-change on-size-change
                   :value (get values :layout-item-min-h)
                   :nillable true}]]
 
@@ -575,7 +581,8 @@
                   :min 0
                   :data-wrap true
                   :placeholder "--"
-                  :on-focus #(dom/select-target %)
-                  :on-change (partial on-size-change :layout-item-max-h)
+                  :data-attr "layout-item-max-h"
+                  :on-focus dom/select-target
+                  :on-change on-size-change
                   :value (get values :layout-item-max-h)
                   :nillable true}]]])]])])]))

From 541052fee713d207bd99292b0e9f67eb7fe6b468 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Tue, 20 Feb 2024 09:46:53 +0100
Subject: [PATCH 9/9] :arrow_up: Update rumext (new syntax features)

---
 frontend/deps.edn                                          | 4 ++--
 .../ui/workspace/sidebar/options/menus/layout_item.cljs    | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/deps.edn b/frontend/deps.edn
index 9e686a3f1..a626ecbd9 100644
--- a/frontend/deps.edn
+++ b/frontend/deps.edn
@@ -19,8 +19,8 @@
    :git/url "https://github.com/funcool/beicon.git"}
 
   funcool/rumext
-  {:git/tag "v2.9.4"
-   :git/sha "af08e55"
+  {:git/tag "v2.10"
+   :git/sha "d96ea18"
    :git/url "https://github.com/funcool/rumext.git"}
 
   instaparse/instaparse {:mvn/version "1.4.12"}
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 1aaf1b949..dff99e0a9 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
@@ -20,7 +20,8 @@
    [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
-   [rumext.v2 :as mf]))
+   [rumext.v2 :as mf]
+   [rumext.v2.props :as-alias mf.props]))
 
 (def layout-item-attrs
   [:layout-item-margin      ;; {:m1 0 :m2 0 :m3 0 :m4 0}
@@ -185,7 +186,7 @@
 (mf/defc margin-section
   {::mf/props :obj
    ::mf/private true
-   ::mf/expected-props #{:margin :type :on-type-change :on-change}}
+   ::mf.props/expect #{:margin :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))
@@ -330,7 +331,7 @@
                      :id    "align-self-end"}]])
 
 (mf/defc layout-item-menu
-  {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?" "is-grid-parent?" "is-flex-parent?"]))]
+  {::mf/memo #{:ids :values :type :is-layout-child? :is-grid-parent :is-flex-parent?}
    ::mf/props :obj}
   [{:keys [ids values
            ^boolean is-layout-child?