@elementor/editor-controls 4.3.0-1009 → 4.3.0-1011
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.
- package/dist/index.d.mts +7 -2
- package/dist/index.d.ts +7 -2
- package/dist/index.js +30 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +31 -5
- package/dist/index.mjs.map +1 -1
- package/package.json +16 -16
- package/src/controls/select-control.tsx +47 -10
package/dist/index.d.mts
CHANGED
|
@@ -105,13 +105,18 @@ type SelectOption$1 = {
|
|
|
105
105
|
value: StringPropValue['value'];
|
|
106
106
|
disabled?: boolean;
|
|
107
107
|
};
|
|
108
|
-
type
|
|
108
|
+
type SelectOptionGroup = {
|
|
109
|
+
label: string;
|
|
109
110
|
options: SelectOption$1[];
|
|
111
|
+
};
|
|
112
|
+
type SelectControlProps = {
|
|
113
|
+
options?: SelectOption$1[];
|
|
114
|
+
groups?: SelectOptionGroup[];
|
|
110
115
|
onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
|
|
111
116
|
MenuProps?: SelectProps['MenuProps'];
|
|
112
117
|
ariaLabel?: string;
|
|
113
118
|
};
|
|
114
|
-
declare const SelectControl: ControlComponent$1<({ options, onChange, MenuProps, ariaLabel }: SelectControlProps) => React$1.JSX.Element>;
|
|
119
|
+
declare const SelectControl: ControlComponent$1<({ options, groups, onChange, MenuProps, ariaLabel }: SelectControlProps) => React$1.JSX.Element>;
|
|
115
120
|
|
|
116
121
|
declare const collectionMethods: {
|
|
117
122
|
readonly 'off-canvas': () => SelectOption$1[];
|
package/dist/index.d.ts
CHANGED
|
@@ -105,13 +105,18 @@ type SelectOption$1 = {
|
|
|
105
105
|
value: StringPropValue['value'];
|
|
106
106
|
disabled?: boolean;
|
|
107
107
|
};
|
|
108
|
-
type
|
|
108
|
+
type SelectOptionGroup = {
|
|
109
|
+
label: string;
|
|
109
110
|
options: SelectOption$1[];
|
|
111
|
+
};
|
|
112
|
+
type SelectControlProps = {
|
|
113
|
+
options?: SelectOption$1[];
|
|
114
|
+
groups?: SelectOptionGroup[];
|
|
110
115
|
onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
|
|
111
116
|
MenuProps?: SelectProps['MenuProps'];
|
|
112
117
|
ariaLabel?: string;
|
|
113
118
|
};
|
|
114
|
-
declare const SelectControl: ControlComponent$1<({ options, onChange, MenuProps, ariaLabel }: SelectControlProps) => React$1.JSX.Element>;
|
|
119
|
+
declare const SelectControl: ControlComponent$1<({ options, groups, onChange, MenuProps, ariaLabel }: SelectControlProps) => React$1.JSX.Element>;
|
|
115
120
|
|
|
116
121
|
declare const collectionMethods: {
|
|
117
122
|
readonly 'off-canvas': () => SelectOption$1[];
|
package/dist/index.js
CHANGED
|
@@ -584,14 +584,15 @@ var DEFAULT_MENU_PROPS = {
|
|
|
584
584
|
}
|
|
585
585
|
};
|
|
586
586
|
var SelectControl = createControl(
|
|
587
|
-
({ options, onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }) => {
|
|
587
|
+
({ options = [], groups = [], onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }) => {
|
|
588
588
|
const { value, setValue, disabled, placeholder } = useBoundProp(import_editor_props2.stringPropTypeUtil);
|
|
589
589
|
const handleChange = (event) => {
|
|
590
590
|
const newValue = event.target.value || null;
|
|
591
591
|
onChange?.(newValue, value);
|
|
592
592
|
setValue(newValue);
|
|
593
593
|
};
|
|
594
|
-
const
|
|
594
|
+
const flatOptions = flattenGroupedOptions(options, groups);
|
|
595
|
+
const isDisabled = disabled || flatOptions.length === 0;
|
|
595
596
|
return /* @__PURE__ */ React12.createElement(ControlActions, null, /* @__PURE__ */ React12.createElement(
|
|
596
597
|
import_ui5.Select,
|
|
597
598
|
{
|
|
@@ -600,16 +601,41 @@ var SelectControl = createControl(
|
|
|
600
601
|
size: "tiny",
|
|
601
602
|
MenuProps,
|
|
602
603
|
"aria-label": ariaLabel || placeholder,
|
|
603
|
-
renderValue: (selectedValue) => getSelectRenderValue(
|
|
604
|
+
renderValue: (selectedValue) => getSelectRenderValue(flatOptions, placeholder, selectedValue),
|
|
604
605
|
value: value ?? "",
|
|
605
606
|
onChange: handleChange,
|
|
606
607
|
disabled: isDisabled,
|
|
607
608
|
fullWidth: true
|
|
608
609
|
},
|
|
609
|
-
|
|
610
|
+
groups.length ? groups.flatMap((group) => renderGroup(group)) : options.map((option) => renderOption(option))
|
|
610
611
|
));
|
|
611
612
|
}
|
|
612
613
|
);
|
|
614
|
+
var GROUPED_OPTION_INDENT = 3.5;
|
|
615
|
+
function renderGroup(group) {
|
|
616
|
+
return [
|
|
617
|
+
/* @__PURE__ */ React12.createElement(import_ui5.MenuSubheader, { key: `group-${group.label}`, sx: { fontWeight: 400, color: "text.tertiary" } }, group.label),
|
|
618
|
+
...group.options.map((option) => renderOption(option, true))
|
|
619
|
+
];
|
|
620
|
+
}
|
|
621
|
+
function renderOption({ label, ...props }, isGrouped = false) {
|
|
622
|
+
return /* @__PURE__ */ React12.createElement(
|
|
623
|
+
import_editor_ui2.MenuListItem,
|
|
624
|
+
{
|
|
625
|
+
key: props.value,
|
|
626
|
+
...props,
|
|
627
|
+
value: props.value ?? "",
|
|
628
|
+
sx: isGrouped ? { pl: GROUPED_OPTION_INDENT } : void 0
|
|
629
|
+
},
|
|
630
|
+
label
|
|
631
|
+
);
|
|
632
|
+
}
|
|
633
|
+
function flattenGroupedOptions(options, groups) {
|
|
634
|
+
if (!groups.length) {
|
|
635
|
+
return options;
|
|
636
|
+
}
|
|
637
|
+
return groups.flatMap((group) => group.options);
|
|
638
|
+
}
|
|
613
639
|
function getSelectRenderValue(options, placeholder, selectedValue) {
|
|
614
640
|
const optionWithValue = (v) => options.find(({ value }) => value === v);
|
|
615
641
|
if (!isUnsetSelectValue(selectedValue)) {
|