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

package/Modal/Modal.js

@@ -25,7 +25,7 @@ const Modal = forwardRef(function Modal(props, ref) {
                 }, 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' ||
                         modalType === 'verification' ||
                         modalType === 'extended' ||
-                        modalType === 'mediaPreview') && (jsxs(Fragment, { children: [jsx("div", { className: modalClasses.modalBodyContainer, children: children }), showModalFooter && renderModalFooter()] })), showDismissButton && (jsx(ClearActions, { onClick: onClose, className: modalClasses.closeIcon, variant: "base" }))] }) }) }));
+                        modalType === 'mediaPreview') && (jsxs(Fragment, { children: [children && (jsx("div", { className: modalClasses.modalBodyContainer, children: children })), showModalFooter && renderModalFooter()] })), showDismissButton && (jsx(ClearActions, { onClick: onClose, className: modalClasses.closeIcon, variant: "base" }))] }) }) }));
 });
 
 export { Modal as default };

package/Modal/index.d.ts

@@ -5,6 +5,8 @@ export type { ModalFooterProps } from './ModalFooter';
 export { default as ModalFooter } from './ModalFooter';
 export type { ModalHeaderProps } from './ModalHeader';
 export { default as ModalHeader } from './ModalHeader';
+export type { MediaPreviewModalProps } from './MediaPreviewModal';
+export { default as MediaPreviewModal } from './MediaPreviewModal';
 export { default as useModalContainer } from './useModalContainer';
 export type { ModalContainerProps } from './useModalContainer';
 export type { ModalProps } from './Modal';

package/Modal/index.js

@@ -1,5 +1,6 @@
 export { default as ModalBodyForVerification } from './ModalBodyForVerification.js';
 export { default as ModalFooter } from './ModalFooter.js';
 export { default as ModalHeader } from './ModalHeader.js';
+export { default as MediaPreviewModal } from './MediaPreviewModal.js';
 export { default as useModalContainer } from './useModalContainer.js';
 export { default } from './Modal.js';

package/Navigation/Navigation.js

@@ -10,7 +10,7 @@ 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 { NavigationOverflowMenu } from './NavigationOverflowMenu.js';
 import Input from '../Input/Input.js';
 import cx from 'clsx';
 
@@ -29,7 +29,6 @@ const Navigation = forwardRef((props, ref) => {
     }, [onOptionClick]);
     const currentPathname = useCurrentPathname();
     const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
-    const [filterText, setFilterText] = useState('');
     const { headerComponent, footerComponent, items, level1Items } = useMemo(() => {
         let headerComponent = null;
         let footerComponent = null;
@@ -75,15 +74,17 @@ const Navigation = forwardRef((props, ref) => {
             collapsedMenuItems: visibleCount !== null ? level1Items.slice(visibleCount) : [],
         };
     }, [level1Items, visibleCount]);
+    const [filterText, setFilterText] = useState('');
     return (jsx("nav", { ...rest, ref: ref, className: cx(navigationClasses.host, collapsed ? navigationClasses.collapsed : navigationClasses.expand, className), children: jsxs(NavigationActivatedContext.Provider, { value: {
                 activatedPath: activatedPath || innerActivatedPath,
-                setActivatedPath: combineSetActivatedPath,
-                currentPathname,
                 collapsed,
+                currentPathname,
+                filterText,
                 handleCollapseChange,
+                setActivatedPath: combineSetActivatedPath,
             }, children: [headerComponent, jsx(NavigationOptionLevelContext.Provider, { value: navigationOptionLevelContextDefaultValues, children: jsxs("div", { ref: contentRef, className: navigationClasses.content, children: [filter && (jsx(Input, { size: "sub", variant: "search", className: cx(navigationClasses.searchInput), value: filterText, onChange: (e) => setFilterText(e.target.value) })), jsxs("ul", { children: [collapsed ? collapsedItems : items, collapsed &&
                                         visibleCount !== null &&
-                                        visibleCount < level1Items.length && (jsx(CollapsedMenu, { items: collapsedMenuItems }))] }, collapsed ? 'collapsed' : 'expand')] }) }), footerComponent] }) }));
+                                        visibleCount < level1Items.length && (jsx(NavigationOverflowMenu, { items: collapsedMenuItems }))] }, collapsed ? 'collapsed' : 'expand')] }) }), footerComponent] }) }));
 });
 
 export { Navigation as default };

