@fluentui/react-spinbutton 0.0.0-nightly-20220421-0418.1

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpinButton = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const useSpinButton_1 = /*#__PURE__*/require("./useSpinButton");
+
+const renderSpinButton_1 = /*#__PURE__*/require("./renderSpinButton");
+
+const useSpinButtonStyles_1 = /*#__PURE__*/require("./useSpinButtonStyles");
+/**
+ * A SpinButton allows someone to incrementally adjust a value in small steps.
+ */
+
+
+exports.SpinButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useSpinButton_1.useSpinButton_unstable(props, ref);
+  useSpinButtonStyles_1.useSpinButtonStyles_unstable(state);
+  return renderSpinButton_1.renderSpinButton_unstable(state);
+});
+exports.SpinButton.displayName = 'SpinButton';
+//# sourceMappingURL=SpinButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/SpinButton/SpinButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;AAEA,EAAA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;AACA,SAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useSpinButton_unstable } from './useSpinButton';\nimport { renderSpinButton_unstable } from './renderSpinButton';\nimport { useSpinButtonStyles_unstable } from './useSpinButtonStyles';\nimport type { SpinButtonProps } from './SpinButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A SpinButton allows someone to incrementally adjust a value in small steps.\n */\nexport const SpinButton: ForwardRefComponent<SpinButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSpinButton_unstable(props, ref);\n\n  useSpinButtonStyles_unstable(state);\n  return renderSpinButton_unstable(state);\n});\n\nSpinButton.displayName = 'SpinButton';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/SpinButton/SpinButton.strings.d.ts

@@ -0,0 +1,2 @@
+import type { SpinButtonStrings } from './SpinButton.types';
+export declare const spinButtonDefaultStrings: SpinButtonStrings;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.spinButtonDefaultStrings = void 0;
+exports.spinButtonDefaultStrings = {
+  incrementButtonLabel: 'Increment by {step}',
+  decrementButtonLabel: 'Decrement by {step}'
+};
+//# sourceMappingURL=SpinButton.strings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/SpinButton/SpinButton.strings.ts"],"names":[],"mappings":";;;;;;AAEa,OAAA,CAAA,wBAAA,GAA8C;AACzD,EAAA,oBAAoB,EAAE,qBADmC;AAEzD,EAAA,oBAAoB,EAAE;AAFmC,CAA9C","sourcesContent":["import type { SpinButtonStrings } from './SpinButton.types';\n\nexport const spinButtonDefaultStrings: SpinButtonStrings = {\n  incrementButtonLabel: 'Increment by {step}',\n  decrementButtonLabel: 'Decrement by {step}',\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/SpinButton/SpinButton.types.d.ts

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

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

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=SpinButton.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/components/SpinButton/index.d.ts

@@ -0,0 +1,5 @@
+export * from './SpinButton';
+export * from './SpinButton.types';
+export * from './renderSpinButton';
+export * from './useSpinButton';
+export * from './useSpinButtonStyles';

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/SpinButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './SpinButton';\nexport * from './SpinButton.types';\nexport * from './renderSpinButton';\nexport * from './useSpinButton';\nexport * from './useSpinButtonStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/SpinButton/renderSpinButton.d.ts

