@mezzanine-ui/react 1.0.0-beta.2 → 1.0.0-beta.3

package/AutoComplete/useAutoCompleteKeyboard.d.ts

@@ -0,0 +1,31 @@
+import { Dispatch, KeyboardEvent, KeyboardEventHandler, Ref, SetStateAction } from 'react';
+import { DropdownOption } from '@mezzanine-ui/core/dropdown/dropdown';
+import { SelectValue } from '../Select/typings';
+type UseAutoCompleteKeyboardParams = {
+    activeIndex: number | null;
+    addable: boolean;
+    createSeparators: string[];
+    dropdownOptions: DropdownOption[];
+    handleBulkCreate: (texts: string[]) => void;
+    handleDropdownSelect: (option: DropdownOption) => void;
+    inputRef?: Ref<HTMLInputElement>;
+    inputPropsOnKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    isMultiple: boolean;
+    mode: 'single' | 'multiple';
+    onFocus: (focus: boolean) => void;
+    open: boolean;
+    processBulkCreate: (text: string) => string[];
+    searchText: string;
+    searchTextExistWithoutOption: boolean;
+    setActiveIndex: Dispatch<SetStateAction<number | null>>;
+    setListboxHasVisualFocus: (focus: boolean) => void;
+    setInsertText: (value: string) => void;
+    setSearchText: (value: string) => void;
+    toggleOpen: (newOpen: boolean | ((prev: boolean) => boolean)) => void;
+    value: SelectValue[] | SelectValue | null | undefined;
+    wrappedOnChange: (chooseOption: SelectValue | null) => SelectValue[] | SelectValue | null;
+};
+export declare function useAutoCompleteKeyboard({ activeIndex, addable, createSeparators, dropdownOptions, handleBulkCreate, handleDropdownSelect, inputPropsOnKeyDown, inputRef, mode, onFocus, open, processBulkCreate, searchText, searchTextExistWithoutOption, setActiveIndex, setInsertText, setListboxHasVisualFocus, setSearchText, toggleOpen, value, wrappedOnChange, }: UseAutoCompleteKeyboardParams): {
+    handleInputKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+};
+export {};

package/AutoComplete/useAutoCompleteKeyboard.js

@@ -0,0 +1,149 @@
+import { useCallback } from 'react';
+import { createDropdownKeydownHandler } from '../Dropdown/dropdownKeydownHandler.js';
+
+function isMultipleValue(value) {
+    return Array.isArray(value);
+}
+function useAutoCompleteKeyboard({ activeIndex, addable, createSeparators, dropdownOptions, handleBulkCreate, handleDropdownSelect, inputPropsOnKeyDown, inputRef, mode, onFocus, open, processBulkCreate, searchText, searchTextExistWithoutOption, setActiveIndex, setInsertText, setListboxHasVisualFocus, setSearchText, toggleOpen, value, wrappedOnChange, }) {
+    const handleKeyDown = useCallback((e) => createDropdownKeydownHandler({
+        activeIndex,
+        onEnterSelect: (option) => {
+            handleDropdownSelect(option);
+            if (mode === 'single') {
+                toggleOpen(false);
+                onFocus(false);
+            }
+        },
+        onEscape: () => {
+            var _a;
+            toggleOpen(false);
+            setActiveIndex(null);
+            setListboxHasVisualFocus(false);
+            if (inputRef && typeof inputRef !== 'function') {
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            }
+        },
+        open,
+        options: dropdownOptions,
+        setActiveIndex,
+        setListboxHasVisualFocus,
+        setOpen: (newOpen) => {
+            if (newOpen && !open) {
+                toggleOpen(true);
+            }
+            else if (!newOpen && open) {
+                toggleOpen(false);
+            }
+        },
+    })(e), [
+        activeIndex,
+        dropdownOptions,
+        handleDropdownSelect,
+        inputRef,
+        mode,
+        onFocus,
+        open,
+        setActiveIndex,
+        setListboxHasVisualFocus,
+        toggleOpen,
+    ]);
+    const handleEnterKey = useCallback((e) => {
+        if (e.key === 'Enter' && open) {
+            if (addable && searchText) {
+                const hasSeparator = createSeparators.some((sep) => searchText.includes(sep));
+                if (hasSeparator && mode === 'multiple') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const textsToCreate = processBulkCreate(searchText);
+                    if (textsToCreate.length > 0) {
+                        handleBulkCreate(textsToCreate);
+                        setSearchText('');
+                        setInsertText('');
+                        return true;
+                    }
+                }
+                if (!hasSeparator && searchTextExistWithoutOption) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const textsToCreate = processBulkCreate(searchText);
+                    if (textsToCreate.length > 0) {
+                        handleBulkCreate(textsToCreate);
+                        setSearchText('');
+                        setInsertText('');
+                    }
+                    return true;
+                }
+            }
+            if (activeIndex === null && dropdownOptions.length > 0) {
+                e.preventDefault();
+                e.stopPropagation();
+                const optionToSelect = dropdownOptions[0];
+                if (optionToSelect) {
+                    handleDropdownSelect(optionToSelect);
+                    if (mode === 'single') {
+                        toggleOpen(false);
+                        onFocus(false);
+                    }
+                }
+                return true;
+            }
+        }
+        return false;
+    }, [
+        activeIndex,
+        addable,
+        createSeparators,
+        dropdownOptions,
+        handleBulkCreate,
+        handleDropdownSelect,
+        mode,
+        onFocus,
+        open,
+        processBulkCreate,
+        searchText,
+        searchTextExistWithoutOption,
+        setInsertText,
+        setSearchText,
+        toggleOpen,
+    ]);
+    const handleInputKeyDown = useCallback((e) => {
+        if (handleEnterKey(e))
+            return;
+        if (mode === 'multiple' &&
+            isMultipleValue(value) &&
+            value.length > 0 &&
+            !searchText) {
+            if (e.key === 'Backspace') {
+                e.preventDefault();
+                const lastValue = value[value.length - 1];
+                if (lastValue) {
+                    wrappedOnChange(lastValue);
+                }
+                return;
+            }
+            if (e.key === 'Delete') {
+                e.preventDefault();
+                const firstValue = value[0];
+                if (firstValue) {
+                    wrappedOnChange(firstValue);
+                }
+                return;
+            }
+        }
+        handleKeyDown(e);
+        inputPropsOnKeyDown === null || inputPropsOnKeyDown === void 0 ? void 0 : inputPropsOnKeyDown(e);
+    }, [
+        handleEnterKey,
+        handleKeyDown,
+        inputPropsOnKeyDown,
+        mode,
+        searchText,
+        value,
+        wrappedOnChange,
+    ]);
+    return {
+        handleInputKeyDown,
+    };
+}
+
+export { useAutoCompleteKeyboard };

package/AutoComplete/useAutoCompleteSearch.d.ts

@@ -0,0 +1,16 @@
+type UseAutoCompleteSearchParams = {
+    asyncData: boolean;
+    loading: boolean;
+    onSearch?: (input: string) => void | Promise<void>;
+    searchDebounceTime: number;
+};
+type RunSearchOptions = {
+    immediate?: boolean;
+};
+export declare function useAutoCompleteSearch({ asyncData, loading, onSearch, searchDebounceTime, }: UseAutoCompleteSearchParams): {
+    cancelSearch: () => void;
+    internalLoading: boolean;
+    isLoading: boolean;
+    runSearch: (searchValue: string, options?: RunSearchOptions) => void;
+};
+export {};

package/AutoComplete/useAutoCompleteSearch.js

