@protonradio/proton-ui 0.10.16 → 0.11.0-beta.10

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,6 +10,7 @@ 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 { PressProps } from 'react-aria';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { RowProps } from '@react-stately/table';
@@ -25,25 +27,29 @@ 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, 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[];
 }
 
 declare interface ActionMenuProps {
     isOpen: boolean;
     selectionMode?: "single" | "multiple" | "none";
     selectedKeys?: string[];
+    defaultSelectedKeys?: string[];
     disabledKeys?: string[];
     children?: ReactNode | ((props: {
         close: () => void;
     }) => ReactNode);
     showCancel?: boolean;
     cancelButtonText?: string;
+    title?: string;
     actions?: ActionMenuAction[];
     id?: string;
     onClose?: () => void;
@@ -202,7 +208,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, icon, to, target, onPress, type, isDisabled, "data-testid": testId, children, }: ButtonProps): JSX_2.Element;
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 export declare function ButtonGroup(props: ButtonGroupProps): JSX_2.Element;
 
@@ -242,7 +248,7 @@ declare interface ButtonGroupProps {
     children?: React.ReactNode;
 }
 
-declare interface ButtonProps {
+declare interface ButtonProps extends AriaButtonProps<"button"> {
     /** The button's visual aesthetic
      * @param {ButtonVariant} variant
      */
@@ -252,6 +258,10 @@ declare interface ButtonProps {
      * @default "fullWidth"
      */
     size?: ButtonSize;
+    /** Should the button be full width?
+     * @param {boolean} fullWidth
+     */
+    fullWidth?: boolean;
     /** The prefix to display within the button
      * @param {React.ReactNode} icon
      */
@@ -267,7 +277,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
      */
@@ -284,12 +294,27 @@ 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 = "fullWidth" | "small" | "medium" | "large" | "xlarge" | "2xlarge";
+declare type ButtonSize = "small" | "medium" | "large" | "xlarge" | "2xlarge";
 
 export declare type ButtonVariant = "primary" | "secondary" | "success" | "danger" | "translucent";
 
+export declare function ButtonWithSelect({ items, defaultValue, children, onSelectionChange, disabledKeys, selectedKey, icon, variant, fullWidth, onPress, ...buttonProps }: ButtonWithSelectProps): JSX_2.Element;
+
+declare type ButtonWithSelectProps = {
+    items: MenuItemType[];
+    defaultValue?: string;
+    children: default_2.ReactNode;
+    onSelectionChange?: (key: string) => void;
+    selectedKey?: string;
+    disabledKeys?: string[];
+} & ButtonProps;
+
 export declare const Cell: <T>(props: ProtonColumnProps<T>) => JSX.Element;
 
 export declare const Column: <T>(props: ProtonColumnProps<T>) => JSX.Element;
@@ -353,7 +378,7 @@ declare interface ElevationProps {
 
 export declare function Icon(props: Omit<IconProps, "svgContent">): JSX_2.Element;
 
-declare type IconID = "external-link" | "caret-down";
+declare type IconID = "external-link" | "caret-down" | "caret-right" | "chevron-right" | "chevron-left" | "chevron-up" | "chevron-down";
 
 declare interface IconProps {
     /**
@@ -401,7 +426,36 @@ declare interface ImageBackgroundProps {
  */
 export declare const Input: default_2.ForwardRefExoticComponent<BaseInputProps & default_2.RefAttributes<HTMLInputElement>>;
 
-export declare function MenuTrigger({ renderTrigger, menuId, size, actions, disabled, onClose, testId: triggerTestId, menuTestId, }: ResponsiveMenuProps): JSX_2.Element;
+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) => ReactNode;
+    /** Size of the trigger icon */
+    size?: number;
+    /** Title of the parent menu */
+    title?: string;
+    /** Array of menu actions/items to display */
+    items: MenuItemType[];
+    /** Whether the menu is disabled */
+    disabled?: boolean;
+    /** Callback when menu closes */
+    onClose?: () => void;
+    /** Test ID for the trigger component */
+    testId?: string;
+    /** Test ID for the menu */
+    menuTestId?: string;
+    /** Callback when a menu item is selected */
+    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, title, items, disabled, onClose, testId: 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 }: {
@@ -545,25 +599,6 @@ export declare interface ProtonTableBodyProps<T = object> extends TableBodyProps
     showLines?: boolean;
 }
 
-declare interface ResponsiveMenuProps {
-    /** 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 */
-    size?: number;
-    /** Array of menu actions/items to display */
-    actions: ActionMenuAction[];
-    /** Whether the menu is disabled */
-    disabled?: boolean;
-    /** Callback when menu closes */
-    onClose?: () => void;
-    /** Test ID for the trigger component */
-    testId?: string;
-    /** Test ID for the menu */
-    menuTestId?: string;
-}
-
 export declare const Row: <T = object>(props: ProtonRowProps<T>) => JSX.Element;
 
 /**
@@ -611,22 +646,18 @@ declare interface SearchInputProps extends Omit<BaseInputProps, "prefix" | "suff
 
 export { Section }
 
-export declare const Select: {
-    Menu: typeof SelectMenu;
-};
+/**
+ * A dropdown select menu that opens a popover on desktop and an action menu on mobile.
+ * Supports controlled and uncontrolled modes.
+ */
+export declare function Select({ label, name, isDisabled, disabledKeys, selectedKey, onSelectionChange, defaultSelectedKey, onOpen, onClose, items, "data-testid": testId, }: SelectProps): JSX_2.Element;
 
 declare interface SelectItem {
     label: string;
-    value: string;
+    key: string;
     to?: string;
 }
 
-/**
- * A dropdown select menu that opens a popover on desktop and an action menu on mobile.
- * Supports controlled and uncontrolled modes.
- */
-declare function SelectMenu({ label, name, isDisabled, disabledKeys, selectedKey, onSelectionChange, onOpen, onClose, items, "data-testid": testId, }: SelectProps): JSX_2.Element;
-
 declare interface SelectProps {
     /** The name of the select field */
     name: string;
@@ -644,12 +675,14 @@ declare interface SelectProps {
     selectedKey?: string;
     /** Callback fired when selection changes */
     onSelectionChange?: (key: string) => void;
+    /** The key of the default selected item */
+    defaultSelectedKey?: string;
     /** Callback fired when the menu opens */
     onOpen?: () => void;
     /** Callback fired when the menu closes */
     onClose?: () => void;
     /** Array of items to display
-     * @example [{ value: "thing-1", label: "Thing 1" }, { value: "thing-2", label: "Thing 2" }]
+     * @example [{ key: "thing-1", label: "Thing 1" }, { key: "thing-2", label: "Thing 2" }]
      */
     items: SelectItem[];
     /** Test ID for the select */
@@ -865,15 +898,17 @@ export declare interface TooltipTriggerProps extends TooltipProps, TooltipTrigge
  * A component that displays either a popover menu or an action menu
  * depending on the screen size when the menu trigger is pressed.
  *
- * @param {ResponsiveMenuProps} props - The props for the ResponsiveMenuTrigger component.
- * @returns {JSX.Element} - The ResponsiveMenuTrigger component.
+ * @param {MenuProps} props - The props for the MenuTrigger component.
+ * @returns {JSX.Element} - The MenuTrigger component.
  */
 declare interface TriggerProps {
-    "data-testid"?: string;
     disabled?: boolean;
-    ref?: React.RefObject<HTMLButtonElement>;
-    onClick?: () => void;
-    "aria-label": string;
+    /** Props for handling press interactions on the trigger element */
+    domTriggerProps: PressProps;
+    /** Props for handling menu trigger interactions */
+    ariaTriggerProps: AriaButtonProps<"button">;
+    isOpen?: boolean;
+    triggerRef: React.RefObject<HTMLButtonElement>;
 }
 
 /**