@fluentui/react-search - npm Package Compare versions

Comparing version 0.0.0-nightly-20240816-2133.1 to 0.0.0-nightly-20240819-2052.1

CHANGELOG.md

 # Change Log - @fluentui/react-search
 
-This log was last generated on Fri, 16 Aug 2024 21:44:11 GMT and should not be manually modified.
+This log was last generated on Mon, 19 Aug 2024 20:57:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20240816-2133.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v0.0.0-nightly-20240816-2133.1)
+## [0.0.0-nightly-20240819-2052.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v0.0.0-nightly-20240819-2052.1)
 
-Fri, 16 Aug 2024 21:44:11 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.12..@fluentui/react-search_v0.0.0-nightly-20240816-2133.1)
+Mon, 19 Aug 2024 20:57:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.14..@fluentui/react-search_v0.0.0-nightly-20240819-2052.1)
 
@@ -15,9 +15,29 @@ ### Changes
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by [e-mail])
-- Bump @fluentui/react-input to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
+- Bump @fluentui/react-input to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
 
+## [9.0.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.0.14)
+
+Mon, 05 Aug 2024 22:33:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.13..@fluentui/react-search_v9.0.14)
+
+### Patches
+
+- Bump @fluentui/react-input to v9.4.85 ([PR #32077](https://github.com/microsoft/fluentui/pull/32077) by beachball)
+
+## [9.0.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.0.13)
+
+Tue, 30 Jul 2024 18:47:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.12..@fluentui/react-search_v9.0.13)
+
+### Patches
+
+- fix: replace useEventCallback with useCallback for focus ([PR #32079](https://github.com/microsoft/fluentui/pull/32079) by [e-mail])
+- fix: Expand hit target when there's no content after. ([PR #32114](https://github.com/microsoft/fluentui/pull/32114) by [e-mail])
+- Bump @fluentui/react-input to v9.4.84 ([PR #32157](https://github.com/microsoft/fluentui/pull/32157) by beachball)
+
 ## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.0.12)
@@ -24,0 +44,0 @@

lib-commonjs/components/SearchBox/useSearchBox.js

@@ -27,9 +27,13 @@ "use strict";
     const [focused, setFocused] = _react.useState(false);
-    const onFocus = (0, _reactutilities.useEventCallback)(()=>{
+    const onFocus = _react.useCallback(()=>{
         setFocused(true);
-    });
-    const onBlur = (0, _reactutilities.useEventCallback)((ev)=>{
+    }, [
+        setFocused
+    ]);
+    const onBlur = _react.useCallback((ev)=>{
         var _searchBoxRootRef_current;
         setFocused(!!((_searchBoxRootRef_current = searchBoxRootRef.current) === null || _searchBoxRootRef_current === void 0 ? void 0 : _searchBoxRootRef_current.contains(ev.relatedTarget)));
-    });
+    }, [
+        setFocused
+    ]);
     const rootProps = _reactutilities.slot.resolveShorthand(root);
@@ -56,4 +60,4 @@ const handleDismissClick = (0, _reactutilities.useEventCallback)((event)=>{
             ref: (0, _reactutilities.useMergedRefs)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
-            onFocus: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus)),
-            onBlur: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur))
+            onFocus: (0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus),
+            onBlur: (0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur)
         }, {
@@ -60,0 +64,0 @@ elementType: 'span'

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

@@ -35,8 +35,8 @@ "use strict";
         uwmqm3: [
-            "f1xer5qc",
-            "f1vwfgzu"
+            "f1yo5xhq",
+            "f11u2m66"
         ],
         z189sj: [
-            "f1rnmnj3",
-            "frcaq29"
+            "f1czefwt",
+            "fyz03hb"
         ]
@@ -48,8 +48,8 @@ },
         uwmqm3: [
-            "f1ga1vvr",
-            "f577s3h"
+            "fy4mc4l",
+            "fqmi3k8"
         ],
         z189sj: [
-            "f14olgbc",
-            "f4yg0v8"
+            "f1cper36",
+            "f1y5uc1l"
         ]
@@ -61,8 +61,8 @@ },
         uwmqm3: [
-            "fzbt8k8",
-            "fesbjht"
+            "f1xt971f",
+            "fyp1ehy"
         ],
         z189sj: [
-            "f11w4lch",
-            "f1kw5ojf"
+            "f1lehhk2",
+            "f1auf7rb"
         ]
@@ -72,4 +72,4 @@ },
         uwmqm3: [
-            "feaks35",
-            "fzcul7f"
+            "f7mios5",
+            "f1fa2o7t"
         ],
