@viasat/beam-react 2.29.1 → 2.36.0

package/lib/Select/Select.es.js

@@ -1,259 +1,272 @@
-import { jsxs as x, jsx as i } from "react/jsx-runtime";
-import ke, { useCallback as k, useMemo as C, createElement as Fe } from "react";
-import { g as Le } from "../../chunks/classNames.BTJmrO_L.js";
-import { t as Re } from "../../chunks/constants.CKKGf1-i.js";
-import { s as r } from "../../chunks/combobox.module.D_HXP875.js";
-import F from "clsx";
-import { b as qe, H as Ae } from "../../chunks/form.context.D7b4066_.js";
-import { LabelProvider as He } from "../Form/contexts/label.context.es.js";
-import { HelperTextProvider as je } from "../Form/contexts/helperText.context.es.js";
-import { ActionList as L } from "../ActionList/ActionList.es.js";
-import { useSelectDropdown as Ke } from "./useSelectDropdown.es.js";
-import { SelectDropdown as Te } from "./SelectDropdown.es.js";
-import { useSelectChips as Ge } from "./useSelectChips.es.js";
-import { useSelectKeyboardManager as We } from "./useSelectKeyboardManager.es.js";
-import ze from "./useClearSelection.es.js";
-import { OptionChips as Je } from "../_Options/OptionChips.es.js";
-import { SelectField as Qe } from "./SelectField.es.js";
-import Ue from "./useSelectA11y.es.js";
-import { useCreateOptionsContext as Xe, OptionsProvider as Ye } from "../_Options/Option.context.es.js";
-import { Option as Ze } from "../_Options/Option.es.js";
-import { useSelectValue as _e } from "../_Options/useSelectValue.es.js";
-import { createSelectionStrategy as et } from "../_Options/strategies/SelectionStrategy.es.js";
-const { baseClassNamePrefix: tt, subElementClassPrefix: O, classModifierPrefix: a } = Le("combobox"), lt = ke.forwardRef(
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import { g as Ke } from "../../chunks/classNames.BTJmrO_L.js";
+import { t as Te } from "../../chunks/constants.CKKGf1-i.js";
+import { s as i } from "../../chunks/combobox.module.D_HXP875.js";
+import We from "clsx";
+import ze, { useCallback as H, useMemo as y } from "react";
+import { b as Je, H as Qe } from "../../chunks/form.context.D7b4066_.js";
+import { LabelProvider as Ue } from "../Form/contexts/label.context.es.js";
+import { HelperTextProvider as Xe } from "../Form/contexts/helperText.context.es.js";
+import { ActionList as j } from "../ActionList/ActionList.es.js";
+import { useSelectDropdown as Ye } from "./useSelectDropdown.es.js";
+import { SelectDropdown as Ze } from "./SelectDropdown.es.js";
+import { useSelectChips as _e } from "./useSelectChips.es.js";
+import { useSelectKeyboardManager as et } from "./useSelectKeyboardManager.es.js";
+import tt from "./useClearSelection.es.js";
+import { OptionChips as rt } from "../_Options/OptionChips.es.js";
+import { SelectField as it } from "./SelectField.es.js";
+import ot from "./useSelectA11y.es.js";
+import { useCreateOptionsContext as st, OptionsProvider as lt } from "../_Options/Option.context.es.js";
+import { Option as at } from "../_Options/Option.es.js";
+import { OptionGroup as dt } from "../_Options/OptionGroup.es.js";
+import "../_Options/OptionGroup.context.es.js";
+import { getLastVisibleStructureIndex as nt } from "../_Options/getLastVisibleStructureIndex.es.js";
+import { useRenderOption as ct } from "../_Options/useRenderOption.es.js";
+import { useSelectValue as pt } from "../_Options/useSelectValue.es.js";
+import { createSelectionStrategy as mt } from "../_Options/strategies/SelectionStrategy.es.js";
+const { baseClassNamePrefix: ut, subElementClassPrefix: P, classModifierPrefix: a } = Ke("combobox"), ft = ze.forwardRef(
   ({
-    theme: v,
-    width: q,
+    theme: O,
+    width: k,
     error: d,
-    children: A,
-    label: P = null,
-    contentBefore: H,
-    contentAfter: j,
-    fluid: K = !1,
-    helperText: g = null,
-    validationRules: T = [],
-    className: G,
-    hideRequiredMarker: W = !1,
-    disabled: z = !1,
-    readOnly: J = !1,
-    required: Q = !1,
-    placeholder: U = "",
+    children: K,
+    label: $ = null,
+    contentBefore: T,
+    contentAfter: W,
+    fluid: z = !1,
+    helperText: N = null,
+    validationRules: J = [],
+    className: Q,
+    hideRequiredMarker: U = !1,
+    disabled: X = !1,
+    readOnly: Y = !1,
+    required: Z = !1,
+    placeholder: _ = "",
     onChange: m,
     ...u
-  }, X) => {
+  }, ee) => {
     const {
-      id: I,
-      name: Y,
-      "aria-describedby": Z,
+      id: V,
+      name: te,
+      "aria-describedby": re,
       multiple: e = !1,
-      clearable: _ = e,
-      ...ee
-    } = u, { showErrors: te, isInvalid: le, errorShown: re, disabled: l, readOnly: s, required: $ } = qe({
-      name: Y,
-      validationRules: T,
-      disabledProp: z,
-      readOnlyProp: J,
-      requiredProp: Q
-    }), { aria: f, ids: oe } = Ue({
-      helperText: g,
-      externalDescribedBy: Z,
+      clearable: ie = e,
+      ...oe
+    } = u, { showErrors: se, isInvalid: le, errorShown: ae, disabled: r, readOnly: s, required: w } = Je({
+      name: te,
+      validationRules: J,
+      disabledProp: X,
+      readOnlyProp: Y,
+      requiredProp: Z
+    }), { aria: f, ids: de } = ot({
+      helperText: N,
+      externalDescribedBy: re,
       error: d,
-      errorShown: re,
+      errorShown: ae,
       invalid: !!d || le
-    }), { helperTextId: se, errorId: ie, validationErrorsId: ae, labelId: N } = oe, de = !!(d != null && d.length), ne = k(
-      (o) => {
-        m == null || m(o);
+    }), { helperTextId: ne, errorId: ce, validationErrorsId: pe, labelId: D } = de, me = !!(d != null && d.length), ue = H(
+      (t) => {
+        m == null || m(t);
       },
       [m]
     ), {
       value: n,
-      setValue: B,
-      selectProps: ce,
-      handleBlur: w,
+      setValue: L,
+      selectProps: fe,
+      handleBlur: M,
       singleValue: b
-    } = _e({ onChange: ne, ...u }, X), y = !n || Array.isArray(n) && !n.length, {
-      optionsContext: pe,
-      optionIds: c,
-      optionsProps: p,
-      selectedOptionsProps: M,
-      deselectOptionValue: D
-    } = Xe(n, B, e), h = C(() => {
+    } = pt({ onChange: ue, ...u }, ee), g = !n || Array.isArray(n) && !n.length, {
+      optionsContext: be,
+      optionIds: h,
+      optionsProps: c,
+      selectedOptionsProps: R,
+      deselectOptionValue: E,
+      structureIds: S,
+      groupsProps: he,
+      optionIdsByGroup: C
+    } = st(n, L, e), x = y(() => {
       if (!b) return;
-      const o = c.map((t) => p.get(t)).findIndex((t) => (t == null ? void 0 : t.value) === b);
-      return o !== -1 ? o : void 0;
-    }, [c, p, b]), me = C(() => {
-      if (h === void 0) return;
-      const o = p.get(c[h]);
-      return o == null ? void 0 : o.label;
-    }, [h, c, p]), { getFieldProps: ue, dropdownProps: fe, refs: be, open: E, setOpen: S, status: he } = Ke({
-      disabled: l,
+      const t = h.map((l) => c.get(l)).findIndex((l) => (l == null ? void 0 : l.value) === b);
+      return t !== -1 ? t : void 0;
+    }, [h, c, b]), xe = y(() => {
+      if (x === void 0) return;
+      const t = c.get(h[x]);
+      return t == null ? void 0 : t.label;
+    }, [x, h, c]), { getFieldProps: ve, dropdownProps: ye, refs: Oe, open: F, setOpen: I, status: ge } = Ye({
+      disabled: r,
       readOnly: s,
-      lastSelectedOptionIndex: h
-    }), xe = F(
-      r[tt],
-      v && Re(v),
-      K && r[`${a}fluid`],
-      f.invalid && r[`${a}error`],
-      l && r[`${a}disabled`],
-      s && r[`${a}read-only`],
-      y && r[`${a}empty`],
-      e && r[`${a}multiple`],
-      r[`${a}dropdown-${he}`],
-      G
-    ), { canClear: ve, handleClear: ye } = ze({
+      lastSelectedOptionIndex: x
+    }), Se = We(
+      i[ut],
+      O && Te(O),
+      z && i[`${a}fluid`],
+      f.invalid && i[`${a}error`],
+      r && i[`${a}disabled`],
+      s && i[`${a}read-only`],
+      g && i[`${a}empty`],
+      e && i[`${a}multiple`],
+      i[`${a}dropdown-${ge}`],
+      Q
+    ), { canClear: Ce, handleClear: Ie } = tt({
       multiple: e,
-      clearable: _,
-      isEmpty: y,
-      disabled: l,
+      clearable: ie,
+      isEmpty: g,
+      disabled: r,
       readOnly: s,
-      setValue: B,
-      setOpen: S
+      setValue: L,
+      setOpen: I
     }), {
-      chipGroupProps: Se,
-      handleBlur: V,
-      selectedChip: Ce,
-      setSelectedChip: Oe,
-      enabled: Pe,
-      selectPreviousChip: ge,
-      selectNextChip: Ie,
-      options: $e,
-      deselectOptionValue: Ne
-    } = Ge({
+      chipGroupProps: Pe,
+      handleBlur: G,
+      selectedChip: Be,
+      setSelectedChip: $e,
+      enabled: Ne,
+      selectPreviousChip: Ve,
+      selectNextChip: we,
+      options: De,
+      deselectOptionValue: Le
+    } = _e({
       multiple: e,
-      disabled: l,
+      disabled: r,
       readOnly: s,
-      open: E,
-      setOpen: S,
-      options: M,
-      deselectOptionValue: D,
-      fieldRef: be.domReference
-    }), { getKeyboardProps: Be } = We({
+      open: F,
+      setOpen: I,
+      options: R,
+      deselectOptionValue: E,
+      fieldRef: Oe.domReference
+    }), { getKeyboardProps: Me } = et({
       multiple: e,
-      disabled: l,
+      disabled: r,
       readOnly: s,
-      open: E,
-      setOpen: S,
+      open: F,
+      setOpen: I,
       chips: {
-        enabled: Pe,
-        selectedChip: Ce,
-        setSelectedChip: Oe,
-        selectPreviousChip: ge,
-        selectNextChip: Ie,
-        options: $e,
-        deselectOptionValue: Ne
+        enabled: Ne,
+        selectedChip: Be,
+        setSelectedChip: $e,
+        selectPreviousChip: Ve,
+        selectNextChip: we,
+        options: De,
+        deselectOptionValue: Le
       }
-    }), we = C(
-      () => et(e),
+    }), Re = y(
+      () => mt(e),
       [e]
-    ), Me = k(() => {
-      w(), V();
-    }, [w, V]), { ref: De, ...Ee } = Be(ue());
-    return /* @__PURE__ */ x(Ye, { value: pe, children: [
-      /* @__PURE__ */ x("div", { className: xe, style: { maxWidth: q }, children: [
-        /* @__PURE__ */ i(
-          He,
+    ), Ee = H(() => {
+      M(), G();
+    }, [M, G]), q = ct({
+      optionsProps: c,
+      selectionStrategy: Re,
+      value: n,
+      multiple: e,
+      optionClassName: i[`${P}option`]
+    }), Fe = y(
+      () => nt(S, C),
+      [S, C]
+    ), { ref: Ge, ...qe } = Me(ve());
+    return /* @__PURE__ */ v(lt, { value: be, children: [
+      /* @__PURE__ */ v("div", { className: Se, style: { maxWidth: k }, children: [
+        /* @__PURE__ */ o(
+          Ue,
           {
-            ctxHtmlFor: I,
-            ctxDisabled: l,
-            ctxRequired: $ && !W,
-            ctxId: N,
-            children: P
+            ctxHtmlFor: V,
+            ctxDisabled: r,
+            ctxRequired: w && !U,
+            ctxId: D,
+            children: $
           }
         ),
-        /* @__PURE__ */ i(
-          Qe,
+        /* @__PURE__ */ o(
+          it,
           {
-            id: I,
-            disabled: l,
+            id: V,
+            disabled: r,
             readOnly: s,
-            required: $,
+            required: w,
             invalid: f.invalid,
             errorMessage: f.errorMessage,
-            labelId: !u.ariaLabel && P ? N : void 0,
+            labelId: !u.ariaLabel && $ ? D : void 0,
             ariaLabel: u.ariaLabel,
             describedBy: f.describedBy,
-            contentBefore: H,
-            contentAfter: j,
-            chips: /* @__PURE__ */ i(
-              Je,
+            contentBefore: T,
+            contentAfter: W,
+            chips: /* @__PURE__ */ o(
+              rt,
               {
                 multiple: e,
-                disabled: l,
+                disabled: r,
                 readOnly: s,
-                selectedOptions: M,
-                deselectOptionValue: D,
-                chipGroupProps: Se,
-                input: /* @__PURE__ */ i(
+                selectedOptions: R,
+                deselectOptionValue: E,
+                chipGroupProps: Pe,
+                input: /* @__PURE__ */ o(
                   "input",
                   {
-                    className: r[`${O}field__input`],
-                    placeholder: e && !y ? "" : U,
-                    disabled: l,
+                    className: i[`${P}field__input`],
+                    placeholder: e && !g ? "" : _,
+                    disabled: r,
                     readOnly: !0,
                     autoComplete: "off",
                     tabIndex: -1,
                     autoFocus: !1,
-                    value: e ? "" : me ?? b
+                    value: e ? "" : xe ?? b
                   }
                 )
               }
             ),
-            hasClearButton: ve,
-            onClear: ye,
-            onBlur: Me,
-            ...Ee,
-            ref: De
+            hasClearButton: Ce,
+            onClear: Ie,
+            onBlur: Ee,
+            ...qe,
+            ref: Ge
           }
         ),
-        /* @__PURE__ */ x(je, { ctxId: se, ctxDisabled: l, children: [
-          g,
-          de && /* @__PURE__ */ i(Ae, { id: ie, appearance: "negative", children: d })
+        /* @__PURE__ */ v(Xe, { ctxId: ne, ctxDisabled: r, children: [
+          N,
+          me && /* @__PURE__ */ o(Qe, { id: ce, appearance: "negative", children: d })
         ] }),
-        te(ae)
+        se(pe)
       ] }),
-      /* @__PURE__ */ x("select", { ...ee, ...ce, hidden: !0, multiple: e, children: [
-        /* @__PURE__ */ i("option", { value: "", children: "empty" }),
-        A
+      /* @__PURE__ */ v("select", { ...oe, ...fe, hidden: !0, multiple: e, children: [
+        /* @__PURE__ */ o("option", { value: "", children: "empty" }),
+        K
       ] }),
-      /* @__PURE__ */ i(
-        Te,
+      /* @__PURE__ */ o(
+        Ze,
         {
-          ...fe,
-          className: r[`${O}dropdown`],
-          disabled: l,
+          ...ye,
+          className: i[`${P}dropdown`],
+          disabled: r,
           readOnly: s,
-          theme: v,
+          theme: O,
           multiple: e,
-          children: /* @__PURE__ */ i(L, { role: "listbox", children: c.map((o) => {
-            const t = p.get(o);
-            if (!t) return null;
-            const Ve = we.isSelected(
-              t.value,
-              n
-            );
-            return /* @__PURE__ */ Fe(
-              L.Item,
+          children: /* @__PURE__ */ o(j, { role: "listbox", children: S.map((t, l) => {
+            if (t.kind === "option")
+              return q(t.id);
+            const p = he.get(t.id);
+            if (!p) return null;
+            const A = C.get(t.id) ?? [], Ae = A.length > 0, He = l === Fe, je = !!p.divider && !He;
+            return /* @__PURE__ */ o(
+              j.Group,
               {
-                ...t,
-                className: F(
-                  r[`${O}option`],
-                  t.className
-                ),
-                defaultSelected: Ve,
-                key: `opt-${t.value ?? t.label}`,
-                kind: e ? "checkbox" : "singleCheckMark",
-                role: "option"
-              }
+                heading: p.heading,
+                divider: je,
+                disabled: p.disabled,
+                hidden: !Ae,
+                children: A.map((ke) => q(ke, p.disabled))
+              },
+              t.id
             );
           }) })
         }
       )
     ] });
   }
-), R = lt;
-R.Option = Ze;
-R.displayName = "Select";
+), B = ft;
+B.Option = at;
+B.OptionGroup = dt;
+B.displayName = "Select";
 export {
-  R as Select,
-  R as default
+  B as Select,
+  B as default
 };

package/lib/Select/SelectDropdown.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@floating-ui/react"),B=require("../Box/Box.cjs.js"),C=require("clsx"),a=require("../../chunks/classNames.DAeKwerT.js"),P=require("../../chunks/constants.hwjHOsvT.js");require("../_Options/Option.context.cjs.js");const v=require("../_Options/Option.cjs.js"),y=require("react");require("../../chunks/form.context.hesWPMlU.js");require("../Form/contexts/label.context.cjs.js");require("../Form/contexts/helperText.context.cjs.js");const S=require("../ActionList/ActionList.context.cjs.js"),O=require("../../chunks/floatingui.module.D3Aw_aYe.js"),M=require("../../chunks/popover.module.DGUJIXrP.js"),{baseClassNamePrefix:w}=a.getBEMClassNames("floatingui"),{baseClassNamePrefix:A}=a.getBEMClassNames("popover"),L=[v.Option],T=({setOpen:t,isMounted:n,status:l,nodeId:c,context:u,getFloatingProps:d,floatingStyles:x,labelsRef:f,elementsRef:q,getItemProps:g,setFloating:p,disabled:m,readOnly:N,theme:o,className:b,children:F,multiple:i,activeIndex:_,onItemClick:s})=>{const j=y.useCallback(h=>{s==null||s(h),!i&&t(!1)},[i,s,t]);return n?e.jsx(r.FloatingTree,{children:e.jsx(r.FloatingNode,{id:c,children:e.jsx(r.FloatingPortal,{children:e.jsx(r.FloatingFocusManager,{context:u,modal:!1,initialFocus:0,disabled:m||N,closeOnFocusOut:!0,restoreFocus:!0,returnFocus:!0,guards:!0,order:["content","reference"],children:e.jsx(B.Box,{"data-status":l,className:C(o&&P.themeClassName(o),O.floatinguiStyles[w],M.popoverStyles[A],b),...d(),style:x,ref:p,children:e.jsx(S.ActionListContextProvider,{allowChildrenTypes:L,getItemProps:g,itemsFocusable:!1,onItemClick:j,labelsRef:f,elementsRef:q,activeIndex:_,children:F})})})})})}):null};exports.SelectDropdown=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("@floating-ui/react"),B=require("../Box/Box.cjs.js"),C=require("clsx"),a=require("../../chunks/classNames.DAeKwerT.js"),P=require("../../chunks/constants.hwjHOsvT.js");require("../_Options/Option.context.cjs.js");const v=require("../_Options/Option.cjs.js"),y=require("react");require("../_Options/OptionGroup.context.cjs.js");require("../../utils/hooks/useId.cjs.js");require("../ActionList/ActionList.cjs.js");require("../../chunks/form.context.hesWPMlU.js");require("../Form/contexts/label.context.cjs.js");require("../Form/contexts/helperText.context.cjs.js");const S=require("../ActionList/ActionList.context.cjs.js"),O=require("../../chunks/FloatingUI.arrow.DFhYQv_F.js"),w=require("../../chunks/popover.module.DGUJIXrP.js"),{baseClassNamePrefix:M}=a.getBEMClassNames("floatingui"),{baseClassNamePrefix:A}=a.getBEMClassNames("popover"),L=[v.Option],T=({setOpen:t,isMounted:n,status:l,nodeId:c,context:u,getFloatingProps:d,floatingStyles:q,labelsRef:x,elementsRef:g,getItemProps:f,setFloating:p,disabled:F,readOnly:_,theme:o,className:b,children:m,multiple:i,activeIndex:N,onItemClick:r})=>{const j=y.useCallback(h=>{r==null||r(h),!i&&t(!1)},[i,r,t]);return n?e.jsx(s.FloatingTree,{children:e.jsx(s.FloatingNode,{id:c,children:e.jsx(s.FloatingPortal,{children:e.jsx(s.FloatingFocusManager,{context:u,modal:!1,initialFocus:0,disabled:F||_,closeOnFocusOut:!0,restoreFocus:!0,returnFocus:!0,guards:!0,order:["content","reference"],children:e.jsx(B.Box,{"data-status":l,className:C(o&&P.themeClassName(o),O.floatinguiStyles[M],w.popoverStyles[A],b),...d(),style:q,ref:p,children:e.jsx(S.ActionListContextProvider,{allowChildrenTypes:L,getItemProps:f,itemsFocusable:!1,onItemClick:j,labelsRef:x,elementsRef:g,activeIndex:N,children:m})})})})})}):null};exports.SelectDropdown=T;

package/lib/Select/SelectDropdown.es.js

@@ -7,38 +7,41 @@ import { t as O } from "../../chunks/constants.CKKGf1-i.js";
 import "../_Options/Option.context.es.js";
 import { Option as T } from "../_Options/Option.es.js";
 import { useCallback as j } from "react";
+import "../_Options/OptionGroup.context.es.js";
+import "../../utils/hooks/useId.es.js";
+import "../ActionList/ActionList.es.js";
 import "../../chunks/form.context.D7b4066_.js";
 import "../Form/contexts/label.context.es.js";
 import "../Form/contexts/helperText.context.es.js";
 import { ActionListContextProvider as A } from "../ActionList/ActionList.context.es.js";
-import { f as D } from "../../chunks/floatingui.module.BcBFebz0.js";
+import { f as D } from "../../chunks/FloatingUI.arrow.tN5_IctZ.js";
 import { p as E } from "../../chunks/popover.module.3dnl8y6-.js";
-const { baseClassNamePrefix: L } = a("floatingui"), { baseClassNamePrefix: q } = a("popover"), z = [T], I = ({
+const { baseClassNamePrefix: L } = a("floatingui"), { baseClassNamePrefix: q } = a("popover"), z = [T], er = ({
   setOpen: e,
   isMounted: i,
   status: l,
   nodeId: m,
   context: n,
-  getFloatingProps: f,
-  floatingStyles: p,
+  getFloatingProps: p,
+  floatingStyles: f,
   labelsRef: c,
   elementsRef: u,
   getItemProps: d,
   setFloating: g,
   disabled: F,
   readOnly: x,
-  theme: s,
+  theme: t,
   className: N,
   children: h,
-  multiple: t,
+  multiple: s,
   activeIndex: C,
   onItemClick: o
 }) => {
   const P = j(
     (b) => {
-      o == null || o(b), !t && e(!1);
+      o == null || o(b), !s && e(!1);
     },
-    [t, o, e]
+    [s, o, e]
   );
   return i ? /* @__PURE__ */ r(v, { children: /* @__PURE__ */ r(y, { id: m, children: /* @__PURE__ */ r(B, { children: /* @__PURE__ */ r(
     S,
@@ -57,13 +60,13 @@ const { baseClassNamePrefix: L } = a("floatingui"), { baseClassNamePrefix: q } =
         {
           "data-status": l,
           className: M(
-            s && O(s),
+            t && O(t),
             D[L],
             E[q],
             N
           ),
-          ...f(),
-          style: p,
+          ...p(),
+          style: f,
           ref: g,
           children: /* @__PURE__ */ r(
             A,
@@ -84,5 +87,5 @@ const { baseClassNamePrefix: L } = a("floatingui"), { baseClassNamePrefix: q } =
   ) }) }) }) : null;
 };
 export {
-  I as SelectDropdown
+  er as SelectDropdown
 };

package/lib/_Options/Option.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),t=require("react"),d=require("./Option.context.cjs.js"),x=require("../../utils/functions.cjs.js"),f=({className:g,label:i,value:m,children:o,...u})=>{const s=t.useMemo(()=>i??x.extractTextFromReactNode(o),[i,o]),n=m??s,{selectOption:c,deselectOption:r,registerOption:l,unregisterOption:a,setOptionProps:p}=d.useOptionsContext(),e=t.useMemo(()=>Symbol("OptionId"),[]),O=t.useCallback(_=>{_?c(e):r(e)},[r,e,c]);return t.useLayoutEffect(()=>(l(e),()=>a(e)),[e,l,a]),t.useEffect(()=>{p(e,{...u,label:s,value:n,children:o,onSelectionChange:O})},[o,e,s,O,u,p,n]),b.jsx("option",{value:n,children:s})};exports.Option=f;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),s=require("react"),g=require("./Option.context.cjs.js"),m=require("./OptionGroup.context.cjs.js"),q=require("../../utils/functions.cjs.js"),v=require("../../utils/hooks/useId.cjs.js"),d=({className:C,label:u,value:f,children:t,...i})=>{const o=s.useMemo(()=>u??q.extractTextFromReactNode(t),[u,t]),n=f??o,{selectOption:r,deselectOption:c,registerOption:l,unregisterOption:a,setOptionProps:p}=g.useOptionsContext(),{groupId:O}=m.useOptionGroupContext(),e=v.useId()??"",_=s.useCallback(x=>{x?r(e):c(e)},[c,e,r]);return s.useLayoutEffect(()=>(l(e,O),()=>a(e)),[e,O,l,a]),s.useEffect(()=>{p(e,{...i,label:o,value:n,children:t,onSelectionChange:_})},[t,e,o,_,i,p,n]),b.jsx("option",{value:n,children:o})};exports.Option=d;exports.default=d;

package/lib/_Options/Option.context.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),h=r.createContext(null),P=h.Provider,S=()=>{const o=r.useContext(h);if(!o)throw new Error("useOptionsContext must be used within an OptionsProvider");return o},I=o=>Array.isArray(o)?o:o!==void 0?[o]:[],V=(o,c,u)=>{const p=r.useRef(void 0),[i,O]=r.useState(()=>new Map),[a,C]=r.useState(()=>[]),g=r.useRef(i);g.current=i;const l=r.useMemo(()=>I(o),[o]),d=r.useRef(l);d.current=l,r.useMemo(()=>{if(!l.length)p.current=void 0;else{const n=l[l.length-1],t=a.map(e=>i.get(e)).findIndex(e=>(e==null?void 0:e.value)===n);p.current=t}},[l,a,i]);const x=r.useCallback(n=>{const t=g.current.get(n),e=t==null?void 0:t.value,s=d.current;t&&e&&c(u?[...s.filter(f=>f!==e),e]:e)},[u,c]),b=r.useCallback(n=>{const t=g.current.get(n),e=t==null?void 0:t.value,s=d.current;if(t&&e)if(u){if(!s.includes(e))return;c(s.filter(f=>f!==e))}else return},[u,c]),m=r.useCallback(n=>{if(!u||n===void 0)return;const e=I(n)[0];if(!e)return;const s=d.current;s.includes(e)&&c(s.filter(f=>f!==e))},[u,c]),M=r.useCallback(n=>C(t=>[...t,n]),[C]),v=r.useCallback(n=>{C(t=>t.filter(e=>e!==n)),O(t=>{const e=new Map(t);return e.delete(n),e})},[O,C]),w=r.useCallback((n,t)=>O(e=>{const s=new Map(e);return s.set(n,t),s}),[O]),y=r.useMemo(()=>({setValue:c,registerOption:M,unregisterOption:v,setOptionProps:w,selectOption:x,deselectOption:b}),[c,M,v,w,x,b]),k=r.useMemo(()=>{if(!o||!i.size)return[];const n=Array.from(i.values()),t=new Map(n.map(e=>[e.value,e]));return d.current.length===0?[]:d.current.map(e=>t.get(e)).filter(Boolean)},[o,i]),R=r.useCallback(n=>g.current.get(n),[]),z=r.useCallback(n=>{const t=a[n];if(t)return R(t)},[R,a]);return r.useMemo(()=>({optionsContext:y,selectedOptionsProps:k,optionIds:a,optionsProps:i,deselectOptionValue:m,indexOfLastSelectedOptionRef:p,getOptionByIndex:z}),[y,m,a,i,k,p,z])};exports.OptionsProvider=P;exports.useCreateOptionsContext=V;exports.useOptionsContext=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),V=r.createContext(null),D=V.Provider,L=()=>{const o=r.useContext(V);if(!o)throw new Error("useOptionsContext must be used within an OptionsProvider");return o},z=o=>Array.isArray(o)?o:o!==void 0?[o]:[],F=(o,u,a)=>{const g=r.useRef(void 0),[c,M]=r.useState(()=>new Map),[i,k]=r.useState(()=>[]),[A,w]=r.useState(()=>new Map),[C,b]=r.useState(()=>new Map),[x,d]=r.useState(()=>[]),O=r.useRef(c);O.current=c;const l=r.useMemo(()=>z(o),[o]),p=r.useRef(l);p.current=l,r.useMemo(()=>{if(!l.length)g.current=void 0;else{const n=l[l.length-1],t=i.map(e=>c.get(e)).findIndex(e=>(e==null?void 0:e.value)===n);g.current=t}},[l,i,c]);const m=r.useCallback(n=>{const t=O.current.get(n),e=t==null?void 0:t.value,s=p.current;t&&e&&u(a?[...s.filter(f=>f!==e),e]:e)},[a,u]),y=r.useCallback(n=>{const t=O.current.get(n),e=t==null?void 0:t.value,s=p.current;if(t&&e)if(a){if(!s.includes(e))return;u(s.filter(f=>f!==e))}else return},[a,u]),B=r.useCallback(n=>{if(!a||n===void 0)return;const e=z(n)[0];if(!e)return;const s=p.current;s.includes(e)&&u(s.filter(f=>f!==e))},[a,u]),v=r.useCallback((n,t)=>{k(e=>[...e,n]),b(e=>{const s=new Map(e);return s.set(n,t),s}),t===null&&d(e=>[...e,{kind:"option",id:n}])},[]),S=r.useCallback(n=>{k(t=>t.filter(e=>e!==n)),M(t=>{const e=new Map(t);return e.delete(n),e}),b(t=>{const e=new Map(t);return e.delete(n),e}),d(t=>t.filter(e=>!(e.kind==="option"&&e.id===n)))},[]),h=r.useCallback((n,t)=>M(e=>{const s=new Map(e);return s.set(n,t),s}),[]),I=r.useCallback(n=>{d(t=>[...t,{kind:"group",id:n}])},[]),P=r.useCallback(n=>{w(t=>{const e=new Map(t);return e.delete(n),e}),d(t=>t.filter(e=>!(e.kind==="group"&&e.id===n)))},[]),G=r.useCallback((n,t)=>w(e=>{const s=new Map(e);return s.set(n,t),s}),[]),E=r.useMemo(()=>({setValue:u,registerOption:v,unregisterOption:S,setOptionProps:h,selectOption:m,deselectOption:y,registerGroup:I,unregisterGroup:P,setGroupProps:G}),[u,v,S,h,m,y,I,P,G]),T=r.useMemo(()=>{if(!o||!c.size)return[];const n=Array.from(c.values()),t=new Map(n.map(e=>[e.value,e]));return p.current.length===0?[]:p.current.map(e=>t.get(e)).filter(Boolean)},[o,c]),R=r.useCallback(n=>O.current.get(n),[]),j=r.useCallback(n=>{const t=i[n];if(t)return R(t)},[R,i]),q=r.useMemo(()=>{const n=new Map;return x.forEach(t=>{t.kind==="group"&&n.set(t.id,[])}),i.forEach(t=>{const e=C.get(t);if(e!=null){const s=n.get(e);s&&s.push(t)}}),n},[x,i,C]);return{optionsContext:E,selectedOptionsProps:T,optionIds:i,optionsProps:c,deselectOptionValue:B,indexOfLastSelectedOptionRef:g,getOptionByIndex:j,structureIds:x,groupsProps:A,optionGroupOf:C,optionIdsByGroup:q}};exports.OptionsProvider=D;exports.useCreateOptionsContext=F;exports.useOptionsContext=L;

package/lib/_Options/Option.context.d.ts

@@ -1,11 +1,22 @@
 import { SelectHTMLAttributes } from 'react';
-import { OptionProps } from './Option.types';
+import { OptionGroupProps, OptionProps } from './Option.types';
+export type StructureNode = {
+    kind: 'option';
+    id: string;
+} | {
+    kind: 'group';
+    id: string;
+};
 interface OptionsContextValue {
-    selectOption: (id: symbol) => void;
-    deselectOption: (id: symbol) => void;
-    registerOption: (id: symbol) => void;
-    unregisterOption: (id: symbol) => void;
-    setOptionProps: (id: symbol, optionProps: OptionProps) => void;
+    selectOption: (id: string) => void;
+    deselectOption: (id: string) => void;
+    /** Register an Option. Pass `null` for `groupId` when the Option is rendered at the root (not inside any OptionGroup). */
+    registerOption: (id: string, groupId: string | null) => void;
+    unregisterOption: (id: string) => void;
+    setOptionProps: (id: string, optionProps: OptionProps) => void;
+    registerGroup: (id: string) => void;
+    unregisterGroup: (id: string) => void;
+    setGroupProps: (id: string, groupProps: OptionGroupProps) => void;
 }
 export declare const OptionsProvider: import('react').Provider<OptionsContextValue | null>;
 export declare const useOptionsContext: () => OptionsContextValue;
@@ -13,17 +24,24 @@ type ValueType = SelectHTMLAttributes<HTMLSelectElement>['value'];
 export declare const useCreateOptionsContext: (value: ValueType, setValue: (value: ValueType) => void, multiple: boolean) => {
     optionsContext: {
         setValue: (value: ValueType) => void;
-        registerOption: (id: symbol) => void;
-        unregisterOption: (id: symbol) => void;
-        setOptionProps: (id: symbol, optionProps: OptionProps) => void;
-        selectOption: (id: symbol) => void;
-        deselectOption: (id: symbol) => void;
+        registerOption: (id: string, groupId: string | null) => void;
+        unregisterOption: (id: string) => void;
+        setOptionProps: (id: string, optionProps: OptionProps) => void;
+        selectOption: (id: string) => void;
+        deselectOption: (id: string) => void;
+        registerGroup: (id: string) => void;
+        unregisterGroup: (id: string) => void;
+        setGroupProps: (id: string, groupProps: OptionGroupProps) => void;
     };
     selectedOptionsProps: OptionProps[];
-    optionIds: symbol[];
-    optionsProps: Map<symbol, OptionProps>;
+    optionIds: string[];
+    optionsProps: Map<string, OptionProps>;
     deselectOptionValue: (value: ValueType) => void;
     indexOfLastSelectedOptionRef: import('react').MutableRefObject<number | undefined>;
     getOptionByIndex: (index: number) => OptionProps | undefined;
+    structureIds: StructureNode[];
+    groupsProps: Map<string, OptionGroupProps>;
+    optionGroupOf: Map<string, string | null>;
+    optionIdsByGroup: Map<string, string[]>;
 };
 export {};