@viasat/beam-react 2.21.1 → 2.23.0

package/lib/wip/Panel/Panel.types.cjs.js

@@ -1 +1 @@
-"use strict";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../chunks/constants.hwjHOsvT.js");const e=["00","00-alt","01","02","03"],o=e;exports.PanelDividerColors=o;

package/lib/wip/Panel/Panel.types.d.ts

@@ -1,4 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
+import { PanelDividerColor, PanelDividerColors } from '@viasat/beam-shared/components/panel';
+export type { PanelDividerColor };
+export { PanelDividerColors };
 export type PanelKind = 'inline' | 'overlay';
 export type PanelPosition = 'start' | 'end' | 'bottom' | 'full';
 export type PanelModalType = 'nonModal' | 'isModal' | 'alert';
@@ -40,7 +43,9 @@ interface BasePanelProps extends ComponentPropsWithoutRef<'aside'> {
      */
     onOpenChange?: (open: boolean) => void;
     /**
-     * Specify the size of the Panel
+     * Specify the size of the Panel.
+     * When `position="bottom"`, only `size="full"` has an effect (enables full-viewport height).
+     * All other values are ignored for bottom panels — width is always 100%.
      * @default 'md'
      */
     size?: PanelSize;
@@ -71,6 +76,11 @@ interface BasePanelProps extends ComponentPropsWithoutRef<'aside'> {
      * @default true
      */
     divider?: boolean;
+    /**
+     * Specify the border color of the external divider between panel and page content
+     * @default '01'
+     */
+    dividerColor?: PanelDividerColor;
     /**
      * Specify the position of the Panel
      * 'start' | 'end' | 'bottom' | 'full'

package/lib/wip/Panel/Panel.types.es.js

@@ -1 +1,5 @@
-
+import "../../../chunks/constants.CKKGf1-i.js";
+const o = ["00", "00-alt", "01", "02", "03"], r = o;
+export {
+  r as PanelDividerColors
+};

package/lib/wip/Search/Search.Results.Item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),c=require("react"),o=require("../../ActionList/ActionList.cjs.js"),e=c.forwardRef(({children:t,...s},r)=>i.jsx(o.ActionList.Item,{ref:r,...s,children:t}));e.displayName="Search.Results.Item";exports.SearchResultsItem=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("react"),n=require("../../ActionList/ActionList.cjs.js"),s=o.forwardRef(({children:t,...e},i)=>r.jsx(n.ActionList.Item,{ref:i,...e,children:t}));exports.Item=s;

package/lib/wip/Search/Search.Results.Item.d.ts

@@ -1,11 +1,11 @@
-import { default as React } from 'react';
+import { ComponentPropsWithRef, ElementType, ReactElement } from 'react';
 import { ActionListItemProps } from '../../ActionList/ActionList.Item';
-export type SearchResultsItemProps<C extends React.ElementType = 'div'> = ActionListItemProps<C>;
-export declare const SearchResultsItem: SearchResultsItemComponent;
+export type SearchResultsItemProps<C extends ElementType = 'div'> = Omit<ActionListItemProps<C>, 'defaultSelected' | 'kind' | 'onSelectionChange' | 'role'>;
 interface SearchResultsItemComponent {
-    <C extends React.ElementType = 'div'>(props: ActionListItemProps<C> & {
-        ref?: React.ComponentPropsWithRef<C>['ref'];
-    }): React.ReactElement | null;
+    <C extends ElementType = 'div'>(props: ActionListItemProps<C> & {
+        ref?: ComponentPropsWithRef<C>['ref'];
+    }): ReactElement | null;
     displayName?: string;
 }
+export declare const Item: SearchResultsItemComponent;
 export {};

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

@@ -1,10 +1,9 @@
 import { jsx as m } from "react/jsx-runtime";
-import o from "react";
-import { ActionList as s } from "../../ActionList/ActionList.es.js";
-const a = o.forwardRef(
-  ({ children: t, ...e }, r) => /* @__PURE__ */ m(s.Item, { ref: r, ...e, children: t })
+import { forwardRef as e } from "react";
+import { ActionList as f } from "../../ActionList/ActionList.es.js";
+const s = e(
+  ({ children: r, ...o }, t) => /* @__PURE__ */ m(f.Item, { ref: t, ...o, children: r })
 );
-a.displayName = "Search.Results.Item";
 export {
-  a as SearchResultsItem
+  s as Item
 };

package/lib/wip/Search/Search.Results.ViewAll.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("react");require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");require("clsx");const e=require("../../../chunks/Search.Results.CFA_KEdP.js");require("../../ActionList/ActionList.cjs.js");require("../../Icon/Icon.cjs.js");exports.SearchResultsViewAll=e.SearchResultsViewAll;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("react");require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");require("clsx");const e=require("../../../chunks/Search.Results.BM9NkYBp.js");require("../../ActionList/ActionList.cjs.js");require("../../Icon/Icon.cjs.js");exports.ViewAll=e.ViewAll;

package/lib/wip/Search/Search.Results.ViewAll.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-export type SearchResultsViewAllProps<C extends React.ElementType = 'div'> = {
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, ReactElement } from 'react';
+export type SearchResultsViewAllProps<C extends ElementType = 'div'> = {
     /**
      * Specify a different component to render the item, such as an anchor tag for links
      *
@@ -11,12 +11,12 @@ export type SearchResultsViewAllProps<C extends React.ElementType = 'div'> = {
      * 'group' when inside a Search.Results, 'global' when directly inside Search.
      */
     variant?: 'group' | 'global';
-} & React.ComponentPropsWithoutRef<C>;
-export declare const SearchResultsViewAll: SearchResultsViewAllComponent;
+} & ComponentPropsWithoutRef<C>;
 interface SearchResultsViewAllComponent {
-    <C extends React.ElementType = 'div'>(props: SearchResultsViewAllProps<C> & {
-        ref?: React.ComponentPropsWithRef<C>['ref'];
-    }): React.ReactElement | null;
+    <C extends ElementType = 'div'>(props: SearchResultsViewAllProps<C> & {
+        ref?: ComponentPropsWithRef<C>['ref'];
+    }): ReactElement | null;
     displayName?: string;
 }
+export declare const ViewAll: SearchResultsViewAllComponent;
 export {};

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

@@ -3,9 +3,9 @@ import "react";
 import "../../../chunks/classNames.BTJmrO_L.js";
 import "../../../chunks/constants.CKKGf1-i.js";
 import "clsx";
-import { b as a } from "../../../chunks/Search.Results.DVf6WKnI.js";
+import { V as a } from "../../../chunks/Search.Results.wKBufUSo.js";
 import "../../ActionList/ActionList.es.js";
 import "../../Icon/Icon.es.js";
 export {
-  a as SearchResultsViewAll
+  a as ViewAll
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("react/jsx-runtime");require("react");require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");require("clsx");const e=require("../../../chunks/Search.Results.CFA_KEdP.js");require("./Search.Results.Item.cjs.js");require("../../ActionList/ActionList.cjs.js");exports.SearchResults=e.SearchResults;exports.SearchResultsComponent=e.SearchResultsComponent;exports.SearchResultsContext=e.SearchResultsContext;exports.default=e.SearchResults;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("react");require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");require("clsx");const e=require("../../../chunks/Search.Results.BM9NkYBp.js");require("./Search.Results.Item.cjs.js");require("../../ActionList/ActionList.cjs.js");exports.Results=e.Results;exports.SearchResultsContext=e.SearchResultsContext;

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

@@ -3,12 +3,10 @@ import "react";
 import "../../../chunks/classNames.BTJmrO_L.js";
 import "../../../chunks/constants.CKKGf1-i.js";
 import "clsx";