package/Navigation/NavigationOption.d.ts

@@ -20,17 +20,21 @@ export interface NavigationOptionProps extends Omit<NativeElementPropsWithoutKey
     /**
      * Unique ID of the item.
      */
+    id?: string;
+    /**
+     * Href of the item.
+     */
     href?: string;
     /**
      * Set display title for sub-menu item.
      */
-    title?: string;
+    title: string;
     /**
      * Open menu as default
      * @default false
      */
     defaultOpen?: boolean;
-    onTriggerClick?: (path: string[], href: string) => void;
+    onTriggerClick?: (path: string[], currentKey: string, href?: string) => void;
 }
 declare const NavigationOption: import("react").ForwardRefExoticComponent<NavigationOptionProps & import("react").RefAttributes<HTMLLIElement>>;
 export default NavigationOption;

package/Navigation/NavigationOption.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, use, useMemo, useEffect, Children, isValidElement } from 'react';
+import { forwardRef, useState, use, useId, useMemo, useEffect, Children, isValidElement } from 'react';
 import { navigationOptionClasses } from '@mezzanine-ui/core/navigation';
 import { ChevronUpIcon, ChevronDownIcon } from '@mezzanine-ui/icons';
 import { NavigationOptionLevelContext, NavigationActivatedContext } from './context.js';
