@viasat/beam-react 2.8.0 → 2.10.0

package/lib/wip/Search/Search.es.js

@@ -1,157 +1,161 @@
-import { jsxs as x, jsx as t } from "react/jsx-runtime";
-import { g as ce } from "../../../chunks/classNames.DNsS4J__.js";
-import { t as ne } from "../../../chunks/constants.BBi77pmH.js";
-import * as k from "react";
-import B, { useCallback as me } from "react";
-import { s as r } from "../../../chunks/Search.Results.Item.CLmMBPz1.js";
+import { jsxs as S, jsx as t } from "react/jsx-runtime";
+import { g as ne } from "../../../chunks/classNames.BTJmrO_L.js";
+import { t as me } from "../../../chunks/constants.CKKGf1-i.js";
+import C, { useCallback as de } from "react";
+import { s as r, S as fe, a as ue } from "../../../chunks/Search.Results.DR20Rl2x.js";
 import F from "clsx";
-import { H as de } from "../../../chunks/form.context.CfsTSQpm.js";
-import { LabelProvider as fe } from "../../Form/contexts/label.context.es.js";
-import { HelperTextProvider as pe } from "../../Form/contexts/helperText.context.es.js";
-import { useUniversalRef as ue } from "../../Form/hooks/useUniversalRef.hook.es.js";
-import { useAccessibleId as b } from "../../Form/hooks/useAccessibleId.hook.es.js";
-import { Icon as he } from "../../Icon/Icon.es.js";
-import { SearchResults as xe } from "./Search.Results.es.js";
-import { useSearchDropdown as be } from "./useSearchDropdown.es.js";
-import { SearchDropdown as Se } from "./SearchDropdown.es.js";
-import { ActionList as ve } from "../../ActionList/ActionList.es.js";
-import { useDebounced as Pe } from "../../../utils/hooks/useDebounced.es.js";
-import { useEffectAfterMount as Ce } from "../../../utils/hooks/useEffectAfterMount.es.js";
-import { Spinner as Ie } from "../../Spinner/Spinner.es.js";
-import { CloseButton as Ne } from "../../CloseButton/CloseButton.es.js";
-const De = (f) => /* @__PURE__ */ k.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...f }, /* @__PURE__ */ k.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z", fill: "currentColor" })), { baseClassNamePrefix: ge, subElementClassPrefix: a, classModifierPrefix: d } = ce("search"), we = B.forwardRef(({
-  id: f,
-  defaultValue: V = "",
-  value: S,
+import { H as pe } from "../../../chunks/form.context.BhylRiG2.js";
+import { LabelProvider as he } from "../../Form/contexts/label.context.es.js";
+import { HelperTextProvider as be } from "../../Form/contexts/helperText.context.es.js";
+import { useUniversalRef as xe } from "../../Form/hooks/useUniversalRef.hook.es.js";
+import { useAccessibleId as I } from "../../Form/hooks/useAccessibleId.hook.es.js";
+import { Icon as Se } from "../../Icon/Icon.es.js";
+import { useSearchDropdown as Ie } from "./useSearchDropdown.es.js";
+import { SearchDropdown as Pe } from "./SearchDropdown.es.js";
+import { ActionList as De } from "../../ActionList/ActionList.es.js";
+import { useDebounced as Ne } from "../../../utils/hooks/useDebounced.es.js";
+import { useEffectAfterMount as ve } from "../../../utils/hooks/useEffectAfterMount.es.js";
+import { Spinner as $e } from "../../Spinner/Spinner.es.js";
+import { CloseButton as ye } from "../../CloseButton/CloseButton.es.js";
+const { baseClassNamePrefix: ge, subElementClassPrefix: l, classModifierPrefix: f } = ne("search"), Re = C.forwardRef(({
+  id: T,
+  defaultValue: j = "",
+  value: P,
   onChange: s,
-  onSearch: j,
-  loading: v = !1,
-  debounce: q = 200,
-  onKeyDown: p,
-  label: z,
-  contentAfter: P,
-  contentBefore: C,
-  helperText: I,
-  fluid: A,
-  width: Z,
-  theme: N,
+  onSearch: q,
+  loading: D = !1,
+  debounce: z = 200,
+  onKeyDown: u,
+  label: B,
+  contentAfter: N,
+  contentBefore: v,
+  helperText: $,
+  fluid: V,
+  width: U,
+  theme: y,
   disabled: i,
-  hideIcon: U,
-  icon: W = De,
-  error: o,
-  readOnly: c,
-  clearable: D = !0,
-  noResults: g,
-  clearButtonAriaLabel: G = "Clear search",
-  className: J,
-  children: w,
-  "aria-describedby": Q,
-  ...u
-}, X) => {
-  const { refFn: Y, ref: K } = ue(X), [O, R] = B.useState(String(V)), n = S !== void 0, l = n ? String(S) : O, ee = (e) => {
-    n || R(e.target.value), s == null || s(e);
-  }, { immediate: h, debounced: $ } = Pe(j, q), te = (e) => {
-    p == null || p(e), e.key === "Enter" && !e.isDefaultPrevented() && !e.isPropagationStopped() && h(l), e.key === "Escape" && (!D || M.open) && e.preventDefault();
-  }, { id: m } = b(), { id: y } = b(), { id: E } = b(), L = !!(o != null && o.length), _ = !!w || !!g, re = F(
-    I && E,
-    L && y,
-    Q
+  hideIcon: W,
+  icon: G = fe,
+  error: a,
+  readOnly: n,
+  clearable: g = !0,
+  noResults: R,
+  clearButtonAriaLabel: J = "Clear search",
+  className: Q,
+  children: _,
+  "aria-describedby": X,
+  ...p
+}, Y) => {
+  const { refFn: Z, ref: K } = xe(Y), [O, E] = C.useState(String(j)), m = P !== void 0, c = m ? String(P) : O, ee = (e) => {
+    m || E(e.target.value), s == null || s(e);
+  }, { immediate: h, debounced: k } = Ne(q, z), te = (e) => {
+    if (u == null || u(e), e.key === "Enter") {
+      if (e.isDefaultPrevented() || e.isPropagationStopped())
+        return;
+      const { activeIndex: o, elementsRef: ce } = b, x = o !== null ? ce.current[o] : null;
+      x && x.getAttribute("aria-disabled") !== "true" ? (e.preventDefault(), x.click()) : o === null && h(c);
+    }
+    e.key === "Escape" && (!g || b.open) && e.preventDefault();
+  }, { id: d } = I(), { id: w } = I(), { id: H } = I(), M = !!(a != null && a.length), A = !!_ || !!R, re = F(
+    $ && H,
+    M && w,
+    X
   ), {
-    dropdownProps: M,
+    dropdownProps: b,
     getFieldProps: se,
     getInputProps: ie
-  } = be({
-    enabled: _,
+  } = Ie({
+    enabled: A,
     disabled: !!i,
-    readOnly: !!c
+    readOnly: !!n
   });
-  Ce(() => {
-    $(l);
-  }, [l, $]);
-  const oe = F(
+  ve(() => {
+    k(c);
+  }, [c, k]);
+  const ae = F(
     r[ge],
-    N && ne(N),
-    A && r[`${d}fluid`],
-    i && r[`${d}disabled`],
-    c && r[`${d}read-only`],
-    o && r[`${d}error`],
-    J
-  ), ae = (e) => {
-    var H;
-    i || e.target instanceof HTMLInputElement || e.target.closest('button,[role="button"],a,[role="link"]') || (e.preventDefault(), e.stopPropagation(), (H = K.current) == null || H.focus());
-  }, le = me(() => {
-    n ? s == null || s({
+    y && me(y),
+    V && r[`${f}fluid`],
+    i && r[`${f}disabled`],
+    n && r[`${f}read-only`],
+    a && r[`${f}error`],
+    Q
+  ), oe = (e) => {
+    var o;
+    i || e.target instanceof HTMLInputElement || e.target.closest('button,[role="button"],a,[role="link"]') || (e.preventDefault(), e.stopPropagation(), (o = K.current) == null || o.focus());
+  }, le = de(() => {
+    m ? s == null || s({
       target: {
         value: "",
-        name: u.name,
-        id: m,
+        name: p.name,
+        id: d,
         type: "search"
       }
-    }) : R(""), h("");
-  }, [m, n, s, h, u.name]);
-  return /* @__PURE__ */ x(
+    }) : E(""), h("");
+  }, [d, m, s, h, p.name]);
+  return /* @__PURE__ */ S(
     "div",
     {
-      id: f,
-      className: oe,
+      id: T,
+      className: ae,
       role: "search",
-      style: { maxWidth: Z },
-      "aria-busy": v,
+      style: { maxWidth: U },
+      "aria-busy": D,
       children: [
         /* @__PURE__ */ t(
-          fe,
+          he,
           {
             ctxDisabled: !!i,
             ctxRequired: !1,
-            ctxHtmlFor: m,
-            children: z
+            ctxHtmlFor: d,
+            children: B
           }
         ),
-        /* @__PURE__ */ x(
+        /* @__PURE__ */ S(
           "div",
           {
-            className: r[`${a}field`],
-            ...se({ onPointerDown: ae }),
+            className: r[`${l}field`],
+            ...se({ onPointerDown: oe }),
             children: [
-              !U && /* @__PURE__ */ t(he, { icon: W, "aria-hidden": !0 }),
-              C && /* @__PURE__ */ t("div", { className: r[`${a}content`], children: C }),
+              !W && /* @__PURE__ */ t(Se, { icon: G, "aria-hidden": !0 }),
+              v && /* @__PURE__ */ t("div", { className: r[`${l}content`], children: v }),
               /* @__PURE__ */ t(
                 "input",
                 {
-                  id: m,
+                  id: d,
                   type: "search",
-                  className: r[`${a}field__input`],
-                  value: l,
+                  className: r[`${l}field__input`],
+                  value: c,
                   disabled: i,
-                  readOnly: c,
-                  "aria-invalid": !!o,
+                  readOnly: n,
+                  "aria-invalid": !!a,
                   "aria-describedby": re,
                   ...ie({
-                    ...u,
+                    ...p,
                     onChange: ee,
                     onKeyDown: te
                   }),
-                  ref: Y
+                  ref: Z
                 }
               ),
-              v && /* @__PURE__ */ t("div", { className: r[`${a}field__spinner`], children: /* @__PURE__ */ t(Ie, { size: "xxs" }) }),
-              D && l && !i && !c && /* @__PURE__ */ t(Ne, { onClick: le, className: `${a}field__clear-button`, size: "sm", "aria-label": G }),
-              P && /* @__PURE__ */ t("div", { className: r[`${a}content`], children: P })
+              D && /* @__PURE__ */ t("div", { className: r[`${l}field__spinner`], children: /* @__PURE__ */ t($e, { size: "xxs" }) }),
+              g && c && !i && !n && /* @__PURE__ */ t(ye, { onClick: le, className: `${l}field__clear-button`, size: "sm", "aria-label": J }),
+              N && /* @__PURE__ */ t("div", { className: r[`${l}content`], children: N })
             ]
           }
         ),
-        /* @__PURE__ */ x(pe, { ctxId: E, ctxDisabled: !!i, children: [
-          I,
-          L && /* @__PURE__ */ t(de, { id: y, appearance: "negative", children: o })
+        /* @__PURE__ */ S(be, { ctxId: H, ctxDisabled: !!i, children: [
+          $,
+          M && /* @__PURE__ */ t(pe, { id: w, appearance: "negative", children: a })
         ] }),
-        _ && /* @__PURE__ */ t(Se, { ...M, children: /* @__PURE__ */ t(ve, { role: "listbox", noResults: g, children: w }) })
+        A && /* @__PURE__ */ t(Pe, { ...b, children: /* @__PURE__ */ t(De, { role: "listbox", noResults: R, children: _ }) })
       ]
     }
   );
-}), T = we;
-T.Results = xe;
-T.displayName = "Search";
+}), L = Re;
+L.Results = ue;
+L.displayName = "Search";
 export {
-  T as Search,
-  T as default
+  L as Search,
+  L as default
 };

package/lib/wip/Search/SearchDropdown.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("@floating-ui/react"),C=require("../../Box/Box.cjs.js"),q=require("clsx"),l=require("../../../chunks/classNames.DAeKwerT.js"),N=require("../../../chunks/constants.hwjHOsvT.js"),_=require("../../ActionList/ActionList.context.cjs.js"),b=require("react"),S=require("../../../chunks/floatingui.module.D3Aw_aYe.js"),F=require("../../../chunks/popover.module.Dum8SaSU.js"),a=require("./Search.Results.cjs.js"),{baseClassNamePrefix:j}=l.getBEMClassNames("floatingui"),{baseClassNamePrefix:B}=l.getBEMClassNames("popover"),P=[a.SearchResults,a.SearchResults.Item],v=({setOpen:r,isMounted:i,getFloatingProps:n,floatingStyles:c,labelsRef:u,elementsRef:d,getItemProps:m,setFloating:f,theme:t,className:x,children:g,context:o,activeIndex:h})=>{const p=b.useCallback(()=>r(!1),[r]);return i?e.jsx(s.FloatingTree,{children:e.jsx(s.FloatingNode,{id:o.floatingId,children:e.jsx(s.FloatingPortal,{children:e.jsx(s.FloatingFocusManager,{context:o,modal:!1,returnFocus:!0,closeOnFocusOut:!0,guards:!0,disabled:!1,restoreFocus:!0,order:["reference","content"],children:e.jsx(C.Box,{className:q(t&&N.themeClassName(t),S.floatinguiStyles[j],F.popoverStyles[B],x),...n(),style:c,ref:f,children:e.jsx(_.ActionListContextProvider,{allowChildrenTypes:P,getItemProps:m,itemsFocusable:!0,onItemClick:p,labelsRef:u,elementsRef:d,activeIndex:h,children:g})})})})})}):null};exports.SearchDropdown=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),_=require("@floating-ui/react"),d=require("../../Box/Box.cjs.js"),h=require("clsx"),o=require("../../../chunks/classNames.DAeKwerT.js"),q=require("../../../chunks/constants.hwjHOsvT.js"),S=require("../../ActionList/ActionList.context.cjs.js"),N=require("react"),b=require("../../../chunks/floatingui.module.D3Aw_aYe.js"),g=require("../../../chunks/popover.module.Dum8SaSU.js"),s=require("../../../chunks/Search.Results.DBQWuhZu.js"),{baseClassNamePrefix:B}=o.getBEMClassNames("floatingui"),{baseClassNamePrefix:P}=o.getBEMClassNames("popover"),v=[s.SearchResults,s.SearchResults.Item,s.SearchResults.ViewAll],w=({setOpen:t,isMounted:l,getFloatingProps:a,floatingStyles:i,labelsRef:c,elementsRef:n,getItemProps:u,setFloating:m,theme:r,className:x,children:f,activeIndex:p})=>{const C=N.useCallback(()=>t(!1),[t]);return l?e.jsx(_.FloatingPortal,{children:e.jsx(d.Box,{className:h(r&&q.themeClassName(r),b.floatinguiStyles[B],g.popoverStyles[P],x),...a(),style:i,ref:m,children:e.jsx(S.ActionListContextProvider,{allowChildrenTypes:v,getItemProps:u,itemsFocusable:!1,onItemClick:C,labelsRef:c,elementsRef:n,activeIndex:p,children:f})})}):null};exports.SearchDropdown=w;

package/lib/wip/Search/SearchDropdown.d.ts

@@ -1,8 +1,7 @@
-import { FloatingContext, UseInteractionsReturn } from '@floating-ui/react';
+import { UseInteractionsReturn } from '@floating-ui/react';
 import { ThemeTypes } from '@viasat/beam-shared/utils';
 import { CSSProperties, MutableRefObject } from 'react';
 export interface SearchDropdownProps {
-    context: FloatingContext;
     isMounted: boolean;
     getFloatingProps: UseInteractionsReturn['getFloatingProps'];
     floatingStyles: CSSProperties;
@@ -16,4 +15,4 @@ export interface SearchDropdownProps {
     className?: string;
     children?: React.ReactNode;
 }
-export declare const SearchDropdown: ({ setOpen, isMounted, getFloatingProps, floatingStyles, labelsRef, elementsRef, getItemProps, setFloating, theme, className: _className, children, context, activeIndex, }: SearchDropdownProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SearchDropdown: ({ setOpen, isMounted, getFloatingProps, floatingStyles, labelsRef, elementsRef, getItemProps, setFloating, theme, className: _className, children, activeIndex, }: SearchDropdownProps) => import("react/jsx-runtime").JSX.Element | null;

package/lib/wip/Search/SearchDropdown.es.js

@@ -1,71 +1,57 @@
-import { jsx as e } from "react/jsx-runtime";
-import { FloatingTree as h, FloatingNode as F, FloatingPortal as N, FloatingFocusManager as x } from "@floating-ui/react";
-import { Box as P } from "../../Box/Box.es.js";
-import b from "clsx";
-import { g as a } from "../../../chunks/classNames.DNsS4J__.js";
-import { t as v } from "../../../chunks/constants.BBi77pmH.js";
-import { ActionListContextProvider as y } from "../../ActionList/ActionList.context.es.js";
-import { useCallback as B } from "react";
-import { f as I } from "../../../chunks/floatingui.module.BcBFebz0.js";
-import { p as S } from "../../../chunks/popover.module.C6KFea25.js";
-import { SearchResults as t } from "./Search.Results.es.js";
-const { baseClassNamePrefix: k } = a("floatingui"), { baseClassNamePrefix: w } = a("popover"), M = [t, t.Item], H = ({
+import { jsx as o } from "react/jsx-runtime";
+import { FloatingPortal as N } from "@floating-ui/react";
+import { Box as d } from "../../Box/Box.es.js";
+import g from "clsx";
+import { g as a } from "../../../chunks/classNames.BTJmrO_L.js";
+import { t as h } from "../../../chunks/constants.CKKGf1-i.js";
+import { ActionListContextProvider as P } from "../../ActionList/ActionList.context.es.js";
+import { useCallback as b } from "react";
+import { f as v } from "../../../chunks/floatingui.module.BcBFebz0.js";
+import { p as y } from "../../../chunks/popover.module.C6KFea25.js";
+import { a as e } from "../../../chunks/Search.Results.DR20Rl2x.js";
+const { baseClassNamePrefix: B } = a("floatingui"), { baseClassNamePrefix: S } = a("popover"), k = [e, e.Item, e.ViewAll], V = ({
   setOpen: r,
-  isMounted: l,
-  getFloatingProps: i,
+  isMounted: t,
+  getFloatingProps: l,
   floatingStyles: m,
-  labelsRef: n,
-  elementsRef: c,
-  getItemProps: f,
-  setFloating: u,
-  theme: o,
-  className: p,
-  children: d,
-  context: s,
-  activeIndex: g
+  labelsRef: i,
+  elementsRef: f,
+  getItemProps: p,
+  setFloating: n,
+  theme: s,
+  className: c,
+  children: C,
+  activeIndex: u
 }) => {
-  const C = B(() => r(!1), [r]);
-  return l ? /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(F, { id: s.floatingId, children: /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(
-    x,
+  const x = b(() => r(!1), [r]);
+  return t ? /* @__PURE__ */ o(N, { children: /* @__PURE__ */ o(
+    d,
     {
-      context: s,
-      modal: !1,
-      returnFocus: !0,
-      closeOnFocusOut: !0,
-      guards: !0,
-      disabled: !1,
-      restoreFocus: !0,
-      order: ["reference", "content"],
-      children: /* @__PURE__ */ e(
+      className: g(
+        s && h(s),
+        v[B],
+        y[S],
+        c
+      ),
+      ...l(),
+      style: m,
+      ref: n,
+      children: /* @__PURE__ */ o(
         P,
         {
-          className: b(
-            o && v(o),
-            I[k],
-            S[w],
-            p
-          ),
-          ...i(),
-          style: m,
-          ref: u,
-          children: /* @__PURE__ */ e(
-            y,
-            {
-              allowChildrenTypes: M,
-              getItemProps: f,
-              itemsFocusable: !0,
-              onItemClick: C,
-              labelsRef: n,
-              elementsRef: c,
-              activeIndex: g,
-              children: d
-            }
-          )
+          allowChildrenTypes: k,
+          getItemProps: p,
+          itemsFocusable: !1,
+          onItemClick: x,
+          labelsRef: i,
+          elementsRef: f,
+          activeIndex: u,
+          children: C
         }
       )
     }
-  ) }) }) }) : null;
+  ) }) : null;
 };
 export {
-  H as SearchDropdown
+  V as SearchDropdown
 };

package/lib/wip/Search/useSearchDropdown.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@floating-ui/react"),n=require("react"),T=require("../../FloatingUI/useTyping.cjs.js"),q=S=>{const{disabled:c,readOnly:a,enabled:e=!0}=S,[s,i]=n.useState(!1),d=n.useRef(s);d.current=s;const[f,g]=n.useState(null);n.useEffect(()=>s?void 0:g(null),[s]);const{context:r,refs:l,floatingStyles:p}=t.useFloating({placement:"bottom-start",middleware:[t.flip(),t.size({apply({elements:o,rects:u}){Object.assign(o.floating.style,{width:`${u.reference.width}px`})}})],whileElementsMounted:t.autoUpdate,open:s,onOpenChange:i}),b=n.useRef([]),k=n.useRef([]),h=t.useClick(r,{enabled:!s&&e&&!c&&!a,toggle:!1,stickIfOpen:!1,keyboardHandlers:!1}),x=t.useRole(r,{enabled:e,role:"listbox"}),E=T.useTyping(r,{enabled:!s&&e&&!c&&!a,event:"keyboard"}),M=t.useFocus(r,{enabled:!s&&e&&!c&&!a,visibleOnly:!0}),C=t.useDismiss(r,{enabled:s&&e&&!c&&!a,escapeKey:!0,outsidePress:!0,referencePress:!1}),D=t.useListNavigation(r,{enabled:e&&!c&&!a,listRef:b,activeIndex:f,onNavigate:g,focusItemOnHover:!1,focusItemOnOpen:"auto",openOnArrowKeyDown:!0,nested:!1,loop:!0,virtual:!1,scrollItemIntoView:!0}),{getReferenceProps:m,getFloatingProps:y,getItemProps:R}=t.useInteractions([x,E,D]),{getReferenceProps:v}=t.useInteractions([h,M,C]),{isMounted:I,styles:P}=t.useTransitionStyles(r,{duration:50});n.useEffect(()=>{if(!e||c||a||d.current)return;const o=l.domReference.current,u=document.activeElement;o&&u&&o.contains(u)&&i(!0)},[e,c,a,i,l.domReference]);const O=n.useCallback((o={})=>e?m(o):o,[m,e]),w=n.useCallback((o={})=>e?{ref:l.setReference,...v(o)}:o,[e,l.setReference,v]),F=n.useMemo(()=>({isMounted:I,getFloatingProps:y,getItemProps:R,floatingStyles:{...p,...P},setOpen:i,labelsRef:k,elementsRef:b,setFloating:l.setFloating,activeIndex:f,context:r,open:s}),[I,y,R,p,P,l.setFloating,f,r,s]);return n.useMemo(()=>({getFieldProps:w,getInputProps:O,dropdownProps:F,refs:l}),[F,w,O,l])};exports.useSearchDropdown=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@floating-ui/react"),n=require("react"),_=require("../../FloatingUI/useTyping.cjs.js"),N=require("../../FloatingUI/useBlur.cjs.js"),T=S=>{const{disabled:r,readOnly:l,enabled:e=!0}=S,[s,i]=n.useState(!1),d=n.useRef(s);d.current=s;const[f,g]=n.useState(null);n.useEffect(()=>s?void 0:g(null),[s]);const{context:c,refs:a,floatingStyles:p}=t.useFloating({placement:"bottom-start",middleware:[t.flip(),t.size({apply({elements:o,rects:u}){Object.assign(o.floating.style,{width:`${u.reference.width}px`})}})],whileElementsMounted:t.autoUpdate,open:s,onOpenChange:i}),b=n.useRef([]),k=n.useRef([]),h=t.useClick(c,{enabled:!s&&e&&!r&&!l,toggle:!1,stickIfOpen:!1,keyboardHandlers:!1}),x=t.useRole(c,{enabled:e,role:"listbox"}),E=_.default(c,{enabled:!s&&e&&!r&&!l,event:"keyboard"}),M=t.useFocus(c,{enabled:!s&&e&&!r&&!l,visibleOnly:!0}),q=t.useDismiss(c,{enabled:s&&e&&!r&&!l,escapeKey:!0,outsidePress:!0,referencePress:!1}),C=N.useBlur(c,{enabled:e&&!r&&!l}),D=t.useListNavigation(c,{enabled:e&&!r&&!l,listRef:b,activeIndex:f,onNavigate:g,focusItemOnHover:!1,focusItemOnOpen:"auto",openOnArrowKeyDown:!0,nested:!1,loop:!0,virtual:!0,scrollItemIntoView:!0}),{getReferenceProps:m,getFloatingProps:R,getItemProps:y}=t.useInteractions([x,E,D]),{getReferenceProps:I}=t.useInteractions([h,M,q,C]),{isMounted:v,styles:P}=t.useTransitionStyles(c,{duration:50});n.useEffect(()=>{if(!e||r||l||d.current)return;const o=a.domReference.current,u=document.activeElement;o&&u&&o.contains(u)&&i(!0)},[e,r,l,i,a.domReference]);const O=n.useCallback((o={})=>e?m(o):o,[m,e]),w=n.useCallback((o={})=>e?{ref:a.setReference,...I(o)}:o,[e,a.setReference,I]),F=n.useMemo(()=>({isMounted:v,getFloatingProps:R,getItemProps:y,floatingStyles:{...p,...P},setOpen:i,labelsRef:k,elementsRef:b,setFloating:a.setFloating,activeIndex:f,open:s}),[v,R,y,p,P,a.setFloating,f,s]);return n.useMemo(()=>({getFieldProps:w,getInputProps:O,dropdownProps:F,refs:a}),[F,w,O,a])};exports.useSearchDropdown=T;

package/lib/wip/Search/useSearchDropdown.d.ts

@@ -846,24 +846,6 @@ export declare const useSearchDropdown: (options: UseSearchDropdownOptions) => {
         elementsRef: import('react').MutableRefObject<HTMLElement[]>;
         setFloating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
         activeIndex: number | null;
-        context: {
-            x: number;
-            y: number;
-            placement: import('@floating-ui/utils').Placement;
-            strategy: import('@floating-ui/utils').Strategy;
-            middlewareData: import('@floating-ui/core').MiddlewareData;
-            isPositioned: boolean;
-            update: () => void;
-            floatingStyles: React.CSSProperties;
-            open: boolean;
-            onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
-            events: import('@floating-ui/react').FloatingEvents;
-            dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
-            nodeId: string | undefined;
-            floatingId: string;
-            refs: import('@floating-ui/react').ExtendedRefs<HTMLInputElement>;
-            elements: import('@floating-ui/react').ExtendedElements<HTMLInputElement>;
-        };
         open: boolean;
     };
     refs: {

package/lib/wip/Search/useSearchDropdown.es.js

@@ -1,15 +1,16 @@
-import { useFloating as T, autoUpdate as j, flip as z, size as L, useClick as U, useRole as V, useFocus as $, useDismiss as q, useListNavigation as B, useInteractions as F, useTransitionStyles as G } from "@floating-ui/react";
+import { useFloating as j, autoUpdate as z, flip as B, size as L, useClick as U, useRole as V, useFocus as $, useDismiss as q, useListNavigation as G, useInteractions as F, useTransitionStyles as J } from "@floating-ui/react";
 import { useState as k, useRef as u, useEffect as x, useCallback as h, useMemo as S } from "react";
-import { useTyping as J } from "../../FloatingUI/useTyping.es.js";
-const Y = (E) => {
-  const { disabled: r, readOnly: l, enabled: e = !0 } = E, [t, c] = k(!1), f = u(t);
+import Q from "../../FloatingUI/useTyping.es.js";
+import { useBlur as W } from "../../FloatingUI/useBlur.es.js";
+const ee = (E) => {
+  const { disabled: n, readOnly: o, enabled: e = !0 } = E, [t, c] = k(!1), f = u(t);
   f.current = t;
   const [a, d] = k(null);
   x(() => t ? void 0 : d(null), [t]);
-  const { context: n, refs: o, floatingStyles: p } = T({
+  const { context: r, refs: l, floatingStyles: p } = j({
     placement: "bottom-start",
     middleware: [
-      z(),
+      B(),
       L({
         apply({ elements: s, rects: i }) {
           Object.assign(s.floating.style, {
@@ -18,16 +19,16 @@ const Y = (E) => {
         }
       })
     ],
-    whileElementsMounted: j,
+    whileElementsMounted: z,
     open: t,
     onOpenChange: c
-  }), g = u([]), C = u([]), D = U(n, {
-    enabled: !t && e && !r && !l,
+  }), g = u([]), C = u([]), D = U(r, {
+    enabled: !t && e && !n && !o,
     toggle: !1,
     stickIfOpen: !1,
     keyboardHandlers: !1
-  }), M = V(n, { enabled: e, role: "listbox" }), N = J(n, { enabled: !t && e && !r && !l, event: "keyboard" }), A = $(n, { enabled: !t && e && !r && !l, visibleOnly: !0 }), H = q(n, { enabled: t && e && !r && !l, escapeKey: !0, outsidePress: !0, referencePress: !1 }), K = B(n, {
-    enabled: e && !r && !l,
+  }), M = V(r, { enabled: e, role: "listbox" }), N = Q(r, { enabled: !t && e && !n && !o, event: "keyboard" }), A = $(r, { enabled: !t && e && !n && !o, visibleOnly: !0 }), H = q(r, { enabled: t && e && !n && !o, escapeKey: !0, outsidePress: !0, referencePress: !1 }), K = W(r, { enabled: e && !n && !o }), T = G(r, {
+    enabled: e && !n && !o,
     listRef: g,
     activeIndex: a,
     onNavigate: d,
@@ -36,28 +37,28 @@ const Y = (E) => {
     openOnArrowKeyDown: !0,
     nested: !1,
     loop: !0,
-    virtual: !1,
+    virtual: !0,
     scrollItemIntoView: !0
   }), { getReferenceProps: m, getFloatingProps: b, getItemProps: y } = F([
     M,
     N,
-    K
-  ]), { getReferenceProps: R } = F([D, A, H]), { isMounted: v, styles: I } = G(n, { duration: 50 });
+    T
+  ]), { getReferenceProps: R } = F([D, A, H, K]), { isMounted: v, styles: I } = J(r, { duration: 50 });
   x(() => {
-    if (!e || r || l || f.current)
+    if (!e || n || o || f.current)
       return;
-    const s = o.domReference.current, i = document.activeElement;
+    const s = l.domReference.current, i = document.activeElement;
     s && i && s.contains(i) && c(!0);
-  }, [e, r, l, c, o.domReference]);
+  }, [e, n, o, c, l.domReference]);
   const P = h(
     (s = {}) => e ? m(s) : s,
     [m, e]
   ), O = h(
     (s = {}) => e ? {
-      ref: o.setReference,
+      ref: l.setReference,
       ...R(s)
     } : s,
-    [e, o.setReference, R]
+    [e, l.setReference, R]
   ), w = S(
     () => ({
       isMounted: v,
@@ -70,23 +71,22 @@ const Y = (E) => {
       setOpen: c,
       labelsRef: C,
       elementsRef: g,
-      setFloating: o.setFloating,
+      setFloating: l.setFloating,
       activeIndex: a,
-      context: n,
       open: t
     }),
-    [v, b, y, p, I, o.setFloating, a, n, t]
+    [v, b, y, p, I, l.setFloating, a, t]
   );
   return S(
     () => ({
       getFieldProps: O,
       getInputProps: P,
       dropdownProps: w,
-      refs: o
+      refs: l
     }),
-    [w, O, P, o]
+    [w, O, P, l]
   );
 };
 export {
-  Y as useSearchDropdown
+  ee as useSearchDropdown
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-react",
-  "version": "2.8.0",
+  "version": "2.10.0",
   "description": "React component library for the Beam design system",
   "license": "MIT",
   "author": "Viasat",
@@ -59,11 +59,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@viasat/beam-fonts": "2.8.0",
-    "@viasat/beam-shared": "2.8.0",
-    "@viasat/beam-styles": "2.8.0",
-    "@viasat/beam-tokens": "2.8.0",
-    "@viasat/beam-icons": "2.8.0",
+    "@viasat/beam-fonts": "2.10.0",
+    "@viasat/beam-shared": "2.10.0",
+    "@viasat/beam-styles": "2.10.0",
+    "@viasat/beam-tokens": "2.10.0",
+    "@viasat/beam-icons": "2.10.0",
     "clsx": "^1.2.1",
     "@floating-ui/react": "^0.26.18",
     "@stepperize/react": "^5.1.5",

package/utils/hooks/index.es.js

@@ -1,7 +1,7 @@
 import { useState as u, useEffect as d, useRef as w, useLayoutEffect as l } from "react";
-import { a as f } from "../../chunks/constants.BBi77pmH.js";
-import { d as m } from "../../chunks/helpers.Wv7n4ip7.js";
-import { C as a } from "../../chunks/CSSLookup.Cjf6o2Gz.js";
+import { a as f } from "../../chunks/constants.CKKGf1-i.js";
+import { d as m } from "../../chunks/helpers.CPNYYxrE.js";
+import { C as a } from "../../chunks/CSSLookup.DOOy1rxJ.js";
 import { useId as V } from "./useId.es.js";
 import { useInteractiveProps as M } from "./useInteractiveProps.es.js";
 function h(e, t = window.getComputedStyle(e)) {

package/utils/hooks/useElementResize.es.js

@@ -1,6 +1,6 @@
 import { useState as y, useRef as C, useCallback as s, useMemo as S, useEffect as f } from "react";
-import { a as M } from "../../chunks/constants.BBi77pmH.js";
-import { d as W } from "../../chunks/helpers.Wv7n4ip7.js";
+import { a as M } from "../../chunks/constants.CKKGf1-i.js";
+import { d as W } from "../../chunks/helpers.CPNYYxrE.js";
 const g = (p, n, r, d = 165, v = 400, X = 0) => {
   const [a, w] = y(X), c = C(0), m = C(!1), L = s(
     (t) => {

package/utils/hooks/useId.es.js

@@ -1,7 +1,7 @@
 import * as t from "react";
 import { useLayoutEffect as f } from "react";
 import { SafeReact as n } from "../safeReact.es.js";
-import { p as a } from "../../chunks/constants.BBi77pmH.js";
+import { p as a } from "../../chunks/constants.CKKGf1-i.js";
 var i = f;
 let o = !1, u = 0;
 const r = () => `${a}-${Math.random().toString(36).slice(2, 6)}${u++}`;