@uva-glass/component-library 3.47.1 → 3.47.3
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/SearchField.module-Be9ZoU-6.js +17 -0
- package/dist/SearchField.module-Be9ZoU-6.js.map +1 -0
- package/dist/WeekSelector.module-CTDcqKel.js +17 -0
- package/dist/WeekSelector.module-CTDcqKel.js.map +1 -0
- package/dist/assets/SearchField.css +1 -1
- package/dist/assets/WeekSelector.css +1 -1
- package/dist/components/SearchField/SearchField.d.ts +3 -5
- package/dist/components/SearchField/SearchField.js +66 -50
- package/dist/components/SearchField/SearchField.js.map +1 -1
- package/dist/components/SearchField/SearcheField.stories.d.ts +6 -2
- package/dist/components/SearchField/SearcheField.stories.js +39 -34
- package/dist/components/SearchField/SearcheField.stories.js.map +1 -1
- package/dist/components/SearchField/components/ResultOptionBox.js +1 -1
- package/dist/components/SearchField/components/ResultsOption.d.ts +4 -2
- package/dist/components/SearchField/components/ResultsOption.js +36 -17
- package/dist/components/SearchField/components/ResultsOption.js.map +1 -1
- package/dist/components/SearchField/mockData.d.ts +12 -2
- package/dist/components/SearchField/mockData.js +60 -161
- package/dist/components/SearchField/mockData.js.map +1 -1
- package/dist/components/WeekSelector/WeekSelector.js +61 -42
- package/dist/components/WeekSelector/WeekSelector.js.map +1 -1
- package/dist/components/WeekSelector/WeekSelector.stories.js +73 -20
- package/dist/components/WeekSelector/WeekSelector.stories.js.map +1 -1
- package/dist/components/WeekSelector/components/WeekSelectorButton.js +1 -1
- package/dist/components/WeekSelector/components/WeekSelectorOption.js +82 -27
- package/dist/components/WeekSelector/components/WeekSelectorOption.js.map +1 -1
- package/dist/components/WeekSelector/components/WeekSelectorOptionContainer.js +1 -1
- package/package.json +13 -13
- package/dist/SearchField.module-DTDxokfU.js +0 -17
- package/dist/SearchField.module-DTDxokfU.js.map +0 -1
- package/dist/WeekSelector.module-BA7qqZsx.js +0 -17
- package/dist/WeekSelector.module-BA7qqZsx.js.map +0 -1
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import './assets/SearchField.css';const _ = {
|
|
2
|
+
"search-field__input-wrapper": "_search-field__input-wrapper_223yn_1",
|
|
3
|
+
"search-field__input-field": "_search-field__input-field_223yn_8",
|
|
4
|
+
"search-field__icon": "_search-field__icon_223yn_35",
|
|
5
|
+
"search-field__result-wrapper": "_search-field__result-wrapper_223yn_43",
|
|
6
|
+
"search-field__input-container": "_search-field__input-container_223yn_57",
|
|
7
|
+
"search-field__input-container--hidden": "_search-field__input-container--hidden_223yn_62",
|
|
8
|
+
"search-field__input-container--visible": "_search-field__input-container--visible_223yn_66",
|
|
9
|
+
"search-field__compact-button": "_search-field__compact-button_223yn_76",
|
|
10
|
+
"search-field__compact-icon": "_search-field__compact-icon_223yn_93",
|
|
11
|
+
"search-field__result-list": "_search-field__result-list_223yn_97",
|
|
12
|
+
"search-field__result-item": "_search-field__result-item_223yn_110"
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
_ as s
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=SearchField.module-Be9ZoU-6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchField.module-Be9ZoU-6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import './assets/WeekSelector.css';const e = {
|
|
2
|
+
"week-selector": "_week-selector_sxjgz_1",
|
|
3
|
+
"week-selector-button": "_week-selector-button_sxjgz_5",
|
|
4
|
+
"week-selector-option-container": "_week-selector-option-container_sxjgz_26",
|
|
5
|
+
"week-selector-option-header": "_week-selector-option-header_sxjgz_40",
|
|
6
|
+
"week-selector-option-table": "_week-selector-option-table_sxjgz_47",
|
|
7
|
+
"week-selector-option-table-labels": "_week-selector-option-table-labels_sxjgz_52",
|
|
8
|
+
"week-selector-option-week-grid": "_week-selector-option-week-grid_sxjgz_53",
|
|
9
|
+
"week-selector-option-table-label": "_week-selector-option-table-label_sxjgz_52",
|
|
10
|
+
"week-selector-option-week-row": "_week-selector-option-week-row_sxjgz_76",
|
|
11
|
+
"week-selector-option-week": "_week-selector-option-week_sxjgz_53",
|
|
12
|
+
"week-selector-option-week--selected": "_week-selector-option-week--selected_sxjgz_113"
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
e as s
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=WeekSelector.module-CTDcqKel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WeekSelector.module-CTDcqKel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._search-field__input-
|
|
1
|
+
._search-field__input-wrapper_223yn_1{display:flex;justify-content:flex-end;position:relative;width:100%}._search-field__input-field_223yn_8{appearance:none;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-400);border-radius:.25rem;color:var(--new-color-uva-black);flex:1;font-family:inherit;font-size:inherit;height:2.35rem;margin:0;padding:0 2.75rem 0 1rem;text-align:inherit;width:100%}._search-field__input-field_223yn_8::placeholder{color:var(--new-color-grey-700);font-size:inherit;opacity:1}._search-field__input-field_223yn_8:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._search-field__icon_223yn_35{color:var(--new-color-grey-700);position:absolute;right:.5rem;top:50%;transform:translateY(-50%)}._search-field__result-wrapper_223yn_43{background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.25rem;display:flex;flex-direction:column;left:0;overflow:hidden;position:absolute;top:calc(100% + .25rem);width:clamp(22rem,100%,24rem);z-index:10}._search-field__input-container_223yn_57{position:relative;width:100%}._search-field__input-container--hidden_223yn_62{display:none}._search-field__input-container--visible_223yn_66{display:block;max-width:22rem;min-width:100%;position:absolute;right:0;top:0;z-index:10}._search-field__compact-button_223yn_76{align-items:center;appearance:none;background-color:transparent;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-400);border-radius:.25rem;color:var(--new-color-uva-black);cursor:pointer;display:flex;height:2.35rem;justify-content:center;margin:0;text-align:inherit;width:2.35rem}._search-field__compact-icon_223yn_93{color:var(--new-color-grey-700)}._search-field__result-list_223yn_97{border-bottom:1px solid var(--new-color-grey-700);list-style:none;margin:0;max-height:min(23.75rem,50vh);overflow-y:auto;padding:0}._search-field__result-list_223yn_97:empty{display:none}._search-field__result-item_223yn_110{font-size:inherit;max-width:100%;padding:.5rem 1rem;white-space:nowrap}._search-field__result-item_223yn_110:focus-visible{background-color:var(--new-color-grey-300);outline:none}._search-field__result-item_223yn_110:hover,._search-field__result-item_223yn_110:focus-visible{background-color:var(--new-color-grey-300);cursor:pointer}._search-field__result-info_223yn_128{background-color:var(--new-color-uva-white);border-radius:0 0 .25rem .25rem;border-top:1px solid var(--new-color-grey-400);font-size:inherit;max-width:100%;padding:.5rem 1rem;white-space:nowrap}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._week-
|
|
1
|
+
._week-selector_sxjgz_1{position:relative}._week-selector-button_sxjgz_5{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.25rem;color:var(--new-color-uva-black);cursor:pointer;display:flex;font-family:inherit;font-size:inherit;height:2.75rem;justify-content:space-between;min-width:8rem;padding:0 .75rem 0 1rem}._week-selector-button_sxjgz_5:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._week-selector-option-container_sxjgz_26{background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-400);border-radius:.25rem;display:flex;flex-direction:column;gap:.75rem;inset:100% auto auto 0;padding:1.5rem;position:absolute;width:max-content;z-index:10}._week-selector-option-header_sxjgz_40{color:var(--new-color-uva-black);font-family:inherit;font-size:var(--font-size-default);font-weight:var(--semibold)}._week-selector-option-table_sxjgz_47{display:flex;gap:1.5rem}._week-selector-option-table-labels_sxjgz_52,._week-selector-option-week-grid_sxjgz_53{display:flex;flex-direction:column;font-family:inherit;gap:.5rem;min-width:max-content;padding:.5rem 0}._week-selector-option-table-label_sxjgz_52{color:var(--new-color-uva-black);font-weight:var(--semibold);line-height:2.25rem}._week-selector-option-week-grid_sxjgz_53{border:1px solid var(--new-color-grey-700);border-radius:.5rem;max-width:max-content;padding:.5rem;width:100%}._week-selector-option-week-row_sxjgz_76{display:flex;gap:.25rem}._week-selector-option-week_sxjgz_53{align-items:center;background-color:var(--new-color-uva-white);border:none;border-radius:.25rem;color:var(--new-color-uva-black);cursor:pointer;display:flex;height:2.25rem;justify-content:center;width:2.25rem}._week-selector-option-week_sxjgz_53:disabled{background-color:var(--new-color-grey-400);color:var(--new-color-grey-700);font-weight:var(--semibold)}._week-selector-option-week_sxjgz_53:disabled:active{background-color:var(--new-color-grey-500);color:var(--new-color-grey-00)}._week-selector-option-week_sxjgz_53:disabled:hover{cursor:not-allowed}._week-selector-option-week_sxjgz_53:hover{background-color:var(--new-color-grey-300)}._week-selector-option-week--selected_sxjgz_113,._week-selector-option-week--selected_sxjgz_113:hover{background-color:var(--new-color-navy-600);color:var(--new-color-uva-white)}._week-selector-option-week_sxjgz_53:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}
|
|
@@ -10,15 +10,13 @@ export interface SearchFieldProps {
|
|
|
10
10
|
/** If true, the search field is displayed in a compact style. */
|
|
11
11
|
isCompact?: boolean;
|
|
12
12
|
/** Callback function triggered when the input value changes. */
|
|
13
|
-
onChange
|
|
14
|
-
/** Callback function triggered when a result is selected. */
|
|
15
|
-
onSelect?: (selectedValue: string | number) => void;
|
|
13
|
+
onChange: (query: string) => void;
|
|
16
14
|
/** The children elements, typically ResultOption components. */
|
|
17
15
|
children: ReactNode;
|
|
18
16
|
/** Optional row to display the count of results. */
|
|
19
17
|
resultCountRow?: ReactNode;
|
|
20
18
|
}
|
|
21
19
|
export declare const SearchField: {
|
|
22
|
-
({ id, placeholder, isLoading, isCompact, onChange,
|
|
23
|
-
ResultOption: ({ value, key, children, onSelect,
|
|
20
|
+
({ id, placeholder, isLoading, isCompact, onChange, children, resultCountRow, }: SearchFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
ResultOption: ({ value, key, ariaLabel, children, onSelect, onReset, onEscape }: ResultOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
22
|
};
|
|
@@ -1,80 +1,96 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { c as
|
|
4
|
-
import { ResultOption as
|
|
5
|
-
import { s as
|
|
1
|
+
import { jsxs as x, jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as y, useState as k, useEffect as F, Children as m, isValidElement as N, cloneElement as O } from "react";
|
|
3
|
+
import { c as S } from "../../clsx-OuTLNxxd.js";
|
|
4
|
+
import { ResultOption as D } from "./components/ResultsOption.js";
|
|
5
|
+
import { s as n } from "../../SearchField.module-Be9ZoU-6.js";
|
|
6
6
|
import { ResultOptionBox as E } from "./components/ResultOptionBox.js";
|
|
7
|
-
import { Icon as
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
children:
|
|
16
|
-
resultCountRow:
|
|
7
|
+
import { Icon as w } from "../Icon/Icon.js";
|
|
8
|
+
import { useOnClickOutside as j } from "../hooks/useOnClickOutside.js";
|
|
9
|
+
const A = ({
|
|
10
|
+
id: d,
|
|
11
|
+
placeholder: u,
|
|
12
|
+
isLoading: b = !1,
|
|
13
|
+
isCompact: l,
|
|
14
|
+
onChange: c,
|
|
15
|
+
children: o,
|
|
16
|
+
resultCountRow: h
|
|
17
17
|
}) => {
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
},
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
const t = y(null), [_, f] = k(!1), p = y(null), R = () => {
|
|
19
|
+
console.log("reset"), t.current && (t.current.value = "");
|
|
20
|
+
}, g = (e) => {
|
|
21
|
+
const a = e.target, r = a.value;
|
|
22
|
+
a.setSelectionRange(r.length, r.length), r && c(r);
|
|
23
|
+
}, v = (e) => {
|
|
24
|
+
switch (e.key) {
|
|
25
|
+
case "Escape":
|
|
26
|
+
e.preventDefault(), c(""), t.current && (t.current.value = ""), l && (f(!1), t.current?.blur());
|
|
27
|
+
break;
|
|
28
|
+
case "ArrowDown": {
|
|
29
|
+
e.preventDefault();
|
|
30
|
+
const r = p.current?.querySelector('li[role="option"]:not([tabindex="-1"])');
|
|
31
|
+
if (r) {
|
|
32
|
+
let i = r;
|
|
33
|
+
for (; i && i.getAttribute("tabindex") === "-1"; )
|
|
34
|
+
i = i.nextElementSibling;
|
|
35
|
+
i?.focus();
|
|
36
|
+
}
|
|
37
|
+
break;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
24
40
|
};
|
|
25
|
-
return
|
|
26
|
-
|
|
27
|
-
}, [
|
|
28
|
-
|
|
41
|
+
return F(() => {
|
|
42
|
+
m.count(o) || (f(!1), t.current && t.current.focus());
|
|
43
|
+
}, [o]), j(p, c.bind(null, "")), /* @__PURE__ */ x("div", { className: n["search-field__input-wrapper"], children: [
|
|
44
|
+
l && /* @__PURE__ */ s(
|
|
29
45
|
"button",
|
|
30
46
|
{
|
|
31
47
|
type: "button",
|
|
32
|
-
className:
|
|
33
|
-
onClick: () =>
|
|
34
|
-
"aria-label":
|
|
35
|
-
children: /* @__PURE__ */
|
|
48
|
+
className: n["search-field__compact-button"],
|
|
49
|
+
onClick: () => f(!0),
|
|
50
|
+
"aria-label": u,
|
|
51
|
+
children: /* @__PURE__ */ s(w, { name: "Magnify", className: n["search-field__compact-icon"], "aria-hidden": "true" })
|
|
36
52
|
}
|
|
37
53
|
),
|
|
38
|
-
/* @__PURE__ */
|
|
54
|
+
/* @__PURE__ */ x(
|
|
39
55
|
"div",
|
|
40
56
|
{
|
|
41
|
-
className:
|
|
42
|
-
[
|
|
43
|
-
[
|
|
57
|
+
className: S(n["search-field__input-container"], {
|
|
58
|
+
[n["search-field__input-container--hidden"]]: l && !_,
|
|
59
|
+
[n["search-field__input-container--visible"]]: l && _
|
|
44
60
|
}),
|
|
45
61
|
children: [
|
|
46
|
-
/* @__PURE__ */
|
|
47
|
-
/* @__PURE__ */
|
|
62
|
+
/* @__PURE__ */ s(w, { name: "Magnify", className: n["search-field__icon"], "aria-hidden": "true" }),
|
|
63
|
+
/* @__PURE__ */ s(
|
|
48
64
|
"input",
|
|
49
65
|
{
|
|
50
66
|
type: "text",
|
|
51
|
-
className:
|
|
52
|
-
placeholder:
|
|
53
|
-
id:
|
|
54
|
-
onChange:
|
|
55
|
-
onFocus:
|
|
56
|
-
onKeyDown:
|
|
67
|
+
className: n["search-field__input-field"],
|
|
68
|
+
placeholder: u,
|
|
69
|
+
id: d,
|
|
70
|
+
onChange: (e) => c(e.target.value),
|
|
71
|
+
onFocus: g,
|
|
72
|
+
onKeyDown: v,
|
|
57
73
|
role: "combobox",
|
|
58
|
-
"aria-expanded": !!
|
|
59
|
-
"aria-controls": `${
|
|
74
|
+
"aria-expanded": !!m.count(o) || b,
|
|
75
|
+
"aria-controls": `${d}-results`,
|
|
60
76
|
"aria-autocomplete": "list",
|
|
61
77
|
"aria-haspopup": "listbox",
|
|
62
|
-
"aria-label":
|
|
78
|
+
"aria-label": u,
|
|
63
79
|
autoComplete: "off",
|
|
64
|
-
ref:
|
|
80
|
+
ref: t
|
|
65
81
|
}
|
|
66
82
|
)
|
|
67
83
|
]
|
|
68
84
|
}
|
|
69
85
|
),
|
|
70
|
-
(
|
|
71
|
-
key:
|
|
72
|
-
|
|
86
|
+
(o || b) && /* @__PURE__ */ s(E, { resultCountRow: h || null, ref: p, children: m.map(o, (e, a) => N(e) ? O(e, {
|
|
87
|
+
key: a,
|
|
88
|
+
onReset: R
|
|
73
89
|
}) : e) })
|
|
74
90
|
] });
|
|
75
91
|
};
|
|
76
|
-
|
|
92
|
+
A.ResultOption = D;
|
|
77
93
|
export {
|
|
78
|
-
|
|
94
|
+
A as SearchField
|
|
79
95
|
};
|
|
80
96
|
//# sourceMappingURL=SearchField.js.map
|
|
@@ -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 {
|
|
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 console.log('reset');\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,5 +1,9 @@
|
|
|
1
1
|
import { Meta } from '@storybook/react';
|
|
2
2
|
import { SearchFieldProps } from './SearchField';
|
|
3
|
-
declare const _default: Meta<SearchFieldProps
|
|
3
|
+
declare const _default: Meta<SearchFieldProps & {
|
|
4
|
+
onSelect: (value: string | number) => void;
|
|
5
|
+
}>;
|
|
4
6
|
export default _default;
|
|
5
|
-
export declare const InputExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SearchFieldProps
|
|
7
|
+
export declare const InputExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SearchFieldProps & {
|
|
8
|
+
onSelect: (value: string | number) => void;
|
|
9
|
+
}>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { jsx as n, jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { SearchField as
|
|
4
|
-
import { MOCK_DATA as
|
|
5
|
-
const
|
|
1
|
+
import { jsx as n, jsxs as E } from "react/jsx-runtime";
|
|
2
|
+
import { useState as m } from "react";
|
|
3
|
+
import { SearchField as r } from "./SearchField.js";
|
|
4
|
+
import { MOCK_DATA as L } from "./mockData.js";
|
|
5
|
+
const v = `
|
|
6
6
|
// Has all HTMLInputElement props available except "className" and "style"
|
|
7
7
|
<SearchField
|
|
8
8
|
id={string}
|
|
@@ -10,19 +10,23 @@ const L = `
|
|
|
10
10
|
placeholder?={string}
|
|
11
11
|
isLoading?={boolean}
|
|
12
12
|
isCompact?={boolean}
|
|
13
|
-
onChange
|
|
14
|
-
onSelect?={function}
|
|
13
|
+
onChange={function}
|
|
15
14
|
children={ReactNode}
|
|
16
15
|
resultCountRow?={ReactNode}
|
|
17
16
|
>
|
|
18
|
-
<SearchField.ResultOption
|
|
17
|
+
<SearchField.ResultOption
|
|
18
|
+
onSelect={function}
|
|
19
|
+
onEscape={function}
|
|
20
|
+
value={string|number}
|
|
21
|
+
key={string|number}
|
|
22
|
+
ariaLabel={string}>
|
|
19
23
|
{loop custom options here}
|
|
20
24
|
</SearchField.ResultOption>
|
|
21
|
-
</SearchField>`,
|
|
22
|
-
var
|
|
25
|
+
</SearchField>`, w = 4, i = 12, y = 1e3;
|
|
26
|
+
var h = /* @__PURE__ */ ((t) => (t.DEGREE = "degree-programme", t.CERTIFICATE = "certificate-programme", t.ADMINISTRATIVE = "administrative-programme", t))(h || {});
|
|
23
27
|
const M = {
|
|
24
28
|
title: "Molecules/SearchField",
|
|
25
|
-
component:
|
|
29
|
+
component: r,
|
|
26
30
|
args: {},
|
|
27
31
|
argTypes: {
|
|
28
32
|
onSelect: {
|
|
@@ -57,55 +61,56 @@ const M = {
|
|
|
57
61
|
}
|
|
58
62
|
},
|
|
59
63
|
parameters: {
|
|
60
|
-
inspectComponent:
|
|
61
|
-
codeString:
|
|
64
|
+
inspectComponent: r,
|
|
65
|
+
codeString: v
|
|
62
66
|
}
|
|
63
|
-
},
|
|
64
|
-
const [c, d] =
|
|
65
|
-
if (e.length <
|
|
66
|
-
|
|
67
|
+
}, T = (t) => {
|
|
68
|
+
const [c, d] = m(!1), [u, o] = m(), g = "2026", p = "NL", f = (e, a, s, l) => `education-preparation/${h[a]}/${e}/${s}/${l}`, b = (e) => {
|
|
69
|
+
if (e.length < w) {
|
|
70
|
+
o(null);
|
|
67
71
|
return;
|
|
68
72
|
}
|
|
69
73
|
d(!0);
|
|
70
|
-
const
|
|
71
|
-
(
|
|
74
|
+
const a = e.toLowerCase(), s = L.filter(
|
|
75
|
+
(l) => l.name.NL.toLowerCase().includes(a) || l.code.toLowerCase().includes(a)
|
|
72
76
|
);
|
|
73
77
|
setTimeout(() => {
|
|
74
|
-
|
|
75
|
-
},
|
|
76
|
-
},
|
|
77
|
-
|
|
78
|
+
o(s), d(!1);
|
|
79
|
+
}, y);
|
|
80
|
+
}, C = (e) => e.length > i ? `${e.length} resultaten gevonden, alleen de ${i} beste resultaten worden weergegeven.` : e.length > 0 && e.length <= i ? `${e.length} resultaten gevonden.` : c ? "Zoeken..." : "Geen resultaten gevonden.", S = (e) => e ? /* @__PURE__ */ n("div", { style: { padding: "0.5rem 1rem", fontWeight: "600" }, children: C(e) }, "result-count") : null, R = (e) => {
|
|
81
|
+
o(null), t.onSelect(e);
|
|
78
82
|
};
|
|
79
83
|
return /* @__PURE__ */ n("div", { style: { width: "20rem", display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ n(
|
|
80
|
-
|
|
84
|
+
r,
|
|
81
85
|
{
|
|
82
86
|
placeholder: "Zoek...",
|
|
83
87
|
id: "search-field-1",
|
|
84
88
|
isLoading: c,
|
|
85
89
|
isCompact: t.isCompact,
|
|
86
|
-
onChange: (e) =>
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
l.ResultOption,
|
|
90
|
+
onChange: (e) => b(e),
|
|
91
|
+
resultCountRow: S(u || []),
|
|
92
|
+
children: u?.map((e) => /* @__PURE__ */ n(
|
|
93
|
+
r.ResultOption,
|
|
91
94
|
{
|
|
92
|
-
ariaLabel: `${e.code}, ${e.name[
|
|
95
|
+
ariaLabel: `${e.code}, ${e.name[p]}`,
|
|
93
96
|
value: f(
|
|
94
97
|
g,
|
|
95
98
|
e.programmeType,
|
|
96
|
-
e.programmeCode,
|
|
99
|
+
e.programmeCode || "",
|
|
97
100
|
e.code
|
|
98
101
|
),
|
|
99
|
-
|
|
102
|
+
onSelect: R,
|
|
103
|
+
onEscape: () => o(null),
|
|
104
|
+
children: /* @__PURE__ */ E("div", { style: { display: "flex", gap: "1rem" }, children: [
|
|
100
105
|
/* @__PURE__ */ n("span", { children: e.code }),
|
|
101
|
-
/* @__PURE__ */ n("span", { style: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: e.name[
|
|
106
|
+
/* @__PURE__ */ n("span", { style: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: e.name[p] })
|
|
102
107
|
] })
|
|
103
108
|
},
|
|
104
109
|
e.id
|
|
105
110
|
))
|
|
106
111
|
}
|
|
107
112
|
) });
|
|
108
|
-
}, N =
|
|
113
|
+
}, N = T.bind({});
|
|
109
114
|
export {
|
|
110
115
|
N as InputExample,
|
|
111
116
|
M as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearcheField.stories.js","sources":["../../../src/components/SearchField/SearcheField.stories.tsx"],"sourcesContent":["import { useState } from 'react';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SearchFieldProps } from './SearchField';\r\n\r\nimport { SearchField } from './SearchField';\r\nimport { MOCK_DATA } from './mockData';\r\n\r\nconst codeString = `\r\n// Has all HTMLInputElement props available except \"className\" and \"style\" \r\n<SearchField \r\n id={string} \r\n queryLength?={number}\r\n placeholder?={string} \r\n isLoading?={boolean} \r\n isCompact?={boolean} \r\n onChange
|
|
1
|
+
{"version":3,"file":"SearcheField.stories.js","sources":["../../../src/components/SearchField/SearcheField.stories.tsx"],"sourcesContent":["import { useState } from 'react';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SearchFieldProps } from './SearchField';\r\n\r\nimport { SearchField } from './SearchField';\r\nimport { MOCK_DATA } from './mockData';\r\n\r\nconst codeString = `\r\n// Has all HTMLInputElement props available except \"className\" and \"style\" \r\n<SearchField \r\n id={string} \r\n queryLength?={number}\r\n placeholder?={string} \r\n isLoading?={boolean} \r\n isCompact?={boolean} \r\n onChange={function}\r\n children={ReactNode}\r\n resultCountRow?={ReactNode}\r\n>\r\n <SearchField.ResultOption \r\n onSelect={function} \r\n onEscape={function} \r\n value={string|number} \r\n key={string|number} \r\n ariaLabel={string}>\r\n {loop custom options here}\r\n </SearchField.ResultOption>\r\n</SearchField>`;\r\n\r\nconst MIN_QUERY_LENGTH = 4;\r\nconst MAX_RESULTS = 12;\r\nconst QUERY_SPEED = 1000; // ms\r\n\r\nenum ProgrammeType {\r\n DEGREE = 'degree-programme',\r\n CERTIFICATE = 'certificate-programme',\r\n ADMINISTRATIVE = 'administrative-programme',\r\n}\r\n\r\ninterface SearchResult {\r\n __typename: string;\r\n id: string;\r\n code: string;\r\n name: {\r\n EN: string;\r\n NL: string;\r\n };\r\n programmeType: string;\r\n programmeCode?: string;\r\n}\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Molecules/SearchField',\r\n component: SearchField,\r\n args: {},\r\n argTypes: {\r\n onSelect: {\r\n action: 'selected url',\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n onChange: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n children: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n id: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n resultCountRow: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n isCompact: {\r\n control: 'boolean',\r\n default: false,\r\n },\r\n },\r\n parameters: {\r\n inspectComponent: SearchField,\r\n codeString: codeString,\r\n },\r\n} as Meta<SearchFieldProps & { onSelect: (value: string | number) => void }>;\r\n\r\nconst Template: StoryFn<SearchFieldProps & { onSelect: (value: string | number) => void }> = (args) => {\r\n const [loading, setLoading] = useState(false);\r\n const [searchResults, setSearchResults] = useState<SearchResult[] | null>();\r\n const academicYear = '2026';\r\n const currentLanguage = 'NL';\r\n\r\n const createUrl = (\r\n academicYear: string,\r\n programmeType: keyof typeof ProgrammeType,\r\n programmeCode: string,\r\n code: string\r\n ) => `education-preparation/${ProgrammeType[programmeType]}/${academicYear}/${programmeCode}/${code}`;\r\n\r\n const searchInMockData = (query: string) => {\r\n if (query.length < MIN_QUERY_LENGTH) {\r\n setSearchResults(null);\r\n return;\r\n }\r\n setLoading(true);\r\n\r\n const lowerCaseQuery = query.toLowerCase();\r\n\r\n const mockResults = MOCK_DATA.filter(\r\n (item) => item.name.NL.toLowerCase().includes(lowerCaseQuery) || item.code.toLowerCase().includes(lowerCaseQuery)\r\n );\r\n\r\n setTimeout(() => {\r\n setSearchResults(mockResults);\r\n setLoading(false);\r\n }, QUERY_SPEED);\r\n };\r\n\r\n const getResultMessage = (results: SearchResult[]) => {\r\n if (results.length > MAX_RESULTS) {\r\n return `${results.length} resultaten gevonden, alleen de ${MAX_RESULTS} beste resultaten worden weergegeven.`;\r\n } else if (results.length > 0 && results.length <= MAX_RESULTS) {\r\n return `${results.length} resultaten gevonden.`;\r\n } else if (loading) {\r\n return 'Zoeken...';\r\n } else {\r\n return 'Geen resultaten gevonden.';\r\n }\r\n };\r\n\r\n const resultBar = (results: SearchResult[]) =>\r\n results ? (\r\n <div key={'result-count'} style={{ padding: '0.5rem 1rem', fontWeight: '600' }}>\r\n {getResultMessage(results)}\r\n </div>\r\n ) : null;\r\n\r\n const handleSelect = (value: string | number) => {\r\n setSearchResults(null);\r\n args.onSelect(value);\r\n };\r\n\r\n return (\r\n <div style={{ width: '20rem', display: 'flex', justifyContent: 'flex-end' }}>\r\n <SearchField\r\n placeholder=\"Zoek...\"\r\n id=\"search-field-1\"\r\n isLoading={loading}\r\n isCompact={args.isCompact}\r\n onChange={(event) => searchInMockData(event)}\r\n resultCountRow={resultBar(searchResults || [])}\r\n >\r\n {searchResults?.map((result) => (\r\n <SearchField.ResultOption\r\n key={result.id}\r\n ariaLabel={`${result.code}, ${result.name[currentLanguage]}`}\r\n value={createUrl(\r\n academicYear,\r\n result.programmeType as keyof typeof ProgrammeType,\r\n result.programmeCode || '',\r\n result.code\r\n )}\r\n onSelect={handleSelect}\r\n onEscape={() => setSearchResults(null)}\r\n >\r\n <div style={{ display: 'flex', gap: '1rem' }}>\r\n <span>{result.code}</span>\r\n <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>\r\n {result.name[currentLanguage]}\r\n </span>\r\n </div>\r\n </SearchField.ResultOption>\r\n ))}\r\n </SearchField>\r\n </div>\r\n );\r\n};\r\n\r\nexport const InputExample = Template.bind({});\r\n"],"names":["codeString","MIN_QUERY_LENGTH","MAX_RESULTS","QUERY_SPEED","ProgrammeType","SearcheField_stories","SearchField","Template","args","loading","setLoading","useState","searchResults","setSearchResults","academicYear","currentLanguage","createUrl","programmeType","programmeCode","code","searchInMockData","query","lowerCaseQuery","mockResults","MOCK_DATA","item","getResultMessage","results","resultBar","jsx","handleSelect","value","event","result","jsxs","InputExample"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as o, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as a, Fragment as i } from "react";
|
|
3
|
-
import { s } from "../../../SearchField.module-
|
|
3
|
+
import { s } from "../../../SearchField.module-Be9ZoU-6.js";
|
|
4
4
|
const m = a(({ children: t, resultCountRow: e }, l) => /* @__PURE__ */ o("div", { className: s["search-field__result-wrapper"], ref: l, children: [
|
|
5
5
|
/* @__PURE__ */ r("ul", { className: s["search-field__result-list"], role: "listbox", tabIndex: -1, children: t }),
|
|
6
6
|
e && /* @__PURE__ */ r(i, { children: e }, "result-count")
|
|
@@ -4,6 +4,8 @@ export interface ResultOptionProps {
|
|
|
4
4
|
key: string | number;
|
|
5
5
|
ariaLabel: string;
|
|
6
6
|
children: ReactNode;
|
|
7
|
-
|
|
7
|
+
onEscape: () => void;
|
|
8
|
+
onReset?: () => void;
|
|
9
|
+
onSelect: (value: string | number) => void;
|
|
8
10
|
}
|
|
9
|
-
export declare const ResultOption: ({ value, key, children, onSelect,
|
|
11
|
+
export declare const ResultOption: ({ value, key, ariaLabel, children, onSelect, onReset, onEscape }: ResultOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,37 +1,56 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { s as c } from "../../../SearchField.module-
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
e.stopPropagation(), r &&
|
|
6
|
-
},
|
|
1
|
+
import { jsx as b } from "react/jsx-runtime";
|
|
2
|
+
import { s as c } from "../../../SearchField.module-Be9ZoU-6.js";
|
|
3
|
+
const m = ({ value: o, key: i, ariaLabel: n, children: s, onSelect: p, onReset: a, onEscape: r }) => {
|
|
4
|
+
const l = (e) => {
|
|
5
|
+
e.stopPropagation(), r(), a && a(), p(o);
|
|
6
|
+
}, u = (e) => {
|
|
7
7
|
switch (e.key) {
|
|
8
|
+
case "Escape":
|
|
9
|
+
e.preventDefault(), e.stopPropagation(), r();
|
|
10
|
+
break;
|
|
8
11
|
case "Enter":
|
|
9
|
-
e.preventDefault(),
|
|
12
|
+
e.preventDefault(), l(e);
|
|
13
|
+
break;
|
|
14
|
+
case "ArrowDown": {
|
|
15
|
+
e.preventDefault(), e.stopPropagation();
|
|
16
|
+
let t = e.currentTarget.nextElementSibling;
|
|
17
|
+
for (; t?.getAttribute("tabindex") === "-1"; )
|
|
18
|
+
t = t.nextElementSibling;
|
|
19
|
+
t?.focus();
|
|
20
|
+
break;
|
|
21
|
+
}
|
|
22
|
+
case "ArrowUp": {
|
|
23
|
+
e.preventDefault(), e.stopPropagation();
|
|
24
|
+
let t = e.currentTarget.previousElementSibling;
|
|
25
|
+
for (; t?.getAttribute("tabindex") === "-1"; )
|
|
26
|
+
t = t.previousElementSibling;
|
|
27
|
+
t?.focus();
|
|
10
28
|
break;
|
|
11
|
-
|
|
12
|
-
|
|
29
|
+
}
|
|
30
|
+
case "Tab":
|
|
31
|
+
e.preventDefault(), r();
|
|
13
32
|
break;
|
|
14
|
-
|
|
15
|
-
e.preventDefault()
|
|
33
|
+
default:
|
|
34
|
+
e.preventDefault();
|
|
16
35
|
break;
|
|
17
36
|
}
|
|
18
37
|
};
|
|
19
|
-
return /* @__PURE__ */
|
|
38
|
+
return /* @__PURE__ */ b(
|
|
20
39
|
"li",
|
|
21
40
|
{
|
|
22
41
|
className: c["search-field__result-item"],
|
|
23
|
-
onClick:
|
|
24
|
-
onKeyDown:
|
|
42
|
+
onClick: l,
|
|
43
|
+
onKeyDown: u,
|
|
25
44
|
role: "option",
|
|
26
45
|
"aria-selected": "false",
|
|
27
46
|
tabIndex: 0,
|
|
28
|
-
"aria-label":
|
|
47
|
+
"aria-label": n,
|
|
29
48
|
children: s
|
|
30
49
|
},
|
|
31
|
-
|
|
50
|
+
i
|
|
32
51
|
);
|
|
33
52
|
};
|
|
34
53
|
export {
|
|
35
|
-
|
|
54
|
+
m as ResultOption
|
|
36
55
|
};
|
|
37
56
|
//# sourceMappingURL=ResultsOption.js.map
|
|
@@ -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
|
|
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;AACA;AAAA,MACF,KAAK;AACH,QAAAE,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;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const MOCK_DATA: {
|
|
1
|
+
export declare const MOCK_DATA: ({
|
|
2
2
|
__typename: string;
|
|
3
3
|
code: string;
|
|
4
4
|
id: string;
|
|
@@ -8,4 +8,14 @@ export declare const MOCK_DATA: {
|
|
|
8
8
|
};
|
|
9
9
|
programmeType: string;
|
|
10
10
|
programmeCode: string;
|
|
11
|
-
}
|
|
11
|
+
} | {
|
|
12
|
+
__typename: string;
|
|
13
|
+
code: string;
|
|
14
|
+
id: string;
|
|
15
|
+
name: {
|
|
16
|
+
EN: string;
|
|
17
|
+
NL: string;
|
|
18
|
+
};
|
|
19
|
+
programmeType: string;
|
|
20
|
+
programmeCode?: undefined;
|
|
21
|
+
})[];
|