@elementor/editor-controls 3.35.0-349 → 3.35.0-350

package/dist/index.d.mts

@@ -25,11 +25,11 @@ declare const TextControl: ControlComponent$1<({ placeholder, error, inputValue,
     ariaLabel?: string;
 }) => React$1.JSX.Element>;
 
-type Props$7 = {
+type Props$8 = {
     placeholder?: string;
     ariaLabel?: string;
 };
-declare const TextAreaControl: ControlComponent$1<({ placeholder, ariaLabel }: Props$7) => React$1.JSX.Element>;
+declare const TextAreaControl: ControlComponent$1<({ placeholder, ariaLabel }: Props$8) => React$1.JSX.Element>;
 
 declare const lengthUnits: readonly ["px", "%", "em", "rem", "vw", "vh", "ch"];
 declare const angleUnits: readonly ["deg", "rad", "grad", "turn"];
@@ -68,7 +68,7 @@ type TimeSizeControlProps = BaseSizeControlProps & UnitProps<TimeUnit[]> & {
     variant: 'time';
 };
 type SizeControlProps = LengthSizeControlProps | AngleSizeControlProps | TimeSizeControlProps;
-declare const SizeControl: ControlComponent$1<({ variant, defaultUnit, units, placeholder, startIcon, anchorRef, extendedOptions, disableCustom, min, enablePropTypeUnits, id, ariaLabel, isRepeaterControl, }: Omit<SizeControlProps, "variant"> & {
+declare const SizeControl: ControlComponent$1<({ variant, defaultUnit, units, placeholder, startIcon, anchorRef, extendedOptions, disableCustom, min, enablePropTypeUnits, id, ariaLabel, }: Omit<SizeControlProps, "variant"> & {
     variant?: SizeVariant;
 }) => React$1.JSX.Element>;
 
@@ -102,12 +102,12 @@ type SelectControlWrapperProps = Parameters<typeof SelectControl>[0] & {
 };
 declare const SelectControlWrapper: ControlComponent$1<({ collectionId, options, ...props }: SelectControlWrapperProps) => React$1.JSX.Element>;
 
-type Props$6 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
+type Props$7 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
     propTypeUtil?: PropTypeUtil<string, string>;
     anchorEl?: HTMLElement | null;
     id?: string;
 };
-declare const ColorControl: ControlComponent$1<({ propTypeUtil, anchorEl, slotProps, id, ...props }: Props$6) => React$1.JSX.Element>;
+declare const ColorControl: ControlComponent$1<({ propTypeUtil, anchorEl, slotProps, id, ...props }: Props$7) => React$1.JSX.Element>;
 
 type RenderContentProps = {
     size: ToggleButtonProps['size'];
@@ -120,7 +120,7 @@ type ToggleButtonGroupItem<TValue> = {
 };
 type ExclusiveValue<TValue> = TValue;
 type NonExclusiveValue<TValue> = TValue[];
-type Props$5<TValue> = {
+type Props$6<TValue> = {
     disabled?: boolean;
     justify?: StackProps['justifyContent'];
     size?: ToggleButtonProps['size'];
@@ -137,10 +137,10 @@ type Props$5<TValue> = {
     value: ExclusiveValue<TValue>;
     onChange: (value: ExclusiveValue<TValue>) => void;
 });
-declare const ToggleButtonGroupUi: <TValue>(props: Props$5<TValue> & {
+declare const ToggleButtonGroupUi: <TValue>(props: Props$6<TValue> & {
     ref?: React$1.Ref<HTMLDivElement>;
 }) => React$1.ReactElement;
-declare const ControlToggleButtonGroup: <TValue>(props: Props$5<TValue>) => React$1.JSX.Element;
+declare const ControlToggleButtonGroup: <TValue>(props: Props$6<TValue>) => React$1.JSX.Element;
 
 type ToggleControlProps<T extends PropValue> = {
     options: Array<ToggleButtonGroupItem<T> & {
@@ -170,21 +170,22 @@ type Item$1 = {
     bind: PropKey;
 };
 type EqualUnequalItems = [Item$1, Item$1, Item$1, Item$1];
-type Props$4<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
+type Props$5<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
     label: string;
     icon: ReactNode;
     tooltipLabel: string;
     items: EqualUnequalItems;
     multiSizePropTypeUtil: PropTypeUtil<TMultiPropType, TPropValue>;
 };
-declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, tooltipLabel, items, multiSizePropTypeUtil, }: Props$4<TMultiPropType, TPropValue>): React$1.JSX.Element;
+declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, tooltipLabel, items, multiSizePropTypeUtil, }: Props$5<TMultiPropType, TPropValue>): React$1.JSX.Element;
 
-declare const LinkedDimensionsControl: ({ label, isSiteRtl, extendedOptions, min, }: {
+type Props$4 = {
     label: string;
     isSiteRtl?: boolean;
     extendedOptions?: ExtendedOption[];
     min?: number;
-}) => React$1.JSX.Element;
+};
+declare const LinkedDimensionsControl: ({ label, isSiteRtl, extendedOptions, min }: Props$4) => React$1.JSX.Element;
 
 type FontCategory = {
     label: string;

package/dist/index.d.ts

@@ -25,11 +25,11 @@ declare const TextControl: ControlComponent$1<({ placeholder, error, inputValue,
     ariaLabel?: string;
 }) => React$1.JSX.Element>;
 
-type Props$7 = {
+type Props$8 = {
     placeholder?: string;
     ariaLabel?: string;
 };
-declare const TextAreaControl: ControlComponent$1<({ placeholder, ariaLabel }: Props$7) => React$1.JSX.Element>;
+declare const TextAreaControl: ControlComponent$1<({ placeholder, ariaLabel }: Props$8) => React$1.JSX.Element>;
 
 declare const lengthUnits: readonly ["px", "%", "em", "rem", "vw", "vh", "ch"];
 declare const angleUnits: readonly ["deg", "rad", "grad", "turn"];
@@ -68,7 +68,7 @@ type TimeSizeControlProps = BaseSizeControlProps & UnitProps<TimeUnit[]> & {
     variant: 'time';
 };
 type SizeControlProps = LengthSizeControlProps | AngleSizeControlProps | TimeSizeControlProps;
-declare const SizeControl: ControlComponent$1<({ variant, defaultUnit, units, placeholder, startIcon, anchorRef, extendedOptions, disableCustom, min, enablePropTypeUnits, id, ariaLabel, isRepeaterControl, }: Omit<SizeControlProps, "variant"> & {
+declare const SizeControl: ControlComponent$1<({ variant, defaultUnit, units, placeholder, startIcon, anchorRef, extendedOptions, disableCustom, min, enablePropTypeUnits, id, ariaLabel, }: Omit<SizeControlProps, "variant"> & {
     variant?: SizeVariant;
 }) => React$1.JSX.Element>;
 
@@ -102,12 +102,12 @@ type SelectControlWrapperProps = Parameters<typeof SelectControl>[0] & {
 };
 declare const SelectControlWrapper: ControlComponent$1<({ collectionId, options, ...props }: SelectControlWrapperProps) => React$1.JSX.Element>;
 
-type Props$6 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
+type Props$7 = Partial<Omit<UnstableColorFieldProps, 'value' | 'onChange'>> & {
     propTypeUtil?: PropTypeUtil<string, string>;
     anchorEl?: HTMLElement | null;
     id?: string;
 };
-declare const ColorControl: ControlComponent$1<({ propTypeUtil, anchorEl, slotProps, id, ...props }: Props$6) => React$1.JSX.Element>;
+declare const ColorControl: ControlComponent$1<({ propTypeUtil, anchorEl, slotProps, id, ...props }: Props$7) => React$1.JSX.Element>;
 
 type RenderContentProps = {
     size: ToggleButtonProps['size'];
@@ -120,7 +120,7 @@ type ToggleButtonGroupItem<TValue> = {
 };
 type ExclusiveValue<TValue> = TValue;
 type NonExclusiveValue<TValue> = TValue[];
-type Props$5<TValue> = {
+type Props$6<TValue> = {
     disabled?: boolean;
     justify?: StackProps['justifyContent'];
     size?: ToggleButtonProps['size'];
@@ -137,10 +137,10 @@ type Props$5<TValue> = {
     value: ExclusiveValue<TValue>;
     onChange: (value: ExclusiveValue<TValue>) => void;
 });
-declare const ToggleButtonGroupUi: <TValue>(props: Props$5<TValue> & {
+declare const ToggleButtonGroupUi: <TValue>(props: Props$6<TValue> & {
     ref?: React$1.Ref<HTMLDivElement>;
 }) => React$1.ReactElement;
-declare const ControlToggleButtonGroup: <TValue>(props: Props$5<TValue>) => React$1.JSX.Element;
+declare const ControlToggleButtonGroup: <TValue>(props: Props$6<TValue>) => React$1.JSX.Element;
 
 type ToggleControlProps<T extends PropValue> = {
     options: Array<ToggleButtonGroupItem<T> & {
@@ -170,21 +170,22 @@ type Item$1 = {
     bind: PropKey;
 };
 type EqualUnequalItems = [Item$1, Item$1, Item$1, Item$1];
-type Props$4<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
+type Props$5<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
     label: string;
     icon: ReactNode;
     tooltipLabel: string;
     items: EqualUnequalItems;
     multiSizePropTypeUtil: PropTypeUtil<TMultiPropType, TPropValue>;
 };
-declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, tooltipLabel, items, multiSizePropTypeUtil, }: Props$4<TMultiPropType, TPropValue>): React$1.JSX.Element;
+declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, tooltipLabel, items, multiSizePropTypeUtil, }: Props$5<TMultiPropType, TPropValue>): React$1.JSX.Element;
 
-declare const LinkedDimensionsControl: ({ label, isSiteRtl, extendedOptions, min, }: {
+type Props$4 = {
     label: string;
     isSiteRtl?: boolean;
     extendedOptions?: ExtendedOption[];
     min?: number;
-}) => React$1.JSX.Element;
+};
+declare const LinkedDimensionsControl: ({ label, isSiteRtl, extendedOptions, min }: Props$4) => React$1.JSX.Element;
 
 type FontCategory = {
     label: string;

package/dist/index.js

@@ -1036,8 +1036,7 @@ var SizeControl = createControl(
     min = 0,
     enablePropTypeUnits = false,
     id,
-    ariaLabel,
-    isRepeaterControl = false
+    ariaLabel
   }) => {
     const {
       value: sizeValue,
@@ -1095,38 +1094,13 @@ var SizeControl = createControl(
         popupState.open(anchorRef?.current);
       }
     };
-    const handleLinkedSizeControlChanges = () => {
-      const newState = createStateFromSizeProp(
-        sizeValue,
-        state.unit === "custom" ? state.unit : actualDefaultUnit,
-        "",
-        state.custom
-      );
-      const currentUnitType = isUnitExtendedOption(state.unit) ? "custom" : "numeric";
-      const mergedStates = {
-        ...state,
-        unit: newState.unit ?? state.unit,
-        [currentUnitType]: newState[currentUnitType]
-      };
-      if (mergedStates.unit !== "auto" && areStatesEqual(state, mergedStates)) {
-        return;
-      }
-      if (state.unit === newState.unit) {
-        setState(mergedStates);
-        return;
+    const maybeClosePopup = React18.useCallback(() => {
+      if (popupState && popupState.isOpen) {
+        popupState.close();
       }
-      setState(newState);
-    };
+    }, [popupState]);
     (0, import_react13.useEffect)(() => {
-      if (!isRepeaterControl) {
-        handleLinkedSizeControlChanges();
-      }
-    }, [sizeValue]);
-    (0, import_react13.useEffect)(() => {
-      const newState = createStateFromSizeProp(sizeValue, actualDefaultUnit, "", state.custom);
-      if (activeBreakpoint && !areStatesEqual(newState, state)) {
-        setState(newState);
-      }
+      maybeClosePopup();
     }, [activeBreakpoint]);
     return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
       SizeInput,
@@ -1203,15 +1177,6 @@ function extractValueFromState(state, allowEmpty = false) {
     unit
   };
 }
-function areStatesEqual(state1, state2) {
-  if (state1.unit !== state2.unit || state1.custom !== state2.custom) {
-    return false;
-  }
-  if (isUnitExtendedOption(state1.unit)) {
-    return state1.custom === state2.custom;
-  }
-  return state1.numeric === state2.numeric || isNaN(state1.numeric) && isNaN(state2.numeric);
-}
 
 // src/controls/stroke-control.tsx
 var React21 = __toESM(require("react"));
@@ -2791,22 +2756,13 @@ var MultiSizeValueControl = ({ item, rowRef }) => {
 var React57 = __toESM(require("react"));
 var import_react29 = require("react");
 var import_editor_props19 = require("@elementor/editor-props");
+var import_editor_responsive2 = require("@elementor/editor-responsive");
 var import_icons10 = require("@elementor/icons");
 var import_ui42 = require("@elementor/ui");
 var import_i18n18 = require("@wordpress/i18n");
-var LinkedDimensionsControl = ({
-  label,
-  isSiteRtl = false,
-  extendedOptions,
-  min
-}) => {
-  const {
-    value: sizeValue,
-    setValue: setSizeValue,
-    disabled: sizeDisabled,
-    placeholder: sizePlaceholder
-  } = useBoundProp(import_editor_props19.sizePropTypeUtil);
+var LinkedDimensionsControl = ({ label, isSiteRtl = false, extendedOptions, min }) => {
   const gridRowRefs = [(0, import_react29.useRef)(null), (0, import_react29.useRef)(null)];
+  const { disabled: sizeDisabled, placeholder: sizePlaceholder } = useBoundProp(import_editor_props19.sizePropTypeUtil);
   const {
     value: dimensionsValue,
     setValue: setDimensionsValue,
@@ -2814,62 +2770,83 @@ var LinkedDimensionsControl = ({
     placeholder: dimensionsPlaceholder,
     disabled: dimensionsDisabled
   } = useBoundProp(import_editor_props19.dimensionsPropTypeUtil);
-  const hasUserValues = !!(dimensionsValue || sizeValue);
+  const { value: masterValue, placeholder: masterPlaceholder, setValue: setMasterValue } = useBoundProp();
   const hasPlaceholders = !!(sizePlaceholder || dimensionsPlaceholder);
-  const isLinked = !hasUserValues && !hasPlaceholders || (hasPlaceholders ? !!sizePlaceholder : !!sizeValue);
+  const inferIsLinked = () => {
+    if (import_editor_props19.dimensionsPropTypeUtil.isValid(masterValue)) {
+      return false;
+    }
+    if (import_editor_props19.dimensionsPropTypeUtil.isValid(masterPlaceholder)) {
+      return false;
+    }
+    return true;
+  };
+  const [isLinked, setIsLinked] = (0, import_react29.useState)(() => inferIsLinked());
+  const activeBreakpoint = (0, import_editor_responsive2.useActiveBreakpoint)();
+  (0, import_react29.useLayoutEffect)(() => {
+    setIsLinked(inferIsLinked);
+  }, [activeBreakpoint]);
   const onLinkToggle = () => {
-    if (!isLinked) {
-      setSizeValue(dimensionsValue["block-start"]?.value ?? null);
+    setIsLinked((prev) => !prev);
+    if (!import_editor_props19.dimensionsPropTypeUtil.isValid(masterValue)) {
+      const value = masterValue ? masterValue : null;
+      if (!value) {
+        setMasterValue(null);
+        return;
+      }
+      setMasterValue(
+        import_editor_props19.dimensionsPropTypeUtil.create({
+          "block-start": value,
+          "block-end": value,
+          "inline-start": value,
+          "inline-end": value
+        })
+      );
       return;
     }
-    const value = sizeValue ? import_editor_props19.sizePropTypeUtil.create(sizeValue) : null;
-    setDimensionsValue({
-      "block-start": value,
-      "block-end": value,
-      "inline-start": value,
-      "inline-end": value
-    });
+    const sizeValue = dimensionsValue?.["block-start"] ?? dimensionsValue?.["inline-end"] ?? dimensionsValue?.["block-end"] ?? dimensionsValue?.["inline-start"] ?? null;
+    if (!sizeValue) {
+      setMasterValue(null);
+      return;
+    }
+    setMasterValue(sizeValue);
   };
   const tooltipLabel = label.toLowerCase();
   const LinkedIcon = isLinked ? import_icons10.LinkIcon : import_icons10.DetachIcon;
   const linkedLabel = (0, import_i18n18.__)("Link %s", "elementor").replace("%s", tooltipLabel);
   const unlinkedLabel = (0, import_i18n18.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
   const disabled = sizeDisabled || dimensionsDisabled;
-  return /* @__PURE__ */ React57.createElement(
-    PropProvider,
+  const propProviderProps = {
+    propType,
+    value: dimensionsValue,
+    placeholder: dimensionsPlaceholder,
+    setValue: setDimensionsValue,
+    isDisabled: () => dimensionsDisabled
+  };
+  return /* @__PURE__ */ React57.createElement(PropProvider, { ...propProviderProps }, /* @__PURE__ */ React57.createElement(import_ui42.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React57.createElement(import_ui42.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React57.createElement(
+    StyledToggleButton,
     {
-      propType,
-      value: dimensionsValue,
-      setValue: setDimensionsValue,
-      placeholder: dimensionsPlaceholder,
-      isDisabled: () => disabled
+      "aria-label": isLinked ? unlinkedLabel : linkedLabel,
+      size: "tiny",
+      value: "check",
+      selected: isLinked,
+      sx: { marginLeft: "auto" },
+      onChange: onLinkToggle,
+      disabled,
+      isPlaceholder: hasPlaceholders
     },
-    /* @__PURE__ */ React57.createElement(import_ui42.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React57.createElement(import_ui42.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React57.createElement(
-      StyledToggleButton,
-      {
-        "aria-label": isLinked ? unlinkedLabel : linkedLabel,
-        size: "tiny",
-        value: "check",
-        selected: isLinked,
-        sx: { marginLeft: "auto" },
-        onChange: onLinkToggle,
-        disabled,
-        isPlaceholder: hasPlaceholders
-      },
-      /* @__PURE__ */ React57.createElement(LinkedIcon, { fontSize: "tiny" })
-    ))),
-    getCssDimensionProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React57.createElement(import_ui42.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React57.createElement(import_ui42.Grid, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React57.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(Label, { ...props })), /* @__PURE__ */ React57.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(
-      Control3,
-      {
-        bind: props.bind,
-        startIcon: icon,
-        isLinked,
-        extendedOptions,
-        anchorRef: gridRowRefs[index],
-        min
-      }
-    ))))))
-  );
+    /* @__PURE__ */ React57.createElement(LinkedIcon, { fontSize: "tiny" })
+  ))), getCssDimensionProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React57.createElement(import_ui42.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React57.createElement(import_ui42.Grid, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React57.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(Label, { ...props })), /* @__PURE__ */ React57.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(
+    Control3,
+    {
+      bind: props.bind,
+      startIcon: icon,
+      isLinked,
+      extendedOptions,
+      anchorRef: gridRowRefs[index],
+      min
+    }
+  )))))));
 };
 var Control3 = ({
   bind,