@fluentui/react-spinbutton 9.1.7 → 9.2.1

package/CHANGELOG.json

@@ -2,7 +2,81 @@
   "name": "@fluentui/react-spinbutton",
   "entries": [
     {
-      "date": "Wed, 22 Feb 2023 23:04:48 GMT",
+      "date": "Fri, 10 Mar 2023 07:11:10 GMT",
+      "tag": "@fluentui/react-spinbutton_v9.2.1",
+      "version": "9.2.1",
+      "comments": {
+        "none": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "d11b9e38fee14ef5a0bb3dd6f2e7a70c015b4796",
+            "comment": "chore: clean up comments in SpinButton source code"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.23",
+            "commit": "3cefc38eed17e3f37cd38fca9099cc9d700cd584"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-utilities to v9.6.2",
+            "commit": "3cefc38eed17e3f37cd38fca9099cc9d700cd584"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-label to v9.1.1",
+            "commit": "3cefc38eed17e3f37cd38fca9099cc9d700cd584"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 08 Mar 2023 17:42:43 GMT",
+      "tag": "@fluentui/react-spinbutton_v9.2.0",
+      "version": "9.2.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "bfe1448d48e975d7731a63049336c6cdd962c0a0",
+            "comment": "feat: custom styles"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.22",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-utilities to v9.6.1",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-label to v9.1.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 22 Feb 2023 23:06:07 GMT",
       "tag": "@fluentui/react-spinbutton_v9.1.7",
       "version": "9.1.7",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-spinbutton
 
-This log was last generated on Wed, 22 Feb 2023 23:04:48 GMT and should not be manually modified.
+This log was last generated on Fri, 10 Mar 2023 07:11:10 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.2.1)
+
+Fri, 10 Mar 2023 07:11:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.2.0..@fluentui/react-spinbutton_v9.2.1)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.0.0-alpha.23 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
+- Bump @fluentui/react-utilities to v9.6.2 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
+- Bump @fluentui/react-label to v9.1.1 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
+
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.2.0)
+
+Wed, 08 Mar 2023 17:42:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.1.7..@fluentui/react-spinbutton_v9.2.0)
+
+### Minor changes
+
+- feat: custom styles ([PR #27074](https://github.com/microsoft/fluentui/pull/27074) by gcox@microsoft.com)
+- Bump @fluentui/react-field to v9.0.0-alpha.22 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.3.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-utilities to v9.6.1 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-label to v9.1.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+
 ## [9.1.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.1.7)
 
-Wed, 22 Feb 2023 23:04:48 GMT 
+Wed, 22 Feb 2023 23:06:07 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.1.6..@fluentui/react-spinbutton_v9.1.7)
 
 ### Patches

package/lib/components/SpinButton/SpinButton.js

@@ -2,12 +2,17 @@ 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.
  */
 export const SpinButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useSpinButton_unstable(props, ref);
   useSpinButtonStyles_unstable(state);
+  const {
+    useSpinButtonStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderSpinButton_unstable(state);
 });
 SpinButton.displayName = 'SpinButton';

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,4BAA4B,QAAQ,uBAAuB;AAIpE;;;AAGA,OAAO,MAAMC,UAAU,gBAAyCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGP,sBAAsB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEhDJ,4BAA4B,CAACK,KAAK,CAAC;EACnC,OAAON,yBAAyB,CAACM,KAAK,CAAC;AACzC,CAAC,CAAC;AAEFJ,UAAU,CAACK,WAAW,GAAG,YAAY","names":["React","useSpinButton_unstable","renderSpinButton_unstable","useSpinButtonStyles_unstable","SpinButton","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","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';\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"]}
+{"version":3,"names":["React","useSpinButton_unstable","renderSpinButton_unstable","useSpinButtonStyles_unstable","useCustomStyleHooks_unstable","SpinButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/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"}

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

@@ -1 +1 @@
-{"version":3,"file":"SpinButton.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/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"]}
+{"version":3,"file":"SpinButton.types.js","sourceRoot":"../src/","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"]}

package/lib/components/SpinButton/renderSpinButton.js

