@fluentui/react-search 9.4.2 → 9.4.4
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.
- package/CHANGELOG.md +28 -5
- package/lib/components/SearchBox/useSearchBox.js +1 -0
- package/lib/components/SearchBox/useSearchBox.js.map +1 -1
- package/lib/components/SearchBox/useSearchBoxStyles.styles.js +6 -2
- package/lib/components/SearchBox/useSearchBoxStyles.styles.js.map +1 -1
- package/lib/components/SearchBox/useSearchBoxStyles.styles.raw.js +6 -1
- package/lib/components/SearchBox/useSearchBoxStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/SearchBox/useSearchBox.js +1 -0
- package/lib-commonjs/components/SearchBox/useSearchBox.js.map +1 -1
- package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.js +6 -1
- package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.raw.js +6 -1
- package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.raw.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,19 +1,42 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-search
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 24 Jun 2026 11:03:43 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.4.4)
|
|
8
|
+
|
|
9
|
+
Wed, 24 Jun 2026 11:03:43 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.4.3..@fluentui/react-search_v9.4.4)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-input to v9.8.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.4.3)
|
|
20
|
+
|
|
21
|
+
Tue, 26 May 2026 09:39:36 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.4.2..@fluentui/react-search_v9.4.3)
|
|
23
|
+
|
|
24
|
+
### Patches
|
|
25
|
+
|
|
26
|
+
- Bump @fluentui/react-input to v9.8.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
27
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
28
|
+
- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
29
|
+
|
|
7
30
|
## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.4.2)
|
|
8
31
|
|
|
9
|
-
Thu, 23 Apr 2026
|
|
32
|
+
Thu, 23 Apr 2026 14:21:11 GMT
|
|
10
33
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.4.1..@fluentui/react-search_v9.4.2)
|
|
11
34
|
|
|
12
35
|
### Patches
|
|
13
36
|
|
|
14
|
-
- Bump @fluentui/react-input to v9.8.2 ([PR #
|
|
15
|
-
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #
|
|
16
|
-
- Bump @fluentui/react-utilities to v9.26.3 ([PR #
|
|
37
|
+
- Bump @fluentui/react-input to v9.8.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
38
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
39
|
+
- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
17
40
|
|
|
18
41
|
## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.4.1)
|
|
19
42
|
|
|
@@ -81,6 +81,7 @@ import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
|
|
|
81
81
|
...rootProps,
|
|
82
82
|
ref: useMergedRefs(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
|
|
83
83
|
onFocus: mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus),
|
|
84
|
+
// eslint-disable-next-line react-hooks/refs
|
|
84
85
|
onBlur: mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur)
|
|
85
86
|
}, {
|
|
86
87
|
elementType: 'span'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SearchBox/useSearchBox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n isResolvedShorthand,\n mergeCallbacks,\n slot,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useInput_unstable } from '@fluentui/react-input';\nimport { DismissRegular, SearchRegular } from '@fluentui/react-icons';\nimport type { ExtractSlotProps } from '@fluentui/react-utilities';\nimport type {\n SearchBoxBaseProps,\n SearchBoxBaseState,\n SearchBoxSlots,\n SearchBoxProps,\n SearchBoxState,\n} from './SearchBox.types';\n\n/**\n * Create the state required to render SearchBox.\n *\n * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,\n * before being passed to renderSearchBox_unstable.\n *\n * @param props - props from this instance of SearchBox\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLInputElement>): SearchBoxState => {\n const { size = 'medium', appearance = 'outline', ...baseProps } = props;\n const state = useSearchBoxBase_unstable(baseProps, ref);\n\n if (state.contentBefore) {\n state.contentBefore.children ??= <SearchRegular />;\n }\n\n if (state.dismiss) {\n state.dismiss.children ??= <DismissRegular />;\n }\n\n return {\n ...state,\n size,\n appearance,\n };\n};\n\n/**\n * Base hook for SearchBox component. Manages state related to controlled/uncontrolled\n * value, focus tracking, dismiss button click handling, search icon slot, and\n * input type=\"search\" — without design props (size, appearance).\n *\n * @param props - props from this instance of SearchBox (without size, appearance)\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBoxBase_unstable = (\n props: SearchBoxBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): SearchBoxBaseState => {\n const { disabled = false, root, contentBefore, dismiss, contentAfter, value, defaultValue, ...inputProps } = props;\n\n const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n const [internalValue, setInternalValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: '',\n });\n\n // Tracks the focus of the component for the contentAfter and dismiss button\n const [focused, setFocused] = React.useState(false);\n\n const onFocus = React.useCallback(() => {\n setFocused(true);\n }, [setFocused]);\n\n const onBlur: React.FocusEventHandler<HTMLSpanElement> = React.useCallback(\n ev => {\n setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n },\n [setFocused],\n );\n\n const rootProps = slot.resolveShorthand(root);\n\n const handleDismissClick = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {\n if (isResolvedShorthand(dismiss)) {\n dismiss.onClick?.(event);\n }\n const newValue = '';\n setInternalValue(newValue);\n props.onChange?.(event, { value: newValue });\n\n searchBoxRef.current?.focus();\n });\n\n const inputState = useInput_unstable(\n {\n type: 'search',\n disabled,\n value: internalValue,\n root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n {\n ...rootProps,\n ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n onFocus: mergeCallbacks(rootProps?.onFocus, onFocus),\n onBlur: mergeCallbacks(rootProps?.onBlur, onBlur),\n },\n {\n elementType: 'span',\n },\n ),\n contentBefore: slot.optional(contentBefore, {\n renderByDefault: true,\n elementType: 'span',\n }),\n contentAfter: slot.optional(contentAfter, {\n renderByDefault: true,\n elementType: 'span',\n }),\n ...inputProps,\n onChange: useEventCallback(ev => {\n const newValue = ev.target.value;\n props.onChange?.(ev, { value: newValue });\n setInternalValue(newValue);\n }),\n },\n useMergedRefs(searchBoxRef, ref),\n );\n\n const state: SearchBoxBaseState = {\n ...inputState,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...inputState.components,\n dismiss: 'span',\n },\n dismiss: slot.optional(dismiss, {\n defaultProps: {\n role: 'button',\n 'aria-label': 'clear',\n tabIndex: -1,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled,\n focused,\n };\n\n if (state.dismiss) {\n state.dismiss.onClick = handleDismissClick;\n }\n\n return state;\n};\n"],"names":["React","isResolvedShorthand","mergeCallbacks","slot","useControllableState","useEventCallback","useMergedRefs","useInput_unstable","DismissRegular","SearchRegular","useSearchBox_unstable","props","ref","size","appearance","baseProps","state","useSearchBoxBase_unstable","contentBefore","children","dismiss","disabled","root","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","defaultState","initialState","focused","setFocused","useState","onFocus","useCallback","onBlur","ev","current","contains","relatedTarget","rootProps","resolveShorthand","handleDismissClick","event","onClick","newValue","onChange","focus","inputState","type","always","elementType","optional","renderByDefault","target","components","defaultProps","role","tabIndex"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/SearchBox/useSearchBox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n isResolvedShorthand,\n mergeCallbacks,\n slot,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useInput_unstable } from '@fluentui/react-input';\nimport { DismissRegular, SearchRegular } from '@fluentui/react-icons';\nimport type { ExtractSlotProps } from '@fluentui/react-utilities';\nimport type {\n SearchBoxBaseProps,\n SearchBoxBaseState,\n SearchBoxSlots,\n SearchBoxProps,\n SearchBoxState,\n} from './SearchBox.types';\n\n/**\n * Create the state required to render SearchBox.\n *\n * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,\n * before being passed to renderSearchBox_unstable.\n *\n * @param props - props from this instance of SearchBox\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLInputElement>): SearchBoxState => {\n const { size = 'medium', appearance = 'outline', ...baseProps } = props;\n const state = useSearchBoxBase_unstable(baseProps, ref);\n\n if (state.contentBefore) {\n state.contentBefore.children ??= <SearchRegular />;\n }\n\n if (state.dismiss) {\n state.dismiss.children ??= <DismissRegular />;\n }\n\n return {\n ...state,\n size,\n appearance,\n };\n};\n\n/**\n * Base hook for SearchBox component. Manages state related to controlled/uncontrolled\n * value, focus tracking, dismiss button click handling, search icon slot, and\n * input type=\"search\" — without design props (size, appearance).\n *\n * @param props - props from this instance of SearchBox (without size, appearance)\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBoxBase_unstable = (\n props: SearchBoxBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): SearchBoxBaseState => {\n const { disabled = false, root, contentBefore, dismiss, contentAfter, value, defaultValue, ...inputProps } = props;\n\n const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n const [internalValue, setInternalValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: '',\n });\n\n // Tracks the focus of the component for the contentAfter and dismiss button\n const [focused, setFocused] = React.useState(false);\n\n const onFocus = React.useCallback(() => {\n setFocused(true);\n }, [setFocused]);\n\n const onBlur: React.FocusEventHandler<HTMLSpanElement> = React.useCallback(\n ev => {\n setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n },\n [setFocused],\n );\n\n const rootProps = slot.resolveShorthand(root);\n\n const handleDismissClick = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {\n if (isResolvedShorthand(dismiss)) {\n dismiss.onClick?.(event);\n }\n const newValue = '';\n setInternalValue(newValue);\n props.onChange?.(event, { value: newValue });\n\n searchBoxRef.current?.focus();\n });\n\n const inputState = useInput_unstable(\n {\n type: 'search',\n disabled,\n value: internalValue,\n root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n {\n ...rootProps,\n ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n onFocus: mergeCallbacks(rootProps?.onFocus, onFocus),\n // eslint-disable-next-line react-hooks/refs\n onBlur: mergeCallbacks(rootProps?.onBlur, onBlur),\n },\n {\n elementType: 'span',\n },\n ),\n contentBefore: slot.optional(contentBefore, {\n renderByDefault: true,\n elementType: 'span',\n }),\n contentAfter: slot.optional(contentAfter, {\n renderByDefault: true,\n elementType: 'span',\n }),\n ...inputProps,\n onChange: useEventCallback(ev => {\n const newValue = ev.target.value;\n props.onChange?.(ev, { value: newValue });\n setInternalValue(newValue);\n }),\n },\n useMergedRefs(searchBoxRef, ref),\n );\n\n const state: SearchBoxBaseState = {\n ...inputState,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...inputState.components,\n dismiss: 'span',\n },\n dismiss: slot.optional(dismiss, {\n defaultProps: {\n role: 'button',\n 'aria-label': 'clear',\n tabIndex: -1,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled,\n focused,\n };\n\n if (state.dismiss) {\n state.dismiss.onClick = handleDismissClick;\n }\n\n return state;\n};\n"],"names":["React","isResolvedShorthand","mergeCallbacks","slot","useControllableState","useEventCallback","useMergedRefs","useInput_unstable","DismissRegular","SearchRegular","useSearchBox_unstable","props","ref","size","appearance","baseProps","state","useSearchBoxBase_unstable","contentBefore","children","dismiss","disabled","root","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","defaultState","initialState","focused","setFocused","useState","onFocus","useCallback","onBlur","ev","current","contains","relatedTarget","rootProps","resolveShorthand","handleDismissClick","event","onClick","newValue","onChange","focus","inputState","type","always","elementType","optional","renderByDefault","target","components","defaultProps","role","tabIndex"],"mappings":"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"}
|
|
@@ -94,8 +94,6 @@ const useDismissStyles = /*#__PURE__*/__styles({
|
|
|
94
94
|
* Apply styling to the SearchBox slots based on the state
|
|
95
95
|
*/
|
|
96
96
|
export const useSearchBoxStyles_unstable = state => {
|
|
97
|
-
'use no memo';
|
|
98
|
-
|
|
99
97
|
const {
|
|
100
98
|
disabled,
|
|
101
99
|
focused,
|
|
@@ -106,17 +104,23 @@ export const useSearchBoxStyles_unstable = state => {
|
|
|
106
104
|
const contentAfterStyles = useContentAfterStyles();
|
|
107
105
|
const dismissClassName = useDismissClassName();
|
|
108
106
|
const dismissStyles = useDismissStyles();
|
|
107
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
109
108
|
state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
|
|
109
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
110
110
|
state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
|
|
111
111
|
if (state.dismiss) {
|
|
112
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
112
113
|
state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
|
|
113
114
|
}
|
|
114
115
|
if (state.contentBefore) {
|
|
116
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
115
117
|
state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);
|
|
116
118
|
}
|
|
117
119
|
if (state.contentAfter) {
|
|
120
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
118
121
|
state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);
|
|
119
122
|
} else if (state.dismiss) {
|
|
123
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
120
124
|
state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);
|
|
121
125
|
}
|
|
122
126
|
useInputStyles_unstable(state);
|
|
@@ -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","Bqenvij","a9b677","B68tc82","Bmxbyg5","Bpg54ce","p","useDismissClassName","useDismissStyles","disabled","sj55zd","Duoase","useSearchBoxStyles_unstable","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className"],"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\nexport const searchBoxClassNames = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: tokens.spacingHorizontalS,\n paddingRight: tokens.spacingHorizontalS\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: tokens.spacingHorizontalMNudge,\n paddingRight: tokens.spacingHorizontalMNudge\n },\n input: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: 0,\n // removes the WebKit pseudoelement styling\n '::-webkit-search-decoration': {\n display: 'none'\n },\n '::-webkit-search-cancel-button': {\n display: 'none'\n }\n },\n unfocusedNoContentAfter: {\n paddingRight: 0\n }\n});\nconst useInputStyles = makeStyles({\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n large: {\n paddingRight: tokens.spacingHorizontalMNudge\n }\n});\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: tokens.spacingHorizontalM,\n columnGap: tokens.spacingHorizontalXS\n },\n rest: {\n height: 0,\n width: 0,\n paddingLeft: 0,\n overflow: 'hidden'\n }\n});\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': {\n fontSize: '20px'\n },\n cursor: 'pointer'\n});\nconst useDismissStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': {\n fontSize: '16px'\n }\n },\n medium: {\n },\n large: {\n '> svg': {\n fontSize: '24px'\n }\n }\n});\n/**\n * Apply styling to the SearchBox slots based on the state\n */ export const useSearchBoxStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","useInputStyles_unstable","searchBoxClassNames","root","dismiss","contentAfter","contentBefore","input","useRootStyles","small","i8kkvl","B2u0y6b","uwmqm3","z189sj","medium","large","Boqhc8c","B8uat0v","unfocusedNoContentAfter","d","useInputStyles","useContentAfterStyles","rest","Bqenvij","a9b677","B68tc82","Bmxbyg5","Bpg54ce","p","useDismissClassName","useDismissStyles","disabled","sj55zd","Duoase","useSearchBoxStyles_unstable","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className"],"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\nexport const searchBoxClassNames = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: tokens.spacingHorizontalS,\n paddingRight: tokens.spacingHorizontalS\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: tokens.spacingHorizontalMNudge,\n paddingRight: tokens.spacingHorizontalMNudge\n },\n input: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: 0,\n // removes the WebKit pseudoelement styling\n '::-webkit-search-decoration': {\n display: 'none'\n },\n '::-webkit-search-cancel-button': {\n display: 'none'\n }\n },\n unfocusedNoContentAfter: {\n paddingRight: 0\n }\n});\nconst useInputStyles = makeStyles({\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n large: {\n paddingRight: tokens.spacingHorizontalMNudge\n }\n});\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: tokens.spacingHorizontalM,\n columnGap: tokens.spacingHorizontalXS\n },\n rest: {\n height: 0,\n width: 0,\n paddingLeft: 0,\n overflow: 'hidden'\n }\n});\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': {\n fontSize: '20px'\n },\n cursor: 'pointer'\n});\nconst useDismissStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': {\n fontSize: '16px'\n }\n },\n medium: {\n },\n large: {\n '> svg': {\n fontSize: '24px'\n }\n }\n});\n/**\n * Apply styling to the SearchBox slots based on the state\n */ export const useSearchBoxStyles_unstable = (state)=>{\n const { disabled, focused, size } = state;\n const rootStyles = useRootStyles();\n const inputStyles = useInputStyles();\n const contentAfterStyles = useContentAfterStyles();\n const dismissClassName = useDismissClassName();\n const dismissStyles = useDismissStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);\n if (state.dismiss) {\n // eslint-disable-next-line react-hooks/immutability\n state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);\n }\n if (state.contentBefore) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n }\n if (state.contentAfter) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);\n } else if (state.dismiss) {\n // eslint-disable-next-line react-hooks/immutability\n state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);\n }\n useInputStyles_unstable(state);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -100,24 +100,29 @@ const useDismissStyles = makeStyles({
|
|
|
100
100
|
/**
|
|
101
101
|
* Apply styling to the SearchBox slots based on the state
|
|
102
102
|
*/ export const useSearchBoxStyles_unstable = (state)=>{
|
|
103
|
-
'use no memo';
|
|
104
103
|
const { disabled, focused, size } = state;
|
|
105
104
|
const rootStyles = useRootStyles();
|
|
106
105
|
const inputStyles = useInputStyles();
|
|
107
106
|
const contentAfterStyles = useContentAfterStyles();
|
|
108
107
|
const dismissClassName = useDismissClassName();
|
|
109
108
|
const dismissStyles = useDismissStyles();
|
|
109
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
110
110
|
state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
|
|
111
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
111
112
|
state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
|
|
112
113
|
if (state.dismiss) {
|
|
114
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
113
115
|
state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
|
|
114
116
|
}
|
|
115
117
|
if (state.contentBefore) {
|
|
118
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
116
119
|
state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);
|
|
117
120
|
}
|
|
118
121
|
if (state.contentAfter) {
|
|
122
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
119
123
|
state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);
|
|
120
124
|
} else if (state.dismiss) {
|
|
125
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
121
126
|
state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);
|
|
122
127
|
}
|
|
123
128
|
useInputStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SearchBox/useSearchBoxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SearchBoxSlots, SearchBoxState } from './SearchBox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const searchBoxClassNames: SlotClassNames<SearchBoxSlots> = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n\n paddingLeft: tokens.spacingHorizontalS,\n paddingRight: tokens.spacingHorizontalS,\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n\n paddingLeft: tokens.spacingHorizontalMNudge,\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n\n input: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: 0,\n\n // removes the WebKit pseudoelement styling\n '::-webkit-search-decoration': {\n display: 'none',\n },\n '::-webkit-search-cancel-button': {\n display: 'none',\n },\n },\n\n unfocusedNoContentAfter: {\n paddingRight: 0,\n },\n});\n\nconst useInputStyles = makeStyles({\n small: {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS,\n },\n large: {\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n});\n\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: tokens.spacingHorizontalM,\n columnGap: tokens.spacingHorizontalXS,\n },\n rest: {\n height: 0,\n width: 0,\n paddingLeft: 0,\n overflow: 'hidden',\n },\n});\n\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': { fontSize: '20px' },\n cursor: 'pointer',\n});\n\nconst useDismissStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': { fontSize: '16px' },\n },\n medium: {\n // included in useDismissClassName\n },\n large: {\n '> svg': { fontSize: '24px' },\n },\n});\n\n/**\n * Apply styling to the SearchBox slots based on the state\n */\nexport const useSearchBoxStyles_unstable = (state: SearchBoxState): SearchBoxState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/SearchBox/useSearchBoxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SearchBoxSlots, SearchBoxState } from './SearchBox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const searchBoxClassNames: SlotClassNames<SearchBoxSlots> = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n\n paddingLeft: tokens.spacingHorizontalS,\n paddingRight: tokens.spacingHorizontalS,\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n\n paddingLeft: tokens.spacingHorizontalMNudge,\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n\n input: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: 0,\n\n // removes the WebKit pseudoelement styling\n '::-webkit-search-decoration': {\n display: 'none',\n },\n '::-webkit-search-cancel-button': {\n display: 'none',\n },\n },\n\n unfocusedNoContentAfter: {\n paddingRight: 0,\n },\n});\n\nconst useInputStyles = makeStyles({\n small: {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS,\n },\n large: {\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n});\n\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: tokens.spacingHorizontalM,\n columnGap: tokens.spacingHorizontalXS,\n },\n rest: {\n height: 0,\n width: 0,\n paddingLeft: 0,\n overflow: 'hidden',\n },\n});\n\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': { fontSize: '20px' },\n cursor: 'pointer',\n});\n\nconst useDismissStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': { fontSize: '16px' },\n },\n medium: {\n // included in useDismissClassName\n },\n large: {\n '> svg': { fontSize: '24px' },\n },\n});\n\n/**\n * Apply styling to the SearchBox slots based on the state\n */\nexport const useSearchBoxStyles_unstable = (state: SearchBoxState): SearchBoxState => {\n const { disabled, focused, size } = state;\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputStyles();\n const contentAfterStyles = useContentAfterStyles();\n const dismissClassName = useDismissClassName();\n const dismissStyles = useDismissStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n searchBoxClassNames.root,\n rootStyles[size],\n !focused && rootStyles.unfocusedNoContentAfter,\n state.root.className,\n );\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(\n searchBoxClassNames.input,\n rootStyles.input,\n !focused && inputStyles[size],\n state.input.className,\n );\n\n if (state.dismiss) {\n // eslint-disable-next-line react-hooks/immutability\n state.dismiss.className = mergeClasses(\n searchBoxClassNames.dismiss,\n dismissClassName,\n disabled && dismissStyles.disabled,\n dismissStyles[size],\n\n state.dismiss.className,\n );\n }\n\n if (state.contentBefore) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n }\n\n if (state.contentAfter) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentAfter.className = mergeClasses(\n searchBoxClassNames.contentAfter,\n contentAfterStyles.contentAfter,\n\n !focused && contentAfterStyles.rest,\n\n state.contentAfter.className,\n );\n } else if (state.dismiss) {\n // eslint-disable-next-line react-hooks/immutability\n state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);\n }\n\n useInputStyles_unstable(state);\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","useInputStyles_unstable","searchBoxClassNames","root","dismiss","contentAfter","contentBefore","input","useRootStyles","small","columnGap","maxWidth","paddingLeft","spacingHorizontalSNudge","paddingRight","medium","spacingHorizontalS","large","spacingHorizontalMNudge","display","unfocusedNoContentAfter","useInputStyles","useContentAfterStyles","spacingHorizontalM","spacingHorizontalXS","rest","height","width","overflow","useDismissClassName","boxSizing","color","colorNeutralForeground3","fontSize","cursor","useDismissStyles","disabled","colorNeutralForegroundDisabled","useSearchBoxStyles_unstable","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className"],"mappings":"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"}
|
|
@@ -85,6 +85,7 @@ const useSearchBoxBase_unstable = (props, ref)=>{
|
|
|
85
85
|
...rootProps,
|
|
86
86
|
ref: (0, _reactutilities.useMergedRefs)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
|
|
87
87
|
onFocus: (0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus),
|
|
88
|
+
// eslint-disable-next-line react-hooks/refs
|
|
88
89
|
onBlur: (0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur)
|
|
89
90
|
}, {
|
|
90
91
|
elementType: 'span'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SearchBox/useSearchBox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n isResolvedShorthand,\n mergeCallbacks,\n slot,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useInput_unstable } from '@fluentui/react-input';\nimport { DismissRegular, SearchRegular } from '@fluentui/react-icons';\nimport type { ExtractSlotProps } from '@fluentui/react-utilities';\nimport type {\n SearchBoxBaseProps,\n SearchBoxBaseState,\n SearchBoxSlots,\n SearchBoxProps,\n SearchBoxState,\n} from './SearchBox.types';\n\n/**\n * Create the state required to render SearchBox.\n *\n * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,\n * before being passed to renderSearchBox_unstable.\n *\n * @param props - props from this instance of SearchBox\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLInputElement>): SearchBoxState => {\n const { size = 'medium', appearance = 'outline', ...baseProps } = props;\n const state = useSearchBoxBase_unstable(baseProps, ref);\n\n if (state.contentBefore) {\n state.contentBefore.children ??= <SearchRegular />;\n }\n\n if (state.dismiss) {\n state.dismiss.children ??= <DismissRegular />;\n }\n\n return {\n ...state,\n size,\n appearance,\n };\n};\n\n/**\n * Base hook for SearchBox component. Manages state related to controlled/uncontrolled\n * value, focus tracking, dismiss button click handling, search icon slot, and\n * input type=\"search\" — without design props (size, appearance).\n *\n * @param props - props from this instance of SearchBox (without size, appearance)\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBoxBase_unstable = (\n props: SearchBoxBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): SearchBoxBaseState => {\n const { disabled = false, root, contentBefore, dismiss, contentAfter, value, defaultValue, ...inputProps } = props;\n\n const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n const [internalValue, setInternalValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: '',\n });\n\n // Tracks the focus of the component for the contentAfter and dismiss button\n const [focused, setFocused] = React.useState(false);\n\n const onFocus = React.useCallback(() => {\n setFocused(true);\n }, [setFocused]);\n\n const onBlur: React.FocusEventHandler<HTMLSpanElement> = React.useCallback(\n ev => {\n setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n },\n [setFocused],\n );\n\n const rootProps = slot.resolveShorthand(root);\n\n const handleDismissClick = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {\n if (isResolvedShorthand(dismiss)) {\n dismiss.onClick?.(event);\n }\n const newValue = '';\n setInternalValue(newValue);\n props.onChange?.(event, { value: newValue });\n\n searchBoxRef.current?.focus();\n });\n\n const inputState = useInput_unstable(\n {\n type: 'search',\n disabled,\n value: internalValue,\n root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n {\n ...rootProps,\n ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n onFocus: mergeCallbacks(rootProps?.onFocus, onFocus),\n onBlur: mergeCallbacks(rootProps?.onBlur, onBlur),\n },\n {\n elementType: 'span',\n },\n ),\n contentBefore: slot.optional(contentBefore, {\n renderByDefault: true,\n elementType: 'span',\n }),\n contentAfter: slot.optional(contentAfter, {\n renderByDefault: true,\n elementType: 'span',\n }),\n ...inputProps,\n onChange: useEventCallback(ev => {\n const newValue = ev.target.value;\n props.onChange?.(ev, { value: newValue });\n setInternalValue(newValue);\n }),\n },\n useMergedRefs(searchBoxRef, ref),\n );\n\n const state: SearchBoxBaseState = {\n ...inputState,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...inputState.components,\n dismiss: 'span',\n },\n dismiss: slot.optional(dismiss, {\n defaultProps: {\n role: 'button',\n 'aria-label': 'clear',\n tabIndex: -1,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled,\n focused,\n };\n\n if (state.dismiss) {\n state.dismiss.onClick = handleDismissClick;\n }\n\n return state;\n};\n"],"names":["React","isResolvedShorthand","mergeCallbacks","slot","useControllableState","useEventCallback","useMergedRefs","useInput_unstable","DismissRegular","SearchRegular","useSearchBox_unstable","props","ref","size","appearance","baseProps","state","useSearchBoxBase_unstable","contentBefore","children","dismiss","disabled","root","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","defaultState","initialState","focused","setFocused","useState","onFocus","useCallback","onBlur","ev","current","contains","relatedTarget","rootProps","resolveShorthand","handleDismissClick","event","onClick","newValue","onChange","focus","inputState","type","always","elementType","optional","renderByDefault","target","components","defaultProps","role","tabIndex"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["../src/components/SearchBox/useSearchBox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n isResolvedShorthand,\n mergeCallbacks,\n slot,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useInput_unstable } from '@fluentui/react-input';\nimport { DismissRegular, SearchRegular } from '@fluentui/react-icons';\nimport type { ExtractSlotProps } from '@fluentui/react-utilities';\nimport type {\n SearchBoxBaseProps,\n SearchBoxBaseState,\n SearchBoxSlots,\n SearchBoxProps,\n SearchBoxState,\n} from './SearchBox.types';\n\n/**\n * Create the state required to render SearchBox.\n *\n * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,\n * before being passed to renderSearchBox_unstable.\n *\n * @param props - props from this instance of SearchBox\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLInputElement>): SearchBoxState => {\n const { size = 'medium', appearance = 'outline', ...baseProps } = props;\n const state = useSearchBoxBase_unstable(baseProps, ref);\n\n if (state.contentBefore) {\n state.contentBefore.children ??= <SearchRegular />;\n }\n\n if (state.dismiss) {\n state.dismiss.children ??= <DismissRegular />;\n }\n\n return {\n ...state,\n size,\n appearance,\n };\n};\n\n/**\n * Base hook for SearchBox component. Manages state related to controlled/uncontrolled\n * value, focus tracking, dismiss button click handling, search icon slot, and\n * input type=\"search\" — without design props (size, appearance).\n *\n * @param props - props from this instance of SearchBox (without size, appearance)\n * @param ref - reference to root HTMLElement of SearchBox\n */\nexport const useSearchBoxBase_unstable = (\n props: SearchBoxBaseProps,\n ref: React.Ref<HTMLInputElement>,\n): SearchBoxBaseState => {\n const { disabled = false, root, contentBefore, dismiss, contentAfter, value, defaultValue, ...inputProps } = props;\n\n const searchBoxRootRef = React.useRef<HTMLDivElement>(null);\n const searchBoxRef = React.useRef<HTMLInputElement>(null);\n\n const [internalValue, setInternalValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: '',\n });\n\n // Tracks the focus of the component for the contentAfter and dismiss button\n const [focused, setFocused] = React.useState(false);\n\n const onFocus = React.useCallback(() => {\n setFocused(true);\n }, [setFocused]);\n\n const onBlur: React.FocusEventHandler<HTMLSpanElement> = React.useCallback(\n ev => {\n setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));\n },\n [setFocused],\n );\n\n const rootProps = slot.resolveShorthand(root);\n\n const handleDismissClick = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {\n if (isResolvedShorthand(dismiss)) {\n dismiss.onClick?.(event);\n }\n const newValue = '';\n setInternalValue(newValue);\n props.onChange?.(event, { value: newValue });\n\n searchBoxRef.current?.focus();\n });\n\n const inputState = useInput_unstable(\n {\n type: 'search',\n disabled,\n value: internalValue,\n root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(\n {\n ...rootProps,\n ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),\n onFocus: mergeCallbacks(rootProps?.onFocus, onFocus),\n // eslint-disable-next-line react-hooks/refs\n onBlur: mergeCallbacks(rootProps?.onBlur, onBlur),\n },\n {\n elementType: 'span',\n },\n ),\n contentBefore: slot.optional(contentBefore, {\n renderByDefault: true,\n elementType: 'span',\n }),\n contentAfter: slot.optional(contentAfter, {\n renderByDefault: true,\n elementType: 'span',\n }),\n ...inputProps,\n onChange: useEventCallback(ev => {\n const newValue = ev.target.value;\n props.onChange?.(ev, { value: newValue });\n setInternalValue(newValue);\n }),\n },\n useMergedRefs(searchBoxRef, ref),\n );\n\n const state: SearchBoxBaseState = {\n ...inputState,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...inputState.components,\n dismiss: 'span',\n },\n dismiss: slot.optional(dismiss, {\n defaultProps: {\n role: 'button',\n 'aria-label': 'clear',\n tabIndex: -1,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled,\n focused,\n };\n\n if (state.dismiss) {\n state.dismiss.onClick = handleDismissClick;\n }\n\n return state;\n};\n"],"names":["React","isResolvedShorthand","mergeCallbacks","slot","useControllableState","useEventCallback","useMergedRefs","useInput_unstable","DismissRegular","SearchRegular","useSearchBox_unstable","props","ref","size","appearance","baseProps","state","useSearchBoxBase_unstable","contentBefore","children","dismiss","disabled","root","contentAfter","value","defaultValue","inputProps","searchBoxRootRef","useRef","searchBoxRef","internalValue","setInternalValue","defaultState","initialState","focused","setFocused","useState","onFocus","useCallback","onBlur","ev","current","contains","relatedTarget","rootProps","resolveShorthand","handleDismissClick","event","onClick","newValue","onChange","focus","inputState","type","always","elementType","optional","renderByDefault","target","components","defaultProps","role","tabIndex"],"mappings":"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"}
|
|
@@ -187,24 +187,29 @@ const useDismissStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
187
187
|
]
|
|
188
188
|
});
|
|
189
189
|
const useSearchBoxStyles_unstable = (state)=>{
|
|
190
|
-
'use no memo';
|
|
191
190
|
const { disabled, focused, size } = state;
|
|
192
191
|
const rootStyles = useRootStyles();
|
|
193
192
|
const inputStyles = useInputStyles();
|
|
194
193
|
const contentAfterStyles = useContentAfterStyles();
|
|
195
194
|
const dismissClassName = useDismissClassName();
|
|
196
195
|
const dismissStyles = useDismissStyles();
|
|
196
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
197
197
|
state.root.className = (0, _react.mergeClasses)(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
|
|
198
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
198
199
|
state.input.className = (0, _react.mergeClasses)(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
|
|
199
200
|
if (state.dismiss) {
|
|
201
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
200
202
|
state.dismiss.className = (0, _react.mergeClasses)(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
|
|
201
203
|
}
|
|
202
204
|
if (state.contentBefore) {
|
|
205
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
203
206
|
state.contentBefore.className = (0, _react.mergeClasses)(searchBoxClassNames.contentBefore, state.contentBefore.className);
|
|
204
207
|
}
|
|
205
208
|
if (state.contentAfter) {
|
|
209
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
206
210
|
state.contentAfter.className = (0, _react.mergeClasses)(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);
|
|
207
211
|
} else if (state.dismiss) {
|
|
212
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
208
213
|
state.dismiss.className = (0, _react.mergeClasses)(state.dismiss.className, contentAfterStyles.contentAfter);
|
|
209
214
|
}
|
|
210
215
|
(0, _reactinput.useInputStyles_unstable)(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\nexport const searchBoxClassNames = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: tokens.spacingHorizontalS,\n paddingRight: tokens.spacingHorizontalS\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: tokens.spacingHorizontalMNudge,\n paddingRight: tokens.spacingHorizontalMNudge\n },\n input: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: 0,\n // removes the WebKit pseudoelement styling\n '::-webkit-search-decoration': {\n display: 'none'\n },\n '::-webkit-search-cancel-button': {\n display: 'none'\n }\n },\n unfocusedNoContentAfter: {\n paddingRight: 0\n }\n});\nconst useInputStyles = makeStyles({\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n large: {\n paddingRight: tokens.spacingHorizontalMNudge\n }\n});\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: tokens.spacingHorizontalM,\n columnGap: tokens.spacingHorizontalXS\n },\n rest: {\n height: 0,\n width: 0,\n paddingLeft: 0,\n overflow: 'hidden'\n }\n});\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': {\n fontSize: '20px'\n },\n cursor: 'pointer'\n});\nconst useDismissStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': {\n fontSize: '16px'\n }\n },\n medium: {\n },\n large: {\n '> svg': {\n fontSize: '24px'\n }\n }\n});\n/**\n * Apply styling to the SearchBox slots based on the state\n */ export const useSearchBoxStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\nexport const searchBoxClassNames = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: tokens.spacingHorizontalS,\n paddingRight: tokens.spacingHorizontalS\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: tokens.spacingHorizontalMNudge,\n paddingRight: tokens.spacingHorizontalMNudge\n },\n input: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: 0,\n // removes the WebKit pseudoelement styling\n '::-webkit-search-decoration': {\n display: 'none'\n },\n '::-webkit-search-cancel-button': {\n display: 'none'\n }\n },\n unfocusedNoContentAfter: {\n paddingRight: 0\n }\n});\nconst useInputStyles = makeStyles({\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n large: {\n paddingRight: tokens.spacingHorizontalMNudge\n }\n});\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: tokens.spacingHorizontalM,\n columnGap: tokens.spacingHorizontalXS\n },\n rest: {\n height: 0,\n width: 0,\n paddingLeft: 0,\n overflow: 'hidden'\n }\n});\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': {\n fontSize: '20px'\n },\n cursor: 'pointer'\n});\nconst useDismissStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': {\n fontSize: '16px'\n }\n },\n medium: {\n },\n large: {\n '> svg': {\n fontSize: '24px'\n }\n }\n});\n/**\n * Apply styling to the SearchBox slots based on the state\n */ export const useSearchBoxStyles_unstable = (state)=>{\n const { disabled, focused, size } = state;\n const rootStyles = useRootStyles();\n const inputStyles = useInputStyles();\n const contentAfterStyles = useContentAfterStyles();\n const dismissClassName = useDismissClassName();\n const dismissStyles = useDismissStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);\n if (state.dismiss) {\n // eslint-disable-next-line react-hooks/immutability\n state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);\n }\n if (state.contentBefore) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n }\n if (state.contentAfter) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);\n } else if (state.dismiss) {\n // eslint-disable-next-line react-hooks/immutability\n state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);\n }\n useInputStyles_unstable(state);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","useInputStyles_unstable","searchBoxClassNames","root","dismiss","contentAfter","contentBefore","input","useRootStyles","small","i8kkvl","B2u0y6b","uwmqm3","z189sj","medium","large","Boqhc8c","B8uat0v","unfocusedNoContentAfter","d","useInputStyles","useContentAfterStyles","rest","Bqenvij","a9b677","B68tc82","Bmxbyg5","Bpg54ce","p","useDismissClassName","useDismissStyles","disabled","sj55zd","Duoase","useSearchBoxStyles_unstable","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,mBAAmB;;;IAiGfgC,2BAA2B;;;;uBApGc,gBAAgB;4BAElC,uBAAuB;AACxD,4BAA4B;IAC/B/B,IAAI,EAAE,eAAe;IACrBC,OAAO,EAAE,wBAAwB;IACjCC,YAAY,EAAE,6BAA6B;IAC3CC,aAAa,EAAE,8BAA8B;IAC7CC,KAAK,EAAE;AACX,CAAC;AACD;;CAEA,GAAI,MAAMC,aAAa,GAAA,WAAA,OAAGV,eAAA,EAAA;IAAAW,KAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,MAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAE,KAAA,EAAA;QAAAL,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAN,KAAA,EAAA;QAAAK,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAG,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,uBAAA,EAAA;QAAAL,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAM,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAiCzB,CAAC;AACF,MAAMC,cAAc,GAAA,WAAA,OAAGtB,eAAA,EAAA;IAAAW,KAAA,EAAA;QAAAI,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,MAAA,EAAA;QAAAD,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAE,KAAA,EAAA;QAAAF,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAM,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUtB,CAAC;AACF,MAAME,qBAAqB,GAAA,WAAA,OAAGvB,eAAA,EAAA;IAAAO,YAAA,EAAA;QAAAO,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAF,MAAA,EAAA;IAAA;IAAAY,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAZ,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAa,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAR,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAS,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAW7B,CAAC;AACF,MAAMC,mBAAmB,GAAA,WAAA,OAAGhC,oBAAA,EAAA,YAAA,MAAA;IAAA;IAAA;CAU3B,CAAC;AACF,MAAMiC,gBAAgB,GAAA,WAAA,OAAGhC,eAAA,EAAA;IAAAiC,QAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAvB,KAAA,EAAA;QAAAwB,MAAA,EAAA;IAAA;IAAAnB,MAAA,EAAA,CAAA;IAAAC,KAAA,EAAA;QAAAkB,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAd,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAiBxB,CAAC;AAGS,qCAAqCgB,KAAK,IAAG;IACpD,MAAM,EAAEJ,QAAQ,EAAEK,OAAO,EAAEC,IAAAA,EAAM,GAAGF,KAAK;IACzC,MAAMG,UAAU,GAAG9B,aAAa,CAAC,CAAC;IAClC,MAAM+B,WAAW,GAAGnB,cAAc,CAAC,CAAC;IACpC,MAAMoB,kBAAkB,GAAGnB,qBAAqB,CAAC,CAAC;IAClD,MAAMoB,gBAAgB,GAAGZ,mBAAmB,CAAC,CAAC;IAC9C,MAAMa,aAAa,GAAGZ,gBAAgB,CAAC,CAAC;IACxC,oDAAA;IACAK,KAAK,CAAChC,IAAI,CAACwC,SAAS,OAAG5C,mBAAY,EAACG,mBAAmB,CAACC,IAAI,EAAEmC,UAAU,CAACD,IAAI,CAAC,EAAE,CAACD,OAAO,IAAIE,UAAU,CAACpB,uBAAuB,EAAEiB,KAAK,CAAChC,IAAI,CAACwC,SAAS,CAAC;IACrJ,oDAAA;IACAR,KAAK,CAAC5B,KAAK,CAACoC,SAAS,OAAG5C,mBAAY,EAACG,mBAAmB,CAACK,KAAK,EAAE+B,UAAU,CAAC/B,KAAK,EAAE,CAAC6B,OAAO,IAAIG,WAAW,CAACF,IAAI,CAAC,EAAEF,KAAK,CAAC5B,KAAK,CAACoC,SAAS,CAAC;IACvI,IAAIR,KAAK,CAAC/B,OAAO,EAAE;QACf,oDAAA;QACA+B,KAAK,CAAC/B,OAAO,CAACuC,SAAS,OAAG5C,mBAAY,EAACG,mBAAmB,CAACE,OAAO,EAAEqC,gBAAgB,EAAEV,QAAQ,IAAIW,aAAa,CAACX,QAAQ,EAAEW,aAAa,CAACL,IAAI,CAAC,EAAEF,KAAK,CAAC/B,OAAO,CAACuC,SAAS,CAAC;IAC3K;IACA,IAAIR,KAAK,CAAC7B,aAAa,EAAE;QACrB,oDAAA;QACA6B,KAAK,CAAC7B,aAAa,CAACqC,SAAS,OAAG5C,mBAAY,EAACG,mBAAmB,CAACI,aAAa,EAAE6B,KAAK,CAAC7B,aAAa,CAACqC,SAAS,CAAC;IAClH;IACA,IAAIR,KAAK,CAAC9B,YAAY,EAAE;QACpB,oDAAA;QACA8B,KAAK,CAAC9B,YAAY,CAACsC,SAAS,OAAG5C,mBAAY,EAACG,mBAAmB,CAACG,YAAY,EAAEmC,kBAAkB,CAACnC,YAAY,EAAE,CAAC+B,OAAO,IAAII,kBAAkB,CAAClB,IAAI,EAAEa,KAAK,CAAC9B,YAAY,CAACsC,SAAS,CAAC;IACrL,CAAC,MAAM,IAAIR,KAAK,CAAC/B,OAAO,EAAE;QACtB,oDAAA;QACA+B,KAAK,CAAC/B,OAAO,CAACuC,SAAS,OAAG5C,mBAAY,EAACoC,KAAK,CAAC/B,OAAO,CAACuC,SAAS,EAAEH,kBAAkB,CAACnC,YAAY,CAAC;IACpG;QACAJ,mCAAuB,EAACkC,KAAK,CAAC;IAC9B,OAAOA,KAAK;AAChB,CAAC"}
|
|
@@ -115,24 +115,29 @@ const useDismissStyles = (0, _react.makeStyles)({
|
|
|
115
115
|
}
|
|
116
116
|
});
|
|
117
117
|
const useSearchBoxStyles_unstable = (state)=>{
|
|
118
|
-
'use no memo';
|
|
119
118
|
const { disabled, focused, size } = state;
|
|
120
119
|
const rootStyles = useRootStyles();
|
|
121
120
|
const inputStyles = useInputStyles();
|
|
122
121
|
const contentAfterStyles = useContentAfterStyles();
|
|
123
122
|
const dismissClassName = useDismissClassName();
|
|
124
123
|
const dismissStyles = useDismissStyles();
|
|
124
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
125
125
|
state.root.className = (0, _react.mergeClasses)(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
|
|
126
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
126
127
|
state.input.className = (0, _react.mergeClasses)(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
|
|
127
128
|
if (state.dismiss) {
|
|
129
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
128
130
|
state.dismiss.className = (0, _react.mergeClasses)(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
|
|
129
131
|
}
|
|
130
132
|
if (state.contentBefore) {
|
|
133
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
131
134
|
state.contentBefore.className = (0, _react.mergeClasses)(searchBoxClassNames.contentBefore, state.contentBefore.className);
|
|
132
135
|
}
|
|
133
136
|
if (state.contentAfter) {
|
|
137
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
134
138
|
state.contentAfter.className = (0, _react.mergeClasses)(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);
|
|
135
139
|
} else if (state.dismiss) {
|
|
140
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
136
141
|
state.dismiss.className = (0, _react.mergeClasses)(state.dismiss.className, contentAfterStyles.contentAfter);
|
|
137
142
|
}
|
|
138
143
|
(0, _reactinput.useInputStyles_unstable)(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SearchBox/useSearchBoxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SearchBoxSlots, SearchBoxState } from './SearchBox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const searchBoxClassNames: SlotClassNames<SearchBoxSlots> = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n\n paddingLeft: tokens.spacingHorizontalS,\n paddingRight: tokens.spacingHorizontalS,\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n\n paddingLeft: tokens.spacingHorizontalMNudge,\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n\n input: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: 0,\n\n // removes the WebKit pseudoelement styling\n '::-webkit-search-decoration': {\n display: 'none',\n },\n '::-webkit-search-cancel-button': {\n display: 'none',\n },\n },\n\n unfocusedNoContentAfter: {\n paddingRight: 0,\n },\n});\n\nconst useInputStyles = makeStyles({\n small: {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS,\n },\n large: {\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n});\n\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: tokens.spacingHorizontalM,\n columnGap: tokens.spacingHorizontalXS,\n },\n rest: {\n height: 0,\n width: 0,\n paddingLeft: 0,\n overflow: 'hidden',\n },\n});\n\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': { fontSize: '20px' },\n cursor: 'pointer',\n});\n\nconst useDismissStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': { fontSize: '16px' },\n },\n medium: {\n // included in useDismissClassName\n },\n large: {\n '> svg': { fontSize: '24px' },\n },\n});\n\n/**\n * Apply styling to the SearchBox slots based on the state\n */\nexport const useSearchBoxStyles_unstable = (state: SearchBoxState): SearchBoxState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/SearchBox/useSearchBoxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SearchBoxSlots, SearchBoxState } from './SearchBox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const searchBoxClassNames: SlotClassNames<SearchBoxSlots> = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n columnGap: 0,\n maxWidth: '468px',\n\n paddingLeft: tokens.spacingHorizontalS,\n paddingRight: tokens.spacingHorizontalS,\n },\n large: {\n columnGap: 0,\n maxWidth: '468px',\n\n paddingLeft: tokens.spacingHorizontalMNudge,\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n\n input: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: 0,\n\n // removes the WebKit pseudoelement styling\n '::-webkit-search-decoration': {\n display: 'none',\n },\n '::-webkit-search-cancel-button': {\n display: 'none',\n },\n },\n\n unfocusedNoContentAfter: {\n paddingRight: 0,\n },\n});\n\nconst useInputStyles = makeStyles({\n small: {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS,\n },\n large: {\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n});\n\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: tokens.spacingHorizontalM,\n columnGap: tokens.spacingHorizontalXS,\n },\n rest: {\n height: 0,\n width: 0,\n paddingLeft: 0,\n overflow: 'hidden',\n },\n});\n\nconst useDismissClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': { fontSize: '20px' },\n cursor: 'pointer',\n});\n\nconst useDismissStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': { fontSize: '16px' },\n },\n medium: {\n // included in useDismissClassName\n },\n large: {\n '> svg': { fontSize: '24px' },\n },\n});\n\n/**\n * Apply styling to the SearchBox slots based on the state\n */\nexport const useSearchBoxStyles_unstable = (state: SearchBoxState): SearchBoxState => {\n const { disabled, focused, size } = state;\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputStyles();\n const contentAfterStyles = useContentAfterStyles();\n const dismissClassName = useDismissClassName();\n const dismissStyles = useDismissStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n searchBoxClassNames.root,\n rootStyles[size],\n !focused && rootStyles.unfocusedNoContentAfter,\n state.root.className,\n );\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(\n searchBoxClassNames.input,\n rootStyles.input,\n !focused && inputStyles[size],\n state.input.className,\n );\n\n if (state.dismiss) {\n // eslint-disable-next-line react-hooks/immutability\n state.dismiss.className = mergeClasses(\n searchBoxClassNames.dismiss,\n dismissClassName,\n disabled && dismissStyles.disabled,\n dismissStyles[size],\n\n state.dismiss.className,\n );\n }\n\n if (state.contentBefore) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n }\n\n if (state.contentAfter) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentAfter.className = mergeClasses(\n searchBoxClassNames.contentAfter,\n contentAfterStyles.contentAfter,\n\n !focused && contentAfterStyles.rest,\n\n state.contentAfter.className,\n );\n } else if (state.dismiss) {\n // eslint-disable-next-line react-hooks/immutability\n state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);\n }\n\n useInputStyles_unstable(state);\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","useInputStyles_unstable","searchBoxClassNames","root","dismiss","contentAfter","contentBefore","input","useRootStyles","small","columnGap","maxWidth","paddingLeft","spacingHorizontalSNudge","paddingRight","medium","spacingHorizontalS","large","spacingHorizontalMNudge","display","unfocusedNoContentAfter","useInputStyles","useContentAfterStyles","spacingHorizontalM","spacingHorizontalXS","rest","height","width","overflow","useDismissClassName","boxSizing","color","colorNeutralForeground3","fontSize","cursor","useDismissStyles","disabled","colorNeutralForegroundDisabled","useSearchBoxStyles_unstable","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-search",
|
|
3
|
-
"version": "9.4.
|
|
3
|
+
"version": "9.4.4",
|
|
4
4
|
"description": "Search input for Fluent UI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@fluentui/react-icons": "^2.0.245",
|
|
16
|
-
"@fluentui/react-input": "^9.8.
|
|
17
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
16
|
+
"@fluentui/react-input": "^9.8.4",
|
|
17
|
+
"@fluentui/react-jsx-runtime": "^9.4.4",
|
|
18
18
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
19
19
|
"@fluentui/react-theme": "^9.2.1",
|
|
20
|
-
"@fluentui/react-utilities": "^9.26.
|
|
20
|
+
"@fluentui/react-utilities": "^9.26.5",
|
|
21
21
|
"@griffel/react": "^1.5.32",
|
|
22
22
|
"@swc/helpers": "^0.5.1"
|
|
23
23
|
},
|