@fluentui/react-spinbutton 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230321-0440.1

package/lib-commonjs/components/SpinButton/SpinButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/SpinButton/SpinButton.types.js"],"sourcesContent":["import * as React from \"react\";\n//# sourceMappingURL=SpinButton.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,4CAA4C"}
+{"version":3,"names":[],"sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type SpinButtonSlots = {\n  /**\n   * The root element of SpinButton is a container `<div>`.\n   * The root slot receives the `className` and `style` specified on the `<SpinButton>`.\n   * All other native props are applied to the primary slot: `input`.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * Input that displays the current value and accepts direct input from the user.\n   * Displayed value is formatted.\n   *\n   * This is the primary slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * Renders the increment control.\n   */\n  incrementButton: NonNullable<Slot<'button'>>;\n\n  /**\n   * Renders the decrement control.\n   */\n  decrementButton: NonNullable<Slot<'button'>>;\n};\n\n/**\n * SpinButton Props\n */\nexport type SpinButtonProps = Omit<\n  ComponentProps<Partial<SpinButtonSlots>, 'input'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n  /**\n   * Controls the colors and borders of the input.\n   * @default 'outline'\n   */\n  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n  /**\n   * Initial value of the control (assumed to be valid). Updates to this prop will not be respected.\n   *\n   * Use this if you intend for the SpinButton to be an uncontrolled component which maintains its\n   * own value. For a controlled component, use `value` instead. (Mutually exclusive with `value`.)\n   *\n   * Use `null` to indicate the control has no value.\n   */\n  defaultValue?: number | null;\n\n  /**\n   * String representation of `value`.\n   *\n   * Use this when displaying the value to users as something other than a plain number.\n   * For example, when displaying currency values this might be \"$1.00\" when value is `1`.\n   *\n   * Only provide this if the SpinButton is a controlled component where you are maintaining its\n   * current state and passing updates based on change events. When SpinButton is used as an\n   * uncontrolled component this prop is ignored.\n   */\n  displayValue?: string;\n\n  /**\n   * Max value of the control. If not provided, the control has no maximum value.\n   */\n  max?: number;\n\n  /**\n   * Min value of the control. If not provided, the control has no minimum value.\n   */\n  min?: number;\n\n  /**\n   * Callback for when the committed value changes.\n   * - User presses the up/down buttons (on single press or every spin)\n   * - User presses the up/down arrow keys (on single press or every spin)\n   * - User *commits* edits to the input text by focusing away (blurring) or pressing enter.\n   *   Note that this is NOT called for every key press while the user is editing.\n   */\n  onChange?: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;\n\n  /**\n   * How many decimal places the value should be rounded to.\n   *\n   * The default is calculated based on the precision of `step`: i.e. if step = 1, precision = 0.\n   * step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.\n   */\n  precision?: number;\n\n  /**\n   * Size of the input.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * Difference between two adjacent values of the control.\n   * This value is used to calculate the precision of the input if no `precision` is given.\n   * The precision calculated this way will always be greater than or equal 0.\n   * @default 1\n   */\n  step?: number;\n\n  /**\n   * Large difference between two values. This should be greater than `step` and is used\n   * when users hit the Page Up or Page Down keys.\n   * @default 1\n   */\n  stepPage?: number;\n\n  /**\n   * Current value of the control (assumed to be valid).\n   *\n   * Only provide this if the SpinButton is a controlled component where you are maintaining its\n   * current state and passing updates based on change events; otherwise, use the `defaultValue`\n   * property.\n   *\n   * Use `null` to indicate the control has no value.\n   *\n   * Mutually exclusive with `defaultValue`.\n   */\n  value?: number | null;\n};\n\n/**\n * State used in rendering SpinButton\n */\nexport type SpinButtonState = ComponentState<SpinButtonSlots> &\n  Required<Pick<SpinButtonProps, 'appearance' | 'size'>> & {\n    /**\n     * State used to track which direction, if any, SpinButton is currently spinning.\n     * @default 'rest'\n     */\n    spinState: SpinButtonSpinState;\n\n    /**\n     * State used to track if the value is at the range bounds of [min-max].\n     * @default 'none'\n     */\n    atBound: SpinButtonBounds;\n  };\n\nexport type SpinButtonChangeEvent =\n  | React.MouseEvent<HTMLButtonElement>\n  | React.ChangeEvent<HTMLElement>\n  | React.FocusEvent<HTMLInputElement>\n  | React.KeyboardEvent<HTMLInputElement>;\n\nexport type SpinButtonOnChangeData = {\n  value?: number | null;\n  displayValue?: string;\n};\n\nexport type SpinButtonSpinState = 'rest' | 'up' | 'down';\nexport type SpinButtonBounds = 'none' | 'min' | 'max' | 'both';\n"],"mappings":""}

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

