fictoan-react 2.0.0-beta.18 → 2.0.0-beta.19

package/dist/components/Form/FormItemGroup/FormItemGroup.js

@@ -1,35 +1,35 @@
 "use client";
-import { jsx as l } from "react/jsx-runtime";
-import n from "react";
+import { jsx as c } from "react/jsx-runtime";
+import t from "react";
 /* empty css                    */
 import { Element as h } from "../../Element/Element.js";
-const g = n.forwardRef(
+const g = t.forwardRef(
   ({
-    isJoint: e,
+    isJoint: i,
     equalWidthForChildren: a,
-    retainLayout: i,
+    retainLayout: p,
     children: m,
-    legend: p,
+    legend: u,
     id: s,
-    columns: t,
+    columns: e,
     style: o,
-    ...u
-  }, f) => {
-    const d = s || `form-group-${Math.random().toString(36).substring(2, 9)}`;
+    ...f
+  }, l) => {
+    const d = t.useId(), n = s || `form-group-${d.replace(/:/g, "")}`;
     let r = [];
-    return e && r.push("is-joint"), a && r.push("equal-width-for-children"), i && r.push("retain-layout"), t && r.push("with-columns"), /* @__PURE__ */ l(
+    return i && r.push("is-joint"), a && r.push("equal-width-for-children"), p && r.push("retain-layout"), e && r.push("with-columns"), /* @__PURE__ */ c(
       h,
       {
         as: "div",
         "data-form-item-group": !0,
-        "data-form-spaced": !0,
-        ref: f,
-        id: d,
+        inheritFormSpacing: !0,
+        ref: l,
+        id: n,
         role: "group",
-        "aria-label": p,
+        "aria-label": u,
         classNames: r,
-        style: t ? { gridTemplateColumns: `repeat(${t}, 1fr)`, ...o } : o,
-        ...u,
+        style: e ? { gridTemplateColumns: `repeat(${e}, 1fr)`, ...o } : o,
+        ...f,
         children: m
       }
     );

package/dist/components/Form/FormItemGroup/FormItemGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormItemGroup.js","sources":["../../../../src/components/Form/FormItemGroup/FormItemGroup.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps } from \"../../Element/constants\";\nimport { Element } from \"$element\";\n\n// STYLES ==============================================================================================================\nimport \"./form-item-group.css\";\n\n// prettier-ignore\nexport interface FormItemGroupCustomProps {\n    isJoint               ? : boolean;\n    equalWidthForChildren ? : React.ReactNode;\n    retainLayout          ? : boolean;\n    legend                ? : string;\n    columns               ? : number;\n}\n\nexport type FormItemGroupElementType = HTMLDivElement;\nexport type FormItemGroupProps = Omit<CommonAndHTMLProps<FormItemGroupElementType>, keyof FormItemGroupCustomProps> &\n                                 FormItemGroupCustomProps;\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const FormItemGroup = React.forwardRef(\n    (\n        {\n            isJoint,\n            equalWidthForChildren,\n            retainLayout,\n            children,\n            legend,\n            id,\n            columns,\n            style,\n            ...props\n        } : FormItemGroupProps,\n        ref : React.Ref<FormItemGroupElementType>,\n    ) => {\n        const groupId = id || `form-group-${Math.random().toString(36).substring(2, 9)}`;\n        let classNames = [];\n\n        if (isJoint) {\n            classNames.push(\"is-joint\");\n        }\n\n        if (equalWidthForChildren) {\n            classNames.push(\"equal-width-for-children\");\n        }\n\n        if (retainLayout) {\n            classNames.push(\"retain-layout\");\n        }\n\n        if (columns) {\n            classNames.push(\"with-columns\");\n        }\n\n        return (\n            <Element<FormItemGroupElementType>\n                as=\"div\"\n                data-form-item-group\n                data-form-spaced\n                ref={ref}\n                id={groupId}\n                role=\"group\"\n                aria-label={legend}\n                classNames={classNames}\n                style={columns ? { gridTemplateColumns : `repeat(${columns}, 1fr)`, ...style } : style}\n                {...props}\n            >\n                {children}\n            </Element>\n        );\n    },\n);\nFormItemGroup.displayName = \"FormItemGroup\";\n"],"names":["FormItemGroup","React","isJoint","equalWidthForChildren","retainLayout","children","legend","id","columns","style","props","ref","groupId","classNames","jsx","Element"],"mappings":";;;;AAwBO,MAAMA,IAAgBC,EAAM;AAAA,EAC/B,CACI;AAAA,IACI,SAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,IAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MACC;AACD,UAAMC,IAAUL,KAAM,cAAc,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,CAAC,CAAC;AAC9E,QAAIM,IAAa,CAAA;AAEjB,WAAIX,KACAW,EAAW,KAAK,UAAU,GAG1BV,KACAU,EAAW,KAAK,0BAA0B,GAG1CT,KACAS,EAAW,KAAK,eAAe,GAG/BL,KACAK,EAAW,KAAK,cAAc,GAI9B,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,wBAAoB;AAAA,QACpB,oBAAgB;AAAA,QAChB,KAAAJ;AAAA,QACA,IAAIC;AAAA,QACJ,MAAK;AAAA,QACL,cAAYN;AAAA,QACZ,YAAAO;AAAA,QACA,OAAOL,IAAU,EAAE,qBAAsB,UAAUA,CAAO,UAAU,GAAGC,EAAA,IAAUA;AAAA,QAChF,GAAGC;AAAA,QAEH,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AACAL,EAAc,cAAc;"}
+{"version":3,"file":"FormItemGroup.js","sources":["../../../../src/components/Form/FormItemGroup/FormItemGroup.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps } from \"../../Element/constants\";\nimport { Element } from \"$element\";\n\n// STYLES ==============================================================================================================\nimport \"./form-item-group.css\";\n\n// prettier-ignore\nexport interface FormItemGroupCustomProps {\n    isJoint               ? : boolean;\n    equalWidthForChildren ? : React.ReactNode;\n    retainLayout          ? : boolean;\n    legend                ? : string;\n    columns               ? : number;\n}\n\nexport type FormItemGroupElementType = HTMLDivElement;\nexport type FormItemGroupProps = Omit<CommonAndHTMLProps<FormItemGroupElementType>, keyof FormItemGroupCustomProps> &\n                                 FormItemGroupCustomProps;\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const FormItemGroup = React.forwardRef(\n    (\n        {\n            isJoint,\n            equalWidthForChildren,\n            retainLayout,\n            children,\n            legend,\n            id,\n            columns,\n            style,\n            ...props\n        } : FormItemGroupProps,\n        ref : React.Ref<FormItemGroupElementType>,\n    ) => {\n        // useId (not Math.random) so the id is stable across server/client and doesn't cause hydration mismatches.\n        const reactId = React.useId();\n        const groupId = id || `form-group-${reactId.replace(/:/g, \"\")}`;\n        let classNames = [];\n\n        if (isJoint) {\n            classNames.push(\"is-joint\");\n        }\n\n        if (equalWidthForChildren) {\n            classNames.push(\"equal-width-for-children\");\n        }\n\n        if (retainLayout) {\n            classNames.push(\"retain-layout\");\n        }\n\n        if (columns) {\n            classNames.push(\"with-columns\");\n        }\n\n        return (\n            <Element<FormItemGroupElementType>\n                as=\"div\"\n                data-form-item-group\n                // Use the semantic prop: Element emits `data-form-spaced` from this. Passing the\n                // raw attribute is clobbered by Element's own `data-form-spaced={inheritFormSpacing || undefined}`.\n                inheritFormSpacing\n                ref={ref}\n                id={groupId}\n                role=\"group\"\n                aria-label={legend}\n                classNames={classNames}\n                style={columns ? { gridTemplateColumns : `repeat(${columns}, 1fr)`, ...style } : style}\n                {...props}\n            >\n                {children}\n            </Element>\n        );\n    },\n);\nFormItemGroup.displayName = \"FormItemGroup\";\n"],"names":["FormItemGroup","React","isJoint","equalWidthForChildren","retainLayout","children","legend","id","columns","style","props","ref","reactId","groupId","classNames","jsx","Element"],"mappings":";;;;AAwBO,MAAMA,IAAgBC,EAAM;AAAA,EAC/B,CACI;AAAA,IACI,SAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,IAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MACC;AAED,UAAMC,IAAUX,EAAM,MAAA,GAChBY,IAAUN,KAAM,cAAcK,EAAQ,QAAQ,MAAM,EAAE,CAAC;AAC7D,QAAIE,IAAa,CAAA;AAEjB,WAAIZ,KACAY,EAAW,KAAK,UAAU,GAG1BX,KACAW,EAAW,KAAK,0BAA0B,GAG1CV,KACAU,EAAW,KAAK,eAAe,GAG/BN,KACAM,EAAW,KAAK,cAAc,GAI9B,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,wBAAoB;AAAA,QAGpB,oBAAkB;AAAA,QAClB,KAAAL;AAAA,QACA,IAAIE;AAAA,QACJ,MAAK;AAAA,QACL,cAAYP;AAAA,QACZ,YAAAQ;AAAA,QACA,OAAON,IAAU,EAAE,qBAAsB,UAAUA,CAAO,UAAU,GAAGC,EAAA,IAAUA;AAAA,QAChF,GAAGC;AAAA,QAEH,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AACAL,EAAc,cAAc;"}

