@xsolla/xui-context-menu 0.157.0 → 0.158.0

package/native/index.d.ts

@@ -2,206 +2,98 @@ import * as React$1 from 'react';
 import React__default, { ReactNode, RefObject } from 'react';
 import { ThemeOverrideProps } from '@xsolla/xui-core';
 
-/** Size variants for the context menu */
 type ContextMenuSize = "sm" | "md" | "lg" | "xl";
-/** Item variant types for data-driven API */
-type ContextMenuItemVariant = "default" | "checkbox" | "radio";
-/** Trailing element types */
-type ContextMenuTrailingType = "none" | "shortcut" | "badge" | "switch" | "arrow";
-/** Position configuration for context menu */
-interface ContextMenuPosition {
-    x: number;
-    y: number;
-}
-/** Individual menu item data structure for data-driven API */
-interface ContextMenuItemData {
-    id: string;
-    label: string;
-    description?: string;
-    icon?: ReactNode;
-    trailing?: {
-        type: ContextMenuTrailingType;
-        content?: ReactNode | string;
-    };
-    variant?: ContextMenuItemVariant;
-    checked?: boolean;
-    /** Whether this item is selected (shows trailing checkmark) - for Select/Dropdown usage */
-    selected?: boolean;
-    disabled?: boolean;
-    onPress?: () => void;
-    children?: ContextMenuItemData[];
-    groupId?: string;
-}
-/** Menu group with optional header */
-interface ContextMenuGroupData {
-    id: string;
-    label?: string;
-    description?: string;
-    items: ContextMenuItemData[];
-}
-/** Main ContextMenu Container Props */
-interface ContextMenuProps {
-    /** Menu items - data-driven API (alternative to children) */
-    list?: ContextMenuItemData[];
-    /** Grouped menu items with optional headers */
-    groups?: ContextMenuGroupData[];
-    /** Render function for custom children (alternative to list/groups) */
-    children?: ReactNode;
-    /** Size of the context menu */
+type ContextMenuItemType = "option" | "search" | "heading" | "divider";
+type ContextMenuItemLeadingControl = "checkbox" | "radio";
+interface ContextMenuOptionItemProps {
+    type: "option";
     size?: ContextMenuSize;
-    /** Controlled open state */
-    isOpen?: boolean;
-    /** Callback when open state changes */
-    onOpenChange?: (open: boolean) => void;
-    /** Position for right-click context menu mode */
-    position?: ContextMenuPosition;
-    /** Trigger element (button, etc.) for dropdown mode */
-    trigger?: ReactNode;
-    /** Width of the menu */
-    width?: number | string;
-    /** Maximum height before scrolling */
-    maxHeight?: number;
-    /** Callback when an item is selected */
-    onSelect?: (item: ContextMenuItemData) => void;
-    /** Callback when checkbox/radio values change */
-    onCheckedChange?: (itemId: string, checked: boolean) => void;
-    /** Close menu on item select (default: true for non-checkbox items) */
-    closeOnSelect?: boolean;
-    /** Loading state - shows spinner */
-    isLoading?: boolean;
-    /** ARIA label for the menu */
-    "aria-label"?: string;
-    /** Test ID */
-    "data-testid"?: string;
-}
-/** ContextMenuItem Component Props - for default menu items */
-interface ContextMenuItemProps {
-    /** Item label text */
-    children: ReactNode;
-    /** Description text below label */
-    description?: string;
-    /** Leading icon */
-    icon?: ReactNode;
-    /** Trailing element */
-    trailing?: ReactNode;
-    /** Keyboard shortcut display text */
-    shortcut?: string;
-    /** Whether this item is selected (cyan background) - for Select/Dropdown usage */
-    selected?: boolean;
-    /** Whether item is disabled */
-    disabled?: boolean;
-    /** Whether item is currently active/focused (for keyboard navigation) */
-    active?: boolean;
-    /** Size inherited from parent */
-    size?: ContextMenuSize;
-    /** Whether this item has a submenu */
+    leadingControl?: ContextMenuItemLeadingControl;
+    leadingIcon?: ReactNode;
+    status?: ReactNode;
+    iconWrapper?: ReactNode;
+    slot?: ReactNode;
+    slotContent?: ReactNode;
+    label: ReactNode;
+    description?: ReactNode;
+    value?: ReactNode;
+    hint?: ReactNode;
+    trailingIcon?: ReactNode;
+    keyboardShortcut?: string;
     hasSubmenu?: boolean;
-    /** Press handler */
-    onPress?: () => void;
-    /** Test ID */
-    "data-testid"?: string;
-}
-/** ContextMenuCheckboxItem Component Props */
-interface ContextMenuCheckboxItemProps {
-    /** Item label text */
-    children: ReactNode;
-    /** Description text below label */
-    description?: string;
-    /** Content placed after checkbox but before label (e.g., Status indicator) */
-    leadingContent?: ReactNode;
-    /** Trailing element */
-    trailing?: ReactNode;
-    /** Checked state */
+    submenu?: ReactNode;
     checked?: boolean;
-    /** Indeterminate state - shows minus icon instead of check (for "select all" partially selected) */
-    indeterminate?: boolean;
-    /** Whether item is disabled */
     disabled?: boolean;
-    /** Size inherited from parent */
-    size?: ContextMenuSize;
-    /** Checked change handler */
+    destructive?: boolean;
+    onSelect?: () => void;
     onCheckedChange?: (checked: boolean) => void;
-    /** Press handler */
-    onPress?: () => void;
-    /** Test ID */
     "data-testid"?: string;
 }
-/** ContextMenuRadioGroup Component Props */
-interface ContextMenuRadioGroupProps {
-    /** Radio items */
-    children: ReactNode;
-    /** Current selected value */
+interface ContextMenuSearchItemProps {
+    type: "search";
+    size?: ContextMenuSize;
     value: string;
-    /** Value change handler */
     onValueChange: (value: string) => void;
-    /** Test ID */
+    placeholder?: string;
+    autoFocus?: boolean;
+    "aria-label"?: string;
     "data-testid"?: string;
 }
-/** ContextMenuRadioItem Component Props */
-interface ContextMenuRadioItemProps {
-    /** Item label text */
-    children: ReactNode;
-    /** Description text below label */
-    description?: string;
-    /** Value for this radio item */
-    value: string;
-    /** Whether item is disabled */
-    disabled?: boolean;
-    /** Size inherited from parent */
+interface ContextMenuHeadingItemProps {
+    type: "heading";
     size?: ContextMenuSize;
-    /** Press handler */
-    onPress?: () => void;
-    /** Test ID */
+    label: ReactNode;
+    description?: ReactNode;
     "data-testid"?: string;
 }
-/** ContextMenuGroup Component Props */
-interface ContextMenuGroupProps {
-    /** Group heading text */
-    label?: string;
-    /** Group description */
-    description?: string;
-    /** Group items */
-    children: ReactNode;
-    /** Size inherited from parent */
+interface ContextMenuDividerItemProps {
+    type: "divider";
     size?: ContextMenuSize;
-    /** Test ID */
     "data-testid"?: string;
 }
-/** ContextMenuSeparator Component Props */
-interface ContextMenuSeparatorProps {
-    /** Size for consistent spacing */
-    size?: ContextMenuSize;
-    /** Test ID */
-    "data-testid"?: string;
+type ContextMenuItemProps = ContextMenuOptionItemProps | ContextMenuSearchItemProps | ContextMenuHeadingItemProps | ContextMenuDividerItemProps;
+type ContextMenuPanelType = "list" | "phone" | "checkbox" | "status" | "brandLogo" | "radio" | "avatar";
+type ContextMenuPlacement = "bottom-start" | "top-start" | "bottom-end" | "top-end";
+interface ContextMenuPosition {
+    x: number;
+    y: number;
 }
-/** ContextMenuSearch Component Props */
-interface ContextMenuSearchProps {
-    /** Current search value */
-    value?: string;
-    /** Change handler (event-based) */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Change handler (value-based) */
-    onValueChange?: (value: string) => void;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Whether to auto-focus the input when mounted */
-    autoFocus?: boolean;
-    /** Size inherited from parent */
+interface ContextMenuProps {
+    type?: ContextMenuPanelType;
+    items?: ReadonlyArray<ContextMenuOptionItemProps | ContextMenuHeadingItemProps | ContextMenuDividerItemProps>;
+    children?: ReactNode;
     size?: ContextMenuSize;
-    /** Test ID */
+    searchable?: boolean;
+    loading?: boolean;
+    emptyMessage?: string;
+    empty?: ReactNode;
+    trigger?: ReactNode;
+    position?: ContextMenuPosition;
+    placement?: ContextMenuPlacement;
+    isOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    closeOnSelect?: boolean;
+    width?: number;
+    maxHeight?: number;
+    onSelect?: (item: ContextMenuOptionItemProps) => void;
+    "aria-label"?: string;
     "data-testid"?: string;
 }
-/** Context for passing state to children */
+interface ContextMenuCellMeta {
+    type: ContextMenuItemType;
+    onSelect?: () => void;
+    disabled?: boolean;
+}
 interface ContextMenuContextValue {
     size: ContextMenuSize;
     closeMenu: () => void;
-    onItemSelect: (item: ContextMenuItemData) => void;
+    registerCell: (id: string, meta: ContextMenuCellMeta) => number;
+    unregisterCell: (id: string) => void;
     activeIndex: number;
-    setActiveIndex: (index: number) => void;
-    registerItem: (id: string) => number;
-    unregisterItem: (id: string) => void;
+    setActiveIndex: (i: number) => void;
+    query: string;
+    setQuery: (q: string) => void;
 }
-/** Sizing configuration returned by theme.sizing.contextMenu */
 interface ContextMenuSizing {
     paddingVertical: number;
     itemPaddingHorizontal: number;
@@ -213,68 +105,49 @@ interface ContextMenuSizing {
     minWidth: number;
 }
 
-declare const ContextMenu: React__default.ForwardRefExoticComponent<ContextMenuProps & ThemeOverrideProps & React__default.RefAttributes<any>> & {
-    Item: React__default.ForwardRefExoticComponent<ContextMenuItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
-    CheckboxItem: React__default.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
-    RadioGroup: React__default.ForwardRefExoticComponent<ContextMenuRadioGroupProps & React__default.RefAttributes<any>>;
-    RadioItem: React__default.ForwardRefExoticComponent<ContextMenuRadioItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
-    Group: React__default.ForwardRefExoticComponent<ContextMenuGroupProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
-    Separator: React__default.FC<ContextMenuSeparatorProps & ThemeOverrideProps>;
-    Search: React__default.ForwardRefExoticComponent<ContextMenuSearchProps & ThemeOverrideProps & React__default.RefAttributes<HTMLInputElement>>;
-};
-
-declare const ContextMenuItem: React__default.ForwardRefExoticComponent<ContextMenuItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
+type Props$1 = ContextMenuProps & ThemeOverrideProps;
+declare const ContextMenu: React__default.FC<Props$1>;
 
-declare const ContextMenuCheckboxItem: React__default.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
-
-interface RadioGroupContextValue {
-    value: string;
-    onValueChange: (value: string) => void;
-}
-declare const useRadioGroup: () => RadioGroupContextValue | null;
-declare const ContextMenuRadioGroup: React$1.ForwardRefExoticComponent<ContextMenuRadioGroupProps & React$1.RefAttributes<any>>;
-
-declare const ContextMenuRadioItem: React__default.ForwardRefExoticComponent<ContextMenuRadioItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
-
-declare const ContextMenuGroup: React$1.ForwardRefExoticComponent<ContextMenuGroupProps & ThemeOverrideProps & React$1.RefAttributes<any>>;
-
-declare const ContextMenuSeparator: React__default.FC<ContextMenuSeparatorProps & ThemeOverrideProps>;
-
-declare const ContextMenuSearch: React__default.ForwardRefExoticComponent<ContextMenuSearchProps & ThemeOverrideProps & React__default.RefAttributes<HTMLInputElement>>;
+type Props = ContextMenuItemProps & ThemeOverrideProps;
+declare const ContextMenuItem: React__default.FC<Props>;
 
+declare const ContextMenuContext: React$1.Context<ContextMenuContextValue | undefined>;
 declare const useContextMenu: () => ContextMenuContextValue | undefined;
 declare const useContextMenuRequired: () => ContextMenuContextValue;
 
 interface UseContextMenuPositionOptions {
-    position?: ContextMenuPosition;
-    menuRef: RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
+    panelRef: RefObject<HTMLElement | null>;
     isOpen: boolean;
+    placement?: ContextMenuPlacement;
     offset?: number;
 }
-interface AdjustedPosition extends ContextMenuPosition {
-    transformOrigin: string;
+interface ResolvedPosition {
+    top: number;
+    left: number;
+    placement: ContextMenuPlacement;
 }
-/**
- * Hook to calculate smart positioning for context menus
- * Adjusts position to avoid viewport overflow
- */
-declare const useContextMenuPosition: ({ position, menuRef, isOpen, offset, }: UseContextMenuPositionOptions) => AdjustedPosition | undefined;
+declare const useContextMenuPosition: ({ triggerRef, panelRef, isOpen, placement, offset, }: UseContextMenuPositionOptions) => ResolvedPosition | undefined;
 
+type CellType = "option" | "search" | "heading" | "divider";
+interface CellMeta {
+    type: CellType;
+    onSelect?: () => void;
+    disabled?: boolean;
+}
 interface UseKeyboardNavigationOptions {
     isOpen: boolean;
-    itemCount: number;
+    cells: Array<{
+        id: string;
+        meta: CellMeta;
+    }>;
     activeIndex: number;
     setActiveIndex: (index: number) => void;
-    onSelect: (index: number) => void;
     onClose: () => void;
-    loop?: boolean;
+    triggerRef?: RefObject<HTMLElement | null>;
 }
-/**
- * Hook to handle keyboard navigation in context menus
- * Supports arrow keys, home/end, enter/space, and escape
- */
-declare const useKeyboardNavigation: ({ isOpen, itemCount, activeIndex, setActiveIndex, onSelect, onClose, loop, }: UseKeyboardNavigationOptions) => {
+declare const useKeyboardNavigation: ({ isOpen, cells, activeIndex, setActiveIndex, onClose, triggerRef, }: UseKeyboardNavigationOptions) => {
     handleKeyDown: (event: React.KeyboardEvent) => void;
 };
 
-export { ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, type ContextMenuContextValue, ContextMenuGroup, type ContextMenuGroupData, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemData, type ContextMenuItemProps, type ContextMenuItemVariant, type ContextMenuPosition, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSearch, type ContextMenuSearchProps, ContextMenuSeparator, type ContextMenuSeparatorProps, type ContextMenuSize, type ContextMenuSizing, type ContextMenuTrailingType, useContextMenu, useContextMenuPosition, useContextMenuRequired, useKeyboardNavigation, useRadioGroup };
+export { ContextMenu, ContextMenuContext, type ContextMenuContextValue, type ContextMenuDividerItemProps, type ContextMenuHeadingItemProps, ContextMenuItem, type ContextMenuItemLeadingControl, type ContextMenuItemProps, type ContextMenuItemType, type ContextMenuOptionItemProps, type ContextMenuPanelType, type ContextMenuPlacement, type ContextMenuPosition, type ContextMenuProps, type ContextMenuSearchItemProps, type ContextMenuSize, type ContextMenuSizing, useContextMenu, useContextMenuPosition, useContextMenuRequired, useKeyboardNavigation };