-import { a as c, c as l, d as u, a as h } from "../../../chunks/Search.Results.DVf6WKnI.js";
+import { R, a as l } from "../../../chunks/Search.Results.wKBufUSo.js";
 import "./Search.Results.Item.es.js";
 import "../../ActionList/ActionList.es.js";
 export {
-  c as SearchResults,
-  l as SearchResultsComponent,
-  u as SearchResultsContext,
-  h as default
+  R as Results,
+  l as SearchResultsContext
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),oe=require("../../../chunks/classNames.DAeKwerT.js"),ae=require("../../../chunks/constants.hwjHOsvT.js"),S=require("react"),t=require("../../../chunks/Search.Results.CFA_KEdP.js"),F=require("clsx"),ue=require("../../../chunks/form.context.hesWPMlU.js"),de=require("../../Form/contexts/label.context.cjs.js"),_e=require("../../Form/contexts/helperText.context.cjs.js"),pe=require("../../Form/hooks/useUniversalRef.hook.cjs.js"),q=require("../../Form/hooks/useAccessibleId.hook.cjs.js"),fe=require("../../Icon/Icon.cjs.js"),be=require("./useSearchDropdown.cjs.js"),xe=require("./SearchDropdown.cjs.js"),he=require("../../ActionList/ActionList.cjs.js"),me=require("../../../utils/hooks/useDebounced.cjs.js"),Se=require("../../../utils/hooks/useEffectAfterMount.cjs.js"),qe=require("../../Spinner/Spinner.cjs.js"),ye=require("../../CloseButton/CloseButton.cjs.js"),{baseClassNamePrefix:Ie,subElementClassPrefix:n,classModifierPrefix:_}=oe.getBEMClassNames("search"),je=S.forwardRef(({id:T,defaultValue:H="",value:y,onChange:r,onSearch:C,loading:I=!1,debounce:L=200,onKeyDown:f,label:B,contentAfter:j,contentBefore:D,helperText:P,fluid:V,width:z,theme:v,disabled:i,hideIcon:U,icon:W=t.SvgSearch,error:c,readOnly:a,clearable:N=!0,noResults:k,clearButtonAriaLabel:G="Clear search",className:J,children:w,"aria-describedby":Q,...b},X)=>{const{refFn:Y,ref:Z}=pe.useUniversalRef(X),[O,R]=S.useState(String(H)),u=y!==void 0,o=u?String(y):O,K=e=>{u||R(e.target.value),r==null||r(e)},{immediate:x,debounced:A}=me.useDebounced(C,L),ee=e=>{if(f==null||f(e),e.key==="Enter"){if(e.isDefaultPrevented()||e.isPropagationStopped())return;const{activeIndex:l,elementsRef:ne}=h,m=l!==null?ne.current[l]:null;m&&m.getAttribute("aria-disabled")!=="true"?(e.preventDefault(),m.click()):l===null&&x(o)}e.key==="Escape"&&(!N||h.open)&&e.preventDefault()},{id:d}=q.useAccessibleId(),{id:$}=q.useAccessibleId(),{id:g}=q.useAccessibleId(),E=!!(c!=null&&c.length),M=!!w||!!k,se=F(P&&g,E&&$,Q),{dropdownProps:h,getFieldProps:te,getInputProps:re}=be.useSearchDropdown({enabled:M,disabled:!!i,readOnly:!!a});Se.useEffectAfterMount(()=>{A(o)},[o,A]);const ie=F(t.styles[Ie],v&&ae.themeClassName(v),V&&t.styles[`${_}fluid`],i&&t.styles[`${_}disabled`],a&&t.styles[`${_}read-only`],c&&t.styles[`${_}error`],J),ce=e=>{var l;i||e.target instanceof HTMLInputElement||e.target.closest('button,[role="button"],a,[role="link"]')||(e.preventDefault(),e.stopPropagation(),(l=Z.current)==null||l.focus())},le=S.useCallback(()=>{u?r==null||r({target:{value:"",name:b.name,id:d,type:"search"}}):R(""),x("")},[d,u,r,x,b.name]);return s.jsxs("div",{id:T,className:ie,role:"search",style:{maxWidth:z},"aria-busy":I,children:[s.jsx(de.LabelProvider,{ctxDisabled:!!i,ctxRequired:!1,ctxHtmlFor:d,children:B}),s.jsxs("div",{className:t.styles[`${n}field`],...te({onPointerDown:ce}),children:[!U&&s.jsx(fe.Icon,{icon:W,"aria-hidden":!0}),D&&s.jsx("div",{className:t.styles[`${n}content`],children:D}),s.jsx("input",{id:d,type:"search",className:t.styles[`${n}field__input`],value:o,disabled:i,readOnly:a,"aria-invalid":!!c,"aria-describedby":se,...re({...b,onChange:K,onKeyDown:ee}),ref:Y}),I&&s.jsx("div",{className:t.styles[`${n}field__spinner`],children:s.jsx(qe.Spinner,{size:"xxs"})}),N&&o&&!i&&!a&&s.jsx(ye.CloseButton,{onClick:le,className:`${n}field__clear-button`,size:"sm","aria-label":G}),j&&s.jsx("div",{className:t.styles[`${n}content`],children:j})]}),s.jsxs(_e.HelperTextProvider,{ctxId:g,ctxDisabled:!!i,children:[P,E&&s.jsx(ue.HelperText,{id:$,appearance:"negative",children:c})]}),M&&s.jsx(xe.SearchDropdown,{...h,children:s.jsx(he.ActionList,{role:"listbox",noResults:k,children:w})})]})}),p=je;p.Results=t.SearchResults;p.displayName="Search";exports.Search=p;exports.default=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),be=require("../../../chunks/classNames.DAeKwerT.js"),_e=require("../../../chunks/constants.hwjHOsvT.js"),S=require("react"),t=require("../../../chunks/Search.Results.BM9NkYBp.js"),V=require("clsx"),pe=require("../../../chunks/form.context.hesWPMlU.js"),fe=require("../../Form/contexts/label.context.cjs.js"),xe=require("../../Form/contexts/helperText.context.cjs.js"),me=require("../../Form/hooks/useUniversalRef.hook.cjs.js"),_=require("../../Form/hooks/useAccessibleId.hook.cjs.js"),he=require("../../Icon/Icon.cjs.js"),ye=require("./useSearchDropdown.cjs.js"),Se=require("./SearchDropdown.cjs.js"),Ie=require("../../ActionList/ActionList.cjs.js"),qe=require("../../../utils/hooks/useDebounced.cjs.js"),Re=require("../../../utils/hooks/useEffectAfterMount.cjs.js"),je=require("../../Spinner/Spinner.cjs.js"),Ne=require("../../CloseButton/CloseButton.cjs.js"),{baseClassNamePrefix:De,subElementClassPrefix:c,classModifierPrefix:p}=be.getBEMClassNames("search"),n=S.forwardRef(({id:C,defaultValue:z="",value:I,onChange:i,onSearch:U,loading:q=!1,debounce:W=200,onKeyDown:f,label:R,contentAfter:j,contentBefore:N,helperText:D,fluid:G,width:J,theme:P,disabled:r,hideIcon:Q,icon:X=t.SvgSearch,error:l,readOnly:u,clearable:v=!0,noResults:w,clearButtonAriaLabel:Y="Clear search",className:Z,children:A,"aria-describedby":O,"aria-labelledby":K,"aria-label":k,...x},ee)=>{const{refFn:se,ref:te}=me.useUniversalRef(ee),[ie,$]=S.useState(String(z)),d=I!==void 0,o=d?String(I):ie,re=e=>{d||$(e.target.value),i==null||i(e)},{immediate:m,debounced:g}=qe.useDebounced(U,W),le=e=>{if(f==null||f(e),e.key==="Enter"){if(e.isDefaultPrevented()||e.isPropagationStopped())return;const{activeIndex:a,elementsRef:de}=h,y=a!==null?de.current[a]:null;y&&y.getAttribute("aria-disabled")!=="true"?(e.preventDefault(),y.click()):a===null&&m(o)}e.key==="Escape"&&(!v||h.open)&&e.preventDefault()},{id:b}=_.useAccessibleId(),{id:E}=_.useAccessibleId(),{id:F}=_.useAccessibleId(),{id:M}=_.useAccessibleId(),T=!!(l!=null&&l.length),H=!!A||!!w,B=V(D&&M,T&&F,O),L=K??(R?E:void 0),{dropdownProps:h,getFieldProps:ae,getInputProps:ce}=ye.useSearchDropdown({enabled:H,disabled:!!r,readOnly:!!u});Re.useEffectAfterMount(()=>{g(o)},[o,g]);const ne=V(t.styles[De],P&&_e.themeClassName(P),G&&t.styles[`${p}fluid`],r&&t.styles[`${p}disabled`],u&&t.styles[`${p}read-only`],l&&t.styles[`${p}error`],Z),oe=e=>{var a;r||e.target instanceof HTMLInputElement||e.target.closest('button,[role="button"],a,[role="link"]')||(e.preventDefault(),e.stopPropagation(),(a=te.current)==null||a.focus())},ue=S.useCallback(()=>{d?i==null||i({target:{value:"",name:x.name,id:b,type:"search"}}):$(""),m("")},[b,d,i,m,x.name]);return s.jsxs("div",{id:C,className:ne,role:"search",style:{maxWidth:J},"aria-labelledby":L,"aria-label":k,"aria-describedby":B,"aria-busy":q,children:[s.jsx(fe.LabelProvider,{ctxDisabled:!!r,ctxRequired:!1,ctxHtmlFor:b,ctxId:E,children:R}),s.jsxs("div",{className:t.styles[`${c}field`],...ae({onPointerDown:oe}),children:[!Q&&s.jsx(he.Icon,{icon:X,"aria-hidden":!0}),N&&s.jsx("div",{className:t.styles[`${c}content`],children:N}),s.jsx("input",{id:b,type:"search",className:t.styles[`${c}field__input`],value:o,disabled:r,readOnly:u,"aria-invalid":!!l,"aria-labelledby":L,"aria-label":k,"aria-describedby":B,...ce({...x,onChange:re,onKeyDown:le}),ref:se}),q&&s.jsx("div",{className:t.styles[`${c}field__spinner`],children:s.jsx(je.Spinner,{size:"xxs"})}),v&&o&&!r&&!u&&s.jsx(Ne.CloseButton,{onClick:ue,className:`${c}field__clear-button`,size:"sm","aria-label":Y}),j&&s.jsx("div",{className:t.styles[`${c}content`],children:j})]}),s.jsxs(xe.HelperTextProvider,{ctxId:M,ctxDisabled:!!r,children:[D,T&&s.jsx(pe.HelperText,{id:F,appearance:"negative",children:l})]}),H&&s.jsx(Se.SearchDropdown,{...h,children:s.jsx(Ie.ActionList,{role:"listbox",noResults:w,children:A})})]})});n.displayName="Search";n.Results=t.Results;n.Results.displayName="Search.Results";n.Results.Item.displayName="Search.Results.Item";n.Results.ViewAll.displayName="Search.Results.ViewAll";exports.Search=n;

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

