@frontify/fondue-components 19.1.0 → 19.3.0

package/dist/index.d.ts

@@ -1,16 +1,19 @@
 import { AriaAttributes } from 'react';
 import { ChangeEvent } from 'react';
+import { ChangeEventHandler } from 'react';
 import { CommonAriaAttrs } from '../../utilities/types';
 import { Context } from 'react';
 import { CSSProperties } from 'react';
 import { default as default_2 } from '@frontify/fondue-tokens/theme-tokens';
 import { FocusEvent as FocusEvent_2 } from 'react';
+import { FocusEventHandler } from 'react';
 import { FormEvent } from 'react';
 import { ForwardedRef } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributeAnchorTarget } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { KeyboardEvent as KeyboardEvent_2 } from 'react';
+import { KeyboardEventHandler } from 'react';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import { ReactElement } from 'react';
@@ -20,7 +23,7 @@ import { SyntheticEvent } from 'react';
 
 export declare const Accordion: {
     Root: {
-        ({ "data-test-id": dataTestId, border, children, defaultValue, disabled, value, }: AccordionRootProps): JSX_2.Element;
+        ({ "data-test-id": dataTestId, border, children, defaultValue, disabled, value, padding, }: AccordionRootProps): JSX_2.Element;
         displayName: string;
     };
     Item: {
@@ -28,17 +31,20 @@ export declare const Accordion: {
         displayName: string;
     };
     Header: {
-        ({ onClick, children }: AccordionHeaderProps): JSX_2.Element;
-        displayName: string;
-    };
-    Trigger: {
-        ({ "data-test-id": dataTestId, asChild, children, }: AccordionTriggerProps): JSX_2.Element;
+        ({ "data-test-id": dataTestId, asChild, onClick, children, }: AccordionHeaderProps): JSX_2.Element;
         displayName: string;
     };
+    /**
+     * @deprecated Use `Accordion.Header` instead.
+     */
+    Trigger: ({ children }: {
+        children: ReactNode;
+    }) => ReactNode;
     Content: {
         ({ "data-test-id": dataTestId, children, divider, onClick, padding, }: AccordionContentProps): JSX_2.Element;
         displayName: string;
     };
+    Slot: ForwardRefExoticComponent<AccordionSlotProps & RefAttributes<HTMLDivElement>>;
 };
 
 declare type AccordionContentProps = {
@@ -63,12 +69,18 @@ declare type AccordionContentProps = {
 };
 
 declare type AccordionHeaderProps = {
+    'data-test-id'?: string;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * @default false
+     */
+    asChild?: boolean;
     /**
      * Click callback for this item.
      */
     onClick?: MouseEventHandler<HTMLDivElement>;
     /**
-     * Children of the Accordion header. This should contain `Accordion.Trigger`
+     * Children of the Accordion header.
      */
     children?: ReactNode;
 };
@@ -117,23 +129,29 @@ declare type AccordionRootProps = {
      * The controlled stateful value of the accordion items whose contents are expanded.
      */
     value?: string[];
+    /**
+     * Controls if we show paddings around the header.
+     * @default 'large'
+     */
+    padding?: AccordionPadding;
 };
 
-declare type AccordionTriggerProps = {
+declare type AccordionSlotProps = {
+    children: ReactNode;
+    name?: 'action';
     'data-test-id'?: string;
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-    /**
-     * Children of the Accordion trigger. This contains the actually clickable and visible header content
-     */
-    children?: ReactNode;
 };
 
 declare type AriaLabelAttrs = Pick<AriaAttributes, 'aria-label'> & Pick<AriaAttributes, 'aria-labelledby'>;
 
+declare type AsyncItem = {
+    label: string;
+    value: string;
+    content?: ReactNode;
+};
+
+declare type AsyncItemsFetcher = (filterText: string) => Promise<AsyncItem[]>;
+
 declare type AtLeastOneAriaLabelAttr = AtLeastOneAttr<AriaLabelAttrs>;
 
 declare type AtLeastOneAttr<T> = Partial<T> & {
@@ -358,16 +376,6 @@ declare type CheckboxProps = {
     'aria-describedby'?: string;
 };
 
-declare type ClickableTableRowProps = BaseTableRowProps & {
-    /**
-     * Handler called when the row is clicked or activated via keyboard
-     * If provided, the row will be hoverable and interactive
-     */
-    onClick: (selected: boolean) => void;
-    onNavigate?: never;
-    href?: never;
-};
-
 declare type ColorFormat = 'HEX' | 'RGBA';
 
 export declare const ColorPicker: {
@@ -572,6 +580,7 @@ declare type DialogHeaderProps = {
      * @default true
      */
     showCloseButton?: boolean;
+    closeProps?: CommonAriaProps;
     children?: ReactNode;
     'data-test-id'?: string;
 };
@@ -788,6 +797,12 @@ declare type DropdownTriggerProps = {
 
 declare type DropdownViewportCollisionPadding = 'compact' | 'spacious';
 
+declare type ExtraAction = {
+    icon: ReactElement;
+    title: string;
+    callback: () => void;
+};
+
 export declare const Flex: ForwardRefExoticComponent<LayoutComponentProps & {
 /**
 * The element to render the Flex component as.
@@ -917,6 +932,7 @@ declare type FlyoutHeaderProps = {
     showCloseButton?: boolean;
     children?: ReactNode;
     'data-test-id'?: string;
+    closeProps?: CommonAriaProps;
 };
 
 declare type FlyoutRootProps = {
@@ -1003,6 +1019,10 @@ id?: string;
 * @default 'compact'
 */
 viewportCollisionPadding?: SelectMenuViewportCollisionPadding;
+/**
+* Function to fetch items asynchronously.
+*/
+getAsyncItems?: AsyncItemsFetcher;
 } & CommonAriaProps & RefAttributes<HTMLDivElement>>;
 
 declare const ForwardedRefSelectItem: ForwardRefExoticComponent<SelectItemProps & RefAttributes<HTMLLIElement>>;
@@ -1280,26 +1300,6 @@ declare type LoadingCircleProps = {
     'data-test-id'?: string;
 };
 
-declare type NavigableTableRowProps = BaseTableRowProps & {
-    onClick?: never;
-    /**
-     * Handler called when the row is clicked or activated via keyboard for navigation
-     * Must be provided together with href
-     */
-    onNavigate: (href: string) => void;
-    /**
-     * URL associated with this row for navigation
-     * Must be provided together with onNavigate
-     */
-    href: string;
-};
-
-declare type NonInteractiveTableRowProps = BaseTableRowProps & {
-    onClick?: never;
-    onNavigate?: never;
-    href?: never;
-};
-
 declare type OverflowValue = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto';
 
 declare type PositionValue = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
@@ -1607,6 +1607,8 @@ declare type SortDirection = 'ascending' | 'descending' | undefined;
 
 declare type SpacingValue = (string & {}) | (number & {}) | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64;
 
+declare type Status = 'default' | 'loading' | 'success' | 'error';
+
 export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLButtonElement>>;
 
 declare type SwitchProps = {
@@ -1663,7 +1665,13 @@ export declare const Table: {
     Header: ForwardRefExoticComponent<TableHeaderProps & RefAttributes<HTMLTableSectionElement>>;
     HeaderCell: ForwardRefExoticComponent<TableHeaderCellProps & RefAttributes<HTMLTableCellElement>>;
     Body: ForwardRefExoticComponent<TableBodyProps & RefAttributes<HTMLTableSectionElement>>;
-    Row: ForwardRefExoticComponent<TableRowProps & RefAttributes<HTMLTableRowElement>>;
+    Row: ForwardRefExoticComponent<BaseTableRowProps & {
+    /**
+    * Handler called when the row is clicked or activated via keyboard
+    * If provided, the row will be hoverable and interactive
+    */
+    onClick?: (selected: boolean) => void;
+    } & RefAttributes<HTMLTableRowElement>>;
     RowCell: ForwardRefExoticComponent<TableRowCellProps & RefAttributes<HTMLTableCellElement>>;
 };
 
@@ -1773,8 +1781,6 @@ declare type TableRowCellProps = {
     'aria-label'?: string;
 };
 
-declare type TableRowProps = ClickableTableRowProps | NavigableTableRowProps | NonInteractiveTableRowProps;
-
 export declare const Tabs: {
     Root: ForwardRefExoticComponent<TabsRootProps & RefAttributes<HTMLDivElement>>;
     Tab: ForwardRefExoticComponent<TabsTabProps & RefAttributes<HTMLDivElement>>;
@@ -1784,6 +1790,7 @@ export declare const Tabs: {
 
 declare type TabsContentProps = {
     children: ReactNode;
+    asChild?: boolean;
 };
 
 declare type TabsRootProps = {
@@ -1868,6 +1875,88 @@ declare const Text_2: (<TTag extends TagType_2 = "span">(props: TextProps<TTag>
 };
 export { Text_2 as Text }
 
+export declare const Textarea: ({ "data-test-id": dataTestId, autocomplete, autosize, clearable, decorator, defaultValue, disabled, extraActions, focusOnMount, minRows: rows, maxRows, onEnterPressed, readOnly, resizable, selectable, status, value: inputValue, ...props }: TextareaProps) => JSX_2.Element;
+
+declare type TextareaProps = {
+    'data-test-id'?: string;
+    /**
+     * If `true`, Textarea will have `autoComplete` functionality
+     */
+    autocomplete?: boolean;
+    /**
+     * If `true`, component rendered is a auto sizing Textarea
+     */
+    autosize?: boolean;
+    /**
+     * Render `clear` button to clear input on click
+     */
+    clearable?: boolean;
+    /**
+     * A `ReactElement` that will be rendered at the start of the `Textarea`
+     */
+    decorator?: ReactElement;
+    /**
+     * Initial value
+     */
+    defaultValue?: string;
+    disabled?: boolean;
+    /**
+     * Collection of extra actions the input can preform
+     */
+    extraActions?: ExtraAction[];
+    /**
+     * If `true`, Textarea will be focused on mount
+     */
+    focusOnMount?: boolean;
+    /**
+     * If autosize is false, this is used as rows property for default textarea
+     * @default 1
+     */
+    minRows?: number;
+    /**
+     * If `autosize` is `false`, this property is ignored
+     */
+    maxRows?: number;
+    /**
+     * Event handler called when the textarea value changes
+     */
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    /**
+     * Event handler called when the text input is blurred
+     */
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    /**
+     * Event handler called when the text input is focused
+     */
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    /**
+     * Event handler called when a key is pressed
+     */
+    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
+    /**
+     * Event handler called when Enter is pressed
+     */
+    onEnterPressed?: KeyboardEventHandler<HTMLTextAreaElement>;
+    /**
+     * Event handler called when a key is released
+     */
+    onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement>;
+    /**
+     * Event handler called when the text inside of text input is selected
+     */
+    onSelect?: (event: SyntheticEvent<HTMLTextAreaElement>) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+    resizable?: boolean;
+    selectable?: boolean;
+    /**
+     * The current status of the input. It will trigger the corresponding icon to be appended to the Textarea.
+     * @default 'default'
+     */
+    status?: Status;
+    value?: string;
+};
+
 declare type TextColor = 'default' | 'weak' | 'x-weak' | 'disabled' | 'negative' | 'positive' | 'warning' | 'interactive';
 
 declare type TextElementMap = {
@@ -1886,7 +1975,7 @@ declare type TextElementMap = {
 declare type TextElementType<TTag extends TagType_2> = TextElementMap[TTag];
 
 declare const TextFieldRoot: {
-    ({ children, className, status, "data-test-id": dataTestId, ...inputProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>): JSX_2.Element;
+    ({ children, className, status, "data-test-id": dataTestId, "aria-errormessage": ariaErrormessage, ...inputProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>): JSX_2.Element;
     displayName: string;
 };
 
@@ -1989,6 +2078,7 @@ declare type TextInputProps = {
     'aria-label'?: string;
     'aria-labelledby'?: string;
     'aria-describedby'?: string;
+    'aria-errormessage'?: string;
 };
 
 declare type TextProps<TTag extends TagType_2 = 'span'> = CommonAriaProps & TagProps<TTag> & {