@fluentui/react-search 0.0.0-nightly-20240411-0405.1

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { InputOnChangeData } from '@fluentui/react-input';
+import type { InputProps } from '@fluentui/react-input';
+import type { InputSlots } from '@fluentui/react-input';
+import type { InputState } from '@fluentui/react-input';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Render the final JSX of SearchBox
+ */
+export declare const renderSearchBox_unstable: (state: SearchBoxState) => JSX.Element;
+
+/**
+ * SearchBox component - TODO: add more docs
+ */
+export declare const SearchBox: ForwardRefComponent<SearchBoxProps>;
+
+/** Overloaded onChange event type, used to merge functionality of regular text entry and the dismiss button */
+export declare type SearchBoxChangeEvent = React_2.ChangeEvent<HTMLInputElement> | React_2.MouseEvent<HTMLSpanElement>;
+
+export declare const searchBoxClassNames: SlotClassNames<SearchBoxSlots>;
+
+/**
+ * SearchBox Props
+ */
+export declare type SearchBoxProps = Omit<ComponentProps<Partial<SearchBoxSlots>, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & Omit<InputProps, 'onChange'> & {
+    /**
+     * Custom onChange callback.
+     * Will be traditionally supplied with a React.ChangeEvent<HTMLInputElement> for usual character entry.
+     * When the dismiss button is clicked, this will be called with an event of type React.MouseEvent<HTMLSpanElement>
+     * and an empty string as the `value` property of the data parameter
+     */
+    onChange?: (event: SearchBoxChangeEvent, data: InputOnChangeData) => void;
+};
+
+export declare type SearchBoxSlots = InputSlots & {
+    /** Last element in the input, within the input border */
+    dismiss?: Slot<'span'>;
+};
+
+/**
+ * State used in rendering SearchBox
+ */
+export declare type SearchBoxState = ComponentState<SearchBoxSlots> & InputState & Required<Pick<InputState, 'size'>> & Required<Pick<SearchBoxProps, 'disabled'>> & {
+    focused: boolean;
+};
+
+/**
+ * Create the state required to render SearchBox.
+ *
+ * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,
+ * before being passed to renderSearchBox_unstable.
+ *
+ * @param props - props from this instance of SearchBox
+ * @param ref - reference to root HTMLElement of SearchBox
+ */
+export declare const useSearchBox_unstable: (props: SearchBoxProps, ref: React_2.Ref<HTMLInputElement>) => SearchBoxState;
+
+/**
+ * Apply styling to the SearchBox slots based on the state
+ */
+export declare const useSearchBoxStyles_unstable: (state: SearchBoxState) => SearchBoxState;
+
+export { }

package/lib/SearchBox.js

@@ -0,0 +1 @@
+export * from './components/SearchBox/index';

package/lib/SearchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SearchBox.ts"],"sourcesContent":["export * from './components/SearchBox/index';\n"],"names":[],"mappings":"AAAA,cAAc,+BAA+B"}

package/lib/components/SearchBox/SearchBox.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useSearchBox_unstable } from './useSearchBox';
+import { renderSearchBox_unstable } from './renderSearchBox';
+import { useSearchBoxStyles_unstable } from './useSearchBoxStyles.styles';
+/**
+ * SearchBox component - TODO: add more docs
+ */ export const SearchBox = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useSearchBox_unstable(props, ref);
+    useSearchBoxStyles_unstable(state);
+    return renderSearchBox_unstable(state);
+});
+SearchBox.displayName = 'SearchBox';

package/lib/components/SearchBox/SearchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SearchBox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSearchBox_unstable } from './useSearchBox';\nimport { renderSearchBox_unstable } from './renderSearchBox';\nimport { useSearchBoxStyles_unstable } from './useSearchBoxStyles.styles';\nimport type { SearchBoxProps } from './SearchBox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * SearchBox component - TODO: add more docs\n */\nexport const SearchBox: ForwardRefComponent<SearchBoxProps> = React.forwardRef((props, ref) => {\n  const state = useSearchBox_unstable(props, ref);\n\n  useSearchBoxStyles_unstable(state);\n  return renderSearchBox_unstable(state);\n});\n\nSearchBox.displayName = 'SearchBox';\n"],"names":["React","useSearchBox_unstable","renderSearchBox_unstable","useSearchBoxStyles_unstable","SearchBox","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,8BAA8B;AAI1E;;CAEC,GACD,OAAO,MAAMC,0BAAiDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQP,sBAAsBK,OAAOC;IAE3CJ,4BAA4BK;IAC5B,OAAON,yBAAyBM;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

