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

package/CHANGELOG.json

@@ -2,7 +2,176 @@
   "name": "@fluentui/react-spinbutton",
   "entries": [
     {
-      "date": "Tue, 21 Jun 2022 17:09:28 GMT",
+      "date": "Thu, 14 Jul 2022 17:03:31 GMT",
+      "tag": "@fluentui/react-spinbutton_v9.0.0-beta.17",
+      "version": "9.0.0-beta.17",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "63ab03fa7a9b3d02204147ea5356b8f78751df42",
+            "comment": "chore: Update @fluentui/react-icons dependency to v2.0.175"
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "6e255e5e29c0fe7c01ae13152f39387d36f91dda",
+            "comment": "fix: decrease number of react renders"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-input to v9.0.2",
+            "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-utilities to v9.0.1-0",
+            "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
+            "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-label to v9.0.2",
+            "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
+          }
+        ],
+        "none": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "422636fffd66758c1a6dd617063582d902b61927",
+            "comment": "docs: Replacing https://aka.ms/fluentui-storybook with https://react.fluentui.dev/ to point to the official documentation site."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 28 Jun 2022 17:39:52 GMT",
+      "tag": "@fluentui/react-spinbutton_v9.0.0-beta.16",
+      "version": "9.0.0-beta.16",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
+            "comment": "fix: Use caret dependency range for Griffel"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-input to v9.0.1",
+            "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
+            "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-label to v9.0.1",
+            "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 28 Jun 2022 15:14:00 GMT",
+      "tag": "@fluentui/react-spinbutton_v9.0.0-beta.15",
+      "version": "9.0.0-beta.15",
+      "comments": {
+        "none": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "d85de0c3ee9d2f6f96d1b1ef6e15033648ce9963",
+            "comment": "docs: clean up stories"
+          },
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "51cf0a14d9a57107db0a4505b8b16260477b0e4a",
+            "comment": "chore: convert SpinButton to index based stories approach"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
+            "comment": "Update 9.0.0-rc dependencies to use caret range"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "82bd30dd41ad58df1f325e9b721200ed15d674a2",
+            "comment": "chore: Update @fluentui/react-icons to latest version"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "675acea49c97f10837ddee9b8c4350ca27750125",
+            "comment": "Bump Griffel dependencies"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "2b4a2ac925ebb2baf990bec2c149b03eb298b872",
+            "comment": "fix: Making increment and decrement buttons of SpinButton have 'type=button' instead of 'type=submit'."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-input to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-theme to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinbutton",
+            "comment": "Bump @fluentui/react-label to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 23 Jun 2022 14:25:31 GMT",
       "tag": "@fluentui/react-spinbutton_v9.0.0-beta.14",
       "version": "9.0.0-beta.14",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,56 @@
 # Change Log - @fluentui/react-spinbutton
 
-This log was last generated on Tue, 21 Jun 2022 17:09:28 GMT and should not be manually modified.
+This log was last generated on Thu, 14 Jul 2022 17:03:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.17)
+
+Thu, 14 Jul 2022 17:03:31 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 #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
+- Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
+- Bump @fluentui/react-label to v9.0.2 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) 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)
 
-Tue, 21 Jun 2022 17:09:28 GMT 
+Thu, 23 Jun 2022 14:25:31 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.13..@fluentui/react-spinbutton_v9.0.0-beta.14)
 
 ### Changes

package/README.md

@@ -1,10 +1,10 @@
 # @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 +21,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:
 

package/dist/index.d.ts

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

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

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

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

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

package/lib/components/SpinButton/useSpinButton.js

@@ -54,94 +54,30 @@ export const useSpinButton_unstable = (props, ref) => {
     defaultState: defaultValue,
     initialState: 0
   });
-  const [textValue, setTextValue] = React.useState(value !== undefined && displayValue !== undefined ? displayValue : String(currentValue));
-  const [spinState, setSpinState] = React.useState('rest');
-  const [atBound, setAtBound] = React.useState('none');
+  const isControlled = value !== undefined;
+  const [textValue, setTextValue] = React.useState(undefined);
+  const [keyboardSpinState, setKeyboardSpinState] = React.useState('rest');
   const internalState = React.useRef({
     value: currentValue,
-    spinState,
+    spinState: 'rest',
     spinTime: 0,
-    spinDelay: DEFAULT_SPIN_DELAY_MS
+    spinDelay: DEFAULT_SPIN_DELAY_MS,
+    atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none'
   });
