@fluentui/react-spinbutton 9.0.0-beta.9 → 9.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) hide show
  1. package/CHANGELOG.json +558 -1
  2. package/CHANGELOG.md +163 -2
  3. package/README.md +4 -6
  4. package/dist/index.d.ts +49 -60
  5. package/lib/components/SpinButton/SpinButton.js.map +1 -1
  6. package/lib/components/SpinButton/SpinButton.types.js.map +1 -1
  7. package/lib/components/SpinButton/renderSpinButton.js.map +1 -1
  8. package/lib/components/SpinButton/useSpinButton.js +148 -111
  9. package/lib/components/SpinButton/useSpinButton.js.map +1 -1
  10. package/lib/components/SpinButton/useSpinButtonStyles.js +22 -16
  11. package/lib/components/SpinButton/useSpinButtonStyles.js.map +1 -1
  12. package/lib/index.js.map +1 -1
  13. package/lib/utils/clamp.js +6 -12
  14. package/lib/utils/clamp.js.map +1 -1
  15. package/lib/utils/getBound.js.map +1 -1
  16. package/lib/utils/precision.js.map +1 -1
  17. package/lib-commonjs/components/SpinButton/SpinButton.js.map +1 -1
  18. package/lib-commonjs/components/SpinButton/renderSpinButton.js.map +1 -1
  19. package/lib-commonjs/components/SpinButton/useSpinButton.js +146 -110
  20. package/lib-commonjs/components/SpinButton/useSpinButton.js.map +1 -1
  21. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js +22 -16
  22. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js.map +1 -1
  23. package/lib-commonjs/index.js.map +1 -1
  24. package/lib-commonjs/utils/clamp.js +10 -16
  25. package/lib-commonjs/utils/clamp.js.map +1 -1
  26. package/lib-commonjs/utils/getBound.js.map +1 -1
  27. package/lib-commonjs/utils/precision.js.map +1 -1
  28. package/package.json +13 -14
  29. package/lib/SpinButton.d.ts +0 -1
  30. package/lib/components/SpinButton/SpinButton.d.ts +0 -6
  31. package/lib/components/SpinButton/SpinButton.strings.d.ts +0 -2
  32. package/lib/components/SpinButton/SpinButton.strings.js +0 -5
  33. package/lib/components/SpinButton/SpinButton.strings.js.map +0 -1
  34. package/lib/components/SpinButton/SpinButton.types.d.ts +0 -141
  35. package/lib/components/SpinButton/index.d.ts +0 -5
  36. package/lib/components/SpinButton/renderSpinButton.d.ts +0 -5
  37. package/lib/components/SpinButton/useSpinButton.d.ts +0 -12
  38. package/lib/components/SpinButton/useSpinButtonStyles.d.ts +0 -7
  39. package/lib/index.d.ts +0 -2
  40. package/lib/tsdoc-metadata.json +0 -11
  41. package/lib/utils/clamp.d.ts +0 -1
  42. package/lib/utils/getBound.d.ts +0 -2
  43. package/lib/utils/index.d.ts +0 -3
  44. package/lib/utils/precision.d.ts +0 -14
  45. package/lib-commonjs/SpinButton.d.ts +0 -1
  46. package/lib-commonjs/components/SpinButton/SpinButton.d.ts +0 -6
  47. package/lib-commonjs/components/SpinButton/SpinButton.strings.d.ts +0 -2
  48. package/lib-commonjs/components/SpinButton/SpinButton.strings.js +0 -11
  49. package/lib-commonjs/components/SpinButton/SpinButton.strings.js.map +0 -1
  50. package/lib-commonjs/components/SpinButton/SpinButton.types.d.ts +0 -141
  51. package/lib-commonjs/components/SpinButton/index.d.ts +0 -5
  52. package/lib-commonjs/components/SpinButton/renderSpinButton.d.ts +0 -5
  53. package/lib-commonjs/components/SpinButton/useSpinButton.d.ts +0 -12
  54. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.d.ts +0 -7
  55. package/lib-commonjs/index.d.ts +0 -2
  56. package/lib-commonjs/utils/clamp.d.ts +0 -1
  57. package/lib-commonjs/utils/getBound.d.ts +0 -2
  58. package/lib-commonjs/utils/index.d.ts +0 -3
  59. package/lib-commonjs/utils/precision.d.ts +0 -14
