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

package/Modal/useModalContainer.d.ts

@@ -1,5 +1,14 @@
-import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
+import { ReactNode } from 'react';
+import { BackdropProps } from '../Backdrop';
+export interface ModalContainerProps extends Pick<BackdropProps, 'className' | 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'onBackdropClick' | 'onClose' | 'open'> {
+    children?: ReactNode;
+    /**
+     * Controls whether to disable closing modal while escape key down.
+     * @default false
+     */
+    disableCloseOnEscapeKeyDown?: boolean;
+}
 export default function useModalContainer(): {
-    Container: import("react").ForwardRefExoticComponent<SlideFadeOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
-    defaultOptions: Pick<SlideFadeOverlayProps, "className" | "open" | "direction" | "disablePortal" | "disableCloseOnBackdropClick" | "disableCloseOnEscapeKeyDown">;
+    Container: import("react").ForwardRefExoticComponent<ModalContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+    defaultOptions: Pick<ModalContainerProps, "className" | "open" | "disablePortal" | "disableCloseOnBackdropClick" | "disableCloseOnEscapeKeyDown">;
 };

package/Modal/useModalContainer.js

@@ -1,19 +1,41 @@
 import { jsx } from 'react/jsx-runtime';
 import { modalClasses } from '@mezzanine-ui/core/modal';
-import { forwardRef } from 'react';
-import SlideFadeOverlay from '../_internal/SlideFadeOverlay/SlideFadeOverlay.js';
+import { forwardRef, useState } from 'react';
+import { useDocumentEscapeKeyDown } from '../hooks/useDocumentEscapeKeyDown.js';
+import useTopStack from '../_internal/SlideFadeOverlay/useTopStack.js';
+import Backdrop from '../Backdrop/Backdrop.js';
+import Fade from '../Transition/Fade.js';
+import cx from 'clsx';
 
 const defaultOptions = {
     className: modalClasses.overlay,
-    direction: 'down',
     disableCloseOnBackdropClick: false,
     disableCloseOnEscapeKeyDown: false,
     disablePortal: false,
     open: false,
 };
