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

package/AutoComplete/AutoComplete.d.ts

@@ -40,6 +40,11 @@ export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active'
      * @important When using with react-hook-form or native forms, this prop is recommended.
      */
     id?: string;
+    /**
+     * Whether to keep search text visible after blur when no value is selected.
+     * @default false
+     */
+    keepSearchTextOnBlur?: boolean;
     /**
      * The position of the input.
      * @default 'outside'
@@ -86,6 +91,10 @@ export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active'
      * Can return a Promise for async data loading
      */
     onSearch?(input: string): void | Promise<void>;
+    /**
+     * Callback fired on every input change (no debounce).
+     */
+    onSearchTextChange?(text: string): void;
     /**
      * Callback fired when the dropdown visibility changes.
      */
@@ -135,6 +144,20 @@ export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active'
      * @default '建立 "{text}"'
      */
     createActionTextTemplate?: string;
+    /**
+     * The z-index of the dropdown.
+     */
+    dropdownZIndex?: number | string;
+    /**
+     * Callback fired when the dropdown list reaches the bottom.
+     * Only fires when `menuMaxHeight` is set and the list is scrollable.
+     */
+    onReachBottom?: () => void;
+    /**
+     * Callback fired when the dropdown list leaves the bottom.
+     * Only fires when `menuMaxHeight` is set and the list is scrollable.
+     */
+    onLeaveBottom?: () => void;
 }
 export type AutoCompleteMultipleProps = AutoCompleteBaseProps & {
     /**

package/AutoComplete/AutoComplete.js

@@ -46,7 +46,7 @@ function isOptionSelected(option, value, isMultiple) {
  */
 const AutoComplete = forwardRef(function AutoComplete(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { addable = false, asyncData = false, className, createSeparators = [',', '+', '\n'], defaultValue, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, emptyText, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, id, inputPosition = 'outside', inputProps, inputRef, loading = false, loadingText, menuMaxHeight, mode = 'single', name, onClear: onClearProp, onChange: onChangeProp, onInsert, onSearch, onVisibilityChange, open: openProp, options: optionsProp, placeholder = '', prefix, required = requiredFromFormControl || false, searchDebounceTime = 300, searchTextControlRef, size, trimOnCreate = true, value: valueProp, createActionText, createActionTextTemplate = '建立 "{text}"', } = props;
+    const { addable = false, asyncData = false, className, createSeparators = [',', '+', '\n'], defaultValue, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, emptyText, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, id, keepSearchTextOnBlur = false, inputPosition = 'outside', inputProps, inputRef, loading = false, loadingText, menuMaxHeight, mode = 'single', name, onClear: onClearProp, onChange: onChangeProp, onInsert, onSearch, onSearchTextChange, onVisibilityChange, open: openProp, options: optionsProp, placeholder = '', prefix, required = requiredFromFormControl || false, searchDebounceTime = 300, searchTextControlRef, size, trimOnCreate = true, value: valueProp, createActionText, createActionTextTemplate = '建立 "{text}"', dropdownZIndex, onReachBottom, onLeaveBottom, } = props;
     const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
     const isMultiple = mode === 'multiple';
     const isSingle = !isMultiple;
@@ -147,14 +147,15 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
     // In single mode, show searchText when focused, otherwise show selected value
     // In multiple mode, always return empty string to avoid displaying "0"
     const renderValue = useMemo(() => {
-        if (isSingle && focused) {
+        if (isSingle
+            && (focused || (keepSearchTextOnBlur && !value && searchText))) {
             return () => searchText;
         }
         if (isMultiple) {
             return () => '';
         }
         return undefined;
-    }, [focused, isMultiple, isSingle, searchText]);
+    }, [focused, isMultiple, isSingle, keepSearchTextOnBlur, searchText, value]);
     function getPlaceholder() {
         if (isSingle && focused && isSingleValue(value)) {
             return value.name;
@@ -167,6 +168,7 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
         /** should sync both search input and value */
         setSearchText(nextSearch);
         setInsertText(nextSearch);
+        onSearchTextChange === null || onSearchTextChange === void 0 ? void 0 : onSearchTextChange(nextSearch);
         if (autoSelectMatchingOption(nextSearch))
             return;
         if (!nextSearch) {
@@ -201,17 +203,33 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
                 // Don't let Dropdown's onBlur close the dropdown when controlled
                 // Only call onFocus(false) to update internal state
                 onFocus(false);
+                // Clear search text and insert text when blur if keepSearchTextOnBlur is false
+                if (!keepSearchTextOnBlur) {
+                    resetCreationInputs();
+                }
                 (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
                 return;
             }
             // For uncontrolled mode, let Dropdown handle it normally
             // Dropdown's inlineTriggerElement will handle the blur and close logic
+            // Clear search text and insert text when blur if keepSearchTextOnBlur is false
+            if (!keepSearchTextOnBlur) {
+                resetCreationInputs();
+            }
             (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(inputProps, e);
             return;
         }
         onFocus(false);
+        // Clear search text and insert text when blur if keepSearchTextOnBlur is false
+        if (!keepSearchTextOnBlur) {
+            resetCreationInputs();
+        }
         (_c = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _c === void 0 ? void 0 : _c.call(inputProps, e);
     };
+    const handleClear = useCallback((e) => {
+        onClear(e);
+        resetCreationInputs();
+    }, [onClear, resetCreationInputs]);
     const onClickSuffixActionIcon = () => {
         toggleOpen((prev) => !prev);
     };
@@ -231,10 +249,10 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
             // Multiple mode: show checkbox at prepend
             // Single mode: show checked icon at append when selected
             if (mode === 'multiple') {
-                result.checkSite = 'prepend';
+                result.checkSite = 'prefix';
             }
             else {
-                result.checkSite = 'append';
+                result.checkSite = 'suffix';
             }
             // Set shortcutText to "New" for created items (persists even after selection)
             if (created) {
@@ -267,14 +285,21 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
     const handleDropdownSelect = useCallback((option) => {
         const selectedValue = options.find((opt) => opt.id === option.id);
         if (selectedValue) {
-            wrappedOnChange(selectedValue);
             // Close dropdown after selection in single mode
             if (mode === 'single') {
+                // Update searchText first to prevent showing old value
+                setSearchText(selectedValue.name);
+                setInsertText(selectedValue.name);
+                // Then update value and focus state
+                wrappedOnChange(selectedValue);
                 toggleOpen(false);
                 onFocus(false);
             }
+            else {
+                wrappedOnChange(selectedValue);
+            }
         }
-    }, [mode, onFocus, options, toggleOpen, wrappedOnChange]);
+    }, [mode, onFocus, options, setSearchText, setInsertText, toggleOpen, wrappedOnChange]);
     // Active index for dropdown keyboard navigation
     const [activeIndex, setActiveIndex] = useState(null);
     const setListboxHasVisualFocus = useCallback(() => { }, []);
@@ -349,10 +374,13 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
             return false;
         if (isSingle) {
             if (!value) {
+                // Update searchText first to prevent showing old value
+                setSearchText(matchingOption.name);
+                setInsertText(matchingOption.name);
+                // Then update value and focus state
                 wrappedOnChange(matchingOption);
                 toggleOpen(false);
                 onFocus(false);
-                resetCreationInputs();
                 return true;
             }
             return false;
@@ -371,6 +399,8 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
         onFocus,
         options,
         resetCreationInputs,
+        setSearchText,
+        setInsertText,
         toggleOpen,
         value,
         wrappedOnChange,
@@ -400,7 +430,7 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
                         : createActionTextTemplate.replace('{text}', insertText))
                     : undefined, activeIndex: activeIndex, disabled: isInputDisabled, emptyText: emptyText, followText: searchText, inputPosition: inputPosition, isMatchInputValue: true, listboxId: menuId, loadingText: loadingText, maxHeight: menuMaxHeight, mode: mode, onActionCustom: shouldShowCreateAction
                     ? handleActionCustom
-                    : undefined, onItemHover: setActiveIndex, onSelect: handleDropdownSelect, onVisibilityChange: handleVisibilityChange, open: open, options: dropdownOptionsForRender, placement: "bottom", sameWidth: true, showDropdownActions: shouldShowCreateAction, showActionShowTopBar: shouldShowCreateAction, status: dropdownStatus, type: "default", value: dropdownValue, children: jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, disabled: isInputDisabled, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: wrappedOnChange, onClear: onClear, placeholder: getPlaceholder(), prefix: prefix, readOnly: false, required: required, type: error ? 'error' : 'default', inputProps: {
+                    : undefined, onItemHover: setActiveIndex, onSelect: handleDropdownSelect, onVisibilityChange: handleVisibilityChange, open: open, options: dropdownOptionsForRender, placement: "bottom", sameWidth: true, showDropdownActions: shouldShowCreateAction, showActionShowTopBar: shouldShowCreateAction, status: dropdownStatus, type: "default", value: dropdownValue, zIndex: dropdownZIndex, onReachBottom: onReachBottom, onLeaveBottom: onLeaveBottom, children: jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, isForceClearable: true, disabled: isInputDisabled, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: wrappedOnChange, onClear: handleClear, placeholder: getPlaceholder(), prefix: prefix, readOnly: false, required: required, type: error ? 'error' : 'default', inputProps: {
                         ...resolvedInputProps,
                         onClick: (e) => {
                             var _a;

package/Breadcrumb/Breadcrumb.js

@@ -1,9 +1,10 @@
 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 { SlashIcon } from '@mezzanine-ui/icons';
 import { flattenChildren } from '../utils/flatten-children.js';
+import BreadcrumbItem from './BreadcrumbItem.js';
+import { BreadcrumbOverflowMenu } from './BreadcrumbOverflowMenu.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -13,32 +14,26 @@ const renderItemWithProps = (item, appendProps) => {
     }
     return jsx(BreadcrumbItem, { ...item, ...appendProps });
 };
+const convertToPropsWithId = (item) => {
+    if (isValidElement(item)) {
+        return { id: item.props.id || item.props.name, ...item.props };
+    }
+    return { id: item.id || item.name, ...item };
+};
 const renderItems = (items, condensed) => {
     if (!items) {
         return null;
     }
     const lastIndex = items.length - 1;
+    const hasOverflowDropdownIcon = !condensed || items.length > 2;
+    const collapsedProps = hasOverflowDropdownIcon
+        ? condensed
+            ? items.map((v) => convertToPropsWithId(v)).slice(0, lastIndex - 1)
+            : items.map((v) => convertToPropsWithId(v)).slice(2, lastIndex - 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 })] }))] }));
+                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 }), hasOverflowDropdownIcon && (jsxs(Fragment, { children: [jsx(BreadcrumbOverflowMenu, { collapsedProps: collapsedProps }), 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.

package/Breadcrumb/BreadcrumbDropdown.d.ts

@@ -0,0 +1,11 @@
+declare const BreadcrumbDropdown: import("react").ForwardRefExoticComponent<Omit<import("../Dropdown").DropdownProps, "children"> & {
+    className?: string;
+    current?: boolean;
+    href?: never;
+    id?: string;
+    name: string;
+    onClick?: () => void;
+    open?: boolean;
+    target?: never;
+} & import("react").RefAttributes<HTMLSpanElement>>;
+export default BreadcrumbDropdown;

package/Breadcrumb/BreadcrumbDropdown.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { ChevronDownIcon } from '@mezzanine-ui/icons';
+import { breadcrumbItemClasses } from '@mezzanine-ui/core/breadcrumb';
+import Typography from '../Typography/Typography.js';
+import Dropdown from '../Dropdown/Dropdown.js';
+import Rotate from '../Transition/Rotate.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const BreadcrumbDropdown = forwardRef(function BreadcrumbDropdown(props, ref) {
+    const { className, current, name, onClick, open: openProp, options, ...rest } = props;
+    const [_open, setOpen] = useState(false);
+    const open = openProp !== null && openProp !== void 0 ? openProp : _open;
+    const handleClick = () => {
+        setOpen(!open);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (jsx("span", { className: cx(breadcrumbItemClasses.host, className), ref: ref, children: jsx(Dropdown, { onClose: () => setOpen(false), onOpen: () => handleClick(), options: options, placement: "bottom-start", ...rest, children: jsxs("button", { className: cx(breadcrumbItemClasses.trigger, open && breadcrumbItemClasses.expanded, current && breadcrumbItemClasses.current), type: "button", children: [name && (jsx(Typography, { variant: current ? 'caption-highlight' : 'caption', children: name })), jsx(Rotate, { in: open, children: jsx(Icon, { className: breadcrumbItemClasses.icon, icon: ChevronDownIcon, size: 14 }) })] }) }) }));
+});
+
+export { BreadcrumbDropdown as default };

package/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,4 +1,3 @@
-declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("..").ComponentPropsWithoutKeyAndRef<"button">, "expand" | "label" | "component" | "current" | "options" | "href" | "target"> & (import("./typings").BreadcrumbDropdownItemProps | import("./typings").BreadcrumbItemTextProps | import("./typings").BreadcrumbLinkItemProps), "component"> & {
-    component?: import("./typings").BreadcrumbItemComponent | undefined;
-} & import("react").RefAttributes<HTMLElement>>;
+import type { BreadcrumbItemProps } from './typings';
+declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<BreadcrumbItemProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default BreadcrumbItem;

package/Breadcrumb/BreadcrumbItem.js

@@ -1,45 +1,27 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
-import { ChevronDownIcon, DotHorizontalIcon } from '@mezzanine-ui/icons';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import { breadcrumbItemClasses } from '@mezzanine-ui/core/breadcrumb';
 import Typography from '../Typography/Typography.js';
-import Rotate from '../Transition/Rotate.js';
-import Icon from '../Icon/Icon.js';
-import Menu from '../Menu/Menu.js';
-import MenuItem from '../Menu/MenuItem.js';
+import BreadcrumbDropdown from './BreadcrumbDropdown.js';
 import cx from 'clsx';
 
 const BreadcrumbItem = forwardRef(function BreadcrumbItem(props, ref) {
-    const { className, component, current, expand: expandProp, label, onClick, onTouchEnd, options, ...rest } = props;
-    const [_expand, setExpand] = useState(false);
-    const expand = expandProp !== null && expandProp !== void 0 ? expandProp : _expand;
-    const Component = (() => {
+    if ('options' in props)
+        return jsx(BreadcrumbDropdown, { ...props });
+    const { className, component, current, href, name, onClick, rel, target, ...rest } = props;
+    const TriggerComponent = (() => {
         if (component)
             return component;
-        if ('onClick' in props || 'options' in props) {
-            return 'button';
-        }
-        if (!current && 'href' in props && typeof props.href === 'string') {
+        if ((!current && 'href' in props && typeof props.href === 'string') ||
+            'onClick' in props) {
             return 'a';
         }
-        return 'div';
+        return 'span';
     })();
-    const handleClick = (e) => {
-        setExpand(!expand);
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    };
-    const handleTouchEnd = (e) => {
-        setExpand(!expand);
-        onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(e);
+    const handleClick = () => {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return (jsxs(Component, { ...rest, "aria-expanded": options ? expand : undefined, "aria-haspopup": options ? 'true' : undefined, className: cx(breadcrumbItemClasses.host, expand && breadcrumbItemClasses.expanded, current && breadcrumbItemClasses.current, className), onClick: Component === 'button' ? handleClick : undefined, onTouchEnd: Component === 'button' ? handleTouchEnd : undefined, ref: ref, children: [label && (jsx(Typography, { variant: current ? 'caption-highlight' : 'caption', children: label })), 'options' in props &&
-                (label ? (
-                /* normal dropdown icon item */
-                jsx(Rotate, { in: expand, children: jsx(Icon, { className: breadcrumbItemClasses.icon, icon: ChevronDownIcon, size: 14 }) })) : (
-                /* overflow dropdown icon item */
-                jsx(Icon, { className: breadcrumbItemClasses.icon, icon: DotHorizontalIcon, size: 14 }))), options && expand && (jsx(Menu, { className: breadcrumbItemClasses.menu, children: options
-                    .filter((v) => v.label)
-                    .map((option) => (jsx(MenuItem, { children: option.label }, option.id || option.label))) }))] }));
+    return (jsx("span", { ...rest, className: cx(breadcrumbItemClasses.host, className), ref: ref, children: jsx(TriggerComponent, { className: cx(breadcrumbItemClasses.trigger, current && breadcrumbItemClasses.current), href: TriggerComponent === 'a' ? href : undefined, onClick: TriggerComponent === 'a' ? handleClick : undefined, rel: TriggerComponent === 'a' ? rel : undefined, target: TriggerComponent === 'a' ? target : undefined, children: name && (jsx(Typography, { variant: current ? 'caption-highlight' : 'caption', children: name })) }) }));
 });
 
 export { BreadcrumbItem as default };

package/Breadcrumb/BreadcrumbOverflowMenu.d.ts

@@ -0,0 +1,7 @@
+import { HtmlHTMLAttributes } from 'react';
+import { BreadcrumbItemProps } from './typings';
+export declare const BreadcrumbOverflowMenu: (props: HtmlHTMLAttributes<HTMLButtonElement> & {
+    collapsedProps: (BreadcrumbItemProps & {
+        id: string;
+    })[];
+}) => import("react/jsx-runtime").JSX.Element;

package/Breadcrumb/BreadcrumbOverflowMenu.js

@@ -0,0 +1,77 @@
+'use client';
+import { useState, useRef, useMemo, useCallback, createElement } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { TransitionGroup } from 'react-transition-group';
+import { breadcrumbClasses } from '@mezzanine-ui/core/breadcrumb';
+import { DotHorizontalIcon } from '@mezzanine-ui/icons';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import { useDocumentEvents } from '../hooks/useDocumentEvents.js';
+import BreadcrumbOverflowMenuItem from './BreadcrumbOverflowMenuItem.js';
+import Icon from '../Icon/Icon.js';
+import Popper from '../Popper/Popper.js';
+import Translate from '../Transition/Translate.js';
+import cx from 'clsx';
+
+const BreadcrumbOverflowMenu = (props) => {
+    const { onClick, className, collapsedProps, ...rest } = props;
+    const [menuOpen, setMenuOpen] = useState(false);
+    const targetRef = useRef(null);
+    const popperRef = useRef(null);
+    const translateProps = useMemo(() => ({
+        duration: {
+            enter: MOTION_DURATION.moderate,
+            exit: MOTION_DURATION.moderate,
+        },
+        easing: {
+            enter: MOTION_EASING.standard,
+            exit: MOTION_EASING.standard,
+        },
+    }), []);
+    useDocumentEvents(() => {
+        if (!menuOpen) {
+            return;
+        }
+        const handleClickAway = (event) => {
+            const target = event.target;
+            const anchor = targetRef.current;
+            const popper = popperRef.current;
+            if (!target)
+                return;
+            if (anchor &&
+                popper &&
+                !anchor.contains(target) &&
+                !popper.contains(target)) {
+                setMenuOpen(false);
+            }
+        };
+        return {
+            click: handleClickAway,
+            touchend: handleClickAway,
+        };
+    }, [menuOpen]);
+    const zIndexMiddleware = useMemo(() => {
+        const zIndexValue = 1;
+        return {
+            name: 'zIndex',
+            fn: ({ elements }) => {
+                const zIndexNum = zIndexValue
+                    ;
+                Object.assign(elements.floating.style, {
+                    zIndex: zIndexNum,
+                });
+                return {};
+            },
+        };
+    }, []);
+    const buttonOnClick = useCallback((e) => {
+        setMenuOpen(!menuOpen);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    }, [menuOpen, onClick]);
+    return (jsxs(Fragment, { children: [jsx("button", { "aria-label": 'more options', type: "button", ...rest, ref: targetRef, className: cx(breadcrumbClasses.iconButton, className), onClick: buttonOnClick, children: jsx(Icon, { icon: DotHorizontalIcon, size: 14 }) }), jsx(Popper, { anchor: targetRef.current, disablePortal: true, open: menuOpen, options: {
+                    middleware: [zIndexMiddleware],
+                    placement: 'bottom-start',
+                }, ref: popperRef, children: jsx(TransitionGroup, { component: null, children: menuOpen && (createElement(Translate, { ...translateProps, from: 'bottom', in: true, key: "popper-list" },
+                        jsx("span", { className: breadcrumbClasses.menu, children: jsx("span", { className: breadcrumbClasses.menuContent, children: collapsedProps.map((v) => (jsx(BreadcrumbOverflowMenuItem, { ...v }, v.id))) }) }))) }) })] }));
+};
+
+export { BreadcrumbOverflowMenu };

package/Breadcrumb/BreadcrumbOverflowMenuDropdown.d.ts

@@ -0,0 +1,11 @@
+declare const BreadcrumbOverflowMenuDropdown: import("react").ForwardRefExoticComponent<Omit<import("../Dropdown").DropdownProps, "children"> & {
+    className?: string;
+    current?: boolean;
+    href?: never;
+    id?: string;
+    name: string;
+    onClick?: () => void;
+    open?: boolean;
+    target?: never;
+} & import("react").RefAttributes<HTMLSpanElement>>;
+export default BreadcrumbOverflowMenuDropdown;

package/Breadcrumb/BreadcrumbOverflowMenuDropdown.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { breadcrumbOverflowMenuItemClasses } from '@mezzanine-ui/core/breadcrumb';
+import { ChevronRightIcon } from '@mezzanine-ui/icons';
+import Typography from '../Typography/Typography.js';
+import Dropdown from '../Dropdown/Dropdown.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const BreadcrumbOverflowMenuDropdown = forwardRef(function BreadcrumbOverflowMenuDropdown(props, ref) {
+    const { className, name, onClick, open: openProp, options, ...rest } = props;
+    const [_open, setOpen] = useState(false);
+    const open = openProp !== null && openProp !== void 0 ? openProp : _open;
+    const handleClick = () => {
+        setOpen(!open);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (jsx("span", { className: cx(breadcrumbOverflowMenuItemClasses.host, open && breadcrumbOverflowMenuItemClasses.expanded, className), ref: ref, children: jsx(Dropdown, { onClose: () => setOpen(false), onOpen: () => handleClick(), options: options, placement: "right-start", ...rest, children: jsxs("button", { className: cx(breadcrumbOverflowMenuItemClasses.trigger), type: "button", children: [jsx(Typography, { variant: 'label-primary', children: name }), jsx(Icon, { className: breadcrumbOverflowMenuItemClasses.icon, icon: ChevronRightIcon, size: 16 })] }) }) }));
+});
+
+export { BreadcrumbOverflowMenuDropdown as default };

package/Breadcrumb/BreadcrumbOverflowMenuItem.d.ts

@@ -0,0 +1,3 @@
+import type { BreadcrumbItemProps } from './typings';
+declare const BreadcrumbOverflowMenuItem: import("react").ForwardRefExoticComponent<BreadcrumbItemProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default BreadcrumbOverflowMenuItem;

package/Breadcrumb/BreadcrumbOverflowMenuItem.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { breadcrumbOverflowMenuItemClasses } from '@mezzanine-ui/core/breadcrumb';
+import Typography from '../Typography/Typography.js';
+import BreadcrumbOverflowMenuDropdown from './BreadcrumbOverflowMenuDropdown.js';
+import cx from 'clsx';
+
+const BreadcrumbOverflowMenuItem = forwardRef(function BreadcrumbOverflowMenuItem(props, ref) {
+    if ('options' in props)
+        return jsx(BreadcrumbOverflowMenuDropdown, { ...props });
+    const { className, component, current, href, name, onClick, rel, target, ...rest } = props;
+    const TriggerComponent = (() => {
+        if (component)
+            return component;
+        if ((!current && 'href' in props && typeof props.href === 'string') ||
+            'onClick' in props) {
+            return 'a';
+        }
+        return 'span';
+    })();
+    const handleClick = () => {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (jsx("span", { ...rest, className: cx(breadcrumbOverflowMenuItemClasses.host, className), ref: ref, children: jsx(TriggerComponent, { className: cx(breadcrumbOverflowMenuItemClasses.trigger), href: TriggerComponent === 'a' ? href : undefined, onClick: TriggerComponent === 'a' ? handleClick : undefined, rel: TriggerComponent === 'a' ? rel : undefined, target: TriggerComponent === 'a' ? target : undefined, children: jsx(Typography, { variant: 'label-primary', children: name }) }) }));
+});
+
+export { BreadcrumbOverflowMenuItem as default };

package/Breadcrumb/typings.d.ts

@@ -1,5 +1,6 @@
 import type { JSXElementConstructor, ReactElement } from 'react';
 import type { ComponentOverridableForwardRefComponentPropsFactory, NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import type { DropdownProps } from '../Dropdown';
 export type BreadcrumbProps = Omit<NativeElementPropsWithoutKeyAndRef<'nav'>, 'children'> & ({
     /**
      * Display only the last two items with an ellipsis dropdown for all previous items
@@ -12,64 +13,45 @@ export type BreadcrumbProps = Omit<NativeElementPropsWithoutKeyAndRef<'nav'>, 'c
     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'> & {
-    component?: 'button';
-    /**
-     * Whether is the current page item.
-     */
-    current?: boolean;
-    /**
-     * Whether to expand the dropdown item icon.
-     */
-    expand?: boolean;
-    href?: string;
-    label?: string;
-    /**
-     * The dropdown options.
-     */
-    options: Array<{
-        /**
-         * The href of dropdown item.
-         */
-        href?: string;
-        id?: string;
-        /**
-         * The content of dropdown item.
-         */
-        label?: string;
-        target?: '_blank' | '_parent' | '_self' | '_top' | string;
-    }>;
-    target?: '_blank' | '_parent' | '_self' | '_top' | string;
-};
+export type BreadcrumbItemComponent = 'a' | 'span' | JSXElementConstructor<any>;
+export type BreadcrumbItemProps<C extends BreadcrumbItemComponent = 'span'> = Omit<ComponentOverridableForwardRefComponentPropsFactory<BreadcrumbItemComponent, C, BreadcrumbItemTextProps | BreadcrumbLinkItemProps>, 'children' | 'onSelect'> | BreadcrumbDropdownProps;
 export type BreadcrumbItemTextProps = {
-    component?: 'div';
+    component?: 'span';
     /**
      * Whether is the current page item.
      */
     current?: boolean;
-    expand?: never;
     href?: never;
+    id?: string;
     /**
-     * The content of breadcrumb text.
+     * The content of breadcrumb item text.
      */
-    label: string;
-    options?: never;
+    name: string;
+    onClick?: never;
     target?: never;
 };
 export type BreadcrumbLinkItemProps = Omit<NativeElementPropsWithoutKeyAndRef<'a'>, 'children'> & {
     component?: 'a';
     current?: boolean;
-    expand?: never;
     /**
      * The href of breadcrumb link.
      */
     href: string;
-    label: string;
-    options?: never;
+    id?: string;
+    name: string;
+    onClick?: () => void;
     /**
      * The target attribute specifies where to open the linked document.
      */
     target?: '_blank' | '_parent' | '_self' | '_top' | string;
 };
+export type BreadcrumbDropdownProps = Omit<DropdownProps, 'children'> & {
+    className?: string;
+    current?: boolean;
+    href?: never;
+    id?: string;
+    name: string;
+    onClick?: () => void;
+    open?: boolean;
+    target?: never;
+};

package/Calendar/Calendar.js

@@ -93,9 +93,7 @@ const Calendar = forwardRef(function Calendar(props, ref) {
                                     ? () => {
                                         onDoubleNext(mode);
                                     }
-                                    : undefined, onNext: 
-                                // Only day and week modes have single next/prev (for month navigation)
-                                onNext && (mode === 'day' || mode === 'week')
+                                    : undefined, onNext: onNext
                                     ? () => {
                                         onNext(mode);
                                     }
@@ -103,9 +101,7 @@ const Calendar = forwardRef(function Calendar(props, ref) {
                                     ? () => {
                                         onDoublePrev(mode);
                                     }
-                                    : undefined, onPrev: 
-                                // Only day and week modes have single next/prev (for month navigation)
-                                onPrev && (mode === 'day' || mode === 'week')
+                                    : undefined, onPrev: onPrev
                                     ? () => {
                                         onPrev(mode);
                                     }