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

package/Description/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Description } from './Description';
+export type { DescriptionProps } from './Description';
+export { default as DescriptionTitle } from './DescriptionTitle';
+export type { DescriptionTitleProps } from './DescriptionTitle';
+export { default as DescriptionContent } from './DescriptionContent';
+export type { DescriptionContentProps } from './DescriptionContent';
+export { default as DescriptionGroup } from './DescriptionGroup';
+export type { DescriptionGroupProps } from './DescriptionGroup';

package/Description/index.js

@@ -0,0 +1,4 @@
+export { default as Description } from './Description.js';
+export { default as DescriptionTitle } from './DescriptionTitle.js';
+export { default as DescriptionContent } from './DescriptionContent.js';
+export { default as DescriptionGroup } from './DescriptionGroup.js';

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.
@@ -45,12 +46,17 @@ export interface DropdownProps extends DropdownItemSharedProps {
      * The position of the input.
      * @default 'outside'
      */
-    inputPosition?: dropdownInputPosition;
+    inputPosition?: DropdownInputPosition;
     /**
      * Whether to match the input value.
      * @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.
      */
@@ -64,6 +70,10 @@ export interface DropdownProps extends DropdownItemSharedProps {
      * The max height of the dropdown list.
      */
     maxHeight?: number | string;
+    /**
+     * Whether the dropdown is open (controlled).
+     */
+    open?: boolean;
     /**
      * Callback fired when the action cancel is clicked.
      */
@@ -92,6 +102,10 @@ export interface DropdownProps extends DropdownItemSharedProps {
      * Callback fired when the dropdown is opened.
      */
     onOpen?: () => void;
+    /**
+     * Callback fired when the dropdown visibility changes.
+     */
+    onVisibilityChange?: (open: boolean) => void;
     /**
      * Callback fired when the item is selected.
      */
@@ -104,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
@@ -121,6 +141,26 @@ export interface DropdownProps extends DropdownItemSharedProps {
     /**
      * The type of the dropdown.
      */
-    type?: dropdownType;
+    type?: DropdownType;
+    /**
+     * 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;

package/Dropdown/Dropdown.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId, useMemo, useState, useRef, useEffect, useCallback, cloneElement, createElement } from 'react';
+import { useId, useMemo, useState, useRef, useCallback, useEffect, cloneElement, createElement } from 'react';
 import cx from 'clsx';
 import { dropdownClasses } from '@mezzanine-ui/core/dropdown/dropdown';
-import { size, offset } from '@floating-ui/react-dom';
+import { size, offset, autoUpdate } from '@floating-ui/react-dom';
 import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
 import { TransitionGroup } from 'react-transition-group';
 import Button from '../Button/Button.js';
@@ -14,7 +14,7 @@ import DropdownItem from './DropdownItem.js';
 import Popper from '../Popper/Popper.js';
 
 function Dropdown(props) {
-    const { activeIndex: activeIndexProp, id, children, options = [], type = 'default', maxHeight, disabled = false, showDropdownActions = false, actionCancelText, actionConfirmText, actionText, actionClearText, actionCustomButtonProps, showActionShowTopBar, isMatchInputValue = false, inputPosition = 'outside', placement = 'bottom', sameWidth = false, listboxId: listboxIdProp, listboxLabel, onClose, onOpen, onSelect, onActionConfirm, onActionCancel, onActionCustom, onActionClear, onItemHover, } = props;
+    const { activeIndex: activeIndexProp, id, children, options = [], type = 'default', maxHeight, disabled = false, showDropdownActions = false, actionCancelText, actionConfirmText, actionText, actionClearText, actionCustomButtonProps, showActionShowTopBar, isMatchInputValue = false, inputPosition = 'outside', placement = 'bottom', customWidth, sameWidth = false, listboxId: listboxIdProp, listboxLabel, onClose, onOpen, open: openProp, onVisibilityChange, onSelect, onActionConfirm, onActionCancel, onActionCustom, onActionClear, onItemHover, zIndex, status, loadingText, emptyText, emptyIcon, followText: followTextProp, mode, value, } = props;
     const isInline = inputPosition === 'inside';
     const inputId = useId();
     const defaultListboxId = `${inputId}-listbox`;
@@ -33,11 +33,29 @@ function Dropdown(props) {
             onClick: onActionCustom,
             onClear: onActionClear,
         };
-    }, [showDropdownActions, actionCancelText, actionConfirmText, actionClearText, actionText, actionCustomButtonProps, showActionShowTopBar, onActionConfirm, onActionCancel, onActionCustom, onActionClear]);
-    const [isOpen, setIsOpen] = useState(false);
-    const [uncontrolledActiveIndex, setUncontrolledActiveIndex] = useState(activeIndexProp !== null && activeIndexProp !== void 0 ? activeIndexProp : null);
+    }, [
+        showDropdownActions,
+        actionCancelText,
+        actionConfirmText,
+        actionClearText,
+        actionText,
+        actionCustomButtonProps,
+        showActionShowTopBar,
+        onActionConfirm,
+        onActionCancel,
+        onActionCustom,
+        onActionClear,
+    ]);
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+    const isOpenControlled = openProp !== undefined;
+    const isOpen = isOpenControlled ? !!openProp : uncontrolledOpen;
+    // Keep setter for uncontrolled mode support (e.g., keyboard navigation)
+    // Currently not used in handleItemHover to prevent style conflicts
+    const [uncontrolledActiveIndex, _setUncontrolledActiveIndex] = useState(activeIndexProp !== null && activeIndexProp !== void 0 ? activeIndexProp : null);
     const isActiveIndexControlled = activeIndexProp !== undefined;
-    const mergedActiveIndex = isActiveIndexControlled ? activeIndexProp : uncontrolledActiveIndex;
+    const mergedActiveIndex = isActiveIndexControlled
+        ? activeIndexProp
+        : uncontrolledActiveIndex;
     const containerRef = useRef(null);
     const ariaActivedescendant = useMemo(() => {
         if (mergedActiveIndex !== null && mergedActiveIndex >= 0) {
@@ -57,6 +75,11 @@ function Dropdown(props) {
     }), []);
     const followText = useMemo(() => {
         var _a, _b, _c, _d;
+        // If followText is explicitly provided, use it
+        if (followTextProp !== undefined) {
+            return followTextProp != null ? String(followTextProp) : undefined;
+        }
+        // Otherwise, auto-extract from children props
         if (children.type === Button) {
             return undefined;
         }
@@ -65,16 +88,35 @@ function Dropdown(props) {
         }
         // Try to get value from Input component props
         const inputValue = (_d = (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : (_c = children.props) === null || _c === void 0 ? void 0 : _c.defaultValue) !== null && _d !== void 0 ? _d : '';
-        return inputValue;
-    }, [children, isMatchInputValue]);
+        // Ensure the value is a string or undefined
+        return inputValue != null ? String(inputValue) : undefined;
+    }, [children, isMatchInputValue, followTextProp]);
     const popoverPlacement = useMemo(() => {
         if (inputPosition === 'outside') {
             return placement;
         }
         return 'bottom';
     }, [inputPosition, placement]);
+    const customWidthMiddleware = useMemo(() => {
+        if (!customWidth) {
+            return null;
+        }
+        const widthValue = typeof customWidth === 'number'
+            ? `${customWidth}px`
+            : customWidth;
+        return {
+            name: 'customWidth',
+            fn: ({ elements }) => {
+                Object.assign(elements.floating.style, {
+                    width: widthValue,
+                });
+                return {};
+            },
+        };
+    }, [customWidth]);
     const sameWidthMiddleware = useMemo(() => {
-        if (!sameWidth) {
+        // If customWidth is set, don't apply sameWidth
+        if (customWidth || !sameWidth) {
             return null;
         }
         return size({
@@ -84,10 +126,26 @@ function Dropdown(props) {
                 });
             },
         });
-    }, [sameWidth]);
+    }, [customWidth, sameWidth]);
     const offsetMiddleware = useMemo(() => {
         return offset({ mainAxis: 4 });
     }, []);
+    // Set z-index for popper to ensure it appears above other elements
+    const zIndexMiddleware = useMemo(() => {
+        const zIndexValue = zIndex !== null && zIndex !== void 0 ? zIndex : 1;
+        return {
+            name: 'zIndex',
+            fn: ({ elements }) => {
+                const zIndexNum = typeof zIndexValue === 'number'
+                    ? zIndexValue
+                    : (typeof zIndexValue === 'string' ? parseInt(zIndexValue, 10) || zIndexValue : 1);
+                Object.assign(elements.floating.style, {
+                    zIndex: zIndexNum,
+                });
+                return {};
+            },
+        };
+    }, [zIndex]);
     const prevIsOpenRef = useRef(isOpen);
     const translateFrom = useMemo(() => {
         if (isInline) {
@@ -96,6 +154,15 @@ function Dropdown(props) {
         const placementBase = popoverPlacement.split('-')[0];
         return placementBase === 'top' ? 'top' : 'bottom';
     }, [isInline, popoverPlacement]);
+    const setOpen = useCallback((next) => {
+        const nextValue = typeof next === 'function'
+            ? next(isOpen)
+            : next;
+        if (!isOpenControlled) {
+            setUncontrolledOpen(nextValue);
+        }
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(nextValue);
+    }, [isOpen, isOpenControlled, onVisibilityChange]);
     useEffect(() => {
         if (prevIsOpenRef.current === isOpen)
             return;
@@ -109,6 +176,29 @@ function Dropdown(props) {
     }, [isOpen, onClose, onOpen]);
     const anchorRef = useRef(null);
     const popperRef = useRef(null);
+    const popperControllerRef = useRef(null);
+    // Auto-update popper position when anchor element size changes
+    useEffect(() => {
+        if (!isOpen || isInline || !anchorRef.current || !popperControllerRef.current) {
+            return;
+        }
+        const update = popperControllerRef.current.update;
+        if (!update) {
+            return;
+        }
+        // Get floating element from controller refs
+        // Check refs exists before accessing nested properties
+        const refs = popperControllerRef.current.refs;
+        if (!refs) {
+            return;
+        }
+        const floatingElement = refs.floating.current;
+        if (!floatingElement) {
+            return;
+        }
+        const cleanup = autoUpdate(anchorRef.current, floatingElement, update);
+        return cleanup;
+    }, [isOpen, isInline]);
     // Extract combobox props logic to avoid duplication
     const getComboboxProps = useMemo(() => {
         const childWithRef = children;
@@ -125,11 +215,8 @@ function Dropdown(props) {
         };
     }, [children, listboxId, isOpen, isMatchInputValue, ariaActivedescendant]);
     const handleItemHover = useCallback((index) => {
-        if (!isActiveIndexControlled) {
-            setUncontrolledActiveIndex(index);
-        }
         onItemHover === null || onItemHover === void 0 ? void 0 : onItemHover(index);
-    }, [isActiveIndexControlled, onItemHover]);
+    }, [onItemHover]);
     // Extract shared DropdownItem props to avoid duplication
     const baseDropdownItemProps = useMemo(() => ({
         actionConfig,
@@ -144,13 +231,35 @@ function Dropdown(props) {
         onSelect,
         options,
         type,
-    }), [actionConfig, mergedActiveIndex, disabled, followText, listboxId, listboxLabel, maxHeight, sameWidth, handleItemHover, onSelect, options, type]);
+        status,
+        loadingText,
+        emptyText,
+        emptyIcon,
+        mode,
+        value,
+    }), [
+        actionConfig,
+        mergedActiveIndex,
+        disabled,
+        followText,
+        listboxId,
+        listboxLabel,
+        maxHeight,
+        sameWidth,
+        handleItemHover,
+        onSelect,
+        options,
+        type,
+        status,
+        loadingText,
+        emptyText,
+        emptyIcon,
+        mode,
+        value,
+    ]);
     const triggerElement = useMemo(() => {
         const childWithRef = children;
-        const composedRef = composeRefs([
-            anchorRef,
-            childWithRef.ref,
-        ]);
+        const composedRef = composeRefs([anchorRef, childWithRef.ref]);
         return cloneElement(childWithRef, {
             ref: composedRef,
             ...getComboboxProps,
@@ -160,19 +269,17 @@ function Dropdown(props) {
                 if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
                     return;
                 if (!isInline) {
-                    setIsOpen((prev) => !prev);
+                    setOpen((prev) => !prev);
                 }
             },
         });
-    }, [children, isInline, getComboboxProps]);
+    }, [children, getComboboxProps, isInline, setOpen]);
     const inlineTriggerElement = useMemo(() => {
         if (!isInline) {
             return null;
         }
         const childWithRef = children;
-        const composedRef = composeRefs([
-            childWithRef.ref,
-        ]);
+        const composedRef = composeRefs([childWithRef.ref]);
         return cloneElement(childWithRef, {
             ref: composedRef,
             ...getComboboxProps,
@@ -181,29 +288,36 @@ function Dropdown(props) {
                 (_b = (_a = childWithRef.props) === null || _a === void 0 ? void 0 : _a.onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, event);
                 if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
                     return;
+                // When open is controlled, don't automatically close on blur
+                // Let the controlled state handle the visibility
+                if (isOpenControlled) {
+                    return;
+                }
                 const nextFocusTarget = event === null || event === void 0 ? void 0 : event.relatedTarget;
                 const container = containerRef.current;
-                if (container && nextFocusTarget && container.contains(nextFocusTarget)) {
+                if (container &&
+                    nextFocusTarget &&
+                    container.contains(nextFocusTarget)) {
                     return;
                 }
-                setIsOpen(false);
+                setOpen(false);
             },
             onClick: (event) => {
                 var _a, _b;
                 (_b = (_a = childWithRef.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
                 if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
                     return;
-                setIsOpen(true);
+                setOpen(true);
             },
             onFocus: (event) => {
                 var _a, _b;
                 (_b = (_a = childWithRef.props) === null || _a === void 0 ? void 0 : _a.onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, event);
                 if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
                     return;
-                setIsOpen(true);
+                setOpen(true);
             },
         });
-    }, [children, isInline, isOpen, getComboboxProps]);
+    }, [children, getComboboxProps, isInline, setOpen, isOpenControlled]);
     useDocumentEvents(() => {
         if (!isOpen) {
             return;
@@ -217,25 +331,30 @@ function Dropdown(props) {
                 return;
             if (isInline) {
                 if (container && !container.contains(target)) {
-                    setIsOpen(false);
+                    setOpen(false);
                 }
                 return;
             }
-            if (anchor && popper && !anchor.contains(target) && !popper.contains(target)) {
-                setIsOpen(false);
+            if (anchor &&
+                popper &&
+                !anchor.contains(target) &&
+                !popper.contains(target)) {
+                setOpen(false);
             }
         };
         return {
             click: handleClickAway,
             touchend: handleClickAway,
         };
-    }, [isInline, isOpen]);
+    }, [isInline, isOpen, setOpen]);
     return (jsxs("div", { id: id, ref: containerRef, className: cx(dropdownClasses.root, dropdownClasses.inputPosition(inputPosition)), children: [isInline && (jsxs(TransitionGroup, { component: null, children: [!isOpen && inlineTriggerElement && (createElement(Translate, { ...translateProps, from: translateFrom, key: "inline-trigger", in: true },
                         jsx("div", { children: inlineTriggerElement }))), isOpen && (createElement(Translate, { ...translateProps, from: translateFrom, key: "inline-list", in: true },
-                        jsx("div", { children: jsx(DropdownItem, { ...baseDropdownItemProps, headerContent: inlineTriggerElement }) })))] })), !isInline && (jsx(Popper, { ref: popperRef, anchor: anchorRef, open: isOpen, disablePortal: true, options: {
+                        jsx("div", { children: jsx(DropdownItem, { ...baseDropdownItemProps, headerContent: inlineTriggerElement }) })))] })), !isInline && (jsx(Popper, { ref: popperRef, anchor: anchorRef, controllerRef: popperControllerRef, open: isOpen, disablePortal: true, options: {
                     placement: popoverPlacement,
                     middleware: [
                         offsetMiddleware,
+                        zIndexMiddleware,
+                        ...(customWidthMiddleware ? [customWidthMiddleware] : []),
                         ...(sameWidthMiddleware ? [sameWidthMiddleware] : []),
                     ],
                 }, children: jsx(TransitionGroup, { component: null, children: isOpen && (createElement(Translate, { ...translateProps, from: translateFrom, key: "popper-list", in: true },

package/Dropdown/DropdownAction.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from "../Button";
+import { ButtonProps } from '../Button';
 export interface DropdownActionProps {
     /**
      * The text of the custom action button.

package/Dropdown/DropdownAction.js

@@ -17,10 +17,7 @@ function DropdownAction(props) {
     const isDefaultMode = !isClearMode && !isCustomMode;
     const hasCancel = Boolean(onCancel && isDefaultMode);
     const hasConfirm = Boolean(onConfirm && isDefaultMode);
-    return (jsx(Fragment, { children: showActions && hasAnyEvent && (jsxs("div", { className: dropdownClasses.action, children: [showTopBar && jsx("i", { className: dropdownClasses.actionTopBar }), jsxs("div", { className: dropdownClasses.actionTools, children: [hasCancel && (jsx(Button, { variant: "base-ghost", size: actionButtonSize, onClick: onCancel, children: cancelLabel })), hasConfirm && (jsx(Button, { size: actionButtonSize, style: hasCancel ? undefined : { marginLeft: 'auto' }, onClick: onConfirm, children: confirmLabel })), isCustomMode && (jsx(Button, { size: actionButtonSize, variant: "base-ghost", ...customActionButtonProps, onClick: onClick, children: actionLabel })), isClearMode && (jsx(Button, { size: actionButtonSize, variant: "base-ghost", icon: {
-                                position: 'leading',
-                                src: CloseIcon,
-                            }, onClick: onClear, children: clearLabel }))] })] })) }));
+    return (jsx(Fragment, { children: showActions && hasAnyEvent && (jsxs("div", { className: dropdownClasses.action, children: [showTopBar && jsx("i", { className: dropdownClasses.actionTopBar }), jsxs("div", { className: dropdownClasses.actionTools, children: [hasCancel && (jsx(Button, { variant: "base-ghost", size: actionButtonSize, onClick: onCancel, children: cancelLabel })), hasConfirm && (jsx(Button, { size: actionButtonSize, style: hasCancel ? undefined : { marginLeft: 'auto' }, onClick: onConfirm, children: confirmLabel })), isCustomMode && (jsx(Button, { size: actionButtonSize, variant: "base-ghost", ...customActionButtonProps, onClick: onClick, children: actionLabel })), isClearMode && (jsx(Button, { size: actionButtonSize, variant: "base-ghost", iconType: "leading", icon: CloseIcon, onClick: onClear, children: clearLabel }))] })] })) }));
 }
 
 export { DropdownAction as default };

package/Dropdown/DropdownItem.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
-import { DropdownItemSharedProps, DropdownOptionsByType, dropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
+import { DropdownItemSharedProps, DropdownOptionsByType, DropdownStatus as DropdownStatusType, DropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
+import { type IconDefinition } from '@mezzanine-ui/icons';
 import { type DropdownActionProps } from './DropdownAction';
-export interface DropdownItemProps<T extends dropdownType | undefined = dropdownType> extends Omit<DropdownItemSharedProps, 'type'> {
+export interface DropdownItemProps<T extends DropdownType | undefined = DropdownType> extends Omit<DropdownItemSharedProps, 'type'> {
     /**
      * The action configuration for the dropdown.
      */
@@ -55,6 +56,22 @@ export interface DropdownItemProps<T extends dropdownType | undefined = dropdown
      * - 'grouped': array with one level of children (children cannot have children)
      * - 'tree': array with nested children up to 3 levels
      */
-    type?: dropdownType;
+    type?: DropdownType;
+    /**
+     * 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 DropdownItem<T extends dropdownType | undefined = dropdownType>(props: DropdownItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function DropdownItem<T extends DropdownType | undefined = DropdownType>(props: DropdownItemProps<T>): import("react/jsx-runtime").JSX.Element;

package/Dropdown/DropdownItem.js

@@ -8,6 +8,8 @@ import { useElementHeight } from '../hooks/useElementHeight.js';
 import Typography from '../Typography/Typography.js';
 import DropdownAction from './DropdownAction.js';
 import DropdownItemCard from './DropdownItemCard.js';
+import DropdownStatus from './DropdownStatus.js';
+import { shortcutTextHandler } from './shortcutTextHandler.js';
 
 /**
  * Limits DropdownOption array to a maximum depth, truncating extra children levels and showing error message if exceeded.
@@ -55,7 +57,7 @@ function truncateArrayDepth(input, maxDepth = 3, warn = true) {
     return truncate(input);
 }
 function DropdownItem(props) {
-    const { activeIndex, disabled = false, listboxId, listboxLabel, mode = 'single', options, value, type, maxHeight, actionConfig, onHover, onSelect, followText, headerContent, } = props;
+    const { activeIndex, disabled = false, listboxId, listboxLabel, mode = 'single', options, value, type, maxHeight, actionConfig, onHover, onSelect, followText, headerContent, status, loadingText, emptyText, emptyIcon, } = props;
     const optionsContent = truncateArrayDepth(options, 3);
     const listRef = useRef(null);
     const [expandedNodes, setExpandedNodes] = useState(new Set());
@@ -176,18 +178,21 @@ function DropdownItem(props) {
             if (hasChildren) {
                 groupElements.push(jsx(Typography, { variant: "body", className: dropdownClasses.groupLabel, children: groupOption.name }, groupOption.id));
                 (_a = groupOption.children) === null || _a === void 0 ? void 0 : _a.forEach((option) => {
-                    var _a, _b;
+                    var _a, _b, _c;
                     currentIndex += 1;
                     const optionIndex = currentIndex;
                     const isActive = optionIndex === activeIndex;
                     const isSelected = Array.isArray(value)
                         ? value.includes(option.id)
                         : value === option.id;
+                    const shortcutText = option.shortcutText
+                        ? option.shortcutText
+                        : shortcutTextHandler((_a = option.shortcutKeys) !== null && _a !== void 0 ? _a : []);
                     groupElements.push(jsx(DropdownItemCard, { followText: followText, active: isActive, checked: isSelected, disabled: disabled, id: `${listboxId}-option-${optionIndex}`, label: option.name, mode: mode, name: option.name, onClick: () => {
                             if (disabled)
                                 return;
                             onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
-                        }, checkSite: "none", validate: (_a = option.validate) !== null && _a !== void 0 ? _a : 'default', onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), showUnderline: (_b = option.showUnderline) !== null && _b !== void 0 ? _b : false, appendContent: option.shortcutText }, option.id));
+                        }, checkSite: "none", validate: (_b = option.validate) !== null && _b !== void 0 ? _b : 'default', onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), showUnderline: (_c = option.showUnderline) !== null && _c !== void 0 ? _c : false, appendContent: shortcutText }, option.id));
                 });
             }
             return groupElements;
@@ -197,7 +202,7 @@ function DropdownItem(props) {
     const renderTreeOptions = (optionList, depth, startIndex) => {
         let currentIndex = startIndex;
         const elements = (optionList !== null && optionList !== void 0 ? optionList : []).flatMap((option) => {
-            var _a, _b;
+            var _a, _b, _c;
             currentIndex += 1;
             const optionIndex = currentIndex;
             const level = Math.min(depth, 2);
@@ -211,7 +216,10 @@ function DropdownItem(props) {
             if (hasChildren && level !== 2) {
                 prependIcon = isExpanded ? CaretDownIcon : CaretRightIcon;
             }
-            const checkSite = option.showCheckbox ? 'prepend' : 'none';
+            const checkSite = option.showCheckbox ? 'prefix' : 'none';
+            const shortcutText = option.shortcutText
+                ? option.shortcutText
+                : shortcutTextHandler((_a = option.shortcutKeys) !== null && _a !== void 0 ? _a : []);
             const card = (jsx(DropdownItemCard, { active: isActive, checked: isSelected, disabled: disabled, id: `${listboxId}-option-${optionIndex}`, label: option.name, level: level, mode: mode, name: option.name, onClick: () => {
                     if (disabled)
                         return;
@@ -221,7 +229,7 @@ function DropdownItem(props) {
                     else {
                         onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
                     }
-                }, followText: followText, checkSite: checkSite, onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), prependIcon: prependIcon, showUnderline: (_a = option.showUnderline) !== null && _a !== void 0 ? _a : false, validate: (_b = option.validate) !== null && _b !== void 0 ? _b : 'default', appendContent: option.shortcutText }, option.id));
+                }, followText: followText, checkSite: checkSite, onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), prependIcon: prependIcon, showUnderline: (_b = option.showUnderline) !== null && _b !== void 0 ? _b : false, validate: (_c = option.validate) !== null && _c !== void 0 ? _c : 'default', appendContent: shortcutText }, option.id));
             if (hasChildren && isExpanded && type === 'tree') {
                 const childResult = renderTreeOptions(option.children, depth + 1, currentIndex);
                 currentIndex = childResult.nextIndex;
@@ -234,13 +242,16 @@ function DropdownItem(props) {
     const renderDefaultOptions = (optionList, startIndex) => {
         let currentIndex = startIndex;
         const elements = (optionList !== null && optionList !== void 0 ? optionList : []).flatMap((option) => {
-            var _a, _b;
+            var _a, _b, _c;
             currentIndex += 1;
             const optionIndex = currentIndex;
             const isSelected = Array.isArray(value)
                 ? value.includes(option.id)
                 : value === option.id;
             const isActive = optionIndex === activeIndex;
+            const shortcutText = option.shortcutText
+                ? option.shortcutText
+                : shortcutTextHandler((_a = option.shortcutKeys) !== null && _a !== void 0 ? _a : []);
             let checkSite = 'none';
             if (option === null || option === void 0 ? void 0 : option.checkSite) {
                 checkSite = option.checkSite;
@@ -249,7 +260,7 @@ function DropdownItem(props) {
                     if (disabled)
                         return;
                     onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
-                }, onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), prependIcon: option.icon, validate: (_a = option.validate) !== null && _a !== void 0 ? _a : 'default', showUnderline: (_b = option.showUnderline) !== null && _b !== void 0 ? _b : false, checkSite: checkSite, appendContent: option.shortcutText }, option.id));
+                }, onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), prependIcon: option.icon, validate: (_b = option.validate) !== null && _b !== void 0 ? _b : 'default', showUnderline: (_c = option.showUnderline) !== null && _c !== void 0 ? _c : false, checkSite: checkSite, appendContent: shortcutText }, option.id));
         });
         return { elements, nextIndex: currentIndex };
     };
@@ -263,6 +274,8 @@ function DropdownItem(props) {
         return renderDefaultOptions(optionList, startIndex);
     };
     const { elements: renderedOptions } = renderOptions(optionsContent, 0, -1);
+    // Show status when options are empty and status is provided
+    const shouldShowStatus = optionsContent.length === 0 && status;
     const listStyle = useMemo(() => {
         if (!maxHeight) {
             return undefined;
@@ -311,8 +324,8 @@ function DropdownItem(props) {
         };
     }, [disabled, matchShortcut, onSelect, type, toggleExpand, visibleShortcutOptions]);
     return (jsxs("ul", { "aria-label": listboxLabel || (optionsContent.length === 0 ? 'Dropdown options' : undefined), className: dropdownClasses.list, id: listboxId, ref: listRef, role: "listbox", style: listStyle, tabIndex: -1, children: [hasHeader && (jsx("li", { className: dropdownClasses.listHeader, role: "presentation", ref: headerRef, children: jsx("div", { className: dropdownClasses.listHeaderInner, children: headerContent }) })), maxHeight
-                ? (jsx("div", { className: dropdownClasses.listWrapper, style: listWrapperStyle, children: renderedOptions }))
-                : renderedOptions, hasActions && (jsx("div", { ref: actionRef, children: jsx(DropdownAction, { ...actionConfig }) }))] }));
+                ? (jsx("div", { className: dropdownClasses.listWrapper, style: listWrapperStyle, children: shouldShowStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (renderedOptions) }))
+                : shouldShowStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (renderedOptions), hasActions && (jsx("div", { ref: actionRef, children: jsx(DropdownAction, { ...actionConfig }) }))] }));
 }
 
 export { DropdownItem as default };

package/Dropdown/DropdownItemCard.d.ts

@@ -1,4 +1,4 @@
-import { dropdownCheckPosition, dropdownItemLevel, dropdownItemValidate, dropdownMode } from "@mezzanine-ui/core/dropdown/dropdown";
+import { DropdownCheckPosition, DropdownItemLevel, DropdownItemValidate, DropdownMode } from "@mezzanine-ui/core/dropdown/dropdown";
 import { type IconDefinition } from "@mezzanine-ui/icons";
 export interface DropdownItemCardProps {
     /**
@@ -18,7 +18,7 @@ export interface DropdownItemCardProps {
     /**
      * The position of the checkbox.
      */
-    checkSite?: dropdownCheckPosition;
+    checkSite?: DropdownCheckPosition;
     /**
      * Controlled: Whether the option is selected/checked.
      * Controls checkbox state in multiple mode.
@@ -53,11 +53,11 @@ export interface DropdownItemCardProps {
     /**
      * The level of the dropdown item card.
      */
-    level?: dropdownItemLevel;
+    level?: DropdownItemLevel;
     /**
      * The mode of the dropdown item card.
      */
-    mode: dropdownMode;
+    mode: DropdownMode;
     /**
      * The accessible name / label for the option.
      * Falls back to label if not provided.
@@ -91,6 +91,6 @@ export interface DropdownItemCardProps {
     /**
      * The validation of the dropdown item card.
      */
-    validate?: dropdownItemValidate;
+    validate?: DropdownItemValidate;
 }
 export default function DropdownItemCard(props: DropdownItemCardProps): import("react/jsx-runtime").JSX.Element;