-const ModalContainer = forwardRef((props, ref) => {
-    const { className = defaultOptions.className, children, container, direction = defaultOptions.direction, disableCloseOnBackdropClick = defaultOptions.disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown = defaultOptions.disableCloseOnEscapeKeyDown, disablePortal = defaultOptions.disablePortal, onBackdropClick, onClose, open = defaultOptions.open, } = props;
-    return (jsx(SlideFadeOverlay, { className: className, container: container, direction: direction, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: children }));
+const ModalContainer = forwardRef(function ModalContainer(props, ref) {
+    const { children, className = defaultOptions.className, container, disableCloseOnBackdropClick = defaultOptions.disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown = defaultOptions.disableCloseOnEscapeKeyDown, disablePortal = defaultOptions.disablePortal, onBackdropClick, onClose, open = defaultOptions.open, } = props;
+    const [exited, setExited] = useState(true);
+    /**
+     * Escape keydown close: escape will only close the top modal
+     */
+    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: cx(className), container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation", children: jsx(Fade, { in: open, onEntered: () => setExited(false), onExited: () => setExited(true), children: jsx("div", { ref: ref, children: children }) }) }));
 });
 function useModalContainer() {
     return {

package/Navigation/Navigation.d.ts

@@ -1,9 +1,10 @@
-import { JSX, ReactElement } from 'react';
+import { ReactElement } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { NavigationOptionProps } from './NavigationOption';
 import { NavigationHeaderProps } from './NavigationHeader';
 import { NavigationFooterProps } from './NavigationFooter';
-export type NavigationChild = ReactElement<NavigationOptionProps | NavigationHeaderProps | NavigationFooterProps> | null | JSX.Element[];
+import { NavigationOptionCategoryProps } from './NavigationOptionCategory';
+export type NavigationChild = ReactElement<NavigationFooterProps> | ReactElement<NavigationHeaderProps> | ReactElement<NavigationOptionCategoryProps> | ReactElement<NavigationOptionProps> | null | undefined | false;
 export type NavigationChildren = NavigationChild | NavigationChild[];
 export interface NavigationProps extends Omit<NativeElementPropsWithoutKeyAndRef<'ul'>, 'onClick'> {
     /**
@@ -19,6 +20,10 @@ export interface NavigationProps extends Omit<NativeElementPropsWithoutKeyAndRef
      * @default false (expanded)
      */
     collapsed?: boolean;
+    /**
+     * Whether to show search input
+     */
+    filter?: boolean;
     /**
      * Called when collapsed state changes.
      */

package/Navigation/Navigation.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useCallback, useMemo, Children, isValidElement, cloneElement } from 'react';
+import { forwardRef, useState, useCallback, useMemo, Children, isValidElement } from 'react';
 import { navigationClasses } from '@mezzanine-ui/core/navigation';
 import NavigationOption from './NavigationOption.js';
 import NavigationHeader from './NavigationHeader.js';
@@ -9,11 +9,13 @@ import { flattenChildren } from '../utils/flatten-children.js';
 import NavigationOptionCategory from './NavigationOptionCategory.js';
 import { NavigationActivatedContext, NavigationOptionLevelContext, navigationOptionLevelContextDefaultValues } from './context.js';
 import { useCurrentPathname } from './useCurrentPathname.js';
+import { useVisibleItems } from './useVisibleItems.js';
+import { NavigationOverflowMenu } from './NavigationOverflowMenu.js';
 import Input from '../Input/Input.js';
 import cx from 'clsx';
 
 const Navigation = forwardRef((props, ref) => {
-    const { activatedPath, children = [], className, collapsed: collapsedProp, onOptionClick, onCollapseChange, ...rest } = props;
+    const { activatedPath, children = [], className, collapsed: collapsedProp, filter, onCollapseChange, onOptionClick, ...rest } = props;
     const [collapsedState, setCollapsedState] = useState(collapsedProp || false);
     const collapsed = collapsedProp !== null && collapsedProp !== void 0 ? collapsedProp : collapsedState;
     const handleCollapseChange = useCallback((newCollapsed) => {
@@ -27,11 +29,12 @@ const Navigation = forwardRef((props, ref) => {
     }, [onOptionClick]);
     const currentPathname = useCurrentPathname();
     const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
-    const { headerComponent, footerComponent, searchInput } = useMemo(() => {
+    const { headerComponent, footerComponent, items, level1Items } = useMemo(() => {
         let headerComponent = null;
         let footerComponent = null;
-        let searchInput = null;
-        Children.forEach(flattenedChildren, (child) => {
+        const items = [];
+        const level1Items = [];
+        Children.forEach(flattenedChildren, (child, index) => {
             if (child && isValidElement(child)) {
                 switch (child.type) {
                     case NavigationHeader: {
@@ -42,48 +45,46 @@ const Navigation = forwardRef((props, ref) => {
                         footerComponent = child;
                         break;
                     }
-                    case Input: {
-                        searchInput = cloneElement(child, {
-                            size: 'sub',
-                            variant: 'search',
-                            className: cx(navigationClasses.searchInput, child.props.className),
-                        });
-                        break;
-                    }
-                }
-            }
-        });
-        return { headerComponent, footerComponent, searchInput };
-    }, [flattenedChildren]);
-    const renderItemChildren = useCallback(function renderItemChildrenImpl(parsedChildren) {
-        var _a;
-        const childArray = Children.map(parsedChildren, (child) => {
-            if (child && isValidElement(child)) {
-                switch (child.type) {
                     case NavigationOptionCategory:
+                        level1Items.push(...(child.props.children
+                            ? flattenChildren(child.props.children, -1, [
+                                child.props.title || 'NavigationOptionCategory:' + index,
+                            ])
+                            : []));
+                        items.push(child);
+                        break;
                     case NavigationOption: {
-                        return child;
+                        level1Items.push(child);
+                        items.push(child);
+                        break;
                     }
-                    case NavigationHeader:
-                    case NavigationFooter:
-                        // already handled in headerComponent and footerComponent
-                        return null;
                     default:
                         console.warn('[Mezzanine][Navigation]: Navigation only accepts NavigationOption, NavigationOptionCategory, NavigationHeader or NavigationFooter as children.');
-                        return null;
                 }
             }
-            return null;
         });
-        return (_a = childArray === null || childArray === void 0 ? void 0 : childArray.filter((child) => child !== null)) !== null && _a !== void 0 ? _a : null;
-    }, []);
+        return { headerComponent, footerComponent, items, level1Items };
+    }, [flattenedChildren]);
+    const { contentRef, visibleCount } = useVisibleItems(items, collapsed);
+    const { collapsedItems, collapsedMenuItems } = useMemo(() => {
+        return {
+            collapsedItems: visibleCount !== null
+                ? level1Items.slice(0, visibleCount)
+                : level1Items,
+            collapsedMenuItems: visibleCount !== null ? level1Items.slice(visibleCount) : [],
+        };
+    }, [level1Items, visibleCount]);
+    const [filterText, setFilterText] = useState('');
     return (jsx("nav", { ...rest, ref: ref, className: cx(navigationClasses.host, collapsed ? navigationClasses.collapsed : navigationClasses.expand, className), children: jsxs(NavigationActivatedContext.Provider, { value: {
                 activatedPath: activatedPath || innerActivatedPath,
-                setActivatedPath: combineSetActivatedPath,
-                currentPathname,
                 collapsed,
+                currentPathname,
+                filterText,
                 handleCollapseChange,
-            }, children: [headerComponent, jsx(NavigationOptionLevelContext.Provider, { value: navigationOptionLevelContextDefaultValues, children: jsxs("div", { className: navigationClasses.content, children: [searchInput, jsx("ul", { children: renderItemChildren(flattenedChildren) })] }) }), footerComponent] }) }));
+                setActivatedPath: combineSetActivatedPath,
+            }, children: [headerComponent, jsx(NavigationOptionLevelContext.Provider, { value: navigationOptionLevelContextDefaultValues, children: jsxs("div", { ref: contentRef, className: navigationClasses.content, children: [filter && (jsx(Input, { size: "sub", variant: "search", className: cx(navigationClasses.searchInput), value: filterText, onChange: (e) => setFilterText(e.target.value) })), jsxs("ul", { children: [collapsed ? collapsedItems : items, collapsed &&
+                                        visibleCount !== null &&
+                                        visibleCount < level1Items.length && (jsx(NavigationOverflowMenu, { items: collapsedMenuItems }))] }, collapsed ? 'collapsed' : 'expand')] }) }), footerComponent] }) }));
 });
 
 export { Navigation as default };

package/Navigation/NavigationHeader.d.ts

@@ -9,6 +9,10 @@ export interface NavigationHeaderProps extends NativeElementPropsWithoutKeyAndRe
      * The title text displayed in the header.
      */
     title: string;
+    /**
+     * Callback function invoked when the brand area (logo and title) is clicked.
+     */
+    onBrandClick?: () => void;
 }
 declare const NavigationHeader: import("react").ForwardRefExoticComponent<NavigationHeaderProps & import("react").RefAttributes<HTMLElement>>;
 export default NavigationHeader;

package/Navigation/NavigationHeader.js

@@ -7,9 +7,10 @@ import { NavigationActivatedContext } from './context.js';
 import cx from 'clsx';
 
 const NavigationHeader = forwardRef((props, ref) => {
-    const { children, className, title, ...rest } = props;
+    const { children, className, title, onBrandClick, ...rest } = props;
     const { collapsed, handleCollapseChange } = use(NavigationActivatedContext);
-    return (jsxs("header", { ...rest, ref: ref, className: cx(navigationHeaderClasses.host, collapsed && navigationHeaderClasses.collapsed, className), children: [jsxs("span", { className: navigationHeaderClasses.content, children: [children, jsx("span", { className: navigationHeaderClasses.title, children: title })] }), jsx(NavigationIconButton, { onClick: () => handleCollapseChange(!collapsed), icon: SiderIcon })] }));
+    const BrandComponent = onBrandClick ? 'button' : 'span';
+    return (jsxs("header", { ...rest, ref: ref, className: cx(navigationHeaderClasses.host, collapsed && navigationHeaderClasses.collapsed, className), children: [jsx(NavigationIconButton, { onClick: () => handleCollapseChange(!collapsed), icon: SiderIcon }), jsxs(BrandComponent, { type: "button", className: navigationHeaderClasses.content, onClick: onBrandClick, children: [children, jsx("span", { className: navigationHeaderClasses.title, children: title })] })] }));
 });
 
 export { NavigationHeader as default };

package/Navigation/NavigationOption.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from 'react';
 import { IconDefinition } from '@mezzanine-ui/icons';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export type NavigationOptionChild = ReactElement<NavigationOptionProps>;
+import { BadgeProps } from '../Badge';
+export type NavigationOptionChild = ReactElement<NavigationOptionProps> | ReactElement<BadgeProps> | false | null | undefined;
 export type NavigationOptionChildren = NavigationOptionChild | NavigationOptionChild[];
 export interface NavigationOptionProps extends Omit<NativeElementPropsWithoutKeyAndRef<'li'>, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
     /**
@@ -19,17 +20,21 @@ export interface NavigationOptionProps extends Omit<NativeElementPropsWithoutKey
     /**
      * Unique ID of the item.
      */
+    id?: string;
+    /**
+     * Href of the item.
+     */
     href?: string;
     /**
      * Set display title for sub-menu item.
      */
-    title?: string;
+    title: string;
     /**
      * Open menu as default
      * @default false
      */
     defaultOpen?: boolean;
-    onTriggerClick?: (path: string[], href: string) => void;
+    onTriggerClick?: (path: string[], currentKey: string, href?: string) => void;
 }
 declare const NavigationOption: import("react").ForwardRefExoticComponent<NavigationOptionProps & import("react").RefAttributes<HTMLLIElement>>;
 export default NavigationOption;

package/Navigation/NavigationOption.js

@@ -1,54 +1,89 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, use, useMemo, useEffect } from 'react';
+import { forwardRef, useState, use, useId, useMemo, useEffect, Children, isValidElement } from 'react';
 import { navigationOptionClasses } from '@mezzanine-ui/core/navigation';
 import { ChevronUpIcon, ChevronDownIcon } from '@mezzanine-ui/icons';
 import { NavigationOptionLevelContext, NavigationActivatedContext } from './context.js';
+import { flattenChildren } from '../utils/flatten-children.js';
+import Badge from '../Badge/Badge.js';
 import Tooltip from '../Tooltip/Tooltip.js';
 import Icon from '../Icon/Icon.js';
 import Collapse from '../Transition/Collapse.js';
 import cx from 'clsx';
 
 const NavigationOption = forwardRef((props, ref) => {
-    const { active, children, className, defaultOpen = false, href, icon, onTriggerClick, title, ...rest } = props;
+    const { active, children, className, defaultOpen = false, href, icon, id, onTriggerClick, title, ...rest } = props;
     const [open, setOpen] = useState(defaultOpen);
     const GroupToggleIcon = open ? ChevronUpIcon : ChevronDownIcon;
     const { level, path: parentPath } = use(NavigationOptionLevelContext);
-    const currentLevel = level + 1;
-    const currentKey = href || title || 'unknownId';
+    const currentLevel = level + 1; // start as 1
+    const uuid = useId();
+    const currentKey = id || title || href || uuid;
     const currentPath = useMemo(() => [...parentPath, currentKey], [parentPath, currentKey]);
-    const { activatedPath, setActivatedPath, currentPathname, collapsed, handleCollapseChange, } = use(NavigationActivatedContext);
+    const { activatedPath, collapsed, currentPathname, filterText, handleCollapseChange, setActivatedPath, } = use(NavigationActivatedContext);
     useEffect(() => {
         if (currentPathname === href) {
             setActivatedPath(currentPath);
+            setOpen(true);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const Component = href ? 'a' : 'div';
+    const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
+    const { badge, items } = useMemo(() => {
+        let badgeComponent = null;
+        const items = [];
+        Children.forEach(flattenedChildren, (child) => {
+            if (child && isValidElement(child)) {
+                switch (child.type) {
+                    case Badge: {
+                        badgeComponent = child;
+                        break;
+                    }
+                    case NavigationOption: {
+                        items.push(child);
+                        break;
+                    }
+                    default:
+                        console.warn('[Mezzanine][NavigationOption]: NavigationOption only accepts NavigationOption or Badge as children.');
+                }
+            }
+        });
+        return { badge: badgeComponent, items };
+    }, [flattenedChildren]);
+    const [filter, setFilter] = useState(true);
+    useEffect(() => {
+        var _a;
+        if (!filterText) {
+            setFilter(true);
+            return;
+        }
+        setFilter((_a = (title.includes(filterText) || (href === null || href === void 0 ? void 0 : href.includes(filterText)))) !== null && _a !== void 0 ? _a : false);
+    }, [currentPath, filterText, href, title]);
     return (jsxs("li", { ...rest, ref: ref, className: cx(navigationOptionClasses.host, open && navigationOptionClasses.open, !children && navigationOptionClasses.basic, (active !== null && active !== void 0 ? active : (activatedPath === null || activatedPath === void 0 ? void 0 : activatedPath[currentLevel - 1]) === currentKey) &&
-            navigationOptionClasses.active, collapsed && navigationOptionClasses.collapsed, className), "data-id": currentKey, children: [jsx(Tooltip, { options: {
+            navigationOptionClasses.active, collapsed && navigationOptionClasses.collapsed, !collapsed && !filter && navigationOptionClasses.hidden, className), "data-id": currentKey, children: [jsx(Tooltip, { options: {
                     placement: 'right',
                 }, title: collapsed ? title : undefined, children: ({ onMouseEnter, onMouseLeave, ref: tooltipChildRef }) => (jsxs(Component, { className: cx(navigationOptionClasses.content, navigationOptionClasses.level(currentLevel)), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: tooltipChildRef, href: href, onClick: () => {
                         setOpen(!open);
-                        onTriggerClick === null || onTriggerClick === void 0 ? void 0 : onTriggerClick(currentPath, href || '');
+                        onTriggerClick === null || onTriggerClick === void 0 ? void 0 : onTriggerClick(currentPath, currentKey, href);
                         if (collapsed) {
                             handleCollapseChange(false);
                         }
                         if (!children)
-                            setActivatedPath([...parentPath, currentKey]);
+                            setActivatedPath(currentPath);
                     }, onKeyDown: (e) => {
                         if (e.key === 'Enter' || e.key === ' ') {
                             e.preventDefault();
                             setOpen(!open);
                             if (!children)
-                                setActivatedPath([...parentPath, currentKey]);
+                                setActivatedPath(currentPath);
                         }
-                    }, role: "menuitem", tabIndex: 0, children: [icon && jsx(Icon, { className: navigationOptionClasses.icon, icon: icon }), jsx("span", { className: navigationOptionClasses.title, children: title }), children && (jsx(Icon, { className: navigationOptionClasses.toggleIcon, icon: GroupToggleIcon }))] })) }), children && !collapsed && (jsx(Collapse, { className: navigationOptionClasses.childrenWrapper, style: {
+                    }, role: "menuitem", tabIndex: 0, children: [icon && jsx(Icon, { className: navigationOptionClasses.icon, icon: icon }), jsx("span", { className: navigationOptionClasses.title, children: title }), badge, children && (jsx(Icon, { className: navigationOptionClasses.toggleIcon, icon: GroupToggleIcon }))] })) }), children && !collapsed && (jsx(Collapse, { className: navigationOptionClasses.childrenWrapper, style: {
                     width: '100%',
                 }, in: !!open, children: jsx(NavigationOptionLevelContext.Provider, { value: {
                         level: currentLevel,
                         path: currentPath,
-                    }, children: jsx("ul", { className: navigationOptionClasses.group, children: children }) }) }))] }));
+                    }, children: jsx("ul", { className: navigationOptionClasses.group, children: items }) }) }))] }));
 });
 
 export { NavigationOption as default };