@@ -4,25 +4,6 @@ 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

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAsB,IAAI;EAClE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAkBE,KAAK,CAAC;EAE7D,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BN,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,eACpCP,oBAACI,KAAK,CAACI,eAAe;IAAA,GAAKH,SAAS,CAACG;EAAe,EAAI,eACxDR,oBAACI,KAAK,CAACK,eAAe;IAAA,GAAKJ,SAAS,CAACI;EAAe,EAAI,CAC7C;AAEjB,CAAC","names":["React","getSlots","renderSpinButton_unstable","state","slots","slotProps","root","input","incrementButton","decrementButton"],"sourceRoot":"../src/","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  // 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"]}
+{"version":3,"names":["React","getSlots","renderSpinButton_unstable","state","slots","slotProps","createElement","root","input","incrementButton","decrementButton"],"sources":["../src/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"}

package/lib/components/SpinButton/useSpinButton.js

@@ -7,7 +7,7 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
 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.
+// This is here to give an ease for the mouse held down case.
 // Exact easing it to be defined. Once it is we'll likely
 // pull this out into a util function in the SpinButton package.
 const lerp = (start, end, percent) => start + (end - start) * percent;

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["React","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useControllableState","useTimeout","ArrowUp","ArrowDown","End","Enter","Escape","Home","PageDown","PageUp","calculatePrecision","precisionRound","getBound","clamp","ChevronUp16Regular","ChevronDown16Regular","useOverrides_unstable","useOverrides","DEFAULT_SPIN_DELAY_MS","MIN_SPIN_DELAY_MS","MAX_SPIN_TIME_MS","lerp","start","end","percent","useSpinButton_unstable","props","ref","nativeProps","primarySlotTagName","excludedPropNames","overrides","value","displayValue","defaultValue","min","max","step","stepPage","precision","precisionFromProps","onChange","size","appearance","inputDefaultAppearance","root","input","incrementButton","decrementButton","useMemo","Math","currentValue","setCurrentValue","state","defaultState","initialState","isControlled","undefined","textValue","setTextValue","useState","keyboardSpinState","setKeyboardSpinState","internalState","useRef","spinState","spinTime","spinDelay","atBound","setStepTimeout","clearStepTimeout","stepValue","e","direction","startFrom","startValue","current","num","parseFloat","isNaN","val","dir","stepSize","stepStart","nullStep","commit","newValue","Number","handleInputChange","previousTextValue","String","target","handleIncrementMouseDown","handleDecrementMouseDown","handleStepMouseUpOrLeave","handleBlur","handleKeyDown","nextKeyboardSpinState","key","preventDefault","shiftKey","handleKeyUp","newDisplayValue","valueChanged","displayValueChanged","roundedValue","nextValue","components","required","defaultProps","autoComplete","role","type","primary","tabIndex","children","disabled","valueToDisplay","onBlur","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  resolveShorthand,\n  useControllableState,\n  useTimeout,\n} from '@fluentui/react-utilities';\nimport { ArrowUp, ArrowDown, End, Enter, Escape, Home, PageDown, PageUp } from '@fluentui/keyboard-keys';\nimport {\n  SpinButtonProps,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonChangeEvent,\n  SpinButtonBounds,\n} from './SpinButton.types';\nimport { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\ntype InternalState = {\n  value: number | null;\n  spinState: SpinButtonSpinState;\n  spinTime: number;\n  spinDelay: number;\n  previousTextValue?: string;\n  atBound: SpinButtonBounds;\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: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],\n  });\n\n  const overrides = useOverrides();\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 = overrides.inputDefaultAppearance ?? 'outline',\n    root,\n    input,\n    incrementButton,\n    decrementButton,\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\n  const isControlled = value !== undefined;\n\n  const [textValue, setTextValue] = React.useState<string | undefined>(undefined);\n  const [keyboardSpinState, setKeyboardSpinState] = React.useState<SpinButtonSpinState>('rest');\n\n  const internalState = React.useRef<InternalState>({\n    value: currentValue,\n    spinState: 'rest',\n    spinTime: 0,\n    spinDelay: DEFAULT_SPIN_DELAY_MS,\n    atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none',\n  });\n\n  const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n  const stepValue = (\n    e: SpinButtonChangeEvent,\n    direction: 'up' | 'down' | 'upPage' | 'downPage',\n    startFrom?: string,\n  ) => {\n    let startValue = internalState.current.value;\n    if (startFrom) {\n      const num = parseFloat(startFrom);\n      if (!isNaN(num)) {\n        startValue = num;\n      }\n    }\n    const val = startValue;\n    const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n    const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n    if (val === null) {\n      const stepStart = min === undefined ? 0 : min;\n      const nullStep = clamp(stepStart + stepSize * dir, min, max);\n      commit(e, nullStep);\n      return;\n    }\n\n    let newValue = val + stepSize * dir;\n    if (!Number.isNaN(newValue)) {\n      newValue = clamp(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 handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!internalState.current.previousTextValue) {\n      internalState.current.previousTextValue = textValue ?? String(currentValue);\n    }\n    const newValue = e.target.value;\n    setTextValue(newValue);\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    let nextKeyboardSpinState: SpinButtonSpinState = 'rest';\n\n    if (e.key === ArrowUp) {\n      stepValue(e, 'up', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === ArrowDown) {\n      stepValue(e, 'down', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (e.key === PageUp) {\n      e.preventDefault();\n      stepValue(e, 'upPage', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === PageDown) {\n      e.preventDefault();\n      stepValue(e, 'downPage', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === Home && min !== undefined) {\n      commit(e, min);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === End && max !== undefined) {\n      commit(e, max);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === Enter) {\n      commit(e, currentValue, textValue);\n      internalState.current.previousTextValue = undefined;\n    } else if (e.key === Escape) {\n      if (internalState.current.previousTextValue) {\n        setTextValue(undefined);\n        internalState.current.previousTextValue = undefined;\n      }\n    }\n\n    if (keyboardSpinState !== nextKeyboardSpinState) {\n      setKeyboardSpinState(nextKeyboardSpinState);\n    }\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (keyboardSpinState !== 'rest') {\n      setKeyboardSpinState('rest');\n      internalState.current.spinState = 'rest';\n    }\n  };\n\n  const commit = (e: SpinButtonChangeEvent, newValue?: number | null, 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    } else if (displayValueChanged && !isControlled) {\n      const nextValue = parseFloat(newDisplayValue as string);\n      if (!isNaN(nextValue)) {\n        setCurrentValue(precisionRound(nextValue, precision));\n      }\n    }\n\n    if (valueChanged || displayValueChanged) {\n      onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n    }\n\n    setTextValue(undefined);\n  };\n\n  const state: SpinButtonState = {\n    size,\n    appearance,\n    spinState: keyboardSpinState,\n    atBound: internalState.current.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,\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': 'Increment value',\n        type: 'button',\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': 'Decrement value',\n        type: 'button',\n      },\n    }),\n  };\n\n  let valueToDisplay;\n  if (textValue !== undefined) {\n    valueToDisplay = textValue;\n  } else if (value === null || currentValue === null) {\n    valueToDisplay = displayValue ?? '';\n    internalState.current.value = null;\n    internalState.current.atBound = 'none';\n  } else {\n    const roundedValue = precisionRound(currentValue, precision);\n    internalState.current.value = roundedValue;\n    internalState.current.atBound = getBound(roundedValue, min, max);\n    if (isControlled) {\n      valueToDisplay = displayValue ?? String(roundedValue);\n    } else {\n      valueToDisplay = String(roundedValue);\n    }\n  }\n\n  state.input.value = valueToDisplay;\n  state.input['aria-valuemin'] = min;\n  state.input['aria-valuemax'] = max;\n  state.input['aria-valuenow'] = currentValue ?? undefined;\n  state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n  state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);\n  state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);\n  state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);\n  state.input.onKeyUp = mergeCallbacks(state.input.onKeyUp, handleKeyUp);\n\n  state.incrementButton.onMouseDown = mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);\n  state.incrementButton.onMouseUp = mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.incrementButton.onMouseLeave = mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  state.decrementButton.onMouseDown = mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);\n  state.decrementButton.onMouseUp = mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.decrementButton.onMouseLeave = mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  return state;\n};\n"]}
+{"version":3,"names":["React","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useControllableState","useTimeout","ArrowUp","ArrowDown","End","Enter","Escape","Home","PageDown","PageUp","calculatePrecision","precisionRound","getBound","clamp","ChevronUp16Regular","ChevronDown16Regular","useOverrides_unstable","useOverrides","DEFAULT_SPIN_DELAY_MS","MIN_SPIN_DELAY_MS","MAX_SPIN_TIME_MS","lerp","start","end","percent","useSpinButton_unstable","props","ref","nativeProps","primarySlotTagName","excludedPropNames","overrides","value","displayValue","defaultValue","min","max","step","stepPage","precision","precisionFromProps","onChange","size","appearance","_a","inputDefaultAppearance","root","input","incrementButton","decrementButton","useMemo","Math","currentValue","setCurrentValue","state","defaultState","initialState","isControlled","undefined","textValue","setTextValue","useState","keyboardSpinState","setKeyboardSpinState","internalState","useRef","spinState","spinTime","spinDelay","atBound","setStepTimeout","clearStepTimeout","stepValue","e","direction","startFrom","startValue","current","num","parseFloat","isNaN","val","dir","stepSize","stepStart","nullStep","commit","newValue","Number","handleInputChange","previousTextValue","String","target","handleIncrementMouseDown","handleDecrementMouseDown","handleStepMouseUpOrLeave","handleBlur","handleKeyDown","nextKeyboardSpinState","key","preventDefault","shiftKey","handleKeyUp","newDisplayValue","valueChanged","displayValueChanged","roundedValue","nextValue","components","required","defaultProps","autoComplete","role","type","primary","tabIndex","children","createElement","disabled","valueToDisplay","_b","onBlur","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave"],"sources":["../src/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  resolveShorthand,\n  useControllableState,\n  useTimeout,\n} from '@fluentui/react-utilities';\nimport { ArrowUp, ArrowDown, End, Enter, Escape, Home, PageDown, PageUp } from '@fluentui/keyboard-keys';\nimport {\n  SpinButtonProps,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonChangeEvent,\n  SpinButtonBounds,\n} from './SpinButton.types';\nimport { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\ntype InternalState = {\n  value: number | null;\n  spinState: SpinButtonSpinState;\n  spinTime: number;\n  spinDelay: number;\n  previousTextValue?: string;\n  atBound: SpinButtonBounds;\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 for 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: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],\n  });\n\n  const overrides = useOverrides();\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 = overrides.inputDefaultAppearance ?? 'outline',\n    root,\n    input,\n    incrementButton,\n    decrementButton,\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\n  const isControlled = value !== undefined;\n\n  const [textValue, setTextValue] = React.useState<string | undefined>(undefined);\n  const [keyboardSpinState, setKeyboardSpinState] = React.useState<SpinButtonSpinState>('rest');\n\n  const internalState = React.useRef<InternalState>({\n    value: currentValue,\n    spinState: 'rest',\n    spinTime: 0,\n    spinDelay: DEFAULT_SPIN_DELAY_MS,\n    atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none',\n  });\n\n  const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n  const stepValue = (\n    e: SpinButtonChangeEvent,\n    direction: 'up' | 'down' | 'upPage' | 'downPage',\n    startFrom?: string,\n  ) => {\n    let startValue = internalState.current.value;\n    if (startFrom) {\n      const num = parseFloat(startFrom);\n      if (!isNaN(num)) {\n        startValue = num;\n      }\n    }\n    const val = startValue;\n    const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n    const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n    if (val === null) {\n      const stepStart = min === undefined ? 0 : min;\n      const nullStep = clamp(stepStart + stepSize * dir, min, max);\n      commit(e, nullStep);\n      return;\n    }\n\n    let newValue = val + stepSize * dir;\n    if (!Number.isNaN(newValue)) {\n      newValue = clamp(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 handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!internalState.current.previousTextValue) {\n      internalState.current.previousTextValue = textValue ?? String(currentValue);\n    }\n    const newValue = e.target.value;\n    setTextValue(newValue);\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    let nextKeyboardSpinState: SpinButtonSpinState = 'rest';\n\n    if (e.key === ArrowUp) {\n      stepValue(e, 'up', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === ArrowDown) {\n      stepValue(e, 'down', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (e.key === PageUp) {\n      e.preventDefault();\n      stepValue(e, 'upPage', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === PageDown) {\n      e.preventDefault();\n      stepValue(e, 'downPage', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === Home && min !== undefined) {\n      commit(e, min);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === End && max !== undefined) {\n      commit(e, max);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === Enter) {\n      commit(e, currentValue, textValue);\n      internalState.current.previousTextValue = undefined;\n    } else if (e.key === Escape) {\n      if (internalState.current.previousTextValue) {\n        setTextValue(undefined);\n        internalState.current.previousTextValue = undefined;\n      }\n    }\n\n    if (keyboardSpinState !== nextKeyboardSpinState) {\n      setKeyboardSpinState(nextKeyboardSpinState);\n    }\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (keyboardSpinState !== 'rest') {\n      setKeyboardSpinState('rest');\n      internalState.current.spinState = 'rest';\n    }\n  };\n\n  const commit = (e: SpinButtonChangeEvent, newValue?: number | null, 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    } else if (displayValueChanged && !isControlled) {\n      const nextValue = parseFloat(newDisplayValue as string);\n      if (!isNaN(nextValue)) {\n        setCurrentValue(precisionRound(nextValue, precision));\n      }\n    }\n\n    if (valueChanged || displayValueChanged) {\n      onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n    }\n\n    setTextValue(undefined);\n  };\n\n  const state: SpinButtonState = {\n    size,\n    appearance,\n    spinState: keyboardSpinState,\n    atBound: internalState.current.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,\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': 'Increment value',\n        type: 'button',\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': 'Decrement value',\n        type: 'button',\n      },\n    }),\n  };\n\n  let valueToDisplay;\n  if (textValue !== undefined) {\n    valueToDisplay = textValue;\n  } else if (value === null || currentValue === null) {\n    valueToDisplay = displayValue ?? '';\n    internalState.current.value = null;\n    internalState.current.atBound = 'none';\n  } else {\n    const roundedValue = precisionRound(currentValue, precision);\n    internalState.current.value = roundedValue;\n    internalState.current.atBound = getBound(roundedValue, min, max);\n    if (isControlled) {\n      valueToDisplay = displayValue ?? String(roundedValue);\n    } else {\n      valueToDisplay = String(roundedValue);\n    }\n  }\n\n  state.input.value = valueToDisplay;\n  state.input['aria-valuemin'] = min;\n  state.input['aria-valuemax'] = max;\n  state.input['aria-valuenow'] = currentValue ?? undefined;\n  state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n  state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);\n  state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);\n  state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);\n  state.input.onKeyUp = mergeCallbacks(state.input.onKeyUp, handleKeyUp);\n\n  state.incrementButton.onMouseDown = mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);\n  state.incrementButton.onMouseUp = mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.incrementButton.onMouseLeave = mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  state.decrementButton.onMouseDown = mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);\n  state.decrementButton.onMouseUp = mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.decrementButton.onMouseLeave = mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  return state;\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["mergeClasses","shorthands","tokens","typographyStyles","spinButtonClassNames","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","fieldHeights","small","medium","useRootClassName","useRootStyles","useInputClassName","useInputStyles","useBaseButtonClassName","useButtonStyles","useButtonDisabledStyles","useSpinButtonStyles_unstable","state","appearance","atBound","spinState","size","disabled","invalid","filled","startsWith","rootStyles","buttonStyles","buttonDisabledStyles","inputStyles","className","outlineInteractive","underlineInteractive","filledInteractive","increment","incrementButtonSmall","base","decrement","decrementButtonSmall"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n  root: 'fui-SpinButton',\n  input: 'fui-SpinButton__input',\n  incrementButton: 'fui-SpinButton__incrementButton',\n  decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n  buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n};\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-grid',\n  gridTemplateColumns: `1fr 24px`,\n  gridTemplateRows: '1fr 1fr',\n  columnGap: tokens.spacingHorizontalXS,\n  rowGap: 0,\n  position: 'relative',\n  isolation: 'isolate',\n\n  backgroundColor: tokens.colorNeutralBackground1,\n  minHeight: fieldHeights.medium,\n  padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n  borderRadius: tokens.borderRadiusMedium,\n\n  // Apply border styles on the ::before pseudo element.\n  // We cannot use ::after since that is used for selection.\n  // Using the pseudo element allows us to place the border\n  // above content in the component which ensures the buttons\n  // line up visually with the border as expected. Without this\n  // there is a bit of a gap which can become very noticeable\n  // at high zoom or when OS zoom levels are not divisible by 2\n  // (e.g., 150% on Windows in Firefox)\n  // This is most noticeable on the \"outline\" appearance which is\n  // also the default so it feels worth the extra ceremony to get right.\n  '::before': {\n    content: '\"\"',\n    boxSizing: 'border-box',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    pointerEvents: 'none',\n    zIndex: 10,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    borderRadius: tokens.borderRadiusMedium,\n  },\n\n  '::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    right: 0,\n    bottom: 0,\n    left: 0,\n    zIndex: 20,\n\n    // Maintaining the correct corner radius:\n    // Use the whole border-radius as the height and only put radii on the bottom corners.\n    // (Otherwise the radius would be automatically reduced to fit available space.)\n    // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n    height: `max(2px, ${tokens.borderRadiusMedium})`,\n    borderBottomLeftRadius: tokens.borderRadiusMedium,\n    borderBottomRightRadius: tokens.borderRadiusMedium,\n\n    // Flat 2px border:\n    // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n    // (This could be done without trimming using `background: linear-gradient(...)`, but using\n    // borderBottom makes it easier for people to override the color if needed.)\n    borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n    clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n    // Animation for focus OUT\n    transform: 'scaleX(0)',\n    transitionProperty: 'transform',\n    transitionDuration: tokens.durationUltraFast,\n    transitionDelay: tokens.curveAccelerateMid,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n  },\n\n  ':focus-within::after': {\n    // Animation for focus IN\n    transform: 'scaleX(1)',\n    transitionProperty: 'transform',\n    transitionDuration: tokens.durationNormal,\n    transitionDelay: tokens.curveDecelerateMid,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n  },\n  ':focus-within:active::after': {\n    // This is if the user clicks the field again while it's already focused\n    borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n  },\n  ':focus-within': {\n    outline: '2px solid transparent',\n  },\n});\n\nconst useRootStyles = makeStyles({\n  small: {\n    minHeight: fieldHeights.small,\n    ...typographyStyles.caption1,\n    paddingLeft: tokens.spacingHorizontalS,\n  },\n\n  medium: {\n    // set by useRootClassName\n  },\n\n  outline: {\n    // set by useRootClassName\n  },\n\n  outlineInteractive: {\n    ':hover::before': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  underline: {\n    '::before': {\n      ...shorthands.borderWidth(0, 0, '1px', 0),\n      ...shorthands.borderRadius(tokens.borderRadiusNone), // corners look strange if rounded\n    },\n  },\n\n  underlineInteractive: {\n    ':hover::before': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n    '::after': shorthands.borderRadius(tokens.borderRadiusNone), // remove rounded corners from focus underline\n  },\n\n  filled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    },\n  },\n\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      '::before': {\n        // also handles pressed border color (:active)\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n      },\n    },\n  },\n\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n      },\n    },\n  },\n\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    '::before': {\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n      '@media (forced-colors: active)': {\n        ...shorthands.borderColor('GrayText'),\n      },\n    },\n  },\n});\n\nconst useInputClassName = makeResetStyles({\n  gridColumnStart: '1',\n  gridColumnEnd: '2',\n  gridRowStart: '1',\n  gridRowEnd: '3',\n  outlineStyle: 'none',\n  border: '0',\n  padding: '0',\n  color: tokens.colorNeutralForeground1,\n  // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n  backgroundColor: 'transparent',\n  fontFamily: 'inherit',\n  fontSize: 'inherit',\n  fontWeight: 'inherit',\n  lineHeight: 'inherit',\n\n  '::placeholder': {\n    color: tokens.colorNeutralForeground4,\n    opacity: 1, // browser style override\n  },\n});\n\nconst useInputStyles = makeStyles({\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useBaseButtonClassName = makeResetStyles({\n  display: 'inline-flex',\n  width: '24px',\n  alignItems: 'center',\n  justifyContent: 'center',\n  border: '0',\n  position: 'absolute',\n\n  outlineStyle: 'none',\n  height: '16px',\n\n  // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n  backgroundColor: 'transparent',\n  color: tokens.colorNeutralForeground3,\n\n  // common button layout\n  gridColumnStart: '2',\n  borderRadius: '0',\n  padding: '0 5px 0 5px',\n\n  ':active': {\n    outlineStyle: 'none',\n  },\n\n  ':enabled': {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorNeutralForeground3Hover,\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground3Pressed,\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n    [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n      color: tokens.colorNeutralForeground3Pressed,\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  ':disabled': {\n    cursor: 'not-allowed',\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n\nconst useButtonStyles = makeStyles({\n  increment: {\n    gridRowStart: '1',\n    borderTopRightRadius: tokens.borderRadiusMedium,\n    paddingTop: '4px',\n    paddingBottom: '1px',\n  },\n  decrement: {\n    gridRowStart: '2',\n    borderBottomRightRadius: tokens.borderRadiusMedium,\n    paddingTop: '1px',\n    paddingBottom: '4px',\n  },\n  // Padding values numbers don't align with design specs\n  // but visually the padding aligns.\n  // The icons are set in a 16x16px square but the artwork is inset from that\n  // so these padding values are computed by hand.\n  // Additionally the design uses fractional values so these are\n  // rounded to the nearest integer.\n  incrementButtonSmall: {\n    ...shorthands.padding('3px', '6px', '0px', '4px'),\n    height: '12px',\n  },\n\n  decrementButtonSmall: {\n    ...shorthands.padding('0px', '6px', '3px', '4px'),\n    height: '12px',\n  },\n\n  outline: {\n    // set by useButtonClassName\n  },\n\n  underline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  'filled-darker': {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground3Hover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  'filled-lighter': {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n      },\n      [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n  base: {\n    cursor: 'not-allowed',\n\n    ':hover': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  outline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  underline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  'filled-darker': {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  'filled-lighter': {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n  const { appearance, atBound, spinState, size } = state;\n  const disabled = state.input.disabled;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const buttonStyles = useButtonStyles();\n  const buttonDisabledStyles = useButtonDisabledStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    spinButtonClassNames.root,\n    useRootClassName(),\n    rootStyles[size],\n    rootStyles[appearance],\n    filled && rootStyles.filled,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.incrementButton.className = mergeClasses(\n    spinButtonClassNames.incrementButton,\n    spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n    useBaseButtonClassName(),\n    buttonStyles.increment,\n    buttonStyles[appearance],\n    size === 'small' && buttonStyles.incrementButtonSmall,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.incrementButton.className,\n  );\n  state.decrementButton.className = mergeClasses(\n    spinButtonClassNames.decrementButton,\n    spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n    useBaseButtonClassName(),\n    buttonStyles.decrement,\n    buttonStyles[appearance],\n    size === 'small' && buttonStyles.decrementButtonSmall,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.decrementButton.className,\n  );\n\n  state.input.className = mergeClasses(\n    spinButtonClassNames.input,\n    useInputClassName(),\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  return state;\n};\n"]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","spinButtonClassNames","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","fieldHeights","small","medium","useRootClassName","useRootStyles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","uwmqm3","outline","outlineInteractive","Bo3r8zu","Hpvxnh","Bx11ytk","B1rg0w0","Bsg1tlv","Brjw370","xcfy85","Bcc6kan","underline","B0qfbqy","B4f6apu","y0oebl","uvfttm","Budzafs","r59vdv","n07z76","ck0cow","underlineInteractive","B3778ie","d9w3h3","Bl18szs","B4j8arr","filled","Bdkvgpv","m598lv","qa3bma","Bbv0w2i","Bq4z7u6","Bk5zm6e","Bqjgrrk","Bm6vgfq","De3pzq","filledInteractive","B05mzqr","tb9y6h","jcehpj","B23o0hn","invalid","emecyz","lz0pba","Bo1k74p","Ba322q7","disabled","Bceei9c","Cffpyd","hxi8he","Bcuq369","Imo2if","d","h","a","m","useInputClassName","useInputStyles","sj55zd","yvdlaj","useBaseButtonClassName","useButtonStyles","increment","Ijaq50","B7oj6ja","z8tnut","Byoj8tv","decrement","Bbmb7ep","incrementButtonSmall","z189sj","Bqenvij","decrementButtonSmall","r4wkhp","B95qlz1","p743kt","B7xitij","B6siaa6","Ba9qmo4","Dyrjrp","drw0cw","idzz8t","useButtonDisabledStyles","base","eoavqd","useSpinButtonStyles_unstable","state","appearance","atBound","spinState","size","startsWith","rootStyles","buttonStyles","buttonDisabledStyles","inputStyles","className"],"sources":["../src/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n  root: 'fui-SpinButton',\n  input: 'fui-SpinButton__input',\n  incrementButton: 'fui-SpinButton__incrementButton',\n  decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n  buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n};\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-grid',\n  gridTemplateColumns: `1fr 24px`,\n  gridTemplateRows: '1fr 1fr',\n  columnGap: tokens.spacingHorizontalXS,\n  rowGap: 0,\n  position: 'relative',\n  isolation: 'isolate',\n\n  backgroundColor: tokens.colorNeutralBackground1,\n  minHeight: fieldHeights.medium,\n  padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n  borderRadius: tokens.borderRadiusMedium,\n\n  // Apply border styles on the ::before pseudo element.\n  // We cannot use ::after since that is used for selection.\n  // Using the pseudo element allows us to place the border\n  // above content in the component which ensures the buttons\n  // line up visually with the border as expected. Without this\n  // there is a bit of a gap which can become very noticeable\n  // at high zoom or when OS zoom levels are not divisible by 2\n  // (e.g., 150% on Windows in Firefox)\n  // This is most noticeable on the \"outline\" appearance which is\n  // also the default so it feels worth the extra ceremony to get right.\n  '::before': {\n    content: '\"\"',\n    boxSizing: 'border-box',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    pointerEvents: 'none',\n    zIndex: 10,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    borderRadius: tokens.borderRadiusMedium,\n  },\n\n  '::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    right: 0,\n    bottom: 0,\n    left: 0,\n    zIndex: 20,\n\n    // Maintaining the correct corner radius:\n    // Use the whole border-radius as the height and only put radii on the bottom corners.\n    // (Otherwise the radius would be automatically reduced to fit available space.)\n    // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n    height: `max(2px, ${tokens.borderRadiusMedium})`,\n    borderBottomLeftRadius: tokens.borderRadiusMedium,\n    borderBottomRightRadius: tokens.borderRadiusMedium,\n\n    // Flat 2px border:\n    // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n    // (This could be done without trimming using `background: linear-gradient(...)`, but using\n    // borderBottom makes it easier for people to override the color if needed.)\n    borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n    clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n    // Animation for focus OUT\n    transform: 'scaleX(0)',\n    transitionProperty: 'transform',\n    transitionDuration: tokens.durationUltraFast,\n    transitionDelay: tokens.curveAccelerateMid,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n  },\n\n  ':focus-within::after': {\n    // Animation for focus IN\n    transform: 'scaleX(1)',\n    transitionProperty: 'transform',\n    transitionDuration: tokens.durationNormal,\n    transitionDelay: tokens.curveDecelerateMid,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n  },\n  ':focus-within:active::after': {\n    // This is if the user clicks the field again while it's already focused\n    borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n  },\n  ':focus-within': {\n    outline: '2px solid transparent',\n  },\n});\n\nconst useRootStyles = makeStyles({\n  small: {\n    minHeight: fieldHeights.small,\n    ...typographyStyles.caption1,\n    paddingLeft: tokens.spacingHorizontalS,\n  },\n\n  medium: {\n    // set by useRootClassName\n  },\n\n  outline: {\n    // set by useRootClassName\n  },\n\n  outlineInteractive: {\n    ':hover::before': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  underline: {\n    '::before': {\n      ...shorthands.borderWidth(0, 0, '1px', 0),\n      ...shorthands.borderRadius(tokens.borderRadiusNone), // corners look strange if rounded\n    },\n  },\n\n  underlineInteractive: {\n    ':hover::before': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n    '::after': shorthands.borderRadius(tokens.borderRadiusNone), // remove rounded corners from focus underline\n  },\n\n  filled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    },\n  },\n\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      '::before': {\n        // also handles pressed border color (:active)\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n      },\n    },\n  },\n\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n      },\n    },\n  },\n\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    '::before': {\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n      '@media (forced-colors: active)': {\n        ...shorthands.borderColor('GrayText'),\n      },\n    },\n  },\n});\n\nconst useInputClassName = makeResetStyles({\n  gridColumnStart: '1',\n  gridColumnEnd: '2',\n  gridRowStart: '1',\n  gridRowEnd: '3',\n  outlineStyle: 'none',\n  border: '0',\n  padding: '0',\n  color: tokens.colorNeutralForeground1,\n  // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n  backgroundColor: 'transparent',\n  fontFamily: 'inherit',\n  fontSize: 'inherit',\n  fontWeight: 'inherit',\n  lineHeight: 'inherit',\n\n  '::placeholder': {\n    color: tokens.colorNeutralForeground4,\n    opacity: 1, // browser style override\n  },\n});\n\nconst useInputStyles = makeStyles({\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useBaseButtonClassName = makeResetStyles({\n  display: 'inline-flex',\n  width: '24px',\n  alignItems: 'center',\n  justifyContent: 'center',\n  border: '0',\n  position: 'absolute',\n\n  outlineStyle: 'none',\n  height: '16px',\n\n  // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n  backgroundColor: 'transparent',\n  color: tokens.colorNeutralForeground3,\n\n  // common button layout\n  gridColumnStart: '2',\n  borderRadius: '0',\n  padding: '0 5px 0 5px',\n\n  ':active': {\n    outlineStyle: 'none',\n  },\n\n  ':enabled': {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorNeutralForeground3Hover,\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground3Pressed,\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n    [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n      color: tokens.colorNeutralForeground3Pressed,\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  ':disabled': {\n    cursor: 'not-allowed',\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n\nconst useButtonStyles = makeStyles({\n  increment: {\n    gridRowStart: '1',\n    borderTopRightRadius: tokens.borderRadiusMedium,\n    paddingTop: '4px',\n    paddingBottom: '1px',\n  },\n  decrement: {\n    gridRowStart: '2',\n    borderBottomRightRadius: tokens.borderRadiusMedium,\n    paddingTop: '1px',\n    paddingBottom: '4px',\n  },\n  // Padding values numbers don't align with design specs\n  // but visually the padding aligns.\n  // The icons are set in a 16x16px square but the artwork is inset from that\n  // so these padding values are computed by hand.\n  // Additionally the design uses fractional values so these are\n  // rounded to the nearest integer.\n  incrementButtonSmall: {\n    ...shorthands.padding('3px', '6px', '0px', '4px'),\n    height: '12px',\n  },\n\n  decrementButtonSmall: {\n    ...shorthands.padding('0px', '6px', '3px', '4px'),\n    height: '12px',\n  },\n\n  outline: {\n    // set by useButtonClassName\n  },\n\n  underline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  'filled-darker': {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground3Hover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  'filled-lighter': {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n      },\n      [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n  base: {\n    cursor: 'not-allowed',\n\n    ':hover': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  outline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  underline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  'filled-darker': {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  'filled-lighter': {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n  const { appearance, atBound, spinState, size } = state;\n  const disabled = state.input.disabled;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const buttonStyles = useButtonStyles();\n  const buttonDisabledStyles = useButtonDisabledStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    spinButtonClassNames.root,\n    useRootClassName(),\n    rootStyles[size],\n    rootStyles[appearance],\n    filled && rootStyles.filled,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.incrementButton.className = mergeClasses(\n    spinButtonClassNames.incrementButton,\n    spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n    useBaseButtonClassName(),\n    buttonStyles.increment,\n    buttonStyles[appearance],\n    size === 'small' && buttonStyles.incrementButtonSmall,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.incrementButton.className,\n  );\n  state.decrementButton.className = mergeClasses(\n    spinButtonClassNames.decrementButton,\n    spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n    useBaseButtonClassName(),\n    buttonStyles.decrement,\n    buttonStyles[appearance],\n    size === 'small' && buttonStyles.decrementButtonSmall,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.decrementButton.className,\n  );\n\n  state.input.className = mergeClasses(\n    spinButtonClassNames.input,\n    useInputClassName(),\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/components/SpinButtonField/SpinButtonField.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA;AACA,SAA+BA,4BAA4B,EAAEC,mBAAmB,QAAQ,uBAAuB;AAE/G,SAASC,UAAU,EAAEC,oBAAoB,QAAyB,kBAAkB;AAIpF;AACA,OAAO,MAAMC,yBAAyB,gBAAGJ,4BAA4B,CAACG,oBAAoB,CAACE,IAAI,CAAC;AAChG;AACA,OAAO,MAAMC,eAAe,gBAA8CL,mBAAmB,CAACC,UAAU,CAAC","names":["getDeprecatedFieldClassNames","makeDeprecatedField","SpinButton","spinButtonClassNames","spinButtonFieldClassNames","root","SpinButtonField"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { SpinButton, spinButtonClassNames, SpinButtonProps } from '../../SpinButton';\n\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport type SpinButtonFieldProps = DeprecatedFieldProps<SpinButtonProps>;\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport const spinButtonFieldClassNames = getDeprecatedFieldClassNames(spinButtonClassNames.root);\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport const SpinButtonField: ForwardRefComponent<SpinButtonFieldProps> = makeDeprecatedField(SpinButton);\n"]}
+{"version":3,"names":["getDeprecatedFieldClassNames","makeDeprecatedField","SpinButton","spinButtonClassNames","spinButtonFieldClassNames","root","SpinButtonField"],"sources":["../src/packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { SpinButton, spinButtonClassNames, SpinButtonProps } from '../../SpinButton';\n\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport type SpinButtonFieldProps = DeprecatedFieldProps<SpinButtonProps>;\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport const spinButtonFieldClassNames = getDeprecatedFieldClassNames(spinButtonClassNames.root);\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport const SpinButtonField: ForwardRefComponent<SpinButtonFieldProps> = makeDeprecatedField(SpinButton);\n"],"mappings":"AAAA;AACA,SAA+BA,4BAA4B,EAAEC,mBAAmB,QAAQ,uBAAuB;AAE/G,SAASC,UAAU,EAAEC,oBAAoB,QAAyB,kBAAkB;AAIpF;AACA,OAAO,MAAMC,yBAAyB,gBAAGJ,4BAA4B,CAACG,oBAAoB,CAACE,IAAI,CAAC;AAChG;AACA,OAAO,MAAMC,eAAe,gBAA8CL,mBAAmB,CAACC,UAAU,CAAC"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SACEA,UAAU,EACVC,yBAAyB,EACzBC,oBAAoB,EACpBC,4BAA4B,EAC5BC,sBAAsB,QACjB,cAAc;AAWrB;AACA,SAASC,eAAe,IAAIC,wBAAwB,EAAEC,yBAAyB,QAAQ,mBAAmB","names":["SpinButton","renderSpinButton_unstable","spinButtonClassNames","useSpinButtonStyles_unstable","useSpinButton_unstable","SpinButtonField","SpinButtonField_unstable","spinButtonFieldClassNames"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/index.ts"],"sourcesContent":["export {\n  SpinButton,\n  renderSpinButton_unstable,\n  spinButtonClassNames,\n  useSpinButtonStyles_unstable,\n  useSpinButton_unstable,\n} from './SpinButton';\nexport type {\n  SpinButtonOnChangeData,\n  SpinButtonChangeEvent,\n  SpinButtonProps,\n  SpinButtonSlots,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonBounds,\n} from './SpinButton';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { SpinButtonField as SpinButtonField_unstable, spinButtonFieldClassNames } from './SpinButtonField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { SpinButtonFieldProps as SpinButtonFieldProps_unstable } from './SpinButtonField';\n"]}
+{"version":3,"names":["SpinButton","renderSpinButton_unstable","spinButtonClassNames","useSpinButtonStyles_unstable","useSpinButton_unstable","SpinButtonField","SpinButtonField_unstable","spinButtonFieldClassNames"],"sources":["../src/packages/react-components/react-spinbutton/src/index.ts"],"sourcesContent":["export {\n  SpinButton,\n  renderSpinButton_unstable,\n  spinButtonClassNames,\n  useSpinButtonStyles_unstable,\n  useSpinButton_unstable,\n} from './SpinButton';\nexport type {\n  SpinButtonOnChangeData,\n  SpinButtonChangeEvent,\n  SpinButtonProps,\n  SpinButtonSlots,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonBounds,\n} from './SpinButton';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { SpinButtonField as SpinButtonField_unstable, spinButtonFieldClassNames } from './SpinButtonField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { SpinButtonFieldProps as SpinButtonFieldProps_unstable } from './SpinButtonField';\n"],"mappings":"AAAA,SACEA,UAAU,EACVC,yBAAyB,EACzBC,oBAAoB,EACpBC,4BAA4B,EAC5BC,sBAAsB,QACjB,cAAc;AAWrB;AACA,SAASC,eAAe,IAAIC,wBAAwB,EAAEC,yBAAyB,QAAQ,mBAAmB"}