package/dist/components/Form/ListBox/ListBox.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { ListBoxCustomProps } from './constants';
 
-export declare const ListBox: React.ForwardRefExoticComponent<Omit<import('../../Element/constants').CommonAndHTMLProps<HTMLDivElement>, keyof ListBoxCustomProps> & ListBoxCustomProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ListBox: React.ForwardRefExoticComponent<Omit<import('../../..').CommonAndHTMLProps<HTMLDivElement>, keyof ListBoxCustomProps> & ListBoxCustomProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=ListBox.d.ts.map

package/dist/components/Form/ListBox/ListBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/ListBox/ListBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAa5F,OAAO,gBAAgB,CAAC;AAMxB,OAAO,EAA2D,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAK1G,eAAO,MAAM,OAAO,kMAmanB,CAAC"}
+{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/ListBox/ListBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAa5F,OAAO,gBAAgB,CAAC;AAMxB,OAAO,EAA2D,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAK1G,eAAO,MAAM,OAAO,mLAmbnB,CAAC"}

package/dist/components/Form/ListBox/ListBox.js

@@ -1,30 +1,30 @@
 "use client";
-import { jsx as a, jsxs as u, Fragment as de } from "react/jsx-runtime";
-import N, { useState as k, useRef as R, useEffect as E } from "react";
-import { Div as f } from "../../Element/Tags.js";
-import { useClickOutside as pe } from "../../../hooks/UseClickOutside.js";
-import { separateWrapperProps as ue } from "../../../utils/propSeparation.js";
+import { jsx as a, jsxs as p, Fragment as pe } from "react/jsx-runtime";
+import k, { useState as N, useRef as R, useEffect as E } from "react";
+import { Div as b } from "../../Element/Tags.js";
+import { useClickOutside as ue } from "../../../hooks/UseClickOutside.js";
+import { separateWrapperProps as me } from "../../../utils/propSeparation.js";
 /* empty css             */
-import { Badge as me } from "../../Badge/Badge.js";
-import { deriveAriaIds as fe, FormItem as be } from "../FormItem/FormItem.js";
-import { InputField as xe } from "../InputField/InputField.js";
+import { Badge as fe } from "../../Badge/Badge.js";
+import { deriveAriaIds as be, FormItem as xe } from "../FormItem/FormItem.js";
+import { InputField as he } from "../InputField/InputField.js";
 import { Text as F } from "../../Typography/Text.js";
-import { searchOptions as he } from "./listBoxUtils.js";
-import { Element as W } from "../../Element/Element.js";
-const ve = N.forwardRef(
+import { searchOptions as we } from "./listBoxUtils.js";
+import { Element as Y } from "../../Element/Element.js";
+const ve = k.forwardRef(
   ({
     options: H = [],
-    label: Y,
+    label: K,
     helpText: P,
-    errorText: D,
+    errorText: $,
     placeholder: V = "Select an option",
     id: G,
     defaultValue: J,
-    onChange: t,
-    disabled: h,
-    selectionLimit: b,
-    allowMultiSelect: v = !1,
-    allowCustomEntries: w = !1,
+    onChange: r,
+    disabled: x,
+    selectionLimit: h,
+    allowMultiSelect: w = !1,
+    allowCustomEntries: v = !1,
     isLoading: Q,
     value: L,
     isFullWidth: U,
@@ -32,138 +32,140 @@ const ve = N.forwardRef(
     required: j,
     size: X,
     ...Z
-  }, we) => {
-    const [i, x] = k(!1), [m, z] = k(""), [c, n] = k(-1), [_, K] = k(!1), I = N.useMemo(() => [...H], [H]), q = N.useCallback(
+  }, ye) => {
+    const [i, f] = N(!1), [u, z] = N(""), [c, n] = N(-1), [_, q] = N(!1), D = k.useMemo(() => [...H], [H]), W = k.useCallback(
       (e, s) => e == null || e === "" ? [] : (Array.isArray(e) ? e : [e]).map((o) => s.find((B) => B.value === o)).filter((o) => o !== void 0),
       []
-    ), S = L !== void 0, [M, g] = k(
-      () => q(J, I)
-    ), r = S ? q(L, I) : M, y = N.useCallback((e) => {
+    ), S = L !== void 0, [M, g] = N(
+      () => W(J, D)
+    ), t = S ? W(L, D) : M, y = k.useCallback((e) => {
       S || g(e);
-    }, [S]), O = R(null), A = R(null), C = R(null), ee = N.useId(), d = G || `listbox-${ee.replace(/:/g, "")}`, { describedBy: se } = fe(d, P, D), p = he(I, m), ae = c >= 0 && p[c] ? `${d}-option-${p[c].value}` : void 0, $ = (e) => {
+    }, [S]), I = R(null), A = R(null), C = R(null), ee = k.useId(), m = G || `listbox-${ee.replace(/:/g, "")}`, { describedBy: se } = be(m, P, $), d = we(D, u), ae = c >= 0 && d[c] ? `${m}-option-${d[c].value}` : void 0, O = (e) => {
       if (e.disabled) return;
       let s;
-      if (v) {
-        if (r.some((o) => o.value === e.value))
-          s = r.filter((o) => o.value !== e.value);
+      if (w) {
+        if (t.some((o) => o.value === e.value))
+          s = t.filter((o) => o.value !== e.value);
         else {
-          if (b && r.length >= b)
+          if (h && t.length >= h)
             return;
-          s = [...r, e];
+          s = [...t, e];
         }
-        y(s), t == null || t(s.map((o) => o.value));
+        y(s), r == null || r(s.map((o) => o.value));
       } else
-        s = [e], y(s), t == null || t(e.value), x(!1);
+        s = [e], y(s), r == null || r(e.value), f(!1);
       z(""), n(-1);
-    }, te = (e) => {
+    }, re = (e) => {
       z(e);
-    }, re = () => {
-      if (!m.trim() || !w) return;
-      const e = m.trim(), s = {
+    }, te = () => {
+      if (!u.trim() || !v) return;
+      const e = u.trim(), s = {
         value: e,
         label: e
       };
-      I.some((l) => l.value === e) || $(s);
+      D.some((l) => l.value === e) || O(s);
     }, le = (e) => {
-      if (v) {
-        const s = r.filter((l) => l.value !== e);
-        y(s), t == null || t(s.map((l) => l.value));
+      if (w) {
+        const s = t.filter((l) => l.value !== e);
+        y(s), r == null || r(s.map((l) => l.value));
       } else
-        y([]), t == null || t("");
+        y([]), r == null || r("");
     }, ie = () => {
-      y([]), t == null || t(v ? [] : "");
+      y([]), r == null || r(w ? [] : "");
     }, oe = (e) => {
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault(), i ? n(
-            (s) => s < p.length - 1 ? s + 1 : s
-          ) : (x(!0), n(0));
+            (s) => s < d.length - 1 ? s + 1 : s
+          ) : (f(!0), n(0));
           break;
         case "ArrowUp":
           e.preventDefault(), n((s) => s > 0 ? s - 1 : s);
           break;
         case "Enter":
-          if (e.preventDefault(), w && m.trim()) {
-            const s = p.find(
-              (l) => l.label.toLowerCase() === m.trim().toLowerCase()
+          if (e.preventDefault(), v && u.trim()) {
+            const s = d.find(
+              (l) => l.label.toLowerCase() === u.trim().toLowerCase()
             );
-            s ? $(s) : re();
-          } else c >= 0 && p[c] && $(p[c]);
+            s ? O(s) : te();
+          } else c >= 0 && d[c] && O(d[c]);
           break;
         case "Escape":
-          e.preventDefault(), x(!1), n(-1);
+          e.preventDefault(), f(!1), n(-1);
           break;
         case " ":
-          i || (e.preventDefault(), x(!0), n(0));
+          i || (e.preventDefault(), f(!0), n(0));
           break;
         case "Home":
           i && (e.preventDefault(), n(0));
           break;
         case "End":
-          i && (e.preventDefault(), n(p.length - 1));
+          i && (e.preventDefault(), n(d.length - 1));
           break;
       }
+    }, ce = (e) => {
+      x || i || (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), f(!0), n(0));
     };
-    pe(O, () => {
-      x(!1), n(-1);
+    ue(I, () => {
+      f(!1), n(-1);
     }), E(() => {
       i && A.current && A.current.focus();
     }, [i]), E(() => {
-      if (i && O.current) {
-        const e = O.current.getBoundingClientRect(), s = window.innerHeight, l = 300, o = s - e.bottom, B = e.top;
-        K(o < l && B > o);
+      if (i && I.current) {
+        const e = I.current.getBoundingClientRect(), s = window.innerHeight, l = 300, o = s - e.bottom, B = e.top;
+        q(o < l && B > o);
       } else
-        K(!1);
+        q(!1);
     }, [i]), E(() => {
       if (c >= 0) {
         const e = document.querySelector(`[data-index="${c}"]`);
         e == null || e.scrollIntoView({ block: "nearest" });
       }
     }, [c]);
-    const { wrapperProps: ce, inputProps: ne } = ue(Z);
+    const { wrapperProps: ne, inputProps: de } = me(Z);
     return /* @__PURE__ */ a(
-      be,
+      xe,
       {
-        label: Y,
-        htmlFor: d,
+        label: K,
+        htmlFor: m,
         helpText: P,
-        errorText: D,
+        errorText: $,
         required: j,
         isFullWidth: U,
         size: X,
-        ...ce,
-        children: /* @__PURE__ */ u(
-          W,
+        ...ne,
+        children: /* @__PURE__ */ p(
+          Y,
           {
             as: "div",
             "data-list-box": !0,
-            classNames: ["list-box-wrapper", h ? "disabled" : "", T || ""],
-            ref: O,
+            classNames: ["list-box-wrapper", x ? "disabled" : "", T || ""],
+            ref: I,
             isFullWidth: U,
-            ...ne,
+            ...de,
             children: [
-              /* @__PURE__ */ u(
-                f,
+              /* @__PURE__ */ p(
+                b,
                 {
                   className: "list-box-input-wrapper",
-                  id: d,
-                  onClick: () => !h && x(!i),
+                  id: m,
+                  onClick: () => !x && f(!i),
+                  onKeyDown: ce,
                   role: "combobox",
+                  "aria-label": K,
                   "aria-haspopup": "listbox",
                   "aria-expanded": i,
-                  "aria-controls": `${d}-listbox`,
-                  "aria-owns": `${d}-listbox`,
-                  "aria-activedescendant": i ? ae : void 0,
-                  "aria-invalid": !!D || void 0,
+                  "aria-controls": `${m}-listbox`,
+                  "aria-invalid": !!$ || void 0,
                   "aria-required": j,
                   "aria-describedby": se,
-                  "aria-disabled": h || void 0,
-                  tabIndex: h ? -1 : 0,
+                  "aria-disabled": x || void 0,
+                  tabIndex: x ? -1 : 0,
                   children: [
-                    v ? /* @__PURE__ */ u(de, { children: [
-                      r.length > 0 ? /* @__PURE__ */ u(f, { className: "options-wrapper", children: [
-                        /* @__PURE__ */ a(f, { className: "options-list", children: r.map((e) => /* @__PURE__ */ a(
-                          me,
+                    w ? /* @__PURE__ */ p(pe, { children: [
+                      t.length > 0 ? /* @__PURE__ */ p(b, { className: "options-wrapper", children: [
+                        /* @__PURE__ */ a(b, { className: "options-list", children: t.map((e) => /* @__PURE__ */ a(
+                          fe,
                           {
                             actionIcon: "cross",
                             onActionClick: () => le(e.value),
@@ -174,56 +176,57 @@ const ve = N.forwardRef(
                           },
                           e.value
                         )) }),
-                        b && r.length >= b && /* @__PURE__ */ u(F, { className: "options-limit-warning", textColour: "red", size: "tiny", children: [
+                        h && t.length >= h && /* @__PURE__ */ p(F, { className: "options-limit-warning", textColour: "red", size: "tiny", children: [
                           "You can choose only ",
-                          b,
+                          h,
                           " option",
-                          b === 1 ? "" : "s"
+                          h === 1 ? "" : "s"
                         ] })
                       ] }) : /* @__PURE__ */ a("span", { className: "placeholder", children: V }),
-                      r.length > 0 && /* @__PURE__ */ a(
-                        f,
+                      t.length > 0 && /* @__PURE__ */ a(
+                        b,
                         {
                           className: "icon-wrapper clear-all",
                           title: "Clear all options",
                           onClick: () => ie(),
-                          children: /* @__PURE__ */ u("svg", { viewBox: "0 0 24 24", children: [
+                          children: /* @__PURE__ */ p("svg", { viewBox: "0 0 24 24", children: [
                             /* @__PURE__ */ a("line", { x1: "5", y1: "5", x2: "19", y2: "19" }),
                             /* @__PURE__ */ a("line", { x1: "5", y1: "19", x2: "19", y2: "5" })
                           ] })
                         }
                       )
-                    ] }) : r[0] ? /* @__PURE__ */ a(F, { className: "selected-option", children: r[0].label }) : /* @__PURE__ */ a("span", { className: "placeholder", children: V }),
-                    /* @__PURE__ */ a(f, { className: "icon-wrapper chevrons", children: /* @__PURE__ */ u("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+                    ] }) : t[0] ? /* @__PURE__ */ a(F, { className: "selected-option", children: t[0].label }) : /* @__PURE__ */ a("span", { className: "placeholder", children: V }),
+                    /* @__PURE__ */ a(b, { className: "icon-wrapper chevrons", children: /* @__PURE__ */ p("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: [
                       /* @__PURE__ */ a("polyline", { points: "6 9 12 4 18 9" }),
                       /* @__PURE__ */ a("polyline", { points: "6 15 12 20 18 15" })
                     ] }) })
                   ]
                 }
               ),
-              i && !h && /* @__PURE__ */ u(
-                f,
+              i && !x && /* @__PURE__ */ p(
+                b,
                 {
                   ref: C,
                   className: `list-box-dropdown${_ ? " opens-upward" : ""}`,
                   children: [
-                    /* @__PURE__ */ u(f, { className: "list-box-search-wrapper", children: [
+                    /* @__PURE__ */ p(b, { className: "list-box-search-wrapper", children: [
                       /* @__PURE__ */ a(
-                        xe,
+                        he,
                         {
                           type: "text",
                           ref: A,
                           className: "list-box-search",
-                          placeholder: w ? "Type to search or add new" : "Search",
-                          value: m,
-                          onChange: te,
+                          placeholder: v ? "Type to search or add new" : "Search",
+                          value: u,
+                          onChange: re,
                           onKeyDown: oe,
-                          "aria-controls": `${d}-listbox`,
+                          "aria-controls": `${m}-listbox`,
+                          "aria-activedescendant": ae,
                           "aria-label": "Search options",
                           isFullWidth: !0
                         }
                       ),
-                      w && m.trim() && !r.some((e) => e.label.toLowerCase() === m.trim().toLowerCase()) && /* @__PURE__ */ a(
+                      v && u.trim() && !t.some((e) => e.label.toLowerCase() === u.trim().toLowerCase()) && /* @__PURE__ */ a(
                         "kbd",
                         {
                           className: "list-box-enter-key",
@@ -233,24 +236,24 @@ const ve = N.forwardRef(
                       )
                     ] }),
                     /* @__PURE__ */ a(
-                      W,
+                      Y,
                       {
                         as: "ul",
-                        id: `${d}-listbox`,
+                        id: `${m}-listbox`,
                         className: "list-box-options",
                         role: "listbox",
-                        "aria-multiselectable": v,
+                        "aria-multiselectable": w,
                         "aria-busy": Q,
                         tabIndex: -1,
-                        children: p.length > 0 ? p.map((e, s) => /* @__PURE__ */ a(
+                        children: d.length > 0 ? d.map((e, s) => /* @__PURE__ */ a(
                           "li",
                           {
-                            id: `${d}-option-${e.value}`,
+                            id: `${m}-option-${e.value}`,
                             className: `list-box-option ${e.disabled ? "disabled" : ""} ${c === s ? "active" : ""}`,
                             role: "option",
-                            "aria-selected": r.some((l) => l.value === e.value),
+                            "aria-selected": t.some((l) => l.value === e.value),
                             "aria-disabled": e.disabled,
-                            onClick: () => $(e),
+                            onClick: () => O(e),
                             "data-index": s,
                             tabIndex: -1,
                             children: e.customLabel || e.label
@@ -262,7 +265,7 @@ const ve = N.forwardRef(
                             className: "list-box-option disabled",
                             role: "alert",
                             "aria-live": "polite",
-                            children: w ? "Type and press Enter to add new option" : "No matches found"
+                            children: v ? "Type and press Enter to add new option" : "No matches found"
                           }
                         )
                       }

package/dist/components/Form/ListBox/ListBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.js","sources":["../../../../src/components/Form/ListBox/ListBox.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useState, useRef, useEffect, MutableRefObject, KeyboardEvent } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { Div } from \"$tags\";\nimport { Element } from \"$element\";\n\n// HOOKS ===============================================================================================================\nimport { useClickOutside } from \"$hooks/UseClickOutside\";\n\n// UTILS ===============================================================================================================\nimport { separateWrapperProps } from \"$utils/propSeparation\";\n\n// STYLES ==============================================================================================================\nimport \"./list-box.css\";\n\n// OTHER ===============================================================================================================\nimport { Badge } from \"../../Badge/Badge\";\nimport { FormItem, deriveAriaIds } from \"../FormItem/FormItem\";\nimport { InputField } from \"../InputField/InputField\";\nimport { ListBoxProps, OptionForListBoxProps, ListBoxElementType, ListBoxCustomProps } from \"./constants\";\nimport { Text } from \"../../Typography/Text\";\nimport { searchOptions } from \"./listBoxUtils\";\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const ListBox = React.forwardRef<ListBoxElementType, ListBoxProps>(\n    (\n        {\n            options = [],\n            label,\n            helpText,\n            errorText,\n            placeholder = \"Select an option\",\n            id,\n            defaultValue,\n            onChange,\n            disabled,\n            selectionLimit,\n            allowMultiSelect = false,\n            allowCustomEntries = false,\n            isLoading,\n            value,\n            isFullWidth,\n            className,\n            required,\n            size,\n            ...props\n        },\n        ref\n    ) => {\n        const [isOpen, setIsOpen] = useState(false);\n        const [searchValue, setSearchValue] = useState(\"\");\n        const [activeIndex, setActiveIndex] = useState(-1);\n        const [openUpward, setOpenUpward] = useState(false);\n\n        // Create a memoized version of the combined options\n        const allOptions = React.useMemo(() => {\n            return [...options];\n        }, [options]);\n\n        // Map a value or array of values to the matching option objects.\n        const resolveSelectedOptions = React.useCallback(\n            (val : string | string[] | undefined, opts : OptionForListBoxProps[]) : OptionForListBoxProps[] => {\n                if (val == null || val === \"\") return [];\n                const values = Array.isArray(val) ? val : [val];\n                return values\n                    .map(v => opts.find(o => o.value === v))\n                    .filter((o) : o is OptionForListBoxProps => o !== undefined);\n            },\n            [],\n        );\n\n        // Internal state for uncontrolled mode. Lazy init from defaultValue so the\n        // displayed selection is correct on first paint — no spurious onChange fires.\n        const isControlled = value !== undefined;\n        const [internalSelectedOptions, setInternalSelectedOptions] = useState<OptionForListBoxProps[]>(\n            () => resolveSelectedOptions(defaultValue, allOptions),\n        );\n\n        // The effective selection: controlled value takes precedence, otherwise internal state.\n        const selectedOptions = isControlled\n            ? resolveSelectedOptions(value, allOptions)\n            : internalSelectedOptions;\n\n        const setSelectedOptions = React.useCallback((next : OptionForListBoxProps[]) => {\n            if (!isControlled) setInternalSelectedOptions(next);\n        }, [ isControlled ]);\n\n        // The list-box wrapper renders as a <div>, not a <select> — the prior\n        // HTMLSelectElement typing was a pre-existing mistake that only got\n        // caught when Element's ref type tightened.\n        const dropdownRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n        const searchInputRef = useRef<HTMLInputElement>(null);\n        const dropdownMenuRef = useRef<HTMLDivElement>(null);\n\n        const reactId = React.useId();\n        const listboxId = id || `listbox-${reactId.replace(/:/g, \"\")}`;\n        const { describedBy } = deriveAriaIds(listboxId, helpText, errorText);\n        const filteredOptions = searchOptions(allOptions, searchValue);\n        const activeOptionId = activeIndex >= 0 && filteredOptions[activeIndex]\n            ? `${listboxId}-option-${filteredOptions[activeIndex].value}`\n            : undefined;\n\n        const handleSelectOption = (option: OptionForListBoxProps) => {\n            if (option.disabled) return;\n\n            let newSelectedOptions: OptionForListBoxProps[];\n            if (allowMultiSelect) {\n                const isSelected = selectedOptions.some(opt => opt.value === option.value);\n                if (isSelected) {\n                    newSelectedOptions = selectedOptions.filter(opt => opt.value !== option.value);\n                } else {\n                    if (selectionLimit && selectedOptions.length >= selectionLimit) {\n                        return;\n                    }\n                    newSelectedOptions = [...selectedOptions, option];\n                }\n                setSelectedOptions(newSelectedOptions);\n                onChange?.(newSelectedOptions.map(opt => opt.value));\n            } else {\n                newSelectedOptions = [option];\n                setSelectedOptions(newSelectedOptions);\n                onChange?.(option.value);\n                setIsOpen(false);\n            }\n\n            setSearchValue(\"\");\n            setActiveIndex(-1);\n        };\n\n        const handleSearchChange = (value: string) => {\n            setSearchValue(value);\n        };\n\n        const handleCustomEntry = () => {\n            if (!searchValue.trim() || !allowCustomEntries) return;\n\n            const customValue = searchValue.trim();\n            const customOption: OptionForListBoxProps = {\n                value: customValue,\n                label: customValue,\n            };\n\n            // If this option doesn't exist yet\n            if (!allOptions.some(opt => opt.value === customValue)) {\n                handleSelectOption(customOption);\n            }\n        };\n\n        const handleDeleteOption = (valueToRemove: string) => {\n            if (allowMultiSelect) {\n                // Filter out the option to remove\n                const newSelectedOptions = selectedOptions.filter(opt => opt.value !== valueToRemove);\n\n                // Update local state\n                setSelectedOptions(newSelectedOptions);\n\n                // Notify parent\n                onChange?.(newSelectedOptions.map(opt => opt.value));\n            } else {\n                // For single-select mode, just clear everything\n                setSelectedOptions([]);\n                onChange?.(\"\");\n            }\n        };\n\n        const handleClearAll = () => {\n            // Reset local state for both single and multi-select\n            setSelectedOptions([]);\n\n            // Notify parent with empty data\n            onChange?.(allowMultiSelect ? [] : \"\");\n        };\n\n        const handleKeyDown = (event: KeyboardEvent) => {\n            switch (event.key) {\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    if (!isOpen) {\n                        setIsOpen(true);\n                        setActiveIndex(0);\n                    } else {\n                        setActiveIndex(prev =>\n                            prev < filteredOptions.length - 1 ? prev + 1 : prev\n                        );\n                    }\n                    break;\n\n                case \"ArrowUp\":\n                    event.preventDefault();\n                    setActiveIndex(prev => prev > 0 ? prev - 1 : prev);\n                    break;\n\n                case \"Enter\":\n                    event.preventDefault();\n                    if (allowCustomEntries && searchValue.trim()) {\n                        const exactMatch = filteredOptions.find(opt =>\n                            opt.label.toLowerCase() === searchValue.trim().toLowerCase()\n                        );\n                        if (exactMatch) {\n                            handleSelectOption(exactMatch);\n                        } else {\n                            handleCustomEntry();\n                        }\n                    } else if (activeIndex >= 0 && filteredOptions[activeIndex]) {\n                        handleSelectOption(filteredOptions[activeIndex]);\n                    }\n                    break;\n\n                case \"Escape\":\n                    event.preventDefault();\n                    setIsOpen(false);\n                    setActiveIndex(-1);\n                    break;\n\n                case \" \": // Space key\n                    if (!isOpen) {\n                        event.preventDefault();\n                        setIsOpen(true);\n                        setActiveIndex(0);\n                    }\n                    break;\n\n                case \"Home\":\n                    if (isOpen) {\n                        event.preventDefault();\n                        setActiveIndex(0);\n                    }\n                    break;\n\n                case \"End\":\n                    if (isOpen) {\n                        event.preventDefault();\n                        setActiveIndex(filteredOptions.length - 1);\n                    }\n                    break;\n            }\n        };\n\n        useClickOutside(dropdownRef, () => {\n            setIsOpen(false);\n            setActiveIndex(-1);\n        });\n\n        useEffect(() => {\n            if (isOpen && searchInputRef.current) {\n                searchInputRef.current.focus();\n            }\n        }, [isOpen]);\n\n        // Determine if dropdown should open upward based on available viewport space\n        useEffect(() => {\n            if (isOpen && dropdownRef.current) {\n                const wrapperRect = dropdownRef.current.getBoundingClientRect();\n                const viewportHeight = window.innerHeight;\n                // Estimate dropdown height (max-height is 240px for options + search + padding)\n                const estimatedDropdownHeight = 300;\n                const spaceBelow = viewportHeight - wrapperRect.bottom;\n                const spaceAbove = wrapperRect.top;\n\n                // Open upward if not enough space below but enough space above\n                setOpenUpward(spaceBelow < estimatedDropdownHeight && spaceAbove > spaceBelow);\n            } else {\n                setOpenUpward(false);\n            }\n        }, [isOpen]);\n\n        useEffect(() => {\n            if (activeIndex >= 0) {\n                const activeOption = document.querySelector(`[data-index=\"${activeIndex}\"]`);\n                activeOption?.scrollIntoView({ block: \"nearest\" });\n            }\n        }, [activeIndex]);\n\n        // Separate wrapper-level props (margin, padding, etc.) from input-specific props\n        const { wrapperProps, inputProps } = separateWrapperProps(props);\n\n        return (\n            <FormItem\n                label={label}\n                htmlFor={listboxId}\n                helpText={helpText}\n                errorText={errorText}\n                required={required}\n                isFullWidth={isFullWidth}\n                size={size}\n                {...wrapperProps}\n            >\n                {/* PARENT */}\n                <Element\n                    as=\"div\"\n                    data-list-box\n                    classNames={[\"list-box-wrapper\", disabled ? \"disabled\" : \"\", className || \"\"]}\n                    ref={dropdownRef}\n                    isFullWidth={isFullWidth}\n                    {...inputProps}\n                >\n                    <Div\n                        className=\"list-box-input-wrapper\"\n                        id={listboxId}\n                        onClick={() => !disabled && setIsOpen(!isOpen)}\n                        role=\"combobox\"\n                        aria-haspopup=\"listbox\"\n                        aria-expanded={isOpen}\n                        aria-controls={`${listboxId}-listbox`}\n                        aria-owns={`${listboxId}-listbox`}\n                        aria-activedescendant={isOpen ? activeOptionId : undefined}\n                        aria-invalid={Boolean(errorText) || undefined}\n                        aria-required={required}\n                        aria-describedby={describedBy}\n                        aria-disabled={disabled || undefined}\n                        tabIndex={disabled ? -1 : 0}\n                    >\n                        {allowMultiSelect ? (\n                            <>\n                                {selectedOptions.length > 0 ? (\n                                    <Div className=\"options-wrapper\">\n                                        <Div className=\"options-list\">\n                                            {selectedOptions.map(option => (\n                                                <Badge\n                                                    key={option.value}\n                                                    actionIcon=\"cross\"\n                                                    onActionClick={() => handleDeleteOption(option.value)}\n                                                    actionAriaLabel={`Remove ${option.label}`}\n                                                    size=\"small\"\n                                                    shape=\"rounded\"\n                                                >\n                                                    <Text>{option.label}</Text>\n                                                </Badge>\n                                            ))}\n                                        </Div>\n                                        {selectionLimit && selectedOptions.length >= selectionLimit && (\n                                            <Text className=\"options-limit-warning\" textColour=\"red\" size=\"tiny\">\n                                                You can choose only {selectionLimit} option{selectionLimit === 1 ? \"\" : \"s\"}\n                                            </Text>\n                                        )}\n                                    </Div>\n                                ) : (\n                                    <span className=\"placeholder\">{placeholder}</span>\n                                )}\n\n                                {/* Clear button for multi-select */}\n                                {selectedOptions.length > 0 && (\n                                    <Div\n                                        className=\"icon-wrapper clear-all\"\n                                        title=\"Clear all options\"\n                                        onClick={() => handleClearAll()}\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" />\n                                            <line x1=\"5\" y1=\"19\" x2=\"19\" y2=\"5\" />\n                                        </svg>\n                                    </Div>\n                                )}\n                            </>\n                        ) : (\n                            selectedOptions[0]\n                                ? <Text className=\"selected-option\">{selectedOptions[0].label}</Text>\n                                : <span className=\"placeholder\">{placeholder}</span>\n                        )}\n\n                        <Div className=\"icon-wrapper chevrons\">\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <polyline points=\"6 9 12 4 18 9\"></polyline>\n                                <polyline points=\"6 15 12 20 18 15\"></polyline>\n                            </svg>\n                        </Div>\n                    </Div>\n\n                    {/* DROPDOWN */}\n                    {isOpen && !disabled && (\n                        <Div\n                            ref={dropdownMenuRef}\n                            className={`list-box-dropdown${openUpward ? \" opens-upward\" : \"\"}`}\n                        >\n                            <Div className=\"list-box-search-wrapper\">\n                                <InputField\n                                    type=\"text\"\n                                    ref={searchInputRef}\n                                    className=\"list-box-search\"\n                                    placeholder={allowCustomEntries ? \"Type to search or add new\" : \"Search\"}\n                                    value={searchValue}\n                                    onChange={handleSearchChange}\n                                    onKeyDown={handleKeyDown}\n                                    aria-controls={`${listboxId}-listbox`}\n                                    aria-label=\"Search options\"\n                                    isFullWidth\n                                />\n                                {allowCustomEntries && searchValue.trim() && !selectedOptions.some(opt =>\n                                    opt.label.toLowerCase() === searchValue.trim().toLowerCase()) && (\n                                    <kbd\n                                        className=\"list-box-enter-key\"\n                                        aria-label=\"Press Enter to add custom option\"\n                                    >\n                                        ↵\n                                    </kbd>\n                                )}\n                            </Div>\n\n                            {/* OPTIONS */}\n                            <Element\n                                as=\"ul\"\n                                id={`${listboxId}-listbox`}\n                                className=\"list-box-options\"\n                                role=\"listbox\"\n                                aria-multiselectable={allowMultiSelect}\n                                aria-busy={isLoading}\n                                tabIndex={-1}\n                            >\n                                {filteredOptions.length > 0 ? (\n                                    filteredOptions.map((option, index) => (\n                                        <li\n                                            key={option.value}\n                                            id={`${listboxId}-option-${option.value}`}\n                                            className={`list-box-option ${option.disabled ? \"disabled\" : \"\"} ${activeIndex === index ? \"active\" : \"\"}`}\n                                            role=\"option\"\n                                            aria-selected={selectedOptions.some(opt => opt.value === option.value)}\n                                            aria-disabled={option.disabled}\n                                            onClick={() => handleSelectOption(option)}\n                                            data-index={index}\n                                            tabIndex={-1}\n                                        >\n                                            {option.customLabel || option.label}\n                                        </li>\n                                    ))\n                                ) : (\n                                    <li\n                                        className=\"list-box-option disabled\"\n                                        role=\"alert\"\n                                        aria-live=\"polite\"\n                                    >\n                                        {allowCustomEntries\n                                            ? \"Type and press Enter to add new option\"\n                                            : \"No matches found\"\n                                        }\n                                    </li>\n                                )}\n                            </Element>\n                        </Div>\n                    )}\n                </Element>\n            </FormItem>\n        );\n    }\n);\nListBox.displayName = \"ListBox\";\n"],"names":["ListBox","React","options","label","helpText","errorText","placeholder","id","defaultValue","onChange","disabled","selectionLimit","allowMultiSelect","allowCustomEntries","isLoading","value","isFullWidth","className","required","size","props","ref","isOpen","setIsOpen","useState","searchValue","setSearchValue","activeIndex","setActiveIndex","openUpward","setOpenUpward","allOptions","resolveSelectedOptions","val","opts","v","o","isControlled","internalSelectedOptions","setInternalSelectedOptions","selectedOptions","setSelectedOptions","next","dropdownRef","useRef","searchInputRef","dropdownMenuRef","reactId","listboxId","describedBy","deriveAriaIds","filteredOptions","searchOptions","activeOptionId","handleSelectOption","option","newSelectedOptions","opt","handleSearchChange","handleCustomEntry","customValue","customOption","handleDeleteOption","valueToRemove","handleClearAll","handleKeyDown","event","prev","exactMatch","useClickOutside","useEffect","wrapperRect","viewportHeight","estimatedDropdownHeight","spaceBelow","spaceAbove","activeOption","wrapperProps","inputProps","separateWrapperProps","jsx","FormItem","jsxs","Element","Div","Fragment","Badge","Text","InputField","index"],"mappings":"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"}
+{"version":3,"file":"ListBox.js","sources":["../../../../src/components/Form/ListBox/ListBox.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useState, useRef, useEffect, MutableRefObject, KeyboardEvent } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { Div } from \"$tags\";\nimport { Element } from \"$element\";\n\n// HOOKS ===============================================================================================================\nimport { useClickOutside } from \"$hooks/UseClickOutside\";\n\n// UTILS ===============================================================================================================\nimport { separateWrapperProps } from \"$utils/propSeparation\";\n\n// STYLES ==============================================================================================================\nimport \"./list-box.css\";\n\n// OTHER ===============================================================================================================\nimport { Badge } from \"../../Badge/Badge\";\nimport { FormItem, deriveAriaIds } from \"../FormItem/FormItem\";\nimport { InputField } from \"../InputField/InputField\";\nimport { ListBoxProps, OptionForListBoxProps, ListBoxElementType, ListBoxCustomProps } from \"./constants\";\nimport { Text } from \"../../Typography/Text\";\nimport { searchOptions } from \"./listBoxUtils\";\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const ListBox = React.forwardRef<ListBoxElementType, ListBoxProps>(\n    (\n        {\n            options = [],\n            label,\n            helpText,\n            errorText,\n            placeholder = \"Select an option\",\n            id,\n            defaultValue,\n            onChange,\n            disabled,\n            selectionLimit,\n            allowMultiSelect = false,\n            allowCustomEntries = false,\n            isLoading,\n            value,\n            isFullWidth,\n            className,\n            required,\n            size,\n            ...props\n        },\n        ref\n    ) => {\n        const [isOpen, setIsOpen] = useState(false);\n        const [searchValue, setSearchValue] = useState(\"\");\n        const [activeIndex, setActiveIndex] = useState(-1);\n        const [openUpward, setOpenUpward] = useState(false);\n\n        // Create a memoized version of the combined options\n        const allOptions = React.useMemo(() => {\n            return [...options];\n        }, [options]);\n\n        // Map a value or array of values to the matching option objects.\n        const resolveSelectedOptions = React.useCallback(\n            (val : string | string[] | undefined, opts : OptionForListBoxProps[]) : OptionForListBoxProps[] => {\n                if (val == null || val === \"\") return [];\n                const values = Array.isArray(val) ? val : [val];\n                return values\n                    .map(v => opts.find(o => o.value === v))\n                    .filter((o) : o is OptionForListBoxProps => o !== undefined);\n            },\n            [],\n        );\n\n        // Internal state for uncontrolled mode. Lazy init from defaultValue so the\n        // displayed selection is correct on first paint — no spurious onChange fires.\n        const isControlled = value !== undefined;\n        const [internalSelectedOptions, setInternalSelectedOptions] = useState<OptionForListBoxProps[]>(\n            () => resolveSelectedOptions(defaultValue, allOptions),\n        );\n\n        // The effective selection: controlled value takes precedence, otherwise internal state.\n        const selectedOptions = isControlled\n            ? resolveSelectedOptions(value, allOptions)\n            : internalSelectedOptions;\n\n        const setSelectedOptions = React.useCallback((next : OptionForListBoxProps[]) => {\n            if (!isControlled) setInternalSelectedOptions(next);\n        }, [ isControlled ]);\n\n        // The list-box wrapper renders as a <div>, not a <select> — the prior\n        // HTMLSelectElement typing was a pre-existing mistake that only got\n        // caught when Element's ref type tightened.\n        const dropdownRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n        const searchInputRef = useRef<HTMLInputElement>(null);\n        const dropdownMenuRef = useRef<HTMLDivElement>(null);\n\n        const reactId = React.useId();\n        const listboxId = id || `listbox-${reactId.replace(/:/g, \"\")}`;\n        const { describedBy } = deriveAriaIds(listboxId, helpText, errorText);\n        const filteredOptions = searchOptions(allOptions, searchValue);\n        const activeOptionId = activeIndex >= 0 && filteredOptions[activeIndex]\n            ? `${listboxId}-option-${filteredOptions[activeIndex].value}`\n            : undefined;\n\n        const handleSelectOption = (option: OptionForListBoxProps) => {\n            if (option.disabled) return;\n\n            let newSelectedOptions: OptionForListBoxProps[];\n            if (allowMultiSelect) {\n                const isSelected = selectedOptions.some(opt => opt.value === option.value);\n                if (isSelected) {\n                    newSelectedOptions = selectedOptions.filter(opt => opt.value !== option.value);\n                } else {\n                    if (selectionLimit && selectedOptions.length >= selectionLimit) {\n                        return;\n                    }\n                    newSelectedOptions = [...selectedOptions, option];\n                }\n                setSelectedOptions(newSelectedOptions);\n                onChange?.(newSelectedOptions.map(opt => opt.value));\n            } else {\n                newSelectedOptions = [option];\n                setSelectedOptions(newSelectedOptions);\n                onChange?.(option.value);\n                setIsOpen(false);\n            }\n\n            setSearchValue(\"\");\n            setActiveIndex(-1);\n        };\n\n        const handleSearchChange = (value: string) => {\n            setSearchValue(value);\n        };\n\n        const handleCustomEntry = () => {\n            if (!searchValue.trim() || !allowCustomEntries) return;\n\n            const customValue = searchValue.trim();\n            const customOption: OptionForListBoxProps = {\n                value: customValue,\n                label: customValue,\n            };\n\n            // If this option doesn't exist yet\n            if (!allOptions.some(opt => opt.value === customValue)) {\n                handleSelectOption(customOption);\n            }\n        };\n\n        const handleDeleteOption = (valueToRemove: string) => {\n            if (allowMultiSelect) {\n                // Filter out the option to remove\n                const newSelectedOptions = selectedOptions.filter(opt => opt.value !== valueToRemove);\n\n                // Update local state\n                setSelectedOptions(newSelectedOptions);\n\n                // Notify parent\n                onChange?.(newSelectedOptions.map(opt => opt.value));\n            } else {\n                // For single-select mode, just clear everything\n                setSelectedOptions([]);\n                onChange?.(\"\");\n            }\n        };\n\n        const handleClearAll = () => {\n            // Reset local state for both single and multi-select\n            setSelectedOptions([]);\n\n            // Notify parent with empty data\n            onChange?.(allowMultiSelect ? [] : \"\");\n        };\n\n        const handleKeyDown = (event: KeyboardEvent) => {\n            switch (event.key) {\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    if (!isOpen) {\n                        setIsOpen(true);\n                        setActiveIndex(0);\n                    } else {\n                        setActiveIndex(prev =>\n                            prev < filteredOptions.length - 1 ? prev + 1 : prev\n                        );\n                    }\n                    break;\n\n                case \"ArrowUp\":\n                    event.preventDefault();\n                    setActiveIndex(prev => prev > 0 ? prev - 1 : prev);\n                    break;\n\n                case \"Enter\":\n                    event.preventDefault();\n                    if (allowCustomEntries && searchValue.trim()) {\n                        const exactMatch = filteredOptions.find(opt =>\n                            opt.label.toLowerCase() === searchValue.trim().toLowerCase()\n                        );\n                        if (exactMatch) {\n                            handleSelectOption(exactMatch);\n                        } else {\n                            handleCustomEntry();\n                        }\n                    } else if (activeIndex >= 0 && filteredOptions[activeIndex]) {\n                        handleSelectOption(filteredOptions[activeIndex]);\n                    }\n                    break;\n\n                case \"Escape\":\n                    event.preventDefault();\n                    setIsOpen(false);\n                    setActiveIndex(-1);\n                    break;\n\n                case \" \": // Space key\n                    if (!isOpen) {\n                        event.preventDefault();\n                        setIsOpen(true);\n                        setActiveIndex(0);\n                    }\n                    break;\n\n                case \"Home\":\n                    if (isOpen) {\n                        event.preventDefault();\n                        setActiveIndex(0);\n                    }\n                    break;\n\n                case \"End\":\n                    if (isOpen) {\n                        event.preventDefault();\n                        setActiveIndex(filteredOptions.length - 1);\n                    }\n                    break;\n            }\n        };\n\n        // When CLOSED, the combobox div is the only focusable element — the search input\n        // that carries handleKeyDown mounts only while open. Without this a keyboard-only\n        // user can't open the ListBox. Guarded by !isOpen so it only handles opening;\n        // once open, focus moves to the search input which takes over.\n        const handleComboboxKeyDown = (event: KeyboardEvent) => {\n            if (disabled || isOpen) return;\n            if (event.key === \"ArrowDown\" || event.key === \"Enter\" || event.key === \" \") {\n                event.preventDefault();\n                setIsOpen(true);\n                setActiveIndex(0);\n            }\n        };\n\n        useClickOutside(dropdownRef, () => {\n            setIsOpen(false);\n            setActiveIndex(-1);\n        });\n\n        useEffect(() => {\n            if (isOpen && searchInputRef.current) {\n                searchInputRef.current.focus();\n            }\n        }, [isOpen]);\n\n        // Determine if dropdown should open upward based on available viewport space\n        useEffect(() => {\n            if (isOpen && dropdownRef.current) {\n                const wrapperRect = dropdownRef.current.getBoundingClientRect();\n                const viewportHeight = window.innerHeight;\n                // Estimate dropdown height (max-height is 240px for options + search + padding)\n                const estimatedDropdownHeight = 300;\n                const spaceBelow = viewportHeight - wrapperRect.bottom;\n                const spaceAbove = wrapperRect.top;\n\n                // Open upward if not enough space below but enough space above\n                setOpenUpward(spaceBelow < estimatedDropdownHeight && spaceAbove > spaceBelow);\n            } else {\n                setOpenUpward(false);\n            }\n        }, [isOpen]);\n\n        useEffect(() => {\n            if (activeIndex >= 0) {\n                const activeOption = document.querySelector(`[data-index=\"${activeIndex}\"]`);\n                activeOption?.scrollIntoView({ block: \"nearest\" });\n            }\n        }, [activeIndex]);\n\n        // Separate wrapper-level props (margin, padding, etc.) from input-specific props\n        const { wrapperProps, inputProps } = separateWrapperProps(props);\n\n        return (\n            <FormItem\n                label={label}\n                htmlFor={listboxId}\n                helpText={helpText}\n                errorText={errorText}\n                required={required}\n                isFullWidth={isFullWidth}\n                size={size}\n                {...wrapperProps}\n            >\n                {/* PARENT */}\n                <Element\n                    as=\"div\"\n                    data-list-box\n                    classNames={[\"list-box-wrapper\", disabled ? \"disabled\" : \"\", className || \"\"]}\n                    ref={dropdownRef}\n                    isFullWidth={isFullWidth}\n                    {...inputProps}\n                >\n                    <Div\n                        className=\"list-box-input-wrapper\"\n                        id={listboxId}\n                        onClick={() => !disabled && setIsOpen(!isOpen)}\n                        onKeyDown={handleComboboxKeyDown}\n                        role=\"combobox\"\n                        // `htmlFor` on the visible <label> only names native controls, not a\n                        // role=\"combobox\" div — so give the combobox its own accessible name.\n                        aria-label={label}\n                        aria-haspopup=\"listbox\"\n                        aria-expanded={isOpen}\n                        aria-controls={`${listboxId}-listbox`}\n                        aria-invalid={Boolean(errorText) || undefined}\n                        aria-required={required}\n                        aria-describedby={describedBy}\n                        aria-disabled={disabled || undefined}\n                        tabIndex={disabled ? -1 : 0}\n                    >\n                        {allowMultiSelect ? (\n                            <>\n                                {selectedOptions.length > 0 ? (\n                                    <Div className=\"options-wrapper\">\n                                        <Div className=\"options-list\">\n                                            {selectedOptions.map(option => (\n                                                <Badge\n                                                    key={option.value}\n                                                    actionIcon=\"cross\"\n                                                    onActionClick={() => handleDeleteOption(option.value)}\n                                                    actionAriaLabel={`Remove ${option.label}`}\n                                                    size=\"small\"\n                                                    shape=\"rounded\"\n                                                >\n                                                    <Text>{option.label}</Text>\n                                                </Badge>\n                                            ))}\n                                        </Div>\n                                        {selectionLimit && selectedOptions.length >= selectionLimit && (\n                                            <Text className=\"options-limit-warning\" textColour=\"red\" size=\"tiny\">\n                                                You can choose only {selectionLimit} option{selectionLimit === 1 ? \"\" : \"s\"}\n                                            </Text>\n                                        )}\n                                    </Div>\n                                ) : (\n                                    <span className=\"placeholder\">{placeholder}</span>\n                                )}\n\n                                {/* Clear button for multi-select */}\n                                {selectedOptions.length > 0 && (\n                                    <Div\n                                        className=\"icon-wrapper clear-all\"\n                                        title=\"Clear all options\"\n                                        onClick={() => handleClearAll()}\n                                    >\n                                        <svg viewBox=\"0 0 24 24\">\n                                            <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" />\n                                            <line x1=\"5\" y1=\"19\" x2=\"19\" y2=\"5\" />\n                                        </svg>\n                                    </Div>\n                                )}\n                            </>\n                        ) : (\n                            selectedOptions[0]\n                                ? <Text className=\"selected-option\">{selectedOptions[0].label}</Text>\n                                : <span className=\"placeholder\">{placeholder}</span>\n                        )}\n\n                        <Div className=\"icon-wrapper chevrons\">\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <polyline points=\"6 9 12 4 18 9\"></polyline>\n                                <polyline points=\"6 15 12 20 18 15\"></polyline>\n                            </svg>\n                        </Div>\n                    </Div>\n\n                    {/* DROPDOWN */}\n                    {isOpen && !disabled && (\n                        <Div\n                            ref={dropdownMenuRef}\n                            className={`list-box-dropdown${openUpward ? \" opens-upward\" : \"\"}`}\n                        >\n                            <Div className=\"list-box-search-wrapper\">\n                                <InputField\n                                    type=\"text\"\n                                    ref={searchInputRef}\n                                    className=\"list-box-search\"\n                                    placeholder={allowCustomEntries ? \"Type to search or add new\" : \"Search\"}\n                                    value={searchValue}\n                                    onChange={handleSearchChange}\n                                    onKeyDown={handleKeyDown}\n                                    aria-controls={`${listboxId}-listbox`}\n                                    aria-activedescendant={activeOptionId}\n                                    aria-label=\"Search options\"\n                                    isFullWidth\n                                />\n                                {allowCustomEntries && searchValue.trim() && !selectedOptions.some(opt =>\n                                    opt.label.toLowerCase() === searchValue.trim().toLowerCase()) && (\n                                    <kbd\n                                        className=\"list-box-enter-key\"\n                                        aria-label=\"Press Enter to add custom option\"\n                                    >\n                                        ↵\n                                    </kbd>\n                                )}\n                            </Div>\n\n                            {/* OPTIONS */}\n                            <Element\n                                as=\"ul\"\n                                id={`${listboxId}-listbox`}\n                                className=\"list-box-options\"\n                                role=\"listbox\"\n                                aria-multiselectable={allowMultiSelect}\n                                aria-busy={isLoading}\n                                tabIndex={-1}\n                            >\n                                {filteredOptions.length > 0 ? (\n                                    filteredOptions.map((option, index) => (\n                                        <li\n                                            key={option.value}\n                                            id={`${listboxId}-option-${option.value}`}\n                                            className={`list-box-option ${option.disabled ? \"disabled\" : \"\"} ${activeIndex === index ? \"active\" : \"\"}`}\n                                            role=\"option\"\n                                            aria-selected={selectedOptions.some(opt => opt.value === option.value)}\n                                            aria-disabled={option.disabled}\n                                            onClick={() => handleSelectOption(option)}\n                                            data-index={index}\n                                            tabIndex={-1}\n                                        >\n                                            {option.customLabel || option.label}\n                                        </li>\n                                    ))\n                                ) : (\n                                    <li\n                                        className=\"list-box-option disabled\"\n                                        role=\"alert\"\n                                        aria-live=\"polite\"\n                                    >\n                                        {allowCustomEntries\n                                            ? \"Type and press Enter to add new option\"\n                                            : \"No matches found\"\n                                        }\n                                    </li>\n                                )}\n                            </Element>\n                        </Div>\n                    )}\n                </Element>\n            </FormItem>\n        );\n    }\n);\nListBox.displayName = \"ListBox\";\n"],"names":["ListBox","React","options","label","helpText","errorText","placeholder","id","defaultValue","onChange","disabled","selectionLimit","allowMultiSelect","allowCustomEntries","isLoading","value","isFullWidth","className","required","size","props","ref","isOpen","setIsOpen","useState","searchValue","setSearchValue","activeIndex","setActiveIndex","openUpward","setOpenUpward","allOptions","resolveSelectedOptions","val","opts","v","o","isControlled","internalSelectedOptions","setInternalSelectedOptions","selectedOptions","setSelectedOptions","next","dropdownRef","useRef","searchInputRef","dropdownMenuRef","reactId","listboxId","describedBy","deriveAriaIds","filteredOptions","searchOptions","activeOptionId","handleSelectOption","option","newSelectedOptions","opt","handleSearchChange","handleCustomEntry","customValue","customOption","handleDeleteOption","valueToRemove","handleClearAll","handleKeyDown","event","prev","exactMatch","handleComboboxKeyDown","useClickOutside","useEffect","wrapperRect","viewportHeight","estimatedDropdownHeight","spaceBelow","spaceAbove","activeOption","wrapperProps","inputProps","separateWrapperProps","jsx","FormItem","jsxs","Element","Div","Fragment","Badge","Text","InputField","index"],"mappings":"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"}