package/Navigation/NavigationOptionCategory.js

@@ -16,6 +16,7 @@ const NavigationOptionCategory = forwardRef((props, ref) => {
                         return child;
                     }
                     default:
+                        console.warn('[Mezzanine][NavigationOptionCategory]: NavigationOptionCategory only accepts NavigationOption as children.');
                         return null;
                 }
             }

package/Navigation/NavigationOverflowMenu.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactElement } from 'react';
+import { NavigationOptionProps } from './NavigationOption';
+export interface NavigationOverflowMenuProps {
+    items: ReactElement<NavigationOptionProps>[];
+}
+export declare const NavigationOverflowMenu: FC<NavigationOverflowMenuProps>;

package/Navigation/NavigationOverflowMenu.js

@@ -0,0 +1,90 @@
+import { useState, useRef, useCallback, createElement, useMemo } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { navigationOverflowMenuClasses } from '@mezzanine-ui/core/navigation';
+import NavigationIconButton from './NavigationIconButton.js';
+import { DotHorizontalIcon } from '@mezzanine-ui/icons';
+import NavigationOverflowMenuOption from './NavigationOverflowMenuOption.js';
+import { TransitionGroup } from 'react-transition-group';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import { NavigationOptionLevelContext } from './context.js';
+import { useDocumentEvents } from '../hooks/useDocumentEvents.js';
+import Popper from '../Popper/Popper.js';
+import Translate from '../Transition/Translate.js';
+
+const NavigationOverflowMenu = ({ items, }) => {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const targetRef = useRef(null);
+    const popperRef = useRef(null);
+    const [level1path, setLevel1path] = useState([]);
+    const [level2path, setLevel2path] = useState([]);
+    const [level2Items, setLevel2Items] = useState([]);
+    const [level3Items, setLevel3Items] = useState([]);
+    const renderMenuItem = useCallback((item, currentLevel) => createElement(NavigationOverflowMenuOption, {
+        ...item.props,
+        onTriggerClick: (path, currentKey, href, subItems) => {
+            var _a, _b;
+            if (subItems && subItems.length > 0) {
+                if (currentLevel === 1) {
+                    setLevel1path(path);
+                    setLevel2Items(subItems);
+                    setLevel3Items([]);
+                }
+                else if (currentLevel === 2) {
+                    setLevel2path(path);
+                    setLevel3Items(subItems);
+                }
+            }
+            else {
+                setMenuOpen(false);
+            }
+            (_b = (_a = item.props).onTriggerClick) === null || _b === void 0 ? void 0 : _b.call(_a, path, currentKey, href);
+        },
+    }), []);
+    const renderedItems = useMemo(() => items.map((item) => renderMenuItem(item, 1)), [items, renderMenuItem]);
+    const renderedItems2 = useMemo(() => level2Items.map((item) => renderMenuItem(item, 2)), [level2Items, renderMenuItem]);
+    const renderedItems3 = useMemo(() => level3Items.map((item) => renderMenuItem(item, 3)), [level3Items, renderMenuItem]);
+    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]);
+    return (jsxs(Fragment, { children: [jsx(NavigationIconButton, { ref: targetRef, icon: DotHorizontalIcon, onClick: () => setMenuOpen(!menuOpen) }), jsx(Popper, { anchor: targetRef.current, disablePortal: true, open: menuOpen, options: {
+                    placement: 'right-end',
+                }, ref: popperRef, children: jsx(TransitionGroup, { component: null, children: menuOpen && (createElement(Translate, { ...translateProps, from: 'bottom', key: "popper-list", in: true },
+                        jsx("li", { className: navigationOverflowMenuClasses.host, children: jsxs("span", { className: navigationOverflowMenuClasses.content, "aria-haspopup": "true", "aria-expanded": menuOpen, children: [jsx("ul", { className: navigationOverflowMenuClasses.subMenu, children: renderedItems }), jsx(NavigationOptionLevelContext.Provider, { value: {
+                                            level: 1,
+                                            path: level1path,
+                                        }, children: level2Items.length > 0 && (jsx("ul", { className: navigationOverflowMenuClasses.subMenu, children: renderedItems2 })) }), jsx(NavigationOptionLevelContext.Provider, { value: {
+                                            level: 2,
+                                            path: level2path,
+                                        }, children: level3Items.length > 0 && (jsx("ul", { className: navigationOverflowMenuClasses.subMenu, children: renderedItems3 })) })] }) }))) }) })] }));
+};
+
+export { NavigationOverflowMenu };

