@fluentui/react-spinbutton 0.0.0-nightly-20220623-0419.1 → 0.0.0-nightly-20220628-0417.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. package/CHANGELOG.json +68 -11
  2. package/CHANGELOG.md +24 -8
  3. package/lib/components/SpinButton/useSpinButton.js +4 -2
  4. package/lib/components/SpinButton/useSpinButton.js.map +1 -1
  5. package/lib/components/SpinButton/useSpinButtonStyles.js +9 -1
  6. package/lib/components/SpinButton/useSpinButtonStyles.js.map +1 -1
  7. package/lib-commonjs/components/SpinButton/useSpinButton.js +4 -2
  8. package/lib-commonjs/components/SpinButton/useSpinButton.js.map +1 -1
  9. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js +9 -1
  10. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js.map +1 -1
  11. package/package.json +8 -8
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-spinbutton",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 23 Jun 2022 04:31:19 GMT",
6
- "tag": "@fluentui/react-spinbutton_v0.0.0-nightly-20220623-0419.1",
7
- "version": "0.0.0-nightly-20220623-0419.1",
5
+ "date": "Tue, 28 Jun 2022 04:31:18 GMT",
6
+ "tag": "@fluentui/react-spinbutton_v0.0.0-nightly-20220628-0417.1",
7
+ "version": "0.0.0-nightly-20220628-0417.1",
8
8
  "comments": {
9
9
  "none": [
10
10
  {
@@ -21,35 +21,92 @@
21
21
  }
22
22
  ],
23
23
  "prerelease": [
24
+ {
25
+ "author": "lingfangao@hotmail.com",
26
+ "package": "@fluentui/react-spinbutton",
27
+ "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
28
+ "comment": "Update 9.0.0-rc dependencies to use caret range"
29
+ },
24
30
  {
25
31
  "author": "olfedias@microsoft.com",
26
32
  "package": "@fluentui/react-spinbutton",
27
33
  "commit": "82bd30dd41ad58df1f325e9b721200ed15d674a2",
28
34
  "comment": "chore: Update @fluentui/react-icons to latest version"
29
35
  },
36
+ {
37
+ "author": "lingfangao@hotmail.com",
38
+ "package": "@fluentui/react-spinbutton",
39
+ "commit": "675acea49c97f10837ddee9b8c4350ca27750125",
40
+ "comment": "Bump Griffel dependencies"
41
+ },
42
+ {
43
+ "author": "Humberto.Morimoto@microsoft.com",
44
+ "package": "@fluentui/react-spinbutton",
45
+ "commit": "2b4a2ac925ebb2baf990bec2c149b03eb298b872",
46
+ "comment": "fix: Making increment and decrement buttons of SpinButton have 'type=button' instead of 'type=submit'."
47
+ },
30
48
  {
31
49
  "author": "beachball",
32
50
  "package": "@fluentui/react-spinbutton",
33
- "comment": "Bump @fluentui/react-input to v0.0.0-nightly-20220623-0419.1",
34
- "commit": "9df169f017c97b7fe34f7b7618e4a29baf38b22b"
51
+ "comment": "Bump @fluentui/keyboard-keys to v0.0.0",
52
+ "commit": "3dd54b72d321c3345a21b4175ffe89e7c457c094"
35
53
  },
36
54
  {
37
55
  "author": "beachball",
38
56
  "package": "@fluentui/react-spinbutton",
39
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220623-0419.1",
40
- "commit": "9df169f017c97b7fe34f7b7618e4a29baf38b22b"
57
+ "comment": "Bump @fluentui/react-input to v0.0.0",
58
+ "commit": "3dd54b72d321c3345a21b4175ffe89e7c457c094"
59
+ },
60
+ {
61
+ "author": "beachball",
62
+ "package": "@fluentui/react-spinbutton",
63
+ "comment": "Bump @fluentui/react-theme to v0.0.0",
64
+ "commit": "3dd54b72d321c3345a21b4175ffe89e7c457c094"
65
+ },
66
+ {
67
+ "author": "beachball",
68
+ "package": "@fluentui/react-spinbutton",
69
+ "comment": "Bump @fluentui/react-utilities to v0.0.0",
70
+ "commit": "3dd54b72d321c3345a21b4175ffe89e7c457c094"
71
+ },
72
+ {
73
+ "author": "beachball",
74
+ "package": "@fluentui/react-spinbutton",
75
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220628-0417.1",
76
+ "commit": "3dd54b72d321c3345a21b4175ffe89e7c457c094"
77
+ },
78
+ {
79
+ "author": "beachball",
80
+ "package": "@fluentui/react-spinbutton",
81
+ "comment": "Bump @fluentui/react-label to v0.0.0",
82
+ "commit": "3dd54b72d321c3345a21b4175ffe89e7c457c094"
83
+ }
84
+ ]
85
+ }
86
+ },
87
+ {
88
+ "date": "Thu, 23 Jun 2022 14:25:31 GMT",
89
+ "tag": "@fluentui/react-spinbutton_v9.0.0-beta.14",
90
+ "version": "9.0.0-beta.14",
91
+ "comments": {
92
+ "prerelease": [
93
+ {
94
+ "author": "beachball",
95
+ "package": "@fluentui/react-spinbutton",
96
+ "comment": "Bump @fluentui/react-input to v9.0.0-rc.6",
97
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
41
98
  },
42
99
  {
43
100
  "author": "beachball",
44
101
  "package": "@fluentui/react-spinbutton",
45
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220623-0419.1",
46
- "commit": "9df169f017c97b7fe34f7b7618e4a29baf38b22b"
102
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
103
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
47
104
  },
48
105
  {
49
106
  "author": "beachball",
50
107
  "package": "@fluentui/react-spinbutton",
51
- "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220623-0419.1",
52
- "commit": "9df169f017c97b7fe34f7b7618e4a29baf38b22b"
108
+ "comment": "Bump @fluentui/react-label to v9.0.0-rc.6",
109
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
53
110
  }
54
111
  ]
55
112
  }
package/CHANGELOG.md CHANGED
@@ -1,21 +1,37 @@
1
1
  # Change Log - @fluentui/react-spinbutton
2
2
 
3
- This log was last generated on Thu, 23 Jun 2022 04:31:19 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 28 Jun 2022 04:31:18 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20220623-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v0.0.0-nightly-20220623-0419.1)
7
+ ## [0.0.0-nightly-20220628-0417.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v0.0.0-nightly-20220628-0417.1)
8
8
 
9
- Thu, 23 Jun 2022 04:31:19 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.13..@fluentui/react-spinbutton_v0.0.0-nightly-20220623-0419.1)
9
+ Tue, 28 Jun 2022 04:31:18 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.14..@fluentui/react-spinbutton_v0.0.0-nightly-20220628-0417.1)
11
11
 
12
12
  ### Changes
13
13
 