@@ -82,2 +82,8 @@ z189sj: [
         B8uat0v: "fcoa6sg"
+    },
+    unfocusedNoContentAfter: {
+        z189sj: [
+            "fhxju0i",
+            "f1cnd47f"
+        ]
     }
@@ -88,16 +94,16 @@ }, {
         ".f1xzfw5u{max-width:468px;}",
-        ".f1xer5qc{padding-left:var(--ctrl-token-SearchBox-1579, var(--semantic-token-SearchBox-1580, var(--spacingHorizontalSNudge)));}",
-        ".f1vwfgzu{padding-right:var(--ctrl-token-SearchBox-1579, var(--semantic-token-SearchBox-1580, var(--spacingHorizontalSNudge)));}",
-        ".f1rnmnj3{padding-right:var(--ctrl-token-SearchBox-1581, var(--semantic-token-SearchBox-1582, var(--spacingHorizontalSNudge)));}",
-        ".frcaq29{padding-left:var(--ctrl-token-SearchBox-1581, var(--semantic-token-SearchBox-1582, var(--spacingHorizontalSNudge)));}",
-        ".f1ga1vvr{padding-left:var(--ctrl-token-SearchBox-1583, var(--semantic-token-SearchBox-1584, var(--spacingHorizontalS)));}",
-        ".f577s3h{padding-right:var(--ctrl-token-SearchBox-1583, var(--semantic-token-SearchBox-1584, var(--spacingHorizontalS)));}",
-        ".f14olgbc{padding-right:var(--ctrl-token-SearchBox-1585, var(--semantic-token-SearchBox-1586, var(--spacingHorizontalS)));}",
-        ".f4yg0v8{padding-left:var(--ctrl-token-SearchBox-1585, var(--semantic-token-SearchBox-1586, var(--spacingHorizontalS)));}",
-        ".fzbt8k8{padding-left:var(--ctrl-token-SearchBox-1587, var(--semantic-token-SearchBox-1588, var(--spacingHorizontalMNudge)));}",
-        ".fesbjht{padding-right:var(--ctrl-token-SearchBox-1587, var(--semantic-token-SearchBox-1588, var(--spacingHorizontalMNudge)));}",
-        ".f11w4lch{padding-right:var(--ctrl-token-SearchBox-1589, var(--semantic-token-SearchBox-1590, var(--spacingHorizontalMNudge)));}",
-        ".f1kw5ojf{padding-left:var(--ctrl-token-SearchBox-1589, var(--semantic-token-SearchBox-1590, var(--spacingHorizontalMNudge)));}",
-        ".feaks35{padding-left:var(--ctrl-token-SearchBox-1591, var(--semantic-token-SearchBox-1592, var(--spacingHorizontalSNudge)));}",
-        ".fzcul7f{padding-right:var(--ctrl-token-SearchBox-1591, var(--semantic-token-SearchBox-1592, var(--spacingHorizontalSNudge)));}",
+        ".f1yo5xhq{padding-left:var(--1579, var(--1580, var(--spacingHorizontalSNudge)));}",
+        ".f11u2m66{padding-right:var(--1579, var(--1580, var(--spacingHorizontalSNudge)));}",
+        ".f1czefwt{padding-right:var(--1581, var(--1582, var(--spacingHorizontalSNudge)));}",
+        ".fyz03hb{padding-left:var(--1581, var(--1582, var(--spacingHorizontalSNudge)));}",
+        ".fy4mc4l{padding-left:var(--1583, var(--1584, var(--spacingHorizontalS)));}",
+        ".fqmi3k8{padding-right:var(--1583, var(--1584, var(--spacingHorizontalS)));}",
+        ".f1cper36{padding-right:var(--1585, var(--1586, var(--spacingHorizontalS)));}",
+        ".f1y5uc1l{padding-left:var(--1585, var(--1586, var(--spacingHorizontalS)));}",
+        ".f1xt971f{padding-left:var(--1587, var(--1588, var(--spacingHorizontalMNudge)));}",
+        ".fyp1ehy{padding-right:var(--1587, var(--1588, var(--spacingHorizontalMNudge)));}",
+        ".f1lehhk2{padding-right:var(--1589, var(--1590, var(--spacingHorizontalMNudge)));}",
+        ".f1auf7rb{padding-left:var(--1589, var(--1590, var(--spacingHorizontalMNudge)));}",
+        ".f7mios5{padding-left:var(--1591, var(--1592, var(--spacingHorizontalSNudge)));}",
+        ".f1fa2o7t{padding-right:var(--1591, var(--1592, var(--spacingHorizontalSNudge)));}",
         ".fhxju0i{padding-right:0;}",
@@ -109,9 +115,38 @@ ".f1cnd47f{padding-left:0;}",
 });
