@fluentui/react-spinbutton 9.0.0-beta.14 → 9.0.0-beta.15

package/CHANGELOG.json

@@ -2,7 +2,90 @@
   "name": "@fluentui/react-spinbutton",
   "entries": [
     {
-      "date": "Tue, 21 Jun 2022 17:09:28 GMT",
+      "date": "Tue, 28 Jun 2022 15:09:12 GMT",
+      "tag": "@fluentui/react-spinbutton_v9.0.0-beta.15",
+      "version": "9.0.0-beta.15",
+      "comments": {
+        "none": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "d85de0c3ee9d2f6f96d1b1ef6e15033648ce9963",
+            "comment": "docs: clean up stories"
+          },
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "51cf0a14d9a57107db0a4505b8b16260477b0e4a",
+            "comment": "chore: convert SpinButton to index based stories approach"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
+            "comment": "Update 9.0.0-rc dependencies to use caret range"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "82bd30dd41ad58df1f325e9b721200ed15d674a2",
+            "comment": "chore: Update @fluentui/react-icons to latest version"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "675acea49c97f10837ddee9b8c4350ca27750125",
+            "comment": "Bump Griffel dependencies"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "2b4a2ac925ebb2baf990bec2c149b03eb298b872",
+            "comment": "fix: Making increment and decrement buttons of SpinButton have 'type=button' instead of 'type=submit'."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-input to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-theme to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-label to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 23 Jun 2022 14:25:31 GMT",
       "tag": "@fluentui/react-spinbutton_v9.0.0-beta.14",
       "version": "9.0.0-beta.14",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/react-spinbutton
 
-This log was last generated on Tue, 21 Jun 2022 17:09:28 GMT and should not be manually modified.
+This log was last generated on Tue, 28 Jun 2022 15:09:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.15)
+
+Tue, 28 Jun 2022 15:09:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.14..@fluentui/react-spinbutton_v9.0.0-beta.15)
+
+### Changes
+
+- Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
+- chore: Update @fluentui/react-icons to latest version ([PR #23459](https://github.com/microsoft/fluentui/pull/23459) by olfedias@microsoft.com)
+- Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
+- fix: Making increment and decrement buttons of SpinButton have 'type=button' instead of 'type=submit'. ([PR #23710](https://github.com/microsoft/fluentui/pull/23710) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/keyboard-keys to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-input to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-label to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+
 ## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.14)
 
-Tue, 21 Jun 2022 17:09:28 GMT 
+Thu, 23 Jun 2022 14:25:31 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.13..@fluentui/react-spinbutton_v9.0.0-beta.14)
 
 ### Changes

package/README.md

@@ -4,7 +4,7 @@
 
 These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
 
-SpinButtons are used to allow numeric input bounded between minimum and maximum values with button controls to increment and decrement the input value by some step amount. Values can also be manipulated via the keyboard.
+SpinButtons are used to allow numeric input bounded between minimum and maximum values with buttons to increment and decrement the input value. Values can also be manipulated via the keyboard.
 
 ### Usage
 

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';

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

@@ -1 +1 @@
-{"version":3,"sources":["components/SpinButton/SpinButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;AAEA,EAAA,4BAA4B,CAAC,KAAD,CAA5B;AACA,SAAO,yBAAyB,CAAC,KAAD,CAAhC;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useSpinButton_unstable } from './useSpinButton';\nimport { renderSpinButton_unstable } from './renderSpinButton';\nimport { useSpinButtonStyles_unstable } from './useSpinButtonStyles';\nimport type { SpinButtonProps } from './SpinButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A SpinButton allows someone to incrementally adjust a value in small steps.\n */\nexport const SpinButton: ForwardRefComponent<SpinButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSpinButton_unstable(props, ref);\n\n  useSpinButtonStyles_unstable(state);\n  return renderSpinButton_unstable(state);\n});\n\nSpinButton.displayName = 'SpinButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/SpinButton/SpinButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;EAEA,4BAA4B,CAAC,KAAD,CAA5B;EACA,OAAO,yBAAyB,CAAC,KAAD,CAAhC;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useSpinButton_unstable } from './useSpinButton';\nimport { renderSpinButton_unstable } from './renderSpinButton';\nimport { useSpinButtonStyles_unstable } from './useSpinButtonStyles';\nimport type { SpinButtonProps } from './SpinButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A SpinButton allows someone to incrementally adjust a value in small steps.\n */\nexport const SpinButton: ForwardRefComponent<SpinButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSpinButton_unstable(props, ref);\n\n  useSpinButtonStyles_unstable(state);\n  return renderSpinButton_unstable(state);\n});\n\nSpinButton.displayName = 'SpinButton';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/SpinButton/renderSpinButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAtB,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAtB,CAHF,CADF;AAOD,CAhCM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SpinButtonState, SpinButtonSlots } from './SpinButton.types';\n\n/**\n * Render the final JSX of SpinButton\n */\nexport const renderSpinButton_unstable = (state: SpinButtonState) => {\n  // Leaving this here for now.\n  // This is the approach using react-input's Input component.\n  // It has some Typescript problems and feels hacky.\n  // const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n  // const { contentAfter, ...otherInputSlotProps } = slotProps.input as SpinButtonSlots['input'];\n  // const inputContentAfter = {\n  //   ...contentAfter,\n  //   children: (\n  //     <>\n  //       <slots.incrementButton {...slotProps.incrementButton} />\n  //       <slots.decrementButton {...slotProps.decrementButton} />\n  //     </>\n  //   ),\n  // };\n\n  // return (\n  //   <slots.root {...slotProps.root}>\n  //     <slots.input {...otherInputSlotProps} contentAfter={inputContentAfter}/>\n  //   </slots.root>\n  // );\n\n  const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      <slots.incrementButton {...slotProps.incrementButton} />\n      <slots.decrementButton {...slotProps.decrementButton} />\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/SpinButton/renderSpinButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;EAClE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAkB,KAAlB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,CAHF,CADF;AAOD,CAhCM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SpinButtonState, SpinButtonSlots } from './SpinButton.types';\n\n/**\n * Render the final JSX of SpinButton\n */\nexport const renderSpinButton_unstable = (state: SpinButtonState) => {\n  // Leaving this here for now.\n  // This is the approach using react-input's Input component.\n  // It has some Typescript problems and feels hacky.\n  // const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n  // const { contentAfter, ...otherInputSlotProps } = slotProps.input as SpinButtonSlots['input'];\n  // const inputContentAfter = {\n  //   ...contentAfter,\n  //   children: (\n  //     <>\n  //       <slots.incrementButton {...slotProps.incrementButton} />\n  //       <slots.decrementButton {...slotProps.decrementButton} />\n  //     </>\n  //   ),\n  // };\n\n  // return (\n  //   <slots.root {...slotProps.root}>\n  //     <slots.input {...otherInputSlotProps} contentAfter={inputContentAfter}/>\n  //   </slots.root>\n  // );\n\n  const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      <slots.incrementButton {...slotProps.incrementButton} />\n      <slots.decrementButton {...slotProps.decrementButton} />\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/SpinButton/useSpinButton.js

@@ -95,7 +95,8 @@ export const useSpinButton_unstable = (props, ref) => {
         tabIndex: -1,
         children: /*#__PURE__*/React.createElement(ChevronUp16Regular, null),
         disabled: nativeProps.primary.disabled,
-        'aria-label': 'Increment value'
+        'aria-label': 'Increment value',
+        type: 'button'
       }
     }),
     decrementButton: resolveShorthand(decrementButton, {
@@ -104,7 +105,8 @@ export const useSpinButton_unstable = (props, ref) => {
         tabIndex: -1,
         children: /*#__PURE__*/React.createElement(ChevronDown16Regular, null),
         disabled: nativeProps.primary.disabled,
-        'aria-label': 'Decrement value'
+        'aria-label': 'Decrement value',
+        type: 'button'
       }
     })
   };

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

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

package/lib/components/SpinButton/useSpinButtonStyles.js

@@ -147,7 +147,15 @@ const useRootStyles = /*#__PURE__*/__styles({
   "d": [".fwk3njj{display:inline-grid;}", ".f1sr6ibj{grid-template-columns:1fr 24px;}", ".fio9c21{grid-template-rows:1fr 1fr;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1sff6ri{row-gap:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f10pi13n{position:relative;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1ngn1p8{isolation:isolate;}", ".f1wl9k8s::before{content:\"\";}", ".fyl8oag::before{box-sizing:border-box;}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1f351id::before{right:0;}", ".f1fzr1x6::before{left:0;}", ".fchca7p::before{bottom:0;}", ".f1pl9g23::before{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f3orl67::before{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2gop1n::before{border-top-right-radius:var(--borderRadiusMedium);}", ".f11nyhth::before{border-top-left-radius:var(--borderRadiusMedium);}", ".fxuihnu::before{pointer-events:none;}", ".fzjygzn::before{z-index:10;}", ".f15yvnhg::after{right:0;}", ".f1n6gb5g::after{left:0;}", ".fo72kxq::after{bottom:0;}", ".f5yjgw6::after{z-index:20;}", ".f1fjh9ub::before{border-top-width:1px;}", ".ff9c942::before{border-right-width:1px;}", ".f6rdg5o::before{border-left-width:1px;}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}", ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}", ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}", ".fchs65t::before{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fw32bj::before{border-bottom-right-radius:0;}", ".fziivox::before{border-bottom-left-radius:0;}", ".feccbv4::before{border-top-right-radius:0;}", ".f1jqz70h::before{border-top-left-radius:0;}", ".f7dgwnz::before{border-top-color:var(--colorTransparentStroke);}", ".f1edeodt::before{border-right-color:var(--colorTransparentStroke);}", ".fszsv3f::before{border-left-color:var(--colorTransparentStroke);}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f1a0lfh7::before{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1p2ejm6::before{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fmzytvz::before{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fas2e61::before{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1syzi09::before{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".fd35vam::before{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1n48vvu::before{border-right-color:var(--colorTransparentStrokeDisabled);}", ".f7wchoe::before{border-left-color:var(--colorTransparentStrokeDisabled);}"],
   "h": [".f1w2y1rc:hover::before{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1gofhvl:hover::before{border-right-color:var(--colorNeutralStroke1Hover);}", ".f18htlvq:hover::before{border-left-color:var(--colorNeutralStroke1Hover);}", ".ffcnd28:hover::before{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1xqt08:hover,.f1xqt08:focus-within::before{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover,.fzt5lgo:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover,.f8tv3r9:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fyhrops:hover,.fyhrops:focus-within::before{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
   "a": [".f6lmxco:active,.f6lmxco:focus-within::before{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active,.fcoc0mf:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f15r4wkl:active,.f15r4wkl:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1ipdth8:active,.f1ipdth8:focus-within::before{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"],
-  "t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]
+  "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }]]
 });
 
 const useInputStyles = /*#__PURE__*/__styles({

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

@@ -1 +1 @@
-{"version":3,"sources":["components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\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 useRootStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridTemplateColumns: `1fr 24px`,\n    gridTemplateRows: '1fr 1fr',\n    columnGap: tokens.spacingHorizontalXS,\n    rowGap: 0,\n    paddingRight: 0,\n    position: 'relative',\n    // Remove the border styles from react-input\n    ...shorthands.border('0'),\n    isolation: 'isolate',\n\n    // Apply border styles on the ::before pseudo element.\n    // We cannot use ::after since react-input uses that\n    // for the selector styles.\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      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      pointerEvents: 'none',\n      zIndex: 10,\n    },\n\n    '::after': {\n      right: 0,\n      bottom: 0,\n      left: 0,\n      zIndex: 20,\n    },\n  },\n\n  outline: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n\n  outlineInteractive: {\n    ':hover': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\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.borderRadius(0), // corners look strange if rounded\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n    },\n  },\n\n  underlineInteractive: {\n    ':hover': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\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  },\n\n  filled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    },\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  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  outlineDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n    },\n  },\n\n  underlineDisabled: {\n    '::before': {\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n\n  filledDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    gridColumnStart: '1',\n    gridColumnEnd: '2',\n    gridRowStart: '1',\n    gridRowEnd: '3',\n    outlineStyle: 'none',\n    ...shorthands.padding(0),\n  },\n});\n\nconst useButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    width: '24px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.border(0),\n    position: 'absolute',\n\n    outlineStyle: 'none',\n    height: '100%',\n\n    ':enabled:hover': {\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      outlineStyle: 'none',\n    },\n\n    ':disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  incrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '1',\n    gridRowEnd: '2',\n    ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n  },\n\n  // TODO: revisit these padding numbers for aligning the icon.\n  // Padding values aren't perfect.\n  // The icon doesn't align perfectly with the Figma designs.\n  // It's set in a 16x16px square but the artwork is inset from that\n  // so I've had to compute the numbers by handle.\n  // Additionally the design uses fractional values so these are\n  // rounded to the nearest integer.\n  incrementButtonSmall: {\n    ...shorthands.padding('3px', '5px', '0px', '5px'),\n  },\n\n  incrementButtonMedium: {\n    ...shorthands.padding('4px', '5px', '1px', '5px'),\n  },\n\n  decrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '2',\n    gridRowEnd: '3',\n    ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n  },\n\n  decrementButtonSmall: {\n    ...shorthands.padding('0px', '5px', '3px', '5px'),\n  },\n\n  decrementButtonMedium: {\n    ...shorthands.padding('1px', '5px', '4px', '5px'),\n  },\n\n  outline: {\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\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, size } = state;\n  const disabled = state.input.disabled;\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  // Grab the root className here so we can be sure to merge is last\n  const rootClassName = state.root.className;\n  state.root.className = undefined;\n  // Reuse react-input's styles without re-using the Input component.\n  useInputStyles_unstable({\n    size,\n    appearance,\n    input: state.input,\n    root: state.root,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n  });\n\n  state.root.className = mergeClasses(\n    state.root.className, // Get the classes from useInputStyles_unstable\n    spinButtonClassNames.root,\n    rootStyles.base,\n    appearance === 'outline' && rootStyles.outline,\n    appearance === 'underline' && rootStyles.underline,\n    filled && rootStyles.filled,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    disabled && rootStyles.disabled,\n    disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n    disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n    disabled && filled && rootStyles.filledDisabled,\n    rootClassName, // Make sure any original class name is applied last\n  );\n\n  state.incrementButton.className = mergeClasses(\n    spinButtonClassNames.incrementButton,\n    state.spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.incrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\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    state.spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.decrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\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(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAEA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,uBAAT,QAAwC,uBAAxC;AAEA,OAAO,MAAM,oBAAoB,GAAoC;EACnE,IAAI,EAAE,gBAD6D;EAEnE,KAAK,EAAE,uBAF4D;EAGnE,eAAe,EAAE,iCAHkD;EAInE,eAAe,EAAE;AAJkD,CAA9D;AAOP,MAAM,yBAAyB,GAAG;EAChC,YAAY,EAAE;AADkB,CAAlC;;AAIA,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;;AAmIA,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;;AAWA,MAAM,eAAe,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAxB,C,CAqJA;AACA;;;AACA,MAAM,uBAAuB,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAhC;AAkFA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM;IAAE,UAAF;IAAc,OAAd;IAAuB;EAAvB,IAAgC,KAAtC;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAN,CAAY,QAA7B;EACA,MAAM,MAAM,GAAG,UAAU,CAAC,UAAX,CAAsB,QAAtB,CAAf;EAEA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,YAAY,GAAG,eAAe,EAApC;EACA,MAAM,oBAAoB,GAAG,uBAAuB,EAApD;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC,CARsF,CAUtF;;EACA,MAAM,aAAa,GAAG,KAAK,CAAC,IAAN,CAAW,SAAjC;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,SAAvB,CAZsF,CAatF;;EACA,uBAAuB,CAAC;IACtB,IADsB;IAEtB,UAFsB;IAGtB,KAAK,EAAE,KAAK,CAAC,KAHS;IAItB,IAAI,EAAE,KAAK,CAAC,IAJU;IAKtB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,KAAK,EAAE,OAFG;MAGV,aAAa,EAAE,MAHL;MAIV,YAAY,EAAE;IAJJ;EALU,CAAD,CAAvB;EAaA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,KAAK,CAAC,IAAN,CAAW,SADsB,EACX;EACtB,oBAAoB,CAAC,IAFY,EAGjC,UAAU,CAAC,IAHsB,EAIjC,UAAU,KAAK,SAAf,IAA4B,UAAU,CAAC,OAJN,EAKjC,UAAU,KAAK,WAAf,IAA8B,UAAU,CAAC,SALR,EAMjC,MAAM,IAAI,UAAU,CAAC,MANY,EAOjC,CAAC,QAAD,IAAa,UAAU,KAAK,SAA5B,IAAyC,UAAU,CAAC,kBAPnB,EAQjC,CAAC,QAAD,IAAa,UAAU,KAAK,WAA5B,IAA2C,UAAU,CAAC,oBARrB,EASjC,CAAC,QAAD,IAAa,MAAb,IAAuB,UAAU,CAAC,iBATD,EAUjC,QAAQ,IAAI,UAAU,CAAC,QAVU,EAWjC,QAAQ,IAAI,UAAU,KAAK,SAA3B,IAAwC,UAAU,CAAC,eAXlB,EAYjC,QAAQ,IAAI,UAAU,KAAK,WAA3B,IAA0C,UAAU,CAAC,iBAZpB,EAajC,QAAQ,IAAI,MAAZ,IAAsB,UAAU,CAAC,cAbA,EAcjC,aAdiC,CAAnC;EAiBA,KAAK,CAAC,eAAN,CAAsB,SAAtB,GAAkC,YAAY,CAC5C,oBAAoB,CAAC,eADuB,EAE5C,KAAK,CAAC,SAAN,KAAoB,IAApB,IAA4B,GAAG,yBAAyB,CAAC,YAAY,EAFzB,EAG5C,YAAY,CAAC,IAH+B,EAI5C,YAAY,CAAC,eAJ+B,EAK5C,YAAY,CAAC,UAAD,CALgC,EAM5C,IAAI,KAAK,OAAT,GAAmB,YAAY,CAAC,oBAAhC,GAAuD,YAAY,CAAC,qBANxB,EAO5C,CAAC,OAAO,KAAK,KAAZ,IAAqB,OAAO,KAAK,MAAlC,KAA6C,oBAAoB,CAAC,IAPtB,EAQ5C,CAAC,OAAO,KAAK,KAAZ,IAAqB,OAAO,KAAK,MAAlC,KAA6C,oBAAoB,CAAC,UAAD,CARrB,EAS5C,KAAK,CAAC,eAAN,CAAsB,SATsB,CAA9C;EAWA,KAAK,CAAC,eAAN,CAAsB,SAAtB,GAAkC,YAAY,CAC5C,oBAAoB,CAAC,eADuB,EAE5C,KAAK,CAAC,SAAN,KAAoB,MAApB,IAA8B,GAAG,yBAAyB,CAAC,YAAY,EAF3B,EAG5C,YAAY,CAAC,IAH+B,EAI5C,YAAY,CAAC,eAJ+B,EAK5C,YAAY,CAAC,UAAD,CALgC,EAM5C,IAAI,KAAK,OAAT,GAAmB,YAAY,CAAC,oBAAhC,GAAuD,YAAY,CAAC,qBANxB,EAO5C,CAAC,OAAO,KAAK,KAAZ,IAAqB,OAAO,KAAK,MAAlC,KAA6C,oBAAoB,CAAC,IAPtB,EAQ5C,CAAC,OAAO,KAAK,KAAZ,IAAqB,OAAO,KAAK,MAAlC,KAA6C,oBAAoB,CAAC,UAAD,CARrB,EAS5C,KAAK,CAAC,eAAN,CAAsB,SATsB,CAA9C;EAYA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,oBAAoB,CAAC,KAAtB,EAA6B,KAAK,CAAC,KAAN,CAAY,SAAzC,EAAoD,WAAW,CAAC,IAAhE,CAApC;EAEA,OAAO,KAAP;AACD,CAtEM","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\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 useRootStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridTemplateColumns: `1fr 24px`,\n    gridTemplateRows: '1fr 1fr',\n    columnGap: tokens.spacingHorizontalXS,\n    rowGap: 0,\n    paddingRight: 0,\n    position: 'relative',\n    // Remove the border styles from react-input\n    ...shorthands.border('0'),\n    isolation: 'isolate',\n\n    // Apply border styles on the ::before pseudo element.\n    // We cannot use ::after since react-input uses that\n    // for the selector styles.\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      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      pointerEvents: 'none',\n      zIndex: 10,\n    },\n\n    '::after': {\n      right: 0,\n      bottom: 0,\n      left: 0,\n      zIndex: 20,\n    },\n  },\n\n  outline: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n\n  outlineInteractive: {\n    ':hover': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\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.borderRadius(0), // corners look strange if rounded\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n    },\n  },\n\n  underlineInteractive: {\n    ':hover': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\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  },\n\n  filled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    },\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  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  outlineDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n    },\n  },\n\n  underlineDisabled: {\n    '::before': {\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n\n  filledDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    gridColumnStart: '1',\n    gridColumnEnd: '2',\n    gridRowStart: '1',\n    gridRowEnd: '3',\n    outlineStyle: 'none',\n    ...shorthands.padding(0),\n  },\n});\n\nconst useButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    width: '24px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.border(0),\n    position: 'absolute',\n\n    outlineStyle: 'none',\n    height: '100%',\n\n    ':enabled:hover': {\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      outlineStyle: 'none',\n    },\n\n    ':disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  incrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '1',\n    gridRowEnd: '2',\n    ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n  },\n\n  // TODO: revisit these padding numbers for aligning the icon.\n  // Padding values aren't perfect.\n  // The icon doesn't align perfectly with the Figma designs.\n  // It's set in a 16x16px square but the artwork is inset from that\n  // so I've had to compute the numbers by handle.\n  // Additionally the design uses fractional values so these are\n  // rounded to the nearest integer.\n  incrementButtonSmall: {\n    ...shorthands.padding('3px', '5px', '0px', '5px'),\n  },\n\n  incrementButtonMedium: {\n    ...shorthands.padding('4px', '5px', '1px', '5px'),\n  },\n\n  decrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '2',\n    gridRowEnd: '3',\n    ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n  },\n\n  decrementButtonSmall: {\n    ...shorthands.padding('0px', '5px', '3px', '5px'),\n  },\n\n  decrementButtonMedium: {\n    ...shorthands.padding('1px', '5px', '4px', '5px'),\n  },\n\n  outline: {\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\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, size } = state;\n  const disabled = state.input.disabled;\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  // Grab the root className here so we can be sure to merge is last\n  const rootClassName = state.root.className;\n  state.root.className = undefined;\n  // Reuse react-input's styles without re-using the Input component.\n  useInputStyles_unstable({\n    size,\n    appearance,\n    input: state.input,\n    root: state.root,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n  });\n\n  state.root.className = mergeClasses(\n    state.root.className, // Get the classes from useInputStyles_unstable\n    spinButtonClassNames.root,\n    rootStyles.base,\n    appearance === 'outline' && rootStyles.outline,\n    appearance === 'underline' && rootStyles.underline,\n    filled && rootStyles.filled,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    disabled && rootStyles.disabled,\n    disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n    disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n    disabled && filled && rootStyles.filledDisabled,\n    rootClassName, // Make sure any original class name is applied last\n  );\n\n  state.incrementButton.className = mergeClasses(\n    spinButtonClassNames.incrementButton,\n    state.spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.incrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\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    state.spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.decrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\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(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/clamp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/clamp.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,KAAK,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA8B,GAA9B,KAAsD;AACzE,MAAI,SAAS,GAAG,KAAhB;;AACA,MAAI,GAAG,KAAK,SAAZ,EAAuB;AACrB,QAAI,GAAG,KAAK,SAAR,IAAqB,GAAG,GAAG,GAA/B,EAAoC;AAClC,YAAM,KAAK,GAAG,IAAI,KAAJ,EAAd;;AACA,UAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;AACA,QAAA,OAAO,CAAC,KAAR,CACE,CACE,gBAAgB,GAAG,kCAAkC,GAAG,IAD1D,EAEE,4CAFF,EAGE,oBAAoB,KAAK,IAH3B,EAIE,KAAK,CAAC,KAJR,EAKE,IALF,EADF;AAQD;;AACD,aAAO,KAAP;AACD;;AAED,IAAA,SAAS,GAAG,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,SAAd,CAAZ;AACD;;AAED,MAAI,GAAG,KAAK,SAAZ,EAAuB;AACrB,IAAA,SAAS,GAAG,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,SAAd,CAAZ;AACD;;AAED,SAAO,SAAP;AACD,CA3BM","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["utils/clamp.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,KAAK,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA8B,GAA9B,KAAsD;EACzE,IAAI,SAAS,GAAG,KAAhB;;EACA,IAAI,GAAG,KAAK,SAAZ,EAAuB;IACrB,IAAI,GAAG,KAAK,SAAR,IAAqB,GAAG,GAAG,GAA/B,EAAoC;MAClC,MAAM,KAAK,GAAG,IAAI,KAAJ,EAAd;;MACA,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;QACzC;QACA,OAAO,CAAC,KAAR,CACE,CACE,gBAAgB,GAAG,kCAAkC,GAAG,IAD1D,EAEE,4CAFF,EAGE,oBAAoB,KAAK,IAH3B,EAIE,KAAK,CAAC,KAJR,EAKE,IALF,EADF;MAQD;;MACD,OAAO,KAAP;IACD;;IAED,SAAS,GAAG,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,SAAd,CAAZ;EACD;;EAED,IAAI,GAAG,KAAK,SAAZ,EAAuB;IACrB,SAAS,GAAG,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,SAAd,CAAZ;EACD;;EAED,OAAO,SAAP;AACD,CA3BM","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"],"sourceRoot":"../src/"}

package/lib/utils/getBound.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/getBound.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,QAAQ,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA8B,GAA9B,KAAgE;AACtF,MAAI,GAAG,KAAK,SAAR,IAAqB,KAAK,KAAK,GAAnC,EAAwC;AACtC,QAAI,GAAG,KAAK,GAAZ,EAAiB;AACf,aAAO,MAAP;AACD;;AACD,WAAO,KAAP;AACD,GALD,MAKO,IAAI,GAAG,KAAK,SAAR,IAAqB,KAAK,KAAK,GAAnC,EAAwC;AAC7C,WAAO,KAAP;AACD;;AAED,SAAO,MAAP;AACD,CAXM","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["utils/getBound.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,QAAQ,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA8B,GAA9B,KAAgE;EACtF,IAAI,GAAG,KAAK,SAAR,IAAqB,KAAK,KAAK,GAAnC,EAAwC;IACtC,IAAI,GAAG,KAAK,GAAZ,EAAiB;MACf,OAAO,MAAP;IACD;;IACD,OAAO,KAAP;EACD,CALD,MAKO,IAAI,GAAG,KAAK,SAAR,IAAqB,KAAK,KAAK,GAAnC,EAAwC;IAC7C,OAAO,KAAP;EACD;;EAED,OAAO,MAAP;AACD,CAXM","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"],"sourceRoot":"../src/"}

package/lib/utils/precision.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/precision.ts"],"names":[],"mappings":"AAAA;;;;;;AAMG;AACH,OAAM,SAAU,kBAAV,CAA6B,KAA7B,EAAmD;AACvD;;;;;AAKG;AACH,QAAM,MAAM,GAAG,0BAA0B,IAA1B,CAA+B,MAAM,CAAC,KAAD,CAArC,CAAf;;AACA,MAAI,CAAC,MAAL,EAAa;AACX,WAAO,CAAP;AACD;;AACD,MAAI,MAAM,CAAC,CAAD,CAAV,EAAe;AACb,WAAO,CAAC,MAAM,CAAC,CAAD,CAAN,CAAU,MAAlB;AACD;;AACD,MAAI,MAAM,CAAC,CAAD,CAAV,EAAe;AACb,WAAO,MAAM,CAAC,CAAD,CAAN,CAAU,MAAjB;AACD;;AACD,SAAO,CAAP;AACD;AAED;;;;AAIG;;AACH,OAAM,SAAU,cAAV,CAAyB,KAAzB,EAAwC,SAAxC,EAA2D,IAAA,GAAe,EAA1E,EAA4E;AAChF,QAAM,GAAG,GAAG,IAAI,CAAC,GAAL,CAAS,IAAT,EAAe,SAAf,CAAZ;AACA,SAAO,IAAI,CAAC,KAAL,CAAW,KAAK,GAAG,GAAnB,IAA0B,GAAjC;AACD","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["utils/precision.ts"],"names":[],"mappings":"AAAA;;;;;;AAMG;AACH,OAAM,SAAU,kBAAV,CAA6B,KAA7B,EAAmD;EACvD;;;;;AAKG;EACH,MAAM,MAAM,GAAG,0BAA0B,IAA1B,CAA+B,MAAM,CAAC,KAAD,CAArC,CAAf;;EACA,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,CAAP;EACD;;EACD,IAAI,MAAM,CAAC,CAAD,CAAV,EAAe;IACb,OAAO,CAAC,MAAM,CAAC,CAAD,CAAN,CAAU,MAAlB;EACD;;EACD,IAAI,MAAM,CAAC,CAAD,CAAV,EAAe;IACb,OAAO,MAAM,CAAC,CAAD,CAAN,CAAU,MAAjB;EACD;;EACD,OAAO,CAAP;AACD;AAED;;;;AAIG;;AACH,OAAM,SAAU,cAAV,CAAyB,KAAzB,EAAwC,SAAxC,EAA2D,IAAA,GAAe,EAA1E,EAA4E;EAChF,MAAM,GAAG,GAAG,IAAI,CAAC,GAAL,CAAS,IAAT,EAAe,SAAf,CAAZ;EACA,OAAO,IAAI,CAAC,KAAL,CAAW,KAAK,GAAG,GAAnB,IAA0B,GAAjC;AACD","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"],"sourceRoot":"../src/"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["components/SpinButton/renderSpinButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAtB,CAFF,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAtB,CAHF,CADF;AAOD,CAhCM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SpinButtonState, SpinButtonSlots } from './SpinButton.types';\n\n/**\n * Render the final JSX of SpinButton\n */\nexport const renderSpinButton_unstable = (state: SpinButtonState) => {\n  // Leaving this here for now.\n  // This is the approach using react-input's Input component.\n  // It has some Typescript problems and feels hacky.\n  // const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n  // const { contentAfter, ...otherInputSlotProps } = slotProps.input as SpinButtonSlots['input'];\n  // const inputContentAfter = {\n  //   ...contentAfter,\n  //   children: (\n  //     <>\n  //       <slots.incrementButton {...slotProps.incrementButton} />\n  //       <slots.decrementButton {...slotProps.decrementButton} />\n  //     </>\n  //   ),\n  // };\n\n  // return (\n  //   <slots.root {...slotProps.root}>\n  //     <slots.input {...otherInputSlotProps} contentAfter={inputContentAfter}/>\n  //   </slots.root>\n  // );\n\n  const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      <slots.incrementButton {...slotProps.incrementButton} />\n      <slots.decrementButton {...slotProps.decrementButton} />\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/SpinButton/renderSpinButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;EAClE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,CAFF,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,eAAP,EAAsB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAtB,CAHF,CADF;AAOD,CAhCM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SpinButtonState, SpinButtonSlots } from './SpinButton.types';\n\n/**\n * Render the final JSX of SpinButton\n */\nexport const renderSpinButton_unstable = (state: SpinButtonState) => {\n  // Leaving this here for now.\n  // This is the approach using react-input's Input component.\n  // It has some Typescript problems and feels hacky.\n  // const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n  // const { contentAfter, ...otherInputSlotProps } = slotProps.input as SpinButtonSlots['input'];\n  // const inputContentAfter = {\n  //   ...contentAfter,\n  //   children: (\n  //     <>\n  //       <slots.incrementButton {...slotProps.incrementButton} />\n  //       <slots.decrementButton {...slotProps.decrementButton} />\n  //     </>\n  //   ),\n  // };\n\n  // return (\n  //   <slots.root {...slotProps.root}>\n  //     <slots.input {...otherInputSlotProps} contentAfter={inputContentAfter}/>\n  //   </slots.root>\n  // );\n\n  const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      <slots.incrementButton {...slotProps.incrementButton} />\n      <slots.decrementButton {...slotProps.decrementButton} />\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -107,7 +107,8 @@ const useSpinButton_unstable = (props, ref) => {
         tabIndex: -1,
         children: React.createElement(react_icons_1.ChevronUp16Regular, null),
         disabled: nativeProps.primary.disabled,
-        'aria-label': 'Increment value'
+        'aria-label': 'Increment value',
+        type: 'button'
       }
     }),
     decrementButton: react_utilities_1.resolveShorthand(decrementButton, {
@@ -116,7 +117,8 @@ const useSpinButton_unstable = (props, ref) => {
         tabIndex: -1,
         children: React.createElement(react_icons_1.ChevronDown16Regular, null),
         disabled: nativeProps.primary.disabled,
-        'aria-label': 'Decrement value'
+        'aria-label': 'Decrement value',
+        type: 'button'
       }
     })
   };

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

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

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

@@ -157,7 +157,15 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
   "d": [".fwk3njj{display:inline-grid;}", ".f1sr6ibj{grid-template-columns:1fr 24px;}", ".fio9c21{grid-template-rows:1fr 1fr;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1sff6ri{row-gap:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f10pi13n{position:relative;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1ngn1p8{isolation:isolate;}", ".f1wl9k8s::before{content:\"\";}", ".fyl8oag::before{box-sizing:border-box;}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1f351id::before{right:0;}", ".f1fzr1x6::before{left:0;}", ".fchca7p::before{bottom:0;}", ".f1pl9g23::before{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f3orl67::before{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2gop1n::before{border-top-right-radius:var(--borderRadiusMedium);}", ".f11nyhth::before{border-top-left-radius:var(--borderRadiusMedium);}", ".fxuihnu::before{pointer-events:none;}", ".fzjygzn::before{z-index:10;}", ".f15yvnhg::after{right:0;}", ".f1n6gb5g::after{left:0;}", ".fo72kxq::after{bottom:0;}", ".f5yjgw6::after{z-index:20;}", ".f1fjh9ub::before{border-top-width:1px;}", ".ff9c942::before{border-right-width:1px;}", ".f6rdg5o::before{border-left-width:1px;}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}", ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}", ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}", ".fchs65t::before{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fw32bj::before{border-bottom-right-radius:0;}", ".fziivox::before{border-bottom-left-radius:0;}", ".feccbv4::before{border-top-right-radius:0;}", ".f1jqz70h::before{border-top-left-radius:0;}", ".f7dgwnz::before{border-top-color:var(--colorTransparentStroke);}", ".f1edeodt::before{border-right-color:var(--colorTransparentStroke);}", ".fszsv3f::before{border-left-color:var(--colorTransparentStroke);}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f1a0lfh7::before{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1p2ejm6::before{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fmzytvz::before{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fas2e61::before{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1syzi09::before{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".fd35vam::before{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1n48vvu::before{border-right-color:var(--colorTransparentStrokeDisabled);}", ".f7wchoe::before{border-left-color:var(--colorTransparentStrokeDisabled);}"],
   "h": [".f1w2y1rc:hover::before{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1gofhvl:hover::before{border-right-color:var(--colorNeutralStroke1Hover);}", ".f18htlvq:hover::before{border-left-color:var(--colorNeutralStroke1Hover);}", ".ffcnd28:hover::before{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1xqt08:hover,.f1xqt08:focus-within::before{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover,.fzt5lgo:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover,.f8tv3r9:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fyhrops:hover,.fyhrops:focus-within::before{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
   "a": [".f6lmxco:active,.f6lmxco:focus-within::before{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active,.fcoc0mf:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f15r4wkl:active,.f15r4wkl:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1ipdth8:active,.f1ipdth8:focus-within::before{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"],
-  "t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]
+  "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }]]
 });
 
 const useInputStyles = /*#__PURE__*/react_1.__styles({

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

@@ -1 +1 @@
-{"version":3,"sources":["components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\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 useRootStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridTemplateColumns: `1fr 24px`,\n    gridTemplateRows: '1fr 1fr',\n    columnGap: tokens.spacingHorizontalXS,\n    rowGap: 0,\n    paddingRight: 0,\n    position: 'relative',\n    // Remove the border styles from react-input\n    ...shorthands.border('0'),\n    isolation: 'isolate',\n\n    // Apply border styles on the ::before pseudo element.\n    // We cannot use ::after since react-input uses that\n    // for the selector styles.\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      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      pointerEvents: 'none',\n      zIndex: 10,\n    },\n\n    '::after': {\n      right: 0,\n      bottom: 0,\n      left: 0,\n      zIndex: 20,\n    },\n  },\n\n  outline: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n\n  outlineInteractive: {\n    ':hover': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\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.borderRadius(0), // corners look strange if rounded\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n    },\n  },\n\n  underlineInteractive: {\n    ':hover': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\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  },\n\n  filled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    },\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  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  outlineDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n    },\n  },\n\n  underlineDisabled: {\n    '::before': {\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n\n  filledDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    gridColumnStart: '1',\n    gridColumnEnd: '2',\n    gridRowStart: '1',\n    gridRowEnd: '3',\n    outlineStyle: 'none',\n    ...shorthands.padding(0),\n  },\n});\n\nconst useButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    width: '24px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.border(0),\n    position: 'absolute',\n\n    outlineStyle: 'none',\n    height: '100%',\n\n    ':enabled:hover': {\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      outlineStyle: 'none',\n    },\n\n    ':disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  incrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '1',\n    gridRowEnd: '2',\n    ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n  },\n\n  // TODO: revisit these padding numbers for aligning the icon.\n  // Padding values aren't perfect.\n  // The icon doesn't align perfectly with the Figma designs.\n  // It's set in a 16x16px square but the artwork is inset from that\n  // so I've had to compute the numbers by handle.\n  // Additionally the design uses fractional values so these are\n  // rounded to the nearest integer.\n  incrementButtonSmall: {\n    ...shorthands.padding('3px', '5px', '0px', '5px'),\n  },\n\n  incrementButtonMedium: {\n    ...shorthands.padding('4px', '5px', '1px', '5px'),\n  },\n\n  decrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '2',\n    gridRowEnd: '3',\n    ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n  },\n\n  decrementButtonSmall: {\n    ...shorthands.padding('0px', '5px', '3px', '5px'),\n  },\n\n  decrementButtonMedium: {\n    ...shorthands.padding('1px', '5px', '4px', '5px'),\n  },\n\n  outline: {\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\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, size } = state;\n  const disabled = state.input.disabled;\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  // Grab the root className here so we can be sure to merge is last\n  const rootClassName = state.root.className;\n  state.root.className = undefined;\n  // Reuse react-input's styles without re-using the Input component.\n  useInputStyles_unstable({\n    size,\n    appearance,\n    input: state.input,\n    root: state.root,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n  });\n\n  state.root.className = mergeClasses(\n    state.root.className, // Get the classes from useInputStyles_unstable\n    spinButtonClassNames.root,\n    rootStyles.base,\n    appearance === 'outline' && rootStyles.outline,\n    appearance === 'underline' && rootStyles.underline,\n    filled && rootStyles.filled,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    disabled && rootStyles.disabled,\n    disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n    disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n    disabled && filled && rootStyles.filledDisabled,\n    rootClassName, // Make sure any original class name is applied last\n  );\n\n  state.incrementButton.className = mergeClasses(\n    spinButtonClassNames.incrementButton,\n    state.spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.incrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\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    state.spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.decrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\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(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\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 useRootStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridTemplateColumns: `1fr 24px`,\n    gridTemplateRows: '1fr 1fr',\n    columnGap: tokens.spacingHorizontalXS,\n    rowGap: 0,\n    paddingRight: 0,\n    position: 'relative',\n    // Remove the border styles from react-input\n    ...shorthands.border('0'),\n    isolation: 'isolate',\n\n    // Apply border styles on the ::before pseudo element.\n    // We cannot use ::after since react-input uses that\n    // for the selector styles.\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      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      pointerEvents: 'none',\n      zIndex: 10,\n    },\n\n    '::after': {\n      right: 0,\n      bottom: 0,\n      left: 0,\n      zIndex: 20,\n    },\n  },\n\n  outline: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n\n  outlineInteractive: {\n    ':hover': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\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.borderRadius(0), // corners look strange if rounded\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n    },\n  },\n\n  underlineInteractive: {\n    ':hover': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\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  },\n\n  filled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    },\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  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  outlineDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n    },\n  },\n\n  underlineDisabled: {\n    '::before': {\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n\n  filledDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    gridColumnStart: '1',\n    gridColumnEnd: '2',\n    gridRowStart: '1',\n    gridRowEnd: '3',\n    outlineStyle: 'none',\n    ...shorthands.padding(0),\n  },\n});\n\nconst useButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    width: '24px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.border(0),\n    position: 'absolute',\n\n    outlineStyle: 'none',\n    height: '100%',\n\n    ':enabled:hover': {\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      outlineStyle: 'none',\n    },\n\n    ':disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  incrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '1',\n    gridRowEnd: '2',\n    ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n  },\n\n  // TODO: revisit these padding numbers for aligning the icon.\n  // Padding values aren't perfect.\n  // The icon doesn't align perfectly with the Figma designs.\n  // It's set in a 16x16px square but the artwork is inset from that\n  // so I've had to compute the numbers by handle.\n  // Additionally the design uses fractional values so these are\n  // rounded to the nearest integer.\n  incrementButtonSmall: {\n    ...shorthands.padding('3px', '5px', '0px', '5px'),\n  },\n\n  incrementButtonMedium: {\n    ...shorthands.padding('4px', '5px', '1px', '5px'),\n  },\n\n  decrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '2',\n    gridRowEnd: '3',\n    ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n  },\n\n  decrementButtonSmall: {\n    ...shorthands.padding('0px', '5px', '3px', '5px'),\n  },\n\n  decrementButtonMedium: {\n    ...shorthands.padding('1px', '5px', '4px', '5px'),\n  },\n\n  outline: {\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\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, size } = state;\n  const disabled = state.input.disabled;\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  // Grab the root className here so we can be sure to merge is last\n  const rootClassName = state.root.className;\n  state.root.className = undefined;\n  // Reuse react-input's styles without re-using the Input component.\n  useInputStyles_unstable({\n    size,\n    appearance,\n    input: state.input,\n    root: state.root,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n  });\n\n  state.root.className = mergeClasses(\n    state.root.className, // Get the classes from useInputStyles_unstable\n    spinButtonClassNames.root,\n    rootStyles.base,\n    appearance === 'outline' && rootStyles.outline,\n    appearance === 'underline' && rootStyles.underline,\n    filled && rootStyles.filled,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    disabled && rootStyles.disabled,\n    disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n    disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n    disabled && filled && rootStyles.filledDisabled,\n    rootClassName, // Make sure any original class name is applied last\n  );\n\n  state.incrementButton.className = mergeClasses(\n    spinButtonClassNames.incrementButton,\n    state.spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.incrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\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    state.spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.decrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\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(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,UAAA;AAAU;AAAV,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,yBAAA;AAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,4BAAA;AAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,sBAAA;AAAsB;AAAtB,CAAA","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,UAAA;EAAU;AAAV,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,4BAAA;EAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA","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"],"sourceRoot":"../src/"}

package/lib-commonjs/utils/clamp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/clamp.ts"],"names":[],"mappings":";;;;;;;AAAO,MAAM,KAAK,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA8B,GAA9B,KAAsD;AACzE,MAAI,SAAS,GAAG,KAAhB;;AACA,MAAI,GAAG,KAAK,SAAZ,EAAuB;AACrB,QAAI,GAAG,KAAK,SAAR,IAAqB,GAAG,GAAG,GAA/B,EAAoC;AAClC,YAAM,KAAK,GAAG,IAAI,KAAJ,EAAd;;AACA,UAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;AACA,QAAA,OAAO,CAAC,KAAR,CACE,CACE,gBAAgB,GAAG,kCAAkC,GAAG,IAD1D,EAEE,4CAFF,EAGE,oBAAoB,KAAK,IAH3B,EAIE,KAAK,CAAC,KAJR,EAKE,IALF,EADF;AAQD;;AACD,aAAO,KAAP;AACD;;AAED,IAAA,SAAS,GAAG,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,SAAd,CAAZ;AACD;;AAED,MAAI,GAAG,KAAK,SAAZ,EAAuB;AACrB,IAAA,SAAS,GAAG,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,SAAd,CAAZ;AACD;;AAED,SAAO,SAAP;AACD,CA3BM;;AAAM,OAAA,CAAA,KAAA,GAAK,KAAL","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["utils/clamp.ts"],"names":[],"mappings":";;;;;;;AAAO,MAAM,KAAK,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA8B,GAA9B,KAAsD;EACzE,IAAI,SAAS,GAAG,KAAhB;;EACA,IAAI,GAAG,KAAK,SAAZ,EAAuB;IACrB,IAAI,GAAG,KAAK,SAAR,IAAqB,GAAG,GAAG,GAA/B,EAAoC;MAClC,MAAM,KAAK,GAAG,IAAI,KAAJ,EAAd;;MACA,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;QACzC;QACA,OAAO,CAAC,KAAR,CACE,CACE,gBAAgB,GAAG,kCAAkC,GAAG,IAD1D,EAEE,4CAFF,EAGE,oBAAoB,KAAK,IAH3B,EAIE,KAAK,CAAC,KAJR,EAKE,IALF,EADF;MAQD;;MACD,OAAO,KAAP;IACD;;IAED,SAAS,GAAG,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,SAAd,CAAZ;EACD;;EAED,IAAI,GAAG,KAAK,SAAZ,EAAuB;IACrB,SAAS,GAAG,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,SAAd,CAAZ;EACD;;EAED,OAAO,SAAP;AACD,CA3BM;;AAAM,OAAA,CAAA,KAAA,GAAK,KAAL","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"],"sourceRoot":"../src/"}

package/lib-commonjs/utils/getBound.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/getBound.ts"],"names":[],"mappings":";;;;;;;AAEO,MAAM,QAAQ,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA8B,GAA9B,KAAgE;AACtF,MAAI,GAAG,KAAK,SAAR,IAAqB,KAAK,KAAK,GAAnC,EAAwC;AACtC,QAAI,GAAG,KAAK,GAAZ,EAAiB;AACf,aAAO,MAAP;AACD;;AACD,WAAO,KAAP;AACD,GALD,MAKO,IAAI,GAAG,KAAK,SAAR,IAAqB,KAAK,KAAK,GAAnC,EAAwC;AAC7C,WAAO,KAAP;AACD;;AAED,SAAO,MAAP;AACD,CAXM;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["utils/getBound.ts"],"names":[],"mappings":";;;;;;;AAEO,MAAM,QAAQ,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA8B,GAA9B,KAAgE;EACtF,IAAI,GAAG,KAAK,SAAR,IAAqB,KAAK,KAAK,GAAnC,EAAwC;IACtC,IAAI,GAAG,KAAK,GAAZ,EAAiB;MACf,OAAO,MAAP;IACD;;IACD,OAAO,KAAP;EACD,CALD,MAKO,IAAI,GAAG,KAAK,SAAR,IAAqB,KAAK,KAAK,GAAnC,EAAwC;IAC7C,OAAO,KAAP;EACD;;EAED,OAAO,MAAP;AACD,CAXM;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR","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"],"sourceRoot":"../src/"}

package/lib-commonjs/utils/precision.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/precision.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;AAMG;;AACH,SAAgB,kBAAhB,CAAmC,KAAnC,EAAyD;AACvD;;;;;AAKG;AACH,QAAM,MAAM,GAAG,0BAA0B,IAA1B,CAA+B,MAAM,CAAC,KAAD,CAArC,CAAf;;AACA,MAAI,CAAC,MAAL,EAAa;AACX,WAAO,CAAP;AACD;;AACD,MAAI,MAAM,CAAC,CAAD,CAAV,EAAe;AACb,WAAO,CAAC,MAAM,CAAC,CAAD,CAAN,CAAU,MAAlB;AACD;;AACD,MAAI,MAAM,CAAC,CAAD,CAAV,EAAe;AACb,WAAO,MAAM,CAAC,CAAD,CAAN,CAAU,MAAjB;AACD;;AACD,SAAO,CAAP;AACD;;AAlBD,OAAA,CAAA,kBAAA,GAAA,kBAAA;AAoBA;;;;AAIG;;AACH,SAAgB,cAAhB,CAA+B,KAA/B,EAA8C,SAA9C,EAAiE,IAAA,GAAe,EAAhF,EAAkF;AAChF,QAAM,GAAG,GAAG,IAAI,CAAC,GAAL,CAAS,IAAT,EAAe,SAAf,CAAZ;AACA,SAAO,IAAI,CAAC,KAAL,CAAW,KAAK,GAAG,GAAnB,IAA0B,GAAjC;AACD;;AAHD,OAAA,CAAA,cAAA,GAAA,cAAA","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["utils/precision.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;AAMG;;AACH,SAAgB,kBAAhB,CAAmC,KAAnC,EAAyD;EACvD;;;;;AAKG;EACH,MAAM,MAAM,GAAG,0BAA0B,IAA1B,CAA+B,MAAM,CAAC,KAAD,CAArC,CAAf;;EACA,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,CAAP;EACD;;EACD,IAAI,MAAM,CAAC,CAAD,CAAV,EAAe;IACb,OAAO,CAAC,MAAM,CAAC,CAAD,CAAN,CAAU,MAAlB;EACD;;EACD,IAAI,MAAM,CAAC,CAAD,CAAV,EAAe;IACb,OAAO,MAAM,CAAC,CAAD,CAAN,CAAU,MAAjB;EACD;;EACD,OAAO,CAAP;AACD;;AAlBD,OAAA,CAAA,kBAAA,GAAA,kBAAA;AAoBA;;;;AAIG;;AACH,SAAgB,cAAhB,CAA+B,KAA/B,EAA8C,SAA9C,EAAiE,IAAA,GAAe,EAAhF,EAAkF;EAChF,MAAM,GAAG,GAAG,IAAI,CAAC,GAAL,CAAS,IAAT,EAAe,SAAf,CAAZ;EACA,OAAO,IAAI,CAAC,KAAL,CAAW,KAAK,GAAG,GAAnB,IAA0B,GAAjC;AACD;;AAHD,OAAA,CAAA,cAAA,GAAA,cAAA","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"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinbutton",
-  "version": "9.0.0-beta.14",
+  "version": "9.0.0-beta.15",
   "description": "Fluent UI React SpinButton component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,17 +28,17 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.8",
-    "@fluentui/react-label": "9.0.0-rc.6",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.9",
+    "@fluentui/react-label": "^9.0.0",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@griffel/react": "1.1.0",
-    "@fluentui/keyboard-keys": "9.0.0-rc.6",
-    "@fluentui/react-icons": "^2.0.166-rc.3",
-    "@fluentui/react-input": "9.0.0-rc.6",
-    "@fluentui/react-theme": "9.0.0-rc.10",
-    "@fluentui/react-utilities": "9.0.0-rc.10",
+    "@griffel/react": "1.2.0",
+    "@fluentui/keyboard-keys": "^9.0.0",
+    "@fluentui/react-icons": "^2.0.172-rc.8",
+    "@fluentui/react-input": "^9.0.0",
+    "@fluentui/react-theme": "^9.0.0",
+    "@fluentui/react-utilities": "^9.0.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {