@elementor/editor-controls 3.33.0-112 → 3.33.0-113

package/dist/index.d.mts

@@ -144,12 +144,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$2<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
     label: string;
     icon: ReactNode;
@@ -324,6 +324,42 @@ type CssEditorProps = {
 };
 declare const CssEditor: ({ value, onChange }: CssEditorProps) => React$1.JSX.Element;
 
+type AnchorEl = HTMLElement | null;
+type Item<T> = {
+    disabled?: boolean;
+} & T;
+type CollectionPropUtil<T> = PropTypeUtil<PropKey, T[]>;
+type RepeaterItemContentProps<T> = {
+    anchorEl: AnchorEl;
+    bind: PropKey;
+    value: T;
+    collectionPropUtil?: CollectionPropUtil<T>;
+};
+type RepeaterItemContent<T> = React$1.ComponentType<RepeaterItemContentProps<T>>;
+type RepeaterProps<T> = {
+    label: string;
+    values?: T[];
+    addToBottom?: boolean;
+    openOnAdd?: boolean;
+    setValues: (newValue: T[]) => void;
+    disabled?: boolean;
+    itemSettings: {
+        initialValues: T;
+        Label: React$1.ComponentType<{
+            value: T;
+        }>;
+        Icon: React$1.ComponentType<{
+            value: T;
+        }>;
+        Content: RepeaterItemContent<T>;
+    };
+    showDuplicate?: boolean;
+    showToggle?: boolean;
+    isSortable?: boolean;
+    collectionPropUtil?: CollectionPropUtil<T>;
+};
+declare const Repeater: <T>({ label, itemSettings, disabled, openOnAdd, addToBottom, values: repeaterValues, setValues: setRepeaterValues, showDuplicate, showToggle, isSortable, collectionPropUtil, }: RepeaterProps<Item<T>>) => React$1.JSX.Element;
+
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;
 type ControlComponent<TComponent extends AnyComponentType = AnyComponentType> = TComponent & {
@@ -345,6 +381,10 @@ declare const useControlActions: () => ControlActionsContext;
 type SetValueMeta = {
     bind?: PropKey;
     validation?: (value: PropValue) => boolean;
+    action?: {
+        type: string;
+        payload?: Record<string, unknown>;
+    };
 };
 type SetValue<T> = (value: T, options?: CreateOptions, meta?: SetValueMeta) => void;
 type PropContext<T extends PropValue, P extends PropType> = {
@@ -451,4 +491,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue, options?: CreateOptions, meta?: SetValueMeta) => void];
 
-export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, CssEditor, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformBaseControl, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };
+export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, CssEditor, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, Repeater, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformBaseControl, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };

package/dist/index.d.ts

@@ -144,12 +144,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$2<TMultiPropType extends string, TPropValue extends MultiSizePropValue> = {
     label: string;
     icon: ReactNode;
@@ -324,6 +324,42 @@ type CssEditorProps = {
 };
 declare const CssEditor: ({ value, onChange }: CssEditorProps) => React$1.JSX.Element;
 
+type AnchorEl = HTMLElement | null;
+type Item<T> = {
+    disabled?: boolean;
+} & T;
+type CollectionPropUtil<T> = PropTypeUtil<PropKey, T[]>;
+type RepeaterItemContentProps<T> = {
+    anchorEl: AnchorEl;
+    bind: PropKey;
+    value: T;
+    collectionPropUtil?: CollectionPropUtil<T>;
+};
+type RepeaterItemContent<T> = React$1.ComponentType<RepeaterItemContentProps<T>>;
+type RepeaterProps<T> = {
+    label: string;
+    values?: T[];
+    addToBottom?: boolean;
+    openOnAdd?: boolean;
+    setValues: (newValue: T[]) => void;
+    disabled?: boolean;
+    itemSettings: {
+        initialValues: T;
+        Label: React$1.ComponentType<{
+            value: T;
+        }>;
+        Icon: React$1.ComponentType<{
+            value: T;
+        }>;
+        Content: RepeaterItemContent<T>;
+    };
+    showDuplicate?: boolean;
+    showToggle?: boolean;
+    isSortable?: boolean;
+    collectionPropUtil?: CollectionPropUtil<T>;
+};
+declare const Repeater: <T>({ label, itemSettings, disabled, openOnAdd, addToBottom, values: repeaterValues, setValues: setRepeaterValues, showDuplicate, showToggle, isSortable, collectionPropUtil, }: RepeaterProps<Item<T>>) => React$1.JSX.Element;
+
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;
 type ControlComponent<TComponent extends AnyComponentType = AnyComponentType> = TComponent & {
@@ -345,6 +381,10 @@ declare const useControlActions: () => ControlActionsContext;
 type SetValueMeta = {
     bind?: PropKey;
     validation?: (value: PropValue) => boolean;
+    action?: {
+        type: string;
+        payload?: Record<string, unknown>;
+    };
 };
 type SetValue<T> = (value: T, options?: CreateOptions, meta?: SetValueMeta) => void;
 type PropContext<T extends PropValue, P extends PropType> = {
@@ -451,4 +491,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue, options?: CreateOptions, meta?: SetValueMeta) => void];
 
-export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, CssEditor, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformBaseControl, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };
+export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, CssEditor, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, Repeater, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformBaseControl, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };

package/dist/index.js

@@ -56,6 +56,7 @@ __export(index_exports, {
   PropKeyProvider: () => PropKeyProvider,
   PropProvider: () => PropProvider,
   RepeatableControl: () => RepeatableControl,
+  Repeater: () => Repeater3,
   SelectControl: () => SelectControl,
   SizeControl: () => SizeControl,
   StrokeControl: () => StrokeControl,
@@ -5687,6 +5688,217 @@ var CssEditor = ({ value, onChange }) => {
     }
   ));
 };
+
+// src/components/repeater.tsx
+var React93 = __toESM(require("react"));
+var import_react48 = require("react");
+var import_icons32 = require("@elementor/icons");
+var import_ui81 = require("@elementor/ui");
+var import_i18n49 = require("@wordpress/i18n");
+var SIZE9 = "tiny";
+var EMPTY_OPEN_ITEM2 = -1;
+var Repeater3 = ({
+  label,
+  itemSettings,
+  disabled = false,
+  openOnAdd = false,
+  addToBottom = false,
+  values: repeaterValues = [],
+  setValues: setRepeaterValues,
+  showDuplicate = true,
+  showToggle = true,
+  isSortable = true,
+  collectionPropUtil
+}) => {
+  const [openItem, setOpenItem] = (0, import_react48.useState)(EMPTY_OPEN_ITEM2);
+  const [items2, setItems] = useSyncExternalState({
+    external: repeaterValues,
+    // @ts-expect-error - as long as persistWhen => true, value will never be null
+    setExternal: setRepeaterValues,
+    persistWhen: () => true
+  });
+  const [uniqueKeys, setUniqueKeys] = (0, import_react48.useState)(items2.map((_, index) => index));
+  const generateNextKey = (source) => {
+    return 1 + Math.max(0, ...source);
+  };
+  const addRepeaterItem = () => {
+    const newItem = structuredClone(itemSettings.initialValues);
+    const newKey = generateNextKey(uniqueKeys);
+    if (addToBottom) {
+      setItems([...items2, newItem], void 0, { action: { type: "add" } });
+      setUniqueKeys([...uniqueKeys, newKey]);
+    } else {
+      setItems([newItem, ...items2], void 0, { action: { type: "add" } });
+      setUniqueKeys([newKey, ...uniqueKeys]);
+    }
+    if (openOnAdd) {
+      setOpenItem(newKey);
+    }
+  };
+  const duplicateRepeaterItem = (index) => {
+    const newItem = structuredClone(items2[index]);
+    const newKey = generateNextKey(uniqueKeys);
+    const atPosition = 1 + index;
+    setItems([...items2.slice(0, atPosition), newItem, ...items2.slice(atPosition)], void 0, {
+      action: { type: "duplicate" }
+    });
+    setUniqueKeys([...uniqueKeys.slice(0, atPosition), newKey, ...uniqueKeys.slice(atPosition)]);
+  };
+  const removeRepeaterItem = (index) => {
+    setUniqueKeys(
+      uniqueKeys.filter((_, pos) => {
+        return pos !== index;
+      })
+    );
+    setItems(
+      items2.filter((_, pos) => {
+        return pos !== index;
+      }),
+      void 0,
+      { action: { type: "remove" } }
+    );
+  };
+  const toggleDisableRepeaterItem = (index) => {
+    setItems(
+      items2.map((value, pos) => {
+        if (pos === index) {
+          const { disabled: propDisabled, ...rest } = value;
+          return { ...rest, ...propDisabled ? {} : { disabled: true } };
+        }
+        return value;
+      }),
+      void 0,
+      { action: { type: "toggle-disable" } }
+    );
+  };
+  const onChangeOrder = (reorderedKeys, meta) => {
+    setUniqueKeys(reorderedKeys);
+    setItems(
+      (prevItems) => {
+        return reorderedKeys.map((keyValue) => {
+          const index = uniqueKeys.indexOf(keyValue);
+          return prevItems[index];
+        });
+      },
+      void 0,
+      { action: { type: "reorder", payload: { ...meta } } }
+    );
+  };
+  return /* @__PURE__ */ React93.createElement(SectionContent, null, /* @__PURE__ */ React93.createElement(
+    import_ui81.Stack,
+    {
+      direction: "row",
+      justifyContent: "start",
+      alignItems: "center",
+      gap: 1,
+      sx: { marginInlineEnd: -0.75 }
+    },
+    /* @__PURE__ */ React93.createElement(import_ui81.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label),
+    /* @__PURE__ */ React93.createElement(ControlAdornments, null),
+    /* @__PURE__ */ React93.createElement(
+      import_ui81.IconButton,
+      {
+        size: SIZE9,
+        sx: { ml: "auto" },
+        disabled,
+        onClick: addRepeaterItem,
+        "aria-label": (0, import_i18n49.__)("Add item", "elementor")
+      },
+      /* @__PURE__ */ React93.createElement(import_icons32.PlusIcon, { fontSize: SIZE9 })
+    )
+  ), 0 < uniqueKeys.length && /* @__PURE__ */ React93.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
+    const value = items2[index];
+    if (!value) {
+      return null;
+    }
+    return /* @__PURE__ */ React93.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React93.createElement(
+      RepeaterItem,
+      {
+        disabled,
+        propDisabled: value?.disabled,
+        label: /* @__PURE__ */ React93.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React93.createElement(itemSettings.Label, { value })),
+        startIcon: /* @__PURE__ */ React93.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React93.createElement(itemSettings.Icon, { value })),
+        removeItem: () => removeRepeaterItem(index),
+        duplicateItem: () => duplicateRepeaterItem(index),
+        toggleDisableItem: () => toggleDisableRepeaterItem(index),
+        openOnMount: openOnAdd && openItem === key,
+        onOpen: () => setOpenItem(EMPTY_OPEN_ITEM2),
+        showDuplicate,
+        showToggle,
+        collectionPropUtil
+      },
+      (props) => /* @__PURE__ */ React93.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
+    ));
+  })));
+};
+var RepeaterItem = ({
+  label,
+  propDisabled,
+  startIcon,
+  children,
+  removeItem,
+  duplicateItem,
+  toggleDisableItem,
+  openOnMount,
+  onOpen,
+  showDuplicate,
+  showToggle,
+  disabled,
+  collectionPropUtil
+}) => {
+  const [anchorEl, setAnchorEl] = (0, import_react48.useState)(null);
+  const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
+  const duplicateLabel = (0, import_i18n49.__)("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? (0, import_i18n49.__)("Show", "elementor") : (0, import_i18n49.__)("Hide", "elementor");
+  const removeLabel = (0, import_i18n49.__)("Remove", "elementor");
+  return /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(
+    import_ui81.UnstableTag,
+    {
+      disabled,
+      label,
+      showActionsOnHover: true,
+      fullWidth: true,
+      ref: setRef,
+      variant: "outlined",
+      "aria-label": (0, import_i18n49.__)("Open item", "elementor"),
+      ...(0, import_ui81.bindTrigger)(popoverState),
+      startIcon,
+      actions: /* @__PURE__ */ React93.createElement(React93.Fragment, null, showDuplicate && /* @__PURE__ */ React93.createElement(import_ui81.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React93.createElement(import_ui81.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React93.createElement(import_icons32.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React93.createElement(import_ui81.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React93.createElement(import_ui81.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React93.createElement(import_icons32.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React93.createElement(import_icons32.EyeIcon, { fontSize: SIZE9 }))), /* @__PURE__ */ React93.createElement(import_ui81.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React93.createElement(import_ui81.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React93.createElement(import_icons32.XIcon, { fontSize: SIZE9 }))))
+    }
+  ), /* @__PURE__ */ React93.createElement(
+    import_ui81.Popover,
+    {
+      disablePortal: true,
+      slotProps: {
+        paper: {
+          ref: setAnchorEl,
+          sx: { mt: 0.5, width: ref?.getBoundingClientRect().width }
+        }
+      },
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      ...popoverProps,
+      anchorEl: ref
+    },
+    /* @__PURE__ */ React93.createElement(import_ui81.Box, null, children({ anchorEl, collectionPropUtil }))
+  ));
+};
+var usePopover = (openOnMount, onOpen) => {
+  const [ref, setRef] = (0, import_react48.useState)(null);
+  const popoverState = (0, import_ui81.usePopupState)({ variant: "popover" });
+  const popoverProps = (0, import_ui81.bindPopover)(popoverState);
+  (0, import_react48.useEffect)(() => {
+    if (openOnMount && ref) {
+      popoverState.open(ref);
+      onOpen?.();
+    }
+  }, [ref]);
+  return {
+    popoverState,
+    ref,
+    setRef,
+    popoverProps
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AspectRatioControl,
@@ -5715,6 +5927,7 @@ var CssEditor = ({ value, onChange }) => {
   PropKeyProvider,
   PropProvider,
   RepeatableControl,
+  Repeater,
   SelectControl,
   SizeControl,
   StrokeControl,