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

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 };

package/Dropdown/DropdownAction.d.ts

@@ -0,0 +1,50 @@
+import { ButtonProps } from "../Button";
+export interface DropdownActionProps {
+    /**
+     * The text of the custom action button.
+     */
+    actionText?: string;
+    /**
+     * The text of the cancel button.
+     */
+    cancelText?: string;
+    /**
+     * The text of the clear button.
+     */
+    clearText?: string;
+    /**
+     * The text of the confirm button.
+     */
+    confirmText?: string;
+    /**
+     * The custom action button props of the dropdown.
+     */
+    customActionButtonProps?: ButtonProps;
+    /**
+     * Click handler for cancel button.
+     */
+    onCancel?: () => void;
+    /**
+     * Click handler for clear button.
+     */
+    onClear?: () => void;
+    /**
+     * Click handler for confirm button.
+     */
+    onConfirm?: () => void;
+    /**
+     * Click handler for custom action button.
+     */
+    onClick?: () => void;
+    /**
+     * Whether to show the actions.
+     * @default false
+     */
+    showActions?: boolean;
+    /**
+     * If true, display a bar at the top of the dropdown action area.
+     * @default false
+     */
+    showTopBar?: boolean;
+}
+export default function DropdownAction(props: DropdownActionProps): import("react/jsx-runtime").JSX.Element;

package/Dropdown/DropdownAction.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { dropdownClasses } from '@mezzanine-ui/core/dropdown/dropdown';
+import { CloseIcon } from '@mezzanine-ui/icons';
+import Button from '../Button/Button.js';
+
+const actionButtonSize = 'minor';
+function DropdownAction(props) {
+    const { showActions = false, showTopBar, customActionButtonProps, cancelText, confirmText, actionText, clearText, onCancel, onConfirm, onClick, onClear, } = props;
+    const cancelLabel = cancelText || 'Cancel';
+    const confirmLabel = confirmText || 'Confirm';
+    const actionLabel = actionText || 'Custom Action';
+    const clearLabel = clearText || 'Clear Options';
+    const hasAnyEvent = Boolean(onCancel || onConfirm || onClick || onClear);
+    const isClearMode = Boolean(onClear && !onClick);
+    const isCustomMode = Boolean(onClick && !onClear);
+    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 }))] })] })) }));
+}
+
+export { DropdownAction as default };

package/Dropdown/DropdownItem.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { DropdownItemSharedProps, DropdownOptionsByType, dropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
+import { type DropdownActionProps } from './DropdownAction';
+export interface DropdownItemProps<T extends dropdownType | undefined = dropdownType> extends Omit<DropdownItemSharedProps, 'type'> {
+    /**
+     * The action configuration for the dropdown.
+     */
+    actionConfig?: DropdownActionProps;
+    /**
+     * The active option index for hover/focus state.
+     */
+    activeIndex: number | null;
+    /**
+     * The text to follow.
+     */
+    followText?: string;
+    /**
+     * Custom content rendered before options (e.g. inline trigger).
+     */
+    headerContent?: ReactNode;
+    /**
+     * The listbox id for aria usage.
+     */
+    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;
+    /**
+     * Whether to set the same width as its anchor element.
+     * @default false
+     */
+    sameWidth?: boolean;
+    /**
+     * Callback when hovering option index changes.
+    */
+    onHover?: (index: number) => void;
+    /**
+     * Options to render.
+     * The structure is constrained based on the `type` prop:
+     * - 'default': flat array (no children allowed)
+     * - 'grouped': array with one level of children (children cannot have children)
+     * - 'tree': array with nested children up to 3 levels (strictly enforced at compile time)
+     */
+    options: DropdownOptionsByType<T>;
+    /**
+     * The type of the dropdown.
+     * This prop determines the structure of the `options` array:
+     * - 'default': flat array (no children allowed)
+     * - 'grouped': array with one level of children (children cannot have children)
+     * - 'tree': array with nested children up to 3 levels
+     */
+    type?: dropdownType;
+}
+export default function DropdownItem<T extends dropdownType | undefined = dropdownType>(props: DropdownItemProps<T>): import("react/jsx-runtime").JSX.Element;