@fluentui/react-search 9.0.11 → 9.0.13
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 +24 -2
- package/lib/components/SearchBox/useSearchBox.js +10 -6
- package/lib/components/SearchBox/useSearchBox.js.map +1 -1
- package/lib/components/SearchBox/useSearchBoxStyles.styles.js +22 -4
- package/lib/components/SearchBox/useSearchBoxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SearchBox/useSearchBox.js +10 -6
- package/lib-commonjs/components/SearchBox/useSearchBox.js.map +1 -1
- package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.js +46 -4
- package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,34 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-search
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 30 Jul 2024 18:45:09 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.0.13)
|
|
8
|
+
|
|
9
|
+
Tue, 30 Jul 2024 18:45:09 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.12..@fluentui/react-search_v9.0.13)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: replace useEventCallback with useCallback for focus ([PR #32079](https://github.com/microsoft/fluentui/pull/32079) by vgenaev@gmail.com)
|
|
15
|
+
- fix: Expand hit target when there's no content after. ([PR #32114](https://github.com/microsoft/fluentui/pull/32114) by estebanmu@microsoft.com)
|
|
16
|
+
- Bump @fluentui/react-input to v9.4.84 ([PR #32157](https://github.com/microsoft/fluentui/pull/32157) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.0.12)
|
|
19
|
+
|
|
20
|
+
Tue, 23 Jul 2024 20:13:14 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.11..@fluentui/react-search_v9.0.12)
|
|
22
|
+
|
|
23
|
+
### Patches
|
|
24
|
+
|
|
25
|
+
- Bump @fluentui/react-input to v9.4.83 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
|
|
26
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.42 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
|
|
27
|
+
- Bump @fluentui/react-utilities to v9.18.13 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
|
|
28
|
+
|
|
7
29
|
## [9.0.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.0.11)
|
|
8
30
|
|
|
9
|
-
Mon, 15 Jul 2024 17:
|
|
31
|
+
Mon, 15 Jul 2024 17:25:44 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.0.10..@fluentui/react-search_v9.0.11)
|
|
11
33
|
|
|
12
34
|
### Patches
|
|
@@ -21,13 +21,17 @@ import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
|
|
|
21
21
|
});
|
|
22
22
|
// Tracks the focus of the component for the contentAfter and dismiss button
|
|
23
23
|
const [focused, setFocused] = React.useState(false);
|
|
24
|
-
const onFocus =
|
|
24
|
+
const onFocus = React.useCallback(()=>{
|
|
25
25
|
setFocused(true);
|
|
26
|
-
}
|
|
27
|
-
|
|
26
|
+
}, [
|
|
27
|
+
setFocused
|
|
28
|
+
]);
|
|
29
|
+
const onBlur = React.useCallback((ev)=>{
|
|
28
30
|
var _searchBoxRootRef_current;
|
|
29
31
|
setFocused(!!((_searchBoxRootRef_current = searchBoxRootRef.current) === null || _searchBoxRootRef_current === void 0 ? void 0 : _searchBoxRootRef_current.contains(ev.relatedTarget)));
|
|
30
|
-
}
|
|
32
|
+
}, [
|
|
33
|
+
setFocused
|
|
34
|
+
]);
|
|
31
35
|
const rootProps = slot.resolveShorthand(root);
|
|
32
36
|
const handleDismissClick = useEventCallback((event)=>{
|
|
33
37
|
var _props_onChange;
|
|
@@ -49,8 +53,8 @@ import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
|
|
|
49
53
|
root: slot.always({
|
|
50
54
|
...rootProps,
|
|
51
55
|
ref: useMergedRefs(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
|
|
52
|
-
onFocus:
|
|
53
|
-
onBlur:
|
|
56
|
+
onFocus: mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus),
|
|
57
|
+
onBlur: mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur)
|
|
54
58
|
}, {
|
|
55
59
|
elementType: 'span'
|
|
56
60
|
}),
|
|
@@ -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 =
|
|
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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"}
|
|
@@ -35,10 +35,26 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
35
35
|
z189sj: ["fhxju0i", "f1cnd47f"],
|
|
36
36
|
Boqhc8c: "f18izjht",
|
|
37
37
|
B8uat0v: "fcoa6sg"
|
|
38
|
+
},
|
|
39
|
+
unfocusedNoContentAfter: {
|
|
40
|
+
z189sj: ["fhxju0i", "f1cnd47f"]
|
|
38
41
|
}
|
|
39
42
|
}, {
|
|
40
43
|
d: [".fjuset5{column-gap:0;}", ".f1xzfw5u{max-width:468px;}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f18izjht::-webkit-search-decoration{display:none;}", ".fcoa6sg::-webkit-search-cancel-button{display:none;}"]
|
|
41
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
|
+
}
|
|
55
|
+
}, {
|
|
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);}"]
|
|
57
|
+
});
|
|
42
58
|
const useContentAfterStyles = /*#__PURE__*/__styles({
|
|
43
59
|
contentAfter: {
|
|
44
60
|
uwmqm3: ["f1uw59to", "fw5db7e"],
|
|
@@ -47,10 +63,11 @@ const useContentAfterStyles = /*#__PURE__*/__styles({
|
|
|
47
63
|
rest: {
|
|
48
64
|
abs64n: "fk73vx1",
|
|
49
65
|
Bqenvij: "fniina8",
|
|
50
|
-
a9b677: "f3tsq5r"
|
|
66
|
+
a9b677: "f3tsq5r",
|
|
67
|
+
uwmqm3: ["f1cnd47f", "fhxju0i"]
|
|
51
68
|
}
|
|
52
69
|
}, {
|
|
53
|
-
d: [".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}", ".fk73vx1{opacity:0;}", ".fniina8{height:0;}", ".f3tsq5r{width:0;}"]
|
|
70
|
+
d: [".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}", ".fk73vx1{opacity:0;}", ".fniina8{height:0;}", ".f3tsq5r{width:0;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}"]
|
|
54
71
|
});
|
|
55
72
|
const useDismissClassName = /*#__PURE__*/__resetStyles("r1pvzcuu", null, [".r1pvzcuu{box-sizing:border-box;color:var(--colorNeutralForeground3);display:flex;cursor:pointer;}", ".r1pvzcuu>svg{font-size:20px;}"]);
|
|
56
73
|
const useDismissStyles = /*#__PURE__*/__styles({
|
|
@@ -79,11 +96,12 @@ export const useSearchBoxStyles_unstable = state => {
|
|
|
79
96
|
size
|
|
80
97
|
} = state;
|
|
81
98
|
const rootStyles = useRootStyles();
|
|
99
|
+
const inputStyles = useInputStyles();
|
|
82
100
|
const contentAfterStyles = useContentAfterStyles();
|
|
83
101
|
const dismissClassName = useDismissClassName();
|
|
84
102
|
const dismissStyles = useDismissStyles();
|
|
85
|
-
state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], state.root.className);
|
|
86
|
-
state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, state.input.className);
|
|
103
|
+
state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
|
|
104
|
+
state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
|
|
87
105
|
if (state.dismiss) {
|
|
88
106
|
state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
|
|
89
107
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","useInputStyles_unstable","searchBoxClassNames","root","dismiss","contentAfter","contentBefore","input","useRootStyles","small","i8kkvl","B2u0y6b","uwmqm3","z189sj","medium","large","Boqhc8c","B8uat0v","d","useContentAfterStyles","rest","abs64n","Bqenvij","a9b677","useDismissClassName","useDismissStyles","disabled","sj55zd","Duoase","useSearchBoxStyles_unstable","state","focused","size","rootStyles","contentAfterStyles","dismissClassName","dismissStyles","className"],"sources":["useSearchBoxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\nexport const searchBoxClassNames = {\n root: 'fui-SearchBox',\n dismiss: 'fui-SearchBox__dismiss',\n contentAfter: 'fui-SearchBox__contentAfter',\n contentBefore: 'fui-SearchBox__contentBefore',\n input: 'fui-SearchBox__input'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n small: {\n columnGap: 0,\n maxWidth: '468px',\n paddingLeft: 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});\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: tokens.spacingHorizontalM,\n columnGap: 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: 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 '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":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,uBAAuB;AAC/D,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,OAAO,EAAE,wBAAwB;EACjCC,YAAY,EAAE,6BAA6B;EAC3CC,aAAa,EAAE,8BAA8B;EAC7CC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGV,QAAA;EAAAW,KAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAJ,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAE,KAAA;IAAAL,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAN,KAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAG,OAAA;IAAAC,OAAA;EAAA;AAAA;
|
|
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: 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 opacity: 0,\n height: 0,\n width: 0,\n paddingLeft: 0\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 '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":[]}
|
|
@@ -24,13 +24,17 @@ const useSearchBox_unstable = (props, ref)=>{
|
|
|
24
24
|
});
|
|
25
25
|
// Tracks the focus of the component for the contentAfter and dismiss button
|
|
26
26
|
const [focused, setFocused] = _react.useState(false);
|
|
27
|
-
const onFocus =
|
|
27
|
+
const onFocus = _react.useCallback(()=>{
|
|
28
28
|
setFocused(true);
|
|
29
|
-
}
|
|
30
|
-
|
|
29
|
+
}, [
|
|
30
|
+
setFocused
|
|
31
|
+
]);
|
|
32
|
+
const onBlur = _react.useCallback((ev)=>{
|
|
31
33
|
var _searchBoxRootRef_current;
|
|
32
34
|
setFocused(!!((_searchBoxRootRef_current = searchBoxRootRef.current) === null || _searchBoxRootRef_current === void 0 ? void 0 : _searchBoxRootRef_current.contains(ev.relatedTarget)));
|
|
33
|
-
}
|
|
35
|
+
}, [
|
|
36
|
+
setFocused
|
|
37
|
+
]);
|
|
34
38
|
const rootProps = _reactutilities.slot.resolveShorthand(root);
|
|
35
39
|
const handleDismissClick = (0, _reactutilities.useEventCallback)((event)=>{
|
|
36
40
|
var _props_onChange;
|
|
@@ -52,8 +56,8 @@ const useSearchBox_unstable = (props, ref)=>{
|
|
|
52
56
|
root: _reactutilities.slot.always({
|
|
53
57
|
...rootProps,
|
|
54
58
|
ref: (0, _reactutilities.useMergedRefs)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
|
|
55
|
-
onFocus: (0, _reactutilities.
|
|
56
|
-
onBlur: (0, _reactutilities.
|
|
59
|
+
onFocus: (0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus),
|
|
60
|
+
onBlur: (0, _reactutilities.mergeCallbacks)(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur)
|
|
57
61
|
}, {
|
|
58
62
|
elementType: 'span'
|
|
59
63
|
}),
|
|
@@ -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 =
|
|
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":";;;;+BAuBaA;;;eAAAA;;;;iEAvBU;gCAQhB;4BAC2B;4BACY;AAavC,MAAMA,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EACJC,OAAO,QAAQ,EACfC,WAAW,KAAK,EAChBC,IAAI,EACJC,aAAa,EACbC,OAAO,EACPC,YAAY,EACZC,KAAK,EACLC,YAAY,EACZ,GAAGC,YACJ,GAAGV;IAEJ,MAAMW,mBAAmBC,OAAMC,MAAM,CAAiB;IACtD,MAAMC,eAAeF,OAAMC,MAAM,CAAmB;IAEpD,MAAM,CAACE,eAAeC,iBAAiB,GAAGC,IAAAA,oCAAAA,EAAqB;QAC7DC,OAAOV;QACPW,cAAcV;QACdW,cAAc;IAChB;IAEA,4EAA4E;IAC5E,MAAM,CAACC,SAASC,WAAW,GAAGV,OAAMW,QAAQ,CAAC;IAE7C,MAAMC,UAAUZ,OAAMa,WAAW,CAAC;QAChCH,WAAW;IACb,GAAG;QAACA;KAAW;IAEf,MAAMI,SAAmDd,OAAMa,WAAW,CACxEE,CAAAA;YACehB;QAAbW,WAAW,CAAC,CAAA,CAAA,AAACX,CAAAA,4BAAAA,iBAAiBiB,OAAO,AAAPA,MAAO,QAAxBjB,8BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,0BAA0BkB,QAAQ,CAACF,GAAGG,aAAa,CAAA;IAClE,GACA;QAACR;KAAW;IAGd,MAAMS,YAAYC,oBAAAA,CAAKC,gBAAgB,CAAC7B;IAExC,MAAM8B,qBAAqBC,IAAAA,gCAAAA,EAAiB,CAACC;YAM3CpC;QALA,IAAIqC,IAAAA,mCAAAA,EAAoB/B,UAAU;gBAChCA;YAAAA,CAAAA,mBAAAA,QAAQgC,OAAO,AAAPA,MAAO,QAAfhC,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAAA,IAAAA,CAAAA,SAAkB8B;QACpB;QACA,MAAMG,WAAW;QACjBvB,iBAAiBuB;QACjBvC,CAAAA,kBAAAA,MAAMwC,QAAQ,AAARA,MAAQ,QAAdxC,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAAA,IAAAA,CAAAA,OAAiBoC,OAAO;YAAE5B,OAAO+B;QAAS;IAC5C;IAEA,MAAME,aAAaC,IAAAA,6BAAAA,EACjB;QACEC,MAAM;QACNxC;QACAD;QACAM,OAAOO;QACPX,MAAM4B,oBAAAA,CAAKY,MAAM,CACf;YACE,GAAGb,SAAS;YACZ9B,KAAK4C,IAAAA,6BAAAA,EAAcd,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAW9B,GAAG,EAAEU;YACnCa,SAASsB,IAAAA,8BAAAA,EAAef,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAWP,OAAO,EAAEA;YAC5CE,QAAQoB,IAAAA,8BAAAA,EAAef,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAWL,MAAM,EAAEA;QAC5C,GACA;YACEqB,aAAa;QACf;QAEF1C,eAAe2B,oBAAAA,CAAKgB,QAAQ,CAAC3C,eAAe;YAC1C4C,iBAAiB;YACjBC,cAAc;gBACZC,UAAAA,WAAAA,GAAUvC,OAAAwC,aAAA,CAACC,yBAAAA,EAAAA;YACb;YACAN,aAAa;QACf;QACAxC,cAAcyB,oBAAAA,CAAKgB,QAAQ,CAACzC,cAAc;YACxC0C,iBAAiB;YACjBF,aAAa;QACf;QACA,GAAGrC,UAAU;QACb8B,UAAUL,IAAAA,gCAAAA,EAAiBR,CAAAA;gBAEzB3B;YADA,MAAMuC,WAAWZ,GAAG2B,MAAM,CAAC9C,KAAK;YAChCR,CAAAA,kBAAAA,MAAMwC,QAAQ,AAARA,MAAQ,QAAdxC,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAAA,IAAAA,CAAAA,OAAiB2B,IAAI;gBAAEnB,OAAO+B;YAAS;YACvCvB,iBAAiBuB;QACnB;IACF,GACAM,IAAAA,6BAAAA,EAAc/B,cAAcb;IAG9B,MAAMiB,QAAwB;QAC5B,GAAGuB,UAAU;QACbc,YAAY;YACV,GAAGd,WAAWc,UAAU;YACxBjD,SAAS;QACX;QACAA,SAAS0B,oBAAAA,CAAKgB,QAAQ,CAAC1C,SAAS;YAC9B4C,cAAc;gBACZC,UAAAA,WAAAA,GAAUvC,OAAAwC,aAAA,CAACI,0BAAAA,EAAAA;gBACXC,MAAM;gBACN,cAAc;gBACdC,UAAU,CAAC;YACb;YACAT,iBAAiB;YACjBF,aAAa;QACf;QACA5C;QACAkB;QACAnB;IACF;IAEA,IAAIgB,MAAMZ,OAAO,EAAE;QACjBY,MAAMZ,OAAO,CAACgC,OAAO,GAAGJ;IAC1B;IAEA,OAAOhB;AACT"}
|
|
@@ -75,6 +75,12 @@ const searchBoxClassNames = {
|
|
|
75
75
|
],
|
|
76
76
|
Boqhc8c: "f18izjht",
|
|
77
77
|
B8uat0v: "fcoa6sg"
|
|
78
|
+
},
|
|
79
|
+
unfocusedNoContentAfter: {
|
|
80
|
+
z189sj: [
|
|
81
|
+
"fhxju0i",
|
|
82
|
+
"f1cnd47f"
|
|
83
|
+
]
|
|
78
84
|
}
|
|
79
85
|
}, {
|
|
80
86
|
d: [
|
|
@@ -92,6 +98,35 @@ const searchBoxClassNames = {
|
|
|
92
98
|
".fcoa6sg::-webkit-search-cancel-button{display:none;}"
|
|
93
99
|
]
|
|
94
100
|
});
|
|
101
|
+
const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
102
|
+
small: {
|
|
103
|
+
z189sj: [
|
|
104
|
+
"fdw0yi8",
|
|
105
|
+
"fk8j09s"
|
|
106
|
+
]
|
|
107
|
+
},
|
|
108
|
+
medium: {
|
|
109
|
+
z189sj: [
|
|
110
|
+
"f1vdfbxk",
|
|
111
|
+
"f1f5gg8d"
|
|
112
|
+
]
|
|
113
|
+
},
|
|
114
|
+
large: {
|
|
115
|
+
z189sj: [
|
|
116
|
+
"f11gcy0p",
|
|
117
|
+
"f1ng84yb"
|
|
118
|
+
]
|
|
119
|
+
}
|
|
120
|
+
}, {
|
|
121
|
+
d: [
|
|
122
|
+
".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
|
|
123
|
+
".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
|
|
124
|
+
".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
|
|
125
|
+
".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
|
|
126
|
+
".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}",
|
|
127
|
+
".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}"
|
|
128
|
+
]
|
|
129
|
+
});
|
|
95
130
|
const useContentAfterStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
96
131
|
contentAfter: {
|
|
97
132
|
uwmqm3: [
|
|
@@ -103,7 +138,11 @@ const useContentAfterStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
103
138
|
rest: {
|
|
104
139
|
abs64n: "fk73vx1",
|
|
105
140
|
Bqenvij: "fniina8",
|
|
106
|
-
a9b677: "f3tsq5r"
|
|
141
|
+
a9b677: "f3tsq5r",
|
|
142
|
+
uwmqm3: [
|
|
143
|
+
"f1cnd47f",
|
|
144
|
+
"fhxju0i"
|
|
145
|
+
]
|
|
107
146
|
}
|
|
108
147
|
}, {
|
|
109
148
|
d: [
|
|
@@ -112,7 +151,9 @@ const useContentAfterStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
112
151
|
".f1ufnopg{column-gap:var(--spacingHorizontalXS);}",
|
|
113
152
|
".fk73vx1{opacity:0;}",
|
|
114
153
|
".fniina8{height:0;}",
|
|
115
|
-
".f3tsq5r{width:0;}"
|
|
154
|
+
".f3tsq5r{width:0;}",
|
|
155
|
+
".f1cnd47f{padding-left:0;}",
|
|
156
|
+
".fhxju0i{padding-right:0;}"
|
|
116
157
|
]
|
|
117
158
|
});
|
|
118
159
|
const useDismissClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1pvzcuu", null, [
|
|
@@ -141,11 +182,12 @@ const useSearchBoxStyles_unstable = (state)=>{
|
|
|
141
182
|
'use no memo';
|
|
142
183
|
const { disabled, focused, size } = state;
|
|
143
184
|
const rootStyles = useRootStyles();
|
|
185
|
+
const inputStyles = useInputStyles();
|
|
144
186
|
const contentAfterStyles = useContentAfterStyles();
|
|
145
187
|
const dismissClassName = useDismissClassName();
|
|
146
188
|
const dismissStyles = useDismissStyles();
|
|
147
|
-
state.root.className = (0, _react.mergeClasses)(searchBoxClassNames.root, rootStyles[size], state.root.className);
|
|
148
|
-
state.input.className = (0, _react.mergeClasses)(searchBoxClassNames.input, rootStyles.input, state.input.className);
|
|
189
|
+
state.root.className = (0, _react.mergeClasses)(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
|
|
190
|
+
state.input.className = (0, _react.mergeClasses)(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
|
|
149
191
|
if (state.dismiss) {
|
|
150
192
|
state.dismiss.className = (0, _react.mergeClasses)(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
|
|
151
193
|
}
|
|
@@ -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: 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});\nconst useContentAfterStyles = makeStyles({\n contentAfter: {\n paddingLeft: tokens.spacingHorizontalM,\n columnGap: 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: 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 '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":"
|
|
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: 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 opacity: 0,\n height: 0,\n width: 0,\n paddingLeft: 0\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 'use no memo';\n const { disabled, focused, size } = state;\n const rootStyles = useRootStyles();\n const inputStyles = useInputStyles();\n const contentAfterStyles = useContentAfterStyles();\n const dismissClassName = useDismissClassName();\n const dismissStyles = useDismissStyles();\n state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);\n state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);\n if (state.dismiss) {\n state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);\n }\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);\n } else if (state.dismiss) {\n state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);\n }\n useInputStyles_unstable(state);\n return state;\n};\n"],"names":["searchBoxClassNames","useSearchBoxStyles_unstable","root","dismiss","contentAfter","contentBefore","input","useRootStyles","__styles","small","i8kkvl","B2u0y6b","uwmqm3","z189sj","medium","large","Boqhc8c","B8uat0v","unfocusedNoContentAfter","d","useInputStyles","useContentAfterStyles","rest","abs64n","Bqenvij","a9b677","useDismissClassName","__resetStyles","useDismissStyles","disabled","sj55zd","Duoase","state","focused","size","rootStyles","inputStyles","contentAfterStyles","dismissClassName","dismissStyles","className","mergeClasses","useInputStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-search",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.13",
|
|
4
4
|
"description": "Search input for Fluent UI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@fluentui/react-icons": "^2.0.245",
|
|
35
|
-
"@fluentui/react-input": "^9.4.
|
|
36
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
35
|
+
"@fluentui/react-input": "^9.4.84",
|
|
36
|
+
"@fluentui/react-jsx-runtime": "^9.0.42",
|
|
37
37
|
"@fluentui/react-theme": "^9.1.19",
|
|
38
|
-
"@fluentui/react-utilities": "^9.18.
|
|
38
|
+
"@fluentui/react-utilities": "^9.18.13",
|
|
39
39
|
"@griffel/react": "^1.5.22",
|
|
40
40
|
"@swc/helpers": "^0.5.1"
|
|
41
41
|
},
|