@fluentui/react-spinbutton 9.6.2 → 9.6.3

package/CHANGELOG.md

@@ -1,19 +1,30 @@
 # Change Log - @fluentui/react-spinbutton
 
-This log was last generated on Thu, 23 Apr 2026 11:59:32 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:34:00 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.6.3)
+
+Tue, 26 May 2026 09:34:00 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.6.2..@fluentui/react-spinbutton_v9.6.3)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.5.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
 ## [9.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.6.2)
 
-Thu, 23 Apr 2026 11:59:32 GMT 
+Thu, 23 Apr 2026 14:21:12 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.6.1..@fluentui/react-spinbutton_v9.6.2)
 
 ### Patches
 
-- Bump @fluentui/react-field to v9.5.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-field to v9.5.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 
 ## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.6.1)
 

package/lib/components/SpinButton/useSpinButton.js

@@ -94,7 +94,6 @@ const lerp = (start, end, percent)=>start + (end - start) * percent;
         if (inputRef.current) {
             // we need to set this here using the IDL attribute directly, because otherwise the timing of the ARIA value update
             // is not in sync with the user-entered native input value, and some screen readers end up reading the wrong value.
-            // eslint-disable-next-line react-compiler/react-compiler
             inputRef.current.ariaValueNow = newValue;
         }
     };
@@ -190,11 +189,15 @@ const lerp = (start, end, percent)=>start + (end - start) * percent;
         valueToDisplay = textValue;
     } else if (value === null || currentValue === null) {
         valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : '';
+        // eslint-disable-next-line react-hooks/refs
         internalState.current.value = null;
+        // eslint-disable-next-line react-hooks/refs
         internalState.current.atBound = 'none';
     } else {
         const roundedValue = precisionRound(currentValue, precision);
+        // eslint-disable-next-line react-hooks/refs
         internalState.current.value = roundedValue;
+        // eslint-disable-next-line react-hooks/refs
         internalState.current.atBound = getBound(roundedValue, min, max);
         if (isControlled) {
             valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);
@@ -204,6 +207,7 @@ const lerp = (start, end, percent)=>start + (end - start) * percent;
     }
     const state = {
         spinState: keyboardSpinState,
+        // eslint-disable-next-line react-hooks/refs
         atBound: internalState.current.atBound,
         components: {
             root: 'span',
@@ -227,7 +231,9 @@ const lerp = (start, end, percent)=>start + (end - start) * percent;
         incrementButton: slot.always(incrementButton, {
             defaultProps: {
                 tabIndex: -1,
-                disabled: nativeProps.primary.readOnly || nativeProps.primary.disabled || internalState.current.atBound === 'max' || internalState.current.atBound === 'both',
+                disabled: nativeProps.primary.readOnly || nativeProps.primary.disabled || // eslint-disable-next-line react-hooks/refs
+                internalState.current.atBound === 'max' || // eslint-disable-next-line react-hooks/refs
+                internalState.current.atBound === 'both',
                 'aria-label': 'Increment value',
                 type: 'button'
             },
@@ -236,32 +242,52 @@ const lerp = (start, end, percent)=>start + (end - start) * percent;
         decrementButton: slot.always(decrementButton, {
             defaultProps: {
                 tabIndex: -1,
-                disabled: nativeProps.primary.readOnly || nativeProps.primary.disabled || internalState.current.atBound === 'min' || internalState.current.atBound === 'both',
+                disabled: nativeProps.primary.readOnly || nativeProps.primary.disabled || // eslint-disable-next-line react-hooks/refs
+                internalState.current.atBound === 'min' || // eslint-disable-next-line react-hooks/refs
+                internalState.current.atBound === 'both',
                 'aria-label': 'Decrement value',
                 type: 'button'
             },
             elementType: 'button'
         })
     };
+    // eslint-disable-next-line react-hooks/refs
     state.input.value = valueToDisplay;
+    // eslint-disable-next-line react-hooks/refs
     state.input.ref = useMergedRefs(inputRef, ref);
+    // eslint-disable-next-line react-hooks/refs
     state.input['aria-valuemin'] = min;
+    // eslint-disable-next-line react-hooks/refs
     state.input['aria-valuemax'] = max;
     var _internalState_current_value;
+    // eslint-disable-next-line react-hooks/refs
     state.input['aria-valuenow'] = (_internalState_current_value = internalState.current.value) !== null && _internalState_current_value !== void 0 ? _internalState_current_value : undefined;
     var _state_input_ariavaluetext;
+    // eslint-disable-next-line react-hooks/refs
     state.input['aria-valuetext'] = (_state_input_ariavaluetext = state.input['aria-valuetext']) !== null && _state_input_ariavaluetext !== void 0 ? _state_input_ariavaluetext : value !== undefined && displayValue || undefined;
+    // eslint-disable-next-line react-hooks/refs
     state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);
+    // eslint-disable-next-line react-hooks/refs
     state.input.onInput = mergeCallbacks(state.input.onInput, handleInputChange);
+    // eslint-disable-next-line react-hooks/refs
     state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);
+    // eslint-disable-next-line react-hooks/refs
     state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);
+    // eslint-disable-next-line react-hooks/refs
     state.input.onKeyUp = mergeCallbacks(state.input.onKeyUp, handleKeyUp);
+    // eslint-disable-next-line react-hooks/refs
     state.incrementButton.onMouseDown = mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);
+    // eslint-disable-next-line react-hooks/refs
     state.incrementButton.onMouseUp = mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);
+    // eslint-disable-next-line react-hooks/refs
     state.incrementButton.onMouseLeave = mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);
+    // eslint-disable-next-line react-hooks/refs
     state.decrementButton.onMouseDown = mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);
+    // eslint-disable-next-line react-hooks/refs
     state.decrementButton.onMouseUp = mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);
+    // eslint-disable-next-line react-hooks/refs
     state.decrementButton.onMouseLeave = mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);
