@protonradio/proton-ui 0.11.5 → 0.11.6

package/dist/index.d.ts

@@ -1,18 +1,13 @@
 import { AriaAttributes } from 'react';
 import { AriaDialogProps } from '@react-aria/dialog';
-import { AriaPopoverProps } from '@react-aria/overlays';
 import { default as default_2 } from 'react';
-import { DOMProps } from '@react-types/shared';
 import { ForwardRefExoticComponent } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { MouseEvent as MouseEvent_2 } from 'react';
-import { OverlayTriggerProps } from '@react-stately/overlays';
-import { OverlayTriggerState } from '@react-stately/overlays';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { Selection as Selection_2 } from '@react-types/shared';
-import { TableColumnData as TableColumnData_2 } from '../Table';
 import { TooltipProps as TooltipProps_2 } from 'react-aria-components';
 import { TooltipTriggerComponentProps } from 'react-aria-components';
 
@@ -23,9 +18,9 @@ import { TooltipTriggerComponentProps } from 'react-aria-components';
  * API:
  *  - {@link ActionMenuProps}
  */
-export declare const ActionMenu: ({ isOpen, selectionMode, selectedKeys, defaultSelectedKeys, disabledKeys, children, showCancel, cancelButtonText, actions, title, onSelectionChange, onClose, "data-testid": testId, }: ActionMenuProps) => JSX_2.Element;
+export declare const ActionMenu: ({ isOpen, actions, children, showCancel, cancelButtonText, selectionMode, selectedKeys, disabledKeys, onSelectionChange, onClose, title, "data-testid": testId, }: ActionMenuProps) => JSX_2.Element;
 
-declare interface ActionMenuAction {
+export declare interface ActionMenuAction {
     key: string;
     label?: ReactNode;
     description?: ReactNode;
@@ -47,9 +42,9 @@ declare interface ActionMenuProps {
     }) => ReactNode);
     /** The test id of the menu */
     "data-testid"?: string;
-    /** The keys of the default selected items */
-    defaultSelectedKeys?: string[];
-    /** The keys of the disabled items */
+    /** The keys of the disabled items
+     * @default []
+     */
     disabledKeys?: string[];
     /** Whether the menu is open
      * @default false
@@ -64,7 +59,7 @@ declare interface ActionMenuProps {
     /** The selection mode of the menu
      * @default "single"
      */
-    selectionMode?: "single" | "multiple" | "none";
+    selectionMode?: ActionMenuSelectionMode;
     /** The keys of the selected items */
     selectedKeys?: string[];
     /** Whether to show the cancel button */
@@ -73,6 +68,8 @@ declare interface ActionMenuProps {
     title?: string;
 }
 
+export declare type ActionMenuSelectionMode = "single" | "multiple" | "none";
+
 /**
  * A badge component for displaying status, categories, or counts with various visual styles.
  *
@@ -601,7 +598,7 @@ declare interface MenuProps {
     /** Custom trigger component. If not provided, defaults to ellipsis icon.
      * - @prop triggerProps {@link TriggerProps}
      */
-    renderTrigger?: (triggerProps: TriggerProps) => ReactNode;
+    renderTrigger?: (triggerProps: MenuTriggerProps) => ReactNode;
     /** Size of the trigger icon
      * @default 24
      */
@@ -616,13 +613,13 @@ declare interface MenuProps {
      * @default false
      */
     disabled?: boolean;
-    /** Callback when menu closes */
+    /** Callback when the menu is closed */
     onClose?: () => void;
-    /** Test ID for the trigger component */
+    /** Test ID for the trigger button */
     triggerTestId?: string;
     /** Test ID for the menu */
     menuTestId?: string;
-    /** Callback when a menu item is selected */
+    /** Callback when the selection changes */
     onSelectionChange?: (key: string) => void;
     /** The key of the selected item */
     selectedKey?: string;
@@ -631,7 +628,7 @@ declare interface MenuProps {
 }
 
 /**
- * A component that displays either a popover menu or an action menu
+ * An uncontrolled component that displays either a popover menu or an action menu
  * depending on the screen size when the menu trigger is pressed.
  *
  * API:
@@ -639,6 +636,12 @@ declare interface MenuProps {
  */
 export declare function MenuTrigger({ renderTrigger, size, title, items, disabled, onClose, triggerTestId, menuTestId, onSelectionChange, selectedKey, disabledKeys, }: MenuProps): JSX_2.Element;
 
+export declare interface MenuTriggerProps {
+    disabled?: boolean;
+    isOpen?: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+}
+
 export declare const Modal: (({ isOpen, onClose, title, subtitle, body, children, isOverlay, "data-testid": dataTestId, }: ModalProps) => JSX_2.Element) & {
     /**
      * Renders a h2 styled title
@@ -708,40 +711,67 @@ declare interface ModalProps {
 }
 
 /**
- * Popover is an unstyled popover component that handles positioning. It should be used
- * with the Dialog component to provide a styled popover.
+ * A popover component that handles positioning and supports controlled and uncontrolled modes.
  *
  * A popover displays interactive content in context with a trigger element.
  * A tooltip displays a description of an element on hover or focus.
  *
- * @see {@link usePopoverTrigger} for a complete usage example
- *
  * API:
  *  - {@link PopoverProps}
- *  - extends {@link AriaPopoverProps}
  */
-export declare function Popover({ children, state, arrow, offset, ...props }: PopoverProps): JSX_2.Element;
+export declare function Popover({ trigger, children, open, defaultOpen, onOpenChange, side, align, arrow, constrainWidth, "data-testid": testId, }: PopoverProps): JSX_2.Element;
+
+export declare type PopoverAlign = "start" | "center" | "end";
 
-declare interface PopoverProps extends Omit<AriaPopoverProps, "popoverRef"> {
+declare interface PopoverProps {
     /**
-     * Whether to show an arrow on the popover.
+     * The trigger element for the popover.
+     * @warning Do NOT pass a <button> element here. Use a span, div, or other non-button element.
+     * If a button is passed, an error will be thrown.
      */
-    arrow?: boolean;
+    trigger: default_2.ReactNode;
     /**
-     * Content to display within the popover.
+     * The content of the popover.
      */
     children: default_2.ReactNode;
     /**
-     * Can optionally forward the ref to the popover.
+     * Constrain the width of the popover to the width of the trigger.
+     */
+    constrainWidth?: boolean;
+    /**
+     * Control open state (controlled mode).
      */
-    popoverRef?: default_2.RefObject<HTMLDivElement>;
+    open?: boolean;
     /**
-     * The `isOpen` state of the popover and the methods to toggle it.
-     * - type {@link OverlayTriggerState}
+     * Default open state (uncontrolled mode).
      */
-    state: OverlayTriggerState;
+    defaultOpen?: boolean;
+    /**
+     * Callback when open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Popover side placement
+     * {@link PopoverSide}
+     */
+    side?: PopoverSide;
+    /**
+     * Popover alignment
+     * {@link PopoverAlign}
+     */
+    align?: PopoverAlign;
+    /**
+     * Show an arrow pointing to the trigger.
+     */
+    arrow?: boolean;
+    /**
+     * Test id for the popover content.
+     */
+    "data-testid"?: string;
 }
 
+export declare type PopoverSide = "top" | "right" | "bottom" | "left";
+
 declare type ProtonColorScale = {
     SUPER_DARK: string;
     DARK: string;
@@ -996,7 +1026,7 @@ export declare const Table: (({ children, name }: TableProps) => JSX_2.Element)
     Cell: ({ ...props }: TableCellProps) => any;
 };
 
-export declare interface TableBodyProps {
+declare interface TableBodyProps {
     children: TableRowElement | TableRowElement[];
 }
 
@@ -1010,14 +1040,12 @@ export declare type TableCellData = {
 
 declare type TableCellElement = ReactElement<TableCellProps, typeof TableCell>;
 
-export declare interface TableCellProps {
+declare interface TableCellProps {
     columnKey?: string;
     children?: ReactNode;
     colSpan?: number;
 }
 
-export declare type TableCollection = ReturnType<typeof useTableCollection>;
-
 declare const TableColumn: ({ ...props }: TableColumnProps) => any;
 
 export declare type TableColumnData = {
@@ -1029,7 +1057,7 @@ export declare type TableColumnData = {
 
 declare type TableColumnElement = ReactElement<TableColumnProps, typeof TableColumn>;
 
-export declare interface TableColumnProps {
+declare interface TableColumnProps {
     id: string;
     children: ReactNode;
     "aria-sort"?: AriaAttributes["aria-sort"];
@@ -1040,7 +1068,7 @@ export declare type TableData = {
     rows: TableRowData[];
 };
 
-export declare interface TableHeaderProps {
+declare interface TableHeaderProps {
     children: TableColumnElement | TableColumnElement[];
     isHidden?: boolean;
 }
@@ -1061,7 +1089,7 @@ export declare type TableRowData = {
 
 declare type TableRowElement = ReactElement<TableRowProps, typeof TableRow>;
 
-export declare interface TableRowProps {
+declare interface TableRowProps {
     key?: string | number;
     children: TableCellElement | TableCellElement[];
     onClick?: () => void;
@@ -1140,6 +1168,7 @@ declare interface ThemeContextType {
     style: ProtonStyleSheet;
     palette: ProtonPalette;
     hasPalette?: boolean;
+    themeProviderRef?: default_2.RefObject<HTMLDivElement>;
 }
 
 export declare const ThemeProvider: default_2.FC<ThemeProviderProps>;
@@ -1220,73 +1249,6 @@ export declare interface TooltipTriggerProps extends TooltipProps, TooltipTrigge
     disableTriggerClick?: boolean;
 }
 
-declare interface TriggerProps {
-    disabled?: boolean;
-    isOpen?: boolean;
-    setIsOpen?: (isOpen: boolean) => void;
-    triggerRef: React.RefObject<HTMLButtonElement>;
-}
-
-/**
- * Hook for creating a popover trigger. This hook manages the state and events for the popover
- * and popover trigger. For examples see Popover.stories.tsx.
- *
- * API:
- *  - {@link OverlayTriggerProps}
- *
- * @example
- * ```tsx
- * let { buttonProps, overlayProps, buttonRef, state } = usePopoverTrigger();
- *
- * return (
- *   <div>
- *     <button {...buttonProps} ref={buttonRef}>
- *       Trigger
- *     </button>
- *
- *     {state.isOpen && (
- *       <Popover
- *         state={state}
- *         triggerRef={buttonRef}
- *         arrow={props.arrow}
- *         offset={props.offset}
- *         placement={props.placement}
- *       >
- *         <Dialog {...overlayProps} title="Popover">
- *           Here is some popover content
- *         </Dialog>
- *       </Popover>
- *     )}
- *   </div>
- * );
- * ```
- */
-export declare function usePopoverTrigger(props?: OverlayTriggerProps): {
-    buttonProps: default_2.ButtonHTMLAttributes<HTMLButtonElement>;
-    overlayProps: DOMProps;
-    buttonRef: default_2.MutableRefObject<HTMLButtonElement>;
-    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;
-    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;
 
 /**