@viasat/beam-react 2.29.1 → 2.36.0

package/lib/Autocomplete/AutocompleteDropdown.es.js

@@ -6,39 +6,42 @@ import { g as a } from "../../chunks/classNames.BTJmrO_L.js";
 import { t as O } from "../../chunks/constants.CKKGf1-i.js";
 import { ActionListContextProvider as S } from "../ActionList/ActionList.context.es.js";
 import { useCallback as T } from "react";
-import { f as j } from "../../chunks/floatingui.module.BcBFebz0.js";
+import { f as j } from "../../chunks/FloatingUI.arrow.tN5_IctZ.js";
 import { p as D } from "../../chunks/popover.module.3dnl8y6-.js";
 import "../_Options/Option.context.es.js";
 import { Option as E } from "../_Options/Option.es.js";
+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";
-const { baseClassNamePrefix: L } = a("floatingui"), { baseClassNamePrefix: q } = a("popover"), z = [E], I = ({
+const { baseClassNamePrefix: L } = a("floatingui"), { baseClassNamePrefix: q } = a("popover"), z = [E], eo = ({
   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: r
 }) => {
   const P = T(
     (b) => {
-      r == null || r(b), !t && e(!1);
+      r == null || r(b), !s && e(!1);
     },
-    [t, r, e]
+    [s, r, e]
   );
   return i ? /* @__PURE__ */ o(v, { children: /* @__PURE__ */ o(y, { id: m, children: /* @__PURE__ */ o(B, { children: /* @__PURE__ */ o(
     w,
@@ -57,13 +60,13 @@ const { baseClassNamePrefix: L } = a("floatingui"), { baseClassNamePrefix: q } =
         {
           "data-status": l,
           className: M(
-            s && O(s),
+            t && O(t),
             j[L],
             D[q],
             N
           ),
-          ...f(),
-          style: p,
+          ...p(),
+          style: f,
           ref: g,
           children: /* @__PURE__ */ o(
             S,
@@ -84,5 +87,5 @@ const { baseClassNamePrefix: L } = a("floatingui"), { baseClassNamePrefix: q } =
   ) }) }) }) : null;
 };
 export {
-  I as AutocompleteDropdown
+  eo as AutocompleteDropdown
 };

package/lib/FloatingUI/FloatingUI.arrow.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),f=require("../../chunks/floatingui.module.D3Aw_aYe.js"),m=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const g=require("clsx"),e=require("react"),q=e.forwardRef(({options:s,middleware:r},t)=>{const{subElementClassPrefix:o}=m.getBEMClassNames("floatingui"),{className:n,hide:a}=s,l=g(f.floatinguiStyles[`${o}arrow`],n),i=e.useRef(null),u=t||i;return a?null:c.jsx("span",{ref:u,style:r.arrowStyles,className:l})});exports.Arrow=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");const r=require("../../chunks/FloatingUI.arrow.DFhYQv_F.js");require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");require("clsx");require("react");exports.Arrow=r.Arrow;

package/lib/FloatingUI/FloatingUI.arrow.es.js

@@ -1,20 +1,9 @@
-import { jsx as n } from "react/jsx-runtime";
-import { f as c } from "../../chunks/floatingui.module.BcBFebz0.js";
-import { g as u } from "../../chunks/classNames.BTJmrO_L.js";
+import "react/jsx-runtime";
+import { A as a } from "../../chunks/FloatingUI.arrow.tN5_IctZ.js";
+import "../../chunks/classNames.BTJmrO_L.js";
 import "../../chunks/constants.CKKGf1-i.js";
-import p from "clsx";
-import r from "react";
-const y = r.forwardRef(({ options: s, middleware: o }, t) => {
-  const { subElementClassPrefix: e } = u("floatingui"), { className: a, hide: l } = s, f = p(c[`${e}arrow`], a), m = r.useRef(null), i = t || m;
-  return l ? null : /* @__PURE__ */ n(
-    "span",
-    {
-      ref: i,
-      style: o.arrowStyles,
-      className: f
-    }
-  );
-});
+import "clsx";
+import "react";
 export {
-  y as Arrow
+  a as Arrow
 };

package/lib/FloatingUI/FloatingUI.content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),x=require("../../chunks/FloatingUI.context.B15Tz_4h.js"),f=require("react"),i=require("@floating-ui/react"),m=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const b=require("clsx"),d=require("../../chunks/floatingui.module.D3Aw_aYe.js"),w=require("../Box/Box.cjs.js"),N=require("./FloatingUI.arrow.cjs.js");function S({children:o,props:e}){if(!e)return o;const t=typeof e=="boolean"?{}:e;return a.jsx(i.FloatingPortal,{...t,children:o})}function v({children:o,props:e}){if(!e)return o;const t=typeof e=="boolean",r=e==="transparent",{baseClassNamePrefix:l,classModifierPrefix:c}=m.getBEMClassNames("floatingui__overlay"),u={className:b(d.floatinguiStyles[l],r&&d.floatinguiStyles[`${c}transparent`]),lockScroll:!0},s=t||r?u:{...u,...e};return a.jsx(i.FloatingOverlay,{...s,children:o})}function B({children:o,context:e,props:t}){const r=f.useMemo(()=>({context:e,...typeof t=="boolean"?{}:t}),[e,t]);return t?a.jsx(i.FloatingFocusManager,{...r,children:o}):o}const y=f.forwardRef(({children:o,className:e,style:t,overlay:r,skipFloatingStyles:l=!1,...c},u)=>{const{context:s,nodeId:C,arrow:g,...n}=x.useBmFloatingUIContext(),P=i.useMergeRefs([n.refs.setFloating,u]),{isMounted:_,status:j}=i.useTransitionStatus(s,n.transitionConfig),{baseClassNamePrefix:F}=m.getBEMClassNames("floatingui"),q=l?e:b(d.floatinguiStyles[F],e),I=f.useMemo(()=>({...l?{}:s.floatingStyles,...x.visibilityHandler(s.middlewareData),...t}),[s.floatingStyles,s.middlewareData,l,t]);return _?a.jsx(i.FloatingNode,{id:C,children:a.jsx(S,{props:n.portalled,children:a.jsx(v,{props:r,children:a.jsx(B,{context:s,props:n.focusConfiguration,children:a.jsxs(w.Box,{"data-status":j,ref:P,style:I,className:q,"aria-labelledby":n.labelId,"aria-describedby":n.descriptionId,...n.getFloatingProps(c),children:[o,g&&a.jsx(N.Arrow,{options:g,middleware:n.middlewareData,ref:M=>n.setArrowEl(M)})]})})})})}):null});exports.Content=y;exports.default=y;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),x=require("../../chunks/FloatingUI.context.B15Tz_4h.js"),d=require("react"),i=require("@floating-ui/react"),m=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const b=require("clsx"),c=require("../../chunks/FloatingUI.arrow.DFhYQv_F.js"),w=require("../Box/Box.cjs.js");function N({children:o,props:e}){if(!e)return o;const t=typeof e=="boolean"?{}:e;return a.jsx(i.FloatingPortal,{...t,children:o})}function S({children:o,props:e}){if(!e)return o;const t=typeof e=="boolean",r=e==="transparent",{baseClassNamePrefix:l,classModifierPrefix:f}=m.getBEMClassNames("floatingui__overlay"),u={className:b(c.floatinguiStyles[l],r&&c.floatinguiStyles[`${f}transparent`]),lockScroll:!0},s=t||r?u:{...u,...e};return a.jsx(i.FloatingOverlay,{...s,children:o})}function v({children:o,context:e,props:t}){const r=d.useMemo(()=>({context:e,...typeof t=="boolean"?{}:t}),[e,t]);return t?a.jsx(i.FloatingFocusManager,{...r,children:o}):o}const y=d.forwardRef(({children:o,className:e,style:t,overlay:r,skipFloatingStyles:l=!1,...f},u)=>{const{context:s,nodeId:C,arrow:g,...n}=x.useBmFloatingUIContext(),P=i.useMergeRefs([n.refs.setFloating,u]),{isMounted:j,status:F}=i.useTransitionStatus(s,n.transitionConfig),{baseClassNamePrefix:_}=m.getBEMClassNames("floatingui"),I=l?e:b(c.floatinguiStyles[_],e),M=d.useMemo(()=>({...l?{}:s.floatingStyles,...x.visibilityHandler(s.middlewareData),...t}),[s.floatingStyles,s.middlewareData,l,t]);return j?a.jsx(i.FloatingNode,{id:C,children:a.jsx(N,{props:n.portalled,children:a.jsx(S,{props:r,children:a.jsx(v,{context:s,props:n.focusConfiguration,children:a.jsxs(w.Box,{"data-status":F,ref:P,style:M,className:I,"aria-labelledby":n.labelId,"aria-describedby":n.descriptionId,...n.getFloatingProps(f),children:[o,g&&a.jsx(c.Arrow,{options:g,middleware:n.middlewareData,ref:q=>n.setArrowEl(q)})]})})})})}):null});exports.Content=y;exports.default=y;

package/lib/FloatingUI/FloatingUI.content.es.js

@@ -1,20 +1,19 @@
 import { jsx as n, jsxs as M } from "react/jsx-runtime";
 import { a as v, v as I } from "../../chunks/FloatingUI.context.Dl4Y1y1z.js";
-import c, { useMemo as N } from "react";
-import { useMergeRefs as B, useTransitionStatus as R, FloatingNode as S, FloatingPortal as D, FloatingOverlay as O, FloatingFocusManager as U } from "@floating-ui/react";
+import m, { useMemo as N } from "react";
+import { useMergeRefs as B, useTransitionStatus as R, FloatingNode as S, FloatingPortal as A, FloatingOverlay as D, FloatingFocusManager as O } from "@floating-ui/react";
 import { g as u } from "../../chunks/classNames.BTJmrO_L.js";
 import "../../chunks/constants.CKKGf1-i.js";
 import g from "clsx";
-import { f as d } from "../../chunks/floatingui.module.BcBFebz0.js";
+import { f as d, A as U } from "../../chunks/FloatingUI.arrow.tN5_IctZ.js";
 import { Box as _ } from "../Box/Box.es.js";
-import { Arrow as h } from "./FloatingUI.arrow.es.js";
-function j({
+function h({
   children: o,
   props: t
 }) {
-  return t ? /* @__PURE__ */ n(D, { ...typeof t == "boolean" ? {} : t, children: o }) : o;
+  return t ? /* @__PURE__ */ n(A, { ...typeof t == "boolean" ? {} : t, children: o }) : o;
 }
-function A({
+function j({
   children: o,
   props: t
 }) {
@@ -24,23 +23,23 @@ function A({
     className: g(d[s], i && d[`${f}transparent`]),
     lockScroll: !0
   }, r = e || i ? l : { ...l, ...t };
-  return /* @__PURE__ */ n(O, { ...r, children: o });
+  return /* @__PURE__ */ n(D, { ...r, children: o });
 }
 function E({
   children: o,
   context: t,
   props: e
 }) {
-  const i = c.useMemo(
+  const i = m.useMemo(
     () => ({
       context: t,
       ...typeof e == "boolean" ? {} : e
     }),
     [t, e]
   );
-  return e ? /* @__PURE__ */ n(U, { ...i, children: o }) : o;
+  return e ? /* @__PURE__ */ n(O, { ...i, children: o }) : o;
 }
-const V = c.forwardRef(
+const Q = m.forwardRef(
   ({
     children: o,
     className: t,
@@ -52,7 +51,7 @@ const V = c.forwardRef(
     const {
       context: r,
       nodeId: p,
-      arrow: m,
+      arrow: c,
       ...a
     } = v(), P = B([a.refs.setFloating, l]), { isMounted: b, status: x } = R(
       r,
@@ -70,7 +69,7 @@ const V = c.forwardRef(
         e
       ]
     );
-    return b ? /* @__PURE__ */ n(S, { id: p, children: /* @__PURE__ */ n(j, { props: a.portalled, children: /* @__PURE__ */ n(A, { props: i, children: /* @__PURE__ */ n(
+    return b ? /* @__PURE__ */ n(S, { id: p, children: /* @__PURE__ */ n(h, { props: a.portalled, children: /* @__PURE__ */ n(j, { props: i, children: /* @__PURE__ */ n(
       E,
       {
         context: r,
@@ -89,10 +88,10 @@ const V = c.forwardRef(
             ),
             children: [
               o,
-              m && /* @__PURE__ */ n(
-                h,
+              c && /* @__PURE__ */ n(
+                U,
                 {
-                  options: m,
+                  options: c,
                   middleware: a.middlewareData,
                   ref: (F) => a.setArrowEl(F)
                 }
@@ -105,6 +104,6 @@ const V = c.forwardRef(
   }
 );
 export {
-  V as Content,
-  V as default
+  Q as Content,
+  Q as default
 };

package/lib/Search/SearchDropdown.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),p=require("@floating-ui/react"),q=require("../Box/Box.cjs.js"),N=require("clsx"),t=require("../../chunks/classNames.DAeKwerT.js"),_=require("../../chunks/constants.hwjHOsvT.js"),b=require("../ActionList/ActionList.context.cjs.js"),g=require("react"),e=require("../../chunks/Search.Results.DqEXVJeE.js"),h=require("../../chunks/floatingui.module.D3Aw_aYe.js"),B=require("../../chunks/popover.module.DGUJIXrP.js"),{baseClassNamePrefix:P}=t.getBEMClassNames("floatingui"),{baseClassNamePrefix:S}=t.getBEMClassNames("popover"),{subElementClassPrefix:y}=t.getBEMClassNames("search"),v=[e.Results,e.Results.Item,e.Results.ViewAll],w=({setOpen:o,isMounted:r,getFloatingProps:a,floatingStyles:i,labelsRef:n,elementsRef:c,getItemProps:u,setFloating:m,theme:l,className:x,children:f,activeIndex:C})=>{const d=g.useCallback(()=>o(!1),[o]);return r?s.jsx(p.FloatingPortal,{children:s.jsx(q.Box,{className:N(l&&_.themeClassName(l),h.floatinguiStyles[P],B.popoverStyles[S],e.styles[`${y}dropdown`],x),...a(),style:i,ref:m,children:s.jsx(b.ActionListContextProvider,{allowChildrenTypes:v,getItemProps:u,itemsFocusable:!1,onItemClick:d,labelsRef:n,elementsRef:c,activeIndex:C,children:f})})}):null};exports.SearchDropdown=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),d=require("@floating-ui/react"),p=require("../Box/Box.cjs.js"),b=require("clsx"),t=require("../../chunks/classNames.DAeKwerT.js"),g=require("../../chunks/constants.hwjHOsvT.js"),q=require("../ActionList/ActionList.context.cjs.js"),N=require("react"),e=require("../../chunks/Search.Results.DqEXVJeE.js"),h=require("../../chunks/FloatingUI.arrow.DFhYQv_F.js"),B=require("../../chunks/popover.module.DGUJIXrP.js"),{baseClassNamePrefix:P}=t.getBEMClassNames("floatingui"),{baseClassNamePrefix:S}=t.getBEMClassNames("popover"),{subElementClassPrefix:w}=t.getBEMClassNames("search"),y=[e.Results,e.Results.Item,e.Results.ViewAll],v=({setOpen:o,isMounted:l,getFloatingProps:a,floatingStyles:i,labelsRef:n,elementsRef:c,getItemProps:u,setFloating:m,theme:r,className:x,children:C,activeIndex:f})=>{const _=N.useCallback(()=>o(!1),[o]);return l?s.jsx(d.FloatingPortal,{children:s.jsx(p.Box,{className:b(r&&g.themeClassName(r),h.floatinguiStyles[P],B.popoverStyles[S],e.styles[`${w}dropdown`],x),...a(),style:i,ref:m,children:s.jsx(q.ActionListContextProvider,{allowChildrenTypes:y,getItemProps:u,itemsFocusable:!1,onItemClick:_,labelsRef:n,elementsRef:c,activeIndex:f,children:C})})}):null};exports.SearchDropdown=v;

package/lib/Search/SearchDropdown.es.js

@@ -7,7 +7,7 @@ import { t as g } from "../../chunks/constants.CKKGf1-i.js";
 import { ActionListContextProvider as h } from "../ActionList/ActionList.context.es.js";
 import { useCallback as b } from "react";
 import { R as o, s as y } from "../../chunks/Search.Results.XLqY_iES.js";
-import { f as v } from "../../chunks/floatingui.module.BcBFebz0.js";
+import { f as v } from "../../chunks/FloatingUI.arrow.tN5_IctZ.js";
 import { p as w } from "../../chunks/popover.module.3dnl8y6-.js";
 const { baseClassNamePrefix: B } = e("floatingui"), { baseClassNamePrefix: k } = e("popover"), { subElementClassPrefix: I } = e("search"), S = [o, o.Item, o.ViewAll], q = ({
   setOpen: r,

package/lib/Select/Select.cjs.js

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

package/lib/Select/Select.d.ts

@@ -1,7 +1,7 @@
 import { FormValidator } from '@viasat/beam-shared/components/form';
 import { ThemeTypes } from '@viasat/beam-shared/utils';
 import { default as React, FC, PropsWithoutRef, ReactNode } from 'react';
-import { Option } from '../_Options';
+import { Option, OptionGroup } from '../_Options';
 export interface SelectProps extends React.ComponentPropsWithRef<'select'> {
     /**
      * Specify HelperText for Select
@@ -76,7 +76,7 @@ export interface SelectProps extends React.ComponentPropsWithRef<'select'> {
      */
     contentAfter?: ReactNode;
     /**
-     * Add `Select.Option` components as children
+     * Add any combination of `Select.Option` and `Select.OptionGroup` components as children
      */
     children: ReactNode;
     /**
@@ -91,5 +91,6 @@ export interface SelectProps extends React.ComponentPropsWithRef<'select'> {
 declare const SelectComponent: FC<PropsWithoutRef<SelectProps>>;
 export declare const Select: typeof SelectComponent & {
     Option: typeof Option;
+    OptionGroup: typeof OptionGroup;
 };
 export default Select;