@uva-glass/component-library 3.45.1 → 3.45.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.
Files changed (14) hide show
  1. package/dist/SearchField.module-B44YRRrn.js +17 -0
  2. package/dist/SearchField.module-B44YRRrn.js.map +1 -0
  3. package/dist/assets/SearchField.css +1 -1
  4. package/dist/components/SearchField/SearchField.js +32 -29
  5. package/dist/components/SearchField/SearchField.js.map +1 -1
  6. package/dist/components/SearchField/SearcheField.stories.js +19 -19
  7. package/dist/components/SearchField/SearcheField.stories.js.map +1 -1
  8. package/dist/components/SearchField/components/ResultOptionBox.d.ts +2 -2
  9. package/dist/components/SearchField/components/ResultOptionBox.js +9 -8
  10. package/dist/components/SearchField/components/ResultOptionBox.js.map +1 -1
  11. package/dist/components/SearchField/components/ResultsOption.js +1 -1
  12. package/package.json +3 -3
  13. package/dist/SearchField.module-OI1uPUjC.js +0 -17
  14. package/dist/SearchField.module-OI1uPUjC.js.map +0 -1
package/dist/SearchField.module-B44YRRrn.js ADDED
@@ -0,0 +1,17 @@
1
+ import './assets/SearchField.css';const _ = {
2
+ "search-field__input-wrapper": "_search-field__input-wrapper_x2i41_1",
3
+ "search-field__input-field": "_search-field__input-field_x2i41_8",
4
+ "search-field__icon": "_search-field__icon_x2i41_35",
5
+ "search-field__result-wrapper": "_search-field__result-wrapper_x2i41_43",
6
+ "search-field__input-container": "_search-field__input-container_x2i41_58",
7
+ "search-field__input-container--hidden": "_search-field__input-container--hidden_x2i41_63",
8
+ "search-field__input-container--visible": "_search-field__input-container--visible_x2i41_67",
9
+ "search-field__compact-button": "_search-field__compact-button_x2i41_77",
10
+ "search-field__compact-icon": "_search-field__compact-icon_x2i41_94",
11
+ "search-field__result-list": "_search-field__result-list_x2i41_98",
12
+ "search-field__result-item": "_search-field__result-item_x2i41_111"
13
+ };
14
+ export {
15
+ _ as s
16
+ };
17
+ //# sourceMappingURL=SearchField.module-B44YRRrn.js.map
package/dist/SearchField.module-B44YRRrn.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SearchField.module-B44YRRrn.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
package/dist/assets/SearchField.css CHANGED
@@ -1 +1 @@
1
- ._search-field__input-wrapper_459nc_1{display:flex;justify-content:flex-end;position:relative;width:100%}._search-field__input-field_459nc_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.5rem;margin:0;padding:0 2.75rem 0 1rem;text-align:inherit;width:100%}._search-field__input-field_459nc_8::placeholder{color:var(--new-color-grey-700);font-size:inherit;opacity:1}._search-field__input-field_459nc_8:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._search-field__icon_459nc_35{color:var(--new-color-grey-700);position:absolute;right:.5rem;top:50%;transform:translateY(-50%)}._search-field__result-wrapper_459nc_43{background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-400);border-radius:.25rem;display:flex;flex-direction:column;left:0;min-width:100%;overflow:hidden;position:absolute;top:calc(100% + .25rem);z-index:10}._search-field__input-container_459nc_57{position:relative;width:100%}._search-field__input-container--hidden_459nc_62{display:none}._search-field__input-container--visible_459nc_66{display:block;max-width:20rem;position:absolute;right:0;top:0;width:20rem;z-index:10}._search-field__compact-button_459nc_76{align-items:center;appearance:none;background-color:transparent;border:1px solid var(--new-color-grey-400);border-radius:.25rem;color:var(--new-color-uva-black);cursor:pointer;display:flex;height:2.5rem;justify-content:center;margin:0;text-align:inherit;width:2.5rem}._search-field__compact-icon_459nc_92{color:var(--new-color-grey-700)}._search-field__result-list_459nc_96{border-bottom:1px solid var(--new-color-grey-400);list-style:none;margin:0;max-height:10rem;overflow-y:auto;padding:0}._search-field__result-list_459nc_96:empty{display:none}._search-field__result-item_459nc_109{font-size:inherit;max-width:100%;padding:.5rem 1rem;white-space:nowrap}._search-field__result-item_459nc_109:focus-visible{background-color:var(--new-color-grey-300);outline:none}._search-field__result-item_459nc_109:hover,._search-field__result-item_459nc_109:focus-visible{background-color:var(--new-color-grey-300);cursor:pointer}._search-field__result-info_459nc_127{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
+ ._search-field__input-wrapper_x2i41_1{display:flex;justify-content:flex-end;position:relative;width:100%}._search-field__input-field_x2i41_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_x2i41_8::placeholder{color:var(--new-color-grey-700);font-size:inherit;opacity:1}._search-field__input-field_x2i41_8:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._search-field__icon_x2i41_35{color:var(--new-color-grey-700);position:absolute;right:.5rem;top:50%;transform:translateY(-50%)}._search-field__result-wrapper_x2i41_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;max-width:13.75rem;min-width:100%;overflow:hidden;position:absolute;top:calc(100% + .25rem);z-index:10}._search-field__input-container_x2i41_58{position:relative;width:100%}._search-field__input-container--hidden_x2i41_63{display:none}._search-field__input-container--visible_x2i41_67{display:block;max-width:13.75rem;min-width:100%;position:absolute;right:0;top:0;z-index:10}._search-field__compact-button_x2i41_77{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_x2i41_94{color:var(--new-color-grey-700)}._search-field__result-list_x2i41_98{border-bottom:1px solid var(--new-color-grey-700);list-style:none;margin:0;max-height:11.5rem;overflow-y:auto;padding:0}._search-field__result-list_x2i41_98:empty{display:none}._search-field__result-item_x2i41_111{font-size:inherit;max-width:100%;padding:.5rem 1rem;white-space:nowrap}._search-field__result-item_x2i41_111:focus-visible{background-color:var(--new-color-grey-300);outline:none}._search-field__result-item_x2i41_111:hover,._search-field__result-item_x2i41_111:focus-visible{background-color:var(--new-color-grey-300);cursor:pointer}._search-field__result-info_x2i41_129{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}
package/dist/components/SearchField/SearchField.js CHANGED
@@ -1,76 +1,79 @@
1
- import { jsxs as h, jsx as r } from "react/jsx-runtime";
2
- import { useRef as y, useState as N, useEffect as R, Children as l, isValidElement as v, cloneElement as S } from "react";
1
+ import { jsxs as _, jsx as n } from "react/jsx-runtime";
2
+ import { useRef as b, useState as R, useEffect as v, Children as l, isValidElement as S, cloneElement as D } from "react";
3
3
  import { c as F } from "../../clsx-OuTLNxxd.js";
4
- import { ResultOption as w } from "./components/ResultsOption.js";
5
- import { s as t } from "../../SearchField.module-OI1uPUjC.js";
4
+ import { ResultOption as k } from "./components/ResultsOption.js";
5
+ import { s as t } from "../../SearchField.module-B44YRRrn.js";
6
6
  import { ResultOptionBox as E } from "./components/ResultOptionBox.js";
7
- import { Icon as _ } from "../Icon/Icon.js";
7
+ import { Icon as g } from "../Icon/Icon.js";
8
8
  const O = ({
9
9
  id: s,
10
- placeholder: i,
10
+ placeholder: o,
11
11
  isLoading: c = !1,
12
- isCompact: n,
12
+ isCompact: r,
13
13
  onChange: u,
14
14
  onSelect: f,
15
15
  children: a,
16
- resultCountRow: m
16
+ resultCountRow: p
17
17
  }) => {
18
- const o = y(null), [p, d] = N(!1), b = (e) => {
18
+ const i = b(null), [m, d] = R(!1), h = b(null), x = (e) => {
19
19
  u && u(e.target.value);
20
- }, g = (e) => {
21
- o.current && (o.current.value = ""), f && f(e);
20
+ }, y = (e) => {
21
+ i.current && (i.current.value = ""), f && f(e);
22
+ }, N = (e) => {
23
+ e.key === "ArrowDown" && (e.preventDefault(), h.current?.childNodes[0]?.childNodes[0]?.focus());
22
24
  };
23
- return R(() => {
25
+ return v(() => {
24
26
  l.count(a) || d(!1);
25
- }, [a]), /* @__PURE__ */ h("div", { className: t["search-field__input-wrapper"], children: [
26
- n && /* @__PURE__ */ r(
27
+ }, [a]), /* @__PURE__ */ _("div", { className: t["search-field__input-wrapper"], children: [
28
+ r && /* @__PURE__ */ n(
27
29
  "button",
28
30
  {
29
31
  type: "button",
30
32
  className: t["search-field__compact-button"],
31
33
  onClick: () => d(!0),
32
- "aria-label": i,
33
- children: /* @__PURE__ */ r(_, { name: "Magnify", className: t["search-field__compact-icon"], "aria-hidden": "true" })
34
+ "aria-label": o,
35
+ children: /* @__PURE__ */ n(g, { name: "Magnify", className: t["search-field__compact-icon"], "aria-hidden": "true" })
34
36
  }
35
37
  ),
36
- /* @__PURE__ */ h(
38
+ /* @__PURE__ */ _(
37
39
  "div",
38
40
  {
39
41
  className: F(t["search-field__input-container"], {
40
- [t["search-field__input-container--hidden"]]: n && !p,
41
- [t["search-field__input-container--visible"]]: n && p
42
+ [t["search-field__input-container--hidden"]]: r && !m,
43
+ [t["search-field__input-container--visible"]]: r && m
42
44
  }),
43
45
  children: [
44
- /* @__PURE__ */ r(_, { name: "Magnify", className: t["search-field__icon"], "aria-hidden": "true" }),
45
- /* @__PURE__ */ r(
46
+ /* @__PURE__ */ n(g, { name: "Magnify", className: t["search-field__icon"], "aria-hidden": "true" }),
47
+ /* @__PURE__ */ n(
46
48
  "input",
47
49
  {
48
50
  type: "text",
49
51
  className: t["search-field__input-field"],
50
- placeholder: i,
52
+ placeholder: o,
51
53
  id: s,
52
- onChange: b,
54
+ onChange: x,
53
55
  onFocus: (e) => e.target.setSelectionRange(e.target.value.length, e.target.value.length),
56
+ onKeyDown: N,
54
57
  role: "combobox",
55
58
  "aria-expanded": !!l.count(a) || c,
56
59
  "aria-controls": `${s}-results`,
57
60
  "aria-autocomplete": "list",
58
61
  "aria-haspopup": "listbox",
59
- "aria-label": i,
62
+ "aria-label": o,
60
63
  autoComplete: "off",
61
- ref: o
64
+ ref: i
62
65
  }
63
66
  )
64
67
  ]
65
68
  }
66
69
  ),
67
- (a || c) && /* @__PURE__ */ r(E, { resultCountRow: m || null, children: l.map(a, (e, x) => v(e) ? S(e, {
68
- key: x,
69
- onSelect: g
70
+ (a || c) && /* @__PURE__ */ n(E, { resultCountRow: p || null, ref: h, children: l.map(a, (e, w) => S(e) ? D(e, {
71
+ key: w,
72
+ onSelect: y
70
73
  }) : e) })
71
74
  ] });
72
75
  };
73
- O.ResultOption = w;
76
+ O.ResultOption = k;
74
77
  export {
75
78
  O as SearchField
76
79
  };
package/dist/components/SearchField/SearchField.js.map CHANGED
@@ -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 { ChangeEvent, ReactNode } 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\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 /** Callback function triggered when a result is selected. */\r\n onSelect?: (selectedValue: string | number) => 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 onSelect,\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\r\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\r\n if (onChange) {\r\n onChange(event.target.value);\r\n }\r\n };\r\n\r\n const handleSelect = (selectedValue: string | number) => {\r\n if (inputRef.current) {\r\n inputRef.current.value = '';\r\n }\r\n if (onSelect) onSelect(selectedValue);\r\n };\r\n useEffect(() => {\r\n if (!Children.count(children)) {\r\n setShowField(false);\r\n }\r\n }, [children]);\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={handleChange}\r\n onFocus={(event) => event.target.setSelectionRange(event.target.value.length, event.target.value.length)}\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}>\r\n {Children.map(children, (child, index) => {\r\n if (isValidElement<ResultOptionProps>(child)) {\r\n return cloneElement(child, {\r\n key: index,\r\n onSelect: handleSelect,\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","onSelect","children","resultCountRow","inputRef","useRef","showField","setShowField","useState","handleChange","event","handleSelect","selectedValue","useEffect","Children","jsxs","styles","jsx","Icon","clsx","ResultOptionBox","child","index","isValidElement","cloneElement","ResultOption"],"mappings":";;;;;;;AA+BO,MAAMA,IAAc,CAAC;AAAA,EAC1B,IAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AACF,MAAwB;AACtB,QAAMC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAWC,CAAY,IAAIC,EAAkB,EAAK,GAEnDC,IAAe,CAACC,MAAyC;AAC7D,IAAIV,KACFA,EAASU,EAAM,OAAO,KAAK;AAAA,EAE/B,GAEMC,IAAe,CAACC,MAAmC;AACvD,IAAIR,EAAS,YACXA,EAAS,QAAQ,QAAQ,KAEvBH,OAAmBW,CAAa;AAAA,EACtC;AACA,SAAAC,EAAU,MAAM;AACd,IAAKC,EAAS,MAAMZ,CAAQ,KAC1BK,EAAa,EAAK;AAAA,EAEtB,GAAG,CAACL,CAAQ,CAAC,GAGX,gBAAAa,EAAC,OAAA,EAAI,WAAWC,EAAO,6BAA6B,GACjD,UAAA;AAAA,IAAAjB,KACC,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWD,EAAO,8BAA8B;AAAA,QAChD,SAAS,MAAMT,EAAa,EAAI;AAAA,QAChC,cAAYV;AAAA,QAEZ,UAAA,gBAAAoB,EAACC,KAAK,MAAK,WAAU,WAAWF,EAAO,4BAA4B,GAAG,eAAY,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAG7F,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWI,EAAKH,EAAO,+BAA+B,GAAG;AAAA,UACvD,CAACA,EAAO,uCAAuC,CAAC,GAAGjB,KAAa,CAACO;AAAA,UACjE,CAACU,EAAO,wCAAwC,CAAC,GAAGjB,KAAaO;AAAA,QAAA,CAClE;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAW,EAACC,GAAA,EAAK,MAAK,WAAU,WAAWF,EAAO,oBAAoB,GAAG,eAAY,QAAO;AAAA,UACjF,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWD,EAAO,2BAA2B;AAAA,cAC7C,aAAAnB;AAAA,cACA,IAAAD;AAAA,cACA,UAAUa;AAAA,cACV,SAAS,CAACC,MAAUA,EAAM,OAAO,kBAAkBA,EAAM,OAAO,MAAM,QAAQA,EAAM,OAAO,MAAM,MAAM;AAAA,cACvG,MAAK;AAAA,cACL,iBAAe,EAAQI,EAAS,MAAMZ,CAAQ,KAAMJ;AAAA,cACpD,iBAAe,GAAGF,CAAE;AAAA,cACpB,qBAAkB;AAAA,cAClB,iBAAc;AAAA,cACd,cAAYC;AAAA,cACZ,cAAa;AAAA,cACb,KAAKO;AAAA,YAAA;AAAA,UAAA;AAAA,QACP;AAAA,MAAA;AAAA,IAAA;AAAA,KAEAF,KAAYJ,MACZ,gBAAAmB,EAACG,GAAA,EAAgB,gBAAgBjB,KAAkC,MAChE,UAAAW,EAAS,IAAIZ,GAAU,CAACmB,GAAOC,MAC1BC,EAAkCF,CAAK,IAClCG,EAAaH,GAAO;AAAA,MACzB,KAAKC;AAAA,MACL,UAAUX;AAAA,IAAA,CACX,IAEIU,CACR,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAEA1B,EAAY,eAAe8B;"}
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 { ChangeEvent, KeyboardEvent, ReactNode } 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\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 /** Callback function triggered when a result is selected. */\r\n onSelect?: (selectedValue: string | number) => 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 onSelect,\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 handleChange = (event: ChangeEvent<HTMLInputElement>) => {\r\n if (onChange) {\r\n onChange(event.target.value);\r\n }\r\n };\r\n\r\n const handleSelect = (selectedValue: string | number) => {\r\n if (inputRef.current) {\r\n inputRef.current.value = '';\r\n }\r\n if (onSelect) onSelect(selectedValue);\r\n };\r\n\r\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n if (event.key === 'ArrowDown') {\r\n event.preventDefault();\r\n (optionListRef.current?.childNodes[0]?.childNodes[0] as HTMLElement)?.focus();\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 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={handleChange}\r\n onFocus={(event) => event.target.setSelectionRange(event.target.value.length, event.target.value.length)}\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 onSelect: handleSelect,\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","onSelect","children","resultCountRow","inputRef","useRef","showField","setShowField","useState","optionListRef","handleChange","event","handleSelect","selectedValue","handleKeyDown","useEffect","Children","jsxs","styles","jsx","Icon","clsx","ResultOptionBox","child","index","isValidElement","cloneElement","ResultOption"],"mappings":";;;;;;;AA+BO,MAAMA,IAAc,CAAC;AAAA,EAC1B,IAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AACF,MAAwB;AACtB,QAAMC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAWC,CAAY,IAAIC,EAAkB,EAAK,GACnDC,IAAgBJ,EAAuB,IAAI,GAE3CK,IAAe,CAACC,MAAyC;AAC7D,IAAIX,KACFA,EAASW,EAAM,OAAO,KAAK;AAAA,EAE/B,GAEMC,IAAe,CAACC,MAAmC;AACvD,IAAIT,EAAS,YACXA,EAAS,QAAQ,QAAQ,KAEvBH,OAAmBY,CAAa;AAAA,EACtC,GAEMC,IAAgB,CAACH,MAA2C;AAChE,IAAIA,EAAM,QAAQ,gBAChBA,EAAM,eAAA,GACLF,EAAc,SAAS,WAAW,CAAC,GAAG,WAAW,CAAC,GAAmB,MAAA;AAAA,EAE1E;AAEA,SAAAM,EAAU,MAAM;AACd,IAAKC,EAAS,MAAMd,CAAQ,KAC1BK,EAAa,EAAK;AAAA,EAEtB,GAAG,CAACL,CAAQ,CAAC,GAGX,gBAAAe,EAAC,OAAA,EAAI,WAAWC,EAAO,6BAA6B,GACjD,UAAA;AAAA,IAAAnB,KACC,gBAAAoB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWD,EAAO,8BAA8B;AAAA,QAChD,SAAS,MAAMX,EAAa,EAAI;AAAA,QAChC,cAAYV;AAAA,QAEZ,UAAA,gBAAAsB,EAACC,KAAK,MAAK,WAAU,WAAWF,EAAO,4BAA4B,GAAG,eAAY,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAG7F,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWI,EAAKH,EAAO,+BAA+B,GAAG;AAAA,UACvD,CAACA,EAAO,uCAAuC,CAAC,GAAGnB,KAAa,CAACO;AAAA,UACjE,CAACY,EAAO,wCAAwC,CAAC,GAAGnB,KAAaO;AAAA,QAAA,CAClE;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAa,EAACC,GAAA,EAAK,MAAK,WAAU,WAAWF,EAAO,oBAAoB,GAAG,eAAY,QAAO;AAAA,UACjF,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWD,EAAO,2BAA2B;AAAA,cAC7C,aAAArB;AAAA,cACA,IAAAD;AAAA,cACA,UAAUc;AAAA,cACV,SAAS,CAACC,MAAUA,EAAM,OAAO,kBAAkBA,EAAM,OAAO,MAAM,QAAQA,EAAM,OAAO,MAAM,MAAM;AAAA,cACvG,WAAWG;AAAA,cACX,MAAK;AAAA,cACL,iBAAe,EAAQE,EAAS,MAAMd,CAAQ,KAAMJ;AAAA,cACpD,iBAAe,GAAGF,CAAE;AAAA,cACpB,qBAAkB;AAAA,cAClB,iBAAc;AAAA,cACd,cAAYC;AAAA,cACZ,cAAa;AAAA,cACb,KAAKO;AAAA,YAAA;AAAA,UAAA;AAAA,QACP;AAAA,MAAA;AAAA,IAAA;AAAA,KAEAF,KAAYJ,MACZ,gBAAAqB,EAACG,GAAA,EAAgB,gBAAgBnB,KAAkC,MAAM,KAAKM,GAC3E,UAAAO,EAAS,IAAId,GAAU,CAACqB,GAAOC,MAC1BC,EAAkCF,CAAK,IAClCG,EAAaH,GAAO;AAAA,MACzB,KAAKC;AAAA,MACL,UAAUZ;AAAA,IAAA,CACX,IAEIW,CACR,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAEA5B,EAAY,eAAegC;"}
package/dist/components/SearchField/SearcheField.stories.js CHANGED
@@ -1,8 +1,8 @@
1
- import { jsx as n, jsxs as E } from "react/jsx-runtime";
2
- import { useState as m } from "react";
1
+ import { jsx as n, jsxs as w } from "react/jsx-runtime";
2
+ import { useState as h } from "react";
3
3
  import { SearchField as l } from "./SearchField.js";
4
- import { MOCK_DATA as L } from "./mockData.js";
5
- const v = `
4
+ import { MOCK_DATA as E } from "./mockData.js";
5
+ const L = `
6
6
  // Has all HTMLInputElement props available except "className" and "style"
7
7
  <SearchField
8
8
  id={string}
@@ -18,8 +18,8 @@ const v = `
18
18
  <SearchField.ResultOption>
19
19
  {loop custom options here}
20
20
  </SearchField.ResultOption>
21
- </SearchField>`, w = 4, c = 12, T = 1e3;
22
- var h = /* @__PURE__ */ ((t) => (t.DEGREE = "degree-programme", t.CERTIFICATE = "certificate-programme", t.ADMINISTRATIVE = "administrative-programme", t))(h || {});
21
+ </SearchField>`, v = 4, i = 12, T = 1e3;
22
+ var m = /* @__PURE__ */ ((t) => (t.DEGREE = "degree-programme", t.CERTIFICATE = "certificate-programme", t.ADMINISTRATIVE = "administrative-programme", t))(m || {});
23
23
  const M = {
24
24
  title: "Molecules/SearchField",
25
25
  component: l,
@@ -58,22 +58,22 @@ const M = {
58
58
  },
59
59
  parameters: {
60
60
  inspectComponent: l,
61
- codeString: v
61
+ codeString: L
62
62
  }
63
- }, I = (t) => {
64
- const [i, d] = m(!1), [u, r] = m(), g = "2026", p = "NL", f = (e, o, s, a) => `education-preparation/${h[o]}/${e}/${s}/${a}`, C = (e) => {
65
- if (e.length < w) {
63
+ }, x = (t) => {
64
+ const [c, d] = h(!1), [p, r] = h(), g = "2026", u = "NL", f = (e, o, s, a) => `education-preparation/${m[o]}/${e}/${s}/${a}`, C = (e) => {
65
+ if (e.length < v) {
66
66
  r(null);
67
67
  return;
68
68
  }
69
69
  d(!0);
70
- const o = e.toLowerCase(), s = L.filter(
70
+ const o = e.toLowerCase(), s = E.filter(
71
71
  (a) => a.name.NL.toLowerCase().includes(o) || a.code.toLowerCase().includes(o)
72
72
  );
73
73
  setTimeout(() => {
74
74
  r(s), d(!1);
75
75
  }, T);
76
- }, S = (e) => e.length > c ? `${e.length} resultaten gevonden, alleen de ${c} beste resultaten worden weergegeven.` : e.length > 0 && e.length <= c ? `${e.length} resultaten gevonden.` : i ? "Zoeken..." : "Geen resultaten gevonden.", b = (e) => e ? /* @__PURE__ */ n("div", { style: { padding: "0.5rem 1rem" }, children: S(e) }, "result-count") : null, R = (e) => {
76
+ }, S = (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.", b = (e) => e ? /* @__PURE__ */ n("div", { style: { padding: "0.5rem 1rem", fontWeight: "600" }, children: S(e) }, "result-count") : null, R = (e) => {
77
77
  r(null), t.onSelect?.(e);
78
78
  };
79
79
  return /* @__PURE__ */ n("div", { style: { width: "20rem", display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ n(
@@ -81,31 +81,31 @@ const M = {
81
81
  {
82
82
  placeholder: "Zoek...",
83
83
  id: "search-field-1",
84
- isLoading: i,
84
+ isLoading: c,
85
85
  isCompact: t.isCompact,
86
86
  onChange: (e) => C(e),
87
87
  onSelect: (e) => R(e),
88
- resultCountRow: b(u || []),
89
- children: u?.map((e) => /* @__PURE__ */ n(
88
+ resultCountRow: b(p || []),
89
+ children: p?.map((e) => /* @__PURE__ */ n(
90
90
  l.ResultOption,
91
91
  {
92
- ariaLabel: `${e.code}, ${e.name[p]}`,
92
+ ariaLabel: `${e.code}, ${e.name[u]}`,
93
93
  value: f(
94
94
  g,
95
95
  e.programmeType,
96
96
  e.programmeCode,
97
97
  e.code
98
98
  ),
99
- children: /* @__PURE__ */ E("div", { style: { display: "flex", gap: "1rem" }, children: [
99
+ children: /* @__PURE__ */ w("div", { style: { display: "flex", gap: "1rem" }, children: [
100
100
  /* @__PURE__ */ n("span", { children: e.code }),
101
- /* @__PURE__ */ n("span", { children: e.name[p] })
101
+ /* @__PURE__ */ n("span", { style: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: e.name[u] })
102
102
  ] })
103
103
  },
104
104
  e.id
105
105
  ))
106
106
  }
107
107
  ) });
108
- }, N = I.bind({});
108
+ }, N = x.bind({});
109
109
  export {
110
110
  N as InputExample,
111
111
  M as default
package/dist/components/SearchField/SearcheField.stories.js.map CHANGED
@@ -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?={function}\r\n onSelect?={function}\r\n children={ReactNode}\r\n resultCountRow?={ReactNode}\r\n>\r\n <SearchField.ResultOption>\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>;\r\n\r\nconst Template: StoryFn<SearchFieldProps> = (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' }}>\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 onSelect={(event) => handleSelect(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 >\r\n <div style={{ display: 'flex', gap: '1rem' }}>\r\n <span>{result.code}</span>\r\n <span>{result.name[currentLanguage]}</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","handleSelect","value","jsx","event","result","jsxs","InputExample"],"mappings":"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"}
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 onSelect?={function}\r\n children={ReactNode}\r\n resultCountRow?={ReactNode}\r\n>\r\n <SearchField.ResultOption>\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>;\r\n\r\nconst Template: StoryFn<SearchFieldProps> = (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 onSelect={(event) => handleSelect(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 >\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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"}
package/dist/components/SearchField/components/ResultOptionBox.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { PropsWithChildren, ReactNode } from 'react';
1
+ import { ReactNode } from 'react';
2
2
  export interface ResultOptionBoxProps {
3
3
  children: ReactNode;
4
4
  resultCountRow?: ReactNode;
5
5
  }
6
- export declare const ResultOptionBox: ({ children, resultCountRow }: PropsWithChildren<ResultOptionBoxProps>) => import("react/jsx-runtime").JSX.Element;
6
+ export declare const ResultOptionBox: import('react').ForwardRefExoticComponent<ResultOptionBoxProps & import('react').RefAttributes<HTMLDivElement>>;
package/dist/components/SearchField/components/ResultOptionBox.js CHANGED
@@ -1,11 +1,12 @@
1
- import { jsxs as l, jsx as s } from "react/jsx-runtime";
2
- import { Fragment as i } from "react";
3
- import { s as e } from "../../../SearchField.module-OI1uPUjC.js";
4
- const c = ({ children: t, resultCountRow: r }) => /* @__PURE__ */ l("div", { className: e["search-field__result-wrapper"], children: [
5
- /* @__PURE__ */ s("ul", { className: e["search-field__result-list"], role: "listbox", tabIndex: -1, children: t }),
6
- r && /* @__PURE__ */ s(i, { children: r }, "result-count")
7
- ] });
1
+ import { jsxs as o, jsx as r } from "react/jsx-runtime";
2
+ import { forwardRef as a, Fragment as i } from "react";
3
+ import { s } from "../../../SearchField.module-B44YRRrn.js";
4
+ const m = a(({ children: t, resultCountRow: e }, l) => /* @__PURE__ */ o("div", { className: s["search-field__result-wrapper"], ref: l, children: [
5
+ /* @__PURE__ */ r("ul", { className: s["search-field__result-list"], role: "listbox", tabIndex: -1, children: t }),
6
+ e && /* @__PURE__ */ r(i, { children: e }, "result-count")
7
+ ] }));
8
+ m.displayName = "ResultOptionBox";
8
9
  export {
9
- c as ResultOptionBox
10
+ m as ResultOptionBox
10
11
  };
11
12
  //# sourceMappingURL=ResultOptionBox.js.map
package/dist/components/SearchField/components/ResultOptionBox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ResultOptionBox.js","sources":["../../../../src/components/SearchField/components/ResultOptionBox.tsx"],"sourcesContent":["import { Fragment, type PropsWithChildren, type ReactNode } from 'react';\r\n\r\nimport styles from 'components/SearchField/SearchField.module.css';\r\n\r\nexport interface ResultOptionBoxProps {\r\n children: ReactNode;\r\n resultCountRow?: ReactNode;\r\n}\r\n\r\nexport const ResultOptionBox = ({ children, resultCountRow }: PropsWithChildren<ResultOptionBoxProps>) => {\r\n return (\r\n <div className={styles['search-field__result-wrapper']}>\r\n <ul className={styles['search-field__result-list']} role=\"listbox\" tabIndex={-1}>\r\n {children}\r\n </ul>\r\n {resultCountRow && <Fragment key=\"result-count\">{resultCountRow}</Fragment>}\r\n </div>\r\n );\r\n};\r\n"],"names":["ResultOptionBox","children","resultCountRow","jsxs","styles","jsx","Fragment"],"mappings":";;;AASO,MAAMA,IAAkB,CAAC,EAAE,UAAAC,GAAU,gBAAAC,QAExC,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,8BAA8B,GACnD,UAAA;AAAA,EAAA,gBAAAC,EAAC,MAAA,EAAG,WAAWD,EAAO,2BAA2B,GAAG,MAAK,WAAU,UAAU,IAC1E,UAAAH,EAAA,CACH;AAAA,EACCC,KAAkB,gBAAAG,EAACC,GAAA,EAA6B,UAAAJ,EAAA,GAAhB,cAA+B;AAAA,GAClE;"}
1
+ {"version":3,"file":"ResultOptionBox.js","sources":["../../../../src/components/SearchField/components/ResultOptionBox.tsx"],"sourcesContent":["import { Fragment, forwardRef } from 'react';\r\n\r\nimport type { ReactNode } from 'react';\r\n\r\nimport styles from 'components/SearchField/SearchField.module.css';\r\nexport interface ResultOptionBoxProps {\r\n children: ReactNode;\r\n resultCountRow?: ReactNode;\r\n}\r\n\r\nexport const ResultOptionBox = forwardRef<HTMLDivElement, ResultOptionBoxProps>(({ children, resultCountRow }, ref) => {\r\n return (\r\n <div className={styles['search-field__result-wrapper']} ref={ref}>\r\n <ul className={styles['search-field__result-list']} role=\"listbox\" tabIndex={-1}>\r\n {children}\r\n </ul>\r\n {resultCountRow && <Fragment key=\"result-count\">{resultCountRow}</Fragment>}\r\n </div>\r\n );\r\n});\r\n\r\nResultOptionBox.displayName = 'ResultOptionBox';\r\n"],"names":["ResultOptionBox","forwardRef","children","resultCountRow","ref","styles","jsx","Fragment"],"mappings":";;;AAUO,MAAMA,IAAkBC,EAAiD,CAAC,EAAE,UAAAC,GAAU,gBAAAC,EAAA,GAAkBC,wBAE1G,OAAA,EAAI,WAAWC,EAAO,8BAA8B,GAAG,KAAAD,GACtD,UAAA;AAAA,EAAA,gBAAAE,EAAC,MAAA,EAAG,WAAWD,EAAO,2BAA2B,GAAG,MAAK,WAAU,UAAU,IAC1E,UAAAH,EAAA,CACH;AAAA,EACCC,KAAkB,gBAAAG,EAACC,GAAA,EAA6B,UAAAJ,EAAA,GAAhB,cAA+B;AAAA,GAClE,CAEH;AAEDH,EAAgB,cAAc;"}
package/dist/components/SearchField/components/ResultsOption.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as i } from "react/jsx-runtime";
2
- import { s as c } from "../../../SearchField.module-OI1uPUjC.js";
2
+ import { s as c } from "../../../SearchField.module-B44YRRrn.js";
3
3
  const f = ({ value: o, key: a, children: s, onSelect: r, ariaLabel: l }) => {
4
4
  const t = (e) => {
5
5
  e.stopPropagation(), r && r(o);
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.45.1",
5
+ "version": "3.45.3",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "types": "dist/index.d.ts",
@@ -60,7 +60,7 @@
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
- "@types/node": "^22.18.5",
63
+ "@types/node": "^22.18.6",
64
64
  "@types/react": "^19.1.13",
65
65
  "@types/react-dom": "^19.1.9",
66
66
  "@uva-glass/eslint-config": "^1.3.11",
@@ -90,7 +90,7 @@
90
90
  "stylelint-order": "^7.0.0",
91
91
  "ts-node": "^10.9.2",
92
92
  "typescript": "^5.9.2",
93
- "vite": "^7.1.5",
93
+ "vite": "^7.1.6",
94
94
  "vite-plugin-dts": "^4.5.4",
95
95
  "vite-plugin-lib-inject-css": "^2.2.2",
96
96
  "vite-plugin-static-copy": "^3.1.2",
package/dist/SearchField.module-OI1uPUjC.js DELETED
@@ -1,17 +0,0 @@
1
- import './assets/SearchField.css';const _ = {
2
- "search-field__input-wrapper": "_search-field__input-wrapper_459nc_1",
3
- "search-field__input-field": "_search-field__input-field_459nc_8",
4
- "search-field__icon": "_search-field__icon_459nc_35",
5
- "search-field__result-wrapper": "_search-field__result-wrapper_459nc_43",
6
- "search-field__input-container": "_search-field__input-container_459nc_57",
7
- "search-field__input-container--hidden": "_search-field__input-container--hidden_459nc_62",
8
- "search-field__input-container--visible": "_search-field__input-container--visible_459nc_66",
9
- "search-field__compact-button": "_search-field__compact-button_459nc_76",
10
- "search-field__compact-icon": "_search-field__compact-icon_459nc_92",
11
- "search-field__result-list": "_search-field__result-list_459nc_96",
12
- "search-field__result-item": "_search-field__result-item_459nc_109"
13
- };
14
- export {
15
- _ as s
16
- };
17
- //# sourceMappingURL=SearchField.module-OI1uPUjC.js.map
package/dist/SearchField.module-OI1uPUjC.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"SearchField.module-OI1uPUjC.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}