@fluentui/react-search 9.2.7 → 9.3.0

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # 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 Thu, 17 Jul 2025 13:45:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.3.0)
+
+Thu, 17 Jul 2025 13:45: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/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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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":["searchBoxClassNames","useSearchBoxStyles_unstable","root","dismiss","contentAfter","contentBefore","input","useRootStyles","makeStyles","small","columnGap","maxWidth","paddingLeft","tokens","spacingHorizontalSNudge","paddingRight","medium","spacingHorizontalS","large","spacingHorizontalMNudge","display","unfocusedNoContentAfter","useInputStyles","useContentAfterStyles","spacingHorizontalM","spacingHorizontalXS","rest","height","width","overflow","useDismissClassName","makeResetStyles","boxSizing","color","colorNeutralForeground3","fontSize","cursor","useDismissStyles","disabled","colorNeutralForegroundDisabled","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className","mergeClasses","useInputStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-search",
-  "version": "9.2.7",
+  "version": "9.3.0",
   "description": "Search input for Fluent UI v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-input": "^9.6.7",
+    "@fluentui/react-input": "^9.7.0",
     "@fluentui/react-jsx-runtime": "^9.1.2",
     "@fluentui/react-shared-contexts": "^9.24.0",
     "@fluentui/react-theme": "^9.1.24",