@fluentui/react-spinbutton 9.0.0-beta.14 → 9.0.0-beta.17

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 (24) hide show
  1. package/CHANGELOG.json +170 -1
  2. package/CHANGELOG.md +46 -2
  3. package/README.md +3 -3
  4. package/dist/index.d.ts +2 -0
  5. package/lib/components/SpinButton/SpinButton.js.map +1 -1
  6. package/lib/components/SpinButton/renderSpinButton.js.map +1 -1
  7. package/lib/components/SpinButton/useSpinButton.js +120 -96
  8. package/lib/components/SpinButton/useSpinButton.js.map +1 -1
  9. package/lib/components/SpinButton/useSpinButtonStyles.js +12 -3
  10. package/lib/components/SpinButton/useSpinButtonStyles.js.map +1 -1
  11. package/lib/utils/clamp.js.map +1 -1
  12. package/lib/utils/getBound.js.map +1 -1
  13. package/lib/utils/precision.js.map +1 -1
  14. package/lib-commonjs/components/SpinButton/SpinButton.js.map +1 -1
  15. package/lib-commonjs/components/SpinButton/renderSpinButton.js.map +1 -1
  16. package/lib-commonjs/components/SpinButton/useSpinButton.js +120 -96
  17. package/lib-commonjs/components/SpinButton/useSpinButton.js.map +1 -1
  18. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js +12 -3
  19. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js.map +1 -1
  20. package/lib-commonjs/index.js.map +1 -1
  21. package/lib-commonjs/utils/clamp.js.map +1 -1
  22. package/lib-commonjs/utils/getBound.js.map +1 -1
  23. package/lib-commonjs/utils/precision.js.map +1 -1
  24. package/package.json +9 -9
package/CHANGELOG.json CHANGED
@@ -2,7 +2,176 @@
2
2
  "name": "@fluentui/react-spinbutton",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 21 Jun 2022 17:09:28 GMT",