14
+ - Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
14
15
  - chore: Update @fluentui/react-icons to latest version ([PR #23459](https://github.com/microsoft/fluentui/pull/23459) by olfedias@microsoft.com)
15
- - Bump @fluentui/react-input to v0.0.0-nightly-20220623-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/9df169f017c97b7fe34f7b7618e4a29baf38b22b) by beachball)
16
- - Bump @fluentui/react-theme to v0.0.0-nightly-20220623-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/9df169f017c97b7fe34f7b7618e4a29baf38b22b) by beachball)
17
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20220623-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/9df169f017c97b7fe34f7b7618e4a29baf38b22b) by beachball)
18
- - Bump @fluentui/react-label to v0.0.0-nightly-20220623-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/9df169f017c97b7fe34f7b7618e4a29baf38b22b) by beachball)
16
+ - Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
17
+ - fix: Making increment and decrement buttons of SpinButton have 'type=button' instead of 'type=submit'. ([PR #23710](https://github.com/microsoft/fluentui/pull/23710) by Humberto.Morimoto@microsoft.com)
18
+ - Bump @fluentui/keyboard-keys to v0.0.0 ([commit](https://github.com/microsoft/fluentui/commit/3dd54b72d321c3345a21b4175ffe89e7c457c094) by beachball)
19
+ - Bump @fluentui/react-input to v0.0.0 ([commit](https://github.com/microsoft/fluentui/commit/3dd54b72d321c3345a21b4175ffe89e7c457c094) by beachball)
20
+ - Bump @fluentui/react-theme to v0.0.0 ([commit](https://github.com/microsoft/fluentui/commit/3dd54b72d321c3345a21b4175ffe89e7c457c094) by beachball)
21
+ - Bump @fluentui/react-utilities to v0.0.0 ([commit](https://github.com/microsoft/fluentui/commit/3dd54b72d321c3345a21b4175ffe89e7c457c094) by beachball)
22
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220628-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/3dd54b72d321c3345a21b4175ffe89e7c457c094) by beachball)
23
+ - Bump @fluentui/react-label to v0.0.0 ([commit](https://github.com/microsoft/fluentui/commit/3dd54b72d321c3345a21b4175ffe89e7c457c094) by beachball)
24
+
25
+ ## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.14)
26
+
27
+ Thu, 23 Jun 2022 14:25:31 GMT
28
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.13..@fluentui/react-spinbutton_v9.0.0-beta.14)
29
+
30
+ ### Changes
31
+
32
+ - Bump @fluentui/react-input to v9.0.0-rc.6 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
33
+ - Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
34
+ - Bump @fluentui/react-label to v9.0.0-rc.6 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
19
35
 
20
36
  ## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.13)
21
37
 
package/lib/components/SpinButton/useSpinButton.js CHANGED
@@ -95,7 +95,8 @@ export const useSpinButton_unstable = (props, ref) => {
95
95
  tabIndex: -1,
96
96
  children: /*#__PURE__*/React.createElement(ChevronUp16Regular, null),
97
97
  disabled: nativeProps.primary.disabled,
98
- 'aria-label': 'Increment value'
98
+ 'aria-label': 'Increment value',
99
+ type: 'button'
99
100
  }
100
101
  }),
101
102
  decrementButton: resolveShorthand(decrementButton, {
@@ -104,7 +105,8 @@ export const useSpinButton_unstable = (props, ref) => {
104
105
  tabIndex: -1,
105
106
  children: /*#__PURE__*/React.createElement(ChevronDown16Regular, null),
106
107
  disabled: nativeProps.primary.disabled,
107
- 'aria-label': 'Decrement value'
108
+ 'aria-label': 'Decrement value',
109
+ type: 'button'
108
110
  }
109
111
  })
110
112
  };
package/lib/components/SpinButton/useSpinButton.js.map CHANGED
@@ -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 { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\n\ntype InternalState = {\n value: number | null;\n spinState: SpinButtonSpinState;\n spinTime: number;\n spinDelay: number;\n previousTextValue?: string;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the state required to render SpinButton.\n *\n * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,\n * before being passed to renderSpinButton_unstable.\n *\n * @param props - props from this instance of SpinButton\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>): SpinButtonState => {\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],\n });\n\n const {\n value,\n displayValue,\n defaultValue,\n min,\n max,\n step = 1,\n stepPage = 1,\n precision: precisionFromProps,\n onChange,\n size = 'medium',\n appearance = 'outline',\n root,\n input,\n incrementButton,\n decrementButton,\n } = props;\n\n const precision = React.useMemo(() => {\n return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n }, [precisionFromProps, step]);\n\n const [currentValue, setCurrentValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: 0,\n });\n const [textValue, setTextValue] = React.useState(\n value !== undefined && displayValue !== undefined ? displayValue : String(currentValue),\n );\n const [spinState, setSpinState] = React.useState<SpinButtonSpinState>('rest');\n const [atBound, setAtBound] = React.useState<SpinButtonBounds>('none');\n\n const internalState = React.useRef<InternalState>({\n value: currentValue,\n spinState,\n spinTime: 0,\n spinDelay: DEFAULT_SPIN_DELAY_MS,\n });\n\n const state: SpinButtonState = {\n size,\n appearance,\n spinState,\n atBound,\n\n components: {\n root: 'span',\n input: 'input',\n incrementButton: 'button',\n decrementButton: 'button',\n },\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n ref,\n autoComplete: 'off',\n role: 'spinbutton',\n appearance: appearance,\n type: 'text',\n ...nativeProps.primary,\n },\n }),\n incrementButton: resolveShorthand(incrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronUp16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Increment value',\n },\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 === null || currentValue === null) {\n newTextValue = displayValue ?? '';\n internalState.current.value = null;\n setAtBound('none');\n } else if (value !== undefined) {\n const roundedValue = precisionRound(value, precision);\n newTextValue = displayValue ?? String(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n } else {\n const roundedValue = precisionRound(currentValue, precision);\n newTextValue = String(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n }\n setTextValue(newTextValue);\n }, [value, displayValue, currentValue, precision, setAtBound, min, max]);\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!internalState.current.previousTextValue) {\n internalState.current.previousTextValue = textValue;\n }\n\n const newValue = e.target.value;\n setTextValue(newValue);\n };\n\n const stepValue = (e: SpinButtonChangeEvent, direction: 'up' | 'down' | 'upPage' | 'downPage') => {\n const val = internalState.current.value;\n const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n if (val === null) {\n const stepStart = min === undefined ? 0 : min;\n const nullStep = clamp(stepStart + stepSize * dir, min, max);\n commit(e, nullStep);\n return;\n }\n\n let newValue = val + stepSize * dir;\n if (!Number.isNaN(newValue)) {\n newValue = clamp(newValue, min, max);\n }\n\n commit(e, newValue);\n\n if (internalState.current.spinState !== 'rest') {\n setStepTimeout(() => {\n // Ease the step speed a bit\n internalState.current.spinTime += internalState.current.spinDelay;\n internalState.current.spinDelay = lerp(\n DEFAULT_SPIN_DELAY_MS,\n MIN_SPIN_DELAY_MS,\n internalState.current.spinTime / MAX_SPIN_TIME_MS,\n );\n stepValue(e, direction);\n }, internalState.current.spinDelay);\n }\n };\n\n const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'up';\n stepValue(e, 'up');\n };\n\n const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'down';\n stepValue(e, 'down');\n };\n\n const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n clearStepTimeout();\n internalState.current.spinState = 'rest';\n internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n internalState.current.spinTime = 0;\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === Keys.ArrowUp) {\n stepValue(e, 'up');\n setSpinState('up');\n } else if (e.key === Keys.ArrowDown) {\n stepValue(e, 'down');\n setSpinState('down');\n } else if (e.key === Keys.PageUp) {\n e.preventDefault();\n stepValue(e, 'upPage');\n setSpinState('up');\n } else if (e.key === Keys.PageDown) {\n e.preventDefault();\n stepValue(e, 'downPage');\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {\n commit(e, min);\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {\n commit(e, max);\n setSpinState('up');\n } else if (e.key === Keys.Enter) {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n setSpinState('rest');\n } else if (e.key === Keys.Escape) {\n if (internalState.current.previousTextValue) {\n setTextValue(internalState.current.previousTextValue);\n internalState.current.previousTextValue = undefined;\n }\n setSpinState('rest');\n } else {\n setSpinState('rest');\n }\n };\n\n const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n setSpinState('rest');\n };\n\n const commit = (e: SpinButtonChangeEvent, newValue?: number | null, newDisplayValue?: string) => {\n const valueChanged = newValue !== undefined && currentValue !== newValue;\n const displayValueChanged =\n newDisplayValue !== undefined &&\n internalState.current.previousTextValue !== undefined &&\n internalState.current.previousTextValue !== newDisplayValue;\n\n let roundedValue;\n if (valueChanged) {\n roundedValue = precisionRound(newValue!, precision);\n setCurrentValue(roundedValue);\n }\n\n if (valueChanged || displayValueChanged) {\n onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n }\n };\n\n state.input.value = textValue;\n state.input['aria-valuemin'] = min;\n state.input['aria-valuemax'] = max;\n state.input['aria-valuenow'] = currentValue ?? undefined;\n state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n state.input.onChange = useMergedEventCallbacks(state.input.onChange, handleInputChange);\n state.input.onBlur = useMergedEventCallbacks(state.input.onBlur, handleBlur);\n state.input.onKeyDown = useMergedEventCallbacks(state.input.onKeyDown, handleKeyDown);\n state.input.onKeyUp = useMergedEventCallbacks(state.input.onKeyUp, handleKeyUp);\n\n state.incrementButton.onMouseDown = useMergedEventCallbacks(\n handleIncrementMouseDown,\n state.incrementButton.onMouseDown,\n );\n state.incrementButton.onMouseUp = useMergedEventCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.incrementButton.onMouseLeave = useMergedEventCallbacks(\n state.incrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n state.decrementButton.onMouseDown = useMergedEventCallbacks(\n handleDecrementMouseDown,\n state.decrementButton.onMouseDown,\n );\n state.decrementButton.onMouseUp = useMergedEventCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.decrementButton.onMouseLeave = useMergedEventCallbacks(\n state.decrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/SpinButton/useSpinButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useMergedEventCallbacks,\n useTimeout,\n} from '@fluentui/react-utilities';\nimport * as Keys from '@fluentui/keyboard-keys';\nimport {\n SpinButtonProps,\n SpinButtonState,\n SpinButtonSpinState,\n SpinButtonChangeEvent,\n SpinButtonBounds,\n} from './SpinButton.types';\nimport { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\n\ntype InternalState = {\n value: number | null;\n spinState: SpinButtonSpinState;\n spinTime: number;\n spinDelay: number;\n previousTextValue?: string;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the state required to render SpinButton.\n *\n * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,\n * before being passed to renderSpinButton_unstable.\n *\n * @param props - props from this instance of SpinButton\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>): SpinButtonState => {\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],\n });\n\n const {\n value,\n displayValue,\n defaultValue,\n min,\n max,\n step = 1,\n stepPage = 1,\n precision: precisionFromProps,\n onChange,\n size = 'medium',\n appearance = 'outline',\n root,\n input,\n incrementButton,\n decrementButton,\n } = props;\n\n const precision = React.useMemo(() => {\n return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n }, [precisionFromProps, step]);\n\n const [currentValue, setCurrentValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: 0,\n });\n const [textValue, setTextValue] = React.useState(\n value !== undefined && displayValue !== undefined ? displayValue : String(currentValue),\n );\n const [spinState, setSpinState] = React.useState<SpinButtonSpinState>('rest');\n const [atBound, setAtBound] = React.useState<SpinButtonBounds>('none');\n\n const internalState = React.useRef<InternalState>({\n value: currentValue,\n spinState,\n spinTime: 0,\n spinDelay: DEFAULT_SPIN_DELAY_MS,\n });\n\n const state: SpinButtonState = {\n size,\n appearance,\n spinState,\n atBound,\n\n components: {\n root: 'span',\n input: 'input',\n incrementButton: 'button',\n decrementButton: 'button',\n },\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n ref,\n autoComplete: 'off',\n role: 'spinbutton',\n appearance: appearance,\n type: 'text',\n ...nativeProps.primary,\n },\n }),\n incrementButton: resolveShorthand(incrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronUp16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Increment value',\n type: 'button',\n },\n }),\n decrementButton: resolveShorthand(decrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronDown16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Decrement value',\n type: 'button',\n },\n }),\n };\n\n const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n React.useEffect(() => {\n let newTextValue;\n if (value === null || currentValue === null) {\n newTextValue = displayValue ?? '';\n internalState.current.value = null;\n setAtBound('none');\n } else if (value !== undefined) {\n const roundedValue = precisionRound(value, precision);\n newTextValue = displayValue ?? String(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n } else {\n const roundedValue = precisionRound(currentValue, precision);\n newTextValue = String(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n }\n setTextValue(newTextValue);\n }, [value, displayValue, currentValue, precision, setAtBound, min, max]);\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!internalState.current.previousTextValue) {\n internalState.current.previousTextValue = textValue;\n }\n\n const newValue = e.target.value;\n setTextValue(newValue);\n };\n\n const stepValue = (e: SpinButtonChangeEvent, direction: 'up' | 'down' | 'upPage' | 'downPage') => {\n const val = internalState.current.value;\n const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n if (val === null) {\n const stepStart = min === undefined ? 0 : min;\n const nullStep = clamp(stepStart + stepSize * dir, min, max);\n commit(e, nullStep);\n return;\n }\n\n let newValue = val + stepSize * dir;\n if (!Number.isNaN(newValue)) {\n newValue = clamp(newValue, min, max);\n }\n\n commit(e, newValue);\n\n if (internalState.current.spinState !== 'rest') {\n setStepTimeout(() => {\n // Ease the step speed a bit\n internalState.current.spinTime += internalState.current.spinDelay;\n internalState.current.spinDelay = lerp(\n DEFAULT_SPIN_DELAY_MS,\n MIN_SPIN_DELAY_MS,\n internalState.current.spinTime / MAX_SPIN_TIME_MS,\n );\n stepValue(e, direction);\n }, internalState.current.spinDelay);\n }\n };\n\n const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'up';\n stepValue(e, 'up');\n };\n\n const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'down';\n stepValue(e, 'down');\n };\n\n const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n clearStepTimeout();\n internalState.current.spinState = 'rest';\n internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n internalState.current.spinTime = 0;\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === Keys.ArrowUp) {\n stepValue(e, 'up');\n setSpinState('up');\n } else if (e.key === Keys.ArrowDown) {\n stepValue(e, 'down');\n setSpinState('down');\n } else if (e.key === Keys.PageUp) {\n e.preventDefault();\n stepValue(e, 'upPage');\n setSpinState('up');\n } else if (e.key === Keys.PageDown) {\n e.preventDefault();\n stepValue(e, 'downPage');\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {\n commit(e, min);\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {\n commit(e, max);\n setSpinState('up');\n } else if (e.key === Keys.Enter) {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n setSpinState('rest');\n } else if (e.key === Keys.Escape) {\n if (internalState.current.previousTextValue) {\n setTextValue(internalState.current.previousTextValue);\n internalState.current.previousTextValue = undefined;\n }\n setSpinState('rest');\n } else {\n setSpinState('rest');\n }\n };\n\n const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n setSpinState('rest');\n };\n\n const commit = (e: SpinButtonChangeEvent, newValue?: number | null, newDisplayValue?: string) => {\n const valueChanged = newValue !== undefined && currentValue !== newValue;\n const displayValueChanged =\n newDisplayValue !== undefined &&\n internalState.current.previousTextValue !== undefined &&\n internalState.current.previousTextValue !== newDisplayValue;\n\n let roundedValue;\n if (valueChanged) {\n roundedValue = precisionRound(newValue!, precision);\n setCurrentValue(roundedValue);\n }\n\n if (valueChanged || displayValueChanged) {\n onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n }\n };\n\n state.input.value = textValue;\n state.input['aria-valuemin'] = min;\n state.input['aria-valuemax'] = max;\n state.input['aria-valuenow'] = currentValue ?? undefined;\n state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n state.input.onChange = useMergedEventCallbacks(state.input.onChange, handleInputChange);\n state.input.onBlur = useMergedEventCallbacks(state.input.onBlur, handleBlur);\n state.input.onKeyDown = useMergedEventCallbacks(state.input.onKeyDown, handleKeyDown);\n state.input.onKeyUp = useMergedEventCallbacks(state.input.onKeyUp, handleKeyUp);\n\n state.incrementButton.onMouseDown = useMergedEventCallbacks(\n handleIncrementMouseDown,\n state.incrementButton.onMouseDown,\n );\n state.incrementButton.onMouseUp = useMergedEventCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.incrementButton.onMouseLeave = useMergedEventCallbacks(\n state.incrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n state.decrementButton.onMouseDown = useMergedEventCallbacks(\n handleDecrementMouseDown,\n state.decrementButton.onMouseDown,\n );\n state.decrementButton.onMouseUp = useMergedEventCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.decrementButton.onMouseLeave = useMergedEventCallbacks(\n state.decrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/components/SpinButton/useSpinButtonStyles.js CHANGED
@@ -147,7 +147,15 @@ const useRootStyles = /*#__PURE__*/__styles({
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
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
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
- "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;}}"]
150
+ "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
151
+ "m": "(forced-colors: active)"
152
+ }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
153
+ "m": "(forced-colors: active)"
154
+ }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
155
+ "m": "(forced-colors: active)"
156
+ }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
157
+ "m": "(forced-colors: active)"
158
+ }]]
151
159
  });
