@mezzanine-ui/react 1.0.0-alpha.0 → 1.0.0-beta.1

package/Breadcrumb/Breadcrumb.js

@@ -1,25 +1,53 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, isValidElement, cloneElement } from 'react';
 import { SlashIcon } from '@mezzanine-ui/icons';
 import { breadcrumbClasses } from '@mezzanine-ui/core/breadcrumb';
 import BreadcrumbItem from './BreadcrumbItem.js';
+import { flattenChildren } from '../utils/flatten-children.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
+const renderItemWithProps = (item, appendProps) => {
+    if (isValidElement(item)) {
+        return cloneElement(item, appendProps);
+    }
+    return jsx(BreadcrumbItem, { ...item, ...appendProps });
+};
+const renderItems = (items, condensed) => {
+    if (!items) {
+        return null;
+    }
+    const lastIndex = items.length - 1;
+    return (jsxs(Fragment, { children: [!condensed &&
+                lastIndex >= 0 &&
+                renderItemWithProps(items[0], { current: lastIndex === 0 }), !condensed && lastIndex >= 1 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), renderItemWithProps(items[1], { current: lastIndex === 1 })] })), !condensed && items.length <= 4 && (jsxs(Fragment, { children: [lastIndex >= 2 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), renderItemWithProps(items[2], { current: lastIndex === 2 })] })), lastIndex === 3 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), renderItemWithProps(items[3], { current: true })] }))] })), (items.length > 4 || condensed) && (jsxs(Fragment, { children: [!condensed && jsx(Icon, { icon: SlashIcon, size: 14 }), (!condensed || items.length > 2) && (jsxs(Fragment, { children: [jsx(BreadcrumbItem, { options: (condensed
+                                    ? items.slice(0, lastIndex - 1)
+                                    : items.slice(2, lastIndex - 1)).map((item) => {
+                                    if (isValidElement(item)) {
+                                        const { props } = item;
+                                        return {
+                                            label: props.label,
+                                            href: props.href,
+                                            target: props.target,
+                                            id: props.id,
+                                        };
+                                    }
+                                    return {
+                                        label: item.label,
+                                        href: item.href,
+                                        target: item.target,
+                                        id: item.id,
+                                    };
+                                }) }), jsx(Icon, { icon: SlashIcon, size: 14 })] })), lastIndex - 1 >= 0 && (jsxs(Fragment, { children: [renderItemWithProps(items[lastIndex - 1]), jsx(Icon, { icon: SlashIcon, size: 14 })] })), renderItemWithProps(items[lastIndex], { current: true })] }))] }));
+};
 /**
  * The react component for `mezzanine` breadcrumb.
  */
 const Breadcrumb = forwardRef(function Breadcrumb(props, ref) {
-    const { className, condensed, items, ...rest } = props;
-    const lastIndex = items.length - 1;
-    return (jsxs("nav", { ...rest, "aria-label": "Breadcrumb", className: cx(breadcrumbClasses.host, className), ref: ref, children: [!condensed && lastIndex >= 0 && (jsx(BreadcrumbItem, { ...items[0], current: lastIndex === 0 })), !condensed && lastIndex >= 1 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), jsx(BreadcrumbItem, { ...items[1], current: lastIndex === 1 })] })), !condensed && items.length <= 4 && (jsxs(Fragment, { children: [lastIndex >= 2 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), jsx(BreadcrumbItem, { ...items[2], current: lastIndex === 2 })] })), lastIndex === 3 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), jsx(BreadcrumbItem, { ...items[3], current: true })] }))] })), (items.length > 4 || condensed) && (jsxs(Fragment, { children: [!condensed && jsx(Icon, { icon: SlashIcon, size: 14 }), (!condensed || items.length > 2) && (jsxs(Fragment, { children: [jsx(BreadcrumbItem, { options: (condensed
-                                    ? items.slice(0, lastIndex - 1)
-                                    : items.slice(2, lastIndex - 1)).map((item) => ({
-                                    label: item.label,
-                                    href: item.href,
-                                    target: item.target,
-                                    id: item.id,
-                                })) }), jsx(Icon, { icon: SlashIcon, size: 14 })] })), lastIndex - 1 >= 0 && (jsxs(Fragment, { children: [jsx(BreadcrumbItem, { ...items[lastIndex - 1] }), jsx(Icon, { icon: SlashIcon, size: 14 })] })), jsx(BreadcrumbItem, { ...items[lastIndex], current: true })] }))] }));
+    const { children, className, condensed, items, ...rest } = props;
+    const flatChildren = flattenChildren(children);
+    const itemFragment = renderItems(items || flatChildren, condensed);
+    return (jsx("nav", { ...rest, "aria-label": "Breadcrumb", className: cx(breadcrumbClasses.host, className), ref: ref, children: itemFragment }));
 });
 
 export { Breadcrumb as default };