@@ -0,0 +1,5 @@
+import type { SpinButtonState } from './SpinButton.types';
+/**
+ * Render the final JSX of SpinButton
+ */
+export declare const renderSpinButton_unstable: (state: SpinButtonState) => JSX.Element;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 => {
+  // Leaving this here for now.
+  // This is the approach using react-input's Input component.
+  // It has some Typescript problems and feels hacky.
+  // const { slots, slotProps } = getSlots<SpinButtonSlots>(state);
+  // const { contentAfter, ...otherInputSlotProps } = slotProps.input as SpinButtonSlots['input'];
+  // const inputContentAfter = {
+  //   ...contentAfter,
+  //   children: (
+  //     <>
+  //       <slots.incrementButton {...slotProps.incrementButton} />
+  //       <slots.decrementButton {...slotProps.decrementButton} />
+  //     </>
+  //   ),
+  // };
+  // return (
+  //   <slots.root {...slotProps.root}>
+  //     <slots.input {...otherInputSlotProps} contentAfter={inputContentAfter}/>
+  //   </slots.root>
+  // );
+  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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/SpinButton/renderSpinButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAtB,CAFF,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAtB,CAHF,CADF;AAOD,CAhCM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","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  // Leaving this here for now.\n  // This is the approach using react-input's Input component.\n  // It has some Typescript problems and feels hacky.\n  // const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n  // const { contentAfter, ...otherInputSlotProps } = slotProps.input as SpinButtonSlots['input'];\n  // const inputContentAfter = {\n  //   ...contentAfter,\n  //   children: (\n  //     <>\n  //       <slots.incrementButton {...slotProps.incrementButton} />\n  //       <slots.decrementButton {...slotProps.decrementButton} />\n  //     </>\n  //   ),\n  // };\n\n  // return (\n  //   <slots.root {...slotProps.root}>\n  //     <slots.input {...otherInputSlotProps} contentAfter={inputContentAfter}/>\n  //   </slots.root>\n  // );\n\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"],"sourceRoot":"../src/"}

package/lib-commonjs/components/SpinButton/useSpinButton.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { SpinButtonProps, SpinButtonState } from './SpinButton.types';
+/**
+ * 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
+ */
+export declare const useSpinButton_unstable: (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>) => SpinButtonState;

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

@@ -0,0 +1,278 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSpinButton_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const Keys = /*#__PURE__*/require("@fluentui/keyboard-keys");
+
+const SpinButton_strings_1 = /*#__PURE__*/require("./SpinButton.strings");
+
+const index_1 = /*#__PURE__*/require("../../utils/index");
+
+const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
+
+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;
+/**
+ * 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) => {
+  const nativeProps = react_utilities_1.getPartitionedNativeProps({
+    props,
+    primarySlotTagName: 'input',
+    excludedPropNames: ['onChange', 'size', 'min', 'max']
+  });
+  const {
+    value,
+    displayValue,
+    defaultValue,
+    min,
+    max,
+    step = 1,
+    stepPage = 1,
+    precision: precisionFromProps,
+    onChange,
+    size = 'medium',
+    appearance = 'outline',
+    root,
+    input,
+    incrementButton,
+    decrementButton,
+    inputType = 'all',
+    strings = SpinButton_strings_1.spinButtonDefaultStrings
+  } = 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 [textValue, setTextValue] = React.useState(value !== undefined && displayValue !== undefined ? displayValue : String(currentValue));
+  const [spinState, setSpinState] = React.useState('rest');
+  const [atBound, setAtBound] = React.useState('none');
+  const internalState = React.useRef({
+    value: currentValue,
+    spinState,
+    spinTime: 0,
+    spinDelay: DEFAULT_SPIN_DELAY_MS
+  });
+  const state = {
+    size,
+    appearance,
+    spinState,
+    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: 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': strings.incrementButtonLabel.replace('{step}', step.toString())
+      }
+    }),
+    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': strings.decrementButtonLabel.replace('{step}', step.toString())
+      }
+    })
+  };
+  const [setStepTimeout, clearStepTimeout] = react_utilities_1.useTimeout();
+  React.useEffect(() => {
+    let newTextValue;
+
+    if (value !== undefined) {
+      const roundedValue = index_1.precisionRound(value, precision);
+      newTextValue = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);
+      internalState.current.value = roundedValue;
+      setAtBound(index_1.getBound(roundedValue, min, max));
+    } else {
+      newTextValue = String(index_1.precisionRound(currentValue, precision));
+      internalState.current.value = currentValue;
+    }
+
+    setTextValue(newTextValue);
+  }, [value, displayValue, currentValue, precision, setAtBound, min, max]);
+
+  const handleInputChange = e => {
+    if (inputType === 'spinners-only') {
+      return;
+    }
+
+    if (!internalState.current.previousTextValue) {
+      internalState.current.previousTextValue = textValue;
+    }
+
+    const newValue = e.target.value;
+    setTextValue(newValue);
+  };
+
+  const stepValue = (e, direction) => {
+    const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;
+    const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;
+    const val = internalState.current.value;
+    let newValue = val + stepSize * dir;
+
+    if (!Number.isNaN(newValue)) {
+      newValue = index_1.clampWhenInRange(val, 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 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 => {
+    if (e.key === Keys.ArrowUp) {
+      stepValue(e, 'up');
+      setSpinState('up');
+    } else if (e.key === Keys.ArrowDown) {
+      stepValue(e, 'down');
+      setSpinState('down');
+    } else if (e.key === Keys.PageUp) {
+      e.preventDefault();
+      stepValue(e, 'upPage');
+      setSpinState('up');
+    } else if (e.key === Keys.PageDown) {
+      e.preventDefault();
+      stepValue(e, 'downPage');
+      setSpinState('down');
+    } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {
+      commit(e, min);
+      setSpinState('down');
+    } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {
+      commit(e, max);
+      setSpinState('up');
+    } else if (e.key === Keys.Enter) {
+      commit(e, currentValue, textValue);
+      setSpinState('rest');
+    } else if (e.key === Keys.Escape) {
+      if (internalState.current.previousTextValue) {
+        setTextValue(internalState.current.previousTextValue);
+        internalState.current.previousTextValue = undefined;
+      }
+
+      setSpinState('rest');
+    } else {
+      setSpinState('rest');
+    }
+  };
+
+  const handleKeyUp = e => {
+    setSpinState('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);
+      internalState.current.value = roundedValue;
+      setAtBound(index_1.getBound(roundedValue, min, max));
+    }
+
+    if (valueChanged || displayValueChanged) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(e, {
+        value: roundedValue,
+        displayValue: newDisplayValue
+      });
+    }
+  };
+
+  state.input.value = textValue;
+  state.input['aria-valuemin'] = min;
+  state.input['aria-valuemax'] = max;
+  state.input['aria-valuenow'] = currentValue;
+  state.input['aria-valuetext'] = value !== undefined && displayValue || undefined;
+  state.input.onChange = react_utilities_1.useMergedEventCallbacks(state.input.onChange, handleInputChange);
+  state.input.onBlur = react_utilities_1.useMergedEventCallbacks(state.input.onBlur, handleBlur);
+  state.input.onKeyDown = react_utilities_1.useMergedEventCallbacks(state.input.onKeyDown, handleKeyDown);
+  state.input.onKeyUp = react_utilities_1.useMergedEventCallbacks(state.input.onKeyUp, handleKeyUp);
+  state.incrementButton.onMouseDown = react_utilities_1.useMergedEventCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);
+  state.incrementButton.onMouseUp = react_utilities_1.useMergedEventCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);
+  state.incrementButton.onMouseLeave = react_utilities_1.useMergedEventCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);
+  state.decrementButton.onMouseDown = react_utilities_1.useMergedEventCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);
+  state.decrementButton.onMouseUp = react_utilities_1.useMergedEventCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);
+  state.decrementButton.onMouseLeave = react_utilities_1.useMergedEventCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);
+  return state;
+};
+
+exports.useSpinButton_unstable = useSpinButton_unstable;
+//# sourceMappingURL=useSpinButton.js.map

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

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

package/lib-commonjs/components/SpinButton/useSpinButtonStyles.d.ts

@@ -0,0 +1,7 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';
+export declare const spinButtonClassNames: SlotClassNames<SpinButtonSlots>;
+/**
+ * Apply styling to the SpinButton slots based on the state
+ */
+export declare const useSpinButtonStyles_unstable: (state: SpinButtonState) => SpinButtonState;