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

package/ContentHeader/utils.js

@@ -0,0 +1,215 @@
+import { jsx } from 'react/jsx-runtime';
+import { isValidElement, cloneElement, Children } from 'react';
+import Button from '../Button/Button.js';
+import { flattenChildren } from '../utils/flatten-children.js';
+import { ChevronLeftIcon } from '@mezzanine-ui/icons';
+import Input from '../Input/Input.js';
+import Select from '../Select/Select.js';
+import Dropdown from '../Dropdown/Dropdown.js';
+
+/**
+ * Renders a button from either ButtonProps or a React element.
+ * Applies the specified size and variant to the button.
+ */
+const renderButton = (button, size) => {
+    if (!button) {
+        return null;
+    }
+    if (isValidElement(button)) {
+        return cloneElement(button, {
+            size,
+            type: 'button',
+        });
+    }
+    return jsx(Button, { ...button, size: size, type: "button" });
+};
+const withSize = (target, size) => {
+    return cloneElement(target, { size });
+};
+const renderFilterProp = (prop, size) => {
+    if (!prop) {
+        return null;
+    }
+    const { variant } = prop;
+    if (variant === 'search') {
+        return (jsx(Input, { ...prop, size: size, variant: "search" }));
+    }
+    if (variant === 'select') {
+        return jsx(Select, { ...prop, size: size });
+    }
+    if (variant === 'segmentedControl') {
+        console.warn('SegmentedControl component is not implemented yet.');
+        return null;
+    }
+    return null;
+};
+const renderIconButtonWithProps = (child, size) => {
+    const { icon } = child.props;
+    return cloneElement(child, {
+        icon,
+        iconType: 'icon-only',
+        size,
+        variant: 'base-secondary',
+        type: 'button',
+    });
+};
+const renderIconButtonsProp = (utilities, size) => {
+    const result = [];
+    utilities === null || utilities === void 0 ? void 0 : utilities.forEach((props) => {
+        if (props instanceof Object && 'icon' in props) {
+            result.push(jsx(Button, { ...props, type: "button", size: size, iconType: "icon-only", variant: "base-secondary" }));
+        }
+        if (props instanceof Object && 'options' in props) {
+            if (!isValidElement(props.children) ||
+                !(props.children.type === Button)) {
+                console.warn('[Mezzanine][ContentHeader]: Dropdown in utilities should have Button with icon as its children.');
+                return;
+            }
+            result.push(jsx(Dropdown, { ...props, children: cloneElement(props.children, {
+                    type: 'button',
+                    size: size,
+                    iconType: 'icon-only',
+                    variant: 'base-secondary',
+                }) }));
+        }
+    });
+    return result;
+};
+const variantOrder = {
+    'destructive-secondary': 0,
+    'base-secondary': 1,
+    'base-primary': 2,
+    // undefined: 2,
+    'base-tertiary': 0,
+    'base-ghost': 0,
+    'base-dashed': 0,
+    'base-text-link': 0,
+    'destructive-primary': 0,
+    'destructive-ghost': 0,
+    'destructive-text-link': 0,
+    inverse: 0,
+    'inverse-ghost': 0,
+};
+/**
+ * Renders action buttons based on the actions configuration.
+ * Supports both structured actions object and single button element/props.
+ */
+const renderActionsProp = (actions, size) => {
+    if (actions) {
+        return actions
+            .filter((v) => {
+            if (v.variant === 'destructive-secondary' ||
+                v.variant === 'base-secondary' ||
+                v.variant === 'base-primary' ||
+                v.variant === undefined) {
+                return true;
+            }
+            else {
+                console.warn(`[Mezzanine][ContentHeader]: Button with variant "${v.variant}" will not be rendered in ContentHeader actions.`);
+                return false;
+            }
+        })
+            .sort((a, b) => variantOrder[a.variant || 'base-primary'] -
+            variantOrder[b.variant || 'base-primary'])
+            .map((v) => renderButton(v, size));
+    }
+    return null;
+};
+const resolveContentHeaderChild = (children, size) => {
+    let filter = null;
+    // [destructive-secondary[], base-secondary[], base-primary[]]
+    const actionsWithOrder = [[], [], []];
+    const utilities = [];
+    let backButton = null;
+    if (children) {
+        const flatChildren = flattenChildren(children);
+        Children.forEach(flatChildren, (child) => {
+            if (!isValidElement(child)) {
+                return;
+            }
+            const { type, props } = child;
+            if (type === 'a' || props.href) {
+                backButton = cloneElement(child, {
+                    children: (jsx(Button, { component: 'span', iconType: "icon-only", icon: ChevronLeftIcon, "aria-label": "Back", type: "button", size: "sub", variant: "base-tertiary" })),
+                });
+                return;
+            }
+            const sizeProp = props.size;
+            if (sizeProp !== undefined && sizeProp !== size) {
+                console.warn('[Mezzanine][ContentHeader]: Input, Button, Select size in ContentHeader utilities is forced to match ContentHeader size.');
+            }
+            // is filter
+            if ((type === Input && props.variant === 'search') ||
+                type === Select) {
+                if (filter) {
+                    console.warn('[Mezzanine][ContentHeader]: ContentHeader only accepts one filter component.');
+                }
+                filter = withSize(child, size);
+            }
+            else if (type.toString() === 'SegmentedControl') {
+                console.warn('SegmentedControl component is not implemented yet.');
+            }
+            // is utilities (icon button)
+            else if ((type === Button && props.iconType === 'icon-only') ||
+                (type === Button &&
+                    props.icon &&
+                    !props.children)) {
+                utilities.push(renderIconButtonWithProps(child, size));
+            }
+            else if (type === Dropdown) {
+                const childProps = child.props
+                    .children;
+                if (!isValidElement(childProps) || childProps.type !== Button) {
+                    console.warn('[Mezzanine][ContentHeader]: Dropdown in utilities should have Button with icon as its children.');
+                    return;
+                }
+                utilities.push(cloneElement(child, {
+                    children: renderIconButtonWithProps(child.props
+                        .children, size),
+                }));
+            }
+            // is actions (normal button)
+            else if (type === Button) {
+                const variant = props.variant;
+                if (variant !== 'base-primary' &&
+                    variant !== 'base-secondary' &&
+                    variant !== 'destructive-secondary' &&
+                    variant !== undefined) {
+                    console.warn(`[Mezzanine][ContentHeader]: Button with variant "${variant}" will not be rendered in ContentHeader actions.`);
+                    return;
+                }
+                const buttonElement = renderButton(child, size);
+                if (!buttonElement) {
+                    return;
+                }
+                if (variant === 'destructive-secondary') {
+                    actionsWithOrder[0].push(buttonElement);
+                }
+                else if (variant === 'base-secondary') {
+                    actionsWithOrder[1].push(buttonElement);
+                }
+                else if (variant === 'base-primary') {
+                    actionsWithOrder[2].push(buttonElement);
+                }
+                else if (variant === undefined) {
+                    actionsWithOrder[2].push(buttonElement);
+                }
+            }
+            else {
+                console.warn('[Mezzanine][ContentHeader]: ContentHeader only accepts Input (search variant), Select, SegmentedControl, Dropdown with Icon Button, or Button as children.');
+            }
+        });
+    }
+    return {
+        filter,
+        actions: [
+            ...actionsWithOrder[0],
+            ...actionsWithOrder[1],
+            ...actionsWithOrder[2],
+        ],
+        utilities,
+        backButton,
+    };
+};
+
+export { renderActionsProp, renderButton, renderFilterProp, renderIconButtonWithProps, renderIconButtonsProp, resolveContentHeaderChild };

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,38 @@ 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;
+    /**
+     * Whether to disable portal.
+     * This prop is only relevant when `inputPosition` is set to 'outside'.
+     * Controls whether the dropdown content is rendered within the current hierarchy or portaled to the body.
+     * @default false
+     */
+    disablePortal?: boolean;
+    /**
+     * Callback fired when the dropdown list reaches the bottom.
+     * Only fires when `maxHeight` is set and the list is scrollable.
+     */
+    onReachBottom?: () => void;
+    /**
+     * Callback fired when the dropdown list leaves the bottom.
+     * Only fires when `maxHeight` is set and the list is scrollable.
+     */
+    onLeaveBottom?: () => void;
 }
 export default function Dropdown(props: DropdownProps): import("react/jsx-runtime").JSX.Element;