package/Breadcrumb/typings.d.ts

@@ -1,12 +1,17 @@
-import type { JSXElementConstructor } from 'react';
+import type { JSXElementConstructor, ReactElement } from 'react';
 import type { ComponentOverridableForwardRefComponentPropsFactory, NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface BreadcrumbProps extends Omit<NativeElementPropsWithoutKeyAndRef<'nav'>, 'children'> {
+export type BreadcrumbProps = Omit<NativeElementPropsWithoutKeyAndRef<'nav'>, 'children'> & ({
     /**
      * Display only the last two items with an ellipsis dropdown for all previous items
      */
     condensed?: boolean;
     items: Array<BreadcrumbItemProps>;
-}
+    children?: never;
+} | {
+    condensed?: boolean;
+    items?: never;
+    children: ReactElement<BreadcrumbItemProps> | ReactElement<BreadcrumbItemProps>[];
+});
 export type BreadcrumbItemComponent = 'a' | 'button' | JSXElementConstructor<any>;
 export type BreadcrumbItemProps<C extends BreadcrumbItemComponent = 'button'> = ComponentOverridableForwardRefComponentPropsFactory<BreadcrumbItemComponent, C, BreadcrumbDropdownItemProps | BreadcrumbItemTextProps | BreadcrumbLinkItemProps>;
 export type BreadcrumbDropdownItemProps = Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'children'> & {

package/Drawer/Drawer.d.ts

@@ -1,12 +1,53 @@
-import { DrawerPlacement } from '@mezzanine-ui/core/drawer';
-import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
+import { DrawerSize } from '@mezzanine-ui/core/drawer';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface DrawerProps extends Omit<SlideFadeOverlayProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+import { BackdropProps } from '../Backdrop';
+export interface DrawerProps extends NativeElementPropsWithoutKeyAndRef<'div'>, Pick<BackdropProps, 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'onBackdropClick' | 'onClose' | 'open'> {
     /**
-     * Whether the drawer placement.
-     * @default 'left'
+     * Text for the ghost action button in the bottom action area.
      */
-    placement?: DrawerPlacement;
+    bottomGhostActionText?: string;
+    /**
+     * Click handler for the ghost action button in the bottom action area.
+     */
+    bottomOnGhostActionClick?: VoidFunction;
+    /**
+     * Click handler for the primary action button in the bottom action area.
+     */
+    bottomOnPrimaryActionClick?: VoidFunction;
+    /**
+     * Click handler for the secondary action button in the bottom action area.
+     */
+    bottomOnSecondaryActionClick?: VoidFunction;
+    /**
+     * Text for the primary action button in the bottom action area.
+     */
+    bottomPrimaryActionText?: string;
+    /**
+     * Text for the secondary action button in the bottom action area.
+     */
+    bottomSecondaryActionText?: string;
+    /**
+     * Controls whether to disable closing drawer while escape key down.
+     * @default false
+     */
+    disableCloseOnEscapeKeyDown?: boolean;
+    /**
+     * Title text displayed in the drawer header.
+     */
+    headerTitle?: string;
+    /**
+     * Controls whether to display the bottom action area.
+     */
+    isBottomDisplay?: boolean;
+    /**
+     * Controls whether to display the header area.
+     */
+    isHeaderDisplay?: boolean;
+    /**
+     * Controls the width of the drawer.
+     * @default 'medium'
+     */
+    size?: DrawerSize;
 }
 declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Drawer;

package/Drawer/Drawer.js

@@ -1,18 +1,43 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
 import { drawerClasses } from '@mezzanine-ui/core/drawer';
-import SlideFadeOverlay from '../_internal/SlideFadeOverlay/SlideFadeOverlay.js';
+import { useDocumentEscapeKeyDown } from '../hooks/useDocumentEscapeKeyDown.js';
+import useTopStack from '../_internal/SlideFadeOverlay/useTopStack.js';
+import ClearActions from '../ClearActions/ClearActions.js';
+import Button from '../Button/Button.js';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import Backdrop from '../Backdrop/Backdrop.js';
+import Slide from '../Transition/Slide.js';
 import cx from 'clsx';
 
 const Drawer = forwardRef((props, ref) => {
-    const { className, children, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, onBackdropClick, onClose, open, placement = 'left', ...rest } = props;
-    const slideFadeDirection = useMemo(() => ({
-        top: 'down',
-        left: 'right',
-        right: 'left',
-        bottom: 'up',
-    }), []);
-    return (jsx(SlideFadeOverlay, { className: drawerClasses.overlay, container: container, direction: slideFadeDirection[placement], disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsx("div", { ...rest, className: cx(drawerClasses.host, drawerClasses[placement], className), children: children }) }));
+    const { bottomGhostActionText, bottomOnGhostActionClick, bottomOnPrimaryActionClick, bottomOnSecondaryActionClick, bottomPrimaryActionText, bottomSecondaryActionText, children, className, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, headerTitle, isBottomDisplay, isHeaderDisplay, onBackdropClick, onClose, open, size = 'medium', ...rest } = props;
+    const [exited, setExited] = useState(true);
+    /**
+     * Escape keydown close: escape will only close the top drawer
+     */
+    const checkIsOnTheTop = useTopStack(open);
+    useDocumentEscapeKeyDown(() => {
+        if (!open || disableCloseOnEscapeKeyDown || !onClose) {
+            return;
+        }
+        return (event) => {
+            if (checkIsOnTheTop()) {
+                event.stopPropagation();
+                onClose();
+            }
+        };
+    }, [disableCloseOnEscapeKeyDown, checkIsOnTheTop, open, onClose]);
+    if (!open && exited) {
+        return null;
+    }
+    return (jsx(Backdrop, { className: drawerClasses.overlay, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation", children: jsx(Slide, { duration: {
+                enter: MOTION_DURATION.moderate,
+                exit: MOTION_DURATION.moderate,
+            }, easing: {
+                enter: MOTION_EASING.entrance,
+                exit: MOTION_EASING.exit,
+            }, in: open, onEntered: () => setExited(false), onExited: () => setExited(true), ref: ref, children: jsxs("div", { ...rest, className: cx(drawerClasses.host, drawerClasses.right, drawerClasses.size(size), className), children: [isHeaderDisplay && (jsxs("div", { className: drawerClasses.header, children: [headerTitle, jsx(ClearActions, { onClick: onClose })] })), jsx("div", { className: drawerClasses.content, children: children }), isBottomDisplay && (jsxs("div", { className: drawerClasses.bottom, children: [jsx("div", { children: bottomGhostActionText && bottomOnGhostActionClick && (jsx(Button, { onClick: bottomOnGhostActionClick, type: "button", variant: "base-ghost", children: bottomGhostActionText })) }), jsxs("div", { className: drawerClasses['bottom__actions'], children: [bottomSecondaryActionText && bottomOnSecondaryActionClick && (jsx(Button, { onClick: bottomOnSecondaryActionClick, type: "button", variant: "base-secondary", children: bottomSecondaryActionText })), bottomPrimaryActionText && bottomOnPrimaryActionClick && (jsx(Button, { onClick: bottomOnPrimaryActionClick, type: "button", variant: "base-primary", children: bottomPrimaryActionText }))] })] }))] }) }) }));
 });
 
 export { Drawer as default };

