@fluentui/react-spinbutton 9.2.4 → 9.2.6

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

@@ -1,273 +1,262 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "useSpinButton_unstable", {
+    enumerable: true,
+    get: ()=>useSpinButton_unstable
 });
-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 _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");
 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 for 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;
-/**
- * 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 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)();
+    var _overrides_inputDefaultAppearance;
+    const { value , displayValue , defaultValue , min , max , step =1 , stepPage =1 , precision: precisionFromProps , onChange , size ='medium' , appearance =(_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline' , root , input , incrementButton , decrementButton  } = props;
+    const precision = _react.useMemo(()=>{
+        return precisionFromProps !== null && precisionFromProps !== void 0 ? 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 !== 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;
-      }
-    }
-    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',
+    };
+    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
+            });
+        }
+        setTextValue(undefined);
+    };
+    const state = {
+        size,
         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'
-      }
-    })
-  };
-  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);
+        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 !== null && displayValue !== void 0 ? displayValue : '';
+        internalState.current.value = null;
+        internalState.current.atBound = 'none';
     } else {
-      valueToDisplay = String(roundedValue);
+        const roundedValue = (0, _index.precisionRound)(currentValue, precision);
+        internalState.current.value = roundedValue;
+        internalState.current.atBound = (0, _index.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'] = (_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;
+    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;
+    var _state_input_ariavaluetext;
+    state.input['aria-valuetext'] = (_state_input_ariavaluetext = state.input['aria-valuetext']) !== null && _state_input_ariavaluetext !== void 0 ? _state_input_ariavaluetext : 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
+
 //# sourceMappingURL=useSpinButton.js.map