@uva-glass/component-library 3.47.3 → 3.47.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.
|
@@ -2,7 +2,7 @@ import { jsxs as x, jsx as s } from "react/jsx-runtime";
|
|
|
2
2
|
import { useRef as y, useState as k, useEffect as F, Children as m, isValidElement as N, cloneElement as O } from "react";
|
|
3
3
|
import { c as S } from "../../clsx-OuTLNxxd.js";
|
|
4
4
|
import { ResultOption as D } from "./components/ResultsOption.js";
|
|
5
|
-
import { s as
|
|
5
|
+
import { s as t } from "../../SearchField.module-Be9ZoU-6.js";
|
|
6
6
|
import { ResultOptionBox as E } from "./components/ResultOptionBox.js";
|
|
7
7
|
import { Icon as w } from "../Icon/Icon.js";
|
|
8
8
|
import { useOnClickOutside as j } from "../hooks/useOnClickOutside.js";
|
|
@@ -12,18 +12,18 @@ const A = ({
|
|
|
12
12
|
isLoading: b = !1,
|
|
13
13
|
isCompact: l,
|
|
14
14
|
onChange: c,
|
|
15
|
-
children:
|
|
15
|
+
children: a,
|
|
16
16
|
resultCountRow: h
|
|
17
17
|
}) => {
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
}, g = (e) => {
|
|
21
|
-
const a = e.target, r = a.value;
|
|
22
|
-
a.setSelectionRange(r.length, r.length), r && c(r);
|
|
18
|
+
const n = y(null), [_, f] = k(!1), p = y(null), R = () => {
|
|
19
|
+
n.current && (n.current.value = "", n.current.focus());
|
|
23
20
|
}, v = (e) => {
|
|
21
|
+
const o = e.target, r = o.value;
|
|
22
|
+
o.setSelectionRange(r.length, r.length), r && c(r);
|
|
23
|
+
}, g = (e) => {
|
|
24
24
|
switch (e.key) {
|
|
25
25
|
case "Escape":
|
|
26
|
-
e.preventDefault(), c(""),
|
|
26
|
+
e.preventDefault(), c(""), n.current && (n.current.value = ""), l && (f(!1), n.current?.blur());
|
|
27
27
|
break;
|
|
28
28
|
case "ArrowDown": {
|
|
29
29
|
e.preventDefault();
|
|
@@ -39,52 +39,52 @@ const A = ({
|
|
|
39
39
|
}
|
|
40
40
|
};
|
|
41
41
|
return F(() => {
|
|
42
|
-
m.count(
|
|
43
|
-
}, [
|
|
42
|
+
m.count(a) || f(!1);
|
|
43
|
+
}, [a]), j(p, c.bind(null, "")), /* @__PURE__ */ x("div", { className: t["search-field__input-wrapper"], children: [
|
|
44
44
|
l && /* @__PURE__ */ s(
|
|
45
45
|
"button",
|
|
46
46
|
{
|
|
47
47
|
type: "button",
|
|
48
|
-
className:
|
|
48
|
+
className: t["search-field__compact-button"],
|
|
49
49
|
onClick: () => f(!0),
|
|
50
50
|
"aria-label": u,
|
|
51
|
-
children: /* @__PURE__ */ s(w, { name: "Magnify", className:
|
|
51
|
+
children: /* @__PURE__ */ s(w, { name: "Magnify", className: t["search-field__compact-icon"], "aria-hidden": "true" })
|
|
52
52
|
}
|
|
53
53
|
),
|
|
54
54
|
/* @__PURE__ */ x(
|
|
55
55
|
"div",
|
|
56
56
|
{
|
|
57
|
-
className: S(
|
|
58
|
-
[
|
|
59
|
-
[
|
|
57
|
+
className: S(t["search-field__input-container"], {
|
|
58
|
+
[t["search-field__input-container--hidden"]]: l && !_,
|
|
59
|
+
[t["search-field__input-container--visible"]]: l && _
|
|
60
60
|
}),
|
|
61
61
|
children: [
|
|
62
|
-
/* @__PURE__ */ s(w, { name: "Magnify", className:
|
|
62
|
+
/* @__PURE__ */ s(w, { name: "Magnify", className: t["search-field__icon"], "aria-hidden": "true" }),
|
|
63
63
|
/* @__PURE__ */ s(
|
|
64
64
|
"input",
|
|
65
65
|
{
|
|
66
66
|
type: "text",
|
|
67
|
-
className:
|
|
67
|
+
className: t["search-field__input-field"],
|
|
68
68
|
placeholder: u,
|
|
69
69
|
id: d,
|
|
70
70
|
onChange: (e) => c(e.target.value),
|
|
71
|
-
onFocus:
|
|
72
|
-
onKeyDown:
|
|
71
|
+
onFocus: v,
|
|
72
|
+
onKeyDown: g,
|
|
73
73
|
role: "combobox",
|
|
74
|
-
"aria-expanded": !!m.count(
|
|
74
|
+
"aria-expanded": !!m.count(a) || b,
|
|
75
75
|
"aria-controls": `${d}-results`,
|
|
76
76
|
"aria-autocomplete": "list",
|
|
77
77
|
"aria-haspopup": "listbox",
|
|
78
78
|
"aria-label": u,
|
|
79
79
|
autoComplete: "off",
|
|
80
|
-
ref:
|
|
80
|
+
ref: n
|
|
81
81
|
}
|
|
82
82
|
)
|
|
83
83
|
]
|
|
84
84
|
}
|
|
85
85
|
),
|
|
86
|
-
(
|
|
87
|
-
key:
|
|
86
|
+
(a || b) && /* @__PURE__ */ s(E, { resultCountRow: h || null, ref: p, children: m.map(a, (e, o) => N(e) ? O(e, {
|
|
87
|
+
key: o,
|
|
88
88
|
onReset: R
|
|
89
89
|
}) : e) })
|
|
90
90
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField.js","sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { KeyboardEvent, ReactNode, RefObject } from 'react';\r\nimport type { ResultOptionProps } from './components/ResultsOption';\r\n\r\nimport { ResultOption } from './components/ResultsOption';\r\nimport styles from './SearchField.module.css';\r\nimport { ResultOptionBox } from './components/ResultOptionBox';\r\n\r\nimport { Icon } from 'components/Icon';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\nexport interface SearchFieldProps {\r\n /** Unique identifier for the search field. */\r\n id: string;\r\n /** Placeholder text for the search input. */\r\n placeholder: string;\r\n /** Indicates if the search field is in a loading state. */\r\n isLoading?: boolean;\r\n /** If true, the search field is displayed in a compact style. */\r\n isCompact?: boolean;\r\n /** Callback function triggered when the input value changes. */\r\n onChange: (query: string) => void;\r\n /** The children elements, typically ResultOption components. */\r\n children: ReactNode;\r\n /** Optional row to display the count of results. */\r\n resultCountRow?: ReactNode;\r\n}\r\n\r\nexport const SearchField = ({\r\n id,\r\n placeholder,\r\n isLoading = false,\r\n isCompact,\r\n onChange,\r\n children,\r\n resultCountRow,\r\n}: SearchFieldProps) => {\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n const [showField, setShowField] = useState<boolean>(false);\r\n const optionListRef = useRef<HTMLDivElement>(null);\r\n\r\n const handleReset = () => {\r\n
|
|
1
|
+
{"version":3,"file":"SearchField.js","sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { KeyboardEvent, ReactNode, RefObject } from 'react';\r\nimport type { ResultOptionProps } from './components/ResultsOption';\r\n\r\nimport { ResultOption } from './components/ResultsOption';\r\nimport styles from './SearchField.module.css';\r\nimport { ResultOptionBox } from './components/ResultOptionBox';\r\n\r\nimport { Icon } from 'components/Icon';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\nexport interface SearchFieldProps {\r\n /** Unique identifier for the search field. */\r\n id: string;\r\n /** Placeholder text for the search input. */\r\n placeholder: string;\r\n /** Indicates if the search field is in a loading state. */\r\n isLoading?: boolean;\r\n /** If true, the search field is displayed in a compact style. */\r\n isCompact?: boolean;\r\n /** Callback function triggered when the input value changes. */\r\n onChange: (query: string) => void;\r\n /** The children elements, typically ResultOption components. */\r\n children: ReactNode;\r\n /** Optional row to display the count of results. */\r\n resultCountRow?: ReactNode;\r\n}\r\n\r\nexport const SearchField = ({\r\n id,\r\n placeholder,\r\n isLoading = false,\r\n isCompact,\r\n onChange,\r\n children,\r\n resultCountRow,\r\n}: SearchFieldProps) => {\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n const [showField, setShowField] = useState<boolean>(false);\r\n const optionListRef = useRef<HTMLDivElement>(null);\r\n\r\n const handleReset = () => {\r\n if (inputRef.current) {\r\n inputRef.current.value = '';\r\n inputRef.current.focus();\r\n }\r\n };\r\n\r\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\r\n const target = event.target;\r\n const value = target.value;\r\n target.setSelectionRange(value.length, value.length);\r\n if (value) {\r\n onChange(value);\r\n }\r\n };\r\n\r\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n switch (event.key) {\r\n case 'Escape':\r\n event.preventDefault();\r\n onChange('');\r\n if (inputRef.current) {\r\n inputRef.current.value = '';\r\n }\r\n if (isCompact) {\r\n setShowField(false);\r\n inputRef.current?.blur();\r\n }\r\n break;\r\n case 'ArrowDown': {\r\n event.preventDefault();\r\n const container = optionListRef.current;\r\n const firstFocusable = container?.querySelector<HTMLElement>('li[role=\"option\"]:not([tabindex=\"-1\"])');\r\n if (firstFocusable) {\r\n let currentOption: HTMLElement | null = firstFocusable;\r\n while (currentOption && currentOption.getAttribute('tabindex') === '-1') {\r\n currentOption = currentOption.nextElementSibling as HTMLElement;\r\n }\r\n currentOption?.focus();\r\n }\r\n break;\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (!Children.count(children)) {\r\n setShowField(false);\r\n }\r\n }, [children]);\r\n\r\n useOnClickOutside(optionListRef as RefObject<HTMLElement>, onChange.bind(null, ''));\r\n\r\n return (\r\n <div className={styles['search-field__input-wrapper']}>\r\n {isCompact && (\r\n <button\r\n type=\"button\"\r\n className={styles['search-field__compact-button']}\r\n onClick={() => setShowField(true)}\r\n aria-label={placeholder}\r\n >\r\n <Icon name=\"Magnify\" className={styles['search-field__compact-icon']} aria-hidden=\"true\" />\r\n </button>\r\n )}\r\n <div\r\n className={clsx(styles['search-field__input-container'], {\r\n [styles['search-field__input-container--hidden']]: isCompact && !showField,\r\n [styles['search-field__input-container--visible']]: isCompact && showField,\r\n })}\r\n >\r\n <Icon name=\"Magnify\" className={styles['search-field__icon']} aria-hidden=\"true\" />\r\n <input\r\n type=\"text\"\r\n className={styles['search-field__input-field']}\r\n placeholder={placeholder}\r\n id={id}\r\n onChange={(event) => onChange(event.target.value)}\r\n onFocus={handleFocus}\r\n onKeyDown={handleKeyDown}\r\n role=\"combobox\"\r\n aria-expanded={Boolean(Children.count(children)) || isLoading}\r\n aria-controls={`${id}-results`}\r\n aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\"\r\n aria-label={placeholder}\r\n autoComplete=\"off\"\r\n ref={inputRef}\r\n />\r\n </div>\r\n {(children || isLoading) && (\r\n <ResultOptionBox resultCountRow={resultCountRow ? resultCountRow : null} ref={optionListRef}>\r\n {Children.map(children, (child, index) => {\r\n if (isValidElement<ResultOptionProps>(child)) {\r\n return cloneElement(child, {\r\n key: index,\r\n onReset: handleReset,\r\n });\r\n }\r\n return child;\r\n })}\r\n </ResultOptionBox>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nSearchField.ResultOption = ResultOption;\r\n"],"names":["SearchField","id","placeholder","isLoading","isCompact","onChange","children","resultCountRow","inputRef","useRef","showField","setShowField","useState","optionListRef","handleReset","handleFocus","event","target","value","handleKeyDown","firstFocusable","currentOption","useEffect","Children","useOnClickOutside","jsxs","styles","jsx","Icon","clsx","ResultOptionBox","child","index","isValidElement","cloneElement","ResultOption"],"mappings":"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"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { jsx as b } from "react/jsx-runtime";
|
|
2
2
|
import { s as c } from "../../../SearchField.module-Be9ZoU-6.js";
|
|
3
|
-
const m = ({ value:
|
|
4
|
-
const
|
|
5
|
-
e.stopPropagation(),
|
|
3
|
+
const m = ({ value: l, key: o, ariaLabel: n, children: s, onSelect: p, onReset: r, onEscape: a }) => {
|
|
4
|
+
const i = (e) => {
|
|
5
|
+
e.stopPropagation(), a(), r && r(), p(l);
|
|
6
6
|
}, u = (e) => {
|
|
7
7
|
switch (e.key) {
|
|
8
8
|
case "Escape":
|
|
9
|
-
e.preventDefault(), e.stopPropagation(), r();
|
|
9
|
+
e.preventDefault(), e.stopPropagation(), a(), r && r();
|
|
10
10
|
break;
|
|
11
11
|
case "Enter":
|
|
12
|
-
e.preventDefault(),
|
|
12
|
+
e.preventDefault(), i(e);
|
|
13
13
|
break;
|
|
14
14
|
case "ArrowDown": {
|
|
15
15
|
e.preventDefault(), e.stopPropagation();
|
|
@@ -28,7 +28,7 @@ const m = ({ value: o, key: i, ariaLabel: n, children: s, onSelect: p, onReset:
|
|
|
28
28
|
break;
|
|
29
29
|
}
|
|
30
30
|
case "Tab":
|
|
31
|
-
e.preventDefault(),
|
|
31
|
+
e.preventDefault(), a();
|
|
32
32
|
break;
|
|
33
33
|
default:
|
|
34
34
|
e.preventDefault();
|
|
@@ -39,7 +39,7 @@ const m = ({ value: o, key: i, ariaLabel: n, children: s, onSelect: p, onReset:
|
|
|
39
39
|
"li",
|
|
40
40
|
{
|
|
41
41
|
className: c["search-field__result-item"],
|
|
42
|
-
onClick:
|
|
42
|
+
onClick: i,
|
|
43
43
|
onKeyDown: u,
|
|
44
44
|
role: "option",
|
|
45
45
|
"aria-selected": "false",
|
|
@@ -47,7 +47,7 @@ const m = ({ value: o, key: i, ariaLabel: n, children: s, onSelect: p, onReset:
|
|
|
47
47
|
"aria-label": n,
|
|
48
48
|
children: s
|
|
49
49
|
},
|
|
50
|
-
|
|
50
|
+
o
|
|
51
51
|
);
|
|
52
52
|
};
|
|
53
53
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResultsOption.js","sources":["../../../../src/components/SearchField/components/ResultsOption.tsx"],"sourcesContent":["import type { ReactNode, KeyboardEvent } from 'react';\r\n\r\nimport styles from 'components/SearchField/SearchField.module.css';\r\n\r\nexport interface ResultOptionProps {\r\n value: string | number;\r\n key: string | number;\r\n ariaLabel: string;\r\n children: ReactNode;\r\n onEscape: () => void;\r\n onReset?: () => void;\r\n onSelect: (value: string | number) => void;\r\n}\r\n\r\nexport const ResultOption = ({ value, key, ariaLabel, children, onSelect, onReset, onEscape }: ResultOptionProps) => {\r\n const handleSelect = (event: React.MouseEvent | React.KeyboardEvent) => {\r\n event.stopPropagation();\r\n onEscape();\r\n if (onReset) onReset();\r\n onSelect(value);\r\n };\r\n\r\n const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\r\n switch (event.key) {\r\n case 'Escape':\r\n event.preventDefault();\r\n event.stopPropagation();\r\n onEscape();\r\n break;\r\n case 'Enter':\r\n event.preventDefault();\r\n handleSelect(event);\r\n break;\r\n case 'ArrowDown': {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n let nextElement = event.currentTarget.nextElementSibling;\r\n while (nextElement?.getAttribute('tabindex') === '-1') {\r\n nextElement = nextElement.nextElementSibling;\r\n }\r\n (nextElement as HTMLLIElement)?.focus();\r\n break;\r\n }\r\n case 'ArrowUp': {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n let previousElement = event.currentTarget.previousElementSibling;\r\n while (previousElement?.getAttribute('tabindex') === '-1') {\r\n previousElement = previousElement.previousElementSibling;\r\n }\r\n (previousElement as HTMLLIElement)?.focus();\r\n break;\r\n }\r\n case 'Tab':\r\n event.preventDefault();\r\n onEscape();\r\n break;\r\n default:\r\n event.preventDefault();\r\n break;\r\n }\r\n };\r\n\r\n return (\r\n <li\r\n className={styles['search-field__result-item']}\r\n key={key}\r\n onClick={handleSelect}\r\n onKeyDown={onOptionKeyDown}\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n tabIndex={0}\r\n aria-label={ariaLabel}\r\n >\r\n {children}\r\n </li>\r\n );\r\n};\r\n"],"names":["ResultOption","value","key","ariaLabel","children","onSelect","onReset","onEscape","handleSelect","event","onOptionKeyDown","nextElement","previousElement","jsx","styles"],"mappings":";;AAcO,MAAMA,IAAe,CAAC,EAAE,OAAAC,GAAO,KAAAC,GAAK,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,SAAAC,GAAS,UAAAC,QAAkC;AACnH,QAAMC,IAAe,CAACC,MAAkD;AACtE,IAAAA,EAAM,gBAAA,GACNF,EAAA,GACID,KAASA,EAAA,GACbD,EAASJ,CAAK;AAAA,EAChB,GAEMS,IAAkB,CAACD,MAAwC;AAC/D,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AACH,QAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNF,EAAA;
|
|
1
|
+
{"version":3,"file":"ResultsOption.js","sources":["../../../../src/components/SearchField/components/ResultsOption.tsx"],"sourcesContent":["import type { ReactNode, KeyboardEvent } from 'react';\r\n\r\nimport styles from 'components/SearchField/SearchField.module.css';\r\n\r\nexport interface ResultOptionProps {\r\n value: string | number;\r\n key: string | number;\r\n ariaLabel: string;\r\n children: ReactNode;\r\n onEscape: () => void;\r\n onReset?: () => void;\r\n onSelect: (value: string | number) => void;\r\n}\r\n\r\nexport const ResultOption = ({ value, key, ariaLabel, children, onSelect, onReset, onEscape }: ResultOptionProps) => {\r\n const handleSelect = (event: React.MouseEvent | React.KeyboardEvent) => {\r\n event.stopPropagation();\r\n onEscape();\r\n if (onReset) onReset();\r\n onSelect(value);\r\n };\r\n\r\n const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\r\n switch (event.key) {\r\n case 'Escape':\r\n event.preventDefault();\r\n event.stopPropagation();\r\n onEscape();\r\n if (onReset) onReset();\r\n break;\r\n case 'Enter':\r\n event.preventDefault();\r\n handleSelect(event);\r\n break;\r\n case 'ArrowDown': {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n let nextElement = event.currentTarget.nextElementSibling;\r\n while (nextElement?.getAttribute('tabindex') === '-1') {\r\n nextElement = nextElement.nextElementSibling;\r\n }\r\n (nextElement as HTMLLIElement)?.focus();\r\n break;\r\n }\r\n case 'ArrowUp': {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n let previousElement = event.currentTarget.previousElementSibling;\r\n while (previousElement?.getAttribute('tabindex') === '-1') {\r\n previousElement = previousElement.previousElementSibling;\r\n }\r\n (previousElement as HTMLLIElement)?.focus();\r\n break;\r\n }\r\n case 'Tab':\r\n event.preventDefault();\r\n onEscape();\r\n break;\r\n default:\r\n event.preventDefault();\r\n break;\r\n }\r\n };\r\n\r\n return (\r\n <li\r\n className={styles['search-field__result-item']}\r\n key={key}\r\n onClick={handleSelect}\r\n onKeyDown={onOptionKeyDown}\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n tabIndex={0}\r\n aria-label={ariaLabel}\r\n >\r\n {children}\r\n </li>\r\n );\r\n};\r\n"],"names":["ResultOption","value","key","ariaLabel","children","onSelect","onReset","onEscape","handleSelect","event","onOptionKeyDown","nextElement","previousElement","jsx","styles"],"mappings":";;AAcO,MAAMA,IAAe,CAAC,EAAE,OAAAC,GAAO,KAAAC,GAAK,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,SAAAC,GAAS,UAAAC,QAAkC;AACnH,QAAMC,IAAe,CAACC,MAAkD;AACtE,IAAAA,EAAM,gBAAA,GACNF,EAAA,GACID,KAASA,EAAA,GACbD,EAASJ,CAAK;AAAA,EAChB,GAEMS,IAAkB,CAACD,MAAwC;AAC/D,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AACH,QAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNF,EAAA,GACID,KAASA,EAAA;AACb;AAAA,MACF,KAAK;AACH,QAAAG,EAAM,eAAA,GACND,EAAaC,CAAK;AAClB;AAAA,MACF,KAAK,aAAa;AAChB,QAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA;AACN,YAAIE,IAAcF,EAAM,cAAc;AACtC,eAAOE,GAAa,aAAa,UAAU,MAAM;AAC/C,UAAAA,IAAcA,EAAY;AAE3B,QAAAA,GAA+B,MAAA;AAChC;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AACd,QAAAF,EAAM,eAAA,GACNA,EAAM,gBAAA;AACN,YAAIG,IAAkBH,EAAM,cAAc;AAC1C,eAAOG,GAAiB,aAAa,UAAU,MAAM;AACnD,UAAAA,IAAkBA,EAAgB;AAEnC,QAAAA,GAAmC,MAAA;AACpC;AAAA,MACF;AAAA,MACA,KAAK;AACH,QAAAH,EAAM,eAAA,GACNF,EAAA;AACA;AAAA,MACF;AACE,QAAAE,EAAM,eAAA;AACN;AAAA,IAAA;AAAA,EAEN;AAEA,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO,2BAA2B;AAAA,MAE7C,SAASN;AAAA,MACT,WAAWE;AAAA,MACX,MAAK;AAAA,MACL,iBAAc;AAAA,MACd,UAAU;AAAA,MACV,cAAYP;AAAA,MAEX,UAAAC;AAAA,IAAA;AAAA,IARIF;AAAA,EAAA;AAWX;"}
|
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.47.
|
|
5
|
+
"version": "3.47.5",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"react-dom": "^19.1.1"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@commitlint/cli": "^20.
|
|
46
|
+
"@commitlint/cli": "^20.1.0",
|
|
47
47
|
"@commitlint/config-conventional": "^20.0.0",
|
|
48
48
|
"@react-aria/button": "^3.14.1",
|
|
49
49
|
"@react-aria/dialog": "^3.5.30",
|
|
@@ -52,16 +52,16 @@
|
|
|
52
52
|
"@semantic-release/git": "^10.0.1",
|
|
53
53
|
"@semantic-release/gitlab": "^13.2.8",
|
|
54
54
|
"@semantic-release/npm": "^12.0.2",
|
|
55
|
-
"@storybook/addon-a11y": "^9.1.
|
|
56
|
-
"@storybook/addon-docs": "^9.1.
|
|
57
|
-
"@storybook/addon-links": "^9.1.
|
|
58
|
-
"@storybook/react": "^9.1.
|
|
59
|
-
"@storybook/react-vite": "^9.1.
|
|
55
|
+
"@storybook/addon-a11y": "^9.1.9",
|
|
56
|
+
"@storybook/addon-docs": "^9.1.9",
|
|
57
|
+
"@storybook/addon-links": "^9.1.9",
|
|
58
|
+
"@storybook/react": "^9.1.9",
|
|
59
|
+
"@storybook/react-vite": "^9.1.9",
|
|
60
60
|
"@testing-library/jest-dom": "^6.8.0",
|
|
61
61
|
"@testing-library/react": "^16.3.0",
|
|
62
62
|
"@types/jest": "^30.0.0",
|
|
63
63
|
"@types/node": "^22.18.7",
|
|
64
|
-
"@types/react": "^19.1.
|
|
64
|
+
"@types/react": "^19.1.16",
|
|
65
65
|
"@types/react-dom": "^19.1.9",
|
|
66
66
|
"@uva-glass/eslint-config": "^1.3.11",
|
|
67
67
|
"@uva-glass/stylelint-config": "^1.2.3",
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"react-dom": "^19.1.1",
|
|
83
83
|
"react-router": "^7.9.3",
|
|
84
84
|
"semantic-release": "^24.2.9",
|
|
85
|
-
"storybook": "^9.1.
|
|
85
|
+
"storybook": "^9.1.9",
|
|
86
86
|
"style-dictionary": "^5.0.4",
|
|
87
87
|
"stylelint": "^16.24.0",
|
|
88
88
|
"stylelint-config-recommended": "^17.0.0",
|