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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.js +44 -35
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +44 -35
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +15 -15
  6. package/src/controls/select-control.tsx +58 -47
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elementor/editor-controls",
3
3
  "description": "This package contains the controls model and utils for the Elementor editor",
4
- "version": "3.35.0-337",
4
+ "version": "3.35.0-338",
5
5
  "private": false,
6
6
  "author": "Elementor Team",
7
7
  "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
40
40
  "dev": "tsup --config=../../tsup.dev.ts"
41
41
  },
42
42
  "dependencies": {
43
- "@elementor/editor-current-user": "3.35.0-337",
44
- "@elementor/editor-elements": "3.35.0-337",
45
- "@elementor/editor-props": "3.35.0-337",
46
- "@elementor/editor-responsive": "3.35.0-337",
47
- "@elementor/editor-ui": "3.35.0-337",
48
- "@elementor/editor-v1-adapters": "3.35.0-337",
49
- "@elementor/env": "3.35.0-337",
50
- "@elementor/http-client": "3.35.0-337",
43
+ "@elementor/editor-current-user": "3.35.0-338",
44
+ "@elementor/editor-elements": "3.35.0-338",
45
+ "@elementor/editor-props": "3.35.0-338",
46
+ "@elementor/editor-responsive": "3.35.0-338",
47
+ "@elementor/editor-ui": "3.35.0-338",
48
+ "@elementor/editor-v1-adapters": "3.35.0-338",
49
+ "@elementor/env": "3.35.0-338",
50
+ "@elementor/http-client": "3.35.0-338",
51
51
  "@elementor/icons": "^1.62.0",
52
- "@elementor/locations": "3.35.0-337",
53
- "@elementor/mixpanel": "3.35.0-337",
54
- "@elementor/query": "3.35.0-337",
55
- "@elementor/session": "3.35.0-337",
52
+ "@elementor/locations": "3.35.0-338",
53
+ "@elementor/mixpanel": "3.35.0-338",
54
+ "@elementor/query": "3.35.0-338",
55
+ "@elementor/session": "3.35.0-338",
56
56
  "@elementor/ui": "1.36.17",
57
- "@elementor/utils": "3.35.0-337",
58
- "@elementor/wp-media": "3.35.0-337",
57
+ "@elementor/utils": "3.35.0-338",
58
+ "@elementor/wp-media": "3.35.0-338",
59
59
  "@wordpress/i18n": "^5.13.0",
60
60
  "@monaco-editor/react": "^4.7.0",
61
61
  "dayjs": "^1.11.18",
package/src/controls/select-control.tsx CHANGED
@@ -19,55 +19,66 @@ type SelectControlProps = {
19
19
  MenuProps?: SelectProps[ 'MenuProps' ];
20
20
  ariaLabel?: string;
21
21
  };
22
- export const SelectControl = createControl( ( { options, onChange, MenuProps, ariaLabel }: SelectControlProps ) => {
23
- const { value, setValue, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
24
- const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
25
- const newValue = event.target.value || null;
26
22
 
27
- onChange?.( newValue, value );
28
- setValue( newValue );
29
- };
30
- const isDisabled = disabled || options.length === 0;
23
+ const DEFAULT_MENU_PROPS = {
24
+ MenuListProps: {
25
+ sx: {
26
+ maxHeight: '160px',
27
+ },
28
+ },
29
+ };
30
+
31
+ export const SelectControl = createControl(
32
+ ( { options, onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }: SelectControlProps ) => {
33
+ const { value, setValue, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
34
+ const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
35
+ const newValue = event.target.value || null;
36
+
37
+ onChange?.( newValue, value );
38
+ setValue( newValue );
39
+ };
40
+ const isDisabled = disabled || options.length === 0;
31
41
 
32
- return (
33
- <ControlActions>
34
- <Select
35
- sx={ { overflow: 'hidden' } }
36
- displayEmpty
37
- size="tiny"
38
- MenuProps={ MenuProps }
39
- aria-label={ ariaLabel || placeholder }
40
- renderValue={ ( selectedValue: string | null ) => {
41
- const findOptionByValue = ( searchValue: string | null ) =>
42
- options.find( ( opt ) => opt.value === searchValue );
42
+ return (
43
+ <ControlActions>
44
+ <Select
45
+ sx={ { overflow: 'hidden' } }
46
+ displayEmpty
47
+ size="tiny"
48
+ MenuProps={ MenuProps }
49
+ aria-label={ ariaLabel || placeholder }
50
+ renderValue={ ( selectedValue: string | null ) => {
51
+ const findOptionByValue = ( searchValue: string | null ) =>
52
+ options.find( ( opt ) => opt.value === searchValue );
43
53
 
44
- if ( ! selectedValue || selectedValue === '' ) {
45
- if ( placeholder ) {
46
- const placeholderOption = findOptionByValue( placeholder );
47
- const displayText = placeholderOption?.label || placeholder;
54
+ if ( ! selectedValue || selectedValue === '' ) {
55
+ if ( placeholder ) {
56
+ const placeholderOption = findOptionByValue( placeholder );
57
+ const displayText = placeholderOption?.label || placeholder;
48
58
 
49
- return (
50
- <Typography component="span" variant="caption" color="text.tertiary">
51
- { displayText }
52
- </Typography>
53
- );
59
+ return (
60
+ <Typography component="span" variant="caption" color="text.tertiary">
61
+ { displayText }
62
+ </Typography>
63
+ );
64
+ }
65
+ return '';
54
66
  }
55
- return '';
56
- }
57
- const option = findOptionByValue( selectedValue );
58
- return option?.label || selectedValue;
59
- } }
60
- value={ value ?? '' }
61
- onChange={ handleChange }
62
- disabled={ isDisabled }
63
- fullWidth
64
- >
65
- { options.map( ( { label, ...props } ) => (
66
- <MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
67
- { label }
68
- </MenuListItem>
69
- ) ) }
70
- </Select>
71
- </ControlActions>
72
- );
73
- } );
67
+ const option = findOptionByValue( selectedValue );
68
+ return option?.label || selectedValue;
69
+ } }
70
+ value={ value ?? '' }
71
+ onChange={ handleChange }
72
+ disabled={ isDisabled }
73
+ fullWidth
74
+ >
75
+ { options.map( ( { label, ...props } ) => (
76
+ <MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
77
+ { label }
78
+ </MenuListItem>
79
+ ) ) }
80
+ </Select>
81
+ </ControlActions>
82
+ );
83
+ }
84
+ );