package/lib/utils/clamp.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,MAAMA,KAAK,GAAG,CAACC,KAAa,EAAEC,GAAY,EAAEC,GAAY,KAAY;EACzE,IAAIC,SAAS,GAAGH,KAAK;EACrB,IAAIC,GAAG,KAAKG,SAAS,EAAE;IACrB,IAAIF,GAAG,KAAKE,SAAS,IAAIH,GAAG,GAAGC,GAAG,EAAE;MAClC,MAAMG,KAAK,GAAG,IAAIC,KAAK,EAAE;MACzB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;QACzC;QACAC,OAAO,CAACL,KAAK,CACX,CACE,gBAAgBJ,GAAG,kCAAkCC,GAAG,IAAI,EAC5D,4CAA4C,EAC5C,oBAAoBF,KAAK,IAAI,EAC7BK,KAAK,CAACM,KAAK,CACZ,CAACC,IAAI,EAAE,CACT;;MAEH,OAAOZ,KAAK;;IAGdG,SAAS,GAAGU,IAAI,CAACX,GAAG,CAACD,GAAG,EAAEE,SAAS,CAAC;;EAGtC,IAAID,GAAG,KAAKE,SAAS,EAAE;IACrBD,SAAS,GAAGU,IAAI,CAACZ,GAAG,CAACC,GAAG,EAAEC,SAAS,CAAC;;EAGtC,OAAOA,SAAS;AAClB,CAAC","names":["clamp","value","min","max","nextValue","undefined","error","Error","process","env","NODE_ENV","console","stack","join","Math"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/utils/clamp.ts"],"sourcesContent":["export const clamp = (value: number, min?: number, max?: number): number => {\n  let nextValue = value;\n  if (min !== undefined) {\n    if (max !== undefined && min > max) {\n      const error = new Error();\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error(\n          [\n            `\"min\" value \"${min}\" is greater than \"max\" value \"${max}\".`,\n            '\"min\" must be less than or equal to \"max\".',\n            `Returning value \"${value}\".`,\n            error.stack,\n          ].join(),\n        );\n      }\n      return value;\n    }\n\n    nextValue = Math.max(min, nextValue);\n  }\n\n  if (max !== undefined) {\n    nextValue = Math.min(max, nextValue);\n  }\n\n  return nextValue;\n};\n"]}
+{"version":3,"names":["clamp","value","min","max","nextValue","undefined","error","Error","process","env","NODE_ENV","console","stack","join","Math"],"sources":["../src/packages/react-components/react-spinbutton/src/utils/clamp.ts"],"sourcesContent":["export const clamp = (value: number, min?: number, max?: number): number => {\n  let nextValue = value;\n  if (min !== undefined) {\n    if (max !== undefined && min > max) {\n      const error = new Error();\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error(\n          [\n            `\"min\" value \"${min}\" is greater than \"max\" value \"${max}\".`,\n            '\"min\" must be less than or equal to \"max\".',\n            `Returning value \"${value}\".`,\n            error.stack,\n          ].join(),\n        );\n      }\n      return value;\n    }\n\n    nextValue = Math.max(min, nextValue);\n  }\n\n  if (max !== undefined) {\n    nextValue = Math.min(max, nextValue);\n  }\n\n  return nextValue;\n};\n"],"mappings":"AAAA,OAAO,MAAMA,KAAK,GAAGA,CAACC,KAAa,EAAEC,GAAY,EAAEC,GAAY,KAAY;EACzE,IAAIC,SAAS,GAAGH,KAAK;EACrB,IAAIC,GAAG,KAAKG,SAAS,EAAE;IACrB,IAAIF,GAAG,KAAKE,SAAS,IAAIH,GAAG,GAAGC,GAAG,EAAE;MAClC,MAAMG,KAAK,GAAG,IAAIC,KAAK,EAAE;MACzB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;QACzC;QACAC,OAAO,CAACL,KAAK,CACX,CACE,gBAAgBJ,GAAG,kCAAkCC,GAAG,IAAI,EAC5D,4CAA4C,EAC5C,oBAAoBF,KAAK,IAAI,EAC7BK,KAAK,CAACM,KAAK,CACZ,CAACC,IAAI,EAAE,CACT;;MAEH,OAAOZ,KAAK;;IAGdG,SAAS,GAAGU,IAAI,CAACX,GAAG,CAACD,GAAG,EAAEE,SAAS,CAAC;;EAGtC,IAAID,GAAG,KAAKE,SAAS,EAAE;IACrBD,SAAS,GAAGU,IAAI,CAACZ,GAAG,CAACC,GAAG,EAAEC,SAAS,CAAC;;EAGtC,OAAOA,SAAS;AAClB,CAAC"}

