@fluentui/react-spinbutton 0.0.0-nightly-20220627-0421.1 → 0.0.0-nightly-20220704-0419.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.json +136 -13
  2. package/CHANGELOG.md +49 -9
  3. package/lib/components/SpinButton/useSpinButton.js +120 -98
  4. package/lib/components/SpinButton/useSpinButton.js.map +1 -1
  5. package/lib/components/SpinButton/useSpinButtonStyles.js +3 -2
  6. package/lib/components/SpinButton/useSpinButtonStyles.js.map +1 -1
  7. package/lib-commonjs/components/SpinButton/useSpinButton.js +120 -98
  8. package/lib-commonjs/components/SpinButton/useSpinButton.js.map +1 -1
  9. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js +3 -2
  10. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js.map +1 -1
  11. package/package.json +8 -8
package/CHANGELOG.json CHANGED
@@ -2,9 +2,93 @@
2
2
  "name": "@fluentui/react-spinbutton",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 27 Jun 2022 04:33:03 GMT",
6
- "tag": "@fluentui/react-spinbutton_v0.0.0-nightly-20220627-0421.1",
7
- "version": "0.0.0-nightly-20220627-0421.1",
5
+ "date": "Mon, 04 Jul 2022 04:31:25 GMT",
6
+ "tag": "@fluentui/react-spinbutton_v0.0.0-nightly-20220704-0419.1",
7
+ "version": "0.0.0-nightly-20220704-0419.1",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "email not defined",
12
+ "package": "@fluentui/react-spinbutton",
13
+ "commit": "not available",
14
+ "comment": "Release nightly v9"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-spinbutton",
19
+ "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220704-0419.1",
20
+ "commit": "2027db0e86db3d94fe6f7c7c55734098c014dfbf"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-spinbutton",
25
+ "comment": "Bump @fluentui/react-input to v0.0.0-nightly-20220704-0419.1",
26
+ "commit": "2027db0e86db3d94fe6f7c7c55734098c014dfbf"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-spinbutton",
31
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220704-0419.1",
32
+ "commit": "2027db0e86db3d94fe6f7c7c55734098c014dfbf"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-spinbutton",
37
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220704-0419.1",
38
+ "commit": "2027db0e86db3d94fe6f7c7c55734098c014dfbf"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-spinbutton",
43
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220704-0419.1",
44
+ "commit": "2027db0e86db3d94fe6f7c7c55734098c014dfbf"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-spinbutton",
49
+ "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220704-0419.1",
50
+ "commit": "2027db0e86db3d94fe6f7c7c55734098c014dfbf"
51
+ }
52
+ ]
53
+ }
54
+ },
55
+ {
56
+ "date": "Tue, 28 Jun 2022 17:39:52 GMT",
57
+ "tag": "@fluentui/react-spinbutton_v9.0.0-beta.16",
58
+ "version": "9.0.0-beta.16",
59
+ "comments": {
60
+ "prerelease": [
61
+ {
62
+ "author": "lingfangao@hotmail.com",
63
+ "package": "@fluentui/react-spinbutton",
64
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
65
+ "comment": "fix: Use caret dependency range for Griffel"
66
+ },
67
+ {
68
+ "author": "beachball",
69
+ "package": "@fluentui/react-spinbutton",
70
+ "comment": "Bump @fluentui/react-input to v9.0.1",
71
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
72
+ },
73
+ {
74
+ "author": "beachball",
75
+ "package": "@fluentui/react-spinbutton",
76
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
77
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
78
+ },
79
+ {
80
+ "author": "beachball",
81
+ "package": "@fluentui/react-spinbutton",
82
+ "comment": "Bump @fluentui/react-label to v9.0.1",
83
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
84
+ }
85
+ ]
86
+ }
87
+ },
88
+ {
89
+ "date": "Tue, 28 Jun 2022 15:14:00 GMT",
90
+ "tag": "@fluentui/react-spinbutton_v9.0.0-beta.15",
91
+ "version": "9.0.0-beta.15",
8
92
  "comments": {
9
93
  "none": [
10
94
  {
@@ -21,6 +105,12 @@
21
105
  }
22
106
  ],
23
107
  "prerelease": [
108
+ {
109
+ "author": "lingfangao@hotmail.com",
110
+ "package": "@fluentui/react-spinbutton",
111
+ "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
112
+ "comment": "Update 9.0.0-rc dependencies to use caret range"
113
+ },
24
114
  {
25
115
  "author": "olfedias@microsoft.com",
26
116
  "package": "@fluentui/react-spinbutton",
@@ -42,32 +132,65 @@
42
132
  {
43
133
  "author": "beachball",
44
134
  "package": "@fluentui/react-spinbutton",
45
- "comment": "Bump @fluentui/react-input to v0.0.0-nightly-20220627-0421.1",
46
- "commit": "05673e336908551b7a18202fd68ab9d5fb68d271"
135
+ "comment": "Bump @fluentui/keyboard-keys to v9.0.0",
136
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
137
+ },
138
+ {
139
+ "author": "beachball",
140
+ "package": "@fluentui/react-spinbutton",
141
+ "comment": "Bump @fluentui/react-input to v9.0.0",
142
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
143
+ },
144
+ {
145
+ "author": "beachball",
146
+ "package": "@fluentui/react-spinbutton",
147
+ "comment": "Bump @fluentui/react-theme to v9.0.0",
148
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
149
+ },
150
+ {
151
+ "author": "beachball",
152
+ "package": "@fluentui/react-spinbutton",
153
+ "comment": "Bump @fluentui/react-utilities to v9.0.0",
154
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
47
155
  },
48
156
  {
49
157
  "author": "beachball",
50
158
  "package": "@fluentui/react-spinbutton",
51
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220627-0421.1",
52
- "commit": "05673e336908551b7a18202fd68ab9d5fb68d271"
159
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
160
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
53
161
  },
54
162
  {
55
163
  "author": "beachball",
56
164
  "package": "@fluentui/react-spinbutton",
57
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220627-0421.1",
58
- "commit": "05673e336908551b7a18202fd68ab9d5fb68d271"
165
+ "comment": "Bump @fluentui/react-label to v9.0.0",
166
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
167
+ }
168
+ ]
169
+ }
170
+ },
171
+ {
172
+ "date": "Thu, 23 Jun 2022 14:25:31 GMT",
173
+ "tag": "@fluentui/react-spinbutton_v9.0.0-beta.14",
174
+ "version": "9.0.0-beta.14",
175
+ "comments": {
176
+ "prerelease": [
177
+ {
178
+ "author": "beachball",
179
+ "package": "@fluentui/react-spinbutton",
180
+ "comment": "Bump @fluentui/react-input to v9.0.0-rc.6",
181
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
59
182
  },
60
183
  {
61
184
  "author": "beachball",
62
185
  "package": "@fluentui/react-spinbutton",
63
- "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220627-0421.1",
64
- "commit": "05673e336908551b7a18202fd68ab9d5fb68d271"
186
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
187
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
65
188
  },
66
189
  {
67
190
  "author": "beachball",
68
191
  "package": "@fluentui/react-spinbutton",
69
- "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220627-0421.1",
70
- "commit": "05673e336908551b7a18202fd68ab9d5fb68d271"
192
+ "comment": "Bump @fluentui/react-label to v9.0.0-rc.6",
193
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
71
194
  }
72
195
  ]
73
196
  }
package/CHANGELOG.md CHANGED
@@ -1,24 +1,64 @@
1
1
  # Change Log - @fluentui/react-spinbutton
2
2
 
3
- This log was last generated on Mon, 27 Jun 2022 04:33:03 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 04 Jul 2022 04:31:25 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20220627-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v0.0.0-nightly-20220627-0421.1)
7
+ ## [0.0.0-nightly-20220704-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v0.0.0-nightly-20220704-0419.1)
8
8
 
9
- Mon, 27 Jun 2022 04:33:03 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.13..@fluentui/react-spinbutton_v0.0.0-nightly-20220627-0421.1)
9
+ Mon, 04 Jul 2022 04:31:25 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.16..@fluentui/react-spinbutton_v0.0.0-nightly-20220704-0419.1)
11
11
 