@@ -1,13 +1,12 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
-_exportStar(require("./SpinButton"), exports);
-_exportStar(require("./SpinButton.types"), exports);
-_exportStar(require("./renderSpinButton"), exports);
-_exportStar(require("./useSpinButton"), exports);
-_exportStar(require("./useSpinButtonStyles"), exports);
- //# sourceMappingURL=index.js.map
-
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./SpinButton"), exports);
+tslib_1.__exportStar(require("./SpinButton.types"), exports);
+tslib_1.__exportStar(require("./renderSpinButton"), exports);
+tslib_1.__exportStar(require("./useSpinButton"), exports);
+tslib_1.__exportStar(require("./useSpinButtonStyles"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/SpinButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/SpinButton/index.js"],"sourcesContent":["export * from \"./SpinButton\";\nexport * from \"./SpinButton.types\";\nexport * from \"./renderSpinButton\";\nexport * from \"./useSpinButton\";\nexport * from \"./useSpinButtonStyles\";\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/index.ts"],"sourcesContent":["export * from './SpinButton';\nexport * from './SpinButton.types';\nexport * from './renderSpinButton';\nexport * from './useSpinButton';\nexport * from './useSpinButtonStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,kBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,wBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,wBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,qBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,2BAAAC,OAAA"}

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

@@ -1,17 +1,28 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "renderSpinButton_unstable", {
-    enumerable: true,
-    get: ()=>renderSpinButton_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 renderSpinButton_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
-    return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, /*#__PURE__*/ _react.createElement(slots.input, slotProps.input), /*#__PURE__*/ _react.createElement(slots.incrementButton, slotProps.incrementButton), /*#__PURE__*/ _react.createElement(slots.decrementButton, slotProps.decrementButton));
-}; //# sourceMappingURL=renderSpinButton.js.map
-
+exports.renderSpinButton_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Render the final JSX of SpinButton
+ */
+const renderSpinButton_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, React.createElement(slots.input, {
+    ...slotProps.input
+  }), React.createElement(slots.incrementButton, {
+    ...slotProps.incrementButton
+  }), React.createElement(slots.decrementButton, {
+    ...slotProps.decrementButton
+  }));
+};
+exports.renderSpinButton_unstable = renderSpinButton_unstable;
 //# sourceMappingURL=renderSpinButton.js.map

package/lib-commonjs/components/SpinButton/renderSpinButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/SpinButton/renderSpinButton.js"],"sourcesContent":["import * as React from \"react\";\nimport { getSlots } from \"@fluentui/react-utilities\";\n/**\n * Render the final JSX of SpinButton\n */\nexport const renderSpinButton_unstable = state => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(slots.input, slotProps.input), /*#__PURE__*/React.createElement(slots.incrementButton, slotProps.incrementButton), /*#__PURE__*/React.createElement(slots.decrementButton, slotProps.decrementButton));\n};\n//# sourceMappingURL=renderSpinButton.js.map"],"names":["renderSpinButton_unstable","state","slots","slotProps","getSlots","React","createElement","root","input","incrementButton","decrementButton"],"mappings":";;;;+BAKaA;;aAAAA;;;6DALU;gCACE;AAIlB,MAAMA,4BAA4BC,CAAAA,QAAS;IAChD,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,OAAO,WAAW,GAAEI,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,EAAE,WAAW,GAAEF,OAAMC,aAAa,CAACJ,MAAMM,KAAK,EAAEL,UAAUK,KAAK,GAAG,WAAW,GAAEH,OAAMC,aAAa,CAACJ,MAAMO,eAAe,EAAEN,UAAUM,eAAe,GAAG,WAAW,GAAEJ,OAAMC,aAAa,CAACJ,MAAMQ,eAAe,EAAEP,UAAUO,eAAe;AAC3S,GACA,4CAA4C"}
+{"version":3,"names":["React","require","react_utilities_1","renderSpinButton_unstable","state","slots","slotProps","getSlots","createElement","root","input","incrementButton","decrementButton","exports"],"sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/renderSpinButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SpinButtonState, SpinButtonSlots } from './SpinButton.types';\n\n/**\n * Render the final JSX of SpinButton\n */\nexport const renderSpinButton_unstable = (state: SpinButtonState) => {\n  const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      <slots.incrementButton {...slotProps.incrementButton} />\n      <slots.decrementButton {...slotProps.decrementButton} />\n    </slots.root>\n  );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAGA;;;AAGO,MAAME,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAkBH,KAAK,CAAC;EAE7D,OACEJ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BT,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EACpCV,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACM,eAAe;IAAA,GAAKL,SAAS,CAACK;EAAe,EAAI,EACxDX,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACO,eAAe;IAAA,GAAKN,SAAS,CAACM;EAAe,EAAI,CAC7C;AAEjB,CAAC;AAVYC,OAAA,CAAAV,yBAAyB,GAAAA,yBAAA"}

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 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;
-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?.(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