@bioturing/components 0.18.0 → 0.20.0

package/dist/index.d.ts

@@ -71,6 +71,7 @@ import { default as default_8 } from 'antd/es/form/Form';
 import { default as default_9 } from 'antd/es/form/hooks/useFormInstance';
 import { Descriptions } from 'antd';
 import { DescriptionsProps } from 'antd';
+import { Dialog } from '@base-ui-components/react';
 import { DirectoryTreeProps as DirectoryTreeProps_2 } from 'antd/es/tree';
 import { Divider } from 'antd';
 import { DividerProps } from 'antd';
@@ -242,6 +243,7 @@ import { default as useApp } from 'antd/es/app/useApp';
 import { useForm } from 'antd/es/form/Form';
 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 { version } from 'antd';
 import { Watermark } from 'antd';
@@ -339,7 +341,7 @@ export declare const Button: (props: ButtonProps & {
     ref?: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>;
 }) => ReturnType<typeof ButtonInner>;
 
-declare const ButtonInner: ({ negativeMargin, type, size, variant, ...rest }: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => JSX.Element;
+declare const ButtonInner: ({ negativeMargin, type, size, variant, icon, ...rest }: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => JSX.Element;
 
 export declare interface ButtonProps extends ButtonProps_2 {
     /**
@@ -425,6 +427,25 @@ export declare interface CheckInfo<TreeDataType extends BasicDataNode = TreeData
     halfCheckedKeys?: Key[];
 }
 
+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 type ChoiceListItem = {
+    label: React.ReactNode;
+    value?: string;
+};
+
+export declare interface ChoiceListProps<M extends boolean = false> {
+    items: ChoiceListItem[];
+    multiple?: M;
+    value?: M extends true ? string[] : string;
+    onChange?: (value: M extends true ? string[] : string) => void;
+    searchProps?: React.ComponentProps<typeof pkg.Input>;
+}
+
 export declare interface ClassArray extends Array<ClassValue> {
 }
 
@@ -904,6 +925,8 @@ export declare type ColorTokenValue = {
 
 export { ColProps }
 
+declare type CommandFilter = (value: string, search: string, keywords?: string[]) => number;
+
 export declare type ComponentCategory = "Actions" | "General" | "Layout" | "Navigation" | "Data Entry" | "Data Display" | "Feedback" | "Overlay" | "Utility";
 
 /**
@@ -928,6 +951,14 @@ export declare type ComponentMetadata = {
 };
 
 export declare const componentMetadata: {
+    ChoiceList: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Data Entry";
+        description: string;
+    };
     DragDrop: {
         name: string;
         link: string;
@@ -1333,6 +1364,8 @@ export { Divider }
 
 export { DividerProps }
 
+declare type DivProps = WithRenderPropProps<"div">;
+
 export declare type DragData = unknown;
 
 /**
@@ -1523,7 +1556,7 @@ export { DrawerProps }
 
 export { Dropdown }
 
-export declare const DropdownMenu: ({ children, items, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, className, itemRender, classNames, }: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: ({ children, items, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, className, itemRender, classNames, size, showSearch, searchProps, }: DropdownMenuProps) => JSX.Element;
 
 export declare type DropdownMenuItemType = {
     type: "item";
@@ -1592,6 +1625,20 @@ export declare interface DropdownMenuProps {
      * Custom render function for menu items
      */
     itemRender?: (item: DropdownMenuItemType, props: React.HTMLAttributes<HTMLElement>) => React.ReactElement;
+    /**
+     * Whether to show search input
+     * @default false
+     */
+    showSearch?: boolean;
+    /**
+     * Size of the dropdown menu
+     * @default "auto"
+     */
+    size?: "auto" | keyof typeof PopupPanelSize;
+    /**
+     * Search placeholder
+     */
+    searchProps?: Omit<React.ComponentProps<typeof pkg.Input>, "size" | "ref">;
 }
 
 export { DropDownProps }
@@ -1616,6 +1663,8 @@ export declare interface DSRootProps extends ThemeProviderProps {
     appendClassesTo?: string | HTMLElement;
 }
 
+declare type ElementTypeToDOMType<T extends default_2.ElementType> = T extends keyof JSX_2.IntrinsicElements ? JSX_2.IntrinsicElements[T] extends default_2.DetailedHTMLProps<infer Props, infer Element> ? Element : never : never;
+
 export declare const Empty: ({ image, size, className, ...rest }: EmptyProps) => JSX.Element;
 
 export declare const EmptyIcon: React_2.FC<React_2.ComponentPropsWithRef<"svg">>;
@@ -1973,7 +2022,7 @@ export declare function moveTypingCursorToEnd(contentEditableElement: HTMLElemen
 export declare const Nav: {
     Item: <T extends HTMLElement>(props: NavItemProps & {
         ref?: React.Ref<T>;
-    }) => ReturnType<(<T_1 extends HTMLElement>({ icon, active, render, onClick, className, children, ...rest }: NavItemProps, ref: React.Ref<T_1>) => null)>;
+    }) => ReturnType<(<T_1 extends HTMLElement>({ icon, active, render, className, children, changeIconWeightOnActive, ...rest }: NavItemProps, ref: React.Ref<T_1>) => null)>;
     Heading: ({ children, className, ...rest }: NavHeadingProps) => JSX.Element;
     Group: ForwardRefExoticComponent<NavGroupProps & RefAttributes<HTMLDivElement>>;
 };
@@ -1995,13 +2044,31 @@ export declare interface NavHeadingProps extends default_2.HTMLAttributes<HTMLHe
 }
 
 export declare interface NavItemProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * The icon to display in the nav item
+     */
     icon?: default_2.ReactNode;
+    /**
+     * Whether the nav item is active
+     */
     active?: boolean;
+    /**
+     * The render prop to render the nav item
+     */
     render?: useRender.RenderProp<{
         active: boolean;
         icon?: default_2.ReactNode;
     }>;
+    /**
+     * The size of the nav item
+     * @default "medium"
+     */
     size?: "small" | "medium" | "large";
+    /**
+     * Whether to change the icon weight on active state
+     * @default true
+     */
+    changeIconWeightOnActive?: boolean;
 }
 
 export { notification }
@@ -2022,6 +2089,167 @@ declare const PasswordInner: (props: PasswordProps, ref: React.Ref<InputRef>) =>
 export declare interface PasswordProps extends PasswordProps_2 {
 }
 
+declare const pkg: default_2.ForwardRefExoticComponent<Children & Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    render?: useRender_2.RenderProp;
+    as?: "div";
+} & {
+    /**
+     * 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;
+} & default_2.RefAttributes<HTMLDivElement>> & {
+    List: default_2.ForwardRefExoticComponent<Children & Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        render?: useRender_2.RenderProp;
+        as?: "div";
+    } & {
+        /**
+         * Accessible label for this List of suggestions. Not shown visibly.
+         */
+        label?: string;
+    } & default_2.RefAttributes<HTMLDivElement>>;
+    Item: default_2.ForwardRefExoticComponent<Children & Omit<DivProps, "value" | "onSelect" | "disabled"> & {
+        /** Whether this item is currently disabled. */
+        disabled?: boolean;
+        /** Event handler for when this item is selected, either via click or keyboard selection. */
+        onSelect?: (value: string) => void;
+        /**
+         * A unique value for this item.
+         * If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you _must_ provide a stable, unique `value`.
+         */
+        value?: string;
+        /** Optional keywords to match against when filtering. */
+        keywords?: string[];
+        /** Whether this item is forcibly rendered regardless of filtering. */
+        forceMount?: boolean;
+    } & default_2.RefAttributes<HTMLDivElement>>;
+    Input: default_2.ForwardRefExoticComponent<Omit<WithRenderPropProps<"input">, "type" | "value" | "onChange"> & {
+        /**
+         * Optional controlled state for the value of the search input.
+         */
+        value?: string;
+        /**
+         * Event handler called when the search value changes.
+         */
+        onValueChange?: (search: string) => void;
+    } & default_2.RefAttributes<HTMLInputElement>>;
+    Group: default_2.ForwardRefExoticComponent<Children & Omit<DivProps, "value" | "heading"> & {
+        /** Optional heading to render for this group. */
+        heading?: default_2.ReactNode;
+        /** If no heading is provided, you must provide a value that is unique for this group. */
+        value?: string;
+        /** Whether this group is forcibly rendered regardless of filtering. */
+        forceMount?: boolean;
+    } & default_2.RefAttributes<HTMLDivElement>>;
+    Separator: default_2.ForwardRefExoticComponent<Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        render?: useRender_2.RenderProp;
+        as?: "div";
+    } & {
+        /** Whether this separator should always be rendered. Useful if you disable automatic filtering. */
+        alwaysRender?: boolean;
+    } & default_2.RefAttributes<HTMLDivElement>>;
+    Dialog: default_2.ForwardRefExoticComponent<Dialog.Root.Props & Children & Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        render?: useRender_2.RenderProp;
+        as?: "div";
+    } & {
+        /**
+         * 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;
+    } & {
+        /** Provide a className to the Dialog overlay. */
+        overlayClassName?: string;
+        /** Provide a className to the Dialog content. */
+        contentClassName?: string;
+        /** Provide a custom element the Dialog should portal into. */
+        container?: HTMLElement;
+    } & default_2.RefAttributes<HTMLDivElement>>;
+    Empty: default_2.ForwardRefExoticComponent<Children & Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        render?: useRender_2.RenderProp;
+        as?: "div";
+    } & default_2.RefAttributes<HTMLDivElement>>;
+    Loading: default_2.ForwardRefExoticComponent<Children & Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        render?: useRender_2.RenderProp;
+        as?: "div";
+    } & {
+        /** Estimated progress of loading asynchronous options. */
+        progress?: number;
+        /**
+         * Accessible label for this loading progressbar. Not shown visibly.
+         */
+        label?: string;
+    } & default_2.RefAttributes<HTMLDivElement>>;
+};
+
 export { Popconfirm }
 
 export { PopconfirmProps }
@@ -3190,6 +3418,13 @@ T | undefined,
 (value: T | ((prev: T | undefined) => T), ...args: K | []) => void
 ];
 
+/**
+ * Get CSS variables from the document
+ * @param variables CSS variable names
+ * @returns CSS variable values
+ */
+export declare const useCSSVariables: (variables: string | string[]) => Record<string, string>;
+
 export declare const useDS: () => {
     theme: "light" | "dark";
 };
@@ -3344,4 +3579,15 @@ declare type WithoutHrefProps<E extends ElementType = "button"> = IconButtonBase
     [K in keyof AnchorSpecificProps]?: never;
 };
 
+export declare const WithRenderProp: <T extends default_2.ElementType = "div">(props: WithRenderPropProps<T> & {
+    ref?: default_2.Ref<ElementTypeToDOMType<T>>;
+}) => ReturnType<typeof WithRenderPropInner>;
+
+declare const WithRenderPropInner: <T extends default_2.ElementType = "div">(props: WithRenderPropProps<T>, ref: default_2.ForwardedRef<T>) => null;
+
+export declare type WithRenderPropProps<T extends default_2.ElementType = "div"> = default_2.ComponentPropsWithoutRef<T> & {
+    render?: useRender.RenderProp;
+    as?: T;
+};
+
 export { }