@elementor/editor-controls 3.35.0-337 → 3.35.0-338

package/dist/index.mjs

@@ -399,43 +399,52 @@ import * as React10 from "react";
 import { stringPropTypeUtil } from "@elementor/editor-props";
 import { MenuListItem } from "@elementor/editor-ui";
 import { Select, Typography } from "@elementor/ui";
-var SelectControl = createControl(({ options, onChange, MenuProps, ariaLabel }) => {
-  const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil);
-  const handleChange = (event) => {
-    const newValue = event.target.value || null;
-    onChange?.(newValue, value);
-    setValue(newValue);
-  };
-  const isDisabled = disabled || options.length === 0;
-  return /* @__PURE__ */ React10.createElement(ControlActions, null, /* @__PURE__ */ React10.createElement(
-    Select,
-    {
-      sx: { overflow: "hidden" },
-      displayEmpty: true,
-      size: "tiny",
-      MenuProps,
-      "aria-label": ariaLabel || placeholder,
-      renderValue: (selectedValue) => {
-        const findOptionByValue = (searchValue) => options.find((opt) => opt.value === searchValue);
-        if (!selectedValue || selectedValue === "") {
-          if (placeholder) {
-            const placeholderOption = findOptionByValue(placeholder);
-            const displayText = placeholderOption?.label || placeholder;
-            return /* @__PURE__ */ React10.createElement(Typography, { component: "span", variant: "caption", color: "text.tertiary" }, displayText);
+var DEFAULT_MENU_PROPS = {
+  MenuListProps: {
+    sx: {
+      maxHeight: "160px"
+    }
+  }
+};
+var SelectControl = createControl(
+  ({ options, onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }) => {
+    const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil);
+    const handleChange = (event) => {
+      const newValue = event.target.value || null;
+      onChange?.(newValue, value);
+      setValue(newValue);
+    };
+    const isDisabled = disabled || options.length === 0;
+    return /* @__PURE__ */ React10.createElement(ControlActions, null, /* @__PURE__ */ React10.createElement(
+      Select,
+      {
+        sx: { overflow: "hidden" },
+        displayEmpty: true,
+        size: "tiny",
+        MenuProps,
+        "aria-label": ariaLabel || placeholder,
+        renderValue: (selectedValue) => {
+          const findOptionByValue = (searchValue) => options.find((opt) => opt.value === searchValue);
+          if (!selectedValue || selectedValue === "") {
+            if (placeholder) {
+              const placeholderOption = findOptionByValue(placeholder);
+              const displayText = placeholderOption?.label || placeholder;
+              return /* @__PURE__ */ React10.createElement(Typography, { component: "span", variant: "caption", color: "text.tertiary" }, displayText);
+            }
+            return "";
           }
-          return "";
-        }
-        const option = findOptionByValue(selectedValue);
-        return option?.label || selectedValue;
+          const option = findOptionByValue(selectedValue);
+          return option?.label || selectedValue;
+        },
+        value: value ?? "",
+        onChange: handleChange,
+        disabled: isDisabled,
+        fullWidth: true
       },
-      value: value ?? "",
-      onChange: handleChange,
-      disabled: isDisabled,
-      fullWidth: true
-    },
-    options.map(({ label, ...props }) => /* @__PURE__ */ React10.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
-  ));
-});
+      options.map(({ label, ...props }) => /* @__PURE__ */ React10.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
+    ));
+  }
+);
 
 // src/controls/image-control.tsx
 var ImageControl = createControl(({ sizes, showMode = "all" }) => {