package/lib/components/SearchBox/SearchBox.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/components/SearchBox/SearchBox.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SearchBox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { InputOnChangeData, InputProps, InputSlots, InputState } from '@fluentui/react-input';\n\nexport type SearchBoxSlots = InputSlots & {\n  /** Last element in the input, within the input border */\n  dismiss?: Slot<'span'>;\n};\n\n/**\n * SearchBox Props\n */\nexport type SearchBoxProps = Omit<\n  ComponentProps<Partial<SearchBoxSlots>, 'input'>,\n  // `children` is unsupported. The rest of these native props have customized definitions.\n  'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'\n> &\n  Omit<InputProps, 'onChange'> & {\n    /**\n     * Custom onChange callback.\n     * Will be traditionally supplied with a React.ChangeEvent<HTMLInputElement> for usual character entry.\n     * When the dismiss button is clicked, this will be called with an event of type React.MouseEvent<HTMLSpanElement>\n     * and an empty string as the `value` property of the data parameter\n     */\n    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n    onChange?: (event: SearchBoxChangeEvent, data: InputOnChangeData) => void;\n  };\n\n/**\n * State used in rendering SearchBox\n */\nexport type SearchBoxState = ComponentState<SearchBoxSlots> &\n  InputState &\n  Required<Pick<InputState, 'size'>> &\n  Required<Pick<SearchBoxProps, 'disabled'>> & {\n    focused: boolean;\n  };\n\n/** Overloaded onChange event type, used to merge functionality of regular text entry and the dismiss button */\nexport type SearchBoxChangeEvent = React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/SearchBox/index.js

@@ -0,0 +1,5 @@
+export * from './SearchBox';
+export * from './SearchBox.types';
+export * from './renderSearchBox';
+export * from './useSearchBox';
+export * from './useSearchBoxStyles.styles';

package/lib/components/SearchBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './SearchBox';\nexport * from './SearchBox.types';\nexport * from './renderSearchBox';\nexport * from './useSearchBox';\nexport * from './useSearchBoxStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,iBAAiB;AAC/B,cAAc,8BAA8B"}

package/lib/components/SearchBox/renderSearchBox.js

@@ -0,0 +1,19 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of SearchBox
+ */ export const renderSearchBox_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.contentBefore && /*#__PURE__*/ _jsx(state.contentBefore, {}),
+            /*#__PURE__*/ _jsx(state.input, {}),
+            state.contentAfter && /*#__PURE__*/ _jsxs(state.contentAfter, {
+                children: [
+                    state.contentAfter.children,
+                    state.dismiss && /*#__PURE__*/ _jsx(state.dismiss, {})
+                ]
+            })
+        ]
+    });
+};