+const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
+    small: {
+        z189sj: [
+            "fdw0yi8",
+            "fk8j09s"
+        ]
+    },
+    medium: {
+        z189sj: [
+            "f1vdfbxk",
+            "f1f5gg8d"
+        ]
+    },
+    large: {
+        z189sj: [
+            "f11gcy0p",
+            "f1ng84yb"
+        ]
+    }
+}, {
+    d: [
+        ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
+        ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
+        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
+        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
+        ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}",
+        ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}"
+    ]
+});
 const useContentAfterStyles = /*#__PURE__*/ (0, _react.__styles)({
     contentAfter: {
         uwmqm3: [
-            "f1miqibf",
-            "flcjzay"
+            "f1f19u1p",
+            "fkbs4c"
         ],
-        i8kkvl: "flgljck"
+        i8kkvl: "fl7yw8l"
     },
@@ -121,21 +156,27 @@ rest: {
         Bqenvij: "fniina8",
-        a9b677: "f3tsq5r"
+        a9b677: "f3tsq5r",
+        uwmqm3: [
+            "f1cnd47f",
+            "fhxju0i"
+        ]
     }
 }, {
     d: [
-        ".f1miqibf{padding-left:var(--ctrl-token-SearchBox-1593, var(--semantic-token-SearchBox-1594, var(--spacingHorizontalM)));}",
-        ".flcjzay{padding-right:var(--ctrl-token-SearchBox-1593, var(--semantic-token-SearchBox-1594, var(--spacingHorizontalM)));}",
-        ".flgljck{column-gap:var(--ctrl-token-SearchBox-1595, var(--semantic-token-SearchBox-1596, var(--spacingHorizontalXS)));}",
+        ".f1f19u1p{padding-left:var(--1593, var(--1594, var(--spacingHorizontalM)));}",
+        ".fkbs4c{padding-right:var(--1593, var(--1594, var(--spacingHorizontalM)));}",
+        ".fl7yw8l{column-gap:var(--1595, var(--1596, var(--spacingHorizontalXS)));}",
         ".fk73vx1{opacity:0;}",
         ".fniina8{height:0;}",
-        ".f3tsq5r{width:0;}"
+        ".f3tsq5r{width:0;}",
+        ".f1cnd47f{padding-left:0;}",
+        ".fhxju0i{padding-right:0;}"
     ]
 });