@@ -1,141 +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
- export declare type SpinButtonCommons = {
27
- /**
28
- * Initial value of the control (assumed to be valid). Updates to this prop will not be respected.
29
- *
30
- * Use this if you intend for the SpinButton to be an uncontrolled component which maintains its
31
- * own value. For a controlled component, use `value` instead. (Mutually exclusive with `value`.)
32
- */
33
- defaultValue: number;
34
- /**
35
- * Current value of the control (assumed to be valid).
36
- *
37
- * Only provide this if the SpinButton is a controlled component where you are maintaining its
38
- * current state and passing updates based on change events; otherwise, use the `defaultValue`
39
- * property. (Mutually exclusive with `defaultValue`.)
40
- */
41
- value: 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
- * Min value of the control. If not provided, the control has no minimum value.
55
- */
56
- min: number;
57
- /**
58
- * Max value of the control. If not provided, the control has no maximum value.
59
- */
60
- max: number;
61
- /**
62
- * Difference between two adjacent values of the control.
63
- * This value is used to calculate the precision of the input if no `precision` is given.
64
- * The precision calculated this way will always be greater than or equal 0.
65
- * @default 1
66
- */
67
- step: number;
68
- /**
69
- * Large difference between two values. This should be greater than `step` and is used
70
- * when users hit the Page Up or Page Down keys.
71
- * @default 1
72
- */
73
- stepPage: number;
74
- /**
75
- * Callback for when the committed value changes.
76
- * - User presses the up/down buttons (on single press or every spin)
77
- * - User presses the up/down arrow keys (on single press or every spin)
78
- * - User *commits* edits to the input text by focusing away (blurring) or pressing enter.
79
- * Note that this is NOT called for every key press while the user is editing.
80
- */
81
- onChange: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;
82
- /**
83
- * How many decimal places the value should be rounded to.
84
- *
85
- * The default is calculated based on the precision of `step`: i.e. if step = 1, precision = 0.
86
- * step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.
87
- */
88
- precision: number;
89
- /**
90
- * Controls the colors and borders of the input.
91
- * @default 'outline'
92
- */
93
- appearance: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
94
- /**
95
- * Size of the input.
96
- * @default 'medium'
97
- */
98
- size: 'small' | 'medium';
99
- /**
100
- * Strings for localizing text in the control.
101
- */
102
- strings?: SpinButtonStrings;
103
- };
104
- /**
105
- * SpinButton Props
106
- */
107
- export declare type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlots>, 'input'>, 'onChange' | 'size'> & Partial<SpinButtonCommons>;
108
- /**
109
- * State used in rendering SpinButton
110
- */
111
- export declare type SpinButtonState = ComponentState<SpinButtonSlots> & Partial<SpinButtonCommons> & Pick<SpinButtonCommons, 'appearance' | 'size'> & {
112
- /**
113
- * State used to track which direction, if any, SpinButton is currently spinning.
114
- * @default 'rest'
115
- */
116
- spinState: SpinButtonSpinState;
117
- /**
118
- * State used to track if the value is at the range bounds of [min-max].
119
- * @default 'none'
120
- */
121
- atBound: SpinButtonBounds;
122
- };
123
- export declare type SpinButtonChangeEvent = React.MouseEvent<HTMLButtonElement> | React.ChangeEvent<HTMLElement> | React.FocusEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>;
124
- export declare type SpinButtonOnChangeData = {
125
- value?: number;
126
- displayValue?: string;
127
- };
128
- export declare type SpinButtonSpinState = 'rest' | 'up' | 'down';
129
- export declare type SpinButtonBounds = 'none' | 'min' | 'max' | 'both';
130
- export declare type SpinButtonStrings = {
131
- /**
132
- * Label applied to the increment button.
133
- * Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
134
- */
135
- incrementButtonLabel: string;
136
- /**
137
- * Label applied to the decrement button.
138
- * Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
139
- */
140
- decrementButtonLabel: string;
141
- };
@@ -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, SpinButtonCommons, SpinButtonProps, SpinButtonSlots, SpinButtonState, SpinButtonSpinState, SpinButtonBounds, SpinButtonStrings, } from './SpinButton';
@@ -1,11 +0,0 @@
1
- // This file is read by tools that parse documentation comments conforming to the TSDoc standard.
2
- // It should be published with your NPM package. It should not be tracked by Git.
3
- {
4
- "tsdocVersion": "0.12",
5
- "toolPackages": [
6
- {
7
- "packageName": "@microsoft/api-extractor",
8
- "packageVersion": "7.18.1"
9
- }
10
- ]
11
- }
@@ -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,141 +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
- export declare type SpinButtonCommons = {
27
- /**
28
- * Initial value of the control (assumed to be valid). Updates to this prop will not be respected.
29
- *
30
- * Use this if you intend for the SpinButton to be an uncontrolled component which maintains its
31
- * own value. For a controlled component, use `value` instead. (Mutually exclusive with `value`.)
32
- */
33
- defaultValue: number;
34
- /**
35
- * Current value of the control (assumed to be valid).
36
- *
37
- * Only provide this if the SpinButton is a controlled component where you are maintaining its
38
- * current state and passing updates based on change events; otherwise, use the `defaultValue`
39
- * property. (Mutually exclusive with `defaultValue`.)
40
- */
41
- value: 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
- * Min value of the control. If not provided, the control has no minimum value.
55
- */
56
- min: number;
57
- /**
58
- * Max value of the control. If not provided, the control has no maximum value.
59
- */
60
- max: number;
61
- /**
62
- * Difference between two adjacent values of the control.
63
- * This value is used to calculate the precision of the input if no `precision` is given.
64
- * The precision calculated this way will always be greater than or equal 0.
65
- * @default 1
66
- */
67
- step: number;
68
- /**
69
- * Large difference between two values. This should be greater than `step` and is used
70
- * when users hit the Page Up or Page Down keys.
71
- * @default 1
72
- */
73
- stepPage: number;
74
- /**
75
- * Callback for when the committed value changes.
76
- * - User presses the up/down buttons (on single press or every spin)
77
- * - User presses the up/down arrow keys (on single press or every spin)
78
- * - User *commits* edits to the input text by focusing away (blurring) or pressing enter.
79
- * Note that this is NOT called for every key press while the user is editing.
80
- */
81
- onChange: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;
82
- /**
83
- * How many decimal places the value should be rounded to.
84
- *
85
- * The default is calculated based on the precision of `step`: i.e. if step = 1, precision = 0.
86
- * step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.
87
- */
88
- precision: number;
89
- /**
90
- * Controls the colors and borders of the input.
91
- * @default 'outline'
92
- */
93
- appearance: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
94
- /**
95
- * Size of the input.
96
- * @default 'medium'
97
- */
98
- size: 'small' | 'medium';
99
- /**
100
- * Strings for localizing text in the control.
101
- */
102
- strings?: SpinButtonStrings;
103
- };
104
- /**
105
- * SpinButton Props
106
- */
107
- export declare type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlots>, 'input'>, 'onChange' | 'size'> & Partial<SpinButtonCommons>;
108
- /**
109
- * State used in rendering SpinButton
110
- */
111
- export declare type SpinButtonState = ComponentState<SpinButtonSlots> & Partial<SpinButtonCommons> & Pick<SpinButtonCommons, 'appearance' | 'size'> & {
112
- /**
113
- * State used to track which direction, if any, SpinButton is currently spinning.
114
- * @default 'rest'
115
- */
116
- spinState: SpinButtonSpinState;
117
- /**
118
- * State used to track if the value is at the range bounds of [min-max].
119
- * @default 'none'
120
- */
121
- atBound: SpinButtonBounds;
122
- };
123
- export declare type SpinButtonChangeEvent = React.MouseEvent<HTMLButtonElement> | React.ChangeEvent<HTMLElement> | React.FocusEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>;
124
- export declare type SpinButtonOnChangeData = {
125
- value?: number;
126
- displayValue?: string;
127
- };
128
- export declare type SpinButtonSpinState = 'rest' | 'up' | 'down';
129
- export declare type SpinButtonBounds = 'none' | 'min' | 'max' | 'both';
130
- export declare type SpinButtonStrings = {
131
- /**
132
- * Label applied to the increment button.
133
- * Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
134
- */
135
- incrementButtonLabel: string;
136
- /**
137
- * Label applied to the decrement button.
138
- * Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
139
- */
140
- decrementButtonLabel: string;
141
- };
@@ -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, SpinButtonCommons, 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;