152
160
 
153
161
  const useInputStyles = /*#__PURE__*/__styles({
package/lib/components/SpinButton/useSpinButtonStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridTemplateColumns: `1fr 24px`,\n gridTemplateRows: '1fr 1fr',\n columnGap: tokens.spacingHorizontalXS,\n rowGap: 0,\n paddingRight: 0,\n position: 'relative',\n // Remove the border styles from react-input\n ...shorthands.border('0'),\n isolation: 'isolate',\n\n // Apply border styles on the ::before pseudo element.\n // We cannot use ::after since react-input uses that\n // for the selector styles.\n // Using the pseudo element allows us to place the border\n // above content in the component which ensures the buttons\n // line up visually with the border as expected. Without this\n // there is a bit of a gap which can become very noticeable\n // at high zoom or when OS zoom levels are not divisible by 2\n // (e.g., 150% on Windows in Firefox)\n // This is most noticeable on the \"outline\" appearance which is\n // also the default so it feels worth the extra ceremony to get right.\n '::before': {\n content: '\"\"',\n boxSizing: 'border-box',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n pointerEvents: 'none',\n zIndex: 10,\n },\n\n '::after': {\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: 20,\n },\n },\n\n outline: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n\n outlineInteractive: {\n ':hover': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n underline: {\n '::before': {\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n },\n\n underlineInteractive: {\n ':hover': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n filled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n },\n\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n '::before': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n outlineDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n },\n },\n\n underlineDisabled: {\n '::before': {\n ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n },\n },\n\n filledDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n gridColumnStart: '1',\n gridColumnEnd: '2',\n gridRowStart: '1',\n gridRowEnd: '3',\n outlineStyle: 'none',\n ...shorthands.padding(0),\n },\n});\n\nconst useButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n width: '24px',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.border(0),\n position: 'absolute',\n\n outlineStyle: 'none',\n height: '100%',\n\n ':enabled:hover': {\n cursor: 'pointer',\n },\n\n ':active': {\n outlineStyle: 'none',\n },\n\n ':disabled': {\n cursor: 'not-allowed',\n },\n },\n\n incrementButton: {\n gridColumnStart: '2',\n gridColumnEnd: '3',\n gridRowStart: '1',\n gridRowEnd: '2',\n ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n },\n\n // TODO: revisit these padding numbers for aligning the icon.\n // Padding values aren't perfect.\n // The icon doesn't align perfectly with the Figma designs.\n // It's set in a 16x16px square but the artwork is inset from that\n // so I've had to compute the numbers by handle.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n ...shorthands.padding('3px', '5px', '0px', '5px'),\n },\n\n incrementButtonMedium: {\n ...shorthands.padding('4px', '5px', '1px', '5px'),\n },\n\n decrementButton: {\n gridColumnStart: '2',\n gridColumnEnd: '3',\n gridRowStart: '2',\n gridRowEnd: '3',\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n },\n\n decrementButtonSmall: {\n ...shorthands.padding('0px', '5px', '3px', '5px'),\n },\n\n decrementButtonMedium: {\n ...shorthands.padding('1px', '5px', '4px', '5px'),\n },\n\n outline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n underline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-darker': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-lighter': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n base: {\n cursor: 'not-allowed',\n\n ':hover': {\n cursor: 'not-allowed',\n },\n },\n\n outline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n underline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-darker': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-lighter': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n const { appearance, atBound, size } = state;\n const disabled = state.input.disabled;\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const buttonStyles = useButtonStyles();\n const buttonDisabledStyles = useButtonDisabledStyles();\n const inputStyles = useInputStyles();\n\n // Grab the root className here so we can be sure to merge is last\n const rootClassName = state.root.className;\n state.root.className = undefined;\n // Reuse react-input's styles without re-using the Input component.\n useInputStyles_unstable({\n size,\n appearance,\n input: state.input,\n root: state.root,\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n });\n\n state.root.className = mergeClasses(\n state.root.className, // Get the classes from useInputStyles_unstable\n spinButtonClassNames.root,\n rootStyles.base,\n appearance === 'outline' && rootStyles.outline,\n appearance === 'underline' && rootStyles.underline,\n filled && rootStyles.filled,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n disabled && rootStyles.disabled,\n disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n disabled && filled && rootStyles.filledDisabled,\n rootClassName, // Make sure any original class name is applied last\n );\n\n state.incrementButton.className = mergeClasses(\n spinButtonClassNames.incrementButton,\n state.spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n buttonStyles.base,\n buttonStyles.incrementButton,\n buttonStyles[appearance],\n size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.incrementButton.className,\n );\n state.decrementButton.className = mergeClasses(\n spinButtonClassNames.decrementButton,\n state.spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n buttonStyles.base,\n buttonStyles.decrementButton,\n buttonStyles[appearance],\n size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.decrementButton.className,\n );\n\n state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridTemplateColumns: `1fr 24px`,\n gridTemplateRows: '1fr 1fr',\n columnGap: tokens.spacingHorizontalXS,\n rowGap: 0,\n paddingRight: 0,\n position: 'relative',\n // Remove the border styles from react-input\n ...shorthands.border('0'),\n isolation: 'isolate',\n\n // Apply border styles on the ::before pseudo element.\n // We cannot use ::after since react-input uses that\n // for the selector styles.\n // Using the pseudo element allows us to place the border\n // above content in the component which ensures the buttons\n // line up visually with the border as expected. Without this\n // there is a bit of a gap which can become very noticeable\n // at high zoom or when OS zoom levels are not divisible by 2\n // (e.g., 150% on Windows in Firefox)\n // This is most noticeable on the \"outline\" appearance which is\n // also the default so it feels worth the extra ceremony to get right.\n '::before': {\n content: '\"\"',\n boxSizing: 'border-box',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n pointerEvents: 'none',\n zIndex: 10,\n },\n\n '::after': {\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: 20,\n },\n },\n\n outline: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n\n outlineInteractive: {\n ':hover': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n underline: {\n '::before': {\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n },\n\n underlineInteractive: {\n ':hover': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n filled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n },\n\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n '::before': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n outlineDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n },\n },\n\n underlineDisabled: {\n '::before': {\n ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n },\n },\n\n filledDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n gridColumnStart: '1',\n gridColumnEnd: '2',\n gridRowStart: '1',\n gridRowEnd: '3',\n outlineStyle: 'none',\n ...shorthands.padding(0),\n },\n});\n\nconst useButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n width: '24px',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.border(0),\n position: 'absolute',\n\n outlineStyle: 'none',\n height: '100%',\n\n ':enabled:hover': {\n cursor: 'pointer',\n },\n\n ':active': {\n outlineStyle: 'none',\n },\n\n ':disabled': {\n cursor: 'not-allowed',\n },\n },\n\n incrementButton: {\n gridColumnStart: '2',\n gridColumnEnd: '3',\n gridRowStart: '1',\n gridRowEnd: '2',\n ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n },\n\n // TODO: revisit these padding numbers for aligning the icon.\n // Padding values aren't perfect.\n // The icon doesn't align perfectly with the Figma designs.\n // It's set in a 16x16px square but the artwork is inset from that\n // so I've had to compute the numbers by handle.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n ...shorthands.padding('3px', '5px', '0px', '5px'),\n },\n\n incrementButtonMedium: {\n ...shorthands.padding('4px', '5px', '1px', '5px'),\n },\n\n decrementButton: {\n gridColumnStart: '2',\n gridColumnEnd: '3',\n gridRowStart: '2',\n gridRowEnd: '3',\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n },\n\n decrementButtonSmall: {\n ...shorthands.padding('0px', '5px', '3px', '5px'),\n },\n\n decrementButtonMedium: {\n ...shorthands.padding('1px', '5px', '4px', '5px'),\n },\n\n outline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n underline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-darker': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-lighter': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n base: {\n cursor: 'not-allowed',\n\n ':hover': {\n cursor: 'not-allowed',\n },\n },\n\n outline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n underline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-darker': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-lighter': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n const { appearance, atBound, size } = state;\n const disabled = state.input.disabled;\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const buttonStyles = useButtonStyles();\n const buttonDisabledStyles = useButtonDisabledStyles();\n const inputStyles = useInputStyles();\n\n // Grab the root className here so we can be sure to merge is last\n const rootClassName = state.root.className;\n state.root.className = undefined;\n // Reuse react-input's styles without re-using the Input component.\n useInputStyles_unstable({\n size,\n appearance,\n input: state.input,\n root: state.root,\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n });\n\n state.root.className = mergeClasses(\n state.root.className, // Get the classes from useInputStyles_unstable\n spinButtonClassNames.root,\n rootStyles.base,\n appearance === 'outline' && rootStyles.outline,\n appearance === 'underline' && rootStyles.underline,\n filled && rootStyles.filled,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n disabled && rootStyles.disabled,\n disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n disabled && filled && rootStyles.filledDisabled,\n rootClassName, // Make sure any original class name is applied last\n );\n\n state.incrementButton.className = mergeClasses(\n spinButtonClassNames.incrementButton,\n state.spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n buttonStyles.base,\n buttonStyles.incrementButton,\n buttonStyles[appearance],\n size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.incrementButton.className,\n );\n state.decrementButton.className = mergeClasses(\n spinButtonClassNames.decrementButton,\n state.spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n buttonStyles.base,\n buttonStyles.decrementButton,\n buttonStyles[appearance],\n size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.decrementButton.className,\n );\n\n state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/SpinButton/useSpinButton.js CHANGED
@@ -107,7 +107,8 @@ const useSpinButton_unstable = (props, ref) => {
107
107
  tabIndex: -1,
108
108
  children: React.createElement(react_icons_1.ChevronUp16Regular, null),
109
109
  disabled: nativeProps.primary.disabled,
110
- 'aria-label': 'Increment value'
110
+ 'aria-label': 'Increment value',
111
+ type: 'button'
111
112
  }
112
113
  }),
