@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.
Files changed (44) hide show
  1. package/CHANGELOG.json +42 -24
  2. package/CHANGELOG.md +15 -12
  3. package/dist/index.d.ts +0 -17
  4. package/{lib → dist}/tsdoc-metadata.json +0 -0
  5. package/lib/components/SpinButton/SpinButton.types.js.map +1 -1
  6. package/lib/components/SpinButton/useSpinButton.js +3 -5
  7. package/lib/components/SpinButton/useSpinButton.js.map +1 -1
  8. package/lib/components/SpinButton/useSpinButtonStyles.js +2 -2
  9. package/lib/index.js.map +1 -1
  10. package/lib-commonjs/components/SpinButton/useSpinButton.js +3 -6
  11. package/lib-commonjs/components/SpinButton/useSpinButton.js.map +1 -1
  12. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js +2 -2
  13. package/lib-commonjs/index.js.map +1 -1
  14. package/package.json +9 -9
  15. package/lib/SpinButton.d.ts +0 -1
  16. package/lib/components/SpinButton/SpinButton.d.ts +0 -6
  17. package/lib/components/SpinButton/SpinButton.strings.d.ts +0 -2
  18. package/lib/components/SpinButton/SpinButton.strings.js +0 -5
  19. package/lib/components/SpinButton/SpinButton.strings.js.map +0 -1
  20. package/lib/components/SpinButton/SpinButton.types.d.ts +0 -140
  21. package/lib/components/SpinButton/index.d.ts +0 -5
  22. package/lib/components/SpinButton/renderSpinButton.d.ts +0 -5
  23. package/lib/components/SpinButton/useSpinButton.d.ts +0 -12
  24. package/lib/components/SpinButton/useSpinButtonStyles.d.ts +0 -7
  25. package/lib/index.d.ts +0 -2
  26. package/lib/utils/clamp.d.ts +0 -1
  27. package/lib/utils/getBound.d.ts +0 -2
  28. package/lib/utils/index.d.ts +0 -3
  29. package/lib/utils/precision.d.ts +0 -14
  30. package/lib-commonjs/SpinButton.d.ts +0 -1
  31. package/lib-commonjs/components/SpinButton/SpinButton.d.ts +0 -6
  32. package/lib-commonjs/components/SpinButton/SpinButton.strings.d.ts +0 -2
  33. package/lib-commonjs/components/SpinButton/SpinButton.strings.js +0 -11
  34. package/lib-commonjs/components/SpinButton/SpinButton.strings.js.map +0 -1
  35. package/lib-commonjs/components/SpinButton/SpinButton.types.d.ts +0 -140
  36. package/lib-commonjs/components/SpinButton/index.d.ts +0 -5
  37. package/lib-commonjs/components/SpinButton/renderSpinButton.d.ts +0 -5
  38. package/lib-commonjs/components/SpinButton/useSpinButton.d.ts +0 -12
  39. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.d.ts +0 -7
  40. package/lib-commonjs/index.d.ts +0 -2
  41. package/lib-commonjs/utils/clamp.d.ts +0 -1
  42. package/lib-commonjs/utils/getBound.d.ts +0 -2
  43. package/lib-commonjs/utils/index.d.ts +0 -3
  44. 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": "Thu, 12 May 2022 04:32:31 GMT",
