@elementor/editor-editing-panel 4.3.0-955 → 4.3.0-958

package/dist/index.js

@@ -4258,7 +4258,7 @@ var directionOptions = [
 ];
 var parseAutoFlow = (value) => {
   if (!value) {
-    return { direction: "row", dense: false };
+    return { direction: null, dense: false };
   }
   const dense = value.includes("dense");
   const direction = value.replace(/\s*dense\s*/, "").trim();
@@ -4268,27 +4268,33 @@ var composeAutoFlow = (direction, dense) => {
   return dense ? `${direction} dense` : direction;
 };
 var GridAutoFlowFieldContent = () => {
-  const { value, setValue } = useStylesField("grid-auto-flow", {
+  const { value, setValue, canEdit } = useStylesField("grid-auto-flow", {
     history: { propDisplayName: AUTO_FLOW_LABEL }
   });
+  const { placeholder } = (0, import_editor_controls24.useBoundProp)();
   const { direction, dense } = parseAutoFlow(value?.value ?? null);
+  const directionPlaceholder = parseAutoFlow(placeholder?.value ?? null).direction;
   const handleDirectionChange = (newDirection) => {
     if (!newDirection) {
+      setValue(null);
       return;
     }
     setValue({ $$type: "string", value: composeAutoFlow(newDirection, dense) });
   };
   const handleDenseToggle = () => {
-    setValue({ $$type: "string", value: composeAutoFlow(direction, !dense) });
+    const nextDirection = direction ?? "row";
+    setValue({ $$type: "string", value: composeAutoFlow(nextDirection, !dense) });
   };
   return /* @__PURE__ */ React53.createElement(StylesFieldLayout, { label: AUTO_FLOW_LABEL }, /* @__PURE__ */ React53.createElement(import_ui30.Grid, { container: true, gap: 1, flexWrap: "nowrap", alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ React53.createElement(import_ui30.Grid, { item: true, sx: { width: 64, maxWidth: "100%" } }, /* @__PURE__ */ React53.createElement(
     import_editor_controls24.ControlToggleButtonGroup,
     {
       items: directionOptions,
       value: direction,
+      placeholder: directionPlaceholder,
       onChange: handleDirectionChange,
       exclusive: true,
-      fullWidth: true
+      fullWidth: true,
+      disabled: !canEdit
     }
   )), /* @__PURE__ */ React53.createElement(import_ui30.Grid, { item: true }, /* @__PURE__ */ React53.createElement(import_ui30.Tooltip, { title: DENSE_LABEL, placement: "top" }, /* @__PURE__ */ React53.createElement(
     import_ui30.ToggleButton,
@@ -4297,7 +4303,8 @@ var GridAutoFlowFieldContent = () => {
       selected: dense,
       onChange: handleDenseToggle,
       size: "tiny",
-      "aria-label": DENSE_LABEL
+      "aria-label": DENSE_LABEL,
+      disabled: !canEdit
     },
     /* @__PURE__ */ React53.createElement(import_icons14.LayoutDashboardIcon, { fontSize: "tiny" })
   )))));