@elementor/editor-editing-panel 3.32.0-52 → 3.32.0-54

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/index.ts
-import { useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp12 } from "@elementor/editor-controls";
 
 // src/components/css-classes/css-class-convert-local.tsx
 import * as React4 from "react";
@@ -1723,7 +1723,7 @@ function EditorPanelErrorFallback() {
 
 // src/components/editing-panel-tabs.tsx
 import * as React88 from "react";
-import { Fragment as Fragment9 } from "react";
+import { Fragment as Fragment10 } from "react";
 import { Divider as Divider6, Stack as Stack15, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
 import { __ as __60 } from "@wordpress/i18n";
 
@@ -3703,8 +3703,12 @@ var FlexDirectionField = () => {
 
 // src/components/style-sections/layout-section/flex-order-field.tsx
 import * as React53 from "react";
-import { useEffect as useEffect5, useState as useState10 } from "react";
-import { ControlToggleButtonGroup, NumberControl } from "@elementor/editor-controls";
+import { useEffect as useEffect5, useMemo as useMemo8, useState as useState10 } from "react";
+import {
+  ControlToggleButtonGroup,
+  NumberControl,
+  useBoundProp as useBoundProp3
+} from "@elementor/editor-controls";
 import { ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowUpSmallIcon as ArrowUpSmallIcon2, PencilIcon } from "@elementor/icons";
 import { Grid as Grid2 } from "@elementor/ui";
 import { __ as __28 } from "@wordpress/i18n";
@@ -3739,6 +3743,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,
@@ -3746,37 +3753,61 @@ var FlexOrderField = () => {
   } = useStylesField("order", {
     history: { propDisplayName: ORDER_LABEL }
   });
-  const [groupControlValue, setGroupControlValue] = useState10(getGroupControlValue(order?.value ?? null));
+  const { placeholder } = useBoundProp3();
+  const placeholderValue = placeholder;
+  const currentGroup = useMemo8(() => getGroupControlValue(order?.value ?? null), [order]);
+  const [activeGroup, setActiveGroup] = useState10(currentGroup);
+  const [customLocked, setCustomLocked] = useState10(false);
+  useEffect5(() => {
+    if (!customLocked) {
+      setActiveGroup(currentGroup);
+    }
+  }, [currentGroup, customLocked]);
   useEffect5(() => {
-    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(
     ControlToggleButtonGroup,
     {
       items,
-      value: groupControlValue,
+      value: activeGroup,
       onChange: handleToggleButtonChange,
       exclusive: true,
+      placeholder: groupPlaceholder,
       disabled: !canEdit
     }
-  )), CUSTOM === groupControlValue && /* @__PURE__ */ React53.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ControlLabel, null, __28("Custom order", "elementor"))), /* @__PURE__ */ React53.createElement(Grid2, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React53.createElement(
+  )), isCustomVisible && /* @__PURE__ */ React53.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ControlLabel, null, __28("Custom order", "elementor"))), /* @__PURE__ */ React53.createElement(Grid2, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React53.createElement(
     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;
@@ -3784,19 +3815,22 @@ 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
 import * as React54 from "react";
-import { useEffect as useEffect6, useMemo as useMemo8, useRef as useRef6, useState as useState11 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo9, useRef as useRef6, useState as useState11 } from "react";
 import {
   ControlToggleButtonGroup as ControlToggleButtonGroup2,
   NumberControl as NumberControl2,
   PropKeyProvider as PropKeyProvider3,
   PropProvider as PropProvider3,
   SizeControl as SizeControl3,
-  useBoundProp as useBoundProp3
+  useBoundProp as useBoundProp4
 } from "@elementor/editor-controls";
 import { flexPropTypeUtil, numberPropTypeUtil } from "@elementor/editor-props";
 import { ExpandIcon, PencilIcon as PencilIcon2, ShrinkIcon } from "@elementor/icons";
@@ -3824,14 +3858,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 = useMemo8(() => getActiveGroup({ grow, shrink, basis }), [grow, shrink, basis]);
+  const { placeholder } = useBoundProp4();
+  const flexValues = extractFlexValues(value);
+  const currentGroup = useMemo9(() => getActiveGroup(flexValues), [flexValues]);
   const [activeGroup, setActiveGroup] = useState11(currentGroup);
   const [customLocked, setCustomLocked] = useState11(false);
   useEffect6(() => {
@@ -3847,20 +3882,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(
     ControlToggleButtonGroup2,
     {
-      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;
@@ -3893,7 +3938,7 @@ var createFlexValueForGroup = (group, flexValue) => {
 };
 var FlexCustomField = () => {
   const flexBasisRowRef = useRef6(null);
-  const context = useBoundProp3(flexPropTypeUtil);
+  const context = useBoundProp4(flexPropTypeUtil);
   return /* @__PURE__ */ React54.createElement(PropProvider3, { ...context }, /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(StylesFieldLayout, { label: __29("Grow", "elementor") }, /* @__PURE__ */ React54.createElement(PropKeyProvider3, { bind: "flexGrow" }, /* @__PURE__ */ React54.createElement(NumberControl2, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React54.createElement(StylesFieldLayout, { label: __29("Shrink", "elementor") }, /* @__PURE__ */ React54.createElement(PropKeyProvider3, { bind: "flexShrink" }, /* @__PURE__ */ React54.createElement(NumberControl2, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React54.createElement(StylesFieldLayout, { label: __29("Basis", "elementor"), ref: flexBasisRowRef }, /* @__PURE__ */ React54.createElement(PropKeyProvider3, { bind: "flexBasis" }, /* @__PURE__ */ React54.createElement(SizeControl3, { extendedOptions: ["auto"], anchorRef: flexBasisRowRef })))));
 };
 var getActiveGroup = ({
@@ -4851,7 +4896,8 @@ var StyleTab = () => {
           "transform",
           "filter",
           "backdrop-filter",
-          "transform-origin"
+          "transform-origin",
+          "transition"
         ]
       }
     ), shouldRenderCustomCss && /* @__PURE__ */ React87.createElement(
@@ -4887,7 +4933,7 @@ var EditingPanelTabs = () => {
   return (
     // When switching between elements, the local states should be reset. We are using key to rerender the tabs.
     // Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
-    /* @__PURE__ */ React88.createElement(Fragment9, { key: element.id }, /* @__PURE__ */ React88.createElement(PanelTabContent, null))
+    /* @__PURE__ */ React88.createElement(Fragment10, { key: element.id }, /* @__PURE__ */ React88.createElement(PanelTabContent, null))
   );
 };
 var PanelTabContent = () => {
@@ -4966,18 +5012,18 @@ import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from "@elemen
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
 import * as React90 from "react";
-import { PropKeyProvider as PropKeyProvider4, PropProvider as PropProvider4, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
+import { PropKeyProvider as PropKeyProvider4, PropProvider as PropProvider4, useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
 import {
   backgroundImageOverlayPropTypeUtil
 } from "@elementor/editor-props";
 import { DatabaseIcon } from "@elementor/icons";
 
 // src/dynamics/hooks/use-dynamic-tag.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
-import { useMemo as useMemo9 } from "react";
-import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
+import { useMemo as useMemo10 } from "react";
+import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 
 // src/dynamics/sync/get-elementor-config.ts
 var getElementorConfig2 = () => {
@@ -5026,12 +5072,12 @@ var dynamicPropTypeUtil = createPropUtils(
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
 var usePropDynamicTags = () => {
   let categories = [];
-  const { propType } = useBoundProp4();
+  const { propType } = useBoundProp5();
   if (propType) {
     const propDynamicType = getDynamicPropType(propType);
     categories = propDynamicType?.settings.categories || [];
   }
-  return useMemo9(() => getDynamicTagsByCategories(categories), [categories.join()]);
+  return useMemo10(() => getDynamicTagsByCategories(categories), [categories.join()]);
 };
 var getDynamicTagsByCategories = (categories) => {
   const dynamicTags = getAtomicDynamicTags();
@@ -5047,17 +5093,17 @@ var getDynamicTagsByCategories = (categories) => {
 // src/dynamics/hooks/use-dynamic-tag.ts
 var useDynamicTag = (tagName) => {
   const dynamicTags = usePropDynamicTags();
-  return useMemo10(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
+  return useMemo11(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
 };
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
 var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React90.createElement(DatabaseIcon, { fontSize: "tiny" });
 var BackgroundControlDynamicTagLabel = ({ value }) => {
-  const context = useBoundProp5(backgroundImageOverlayPropTypeUtil);
+  const context = useBoundProp6(backgroundImageOverlayPropTypeUtil);
   return /* @__PURE__ */ React90.createElement(PropProvider4, { ...context, value: value.value }, /* @__PURE__ */ React90.createElement(PropKeyProvider4, { bind: "image" }, /* @__PURE__ */ React90.createElement(Wrapper, { rawValue: value.value })));
 };
 var Wrapper = ({ rawValue }) => {
-  const { propType } = useBoundProp5();
+  const { propType } = useBoundProp6();
   const imageOverlayPropType = propType.prop_types["background-image-overlay"];
   return /* @__PURE__ */ React90.createElement(PropProvider4, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React90.createElement(PropKeyProvider4, { bind: "src" }, /* @__PURE__ */ React90.createElement(Content, { rawValue: rawValue.image })));
 };
@@ -5069,7 +5115,7 @@ var Content = ({ rawValue }) => {
 
 // src/dynamics/components/dynamic-selection-control.tsx
 import * as React93 from "react";
-import { ControlFormLabel as ControlFormLabel5, useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
+import { ControlFormLabel as ControlFormLabel5, useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 import { PopoverHeader as PopoverHeader3 } from "@elementor/editor-ui";
 import { DatabaseIcon as DatabaseIcon3, SettingsIcon, XIcon } from "@elementor/icons";
 import {
@@ -5100,9 +5146,9 @@ var usePersistDynamicValue = (propKey) => {
 
 // src/dynamics/dynamic-control.tsx
 import * as React91 from "react";
-import { PropKeyProvider as PropKeyProvider5, PropProvider as PropProvider5, useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
+import { PropKeyProvider as PropKeyProvider5, PropProvider as PropProvider5, useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 var DynamicControl = ({ bind, children }) => {
-  const { value, setValue } = useBoundProp6(dynamicPropTypeUtil);
+  const { value, setValue } = useBoundProp7(dynamicPropTypeUtil);
   const { name = "", settings } = value ?? {};
   const dynamicTag = useDynamicTag(name);
   if (!dynamicTag) {
@@ -5125,9 +5171,9 @@ var DynamicControl = ({ bind, children }) => {
 };
 
 // src/dynamics/components/dynamic-selection.tsx
-import { Fragment as Fragment11, useState as useState13 } from "react";
+import { Fragment as Fragment12, useState as useState13 } from "react";
 import * as React92 from "react";
-import { useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
 import { PopoverHeader as PopoverHeader2, PopoverMenuList, PopoverSearch } from "@elementor/editor-ui";
 import { DatabaseIcon as DatabaseIcon2 } from "@elementor/icons";
 import { Divider as Divider7, Link as Link2, Stack as Stack16, Typography as Typography5, useTheme as useTheme3 } from "@elementor/ui";
@@ -5137,8 +5183,8 @@ var DynamicSelection = ({ close: closePopover }) => {
   const [searchValue, setSearchValue] = useState13("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
   const theme = useTheme3();
-  const { value: anyValue } = useBoundProp7();
-  const { bind, value: dynamicValue, setValue } = useBoundProp7(dynamicPropTypeUtil);
+  const { value: anyValue } = useBoundProp8();
+  const { bind, value: dynamicValue, setValue } = useBoundProp8(dynamicPropTypeUtil);
   const [, updatePropValueHistory] = usePersistDynamicValue(bind);
   const isCurrentValueDynamic = !!dynamicValue;
   const options12 = useFilteredOptions(searchValue);
@@ -5173,7 +5219,7 @@ var DynamicSelection = ({ close: closePopover }) => {
       onClose: closePopover,
       icon: /* @__PURE__ */ React92.createElement(DatabaseIcon2, { fontSize: SIZE6 })
     }
-  ), hasNoDynamicTags ? /* @__PURE__ */ React92.createElement(NoDynamicTags, null) : /* @__PURE__ */ React92.createElement(Fragment11, null, /* @__PURE__ */ React92.createElement(
+  ), hasNoDynamicTags ? /* @__PURE__ */ React92.createElement(NoDynamicTags, null) : /* @__PURE__ */ React92.createElement(Fragment12, null, /* @__PURE__ */ React92.createElement(
     PopoverSearch,
     {
       value: searchValue,
@@ -5241,8 +5287,8 @@ var useFilteredOptions = (searchValue) => {
 // src/dynamics/components/dynamic-selection-control.tsx
 var SIZE7 = "tiny";
 var DynamicSelectionControl = () => {
-  const { setValue: setAnyValue } = useBoundProp8();
-  const { bind, value } = useBoundProp8(dynamicPropTypeUtil);
+  const { setValue: setAnyValue } = useBoundProp9();
+  const { bind, value } = useBoundProp9(dynamicPropTypeUtil);
   const [propValueFromHistory] = usePersistDynamicValue(bind);
   const selectionPopoverState = usePopupState3({ variant: "popover" });
   const { name: tagName = "" } = value;
@@ -5395,11 +5441,11 @@ function getDynamicValue(name, settings) {
 
 // src/dynamics/hooks/use-prop-dynamic-action.tsx
 import * as React94 from "react";
-import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
 import { DatabaseIcon as DatabaseIcon4 } from "@elementor/icons";
 import { __ as __64 } from "@wordpress/i18n";
 var usePropDynamicAction = () => {
-  const { propType } = useBoundProp9();
+  const { propType } = useBoundProp10();
   const visible = !!propType && supportsDynamic(propType);
   return {
     visible,
@@ -5435,7 +5481,7 @@ var init = () => {
 };
 
 // src/reset-style-props.tsx
-import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
 import { BrushBigIcon } from "@elementor/icons";
 import { __ as __65 } from "@wordpress/i18n";
 var { registerAction } = controlActionsMenu;
@@ -5447,7 +5493,7 @@ function initResetStyleProps() {
 }
 function useResetStyleValueProps() {
   const isStyle = useIsStyle();
-  const { value, setValue, path } = useBoundProp10();
+  const { value, setValue, path } = useBoundProp11();
   return {
     visible: isStyle && value !== null && value !== void 0 && path.length <= 2,
     title: __65("Clear", "elementor"),
@@ -5637,7 +5683,7 @@ export {
   registerControlReplacement,
   registerStyleProviderToColors,
   stylesInheritanceTransformersRegistry,
-  useBoundProp11 as useBoundProp,
+  useBoundProp12 as useBoundProp,
   useCustomCss,
   useFontFamilies,
   usePanelActions,