113
114
  decrementButton: react_utilities_1.resolveShorthand(decrementButton, {
@@ -116,7 +117,8 @@ const useSpinButton_unstable = (props, ref) => {
116
117
  tabIndex: -1,
117
118
  children: React.createElement(react_icons_1.ChevronDown16Regular, null),
118
119
  disabled: nativeProps.primary.disabled,
119
- 'aria-label': 'Decrement value'
120
+ 'aria-label': 'Decrement value',
121
+ type: 'button'
120
122
  }
121
123
  })
122
124
  };
package/lib-commonjs/components/SpinButton/useSpinButton.js.map CHANGED
@@ -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 { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\n\ntype InternalState = {\n value: number | null;\n spinState: SpinButtonSpinState;\n spinTime: number;\n spinDelay: number;\n previousTextValue?: string;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the state required to render SpinButton.\n *\n * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,\n * before being passed to renderSpinButton_unstable.\n *\n * @param props - props from this instance of SpinButton\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>): SpinButtonState => {\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],\n });\n\n const {\n value,\n displayValue,\n defaultValue,\n min,\n max,\n step = 1,\n stepPage = 1,\n precision: precisionFromProps,\n onChange,\n size = 'medium',\n appearance = 'outline',\n root,\n input,\n incrementButton,\n decrementButton,\n } = props;\n\n const precision = React.useMemo(() => {\n return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n }, [precisionFromProps, step]);\n\n const [currentValue, setCurrentValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: 0,\n });\n const [textValue, setTextValue] = React.useState(\n value !== undefined && displayValue !== undefined ? displayValue : String(currentValue),\n );\n const [spinState, setSpinState] = React.useState<SpinButtonSpinState>('rest');\n const [atBound, setAtBound] = React.useState<SpinButtonBounds>('none');\n\n const internalState = React.useRef<InternalState>({\n value: currentValue,\n spinState,\n spinTime: 0,\n spinDelay: DEFAULT_SPIN_DELAY_MS,\n });\n\n const state: SpinButtonState = {\n size,\n appearance,\n spinState,\n atBound,\n\n components: {\n root: 'span',\n input: 'input',\n incrementButton: 'button',\n decrementButton: 'button',\n },\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n ref,\n autoComplete: 'off',\n role: 'spinbutton',\n appearance: appearance,\n type: 'text',\n ...nativeProps.primary,\n },\n }),\n incrementButton: resolveShorthand(incrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronUp16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Increment value',\n },\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 === null || currentValue === null) {\n newTextValue = displayValue ?? '';\n internalState.current.value = null;\n setAtBound('none');\n } else if (value !== undefined) {\n const roundedValue = precisionRound(value, precision);\n newTextValue = displayValue ?? String(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n } else {\n const roundedValue = precisionRound(currentValue, precision);\n newTextValue = String(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n }\n setTextValue(newTextValue);\n }, [value, displayValue, currentValue, precision, setAtBound, min, max]);\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!internalState.current.previousTextValue) {\n internalState.current.previousTextValue = textValue;\n }\n\n const newValue = e.target.value;\n setTextValue(newValue);\n };\n\n const stepValue = (e: SpinButtonChangeEvent, direction: 'up' | 'down' | 'upPage' | 'downPage') => {\n const val = internalState.current.value;\n const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n if (val === null) {\n const stepStart = min === undefined ? 0 : min;\n const nullStep = clamp(stepStart + stepSize * dir, min, max);\n commit(e, nullStep);\n return;\n }\n\n let newValue = val + stepSize * dir;\n if (!Number.isNaN(newValue)) {\n newValue = clamp(newValue, min, max);\n }\n\n commit(e, newValue);\n\n if (internalState.current.spinState !== 'rest') {\n setStepTimeout(() => {\n // Ease the step speed a bit\n internalState.current.spinTime += internalState.current.spinDelay;\n internalState.current.spinDelay = lerp(\n DEFAULT_SPIN_DELAY_MS,\n MIN_SPIN_DELAY_MS,\n internalState.current.spinTime / MAX_SPIN_TIME_MS,\n );\n stepValue(e, direction);\n }, internalState.current.spinDelay);\n }\n };\n\n const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'up';\n stepValue(e, 'up');\n };\n\n const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'down';\n stepValue(e, 'down');\n };\n\n const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n clearStepTimeout();\n internalState.current.spinState = 'rest';\n internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n internalState.current.spinTime = 0;\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === Keys.ArrowUp) {\n stepValue(e, 'up');\n setSpinState('up');\n } else if (e.key === Keys.ArrowDown) {\n stepValue(e, 'down');\n setSpinState('down');\n } else if (e.key === Keys.PageUp) {\n e.preventDefault();\n stepValue(e, 'upPage');\n setSpinState('up');\n } else if (e.key === Keys.PageDown) {\n e.preventDefault();\n stepValue(e, 'downPage');\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {\n commit(e, min);\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {\n commit(e, max);\n setSpinState('up');\n } else if (e.key === Keys.Enter) {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n setSpinState('rest');\n } else if (e.key === Keys.Escape) {\n if (internalState.current.previousTextValue) {\n setTextValue(internalState.current.previousTextValue);\n internalState.current.previousTextValue = undefined;\n }\n setSpinState('rest');\n } else {\n setSpinState('rest');\n }\n };\n\n const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n setSpinState('rest');\n };\n\n const commit = (e: SpinButtonChangeEvent, newValue?: number | null, newDisplayValue?: string) => {\n const valueChanged = newValue !== undefined && currentValue !== newValue;\n const displayValueChanged =\n newDisplayValue !== undefined &&\n internalState.current.previousTextValue !== undefined &&\n internalState.current.previousTextValue !== newDisplayValue;\n\n let roundedValue;\n if (valueChanged) {\n roundedValue = precisionRound(newValue!, precision);\n setCurrentValue(roundedValue);\n }\n\n if (valueChanged || displayValueChanged) {\n onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n }\n };\n\n state.input.value = textValue;\n state.input['aria-valuemin'] = min;\n state.input['aria-valuemax'] = max;\n state.input['aria-valuenow'] = currentValue ?? undefined;\n state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n state.input.onChange = useMergedEventCallbacks(state.input.onChange, handleInputChange);\n state.input.onBlur = useMergedEventCallbacks(state.input.onBlur, handleBlur);\n state.input.onKeyDown = useMergedEventCallbacks(state.input.onKeyDown, handleKeyDown);\n state.input.onKeyUp = useMergedEventCallbacks(state.input.onKeyUp, handleKeyUp);\n\n state.incrementButton.onMouseDown = useMergedEventCallbacks(\n handleIncrementMouseDown,\n state.incrementButton.onMouseDown,\n );\n state.incrementButton.onMouseUp = useMergedEventCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.incrementButton.onMouseLeave = useMergedEventCallbacks(\n state.incrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n state.decrementButton.onMouseDown = useMergedEventCallbacks(\n handleDecrementMouseDown,\n state.decrementButton.onMouseDown,\n );\n state.decrementButton.onMouseUp = useMergedEventCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.decrementButton.onMouseLeave = useMergedEventCallbacks(\n state.decrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/SpinButton/useSpinButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n useControllableState,\n useMergedEventCallbacks,\n useTimeout,\n} from '@fluentui/react-utilities';\nimport * as Keys from '@fluentui/keyboard-keys';\nimport {\n SpinButtonProps,\n SpinButtonState,\n SpinButtonSpinState,\n SpinButtonChangeEvent,\n SpinButtonBounds,\n} from './SpinButton.types';\nimport { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\n\ntype InternalState = {\n value: number | null;\n spinState: SpinButtonSpinState;\n spinTime: number;\n spinDelay: number;\n previousTextValue?: string;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the state required to render SpinButton.\n *\n * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,\n * before being passed to renderSpinButton_unstable.\n *\n * @param props - props from this instance of SpinButton\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>): SpinButtonState => {\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],\n });\n\n const {\n value,\n displayValue,\n defaultValue,\n min,\n max,\n step = 1,\n stepPage = 1,\n precision: precisionFromProps,\n onChange,\n size = 'medium',\n appearance = 'outline',\n root,\n input,\n incrementButton,\n decrementButton,\n } = props;\n\n const precision = React.useMemo(() => {\n return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n }, [precisionFromProps, step]);\n\n const [currentValue, setCurrentValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: 0,\n });\n const [textValue, setTextValue] = React.useState(\n value !== undefined && displayValue !== undefined ? displayValue : String(currentValue),\n );\n const [spinState, setSpinState] = React.useState<SpinButtonSpinState>('rest');\n const [atBound, setAtBound] = React.useState<SpinButtonBounds>('none');\n\n const internalState = React.useRef<InternalState>({\n value: currentValue,\n spinState,\n spinTime: 0,\n spinDelay: DEFAULT_SPIN_DELAY_MS,\n });\n\n const state: SpinButtonState = {\n size,\n appearance,\n spinState,\n atBound,\n\n components: {\n root: 'span',\n input: 'input',\n incrementButton: 'button',\n decrementButton: 'button',\n },\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n ref,\n autoComplete: 'off',\n role: 'spinbutton',\n appearance: appearance,\n type: 'text',\n ...nativeProps.primary,\n },\n }),\n incrementButton: resolveShorthand(incrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronUp16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Increment value',\n type: 'button',\n },\n }),\n decrementButton: resolveShorthand(decrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronDown16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Decrement value',\n type: 'button',\n },\n }),\n };\n\n const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n React.useEffect(() => {\n let newTextValue;\n if (value === null || currentValue === null) {\n newTextValue = displayValue ?? '';\n internalState.current.value = null;\n setAtBound('none');\n } else if (value !== undefined) {\n const roundedValue = precisionRound(value, precision);\n newTextValue = displayValue ?? String(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n } else {\n const roundedValue = precisionRound(currentValue, precision);\n newTextValue = String(roundedValue);\n internalState.current.value = roundedValue;\n setAtBound(getBound(roundedValue, min, max));\n }\n setTextValue(newTextValue);\n }, [value, displayValue, currentValue, precision, setAtBound, min, max]);\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!internalState.current.previousTextValue) {\n internalState.current.previousTextValue = textValue;\n }\n\n const newValue = e.target.value;\n setTextValue(newValue);\n };\n\n const stepValue = (e: SpinButtonChangeEvent, direction: 'up' | 'down' | 'upPage' | 'downPage') => {\n const val = internalState.current.value;\n const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n if (val === null) {\n const stepStart = min === undefined ? 0 : min;\n const nullStep = clamp(stepStart + stepSize * dir, min, max);\n commit(e, nullStep);\n return;\n }\n\n let newValue = val + stepSize * dir;\n if (!Number.isNaN(newValue)) {\n newValue = clamp(newValue, min, max);\n }\n\n commit(e, newValue);\n\n if (internalState.current.spinState !== 'rest') {\n setStepTimeout(() => {\n // Ease the step speed a bit\n internalState.current.spinTime += internalState.current.spinDelay;\n internalState.current.spinDelay = lerp(\n DEFAULT_SPIN_DELAY_MS,\n MIN_SPIN_DELAY_MS,\n internalState.current.spinTime / MAX_SPIN_TIME_MS,\n );\n stepValue(e, direction);\n }, internalState.current.spinDelay);\n }\n };\n\n const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'up';\n stepValue(e, 'up');\n };\n\n const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'down';\n stepValue(e, 'down');\n };\n\n const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n clearStepTimeout();\n internalState.current.spinState = 'rest';\n internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n internalState.current.spinTime = 0;\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === Keys.ArrowUp) {\n stepValue(e, 'up');\n setSpinState('up');\n } else if (e.key === Keys.ArrowDown) {\n stepValue(e, 'down');\n setSpinState('down');\n } else if (e.key === Keys.PageUp) {\n e.preventDefault();\n stepValue(e, 'upPage');\n setSpinState('up');\n } else if (e.key === Keys.PageDown) {\n e.preventDefault();\n stepValue(e, 'downPage');\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {\n commit(e, min);\n setSpinState('down');\n } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {\n commit(e, max);\n setSpinState('up');\n } else if (e.key === Keys.Enter) {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n setSpinState('rest');\n } else if (e.key === Keys.Escape) {\n if (internalState.current.previousTextValue) {\n setTextValue(internalState.current.previousTextValue);\n internalState.current.previousTextValue = undefined;\n }\n setSpinState('rest');\n } else {\n setSpinState('rest');\n }\n };\n\n const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n setSpinState('rest');\n };\n\n const commit = (e: SpinButtonChangeEvent, newValue?: number | null, newDisplayValue?: string) => {\n const valueChanged = newValue !== undefined && currentValue !== newValue;\n const displayValueChanged =\n newDisplayValue !== undefined &&\n internalState.current.previousTextValue !== undefined &&\n internalState.current.previousTextValue !== newDisplayValue;\n\n let roundedValue;\n if (valueChanged) {\n roundedValue = precisionRound(newValue!, precision);\n setCurrentValue(roundedValue);\n }\n\n if (valueChanged || displayValueChanged) {\n onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n }\n };\n\n state.input.value = textValue;\n state.input['aria-valuemin'] = min;\n state.input['aria-valuemax'] = max;\n state.input['aria-valuenow'] = currentValue ?? undefined;\n state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n state.input.onChange = useMergedEventCallbacks(state.input.onChange, handleInputChange);\n state.input.onBlur = useMergedEventCallbacks(state.input.onBlur, handleBlur);\n state.input.onKeyDown = useMergedEventCallbacks(state.input.onKeyDown, handleKeyDown);\n state.input.onKeyUp = useMergedEventCallbacks(state.input.onKeyUp, handleKeyUp);\n\n state.incrementButton.onMouseDown = useMergedEventCallbacks(\n handleIncrementMouseDown,\n state.incrementButton.onMouseDown,\n );\n state.incrementButton.onMouseUp = useMergedEventCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.incrementButton.onMouseLeave = useMergedEventCallbacks(\n state.incrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n state.decrementButton.onMouseDown = useMergedEventCallbacks(\n handleDecrementMouseDown,\n state.decrementButton.onMouseDown,\n );\n state.decrementButton.onMouseUp = useMergedEventCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.decrementButton.onMouseLeave = useMergedEventCallbacks(\n state.decrementButton.onMouseLeave,\n handleStepMouseUpOrLeave,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js CHANGED
@@ -157,7 +157,15 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
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
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
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
- "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;}}"]
160
+ "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
161
+ "m": "(forced-colors: active)"
162
+ }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
163
+ "m": "(forced-colors: active)"
164
+ }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
165
+ "m": "(forced-colors: active)"
166
+ }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
167
+ "m": "(forced-colors: active)"
168
+ }]]
161
169
  });
