@fluentui/react-search 0.0.0-nightly-20240819-2110.1 → 0.0.0-nightly-20240820-2210.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +30 -10
  2. package/lib/components/SearchBox/useSearchBox.js +10 -6
  3. package/lib/components/SearchBox/useSearchBox.js.map +1 -1
  4. package/lib/components/SearchBox/useSearchBoxStyles.styles.js +35 -17
  5. package/lib/components/SearchBox/useSearchBoxStyles.styles.js.map +1 -1
  6. package/lib-commonjs/components/SearchBox/useSearchBox.js +10 -6
  7. package/lib-commonjs/components/SearchBox/useSearchBox.js.map +1 -1
  8. package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.js +85 -43
  9. package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.js.map +1 -1
  10. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,23 +1,43 @@
1
1
  # Change Log - @fluentui/react-search
2
2
 
3
- This log was last generated on Mon, 19 Aug 2024 21:21:00 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 20 Aug 2024 22:14:54 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20240819-2110.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v0.0.0-nightly-20240819-2110.1)
7
+ ## [0.0.0-nightly-20240820-2210.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v0.0.0-nightly-20240820-2210.1)
8
8
 
9
- Mon, 19 Aug 2024 21:21:00 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.12..@fluentui/react-search_v0.0.0-nightly-20240819-2110.1)
9
+ Tue, 20 Aug 2024 22:14:54 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.14..@fluentui/react-search_v0.0.0-nightly-20240820-2210.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-input to v0.0.0-nightly-20240819-2110.1 ([commit](https://github.com/microsoft/fluentui/commit/99f7b9c0d9c2a4cb1f7dad43045108122895102e) by beachball)
16
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240819-2110.1 ([commit](https://github.com/microsoft/fluentui/commit/99f7b9c0d9c2a4cb1f7dad43045108122895102e) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20240819-2110.1 ([commit](https://github.com/microsoft/fluentui/commit/99f7b9c0d9c2a4cb1f7dad43045108122895102e) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20240819-2110.1 ([commit](https://github.com/microsoft/fluentui/commit/99f7b9c0d9c2a4cb1f7dad43045108122895102e) by beachball)
19
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20240819-2110.1 ([commit](https://github.com/microsoft/fluentui/commit/99f7b9c0d9c2a4cb1f7dad43045108122895102e) by beachball)
20
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240819-2110.1 ([commit](https://github.com/microsoft/fluentui/commit/99f7b9c0d9c2a4cb1f7dad43045108122895102e) by beachball)
15
+ - Bump @fluentui/react-input to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
19
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
20
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
21
+
22
+ ## [9.0.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.0.14)
23
+
24
+ Mon, 05 Aug 2024 22:33:04 GMT
25
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.13..@fluentui/react-search_v9.0.14)
26
+
27
+ ### Patches
28
+
29
+ - Bump @fluentui/react-input to v9.4.85 ([PR #32077](https://github.com/microsoft/fluentui/pull/32077) by beachball)
30
+
31
+ ## [9.0.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.0.13)
32
+
33
+ Tue, 30 Jul 2024 18:47:34 GMT
34
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.12..@fluentui/react-search_v9.0.13)
35
+
36
+ ### Patches
37
+
38
+ - fix: replace useEventCallback with useCallback for focus ([PR #32079](https://github.com/microsoft/fluentui/pull/32079) by vgenaev@gmail.com)
39
+ - fix: Expand hit target when there's no content after. ([PR #32114](https://github.com/microsoft/fluentui/pull/32114) by estebanmu@microsoft.com)
40
+ - Bump @fluentui/react-input to v9.4.84 ([PR #32157](https://github.com/microsoft/fluentui/pull/32157) by beachball)
21
41
 
22
42
  ## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.0.12)
23
43
 
package/lib/components/SearchBox/useSearchBox.js CHANGED
@@ -21,13 +21,17 @@ import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
21
21
  });
22
22
  // Tracks the focus of the component for the contentAfter and dismiss button
23
23
  const [focused, setFocused] = React.useState(false);
24
- const onFocus = useEventCallback(()=>{
24
+ const onFocus = React.useCallback(()=>{
25
25
  setFocused(true);
26
- });
27
- const onBlur = useEventCallback((ev)=>{
26
+ }, [
27
+ setFocused
28
+ ]);
29
+ const onBlur = React.useCallback((ev)=>{
28
30
  var _searchBoxRootRef_current;
29
31
  setFocused(!!((_searchBoxRootRef_current = searchBoxRootRef.current) === null || _searchBoxRootRef_current === void 0 ? void 0 : _searchBoxRootRef_current.contains(ev.relatedTarget)));
30
- });
32
+ }, [
33
+ setFocused
34
+ ]);
31
35
  const rootProps = slot.resolveShorthand(root);
32
36
  const handleDismissClick = useEventCallback((event)=>{
33
37
  var _props_onChange;
@@ -49,8 +53,8 @@ import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
49
53
  root: slot.always({
50
54
  ...rootProps,
51
55
  ref: useMergedRefs(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
52
- onFocus: useEventCallback(mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus)),
53
- onBlur: useEventCallback(mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur))
56
+ onFocus: mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus),
57
+ onBlur: mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur)
54
58
  }, {
55
59
  elementType: 'span'
56
60
  }),
package/lib/components/SearchBox/useSearchBox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSearchBox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n isResolvedShorthand,\n mergeCallbacks,\n slot,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useInput_unstable } from '@fluentui/react-input';\nimport { DismissRegular, SearchRegular } from '@fluentui/react-icons';\nimport type { ExtractSlotProps } from '@fluentui/react-utilities';\nimport type { SearchBoxSlots, SearchBoxProps, SearchBoxState } from './SearchBox.types';\n\n/**\n * Create the state required to render SearchBox.\n *\n * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,\n * before being passed to renderSearchBox_unstable.\n *\n * @param props - props from this instance of SearchBox\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLInputElement>): SearchBoxState => {\n const {\n size = 'medium',\n disabled = false,\n root,\n contentBefore,\n dismiss,\n contentAfter,\n value,\n defaultValue,\n ...inputProps\n } = props;\n\n const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n const [internalValue, setInternalValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: '',\n });\n\n // Tracks the focus of the component for the contentAfter and dismiss button\n const [focused, setFocused] = React.useState(false);\n\n const onFocus = useEventCallback(() => {\n setFocused(true);\n });\n\n const onBlur: React.FocusEventHandler<HTMLSpanElement> = useEventCallback(ev => {\n setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n });\n\n const rootProps = slot.resolveShorthand(root);\n\n const handleDismissClick = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {\n if (isResolvedShorthand(dismiss)) {\n dismiss.onClick?.(event);\n }\n const newValue = '';\n setInternalValue(newValue);\n props.onChange?.(event, { value: newValue });\n });\n\n const inputState = useInput_unstable(\n {\n type: 'search',\n disabled,\n size,\n value: internalValue,\n root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n {\n ...rootProps,\n ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n onFocus: useEventCallback(mergeCallbacks(rootProps?.onFocus, onFocus)),\n onBlur: useEventCallback(mergeCallbacks(rootProps?.onBlur, onBlur)),\n },\n {\n elementType: 'span',\n },\n ),\n contentBefore: slot.optional(contentBefore, {\n renderByDefault: true,\n defaultProps: {\n children: <SearchRegular />,\n },\n elementType: 'span',\n }),\n contentAfter: slot.optional(contentAfter, {\n renderByDefault: true,\n elementType: 'span',\n }),\n ...inputProps,\n onChange: useEventCallback(ev => {\n const newValue = ev.target.value;\n props.onChange?.(ev, { value: newValue });\n setInternalValue(newValue);\n }),\n },\n useMergedRefs(searchBoxRef, ref),\n );\n\n const state: SearchBoxState = {\n ...inputState,\n components: {\n ...inputState.components,\n dismiss: 'span',\n },\n dismiss: slot.optional(dismiss, {\n defaultProps: {\n children: <DismissRegular />,\n role: 'button',\n 'aria-label': 'clear',\n tabIndex: -1,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled,\n focused,\n size,\n };\n\n if (state.dismiss) {\n state.dismiss.onClick = handleDismissClick;\n }\n\n return state;\n};\n"],"names":["React","isResolvedShorthand","mergeCallbacks","slot","useControllableState","useEventCallback","useMergedRefs","useInput_unstable","DismissRegular","SearchRegular","useSearchBox_unstable","props","ref","size","disabled","root","contentBefore","dismiss","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","state","defaultState","initialState","focused","setFocused","useState","onFocus","onBlur","ev","current","contains","relatedTarget","rootProps","resolveShorthand","handleDismissClick","event","onClick","newValue","onChange","inputState","type","always","elementType","optional","renderByDefault","defaultProps","children","target","components","role","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["useSearchBox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n isResolvedShorthand,\n mergeCallbacks,\n slot,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useInput_unstable } from '@fluentui/react-input';\nimport { DismissRegular, SearchRegular } from '@fluentui/react-icons';\nimport type { ExtractSlotProps } from '@fluentui/react-utilities';\nimport type { SearchBoxSlots, SearchBoxProps, SearchBoxState } from './SearchBox.types';\n\n/**\n * Create the state required to render SearchBox.\n *\n * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,\n * before being passed to renderSearchBox_unstable.\n *\n * @param props - props from this instance of SearchBox\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLInputElement>): SearchBoxState => {\n const {\n size = 'medium',\n disabled = false,\n root,\n contentBefore,\n dismiss,\n contentAfter,\n value,\n defaultValue,\n ...inputProps\n } = props;\n\n const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n const [internalValue, setInternalValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: '',\n });\n\n // Tracks the focus of the component for the contentAfter and dismiss button\n const [focused, setFocused] = React.useState(false);\n\n const onFocus = React.useCallback(() => {\n setFocused(true);\n }, [setFocused]);\n\n const onBlur: React.FocusEventHandler<HTMLSpanElement> = React.useCallback(\n ev => {\n setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n },\n [setFocused],\n );\n\n const rootProps = slot.resolveShorthand(root);\n\n const handleDismissClick = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {\n if (isResolvedShorthand(dismiss)) {\n dismiss.onClick?.(event);\n }\n const newValue = '';\n setInternalValue(newValue);\n props.onChange?.(event, { value: newValue });\n });\n\n const inputState = useInput_unstable(\n {\n type: 'search',\n disabled,\n size,\n value: internalValue,\n root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n {\n ...rootProps,\n ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n onFocus: mergeCallbacks(rootProps?.onFocus, onFocus),\n onBlur: mergeCallbacks(rootProps?.onBlur, onBlur),\n },\n {\n elementType: 'span',\n },\n ),\n contentBefore: slot.optional(contentBefore, {\n renderByDefault: true,\n defaultProps: {\n children: <SearchRegular />,\n },\n elementType: 'span',\n }),\n contentAfter: slot.optional(contentAfter, {\n renderByDefault: true,\n elementType: 'span',\n }),\n ...inputProps,\n onChange: useEventCallback(ev => {\n const newValue = ev.target.value;\n props.onChange?.(ev, { value: newValue });\n setInternalValue(newValue);\n }),\n },\n useMergedRefs(searchBoxRef, ref),\n );\n\n const state: SearchBoxState = {\n ...inputState,\n components: {\n ...inputState.components,\n dismiss: 'span',\n },\n dismiss: slot.optional(dismiss, {\n defaultProps: {\n children: <DismissRegular />,\n role: 'button',\n 'aria-label': 'clear',\n tabIndex: -1,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled,\n focused,\n size,\n };\n\n if (state.dismiss) {\n state.dismiss.onClick = handleDismissClick;\n }\n\n return state;\n};\n"],"names":["React","isResolvedShorthand","mergeCallbacks","slot","useControllableState","useEventCallback","useMergedRefs","useInput_unstable","DismissRegular","SearchRegular","useSearchBox_unstable","props","ref","size","disabled","root","contentBefore","dismiss","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","state","defaultState","initialState","focused","setFocused","useState","onFocus","useCallback","onBlur","ev","current","contains","relatedTarget","rootProps","resolveShorthand","handleDismissClick","event","onClick","newValue","onChange","inputState","type","always","elementType","optional","renderByDefault","defaultProps","children","target","components","role","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib/components/SearchBox/useSearchBoxStyles.styles.js CHANGED
@@ -15,47 +15,64 @@ const useRootStyles = /*#__PURE__*/__styles({
15
15
  small: {
16
16
  i8kkvl: "fjuset5",
17
17
  B2u0y6b: "f1xzfw5u",
18
- uwmqm3: ["f1xer5qc", "f1vwfgzu"],
19
- z189sj: ["f1rnmnj3", "frcaq29"]
18
+ uwmqm3: ["f1yo5xhq", "f11u2m66"],
19
+ z189sj: ["f1czefwt", "fyz03hb"]
20
20
  },
21
21
  medium: {
22
22
  i8kkvl: "fjuset5",
23
23
  B2u0y6b: "f1xzfw5u",
24
- uwmqm3: ["f1ga1vvr", "f577s3h"],
25
- z189sj: ["f14olgbc", "f4yg0v8"]
24
+ uwmqm3: ["fy4mc4l", "fqmi3k8"],
25
+ z189sj: ["f1cper36", "f1y5uc1l"]
26
26
  },
27
27
  large: {
28
28
  i8kkvl: "fjuset5",
29
29
  B2u0y6b: "f1xzfw5u",
30
- uwmqm3: ["fzbt8k8", "fesbjht"],
31
- z189sj: ["f11w4lch", "f1kw5ojf"]
30
+ uwmqm3: ["f1xt971f", "fyp1ehy"],
31
+ z189sj: ["f1lehhk2", "f1auf7rb"]
32
32
  },
33
33
  input: {
34
- uwmqm3: ["feaks35", "fzcul7f"],
34
+ uwmqm3: ["f7mios5", "f1fa2o7t"],
35
35
  z189sj: ["fhxju0i", "f1cnd47f"],
36
36
  Boqhc8c: "f18izjht",
37
37
  B8uat0v: "fcoa6sg"
38
+ },
39
+ unfocusedNoContentAfter: {
40
+ z189sj: ["fhxju0i", "f1cnd47f"]
41
+ }
42
+ }, {
43
+ 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;}"]
44
+ });
45
+ const useInputStyles = /*#__PURE__*/__styles({
46
+ small: {
47
+ z189sj: ["fdw0yi8", "fk8j09s"]
48
+ },
49
+ medium: {
50
+ z189sj: ["f1vdfbxk", "f1f5gg8d"]
51
+ },
52
+ large: {
53
+ z189sj: ["f11gcy0p", "f1ng84yb"]
38
54
  }
39
55
  }, {
40
- 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;}"]
56
+ 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);}"]
41
57
  });
42
58
  const useContentAfterStyles = /*#__PURE__*/__styles({
43
59
  contentAfter: {
44
- uwmqm3: ["f1miqibf", "flcjzay"],
45
- i8kkvl: "flgljck"
60
+ uwmqm3: ["f1f19u1p", "fkbs4c"],
61
+ i8kkvl: "fl7yw8l"
46
62
  },
47
63
  rest: {
48
64
  abs64n: "fk73vx1",
49
65
  Bqenvij: "fniina8",
50
- a9b677: "f3tsq5r"
66
+ a9b677: "f3tsq5r",
67
+ uwmqm3: ["f1cnd47f", "fhxju0i"]
51
68
  }
52
69
  }, {
53
- 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;}"]
70
+ 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;}"]
54
71
  });
55
- 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;}"]);
72
+ 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;}"]);
56
73
  const useDismissStyles = /*#__PURE__*/__styles({
57
74
  disabled: {
58
- sj55zd: "f4be25j"
75
+ sj55zd: "f18ixbzt"
59
76
  },
60
77
  small: {
61
78
  Duoase: "f3qv9w"
@@ -65,7 +82,7 @@ const useDismissStyles = /*#__PURE__*/__styles({
65
82
  Duoase: "f16u2scb"
66
83
  }
67
84
  }, {
68
- 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;}"]
85
+ d: [".f18ixbzt{color:var(--1599, var(--1600, var(--colorNeutralForegroundDisabled)));}", ".f3qv9w>svg{font-size:16px;}", ".f16u2scb>svg{font-size:24px;}"]
69
86
  });
70
87
  /**
71
88
  * Apply styling to the SearchBox slots based on the state
@@ -79,11 +96,12 @@ export const useSearchBoxStyles_unstable = state => {
79
96
  size
80
97
  } = state;
81
98
  const rootStyles = useRootStyles();
99
+ const inputStyles = useInputStyles();
82
100
  const contentAfterStyles = useContentAfterStyles();
83
101
  const dismissClassName = useDismissClassName();
84
102
  const dismissStyles = useDismissStyles();
85
- state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], state.root.className);
86
- state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, state.input.className);
103
+ state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
104
+ state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
87
105
  if (state.dismiss) {
88
106
  state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
89
107
  }
package/lib/components/SearchBox/useSearchBoxStyles.styles.js.map CHANGED
@@ -1 +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","d","useContentAfterStyles","rest","abs64n","Bqenvij","a9b677","useDismissClassName","useDismissStyles","disabled","sj55zd","Duoase","useSearchBoxStyles_unstable","state","focused","size","rootStyles","contentAfterStyles","dismissClassName","dismissStyles","className"],"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\nexport const searchBoxClassNames = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--ctrl-token-SearchBox-1579, var(--semantic-token-SearchBox-1580, ${tokens.spacingHorizontalSNudge}))`,\n paddingRight: `var(--ctrl-token-SearchBox-1581, var(--semantic-token-SearchBox-1582, ${tokens.spacingHorizontalSNudge}))`\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--ctrl-token-SearchBox-1583, var(--semantic-token-SearchBox-1584, ${tokens.spacingHorizontalS}))`,\n paddingRight: `var(--ctrl-token-SearchBox-1585, var(--semantic-token-SearchBox-1586, ${tokens.spacingHorizontalS}))`\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--ctrl-token-SearchBox-1587, var(--semantic-token-SearchBox-1588, ${tokens.spacingHorizontalMNudge}))`,\n paddingRight: `var(--ctrl-token-SearchBox-1589, var(--semantic-token-SearchBox-1590, ${tokens.spacingHorizontalMNudge}))`\n },\n input: {\n paddingLeft: `var(--ctrl-token-SearchBox-1591, var(--semantic-token-SearchBox-1592, ${tokens.spacingHorizontalSNudge}))`,\n paddingRight: 0,\n // removes the WebKit pseudoelement styling\n '::-webkit-search-decoration': {\n display: 'none'\n },\n '::-webkit-search-cancel-button': {\n display: 'none'\n }\n }\n});\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: `var(--ctrl-token-SearchBox-1593, var(--semantic-token-SearchBox-1594, ${tokens.spacingHorizontalM}))`,\n columnGap: `var(--ctrl-token-SearchBox-1595, var(--semantic-token-SearchBox-1596, ${tokens.spacingHorizontalXS}))`\n },\n rest: {\n opacity: 0,\n height: 0,\n width: 0\n }\n});\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: `var(--ctrl-token-SearchBox-1597, var(--semantic-token-SearchBox-1598, ${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: `var(--ctrl-token-SearchBox-1599, var(--semantic-token-SearchBox-1600, ${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 contentAfterStyles = useContentAfterStyles();\n const dismissClassName = useDismissClassName();\n const dismissStyles = useDismissStyles();\n state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], state.root.className);\n state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, state.input.className);\n if (state.dismiss) {\n state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);\n }\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);\n } else if (state.dismiss) {\n state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);\n }\n useInputStyles_unstable(state);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
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","abs64n","Bqenvij","a9b677","useDismissClassName","useDismissStyles","disabled","sj55zd","Duoase","useSearchBoxStyles_unstable","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className"],"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\nexport const searchBoxClassNames = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--1579, var(--1580, ${tokens.spacingHorizontalSNudge}))`,\n paddingRight: `var(--1581, var(--1582, ${tokens.spacingHorizontalSNudge}))`\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--1583, var(--1584, ${tokens.spacingHorizontalS}))`,\n paddingRight: `var(--1585, var(--1586, ${tokens.spacingHorizontalS}))`\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--1587, var(--1588, ${tokens.spacingHorizontalMNudge}))`,\n paddingRight: `var(--1589, var(--1590, ${tokens.spacingHorizontalMNudge}))`\n },\n input: {\n paddingLeft: `var(--1591, var(--1592, ${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: `var(--1593, var(--1594, ${tokens.spacingHorizontalM}))`,\n columnGap: `var(--1595, var(--1596, ${tokens.spacingHorizontalXS}))`\n },\n rest: {\n opacity: 0,\n height: 0,\n width: 0,\n paddingLeft: 0\n }\n});\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: `var(--1597, var(--1598, ${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: `var(--1599, var(--1600, ${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":"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","ignoreList":[]}
package/lib-commonjs/components/SearchBox/useSearchBox.js CHANGED
@@ -24,13 +24,17 @@ const useSearchBox_unstable = (props, ref)=>{
24
24
  });
25
25
  // Tracks the focus of the component for the contentAfter and dismiss button
26
26
  const [focused, setFocused] = _react.useState(false);
27
- const onFocus = (0, _reactutilities.useEventCallback)(()=>{
27
+ const onFocus = _react.useCallback(()=>{
28
28
  setFocused(true);
29
- });
30
- const onBlur = (0, _reactutilities.useEventCallback)((ev)=>{
29
+ }, [
30
+ setFocused
31
+ ]);
32
+ const onBlur = _react.useCallback((ev)=>{
31
33
  var _searchBoxRootRef_current;
32
34
  setFocused(!!((_searchBoxRootRef_current = searchBoxRootRef.current) === null || _searchBoxRootRef_current === void 0 ? void 0 : _searchBoxRootRef_current.contains(ev.relatedTarget)));
33
- });
35
+ }, [
36
+ setFocused
37
+ ]);
34
38
  const rootProps = _reactutilities.slot.resolveShorthand(root);
35
39
  const handleDismissClick = (0, _reactutilities.useEventCallback)((event)=>{
36
40
  var _props_onChange;
@@ -52,8 +56,8 @@ const useSearchBox_unstable = (props, ref)=>{
52
56
  root: _reactutilities.slot.always({
53
57
  ...rootProps,
54
58
  ref: (0, _reactutilities.useMergedRefs)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
55
- onFocus: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus)),
56
- onBlur: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur))
59
+ onFocus: (0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus),
60
+ onBlur: (0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur)
57
61
  }, {
58
62
  elementType: 'span'
59
63
  }),
package/lib-commonjs/components/SearchBox/useSearchBox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSearchBox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n isResolvedShorthand,\n mergeCallbacks,\n slot,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useInput_unstable } from '@fluentui/react-input';\nimport { DismissRegular, SearchRegular } from '@fluentui/react-icons';\nimport type { ExtractSlotProps } from '@fluentui/react-utilities';\nimport type { SearchBoxSlots, SearchBoxProps, SearchBoxState } from './SearchBox.types';\n\n/**\n * Create the state required to render SearchBox.\n *\n * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,\n * before being passed to renderSearchBox_unstable.\n *\n * @param props - props from this instance of SearchBox\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLInputElement>): SearchBoxState => {\n const {\n size = 'medium',\n disabled = false,\n root,\n contentBefore,\n dismiss,\n contentAfter,\n value,\n defaultValue,\n ...inputProps\n } = props;\n\n const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n const [internalValue, setInternalValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: '',\n });\n\n // Tracks the focus of the component for the contentAfter and dismiss button\n const [focused, setFocused] = React.useState(false);\n\n const onFocus = useEventCallback(() => {\n setFocused(true);\n });\n\n const onBlur: React.FocusEventHandler<HTMLSpanElement> = useEventCallback(ev => {\n setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n });\n\n const rootProps = slot.resolveShorthand(root);\n\n const handleDismissClick = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {\n if (isResolvedShorthand(dismiss)) {\n dismiss.onClick?.(event);\n }\n const newValue = '';\n setInternalValue(newValue);\n props.onChange?.(event, { value: newValue });\n });\n\n const inputState = useInput_unstable(\n {\n type: 'search',\n disabled,\n size,\n value: internalValue,\n root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n {\n ...rootProps,\n ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n onFocus: useEventCallback(mergeCallbacks(rootProps?.onFocus, onFocus)),\n onBlur: useEventCallback(mergeCallbacks(rootProps?.onBlur, onBlur)),\n },\n {\n elementType: 'span',\n },\n ),\n contentBefore: slot.optional(contentBefore, {\n renderByDefault: true,\n defaultProps: {\n children: <SearchRegular />,\n },\n elementType: 'span',\n }),\n contentAfter: slot.optional(contentAfter, {\n renderByDefault: true,\n elementType: 'span',\n }),\n ...inputProps,\n onChange: useEventCallback(ev => {\n const newValue = ev.target.value;\n props.onChange?.(ev, { value: newValue });\n setInternalValue(newValue);\n }),\n },\n useMergedRefs(searchBoxRef, ref),\n );\n\n const state: SearchBoxState = {\n ...inputState,\n components: {\n ...inputState.components,\n dismiss: 'span',\n },\n dismiss: slot.optional(dismiss, {\n defaultProps: {\n children: <DismissRegular />,\n role: 'button',\n 'aria-label': 'clear',\n tabIndex: -1,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled,\n focused,\n size,\n };\n\n if (state.dismiss) {\n state.dismiss.onClick = handleDismissClick;\n }\n\n return state;\n};\n"],"names":["useSearchBox_unstable","props","ref","size","disabled","root","contentBefore","dismiss","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","React","useRef","searchBoxRef","internalValue","setInternalValue","useControllableState","state","defaultState","initialState","focused","setFocused","useState","onFocus","useEventCallback","onBlur","ev","current","contains","relatedTarget","rootProps","slot","resolveShorthand","handleDismissClick","event","isResolvedShorthand","onClick","newValue","onChange","inputState","useInput_unstable","type","always","useMergedRefs","mergeCallbacks","elementType","optional","renderByDefault","defaultProps","children","createElement","SearchRegular","target","components","DismissRegular","role","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["useSearchBox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n isResolvedShorthand,\n mergeCallbacks,\n slot,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useInput_unstable } from '@fluentui/react-input';\nimport { DismissRegular, SearchRegular } from '@fluentui/react-icons';\nimport type { ExtractSlotProps } from '@fluentui/react-utilities';\nimport type { SearchBoxSlots, SearchBoxProps, SearchBoxState } from './SearchBox.types';\n\n/**\n * Create the state required to render SearchBox.\n *\n * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,\n * before being passed to renderSearchBox_unstable.\n *\n * @param props - props from this instance of SearchBox\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLInputElement>): SearchBoxState => {\n const {\n size = 'medium',\n disabled = false,\n root,\n contentBefore,\n dismiss,\n contentAfter,\n value,\n defaultValue,\n ...inputProps\n } = props;\n\n const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n const [internalValue, setInternalValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: '',\n });\n\n // Tracks the focus of the component for the contentAfter and dismiss button\n const [focused, setFocused] = React.useState(false);\n\n const onFocus = React.useCallback(() => {\n setFocused(true);\n }, [setFocused]);\n\n const onBlur: React.FocusEventHandler<HTMLSpanElement> = React.useCallback(\n ev => {\n setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n },\n [setFocused],\n );\n\n const rootProps = slot.resolveShorthand(root);\n\n const handleDismissClick = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {\n if (isResolvedShorthand(dismiss)) {\n dismiss.onClick?.(event);\n }\n const newValue = '';\n setInternalValue(newValue);\n props.onChange?.(event, { value: newValue });\n });\n\n const inputState = useInput_unstable(\n {\n type: 'search',\n disabled,\n size,\n value: internalValue,\n root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n {\n ...rootProps,\n ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n onFocus: mergeCallbacks(rootProps?.onFocus, onFocus),\n onBlur: mergeCallbacks(rootProps?.onBlur, onBlur),\n },\n {\n elementType: 'span',\n },\n ),\n contentBefore: slot.optional(contentBefore, {\n renderByDefault: true,\n defaultProps: {\n children: <SearchRegular />,\n },\n elementType: 'span',\n }),\n contentAfter: slot.optional(contentAfter, {\n renderByDefault: true,\n elementType: 'span',\n }),\n ...inputProps,\n onChange: useEventCallback(ev => {\n const newValue = ev.target.value;\n props.onChange?.(ev, { value: newValue });\n setInternalValue(newValue);\n }),\n },\n useMergedRefs(searchBoxRef, ref),\n );\n\n const state: SearchBoxState = {\n ...inputState,\n components: {\n ...inputState.components,\n dismiss: 'span',\n },\n dismiss: slot.optional(dismiss, {\n defaultProps: {\n children: <DismissRegular />,\n role: 'button',\n 'aria-label': 'clear',\n tabIndex: -1,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled,\n focused,\n size,\n };\n\n if (state.dismiss) {\n state.dismiss.onClick = handleDismissClick;\n }\n\n return state;\n};\n"],"names":["useSearchBox_unstable","props","ref","size","disabled","root","contentBefore","dismiss","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","React","useRef","searchBoxRef","internalValue","setInternalValue","useControllableState","state","defaultState","initialState","focused","setFocused","useState","onFocus","useCallback","onBlur","ev","current","contains","relatedTarget","rootProps","slot","resolveShorthand","handleDismissClick","useEventCallback","event","isResolvedShorthand","onClick","newValue","onChange","inputState","useInput_unstable","type","always","useMergedRefs","mergeCallbacks","elementType","optional","renderByDefault","defaultProps","children","createElement","SearchRegular","target","components","DismissRegular","role","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.js CHANGED
@@ -32,42 +32,42 @@ const searchBoxClassNames = {
32
32
  i8kkvl: "fjuset5",
33
33
  B2u0y6b: "f1xzfw5u",
34
34
  uwmqm3: [
35
- "f1xer5qc",
36
- "f1vwfgzu"
35
+ "f1yo5xhq",
36
+ "f11u2m66"
37
37
  ],
38
38
  z189sj: [
39
- "f1rnmnj3",
40
- "frcaq29"
39
+ "f1czefwt",
40
+ "fyz03hb"
41
41
  ]
42
42
  },
43
43
  medium: {
44
44
  i8kkvl: "fjuset5",
45
45
  B2u0y6b: "f1xzfw5u",
46
46
  uwmqm3: [
47
- "f1ga1vvr",
48
- "f577s3h"
47
+ "fy4mc4l",
48
+ "fqmi3k8"
49
49
  ],
50
50
  z189sj: [
51
- "f14olgbc",
52
- "f4yg0v8"
51
+ "f1cper36",
52
+ "f1y5uc1l"
53
53
  ]
54
54
  },
55
55
  large: {
56
56
  i8kkvl: "fjuset5",
57
57
  B2u0y6b: "f1xzfw5u",
58
58
  uwmqm3: [
59
- "fzbt8k8",
60
- "fesbjht"
59
+ "f1xt971f",
60
+ "fyp1ehy"
61
61
  ],
62
62
  z189sj: [
63
- "f11w4lch",
64
- "f1kw5ojf"
63
+ "f1lehhk2",
64
+ "f1auf7rb"
65
65
  ]
66
66
  },
67
67
  input: {
68
68
  uwmqm3: [
69
- "feaks35",
70
- "fzcul7f"
69
+ "f7mios5",
70
+ "f1fa2o7t"
71
71
  ],
72
72
  z189sj: [
73
73
  "fhxju0i",
@@ -75,61 +75,102 @@ const searchBoxClassNames = {
75
75
  ],
76
76
  Boqhc8c: "f18izjht",
77
77
  B8uat0v: "fcoa6sg"
78
+ },
79
+ unfocusedNoContentAfter: {
80
+ z189sj: [
81
+ "fhxju0i",
82
+ "f1cnd47f"
83
+ ]
78
84
  }
79
85
  }, {
80
86
  d: [
81
87
  ".fjuset5{column-gap:0;}",
82
88
  ".f1xzfw5u{max-width:468px;}",
83
- ".f1xer5qc{padding-left:var(--ctrl-token-SearchBox-1579, var(--semantic-token-SearchBox-1580, var(--spacingHorizontalSNudge)));}",
84
- ".f1vwfgzu{padding-right:var(--ctrl-token-SearchBox-1579, var(--semantic-token-SearchBox-1580, var(--spacingHorizontalSNudge)));}",
85
- ".f1rnmnj3{padding-right:var(--ctrl-token-SearchBox-1581, var(--semantic-token-SearchBox-1582, var(--spacingHorizontalSNudge)));}",
86
- ".frcaq29{padding-left:var(--ctrl-token-SearchBox-1581, var(--semantic-token-SearchBox-1582, var(--spacingHorizontalSNudge)));}",
87
- ".f1ga1vvr{padding-left:var(--ctrl-token-SearchBox-1583, var(--semantic-token-SearchBox-1584, var(--spacingHorizontalS)));}",
88
- ".f577s3h{padding-right:var(--ctrl-token-SearchBox-1583, var(--semantic-token-SearchBox-1584, var(--spacingHorizontalS)));}",
89
- ".f14olgbc{padding-right:var(--ctrl-token-SearchBox-1585, var(--semantic-token-SearchBox-1586, var(--spacingHorizontalS)));}",
90
- ".f4yg0v8{padding-left:var(--ctrl-token-SearchBox-1585, var(--semantic-token-SearchBox-1586, var(--spacingHorizontalS)));}",
91
- ".fzbt8k8{padding-left:var(--ctrl-token-SearchBox-1587, var(--semantic-token-SearchBox-1588, var(--spacingHorizontalMNudge)));}",
92
- ".fesbjht{padding-right:var(--ctrl-token-SearchBox-1587, var(--semantic-token-SearchBox-1588, var(--spacingHorizontalMNudge)));}",
93
- ".f11w4lch{padding-right:var(--ctrl-token-SearchBox-1589, var(--semantic-token-SearchBox-1590, var(--spacingHorizontalMNudge)));}",
94
- ".f1kw5ojf{padding-left:var(--ctrl-token-SearchBox-1589, var(--semantic-token-SearchBox-1590, var(--spacingHorizontalMNudge)));}",
95
- ".feaks35{padding-left:var(--ctrl-token-SearchBox-1591, var(--semantic-token-SearchBox-1592, var(--spacingHorizontalSNudge)));}",
96
- ".fzcul7f{padding-right:var(--ctrl-token-SearchBox-1591, var(--semantic-token-SearchBox-1592, var(--spacingHorizontalSNudge)));}",
89
+ ".f1yo5xhq{padding-left:var(--1579, var(--1580, var(--spacingHorizontalSNudge)));}",
90
+ ".f11u2m66{padding-right:var(--1579, var(--1580, var(--spacingHorizontalSNudge)));}",
91
+ ".f1czefwt{padding-right:var(--1581, var(--1582, var(--spacingHorizontalSNudge)));}",
92
+ ".fyz03hb{padding-left:var(--1581, var(--1582, var(--spacingHorizontalSNudge)));}",
93
+ ".fy4mc4l{padding-left:var(--1583, var(--1584, var(--spacingHorizontalS)));}",
94
+ ".fqmi3k8{padding-right:var(--1583, var(--1584, var(--spacingHorizontalS)));}",
95
+ ".f1cper36{padding-right:var(--1585, var(--1586, var(--spacingHorizontalS)));}",
96
+ ".f1y5uc1l{padding-left:var(--1585, var(--1586, var(--spacingHorizontalS)));}",
97
+ ".f1xt971f{padding-left:var(--1587, var(--1588, var(--spacingHorizontalMNudge)));}",
98
+ ".fyp1ehy{padding-right:var(--1587, var(--1588, var(--spacingHorizontalMNudge)));}",
99
+ ".f1lehhk2{padding-right:var(--1589, var(--1590, var(--spacingHorizontalMNudge)));}",
100
+ ".f1auf7rb{padding-left:var(--1589, var(--1590, var(--spacingHorizontalMNudge)));}",
101
+ ".f7mios5{padding-left:var(--1591, var(--1592, var(--spacingHorizontalSNudge)));}",
102
+ ".f1fa2o7t{padding-right:var(--1591, var(--1592, var(--spacingHorizontalSNudge)));}",
97
103
  ".fhxju0i{padding-right:0;}",
98
104
  ".f1cnd47f{padding-left:0;}",
99
105
  ".f18izjht::-webkit-search-decoration{display:none;}",
100
106
  ".fcoa6sg::-webkit-search-cancel-button{display:none;}"
101
107
  ]
102
108
  });
109
+ const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
110
+ small: {
111
+ z189sj: [
112
+ "fdw0yi8",
113
+ "fk8j09s"
114
+ ]
115
+ },
116
+ medium: {
117
+ z189sj: [
118
+ "f1vdfbxk",
119
+ "f1f5gg8d"
120
+ ]
121
+ },
122
+ large: {
123
+ z189sj: [
124
+ "f11gcy0p",
125
+ "f1ng84yb"
126
+ ]
127
+ }
128
+ }, {
129
+ d: [
130
+ ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
131
+ ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
132
+ ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
133
+ ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
134
+ ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}",
135
+ ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}"
136
+ ]
137
+ });
103
138
  const useContentAfterStyles = /*#__PURE__*/ (0, _react.__styles)({
104
139
  contentAfter: {
105
140
  uwmqm3: [
106
- "f1miqibf",
107
- "flcjzay"
141
+ "f1f19u1p",
142
+ "fkbs4c"
108
143
  ],
109
- i8kkvl: "flgljck"
144
+ i8kkvl: "fl7yw8l"
110
145
  },
111
146
  rest: {
112
147
  abs64n: "fk73vx1",
113
148
  Bqenvij: "fniina8",
114
- a9b677: "f3tsq5r"
149
+ a9b677: "f3tsq5r",
150
+ uwmqm3: [
151
+ "f1cnd47f",
152
+ "fhxju0i"
153
+ ]
115
154
  }
116
155
  }, {
117
156
  d: [
118
- ".f1miqibf{padding-left:var(--ctrl-token-SearchBox-1593, var(--semantic-token-SearchBox-1594, var(--spacingHorizontalM)));}",
119
- ".flcjzay{padding-right:var(--ctrl-token-SearchBox-1593, var(--semantic-token-SearchBox-1594, var(--spacingHorizontalM)));}",
120
- ".flgljck{column-gap:var(--ctrl-token-SearchBox-1595, var(--semantic-token-SearchBox-1596, var(--spacingHorizontalXS)));}",
157
+ ".f1f19u1p{padding-left:var(--1593, var(--1594, var(--spacingHorizontalM)));}",
158
+ ".fkbs4c{padding-right:var(--1593, var(--1594, var(--spacingHorizontalM)));}",
159
+ ".fl7yw8l{column-gap:var(--1595, var(--1596, var(--spacingHorizontalXS)));}",
121
160
  ".fk73vx1{opacity:0;}",
122
161
  ".fniina8{height:0;}",
123
- ".f3tsq5r{width:0;}"
162
+ ".f3tsq5r{width:0;}",
163
+ ".f1cnd47f{padding-left:0;}",
164
+ ".fhxju0i{padding-right:0;}"
124
165
  ]
125
166
  });
126
- const useDismissClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1ogwnmi", null, [
127
- ".r1ogwnmi{box-sizing:border-box;color:var(--ctrl-token-SearchBox-1597, var(--semantic-token-SearchBox-1598, var(--colorNeutralForeground3)));display:flex;cursor:pointer;}",
128
- ".r1ogwnmi>svg{font-size:20px;}"
167
+ const useDismissClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r153di11", null, [
168
+ ".r153di11{box-sizing:border-box;color:var(--1597, var(--1598, var(--colorNeutralForeground3)));display:flex;cursor:pointer;}",
169
+ ".r153di11>svg{font-size:20px;}"
129
170
  ]);
130
171
  const useDismissStyles = /*#__PURE__*/ (0, _react.__styles)({
131
172
  disabled: {
132
- sj55zd: "f4be25j"
173
+ sj55zd: "f18ixbzt"
133
174
  },
134
175
  small: {
135
176
  Duoase: "f3qv9w"
@@ -140,7 +181,7 @@ const useDismissStyles = /*#__PURE__*/ (0, _react.__styles)({
140
181
  }
141
182
  }, {
142
183
  d: [
143
- ".f4be25j{color:var(--ctrl-token-SearchBox-1599, var(--semantic-token-SearchBox-1600, var(--colorNeutralForegroundDisabled)));}",
184
+ ".f18ixbzt{color:var(--1599, var(--1600, var(--colorNeutralForegroundDisabled)));}",
144
185
  ".f3qv9w>svg{font-size:16px;}",
145
186
  ".f16u2scb>svg{font-size:24px;}"
146
187
  ]
@@ -149,11 +190,12 @@ const useSearchBoxStyles_unstable = (state)=>{
149
190
  'use no memo';
150
191
  const { disabled, focused, size } = state;
151
192
  const rootStyles = useRootStyles();
193
+ const inputStyles = useInputStyles();
152
194
  const contentAfterStyles = useContentAfterStyles();
153
195
  const dismissClassName = useDismissClassName();
154
196
  const dismissStyles = useDismissStyles();
155
- state.root.className = (0, _react.mergeClasses)(searchBoxClassNames.root, rootStyles[size], state.root.className);
156
- state.input.className = (0, _react.mergeClasses)(searchBoxClassNames.input, rootStyles.input, state.input.className);
197
+ state.root.className = (0, _react.mergeClasses)(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
198
+ state.input.className = (0, _react.mergeClasses)(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
157
199
  if (state.dismiss) {
158
200
  state.dismiss.className = (0, _react.mergeClasses)(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
159
201
  }
package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\nexport const searchBoxClassNames = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--ctrl-token-SearchBox-1579, var(--semantic-token-SearchBox-1580, ${tokens.spacingHorizontalSNudge}))`,\n paddingRight: `var(--ctrl-token-SearchBox-1581, var(--semantic-token-SearchBox-1582, ${tokens.spacingHorizontalSNudge}))`\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--ctrl-token-SearchBox-1583, var(--semantic-token-SearchBox-1584, ${tokens.spacingHorizontalS}))`,\n paddingRight: `var(--ctrl-token-SearchBox-1585, var(--semantic-token-SearchBox-1586, ${tokens.spacingHorizontalS}))`\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--ctrl-token-SearchBox-1587, var(--semantic-token-SearchBox-1588, ${tokens.spacingHorizontalMNudge}))`,\n paddingRight: `var(--ctrl-token-SearchBox-1589, var(--semantic-token-SearchBox-1590, ${tokens.spacingHorizontalMNudge}))`\n },\n input: {\n paddingLeft: `var(--ctrl-token-SearchBox-1591, var(--semantic-token-SearchBox-1592, ${tokens.spacingHorizontalSNudge}))`,\n paddingRight: 0,\n // removes the WebKit pseudoelement styling\n '::-webkit-search-decoration': {\n display: 'none'\n },\n '::-webkit-search-cancel-button': {\n display: 'none'\n }\n }\n});\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: `var(--ctrl-token-SearchBox-1593, var(--semantic-token-SearchBox-1594, ${tokens.spacingHorizontalM}))`,\n columnGap: `var(--ctrl-token-SearchBox-1595, var(--semantic-token-SearchBox-1596, ${tokens.spacingHorizontalXS}))`\n },\n rest: {\n opacity: 0,\n height: 0,\n width: 0\n }\n});\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: `var(--ctrl-token-SearchBox-1597, var(--semantic-token-SearchBox-1598, ${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: `var(--ctrl-token-SearchBox-1599, var(--semantic-token-SearchBox-1600, ${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 contentAfterStyles = useContentAfterStyles();\n const dismissClassName = useDismissClassName();\n const dismissStyles = useDismissStyles();\n state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], state.root.className);\n state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, state.input.className);\n if (state.dismiss) {\n state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);\n }\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);\n } else if (state.dismiss) {\n state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);\n }\n useInputStyles_unstable(state);\n return state;\n};\n"],"names":["searchBoxClassNames","useSearchBoxStyles_unstable","root","dismiss","contentAfter","contentBefore","input","useRootStyles","__styles","small","i8kkvl","B2u0y6b","uwmqm3","z189sj","medium","large","Boqhc8c","B8uat0v","d","useContentAfterStyles","rest","abs64n","Bqenvij","a9b677","useDismissClassName","__resetStyles","useDismissStyles","disabled","sj55zd","Duoase","state","focused","size","rootStyles","contentAfterStyles","dismissClassName","dismissStyles","className","mergeClasses","useInputStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,mBAAmB;eAAnBA;;IAkFIC,2BAA2B;eAA3BA;;;uBArFyC;4BAElB;AACjC,MAAMD,sBAAsB;IAC/BE,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,eAAe;IACfC,OAAO;AACX;AACA;;CAEA,GAAI,MAAMC,gBAAa,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,OAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA;QAAAJ,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAE,OAAA;QAAAL,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAP,OAAA;QAAAM,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAG,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AA+B1B,MAAMC,wBAAqB,WAAA,GAAGX,IAAAA,eAAA,EAAA;IAAAJ,cAAA;QAAAQ,QAAA;YAAA;YAAA;SAAA;QAAAF,QAAA;IAAA;IAAAU,MAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAL,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAW9B,MAAMM,sBAAmB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,MAAA;IAAA;IAAA;CAU3B;AACD,MAAMC,mBAAgB,WAAA,GAAGlB,IAAAA,eAAA,EAAA;IAAAmB,UAAA;QAAAC,QAAA;IAAA;IAAAnB,OAAA;QAAAoB,QAAA;IAAA;IAAAf,QAAA,CAAA;IAAAC,OAAA;QAAAc,QAAA;IAAA;AAAA,GAAA;IAAAX,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAoBd,MAAMjB,8BAA+B6B,CAAAA;IAC5C;IACA,MAAM,EAAEH,QAAQ,EAAEI,OAAO,EAAEC,IAAAA,EAAM,GAAGF;IACpC,MAAMG,aAAa1B;IACnB,MAAM2B,qBAAqBf;IAC3B,MAAMgB,mBAAmBX;IACzB,MAAMY,gBAAgBV;IACtBI,MAAM5B,IAAI,CAACmC,SAAS,GAAGC,IAAAA,mBAAY,EAACtC,oBAAoBE,IAAI,EAAE+B,UAAU,CAACD,KAAK,EAAEF,MAAM5B,IAAI,CAACmC,SAAS;IACpGP,MAAMxB,KAAK,CAAC+B,SAAS,GAAGC,IAAAA,mBAAY,EAACtC,oBAAoBM,KAAK,EAAE2B,WAAW3B,KAAK,EAAEwB,MAAMxB,KAAK,CAAC+B,SAAS;IACvG,IAAIP,MAAM3B,OAAO,EAAE;QACf2B,MAAM3B,OAAO,CAACkC,SAAS,GAAGC,IAAAA,mBAAY,EAACtC,oBAAoBG,OAAO,EAAEgC,kBAAkBR,YAAYS,cAAcT,QAAQ,EAAES,aAAa,CAACJ,KAAK,EAAEF,MAAM3B,OAAO,CAACkC,SAAS;IAC1K;IACA,IAAIP,MAAMzB,aAAa,EAAE;QACrByB,MAAMzB,aAAa,CAACgC,SAAS,GAAGC,IAAAA,mBAAY,EAACtC,oBAAoBK,aAAa,EAAEyB,MAAMzB,aAAa,CAACgC,SAAS;IACjH;IACA,IAAIP,MAAM1B,YAAY,EAAE;QACpB0B,MAAM1B,YAAY,CAACiC,SAAS,GAAGC,IAAAA,mBAAY,EAACtC,oBAAoBI,YAAY,EAAE8B,mBAAmB9B,YAAY,EAAE,CAAC2B,WAAWG,mBAAmBd,IAAI,EAAEU,MAAM1B,YAAY,CAACiC,SAAS;IACpL,OAAO,IAAIP,MAAM3B,OAAO,EAAE;QACtB2B,MAAM3B,OAAO,CAACkC,SAAS,GAAGC,IAAAA,mBAAY,EAACR,MAAM3B,OAAO,CAACkC,SAAS,EAAEH,mBAAmB9B,YAAY;IACnG;IACAmC,IAAAA,mCAAuB,EAACT;IACxB,OAAOA;AACX"}
1
+ {"version":3,"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\nexport const searchBoxClassNames = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--1579, var(--1580, ${tokens.spacingHorizontalSNudge}))`,\n paddingRight: `var(--1581, var(--1582, ${tokens.spacingHorizontalSNudge}))`\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--1583, var(--1584, ${tokens.spacingHorizontalS}))`,\n paddingRight: `var(--1585, var(--1586, ${tokens.spacingHorizontalS}))`\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: `var(--1587, var(--1588, ${tokens.spacingHorizontalMNudge}))`,\n paddingRight: `var(--1589, var(--1590, ${tokens.spacingHorizontalMNudge}))`\n },\n input: {\n paddingLeft: `var(--1591, var(--1592, ${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: `var(--1593, var(--1594, ${tokens.spacingHorizontalM}))`,\n columnGap: `var(--1595, var(--1596, ${tokens.spacingHorizontalXS}))`\n },\n rest: {\n opacity: 0,\n height: 0,\n width: 0,\n paddingLeft: 0\n }\n});\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: `var(--1597, var(--1598, ${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: `var(--1599, var(--1600, ${tokens.colorNeutralForegroundDisabled}))`\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': {\n fontSize: '16px'\n }\n },\n medium: {\n },\n large: {\n '> svg': {\n fontSize: '24px'\n }\n }\n});\n/**\n * Apply styling to the SearchBox slots based on the state\n */ export const useSearchBoxStyles_unstable = (state)=>{\n 'use no memo';\n const { disabled, focused, size } = state;\n const rootStyles = useRootStyles();\n const inputStyles = useInputStyles();\n const contentAfterStyles = useContentAfterStyles();\n const dismissClassName = useDismissClassName();\n const dismissStyles = useDismissStyles();\n state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);\n state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);\n if (state.dismiss) {\n state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);\n }\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);\n } else if (state.dismiss) {\n state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);\n }\n useInputStyles_unstable(state);\n return state;\n};\n"],"names":["searchBoxClassNames","useSearchBoxStyles_unstable","root","dismiss","contentAfter","contentBefore","input","useRootStyles","__styles","small","i8kkvl","B2u0y6b","uwmqm3","z189sj","medium","large","Boqhc8c","B8uat0v","unfocusedNoContentAfter","d","useInputStyles","useContentAfterStyles","rest","abs64n","Bqenvij","a9b677","useDismissClassName","__resetStyles","useDismissStyles","disabled","sj55zd","Duoase","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className","mergeClasses","useInputStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-search",
3
- "version": "0.0.0-nightly-20240819-2110.1",
3
+ "version": "0.0.0-nightly-20240820-2210.1",
4
4
  "description": "Search input for Fluent UI v9",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -25,17 +25,17 @@
25
25
  },
26
26
  "devDependencies": {
27
27
  "@fluentui/eslint-plugin": "*",
28
- "@fluentui/react-conformance": "0.0.0-nightly-20240819-2110.1",
29
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240819-2110.1",
28
+ "@fluentui/react-conformance": "0.0.0-nightly-20240820-2210.1",
29
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240820-2210.1",
30
30
  "@fluentui/scripts-api-extractor": "*",
31
31
  "@fluentui/scripts-tasks": "*"
32
32
  },
33
33
  "dependencies": {
34
34
  "@fluentui/react-icons": "^2.0.245",
35
- "@fluentui/react-input": "0.0.0-nightly-20240819-2110.1",
36
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240819-2110.1",
37
- "@fluentui/react-theme": "0.0.0-nightly-20240819-2110.1",
38
- "@fluentui/react-utilities": "0.0.0-nightly-20240819-2110.1",
35
+ "@fluentui/react-input": "0.0.0-nightly-20240820-2210.1",
36
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240820-2210.1",
37
+ "@fluentui/react-theme": "0.0.0-nightly-20240820-2210.1",
38
+ "@fluentui/react-utilities": "0.0.0-nightly-20240820-2210.1",
39
39
  "@griffel/react": "^1.5.22",
40
40
  "@swc/helpers": "^0.5.1"
41
41
  },