-const useDismissClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1ogwnmi", null, [
-    ".r1ogwnmi{box-sizing:border-box;color:var(--ctrl-token-SearchBox-1597, var(--semantic-token-SearchBox-1598, var(--colorNeutralForeground3)));display:flex;cursor:pointer;}",
-    ".r1ogwnmi>svg{font-size:20px;}"
+const useDismissClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r153di11", null, [
+    ".r153di11{box-sizing:border-box;color:var(--1597, var(--1598, var(--colorNeutralForeground3)));display:flex;cursor:pointer;}",
+    ".r153di11>svg{font-size:20px;}"
 ]);
 const useDismissStyles = /*#__PURE__*/ (0, _react.__styles)({
     disabled: {
-        sj55zd: "f4be25j"
+        sj55zd: "f18ixbzt"
     },
@@ -151,3 +192,3 @@ small: {
     d: [
-        ".f4be25j{color:var(--ctrl-token-SearchBox-1599, var(--semantic-token-SearchBox-1600, var(--colorNeutralForegroundDisabled)));}",
+        ".f18ixbzt{color:var(--1599, var(--1600, var(--colorNeutralForegroundDisabled)));}",
         ".f3qv9w>svg{font-size:16px;}",
@@ -161,7 +202,8 @@ ".f16u2scb>svg{font-size:24px;}"
     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], state.root.className);
-    state.input.className = (0, _react.mergeClasses)(searchBoxClassNames.input, rootStyles.input, state.input.className);
+    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) {
@@ -168,0 +210,0 @@ state.dismiss.className = (0, _react.mergeClasses)(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);

lib/components/SearchBox/useSearchBox.js

@@ -24,9 +24,13 @@ import * as React from 'react';
     const [focused, setFocused] = React.useState(false);
-    const onFocus = useEventCallback(()=>{
+    const onFocus = React.useCallback(()=>{
         setFocused(true);
-    });
-    const onBlur = useEventCallback((ev)=>{
+    }, [
+        setFocused
+    ]);
+    const onBlur = React.useCallback((ev)=>{
         var _searchBoxRootRef_current;
         setFocused(!!((_searchBoxRootRef_current = searchBoxRootRef.current) === null || _searchBoxRootRef_current === void 0 ? void 0 : _searchBoxRootRef_current.contains(ev.relatedTarget)));
-    });
+    }, [
+        setFocused
+    ]);
     const rootProps = slot.resolveShorthand(root);
@@ -53,4 +57,4 @@ const handleDismissClick = useEventCallback((event)=>{
             ref: useMergedRefs(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
-            onFocus: useEventCallback(mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus)),
-            onBlur: useEventCallback(mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur))
+            onFocus: mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus),
+            onBlur: mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur)
         }, {
@@ -57,0 +61,0 @@ elementType: 'span'

lib/components/SearchBox/useSearchBoxStyles.styles.js

@@ -18,4 +18,4 @@ import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
     B2u0y6b: "f1xzfw5u",
-    uwmqm3: ["f1xer5qc", "f1vwfgzu"],
-    z189sj: ["f1rnmnj3", "frcaq29"]
+    uwmqm3: ["f1yo5xhq", "f11u2m66"],
+    z189sj: ["f1czefwt", "fyz03hb"]
   },
@@ -25,4 +25,4 @@ medium: {
     B2u0y6b: "f1xzfw5u",
-    uwmqm3: ["f1ga1vvr", "f577s3h"],
-    z189sj: ["f14olgbc", "f4yg0v8"]
+    uwmqm3: ["fy4mc4l", "fqmi3k8"],
+    z189sj: ["f1cper36", "f1y5uc1l"]
   },