@@ -1,11 +1,11 @@
 import { ThemeTypes } from '@viasat/beam-shared/utils';
 import { Nullable } from '@viasat/beam-shared/utils/types';
-import { default as React } from 'react';
-import { default as Results } from './Search.Results';
+import { default as React, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+import { Results } from './Search.Results';
 import { IconComponentType } from '../../../utils/types';
 export interface SearchProps extends React.ComponentPropsWithRef<'input'> {
     /**
-     * Specify a callback called whenever a search is conducted
+     * Specify a callback that gets called whenever a search is conducted
      */
     onSearch: (query: string) => void;
     /**
@@ -72,17 +72,26 @@ export interface SearchProps extends React.ComponentPropsWithRef<'input'> {
     noResults?: string;
     /**
      * Aria label for the clear button
-     * @default 'Clear search'
+     * @default Clear search
      */
     clearButtonAriaLabel?: string;
+    /**
+     * Specify if Search displays in a disabled state
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Specify the theme of the Search. By default it inherits the theme from the parent
      */
     theme?: ThemeTypes;
+    /**
+     * Speficy the Search results to display in the Search dropdown
+     * (see Search.Results)
+     */
     children?: React.ReactNode;
 }
-declare const SearchComponent: React.ForwardRefExoticComponent<Omit<SearchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export declare const Search: typeof SearchComponent & {
+interface SearchComponent extends ForwardRefExoticComponent<PropsWithoutRef<SearchProps> & RefAttributes<HTMLInputElement>> {
     Results: typeof Results;
-};
-export default Search;
+}
+export declare const Search: SearchComponent;
+export {};

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

@@ -1,161 +1,179 @@
 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.DVf6WKnI.js";
-import F from "clsx";
-import { H as pe } from "../../../chunks/form.context.D7b4066_.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: 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: 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: b,
-    getFieldProps: se,
-    getInputProps: ie
-  } = Ie({
-    enabled: A,
-    disabled: !!i,
-    readOnly: !!n
-  });
-  ve(() => {
-    k(c);
-  }, [c, k]);
-  const ae = F(
-    r[ge],
-    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: p.name,
-        id: d,
-        type: "search"
+import { g as ue } from "../../../chunks/classNames.BTJmrO_L.js";
+import { t as fe } from "../../../chunks/constants.CKKGf1-i.js";
+import pe, { forwardRef as be, useCallback as he } from "react";
+import { s as r, S as xe, R as Ie } from "../../../chunks/Search.Results.wKBufUSo.js";
+import q from "clsx";
+import { H as ye } from "../../../chunks/form.context.D7b4066_.js";
+import { LabelProvider as Se } from "../../Form/contexts/label.context.es.js";
+import { HelperTextProvider as Ne } from "../../Form/contexts/helperText.context.es.js";
+import { useUniversalRef as Re } from "../../Form/hooks/useUniversalRef.hook.es.js";
+import { useAccessibleId as f } from "../../Form/hooks/useAccessibleId.hook.es.js";
+import { Icon as Pe } from "../../Icon/Icon.es.js";
+import { useSearchDropdown as ve } from "./useSearchDropdown.es.js";
+import { SearchDropdown as De } from "./SearchDropdown.es.js";
+import { ActionList as $e } from "../../ActionList/ActionList.es.js";
+import { useDebounced as ge } from "../../../utils/hooks/useDebounced.es.js";
+import { useEffectAfterMount as _e } from "../../../utils/hooks/useEffectAfterMount.es.js";
+import { Spinner as we } from "../../Spinner/Spinner.es.js";
+import { CloseButton as Ee } from "../../CloseButton/CloseButton.es.js";
+const { baseClassNamePrefix: ke, subElementClassPrefix: o, classModifierPrefix: p } = ue("search"), n = be(
+  ({
+    id: z,
+    defaultValue: C = "",
+    value: N,
+    onChange: a,
+    onSearch: U,
+    loading: R = !1,
+    debounce: W = 200,
+    onKeyDown: b,
+    label: P,
+    contentAfter: v,
+    contentBefore: D,
+    helperText: $,
+    fluid: G,
+    width: J,
+    theme: g,
+    disabled: s,
+    hideIcon: Q,
+    icon: X = xe,
+    error: i,
+    readOnly: d,
+    clearable: _ = !0,
+    noResults: w,
+    clearButtonAriaLabel: Y = "Clear search",
+    className: Z,
+    children: E,
+    "aria-describedby": K,
+    "aria-labelledby": O,
+    "aria-label": k,
+    ...h
+  }, ee) => {
+    const { refFn: te, ref: re } = Re(ee), [ae, A] = pe.useState(String(C)), m = N !== void 0, c = m ? String(N) : ae, se = (e) => {
+      m || A(e.target.value), a == null || a(e);
+    }, { immediate: x, debounced: H } = ge(U, W), ie = (e) => {
+      if (b == null || b(e), e.key === "Enter") {
+        if (e.isDefaultPrevented() || e.isPropagationStopped())
+          return;
+        const { activeIndex: l, elementsRef: me } = I, y = l !== null ? me.current[l] : null;
+        y && y.getAttribute("aria-disabled") !== "true" ? (e.preventDefault(), y.click()) : l === null && x(c);
       }
-    }) : E(""), h("");
-  }, [d, m, s, h, p.name]);
-  return /* @__PURE__ */ S(
-    "div",
-    {
-      id: T,
-      className: ae,
-      role: "search",
-      style: { maxWidth: U },
-      "aria-busy": D,
-      children: [
-        /* @__PURE__ */ t(
-          he,
-          {
-            ctxDisabled: !!i,
-            ctxRequired: !1,
-            ctxHtmlFor: d,
-            children: B
-          }
-        ),
-        /* @__PURE__ */ S(
-          "div",
-          {
-            className: r[`${l}field`],
-            ...se({ onPointerDown: oe }),
-            children: [
-              !W && /* @__PURE__ */ t(Se, { icon: G, "aria-hidden": !0 }),
-              v && /* @__PURE__ */ t("div", { className: r[`${l}content`], children: v }),
-              /* @__PURE__ */ t(
-                "input",
-                {
-                  id: d,
-                  type: "search",
-                  className: r[`${l}field__input`],
-                  value: c,
-                  disabled: i,
-                  readOnly: n,
-                  "aria-invalid": !!a,
-                  "aria-describedby": re,
-                  ...ie({
-                    ...p,
-                    onChange: ee,
-                    onKeyDown: te
-                  }),
-                  ref: Z
-                }
-              ),
-              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__ */ S(be, { ctxId: H, ctxDisabled: !!i, children: [
-          $,
-          M && /* @__PURE__ */ t(pe, { id: w, appearance: "negative", children: a })
-        ] }),
-        A && /* @__PURE__ */ t(Pe, { ...b, children: /* @__PURE__ */ t(De, { role: "listbox", noResults: R, children: _ }) })
-      ]
-    }
-  );
-}), L = Re;
-L.Results = ue;
-L.displayName = "Search";
+      e.key === "Escape" && (!_ || I.open) && e.preventDefault();
+    }, { id: u } = f(), { id: M } = f(), { id: V } = f(), { id: B } = f(), F = !!(i != null && i.length), L = !!E || !!w, T = q(
+      $ && B,
+      F && V,
+      K
+    ), j = O ?? (P ? M : void 0), { dropdownProps: I, getFieldProps: le, getInputProps: oe } = ve({
+      enabled: L,
+      disabled: !!s,
+      readOnly: !!d
+    });
+    _e(() => {
+      H(c);
+    }, [c, H]);
+    const ce = q(
+      r[ke],
+      g && fe(g),
+      G && r[`${p}fluid`],
+      s && r[`${p}disabled`],
+      d && r[`${p}read-only`],
+      i && r[`${p}error`],
+      Z
+    ), ne = (e) => {
+      var l;
+      s || e.target instanceof HTMLInputElement || e.target.closest(
+        'button,[role="button"],a,[role="link"]'
+      ) || (e.preventDefault(), e.stopPropagation(), (l = re.current) == null || l.focus());
+    }, de = he(() => {
+      m ? a == null || a({
+        target: {
+          value: "",
+          name: h.name,
+          id: u,
+          type: "search"
+        }
+      }) : A(""), x("");
+    }, [u, m, a, x, h.name]);
+    return /* @__PURE__ */ S(
+      "div",
+      {
+        id: z,
+        className: ce,
+        role: "search",
+        style: { maxWidth: J },
+        "aria-labelledby": j,
+        "aria-label": k,
+        "aria-describedby": T,
+        "aria-busy": R,
+        children: [
+          /* @__PURE__ */ t(
+            Se,
+            {
+              ctxDisabled: !!s,
+              ctxRequired: !1,
+              ctxHtmlFor: u,
+              ctxId: M,
+              children: P
+            }
+          ),
+          /* @__PURE__ */ S(
+            "div",
+            {
+              className: r[`${o}field`],
+              ...le({ onPointerDown: ne }),
+              children: [
+                !Q && /* @__PURE__ */ t(Pe, { icon: X, "aria-hidden": !0 }),
+                D && /* @__PURE__ */ t("div", { className: r[`${o}content`], children: D }),
+                /* @__PURE__ */ t(
+                  "input",
+                  {
+                    id: u,
+                    type: "search",
+                    className: r[`${o}field__input`],
+                    value: c,
+                    disabled: s,
+                    readOnly: d,
+                    "aria-invalid": !!i,
+                    "aria-labelledby": j,
+                    "aria-label": k,
+                    "aria-describedby": T,
+                    ...oe({
+                      ...h,
+                      onChange: se,
+                      onKeyDown: ie
+                    }),
+                    ref: te
+                  }
+                ),
+                R && /* @__PURE__ */ t("div", { className: r[`${o}field__spinner`], children: /* @__PURE__ */ t(we, { size: "xxs" }) }),
+                _ && c && !s && !d && /* @__PURE__ */ t(
+                  Ee,
+                  {
+                    onClick: de,
+                    className: `${o}field__clear-button`,
+                    size: "sm",
+                    "aria-label": Y
+                  }
+                ),
+                v && /* @__PURE__ */ t("div", { className: r[`${o}content`], children: v })
+              ]
+            }
+          ),
+          /* @__PURE__ */ S(Ne, { ctxId: B, ctxDisabled: !!s, children: [
+            $,
+            F && /* @__PURE__ */ t(ye, { id: V, appearance: "negative", children: i })
+          ] }),
+          L && /* @__PURE__ */ t(De, { ...I, children: /* @__PURE__ */ t($e, { role: "listbox", noResults: w, children: E }) })
+        ]
+      }
+    );
+  }
+);
+n.displayName = "Search";
+n.Results = Ie;
+n.Results.displayName = "Search.Results";
+n.Results.Item.displayName = "Search.Results.Item";
+n.Results.ViewAll.displayName = "Search.Results.ViewAll";
 export {
-  L as Search,
-  L as default
+  n as Search
 };

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

@@ -1 +1 @@
-"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.DGUJIXrP.js"),s=require("../../../chunks/Search.Results.CFA_KEdP.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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),p=require("@floating-ui/react"),_=require("../../Box/Box.cjs.js"),q=require("clsx"),t=require("../../../chunks/classNames.DAeKwerT.js"),N=require("../../../chunks/constants.hwjHOsvT.js"),b=require("../../ActionList/ActionList.context.cjs.js"),g=require("react"),e=require("../../../chunks/Search.Results.BM9NkYBp.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:w}=t.getBEMClassNames("search"),y=[e.Results,e.Results.Item,e.Results.ViewAll],v=({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(_.Box,{className:q(l&&N.themeClassName(l),h.floatinguiStyles[P],B.popoverStyles[S],e.styles[`${w}dropdown`],x),...a(),style:i,ref:m,children:s.jsx(b.ActionListContextProvider,{allowChildrenTypes:y,getItemProps:u,itemsFocusable:!1,onItemClick:d,labelsRef:n,elementsRef:c,activeIndex:C,children:f})})}):null};exports.SearchDropdown=v;