@eightshift/ui-components 5.0.5 → 5.0.7
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/assets/style-admin.css +54 -0
- package/dist/assets/style-editor.css +54 -0
- package/dist/assets/style.css +54 -0
- package/dist/components/link-input/link-input.js +1 -1
- package/dist/components/menu/menu.js +14 -1
- package/dist/components/option-select/option-select.js +130 -7
- package/dist/style-editor.js +1 -1
- package/dist/style.js +1 -1
- package/package.json +1 -1
- package/dist/assets/index.css +0 -57
|
@@ -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,
|
package/dist/style-editor.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import './assets/
|
|
1
|
+
import './assets/style-editor.css';
|
package/dist/style.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import './assets/
|
|
1
|
+
import './assets/style.css';
|