@eightshift/ui-components 1.1.0 → 1.1.2
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.
|
@@ -105,33 +105,43 @@ const OptionSelect = (props) => {
|
|
|
105
105
|
vertical,
|
|
106
106
|
"aria-label": typeof label !== "undefined" ? null : props == null ? void 0 : props["aria-label"],
|
|
107
107
|
...wrapperProps,
|
|
108
|
-
children: options.map(
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
108
|
+
children: options.map(
|
|
109
|
+
({
|
|
110
|
+
label: optionLabel,
|
|
111
|
+
value: optionValue,
|
|
112
|
+
icon: optionIcon,
|
|
113
|
+
tooltip: optionTooltip,
|
|
114
|
+
ariaLabel: optionAriaLabel,
|
|
115
|
+
subtitle: optionSubtitle,
|
|
116
|
+
disabled: optionDisabled
|
|
117
|
+
}) => {
|
|
118
|
+
var _a2;
|
|
119
|
+
return /* @__PURE__ */ jsxs(
|
|
120
|
+
ToggleButton,
|
|
121
|
+
{
|
|
122
|
+
selected: optionValue === value,
|
|
123
|
+
onChange: () => onChange(optionValue),
|
|
124
|
+
disabled: optionDisabled || disabled,
|
|
125
|
+
className: itemClassName,
|
|
126
|
+
icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
|
|
127
|
+
tooltip: optionTooltip ?? optionAriaLabel ?? (noItemLabel && optionLabel),
|
|
128
|
+
"aria-label": optionAriaLabel ?? optionLabel ?? optionTooltip,
|
|
129
|
+
...itemProps,
|
|
130
|
+
children: [
|
|
131
|
+
!noItemLabel && !optionSubtitle && optionLabel,
|
|
132
|
+
!noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
|
|
133
|
+
RichLabel,
|
|
134
|
+
{
|
|
135
|
+
label: optionLabel,
|
|
136
|
+
subtitle: optionSubtitle
|
|
137
|
+
}
|
|
138
|
+
)
|
|
139
|
+
]
|
|
140
|
+
},
|
|
141
|
+
optionValue
|
|
142
|
+
);
|
|
143
|
+
}
|
|
144
|
+
)
|
|
135
145
|
}
|
|
136
146
|
),
|
|
137
147
|
(type === "radios" || type === "radiosSegmented") && /* @__PURE__ */ jsx(
|
|
@@ -143,13 +153,13 @@ const OptionSelect = (props) => {
|
|
|
143
153
|
"aria-label": typeof label !== "undefined" ? null : props == null ? void 0 : props["aria-label"],
|
|
144
154
|
value,
|
|
145
155
|
...wrapperProps,
|
|
146
|
-
children: options.map(({ label: optionLabel, value: optionValue, icon: optionIcon, ariaLabel: optionAriaLabel, subtitle: optionSubtitle }) => {
|
|
156
|
+
children: options.map(({ label: optionLabel, value: optionValue, icon: optionIcon, ariaLabel: optionAriaLabel, subtitle: optionSubtitle, disabled: optionDisabled }) => {
|
|
147
157
|
var _a2;
|
|
148
158
|
return /* @__PURE__ */ jsx(
|
|
149
159
|
RadioButton,
|
|
150
160
|
{
|
|
151
161
|
value: optionValue,
|
|
152
|
-
disabled,
|
|
162
|
+
disabled: optionDisabled || disabled,
|
|
153
163
|
className: itemClassName,
|
|
154
164
|
subtitle: !noItemLabel && optionSubtitle,
|
|
155
165
|
icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
|
|
@@ -193,7 +203,8 @@ const OptionSelect = (props) => {
|
|
|
193
203
|
subtitle: optionSubtitle,
|
|
194
204
|
separator: optionHasSeparator,
|
|
195
205
|
sectionTitle: optionSectionTitle,
|
|
196
|
-
shortcut: optionShortcut
|
|
206
|
+
shortcut: optionShortcut,
|
|
207
|
+
disabled: optionDisabled
|
|
197
208
|
}) => {
|
|
198
209
|
var _a2, _b;
|
|
199
210
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -203,7 +214,7 @@ const OptionSelect = (props) => {
|
|
|
203
214
|
MenuItem,
|
|
204
215
|
{
|
|
205
216
|
selected: value === optionValue,
|
|
206
|
-
disabled,
|
|
217
|
+
disabled: optionDisabled || disabled,
|
|
207
218
|
className: itemClassName,
|
|
208
219
|
icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
|
|
209
220
|
endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (_b = icons) == null ? void 0 : _b[optionEndIcon] : optionEndIcon),
|
|
@@ -407,7 +407,9 @@ const RadioButton = (props) => {
|
|
|
407
407
|
{
|
|
408
408
|
className: clsx(
|
|
409
409
|
"es-uic-flex es-uic-size-5 es-uic-items-center es-uic-justify-center es-uic-rounded-full es-uic-border es-uic-text-gray-600 es-uic-shadow-sm es-uic-transition",
|
|
410
|
-
isSelected
|
|
410
|
+
isSelected && !disabled && "es-uic-border-teal-600 es-uic-bg-teal-600 es-uic-text-white",
|
|
411
|
+
isSelected && disabled && "es-uic-border-gray-400 es-uic-bg-gray-400 es-uic-text-white",
|
|
412
|
+
!isSelected && "es-uic-border-gray-300",
|
|
411
413
|
!(design == null ? void 0 : design.startsWith("segmented")) && isFocusVisible && "es-uic-ring es-uic-ring-teal-500 es-uic-ring-opacity-50"
|
|
412
414
|
),
|
|
413
415
|
children: /* @__PURE__ */ jsx(
|
|
@@ -415,7 +417,7 @@ const RadioButton = (props) => {
|
|
|
415
417
|
{
|
|
416
418
|
transition: "scaleFade",
|
|
417
419
|
visible: isSelected,
|
|
418
|
-
className: "[&>svg]:es-uic-size-3 [&>svg]:es-uic-stroke-2",
|
|
420
|
+
className: clsx("[&>svg]:es-uic-size-3 [&>svg]:es-uic-stroke-2", disabled && "es-uic-opacity-55"),
|
|
419
421
|
noInitial: true,
|
|
420
422
|
children: /* @__PURE__ */ jsx("div", { className: "es-uic-size-2.5 es-uic-rounded-full es-uic-bg-white es-uic-shadow-sm" })
|
|
421
423
|
}
|
|
@@ -428,7 +430,7 @@ const RadioButton = (props) => {
|
|
|
428
430
|
icon,
|
|
429
431
|
label,
|
|
430
432
|
subtitle,
|
|
431
|
-
className: clsx(labelClassName, "[&_>_span_>_svg]:!es-uic-size-5")
|
|
433
|
+
className: clsx(labelClassName, "[&_>_span_>_svg]:!es-uic-size-5", disabled && "es-uic-opacity-55")
|
|
432
434
|
}
|
|
433
435
|
),
|
|
434
436
|
!(icon || label || subtitle) && children
|
|
@@ -6,7 +6,7 @@ const controlStyles = {
|
|
|
6
6
|
};
|
|
7
7
|
const placeholderStyles = "es-uic-text-gray-400 es-uic-ml-0.5";
|
|
8
8
|
const selectInputStyles = "focus:es-uic-outline-none [&_input]:!es-uic-shadow-none [&_input:focus]:!es-uic-shadow-none";
|
|
9
|
-
const valueContainerStyles = "es-uic-gap-1 es-uic-ml-1 !es-uic-overflow-visible";
|
|
9
|
+
const valueContainerStyles = "es-uic-gap-1 es-uic-ml-1 es-uic-my-1 !es-uic-overflow-visible";
|
|
10
10
|
const singleValueStyles = "es-uic-ml-0.5";
|
|
11
11
|
const multiValueStyles = clsx(
|
|
12
12
|
"es-uic-bg-gray-100 es-uic-rounded es-uic-p-1 es-uic-border es-uic-border-gray-100 es-uic-hover:border-gray-300 es-uic-items-center es-uic-gap-1.5 es-uic-transition es-uic-overflow-visible",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eightshift/ui-components",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -53,16 +53,14 @@
|
|
|
53
53
|
"@types/react": "^18.3.3",
|
|
54
54
|
"@types/react-dom": "^18.3.0",
|
|
55
55
|
"@vitejs/plugin-react-swc": "^3.7.0",
|
|
56
|
-
"@wordpress/i18n": "^5.
|
|
56
|
+
"@wordpress/i18n": "^5.2.0",
|
|
57
57
|
"autoprefixer": "^10.4.19",
|
|
58
58
|
"clsx": "^2.1.1",
|
|
59
59
|
"css-gradient-parser": "^0.0.16",
|
|
60
|
-
"eslint": "^9.
|
|
60
|
+
"eslint": "^9.6.0",
|
|
61
61
|
"eslint-config-prettier": "^9.1.0",
|
|
62
|
-
"eslint-plugin-jsdoc": "^48.
|
|
62
|
+
"eslint-plugin-jsdoc": "^48.5.0",
|
|
63
63
|
"eslint-plugin-prettier": "^5.1.3",
|
|
64
|
-
"eslint-plugin-react": "^7.34.3",
|
|
65
|
-
"eslint-plugin-react-hooks": "^4.6.2",
|
|
66
64
|
"framer-motion": "^11.2.12",
|
|
67
65
|
"glob": "^10.4.2",
|
|
68
66
|
"globals": "^15.6.0",
|
|
@@ -84,7 +82,7 @@
|
|
|
84
82
|
"tailwindcss-animate": "^1.0.7",
|
|
85
83
|
"tailwindcss-react-aria-components": "^1.1.3",
|
|
86
84
|
"use-debounce": "^10.0.1",
|
|
87
|
-
"vite": "^5.3.
|
|
85
|
+
"vite": "^5.3.2",
|
|
88
86
|
"vite-plugin-lib-inject-css": "^2.1.1"
|
|
89
87
|
},
|
|
90
88
|
"scripts": {
|