@bioturing/components 0.31.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';
@@ -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
@@ -1089,9 +1094,11 @@ export declare interface ComboboxProps {
      * Function to extract keywords from the item for search filtering
      * @default (option) => [String(option.key), reactNodeToString(option.label)]
      */
-    getOptionKeywords?: (option: DropdownMenuItemType & {
-        type: "item";
-    }) => string[];
+    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;
@@ -1883,7 +1890,7 @@ export declare const DROPDOWN_COLLISION_AVOIDANCE: {
     readonly fallbackAxisSide: "none";
 };
 
-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 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;
@@ -1899,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 */
@@ -3467,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
@@ -3483,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
          */
@@ -3492,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"
@@ -4188,6 +4223,12 @@ declare interface UseDropdownMenuProps {
      * 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bioturing/components",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "type": "module",
   "module": "./dist/index.js",
   "main": "./dist/index.js",
@@ -31,7 +31,7 @@
     "rc-util": "^5.44.4",
     "react-use-resizable": "^0.2.0",
     "tailwind-merge": "^3.3.1",
-    "@bioturing/assets": "0.21.1"
+    "@bioturing/assets": "0.22.0"
   },
   "peerDependencies": {
     "antd": "^5.26.7",