+    // eslint-disable-next-line react-hooks/refs
     return state;
 };
 /**

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SpinButton/useSpinButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useControllableState,\n  useTimeout,\n  slot,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { ArrowUp, ArrowDown, End, Enter, Escape, Home, PageDown, PageUp } from '@fluentui/keyboard-keys';\nimport type {\n  SpinButtonBaseProps,\n  SpinButtonBaseState,\n  SpinButtonProps,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonChangeEvent,\n  SpinButtonBounds,\n} from './SpinButton.types';\nimport { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\ntype InternalState = {\n  value: number | null;\n  spinState: SpinButtonSpinState;\n  spinTime: number;\n  spinDelay: number;\n  previousTextValue?: string;\n  atBound: SpinButtonBounds;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease for the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the base state required to render SpinButton without design-specific props.\n *\n * @param props - props from this instance of SpinButton (without appearance/size)\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButtonBase_unstable = (\n  props: SpinButtonBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): SpinButtonBaseState => {\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', '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    root,\n    input,\n    incrementButton,\n    decrementButton,\n  } = props;\n\n  const precision = React.useMemo(() => {\n    return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n  }, [precisionFromProps, step]);\n\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: value,\n    defaultState: defaultValue,\n    initialState: 0,\n  });\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const isControlled = value !== undefined;\n\n  const [textValue, setTextValue] = React.useState<string | undefined>(undefined);\n  const [keyboardSpinState, setKeyboardSpinState] = React.useState<SpinButtonSpinState>('rest');\n\n  const internalState = React.useRef<InternalState>({\n    value: currentValue,\n    spinState: 'rest',\n    spinTime: 0,\n    spinDelay: DEFAULT_SPIN_DELAY_MS,\n    atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none',\n  });\n\n  const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n  const stepValue = (\n    e: SpinButtonChangeEvent,\n    direction: 'up' | 'down' | 'upPage' | 'downPage',\n    startFrom?: string,\n  ) => {\n    let startValue = internalState.current.value;\n    if (startFrom) {\n      const num = parseFloat(startFrom);\n      if (!isNaN(num)) {\n        startValue = num;\n      }\n    }\n    const val = startValue;\n    const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n    const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n    if (val === null) {\n      const stepStart = min === undefined ? 0 : min;\n      const nullStep = clamp(stepStart + stepSize * dir, min, max);\n      commit(e, nullStep);\n      return;\n    }\n\n    let newValue = val + stepSize * dir;\n    if (!Number.isNaN(newValue)) {\n      newValue = clamp(newValue, min, max);\n    }\n\n    commit(e, newValue);\n\n    if (internalState.current.spinState !== 'rest') {\n      setStepTimeout(() => {\n        // Ease the step speed a bit\n        internalState.current.spinTime += internalState.current.spinDelay;\n        internalState.current.spinDelay = lerp(\n          DEFAULT_SPIN_DELAY_MS,\n          MIN_SPIN_DELAY_MS,\n          internalState.current.spinTime / MAX_SPIN_TIME_MS,\n        );\n        stepValue(e, direction);\n      }, internalState.current.spinDelay);\n    }\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!internalState.current.previousTextValue) {\n      internalState.current.previousTextValue = textValue ?? String(currentValue);\n    }\n    const newValue = e.target.value;\n    setTextValue(newValue);\n    if (inputRef.current) {\n      // we need to set this here using the IDL attribute directly, because otherwise the timing of the ARIA value update\n      // is not in sync with the user-entered native input value, and some screen readers end up reading the wrong value.\n      // eslint-disable-next-line react-compiler/react-compiler\n      inputRef.current.ariaValueNow = newValue;\n    }\n  };\n\n  const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.spinState = 'up';\n    stepValue(e, 'up');\n  };\n\n  const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.spinState = 'down';\n    stepValue(e, 'down');\n  };\n\n  const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    clearStepTimeout();\n    internalState.current.spinState = 'rest';\n    internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n    internalState.current.spinTime = 0;\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.previousTextValue = undefined;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    let nextKeyboardSpinState: SpinButtonSpinState = 'rest';\n\n    if (e.currentTarget.readOnly) {\n      return;\n    }\n\n    if (e.key === ArrowUp) {\n      stepValue(e, 'up', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === ArrowDown) {\n      stepValue(e, 'down', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (e.key === PageUp) {\n      e.preventDefault();\n      stepValue(e, 'upPage', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === PageDown) {\n      e.preventDefault();\n      stepValue(e, 'downPage', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === Home && min !== undefined) {\n      commit(e, min);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === End && max !== undefined) {\n      commit(e, max);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === Enter) {\n      commit(e, currentValue, textValue);\n      internalState.current.previousTextValue = undefined;\n    } else if (e.key === Escape) {\n      if (internalState.current.previousTextValue) {\n        setTextValue(undefined);\n        internalState.current.previousTextValue = undefined;\n      }\n    }\n\n    if (keyboardSpinState !== nextKeyboardSpinState) {\n      setKeyboardSpinState(nextKeyboardSpinState);\n    }\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (keyboardSpinState !== 'rest') {\n      setKeyboardSpinState('rest');\n      internalState.current.spinState = 'rest';\n    }\n  };\n\n  const commit = (e: SpinButtonChangeEvent, newValue?: number | null, newDisplayValue?: string) => {\n    const valueChanged = newValue !== undefined && currentValue !== newValue;\n    const displayValueChanged =\n      newDisplayValue !== undefined &&\n      internalState.current.previousTextValue !== undefined &&\n      internalState.current.previousTextValue !== newDisplayValue;\n\n    let roundedValue;\n    if (valueChanged) {\n      roundedValue = precisionRound(newValue!, precision);\n      setCurrentValue(roundedValue);\n      internalState.current.value = roundedValue;\n    } else if (displayValueChanged && !isControlled) {\n      const nextValue = parseFloat(newDisplayValue as string);\n      if (!isNaN(nextValue)) {\n        setCurrentValue(precisionRound(nextValue, precision));\n        internalState.current.value = precisionRound(nextValue, precision);\n      }\n    }\n\n    if (valueChanged || displayValueChanged) {\n      onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n    }\n\n    setTextValue(undefined);\n  };\n\n  let valueToDisplay;\n  if (textValue !== undefined) {\n    valueToDisplay = textValue;\n  } else if (value === null || currentValue === null) {\n    valueToDisplay = displayValue ?? '';\n    internalState.current.value = null;\n    internalState.current.atBound = 'none';\n  } else {\n    const roundedValue = precisionRound(currentValue, precision);\n    internalState.current.value = roundedValue;\n    internalState.current.atBound = getBound(roundedValue, min, max);\n    if (isControlled) {\n      valueToDisplay = displayValue ?? String(roundedValue);\n    } else {\n      valueToDisplay = String(roundedValue);\n    }\n  }\n\n  const state: SpinButtonBaseState = {\n    spinState: keyboardSpinState,\n    atBound: internalState.current.atBound,\n\n    components: {\n      root: 'span',\n      input: 'input',\n      incrementButton: 'button',\n      decrementButton: 'button',\n    },\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        autoComplete: 'off',\n        role: 'spinbutton',\n        type: 'text',\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    incrementButton: slot.always(incrementButton, {\n      defaultProps: {\n        tabIndex: -1,\n        disabled:\n          nativeProps.primary.readOnly ||\n          nativeProps.primary.disabled ||\n          internalState.current.atBound === 'max' ||\n          internalState.current.atBound === 'both',\n        'aria-label': 'Increment value',\n        type: 'button',\n      },\n      elementType: 'button',\n    }),\n    decrementButton: slot.always(decrementButton, {\n      defaultProps: {\n        tabIndex: -1,\n        disabled:\n          nativeProps.primary.readOnly ||\n          nativeProps.primary.disabled ||\n          internalState.current.atBound === 'min' ||\n          internalState.current.atBound === 'both',\n        'aria-label': 'Decrement value',\n        type: 'button',\n      },\n      elementType: 'button',\n    }),\n  };\n\n  state.input.value = valueToDisplay;\n  state.input.ref = useMergedRefs(inputRef, ref);\n  state.input['aria-valuemin'] = min;\n  state.input['aria-valuemax'] = max;\n  state.input['aria-valuenow'] = internalState.current.value ?? undefined;\n  state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n  state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);\n  state.input.onInput = mergeCallbacks(state.input.onInput, handleInputChange);\n  state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);\n  state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);\n  state.input.onKeyUp = mergeCallbacks(state.input.onKeyUp, handleKeyUp);\n\n  state.incrementButton.onMouseDown = mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);\n  state.incrementButton.onMouseUp = mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.incrementButton.onMouseLeave = mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  state.decrementButton.onMouseDown = mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);\n  state.decrementButton.onMouseUp = mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.decrementButton.onMouseLeave = mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  return state;\n};\n\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  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const overrides = useOverrides();\n\n  const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;\n\n  const state = useSpinButtonBase_unstable(baseProps, ref);\n\n  state.incrementButton.children ??= <ChevronUp16Regular />;\n  state.decrementButton.children ??= <ChevronDown16Regular />;\n\n  return { ...state, appearance, size };\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","mergeCallbacks","useControllableState","useTimeout","slot","useMergedRefs","ArrowUp","ArrowDown","End","Enter","Escape","Home","PageDown","PageUp","calculatePrecision","precisionRound","getBound","clamp","ChevronUp16Regular","ChevronDown16Regular","useOverrides_unstable","useOverrides","DEFAULT_SPIN_DELAY_MS","MIN_SPIN_DELAY_MS","MAX_SPIN_TIME_MS","lerp","start","end","percent","useSpinButtonBase_unstable","props","ref","nativeProps","primarySlotTagName","excludedPropNames","value","displayValue","defaultValue","min","max","step","stepPage","precision","precisionFromProps","onChange","root","input","incrementButton","decrementButton","useMemo","Math","currentValue","setCurrentValue","state","defaultState","initialState","inputRef","useRef","isControlled","undefined","textValue","setTextValue","useState","keyboardSpinState","setKeyboardSpinState","internalState","spinState","spinTime","spinDelay","atBound","setStepTimeout","clearStepTimeout","stepValue","e","direction","startFrom","startValue","current","num","parseFloat","isNaN","val","dir","stepSize","stepStart","nullStep","commit","newValue","Number","handleInputChange","previousTextValue","String","target","ariaValueNow","handleIncrementMouseDown","handleDecrementMouseDown","handleStepMouseUpOrLeave","handleBlur","handleKeyDown","nextKeyboardSpinState","currentTarget","readOnly","key","preventDefault","shiftKey","handleKeyUp","newDisplayValue","valueChanged","displayValueChanged","roundedValue","nextValue","valueToDisplay","components","always","defaultProps","elementType","autoComplete","role","type","primary","tabIndex","disabled","onInput","onBlur","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","useSpinButton_unstable","supportsLabelFor","supportsRequired","overrides","appearance","inputDefaultAppearance","size","baseProps","children"],"mappings":"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"}
+{"version":3,"sources":["../src/components/SpinButton/useSpinButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useControllableState,\n  useTimeout,\n  slot,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { ArrowUp, ArrowDown, End, Enter, Escape, Home, PageDown, PageUp } from '@fluentui/keyboard-keys';\nimport type {\n  SpinButtonBaseProps,\n  SpinButtonBaseState,\n  SpinButtonProps,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonChangeEvent,\n  SpinButtonBounds,\n} from './SpinButton.types';\nimport { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\ntype InternalState = {\n  value: number | null;\n  spinState: SpinButtonSpinState;\n  spinTime: number;\n  spinDelay: number;\n  previousTextValue?: string;\n  atBound: SpinButtonBounds;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease for the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the base state required to render SpinButton without design-specific props.\n *\n * @param props - props from this instance of SpinButton (without appearance/size)\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButtonBase_unstable = (\n  props: SpinButtonBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): SpinButtonBaseState => {\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', '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    root,\n    input,\n    incrementButton,\n    decrementButton,\n  } = props;\n\n  const precision = React.useMemo(() => {\n    return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n  }, [precisionFromProps, step]);\n\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: value,\n    defaultState: defaultValue,\n    initialState: 0,\n  });\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const isControlled = value !== undefined;\n\n  const [textValue, setTextValue] = React.useState<string | undefined>(undefined);\n  const [keyboardSpinState, setKeyboardSpinState] = React.useState<SpinButtonSpinState>('rest');\n\n  const internalState = React.useRef<InternalState>({\n    value: currentValue,\n    spinState: 'rest',\n    spinTime: 0,\n    spinDelay: DEFAULT_SPIN_DELAY_MS,\n    atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none',\n  });\n\n  const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n  const stepValue = (\n    e: SpinButtonChangeEvent,\n    direction: 'up' | 'down' | 'upPage' | 'downPage',\n    startFrom?: string,\n  ) => {\n    let startValue = internalState.current.value;\n    if (startFrom) {\n      const num = parseFloat(startFrom);\n      if (!isNaN(num)) {\n        startValue = num;\n      }\n    }\n    const val = startValue;\n    const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n    const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n    if (val === null) {\n      const stepStart = min === undefined ? 0 : min;\n      const nullStep = clamp(stepStart + stepSize * dir, min, max);\n      commit(e, nullStep);\n      return;\n    }\n\n    let newValue = val + stepSize * dir;\n    if (!Number.isNaN(newValue)) {\n      newValue = clamp(newValue, min, max);\n    }\n\n    commit(e, newValue);\n\n    if (internalState.current.spinState !== 'rest') {\n      setStepTimeout(() => {\n        // Ease the step speed a bit\n        internalState.current.spinTime += internalState.current.spinDelay;\n        internalState.current.spinDelay = lerp(\n          DEFAULT_SPIN_DELAY_MS,\n          MIN_SPIN_DELAY_MS,\n          internalState.current.spinTime / MAX_SPIN_TIME_MS,\n        );\n        stepValue(e, direction);\n      }, internalState.current.spinDelay);\n    }\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!internalState.current.previousTextValue) {\n      internalState.current.previousTextValue = textValue ?? String(currentValue);\n    }\n    const newValue = e.target.value;\n    setTextValue(newValue);\n    if (inputRef.current) {\n      // we need to set this here using the IDL attribute directly, because otherwise the timing of the ARIA value update\n      // is not in sync with the user-entered native input value, and some screen readers end up reading the wrong value.\n      inputRef.current.ariaValueNow = newValue;\n    }\n  };\n\n  const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.spinState = 'up';\n    stepValue(e, 'up');\n  };\n\n  const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.spinState = 'down';\n    stepValue(e, 'down');\n  };\n\n  const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    clearStepTimeout();\n    internalState.current.spinState = 'rest';\n    internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n    internalState.current.spinTime = 0;\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.previousTextValue = undefined;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    let nextKeyboardSpinState: SpinButtonSpinState = 'rest';\n\n    if (e.currentTarget.readOnly) {\n      return;\n    }\n\n    if (e.key === ArrowUp) {\n      stepValue(e, 'up', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === ArrowDown) {\n      stepValue(e, 'down', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (e.key === PageUp) {\n      e.preventDefault();\n      stepValue(e, 'upPage', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === PageDown) {\n      e.preventDefault();\n      stepValue(e, 'downPage', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === Home && min !== undefined) {\n      commit(e, min);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === End && max !== undefined) {\n      commit(e, max);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === Enter) {\n      commit(e, currentValue, textValue);\n      internalState.current.previousTextValue = undefined;\n    } else if (e.key === Escape) {\n      if (internalState.current.previousTextValue) {\n        setTextValue(undefined);\n        internalState.current.previousTextValue = undefined;\n      }\n    }\n\n    if (keyboardSpinState !== nextKeyboardSpinState) {\n      setKeyboardSpinState(nextKeyboardSpinState);\n    }\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (keyboardSpinState !== 'rest') {\n      setKeyboardSpinState('rest');\n      internalState.current.spinState = 'rest';\n    }\n  };\n\n  const commit = (e: SpinButtonChangeEvent, newValue?: number | null, newDisplayValue?: string) => {\n    const valueChanged = newValue !== undefined && currentValue !== newValue;\n    const displayValueChanged =\n      newDisplayValue !== undefined &&\n      internalState.current.previousTextValue !== undefined &&\n      internalState.current.previousTextValue !== newDisplayValue;\n\n    let roundedValue;\n    if (valueChanged) {\n      roundedValue = precisionRound(newValue!, precision);\n      setCurrentValue(roundedValue);\n      internalState.current.value = roundedValue;\n    } else if (displayValueChanged && !isControlled) {\n      const nextValue = parseFloat(newDisplayValue as string);\n      if (!isNaN(nextValue)) {\n        setCurrentValue(precisionRound(nextValue, precision));\n        internalState.current.value = precisionRound(nextValue, precision);\n      }\n    }\n\n    if (valueChanged || displayValueChanged) {\n      onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n    }\n\n    setTextValue(undefined);\n  };\n\n  let valueToDisplay;\n  if (textValue !== undefined) {\n    valueToDisplay = textValue;\n  } else if (value === null || currentValue === null) {\n    valueToDisplay = displayValue ?? '';\n    // eslint-disable-next-line react-hooks/refs\n    internalState.current.value = null;\n    // eslint-disable-next-line react-hooks/refs\n    internalState.current.atBound = 'none';\n  } else {\n    const roundedValue = precisionRound(currentValue, precision);\n    // eslint-disable-next-line react-hooks/refs\n    internalState.current.value = roundedValue;\n    // eslint-disable-next-line react-hooks/refs\n    internalState.current.atBound = getBound(roundedValue, min, max);\n    if (isControlled) {\n      valueToDisplay = displayValue ?? String(roundedValue);\n    } else {\n      valueToDisplay = String(roundedValue);\n    }\n  }\n\n  const state: SpinButtonBaseState = {\n    spinState: keyboardSpinState,\n    // eslint-disable-next-line react-hooks/refs\n    atBound: internalState.current.atBound,\n\n    components: {\n      root: 'span',\n      input: 'input',\n      incrementButton: 'button',\n      decrementButton: 'button',\n    },\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        autoComplete: 'off',\n        role: 'spinbutton',\n        type: 'text',\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    incrementButton: slot.always(incrementButton, {\n      defaultProps: {\n        tabIndex: -1,\n        disabled:\n          nativeProps.primary.readOnly ||\n          nativeProps.primary.disabled ||\n          // eslint-disable-next-line react-hooks/refs\n          internalState.current.atBound === 'max' ||\n          // eslint-disable-next-line react-hooks/refs\n          internalState.current.atBound === 'both',\n        'aria-label': 'Increment value',\n        type: 'button',\n      },\n      elementType: 'button',\n    }),\n    decrementButton: slot.always(decrementButton, {\n      defaultProps: {\n        tabIndex: -1,\n        disabled:\n          nativeProps.primary.readOnly ||\n          nativeProps.primary.disabled ||\n          // eslint-disable-next-line react-hooks/refs\n          internalState.current.atBound === 'min' ||\n          // eslint-disable-next-line react-hooks/refs\n          internalState.current.atBound === 'both',\n        'aria-label': 'Decrement value',\n        type: 'button',\n      },\n      elementType: 'button',\n    }),\n  };\n\n  // eslint-disable-next-line react-hooks/refs\n  state.input.value = valueToDisplay;\n  // eslint-disable-next-line react-hooks/refs\n  state.input.ref = useMergedRefs(inputRef, ref);\n  // eslint-disable-next-line react-hooks/refs\n  state.input['aria-valuemin'] = min;\n  // eslint-disable-next-line react-hooks/refs\n  state.input['aria-valuemax'] = max;\n  // eslint-disable-next-line react-hooks/refs\n  state.input['aria-valuenow'] = internalState.current.value ?? undefined;\n  // eslint-disable-next-line react-hooks/refs\n  state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n  // eslint-disable-next-line react-hooks/refs\n  state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);\n  // eslint-disable-next-line react-hooks/refs\n  state.input.onInput = mergeCallbacks(state.input.onInput, handleInputChange);\n  // eslint-disable-next-line react-hooks/refs\n  state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);\n  // eslint-disable-next-line react-hooks/refs\n  state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);\n  // eslint-disable-next-line react-hooks/refs\n  state.input.onKeyUp = mergeCallbacks(state.input.onKeyUp, handleKeyUp);\n\n  // eslint-disable-next-line react-hooks/refs\n  state.incrementButton.onMouseDown = mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);\n  // eslint-disable-next-line react-hooks/refs\n  state.incrementButton.onMouseUp = mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  // eslint-disable-next-line react-hooks/refs\n  state.incrementButton.onMouseLeave = mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  // eslint-disable-next-line react-hooks/refs\n  state.decrementButton.onMouseDown = mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);\n  // eslint-disable-next-line react-hooks/refs\n  state.decrementButton.onMouseUp = mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  // eslint-disable-next-line react-hooks/refs\n  state.decrementButton.onMouseLeave = mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  // eslint-disable-next-line react-hooks/refs\n  return state;\n};\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  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const overrides = useOverrides();\n\n  const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;\n\n  const state = useSpinButtonBase_unstable(baseProps, ref);\n\n  state.incrementButton.children ??= <ChevronUp16Regular />;\n  state.decrementButton.children ??= <ChevronDown16Regular />;\n\n  return { ...state, appearance, size };\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","mergeCallbacks","useControllableState","useTimeout","slot","useMergedRefs","ArrowUp","ArrowDown","End","Enter","Escape","Home","PageDown","PageUp","calculatePrecision","precisionRound","getBound","clamp","ChevronUp16Regular","ChevronDown16Regular","useOverrides_unstable","useOverrides","DEFAULT_SPIN_DELAY_MS","MIN_SPIN_DELAY_MS","MAX_SPIN_TIME_MS","lerp","start","end","percent","useSpinButtonBase_unstable","props","ref","nativeProps","primarySlotTagName","excludedPropNames","value","displayValue","defaultValue","min","max","step","stepPage","precision","precisionFromProps","onChange","root","input","incrementButton","decrementButton","useMemo","Math","currentValue","setCurrentValue","state","defaultState","initialState","inputRef","useRef","isControlled","undefined","textValue","setTextValue","useState","keyboardSpinState","setKeyboardSpinState","internalState","spinState","spinTime","spinDelay","atBound","setStepTimeout","clearStepTimeout","stepValue","e","direction","startFrom","startValue","current","num","parseFloat","isNaN","val","dir","stepSize","stepStart","nullStep","commit","newValue","Number","handleInputChange","previousTextValue","String","target","ariaValueNow","handleIncrementMouseDown","handleDecrementMouseDown","handleStepMouseUpOrLeave","handleBlur","handleKeyDown","nextKeyboardSpinState","currentTarget","readOnly","key","preventDefault","shiftKey","handleKeyUp","newDisplayValue","valueChanged","displayValueChanged","roundedValue","nextValue","valueToDisplay","components","always","defaultProps","elementType","autoComplete","role","type","primary","tabIndex","disabled","onInput","onBlur","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","useSpinButton_unstable","supportsLabelFor","supportsRequired","overrides","appearance","inputDefaultAppearance","size","baseProps","children"],"mappings":"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"}

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

@@ -228,9 +228,13 @@ export const useSpinButtonStyles_unstable = state => {
   const rootStyles = useRootStyles();
   const buttonStyles = useButtonStyles();
   const inputStyles = useInputStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(spinButtonClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.incrementButton.className = mergeClasses(spinButtonClassNames.incrementButton, spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, state.incrementButton.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.decrementButton.className = mergeClasses(spinButtonClassNames.decrementButton, spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, state.decrementButton.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.input.className = mergeClasses(spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);
   return state;
 };

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

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

package/lib/components/SpinButton/useSpinButtonStyles.styles.raw.js

@@ -352,9 +352,13 @@ const useButtonStyles = makeStyles({
     const rootStyles = useRootStyles();
     const buttonStyles = useButtonStyles();
     const inputStyles = useInputStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(spinButtonClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.incrementButton.className = mergeClasses(spinButtonClassNames.incrementButton, spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, state.incrementButton.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.decrementButton.className = mergeClasses(spinButtonClassNames.decrementButton, spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, state.decrementButton.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = mergeClasses(spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);
     return state;
 };

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

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

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

@@ -108,7 +108,6 @@ const useSpinButtonBase_unstable = (props, ref)=>{
         if (inputRef.current) {
             // we need to set this here using the IDL attribute directly, because otherwise the timing of the ARIA value update
             // is not in sync with the user-entered native input value, and some screen readers end up reading the wrong value.
-            // eslint-disable-next-line react-compiler/react-compiler
             inputRef.current.ariaValueNow = newValue;
         }
     };
@@ -204,11 +203,15 @@ const useSpinButtonBase_unstable = (props, ref)=>{
         valueToDisplay = textValue;
     } else if (value === null || currentValue === null) {
         valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : '';
+        // eslint-disable-next-line react-hooks/refs
         internalState.current.value = null;
+        // eslint-disable-next-line react-hooks/refs
         internalState.current.atBound = 'none';
     } else {
         const roundedValue = (0, _index.precisionRound)(currentValue, precision);
+        // eslint-disable-next-line react-hooks/refs
         internalState.current.value = roundedValue;
+        // eslint-disable-next-line react-hooks/refs
         internalState.current.atBound = (0, _index.getBound)(roundedValue, min, max);
         if (isControlled) {
             valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);
@@ -218,6 +221,7 @@ const useSpinButtonBase_unstable = (props, ref)=>{
     }
     const state = {
         spinState: keyboardSpinState,
+        // eslint-disable-next-line react-hooks/refs
         atBound: internalState.current.atBound,
         components: {
             root: 'span',
@@ -241,7 +245,9 @@ const useSpinButtonBase_unstable = (props, ref)=>{
         incrementButton: _reactutilities.slot.always(incrementButton, {
             defaultProps: {
                 tabIndex: -1,
-                disabled: nativeProps.primary.readOnly || nativeProps.primary.disabled || internalState.current.atBound === 'max' || internalState.current.atBound === 'both',
+                disabled: nativeProps.primary.readOnly || nativeProps.primary.disabled || // eslint-disable-next-line react-hooks/refs
+                internalState.current.atBound === 'max' || // eslint-disable-next-line react-hooks/refs
+                internalState.current.atBound === 'both',
                 'aria-label': 'Increment value',
                 type: 'button'
             },
@@ -250,32 +256,52 @@ const useSpinButtonBase_unstable = (props, ref)=>{
         decrementButton: _reactutilities.slot.always(decrementButton, {
             defaultProps: {
                 tabIndex: -1,
-                disabled: nativeProps.primary.readOnly || nativeProps.primary.disabled || internalState.current.atBound === 'min' || internalState.current.atBound === 'both',
+                disabled: nativeProps.primary.readOnly || nativeProps.primary.disabled || // eslint-disable-next-line react-hooks/refs
+                internalState.current.atBound === 'min' || // eslint-disable-next-line react-hooks/refs
+                internalState.current.atBound === 'both',
                 'aria-label': 'Decrement value',
                 type: 'button'
             },
             elementType: 'button'
         })
     };
+    // eslint-disable-next-line react-hooks/refs
     state.input.value = valueToDisplay;
+    // eslint-disable-next-line react-hooks/refs
     state.input.ref = (0, _reactutilities.useMergedRefs)(inputRef, ref);
+    // eslint-disable-next-line react-hooks/refs
     state.input['aria-valuemin'] = min;
+    // eslint-disable-next-line react-hooks/refs
     state.input['aria-valuemax'] = max;
     var _internalState_current_value;
+    // eslint-disable-next-line react-hooks/refs
     state.input['aria-valuenow'] = (_internalState_current_value = internalState.current.value) !== null && _internalState_current_value !== void 0 ? _internalState_current_value : undefined;
     var _state_input_ariavaluetext;
+    // eslint-disable-next-line react-hooks/refs
     state.input['aria-valuetext'] = (_state_input_ariavaluetext = state.input['aria-valuetext']) !== null && _state_input_ariavaluetext !== void 0 ? _state_input_ariavaluetext : value !== undefined && displayValue || undefined;
+    // eslint-disable-next-line react-hooks/refs
     state.input.onChange = (0, _reactutilities.mergeCallbacks)(state.input.onChange, handleInputChange);
+    // eslint-disable-next-line react-hooks/refs
     state.input.onInput = (0, _reactutilities.mergeCallbacks)(state.input.onInput, handleInputChange);
+    // eslint-disable-next-line react-hooks/refs
     state.input.onBlur = (0, _reactutilities.mergeCallbacks)(state.input.onBlur, handleBlur);
+    // eslint-disable-next-line react-hooks/refs
     state.input.onKeyDown = (0, _reactutilities.mergeCallbacks)(state.input.onKeyDown, handleKeyDown);
+    // eslint-disable-next-line react-hooks/refs
     state.input.onKeyUp = (0, _reactutilities.mergeCallbacks)(state.input.onKeyUp, handleKeyUp);
+    // eslint-disable-next-line react-hooks/refs
     state.incrementButton.onMouseDown = (0, _reactutilities.mergeCallbacks)(handleIncrementMouseDown, state.incrementButton.onMouseDown);
+    // eslint-disable-next-line react-hooks/refs
     state.incrementButton.onMouseUp = (0, _reactutilities.mergeCallbacks)(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);
+    // eslint-disable-next-line react-hooks/refs
     state.incrementButton.onMouseLeave = (0, _reactutilities.mergeCallbacks)(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);
+    // eslint-disable-next-line react-hooks/refs
     state.decrementButton.onMouseDown = (0, _reactutilities.mergeCallbacks)(handleDecrementMouseDown, state.decrementButton.onMouseDown);
+    // eslint-disable-next-line react-hooks/refs
     state.decrementButton.onMouseUp = (0, _reactutilities.mergeCallbacks)(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);
+    // eslint-disable-next-line react-hooks/refs
     state.decrementButton.onMouseLeave = (0, _reactutilities.mergeCallbacks)(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);
+    // eslint-disable-next-line react-hooks/refs
     return state;
 };
 const useSpinButton_unstable = (props, ref)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SpinButton/useSpinButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useControllableState,\n  useTimeout,\n  slot,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { ArrowUp, ArrowDown, End, Enter, Escape, Home, PageDown, PageUp } from '@fluentui/keyboard-keys';\nimport type {\n  SpinButtonBaseProps,\n  SpinButtonBaseState,\n  SpinButtonProps,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonChangeEvent,\n  SpinButtonBounds,\n} from './SpinButton.types';\nimport { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\ntype InternalState = {\n  value: number | null;\n  spinState: SpinButtonSpinState;\n  spinTime: number;\n  spinDelay: number;\n  previousTextValue?: string;\n  atBound: SpinButtonBounds;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease for the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the base state required to render SpinButton without design-specific props.\n *\n * @param props - props from this instance of SpinButton (without appearance/size)\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButtonBase_unstable = (\n  props: SpinButtonBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): SpinButtonBaseState => {\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', '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    root,\n    input,\n    incrementButton,\n    decrementButton,\n  } = props;\n\n  const precision = React.useMemo(() => {\n    return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n  }, [precisionFromProps, step]);\n\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: value,\n    defaultState: defaultValue,\n    initialState: 0,\n  });\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const isControlled = value !== undefined;\n\n  const [textValue, setTextValue] = React.useState<string | undefined>(undefined);\n  const [keyboardSpinState, setKeyboardSpinState] = React.useState<SpinButtonSpinState>('rest');\n\n  const internalState = React.useRef<InternalState>({\n    value: currentValue,\n    spinState: 'rest',\n    spinTime: 0,\n    spinDelay: DEFAULT_SPIN_DELAY_MS,\n    atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none',\n  });\n\n  const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n  const stepValue = (\n    e: SpinButtonChangeEvent,\n    direction: 'up' | 'down' | 'upPage' | 'downPage',\n    startFrom?: string,\n  ) => {\n    let startValue = internalState.current.value;\n    if (startFrom) {\n      const num = parseFloat(startFrom);\n      if (!isNaN(num)) {\n        startValue = num;\n      }\n    }\n    const val = startValue;\n    const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n    const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n    if (val === null) {\n      const stepStart = min === undefined ? 0 : min;\n      const nullStep = clamp(stepStart + stepSize * dir, min, max);\n      commit(e, nullStep);\n      return;\n    }\n\n    let newValue = val + stepSize * dir;\n    if (!Number.isNaN(newValue)) {\n      newValue = clamp(newValue, min, max);\n    }\n\n    commit(e, newValue);\n\n    if (internalState.current.spinState !== 'rest') {\n      setStepTimeout(() => {\n        // Ease the step speed a bit\n        internalState.current.spinTime += internalState.current.spinDelay;\n        internalState.current.spinDelay = lerp(\n          DEFAULT_SPIN_DELAY_MS,\n          MIN_SPIN_DELAY_MS,\n          internalState.current.spinTime / MAX_SPIN_TIME_MS,\n        );\n        stepValue(e, direction);\n      }, internalState.current.spinDelay);\n    }\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!internalState.current.previousTextValue) {\n      internalState.current.previousTextValue = textValue ?? String(currentValue);\n    }\n    const newValue = e.target.value;\n    setTextValue(newValue);\n    if (inputRef.current) {\n      // we need to set this here using the IDL attribute directly, because otherwise the timing of the ARIA value update\n      // is not in sync with the user-entered native input value, and some screen readers end up reading the wrong value.\n      // eslint-disable-next-line react-compiler/react-compiler\n      inputRef.current.ariaValueNow = newValue;\n    }\n  };\n\n  const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.spinState = 'up';\n    stepValue(e, 'up');\n  };\n\n  const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.spinState = 'down';\n    stepValue(e, 'down');\n  };\n\n  const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    clearStepTimeout();\n    internalState.current.spinState = 'rest';\n    internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n    internalState.current.spinTime = 0;\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.previousTextValue = undefined;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    let nextKeyboardSpinState: SpinButtonSpinState = 'rest';\n\n    if (e.currentTarget.readOnly) {\n      return;\n    }\n\n    if (e.key === ArrowUp) {\n      stepValue(e, 'up', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === ArrowDown) {\n      stepValue(e, 'down', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (e.key === PageUp) {\n      e.preventDefault();\n      stepValue(e, 'upPage', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === PageDown) {\n      e.preventDefault();\n      stepValue(e, 'downPage', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === Home && min !== undefined) {\n      commit(e, min);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === End && max !== undefined) {\n      commit(e, max);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === Enter) {\n      commit(e, currentValue, textValue);\n      internalState.current.previousTextValue = undefined;\n    } else if (e.key === Escape) {\n      if (internalState.current.previousTextValue) {\n        setTextValue(undefined);\n        internalState.current.previousTextValue = undefined;\n      }\n    }\n\n    if (keyboardSpinState !== nextKeyboardSpinState) {\n      setKeyboardSpinState(nextKeyboardSpinState);\n    }\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (keyboardSpinState !== 'rest') {\n      setKeyboardSpinState('rest');\n      internalState.current.spinState = 'rest';\n    }\n  };\n\n  const commit = (e: SpinButtonChangeEvent, newValue?: number | null, newDisplayValue?: string) => {\n    const valueChanged = newValue !== undefined && currentValue !== newValue;\n    const displayValueChanged =\n      newDisplayValue !== undefined &&\n      internalState.current.previousTextValue !== undefined &&\n      internalState.current.previousTextValue !== newDisplayValue;\n\n    let roundedValue;\n    if (valueChanged) {\n      roundedValue = precisionRound(newValue!, precision);\n      setCurrentValue(roundedValue);\n      internalState.current.value = roundedValue;\n    } else if (displayValueChanged && !isControlled) {\n      const nextValue = parseFloat(newDisplayValue as string);\n      if (!isNaN(nextValue)) {\n        setCurrentValue(precisionRound(nextValue, precision));\n        internalState.current.value = precisionRound(nextValue, precision);\n      }\n    }\n\n    if (valueChanged || displayValueChanged) {\n      onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n    }\n\n    setTextValue(undefined);\n  };\n\n  let valueToDisplay;\n  if (textValue !== undefined) {\n    valueToDisplay = textValue;\n  } else if (value === null || currentValue === null) {\n    valueToDisplay = displayValue ?? '';\n    internalState.current.value = null;\n    internalState.current.atBound = 'none';\n  } else {\n    const roundedValue = precisionRound(currentValue, precision);\n    internalState.current.value = roundedValue;\n    internalState.current.atBound = getBound(roundedValue, min, max);\n    if (isControlled) {\n      valueToDisplay = displayValue ?? String(roundedValue);\n    } else {\n      valueToDisplay = String(roundedValue);\n    }\n  }\n\n  const state: SpinButtonBaseState = {\n    spinState: keyboardSpinState,\n    atBound: internalState.current.atBound,\n\n    components: {\n      root: 'span',\n      input: 'input',\n      incrementButton: 'button',\n      decrementButton: 'button',\n    },\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        autoComplete: 'off',\n        role: 'spinbutton',\n        type: 'text',\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    incrementButton: slot.always(incrementButton, {\n      defaultProps: {\n        tabIndex: -1,\n        disabled:\n          nativeProps.primary.readOnly ||\n          nativeProps.primary.disabled ||\n          internalState.current.atBound === 'max' ||\n          internalState.current.atBound === 'both',\n        'aria-label': 'Increment value',\n        type: 'button',\n      },\n      elementType: 'button',\n    }),\n    decrementButton: slot.always(decrementButton, {\n      defaultProps: {\n        tabIndex: -1,\n        disabled:\n          nativeProps.primary.readOnly ||\n          nativeProps.primary.disabled ||\n          internalState.current.atBound === 'min' ||\n          internalState.current.atBound === 'both',\n        'aria-label': 'Decrement value',\n        type: 'button',\n      },\n      elementType: 'button',\n    }),\n  };\n\n  state.input.value = valueToDisplay;\n  state.input.ref = useMergedRefs(inputRef, ref);\n  state.input['aria-valuemin'] = min;\n  state.input['aria-valuemax'] = max;\n  state.input['aria-valuenow'] = internalState.current.value ?? undefined;\n  state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n  state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);\n  state.input.onInput = mergeCallbacks(state.input.onInput, handleInputChange);\n  state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);\n  state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);\n  state.input.onKeyUp = mergeCallbacks(state.input.onKeyUp, handleKeyUp);\n\n  state.incrementButton.onMouseDown = mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);\n  state.incrementButton.onMouseUp = mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.incrementButton.onMouseLeave = mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  state.decrementButton.onMouseDown = mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);\n  state.decrementButton.onMouseUp = mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.decrementButton.onMouseLeave = mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  return state;\n};\n\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  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const overrides = useOverrides();\n\n  const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;\n\n  const state = useSpinButtonBase_unstable(baseProps, ref);\n\n  state.incrementButton.children ??= <ChevronUp16Regular />;\n  state.decrementButton.children ??= <ChevronDown16Regular />;\n\n  return { ...state, appearance, size };\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","mergeCallbacks","useControllableState","useTimeout","slot","useMergedRefs","ArrowUp","ArrowDown","End","Enter","Escape","Home","PageDown","PageUp","calculatePrecision","precisionRound","getBound","clamp","ChevronUp16Regular","ChevronDown16Regular","useOverrides_unstable","useOverrides","DEFAULT_SPIN_DELAY_MS","MIN_SPIN_DELAY_MS","MAX_SPIN_TIME_MS","lerp","start","end","percent","useSpinButtonBase_unstable","props","ref","nativeProps","primarySlotTagName","excludedPropNames","value","displayValue","defaultValue","min","max","step","stepPage","precision","precisionFromProps","onChange","root","input","incrementButton","decrementButton","useMemo","Math","currentValue","setCurrentValue","state","defaultState","initialState","inputRef","useRef","isControlled","undefined","textValue","setTextValue","useState","keyboardSpinState","setKeyboardSpinState","internalState","spinState","spinTime","spinDelay","atBound","setStepTimeout","clearStepTimeout","stepValue","e","direction","startFrom","startValue","current","num","parseFloat","isNaN","val","dir","stepSize","stepStart","nullStep","commit","newValue","Number","handleInputChange","previousTextValue","String","target","ariaValueNow","handleIncrementMouseDown","handleDecrementMouseDown","handleStepMouseUpOrLeave","handleBlur","handleKeyDown","nextKeyboardSpinState","currentTarget","readOnly","key","preventDefault","shiftKey","handleKeyUp","newDisplayValue","valueChanged","displayValueChanged","roundedValue","nextValue","valueToDisplay","components","always","defaultProps","elementType","autoComplete","role","type","primary","tabIndex","disabled","onInput","onBlur","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","useSpinButton_unstable","supportsLabelFor","supportsRequired","overrides","appearance","inputDefaultAppearance","size","baseProps","children"],"mappings":"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"}
+{"version":3,"sources":["../src/components/SpinButton/useSpinButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useControllableState,\n  useTimeout,\n  slot,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { ArrowUp, ArrowDown, End, Enter, Escape, Home, PageDown, PageUp } from '@fluentui/keyboard-keys';\nimport type {\n  SpinButtonBaseProps,\n  SpinButtonBaseState,\n  SpinButtonProps,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonChangeEvent,\n  SpinButtonBounds,\n} from './SpinButton.types';\nimport { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\ntype InternalState = {\n  value: number | null;\n  spinState: SpinButtonSpinState;\n  spinTime: number;\n  spinDelay: number;\n  previousTextValue?: string;\n  atBound: SpinButtonBounds;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease for the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the base state required to render SpinButton without design-specific props.\n *\n * @param props - props from this instance of SpinButton (without appearance/size)\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButtonBase_unstable = (\n  props: SpinButtonBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): SpinButtonBaseState => {\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', '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    root,\n    input,\n    incrementButton,\n    decrementButton,\n  } = props;\n\n  const precision = React.useMemo(() => {\n    return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n  }, [precisionFromProps, step]);\n\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: value,\n    defaultState: defaultValue,\n    initialState: 0,\n  });\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const isControlled = value !== undefined;\n\n  const [textValue, setTextValue] = React.useState<string | undefined>(undefined);\n  const [keyboardSpinState, setKeyboardSpinState] = React.useState<SpinButtonSpinState>('rest');\n\n  const internalState = React.useRef<InternalState>({\n    value: currentValue,\n    spinState: 'rest',\n    spinTime: 0,\n    spinDelay: DEFAULT_SPIN_DELAY_MS,\n    atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none',\n  });\n\n  const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n  const stepValue = (\n    e: SpinButtonChangeEvent,\n    direction: 'up' | 'down' | 'upPage' | 'downPage',\n    startFrom?: string,\n  ) => {\n    let startValue = internalState.current.value;\n    if (startFrom) {\n      const num = parseFloat(startFrom);\n      if (!isNaN(num)) {\n        startValue = num;\n      }\n    }\n    const val = startValue;\n    const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n    const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n    if (val === null) {\n      const stepStart = min === undefined ? 0 : min;\n      const nullStep = clamp(stepStart + stepSize * dir, min, max);\n      commit(e, nullStep);\n      return;\n    }\n\n    let newValue = val + stepSize * dir;\n    if (!Number.isNaN(newValue)) {\n      newValue = clamp(newValue, min, max);\n    }\n\n    commit(e, newValue);\n\n    if (internalState.current.spinState !== 'rest') {\n      setStepTimeout(() => {\n        // Ease the step speed a bit\n        internalState.current.spinTime += internalState.current.spinDelay;\n        internalState.current.spinDelay = lerp(\n          DEFAULT_SPIN_DELAY_MS,\n          MIN_SPIN_DELAY_MS,\n          internalState.current.spinTime / MAX_SPIN_TIME_MS,\n        );\n        stepValue(e, direction);\n      }, internalState.current.spinDelay);\n    }\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!internalState.current.previousTextValue) {\n      internalState.current.previousTextValue = textValue ?? String(currentValue);\n    }\n    const newValue = e.target.value;\n    setTextValue(newValue);\n    if (inputRef.current) {\n      // we need to set this here using the IDL attribute directly, because otherwise the timing of the ARIA value update\n      // is not in sync with the user-entered native input value, and some screen readers end up reading the wrong value.\n      inputRef.current.ariaValueNow = newValue;\n    }\n  };\n\n  const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.spinState = 'up';\n    stepValue(e, 'up');\n  };\n\n  const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.spinState = 'down';\n    stepValue(e, 'down');\n  };\n\n  const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    clearStepTimeout();\n    internalState.current.spinState = 'rest';\n    internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n    internalState.current.spinTime = 0;\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.previousTextValue = undefined;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    let nextKeyboardSpinState: SpinButtonSpinState = 'rest';\n\n    if (e.currentTarget.readOnly) {\n      return;\n    }\n\n    if (e.key === ArrowUp) {\n      stepValue(e, 'up', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === ArrowDown) {\n      stepValue(e, 'down', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (e.key === PageUp) {\n      e.preventDefault();\n      stepValue(e, 'upPage', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === PageDown) {\n      e.preventDefault();\n      stepValue(e, 'downPage', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === Home && min !== undefined) {\n      commit(e, min);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === End && max !== undefined) {\n      commit(e, max);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === Enter) {\n      commit(e, currentValue, textValue);\n      internalState.current.previousTextValue = undefined;\n    } else if (e.key === Escape) {\n      if (internalState.current.previousTextValue) {\n        setTextValue(undefined);\n        internalState.current.previousTextValue = undefined;\n      }\n    }\n\n    if (keyboardSpinState !== nextKeyboardSpinState) {\n      setKeyboardSpinState(nextKeyboardSpinState);\n    }\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (keyboardSpinState !== 'rest') {\n      setKeyboardSpinState('rest');\n      internalState.current.spinState = 'rest';\n    }\n  };\n\n  const commit = (e: SpinButtonChangeEvent, newValue?: number | null, newDisplayValue?: string) => {\n    const valueChanged = newValue !== undefined && currentValue !== newValue;\n    const displayValueChanged =\n      newDisplayValue !== undefined &&\n      internalState.current.previousTextValue !== undefined &&\n      internalState.current.previousTextValue !== newDisplayValue;\n\n    let roundedValue;\n    if (valueChanged) {\n      roundedValue = precisionRound(newValue!, precision);\n      setCurrentValue(roundedValue);\n      internalState.current.value = roundedValue;\n    } else if (displayValueChanged && !isControlled) {\n      const nextValue = parseFloat(newDisplayValue as string);\n      if (!isNaN(nextValue)) {\n        setCurrentValue(precisionRound(nextValue, precision));\n        internalState.current.value = precisionRound(nextValue, precision);\n      }\n    }\n\n    if (valueChanged || displayValueChanged) {\n      onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n    }\n\n    setTextValue(undefined);\n  };\n\n  let valueToDisplay;\n  if (textValue !== undefined) {\n    valueToDisplay = textValue;\n  } else if (value === null || currentValue === null) {\n    valueToDisplay = displayValue ?? '';\n    // eslint-disable-next-line react-hooks/refs\n    internalState.current.value = null;\n    // eslint-disable-next-line react-hooks/refs\n    internalState.current.atBound = 'none';\n  } else {\n    const roundedValue = precisionRound(currentValue, precision);\n    // eslint-disable-next-line react-hooks/refs\n    internalState.current.value = roundedValue;\n    // eslint-disable-next-line react-hooks/refs\n    internalState.current.atBound = getBound(roundedValue, min, max);\n    if (isControlled) {\n      valueToDisplay = displayValue ?? String(roundedValue);\n    } else {\n      valueToDisplay = String(roundedValue);\n    }\n  }\n\n  const state: SpinButtonBaseState = {\n    spinState: keyboardSpinState,\n    // eslint-disable-next-line react-hooks/refs\n    atBound: internalState.current.atBound,\n\n    components: {\n      root: 'span',\n      input: 'input',\n      incrementButton: 'button',\n      decrementButton: 'button',\n    },\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        autoComplete: 'off',\n        role: 'spinbutton',\n        type: 'text',\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    incrementButton: slot.always(incrementButton, {\n      defaultProps: {\n        tabIndex: -1,\n        disabled:\n          nativeProps.primary.readOnly ||\n          nativeProps.primary.disabled ||\n          // eslint-disable-next-line react-hooks/refs\n          internalState.current.atBound === 'max' ||\n          // eslint-disable-next-line react-hooks/refs\n          internalState.current.atBound === 'both',\n        'aria-label': 'Increment value',\n        type: 'button',\n      },\n      elementType: 'button',\n    }),\n    decrementButton: slot.always(decrementButton, {\n      defaultProps: {\n        tabIndex: -1,\n        disabled:\n          nativeProps.primary.readOnly ||\n          nativeProps.primary.disabled ||\n          // eslint-disable-next-line react-hooks/refs\n          internalState.current.atBound === 'min' ||\n          // eslint-disable-next-line react-hooks/refs\n          internalState.current.atBound === 'both',\n        'aria-label': 'Decrement value',\n        type: 'button',\n      },\n      elementType: 'button',\n    }),\n  };\n\n  // eslint-disable-next-line react-hooks/refs\n  state.input.value = valueToDisplay;\n  // eslint-disable-next-line react-hooks/refs\n  state.input.ref = useMergedRefs(inputRef, ref);\n  // eslint-disable-next-line react-hooks/refs\n  state.input['aria-valuemin'] = min;\n  // eslint-disable-next-line react-hooks/refs\n  state.input['aria-valuemax'] = max;\n  // eslint-disable-next-line react-hooks/refs\n  state.input['aria-valuenow'] = internalState.current.value ?? undefined;\n  // eslint-disable-next-line react-hooks/refs\n  state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n  // eslint-disable-next-line react-hooks/refs\n  state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);\n  // eslint-disable-next-line react-hooks/refs\n  state.input.onInput = mergeCallbacks(state.input.onInput, handleInputChange);\n  // eslint-disable-next-line react-hooks/refs\n  state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);\n  // eslint-disable-next-line react-hooks/refs\n  state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);\n  // eslint-disable-next-line react-hooks/refs\n  state.input.onKeyUp = mergeCallbacks(state.input.onKeyUp, handleKeyUp);\n\n  // eslint-disable-next-line react-hooks/refs\n  state.incrementButton.onMouseDown = mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);\n  // eslint-disable-next-line react-hooks/refs\n  state.incrementButton.onMouseUp = mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  // eslint-disable-next-line react-hooks/refs\n  state.incrementButton.onMouseLeave = mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  // eslint-disable-next-line react-hooks/refs\n  state.decrementButton.onMouseDown = mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);\n  // eslint-disable-next-line react-hooks/refs\n  state.decrementButton.onMouseUp = mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  // eslint-disable-next-line react-hooks/refs\n  state.decrementButton.onMouseLeave = mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  // eslint-disable-next-line react-hooks/refs\n  return state;\n};\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  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const overrides = useOverrides();\n\n  const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;\n\n  const state = useSpinButtonBase_unstable(baseProps, ref);\n\n  state.incrementButton.children ??= <ChevronUp16Regular />;\n  state.decrementButton.children ??= <ChevronDown16Regular />;\n\n  return { ...state, appearance, size };\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","mergeCallbacks","useControllableState","useTimeout","slot","useMergedRefs","ArrowUp","ArrowDown","End","Enter","Escape","Home","PageDown","PageUp","calculatePrecision","precisionRound","getBound","clamp","ChevronUp16Regular","ChevronDown16Regular","useOverrides_unstable","useOverrides","DEFAULT_SPIN_DELAY_MS","MIN_SPIN_DELAY_MS","MAX_SPIN_TIME_MS","lerp","start","end","percent","useSpinButtonBase_unstable","props","ref","nativeProps","primarySlotTagName","excludedPropNames","value","displayValue","defaultValue","min","max","step","stepPage","precision","precisionFromProps","onChange","root","input","incrementButton","decrementButton","useMemo","Math","currentValue","setCurrentValue","state","defaultState","initialState","inputRef","useRef","isControlled","undefined","textValue","setTextValue","useState","keyboardSpinState","setKeyboardSpinState","internalState","spinState","spinTime","spinDelay","atBound","setStepTimeout","clearStepTimeout","stepValue","e","direction","startFrom","startValue","current","num","parseFloat","isNaN","val","dir","stepSize","stepStart","nullStep","commit","newValue","Number","handleInputChange","previousTextValue","String","target","ariaValueNow","handleIncrementMouseDown","handleDecrementMouseDown","handleStepMouseUpOrLeave","handleBlur","handleKeyDown","nextKeyboardSpinState","currentTarget","readOnly","key","preventDefault","shiftKey","handleKeyUp","newDisplayValue","valueChanged","displayValueChanged","roundedValue","nextValue","valueToDisplay","components","always","defaultProps","elementType","autoComplete","role","type","primary","tabIndex","disabled","onInput","onBlur","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","useSpinButton_unstable","supportsLabelFor","supportsRequired","overrides","appearance","inputDefaultAppearance","size","baseProps","children"],"mappings":"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"}

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

@@ -435,9 +435,13 @@ const useSpinButtonStyles_unstable = (state)=>{
     const rootStyles = useRootStyles();
     const buttonStyles = useButtonStyles();
     const inputStyles = useInputStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(spinButtonClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.incrementButton.className = (0, _react.mergeClasses)(spinButtonClassNames.incrementButton, spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, state.incrementButton.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.decrementButton.className = (0, _react.mergeClasses)(spinButtonClassNames.decrementButton, spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, state.decrementButton.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useSpinButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const spinButtonClassNames = {\n    root: 'fui-SpinButton',\n    input: 'fui-SpinButton__input',\n    incrementButton: 'fui-SpinButton__incrementButton',\n    decrementButton: 'fui-SpinButton__decrementButton'\n};\nconst spinButtonExtraClassNames = {\n    buttonActive: 'fui-SpinButton__button_active'\n};\nconst fieldHeights = {\n    small: '24px',\n    medium: '32px'\n};\nconst useRootClassName = makeResetStyles({\n    display: 'inline-grid',\n    gridTemplateColumns: `1fr 24px`,\n    gridTemplateRows: '1fr 1fr',\n    columnGap: tokens.spacingHorizontalXS,\n    rowGap: 0,\n    position: 'relative',\n    isolation: 'isolate',\n    verticalAlign: 'middle',\n    backgroundColor: tokens.colorNeutralBackground1,\n    minHeight: fieldHeights.medium,\n    padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n    borderRadius: tokens.borderRadiusMedium,\n    // Apply border styles on the ::before pseudo element.\n    // We cannot use ::after since that is used for selection.\n    // Using the pseudo element allows us to place the border\n    // above content in the component which ensures the buttons\n    // line up visually with the border as expected. Without this\n    // there is a bit of a gap which can become very noticeable\n    // at high zoom or when OS zoom levels are not divisible by 2\n    // (e.g., 150% on Windows in Firefox)\n    // This is most noticeable on the \"outline\" appearance which is\n    // also the default so it feels worth the extra ceremony to get right.\n    '::before': {\n        content: '\"\"',\n        boxSizing: 'border-box',\n        position: 'absolute',\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n        pointerEvents: 'none',\n        zIndex: 10,\n        border: `1px solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible,\n        borderRadius: tokens.borderRadiusMedium\n    },\n    '::after': {\n        boxSizing: 'border-box',\n        content: '\"\"',\n        position: 'absolute',\n        right: 0,\n        bottom: 0,\n        left: 0,\n        zIndex: 20,\n        // Maintaining the correct corner radius:\n        // Use the whole border-radius as the height and only put radii on the bottom corners.\n        // (Otherwise the radius would be automatically reduced to fit available space.)\n        // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n        height: `max(2px, ${tokens.borderRadiusMedium})`,\n        borderBottomLeftRadius: tokens.borderRadiusMedium,\n        borderBottomRightRadius: tokens.borderRadiusMedium,\n        // Flat 2px border:\n        // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n        // (This could be done without trimming using `background: linear-gradient(...)`, but using\n        // borderBottom makes it easier for people to override the color if needed.)\n        borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n        clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n        // Animation for focus OUT\n        transform: 'scaleX(0)',\n        transitionProperty: 'transform',\n        transitionDuration: tokens.durationUltraFast,\n        transitionDelay: tokens.curveAccelerateMid,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms',\n            transitionDelay: '0.01ms'\n        }\n    },\n    ':focus-within::after': {\n        // Animation for focus IN\n        transform: 'scaleX(1)',\n        transitionProperty: 'transform',\n        transitionDuration: tokens.durationNormal,\n        transitionDelay: tokens.curveDecelerateMid,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms',\n            transitionDelay: '0.01ms'\n        }\n    },\n    ':focus-within:active::after': {\n        // This is if the user clicks the field again while it's already focused\n        borderBottomColor: tokens.colorCompoundBrandStrokePressed\n    },\n    ':focus-within': {\n        outline: '2px solid transparent'\n    }\n});\nconst useRootStyles = makeStyles({\n    small: {\n        minHeight: fieldHeights.small,\n        ...typographyStyles.caption1,\n        paddingLeft: tokens.spacingHorizontalS\n    },\n    medium: {\n    },\n    outline: {\n    },\n    outlineInteractive: {\n        ':hover::before': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':active,:focus-within': {\n            '::before': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n                borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        }\n    },\n    underline: {\n        '::before': {\n            ...shorthands.borderWidth(0, 0, '1px', 0),\n            borderRadius: tokens.borderRadiusNone\n        }\n    },\n    underlineInteractive: {\n        ':hover::before': {\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':active,:focus-within': {\n            '::before': {\n                borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        },\n        '::after': {\n            borderRadius: tokens.borderRadiusNone\n        }\n    },\n    filled: {\n        '::before': {\n            border: `1px solid ${tokens.colorTransparentStroke}`\n        }\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1\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    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            '::before': {\n                ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n            }\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        '::before': {\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            '@media (forced-colors: active)': {\n                ...shorthands.borderColor('GrayText')\n            }\n        }\n    }\n});\nconst useInputClassName = makeResetStyles({\n    gridColumnStart: '1',\n    gridColumnEnd: '2',\n    gridRowStart: '1',\n    gridRowEnd: '3',\n    outlineStyle: 'none',\n    border: '0',\n    padding: '0',\n    color: tokens.colorNeutralForeground1,\n    // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n    backgroundColor: 'transparent',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    fontWeight: 'inherit',\n    lineHeight: 'inherit',\n    width: '100%',\n    '::placeholder': {\n        color: tokens.colorNeutralForeground4,\n        opacity: 1\n    }\n});\nconst useInputStyles = makeStyles({\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\nconst useBaseButtonClassName = makeResetStyles({\n    display: 'inline-flex',\n    width: '24px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    border: '0',\n    position: 'absolute',\n    outlineStyle: 'none',\n    height: '16px',\n    // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    // common button layout\n    gridColumnStart: '2',\n    borderRadius: '0',\n    padding: '0 5px 0 5px',\n    ':active': {\n        outlineStyle: 'none'\n    },\n    ':enabled': {\n        ':hover': {\n            cursor: 'pointer',\n            color: tokens.colorNeutralForeground3Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            color: tokens.colorNeutralForeground3Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        },\n        [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n            color: tokens.colorNeutralForeground3Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        }\n    },\n    ':disabled': {\n        cursor: 'not-allowed',\n        color: tokens.colorNeutralForegroundDisabled\n    }\n});\nconst useButtonStyles = makeStyles({\n    increment: {\n        gridRowStart: '1',\n        borderTopRightRadius: tokens.borderRadiusMedium,\n        paddingTop: '4px',\n        paddingBottom: '1px'\n    },\n    decrement: {\n        gridRowStart: '2',\n        borderBottomRightRadius: tokens.borderRadiusMedium,\n        paddingTop: '1px',\n        paddingBottom: '4px'\n    },\n    // Padding values numbers don't align with design specs\n    // but visually the padding aligns.\n    // The icons are set in a 16x16px square but the artwork is inset from that\n    // so these padding values are computed by hand.\n    // Additionally the design uses fractional values so these are\n    // rounded to the nearest integer.\n    incrementButtonSmall: {\n        padding: '3px 6px 0px 4px',\n        height: '12px'\n    },\n    decrementButtonSmall: {\n        padding: '0px 6px 3px 4px',\n        height: '12px'\n    },\n    outline: {\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        ':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        ':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 * Apply styling to the SpinButton slots based on the state\n */ export const useSpinButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const { appearance, spinState, size } = state;\n    const disabled = state.input.disabled;\n    const invalid = `${state.input['aria-invalid']}` === 'true';\n    const filled = appearance.startsWith('filled');\n    const rootStyles = useRootStyles();\n    const buttonStyles = useButtonStyles();\n    const inputStyles = useInputStyles();\n    state.root.className = mergeClasses(spinButtonClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);\n    state.incrementButton.className = mergeClasses(spinButtonClassNames.incrementButton, spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, state.incrementButton.className);\n    state.decrementButton.className = mergeClasses(spinButtonClassNames.decrementButton, spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, state.decrementButton.className);\n    state.input.className = mergeClasses(spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","spinButtonClassNames","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","fieldHeights","small","medium","useRootClassName","r","s","useRootStyles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","uwmqm3","outline","outlineInteractive","Bo3r8zu","Hpvxnh","Bx11ytk","B1rg0w0","Bsg1tlv","Brjw370","xcfy85","Bcc6kan","underline","B0qfbqy","B4f6apu","y0oebl","uvfttm","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","underlineInteractive","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","filled","Bcgcnre","Bqjgrrk","qa3bma","Biqmznv","Bm6vgfq","Bbv0w2i","eqrjj","Bk5zm6e","m598lv","ydt019","Bq4z7u6","Bdkvgpv","kj8mxx","De3pzq","filledInteractive","B05mzqr","tb9y6h","jcehpj","B23o0hn","invalid","emecyz","lz0pba","Bo1k74p","Ba322q7","disabled","Bceei9c","Bvljrlq","Cqojjj","G3zxag","H8270r","d","p","h","a","m","useInputClassName","useInputStyles","sj55zd","yvdlaj","useBaseButtonClassName","useButtonStyles","increment","Ijaq50","B7oj6ja","z8tnut","Byoj8tv","decrement","Bbmb7ep","incrementButtonSmall","z189sj","B0ocmuz","Bqenvij","decrementButtonSmall","r4wkhp","B95qlz1","p743kt","B7xitij","B6siaa6","Ba9qmo4","Dyrjrp","drw0cw","idzz8t","useSpinButtonStyles_unstable","state","appearance","spinState","size","startsWith","rootStyles","buttonStyles","inputStyles","className"],"mappings":"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"}
+{"version":3,"sources":["useSpinButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const spinButtonClassNames = {\n    root: 'fui-SpinButton',\n    input: 'fui-SpinButton__input',\n    incrementButton: 'fui-SpinButton__incrementButton',\n    decrementButton: 'fui-SpinButton__decrementButton'\n};\nconst spinButtonExtraClassNames = {\n    buttonActive: 'fui-SpinButton__button_active'\n};\nconst fieldHeights = {\n    small: '24px',\n    medium: '32px'\n};\nconst useRootClassName = makeResetStyles({\n    display: 'inline-grid',\n    gridTemplateColumns: `1fr 24px`,\n    gridTemplateRows: '1fr 1fr',\n    columnGap: tokens.spacingHorizontalXS,\n    rowGap: 0,\n    position: 'relative',\n    isolation: 'isolate',\n    verticalAlign: 'middle',\n    backgroundColor: tokens.colorNeutralBackground1,\n    minHeight: fieldHeights.medium,\n    padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n    borderRadius: tokens.borderRadiusMedium,\n    // Apply border styles on the ::before pseudo element.\n    // We cannot use ::after since that is used for selection.\n    // Using the pseudo element allows us to place the border\n    // above content in the component which ensures the buttons\n    // line up visually with the border as expected. Without this\n    // there is a bit of a gap which can become very noticeable\n    // at high zoom or when OS zoom levels are not divisible by 2\n    // (e.g., 150% on Windows in Firefox)\n    // This is most noticeable on the \"outline\" appearance which is\n    // also the default so it feels worth the extra ceremony to get right.\n    '::before': {\n        content: '\"\"',\n        boxSizing: 'border-box',\n        position: 'absolute',\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n        pointerEvents: 'none',\n        zIndex: 10,\n        border: `1px solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible,\n        borderRadius: tokens.borderRadiusMedium\n    },\n    '::after': {\n        boxSizing: 'border-box',\n        content: '\"\"',\n        position: 'absolute',\n        right: 0,\n        bottom: 0,\n        left: 0,\n        zIndex: 20,\n        // Maintaining the correct corner radius:\n        // Use the whole border-radius as the height and only put radii on the bottom corners.\n        // (Otherwise the radius would be automatically reduced to fit available space.)\n        // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n        height: `max(2px, ${tokens.borderRadiusMedium})`,\n        borderBottomLeftRadius: tokens.borderRadiusMedium,\n        borderBottomRightRadius: tokens.borderRadiusMedium,\n        // Flat 2px border:\n        // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n        // (This could be done without trimming using `background: linear-gradient(...)`, but using\n        // borderBottom makes it easier for people to override the color if needed.)\n        borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n        clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n        // Animation for focus OUT\n        transform: 'scaleX(0)',\n        transitionProperty: 'transform',\n        transitionDuration: tokens.durationUltraFast,\n        transitionDelay: tokens.curveAccelerateMid,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms',\n            transitionDelay: '0.01ms'\n        }\n    },\n    ':focus-within::after': {\n        // Animation for focus IN\n        transform: 'scaleX(1)',\n        transitionProperty: 'transform',\n        transitionDuration: tokens.durationNormal,\n        transitionDelay: tokens.curveDecelerateMid,\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms',\n            transitionDelay: '0.01ms'\n        }\n    },\n    ':focus-within:active::after': {\n        // This is if the user clicks the field again while it's already focused\n        borderBottomColor: tokens.colorCompoundBrandStrokePressed\n    },\n    ':focus-within': {\n        outline: '2px solid transparent'\n    }\n});\nconst useRootStyles = makeStyles({\n    small: {\n        minHeight: fieldHeights.small,\n        ...typographyStyles.caption1,\n        paddingLeft: tokens.spacingHorizontalS\n    },\n    medium: {\n    },\n    outline: {\n    },\n    outlineInteractive: {\n        ':hover::before': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':active,:focus-within': {\n            '::before': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n                borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        }\n    },\n    underline: {\n        '::before': {\n            ...shorthands.borderWidth(0, 0, '1px', 0),\n            borderRadius: tokens.borderRadiusNone\n        }\n    },\n    underlineInteractive: {\n        ':hover::before': {\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n        ':active,:focus-within': {\n            '::before': {\n                borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        },\n        '::after': {\n            borderRadius: tokens.borderRadiusNone\n        }\n    },\n    filled: {\n        '::before': {\n            border: `1px solid ${tokens.colorTransparentStroke}`\n        }\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1\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    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            '::before': {\n                ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n            }\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        '::before': {\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n            '@media (forced-colors: active)': {\n                ...shorthands.borderColor('GrayText')\n            }\n        }\n    }\n});\nconst useInputClassName = makeResetStyles({\n    gridColumnStart: '1',\n    gridColumnEnd: '2',\n    gridRowStart: '1',\n    gridRowEnd: '3',\n    outlineStyle: 'none',\n    border: '0',\n    padding: '0',\n    color: tokens.colorNeutralForeground1,\n    // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n    backgroundColor: 'transparent',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    fontWeight: 'inherit',\n    lineHeight: 'inherit',\n    width: '100%',\n    '::placeholder': {\n        color: tokens.colorNeutralForeground4,\n        opacity: 1\n    }\n});\nconst useInputStyles = makeStyles({\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\nconst useBaseButtonClassName = makeResetStyles({\n    display: 'inline-flex',\n    width: '24px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    border: '0',\n    position: 'absolute',\n    outlineStyle: 'none',\n    height: '16px',\n    // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    // common button layout\n    gridColumnStart: '2',\n    borderRadius: '0',\n    padding: '0 5px 0 5px',\n    ':active': {\n        outlineStyle: 'none'\n    },\n    ':enabled': {\n        ':hover': {\n            cursor: 'pointer',\n            color: tokens.colorNeutralForeground3Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            color: tokens.colorNeutralForeground3Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        },\n        [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n            color: tokens.colorNeutralForeground3Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        }\n    },\n    ':disabled': {\n        cursor: 'not-allowed',\n        color: tokens.colorNeutralForegroundDisabled\n    }\n});\nconst useButtonStyles = makeStyles({\n    increment: {\n        gridRowStart: '1',\n        borderTopRightRadius: tokens.borderRadiusMedium,\n        paddingTop: '4px',\n        paddingBottom: '1px'\n    },\n    decrement: {\n        gridRowStart: '2',\n        borderBottomRightRadius: tokens.borderRadiusMedium,\n        paddingTop: '1px',\n        paddingBottom: '4px'\n    },\n    // Padding values numbers don't align with design specs\n    // but visually the padding aligns.\n    // The icons are set in a 16x16px square but the artwork is inset from that\n    // so these padding values are computed by hand.\n    // Additionally the design uses fractional values so these are\n    // rounded to the nearest integer.\n    incrementButtonSmall: {\n        padding: '3px 6px 0px 4px',\n        height: '12px'\n    },\n    decrementButtonSmall: {\n        padding: '0px 6px 3px 4px',\n        height: '12px'\n    },\n    outline: {\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        ':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        ':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 * Apply styling to the SpinButton slots based on the state\n */ export const useSpinButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const { appearance, spinState, size } = state;\n    const disabled = state.input.disabled;\n    const invalid = `${state.input['aria-invalid']}` === 'true';\n    const filled = appearance.startsWith('filled');\n    const rootStyles = useRootStyles();\n    const buttonStyles = useButtonStyles();\n    const inputStyles = useInputStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(spinButtonClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.incrementButton.className = mergeClasses(spinButtonClassNames.incrementButton, spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, state.incrementButton.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.decrementButton.className = mergeClasses(spinButtonClassNames.decrementButton, spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, state.decrementButton.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","spinButtonClassNames","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","fieldHeights","small","medium","useRootClassName","r","s","useRootStyles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","uwmqm3","outline","outlineInteractive","Bo3r8zu","Hpvxnh","Bx11ytk","B1rg0w0","Bsg1tlv","Brjw370","xcfy85","Bcc6kan","underline","B0qfbqy","B4f6apu","y0oebl","uvfttm","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","underlineInteractive","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","filled","Bcgcnre","Bqjgrrk","qa3bma","Biqmznv","Bm6vgfq","Bbv0w2i","eqrjj","Bk5zm6e","m598lv","ydt019","Bq4z7u6","Bdkvgpv","kj8mxx","De3pzq","filledInteractive","B05mzqr","tb9y6h","jcehpj","B23o0hn","invalid","emecyz","lz0pba","Bo1k74p","Ba322q7","disabled","Bceei9c","Bvljrlq","Cqojjj","G3zxag","H8270r","d","p","h","a","m","useInputClassName","useInputStyles","sj55zd","yvdlaj","useBaseButtonClassName","useButtonStyles","increment","Ijaq50","B7oj6ja","z8tnut","Byoj8tv","decrement","Bbmb7ep","incrementButtonSmall","z189sj","B0ocmuz","Bqenvij","decrementButtonSmall","r4wkhp","B95qlz1","p743kt","B7xitij","B6siaa6","Ba9qmo4","Dyrjrp","drw0cw","idzz8t","useSpinButtonStyles_unstable","state","appearance","spinState","size","startsWith","rootStyles","buttonStyles","inputStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCM,oBAAoB;;;IAsVhB6G,4BAA4B;;;;uBAxVyB,gBAAgB;AAE/E,6BAA6B;IAChC5G,IAAI,EAAE,gBAAgB;IACtBC,KAAK,EAAE,uBAAuB;IAC9BC,eAAe,EAAE,iCAAiC;IAClDC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,yBAAyB,GAAG;IAC9BC,YAAY,EAAE;AAClB,CAAC;AACD,MAAMC,YAAY,GAAG;IACjBC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE;AACZ,CAAC;AACD,MAAMC,gBAAgB,GAAA,WAAA,OAAGhB,oBAAA,EAAA,YAAA,YAAA;IAAAiB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAsFxB,CAAC;AACF,MAAMC,aAAa,GAAA,WAAA,GAAGlB,mBAAA,EAAA;IAAAa,KAAA,EAAA;QAAAM,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAV,MAAA,EAAA,CAAA;IAAAW,OAAA,EAAA,CAAA;IAAAC,kBAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,SAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,oBAAA,EAAA;QAAAhB,OAAA,EAAA;QAAAI,MAAA,EAAA;QAAAa,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAhB,MAAA,EAAA;QAAAiB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAlB,MAAA,EAAA;QAAAmB,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAvB,OAAA,EAAA;QAAAwB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAA3B,OAAA,EAAA;QAAA4B,MAAA,EAAA;IAAA;IAAA,iBAAA;QAAAC,MAAA,EAAA;IAAA;IAAA,kBAAA;QAAAA,MAAA,EAAA;IAAA;IAAAC,iBAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAZ,MAAA,EAAA;QAAAH,OAAA,EAAA;QAAAH,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAN,OAAA,EAAA;QAAAG,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAsB,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAgFrB,CAAC;AACF,MAAMC,iBAAiB,GAAA,WAAA,GAAGxF,wBAAA,EAAA,YAAA,MAAA;IAAA;IAAA;IAAA;IAAA;CAoBzB,CAAC;AACF,MAAMyF,cAAc,GAAA,WAAA,OAAGxF,eAAA,EAAA;IAAA4E,QAAA,EAAA;QAAAa,MAAA,EAAA;QAAAZ,OAAA,EAAA;QAAAZ,MAAA,EAAA;QAAAyB,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAR,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAStB,CAAC;AACF,MAAMS,sBAAsB,GAAA,WAAA,OAAG5F,oBAAA,EAAA,YAAA,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAsC9B,CAAC;AACF,MAAM6F,eAAe,GAAA,WAAA,OAAG5F,eAAA,EAAA;IAAA6F,SAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,SAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAK,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAG,oBAAA,EAAA;QAAAH,OAAA,EAAA;QAAAzE,MAAA,EAAA;QAAA6E,MAAA,EAAA;QAAAL,MAAA,EAAA;QAAAM,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,oBAAA,EAAA;QAAAP,OAAA,EAAA;QAAAzE,MAAA,EAAA;QAAA6E,MAAA,EAAA;QAAAL,MAAA,EAAA;QAAAM,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAA9E,OAAA,EAAA,CAAA;IAAAU,SAAA,EAAA;QAAA8B,MAAA,EAAA;QAAAwB,MAAA,EAAA;QAAAgB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA,iBAAA;QAAA9C,MAAA,EAAA;QAAAwB,MAAA,EAAA;QAAAgB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA,kBAAA;QAAA9C,MAAA,EAAA;QAAAwB,MAAA,EAAA;QAAAgB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAM,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAF,MAAA,EAAA;IAAA;AAAA,GAAA;IAAA7B,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAwFvB,CAAC;AAGS,sCAAsCgC,KAAK,IAAG;IACrD,aAAa;IACb,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAAEC,IAAAA,EAAM,GAAGH,KAAK;IAC7C,MAAMvC,QAAQ,GAAGuC,KAAK,CAAC5G,KAAK,CAACqE,QAAQ;IACrC,MAAML,OAAO,GAAG,GAAG4C,KAAK,CAAC5G,KAAK,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM;IAC3D,MAAM4C,MAAM,GAAGiE,UAAU,CAACG,UAAU,CAAC,QAAQ,CAAC;IAC9C,MAAMC,UAAU,GAAGtG,aAAa,CAAC,CAAC;IAClC,MAAMuG,YAAY,GAAG7B,eAAe,CAAC,CAAC;IACtC,MAAM8B,WAAW,GAAGlC,cAAc,CAAC,CAAC;IACpC,oDAAA;IACA2B,KAAK,CAAC7G,IAAI,CAACqH,SAAS,OAAG1H,mBAAY,EAACI,oBAAoB,CAACC,IAAI,EAAES,gBAAgB,CAAC,CAAC,EAAEyG,UAAU,CAACF,IAAI,CAAC,EAAEE,UAAU,CAACJ,UAAU,CAAC,EAAEjE,MAAM,IAAIqE,UAAU,CAACrE,MAAM,EAAE,CAACyB,QAAQ,IAAIwC,UAAU,KAAK,SAAS,IAAII,UAAU,CAAC9F,kBAAkB,EAAE,CAACkD,QAAQ,IAAIwC,UAAU,KAAK,WAAW,IAAII,UAAU,CAAC3E,oBAAoB,EAAE,CAAC+B,QAAQ,IAAIzB,MAAM,IAAIqE,UAAU,CAACtD,iBAAiB,EAAE,CAACU,QAAQ,IAAIL,OAAO,IAAIiD,UAAU,CAACjD,OAAO,EAAEK,QAAQ,IAAI4C,UAAU,CAAC5C,QAAQ,EAAEuC,KAAK,CAAC7G,IAAI,CAACqH,SAAS,CAAC;IACrc,oDAAA;IACAR,KAAK,CAAC3G,eAAe,CAACmH,SAAS,OAAG1H,mBAAY,EAACI,oBAAoB,CAACG,eAAe,EAAE6G,SAAS,KAAK,IAAI,IAAI,GAAG3G,yBAAyB,CAACC,YAAY,EAAE,EAAEgF,sBAAsB,CAAC,CAAC,EAAE8B,YAAY,CAAC5B,SAAS,EAAE4B,YAAY,CAACL,UAAU,CAAC,EAAEE,IAAI,KAAK,OAAO,IAAIG,YAAY,CAACrB,oBAAoB,EAAEe,KAAK,CAAC3G,eAAe,CAACmH,SAAS,CAAC;IAC3T,oDAAA;IACAR,KAAK,CAAC1G,eAAe,CAACkH,SAAS,OAAG1H,mBAAY,EAACI,oBAAoB,CAACI,eAAe,EAAE4G,SAAS,KAAK,MAAM,IAAI,GAAG3G,yBAAyB,CAACC,YAAY,EAAE,EAAEgF,sBAAsB,CAAC,CAAC,EAAE8B,YAAY,CAACvB,SAAS,EAAEuB,YAAY,CAACL,UAAU,CAAC,EAAEE,IAAI,KAAK,OAAO,IAAIG,YAAY,CAACjB,oBAAoB,EAAEW,KAAK,CAAC1G,eAAe,CAACkH,SAAS,CAAC;IAC7T,oDAAA;IACAR,KAAK,CAAC5G,KAAK,CAACoH,SAAS,GAAG1H,uBAAY,EAACI,oBAAoB,CAACE,KAAK,EAAEgF,iBAAiB,CAAC,CAAC,EAAEX,QAAQ,IAAI8C,WAAW,CAAC9C,QAAQ,EAAEuC,KAAK,CAAC5G,KAAK,CAACoH,SAAS,CAAC;IAC9I,OAAOR,KAAK;AAChB,CAAC"}

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

@@ -365,9 +365,13 @@ const useSpinButtonStyles_unstable = (state)=>{
     const rootStyles = useRootStyles();
     const buttonStyles = useButtonStyles();
     const inputStyles = useInputStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(spinButtonClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.incrementButton.className = (0, _react.mergeClasses)(spinButtonClassNames.incrementButton, spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, state.incrementButton.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.decrementButton.className = (0, _react.mergeClasses)(spinButtonClassNames.decrementButton, spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, state.decrementButton.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);
     return state;
 };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinbutton",
-  "version": "9.6.2",
+  "version": "9.6.3",
   "description": "Fluent UI React SpinButton component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,12 +13,12 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-field": "^9.5.1",
+    "@fluentui/react-field": "^9.5.2",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.4.2",
+    "@fluentui/react-jsx-runtime": "^9.4.3",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-utilities": "^9.26.4",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },