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

package/Modal/ModalHeader.d.ts

@@ -1,19 +1,38 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface ModalHeaderProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
-     * Whether to show severity icon.
+     * Whether to show status type icon.
      * @default false
      */
-    showSeverityIcon?: boolean;
+    showStatusTypeIcon?: boolean;
     /**
-     * Controlls the title styles.
-     * Use large title if the modal body has section/block titles.
-     * @default false
+     * Layout of the status type icon relative to title.
+     * - 'vertical': Icon above title
+     * - 'horizontal': Icon to the left of title
+     * @default 'vertical'
+     */
+    statusTypeIconLayout?: 'vertical' | 'horizontal';
+    /**
+     * Supporting text displayed below the title.
+     */
+    supportingText?: string;
+    /**
+     * Alignment of the supporting text.
+     * @default 'left'
+     */
+    supportingTextAlign?: 'left' | 'center';
+    /**
+     * The title text of the modal header.
+     */
+    title: string;
+    /**
+     * Alignment of the title.
+     * @default 'left'
      */
-    titleLarge?: boolean;
+    titleAlign?: 'left' | 'center';
 }
 /**
- * The react component for `mezzanine` modal header.
+ * The React component for `mezzanine` modal header.
  */
 declare const ModalHeader: import("react").ForwardRefExoticComponent<ModalHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
 export default ModalHeader;

package/Modal/ModalHeader.js

@@ -1,20 +1,46 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
-import { modalSeverityIcons, modalClasses } from '@mezzanine-ui/core/modal';
+import { modalStatusTypeIcons, modalClasses } from '@mezzanine-ui/core/modal';
 import { ModalControlContext } from './ModalControl.js';
+import Typography from '../Typography/Typography.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` modal header.
+ * The React component for `mezzanine` modal header.
  */
 const ModalHeader = forwardRef(function ModalHeader(props, ref) {
-    const { children, className, showSeverityIcon = false, titleLarge = false, ...rest } = props;
-    const { severity } = useContext(ModalControlContext);
-    return (jsxs("div", { ...rest, ref: ref, className: cx(modalClasses.header, className), children: [showSeverityIcon && (jsx(Icon, { className: modalClasses.severityIcon, icon: modalSeverityIcons[severity] })), jsx("h3", { className: cx(modalClasses.title, {
-                    [modalClasses.titleLarge]: titleLarge,
-                }), title: typeof children === 'string' ? children : undefined, children: children })] }));
+    const { className, showStatusTypeIcon = false, statusTypeIconLayout = 'vertical', supportingText, supportingTextAlign = 'left', title, titleAlign = 'left', ...rest } = props;
+    const { modalStatusType } = useContext(ModalControlContext);
+    const iconColor = (type) => {
+        switch (type) {
+            case 'success':
+                return 'success-strong';
+            case 'warning':
+                return 'warning';
+            case 'error':
+                return 'error-solid';
+            case 'info':
+                return 'info-strong';
+            case 'email':
+                return 'info-strong';
+            case 'delete':
+                return 'error-solid';
+            default:
+                return 'neutral';
+        }
+    };
+    return (jsxs("div", { ...rest, ref: ref, className: cx(modalClasses.modalHeader, {
+            [modalClasses.modalHeader + '--horizontal']: statusTypeIconLayout === 'horizontal',
+            [modalClasses.modalHeader + '--vertical']: statusTypeIconLayout === 'vertical',
+            [modalClasses.modalHeader + '--title-align-left']: titleAlign === 'left',
+            [modalClasses.modalHeader + '--title-align-center']: titleAlign === 'center',
+            [modalClasses.modalHeader + '--show-modal-status-type-icon']: showStatusTypeIcon,
+        }, className), children: [showStatusTypeIcon && (jsx("div", { className: cx(modalClasses.modalHeaderStatusTypeIcon), children: jsx(Icon, { icon: modalStatusTypeIcons[modalStatusType], color: iconColor(modalStatusType), size: 20 }) })), jsxs("div", { className: cx(modalClasses.modalHeaderTitleAndSupportingTextContainer), children: [jsx(Typography, { variant: "h3", color: "text-neutral-solid", className: cx(modalClasses.modalHeaderTitle), title: typeof title === 'string' ? title : undefined, children: title }), jsx(Typography, { variant: "body", color: "text-neutral-strong", className: cx(modalClasses.modalHeaderSupportingText, {
+                            [modalClasses.modalHeaderSupportingText + '--align-left']: supportingTextAlign === 'left',
+                            [modalClasses.modalHeaderSupportingText + '--align-center']: supportingTextAlign === 'center',
+                        }), children: supportingText })] })] }));
 });
 
 export { ModalHeader as default };

package/Modal/index.d.ts

@@ -1,12 +1,11 @@
-export type { ModalSeverity, ModalSize } from '@mezzanine-ui/core/modal';
-export type { ModalActionsProps } from './ModalActions';
-export { default as ModalActions } from './ModalActions';
-export type { ModalBodyProps } from './ModalBody';
-export { default as ModalBody } from './ModalBody';
+export type { ModalStatusType, ModalSize } from '@mezzanine-ui/core/modal';
+export type { ModalBodyForVerificationProps } from './ModalBodyForVerification';
+export { default as ModalBodyForVerification } from './ModalBodyForVerification';
 export type { ModalFooterProps } from './ModalFooter';
 export { default as ModalFooter } from './ModalFooter';
 export type { ModalHeaderProps } from './ModalHeader';
 export { default as ModalHeader } from './ModalHeader';
 export { default as useModalContainer } from './useModalContainer';
+export type { ModalContainerProps } from './useModalContainer';
 export type { ModalProps } from './Modal';
 export { default } from './Modal';

package/Modal/index.js

@@ -1,5 +1,4 @@
-export { default as ModalActions } from './ModalActions.js';
-export { default as ModalBody } from './ModalBody.js';
+export { default as ModalBodyForVerification } from './ModalBodyForVerification.js';
 export { default as ModalFooter } from './ModalFooter.js';
 export { default as ModalHeader } from './ModalHeader.js';
 export { default as useModalContainer } from './useModalContainer.js';

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/CollapsedMenu.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { NavigationChild } from './Navigation';
+export interface CollapsedMenuProps {
+    items: NavigationChild[];
+}
+export declare const CollapsedMenu: FC<CollapsedMenuProps>;

package/Navigation/CollapsedMenu.js

@@ -0,0 +1,16 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { navigationClasses } from '@mezzanine-ui/core/navigation';
+import NavigationIconButton from './NavigationIconButton.js';
+import { DotHorizontalIcon } from '@mezzanine-ui/icons';
+import Popper from '../Popper/Popper.js';
+
+const CollapsedMenu = ({ items }) => {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const targetRef = useRef(null);
+    return (jsxs(Fragment, { children: [jsx(NavigationIconButton, { ref: targetRef, icon: DotHorizontalIcon, onClick: () => setMenuOpen(!menuOpen) }), jsx(Popper, { anchor: targetRef.current, open: menuOpen, options: {
+                    placement: 'right-end',
+                }, children: jsx("div", { className: navigationClasses.collapsedMenu, children: jsx("ul", { children: items }) }) })] }));
+};
+
+export { CollapsedMenu };

package/Navigation/Navigation.d.ts

@@ -1,10 +1,11 @@
-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[];
-export type NavigationChildren = NavigationChild[];
+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'> {
     /**
      * Current active key.
@@ -14,6 +15,19 @@ export interface NavigationProps extends Omit<NativeElementPropsWithoutKeyAndRef
      * Strict children with `NavigationOption`, `NavigationHeader` or `NavigationFooter`.
      */
     children?: NavigationChildren;
+    /**
+     * Navigation display type.
+     * @default false (expanded)
+     */
+    collapsed?: boolean;
+    /**
+     * Whether to show search input
+     */
+    filter?: boolean;
+    /**
+     * Called when collapsed state changes.
+     */
+    onCollapseChange?: (collapsed: boolean) => void;
     /**
      * Called when a navigation option is clicked.
      */

package/Navigation/Navigation.js

