@fluentui/react-select 9.3.6 → 9.4.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/Select/useSelectStyles.styles.raw.js +234 -0
- package/lib/components/Select/useSelectStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/Select/useSelectStyles.styles.raw.js +250 -0
- package/lib-commonjs/components/Select/useSelectStyles.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-select
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 17 Jul 2025 13:45:46 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.4.0)
|
|
8
|
+
|
|
9
|
+
Thu, 17 Jul 2025 13:45:46 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.3.7..@fluentui/react-select_v9.4.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-field to v9.4.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.3.7)
|
|
18
|
+
|
|
19
|
+
Fri, 11 Jul 2025 15:59:24 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.3.6..@fluentui/react-select_v9.3.7)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- Bump @fluentui/react-field to v9.3.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
|
|
25
|
+
|
|
7
26
|
## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.3.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-select_v9.3.5..@fluentui/react-select_v9.3.6)
|
|
11
30
|
|
|
12
31
|
### Patches
|
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
+
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
3
|
+
export const selectClassNames = {
|
|
4
|
+
root: 'fui-Select',
|
|
5
|
+
select: 'fui-Select__select',
|
|
6
|
+
icon: 'fui-Select__icon'
|
|
7
|
+
};
|
|
8
|
+
const iconSizes = {
|
|
9
|
+
small: '16px',
|
|
10
|
+
medium: '20px',
|
|
11
|
+
large: '24px'
|
|
12
|
+
};
|
|
13
|
+
//TODO: Should fieldHeights be a set of global design tokens or constants?
|
|
14
|
+
const fieldHeights = {
|
|
15
|
+
small: '24px',
|
|
16
|
+
medium: '32px',
|
|
17
|
+
large: '40px'
|
|
18
|
+
};
|
|
19
|
+
/* Since the <select> element must span the full width and cannot have children,
|
|
20
|
+
* the right padding needs to be calculated from the sum of the following:
|
|
21
|
+
* 1. Field padding-right
|
|
22
|
+
* 2. Icon width
|
|
23
|
+
* 3. Content-icon spacing
|
|
24
|
+
* 4. Content inner padding
|
|
25
|
+
*/ const paddingRight = {
|
|
26
|
+
small: `calc(${tokens.spacingHorizontalSNudge}
|
|
27
|
+
+ ${iconSizes.small}
|
|
28
|
+
+ ${tokens.spacingHorizontalXXS}
|
|
29
|
+
+ ${tokens.spacingHorizontalXXS})`,
|
|
30
|
+
medium: `calc(${tokens.spacingHorizontalMNudge}
|
|
31
|
+
+ ${iconSizes.medium}
|
|
32
|
+
+ ${tokens.spacingHorizontalXXS}
|
|
33
|
+
+ ${tokens.spacingHorizontalXXS})`,
|
|
34
|
+
large: `calc(${tokens.spacingHorizontalM}
|
|
35
|
+
+ ${iconSizes.large}
|
|
36
|
+
+ ${tokens.spacingHorizontalSNudge}
|
|
37
|
+
+ ${tokens.spacingHorizontalSNudge})`
|
|
38
|
+
};
|
|
39
|
+
/* Left padding is calculated from the outer padding + inner content padding values
|
|
40
|
+
* since <select> can't have additional child content or custom inner layout */ const paddingLeft = {
|
|
41
|
+
small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,
|
|
42
|
+
medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,
|
|
43
|
+
large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`
|
|
44
|
+
};
|
|
45
|
+
/* end of shared values */ const useRootStyles = makeStyles({
|
|
46
|
+
base: {
|
|
47
|
+
alignItems: 'center',
|
|
48
|
+
boxSizing: 'border-box',
|
|
49
|
+
display: 'flex',
|
|
50
|
+
flexWrap: 'nowrap',
|
|
51
|
+
fontFamily: tokens.fontFamilyBase,
|
|
52
|
+
position: 'relative',
|
|
53
|
+
'&::after': {
|
|
54
|
+
backgroundImage: `linear-gradient(
|
|
55
|
+
0deg,
|
|
56
|
+
${tokens.colorCompoundBrandStroke} 0%,
|
|
57
|
+
${tokens.colorCompoundBrandStroke} 50%,
|
|
58
|
+
transparent 50%,
|
|
59
|
+
transparent 100%
|
|
60
|
+
)`,
|
|
61
|
+
borderRadius: `0 0 ${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium}`,
|
|
62
|
+
boxSizing: 'border-box',
|
|
63
|
+
content: '""',
|
|
64
|
+
height: tokens.borderRadiusMedium,
|
|
65
|
+
position: 'absolute',
|
|
66
|
+
bottom: '0',
|
|
67
|
+
left: '0',
|
|
68
|
+
right: '0',
|
|
69
|
+
transform: 'scaleX(0)',
|
|
70
|
+
transitionProperty: 'transform',
|
|
71
|
+
transitionDuration: tokens.durationUltraFast,
|
|
72
|
+
transitionDelay: tokens.curveAccelerateMid,
|
|
73
|
+
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
74
|
+
transitionDuration: '0.01ms',
|
|
75
|
+
transitionDelay: '0.01ms'
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
'&:focus-within::after': {
|
|
79
|
+
transform: 'scaleX(1)',
|
|
80
|
+
transitionProperty: 'transform',
|
|
81
|
+
transitionDuration: tokens.durationNormal,
|
|
82
|
+
transitionDelay: tokens.curveDecelerateMid,
|
|
83
|
+
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
84
|
+
transitionDuration: '0.01ms',
|
|
85
|
+
transitionDelay: '0.01ms'
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
const useSelectStyles = makeStyles({
|
|
91
|
+
base: {
|
|
92
|
+
appearance: 'none',
|
|
93
|
+
border: '1px solid transparent',
|
|
94
|
+
borderRadius: tokens.borderRadiusMedium,
|
|
95
|
+
boxShadow: 'none',
|
|
96
|
+
boxSizing: 'border-box',
|
|
97
|
+
color: tokens.colorNeutralForeground1,
|
|
98
|
+
cursor: 'pointer',
|
|
99
|
+
flexGrow: 1,
|
|
100
|
+
maxWidth: '100%',
|
|
101
|
+
paddingBottom: 0,
|
|
102
|
+
paddingTop: 0,
|
|
103
|
+
':focus': {
|
|
104
|
+
outlineWidth: '2px',
|
|
105
|
+
outlineStyle: 'solid',
|
|
106
|
+
outlineColor: 'transparent'
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
disabled: {
|
|
110
|
+
backgroundColor: tokens.colorTransparentBackground,
|
|
111
|
+
...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
|
|
112
|
+
color: tokens.colorNeutralForegroundDisabled,
|
|
113
|
+
cursor: 'not-allowed',
|
|
114
|
+
'@media (forced-colors: active)': {
|
|
115
|
+
...shorthands.borderColor('GrayText')
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
disabledUnderline: {
|
|
119
|
+
...shorthands.borderColor(tokens.colorTransparentStrokeDisabled, tokens.colorTransparentStrokeDisabled, tokens.colorNeutralStrokeDisabled)
|
|
120
|
+
},
|
|
121
|
+
small: {
|
|
122
|
+
height: fieldHeights.small,
|
|
123
|
+
paddingLeft: paddingLeft.small,
|
|
124
|
+
paddingRight: paddingRight.small,
|
|
125
|
+
...typographyStyles.caption1
|
|
126
|
+
},
|
|
127
|
+
medium: {
|
|
128
|
+
height: fieldHeights.medium,
|
|
129
|
+
paddingLeft: paddingLeft.medium,
|
|
130
|
+
paddingRight: paddingRight.medium,
|
|
131
|
+
...typographyStyles.body1
|
|
132
|
+
},
|
|
133
|
+
large: {
|
|
134
|
+
height: fieldHeights.large,
|
|
135
|
+
paddingLeft: paddingLeft.large,
|
|
136
|
+
paddingRight: paddingRight.large,
|
|
137
|
+
...typographyStyles.body2
|
|
138
|
+
},
|
|
139
|
+
outline: {
|
|
140
|
+
backgroundColor: tokens.colorNeutralBackground1,
|
|
141
|
+
border: `1px solid ${tokens.colorNeutralStroke1}`,
|
|
142
|
+
borderBottomColor: tokens.colorNeutralStrokeAccessible
|
|
143
|
+
},
|
|
144
|
+
outlineInteractive: {
|
|
145
|
+
'&:hover': {
|
|
146
|
+
...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
|
|
147
|
+
borderBottomColor: tokens.colorNeutralStrokeAccessible
|
|
148
|
+
},
|
|
149
|
+
'&:active': {
|
|
150
|
+
...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
|
|
151
|
+
borderBottomColor: tokens.colorNeutralStrokeAccessible
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
underline: {
|
|
155
|
+
backgroundColor: tokens.colorTransparentBackground,
|
|
156
|
+
borderBottom: `1px solid ${tokens.colorNeutralStrokeAccessible}`,
|
|
157
|
+
borderRadius: '0',
|
|
158
|
+
'& option': {
|
|
159
|
+
// The transparent select bg means the option background must be set so the text is visible in dark themes
|
|
160
|
+
backgroundColor: tokens.colorNeutralBackground1
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
'filled-lighter': {
|
|
164
|
+
backgroundColor: tokens.colorNeutralBackground1
|
|
165
|
+
},
|
|
166
|
+
'filled-darker': {
|
|
167
|
+
backgroundColor: tokens.colorNeutralBackground3
|
|
168
|
+
},
|
|
169
|
+
invalid: {
|
|
170
|
+
':not(:focus-within),:hover:not(:focus-within)': {
|
|
171
|
+
...shorthands.borderColor(tokens.colorPaletteRedBorder2)
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
invalidUnderline: {
|
|
175
|
+
':not(:focus-within),:hover:not(:focus-within)': {
|
|
176
|
+
borderBottomColor: tokens.colorPaletteRedBorder2
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
});
|
|
180
|
+
const useIconStyles = makeStyles({
|
|
181
|
+
icon: {
|
|
182
|
+
boxSizing: 'border-box',
|
|
183
|
+
color: tokens.colorNeutralStrokeAccessible,
|
|
184
|
+
display: 'block',
|
|
185
|
+
position: 'absolute',
|
|
186
|
+
pointerEvents: 'none',
|
|
187
|
+
// the SVG must have display: block for accurate positioning
|
|
188
|
+
// otherwise an extra inline space is inserted after the svg element
|
|
189
|
+
'& svg': {
|
|
190
|
+
display: 'block'
|
|
191
|
+
}
|
|
192
|
+
},
|
|
193
|
+
disabled: {
|
|
194
|
+
color: tokens.colorNeutralForegroundDisabled,
|
|
195
|
+
'@media (forced-colors: active)': {
|
|
196
|
+
color: 'GrayText'
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
small: {
|
|
200
|
+
fontSize: iconSizes.small,
|
|
201
|
+
height: iconSizes.small,
|
|
202
|
+
right: tokens.spacingHorizontalSNudge,
|
|
203
|
+
width: iconSizes.small
|
|
204
|
+
},
|
|
205
|
+
medium: {
|
|
206
|
+
fontSize: iconSizes.medium,
|
|
207
|
+
height: iconSizes.medium,
|
|
208
|
+
right: tokens.spacingHorizontalMNudge,
|
|
209
|
+
width: iconSizes.medium
|
|
210
|
+
},
|
|
211
|
+
large: {
|
|
212
|
+
fontSize: iconSizes.large,
|
|
213
|
+
height: iconSizes.large,
|
|
214
|
+
right: tokens.spacingHorizontalM,
|
|
215
|
+
width: iconSizes.large
|
|
216
|
+
}
|
|
217
|
+
});
|
|
218
|
+
/**
|
|
219
|
+
* Apply styling to the Select slots based on the state
|
|
220
|
+
*/ export const useSelectStyles_unstable = (state)=>{
|
|
221
|
+
'use no memo';
|
|
222
|
+
const { size, appearance } = state;
|
|
223
|
+
const disabled = state.select.disabled;
|
|
224
|
+
const invalid = `${state.select['aria-invalid']}` === 'true';
|
|
225
|
+
const iconStyles = useIconStyles();
|
|
226
|
+
const rootStyles = useRootStyles();
|
|
227
|
+
const selectStyles = useSelectStyles();
|
|
228
|
+
state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);
|
|
229
|
+
state.select.className = mergeClasses(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
|
|
230
|
+
if (state.icon) {
|
|
231
|
+
state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
|
|
232
|
+
}
|
|
233
|
+
return state;
|
|
234
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Select/useSelectStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n small: `calc(${tokens.spacingHorizontalSNudge}\n + ${iconSizes.small}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge}\n + ${iconSizes.medium}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM}\n + ${iconSizes.large}\n + ${tokens.spacingHorizontalSNudge}\n + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n borderRadius: `0 0 ${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium}`,\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '0',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n border: '1px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n flexGrow: 1,\n maxWidth: '100%',\n paddingBottom: 0,\n paddingTop: 0,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n disabledUnderline: {\n ...shorthands.borderColor(\n tokens.colorTransparentStrokeDisabled,\n tokens.colorTransparentStrokeDisabled,\n tokens.colorNeutralStrokeDisabled,\n ),\n },\n\n small: {\n height: fieldHeights.small,\n paddingLeft: paddingLeft.small,\n paddingRight: paddingRight.small,\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n paddingLeft: paddingLeft.medium,\n paddingRight: paddingRight.medium,\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n paddingLeft: paddingLeft.large,\n paddingRight: paddingRight.large,\n ...typographyStyles.body2,\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `1px solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0',\n '& option': {\n // The transparent select bg means the option background must be set so the text is visible in dark themes\n backgroundColor: tokens.colorNeutralBackground1,\n },\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n pointerEvents: 'none',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n right: tokens.spacingHorizontalSNudge,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n right: tokens.spacingHorizontalMNudge,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n right: tokens.spacingHorizontalM,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n 'use no memo';\n\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n !disabled && appearance === 'outline' && selectStyles.outlineInteractive,\n !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n disabled && selectStyles.disabled,\n disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","selectClassNames","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","base","alignItems","boxSizing","display","flexWrap","fontFamily","fontFamilyBase","position","backgroundImage","colorCompoundBrandStroke","borderRadius","borderRadiusMedium","content","height","bottom","left","right","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","useSelectStyles","appearance","border","boxShadow","color","colorNeutralForeground1","cursor","flexGrow","maxWidth","paddingBottom","paddingTop","outlineWidth","outlineStyle","outlineColor","disabled","backgroundColor","colorTransparentBackground","borderColor","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","disabledUnderline","colorTransparentStrokeDisabled","caption1","body1","body2","outline","colorNeutralBackground1","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","underline","borderBottom","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","useIconStyles","pointerEvents","fontSize","width","useSelectStyles_unstable","state","size","iconStyles","rootStyles","selectStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE,OAAO,MAAMC,mBAAgD;IAC3DC,MAAM;IACNC,QAAQ;IACRC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAY;IAChBC,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAEA,0EAA0E;AAC1E,MAAMC,eAAe;IACnBH,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAEA;;;;;;CAMC,GACD,MAAME,eAAe;IACnBJ,OAAO,CAAC,KAAK,EAAEP,OAAOY,uBAAuB,CAAC;MAC1C,EAAEN,UAAUC,KAAK,CAAC;MAClB,EAAEP,OAAOa,oBAAoB,CAAC;MAC9B,EAAEb,OAAOa,oBAAoB,CAAC,CAAC,CAAC;IACpCL,QAAQ,CAAC,KAAK,EAAER,OAAOc,uBAAuB,CAAC;MAC3C,EAAER,UAAUE,MAAM,CAAC;MACnB,EAAER,OAAOa,oBAAoB,CAAC;MAC9B,EAAEb,OAAOa,oBAAoB,CAAC,CAAC,CAAC;IACpCJ,OAAO,CAAC,KAAK,EAAET,OAAOe,kBAAkB,CAAC;MACrC,EAAET,UAAUG,KAAK,CAAC;MAClB,EAAET,OAAOY,uBAAuB,CAAC;MACjC,EAAEZ,OAAOY,uBAAuB,CAAC,CAAC,CAAC;AACzC;AAEA;6EAC6E,GAC7E,MAAMI,cAAc;IAClBT,OAAO,CAAC,KAAK,EAAEP,OAAOY,uBAAuB,CAAC,GAAG,EAAEZ,OAAOa,oBAAoB,CAAC,CAAC,CAAC;IACjFL,QAAQ,CAAC,KAAK,EAAER,OAAOc,uBAAuB,CAAC,GAAG,EAAEd,OAAOa,oBAAoB,CAAC,CAAC,CAAC;IAClFJ,OAAO,CAAC,KAAK,EAAET,OAAOe,kBAAkB,CAAC,GAAG,EAAEf,OAAOY,uBAAuB,CAAC,CAAC,CAAC;AACjF;AAEA,wBAAwB,GAExB,MAAMK,gBAAgBpB,WAAW;IAC/BqB,MAAM;QACJC,YAAY;QACZC,WAAW;QACXC,SAAS;QACTC,UAAU;QACVC,YAAYvB,OAAOwB,cAAc;QACjCC,UAAU;QAEV,YAAY;YACVC,iBAAiB,CAAC;;QAEhB,EAAE1B,OAAO2B,wBAAwB,CAAC;QAClC,EAAE3B,OAAO2B,wBAAwB,CAAC;;;OAGnC,CAAC;YACFC,cAAc,CAAC,IAAI,EAAE5B,OAAO6B,kBAAkB,CAAC,CAAC,EAAE7B,OAAO6B,kBAAkB,CAAC,CAAC;YAC7ET,WAAW;YACXU,SAAS;YACTC,QAAQ/B,OAAO6B,kBAAkB;YACjCJ,UAAU;YACVO,QAAQ;YACRC,MAAM;YACNC,OAAO;YACPC,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBrC,OAAOsC,iBAAiB;YAC5CC,iBAAiBvC,OAAOwC,kBAAkB;YAE1C,sDAAsD;gBACpDH,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QAEA,yBAAyB;YACvBJ,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBrC,OAAOyC,cAAc;YACzCF,iBAAiBvC,OAAO0C,kBAAkB;YAE1C,sDAAsD;gBACpDL,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;IACF;AACF;AAEA,MAAMI,kBAAkB9C,WAAW;IACjCqB,MAAM;QACJ0B,YAAY;QACZC,QAAQ;QACRjB,cAAc5B,OAAO6B,kBAAkB;QACvCiB,WAAW;QACX1B,WAAW;QACX2B,OAAO/C,OAAOgD,uBAAuB;QACrCC,QAAQ;QACRC,UAAU;QACVC,UAAU;QACVC,eAAe;QACfC,YAAY;QAEZ,UAAU;YACRC,cAAc;YACdC,cAAc;YACdC,cAAc;QAChB;IACF;IACAC,UAAU;QACRC,iBAAiB1D,OAAO2D,0BAA0B;QAClD,GAAG5D,WAAW6D,WAAW,CAAC5D,OAAO6D,0BAA0B,CAAC;QAC5Dd,OAAO/C,OAAO8D,8BAA8B;QAC5Cb,QAAQ;QACR,kCAAkC;YAChC,GAAGlD,WAAW6D,WAAW,CAAC,WAAW;QACvC;IACF;IACAG,mBAAmB;QACjB,GAAGhE,WAAW6D,WAAW,CACvB5D,OAAOgE,8BAA8B,EACrChE,OAAOgE,8BAA8B,EACrChE,OAAO6D,0BAA0B,CAClC;IACH;IAEAtD,OAAO;QACLwB,QAAQrB,aAAaH,KAAK;QAC1BS,aAAaA,YAAYT,KAAK;QAC9BI,cAAcA,aAAaJ,KAAK;QAChC,GAAGN,iBAAiBgE,QAAQ;IAC9B;IACAzD,QAAQ;QACNuB,QAAQrB,aAAaF,MAAM;QAC3BQ,aAAaA,YAAYR,MAAM;QAC/BG,cAAcA,aAAaH,MAAM;QACjC,GAAGP,iBAAiBiE,KAAK;IAC3B;IACAzD,OAAO;QACLsB,QAAQrB,aAAaD,KAAK;QAC1BO,aAAaA,YAAYP,KAAK;QAC9BE,cAAcA,aAAaF,KAAK;QAChC,GAAGR,iBAAiBkE,KAAK;IAC3B;IACAC,SAAS;QACPV,iBAAiB1D,OAAOqE,uBAAuB;QAC/CxB,QAAQ,CAAC,UAAU,EAAE7C,OAAOsE,mBAAmB,CAAC,CAAC;QACjDC,mBAAmBvE,OAAOwE,4BAA4B;IACxD;IACAC,oBAAoB;QAClB,WAAW;YACT,GAAG1E,WAAW6D,WAAW,CAAC5D,OAAO0E,wBAAwB,CAAC;YAC1DH,mBAAmBvE,OAAOwE,4BAA4B;QACxD;QAEA,YAAY;YACV,GAAGzE,WAAW6D,WAAW,CAAC5D,OAAO2E,0BAA0B,CAAC;YAC5DJ,mBAAmBvE,OAAOwE,4BAA4B;QACxD;IACF;IACAI,WAAW;QACTlB,iBAAiB1D,OAAO2D,0BAA0B;QAClDkB,cAAc,CAAC,UAAU,EAAE7E,OAAOwE,4BAA4B,CAAC,CAAC;QAChE5C,cAAc;QACd,YAAY;YACV,0GAA0G;YAC1G8B,iBAAiB1D,OAAOqE,uBAAuB;QACjD;IACF;IACA,kBAAkB;QAChBX,iBAAiB1D,OAAOqE,uBAAuB;IACjD;IACA,iBAAiB;QACfX,iBAAiB1D,OAAO8E,uBAAuB;IACjD;IACAC,SAAS;QACP,iDAAiD;YAC/C,GAAGhF,WAAW6D,WAAW,CAAC5D,OAAOgF,sBAAsB,CAAC;QAC1D;IACF;IACAC,kBAAkB;QAChB,iDAAiD;YAC/CV,mBAAmBvE,OAAOgF,sBAAsB;QAClD;IACF;AACF;AAEA,MAAME,gBAAgBrF,WAAW;IAC/BQ,MAAM;QACJe,WAAW;QACX2B,OAAO/C,OAAOwE,4BAA4B;QAC1CnD,SAAS;QACTI,UAAU;QACV0D,eAAe;QAEf,4DAA4D;QAC5D,oEAAoE;QACpE,SAAS;YACP9D,SAAS;QACX;IACF;IACAoC,UAAU;QACRV,OAAO/C,OAAO8D,8BAA8B;QAC5C,kCAAkC;YAChCf,OAAO;QACT;IACF;IACAxC,OAAO;QACL6E,UAAU9E,UAAUC,KAAK;QACzBwB,QAAQzB,UAAUC,KAAK;QACvB2B,OAAOlC,OAAOY,uBAAuB;QACrCyE,OAAO/E,UAAUC,KAAK;IACxB;IACAC,QAAQ;QACN4E,UAAU9E,UAAUE,MAAM;QAC1BuB,QAAQzB,UAAUE,MAAM;QACxB0B,OAAOlC,OAAOc,uBAAuB;QACrCuE,OAAO/E,UAAUE,MAAM;IACzB;IACAC,OAAO;QACL2E,UAAU9E,UAAUG,KAAK;QACzBsB,QAAQzB,UAAUG,KAAK;QACvByB,OAAOlC,OAAOe,kBAAkB;QAChCsE,OAAO/E,UAAUG,KAAK;IACxB;AACF;AAEA;;CAEC,GACD,OAAO,MAAM6E,2BAA2B,CAACC;IACvC;IAEA,MAAM,EAAEC,IAAI,EAAE5C,UAAU,EAAE,GAAG2C;IAC7B,MAAM9B,WAAW8B,MAAMnF,MAAM,CAACqD,QAAQ;IACtC,MAAMsB,UAAU,CAAC,EAAEQ,MAAMnF,MAAM,CAAC,eAAe,CAAC,CAAC,KAAK;IAEtD,MAAMqF,aAAaP;IACnB,MAAMQ,aAAazE;IACnB,MAAM0E,eAAehD;IAErB4C,MAAMpF,IAAI,CAACyF,SAAS,GAAG9F,aAAaI,iBAAiBC,IAAI,EAAEuF,WAAWxE,IAAI,EAAEqE,MAAMpF,IAAI,CAACyF,SAAS;IAEhGL,MAAMnF,MAAM,CAACwF,SAAS,GAAG9F,aACvBI,iBAAiBE,MAAM,EACvBuF,aAAazE,IAAI,EACjByE,YAAY,CAACH,KAAK,EAClBG,YAAY,CAAC/C,WAAW,EACxB,CAACa,YAAYb,eAAe,aAAa+C,aAAalB,kBAAkB,EACxE,CAAChB,YAAYsB,WAAWnC,eAAe,eAAe+C,aAAaZ,OAAO,EAC1E,CAACtB,YAAYsB,WAAWnC,eAAe,eAAe+C,aAAaV,gBAAgB,EACnFxB,YAAYkC,aAAalC,QAAQ,EACjCA,YAAYb,eAAe,eAAe+C,aAAa5B,iBAAiB,EACxEwB,MAAMnF,MAAM,CAACwF,SAAS;IAGxB,IAAIL,MAAMlF,IAAI,EAAE;QACdkF,MAAMlF,IAAI,CAACuF,SAAS,GAAG9F,aACrBI,iBAAiBG,IAAI,EACrBoF,WAAWpF,IAAI,EACfoD,YAAYgC,WAAWhC,QAAQ,EAC/BgC,UAAU,CAACD,KAAK,EAChBD,MAAMlF,IAAI,CAACuF,SAAS;IAExB;IAEA,OAAOL;AACT,EAAE"}
|
|
@@ -0,0 +1,250 @@
|
|
|
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
|
+
selectClassNames: function() {
|
|
13
|
+
return selectClassNames;
|
|
14
|
+
},
|
|
15
|
+
useSelectStyles_unstable: function() {
|
|
16
|
+
return useSelectStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
+
const selectClassNames = {
|
|
22
|
+
root: 'fui-Select',
|
|
23
|
+
select: 'fui-Select__select',
|
|
24
|
+
icon: 'fui-Select__icon'
|
|
25
|
+
};
|
|
26
|
+
const iconSizes = {
|
|
27
|
+
small: '16px',
|
|
28
|
+
medium: '20px',
|
|
29
|
+
large: '24px'
|
|
30
|
+
};
|
|
31
|
+
//TODO: Should fieldHeights be a set of global design tokens or constants?
|
|
32
|
+
const fieldHeights = {
|
|
33
|
+
small: '24px',
|
|
34
|
+
medium: '32px',
|
|
35
|
+
large: '40px'
|
|
36
|
+
};
|
|
37
|
+
/* Since the <select> element must span the full width and cannot have children,
|
|
38
|
+
* the right padding needs to be calculated from the sum of the following:
|
|
39
|
+
* 1. Field padding-right
|
|
40
|
+
* 2. Icon width
|
|
41
|
+
* 3. Content-icon spacing
|
|
42
|
+
* 4. Content inner padding
|
|
43
|
+
*/ const paddingRight = {
|
|
44
|
+
small: `calc(${_reacttheme.tokens.spacingHorizontalSNudge}
|
|
45
|
+
+ ${iconSizes.small}
|
|
46
|
+
+ ${_reacttheme.tokens.spacingHorizontalXXS}
|
|
47
|
+
+ ${_reacttheme.tokens.spacingHorizontalXXS})`,
|
|
48
|
+
medium: `calc(${_reacttheme.tokens.spacingHorizontalMNudge}
|
|
49
|
+
+ ${iconSizes.medium}
|
|
50
|
+
+ ${_reacttheme.tokens.spacingHorizontalXXS}
|
|
51
|
+
+ ${_reacttheme.tokens.spacingHorizontalXXS})`,
|
|
52
|
+
large: `calc(${_reacttheme.tokens.spacingHorizontalM}
|
|
53
|
+
+ ${iconSizes.large}
|
|
54
|
+
+ ${_reacttheme.tokens.spacingHorizontalSNudge}
|
|
55
|
+
+ ${_reacttheme.tokens.spacingHorizontalSNudge})`
|
|
56
|
+
};
|
|
57
|
+
/* Left padding is calculated from the outer padding + inner content padding values
|
|
58
|
+
* since <select> can't have additional child content or custom inner layout */ const paddingLeft = {
|
|
59
|
+
small: `calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
|
|
60
|
+
medium: `calc(${_reacttheme.tokens.spacingHorizontalMNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
|
|
61
|
+
large: `calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`
|
|
62
|
+
};
|
|
63
|
+
/* end of shared values */ const useRootStyles = (0, _react.makeStyles)({
|
|
64
|
+
base: {
|
|
65
|
+
alignItems: 'center',
|
|
66
|
+
boxSizing: 'border-box',
|
|
67
|
+
display: 'flex',
|
|
68
|
+
flexWrap: 'nowrap',
|
|
69
|
+
fontFamily: _reacttheme.tokens.fontFamilyBase,
|
|
70
|
+
position: 'relative',
|
|
71
|
+
'&::after': {
|
|
72
|
+
backgroundImage: `linear-gradient(
|
|
73
|
+
0deg,
|
|
74
|
+
${_reacttheme.tokens.colorCompoundBrandStroke} 0%,
|
|
75
|
+
${_reacttheme.tokens.colorCompoundBrandStroke} 50%,
|
|
76
|
+
transparent 50%,
|
|
77
|
+
transparent 100%
|
|
78
|
+
)`,
|
|
79
|
+
borderRadius: `0 0 ${_reacttheme.tokens.borderRadiusMedium} ${_reacttheme.tokens.borderRadiusMedium}`,
|
|
80
|
+
boxSizing: 'border-box',
|
|
81
|
+
content: '""',
|
|
82
|
+
height: _reacttheme.tokens.borderRadiusMedium,
|
|
83
|
+
position: 'absolute',
|
|
84
|
+
bottom: '0',
|
|
85
|
+
left: '0',
|
|
86
|
+
right: '0',
|
|
87
|
+
transform: 'scaleX(0)',
|
|
88
|
+
transitionProperty: 'transform',
|
|
89
|
+
transitionDuration: _reacttheme.tokens.durationUltraFast,
|
|
90
|
+
transitionDelay: _reacttheme.tokens.curveAccelerateMid,
|
|
91
|
+
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
92
|
+
transitionDuration: '0.01ms',
|
|
93
|
+
transitionDelay: '0.01ms'
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
'&:focus-within::after': {
|
|
97
|
+
transform: 'scaleX(1)',
|
|
98
|
+
transitionProperty: 'transform',
|
|
99
|
+
transitionDuration: _reacttheme.tokens.durationNormal,
|
|
100
|
+
transitionDelay: _reacttheme.tokens.curveDecelerateMid,
|
|
101
|
+
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
102
|
+
transitionDuration: '0.01ms',
|
|
103
|
+
transitionDelay: '0.01ms'
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
const useSelectStyles = (0, _react.makeStyles)({
|
|
109
|
+
base: {
|
|
110
|
+
appearance: 'none',
|
|
111
|
+
border: '1px solid transparent',
|
|
112
|
+
borderRadius: _reacttheme.tokens.borderRadiusMedium,
|
|
113
|
+
boxShadow: 'none',
|
|
114
|
+
boxSizing: 'border-box',
|
|
115
|
+
color: _reacttheme.tokens.colorNeutralForeground1,
|
|
116
|
+
cursor: 'pointer',
|
|
117
|
+
flexGrow: 1,
|
|
118
|
+
maxWidth: '100%',
|
|
119
|
+
paddingBottom: 0,
|
|
120
|
+
paddingTop: 0,
|
|
121
|
+
':focus': {
|
|
122
|
+
outlineWidth: '2px',
|
|
123
|
+
outlineStyle: 'solid',
|
|
124
|
+
outlineColor: 'transparent'
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
disabled: {
|
|
128
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
129
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
|
|
130
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
131
|
+
cursor: 'not-allowed',
|
|
132
|
+
'@media (forced-colors: active)': {
|
|
133
|
+
..._react.shorthands.borderColor('GrayText')
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
disabledUnderline: {
|
|
137
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeDisabled, _reacttheme.tokens.colorTransparentStrokeDisabled, _reacttheme.tokens.colorNeutralStrokeDisabled)
|
|
138
|
+
},
|
|
139
|
+
small: {
|
|
140
|
+
height: fieldHeights.small,
|
|
141
|
+
paddingLeft: paddingLeft.small,
|
|
142
|
+
paddingRight: paddingRight.small,
|
|
143
|
+
..._reacttheme.typographyStyles.caption1
|
|
144
|
+
},
|
|
145
|
+
medium: {
|
|
146
|
+
height: fieldHeights.medium,
|
|
147
|
+
paddingLeft: paddingLeft.medium,
|
|
148
|
+
paddingRight: paddingRight.medium,
|
|
149
|
+
..._reacttheme.typographyStyles.body1
|
|
150
|
+
},
|
|
151
|
+
large: {
|
|
152
|
+
height: fieldHeights.large,
|
|
153
|
+
paddingLeft: paddingLeft.large,
|
|
154
|
+
paddingRight: paddingRight.large,
|
|
155
|
+
..._reacttheme.typographyStyles.body2
|
|
156
|
+
},
|
|
157
|
+
outline: {
|
|
158
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
|
|
159
|
+
border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
|
|
160
|
+
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
|
|
161
|
+
},
|
|
162
|
+
outlineInteractive: {
|
|
163
|
+
'&:hover': {
|
|
164
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
|
|
165
|
+
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
|
|
166
|
+
},
|
|
167
|
+
'&:active': {
|
|
168
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
|
|
169
|
+
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
|
|
170
|
+
}
|
|
171
|
+
},
|
|
172
|
+
underline: {
|
|
173
|
+
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
174
|
+
borderBottom: `1px solid ${_reacttheme.tokens.colorNeutralStrokeAccessible}`,
|
|
175
|
+
borderRadius: '0',
|
|
176
|
+
'& option': {
|
|
177
|
+
// The transparent select bg means the option background must be set so the text is visible in dark themes
|
|
178
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground1
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
'filled-lighter': {
|
|
182
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground1
|
|
183
|
+
},
|
|
184
|
+
'filled-darker': {
|
|
185
|
+
backgroundColor: _reacttheme.tokens.colorNeutralBackground3
|
|
186
|
+
},
|
|
187
|
+
invalid: {
|
|
188
|
+
':not(:focus-within),:hover:not(:focus-within)': {
|
|
189
|
+
..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
|
|
190
|
+
}
|
|
191
|
+
},
|
|
192
|
+
invalidUnderline: {
|
|
193
|
+
':not(:focus-within),:hover:not(:focus-within)': {
|
|
194
|
+
borderBottomColor: _reacttheme.tokens.colorPaletteRedBorder2
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
const useIconStyles = (0, _react.makeStyles)({
|
|
199
|
+
icon: {
|
|
200
|
+
boxSizing: 'border-box',
|
|
201
|
+
color: _reacttheme.tokens.colorNeutralStrokeAccessible,
|
|
202
|
+
display: 'block',
|
|
203
|
+
position: 'absolute',
|
|
204
|
+
pointerEvents: 'none',
|
|
205
|
+
// the SVG must have display: block for accurate positioning
|
|
206
|
+
// otherwise an extra inline space is inserted after the svg element
|
|
207
|
+
'& svg': {
|
|
208
|
+
display: 'block'
|
|
209
|
+
}
|
|
210
|
+
},
|
|
211
|
+
disabled: {
|
|
212
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
213
|
+
'@media (forced-colors: active)': {
|
|
214
|
+
color: 'GrayText'
|
|
215
|
+
}
|
|
216
|
+
},
|
|
217
|
+
small: {
|
|
218
|
+
fontSize: iconSizes.small,
|
|
219
|
+
height: iconSizes.small,
|
|
220
|
+
right: _reacttheme.tokens.spacingHorizontalSNudge,
|
|
221
|
+
width: iconSizes.small
|
|
222
|
+
},
|
|
223
|
+
medium: {
|
|
224
|
+
fontSize: iconSizes.medium,
|
|
225
|
+
height: iconSizes.medium,
|
|
226
|
+
right: _reacttheme.tokens.spacingHorizontalMNudge,
|
|
227
|
+
width: iconSizes.medium
|
|
228
|
+
},
|
|
229
|
+
large: {
|
|
230
|
+
fontSize: iconSizes.large,
|
|
231
|
+
height: iconSizes.large,
|
|
232
|
+
right: _reacttheme.tokens.spacingHorizontalM,
|
|
233
|
+
width: iconSizes.large
|
|
234
|
+
}
|
|
235
|
+
});
|
|
236
|
+
const useSelectStyles_unstable = (state)=>{
|
|
237
|
+
'use no memo';
|
|
238
|
+
const { size, appearance } = state;
|
|
239
|
+
const disabled = state.select.disabled;
|
|
240
|
+
const invalid = `${state.select['aria-invalid']}` === 'true';
|
|
241
|
+
const iconStyles = useIconStyles();
|
|
242
|
+
const rootStyles = useRootStyles();
|
|
243
|
+
const selectStyles = useSelectStyles();
|
|
244
|
+
state.root.className = (0, _react.mergeClasses)(selectClassNames.root, rootStyles.base, state.root.className);
|
|
245
|
+
state.select.className = (0, _react.mergeClasses)(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
|
|
246
|
+
if (state.icon) {
|
|
247
|
+
state.icon.className = (0, _react.mergeClasses)(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
|
|
248
|
+
}
|
|
249
|
+
return state;
|
|
250
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Select/useSelectStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n small: `calc(${tokens.spacingHorizontalSNudge}\n + ${iconSizes.small}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge}\n + ${iconSizes.medium}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM}\n + ${iconSizes.large}\n + ${tokens.spacingHorizontalSNudge}\n + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n borderRadius: `0 0 ${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium}`,\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '0',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n border: '1px solid transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n flexGrow: 1,\n maxWidth: '100%',\n paddingBottom: 0,\n paddingTop: 0,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n disabledUnderline: {\n ...shorthands.borderColor(\n tokens.colorTransparentStrokeDisabled,\n tokens.colorTransparentStrokeDisabled,\n tokens.colorNeutralStrokeDisabled,\n ),\n },\n\n small: {\n height: fieldHeights.small,\n paddingLeft: paddingLeft.small,\n paddingRight: paddingRight.small,\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n paddingLeft: paddingLeft.medium,\n paddingRight: paddingRight.medium,\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n paddingLeft: paddingLeft.large,\n paddingRight: paddingRight.large,\n ...typographyStyles.body2,\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `1px solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0',\n '& option': {\n // The transparent select bg means the option background must be set so the text is visible in dark themes\n backgroundColor: tokens.colorNeutralBackground1,\n },\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n pointerEvents: 'none',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n right: tokens.spacingHorizontalSNudge,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n right: tokens.spacingHorizontalMNudge,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n right: tokens.spacingHorizontalM,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n 'use no memo';\n\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n !disabled && appearance === 'outline' && selectStyles.outlineInteractive,\n !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n disabled && selectStyles.disabled,\n disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["selectClassNames","useSelectStyles_unstable","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","tokens","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","makeStyles","base","alignItems","boxSizing","display","flexWrap","fontFamily","fontFamilyBase","position","backgroundImage","colorCompoundBrandStroke","borderRadius","borderRadiusMedium","content","height","bottom","left","right","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","useSelectStyles","appearance","border","boxShadow","color","colorNeutralForeground1","cursor","flexGrow","maxWidth","paddingBottom","paddingTop","outlineWidth","outlineStyle","outlineColor","disabled","backgroundColor","colorTransparentBackground","shorthands","borderColor","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","disabledUnderline","colorTransparentStrokeDisabled","typographyStyles","caption1","body1","body2","outline","colorNeutralBackground1","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","underline","borderBottom","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","useIconStyles","pointerEvents","fontSize","width","state","size","iconStyles","rootStyles","selectStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-select",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.4.0",
|
|
4
4
|
"description": "Fluent UI React Select component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"@fluentui/scripts-api-extractor": "*"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@fluentui/react-field": "^9.
|
|
21
|
+
"@fluentui/react-field": "^9.4.0",
|
|
22
22
|
"@fluentui/react-icons": "^2.0.245",
|
|
23
23
|
"@fluentui/react-jsx-runtime": "^9.1.2",
|
|
24
24
|
"@fluentui/react-shared-contexts": "^9.24.0",
|