@uva-glass/component-library 3.52.6 → 3.52.7

package/dist/components/Accordion/Accordion.test.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as n, s as a } from "../../react.esm-DdELhthz.js";
-import { u as e } from "../../index-C_1Z-Fok.js";
+import "../../index-ApPj4mI1.js";
+import { r as n, s as a } from "../../react.esm-BjO203QT.js";
+import { u as e } from "../../index-BKK3EWVW.js";
 import { Accordion as i } from "./Accordion.js";
 describe("Accordion", () => {
   it("should render", () => {

package/dist/components/AccordionCard/AccordionCard.test.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as c, s as e, f as s, w as d } from "../../react.esm-DdELhthz.js";
-import { u as r } from "../../index-C_1Z-Fok.js";
+import "../../index-ApPj4mI1.js";
+import { r as c, s as e, f as s, w as d } from "../../react.esm-BjO203QT.js";
+import { u as r } from "../../index-BKK3EWVW.js";
 import { AccordionCard as a } from "./AccordionCard.js";
 describe("AccordionCard", () => {
   it("should render", () => {

package/dist/components/ActionList/ActionList.test.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as n, s as t, w as a } from "../../react.esm-DdELhthz.js";
-import { u as l } from "../../index-C_1Z-Fok.js";
+import "../../index-ApPj4mI1.js";
+import { r as n, s as t, w as a } from "../../react.esm-BjO203QT.js";
+import { u as l } from "../../index-BKK3EWVW.js";
 import { ActionList as o } from "./ActionList.js";
 const T = jest.fn(), c = [
   /* @__PURE__ */ i("button", { type: "button", onClick: T, children: "Test Action 1" }, "1"),

package/dist/components/AppStatusBar/AppStatusBar.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r, s as t } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r, s as t } from "../../react.esm-BjO203QT.js";
 import { AppStatusBar as s } from "./AppStatusBar.js";
 describe("AppStatusBar", () => {
   it("should render", () => {

package/dist/components/Attention/Attention.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as t, s as r } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as t, s as r } from "../../react.esm-BjO203QT.js";
 import { Attention as n } from "./Attention.js";
 describe("Attention", () => {
   it("should render (variant primary)", () => {

package/dist/components/Backdrop/Backdrop.test.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as e, s as o } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as e, s as o } from "../../react.esm-BjO203QT.js";
 import { Backdrop as t } from "./Backdrop.js";
 describe("Backdrop", () => {
   it("should render", () => {

package/dist/components/Buttons/Button.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as n, s as t, f as c } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as n, s as t, f as c } from "../../react.esm-BjO203QT.js";
 import { Button as o } from "./Button.js";
 const s = jest.fn();
 describe("Button", () => {

package/dist/components/Buttons/LinkButton.test.js

@@ -1,6 +1,6 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as n, s as t, f as c } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as n, s as t, f as c } from "../../react.esm-BjO203QT.js";
 import { BrowserRouter as u, Routes as a, Route as d } from "react-router";
 import { LinkButton as o } from "./LinkButton.js";
 const r = ({ children: i }) => /* @__PURE__ */ s(u, { children: [

package/dist/components/Buttons/MenuButton.test.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as u, s as e, f as c } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as u, s as e, f as c } from "../../react.esm-BjO203QT.js";
 import { createRef as s } from "react";
 import { MenuButton as r } from "./MenuButton.js";
 const n = jest.fn();

package/dist/components/Card/Card.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r, s as d } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r, s as d } from "../../react.esm-BjO203QT.js";
 import { Card as o } from "./Card.js";
 describe("Card", () => {
   it("should render", () => {

package/dist/components/Checkbox/Checkbox.test.js

@@ -1,7 +1,7 @@
 import { jsx as c } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as o, s as t } from "../../react.esm-DdELhthz.js";
-import { u as s } from "../../index-C_1Z-Fok.js";
+import "../../index-ApPj4mI1.js";
+import { r as o, s as t } from "../../react.esm-BjO203QT.js";
+import { u as s } from "../../index-BKK3EWVW.js";
 import { Checkbox as r } from "./Checkbox.js";
 describe("Checkbox", () => {
   it("should render", () => {

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.test.js

@@ -1,6 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as c, s as t } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as c, s as t } from "../../react.esm-BjO203QT.js";
 import { CheckboxButtonBar as a } from "./CheckboxButtonBar.js";
 const n = jest.fn(), d = [
   {

package/dist/components/FeedbackBar/FeedbackBar.test.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as s, s as e, f as r } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as s, s as e, f as r } from "../../react.esm-BjO203QT.js";
 import { FeedbackBar as c } from "./FeedbackBar.js";
 describe("FeedbackBar", () => {
   it("should render with children text", () => {

package/dist/components/Label/Label.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as t, s as l } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as t, s as l } from "../../react.esm-BjO203QT.js";
 import { Label as r } from "./Label.js";
 describe("Label", () => {
   it("should render", () => {

package/dist/components/MetaDataBar/MetaDataBar.test.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { r as n, s as e } from "../../react.esm-DdELhthz.js";
+import { r as n, s as e } from "../../react.esm-BjO203QT.js";
 import { MetaDataBar as c } from "./MetaDataBar.js";
 jest.mock("components/Icon", () => ({
   Icon: ({ name: a }) => /* @__PURE__ */ t("span", { "data-testid": "icon", children: a })

package/dist/components/MultiSelectBox/MultiSelectBox.test.js

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as d, Fragment as r } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as n, s as t, f as a } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as n, s as t, f as a } from "../../react.esm-BjO203QT.js";
 import { MultiSelectBox as l } from "./MultiSelectBox.js";
 const i = jest.fn(), c = [
   { label: "Option 1", value: "1" },

package/dist/components/Notification/Notification.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as i, s as t } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as i, s as t } from "../../react.esm-BjO203QT.js";
 import { Notification as n } from "./Notification.js";
 describe("Notification", () => {
   it("renders title and subtitle", () => {

package/dist/components/RadioGroup/Radiogroup.test.js

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as l, s as t, f as s } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as l, s as t, f as s } from "../../react.esm-BjO203QT.js";
 import { RadioGroup as a } from "./RadioGroup.js";
 const i = [
   { id: "1", titleLabel: "Option 1", value: "option1" },

package/dist/components/SearchField/SearchField.js

@@ -1,35 +1,35 @@
 import { jsxs as x, jsx as s } from "react/jsx-runtime";
-import { useRef as y, useState as k, useEffect as F, Children as m, isValidElement as N, cloneElement as O } from "react";
-import { c as S } from "../../clsx-OuTLNxxd.js";
-import { ResultOption as D } from "./components/ResultsOption.js";
-import { s as t } from "../../SearchField.module-CMUEgX7d.js";
-import { ResultOptionBox as E } from "./components/ResultOptionBox.js";
-import { Icon as w } from "../Icon/Icon.js";
-import { useOnClickOutside as j } from "../hooks/useOnClickOutside.js";
-const A = ({
-  id: d,
-  placeholder: u,
-  isLoading: b = !1,
-  isCompact: l,
-  onChange: c,
+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: h
+  resultCountRow: c
 }) => {
-  const n = y(null), [_, f] = k(!1), p = y(null), R = () => {
-    n.current && (n.current.value = "", n.current.focus());
-  }, v = (e) => {
-    const o = e.target, r = o.value;
-    o.setSelectionRange(r.length, r.length), r && c(r);
-  }, g = (e) => {
+  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(), c(""), n.current && (n.current.value = ""), l && (f(!1), n.current?.blur());
+        e.preventDefault(), u(""), t.current && (t.current.value = ""), n && (p(!1), t.current?.blur());
         break;
       case "ArrowDown": {
         e.preventDefault();
-        const r = p.current?.querySelector('li[role="option"]:not([tabindex="-1"])');
-        if (r) {
-          let i = r;
+        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();
@@ -38,59 +38,69 @@ const A = ({
       }
     }
   };
-  return F(() => {
-    m.count(a) || f(!1);
-  }, [a]), j(p, c.bind(null, "")), /* @__PURE__ */ x("div", { className: t["search-field__input-wrapper"], children: [
-    l && /* @__PURE__ */ s(
+  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: t["search-field__compact-button"],
-        onClick: () => f(!0),
-        "aria-label": u,
-        children: /* @__PURE__ */ s(w, { name: "Magnify", className: t["search-field__compact-icon"], "aria-hidden": "true" })
+        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: S(t["search-field__input-container"], {
-          [t["search-field__input-container--hidden"]]: l && !_,
-          [t["search-field__input-container--visible"]]: l && _
+        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(w, { name: "Magnify", className: t["search-field__icon"], "aria-hidden": "true" }),
+          /* @__PURE__ */ s(g, { name: "Magnify", className: l["search-field__icon"], "aria-hidden": "true" }),
           /* @__PURE__ */ s(
             "input",
             {
               type: "text",
-              className: t["search-field__input-field"],
-              placeholder: u,
-              id: d,
-              onChange: (e) => c(e.target.value),
-              onFocus: v,
-              onKeyDown: g,
+              className: l["search-field__input-field"],
+              placeholder: m,
+              id: _,
+              onChange: (e) => u(e.target.value),
+              onFocus: E,
+              onKeyDown: R,
               role: "combobox",
-              "aria-expanded": !!m.count(a) || b,
-              "aria-controls": `${d}-results`,
+              "aria-expanded": !!d.count(a) || v,
+              "aria-controls": `${_}-results`,
               "aria-autocomplete": "list",
               "aria-haspopup": "listbox",
-              "aria-label": u,
+              "aria-label": m,
               autoComplete: "off",
-              ref: n
+              ref: t
             }
           )
         ]
       }
     ),
-    (a || b) && /* @__PURE__ */ s(E, { resultCountRow: h || null, ref: p, children: m.map(a, (e, o) => N(e) ? O(e, {
-      key: o,
-      onReset: R
+    (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) })
   ] });
 };
-A.ResultOption = D;
+j.ResultOption = S;
 export {
-  A as SearchField
+  j 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)) {\r\n      setShowField(false);\r\n    }\r\n  }, [children]);\r\n\r\n  useOnClickOutside(optionListRef as RefObject<HTMLElement>, onChange.bind(null, ''));\r\n\r\n  return (\r\n    <div className={styles['search-field__input-wrapper']}>\r\n      {isCompact && (\r\n        <button\r\n          type=\"button\"\r\n          className={styles['search-field__compact-button']}\r\n          onClick={() => setShowField(true)}\r\n          aria-label={placeholder}\r\n        >\r\n          <Icon name=\"Magnify\" className={styles['search-field__compact-icon']} aria-hidden=\"true\" />\r\n        </button>\r\n      )}\r\n      <div\r\n        className={clsx(styles['search-field__input-container'], {\r\n          [styles['search-field__input-container--hidden']]: isCompact && !showField,\r\n          [styles['search-field__input-container--visible']]: isCompact && showField,\r\n        })}\r\n      >\r\n        <Icon name=\"Magnify\" className={styles['search-field__icon']} aria-hidden=\"true\" />\r\n        <input\r\n          type=\"text\"\r\n          className={styles['search-field__input-field']}\r\n          placeholder={placeholder}\r\n          id={id}\r\n          onChange={(event) => onChange(event.target.value)}\r\n          onFocus={handleFocus}\r\n          onKeyDown={handleKeyDown}\r\n          role=\"combobox\"\r\n          aria-expanded={Boolean(Children.count(children)) || isLoading}\r\n          aria-controls={`${id}-results`}\r\n          aria-autocomplete=\"list\"\r\n          aria-haspopup=\"listbox\"\r\n          aria-label={placeholder}\r\n          autoComplete=\"off\"\r\n          ref={inputRef}\r\n        />\r\n      </div>\r\n      {(children || isLoading) && (\r\n        <ResultOptionBox resultCountRow={resultCountRow ? resultCountRow : null} ref={optionListRef}>\r\n          {Children.map(children, (child, index) => {\r\n            if (isValidElement<ResultOptionProps>(child)) {\r\n              return cloneElement(child, {\r\n                key: index,\r\n                onReset: handleReset,\r\n              });\r\n            }\r\n            return child;\r\n          })}\r\n        </ResultOptionBox>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nSearchField.ResultOption = ResultOption;\r\n"],"names":["SearchField","id","placeholder","isLoading","isCompact","onChange","children","resultCountRow","inputRef","useRef","showField","setShowField","useState","optionListRef","handleReset","handleFocus","event","target","value","handleKeyDown","firstFocusable","currentOption","useEffect","Children","useOnClickOutside","jsxs","styles","jsx","Icon","clsx","ResultOptionBox","child","index","isValidElement","cloneElement","ResultOption"],"mappings":"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"}
+{"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":"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"}

package/dist/components/StatusBadge/StatusBadge.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as t, s } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as t, s } from "../../react.esm-BjO203QT.js";
 import { StatusBadge as a } from "./StatusBage.js";
 describe("StatusBadge", () => {
   it("should render with message", () => {

package/dist/components/TextArea/TextArea.test.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as o, s as t, f as r } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as o, s as t, f as r } from "../../react.esm-BjO203QT.js";
 import { J as c } from "../../index-BJRrLdmi.js";
 import { TextArea as n } from "./TextArea.js";
 describe("TextArea", () => {

package/dist/components/VarIndicator/VarIndicator.test.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as l, s as e, w as a } from "../../react.esm-DdELhthz.js";
-import { u as i } from "../../index-C_1Z-Fok.js";
+import "../../index-ApPj4mI1.js";
+import { r as l, s as e, w as a } from "../../react.esm-BjO203QT.js";
+import { u as i } from "../../index-BKK3EWVW.js";
 import { useState as s } from "react";
 import { VarIndicator as n } from "./VarIndicator.js";
 const o = {

package/dist/{index-DYPpFe2R.js → index-ApPj4mI1.js}

@@ -1023,7 +1023,6 @@ function Hn() {
 var Tn = /* @__PURE__ */ Hn();
 const Dn = /* @__PURE__ */ de(Tn);
 var z = { exports: {} };
-/*! https://mths.be/cssescape v1.5.1 by @mathias | MIT license */
 var Bn = z.exports, Oe;
 function Pn() {
   return Oe || (Oe = 1, (function(e, t) {
@@ -2361,4 +2360,4 @@ var kr = /* @__PURE__ */ Object.freeze({
   toHaveValue: mt
 });
 expect.extend(kr);
-//# sourceMappingURL=index-DYPpFe2R.js.map
+//# sourceMappingURL=index-ApPj4mI1.js.map