package/Navigation/NavigationOverflowMenuOption.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { NavigationOptionProps } from './NavigationOption';
+export interface NavigationOverflowMenuOptionProps extends NavigationOptionProps {
+    onTriggerClick?: (path: string[], currentKey: string, href?: string, items?: ReactElement<NavigationOptionProps>[]) => void;
+}
+declare const NavigationOverflowMenuOption: import("react").ForwardRefExoticComponent<NavigationOverflowMenuOptionProps & import("react").RefAttributes<HTMLLIElement>>;
+export default NavigationOverflowMenuOption;

package/Navigation/NavigationOverflowMenuOption.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, use, useId, useMemo, useEffect, Children, isValidElement } from 'react';
+import { navigationOverflowMenuOptionClasses } from '@mezzanine-ui/core/navigation';
+import { ChevronRightIcon } from '@mezzanine-ui/icons';
+import { NavigationOptionLevelContext, NavigationActivatedContext } from './context.js';
+import { flattenChildren } from '../utils/flatten-children.js';
+import NavigationOption from './NavigationOption.js';
+import Badge from '../Badge/Badge.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const NavigationOverflowMenuOption = forwardRef((props, ref) => {
+    const { active, children, className, defaultOpen = false, href, icon, id, onTriggerClick, title, ...rest } = props;
+    const [open, setOpen] = useState(defaultOpen);
+    const { level, path: parentPath } = use(NavigationOptionLevelContext);
+    const currentLevel = level + 1; // start as 1
+    const uuid = useId();
+    const currentKey = id || title || href || uuid;
+    const currentPath = useMemo(() => [...parentPath, currentKey], [parentPath, currentKey]);
+    const { activatedPath, setActivatedPath, currentPathname } = use(NavigationActivatedContext);
+    useEffect(() => {
+        if (currentPathname === href) {
+            setActivatedPath(currentPath);
+            setOpen(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const Component = href ? 'a' : 'div';
+    const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
+    const { badge, items } = useMemo(() => {
+        let badgeComponent = null;
+        const items = [];
+        Children.forEach(flattenedChildren, (child) => {
+            if (child && isValidElement(child)) {
+                switch (child.type) {
+                    case Badge: {
+                        badgeComponent = child;
+                        break;
+                    }
+                    case NavigationOption: {
+                        items.push(child);
+                        break;
+                    }
+                    default:
+                        console.warn('[Mezzanine][NavigationOption]: NavigationOption only accepts NavigationOption or Badge as children.');
+                }
+            }
+        });
+        return { badge: badgeComponent, items };
+    }, [flattenedChildren]);
+    return (jsx("li", { ...rest, ref: ref, className: cx(navigationOverflowMenuOptionClasses.host, open && navigationOverflowMenuOptionClasses.open, !children && navigationOverflowMenuOptionClasses.basic, (active !== null && active !== void 0 ? active : (activatedPath === null || activatedPath === void 0 ? void 0 : activatedPath[currentLevel - 1]) === currentKey) &&
+            navigationOverflowMenuOptionClasses.active, className), "data-id": currentKey, children: jsxs(Component, { className: cx(navigationOverflowMenuOptionClasses.content), href: href, onClick: () => {
+                setOpen(!open);
+                onTriggerClick === null || onTriggerClick === void 0 ? void 0 : onTriggerClick(currentPath, currentKey, href, items);
+                if (!children)
+                    setActivatedPath(currentPath);
+            }, onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    setOpen(!open);
+                    if (!children)
+                        setActivatedPath(currentPath);
+                }
+            }, role: "menuitem", tabIndex: 0, children: [icon && jsx(Icon, { className: navigationOverflowMenuOptionClasses.icon, icon: icon }), jsx("span", { className: navigationOverflowMenuOptionClasses.title, children: title }), badge, children && (jsx(Icon, { className: navigationOverflowMenuOptionClasses.toggleIcon, icon: ChevronRightIcon }))] }) }));
+});
+
+export { NavigationOverflowMenuOption as default };

