agroptima-design-system 0.30.2-beta.0 → 0.30.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.30.2-beta.0",
+  "version": "0.30.3",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Multiselect.tsx

@@ -161,6 +161,7 @@ function OptionList({
     <div className="select-options">
       {isSearchable && (
         <Input
+          autoFocus
           label={searchLabel}
           hideLabel
           onChange={(e) => search(e.target.value)}

package/src/atoms/QuantitySelector.tsx

@@ -60,6 +60,7 @@ export function QuantitySelector({
           className="decrement-button"
           disabled={disabled}
           onClick={handleDecrement}
+          tabIndex={-1}
         />
         <Input
           id={id}
@@ -79,6 +80,7 @@ export function QuantitySelector({
           className="increment-button"
           disabled={disabled}
           onClick={handleIncrement}
+          tabIndex={-1}
         />
       </div>
     </div>

package/src/atoms/Select.tsx

@@ -164,6 +164,7 @@ function OptionList({
     <div className="select-options">
       {isSearchable && (
         <Input
+          autoFocus
           label={searchLabel}
           hideLabel
           onChange={(e) => search(e.target.value)}

package/src/stories/Changelog.mdx

@@ -4,13 +4,14 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
-## 0.30.2
+## 0.30.3
 
-* Use native increment and decrement buttons on QuantitySelector component.
+* Autofocus on search input in the Select and MultiSelect components.
+* Ignore keyboard tabbing for the `+` and `-` buttons in the QuantitySelector component.
 
-BREAKING CHANGES
+## 0.30.2
 
-* Remove onIncrement and onDecrement props from QuantitySelector component.
+* Update QuantitySelector decrement & increment logic management
 
 ## 0.30.1
 

package/src/stories/QuantitySelector.stories.ts

@@ -8,7 +8,9 @@ const meta = {
     docs: {
       description: {
         component:
-          '<h2>Usage guidelines</h2><p>Quantity Selector component is similar to text inputs, but is used to specify only a numeric value. Quantity Selector incrementally increase or decrease the value with a two-segment control.</p>',
+          '<h2>Usage guidelines</h2>' +
+          '<p>Quantity Selector component is similar to text inputs, but is used to specify only a numeric value. Quantity Selector incrementally increases or decreases the value with a two-segment control.</p>' +
+          '<p>When using keyboard controls, increment and decrement buttons are ignored so the user is taken to the quantity input.</p>',
       },
     },
   },

package/tests/QuantitySelector.spec.tsx

@@ -1,5 +1,4 @@
 import { render } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
 import { QuantitySelector } from '../src/atoms/QuantitySelector'
 
 describe('QuantitySelector', () => {
@@ -28,34 +27,4 @@ describe('QuantitySelector', () => {
     )
     expect(getByRole('spinbutton')).toHaveValue(1)
   })
-  it('add one step when press on increment button', async () => {
-    const user = userEvent.setup()
-    const { getByRole } = render(
-      <QuantitySelector
-        label="Quantity"
-        name="quantity"
-        defaultValue={5}
-        step={1}
-      />,
-    )
-
-    await user.click(getByRole('button', { name: '+' }))
-
-    expect(getByRole('spinbutton')).toHaveValue(6)
-  })
-  it('remove one step when press on increment button', async () => {
-    const user = userEvent.setup()
-    const { getByRole } = render(
-      <QuantitySelector
-        label="Quantity"
-        name="quantity"
-        defaultValue={5}
-        step={1}
-      />,
-    )
-
-    await user.click(getByRole('button', { name: '-' }))
-
-    expect(getByRole('spinbutton')).toHaveValue(4)
-  })
 })