@@ -1,5 +1,6 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useCallback, useMemo, Children, isValidElement, cloneElement } from 'react';
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+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';
@@ -8,11 +9,19 @@ 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 { CollapsedMenu } from './CollapsedMenu.js';
 import Input from '../Input/Input.js';
 import cx from 'clsx';
 
 const Navigation = forwardRef((props, ref) => {
-    const { activatedPath, children = [], className, onOptionClick, ...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) => {
+        setCollapsedState(newCollapsed);
+        onCollapseChange === null || onCollapseChange === void 0 ? void 0 : onCollapseChange(newCollapsed);
+    }, [onCollapseChange]);
     const [innerActivatedPath, setInnerActivatedPath] = useState([]);
     const combineSetActivatedPath = useCallback((newActivatedPath) => {
         onOptionClick === null || onOptionClick === void 0 ? void 0 : onOptionClick(newActivatedPath);
@@ -20,11 +29,13 @@ const Navigation = forwardRef((props, ref) => {
     }, [onOptionClick]);
     const currentPathname = useCurrentPathname();
     const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
-    const { headerComponent, footerComponent, searchInput } = useMemo(() => {
+    const [filterText, setFilterText] = useState('');
+    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: {
@@ -35,40 +46,44 @@ const Navigation = forwardRef((props, ref) => {
                         footerComponent = child;
                         break;
                     }
-                    case Input: {
-                        searchInput = cloneElement(child, {
-                            size: 'sub',
-                            variant: 'search',
-                        });
-                        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;
                     }
                     default:
-                        return null;
+                        console.warn('[Mezzanine][Navigation]: Navigation only accepts NavigationOption, NavigationOptionCategory, NavigationHeader or NavigationFooter as children.');
                 }
             }
-            return null;
         });
-        return (_a = childArray === null || childArray === void 0 ? void 0 : childArray.filter((child) => child !== null)) !== null && _a !== void 0 ? _a : null;
-    }, []);
-    return (jsxs("nav", { ...rest, ref: ref, className: cx(navigationClasses.host, navigationClasses.vertical, className), children: [headerComponent, jsx(NavigationActivatedContext.Provider, { value: {
-                    activatedPath: activatedPath || innerActivatedPath,
-                    setActivatedPath: combineSetActivatedPath,
-                    currentPathname,
-                }, children: jsx(NavigationOptionLevelContext.Provider, { value: navigationOptionLevelContextDefaultValues, children: jsxs("div", { className: navigationClasses.content, children: [searchInput, jsx("ul", { children: renderItemChildren(flattenedChildren) })] }) }) }), footerComponent] }));
+        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]);
+    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,
+                handleCollapseChange,
+            }, 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(CollapsedMenu, { items: collapsedMenuItems }))] }, collapsed ? 'collapsed' : 'expand')] }) }), footerComponent] }) }));
 });
 
 export { Navigation as default };

package/Navigation/NavigationFooter.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, Children, isValidElement } from 'react';
+import { forwardRef, use, Children, isValidElement } from 'react';
 import { navigationFooterClasses } from '@mezzanine-ui/core/navigation';
 import NavigationUserMenu from './NavigationUserMenu.js';
+import { NavigationActivatedContext } from './context.js';
 import cx from 'clsx';
 
 const resolveChildren = (children) => {
@@ -19,8 +20,9 @@ const resolveChildren = (children) => {
 };
 const NavigationFooter = forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
+    const { collapsed } = use(NavigationActivatedContext);
     const { userMenu, otherChildren } = resolveChildren(children);
-    return (jsxs("footer", { ...rest, ref: ref, className: cx(navigationFooterClasses.host, className), children: [userMenu, jsx("span", { className: navigationFooterClasses.icons, children: otherChildren })] }));
+    return (jsxs("footer", { ...rest, ref: ref, className: cx(navigationFooterClasses.host, collapsed && navigationFooterClasses.collapsed, className), children: [userMenu, jsx("span", { className: navigationFooterClasses.icons, children: otherChildren })] }));
 });
 
 export { NavigationFooter as default };

package/Navigation/NavigationHeader.d.ts

@@ -1,8 +1,18 @@
 import { ReactNode } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface NavigationHeaderProps extends NativeElementPropsWithoutKeyAndRef<'header'> {
-    onCollapse?: () => void;
+    /**
+     * Custom content to render inside the header, typically an icon or logo.
+     */
     children?: ReactNode;
+    /**
+     * 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

@@ -1,13 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, use } from 'react';
 import { navigationHeaderClasses } from '@mezzanine-ui/core/navigation';
 import { SiderIcon } from '@mezzanine-ui/icons';
 import NavigationIconButton from './NavigationIconButton.js';
+import { NavigationActivatedContext } from './context.js';
 import cx from 'clsx';
 
 const NavigationHeader = forwardRef((props, ref) => {
-    const { children, className, onCollapse, ...rest } = props;
-    return (jsxs("header", { ...rest, ref: ref, className: cx(navigationHeaderClasses.host, className), children: [jsx("span", { className: navigationHeaderClasses.content, children: children }), jsx(NavigationIconButton, { onClick: onCollapse, icon: SiderIcon })] }));
+    const { children, className, title, onBrandClick, ...rest } = props;
+    const { collapsed, handleCollapseChange } = use(NavigationActivatedContext);
+    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,9 +1,10 @@
 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'> {
+export interface NavigationOptionProps extends Omit<NativeElementPropsWithoutKeyAndRef<'li'>, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
     /**
      * Whether the item is active.
      */

package/Navigation/NavigationOption.js

@@ -1,11 +1,12 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, use, useMemo, useEffect } from 'react';
+import { forwardRef, useState, use, useMemo, useEffect, Children, isValidElement } from 'react';
 import { navigationOptionClasses } from '@mezzanine-ui/core/navigation';
 import { ChevronUpIcon, ChevronDownIcon } from '@mezzanine-ui/icons';
