agroptima-design-system 0.30.3 → 0.30.4-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.30.3",
+  "version": "0.30.4-beta.1",
   "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/Menu/MenuLink.tsx

@@ -1,19 +1,19 @@
 import './Menu.scss'
-import Link from 'next/link'
-import React from 'react'
+import Link, { type LinkProps } from 'next/link'
+import React, { type AnchorHTMLAttributes } from 'react'
 import { classNames } from '../../utils/classNames'
 import type { IconType } from '../Icon'
 import { Icon } from '../Icon'
 
 export type Variant = 'primary'
 
-export interface MenuLinkProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & LinkProps
+
+export interface MenuLinkProps extends AnchorProps {
   title: string
   variant?: Variant
   icon?: IconType
   isActive?: boolean
-  href: string
 }
 
 export function MenuLink({
@@ -22,7 +22,7 @@ export function MenuLink({
   className,
   icon,
   title,
-  href,
+  prefetch = false,
   ...props
 }: MenuLinkProps): React.JSX.Element {
   const cssClasses = classNames('menu-item', variant, className, {
@@ -31,7 +31,7 @@ export function MenuLink({
 
   return (
     <li tabIndex={0} role="menuitem">
-      <Link href={href} {...props} className={cssClasses}>
+      <Link {...props} prefetch={prefetch} className={cssClasses}>
         {icon && <Icon name={icon} size="3" />}
         <span className="title">{title}</span>
       </Link>

package/src/atoms/Multiselect.tsx

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

package/src/atoms/QuantitySelector.tsx

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

package/src/atoms/Select.tsx

@@ -164,7 +164,6 @@ 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,10 @@ 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.

package/src/stories/QuantitySelector.stories.ts

@@ -8,9 +8,7 @@ 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 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>',
+          '<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>',
       },
     },
   },