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

package/lib/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/components/SpinButton/SpinButton.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SpinButton.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpinButton.types.js","sourceRoot":"../src/","sources":["components/SpinButton/SpinButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n// import { Input } from '@fluentui/react-input';\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\nexport type SpinButtonCommons = {\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  defaultValue: 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. (Mutually exclusive with `defaultValue`.)\n   */\n  value: number;\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   * Min value of the control. If not provided, the control has no minimum value.\n   */\n  min: number;\n\n  /**\n   * Max value of the control. If not provided, the control has no maximum value.\n   */\n  max: number;\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   * 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   * Controls the colors and borders of the input.\n   * @default 'outline'\n   */\n  appearance: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';\n\n  /**\n   * Size of the input.\n   * @default 'medium'\n   */\n  size: 'small' | 'medium';\n\n  /**\n   * Controls which input types update the value.\n   *\n   * - 'all': both the spinner buttons and input field are enabled.\n   * - 'spinners-only': only the spinner buttons are enabled.\n   * @default all\n   */\n  inputType: 'all' | 'spinners-only';\n\n  /**\n   * Strings for localizing text in the control.\n   */\n  strings?: SpinButtonStrings;\n};\n\n/**\n * SpinButton Props\n */\nexport type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlots>, 'input'>, 'onChange' | 'size'> &\n  Partial<SpinButtonCommons>;\n\n/**\n * State used in rendering SpinButton\n */\nexport type SpinButtonState = ComponentState<SpinButtonSlots> &\n  Partial<SpinButtonCommons> &\n  Pick<SpinButtonCommons, '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;\n  displayValue?: string;\n};\n\nexport type SpinButtonSpinState = 'rest' | 'up' | 'down';\nexport type SpinButtonBounds = 'none' | 'min' | 'max' | 'both';\n\nexport type SpinButtonStrings = {\n  /**\n   * Label applied to the increment button.\n   * Can include the token \"\\{step\\}\" which will be replaced with the value of the `step` prop.\n   */\n  incrementButtonLabel: string;\n\n  /**\n   * Label applied to the decrement button.\n   * Can include the token \"\\{step\\}\" which will be replaced with the value of the `step` prop.\n   */\n  decrementButtonLabel: string;\n};\n"]}

package/lib/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/components/SpinButton/index.js

@@ -0,0 +1,6 @@
+export * from './SpinButton';
+export * from './SpinButton.types';
+export * from './renderSpinButton';
+export * from './useSpinButton';
+export * from './useSpinButtonStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/SpinButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './SpinButton';\nexport * from './SpinButton.types';\nexport * from './renderSpinButton';\nexport * from './useSpinButton';\nexport * from './useSpinButtonStyles';\n"]}

package/lib/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/components/SpinButton/renderSpinButton.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of SpinButton
+ */
+
+export 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
+  } = 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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/SpinButton/renderSpinButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,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,QAAQ,CAAkB,KAAlB,CAArC;AAEA,sBACE,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","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/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/components/SpinButton/useSpinButton.js

@@ -0,0 +1,263 @@
+import * as React from 'react';
+import { getPartitionedNativeProps, resolveShorthand, useControllableState, useMergedEventCallbacks, useTimeout } from '@fluentui/react-utilities';
+import * as Keys from '@fluentui/keyboard-keys';
+import { spinButtonDefaultStrings } from './SpinButton.strings';
+import { calculatePrecision, precisionRound, getBound, clampWhenInRange } from '../../utils/index';
+import { ChevronUp16Regular, ChevronDown16Regular } from '@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
+ */
+
+
+export const useSpinButton_unstable = (props, ref) => {
+  const nativeProps = 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 = spinButtonDefaultStrings
+  } = props;
+  const precision = React.useMemo(() => {
+    return precisionFromProps !== null && precisionFromProps !== void 0 ? precisionFromProps : Math.max(calculatePrecision(step), 0);
+  }, [precisionFromProps, step]);
+  const [currentValue, setCurrentValue] = 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: resolveShorthand(root, {
+      required: true,
+      defaultProps: nativeProps.root
+    }),
+    input: resolveShorthand(input, {
+      required: true,
+      defaultProps: {
+        ref,
+        autoComplete: 'off',
+        role: 'spinbutton',
+        appearance: appearance,
+        type: 'text',
+        ...nativeProps.primary
+      }
+    }),
+    incrementButton: resolveShorthand(incrementButton, {
+      required: true,
+      defaultProps: {
+        tabIndex: -1,
+        children: /*#__PURE__*/React.createElement(ChevronUp16Regular, null),
+        disabled: nativeProps.primary.disabled,
+        'aria-label': strings.incrementButtonLabel.replace('{step}', step.toString())
+      }
+    }),
+    decrementButton: resolveShorthand(decrementButton, {
+      required: true,
+      defaultProps: {
+        tabIndex: -1,
+        children: /*#__PURE__*/React.createElement(ChevronDown16Regular, null),
+        disabled: nativeProps.primary.disabled,
+        'aria-label': strings.decrementButtonLabel.replace('{step}', step.toString())
+      }
+    })
+  };
+  const [setStepTimeout, clearStepTimeout] = useTimeout();
+  React.useEffect(() => {
+    let newTextValue;
+
+    if (value !== undefined) {
+      const roundedValue = precisionRound(value, precision);
+      newTextValue = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);
+      internalState.current.value = roundedValue;
+      setAtBound(getBound(roundedValue, min, max));
+    } else {
+      newTextValue = String(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 = 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 = precisionRound(newValue, precision);
+      setCurrentValue(roundedValue);
+      internalState.current.value = roundedValue;
+      setAtBound(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 = useMergedEventCallbacks(state.input.onChange, handleInputChange);
+  state.input.onBlur = useMergedEventCallbacks(state.input.onBlur, handleBlur);
+  state.input.onKeyDown = useMergedEventCallbacks(state.input.onKeyDown, handleKeyDown);
+  state.input.onKeyUp = useMergedEventCallbacks(state.input.onKeyUp, handleKeyUp);
+  state.incrementButton.onMouseDown = useMergedEventCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);
+  state.incrementButton.onMouseUp = useMergedEventCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);
+  state.incrementButton.onMouseLeave = useMergedEventCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);
+  state.decrementButton.onMouseDown = useMergedEventCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);
+  state.decrementButton.onMouseUp = useMergedEventCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);
+  state.decrementButton.onMouseLeave = useMergedEventCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);
+  return state;
+};
+//# sourceMappingURL=useSpinButton.js.map

package/lib/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/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;