@uva-glass/component-library 3.45.2 → 3.45.3

package/dist/SearchField.module-B44YRRrn.js

@@ -0,0 +1,17 @@
+import './assets/SearchField.css';const _ = {
+  "search-field__input-wrapper": "_search-field__input-wrapper_x2i41_1",
+  "search-field__input-field": "_search-field__input-field_x2i41_8",
+  "search-field__icon": "_search-field__icon_x2i41_35",
+  "search-field__result-wrapper": "_search-field__result-wrapper_x2i41_43",
+  "search-field__input-container": "_search-field__input-container_x2i41_58",
+  "search-field__input-container--hidden": "_search-field__input-container--hidden_x2i41_63",
+  "search-field__input-container--visible": "_search-field__input-container--visible_x2i41_67",
+  "search-field__compact-button": "_search-field__compact-button_x2i41_77",
+  "search-field__compact-icon": "_search-field__compact-icon_x2i41_94",
+  "search-field__result-list": "_search-field__result-list_x2i41_98",
+  "search-field__result-item": "_search-field__result-item_x2i41_111"
+};
+export {
+  _ as s
+};
+//# sourceMappingURL=SearchField.module-B44YRRrn.js.map

package/dist/SearchField.module-B44YRRrn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.module-B44YRRrn.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/assets/SearchField.css