-  const state = {
-    size,
-    appearance,
-    spinState,
-    atBound,
-    components: {
-      root: 'span',
-      input: 'input',
-      incrementButton: 'button',
-      decrementButton: 'button'
-    },
-    root: resolveShorthand(root, {
-      required: true,
-      defaultProps: nativeProps.root
-    }),
-    input: resolveShorthand(input, {
-      required: true,
-      defaultProps: {
-        ref,
-        autoComplete: 'off',
-        role: 'spinbutton',
-        appearance: appearance,
-        type: 'text',
-        ...nativeProps.primary
-      }
-    }),
-    incrementButton: resolveShorthand(incrementButton, {
-      required: true,
-      defaultProps: {
-        tabIndex: -1,
-        children: /*#__PURE__*/React.createElement(ChevronUp16Regular, null),
-        disabled: nativeProps.primary.disabled,
-        'aria-label': 'Increment value'
-      }
-    }),
-    decrementButton: resolveShorthand(decrementButton, {
-      required: true,
-      defaultProps: {
-        tabIndex: -1,
-        children: /*#__PURE__*/React.createElement(ChevronDown16Regular, null),
-        disabled: nativeProps.primary.disabled,
-        'aria-label': 'Decrement value'
-      }
-    })
-  };
   const [setStepTimeout, clearStepTimeout] = useTimeout();
