@elementor/editor-controls 3.33.0-285 → 3.33.0-287

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 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 { SxProps, SelectProps, UnstableColorFieldProps, ToggleButtonProps, StackProps, PopupState, Theme, FormLabelProps, Grid } from '@elementor/ui';
 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';
@@ -136,7 +136,9 @@ type Props$5<TValue> = {
     value: ExclusiveValue<TValue>;
     onChange: (value: ExclusiveValue<TValue>) => void;
 });
-declare const ToggleButtonGroupUi: <TValue>({ justify, size, value, onChange, items, maxItems, exclusive, fullWidth, disabled, placeholder, }: Props$5<TValue>) => React$1.JSX.Element;
+declare const ToggleButtonGroupUi: <TValue>(props: Props$5<TValue> & {
+    ref?: React$1.Ref<HTMLDivElement>;
+}) => React$1.ReactElement;
 declare const ControlToggleButtonGroup: <TValue>(props: Props$5<TValue>) => React$1.JSX.Element;
 
 type ToggleControlProps<T extends PropValue> = {
@@ -541,6 +543,14 @@ declare function useFloatingActionsBar(): {
     setOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
 };
 
+declare const PopoverGridContainer: React$1.ForwardRefExoticComponent<{
+    gap?: number;
+    alignItems?: React$1.ComponentProps<typeof Grid>["alignItems"];
+    flexWrap?: React$1.ComponentProps<typeof Grid>["flexWrap"];
+} & {
+    children?: React$1.ReactNode | undefined;
+} & React$1.RefAttributes<unknown>>;
+
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;
 type ControlComponent<TComponent extends AnyComponentType = AnyComponentType> = TComponent & {
@@ -616,4 +626,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, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, FloatingActionsBar, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };
+export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, FloatingActionsBar, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PopoverGridContainer, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 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 { SxProps, SelectProps, UnstableColorFieldProps, ToggleButtonProps, StackProps, PopupState, Theme, FormLabelProps, Grid } from '@elementor/ui';
 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';
@@ -136,7 +136,9 @@ type Props$5<TValue> = {
     value: ExclusiveValue<TValue>;
     onChange: (value: ExclusiveValue<TValue>) => void;
 });
-declare const ToggleButtonGroupUi: <TValue>({ justify, size, value, onChange, items, maxItems, exclusive, fullWidth, disabled, placeholder, }: Props$5<TValue>) => React$1.JSX.Element;
+declare const ToggleButtonGroupUi: <TValue>(props: Props$5<TValue> & {
+    ref?: React$1.Ref<HTMLDivElement>;
+}) => React$1.ReactElement;
 declare const ControlToggleButtonGroup: <TValue>(props: Props$5<TValue>) => React$1.JSX.Element;
 
 type ToggleControlProps<T extends PropValue> = {
@@ -541,6 +543,14 @@ declare function useFloatingActionsBar(): {
     setOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
 };
 
+declare const PopoverGridContainer: React$1.ForwardRefExoticComponent<{
+    gap?: number;
+    alignItems?: React$1.ComponentProps<typeof Grid>["alignItems"];
+    flexWrap?: React$1.ComponentProps<typeof Grid>["flexWrap"];
+} & {
+    children?: React$1.ReactNode | undefined;
+} & React$1.RefAttributes<unknown>>;
+
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;
 type ControlComponent<TComponent extends AnyComponentType = AnyComponentType> = TComponent & {
@@ -616,4 +626,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, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, FloatingActionsBar, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };
+export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, FloatingActionsBar, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, InlineEditingControl, InlineEditor, ItemSelector, type ItemsActionPayload, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PopoverGridContainer, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleButtonGroupUi, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };

package/dist/index.js

