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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.3.0-1009",
+  "version": "4.3.0-1010",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.3.0-1009",
-    "@elementor/editor-elements": "4.3.0-1009",
-    "@elementor/editor-props": "4.3.0-1009",
-    "@elementor/editor-responsive": "4.3.0-1009",
-    "@elementor/editor-ui": "4.3.0-1009",
-    "@elementor/editor-v1-adapters": "4.3.0-1009",
-    "@elementor/env": "4.3.0-1009",
-    "@elementor/events": "4.3.0-1009",
-    "@elementor/http-client": "4.3.0-1009",
+    "@elementor/editor-current-user": "4.3.0-1010",
+    "@elementor/editor-elements": "4.3.0-1010",
+    "@elementor/editor-props": "4.3.0-1010",
+    "@elementor/editor-responsive": "4.3.0-1010",
+    "@elementor/editor-ui": "4.3.0-1010",
+    "@elementor/editor-v1-adapters": "4.3.0-1010",
+    "@elementor/env": "4.3.0-1010",
+    "@elementor/events": "4.3.0-1010",
+    "@elementor/http-client": "4.3.0-1010",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.3.0-1009",
-    "@elementor/query": "4.3.0-1009",
-    "@elementor/schema": "4.3.0-1009",
-    "@elementor/session": "4.3.0-1009",
+    "@elementor/locations": "4.3.0-1010",
+    "@elementor/query": "4.3.0-1010",
+    "@elementor/schema": "4.3.0-1010",
+    "@elementor/session": "4.3.0-1010",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-1009",
-    "@elementor/wp-media": "4.3.0-1009",
+    "@elementor/utils": "4.3.0-1010",
+    "@elementor/wp-media": "4.3.0-1010",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/controls/select-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
-import { Select, type SelectChangeEvent, type SelectProps, Typography } from '@elementor/ui';
+import { MenuSubheader, Select, type SelectChangeEvent, type SelectProps, Typography } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
@@ -13,8 +13,14 @@ export type SelectOption = {
 	disabled?: boolean;
 };
 
-type SelectControlProps = {
+export type SelectOptionGroup = {
+	label: string;
 	options: SelectOption[];
+};
+
+type SelectControlProps = {
+	options?: SelectOption[];
+	groups?: SelectOptionGroup[];
 	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
 	MenuProps?: SelectProps[ 'MenuProps' ];
 	ariaLabel?: string;
@@ -29,7 +35,7 @@ const DEFAULT_MENU_PROPS = {
 };
 
 export const SelectControl = createControl(
-	( { options, onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }: SelectControlProps ) => {
+	( { options = [], groups = [], onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }: SelectControlProps ) => {
 		const { value, setValue, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
 		const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
 			const newValue = event.target.value || null;
@@ -37,7 +43,8 @@ export const SelectControl = createControl(
 			onChange?.( newValue, value );
 			setValue( newValue );
 		};
-		const isDisabled = disabled || options.length === 0;
+		const flatOptions = flattenGroupedOptions( options, groups );
+		const isDisabled = disabled || flatOptions.length === 0;
 
 		return (
 			<ControlActions>
@@ -48,24 +55,54 @@ export const SelectControl = createControl(
 					MenuProps={ MenuProps }
 					aria-label={ ariaLabel || placeholder }
 					renderValue={ ( selectedValue: string | null ) =>
-						getSelectRenderValue( options, placeholder, selectedValue )
+						getSelectRenderValue( flatOptions, placeholder, selectedValue )
 					}
 					value={ value ?? '' }
 					onChange={ handleChange }
 					disabled={ isDisabled }
 					fullWidth
 				>
-					{ options.map( ( { label, ...props } ) => (
-						<MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
-							{ label }
-						</MenuListItem>
-					) ) }
+					{ groups.length
+						? groups.flatMap( ( group ) => renderGroup( group ) )
+						: options.map( ( option ) => renderOption( option ) ) }
 				</Select>
 			</ControlActions>
 		);
 	}
 );
 
+const GROUPED_OPTION_INDENT = 3.5;
+
+function renderGroup( group: SelectOptionGroup ): React.ReactNode[] {
+	return [
+		<MenuSubheader key={ `group-${ group.label }` } sx={ { fontWeight: 400, color: 'text.tertiary' } }>
+			{ group.label }
+		</MenuSubheader>,
+		...group.options.map( ( option ) => renderOption( option, true ) ),
+	];
+}
+
+function renderOption( { label, ...props }: SelectOption, isGrouped = false ): React.ReactNode {
+	return (
+		<MenuListItem
+			key={ props.value }
+			{ ...props }
+			value={ props.value ?? '' }
+			sx={ isGrouped ? { pl: GROUPED_OPTION_INDENT } : undefined }
+		>
+			{ label }
+		</MenuListItem>
+	);
+}
+
+function flattenGroupedOptions( options: SelectOption[], groups: SelectOptionGroup[] ): SelectOption[] {
+	if ( ! groups.length ) {
+		return options;
+	}
+
+	return groups.flatMap( ( group ) => group.options );
+}
+
 export function getSelectRenderValue(
 	options: SelectOption[],
 	placeholder: string | null | undefined,