package/lib/utils/getBound.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAEA,OAAO,MAAMA,QAAQ,GAAG,CAACC,KAAa,EAAEC,GAAY,EAAEC,GAAY,KAAsB;EACtF,IAAID,GAAG,KAAKE,SAAS,IAAIH,KAAK,KAAKC,GAAG,EAAE;IACtC,IAAIC,GAAG,KAAKD,GAAG,EAAE;MACf,OAAO,MAAM;;IAEf,OAAO,KAAK;GACb,MAAM,IAAIC,GAAG,KAAKC,SAAS,IAAIH,KAAK,KAAKE,GAAG,EAAE;IAC7C,OAAO,KAAK;;EAGd,OAAO,MAAM;AACf,CAAC","names":["getBound","value","min","max","undefined"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/utils/getBound.ts"],"sourcesContent":["import type { SpinButtonBounds } from '../SpinButton';\n\nexport const getBound = (value: number, min?: number, max?: number): SpinButtonBounds => {\n  if (min !== undefined && value === min) {\n    if (max === min) {\n      return 'both';\n    }\n    return 'min';\n  } else if (max !== undefined && value === max) {\n    return 'max';\n  }\n\n  return 'none';\n};\n"]}
+{"version":3,"names":["getBound","value","min","max","undefined"],"sources":["../src/packages/react-components/react-spinbutton/src/utils/getBound.ts"],"sourcesContent":["import type { SpinButtonBounds } from '../SpinButton';\n\nexport const getBound = (value: number, min?: number, max?: number): SpinButtonBounds => {\n  if (min !== undefined && value === min) {\n    if (max === min) {\n      return 'both';\n    }\n    return 'min';\n  } else if (max !== undefined && value === max) {\n    return 'max';\n  }\n\n  return 'none';\n};\n"],"mappings":"AAEA,OAAO,MAAMA,QAAQ,GAAGA,CAACC,KAAa,EAAEC,GAAY,EAAEC,GAAY,KAAsB;EACtF,IAAID,GAAG,KAAKE,SAAS,IAAIH,KAAK,KAAKC,GAAG,EAAE;IACtC,IAAIC,GAAG,KAAKD,GAAG,EAAE;MACf,OAAO,MAAM;;IAEf,OAAO,KAAK;GACb,MAAM,IAAIC,GAAG,KAAKC,SAAS,IAAIH,KAAK,KAAKE,GAAG,EAAE;IAC7C,OAAO,KAAK;;EAGd,OAAO,MAAM;AACf,CAAC"}