@@ -32,18 +32,34 @@ large: {
     B2u0y6b: "f1xzfw5u",
-    uwmqm3: ["fzbt8k8", "fesbjht"],
-    z189sj: ["f11w4lch", "f1kw5ojf"]
+    uwmqm3: ["f1xt971f", "fyp1ehy"],
+    z189sj: ["f1lehhk2", "f1auf7rb"]
   },
   input: {
-    uwmqm3: ["feaks35", "fzcul7f"],
+    uwmqm3: ["f7mios5", "f1fa2o7t"],
     z189sj: ["fhxju0i", "f1cnd47f"],
     Boqhc8c: "f18izjht",
     B8uat0v: "fcoa6sg"
+  },
+  unfocusedNoContentAfter: {
+    z189sj: ["fhxju0i", "f1cnd47f"]
   }
 }, {
-  d: [".fjuset5{column-gap:0;}", ".f1xzfw5u{max-width:468px;}", ".f1xer5qc{padding-left:var(--ctrl-token-SearchBox-1579, var(--semantic-token-SearchBox-1580, var(--spacingHorizontalSNudge)));}", ".f1vwfgzu{padding-right:var(--ctrl-token-SearchBox-1579, var(--semantic-token-SearchBox-1580, var(--spacingHorizontalSNudge)));}", ".f1rnmnj3{padding-right:var(--ctrl-token-SearchBox-1581, var(--semantic-token-SearchBox-1582, var(--spacingHorizontalSNudge)));}", ".frcaq29{padding-left:var(--ctrl-token-SearchBox-1581, var(--semantic-token-SearchBox-1582, var(--spacingHorizontalSNudge)));}", ".f1ga1vvr{padding-left:var(--ctrl-token-SearchBox-1583, var(--semantic-token-SearchBox-1584, var(--spacingHorizontalS)));}", ".f577s3h{padding-right:var(--ctrl-token-SearchBox-1583, var(--semantic-token-SearchBox-1584, var(--spacingHorizontalS)));}", ".f14olgbc{padding-right:var(--ctrl-token-SearchBox-1585, var(--semantic-token-SearchBox-1586, var(--spacingHorizontalS)));}", ".f4yg0v8{padding-left:var(--ctrl-token-SearchBox-1585, var(--semantic-token-SearchBox-1586, var(--spacingHorizontalS)));}", ".fzbt8k8{padding-left:var(--ctrl-token-SearchBox-1587, var(--semantic-token-SearchBox-1588, var(--spacingHorizontalMNudge)));}", ".fesbjht{padding-right:var(--ctrl-token-SearchBox-1587, var(--semantic-token-SearchBox-1588, var(--spacingHorizontalMNudge)));}", ".f11w4lch{padding-right:var(--ctrl-token-SearchBox-1589, var(--semantic-token-SearchBox-1590, var(--spacingHorizontalMNudge)));}", ".f1kw5ojf{padding-left:var(--ctrl-token-SearchBox-1589, var(--semantic-token-SearchBox-1590, var(--spacingHorizontalMNudge)));}", ".feaks35{padding-left:var(--ctrl-token-SearchBox-1591, var(--semantic-token-SearchBox-1592, var(--spacingHorizontalSNudge)));}", ".fzcul7f{padding-right:var(--ctrl-token-SearchBox-1591, var(--semantic-token-SearchBox-1592, var(--spacingHorizontalSNudge)));}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f18izjht::-webkit-search-decoration{display:none;}", ".fcoa6sg::-webkit-search-cancel-button{display:none;}"]
+  d: [".fjuset5{column-gap:0;}", ".f1xzfw5u{max-width:468px;}", ".f1yo5xhq{padding-left:var(--1579, var(--1580, var(--spacingHorizontalSNudge)));}", ".f11u2m66{padding-right:var(--1579, var(--1580, var(--spacingHorizontalSNudge)));}", ".f1czefwt{padding-right:var(--1581, var(--1582, var(--spacingHorizontalSNudge)));}", ".fyz03hb{padding-left:var(--1581, var(--1582, var(--spacingHorizontalSNudge)));}", ".fy4mc4l{padding-left:var(--1583, var(--1584, var(--spacingHorizontalS)));}", ".fqmi3k8{padding-right:var(--1583, var(--1584, var(--spacingHorizontalS)));}", ".f1cper36{padding-right:var(--1585, var(--1586, var(--spacingHorizontalS)));}", ".f1y5uc1l{padding-left:var(--1585, var(--1586, var(--spacingHorizontalS)));}", ".f1xt971f{padding-left:var(--1587, var(--1588, var(--spacingHorizontalMNudge)));}", ".fyp1ehy{padding-right:var(--1587, var(--1588, var(--spacingHorizontalMNudge)));}", ".f1lehhk2{padding-right:var(--1589, var(--1590, var(--spacingHorizontalMNudge)));}", ".f1auf7rb{padding-left:var(--1589, var(--1590, var(--spacingHorizontalMNudge)));}", ".f7mios5{padding-left:var(--1591, var(--1592, var(--spacingHorizontalSNudge)));}", ".f1fa2o7t{padding-right:var(--1591, var(--1592, var(--spacingHorizontalSNudge)));}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f18izjht::-webkit-search-decoration{display:none;}", ".fcoa6sg::-webkit-search-cancel-button{display:none;}"]
 });
