@uva-glass/component-library 3.55.1 → 3.55.2

package/dist/components/SearchField/SearchField.js

@@ -1,106 +1,105 @@
-import { jsxs as x, jsx as s } from "react/jsx-runtime";
-import { useRef as y, useState as k, useEffect as h, Children as d, isValidElement as F, cloneElement as N } from "react";
-import { c as O } from "../../clsx-OuTLNxxd.js";
-import { ResultOption as S } from "./components/ResultsOption.js";
-import { s as l } from "../../SearchField.module-CMUEgX7d.js";
-import { ResultOptionBox as D } from "./components/ResultOptionBox.js";
-import { Icon as g } from "../Icon/Icon.js";
-import { useOnClickOutside as B } from "../hooks/useOnClickOutside.js";
-const j = ({
-  id: _,
-  placeholder: m,
-  isLoading: v = !1,
-  isCompact: n,
-  onChange: u,
-  children: a,
-  resultCountRow: c
-}) => {
-  const t = y(null), [f, p] = k(!1), b = y(null), w = () => {
-    t.current && (t.current.value = "", t.current.focus());
-  }, E = (e) => {
-    const r = e.target, o = r.value;
-    r.setSelectionRange(o.length, o.length), o && u(o);
-  }, R = (e) => {
-    switch (e.key) {
-      case "Escape":
-        e.preventDefault(), u(""), t.current && (t.current.value = ""), n && (p(!1), t.current?.blur());
-        break;
-      case "ArrowDown": {
-        e.preventDefault();
-        const o = b.current?.querySelector('li[role="option"]:not([tabindex="-1"])');
-        if (o) {
-          let i = o;
-          for (; i && i.getAttribute("tabindex") === "-1"; )
-            i = i.nextElementSibling;
-          i?.focus();
-        }
-        break;
-      }
-    }
-  };
-  return h(() => {
-    !d.count(a) && t.current?.value.length === 0 && n && c === null && p(!1);
-  }, [a, n, c]), h(() => {
-    if (t.current === null) return;
-    const e = () => {
-      n && !d.count(a) && p(!1);
-    }, r = t.current;
-    return r.addEventListener("blur", e), () => {
-      r.removeEventListener("blur", e);
-    };
-  }, [n, a]), h(() => {
-    n && f && t.current && t.current.focus();
-  }, [n, f]), B(b, u.bind(null, "")), /* @__PURE__ */ x("div", { className: l["search-field__input-wrapper"], children: [
-    n && /* @__PURE__ */ s(
-      "button",
-      {
-        type: "button",
-        className: l["search-field__compact-button"],
-        onClick: () => p(!0),
-        "aria-label": m,
-        children: /* @__PURE__ */ s(g, { name: "Magnify", className: l["search-field__compact-icon"], "aria-hidden": "true" })
-      }
-    ),
-    /* @__PURE__ */ x(
-      "div",
-      {
-        className: O(l["search-field__input-container"], {
-          [l["search-field__input-container--hidden"]]: n && !f,
-          [l["search-field__input-container--visible"]]: n && f
-        }),
-        children: [
-          /* @__PURE__ */ s(g, { name: "Magnify", className: l["search-field__icon"], "aria-hidden": "true" }),
-          /* @__PURE__ */ s(
-            "input",
-            {
-              type: "text",
-              className: l["search-field__input-field"],
-              placeholder: m,
-              id: _,
-              onChange: (e) => u(e.target.value),
-              onFocus: E,
-              onKeyDown: R,
-              role: "combobox",
-              "aria-expanded": !!d.count(a) || v,
-              "aria-controls": `${_}-results`,
-              "aria-autocomplete": "list",
-              "aria-haspopup": "listbox",
-              "aria-label": m,
-              autoComplete: "off",
-              ref: t
-            }
-          )
-        ]
-      }
-    ),
-    (a || v) && /* @__PURE__ */ s(D, { resultCountRow: c || null, ref: b, children: d.map(a, (e, r) => F(e) ? N(e, {
-      key: r,
-      onReset: w
-    }) : e) })
-  ] });
+import { t as e } from "../../clsx-BD2qMUU1.js";
+import { Icon as t } from "../Icon/Icon.js";
+import { useOnClickOutside as n } from "../hooks/useOnClickOutside.js";
+import { t as r } from "../../SearchField.module-BgxjHaPG.js";
+import { ResultOption as i } from "./components/ResultsOption.js";
+import { ResultOptionBox as a } from "./components/ResultOptionBox.js";
+import { Children as o, cloneElement as s, isValidElement as c, useEffect as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/SearchField/SearchField.tsx
+var m = ({ id: i, placeholder: m, isLoading: h = !1, isCompact: g, onChange: _, children: v, resultCountRow: y }) => {
+	let b = u(null), [x, S] = d(!1), C = u(null), w = () => {
+		b.current && (b.current.value = "", b.current.focus());
+	}, T = (e) => {
+		let t = e.target, n = t.value;
+		t.setSelectionRange(n.length, n.length), n && _(n);
+	}, E = (e) => {
+		switch (e.key) {
+			case "Escape":
+				e.preventDefault(), _(""), b.current && (b.current.value = ""), g && (S(!1), b.current?.blur());
+				break;
+			case "ArrowDown": {
+				e.preventDefault();
+				let t = C.current?.querySelector("li[role=\"option\"]:not([tabindex=\"-1\"])");
+				if (t) {
+					let e = t;
+					for (; e && e.getAttribute("tabindex") === "-1";) e = e.nextElementSibling;
+					e?.focus();
+				}
+				break;
+			}
+		}
+	};
+	return l(() => {
+		!o.count(v) && b.current?.value.length === 0 && g && y === null && S(!1);
+	}, [
+		v,
+		g,
+		y
+	]), l(() => {
+		if (b.current === null) return;
+		let e = () => {
+			g && !o.count(v) && S(!1);
+		}, t = b.current;
+		return t.addEventListener("blur", e), () => {
+			t.removeEventListener("blur", e);
+		};
+	}, [g, v]), l(() => {
+		g && x && b.current && b.current.focus();
+	}, [g, x]), n(C, _.bind(null, "")), /* @__PURE__ */ p("div", {
+		className: r["search-field__input-wrapper"],
+		children: [
+			g && /* @__PURE__ */ f("button", {
+				type: "button",
+				className: r["search-field__compact-button"],
+				onClick: () => S(!0),
+				"aria-label": m,
+				children: /* @__PURE__ */ f(t, {
+					name: "Magnify",
+					className: r["search-field__compact-icon"],
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ p("div", {
+				className: e(r["search-field__input-container"], {
+					[r["search-field__input-container--hidden"]]: g && !x,
+					[r["search-field__input-container--visible"]]: g && x
+				}),
+				children: [/* @__PURE__ */ f(t, {
+					name: "Magnify",
+					className: r["search-field__icon"],
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ f("input", {
+					type: "text",
+					className: r["search-field__input-field"],
+					placeholder: m,
+					id: i,
+					onChange: (e) => _(e.target.value),
+					onFocus: T,
+					onKeyDown: E,
+					role: "combobox",
+					"aria-expanded": !!o.count(v) || h,
+					"aria-controls": `${i}-results`,
+					"aria-autocomplete": "list",
+					"aria-haspopup": "listbox",
+					"aria-label": m,
+					autoComplete: "off",
+					ref: b
+				})]
+			}),
+			(v || h) && /* @__PURE__ */ f(a, {
+				resultCountRow: y || null,
+				ref: C,
+				children: o.map(v, (e, t) => c(e) ? s(e, {
+					key: t,
+					onReset: w
+				}) : e)
+			})
+		]
+	});
 };
-j.ResultOption = S;
-export {
-  j as SearchField
-};
-//# sourceMappingURL=SearchField.js.map
+m.ResultOption = i;
+//#endregion
+export { m as SearchField };
+
+//# sourceMappingURL=SearchField.js.map

package/dist/components/SearchField/SearchField.js.map

@@ -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    if (inputRef.current) {\r\n      inputRef.current.value = '';\r\n      inputRef.current.focus();\r\n    }\r\n  };\r\n\r\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\r\n    const target = event.target;\r\n    const value = target.value;\r\n    target.setSelectionRange(value.length, value.length);\r\n    if (value) {\r\n      onChange(value);\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n    switch (event.key) {\r\n      case 'Escape':\r\n        event.preventDefault();\r\n        onChange('');\r\n        if (inputRef.current) {\r\n          inputRef.current.value = '';\r\n        }\r\n        if (isCompact) {\r\n          setShowField(false);\r\n          inputRef.current?.blur();\r\n        }\r\n        break;\r\n      case 'ArrowDown': {\r\n        event.preventDefault();\r\n        const container = optionListRef.current;\r\n        const firstFocusable = container?.querySelector<HTMLElement>('li[role=\"option\"]:not([tabindex=\"-1\"])');\r\n        if (firstFocusable) {\r\n          let currentOption: HTMLElement | null = firstFocusable;\r\n          while (currentOption && currentOption.getAttribute('tabindex') === '-1') {\r\n            currentOption = currentOption.nextElementSibling as HTMLElement;\r\n          }\r\n          currentOption?.focus();\r\n        }\r\n        break;\r\n      }\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (!Children.count(children) && inputRef.current?.value.length === 0 && isCompact && resultCountRow === null) {\r\n      setShowField(false);\r\n    }\r\n  }, [children, isCompact, resultCountRow]);\r\n\r\n  useEffect(() => {\r\n    if (inputRef.current === null) return;\r\n\r\n    const handleBlur = () => {\r\n      if (isCompact && !Children.count(children)) {\r\n        setShowField(false);\r\n      }\r\n    };\r\n\r\n    const currentInput = inputRef.current;\r\n    currentInput.addEventListener('blur', handleBlur);\r\n\r\n    return () => {\r\n      currentInput.removeEventListener('blur', handleBlur);\r\n    };\r\n  }, [isCompact, children]);\r\n\r\n  useEffect(() => {\r\n    if (isCompact && showField && inputRef.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  }, [isCompact, showField]);\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","handleBlur","currentInput","useOnClickOutside","jsxs","styles","jsx","Icon","clsx","ResultOptionBox","child","index","isValidElement","cloneElement","ResultOption"],"mappings":";;;;;;;;AA8BO,MAAMA,IAAc,CAAC;AAAA,EAC1B,IAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;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,IAAc,MAAM;AACxB,IAAIN,EAAS,YACXA,EAAS,QAAQ,QAAQ,IACzBA,EAAS,QAAQ,MAAA;AAAA,EAErB,GAEMO,IAAc,CAACC,MAA8C;AACjE,UAAMC,IAASD,EAAM,QACfE,IAAQD,EAAO;AACrB,IAAAA,EAAO,kBAAkBC,EAAM,QAAQA,EAAM,MAAM,GAC/CA,KACFb,EAASa,CAAK;AAAA,EAElB,GAEMC,IAAgB,CAACH,MAA2C;AAChE,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AACH,QAAAA,EAAM,eAAA,GACNX,EAAS,EAAE,GACPG,EAAS,YACXA,EAAS,QAAQ,QAAQ,KAEvBJ,MACFO,EAAa,EAAK,GAClBH,EAAS,SAAS,KAAA;AAEpB;AAAA,MACF,KAAK,aAAa;AAChB,QAAAQ,EAAM,eAAA;AAEN,cAAMI,IADYP,EAAc,SACE,cAA2B,wCAAwC;AACrG,YAAIO,GAAgB;AAClB,cAAIC,IAAoCD;AACxC,iBAAOC,KAAiBA,EAAc,aAAa,UAAU,MAAM;AACjE,YAAAA,IAAgBA,EAAc;AAEhC,UAAAA,GAAe,MAAA;AAAA,QACjB;AACA;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAEA,SAAAC,EAAU,MAAM;AACd,IAAI,CAACC,EAAS,MAAMjB,CAAQ,KAAKE,EAAS,SAAS,MAAM,WAAW,KAAKJ,KAAaG,MAAmB,QACvGI,EAAa,EAAK;AAAA,EAEtB,GAAG,CAACL,GAAUF,GAAWG,CAAc,CAAC,GAExCe,EAAU,MAAM;AACd,QAAId,EAAS,YAAY,KAAM;AAE/B,UAAMgB,IAAa,MAAM;AACvB,MAAIpB,KAAa,CAACmB,EAAS,MAAMjB,CAAQ,KACvCK,EAAa,EAAK;AAAA,IAEtB,GAEMc,IAAejB,EAAS;AAC9B,WAAAiB,EAAa,iBAAiB,QAAQD,CAAU,GAEzC,MAAM;AACX,MAAAC,EAAa,oBAAoB,QAAQD,CAAU;AAAA,IACrD;AAAA,EACF,GAAG,CAACpB,GAAWE,CAAQ,CAAC,GAExBgB,EAAU,MAAM;AACd,IAAIlB,KAAaM,KAAaF,EAAS,WACrCA,EAAS,QAAQ,MAAA;AAAA,EAErB,GAAG,CAACJ,GAAWM,CAAS,CAAC,GAEzBgB,EAAkBb,GAAyCR,EAAS,KAAK,MAAM,EAAE,CAAC,GAGhF,gBAAAsB,EAAC,OAAA,EAAI,WAAWC,EAAO,6BAA6B,GACjD,UAAA;AAAA,IAAAxB,KACC,gBAAAyB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWD,EAAO,8BAA8B;AAAA,QAChD,SAAS,MAAMjB,EAAa,EAAI;AAAA,QAChC,cAAYT;AAAA,QAEZ,UAAA,gBAAA2B,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,GAAGxB,KAAa,CAACM;AAAA,UACjE,CAACkB,EAAO,wCAAwC,CAAC,GAAGxB,KAAaM;AAAA,QAAA,CAClE;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAmB,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,aAAA1B;AAAA,cACA,IAAAD;AAAA,cACA,UAAU,CAACe,MAAUX,EAASW,EAAM,OAAO,KAAK;AAAA,cAChD,SAASD;AAAA,cACT,WAAWI;AAAA,cACX,MAAK;AAAA,cACL,iBAAe,EAAQI,EAAS,MAAMjB,CAAQ,KAAMH;AAAA,cACpD,iBAAe,GAAGF,CAAE;AAAA,cACpB,qBAAkB;AAAA,cAClB,iBAAc;AAAA,cACd,cAAYC;AAAA,cACZ,cAAa;AAAA,cACb,KAAKM;AAAA,YAAA;AAAA,UAAA;AAAA,QACP;AAAA,MAAA;AAAA,IAAA;AAAA,KAEAF,KAAYH,MACZ,gBAAA0B,EAACG,GAAA,EAAgB,gBAAgBzB,KAAkC,MAAM,KAAKM,GAC3E,UAAAU,EAAS,IAAIjB,GAAU,CAAC2B,GAAOC,MAC1BC,EAAkCF,CAAK,IAClCG,EAAaH,GAAO;AAAA,MACzB,KAAKC;AAAA,MACL,SAASpB;AAAA,IAAA,CACV,IAEImB,CACR,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAEAjC,EAAY,eAAeqC;"}
+{"version":3,"file":"SearchField.js","names":[],"sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { KeyboardEvent, ReactNode, RefObject } from 'react';\r\nimport type { ResultOptionProps } from './components/ResultsOption';\r\n\r\nimport { ResultOption } from './components/ResultsOption';\r\nimport styles from './SearchField.module.css';\r\nimport { ResultOptionBox } from './components/ResultOptionBox';\r\n\r\nimport { Icon } from 'components/Icon';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\nexport interface SearchFieldProps {\r\n  /** Unique identifier for the search field. */\r\n  id: string;\r\n  /** Placeholder text for the search input. */\r\n  placeholder: string;\r\n  /** Indicates if the search field is in a loading state. */\r\n  isLoading?: boolean;\r\n  /** If true, the search field is displayed in a compact style. */\r\n  isCompact?: boolean;\r\n  /** Callback function triggered when the input value changes. */\r\n  onChange: (query: string) => void;\r\n  /** The children elements, typically ResultOption components. */\r\n  children: ReactNode;\r\n  /** Optional row to display the count of results. */\r\n  resultCountRow?: ReactNode;\r\n}\r\n\r\nexport const SearchField = ({\r\n  id,\r\n  placeholder,\r\n  isLoading = false,\r\n  isCompact,\r\n  onChange,\r\n  children,\r\n  resultCountRow,\r\n}: SearchFieldProps) => {\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n  const [showField, setShowField] = useState<boolean>(false);\r\n  const optionListRef = useRef<HTMLDivElement>(null);\r\n\r\n  const handleReset = () => {\r\n    if (inputRef.current) {\r\n      inputRef.current.value = '';\r\n      inputRef.current.focus();\r\n    }\r\n  };\r\n\r\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\r\n    const target = event.target;\r\n    const value = target.value;\r\n    target.setSelectionRange(value.length, value.length);\r\n    if (value) {\r\n      onChange(value);\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n    switch (event.key) {\r\n      case 'Escape':\r\n        event.preventDefault();\r\n        onChange('');\r\n        if (inputRef.current) {\r\n          inputRef.current.value = '';\r\n        }\r\n        if (isCompact) {\r\n          setShowField(false);\r\n          inputRef.current?.blur();\r\n        }\r\n        break;\r\n      case 'ArrowDown': {\r\n        event.preventDefault();\r\n        const container = optionListRef.current;\r\n        const firstFocusable = container?.querySelector<HTMLElement>('li[role=\"option\"]:not([tabindex=\"-1\"])');\r\n        if (firstFocusable) {\r\n          let currentOption: HTMLElement | null = firstFocusable;\r\n          while (currentOption && currentOption.getAttribute('tabindex') === '-1') {\r\n            currentOption = currentOption.nextElementSibling as HTMLElement;\r\n          }\r\n          currentOption?.focus();\r\n        }\r\n        break;\r\n      }\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (!Children.count(children) && inputRef.current?.value.length === 0 && isCompact && resultCountRow === null) {\r\n      setShowField(false);\r\n    }\r\n  }, [children, isCompact, resultCountRow]);\r\n\r\n  useEffect(() => {\r\n    if (inputRef.current === null) return;\r\n\r\n    const handleBlur = () => {\r\n      if (isCompact && !Children.count(children)) {\r\n        setShowField(false);\r\n      }\r\n    };\r\n\r\n    const currentInput = inputRef.current;\r\n    currentInput.addEventListener('blur', handleBlur);\r\n\r\n    return () => {\r\n      currentInput.removeEventListener('blur', handleBlur);\r\n    };\r\n  }, [isCompact, children]);\r\n\r\n  useEffect(() => {\r\n    if (isCompact && showField && inputRef.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  }, [isCompact, showField]);\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"],"mappings":";;;;;;;;;AA8BA,IAAa,KAAe,EAC1B,OACA,gBACA,eAAY,IACZ,cACA,aACA,aACA,wBACsB;CACtB,IAAM,IAAW,EAAyB,KAAK,EACzC,CAAC,GAAW,KAAgB,EAAkB,GAAM,EACpD,IAAgB,EAAuB,KAAK,EAE5C,UAAoB;AACxB,EAAI,EAAS,YACX,EAAS,QAAQ,QAAQ,IACzB,EAAS,QAAQ,OAAO;IAItB,KAAe,MAA8C;EACjE,IAAM,IAAS,EAAM,QACf,IAAQ,EAAO;AAErB,EADA,EAAO,kBAAkB,EAAM,QAAQ,EAAM,OAAO,EAChD,KACF,EAAS,EAAM;IAIb,KAAiB,MAA2C;AAChE,UAAQ,EAAM,KAAd;GACE,KAAK;AAMH,IALA,EAAM,gBAAgB,EACtB,EAAS,GAAG,EACR,EAAS,YACX,EAAS,QAAQ,QAAQ,KAEvB,MACF,EAAa,GAAM,EACnB,EAAS,SAAS,MAAM;AAE1B;GACF,KAAK,aAAa;AAChB,MAAM,gBAAgB;IAEtB,IAAM,IADY,EAAc,SACE,cAA2B,6CAAyC;AACtG,QAAI,GAAgB;KAClB,IAAI,IAAoC;AACxC,YAAO,KAAiB,EAAc,aAAa,WAAW,KAAK,MACjE,KAAgB,EAAc;AAEhC,QAAe,OAAO;;AAExB;;;;AAoCN,QA/BA,QAAgB;AACd,EAAI,CAAC,EAAS,MAAM,EAAS,IAAI,EAAS,SAAS,MAAM,WAAW,KAAK,KAAa,MAAmB,QACvG,EAAa,GAAM;IAEpB;EAAC;EAAU;EAAW;EAAe,CAAC,EAEzC,QAAgB;AACd,MAAI,EAAS,YAAY,KAAM;EAE/B,IAAM,UAAmB;AACvB,GAAI,KAAa,CAAC,EAAS,MAAM,EAAS,IACxC,EAAa,GAAM;KAIjB,IAAe,EAAS;AAG9B,SAFA,EAAa,iBAAiB,QAAQ,EAAW,QAEpC;AACX,KAAa,oBAAoB,QAAQ,EAAW;;IAErD,CAAC,GAAW,EAAS,CAAC,EAEzB,QAAgB;AACd,EAAI,KAAa,KAAa,EAAS,WACrC,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAW,EAAU,CAAC,EAE1B,EAAkB,GAAyC,EAAS,KAAK,MAAM,GAAG,CAAC,EAGjF,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB;GACG,KACC,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAO;IAClB,eAAe,EAAa,GAAK;IACjC,cAAY;cAEZ,kBAAC,GAAD;KAAM,MAAK;KAAU,WAAW,EAAO;KAA+B,eAAY;KAAS,CAAA;IACpF,CAAA;GAEX,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,kCAAkC;MACtD,EAAO,2CAA2C,KAAa,CAAC;MAChE,EAAO,4CAA4C,KAAa;KAClE,CAAC;cAJJ,CAME,kBAAC,GAAD;KAAM,MAAK;KAAU,WAAW,EAAO;KAAuB,eAAY;KAAS,CAAA,EACnF,kBAAC,SAAD;KACE,MAAK;KACL,WAAW,EAAO;KACL;KACT;KACJ,WAAW,MAAU,EAAS,EAAM,OAAO,MAAM;KACjD,SAAS;KACT,WAAW;KACX,MAAK;KACL,iBAAe,EAAQ,EAAS,MAAM,EAAS,IAAK;KACpD,iBAAe,GAAG,EAAG;KACrB,qBAAkB;KAClB,iBAAc;KACd,cAAY;KACZ,cAAa;KACb,KAAK;KACL,CAAA,CACE;;IACJ,KAAY,MACZ,kBAAC,GAAD;IAAiB,gBAAgB,KAAkC;IAAM,KAAK;cAC3E,EAAS,IAAI,IAAW,GAAO,MAC1B,EAAkC,EAAM,GACnC,EAAa,GAAO;KACzB,KAAK;KACL,SAAS;KACV,CAAC,GAEG,EACP;IACc,CAAA;GAEhB;;;AAIV,EAAY,eAAe"}

package/dist/components/SearchField/SearcheField.stories.js

@@ -1,118 +1,89 @@
-import { jsx as n, jsxs as E } from "react/jsx-runtime";
-import { useState as m } from "react";
-import { SearchField as r } from "./SearchField.js";
-import { MOCK_DATA as L } from "./mockData.js";
-const v = `
-// Has all HTMLInputElement props available except "className" and "style" 
-<SearchField 
-  id={string} 
-  queryLength?={number}
-  placeholder?={string} 
-  isLoading?={boolean} 
-  isCompact?={boolean} 
-  onChange={function}
-  children={ReactNode}
-  resultCountRow?={ReactNode}
->
-  <SearchField.ResultOption 
-    onSelect={function} 
-    onEscape={function} 
-    value={string|number} 
-    key={string|number} 
-    ariaLabel={string}>
-   {loop custom options here}
-  </SearchField.ResultOption>
-</SearchField>`, w = 4, i = 12, y = 1e3;
-var h = /* @__PURE__ */ ((t) => (t.DEGREE = "degree-programme", t.CERTIFICATE = "certificate-programme", t.ADMINISTRATIVE = "administrative-programme", t))(h || {});
-const M = {
-  title: "Molecules/SearchField",
-  component: r,
-  args: {},
-  argTypes: {
-    onSelect: {
-      action: "selected url",
-      table: {
-        disable: !0
-      }
-    },
-    onChange: {
-      table: {
-        disable: !0
-      }
-    },
-    children: {
-      table: {
-        disable: !0
-      }
-    },
-    id: {
-      table: {
-        disable: !0
-      }
-    },
-    resultCountRow: {
-      table: {
-        disable: !0
-      }
-    },
-    isCompact: {
-      control: "boolean",
-      default: !1
-    }
-  },
-  parameters: {
-    inspectComponent: r,
-    codeString: v
-  }
-}, T = (t) => {
-  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) => {
-    if (e.length < w) {
-      o(null);
-      return;
-    }
-    d(!0);
-    const a = e.toLowerCase(), s = L.filter(
-      (l) => l.name.NL.toLowerCase().includes(a) || l.code.toLowerCase().includes(a)
-    );
-    setTimeout(() => {
-      o(s), d(!1);
-    }, y);
-  }, 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) => {
-    o(null), t.onSelect(e);
-  };
-  return /* @__PURE__ */ n("div", { style: { width: "20rem", display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ n(
-    r,
-    {
-      placeholder: "Zoek...",
-      id: "search-field-1",
-      isLoading: c,
-      isCompact: t.isCompact,
-      onChange: (e) => b(e),
-      resultCountRow: S(u || []),
-      children: u?.map((e) => /* @__PURE__ */ n(
-        r.ResultOption,
-        {
-          ariaLabel: `${e.code}, ${e.name[p]}`,
-          value: f(
-            g,
-            e.programmeType,
-            e.programmeCode || "",
-            e.code
-          ),
-          onSelect: R,
-          onEscape: () => o(null),
-          children: /* @__PURE__ */ E("div", { style: { display: "flex", gap: "1rem" }, children: [
-            /* @__PURE__ */ n("span", { children: e.code }),
-            /* @__PURE__ */ n("span", { style: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: e.name[p] })
-          ] })
-        },
-        e.id
-      ))
-    }
-  ) });
-}, N = T.bind({});
-export {
-  N as InputExample,
-  M as default
-};
-//# sourceMappingURL=SearcheField.stories.js.map
+import { SearchField as e } from "./SearchField.js";
+import { MOCK_DATA as t } from "./mockData.js";
+import { useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/SearchField/SearcheField.stories.tsx
+var a = "\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<SearchField \n  id={string} \n  queryLength?={number}\n  placeholder?={string} \n  isLoading?={boolean} \n  isCompact?={boolean} \n  onChange={function}\n  children={ReactNode}\n  resultCountRow?={ReactNode}\n>\n  <SearchField.ResultOption \n    onSelect={function} \n    onEscape={function} \n    value={string|number} \n    key={string|number} \n    ariaLabel={string}>\n   {loop custom options here}\n  </SearchField.ResultOption>\n</SearchField>", o = 4, s = 12, c = 1e3, l = /* @__PURE__ */ function(e) {
+	return e.DEGREE = "degree-programme", e.CERTIFICATE = "certificate-programme", e.ADMINISTRATIVE = "administrative-programme", e;
+}(l || {}), u = {
+	title: "Molecules/SearchField",
+	component: e,
+	args: {},
+	argTypes: {
+		onSelect: {
+			action: "selected url",
+			table: { disable: !0 }
+		},
+		onChange: { table: { disable: !0 } },
+		children: { table: { disable: !0 } },
+		id: { table: { disable: !0 } },
+		resultCountRow: { table: { disable: !0 } },
+		isCompact: {
+			control: "boolean",
+			default: !1
+		}
+	},
+	parameters: {
+		inspectComponent: e,
+		codeString: a
+	}
+}, d = ((a) => {
+	let [u, d] = n(!1), [f, p] = n(), m = (e, t, n, r) => `education-preparation/${l[t]}/${e}/${n}/${r}`, h = (e) => {
+		if (e.length < o) {
+			p(null);
+			return;
+		}
+		d(!0);
+		let n = e.toLowerCase(), r = t.filter((e) => e.name.NL.toLowerCase().includes(n) || e.code.toLowerCase().includes(n));
+		setTimeout(() => {
+			p(r), d(!1);
+		}, c);
+	}, g = (e) => e.length > s ? `${e.length} resultaten gevonden, alleen de ${s} beste resultaten worden weergegeven.` : e.length > 0 && e.length <= s ? `${e.length} resultaten gevonden.` : u ? "Zoeken..." : "Geen resultaten gevonden.", _ = (e) => e ? /* @__PURE__ */ r("div", {
+		style: {
+			padding: "0.5rem 1rem",
+			fontWeight: "600"
+		},
+		children: g(e)
+	}, "result-count") : null, v = (e) => {
+		p(null), a.onSelect(e);
+	};
+	return /* @__PURE__ */ r("div", {
+		style: {
+			width: "20rem",
+			display: "flex",
+			justifyContent: "flex-end"
+		},
+		children: /* @__PURE__ */ r(e, {
+			placeholder: "Zoek...",
+			id: "search-field-1",
+			isLoading: u,
+			isCompact: a.isCompact,
+			onChange: (e) => h(e),
+			resultCountRow: _(f || []),
+			children: f?.map((t) => /* @__PURE__ */ r(e.ResultOption, {
+				ariaLabel: `${t.code}, ${t.name.NL}`,
+				value: m("2026", t.programmeType, t.programmeCode || "", t.code),
+				onSelect: v,
+				onEscape: () => p(null),
+				children: /* @__PURE__ */ i("div", {
+					style: {
+						display: "flex",
+						gap: "1rem"
+					},
+					children: [/* @__PURE__ */ r("span", { children: t.code }), /* @__PURE__ */ r("span", {
+						style: {
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							textOverflow: "ellipsis"
+						},
+						children: t.name.NL
+					})]
+				})
+			}, t.id))
+		})
+	});
+}).bind({});
+//#endregion
+export { d as InputExample, u as default };
+
+//# sourceMappingURL=SearcheField.stories.js.map

package/dist/components/SearchField/SearcheField.stories.js.map

@@ -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  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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"}
+{"version":3,"file":"SearcheField.stories.js","names":[],"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"],"mappings":";;;;;AAQA,IAAM,IAAa,yhBAsBb,IAAmB,GACnB,IAAc,IACd,IAAc,KAEf,IAAL,yBAAA,GAAA;QACE,EAAA,SAAA,oBACA,EAAA,cAAA,yBACA,EAAA,iBAAA;EAHG,KAAA,EAAA,CAIJ,EAeD,IAAe;CACb,OAAO;CACP,WAAW;CACX,MAAM,EAAE;CACR,UAAU;EACR,UAAU;GACR,QAAQ;GACR,OAAO,EACL,SAAS,IACV;GACF;EACD,UAAU,EACR,OAAO,EACL,SAAS,IACV,EACF;EACD,UAAU,EACR,OAAO,EACL,SAAS,IACV,EACF;EACD,IAAI,EACF,OAAO,EACL,SAAS,IACV,EACF;EACD,gBAAgB,EACd,OAAO,EACL,SAAS,IACV,EACF;EACD,WAAW;GACT,SAAS;GACT,SAAS;GACV;EACF;CACD,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EA8FY,MA5FiF,MAAS;CACrG,IAAM,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,CAAC,GAAe,KAAoB,GAAiC,EAIrE,KACJ,GACA,GACA,GACA,MACG,yBAAyB,EAAc,GAAe,GAAG,EAAa,GAAG,EAAc,GAAG,KAEzF,KAAoB,MAAkB;AAC1C,MAAI,EAAM,SAAS,GAAkB;AACnC,KAAiB,KAAK;AACtB;;AAEF,IAAW,GAAK;EAEhB,IAAM,IAAiB,EAAM,aAAa,EAEpC,IAAc,EAAU,QAC3B,MAAS,EAAK,KAAK,GAAG,aAAa,CAAC,SAAS,EAAe,IAAI,EAAK,KAAK,aAAa,CAAC,SAAS,EAAe,CAClH;AAED,mBAAiB;AAEf,GADA,EAAiB,EAAY,EAC7B,EAAW,GAAM;KAChB,EAAY;IAGX,KAAoB,MACpB,EAAQ,SAAS,IACZ,GAAG,EAAQ,OAAO,kCAAkC,EAAY,yCAC9D,EAAQ,SAAS,KAAK,EAAQ,UAAU,IAC1C,GAAG,EAAQ,OAAO,yBAChB,IACF,cAEA,6BAIL,KAAa,MACjB,IACE,kBAAC,OAAD;EAA0B,OAAO;GAAE,SAAS;GAAe,YAAY;GAAO;YAC3E,EAAiB,EAAQ;EACtB,EAFI,eAEJ,GACJ,MAEA,KAAgB,MAA2B;AAE/C,EADA,EAAiB,KAAK,EACtB,EAAK,SAAS,EAAM;;AAGtB,QACE,kBAAC,OAAD;EAAK,OAAO;GAAE,OAAO;GAAS,SAAS;GAAQ,gBAAgB;GAAY;YACzE,kBAAC,GAAD;GACE,aAAY;GACZ,IAAG;GACH,WAAW;GACX,WAAW,EAAK;GAChB,WAAW,MAAU,EAAiB,EAAM;GAC5C,gBAAgB,EAAU,KAAiB,EAAE,CAAC;aAE7C,GAAe,KAAK,MACnB,kBAAC,EAAY,cAAb;IAEE,WAAW,GAAG,EAAO,KAAK,IAAI,EAAO,KAAK;IAC1C,OAAO,EACL,QACA,EAAO,eACP,EAAO,iBAAiB,IACxB,EAAO,KACR;IACD,UAAU;IACV,gBAAgB,EAAiB,KAAK;cAEtC,kBAAC,OAAD;KAAK,OAAO;MAAE,SAAS;MAAQ,KAAK;MAAQ;eAA5C,CACE,kBAAC,QAAD,EAAA,UAAO,EAAO,MAAY,CAAA,EAC1B,kBAAC,QAAD;MAAM,OAAO;OAAE,YAAY;OAAU,UAAU;OAAU,cAAc;OAAY;gBAChF,EAAO,KAAK;MACR,CAAA,CACH;;IACmB,EAjBpB,EAAO,GAiBa,CAC3B;GACU,CAAA;EACV,CAAA;GAI2B,KAAK,EAAE,CAAC"}

package/dist/components/SearchField/components/ResultOptionBox.js

@@ -1,12 +1,19 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { forwardRef as a, Fragment as i } from "react";
-import { s } from "../../../SearchField.module-CMUEgX7d.js";
-const m = a(({ children: t, resultCountRow: e }, l) => /* @__PURE__ */ o("div", { className: s["search-field__result-wrapper"], ref: l, children: [
-  /* @__PURE__ */ r("ul", { className: s["search-field__result-list"], role: "listbox", tabIndex: -1, children: t }),
-  e && /* @__PURE__ */ r(i, { children: e }, "result-count")
-] }));
-m.displayName = "ResultOptionBox";
-export {
-  m as ResultOptionBox
-};
-//# sourceMappingURL=ResultOptionBox.js.map
+import { t as e } from "../../../SearchField.module-BgxjHaPG.js";
+import { Fragment as t, forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/SearchField/components/ResultOptionBox.tsx
+var a = n(({ children: n, resultCountRow: a }, o) => /* @__PURE__ */ i("div", {
+	className: e["search-field__result-wrapper"],
+	ref: o,
+	children: [/* @__PURE__ */ r("ul", {
+		className: e["search-field__result-list"],
+		role: "listbox",
+		tabIndex: -1,
+		children: n
+	}), a && /* @__PURE__ */ r(t, { children: a }, "result-count")]
+}));
+a.displayName = "ResultOptionBox";
+//#endregion
+export { a as ResultOptionBox };
+
+//# sourceMappingURL=ResultOptionBox.js.map

package/dist/components/SearchField/components/ResultOptionBox.js.map

@@ -1 +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;"}
+{"version":3,"file":"ResultOptionBox.js","names":[],"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"],"mappings":";;;;AAUA,IAAa,IAAkB,GAAkD,EAAE,aAAU,qBAAkB,MAE3G,kBAAC,OAAD;CAAK,WAAW,EAAO;CAAsC;WAA7D,CACE,kBAAC,MAAD;EAAI,WAAW,EAAO;EAA8B,MAAK;EAAU,UAAU;EAC1E;EACE,CAAA,EACJ,KAAkB,kBAAC,GAAD,EAAA,UAA8B,GAA0B,EAA1C,eAA0C,CACvE;GAER;AAEF,EAAgB,cAAc"}