12
12
  ### Changes
13
13
 
14
+ - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
15
+ - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220704-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/2027db0e86db3d94fe6f7c7c55734098c014dfbf) by beachball)
16
+ - Bump @fluentui/react-input to v0.0.0-nightly-20220704-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/2027db0e86db3d94fe6f7c7c55734098c014dfbf) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20220704-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/2027db0e86db3d94fe6f7c7c55734098c014dfbf) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20220704-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/2027db0e86db3d94fe6f7c7c55734098c014dfbf) by beachball)
19
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220704-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/2027db0e86db3d94fe6f7c7c55734098c014dfbf) by beachball)
20
+ - Bump @fluentui/react-label to v0.0.0-nightly-20220704-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/2027db0e86db3d94fe6f7c7c55734098c014dfbf) by beachball)
21
+
22
+ ## [9.0.0-beta.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.16)
23
+
24
+ Tue, 28 Jun 2022 17:39:52 GMT
25
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.15..@fluentui/react-spinbutton_v9.0.0-beta.16)
26
+
27
+ ### Changes
28
+
29
+ - fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
30
+ - Bump @fluentui/react-input to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
31
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
32
+ - Bump @fluentui/react-label to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
33
+
34
+ ## [9.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.15)
35
+
36
+ Tue, 28 Jun 2022 15:14:00 GMT
37
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.14..@fluentui/react-spinbutton_v9.0.0-beta.15)
38
+
39
+ ### Changes
40
+
41
+ - Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
14
42
  - chore: Update @fluentui/react-icons to latest version ([PR #23459](https://github.com/microsoft/fluentui/pull/23459) by olfedias@microsoft.com)
15
43
  - Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
16
44
  - fix: Making increment and decrement buttons of SpinButton have 'type=button' instead of 'type=submit'. ([PR #23710](https://github.com/microsoft/fluentui/pull/23710) by Humberto.Morimoto@microsoft.com)
17
- - Bump @fluentui/react-input to v0.0.0-nightly-20220627-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/05673e336908551b7a18202fd68ab9d5fb68d271) by beachball)
18
- - Bump @fluentui/react-theme to v0.0.0-nightly-20220627-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/05673e336908551b7a18202fd68ab9d5fb68d271) by beachball)
19
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20220627-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/05673e336908551b7a18202fd68ab9d5fb68d271) by beachball)
20
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220627-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/05673e336908551b7a18202fd68ab9d5fb68d271) by beachball)
21
- - Bump @fluentui/react-label to v0.0.0-nightly-20220627-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/05673e336908551b7a18202fd68ab9d5fb68d271) by beachball)
45
+ - Bump @fluentui/keyboard-keys to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
46
+ - Bump @fluentui/react-input to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
47
+ - Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
48
+ - Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
49
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
50
+ - Bump @fluentui/react-label to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
51
+
52
+ ## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.14)
53
+
54
+ Thu, 23 Jun 2022 14:25:31 GMT
55
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.13..@fluentui/react-spinbutton_v9.0.0-beta.14)
56
+
57
+ ### Changes
58
+
59
+ - Bump @fluentui/react-input to v9.0.0-rc.6 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
60
+ - Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
61
+ - Bump @fluentui/react-label to v9.0.0-rc.6 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
22
62
 
23
63
  ## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.13)
24
64
 
package/lib/components/SpinButton/useSpinButton.js CHANGED
@@ -54,96 +54,30 @@ export const useSpinButton_unstable = (props, ref) => {
54
54
  defaultState: defaultValue,
55
55
  initialState: 0
56
56
  });