+const useInputStyles = /*#__PURE__*/__styles({
+  small: {
+    z189sj: ["fdw0yi8", "fk8j09s"]
+  },
+  medium: {
+    z189sj: ["f1vdfbxk", "f1f5gg8d"]
+  },
+  large: {
+    z189sj: ["f11gcy0p", "f1ng84yb"]
+  }
+}, {
+  d: [".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}"]
+});
 const useContentAfterStyles = /*#__PURE__*/__styles({
   contentAfter: {
-    uwmqm3: ["f1miqibf", "flcjzay"],
-    i8kkvl: "flgljck"
+    uwmqm3: ["f1f19u1p", "fkbs4c"],
+    i8kkvl: "fl7yw8l"
   },
@@ -53,11 +69,12 @@ rest: {
     Bqenvij: "fniina8",
-    a9b677: "f3tsq5r"
+    a9b677: "f3tsq5r",
+    uwmqm3: ["f1cnd47f", "fhxju0i"]
   }
 }, {
-  d: [".f1miqibf{padding-left:var(--ctrl-token-SearchBox-1593, var(--semantic-token-SearchBox-1594, var(--spacingHorizontalM)));}", ".flcjzay{padding-right:var(--ctrl-token-SearchBox-1593, var(--semantic-token-SearchBox-1594, var(--spacingHorizontalM)));}", ".flgljck{column-gap:var(--ctrl-token-SearchBox-1595, var(--semantic-token-SearchBox-1596, var(--spacingHorizontalXS)));}", ".fk73vx1{opacity:0;}", ".fniina8{height:0;}", ".f3tsq5r{width:0;}"]
+  d: [".f1f19u1p{padding-left:var(--1593, var(--1594, var(--spacingHorizontalM)));}", ".fkbs4c{padding-right:var(--1593, var(--1594, var(--spacingHorizontalM)));}", ".fl7yw8l{column-gap:var(--1595, var(--1596, var(--spacingHorizontalXS)));}", ".fk73vx1{opacity:0;}", ".fniina8{height:0;}", ".f3tsq5r{width:0;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}"]
 });
