@elementor/editor-editing-panel 3.32.0-51 → 3.32.0-53

package/dist/index.js

@@ -3668,6 +3668,9 @@ var items = [
   }
 ];
 var FlexOrderField = () => {
+  return /* @__PURE__ */ React53.createElement(StylesField, { bind: "order", propDisplayName: ORDER_LABEL }, /* @__PURE__ */ React53.createElement(UiProviders, null, /* @__PURE__ */ React53.createElement(SectionContent, null, /* @__PURE__ */ React53.createElement(FlexOrderFieldContent, null))));
+};
+function FlexOrderFieldContent() {
   const {
     value: order,
     setValue: setOrder,
@@ -3675,37 +3678,61 @@ var FlexOrderField = () => {
   } = useStylesField("order", {
     history: { propDisplayName: ORDER_LABEL }
   });
-  const [groupControlValue, setGroupControlValue] = (0, import_react27.useState)(getGroupControlValue(order?.value ?? null));
+  const { placeholder } = (0, import_editor_controls24.useBoundProp)();
+  const placeholderValue = placeholder;
+  const currentGroup = (0, import_react27.useMemo)(() => getGroupControlValue(order?.value ?? null), [order]);
+  const [activeGroup, setActiveGroup] = (0, import_react27.useState)(currentGroup);
+  const [customLocked, setCustomLocked] = (0, import_react27.useState)(false);
+  (0, import_react27.useEffect)(() => {
+    if (!customLocked) {
+      setActiveGroup(currentGroup);
+    }
+  }, [currentGroup, customLocked]);
   (0, import_react27.useEffect)(() => {
-    const newGroupControlValue = getGroupControlValue(order?.value ?? null);
-    setGroupControlValue(newGroupControlValue);
-  }, [order?.value]);
+    if (order === null) {
+      setCustomLocked(false);
+    }
+  }, [order]);
+  const groupPlaceholder = getGroupControlValue(placeholderValue?.value ?? null);
   const handleToggleButtonChange = (group) => {
-    setGroupControlValue(group);
-    if (!group || group === CUSTOM) {
-      setOrder(null);
+    setActiveGroup(group);
+    setCustomLocked(group === CUSTOM);
+    if (CUSTOM === group) {
+      setOrder({ $$type: "number", value: null });
       return;
     }
-    setOrder({ $$type: "number", value: orderValueMap[group] });
+    if (FIRST === group) {
+      setOrder({ $$type: "number", value: orderValueMap[group] });
+      return;
+    }
+    if (LAST === group) {
+      setOrder({ $$type: "number", value: orderValueMap[group] });
+      return;
+    }
+    setOrder(null);
   };
-  return /* @__PURE__ */ React53.createElement(StylesField, { bind: "order", propDisplayName: ORDER_LABEL }, /* @__PURE__ */ React53.createElement(UiProviders, null, /* @__PURE__ */ React53.createElement(SectionContent, null, /* @__PURE__ */ React53.createElement(StylesFieldLayout, { label: ORDER_LABEL }, /* @__PURE__ */ React53.createElement(
+  const isCustomVisible = CUSTOM === activeGroup || CUSTOM === groupPlaceholder;
+  const orderPlaceholder = CUSTOM === groupPlaceholder ? String(placeholderValue?.value ?? null) : "";
+  return /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(StylesFieldLayout, { label: ORDER_LABEL }, /* @__PURE__ */ React53.createElement(
     import_editor_controls24.ControlToggleButtonGroup,
     {
       items,
-      value: groupControlValue,
+      value: activeGroup,
       onChange: handleToggleButtonChange,
       exclusive: true,
+      placeholder: groupPlaceholder,
       disabled: !canEdit
     }
-  )), CUSTOM === groupControlValue && /* @__PURE__ */ React53.createElement(import_ui37.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ControlLabel, null, (0, import_i18n28.__)("Custom order", "elementor"))), /* @__PURE__ */ React53.createElement(import_ui37.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React53.createElement(
+  )), isCustomVisible && /* @__PURE__ */ React53.createElement(import_ui37.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ControlLabel, null, (0, import_i18n28.__)("Custom order", "elementor"))), /* @__PURE__ */ React53.createElement(import_ui37.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React53.createElement(
     import_editor_controls24.NumberControl,
     {
       min: FIRST_DEFAULT_VALUE + 1,
       max: LAST_DEFAULT_VALUE - 1,
-      shouldForceInt: true
+      shouldForceInt: true,
+      placeholder: orderPlaceholder
     }
-  ))))));
-};
+  ))));
+}
 var getGroupControlValue = (order) => {
   if (LAST_DEFAULT_VALUE === order) {
     return LAST;
@@ -3713,7 +3740,10 @@ var getGroupControlValue = (order) => {
   if (FIRST_DEFAULT_VALUE === order) {
     return FIRST;
   }
-  return 0 === order || order ? CUSTOM : null;
+  if (null !== order) {
+    return CUSTOM;
+  }
+  return null;
 };
 
 // src/components/style-sections/layout-section/flex-size-field.tsx
@@ -3746,14 +3776,15 @@ var items2 = [
   }
 ];
 var FlexSizeField = () => {
+  return /* @__PURE__ */ React54.createElement(UiProviders, null, /* @__PURE__ */ React54.createElement(SectionContent, null, /* @__PURE__ */ React54.createElement(StylesField, { bind: "flex", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React54.createElement(FlexSizeFieldContent, null))));
+};
+var FlexSizeFieldContent = () => {
   const { value, setValue, canEdit } = useStylesField("flex", {
     history: { propDisplayName: FLEX_SIZE_LABEL }
   });
-  const flexValue = value;
-  const grow = flexValue?.value?.flexGrow?.value || null;
-  const shrink = flexValue?.value?.flexShrink?.value || null;
-  const basis = flexValue?.value?.flexBasis?.value || null;
-  const currentGroup = (0, import_react28.useMemo)(() => getActiveGroup({ grow, shrink, basis }), [grow, shrink, basis]);
+  const { placeholder } = (0, import_editor_controls25.useBoundProp)();
+  const flexValues = extractFlexValues(value);
+  const currentGroup = (0, import_react28.useMemo)(() => getActiveGroup(flexValues), [flexValues]);
   const [activeGroup, setActiveGroup] = (0, import_react28.useState)(currentGroup);
   const [customLocked, setCustomLocked] = (0, import_react28.useState)(false);
   (0, import_react28.useEffect)(() => {
@@ -3769,20 +3800,30 @@ var FlexSizeField = () => {
   const onChangeGroup = (group = null) => {
     setActiveGroup(group);
     setCustomLocked(group === "custom");
-    const newFlexValue = createFlexValueForGroup(group, flexValue);
+    const newFlexValue = createFlexValueForGroup(group, value);
     setValue(newFlexValue);
   };
-  return /* @__PURE__ */ React54.createElement(UiProviders, null, /* @__PURE__ */ React54.createElement(SectionContent, null, /* @__PURE__ */ React54.createElement(StylesField, { bind: "flex", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React54.createElement(StylesFieldLayout, { label: FLEX_SIZE_LABEL }, /* @__PURE__ */ React54.createElement(
+  const groupPlaceholder = getActiveGroup(extractFlexValues(placeholder));
+  const isCustomVisible = "custom" === activeGroup || "custom" === groupPlaceholder;
+  return /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(StylesFieldLayout, { label: FLEX_SIZE_LABEL }, /* @__PURE__ */ React54.createElement(
     import_editor_controls25.ControlToggleButtonGroup,
     {
-      value: activeGroup,
+      value: activeGroup ?? null,
+      placeholder: groupPlaceholder ?? null,
       onChange: onChangeGroup,
       disabled: !canEdit,
       items: items2,
       exclusive: true
     }
-  )), "custom" === activeGroup && /* @__PURE__ */ React54.createElement(FlexCustomField, null))));
+  )), isCustomVisible && /* @__PURE__ */ React54.createElement(FlexCustomField, null));
 };
+function extractFlexValues(source) {
+  return {
+    grow: source?.value?.flexGrow?.value ?? null,
+    shrink: source?.value?.flexShrink?.value ?? null,
+    basis: source?.value?.flexBasis?.value ?? null
+  };
+}
 var createFlexValueForGroup = (group, flexValue) => {
   if (!group) {
     return null;