@elementor/editor-controls 3.33.0-286 → 3.33.0-288

package/dist/index.d.mts

@@ -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> = {

package/dist/index.d.ts

@@ -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> = {

package/dist/index.js

@@ -2341,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 }));
 };
@@ -2469,8 +2472,7 @@ var SplitButtonGroup = ({
       onClick: (ev) => {
         ev.preventDefault();
         onMenuItemClick(previewButton.value);
-      },
-      ref: menuButtonRef
+      }
     },
     previewButton.renderContent({ size })
   ), /* @__PURE__ */ React51.createElement(