package/lib/components/SearchBox/renderSearchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderSearchBox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SearchBoxState, SearchBoxSlots } from './SearchBox.types';\n\n/**\n * Render the final JSX of SearchBox\n */\nexport const renderSearchBox_unstable = (state: SearchBoxState) => {\n  assertSlots<SearchBoxSlots>(state);\n\n  return (\n    <state.root>\n      {state.contentBefore && <state.contentBefore />}\n      <state.input />\n      {state.contentAfter && (\n        <state.contentAfter>\n          {state.contentAfter.children}\n          {state.dismiss && <state.dismiss />}\n        </state.contentAfter>\n      )}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSearchBox_unstable","state","root","contentBefore","input","contentAfter","children","dismiss"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,aAAa,kBAAI,KAACF,MAAME,aAAa;0BAC5C,KAACF,MAAMG,KAAK;YACXH,MAAMI,YAAY,kBACjB,MAACJ,MAAMI,YAAY;;oBAChBJ,MAAMI,YAAY,CAACC,QAAQ;oBAC3BL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;;;;;AAK1C,EAAE"}

package/lib/components/SearchBox/useSearchBox.js

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { isResolvedShorthand, mergeCallbacks, slot, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { useInput_unstable } from '@fluentui/react-input';
+import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
+/**
+ * Create the state required to render SearchBox.
+ *
+ * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,
+ * before being passed to renderSearchBox_unstable.
+ *
+ * @param props - props from this instance of SearchBox
+ * @param ref - reference to root HTMLElement of SearchBox
+ */ export const useSearchBox_unstable = (props, ref)=>{
+    const { size = 'medium', disabled = false, root, contentBefore, dismiss, contentAfter, ...inputProps } = props;
+    const searchBoxRootRef = React.useRef(null);
+    const searchBoxRef = React.useRef(null);
+    const [value, setValue] = useControllableState({
+        state: props.value,
+        defaultState: props.defaultValue,
+        initialState: ''
+    });
+    // Tracks the focus of the component for the contentAfter and dismiss button
+    const [focused, setFocused] = React.useState(false);
+    const onFocus = useEventCallback(()=>{
+        setFocused(true);
+    });
+    const onBlur = useEventCallback((ev)=>{
+        var _searchBoxRootRef_current;
+        setFocused(!!((_searchBoxRootRef_current = searchBoxRootRef.current) === null || _searchBoxRootRef_current === void 0 ? void 0 : _searchBoxRootRef_current.contains(ev.relatedTarget)));
+    });
+    const rootProps = slot.resolveShorthand(root);
+    const handleDismissClick = useEventCallback((event)=>{
+        var _props_onChange;
+        if (isResolvedShorthand(dismiss)) {
+            var _dismiss_onClick;
+            (_dismiss_onClick = dismiss.onClick) === null || _dismiss_onClick === void 0 ? void 0 : _dismiss_onClick.call(dismiss, event);
+        }
+        const newValue = '';
+        setValue(newValue);
+        (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, event, {
+            value: newValue
+        });
+    });
+    const inputState = useInput_unstable({
+        type: 'search',
+        disabled,
+        size,
+        value,
+        root: slot.always({
+            ...rootProps,
+            ref: useMergedRefs(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
+            onFocus: useEventCallback(mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus)),
+            onBlur: useEventCallback(mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur))
+        }, {
+            elementType: 'span'
+        }),
+        contentBefore: slot.optional(contentBefore, {
+            renderByDefault: true,
+            defaultProps: {
+                children: /*#__PURE__*/ React.createElement(SearchRegular, null)
+            },
+            elementType: 'span'
+        }),
+        contentAfter: slot.optional(contentAfter, {
+            renderByDefault: true,
+            elementType: 'span'
+        }),
+        ...inputProps,
+        onChange: useEventCallback((ev)=>{
+            var _props_onChange;
+            const newValue = ev.target.value;
+            (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, ev, {
+                value: newValue
+            });
+            setValue(newValue);
+        })
+    }, useMergedRefs(searchBoxRef, ref));
+    const state = {
+        ...inputState,
+        components: {
+            ...inputState.components,
+            dismiss: 'span'
+        },
+        dismiss: slot.optional(dismiss, {
+            defaultProps: {
+                children: /*#__PURE__*/ React.createElement(DismissRegular, null),
+                role: 'button',
+                'aria-label': 'clear',
+                tabIndex: -1
+            },
+            renderByDefault: true,
+            elementType: 'span'
+        }),
+        disabled,
+        focused,
+        size
+    };
+    if (state.dismiss) {
+        state.dismiss.onClick = handleDismissClick;
+    }
+    return state;
+};

package/lib/components/SearchBox/useSearchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useSearchBox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  isResolvedShorthand,\n  mergeCallbacks,\n  slot,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useInput_unstable } from '@fluentui/react-input';\nimport { DismissRegular, SearchRegular } from '@fluentui/react-icons';\nimport type { ExtractSlotProps } from '@fluentui/react-utilities';\nimport type { SearchBoxSlots, SearchBoxProps, SearchBoxState } from './SearchBox.types';\n\n/**\n * Create the state required to render SearchBox.\n *\n * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,\n * before being passed to renderSearchBox_unstable.\n *\n * @param props - props from this instance of SearchBox\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLInputElement>): SearchBoxState => {\n  const { size = 'medium', disabled = false, root, contentBefore, dismiss, contentAfter, ...inputProps } = props;\n\n  const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n  const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  // Tracks the focus of the component for the contentAfter and dismiss button\n  const [focused, setFocused] = React.useState(false);\n\n  const onFocus = useEventCallback(() => {\n    setFocused(true);\n  });\n\n  const onBlur: React.FocusEventHandler<HTMLSpanElement> = useEventCallback(ev => {\n    setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n  });\n\n  const rootProps = slot.resolveShorthand(root);\n\n  const handleDismissClick = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {\n    if (isResolvedShorthand(dismiss)) {\n      dismiss.onClick?.(event);\n    }\n    const newValue = '';\n    setValue(newValue);\n    props.onChange?.(event, { value: newValue });\n  });\n\n  const inputState = useInput_unstable(\n    {\n      type: 'search',\n      disabled,\n      size,\n      value,\n      root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n        {\n          ...rootProps,\n          ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n          onFocus: useEventCallback(mergeCallbacks(rootProps?.onFocus, onFocus)),\n          onBlur: useEventCallback(mergeCallbacks(rootProps?.onBlur, onBlur)),\n        },\n        {\n          elementType: 'span',\n        },\n      ),\n      contentBefore: slot.optional(contentBefore, {\n        renderByDefault: true,\n        defaultProps: {\n          children: <SearchRegular />,\n        },\n        elementType: 'span',\n      }),\n      contentAfter: slot.optional(contentAfter, {\n        renderByDefault: true,\n        elementType: 'span',\n      }),\n      ...inputProps,\n      onChange: useEventCallback(ev => {\n        const newValue = ev.target.value;\n        props.onChange?.(ev, { value: newValue });\n        setValue(newValue);\n      }),\n    },\n    useMergedRefs(searchBoxRef, ref),\n  );\n\n  const state: SearchBoxState = {\n    ...inputState,\n    components: {\n      ...inputState.components,\n      dismiss: 'span',\n    },\n    dismiss: slot.optional(dismiss, {\n      defaultProps: {\n        children: <DismissRegular />,\n        role: 'button',\n        'aria-label': 'clear',\n        tabIndex: -1,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    disabled,\n    focused,\n    size,\n  };\n\n  if (state.dismiss) {\n    state.dismiss.onClick = handleDismissClick;\n  }\n\n  return state;\n};\n"],"names":["React","isResolvedShorthand","mergeCallbacks","slot","useControllableState","useEventCallback","useMergedRefs","useInput_unstable","DismissRegular","SearchRegular","useSearchBox_unstable","props","ref","size","disabled","root","contentBefore","dismiss","contentAfter","inputProps","searchBoxRootRef","useRef","searchBoxRef","value","setValue","state","defaultState","defaultValue","initialState","focused","setFocused","useState","onFocus","onBlur","ev","current","contains","relatedTarget","rootProps","resolveShorthand","handleDismissClick","event","onClick","newValue","onChange","inputState","type","always","elementType","optional","renderByDefault","defaultProps","children","target","components","role","tabIndex"],"mappings":"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"}

package/lib/components/SearchBox/useSearchBoxStyles.styles.js

@@ -0,0 +1,99 @@
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useInputStyles_unstable } from '@fluentui/react-input';
+export const searchBoxClassNames = {
+  root: 'fui-SearchBox',
+  dismiss: 'fui-SearchBox__dismiss',
+  contentAfter: 'fui-SearchBox__contentAfter',
+  contentBefore: 'fui-SearchBox__contentBefore',
+  input: 'fui-SearchBox__input'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootStyles = /*#__PURE__*/__styles({
+  small: {
+    i8kkvl: "fjuset5",
+    B2u0y6b: "f1xzfw5u",
+    uwmqm3: ["fk8j09s", "fdw0yi8"],
+    z189sj: ["fdw0yi8", "fk8j09s"]
+  },
+  medium: {
+    i8kkvl: "fjuset5",
+    B2u0y6b: "f1xzfw5u",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
+    z189sj: ["f1vdfbxk", "f1f5gg8d"]
+  },
+  large: {
+    i8kkvl: "fjuset5",
+    B2u0y6b: "f1xzfw5u",
+    uwmqm3: ["f1ng84yb", "f11gcy0p"],
+    z189sj: ["f11gcy0p", "f1ng84yb"]
+  },
+  input: {
+    uwmqm3: ["fk8j09s", "fdw0yi8"],
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Boqhc8c: "f18izjht",
+    B8uat0v: "fcoa6sg"
+  }
+}, {
+  d: [".fjuset5{column-gap:0;}", ".f1xzfw5u{max-width:468px;}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f18izjht::-webkit-search-decoration{display:none;}", ".fcoa6sg::-webkit-search-cancel-button{display:none;}"]
+});
+const useContentAfterStyles = /*#__PURE__*/__styles({
+  contentAfter: {
+    uwmqm3: ["f1uw59to", "fw5db7e"],
+    i8kkvl: "f1ufnopg"
+  },
+  rest: {
+    abs64n: "fk73vx1",
+    Bqenvij: "fniina8",
+    a9b677: "f3tsq5r"
+  }
+}, {
+  d: [".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}", ".fk73vx1{opacity:0;}", ".fniina8{height:0;}", ".f3tsq5r{width:0;}"]
+});
+const useDismissClassName = /*#__PURE__*/__resetStyles("r1pvzcuu", null, [".r1pvzcuu{box-sizing:border-box;color:var(--colorNeutralForeground3);display:flex;cursor:pointer;}", ".r1pvzcuu>svg{font-size:20px;}"]);
+const useDismissStyles = /*#__PURE__*/__styles({
+  disabled: {
+    sj55zd: "f1s2aq7o"
+  },
+  small: {
+    kwki1k: "f3u2cy0"
+  },
+  medium: {},
+  large: {
+    kwki1k: "fa420co"
+  }
+}, {
+  d: [".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f3u2cy0>svg{font-size:16px;}", ".fa420co>svg{font-size:24px;}"]
+});
+/**
+ * Apply styling to the SearchBox slots based on the state
+ */
+export const useSearchBoxStyles_unstable = state => {
+  const {
+    disabled,
+    focused,
+    size
+  } = state;
+  const rootStyles = useRootStyles();
+  const contentAfterStyles = useContentAfterStyles();
+  const dismissClassName = useDismissClassName();
+  const dismissStyles = useDismissStyles();
+  state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], state.root.className);
+  state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, state.input.className);
+  if (state.dismiss) {
+    state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
+  }
+  if (state.contentBefore) {
+    state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);
+  }
+  if (state.contentAfter) {
+    state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);
+  } else if (state.dismiss) {
+    state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);
+  }
+  useInputStyles_unstable(state);
+  return state;
+};
+//# sourceMappingURL=useSearchBoxStyles.styles.js.map