@@ -12,14 +12,15 @@ import Collapse from '../Transition/Collapse.js';
 import cx from 'clsx';
 
 const NavigationOption = forwardRef((props, ref) => {
-    const { active, children, className, defaultOpen = false, href, icon, onTriggerClick, title, ...rest } = props;
+    const { active, children, className, defaultOpen = false, href, icon, id, onTriggerClick, title, ...rest } = props;
     const [open, setOpen] = useState(defaultOpen);
     const GroupToggleIcon = open ? ChevronUpIcon : ChevronDownIcon;
     const { level, path: parentPath } = use(NavigationOptionLevelContext);
-    const currentLevel = level + 1;
-    const currentKey = href || title || 'unknownId';
+    const currentLevel = level + 1; // start as 1
+    const uuid = useId();
+    const currentKey = id || title || href || uuid;
     const currentPath = useMemo(() => [...parentPath, currentKey], [parentPath, currentKey]);
-    const { activatedPath, setActivatedPath, currentPathname, collapsed, handleCollapseChange, } = use(NavigationActivatedContext);
+    const { activatedPath, collapsed, currentPathname, filterText, handleCollapseChange, setActivatedPath, } = use(NavigationActivatedContext);
     useEffect(() => {
         if (currentPathname === href) {
             setActivatedPath(currentPath);
@@ -50,23 +51,32 @@ const NavigationOption = forwardRef((props, ref) => {
         });
         return { badge: badgeComponent, items };
     }, [flattenedChildren]);
+    const [filter, setFilter] = useState(true);
+    useEffect(() => {
+        var _a;
+        if (!filterText) {
+            setFilter(true);
+            return;
+        }
+        setFilter((_a = (title.includes(filterText) || (href === null || href === void 0 ? void 0 : href.includes(filterText)))) !== null && _a !== void 0 ? _a : false);
+    }, [currentPath, filterText, href, title]);
     return (jsxs("li", { ...rest, ref: ref, className: cx(navigationOptionClasses.host, open && navigationOptionClasses.open, !children && navigationOptionClasses.basic, (active !== null && active !== void 0 ? active : (activatedPath === null || activatedPath === void 0 ? void 0 : activatedPath[currentLevel - 1]) === currentKey) &&
-            navigationOptionClasses.active, collapsed && navigationOptionClasses.collapsed, className), "data-id": currentKey, children: [jsx(Tooltip, { options: {
+            navigationOptionClasses.active, collapsed && navigationOptionClasses.collapsed, !collapsed && !filter && navigationOptionClasses.hidden, className), "data-id": currentKey, children: [jsx(Tooltip, { options: {
                     placement: 'right',
                 }, title: collapsed ? title : undefined, children: ({ onMouseEnter, onMouseLeave, ref: tooltipChildRef }) => (jsxs(Component, { className: cx(navigationOptionClasses.content, navigationOptionClasses.level(currentLevel)), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: tooltipChildRef, href: href, onClick: () => {
                         setOpen(!open);
-                        onTriggerClick === null || onTriggerClick === void 0 ? void 0 : onTriggerClick(currentPath, href || '');
+                        onTriggerClick === null || onTriggerClick === void 0 ? void 0 : onTriggerClick(currentPath, currentKey, href);
                         if (collapsed) {
                             handleCollapseChange(false);
                         }
                         if (!children)
-                            setActivatedPath([...parentPath, currentKey]);
+                            setActivatedPath(currentPath);
                     }, onKeyDown: (e) => {
                         if (e.key === 'Enter' || e.key === ' ') {
                             e.preventDefault();
                             setOpen(!open);
                             if (!children)
-                                setActivatedPath([...parentPath, currentKey]);
+                                setActivatedPath(currentPath);
                         }
                     }, role: "menuitem", tabIndex: 0, children: [icon && jsx(Icon, { className: navigationOptionClasses.icon, icon: icon }), jsx("span", { className: navigationOptionClasses.title, children: title }), badge, children && (jsx(Icon, { className: navigationOptionClasses.toggleIcon, icon: GroupToggleIcon }))] })) }), children && !collapsed && (jsx(Collapse, { className: navigationOptionClasses.childrenWrapper, style: {
                     width: '100%',

package/Navigation/NavigationOverflowMenu.d.ts

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

package/Navigation/NavigationOverflowMenu.js

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

package/Navigation/NavigationOverflowMenuOption.d.ts

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

package/Navigation/NavigationOverflowMenuOption.js

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

package/Navigation/NavigationUserMenu.d.ts

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

package/Navigation/NavigationUserMenu.js

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

package/Navigation/context.d.ts

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

package/NotificationCenter/NotificationCenter.d.ts

@@ -96,7 +96,7 @@ export interface NotificationData extends NotifierData, NotificationConfigProps
      * The time stamp of notification on the drawer list.
      * @default new Date().toLocaleTimeString()
      */
-    timeStamp?: string;
+    timeStamp?: string | number;
     /**
      * The locale of the time stamp.
      * @default 'zh-TW'

package/NotificationCenter/NotificationCenter.js

@@ -87,21 +87,41 @@ const NotificationCenter = ((props) => {
     const [open, setOpen] = useState(true);
     const [timeStampAnchor, setTimeStampAnchor] = useState(null);
     const timeStampRef = useRef(null);
+    const isToday = useMemo(() => {
+        try {
+            const timestampDate = new Date(timeStamp);
+            // Check if the time stamp is a valid date
+            if (Number.isNaN(timestampDate.getTime())) {
+                return false;
+            }
+            const now = new Date();
+            const nowStartOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+            const timestampStartOfDay = new Date(timestampDate.getFullYear(), timestampDate.getMonth(), timestampDate.getDate());
+            return timestampStartOfDay.getTime() === nowStartOfDay.getTime();
+        }
+        catch (_a) {
+            return false;
+        }
+    }, [timeStamp]);
     const formattedTimeStamp = useMemo(() => {
         try {
             const timestampDate = new Date(timeStamp);
+            const timeStampText = typeof timeStamp === 'string' ? timeStamp : String(timeStamp);
             // Check if the time stamp is a valid date
-            if (isNaN(timestampDate.getTime())) {
-                return timeStamp;
+            if (Number.isNaN(timestampDate.getTime())) {
+                return timeStampText;
             }
             const now = Date.now();
-            const diffInMs = timestampDate.getTime() - now;
-            const diffInSeconds = Math.round(diffInMs / 1000);
-            const diffInDays = Math.round(diffInSeconds / 86400);
-            if (Math.abs(diffInDays) <= 7) {
+            const nowDate = new Date(now);
+            const nowStartOfDay = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate());
+            const timestampStartOfDay = new Date(timestampDate.getFullYear(), timestampDate.getMonth(), timestampDate.getDate());
+            const isToday = nowStartOfDay.getTime() === timestampStartOfDay.getTime();
+            // Only show relative time if the timestamp is today
+            if (isToday) {
+                const diffInMs = timestampDate.getTime() - now;
+                const diffInSeconds = Math.round(diffInMs / 1000);
                 const rtf = new Intl.RelativeTimeFormat(timeStampLocale, { numeric: 'always' });
                 const units = [
-                    { unit: 'day', seconds: 86400 },
                     { unit: 'hour', seconds: 3600 },
                     { unit: 'minute', seconds: 60 },
                 ];
@@ -113,7 +133,7 @@ const NotificationCenter = ((props) => {
                 }
                 return 'now';
             }
-            const hasTimeComponent = /:\d{2}/.test(timeStamp) || timeStamp.includes('T');
+            const hasTimeComponent = /:\d{2}/.test(timeStampText) || timeStampText.includes('T');
             if (hasTimeComponent) {
                 const dateFormatter = new Intl.DateTimeFormat(timeStampLocale, {
                     year: 'numeric',
@@ -135,7 +155,7 @@ const NotificationCenter = ((props) => {
             }
         }
         catch (_a) {
-            return timeStamp;
+            return typeof timeStamp === 'string' ? timeStamp : String(timeStamp);
         }
     }, [timeStamp, timeStampLocale]);
     useEffect(() => {
@@ -186,7 +206,7 @@ const NotificationCenter = ((props) => {
         }
     }, [onBadgeSelectProp]);
     const handleNotificationMouseEnter = () => {
-        if (type === 'drawer') {
+        if (type === 'drawer' && isToday) {
             setTimeout(() => {
                 if (timeStampRef.current) {
                     setTimeStampAnchor(timeStampRef.current);
@@ -195,7 +215,7 @@ const NotificationCenter = ((props) => {
         }
     };
     const handleNotificationMouseLeave = () => {
-        if (type === 'drawer') {
+        if (type === 'drawer' && isToday) {
             setTimeStampAnchor(null);
         }
     };
@@ -208,7 +228,7 @@ const NotificationCenter = ((props) => {
                                 ? (jsx(Button, { onClick: onConfirm, size: "minor", ...confirmButtonProps, children: confirmButtonText }))
                                 : jsx(Fragment, {}), showCancelButton
                                 ? (jsx(Button, { onClick: onCancel || onClose, size: "minor", variant: "base-secondary", ...cancelButtonProps, children: cancelButtonText }))
-                                : jsx(Fragment, {})] })), type === 'drawer' && (jsxs(Fragment, { children: [jsx(Popper, { anchor: timeStampAnchor, open: Boolean(timeStampAnchor), arrow: {
+                                : jsx(Fragment, {})] })), type === 'drawer' && (jsxs(Fragment, { children: [isToday && (jsx(Popper, { anchor: timeStampAnchor, open: Boolean(timeStampAnchor), arrow: {
                                     className: notificationClasses.timeStampPopperArrow,
                                     enabled: true,
                                     padding: 0,
@@ -220,11 +240,11 @@ const NotificationCenter = ((props) => {
                                         offset({ mainAxis: 8 }),
                                         flip(),
                                     ],
-                                }, children: jsx("div", { className: notificationClasses.timeStampPopper, children: jsx(Typography, { className: notificationClasses.timeStampText, children: timeStamp }) }) }), jsx(Typography, { ref: timeStampRef, className: notificationClasses.timeStamp, children: formattedTimeStamp })] }))] }), type === 'drawer'
+                                }, children: jsx("div", { className: notificationClasses.timeStampPopper, children: jsx(Typography, { className: notificationClasses.timeStampText, children: timeStamp }) }) })), jsx(Typography, { ref: timeStampRef, className: notificationClasses.timeStamp, children: formattedTimeStamp })] }))] }), type === 'drawer'
                 ? (jsx(Dropdown, { open: openDropdown, onClose: () => setOpenDropdown(false), onVisibilityChange: (open) => setOpenDropdown(open), options: options !== null && options !== void 0 ? options : [], onSelect: onSelect, placement: "bottom-end", zIndex: 'var(--mzn-z-index-popover)', children: jsxs(Button, { variant: "base-ghost", size: "minor", onClick: onClose, children: [showBadge && jsx(Badge, { variant: "dot-error" }), jsx(Icon, { icon: DotVerticalIcon, className: notificationClasses.closeIcon, size: 16, onClick: onBadgeClick })] }) }))
                 : (jsx(Icon, { icon: CloseIcon, className: notificationClasses.closeIcon, size: 16, onClick: onClose }))] }));
     if (type === 'notification') {
-        return (jsxs(Fragment, { children: [prependTips && jsx(Typography, { className: notificationClasses.prependTips, children: prependTips }), jsx(Slide, { in: open, appear: true, onExited: onExited, ...restTransitionProps, children: notificationContent }), appendTips && jsx(Typography, { className: notificationClasses.appendTips, children: appendTips })] }));
+        return (jsx(Slide, { in: open, appear: true, onExited: onExited, ...restTransitionProps, children: notificationContent }));
     }
     return (jsxs(Fragment, { children: [prependTips && jsx(Typography, { className: notificationClasses.prependTips, children: prependTips }), notificationContent, appendTips && jsx(Typography, { className: notificationClasses.appendTips, children: appendTips })] }));
 });

package/NotificationCenter/NotificationCenterDrawer.d.ts

@@ -67,6 +67,26 @@ type NotificationCenterDrawerPropsBase = Pick<DrawerProps, 'open' | 'onClose'> &
      * The value of the radio group.
      */
     value?: string;
+    /**
+     * The label for the "earlier" time group.
+     * @default '更早'
+     */
+    earlierLabel?: string;
+    /**
+     * The label for the "past 7 days" time group.
+     * @default '過去七天'
+     */
+    past7DaysLabel?: string;
+    /**
+     * The label for the "today" time group.
+     * @default '今天'
+     */
+    todayLabel?: string;
+    /**
+     * The label for the "yesterday" time group.
+     * @default '昨天'
+     */
+    yesterdayLabel?: string;
 };
 export type NotificationCenterDrawerProps = (NotificationCenterDrawerPropsBase & {
     /**

package/PageHeader/PageHeader.d.ts

@@ -1,40 +1,47 @@
-import { HTMLAttributes, ReactElement } from 'react';
+import { ReactElement } from 'react';
 import { BreadcrumbProps } from '../Breadcrumb';
-import { ButtonProps } from '../Button';
-import { PageToolbarProps } from '../PageToolbar';
-import { TypographyProps } from '../Typography';
+import { ContentHeaderProps } from '../ContentHeader';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-type PageHeaderChild = ReactElement<BreadcrumbProps> | ReactElement<PageToolbarProps> | ReactElement<ButtonProps> | ReactElement<HTMLAttributes<HTMLAnchorElement>> | null | undefined | false;
+type PageHeaderChild = ReactElement<BreadcrumbProps> | ReactElement<ContentHeaderProps> | null | undefined | false;
 /**
  * Props for the PageHeader component.
  * Extends native HTML header element props.
  */
 export type PageHeaderProps = NativeElementPropsWithoutKeyAndRef<'header'> & {
-    /** Optional back button properties */
-    onBackClick?: () => void;
-    /** Optional description text displayed below the title */
-    description?: string;
-    /** Main title text for the page header */
-    title: string;
-    /** HTML element type for the title (defaults to 'h2') */
-    titleComponent?: TypographyProps['component'];
-    /** Child components: Breadcrumb, PageToolbar, Button, or component with href prop */
+    /**
+     * Child components: Breadcrumb or ContentHeader
+     * */
     children?: PageHeaderChild | PageHeaderChild[];
 };
 /**
- * PageHeader component displays a page title with optional breadcrumb navigation,
- * description, back button, and action toolbar.
+ * PageHeader component
+ *
+ * Used to display the page header, typically containing a `<Breadcrumb />` and a `<ContentHeader />`.
+ *
+ * @example
+ * ```tsx
+ * <PageHeader>
+ *   <Breadcrumb
+ *     links={[
+ *       { id: '1', children: 'Home', href: '/' },
+ *       { id: '2', children: 'Page Header' },
+ *     ]}
+ *   />
+ *
+ *   <ContentHeader
+ *     title="Page Title"
+ *     description="This is the page description."
+ *   >
+ *     <Button variant="base-secondary">Secondary</Button>
+ *     <Button>Primary</Button>
+ *   </ContentHeader>
+ * </PageHeader>
+ * ```
  */
 declare const PageHeader: import("react").ForwardRefExoticComponent<NativeElementPropsWithoutKeyAndRef<"header"> & {
-    /** Optional back button properties */
-    onBackClick?: () => void;
-    /** Optional description text displayed below the title */
-    description?: string;
-    /** Main title text for the page header */
-    title: string;
-    /** HTML element type for the title (defaults to 'h2') */
-    titleComponent?: TypographyProps["component"];
-    /** Child components: Breadcrumb, PageToolbar, Button, or component with href prop */
+    /**
+     * Child components: Breadcrumb or ContentHeader
+     * */
     children?: PageHeaderChild | PageHeaderChild[];
 } & import("react").RefAttributes<HTMLElement>>;
 export default PageHeader;