57
- const [textValue, setTextValue] = React.useState(value !== undefined && displayValue !== undefined ? displayValue : String(currentValue));
58
- const [spinState, setSpinState] = React.useState('rest');
59
- const [atBound, setAtBound] = React.useState('none');
57
+ const isControlled = value !== undefined;
58
+ const [textValue, setTextValue] = React.useState(undefined);
59
+ const [keyboardSpinState, setKeyboardSpinState] = React.useState('rest');
60
60
  const internalState = React.useRef({
61
61
  value: currentValue,
62
- spinState,
62
+ spinState: 'rest',
63
63
  spinTime: 0,
64
- spinDelay: DEFAULT_SPIN_DELAY_MS
64
+ spinDelay: DEFAULT_SPIN_DELAY_MS,
65
+ atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none'
65
66
  });
66
- const state = {
67
- size,
68
- appearance,
69
- spinState,
70
- atBound,
71
- components: {
72
- root: 'span',
73
- input: 'input',
74
- incrementButton: 'button',
75
- decrementButton: 'button'
76
- },
77
- root: resolveShorthand(root, {
78
- required: true,
79
- defaultProps: nativeProps.root
80
- }),
81
- input: resolveShorthand(input, {
82
- required: true,
83
- defaultProps: {
84
- ref,
85
- autoComplete: 'off',
86
- role: 'spinbutton',
87
- appearance: appearance,
88
- type: 'text',
89
- ...nativeProps.primary
90
- }
91
- }),
92
- incrementButton: resolveShorthand(incrementButton, {
93
- required: true,
94
- defaultProps: {
95
- tabIndex: -1,
96
- children: /*#__PURE__*/React.createElement(ChevronUp16Regular, null),
97
- disabled: nativeProps.primary.disabled,
98
- 'aria-label': 'Increment value',
99
- type: 'button'
100
- }
101
- }),
102
- decrementButton: resolveShorthand(decrementButton, {
103
- required: true,
104
- defaultProps: {
105
- tabIndex: -1,
106
- children: /*#__PURE__*/React.createElement(ChevronDown16Regular, null),
107
- disabled: nativeProps.primary.disabled,
108
- 'aria-label': 'Decrement value',
109
- type: 'button'
110
- }
111
- })
112
- };
113
67
  const [setStepTimeout, clearStepTimeout] = useTimeout();
