@fluentui/react-spinbutton 0.0.0-nightly-20220512-0418.1 → 0.0.0-nightly-20220517-0418.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +42 -24
- package/CHANGELOG.md +15 -12
- package/dist/index.d.ts +0 -17
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/components/SpinButton/SpinButton.types.js.map +1 -1
- package/lib/components/SpinButton/useSpinButton.js +3 -5
- package/lib/components/SpinButton/useSpinButton.js.map +1 -1
- package/lib/components/SpinButton/useSpinButtonStyles.js +2 -2
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/SpinButton/useSpinButton.js +3 -6
- package/lib-commonjs/components/SpinButton/useSpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js +2 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -9
- package/lib/SpinButton.d.ts +0 -1
- package/lib/components/SpinButton/SpinButton.d.ts +0 -6
- package/lib/components/SpinButton/SpinButton.strings.d.ts +0 -2
- package/lib/components/SpinButton/SpinButton.strings.js +0 -5
- package/lib/components/SpinButton/SpinButton.strings.js.map +0 -1
- package/lib/components/SpinButton/SpinButton.types.d.ts +0 -140
- package/lib/components/SpinButton/index.d.ts +0 -5
- package/lib/components/SpinButton/renderSpinButton.d.ts +0 -5
- package/lib/components/SpinButton/useSpinButton.d.ts +0 -12
- package/lib/components/SpinButton/useSpinButtonStyles.d.ts +0 -7
- package/lib/index.d.ts +0 -2
- package/lib/utils/clamp.d.ts +0 -1
- package/lib/utils/getBound.d.ts +0 -2
- package/lib/utils/index.d.ts +0 -3
- package/lib/utils/precision.d.ts +0 -14
- package/lib-commonjs/SpinButton.d.ts +0 -1
- package/lib-commonjs/components/SpinButton/SpinButton.d.ts +0 -6
- package/lib-commonjs/components/SpinButton/SpinButton.strings.d.ts +0 -2
- package/lib-commonjs/components/SpinButton/SpinButton.strings.js +0 -11
- package/lib-commonjs/components/SpinButton/SpinButton.strings.js.map +0 -1
- package/lib-commonjs/components/SpinButton/SpinButton.types.d.ts +0 -140
- package/lib-commonjs/components/SpinButton/index.d.ts +0 -5
- package/lib-commonjs/components/SpinButton/renderSpinButton.d.ts +0 -5
- package/lib-commonjs/components/SpinButton/useSpinButton.d.ts +0 -12
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.d.ts +0 -7
- package/lib-commonjs/index.d.ts +0 -2
- package/lib-commonjs/utils/clamp.d.ts +0 -1
- package/lib-commonjs/utils/getBound.d.ts +0 -2
- package/lib-commonjs/utils/index.d.ts +0 -3
- package/lib-commonjs/utils/precision.d.ts +0 -14
package/CHANGELOG.json
CHANGED
@@ -2,16 +2,34 @@
|
|
2
2
|
"name": "@fluentui/react-spinbutton",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
6
|
-
"tag": "@fluentui/react-spinbutton_v0.0.0-nightly-
|
7
|
-
"version": "0.0.0-nightly-
|
5
|
+
"date": "Tue, 17 May 2022 04:30:54 GMT",
|
6
|
+
"tag": "@fluentui/react-spinbutton_v0.0.0-nightly-20220517-0418.1",
|
7
|
+
"version": "0.0.0-nightly-20220517-0418.1",
|
8
8
|
"comments": {
|
9
9
|
"prerelease": [
|
10
10
|
{
|
11
|
-
"author": "
|
11
|
+
"author": "seanmonahan@microsoft.com",
|
12
|
+
"package": "@fluentui/react-spinbutton",
|
13
|
+
"commit": "2876fdf9a81f0a9a7c5fd0499bd48045b6b5fd5c",
|
14
|
+
"comment": "react-spinbutton: remove SpinButtonCommons type"
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"author": "olfedias@microsoft.com",
|
12
18
|
"package": "@fluentui/react-spinbutton",
|
13
|
-
"commit": "
|
14
|
-
"comment": "
|
19
|
+
"commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
|
20
|
+
"comment": "chore: Update Griffel to latest version"
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"author": "seanmonahan@microsoft.com",
|
24
|
+
"package": "@fluentui/react-spinbutton",
|
25
|
+
"commit": "e5f896d0098d23b01a4f0ab4b154fca0a47a1a89",
|
26
|
+
"comment": "react-spinbutton: update appearance stories"
|
27
|
+
},
|
28
|
+
{
|
29
|
+
"author": "seanmonahan@microsoft.com",
|
30
|
+
"package": "@fluentui/react-spinbutton",
|
31
|
+
"commit": "111151a252ce77c26354f50101791bbe71de78fe",
|
32
|
+
"comment": "appearance story updates"
|
15
33
|
},
|
16
34
|
{
|
17
35
|
"author": "esteban.230@hotmail.com",
|
@@ -19,6 +37,12 @@
|
|
19
37
|
"commit": "0fac2d7a6f35c5fcebaf30da68b9604410fe0eb9",
|
20
38
|
"comment": "Updated react-label package version to RC."
|
21
39
|
},
|
40
|
+
{
|
41
|
+
"author": "martinhochel@microsoft.com",
|
42
|
+
"package": "@fluentui/react-spinbutton",
|
43
|
+
"commit": "e7b70cb06f4422e5574993fd2ad44d9073647417",
|
44
|
+
"comment": "feat: ship rolluped only dts"
|
45
|
+
},
|
22
46
|
{
|
23
47
|
"author": "seanmonahan@microsoft.com",
|
24
48
|
"package": "@fluentui/react-spinbutton",
|
@@ -34,44 +58,38 @@
|
|
34
58
|
{
|
35
59
|
"author": "seanmonahan@microsoft.com",
|
36
60
|
"package": "@fluentui/react-spinbutton",
|
37
|
-
"commit": "
|
38
|
-
"comment": "react-spinbutton: remove
|
39
|
-
},
|
40
|
-
{
|
41
|
-
"author": "beachball",
|
42
|
-
"package": "@fluentui/react-spinbutton",
|
43
|
-
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220512-0418.1",
|
44
|
-
"commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
|
61
|
+
"commit": "c70db5af9d6986c0f4c03c4c54bf26cb7a0f2096",
|
62
|
+
"comment": "react-spinbutton: remove \"strings\" prop"
|
45
63
|
},
|
46
64
|
{
|
47
65
|
"author": "beachball",
|
48
66
|
"package": "@fluentui/react-spinbutton",
|
49
|
-
"comment": "Bump @fluentui/react-input to v0.0.0-nightly-
|
50
|
-
"commit": "
|
67
|
+
"comment": "Bump @fluentui/react-input to v0.0.0-nightly-20220517-0418.1",
|
68
|
+
"commit": "f95f6684cb226074554f5279075ff446d8397b6b"
|
51
69
|
},
|
52
70
|
{
|
53
71
|
"author": "beachball",
|
54
72
|
"package": "@fluentui/react-spinbutton",
|
55
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
56
|
-
"commit": "
|
73
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220517-0418.1",
|
74
|
+
"commit": "f95f6684cb226074554f5279075ff446d8397b6b"
|
57
75
|
},
|
58
76
|
{
|
59
77
|
"author": "beachball",
|
60
78
|
"package": "@fluentui/react-spinbutton",
|
61
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
62
|
-
"commit": "
|
79
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220517-0418.1",
|
80
|
+
"commit": "f95f6684cb226074554f5279075ff446d8397b6b"
|
63
81
|
},
|
64
82
|
{
|
65
83
|
"author": "beachball",
|
66
84
|
"package": "@fluentui/react-spinbutton",
|
67
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
68
|
-
"commit": "
|
85
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220517-0418.1",
|
86
|
+
"commit": "f95f6684cb226074554f5279075ff446d8397b6b"
|
69
87
|
},
|
70
88
|
{
|
71
89
|
"author": "beachball",
|
72
90
|
"package": "@fluentui/react-spinbutton",
|
73
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
74
|
-
"commit": "
|
91
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220517-0418.1",
|
92
|
+
"commit": "f95f6684cb226074554f5279075ff446d8397b6b"
|
75
93
|
}
|
76
94
|
]
|
77
95
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,27 +1,30 @@
|
|
1
1
|
# Change Log - @fluentui/react-spinbutton
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Tue, 17 May 2022 04:30:54 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
-
## [0.0.0-nightly-
|
7
|
+
## [0.0.0-nightly-20220517-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v0.0.0-nightly-20220517-0418.1)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.9..@fluentui/react-spinbutton_v0.0.0-nightly-
|
9
|
+
Tue, 17 May 2022 04:30:54 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.9..@fluentui/react-spinbutton_v0.0.0-nightly-20220517-0418.1)
|
11
11
|
|
12
12
|
### Changes
|
13
13
|
|
14
|
-
-
|
14
|
+
- react-spinbutton: remove SpinButtonCommons type ([PR #22871](https://github.com/microsoft/fluentui/pull/22871) by seanmonahan@microsoft.com)
|
15
|
+
- chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
|
16
|
+
- react-spinbutton: update appearance stories ([PR #22980](https://github.com/microsoft/fluentui/pull/22980) by seanmonahan@microsoft.com)
|
17
|
+
- appearance story updates ([PR #22995](https://github.com/microsoft/fluentui/pull/22995) by seanmonahan@microsoft.com)
|
15
18
|
- Updated react-label package version to RC. ([PR #22865](https://github.com/microsoft/fluentui/pull/22865) by esteban.230@hotmail.com)
|
19
|
+
- feat: ship rolluped only dts ([PR #22828](https://github.com/microsoft/fluentui/pull/22828) by martinhochel@microsoft.com)
|
16
20
|
- react-spinbutton: add aria-valuetext override ([PR #22905](https://github.com/microsoft/fluentui/pull/22905) by seanmonahan@microsoft.com)
|
17
21
|
- react-spinbutton: use spacing tokens ([PR #22950](https://github.com/microsoft/fluentui/pull/22950) by gcox@microsoft.com)
|
18
|
-
- react-spinbutton: remove
|
19
|
-
- Bump @fluentui/
|
20
|
-
- Bump @fluentui/react-
|
21
|
-
- Bump @fluentui/react-
|
22
|
-
- Bump @fluentui/react-
|
23
|
-
- Bump @fluentui/react-
|
24
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
|
22
|
+
- react-spinbutton: remove "strings" prop ([PR #22948](https://github.com/microsoft/fluentui/pull/22948) by seanmonahan@microsoft.com)
|
23
|
+
- Bump @fluentui/react-input to v0.0.0-nightly-20220517-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/f95f6684cb226074554f5279075ff446d8397b6b) by beachball)
|
24
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20220517-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/f95f6684cb226074554f5279075ff446d8397b6b) by beachball)
|
25
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20220517-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/f95f6684cb226074554f5279075ff446d8397b6b) by beachball)
|
26
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220517-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/f95f6684cb226074554f5279075ff446d8397b6b) by beachball)
|
27
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20220517-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/f95f6684cb226074554f5279075ff446d8397b6b) by beachball)
|
25
28
|
|
26
29
|
## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.9)
|
27
30
|
|
package/dist/index.d.ts
CHANGED
@@ -94,10 +94,6 @@ export declare type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlot
|
|
94
94
|
* @default 1
|
95
95
|
*/
|
96
96
|
stepPage?: number;
|
97
|
-
/**
|
98
|
-
* Strings for localizing text in the control.
|
99
|
-
*/
|
100
|
-
strings?: SpinButtonStrings;
|
101
97
|
/**
|
102
98
|
* Current value of the control (assumed to be valid).
|
103
99
|
*
|
@@ -150,19 +146,6 @@ export declare type SpinButtonState = ComponentState<SpinButtonSlots> & Required
|
|
150
146
|
atBound: SpinButtonBounds;
|
151
147
|
};
|
152
148
|
|
153
|
-
export declare type SpinButtonStrings = {
|
154
|
-
/**
|
155
|
-
* Label applied to the increment button.
|
156
|
-
* Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
|
157
|
-
*/
|
158
|
-
incrementButtonLabel: string;
|
159
|
-
/**
|
160
|
-
* Label applied to the decrement button.
|
161
|
-
* Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
|
162
|
-
*/
|
163
|
-
decrementButtonLabel: string;
|
164
|
-
};
|
165
|
-
|
166
149
|
/**
|
167
150
|
* Create the state required to render SpinButton.
|
168
151
|
*
|
File without changes
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SpinButton.types.js","sourceRoot":"../src/","sources":["components/SpinButton/SpinButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n// import { Input } from '@fluentui/react-input';\nimport * as React from 'react';\n\nexport type SpinButtonSlots = {\n /**\n * The root element of SpinButton is a container `<div>`.\n * The root slot receives the `className` and `style` specified on the `<SpinButton>`.\n * All other native props are applied to the primary slot: `input`.\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * Input that displays the current value and accepts direct input from the user.\n * Displayed value is formatted.\n *\n * This is the primary slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * Renders the increment control.\n */\n incrementButton: NonNullable<Slot<'button'>>;\n\n /**\n * Renders the decrement control.\n */\n decrementButton: NonNullable<Slot<'button'>>;\n};\n\n/**\n * SpinButton Props\n */\nexport type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlots>, 'input'>, 'onChange' | 'size'> & {\n /**\n * Controls the colors and borders of the input.\n * @default 'outline'\n */\n appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';\n\n /**\n * Initial value of the control (assumed to be valid). Updates to this prop will not be respected.\n *\n * Use this if you intend for the SpinButton to be an uncontrolled component which maintains its\n * own value. For a controlled component, use `value` instead. (Mutually exclusive with `value`.)\n */\n defaultValue?: number;\n\n /**\n * String representation of `value`.\n *\n * Use this when displaying the value to users as something other than a plain number.\n * For example, when displaying currency values this might be \"$1.00\" when value is `1`.\n *\n * Only provide this if the SpinButton is a controlled component where you are maintaining its\n * current state and passing updates based on change events. When SpinButton is used as an\n * uncontrolled component this prop is ignored.\n */\n displayValue?: string;\n\n /**\n * Max value of the control. If not provided, the control has no maximum value.\n */\n max?: number;\n\n /**\n * Min value of the control. If not provided, the control has no minimum value.\n */\n min?: number;\n\n /**\n * Callback for when the committed value changes.\n * - User presses the up/down buttons (on single press or every spin)\n * - User presses the up/down arrow keys (on single press or every spin)\n * - User *commits* edits to the input text by focusing away (blurring) or pressing enter.\n * Note that this is NOT called for every key press while the user is editing.\n */\n onChange?: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;\n\n /**\n * How many decimal places the value should be rounded to.\n *\n * The default is calculated based on the precision of `step`: i.e. if step = 1, precision = 0.\n * step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.\n */\n precision?: number;\n\n /**\n * Size of the input.\n * @default 'medium'\n */\n size?: 'small' | 'medium';\n\n /**\n * Difference between two adjacent values of the control.\n * This value is used to calculate the precision of the input if no `precision` is given.\n * The precision calculated this way will always be greater than or equal 0.\n * @default 1\n */\n step?: number;\n\n /**\n * Large difference between two values. This should be greater than `step` and is used\n * when users hit the Page Up or Page Down keys.\n * @default 1\n */\n stepPage?: number;\n\n /**\n *
|
1
|
+
{"version":3,"file":"SpinButton.types.js","sourceRoot":"../src/","sources":["components/SpinButton/SpinButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n// import { Input } from '@fluentui/react-input';\nimport * as React from 'react';\n\nexport type SpinButtonSlots = {\n /**\n * The root element of SpinButton is a container `<div>`.\n * The root slot receives the `className` and `style` specified on the `<SpinButton>`.\n * All other native props are applied to the primary slot: `input`.\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * Input that displays the current value and accepts direct input from the user.\n * Displayed value is formatted.\n *\n * This is the primary slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * Renders the increment control.\n */\n incrementButton: NonNullable<Slot<'button'>>;\n\n /**\n * Renders the decrement control.\n */\n decrementButton: NonNullable<Slot<'button'>>;\n};\n\n/**\n * SpinButton Props\n */\nexport type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlots>, 'input'>, 'onChange' | 'size'> & {\n /**\n * Controls the colors and borders of the input.\n * @default 'outline'\n */\n appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';\n\n /**\n * Initial value of the control (assumed to be valid). Updates to this prop will not be respected.\n *\n * Use this if you intend for the SpinButton to be an uncontrolled component which maintains its\n * own value. For a controlled component, use `value` instead. (Mutually exclusive with `value`.)\n */\n defaultValue?: number;\n\n /**\n * String representation of `value`.\n *\n * Use this when displaying the value to users as something other than a plain number.\n * For example, when displaying currency values this might be \"$1.00\" when value is `1`.\n *\n * Only provide this if the SpinButton is a controlled component where you are maintaining its\n * current state and passing updates based on change events. When SpinButton is used as an\n * uncontrolled component this prop is ignored.\n */\n displayValue?: string;\n\n /**\n * Max value of the control. If not provided, the control has no maximum value.\n */\n max?: number;\n\n /**\n * Min value of the control. If not provided, the control has no minimum value.\n */\n min?: number;\n\n /**\n * Callback for when the committed value changes.\n * - User presses the up/down buttons (on single press or every spin)\n * - User presses the up/down arrow keys (on single press or every spin)\n * - User *commits* edits to the input text by focusing away (blurring) or pressing enter.\n * Note that this is NOT called for every key press while the user is editing.\n */\n onChange?: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;\n\n /**\n * How many decimal places the value should be rounded to.\n *\n * The default is calculated based on the precision of `step`: i.e. if step = 1, precision = 0.\n * step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.\n */\n precision?: number;\n\n /**\n * Size of the input.\n * @default 'medium'\n */\n size?: 'small' | 'medium';\n\n /**\n * Difference between two adjacent values of the control.\n * This value is used to calculate the precision of the input if no `precision` is given.\n * The precision calculated this way will always be greater than or equal 0.\n * @default 1\n */\n step?: number;\n\n /**\n * Large difference between two values. This should be greater than `step` and is used\n * when users hit the Page Up or Page Down keys.\n * @default 1\n */\n stepPage?: number;\n\n /**\n * Current value of the control (assumed to be valid).\n *\n * Only provide this if the SpinButton is a controlled component where you are maintaining its\n * current state and passing updates based on change events; otherwise, use the `defaultValue`\n * property. (Mutually exclusive with `defaultValue`.)\n */\n value?: number;\n};\n\n/**\n * State used in rendering SpinButton\n */\nexport type SpinButtonState = ComponentState<SpinButtonSlots> &\n Required<Pick<SpinButtonProps, 'appearance' | 'size'>> & {\n /**\n * State used to track which direction, if any, SpinButton is currently spinning.\n * @default 'rest'\n */\n spinState: SpinButtonSpinState;\n\n /**\n * State used to track if the value is at the range bounds of [min-max].\n * @default 'none'\n */\n atBound: SpinButtonBounds;\n };\n\nexport type SpinButtonChangeEvent =\n | React.MouseEvent<HTMLButtonElement>\n | React.ChangeEvent<HTMLElement>\n | React.FocusEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLInputElement>;\n\nexport type SpinButtonOnChangeData = {\n value?: number;\n displayValue?: string;\n};\n\nexport type SpinButtonSpinState = 'rest' | 'up' | 'down';\nexport type SpinButtonBounds = 'none' | 'min' | 'max' | 'both';\n"]}
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { getPartitionedNativeProps, resolveShorthand, useControllableState, useMergedEventCallbacks, useTimeout } from '@fluentui/react-utilities';
|
3
3
|
import * as Keys from '@fluentui/keyboard-keys';
|
4
|
-
import { spinButtonDefaultStrings } from './SpinButton.strings';
|
5
4
|
import { calculatePrecision, precisionRound, getBound, clampWhenInRange } from '../../utils/index';
|
6
5
|
import { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';
|
7
6
|
const DEFAULT_SPIN_DELAY_MS = 150;
|
@@ -45,8 +44,7 @@ export const useSpinButton_unstable = (props, ref) => {
|
|
45
44
|
root,
|
46
45
|
input,
|
47
46
|
incrementButton,
|
48
|
-
decrementButton
|
49
|
-
strings = spinButtonDefaultStrings
|
47
|
+
decrementButton
|
50
48
|
} = props;
|
51
49
|
const precision = React.useMemo(() => {
|
52
50
|
return precisionFromProps !== null && precisionFromProps !== void 0 ? precisionFromProps : Math.max(calculatePrecision(step), 0);
|
@@ -97,7 +95,7 @@ export const useSpinButton_unstable = (props, ref) => {
|
|
97
95
|
tabIndex: -1,
|
98
96
|
children: /*#__PURE__*/React.createElement(ChevronUp16Regular, null),
|
99
97
|
disabled: nativeProps.primary.disabled,
|
100
|
-
'aria-label':
|
98
|
+
'aria-label': 'Increment value'
|
101
99
|
}
|
102
100
|
}),
|
103
101
|
decrementButton: resolveShorthand(decrementButton, {
|
@@ -106,7 +104,7 @@ export const useSpinButton_unstable = (props, ref) => {
|
|
106
104
|
tabIndex: -1,
|
107
105
|
children: /*#__PURE__*/React.createElement(ChevronDown16Regular, null),
|
108
106
|
disabled: nativeProps.primary.disabled,
|
109
|
-
'aria-label':
|
107
|
+
'aria-label': 'Decrement value'
|
110
108
|
}
|
111
109
|
})
|
112
110
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/SpinButton/useSpinButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useMergedEventCallbacks,\n useTimeout,\n} from '@fluentui/react-utilities';\nimport * as Keys from '@fluentui/keyboard-keys';\nimport {\n SpinButtonProps,\n SpinButtonState,\n SpinButtonSpinState,\n SpinButtonChangeEvent,\n SpinButtonBounds,\n} from './SpinButton.types';\nimport { spinButtonDefaultStrings } from './SpinButton.strings';\nimport { calculatePrecision, precisionRound, getBound, clampWhenInRange } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\n\ntype InternalState = {\n value: number;\n spinState: SpinButtonSpinState;\n spinTime: number;\n spinDelay: number;\n previousTextValue?: string;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the state required to render SpinButton.\n *\n * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,\n * before being passed to renderSpinButton_unstable.\n *\n * @param props - props from this instance of SpinButton\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>): SpinButtonState => {\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'size', 'min', 'max'],\n });\n\n const {\n value,\n displayValue,\n defaultValue,\n min,\n max,\n step = 1,\n stepPage = 1,\n precision: precisionFromProps,\n onChange,\n size = 'medium',\n appearance = 'outline',\n root,\n input,\n incrementButton,\n decrementButton,\n strings = spinButtonDefaultStrings,\n } = props;\n\n const precision = React.useMemo(() => {\n return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n }, [precisionFromProps, step]);\n\n const [currentValue, setCurrentValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: 0,\n });\n const [textValue, setTextValue] = React.useState(\n value !== undefined && displayValue !== undefined ? displayValue : String(currentValue),\n );\n const [spinState, setSpinState] = React.useState<SpinButtonSpinState>('rest');\n const [atBound, setAtBound] = React.useState<SpinButtonBounds>('none');\n\n const internalState = React.useRef<InternalState>({\n value: currentValue,\n spinState,\n spinTime: 0,\n spinDelay: DEFAULT_SPIN_DELAY_MS,\n });\n\n const state: SpinButtonState = {\n size,\n appearance,\n spinState,\n atBound,\n\n components: {\n root: 'span',\n input: 'input',\n incrementButton: 'button',\n decrementButton: 'button',\n },\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n ref,\n autoComplete: 'off',\n role: 'spinbutton',\n appearance: appearance,\n type: 'text',\n ...nativeProps.primary,\n },\n }),\n incrementButton: resolveShorthand(incrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronUp16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': strings.incrementButtonLabel.replace('{step}', step.toString()),\n },\n }),\n decrementButton: resolveShorthand(decrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronDown16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': strings.decrementButtonLabel.replace('{step}', step.toString()),\n },\n }),\n };\n\n const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n React.useEffect(() => {\n let newTextValue;\n if (value !== undefined) {\n const roundedValue = precisionRound(value, precision);\n newTextValue = displayValue ?? String(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n } else {\n newTextValue = String(precisionRound(currentValue, precision));\n internalState.current.value = currentValue;\n }\n setTextValue(newTextValue);\n }, [value, displayValue, currentValue, precision, setAtBound, min, max]);\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!internalState.current.previousTextValue) {\n internalState.current.previousTextValue = textValue;\n }\n\n const newValue = e.target.value;\n setTextValue(newValue);\n };\n\n const stepValue = (e: SpinButtonChangeEvent, direction: 'up' | 'down' | 'upPage' | 'downPage') => {\n const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n const val = internalState.current.value;\n\n let newValue = val + stepSize * dir;\n if (!Number.isNaN(newValue)) {\n newValue = clampWhenInRange(val, newValue, min, max);\n }\n\n commit(e, newValue);\n\n if (internalState.current.spinState !== 'rest') {\n setStepTimeout(() => {\n // Ease the step speed a bit\n internalState.current.spinTime += internalState.current.spinDelay;\n internalState.current.spinDelay = lerp(\n DEFAULT_SPIN_DELAY_MS,\n MIN_SPIN_DELAY_MS,\n internalState.current.spinTime / MAX_SPIN_TIME_MS,\n );\n stepValue(e, direction);\n }, internalState.current.spinDelay);\n }\n };\n\n const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'up';\n stepValue(e, 'up');\n };\n\n const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'down';\n stepValue(e, 'down');\n };\n\n const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n clearStepTimeout();\n internalState.current.spinState = 'rest';\n internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n internalState.current.spinTime = 0;\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === Keys.ArrowUp) {\n stepValue(e, 'up');\n setSpinState('up');\n } else if (e.key === Keys.ArrowDown) {\n stepValue(e, 'down');\n setSpinState('down');\n } else if (e.key === Keys.PageUp) {\n e.preventDefault();\n stepValue(e, 'upPage');\n setSpinState('up');\n } else if (e.key === Keys.PageDown) {\n e.preventDefault();\n stepValue(e, 'downPage');\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {\n commit(e, min);\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {\n commit(e, max);\n setSpinState('up');\n } else if (e.key === Keys.Enter) {\n commit(e, currentValue, textValue);\n setSpinState('rest');\n } else if (e.key === Keys.Escape) {\n if (internalState.current.previousTextValue) {\n setTextValue(internalState.current.previousTextValue);\n internalState.current.previousTextValue = undefined;\n }\n setSpinState('rest');\n } else {\n setSpinState('rest');\n }\n };\n\n const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n setSpinState('rest');\n };\n\n const commit = (e: SpinButtonChangeEvent, newValue?: number, newDisplayValue?: string) => {\n const valueChanged = newValue !== undefined && currentValue !== newValue;\n const displayValueChanged =\n newDisplayValue !== undefined &&\n internalState.current.previousTextValue !== undefined &&\n internalState.current.previousTextValue !== newDisplayValue;\n\n let roundedValue;\n if (valueChanged) {\n roundedValue = precisionRound(newValue!, precision);\n setCurrentValue(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n }\n\n if (valueChanged || displayValueChanged) {\n onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n }\n };\n\n state.input.value = textValue;\n state.input['aria-valuemin'] = min;\n state.input['aria-valuemax'] = max;\n state.input['aria-valuenow'] = currentValue;\n state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n state.input.onChange = useMergedEventCallbacks(state.input.onChange, handleInputChange);\n state.input.onBlur = useMergedEventCallbacks(state.input.onBlur, handleBlur);\n state.input.onKeyDown = useMergedEventCallbacks(state.input.onKeyDown, handleKeyDown);\n state.input.onKeyUp = useMergedEventCallbacks(state.input.onKeyUp, handleKeyUp);\n\n state.incrementButton.onMouseDown = useMergedEventCallbacks(\n handleIncrementMouseDown,\n state.incrementButton.onMouseDown,\n );\n state.incrementButton.onMouseUp = useMergedEventCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.incrementButton.onMouseLeave = useMergedEventCallbacks(\n state.incrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n state.decrementButton.onMouseDown = useMergedEventCallbacks(\n handleDecrementMouseDown,\n state.decrementButton.onMouseDown,\n );\n state.decrementButton.onMouseUp = useMergedEventCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.decrementButton.onMouseLeave = useMergedEventCallbacks(\n state.decrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["components/SpinButton/useSpinButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useMergedEventCallbacks,\n useTimeout,\n} from '@fluentui/react-utilities';\nimport * as Keys from '@fluentui/keyboard-keys';\nimport {\n SpinButtonProps,\n SpinButtonState,\n SpinButtonSpinState,\n SpinButtonChangeEvent,\n SpinButtonBounds,\n} from './SpinButton.types';\nimport { calculatePrecision, precisionRound, getBound, clampWhenInRange } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\n\ntype InternalState = {\n value: number;\n spinState: SpinButtonSpinState;\n spinTime: number;\n spinDelay: number;\n previousTextValue?: string;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the state required to render SpinButton.\n *\n * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,\n * before being passed to renderSpinButton_unstable.\n *\n * @param props - props from this instance of SpinButton\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>): SpinButtonState => {\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'size', 'min', 'max'],\n });\n\n const {\n value,\n displayValue,\n defaultValue,\n min,\n max,\n step = 1,\n stepPage = 1,\n precision: precisionFromProps,\n onChange,\n size = 'medium',\n appearance = 'outline',\n root,\n input,\n incrementButton,\n decrementButton,\n } = props;\n\n const precision = React.useMemo(() => {\n return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n }, [precisionFromProps, step]);\n\n const [currentValue, setCurrentValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: 0,\n });\n const [textValue, setTextValue] = React.useState(\n value !== undefined && displayValue !== undefined ? displayValue : String(currentValue),\n );\n const [spinState, setSpinState] = React.useState<SpinButtonSpinState>('rest');\n const [atBound, setAtBound] = React.useState<SpinButtonBounds>('none');\n\n const internalState = React.useRef<InternalState>({\n value: currentValue,\n spinState,\n spinTime: 0,\n spinDelay: DEFAULT_SPIN_DELAY_MS,\n });\n\n const state: SpinButtonState = {\n size,\n appearance,\n spinState,\n atBound,\n\n components: {\n root: 'span',\n input: 'input',\n incrementButton: 'button',\n decrementButton: 'button',\n },\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n ref,\n autoComplete: 'off',\n role: 'spinbutton',\n appearance: appearance,\n type: 'text',\n ...nativeProps.primary,\n },\n }),\n incrementButton: resolveShorthand(incrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronUp16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Increment value',\n },\n }),\n decrementButton: resolveShorthand(decrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronDown16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Decrement value',\n },\n }),\n };\n\n const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n React.useEffect(() => {\n let newTextValue;\n if (value !== undefined) {\n const roundedValue = precisionRound(value, precision);\n newTextValue = displayValue ?? String(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n } else {\n newTextValue = String(precisionRound(currentValue, precision));\n internalState.current.value = currentValue;\n }\n setTextValue(newTextValue);\n }, [value, displayValue, currentValue, precision, setAtBound, min, max]);\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!internalState.current.previousTextValue) {\n internalState.current.previousTextValue = textValue;\n }\n\n const newValue = e.target.value;\n setTextValue(newValue);\n };\n\n const stepValue = (e: SpinButtonChangeEvent, direction: 'up' | 'down' | 'upPage' | 'downPage') => {\n const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n const val = internalState.current.value;\n\n let newValue = val + stepSize * dir;\n if (!Number.isNaN(newValue)) {\n newValue = clampWhenInRange(val, newValue, min, max);\n }\n\n commit(e, newValue);\n\n if (internalState.current.spinState !== 'rest') {\n setStepTimeout(() => {\n // Ease the step speed a bit\n internalState.current.spinTime += internalState.current.spinDelay;\n internalState.current.spinDelay = lerp(\n DEFAULT_SPIN_DELAY_MS,\n MIN_SPIN_DELAY_MS,\n internalState.current.spinTime / MAX_SPIN_TIME_MS,\n );\n stepValue(e, direction);\n }, internalState.current.spinDelay);\n }\n };\n\n const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'up';\n stepValue(e, 'up');\n };\n\n const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'down';\n stepValue(e, 'down');\n };\n\n const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n clearStepTimeout();\n internalState.current.spinState = 'rest';\n internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n internalState.current.spinTime = 0;\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === Keys.ArrowUp) {\n stepValue(e, 'up');\n setSpinState('up');\n } else if (e.key === Keys.ArrowDown) {\n stepValue(e, 'down');\n setSpinState('down');\n } else if (e.key === Keys.PageUp) {\n e.preventDefault();\n stepValue(e, 'upPage');\n setSpinState('up');\n } else if (e.key === Keys.PageDown) {\n e.preventDefault();\n stepValue(e, 'downPage');\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {\n commit(e, min);\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {\n commit(e, max);\n setSpinState('up');\n } else if (e.key === Keys.Enter) {\n commit(e, currentValue, textValue);\n setSpinState('rest');\n } else if (e.key === Keys.Escape) {\n if (internalState.current.previousTextValue) {\n setTextValue(internalState.current.previousTextValue);\n internalState.current.previousTextValue = undefined;\n }\n setSpinState('rest');\n } else {\n setSpinState('rest');\n }\n };\n\n const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n setSpinState('rest');\n };\n\n const commit = (e: SpinButtonChangeEvent, newValue?: number, newDisplayValue?: string) => {\n const valueChanged = newValue !== undefined && currentValue !== newValue;\n const displayValueChanged =\n newDisplayValue !== undefined &&\n internalState.current.previousTextValue !== undefined &&\n internalState.current.previousTextValue !== newDisplayValue;\n\n let roundedValue;\n if (valueChanged) {\n roundedValue = precisionRound(newValue!, precision);\n setCurrentValue(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n }\n\n if (valueChanged || displayValueChanged) {\n onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n }\n };\n\n state.input.value = textValue;\n state.input['aria-valuemin'] = min;\n state.input['aria-valuemax'] = max;\n state.input['aria-valuenow'] = currentValue;\n state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n state.input.onChange = useMergedEventCallbacks(state.input.onChange, handleInputChange);\n state.input.onBlur = useMergedEventCallbacks(state.input.onBlur, handleBlur);\n state.input.onKeyDown = useMergedEventCallbacks(state.input.onKeyDown, handleKeyDown);\n state.input.onKeyUp = useMergedEventCallbacks(state.input.onKeyUp, handleKeyUp);\n\n state.incrementButton.onMouseDown = useMergedEventCallbacks(\n handleIncrementMouseDown,\n state.incrementButton.onMouseDown,\n );\n state.incrementButton.onMouseUp = useMergedEventCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.incrementButton.onMouseLeave = useMergedEventCallbacks(\n state.incrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n state.decrementButton.onMouseDown = useMergedEventCallbacks(\n handleDecrementMouseDown,\n state.decrementButton.onMouseDown,\n );\n state.decrementButton.onMouseUp = useMergedEventCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.decrementButton.onMouseLeave = useMergedEventCallbacks(\n state.decrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -145,8 +145,8 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
145
145
|
}
|
146
146
|
}, {
|
147
147
|
"d": [".fwk3njj{display:inline-grid;}", ".f1sr6ibj{grid-template-columns:1fr 24px;}", ".fio9c21{grid-template-rows:1fr 1fr;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1sff6ri{row-gap:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f10pi13n{position:relative;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1ngn1p8{isolation:isolate;}", ".f1wl9k8s::before{content:\"\";}", ".fyl8oag::before{box-sizing:border-box;}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1f351id::before{right:0;}", ".f1fzr1x6::before{left:0;}", ".fchca7p::before{bottom:0;}", ".f1pl9g23::before{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f3orl67::before{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2gop1n::before{border-top-right-radius:var(--borderRadiusMedium);}", ".f11nyhth::before{border-top-left-radius:var(--borderRadiusMedium);}", ".fxuihnu::before{pointer-events:none;}", ".fzjygzn::before{z-index:10;}", ".f15yvnhg::after{right:0;}", ".f1n6gb5g::after{left:0;}", ".fo72kxq::after{bottom:0;}", ".f5yjgw6::after{z-index:20;}", ".f1fjh9ub::before{border-top-width:1px;}", ".ff9c942::before{border-right-width:1px;}", ".f6rdg5o::before{border-left-width:1px;}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}", ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}", ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}", ".fchs65t::before{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fw32bj::before{border-bottom-right-radius:0;}", ".fziivox::before{border-bottom-left-radius:0;}", ".feccbv4::before{border-top-right-radius:0;}", ".f1jqz70h::before{border-top-left-radius:0;}", ".f7dgwnz::before{border-top-color:var(--colorTransparentStroke);}", ".f1edeodt::before{border-right-color:var(--colorTransparentStroke);}", ".fszsv3f::before{border-left-color:var(--colorTransparentStroke);}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f1a0lfh7::before{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1p2ejm6::before{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fmzytvz::before{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fas2e61::before{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1syzi09::before{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".fd35vam::before{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1n48vvu::before{border-right-color:var(--colorTransparentStrokeDisabled);}", ".f7wchoe::before{border-left-color:var(--colorTransparentStrokeDisabled);}"],
|
148
|
-
"h": [".f1w2y1rc:hover::before{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1gofhvl:hover::before{border-right-color:var(--colorNeutralStroke1Hover);}", ".f18htlvq:hover::before{border-left-color:var(--colorNeutralStroke1Hover);}", ".ffcnd28:hover::before{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1xqt08:hover,.f1xqt08:focus-within::before{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover,.fzt5lgo:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover
|
149
|
-
"a": [".f6lmxco:active,.f6lmxco:focus-within::before{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active,.fcoc0mf:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f15r4wkl:active
|
148
|
+
"h": [".f1w2y1rc:hover::before{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1gofhvl:hover::before{border-right-color:var(--colorNeutralStroke1Hover);}", ".f18htlvq:hover::before{border-left-color:var(--colorNeutralStroke1Hover);}", ".ffcnd28:hover::before{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1xqt08:hover,.f1xqt08:focus-within::before{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover,.fzt5lgo:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover,.f8tv3r9:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fyhrops:hover,.fyhrops:focus-within::before{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
|
149
|
+
"a": [".f6lmxco:active,.f6lmxco:focus-within::before{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active,.fcoc0mf:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f15r4wkl:active,.f15r4wkl:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1ipdth8:active,.f1ipdth8:focus-within::before{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"],
|
150
150
|
"t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]
|
151
151
|
});
|
152
152
|
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,UADF,EAEE,yBAFF,EAGE,oBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP","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
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,UADF,EAEE,yBAFF,EAGE,oBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP","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"],"sourceRoot":"../src/"}
|
@@ -11,8 +11,6 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
11
|
|
12
12
|
const Keys = /*#__PURE__*/require("@fluentui/keyboard-keys");
|
13
13
|
|
14
|
-
const SpinButton_strings_1 = /*#__PURE__*/require("./SpinButton.strings");
|
15
|
-
|
16
14
|
const index_1 = /*#__PURE__*/require("../../utils/index");
|
17
15
|
|
18
16
|
const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
|
@@ -58,8 +56,7 @@ const useSpinButton_unstable = (props, ref) => {
|
|
58
56
|
root,
|
59
57
|
input,
|
60
58
|
incrementButton,
|
61
|
-
decrementButton
|
62
|
-
strings = SpinButton_strings_1.spinButtonDefaultStrings
|
59
|
+
decrementButton
|
63
60
|
} = props;
|
64
61
|
const precision = React.useMemo(() => {
|
65
62
|
return precisionFromProps !== null && precisionFromProps !== void 0 ? precisionFromProps : Math.max(index_1.calculatePrecision(step), 0);
|
@@ -110,7 +107,7 @@ const useSpinButton_unstable = (props, ref) => {
|
|
110
107
|
tabIndex: -1,
|
111
108
|
children: React.createElement(react_icons_1.ChevronUp16Regular, null),
|
112
109
|
disabled: nativeProps.primary.disabled,
|
113
|
-
'aria-label':
|
110
|
+
'aria-label': 'Increment value'
|
114
111
|
}
|
115
112
|
}),
|
116
113
|
decrementButton: react_utilities_1.resolveShorthand(decrementButton, {
|
@@ -119,7 +116,7 @@ const useSpinButton_unstable = (props, ref) => {
|
|
119
116
|
tabIndex: -1,
|
120
117
|
children: React.createElement(react_icons_1.ChevronDown16Regular, null),
|
121
118
|
disabled: nativeProps.primary.disabled,
|
122
|
-
'aria-label':
|
119
|
+
'aria-label': 'Decrement value'
|
123
120
|
}
|
124
121
|
})
|
125
122
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/SpinButton/useSpinButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useMergedEventCallbacks,\n useTimeout,\n} from '@fluentui/react-utilities';\nimport * as Keys from '@fluentui/keyboard-keys';\nimport {\n SpinButtonProps,\n SpinButtonState,\n SpinButtonSpinState,\n SpinButtonChangeEvent,\n SpinButtonBounds,\n} from './SpinButton.types';\nimport { spinButtonDefaultStrings } from './SpinButton.strings';\nimport { calculatePrecision, precisionRound, getBound, clampWhenInRange } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\n\ntype InternalState = {\n value: number;\n spinState: SpinButtonSpinState;\n spinTime: number;\n spinDelay: number;\n previousTextValue?: string;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the state required to render SpinButton.\n *\n * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,\n * before being passed to renderSpinButton_unstable.\n *\n * @param props - props from this instance of SpinButton\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>): SpinButtonState => {\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'size', 'min', 'max'],\n });\n\n const {\n value,\n displayValue,\n defaultValue,\n min,\n max,\n step = 1,\n stepPage = 1,\n precision: precisionFromProps,\n onChange,\n size = 'medium',\n appearance = 'outline',\n root,\n input,\n incrementButton,\n decrementButton,\n strings = spinButtonDefaultStrings,\n } = props;\n\n const precision = React.useMemo(() => {\n return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n }, [precisionFromProps, step]);\n\n const [currentValue, setCurrentValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: 0,\n });\n const [textValue, setTextValue] = React.useState(\n value !== undefined && displayValue !== undefined ? displayValue : String(currentValue),\n );\n const [spinState, setSpinState] = React.useState<SpinButtonSpinState>('rest');\n const [atBound, setAtBound] = React.useState<SpinButtonBounds>('none');\n\n const internalState = React.useRef<InternalState>({\n value: currentValue,\n spinState,\n spinTime: 0,\n spinDelay: DEFAULT_SPIN_DELAY_MS,\n });\n\n const state: SpinButtonState = {\n size,\n appearance,\n spinState,\n atBound,\n\n components: {\n root: 'span',\n input: 'input',\n incrementButton: 'button',\n decrementButton: 'button',\n },\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n ref,\n autoComplete: 'off',\n role: 'spinbutton',\n appearance: appearance,\n type: 'text',\n ...nativeProps.primary,\n },\n }),\n incrementButton: resolveShorthand(incrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronUp16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': strings.incrementButtonLabel.replace('{step}', step.toString()),\n },\n }),\n decrementButton: resolveShorthand(decrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronDown16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': strings.decrementButtonLabel.replace('{step}', step.toString()),\n },\n }),\n };\n\n const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n React.useEffect(() => {\n let newTextValue;\n if (value !== undefined) {\n const roundedValue = precisionRound(value, precision);\n newTextValue = displayValue ?? String(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n } else {\n newTextValue = String(precisionRound(currentValue, precision));\n internalState.current.value = currentValue;\n }\n setTextValue(newTextValue);\n }, [value, displayValue, currentValue, precision, setAtBound, min, max]);\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!internalState.current.previousTextValue) {\n internalState.current.previousTextValue = textValue;\n }\n\n const newValue = e.target.value;\n setTextValue(newValue);\n };\n\n const stepValue = (e: SpinButtonChangeEvent, direction: 'up' | 'down' | 'upPage' | 'downPage') => {\n const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n const val = internalState.current.value;\n\n let newValue = val + stepSize * dir;\n if (!Number.isNaN(newValue)) {\n newValue = clampWhenInRange(val, newValue, min, max);\n }\n\n commit(e, newValue);\n\n if (internalState.current.spinState !== 'rest') {\n setStepTimeout(() => {\n // Ease the step speed a bit\n internalState.current.spinTime += internalState.current.spinDelay;\n internalState.current.spinDelay = lerp(\n DEFAULT_SPIN_DELAY_MS,\n MIN_SPIN_DELAY_MS,\n internalState.current.spinTime / MAX_SPIN_TIME_MS,\n );\n stepValue(e, direction);\n }, internalState.current.spinDelay);\n }\n };\n\n const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'up';\n stepValue(e, 'up');\n };\n\n const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'down';\n stepValue(e, 'down');\n };\n\n const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n clearStepTimeout();\n internalState.current.spinState = 'rest';\n internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n internalState.current.spinTime = 0;\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === Keys.ArrowUp) {\n stepValue(e, 'up');\n setSpinState('up');\n } else if (e.key === Keys.ArrowDown) {\n stepValue(e, 'down');\n setSpinState('down');\n } else if (e.key === Keys.PageUp) {\n e.preventDefault();\n stepValue(e, 'upPage');\n setSpinState('up');\n } else if (e.key === Keys.PageDown) {\n e.preventDefault();\n stepValue(e, 'downPage');\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {\n commit(e, min);\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {\n commit(e, max);\n setSpinState('up');\n } else if (e.key === Keys.Enter) {\n commit(e, currentValue, textValue);\n setSpinState('rest');\n } else if (e.key === Keys.Escape) {\n if (internalState.current.previousTextValue) {\n setTextValue(internalState.current.previousTextValue);\n internalState.current.previousTextValue = undefined;\n }\n setSpinState('rest');\n } else {\n setSpinState('rest');\n }\n };\n\n const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n setSpinState('rest');\n };\n\n const commit = (e: SpinButtonChangeEvent, newValue?: number, newDisplayValue?: string) => {\n const valueChanged = newValue !== undefined && currentValue !== newValue;\n const displayValueChanged =\n newDisplayValue !== undefined &&\n internalState.current.previousTextValue !== undefined &&\n internalState.current.previousTextValue !== newDisplayValue;\n\n let roundedValue;\n if (valueChanged) {\n roundedValue = precisionRound(newValue!, precision);\n setCurrentValue(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n }\n\n if (valueChanged || displayValueChanged) {\n onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n }\n };\n\n state.input.value = textValue;\n state.input['aria-valuemin'] = min;\n state.input['aria-valuemax'] = max;\n state.input['aria-valuenow'] = currentValue;\n state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n state.input.onChange = useMergedEventCallbacks(state.input.onChange, handleInputChange);\n state.input.onBlur = useMergedEventCallbacks(state.input.onBlur, handleBlur);\n state.input.onKeyDown = useMergedEventCallbacks(state.input.onKeyDown, handleKeyDown);\n state.input.onKeyUp = useMergedEventCallbacks(state.input.onKeyUp, handleKeyUp);\n\n state.incrementButton.onMouseDown = useMergedEventCallbacks(\n handleIncrementMouseDown,\n state.incrementButton.onMouseDown,\n );\n state.incrementButton.onMouseUp = useMergedEventCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.incrementButton.onMouseLeave = useMergedEventCallbacks(\n state.incrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n state.decrementButton.onMouseDown = useMergedEventCallbacks(\n handleDecrementMouseDown,\n state.decrementButton.onMouseDown,\n );\n state.decrementButton.onMouseUp = useMergedEventCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.decrementButton.onMouseLeave = useMergedEventCallbacks(\n state.decrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["components/SpinButton/useSpinButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useMergedEventCallbacks,\n useTimeout,\n} from '@fluentui/react-utilities';\nimport * as Keys from '@fluentui/keyboard-keys';\nimport {\n SpinButtonProps,\n SpinButtonState,\n SpinButtonSpinState,\n SpinButtonChangeEvent,\n SpinButtonBounds,\n} from './SpinButton.types';\nimport { calculatePrecision, precisionRound, getBound, clampWhenInRange } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\n\ntype InternalState = {\n value: number;\n spinState: SpinButtonSpinState;\n spinTime: number;\n spinDelay: number;\n previousTextValue?: string;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the state required to render SpinButton.\n *\n * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,\n * before being passed to renderSpinButton_unstable.\n *\n * @param props - props from this instance of SpinButton\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>): SpinButtonState => {\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'size', 'min', 'max'],\n });\n\n const {\n value,\n displayValue,\n defaultValue,\n min,\n max,\n step = 1,\n stepPage = 1,\n precision: precisionFromProps,\n onChange,\n size = 'medium',\n appearance = 'outline',\n root,\n input,\n incrementButton,\n decrementButton,\n } = props;\n\n const precision = React.useMemo(() => {\n return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n }, [precisionFromProps, step]);\n\n const [currentValue, setCurrentValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: 0,\n });\n const [textValue, setTextValue] = React.useState(\n value !== undefined && displayValue !== undefined ? displayValue : String(currentValue),\n );\n const [spinState, setSpinState] = React.useState<SpinButtonSpinState>('rest');\n const [atBound, setAtBound] = React.useState<SpinButtonBounds>('none');\n\n const internalState = React.useRef<InternalState>({\n value: currentValue,\n spinState,\n spinTime: 0,\n spinDelay: DEFAULT_SPIN_DELAY_MS,\n });\n\n const state: SpinButtonState = {\n size,\n appearance,\n spinState,\n atBound,\n\n components: {\n root: 'span',\n input: 'input',\n incrementButton: 'button',\n decrementButton: 'button',\n },\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n ref,\n autoComplete: 'off',\n role: 'spinbutton',\n appearance: appearance,\n type: 'text',\n ...nativeProps.primary,\n },\n }),\n incrementButton: resolveShorthand(incrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronUp16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Increment value',\n },\n }),\n decrementButton: resolveShorthand(decrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronDown16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Decrement value',\n },\n }),\n };\n\n const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n React.useEffect(() => {\n let newTextValue;\n if (value !== undefined) {\n const roundedValue = precisionRound(value, precision);\n newTextValue = displayValue ?? String(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n } else {\n newTextValue = String(precisionRound(currentValue, precision));\n internalState.current.value = currentValue;\n }\n setTextValue(newTextValue);\n }, [value, displayValue, currentValue, precision, setAtBound, min, max]);\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!internalState.current.previousTextValue) {\n internalState.current.previousTextValue = textValue;\n }\n\n const newValue = e.target.value;\n setTextValue(newValue);\n };\n\n const stepValue = (e: SpinButtonChangeEvent, direction: 'up' | 'down' | 'upPage' | 'downPage') => {\n const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n const val = internalState.current.value;\n\n let newValue = val + stepSize * dir;\n if (!Number.isNaN(newValue)) {\n newValue = clampWhenInRange(val, newValue, min, max);\n }\n\n commit(e, newValue);\n\n if (internalState.current.spinState !== 'rest') {\n setStepTimeout(() => {\n // Ease the step speed a bit\n internalState.current.spinTime += internalState.current.spinDelay;\n internalState.current.spinDelay = lerp(\n DEFAULT_SPIN_DELAY_MS,\n MIN_SPIN_DELAY_MS,\n internalState.current.spinTime / MAX_SPIN_TIME_MS,\n );\n stepValue(e, direction);\n }, internalState.current.spinDelay);\n }\n };\n\n const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'up';\n stepValue(e, 'up');\n };\n\n const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'down';\n stepValue(e, 'down');\n };\n\n const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n clearStepTimeout();\n internalState.current.spinState = 'rest';\n internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n internalState.current.spinTime = 0;\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === Keys.ArrowUp) {\n stepValue(e, 'up');\n setSpinState('up');\n } else if (e.key === Keys.ArrowDown) {\n stepValue(e, 'down');\n setSpinState('down');\n } else if (e.key === Keys.PageUp) {\n e.preventDefault();\n stepValue(e, 'upPage');\n setSpinState('up');\n } else if (e.key === Keys.PageDown) {\n e.preventDefault();\n stepValue(e, 'downPage');\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {\n commit(e, min);\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {\n commit(e, max);\n setSpinState('up');\n } else if (e.key === Keys.Enter) {\n commit(e, currentValue, textValue);\n setSpinState('rest');\n } else if (e.key === Keys.Escape) {\n if (internalState.current.previousTextValue) {\n setTextValue(internalState.current.previousTextValue);\n internalState.current.previousTextValue = undefined;\n }\n setSpinState('rest');\n } else {\n setSpinState('rest');\n }\n };\n\n const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n setSpinState('rest');\n };\n\n const commit = (e: SpinButtonChangeEvent, newValue?: number, newDisplayValue?: string) => {\n const valueChanged = newValue !== undefined && currentValue !== newValue;\n const displayValueChanged =\n newDisplayValue !== undefined &&\n internalState.current.previousTextValue !== undefined &&\n internalState.current.previousTextValue !== newDisplayValue;\n\n let roundedValue;\n if (valueChanged) {\n roundedValue = precisionRound(newValue!, precision);\n setCurrentValue(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n }\n\n if (valueChanged || displayValueChanged) {\n onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n }\n };\n\n state.input.value = textValue;\n state.input['aria-valuemin'] = min;\n state.input['aria-valuemax'] = max;\n state.input['aria-valuenow'] = currentValue;\n state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n state.input.onChange = useMergedEventCallbacks(state.input.onChange, handleInputChange);\n state.input.onBlur = useMergedEventCallbacks(state.input.onBlur, handleBlur);\n state.input.onKeyDown = useMergedEventCallbacks(state.input.onKeyDown, handleKeyDown);\n state.input.onKeyUp = useMergedEventCallbacks(state.input.onKeyUp, handleKeyUp);\n\n state.incrementButton.onMouseDown = useMergedEventCallbacks(\n handleIncrementMouseDown,\n state.incrementButton.onMouseDown,\n );\n state.incrementButton.onMouseUp = useMergedEventCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.incrementButton.onMouseLeave = useMergedEventCallbacks(\n state.incrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n state.decrementButton.onMouseDown = useMergedEventCallbacks(\n handleDecrementMouseDown,\n state.decrementButton.onMouseDown,\n );\n state.decrementButton.onMouseUp = useMergedEventCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.decrementButton.onMouseLeave = useMergedEventCallbacks(\n state.decrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -155,8 +155,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
155
155
|
}
|
156
156
|
}, {
|
157
157
|
"d": [".fwk3njj{display:inline-grid;}", ".f1sr6ibj{grid-template-columns:1fr 24px;}", ".fio9c21{grid-template-rows:1fr 1fr;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1sff6ri{row-gap:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f10pi13n{position:relative;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1ngn1p8{isolation:isolate;}", ".f1wl9k8s::before{content:\"\";}", ".fyl8oag::before{box-sizing:border-box;}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1f351id::before{right:0;}", ".f1fzr1x6::before{left:0;}", ".fchca7p::before{bottom:0;}", ".f1pl9g23::before{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f3orl67::before{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2gop1n::before{border-top-right-radius:var(--borderRadiusMedium);}", ".f11nyhth::before{border-top-left-radius:var(--borderRadiusMedium);}", ".fxuihnu::before{pointer-events:none;}", ".fzjygzn::before{z-index:10;}", ".f15yvnhg::after{right:0;}", ".f1n6gb5g::after{left:0;}", ".fo72kxq::after{bottom:0;}", ".f5yjgw6::after{z-index:20;}", ".f1fjh9ub::before{border-top-width:1px;}", ".ff9c942::before{border-right-width:1px;}", ".f6rdg5o::before{border-left-width:1px;}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}", ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}", ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}", ".fchs65t::before{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fw32bj::before{border-bottom-right-radius:0;}", ".fziivox::before{border-bottom-left-radius:0;}", ".feccbv4::before{border-top-right-radius:0;}", ".f1jqz70h::before{border-top-left-radius:0;}", ".f7dgwnz::before{border-top-color:var(--colorTransparentStroke);}", ".f1edeodt::before{border-right-color:var(--colorTransparentStroke);}", ".fszsv3f::before{border-left-color:var(--colorTransparentStroke);}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f1a0lfh7::before{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1p2ejm6::before{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fmzytvz::before{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fas2e61::before{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1syzi09::before{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".fd35vam::before{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1n48vvu::before{border-right-color:var(--colorTransparentStrokeDisabled);}", ".f7wchoe::before{border-left-color:var(--colorTransparentStrokeDisabled);}"],
|
158
|
-
"h": [".f1w2y1rc:hover::before{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1gofhvl:hover::before{border-right-color:var(--colorNeutralStroke1Hover);}", ".f18htlvq:hover::before{border-left-color:var(--colorNeutralStroke1Hover);}", ".ffcnd28:hover::before{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1xqt08:hover,.f1xqt08:focus-within::before{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover,.fzt5lgo:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover
|
159
|
-
"a": [".f6lmxco:active,.f6lmxco:focus-within::before{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active,.fcoc0mf:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f15r4wkl:active
|
158
|
+
"h": [".f1w2y1rc:hover::before{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1gofhvl:hover::before{border-right-color:var(--colorNeutralStroke1Hover);}", ".f18htlvq:hover::before{border-left-color:var(--colorNeutralStroke1Hover);}", ".ffcnd28:hover::before{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1xqt08:hover,.f1xqt08:focus-within::before{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover,.fzt5lgo:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover,.f8tv3r9:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fyhrops:hover,.fyhrops:focus-within::before{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
|
159
|
+
"a": [".f6lmxco:active,.f6lmxco:focus-within::before{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active,.fcoc0mf:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f15r4wkl:active,.f15r4wkl:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1ipdth8:active,.f1ipdth8:focus-within::before{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"],
|
160
160
|
"t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]
|
161
161
|
});
|
162
162
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,UAAA;AAAU;AAAV,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,yBAAA;AAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,4BAAA;AAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,sBAAA;AAAsB;AAAtB,CAAA","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
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,UAAA;AAAU;AAAV,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,yBAAA;AAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,4BAAA;AAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,sBAAA;AAAsB;AAAtB,CAAA","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"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-spinbutton",
|
3
|
-
"version": "0.0.0-nightly-
|
3
|
+
"version": "0.0.0-nightly-20220517-0418.1",
|
4
4
|
"description": "Fluent UI React SpinButton component.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
7
|
-
"typings": "
|
7
|
+
"typings": "dist/index.d.ts",
|
8
8
|
"sideEffects": false,
|
9
9
|
"repository": {
|
10
10
|
"type": "git",
|
@@ -28,17 +28,17 @@
|
|
28
28
|
"devDependencies": {
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
30
30
|
"@fluentui/react-conformance": "*",
|
31
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
32
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20220517-0418.1",
|
32
|
+
"@fluentui/react-label": "0.0.0-nightly-20220517-0418.1",
|
33
33
|
"@fluentui/scripts": "^1.0.0"
|
34
34
|
},
|
35
35
|
"dependencies": {
|
36
|
-
"@griffel/react": "1.0.
|
37
|
-
"@fluentui/keyboard-keys": "0.0.0-nightly-
|
36
|
+
"@griffel/react": "1.0.4",
|
37
|
+
"@fluentui/keyboard-keys": "0.0.0-nightly-20220517-0418.0",
|
38
38
|
"@fluentui/react-icons": "^2.0.166-rc.3",
|
39
|
-
"@fluentui/react-input": "0.0.0-nightly-
|
40
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
41
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
39
|
+
"@fluentui/react-input": "0.0.0-nightly-20220517-0418.1",
|
40
|
+
"@fluentui/react-theme": "0.0.0-nightly-20220517-0418.1",
|
41
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20220517-0418.1",
|
42
42
|
"tslib": "^2.1.0"
|
43
43
|
},
|
44
44
|
"peerDependencies": {
|
package/lib/SpinButton.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/SpinButton/index';
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { SpinButtonProps } from './SpinButton.types';
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* A SpinButton allows someone to incrementally adjust a value in small steps.
|
5
|
-
*/
|
6
|
-
export declare const SpinButton: ForwardRefComponent<SpinButtonProps>;
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["components/SpinButton/SpinButton.strings.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,wBAAwB,GAAsB;AACzD,EAAA,oBAAoB,EAAE,qBADmC;AAEzD,EAAA,oBAAoB,EAAE;AAFmC,CAApD","sourcesContent":["import type { SpinButtonStrings } from './SpinButton.types';\n\nexport const spinButtonDefaultStrings: SpinButtonStrings = {\n incrementButtonLabel: 'Increment by {step}',\n decrementButtonLabel: 'Decrement by {step}',\n};\n"],"sourceRoot":"../src/"}
|
@@ -1,140 +0,0 @@
|
|
1
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
2
|
-
import * as React from 'react';
|
3
|
-
export declare type SpinButtonSlots = {
|
4
|
-
/**
|
5
|
-
* The root element of SpinButton is a container `<div>`.
|
6
|
-
* The root slot receives the `className` and `style` specified on the `<SpinButton>`.
|
7
|
-
* All other native props are applied to the primary slot: `input`.
|
8
|
-
*/
|
9
|
-
root: NonNullable<Slot<'span'>>;
|
10
|
-
/**
|
11
|
-
* Input that displays the current value and accepts direct input from the user.
|
12
|
-
* Displayed value is formatted.
|
13
|
-
*
|
14
|
-
* This is the primary slot.
|
15
|
-
*/
|
16
|
-
input: NonNullable<Slot<'input'>>;
|
17
|
-
/**
|
18
|
-
* Renders the increment control.
|
19
|
-
*/
|
20
|
-
incrementButton: NonNullable<Slot<'button'>>;
|
21
|
-
/**
|
22
|
-
* Renders the decrement control.
|
23
|
-
*/
|
24
|
-
decrementButton: NonNullable<Slot<'button'>>;
|
25
|
-
};
|
26
|
-
/**
|
27
|
-
* SpinButton Props
|
28
|
-
*/
|
29
|
-
export declare type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlots>, 'input'>, 'onChange' | 'size'> & {
|
30
|
-
/**
|
31
|
-
* Controls the colors and borders of the input.
|
32
|
-
* @default 'outline'
|
33
|
-
*/
|
34
|
-
appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
|
35
|
-
/**
|
36
|
-
* Initial value of the control (assumed to be valid). Updates to this prop will not be respected.
|
37
|
-
*
|
38
|
-
* Use this if you intend for the SpinButton to be an uncontrolled component which maintains its
|
39
|
-
* own value. For a controlled component, use `value` instead. (Mutually exclusive with `value`.)
|
40
|
-
*/
|
41
|
-
defaultValue?: number;
|
42
|
-
/**
|
43
|
-
* String representation of `value`.
|
44
|
-
*
|
45
|
-
* Use this when displaying the value to users as something other than a plain number.
|
46
|
-
* For example, when displaying currency values this might be "$1.00" when value is `1`.
|
47
|
-
*
|
48
|
-
* Only provide this if the SpinButton is a controlled component where you are maintaining its
|
49
|
-
* current state and passing updates based on change events. When SpinButton is used as an
|
50
|
-
* uncontrolled component this prop is ignored.
|
51
|
-
*/
|
52
|
-
displayValue?: string;
|
53
|
-
/**
|
54
|
-
* Max value of the control. If not provided, the control has no maximum value.
|
55
|
-
*/
|
56
|
-
max?: number;
|
57
|
-
/**
|
58
|
-
* Min value of the control. If not provided, the control has no minimum value.
|
59
|
-
*/
|
60
|
-
min?: number;
|
61
|
-
/**
|
62
|
-
* Callback for when the committed value changes.
|
63
|
-
* - User presses the up/down buttons (on single press or every spin)
|
64
|
-
* - User presses the up/down arrow keys (on single press or every spin)
|
65
|
-
* - User *commits* edits to the input text by focusing away (blurring) or pressing enter.
|
66
|
-
* Note that this is NOT called for every key press while the user is editing.
|
67
|
-
*/
|
68
|
-
onChange?: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;
|
69
|
-
/**
|
70
|
-
* How many decimal places the value should be rounded to.
|
71
|
-
*
|
72
|
-
* The default is calculated based on the precision of `step`: i.e. if step = 1, precision = 0.
|
73
|
-
* step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.
|
74
|
-
*/
|
75
|
-
precision?: number;
|
76
|
-
/**
|
77
|
-
* Size of the input.
|
78
|
-
* @default 'medium'
|
79
|
-
*/
|
80
|
-
size?: 'small' | 'medium';
|
81
|
-
/**
|
82
|
-
* Difference between two adjacent values of the control.
|
83
|
-
* This value is used to calculate the precision of the input if no `precision` is given.
|
84
|
-
* The precision calculated this way will always be greater than or equal 0.
|
85
|
-
* @default 1
|
86
|
-
*/
|
87
|
-
step?: number;
|
88
|
-
/**
|
89
|
-
* Large difference between two values. This should be greater than `step` and is used
|
90
|
-
* when users hit the Page Up or Page Down keys.
|
91
|
-
* @default 1
|
92
|
-
*/
|
93
|
-
stepPage?: number;
|
94
|
-
/**
|
95
|
-
* Strings for localizing text in the control.
|
96
|
-
*/
|
97
|
-
strings?: SpinButtonStrings;
|
98
|
-
/**
|
99
|
-
* Current value of the control (assumed to be valid).
|
100
|
-
*
|
101
|
-
* Only provide this if the SpinButton is a controlled component where you are maintaining its
|
102
|
-
* current state and passing updates based on change events; otherwise, use the `defaultValue`
|
103
|
-
* property. (Mutually exclusive with `defaultValue`.)
|
104
|
-
*/
|
105
|
-
value?: number;
|
106
|
-
};
|
107
|
-
/**
|
108
|
-
* State used in rendering SpinButton
|
109
|
-
*/
|
110
|
-
export declare type SpinButtonState = ComponentState<SpinButtonSlots> & Required<Pick<SpinButtonProps, 'appearance' | 'size'>> & {
|
111
|
-
/**
|
112
|
-
* State used to track which direction, if any, SpinButton is currently spinning.
|
113
|
-
* @default 'rest'
|
114
|
-
*/
|
115
|
-
spinState: SpinButtonSpinState;
|
116
|
-
/**
|
117
|
-
* State used to track if the value is at the range bounds of [min-max].
|
118
|
-
* @default 'none'
|
119
|
-
*/
|
120
|
-
atBound: SpinButtonBounds;
|
121
|
-
};
|
122
|
-
export declare type SpinButtonChangeEvent = React.MouseEvent<HTMLButtonElement> | React.ChangeEvent<HTMLElement> | React.FocusEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>;
|
123
|
-
export declare type SpinButtonOnChangeData = {
|
124
|
-
value?: number;
|
125
|
-
displayValue?: string;
|
126
|
-
};
|
127
|
-
export declare type SpinButtonSpinState = 'rest' | 'up' | 'down';
|
128
|
-
export declare type SpinButtonBounds = 'none' | 'min' | 'max' | 'both';
|
129
|
-
export declare type SpinButtonStrings = {
|
130
|
-
/**
|
131
|
-
* Label applied to the increment button.
|
132
|
-
* Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
|
133
|
-
*/
|
134
|
-
incrementButtonLabel: string;
|
135
|
-
/**
|
136
|
-
* Label applied to the decrement button.
|
137
|
-
* Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
|
138
|
-
*/
|
139
|
-
decrementButtonLabel: string;
|
140
|
-
};
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { SpinButtonProps, SpinButtonState } from './SpinButton.types';
|
3
|
-
/**
|
4
|
-
* Create the state required to render SpinButton.
|
5
|
-
*
|
6
|
-
* The returned state can be modified with hooks such as useSpinButtonStyles_unstable,
|
7
|
-
* before being passed to renderSpinButton_unstable.
|
8
|
-
*
|
9
|
-
* @param props - props from this instance of SpinButton
|
10
|
-
* @param ref - reference to root HTMLElement of SpinButton
|
11
|
-
*/
|
12
|
-
export declare const useSpinButton_unstable: (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>) => SpinButtonState;
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import { SlotClassNames } from '@fluentui/react-utilities';
|
2
|
-
import type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';
|
3
|
-
export declare const spinButtonClassNames: SlotClassNames<SpinButtonSlots>;
|
4
|
-
/**
|
5
|
-
* Apply styling to the SpinButton slots based on the state
|
6
|
-
*/
|
7
|
-
export declare const useSpinButtonStyles_unstable: (state: SpinButtonState) => SpinButtonState;
|
package/lib/index.d.ts
DELETED
@@ -1,2 +0,0 @@
|
|
1
|
-
export { SpinButton, renderSpinButton_unstable, spinButtonClassNames, useSpinButtonStyles_unstable, useSpinButton_unstable, } from './SpinButton';
|
2
|
-
export type { SpinButtonOnChangeData, SpinButtonChangeEvent, SpinButtonProps, SpinButtonSlots, SpinButtonState, SpinButtonSpinState, SpinButtonBounds, SpinButtonStrings, } from './SpinButton';
|
package/lib/utils/clamp.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export declare const clampWhenInRange: (oldValue: number, newValue: number, min?: number | undefined, max?: number | undefined) => number;
|
package/lib/utils/getBound.d.ts
DELETED
package/lib/utils/index.d.ts
DELETED
package/lib/utils/precision.d.ts
DELETED
@@ -1,14 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Calculates a number's precision based on the number of trailing
|
3
|
-
* zeros if the number does not have a decimal indicated by a negative
|
4
|
-
* precision. Otherwise, it calculates the number of digits after
|
5
|
-
* the decimal point indicated by a positive precision.
|
6
|
-
* @param value - the value to determine the precision of
|
7
|
-
*/
|
8
|
-
export declare function calculatePrecision(value: number | string): number;
|
9
|
-
/**
|
10
|
-
* Rounds a number to a certain level of precision. Accepts negative precision.
|
11
|
-
* @param value - The value that is being rounded.
|
12
|
-
* @param precision - The number of decimal places to round the number to
|
13
|
-
*/
|
14
|
-
export declare function precisionRound(value: number, precision: number, base?: number): number;
|
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/SpinButton/index';
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { SpinButtonProps } from './SpinButton.types';
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* A SpinButton allows someone to incrementally adjust a value in small steps.
|
5
|
-
*/
|
6
|
-
export declare const SpinButton: ForwardRefComponent<SpinButtonProps>;
|
@@ -1,11 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.spinButtonDefaultStrings = void 0;
|
7
|
-
exports.spinButtonDefaultStrings = {
|
8
|
-
incrementButtonLabel: 'Increment by {step}',
|
9
|
-
decrementButtonLabel: 'Decrement by {step}'
|
10
|
-
};
|
11
|
-
//# sourceMappingURL=SpinButton.strings.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["components/SpinButton/SpinButton.strings.ts"],"names":[],"mappings":";;;;;;AAEa,OAAA,CAAA,wBAAA,GAA8C;AACzD,EAAA,oBAAoB,EAAE,qBADmC;AAEzD,EAAA,oBAAoB,EAAE;AAFmC,CAA9C","sourcesContent":["import type { SpinButtonStrings } from './SpinButton.types';\n\nexport const spinButtonDefaultStrings: SpinButtonStrings = {\n incrementButtonLabel: 'Increment by {step}',\n decrementButtonLabel: 'Decrement by {step}',\n};\n"],"sourceRoot":"../src/"}
|
@@ -1,140 +0,0 @@
|
|
1
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
2
|
-
import * as React from 'react';
|
3
|
-
export declare type SpinButtonSlots = {
|
4
|
-
/**
|
5
|
-
* The root element of SpinButton is a container `<div>`.
|
6
|
-
* The root slot receives the `className` and `style` specified on the `<SpinButton>`.
|
7
|
-
* All other native props are applied to the primary slot: `input`.
|
8
|
-
*/
|
9
|
-
root: NonNullable<Slot<'span'>>;
|
10
|
-
/**
|
11
|
-
* Input that displays the current value and accepts direct input from the user.
|
12
|
-
* Displayed value is formatted.
|
13
|
-
*
|
14
|
-
* This is the primary slot.
|
15
|
-
*/
|
16
|
-
input: NonNullable<Slot<'input'>>;
|
17
|
-
/**
|
18
|
-
* Renders the increment control.
|
19
|
-
*/
|
20
|
-
incrementButton: NonNullable<Slot<'button'>>;
|
21
|
-
/**
|
22
|
-
* Renders the decrement control.
|
23
|
-
*/
|
24
|
-
decrementButton: NonNullable<Slot<'button'>>;
|
25
|
-
};
|
26
|
-
/**
|
27
|
-
* SpinButton Props
|
28
|
-
*/
|
29
|
-
export declare type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlots>, 'input'>, 'onChange' | 'size'> & {
|
30
|
-
/**
|
31
|
-
* Controls the colors and borders of the input.
|
32
|
-
* @default 'outline'
|
33
|
-
*/
|
34
|
-
appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
|
35
|
-
/**
|
36
|
-
* Initial value of the control (assumed to be valid). Updates to this prop will not be respected.
|
37
|
-
*
|
38
|
-
* Use this if you intend for the SpinButton to be an uncontrolled component which maintains its
|
39
|
-
* own value. For a controlled component, use `value` instead. (Mutually exclusive with `value`.)
|
40
|
-
*/
|
41
|
-
defaultValue?: number;
|
42
|
-
/**
|
43
|
-
* String representation of `value`.
|
44
|
-
*
|
45
|
-
* Use this when displaying the value to users as something other than a plain number.
|
46
|
-
* For example, when displaying currency values this might be "$1.00" when value is `1`.
|
47
|
-
*
|
48
|
-
* Only provide this if the SpinButton is a controlled component where you are maintaining its
|
49
|
-
* current state and passing updates based on change events. When SpinButton is used as an
|
50
|
-
* uncontrolled component this prop is ignored.
|
51
|
-
*/
|
52
|
-
displayValue?: string;
|
53
|
-
/**
|
54
|
-
* Max value of the control. If not provided, the control has no maximum value.
|
55
|
-
*/
|
56
|
-
max?: number;
|
57
|
-
/**
|
58
|
-
* Min value of the control. If not provided, the control has no minimum value.
|
59
|
-
*/
|
60
|
-
min?: number;
|
61
|
-
/**
|
62
|
-
* Callback for when the committed value changes.
|
63
|
-
* - User presses the up/down buttons (on single press or every spin)
|
64
|
-
* - User presses the up/down arrow keys (on single press or every spin)
|
65
|
-
* - User *commits* edits to the input text by focusing away (blurring) or pressing enter.
|
66
|
-
* Note that this is NOT called for every key press while the user is editing.
|
67
|
-
*/
|
68
|
-
onChange?: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;
|
69
|
-
/**
|
70
|
-
* How many decimal places the value should be rounded to.
|
71
|
-
*
|
72
|
-
* The default is calculated based on the precision of `step`: i.e. if step = 1, precision = 0.
|
73
|
-
* step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.
|
74
|
-
*/
|
75
|
-
precision?: number;
|
76
|
-
/**
|
77
|
-
* Size of the input.
|
78
|
-
* @default 'medium'
|
79
|
-
*/
|
80
|
-
size?: 'small' | 'medium';
|
81
|
-
/**
|
82
|
-
* Difference between two adjacent values of the control.
|
83
|
-
* This value is used to calculate the precision of the input if no `precision` is given.
|
84
|
-
* The precision calculated this way will always be greater than or equal 0.
|
85
|
-
* @default 1
|
86
|
-
*/
|
87
|
-
step?: number;
|
88
|
-
/**
|
89
|
-
* Large difference between two values. This should be greater than `step` and is used
|
90
|
-
* when users hit the Page Up or Page Down keys.
|
91
|
-
* @default 1
|
92
|
-
*/
|
93
|
-
stepPage?: number;
|
94
|
-
/**
|
95
|
-
* Strings for localizing text in the control.
|
96
|
-
*/
|
97
|
-
strings?: SpinButtonStrings;
|
98
|
-
/**
|
99
|
-
* Current value of the control (assumed to be valid).
|
100
|
-
*
|
101
|
-
* Only provide this if the SpinButton is a controlled component where you are maintaining its
|
102
|
-
* current state and passing updates based on change events; otherwise, use the `defaultValue`
|
103
|
-
* property. (Mutually exclusive with `defaultValue`.)
|
104
|
-
*/
|
105
|
-
value?: number;
|
106
|
-
};
|
107
|
-
/**
|
108
|
-
* State used in rendering SpinButton
|
109
|
-
*/
|
110
|
-
export declare type SpinButtonState = ComponentState<SpinButtonSlots> & Required<Pick<SpinButtonProps, 'appearance' | 'size'>> & {
|
111
|
-
/**
|
112
|
-
* State used to track which direction, if any, SpinButton is currently spinning.
|
113
|
-
* @default 'rest'
|
114
|
-
*/
|
115
|
-
spinState: SpinButtonSpinState;
|
116
|
-
/**
|
117
|
-
* State used to track if the value is at the range bounds of [min-max].
|
118
|
-
* @default 'none'
|
119
|
-
*/
|
120
|
-
atBound: SpinButtonBounds;
|
121
|
-
};
|
122
|
-
export declare type SpinButtonChangeEvent = React.MouseEvent<HTMLButtonElement> | React.ChangeEvent<HTMLElement> | React.FocusEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>;
|
123
|
-
export declare type SpinButtonOnChangeData = {
|
124
|
-
value?: number;
|
125
|
-
displayValue?: string;
|
126
|
-
};
|
127
|
-
export declare type SpinButtonSpinState = 'rest' | 'up' | 'down';
|
128
|
-
export declare type SpinButtonBounds = 'none' | 'min' | 'max' | 'both';
|
129
|
-
export declare type SpinButtonStrings = {
|
130
|
-
/**
|
131
|
-
* Label applied to the increment button.
|
132
|
-
* Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
|
133
|
-
*/
|
134
|
-
incrementButtonLabel: string;
|
135
|
-
/**
|
136
|
-
* Label applied to the decrement button.
|
137
|
-
* Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
|
138
|
-
*/
|
139
|
-
decrementButtonLabel: string;
|
140
|
-
};
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { SpinButtonProps, SpinButtonState } from './SpinButton.types';
|
3
|
-
/**
|
4
|
-
* Create the state required to render SpinButton.
|
5
|
-
*
|
6
|
-
* The returned state can be modified with hooks such as useSpinButtonStyles_unstable,
|
7
|
-
* before being passed to renderSpinButton_unstable.
|
8
|
-
*
|
9
|
-
* @param props - props from this instance of SpinButton
|
10
|
-
* @param ref - reference to root HTMLElement of SpinButton
|
11
|
-
*/
|
12
|
-
export declare const useSpinButton_unstable: (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>) => SpinButtonState;
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import { SlotClassNames } from '@fluentui/react-utilities';
|
2
|
-
import type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';
|
3
|
-
export declare const spinButtonClassNames: SlotClassNames<SpinButtonSlots>;
|
4
|
-
/**
|
5
|
-
* Apply styling to the SpinButton slots based on the state
|
6
|
-
*/
|
7
|
-
export declare const useSpinButtonStyles_unstable: (state: SpinButtonState) => SpinButtonState;
|
package/lib-commonjs/index.d.ts
DELETED
@@ -1,2 +0,0 @@
|
|
1
|
-
export { SpinButton, renderSpinButton_unstable, spinButtonClassNames, useSpinButtonStyles_unstable, useSpinButton_unstable, } from './SpinButton';
|
2
|
-
export type { SpinButtonOnChangeData, SpinButtonChangeEvent, SpinButtonProps, SpinButtonSlots, SpinButtonState, SpinButtonSpinState, SpinButtonBounds, SpinButtonStrings, } from './SpinButton';
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const clampWhenInRange: (oldValue: number, newValue: number, min?: number | undefined, max?: number | undefined) => number;
|
@@ -1,14 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Calculates a number's precision based on the number of trailing
|
3
|
-
* zeros if the number does not have a decimal indicated by a negative
|
4
|
-
* precision. Otherwise, it calculates the number of digits after
|
5
|
-
* the decimal point indicated by a positive precision.
|
6
|
-
* @param value - the value to determine the precision of
|
7
|
-
*/
|
8
|
-
export declare function calculatePrecision(value: number | string): number;
|
9
|
-
/**
|
10
|
-
* Rounds a number to a certain level of precision. Accepts negative precision.
|
11
|
-
* @param value - The value that is being rounded.
|
12
|
-
* @param precision - The number of decimal places to round the number to
|
13
|
-
*/
|
14
|
-
export declare function precisionRound(value: number, precision: number, base?: number): number;
|