@fluentui/react-spinbutton 9.0.0-beta.9 → 9.0.0

package/README.md

@@ -1,10 +1,8 @@
 # @fluentui/react-spinbutton
 
-**SpinButton component for [Fluent UI React](https://aka.ms/fluentui-storybook)**
+**SpinButton component for [Fluent UI React](https://react.fluentui.dev/)**
 
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
-
-SpinButtons are used to allow numeric input bounded between minimum and maximum values with button controls to increment and decrement the input value by some step amount. Values can also be manipulated via the keyboard.
+SpinButtons are used to allow numeric input bounded between minimum and maximum values with buttons to increment and decrement the input value. Values can also be manipulated via the keyboard.
 
 ### Usage
 
@@ -21,7 +19,7 @@ import { SpinButton } from '@fluentui/react-spinbutton';
 <SpinButton value={value} onChange={onSpinButtonChange}/>
 ```
 
-See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
+See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
 
 Alternatively, run Storybook locally with:
 
@@ -34,4 +32,4 @@ See [Spec.md](./Spec.md).
 
 ### Migration Guide
 
-If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest SpinButton implementation.
+When upgrading to Fluent UI v9 see the [upgrade guide](https://react.fluentui.dev/?path=/docs/concepts-upgrading-from-v8-components-spinbutton-upgrade--page) for guidance on updating to the latest SpinButton implementation.

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -21,22 +23,29 @@ export declare type SpinButtonChangeEvent = React_2.MouseEvent<HTMLButtonElement
 
 export declare const spinButtonClassNames: SlotClassNames<SpinButtonSlots>;
 
-export declare type SpinButtonCommons = {
+export declare type SpinButtonOnChangeData = {
+    value?: number | null;
+    displayValue?: string;
+};
+
+/**
+ * SpinButton Props
+ */
+export declare type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlots>, 'input'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & {
+    /**
+     * Controls the colors and borders of the input.
+     * @default 'outline'
+     */
+    appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
     /**
      * 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`.)
+     * Use `null` to indicate the control has no value.
      */
-    value: number;
+    defaultValue?: number | null;
     /**
      * String representation of `value`.
      *
@@ -47,28 +56,15 @@ export declare type SpinButtonCommons = {
      * 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;
+    displayValue?: string;
     /**
      * 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;
+    max?: 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
+     * Min value of the control. If not provided, the control has no minimum value.
      */
-    stepPage: number;
+    min?: number;
     /**
      * Callback for when the committed value changes.
      * - User presses the up/down buttons (on single press or every spin)
@@ -76,40 +72,46 @@ export declare type SpinButtonCommons = {
      * - 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;
+    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';
+    precision?: number;
     /**
      * Size of the input.
      * @default 'medium'
      */
-    size: 'small' | 'medium';
+    size?: 'small' | 'medium';
     /**
-     * Strings for localizing text in the control.
+     * 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
      */
-    strings?: SpinButtonStrings;
-};
-
-export declare type SpinButtonOnChangeData = {
-    value?: number;
-    displayValue?: string;
+    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;
+    /**
+     * 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.
+     *
+     * Use `null` to indicate the control has no value.
+     *
+     * Mutually exclusive with `defaultValue`.
+     */
+    value?: number | null;
 };
 
