@fluentui/react-search 9.2.6 → 9.3.0
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 +21 -2
- package/lib/components/SearchBox/useSearchBoxStyles.styles.raw.js +124 -0
- package/lib/components/SearchBox/useSearchBoxStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.raw.js +139 -0
- package/lib-commonjs/components/SearchBox/useSearchBoxStyles.styles.raw.js.map +1 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-search
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 17 Jul 2025 13:45:45 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.3.0)
|
|
8
|
+
|
|
9
|
+
Thu, 17 Jul 2025 13:45:45 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.2.7..@fluentui/react-search_v9.3.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-input to v9.7.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.2.7)
|
|
18
|
+
|
|
19
|
+
Fri, 11 Jul 2025 15:59:24 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.2.6..@fluentui/react-search_v9.2.7)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- Bump @fluentui/react-input to v9.6.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
|
|
25
|
+
|
|
7
26
|
## [9.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-search_v9.2.6)
|
|
8
27
|
|
|
9
|
-
Fri, 04 Jul 2025 10:
|
|
28
|
+
Fri, 04 Jul 2025 10:02:51 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-search_v9.2.5..@fluentui/react-search_v9.2.6)
|
|
11
30
|
|
|
12
31
|
### Patches
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
|
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
|
3
|
+
import { useInputStyles_unstable } from '@fluentui/react-input';
|
|
4
|
+
export const searchBoxClassNames = {
|
|
5
|
+
root: 'fui-SearchBox',
|
|
6
|
+
dismiss: 'fui-SearchBox__dismiss',
|
|
7
|
+
contentAfter: 'fui-SearchBox__contentAfter',
|
|
8
|
+
contentBefore: 'fui-SearchBox__contentBefore',
|
|
9
|
+
input: 'fui-SearchBox__input'
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Styles for the root slot
|
|
13
|
+
*/ const useRootStyles = makeStyles({
|
|
14
|
+
small: {
|
|
15
|
+
columnGap: 0,
|
|
16
|
+
maxWidth: '468px',
|
|
17
|
+
paddingLeft: tokens.spacingHorizontalSNudge,
|
|
18
|
+
paddingRight: tokens.spacingHorizontalSNudge
|
|
19
|
+
},
|
|
20
|
+
medium: {
|
|
21
|
+
columnGap: 0,
|
|
22
|
+
maxWidth: '468px',
|
|
23
|
+
paddingLeft: tokens.spacingHorizontalS,
|
|
24
|
+
paddingRight: tokens.spacingHorizontalS
|
|
25
|
+
},
|
|
26
|
+
large: {
|
|
27
|
+
columnGap: 0,
|
|
28
|
+
maxWidth: '468px',
|
|
29
|
+
paddingLeft: tokens.spacingHorizontalMNudge,
|
|
30
|
+
paddingRight: tokens.spacingHorizontalMNudge
|
|
31
|
+
},
|
|
32
|
+
input: {
|
|
33
|
+
paddingLeft: tokens.spacingHorizontalSNudge,
|
|
34
|
+
paddingRight: 0,
|
|
35
|
+
// removes the WebKit pseudoelement styling
|
|
36
|
+
'::-webkit-search-decoration': {
|
|
37
|
+
display: 'none'
|
|
38
|
+
},
|
|
39
|
+
'::-webkit-search-cancel-button': {
|
|
40
|
+
display: 'none'
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
unfocusedNoContentAfter: {
|
|
44
|
+
paddingRight: 0
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
const useInputStyles = makeStyles({
|
|
48
|
+
small: {
|
|
49
|
+
paddingRight: tokens.spacingHorizontalSNudge
|
|
50
|
+
},
|
|
51
|
+
medium: {
|
|
52
|
+
paddingRight: tokens.spacingHorizontalS
|
|
53
|
+
},
|
|
54
|
+
large: {
|
|
55
|
+
paddingRight: tokens.spacingHorizontalMNudge
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
const useContentAfterStyles = makeStyles({
|
|
59
|
+
contentAfter: {
|
|
60
|
+
paddingLeft: tokens.spacingHorizontalM,
|
|
61
|
+
columnGap: tokens.spacingHorizontalXS
|
|
62
|
+
},
|
|
63
|
+
rest: {
|
|
64
|
+
height: 0,
|
|
65
|
+
width: 0,
|
|
66
|
+
paddingLeft: 0,
|
|
67
|
+
overflow: 'hidden'
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
const useDismissClassName = makeResetStyles({
|
|
71
|
+
boxSizing: 'border-box',
|
|
72
|
+
color: tokens.colorNeutralForeground3,
|
|
73
|
+
display: 'flex',
|
|
74
|
+
// special case styling for icons (most common case) to ensure they're centered vertically
|
|
75
|
+
// size: medium (default)
|
|
76
|
+
'> svg': {
|
|
77
|
+
fontSize: '20px'
|
|
78
|
+
},
|
|
79
|
+
cursor: 'pointer'
|
|
80
|
+
});
|
|
81
|
+
const useDismissStyles = makeStyles({
|
|
82
|
+
disabled: {
|
|
83
|
+
color: tokens.colorNeutralForegroundDisabled
|
|
84
|
+
},
|
|
85
|
+
// Ensure resizable icons show up with the proper font size
|
|
86
|
+
small: {
|
|
87
|
+
'> svg': {
|
|
88
|
+
fontSize: '16px'
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
medium: {
|
|
92
|
+
},
|
|
93
|
+
large: {
|
|
94
|
+
'> svg': {
|
|
95
|
+
fontSize: '24px'
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
/**
|
|
100
|
+
* Apply styling to the SearchBox slots based on the state
|
|
101
|
+
*/ export const useSearchBoxStyles_unstable = (state)=>{
|
|
102
|
+
'use no memo';
|
|
103
|
+
const { disabled, focused, size } = state;
|
|
104
|
+
const rootStyles = useRootStyles();
|
|
105
|
+
const inputStyles = useInputStyles();
|
|
106
|
+
const contentAfterStyles = useContentAfterStyles();
|
|
107
|
+
const dismissClassName = useDismissClassName();
|
|
108
|
+
const dismissStyles = useDismissStyles();
|
|
109
|
+
state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
|
|
110
|
+
state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
|
|
111
|
+
if (state.dismiss) {
|
|
112
|
+
state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
|
|
113
|
+
}
|
|
114
|
+
if (state.contentBefore) {
|
|
115
|
+
state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);
|
|
116
|
+
}
|
|
117
|
+
if (state.contentAfter) {
|
|
118
|
+
state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);
|
|
119
|
+
} else if (state.dismiss) {
|
|
120
|
+
state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);
|
|
121
|
+
}
|
|
122
|
+
useInputStyles_unstable(state);
|
|
123
|
+
return state;
|
|
124
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/SearchBox/useSearchBoxStyles.styles.ts"],"sourcesContent":["import { 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 'use no memo';\n\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 state.root.className = mergeClasses(\n searchBoxClassNames.root,\n rootStyles[size],\n !focused && rootStyles.unfocusedNoContentAfter,\n state.root.className,\n );\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 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 state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n }\n\n if (state.contentAfter) {\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 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
searchBoxClassNames: function() {
|
|
13
|
+
return searchBoxClassNames;
|
|
14
|
+
},
|
|
15
|
+
useSearchBoxStyles_unstable: function() {
|
|
16
|
+
return useSearchBoxStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
+
const _reactinput = require("@fluentui/react-input");
|
|
22
|
+
const searchBoxClassNames = {
|
|
23
|
+
root: 'fui-SearchBox',
|
|
24
|
+
dismiss: 'fui-SearchBox__dismiss',
|
|
25
|
+
contentAfter: 'fui-SearchBox__contentAfter',
|
|
26
|
+
contentBefore: 'fui-SearchBox__contentBefore',
|
|
27
|
+
input: 'fui-SearchBox__input'
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* Styles for the root slot
|
|
31
|
+
*/ const useRootStyles = (0, _react.makeStyles)({
|
|
32
|
+
small: {
|
|
33
|
+
columnGap: 0,
|
|
34
|
+
maxWidth: '468px',
|
|
35
|
+
paddingLeft: _reacttheme.tokens.spacingHorizontalSNudge,
|
|
36
|
+
paddingRight: _reacttheme.tokens.spacingHorizontalSNudge
|
|
37
|
+
},
|
|
38
|
+
medium: {
|
|
39
|
+
columnGap: 0,
|
|
40
|
+
maxWidth: '468px',
|
|
41
|
+
paddingLeft: _reacttheme.tokens.spacingHorizontalS,
|
|
42
|
+
paddingRight: _reacttheme.tokens.spacingHorizontalS
|
|
43
|
+
},
|
|
44
|
+
large: {
|
|
45
|
+
columnGap: 0,
|
|
46
|
+
maxWidth: '468px',
|
|
47
|
+
paddingLeft: _reacttheme.tokens.spacingHorizontalMNudge,
|
|
48
|
+
paddingRight: _reacttheme.tokens.spacingHorizontalMNudge
|
|
49
|
+
},
|
|
50
|
+
input: {
|
|
51
|
+
paddingLeft: _reacttheme.tokens.spacingHorizontalSNudge,
|
|
52
|
+
paddingRight: 0,
|
|
53
|
+
// removes the WebKit pseudoelement styling
|
|
54
|
+
'::-webkit-search-decoration': {
|
|
55
|
+
display: 'none'
|
|
56
|
+
},
|
|
57
|
+
'::-webkit-search-cancel-button': {
|
|
58
|
+
display: 'none'
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
unfocusedNoContentAfter: {
|
|
62
|
+
paddingRight: 0
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
const useInputStyles = (0, _react.makeStyles)({
|
|
66
|
+
small: {
|
|
67
|
+
paddingRight: _reacttheme.tokens.spacingHorizontalSNudge
|
|
68
|
+
},
|
|
69
|
+
medium: {
|
|
70
|
+
paddingRight: _reacttheme.tokens.spacingHorizontalS
|
|
71
|
+
},
|
|
72
|
+
large: {
|
|
73
|
+
paddingRight: _reacttheme.tokens.spacingHorizontalMNudge
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
const useContentAfterStyles = (0, _react.makeStyles)({
|
|
77
|
+
contentAfter: {
|
|
78
|
+
paddingLeft: _reacttheme.tokens.spacingHorizontalM,
|
|
79
|
+
columnGap: _reacttheme.tokens.spacingHorizontalXS
|
|
80
|
+
},
|
|
81
|
+
rest: {
|
|
82
|
+
height: 0,
|
|
83
|
+
width: 0,
|
|
84
|
+
paddingLeft: 0,
|
|
85
|
+
overflow: 'hidden'
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
const useDismissClassName = (0, _react.makeResetStyles)({
|
|
89
|
+
boxSizing: 'border-box',
|
|
90
|
+
color: _reacttheme.tokens.colorNeutralForeground3,
|
|
91
|
+
display: 'flex',
|
|
92
|
+
// special case styling for icons (most common case) to ensure they're centered vertically
|
|
93
|
+
// size: medium (default)
|
|
94
|
+
'> svg': {
|
|
95
|
+
fontSize: '20px'
|
|
96
|
+
},
|
|
97
|
+
cursor: 'pointer'
|
|
98
|
+
});
|
|
99
|
+
const useDismissStyles = (0, _react.makeStyles)({
|
|
100
|
+
disabled: {
|
|
101
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
|
102
|
+
},
|
|
103
|
+
// Ensure resizable icons show up with the proper font size
|
|
104
|
+
small: {
|
|
105
|
+
'> svg': {
|
|
106
|
+
fontSize: '16px'
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
medium: {},
|
|
110
|
+
large: {
|
|
111
|
+
'> svg': {
|
|
112
|
+
fontSize: '24px'
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
const useSearchBoxStyles_unstable = (state)=>{
|
|
117
|
+
'use no memo';
|
|
118
|
+
const { disabled, focused, size } = state;
|
|
119
|
+
const rootStyles = useRootStyles();
|
|
120
|
+
const inputStyles = useInputStyles();
|
|
121
|
+
const contentAfterStyles = useContentAfterStyles();
|
|
122
|
+
const dismissClassName = useDismissClassName();
|
|
123
|
+
const dismissStyles = useDismissStyles();
|
|
124
|
+
state.root.className = (0, _react.mergeClasses)(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
|
|
125
|
+
state.input.className = (0, _react.mergeClasses)(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
|
|
126
|
+
if (state.dismiss) {
|
|
127
|
+
state.dismiss.className = (0, _react.mergeClasses)(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
|
|
128
|
+
}
|
|
129
|
+
if (state.contentBefore) {
|
|
130
|
+
state.contentBefore.className = (0, _react.mergeClasses)(searchBoxClassNames.contentBefore, state.contentBefore.className);
|
|
131
|
+
}
|
|
132
|
+
if (state.contentAfter) {
|
|
133
|
+
state.contentAfter.className = (0, _react.mergeClasses)(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);
|
|
134
|
+
} else if (state.dismiss) {
|
|
135
|
+
state.dismiss.className = (0, _react.mergeClasses)(state.dismiss.className, contentAfterStyles.contentAfter);
|
|
136
|
+
}
|
|
137
|
+
(0, _reactinput.useInputStyles_unstable)(state);
|
|
138
|
+
return state;
|
|
139
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/SearchBox/useSearchBoxStyles.styles.ts"],"sourcesContent":["import { 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 'use no memo';\n\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 state.root.className = mergeClasses(\n searchBoxClassNames.root,\n rootStyles[size],\n !focused && rootStyles.unfocusedNoContentAfter,\n state.root.className,\n );\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 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 state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);\n }\n\n if (state.contentAfter) {\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 state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);\n }\n\n useInputStyles_unstable(state);\n\n return state;\n};\n"],"names":["searchBoxClassNames","useSearchBoxStyles_unstable","root","dismiss","contentAfter","contentBefore","input","useRootStyles","makeStyles","small","columnGap","maxWidth","paddingLeft","tokens","spacingHorizontalSNudge","paddingRight","medium","spacingHorizontalS","large","spacingHorizontalMNudge","display","unfocusedNoContentAfter","useInputStyles","useContentAfterStyles","spacingHorizontalM","spacingHorizontalXS","rest","height","width","overflow","useDismissClassName","makeResetStyles","boxSizing","color","colorNeutralForeground3","fontSize","cursor","useDismissStyles","disabled","colorNeutralForegroundDisabled","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.
|
|
3
|
+
"version": "9.3.0",
|
|
4
4
|
"description": "Search input for Fluent UI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@fluentui/react-icons": "^2.0.245",
|
|
22
|
-
"@fluentui/react-input": "^9.
|
|
22
|
+
"@fluentui/react-input": "^9.7.0",
|
|
23
23
|
"@fluentui/react-jsx-runtime": "^9.1.2",
|
|
24
24
|
"@fluentui/react-shared-contexts": "^9.24.0",
|
|
25
25
|
"@fluentui/react-theme": "^9.1.24",
|