5
+ "date": "Thu, 14 Jul 2022 17:03:31 GMT",
6
+ "tag": "@fluentui/react-spinbutton_v9.0.0-beta.17",
7
+ "version": "9.0.0-beta.17",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "ololubek@microsoft.com",
12
+ "package": "@fluentui/react-spinbutton",
13
+ "commit": "63ab03fa7a9b3d02204147ea5356b8f78751df42",
14
+ "comment": "chore: Update @fluentui/react-icons dependency to v2.0.175"
15
+ },
16
+ {
17
+ "author": "seanmonahan@microsoft.com",
18
+ "package": "@fluentui/react-spinbutton",
19
+ "commit": "6e255e5e29c0fe7c01ae13152f39387d36f91dda",
20
+ "comment": "fix: decrease number of react renders"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-spinbutton",
25
+ "comment": "Bump @fluentui/react-input to v9.0.2",
26
+ "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-spinbutton",
31
+ "comment": "Bump @fluentui/react-utilities to v9.0.1-0",
32
+ "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-spinbutton",
37
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
38
+ "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-spinbutton",
43
+ "comment": "Bump @fluentui/react-label to v9.0.2",
44
+ "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
45
+ }
46
+ ],
47
+ "none": [
48
+ {
49
+ "author": "Humberto.Morimoto@microsoft.com",
50
+ "package": "@fluentui/react-spinbutton",
51
+ "commit": "422636fffd66758c1a6dd617063582d902b61927",
52
+ "comment": "docs: Replacing https://aka.ms/fluentui-storybook with https://react.fluentui.dev/ to point to the official documentation site."
53
+ }
54
+ ]
55
+ }
56
+ },
57
+ {
58
+ "date": "Tue, 28 Jun 2022 17:39:52 GMT",
59
+ "tag": "@fluentui/react-spinbutton_v9.0.0-beta.16",
60
+ "version": "9.0.0-beta.16",
61
+ "comments": {
62
+ "prerelease": [
63
+ {
64
+ "author": "lingfangao@hotmail.com",
65
+ "package": "@fluentui/react-spinbutton",
66
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
67
+ "comment": "fix: Use caret dependency range for Griffel"
68
+ },
69
+ {
70
+ "author": "beachball",
71
+ "package": "@fluentui/react-spinbutton",
72
+ "comment": "Bump @fluentui/react-input to v9.0.1",
73
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
74
+ },
75
+ {
76
+ "author": "beachball",
77
+ "package": "@fluentui/react-spinbutton",
78
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
79
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
80
+ },
81
+ {
82
+ "author": "beachball",
83
+ "package": "@fluentui/react-spinbutton",
84
+ "comment": "Bump @fluentui/react-label to v9.0.1",
85
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
86
+ }
87
+ ]
88
+ }
89
+ },
90
+ {
91
+ "date": "Tue, 28 Jun 2022 15:14:00 GMT",
92
+ "tag": "@fluentui/react-spinbutton_v9.0.0-beta.15",
93
+ "version": "9.0.0-beta.15",
94
+ "comments": {
95
+ "none": [
96
+ {
97
+ "author": "seanmonahan@microsoft.com",
98
+ "package": "@fluentui/react-spinbutton",
99
+ "commit": "d85de0c3ee9d2f6f96d1b1ef6e15033648ce9963",
100
+ "comment": "docs: clean up stories"
101
+ },
102
+ {
103
+ "author": "mgodbolt@microsoft.com",
104
+ "package": "@fluentui/react-spinbutton",
105
+ "commit": "51cf0a14d9a57107db0a4505b8b16260477b0e4a",
106
+ "comment": "chore: convert SpinButton to index based stories approach"
107
+ }
108
+ ],
109
+ "prerelease": [
110
+ {
111
+ "author": "lingfangao@hotmail.com",
112
+ "package": "@fluentui/react-spinbutton",
113
+ "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
114
+ "comment": "Update 9.0.0-rc dependencies to use caret range"
115
+ },
116
+ {
117
+ "author": "olfedias@microsoft.com",
118
+ "package": "@fluentui/react-spinbutton",
119
+ "commit": "82bd30dd41ad58df1f325e9b721200ed15d674a2",
120
+ "comment": "chore: Update @fluentui/react-icons to latest version"
121
+ },
122
+ {
123
+ "author": "lingfangao@hotmail.com",
124
+ "package": "@fluentui/react-spinbutton",
125
+ "commit": "675acea49c97f10837ddee9b8c4350ca27750125",
126
+ "comment": "Bump Griffel dependencies"
127
+ },
128
+ {
129
+ "author": "Humberto.Morimoto@microsoft.com",
130
+ "package": "@fluentui/react-spinbutton",
131
+ "commit": "2b4a2ac925ebb2baf990bec2c149b03eb298b872",
132
+ "comment": "fix: Making increment and decrement buttons of SpinButton have 'type=button' instead of 'type=submit'."
133
+ },
134
+ {
135
+ "author": "beachball",
136
+ "package": "@fluentui/react-spinbutton",
137
+ "comment": "Bump @fluentui/keyboard-keys to v9.0.0",
138
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
139
+ },
140
+ {
141
+ "author": "beachball",
142
+ "package": "@fluentui/react-spinbutton",
143
+ "comment": "Bump @fluentui/react-input to v9.0.0",
144
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
145
+ },
146
+ {
147
+ "author": "beachball",
148
+ "package": "@fluentui/react-spinbutton",
149
+ "comment": "Bump @fluentui/react-theme to v9.0.0",
150
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
151
+ },
152
+ {
153
+ "author": "beachball",
154
+ "package": "@fluentui/react-spinbutton",
155
+ "comment": "Bump @fluentui/react-utilities to v9.0.0",
156
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
157
+ },
158
+ {
159
+ "author": "beachball",
160
+ "package": "@fluentui/react-spinbutton",
161
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
162
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
163
+ },
164
+ {
165
+ "author": "beachball",
166
+ "package": "@fluentui/react-spinbutton",
167
+ "comment": "Bump @fluentui/react-label to v9.0.0",
168
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
169
+ }
170
+ ]
171
+ }
172
+ },
173
+ {
174
+ "date": "Thu, 23 Jun 2022 14:25:31 GMT",
6
175
  "tag": "@fluentui/react-spinbutton_v9.0.0-beta.14",
7
176
  "version": "9.0.0-beta.14",
8
177
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,56 @@
1
1
  # Change Log - @fluentui/react-spinbutton
2
2
 
3
- This log was last generated on Tue, 21 Jun 2022 17:09:28 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 14 Jul 2022 17:03:31 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.17)
8
+
9
+ Thu, 14 Jul 2022 17:03:31 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.16..@fluentui/react-spinbutton_v9.0.0-beta.17)
11
+
12
+ ### Changes
13
+
14
+ - chore: Update @fluentui/react-icons dependency to v2.0.175 ([PR #23812](https://github.com/microsoft/fluentui/pull/23812) by ololubek@microsoft.com)
15
+ - fix: decrease number of react renders ([PR #23714](https://github.com/microsoft/fluentui/pull/23714) by seanmonahan@microsoft.com)
16
+ - Bump @fluentui/react-input to v9.0.2 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
17
+ - Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
18
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
19
+ - Bump @fluentui/react-label to v9.0.2 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
20
+
21
+ ## [9.0.0-beta.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.16)
22
+
23
+ Tue, 28 Jun 2022 17:39:52 GMT
24
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.15..@fluentui/react-spinbutton_v9.0.0-beta.16)
25
+
26
+ ### Changes
27
+
28
+ - fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
29
+ - Bump @fluentui/react-input to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
30
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
31
+ - Bump @fluentui/react-label to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
32
+
33
+ ## [9.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.15)
34
+
35
+ Tue, 28 Jun 2022 15:14:00 GMT
36
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.14..@fluentui/react-spinbutton_v9.0.0-beta.15)
37
+
38
+ ### Changes
39
+
40
+ - Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
41
+ - chore: Update @fluentui/react-icons to latest version ([PR #23459](https://github.com/microsoft/fluentui/pull/23459) by olfedias@microsoft.com)
42
+ - Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
43
+ - 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)
44
+ - Bump @fluentui/keyboard-keys to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
45
+ - Bump @fluentui/react-input to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
46
+ - Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
47
+ - Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
48
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
49
+ - Bump @fluentui/react-label to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
50
+
7
51
  ## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.14)
8
52
 
9
- Tue, 21 Jun 2022 17:09:28 GMT
53
+ Thu, 23 Jun 2022 14:25:31 GMT
10
54
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.13..@fluentui/react-spinbutton_v9.0.0-beta.14)
11
55
 
12
56
  ### Changes
package/README.md CHANGED
@@ -1,10 +1,10 @@
1
1
  # @fluentui/react-spinbutton
2
2
 
3
- **SpinButton component for [Fluent UI React](https://aka.ms/fluentui-storybook)**
3
+ **SpinButton component for [Fluent UI React](https://react.fluentui.dev/)**
4
4
 
5
5
  These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
6
6
 
7
- SpinButtons are used to allow numeric input bounded between minimum and maximum values with button controls to increment and decrement the input value by some step amount. Values can also be manipulated via the keyboard.
7
+ SpinButtons are used to allow numeric input bounded between minimum and maximum values with buttons to increment and decrement the input value. Values can also be manipulated via the keyboard.
8
8
 
9
9
  ### Usage
10
10
 
@@ -21,7 +21,7 @@ import { SpinButton } from '@fluentui/react-spinbutton';
21
21
  <SpinButton value={value} onChange={onSpinButtonChange}/>
22
22
  ```
23
23
 
24
- See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
24
+ See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
25
25
 
26
26
  Alternatively, run Storybook locally with:
27
27
 
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ /// <reference types="react" />
2
+
1
3
  import type { ComponentProps } from '@fluentui/react-utilities';
2
4
  import type { ComponentState } from '@fluentui/react-utilities';
3
5
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
package/lib/components/SpinButton/SpinButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/SpinButton/SpinButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;AAEA,EAAA,4BAA4B,CAAC,KAAD,CAA5B;AACA,SAAO,yBAAyB,CAAC,KAAD,CAAhC;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useSpinButton_unstable } from './useSpinButton';\nimport { renderSpinButton_unstable } from './renderSpinButton';\nimport { useSpinButtonStyles_unstable } from './useSpinButtonStyles';\nimport type { SpinButtonProps } from './SpinButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A SpinButton allows someone to incrementally adjust a value in small steps.\n */\nexport const SpinButton: ForwardRefComponent<SpinButtonProps> = React.forwardRef((props, ref) => {\n const state = useSpinButton_unstable(props, ref);\n\n useSpinButtonStyles_unstable(state);\n return renderSpinButton_unstable(state);\n});\n\nSpinButton.displayName = 'SpinButton';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/SpinButton/SpinButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;EAEA,4BAA4B,CAAC,KAAD,CAA5B;EACA,OAAO,yBAAyB,CAAC,KAAD,CAAhC;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useSpinButton_unstable } from './useSpinButton';\nimport { renderSpinButton_unstable } from './renderSpinButton';\nimport { useSpinButtonStyles_unstable } from './useSpinButtonStyles';\nimport type { SpinButtonProps } from './SpinButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A SpinButton allows someone to incrementally adjust a value in small steps.\n */\nexport const SpinButton: ForwardRefComponent<SpinButtonProps> = React.forwardRef((props, ref) => {\n const state = useSpinButton_unstable(props, ref);\n\n useSpinButtonStyles_unstable(state);\n return renderSpinButton_unstable(state);\n});\n\nSpinButton.displayName = 'SpinButton';\n"],"sourceRoot":"../src/"}
package/lib/components/SpinButton/renderSpinButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/SpinButton/renderSpinButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAtB,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAtB,CAHF,CADF;AAOD,CAhCM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SpinButtonState, SpinButtonSlots } from './SpinButton.types';\n\n/**\n * Render the final JSX of SpinButton\n */\nexport const renderSpinButton_unstable = (state: SpinButtonState) => {\n // Leaving this here for now.\n // This is the approach using react-input's Input component.\n // It has some Typescript problems and feels hacky.\n // const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n // const { contentAfter, ...otherInputSlotProps } = slotProps.input as SpinButtonSlots['input'];\n // const inputContentAfter = {\n // ...contentAfter,\n // children: (\n // <>\n // <slots.incrementButton {...slotProps.incrementButton} />\n // <slots.decrementButton {...slotProps.decrementButton} />\n // </>\n // ),\n // };\n\n // return (\n // <slots.root {...slotProps.root}>\n // <slots.input {...otherInputSlotProps} contentAfter={inputContentAfter}/>\n // </slots.root>\n // );\n\n const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.input {...slotProps.input} />\n <slots.incrementButton {...slotProps.incrementButton} />\n <slots.decrementButton {...slotProps.decrementButton} />\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/SpinButton/renderSpinButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;EAClE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAkB,KAAlB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,CAHF,CADF;AAOD,CAhCM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SpinButtonState, SpinButtonSlots } from './SpinButton.types';\n\n/**\n * Render the final JSX of SpinButton\n */\nexport const renderSpinButton_unstable = (state: SpinButtonState) => {\n // Leaving this here for now.\n // This is the approach using react-input's Input component.\n // It has some Typescript problems and feels hacky.\n // const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n // const { contentAfter, ...otherInputSlotProps } = slotProps.input as SpinButtonSlots['input'];\n // const inputContentAfter = {\n // ...contentAfter,\n // children: (\n // <>\n // <slots.incrementButton {...slotProps.incrementButton} />\n // <slots.decrementButton {...slotProps.decrementButton} />\n // </>\n // ),\n // };\n\n // return (\n // <slots.root {...slotProps.root}>\n // <slots.input {...otherInputSlotProps} contentAfter={inputContentAfter}/>\n // </slots.root>\n // );\n\n const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.input {...slotProps.input} />\n <slots.incrementButton {...slotProps.incrementButton} />\n <slots.decrementButton {...slotProps.decrementButton} />\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
package/lib/components/SpinButton/useSpinButton.js CHANGED
@@ -54,94 +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
- }
100
- }),
101
- decrementButton: resolveShorthand(decrementButton, {
102
- required: true,
103
- defaultProps: {
104
- tabIndex: -1,
105
- children: /*#__PURE__*/React.createElement(ChevronDown16Regular, null),
106
- disabled: nativeProps.primary.disabled,
107
- 'aria-label': 'Decrement value'
108
- }
109
- })
110
- };
111
67
  const [setStepTimeout, clearStepTimeout] = useTimeout();
112
- React.useEffect(() => {
113
- let newTextValue;
114
-
115
- if (value === null || currentValue === null) {
116
- newTextValue = displayValue !== null && displayValue !== void 0 ? displayValue : '';
117
- internalState.current.value = null;
118
- setAtBound('none');
119
- } else if (value !== undefined) {
120
- const roundedValue = precisionRound(value, precision);
121
- newTextValue = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);
122
- internalState.current.value = roundedValue;
123
- setAtBound(getBound(roundedValue, min, max));
124
- } else {
125
- const roundedValue = precisionRound(currentValue, precision);
126
- newTextValue = String(roundedValue);
127
- internalState.current.value = roundedValue;
128
- setAtBound(getBound(roundedValue, min, max));
129
- }
130
68
 
131
- setTextValue(newTextValue);
132
- }, [value, displayValue, currentValue, precision, setAtBound, min, max]);
69
+ const stepValue = (e, direction, startFrom) => {
70
+ let startValue = internalState.current.value;
133
71
 
134
- const handleInputChange = e => {
135
- if (!internalState.current.previousTextValue) {
136
- internalState.current.previousTextValue = textValue;
137
- }
72
+ if (startFrom) {
73
+ const num = parseFloat(startFrom);
138
74
 
139
- const newValue = e.target.value;
140
- setTextValue(newValue);
141
- };
75
+ if (!isNaN(num)) {
76
+ startValue = num;
77
+ }
78
+ }
142
79
 
143
- const stepValue = (e, direction) => {
144
- const val = internalState.current.value;
80
+ const val = startValue;
145
81
  const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;
146
82
  const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;
147
83
 
@@ -170,6 +106,15 @@ export const useSpinButton_unstable = (props, ref) => {
170
106
  }
171
107
  };
172
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
+
173
118
  const handleIncrementMouseDown = e => {
174
119
  internalState.current.spinState = 'up';
175
120
  stepValue(e, 'up');
@@ -193,44 +138,48 @@ export const useSpinButton_unstable = (props, ref) => {
193
138
  };
194
139
 
195
140
  const handleKeyDown = e => {
141
+ let nextKeyboardSpinState = 'rest';
142
+
196
143
  if (e.key === Keys.ArrowUp) {
197
- stepValue(e, 'up');
198
- setSpinState('up');
144
+ stepValue(e, 'up', textValue);
145
+ nextKeyboardSpinState = 'up';
199
146
  } else if (e.key === Keys.ArrowDown) {
200
- stepValue(e, 'down');
201
- setSpinState('down');
147
+ stepValue(e, 'down', textValue);
148
+ nextKeyboardSpinState = 'down';
202
149
  } else if (e.key === Keys.PageUp) {
203
150
  e.preventDefault();
204
- stepValue(e, 'upPage');
205
- setSpinState('up');
151
+ stepValue(e, 'upPage', textValue);
152
+ nextKeyboardSpinState = 'up';
206
153
  } else if (e.key === Keys.PageDown) {
207
154
  e.preventDefault();
208
- stepValue(e, 'downPage');
209
- setSpinState('down');
155
+ stepValue(e, 'downPage', textValue);
156
+ nextKeyboardSpinState = 'down';
210
157
  } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {
211
158
  commit(e, min);
212
- setSpinState('down');
159
+ nextKeyboardSpinState = 'down';
213
160
  } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {
214
161
  commit(e, max);
215
- setSpinState('up');
162
+ nextKeyboardSpinState = 'up';
216
163
  } else if (e.key === Keys.Enter) {
217
164
  commit(e, currentValue, textValue);
218
165
  internalState.current.previousTextValue = undefined;
219
- setSpinState('rest');
220
166
  } else if (e.key === Keys.Escape) {
221
167
  if (internalState.current.previousTextValue) {
222
- setTextValue(internalState.current.previousTextValue);
168
+ setTextValue(undefined);
223
169
  internalState.current.previousTextValue = undefined;
224
170
  }
171
+ }
225
172
 
226
- setSpinState('rest');
227
- } else {
228
- setSpinState('rest');
173
+ if (keyboardSpinState !== nextKeyboardSpinState) {
174
+ setKeyboardSpinState(nextKeyboardSpinState);
229
175
  }
230
176
  };
231
177
 
232
178
  const handleKeyUp = e => {
233
- setSpinState('rest');
179
+ if (keyboardSpinState !== 'rest') {
180
+ setKeyboardSpinState('rest');
181
+ internalState.current.spinState = 'rest';
182
+ }
234
183
  };
235
184
 
236
185
  const commit = (e, newValue, newDisplayValue) => {
@@ -241,6 +190,12 @@ export const useSpinButton_unstable = (props, ref) => {
241
190
  if (valueChanged) {
242
191
  roundedValue = precisionRound(newValue, precision);
243
192
  setCurrentValue(roundedValue);
193
+ } else if (displayValueChanged && !isControlled) {
194
+ const nextValue = parseFloat(newDisplayValue);
195
+
196
+ if (!isNaN(nextValue)) {
197
+ setCurrentValue(precisionRound(nextValue, precision));
198
+ }
244
199
  }
245
200
 
246
201
  if (valueChanged || displayValueChanged) {
@@ -249,9 +204,78 @@ export const useSpinButton_unstable = (props, ref) => {
249
204
  displayValue: newDisplayValue
250
205
  });
251
206
  }
207
+
208
+ setTextValue(undefined);
252
209
  };
253
210
 
254
- 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;
255
279
  state.input['aria-valuemin'] = min;
256
280
  state.input['aria-valuemax'] = max;
257
281
  state.input['aria-valuenow'] = currentValue !== null && currentValue !== void 0 ? currentValue : undefined;