@hyphen/hyphen-components 2.16.2 → 2.17.0
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/components/SelectInput/SelectInput.d.ts +8 -0
- package/dist/css/utilities.css +19 -1
- package/dist/css/variables.css +5 -2
- package/dist/hyphen-components.cjs.development.js +6 -5
- package/dist/hyphen-components.cjs.development.js.map +1 -1
- package/dist/hyphen-components.cjs.production.min.js +1 -1
- package/dist/hyphen-components.cjs.production.min.js.map +1 -1
- package/dist/hyphen-components.esm.js +6 -5
- package/dist/hyphen-components.esm.js.map +1 -1
- package/dist/lib/tokens.d.ts +1 -1
- package/package.json +2 -2
- package/src/components/SelectInput/SelectInput.tsx +13 -1
|
@@ -29,6 +29,10 @@ export interface SelectInputProps {
|
|
|
29
29
|
* The value(s) of select.
|
|
30
30
|
*/
|
|
31
31
|
value: any | any[];
|
|
32
|
+
/**
|
|
33
|
+
* Options for dropdown list.
|
|
34
|
+
*/
|
|
35
|
+
options: SelectInputOptions | AsyncOptions;
|
|
32
36
|
/**
|
|
33
37
|
* Autofocus select input on render.
|
|
34
38
|
*/
|
|
@@ -50,6 +54,10 @@ export interface SelectInputProps {
|
|
|
50
54
|
* Visually hide the label.
|
|
51
55
|
*/
|
|
52
56
|
hideLabel?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Load the input asynchronously.
|
|
59
|
+
*/
|
|
60
|
+
isAsync?: boolean;
|
|
53
61
|
/**
|
|
54
62
|
* If the input value is clearable programmatically.
|
|
55
63
|
*/
|
package/dist/css/utilities.css
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
\***************************************************************************************************************************/
|
|
4
4
|
/**
|
|
5
5
|
* Do not edit directly
|
|
6
|
-
* Generated on
|
|
6
|
+
* Generated on Fri, 11 Oct 2024 15:47:07 GMT
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
.font-family-monospace { font-family: var(--assets-font-family-monospace); }
|
|
@@ -168,18 +168,36 @@
|
|
|
168
168
|
|
|
169
169
|
.focus\:background-color-brand-gradient:focus { background: var(--color-background-brand-gradient); }
|
|
170
170
|
|
|
171
|
+
.background-color-brand-gradient-reverse { background: var(--color-background-brand-gradient-reverse); }
|
|
172
|
+
|
|
173
|
+
.hover\:background-color-brand-gradient-reverse:hover { background: var(--color-background-brand-gradient-reverse); }
|
|
174
|
+
|
|
175
|
+
.focus\:background-color-brand-gradient-reverse:focus { background: var(--color-background-brand-gradient-reverse); }
|
|
176
|
+
|
|
171
177
|
.background-color-brand-gradient-purple { background: var(--color-background-brand-gradient-purple); }
|
|
172
178
|
|
|
173
179
|
.hover\:background-color-brand-gradient-purple:hover { background: var(--color-background-brand-gradient-purple); }
|
|
174
180
|
|
|
175
181
|
.focus\:background-color-brand-gradient-purple:focus { background: var(--color-background-brand-gradient-purple); }
|
|
176
182
|
|
|
183
|
+
.background-color-brand-gradient-purple-reverse { background: var(--color-background-brand-gradient-purple-reverse); }
|
|
184
|
+
|
|
185
|
+
.hover\:background-color-brand-gradient-purple-reverse:hover { background: var(--color-background-brand-gradient-purple-reverse); }
|
|
186
|
+
|
|
187
|
+
.focus\:background-color-brand-gradient-purple-reverse:focus { background: var(--color-background-brand-gradient-purple-reverse); }
|
|
188
|
+
|
|
177
189
|
.background-color-brand-gradient-cyan { background: var(--color-background-brand-gradient-cyan); }
|
|
178
190
|
|
|
179
191
|
.hover\:background-color-brand-gradient-cyan:hover { background: var(--color-background-brand-gradient-cyan); }
|
|
180
192
|
|
|
181
193
|
.focus\:background-color-brand-gradient-cyan:focus { background: var(--color-background-brand-gradient-cyan); }
|
|
182
194
|
|
|
195
|
+
.background-color-brand-gradient-cyan-reverse { background: var(--color-background-brand-gradient-cyan-reverse); }
|
|
196
|
+
|
|
197
|
+
.hover\:background-color-brand-gradient-cyan-reverse:hover { background: var(--color-background-brand-gradient-cyan-reverse); }
|
|
198
|
+
|
|
199
|
+
.focus\:background-color-brand-gradient-cyan-reverse:focus { background: var(--color-background-brand-gradient-cyan-reverse); }
|
|
200
|
+
|
|
183
201
|
.background-color-brand-yellow { background: var(--color-background-brand-yellow); }
|
|
184
202
|
|
|
185
203
|
.hover\:background-color-brand-yellow:hover { background: var(--color-background-brand-yellow); }
|
package/dist/css/variables.css
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
\*********************************************************************************************************************/
|
|
4
4
|
/**
|
|
5
5
|
* Do not edit directly
|
|
6
|
-
* Generated on
|
|
6
|
+
* Generated on Fri, 11 Oct 2024 15:47:07 GMT
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
:root {
|
|
@@ -36,8 +36,11 @@
|
|
|
36
36
|
--color-background-toast: #262626;
|
|
37
37
|
--color-background-toast-error: #ef4444;
|
|
38
38
|
--color-background-brand-gradient: linear-gradient(60deg, #eab308 0%, #fa0a64 100%);
|
|
39
|
+
--color-background-brand-gradient-reverse: linear-gradient(270deg, #eab308 0%, #fa0a64 100%);
|
|
39
40
|
--color-background-brand-gradient-purple: linear-gradient(60deg, #b47dff 0%, #4b32aa 100%);
|
|
41
|
+
--color-background-brand-gradient-purple-reverse: linear-gradient(270deg, #b47dff 0%, #4b32aa 100%);
|
|
40
42
|
--color-background-brand-gradient-cyan: linear-gradient(60deg, #00b4ff 0%, #dc50ff 100%);
|
|
43
|
+
--color-background-brand-gradient-cyan-reverse: linear-gradient(270deg, #00b4ff 0%, #dc50ff 100%);
|
|
41
44
|
--color-background-brand-yellow: #ffd200;
|
|
42
45
|
--color-background-brand-orange: #ff911e;
|
|
43
46
|
--color-background-brand-magenta: #ff3278;
|
|
@@ -308,7 +311,7 @@
|
|
|
308
311
|
\*******************************************************************************************************************************/
|
|
309
312
|
/**
|
|
310
313
|
* Do not edit directly
|
|
311
|
-
* Generated on
|
|
314
|
+
* Generated on Fri, 11 Oct 2024 15:47:07 GMT
|
|
312
315
|
*/
|
|
313
316
|
|
|
314
317
|
:root.dark {
|
|
@@ -2304,14 +2304,15 @@ function SelectInput(props) {
|
|
|
2304
2304
|
}));
|
|
2305
2305
|
};
|
|
2306
2306
|
var Component = isCreatable && isAsync ? AsyncCreatableSelect : isCreatable ? CreatableSelect : isAsync ? AsyncSelect : Select;
|
|
2307
|
-
|
|
2308
|
-
width: "100%",
|
|
2309
|
-
className: wrapperClasses
|
|
2310
|
-
}, label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label), React.createElement(Component, _extends({}, restProps, isAsync ? {
|
|
2307
|
+
var selectOptions = isAsync ? {
|
|
2311
2308
|
loadOptions: options
|
|
2312
2309
|
} : {
|
|
2313
2310
|
options: options
|
|
2314
|
-
}
|
|
2311
|
+
};
|
|
2312
|
+
return React.createElement(Box, {
|
|
2313
|
+
width: "100%",
|
|
2314
|
+
className: wrapperClasses
|
|
2315
|
+
}, label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label), React.createElement(Component, _extends({}, restProps, selectOptions, {
|
|
2315
2316
|
inputId: id,
|
|
2316
2317
|
"aria-label": label,
|
|
2317
2318
|
components: {
|