@elementor/editor-controls 1.0.0 → 1.1.0

package/dist/index.js

@@ -45,11 +45,14 @@ __export(index_exports, {
   FontFamilySelector: () => FontFamilySelector,
   GapControl: () => GapControl,
   ImageControl: () => ImageControl,
+  KeyValueControl: () => KeyValueControl,
   LinkControl: () => LinkControl,
   LinkedDimensionsControl: () => LinkedDimensionsControl,
   NumberControl: () => NumberControl,
+  PositionControl: () => PositionControl,
   PropKeyProvider: () => PropKeyProvider,
   PropProvider: () => PropProvider,
+  RepeatableControl: () => RepeatableControl,
   SelectControl: () => SelectControl,
   SizeControl: () => SizeControl,
   StrokeControl: () => StrokeControl,
@@ -784,9 +787,10 @@ var useSyncExternalState = ({
 var DEFAULT_UNIT = "px";
 var DEFAULT_SIZE = NaN;
 var SizeControl = createControl((props) => {
+  const defaultUnit = props.defaultUnit ?? DEFAULT_UNIT;
   const { units: units2 = [...defaultUnits], placeholder, startIcon, anchorRef } = props;
   const { value: sizeValue, setValue: setSizeValue, disabled, restoreValue } = useBoundProp(import_editor_props6.sizePropTypeUtil);
-  const [internalState, setInternalState] = (0, import_react10.useState)(createStateFromSizeProp(sizeValue));
+  const [internalState, setInternalState] = (0, import_react10.useState)(createStateFromSizeProp(sizeValue, defaultUnit));
   const activeBreakpoint = (0, import_editor_responsive.useActiveBreakpoint)();
   const extendedOptions = useSizeExtendedOptions(props.extendedOptions || [], props.disableCustom ?? false);
   const popupState = (0, import_ui12.usePopupState)({ variant: "popover" });
@@ -803,7 +807,7 @@ var SizeControl = createControl((props) => {
       return !!newState?.numeric || newState?.numeric === 0;
     },
     fallback: (newState) => ({
-      unit: newState?.unit ?? DEFAULT_UNIT,
+      unit: newState?.unit ?? props.defaultUnit ?? DEFAULT_UNIT,
       numeric: newState?.numeric ?? DEFAULT_SIZE,
       custom: newState?.custom ?? ""
     })
@@ -838,7 +842,7 @@ var SizeControl = createControl((props) => {
     }
   };
   (0, import_react10.useEffect)(() => {
-    const newState = createStateFromSizeProp(sizeValue);
+    const newState = createStateFromSizeProp(sizeValue, defaultUnit);
     const currentUnit = isUnitExtendedOption(state.unit) ? "custom" : "numeric";
     const mergedStates = { ...state, [currentUnit]: newState[currentUnit] };
     if (mergedStates.unit !== "auto" && areStatesEqual(state, mergedStates)) {
@@ -851,7 +855,7 @@ var SizeControl = createControl((props) => {
     setState(newState);
   }, [sizeValue]);
   (0, import_react10.useEffect)(() => {
-    const newState = createStateFromSizeProp(sizeValue);
+    const newState = createStateFromSizeProp(sizeValue, defaultUnit);
     if (activeBreakpoint && !areStatesEqual(newState, state)) {
       setState(newState);
     }
@@ -889,8 +893,8 @@ function formatSize(size, unit) {
   }
   return size || size === 0 ? Number(size) : NaN;
 }
-function createStateFromSizeProp(sizeValue) {
-  const unit = sizeValue?.unit ?? DEFAULT_UNIT;
+function createStateFromSizeProp(sizeValue, defaultUnit) {
+  const unit = sizeValue?.unit ?? defaultUnit;
   const size = sizeValue?.size ?? "";
   return {
     numeric: !isUnitExtendedOption(unit) && !isNaN(Number(size)) && (size || size === 0) ? Number(size) : DEFAULT_SIZE,
@@ -1120,7 +1124,9 @@ var Repeater = ({
   openOnAdd = false,
   addToBottom = false,
   values: repeaterValues = [],
-  setValues: setRepeaterValues
+  setValues: setRepeaterValues,
+  showDuplicate = true,
+  showToggle = true
 }) => {
   const [openItem, setOpenItem] = (0, import_react14.useState)(EMPTY_OPEN_ITEM);
   const [items, setItems] = useSyncExternalState({
@@ -1224,7 +1230,9 @@ var Repeater = ({
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
         openOnMount: openOnAdd && openItem === key,
-        onOpen: () => setOpenItem(EMPTY_OPEN_ITEM)
+        onOpen: () => setOpenItem(EMPTY_OPEN_ITEM),
+        showDuplicate,
+        showToggle
       },
       (props) => /* @__PURE__ */ React25.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
     ));
@@ -1240,6 +1248,8 @@ var RepeaterItem = ({
   toggleDisableItem,
   openOnMount,
   onOpen,
+  showDuplicate,
+  showToggle,
   disabled
 }) => {
   const [anchorEl, setAnchorEl] = (0, import_react14.useState)(null);
@@ -1259,7 +1269,7 @@ var RepeaterItem = ({
       "aria-label": (0, import_i18n4.__)("Open item", "elementor"),
       ...(0, import_ui19.bindTrigger)(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(import_ui19.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(import_ui19.IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React25.createElement(import_icons4.CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React25.createElement(import_ui19.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(import_ui19.IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React25.createElement(import_icons4.EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React25.createElement(import_icons4.EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React25.createElement(import_ui19.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(import_ui19.IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React25.createElement(import_icons4.XIcon, { fontSize: SIZE }))))
+      actions: /* @__PURE__ */ React25.createElement(React25.Fragment, null, showDuplicate && /* @__PURE__ */ React25.createElement(import_ui19.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(import_ui19.IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React25.createElement(import_icons4.CopyIcon, { fontSize: SIZE }))), showToggle && /* @__PURE__ */ React25.createElement(import_ui19.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(import_ui19.IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React25.createElement(import_icons4.EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React25.createElement(import_icons4.EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React25.createElement(import_ui19.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(import_ui19.IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React25.createElement(import_icons4.XIcon, { fontSize: SIZE }))))
     }
   ), /* @__PURE__ */ React25.createElement(
     import_ui19.Popover,
@@ -1457,14 +1467,14 @@ var ControlToggleButtonGroup = ({
         width: `100%`
       }
     },
-    fixedItems.map(({ label, value: buttonValue, renderContent: Content3, showTooltip }) => /* @__PURE__ */ React28.createElement(
+    fixedItems.map(({ label, value: buttonValue, renderContent: Content4, showTooltip }) => /* @__PURE__ */ React28.createElement(
       ConditionalTooltip,
       {
         key: buttonValue,
         label,
         showTooltip: showTooltip || false
       },
-      /* @__PURE__ */ React28.createElement(import_ui22.ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React28.createElement(Content3, { size }))
+      /* @__PURE__ */ React28.createElement(import_ui22.ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React28.createElement(Content4, { size }))
     )),
     menuItems.length && exclusive && /* @__PURE__ */ React28.createElement(
       SplitButtonGroup,
@@ -1915,13 +1925,12 @@ var import_icons8 = require("@elementor/icons");
 var import_ui28 = require("@elementor/ui");
 
 // src/components/font-family-selector.tsx
-var import_react19 = require("react");
 var React34 = __toESM(require("react"));
+var import_react19 = require("react");
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons7 = require("@elementor/icons");
 var import_ui27 = require("@elementor/ui");
 var import_utils2 = require("@elementor/utils");
-var import_react_virtual = require("@tanstack/react-virtual");
 var import_i18n8 = require("@wordpress/i18n");
 
 // src/controls/font-family-control/enqueue-font.tsx
@@ -1956,8 +1965,8 @@ var FontFamilySelector = ({
 }) => {
   const [searchValue, setSearchValue] = (0, import_react19.useState)("");
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
-  const handleSearch = (event) => {
-    setSearchValue(event.target.value);
+  const handleSearch = (value) => {
+    setSearchValue(value);
   };
   const handleClose = () => {
     setSearchValue("");
@@ -1970,20 +1979,14 @@ var FontFamilySelector = ({
       onClose: handleClose,
       icon: /* @__PURE__ */ React34.createElement(import_icons7.TextIcon, { fontSize: SIZE2 })
     }
-  ), /* @__PURE__ */ React34.createElement(import_ui27.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React34.createElement(
-    import_ui27.TextField,
+  ), /* @__PURE__ */ React34.createElement(
+    import_editor_ui3.PopoverSearch,
     {
-      autoFocus: true,
-      fullWidth: true,
-      size: SIZE2,
       value: searchValue,
-      placeholder: (0, import_i18n8.__)("Search", "elementor"),
-      onChange: handleSearch,
-      InputProps: {
-        startAdornment: /* @__PURE__ */ React34.createElement(import_ui27.InputAdornment, { position: "start" }, /* @__PURE__ */ React34.createElement(import_icons7.SearchIcon, { fontSize: SIZE2 }))
-      }
+      onSearch: handleSearch,
+      placeholder: (0, import_i18n8.__)("Search", "elementor")
     }
-  )), /* @__PURE__ */ React34.createElement(import_ui27.Divider, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React34.createElement(
+  ), /* @__PURE__ */ React34.createElement(import_ui27.Divider, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React34.createElement(
     FontList,
     {
       fontListItems: filteredFontFamilies,
@@ -1991,7 +1994,7 @@ var FontFamilySelector = ({
       handleClose,
       fontFamily
     }
-  ) : /* @__PURE__ */ React34.createElement(import_ui27.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React34.createElement(import_ui27.Stack, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React34.createElement(import_icons7.TextIcon, { fontSize: "large" }), /* @__PURE__ */ React34.createElement(import_ui27.Box, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React34.createElement(import_ui27.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n8.__)("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React34.createElement(
+  ) : /* @__PURE__ */ React34.createElement(import_editor_ui3.PopoverScrollableContent, null, /* @__PURE__ */ React34.createElement(import_ui27.Stack, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React34.createElement(import_icons7.TextIcon, { fontSize: "large" }), /* @__PURE__ */ React34.createElement(import_ui27.Box, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React34.createElement(import_ui27.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n8.__)("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React34.createElement(
     import_ui27.Typography,
     {
       variant: "subtitle2",
@@ -2016,10 +2019,7 @@ var FontFamilySelector = ({
     (0, import_i18n8.__)("Clear & try again", "elementor")
   )))));
 };
-var LIST_ITEM_HEIGHT = 36;
-var LIST_ITEMS_BUFFER = 6;
 var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
-  const containerRef = (0, import_react19.useRef)(null);
   const selectedItem = fontListItems.find((item) => item.value === fontFamily);
   const debouncedVirtualizeChange = useDebounce(({ getVirtualIndexes }) => {
     getVirtualIndexes().forEach((index) => {
@@ -2029,120 +2029,19 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
       }
     });
   }, 100);
-  const virtualizer = (0, import_react_virtual.useVirtualizer)({
-    count: fontListItems.length,
-    getScrollElement: () => containerRef.current,
-    estimateSize: () => LIST_ITEM_HEIGHT,
-    overscan: LIST_ITEMS_BUFFER,
-    onChange: debouncedVirtualizeChange
-  });
-  (0, import_react19.useEffect)(
-    () => {
-      virtualizer.scrollToIndex(fontListItems.findIndex((item) => item.value === fontFamily));
-    },
-    // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [fontFamily]
-  );
   return /* @__PURE__ */ React34.createElement(
-    import_ui27.Box,
+    import_editor_ui3.PopoverMenuList,
     {
-      ref: containerRef,
-      sx: {
-        overflowY: "auto",
-        height: 260,
-        width: 220
-      }
-    },
-    /* @__PURE__ */ React34.createElement(
-      StyledMenuList,
-      {
-        role: "listbox",
-        style: {
-          height: `${virtualizer.getTotalSize()}px`
-        },
-        "data-testid": "font-list"
-      },
-      virtualizer.getVirtualItems().map((virtualRow) => {
-        const item = fontListItems[virtualRow.index];
-        const isLast = virtualRow.index === fontListItems.length - 1;
-        const isFirst = virtualRow.index === 1;
-        const isSelected = selectedItem?.value === item.value;
-        const tabIndexFallback = !selectedItem ? 0 : -1;
-        if (item.type === "category") {
-          return /* @__PURE__ */ React34.createElement(
-            import_ui27.MenuSubheader,
-            {
-              key: virtualRow.key,
-              style: {
-                transform: `translateY(${virtualRow.start}px)`
-              }
-            },
-            item.value
-          );
-        }
-        return /* @__PURE__ */ React34.createElement(
-          "li",
-          {
-            key: virtualRow.key,
-            role: "option",
-            "aria-selected": isSelected,
-            onClick: () => {
-              setFontFamily(item.value);
-              handleClose();
-            },
-            onKeyDown: (event) => {
-              if (event.key === "Enter") {
-                setFontFamily(item.value);
-                handleClose();
-              }
-              if (event.key === "ArrowDown" && isLast) {
-                event.preventDefault();
-                event.stopPropagation();
-              }
-              if (event.key === "ArrowUp" && isFirst) {
-                event.preventDefault();
-                event.stopPropagation();
-              }
-            },
-            tabIndex: isSelected ? 0 : tabIndexFallback,
-            style: {
-              transform: `translateY(${virtualRow.start}px)`,
-              fontFamily: item.value
-            }
-          },
-          item.value
-        );
-      })
-    )
+      items: fontListItems,
+      selectedValue: selectedItem?.value,
+      onChange: debouncedVirtualizeChange,
+      onSelect: setFontFamily,
+      onClose: handleClose,
+      itemStyle: (item) => ({ fontFamily: item.value }),
+      "data-testid": "font-list"
+    }
   );
 };
-var StyledMenuList = (0, import_ui27.styled)(import_ui27.MenuList)(({ theme }) => ({
-  "& > li": {
-    height: LIST_ITEM_HEIGHT,
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    display: "flex",
-    alignItems: "center"
-  },
-  '& > [role="option"]': {
-    ...theme.typography.caption,
-    lineHeight: "inherit",
-    padding: theme.spacing(0.75, 2, 0.75, 4),
-    "&:hover, &:focus": {
-      backgroundColor: theme.palette.action.hover
-    },
-    '&[aria-selected="true"]': {
-      backgroundColor: theme.palette.action.selected
-    },
-    cursor: "pointer",
-    textOverflow: "ellipsis"
-  },
-  width: "100%",
-  position: "relative"
-}));
 var useDebounce = (fn, delay) => {
   const [debouncedFn] = (0, import_react19.useState)(() => (0, import_utils2.debounce)(fn, delay));
   (0, import_react19.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
@@ -3369,6 +3268,188 @@ var SwitchControl2 = createControl(() => {
   };
   return /* @__PURE__ */ React50.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React50.createElement(import_ui44.Switch, { checked: !!value, onChange: handleChange, size: "small", disabled }));
 });
+
+// src/controls/repeatable-control.tsx
+var React51 = __toESM(require("react"));
+var import_react30 = require("react");
+var import_editor_props27 = require("@elementor/editor-props");
+var import_i18n20 = require("@wordpress/i18n");
+
+// src/hooks/use-repeatable-control-context.ts
+var import_react29 = require("react");
+var RepeatableControlContext = (0, import_react29.createContext)(void 0);
+var useRepeatableControlContext = () => {
+  const context = (0, import_react29.useContext)(RepeatableControlContext);
+  if (!context) {
+    throw new Error("useRepeatableControlContext must be used within RepeatableControl");
+  }
+  return context;
+};
+
+// src/controls/repeatable-control.tsx
+var RepeatableControl = createControl(
+  ({ label, childControlConfig, showDuplicate, showToggle }) => {
+    const { propTypeUtil: childPropTypeUtil } = childControlConfig;
+    if (!childPropTypeUtil) {
+      return null;
+    }
+    const childArrayPropTypeUtil = (0, import_react30.useMemo)(
+      () => (0, import_editor_props27.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema),
+      [childPropTypeUtil.key, childPropTypeUtil.schema]
+    );
+    const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil);
+    return /* @__PURE__ */ React51.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React51.createElement(RepeatableControlContext.Provider, { value: childControlConfig }, /* @__PURE__ */ React51.createElement(
+      Repeater,
+      {
+        openOnAdd: true,
+        values: value ?? [],
+        setValues: setValue,
+        label,
+        itemSettings: {
+          Icon: ItemIcon3,
+          Label: ItemLabel3,
+          Content: ItemContent3,
+          initialValues: childPropTypeUtil.create(null)
+        },
+        showDuplicate,
+        showToggle
+      }
+    )));
+  }
+);
+var ItemContent3 = ({ bind }) => {
+  return /* @__PURE__ */ React51.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React51.createElement(Content3, null));
+};
+var ItemIcon3 = () => /* @__PURE__ */ React51.createElement(React51.Fragment, null);
+var Content3 = () => {
+  const { component: ChildControl, props = {} } = useRepeatableControlContext();
+  return /* @__PURE__ */ React51.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React51.createElement(PopoverGridContainer, null, /* @__PURE__ */ React51.createElement(ChildControl, { ...props })));
+};
+var ItemLabel3 = () => {
+  const { label = (0, import_i18n20.__)("Empty", "elementor") } = useRepeatableControlContext();
+  return /* @__PURE__ */ React51.createElement("span", null, label);
+};
+
+// src/controls/key-value-control.tsx
+var React52 = __toESM(require("react"));
+var import_react31 = require("react");
+var import_editor_props28 = require("@elementor/editor-props");
+var import_ui45 = require("@elementor/ui");
+var import_i18n21 = require("@wordpress/i18n");
+var KeyValueControl = createControl((props = {}) => {
+  const { value, setValue } = useBoundProp(import_editor_props28.keyValuePropTypeUtil);
+  const [keyError, setKeyError] = (0, import_react31.useState)(null);
+  const [valueError, setValueError] = (0, import_react31.useState)(null);
+  const keyLabel = props.keyName || (0, import_i18n21.__)("Key", "elementor");
+  const valueLabel = props.valueName || (0, import_i18n21.__)("Value", "elementor");
+  const keyValue = value?.key?.value || "";
+  const valueValue = value?.value?.value || "";
+  const [keyRegex, valueRegex, errMsg] = (0, import_react31.useMemo)(
+    () => [
+      props.regexKey ? new RegExp(props.regexKey) : void 0,
+      props.regexValue ? new RegExp(props.regexValue) : void 0,
+      props.validationErrorMessage || (0, import_i18n21.__)("Invalid Format", "elementor")
+    ],
+    [props.regexKey, props.regexValue, props.validationErrorMessage]
+  );
+  const validate = (newValue, FieldType) => {
+    if (FieldType === "key" && keyRegex) {
+      const isValid = keyRegex.test(newValue);
+      setKeyError(isValid ? null : errMsg);
+    } else if (FieldType === "value" && valueRegex) {
+      const isValid = valueRegex.test(newValue);
+      setValueError(isValid ? null : errMsg);
+    }
+  };
+  const handleChange = (event, fieldType) => {
+    const newValue = event.target.value;
+    validate(newValue, fieldType);
+    setValue({
+      ...value,
+      [fieldType]: {
+        value: newValue,
+        $$type: "string"
+      }
+    });
+  };
+  const isKeyInvalid = keyError !== null;
+  const isValueInvalid = valueError !== null;
+  return /* @__PURE__ */ React52.createElement(ControlActions, null, /* @__PURE__ */ React52.createElement(import_ui45.Grid, { container: true, gap: 1.5, p: 1.5, sx: props.sx }, /* @__PURE__ */ React52.createElement(import_ui45.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React52.createElement(import_ui45.FormLabel, { size: "tiny" }, keyLabel), /* @__PURE__ */ React52.createElement(
+    import_ui45.TextField,
+    {
+      sx: { pt: 1 },
+      size: "tiny",
+      fullWidth: true,
+      value: keyValue,
+      onChange: (e) => handleChange(e, "key"),
+      error: isKeyInvalid
+    }
+  ), isKeyInvalid && /* @__PURE__ */ React52.createElement(import_ui45.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React52.createElement(import_ui45.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React52.createElement(import_ui45.FormLabel, { size: "tiny" }, valueLabel), /* @__PURE__ */ React52.createElement(
+    import_ui45.TextField,
+    {
+      sx: { pt: 1 },
+      size: "tiny",
+      fullWidth: true,
+      value: valueValue,
+      onChange: (e) => handleChange(e, "value"),
+      disabled: isKeyInvalid,
+      error: isValueInvalid
+    }
+  ), isValueInvalid && /* @__PURE__ */ React52.createElement(import_ui45.FormHelperText, { error: true }, valueError))));
+});
+
+// src/controls/position-control.tsx
+var React53 = __toESM(require("react"));
+var import_react32 = require("react");
+var import_editor_props29 = require("@elementor/editor-props");
+var import_editor_ui7 = require("@elementor/editor-ui");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_icons18 = require("@elementor/icons");
+var import_ui46 = require("@elementor/ui");
+var import_i18n22 = require("@wordpress/i18n");
+var positionOptions = [
+  { label: (0, import_i18n22.__)("Center center", "elementor"), value: "center center" },
+  { label: (0, import_i18n22.__)("Center left", "elementor"), value: "center left" },
+  { label: (0, import_i18n22.__)("Center right", "elementor"), value: "center right" },
+  { label: (0, import_i18n22.__)("Top center", "elementor"), value: "top center" },
+  { label: (0, import_i18n22.__)("Top left", "elementor"), value: "top left" },
+  { label: (0, import_i18n22.__)("Top right", "elementor"), value: "top right" },
+  { label: (0, import_i18n22.__)("Bottom center", "elementor"), value: "bottom center" },
+  { label: (0, import_i18n22.__)("Bottom left", "elementor"), value: "bottom left" },
+  { label: (0, import_i18n22.__)("Bottom right", "elementor"), value: "bottom right" }
+];
+var PositionControl = () => {
+  const positionContext = useBoundProp(import_editor_props29.positionPropTypeUtil);
+  const stringPropContext = useBoundProp(import_editor_props29.stringPropTypeUtil);
+  const isVersion331Active = (0, import_editor_v1_adapters5.isExperimentActive)("e_v_3_31");
+  const isCustom = !!positionContext.value && isVersion331Active;
+  const availablePositionOptions = (0, import_react32.useMemo)(() => {
+    const options = [...positionOptions];
+    if (isVersion331Active) {
+      options.push({ label: (0, import_i18n22.__)("Custom", "elementor"), value: "custom" });
+    }
+    return options;
+  }, [isVersion331Active]);
+  const handlePositionChange = (event) => {
+    const value = event.target.value || null;
+    if (value === "custom" && isVersion331Active) {
+      positionContext.setValue({ x: null, y: null });
+    } else {
+      stringPropContext.setValue(value);
+    }
+  };
+  return /* @__PURE__ */ React53.createElement(import_ui46.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React53.createElement(import_ui46.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(import_ui46.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(import_ui46.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ControlFormLabel, null, (0, import_i18n22.__)("Object position", "elementor"))), /* @__PURE__ */ React53.createElement(import_ui46.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React53.createElement(
+    import_ui46.Select,
+    {
+      size: "tiny",
+      disabled: stringPropContext.disabled,
+      value: (positionContext.value ? "custom" : stringPropContext.value) ?? "",
+      onChange: handlePositionChange,
+      fullWidth: true
+    },
+    availablePositionOptions.map(({ label, value }) => /* @__PURE__ */ React53.createElement(import_editor_ui7.MenuListItem, { key: value, value: value ?? "" }, label))
+  )))), isCustom && /* @__PURE__ */ React53.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React53.createElement(import_ui46.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(import_ui46.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React53.createElement(import_ui46.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React53.createElement(SizeControl, { startIcon: /* @__PURE__ */ React53.createElement(import_icons18.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React53.createElement(import_ui46.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React53.createElement(SizeControl, { startIcon: /* @__PURE__ */ React53.createElement(import_icons18.LetterYIcon, { fontSize: "tiny" }) })))))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AspectRatioControl,
@@ -3386,11 +3467,14 @@ var SwitchControl2 = createControl(() => {
   FontFamilySelector,
   GapControl,
   ImageControl,
+  KeyValueControl,
   LinkControl,
   LinkedDimensionsControl,
   NumberControl,
+  PositionControl,
   PropKeyProvider,
   PropProvider,
+  RepeatableControl,
   SelectControl,
   SizeControl,
   StrokeControl,