6
- "tag": "@fluentui/react-spinbutton_v0.0.0-nightly-20220512-0418.1",
7
- "version": "0.0.0-nightly-20220512-0418.1",
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": "email not defined",
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": "not available",
14
- "comment": "Release nightly v9"
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": "2876fdf9a81f0a9a7c5fd0499bd48045b6b5fd5c",
38
- "comment": "react-spinbutton: remove SpinButtonCommons type"
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-20220512-0418.1",
50
- "commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
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-20220512-0418.1",
56
- "commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
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-20220512-0418.1",
62
- "commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
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-20220512-0418.1",
68
- "commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
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-20220512-0418.1",
74
- "commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
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 Thu, 12 May 2022 04:32:31 GMT and should not be manually modified.
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-20220512-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v0.0.0-nightly-20220512-0418.1)
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
- Thu, 12 May 2022 04:32:31 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-20220512-0418.1)
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
- - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
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 SpinButtonCommons type ([PR #22871](https://github.com/microsoft/fluentui/pull/22871) by seanmonahan@microsoft.com)
19
- - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
20
- - Bump @fluentui/react-input to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
21
- - Bump @fluentui/react-theme to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
22
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
23
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
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 * Strings for localizing text in the control.\n */\n strings?: SpinButtonStrings;\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\nexport type SpinButtonStrings = {\n /**\n * Label applied to the increment button.\n * Can include the token \"\\{step\\}\" which will be replaced with the value of the `step` prop.\n */\n incrementButtonLabel: string;\n\n /**\n * Label applied to the decrement button.\n * Can include the token \"\\{step\\}\" which will be replaced with the value of the `step` prop.\n */\n decrementButtonLabel: string;\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': strings.incrementButtonLabel.replace('{step}', step.toString())
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': strings.decrementButtonLabel.replace('{step}', step.toString())
107
+ 'aria-label': 'Decrement value'
110
108
  }
111
109
  })
112
110
  };
