@fluentui/react-search 9.4.2 → 9.4.4

package/CHANGELOG.md

@@ -1,19 +1,42 @@
 # Change Log - @fluentui/react-search
 
-This log was last generated on Thu, 23 Apr 2026 11:59:30 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Jun 2026 11:03:43 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.4.4)
+
+Wed, 24 Jun 2026 11:03:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.4.3..@fluentui/react-search_v9.4.4)
+
+### Patches
+
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- Bump @fluentui/react-input to v9.8.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+
+## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.4.3)
+
+Tue, 26 May 2026 09:39:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.4.2..@fluentui/react-search_v9.4.3)
+
+### Patches
+
+- Bump @fluentui/react-input to v9.8.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
 ## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.4.2)
 
-Thu, 23 Apr 2026 11:59:30 GMT 
+Thu, 23 Apr 2026 14:21:11 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.4.1..@fluentui/react-search_v9.4.2)
 
 ### Patches
 
-- Bump @fluentui/react-input to v9.8.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-input to v9.8.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 
 ## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.4.1)
 

package/lib/components/SearchBox/useSearchBox.js

@@ -81,6 +81,7 @@ import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
             ...rootProps,
             ref: useMergedRefs(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
             onFocus: mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus),
+            // eslint-disable-next-line react-hooks/refs
             onBlur: mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur)
         }, {
             elementType: 'span'

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBox/useSearchBox.tsx"],"sourcesContent":["'use client';\n\nimport * 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 {\n  SearchBoxBaseProps,\n  SearchBoxBaseState,\n  SearchBoxSlots,\n  SearchBoxProps,\n  SearchBoxState,\n} 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', appearance = 'outline', ...baseProps } = props;\n  const state = useSearchBoxBase_unstable(baseProps, ref);\n\n  if (state.contentBefore) {\n    state.contentBefore.children ??= <SearchRegular />;\n  }\n\n  if (state.dismiss) {\n    state.dismiss.children ??= <DismissRegular />;\n  }\n\n  return {\n    ...state,\n    size,\n    appearance,\n  };\n};\n\n/**\n * Base hook for SearchBox component. Manages state related to controlled/uncontrolled\n * value, focus tracking, dismiss button click handling, search icon slot, and\n * input type=\"search\" — without design props (size, appearance).\n *\n * @param props - props from this instance of SearchBox (without size, appearance)\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBoxBase_unstable = (\n  props: SearchBoxBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): SearchBoxBaseState => {\n  const { disabled = false, root, contentBefore, dismiss, contentAfter, value, defaultValue, ...inputProps } = 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      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        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: SearchBoxBaseState = {\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        role: 'button',\n        'aria-label': 'clear',\n        tabIndex: -1,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    disabled,\n    focused,\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","appearance","baseProps","state","useSearchBoxBase_unstable","contentBefore","children","dismiss","disabled","root","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","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","target","components","defaultProps","role","tabIndex"],"mappings":"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"}
+{"version":3,"sources":["../src/components/SearchBox/useSearchBox.tsx"],"sourcesContent":["'use client';\n\nimport * 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 {\n  SearchBoxBaseProps,\n  SearchBoxBaseState,\n  SearchBoxSlots,\n  SearchBoxProps,\n  SearchBoxState,\n} 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', appearance = 'outline', ...baseProps } = props;\n  const state = useSearchBoxBase_unstable(baseProps, ref);\n\n  if (state.contentBefore) {\n    state.contentBefore.children ??= <SearchRegular />;\n  }\n\n  if (state.dismiss) {\n    state.dismiss.children ??= <DismissRegular />;\n  }\n\n  return {\n    ...state,\n    size,\n    appearance,\n  };\n};\n\n/**\n * Base hook for SearchBox component. Manages state related to controlled/uncontrolled\n * value, focus tracking, dismiss button click handling, search icon slot, and\n * input type=\"search\" — without design props (size, appearance).\n *\n * @param props - props from this instance of SearchBox (without size, appearance)\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBoxBase_unstable = (\n  props: SearchBoxBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): SearchBoxBaseState => {\n  const { disabled = false, root, contentBefore, dismiss, contentAfter, value, defaultValue, ...inputProps } = 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      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          // eslint-disable-next-line react-hooks/refs\n          onBlur: mergeCallbacks(rootProps?.onBlur, onBlur),\n        },\n        {\n          elementType: 'span',\n        },\n      ),\n      contentBefore: slot.optional(contentBefore, {\n        renderByDefault: true,\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: SearchBoxBaseState = {\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        role: 'button',\n        'aria-label': 'clear',\n        tabIndex: -1,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    disabled,\n    focused,\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","appearance","baseProps","state","useSearchBoxBase_unstable","contentBefore","children","dismiss","disabled","root","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","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","target","components","defaultProps","role","tabIndex"],"mappings":"AAAA;AAEA,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;AAUtE;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAa,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAClE,MAAMK,QAAQC,0BAA0BF,WAAWH;IAEnD,IAAII,MAAME,aAAa,EAAE;YACvBF;;QAAAA,cAAAA,uBAAAA,MAAME,aAAa,EAACC,yDAApBH,qBAAoBG,yBAAa,oBAACV;IACpC;IAEA,IAAIO,MAAMI,OAAO,EAAE;YACjBJ;;QAAAA,eAAAA,iBAAAA,MAAMI,OAAO,EAACD,2DAAdH,eAAcG,yBAAa,oBAACX;IAC9B;IAEA,OAAO;QACL,GAAGQ,KAAK;QACRH;QACAC;IACF;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMG,4BAA4B,CACvCN,OACAC;IAEA,MAAM,EAAES,WAAW,KAAK,EAAEC,IAAI,EAAEJ,aAAa,EAAEE,OAAO,EAAEG,YAAY,EAAEC,KAAK,EAAEC,YAAY,EAAE,GAAGC,YAAY,GAAGf;IAE7G,MAAMgB,mBAAmB3B,MAAM4B,MAAM,CAAiB;IACtD,MAAMC,eAAe7B,MAAM4B,MAAM,CAAmB;IAEpD,MAAM,CAACE,eAAeC,iBAAiB,GAAG3B,qBAAqB;QAC7DY,OAAOQ;QACPQ,cAAcP;QACdQ,cAAc;IAChB;IAEA,4EAA4E;IAC5E,MAAM,CAACC,SAASC,WAAW,GAAGnC,MAAMoC,QAAQ,CAAC;IAE7C,MAAMC,UAAUrC,MAAMsC,WAAW,CAAC;QAChCH,WAAW;IACb,GAAG;QAACA;KAAW;IAEf,MAAMI,SAAmDvC,MAAMsC,WAAW,CACxEE,CAAAA;YACeb;QAAbQ,WAAW,CAAC,GAACR,4BAAAA,iBAAiBc,OAAO,cAAxBd,gDAAAA,0BAA0Be,QAAQ,CAACF,GAAGG,aAAa;IAClE,GACA;QAACR;KAAW;IAGd,MAAMS,YAAYzC,KAAK0C,gBAAgB,CAACvB;IAExC,MAAMwB,qBAAqBzC,iBAAiB,CAAC0C;YAM3CpC,iBAEAkB;QAPA,IAAI5B,oBAAoBmB,UAAU;gBAChCA;aAAAA,mBAAAA,QAAQ4B,OAAO,cAAf5B,uCAAAA,sBAAAA,SAAkB2B;QACpB;QACA,MAAME,WAAW;QACjBlB,iBAAiBkB;SACjBtC,kBAAAA,MAAMuC,QAAQ,cAAdvC,sCAAAA,qBAAAA,OAAiBoC,OAAO;YAAEvB,OAAOyB;QAAS;SAE1CpB,wBAAAA,aAAaY,OAAO,cAApBZ,4CAAAA,sBAAsBsB,KAAK;IAC7B;IAEA,MAAMC,aAAa7C,kBACjB;QACE8C,MAAM;QACNhC;QACAG,OAAOM;QACPR,MAAMnB,KAAKmD,MAAM,CACf;YACE,GAAGV,SAAS;YACZhC,KAAKN,cAAcsC,sBAAAA,gCAAAA,UAAWhC,GAAG,EAAEe;YACnCU,SAASnC,eAAe0C,sBAAAA,gCAAAA,UAAWP,OAAO,EAAEA;YAC5C,4CAA4C;YAC5CE,QAAQrC,eAAe0C,sBAAAA,gCAAAA,UAAWL,MAAM,EAAEA;QAC5C,GACA;YACEgB,aAAa;QACf;QAEFrC,eAAef,KAAKqD,QAAQ,CAACtC,eAAe;YAC1CuC,iBAAiB;YACjBF,aAAa;QACf;QACAhC,cAAcpB,KAAKqD,QAAQ,CAACjC,cAAc;YACxCkC,iBAAiB;YACjBF,aAAa;QACf;QACA,GAAG7B,UAAU;QACbwB,UAAU7C,iBAAiBmC,CAAAA;gBAEzB7B;YADA,MAAMsC,WAAWT,GAAGkB,MAAM,CAAClC,KAAK;aAChCb,kBAAAA,MAAMuC,QAAQ,cAAdvC,sCAAAA,qBAAAA,OAAiB6B,IAAI;gBAAEhB,OAAOyB;YAAS;YACvClB,iBAAiBkB;QACnB;IACF,GACA3C,cAAcuB,cAAcjB;IAG9B,MAAMI,QAA4B;QAChC,GAAGoC,UAAU;QACbO,YAAY;YACV,4DAA4D;YAC5D,GAAGP,WAAWO,UAAU;YACxBvC,SAAS;QACX;QACAA,SAASjB,KAAKqD,QAAQ,CAACpC,SAAS;YAC9BwC,cAAc;gBACZC,MAAM;gBACN,cAAc;gBACdC,UAAU,CAAC;YACb;YACAL,iBAAiB;YACjBF,aAAa;QACf;QACAlC;QACAa;IACF;IAEA,IAAIlB,MAAMI,OAAO,EAAE;QACjBJ,MAAMI,OAAO,CAAC4B,OAAO,GAAGF;IAC1B;IAEA,OAAO9B;AACT,EAAE"}

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

@@ -94,8 +94,6 @@ const useDismissStyles = /*#__PURE__*/__styles({
  * Apply styling to the SearchBox slots based on the state
  */
 export const useSearchBoxStyles_unstable = state => {
-  'use no memo';
-
   const {
     disabled,
     focused,
@@ -106,17 +104,23 @@ export const useSearchBoxStyles_unstable = state => {
   const contentAfterStyles = useContentAfterStyles();
   const dismissClassName = useDismissClassName();
   const dismissStyles = useDismissStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
   if (state.dismiss) {
+    // eslint-disable-next-line react-hooks/immutability
     state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
   }
   if (state.contentBefore) {
+    // eslint-disable-next-line react-hooks/immutability
     state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);
   }
   if (state.contentAfter) {
+    // eslint-disable-next-line react-hooks/immutability
     state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);
   } else if (state.dismiss) {
+    // eslint-disable-next-line react-hooks/immutability
     state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);
   }
   useInputStyles_unstable(state);

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

@@ -1 +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","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"],"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,uBAAuB;AAC/D,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,OAAO,EAAE,wBAAwB;EACjCC,YAAY,EAAE,6BAA6B;EAC3CC,aAAa,EAAE,8BAA8B;EAC7CC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGV,QAAA;EAAAW,KAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAJ,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAE,KAAA;IAAAL,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAN,KAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAG,OAAA;IAAAC,OAAA;EAAA;EAAAC,uBAAA;IAAAL,MAAA;EAAA;AAAA;EAAAM,CAAA;AAAA,CAiCzB,CAAC;AACF,MAAMC,cAAc,gBAAGtB,QAAA;EAAAW,KAAA;IAAAI,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,KAAA;IAAAF,MAAA;EAAA;AAAA;EAAAM,CAAA;AAAA,CAUtB,CAAC;AACF,MAAME,qBAAqB,gBAAGvB,QAAA;EAAAO,YAAA;IAAAO,MAAA;IAAAF,MAAA;EAAA;EAAAY,IAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAZ,MAAA;IAAAa,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAR,CAAA;IAAAS,CAAA;EAAA;AAAA,CAW7B,CAAC;AACF,MAAMC,mBAAmB,gBAAGhC,aAAA,2JAU3B,CAAC;AACF,MAAMiC,gBAAgB,gBAAGhC,QAAA;EAAAiC,QAAA;IAAAC,MAAA;EAAA;EAAAvB,KAAA;IAAAwB,MAAA;EAAA;EAAAnB,MAAA;EAAAC,KAAA;IAAAkB,MAAA;EAAA;AAAA;EAAAd,CAAA;AAAA,CAiBxB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMe,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACb,MAAM;IAAEJ,QAAQ;IAAEK,OAAO;IAAEC;EAAK,CAAC,GAAGF,KAAK;EACzC,MAAMG,UAAU,GAAG9B,aAAa,CAAC,CAAC;EAClC,MAAM+B,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,MAAMoB,kBAAkB,GAAGnB,qBAAqB,CAAC,CAAC;EAClD,MAAMoB,gBAAgB,GAAGZ,mBAAmB,CAAC,CAAC;EAC9C,MAAMa,aAAa,GAAGZ,gBAAgB,CAAC,CAAC;EACxCK,KAAK,CAAChC,IAAI,CAACwC,SAAS,GAAG5C,YAAY,CAACG,mBAAmB,CAACC,IAAI,EAAEmC,UAAU,CAACD,IAAI,CAAC,EAAE,CAACD,OAAO,IAAIE,UAAU,CAACpB,uBAAuB,EAAEiB,KAAK,CAAChC,IAAI,CAACwC,SAAS,CAAC;EACrJR,KAAK,CAAC5B,KAAK,CAACoC,SAAS,GAAG5C,YAAY,CAACG,mBAAmB,CAACK,KAAK,EAAE+B,UAAU,CAAC/B,KAAK,EAAE,CAAC6B,OAAO,IAAIG,WAAW,CAACF,IAAI,CAAC,EAAEF,KAAK,CAAC5B,KAAK,CAACoC,SAAS,CAAC;EACvI,IAAIR,KAAK,CAAC/B,OAAO,EAAE;IACf+B,KAAK,CAAC/B,OAAO,CAACuC,SAAS,GAAG5C,YAAY,CAACG,mBAAmB,CAACE,OAAO,EAAEqC,gBAAgB,EAAEV,QAAQ,IAAIW,aAAa,CAACX,QAAQ,EAAEW,aAAa,CAACL,IAAI,CAAC,EAAEF,KAAK,CAAC/B,OAAO,CAACuC,SAAS,CAAC;EAC3K;EACA,IAAIR,KAAK,CAAC7B,aAAa,EAAE;IACrB6B,KAAK,CAAC7B,aAAa,CAACqC,SAAS,GAAG5C,YAAY,CAACG,mBAAmB,CAACI,aAAa,EAAE6B,KAAK,CAAC7B,aAAa,CAACqC,SAAS,CAAC;EAClH;EACA,IAAIR,KAAK,CAAC9B,YAAY,EAAE;IACpB8B,KAAK,CAAC9B,YAAY,CAACsC,SAAS,GAAG5C,YAAY,CAACG,mBAAmB,CAACG,YAAY,EAAEmC,kBAAkB,CAACnC,YAAY,EAAE,CAAC+B,OAAO,IAAII,kBAAkB,CAAClB,IAAI,EAAEa,KAAK,CAAC9B,YAAY,CAACsC,SAAS,CAAC;EACrL,CAAC,MAAM,IAAIR,KAAK,CAAC/B,OAAO,EAAE;IACtB+B,KAAK,CAAC/B,OAAO,CAACuC,SAAS,GAAG5C,YAAY,CAACoC,KAAK,CAAC/B,OAAO,CAACuC,SAAS,EAAEH,kBAAkB,CAACnC,YAAY,CAAC;EACpG;EACAJ,uBAAuB,CAACkC,KAAK,CAAC;EAC9B,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
+{"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","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"],"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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    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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);\n    if (state.dismiss) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);\n    }\n    if (state.contentBefore) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n    }\n    if (state.contentAfter) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);\n    } else if (state.dismiss) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);\n    }\n    useInputStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,uBAAuB;AAC/D,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,OAAO,EAAE,wBAAwB;EACjCC,YAAY,EAAE,6BAA6B;EAC3CC,aAAa,EAAE,8BAA8B;EAC7CC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGV,QAAA;EAAAW,KAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAJ,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAE,KAAA;IAAAL,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAN,KAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAG,OAAA;IAAAC,OAAA;EAAA;EAAAC,uBAAA;IAAAL,MAAA;EAAA;AAAA;EAAAM,CAAA;AAAA,CAiCzB,CAAC;AACF,MAAMC,cAAc,gBAAGtB,QAAA;EAAAW,KAAA;IAAAI,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,KAAA;IAAAF,MAAA;EAAA;AAAA;EAAAM,CAAA;AAAA,CAUtB,CAAC;AACF,MAAME,qBAAqB,gBAAGvB,QAAA;EAAAO,YAAA;IAAAO,MAAA;IAAAF,MAAA;EAAA;EAAAY,IAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAZ,MAAA;IAAAa,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAR,CAAA;IAAAS,CAAA;EAAA;AAAA,CAW7B,CAAC;AACF,MAAMC,mBAAmB,gBAAGhC,aAAA,2JAU3B,CAAC;AACF,MAAMiC,gBAAgB,gBAAGhC,QAAA;EAAAiC,QAAA;IAAAC,MAAA;EAAA;EAAAvB,KAAA;IAAAwB,MAAA;EAAA;EAAAnB,MAAA;EAAAC,KAAA;IAAAkB,MAAA;EAAA;AAAA;EAAAd,CAAA;AAAA,CAiBxB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMe,2BAA2B,GAAIC,KAAK,IAAG;EACpD,MAAM;IAAEJ,QAAQ;IAAEK,OAAO;IAAEC;EAAK,CAAC,GAAGF,KAAK;EACzC,MAAMG,UAAU,GAAG9B,aAAa,CAAC,CAAC;EAClC,MAAM+B,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,MAAMoB,kBAAkB,GAAGnB,qBAAqB,CAAC,CAAC;EAClD,MAAMoB,gBAAgB,GAAGZ,mBAAmB,CAAC,CAAC;EAC9C,MAAMa,aAAa,GAAGZ,gBAAgB,CAAC,CAAC;EACxC;EACAK,KAAK,CAAChC,IAAI,CAACwC,SAAS,GAAG5C,YAAY,CAACG,mBAAmB,CAACC,IAAI,EAAEmC,UAAU,CAACD,IAAI,CAAC,EAAE,CAACD,OAAO,IAAIE,UAAU,CAACpB,uBAAuB,EAAEiB,KAAK,CAAChC,IAAI,CAACwC,SAAS,CAAC;EACrJ;EACAR,KAAK,CAAC5B,KAAK,CAACoC,SAAS,GAAG5C,YAAY,CAACG,mBAAmB,CAACK,KAAK,EAAE+B,UAAU,CAAC/B,KAAK,EAAE,CAAC6B,OAAO,IAAIG,WAAW,CAACF,IAAI,CAAC,EAAEF,KAAK,CAAC5B,KAAK,CAACoC,SAAS,CAAC;EACvI,IAAIR,KAAK,CAAC/B,OAAO,EAAE;IACf;IACA+B,KAAK,CAAC/B,OAAO,CAACuC,SAAS,GAAG5C,YAAY,CAACG,mBAAmB,CAACE,OAAO,EAAEqC,gBAAgB,EAAEV,QAAQ,IAAIW,aAAa,CAACX,QAAQ,EAAEW,aAAa,CAACL,IAAI,CAAC,EAAEF,KAAK,CAAC/B,OAAO,CAACuC,SAAS,CAAC;EAC3K;EACA,IAAIR,KAAK,CAAC7B,aAAa,EAAE;IACrB;IACA6B,KAAK,CAAC7B,aAAa,CAACqC,SAAS,GAAG5C,YAAY,CAACG,mBAAmB,CAACI,aAAa,EAAE6B,KAAK,CAAC7B,aAAa,CAACqC,SAAS,CAAC;EAClH;EACA,IAAIR,KAAK,CAAC9B,YAAY,EAAE;IACpB;IACA8B,KAAK,CAAC9B,YAAY,CAACsC,SAAS,GAAG5C,YAAY,CAACG,mBAAmB,CAACG,YAAY,EAAEmC,kBAAkB,CAACnC,YAAY,EAAE,CAAC+B,OAAO,IAAII,kBAAkB,CAAClB,IAAI,EAAEa,KAAK,CAAC9B,YAAY,CAACsC,SAAS,CAAC;EACrL,CAAC,MAAM,IAAIR,KAAK,CAAC/B,OAAO,EAAE;IACtB;IACA+B,KAAK,CAAC/B,OAAO,CAACuC,SAAS,GAAG5C,YAAY,CAACoC,KAAK,CAAC/B,OAAO,CAACuC,SAAS,EAAEH,kBAAkB,CAACnC,YAAY,CAAC;EACpG;EACAJ,uBAAuB,CAACkC,KAAK,CAAC;EAC9B,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -100,24 +100,29 @@ const useDismissStyles = makeStyles({
 /**
  * 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();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
     if (state.dismiss) {
+        // eslint-disable-next-line react-hooks/immutability
         state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
     }
     if (state.contentBefore) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);
     }
     if (state.contentAfter) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);
     } else if (state.dismiss) {
+        // eslint-disable-next-line react-hooks/immutability
         state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);
     }
     useInputStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBox/useSearchBoxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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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"}
+{"version":3,"sources":["../src/components/SearchBox/useSearchBoxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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  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  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    searchBoxClassNames.root,\n    rootStyles[size],\n    !focused && rootStyles.unfocusedNoContentAfter,\n    state.root.className,\n  );\n  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\n    state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n  }\n\n  if (state.contentAfter) {\n    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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-commonjs/components/SearchBox/useSearchBox.js

@@ -85,6 +85,7 @@ const useSearchBoxBase_unstable = (props, ref)=>{
             ...rootProps,
             ref: (0, _reactutilities.useMergedRefs)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
             onFocus: (0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus),
+            // eslint-disable-next-line react-hooks/refs
             onBlur: (0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur)
         }, {
             elementType: 'span'

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBox/useSearchBox.tsx"],"sourcesContent":["'use client';\n\nimport * 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 {\n  SearchBoxBaseProps,\n  SearchBoxBaseState,\n  SearchBoxSlots,\n  SearchBoxProps,\n  SearchBoxState,\n} 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', appearance = 'outline', ...baseProps } = props;\n  const state = useSearchBoxBase_unstable(baseProps, ref);\n\n  if (state.contentBefore) {\n    state.contentBefore.children ??= <SearchRegular />;\n  }\n\n  if (state.dismiss) {\n    state.dismiss.children ??= <DismissRegular />;\n  }\n\n  return {\n    ...state,\n    size,\n    appearance,\n  };\n};\n\n/**\n * Base hook for SearchBox component. Manages state related to controlled/uncontrolled\n * value, focus tracking, dismiss button click handling, search icon slot, and\n * input type=\"search\" — without design props (size, appearance).\n *\n * @param props - props from this instance of SearchBox (without size, appearance)\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBoxBase_unstable = (\n  props: SearchBoxBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): SearchBoxBaseState => {\n  const { disabled = false, root, contentBefore, dismiss, contentAfter, value, defaultValue, ...inputProps } = 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      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        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: SearchBoxBaseState = {\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        role: 'button',\n        'aria-label': 'clear',\n        tabIndex: -1,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    disabled,\n    focused,\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","appearance","baseProps","state","useSearchBoxBase_unstable","contentBefore","children","dismiss","disabled","root","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","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","target","components","defaultProps","role","tabIndex"],"mappings":"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"}
+{"version":3,"sources":["../src/components/SearchBox/useSearchBox.tsx"],"sourcesContent":["'use client';\n\nimport * 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 {\n  SearchBoxBaseProps,\n  SearchBoxBaseState,\n  SearchBoxSlots,\n  SearchBoxProps,\n  SearchBoxState,\n} 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', appearance = 'outline', ...baseProps } = props;\n  const state = useSearchBoxBase_unstable(baseProps, ref);\n\n  if (state.contentBefore) {\n    state.contentBefore.children ??= <SearchRegular />;\n  }\n\n  if (state.dismiss) {\n    state.dismiss.children ??= <DismissRegular />;\n  }\n\n  return {\n    ...state,\n    size,\n    appearance,\n  };\n};\n\n/**\n * Base hook for SearchBox component. Manages state related to controlled/uncontrolled\n * value, focus tracking, dismiss button click handling, search icon slot, and\n * input type=\"search\" — without design props (size, appearance).\n *\n * @param props - props from this instance of SearchBox (without size, appearance)\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBoxBase_unstable = (\n  props: SearchBoxBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): SearchBoxBaseState => {\n  const { disabled = false, root, contentBefore, dismiss, contentAfter, value, defaultValue, ...inputProps } = 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      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          // eslint-disable-next-line react-hooks/refs\n          onBlur: mergeCallbacks(rootProps?.onBlur, onBlur),\n        },\n        {\n          elementType: 'span',\n        },\n      ),\n      contentBefore: slot.optional(contentBefore, {\n        renderByDefault: true,\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: SearchBoxBaseState = {\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        role: 'button',\n        'aria-label': 'clear',\n        tabIndex: -1,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    disabled,\n    focused,\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","appearance","baseProps","state","useSearchBoxBase_unstable","contentBefore","children","dismiss","disabled","root","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","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","target","components","defaultProps","role","tabIndex"],"mappings":"AAAA;;;;;;;;;;;;IA0DaiB,yBAAAA;;;IA3BAP,qBAAAA;;;;;iEA7BU,QAAQ;gCAQxB,4BAA4B;4BACD,wBAAwB;4BACZ,wBAAwB;AAmB/D,8BAA8B,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAa,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAClE,MAAMK,QAAQC,0BAA0BF,WAAWH;IAEnD,IAAII,MAAME,aAAa,EAAE;YACvBF;;QAAAA,CAAAA,YAAAA,CAAAA,uBAAAA,MAAME,aAAAA,AAAa,EAACC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAApBH,qBAAoBG,QAAAA,GAAAA,WAAAA,GAAa,OAAA,aAAA,CAACV,yBAAAA,EAAAA;IACpC;IAEA,IAAIO,MAAMI,OAAO,EAAE;YACjBJ;;QAAAA,CAAAA,aAAAA,CAAAA,iBAAAA,MAAMI,OAAO,AAAPA,EAAQD,QAAAA,MAAAA,QAAAA,eAAAA,KAAAA,IAAAA,aAAdH,eAAcG,QAAAA,GAAAA,WAAAA,GAAa,OAAA,aAAA,CAACX,0BAAAA,EAAAA;IAC9B;IAEA,OAAO;QACL,GAAGQ,KAAK;QACRH;QACAC;IACF;AACF,EAAE;AAUK,kCAAkC,CACvCH,OACAC;IAEA,MAAM,EAAES,WAAW,KAAK,EAAEC,IAAI,EAAEJ,aAAa,EAAEE,OAAO,EAAEG,YAAY,EAAEC,KAAK,EAAEC,YAAY,EAAE,GAAGC,YAAY,GAAGf;IAE7G,MAAMgB,mBAAmB3B,OAAM4B,MAAM,CAAiB;IACtD,MAAMC,eAAe7B,OAAM4B,MAAM,CAAmB;IAEpD,MAAM,CAACE,eAAeC,iBAAiB,OAAG3B,oCAAAA,EAAqB;QAC7DY,OAAOQ;QACPQ,cAAcP;QACdQ,cAAc;IAChB;IAEA,4EAA4E;IAC5E,MAAM,CAACC,SAASC,WAAW,GAAGnC,OAAMoC,QAAQ,CAAC;IAE7C,MAAMC,UAAUrC,OAAMsC,WAAW,CAAC;QAChCH,WAAW;IACb,GAAG;QAACA;KAAW;IAEf,MAAMI,SAAmDvC,OAAMsC,WAAW,CACxEE,CAAAA;YACeb;QAAbQ,WAAW,CAAC,CAAA,CAAA,CAACR,4BAAAA,iBAAiBc,OAAAA,AAAO,MAAA,QAAxBd,8BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,0BAA0Be,QAAQ,CAACF,GAAGG,cAAa;IAClE,GACA;QAACR;KAAW;IAGd,MAAMS,YAAYzC,oBAAAA,CAAK0C,gBAAgB,CAACvB;IAExC,MAAMwB,yBAAqBzC,gCAAAA,EAAiB,CAAC0C;YAM3CpC,iBAEAkB;QAPA,QAAI5B,mCAAAA,EAAoBmB,UAAU;gBAChCA;aAAAA,mBAAAA,QAAQ4B,OAAAA,AAAO,MAAA,QAAf5B,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAAA,IAAAA,CAAAA,SAAkB2B;QACpB;QACA,MAAME,WAAW;QACjBlB,iBAAiBkB;SACjBtC,kBAAAA,MAAMuC,QAAAA,AAAQ,MAAA,QAAdvC,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAAA,IAAAA,CAAAA,OAAiBoC,OAAO;YAAEvB,OAAOyB;QAAS;SAE1CpB,wBAAAA,aAAaY,OAAAA,AAAO,MAAA,QAApBZ,0BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAAsBsB,KAAK;IAC7B;IAEA,MAAMC,iBAAa7C,6BAAAA,EACjB;QACE8C,MAAM;QACNhC;QACAG,OAAOM;QACPR,MAAMnB,oBAAAA,CAAKmD,MAAM,CACf;YACE,GAAGV,SAAS;YACZhC,SAAKN,6BAAAA,EAAcsC,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAWhC,GAAG,EAAEe;YACnCU,aAASnC,8BAAAA,EAAe0C,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAWP,OAAO,EAAEA;YAC5C,4CAA4C;YAC5CE,YAAQrC,8BAAAA,EAAe0C,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAWL,MAAM,EAAEA;QAC5C,GACA;YACEgB,aAAa;QACf;QAEFrC,eAAef,oBAAAA,CAAKqD,QAAQ,CAACtC,eAAe;YAC1CuC,iBAAiB;YACjBF,aAAa;QACf;QACAhC,cAAcpB,oBAAAA,CAAKqD,QAAQ,CAACjC,cAAc;YACxCkC,iBAAiB;YACjBF,aAAa;QACf;QACA,GAAG7B,UAAU;QACbwB,cAAU7C,gCAAAA,EAAiBmC,CAAAA;gBAEzB7B;YADA,MAAMsC,WAAWT,GAAGkB,MAAM,CAAClC,KAAK;aAChCb,kBAAAA,MAAMuC,QAAAA,AAAQ,MAAA,QAAdvC,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAAA,IAAAA,CAAAA,OAAiB6B,IAAI;gBAAEhB,OAAOyB;YAAS;YACvClB,iBAAiBkB;QACnB;IACF,OACA3C,6BAAAA,EAAcuB,cAAcjB;IAG9B,MAAMI,QAA4B;QAChC,GAAGoC,UAAU;QACbO,YAAY;YACV,4DAA4D;YAC5D,GAAGP,WAAWO,UAAU;YACxBvC,SAAS;QACX;QACAA,SAASjB,oBAAAA,CAAKqD,QAAQ,CAACpC,SAAS;YAC9BwC,cAAc;gBACZC,MAAM;gBACN,cAAc;gBACdC,UAAU,CAAC;YACb;YACAL,iBAAiB;YACjBF,aAAa;QACf;QACAlC;QACAa;IACF;IAEA,IAAIlB,MAAMI,OAAO,EAAE;QACjBJ,MAAMI,OAAO,CAAC4B,OAAO,GAAGF;IAC1B;IAEA,OAAO9B;AACT,EAAE"}

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

@@ -187,24 +187,29 @@ const useDismissStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 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();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
     if (state.dismiss) {
+        // eslint-disable-next-line react-hooks/immutability
         state.dismiss.className = (0, _react.mergeClasses)(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
     }
     if (state.contentBefore) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentBefore.className = (0, _react.mergeClasses)(searchBoxClassNames.contentBefore, state.contentBefore.className);
     }
     if (state.contentAfter) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentAfter.className = (0, _react.mergeClasses)(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);
     } else if (state.dismiss) {
+        // eslint-disable-next-line react-hooks/immutability
         state.dismiss.className = (0, _react.mergeClasses)(state.dismiss.className, contentAfterStyles.contentAfter);
     }
     (0, _reactinput.useInputStyles_unstable)(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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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"}
+{"version":3,"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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    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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);\n    if (state.dismiss) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);\n    }\n    if (state.contentBefore) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n    }\n    if (state.contentAfter) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);\n    } else if (state.dismiss) {\n        // eslint-disable-next-line react-hooks/immutability\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

@@ -115,24 +115,29 @@ const useDismissStyles = (0, _react.makeStyles)({
     }
 });
 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();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
     if (state.dismiss) {
+        // eslint-disable-next-line react-hooks/immutability
         state.dismiss.className = (0, _react.mergeClasses)(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
     }
     if (state.contentBefore) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentBefore.className = (0, _react.mergeClasses)(searchBoxClassNames.contentBefore, state.contentBefore.className);
     }
     if (state.contentAfter) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentAfter.className = (0, _react.mergeClasses)(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);
     } else if (state.dismiss) {
+        // eslint-disable-next-line react-hooks/immutability
         state.dismiss.className = (0, _react.mergeClasses)(state.dismiss.className, contentAfterStyles.contentAfter);
     }
     (0, _reactinput.useInputStyles_unstable)(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SearchBox/useSearchBoxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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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"}
+{"version":3,"sources":["../src/components/SearchBox/useSearchBoxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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  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  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    searchBoxClassNames.root,\n    rootStyles[size],\n    !focused && rootStyles.unfocusedNoContentAfter,\n    state.root.className,\n  );\n  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\n    state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n  }\n\n  if (state.contentAfter) {\n    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-search",
-  "version": "9.4.2",
+  "version": "9.4.4",
   "description": "Search input for Fluent UI v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,11 +13,11 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-input": "^9.8.2",
-    "@fluentui/react-jsx-runtime": "^9.4.2",
+    "@fluentui/react-input": "^9.8.4",
+    "@fluentui/react-jsx-runtime": "^9.4.4",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-utilities": "^9.26.5",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },