@fluentui/react-search 0.0.0-nightly-20240819-2052.1 → 0.0.0-nightly-20240819-2137.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 +10 -30
  2. package/lib/components/SearchBox/useSearchBox.js +6 -10
  3. package/lib/components/SearchBox/useSearchBox.js.map +1 -1
  4. package/lib/components/SearchBox/useSearchBoxStyles.styles.js +17 -35
  5. package/lib/components/SearchBox/useSearchBoxStyles.styles.js.map +1 -1
  6. package/lib-commonjs/components/SearchBox/useSearchBox.js +6 -10
  7. package/lib-commonjs/components/SearchBox/useSearchBox.js.map +1 -1
  8. package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.js +43 -85
  9. package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.js.map +1 -1
  10. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,43 +1,23 @@
1
1
  # Change Log - @fluentui/react-search
2
2
 
3
- This log was last generated on Mon, 19 Aug 2024 20:57:18 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 19 Aug 2024 21:48:15 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20240819-2052.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v0.0.0-nightly-20240819-2052.1)
7
+ ## [0.0.0-nightly-20240819-2137.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v0.0.0-nightly-20240819-2137.1)
8
8
 
9
- Mon, 19 Aug 2024 20:57:18 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.14..@fluentui/react-search_v0.0.0-nightly-20240819-2052.1)
9
+ Mon, 19 Aug 2024 21:48:15 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.12..@fluentui/react-search_v0.0.0-nightly-20240819-2137.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-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
16
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
19
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
20
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) 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)
15
+ - Bump @fluentui/react-input to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
19
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
20
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
41
21
 
42
22
  ## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.0.12)
43
23
 
package/lib/components/SearchBox/useSearchBox.js CHANGED
@@ -21,17 +21,13 @@ 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 = React.useCallback(()=>{
24
+ const onFocus = useEventCallback(()=>{
25
25
  setFocused(true);
26
- }, [
27
- setFocused
28
- ]);
29
- const onBlur = React.useCallback((ev)=>{
26
+ });
27
+ const onBlur = useEventCallback((ev)=>{
30
28
  var _searchBoxRootRef_current;
31
29
  setFocused(!!((_searchBoxRootRef_current = searchBoxRootRef.current) === null || _searchBoxRootRef_current === void 0 ? void 0 : _searchBoxRootRef_current.contains(ev.relatedTarget)));
32
- }, [
33
- setFocused
34
- ]);
30
+ });
35
31
  const rootProps = slot.resolveShorthand(root);
36
32
  const handleDismissClick = useEventCallback((event)=>{
37
33
  var _props_onChange;
@@ -53,8 +49,8 @@ import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
53
49
  root: slot.always({
54
50
  ...rootProps,
55
51
  ref: useMergedRefs(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
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)
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))
58
54
  }, {
59
55
  elementType: 'span'
60
56
  }),
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 = 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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"}
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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"}
package/lib/components/SearchBox/useSearchBoxStyles.styles.js CHANGED
@@ -15,64 +15,47 @@ const useRootStyles = /*#__PURE__*/__styles({
15
15
  small: {
16
16
  i8kkvl: "fjuset5",
17
17
  B2u0y6b: "f1xzfw5u",
18
- uwmqm3: ["f1yo5xhq", "f11u2m66"],
19
- z189sj: ["f1czefwt", "fyz03hb"]
18
+ uwmqm3: ["f1xer5qc", "f1vwfgzu"],
19
+ z189sj: ["f1rnmnj3", "frcaq29"]
20
20
  },
21
21
  medium: {
22
22
  i8kkvl: "fjuset5",
23
23
  B2u0y6b: "f1xzfw5u",
24
- uwmqm3: ["fy4mc4l", "fqmi3k8"],
25
- z189sj: ["f1cper36", "f1y5uc1l"]
24
+ uwmqm3: ["f1ga1vvr", "f577s3h"],
25
+ z189sj: ["f14olgbc", "f4yg0v8"]
26
26
  },
27
27
  large: {
28
28
  i8kkvl: "fjuset5",
29
29
  B2u0y6b: "f1xzfw5u",
30
- uwmqm3: ["f1xt971f", "fyp1ehy"],
31
- z189sj: ["f1lehhk2", "f1auf7rb"]
30
+ uwmqm3: ["fzbt8k8", "fesbjht"],
31
+ z189sj: ["f11w4lch", "f1kw5ojf"]
32
32
  },
33
33
  input: {
34
- uwmqm3: ["f7mios5", "f1fa2o7t"],
34
+ uwmqm3: ["feaks35", "fzcul7f"],
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"]
54
38
  }
55
39
  }, {
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);}"]
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;}"]
57
41
  });
58
42
  const useContentAfterStyles = /*#__PURE__*/__styles({
59
43
  contentAfter: {
60
- uwmqm3: ["f1f19u1p", "fkbs4c"],
61
- i8kkvl: "fl7yw8l"
44
+ uwmqm3: ["f1miqibf", "flcjzay"],
45
+ i8kkvl: "flgljck"
62
46
  },
63
47
  rest: {
64
48
  abs64n: "fk73vx1",
65
49
  Bqenvij: "fniina8",
66
- a9b677: "f3tsq5r",
67
- uwmqm3: ["f1cnd47f", "fhxju0i"]
50
+ a9b677: "f3tsq5r"
68
51
  }
69
52
  }, {
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;}"]
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;}"]
71
54
  });
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;}"]);
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;}"]);
73
56
  const useDismissStyles = /*#__PURE__*/__styles({
74
57
  disabled: {
75
- sj55zd: "f18ixbzt"
58
+ sj55zd: "f4be25j"
76
59
  },
77
60
  small: {
78
61
  Duoase: "f3qv9w"
@@ -82,7 +65,7 @@ const useDismissStyles = /*#__PURE__*/__styles({
82
65
  Duoase: "f16u2scb"
83
66
  }
84
67
  }, {
85
- d: [".f18ixbzt{color:var(--1599, var(--1600, var(--colorNeutralForegroundDisabled)));}", ".f3qv9w>svg{font-size:16px;}", ".f16u2scb>svg{font-size:24px;}"]
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;}"]
86
69
  });
87
70
  /**
88
71
  * Apply styling to the SearchBox slots based on the state
@@ -96,12 +79,11 @@ export const useSearchBoxStyles_unstable = state => {
96
79
  size
97
80
  } = state;
98
81
  const rootStyles = useRootStyles();
99
- const inputStyles = useInputStyles();
100
82
  const contentAfterStyles = useContentAfterStyles();
101
83
  const dismissClassName = useDismissClassName();
102
84
  const dismissStyles = useDismissStyles();
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);
85
+ state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], state.root.className);
86
+ state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, state.input.className);
105
87
  if (state.dismiss) {
106
88
  state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
107
89
  }
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","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":[]}
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":[]}
package/lib-commonjs/components/SearchBox/useSearchBox.js CHANGED
@@ -24,17 +24,13 @@ 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 = _react.useCallback(()=>{
27
+ const onFocus = (0, _reactutilities.useEventCallback)(()=>{
28
28
  setFocused(true);
29
- }, [
30
- setFocused
31
- ]);
32
- const onBlur = _react.useCallback((ev)=>{
29
+ });
30
+ const onBlur = (0, _reactutilities.useEventCallback)((ev)=>{
33
31
  var _searchBoxRootRef_current;
34
32
  setFocused(!!((_searchBoxRootRef_current = searchBoxRootRef.current) === null || _searchBoxRootRef_current === void 0 ? void 0 : _searchBoxRootRef_current.contains(ev.relatedTarget)));
35
- }, [
36
- setFocused
37
- ]);
33
+ });
38
34
  const rootProps = _reactutilities.slot.resolveShorthand(root);
39
35
  const handleDismissClick = (0, _reactutilities.useEventCallback)((event)=>{
40
36
  var _props_onChange;
@@ -56,8 +52,8 @@ const useSearchBox_unstable = (props, ref)=>{
56
52
  root: _reactutilities.slot.always({
57
53
  ...rootProps,
58
54
  ref: (0, _reactutilities.useMergedRefs)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
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)
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))
61
57
  }, {
62
58
  elementType: 'span'
63
59
  }),
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 = 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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"}
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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"}
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
- "f1yo5xhq",
36
- "f11u2m66"
35
+ "f1xer5qc",
36
+ "f1vwfgzu"
37
37
  ],
38
38
  z189sj: [
39
- "f1czefwt",
40
- "fyz03hb"
39
+ "f1rnmnj3",
40
+ "frcaq29"
41
41
  ]
42
42
  },
43
43
  medium: {
44
44
  i8kkvl: "fjuset5",
45
45
  B2u0y6b: "f1xzfw5u",
46
46
  uwmqm3: [
47
- "fy4mc4l",
48
- "fqmi3k8"
47
+ "f1ga1vvr",
48
+ "f577s3h"
49
49
  ],
50
50
  z189sj: [
51
- "f1cper36",
52
- "f1y5uc1l"
51
+ "f14olgbc",
52
+ "f4yg0v8"
53
53
  ]
54
54
  },
55
55
  large: {
56
56
  i8kkvl: "fjuset5",
57
57
  B2u0y6b: "f1xzfw5u",
58
58
  uwmqm3: [
59
- "f1xt971f",
60
- "fyp1ehy"
59
+ "fzbt8k8",
60
+ "fesbjht"
61
61
  ],
62
62
  z189sj: [
63
- "f1lehhk2",
64
- "f1auf7rb"
63
+ "f11w4lch",
64
+ "f1kw5ojf"
65
65
  ]
66
66
  },
67
67
  input: {
68
68
  uwmqm3: [
69
- "f7mios5",
70
- "f1fa2o7t"
69
+ "feaks35",
70
+ "fzcul7f"
71
71
  ],
72
72
  z189sj: [
73
73
  "fhxju0i",
@@ -75,102 +75,61 @@ const searchBoxClassNames = {
75
75
  ],
76
76
  Boqhc8c: "f18izjht",
77
77
  B8uat0v: "fcoa6sg"
78
- },
79
- unfocusedNoContentAfter: {
80
- z189sj: [
81
- "fhxju0i",
82
- "f1cnd47f"
83
- ]
84
78
  }
85
79
  }, {
86
80
  d: [
87
81
  ".fjuset5{column-gap:0;}",
88
82
  ".f1xzfw5u{max-width:468px;}",
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)));}",
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)));}",
103
97
  ".fhxju0i{padding-right:0;}",
104
98
  ".f1cnd47f{padding-left:0;}",
105
99
  ".f18izjht::-webkit-search-decoration{display:none;}",
106
100
  ".fcoa6sg::-webkit-search-cancel-button{display:none;}"
107
101
  ]
108
102
  });
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
- });
138
103
  const useContentAfterStyles = /*#__PURE__*/ (0, _react.__styles)({
139
104
  contentAfter: {
140
105
  uwmqm3: [
141
- "f1f19u1p",
142
- "fkbs4c"
106
+ "f1miqibf",
107
+ "flcjzay"
143
108
  ],
144
- i8kkvl: "fl7yw8l"
109
+ i8kkvl: "flgljck"
145
110
  },
146
111
  rest: {
147
112
  abs64n: "fk73vx1",
148
113
  Bqenvij: "fniina8",
149
- a9b677: "f3tsq5r",
150
- uwmqm3: [
151
- "f1cnd47f",
152
- "fhxju0i"
153
- ]
114
+ a9b677: "f3tsq5r"
154
115
  }
155
116
  }, {
156
117
  d: [
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)));}",
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)));}",
160
121
  ".fk73vx1{opacity:0;}",
