@foris/avocado-suite 1.16.0 → 1.17.0

package/dist/components/switch/Switch.d.ts

@@ -1,12 +1,12 @@
-import type { FC } from 'react';
-export interface SwitchProps {
+import type { AriaAttributes, FC, InputHTMLAttributes } from 'react';
+export interface SwitchProps extends AriaAttributes, Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name'> {
     /** Indicates if the switch is on */
     checked: boolean;
     /** overwrite className */
     className?: string;
     /** Disables the switch if true */
     disabled?: boolean;
-    /** Optional label displayed next to the switch */
+    /** Optional label displayed next to the switch; without it, name the switch with `aria-label` or `aria-labelledby` */
     label?: string;
     /** Callback fired when the switch state changes */
     onChange: (checked: boolean) => void;

package/dist/components/tabs/Tabs.d.ts

@@ -1,18 +1,36 @@
-import { FC, ReactNode } from 'react';
+import { FC, KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { IconTypes } from '../../../../avocado-icons';
 export interface TabItemProps {
-    children: ReactNode;
+    /** Panel content. Route tabs render no panel, so the page renders it */
+    children?: ReactNode;
+    /** Number shown after the label, as part of the tab's accessible name */
+    count?: number;
     disabled?: boolean;
+    /** Link target. When every item has one, the tabs render as a `nav` of links */
+    href?: string;
+    /** Decorative icon shown before the label */
+    icon?: IconTypes;
     label: ReactNode;
 }
+type TabClickEvent = MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>;
 export interface TabsProps {
-    /** Current index */
+    /** Accessible name of the tab list */
+    'aria-label'?: string;
+    /** Content at the end of the tab row, outside the tab list (e.g. a toolbar) */
+    actions?: ReactNode;
+    /** Current index. Route tabs always follow it when it is set */
     activeIndex?: number;
     /** Overwrite className */
     className?: string;
+    /** Base for the tab and panel ids. Defaults to a generated id */
+    id?: string;
     /** Configure tabs content */
     items: TabItemProps[];
-    /** Callback that will be triggered when one of the tabs is clicked. */
-    onClick?: (index: number) => void;
+    /**
+     * Called when a tab is activated, by click or by the arrow keys. Route tabs can call
+     * `event.preventDefault()` to navigate client-side.
+     */
+    onClick?: (index: number, event: TabClickEvent) => void;
     /**
      * Keeps the outgoing panel's height as the incoming panel's `min-height` on every switch,
      * so the page does not jump. The `min-height` only grows while `Tabs` stays mounted.

package/dist/components/tag/Tag.d.ts

@@ -5,8 +5,8 @@ declare const variants: {
     readonly Filled: "filled";
 };
 export type TagType = (typeof variants)[keyof typeof variants];
-export type TagSize = 'sm' | 'lg';
-export interface ITag {
+export type TagSize = 'md' | 'sm';
+export interface ITag extends Omit<React.AriaAttributes, 'aria-pressed'> {
     /** Content of the component tag */
     children?: ReactNode;
     /** Overwrite className */
@@ -17,8 +17,19 @@ export interface ITag {
     type?: TagType;
     /** Icon name */
     icon?: IconTypes;
-    /** Controls his active state */
+    /**
+     * Shows the active style only, with no toggle semantics.
+     * @deprecated Use `pressed`, which also sets `aria-pressed`.
+     */
     active?: boolean;
+    /** Toggle state: sets `aria-pressed` on the button and shows the active style when true */
+    pressed?: boolean;
+    /** Number shown after the label, read as part of the tag's name */
+    count?: number;
+    /** Tag size */
+    size?: TagSize;
+    /** Native title of the tag button */
+    title?: string;
     /** Action when clicking on the component */
     onClick?: () => void;
     /** Action when clicking on the icon of the component */

package/dist/components/text-field/TextField.d.ts

@@ -3,12 +3,20 @@ import type { IconTypes } from '../../../../avocado-icons';
 export interface TextFieldProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     /** If allow to remove input content with clear icon	 */
     allowClear?: boolean;
+    /** Accessible name of the clear button. Defaults to a localized "Clear" */
+    clearLabel?: string;
     /** Overwrite className */
     className?: string;
+    /** Supporting text shown under the input; it stays visible next to a status text */
+    helpText?: string;
     /** Set the icon */
     icon?: IconTypes;
+    /** Side of the input where the icon is placed */
+    iconPosition?: 'left' | 'right';
     /** Set top label */
     label?: string;
+    /** Show a "current / max" counter; unlike the native `maxLength`, it does not cut the text */
+    maxCount?: number;
     /** Set validation status	 */
     status?: 'error' | 'warning' | 'blocked' | 'unsaved';
     /** Set display for validation status	 */

package/dist/components/text-field/textField.locale.d.ts

@@ -0,0 +1,8 @@
+export declare const TEXT_FIELD_STRINGS: {
+    en: {
+        clear: string;
+    };
+    es: {
+        clear: string;
+    };
+};

package/dist/components/tooltip/Tooltip.d.ts

@@ -20,6 +20,8 @@ export interface TooltipProps {
     notShowArrow?: boolean;
     /** The placement of the popper relative to its reference */
     placement?: keyof typeof PlacementEnum;
+    /** `rich` wraps longer content on the surface color, for a help popover */
+    variant?: 'default' | 'rich';
     visible?: boolean;
 }
 declare const Tooltip: FC<TooltipProps>;