@@ -0,0 +1,69 @@
+import debounce from 'lodash/debounce';
+import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+
+function useAutoCompleteSearch({ asyncData, loading, onSearch, searchDebounceTime, }) {
+    const [internalLoading, setInternalLoading] = useState(false);
+    const requestSeqRef = useRef(0);
+    const executeSearch = useCallback((searchValue) => {
+        if (!onSearch) {
+            if (asyncData)
+                setInternalLoading(false);
+            return;
+        }
+        if (!asyncData) {
+            onSearch(searchValue);
+            return;
+        }
+        const currentSeq = requestSeqRef.current + 1;
+        requestSeqRef.current = currentSeq;
+        setInternalLoading(true);
+        try {
+            const result = onSearch(searchValue);
+            const finalize = () => {
+                if (requestSeqRef.current === currentSeq) {
+                    setInternalLoading(false);
+                }
+            };
+            if (result instanceof Promise) {
+                result.finally(finalize);
+            }
+            else {
+                finalize();
+            }
+        }
+        catch (error) {
+            // Handle synchronous errors that occur before Promise creation
+            // Reset loading state to prevent UI from being stuck in loading state
+            if (requestSeqRef.current === currentSeq) {
+                setInternalLoading(false);
+            }
+            // Re-throw error to allow calling code to handle it
+            // This is necessary because the error occurred synchronously and the caller
+            // should be aware of it (e.g., for error logging or user notification)
+            throw error;
+        }
+    }, [asyncData, onSearch]);
+    const debouncedSearch = useMemo(() => debounce((value) => executeSearch(value), searchDebounceTime), [executeSearch, searchDebounceTime]);
+    useEffect(() => () => debouncedSearch.cancel(), [debouncedSearch]);
+    const runSearch = useCallback((searchValue, options) => {
+        if (options === null || options === void 0 ? void 0 : options.immediate) {
+            debouncedSearch.cancel();
+            executeSearch(searchValue);
+            return;
+        }
+        if (!searchValue) {
+            debouncedSearch.cancel();
+            executeSearch(searchValue);
+            return;
+        }
+        debouncedSearch(searchValue);
+    }, [debouncedSearch, executeSearch]);
+    return {
+        cancelSearch: debouncedSearch.cancel,
+        internalLoading,
+        isLoading: asyncData ? internalLoading || loading : loading,
+        runSearch,
+    };
+}
+
+export { useAutoCompleteSearch };

package/AutoComplete/useCreationTracker.d.ts

@@ -0,0 +1,17 @@
+import { SelectValue } from '../Select/typings';
+type CreationTracker = {
+    newlyCreatedIds: Set<string>;
+    unselectedCreatedIds: Set<string>;
+    allCreatedIds: Set<string>;
+};
+export declare function useCreationTracker(): {
+    creationTrackerRef: import("react").RefObject<CreationTracker>;
+    filterUnselected: (options: SelectValue[]) => SelectValue<string>[];
+    clearUnselected: () => void;
+    markCreated: (id: string) => void;
+    clearNewlyCreated: (ids?: string[]) => void;
+    markUnselected: (ids: string[]) => void;
+    isNewlyCreated: (id: string) => boolean;
+    isCreated: (id: string) => boolean;
+};
+export {};

package/AutoComplete/useCreationTracker.js

@@ -0,0 +1,47 @@
+import { useRef, useCallback } from 'react';
+
+function useCreationTracker() {
+    const creationTrackerRef = useRef({
+        newlyCreatedIds: new Set(),
+        unselectedCreatedIds: new Set(),
+        allCreatedIds: new Set(),
+    });
+    const filterUnselected = useCallback((options) => options.filter((opt) => !creationTrackerRef.current.unselectedCreatedIds.has(opt.id)), [creationTrackerRef]);
+    const clearUnselected = useCallback(() => {
+        creationTrackerRef.current.unselectedCreatedIds.clear();
+    }, []);
+    const clearNewlyCreated = useCallback((ids) => {
+        if (!ids) {
+            creationTrackerRef.current.newlyCreatedIds.clear();
+            return;
+        }
+        ids.forEach((id) => {
+            creationTrackerRef.current.newlyCreatedIds.delete(id);
+        });
+    }, []);
+    const markCreated = useCallback((id) => {
+        creationTrackerRef.current.newlyCreatedIds.add(id);
+        creationTrackerRef.current.allCreatedIds.add(id);
+    }, []);
+    const markUnselected = useCallback((ids) => {
+        ids.forEach((id) => {
+            if (creationTrackerRef.current.allCreatedIds.has(id)) {
+                creationTrackerRef.current.unselectedCreatedIds.add(id);
+            }
+        });
+    }, []);
+    const isNewlyCreated = useCallback((id) => creationTrackerRef.current.newlyCreatedIds.has(id), []);
+    const isCreated = useCallback((id) => creationTrackerRef.current.allCreatedIds.has(id), []);
+    return {
+        creationTrackerRef,
+        filterUnselected,
+        clearUnselected,
+        markCreated,
+        clearNewlyCreated,
+        markUnselected,
+        isNewlyCreated,
+        isCreated,
+    };
+}
+
+export { useCreationTracker };

package/Button/Button.js

@@ -4,18 +4,16 @@ import { forwardRef } from 'react';
 import { SpinnerIcon } from '@mezzanine-ui/icons';
 import { buttonClasses } from '@mezzanine-ui/core/button';
 import Icon from '../Icon/Icon.js';
+import Tooltip from '../Tooltip/Tooltip.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` button.
  */
 const Button = forwardRef(function Button(props, ref) {
-    const { children, className, component: Component = 'button', disabled = false, icon, loading = false, onClick, size = 'main', variant = 'base-primary', ...rest } = props;
-    // 判斷是否為 icon-only 模式
-    const isIconOnly = (icon === null || icon === void 0 ? void 0 : icon.position) === 'icon-only' || (!!icon && !children);
-    // 判斷 icon 位置
-    const hasLeadingIcon = (icon === null || icon === void 0 ? void 0 : icon.position) === 'leading' && !isIconOnly;
-    const hasTrailingIcon = (icon === null || icon === void 0 ? void 0 : icon.position) === 'trailing' && !isIconOnly;
+    const { children, className, component: Component = 'button', disabled = false, disabledTooltip = false, icon, iconType, loading = false, onClick, size = 'main', tooltipPosition = 'bottom', variant = 'base-primary', ...rest } = props;
+    const isIconOnly = iconType === 'icon-only';
+    const showTooltip = isIconOnly && !disabledTooltip && Boolean(children);
     // Loading 狀態下的 icon
     const loadingIcon = jsx(Icon, { icon: SpinnerIcon, spin: true, size: 16 });
     // 渲染 icon 內容
@@ -24,21 +22,25 @@ const Button = forwardRef(function Button(props, ref) {
             return loadingIcon;
         }
         if (icon) {
-            return jsx(Icon, { icon: icon.src, size: 16 });
+            return jsx(Icon, { icon: icon, size: 16 });
         }
         return null;
     };
-    return (jsx(Component, { ...rest, ref: ref, "aria-disabled": disabled, className: cx(buttonClasses.host, buttonClasses.variant(variant), buttonClasses.size(size), {
+    const buttonElement = (tooltipProps) => (jsx(Component, { ...rest, ref: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.ref) || ref, "aria-disabled": disabled, className: cx(buttonClasses.host, buttonClasses.variant(variant), buttonClasses.size(size), {
             [buttonClasses.disabled]: disabled,
             [buttonClasses.loading]: loading,
-            [buttonClasses.iconLeading]: hasLeadingIcon,
-            [buttonClasses.iconTrailing]: hasTrailingIcon,
+            [buttonClasses.iconLeading]: iconType === 'leading',
+            [buttonClasses.iconTrailing]: iconType === 'trailing',
             [buttonClasses.iconOnly]: isIconOnly,
         }, className), disabled: disabled, onClick: (event) => {
             if (!disabled && !loading && onClick) {
                 onClick(event);
             }
-        }, children: loading ? (renderIcon()) : (jsxs(Fragment, { children: [(hasLeadingIcon || isIconOnly) && renderIcon(), !isIconOnly && children, hasTrailingIcon && renderIcon()] })) }));
+        }, onMouseEnter: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.onMouseEnter, onMouseLeave: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.onMouseLeave, children: loading ? (renderIcon()) : (jsxs(Fragment, { children: [(iconType === 'leading' || isIconOnly) && renderIcon(), !isIconOnly && children, iconType === 'trailing' && renderIcon()] })) }));
+    if (showTooltip) {
+        return (jsx(Tooltip, { options: { placement: tooltipPosition }, title: children, children: (tooltipProps) => buttonElement(tooltipProps) }));
+    }
+    return buttonElement();
 });
 
 export { Button as default };