package/Dropdown/Dropdown.d.ts

@@ -1,25 +1,126 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode, Ref } from 'react';
-import { PopperProps } from '../Popper';
-import { ClickAwayEvent } from '../hooks/useClickAway';
-export interface DropdownProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'children'> {
-    children: (ref: Ref<any>) => ReactNode;
+import { ReactElement } from 'react';
+import { dropdownInputPosition, DropdownItemSharedProps, DropdownOption, dropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
+import { ButtonProps } from '../Button';
+import { InputProps } from '../Input';
+import { PopperPlacement } from '../Popper';
+export interface DropdownProps extends DropdownItemSharedProps {
     /**
-     * Whether to disable triggering onClose while clicked away.
+     * The text of the cancel button.
+     */
+    actionCancelText?: string;
+    /**
+     * The text of the clear button.
+     */
+    actionClearText?: string;
+    /**
+     * The text of the confirm button.
+     */
+    actionConfirmText?: string;
+    /**
+     * The custom action button props of the dropdown.
+     */
+    actionCustomButtonProps?: ButtonProps;
+    /**
+     * The text of the custom action button.
+     */
+    actionText?: string;
+    /**
+     * The active option index for hover/focus state.
+     */
+    activeIndex?: number | null;
+    /**
+     * The children of the dropdown.
+     * This can be a button or an input.
+     */
+    children: ReactElement<ButtonProps> | ReactElement<InputProps>;
+    /**
+     * Whether the dropdown is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of the dropdown.
+     */
+    id?: string;
+    /**
+     * The position of the input.
+     * @default 'outside'
+     */
+    inputPosition?: dropdownInputPosition;
+    /**
+     * Whether to match the input value.
+     * @default false
+     */
+    isMatchInputValue?: boolean;
+    /**
+     * The listbox id of the dropdown.
+     */
+    listboxId?: string;
+    /**
+     * The aria-label for the listbox.
+     * If not provided, a default label will be used when there are no options.
+     */
+    listboxLabel?: string;
+    /**
+     * The max height of the dropdown list.
+     */
+    maxHeight?: number | string;
+    /**
+     * Callback fired when the action cancel is clicked.
+     */
+    onActionCancel?: () => void;
+    /**
+     * Callback fired when the action clear is clicked.
+     */
+    onActionClear?: () => void;
+    /**
+     * Callback fired when the action confirm is clicked.
+     */
+    onActionConfirm?: () => void;
+    /**
+     * Callback fired when the action custom is clicked.
+     */
+    onActionCustom?: () => void;
+    /**
+     * Callback fired when the dropdown is closed.
+     */
+    onClose?: () => void;
+    /**
+     * Callback fired when the item is hovered.
+     */
+    onItemHover?: (index: number) => void;
+    /**
+     * Callback fired when the dropdown is opened.
+     */
+    onOpen?: () => void;
+    /**
+     * Callback fired when the item is selected.
+     */
+    onSelect?: (option: DropdownOption) => void;
+    /**
+     * The options of the dropdown.
+     */
+    options: DropdownOption[];
+    /**
+     * The placement of the dropdown.
+     */
+    placement?: PopperPlacement;
+    /**
+     * Whether to set the same width as its anchor element.
      * @default false
      */
-    disableClickAway?: boolean;
+    sameWidth?: boolean;
     /**
-     * The dropdown menu
+     * If true, display a bar at the top of the dropdown action area.
+     * @default false
      */
-    menu?: ReactNode;
+    showActionShowTopBar?: boolean;
     /**
-     * The handler fired while clicked away.
+     * Whether to show the actions.
      */
-    onClose?: (event: ClickAwayEvent) => void;
+    showDropdownActions?: boolean;
     /**
-     * the props of popper
+     * The type of the dropdown.
      */
-    popperProps?: PopperProps;
+    type?: dropdownType;
 }
-declare const Dropdown: import("react").ForwardRefExoticComponent<DropdownProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Dropdown;
+export default function Dropdown(props: DropdownProps): import("react/jsx-runtime").JSX.Element;

package/Dropdown/Dropdown.js

@@ -1,42 +1,245 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { size } from '@floating-ui/react-dom';
-import { useClickAway } from '../hooks/useClickAway.js';
-import { useComposeRefs } from '../hooks/useComposeRefs.js';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useMemo, useState, useRef, useEffect, useCallback, 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 { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import { TransitionGroup } from 'react-transition-group';
+import Button from '../Button/Button.js';
+import { useDocumentEvents } from '../hooks/useDocumentEvents.js';
+import Translate from '../Transition/Translate.js';
+import { composeRefs } from '../utils/composeRefs.js';
+import DropdownItem from './DropdownItem.js';
 import Popper from '../Popper/Popper.js';
 
-// Middleware to make the dropdown menu have the same width as the reference element
-const sameWidthMiddleware = size({
-    apply({ rects, elements }) {
-        Object.assign(elements.floating.style, {
-            width: 'auto',
-            minWidth: `${rects.reference.width}px`,
+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 isInline = inputPosition === 'inside';
+    const inputId = useId();
+    const defaultListboxId = `${inputId}-listbox`;
+    const listboxId = listboxIdProp !== null && listboxIdProp !== void 0 ? listboxIdProp : defaultListboxId;
+    const actionConfig = useMemo(() => {
+        return {
+            showActions: showDropdownActions,
+            cancelText: actionCancelText,
+            confirmText: actionConfirmText,
+            clearText: actionClearText,
+            actionText,
+            customActionButtonProps: actionCustomButtonProps,
+            showTopBar: showActionShowTopBar,
+            onConfirm: onActionConfirm,
+            onCancel: onActionCancel,
+            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);
+    const isActiveIndexControlled = activeIndexProp !== undefined;
+    const mergedActiveIndex = isActiveIndexControlled ? activeIndexProp : uncontrolledActiveIndex;
+    const containerRef = useRef(null);
+    const ariaActivedescendant = useMemo(() => {
+        if (mergedActiveIndex !== null && mergedActiveIndex >= 0) {
+            return `${listboxId}-option-${mergedActiveIndex}`;
+        }
+        return undefined;
+    }, [mergedActiveIndex, listboxId]);
+    const translateProps = useMemo(() => ({
+        duration: {
+            enter: MOTION_DURATION.moderate,
+            exit: MOTION_DURATION.moderate,
+        },
+        easing: {
+            enter: MOTION_EASING.standard,
+            exit: MOTION_EASING.standard,
+        },
+    }), []);
+    const followText = useMemo(() => {
+        var _a, _b, _c, _d;
+        if (children.type === Button) {
+            return undefined;
+        }
+        if (!isMatchInputValue) {
+            return undefined;
+        }
+        // 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]);
+    const popoverPlacement = useMemo(() => {
+        if (inputPosition === 'outside') {
+            return placement;
+        }
+        return 'bottom';
+    }, [inputPosition, placement]);
+    const sameWidthMiddleware = useMemo(() => {
+        if (!sameWidth) {
+            return null;
+        }
+        return size({
+            apply({ rects, elements }) {
+                Object.assign(elements.floating.style, {
+                    width: `${rects.reference.width}px`,
+                });
+            },
         });
-    },
-});
-const Dropdown = forwardRef(function Dropdown(props, ref) {
-    var _a;
-    const { children, disableClickAway = false, menu, onClose, popperProps, ...rest } = props;
-    const anchor = useRef(null);
+    }, [sameWidth]);
+    const offsetMiddleware = useMemo(() => {
+        return offset({ mainAxis: 4 });
+    }, []);
+    const prevIsOpenRef = useRef(isOpen);
+    const translateFrom = useMemo(() => {
+        if (isInline) {
+            return 'bottom';
+        }
+        const placementBase = popoverPlacement.split('-')[0];
+        return placementBase === 'top' ? 'top' : 'bottom';
+    }, [isInline, popoverPlacement]);
+    useEffect(() => {
+        if (prevIsOpenRef.current === isOpen)
+            return;
+        if (isOpen) {
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        }
+        else {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+        prevIsOpenRef.current = isOpen;
+    }, [isOpen, onClose, onOpen]);
+    const anchorRef = useRef(null);
     const popperRef = useRef(null);
-    const composedRef = useComposeRefs([ref, popperRef]);
-    const open = popperProps === null || popperProps === void 0 ? void 0 : popperProps.open;
-    const middleware = ((_a = popperProps === null || popperProps === void 0 ? void 0 : popperProps.options) === null || _a === void 0 ? void 0 : _a.middleware) || [];
-    useClickAway(() => {
-        if (!open || disableClickAway || !onClose) {
+    // Extract combobox props logic to avoid duplication
+    const getComboboxProps = useMemo(() => {
+        const childWithRef = children;
+        const isInput = childWithRef.type !== Button;
+        if (!isInput)
+            return {};
+        return {
+            role: 'combobox',
+            'aria-controls': listboxId,
+            'aria-expanded': isOpen,
+            'aria-haspopup': 'listbox',
+            'aria-autocomplete': isMatchInputValue ? 'list' : undefined,
+            'aria-activedescendant': ariaActivedescendant,
+        };
+    }, [children, listboxId, isOpen, isMatchInputValue, ariaActivedescendant]);
+    const handleItemHover = useCallback((index) => {
+        if (!isActiveIndexControlled) {
+            setUncontrolledActiveIndex(index);
+        }
+        onItemHover === null || onItemHover === void 0 ? void 0 : onItemHover(index);
+    }, [isActiveIndexControlled, onItemHover]);
+    // Extract shared DropdownItem props to avoid duplication
+    const baseDropdownItemProps = useMemo(() => ({
+        actionConfig,
+        activeIndex: mergedActiveIndex,
+        disabled,
+        followText,
+        listboxId,
+        listboxLabel,
+        maxHeight,
+        sameWidth,
+        onHover: handleItemHover,
+        onSelect,
+        options,
+        type,
+    }), [actionConfig, mergedActiveIndex, disabled, followText, listboxId, listboxLabel, maxHeight, sameWidth, handleItemHover, onSelect, options, type]);
+    const triggerElement = useMemo(() => {
+        const childWithRef = children;
+        const composedRef = composeRefs([
+            anchorRef,
+            childWithRef.ref,
+        ]);
+        return cloneElement(childWithRef, {
+            ref: composedRef,
+            ...getComboboxProps,
+            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;
+                if (!isInline) {
+                    setIsOpen((prev) => !prev);
+                }
+            },
+        });
+    }, [children, isInline, getComboboxProps]);
+    const inlineTriggerElement = useMemo(() => {
+        if (!isInline) {
+            return null;
+        }
+        const childWithRef = children;
+        const composedRef = composeRefs([
+            childWithRef.ref,
+        ]);
+        return cloneElement(childWithRef, {
+            ref: composedRef,
+            ...getComboboxProps,
+            onBlur: (event) => {
+                var _a, _b;
+                (_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;
+                const nextFocusTarget = event === null || event === void 0 ? void 0 : event.relatedTarget;
+                const container = containerRef.current;
+                if (container && nextFocusTarget && container.contains(nextFocusTarget)) {
+                    return;
+                }
+                setIsOpen(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);
+            },
+            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);
+            },
+        });
+    }, [children, isInline, isOpen, getComboboxProps]);
+    useDocumentEvents(() => {
+        if (!isOpen) {
             return;
         }
-        return (event) => {
-            if (onClose) {
-                onClose(event);
+        const handleClickAway = (event) => {
+            const target = event.target;
+            const anchor = anchorRef.current;
+            const popper = popperRef.current;
+            const container = containerRef.current;
+            if (!target)
+                return;
+            if (isInline) {
+                if (container && !container.contains(target)) {
+                    setIsOpen(false);
+                }
+                return;
             }
+            if (anchor && popper && !anchor.contains(target) && !popper.contains(target)) {
+                setIsOpen(false);
+            }
+        };
+        return {
+            click: handleClickAway,
+            touchend: handleClickAway,
         };
-    }, popperRef, [disableClickAway, onClose, open, popperRef]);
-    return (jsxs(Fragment, { children: [children(anchor), jsx(Popper, { ...popperProps, ref: composedRef, ...rest, anchor: anchor, options: {
-                    placement: 'top-start',
-                    ...popperProps === null || popperProps === void 0 ? void 0 : popperProps.options,
-                    middleware: [sameWidthMiddleware, ...middleware],
-                }, children: menu })] }));
-});
+    }, [isInline, isOpen]);
+    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: {
+                    placement: popoverPlacement,
+                    middleware: [
+                        offsetMiddleware,
+                        ...(sameWidthMiddleware ? [sameWidthMiddleware] : []),
+                    ],
+                }, 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] }));
+}
 
 export { Dropdown as default };