-  React.useEffect(() => {
-    let newTextValue;
-
-    if (value === null || currentValue === null) {
-      newTextValue = displayValue !== null && displayValue !== void 0 ? displayValue : '';
-      internalState.current.value = null;
-      setAtBound('none');
-    } else if (value !== undefined) {
-      const roundedValue = precisionRound(value, precision);
-      newTextValue = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);
-      internalState.current.value = roundedValue;
-      setAtBound(getBound(roundedValue, min, max));
-    } else {
-      const roundedValue = precisionRound(currentValue, precision);
-      newTextValue = String(roundedValue);
-      internalState.current.value = roundedValue;
-      setAtBound(getBound(roundedValue, min, max));
-    }
 
-    setTextValue(newTextValue);
-  }, [value, displayValue, currentValue, precision, setAtBound, min, max]);
+  const stepValue = (e, direction, startFrom) => {
+    let startValue = internalState.current.value;
 
-  const handleInputChange = e => {
-    if (!internalState.current.previousTextValue) {
-      internalState.current.previousTextValue = textValue;
-    }
+    if (startFrom) {
+      const num = parseFloat(startFrom);
 
-    const newValue = e.target.value;
-    setTextValue(newValue);
-  };
+      if (!isNaN(num)) {
+        startValue = num;
+      }
+    }
 
-  const stepValue = (e, direction) => {
-    const val = internalState.current.value;
+    const val = startValue;
     const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;
     const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;
 
@@ -170,6 +106,15 @@ export const useSpinButton_unstable = (props, ref) => {
     }
   };
 
+  const handleInputChange = e => {
+    if (!internalState.current.previousTextValue) {
+      internalState.current.previousTextValue = textValue;
+    }
+
+    const newValue = e.target.value;
+    setTextValue(newValue);
+  };
+
   const handleIncrementMouseDown = e => {
     internalState.current.spinState = 'up';
     stepValue(e, 'up');
@@ -193,44 +138,48 @@ export const useSpinButton_unstable = (props, ref) => {
   };
 
   const handleKeyDown = e => {
+    let nextKeyboardSpinState = 'rest';
+
     if (e.key === Keys.ArrowUp) {
-      stepValue(e, 'up');
-      setSpinState('up');
+      stepValue(e, 'up', textValue);
+      nextKeyboardSpinState = 'up';
     } else if (e.key === Keys.ArrowDown) {
-      stepValue(e, 'down');
-      setSpinState('down');
+      stepValue(e, 'down', textValue);
+      nextKeyboardSpinState = 'down';
     } else if (e.key === Keys.PageUp) {
       e.preventDefault();
-      stepValue(e, 'upPage');
-      setSpinState('up');
+      stepValue(e, 'upPage', textValue);
+      nextKeyboardSpinState = 'up';
     } else if (e.key === Keys.PageDown) {
       e.preventDefault();
-      stepValue(e, 'downPage');
-      setSpinState('down');
+      stepValue(e, 'downPage', textValue);
+      nextKeyboardSpinState = 'down';
     } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {
       commit(e, min);
-      setSpinState('down');
+      nextKeyboardSpinState = 'down';
     } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {
       commit(e, max);
-      setSpinState('up');
+      nextKeyboardSpinState = 'up';
     } else if (e.key === Keys.Enter) {
       commit(e, currentValue, textValue);
       internalState.current.previousTextValue = undefined;
-      setSpinState('rest');
     } else if (e.key === Keys.Escape) {
       if (internalState.current.previousTextValue) {
-        setTextValue(internalState.current.previousTextValue);
+        setTextValue(undefined);
         internalState.current.previousTextValue = undefined;
       }
+    }
 
-      setSpinState('rest');
-    } else {
-      setSpinState('rest');
+    if (keyboardSpinState !== nextKeyboardSpinState) {
+      setKeyboardSpinState(nextKeyboardSpinState);
     }
   };
 
   const handleKeyUp = e => {
-    setSpinState('rest');
+    if (keyboardSpinState !== 'rest') {
+      setKeyboardSpinState('rest');
+      internalState.current.spinState = 'rest';
+    }
   };
 
   const commit = (e, newValue, newDisplayValue) => {
@@ -241,6 +190,12 @@ export const useSpinButton_unstable = (props, ref) => {
     if (valueChanged) {
       roundedValue = precisionRound(newValue, precision);
       setCurrentValue(roundedValue);
+    } else if (displayValueChanged && !isControlled) {
+      const nextValue = parseFloat(newDisplayValue);
+
+      if (!isNaN(nextValue)) {
+        setCurrentValue(precisionRound(nextValue, precision));
+      }
     }
 
     if (valueChanged || displayValueChanged) {
@@ -249,9 +204,78 @@ export const useSpinButton_unstable = (props, ref) => {
         displayValue: newDisplayValue
       });
     }
+
+    setTextValue(undefined);
   };
 
-  state.input.value = textValue;
+  const state = {
+    size,
+    appearance,
+    spinState: keyboardSpinState,
+    atBound: internalState.current.atBound,
+    components: {
+      root: 'span',
+      input: 'input',
+      incrementButton: 'button',
+      decrementButton: 'button'
+    },
+    root: resolveShorthand(root, {
+      required: true,
+      defaultProps: nativeProps.root
+    }),
+    input: resolveShorthand(input, {
+      required: true,
+      defaultProps: {
+        ref,
+        autoComplete: 'off',
+        role: 'spinbutton',
+        appearance: appearance,
+        type: 'text',
+        ...nativeProps.primary
+      }
+    }),
+    incrementButton: resolveShorthand(incrementButton, {
+      required: true,
+      defaultProps: {
+        tabIndex: -1,
+        children: /*#__PURE__*/React.createElement(ChevronUp16Regular, null),
+        disabled: nativeProps.primary.disabled,
+        'aria-label': 'Increment value',
+        type: 'button'
+      }
+    }),
+    decrementButton: resolveShorthand(decrementButton, {
+      required: true,
+      defaultProps: {
+        tabIndex: -1,
+        children: /*#__PURE__*/React.createElement(ChevronDown16Regular, null),
+        disabled: nativeProps.primary.disabled,
+        'aria-label': 'Decrement value',
+        type: 'button'
+      }
+    })
+  };
+  let valueToDisplay;
+
+  if (textValue !== undefined) {
+    valueToDisplay = textValue;
+  } else if (value === null || currentValue === null) {
+    valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : '';
+    internalState.current.value = null;
+    internalState.current.atBound = 'none';
+  } else {
+    const roundedValue = precisionRound(currentValue, precision);
+    internalState.current.value = roundedValue;
+    internalState.current.atBound = getBound(roundedValue, min, max);
+
+    if (isControlled) {
+      valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);
+    } else {
+      valueToDisplay = String(roundedValue);
+    }
+  }
+
+  state.input.value = valueToDisplay;
   state.input['aria-valuemin'] = min;
   state.input['aria-valuemax'] = max;
   state.input['aria-valuenow'] = currentValue !== null && currentValue !== void 0 ? currentValue : undefined;