package/Dropdown/Dropdown.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 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, open: openProp, onVisibilityChange, onSelect, onActionConfirm, onActionCancel, onActionCustom, onActionClear, onItemHover, zIndex, } = 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, disablePortal = false, onReachBottom, onLeaveBottom, mode, value, } = props;
     const isInline = inputPosition === 'inside';
     const inputId = useId();
     const defaultListboxId = `${inputId}-listbox`;
@@ -49,7 +49,9 @@ function Dropdown(props) {
     const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
     const isOpenControlled = openProp !== undefined;
     const isOpen = isOpenControlled ? !!openProp : uncontrolledOpen;
-    const [uncontrolledActiveIndex, setUncontrolledActiveIndex] = useState(activeIndexProp !== null && activeIndexProp !== void 0 ? activeIndexProp : null);
+    // 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
@@ -73,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;
         }
@@ -81,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({
@@ -100,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) {
@@ -134,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;
@@ -150,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,
@@ -167,8 +229,16 @@ function Dropdown(props) {
         sameWidth,
         onHover: handleItemHover,
         onSelect,
+        onReachBottom,
+        onLeaveBottom,
         options,
         type,
+        status,
+        loadingText,
+        emptyText,
+        emptyIcon,
+        mode,
+        value,
     }), [
         actionConfig,
         mergedActiveIndex,
@@ -180,8 +250,16 @@ function Dropdown(props) {
         sameWidth,
         handleItemHover,
         onSelect,
+        onReachBottom,
+        onLeaveBottom,
         options,
         type,
+        status,
+        loadingText,
+        emptyText,
+        emptyIcon,
+        mode,
+        value,
     ]);
     const triggerElement = useMemo(() => {
         const childWithRef = children;
@@ -214,6 +292,11 @@ 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 &&
@@ -238,7 +321,7 @@ function Dropdown(props) {
                 setOpen(true);
             },
         });
-    }, [children, getComboboxProps, isInline, setOpen]);
+    }, [children, getComboboxProps, isInline, setOpen, isOpenControlled]);
     useDocumentEvents(() => {
         if (!isOpen) {
             return;
@@ -270,13 +353,15 @@ function Dropdown(props) {
     }, [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, className: dropdownClasses.popperWithPortal, controllerRef: popperControllerRef, open: isOpen, disablePortal: disablePortal, options: {
                     placement: popoverPlacement,
                     middleware: [
                         offsetMiddleware,
+                        zIndexMiddleware,
+                        ...(customWidthMiddleware ? [customWidthMiddleware] : []),
                         ...(sameWidthMiddleware ? [sameWidthMiddleware] : []),
                     ],
-                }, style: zIndex ? { zIndex } : undefined, children: jsx(TransitionGroup, { component: null, children: isOpen && (createElement(Translate, { ...translateProps, from: translateFrom, key: "popper-list", in: true },
+                }, children: jsx(TransitionGroup, { component: null, children: isOpen && (createElement(Translate, { ...translateProps, from: translateFrom, key: "popper-list", in: true },
                         jsx("div", { children: jsx(DropdownItem, { ...baseDropdownItemProps }) }))) }) })), !isInline && triggerElement] }));
 }
 

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,5 +1,6 @@
 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'> {
     /**
@@ -56,5 +57,31 @@ export interface DropdownItemProps<T extends DropdownType | undefined = Dropdown
      * - 'tree': array with nested children up to 3 levels
      */
     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;
+    /**
+     * Callback fired when the dropdown list reaches the bottom.
+     * Only fires when `maxHeight` is set and the list is scrollable.
+     */
+    onReachBottom?: () => void;
+    /**
+     * Callback fired when the dropdown list leaves the bottom.
+     * Only fires when `maxHeight` is set and the list is scrollable.
+     */
+    onLeaveBottom?: () => void;
 }
 export default function DropdownItem<T extends DropdownType | undefined = DropdownType>(props: DropdownItemProps<T>): import("react/jsx-runtime").JSX.Element;