@@ -1 +1 @@
-._search-field__input-wrapper_hkbsl_1{display:flex;justify-content:flex-end;position:relative;width:100%}._search-field__input-field_hkbsl_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.4rem;margin:0;padding:0 2.75rem 0 1rem;text-align:inherit;width:100%}._search-field__input-field_hkbsl_8::placeholder{color:var(--new-color-grey-700);font-size:inherit;opacity:1}._search-field__input-field_hkbsl_8:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._search-field__icon_hkbsl_35{color:var(--new-color-grey-700);position:absolute;right:.5rem;top:50%;transform:translateY(-50%)}._search-field__result-wrapper_hkbsl_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:22rem;min-width:100%;overflow:hidden;position:absolute;top:calc(100% + .25rem);z-index:10}._search-field__input-container_hkbsl_58{position:relative;width:100%}._search-field__input-container--hidden_hkbsl_63{display:none}._search-field__input-container--visible_hkbsl_67{display:block;max-width:20rem;position:absolute;right:0;top:0;width:20rem;z-index:10}._search-field__compact-button_hkbsl_77{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_hkbsl_93{color:var(--new-color-grey-700)}._search-field__result-list_hkbsl_97{border-bottom:1px solid var(--new-color-grey-700);list-style:none;margin:0;max-height:10rem;overflow-y:auto;padding:0}._search-field__result-list_hkbsl_97:empty{display:none}._search-field__result-item_hkbsl_110{font-size:inherit;max-width:100%;padding:.5rem 1rem;white-space:nowrap}._search-field__result-item_hkbsl_110:focus-visible{background-color:var(--new-color-grey-300);outline:none}._search-field__result-item_hkbsl_110:hover,._search-field__result-item_hkbsl_110:focus-visible{background-color:var(--new-color-grey-300);cursor:pointer}._search-field__result-info_hkbsl_128{background-color:var(--new-color-uva-white);border-radius:0 0 .25rem .25rem;border-top:1px solid var(--new-color-grey-400);font-size:inherit;max-width:100%;padding:.5rem 1rem;white-space:nowrap}
+._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

@@ -1,76 +1,79 @@
-import { jsxs as h, jsx as r } from "react/jsx-runtime";
-import { useRef as y, useState as N, useEffect as R, Children as l, isValidElement as v, cloneElement as S } from "react";
+import { jsxs as _, jsx as n } from "react/jsx-runtime";
+import { useRef as b, useState as R, useEffect as v, Children as l, isValidElement as S, cloneElement as D } from "react";
 import { c as F } from "../../clsx-OuTLNxxd.js";
-import { ResultOption as w } from "./components/ResultsOption.js";
-import { s as t } from "../../SearchField.module-BEOH-3TV.js";
+import { ResultOption as k } from "./components/ResultsOption.js";
+import { s as t } from "../../SearchField.module-B44YRRrn.js";
 import { ResultOptionBox as E } from "./components/ResultOptionBox.js";
-import { Icon as _ } from "../Icon/Icon.js";
+import { Icon as g } from "../Icon/Icon.js";
 const O = ({
   id: s,
-  placeholder: i,
+  placeholder: o,
   isLoading: c = !1,
-  isCompact: n,
+  isCompact: r,
   onChange: u,
   onSelect: f,
   children: a,
-  resultCountRow: m
+  resultCountRow: p
 }) => {
-  const o = y(null), [p, d] = N(!1), b = (e) => {
+  const i = b(null), [m, d] = R(!1), h = b(null), x = (e) => {
     u && u(e.target.value);
-  }, g = (e) => {
-    o.current && (o.current.value = ""), f && f(e);
+  }, y = (e) => {
+    i.current && (i.current.value = ""), f && f(e);
+  }, N = (e) => {
+    e.key === "ArrowDown" && (e.preventDefault(), h.current?.childNodes[0]?.childNodes[0]?.focus());
   };
-  return R(() => {
+  return v(() => {
     l.count(a) || d(!1);
-  }, [a]), /* @__PURE__ */ h("div", { className: t["search-field__input-wrapper"], children: [
-    n && /* @__PURE__ */ r(
+  }, [a]), /* @__PURE__ */ _("div", { className: t["search-field__input-wrapper"], children: [
+    r && /* @__PURE__ */ n(
       "button",
       {
         type: "button",
         className: t["search-field__compact-button"],
         onClick: () => d(!0),
-        "aria-label": i,
-        children: /* @__PURE__ */ r(_, { name: "Magnify", className: t["search-field__compact-icon"], "aria-hidden": "true" })
+        "aria-label": o,
+        children: /* @__PURE__ */ n(g, { name: "Magnify", className: t["search-field__compact-icon"], "aria-hidden": "true" })
       }
     ),
-    /* @__PURE__ */ h(
+    /* @__PURE__ */ _(
       "div",
       {
         className: F(t["search-field__input-container"], {
-          [t["search-field__input-container--hidden"]]: n && !p,
-          [t["search-field__input-container--visible"]]: n && p
+          [t["search-field__input-container--hidden"]]: r && !m,
+          [t["search-field__input-container--visible"]]: r && m
         }),
         children: [
-          /* @__PURE__ */ r(_, { name: "Magnify", className: t["search-field__icon"], "aria-hidden": "true" }),
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ n(g, { name: "Magnify", className: t["search-field__icon"], "aria-hidden": "true" }),
+          /* @__PURE__ */ n(
             "input",
             {
               type: "text",
               className: t["search-field__input-field"],
-              placeholder: i,
+              placeholder: o,
               id: s,
-              onChange: b,
+              onChange: x,
               onFocus: (e) => e.target.setSelectionRange(e.target.value.length, e.target.value.length),
+              onKeyDown: N,
               role: "combobox",
               "aria-expanded": !!l.count(a) || c,
               "aria-controls": `${s}-results`,
               "aria-autocomplete": "list",
               "aria-haspopup": "listbox",
-              "aria-label": i,
+              "aria-label": o,
               autoComplete: "off",
-              ref: o
+              ref: i
             }
           )
         ]
       }
     ),
-    (a || c) && /* @__PURE__ */ r(E, { resultCountRow: m || null, children: l.map(a, (e, x) => v(e) ? S(e, {
-      key: x,
-      onSelect: g
+    (a || c) && /* @__PURE__ */ n(E, { resultCountRow: p || null, ref: h, children: l.map(a, (e, w) => S(e) ? D(e, {
+      key: w,
+      onSelect: y
     }) : e) })
   ] });
 };
-O.ResultOption = w;
+O.ResultOption = k;
 export {
   O as SearchField
 };

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 { 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;"}
+{"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/components/ResultOptionBox.d.ts

@@ -1,6 +1,6 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { ReactNode } from 'react';
 export interface ResultOptionBoxProps {
     children: ReactNode;
     resultCountRow?: ReactNode;
 }
-export declare const ResultOptionBox: ({ children, resultCountRow }: PropsWithChildren<ResultOptionBoxProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const ResultOptionBox: import('react').ForwardRefExoticComponent<ResultOptionBoxProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,11 +1,12 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import { Fragment as i } from "react";
-import { s as e } from "../../../SearchField.module-BEOH-3TV.js";
-const c = ({ children: t, resultCountRow: r }) => /* @__PURE__ */ l("div", { className: e["search-field__result-wrapper"], children: [
-  /* @__PURE__ */ s("ul", { className: e["search-field__result-list"], role: "listbox", tabIndex: -1, children: t }),
-  r && /* @__PURE__ */ s(i, { children: r }, "result-count")
-] });
+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-B44YRRrn.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 {
-  c as ResultOptionBox
+  m 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, 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;"}
+{"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

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { s as c } from "../../../SearchField.module-BEOH-3TV.js";
+import { s as c } from "../../../SearchField.module-B44YRRrn.js";
 const f = ({ value: o, key: a, children: s, onSelect: r, ariaLabel: l }) => {
   const t = (e) => {
     e.stopPropagation(), r && r(o);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.45.2",
+  "version": "3.45.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/SearchField.module-BEOH-3TV.js

@@ -1,17 +0,0 @@
-import './assets/SearchField.css';const _ = {
-  "search-field__input-wrapper": "_search-field__input-wrapper_hkbsl_1",
-  "search-field__input-field": "_search-field__input-field_hkbsl_8",
-  "search-field__icon": "_search-field__icon_hkbsl_35",
-  "search-field__result-wrapper": "_search-field__result-wrapper_hkbsl_43",
-  "search-field__input-container": "_search-field__input-container_hkbsl_58",
-  "search-field__input-container--hidden": "_search-field__input-container--hidden_hkbsl_63",
-  "search-field__input-container--visible": "_search-field__input-container--visible_hkbsl_67",
-  "search-field__compact-button": "_search-field__compact-button_hkbsl_77",
-  "search-field__compact-icon": "_search-field__compact-icon_hkbsl_93",
-  "search-field__result-list": "_search-field__result-list_hkbsl_97",
-  "search-field__result-item": "_search-field__result-item_hkbsl_110"
-};
-export {
-  _ as s
-};
-//# sourceMappingURL=SearchField.module-BEOH-3TV.js.map

package/dist/SearchField.module-BEOH-3TV.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SearchField.module-BEOH-3TV.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}