@fluentui/react-spinbutton 9.0.8 → 9.0.9

package/lib-amd/components/SpinButton/useSpinButton.js

@@ -0,0 +1,252 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/keyboard-keys", "../../utils/index", "@fluentui/react-icons"], function (require, exports, tslib_1, React, react_utilities_1, Keys, index_1, react_icons_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSpinButton_unstable = void 0;
+    var DEFAULT_SPIN_DELAY_MS = 150;
+    var MIN_SPIN_DELAY_MS = 80;
+    var MAX_SPIN_TIME_MS = 1000;
+    // This is here to give an ease the mouse held down case.
+    // Exact easing it to be defined. Once it is we'll likely
+    // pull this out into a util function in the SpinButton package.
+    var lerp = function (start, end, percent) { return start + (end - start) * percent; };
+    /**
+     * Create the state required to render SpinButton.
+     *
+     * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,
+     * before being passed to renderSpinButton_unstable.
+     *
+     * @param props - props from this instance of SpinButton
+     * @param ref - reference to root HTMLElement of SpinButton
+     */
+    var useSpinButton_unstable = function (props, ref) {
+        var _a;
+        var nativeProps = react_utilities_1.getPartitionedNativeProps({
+            props: props,
+            primarySlotTagName: 'input',
+            excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],
+        });
+        var value = props.value, displayValue = props.displayValue, defaultValue = props.defaultValue, min = props.min, max = props.max, _b = props.step, step = _b === void 0 ? 1 : _b, _c = props.stepPage, stepPage = _c === void 0 ? 1 : _c, precisionFromProps = props.precision, onChange = props.onChange, _d = props.size, size = _d === void 0 ? 'medium' : _d, _e = props.appearance, appearance = _e === void 0 ? 'outline' : _e, root = props.root, input = props.input, incrementButton = props.incrementButton, decrementButton = props.decrementButton;
+        var precision = React.useMemo(function () {
+            return precisionFromProps !== null && precisionFromProps !== void 0 ? precisionFromProps : Math.max(index_1.calculatePrecision(step), 0);
+        }, [precisionFromProps, step]);
+        var _f = react_utilities_1.useControllableState({
+            state: value,
+            defaultState: defaultValue,
+            initialState: 0,
+        }), currentValue = _f[0], setCurrentValue = _f[1];
+        var isControlled = value !== undefined;
+        var _g = React.useState(undefined), textValue = _g[0], setTextValue = _g[1];
+        var _h = React.useState('rest'), keyboardSpinState = _h[0], setKeyboardSpinState = _h[1];
+        var internalState = React.useRef({
+            value: currentValue,
+            spinState: 'rest',
+            spinTime: 0,
+            spinDelay: DEFAULT_SPIN_DELAY_MS,
+            atBound: currentValue !== null ? index_1.getBound(index_1.precisionRound(currentValue, precision), min, max) : 'none',
+        });
+        var _j = react_utilities_1.useTimeout(), setStepTimeout = _j[0], clearStepTimeout = _j[1];
+        var stepValue = function (e, direction, startFrom) {
+            var startValue = internalState.current.value;
+            if (startFrom) {
+                var num = parseFloat(startFrom);
+                if (!isNaN(num)) {
+                    startValue = num;
+                }
+            }
+            var val = startValue;
+            var dir = direction === 'up' || direction === 'upPage' ? 1 : -1;
+            var stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;
+            if (val === null) {
+                var stepStart = min === undefined ? 0 : min;
+                var nullStep = index_1.clamp(stepStart + stepSize * dir, min, max);
+                commit(e, nullStep);
+                return;
+            }
+            var newValue = val + stepSize * dir;
+            if (!Number.isNaN(newValue)) {
+                newValue = index_1.clamp(newValue, min, max);
+            }
+            commit(e, newValue);
+            if (internalState.current.spinState !== 'rest') {
+                setStepTimeout(function () {
+                    // Ease the step speed a bit
+                    internalState.current.spinTime += internalState.current.spinDelay;
+                    internalState.current.spinDelay = lerp(DEFAULT_SPIN_DELAY_MS, MIN_SPIN_DELAY_MS, internalState.current.spinTime / MAX_SPIN_TIME_MS);
+                    stepValue(e, direction);
+                }, internalState.current.spinDelay);
+            }
+        };
+        var handleInputChange = function (e) {
+            if (!internalState.current.previousTextValue) {
+                internalState.current.previousTextValue = textValue;
+            }
+            var newValue = e.target.value;
+            setTextValue(newValue);
+        };
+        var handleIncrementMouseDown = function (e) {
+            internalState.current.spinState = 'up';
+            stepValue(e, 'up');
+        };
+        var handleDecrementMouseDown = function (e) {
+            internalState.current.spinState = 'down';
+            stepValue(e, 'down');
+        };
+        var handleStepMouseUpOrLeave = function (e) {
+            clearStepTimeout();
+            internalState.current.spinState = 'rest';
+            internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;
+            internalState.current.spinTime = 0;
+        };
+        var handleBlur = function (e) {
+            commit(e, currentValue, textValue);
+            internalState.current.previousTextValue = undefined;
+        };
+        var handleKeyDown = function (e) {
+            var nextKeyboardSpinState = 'rest';
+            if (e.key === Keys.ArrowUp) {
+                stepValue(e, 'up', textValue);
+                nextKeyboardSpinState = 'up';
+            }
+            else if (e.key === Keys.ArrowDown) {
+                stepValue(e, 'down', textValue);
+                nextKeyboardSpinState = 'down';
+            }
+            else if (e.key === Keys.PageUp) {
+                e.preventDefault();
+                stepValue(e, 'upPage', textValue);
+                nextKeyboardSpinState = 'up';
+            }
+            else if (e.key === Keys.PageDown) {
+                e.preventDefault();
+                stepValue(e, 'downPage', textValue);
+                nextKeyboardSpinState = 'down';
+            }
+            else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {
+                commit(e, min);
+                nextKeyboardSpinState = 'down';
+            }
+            else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {
+                commit(e, max);
+                nextKeyboardSpinState = 'up';
+            }
+            else if (e.key === Keys.Enter) {
+                commit(e, currentValue, textValue);
+                internalState.current.previousTextValue = undefined;
+            }
+            else if (e.key === Keys.Escape) {
+                if (internalState.current.previousTextValue) {
+                    setTextValue(undefined);
+                    internalState.current.previousTextValue = undefined;
+                }
+            }
+            if (keyboardSpinState !== nextKeyboardSpinState) {
+                setKeyboardSpinState(nextKeyboardSpinState);
+            }
+        };
+        var handleKeyUp = function (e) {
+            if (keyboardSpinState !== 'rest') {
+                setKeyboardSpinState('rest');
+                internalState.current.spinState = 'rest';
+            }
+        };
+        var commit = function (e, newValue, newDisplayValue) {
+            var valueChanged = newValue !== undefined && currentValue !== newValue;
+            var displayValueChanged = newDisplayValue !== undefined &&
+                internalState.current.previousTextValue !== undefined &&
+                internalState.current.previousTextValue !== newDisplayValue;
+            var roundedValue;
+            if (valueChanged) {
+                roundedValue = index_1.precisionRound(newValue, precision);
+                setCurrentValue(roundedValue);
+            }
+            else if (displayValueChanged && !isControlled) {
+                var nextValue = parseFloat(newDisplayValue);
+                if (!isNaN(nextValue)) {
+                    setCurrentValue(index_1.precisionRound(nextValue, precision));
+                }
+            }
+            if (valueChanged || displayValueChanged) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(e, { value: roundedValue, displayValue: newDisplayValue });
+            }
+            setTextValue(undefined);
+        };
+        var state = {
+            size: size,
+            appearance: appearance,
+            spinState: keyboardSpinState,
+            atBound: internalState.current.atBound,
+            components: {
+                root: 'span',
+                input: 'input',
+                incrementButton: 'button',
+                decrementButton: 'button',
+            },
+            root: react_utilities_1.resolveShorthand(root, {
+                required: true,
+                defaultProps: nativeProps.root,
+            }),
+            input: react_utilities_1.resolveShorthand(input, {
+                required: true,
+                defaultProps: tslib_1.__assign({ ref: ref, autoComplete: 'off', role: 'spinbutton', appearance: appearance, type: 'text' }, nativeProps.primary),
+            }),
+            incrementButton: react_utilities_1.resolveShorthand(incrementButton, {
+                required: true,
+                defaultProps: {
+                    tabIndex: -1,
+                    children: React.createElement(react_icons_1.ChevronUp16Regular, null),
+                    disabled: nativeProps.primary.disabled,
+                    'aria-label': 'Increment value',
+                    type: 'button',
+                },
+            }),
+            decrementButton: react_utilities_1.resolveShorthand(decrementButton, {
+                required: true,
+                defaultProps: {
+                    tabIndex: -1,
+                    children: React.createElement(react_icons_1.ChevronDown16Regular, null),
+                    disabled: nativeProps.primary.disabled,
+                    'aria-label': 'Decrement value',
+                    type: 'button',
+                },
+            }),
+        };
+        var valueToDisplay;
+        if (textValue !== undefined) {
+            valueToDisplay = textValue;
+        }
+        else if (value === null || currentValue === null) {
+            valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : '';
+            internalState.current.value = null;
+            internalState.current.atBound = 'none';
+        }
+        else {
+            var roundedValue = index_1.precisionRound(currentValue, precision);
+            internalState.current.value = roundedValue;
+            internalState.current.atBound = index_1.getBound(roundedValue, min, max);
+            if (isControlled) {
+                valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);
+            }
+            else {
+                valueToDisplay = String(roundedValue);
+            }
+        }
+        state.input.value = valueToDisplay;
+        state.input['aria-valuemin'] = min;
+        state.input['aria-valuemax'] = max;
+        state.input['aria-valuenow'] = currentValue !== null && currentValue !== void 0 ? currentValue : undefined;
+        state.input['aria-valuetext'] = (_a = state.input['aria-valuetext']) !== null && _a !== void 0 ? _a : ((value !== undefined && displayValue) || undefined);
+        state.input.onChange = react_utilities_1.mergeCallbacks(state.input.onChange, handleInputChange);
+        state.input.onBlur = react_utilities_1.mergeCallbacks(state.input.onBlur, handleBlur);
+        state.input.onKeyDown = react_utilities_1.mergeCallbacks(state.input.onKeyDown, handleKeyDown);
+        state.input.onKeyUp = react_utilities_1.mergeCallbacks(state.input.onKeyUp, handleKeyUp);
+        state.incrementButton.onMouseDown = react_utilities_1.mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);
+        state.incrementButton.onMouseUp = react_utilities_1.mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);
+        state.incrementButton.onMouseLeave = react_utilities_1.mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);
+        state.decrementButton.onMouseDown = react_utilities_1.mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);
+        state.decrementButton.onMouseUp = react_utilities_1.mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);
+        state.decrementButton.onMouseLeave = react_utilities_1.mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);
+        return state;
+    };
+    exports.useSpinButton_unstable = useSpinButton_unstable;
+});
+//# sourceMappingURL=useSpinButton.js.map