@@ -57,6 +57,7 @@ __export(index_exports, {
   LinkedDimensionsControl: () => LinkedDimensionsControl,
   NumberControl: () => NumberControl,
   PopoverContent: () => PopoverContent,
+  PopoverGridContainer: () => PopoverGridContainer,
   PositionControl: () => PositionControl,
   PropKeyProvider: () => PropKeyProvider,
   PropProvider: () => PropProvider,
@@ -2340,99 +2341,102 @@ var StyledToggleButton = (0, import_ui38.styled)(import_ui38.ToggleButton, {
 		}
 	`}
 `;
-var ToggleButtonGroupUi = ({
-  justify = "end",
-  size = "tiny",
-  value,
-  onChange,
-  items: items2,
-  maxItems,
-  exclusive = false,
-  fullWidth = false,
-  disabled,
-  placeholder
-}) => {
-  const shouldSliceItems = exclusive && maxItems !== void 0 && items2.length > maxItems;
-  const menuItems = shouldSliceItems ? items2.slice(maxItems - 1) : [];
-  const fixedItems = shouldSliceItems ? items2.slice(0, maxItems - 1) : items2;
-  const theme = (0, import_ui38.useTheme)();
-  const isRtl = "rtl" === theme.direction;
-  const handleChange = (_, newValue) => {
-    onChange(newValue);
-  };
-  const getGridTemplateColumns = (0, import_react27.useMemo)(() => {
-    const isOffLimits = menuItems?.length;
-    const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
-    const templateColumnsSuffix = isOffLimits ? "auto" : "";
-    return `repeat(${itemsCount}, minmax(0, 25%)) ${templateColumnsSuffix}`;
-  }, [menuItems?.length, fixedItems.length]);
-  const shouldShowExclusivePlaceholder = exclusive && (value === null || value === void 0 || value === "");
-  const nonExclusiveSelectedValues = !exclusive && Array.isArray(value) ? value.map((v) => typeof v === "string" ? v : "").join(" ").trim().split(/\s+/).filter(Boolean) : [];
-  const shouldShowNonExclusivePlaceholder = !exclusive && nonExclusiveSelectedValues.length === 0;
-  const getPlaceholderArray = (placeholderValue) => {
-    if (Array.isArray(placeholderValue)) {
-      return placeholderValue.flatMap((p) => {
-        if (typeof p === "string") {
-          return p.trim().split(/\s+/).filter(Boolean);
-        }
-        return [];
-      });
-    }
-    if (typeof placeholderValue === "string") {
-      return placeholderValue.trim().split(/\s+/).filter(Boolean);
-    }
-    return [];
-  };
-  const placeholderArray = getPlaceholderArray(placeholder);
-  return /* @__PURE__ */ React51.createElement(
-    StyledToggleButtonGroup,
-    {
-      justify,
-      value,
-      onChange: handleChange,
-      exclusive,
-      disabled,
-      sx: {
-        direction: isRtl ? "rtl /* @noflip */" : "ltr /* @noflip */",
-        display: "grid",
-        gridTemplateColumns: getGridTemplateColumns,
-        width: `100%`
+var ToggleButtonGroupUi = React51.forwardRef(
+  ({
+    justify = "end",
+    size = "tiny",
+    value,
+    onChange,
+    items: items2,
+    maxItems,
+    exclusive = false,
+    fullWidth = false,
+    disabled,
+    placeholder
+  }, ref) => {
+    const shouldSliceItems = exclusive && maxItems !== void 0 && items2.length > maxItems;
+    const menuItems = shouldSliceItems ? items2.slice(maxItems - 1) : [];
+    const fixedItems = shouldSliceItems ? items2.slice(0, maxItems - 1) : items2;
+    const theme = (0, import_ui38.useTheme)();
+    const isRtl = "rtl" === theme.direction;
+    const handleChange = (_, newValue) => {
+      onChange(newValue);
+    };
+    const getGridTemplateColumns = (0, import_react27.useMemo)(() => {
+      const isOffLimits = menuItems?.length;
+      const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
+      const templateColumnsSuffix = isOffLimits ? "auto" : "";
+      return `repeat(${itemsCount}, minmax(0, 25%)) ${templateColumnsSuffix}`;
+    }, [menuItems?.length, fixedItems.length]);
+    const shouldShowExclusivePlaceholder = exclusive && (value === null || value === void 0 || value === "");
+    const nonExclusiveSelectedValues = !exclusive && Array.isArray(value) ? value.map((v) => typeof v === "string" ? v : "").join(" ").trim().split(/\s+/).filter(Boolean) : [];
+    const shouldShowNonExclusivePlaceholder = !exclusive && nonExclusiveSelectedValues.length === 0;
+    const getPlaceholderArray = (placeholderValue) => {
+      if (Array.isArray(placeholderValue)) {
+        return placeholderValue.flatMap((p) => {
+          if (typeof p === "string") {
+            return p.trim().split(/\s+/).filter(Boolean);
+          }
+          return [];
+        });
       }
-    },
-    fixedItems.map(({ label, value: buttonValue, renderContent: Content3, showTooltip }) => {
-      const isPlaceholder = placeholderArray.length > 0 && placeholderArray.includes(buttonValue) && (shouldShowExclusivePlaceholder || shouldShowNonExclusivePlaceholder);
-      return /* @__PURE__ */ React51.createElement(
-        ConditionalTooltip,
-        {
-          key: buttonValue,
-          label,
-          showTooltip: showTooltip || false
-        },
-        /* @__PURE__ */ React51.createElement(
-          StyledToggleButton,
+      if (typeof placeholderValue === "string") {
+        return placeholderValue.trim().split(/\s+/).filter(Boolean);
+      }
+      return [];
+    };
+    const placeholderArray = getPlaceholderArray(placeholder);
+    return /* @__PURE__ */ React51.createElement(
+      StyledToggleButtonGroup,
+      {
+        ref,
+        justify,
+        value,
+        onChange: handleChange,
+        exclusive,
+        disabled,
+        sx: {
+          direction: isRtl ? "rtl /* @noflip */" : "ltr /* @noflip */",
+          display: "grid",
+          gridTemplateColumns: getGridTemplateColumns,
+          width: `100%`
+        }
+      },
+      fixedItems.map(({ label, value: buttonValue, renderContent: Content3, showTooltip }) => {
+        const isPlaceholder = placeholderArray.length > 0 && placeholderArray.includes(buttonValue) && (shouldShowExclusivePlaceholder || shouldShowNonExclusivePlaceholder);
+        return /* @__PURE__ */ React51.createElement(
+          ConditionalTooltip,
           {
-            value: buttonValue,
-            "aria-label": label,
-            size,
-            fullWidth,
-            isPlaceholder
+            key: buttonValue,
+            label,
+            showTooltip: showTooltip || false
           },
-          /* @__PURE__ */ React51.createElement(Content3, { size })
-        )
-      );
-    }),
-    menuItems.length && exclusive && /* @__PURE__ */ React51.createElement(
-      SplitButtonGroup,
-      {
-        size,
-        value: value || null,
-        onChange,
-        items: menuItems,
-        fullWidth
-      }
-    )
-  );
-};
+          /* @__PURE__ */ React51.createElement(
+            StyledToggleButton,
+            {
+              value: buttonValue,
+              "aria-label": label,
+              size,
+              fullWidth,
+              isPlaceholder
+            },
+            /* @__PURE__ */ React51.createElement(Content3, { size })
+          )
+        );
+      }),
+      menuItems.length && exclusive && /* @__PURE__ */ React51.createElement(
+        SplitButtonGroup,
+        {
+          size,
+          value: value || null,
+          onChange,
+          items: menuItems,
+          fullWidth
+        }
+      )
+    );
+  }
+);
 var ControlToggleButtonGroup = (props) => {
   return /* @__PURE__ */ React51.createElement(ControlActions, null, /* @__PURE__ */ React51.createElement(ToggleButtonGroupUi, { ...props }));
 };
@@ -2468,8 +2472,7 @@ var SplitButtonGroup = ({
       onClick: (ev) => {
         ev.preventDefault();
         onMenuItemClick(previewButton.value);
-      },
-      ref: menuButtonRef
+      }
     },
     previewButton.renderContent({ size })
   ), /* @__PURE__ */ React51.createElement(
@@ -6207,6 +6210,7 @@ var usePopover = (openOnMount, onOpen) => {
   LinkedDimensionsControl,
   NumberControl,
   PopoverContent,
+  PopoverGridContainer,
   PositionControl,
   PropKeyProvider,
   PropProvider,