-const useDismissClassName = /*#__PURE__*/__resetStyles("r1ogwnmi", null, [".r1ogwnmi{box-sizing:border-box;color:var(--ctrl-token-SearchBox-1597, var(--semantic-token-SearchBox-1598, var(--colorNeutralForeground3)));display:flex;cursor:pointer;}", ".r1ogwnmi>svg{font-size:20px;}"]);
+const useDismissClassName = /*#__PURE__*/__resetStyles("r153di11", null, [".r153di11{box-sizing:border-box;color:var(--1597, var(--1598, var(--colorNeutralForeground3)));display:flex;cursor:pointer;}", ".r153di11>svg{font-size:20px;}"]);
 const useDismissStyles = /*#__PURE__*/__styles({
   disabled: {
-    sj55zd: "f4be25j"
+    sj55zd: "f18ixbzt"
   },
@@ -72,3 +89,3 @@ small: {
 }, {
-  d: [".f4be25j{color:var(--ctrl-token-SearchBox-1599, var(--semantic-token-SearchBox-1600, var(--colorNeutralForegroundDisabled)));}", ".f3qv9w>svg{font-size:16px;}", ".f16u2scb>svg{font-size:24px;}"]
+  d: [".f18ixbzt{color:var(--1599, var(--1600, var(--colorNeutralForegroundDisabled)));}", ".f3qv9w>svg{font-size:16px;}", ".f16u2scb>svg{font-size:24px;}"]
 });
@@ -87,7 +104,8 @@ /**
   const rootStyles = useRootStyles();
+  const inputStyles = useInputStyles();
   const contentAfterStyles = useContentAfterStyles();
   const dismissClassName = useDismissClassName();
   const dismissStyles = useDismissStyles();
-  state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], state.root.className);
-  state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, state.input.className);
+  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) {
@@ -94,0 +112,0 @@ state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);

package.json

 {
   "name": "@fluentui/react-search",
-  "version": "0.0.0-nightly-20240816-2133.1",
+  "version": "0.0.0-nightly-20240819-2052.1",
   "description": "Search input for Fluent UI v9",
@@ -28,4 +28,4 @@ "main": "lib-commonjs/index.js",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20240816-2133.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240816-2133.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20240819-2052.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240819-2052.1",
     "@fluentui/scripts-api-extractor": "*",
@@ -36,6 +36,6 @@ "@fluentui/scripts-tasks": "*"
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-input": "0.0.0-nightly-20240816-2133.1",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240816-2133.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20240816-2133.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20240816-2133.1",
+    "@fluentui/react-input": "0.0.0-nightly-20240819-2052.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240819-2052.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20240819-2052.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20240819-2052.1",
     "@griffel/react": "^1.5.22",
@@ -42,0 +42,0 @@ "@swc/helpers": "^0.5.1"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

119493

increased by1.84%

Lines of code

747

increased by9.69%

Dependency changes

• + Added@fluentui/keyboard-keys@0.0.0-nightly-20240819-2052.1(transitive)

• + Added@fluentui/react-context-selector@0.0.0-nightly-20240819-2052.1(transitive)

• + Added@fluentui/react-field@0.0.0-nightly-20240819-2052.1(transitive)

• + Added@fluentui/react-input@0.0.0-nightly-20240819-2052.1(transitive)

• + Added@fluentui/react-jsx-runtime@0.0.0-nightly-20240819-2052.1(transitive)

• + Added@fluentui/react-label@0.0.0-nightly-20240819-2052.1(transitive)

• + Added@fluentui/react-shared-contexts@0.0.0-nightly-20240819-2052.1(transitive)

• + Added@fluentui/react-theme@0.0.0-nightly-20240819-2052.1(transitive)

• + Added@fluentui/react-utilities@0.0.0-nightly-20240819-2052.1(transitive)

• + Added@fluentui/tokens@0.0.0-nightly-20240819-2052.1(transitive)

• - Removed@fluentui/keyboard-keys@0.0.0-nightly-20240816-2133.1(transitive)

• - Removed@fluentui/react-context-selector@0.0.0-nightly-20240816-2133.1(transitive)

• - Removed@fluentui/react-field@0.0.0-nightly-20240816-2133.1(transitive)

• - Removed@fluentui/react-input@0.0.0-nightly-20240816-2133.1(transitive)

• - Removed@fluentui/react-jsx-runtime@0.0.0-nightly-20240816-2133.1(transitive)

• - Removed@fluentui/react-label@0.0.0-nightly-20240816-2133.1(transitive)

• - Removed@fluentui/react-shared-contexts@0.0.0-nightly-20240816-2133.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightly-20240816-2133.1(transitive)

• - Removed@fluentui/react-utilities@0.0.0-nightly-20240816-2133.1(transitive)

• - Removed@fluentui/tokens@0.0.0-nightly-20240816-2133.1(transitive)

• Updated@fluentui/react-input@0.0.0-nightly-20240819-2052.1

• Updated@fluentui/react-jsx-runtime@0.0.0-nightly-20240819-2052.1

• Updated@fluentui/react-theme@0.0.0-nightly-20240819-2052.1

• Updated@fluentui/react-utilities@0.0.0-nightly-20240819-2052.1