-import { useClickAway } from '../hooks/useClickAway.js';
-import { useComposeRefs } from '../hooks/useComposeRefs.js';
 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';
@@ -13,48 +14,66 @@ import cx from 'clsx';
 const NavigationOption = forwardRef((props, ref) => {
     const { active, children, className, defaultOpen = false, href, icon, onTriggerClick, title, ...rest } = props;
     const [open, setOpen] = useState(defaultOpen);
-    const nodeRef = useRef(null);
-    const composedNodeRef = useComposeRefs([ref, nodeRef]);
     const GroupToggleIcon = open ? ChevronUpIcon : ChevronDownIcon;
-    useClickAway(() => {
-        if (!open) {
-            return;
-        }
-        return () => {
-            setOpen(!open);
-        };
-    }, nodeRef, [open]);
     const { level, path: parentPath } = use(NavigationOptionLevelContext);
     const currentLevel = level + 1;
     const currentKey = href || title || 'unknownId';
     const currentPath = useMemo(() => [...parentPath, currentKey], [parentPath, currentKey]);
-    const { activatedPath, setActivatedPath, currentPathname } = use(NavigationActivatedContext);
+    const { activatedPath, setActivatedPath, currentPathname, collapsed, handleCollapseChange, } = use(NavigationActivatedContext);
     useEffect(() => {
         if (currentPathname === href) {
             setActivatedPath(currentPath);
+            setOpen(true);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const Component = href ? 'a' : 'div';
-    return (jsxs("li", { ...rest, ref: composedNodeRef, 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, className), "data-id": currentKey, children: [jsxs(Component, { className: cx(navigationOptionClasses.content, navigationOptionClasses.level(currentLevel)), href: href, onClick: () => {
-                    setOpen(!open);
-                    onTriggerClick === null || onTriggerClick === void 0 ? void 0 : onTriggerClick(currentPath, href || '');
-                    if (!children)
-                        setActivatedPath([...parentPath, currentKey]);
-                }, onKeyDown: (e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
+    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 (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: {
+                    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 || '');
+                        if (collapsed) {
+                            handleCollapseChange(false);
+                        }
                         if (!children)
                             setActivatedPath([...parentPath, currentKey]);
-                    }
-                }, role: "menuitem", tabIndex: 0, children: [icon && jsx(Icon, { className: navigationOptionClasses.icon, icon: icon }), jsx("span", { className: navigationOptionClasses.title, children: title }), children && (jsx(Icon, { size: 12, className: navigationOptionClasses.toggleIcon, icon: GroupToggleIcon }))] }), children && (jsx(Collapse, { style: {
+                    }, onKeyDown: (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            setOpen(!open);
+                            if (!children)
+                                setActivatedPath([...parentPath, currentKey]);
+                        }
+                    }, 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

@@ -1,12 +1,30 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, useCallback, Children, isValidElement } from 'react';
 import { navigationOptionCategoryClasses } from '@mezzanine-ui/core/navigation';
+import NavigationOption from './NavigationOption.js';
 import cx from 'clsx';
 
 const NavigationOptionCategory = forwardRef((props, ref) => {
     const { children, className, title, ...rest } = props;
-    return (jsxs("li", { ...rest, ref: ref, className: cx(navigationOptionCategoryClasses.host, className), role: "menuitem", children: [jsx("span", { className: navigationOptionCategoryClasses.title, children: title }), jsx("ul", { children: children })] }));
+    const renderItemChildren = useCallback(function renderItemChildrenImpl(parsedChildren) {
+        var _a;
+        const childArray = Children.map(parsedChildren, (child) => {
+            if (child && isValidElement(child)) {
+                switch (child.type) {
+                    case NavigationOption: {
+                        return child;
+                    }
+                    default:
+                        console.warn('[Mezzanine][NavigationOptionCategory]: NavigationOptionCategory only accepts NavigationOption 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 (jsxs("li", { ...rest, ref: ref, className: cx(navigationOptionCategoryClasses.host, className), role: "menuitem", children: [jsx("span", { className: navigationOptionCategoryClasses.title, children: title }), jsx("ul", { children: renderItemChildren(children) })] }));
 });
 
 export { NavigationOptionCategory as default };

package/Navigation/context.d.ts

@@ -10,4 +10,6 @@ export declare const NavigationActivatedContext: import("react").Context<{
     activatedPath: string[];
     setActivatedPath: (path: string[]) => void;
     currentPathname: string | null;
+    collapsed: boolean;
+    handleCollapseChange: (newCollapsed: boolean) => 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;
+};