@fluentui/react-search 9.2.7 → 9.3.1

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-search
 
-This log was last generated on Fri, 11 Jul 2025 15:56:58 GMT and should not be manually modified.
+This log was last generated on Mon, 28 Jul 2025 18:44:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.3.1)
+
+Mon, 28 Jul 2025 18:44:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.3.0..@fluentui/react-search_v9.3.1)
+
+### Patches
+
+- Bump @fluentui/react-input to v9.7.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.3.0)
+
+Thu, 17 Jul 2025 13:49:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.2.7..@fluentui/react-search_v9.3.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-input to v9.7.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
 ## [9.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.2.7)
 
-Fri, 11 Jul 2025 15:56:58 GMT 
+Fri, 11 Jul 2025 15:59:24 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.2.6..@fluentui/react-search_v9.2.7)
 
 ### Patches

package/lib/SearchBox.js.map

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBox/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';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('useSearchBoxStyles_unstable')(state);\n\n  return renderSearchBox_unstable(state);\n});\n\nSearchBox.displayName = 'SearchBox';\n"],"names":["React","useSearchBox_unstable","renderSearchBox_unstable","useSearchBoxStyles_unstable","useCustomStyleHook_unstable","SearchBox","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,8BAA8B;AAG1E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,sBAAsBM,OAAOC;IAE3CL,4BAA4BM;IAE5BL,4BAA4B,+BAA+BK;IAE3D,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/SearchBox/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';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('useSearchBoxStyles_unstable')(state);\n\n  return renderSearchBox_unstable(state);\n});\n\nSearchBox.displayName = 'SearchBox';\n"],"names":["React","useSearchBox_unstable","renderSearchBox_unstable","useSearchBoxStyles_unstable","useCustomStyleHook_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;AAG1E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,sBAAsBM,OAAOC;IAE3CL,4BAA4BM;IAE5BL,4BAA4B,+BAA+BK;IAE3D,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBox/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"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/SearchBox/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.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBox/index.ts"],"sourcesContent":["export { SearchBox } from './SearchBox';\nexport type { SearchBoxChangeEvent, SearchBoxProps, SearchBoxSlots, SearchBoxState } from './SearchBox.types';\nexport { renderSearchBox_unstable } from './renderSearchBox';\nexport { useSearchBox_unstable } from './useSearchBox';\nexport { searchBoxClassNames, useSearchBoxStyles_unstable } from './useSearchBoxStyles.styles';\n"],"names":["SearchBox","renderSearchBox_unstable","useSearchBox_unstable","searchBoxClassNames","useSearchBoxStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AAExC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,8BAA8B"}
+{"version":3,"sources":["../src/components/SearchBox/index.ts"],"sourcesContent":["export { SearchBox } from './SearchBox';\nexport type { SearchBoxChangeEvent, SearchBoxProps, SearchBoxSlots, SearchBoxState } from './SearchBox.types';\nexport { renderSearchBox_unstable } from './renderSearchBox';\nexport { useSearchBox_unstable } from './useSearchBox';\nexport { searchBoxClassNames, useSearchBoxStyles_unstable } from './useSearchBoxStyles.styles';\n"],"names":["SearchBox","renderSearchBox_unstable","useSearchBox_unstable","searchBoxClassNames","useSearchBoxStyles_unstable"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AAExC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,8BAA8B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBox/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"],"rangeMappings":";;;;;;;;;;;;;;;;;;","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"}
+{"version":3,"sources":["../src/components/SearchBox/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.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBox/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 {\n    size = 'medium',\n    disabled = false,\n    root,\n    contentBefore,\n    dismiss,\n    contentAfter,\n    value,\n    defaultValue,\n    ...inputProps\n  } = props;\n\n  const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n  const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    state: value,\n    defaultState: 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 = React.useCallback(() => {\n    setFocused(true);\n  }, [setFocused]);\n\n  const onBlur: React.FocusEventHandler<HTMLSpanElement> = React.useCallback(\n    ev => {\n      setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n    },\n    [setFocused],\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    setInternalValue(newValue);\n    props.onChange?.(event, { value: newValue });\n\n    searchBoxRef.current?.focus();\n  });\n\n  const inputState = useInput_unstable(\n    {\n      type: 'search',\n      disabled,\n      size,\n      value: internalValue,\n      root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n        {\n          ...rootProps,\n          ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n          onFocus: mergeCallbacks(rootProps?.onFocus, onFocus),\n          onBlur: 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        setInternalValue(newValue);\n      }),\n    },\n    useMergedRefs(searchBoxRef, ref),\n  );\n\n  const state: SearchBoxState = {\n    ...inputState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\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","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","state","defaultState","initialState","focused","setFocused","useState","onFocus","useCallback","onBlur","ev","current","contains","relatedTarget","rootProps","resolveShorthand","handleDismissClick","event","onClick","newValue","onChange","focus","inputState","type","always","elementType","optional","renderByDefault","defaultProps","children","target","components","role","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/SearchBox/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 {\n    size = 'medium',\n    disabled = false,\n    root,\n    contentBefore,\n    dismiss,\n    contentAfter,\n    value,\n    defaultValue,\n    ...inputProps\n  } = props;\n\n  const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n  const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    state: value,\n    defaultState: 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 = React.useCallback(() => {\n    setFocused(true);\n  }, [setFocused]);\n\n  const onBlur: React.FocusEventHandler<HTMLSpanElement> = React.useCallback(\n    ev => {\n      setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n    },\n    [setFocused],\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    setInternalValue(newValue);\n    props.onChange?.(event, { value: newValue });\n\n    searchBoxRef.current?.focus();\n  });\n\n  const inputState = useInput_unstable(\n    {\n      type: 'search',\n      disabled,\n      size,\n      value: internalValue,\n      root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n        {\n          ...rootProps,\n          ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n          onFocus: mergeCallbacks(rootProps?.onFocus, onFocus),\n          onBlur: 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        setInternalValue(newValue);\n      }),\n    },\n    useMergedRefs(searchBoxRef, ref),\n  );\n\n  const state: SearchBoxState = {\n    ...inputState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\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","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","state","defaultState","initialState","focused","setFocused","useState","onFocus","useCallback","onBlur","ev","current","contains","relatedTarget","rootProps","resolveShorthand","handleDismissClick","event","onClick","newValue","onChange","focus","inputState","type","always","elementType","optional","renderByDefault","defaultProps","children","target","components","role","tabIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,mBAAmB,EACnBC,cAAc,EACdC,IAAI,EACJC,oBAAoB,EACpBC,gBAAgB,EAChBC,aAAa,QACR,4BAA4B;AACnC,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,cAAc,EAAEC,aAAa,QAAQ,wBAAwB;AAItE;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EACJC,OAAO,QAAQ,EACfC,WAAW,KAAK,EAChBC,IAAI,EACJC,aAAa,EACbC,OAAO,EACPC,YAAY,EACZC,KAAK,EACLC,YAAY,EACZ,GAAGC,YACJ,GAAGV;IAEJ,MAAMW,mBAAmBtB,MAAMuB,MAAM,CAAiB;IACtD,MAAMC,eAAexB,MAAMuB,MAAM,CAAmB;IAEpD,MAAM,CAACE,eAAeC,iBAAiB,GAAGtB,qBAAqB;QAC7DuB,OAAOR;QACPS,cAAcR;QACdS,cAAc;IAChB;IAEA,4EAA4E;IAC5E,MAAM,CAACC,SAASC,WAAW,GAAG/B,MAAMgC,QAAQ,CAAC;IAE7C,MAAMC,UAAUjC,MAAMkC,WAAW,CAAC;QAChCH,WAAW;IACb,GAAG;QAACA;KAAW;IAEf,MAAMI,SAAmDnC,MAAMkC,WAAW,CACxEE,CAAAA;YACed;QAAbS,WAAW,CAAC,GAACT,4BAAAA,iBAAiBe,OAAO,cAAxBf,gDAAAA,0BAA0BgB,QAAQ,CAACF,GAAGG,aAAa;IAClE,GACA;QAACR;KAAW;IAGd,MAAMS,YAAYrC,KAAKsC,gBAAgB,CAAC1B;IAExC,MAAM2B,qBAAqBrC,iBAAiB,CAACsC;YAM3ChC,iBAEAa;QAPA,IAAIvB,oBAAoBgB,UAAU;gBAChCA;aAAAA,mBAAAA,QAAQ2B,OAAO,cAAf3B,uCAAAA,sBAAAA,SAAkB0B;QACpB;QACA,MAAME,WAAW;QACjBnB,iBAAiBmB;SACjBlC,kBAAAA,MAAMmC,QAAQ,cAAdnC,sCAAAA,qBAAAA,OAAiBgC,OAAO;YAAExB,OAAO0B;QAAS;SAE1CrB,wBAAAA,aAAaa,OAAO,cAApBb,4CAAAA,sBAAsBuB,KAAK;IAC7B;IAEA,MAAMC,aAAazC,kBACjB;QACE0C,MAAM;QACNnC;QACAD;QACAM,OAAOM;QACPV,MAAMZ,KAAK+C,MAAM,CACf;YACE,GAAGV,SAAS;YACZ5B,KAAKN,cAAckC,sBAAAA,gCAAAA,UAAW5B,GAAG,EAAEU;YACnCW,SAAS/B,eAAesC,sBAAAA,gCAAAA,UAAWP,OAAO,EAAEA;YAC5CE,QAAQjC,eAAesC,sBAAAA,gCAAAA,UAAWL,MAAM,EAAEA;QAC5C,GACA;YACEgB,aAAa;QACf;QAEFnC,eAAeb,KAAKiD,QAAQ,CAACpC,eAAe;YAC1CqC,iBAAiB;YACjBC,cAAc;gBACZC,wBAAU,oBAAC9C;YACb;YACA0C,aAAa;QACf;QACAjC,cAAcf,KAAKiD,QAAQ,CAAClC,cAAc;YACxCmC,iBAAiB;YACjBF,aAAa;QACf;QACA,GAAG9B,UAAU;QACbyB,UAAUzC,iBAAiB+B,CAAAA;gBAEzBzB;YADA,MAAMkC,WAAWT,GAAGoB,MAAM,CAACrC,KAAK;aAChCR,kBAAAA,MAAMmC,QAAQ,cAAdnC,sCAAAA,qBAAAA,OAAiByB,IAAI;gBAAEjB,OAAO0B;YAAS;YACvCnB,iBAAiBmB;QACnB;IACF,GACAvC,cAAckB,cAAcZ;IAG9B,MAAMe,QAAwB;QAC5B,GAAGqB,UAAU;QACbS,YAAY;YACV,4DAA4D;YAC5D,GAAGT,WAAWS,UAAU;YACxBxC,SAAS;QACX;QACAA,SAASd,KAAKiD,QAAQ,CAACnC,SAAS;YAC9BqC,cAAc;gBACZC,wBAAU,oBAAC/C;gBACXkD,MAAM;gBACN,cAAc;gBACdC,UAAU,CAAC;YACb;YACAN,iBAAiB;YACjBF,aAAa;QACf;QACArC;QACAgB;QACAjB;IACF;IAEA,IAAIc,MAAMV,OAAO,EAAE;QACjBU,MAAMV,OAAO,CAAC2B,OAAO,GAAGF;IAC1B;IAEA,OAAOf;AACT,EAAE"}

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

@@ -0,0 +1,124 @@
+import { makeResetStyles, makeStyles, 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 = makeStyles({
+    small: {
+        columnGap: 0,
+        maxWidth: '468px',
+        paddingLeft: tokens.spacingHorizontalSNudge,
+        paddingRight: tokens.spacingHorizontalSNudge
+    },
+    medium: {
+        columnGap: 0,
+        maxWidth: '468px',
+        paddingLeft: tokens.spacingHorizontalS,
+        paddingRight: tokens.spacingHorizontalS
+    },
+    large: {
+        columnGap: 0,
+        maxWidth: '468px',
+        paddingLeft: tokens.spacingHorizontalMNudge,
+        paddingRight: tokens.spacingHorizontalMNudge
+    },
+    input: {
+        paddingLeft: tokens.spacingHorizontalSNudge,
+        paddingRight: 0,
+        // removes the WebKit pseudoelement styling
+        '::-webkit-search-decoration': {
+            display: 'none'
+        },
+        '::-webkit-search-cancel-button': {
+            display: 'none'
+        }
+    },
+    unfocusedNoContentAfter: {
+        paddingRight: 0
+    }
+});
+const useInputStyles = makeStyles({
+    small: {
+        paddingRight: tokens.spacingHorizontalSNudge
+    },
+    medium: {
+        paddingRight: tokens.spacingHorizontalS
+    },
+    large: {
+        paddingRight: tokens.spacingHorizontalMNudge
+    }
+});
+const useContentAfterStyles = makeStyles({
+    contentAfter: {
+        paddingLeft: tokens.spacingHorizontalM,
+        columnGap: tokens.spacingHorizontalXS
+    },
+    rest: {
+        height: 0,
+        width: 0,
+        paddingLeft: 0,
+        overflow: 'hidden'
+    }
+});
+const useDismissClassName = makeResetStyles({
+    boxSizing: 'border-box',
+    color: tokens.colorNeutralForeground3,
+    display: 'flex',
+    // special case styling for icons (most common case) to ensure they're centered vertically
+    // size: medium (default)
+    '> svg': {
+        fontSize: '20px'
+    },
+    cursor: 'pointer'
+});
+const useDismissStyles = makeStyles({
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled
+    },
+    // Ensure resizable icons show up with the proper font size
+    small: {
+        '> svg': {
+            fontSize: '16px'
+        }
+    },
+    medium: {
+    },
+    large: {
+        '> svg': {
+            fontSize: '24px'
+        }
+    }
+});
+/**
+ * Apply styling to the SearchBox slots based on the state
+ */ export const useSearchBoxStyles_unstable = (state)=>{
+    'use no memo';
+    const { disabled, focused, size } = state;
+    const rootStyles = useRootStyles();
+    const inputStyles = useInputStyles();
+    const contentAfterStyles = useContentAfterStyles();
+    const dismissClassName = useDismissClassName();
+    const dismissStyles = useDismissStyles();
+    state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
+    state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], 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;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SearchBox/useSearchBoxStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SearchBoxSlots, SearchBoxState } from './SearchBox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const searchBoxClassNames: SlotClassNames<SearchBoxSlots> = {\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/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  small: {\n    columnGap: 0,\n    maxWidth: '468px',\n\n    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    columnGap: 0,\n    maxWidth: '468px',\n\n    paddingLeft: tokens.spacingHorizontalS,\n    paddingRight: tokens.spacingHorizontalS,\n  },\n  large: {\n    columnGap: 0,\n    maxWidth: '468px',\n\n    paddingLeft: tokens.spacingHorizontalMNudge,\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n\n  input: {\n    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: 0,\n\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\n  unfocusedNoContentAfter: {\n    paddingRight: 0,\n  },\n});\n\nconst useInputStyles = makeStyles({\n  small: {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    paddingRight: tokens.spacingHorizontalS,\n  },\n  large: {\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n});\n\nconst useContentAfterStyles = makeStyles({\n  contentAfter: {\n    paddingLeft: tokens.spacingHorizontalM,\n    columnGap: tokens.spacingHorizontalXS,\n  },\n  rest: {\n    height: 0,\n    width: 0,\n    paddingLeft: 0,\n    overflow: 'hidden',\n  },\n});\n\nconst useDismissClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n  display: 'flex',\n  // special case styling for icons (most common case) to ensure they're centered vertically\n  // size: medium (default)\n  '> svg': { fontSize: '20px' },\n  cursor: 'pointer',\n});\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': { fontSize: '16px' },\n  },\n  medium: {\n    // included in useDismissClassName\n  },\n  large: {\n    '> svg': { fontSize: '24px' },\n  },\n});\n\n/**\n * Apply styling to the SearchBox slots based on the state\n */\nexport const useSearchBoxStyles_unstable = (state: SearchBoxState): SearchBoxState => {\n  'use no memo';\n\n  const { disabled, focused, size } = state;\n\n  const rootStyles = useRootStyles();\n  const inputStyles = useInputStyles();\n  const contentAfterStyles = useContentAfterStyles();\n  const dismissClassName = useDismissClassName();\n  const dismissStyles = useDismissStyles();\n\n  state.root.className = mergeClasses(\n    searchBoxClassNames.root,\n    rootStyles[size],\n    !focused && rootStyles.unfocusedNoContentAfter,\n    state.root.className,\n  );\n  state.input.className = mergeClasses(\n    searchBoxClassNames.input,\n    rootStyles.input,\n    !focused && inputStyles[size],\n    state.input.className,\n  );\n\n  if (state.dismiss) {\n    state.dismiss.className = mergeClasses(\n      searchBoxClassNames.dismiss,\n      dismissClassName,\n      disabled && dismissStyles.disabled,\n      dismissStyles[size],\n\n      state.dismiss.className,\n    );\n  }\n\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n  }\n\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(\n      searchBoxClassNames.contentAfter,\n      contentAfterStyles.contentAfter,\n\n      !focused && contentAfterStyles.rest,\n\n      state.contentAfter.className,\n    );\n  } else if (state.dismiss) {\n    state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);\n  }\n\n  useInputStyles_unstable(state);\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","useInputStyles_unstable","searchBoxClassNames","root","dismiss","contentAfter","contentBefore","input","useRootStyles","small","columnGap","maxWidth","paddingLeft","spacingHorizontalSNudge","paddingRight","medium","spacingHorizontalS","large","spacingHorizontalMNudge","display","unfocusedNoContentAfter","useInputStyles","useContentAfterStyles","spacingHorizontalM","spacingHorizontalXS","rest","height","width","overflow","useDismissClassName","boxSizing","color","colorNeutralForeground3","fontSize","cursor","useDismissStyles","disabled","colorNeutralForegroundDisabled","useSearchBoxStyles_unstable","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className"],"mappings":"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"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/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"],"rangeMappings":"","mappings":"AAAA,SACEA,SAAS,EACTC,wBAAwB,EACxBC,mBAAmB,EACnBC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc"}
+{"version":3,"sources":["../src/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.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/SearchBox.ts"],"sourcesContent":["export type {\n  SearchBoxChangeEvent,\n  SearchBoxProps,\n  SearchBoxSlots,\n  SearchBoxState,\n} from './components/SearchBox/index';\nexport {\n  SearchBox,\n  renderSearchBox_unstable,\n  searchBoxClassNames,\n  useSearchBoxStyles_unstable,\n  useSearchBox_unstable,\n} from './components/SearchBox/index';\n"],"names":["SearchBox","renderSearchBox_unstable","searchBoxClassNames","useSearchBoxStyles_unstable","useSearchBox_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOEA,SAAS;eAATA,gBAAS;;IACTC,wBAAwB;eAAxBA,+BAAwB;;IACxBC,mBAAmB;eAAnBA,0BAAmB;;IACnBC,2BAA2B;eAA3BA,kCAA2B;;IAC3BC,qBAAqB;eAArBA,4BAAqB;;;uBAChB"}
+{"version":3,"sources":["../src/SearchBox.ts"],"sourcesContent":["export type {\n  SearchBoxChangeEvent,\n  SearchBoxProps,\n  SearchBoxSlots,\n  SearchBoxState,\n} from './components/SearchBox/index';\nexport {\n  SearchBox,\n  renderSearchBox_unstable,\n  searchBoxClassNames,\n  useSearchBoxStyles_unstable,\n  useSearchBox_unstable,\n} from './components/SearchBox/index';\n"],"names":["SearchBox","renderSearchBox_unstable","searchBoxClassNames","useSearchBoxStyles_unstable","useSearchBox_unstable"],"mappings":";;;;;;;;;;;;eAOEA,gBAAS;;;eACTC,+BAAwB;;;eACxBC,0BAAmB;;;eACnBC,kCAA2B;;;eAC3BC,4BAAqB;;;uBAChB,+BAA+B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBox/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';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('useSearchBoxStyles_unstable')(state);\n\n  return renderSearchBox_unstable(state);\n});\n\nSearchBox.displayName = 'SearchBox';\n"],"names":["SearchBox","React","forwardRef","props","ref","state","useSearchBox_unstable","useSearchBoxStyles_unstable","useCustomStyleHook_unstable","renderSearchBox_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;8BACe;iCACG;0CACG;qCAGA;AAKrC,MAAMA,YAAAA,WAAAA,GAAiDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQC,IAAAA,mCAAAA,EAAsBH,OAAOC;IAE3CG,IAAAA,qDAAAA,EAA4BF;IAE5BG,IAAAA,gDAAAA,EAA4B,+BAA+BH;IAE3D,OAAOI,IAAAA,yCAAAA,EAAyBJ;AAClC;AAEAL,UAAUU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/SearchBox/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';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('useSearchBoxStyles_unstable')(state);\n\n  return renderSearchBox_unstable(state);\n});\n\nSearchBox.displayName = 'SearchBox';\n"],"names":["React","useSearchBox_unstable","renderSearchBox_unstable","useSearchBoxStyles_unstable","useCustomStyleHook_unstable","SearchBox","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;8BACO,iBAAiB;iCACd,oBAAoB;0CACjB,8BAA8B;qCAG9B,kCAAkC;AAKvE,kBAAMA,WAAAA,GAAiDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,uCAAAA,EAAsBM,OAAOC;QAE3CL,qDAAAA,EAA4BM;QAE5BL,gDAAAA,EAA4B,+BAA+BK;IAE3D,WAAOP,yCAAAA,EAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBox/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":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
+{"version":3,"sources":["../src/components/SearchBox/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":";;;;;iEAAuB,QAAQ"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBox/index.ts"],"sourcesContent":["export { SearchBox } from './SearchBox';\nexport type { SearchBoxChangeEvent, SearchBoxProps, SearchBoxSlots, SearchBoxState } from './SearchBox.types';\nexport { renderSearchBox_unstable } from './renderSearchBox';\nexport { useSearchBox_unstable } from './useSearchBox';\nexport { searchBoxClassNames, useSearchBoxStyles_unstable } from './useSearchBoxStyles.styles';\n"],"names":["SearchBox","renderSearchBox_unstable","searchBoxClassNames","useSearchBoxStyles_unstable","useSearchBox_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,SAAS;eAATA,oBAAS;;IAETC,wBAAwB;eAAxBA,yCAAwB;;IAExBC,mBAAmB;eAAnBA,6CAAmB;;IAAEC,2BAA2B;eAA3BA,qDAA2B;;IADhDC,qBAAqB;eAArBA,mCAAqB;;;2BAHJ;iCAEe;8BACH;0CAC2B"}
+{"version":3,"sources":["../src/components/SearchBox/index.ts"],"sourcesContent":["export { SearchBox } from './SearchBox';\nexport type { SearchBoxChangeEvent, SearchBoxProps, SearchBoxSlots, SearchBoxState } from './SearchBox.types';\nexport { renderSearchBox_unstable } from './renderSearchBox';\nexport { useSearchBox_unstable } from './useSearchBox';\nexport { searchBoxClassNames, useSearchBoxStyles_unstable } from './useSearchBoxStyles.styles';\n"],"names":["SearchBox","renderSearchBox_unstable","useSearchBox_unstable","searchBoxClassNames","useSearchBoxStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,oBAAS;;;eAETC,yCAAwB;;;eAExBE,6CAAmB;;;eAAEC,qDAA2B;;;eADhDF,mCAAqB;;;2BAHJ,cAAc;iCAEC,oBAAoB;8BACvB,iBAAiB;0CACU,8BAA8B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBox/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":["renderSearchBox_unstable","state","assertSlots","_jsxs","root","contentBefore","_jsx","input","contentAfter","children","dismiss"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,2BAA2B,CAACC;IACvCC,IAAAA,2BAAAA,EAA4BD;IAE5B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,aAAa,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,aAAa,EAAA,CAAA;0BAC5CC,IAAAA,eAAA,EAACL,MAAMM,KAAK,EAAA,CAAA;YACXN,MAAMO,YAAY,IAAA,WAAA,GACjBL,IAAAA,gBAAA,EAACF,MAAMO,YAAY,EAAA;;oBAChBP,MAAMO,YAAY,CAACC,QAAQ;oBAC3BR,MAAMS,OAAO,IAAA,WAAA,GAAIJ,IAAAA,eAAA,EAACL,MAAMS,OAAO,EAAA,CAAA;;;;;AAK1C"}
+{"version":3,"sources":["../src/components/SearchBox/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":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,iCAAiC,CAACC;QACvCF,2BAAAA,EAA4BE;IAE5B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,aAAa,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,aAAa,EAAA,CAAA;8BAC5C,eAAA,EAACF,MAAMG,KAAK,EAAA,CAAA;YACXH,MAAMI,YAAY,IAAA,WAAA,OACjB,gBAAA,EAACJ,MAAMI,YAAY,EAAA;;oBAChBJ,MAAMI,YAAY,CAACC,QAAQ;oBAC3BL,MAAMM,OAAO,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,OAAO,EAAA,CAAA;;;;;AAK1C,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBox/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 {\n    size = 'medium',\n    disabled = false,\n    root,\n    contentBefore,\n    dismiss,\n    contentAfter,\n    value,\n    defaultValue,\n    ...inputProps\n  } = props;\n\n  const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n  const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    state: value,\n    defaultState: 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 = React.useCallback(() => {\n    setFocused(true);\n  }, [setFocused]);\n\n  const onBlur: React.FocusEventHandler<HTMLSpanElement> = React.useCallback(\n    ev => {\n      setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n    },\n    [setFocused],\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    setInternalValue(newValue);\n    props.onChange?.(event, { value: newValue });\n\n    searchBoxRef.current?.focus();\n  });\n\n  const inputState = useInput_unstable(\n    {\n      type: 'search',\n      disabled,\n      size,\n      value: internalValue,\n      root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n        {\n          ...rootProps,\n          ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n          onFocus: mergeCallbacks(rootProps?.onFocus, onFocus),\n          onBlur: 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        setInternalValue(newValue);\n      }),\n    },\n    useMergedRefs(searchBoxRef, ref),\n  );\n\n  const state: SearchBoxState = {\n    ...inputState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\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":["useSearchBox_unstable","props","ref","size","disabled","root","contentBefore","dismiss","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","React","useRef","searchBoxRef","internalValue","setInternalValue","useControllableState","state","defaultState","initialState","focused","setFocused","useState","onFocus","useCallback","onBlur","ev","current","contains","relatedTarget","rootProps","slot","resolveShorthand","handleDismissClick","useEventCallback","event","isResolvedShorthand","onClick","newValue","onChange","focus","inputState","useInput_unstable","type","always","useMergedRefs","mergeCallbacks","elementType","optional","renderByDefault","defaultProps","children","createElement","SearchRegular","target","components","DismissRegular","role","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/SearchBox/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 {\n    size = 'medium',\n    disabled = false,\n    root,\n    contentBefore,\n    dismiss,\n    contentAfter,\n    value,\n    defaultValue,\n    ...inputProps\n  } = props;\n\n  const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n  const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    state: value,\n    defaultState: 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 = React.useCallback(() => {\n    setFocused(true);\n  }, [setFocused]);\n\n  const onBlur: React.FocusEventHandler<HTMLSpanElement> = React.useCallback(\n    ev => {\n      setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n    },\n    [setFocused],\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    setInternalValue(newValue);\n    props.onChange?.(event, { value: newValue });\n\n    searchBoxRef.current?.focus();\n  });\n\n  const inputState = useInput_unstable(\n    {\n      type: 'search',\n      disabled,\n      size,\n      value: internalValue,\n      root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n        {\n          ...rootProps,\n          ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n          onFocus: mergeCallbacks(rootProps?.onFocus, onFocus),\n          onBlur: 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        setInternalValue(newValue);\n      }),\n    },\n    useMergedRefs(searchBoxRef, ref),\n  );\n\n  const state: SearchBoxState = {\n    ...inputState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\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","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","state","defaultState","initialState","focused","setFocused","useState","onFocus","useCallback","onBlur","ev","current","contains","relatedTarget","rootProps","resolveShorthand","handleDismissClick","event","onClick","newValue","onChange","focus","inputState","type","always","elementType","optional","renderByDefault","defaultProps","children","target","components","role","tabIndex"],"mappings":";;;;+BAuBaU;;;;;;;iEAvBU,QAAQ;gCAQxB,4BAA4B;4BACD,wBAAwB;4BACZ,wBAAwB;AAa/D,8BAA8B,CAACC,OAAuBC;IAC3D,MAAM,EACJC,OAAO,QAAQ,EACfC,WAAW,KAAK,EAChBC,IAAI,EACJC,aAAa,EACbC,OAAO,EACPC,YAAY,EACZC,KAAK,EACLC,YAAY,EACZ,GAAGC,YACJ,GAAGV;IAEJ,MAAMW,mBAAmBtB,OAAMuB,MAAM,CAAiB;IACtD,MAAMC,eAAexB,OAAMuB,MAAM,CAAmB;IAEpD,MAAM,CAACE,eAAeC,iBAAiB,OAAGtB,oCAAAA,EAAqB;QAC7DuB,OAAOR;QACPS,cAAcR;QACdS,cAAc;IAChB;IAEA,4EAA4E;IAC5E,MAAM,CAACC,SAASC,WAAW,GAAG/B,OAAMgC,QAAQ,CAAC;IAE7C,MAAMC,UAAUjC,OAAMkC,WAAW,CAAC;QAChCH,WAAW;IACb,GAAG;QAACA;KAAW;IAEf,MAAMI,SAAmDnC,OAAMkC,WAAW,CACxEE,CAAAA;YACed;QAAbS,WAAW,CAAC,CAAA,CAACT,AAAD,6BAACA,iBAAiBe,OAAAA,AAAO,MAAA,QAAxBf,8BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,0BAA0BgB,QAAQ,CAACF,GAAGG,cAAa;IAClE,GACA;QAACR;KAAW;IAGd,MAAMS,YAAYrC,oBAAAA,CAAKsC,gBAAgB,CAAC1B;IAExC,MAAM2B,qBAAqBrC,oCAAAA,EAAiB,CAACsC;YAM3ChC,iBAEAa;QAPA,QAAIvB,mCAAAA,EAAoBgB,UAAU;gBAChCA;aAAAA,mBAAAA,QAAQ2B,OAAAA,AAAO,MAAA,QAAf3B,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAAA,IAAAA,CAAAA,SAAkB0B;QACpB;QACA,MAAME,WAAW;QACjBnB,iBAAiBmB;SACjBlC,kBAAAA,MAAMmC,QAAAA,AAAQ,MAAA,QAAdnC,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAAA,IAAAA,CAAAA,OAAiBgC,OAAO;YAAExB,OAAO0B;QAAS;SAE1CrB,wBAAAA,aAAaa,OAAAA,AAAO,MAAA,QAApBb,0BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAAsBuB,KAAK;IAC7B;IAEA,MAAMC,iBAAazC,6BAAAA,EACjB;QACE0C,MAAM;QACNnC;QACAD;QACAM,OAAOM;QACPV,MAAMZ,oBAAAA,CAAK+C,MAAM,CACf;YACE,GAAGV,SAAS;YACZ5B,SAAKN,6BAAAA,EAAckC,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAW5B,GAAG,EAAEU;YACnCW,aAAS/B,8BAAAA,EAAesC,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAWP,OAAO,EAAEA;YAC5CE,YAAQjC,8BAAAA,EAAesC,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAWL,MAAM,EAAEA;QAC5C,GACA;YACEgB,aAAa;QACf;QAEFnC,eAAeb,oBAAAA,CAAKiD,QAAQ,CAACpC,eAAe;YAC1CqC,iBAAiB;YACjBC,cAAc;gBACZC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAAC9C,yBAAAA,EAAAA;YACb;YACA0C,aAAa;QACf;QACAjC,cAAcf,oBAAAA,CAAKiD,QAAQ,CAAClC,cAAc;YACxCmC,iBAAiB;YACjBF,aAAa;QACf;QACA,GAAG9B,UAAU;QACbyB,UAAUzC,oCAAAA,EAAiB+B,CAAAA;gBAEzBzB;YADA,MAAMkC,WAAWT,GAAGoB,MAAM,CAACrC,KAAK;aAChCR,kBAAAA,MAAMmC,QAAAA,AAAQ,MAAA,QAAdnC,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAAA,IAAAA,CAAAA,OAAiByB,IAAI;gBAAEjB,OAAO0B;YAAS;YACvCnB,iBAAiBmB;QACnB;IACF,OACAvC,6BAAAA,EAAckB,cAAcZ;IAG9B,MAAMe,QAAwB;QAC5B,GAAGqB,UAAU;QACbS,YAAY;YACV,4DAA4D;YAC5D,GAAGT,WAAWS,UAAU;YACxBxC,SAAS;QACX;QACAA,SAASd,oBAAAA,CAAKiD,QAAQ,CAACnC,SAAS;YAC9BqC,cAAc;gBACZC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAAC/C,0BAAAA,EAAAA;gBACXkD,MAAM;gBACN,cAAc;gBACdC,UAAU,CAAC;YACb;YACAN,iBAAiB;YACjBF,aAAa;QACf;QACArC;QACAgB;QACAjB;IACF;IAEA,IAAIc,MAAMV,OAAO,EAAE;QACjBU,MAAMV,OAAO,CAAC2B,OAAO,GAAGF;IAC1B;IAEA,OAAOf;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"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    unfocusedNoContentAfter: {\n        paddingRight: 0\n    }\n});\nconst useInputStyles = makeStyles({\n    small: {\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    medium: {\n        paddingRight: tokens.spacingHorizontalS\n    },\n    large: {\n        paddingRight: tokens.spacingHorizontalMNudge\n    }\n});\nconst useContentAfterStyles = makeStyles({\n    contentAfter: {\n        paddingLeft: tokens.spacingHorizontalM,\n        columnGap: tokens.spacingHorizontalXS\n    },\n    rest: {\n        height: 0,\n        width: 0,\n        paddingLeft: 0,\n        overflow: 'hidden'\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    'use no memo';\n    const { disabled, focused, size } = state;\n    const rootStyles = useRootStyles();\n    const inputStyles = useInputStyles();\n    const contentAfterStyles = useContentAfterStyles();\n    const dismissClassName = useDismissClassName();\n    const dismissStyles = useDismissStyles();\n    state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);\n    state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], 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"],"names":["searchBoxClassNames","useSearchBoxStyles_unstable","root","dismiss","contentAfter","contentBefore","input","useRootStyles","__styles","small","i8kkvl","B2u0y6b","uwmqm3","z189sj","medium","large","Boqhc8c","B8uat0v","unfocusedNoContentAfter","d","useInputStyles","useContentAfterStyles","rest","Bqenvij","a9b677","B68tc82","Bmxbyg5","Bpg54ce","p","useDismissClassName","__resetStyles","useDismissStyles","disabled","sj55zd","Duoase","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className","mergeClasses","useInputStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"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    unfocusedNoContentAfter: {\n        paddingRight: 0\n    }\n});\nconst useInputStyles = makeStyles({\n    small: {\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    medium: {\n        paddingRight: tokens.spacingHorizontalS\n    },\n    large: {\n        paddingRight: tokens.spacingHorizontalMNudge\n    }\n});\nconst useContentAfterStyles = makeStyles({\n    contentAfter: {\n        paddingLeft: tokens.spacingHorizontalM,\n        columnGap: tokens.spacingHorizontalXS\n    },\n    rest: {\n        height: 0,\n        width: 0,\n        paddingLeft: 0,\n        overflow: 'hidden'\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    'use no memo';\n    const { disabled, focused, size } = state;\n    const rootStyles = useRootStyles();\n    const inputStyles = useInputStyles();\n    const contentAfterStyles = useContentAfterStyles();\n    const dismissClassName = useDismissClassName();\n    const dismissStyles = useDismissStyles();\n    state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);\n    state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], 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"],"names":["__resetStyles","__styles","mergeClasses","tokens","useInputStyles_unstable","searchBoxClassNames","root","dismiss","contentAfter","contentBefore","input","useRootStyles","small","i8kkvl","B2u0y6b","uwmqm3","z189sj","medium","large","Boqhc8c","B8uat0v","unfocusedNoContentAfter","d","useInputStyles","useContentAfterStyles","rest","Bqenvij","a9b677","B68tc82","Bmxbyg5","Bpg54ce","p","useDismissClassName","useDismissStyles","disabled","sj55zd","Duoase","useSearchBoxStyles_unstable","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className"],"mappings":"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"}

package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.raw.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    searchBoxClassNames: function() {
+        return searchBoxClassNames;
+    },
+    useSearchBoxStyles_unstable: function() {
+        return useSearchBoxStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reactinput = require("@fluentui/react-input");
+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 = (0, _react.makeStyles)({
+    small: {
+        columnGap: 0,
+        maxWidth: '468px',
+        paddingLeft: _reacttheme.tokens.spacingHorizontalSNudge,
+        paddingRight: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    medium: {
+        columnGap: 0,
+        maxWidth: '468px',
+        paddingLeft: _reacttheme.tokens.spacingHorizontalS,
+        paddingRight: _reacttheme.tokens.spacingHorizontalS
+    },
+    large: {
+        columnGap: 0,
+        maxWidth: '468px',
+        paddingLeft: _reacttheme.tokens.spacingHorizontalMNudge,
+        paddingRight: _reacttheme.tokens.spacingHorizontalMNudge
+    },
+    input: {
+        paddingLeft: _reacttheme.tokens.spacingHorizontalSNudge,
+        paddingRight: 0,
+        // removes the WebKit pseudoelement styling
+        '::-webkit-search-decoration': {
+            display: 'none'
+        },
+        '::-webkit-search-cancel-button': {
+            display: 'none'
+        }
+    },
+    unfocusedNoContentAfter: {
+        paddingRight: 0
+    }
+});
+const useInputStyles = (0, _react.makeStyles)({
+    small: {
+        paddingRight: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    medium: {
+        paddingRight: _reacttheme.tokens.spacingHorizontalS
+    },
+    large: {
+        paddingRight: _reacttheme.tokens.spacingHorizontalMNudge
+    }
+});
+const useContentAfterStyles = (0, _react.makeStyles)({
+    contentAfter: {
+        paddingLeft: _reacttheme.tokens.spacingHorizontalM,
+        columnGap: _reacttheme.tokens.spacingHorizontalXS
+    },
+    rest: {
+        height: 0,
+        width: 0,
+        paddingLeft: 0,
+        overflow: 'hidden'
+    }
+});
+const useDismissClassName = (0, _react.makeResetStyles)({
+    boxSizing: 'border-box',
+    color: _reacttheme.tokens.colorNeutralForeground3,
+    display: 'flex',
+    // special case styling for icons (most common case) to ensure they're centered vertically
+    // size: medium (default)
+    '> svg': {
+        fontSize: '20px'
+    },
+    cursor: 'pointer'
+});
+const useDismissStyles = (0, _react.makeStyles)({
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled
+    },
+    // Ensure resizable icons show up with the proper font size
+    small: {
+        '> svg': {
+            fontSize: '16px'
+        }
+    },
+    medium: {},
+    large: {
+        '> svg': {
+            fontSize: '24px'
+        }
+    }
+});
+const useSearchBoxStyles_unstable = (state)=>{
+    'use no memo';
+    const { disabled, focused, size } = state;
+    const rootStyles = useRootStyles();
+    const inputStyles = useInputStyles();
+    const contentAfterStyles = useContentAfterStyles();
+    const dismissClassName = useDismissClassName();
+    const dismissStyles = useDismissStyles();
+    state.root.className = (0, _react.mergeClasses)(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
+    state.input.className = (0, _react.mergeClasses)(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
+    if (state.dismiss) {
+        state.dismiss.className = (0, _react.mergeClasses)(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
+    }
+    if (state.contentBefore) {
+        state.contentBefore.className = (0, _react.mergeClasses)(searchBoxClassNames.contentBefore, state.contentBefore.className);
+    }
+    if (state.contentAfter) {
+        state.contentAfter.className = (0, _react.mergeClasses)(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);
+    } else if (state.dismiss) {
+        state.dismiss.className = (0, _react.mergeClasses)(state.dismiss.className, contentAfterStyles.contentAfter);
+    }
+    (0, _reactinput.useInputStyles_unstable)(state);
+    return state;
+};

package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SearchBox/useSearchBoxStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SearchBoxSlots, SearchBoxState } from './SearchBox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const searchBoxClassNames: SlotClassNames<SearchBoxSlots> = {\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/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  small: {\n    columnGap: 0,\n    maxWidth: '468px',\n\n    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    columnGap: 0,\n    maxWidth: '468px',\n\n    paddingLeft: tokens.spacingHorizontalS,\n    paddingRight: tokens.spacingHorizontalS,\n  },\n  large: {\n    columnGap: 0,\n    maxWidth: '468px',\n\n    paddingLeft: tokens.spacingHorizontalMNudge,\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n\n  input: {\n    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: 0,\n\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\n  unfocusedNoContentAfter: {\n    paddingRight: 0,\n  },\n});\n\nconst useInputStyles = makeStyles({\n  small: {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    paddingRight: tokens.spacingHorizontalS,\n  },\n  large: {\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n});\n\nconst useContentAfterStyles = makeStyles({\n  contentAfter: {\n    paddingLeft: tokens.spacingHorizontalM,\n    columnGap: tokens.spacingHorizontalXS,\n  },\n  rest: {\n    height: 0,\n    width: 0,\n    paddingLeft: 0,\n    overflow: 'hidden',\n  },\n});\n\nconst useDismissClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n  display: 'flex',\n  // special case styling for icons (most common case) to ensure they're centered vertically\n  // size: medium (default)\n  '> svg': { fontSize: '20px' },\n  cursor: 'pointer',\n});\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': { fontSize: '16px' },\n  },\n  medium: {\n    // included in useDismissClassName\n  },\n  large: {\n    '> svg': { fontSize: '24px' },\n  },\n});\n\n/**\n * Apply styling to the SearchBox slots based on the state\n */\nexport const useSearchBoxStyles_unstable = (state: SearchBoxState): SearchBoxState => {\n  'use no memo';\n\n  const { disabled, focused, size } = state;\n\n  const rootStyles = useRootStyles();\n  const inputStyles = useInputStyles();\n  const contentAfterStyles = useContentAfterStyles();\n  const dismissClassName = useDismissClassName();\n  const dismissStyles = useDismissStyles();\n\n  state.root.className = mergeClasses(\n    searchBoxClassNames.root,\n    rootStyles[size],\n    !focused && rootStyles.unfocusedNoContentAfter,\n    state.root.className,\n  );\n  state.input.className = mergeClasses(\n    searchBoxClassNames.input,\n    rootStyles.input,\n    !focused && inputStyles[size],\n    state.input.className,\n  );\n\n  if (state.dismiss) {\n    state.dismiss.className = mergeClasses(\n      searchBoxClassNames.dismiss,\n      dismissClassName,\n      disabled && dismissStyles.disabled,\n      dismissStyles[size],\n\n      state.dismiss.className,\n    );\n  }\n\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n  }\n\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(\n      searchBoxClassNames.contentAfter,\n      contentAfterStyles.contentAfter,\n\n      !focused && contentAfterStyles.rest,\n\n      state.contentAfter.className,\n    );\n  } else if (state.dismiss) {\n    state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);\n  }\n\n  useInputStyles_unstable(state);\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","useInputStyles_unstable","searchBoxClassNames","root","dismiss","contentAfter","contentBefore","input","useRootStyles","small","columnGap","maxWidth","paddingLeft","spacingHorizontalSNudge","paddingRight","medium","spacingHorizontalS","large","spacingHorizontalMNudge","display","unfocusedNoContentAfter","useInputStyles","useContentAfterStyles","spacingHorizontalM","spacingHorizontalXS","rest","height","width","overflow","useDismissClassName","boxSizing","color","colorNeutralForeground3","fontSize","cursor","useDismissStyles","disabled","colorNeutralForegroundDisabled","useSearchBoxStyles_unstable","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className"],"mappings":";;;;;;;;;;;IAMaK,mBAAAA;;;IA0GAoC,2BAAAA;;;;uBAhH6C,iBAAiB;4BAGpD,wBAAwB;4BACP,wBAAwB;AAEzD,4BAA4D;IACjEnC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,eAAe;IACfC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,oBAAgBV,iBAAAA,EAAW;IAC/BW,OAAO;QACLC,WAAW;QACXC,UAAU;QAEVC,aAAaZ,kBAAAA,CAAOa,uBAAuB;QAC3CC,cAAcd,kBAAAA,CAAOa,uBAAuB;IAC9C;IACAE,QAAQ;QACNL,WAAW;QACXC,UAAU;QAEVC,aAAaZ,kBAAAA,CAAOgB,kBAAkB;QACtCF,cAAcd,kBAAAA,CAAOgB,kBAAkB;IACzC;IACAC,OAAO;QACLP,WAAW;QACXC,UAAU;QAEVC,aAAaZ,kBAAAA,CAAOkB,uBAAuB;QAC3CJ,cAAcd,kBAAAA,CAAOkB,uBAAuB;IAC9C;IAEAX,OAAO;QACLK,aAAaZ,kBAAAA,CAAOa,uBAAuB;QAC3CC,cAAc;QAEd,2CAA2C;QAC3C,+BAA+B;YAC7BK,SAAS;QACX;QACA,kCAAkC;YAChCA,SAAS;QACX;IACF;IAEAC,yBAAyB;QACvBN,cAAc;IAChB;AACF;AAEA,MAAMO,qBAAiBvB,iBAAAA,EAAW;IAChCW,OAAO;QACLK,cAAcd,kBAAAA,CAAOa,uBAAuB;IAC9C;IACAE,QAAQ;QACND,cAAcd,kBAAAA,CAAOgB,kBAAkB;IACzC;IACAC,OAAO;QACLH,cAAcd,kBAAAA,CAAOkB,uBAAuB;IAC9C;AACF;AAEA,MAAMI,4BAAwBxB,iBAAAA,EAAW;IACvCO,cAAc;QACZO,aAAaZ,kBAAAA,CAAOuB,kBAAkB;QACtCb,WAAWV,kBAAAA,CAAOwB,mBAAmB;IACvC;IACAC,MAAM;QACJC,QAAQ;QACRC,OAAO;QACPf,aAAa;QACbgB,UAAU;IACZ;AACF;AAEA,MAAMC,0BAAsBhC,sBAAAA,EAAgB;IAC1CiC,WAAW;IACXC,OAAO/B,kBAAAA,CAAOgC,uBAAuB;IACrCb,SAAS;IACT,0FAA0F;IAC1F,yBAAyB;IACzB,SAAS;QAAEc,UAAU;IAAO;IAC5BC,QAAQ;AACV;AAEA,MAAMC,uBAAmBrC,iBAAAA,EAAW;IAClCsC,UAAU;QACRL,OAAO/B,kBAAAA,CAAOqC,8BAA8B;IAC9C;IACA,2DAA2D;IAC3D5B,OAAO;QACL,SAAS;YAAEwB,UAAU;QAAO;IAC9B;IACAlB,QAAQ,CAER;IACAE,OAAO;QACL,SAAS;YAAEgB,UAAU;QAAO;IAC9B;AACF;AAKO,oCAAoC,CAACM;IAC1C;IAEA,MAAM,EAAEH,QAAQ,EAAEI,OAAO,EAAEC,IAAI,EAAE,GAAGF;IAEpC,MAAMG,aAAalC;IACnB,MAAMmC,cAActB;IACpB,MAAMuB,qBAAqBtB;IAC3B,MAAMuB,mBAAmBhB;IACzB,MAAMiB,gBAAgBX;IAEtBI,MAAMpC,IAAI,CAAC4C,SAAS,OAAGhD,mBAAAA,EACrBG,oBAAoBC,IAAI,EACxBuC,UAAU,CAACD,KAAK,EAChB,CAACD,WAAWE,WAAWtB,uBAAuB,EAC9CmB,MAAMpC,IAAI,CAAC4C,SAAS;IAEtBR,MAAMhC,KAAK,CAACwC,SAAS,OAAGhD,mBAAAA,EACtBG,oBAAoBK,KAAK,EACzBmC,WAAWnC,KAAK,EAChB,CAACiC,WAAWG,WAAW,CAACF,KAAK,EAC7BF,MAAMhC,KAAK,CAACwC,SAAS;IAGvB,IAAIR,MAAMnC,OAAO,EAAE;QACjBmC,MAAMnC,OAAO,CAAC2C,SAAS,OAAGhD,mBAAAA,EACxBG,oBAAoBE,OAAO,EAC3ByC,kBACAT,YAAYU,cAAcV,QAAQ,EAClCU,aAAa,CAACL,KAAK,EAEnBF,MAAMnC,OAAO,CAAC2C,SAAS;IAE3B;IAEA,IAAIR,MAAMjC,aAAa,EAAE;QACvBiC,MAAMjC,aAAa,CAACyC,SAAS,OAAGhD,mBAAAA,EAAaG,oBAAoBI,aAAa,EAAEiC,MAAMjC,aAAa,CAACyC,SAAS;IAC/G;IAEA,IAAIR,MAAMlC,YAAY,EAAE;QACtBkC,MAAMlC,YAAY,CAAC0C,SAAS,OAAGhD,mBAAAA,EAC7BG,oBAAoBG,YAAY,EAChCuC,mBAAmBvC,YAAY,EAE/B,CAACmC,WAAWI,mBAAmBnB,IAAI,EAEnCc,MAAMlC,YAAY,CAAC0C,SAAS;IAEhC,OAAO,IAAIR,MAAMnC,OAAO,EAAE;QACxBmC,MAAMnC,OAAO,CAAC2C,SAAS,OAAGhD,mBAAAA,EAAawC,MAAMnC,OAAO,CAAC2C,SAAS,EAAEH,mBAAmBvC,YAAY;IACjG;QAEAJ,mCAAAA,EAAwBsC;IAExB,OAAOA;AACT,EAAE"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,SAAS;eAATA,oBAAS;;IACTC,wBAAwB;eAAxBA,mCAAwB;;IACxBC,mBAAmB;eAAnBA,8BAAmB;;IACnBC,2BAA2B;eAA3BA,sCAA2B;;IAC3BC,qBAAqB;eAArBA,gCAAqB;;;2BAChB"}
+{"version":3,"sources":["../src/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":";;;;;;;;;;;;eACEA,oBAAS;;;eACTC,mCAAwB;;;eACxBC,8BAAmB;;;eACnBC,sCAA2B;;;eAC3BC,gCAAqB;;;2BAChB,cAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-search",
-  "version": "9.2.7",
+  "version": "9.3.1",
   "description": "Search input for Fluent UI v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,11 +19,11 @@
   },
   "dependencies": {
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-input": "^9.6.7",
-    "@fluentui/react-jsx-runtime": "^9.1.2",
+    "@fluentui/react-input": "^9.7.1",
+    "@fluentui/react-jsx-runtime": "^9.1.3",
     "@fluentui/react-shared-contexts": "^9.24.0",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.22.0",
+    "@fluentui/react-utilities": "^9.23.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },