@fluentui/react-spinbutton 9.2.4 → 9.2.6
Sign up to get free protection for your applications and to get access to all the features.
- package/.swcrc +30 -0
- package/CHANGELOG.json +97 -1
- package/CHANGELOG.md +31 -2
- package/lib/SpinButton.js.map +1 -1
- package/lib/SpinButtonField.js.map +1 -1
- package/lib/components/SpinButton/SpinButton.js.map +1 -1
- package/lib/components/SpinButton/SpinButton.types.js +1 -1
- package/lib/components/SpinButton/SpinButton.types.js.map +1 -1
- package/lib/components/SpinButton/index.js.map +1 -1
- package/lib/components/SpinButton/renderSpinButton.js +1 -9
- package/lib/components/SpinButton/renderSpinButton.js.map +1 -1
- package/lib/components/SpinButton/useSpinButton.js +4 -3
- package/lib/components/SpinButton/useSpinButton.js.map +1 -1
- package/lib/components/SpinButton/useSpinButtonStyles.js.map +1 -1
- package/lib/components/SpinButtonField/SpinButtonField.js +1 -2
- package/lib/components/SpinButtonField/SpinButtonField.js.map +1 -1
- package/lib/components/SpinButtonField/index.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/clamp.js.map +1 -1
- package/lib/utils/getBound.js.map +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/precision.js +6 -7
- package/lib/utils/precision.js.map +1 -1
- package/lib-commonjs/SpinButton.js +5 -4
- package/lib-commonjs/SpinButton.js.map +1 -1
- package/lib-commonjs/SpinButtonField.js +5 -4
- package/lib-commonjs/SpinButtonField.js.map +1 -1
- package/lib-commonjs/components/SpinButton/SpinButton.js +19 -20
- package/lib-commonjs/components/SpinButton/SpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/SpinButton.types.js +5 -2
- package/lib-commonjs/components/SpinButton/SpinButton.types.js.map +1 -1
- package/lib-commonjs/components/SpinButton/index.js +9 -8
- package/lib-commonjs/components/SpinButton/index.js.map +1 -1
- package/lib-commonjs/components/SpinButton/renderSpinButton.js +13 -24
- package/lib-commonjs/components/SpinButton/renderSpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/useSpinButton.js +248 -259
- package/lib-commonjs/components/SpinButton/useSpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js +506 -246
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SpinButtonField/SpinButtonField.js +17 -11
- package/lib-commonjs/components/SpinButtonField/SpinButtonField.js.map +1 -1
- package/lib-commonjs/components/SpinButtonField/index.js +5 -4
- package/lib-commonjs/components/SpinButtonField/index.js.map +1 -1
- package/lib-commonjs/index.js +21 -49
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/clamp.js +28 -21
- package/lib-commonjs/utils/clamp.js.map +1 -1
- package/lib-commonjs/utils/getBound.js +16 -14
- package/lib-commonjs/utils/getBound.js.map +1 -1
- package/lib-commonjs/utils/index.js +7 -6
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/precision.js +33 -33
- package/lib-commonjs/utils/precision.js.map +1 -1
- package/package.json +12 -11
- package/lib-amd/SpinButton.js +0 -6
- package/lib-amd/SpinButton.js.map +0 -1
- package/lib-amd/SpinButtonField.js +0 -6
- package/lib-amd/SpinButtonField.js.map +0 -1
- package/lib-amd/components/SpinButton/SpinButton.js +0 -17
- package/lib-amd/components/SpinButton/SpinButton.js.map +0 -1
- package/lib-amd/components/SpinButton/SpinButton.types.js +0 -5
- package/lib-amd/components/SpinButton/SpinButton.types.js.map +0 -1
- package/lib-amd/components/SpinButton/index.js +0 -10
- package/lib-amd/components/SpinButton/index.js.map +0 -1
- package/lib-amd/components/SpinButton/renderSpinButton.js +0 -17
- package/lib-amd/components/SpinButton/renderSpinButton.js.map +0 -1
- package/lib-amd/components/SpinButton/useSpinButton.js +0 -253
- package/lib-amd/components/SpinButton/useSpinButton.js.map +0 -1
- package/lib-amd/components/SpinButton/useSpinButtonStyles.js +0 -420
- package/lib-amd/components/SpinButton/useSpinButtonStyles.js.map +0 -1
- package/lib-amd/components/SpinButtonField/SpinButtonField.js +0 -10
- package/lib-amd/components/SpinButtonField/SpinButtonField.js.map +0 -1
- package/lib-amd/components/SpinButtonField/index.js +0 -6
- package/lib-amd/components/SpinButtonField/index.js.map +0 -1
- package/lib-amd/index.js +0 -13
- package/lib-amd/index.js.map +0 -1
- package/lib-amd/utils/clamp.js +0 -30
- package/lib-amd/utils/clamp.js.map +0 -1
- package/lib-amd/utils/getBound.js +0 -19
- package/lib-amd/utils/getBound.js.map +0 -1
- package/lib-amd/utils/index.js +0 -8
- package/lib-amd/utils/index.js.map +0 -1
- package/lib-amd/utils/precision.js +0 -44
- package/lib-amd/utils/precision.js.map +0 -1
@@ -1,420 +0,0 @@
|
|
1
|
-
define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
|
2
|
-
"use strict";
|
3
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
4
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
5
|
-
exports.useSpinButtonStyles_unstable = exports.spinButtonClassNames = void 0;
|
6
|
-
exports.spinButtonClassNames = {
|
7
|
-
root: 'fui-SpinButton',
|
8
|
-
input: 'fui-SpinButton__input',
|
9
|
-
incrementButton: 'fui-SpinButton__incrementButton',
|
10
|
-
decrementButton: 'fui-SpinButton__decrementButton',
|
11
|
-
};
|
12
|
-
var spinButtonExtraClassNames = {
|
13
|
-
buttonActive: 'fui-SpinButton__button_active',
|
14
|
-
};
|
15
|
-
var fieldHeights = {
|
16
|
-
small: '24px',
|
17
|
-
medium: '32px',
|
18
|
-
};
|
19
|
-
var useRootClassName = react_1.makeResetStyles({
|
20
|
-
display: 'inline-grid',
|
21
|
-
gridTemplateColumns: "1fr 24px",
|
22
|
-
gridTemplateRows: '1fr 1fr',
|
23
|
-
columnGap: react_theme_1.tokens.spacingHorizontalXS,
|
24
|
-
rowGap: 0,
|
25
|
-
position: 'relative',
|
26
|
-
isolation: 'isolate',
|
27
|
-
backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
|
28
|
-
minHeight: fieldHeights.medium,
|
29
|
-
padding: "0 0 0 " + react_theme_1.tokens.spacingHorizontalMNudge,
|
30
|
-
borderRadius: react_theme_1.tokens.borderRadiusMedium,
|
31
|
-
// Apply border styles on the ::before pseudo element.
|
32
|
-
// We cannot use ::after since that is used for selection.
|
33
|
-
// Using the pseudo element allows us to place the border
|
34
|
-
// above content in the component which ensures the buttons
|
35
|
-
// line up visually with the border as expected. Without this
|
36
|
-
// there is a bit of a gap which can become very noticeable
|
37
|
-
// at high zoom or when OS zoom levels are not divisible by 2
|
38
|
-
// (e.g., 150% on Windows in Firefox)
|
39
|
-
// This is most noticeable on the "outline" appearance which is
|
40
|
-
// also the default so it feels worth the extra ceremony to get right.
|
41
|
-
'::before': {
|
42
|
-
content: '""',
|
43
|
-
boxSizing: 'border-box',
|
44
|
-
position: 'absolute',
|
45
|
-
top: 0,
|
46
|
-
right: 0,
|
47
|
-
bottom: 0,
|
48
|
-
left: 0,
|
49
|
-
pointerEvents: 'none',
|
50
|
-
zIndex: 10,
|
51
|
-
border: "1px solid " + react_theme_1.tokens.colorNeutralStroke1,
|
52
|
-
borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible,
|
53
|
-
borderRadius: react_theme_1.tokens.borderRadiusMedium,
|
54
|
-
},
|
55
|
-
'::after': {
|
56
|
-
boxSizing: 'border-box',
|
57
|
-
content: '""',
|
58
|
-
position: 'absolute',
|
59
|
-
right: 0,
|
60
|
-
bottom: 0,
|
61
|
-
left: 0,
|
62
|
-
zIndex: 20,
|
63
|
-
// Maintaining the correct corner radius:
|
64
|
-
// Use the whole border-radius as the height and only put radii on the bottom corners.
|
65
|
-
// (Otherwise the radius would be automatically reduced to fit available space.)
|
66
|
-
// max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
|
67
|
-
height: "max(2px, " + react_theme_1.tokens.borderRadiusMedium + ")",
|
68
|
-
borderBottomLeftRadius: react_theme_1.tokens.borderRadiusMedium,
|
69
|
-
borderBottomRightRadius: react_theme_1.tokens.borderRadiusMedium,
|
70
|
-
// Flat 2px border:
|
71
|
-
// By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
|
72
|
-
// (This could be done without trimming using `background: linear-gradient(...)`, but using
|
73
|
-
// borderBottom makes it easier for people to override the color if needed.)
|
74
|
-
borderBottom: "2px solid " + react_theme_1.tokens.colorCompoundBrandStroke,
|
75
|
-
clipPath: 'inset(calc(100% - 2px) 0 0 0)',
|
76
|
-
// Animation for focus OUT
|
77
|
-
transform: 'scaleX(0)',
|
78
|
-
transitionProperty: 'transform',
|
79
|
-
transitionDuration: react_theme_1.tokens.durationUltraFast,
|
80
|
-
transitionDelay: react_theme_1.tokens.curveAccelerateMid,
|
81
|
-
'@media screen and (prefers-reduced-motion: reduce)': {
|
82
|
-
transitionDuration: '0.01ms',
|
83
|
-
transitionDelay: '0.01ms',
|
84
|
-
},
|
85
|
-
},
|
86
|
-
':focus-within::after': {
|
87
|
-
// Animation for focus IN
|
88
|
-
transform: 'scaleX(1)',
|
89
|
-
transitionProperty: 'transform',
|
90
|
-
transitionDuration: react_theme_1.tokens.durationNormal,
|
91
|
-
transitionDelay: react_theme_1.tokens.curveDecelerateMid,
|
92
|
-
'@media screen and (prefers-reduced-motion: reduce)': {
|
93
|
-
transitionDuration: '0.01ms',
|
94
|
-
transitionDelay: '0.01ms',
|
95
|
-
},
|
96
|
-
},
|
97
|
-
':focus-within:active::after': {
|
98
|
-
// This is if the user clicks the field again while it's already focused
|
99
|
-
borderBottomColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
|
100
|
-
},
|
101
|
-
':focus-within': {
|
102
|
-
outline: '2px solid transparent',
|
103
|
-
},
|
104
|
-
});
|
105
|
-
var useRootStyles = react_1.makeStyles({
|
106
|
-
small: tslib_1.__assign(tslib_1.__assign({ minHeight: fieldHeights.small }, react_theme_1.typographyStyles.caption1), { paddingLeft: react_theme_1.tokens.spacingHorizontalS }),
|
107
|
-
medium: {
|
108
|
-
// set by useRootClassName
|
109
|
-
},
|
110
|
-
outline: {
|
111
|
-
// set by useRootClassName
|
112
|
-
},
|
113
|
-
outlineInteractive: {
|
114
|
-
':hover::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover }),
|
115
|
-
// DO NOT add a space between the selectors! It changes the behavior of make-styles.
|
116
|
-
':active,:focus-within': {
|
117
|
-
'::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Pressed)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed }),
|
118
|
-
},
|
119
|
-
},
|
120
|
-
underline: {
|
121
|
-
'::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderWidth(0, 0, '1px', 0)), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone)),
|
122
|
-
},
|
123
|
-
underlineInteractive: {
|
124
|
-
':hover::before': {
|
125
|
-
borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
|
126
|
-
},
|
127
|
-
// DO NOT add a space between the selectors! It changes the behavior of make-styles.
|
128
|
-
':active,:focus-within': {
|
129
|
-
'::before': {
|
130
|
-
borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed,
|
131
|
-
},
|
132
|
-
},
|
133
|
-
'::after': react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone), // remove rounded corners from focus underline
|
134
|
-
},
|
135
|
-
filled: {
|
136
|
-
'::before': tslib_1.__assign({}, react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorTransparentStroke)),
|
137
|
-
},
|
138
|
-
'filled-darker': {
|
139
|
-
backgroundColor: react_theme_1.tokens.colorNeutralBackground3,
|
140
|
-
},
|
141
|
-
'filled-lighter': {
|
142
|
-
backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
|
143
|
-
},
|
144
|
-
filledInteractive: {
|
145
|
-
// DO NOT add a space between the selectors! It changes the behavior of make-styles.
|
146
|
-
':hover,:focus-within': {
|
147
|
-
'::before': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStrokeInteractive)),
|
148
|
-
},
|
149
|
-
},
|
150
|
-
invalid: {
|
151
|
-
':not(:focus-within),:hover:not(:focus-within)': {
|
152
|
-
'::before': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorPaletteRedBorder2)),
|
153
|
-
},
|
154
|
-
},
|
155
|
-
disabled: {
|
156
|
-
cursor: 'not-allowed',
|
157
|
-
backgroundColor: react_theme_1.tokens.colorTransparentBackground,
|
158
|
-
'::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { '@media (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')) }),
|
159
|
-
},
|
160
|
-
});
|
161
|
-
var useInputClassName = react_1.makeResetStyles({
|
162
|
-
gridColumnStart: '1',
|
163
|
-
gridColumnEnd: '2',
|
164
|
-
gridRowStart: '1',
|
165
|
-
gridRowEnd: '3',
|
166
|
-
outlineStyle: 'none',
|
167
|
-
border: '0',
|
168
|
-
padding: '0',
|
169
|
-
color: react_theme_1.tokens.colorNeutralForeground1,
|
170
|
-
// Use literal "transparent" (not from the theme) to always let the color from the root show through
|
171
|
-
backgroundColor: 'transparent',
|
172
|
-
fontFamily: 'inherit',
|
173
|
-
fontSize: 'inherit',
|
174
|
-
fontWeight: 'inherit',
|
175
|
-
lineHeight: 'inherit',
|
176
|
-
'::placeholder': {
|
177
|
-
color: react_theme_1.tokens.colorNeutralForeground4,
|
178
|
-
opacity: 1, // browser style override
|
179
|
-
},
|
180
|
-
});
|
181
|
-
var useInputStyles = react_1.makeStyles({
|
182
|
-
disabled: {
|
183
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
184
|
-
cursor: 'not-allowed',
|
185
|
-
backgroundColor: react_theme_1.tokens.colorTransparentBackground,
|
186
|
-
'::placeholder': {
|
187
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
188
|
-
},
|
189
|
-
},
|
190
|
-
});
|
191
|
-
var useBaseButtonClassName = react_1.makeResetStyles({
|
192
|
-
display: 'inline-flex',
|
193
|
-
width: '24px',
|
194
|
-
alignItems: 'center',
|
195
|
-
justifyContent: 'center',
|
196
|
-
border: '0',
|
197
|
-
position: 'absolute',
|
198
|
-
outlineStyle: 'none',
|
199
|
-
height: '16px',
|
200
|
-
// Use literal "transparent" (not from the theme) to always let the color from the root show through
|
201
|
-
backgroundColor: 'transparent',
|
202
|
-
color: react_theme_1.tokens.colorNeutralForeground3,
|
203
|
-
// common button layout
|
204
|
-
gridColumnStart: '2',
|
205
|
-
borderRadius: '0',
|
206
|
-
padding: '0 5px 0 5px',
|
207
|
-
':active': {
|
208
|
-
outlineStyle: 'none',
|
209
|
-
},
|
210
|
-
':enabled': (_a = {
|
211
|
-
':hover': {
|
212
|
-
cursor: 'pointer',
|
213
|
-
color: react_theme_1.tokens.colorNeutralForeground3Hover,
|
214
|
-
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover,
|
215
|
-
},
|
216
|
-
':active': {
|
217
|
-
color: react_theme_1.tokens.colorNeutralForeground3Pressed,
|
218
|
-
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
|
219
|
-
}
|
220
|
-
},
|
221
|
-
_a["&." + spinButtonExtraClassNames.buttonActive] = {
|
222
|
-
color: react_theme_1.tokens.colorNeutralForeground3Pressed,
|
223
|
-
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
|
224
|
-
},
|
225
|
-
_a),
|
226
|
-
':disabled': {
|
227
|
-
cursor: 'not-allowed',
|
228
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
229
|
-
},
|
230
|
-
});
|
231
|
-
var useButtonStyles = react_1.makeStyles({
|
232
|
-
increment: {
|
233
|
-
gridRowStart: '1',
|
234
|
-
borderTopRightRadius: react_theme_1.tokens.borderRadiusMedium,
|
235
|
-
paddingTop: '4px',
|
236
|
-
paddingBottom: '1px',
|
237
|
-
},
|
238
|
-
decrement: {
|
239
|
-
gridRowStart: '2',
|
240
|
-
borderBottomRightRadius: react_theme_1.tokens.borderRadiusMedium,
|
241
|
-
paddingTop: '1px',
|
242
|
-
paddingBottom: '4px',
|
243
|
-
},
|
244
|
-
// Padding values numbers don't align with design specs
|
245
|
-
// but visually the padding aligns.
|
246
|
-
// The icons are set in a 16x16px square but the artwork is inset from that
|
247
|
-
// so these padding values are computed by hand.
|
248
|
-
// Additionally the design uses fractional values so these are
|
249
|
-
// rounded to the nearest integer.
|
250
|
-
incrementButtonSmall: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding('3px', '6px', '0px', '4px')), { height: '12px' }),
|
251
|
-
decrementButtonSmall: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding('0px', '6px', '3px', '4px')), { height: '12px' }),
|
252
|
-
outline: {
|
253
|
-
// set by useButtonClassName
|
254
|
-
},
|
255
|
-
underline: {
|
256
|
-
backgroundColor: 'transparent',
|
257
|
-
color: react_theme_1.tokens.colorNeutralForeground3,
|
258
|
-
':enabled': (_b = {
|
259
|
-
':hover': {
|
260
|
-
color: react_theme_1.tokens.colorNeutralForeground3Hover,
|
261
|
-
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover,
|
262
|
-
},
|
263
|
-
':active': {
|
264
|
-
color: react_theme_1.tokens.colorNeutralForeground3Pressed,
|
265
|
-
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
|
266
|
-
}
|
267
|
-
},
|
268
|
-
_b["&." + spinButtonExtraClassNames.buttonActive] = {
|
269
|
-
color: react_theme_1.tokens.colorNeutralForeground3Pressed,
|
270
|
-
backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
|
271
|
-
},
|
272
|
-
_b),
|
273
|
-
':disabled': {
|
274
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
275
|
-
},
|
276
|
-
},
|
277
|
-
'filled-darker': {
|
278
|
-
backgroundColor: 'transparent',
|
279
|
-
color: react_theme_1.tokens.colorNeutralForeground3,
|
280
|
-
':enabled': (_c = {
|
281
|
-
':hover': {
|
282
|
-
color: react_theme_1.tokens.colorNeutralForeground3Hover,
|
283
|
-
backgroundColor: react_theme_1.tokens.colorNeutralBackground3Hover,
|
284
|
-
},
|
285
|
-
':active': {
|
286
|
-
color: react_theme_1.tokens.colorNeutralForeground3Pressed,
|
287
|
-
backgroundColor: react_theme_1.tokens.colorNeutralBackground3Pressed,
|
288
|
-
}
|
289
|
-
},
|
290
|
-
_c["&." + spinButtonExtraClassNames.buttonActive] = {
|
291
|
-
color: react_theme_1.tokens.colorNeutralForeground3Pressed,
|
292
|
-
backgroundColor: react_theme_1.tokens.colorNeutralBackground3Pressed,
|
293
|
-
},
|
294
|
-
_c),
|
295
|
-
':disabled': {
|
296
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
297
|
-
},
|
298
|
-
},
|
299
|
-
'filled-lighter': {
|
300
|
-
backgroundColor: 'transparent',
|
301
|
-
color: react_theme_1.tokens.colorNeutralForeground3,
|
302
|
-
':enabled': (_d = {
|
303
|
-
':hover': {
|
304
|
-
color: react_theme_1.tokens.colorNeutralForeground3Hover,
|
305
|
-
backgroundColor: react_theme_1.tokens.colorNeutralBackground1Hover,
|
306
|
-
}
|
307
|
-
},
|
308
|
-
_d[":active,&." + spinButtonExtraClassNames.buttonActive] = {
|
309
|
-
color: react_theme_1.tokens.colorNeutralForeground3Pressed,
|
310
|
-
backgroundColor: react_theme_1.tokens.colorNeutralBackground1Pressed,
|
311
|
-
},
|
312
|
-
_d),
|
313
|
-
':disabled': {
|
314
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
315
|
-
},
|
316
|
-
},
|
317
|
-
});
|
318
|
-
// Cannot just disable button as they need to remain
|
319
|
-
// exposed to ATs like screen readers.
|
320
|
-
var useButtonDisabledStyles = react_1.makeStyles({
|
321
|
-
base: {
|
322
|
-
cursor: 'not-allowed',
|
323
|
-
':hover': {
|
324
|
-
cursor: 'not-allowed',
|
325
|
-
},
|
326
|
-
},
|
327
|
-
outline: {
|
328
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
329
|
-
':enabled': (_e = {
|
330
|
-
':hover': {
|
331
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
332
|
-
backgroundColor: 'transparent',
|
333
|
-
},
|
334
|
-
':active': {
|
335
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
336
|
-
backgroundColor: 'transparent',
|
337
|
-
}
|
338
|
-
},
|
339
|
-
_e["&." + spinButtonExtraClassNames.buttonActive] = {
|
340
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
341
|
-
backgroundColor: 'transparent',
|
342
|
-
},
|
343
|
-
_e),
|
344
|
-
},
|
345
|
-
underline: {
|
346
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
347
|
-
':enabled': (_f = {
|
348
|
-
':hover': {
|
349
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
350
|
-
backgroundColor: 'transparent',
|
351
|
-
},
|
352
|
-
':active': {
|
353
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
354
|
-
backgroundColor: 'transparent',
|
355
|
-
}
|
356
|
-
},
|
357
|
-
_f["&." + spinButtonExtraClassNames.buttonActive] = {
|
358
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
359
|
-
backgroundColor: 'transparent',
|
360
|
-
},
|
361
|
-
_f),
|
362
|
-
},
|
363
|
-
'filled-darker': {
|
364
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
365
|
-
':enabled': (_g = {
|
366
|
-
':hover': {
|
367
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
368
|
-
backgroundColor: 'transparent',
|
369
|
-
},
|
370
|
-
':active': {
|
371
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
372
|
-
backgroundColor: 'transparent',
|
373
|
-
}
|
374
|
-
},
|
375
|
-
_g["&." + spinButtonExtraClassNames.buttonActive] = {
|
376
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
377
|
-
backgroundColor: 'transparent',
|
378
|
-
},
|
379
|
-
_g),
|
380
|
-
},
|
381
|
-
'filled-lighter': {
|
382
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
383
|
-
':enabled': (_h = {
|
384
|
-
':hover': {
|
385
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
386
|
-
backgroundColor: 'transparent',
|
387
|
-
},
|
388
|
-
':active': {
|
389
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
390
|
-
backgroundColor: 'transparent',
|
391
|
-
}
|
392
|
-
},
|
393
|
-
_h["&." + spinButtonExtraClassNames.buttonActive] = {
|
394
|
-
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
395
|
-
backgroundColor: 'transparent',
|
396
|
-
},
|
397
|
-
_h),
|
398
|
-
},
|
399
|
-
});
|
400
|
-
/**
|
401
|
-
* Apply styling to the SpinButton slots based on the state
|
402
|
-
*/
|
403
|
-
var useSpinButtonStyles_unstable = function (state) {
|
404
|
-
var appearance = state.appearance, atBound = state.atBound, spinState = state.spinState, size = state.size;
|
405
|
-
var disabled = state.input.disabled;
|
406
|
-
var invalid = "" + state.input['aria-invalid'] === 'true';
|
407
|
-
var filled = appearance.startsWith('filled');
|
408
|
-
var rootStyles = useRootStyles();
|
409
|
-
var buttonStyles = useButtonStyles();
|
410
|
-
var buttonDisabledStyles = useButtonDisabledStyles();
|
411
|
-
var inputStyles = useInputStyles();
|
412
|
-
state.root.className = react_1.mergeClasses(exports.spinButtonClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
|
413
|
-
state.incrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.incrementButton, spinState === 'up' && "" + spinButtonExtraClassNames.buttonActive, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], state.incrementButton.className);
|
414
|
-
state.decrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.decrementButton, spinState === 'down' && "" + spinButtonExtraClassNames.buttonActive, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], state.decrementButton.className);
|
415
|
-
state.input.className = react_1.mergeClasses(exports.spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);
|
416
|
-
return state;
|
417
|
-
};
|
418
|
-
exports.useSpinButtonStyles_unstable = useSpinButtonStyles_unstable;
|
419
|
-
});
|
420
|
-
//# sourceMappingURL=useSpinButtonStyles.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useSpinButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-grid',\n gridTemplateColumns: `1fr 24px`,\n gridTemplateRows: '1fr 1fr',\n columnGap: tokens.spacingHorizontalXS,\n rowGap: 0,\n position: 'relative',\n isolation: 'isolate',\n\n backgroundColor: tokens.colorNeutralBackground1,\n minHeight: fieldHeights.medium,\n padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n borderRadius: tokens.borderRadiusMedium,\n\n // Apply border styles on the ::before pseudo element.\n // We cannot use ::after since that is used for selection.\n // Using the pseudo element allows us to place the border\n // above content in the component which ensures the buttons\n // line up visually with the border as expected. Without this\n // there is a bit of a gap which can become very noticeable\n // at high zoom or when OS zoom levels are not divisible by 2\n // (e.g., 150% on Windows in Firefox)\n // This is most noticeable on the \"outline\" appearance which is\n // also the default so it feels worth the extra ceremony to get right.\n '::before': {\n content: '\"\"',\n boxSizing: 'border-box',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n pointerEvents: 'none',\n zIndex: 10,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n borderRadius: tokens.borderRadiusMedium,\n },\n\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: 20,\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\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 // Animation for focus IN\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 ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outline: '2px solid transparent',\n },\n});\n\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1,\n paddingLeft: tokens.spacingHorizontalS,\n },\n\n medium: {\n // set by useRootClassName\n },\n\n outline: {\n // set by useRootClassName\n },\n\n outlineInteractive: {\n ':hover::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n underline: {\n '::before': {\n ...shorthands.borderWidth(0, 0, '1px', 0),\n ...shorthands.borderRadius(tokens.borderRadiusNone), // corners look strange if rounded\n },\n },\n\n underlineInteractive: {\n ':hover::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n '::after': shorthands.borderRadius(tokens.borderRadiusNone), // remove rounded corners from focus underline\n },\n\n filled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n },\n\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n '::before': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n '::before': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n },\n\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nconst useInputClassName = makeResetStyles({\n gridColumnStart: '1',\n gridColumnEnd: '2',\n gridRowStart: '1',\n gridRowEnd: '3',\n outlineStyle: 'none',\n border: '0',\n padding: '0',\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n});\n\nconst useInputStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useBaseButtonClassName = makeResetStyles({\n display: 'inline-flex',\n width: '24px',\n alignItems: 'center',\n justifyContent: 'center',\n border: '0',\n position: 'absolute',\n\n outlineStyle: 'none',\n height: '16px',\n\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n // common button layout\n gridColumnStart: '2',\n borderRadius: '0',\n padding: '0 5px 0 5px',\n\n ':active': {\n outlineStyle: 'none',\n },\n\n ':enabled': {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n\n ':disabled': {\n cursor: 'not-allowed',\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\nconst useButtonStyles = makeStyles({\n increment: {\n gridRowStart: '1',\n borderTopRightRadius: tokens.borderRadiusMedium,\n paddingTop: '4px',\n paddingBottom: '1px',\n },\n decrement: {\n gridRowStart: '2',\n borderBottomRightRadius: tokens.borderRadiusMedium,\n paddingTop: '1px',\n paddingBottom: '4px',\n },\n // Padding values numbers don't align with design specs\n // but visually the padding aligns.\n // The icons are set in a 16x16px square but the artwork is inset from that\n // so these padding values are computed by hand.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n ...shorthands.padding('3px', '6px', '0px', '4px'),\n height: '12px',\n },\n\n decrementButtonSmall: {\n ...shorthands.padding('0px', '6px', '3px', '4px'),\n height: '12px',\n },\n\n outline: {\n // set by useButtonClassName\n },\n\n underline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-darker': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-lighter': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n base: {\n cursor: 'not-allowed',\n\n ':hover': {\n cursor: 'not-allowed',\n },\n },\n\n outline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n underline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-darker': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-lighter': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n const { appearance, atBound, spinState, size } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const buttonStyles = useButtonStyles();\n const buttonDisabledStyles = useButtonDisabledStyles();\n const inputStyles = useInputStyles();\n\n state.root.className = mergeClasses(\n spinButtonClassNames.root,\n useRootClassName(),\n rootStyles[size],\n rootStyles[appearance],\n filled && rootStyles.filled,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n !disabled && invalid && rootStyles.invalid,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.incrementButton.className = mergeClasses(\n spinButtonClassNames.incrementButton,\n spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n useBaseButtonClassName(),\n buttonStyles.increment,\n buttonStyles[appearance],\n size === 'small' && buttonStyles.incrementButtonSmall,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.incrementButton.className,\n );\n state.decrementButton.className = mergeClasses(\n spinButtonClassNames.decrementButton,\n spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n useBaseButtonClassName(),\n buttonStyles.decrement,\n buttonStyles[appearance],\n size === 'small' && buttonStyles.decrementButtonSmall,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.decrementButton.className,\n );\n\n state.input.className = mergeClasses(\n spinButtonClassNames.input,\n useInputClassName(),\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n return state;\n};\n"]}
|
@@ -1,10 +0,0 @@
|
|
1
|
-
define(["require", "exports", "@fluentui/react-field", "../../SpinButton"], function (require, exports, react_field_1, SpinButton_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.SpinButtonField = exports.spinButtonFieldClassNames = void 0;
|
5
|
-
/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */
|
6
|
-
exports.spinButtonFieldClassNames = react_field_1.getDeprecatedFieldClassNames(SpinButton_1.spinButtonClassNames.root);
|
7
|
-
/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */
|
8
|
-
exports.SpinButtonField = react_field_1.makeDeprecatedField(SpinButton_1.SpinButton);
|
9
|
-
});
|
10
|
-
//# sourceMappingURL=SpinButtonField.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"SpinButtonField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.tsx"],"names":[],"mappings":";;;;IAOA,6EAA6E;IAChE,QAAA,yBAAyB,GAAG,0CAA4B,CAAC,iCAAoB,CAAC,IAAI,CAAC,CAAC;IACjG,6EAA6E;IAChE,QAAA,eAAe,GAA8C,iCAAmB,CAAC,uBAAU,CAAC,CAAC","sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { SpinButton, spinButtonClassNames, SpinButtonProps } from '../../SpinButton';\n\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport type SpinButtonFieldProps = DeprecatedFieldProps<SpinButtonProps>;\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport const spinButtonFieldClassNames = getDeprecatedFieldClassNames(spinButtonClassNames.root);\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport const SpinButtonField: ForwardRefComponent<SpinButtonFieldProps> = makeDeprecatedField(SpinButton);\n"]}
|
@@ -1,6 +0,0 @@
|
|
1
|
-
define(["require", "exports", "tslib", "./SpinButtonField"], function (require, exports, tslib_1, SpinButtonField_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
tslib_1.__exportStar(SpinButtonField_1, exports);
|
5
|
-
});
|
6
|
-
//# sourceMappingURL=index.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButtonField/index.ts"],"names":[],"mappings":";;;IAAA,iDAAkC","sourcesContent":["export * from './SpinButtonField';\n"]}
|
package/lib-amd/index.js
DELETED
@@ -1,13 +0,0 @@
|
|
1
|
-
define(["require", "exports", "./SpinButton", "./SpinButtonField"], function (require, exports, SpinButton_1, SpinButtonField_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.spinButtonFieldClassNames = exports.SpinButtonField_unstable = exports.useSpinButton_unstable = exports.useSpinButtonStyles_unstable = exports.spinButtonClassNames = exports.renderSpinButton_unstable = exports.SpinButton = void 0;
|
5
|
-
Object.defineProperty(exports, "SpinButton", { enumerable: true, get: function () { return SpinButton_1.SpinButton; } });
|
6
|
-
Object.defineProperty(exports, "renderSpinButton_unstable", { enumerable: true, get: function () { return SpinButton_1.renderSpinButton_unstable; } });
|
7
|
-
Object.defineProperty(exports, "spinButtonClassNames", { enumerable: true, get: function () { return SpinButton_1.spinButtonClassNames; } });
|
8
|
-
Object.defineProperty(exports, "useSpinButtonStyles_unstable", { enumerable: true, get: function () { return SpinButton_1.useSpinButtonStyles_unstable; } });
|
9
|
-
Object.defineProperty(exports, "useSpinButton_unstable", { enumerable: true, get: function () { return SpinButton_1.useSpinButton_unstable; } });
|
10
|
-
Object.defineProperty(exports, "SpinButtonField_unstable", { enumerable: true, get: function () { return SpinButtonField_1.SpinButtonField; } });
|
11
|
-
Object.defineProperty(exports, "spinButtonFieldClassNames", { enumerable: true, get: function () { return SpinButtonField_1.spinButtonFieldClassNames; } });
|
12
|
-
});
|
13
|
-
//# sourceMappingURL=index.js.map
|
package/lib-amd/index.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-spinbutton/src/index.ts"],"names":[],"mappings":";;;;IACE,wGAAA,UAAU,OAAA;IACV,uHAAA,yBAAyB,OAAA;IACzB,kHAAA,oBAAoB,OAAA;IACpB,0HAAA,4BAA4B,OAAA;IAC5B,oHAAA,sBAAsB,OAAA;IAaf,2HAAA,eAAe,OAA4B;IAAE,4HAAA,yBAAyB,OAAA","sourcesContent":["export {\n SpinButton,\n renderSpinButton_unstable,\n spinButtonClassNames,\n useSpinButtonStyles_unstable,\n useSpinButton_unstable,\n} from './SpinButton';\nexport type {\n SpinButtonOnChangeData,\n SpinButtonChangeEvent,\n SpinButtonProps,\n SpinButtonSlots,\n SpinButtonState,\n SpinButtonSpinState,\n SpinButtonBounds,\n} from './SpinButton';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { SpinButtonField as SpinButtonField_unstable, spinButtonFieldClassNames } from './SpinButtonField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { SpinButtonFieldProps as SpinButtonFieldProps_unstable } from './SpinButtonField';\n"]}
|
package/lib-amd/utils/clamp.js
DELETED
@@ -1,30 +0,0 @@
|
|
1
|
-
define(["require", "exports"], function (require, exports) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.clamp = void 0;
|
5
|
-
var clamp = function (value, min, max) {
|
6
|
-
var nextValue = value;
|
7
|
-
if (min !== undefined) {
|
8
|
-
if (max !== undefined && min > max) {
|
9
|
-
var error = new Error();
|
10
|
-
if (process.env.NODE_ENV !== 'production') {
|
11
|
-
// eslint-disable-next-line no-console
|
12
|
-
console.error([
|
13
|
-
"\"min\" value \"" + min + "\" is greater than \"max\" value \"" + max + "\".",
|
14
|
-
'"min" must be less than or equal to "max".',
|
15
|
-
"Returning value \"" + value + "\".",
|
16
|
-
error.stack,
|
17
|
-
].join());
|
18
|
-
}
|
19
|
-
return value;
|
20
|
-
}
|
21
|
-
nextValue = Math.max(min, nextValue);
|
22
|
-
}
|
23
|
-
if (max !== undefined) {
|
24
|
-
nextValue = Math.min(max, nextValue);
|
25
|
-
}
|
26
|
-
return nextValue;
|
27
|
-
};
|
28
|
-
exports.clamp = clamp;
|
29
|
-
});
|
30
|
-
//# sourceMappingURL=clamp.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"clamp.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-spinbutton/src/utils/clamp.ts"],"names":[],"mappings":";;;;IAAO,IAAM,KAAK,GAAG,UAAC,KAAa,EAAE,GAAY,EAAE,GAAY;QAC7D,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,IAAI,GAAG,KAAK,SAAS,EAAE;YACrB,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,GAAG,GAAG,EAAE;gBAClC,IAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;gBAC1B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;oBACzC,sCAAsC;oBACtC,OAAO,CAAC,KAAK,CACX;wBACE,qBAAgB,GAAG,2CAAkC,GAAG,QAAI;wBAC5D,4CAA4C;wBAC5C,uBAAoB,KAAK,QAAI;wBAC7B,KAAK,CAAC,KAAK;qBACZ,CAAC,IAAI,EAAE,CACT,CAAC;iBACH;gBACD,OAAO,KAAK,CAAC;aACd;YAED,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;SACtC;QAED,IAAI,GAAG,KAAK,SAAS,EAAE;YACrB,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;SACtC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IA3BW,QAAA,KAAK,SA2BhB","sourcesContent":["export const clamp = (value: number, min?: number, max?: number): number => {\n let nextValue = value;\n if (min !== undefined) {\n if (max !== undefined && min > max) {\n const error = new Error();\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error(\n [\n `\"min\" value \"${min}\" is greater than \"max\" value \"${max}\".`,\n '\"min\" must be less than or equal to \"max\".',\n `Returning value \"${value}\".`,\n error.stack,\n ].join(),\n );\n }\n return value;\n }\n\n nextValue = Math.max(min, nextValue);\n }\n\n if (max !== undefined) {\n nextValue = Math.min(max, nextValue);\n }\n\n return nextValue;\n};\n"]}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
define(["require", "exports"], function (require, exports) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.getBound = void 0;
|
5
|
-
var getBound = function (value, min, max) {
|
6
|
-
if (min !== undefined && value === min) {
|
7
|
-
if (max === min) {
|
8
|
-
return 'both';
|
9
|
-
}
|
10
|
-
return 'min';
|
11
|
-
}
|
12
|
-
else if (max !== undefined && value === max) {
|
13
|
-
return 'max';
|
14
|
-
}
|
15
|
-
return 'none';
|
16
|
-
};
|
17
|
-
exports.getBound = getBound;
|
18
|
-
});
|
19
|
-
//# sourceMappingURL=getBound.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"getBound.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-spinbutton/src/utils/getBound.ts"],"names":[],"mappings":";;;;IAEO,IAAM,QAAQ,GAAG,UAAC,KAAa,EAAE,GAAY,EAAE,GAAY;QAChE,IAAI,GAAG,KAAK,SAAS,IAAI,KAAK,KAAK,GAAG,EAAE;YACtC,IAAI,GAAG,KAAK,GAAG,EAAE;gBACf,OAAO,MAAM,CAAC;aACf;YACD,OAAO,KAAK,CAAC;SACd;aAAM,IAAI,GAAG,KAAK,SAAS,IAAI,KAAK,KAAK,GAAG,EAAE;YAC7C,OAAO,KAAK,CAAC;SACd;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;IAXW,QAAA,QAAQ,YAWnB","sourcesContent":["import type { SpinButtonBounds } from '../SpinButton';\n\nexport const getBound = (value: number, min?: number, max?: number): SpinButtonBounds => {\n if (min !== undefined && value === min) {\n if (max === min) {\n return 'both';\n }\n return 'min';\n } else if (max !== undefined && value === max) {\n return 'max';\n }\n\n return 'none';\n};\n"]}
|
package/lib-amd/utils/index.js
DELETED
@@ -1,8 +0,0 @@
|
|
1
|
-
define(["require", "exports", "tslib", "./clamp", "./getBound", "./precision"], function (require, exports, tslib_1, clamp_1, getBound_1, precision_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
tslib_1.__exportStar(clamp_1, exports);
|
5
|
-
tslib_1.__exportStar(getBound_1, exports);
|
6
|
-
tslib_1.__exportStar(precision_1, exports);
|
7
|
-
});
|
8
|
-
//# sourceMappingURL=index.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-spinbutton/src/utils/index.ts"],"names":[],"mappings":";;;IAAA,uCAAwB;IACxB,0CAA2B;IAC3B,2CAA4B","sourcesContent":["export * from './clamp';\nexport * from './getBound';\nexport * from './precision';\n"]}
|