-/**
- * SpinButton Props
- */
-export declare type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlots>, 'input'>, 'onChange' | 'size'> & Partial<SpinButtonCommons>;
-
 export declare type SpinButtonSlots = {
     /**
      * The root element of SpinButton is a container `<div>`.
@@ -139,7 +141,7 @@ export declare type SpinButtonSpinState = 'rest' | 'up' | 'down';
 /**
  * State used in rendering SpinButton
  */
-export declare type SpinButtonState = ComponentState<SpinButtonSlots> & Partial<SpinButtonCommons> & Pick<SpinButtonCommons, 'appearance' | 'size'> & {
+export declare type SpinButtonState = ComponentState<SpinButtonSlots> & Required<Pick<SpinButtonProps, 'appearance' | 'size'>> & {
     /**
      * State used to track which direction, if any, SpinButton is currently spinning.
      * @default 'rest'
@@ -152,19 +154,6 @@ export declare type SpinButtonState = ComponentState<SpinButtonSlots> & Partial<
     atBound: SpinButtonBounds;
 };
 
-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;
-};
-
 /**
  * Create the state required to render SpinButton.
  *

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

@@ -1 +1 @@
-{"version":3,"sources":["components/SpinButton/SpinButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;AAEA,EAAA,4BAA4B,CAAC,KAAD,CAA5B;AACA,SAAO,yBAAyB,CAAC,KAAD,CAAhC;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,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/"}
+{"version":3,"sources":["components/SpinButton/SpinButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;EAEA,4BAA4B,CAAC,KAAD,CAA5B;EACA,OAAO,yBAAyB,CAAC,KAAD,CAAhC;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,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/components/SpinButton/SpinButton.types.js.map

@@ -1 +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   * 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"]}
+{"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\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"]}

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

@@ -1 +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/"}
+{"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;EAClE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAkB,KAAlB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,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.js

@@ -1,8 +1,7 @@
 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 { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';
 import { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';
 const DEFAULT_SPIN_DELAY_MS = 150;
 const MIN_SPIN_DELAY_MS = 80;
@@ -23,10 +22,12 @@ const lerp = (start, end, percent) => start + (end - start) * percent;
 
 
 export const useSpinButton_unstable = (props, ref) => {
+  var _a;
+
   const nativeProps = getPartitionedNativeProps({
     props,
     primarySlotTagName: 'input',
-    excludedPropNames: ['onChange', 'size', 'min', 'max']
+    excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value']
   });
   const {
     value,
@@ -43,8 +44,7 @@ export const useSpinButton_unstable = (props, ref) => {
     root,
     input,
     incrementButton,
-    decrementButton,
-    strings = spinButtonDefaultStrings
+    decrementButton
   } = props;
   const precision = React.useMemo(() => {
     return precisionFromProps !== null && precisionFromProps !== void 0 ? precisionFromProps : Math.max(calculatePrecision(step), 0);
@@ -54,94 +54,44 @@ export const useSpinButton_unstable = (props, ref) => {
     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 isControlled = value !== undefined;
+  const [textValue, setTextValue] = React.useState(undefined);
+  const [keyboardSpinState, setKeyboardSpinState] = React.useState('rest');
   const internalState = React.useRef({
     value: currentValue,
-    spinState,
+    spinState: 'rest',
     spinTime: 0,
-    spinDelay: DEFAULT_SPIN_DELAY_MS
+    spinDelay: DEFAULT_SPIN_DELAY_MS,
+    atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none'
   });
-  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 stepValue = (e, direction, startFrom) => {
+    let startValue = internalState.current.value;
 
-  const handleInputChange = e => {
-    if (!internalState.current.previousTextValue) {
-      internalState.current.previousTextValue = textValue;
-    }
+    if (startFrom) {
+      const num = parseFloat(startFrom);
 
-    const newValue = e.target.value;
-    setTextValue(newValue);
-  };
+      if (!isNaN(num)) {
+        startValue = num;
+      }
+    }
 
-  const stepValue = (e, direction) => {
+    const val = startValue;
     const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;
     const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;
-    const val = internalState.current.value;
+
+    if (val === null) {
+      const stepStart = min === undefined ? 0 : min;
+      const nullStep = clamp(stepStart + stepSize * dir, min, max);
+      commit(e, nullStep);
+      return;
+    }
+
     let newValue = val + stepSize * dir;
 
     if (!Number.isNaN(newValue)) {
-      newValue = clampWhenInRange(val, newValue, min, max);
+      newValue = clamp(newValue, min, max);
     }
 
     commit(e, newValue);
@@ -156,6 +106,15 @@ export const useSpinButton_unstable = (props, ref) => {
     }
   };
 
+  const handleInputChange = e => {
+    if (!internalState.current.previousTextValue) {
+      internalState.current.previousTextValue = textValue;
+    }
+
+    const newValue = e.target.value;
+    setTextValue(newValue);
+  };
+
   const handleIncrementMouseDown = e => {
     internalState.current.spinState = 'up';
     stepValue(e, 'up');
@@ -179,43 +138,48 @@ export const useSpinButton_unstable = (props, ref) => {
   };
 
   const handleKeyDown = e => {
+    let nextKeyboardSpinState = 'rest';
+
     if (e.key === Keys.ArrowUp) {
-      stepValue(e, 'up');
-      setSpinState('up');
+      stepValue(e, 'up', textValue);
+      nextKeyboardSpinState = 'up';
     } else if (e.key === Keys.ArrowDown) {
-      stepValue(e, 'down');
-      setSpinState('down');
+      stepValue(e, 'down', textValue);
+      nextKeyboardSpinState = 'down';
     } else if (e.key === Keys.PageUp) {
       e.preventDefault();
-      stepValue(e, 'upPage');
-      setSpinState('up');
+      stepValue(e, 'upPage', textValue);
+      nextKeyboardSpinState = 'up';
     } else if (e.key === Keys.PageDown) {
       e.preventDefault();
-      stepValue(e, 'downPage');
-      setSpinState('down');
+      stepValue(e, 'downPage', textValue);
+      nextKeyboardSpinState = 'down';
     } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {
       commit(e, min);
-      setSpinState('down');
+      nextKeyboardSpinState = 'down';
     } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {
       commit(e, max);
-      setSpinState('up');
+      nextKeyboardSpinState = 'up';
     } else if (e.key === Keys.Enter) {
       commit(e, currentValue, textValue);
-      setSpinState('rest');
+      internalState.current.previousTextValue = undefined;
     } else if (e.key === Keys.Escape) {
       if (internalState.current.previousTextValue) {
-        setTextValue(internalState.current.previousTextValue);
+        setTextValue(undefined);
         internalState.current.previousTextValue = undefined;
       }
+    }
 
-      setSpinState('rest');
-    } else {
-      setSpinState('rest');
+    if (keyboardSpinState !== nextKeyboardSpinState) {
+      setKeyboardSpinState(nextKeyboardSpinState);
     }
   };
 
   const handleKeyUp = e => {
-    setSpinState('rest');
+    if (keyboardSpinState !== 'rest') {
+      setKeyboardSpinState('rest');
+      internalState.current.spinState = 'rest';
+    }
   };
 
   const commit = (e, newValue, newDisplayValue) => {
@@ -226,8 +190,12 @@ export const useSpinButton_unstable = (props, ref) => {
     if (valueChanged) {
       roundedValue = precisionRound(newValue, precision);
       setCurrentValue(roundedValue);
-      internalState.current.value = roundedValue;
-      setAtBound(getBound(roundedValue, min, max));
+    } else if (displayValueChanged && !isControlled) {
+      const nextValue = parseFloat(newDisplayValue);
+
+      if (!isNaN(nextValue)) {
+        setCurrentValue(precisionRound(nextValue, precision));
+      }
     }
 
     if (valueChanged || displayValueChanged) {
@@ -236,13 +204,82 @@ export const useSpinButton_unstable = (props, ref) => {
         displayValue: newDisplayValue
       });
     }
+
+    setTextValue(undefined);
   };
 
-  state.input.value = textValue;
+  const state = {
+    size,
+    appearance,
+    spinState: keyboardSpinState,
+    atBound: internalState.current.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': 'Increment value',
+        type: 'button'
+      }
+    }),
+    decrementButton: resolveShorthand(decrementButton, {
+      required: true,
+      defaultProps: {
+        tabIndex: -1,
+        children: /*#__PURE__*/React.createElement(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 = precisionRound(currentValue, precision);
+    internalState.current.value = roundedValue;
+    internalState.current.atBound = getBound(roundedValue, min, max);
+
+    if (isControlled) {
+      valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);
+    } else {
+      valueToDisplay = String(roundedValue);
+    }
+  }
+
+  state.input.value = valueToDisplay;
   state.input['aria-valuemin'] = min;
   state.input['aria-valuemax'] = max;
-  state.input['aria-valuenow'] = currentValue;
-  state.input['aria-valuetext'] = value !== undefined && displayValue || undefined;
+  state.input['aria-valuenow'] = currentValue !== null && currentValue !== void 0 ? currentValue : undefined;
+  state.input['aria-valuetext'] = (_a = state.input['aria-valuetext']) !== null && _a !== void 0 ? _a : 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);