@bioturing/components 0.26.2 → 0.27.0

package/dist/index.d.ts

@@ -137,6 +137,7 @@ import { ModalFuncProps } from 'antd';
 import { ModalProps } from './Modal';
 import { ModalProps as ModalProps_3 } from 'antd/es/modal';
 import { ModalRef } from './functions';
+import { MoveValues } from 'react-use-resizable';
 import { notification } from 'antd';
 import { NotificationArgsProps } from 'antd';
 import { OptionFC } from 'rc-select/lib/Option';
@@ -269,6 +270,8 @@ export { AnchorProps }
 
 export declare const antdColorTokens: ColorTokens;
 
+export declare type AntdPlacement = PopoverProps_2["placement"];
+
 declare type AnyFunction = (...args: any[]) => any;
 
 declare type AnyObject = Record<PropertyKey, any>;
@@ -318,6 +321,15 @@ declare interface BaseFieldProps extends React.HTMLAttributes<HTMLDivElement> {
     colon?: boolean;
 }
 
+export declare type BaseUIAlign = "start" | "end" | "center";
+
+export declare interface BaseUIPlacement {
+    side: BaseUISide;
+    align: BaseUIAlign;
+}
+
+export declare type BaseUISide = "top" | "bottom" | "left" | "right";
+
 export declare const Breadcrumb: (({ className, items, noWrap, itemRender: outsideItemRender, ...rest }: BreadcrumbProps) => JSX.Element) & {
     Item: (props: BreadcrumbItemProps) => JSX.Element;
     Separator: (props: React.HTMLAttributes<HTMLSpanElement>) => JSX.Element;
@@ -337,6 +349,13 @@ export declare interface BreadcrumbProps<T extends AnyObject = AnyObject> extend
     itemRender?: (route: BreadcrumbItemType, params: T, routes: BreadcrumbItemType[], paths: string[]) => React.ReactNode;
 }
 
+/**
+ * Build Antd placement string from BaseUI side and align values
+ * @param placement - Object with side and align properties
+ * @returns Antd placement string
+ */
+export declare function buildAntdPlacement(placement: BaseUIPlacement): AntdPlacement;
+
 export declare const Button: (props: ButtonProps & {
     ref?: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>;
 }) => ReturnType<typeof ButtonInner>;
@@ -436,14 +455,14 @@ declare type Children = {
     children?: default_2.ReactNode;
 };
 
-export declare const ChoiceList: <M extends boolean = false>({ items, multiple, value, onChange, searchProps, }: ChoiceListProps<M>) => JSX.Element;
+export declare const ChoiceList: <M extends boolean = false>({ items, multiple, value, onChange, searchProps, className, ...rest }: ChoiceListProps<M>) => JSX.Element;
 
 export declare type ChoiceListItem = {
     label: React.ReactNode;
     value?: string;
 };
 
