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

package/package.json

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

package/src/atoms/Button/BaseButton.tsx

@@ -1,13 +1,14 @@
-import NextLink from 'next/link'
+import NextLink, { type LinkProps } from 'next/link'
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'
 
 interface CommonProps {
   disabled?: boolean
   visible?: boolean
 }
 
-type HtmlButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>
+type HtmlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>
 
-type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>
+type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & LinkProps
 
 export type BaseButtonProps =
   | (HtmlButtonProps & CommonProps)
@@ -24,8 +25,9 @@ export function BaseButton({
   if (!visible) return null
   const isLink = !props.disabled && hasHref(props)
   if (isLink) {
+    const { href, prefetch = false, ...restProps } = props
     return (
-      <NextLink href={props.href || ''} {...props}>
+      <NextLink href={href} {...restProps} prefetch={prefetch}>
         {children}
       </NextLink>
     )

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,6 +4,15 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.30.4
+
+* Add NextLink props to button link component.
+
+## 0.30.3
+
+* Autofocus on search input in the Select and MultiSelect components.
+* Ignore keyboard tabbing for the `+` and `-` buttons in the QuantitySelector component.
+
 ## 0.30.2
 
 * Update QuantitySelector decrement & increment logic management

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>',
       },
     },
   },