@bioturing/components 0.30.0 → 0.31.0

package/dist/index.d.ts

@@ -465,15 +465,15 @@ declare type Children = {
     children?: default_2.ReactNode;
 };
 
-export declare const ChoiceList: <M extends boolean = false>({ items, multiple, value, defaultValue, onChange, searchProps, showSelectAll, className, placeholder, disabled: disabledProp, status: statusProp, getItemKeywords, ...rest }: ChoiceListProps<M>) => JSX.Element;
+export declare const ChoiceList: <M extends boolean = false>({ options, multiple, value, defaultValue, onChange, searchProps, showSelectAll, className, placeholder, disabled: disabledProp, status: statusProp, getItemKeywords, ...rest }: ChoiceListProps<M>) => JSX.Element;
 
-export declare type ChoiceListItem = {
+export declare type ChoiceListOption = {
     label: React.ReactNode;
     value?: string;
 };
 
 export declare interface ChoiceListProps<M extends boolean = false> extends Omit<CommandProps, "value" | "onChange" | "defaultValue"> {
-    items: ChoiceListItem[];
+    options: ChoiceListOption[];
     multiple?: M;
     value?: M extends true ? string[] : string;
     defaultValue?: M extends true ? string[] : string;
@@ -498,7 +498,7 @@ export declare interface ChoiceListProps<M extends boolean = false> extends Omit
      * Function to extract keywords from the item for search filtering
      * @default (item) => [item.value, reactNodeToString(item.label)]
      */
-    getItemKeywords?: (item: ChoiceListItem) => string[];
+    getItemKeywords?: (item: ChoiceListOption) => string[];
 }
 
 export declare interface ClassArray extends Array<ClassValue> {
@@ -1085,10 +1085,58 @@ export declare interface ComboboxProps {
         checked: boolean;
         indeterminate: boolean;
     }) => default_2.ReactNode;
+    /**
+     * Function to extract keywords from the item for search filtering
+     * @default (option) => [String(option.key), reactNodeToString(option.label)]
+     */
+    getOptionKeywords?: (option: DropdownMenuItemType & {
+        type: "item";
+    }) => string[];
 }
 
 declare type CommandFilter = (value: string, search: string, keywords?: string[]) => number;
 
