@viasat/beam-react 2.2.1 → 2.8.0

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

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

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

@@ -0,0 +1,88 @@
+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 { IconComponentType } from '../../../utils/types';
+export interface SearchProps extends React.ComponentPropsWithRef<'input'> {
+    /**
+     * Specify a callback called whenever a search is conducted
+     */
+    onSearch: (query: string) => void;
+    /**
+     * Specify the debounce time (in milliseconds) for the search input
+     * @default 200
+     */
+    debounce?: number;
+    /**
+     * Specify placeholder text for Search
+     */
+    placeholder?: string;
+    /**
+     * Specify Label for Search
+     */
+    label?: Nullable<React.ReactElement>;
+    /**
+     * Specify HelperText for Search
+     */
+    helperText?: Nullable<React.ReactElement>;
+    /**
+     * Specify if Search is fluid
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Specify the width of Search
+     */
+    width?: string;
+    /**
+     * Display a loading state for Search
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Adds a clear button to the Search input
+     *
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Specify if the icon displays on the Search
+     */
+    hideIcon?: boolean;
+    /**
+     * Specify a different icon for the Search
+     */
+    icon?: IconComponentType;
+    /**
+     * Specify content to display before input
+     */
+    contentBefore?: React.ReactNode;
+    /**
+     * Specify content to display after input
+     */
+    contentAfter?: React.ReactNode;
+    /**
+     * Specify error text and display error state of a Search
+     */
+    error?: boolean | string;
+    /**
+     * Display a message if no results are found
+     */
+    noResults?: string;
+    /**
+     * Aria label for the clear button
+     * @default 'Clear search'
+     */
+    clearButtonAriaLabel?: string;
+    /**
+     * Specify the theme of the Search. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    children?: React.ReactNode;
+}
+declare const SearchComponent: React.ForwardRefExoticComponent<Omit<SearchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Search: typeof SearchComponent & {
+    Results: typeof Results;
+};
+export default Search;

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

@@ -0,0 +1,157 @@
+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 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,
+  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,
+  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
+  ), {
+    dropdownProps: M,
+    getFieldProps: se,
+    getInputProps: ie
+  } = be({
+    enabled: _,
+    disabled: !!i,
+    readOnly: !!c
+  });
+  Ce(() => {
+    $(l);
+  }, [l, $]);
+  const oe = 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({
+      target: {
+        value: "",
+        name: u.name,
+        id: m,
+        type: "search"
+      }
+    }) : R(""), h("");
+  }, [m, n, s, h, u.name]);
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      id: f,
+      className: oe,
+      role: "search",
+      style: { maxWidth: Z },
+      "aria-busy": v,
+      children: [
+        /* @__PURE__ */ t(
+          fe,
+          {
+            ctxDisabled: !!i,
+            ctxRequired: !1,
+            ctxHtmlFor: m,
+            children: z
+          }
+        ),
+        /* @__PURE__ */ x(
+          "div",
+          {
+            className: r[`${a}field`],
+            ...se({ onPointerDown: ae }),
+            children: [
+              !U && /* @__PURE__ */ t(he, { icon: W, "aria-hidden": !0 }),
+              C && /* @__PURE__ */ t("div", { className: r[`${a}content`], children: C }),
+              /* @__PURE__ */ t(
+                "input",
+                {
+                  id: m,
+                  type: "search",
+                  className: r[`${a}field__input`],
+                  value: l,
+                  disabled: i,
+                  readOnly: c,
+                  "aria-invalid": !!o,
+                  "aria-describedby": re,
+                  ...ie({
+                    ...u,
+                    onChange: ee,
+                    onKeyDown: te
+                  }),
+                  ref: Y
+                }
+              ),
+              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 })
+            ]
+          }
+        ),
+        /* @__PURE__ */ x(pe, { ctxId: E, ctxDisabled: !!i, children: [
+          I,
+          L && /* @__PURE__ */ t(de, { id: y, appearance: "negative", children: o })
+        ] }),
+        _ && /* @__PURE__ */ t(Se, { ...M, children: /* @__PURE__ */ t(ve, { role: "listbox", noResults: g, children: w }) })
+      ]
+    }
+  );
+}), T = we;
+T.Results = xe;
+T.displayName = "Search";
+export {
+  T as Search,
+  T as default
+};

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

@@ -0,0 +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;

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

@@ -0,0 +1,19 @@
+import { FloatingContext, 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;
+    labelsRef: MutableRefObject<string[]>;
+    elementsRef: MutableRefObject<HTMLElement[]>;
+    getItemProps: UseInteractionsReturn['getItemProps'];
+    setOpen: (open: boolean) => void;
+    setFloating: (node: HTMLElement | null) => void;
+    activeIndex: number | null;
+    theme?: ThemeTypes;
+    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;

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

@@ -0,0 +1,71 @@
+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 = ({
+  setOpen: r,
+  isMounted: l,
+  getFloatingProps: i,
+  floatingStyles: m,
+  labelsRef: n,
+  elementsRef: c,
+  getItemProps: f,
+  setFloating: u,
+  theme: o,
+  className: p,
+  children: d,
+  context: s,
+  activeIndex: g
+}) => {
+  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,
+    {
+      context: s,
+      modal: !1,
+      returnFocus: !0,
+      closeOnFocusOut: !0,
+      guards: !0,
+      disabled: !1,
+      restoreFocus: !0,
+      order: ["reference", "content"],
+      children: /* @__PURE__ */ e(
+        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
+            }
+          )
+        }
+      )
+    }
+  ) }) }) }) : null;
+};
+export {
+  H as SearchDropdown
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Search.cjs.js");exports.Search=e.Search;

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

@@ -0,0 +1 @@
+export * from './Search';

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

@@ -0,0 +1,4 @@
+import { Search as o } from "./Search.es.js";
+export {
+  o as Search
+};

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

@@ -0,0 +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;