@eightshift/ui-components 5.0.5 → 5.0.6
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.
|
@@ -242,6 +242,7 @@ const MenuItem = (props) => {
|
|
|
242
242
|
* @component
|
|
243
243
|
* @param {Object} props - Component props.
|
|
244
244
|
* @param {JSX.Element} props.trigger - The trigger button for the submenu. **This should be a `MenuItem`.**
|
|
245
|
+
* @param {boolean} [props.keepOpen=false] - If `true`, the submenu will not close when an item is selected.
|
|
245
246
|
* @param {Object} [props.popoverProps] - Props to pass to the popover.
|
|
246
247
|
*
|
|
247
248
|
* @returns {JSX.Element} The SubMenuItem component.
|
|
@@ -251,7 +252,18 @@ const MenuItem = (props) => {
|
|
|
251
252
|
* @preserve
|
|
252
253
|
*/
|
|
253
254
|
const SubMenuItem = (props) => {
|
|
254
|
-
const { children, trigger, popoverProps } = props;
|
|
255
|
+
const { children, trigger, popoverProps, keepOpen } = props;
|
|
256
|
+
let additionalProps = {};
|
|
257
|
+
if (keepOpen) {
|
|
258
|
+
additionalProps = {
|
|
259
|
+
...additionalProps,
|
|
260
|
+
selectionMode: "multiple",
|
|
261
|
+
selectedKeys: [],
|
|
262
|
+
onSelectionChange: () => {
|
|
263
|
+
},
|
|
264
|
+
items: []
|
|
265
|
+
};
|
|
266
|
+
}
|
|
255
267
|
return /* @__PURE__ */ jsxs($3674c52c6b3c5bce$export$ecabc99eeffab7ca, { children: [
|
|
256
268
|
cloneElement(trigger, {
|
|
257
269
|
endIcon: /* @__PURE__ */ jsx("span", { className: "es:text-secondary-400", children: icons.caretRightFill })
|
|
@@ -268,6 +280,7 @@ const SubMenuItem = (props) => {
|
|
|
268
280
|
{
|
|
269
281
|
"aria-label": props["aria-label"] ?? __("Submenu", "eightshift-ui-components"),
|
|
270
282
|
className: "es:any-focus:outline-hidden",
|
|
283
|
+
...additionalProps,
|
|
271
284
|
children
|
|
272
285
|
}
|
|
273
286
|
)
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
|
|
2
2
|
import { Fragment } from "react";
|
|
3
3
|
import { icons } from "../../icons/icons.js";
|
|
4
4
|
import { BaseControl } from "../base-control/base-control.js";
|
|
5
5
|
import { ButtonGroup } from "../button/button.js";
|
|
6
|
-
import {
|
|
6
|
+
import { SubMenuItem, MenuSeparator, MenuItem, Menu } from "../menu/menu.js";
|
|
7
7
|
import { RadioButtonGroup, RadioButton } from "../radio/radio.js";
|
|
8
8
|
import { RichLabel } from "../rich-label/rich-label.js";
|
|
9
9
|
import { ToggleButton } from "../toggle-button/toggle-button.js";
|
|
@@ -38,7 +38,7 @@ import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
|
|
|
38
38
|
*
|
|
39
39
|
* @returns {JSX.Element} The OptionSelect component.
|
|
40
40
|
*
|
|
41
|
-
* @typedef {'toggleButtons' | 'toggleButtonsSplit' | 'radios' | 'radiosSegmented' | 'menu'} OptionSelectType
|
|
41
|
+
* @typedef {'toggleButtons' | 'toggleButtonsSplit' | 'radios' | 'radiosSegmented' | 'menu' | 'submenu' | 'standaloneMenuItems'} OptionSelectType
|
|
42
42
|
*
|
|
43
43
|
* @example
|
|
44
44
|
* <OptionSelect
|
|
@@ -55,7 +55,7 @@ import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
|
|
|
55
55
|
* @preserve
|
|
56
56
|
*/
|
|
57
57
|
const OptionSelect = (props) => {
|
|
58
|
-
var _a;
|
|
58
|
+
var _a, _b;
|
|
59
59
|
const {
|
|
60
60
|
icon,
|
|
61
61
|
label,
|
|
@@ -96,6 +96,129 @@ const OptionSelect = (props) => {
|
|
|
96
96
|
if (type === "radiosSegmented") {
|
|
97
97
|
radioDesign = "segmented";
|
|
98
98
|
}
|
|
99
|
+
if (type === "submenu") {
|
|
100
|
+
return /* @__PURE__ */ jsxs(
|
|
101
|
+
SubMenuItem,
|
|
102
|
+
{
|
|
103
|
+
trigger: /* @__PURE__ */ jsx(
|
|
104
|
+
MenuItem,
|
|
105
|
+
{
|
|
106
|
+
icon: !noTriggerIcon && (icon ?? // eslint-disable-next-line no-nested-ternary
|
|
107
|
+
(currentItem ? typeof (currentItem == null ? void 0 : currentItem.icon) === "string" ? (_a = icons) == null ? void 0 : _a[currentItem == null ? void 0 : currentItem.icon] : currentItem == null ? void 0 : currentItem.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel)),
|
|
108
|
+
children: /* @__PURE__ */ jsx(
|
|
109
|
+
RichLabel,
|
|
110
|
+
{
|
|
111
|
+
label: noTriggerLabel ? null : label ?? (currentItem == null ? void 0 : currentItem.label) ?? notSetLabel,
|
|
112
|
+
subtitle: subtitle === true ? currentItem == null ? void 0 : currentItem.label : subtitle,
|
|
113
|
+
noColor: true
|
|
114
|
+
}
|
|
115
|
+
)
|
|
116
|
+
}
|
|
117
|
+
),
|
|
118
|
+
...wrapperProps,
|
|
119
|
+
children: [
|
|
120
|
+
options.map(
|
|
121
|
+
({
|
|
122
|
+
label: optionLabel,
|
|
123
|
+
value: optionValue,
|
|
124
|
+
icon: optionIcon,
|
|
125
|
+
endIcon: optionEndIcon,
|
|
126
|
+
ariaLabel: optionAriaLabel,
|
|
127
|
+
subtitle: optionSubtitle,
|
|
128
|
+
separator: optionHasSeparator,
|
|
129
|
+
sectionTitle: optionSectionTitle,
|
|
130
|
+
shortcut: optionShortcut,
|
|
131
|
+
disabled: optionDisabled
|
|
132
|
+
}) => {
|
|
133
|
+
var _a2, _b2;
|
|
134
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
135
|
+
(optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
|
|
136
|
+
optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
|
|
137
|
+
/* @__PURE__ */ jsxs(
|
|
138
|
+
MenuItem,
|
|
139
|
+
{
|
|
140
|
+
selected: value === optionValue,
|
|
141
|
+
disabled: optionDisabled || disabled,
|
|
142
|
+
className: itemClassName,
|
|
143
|
+
icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
|
|
144
|
+
endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (_b2 = icons) == null ? void 0 : _b2[optionEndIcon] : optionEndIcon),
|
|
145
|
+
"aria-label": optionAriaLabel ?? optionLabel,
|
|
146
|
+
onClick: () => onChange(optionValue),
|
|
147
|
+
shortcut: optionShortcut,
|
|
148
|
+
...itemProps,
|
|
149
|
+
children: [
|
|
150
|
+
!noItemLabel && !optionSubtitle && optionLabel,
|
|
151
|
+
!noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
|
|
152
|
+
RichLabel,
|
|
153
|
+
{
|
|
154
|
+
label: optionLabel,
|
|
155
|
+
subtitle: optionSubtitle,
|
|
156
|
+
noColor: true
|
|
157
|
+
}
|
|
158
|
+
)
|
|
159
|
+
]
|
|
160
|
+
}
|
|
161
|
+
),
|
|
162
|
+
optionHasSeparator === "below" && /* @__PURE__ */ jsx(MenuSeparator, {})
|
|
163
|
+
] }, optionValue);
|
|
164
|
+
}
|
|
165
|
+
),
|
|
166
|
+
children
|
|
167
|
+
]
|
|
168
|
+
}
|
|
169
|
+
);
|
|
170
|
+
}
|
|
171
|
+
if (type === "standaloneMenuItems") {
|
|
172
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
173
|
+
options.map(
|
|
174
|
+
({
|
|
175
|
+
label: optionLabel,
|
|
176
|
+
value: optionValue,
|
|
177
|
+
icon: optionIcon,
|
|
178
|
+
endIcon: optionEndIcon,
|
|
179
|
+
ariaLabel: optionAriaLabel,
|
|
180
|
+
subtitle: optionSubtitle,
|
|
181
|
+
separator: optionHasSeparator,
|
|
182
|
+
sectionTitle: optionSectionTitle,
|
|
183
|
+
shortcut: optionShortcut,
|
|
184
|
+
disabled: optionDisabled
|
|
185
|
+
}) => {
|
|
186
|
+
var _a2, _b2;
|
|
187
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
188
|
+
(optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
|
|
189
|
+
optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
|
|
190
|
+
/* @__PURE__ */ jsxs(
|
|
191
|
+
MenuItem,
|
|
192
|
+
{
|
|
193
|
+
selected: value === optionValue,
|
|
194
|
+
disabled: optionDisabled || disabled,
|
|
195
|
+
className: itemClassName,
|
|
196
|
+
icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
|
|
197
|
+
endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (_b2 = icons) == null ? void 0 : _b2[optionEndIcon] : optionEndIcon),
|
|
198
|
+
"aria-label": optionAriaLabel ?? optionLabel,
|
|
199
|
+
onClick: () => onChange(optionValue),
|
|
200
|
+
shortcut: optionShortcut,
|
|
201
|
+
...itemProps,
|
|
202
|
+
children: [
|
|
203
|
+
!noItemLabel && !optionSubtitle && optionLabel,
|
|
204
|
+
!noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
|
|
205
|
+
RichLabel,
|
|
206
|
+
{
|
|
207
|
+
label: optionLabel,
|
|
208
|
+
subtitle: optionSubtitle,
|
|
209
|
+
noColor: true
|
|
210
|
+
}
|
|
211
|
+
)
|
|
212
|
+
]
|
|
213
|
+
}
|
|
214
|
+
),
|
|
215
|
+
optionHasSeparator === "below" && /* @__PURE__ */ jsx(MenuSeparator, {})
|
|
216
|
+
] }, optionValue);
|
|
217
|
+
}
|
|
218
|
+
),
|
|
219
|
+
children
|
|
220
|
+
] });
|
|
221
|
+
}
|
|
99
222
|
return /* @__PURE__ */ jsxs(
|
|
100
223
|
BaseControl,
|
|
101
224
|
{
|
|
@@ -188,7 +311,7 @@ const OptionSelect = (props) => {
|
|
|
188
311
|
{
|
|
189
312
|
triggerLabel: noTriggerLabel ? null : (currentItem == null ? void 0 : currentItem.label) ?? notSetLabel,
|
|
190
313
|
triggerIcon: !noTriggerIcon && // eslint-disable-next-line no-nested-ternary
|
|
191
|
-
(currentItem ? typeof (currentItem == null ? void 0 : currentItem.icon) === "string" ? (
|
|
314
|
+
(currentItem ? typeof (currentItem == null ? void 0 : currentItem.icon) === "string" ? (_b = icons) == null ? void 0 : _b[currentItem == null ? void 0 : currentItem.icon] : currentItem == null ? void 0 : currentItem.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel),
|
|
192
315
|
tooltip: noTriggerLabel ? /* @__PURE__ */ jsx(
|
|
193
316
|
RichLabel,
|
|
194
317
|
{
|
|
@@ -218,7 +341,7 @@ const OptionSelect = (props) => {
|
|
|
218
341
|
shortcut: optionShortcut,
|
|
219
342
|
disabled: optionDisabled
|
|
220
343
|
}) => {
|
|
221
|
-
var _a2,
|
|
344
|
+
var _a2, _b2;
|
|
222
345
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
223
346
|
(optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
|
|
224
347
|
optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
|
|
@@ -229,7 +352,7 @@ const OptionSelect = (props) => {
|
|
|
229
352
|
disabled: optionDisabled || disabled,
|
|
230
353
|
className: itemClassName,
|
|
231
354
|
icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
|
|
232
|
-
endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (
|
|
355
|
+
endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (_b2 = icons) == null ? void 0 : _b2[optionEndIcon] : optionEndIcon),
|
|
233
356
|
"aria-label": optionAriaLabel ?? optionLabel,
|
|
234
357
|
onClick: () => onChange(optionValue),
|
|
235
358
|
shortcut: optionShortcut,
|