+export declare const CommandPalette: default_2.FC<CommandPaletteProps>;
+
+export declare interface CommandPaletteProps {
+    /** Whether the command palette is open */
+    open?: boolean;
+    /** Callback fired when the open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Default open state
+     */
+    defaultOpen?: boolean;
+    /** Items to display in the command palette */
+    items?: DropdownMenuItemType[];
+    /** Keyboard shortcuts to open the palette */
+    shortcuts?: CommandPaletteShortcut[];
+    /** Placeholder text for the search input */
+    placeholder?: string;
+    /** Text to show when no results are found */
+    emptyText?: string;
+    /** Accessible label for the command palette */
+    label?: string;
+    /** Additional CSS class names */
+    className?: string;
+    classNames?: {
+        root?: string;
+        mask?: string;
+        content?: string;
+        group?: string;
+        item?: string;
+        groupLabel?: string;
+    };
+}
+
+export declare type CommandPaletteShortcut = {
+    key: string;
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+    altKey?: boolean;
+    shiftKey?: boolean;
+};
+
 declare type CommandProps = Children & DivProps & {
     /**
      * Accessible label for this command menu. Not shown visibly.
@@ -1379,6 +1427,14 @@ export declare const componentMetadata: {
         originalDocUrl: string;
         description: string;
     };
+    Loader: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Feedback";
+        description: string;
+    };
     Spin: {
         name: string;
         link: string;
@@ -1538,6 +1594,23 @@ export declare const componentMetadata: {
         category: "Feedback";
         description: string;
     };
+    CommandPalette: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Navigation";
+        packages: string[];
+        description: string;
+    };
+    KeyboardShortcut: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Data Display";
+        description: string;
+    };
     VerticalCollapsiblePanel: {
         name: string;
         link: string;
@@ -1810,7 +1883,12 @@ export declare const DROPDOWN_COLLISION_AVOIDANCE: {
     readonly fallbackAxisSide: "none";
 };
 
-export declare const DropdownMenu: ({ children, items, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, className, itemRender, classNames, size, showSearch, searchProps, popupMatchTriggerWidth, beforeList, afterList, keepOpenOnSelect, highlightedItemKey, selectedItemKeys, showCheckbox, getItemKeywords, }: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: ({ children, items, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, defaultOpen, className, itemRender, classNames, size, showSearch, inCombobox: inComboboxProp, searchProps, popupMatchTriggerWidth, beforeList, afterList, keepOpenOnSelect, highlightedItemKey, selectedItemKeys, getItemKeywords, showCheckbox, }: DropdownMenuProps) => JSX.Element;
+
+export declare interface DropdownMenuGroup {
+    label: default_2.ReactNode | null;
+    items: DropdownMenuItemType[];
+}
 
 export declare const DropdownMenuItem: default_2.FC<DropdownMenuItemProps>;
 
@@ -1828,8 +1906,11 @@ export declare interface DropdownMenuItemProps {
         item?: string;
         itemIcon?: string;
         itemText?: string;
+        itemSuffix?: string;
     };
-    onSelect?: () => void;
+    onSelect?: (item: DropdownMenuItemType & {
+        type: "item";
+    }) => void;
     /**
      * Whether the menu item is in a combobox
      */
@@ -1869,7 +1950,7 @@ export declare type DropdownMenuItemType = {
     /**
      * The label of the menu item
      */
-    label?: React.ReactNode;
+    label?: default_2.ReactNode;
     /**
      * Whether the menu item is disabled
      */
@@ -1877,31 +1958,41 @@ export declare type DropdownMenuItemType = {
     /**
      * The icon of the menu item
      */
-    icon?: React.ReactNode;
+    icon?: default_2.ReactNode;
+    /**
+     * The suffix of the menu item
+     */
+    suffix?: default_2.ReactNode;
     /**
      * The key of the menu item
      */
-    key: React.Key;
+    key: default_2.Key;
+    /**
+     * The onSelect event handler of the menu item
+     */
+    onSelect?: (item: DropdownMenuItemType & {
+        type: "item";
+    }) => void;
     /**
      * The onClick event handler of the menu item
      */
-    onClick?: React.HTMLAttributes<HTMLElement>["onClick"];
+    onClick?: default_2.HTMLAttributes<HTMLElement>["onClick"];
     /**
      * The onMouseEnter event handler of the menu item
      */
-    onMouseEnter?: React.HTMLAttributes<HTMLElement>["onMouseEnter"];
+    onMouseEnter?: default_2.HTMLAttributes<HTMLElement>["onMouseEnter"];
     /**
      * The onMouseLeave event handler of the menu item
      */
-    onMouseLeave?: React.HTMLAttributes<HTMLElement>["onMouseLeave"];
+    onMouseLeave?: default_2.HTMLAttributes<HTMLElement>["onMouseLeave"];
     /**
      * The onMouseOver event handler of the menu item
      */
-    onMouseOver?: React.HTMLAttributes<HTMLElement>["onMouseOver"];
+    onMouseOver?: default_2.HTMLAttributes<HTMLElement>["onMouseOver"];
     /**
      * The onMouseOut event handler of the menu item
      */
-    onMouseOut?: React.HTMLAttributes<HTMLElement>["onMouseOut"];
+    onMouseOut?: default_2.HTMLAttributes<HTMLElement>["onMouseOut"];
     /**
      * The className of the menu item
      */
@@ -1913,7 +2004,7 @@ export declare type DropdownMenuItemType = {
     /**
      * The ref of the menu item
      */
-    ref?: React.Ref<HTMLElement>;
+    ref?: default_2.Ref<HTMLElement>;
 } | {
     /**
      * The type of the menu item
@@ -1927,14 +2018,14 @@ export declare type DropdownMenuItemType = {
     /**
      * The title of the menu item
      */
-    title?: React.ReactNode;
+    title?: default_2.ReactNode;
     /**
      * The className of the menu item
      */
     className?: string;
 };
 
-export declare interface DropdownMenuProps {
+export declare interface DropdownMenuProps extends Omit<UseDropdownMenuProps, "classNames"> {
     /** Array of menu items to be displayed in the dropdown */
     items: DropdownMenuItemType[];
     /** Custom render function for the trigger element */
@@ -1957,6 +2048,10 @@ export declare interface DropdownMenuProps {
      * Callback fired when the dropdown open state changes
      */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Default open state of the dropdown
+     */
+    defaultOpen?: boolean;
     /**
      * Additional CSS class for the dropdown component
      */
@@ -1969,18 +2064,10 @@ export declare interface DropdownMenuProps {
         root?: string;
         trigger?: string;
         popup?: string;
-        group?: string;
-        groupLabel?: string;
-        item?: string;
         itemIcon?: string;
         itemText?: string;
-        separator?: string;
         positioner?: string;
-    };
-    /**
-     * Custom render function for menu items
-     */
-    itemRender?: (item: DropdownMenuItemType, props: React.HTMLAttributes<HTMLElement>) => React.ReactElement;
+    } & UseDropdownMenuProps["classNames"];
     /**
      * Whether to show search input
      * @default false
@@ -2008,31 +2095,6 @@ export declare interface DropdownMenuProps {
      * Content to display after the list
      */
     afterList?: React.ReactNode;
-    /**
-     * Whether to keep the dropdown open when an item is selected
-     * @default false
-     */
-    keepOpenOnSelect?: boolean;
-    /**
-     * Control the highlighted state of the menu item
-     */
-    highlightedItemKey?: React.Key;
-    /**
-     * Control the selected state of the menu item
-     */
-    selectedItemKeys?: React.Key[];
-    /**
-     * Whether to show checkbox
-     * @default false
-     */
-    showCheckbox?: boolean;
-    /**
-     * Function to extract keywords from the item for search filtering
-     * @default (item) => [String(item.key), reactNodeToString(item.label)]
-     */
-    getItemKeywords?: (item: DropdownMenuItemType & {
-        type: "item";
-    }) => string[];
 }
 
 export { DropDownProps }
@@ -2276,6 +2338,21 @@ export declare function isTracebackError(error: unknown): boolean;
 
 export declare const isValidHexColor: (hex: string, acceptWithoutPrefix?: boolean) => boolean;
 
+export declare const KeyboardShortcut: default_2.FC<KeyboardShortcutProps>;
+
+export declare interface KeyboardShortcutProps {
+    /** The keyboard shortcut keys to display (optional if using children) */
+    keys?: string[];
+    /** Custom className */
+    className?: string;
+    /** Custom style */
+    style?: default_2.CSSProperties;
+    /** Size variant */
+    size?: "small" | "medium" | "large";
+    /** Children to display as keyboard shortcuts */
+    children?: default_2.ReactNode;
+}
+
 export { Layout }
 
 export { LayoutProps }
@@ -2286,6 +2363,12 @@ export { List }
 
 export { ListProps }
 
+export declare const Loader: ForwardRefExoticComponent<LoaderProps & RefAttributes<HTMLSpanElement>>;
+
+export declare interface LoaderProps extends React.ComponentPropsWithoutRef<"span"> {
+    text?: string;
+}
+
 declare const MainCheckboxInner: ({ variant, className, ...props }: CheckboxProps, ref: React.Ref<React.ComponentRef<typeof Checkbox_2>>) => JSX.Element;
 
 declare const MainInputInner: (props: InputProps, ref: React.Ref<InputRef>) => JSX.Element;
@@ -4086,6 +4169,52 @@ export declare function useDraggable(enabled?: boolean): {
     ref: (element: HTMLElement | null) => () => void;
 };
 
+declare interface UseDropdownMenuProps {
+    /**
+     * Callback function to handle the open state change of the dropdown menu.
+     */
+    onOpenChange?: (open: boolean) => void;
+    items: DropdownMenuItemType[];
+    inCombobox?: boolean;
+    classNames?: {
+        item?: string;
+        itemIcon?: string;
+        itemSuffix?: string;
+        group?: string;
+        groupLabel?: string;
+        divider?: string;
+    };
+    /**
+     * Custom render function for menu items
+     */
+    itemRender?: (item: DropdownMenuItemType, props: React.HTMLAttributes<HTMLElement>) => React.ReactElement;
+    /**
+     * Whether to keep the dropdown open when an item is selected
+     * @default false
+     */
+    keepOpenOnSelect?: boolean;
+    /**
+     * Control the highlighted state of the menu item
+     */
+    highlightedItemKey?: React.Key;
+    /**
+     * Control the selected state of the menu item
+     */
+    selectedItemKeys?: React.Key[];
+    /**
+     * Whether to show checkbox
+     * @default false
+     */
+    showCheckbox?: boolean;
+    /**
+     * Function to extract keywords from the item for search filtering
+     * @default (item) => [String(item.key), reactNodeToString(item.label)]
+     */
+    getItemKeywords?: (item: DropdownMenuItemType & {
+        type: "item";
+    }) => string[];
+}
+
 export declare const useDS: () => {
     theme: "light" | "dark";
 };