package/Navigation/NavigationUserMenu.d.ts

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface NavigationUserMenuProps extends NativeElementPropsWithoutKeyAndRef<'button'> {
+import { DropdownProps } from '../Dropdown';
+export interface NavigationUserMenuProps extends Omit<DropdownProps, 'children' | 'type'> {
     children?: ReactNode;
+    className?: string;
     imgSrc?: string;
+    onClick?: () => void;
 }
 declare const NavigationUserMenu: import("react").ForwardRefExoticComponent<NavigationUserMenuProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default NavigationUserMenu;

package/Navigation/NavigationUserMenu.js

@@ -1,18 +1,26 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useState } from 'react';
 import { navigationUserMenuClasses } from '@mezzanine-ui/core/navigation';
 import { UserIcon, ChevronDownIcon } from '@mezzanine-ui/icons';
+import Dropdown from '../Dropdown/Dropdown.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
 const NavigationUserMenu = forwardRef((props, ref) => {
+    // shared props
     const { children, className, imgSrc, onClick, ...rest } = props;
+    const { open: openProp, onClose, placement = 'top-end', onVisibilityChange, ...dropdownRest } = rest;
     const [imgError, setImgError] = useState(false);
-    const [open, setOpen] = useState(false);
-    return (jsxs("button", { ...rest, className: cx(navigationUserMenuClasses.host, open && navigationUserMenuClasses.open, className), onClick: (e) => {
+    const [_open, setOpen] = useState(false);
+    const open = openProp !== null && openProp !== void 0 ? openProp : _open;
+    return (jsx(Dropdown, { ...dropdownRest, open: open, placement: placement, onVisibilityChange: () => {
             setOpen(!open);
-            onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        }, ref: ref, type: "button", children: [jsx("span", { className: navigationUserMenuClasses.avatar, children: imgError ? (jsx(Icon, { icon: UserIcon })) : (jsx("img", { alt: "User avatar", className: navigationUserMenuClasses.avatar, src: imgSrc, onError: () => setImgError(true) })) }), children && jsx("span", { className: navigationUserMenuClasses.userName, children: children }), jsx(Icon, { className: navigationUserMenuClasses.icon, icon: ChevronDownIcon })] }));
+            onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(!open);
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }, onClose: () => {
+            setOpen(false);
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }, children: jsxs("button", { type: "button", ref: ref, className: cx(navigationUserMenuClasses.host, open && navigationUserMenuClasses.open, className), children: [jsx("span", { className: navigationUserMenuClasses.avatar, children: imgError ? (jsx(Icon, { icon: UserIcon })) : (jsx("img", { alt: "User avatar", className: navigationUserMenuClasses.avatar, src: imgSrc, onError: () => setImgError(true) })) }), children && jsx("span", { className: navigationUserMenuClasses.userName, children: children }), jsx(Icon, { className: navigationUserMenuClasses.icon, icon: ChevronDownIcon })] }) }));
 });
 
 export { NavigationUserMenu as default };

package/Navigation/context.d.ts

@@ -8,8 +8,9 @@ export declare const NavigationOptionLevelContext: import("react").Context<{
 }>;
 export declare const NavigationActivatedContext: import("react").Context<{
     activatedPath: string[];
-    setActivatedPath: (path: string[]) => void;
-    currentPathname: string | null;
     collapsed: boolean;
+    currentPathname: string | null;
+    filterText: string;
     handleCollapseChange: (newCollapsed: boolean) => void;
+    setActivatedPath: (path: string[]) => void;
 }>;

package/Navigation/useVisibleItems.d.ts

@@ -0,0 +1,5 @@
+import { NavigationChild } from './Navigation';
+export declare function useVisibleItems(items: NavigationChild[], collapsed: boolean): {
+    contentRef: import("react").RefObject<HTMLDivElement | null>;
+    visibleCount: number | null;
+};