@bioturing/components 0.30.0 → 0.32.0

package/dist/index.d.ts

@@ -177,6 +177,7 @@ import { ResultProps } from 'antd';
 import { RibbonProps } from 'antd/es/badge/Ribbon';
 import { Row } from 'antd';
 import { RowProps } from 'antd';
+import { ScrollArea as ScrollArea_2 } from '@base-ui-components/react';
 import { SearchProps as SearchProps_2 } from 'antd/es/input';
 import { SeedToken } from 'antd/es/theme/internal';
 import { SegmentedProps as SegmentedProps_2 } from 'antd/es/segmented';
@@ -465,15 +466,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 +499,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> {
@@ -984,24 +985,28 @@ export declare type ColorTokenValue = {
 
 export { ColProps }
 
-export declare const Combobox: default_2.ForwardRefExoticComponent<ComboboxProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare const Combobox: <T extends default_2.Key, M extends boolean, O extends Record<string, unknown> = {}>(props: ComboboxProps<T, M, O> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => ReturnType<typeof ComboboxInner>;
 
-export declare interface ComboboxOption {
-    value: string | number;
+declare const ComboboxInner: <T extends default_2.Key, M extends boolean, O extends Record<string, unknown> = {}>({ options, value: controlledValue, defaultValue, onChange, placeholder, disabled: disabledProp, status: statusProp, allowClear, multiple, maxTagCount, showSearch, open: controlledOpen, onOpenChange, placement, className, classNames, size, loading: _loading, optionRender, onSearch, dropdownRender, clearIcon, suffixIcon, dropdownMenuProps, triggerProps, searchProps, showSelectionSummary, selectionSummaryRender, showSelectAll, selectAllRender, optionLabelRender, getOptionKeywords, ...rest }: ComboboxProps<T, M, O>, ref: default_2.ForwardedRef<HTMLDivElement>) => JSX.Element;
+
+export declare type ComboboxOption<T extends default_2.Key, O extends Record<string, unknown> = {}> = {
+    value: T;
     label: default_2.ReactNode;
     disabled?: boolean;
     icon?: default_2.ReactNode;
-}
+} & O;
 
-export declare interface ComboboxProps {
+export declare interface ComboboxProps<T extends default_2.Key, M extends boolean, O extends Record<string, unknown> = {}> {
     /** Array of options to be displayed in the combobox */
-    options?: ComboboxOption[];
+    options?: ComboboxOption<T, O>[];
     /** Current value of the combobox */
-    value?: string | number | Array<string | number>;
+    value?: M extends true ? T[] : T;
     /** Default value when uncontrolled */
-    defaultValue?: string | number | Array<string | number>;
+    defaultValue?: M extends true ? T[] : T;
     /** Callback when value changes */
-    onChange?: (value: string | number | Array<string | number>) => void;
+    onChange?: (value: M extends true ? T[] : T) => void;
     /** Placeholder text for the input */
     placeholder?: string;
     /** Whether the combobox is disabled */
@@ -1011,7 +1016,7 @@ export declare interface ComboboxProps {
     /** Whether to allow clearing the selection */
     allowClear?: boolean;
     /** Whether to allow multiple selections */
-    multiple?: boolean;
+    multiple?: M;
     /** Maximum number of tags to show */
     maxTagCount?: number;
     /** Whether to show search functionality */
@@ -1037,9 +1042,9 @@ export declare interface ComboboxProps {
     /** Loading state */
     loading?: boolean;
     /** Custom render for options */
-    optionRender?: (option: ComboboxOption, props: default_2.HTMLAttributes<HTMLElement>) => default_2.ReactElement;
+    optionRender?: (option: ComboboxOption<T, O>, props: default_2.HTMLAttributes<HTMLElement>) => default_2.ReactElement;
     /** Filter function for search */
-    filterOption?: boolean | ((input: string, option: ComboboxOption) => boolean);
+    filterOption?: boolean | ((input: string, option: ComboboxOption<T, O>) => boolean);
     /** Callback when search input changes */
     onSearch?: (value: string) => void;
     /** Custom dropdown render */
@@ -1070,7 +1075,7 @@ export declare interface ComboboxProps {
      * Render function for the selection summary in multiple case
      * @default (selectedValues) => `${selectedValues.length} items selected`
      */
-    selectionSummaryRender?: (selectedValues: Array<string | number>) => default_2.ReactNode;
+    selectionSummaryRender?: (selectedValues: T[]) => default_2.ReactNode;
     /**
      * Show select all option when in multiple mode
      * @default false
@@ -1085,10 +1090,60 @@ 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: ComboboxOption<T, O>) => string[];
+    /**
+     * Render function for the option label
+     */
+    optionLabelRender?: (option: ComboboxOption<T, O>, props?: default_2.HTMLAttributes<HTMLElement>) => default_2.ReactElement;
 }
 
 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 +1434,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 +1601,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 +1890,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, itemLabelRender, }: DropdownMenuProps) => JSX.Element;
+
+export declare interface DropdownMenuGroup {
+    label: default_2.ReactNode | null;
+    items: DropdownMenuItemType[];
+}
 
 export declare const DropdownMenuItem: default_2.FC<DropdownMenuItemProps>;
 
@@ -1821,6 +1906,9 @@ export declare interface DropdownMenuItemProps {
     };
     /** Custom render function for the item */
     itemRender?: (item: DropdownMenuItemType, props: default_2.HTMLAttributes<HTMLElement>) => default_2.ReactElement;
+    itemLabelRender?: (item: DropdownMenuItemType & {
+        type: "item";
+    }, props: default_2.HTMLAttributes<HTMLElement>) => default_2.ReactElement;
     /** Additional props to pass to the item */
     itemProps?: default_2.HTMLAttributes<HTMLElement>;
     /** Class names from parent DropdownMenu */
@@ -1828,8 +1916,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 +1960,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 +1968,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 +2014,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 +2028,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 +2058,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 +2074,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 +2105,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 +2348,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 +2373,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;
@@ -3384,9 +3477,9 @@ export { Row }
 
 export { RowProps }
 
-export declare const ScrollArea: ({ children, className, classNames, orientation, fadeEdges, onScroll, }: ScrollAreaProps) => JSX.Element;
+export declare const ScrollArea: ({ children, className, classNames, orientation, fadeEdges, onScroll, styles, ...rest }: ScrollAreaProps) => JSX.Element;
 
-export declare interface ScrollAreaProps {
+export declare interface ScrollAreaProps extends Omit<ScrollArea_2.Root.Props, "onScroll"> {
     children: ReactNode;
     /**
      * Additional class name for the root component
@@ -3400,6 +3493,10 @@ export declare interface ScrollAreaProps {
          * Class name for the viewport element
          */
         viewport?: string;
+        /**
+         * Class name for the content element
+         */
+        content?: string;
         /**
          * Class name for the scrollbar element
          */
@@ -3409,6 +3506,27 @@ export declare interface ScrollAreaProps {
          */
         thumb?: string;
     };
+    /**
+     * Custom styles for each part of the scroll area
+     */
+    styles?: {
+        /**
+         * Styles for the viewport element
+         */
+        viewport?: React.CSSProperties;
+        /**
+         * Styles for the content element
+         */
+        content?: React.CSSProperties;
+        /**
+         * Styles for the scrollbar element
+         */
+        scrollbar?: React.CSSProperties;
+        /**
+         * Styles for the thumb element
+         */
+        thumb?: React.CSSProperties;
+    };
     /**
      * Orientation of the scrollbar
      * @default "vertical"
@@ -4086,6 +4204,58 @@ 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;
+    /**
+     * Custom render function for menu item labels
+     */
+    itemLabelRender?: (item: DropdownMenuItemType & {
+        type: "item";
+    }, 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";
 };