@fluentui/react-spinbutton 0.0.0-nightly-20230223-2115.1 → 0.0.0-nightly-20230228-0425.1

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

@@ -1,260 +1,273 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useSpinButton_unstable", {
-    enumerable: true,
-    get: ()=>useSpinButton_unstable
+  value: true
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _reactUtilities = require("@fluentui/react-utilities");
-const _keyboardKeys = require("@fluentui/keyboard-keys");
-const _index = require("../../utils/index");
-const _reactIcons = require("@fluentui/react-icons");
-const _reactSharedContexts = require("@fluentui/react-shared-contexts");
+exports.useSpinButton_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
+const index_1 = /*#__PURE__*/require("../../utils/index");
+const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 const DEFAULT_SPIN_DELAY_MS = 150;
 const MIN_SPIN_DELAY_MS = 80;
 const 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.
-const lerp = (start, end, percent)=>start + (end - start) * percent;
-const useSpinButton_unstable = (props, ref)=>{
-    const nativeProps = (0, _reactUtilities.getPartitionedNativeProps)({
-        props,
-        primarySlotTagName: 'input',
-        excludedPropNames: [
-            'defaultValue',
-            'max',
-            'min',
-            'onChange',
-            'size',
-            'value'
-        ]
-    });
-    const overrides = (0, _reactSharedContexts.useOverrides_unstable)();
-    const { value , displayValue , defaultValue , min , max , step =1 , stepPage =1 , precision: precisionFromProps , onChange , size ='medium' , appearance =overrides.inputDefaultAppearance ?? 'outline' , root , input , incrementButton , decrementButton  } = props;
-    const precision = _react.useMemo(()=>{
-        return precisionFromProps ?? Math.max((0, _index.calculatePrecision)(step), 0);
-    }, [
-        precisionFromProps,
-        step
-    ]);
-    const [currentValue, setCurrentValue] = (0, _reactUtilities.useControllableState)({
-        state: value,
-        defaultState: defaultValue,
-        initialState: 0
-    });
-    const isControlled = value !== undefined;
-    const [textValue, setTextValue] = _react.useState(undefined);
-    const [keyboardSpinState, setKeyboardSpinState] = _react.useState('rest');
-    const internalState = _react.useRef({
-        value: currentValue,
-        spinState: 'rest',
-        spinTime: 0,
-        spinDelay: DEFAULT_SPIN_DELAY_MS,
-        atBound: currentValue !== null ? (0, _index.getBound)((0, _index.precisionRound)(currentValue, precision), min, max) : 'none'
-    });
-    const [setStepTimeout, clearStepTimeout] = (0, _reactUtilities.useTimeout)();
-    const stepValue = (e, direction, startFrom)=>{
-        let startValue = internalState.current.value;
-        if (startFrom) {
-            const num = parseFloat(startFrom);
-            if (!isNaN(num)) {
-                startValue = num;
-            }
-        }
-        const val = startValue;
-        const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;
-        const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;
-        if (val === null) {
-            const stepStart = min === undefined ? 0 : min;
-            const nullStep = (0, _index.clamp)(stepStart + stepSize * dir, min, max);
-            commit(e, nullStep);
-            return;
-        }
-        let newValue = val + stepSize * dir;
-        if (!Number.isNaN(newValue)) {
-            newValue = (0, _index.clamp)(newValue, min, max);
-        }
-        commit(e, newValue);
-        if (internalState.current.spinState !== 'rest') {
-            setStepTimeout(()=>{
-                // 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);
-        }
-    };
-    const handleInputChange = (e)=>{
-        if (!internalState.current.previousTextValue) {
-            internalState.current.previousTextValue = textValue ?? String(currentValue);
-        }
-        const newValue = e.target.value;
-        setTextValue(newValue);
-    };
-    const handleIncrementMouseDown = (e)=>{
-        internalState.current.spinState = 'up';
-        stepValue(e, 'up');
-    };
-    const handleDecrementMouseDown = (e)=>{
-        internalState.current.spinState = 'down';
-        stepValue(e, 'down');
-    };
-    const handleStepMouseUpOrLeave = (e)=>{
-        clearStepTimeout();
-        internalState.current.spinState = 'rest';
-        internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;
-        internalState.current.spinTime = 0;
-    };
-    const handleBlur = (e)=>{
-        commit(e, currentValue, textValue);
-        internalState.current.previousTextValue = undefined;
-    };
-    const handleKeyDown = (e)=>{
-        let nextKeyboardSpinState = 'rest';
-        if (e.key === _keyboardKeys.ArrowUp) {
-            stepValue(e, 'up', textValue);
-            nextKeyboardSpinState = 'up';
-        } else if (e.key === _keyboardKeys.ArrowDown) {
-            stepValue(e, 'down', textValue);
-            nextKeyboardSpinState = 'down';
-        } else if (e.key === _keyboardKeys.PageUp) {
-            e.preventDefault();
-            stepValue(e, 'upPage', textValue);
-            nextKeyboardSpinState = 'up';
-        } else if (e.key === _keyboardKeys.PageDown) {
-            e.preventDefault();
-            stepValue(e, 'downPage', textValue);
-            nextKeyboardSpinState = 'down';
-        } else if (!e.shiftKey && e.key === _keyboardKeys.Home && min !== undefined) {
-            commit(e, min);
-            nextKeyboardSpinState = 'down';
-        } else if (!e.shiftKey && e.key === _keyboardKeys.End && max !== undefined) {
-            commit(e, max);
-            nextKeyboardSpinState = 'up';
-        } else if (e.key === _keyboardKeys.Enter) {
-            commit(e, currentValue, textValue);
-            internalState.current.previousTextValue = undefined;
-        } else if (e.key === _keyboardKeys.Escape) {
-            if (internalState.current.previousTextValue) {
-                setTextValue(undefined);
-                internalState.current.previousTextValue = undefined;
-            }
-        }
-        if (keyboardSpinState !== nextKeyboardSpinState) {
-            setKeyboardSpinState(nextKeyboardSpinState);
-        }
-    };
-    const handleKeyUp = (e)=>{
-        if (keyboardSpinState !== 'rest') {
-            setKeyboardSpinState('rest');
-            internalState.current.spinState = 'rest';
-        }
-    };
-    const commit = (e, newValue, newDisplayValue)=>{
-        const valueChanged = newValue !== undefined && currentValue !== newValue;
-        const displayValueChanged = newDisplayValue !== undefined && internalState.current.previousTextValue !== undefined && internalState.current.previousTextValue !== newDisplayValue;
-        let roundedValue;
-        if (valueChanged) {
-            roundedValue = (0, _index.precisionRound)(newValue, precision);
-            setCurrentValue(roundedValue);
-        } else if (displayValueChanged && !isControlled) {
-            const nextValue = parseFloat(newDisplayValue);
-            if (!isNaN(nextValue)) {
-                setCurrentValue((0, _index.precisionRound)(nextValue, precision));
-            }
-        }
-        if (valueChanged || displayValueChanged) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(e, {
-                value: roundedValue,
-                displayValue: newDisplayValue
-            });
-        }
+const lerp = (start, end, percent) => 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
+ */
+const useSpinButton_unstable = (props, ref) => {
+  var _a, _b;
+  const nativeProps = react_utilities_1.getPartitionedNativeProps({
+    props,
+    primarySlotTagName: 'input',
+    excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value']
+  });
+  const overrides = react_shared_contexts_1.useOverrides_unstable();
+  const {
+    value,
+    displayValue,
+    defaultValue,
+    min,
+    max,
+    step = 1,
+    stepPage = 1,
+    precision: precisionFromProps,
+    onChange,
+    size = 'medium',
+    appearance = (_a = overrides.inputDefaultAppearance) !== null && _a !== void 0 ? _a : 'outline',
+    root,
+    input,
+    incrementButton,
+    decrementButton
+  } = props;
+  const precision = React.useMemo(() => {
+    return precisionFromProps !== null && precisionFromProps !== void 0 ? precisionFromProps : Math.max(index_1.calculatePrecision(step), 0);
+  }, [precisionFromProps, step]);
+  const [currentValue, setCurrentValue] = react_utilities_1.useControllableState({
+    state: value,
+    defaultState: defaultValue,
+    initialState: 0
+  });
+  const isControlled = value !== undefined;
+  const [textValue, setTextValue] = React.useState(undefined);
+  const [keyboardSpinState, setKeyboardSpinState] = React.useState('rest');
+  const 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'
+  });
+  const [setStepTimeout, clearStepTimeout] = react_utilities_1.useTimeout();
+  const stepValue = (e, direction, startFrom) => {
+    let startValue = internalState.current.value;
+    if (startFrom) {
+      const num = parseFloat(startFrom);
+      if (!isNaN(num)) {
+        startValue = num;
+      }
+    }
+    const val = startValue;
+    const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;
+    const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;
+    if (val === null) {
+      const stepStart = min === undefined ? 0 : min;
+      const nullStep = index_1.clamp(stepStart + stepSize * dir, min, max);
+      commit(e, nullStep);
+      return;
+    }
+    let newValue = val + stepSize * dir;
+    if (!Number.isNaN(newValue)) {
+      newValue = index_1.clamp(newValue, min, max);
+    }
+    commit(e, newValue);
+    if (internalState.current.spinState !== 'rest') {
+      setStepTimeout(() => {
+        // 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);
+    }
+  };
+  const handleInputChange = e => {
+    if (!internalState.current.previousTextValue) {
+      internalState.current.previousTextValue = textValue !== null && textValue !== void 0 ? textValue : String(currentValue);
+    }
+    const newValue = e.target.value;
+    setTextValue(newValue);
+  };
+  const handleIncrementMouseDown = e => {
+    internalState.current.spinState = 'up';
+    stepValue(e, 'up');
+  };
+  const handleDecrementMouseDown = e => {
+    internalState.current.spinState = 'down';
+    stepValue(e, 'down');
+  };
+  const handleStepMouseUpOrLeave = e => {
+    clearStepTimeout();
+    internalState.current.spinState = 'rest';
+    internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;
+    internalState.current.spinTime = 0;
+  };
+  const handleBlur = e => {
+    commit(e, currentValue, textValue);
+    internalState.current.previousTextValue = undefined;
+  };
+  const handleKeyDown = e => {
+    let nextKeyboardSpinState = 'rest';
+    if (e.key === keyboard_keys_1.ArrowUp) {
+      stepValue(e, 'up', textValue);
+      nextKeyboardSpinState = 'up';
+    } else if (e.key === keyboard_keys_1.ArrowDown) {
+      stepValue(e, 'down', textValue);
+      nextKeyboardSpinState = 'down';
+    } else if (e.key === keyboard_keys_1.PageUp) {
+      e.preventDefault();
+      stepValue(e, 'upPage', textValue);
+      nextKeyboardSpinState = 'up';
+    } else if (e.key === keyboard_keys_1.PageDown) {
+      e.preventDefault();
+      stepValue(e, 'downPage', textValue);
+      nextKeyboardSpinState = 'down';
+    } else if (!e.shiftKey && e.key === keyboard_keys_1.Home && min !== undefined) {
+      commit(e, min);
+      nextKeyboardSpinState = 'down';
+    } else if (!e.shiftKey && e.key === keyboard_keys_1.End && max !== undefined) {
+      commit(e, max);
+      nextKeyboardSpinState = 'up';
+    } else if (e.key === keyboard_keys_1.Enter) {
+      commit(e, currentValue, textValue);
+      internalState.current.previousTextValue = undefined;
+    } else if (e.key === keyboard_keys_1.Escape) {
+      if (internalState.current.previousTextValue) {
         setTextValue(undefined);
-    };
-    const state = {
-        size,
+        internalState.current.previousTextValue = undefined;
+      }
+    }
+    if (keyboardSpinState !== nextKeyboardSpinState) {
+      setKeyboardSpinState(nextKeyboardSpinState);
+    }
+  };
+  const handleKeyUp = e => {
+    if (keyboardSpinState !== 'rest') {
+      setKeyboardSpinState('rest');
+      internalState.current.spinState = 'rest';
+    }
+  };
+  const commit = (e, newValue, newDisplayValue) => {
+    const valueChanged = newValue !== undefined && currentValue !== newValue;
+    const displayValueChanged = newDisplayValue !== undefined && internalState.current.previousTextValue !== undefined && internalState.current.previousTextValue !== newDisplayValue;
+    let roundedValue;
+    if (valueChanged) {
+      roundedValue = index_1.precisionRound(newValue, precision);
+      setCurrentValue(roundedValue);
+    } else if (displayValueChanged && !isControlled) {
+      const 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);
+  };
+  const state = {
+    size,
+    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: {
+        ref,
+        autoComplete: 'off',
+        role: 'spinbutton',
         appearance,
-        spinState: keyboardSpinState,
-        atBound: internalState.current.atBound,
-        components: {
-            root: 'span',
-            input: 'input',
-            incrementButton: 'button',
-            decrementButton: 'button'
-        },
-        root: (0, _reactUtilities.resolveShorthand)(root, {
-            required: true,
-            defaultProps: nativeProps.root
-        }),
-        input: (0, _reactUtilities.resolveShorthand)(input, {
-            required: true,
-            defaultProps: {
-                ref,
-                autoComplete: 'off',
-                role: 'spinbutton',
-                appearance,
-                type: 'text',
-                ...nativeProps.primary
-            }
-        }),
-        incrementButton: (0, _reactUtilities.resolveShorthand)(incrementButton, {
-            required: true,
-            defaultProps: {
-                tabIndex: -1,
-                children: /*#__PURE__*/ _react.createElement(_reactIcons.ChevronUp16Regular, null),
-                disabled: nativeProps.primary.disabled,
-                'aria-label': 'Increment value',
-                type: 'button'
-            }
-        }),
-        decrementButton: (0, _reactUtilities.resolveShorthand)(decrementButton, {
-            required: true,
-            defaultProps: {
-                tabIndex: -1,
-                children: /*#__PURE__*/ _react.createElement(_reactIcons.ChevronDown16Regular, null),
-                disabled: nativeProps.primary.disabled,
-                'aria-label': 'Decrement value',
-                type: 'button'
-            }
-        })
-    };
-    let valueToDisplay;
-    if (textValue !== undefined) {
-        valueToDisplay = textValue;
-    } else if (value === null || currentValue === null) {
-        valueToDisplay = displayValue ?? '';
-        internalState.current.value = null;
-        internalState.current.atBound = 'none';
+        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'
+      }
+    })
+  };
+  let 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 {
+    const 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 {
-        const roundedValue = (0, _index.precisionRound)(currentValue, precision);
-        internalState.current.value = roundedValue;
-        internalState.current.atBound = (0, _index.getBound)(roundedValue, min, max);
-        if (isControlled) {
-            valueToDisplay = displayValue ?? String(roundedValue);
-        } else {
-            valueToDisplay = String(roundedValue);
-        }
+      valueToDisplay = String(roundedValue);
     }
-    state.input.value = valueToDisplay;
-    state.input['aria-valuemin'] = min;
-    state.input['aria-valuemax'] = max;
-    state.input['aria-valuenow'] = currentValue ?? undefined;
-    state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? (value !== undefined && displayValue || undefined);
-    state.input.onChange = (0, _reactUtilities.mergeCallbacks)(state.input.onChange, handleInputChange);
-    state.input.onBlur = (0, _reactUtilities.mergeCallbacks)(state.input.onBlur, handleBlur);
-    state.input.onKeyDown = (0, _reactUtilities.mergeCallbacks)(state.input.onKeyDown, handleKeyDown);
-    state.input.onKeyUp = (0, _reactUtilities.mergeCallbacks)(state.input.onKeyUp, handleKeyUp);
-    state.incrementButton.onMouseDown = (0, _reactUtilities.mergeCallbacks)(handleIncrementMouseDown, state.incrementButton.onMouseDown);
-    state.incrementButton.onMouseUp = (0, _reactUtilities.mergeCallbacks)(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);
-    state.incrementButton.onMouseLeave = (0, _reactUtilities.mergeCallbacks)(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);
-    state.decrementButton.onMouseDown = (0, _reactUtilities.mergeCallbacks)(handleDecrementMouseDown, state.decrementButton.onMouseDown);
-    state.decrementButton.onMouseUp = (0, _reactUtilities.mergeCallbacks)(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);
-    state.decrementButton.onMouseLeave = (0, _reactUtilities.mergeCallbacks)(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);
-    return state;
-}; //# sourceMappingURL=useSpinButton.js.map
-
+  }
+  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'] = (_b = state.input['aria-valuetext']) !== null && _b !== void 0 ? _b : 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