@bioturing/components 0.27.0 → 0.29.1

package/dist/index.d.ts

@@ -248,6 +248,7 @@ import { useLayoutEffect } from 'react';
 import { useRender } from '@base-ui-components/react/use-render';
 import { useRender as useRender_2 } from '@base-ui-components/react';
 import { useWatch } from 'antd/es/form/Form';
+import { ValidateStatus } from 'antd/es/form/FormItem';
 import { version } from 'antd';
 import { Watermark } from 'antd';
 import { WatermarkProps } from 'antd';
@@ -433,7 +434,7 @@ export declare interface CheckboxProps extends CheckboxProps_2 {
      * Checkbox appearance variant
      * @default 'default'
      */
-    variant?: 'default' | 'outlined';
+    variant?: "default" | "outlined";
 }
 
 export { CheckboxRef }
@@ -455,19 +456,26 @@ declare type Children = {
     children?: default_2.ReactNode;
 };
 
-export declare const ChoiceList: <M extends boolean = false>({ items, multiple, value, onChange, searchProps, className, ...rest }: ChoiceListProps<M>) => JSX.Element;
+export declare const ChoiceList: <M extends boolean = false>({ items, multiple, value, defaultValue, onChange, searchProps, showSelectAll, className, placeholder, ...rest }: ChoiceListProps<M>) => JSX.Element;
 
 export declare type ChoiceListItem = {
     label: React.ReactNode;
     value?: string;
 };
 
