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

package/Modal/ModalFooter.d.ts

@@ -1,5 +1,123 @@
+import { ReactNode } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export type ModalFooterProps = NativeElementPropsWithoutKeyAndRef<'div'>;
+import { ButtonProps } from '../Button/Button';
+export interface ModalFooterProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Layout of action buttons.
+     * - 'fixed': Buttons maintain fixed width
+     * - 'fill': Buttons expand to fill available space equally
+     * @default 'fixed'
+     */
+    actionsButtonLayout?: 'fill' | 'fixed';
+    /**
+     * Text to display as annotation on the left side.
+     * Only used when auxiliaryContentType is 'annotation'.
+     */
+    annotation?: ReactNode;
+    /**
+     * Props for the auxiliary content button.
+     * Only used when auxiliaryContentType is 'button'.
+     */
+    auxiliaryContentButtonProps?: ButtonProps;
+    /**
+     * Text for the auxiliary content button.
+     * Only used when auxiliaryContentType is 'button'.
+     */
+    auxiliaryContentButtonText?: ReactNode;
+    /**
+     * Whether the auxiliary content control (checkbox/toggle) is checked.
+     * Only used when auxiliaryContentType is 'checkbox' or 'toggle'.
+     */
+    auxiliaryContentChecked?: boolean;
+    /**
+     * Label text for the auxiliary content control (checkbox/toggle).
+     * Only used when auxiliaryContentType is 'checkbox' or 'toggle'.
+     */
+    auxiliaryContentLabel?: string;
+    /**
+     * Change handler for auxiliary content control (checkbox/toggle).
+     * Only used when auxiliaryContentType is 'checkbox' or 'toggle'.
+     */
+    auxiliaryContentOnChange?: (checked: boolean) => void;
+    /**
+     * Click handler for the auxiliary content button.
+     * Only used when auxiliaryContentType is 'button'.
+     */
+    auxiliaryContentOnClick?: ButtonProps['onClick'];
+    /**
+     * Type of auxiliary content to show on the left side of the footer.
+     * - 'annotation': Display text annotation
+     * - 'button': Display a button
+     * - 'checkbox': Display a checkbox control
+     * - 'toggle': Display a toggle control
+     * - 'password': Display password-specific controls (remember me + forgot password)
+     * @default undefined (no auxiliary content)
+     */
+    auxiliaryContentType?: 'annotation' | 'button' | 'checkbox' | 'toggle' | 'password';
+    /**
+     * Additional props for the cancel button.
+     */
+    cancelButtonProps?: ButtonProps;
+    /**
+     * Text content of the cancel button.
+     */
+    cancelText?: ReactNode;
+    /**
+     * Additional props for the confirm button.
+     */
+    confirmButtonProps?: ButtonProps;
+    /**
+     * Text content of the confirm button.
+     */
+    confirmText?: ReactNode;
+    /**
+     * Whether confirm button is loading and cancel button is disabled.
+     */
+    loading?: boolean;
+    /**
+     * Click handler for the cancel button.
+     */
+    onCancel?: ButtonProps['onClick'];
+    /**
+     * Click handler for the confirm button.
+     */
+    onConfirm?: ButtonProps['onClick'];
+    /**
+     * Props for the password auxiliary button.
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordButtonProps?: ButtonProps;
+    /**
+     * Text for the password auxiliary button (e.g., "Forgot password?").
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordButtonText?: ReactNode;
+    /**
+     * Whether the password checkbox is checked (e.g., "Remember me").
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordChecked?: boolean;
+    /**
+     * Label for the password checkbox (e.g., "Remember me").
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordCheckedLabel?: string;
+    /**
+     * Change handler for the password checkbox.
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordCheckedOnChange?: (checked: boolean) => void;
+    /**
+     * Click handler for the password auxiliary button.
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordOnClick?: ButtonProps['onClick'];
+    /**
+     * Whether to show the cancel button.
+     * @default true
+     */
+    showCancelButton?: boolean;
+}
 /**
  * The react component for `mezzanine` modal footer.
  */

package/Modal/ModalFooter.js

