@elementor/editor-controls 3.33.0-276 → 3.33.0-278

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import { RefObject, ReactNode, FC, PropsWithChildren, ReactElement, ComponentType } from 'react';
 import { SxProps, SelectProps, UnstableColorFieldProps, ToggleButtonProps, StackProps, PopupState, Theme, FormLabelProps } from '@elementor/ui';
-import { StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, LinkPropValue, PropType, CreateOptions } from '@elementor/editor-props';
+import { StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, LinkPropValue, TransformablePropValue, PropType, CreateOptions } from '@elementor/editor-props';
 import { StyleDefinitionState } from '@elementor/editor-styles';
 import * as _elementor_locations from '@elementor/locations';
 
@@ -160,12 +160,12 @@ declare const NumberControl: ControlComponent<({ placeholder: labelPlaceholder,
 }) => React$1.JSX.Element>;
 
 type MultiSizePropValue = Record<PropKey, SizePropValue>;
-type Item = {
+type Item$1 = {
     icon: ReactNode;
     label: string;
     bind: PropKey;
 };
-type EqualUnequalItems = [Item, Item, Item, Item];
+type EqualUnequalItems = [Item$1, Item$1, Item$1, Item$1];
 type Props$4<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
     label: string;
     icon: ReactNode;
@@ -292,11 +292,17 @@ type TooltipAddItemActionProps = {
     ariaLabel?: string;
 };
 
+type Item<T> = {
+    disabled?: boolean;
+} & T;
+type RepeatablePropValue = TransformablePropValue<PropKey, PropValue>;
+
 type ChildControlConfig = {
     component: React.ComponentType;
     props?: Record<string, unknown>;
     propTypeUtil: PropTypeUtil<string, any>;
     label?: string;
+    isItemDisabled?: (item: Item<RepeatablePropValue>) => boolean;
 };
 
 type RepeatableControlProps = {
@@ -350,6 +356,7 @@ type TransitionProperty = {
     label: string;
     value: string;
     unavailable?: boolean;
+    isDisabled?: boolean;
 };
 type TransitionCategory = {
     label: string;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import { RefObject, ReactNode, FC, PropsWithChildren, ReactElement, ComponentType } from 'react';
 import { SxProps, SelectProps, UnstableColorFieldProps, ToggleButtonProps, StackProps, PopupState, Theme, FormLabelProps } from '@elementor/ui';
-import { StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, LinkPropValue, PropType, CreateOptions } from '@elementor/editor-props';
+import { StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, LinkPropValue, TransformablePropValue, PropType, CreateOptions } from '@elementor/editor-props';
 import { StyleDefinitionState } from '@elementor/editor-styles';
 import * as _elementor_locations from '@elementor/locations';
 
@@ -160,12 +160,12 @@ declare const NumberControl: ControlComponent<({ placeholder: labelPlaceholder,
 }) => React$1.JSX.Element>;
 
 type MultiSizePropValue = Record<PropKey, SizePropValue>;
-type Item = {
+type Item$1 = {
     icon: ReactNode;
     label: string;
     bind: PropKey;
 };
-type EqualUnequalItems = [Item, Item, Item, Item];
+type EqualUnequalItems = [Item$1, Item$1, Item$1, Item$1];
 type Props$4<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
     label: string;
     icon: ReactNode;
@@ -292,11 +292,17 @@ type TooltipAddItemActionProps = {
     ariaLabel?: string;
 };
 
+type Item<T> = {
+    disabled?: boolean;
+} & T;
+type RepeatablePropValue = TransformablePropValue<PropKey, PropValue>;
+
 type ChildControlConfig = {
     component: React.ComponentType;
     props?: Record<string, unknown>;
     propTypeUtil: PropTypeUtil<string, any>;
     label?: string;
+    isItemDisabled?: (item: Item<RepeatablePropValue>) => boolean;
 };
 
 type RepeatableControlProps = {
@@ -350,6 +356,7 @@ type TransitionProperty = {
     label: string;
     value: string;
     unavailable?: boolean;
+    isDisabled?: boolean;
 };
 type TransitionCategory = {
     label: string;

package/dist/index.js

@@ -1339,7 +1339,8 @@ var useRepeaterContext = () => {
 var RepeaterContextProvider = ({
   children,
   initial,
-  propTypeUtil
+  propTypeUtil,
+  isItemDisabled: isItemDisabled2 = () => false
 }) => {
   const { value: repeaterValues, setValue: setRepeaterValues } = useBoundProp(propTypeUtil);
   const [items2, setItems] = useSyncExternalState({
@@ -1406,7 +1407,8 @@ var RepeaterContextProvider = ({
         addItem,
         removeItem,
         rowRef,
-        setRowRef
+        setRowRef,
+        isItemDisabled: (index) => isItemDisabled2(itemsWithKeys[index].item)
       }
     },
     children
@@ -1598,12 +1600,20 @@ var { Slot: RepeaterItemActionsSlot, inject: injectIntoRepeaterItemActions } = (
 
 // src/components/control-repeater/items/item.tsx
 var Item = ({ Label: Label3, Icon, actions }) => {
-  const { popoverState, setRowRef, openItemIndex, setOpenItemIndex, index = -1, value } = useRepeaterContext();
+  const {
+    popoverState,
+    setRowRef,
+    openItemIndex,
+    setOpenItemIndex,
+    index = -1,
+    value,
+    isItemDisabled: isItemDisabled2
+  } = useRepeaterContext();
   const repeatableContext = React27.useContext(RepeatableControlContext);
   const disableOpen = !!repeatableContext?.props?.readOnly;
   const triggerProps = (0, import_ui21.bindTrigger)(popoverState);
   const onClick = (ev) => {
-    if (disableOpen) {
+    if (disableOpen || isItemDisabled2(index)) {
       return;
     }
     triggerProps.onClick(ev);
@@ -1625,6 +1635,14 @@ var Item = ({ Label: Label3, Icon, actions }) => {
       ...triggerProps,
       onClick,
       startIcon: /* @__PURE__ */ React27.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React27.createElement(Icon, { value })),
+      sx: {
+        minHeight: (theme) => theme.spacing(3.5),
+        ...isItemDisabled2(index) && {
+          '[role="button"]': {
+            cursor: "not-allowed"
+          }
+        }
+      },
       actions: /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(RepeaterItemActionsSlot, { index: index ?? -1 }), actions)
     }
   );
@@ -1635,9 +1653,18 @@ var React28 = __toESM(require("react"));
 var ControlRepeater = ({
   children,
   initial,
-  propTypeUtil
+  propTypeUtil,
+  isItemDisabled: isItemDisabled2
 }) => {
-  return /* @__PURE__ */ React28.createElement(SectionContent, null, /* @__PURE__ */ React28.createElement(RepeaterContextProvider, { initial, propTypeUtil }, children));
+  return /* @__PURE__ */ React28.createElement(SectionContent, null, /* @__PURE__ */ React28.createElement(
+    RepeaterContextProvider,
+    {
+      initial,
+      propTypeUtil,
+      isItemDisabled: isItemDisabled2
+    },
+    children
+  ));
 };
 
 // src/components/control-repeater/actions/disable-item-action.tsx
@@ -1671,16 +1698,26 @@ var import_ui23 = require("@elementor/ui");
 var import_i18n9 = require("@wordpress/i18n");
 var SIZE4 = "tiny";
 var DuplicateItemAction = () => {
-  const { items: items2, addItem, index = -1 } = useRepeaterContext();
+  const { items: items2, addItem, index = -1, isItemDisabled: isItemDisabled2 } = useRepeaterContext();
   if (index === -1) {
     return null;
   }
   const duplicateLabel = (0, import_i18n9.__)("Duplicate", "elementor");
+  const item = items2[index]?.item;
   const onClick = (ev) => {
-    const newItem = structuredClone(items2[index]?.item);
+    const newItem = structuredClone(item);
     addItem(ev, { item: newItem, index: index + 1 });
   };
-  return /* @__PURE__ */ React30.createElement(import_ui23.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React30.createElement(import_ui23.IconButton, { size: SIZE4, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React30.createElement(import_icons7.CopyIcon, { fontSize: SIZE4 })));
+  return /* @__PURE__ */ React30.createElement(import_ui23.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React30.createElement(
+    import_ui23.IconButton,
+    {
+      size: SIZE4,
+      onClick,
+      "aria-label": duplicateLabel,
+      disabled: isItemDisabled2(index)
+    },
+    /* @__PURE__ */ React30.createElement(import_icons7.CopyIcon, { fontSize: SIZE4 })
+  ));
 };
 
 // src/components/control-repeater/actions/remove-item-action.tsx
@@ -2193,8 +2230,8 @@ var FilterRepeaterControl = createControl(({ filterPropName = "filter" }) => {
   )));
 });
 var Repeater = ({ propTypeUtil, label, filterPropName }) => {
-  const { getInitialValue } = useFilterConfig();
-  return /* @__PURE__ */ React48.createElement(ControlRepeater, { initial: getInitialValue(), propTypeUtil }, /* @__PURE__ */ React48.createElement(RepeaterHeader, { label }, /* @__PURE__ */ React48.createElement(
+  const { getInitialValue: getInitialValue2 } = useFilterConfig();
+  return /* @__PURE__ */ React48.createElement(ControlRepeater, { initial: getInitialValue2(), propTypeUtil }, /* @__PURE__ */ React48.createElement(RepeaterHeader, { label }, /* @__PURE__ */ React48.createElement(
     TooltipAddItemAction,
     {
       newItemIndex: 0,
@@ -4529,11 +4566,11 @@ var RepeatableControl = createControl(
     propKey,
     addItemTooltipProps
   }) => {
-    const { propTypeUtil: childPropTypeUtil } = childControlConfig;
+    const { propTypeUtil: childPropTypeUtil, isItemDisabled: isItemDisabled2 } = childControlConfig;
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil = (0, import_react41.useMemo)(
+    const childArrayPropTypeUtil2 = (0, import_react41.useMemo)(
       () => (0, import_editor_props35.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
@@ -4545,12 +4582,13 @@ var RepeatableControl = createControl(
       }),
       [childControlConfig, placeholder, patternLabel]
     );
-    const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil);
+    const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
     return /* @__PURE__ */ React79.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React79.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React79.createElement(
       ControlRepeater,
       {
         initial: childPropTypeUtil.create(initialValues || null),
-        propTypeUtil: childArrayPropTypeUtil
+        propTypeUtil: childArrayPropTypeUtil2,
+        isItemDisabled: isItemDisabled2
       },
       /* @__PURE__ */ React79.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React79.createElement(
         TooltipAddItemAction,
@@ -5362,14 +5400,14 @@ var Repeater2 = ({
   const transformFunctionsContext = useBoundProp(import_editor_props46.transformFunctionsPropTypeUtil);
   const availableValues = [initialTransformValue, initialScaleValue, initialRotateValue, initialSkewValue];
   const { value: transformValues, bind } = transformFunctionsContext;
-  const getInitialValue = () => {
+  const getInitialValue2 = () => {
     return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
   };
-  const shouldDisableAddItem = !getInitialValue();
+  const shouldDisableAddItem = !getInitialValue2();
   return /* @__PURE__ */ React94.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React94.createElement(
     ControlRepeater,
     {
-      initial: getInitialValue() ?? initialTransformValue,
+      initial: getInitialValue2() ?? initialTransformValue,
       propTypeUtil: import_editor_props46.transformFunctionsPropTypeUtil
     },
     /* @__PURE__ */ React94.createElement(
@@ -5525,13 +5563,23 @@ var toTransitionSelectorValue = (label) => {
   }
   return null;
 };
-var findByValue = (value) => {
+function getTransitionPropertyByValue(item) {
+  if (!item?.value) {
+    return null;
+  }
   for (const category of transitionProperties) {
-    const property = category.properties.find((prop) => prop.value === value);
-    if (property) {
-      return property.label;
+    for (const property of category.properties) {
+      if (property.value === item.value) {
+        return property;
+      }
     }
   }
+  return null;
+}
+var includeCurrentValueInOptions = (value, disabledItems) => {
+  return disabledItems.filter((item) => {
+    return item !== value.key.value;
+  });
 };
 var TransitionSelector = ({
   recentlyUsedList = [],
@@ -5544,7 +5592,7 @@ var TransitionSelector = ({
   const defaultRef = (0, import_react50.useRef)(null);
   const popoverState = (0, import_ui82.usePopupState)({ variant: "popover" });
   const getItemList = () => {
-    const recentItems = recentlyUsedList.map((item) => findByValue(item)).filter((item) => !!item);
+    const recentItems = recentlyUsedList.map((item) => getTransitionPropertyByValue({ value: item, $$type: "string" })?.label).filter((item) => !!item);
     const filteredItems = transitionsItemsList.map((category) => {
       return {
         ...category,
@@ -5612,7 +5660,7 @@ var TransitionSelector = ({
         sectionWidth: 268,
         title: (0, import_i18n48.__)("Transition Property", "elementor"),
         icon: import_icons31.VariationsIcon,
-        disabledItems
+        disabledItems: includeCurrentValueInOptions(value, disabledItems)
       }
     )
   ));
@@ -5624,6 +5672,21 @@ var DURATION_CONFIG = {
   units: ["s", "ms"],
   defaultUnit: "ms"
 };
+var childArrayPropTypeUtil = (0, import_editor_props49.createArrayPropUtils)(
+  import_editor_props49.selectionSizePropTypeUtil.key,
+  import_editor_props49.selectionSizePropTypeUtil.schema,
+  "transition"
+);
+subscribeToTransitionEvent();
+var areAllPropertiesUsed = (value = []) => {
+  return value?.length ? transitionProperties.every((category) => {
+    return category.properties.every((property) => {
+      return property.isDisabled || !!value?.find((item) => {
+        return item.value?.selection?.value?.value?.value === property.value;
+      });
+    });
+  }) : false;
+};
 var getSelectionSizeProps = (recentlyUsedList, disabledItems) => {
   return {
     selectionLabel: (0, import_i18n49.__)("Type", "elementor"),
@@ -5649,13 +5712,56 @@ var getSelectionSizeProps = (recentlyUsedList, disabledItems) => {
     }
   };
 };
-function getChildControlConfig(recentlyUsedList, disabledItems) {
+var isItemDisabled = (item) => {
+  const property = getTransitionPropertyByValue(item.value.selection.value?.value);
+  return !property ? false : !!property.isDisabled;
+};
+var getChildControlConfig = (recentlyUsedList, disabledItems) => {
   return {
     propTypeUtil: import_editor_props49.selectionSizePropTypeUtil,
     component: SelectionSizeControl,
-    props: getSelectionSizeProps(recentlyUsedList, disabledItems)
+    props: getSelectionSizeProps(recentlyUsedList, disabledItems),
+    isItemDisabled
   };
-}
+};
+var isPropertyUsed = (value, property) => {
+  return (value ?? []).some((item) => {
+    return item?.value?.selection?.value?.value?.value === property.value;
+  });
+};
+var getDisabledItemLabels = (values = []) => {
+  const disabledLabels = (values || []).map(
+    (item) => item.value?.selection?.value?.key?.value
+  );
+  transitionProperties.forEach((category) => {
+    const disabledProperties = category.properties.filter((property) => property.isDisabled && !disabledLabels.includes(property.label)).map((property) => property.label);
+    disabledLabels.push(...disabledProperties);
+  });
+  return disabledLabels;
+};
+var getInitialValue = (values = []) => {
+  if (!values?.length) {
+    return initialTransitionValue;
+  }
+  for (const category of transitionProperties) {
+    for (const property of category.properties) {
+      if (isPropertyUsed(values, property)) {
+        continue;
+      }
+      return {
+        ...initialTransitionValue,
+        selection: {
+          $$type: "key-value",
+          value: {
+            key: { value: property.label, $$type: "string" },
+            value: { value: property.value, $$type: "string" }
+          }
+        }
+      };
+    }
+  }
+  return initialTransitionValue;
+};
 var disableAddItemTooltipContent = /* @__PURE__ */ React97.createElement(
   import_ui83.Alert,
   {
@@ -5669,13 +5775,6 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React97.createElement(
   /* @__PURE__ */ React97.createElement(import_ui83.AlertTitle, null, (0, import_i18n49.__)("Transitions", "elementor")),
   /* @__PURE__ */ React97.createElement(import_ui83.Box, { component: "span" }, /* @__PURE__ */ React97.createElement(import_ui83.Typography, { variant: "body2" }, (0, import_i18n49.__)("Switch to 'Normal' state to add a transition.", "elementor")))
 );
-subscribeToTransitionEvent();
-var getTransitionLabel = (item) => {
-  return item.value.selection.value?.key?.value ?? "";
-};
-var getDisabledItems = (value) => {
-  return value?.map(getTransitionLabel) ?? [];
-};
 var TransitionRepeaterControl = createControl(
   ({
     recentlyUsedListGetter,
@@ -5683,12 +5782,8 @@ var TransitionRepeaterControl = createControl(
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
     const [recentlyUsedList, setRecentlyUsedList] = (0, import_react51.useState)([]);
-    const childArrayPropTypeUtil = (0, import_react51.useMemo)(
-      () => (0, import_editor_props49.createArrayPropUtils)(import_editor_props49.selectionSizePropTypeUtil.key, import_editor_props49.selectionSizePropTypeUtil.schema, "transition"),
-      []
-    );
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const disabledItems = (0, import_react51.useMemo)(() => getDisabledItems(value), [value]);
+    const disabledItems = (0, import_react51.useMemo)(() => getDisabledItemLabels(value), [value]);
     const allowedTransitionSet = (0, import_react51.useMemo)(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
@@ -5711,7 +5806,7 @@ var TransitionRepeaterControl = createControl(
     (0, import_react51.useEffect)(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    const allPropertiesUsed = value?.length === transitionProperties.length;
+    const allPropertiesUsed = (0, import_react51.useMemo)(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
     return /* @__PURE__ */ React97.createElement(
       RepeatableControl,
@@ -5722,7 +5817,7 @@ var TransitionRepeaterControl = createControl(
         placeholder: (0, import_i18n49.__)("Empty Transition", "elementor"),
         showDuplicate: false,
         showToggle: true,
-        initialValues: initialTransitionValue,
+        initialValues: getInitialValue(value),
         childControlConfig: getChildControlConfig(recentlyUsedList, disabledItems),
         propKey: "transition",
         addItemTooltipProps: {