-export declare interface ChoiceListProps<M extends boolean = false> {
+export declare interface ChoiceListProps<M extends boolean = false> extends Omit<CommandProps, "value" | "onChange"> {
     items: ChoiceListItem[];
     multiple?: M;
     value?: M extends true ? string[] : string;
@@ -936,6 +955,48 @@ export { ColProps }
 
 declare type CommandFilter = (value: string, search: string, keywords?: string[]) => number;
 
+declare type CommandProps = Children & DivProps & {
+    /**
+     * Accessible label for this command menu. Not shown visibly.
+     */
+    label?: string;
+    /**
+     * Optionally set to `false` to turn off the automatic filtering and sorting.
+     * If `false`, you must conditionally render valid items based on the search query yourself.
+     */
+    shouldFilter?: boolean;
+    /**
+     * Custom filter function for whether each command menu item should matches the given search query.
+     * It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
+     * By default, uses the `command-score` library.
+     */
+    filter?: CommandFilter;
+    /**
+     * Optional default item value when it is initially rendered.
+     */
+    defaultValue?: string;
+    /**
+     * Optional controlled state of the selected command menu item.
+     */
+    value?: string;
+    /**
+     * Event handler called when the selected item of the menu changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Optionally set to `true` to turn on looping around when using the arrow keys.
+     */
+    loop?: boolean;
+    /**
+     * Optionally set to `true` to disable selection via pointer events.
+     */
+    disablePointerSelection?: boolean;
+    /**
+     * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
+     */
+    vimBindings?: boolean;
+};
+
 export declare type ComponentCategory = "Actions" | "General" | "Layout" | "Navigation" | "Data Entry" | "Data Display" | "Feedback" | "Overlay" | "Utility";
 
 /**
@@ -1128,6 +1189,15 @@ export declare const componentMetadata: {
         originalDocUrl: string;
         description: string;
     };
+    Resizable: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Utility";
+        packages: string[];
+        description: string;
+    };
     Radio: {
         name: string;
         link: string;
@@ -1818,6 +1888,8 @@ export declare const getColorsByTheme: <T extends ColorTokens>(colorsOrTokens: T
  */
 export declare const getComponentsByCategory: () => Record<ComponentCategory, ComponentMetadata[]>;
 
+export declare const getReactElementProp: <T>(el: React.ReactElement, propKey: string, defaultValue?: T) => T;
+
 /**
  * Get sequential chart colors for a specific palette and theme
  */
@@ -1935,7 +2007,7 @@ declare const MainCheckboxInner: ({ variant, className, ...props }: CheckboxProp
 
 declare const MainInputInner: (props: InputProps, ref: React.Ref<InputRef>) => JSX.Element;
 
-declare const MainSegmentedInner: <T>({ className, ...rest }: SegmentedProps<T>, ref: React.Ref<React.ComponentRef<typeof default_5>>) => JSX.Element;
+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;
 
@@ -2137,10 +2209,12 @@ export { Pagination }
 
 export { PaginationProps }
 
-export declare const parseAntdPlacement: (placement?: PopoverProps_2["placement"]) => {
-    placement: "top" | "bottom" | "left" | "right";
-    align: "start" | "end" | "center";
-};
+/**
+ * Parse Antd placement string into BaseUI side and align values
+ * @param placement - Antd placement string (e.g., "bottomLeft", "top", "rightTop")
+ * @returns Object with side and align properties for BaseUI components
+ */
+export declare function parseAntdPlacement(placement?: AntdPlacement): BaseUIPlacement;
 
 declare const PasswordInner: (props: PasswordProps, ref: React.Ref<InputRef>) => JSX.Element;
 
@@ -2336,7 +2410,7 @@ 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, }: 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, classNames, modal, closeOnClickOutside, onPlacementChange, }: PopupPanelProps) => JSX.Element;
 
 export declare interface PopupPanelProps extends Omit<React.ComponentPropsWithRef<"div">, "title" | "content" | "children"> {
     /** The trigger element that opens the popup panel */
@@ -2417,6 +2491,10 @@ export declare interface PopupPanelProps extends Omit<React.ComponentPropsWithRe
      * @default false
      */
     modal?: Popover_2.Root.Props["modal"];
+    /**
+     * Callback function when the placement changes
+     */
+    onPlacementChange?: (placement: PopoverProps_2["placement"]) => void;
 }
 
 declare enum PopupPanelSize {
@@ -2927,6 +3005,74 @@ export { RefSelectProps }
 
 declare type RefType<T extends FieldType> = T extends "input" ? InputRef : T extends "select" ? RefSelectProps_2 : never;
 
+export declare const Resizable: ({ children, resizable, handles, absolutePositioning, classNames, className: containerClassName, style: containerStyle, resetKey, maxWidth, maxHeight, minWidth, minHeight, onResize, maintainAspectRatio, ...rest }: ResizableProps) => JSX.Element;
+
+export declare interface ResizableProps extends WithRenderPropProps {
+    /**
+     * Single React element child that will be enhanced with resize handles
+     */
+    children: default_2.ReactNode;
+    /**
+     * Whether the component should be resizable
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * Configure which resize handles to show
+     * @default { bottom: true, right: true, left: true, top: true }
+     */
+    handles?: {
+        bottom?: boolean;
+        right?: boolean;
+        left?: boolean;
+        top?: boolean;
+    };
+    /**
+     * Whether to use absolute positioning for left handle resizing
+     * Set to true when used in absolutely positioned containers like PopupPanel
+     * @default false
+     */
+    absolutePositioning?: boolean;
+    /**
+     * Custom class names for different parts of the resizable component
+     */
+    classNames?: {
+        root?: string;
+        resizeHandle?: string;
+    };
+    /**
+     * Key to reset dimensions to current element size
+     * When this value changes, the component will recalculate its dimensions
+     * Similar to React's key prop pattern for forcing component resets
+     */
+    resetKey?: default_2.Key;
+    /**
+     * Maximum width the component can be resized to
+     */
+    maxWidth?: number;
+    /**
+     * Maximum height the component can be resized to
+     */
+    maxHeight?: number;
+    /**
+     * Minimum width the component can be resized to
+     */
+    minWidth?: number;
+    /**
+     * Minimum height the component can be resized to
+     */
+    minHeight?: number;
+    /**
+     * Callback fired during resize operations
+     */
+    onResize?: (values: MoveValues) => void;
+    /**
+     * Whether to maintain aspect ratio during resize
+     * @default false
+     */
+    maintainAspectRatio?: boolean;
+}
+
 /**
  * Resolves chart color tokens by replacing reference strings with actual values.
  * @returns Record of token names to resolved light/dark color objects
@@ -3038,23 +3184,23 @@ export { Space }
 
 export { SpaceProps }
 
-export declare const Spin: ({ indicator, size, ...rest }: SpinProps) => JSX.Element;
+export declare const Spin: ({ indicator, size, className, ...rest }: SpinProps) => JSX.Element;
 
 export declare type SpinProps = Omit<SpinProps_2, "size"> & {
     size?: "small" | "default" | "large" | number;
 };
 
 export declare const Split: FC<PropsWithChildren<SplitterProps>> & {
-    Panel: FC<SplitterPanelProps>;
+    Panel: ForwardRefExoticComponent<Omit<SplitterPanelProps, "ref"> & RefAttributes<HTMLElement>>;
 };
 
 export declare const Splitter: FC<PropsWithChildren<SplitterProps>> & {
-    Panel: FC<SplitterPanelProps>;
+    Panel: ForwardRefExoticComponent<Omit<SplitterPanelProps, "ref"> & RefAttributes<HTMLElement>>;
 };
 
 export declare type SplitterPanelProps = InternalPanelProps & {
-    children?: default_2.ReactNode | undefined;
-} & default_2.RefAttributes<HTMLDivElement> & {
+    children?: default_2.ReactNode;
+} & default_2.RefAttributes<HTMLElement> & {
     /**
      * Default size of the panel. Can be a percentage string, number, or CSS intrinsic sizing values
      */
@@ -3429,8 +3575,8 @@ declare type UniqueIdentifier = string | number;
 export { unstableSetRender }
 
 export declare const Upload: (({ showRemoveButton, className, fileList, children, ...restProps }: UploadProps) => JSX.Element) & {
-    Dragger: ({ children, uploadTitle, uploadDescription, itemRender, ...rest }: DraggerProps) => JSX.Element;
-    Item: ({ fileName, fileType, status, percent, removable, onRemove, extraActions, }: UploadItemProps_2) => JSX.Element;
+    Dragger: ({ children, uploadTitle, uploadDescription, itemRender, className, ...rest }: DraggerProps) => JSX.Element;
+    Item: ({ fileName, fileType, status, percent, removable, onRemove, extraActions, className, ...rest }: UploadItemProps_2) => JSX.Element;
 };
 
 export { UploadChangeParam }
@@ -3439,7 +3585,7 @@ export { UploadFile }
 
 export declare type UploadFileStatus = "error" | "done" | "uploading" | "removed" | "pending";
 
-export declare interface UploadItemProps {
+export declare interface UploadItemProps extends React.HTMLAttributes<HTMLDivElement> {
     fileName: string;
     fileType?: string;
     status?: UploadFileStatus;