package/lib/components/SearchBox/useSearchBoxStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","useInputStyles_unstable","searchBoxClassNames","root","dismiss","contentAfter","contentBefore","input","useRootStyles","small","i8kkvl","B2u0y6b","uwmqm3","z189sj","medium","large","Boqhc8c","B8uat0v","d","useContentAfterStyles","rest","abs64n","Bqenvij","a9b677","useDismissClassName","useDismissStyles","disabled","sj55zd","kwki1k","useSearchBoxStyles_unstable","state","focused","size","rootStyles","contentAfterStyles","dismissClassName","dismissStyles","className"],"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\nexport const searchBoxClassNames = {\n    root: 'fui-SearchBox',\n    dismiss: 'fui-SearchBox__dismiss',\n    contentAfter: 'fui-SearchBox__contentAfter',\n    contentBefore: 'fui-SearchBox__contentBefore',\n    input: 'fui-SearchBox__input'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    small: {\n        columnGap: 0,\n        maxWidth: '468px',\n        paddingLeft: tokens.spacingHorizontalSNudge,\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    medium: {\n        columnGap: 0,\n        maxWidth: '468px',\n        paddingLeft: tokens.spacingHorizontalS,\n        paddingRight: tokens.spacingHorizontalS\n    },\n    large: {\n        columnGap: 0,\n        maxWidth: '468px',\n        paddingLeft: tokens.spacingHorizontalMNudge,\n        paddingRight: tokens.spacingHorizontalMNudge\n    },\n    input: {\n        paddingLeft: tokens.spacingHorizontalSNudge,\n        paddingRight: 0,\n        // removes the WebKit pseudoelement styling\n        '::-webkit-search-decoration': {\n            display: 'none'\n        },\n        '::-webkit-search-cancel-button': {\n            display: 'none'\n        }\n    }\n});\nconst useContentAfterStyles = makeStyles({\n    contentAfter: {\n        paddingLeft: tokens.spacingHorizontalM,\n        columnGap: tokens.spacingHorizontalXS\n    },\n    rest: {\n        opacity: 0,\n        height: 0,\n        width: 0\n    }\n});\nconst useDismissClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3,\n    display: 'flex',\n    // special case styling for icons (most common case) to ensure they're centered vertically\n    // size: medium (default)\n    '> svg': {\n        fontSize: '20px'\n    },\n    cursor: 'pointer'\n});\nconst useDismissStyles = makeStyles({\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled\n    },\n    // Ensure resizable icons show up with the proper font size\n    small: {\n        '> svg': {\n            fontSize: '16px'\n        }\n    },\n    medium: {\n    },\n    large: {\n        '> svg': {\n            fontSize: '24px'\n        }\n    }\n});\n/**\n * Apply styling to the SearchBox slots based on the state\n */ export const useSearchBoxStyles_unstable = (state)=>{\n    const { disabled, focused, size } = state;\n    const rootStyles = useRootStyles();\n    const contentAfterStyles = useContentAfterStyles();\n    const dismissClassName = useDismissClassName();\n    const dismissStyles = useDismissStyles();\n    state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], state.root.className);\n    state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, state.input.className);\n    if (state.dismiss) {\n        state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);\n    }\n    if (state.contentBefore) {\n        state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n    }\n    if (state.contentAfter) {\n        state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);\n    } else if (state.dismiss) {\n        state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);\n    }\n    useInputStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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"}

package/lib/index.js

@@ -0,0 +1 @@
+export { SearchBox, renderSearchBox_unstable, searchBoxClassNames, useSearchBoxStyles_unstable, useSearchBox_unstable } from './SearchBox';

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  SearchBox,\n  renderSearchBox_unstable,\n  searchBoxClassNames,\n  useSearchBoxStyles_unstable,\n  useSearchBox_unstable,\n} from './SearchBox';\nexport type { SearchBoxChangeEvent, SearchBoxProps, SearchBoxSlots, SearchBoxState } from './SearchBox';\n"],"names":["SearchBox","renderSearchBox_unstable","searchBoxClassNames","useSearchBoxStyles_unstable","useSearchBox_unstable"],"mappings":"AAAA,SACEA,SAAS,EACTC,wBAAwB,EACxBC,mBAAmB,EACnBC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc"}

package/lib-commonjs/SearchBox.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/SearchBox/index"), exports);

package/lib-commonjs/SearchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SearchBox.js"],"sourcesContent":["export * from './components/SearchBox/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

package/lib-commonjs/components/SearchBox/SearchBox.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SearchBox", {
+    enumerable: true,
+    get: function() {
+        return SearchBox;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useSearchBox = require("./useSearchBox");
+const _renderSearchBox = require("./renderSearchBox");
+const _useSearchBoxStylesstyles = require("./useSearchBoxStyles.styles");
+const SearchBox = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useSearchBox.useSearchBox_unstable)(props, ref);
+    (0, _useSearchBoxStylesstyles.useSearchBoxStyles_unstable)(state);
+    return (0, _renderSearchBox.renderSearchBox_unstable)(state);
+});
+SearchBox.displayName = 'SearchBox';

package/lib-commonjs/components/SearchBox/SearchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SearchBox.js"],"sourcesContent":["import * as React from 'react';\nimport { useSearchBox_unstable } from './useSearchBox';\nimport { renderSearchBox_unstable } from './renderSearchBox';\nimport { useSearchBoxStyles_unstable } from './useSearchBoxStyles.styles';\n/**\n * SearchBox component - TODO: add more docs\n */ export const SearchBox = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useSearchBox_unstable(props, ref);\n    useSearchBoxStyles_unstable(state);\n    return renderSearchBox_unstable(state);\n});\nSearchBox.displayName = 'SearchBox';\n"],"names":["SearchBox","React","forwardRef","props","ref","state","useSearchBox_unstable","useSearchBoxStyles_unstable","renderSearchBox_unstable","displayName"],"mappings":";;;;+BAMiBA;;;eAAAA;;;;iEANM;8BACe;iCACG;0CACG;AAGjC,MAAMA,YAAY,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAChE,MAAMC,QAAQC,IAAAA,mCAAqB,EAACH,OAAOC;IAC3CG,IAAAA,qDAA2B,EAACF;IAC5B,OAAOG,IAAAA,yCAAwB,EAACH;AACpC;AACAL,UAAUS,WAAW,GAAG"}

package/lib-commonjs/components/SearchBox/SearchBox.types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/components/SearchBox/SearchBox.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SearchBox.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;iEAAuB"}

package/lib-commonjs/components/SearchBox/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./SearchBox"), exports);
+_export_star._(require("./SearchBox.types"), exports);
+_export_star._(require("./renderSearchBox"), exports);
+_export_star._(require("./useSearchBox"), exports);
+_export_star._(require("./useSearchBoxStyles.styles"), exports);

package/lib-commonjs/components/SearchBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './SearchBox';\nexport * from './SearchBox.types';\nexport * from './renderSearchBox';\nexport * from './useSearchBox';\nexport * from './useSearchBoxStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/SearchBox/renderSearchBox.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderSearchBox_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderSearchBox_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderSearchBox_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            state.contentBefore && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.contentBefore, {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
+            state.contentAfter && /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.contentAfter, {
+                children: [
+                    state.contentAfter.children,
+                    state.dismiss && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.dismiss, {})
+                ]
+            })
+        ]
+    });
+};

package/lib-commonjs/components/SearchBox/renderSearchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderSearchBox.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of SearchBox\n */ export const renderSearchBox_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsxs(state.root, {\n        children: [\n            state.contentBefore && /*#__PURE__*/ _jsx(state.contentBefore, {}),\n            /*#__PURE__*/ _jsx(state.input, {}),\n            state.contentAfter && /*#__PURE__*/ _jsxs(state.contentAfter, {\n                children: [\n                    state.contentAfter.children,\n                    state.dismiss && /*#__PURE__*/ _jsx(state.dismiss, {})\n                ]\n            })\n        ]\n    });\n};\n"],"names":["renderSearchBox_unstable","state","assertSlots","_jsxs","root","children","contentBefore","_jsx","input","contentAfter","dismiss"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJ4B;gCACjB;AAGjB,MAAMA,2BAA2B,CAACC;IACzCC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,gBAAK,EAACF,MAAMG,IAAI,EAAE;QACnCC,UAAU;YACNJ,MAAMK,aAAa,IAAI,WAAW,GAAGC,IAAAA,eAAI,EAACN,MAAMK,aAAa,EAAE,CAAC;YAChE,WAAW,GAAGC,IAAAA,eAAI,EAACN,MAAMO,KAAK,EAAE,CAAC;YACjCP,MAAMQ,YAAY,IAAI,WAAW,GAAGN,IAAAA,gBAAK,EAACF,MAAMQ,YAAY,EAAE;gBAC1DJ,UAAU;oBACNJ,MAAMQ,YAAY,CAACJ,QAAQ;oBAC3BJ,MAAMS,OAAO,IAAI,WAAW,GAAGH,IAAAA,eAAI,EAACN,MAAMS,OAAO,EAAE,CAAC;iBACvD;YACL;SACH;IACL;AACJ"}

package/lib-commonjs/components/SearchBox/useSearchBox.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSearchBox_unstable", {
+    enumerable: true,
+    get: function() {
+        return useSearchBox_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactinput = require("@fluentui/react-input");
+const _reacticons = require("@fluentui/react-icons");
+const useSearchBox_unstable = (props, ref)=>{
+    const { size = 'medium', disabled = false, root, contentBefore, dismiss, contentAfter, ...inputProps } = props;
+    const searchBoxRootRef = _react.useRef(null);
+    const searchBoxRef = _react.useRef(null);
+    const [value, setValue] = (0, _reactutilities.useControllableState)({
+        state: props.value,
+        defaultState: props.defaultValue,
+        initialState: ''
+    });
+    // Tracks the focus of the component for the contentAfter and dismiss button
+    const [focused, setFocused] = _react.useState(false);
+    const onFocus = (0, _reactutilities.useEventCallback)(()=>{
+        setFocused(true);
+    });
+    const onBlur = (0, _reactutilities.useEventCallback)((ev)=>{
+        var _searchBoxRootRef_current;
+        setFocused(!!((_searchBoxRootRef_current = searchBoxRootRef.current) === null || _searchBoxRootRef_current === void 0 ? void 0 : _searchBoxRootRef_current.contains(ev.relatedTarget)));
+    });
+    const rootProps = _reactutilities.slot.resolveShorthand(root);
+    const handleDismissClick = (0, _reactutilities.useEventCallback)((event)=>{
+        var _props_onChange;
+        if ((0, _reactutilities.isResolvedShorthand)(dismiss)) {
+            var _dismiss_onClick;
+            (_dismiss_onClick = dismiss.onClick) === null || _dismiss_onClick === void 0 ? void 0 : _dismiss_onClick.call(dismiss, event);
+        }
+        const newValue = '';
+        setValue(newValue);
+        (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, event, {
+            value: newValue
+        });
+    });
+    const inputState = (0, _reactinput.useInput_unstable)({
+        type: 'search',
+        disabled,
+        size,
+        value,
+        root: _reactutilities.slot.always({
+            ...rootProps,
+            ref: (0, _reactutilities.useMergedRefs)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
+            onFocus: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus)),
+            onBlur: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur))
+        }, {
+            elementType: 'span'
+        }),
+        contentBefore: _reactutilities.slot.optional(contentBefore, {
+            renderByDefault: true,
+            defaultProps: {
+                children: /*#__PURE__*/ _react.createElement(_reacticons.SearchRegular, null)
+            },
+            elementType: 'span'
+        }),
+        contentAfter: _reactutilities.slot.optional(contentAfter, {
+            renderByDefault: true,
+            elementType: 'span'
+        }),
+        ...inputProps,
+        onChange: (0, _reactutilities.useEventCallback)((ev)=>{
+            var _props_onChange;
+            const newValue = ev.target.value;
+            (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, ev, {
+                value: newValue
+            });
+            setValue(newValue);
+        })
+    }, (0, _reactutilities.useMergedRefs)(searchBoxRef, ref));
+    const state = {
+        ...inputState,
+        components: {
+            ...inputState.components,
+            dismiss: 'span'
+        },
+        dismiss: _reactutilities.slot.optional(dismiss, {
+            defaultProps: {
+                children: /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null),
+                role: 'button',
+                'aria-label': 'clear',
+                tabIndex: -1
+            },
+            renderByDefault: true,
+            elementType: 'span'
+        }),
+        disabled,
+        focused,
+        size
+    };
+    if (state.dismiss) {
+        state.dismiss.onClick = handleDismissClick;
+    }
+    return state;
+};

