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

package/CHANGELOG.md

@@ -1,12 +1,173 @@
 # Change Log - @fluentui/react-spinbutton
 
-This log was last generated on Thu, 05 May 2022 18:24:37 GMT and should not be manually modified.
+This log was last generated on Thu, 15 Sep 2022 09:44:43 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.1)
+
+Thu, 15 Sep 2022 09:44:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0..@fluentui/react-spinbutton_v9.0.1)
+
+### Patches
+
+- chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
+- refactor: Replace useMergedEventCallbacks utility with mergeCallbacks ([PR #24152](https://github.com/microsoft/fluentui/pull/24152) by behowell@microsoft.com)
+- Bump @fluentui/react-input to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-label to v9.0.5 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+
+## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0)
+
+Wed, 03 Aug 2022 16:04:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.18..@fluentui/react-spinbutton_v9.0.0)
+
+### Minor changes
+
+- feat: update spinbutton to stable ([PR #23805](https://github.com/microsoft/fluentui/pull/23805) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-input to v9.0.4 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-label to v9.0.4 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+
+### Patches
+
+- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
+
+## [9.0.0-beta.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.18)
+
+Thu, 14 Jul 2022 21:21:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.17..@fluentui/react-spinbutton_v9.0.0-beta.18)
+
+### Changes
+
+- fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-input to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
+- Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
+- Bump @fluentui/react-label to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
+
+## [9.0.0-beta.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.17)
+
+Thu, 14 Jul 2022 17:06:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.16..@fluentui/react-spinbutton_v9.0.0-beta.17)
+
+### Changes
+
+- chore: Update @fluentui/react-icons dependency to v2.0.175 ([PR #23812](https://github.com/microsoft/fluentui/pull/23812) by ololubek@microsoft.com)
+- fix: decrease number of react renders ([PR #23714](https://github.com/microsoft/fluentui/pull/23714) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-input to v9.0.2 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
+- Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
+- Bump @fluentui/react-label to v9.0.2 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
+
+## [9.0.0-beta.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.16)
+
+Tue, 28 Jun 2022 17:39:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.15..@fluentui/react-spinbutton_v9.0.0-beta.16)
+
+### Changes
+
+- fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
+- Bump @fluentui/react-input to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
+- Bump @fluentui/react-label to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
+
+## [9.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.15)
+
+Tue, 28 Jun 2022 15:14:00 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.14..@fluentui/react-spinbutton_v9.0.0-beta.15)
+
+### Changes
+
+- Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
+- chore: Update @fluentui/react-icons to latest version ([PR #23459](https://github.com/microsoft/fluentui/pull/23459) by olfedias@microsoft.com)
+- Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
+- fix: Making increment and decrement buttons of SpinButton have 'type=button' instead of 'type=submit'. ([PR #23710](https://github.com/microsoft/fluentui/pull/23710) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/keyboard-keys to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-input to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-label to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+
+## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.14)
+
+Thu, 23 Jun 2022 14:25:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.13..@fluentui/react-spinbutton_v9.0.0-beta.14)
+
+### Changes
+
+- Bump @fluentui/react-input to v9.0.0-rc.6 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+- Bump @fluentui/react-label to v9.0.0-rc.6 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+
+## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.13)
+
+Tue, 31 May 2022 21:28:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.12..@fluentui/react-spinbutton_v9.0.0-beta.13)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
+- Bump @fluentui/react-input to v9.0.0-rc.5 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-label to v9.0.0-rc.5 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+
+## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.12)
+
+Thu, 26 May 2022 21:01:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.11..@fluentui/react-spinbutton_v9.0.0-beta.12)
+
+### Changes
+
+- Removing additional focus ring in native input for macOS safari. ([PR #23197](https://github.com/microsoft/fluentui/pull/23197) by esteban.230@hotmail.com)
+- Bump @fluentui/react-input to v9.0.0-rc.4 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
+- Bump @fluentui/react-label to v9.0.0-rc.4 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
+
+## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.11)
+
+Mon, 23 May 2022 18:56:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.10..@fluentui/react-spinbutton_v9.0.0-beta.11)
+
+### Changes
+
+- BREAKING: update string unions to use spinal-case ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-input to v9.0.0-rc.3 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-label to v9.0.0-rc.3 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+
+## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.10)
+
+Mon, 23 May 2022 12:13:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.9..@fluentui/react-spinbutton_v9.0.0-beta.10)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
+- react-spinbutton: update appearance stories ([PR #22980](https://github.com/microsoft/fluentui/pull/22980) by seanmonahan@microsoft.com)
+- appearance story updates ([PR #22995](https://github.com/microsoft/fluentui/pull/22995) by seanmonahan@microsoft.com)
+- widen `value` type to include `null` ([PR #23025](https://github.com/microsoft/fluentui/pull/23025) by seanmonahan@microsoft.com)
+- Updated react-label package version to RC. ([PR #22865](https://github.com/microsoft/fluentui/pull/22865) by esteban.230@hotmail.com)
+- feat: ship rolluped only dts ([PR #22828](https://github.com/microsoft/fluentui/pull/22828) by martinhochel@microsoft.com)
+- react-spinbutton: add aria-valuetext override ([PR #22905](https://github.com/microsoft/fluentui/pull/22905) by seanmonahan@microsoft.com)
+- chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
+- react-spinbutton: use spacing tokens ([PR #22950](https://github.com/microsoft/fluentui/pull/22950) by gcox@microsoft.com)
+- react-spinbutton: remove "strings" prop ([PR #22948](https://github.com/microsoft/fluentui/pull/22948) by seanmonahan@microsoft.com)
+- Update react-input dependency version to release candidate. ([PR #23090](https://github.com/microsoft/fluentui/pull/23090) by seanmonahan@microsoft.com)
+- update stepper clamping behavior ([PR #23004](https://github.com/microsoft/fluentui/pull/23004) by seanmonahan@microsoft.com)
+- react-spinbutton: remove SpinButtonCommons type ([PR #22871](https://github.com/microsoft/fluentui/pull/22871) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-input to v9.0.0-rc.2 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-label to v9.0.0-rc.2 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+
 ## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.9)
 
-Thu, 05 May 2022 18:24:37 GMT 
+Thu, 05 May 2022 18:26:30 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.8..@fluentui/react-spinbutton_v9.0.0-beta.9)
 
 ### Changes

package/README.md

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

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -21,22 +23,29 @@ export declare type SpinButtonChangeEvent = React_2.MouseEvent<HTMLButtonElement
 
 export declare const spinButtonClassNames: SlotClassNames<SpinButtonSlots>;
 
-export declare type SpinButtonCommons = {
+export declare type SpinButtonOnChangeData = {
+    value?: number | null;
+    displayValue?: string;
+};
+
+/**
+ * SpinButton Props
+ */
+export declare type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlots>, 'input'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & {
+    /**
+     * Controls the colors and borders of the input.
+     * @default 'outline'
+     */
+    appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
     /**
      * Initial value of the control (assumed to be valid). Updates to this prop will not be respected.
      *
      * Use this if you intend for the SpinButton to be an uncontrolled component which maintains its
      * own value. For a controlled component, use `value` instead. (Mutually exclusive with `value`.)
-     */
-    defaultValue: number;
-    /**
-     * Current value of the control (assumed to be valid).
      *
-     * Only provide this if the SpinButton is a controlled component where you are maintaining its
-     * current state and passing updates based on change events; otherwise, use the `defaultValue`
-     * property. (Mutually exclusive with `defaultValue`.)
+     * Use `null` to indicate the control has no value.
      */
-    value: number;
+    defaultValue?: number | null;
     /**
      * String representation of `value`.
      *
@@ -47,28 +56,15 @@ export declare type SpinButtonCommons = {
      * current state and passing updates based on change events. When SpinButton is used as an
      * uncontrolled component this prop is ignored.
      */
-    displayValue: string;
-    /**
-     * Min value of the control. If not provided, the control has no minimum value.
-     */
-    min: number;
+    displayValue?: string;
     /**
      * Max value of the control. If not provided, the control has no maximum value.
      */
-    max: number;
-    /**
-     * Difference between two adjacent values of the control.
-     * This value is used to calculate the precision of the input if no `precision` is given.
-     * The precision calculated this way will always be greater than or equal 0.
-     * @default 1
-     */
-    step: number;
+    max?: number;
     /**
-     * Large difference between two values. This should be greater than `step` and is used
-     * when users hit the Page Up or Page Down keys.
-     * @default 1
+     * Min value of the control. If not provided, the control has no minimum value.
      */
-    stepPage: number;
+    min?: number;
     /**
      * Callback for when the committed value changes.
      * - User presses the up/down buttons (on single press or every spin)
@@ -76,40 +72,46 @@ export declare type SpinButtonCommons = {
      * - User *commits* edits to the input text by focusing away (blurring) or pressing enter.
      *   Note that this is NOT called for every key press while the user is editing.
      */
-    onChange: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;
+    onChange?: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;
     /**
      * How many decimal places the value should be rounded to.
      *
      * The default is calculated based on the precision of `step`: i.e. if step = 1, precision = 0.
      * step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.
      */
-    precision: number;
-    /**
-     * Controls the colors and borders of the input.
-     * @default 'outline'
-     */
-    appearance: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
+    precision?: number;
     /**
      * Size of the input.
      * @default 'medium'
      */
-    size: 'small' | 'medium';
+    size?: 'small' | 'medium';
     /**
-     * Strings for localizing text in the control.
+     * Difference between two adjacent values of the control.
+     * This value is used to calculate the precision of the input if no `precision` is given.
+     * The precision calculated this way will always be greater than or equal 0.
+     * @default 1
      */
-    strings?: SpinButtonStrings;
-};
-
-export declare type SpinButtonOnChangeData = {
-    value?: number;
-    displayValue?: string;
+    step?: number;
+    /**
+     * Large difference between two values. This should be greater than `step` and is used
+     * when users hit the Page Up or Page Down keys.
+     * @default 1
+     */
+    stepPage?: number;
+    /**
+     * Current value of the control (assumed to be valid).
+     *
+     * Only provide this if the SpinButton is a controlled component where you are maintaining its
+     * current state and passing updates based on change events; otherwise, use the `defaultValue`
+     * property.
+     *
+     * Use `null` to indicate the control has no value.
+     *
+     * Mutually exclusive with `defaultValue`.
+     */
+    value?: number | null;
 };
 
-/**
- * SpinButton Props
- */
-export declare type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlots>, 'input'>, 'onChange' | 'size'> & Partial<SpinButtonCommons>;
-
 export declare type SpinButtonSlots = {
     /**
      * The root element of SpinButton is a container `<div>`.
@@ -139,7 +141,7 @@ export declare type SpinButtonSpinState = 'rest' | 'up' | 'down';
 /**
  * State used in rendering SpinButton
  */
-export declare type SpinButtonState = ComponentState<SpinButtonSlots> & Partial<SpinButtonCommons> & Pick<SpinButtonCommons, 'appearance' | 'size'> & {
+export declare type SpinButtonState = ComponentState<SpinButtonSlots> & Required<Pick<SpinButtonProps, 'appearance' | 'size'>> & {
     /**
      * State used to track which direction, if any, SpinButton is currently spinning.
      * @default 'rest'
@@ -152,19 +154,6 @@ export declare type SpinButtonState = ComponentState<SpinButtonSlots> & Partial<
     atBound: SpinButtonBounds;
 };
 
-export declare type SpinButtonStrings = {
-    /**
-     * Label applied to the increment button.
-     * Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
-     */
-    incrementButtonLabel: string;
-    /**
-     * Label applied to the decrement button.
-     * Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
-     */
-    decrementButtonLabel: string;
-};
-
 /**
  * Create the state required to render SpinButton.
  *

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

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

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

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

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

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