@protonradio/proton-ui 0.11.10-beta.3 → 0.11.10

package/dist/index.d.ts

@@ -1,13 +1,9 @@
 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';
@@ -16,15 +12,15 @@ import { TooltipProps as TooltipProps_2 } from 'react-aria-components';
 import { TooltipTriggerComponentProps } from 'react-aria-components';
 
 /**
- * ActionMenu to display a menu of actions.
+ * A controlled ActionMenu to display a menu of actions.
  * Renders a list of actions as a focusable menu, or non-focusable children.
  *
  * 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;
@@ -46,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
@@ -63,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 */
@@ -72,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.
  *
@@ -600,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
      */
@@ -615,13 +613,13 @@ declare interface MenuProps {
      * @default false
      */
     disabled?: boolean;
-    /** Callback when menu closes */
+    /** Callback when the menu closes */
     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;
@@ -630,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:
@@ -638,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
@@ -707,44 +711,69 @@ 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 namespace Popover {
     var displayName: string;
 }
 
-declare interface PopoverProps extends Omit<AriaPopoverProps, "popoverRef"> {
+export declare type PopoverAlign = "start" | "center" | "end";
+
+declare interface PopoverProps {
     /**
-     * Whether to show an arrow on the popover.
+     * The trigger element for the popover.
      */
-    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).
+     */
+    open?: boolean;
+    /**
+     * Default open state (uncontrolled mode).
      */
-    popoverRef?: default_2.RefObject<HTMLDivElement>;
+    defaultOpen?: boolean;
     /**
-     * The `isOpen` state of the popover and the methods to toggle it.
-     * - type {@link OverlayTriggerState}
+     * Callback when open state changes.
      */
-    state: OverlayTriggerState;
+    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;
@@ -868,15 +897,18 @@ declare interface SearchInputProps extends Omit<BaseInputProps, "prefix" | "suff
  * API:
  *  - {@link SelectProps}
  */
-export declare function Select({ label, name, isDisabled, disabledKeys, selectedKey, onSelectionChange, defaultSelectedKey, onOpen, onClose, items, "data-testid": testId, }: SelectProps): JSX_2.Element;
+export declare function Select({ label, name, isDisabled, disabledKeys, selectedKey, onSelectionChange, defaultSelectedKey, onOpen, onClose, items, isRounded, "data-testid": testId, }: SelectProps): JSX_2.Element;
 
 export declare namespace Select {
     var displayName: string;
 }
 
-declare interface SelectItem {
+export declare interface SelectItem {
+    /** The label to display for the item */
     label: string;
+    /** The key of the item */
     key: string;
+    /** The URL to navigate to when the item is clicked, turns item into an a tag */
     to?: string;
 }
 
@@ -893,8 +925,13 @@ declare interface SelectProps {
     isDisabled?: boolean;
     /** Array of items to display
      * @example [{ key: "thing-1", label: "Thing 1" }, { key: "thing-2", label: "Thing 2" }]
+     * @see {@link SelectItem}
      */
     items: SelectItem[];
+    /** Whether the select button is rounded
+     * @default false
+     */
+    isRounded?: boolean;
     /** Label to display above the select
      * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#text
      */
@@ -1141,6 +1178,7 @@ declare interface ThemeContextType {
     style: ProtonStyleSheet;
     palette: ProtonPalette;
     hasPalette?: boolean;
+    themeProviderRef?: default_2.RefObject<HTMLDivElement>;
 }
 
 export declare const ThemeProvider: default_2.FC<ThemeProviderProps>;
@@ -1221,54 +1259,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;
-};
-
 export declare const useTheme: () => ThemeContextType;
 
 /**