@elementor/editor-controls 4.3.0-1009 → 4.3.0-1010

package/dist/index.mjs

@@ -452,7 +452,7 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
 import * as React12 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil2 } from "@elementor/editor-props";
 import { MenuListItem } from "@elementor/editor-ui";
-import { Select, Typography } from "@elementor/ui";
+import { MenuSubheader, Select, Typography } from "@elementor/ui";
 var DEFAULT_MENU_PROPS = {
   MenuListProps: {
     sx: {
@@ -461,14 +461,15 @@ var DEFAULT_MENU_PROPS = {
   }
 };
 var SelectControl = createControl(
-  ({ options, onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }) => {
+  ({ options = [], groups = [], onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }) => {
     const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil2);
     const handleChange = (event) => {
       const newValue = event.target.value || null;
       onChange?.(newValue, value);
       setValue(newValue);
     };
-    const isDisabled = disabled || options.length === 0;
+    const flatOptions = flattenGroupedOptions(options, groups);
+    const isDisabled = disabled || flatOptions.length === 0;
     return /* @__PURE__ */ React12.createElement(ControlActions, null, /* @__PURE__ */ React12.createElement(
       Select,
       {
@@ -477,16 +478,41 @@ var SelectControl = createControl(
         size: "tiny",
         MenuProps,
         "aria-label": ariaLabel || placeholder,
-        renderValue: (selectedValue) => getSelectRenderValue(options, placeholder, selectedValue),
+        renderValue: (selectedValue) => getSelectRenderValue(flatOptions, placeholder, selectedValue),
         value: value ?? "",
         onChange: handleChange,
         disabled: isDisabled,
         fullWidth: true
       },
-      options.map(({ label, ...props }) => /* @__PURE__ */ React12.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
+      groups.length ? groups.flatMap((group) => renderGroup(group)) : options.map((option) => renderOption(option))
     ));
   }
 );
+var GROUPED_OPTION_INDENT = 3.5;
+function renderGroup(group) {
+  return [
+    /* @__PURE__ */ React12.createElement(MenuSubheader, { key: `group-${group.label}`, sx: { fontWeight: 400, color: "text.tertiary" } }, group.label),
+    ...group.options.map((option) => renderOption(option, true))
+  ];
+}
+function renderOption({ label, ...props }, isGrouped = false) {
+  return /* @__PURE__ */ React12.createElement(
+    MenuListItem,
+    {
+      key: props.value,
+      ...props,
+      value: props.value ?? "",
+      sx: isGrouped ? { pl: GROUPED_OPTION_INDENT } : void 0
+    },
+    label
+  );
+}
+function flattenGroupedOptions(options, groups) {
+  if (!groups.length) {
+    return options;
+  }
+  return groups.flatMap((group) => group.options);
+}
 function getSelectRenderValue(options, placeholder, selectedValue) {
   const optionWithValue = (v) => options.find(({ value }) => value === v);
   if (!isUnsetSelectValue(selectedValue)) {