package/lib/utils/precision.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA;;;;;;;AAOA,OAAM,SAAUA,kBAAkB,CAACC,KAAsB;EACvD;;;;;;EAMA,MAAMC,MAAM,GAAG,yBAAyB,CAACC,IAAI,CAACC,MAAM,CAACH,KAAK,CAAC,CAAC;EAC5D,IAAI,CAACC,MAAM,EAAE;IACX,OAAO,CAAC;;EAEV,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACb,OAAO,CAACA,MAAM,CAAC,CAAC,CAAC,CAACG,MAAM;;EAE1B,IAAIH,MAAM,CAAC,CAAC,CAAC,EAAE;IACb,OAAOA,MAAM,CAAC,CAAC,CAAC,CAACG,MAAM;;EAEzB,OAAO,CAAC;AACV;AAEA;;;;;AAKA,OAAM,SAAUC,cAAc,CAACL,KAAa,EAAEM,SAAiB,EAAEC,OAAe,EAAE;EAChF,MAAMC,GAAG,GAAGC,IAAI,CAACC,GAAG,CAACH,IAAI,EAAED,SAAS,CAAC;EACrC,OAAOG,IAAI,CAACE,KAAK,CAACX,KAAK,GAAGQ,GAAG,CAAC,GAAGA,GAAG;AACtC","names":["calculatePrecision","value","groups","exec","String","length","precisionRound","precision","base","exp","Math","pow","round"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/utils/precision.ts"],"sourcesContent":["/**\n * Calculates a number's precision based on the number of trailing\n * zeros if the number does not have a decimal indicated by a negative\n * precision. Otherwise, it calculates the number of digits after\n * the decimal point indicated by a positive precision.\n * @param value - the value to determine the precision of\n */\nexport function calculatePrecision(value: number | string): number {\n  /**\n   * Group 1:\n   * [1-9]([0]+$) matches trailing zeros\n   * Group 2:\n   * \\.([0-9]*) matches all digits after a decimal point.\n   */\n  const groups = /[1-9]([0]+$)|\\.([0-9]*)/.exec(String(value));\n  if (!groups) {\n    return 0;\n  }\n  if (groups[1]) {\n    return -groups[1].length;\n  }\n  if (groups[2]) {\n    return groups[2].length;\n  }\n  return 0;\n}\n\n/**\n * Rounds a number to a certain level of precision. Accepts negative precision.\n * @param value - The value that is being rounded.\n * @param precision - The number of decimal places to round the number to\n */\nexport function precisionRound(value: number, precision: number, base: number = 10): number {\n  const exp = Math.pow(base, precision);\n  return Math.round(value * exp) / exp;\n}\n"]}
+{"version":3,"names":["calculatePrecision","value","groups","exec","String","length","precisionRound","precision","base","exp","Math","pow","round"],"sources":["../src/packages/react-components/react-spinbutton/src/utils/precision.ts"],"sourcesContent":["/**\n * Calculates a number's precision based on the number of trailing\n * zeros if the number does not have a decimal indicated by a negative\n * precision. Otherwise, it calculates the number of digits after\n * the decimal point indicated by a positive precision.\n * @param value - the value to determine the precision of\n */\nexport function calculatePrecision(value: number | string): number {\n  /**\n   * Group 1:\n   * [1-9]([0]+$) matches trailing zeros\n   * Group 2:\n   * \\.([0-9]*) matches all digits after a decimal point.\n   */\n  const groups = /[1-9]([0]+$)|\\.([0-9]*)/.exec(String(value));\n  if (!groups) {\n    return 0;\n  }\n  if (groups[1]) {\n    return -groups[1].length;\n  }\n  if (groups[2]) {\n    return groups[2].length;\n  }\n  return 0;\n}\n\n/**\n * Rounds a number to a certain level of precision. Accepts negative precision.\n * @param value - The value that is being rounded.\n * @param precision - The number of decimal places to round the number to\n */\nexport function precisionRound(value: number, precision: number, base: number = 10): number {\n  const exp = Math.pow(base, precision);\n  return Math.round(value * exp) / exp;\n}\n"],"mappings":"AAAA;;;;;;;AAOA,OAAM,SAAUA,kBAAkBA,CAACC,KAAsB;EACvD;;;;;;EAMA,MAAMC,MAAM,GAAG,yBAAyB,CAACC,IAAI,CAACC,MAAM,CAACH,KAAK,CAAC,CAAC;EAC5D,IAAI,CAACC,MAAM,EAAE;IACX,OAAO,CAAC;;EAEV,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACb,OAAO,CAACA,MAAM,CAAC,CAAC,CAAC,CAACG,MAAM;;EAE1B,IAAIH,MAAM,CAAC,CAAC,CAAC,EAAE;IACb,OAAOA,MAAM,CAAC,CAAC,CAAC,CAACG,MAAM;;EAEzB,OAAO,CAAC;AACV;AAEA;;;;;AAKA,OAAM,SAAUC,cAAcA,CAACL,KAAa,EAAEM,SAAiB,EAAEC,IAAA,GAAe,EAAE;EAChF,MAAMC,GAAG,GAAGC,IAAI,CAACC,GAAG,CAACH,IAAI,EAAED,SAAS,CAAC;EACrC,OAAOG,IAAI,CAACE,KAAK,CAACX,KAAK,GAAGQ,GAAG,CAAC,GAAGA,GAAG;AACtC"}

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