package/lib-amd/components/SpinButton/useSpinButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSpinButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  resolveShorthand,\n  useControllableState,\n  useTimeout,\n} from '@fluentui/react-utilities';\nimport * as Keys from '@fluentui/keyboard-keys';\nimport {\n  SpinButtonProps,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonChangeEvent,\n  SpinButtonBounds,\n} from './SpinButton.types';\nimport { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\n\ntype InternalState = {\n  value: number | null;\n  spinState: SpinButtonSpinState;\n  spinTime: number;\n  spinDelay: number;\n  previousTextValue?: string;\n  atBound: SpinButtonBounds;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the state required to render SpinButton.\n *\n * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,\n * before being passed to renderSpinButton_unstable.\n *\n * @param props - props from this instance of SpinButton\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>): SpinButtonState => {\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],\n  });\n\n  const {\n    value,\n    displayValue,\n    defaultValue,\n    min,\n    max,\n    step = 1,\n    stepPage = 1,\n    precision: precisionFromProps,\n    onChange,\n    size = 'medium',\n    appearance = 'outline',\n    root,\n    input,\n    incrementButton,\n    decrementButton,\n  } = props;\n\n  const precision = React.useMemo(() => {\n    return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n  }, [precisionFromProps, step]);\n\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: value,\n    defaultState: defaultValue,\n    initialState: 0,\n  });\n\n  const isControlled = value !== undefined;\n\n  const [textValue, setTextValue] = React.useState<string | undefined>(undefined);\n  const [keyboardSpinState, setKeyboardSpinState] = React.useState<SpinButtonSpinState>('rest');\n\n  const internalState = React.useRef<InternalState>({\n    value: currentValue,\n    spinState: 'rest',\n    spinTime: 0,\n    spinDelay: DEFAULT_SPIN_DELAY_MS,\n    atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none',\n  });\n\n  const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n  const stepValue = (\n    e: SpinButtonChangeEvent,\n    direction: 'up' | 'down' | 'upPage' | 'downPage',\n    startFrom?: string,\n  ) => {\n    let startValue = internalState.current.value;\n    if (startFrom) {\n      const num = parseFloat(startFrom);\n      if (!isNaN(num)) {\n        startValue = num;\n      }\n    }\n    const val = startValue;\n    const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n    const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n    if (val === null) {\n      const stepStart = min === undefined ? 0 : min;\n      const nullStep = clamp(stepStart + stepSize * dir, min, max);\n      commit(e, nullStep);\n      return;\n    }\n\n    let newValue = val + stepSize * dir;\n    if (!Number.isNaN(newValue)) {\n      newValue = clamp(newValue, min, max);\n    }\n\n    commit(e, newValue);\n\n    if (internalState.current.spinState !== 'rest') {\n      setStepTimeout(() => {\n        // Ease the step speed a bit\n        internalState.current.spinTime += internalState.current.spinDelay;\n        internalState.current.spinDelay = lerp(\n          DEFAULT_SPIN_DELAY_MS,\n          MIN_SPIN_DELAY_MS,\n          internalState.current.spinTime / MAX_SPIN_TIME_MS,\n        );\n        stepValue(e, direction);\n      }, internalState.current.spinDelay);\n    }\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!internalState.current.previousTextValue) {\n      internalState.current.previousTextValue = textValue;\n    }\n    const newValue = e.target.value;\n    setTextValue(newValue);\n  };\n\n  const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    internalState.current.spinState = 'up';\n    stepValue(e, 'up');\n  };\n\n  const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    internalState.current.spinState = 'down';\n    stepValue(e, 'down');\n  };\n\n  const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    clearStepTimeout();\n    internalState.current.spinState = 'rest';\n    internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n    internalState.current.spinTime = 0;\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.previousTextValue = undefined;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    let nextKeyboardSpinState: SpinButtonSpinState = 'rest';\n\n    if (e.key === Keys.ArrowUp) {\n      stepValue(e, 'up', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === Keys.ArrowDown) {\n      stepValue(e, 'down', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (e.key === Keys.PageUp) {\n      e.preventDefault();\n      stepValue(e, 'upPage', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === Keys.PageDown) {\n      e.preventDefault();\n      stepValue(e, 'downPage', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {\n      commit(e, min);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {\n      commit(e, max);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === Keys.Enter) {\n      commit(e, currentValue, textValue);\n      internalState.current.previousTextValue = undefined;\n    } else if (e.key === Keys.Escape) {\n      if (internalState.current.previousTextValue) {\n        setTextValue(undefined);\n        internalState.current.previousTextValue = undefined;\n      }\n    }\n\n    if (keyboardSpinState !== nextKeyboardSpinState) {\n      setKeyboardSpinState(nextKeyboardSpinState);\n    }\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (keyboardSpinState !== 'rest') {\n      setKeyboardSpinState('rest');\n      internalState.current.spinState = 'rest';\n    }\n  };\n\n  const commit = (e: SpinButtonChangeEvent, newValue?: number | null, newDisplayValue?: string) => {\n    const valueChanged = newValue !== undefined && currentValue !== newValue;\n    const displayValueChanged =\n      newDisplayValue !== undefined &&\n      internalState.current.previousTextValue !== undefined &&\n      internalState.current.previousTextValue !== newDisplayValue;\n\n    let roundedValue;\n    if (valueChanged) {\n      roundedValue = precisionRound(newValue!, precision);\n      setCurrentValue(roundedValue);\n    } else if (displayValueChanged && !isControlled) {\n      const nextValue = parseFloat(newDisplayValue as string);\n      if (!isNaN(nextValue)) {\n        setCurrentValue(precisionRound(nextValue, precision));\n      }\n    }\n\n    if (valueChanged || displayValueChanged) {\n      onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n    }\n\n    setTextValue(undefined);\n  };\n\n  const state: SpinButtonState = {\n    size,\n    appearance,\n    spinState: keyboardSpinState,\n    atBound: internalState.current.atBound,\n\n    components: {\n      root: 'span',\n      input: 'input',\n      incrementButton: 'button',\n      decrementButton: 'button',\n    },\n    root: resolveShorthand(root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n    input: resolveShorthand(input, {\n      required: true,\n      defaultProps: {\n        ref,\n        autoComplete: 'off',\n        role: 'spinbutton',\n        appearance,\n        type: 'text',\n        ...nativeProps.primary,\n      },\n    }),\n    incrementButton: resolveShorthand(incrementButton, {\n      required: true,\n      defaultProps: {\n        tabIndex: -1,\n        children: <ChevronUp16Regular />,\n        disabled: nativeProps.primary.disabled,\n        'aria-label': 'Increment value',\n        type: 'button',\n      },\n    }),\n    decrementButton: resolveShorthand(decrementButton, {\n      required: true,\n      defaultProps: {\n        tabIndex: -1,\n        children: <ChevronDown16Regular />,\n        disabled: nativeProps.primary.disabled,\n        'aria-label': 'Decrement value',\n        type: 'button',\n      },\n    }),\n  };\n\n  let valueToDisplay;\n  if (textValue !== undefined) {\n    valueToDisplay = textValue;\n  } else if (value === null || currentValue === null) {\n    valueToDisplay = displayValue ?? '';\n    internalState.current.value = null;\n    internalState.current.atBound = 'none';\n  } else {\n    const roundedValue = precisionRound(currentValue, precision);\n    internalState.current.value = roundedValue;\n    internalState.current.atBound = getBound(roundedValue, min, max);\n    if (isControlled) {\n      valueToDisplay = displayValue ?? String(roundedValue);\n    } else {\n      valueToDisplay = String(roundedValue);\n    }\n  }\n\n  state.input.value = valueToDisplay;\n  state.input['aria-valuemin'] = min;\n  state.input['aria-valuemax'] = max;\n  state.input['aria-valuenow'] = currentValue ?? undefined;\n  state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n  state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);\n  state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);\n  state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);\n  state.input.onKeyUp = mergeCallbacks(state.input.onKeyUp, handleKeyUp);\n\n  state.incrementButton.onMouseDown = mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);\n  state.incrementButton.onMouseUp = mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.incrementButton.onMouseLeave = mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  state.decrementButton.onMouseDown = mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);\n  state.decrementButton.onMouseUp = mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.decrementButton.onMouseLeave = mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  return state;\n};\n"]}

package/lib-amd/components/SpinButton/useSpinButtonStyles.js

@@ -0,0 +1,312 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme", "@fluentui/react-input"], function (require, exports, tslib_1, react_1, react_theme_1, react_input_1) {
+    "use strict";
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSpinButtonStyles_unstable = exports.spinButtonClassNames = void 0;
+    exports.spinButtonClassNames = {
+        root: 'fui-SpinButton',
+        input: 'fui-SpinButton__input',
+        incrementButton: 'fui-SpinButton__incrementButton',
+        decrementButton: 'fui-SpinButton__decrementButton',
+    };
+    var spinButtonExtraClassNames = {
+        buttonActive: 'fui-SpinButton__button_active',
+    };
+    var useRootStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign({ display: 'inline-grid', gridTemplateColumns: "1fr 24px", gridTemplateRows: '1fr 1fr', columnGap: react_theme_1.tokens.spacingHorizontalXS, rowGap: 0, paddingRight: 0, position: 'relative' }, react_1.shorthands.border('0')), { isolation: 'isolate', 
+            // Apply border styles on the ::before pseudo element.
+            // We cannot use ::after since react-input uses that
+            // for the selector styles.
+            // Using the pseudo element allows us to place the border
+            // above content in the component which ensures the buttons
+            // line up visually with the border as expected. Without this
+            // there is a bit of a gap which can become very noticeable
+            // at high zoom or when OS zoom levels are not divisible by 2
+            // (e.g., 150% on Windows in Firefox)
+            // This is most noticeable on the "outline" appearance which is
+            // also the default so it feels worth the extra ceremony to get right.
+            '::before': tslib_1.__assign(tslib_1.__assign({ content: '""', boxSizing: 'border-box', position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { pointerEvents: 'none', zIndex: 10 }), '::after': {
+                right: 0,
+                bottom: 0,
+                left: 0,
+                zIndex: 20,
+            } }),
+        small: {
+            paddingLeft: react_theme_1.tokens.spacingHorizontalS,
+        },
+        // intentionally empty
+        medium: {},
+        outline: {
+            '::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorNeutralStroke1)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible }),
+        },
+        outlineInteractive: {
+            ':hover': {
+                '::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover }),
+            },
+            // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+            ':active,:focus-within': {
+                '::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Pressed)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed }),
+            },
+        },
+        underline: {
+            '::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderRadius(0)), react_1.shorthands.borderBottom('1px', 'solid', react_theme_1.tokens.colorNeutralStrokeAccessible)),
+        },
+        underlineInteractive: {
+            ':hover': {
+                '::before': {
+                    borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
+                },
+            },
+            // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+            ':active,:focus-within': {
+                '::before': {
+                    borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed,
+                },
+            },
+        },
+        filled: {
+            '::before': tslib_1.__assign({}, react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorTransparentStroke)),
+        },
+        filledInteractive: {
+            // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+            ':hover,:focus-within': {
+                '::before': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStrokeInteractive)),
+            },
+        },
+        invalid: {
+            ':not(:focus-within),:hover:not(:focus-within)': {
+                '::before': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorPaletteRedBorder2)),
+            },
+        },
+        disabled: {
+            '::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { '@media (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')) }),
+        },
+    });
+    var useInputStyles = react_1.makeStyles({
+        base: tslib_1.__assign({ gridColumnStart: '1', gridColumnEnd: '2', gridRowStart: '1', gridRowEnd: '3', outlineStyle: 'none' }, react_1.shorthands.padding(0)),
+    });
+    var useButtonStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign({ display: 'inline-flex', width: '24px', alignItems: 'center', justifyContent: 'center' }, react_1.shorthands.border(0)), { position: 'absolute', outlineStyle: 'none', height: '100%', ':enabled:hover': {
+                cursor: 'pointer',
+            }, ':active': {
+                outlineStyle: 'none',
+            }, ':disabled': {
+                cursor: 'not-allowed',
+            } }),
+        incrementButton: tslib_1.__assign({ gridColumnStart: '2', gridColumnEnd: '3', gridRowStart: '1', gridRowEnd: '2' }, react_1.shorthands.borderRadius(0, react_theme_1.tokens.borderRadiusMedium, 0, 0)),
+        // Padding values numbers don't align with design specs
+        // but visually the padding aligns.
+        // The icons are set in a 16x16px square but the artwork is inset from that
+        // so these padding values are computed by hand.
+        // Additionally the design uses fractional values so these are
+        // rounded to the nearest integer.
+        incrementButtonSmall: tslib_1.__assign({}, react_1.shorthands.padding('3px', '6px', '0px', '4px')),
+        incrementButtonMedium: tslib_1.__assign({}, react_1.shorthands.padding('4px', '5px', '1px', '5px')),
+        decrementButton: tslib_1.__assign({ gridColumnStart: '2', gridColumnEnd: '3', gridRowStart: '2', gridRowEnd: '3' }, react_1.shorthands.borderRadius(0, 0, react_theme_1.tokens.borderRadiusMedium, 0)),
+        decrementButtonSmall: tslib_1.__assign({}, react_1.shorthands.padding('0px', '6px', '3px', '4px')),
+        decrementButtonMedium: tslib_1.__assign({}, react_1.shorthands.padding('1px', '5px', '4px', '5px')),
+        outline: {
+            backgroundColor: 'transparent',
+            color: react_theme_1.tokens.colorNeutralForeground3,
+            ':enabled': (_a = {
+                    ':hover': {
+                        color: react_theme_1.tokens.colorNeutralForeground3Hover,
+                        backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover,
+                    },
+                    ':active': {
+                        color: react_theme_1.tokens.colorNeutralForeground3Pressed,
+                        backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
+                    }
+                },
+                _a["&." + spinButtonExtraClassNames.buttonActive] = {
+                    color: react_theme_1.tokens.colorNeutralForeground3Pressed,
+                    backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
+                },
+                _a),
+            ':disabled': {
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+        },
+        underline: {
+            backgroundColor: 'transparent',
+            color: react_theme_1.tokens.colorNeutralForeground3,
+            ':enabled': (_b = {
+                    ':hover': {
+                        color: react_theme_1.tokens.colorNeutralForeground3Hover,
+                        backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover,
+                    },
+                    ':active': {
+                        color: react_theme_1.tokens.colorNeutralForeground3Pressed,
+                        backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
+                    }
+                },
+                _b["&." + spinButtonExtraClassNames.buttonActive] = {
+                    color: react_theme_1.tokens.colorNeutralForeground3Pressed,
+                    backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
+                },
+                _b),
+            ':disabled': {
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+        },
+        'filled-darker': {
+            backgroundColor: 'transparent',
+            color: react_theme_1.tokens.colorNeutralForeground3,
+            ':enabled': (_c = {
+                    ':hover': {
+                        color: react_theme_1.tokens.colorNeutralForeground3Hover,
+                        backgroundColor: react_theme_1.tokens.colorNeutralBackground3Hover,
+                    },
+                    ':active': {
+                        color: react_theme_1.tokens.colorNeutralForeground3Pressed,
+                        backgroundColor: react_theme_1.tokens.colorNeutralBackground3Pressed,
+                    }
+                },
+                _c["&." + spinButtonExtraClassNames.buttonActive] = {
+                    color: react_theme_1.tokens.colorNeutralForeground3Pressed,
+                    backgroundColor: react_theme_1.tokens.colorNeutralBackground3Pressed,
+                },
+                _c),
+            ':disabled': {
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+        },
+        'filled-lighter': {
+            backgroundColor: 'transparent',
+            color: react_theme_1.tokens.colorNeutralForeground3,
+            ':enabled': (_d = {
+                    ':hover': {
+                        color: react_theme_1.tokens.colorNeutralForeground3Hover,
+                        backgroundColor: react_theme_1.tokens.colorNeutralBackground1Hover,
+                    }
+                },
+                _d[":active,&." + spinButtonExtraClassNames.buttonActive] = {
+                    color: react_theme_1.tokens.colorNeutralForeground3Pressed,
+                    backgroundColor: react_theme_1.tokens.colorNeutralBackground1Pressed,
+                },
+                _d),
+            ':disabled': {
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+        },
+    });
+    // Cannot just disable button as they need to remain
+    // exposed to ATs like screen readers.
+    var useButtonDisabledStyles = react_1.makeStyles({
+        base: {
+            cursor: 'not-allowed',
+            ':hover': {
+                cursor: 'not-allowed',
+            },
+        },
+        outline: {
+            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            ':enabled': (_e = {
+                    ':hover': {
+                        color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                        backgroundColor: 'transparent',
+                    },
+                    ':active': {
+                        color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                        backgroundColor: 'transparent',
+                    }
+                },
+                _e["&." + spinButtonExtraClassNames.buttonActive] = {
+                    color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                    backgroundColor: 'transparent',
+                },
+                _e),
+        },
+        underline: {
+            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            ':enabled': (_f = {
+                    ':hover': {
+                        color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                        backgroundColor: 'transparent',
+                    },
+                    ':active': {
+                        color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                        backgroundColor: 'transparent',
+                    }
+                },
+                _f["&." + spinButtonExtraClassNames.buttonActive] = {
+                    color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                    backgroundColor: 'transparent',
+                },
+                _f),
+        },
+        'filled-darker': {
+            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            ':enabled': (_g = {
+                    ':hover': {
+                        color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                        backgroundColor: 'transparent',
+                    },
+                    ':active': {
+                        color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                        backgroundColor: 'transparent',
+                    }
+                },
+                _g["&." + spinButtonExtraClassNames.buttonActive] = {
+                    color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                    backgroundColor: 'transparent',
+                },
+                _g),
+        },
+        'filled-lighter': {
+            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            ':enabled': (_h = {
+                    ':hover': {
+                        color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                        backgroundColor: 'transparent',
+                    },
+                    ':active': {
+                        color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                        backgroundColor: 'transparent',
+                    }
+                },
+                _h["&." + spinButtonExtraClassNames.buttonActive] = {
+                    color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                    backgroundColor: 'transparent',
+                },
+                _h),
+        },
+    });
+    /**
+     * Apply styling to the SpinButton slots based on the state
+     */
+    var useSpinButtonStyles_unstable = function (state) {
+        var appearance = state.appearance, atBound = state.atBound, spinState = state.spinState, size = state.size;
+        var disabled = state.input.disabled;
+        var invalid = "" + state.input['aria-invalid'] === 'true';
+        var filled = appearance.startsWith('filled');
+        var rootStyles = useRootStyles();
+        var buttonStyles = useButtonStyles();
+        var buttonDisabledStyles = useButtonDisabledStyles();
+        var inputStyles = useInputStyles();
+        // Grab the root className here so we can be sure to merge is last
+        var rootClassName = state.root.className;
+        state.root.className = undefined;
+        // Reuse react-input's styles without re-using the Input component.
+        react_input_1.useInputStyles_unstable({
+            size: size,
+            appearance: appearance,
+            input: state.input,
+            root: state.root,
+            components: {
+                root: 'span',
+                input: 'input',
+                contentBefore: 'span',
+                contentAfter: 'span',
+            },
+        });
+        state.root.className = react_1.mergeClasses(state.root.className, // Get the classes from useInputStyles_unstable
+        exports.spinButtonClassNames.root, rootStyles.base, rootStyles[size], appearance === 'outline' && rootStyles.outline, appearance === 'underline' && rootStyles.underline, filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, rootClassName);
+        state.incrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.incrementButton, spinState === 'up' && "" + spinButtonExtraClassNames.buttonActive, buttonStyles.base, buttonStyles.incrementButton, buttonStyles[appearance], size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], state.incrementButton.className);
+        state.decrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.decrementButton, spinState === 'down' && "" + spinButtonExtraClassNames.buttonActive, buttonStyles.base, buttonStyles.decrementButton, buttonStyles[appearance], size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], state.decrementButton.className);
+        state.input.className = react_1.mergeClasses(exports.spinButtonClassNames.input, state.input.className, inputStyles.base);
+        return state;
+    };
+    exports.useSpinButtonStyles_unstable = useSpinButtonStyles_unstable;
+});
+//# sourceMappingURL=useSpinButtonStyles.js.map