@uva-glass/component-library 3.47.3 → 3.47.4
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.
|
@@ -12,15 +12,15 @@ 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
18
|
const t = y(null), [_, f] = k(!1), p = y(null), R = () => {
|
|
19
|
-
|
|
20
|
-
}, g = (e) => {
|
|
21
|
-
const a = e.target, r = a.value;
|
|
22
|
-
a.setSelectionRange(r.length, r.length), r && c(r);
|
|
19
|
+
t.current && (t.current.value = "");
|
|
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
26
|
e.preventDefault(), c(""), t.current && (t.current.value = ""), l && (f(!1), t.current?.blur());
|
|
@@ -39,8 +39,8 @@ const A = ({
|
|
|
39
39
|
}
|
|
40
40
|
};
|
|
41
41
|
return F(() => {
|
|
42
|
-
m.count(
|
|
43
|
-
}, [
|
|
42
|
+
m.count(a) || (f(!1), t.current && t.current.focus());
|
|
43
|
+
}, [a]), j(p, c.bind(null, "")), /* @__PURE__ */ x("div", { className: n["search-field__input-wrapper"], children: [
|
|
44
44
|
l && /* @__PURE__ */ s(
|
|
45
45
|
"button",
|
|
46
46
|
{
|
|
@@ -68,10 +68,10 @@ const A = ({
|
|
|
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",
|
|
@@ -83,8 +83,8 @@ const A = ({
|
|
|
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 }\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 if (inputRef.current) {\r\n inputRef.current.focus();\r\n }\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;"}
|