@@ -1,14 +1,26 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { modalClasses } from '@mezzanine-ui/core/modal';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+import Checkbox from '../Checkbox/Checkbox.js';
+import Toggle from '../Toggle/Toggle.js';
+import Typography from '../Typography/Typography.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` modal footer.
  */
 const ModalFooter = forwardRef(function ModalFooter(props, ref) {
-    const { children, className, ...rest } = props;
-    return (jsx("div", { ...rest, ref: ref, className: cx(modalClasses.footer, className), children: children }));
+    const { children, className, actionsButtonLayout = 'fixed', annotation, auxiliaryContentButtonProps, auxiliaryContentButtonText, auxiliaryContentChecked, auxiliaryContentLabel, auxiliaryContentOnChange, auxiliaryContentOnClick, auxiliaryContentType, cancelButtonProps, cancelText, confirmButtonProps, confirmText, loading, onCancel, onConfirm, passwordButtonProps, passwordButtonText, passwordChecked, passwordCheckedLabel, passwordCheckedOnChange, passwordOnClick, showCancelButton = true, ...rest } = props;
+    const { disabled: cancelButtonDisabled = loading } = cancelButtonProps || {};
+    const isActionsButtonFillLayout = actionsButtonLayout === 'fill' && !auxiliaryContentType;
+    return (jsxs("div", { ...rest, ref: ref, className: cx(modalClasses.modalFooter, {
+            [modalClasses.modalFooter + '--password-mode']: auxiliaryContentType === 'password',
+            [modalClasses.modalFooter + '--with-auxiliary-content']: !!auxiliaryContentType && auxiliaryContentType !== 'password',
+        }, className), children: [auxiliaryContentType === 'password' && (jsxs("div", { className: modalClasses.modalFooterPasswordContainer, children: [jsx(Checkbox, { checked: passwordChecked, label: passwordCheckedLabel, onChange: (e) => passwordCheckedOnChange === null || passwordCheckedOnChange === void 0 ? void 0 : passwordCheckedOnChange(e.target.checked) }), jsx(Button, { variant: "base-text-link", ...passwordButtonProps, onClick: passwordOnClick, children: passwordButtonText })] })), auxiliaryContentType && auxiliaryContentType !== 'password' && (jsxs("div", { className: modalClasses.modalFooterAuxiliaryContentContainer, children: [auxiliaryContentType === 'annotation' && (jsx(Typography, { variant: "caption", color: "text-neutral", children: annotation })), auxiliaryContentType === 'button' && (jsx(Button, { variant: "base-text-link", ...auxiliaryContentButtonProps, onClick: auxiliaryContentOnClick, children: auxiliaryContentButtonText })), auxiliaryContentType === 'checkbox' && (jsx(Checkbox, { checked: auxiliaryContentChecked, label: auxiliaryContentLabel, onChange: (e) => auxiliaryContentOnChange === null || auxiliaryContentOnChange === void 0 ? void 0 : auxiliaryContentOnChange(e.target.checked) })), auxiliaryContentType === 'toggle' && (jsx(Toggle, { checked: auxiliaryContentChecked, label: auxiliaryContentLabel, onChange: (e) => auxiliaryContentOnChange === null || auxiliaryContentOnChange === void 0 ? void 0 : auxiliaryContentOnChange(e.target.checked) }))] })), jsxs(ButtonGroup, { className: cx(modalClasses.modalFooterActionsButtonContainer, {
+                    [modalClasses.modalFooterActionsButtonContainer + '--fill-layout']: isActionsButtonFillLayout,
+                }), children: [showCancelButton && (jsx(Button, { variant: "base-secondary", ...cancelButtonProps, disabled: cancelButtonDisabled, onClick: onCancel, className: modalClasses.modalFooterActionsButton, children: cancelText })), jsx(Button, { variant: "base-primary", ...confirmButtonProps, loading: loading, onClick: onConfirm, className: modalClasses.modalFooterActionsButton, children: confirmText })] }), children] }));
 });
 
 export { ModalFooter as default };

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,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 { CollapsedMenu } from './CollapsedMenu.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,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: {
@@ -42,48 +46,44 @@ 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]);
     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", { className: navigationClasses.content, children: [searchInput, jsx("ul", { children: renderItemChildren(flattenedChildren) })] }) }), footerComponent] }) }));
+            }, 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/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'> {
     /**

package/Navigation/NavigationOption.js

@@ -1,9 +1,11 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, 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 { 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';
@@ -21,10 +23,33 @@ const NavigationOption = forwardRef((props, ref) => {
     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 (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',
@@ -43,12 +68,12 @@ const NavigationOption = forwardRef((props, ref) => {
                             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, { 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/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;
+};