package/lib-commonjs/components/SearchBox/useSearchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useSearchBox.js"],"sourcesContent":["import * as React from 'react';\nimport { isResolvedShorthand, mergeCallbacks, slot, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useInput_unstable } from '@fluentui/react-input';\nimport { DismissRegular, SearchRegular } from '@fluentui/react-icons';\n/**\n * Create the state required to render SearchBox.\n *\n * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,\n * before being passed to renderSearchBox_unstable.\n *\n * @param props - props from this instance of SearchBox\n * @param ref - reference to root HTMLElement of SearchBox\n */ export const useSearchBox_unstable = (props, ref)=>{\n    const { size = 'medium', disabled = false, root, contentBefore, dismiss, contentAfter, ...inputProps } = props;\n    const searchBoxRootRef = React.useRef(null);\n    const searchBoxRef = React.useRef(null);\n    const [value, setValue] = useControllableState({\n        state: props.value,\n        defaultState: props.defaultValue,\n        initialState: ''\n    });\n    // Tracks the focus of the component for the contentAfter and dismiss button\n    const [focused, setFocused] = React.useState(false);\n    const onFocus = useEventCallback(()=>{\n        setFocused(true);\n    });\n    const onBlur = useEventCallback((ev)=>{\n        var _searchBoxRootRef_current;\n        setFocused(!!((_searchBoxRootRef_current = searchBoxRootRef.current) === null || _searchBoxRootRef_current === void 0 ? void 0 : _searchBoxRootRef_current.contains(ev.relatedTarget)));\n    });\n    const rootProps = slot.resolveShorthand(root);\n    const handleDismissClick = useEventCallback((event)=>{\n        var _props_onChange;\n        if (isResolvedShorthand(dismiss)) {\n            var _dismiss_onClick;\n            (_dismiss_onClick = dismiss.onClick) === null || _dismiss_onClick === void 0 ? void 0 : _dismiss_onClick.call(dismiss, event);\n        }\n        const newValue = '';\n        setValue(newValue);\n        (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, event, {\n            value: newValue\n        });\n    });\n    const inputState = useInput_unstable({\n        type: 'search',\n        disabled,\n        size,\n        value,\n        root: slot.always({\n            ...rootProps,\n            ref: useMergedRefs(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),\n            onFocus: useEventCallback(mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus)),\n            onBlur: useEventCallback(mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur))\n        }, {\n            elementType: 'span'\n        }),\n        contentBefore: slot.optional(contentBefore, {\n            renderByDefault: true,\n            defaultProps: {\n                children: /*#__PURE__*/ React.createElement(SearchRegular, null)\n            },\n            elementType: 'span'\n        }),\n        contentAfter: slot.optional(contentAfter, {\n            renderByDefault: true,\n            elementType: 'span'\n        }),\n        ...inputProps,\n        onChange: useEventCallback((ev)=>{\n            var _props_onChange;\n            const newValue = ev.target.value;\n            (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, ev, {\n                value: newValue\n            });\n            setValue(newValue);\n        })\n    }, useMergedRefs(searchBoxRef, ref));\n    const state = {\n        ...inputState,\n        components: {\n            ...inputState.components,\n            dismiss: 'span'\n        },\n        dismiss: slot.optional(dismiss, {\n            defaultProps: {\n                children: /*#__PURE__*/ React.createElement(DismissRegular, null),\n                role: 'button',\n                'aria-label': 'clear',\n                tabIndex: -1\n            },\n            renderByDefault: true,\n            elementType: 'span'\n        }),\n        disabled,\n        focused,\n        size\n    };\n    if (state.dismiss) {\n        state.dismiss.onClick = handleDismissClick;\n    }\n    return state;\n};\n"],"names":["useSearchBox_unstable","props","ref","size","disabled","root","contentBefore","dismiss","contentAfter","inputProps","searchBoxRootRef","React","useRef","searchBoxRef","value","setValue","useControllableState","state","defaultState","defaultValue","initialState","focused","setFocused","useState","onFocus","useEventCallback","onBlur","ev","_searchBoxRootRef_current","current","contains","relatedTarget","rootProps","slot","resolveShorthand","handleDismissClick","event","_props_onChange","isResolvedShorthand","_dismiss_onClick","onClick","call","newValue","onChange","inputState","useInput_unstable","type","always","useMergedRefs","mergeCallbacks","elementType","optional","renderByDefault","defaultProps","children","createElement","SearchRegular","target","components","DismissRegular","role","tabIndex"],"mappings":"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"}