162
170
 
163
171
  const useInputStyles = /*#__PURE__*/react_1.__styles({
package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridTemplateColumns: `1fr 24px`,\n gridTemplateRows: '1fr 1fr',\n columnGap: tokens.spacingHorizontalXS,\n rowGap: 0,\n paddingRight: 0,\n position: 'relative',\n // Remove the border styles from react-input\n ...shorthands.border('0'),\n isolation: 'isolate',\n\n // Apply border styles on the ::before pseudo element.\n // We cannot use ::after since react-input uses that\n // for the selector styles.\n // Using the pseudo element allows us to place the border\n // above content in the component which ensures the buttons\n // line up visually with the border as expected. Without this\n // there is a bit of a gap which can become very noticeable\n // at high zoom or when OS zoom levels are not divisible by 2\n // (e.g., 150% on Windows in Firefox)\n // This is most noticeable on the \"outline\" appearance which is\n // also the default so it feels worth the extra ceremony to get right.\n '::before': {\n content: '\"\"',\n boxSizing: 'border-box',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n pointerEvents: 'none',\n zIndex: 10,\n },\n\n '::after': {\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: 20,\n },\n },\n\n outline: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n\n outlineInteractive: {\n ':hover': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n underline: {\n '::before': {\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n },\n\n underlineInteractive: {\n ':hover': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n filled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n },\n\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n '::before': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n outlineDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n },\n },\n\n underlineDisabled: {\n '::before': {\n ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n },\n },\n\n filledDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n gridColumnStart: '1',\n gridColumnEnd: '2',\n gridRowStart: '1',\n gridRowEnd: '3',\n outlineStyle: 'none',\n ...shorthands.padding(0),\n },\n});\n\nconst useButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n width: '24px',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.border(0),\n position: 'absolute',\n\n outlineStyle: 'none',\n height: '100%',\n\n ':enabled:hover': {\n cursor: 'pointer',\n },\n\n ':active': {\n outlineStyle: 'none',\n },\n\n ':disabled': {\n cursor: 'not-allowed',\n },\n },\n\n incrementButton: {\n gridColumnStart: '2',\n gridColumnEnd: '3',\n gridRowStart: '1',\n gridRowEnd: '2',\n ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n },\n\n // TODO: revisit these padding numbers for aligning the icon.\n // Padding values aren't perfect.\n // The icon doesn't align perfectly with the Figma designs.\n // It's set in a 16x16px square but the artwork is inset from that\n // so I've had to compute the numbers by handle.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n ...shorthands.padding('3px', '5px', '0px', '5px'),\n },\n\n incrementButtonMedium: {\n ...shorthands.padding('4px', '5px', '1px', '5px'),\n },\n\n decrementButton: {\n gridColumnStart: '2',\n gridColumnEnd: '3',\n gridRowStart: '2',\n gridRowEnd: '3',\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n },\n\n decrementButtonSmall: {\n ...shorthands.padding('0px', '5px', '3px', '5px'),\n },\n\n decrementButtonMedium: {\n ...shorthands.padding('1px', '5px', '4px', '5px'),\n },\n\n outline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n underline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-darker': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-lighter': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n base: {\n cursor: 'not-allowed',\n\n ':hover': {\n cursor: 'not-allowed',\n },\n },\n\n outline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n underline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-darker': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-lighter': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n const { appearance, atBound, size } = state;\n const disabled = state.input.disabled;\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const buttonStyles = useButtonStyles();\n const buttonDisabledStyles = useButtonDisabledStyles();\n const inputStyles = useInputStyles();\n\n // Grab the root className here so we can be sure to merge is last\n const rootClassName = state.root.className;\n state.root.className = undefined;\n // Reuse react-input's styles without re-using the Input component.\n useInputStyles_unstable({\n size,\n appearance,\n input: state.input,\n root: state.root,\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n });\n\n state.root.className = mergeClasses(\n state.root.className, // Get the classes from useInputStyles_unstable\n spinButtonClassNames.root,\n rootStyles.base,\n appearance === 'outline' && rootStyles.outline,\n appearance === 'underline' && rootStyles.underline,\n filled && rootStyles.filled,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n disabled && rootStyles.disabled,\n disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n disabled && filled && rootStyles.filledDisabled,\n rootClassName, // Make sure any original class name is applied last\n );\n\n state.incrementButton.className = mergeClasses(\n spinButtonClassNames.incrementButton,\n state.spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n buttonStyles.base,\n buttonStyles.incrementButton,\n buttonStyles[appearance],\n size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.incrementButton.className,\n );\n state.decrementButton.className = mergeClasses(\n spinButtonClassNames.decrementButton,\n state.spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n buttonStyles.base,\n buttonStyles.decrementButton,\n buttonStyles[appearance],\n size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.decrementButton.className,\n );\n\n state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridTemplateColumns: `1fr 24px`,\n gridTemplateRows: '1fr 1fr',\n columnGap: tokens.spacingHorizontalXS,\n rowGap: 0,\n paddingRight: 0,\n position: 'relative',\n // Remove the border styles from react-input\n ...shorthands.border('0'),\n isolation: 'isolate',\n\n // Apply border styles on the ::before pseudo element.\n // We cannot use ::after since react-input uses that\n // for the selector styles.\n // Using the pseudo element allows us to place the border\n // above content in the component which ensures the buttons\n // line up visually with the border as expected. Without this\n // there is a bit of a gap which can become very noticeable\n // at high zoom or when OS zoom levels are not divisible by 2\n // (e.g., 150% on Windows in Firefox)\n // This is most noticeable on the \"outline\" appearance which is\n // also the default so it feels worth the extra ceremony to get right.\n '::before': {\n content: '\"\"',\n boxSizing: 'border-box',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n pointerEvents: 'none',\n zIndex: 10,\n },\n\n '::after': {\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: 20,\n },\n },\n\n outline: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n\n outlineInteractive: {\n ':hover': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n underline: {\n '::before': {\n ...shorthands.borderRadius(0), // corners look strange if rounded\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n },\n },\n\n underlineInteractive: {\n ':hover': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n filled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n },\n },\n\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n '::before': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n outlineDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n },\n },\n\n underlineDisabled: {\n '::before': {\n ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n },\n },\n\n filledDisabled: {\n '::before': {\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n gridColumnStart: '1',\n gridColumnEnd: '2',\n gridRowStart: '1',\n gridRowEnd: '3',\n outlineStyle: 'none',\n ...shorthands.padding(0),\n },\n});\n\nconst useButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n width: '24px',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.border(0),\n position: 'absolute',\n\n outlineStyle: 'none',\n height: '100%',\n\n ':enabled:hover': {\n cursor: 'pointer',\n },\n\n ':active': {\n outlineStyle: 'none',\n },\n\n ':disabled': {\n cursor: 'not-allowed',\n },\n },\n\n incrementButton: {\n gridColumnStart: '2',\n gridColumnEnd: '3',\n gridRowStart: '1',\n gridRowEnd: '2',\n ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n },\n\n // TODO: revisit these padding numbers for aligning the icon.\n // Padding values aren't perfect.\n // The icon doesn't align perfectly with the Figma designs.\n // It's set in a 16x16px square but the artwork is inset from that\n // so I've had to compute the numbers by handle.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n ...shorthands.padding('3px', '5px', '0px', '5px'),\n },\n\n incrementButtonMedium: {\n ...shorthands.padding('4px', '5px', '1px', '5px'),\n },\n\n decrementButton: {\n gridColumnStart: '2',\n gridColumnEnd: '3',\n gridRowStart: '2',\n gridRowEnd: '3',\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n },\n\n decrementButtonSmall: {\n ...shorthands.padding('0px', '5px', '3px', '5px'),\n },\n\n decrementButtonMedium: {\n ...shorthands.padding('1px', '5px', '4px', '5px'),\n },\n\n outline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n underline: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-darker': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n 'filled-lighter': {\n backgroundColor: 'transparent',\n color: tokens.colorNeutralForeground3,\n\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n ':disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n base: {\n cursor: 'not-allowed',\n\n ':hover': {\n cursor: 'not-allowed',\n },\n },\n\n outline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n underline: {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-darker': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n\n 'filled-lighter': {\n color: tokens.colorNeutralForegroundDisabled,\n ':enabled': {\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n ':active': {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: 'transparent',\n },\n },\n },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n const { appearance, atBound, size } = state;\n const disabled = state.input.disabled;\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const buttonStyles = useButtonStyles();\n const buttonDisabledStyles = useButtonDisabledStyles();\n const inputStyles = useInputStyles();\n\n // Grab the root className here so we can be sure to merge is last\n const rootClassName = state.root.className;\n state.root.className = undefined;\n // Reuse react-input's styles without re-using the Input component.\n useInputStyles_unstable({\n size,\n appearance,\n input: state.input,\n root: state.root,\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n });\n\n state.root.className = mergeClasses(\n state.root.className, // Get the classes from useInputStyles_unstable\n spinButtonClassNames.root,\n rootStyles.base,\n appearance === 'outline' && rootStyles.outline,\n appearance === 'underline' && rootStyles.underline,\n filled && rootStyles.filled,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n disabled && rootStyles.disabled,\n disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n disabled && filled && rootStyles.filledDisabled,\n rootClassName, // Make sure any original class name is applied last\n );\n\n state.incrementButton.className = mergeClasses(\n spinButtonClassNames.incrementButton,\n state.spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n buttonStyles.base,\n buttonStyles.incrementButton,\n buttonStyles[appearance],\n size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.incrementButton.className,\n );\n state.decrementButton.className = mergeClasses(\n spinButtonClassNames.decrementButton,\n state.spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n buttonStyles.base,\n buttonStyles.decrementButton,\n buttonStyles[appearance],\n size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n state.decrementButton.className,\n );\n\n state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-spinbutton",
3
- "version": "0.0.0-nightly-20220623-0419.1",
3
+ "version": "0.0.0-nightly-20220628-0417.1",
4
4
  "description": "Fluent UI React SpinButton component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -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-20220623-0419.0",
32
- "@fluentui/react-label": "0.0.0-nightly-20220623-0419.1",
31
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220628-0417.1",
32
+ "@fluentui/react-label": "^0.0.0",
33
33
  "@fluentui/scripts": "^1.0.0"
34
34
  },
35
35
  "dependencies": {
36
- "@griffel/react": "1.1.0",
37
- "@fluentui/keyboard-keys": "0.0.0-nightly-20220623-0419.0",
36
+ "@griffel/react": "1.2.0",
37
+ "@fluentui/keyboard-keys": "^0.0.0",
38
38
  "@fluentui/react-icons": "^2.0.172-rc.8",
39
- "@fluentui/react-input": "0.0.0-nightly-20220623-0419.1",
40
- "@fluentui/react-theme": "0.0.0-nightly-20220623-0419.1",
41
- "@fluentui/react-utilities": "0.0.0-nightly-20220623-0419.1",
39
+ "@fluentui/react-input": "^0.0.0",
40
+ "@fluentui/react-theme": "^0.0.0",
41
+ "@fluentui/react-utilities": "^0.0.0",
42
42
  "tslib": "^2.1.0"
43
43
  },
44
44
  "peerDependencies": {