114
- React.useEffect(() => {
115
- let newTextValue;
116
-
117
- if (value === null || currentValue === null) {
118
- newTextValue = displayValue !== null && displayValue !== void 0 ? displayValue : '';
119
- internalState.current.value = null;
120
- setAtBound('none');
121
- } else if (value !== undefined) {
122
- const roundedValue = precisionRound(value, precision);
123
- newTextValue = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);
124
- internalState.current.value = roundedValue;
125
- setAtBound(getBound(roundedValue, min, max));
126
- } else {
127
- const roundedValue = precisionRound(currentValue, precision);
128
- newTextValue = String(roundedValue);
129
- internalState.current.value = roundedValue;
130
- setAtBound(getBound(roundedValue, min, max));
131
- }
132
68
 
133
- setTextValue(newTextValue);
134
- }, [value, displayValue, currentValue, precision, setAtBound, min, max]);
69
+ const stepValue = (e, direction, startFrom) => {
70
+ let startValue = internalState.current.value;
135
71
 
136
- const handleInputChange = e => {
137
- if (!internalState.current.previousTextValue) {
138
- internalState.current.previousTextValue = textValue;
139
- }
72
+ if (startFrom) {
73
+ const num = parseFloat(startFrom);
140
74
 
141
- const newValue = e.target.value;
142
- setTextValue(newValue);
143
- };
75
+ if (!isNaN(num)) {
76
+ startValue = num;
77
+ }
78
+ }
144
79
 
145
- const stepValue = (e, direction) => {
146
- const val = internalState.current.value;
80
+ const val = startValue;
147
81
  const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;
148
82
  const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;
149
83
 
@@ -172,6 +106,15 @@ export const useSpinButton_unstable = (props, ref) => {
172
106
  }
173
107
  };
174
108
 
109
+ const handleInputChange = e => {
110
+ if (!internalState.current.previousTextValue) {
111
+ internalState.current.previousTextValue = textValue;
112
+ }
113
+
114
+ const newValue = e.target.value;
115
+ setTextValue(newValue);
116
+ };
117
+
175
118
  const handleIncrementMouseDown = e => {
176
119
  internalState.current.spinState = 'up';
177
120
  stepValue(e, 'up');
@@ -195,44 +138,48 @@ export const useSpinButton_unstable = (props, ref) => {
195
138
  };
196
139
 
197
140
  const handleKeyDown = e => {
141
+ let nextKeyboardSpinState = 'rest';
142
+
198
143
  if (e.key === Keys.ArrowUp) {
199
- stepValue(e, 'up');
200
- setSpinState('up');
144
+ stepValue(e, 'up', textValue);
145
+ nextKeyboardSpinState = 'up';
201
146
  } else if (e.key === Keys.ArrowDown) {
202
- stepValue(e, 'down');
203
- setSpinState('down');
147
+ stepValue(e, 'down', textValue);
148
+ nextKeyboardSpinState = 'down';
204
149
  } else if (e.key === Keys.PageUp) {
205
150
  e.preventDefault();
206
- stepValue(e, 'upPage');
207
- setSpinState('up');
151
+ stepValue(e, 'upPage', textValue);
152
+ nextKeyboardSpinState = 'up';
208
153
  } else if (e.key === Keys.PageDown) {
209
154
  e.preventDefault();
210
- stepValue(e, 'downPage');
211
- setSpinState('down');
155
+ stepValue(e, 'downPage', textValue);
156
+ nextKeyboardSpinState = 'down';
212
157
  } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {
213
158
  commit(e, min);
214
- setSpinState('down');
159
+ nextKeyboardSpinState = 'down';
215
160
  } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {
216
161
  commit(e, max);
217
- setSpinState('up');
162
+ nextKeyboardSpinState = 'up';
218
163
  } else if (e.key === Keys.Enter) {
219
164
  commit(e, currentValue, textValue);
220
165
  internalState.current.previousTextValue = undefined;
221
- setSpinState('rest');
222
166
  } else if (e.key === Keys.Escape) {
223
167
  if (internalState.current.previousTextValue) {
224
- setTextValue(internalState.current.previousTextValue);
168
+ setTextValue(undefined);
225
169
  internalState.current.previousTextValue = undefined;
226
170
  }
171
+ }
227
172
 
228
- setSpinState('rest');
229
- } else {
230
- setSpinState('rest');
173
+ if (keyboardSpinState !== nextKeyboardSpinState) {
174
+ setKeyboardSpinState(nextKeyboardSpinState);
231
175
  }
232
176
  };
233
177
 
234
178
  const handleKeyUp = e => {
235
- setSpinState('rest');
179
+ if (keyboardSpinState !== 'rest') {
180
+ setKeyboardSpinState('rest');
181
+ internalState.current.spinState = 'rest';
182
+ }
236
183
  };
237
184
 
238
185
  const commit = (e, newValue, newDisplayValue) => {
@@ -243,6 +190,12 @@ export const useSpinButton_unstable = (props, ref) => {
243
190
  if (valueChanged) {
244
191
  roundedValue = precisionRound(newValue, precision);
245
192
  setCurrentValue(roundedValue);
193
+ } else if (displayValueChanged && !isControlled) {
194
+ const nextValue = parseFloat(newDisplayValue);
195
+
196
+ if (!isNaN(nextValue)) {
197
+ setCurrentValue(precisionRound(nextValue, precision));
198
+ }
246
199
  }
247
200
 
248
201
  if (valueChanged || displayValueChanged) {
@@ -251,9 +204,78 @@ export const useSpinButton_unstable = (props, ref) => {
251
204
  displayValue: newDisplayValue
252
205
  });
253
206
  }
207
+
208
+ setTextValue(undefined);
254
209
  };
255
210
 
256
- state.input.value = textValue;
211
+ const state = {
212
+ size,
213
+ appearance,
214
+ spinState: keyboardSpinState,
215
+ atBound: internalState.current.atBound,
216
+ components: {
217
+ root: 'span',
218
+ input: 'input',
219
+ incrementButton: 'button',
220
+ decrementButton: 'button'
221
+ },
222
+ root: resolveShorthand(root, {
223
+ required: true,
224
+ defaultProps: nativeProps.root
225
+ }),
226
+ input: resolveShorthand(input, {
227
+ required: true,
228
+ defaultProps: {
229
+ ref,
230
+ autoComplete: 'off',
231
+ role: 'spinbutton',
232
+ appearance: appearance,
233
+ type: 'text',
234
+ ...nativeProps.primary
235
+ }
236
+ }),
237
+ incrementButton: resolveShorthand(incrementButton, {
238
+ required: true,
239
+ defaultProps: {
240
+ tabIndex: -1,
241
+ children: /*#__PURE__*/React.createElement(ChevronUp16Regular, null),
242
+ disabled: nativeProps.primary.disabled,
243
+ 'aria-label': 'Increment value',
244
+ type: 'button'
245
+ }
246
+ }),
247
+ decrementButton: resolveShorthand(decrementButton, {
248
+ required: true,
249
+ defaultProps: {
250
+ tabIndex: -1,
251
+ children: /*#__PURE__*/React.createElement(ChevronDown16Regular, null),
252
+ disabled: nativeProps.primary.disabled,
253
+ 'aria-label': 'Decrement value',
254
+ type: 'button'
255
+ }
256
+ })
257
+ };
258
+ let valueToDisplay;
259
+
260
+ if (textValue !== undefined) {
261
+ valueToDisplay = textValue;
262
+ } else if (value === null || currentValue === null) {
263
+ valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : '';
264
+ internalState.current.value = null;
265
+ internalState.current.atBound = 'none';
266
+ } else {
267
+ const roundedValue = precisionRound(currentValue, precision);
268
+ internalState.current.value = roundedValue;
269
+ internalState.current.atBound = getBound(roundedValue, min, max);
270
+
271
+ if (isControlled) {
272
+ valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);
273
+ } else {
274
+ valueToDisplay = String(roundedValue);
275
+ }
276
+ }
277
+
278
+ state.input.value = valueToDisplay;
257
279
  state.input['aria-valuemin'] = min;
258
280
  state.input['aria-valuemax'] = max;
259
281
  state.input['aria-valuenow'] = currentValue !== null && currentValue !== void 0 ? currentValue : undefined;
package/lib/components/SpinButton/useSpinButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/SpinButton/useSpinButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SACE,yBADF,EAEE,gBAFF,EAGE,oBAHF,EAIE,uBAJF,EAKE,UALF,QAMO,2BANP;AAOA,OAAO,KAAK,IAAZ,MAAsB,yBAAtB;AAQA,SAAS,kBAAT,EAA6B,cAA7B,EAA6C,QAA7C,EAAuD,KAAvD,QAAoE,mBAApE;AACA,SAAS,kBAAT,EAA6B,oBAA7B,QAAyD,uBAAzD;AAUA,MAAM,qBAAqB,GAAG,GAA9B;AACA,MAAM,iBAAiB,GAAG,EAA1B;AACA,MAAM,gBAAgB,GAAG,IAAzB,C,CAEA;AACA;AACA;;AACA,MAAM,IAAI,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA6B,OAA7B,KAAyD,KAAK,GAAG,CAAC,GAAG,GAAG,KAAP,IAAgB,OAA9F;AAEA;;;;;;;;AAQG;;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAA8E;;;EAClH,MAAM,WAAW,GAAG,yBAAyB,CAAC;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,cAAD,EAAiB,KAAjB,EAAwB,KAAxB,EAA+B,UAA/B,EAA2C,MAA3C,EAAmD,OAAnD;EAHyB,CAAD,CAA7C;EAMA,MAAM;IACJ,KADI;IAEJ,YAFI;IAGJ,YAHI;IAIJ,GAJI;IAKJ,GALI;IAMJ,IAAI,GAAG,CANH;IAOJ,QAAQ,GAAG,CAPP;IAQJ,SAAS,EAAE,kBARP;IASJ,QATI;IAUJ,IAAI,GAAG,QAVH;IAWJ,UAAU,GAAG,SAXT;IAYJ,IAZI;IAaJ,KAbI;IAcJ,eAdI;IAeJ;EAfI,IAgBF,KAhBJ;EAkBA,MAAM,SAAS,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACnC,OAAO,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAA,kBAAA,GAAsB,IAAI,CAAC,GAAL,CAAS,kBAAkB,CAAC,IAAD,CAA3B,EAAmC,CAAnC,CAA7B;EACD,CAFiB,EAEf,CAAC,kBAAD,EAAqB,IAArB,CAFe,CAAlB;EAIA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;IAC3D,KAAK,EAAE,KADoD;IAE3D,YAAY,EAAE,YAF6C;IAG3D,YAAY,EAAE;EAH6C,CAAD,CAA5D;EAKA,MAAM,CAAC,SAAD,EAAY,YAAZ,IAA4B,KAAK,CAAC,QAAN,CAChC,KAAK,KAAK,SAAV,IAAuB,YAAY,KAAK,SAAxC,GAAoD,YAApD,GAAmE,MAAM,CAAC,YAAD,CADzC,CAAlC;EAGA,MAAM,CAAC,SAAD,EAAY,YAAZ,IAA4B,KAAK,CAAC,QAAN,CAAoC,MAApC,CAAlC;EACA,MAAM,CAAC,OAAD,EAAU,UAAV,IAAwB,KAAK,CAAC,QAAN,CAAiC,MAAjC,CAA9B;EAEA,MAAM,aAAa,GAAG,KAAK,CAAC,MAAN,CAA4B;IAChD,KAAK,EAAE,YADyC;IAEhD,SAFgD;IAGhD,QAAQ,EAAE,CAHsC;IAIhD,SAAS,EAAE;EAJqC,CAA5B,CAAtB;EAOA,MAAM,KAAK,GAAoB;IAC7B,IAD6B;IAE7B,UAF6B;IAG7B,SAH6B;IAI7B,OAJ6B;IAM7B,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,KAAK,EAAE,OAFG;MAGV,eAAe,EAAE,QAHP;MAIV,eAAe,EAAE;IAJP,CANiB;IAY7B,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;MAC3B,QAAQ,EAAE,IADiB;MAE3B,YAAY,EAAE,WAAW,CAAC;IAFC,CAAP,CAZO;IAgB7B,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;MAC7B,QAAQ,EAAE,IADmB;MAE7B,YAAY,EAAE;QACZ,GADY;QAEZ,YAAY,EAAE,KAFF;QAGZ,IAAI,EAAE,YAHM;QAIZ,UAAU,EAAE,UAJA;QAKZ,IAAI,EAAE,MALM;QAMZ,GAAG,WAAW,CAAC;MANH;IAFe,CAAR,CAhBM;IA2B7B,eAAe,EAAE,gBAAgB,CAAC,eAAD,EAAkB;MACjD,QAAQ,EAAE,IADuC;MAEjD,YAAY,EAAE;QACZ,QAAQ,EAAE,CAAC,CADC;QAEZ,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB,IAAnB,CAFE;QAGZ,QAAQ,EAAE,WAAW,CAAC,OAAZ,CAAoB,QAHlB;QAIZ,cAAc,iBAJF;QAKZ,IAAI,EAAE;MALM;IAFmC,CAAlB,CA3BJ;IAqC7B,eAAe,EAAE,gBAAgB,CAAC,eAAD,EAAkB;MACjD,QAAQ,EAAE,IADuC;MAEjD,YAAY,EAAE;QACZ,QAAQ,EAAE,CAAC,CADC;QAEZ,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB,IAArB,CAFE;QAGZ,QAAQ,EAAE,WAAW,CAAC,OAAZ,CAAoB,QAHlB;QAIZ,cAAc,iBAJF;QAKZ,IAAI,EAAE;MALM;IAFmC,CAAlB;EArCJ,CAA/B;EAiDA,MAAM,CAAC,cAAD,EAAiB,gBAAjB,IAAqC,UAAU,EAArD;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,YAAJ;;IACA,IAAI,KAAK,KAAK,IAAV,IAAkB,YAAY,KAAK,IAAvC,EAA6C;MAC3C,YAAY,GAAG,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAA,YAAA,GAAgB,EAA/B;MACA,aAAa,CAAC,OAAd,CAAsB,KAAtB,GAA8B,IAA9B;MACA,UAAU,CAAC,MAAD,CAAV;IACD,CAJD,MAIO,IAAI,KAAK,KAAK,SAAd,EAAyB;MAC9B,MAAM,YAAY,GAAG,cAAc,CAAC,KAAD,EAAQ,SAAR,CAAnC;MACA,YAAY,GAAG,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAA,YAAA,GAAgB,MAAM,CAAC,YAAD,CAArC;MACA,aAAa,CAAC,OAAd,CAAsB,KAAtB,GAA8B,YAA9B;MACA,UAAU,CAAC,QAAQ,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAAT,CAAV;IACD,CALM,MAKA;MACL,MAAM,YAAY,GAAG,cAAc,CAAC,YAAD,EAAe,SAAf,CAAnC;MACA,YAAY,GAAG,MAAM,CAAC,YAAD,CAArB;MACA,aAAa,CAAC,OAAd,CAAsB,KAAtB,GAA8B,YAA9B;MACA,UAAU,CAAC,QAAQ,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAAT,CAAV;IACD;;IACD,YAAY,CAAC,YAAD,CAAZ;EACD,CAlBD,EAkBG,CAAC,KAAD,EAAQ,YAAR,EAAsB,YAAtB,EAAoC,SAApC,EAA+C,UAA/C,EAA2D,GAA3D,EAAgE,GAAhE,CAlBH;;EAoBA,MAAM,iBAAiB,GAAI,CAAD,IAA2C;IACnE,IAAI,CAAC,aAAa,CAAC,OAAd,CAAsB,iBAA3B,EAA8C;MAC5C,aAAa,CAAC,OAAd,CAAsB,iBAAtB,GAA0C,SAA1C;IACD;;IAED,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAF,CAAS,KAA1B;IACA,YAAY,CAAC,QAAD,CAAZ;EACD,CAPD;;EASA,MAAM,SAAS,GAAG,CAAC,CAAD,EAA2B,SAA3B,KAA+E;IAC/F,MAAM,GAAG,GAAG,aAAa,CAAC,OAAd,CAAsB,KAAlC;IACA,MAAM,GAAG,GAAG,SAAS,KAAK,IAAd,IAAsB,SAAS,KAAK,QAApC,GAA+C,CAA/C,GAAmD,CAAC,CAAhE;IACA,MAAM,QAAQ,GAAG,SAAS,KAAK,QAAd,IAA0B,SAAS,KAAK,UAAxC,GAAqD,QAArD,GAAgE,IAAjF;;IAEA,IAAI,GAAG,KAAK,IAAZ,EAAkB;MAChB,MAAM,SAAS,GAAG,GAAG,KAAK,SAAR,GAAoB,CAApB,GAAwB,GAA1C;MACA,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,GAAG,QAAQ,GAAG,GAAxB,EAA6B,GAA7B,EAAkC,GAAlC,CAAtB;MACA,MAAM,CAAC,CAAD,EAAI,QAAJ,CAAN;MACA;IACD;;IAED,IAAI,QAAQ,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAhC;;IACA,IAAI,CAAC,MAAM,CAAC,KAAP,CAAa,QAAb,CAAL,EAA6B;MAC3B,QAAQ,GAAG,KAAK,CAAC,QAAD,EAAW,GAAX,EAAgB,GAAhB,CAAhB;IACD;;IAED,MAAM,CAAC,CAAD,EAAI,QAAJ,CAAN;;IAEA,IAAI,aAAa,CAAC,OAAd,CAAsB,SAAtB,KAAoC,MAAxC,EAAgD;MAC9C,cAAc,CAAC,MAAK;QAClB;QACA,aAAa,CAAC,OAAd,CAAsB,QAAtB,IAAkC,aAAa,CAAC,OAAd,CAAsB,SAAxD;QACA,aAAa,CAAC,OAAd,CAAsB,SAAtB,GAAkC,IAAI,CACpC,qBADoC,EAEpC,iBAFoC,EAGpC,aAAa,CAAC,OAAd,CAAsB,QAAtB,GAAiC,gBAHG,CAAtC;QAKA,SAAS,CAAC,CAAD,EAAI,SAAJ,CAAT;MACD,CATa,EASX,aAAa,CAAC,OAAd,CAAsB,SATX,CAAd;IAUD;EACF,CA/BD;;EAiCA,MAAM,wBAAwB,GAAI,CAAD,IAA2C;IAC1E,aAAa,CAAC,OAAd,CAAsB,SAAtB,GAAkC,IAAlC;IACA,SAAS,CAAC,CAAD,EAAI,IAAJ,CAAT;EACD,CAHD;;EAKA,MAAM,wBAAwB,GAAI,CAAD,IAA2C;IAC1E,aAAa,CAAC,OAAd,CAAsB,SAAtB,GAAkC,MAAlC;IACA,SAAS,CAAC,CAAD,EAAI,MAAJ,CAAT;EACD,CAHD;;EAKA,MAAM,wBAAwB,GAAI,CAAD,IAA2C;IAC1E,gBAAgB;IAChB,aAAa,CAAC,OAAd,CAAsB,SAAtB,GAAkC,MAAlC;IACA,aAAa,CAAC,OAAd,CAAsB,SAAtB,GAAkC,qBAAlC;IACA,aAAa,CAAC,OAAd,CAAsB,QAAtB,GAAiC,CAAjC;EACD,CALD;;EAOA,MAAM,UAAU,GAAI,CAAD,IAA0C;IAC3D,MAAM,CAAC,CAAD,EAAI,YAAJ,EAAkB,SAAlB,CAAN;IACA,aAAa,CAAC,OAAd,CAAsB,iBAAtB,GAA0C,SAA1C;EACD,CAHD;;EAKA,MAAM,aAAa,GAAI,CAAD,IAA6C;IACjE,IAAI,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,OAAnB,EAA4B;MAC1B,SAAS,CAAC,CAAD,EAAI,IAAJ,CAAT;MACA,YAAY,CAAC,IAAD,CAAZ;IACD,CAHD,MAGO,IAAI,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,SAAnB,EAA8B;MACnC,SAAS,CAAC,CAAD,EAAI,MAAJ,CAAT;MACA,YAAY,CAAC,MAAD,CAAZ;IACD,CAHM,MAGA,IAAI,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,MAAnB,EAA2B;MAChC,CAAC,CAAC,cAAF;MACA,SAAS,CAAC,CAAD,EAAI,QAAJ,CAAT;MACA,YAAY,CAAC,IAAD,CAAZ;IACD,CAJM,MAIA,IAAI,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,QAAnB,EAA6B;MAClC,CAAC,CAAC,cAAF;MACA,SAAS,CAAC,CAAD,EAAI,UAAJ,CAAT;MACA,YAAY,CAAC,MAAD,CAAZ;IACD,CAJM,MAIA,IAAI,CAAC,CAAC,CAAC,QAAH,IAAe,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,IAA9B,IAAsC,GAAG,KAAK,SAAlD,EAA6D;MAClE,MAAM,CAAC,CAAD,EAAI,GAAJ,CAAN;MACA,YAAY,CAAC,MAAD,CAAZ;IACD,CAHM,MAGA,IAAI,CAAC,CAAC,CAAC,QAAH,IAAe,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,GAA9B,IAAqC,GAAG,KAAK,SAAjD,EAA4D;MACjE,MAAM,CAAC,CAAD,EAAI,GAAJ,CAAN;MACA,YAAY,CAAC,IAAD,CAAZ;IACD,CAHM,MAGA,IAAI,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,KAAnB,EAA0B;MAC/B,MAAM,CAAC,CAAD,EAAI,YAAJ,EAAkB,SAAlB,CAAN;MACA,aAAa,CAAC,OAAd,CAAsB,iBAAtB,GAA0C,SAA1C;MACA,YAAY,CAAC,MAAD,CAAZ;IACD,CAJM,MAIA,IAAI,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,MAAnB,EAA2B;MAChC,IAAI,aAAa,CAAC,OAAd,CAAsB,iBAA1B,EAA6C;QAC3C,YAAY,CAAC,aAAa,CAAC,OAAd,CAAsB,iBAAvB,CAAZ;QACA,aAAa,CAAC,OAAd,CAAsB,iBAAtB,GAA0C,SAA1C;MACD;;MACD,YAAY,CAAC,MAAD,CAAZ;IACD,CANM,MAMA;MACL,YAAY,CAAC,MAAD,CAAZ;IACD;EACF,CAlCD;;EAoCA,MAAM,WAAW,GAAI,CAAD,IAA6C;IAC/D,YAAY,CAAC,MAAD,CAAZ;EACD,CAFD;;EAIA,MAAM,MAAM,GAAG,CAAC,CAAD,EAA2B,QAA3B,EAAqD,eAArD,KAAiF;IAC9F,MAAM,YAAY,GAAG,QAAQ,KAAK,SAAb,IAA0B,YAAY,KAAK,QAAhE;IACA,MAAM,mBAAmB,GACvB,eAAe,KAAK,SAApB,IACA,aAAa,CAAC,OAAd,CAAsB,iBAAtB,KAA4C,SAD5C,IAEA,aAAa,CAAC,OAAd,CAAsB,iBAAtB,KAA4C,eAH9C;IAKA,IAAI,YAAJ;;IACA,IAAI,YAAJ,EAAkB;MAChB,YAAY,GAAG,cAAc,CAAC,QAAD,EAAY,SAAZ,CAA7B;MACA,eAAe,CAAC,YAAD,CAAf;IACD;;IAED,IAAI,YAAY,IAAI,mBAApB,EAAyC;MACvC,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,CAAH,EAAM;QAAE,KAAK,EAAE,YAAT;QAAuB,YAAY,EAAE;MAArC,CAAN,CAAR;IACD;EACF,CAhBD;;EAkBA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,SAApB;EACA,KAAK,CAAC,KAAN,CAAY,eAAZ,IAA+B,GAA/B;EACA,KAAK,CAAC,KAAN,CAAY,eAAZ,IAA+B,GAA/B;EACA,KAAK,CAAC,KAAN,CAAY,eAAZ,IAA+B,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAA,YAAA,GAAgB,SAA/C;EACA,KAAK,CAAC,KAAN,CAAY,gBAAZ,IAAgC,CAAA,EAAA,GAAA,KAAK,CAAC,KAAN,CAAY,gBAAZ,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,EAA7B,GAAmC,KAAK,KAAK,SAAV,IAAuB,YAAxB,IAAyC,SAA3G;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,uBAAuB,CAAC,KAAK,CAAC,KAAN,CAAY,QAAb,EAAuB,iBAAvB,CAA9C;EACA,KAAK,CAAC,KAAN,CAAY,MAAZ,GAAqB,uBAAuB,CAAC,KAAK,CAAC,KAAN,CAAY,MAAb,EAAqB,UAArB,CAA5C;EACA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,uBAAuB,CAAC,KAAK,CAAC,KAAN,CAAY,SAAb,EAAwB,aAAxB,CAA/C;EACA,KAAK,CAAC,KAAN,CAAY,OAAZ,GAAsB,uBAAuB,CAAC,KAAK,CAAC,KAAN,CAAY,OAAb,EAAsB,WAAtB,CAA7C;EAEA,KAAK,CAAC,eAAN,CAAsB,WAAtB,GAAoC,uBAAuB,CACzD,wBADyD,EAEzD,KAAK,CAAC,eAAN,CAAsB,WAFmC,CAA3D;EAIA,KAAK,CAAC,eAAN,CAAsB,SAAtB,GAAkC,uBAAuB,CAAC,KAAK,CAAC,eAAN,CAAsB,SAAvB,EAAkC,wBAAlC,CAAzD;EACA,KAAK,CAAC,eAAN,CAAsB,YAAtB,GAAqC,uBAAuB,CAC1D,KAAK,CAAC,eAAN,CAAsB,YADoC,EAE1D,wBAF0D,CAA5D;EAKA,KAAK,CAAC,eAAN,CAAsB,WAAtB,GAAoC,uBAAuB,CACzD,wBADyD,EAEzD,KAAK,CAAC,eAAN,CAAsB,WAFmC,CAA3D;EAIA,KAAK,CAAC,eAAN,CAAsB,SAAtB,GAAkC,uBAAuB,CAAC,KAAK,CAAC,eAAN,CAAsB,SAAvB,EAAkC,wBAAlC,CAAzD;EACA,KAAK,CAAC,eAAN,CAAsB,YAAtB,GAAqC,uBAAuB,CAC1D,KAAK,CAAC,eAAN,CAAsB,YADoC,EAE1D,wBAF0D,CAA5D;EAKA,OAAO,KAAP;AACD,CA/QM","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, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\n\ntype InternalState = {\n value: number | null;\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: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],\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 type: 'button',\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 type: 'button',\n },\n }),\n };\n\n const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n React.useEffect(() => {\n let newTextValue;\n if (value === null || currentValue === null) {\n newTextValue = displayValue ?? '';\n internalState.current.value = null;\n setAtBound('none');\n } else 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 const roundedValue = precisionRound(currentValue, precision);\n newTextValue = String(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\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 val = internalState.current.value;\n const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n if (val === null) {\n const stepStart = min === undefined ? 0 : min;\n const nullStep = clamp(stepStart + stepSize * dir, min, max);\n commit(e, nullStep);\n return;\n }\n\n let newValue = val + stepSize * dir;\n if (!Number.isNaN(newValue)) {\n newValue = clamp(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 internalState.current.previousTextValue = undefined;\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 | null, 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 }\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 ?? undefined;\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, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\n\ntype InternalState = {\n value: number | null;\n spinState: SpinButtonSpinState;\n spinTime: number;\n spinDelay: number;\n previousTextValue?: string;\n atBound: SpinButtonBounds;\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: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],\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\n const isControlled = value !== undefined;\n\n const [textValue, setTextValue] = React.useState<string | undefined>(undefined);\n const [keyboardSpinState, setKeyboardSpinState] = React.useState<SpinButtonSpinState>('rest');\n\n const internalState = React.useRef<InternalState>({\n value: currentValue,\n spinState: 'rest',\n spinTime: 0,\n spinDelay: DEFAULT_SPIN_DELAY_MS,\n atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none',\n });\n\n const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n const stepValue = (\n e: SpinButtonChangeEvent,\n direction: 'up' | 'down' | 'upPage' | 'downPage',\n startFrom?: string,\n ) => {\n let startValue = internalState.current.value;\n if (startFrom) {\n const num = parseFloat(startFrom);\n if (!isNaN(num)) {\n startValue = num;\n }\n }\n const val = startValue;\n const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n if (val === null) {\n const stepStart = min === undefined ? 0 : min;\n const nullStep = clamp(stepStart + stepSize * dir, min, max);\n commit(e, nullStep);\n return;\n }\n\n let newValue = val + stepSize * dir;\n if (!Number.isNaN(newValue)) {\n newValue = clamp(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 handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!internalState.current.previousTextValue) {\n internalState.current.previousTextValue = textValue;\n }\n const newValue = e.target.value;\n setTextValue(newValue);\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 let nextKeyboardSpinState: SpinButtonSpinState = 'rest';\n\n if (e.key === Keys.ArrowUp) {\n stepValue(e, 'up', textValue);\n nextKeyboardSpinState = 'up';\n } else if (e.key === Keys.ArrowDown) {\n stepValue(e, 'down', textValue);\n nextKeyboardSpinState = 'down';\n } else if (e.key === Keys.PageUp) {\n e.preventDefault();\n stepValue(e, 'upPage', textValue);\n nextKeyboardSpinState = 'up';\n } else if (e.key === Keys.PageDown) {\n e.preventDefault();\n stepValue(e, 'downPage', textValue);\n nextKeyboardSpinState = 'down';\n } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {\n commit(e, min);\n nextKeyboardSpinState = 'down';\n } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {\n commit(e, max);\n nextKeyboardSpinState = 'up';\n } else if (e.key === Keys.Enter) {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n } else if (e.key === Keys.Escape) {\n if (internalState.current.previousTextValue) {\n setTextValue(undefined);\n internalState.current.previousTextValue = undefined;\n }\n }\n\n if (keyboardSpinState !== nextKeyboardSpinState) {\n setKeyboardSpinState(nextKeyboardSpinState);\n }\n };\n\n const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (keyboardSpinState !== 'rest') {\n setKeyboardSpinState('rest');\n internalState.current.spinState = 'rest';\n }\n };\n\n const commit = (e: SpinButtonChangeEvent, newValue?: number | null, 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 } else if (displayValueChanged && !isControlled) {\n const nextValue = parseFloat(newDisplayValue as string);\n if (!isNaN(nextValue)) {\n setCurrentValue(precisionRound(nextValue, precision));\n }\n }\n\n if (valueChanged || displayValueChanged) {\n onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n }\n\n setTextValue(undefined);\n };\n\n const state: SpinButtonState = {\n size,\n appearance,\n spinState: keyboardSpinState,\n atBound: internalState.current.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 type: 'button',\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 type: 'button',\n },\n }),\n };\n\n let valueToDisplay;\n if (textValue !== undefined) {\n valueToDisplay = textValue;\n } else if (value === null || currentValue === null) {\n valueToDisplay = displayValue ?? '';\n internalState.current.value = null;\n internalState.current.atBound = 'none';\n } else {\n const roundedValue = precisionRound(currentValue, precision);\n internalState.current.value = roundedValue;\n internalState.current.atBound = getBound(roundedValue, min, max);\n if (isControlled) {\n valueToDisplay = displayValue ?? String(roundedValue);\n } else {\n valueToDisplay = String(roundedValue);\n }\n }\n\n state.input.value = valueToDisplay;\n state.input['aria-valuemin'] = min;\n state.input['aria-valuemax'] = max;\n state.input['aria-valuenow'] = currentValue ?? undefined;\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/"}