@fluentui/react-spinbutton 0.0.0-nightly-20230317-0436.1 → 0.0.0-nightly-20230317-1454.1

package/.swcrc

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "env": {
+    "targets": {
+      "chrome": "84",
+      "edge": "84",
+      "firefox": "75",
+      "opera": "73",
+      "safari": "14.1"
+    },
+    "bugfixes": true
+  },
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "externalHelpers": true,
+    "transform": {
+      "react": {
+        "runtime": "classic",
+        "useSpread": true
+      }
+    }
+  },
+  "minify": false,
+  "sourceMaps": true
+}

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-spinbutton",
   "entries": [
     {
-      "date": "Fri, 17 Mar 2023 04:44:19 GMT",
-      "tag": "@fluentui/react-spinbutton_v0.0.0-nightly-20230317-0436.1",
-      "version": "0.0.0-nightly-20230317-0436.1",
+      "date": "Fri, 17 Mar 2023 15:00:04 GMT",
+      "tag": "@fluentui/react-spinbutton_v0.0.0-nightly-20230317-1454.1",
+      "version": "0.0.0-nightly-20230317-1454.1",
       "comments": {
         "prerelease": [
           {
@@ -16,44 +16,44 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-spinbutton",
-            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230317-0436.1",
-            "commit": "83781b613de20e14968f5f85d52f6836ee4c899f"
+            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230317-1454.1",
+            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-spinbutton",
-            "comment": "Bump @fluentui/react-field to v0.0.0-nightly-20230317-0436.1",
-            "commit": "83781b613de20e14968f5f85d52f6836ee4c899f"
+            "comment": "Bump @fluentui/react-field to v0.0.0-nightly-20230317-1454.1",
+            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-spinbutton",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230317-0436.1",
-            "commit": "83781b613de20e14968f5f85d52f6836ee4c899f"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230317-1454.1",
+            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-spinbutton",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230317-0436.1",
-            "commit": "83781b613de20e14968f5f85d52f6836ee4c899f"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230317-1454.1",
+            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-spinbutton",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-0436.1",
-            "commit": "83781b613de20e14968f5f85d52f6836ee4c899f"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-1454.1",
+            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-spinbutton",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230317-0436.1",
-            "commit": "83781b613de20e14968f5f85d52f6836ee4c899f"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230317-1454.1",
+            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-spinbutton",
-            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230317-0436.1",
-            "commit": "83781b613de20e14968f5f85d52f6836ee4c899f"
+            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230317-1454.1",
+            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,24 +1,24 @@
 # Change Log - @fluentui/react-spinbutton
 
-This log was last generated on Fri, 17 Mar 2023 04:44:19 GMT and should not be manually modified.
+This log was last generated on Fri, 17 Mar 2023 15:00:04 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230317-0436.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v0.0.0-nightly-20230317-0436.1)
+## [0.0.0-nightly-20230317-1454.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v0.0.0-nightly-20230317-1454.1)
 
-Fri, 17 Mar 2023 04:44:19 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.2.4..@fluentui/react-spinbutton_v0.0.0-nightly-20230317-0436.1)
+Fri, 17 Mar 2023 15:00:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.2.4..@fluentui/react-spinbutton_v0.0.0-nightly-20230317-1454.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230317-0436.1 ([commit](https://github.com/microsoft/fluentui/commit/83781b613de20e14968f5f85d52f6836ee4c899f) by beachball)
-- Bump @fluentui/react-field to v0.0.0-nightly-20230317-0436.1 ([commit](https://github.com/microsoft/fluentui/commit/83781b613de20e14968f5f85d52f6836ee4c899f) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230317-0436.1 ([commit](https://github.com/microsoft/fluentui/commit/83781b613de20e14968f5f85d52f6836ee4c899f) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230317-0436.1 ([commit](https://github.com/microsoft/fluentui/commit/83781b613de20e14968f5f85d52f6836ee4c899f) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-0436.1 ([commit](https://github.com/microsoft/fluentui/commit/83781b613de20e14968f5f85d52f6836ee4c899f) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230317-0436.1 ([commit](https://github.com/microsoft/fluentui/commit/83781b613de20e14968f5f85d52f6836ee4c899f) by beachball)
-- Bump @fluentui/react-label to v0.0.0-nightly-20230317-0436.1 ([commit](https://github.com/microsoft/fluentui/commit/83781b613de20e14968f5f85d52f6836ee4c899f) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
+- Bump @fluentui/react-field to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
+- Bump @fluentui/react-label to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
 
 ## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.2.4)
 

package/lib/SpinButton.js

@@ -1,2 +1,2 @@
-export * from './components/SpinButton/index';
+export * from "./components/SpinButton/index";
 //# sourceMappingURL=SpinButton.js.map

package/lib/SpinButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpinButton.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-spinbutton/src/SpinButton.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/SpinButton/index';\n"]}
+{"version":3,"names":[],"sources":["../src/SpinButton.ts"],"sourcesContent":["export * from './components/SpinButton/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/SpinButtonField.js

@@ -1,2 +1,2 @@
-export * from './components/SpinButtonField/index';
+export * from "./components/SpinButtonField/index";
 //# sourceMappingURL=SpinButtonField.js.map

package/lib/SpinButtonField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpinButtonField.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-spinbutton/src/SpinButtonField.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC","sourcesContent":["export * from './components/SpinButtonField/index';\n"]}
+{"version":3,"names":[],"sources":["../src/SpinButtonField.ts"],"sourcesContent":["export * from './components/SpinButtonField/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/components/SpinButton/SpinButton.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { useSpinButton_unstable } from './useSpinButton';
-import { renderSpinButton_unstable } from './renderSpinButton';
-import { useSpinButtonStyles_unstable } from './useSpinButtonStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useSpinButton_unstable } from "./useSpinButton";
+import { renderSpinButton_unstable } from "./renderSpinButton";
+import { useSpinButtonStyles_unstable } from "./useSpinButtonStyles";
+import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
 /**
  * A SpinButton allows someone to incrementally adjust a value in small steps.
  */
@@ -15,5 +15,5 @@ export const SpinButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   useCustomStyles(state);
   return renderSpinButton_unstable(state);
 });
-SpinButton.displayName = 'SpinButton';
+SpinButton.displayName = "SpinButton";
 //# sourceMappingURL=SpinButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useSpinButton_unstable","renderSpinButton_unstable","useSpinButtonStyles_unstable","useCustomStyleHooks_unstable","SpinButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx"],"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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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\n  const { useSpinButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderSpinButton_unstable(state);\n});\n\nSpinButton.displayName = 'SpinButton';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,4BAA4B,QAAQ,uBAAuB;AAGpE,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,UAAU,gBAAyCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGR,sBAAsB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAEhDL,4BAA4B,CAACM,KAAK,CAAC;EAEnC,MAAM;IAAEN,4BAA4B,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACxFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOP,yBAAyB,CAACO,KAAK,CAAC;AACzC,CAAC,CAAC;AAEFJ,UAAU,CAACM,WAAW,GAAG,YAAY"}
+{"version":3,"names":["React","useSpinButton_unstable","renderSpinButton_unstable","useSpinButtonStyles_unstable","useCustomStyleHooks_unstable","SpinButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/SpinButton/SpinButton.tsx"],"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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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\n  const { useSpinButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderSpinButton_unstable(state);\n});\n\nSpinButton.displayName = 'SpinButton';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,sBAAsB,QAAQ;AACvC,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAG7C,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,UAAA,gBAAmDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC/F,MAAMC,KAAA,GAAQR,sBAAA,CAAuBM,KAAA,EAAOC,GAAA;EAE5CL,4BAAA,CAA6BM,KAAA;EAE7B,MAAM;IAAEN,4BAAA,EAA8BO;EAAe,CAAE,GAAGN,4BAAA;EAC1DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,yBAAA,CAA0BO,KAAA;AACnC;AAEAJ,UAAA,CAAWM,WAAW,GAAG"}

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

@@ -1,2 +1,2 @@
-export {};
+import * as React from "react";
 //# sourceMappingURL=SpinButton.types.js.map

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

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

package/lib/components/SpinButton/index.js

@@ -1,6 +1,6 @@
-export * from './SpinButton';
-export * from './SpinButton.types';
-export * from './renderSpinButton';
-export * from './useSpinButton';
-export * from './useSpinButtonStyles';
+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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/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"]}
+{"version":3,"names":[],"sources":["../../../src/components/SpinButton/index.ts"],"sourcesContent":["export * from './SpinButton';\nexport * from './SpinButton.types';\nexport * from './renderSpinButton';\nexport * from './useSpinButton';\nexport * from './useSpinButtonStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/SpinButton/renderSpinButton.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+import * as React from "react";
+import { getSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of SpinButton
  */
@@ -8,14 +8,6 @@ export const renderSpinButton_unstable = state => {
     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
-  }));
+  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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderSpinButton_unstable","state","slots","slotProps","createElement","root","input","incrementButton","decrementButton"],"sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/renderSpinButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SpinButtonState, SpinButtonSlots } from './SpinButton.types';\n\n/**\n * Render the final JSX of SpinButton\n */\nexport const renderSpinButton_unstable = (state: SpinButtonState) => {\n  const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      <slots.incrementButton {...slotProps.incrementButton} />\n      <slots.decrementButton {...slotProps.decrementButton} />\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAkBE,KAAK,CAAC;EAE7D,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,gBAC5BP,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,KAAK;IAAA,GAAKH,SAAS,CAACG;EAAK,EAAI,eACpCR,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACK,eAAe;IAAA,GAAKJ,SAAS,CAACI;EAAe,EAAI,eACxDT,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACM,eAAe;IAAA,GAAKL,SAAS,CAACK;EAAe,EAAI,CAC7C;AAEjB,CAAC"}
+{"version":3,"names":["React","getSlots","renderSpinButton_unstable","state","slots","slotProps","createElement","root","input","incrementButton","decrementButton"],"sources":["../../../src/components/SpinButton/renderSpinButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SpinButtonState, SpinButtonSlots } from './SpinButton.types';\n\n/**\n * Render the final JSX of SpinButton\n */\nexport const renderSpinButton_unstable = (state: SpinButtonState) => {\n  const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      <slots.incrementButton {...slotProps.incrementButton} />\n      <slots.decrementButton {...slotProps.decrementButton} />\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAA2B;EACnE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAA0BE,KAAA;EAEvD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,eAC5BP,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,KAAK,EAAKH,SAAA,CAAUG,KAAK,gBAChCR,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMK,eAAe,EAAKJ,SAAA,CAAUI,eAAe,gBACpDT,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMM,eAAe,EAAKL,SAAA,CAAUK,eAAe;AAG1D"}

package/lib/components/SpinButton/useSpinButton.js

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useControllableState, useTimeout } from '@fluentui/react-utilities';
-import { ArrowUp, ArrowDown, End, Enter, Escape, Home, PageDown, PageUp } from '@fluentui/keyboard-keys';
-import { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';
-import { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';
-import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useControllableState, useTimeout } from "@fluentui/react-utilities";
+import { ArrowUp, ArrowDown, End, Enter, Escape, Home, PageDown, PageUp } from "@fluentui/keyboard-keys";
+import { calculatePrecision, precisionRound, getBound, clamp } from "../../utils/index";
+import { ChevronUp16Regular, ChevronDown16Regular } from "@fluentui/react-icons";
+import { useOverrides_unstable as useOverrides } from "@fluentui/react-shared-contexts";
 const DEFAULT_SPIN_DELAY_MS = 150;
 const MIN_SPIN_DELAY_MS = 80;
 const MAX_SPIN_TIME_MS = 1000;
@@ -21,11 +21,10 @@ const lerp = (start, end, percent) => start + (end - start) * percent;
  * @param ref - reference to root HTMLElement of SpinButton
  */
 export const useSpinButton_unstable = (props, ref) => {
-  var _a, _b;
   const nativeProps = getPartitionedNativeProps({
     props,
-    primarySlotTagName: 'input',
-    excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value']
+    primarySlotTagName: "input",
+    excludedPropNames: ["defaultValue", "max", "min", "onChange", "size", "value"]
   });
   const overrides = useOverrides();
   const {
@@ -38,15 +37,15 @@ export const useSpinButton_unstable = (props, ref) => {
     stepPage = 1,
     precision: precisionFromProps,
     onChange,
-    size = 'medium',
-    appearance = (_a = overrides.inputDefaultAppearance) !== null && _a !== void 0 ? _a : 'outline',
+    size = "medium",
+    appearance = overrides.inputDefaultAppearance ?? "outline",
     root,
     input,
     incrementButton,
     decrementButton
   } = props;
   const precision = React.useMemo(() => {
-    return precisionFromProps !== null && precisionFromProps !== void 0 ? precisionFromProps : Math.max(calculatePrecision(step), 0);
+    return precisionFromProps ?? Math.max(calculatePrecision(step), 0);
   }, [precisionFromProps, step]);
   const [currentValue, setCurrentValue] = useControllableState({
     state: value,
@@ -55,13 +54,13 @@ export const useSpinButton_unstable = (props, ref) => {
   });
   const isControlled = value !== undefined;
   const [textValue, setTextValue] = React.useState(undefined);
-  const [keyboardSpinState, setKeyboardSpinState] = React.useState('rest');
+  const [keyboardSpinState, setKeyboardSpinState] = React.useState("rest");
   const internalState = React.useRef({
     value: currentValue,
-    spinState: 'rest',
+    spinState: "rest",
     spinTime: 0,
     spinDelay: DEFAULT_SPIN_DELAY_MS,
-    atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none'
+    atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : "none"
   });
   const [setStepTimeout, clearStepTimeout] = useTimeout();
   const stepValue = (e, direction, startFrom) => {
@@ -73,8 +72,8 @@ export const useSpinButton_unstable = (props, ref) => {
       }
     }
     const val = startValue;
-    const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;
-    const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;
+    const dir = direction === "up" || direction === "upPage" ? 1 : -1;
+    const stepSize = direction === "upPage" || direction === "downPage" ? stepPage : step;
     if (val === null) {
       const stepStart = min === undefined ? 0 : min;
       const nullStep = clamp(stepStart + stepSize * dir, min, max);
@@ -86,7 +85,7 @@ export const useSpinButton_unstable = (props, ref) => {
       newValue = clamp(newValue, min, max);
     }
     commit(e, newValue);
-    if (internalState.current.spinState !== 'rest') {
+    if (internalState.current.spinState !== "rest") {
       setStepTimeout(() => {
         // Ease the step speed a bit
         internalState.current.spinTime += internalState.current.spinDelay;
@@ -97,22 +96,22 @@ export const useSpinButton_unstable = (props, ref) => {
   };
   const handleInputChange = e => {
     if (!internalState.current.previousTextValue) {
-      internalState.current.previousTextValue = textValue !== null && textValue !== void 0 ? textValue : String(currentValue);
+      internalState.current.previousTextValue = textValue ?? String(currentValue);
     }
     const newValue = e.target.value;
     setTextValue(newValue);
   };
   const handleIncrementMouseDown = e => {
-    internalState.current.spinState = 'up';
-    stepValue(e, 'up');
+    internalState.current.spinState = "up";
+    stepValue(e, "up");
   };
   const handleDecrementMouseDown = e => {
-    internalState.current.spinState = 'down';
-    stepValue(e, 'down');
+    internalState.current.spinState = "down";
+    stepValue(e, "down");
   };
   const handleStepMouseUpOrLeave = e => {
     clearStepTimeout();
-    internalState.current.spinState = 'rest';
+    internalState.current.spinState = "rest";
     internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;
     internalState.current.spinTime = 0;
   };
@@ -121,27 +120,27 @@ export const useSpinButton_unstable = (props, ref) => {
     internalState.current.previousTextValue = undefined;
   };
   const handleKeyDown = e => {
-    let nextKeyboardSpinState = 'rest';
+    let nextKeyboardSpinState = "rest";
     if (e.key === ArrowUp) {
-      stepValue(e, 'up', textValue);
-      nextKeyboardSpinState = 'up';
+      stepValue(e, "up", textValue);
+      nextKeyboardSpinState = "up";
     } else if (e.key === ArrowDown) {
-      stepValue(e, 'down', textValue);
-      nextKeyboardSpinState = 'down';
+      stepValue(e, "down", textValue);
+      nextKeyboardSpinState = "down";
     } else if (e.key === PageUp) {
       e.preventDefault();
-      stepValue(e, 'upPage', textValue);
-      nextKeyboardSpinState = 'up';
+      stepValue(e, "upPage", textValue);
+      nextKeyboardSpinState = "up";
     } else if (e.key === PageDown) {
       e.preventDefault();
-      stepValue(e, 'downPage', textValue);
-      nextKeyboardSpinState = 'down';
+      stepValue(e, "downPage", textValue);
+      nextKeyboardSpinState = "down";
     } else if (!e.shiftKey && e.key === Home && min !== undefined) {
       commit(e, min);
-      nextKeyboardSpinState = 'down';
+      nextKeyboardSpinState = "down";
     } else if (!e.shiftKey && e.key === End && max !== undefined) {
       commit(e, max);
-      nextKeyboardSpinState = 'up';
+      nextKeyboardSpinState = "up";
     } else if (e.key === Enter) {
       commit(e, currentValue, textValue);
       internalState.current.previousTextValue = undefined;
@@ -156,9 +155,9 @@ export const useSpinButton_unstable = (props, ref) => {
     }
   };
   const handleKeyUp = e => {
-    if (keyboardSpinState !== 'rest') {
-      setKeyboardSpinState('rest');
-      internalState.current.spinState = 'rest';
+    if (keyboardSpinState !== "rest") {
+      setKeyboardSpinState("rest");
+      internalState.current.spinState = "rest";
     }
   };
   const commit = (e, newValue, newDisplayValue) => {
@@ -175,7 +174,7 @@ export const useSpinButton_unstable = (props, ref) => {
       }
     }
     if (valueChanged || displayValueChanged) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(e, {
+      onChange?.(e, {
         value: roundedValue,
         displayValue: newDisplayValue
       });
@@ -188,10 +187,10 @@ export const useSpinButton_unstable = (props, ref) => {
     spinState: keyboardSpinState,
     atBound: internalState.current.atBound,
     components: {
-      root: 'span',
-      input: 'input',
-      incrementButton: 'button',
-      decrementButton: 'button'
+      root: "span",
+      input: "input",
+      incrementButton: "button",
+      decrementButton: "button"
     },
     root: resolveShorthand(root, {
       required: true,
@@ -201,10 +200,10 @@ export const useSpinButton_unstable = (props, ref) => {
       required: true,
       defaultProps: {
         ref,
-        autoComplete: 'off',
-        role: 'spinbutton',
+        autoComplete: "off",
+        role: "spinbutton",
         appearance,
-        type: 'text',
+        type: "text",
         ...nativeProps.primary
       }
     }),
@@ -214,8 +213,8 @@ export const useSpinButton_unstable = (props, ref) => {
         tabIndex: -1,
         children: /*#__PURE__*/React.createElement(ChevronUp16Regular, null),
         disabled: nativeProps.primary.disabled,
-        'aria-label': 'Increment value',
-        type: 'button'
+        "aria-label": "Increment value",
+        type: "button"
       }
     }),
     decrementButton: resolveShorthand(decrementButton, {
@@ -224,8 +223,8 @@ export const useSpinButton_unstable = (props, ref) => {
         tabIndex: -1,
         children: /*#__PURE__*/React.createElement(ChevronDown16Regular, null),
         disabled: nativeProps.primary.disabled,
-        'aria-label': 'Decrement value',
-        type: 'button'
+        "aria-label": "Decrement value",
+        type: "button"
       }
     })
   };
@@ -233,24 +232,24 @@ export const useSpinButton_unstable = (props, ref) => {
   if (textValue !== undefined) {
     valueToDisplay = textValue;
   } else if (value === null || currentValue === null) {
-    valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : '';
+    valueToDisplay = displayValue ?? "";
     internalState.current.value = null;
-    internalState.current.atBound = 'none';
+    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);
+      valueToDisplay = displayValue ?? String(roundedValue);
     } else {
       valueToDisplay = String(roundedValue);
     }
   }
   state.input.value = valueToDisplay;
-  state.input['aria-valuemin'] = min;
-  state.input['aria-valuemax'] = max;
-  state.input['aria-valuenow'] = currentValue !== null && currentValue !== void 0 ? currentValue : undefined;
-  state.input['aria-valuetext'] = (_b = state.input['aria-valuetext']) !== null && _b !== void 0 ? _b : value !== undefined && displayValue || undefined;
+  state.input["aria-valuemin"] = min;
+  state.input["aria-valuemax"] = max;
+  state.input["aria-valuenow"] = currentValue ?? undefined;
+  state.input["aria-valuetext"] = state.input["aria-valuetext"] ?? (value !== undefined && displayValue || undefined);
   state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);
   state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);
   state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);