161
122
  ".fniina8{height:0;}",
162
- ".f3tsq5r{width:0;}",
163
- ".f1cnd47f{padding-left:0;}",
164
- ".fhxju0i{padding-right:0;}"
123
+ ".f3tsq5r{width:0;}"
165
124
  ]
166
125
  });
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;}"
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;}"
170
129
  ]);
171
130
  const useDismissStyles = /*#__PURE__*/ (0, _react.__styles)({
172
131
  disabled: {
173
- sj55zd: "f18ixbzt"
132
+ sj55zd: "f4be25j"
174
133
  },
175
134
  small: {
176
135
  Duoase: "f3qv9w"
@@ -181,7 +140,7 @@ const useDismissStyles = /*#__PURE__*/ (0, _react.__styles)({
181
140
  }
182
141
  }, {
183
142
  d: [
184
- ".f18ixbzt{color:var(--1599, var(--1600, var(--colorNeutralForegroundDisabled)));}",
143
+ ".f4be25j{color:var(--ctrl-token-SearchBox-1599, var(--semantic-token-SearchBox-1600, var(--colorNeutralForegroundDisabled)));}",
185
144
  ".f3qv9w>svg{font-size:16px;}",
186
145
  ".f16u2scb>svg{font-size:24px;}"
187
146
  ]
@@ -190,12 +149,11 @@ const useSearchBoxStyles_unstable = (state)=>{
190
149
  'use no memo';
191
150
  const { disabled, focused, size } = state;
192
151
  const rootStyles = useRootStyles();
193
- const inputStyles = useInputStyles();
194
152
  const contentAfterStyles = useContentAfterStyles();
195
153
  const dismissClassName = useDismissClassName();
196
154
  const dismissStyles = useDismissStyles();
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);
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);
199
157
  if (state.dismiss) {
200
158
  state.dismiss.className = (0, _react.mergeClasses)(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
201
159
  }
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(--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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"}
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":"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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-2052.1",
3
+ "version": "0.0.0-nightly-20240819-2137.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-2052.1",
29
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240819-2052.1",
28
+ "@fluentui/react-conformance": "0.0.0-nightly-20240819-2137.1",
29
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240819-2137.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-2052.1",
36
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240819-2052.1",
37
- "@fluentui/react-theme": "0.0.0-nightly-20240819-2052.1",
38
- "@fluentui/react-utilities": "0.0.0-nightly-20240819-2052.1",
35
+ "@fluentui/react-input": "0.0.0-nightly-20240819-2137.1",
36
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240819-2137.1",
37
+ "@fluentui/react-theme": "0.0.0-nightly-20240819-2137.1",
38
+ "@fluentui/react-utilities": "0.0.0-nightly-20240819-2137.1",
39
39
  "@griffel/react": "^1.5.22",
40
40
  "@swc/helpers": "^0.5.1"
41
41
  },