@uva-glass/component-library 3.52.3 → 3.52.5
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/Icon/icons/index.d.ts +12 -0
- package/dist/components/Icon/icons/index.js +125 -115
- package/dist/components/Icon/icons/index.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectButton.js +17 -17
- package/dist/components/SelectListbox/components/SelectButton.js.map +1 -1
- package/package.json +13 -13
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as a, jsxs as E } from "react/jsx-runtime";
|
|
2
2
|
import { c as g } from "../../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { forwardRef as K, useRef as N, useEffect as x } from "react";
|
|
4
4
|
import { s as e } from "../../../SelectListbox.module-CXqMuXRB.js";
|
|
5
5
|
import { Icon as S } from "../../Icon/Icon.js";
|
|
6
6
|
import { useSelect as W } from "../SelectProvider.js";
|
|
7
|
-
const R = K((m,
|
|
7
|
+
const R = K((m, n) => {
|
|
8
8
|
const {
|
|
9
|
-
variant:
|
|
9
|
+
variant: c,
|
|
10
10
|
size: h = "default",
|
|
11
|
-
onChange:
|
|
11
|
+
onChange: b,
|
|
12
12
|
buttonLabelProp: y = "label",
|
|
13
13
|
buttonLabelBold: k,
|
|
14
14
|
disabled: w = !1,
|
|
15
15
|
notValid: I = !1
|
|
16
|
-
} = m,
|
|
16
|
+
} = m, o = N(null), { listboxId: L, isOpen: t, selectedValue: r, toggleListbox: D, setIsOpen: l, setActiveIndex: f, options: p, isDirty: C } = W() || {}, v = (s) => {
|
|
17
17
|
if (s.key.length === 1) {
|
|
18
|
-
const
|
|
19
|
-
(d) => !d.disabled && d.label.toLocaleLowerCase().startsWith(
|
|
18
|
+
const i = s.key.toLocaleLowerCase(), u = p.findIndex(
|
|
19
|
+
(d) => !d.disabled && d.label.toLocaleLowerCase().startsWith(i)
|
|
20
20
|
);
|
|
21
21
|
if (u !== -1) {
|
|
22
|
-
f(u), t ||
|
|
22
|
+
f(u), t || l(!0), s.preventDefault();
|
|
23
23
|
return;
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
switch (s.key) {
|
|
27
27
|
case "Enter":
|
|
28
28
|
if (s.preventDefault(), !t) {
|
|
29
|
-
|
|
29
|
+
l(!0);
|
|
30
30
|
return;
|
|
31
31
|
}
|
|
32
32
|
break;
|
|
33
33
|
case "Escape":
|
|
34
|
-
t && (s.stopPropagation(), f(p.findIndex((
|
|
34
|
+
t && (s.stopPropagation(), f(p.findIndex((i) => i.value === r?.value)), l(!1));
|
|
35
35
|
break;
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
38
|
return x(() => {
|
|
39
|
-
t && (
|
|
39
|
+
t && (o.current?.children[0]).blur();
|
|
40
40
|
}, [t]), x(() => {
|
|
41
|
-
|
|
42
|
-
}, [
|
|
41
|
+
b && b(r), C && (o.current?.children[0]).focus();
|
|
42
|
+
}, [r]), /* @__PURE__ */ a("span", { ref: o, children: /* @__PURE__ */ E(
|
|
43
43
|
"button",
|
|
44
44
|
{
|
|
45
45
|
className: g(e["select-listbox-trigger"], e[`select-listbox-trigger--${h}`], {
|
|
46
|
-
[e[`select-listbox-trigger--${
|
|
46
|
+
[e[`select-listbox-trigger--${c}`]]: c,
|
|
47
47
|
[e["select-listbox-trigger--bold"]]: k,
|
|
48
48
|
[e["select-listbox-trigger--not-valid"]]: I
|
|
49
49
|
}),
|
|
@@ -55,10 +55,10 @@ const R = K((m, c) => {
|
|
|
55
55
|
"aria-label": `${r.label}`,
|
|
56
56
|
disabled: w,
|
|
57
57
|
"aria-controls": L,
|
|
58
|
-
...
|
|
58
|
+
...n && { ref: n },
|
|
59
59
|
children: [
|
|
60
|
-
/* @__PURE__ */
|
|
61
|
-
/* @__PURE__ */
|
|
60
|
+
/* @__PURE__ */ a("span", { className: e["select-listbox-trigger-label"], children: r[y] }),
|
|
61
|
+
/* @__PURE__ */ a(
|
|
62
62
|
S,
|
|
63
63
|
{
|
|
64
64
|
className: g(e["select-listbox-trigger-icon"], {
|
|
@@ -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' | 'darkBorder' | 'roundedLeft' | 'roundedRight';\n size?: 'small' | 'medium' | 'default';\n onChange?: (option: OptionValue) => void;\n buttonLabelProp?: string;\n buttonLabelBold?: boolean;\n disabled?: boolean;\n notValid?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n const {\n variant,\n size = 'default',\n onChange,\n buttonLabelProp = 'label',\n buttonLabelBold,\n disabled = false,\n notValid = false,\n } = props;\n const buttonWrapper = useRef<HTMLSpanElement>(null);\n const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options, isDirty } =\n useSelect() || {};\n\n const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key.length === 1) {\n const key = event.key.toLocaleLowerCase();\n const optionIndexStartsWithKey = options.findIndex(\n (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n );\n if (optionIndexStartsWithKey !== -1) {\n setActiveIndex(optionIndexStartsWithKey);\n if (!isOpen) setIsOpen(true);\n event.preventDefault();\n return;\n }\n }\n\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 if (isOpen) {\n (buttonWrapper.current?.children[0] as HTMLButtonElement).blur();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (onChange) {\n onChange(selectedValue);\n }\n\n isDirty && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [
|
|
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' | 'darkBorder' | 'roundedLeft' | 'roundedRight';\n size?: 'small' | 'medium' | 'default';\n onChange?: (option: OptionValue) => void;\n buttonLabelProp?: string;\n buttonLabelBold?: boolean;\n disabled?: boolean;\n notValid?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n const {\n variant,\n size = 'default',\n onChange,\n buttonLabelProp = 'label',\n buttonLabelBold,\n disabled = false,\n notValid = false,\n } = props;\n const buttonWrapper = useRef<HTMLSpanElement>(null);\n const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options, isDirty } =\n useSelect() || {};\n\n const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key.length === 1) {\n const key = event.key.toLocaleLowerCase();\n const optionIndexStartsWithKey = options.findIndex(\n (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n );\n if (optionIndexStartsWithKey !== -1) {\n setActiveIndex(optionIndexStartsWithKey);\n if (!isOpen) setIsOpen(true);\n event.preventDefault();\n return;\n }\n }\n\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 if (isOpen) {\n (buttonWrapper.current?.children[0] as HTMLButtonElement).blur();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (onChange) {\n onChange(selectedValue);\n }\n\n isDirty && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [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 [styles['select-listbox-trigger--not-valid']]: notValid,\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","notValid","buttonWrapper","useRef","listboxId","isOpen","selectedValue","toggleListbox","setIsOpen","setActiveIndex","options","isDirty","useSelect","onTriggerKeyDown","event","key","optionIndexStartsWithKey","option","useEffect","jsx","jsxs","clsx","styles","Icon"],"mappings":";;;;;;AAoBO,MAAMA,IAAeC,EAAiD,CAACC,GAAOC,MAAQ;AAC3F,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,iBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,EAAA,IACTR,GACES,IAAgBC,EAAwB,IAAI,GAC5C,EAAE,WAAAC,GAAW,QAAAC,GAAQ,eAAAC,GAAe,eAAAC,GAAe,WAAAC,GAAW,gBAAAC,GAAgB,SAAAC,GAAS,SAAAC,MAC3FC,EAAA,KAAe,CAAA,GAEXC,IAAmB,CAACC,MAA4C;AACpE,QAAIA,EAAM,IAAI,WAAW,GAAG;AAC1B,YAAMC,IAAMD,EAAM,IAAI,kBAAA,GAChBE,IAA2BN,EAAQ;AAAA,QACvC,CAACO,MAAW,CAACA,EAAO,YAAYA,EAAO,MAAM,oBAAoB,WAAWF,CAAG;AAAA,MAAA;AAEjF,UAAIC,MAA6B,IAAI;AACnC,QAAAP,EAAeO,CAAwB,GAClCX,KAAQG,EAAU,EAAI,GAC3BM,EAAM,eAAA;AACN;AAAA,MACF;AAAA,IACF;AAEA,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AAEH,YADAA,EAAM,eAAA,GACF,CAACT,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QACF;AACA;AAAA,MACF,KAAK;AACH,QAAIH,MACFS,EAAM,gBAAA,GACNL,EAAeC,EAAQ,UAAU,CAACO,MAAWA,EAAO,UAAUX,GAAe,KAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAU,EAAU,MAAM;AACd,IAAIb,MACDH,EAAc,SAAS,SAAS,CAAC,GAAwB,KAAA;AAAA,EAE9D,GAAG,CAACG,CAAM,CAAC,GAEXa,EAAU,MAAM;AACd,IAAIrB,KACFA,EAASS,CAAa,GAGxBK,MAAYT,EAAc,SAAS,SAAS,CAAC,GAAwB,MAAA;AAAA,EAGvE,GAAG,CAACI,CAAa,CAAC,GAGhB,gBAAAa,EAAC,QAAA,EAAK,KAAKjB,GACT,UAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,wBAAwB,GAAGA,EAAO,2BAA2B1B,CAAI,EAAE,GAAG;AAAA,QAC3F,CAAC0B,EAAO,2BAA2B3B,CAAO,EAAE,CAAC,GAAGA;AAAA,QAChD,CAAC2B,EAAO,8BAA8B,CAAC,GAAGvB;AAAA,QAC1C,CAACuB,EAAO,mCAAmC,CAAC,GAAGrB;AAAA,MAAA,CAChD;AAAA,MACD,MAAK;AAAA,MACL,SAASM;AAAA,MACT,WAAWM;AAAA,MACX,iBAAeR;AAAA,MACf,iBAAc;AAAA,MACd,cAAY,GAAGC,EAAc,KAAK;AAAA,MAClC,UAAAN;AAAA,MACA,iBAAeI;AAAA,MACd,GAAIV,KAAO,EAAE,KAAAA,EAAA;AAAA,MAEd,UAAA;AAAA,QAAA,gBAAAyB,EAAC,UAAK,WAAWG,EAAO,8BAA8B,GACnD,UAAAhB,EAAcR,CAAoC,GACrD;AAAA,QAEA,gBAAAqB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrD,CAACA,EAAO,mCAAmC,CAAC,GAAGjB;AAAA,YAAA,CAChD;AAAA,YACD,MAAK;AAAA,YACL,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}
|
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": "3.52.
|
|
5
|
+
"version": "3.52.5",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -53,15 +53,15 @@
|
|
|
53
53
|
"@semantic-release/git": "^10.0.1",
|
|
54
54
|
"@semantic-release/gitlab": "^13.2.9",
|
|
55
55
|
"@semantic-release/npm": "^13.1.1",
|
|
56
|
-
"@storybook/addon-a11y": "^9.1.
|
|
57
|
-
"@storybook/addon-docs": "^9.1.
|
|
58
|
-
"@storybook/addon-links": "^9.1.
|
|
59
|
-
"@storybook/react": "^9.1.
|
|
60
|
-
"@storybook/react-vite": "^9.1.
|
|
56
|
+
"@storybook/addon-a11y": "^9.1.16",
|
|
57
|
+
"@storybook/addon-docs": "^9.1.16",
|
|
58
|
+
"@storybook/addon-links": "^9.1.16",
|
|
59
|
+
"@storybook/react": "^9.1.16",
|
|
60
|
+
"@storybook/react-vite": "^9.1.16",
|
|
61
61
|
"@testing-library/jest-dom": "^6.9.1",
|
|
62
62
|
"@testing-library/react": "^16.3.0",
|
|
63
63
|
"@types/jest": "^30.0.0",
|
|
64
|
-
"@types/node": "^24.9.
|
|
64
|
+
"@types/node": "^24.9.2",
|
|
65
65
|
"@types/react": "^19.2.2",
|
|
66
66
|
"@types/react-dom": "^19.2.2",
|
|
67
67
|
"@uva-glass/eslint-config": "^1.3.11",
|
|
@@ -77,13 +77,13 @@
|
|
|
77
77
|
"jest": "^30.2.0",
|
|
78
78
|
"jest-environment-jsdom": "^30.2.0",
|
|
79
79
|
"jest-junit": "^16.0.0",
|
|
80
|
-
"jsdom": "^27.0
|
|
80
|
+
"jsdom": "^27.1.0",
|
|
81
81
|
"npm-run-all2": "^8.0.4",
|
|
82
82
|
"react": "^19.2.0",
|
|
83
83
|
"react-dom": "^19.2.0",
|
|
84
|
-
"react-router": "^7.9.
|
|
84
|
+
"react-router": "^7.9.5",
|
|
85
85
|
"semantic-release": "^25.0.1",
|
|
86
|
-
"storybook": "^9.1.
|
|
86
|
+
"storybook": "^9.1.16",
|
|
87
87
|
"style-dictionary": "^5.1.1",
|
|
88
88
|
"stylelint": "^16.25.0",
|
|
89
89
|
"stylelint-config-recommended": "^17.0.0",
|
|
@@ -109,9 +109,9 @@
|
|
|
109
109
|
"lexical": "^0.37.0"
|
|
110
110
|
},
|
|
111
111
|
"optionalDependencies": {
|
|
112
|
-
"@ast-grep/napi-linux-x64-gnu": "0.39.
|
|
112
|
+
"@ast-grep/napi-linux-x64-gnu": "0.39.7",
|
|
113
113
|
"@rollup/rollup-linux-x64-gnu": "^4.52.5",
|
|
114
|
-
"@rspack/binding-darwin-arm64": "1.
|
|
115
|
-
"@rspack/binding-linux-x64-gnu": "1.
|
|
114
|
+
"@rspack/binding-darwin-arm64": "1.6.0",
|
|
115
|
+
"@rspack/binding-linux-x64-gnu": "1.6.0"
|
|
116
116
|
}
|
|
117
117
|
}
|