@@ -1,4 +1,4 @@
-define(["require", "exports", "react", "./useSpinButton", "./renderSpinButton", "./useSpinButtonStyles"], function (require, exports, React, useSpinButton_1, renderSpinButton_1, useSpinButtonStyles_1) {
+define(["require", "exports", "react", "./useSpinButton", "./renderSpinButton", "./useSpinButtonStyles", "@fluentui/react-shared-contexts"], function (require, exports, React, useSpinButton_1, renderSpinButton_1, useSpinButtonStyles_1, react_shared_contexts_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.SpinButton = void 0;
@@ -8,6 +8,8 @@ define(["require", "exports", "react", "./useSpinButton", "./renderSpinButton",
     exports.SpinButton = React.forwardRef(function (props, ref) {
         var state = useSpinButton_1.useSpinButton_unstable(props, ref);
         useSpinButtonStyles_1.useSpinButtonStyles_unstable(state);
+        var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().useSpinButtonStyles_unstable;
+        useCustomStyles(state);
         return renderSpinButton_1.renderSpinButton_unstable(state);
     });
     exports.SpinButton.displayName = 'SpinButton';

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

@@ -1 +1 @@
-{"version":3,"file":"SpinButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,UAAU,GAAyC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC1F,IAAM,KAAK,GAAG,sCAAsB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEjD,kDAA4B,CAAC,KAAK,CAAC,CAAC;QACpC,OAAO,4CAAyB,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","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"]}
+{"version":3,"file":"SpinButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,UAAU,GAAyC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC1F,IAAM,KAAK,GAAG,sCAAsB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEjD,kDAA4B,CAAC,KAAK,CAAC,CAAC;QAE5B,IAA8B,eAAe,GAAK,oDAA4B,EAAE,6BAAnC,CAAoC;QACzF,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,4CAAyB,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","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"]}

package/lib-amd/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';\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"]}
+{"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"]}