@mezzanine-ui/react 1.0.0-rc.0 → 1.0.0-rc.2

package/Modal/Modal.js

@@ -12,14 +12,14 @@ import cx from 'clsx';
  * The react component for `mezzanine` modal.
  */
 const Modal = forwardRef(function Modal(props, ref) {
-    const { actionsButtonLayout, annotation, auxiliaryContentButtonProps, auxiliaryContentButtonText, auxiliaryContentChecked, auxiliaryContentLabel, auxiliaryContentOnChange, auxiliaryContentOnClick, auxiliaryContentType, cancelButtonProps, cancelText, children, className, confirmButtonProps, confirmText, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, extendedSplitLeftSideContent, extendedSplitRightSideContent, fullScreen = false, loading = false, modalStatusType = 'info', modalType = 'standard', onBackdropClick, onCancel, onClose, onConfirm, open, passwordButtonProps, passwordButtonText, passwordChecked, passwordCheckedLabel, passwordCheckedOnChange, passwordOnClick, showCancelButton, showDismissButton = true, showModalFooter = false, showModalHeader, showStatusTypeIcon, size = 'regular', statusTypeIconLayout, supportingText, supportingTextAlign, title, titleAlign, ...rest } = props;
+    const { actionsButtonLayout, annotation, auxiliaryContentButtonProps, auxiliaryContentButtonText, auxiliaryContentChecked, auxiliaryContentLabel, auxiliaryContentOnChange, auxiliaryContentOnClick, auxiliaryContentType, backdropClassName, cancelButtonProps, cancelText, children, className, confirmButtonProps, confirmText, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, extendedSplitLeftSideContent, extendedSplitRightSideContent, fullScreen = false, loading = false, modalStatusType = 'info', modalType = 'standard', onBackdropClick, onCancel, onClose, onConfirm, open, passwordButtonProps, passwordButtonText, passwordChecked, passwordCheckedLabel, passwordCheckedOnChange, passwordOnClick, showCancelButton, showDismissButton = true, showModalFooter = false, showModalHeader, showStatusTypeIcon, size = 'regular', statusTypeIconLayout, supportingText, supportingTextAlign, title, titleAlign, ...rest } = props;
     const modalControl = useMemo(() => ({
         loading,
         modalStatusType: modalStatusType,
     }), [loading, modalStatusType]);
     const { Container: ModalContainer } = useModalContainer();
     const renderModalFooter = () => (jsx(ModalFooter, { actionsButtonLayout: actionsButtonLayout, annotation: annotation, auxiliaryContentButtonProps: auxiliaryContentButtonProps, auxiliaryContentButtonText: auxiliaryContentButtonText, auxiliaryContentChecked: auxiliaryContentChecked, auxiliaryContentLabel: auxiliaryContentLabel, auxiliaryContentOnChange: auxiliaryContentOnChange, auxiliaryContentOnClick: auxiliaryContentOnClick, auxiliaryContentType: auxiliaryContentType, cancelButtonProps: cancelButtonProps, cancelText: cancelText, confirmButtonProps: confirmButtonProps, confirmText: confirmText, loading: loading, onCancel: onCancel, onConfirm: onConfirm, passwordButtonProps: passwordButtonProps, passwordButtonText: passwordButtonText, passwordChecked: passwordChecked, passwordCheckedLabel: passwordCheckedLabel, passwordCheckedOnChange: passwordCheckedOnChange, passwordOnClick: passwordOnClick, showCancelButton: showCancelButton }));
-    return (jsx(ModalControlContext.Provider, { value: modalControl, children: jsx(ModalContainer, { className: modalClasses.overlay, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsxs("div", { ...rest, className: cx(modalClasses.host, modalClasses.modalStatusType(modalStatusType), modalClasses.size(size), {
+    return (jsx(ModalControlContext.Provider, { value: modalControl, children: jsx(ModalContainer, { className: backdropClassName, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsxs("div", { ...rest, className: cx(modalClasses.host, modalClasses.modalStatusType(modalStatusType), modalClasses.size(size), {
                     [modalClasses.fullScreen]: fullScreen,
                     [modalClasses.withCloseIcon]: showDismissButton,
                 }, className), role: "dialog", children: [showModalHeader && (jsx(ModalHeader, { showStatusTypeIcon: showStatusTypeIcon, statusTypeIconLayout: statusTypeIconLayout, supportingText: supportingText, supportingTextAlign: supportingTextAlign, title: title, titleAlign: titleAlign })), modalType === 'extendedSplit' && (jsxs("div", { className: modalClasses.modalBodyContainerExtendedSplit, children: [jsx("div", { className: modalClasses.modalBodyContainerExtendedSplitRight, children: extendedSplitRightSideContent }), jsxs("div", { className: modalClasses.modalBodyContainerExtendedSplitLeft, children: [jsx("div", { className: modalClasses.modalBodyContainerExtendedSplitLeftSideContent, children: extendedSplitLeftSideContent }), showModalFooter && renderModalFooter()] })] })), (modalType === 'standard' ||

package/Modal/useModalContainer.js

@@ -9,7 +9,6 @@ import Scale from '../Transition/Scale.js';
 import cx from 'clsx';
 
 const defaultOptions = {
-    className: modalClasses.overlay,
     disableCloseOnBackdropClick: false,
     disableCloseOnEscapeKeyDown: false,
     disablePortal: false,

package/Navigation/Navigation.d.ts

@@ -32,6 +32,10 @@ export interface NavigationProps extends Omit<NativeElementPropsWithoutKeyAndRef
      * Called when a navigation option is clicked.
      */
     onOptionClick?: (activePath?: string[]) => void;
+    /**
+     * Custom component for rendering navigation options which have an href prop.
+     */
+    optionsAnchorComponent?: React.ElementType;
 }
 declare const Navigation: import("react").ForwardRefExoticComponent<NavigationProps & import("react").RefAttributes<HTMLElement>>;
 export default Navigation;

package/Navigation/Navigation.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useCallback, useMemo, Children, isValidElement } from 'react';
+import { forwardRef, useState, useCallback, useMemo, Children, isValidElement, useRef, useEffect } from 'react';
 import { navigationClasses } from '@mezzanine-ui/core/navigation';
 import NavigationOption from './NavigationOption.js';
 import NavigationHeader from './NavigationHeader.js';
@@ -15,17 +15,19 @@ import Input from '../Input/Input.js';
 import cx from 'clsx';
 
 const Navigation = forwardRef((props, ref) => {
-    const { activatedPath, children = [], className, collapsed: collapsedProp, filter, onCollapseChange, onOptionClick, ...rest } = props;
+    const { activatedPath, children = [], className, collapsed: collapsedProp, filter, onCollapseChange, onOptionClick, optionsAnchorComponent, ...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 [innerActivatedPath, setInnerActivatedPath] = useState(activatedPath || []);
+    const [activatedPathKey, setActivatedPathKey] = useState(activatedPath ? activatedPath.join('::') : '');
     const combineSetActivatedPath = useCallback((newActivatedPath) => {
         onOptionClick === null || onOptionClick === void 0 ? void 0 : onOptionClick(newActivatedPath);
         setInnerActivatedPath(newActivatedPath);
+        setActivatedPathKey(newActivatedPath.join('::'));
     }, [onOptionClick]);
     const currentPathname = useCurrentPathname();
     const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
@@ -65,6 +67,38 @@ const Navigation = forwardRef((props, ref) => {
         });
         return { headerComponent, footerComponent, items, level1Items };
     }, [flattenedChildren]);
+    const hrefActivated = useRef(false);
+    // Scan level1Items and its descendants (up to level3) to find out whether href matches to determine whether to preset expansion and activatedPath
+    useEffect(() => {
+        if (hrefActivated.current || !currentPathname) {
+            return;
+        }
+        const checkActivatedPathKey = (items, path) => {
+            for (const item of items) {
+                if (!isValidElement(item) || item.type !== NavigationOption) {
+                    continue;
+                }
+                const newKey = item.props.id || item.props.title || item.props.href;
+                if (!newKey) {
+                    continue;
+                }
+                const newPath = [...path, newKey];
+                if (item.props.href && item.props.href === currentPathname) {
+                    combineSetActivatedPath(newPath);
+                    return true;
+                }
+                if (item.props.children) {
+                    const flattenedChildren = flattenChildren(item.props.children);
+                    if (checkActivatedPathKey(flattenedChildren, newPath)) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+        checkActivatedPathKey(level1Items, []);
+        hrefActivated.current = true;
+    }, [combineSetActivatedPath, currentPathname, level1Items]);
     const { contentRef, visibleCount } = useVisibleItems(items, collapsed);
     const { collapsedItems, collapsedMenuItems } = useMemo(() => {
         return {
@@ -77,11 +111,13 @@ const Navigation = forwardRef((props, ref) => {
     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,
+                activatedPathKey,
                 collapsed,
                 currentPathname,
                 filterText,
                 handleCollapseChange,
                 setActivatedPath: combineSetActivatedPath,
+                optionsAnchorComponent,
             }, 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] }) }));

package/Navigation/NavigationFooter.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, use, Children, isValidElement } from 'react';
+import { forwardRef, use, useRef, useState, useEffect, Children, isValidElement } from 'react';
 import { navigationFooterClasses } from '@mezzanine-ui/core/navigation';
 import NavigationUserMenu from './NavigationUserMenu.js';
 import { NavigationActivatedContext } from './context.js';
@@ -22,7 +22,24 @@ 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, collapsed && navigationFooterClasses.collapsed, className), children: [userMenu, jsx("span", { className: navigationFooterClasses.icons, children: otherChildren })] }));
+    const iconsRef = useRef(null);
+    const [iconsWidth, setIconsWidth] = useState(0);
+    useEffect(() => {
+        if (!iconsRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            if (iconsRef.current) {
+                setIconsWidth(iconsRef.current.offsetWidth);
+            }
+        });
+        resizeObserver.observe(iconsRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    return (jsxs("footer", { ...rest, ref: ref, className: cx(navigationFooterClasses.host, collapsed && navigationFooterClasses.collapsed, className), style: {
+            ['--icons-width']: `${iconsWidth}px`,
+        }, children: [userMenu, jsx("span", { ref: iconsRef, className: navigationFooterClasses.icons, children: otherChildren })] }));
 });
 
 export { NavigationFooter as default };

package/Navigation/NavigationOption.d.ts

@@ -13,6 +13,10 @@ export interface NavigationOptionProps extends Omit<NativeElementPropsWithoutKey
      * Strict children with `NavigationOption`.
      */
     children?: NavigationOptionChildren;
+    /**
+     * Custom component to render, it should support `href` and `onClick` props if provided.
+     */
+    anchorComponent?: React.ElementType;
     /**
      * Icon of the item.
      */

package/Navigation/NavigationOption.js

@@ -1,34 +1,32 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, use, useId, useMemo, useEffect, Children, isValidElement } from 'react';
+import { forwardRef, use, useState, useId, useMemo, Children, isValidElement, useEffect, useRef } from 'react';
 import { navigationOptionClasses } from '@mezzanine-ui/core/navigation';
 import { ChevronUpIcon, ChevronDownIcon } from '@mezzanine-ui/icons';
-import { NavigationOptionLevelContext, NavigationActivatedContext } from './context.js';
+import { NavigationActivatedContext, NavigationOptionLevelContext } 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 Fade from '../Transition/Fade.js';
 import Collapse from '../Transition/Collapse.js';
 import cx from 'clsx';
 
 const NavigationOption = forwardRef((props, ref) => {
-    const { active, children, className, defaultOpen = false, href, icon, id, onTriggerClick, title, ...rest } = props;
-    const [open, setOpen] = useState(defaultOpen);
+    var _a;
+    const { active, children, className, anchorComponent, defaultOpen, href, icon, id, onTriggerClick, title, ...rest } = props;
+    const { activatedPathKey, activatedPath, collapsed, filterText, handleCollapseChange, setActivatedPath, optionsAnchorComponent, } = use(NavigationActivatedContext);
+    const [open, setOpen] = useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
     const GroupToggleIcon = open ? ChevronUpIcon : ChevronDownIcon;
     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, 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 currentPathKey = currentPath.join('::');
+    const Component = href && !children
+        ? ((_a = anchorComponent !== null && anchorComponent !== void 0 ? anchorComponent : optionsAnchorComponent) !== null && _a !== void 0 ? _a : 'a')
+        : 'div';
     const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
     const { badge, items } = useMemo(() => {
         let badgeComponent = null;
@@ -51,6 +49,13 @@ const NavigationOption = forwardRef((props, ref) => {
         });
         return { badge: badgeComponent, items };
     }, [flattenedChildren]);
+    // Default open if current path is activated
+    useEffect(() => {
+        if (activatedPathKey === currentPathKey ||
+            activatedPathKey.startsWith(`${currentPathKey}::`)) {
+            setOpen(true);
+        }
+    }, [activatedPathKey, currentLevel, currentPathKey]);
     const [filter, setFilter] = useState(true);
     useEffect(() => {
         var _a;
@@ -60,10 +65,28 @@ const NavigationOption = forwardRef((props, ref) => {
         }
         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]);
+    const titleRef = useRef(null);
+    const [titleOverflow, setTitleOverflow] = useState(false);
+    useEffect(() => {
+        if (!titleRef.current)
+            return;
+        const checkOverflow = () => {
+            if (!titleRef.current)
+                return;
+            const { scrollWidth, clientWidth } = titleRef.current;
+            setTitleOverflow(scrollWidth > clientWidth);
+        };
+        checkOverflow();
+        const resizeObserver = new ResizeObserver(checkOverflow);
+        resizeObserver.observe(titleRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [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, !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: () => {
+            navigationOptionClasses.active, collapsed && navigationOptionClasses.collapsed, !collapsed && !filter && navigationOptionClasses.hidden, className), "data-id": currentKey, children: [jsx(Tooltip, { disablePortal: false, options: {
+                    placement: collapsed ? 'right' : 'top',
+                }, title: collapsed || titleOverflow ? title : undefined, children: ({ onMouseEnter, onMouseLeave, ref: tooltipChildRef }) => (jsxs(Component, { className: cx(navigationOptionClasses.content, navigationOptionClasses.level(currentLevel)), href: Component === 'div' ? undefined : href, onClick: () => {
                         setOpen(!open);
                         onTriggerClick === null || onTriggerClick === void 0 ? void 0 : onTriggerClick(currentPath, currentKey, href);
                         if (collapsed) {
@@ -78,9 +101,7 @@ const NavigationOption = forwardRef((props, ref) => {
                             if (!children)
                                 setActivatedPath(currentPath);
                         }
-                    }, 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: {
+                    }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: tooltipChildRef, role: "menuitem", tabIndex: 0, children: [icon && jsx(Icon, { className: navigationOptionClasses.icon, icon: icon }), jsx(Fade, { ref: titleRef, in: collapsed === false || !icon, children: jsx("span", { className: navigationOptionClasses.title, children: title }) }), badge, children && (jsx(Icon, { className: navigationOptionClasses.toggleIcon, icon: GroupToggleIcon }))] })) }), children && !collapsed && (jsx(Collapse, { lazyMount: true, className: cx(navigationOptionClasses.childrenWrapper), in: open, children: jsx(NavigationOptionLevelContext.Provider, { value: {
                         level: currentLevel,
                         path: currentPath,
                     }, children: jsx("ul", { className: navigationOptionClasses.group, children: items }) }) }))] }));

package/Navigation/NavigationOverflowMenuOption.js

@@ -11,22 +11,26 @@ 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;
+    var _a;
+    const { active, children, className, anchorComponent, 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);
+    const currentPathKey = currentPath.join('::');
+    const { activatedPath, activatedPathKey, setActivatedPath, optionsAnchorComponent, } = use(NavigationActivatedContext);
+    // Default open if current path is activated
     useEffect(() => {
-        if (currentPathname === href) {
-            setActivatedPath(currentPath);
+        if (activatedPathKey === currentPathKey ||
+            activatedPathKey.startsWith(`${currentPathKey}::`)) {
             setOpen(true);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const Component = href ? 'a' : 'div';
+    }, [activatedPathKey, currentLevel, currentPathKey]);
+    const Component = href
+        ? ((_a = anchorComponent !== null && anchorComponent !== void 0 ? anchorComponent : optionsAnchorComponent) !== null && _a !== void 0 ? _a : 'a')
+        : 'div';
     const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
     const { badge, items } = useMemo(() => {
         let badgeComponent = null;

package/Navigation/NavigationUserMenu.d.ts

@@ -3,6 +3,7 @@ import { DropdownProps } from '../Dropdown';
 export interface NavigationUserMenuProps extends Omit<DropdownProps, 'children' | 'type'> {
     children?: ReactNode;
     className?: string;
+    collapsedPlacement?: DropdownProps['placement'];
     imgSrc?: string;
     onClick?: () => void;
 }

package/Navigation/NavigationUserMenu.js

@@ -1,26 +1,45 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useState, use, useRef, useEffect } from 'react';
 import { navigationUserMenuClasses } from '@mezzanine-ui/core/navigation';
 import { UserIcon, ChevronDownIcon } from '@mezzanine-ui/icons';
+import { NavigationActivatedContext } from './context.js';
 import Dropdown from '../Dropdown/Dropdown.js';
+import Tooltip from '../Tooltip/Tooltip.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 { open: openProp, onClose, placement = 'top-end', collapsedPlacement = 'right-end', onVisibilityChange, ...dropdownRest } = rest;
     const [imgError, setImgError] = useState(false);
     const [_open, setOpen] = useState(false);
+    const { collapsed } = use(NavigationActivatedContext);
     const open = openProp !== null && openProp !== void 0 ? openProp : _open;
-    return (jsx(Dropdown, { ...dropdownRest, open: open, placement: placement, onVisibilityChange: () => {
+    const userNameRef = useRef(null);
+    const [userNameOverflow, setUserNameOverflow] = useState(false);
+    useEffect(() => {
+        if (!userNameRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            if (userNameRef.current) {
+                setUserNameOverflow(userNameRef.current.scrollWidth > userNameRef.current.offsetWidth);
+            }
+        });
+        resizeObserver.observe(userNameRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    return (jsx(Dropdown, { ...dropdownRest, open: open, placement: collapsed ? collapsedPlacement : placement, onVisibilityChange: () => {
             setOpen(!open);
             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 })] }) }));
+        }, children: jsx("button", { className: cx(navigationUserMenuClasses.host, open && navigationUserMenuClasses.open, className), ref: ref, type: "button", children: jsx(Tooltip, { disablePortal: false, options: {
+                    placement: collapsed ? 'right' : 'top',
+                }, title: (collapsed || userNameOverflow) && !open ? children : undefined, children: ({ onMouseEnter, onMouseLeave, ref: tooltipRef }) => (jsxs("span", { className: navigationUserMenuClasses.content, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: tooltipRef, children: [jsx("span", { className: navigationUserMenuClasses.avatar, children: imgError || !imgSrc ? (jsx(Icon, { icon: UserIcon })) : (jsx("img", { alt: "User avatar", className: navigationUserMenuClasses.avatar, src: imgSrc, onError: () => setImgError(true) })) }), children && (jsx("span", { className: navigationUserMenuClasses.userName, children: jsx("span", { ref: userNameRef, children: children }) })), jsx(Icon, { className: navigationUserMenuClasses.icon, icon: ChevronDownIcon })] })) }) }) }));
 });
 
 export { NavigationUserMenu as default };

package/Navigation/context.d.ts

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

package/Navigation/context.js

@@ -1,6 +1,9 @@
 import { createContext } from 'react';
 
-const navigationOptionLevelContextDefaultValues = { level: 0, path: [] };
+const navigationOptionLevelContextDefaultValues = {
+    level: 0,
+    path: [],
+};
 const NavigationOptionLevelContext = createContext(navigationOptionLevelContextDefaultValues);
 const NavigationActivatedContext = createContext(null);
 

package/Picker/RangePickerTrigger.js

@@ -69,7 +69,7 @@ const RangePickerTrigger = forwardRef(function RangePickerTrigger(props, ref) {
     const handleToBlur = useCallback((e) => {
         onToBlur === null || onToBlur === void 0 ? void 0 : onToBlur(e);
     }, [onToBlur]);
-    return (jsxs(TextField, { ...restTextFieldProps, ...defaultTextFieldProps, ref: ref, className: cx(pickerClasses.host, className), clearable: !readOnly && clearable, suffix: suffix !== null && suffix !== void 0 ? suffix : defaultSuffix, children: [jsx(FormattedInput, { ...inputFromProps, ref: fromRef, "aria-disabled": disabled, "aria-label": "Start date", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesFrom, format: format, onBlur: handleFromBlur, onChange: handleFromChange, onFocus: handleFromFocus, placeholder: inputFromPlaceholder, readOnly: readOnly, required: required, validate: validateFrom, value: inputFromValue }), jsx(Icon, { icon: LongTailArrowRightIcon, className: pickerClasses.arrowIcon, "aria-hidden": "true" }), jsx(FormattedInput, { ...inputToProps, ref: toRef, "aria-disabled": disabled, "aria-label": "End date", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesTo, format: format, onBlur: handleToBlur, onChange: handleToChange, onFocus: handleToFocus, placeholder: inputToPlaceholder, readOnly: readOnly, required: required, validate: validateTo, value: inputToValue })] }));
+    return (jsxs(TextField, { ...restTextFieldProps, ...defaultTextFieldProps, ref: ref, className: cx(pickerClasses.host, pickerClasses.hostRange, className), clearable: !readOnly && clearable, suffix: suffix !== null && suffix !== void 0 ? suffix : defaultSuffix, children: [jsx(FormattedInput, { ...inputFromProps, ref: fromRef, "aria-disabled": disabled, "aria-label": "Start date", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesFrom, format: format, onBlur: handleFromBlur, onChange: handleFromChange, onFocus: handleFromFocus, placeholder: inputFromPlaceholder, readOnly: readOnly, required: required, validate: validateFrom, value: inputFromValue }), jsx(Icon, { icon: LongTailArrowRightIcon, className: pickerClasses.arrowIcon, "aria-hidden": "true" }), jsx(FormattedInput, { ...inputToProps, ref: toRef, "aria-disabled": disabled, "aria-label": "End date", "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, errorMessages: errorMessagesTo, format: format, onBlur: handleToBlur, onChange: handleToChange, onFocus: handleToFocus, placeholder: inputToPlaceholder, readOnly: readOnly, required: required, validate: validateTo, value: inputToValue })] }));
 });
 
 export { RangePickerTrigger as default };

package/Section/Section.js

@@ -1,4 +1,4 @@
-import { jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, cloneElement, isValidElement } from 'react';
 import { sectionClasses } from '@mezzanine-ui/core/section';
 import ContentHeader from '../ContentHeader/ContentHeader.js';
@@ -11,9 +11,9 @@ function getDisplayName(element) {
     if (typeof type === 'string') {
         return type;
     }
-    return type.displayName
-        || type.name
-        || 'Unknown';
+    return (type.displayName ||
+        type.name ||
+        'Unknown');
 }
 function isContentHeaderElement(element) {
     return isValidElement(element) && element.type === ContentHeader;
@@ -28,7 +28,7 @@ function isTabElement(element) {
  * The react component for `mezzanine` section.
  */
 const Section = forwardRef(function Section(props, ref) {
-    const { children, className, contentHeader, filterArea, tab, } = props;
+    const { children, className, contentHeader, filterArea, tab } = props;
     let renderedContentHeader = null;
     let renderedFilterArea = null;
     let renderedTab = null;
@@ -56,7 +56,7 @@ const Section = forwardRef(function Section(props, ref) {
             console.warn(`[Section] Invalid tab type: <${getDisplayName(tab)}>. Only <Tab /> component from @mezzanine-ui/react is allowed.`);
         }
     }
-    return (jsxs("div", { ref: ref, className: cx(sectionClasses.host, className), children: [renderedContentHeader, renderedFilterArea, renderedTab, children] }));
+    return (jsxs("div", { ref: ref, className: cx(sectionClasses.host, className), children: [renderedContentHeader, renderedFilterArea, renderedTab, jsx("div", { className: sectionClasses.hostContent, children: children })] }));
 });
 
 export { Section as default };

package/Transition/Collapse.d.ts

@@ -10,7 +10,8 @@ export interface CollapseProps extends TransitionImplementationProps, Omit<Nativ
 }
 /**
  * The react component for `mezzanine` transition collapse.
- * @deprecated 設計師未定義，暫時標記為 deprecated
+ * @deprecated 設計師未定義，暫時標記為 deprecated.
+ * 目前 NavigationOption 與 Accordion 正在使用此元件.
  */
 declare const Collapse: import("react").ForwardRefExoticComponent<CollapseProps & import("react").RefAttributes<HTMLElement>>;
 export default Collapse;

package/Transition/Collapse.js

@@ -27,7 +27,8 @@ const defaultEasing = {
 };
 /**
  * The react component for `mezzanine` transition collapse.
- * @deprecated 設計師未定義，暫時標記為 deprecated
+ * @deprecated 設計師未定義，暫時標記為 deprecated.
+ * 目前 NavigationOption 與 Accordion 正在使用此元件.
  */
 const Collapse = forwardRef(function Collapse(props, ref) {
     const { appear, children, collapsedHeight: collapsedHeightProp = 0, delay = 0, duration = 'auto', easing = defaultEasing, in: inProp = false, lazyMount, keepMount, onEnter, onEntered, onEntering, onExit, onExiting, onExited, style, ...rest } = props;

package/Upload/Upload.js

@@ -14,11 +14,13 @@ const Upload = forwardRef(function Upload(props, ref) {
     const { accept, className, disabled = false, mode = 'list', size = 'main', showFileSize = true, files: controlledFiles = [], onUpload, onDelete, onReload, onDownload, onZoomIn, onChange, id, name, multiple = false, maxFiles, hints, uploaderLabel, uploaderIcon, inputRef, inputProps, onMaxFilesExceeded, errorMessage, errorIcon, ...rest } = props;
     const files = controlledFiles;
     const filesRef = useRef(files);
+    const replaceFileIdRef = useRef(null);
+    const replaceInputRef = useRef(null);
     useEffect(() => {
         filesRef.current = files;
     }, [files]);
     // Default error icon when status is error and no errorIcon is provided
-    const defaultErrorIconElement = useMemo(() => errorIcon !== null && errorIcon !== void 0 ? errorIcon : jsx(Icon, { icon: DangerousFilledIcon, color: "error", size: 24 }), [errorIcon]);
+    const defaultErrorIconElement = useMemo(() => errorIcon !== null && errorIcon !== void 0 ? errorIcon : (jsx(Icon, { icon: DangerousFilledIcon, color: "error", size: 24 })), [errorIcon]);
     // Auto-disable when maxFiles is reached
     const isMaxFilesReached = useMemo(() => {
         if (maxFiles === undefined)
@@ -37,6 +39,12 @@ const Upload = forwardRef(function Upload(props, ref) {
     const handleUpload = useCallback(async (selectedFiles) => {
         if (!selectedFiles.length)
             return;
+        // If a replace operation is in progress, remove the old file first
+        if (replaceFileIdRef.current !== null) {
+            const fileIdToReplace = replaceFileIdRef.current;
+            replaceFileIdRef.current = null;
+            filesRef.current = filesRef.current.filter((f) => f.id !== fileIdToReplace);
+        }
         // Check maxFiles limit
         if (maxFiles !== undefined) {
             const currentCount = filesRef.current.length;
@@ -100,7 +108,8 @@ const Upload = forwardRef(function Upload(props, ref) {
                             var _a, _b, _c;
                             const tempIndex = tempIdToIndex.get(file.id);
                             // If this is a temp file and we have a corresponding backend file
-                            if (tempIndex !== undefined && tempIndex < backendFiles.length) {
+                            if (tempIndex !== undefined &&
+                                tempIndex < backendFiles.length) {
                                 const backendFile = backendFiles[tempIndex];
                                 // Replace temporary file with backend file (includes real ID and status)
                                 // Apply default error message and icon if status is error and not provided
@@ -124,7 +133,8 @@ const Upload = forwardRef(function Upload(props, ref) {
                         const nextFiles = filesRef.current.map((file) => {
                             const tempIndex = tempIdToIndex.get(file.id);
                             // If this is a temp file and we have a corresponding backend ID
-                            if (tempIndex !== undefined && tempIndex < backendIds.length) {
+                            if (tempIndex !== undefined &&
+                                tempIndex < backendIds.length) {
                                 const backendId = backendIds[tempIndex];
                                 // Replace temporary ID with backend ID, set status to 'done'
                                 return {
@@ -142,7 +152,11 @@ const Upload = forwardRef(function Upload(props, ref) {
                 else {
                     // Old API: backward compatibility - no return value, assume success
                     const nextFiles = filesRef.current.map((file) => tempFiles.some((tf) => tf.id === file.id)
-                        ? { ...file, status: 'done', progress: 100 }
+                        ? {
+                            ...file,
+                            status: 'done',
+                            progress: 100,
+                        }
                         : file);
                     emitChange(nextFiles);
                 }
@@ -172,7 +186,14 @@ const Upload = forwardRef(function Upload(props, ref) {
                 : file);
             emitChange(nextFiles);
         }
-    }, [emitChange, maxFiles, onMaxFilesExceeded, onUpload, errorMessage, defaultErrorIconElement]);
+    }, [
+        emitChange,
+        maxFiles,
+        onMaxFilesExceeded,
+        onUpload,
+        errorMessage,
+        defaultErrorIconElement,
+    ]);
     const handleDelete = useCallback((fileId) => {
         const file = findFileById(fileId);
         if (!file)
@@ -254,6 +275,7 @@ const Upload = forwardRef(function Upload(props, ref) {
     const shouldUsePictureCard = useMemo(() => {
         return /cards|card-wall/.test(mode);
     }, [mode]);
+    const isSingleFileCardMode = shouldUsePictureCard && maxFiles === 1;
     const renderUploadItem = useCallback((uploadFile) => {
         // Skip rendering if neither file nor url is provided
         if (!uploadFile.file && !uploadFile.url) {
@@ -262,18 +284,50 @@ const Upload = forwardRef(function Upload(props, ref) {
         // Determine if it's an image using shared utility
         const isImage = isImageFile(uploadFile.file, uploadFile.url);
         // For images, use 'thumbnail' to show image preview; for non-images, use 'icon' to show file icon
-        const itemType = isImage ? 'thumbnail' : 'icon';
+        const itemType = isImage
+            ? 'thumbnail'
+            : 'icon';
         return (jsx(UploadItem, { file: uploadFile.file, url: uploadFile.url, id: uploadFile.id, status: uploadFile.status, size: size, type: itemType, showFileSize: showFileSize, disabled: disabled, onDelete: () => handleDelete(uploadFile.id), onDownload: () => handleDownload(uploadFile.id), onReload: () => handleReload(uploadFile.id) }, uploadFile.id));
-    }, [size, showFileSize, disabled, handleDelete, handleDownload, handleReload]);
+    }, [
+        size,
+        showFileSize,
+        disabled,
+        handleDelete,
+        handleDownload,
+        handleReload,
+    ]);
     const uploaderElement = (jsx(Uploader, { accept: accept, disabled: effectiveDisabled, id: id, name: name, multiple: multiple, label: uploaderLabel, icon: uploaderIcon, inputRef: inputRef, inputProps: inputProps, hints: hints, onUpload: handleUpload, ...uploaderConfig }));
     const topUploaderElement = topUploaderConfig ? (jsx(Uploader, { accept: accept, disabled: effectiveDisabled, id: id ? `${id}-top` : undefined, name: name, multiple: multiple, label: uploaderLabel, icon: uploaderIcon, inputRef: inputRef, inputProps: inputProps, hints: hints, onUpload: handleUpload, ...topUploaderConfig })) : null;
     const hintsElement = useMemo(() => {
-        if (!hints || hints.length === 0 || mode === 'list' || mode === 'card-wall')
+        if (!hints ||
+            hints.length === 0 ||
+            mode === 'list' ||
+            mode === 'card-wall')
             return null;
         const hintsClassName = mode === 'cards' ? uploadClasses.fillWidthHints : uploadClasses.hints;
         return (jsx("ul", { className: hintsClassName, children: hints.map((hint) => (jsxs("li", { className: uploadClasses.hint(hint.type || 'info'), children: [jsx(Icon, { icon: hint.type === 'info' ? InfoFilledIcon : DangerousFilledIcon, color: hint.type === 'info' ? 'info' : 'error', size: 14 }), hint.label] }, hint.label))) }));
     }, [hints, mode]);
-    return (jsxs("div", { ref: ref, className: cx(uploadClasses.host, className, mode === 'cards' && uploadClasses.hostCards), ...rest, children: [topUploaderElement, !shouldUsePictureCard && (jsxs("div", { className: uploadClasses.uploadButtonList, children: [uploaderElement, mode === 'button-list' && hintsElement] })), jsxs("div", { className: cx(uploadClasses.uploadList, shouldUsePictureCard && uploadClasses.uploadListCards), children: [shouldUsePictureCard && (jsxs(Fragment, { children: [imageFiles.map((uploadFile) => (jsx(UploadPictureCard, { file: uploadFile.file, url: uploadFile.url, id: uploadFile.id, status: uploadFile.status, size: size, disabled: disabled, errorMessage: uploadFile.errorMessage, onDelete: () => handleDelete(uploadFile.id), onReload: () => handleReload(uploadFile.id), onDownload: () => handleDownload(uploadFile.id), onZoomIn: () => handleZoomIn(uploadFile.id) }, uploadFile.id))), uploaderElement] })), nonImageFiles.length > 0 && nonImageFiles.map(renderUploadItem), !shouldUsePictureCard && imageFiles.length > 0 && imageFiles.map(renderUploadItem)] }), mode === 'cards' && hintsElement] }));
+    return (jsxs("div", { ref: ref, className: cx(uploadClasses.host, className, mode === 'cards' && uploadClasses.hostCards), ...rest, children: [topUploaderElement, !shouldUsePictureCard && (jsxs("div", { className: uploadClasses.uploadButtonList, children: [uploaderElement, mode === 'button-list' && hintsElement] })), jsxs("div", { className: cx(uploadClasses.uploadList, shouldUsePictureCard && uploadClasses.uploadListCards), children: [shouldUsePictureCard && (jsxs(Fragment, { children: [imageFiles.map((uploadFile) => (jsx(UploadPictureCard, { file: uploadFile.file, url: uploadFile.url, id: uploadFile.id, status: uploadFile.status, size: size, disabled: disabled, errorMessage: uploadFile.errorMessage, onDelete: () => handleDelete(uploadFile.id), onReload: () => handleReload(uploadFile.id), ...(!isSingleFileCardMode && {
+                                    onDownload: () => handleDownload(uploadFile.id),
+                                    onZoomIn: () => handleZoomIn(uploadFile.id),
+                                }), ...(isSingleFileCardMode && {
+                                    onReplace: (e) => {
+                                        var _a;
+                                        e.stopPropagation();
+                                        replaceFileIdRef.current = uploadFile.id;
+                                        (_a = replaceInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                                    },
+                                }) }, uploadFile.id))), !isSingleFileCardMode && uploaderElement, isSingleFileCardMode &&
+                                imageFiles.length === 0 &&
+                                uploaderElement, isSingleFileCardMode && (jsx("input", { ref: replaceInputRef, accept: accept, style: { display: 'none' }, type: "file", onChange: (e) => {
+                                    var _a;
+                                    const selectedFiles = Array.from((_a = e.target.files) !== null && _a !== void 0 ? _a : []);
+                                    e.target.value = '';
+                                    if (selectedFiles.length)
+                                        handleUpload(selectedFiles);
+                                } }))] })), nonImageFiles.length > 0 && nonImageFiles.map(renderUploadItem), !shouldUsePictureCard &&
+                        imageFiles.length > 0 &&
+                        imageFiles.map(renderUploadItem)] }), mode === 'cards' && hintsElement] }));
 });
 
 export { Upload as default };