package/Button/index.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithoutRef, ReactElement, RefAttributes } from 'react';
 import { ButtonComponent, ButtonPropsBase } from './typings';
 import { ButtonProps } from './Button';
-export type { ButtonIcon, ButtonIconPosition, ButtonGroupOrientation, ButtonSize, ButtonVariant, } from '@mezzanine-ui/core/button';
+export type { ButtonIconType, ButtonGroupOrientation, ButtonSize, ButtonVariant, } from '@mezzanine-ui/core/button';
 export { default as ButtonGroup } from './ButtonGroup';
 export type { ButtonGroupChild, ButtonGroupProps } from './ButtonGroup';
 export type { ButtonComponent, ButtonProps, ButtonPropsBase };

package/Button/typings.d.ts

@@ -1,5 +1,7 @@
-import { JSXElementConstructor } from 'react';
-import { ButtonIcon, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
+import { JSXElementConstructor, ReactNode } from 'react';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { ButtonIconType, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
+import { PopperPlacement } from '../Popper';
 export type ButtonComponent = 'button' | 'a' | JSXElementConstructor<any>;
 export interface ButtonPropsBase {
     /**
@@ -23,7 +25,28 @@ export interface ButtonPropsBase {
      */
     loading?: boolean;
     /**
-     * Icon configuration with position and icon source.
+     * The icon to display.
      */
-    icon?: ButtonIcon;
+    icon?: IconDefinition;
+    /**
+     * The type of the icon relative to the text.
+     */
+    iconType?: ButtonIconType;
+    /**
+     * The button text content.
+     * When iconType is 'icon-only', children will be used as tooltip content.
+     */
+    children?: ReactNode;
+    /**
+     * If true, disable the tooltip for icon-only buttons.
+     * Only applies when iconType is 'icon-only'.
+     * @default false
+     */
+    disabledTooltip?: boolean;
+    /**
+     * The position of the tooltip.
+     * Only applies when iconType is 'icon-only'.
+     * @default 'bottom'
+     */
+    tooltipPosition?: PopperPlacement;
 }

package/Description/Description.d.ts

@@ -1,40 +1,30 @@
-import { DescriptionContentVariant, DescriptionOrientation } from '@mezzanine-ui/core/description';
+import { ReactElement } from 'react';
+import { DescriptionOrientation } from '@mezzanine-ui/core/description';
 import { DescriptionTitleProps } from './DescriptionTitle';
 import { DescriptionContentProps } from './DescriptionContent';
 import { BadgeProps } from '../Badge/typings';
 import { ButtonProps } from '../Button';
 import { ProgressProps } from '../Progress';
-import { TagProps } from '../Tag/typings';
-export interface DescriptionProps {
+import { TagGroupProps } from '../Tag/TagGroup';
+type DistributiveOmit<T, K extends PropertyKey> = T extends any ? Omit<T, K> : never;
+export type DescriptionProps = DistributiveOmit<DescriptionTitleProps, 'className' | 'children'> & {
     /**
-     * Custom class name for description
+     * Defines what is rendered as the description content
      */
-    className?: string;
+    children: ReactElement<DescriptionContentProps> | ReactElement<BadgeProps> | ReactElement<ButtonProps> | ReactElement<ProgressProps> | ReactElement<TagGroupProps>;
     /**
-     * Defines what is rendered as the description content
+     * Custom class name for description
      */
-    contentProps: DescriptionContentProps | {
-        variant: Extract<DescriptionContentVariant, 'badge'>;
-        badge: BadgeProps;
-    } | {
-        variant: Extract<DescriptionContentVariant, 'button'>;
-        button: ButtonProps;
-    } | {
-        variant: Extract<DescriptionContentVariant, 'progress'>;
-        progress: ProgressProps;
-    } | {
-        variant: Extract<DescriptionContentVariant, 'tags'>;
-        tags: TagProps[];
-    };
+    className?: string;
     /**
      * Define the layout direction between the title and the content
      * @default 'horizontal'
      */
     orientation?: DescriptionOrientation;
     /**
-     * Props passed to the DescriptionTitle component
+     * title text for description
      */
-    titleProps: DescriptionTitleProps;
-}
+    title: string;
+};
 declare const Description: import("react").ForwardRefExoticComponent<DescriptionProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Description;

package/Description/Description.js

@@ -1,33 +1,13 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import { descriptionClasses } from '@mezzanine-ui/core/description';
 import DescriptionTitle from './DescriptionTitle.js';
-import DescriptionContent from './DescriptionContent.js';
-import Button from '../Button/Button.js';
-import TagGroup from '../Tag/TagGroup.js';
-import Tag from '../Tag/Tag.js';
-import Progress from '../Progress/Progress.js';
-import Badge from '../Badge/Badge.js';
 import cx from 'clsx';
 
 const Description = forwardRef(function Description(props, ref) {
-    const { className, contentProps, orientation = 'horizontal', titleProps, } = props;
-    const contentComponent = useMemo(() => {
-        switch (contentProps.variant) {
-            case 'badge':
-                return jsx(Badge, { ...contentProps.badge });
-            case 'button':
-                return jsx(Button, { ...contentProps.button });
-            case 'progress':
-                return jsx(Progress, { ...contentProps.progress });
-            case 'tags':
-                return (jsx(TagGroup, { children: contentProps.tags.map((tagProps, index) => (jsx(Tag, { ...tagProps }, `${tagProps.label}-${index}`))) }));
-            default:
-                return jsx(DescriptionContent, { ...contentProps });
-        }
-    }, [contentProps]);
-    return (jsxs("div", { className: cx(descriptionClasses.host, descriptionClasses.orientation(orientation), className), ref: ref, children: [jsx(DescriptionTitle, { ...titleProps }), contentComponent] }));
+    const { children, className, orientation = 'horizontal', title, ...rest } = props;
+    return (jsxs("div", { className: cx(descriptionClasses.host, descriptionClasses.orientation(orientation), className), ref: ref, children: [jsx(DescriptionTitle, { ...rest, children: title }), children] }));
 });
 
 export { Description as default };

package/Dropdown/Dropdown.d.ts

@@ -1,8 +1,9 @@
 import { ReactElement } from 'react';
-import { DropdownInputPosition, DropdownItemSharedProps, DropdownOption, DropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
+import { DropdownInputPosition, DropdownItemSharedProps, DropdownOption, DropdownStatus as DropdownStatusType, DropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
 import { ButtonProps } from '../Button';
 import { InputProps } from '../Input';
 import { PopperPlacement } from '../Popper';
+import { IconDefinition } from '@mezzanine-ui/icons';
 export interface DropdownProps extends DropdownItemSharedProps {
     /**
      * The text of the cancel button.
@@ -51,6 +52,11 @@ export interface DropdownProps extends DropdownItemSharedProps {
      * @default false
      */
     isMatchInputValue?: boolean;
+    /**
+     * The text to follow for highlighting in dropdown options.
+     * If provided, this will be used instead of auto-extracting from children props.
+     */
+    followText?: string;
     /**
      * The listbox id of the dropdown.
      */
@@ -112,6 +118,12 @@ export interface DropdownProps extends DropdownItemSharedProps {
      * The placement of the dropdown.
      */
     placement?: PopperPlacement;
+    /**
+     * Custom width for the dropdown.
+     * Can be a number (pixels) or a string (e.g., '200px', '50%').
+     * If provided, this takes precedence over `sameWidth`.
+     */
+    customWidth?: number | string;
     /**
      * Whether to set the same width as its anchor element.
      * @default false
@@ -134,5 +146,21 @@ export interface DropdownProps extends DropdownItemSharedProps {
      * The z-index of the dropdown.
      */
     zIndex?: number | string;
+    /**
+     * The status of the dropdown (loading or empty).
+     */
+    status?: DropdownStatusType;
+    /**
+     * The text of the dropdown loading status.
+     */
+    loadingText?: string;
+    /**
+     * The text of the dropdown empty status.
+     */
+    emptyText?: string;
+    /**
+     * The icon of the dropdown empty status.
+     */
+    emptyIcon?: IconDefinition;
 }
 export default function Dropdown(props: DropdownProps): import("react/jsx-runtime").JSX.Element;