@@ -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,wBAAT,QAAyC,sBAAzC;AACA,SAAS,kBAAT,EAA6B,cAA7B,EAA6C,QAA7C,EAAuD,gBAAvD,QAA+E,mBAA/E;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;;;AAClH,QAAM,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,UAAD,EAAa,MAAb,EAAqB,KAArB,EAA4B,KAA5B;AAHyB,GAAD,CAA7C;AAMA,QAAM;AACJ,IAAA,KADI;AAEJ,IAAA,YAFI;AAGJ,IAAA,YAHI;AAIJ,IAAA,GAJI;AAKJ,IAAA,GALI;AAMJ,IAAA,IAAI,GAAG,CANH;AAOJ,IAAA,QAAQ,GAAG,CAPP;AAQJ,IAAA,SAAS,EAAE,kBARP;AASJ,IAAA,QATI;AAUJ,IAAA,IAAI,GAAG,QAVH;AAWJ,IAAA,UAAU,GAAG,SAXT;AAYJ,IAAA,IAZI;AAaJ,IAAA,KAbI;AAcJ,IAAA,eAdI;AAeJ,IAAA,eAfI;AAgBJ,IAAA,OAAO,GAAG;AAhBN,MAiBF,KAjBJ;AAmBA,QAAM,SAAS,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AACnC,WAAO,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAA,kBAAA,GAAsB,IAAI,CAAC,GAAL,CAAS,kBAAkB,CAAC,IAAD,CAA3B,EAAmC,CAAnC,CAA7B;AACD,GAFiB,EAEf,CAAC,kBAAD,EAAqB,IAArB,CAFe,CAAlB;AAIA,QAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,KADoD;AAE3D,IAAA,YAAY,EAAE,YAF6C;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAA5D;AAKA,QAAM,CAAC,SAAD,EAAY,YAAZ,IAA4B,KAAK,CAAC,QAAN,CAChC,KAAK,KAAK,SAAV,IAAuB,YAAY,KAAK,SAAxC,GAAoD,YAApD,GAAmE,MAAM,CAAC,YAAD,CADzC,CAAlC;AAGA,QAAM,CAAC,SAAD,EAAY,YAAZ,IAA4B,KAAK,CAAC,QAAN,CAAoC,MAApC,CAAlC;AACA,QAAM,CAAC,OAAD,EAAU,UAAV,IAAwB,KAAK,CAAC,QAAN,CAAiC,MAAjC,CAA9B;AAEA,QAAM,aAAa,GAAG,KAAK,CAAC,MAAN,CAA4B;AAChD,IAAA,KAAK,EAAE,YADyC;AAEhD,IAAA,SAFgD;AAGhD,IAAA,QAAQ,EAAE,CAHsC;AAIhD,IAAA,SAAS,EAAE;AAJqC,GAA5B,CAAtB;AAOA,QAAM,KAAK,GAAoB;AAC7B,IAAA,IAD6B;AAE7B,IAAA,UAF6B;AAG7B,IAAA,SAH6B;AAI7B,IAAA,OAJ6B;AAM7B,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,KAAK,EAAE,OAFG;AAGV,MAAA,eAAe,EAAE,QAHP;AAIV,MAAA,eAAe,EAAE;AAJP,KANiB;AAY7B,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE,WAAW,CAAC;AAFC,KAAP,CAZO;AAgB7B,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAC7B,MAAA,QAAQ,EAAE,IADmB;AAE7B,MAAA,YAAY,EAAE;AACZ,QAAA,GADY;AAEZ,QAAA,YAAY,EAAE,KAFF;AAGZ,QAAA,IAAI,EAAE,YAHM;AAIZ,QAAA,UAAU,EAAE,UAJA;AAKZ,QAAA,IAAI,EAAE,MALM;AAMZ,WAAG,WAAW,CAAC;AANH;AAFe,KAAR,CAhBM;AA2B7B,IAAA,eAAe,EAAE,gBAAgB,CAAC,eAAD,EAAkB;AACjD,MAAA,QAAQ,EAAE,IADuC;AAEjD,MAAA,YAAY,EAAE;AACZ,QAAA,QAAQ,EAAE,CAAC,CADC;AAEZ,QAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB,IAAnB,CAFE;AAGZ,QAAA,QAAQ,EAAE,WAAW,CAAC,OAAZ,CAAoB,QAHlB;AAIZ,sBAAc,OAAO,CAAC,oBAAR,CAA6B,OAA7B,CAAqC,QAArC,EAA+C,IAAI,CAAC,QAAL,EAA/C;AAJF;AAFmC,KAAlB,CA3BJ;AAoC7B,IAAA,eAAe,EAAE,gBAAgB,CAAC,eAAD,EAAkB;AACjD,MAAA,QAAQ,EAAE,IADuC;AAEjD,MAAA,YAAY,EAAE;AACZ,QAAA,QAAQ,EAAE,CAAC,CADC;AAEZ,QAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB,IAArB,CAFE;AAGZ,QAAA,QAAQ,EAAE,WAAW,CAAC,OAAZ,CAAoB,QAHlB;AAIZ,sBAAc,OAAO,CAAC,oBAAR,CAA6B,OAA7B,CAAqC,QAArC,EAA+C,IAAI,CAAC,QAAL,EAA/C;AAJF;AAFmC,KAAlB;AApCJ,GAA/B;AA+CA,QAAM,CAAC,cAAD,EAAiB,gBAAjB,IAAqC,UAAU,EAArD;AAEA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,QAAI,YAAJ;;AACA,QAAI,KAAK,KAAK,SAAd,EAAyB;AACvB,YAAM,YAAY,GAAG,cAAc,CAAC,KAAD,EAAQ,SAAR,CAAnC;AACA,MAAA,YAAY,GAAG,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAA,YAAA,GAAgB,MAAM,CAAC,YAAD,CAArC;AACA,MAAA,aAAa,CAAC,OAAd,CAAsB,KAAtB,GAA8B,YAA9B;AACA,MAAA,UAAU,CAAC,QAAQ,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAAT,CAAV;AACD,KALD,MAKO;AACL,MAAA,YAAY,GAAG,MAAM,CAAC,cAAc,CAAC,YAAD,EAAe,SAAf,CAAf,CAArB;AACA,MAAA,aAAa,CAAC,OAAd,CAAsB,KAAtB,GAA8B,YAA9B;AACD;;AACD,IAAA,YAAY,CAAC,YAAD,CAAZ;AACD,GAZD,EAYG,CAAC,KAAD,EAAQ,YAAR,EAAsB,YAAtB,EAAoC,SAApC,EAA+C,UAA/C,EAA2D,GAA3D,EAAgE,GAAhE,CAZH;;AAcA,QAAM,iBAAiB,GAAI,CAAD,IAA2C;AACnE,QAAI,CAAC,aAAa,CAAC,OAAd,CAAsB,iBAA3B,EAA8C;AAC5C,MAAA,aAAa,CAAC,OAAd,CAAsB,iBAAtB,GAA0C,SAA1C;AACD;;AAED,UAAM,QAAQ,GAAG,CAAC,CAAC,MAAF,CAAS,KAA1B;AACA,IAAA,YAAY,CAAC,QAAD,CAAZ;AACD,GAPD;;AASA,QAAM,SAAS,GAAG,CAAC,CAAD,EAA2B,SAA3B,KAA+E;AAC/F,UAAM,GAAG,GAAG,SAAS,KAAK,IAAd,IAAsB,SAAS,KAAK,QAApC,GAA+C,CAA/C,GAAmD,CAAC,CAAhE;AACA,UAAM,QAAQ,GAAG,SAAS,KAAK,QAAd,IAA0B,SAAS,KAAK,UAAxC,GAAqD,QAArD,GAAgE,IAAjF;AACA,UAAM,GAAG,GAAG,aAAa,CAAC,OAAd,CAAsB,KAAlC;AAEA,QAAI,QAAQ,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAhC;;AACA,QAAI,CAAC,MAAM,CAAC,KAAP,CAAa,QAAb,CAAL,EAA6B;AAC3B,MAAA,QAAQ,GAAG,gBAAgB,CAAC,GAAD,EAAM,QAAN,EAAgB,GAAhB,EAAqB,GAArB,CAA3B;AACD;;AAED,IAAA,MAAM,CAAC,CAAD,EAAI,QAAJ,CAAN;;AAEA,QAAI,aAAa,CAAC,OAAd,CAAsB,SAAtB,KAAoC,MAAxC,EAAgD;AAC9C,MAAA,cAAc,CAAC,MAAK;AAClB;AACA,QAAA,aAAa,CAAC,OAAd,CAAsB,QAAtB,IAAkC,aAAa,CAAC,OAAd,CAAsB,SAAxD;AACA,QAAA,aAAa,CAAC,OAAd,CAAsB,SAAtB,GAAkC,IAAI,CACpC,qBADoC,EAEpC,iBAFoC,EAGpC,aAAa,CAAC,OAAd,CAAsB,QAAtB,GAAiC,gBAHG,CAAtC;AAKA,QAAA,SAAS,CAAC,CAAD,EAAI,SAAJ,CAAT;AACD,OATa,EASX,aAAa,CAAC,OAAd,CAAsB,SATX,CAAd;AAUD;AACF,GAxBD;;AA0BA,QAAM,wBAAwB,GAAI,CAAD,IAA2C;AAC1E,IAAA,aAAa,CAAC,OAAd,CAAsB,SAAtB,GAAkC,IAAlC;AACA,IAAA,SAAS,CAAC,CAAD,EAAI,IAAJ,CAAT;AACD,GAHD;;AAKA,QAAM,wBAAwB,GAAI,CAAD,IAA2C;AAC1E,IAAA,aAAa,CAAC,OAAd,CAAsB,SAAtB,GAAkC,MAAlC;AACA,IAAA,SAAS,CAAC,CAAD,EAAI,MAAJ,CAAT;AACD,GAHD;;AAKA,QAAM,wBAAwB,GAAI,CAAD,IAA2C;AAC1E,IAAA,gBAAgB;AAChB,IAAA,aAAa,CAAC,OAAd,CAAsB,SAAtB,GAAkC,MAAlC;AACA,IAAA,aAAa,CAAC,OAAd,CAAsB,SAAtB,GAAkC,qBAAlC;AACA,IAAA,aAAa,CAAC,OAAd,CAAsB,QAAtB,GAAiC,CAAjC;AACD,GALD;;AAOA,QAAM,UAAU,GAAI,CAAD,IAA0C;AAC3D,IAAA,MAAM,CAAC,CAAD,EAAI,YAAJ,EAAkB,SAAlB,CAAN;AACA,IAAA,aAAa,CAAC,OAAd,CAAsB,iBAAtB,GAA0C,SAA1C;AACD,GAHD;;AAKA,QAAM,aAAa,GAAI,CAAD,IAA6C;AACjE,QAAI,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,OAAnB,EAA4B;AAC1B,MAAA,SAAS,CAAC,CAAD,EAAI,IAAJ,CAAT;AACA,MAAA,YAAY,CAAC,IAAD,CAAZ;AACD,KAHD,MAGO,IAAI,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,SAAnB,EAA8B;AACnC,MAAA,SAAS,CAAC,CAAD,EAAI,MAAJ,CAAT;AACA,MAAA,YAAY,CAAC,MAAD,CAAZ;AACD,KAHM,MAGA,IAAI,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,MAAnB,EAA2B;AAChC,MAAA,CAAC,CAAC,cAAF;AACA,MAAA,SAAS,CAAC,CAAD,EAAI,QAAJ,CAAT;AACA,MAAA,YAAY,CAAC,IAAD,CAAZ;AACD,KAJM,MAIA,IAAI,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,QAAnB,EAA6B;AAClC,MAAA,CAAC,CAAC,cAAF;AACA,MAAA,SAAS,CAAC,CAAD,EAAI,UAAJ,CAAT;AACA,MAAA,YAAY,CAAC,MAAD,CAAZ;AACD,KAJM,MAIA,IAAI,CAAC,CAAC,CAAC,QAAH,IAAe,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,IAA9B,IAAsC,GAAG,KAAK,SAAlD,EAA6D;AAClE,MAAA,MAAM,CAAC,CAAD,EAAI,GAAJ,CAAN;AACA,MAAA,YAAY,CAAC,MAAD,CAAZ;AACD,KAHM,MAGA,IAAI,CAAC,CAAC,CAAC,QAAH,IAAe,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,GAA9B,IAAqC,GAAG,KAAK,SAAjD,EAA4D;AACjE,MAAA,MAAM,CAAC,CAAD,EAAI,GAAJ,CAAN;AACA,MAAA,YAAY,CAAC,IAAD,CAAZ;AACD,KAHM,MAGA,IAAI,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,KAAnB,EAA0B;AAC/B,MAAA,MAAM,CAAC,CAAD,EAAI,YAAJ,EAAkB,SAAlB,CAAN;AACA,MAAA,YAAY,CAAC,MAAD,CAAZ;AACD,KAHM,MAGA,IAAI,CAAC,CAAC,GAAF,KAAU,IAAI,CAAC,MAAnB,EAA2B;AAChC,UAAI,aAAa,CAAC,OAAd,CAAsB,iBAA1B,EAA6C;AAC3C,QAAA,YAAY,CAAC,aAAa,CAAC,OAAd,CAAsB,iBAAvB,CAAZ;AACA,QAAA,aAAa,CAAC,OAAd,CAAsB,iBAAtB,GAA0C,SAA1C;AACD;;AACD,MAAA,YAAY,CAAC,MAAD,CAAZ;AACD,KANM,MAMA;AACL,MAAA,YAAY,CAAC,MAAD,CAAZ;AACD;AACF,GAjCD;;AAmCA,QAAM,WAAW,GAAI,CAAD,IAA6C;AAC/D,IAAA,YAAY,CAAC,MAAD,CAAZ;AACD,GAFD;;AAIA,QAAM,MAAM,GAAG,CAAC,CAAD,EAA2B,QAA3B,EAA8C,eAA9C,KAA0E;AACvF,UAAM,YAAY,GAAG,QAAQ,KAAK,SAAb,IAA0B,YAAY,KAAK,QAAhE;AACA,UAAM,mBAAmB,GACvB,eAAe,KAAK,SAApB,IACA,aAAa,CAAC,OAAd,CAAsB,iBAAtB,KAA4C,SAD5C,IAEA,aAAa,CAAC,OAAd,CAAsB,iBAAtB,KAA4C,eAH9C;AAKA,QAAI,YAAJ;;AACA,QAAI,YAAJ,EAAkB;AAChB,MAAA,YAAY,GAAG,cAAc,CAAC,QAAD,EAAY,SAAZ,CAA7B;AACA,MAAA,eAAe,CAAC,YAAD,CAAf;AACA,MAAA,aAAa,CAAC,OAAd,CAAsB,KAAtB,GAA8B,YAA9B;AACA,MAAA,UAAU,CAAC,QAAQ,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAAT,CAAV;AACD;;AAED,QAAI,YAAY,IAAI,mBAApB,EAAyC;AACvC,MAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,CAAH,EAAM;AAAE,QAAA,KAAK,EAAE,YAAT;AAAuB,QAAA,YAAY,EAAE;AAArC,OAAN,CAAR;AACD;AACF,GAlBD;;AAoBA,EAAA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,SAApB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,eAAZ,IAA+B,GAA/B;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,eAAZ,IAA+B,GAA/B;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,eAAZ,IAA+B,YAA/B;AACA,EAAA,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;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,uBAAuB,CAAC,KAAK,CAAC,KAAN,CAAY,QAAb,EAAuB,iBAAvB,CAA9C;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,MAAZ,GAAqB,uBAAuB,CAAC,KAAK,CAAC,KAAN,CAAY,MAAb,EAAqB,UAArB,CAA5C;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,uBAAuB,CAAC,KAAK,CAAC,KAAN,CAAY,SAAb,EAAwB,aAAxB,CAA/C;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,OAAZ,GAAsB,uBAAuB,CAAC,KAAK,CAAC,KAAN,CAAY,OAAb,EAAsB,WAAtB,CAA7C;AAEA,EAAA,KAAK,CAAC,eAAN,CAAsB,WAAtB,GAAoC,uBAAuB,CACzD,wBADyD,EAEzD,KAAK,CAAC,eAAN,CAAsB,WAFmC,CAA3D;AAIA,EAAA,KAAK,CAAC,eAAN,CAAsB,SAAtB,GAAkC,uBAAuB,CAAC,KAAK,CAAC,eAAN,CAAsB,SAAvB,EAAkC,wBAAlC,CAAzD;AACA,EAAA,KAAK,CAAC,eAAN,CAAsB,YAAtB,GAAqC,uBAAuB,CAC1D,KAAK,CAAC,eAAN,CAAsB,YADoC,EAE1D,wBAF0D,CAA5D;AAKA,EAAA,KAAK,CAAC,eAAN,CAAsB,WAAtB,GAAoC,uBAAuB,CACzD,wBADyD,EAEzD,KAAK,CAAC,eAAN,CAAsB,WAFmC,CAA3D;AAIA,EAAA,KAAK,CAAC,eAAN,CAAsB,SAAtB,GAAkC,uBAAuB,CAAC,KAAK,CAAC,eAAN,CAAsB,SAAvB,EAAkC,wBAAlC,CAAzD;AACA,EAAA,KAAK,CAAC,eAAN,CAAsB,YAAtB,GAAqC,uBAAuB,CAC1D,KAAK,CAAC,eAAN,CAAsB,YADoC,EAE1D,wBAF0D,CAA5D;AAKA,SAAO,KAAP;AACD,CAlQM","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,:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fyhrops:hover,.fyhrops:focus-within::before{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover,.f8tv3r9:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover,:focus-within::before{border-right-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,:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1ipdth8:active,.f1ipdth8:focus-within::before{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f15r4wkl:active,.f15r4wkl:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active,:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}"],
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 SpinButtonStrings,\n} from './SpinButton';\n"],"sourceRoot":"../src/"}
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': strings.incrementButtonLabel.replace('{step}', step.toString())
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': strings.decrementButtonLabel.replace('{step}', step.toString())
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,:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fyhrops:hover,.fyhrops:focus-within::before{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover,.f8tv3r9:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover,:focus-within::before{border-right-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,:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1ipdth8:active,.f1ipdth8:focus-within::before{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f15r4wkl:active,.f15r4wkl:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active,:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}"],
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 SpinButtonStrings,\n} from './SpinButton';\n"],"sourceRoot":"../src/"}
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-20220512-0418.1",
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": "lib/index.d.ts",
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-20220512-0418.1",
32
- "@fluentui/react-label": "0.0.0-nightly-20220512-0418.1",
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.3",
37
- "@fluentui/keyboard-keys": "0.0.0-nightly-20220512-0418.1",
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-20220512-0418.1",
40
- "@fluentui/react-theme": "0.0.0-nightly-20220512-0418.1",
41
- "@fluentui/react-utilities": "0.0.0-nightly-20220512-0418.1",
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": {
@@ -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,2 +0,0 @@
1
- import type { SpinButtonStrings } from './SpinButton.types';
2
- export declare const spinButtonDefaultStrings: SpinButtonStrings;
@@ -1,5 +0,0 @@
1
- export const spinButtonDefaultStrings = {
2
- incrementButtonLabel: 'Increment by {step}',
3
- decrementButtonLabel: 'Decrement by {step}'
4
- };
5
- //# sourceMappingURL=SpinButton.strings.js.map
@@ -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,5 +0,0 @@
1
- export * from './SpinButton';
2
- export * from './SpinButton.types';
3
- export * from './renderSpinButton';
4
- export * from './useSpinButton';
5
- export * from './useSpinButtonStyles';
@@ -1,5 +0,0 @@
1
- import type { SpinButtonState } from './SpinButton.types';
2
- /**
3
- * Render the final JSX of SpinButton
4
- */
5
- export declare const renderSpinButton_unstable: (state: SpinButtonState) => JSX.Element;
@@ -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';
@@ -1 +0,0 @@
1
- export declare const clampWhenInRange: (oldValue: number, newValue: number, min?: number | undefined, max?: number | undefined) => number;
@@ -1,2 +0,0 @@
1
- import type { SpinButtonBounds } from '../SpinButton';
2
- export declare const getBound: (value: number, min?: number | undefined, max?: number | undefined) => SpinButtonBounds;
@@ -1,3 +0,0 @@
1
- export * from './clamp';
2
- export * from './getBound';
3
- export * from './precision';
@@ -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,2 +0,0 @@
1
- import type { SpinButtonStrings } from './SpinButton.types';
2
- export declare const spinButtonDefaultStrings: SpinButtonStrings;
@@ -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,5 +0,0 @@
1
- export * from './SpinButton';
2
- export * from './SpinButton.types';
3
- export * from './renderSpinButton';
4
- export * from './useSpinButton';
5
- export * from './useSpinButtonStyles';
@@ -1,5 +0,0 @@
1
- import type { SpinButtonState } from './SpinButton.types';
2
- /**
3
- * Render the final JSX of SpinButton
4
- */
5
- export declare const renderSpinButton_unstable: (state: SpinButtonState) => JSX.Element;
@@ -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;
@@ -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,2 +0,0 @@
1
- import type { SpinButtonBounds } from '../SpinButton';
2
- export declare const getBound: (value: number, min?: number | undefined, max?: number | undefined) => SpinButtonBounds;
@@ -1,3 +0,0 @@
1
- export * from './clamp';
2
- export * from './getBound';
3
- export * from './precision';
@@ -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;