@uva-glass/component-library 2.0.2 → 2.1.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/SelectListbox.module-ByNtXEyE.js +24 -0
- package/dist/SelectListbox.module-ByNtXEyE.js.map +1 -0
- package/dist/assets/FormInput.css +1 -1
- package/dist/assets/InputField.css +1 -1
- package/dist/assets/SelectListbox.css +1 -1
- package/dist/components/FormInput/FormInput.d.ts +4 -1
- package/dist/components/FormInput/FormInput.js +34 -33
- package/dist/components/FormInput/FormInput.js.map +1 -1
- package/dist/components/FormInput/FormInput.stories.d.ts +1 -0
- package/dist/components/FormInput/FormInput.stories.js +28 -13
- package/dist/components/FormInput/FormInput.stories.js.map +1 -1
- package/dist/components/InputField/InputField.d.ts +2 -0
- package/dist/components/InputField/InputField.js +34 -22
- package/dist/components/InputField/InputField.js.map +1 -1
- package/dist/components/SelectListbox/SelectListbox.d.ts +1 -1
- package/dist/components/SelectListbox/SelectListbox.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectButton.d.ts +1 -1
- package/dist/components/SelectListbox/components/SelectButton.js +1 -1
- package/dist/components/SelectListbox/components/SelectButton.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectContainer.js +1 -1
- package/dist/components/SelectListbox/components/SelectOption.js +1 -1
- package/dist/components/SelectListbox/components/SelectOptionBox.js +1 -1
- package/package.json +2 -2
- package/dist/SelectListbox.module-CdK9mQmJ.js +0 -23
- package/dist/SelectListbox.module-CdK9mQmJ.js.map +0 -1
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import './assets/SelectListbox.css';const e = {
|
|
2
|
+
"select-listbox-container": "_select-listbox-container_1f0f3_1",
|
|
3
|
+
"select-listbox__wrapper": "_select-listbox__wrapper_1f0f3_5",
|
|
4
|
+
"select-listbox-trigger": "_select-listbox-trigger_1f0f3_15",
|
|
5
|
+
"select-listbox-trigger--default": "_select-listbox-trigger--default_1f0f3_30",
|
|
6
|
+
"select-listbox-trigger--small": "_select-listbox-trigger--small_1f0f3_34",
|
|
7
|
+
"select-listbox-trigger--medium": "_select-listbox-trigger--medium_1f0f3_38",
|
|
8
|
+
"select-listbox-trigger-label": "_select-listbox-trigger-label_1f0f3_43",
|
|
9
|
+
"select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_1f0f3_51",
|
|
10
|
+
"select-listbox-trigger--bold": "_select-listbox-trigger--bold_1f0f3_55",
|
|
11
|
+
"select-listbox-trigger--pill": "_select-listbox-trigger--pill_1f0f3_59",
|
|
12
|
+
"select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_1f0f3_64",
|
|
13
|
+
"select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_1f0f3_69",
|
|
14
|
+
"select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_1f0f3_84",
|
|
15
|
+
"select-listbox-trigger-icon": "_select-listbox-trigger-icon_1f0f3_96",
|
|
16
|
+
"select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_1f0f3_101",
|
|
17
|
+
"select-listbox": "_select-listbox_1f0f3_1",
|
|
18
|
+
"select-listbox-option": "_select-listbox-option_1f0f3_115",
|
|
19
|
+
"select-listbox-option--active": "_select-listbox-option--active_1f0f3_127"
|
|
20
|
+
};
|
|
21
|
+
export {
|
|
22
|
+
e as s
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=SelectListbox.module-ByNtXEyE.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectListbox.module-ByNtXEyE.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._form-
|
|
1
|
+
._form-field__container_pfk4n_1{align-items:center;display:flex;flex-wrap:wrap}._form-field__container--label-left_pfk4n_7{align-items:flex-start;flex-direction:row;gap:1rem;line-height:2.5rem}._form-field__container--label-left_pfk4n_7>label:after{line-height:3.6}._form-field__container--label-top_pfk4n_18{align-items:flex-start;flex-direction:column;gap:.5rem;line-height:normal}._form-field__input-feedback-container_pfk4n_25{display:flex;flex:1;flex-direction:column;gap:.5rem;line-height:1.5;position:relative;width:100%}._form-field__input-container_pfk4n_35{display:flex;flex:1}._form-field__input_pfk4n_25{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);flex:1;font-family:inherit;font-size:inherit;height:2.75rem;min-height:2.5rem;padding:0 1rem;text-align:inherit}._form-field__input_pfk4n_25::-webkit-outer-spin-button,._form-field__input_pfk4n_25::-webkit-inner-spin-button{margin:0}._form-field__input--error_pfk4n_60{border-color:var(--color-red-500)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._input-field-
|
|
1
|
+
._input-field-wrapper_1h8mk_1{align-items:center;display:flex;position:relative}._input-field_1h8mk_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);flex:1;font-family:inherit;font-size:inherit;height:2.75rem;margin:0;padding:0 1rem;text-align:inherit}._input-field--large_1h8mk_22{height:3rem}._input-field--compact_1h8mk_26{max-width:6.25rem}._input-field_1h8mk_1:disabled{color:var(--color-scarpa-flow)}._input-field__clear-button_1h8mk_34{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:100%;padding:0 1rem 0 .5rem;position:absolute;right:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._select-listbox-
|
|
1
|
+
._select-listbox-container_1f0f3_1{position:relative}._select-listbox__wrapper_1f0f3_5{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;height:auto;overflow:hidden;position:fixed;width:auto;z-index:20}._select-listbox-trigger_1f0f3_15{align-items:center;background-color:var(--color-white);border:1px solid var(--color-silver);border-radius:.5rem;cursor:pointer;display:flex;font:inherit;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;width:100%}._select-listbox-trigger--default_1f0f3_30{padding:.75rem 2rem .75rem 1rem}._select-listbox-trigger--small_1f0f3_34{padding:.4rem 2rem .4rem 1rem}._select-listbox-trigger--medium_1f0f3_38{padding:.5rem 2rem .5rem 1rem;height:2.75rem}._select-listbox-trigger-label_1f0f3_43{overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._select-listbox__wrapper--align-right_1f0f3_51{right:0}._select-listbox-trigger--bold_1f0f3_55{font-weight:var(--semibold)}._select-listbox-trigger--pill_1f0f3_59{border-radius:6.25rem;padding:.5rem 1.5rem}._select-listbox-trigger--pillLeft_1f0f3_64{border-radius:6.25rem 0 0 6.25rem;padding-left:1.5rem}._select-listbox-trigger--pillRight_1f0f3_69{border-radius:0 6.25rem 6.25rem 0;padding-right:1.25rem}._select-listbox-trigger_1f0f3_15:focus-visible{background-color:var(--color-lavender);outline:1px solid var(--color-scarpa-flow)}._select-listbox-trigger_1f0f3_15:focus-visible,._select-listbox-trigger_1f0f3_15:hover{background-color:var(--color-lavender)}._select-listbox-trigger--noborder_1f0f3_84{border:none}._select-listbox-trigger--pillLeft_1f0f3_64+._select-listbox__wrapper_1f0f3_5{left:1rem}._select-listbox-trigger--pillRight_1f0f3_69+._select-listbox__wrapper--align-right_1f0f3_51{right:1rem}._select-listbox-trigger-icon_1f0f3_96{position:absolute;right:.875rem}._select-listbox-trigger-icon--open_1f0f3_101{transform:rotate(180deg)}._select-listbox_1f0f3_1{background-color:var(--color-white);list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:4px;width:fit-content}._select-listbox-option_1f0f3_115{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;justify-content:space-between;padding:.5rem .75rem;position:relative;-webkit-user-select:none;user-select:none}._select-listbox-option--active_1f0f3_127,._select-listbox-option_1f0f3_115:hover{background-color:var(--color-grey-100);box-shadow:0 0 0 1px var(--color-white)}._select-listbox-option_1f0f3_115[aria-selected=true]{font-weight:var(--semibold)}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
1
2
|
export interface FormInputProps {
|
|
2
3
|
/** The id of the input element. */
|
|
3
4
|
id: string;
|
|
@@ -15,5 +16,7 @@ export interface FormInputProps {
|
|
|
15
16
|
onChange: (value: string) => void;
|
|
16
17
|
/** Determines if the container wrapper is rendered. */
|
|
17
18
|
noContainer?: boolean;
|
|
19
|
+
/** Optional custom input that will replace the default input */
|
|
20
|
+
customInput?: ReactNode;
|
|
18
21
|
}
|
|
19
|
-
export declare const FormInput: ({ id, label, labelPosition, type, required, notValidatedText, onChange, noContainer, }: FormInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare const FormInput: ({ id, label, labelPosition, type, required, notValidatedText, onChange, noContainer, customInput, }: FormInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { c } from "../../clsx-OuTLNxxd.js";
|
|
1
|
+
import { jsxs as p, Fragment as b, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { c as a } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "../Buttons/Button.js";
|
|
5
5
|
import "../Buttons/LinkButton.js";
|
|
@@ -9,7 +9,7 @@ import "@react-aria/dialog";
|
|
|
9
9
|
import "@react-aria/focus";
|
|
10
10
|
import "@react-aria/overlays";
|
|
11
11
|
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
12
|
-
import { FeedbackBox as
|
|
12
|
+
import { FeedbackBox as v } from "../FeedbackBox/FeedbackBox.js";
|
|
13
13
|
import "../GridRow/GridRow.js";
|
|
14
14
|
import "../IconButton/IconButton.js";
|
|
15
15
|
import "../Input/Input.js";
|
|
@@ -25,46 +25,47 @@ import "../SelectListbox/SelectProvider.js";
|
|
|
25
25
|
import "../Sortable/components/SortableItem.js";
|
|
26
26
|
import "../../SortableProvider-BUsvniX7.js";
|
|
27
27
|
import '../../assets/FormInput.css';const r = {
|
|
28
|
-
"form-field__container": "_form-
|
|
29
|
-
"form-field__container--label-left": "_form-field__container--label-
|
|
30
|
-
"form-field__container--label-top": "_form-field__container--label-
|
|
31
|
-
"form-field__input-feedback-container": "_form-field__input-feedback-
|
|
32
|
-
"form-field__input-container": "_form-field__input-
|
|
33
|
-
"form-field__input": "_form-
|
|
34
|
-
"form-field__input--error": "_form-field__input--
|
|
35
|
-
},
|
|
36
|
-
id:
|
|
37
|
-
label:
|
|
38
|
-
labelPosition:
|
|
39
|
-
type:
|
|
40
|
-
required:
|
|
41
|
-
notValidatedText:
|
|
28
|
+
"form-field__container": "_form-field__container_pfk4n_1",
|
|
29
|
+
"form-field__container--label-left": "_form-field__container--label-left_pfk4n_7",
|
|
30
|
+
"form-field__container--label-top": "_form-field__container--label-top_pfk4n_18",
|
|
31
|
+
"form-field__input-feedback-container": "_form-field__input-feedback-container_pfk4n_25",
|
|
32
|
+
"form-field__input-container": "_form-field__input-container_pfk4n_35",
|
|
33
|
+
"form-field__input": "_form-field__input_pfk4n_25",
|
|
34
|
+
"form-field__input--error": "_form-field__input--error_pfk4n_60"
|
|
35
|
+
}, S = ({
|
|
36
|
+
id: n,
|
|
37
|
+
label: t,
|
|
38
|
+
labelPosition: c = "top",
|
|
39
|
+
type: f = "text",
|
|
40
|
+
required: d = !1,
|
|
41
|
+
notValidatedText: e = "",
|
|
42
42
|
onChange: _,
|
|
43
|
-
noContainer:
|
|
43
|
+
noContainer: s = !1,
|
|
44
|
+
customInput: m
|
|
44
45
|
}) => {
|
|
45
|
-
const
|
|
46
|
-
typeof _ == "function" && _(
|
|
47
|
-
},
|
|
48
|
-
|
|
49
|
-
/* @__PURE__ */
|
|
50
|
-
/* @__PURE__ */
|
|
46
|
+
const u = (i) => ["e", "E", "+", "-"].includes(i.key) && i.preventDefault(), k = (i) => {
|
|
47
|
+
typeof _ == "function" && _(i.target.value);
|
|
48
|
+
}, l = /* @__PURE__ */ p(b, { children: [
|
|
49
|
+
t && /* @__PURE__ */ o(h, { htmlFor: n, required: d, alignRight: !0, children: t }),
|
|
50
|
+
/* @__PURE__ */ p("div", { className: r["form-field__input-feedback-container"], children: [
|
|
51
|
+
m || /* @__PURE__ */ o("div", { className: r["form-field__input-container"], children: /* @__PURE__ */ o(
|
|
51
52
|
"input",
|
|
52
53
|
{
|
|
53
|
-
id:
|
|
54
|
-
type:
|
|
55
|
-
...
|
|
56
|
-
onChange:
|
|
57
|
-
className:
|
|
58
|
-
|
|
54
|
+
id: n,
|
|
55
|
+
type: f,
|
|
56
|
+
...f === "number" && { onKeyDown: u },
|
|
57
|
+
onChange: k,
|
|
58
|
+
className: a(r["form-field__input"], [
|
|
59
|
+
e !== "" && r["form-field__input--error"]
|
|
59
60
|
])
|
|
60
61
|
}
|
|
61
62
|
) }),
|
|
62
|
-
|
|
63
|
+
e !== "" && /* @__PURE__ */ o(v, { level: "error", feedback: e })
|
|
63
64
|
] })
|
|
64
65
|
] });
|
|
65
|
-
return
|
|
66
|
+
return s ? l : /* @__PURE__ */ o("div", { className: a(r["form-field__container"], r[`form-field__container--label-${c}`]), children: l });
|
|
66
67
|
};
|
|
67
68
|
export {
|
|
68
|
-
|
|
69
|
+
S as FormInput
|
|
69
70
|
};
|
|
70
71
|
//# sourceMappingURL=FormInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n /** The id of the input element. */\n id: string;\n /** label text if empthy the label is not renderd */\n label: string;\n /** label position `top` or `left`. The default is `top`. */\n labelPosition?: 'top' | 'left';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email' | 'number';\n /** Shows red * */\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange: (value: string) => void;\n /** Determines if the container wrapper is rendered. */\n noContainer?: boolean;\n}\n\nexport const FormInput = ({\n id,\n label,\n labelPosition = 'top',\n type = 'text',\n required = false,\n notValidatedText = '',\n onChange,\n noContainer = false,\n}: FormInputProps) => {\n const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (typeof onChange === 'function') {\n onChange(event.target.value);\n }\n };\n\n const componentContent = (\n <>\n {label && (\n <Label htmlFor={id} required={required} alignRight>\n {label}\n </Label>\n )}\n\n <div className={styles['form-field__input-feedback-container']}>\n <div className={styles['form-field__input-container']}>\n
|
|
1
|
+
{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n /** The id of the input element. */\n id: string;\n /** label text if empthy the label is not renderd */\n label: string;\n /** label position `top` or `left`. The default is `top`. */\n labelPosition?: 'top' | 'left';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email' | 'number';\n /** Shows red * */\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange: (value: string) => void;\n /** Determines if the container wrapper is rendered. */\n noContainer?: boolean;\n /** Optional custom input that will replace the default input */\n customInput?: ReactNode;\n}\n\nexport const FormInput = ({\n id,\n label,\n labelPosition = 'top',\n type = 'text',\n required = false,\n notValidatedText = '',\n onChange,\n noContainer = false,\n customInput,\n}: FormInputProps) => {\n const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (typeof onChange === 'function') {\n onChange(event.target.value);\n }\n };\n\n const componentContent = (\n <>\n {label && (\n <Label htmlFor={id} required={required} alignRight>\n {label}\n </Label>\n )}\n\n <div className={styles['form-field__input-feedback-container']}>\n {customInput ? (\n customInput\n ) : (\n <div className={styles['form-field__input-container']}>\n <input\n id={id}\n type={type}\n {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n onChange={handleChange}\n className={clsx(styles['form-field__input'], [\n notValidatedText !== '' && styles['form-field__input--error'],\n ])}\n />\n </div>\n )}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </>\n );\n\n return noContainer ? (\n componentContent\n ) : (\n <div className={clsx(styles['form-field__container'], styles[`form-field__container--label-${labelPosition}`])}>\n {componentContent}\n </div>\n );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","clsx","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC;AACF,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAe,GAE7DC,IAAe,CAACD,MAA+C;AAC/D,IAAA,OAAOJ,KAAa,cACbA,EAAAI,EAAM,OAAO,KAAK;AAAA,EAE/B,GAEME,IAED,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAAb,uBACEc,GAAM,EAAA,SAASf,GAAI,UAAAI,GAAoB,YAAU,IAC/C,UACHH,EAAA,CAAA;AAAA,IAGD,gBAAAY,EAAA,OAAA,EAAI,WAAWG,EAAO,sCAAsC,GAC1D,UAAA;AAAA,MAAAR,KAGE,gBAAAS,EAAA,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAjB;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWM,EAAiB;AAAA,UACxD,UAAUE;AAAA,UACV,WAAWO,EAAKF,EAAO,mBAAmB,GAAG;AAAA,YAC3CX,MAAqB,MAAMW,EAAO,0BAA0B;AAAA,UAC7D,CAAA;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MAEDX,MAAqB,MAAM,gBAAAY,EAACE,KAAY,OAAM,SAAQ,UAAUd,EAAkB,CAAA;AAAA,IAAA,EACrF,CAAA;AAAA,EAAA,GACF;AAGF,SAAOE,IACLK,IAEC,gBAAAK,EAAA,OAAA,EAAI,WAAWC,EAAKF,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCd,CAAa,EAAE,CAAC,GAC1G,UACHU,GAAA;AAEJ;"}
|
|
@@ -3,3 +3,4 @@ import { FormInputProps } from './FormInput';
|
|
|
3
3
|
declare const _default: Meta<FormInputProps>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const FromInputExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormInputProps>;
|
|
6
|
+
export declare const WithCustomInputExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormInputProps>;
|
|
@@ -1,28 +1,43 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { fn as
|
|
3
|
-
import { FormInput as
|
|
4
|
-
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { fn as i } from "../../index-DWzkl4aY.js";
|
|
3
|
+
import { FormInput as a } from "./FormInput.js";
|
|
4
|
+
import { SelectListbox as o } from "../SelectListbox/SelectListbox.js";
|
|
5
|
+
const m = `
|
|
5
6
|
// Has all HTMLInputElement props available except "className" and "style"
|
|
6
7
|
<FormInput />
|
|
7
|
-
`,
|
|
8
|
+
`, f = {
|
|
8
9
|
title: "Organisms/FormInput",
|
|
9
|
-
component:
|
|
10
|
+
component: a,
|
|
10
11
|
argTypes: {},
|
|
11
12
|
args: {},
|
|
12
13
|
parameters: {
|
|
13
|
-
inspectComponent:
|
|
14
|
-
codeString:
|
|
14
|
+
inspectComponent: a,
|
|
15
|
+
codeString: m
|
|
15
16
|
}
|
|
16
|
-
}, r = (e) => /* @__PURE__ */
|
|
17
|
-
|
|
17
|
+
}, r = (e) => /* @__PURE__ */ t(a, { ...e }), p = r.bind({});
|
|
18
|
+
p.args = {
|
|
18
19
|
id: "vak",
|
|
19
20
|
label: "Vaknaam (NL)",
|
|
20
21
|
labelPosition: "left",
|
|
21
22
|
required: !0,
|
|
22
|
-
onChange:
|
|
23
|
+
onChange: i()
|
|
24
|
+
};
|
|
25
|
+
const u = r.bind({}), l = [
|
|
26
|
+
{ label: "English", value: "EN" },
|
|
27
|
+
{ label: "Dutch", value: "NL" },
|
|
28
|
+
{ label: "German", value: "DE" },
|
|
29
|
+
{ label: "Danish", value: "DK" }
|
|
30
|
+
];
|
|
31
|
+
u.args = {
|
|
32
|
+
id: "language",
|
|
33
|
+
label: "Language",
|
|
34
|
+
labelPosition: "left",
|
|
35
|
+
required: !0,
|
|
36
|
+
customInput: /* @__PURE__ */ t(o, { options: l, defaultValue: "NL", size: "medium", children: l.map(({ label: e, value: n }, s) => /* @__PURE__ */ t(o.SelectOption, { option: { label: e, value: n }, index: s, children: e }, n)) })
|
|
23
37
|
};
|
|
24
38
|
export {
|
|
25
|
-
|
|
26
|
-
|
|
39
|
+
p as FromInputExample,
|
|
40
|
+
u as WithCustomInputExample,
|
|
41
|
+
f as default
|
|
27
42
|
};
|
|
28
43
|
//# sourceMappingURL=FormInput.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormInput.stories.js","sources":["../../../src/components/FormInput/FormInput.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { FormInputProps } from './FormInput';\n\nimport { FormInput } from './FormInput';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<FormInput />\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Organisms/FormInput',\n component: FormInput,\n argTypes: {},\n args: {},\n parameters: {\n inspectComponent: FormInput,\n codeString: codeString,\n },\n} as Meta<FormInputProps>;\n\nconst Template: StoryFn<FormInputProps> = (args) => {\n return <FormInput {...args} />;\n};\n\nexport const FromInputExample = Template.bind({});\n\nFromInputExample.args = {\n id: 'vak',\n label: 'Vaknaam (NL)',\n labelPosition: 'left',\n required: true,\n onChange: fn(),\n};\n"],"names":["codeString","FormInput_stories","FormInput","Template","args","jsx","FromInputExample","fn"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormInput.stories.js","sources":["../../../src/components/FormInput/FormInput.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { FormInputProps } from './FormInput';\n\nimport { FormInput } from './FormInput';\n\nimport { SelectListbox } from 'components/SelectListbox';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<FormInput />\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Organisms/FormInput',\n component: FormInput,\n argTypes: {},\n args: {},\n parameters: {\n inspectComponent: FormInput,\n codeString: codeString,\n },\n} as Meta<FormInputProps>;\n\nconst Template: StoryFn<FormInputProps> = (args) => {\n return <FormInput {...args} />;\n};\n\nexport const FromInputExample = Template.bind({});\n\nFromInputExample.args = {\n id: 'vak',\n label: 'Vaknaam (NL)',\n labelPosition: 'left',\n required: true,\n onChange: fn(),\n};\n\nexport const WithCustomInputExample = Template.bind({});\n\nconst mockOptions = [\n { label: 'English', value: 'EN' },\n { label: 'Dutch', value: 'NL' },\n { label: 'German', value: 'DE' },\n { label: 'Danish', value: 'DK' },\n];\n\nWithCustomInputExample.args = {\n id: 'language',\n label: 'Language',\n labelPosition: 'left',\n required: true,\n customInput: (\n <SelectListbox options={mockOptions} defaultValue=\"NL\" size=\"medium\">\n {mockOptions.map(({ label, value }, index) => (\n <SelectListbox.SelectOption option={{ label, value }} index={index} key={value}>\n {label}\n </SelectListbox.SelectOption>\n ))}\n </SelectListbox>\n ),\n};\n"],"names":["codeString","FormInput_stories","FormInput","Template","args","jsx","FromInputExample","fn","WithCustomInputExample","mockOptions","SelectListbox","label","value","index"],"mappings":";;;;AASA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,MAAM,CAAC;AAAA,EACP,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAoC,CAACC,MAClC,gBAAAC,EAACH,GAAW,EAAA,GAAGE,EAAM,CAAA,GAGjBE,IAAmBH,EAAS,KAAK,CAAE,CAAA;AAEhDG,EAAiB,OAAO;AAAA,EACtB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAUC,EAAG;AACf;AAEO,MAAMC,IAAyBL,EAAS,KAAK,CAAE,CAAA,GAEhDM,IAAc;AAAA,EAClB,EAAE,OAAO,WAAW,OAAO,KAAK;AAAA,EAChC,EAAE,OAAO,SAAS,OAAO,KAAK;AAAA,EAC9B,EAAE,OAAO,UAAU,OAAO,KAAK;AAAA,EAC/B,EAAE,OAAO,UAAU,OAAO,KAAK;AACjC;AAEAD,EAAuB,OAAO;AAAA,EAC5B,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA,EACV,aACE,gBAAAH,EAACK,GAAc,EAAA,SAASD,GAAa,cAAa,MAAK,MAAK,UACzD,UAAAA,EAAY,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAC,EAAA,GAASC,MACjC,gBAAAR,EAAAK,EAAc,cAAd,EAA2B,QAAQ,EAAE,OAAAC,GAAO,OAAAC,EAAS,GAAA,OAAAC,GACnD,UADsEF,EAAA,GAAAC,CAEzE,CACD,EACH,CAAA;AAEJ;"}
|
|
@@ -2,6 +2,8 @@ import { InputHTMLAttributes, ReactNode } from 'react';
|
|
|
2
2
|
export interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {
|
|
3
3
|
/** The variant to render. Possible values: `undefined`, `large`. The default is `undefined`. */
|
|
4
4
|
variant?: 'large';
|
|
5
|
+
/** The width to render. Possible values: `undefined`, `compact`. The default is `undefined`. */
|
|
6
|
+
width?: 'compact';
|
|
5
7
|
/** The type of the input element. */
|
|
6
8
|
type?: 'text' | 'password' | 'email';
|
|
7
9
|
/** The id of the input element. */
|
|
@@ -1,34 +1,46 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { c as
|
|
1
|
+
import { jsxs as h, jsx as p } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as k, useState as b, useRef as g, useEffect as x } from "react";
|
|
3
|
+
import { c as y } from "../../clsx-OuTLNxxd.js";
|
|
4
4
|
import '../../assets/InputField.css';const i = {
|
|
5
|
-
"input-field-wrapper": "_input-field-
|
|
6
|
-
"input-field": "_input-
|
|
7
|
-
"input-field--large": "_input-field--
|
|
8
|
-
"input-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
"input-field-wrapper": "_input-field-wrapper_1h8mk_1",
|
|
6
|
+
"input-field": "_input-field_1h8mk_1",
|
|
7
|
+
"input-field--large": "_input-field--large_1h8mk_22",
|
|
8
|
+
"input-field--compact": "_input-field--compact_1h8mk_26",
|
|
9
|
+
"input-field__clear-button": "_input-field__clear-button_1h8mk_34"
|
|
10
|
+
}, W = k(
|
|
11
|
+
({
|
|
12
|
+
autoComplete: u = "off",
|
|
13
|
+
id: r,
|
|
14
|
+
value: e,
|
|
15
|
+
variant: f,
|
|
16
|
+
width: o,
|
|
17
|
+
type: s = "text",
|
|
18
|
+
clearTrigger: n,
|
|
19
|
+
onClear: c,
|
|
20
|
+
...a
|
|
21
|
+
}, t) => {
|
|
22
|
+
const [_, d] = b(0), l = g(null);
|
|
12
23
|
x(() => {
|
|
13
|
-
l.current &&
|
|
24
|
+
l.current && d(l.current.offsetWidth);
|
|
14
25
|
}, [e]);
|
|
15
|
-
const
|
|
16
|
-
|
|
26
|
+
const m = () => {
|
|
27
|
+
c && t && "current" in t && t.current && (c(), t.current.focus());
|
|
17
28
|
};
|
|
18
|
-
return /* @__PURE__ */
|
|
29
|
+
return /* @__PURE__ */ h("div", { className: i["input-field-wrapper"], children: [
|
|
19
30
|
/* @__PURE__ */ p(
|
|
20
31
|
"input",
|
|
21
32
|
{
|
|
22
|
-
...
|
|
23
|
-
autoComplete:
|
|
33
|
+
...a,
|
|
34
|
+
autoComplete: u,
|
|
24
35
|
ref: t,
|
|
25
36
|
id: r,
|
|
26
|
-
className:
|
|
27
|
-
[i["input-field--large"]]:
|
|
37
|
+
className: y(i["input-field"], {
|
|
38
|
+
[i["input-field--large"]]: f === "large",
|
|
39
|
+
[i["input-field--compact"]]: o === "compact"
|
|
28
40
|
}),
|
|
29
|
-
type:
|
|
41
|
+
type: s,
|
|
30
42
|
value: e,
|
|
31
|
-
style: { paddingRight: e && n ?
|
|
43
|
+
style: { paddingRight: e && n ? _ : void 0 }
|
|
32
44
|
}
|
|
33
45
|
),
|
|
34
46
|
e && n && /* @__PURE__ */ p(
|
|
@@ -36,7 +48,7 @@ import '../../assets/InputField.css';const i = {
|
|
|
36
48
|
{
|
|
37
49
|
type: "button",
|
|
38
50
|
className: i["input-field__clear-button"],
|
|
39
|
-
onClick:
|
|
51
|
+
onClick: m,
|
|
40
52
|
ref: l,
|
|
41
53
|
"aria-label": `clear trigger for ${r}`,
|
|
42
54
|
children: n
|
|
@@ -46,6 +58,6 @@ import '../../assets/InputField.css';const i = {
|
|
|
46
58
|
}
|
|
47
59
|
);
|
|
48
60
|
export {
|
|
49
|
-
|
|
61
|
+
W as InputField
|
|
50
62
|
};
|
|
51
63
|
//# sourceMappingURL=InputField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n /** The variant to render. Possible values: `undefined`, `large`. The default is `undefined`. */\n variant?: 'large';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email';\n /** The id of the input element. */\n id: string;\n /** An element that represents a clear button. */\n clearTrigger?: ReactNode;\n /** The callback that is invoked when the clear button is triggered. */\n onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n (\n {
|
|
1
|
+
{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n /** The variant to render. Possible values: `undefined`, `large`. The default is `undefined`. */\n variant?: 'large';\n /** The width to render. Possible values: `undefined`, `compact`. The default is `undefined`. */\n width?: 'compact';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email';\n /** The id of the input element. */\n id: string;\n /** An element that represents a clear button. */\n clearTrigger?: ReactNode;\n /** The callback that is invoked when the clear button is triggered. */\n onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n (\n {\n autoComplete = 'off',\n id,\n value,\n variant,\n width,\n type = 'text',\n clearTrigger,\n onClear,\n ...restProps\n }: InputFieldProps,\n forwardedRef\n ) => {\n const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (clearButtonRef.current) {\n setClearButtonWidth(clearButtonRef.current.offsetWidth);\n }\n }, [value]);\n\n const handleClearTriggerClick = () => {\n if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n onClear();\n forwardedRef.current.focus();\n }\n };\n\n return (\n <div className={styles['input-field-wrapper']}>\n <input\n {...restProps}\n autoComplete={autoComplete}\n ref={forwardedRef}\n id={id}\n className={clsx(styles['input-field'], {\n [styles['input-field--large']]: variant === 'large',\n [styles['input-field--compact']]: width === 'compact',\n })}\n type={type}\n value={value}\n style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n />\n {value && clearTrigger && (\n <button\n type=\"button\"\n className={styles['input-field__clear-button']}\n onClick={handleClearTriggerClick}\n ref={clearButtonRef}\n aria-label={`clear trigger for ${id}`}\n >\n {clearTrigger}\n </button>\n )}\n </div>\n );\n }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","width","type","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;GAuBaA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,cAAAC,IAAe;AAAA,IACf,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACGF,EAAAE,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACX,CAAK,CAAC;AAEV,UAAMc,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,EAAA,GACRE,EAAa,QAAQ,MAAM;AAAA,IAE/B;AAEA,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAR;AAAA,UACA,KAAKS;AAAA,UACL,IAAAR;AAAA,UACA,WAAWmB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGf,MAAY;AAAA,YAC5C,CAACe,EAAO,sBAAsB,CAAC,GAAGd,MAAU;AAAA,UAAA,CAC7C;AAAA,UACD,MAAAC;AAAA,UACA,OAAAH;AAAA,UACA,OAAO,EAAE,cAAcA,KAASI,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACCR,KAASI,KACR,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBZ,CAAE;AAAA,UAElC,UAAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAAA;AAGN;"}
|
|
@@ -16,7 +16,7 @@ export interface SelectListboxProps {
|
|
|
16
16
|
/** The variant of the select box. */
|
|
17
17
|
variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';
|
|
18
18
|
/** The size of the select box. */
|
|
19
|
-
size?: 'small' | 'default';
|
|
19
|
+
size?: 'small' | 'medium' | 'default';
|
|
20
20
|
/** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */
|
|
21
21
|
optionPositionRight?: boolean;
|
|
22
22
|
/** The breakpoint at which to switch to the mobile view. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n /** The possible options to select. */\n options: OptionValue[];\n /** The selected value by default. */\n defaultValue?: SelectValue;\n /** The max height of the options. */\n maxOptionHeight?: `${number}${'px' | 'rem'}`;\n /** `true` to disable the select box; otherwise, `false`. The default is `false`. */\n disabled?: boolean;\n /** The name of the property in the options structure that contains the label of the options. */\n buttonLabelProp?: string;\n /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */\n buttonLabelBold?: boolean;\n /** The variant of the select box. */\n variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';\n /** The size of the select box. */\n size?: 'small' | 'default';\n /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n optionPositionRight?: boolean;\n /** The breakpoint at which to switch to the mobile view. */\n mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n /** The callback function that is invoked when an option is selected. */\n onChange?: (option: OptionValue) => void;\n}\n\n/** Represents a component to render a select list box. */\nexport const SelectListbox = ({\n options,\n variant,\n size = 'default',\n optionPositionRight,\n defaultValue = -1,\n maxOptionHeight,\n disabled,\n buttonLabelProp = 'label',\n buttonLabelBold,\n onChange,\n children,\n}: PropsWithChildren<SelectListboxProps>) => {\n const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n mouseEvent: 'click',\n position: 'bottomLeft',\n offset: 4,\n maxFixedHeight: maxOptionHeight,\n horizontalPosition: optionPositionRight ? 'right' : 'left',\n mobileBreakpoint: '28rem',\n });\n\n return (\n <SelectProvider options={options} defaultValue={defaultValue}>\n <SelectContainer>\n <SelectButton\n disabled={disabled}\n buttonLabelProp={buttonLabelProp}\n buttonLabelBold={buttonLabelBold}\n variant={variant}\n size={size}\n onChange={onChange}\n ref={setReferenceElement}\n />\n\n <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n {children}\n </SelectOptionBox>\n </SelectContainer>\n </SelectProvider>\n );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","SelectOption"],"mappings":";;;;;;;;AAuCO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgBT;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,EAAA,CACnB;AAED,SACG,gBAAAe,EAAAC,GAAA,EAAe,SAAAnB,GAAkB,cAAAI,GAChC,4BAACgB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAf;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAP;AAAA,QACA,MAAAC;AAAA,QACA,UAAAO;AAAA,QACA,KAAKM;AAAA,MAAA;AAAA,IACP;AAAA,sBAECO,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAAAN,EACH,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEAX,EAAc,eAAewB;"}
|
|
1
|
+
{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n /** The possible options to select. */\n options: OptionValue[];\n /** The selected value by default. */\n defaultValue?: SelectValue;\n /** The max height of the options. */\n maxOptionHeight?: `${number}${'px' | 'rem'}`;\n /** `true` to disable the select box; otherwise, `false`. The default is `false`. */\n disabled?: boolean;\n /** The name of the property in the options structure that contains the label of the options. */\n buttonLabelProp?: string;\n /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */\n buttonLabelBold?: boolean;\n /** The variant of the select box. */\n variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';\n /** The size of the select box. */\n size?: 'small' | 'medium' | 'default';\n /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n optionPositionRight?: boolean;\n /** The breakpoint at which to switch to the mobile view. */\n mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n /** The callback function that is invoked when an option is selected. */\n onChange?: (option: OptionValue) => void;\n}\n\n/** Represents a component to render a select list box. */\nexport const SelectListbox = ({\n options,\n variant,\n size = 'default',\n optionPositionRight,\n defaultValue = -1,\n maxOptionHeight,\n disabled,\n buttonLabelProp = 'label',\n buttonLabelBold,\n onChange,\n children,\n}: PropsWithChildren<SelectListboxProps>) => {\n const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n mouseEvent: 'click',\n position: 'bottomLeft',\n offset: 4,\n maxFixedHeight: maxOptionHeight,\n horizontalPosition: optionPositionRight ? 'right' : 'left',\n mobileBreakpoint: '28rem',\n });\n\n return (\n <SelectProvider options={options} defaultValue={defaultValue}>\n <SelectContainer>\n <SelectButton\n disabled={disabled}\n buttonLabelProp={buttonLabelProp}\n buttonLabelBold={buttonLabelBold}\n variant={variant}\n size={size}\n onChange={onChange}\n ref={setReferenceElement}\n />\n\n <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n {children}\n </SelectOptionBox>\n </SelectContainer>\n </SelectProvider>\n );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","SelectOption"],"mappings":";;;;;;;;AAuCO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgBT;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,EAAA,CACnB;AAED,SACG,gBAAAe,EAAAC,GAAA,EAAe,SAAAnB,GAAkB,cAAAI,GAChC,4BAACgB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAf;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAP;AAAA,QACA,MAAAC;AAAA,QACA,UAAAO;AAAA,QACA,KAAKM;AAAA,MAAA;AAAA,IACP;AAAA,sBAECO,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAAAN,EACH,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEAX,EAAc,eAAewB;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { OptionValue } from 'components/SelectListbox/SelectProvider';
|
|
2
2
|
export interface SelectButtonProps {
|
|
3
3
|
variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';
|
|
4
|
-
size?: 'small' | 'default';
|
|
4
|
+
size?: 'small' | 'medium' | 'default';
|
|
5
5
|
onChange?: (option: OptionValue) => void;
|
|
6
6
|
buttonLabelProp?: string;
|
|
7
7
|
buttonLabelBold?: boolean;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as a, jsxs as C } from "react/jsx-runtime";
|
|
2
2
|
import { c as f } from "../../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { forwardRef as E, useRef as g, useEffect as c } from "react";
|
|
4
|
-
import { s as t } from "../../../SelectListbox.module-
|
|
4
|
+
import { s as t } from "../../../SelectListbox.module-ByNtXEyE.js";
|
|
5
5
|
import { Icon as L } from "../../Icon/Icon.js";
|
|
6
6
|
import { useSelect as N } from "../SelectProvider.js";
|
|
7
7
|
const O = E((d, u) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectButton.js","sources":["../../../../src/components/SelectListbox/components/SelectButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, forwardRef } from 'react';\n\nimport type { KeyboardEvent } from 'react';\nimport type { OptionValue, SelectValue } from 'components/SelectListbox/SelectProvider';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { Icon } from 'components/Icon';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectButtonProps {\n variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';\n size?: 'small' | 'default';\n onChange?: (option: OptionValue) => void;\n buttonLabelProp?: string;\n buttonLabelBold?: boolean;\n disabled?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n const { variant, size = 'default', onChange, buttonLabelProp = 'label', buttonLabelBold, disabled = false } = props;\n const buttonWrapper = useRef<HTMLSpanElement>(null);\n const isFirstRender = useRef(true);\n const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options } = useSelect() || {};\n\n const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Enter':\n event.preventDefault();\n if (!isOpen) {\n setIsOpen(true);\n return;\n }\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n setIsOpen(false);\n }\n break;\n }\n };\n\n useEffect(() => {\n isOpen\n ? (buttonWrapper.current?.children[0] as HTMLButtonElement).blur()\n : !isFirstRender.current && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n }, [isOpen]);\n\n useEffect(() => {\n isFirstRender.current = false;\n\n return () => {\n isFirstRender.current = true;\n };\n }, []);\n\n useEffect(() => {\n if (onChange) onChange(selectedValue);\n }, [onChange, selectedValue]);\n\n return (\n <span ref={buttonWrapper}>\n <button\n className={clsx(styles['select-listbox-trigger'], styles[`select-listbox-trigger--${size}`], {\n [styles[`select-listbox-trigger--${variant}`]]: variant,\n [styles['select-listbox-trigger--bold']]: buttonLabelBold,\n })}\n type=\"button\"\n onClick={toggleListbox}\n onKeyDown={onTriggerKeyDown}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-label={`${selectedValue.label}`}\n disabled={disabled}\n aria-controls={listboxId}\n {...(ref && { ref: ref })}\n >\n <span className={styles['select-listbox-trigger-label']}>\n {selectedValue[buttonLabelProp as keyof SelectValue]}\n </span>\n\n <Icon\n className={clsx(styles['select-listbox-trigger-icon'], {\n [styles['select-listbox-trigger-icon--open']]: isOpen,\n })}\n name=\"CheveronDown\"\n size={16}\n />\n </button>\n </span>\n );\n});\n"],"names":["SelectButton","forwardRef","props","ref","variant","size","onChange","buttonLabelProp","buttonLabelBold","disabled","buttonWrapper","useRef","isFirstRender","listboxId","isOpen","selectedValue","toggleListbox","setIsOpen","setActiveIndex","options","useSelect","onTriggerKeyDown","event","option","useEffect","_a","_b","jsx","jsxs","clsx","styles","Icon"],"mappings":";;;;;;AAmBO,MAAMA,IAAeC,EAAiD,CAACC,GAAOC,MAAQ;AACrF,QAAA,EAAE,SAAAC,GAAS,MAAAC,IAAO,WAAW,UAAAC,GAAU,iBAAAC,IAAkB,SAAS,iBAAAC,GAAiB,UAAAC,IAAW,GAAU,IAAAP,GACxGQ,IAAgBC,EAAwB,IAAI,GAC5CC,IAAgBD,EAAO,EAAI,GAC3B,EAAE,WAAAE,GAAW,QAAAC,GAAQ,eAAAC,GAAe,eAAAC,GAAe,WAAAC,GAAW,gBAAAC,GAAgB,SAAAC,EAAQ,IAAIC,EAAU,KAAK,CAAC,GAE1GC,IAAmB,CAACC,MAA4C;AACpE,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AAEH,YADAA,EAAM,eAAe,GACjB,CAACR,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QAAA;AAEF;AAAA,MACF,KAAK;AACH,QAAIH,MACFQ,EAAM,gBAAgB,GACPJ,EAAAC,EAAQ,UAAU,CAACI,MAAWA,EAAO,WAAUR,KAAA,gBAAAA,EAAe,MAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAO,EAAU,MAAM;;AACd,IAAAV,MACKW,IAAAf,EAAc,YAAd,gBAAAe,EAAuB,SAAS,IAAyB,KAAK,IAC/D,CAACb,EAAc,aAAYc,IAAAhB,EAAc,YAAd,gBAAAgB,EAAuB,SAAS,IAAyB,MAAM;AAAA,EAAA,GAC7F,CAACZ,CAAM,CAAC,GAEXU,EAAU,OACRZ,EAAc,UAAU,IAEjB,MAAM;AACX,IAAAA,EAAc,UAAU;AAAA,EAC1B,IACC,EAAE,GAELY,EAAU,MAAM;AACV,IAAAlB,OAAmBS,CAAa;AAAA,EAAA,GACnC,CAACT,GAAUS,CAAa,CAAC,GAG1B,gBAAAY,EAAC,QAAK,EAAA,KAAKjB,GACT,UAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,wBAAwB,GAAGA,EAAO,2BAA2BzB,CAAI,EAAE,GAAG;AAAA,QAC3F,CAACyB,EAAO,2BAA2B1B,CAAO,EAAE,CAAC,GAAGA;AAAA,QAChD,CAAC0B,EAAO,8BAA8B,CAAC,GAAGtB;AAAA,MAAA,CAC3C;AAAA,MACD,MAAK;AAAA,MACL,SAASQ;AAAA,MACT,WAAWK;AAAA,MACX,iBAAeP;AAAA,MACf,iBAAc;AAAA,MACd,cAAY,GAAGC,EAAc,KAAK;AAAA,MAClC,UAAAN;AAAA,MACA,iBAAeI;AAAA,MACd,GAAIV,KAAO,EAAE,KAAAA,EAAS;AAAA,MAEvB,UAAA;AAAA,QAAA,gBAAAwB,EAAC,UAAK,WAAWG,EAAO,8BAA8B,GACnD,UAAAf,EAAcR,CAAoC,GACrD;AAAA,QAEA,gBAAAoB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrD,CAACA,EAAO,mCAAmC,CAAC,GAAGhB;AAAA,YAAA,CAChD;AAAA,YACD,MAAK;AAAA,YACL,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}
|
|
1
|
+
{"version":3,"file":"SelectButton.js","sources":["../../../../src/components/SelectListbox/components/SelectButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, forwardRef } from 'react';\n\nimport type { KeyboardEvent } from 'react';\nimport type { OptionValue, SelectValue } from 'components/SelectListbox/SelectProvider';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { Icon } from 'components/Icon';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectButtonProps {\n variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';\n size?: 'small' | 'medium' | 'default';\n onChange?: (option: OptionValue) => void;\n buttonLabelProp?: string;\n buttonLabelBold?: boolean;\n disabled?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n const { variant, size = 'default', onChange, buttonLabelProp = 'label', buttonLabelBold, disabled = false } = props;\n const buttonWrapper = useRef<HTMLSpanElement>(null);\n const isFirstRender = useRef(true);\n const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options } = useSelect() || {};\n\n const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Enter':\n event.preventDefault();\n if (!isOpen) {\n setIsOpen(true);\n return;\n }\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n setIsOpen(false);\n }\n break;\n }\n };\n\n useEffect(() => {\n isOpen\n ? (buttonWrapper.current?.children[0] as HTMLButtonElement).blur()\n : !isFirstRender.current && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n }, [isOpen]);\n\n useEffect(() => {\n isFirstRender.current = false;\n\n return () => {\n isFirstRender.current = true;\n };\n }, []);\n\n useEffect(() => {\n if (onChange) onChange(selectedValue);\n }, [onChange, selectedValue]);\n\n return (\n <span ref={buttonWrapper}>\n <button\n className={clsx(styles['select-listbox-trigger'], styles[`select-listbox-trigger--${size}`], {\n [styles[`select-listbox-trigger--${variant}`]]: variant,\n [styles['select-listbox-trigger--bold']]: buttonLabelBold,\n })}\n type=\"button\"\n onClick={toggleListbox}\n onKeyDown={onTriggerKeyDown}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-label={`${selectedValue.label}`}\n disabled={disabled}\n aria-controls={listboxId}\n {...(ref && { ref: ref })}\n >\n <span className={styles['select-listbox-trigger-label']}>\n {selectedValue[buttonLabelProp as keyof SelectValue]}\n </span>\n\n <Icon\n className={clsx(styles['select-listbox-trigger-icon'], {\n [styles['select-listbox-trigger-icon--open']]: isOpen,\n })}\n name=\"CheveronDown\"\n size={16}\n />\n </button>\n </span>\n );\n});\n"],"names":["SelectButton","forwardRef","props","ref","variant","size","onChange","buttonLabelProp","buttonLabelBold","disabled","buttonWrapper","useRef","isFirstRender","listboxId","isOpen","selectedValue","toggleListbox","setIsOpen","setActiveIndex","options","useSelect","onTriggerKeyDown","event","option","useEffect","_a","_b","jsx","jsxs","clsx","styles","Icon"],"mappings":";;;;;;AAmBO,MAAMA,IAAeC,EAAiD,CAACC,GAAOC,MAAQ;AACrF,QAAA,EAAE,SAAAC,GAAS,MAAAC,IAAO,WAAW,UAAAC,GAAU,iBAAAC,IAAkB,SAAS,iBAAAC,GAAiB,UAAAC,IAAW,GAAU,IAAAP,GACxGQ,IAAgBC,EAAwB,IAAI,GAC5CC,IAAgBD,EAAO,EAAI,GAC3B,EAAE,WAAAE,GAAW,QAAAC,GAAQ,eAAAC,GAAe,eAAAC,GAAe,WAAAC,GAAW,gBAAAC,GAAgB,SAAAC,EAAQ,IAAIC,EAAU,KAAK,CAAC,GAE1GC,IAAmB,CAACC,MAA4C;AACpE,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AAEH,YADAA,EAAM,eAAe,GACjB,CAACR,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QAAA;AAEF;AAAA,MACF,KAAK;AACH,QAAIH,MACFQ,EAAM,gBAAgB,GACPJ,EAAAC,EAAQ,UAAU,CAACI,MAAWA,EAAO,WAAUR,KAAA,gBAAAA,EAAe,MAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAO,EAAU,MAAM;;AACd,IAAAV,MACKW,IAAAf,EAAc,YAAd,gBAAAe,EAAuB,SAAS,IAAyB,KAAK,IAC/D,CAACb,EAAc,aAAYc,IAAAhB,EAAc,YAAd,gBAAAgB,EAAuB,SAAS,IAAyB,MAAM;AAAA,EAAA,GAC7F,CAACZ,CAAM,CAAC,GAEXU,EAAU,OACRZ,EAAc,UAAU,IAEjB,MAAM;AACX,IAAAA,EAAc,UAAU;AAAA,EAC1B,IACC,EAAE,GAELY,EAAU,MAAM;AACV,IAAAlB,OAAmBS,CAAa;AAAA,EAAA,GACnC,CAACT,GAAUS,CAAa,CAAC,GAG1B,gBAAAY,EAAC,QAAK,EAAA,KAAKjB,GACT,UAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,wBAAwB,GAAGA,EAAO,2BAA2BzB,CAAI,EAAE,GAAG;AAAA,QAC3F,CAACyB,EAAO,2BAA2B1B,CAAO,EAAE,CAAC,GAAGA;AAAA,QAChD,CAAC0B,EAAO,8BAA8B,CAAC,GAAGtB;AAAA,MAAA,CAC3C;AAAA,MACD,MAAK;AAAA,MACL,SAASQ;AAAA,MACT,WAAWK;AAAA,MACX,iBAAeP;AAAA,MACf,iBAAc;AAAA,MACd,cAAY,GAAGC,EAAc,KAAK;AAAA,MAClC,UAAAN;AAAA,MACA,iBAAeI;AAAA,MACd,GAAIV,KAAO,EAAE,KAAAA,EAAS;AAAA,MAEvB,UAAA;AAAA,QAAA,gBAAAwB,EAAC,UAAK,WAAWG,EAAO,8BAA8B,GACnD,UAAAf,EAAcR,CAAoC,GACrD;AAAA,QAEA,gBAAAoB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrD,CAACA,EAAO,mCAAmC,CAAC,GAAGhB;AAAA,YAAA,CAChD;AAAA,YACD,MAAK;AAAA,YACL,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as c } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as i, useCallback as u, useEffect as l } from "react";
|
|
3
3
|
import { useSelect as m } from "../SelectProvider.js";
|
|
4
|
-
import { s as f } from "../../../SelectListbox.module-
|
|
4
|
+
import { s as f } from "../../../SelectListbox.module-ByNtXEyE.js";
|
|
5
5
|
const E = ({ children: o }) => {
|
|
6
6
|
const { isOpen: r, setIsOpen: n } = m(), t = i(null), e = u(
|
|
7
7
|
({ target: s }) => {
|
|
@@ -2,7 +2,7 @@ import { jsx as d } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as v } from "../../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { useRef as D, useEffect as p } from "react";
|
|
4
4
|
import { useSelect as y } from "../SelectProvider.js";
|
|
5
|
-
import { s as b } from "../../../SelectListbox.module-
|
|
5
|
+
import { s as b } from "../../../SelectListbox.module-ByNtXEyE.js";
|
|
6
6
|
const S = ({ option: t, index: l, children: m }) => {
|
|
7
7
|
const o = D(null), { isOpen: r, activeIndex: s, setActiveIndex: c, selectedValue: f, setSelectedValue: u, setIsOpen: i, options: a } = y(), w = (e) => {
|
|
8
8
|
u(a[e]), i(!1);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as s } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as m, useRef as x } from "react";
|
|
3
|
-
import { s as i } from "../../../SelectListbox.module-
|
|
3
|
+
import { s as i } from "../../../SelectListbox.module-ByNtXEyE.js";
|
|
4
4
|
import { useSelect as a } from "../SelectProvider.js";
|
|
5
5
|
const h = m((l, e) => {
|
|
6
6
|
const { style: t, children: o } = l, { listboxId: r, isOpen: c } = a(), n = x(null);
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@uva-glass/component-library",
|
|
3
3
|
"author": "Team Glass - Frontend vrienden",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "2.0
|
|
5
|
+
"version": "2.1.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"@react-aria/overlays": "^3.24.0",
|
|
48
48
|
"@react-types/dialog": "^3.5.14",
|
|
49
49
|
"@semantic-release/git": "^10.0.1",
|
|
50
|
-
"@semantic-release/gitlab": "^13.2.
|
|
50
|
+
"@semantic-release/gitlab": "^13.2.2",
|
|
51
51
|
"@semantic-release/npm": "^12.0.1",
|
|
52
52
|
"@storybook/addon-a11y": "^8.4.6",
|
|
53
53
|
"@storybook/addon-essentials": "^8.4.6",
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import './assets/SelectListbox.css';const l = {
|
|
2
|
-
"select-listbox-container": "_select-listbox-container_x5lzf_1",
|
|
3
|
-
"select-listbox__wrapper": "_select-listbox__wrapper_x5lzf_5",
|
|
4
|
-
"select-listbox-trigger": "_select-listbox-trigger_x5lzf_15",
|
|
5
|
-
"select-listbox-trigger--default": "_select-listbox-trigger--default_x5lzf_30",
|
|
6
|
-
"select-listbox-trigger--small": "_select-listbox-trigger--small_x5lzf_34",
|
|
7
|
-
"select-listbox-trigger-label": "_select-listbox-trigger-label_x5lzf_38",
|
|
8
|
-
"select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_x5lzf_46",
|
|
9
|
-
"select-listbox-trigger--bold": "_select-listbox-trigger--bold_x5lzf_50",
|
|
10
|
-
"select-listbox-trigger--pill": "_select-listbox-trigger--pill_x5lzf_54",
|
|
11
|
-
"select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_x5lzf_59",
|
|
12
|
-
"select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_x5lzf_64",
|
|
13
|
-
"select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_x5lzf_79",
|
|
14
|
-
"select-listbox-trigger-icon": "_select-listbox-trigger-icon_x5lzf_91",
|
|
15
|
-
"select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_x5lzf_96",
|
|
16
|
-
"select-listbox": "_select-listbox_x5lzf_1",
|
|
17
|
-
"select-listbox-option": "_select-listbox-option_x5lzf_110",
|
|
18
|
-
"select-listbox-option--active": "_select-listbox-option--active_x5lzf_122"
|
|
19
|
-
};
|
|
20
|
-
export {
|
|
21
|
-
l as s
|
|
22
|
-
};
|
|
23
|
-
//# sourceMappingURL=SelectListbox.module-CdK9mQmJ.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectListbox.module-CdK9mQmJ.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
|