@protonradio/proton-ui 0.11.0-beta.2 → 0.11.0-beta.21

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { AriaButtonProps } from 'react-aria';
 import { AriaDialogProps } from 'react-aria';
 import { AriaPopoverProps } from 'react-aria';
 import { AriaTableProps } from 'react-aria';
@@ -9,14 +10,18 @@ import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { OverlayTriggerProps } from 'react-stately';
 import { OverlayTriggerState } from 'react-stately';
 import { PressEvent } from 'react-aria';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { RowProps } from '@react-stately/table';
 import { Section } from '@react-stately/table';
 import { Selection as Selection_2 } from 'react-stately';
-import { Selection as Selection_3 } from 'react-aria-components';
-import { TableBodyProps } from '@react-stately/table';
+import { TableBodyProps as TableBodyProps_2 } from '@react-stately/table';
+import { TableCellProps as TableCellProps_2 } from './Collection/CompoundComponents';
+import { TableColumnData as TableColumnData_2 } from '../Table';
+import { TableColumnProps as TableColumnProps_2 } from './Collection/CompoundComponents';
 import { TableHeader } from '@react-stately/table';
+import { TableRowProps as TableRowProps_2 } from './Collection/CompoundComponents';
 import { TableStateProps } from 'react-stately';
 import { TooltipProps as TooltipProps_2 } from 'react-aria-components';
 import { TooltipTriggerComponentProps } from 'react-aria-components';
@@ -26,11 +31,12 @@ import { TooltipTriggerComponentProps } from 'react-aria-components';
  * Renders a list of actions as a focusable menu, or non-focusable children.
  * @interface ActionMenuProps
  */
-export declare const ActionMenu: ({ isOpen, selectionMode, selectedKeys, defaultSelectedKeys, disabledKeys, children, showCancel, cancelButtonText, actions, onSelectionChange, onClose, "data-testid": testId, }: ActionMenuProps) => JSX_2.Element;
+export declare const ActionMenu: ({ isOpen, selectionMode, selectedKeys, defaultSelectedKeys, disabledKeys, children, showCancel, cancelButtonText, actions, title, onSelectionChange, onClose, "data-testid": testId, }: ActionMenuProps) => JSX_2.Element;
 
 declare interface ActionMenuAction {
     key: string;
     label?: ReactNode;
+    description?: ReactNode;
     to?: string;
     onAction?: (key: string) => void;
     children?: ActionMenuAction[];
@@ -47,8 +53,8 @@ declare interface ActionMenuProps {
     }) => ReactNode);
     showCancel?: boolean;
     cancelButtonText?: string;
+    title?: string;
     actions?: ActionMenuAction[];
-    id?: string;
     onClose?: () => void;
     onSelectionChange?: (keys: Selection_2) => void;
     "data-testid"?: string;
@@ -205,7 +211,7 @@ declare interface BaseInputProps {
  * A customizable button component that can render as either a button or anchor element
  * @interface ButtonProps
  */
-export declare function Button({ variant, size, fullWidth, icon, to, target, onPress, type, isDisabled, "data-testid": testId, children, __textShift, }: ButtonProps): JSX_2.Element;
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 export declare function ButtonGroup(props: ButtonGroupProps): JSX_2.Element;
 
@@ -245,7 +251,7 @@ declare interface ButtonGroupProps {
     children?: React.ReactNode;
 }
 
-declare interface ButtonProps {
+declare interface ButtonProps extends AriaButtonProps<"button"> {
     /** The button's visual aesthetic
      * @param {ButtonVariant} variant
      */
@@ -274,7 +280,7 @@ declare interface ButtonProps {
     /** The target attribute for the link. Defaults to `_blank` if the URL is external.
      * @param {string} target
      */
-    target?: "_blank" | "_self" | "_parent" | "_top";
+    target?: "_blank" | "_self" | "_parent" | "_top" | string;
     /** Called when the button is pressed (on release, not keydown)
      * @param {(e: PressEvent) => void} onPress
      */
@@ -291,10 +297,6 @@ declare interface ButtonProps {
      * @param {React.ReactNode} children
      */
     children?: React.ReactNode;
-    /** DO NOT USE. INTERNAL USE ONLY. Will be used in calculation for the shift of the button text. Represents the # of horizontal pixels to shift.
-     * @param {number} __textShift
-     */
-    __textShift?: number;
 }
 
 declare type ButtonSize = "small" | "medium" | "large" | "xlarge" | "2xlarge";
@@ -426,12 +428,14 @@ export declare const Input: default_2.ForwardRefExoticComponent<BaseInputProps &
 declare type MenuItemType = ActionMenuAction;
 
 declare interface MenuProps {
-    /** The id of the menu */
-    menuId?: string;
     /** Custom trigger component. If not provided, defaults to ellipsis icon */
-    renderTrigger?: (triggerProps: TriggerProps, isOpen: boolean) => ReactNode;
-    /** Size of the trigger icon */
+    renderTrigger?: (triggerProps: TriggerProps) => ReactNode;
+    /** Size of the trigger icon
+     * @default 24
+     */
     size?: number;
+    /** Title of the parent menu */
+    title?: string;
     /** Array of menu actions/items to display */
     items: MenuItemType[];
     /** Whether the menu is disabled */
@@ -439,18 +443,18 @@ declare interface MenuProps {
     /** Callback when menu closes */
     onClose?: () => void;
     /** Test ID for the trigger component */
-    testId?: string;
+    triggerTestId?: string;
     /** Test ID for the menu */
     menuTestId?: string;
     /** Callback when a menu item is selected */
-    onSelectionChange?: (keys: Selection_3) => void;
+    onSelectionChange?: (key: string) => void;
     /** The key of the selected item */
     selectedKey?: string;
     /** The keys of the disabled items */
     disabledKeys?: string[];
 }
 
-export declare function MenuTrigger({ renderTrigger, menuId, size, items, disabled, onClose, testId: triggerTestId, menuTestId, onSelectionChange, selectedKey, disabledKeys, }: MenuProps): JSX_2.Element;
+export declare function MenuTrigger({ renderTrigger, size, title, items, disabled, onClose, triggerTestId, menuTestId, onSelectionChange, selectedKey, disabledKeys, }: MenuProps): JSX_2.Element;
 
 export declare const Modal: (({ isOpen, onClose, title, subtitle, body, children, isOverlay, "data-testid": dataTestId, }: ModalProps) => JSX_2.Element) & {
     Title: ({ children }: {
@@ -509,6 +513,7 @@ declare type Palette = {
     BRAND: {
         PRIMARY: string;
         PRIMARY_LIGHT: string;
+        PRIMARY_SUPER_LIGHT: string;
         SECONDARY: string;
     };
     PRIMARY: {
@@ -590,7 +595,7 @@ export declare interface ProtonRowProps<T = object> extends RowProps<T> {
     onClick?: (key: string) => void;
 }
 
-export declare interface ProtonTableBodyProps<T = object> extends TableBodyProps<T> {
+export declare interface ProtonTableBodyProps<T = object> extends TableBodyProps_2<T> {
     showLines?: boolean;
 }
 
@@ -714,18 +719,120 @@ declare interface SwitchProps {
     children?: React.ReactNode;
 }
 
-export declare function Table(props: TableProps): JSX_2.Element;
+export declare function Table(props: TableProps_2): JSX_2.Element;
+
+/**
+ * Base Table component that renders data in rows and columns using collections.
+ *
+ * - Built-in keyboard navigation for interactive rows.
+ * - Full ARIA table semantics with proper roles, labels, and indices.
+ *
+ * API:
+ *  - {@link TableProps}
+ *
+ * @example
+ * ```tsx
+ * <Table caption="Employee Directory">
+ *   <Table.Header>
+ *     <Table.Column id="name">Name</Table.Column>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     <Table.Row key="1">
+ *       <Table.Cell>Joe</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table>
+ * ```
+ */
+export declare const Table2: (({ children, name }: TableProps) => JSX_2.Element) & {
+    /** Table header: {@link TableHeaderProps} */
+    Header: ({ ...props }: TableHeaderProps) => any;
+    /** Table column: {@link TableColumnProps} */
+    Column: ({ ...props }: TableColumnProps_2) => any;
+    /** Table body: {@link TableBodyProps} */
+    Body: ({ ...props }: TableBodyProps) => any;
+    /** Table row: {@link TableRowProps} */
+    Row: ({ ...props }: TableRowProps_2) => any;
+    /** Table cell: {@link TableCellProps} */
+    Cell: ({ ...props }: TableCellProps_2) => any;
+};
 
 export declare const TableBody: <T = object>(props: ProtonTableBodyProps<T>) => JSX.Element;
 
+export declare interface TableBodyProps {
+    children: TableRowElement | TableRowElement[];
+}
+
+declare const TableCell: ({ ...props }: TableCellProps) => any;
+
+export declare type TableCellData = {
+    columnKey: string | number;
+    value: ReactNode;
+};
+
+declare type TableCellElement = ReactElement<TableCellProps, typeof TableCell>;
+
+export declare interface TableCellProps {
+    columnKey?: string;
+    children: ReactNode;
+}
+
+export declare type TableCollection = ReturnType<typeof useTableCollection>;
+
+declare const TableColumn: ({ ...props }: TableColumnProps) => any;
+
+export declare type TableColumnData = {
+    key: string | number;
+    header: ReactNode;
+    isHidden?: boolean;
+};
+
+declare type TableColumnElement = ReactElement<TableColumnProps, typeof TableColumn>;
+
+export declare interface TableColumnProps {
+    id: string;
+    children: ReactNode;
+}
+
+export declare type TableData = {
+    columns: TableColumnData[];
+    rows: TableRowData[];
+};
+
 export { TableHeader }
 
-declare interface TableProps extends AriaTableProps, TableStateProps<object> {
+export declare interface TableHeaderProps {
+    children: TableColumnElement | TableColumnElement[];
+    isHidden?: boolean;
+}
+
+declare interface TableProps {
+    children: [ReactElement<TableHeaderProps>, ReactElement<TableBodyProps>];
+    name?: string;
+}
+
+declare interface TableProps_2 extends AriaTableProps, TableStateProps<object> {
     headerProps?: {
         isHidden?: boolean;
     };
 }
 
+declare const TableRow: ({ ...props }: TableRowProps) => any;
+
+export declare type TableRowData = {
+    key: string | number;
+    cells: TableCellData[];
+    onClick?: () => void;
+};
+
+declare type TableRowElement = ReactElement<TableRowProps, typeof TableRow>;
+
+export declare interface TableRowProps {
+    key?: string | number;
+    children: TableCellElement | TableCellElement[];
+    onClick?: () => void;
+}
+
 /**
  * A component that displays text with an ellipsis when it overflows its container.
  * @interface TextEllipsisProps
@@ -819,6 +926,7 @@ declare interface ThemeVariables {
     "--proton-control__shadow-color": string;
     "--proton-color__primary": string;
     "--proton-color__primary-light": string;
+    "--proton-color__primary-super-light": string;
     "--proton-color__secondary": string;
     "--proton-control__primary-super-dark": string;
     "--proton-control__primary-dark": string;
@@ -897,11 +1005,10 @@ export declare interface TooltipTriggerProps extends TooltipProps, TooltipTrigge
  * @returns {JSX.Element} - The MenuTrigger component.
  */
 declare interface TriggerProps {
-    isDisabled?: boolean;
-    "data-testid"?: string;
-    ref?: React.RefObject<HTMLButtonElement>;
-    onPress?: () => void;
-    "aria-label": string;
+    disabled?: boolean;
+    isOpen?: boolean;
+    setIsOpen?: (isOpen: boolean) => void;
+    triggerRef: React.RefObject<HTMLButtonElement>;
 }
 
 /**
@@ -915,6 +1022,26 @@ export declare function usePopoverTrigger(props?: OverlayTriggerProps): {
     state: OverlayTriggerState;
 };
 
+/**
+ * Hook for managing table data structure and providing navigation methods
+ */
+export declare function useTableCollection(data: TableData): {
+    columns: TableColumnData_2[];
+    rows: TableRowData[];
+    size: number;
+    firstItem: TableRowData;
+    lastItem: TableRowData;
+    hasHeader: boolean;
+    isHeaderHidden: boolean;
+    hasVisibleHeader: boolean;
+    getTotalRowCount: number;
+    getRowAriaIndex: (rowIndex: number) => number;
+    getItemByKey: (key: string | number) => TableRowData | null;
+    getItemAfter: (key: string | number) => TableRowData | null;
+    getItemBefore: (key: string | number) => TableRowData | null;
+    getItemIndex: (key: string | number) => number;
+};
+
 export declare const useTheme: () => ThemeContextType;
 
 /**