-export declare interface ChoiceListProps<M extends boolean = false> extends Omit<CommandProps, "value" | "onChange"> {
+export declare interface ChoiceListProps<M extends boolean = false> extends Omit<CommandProps, "value" | "onChange" | "defaultValue"> {
     items: ChoiceListItem[];
     multiple?: M;
     value?: M extends true ? string[] : string;
+    defaultValue?: M extends true ? string[] : string;
     onChange?: (value: M extends true ? string[] : string) => void;
     searchProps?: React.ComponentProps<typeof pkg.Input>;
+    /**
+     * Show select all option when in multiple mode
+     * @default false
+     */
+    showSelectAll?: boolean;
+    placeholder?: string;
 }
 
 export declare interface ClassArray extends Array<ClassValue> {
@@ -953,6 +961,109 @@ export declare type ColorTokenValue = {
 
 export { ColProps }
 
+export declare const Combobox: default_2.ForwardRefExoticComponent<ComboboxProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface ComboboxOption {
+    value: string | number;
+    label: default_2.ReactNode;
+    disabled?: boolean;
+    icon?: default_2.ReactNode;
+}
+
+export declare interface ComboboxProps {
+    /** Array of options to be displayed in the combobox */
+    options?: ComboboxOption[];
+    /** Current value of the combobox */
+    value?: string | number | Array<string | number>;
+    /** Default value when uncontrolled */
+    defaultValue?: string | number | Array<string | number>;
+    /** Callback when value changes */
+    onChange?: (value: string | number | Array<string | number>) => void;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Whether the combobox is disabled */
+    disabled?: boolean;
+    /** Validation status */
+    status?: ValidateStatus;
+    /** Whether to allow clearing the selection */
+    allowClear?: boolean;
+    /** Whether to allow multiple selections */
+    multiple?: boolean;
+    /** Maximum number of tags to show */
+    maxTagCount?: number;
+    /** Whether to show search functionality */
+    showSearch?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Placement of the dropdown */
+    placement?: PopoverProps_2["placement"];
+    /** Custom className for the component */
+    className?: string;
+    /** Custom class names for different parts */
+    classNames?: {
+        trigger?: string;
+        input?: string;
+        option?: string;
+        optionIcon?: string;
+        optionText?: string;
+    };
+    /** Size of the combobox */
+    size?: "small" | "middle" | "large";
+    /** Loading state */
+    loading?: boolean;
+    /** Custom render for options */
+    optionRender?: (option: ComboboxOption, props: default_2.HTMLAttributes<HTMLElement>) => default_2.ReactElement;
+    /** Filter function for search */
+    filterOption?: boolean | ((input: string, option: ComboboxOption) => boolean);
+    /** Callback when search input changes */
+    onSearch?: (value: string) => void;
+    /** Custom dropdown render */
+    dropdownRender?: (menu: default_2.ReactElement) => default_2.ReactElement;
+    /** Custom clear icon */
+    clearIcon?: default_2.ReactNode;
+    /** Custom suffix icon */
+    suffixIcon?: default_2.ReactNode;
+    /**
+     * Props to pass to the dropdown menu
+     */
+    dropdownMenuProps?: DropdownMenuProps;
+    /**
+     * Props to pass to the combobox trigger
+     */
+    triggerProps?: default_2.ComponentPropsWithoutRef<typeof SelectTrigger>;
+    searchProps?: {
+        placeholder?: string;
+        onValueChange?: (value: string) => void;
+        value?: string;
+    };
+    /**
+     * Show selection summary instead of individual tags when multiple
+     * @default false
+     */
+    showSelectionSummary?: boolean;
+    /**
+     * Render function for the selection summary in multiple case
+     * @default (selectedValues) => `${selectedValues.length} items selected`
+     */
+    selectionSummaryRender?: (selectedValues: Array<string | number>) => default_2.ReactNode;
+    /**
+     * Show select all option when in multiple mode
+     * @default false
+     */
+    showSelectAll?: boolean;
+    /**
+     * Render function for the select all option
+     */
+    selectAllRender?: (props: {
+        onSelectAll: () => void;
+        onDeselectAll: () => void;
+        checked: boolean;
+        indeterminate: boolean;
+    }) => default_2.ReactNode;
+}
+
 declare type CommandFilter = (value: string, search: string, keywords?: string[]) => number;
 
 declare type CommandProps = Children & DivProps & {
@@ -1297,6 +1408,15 @@ export declare const componentMetadata: {
         originalDocUrl: string;
         description: string;
     };
+    Combobox: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Data Entry";
+        packages: string[];
+        description: string;
+    };
     ColorSelect: {
         name: string;
         link: string;
@@ -1427,7 +1547,7 @@ export { Descriptions }
 
 export { DescriptionsProps }
 
-declare const DirectoryTreeInner: <T extends DataNode = DataNode>(props: DirectoryTreeProps<T>, ref: React.Ref<React.ComponentRef<typeof default_7<T>>>) => JSX.Element;
+declare const DirectoryTreeInner: <T extends DataNode = TreeDataNode>(props: DirectoryTreeProps<T>, ref: React.Ref<React.ComponentRef<typeof default_7<T>>>) => JSX.Element;
 
 export declare interface DirectoryTreeProps<T extends DataNode = TreeDataNode> extends Omit<DirectoryTreeProps_2<T>, "treeData" | "expandedKeys" | "defaultExpandedKeys" | "onExpand" | "checkedKeys" | "defaultCheckedKeys" | "onCheck" | "draggable"> {
     treeData?: T[];
@@ -1667,26 +1787,121 @@ 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, }: DropdownMenuProps) => JSX.Element;
+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, }: DropdownMenuProps) => JSX.Element;
+
+export declare const DropdownMenuItem: default_2.FC<DropdownMenuItemProps>;
+
+export declare interface DropdownMenuItemProps {
+    /** The menu item data */
+    item: DropdownMenuItemType & {
+        type: "item";
+    };
+    /** Custom render function for the item */
+    itemRender?: (item: DropdownMenuItemType, 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 */
+    classNames?: {
+        item?: string;
+        itemIcon?: string;
+        itemText?: string;
+    };
+    onSelect?: () => void;
+    /**
+     * Whether the menu item is in a combobox
+     */
+    inCombobox?: boolean;
+    /**
+     * Whether the menu item is in a menu
+     */
+    renderAsNativeElement?: boolean;
+    /**
+     * Whether the menu item is selected (for combobox)
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether to show checkbox (only for decoration purpose)
+     */
+    showCheckbox?: boolean;
+    /**
+     * Whether the menu item checkbox is indeterminate (for combobox)
+     * @default false
+     */
+    indeterminate?: boolean;
+}
 
 export declare type DropdownMenuItemType = {
+    /**
+     * The type of the menu item
+     */
     type: "item";
+    /**
+     * The label of the menu item
+     */
     label?: React.ReactNode;
+    /**
+     * Whether the menu item is disabled
+     */
     disabled?: boolean;
+    /**
+     * The icon of the menu item
+     */
     icon?: React.ReactNode;
+    /**
+     * The key of the menu item
+     */
     key: React.Key;
+    /**
+     * The onClick event handler of the menu item
+     */
     onClick?: React.HTMLAttributes<HTMLElement>["onClick"];
+    /**
+     * The onMouseEnter event handler of the menu item
+     */
     onMouseEnter?: React.HTMLAttributes<HTMLElement>["onMouseEnter"];
+    /**
+     * The onMouseLeave event handler of the menu item
+     */
     onMouseLeave?: React.HTMLAttributes<HTMLElement>["onMouseLeave"];
+    /**
+     * The onMouseOver event handler of the menu item
+     */
     onMouseOver?: React.HTMLAttributes<HTMLElement>["onMouseOver"];
+    /**
+     * The onMouseOut event handler of the menu item
+     */
     onMouseOut?: React.HTMLAttributes<HTMLElement>["onMouseOut"];
+    /**
+     * The className of the menu item
+     */
+    className?: string;
+    /**
+     * Whether the menu item is a danger item
+     */
     danger?: boolean;
+    /**
+     * The ref of the menu item
+     */
     ref?: React.Ref<HTMLElement>;
 } | {
+    /**
+     * The type of the menu item
+     */
     type: "divider";
 } | {
+    /**
+     * The type of the menu item
+     */
     type: "header";
+    /**
+     * The title of the menu item
+     */
     title?: React.ReactNode;
+    /**
+     * The className of the menu item
+     */
+    className?: string;
 };
 
 export declare interface DropdownMenuProps {
@@ -1750,6 +1965,37 @@ export declare interface DropdownMenuProps {
      * Search placeholder
      */
     searchProps?: Omit<React.ComponentProps<typeof pkg.Input>, "size" | "ref">;
+    /**
+     * Whether to match the width of the popup with the trigger
+     * @default false
+     */
+    popupMatchTriggerWidth?: boolean;
+    /**
+     * Content to display before the list
+     */
+    beforeList?: React.ReactNode;
+    /**
+     * 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;
 }
 
 export { DropDownProps }
@@ -2009,11 +2255,11 @@ declare const MainInputInner: (props: InputProps, ref: React.Ref<InputRef>) => J
 
 declare const MainSegmentedInner: <T>(props: SegmentedProps<T>, ref: React.Ref<React.ComponentRef<typeof default_5>>) => JSX.Element;
 
-declare const MainSelectInner: <ValueType = unknown, OptionType extends SelectBaseOptionType | SelectDefaultOptionType = SelectDefaultOptionType>({ mode, className, open: openProp, defaultOpen, onOpenChange, popupClassName, onDropdownVisibleChange, enhancePositioner, getPopupContainer, popupSize, popupRender, dropdownRender, classNames, styles, ...rest }: SelectProps<ValueType, OptionType>, ref: default_2.Ref<default_2.ComponentRef<typeof default_3>>) => JSX.Element;
+declare const MainSelectInner: <ValueType = unknown, OptionType extends SelectBaseOptionType | SelectDefaultOptionType = SelectDefaultOptionType>({ mode, className, open: openProp, defaultOpen, onOpenChange, popupClassName, onDropdownVisibleChange, enhancePositioner, getPopupContainer, popupSize, popupRender, dropdownRender, classNames, styles, showSelectionSummary, selectionSummaryRender, value: valueProp, onChange: onChangeProp, defaultValue, showSelectAll, selectAllRender, options, ...rest }: SelectProps<ValueType, OptionType>, ref: default_2.Ref<default_2.ComponentRef<typeof default_3>>) => JSX.Element;
 
 declare const MainSwitchInner: ({ ...rest }: SwitchProps, ref: React.Ref<React.ComponentRef<typeof default_4>>) => JSX.Element;
 
-declare const MainTreeInner: <T extends DataNode = DataNode>(props: TreeProps<T>, ref: React.Ref<React.ComponentRef<typeof default_7<T>>>) => JSX.Element;
+declare const MainTreeInner: <T extends DataNode = TreeDataNode>(props: TreeProps<T>, ref: React.Ref<React.ComponentRef<typeof default_7<T>>>) => JSX.Element;
 
 export { MappingAlgorithm }
 
@@ -2410,9 +2656,9 @@ export declare const POPUP_COLLISION_AVOIDANCE: {
     readonly fallbackAxisSide: "end";
 };
 
-export declare const PopupPanel: ({ children, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, content, title, trigger, className, anchor, beforeCloseButton, afterCloseButton, afterTitle, size, footer, defaultOpen, resizable, classNames, modal, closeOnClickOutside, onPlacementChange, }: PopupPanelProps) => JSX.Element;
+export declare const PopupPanel: ({ children, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, content, title, trigger, className, anchor, beforeCloseButton, afterCloseButton, afterTitle, size, footer, defaultOpen, resizable, draggable, maintainAspectRatio, classNames, modal, closeOnClickOutside, onPlacementChange, ...rest }: PopupPanelProps) => JSX.Element;
 
-export declare interface PopupPanelProps extends Omit<React.ComponentPropsWithRef<"div">, "title" | "content" | "children"> {
+export declare interface PopupPanelProps extends Omit<React.ComponentPropsWithRef<"div">, "title" | "content" | "children">, Omit<Popover_2.Root.Props, "children"> {
     /** The trigger element that opens the popup panel */
     children?: React.ComponentProps<typeof Popover_2.Trigger>["render"];
     /** Placement of the popup panel relative to its trigger */
@@ -2467,6 +2713,17 @@ export declare interface PopupPanelProps extends Omit<React.ComponentPropsWithRe
      * @default false
      */
     resizable?: boolean;
+    /**
+     * Whether the panel should be draggable
+     * @default false
+     */
+    draggable?: boolean;
+    /**
+     * Whether to maintain aspect ratio when resizing
+     * Only applies when resizable is true
+     * @default false
+     */
+    maintainAspectRatio?: boolean;
     /**
      * Custom class names for different parts of the popup panel
      * @default {}
@@ -2505,7 +2762,8 @@ declare enum PopupPanelSize {
     xlarge = "840px"
 }
 
-export declare const processTreeData: <T extends DataNode = DataNode>(nodes: T[] | undefined, expandedOriginalKeys: Set<Key>, parentKeyPrefix: string, keyMap: Map<Key, Key>) => T[] | undefined;
+export declare const processTreeData: <T extends DataNode = DataNode>(nodes: T[] | undefined, expandedOriginalKeys: Set<Key>, // Use Set for faster lookups
+parentKeyPrefix: string, keyMap: Map<Key, Key>) => T[] | undefined;
 
 export { Progress }
 
@@ -3087,7 +3345,7 @@ export { Row }
 
 export { RowProps }
 
-export declare const ScrollArea: ({ children, className, classNames, orientation, }: ScrollAreaProps) => JSX.Element;
+export declare const ScrollArea: ({ children, className, classNames, orientation, fadeEdges, onScroll, }: ScrollAreaProps) => JSX.Element;
 
 export declare interface ScrollAreaProps {
     children: ReactNode;
@@ -3117,6 +3375,15 @@ export declare interface ScrollAreaProps {
      * @default "vertical"
      */
     orientation?: "vertical" | "horizontal";
+    /**
+     * Enable fade-out effect at scrollable edges
+     * @default false
+     */
+    fadeEdges?: boolean;
+    /**
+     * Callback fired when the scroll position changes
+     */
+    onScroll?: (event: Event) => void;
 }
 
 declare const SearchInner: ({ enterButton, onSearch, prefix, onPressEnter, onClear, loading, ...rest }: SearchProps, ref: React.Ref<InputRef>) => JSX.Element;
@@ -3158,8 +3425,75 @@ export declare interface SelectProps<ValueType = unknown, OptionType extends Sel
      * Will be ignored if enhancePositioner is false
      */
     popupSize?: string | number | PopupPanelSize;
+    /**
+     * Show selection summary instead of tags in multiple case
+     * @default false
+     */
+    showSelectionSummary?: boolean;
+    /**
+     * Render function for the selection summary in multiple case
+     * @default (value) => `${value.length} items selected`
+     */
+    selectionSummaryRender?: (value: ValueType) => default_2.ReactNode;
+    /**
+     * Show select all option when in multiple mode
+     * @default false
+     */
+    showSelectAll?: boolean;
+    /**
+     * Render function for the select all option
+     */
+    selectAllRender?: (props: {
+        onClick: () => void;
+        checked: CheckboxProps["checked"];
+        indeterminate: CheckboxProps["indeterminate"];
+    }) => default_2.ReactNode;
 }
 
+export declare const SelectTrigger: default_2.ForwardRefExoticComponent<SelectTriggerProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface SelectTriggerProps extends Omit<WithRenderPropProps<"button", SelectTriggerState>, "value" | "prefix"> {
+    /** Size variant */
+    size?: "small" | "middle" | "large";
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Whether the dropdown/popup is open */
+    open?: boolean;
+    /** Validation status */
+    status?: ValidateStatus;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Current value/content to display */
+    value?: default_2.ReactNode;
+    /** Prefix content to display before the value (e.g., icon) */
+    prefix?: default_2.ReactNode;
+    /** Whether to show clear button when there's a value */
+    allowClear?: boolean;
+    /** Custom suffix icon (arrow icon) */
+    suffixIcon?: default_2.ReactNode;
+    /** Custom clear icon */
+    clearIcon?: default_2.ReactNode;
+    /** Clear handler */
+    onClear?: () => void;
+    /** Open state change handler */
+    onOpenChange?: (open: boolean) => void;
+    /** Custom class names */
+    classNames?: {
+        trigger?: string;
+        content?: string;
+        suffix?: string;
+        placeholder?: string;
+        value?: string;
+    };
+}
+
+export declare type SelectTriggerState = {
+    disabled: boolean;
+    open: boolean;
+    hasValue: boolean;
+    size: "small" | "middle" | "large";
+};
+
 export declare const SEQUENTIAL_PALETTE_NAMES: readonly ["YlOrBr", "YlOrRd", "OrRd", "PuRd", "RdPu", "BuPu", "GnBu", "PuBu", "YlGnBu", "PuBuGn", "BuGn", "YlGn"];
 
 export declare const SEQUENTIAL_PALETTES: Record<SequentialPaletteName, Record<Theme, string[]>>;
@@ -3681,6 +4015,10 @@ T | undefined,
  */
 export declare const useCSSVariables: (variables: string | string[]) => Record<string, string>;
 
+export declare function useDraggable(enabled?: boolean): {
+    ref: (element: HTMLElement | null) => () => void;
+};
+
 export declare const useDS: () => {
     theme: "light" | "dark";
 };
@@ -3695,6 +4033,11 @@ export declare const useGetPrefixCls: () => {
     getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
 };
 
+export declare function useHover<T extends HTMLElement>(): [
+(node: T) => void,
+boolean
+];
+
 export declare function useLatestRef<T>(value: T): RefObject<T>;
 
 export declare const useMessage: () => MessageInstance;
@@ -3829,7 +4172,7 @@ export declare const WithRenderProp: <T extends default_2.ElementType = "div", S
 
 declare const WithRenderPropInner: <T extends default_2.ElementType = "div", State extends Record<string, unknown> = Record<string, unknown>>(props: WithRenderPropProps<T, State>, ref: default_2.ForwardedRef<T>) => null;
 
-export declare type WithRenderPropProps<T extends default_2.ElementType = "div", State extends Record<string, unknown> = Record<string, unknown>> = default_2.ComponentPropsWithoutRef<T> & {
+export declare type WithRenderPropProps<T extends default_2.ElementType = "div", State extends Record<string | number | symbol, unknown> = Record<string, unknown>> = default_2.ComponentPropsWithoutRef<T> & {
     render?: useRender.RenderProp<State>;
     as?: T;
     state?: State;