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

package/Navigation/useVisibleItems.js

@@ -0,0 +1,54 @@
+import { useRef, useState, useEffect } from 'react';
+
+function useVisibleItems(items, collapsed) {
+    const contentRef = useRef(null);
+    const [visibleCount, setVisibleCount] = useState(null);
+    useEffect(() => {
+        const contentEl = contentRef.current;
+        if (!contentEl)
+            return;
+        let timeoutId = null;
+        const calculateVisibleItems = () => {
+            if (!collapsed) {
+                setVisibleCount(null);
+                return;
+            }
+            const contentHeight = contentEl.clientHeight;
+            const ul = contentEl.querySelector('ul');
+            const option = contentEl.querySelector('.mzn-navigation-option--level-1');
+            const optionHeight = (option === null || option === void 0 ? void 0 : option.clientHeight) || 0;
+            const optionsGapTightFixed = 4;
+            if (optionHeight === 0) {
+                setVisibleCount(0);
+                return;
+            }
+            if (!ul)
+                return;
+            const count = Math.floor((contentHeight + optionsGapTightFixed) /
+                (optionHeight + optionsGapTightFixed)) - 1;
+            setVisibleCount(count);
+        };
+        const debouncedCalculate = () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+            timeoutId = setTimeout(() => {
+                calculateVisibleItems();
+            }, 100);
+        };
+        const resizeObserver = new ResizeObserver(() => {
+            debouncedCalculate();
+        });
+        resizeObserver.observe(contentEl);
+        calculateVisibleItems();
+        return () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+            resizeObserver.disconnect();
+        };
+    }, [collapsed, items]);
+    return { contentRef, visibleCount };
+}
+
+export { useVisibleItems };

package/NotificationCenter/NotificationCenter.d.ts

@@ -0,0 +1,124 @@
+import { FC, Key } from 'react';
+import { DropdownOption } from '@mezzanine-ui/core/dropdown/dropdown';
+import { NotificationSeverity, NotificationType } from '@mezzanine-ui/core/notification-center';
+import { ButtonProps } from '../Button';
+import { Notifier, NotifierConfig, NotifierData } from '../Notifier';
+import { SlideProps } from '../Transition';
+export interface NotificationConfigProps extends Pick<NotifierConfig, 'duration'>, Pick<SlideProps, 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'easing'> {
+    /**
+     * Callback function when "View All" button is clicked.
+     * This will be called after closing all notifications.
+     */
+    onViewAll?: VoidFunction;
+    /**
+     * The text of the "View All" button.
+     * @default '查看更多'
+     */
+    viewAllButtonText?: string;
+}
+export interface NotificationData extends NotifierData, NotificationConfigProps {
+    /**
+     * The tips to be appended to the notification.
+     * Only displayed when the type is 'drawer'.
+     */
+    appendTips?: string;
+    /**
+     * Other props of cancel button.
+     */
+    cancelButtonProps?: ButtonProps;
+    /**
+     * Cancel button text.
+     */
+    cancelButtonText?: string;
+    /**
+     * Other props of confirm button.
+     */
+    confirmButtonProps?: ButtonProps;
+    /**
+     * Confirm button text.
+     */
+    confirmButtonText?: string;
+    /**
+     * The description of notification.
+     */
+    description?: string;
+    /**
+     * The maximum number of notifications to be displayed.
+     * Only displayed when the type is 'notification'.
+     * @default 3
+     */
+    maxVisibleNotifications?: number;
+    /**
+     * The callback function when the badge is clicked.
+     * Only displayed when the type is 'drawer'.
+     */
+    onBadgeClick?: VoidFunction;
+    /**
+     * The callback function when the badge is selected.
+     * Only displayed when the type is 'drawer'.
+     */
+    onBadgeSelect?: (option: DropdownOption) => void;
+    /**
+     * Cancel button click event handler. <br />
+     * If not provided, the event handler will fallback to a close function using `NotificationCenter.remove`.
+     */
+    onCancel?: VoidFunction;
+    /**
+     * Confirm button click event handler. <br />
+     * If given, will render action button group.
+     */
+    onConfirm?: VoidFunction;
+    /**
+     * The options of the badge.
+     * Only displayed when the type is 'drawer'.
+     */
+    options?: DropdownOption[];
+    /**
+     * The tips to be prepended to the notification.
+     * Only displayed when the type is 'drawer'.
+     */
+    prependTips?: string;
+    /**
+     * The identifier of the notification.
+     */
+    reference?: Key;
+    /**
+     * The severity of the message.
+     * @default info
+     */
+    severity?: NotificationSeverity;
+    /**
+     * The props of the badge.
+     * Only displayed when the type is 'drawer'.
+     */
+    showBadge?: boolean;
+    /**
+     * The time stamp of notification on the drawer list.
+     * @default new Date().toLocaleTimeString()
+     */
+    timeStamp?: string;
+    /**
+     * The locale of the time stamp.
+     * @default 'zh-TW'
+     */
+    timeStampLocale?: string;
+    /**
+     * The title of notification.
+     */
+    title?: string;
+    /**
+     * The type of notification.
+     * @default 'notification'
+     */
+    type?: NotificationType;
+}
+export interface NotificationCenter extends FC<NotificationData>, Notifier<NotificationData, NotificationConfigProps>, Record<NotificationSeverity, (props?: Omit<NotificationData, 'severity'>) => Key> {
+}
+/**
+ * The react component for `mezzanine` notification center.
+ *
+ * Use the API from the NotificationCenter instance such as `NotificationCenter.success` and `NotificationCenter.error`
+ * to display a notification globally.
+ */
+declare const NotificationCenter: NotificationCenter;
+export default NotificationCenter;

package/NotificationCenter/NotificationCenter.js

@@ -0,0 +1,259 @@
+'use client';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useEffect, useCallback, Children, isValidElement, Fragment as Fragment$1 } from 'react';
+import { offset, flip } from '@floating-ui/react-dom';
+import { notificationIcons, notificationClasses } from '@mezzanine-ui/core/notification-center';
+import { DotVerticalIcon, CloseIcon } from '@mezzanine-ui/icons';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+import Typography from '../Typography/Typography.js';
+import Icon from '../Icon/Icon.js';
+import Popper from '../Popper/Popper.js';
+import Dropdown from '../Dropdown/Dropdown.js';
+import Badge from '../Badge/Badge.js';
+import Slide from '../Transition/Slide.js';
+import cx from 'clsx';
+import { createNotifier } from '../Notifier/createNotifier.js';
+
+const DEFAULT_MAX_VISIBLE_NOTIFICATIONS = 3;
+const NotificationCenterContainer = ({ children }) => {
+    const notificationItems = useMemo(() => Children.toArray(children), [children]);
+    // Helper function to extract NotificationCenter component from Fragment or direct element
+    const extractNotificationCenter = (child) => {
+        if (!isValidElement(child)) {
+            return null;
+        }
+        // If it's a Fragment, check its children
+        if (child.type === Fragment$1) {
+            const fragmentProps = child.props;
+            const fragmentChildren = Children.toArray(fragmentProps.children);
+            const notificationCenter = fragmentChildren.find((fragmentChild) => isValidElement(fragmentChild));
+            return notificationCenter !== null && notificationCenter !== void 0 ? notificationCenter : null;
+        }
+        // If it's directly a NotificationCenter component
+        if (isValidElement(child)) {
+            return child;
+        }
+        return null;
+    };
+    const maxVisibleNotifications = useMemo(() => {
+        var _a;
+        const firstNotification = notificationItems
+            .map(extractNotificationCenter)
+            .find((notification) => notification !== null);
+        if (firstNotification) {
+            return (_a = firstNotification.props.maxVisibleNotifications) !== null && _a !== void 0 ? _a : DEFAULT_MAX_VISIBLE_NOTIFICATIONS;
+        }
+        return DEFAULT_MAX_VISIBLE_NOTIFICATIONS;
+    }, [notificationItems]);
+    const onViewAll = useMemo(() => {
+        const firstNotification = notificationItems
+            .map(extractNotificationCenter)
+            .find((notification) => notification !== null);
+        return firstNotification === null || firstNotification === void 0 ? void 0 : firstNotification.props.onViewAll;
+    }, [notificationItems]);
+    const viewAllButtonText = useMemo(() => {
+        var _a;
+        const firstNotification = notificationItems
+            .map(extractNotificationCenter)
+            .find((notification) => notification !== null);
+        return (_a = firstNotification === null || firstNotification === void 0 ? void 0 : firstNotification.props.viewAllButtonText) !== null && _a !== void 0 ? _a : '查看更多';
+    }, [notificationItems]);
+    const hasOverflow = notificationItems.length > maxVisibleNotifications;
+    const visibleItems = useMemo(() => notificationItems.slice(0, maxVisibleNotifications), [notificationItems, maxVisibleNotifications]);
+    const handleViewAll = () => {
+        NotificationCenter.destroy();
+        if (onViewAll) {
+            onViewAll();
+        }
+    };
+    if (!notificationItems.length) {
+        return null;
+    }
+    return (jsxs(Fragment, { children: [visibleItems, hasOverflow
+                ? (jsx("div", { className: notificationClasses.viewAllButton, children: jsx(Button, { onClick: handleViewAll, size: "main", variant: "base-secondary", className: notificationClasses.viewAllButtonText, children: viewAllButtonText }) }))
+                : null] }));
+};
+/**
+ * The react component for `mezzanine` notification center.
+ *
+ * Use the API from the NotificationCenter instance such as `NotificationCenter.success` and `NotificationCenter.error`
+ * to display a notification globally.
+ */
+const NotificationCenter = ((props) => {
+    const { type = 'notification', cancelButtonProps = {}, cancelButtonText = 'Cancel', confirmButtonProps = {}, confirmButtonText = 'Confirm', description, duration, onCancel: onCancelProp, onClose: onCloseProp, onConfirm: onConfirmProp, onExited: onExitedProp, reference, severity = 'info', title, timeStamp = new Date().toLocaleTimeString(), timeStampLocale = 'zh-TW', showBadge, onBadgeClick: onBadgeClickProp, options, onBadgeSelect: onBadgeSelectProp, prependTips, appendTips, ...restTransitionProps } = props;
+    const targetIcon = notificationIcons[severity];
+    const [openDropdown, setOpenDropdown] = useState(false);
+    const [open, setOpen] = useState(true);
+    const [timeStampAnchor, setTimeStampAnchor] = useState(null);
+    const timeStampRef = useRef(null);
+    const formattedTimeStamp = useMemo(() => {
+        try {
+            const timestampDate = new Date(timeStamp);
+            // Check if the time stamp is a valid date
+            if (isNaN(timestampDate.getTime())) {
+                return timeStamp;
+            }
+            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 rtf = new Intl.RelativeTimeFormat(timeStampLocale, { numeric: 'always' });
+                const units = [
+                    { unit: 'day', seconds: 86400 },
+                    { unit: 'hour', seconds: 3600 },
+                    { unit: 'minute', seconds: 60 },
+                ];
+                for (const { unit, seconds } of units) {
+                    const value = Math.round(diffInSeconds / seconds);
+                    if (Math.abs(value) >= 1) {
+                        return rtf.format(value, unit);
+                    }
+                }
+                return 'now';
+            }
+            const hasTimeComponent = /:\d{2}/.test(timeStamp) || timeStamp.includes('T');
+            if (hasTimeComponent) {
+                const dateFormatter = new Intl.DateTimeFormat(timeStampLocale, {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    hour12: false,
+                });
+                return dateFormatter.format(timestampDate).replace(/\//g, '-');
+            }
+            else {
+                const dateFormatter = new Intl.DateTimeFormat(timeStampLocale, {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                });
+                return dateFormatter.format(timestampDate).replace(/\//g, '-');
+            }
+        }
+        catch (_a) {
+            return timeStamp;
+        }
+    }, [timeStamp, timeStampLocale]);
+    useEffect(() => {
+        if (open && duration) {
+            const timer = window.setTimeout(() => {
+                setOpen(false);
+            }, duration);
+            return () => {
+                window.clearTimeout(timer);
+            };
+        }
+    }, [open, duration]);
+    const onBadgeClick = useCallback(() => {
+        if (onBadgeClickProp) {
+            onBadgeClickProp();
+        }
+        if (options && options.length > 0) {
+            setOpenDropdown(true);
+        }
+    }, [onBadgeClickProp, setOpenDropdown, options]);
+    const onClose = () => {
+        setOpen(false);
+        if (onCloseProp) {
+            onCloseProp(reference);
+        }
+    };
+    const onConfirm = onConfirmProp
+        ? () => {
+            setOpen(false);
+            onConfirmProp();
+        }
+        : undefined;
+    const onCancel = onCancelProp
+        ? () => {
+            setOpen(false);
+            onCancelProp();
+        }
+        : undefined;
+    const onExited = (node) => {
+        if (onExitedProp) {
+            onExitedProp(node);
+        }
+        NotificationCenter.remove(reference);
+    };
+    const onSelect = useCallback((option) => {
+        if (onBadgeSelectProp) {
+            onBadgeSelectProp(option);
+        }
+    }, [onBadgeSelectProp]);
+    const handleNotificationMouseEnter = () => {
+        if (type === 'drawer') {
+            setTimeout(() => {
+                if (timeStampRef.current) {
+                    setTimeStampAnchor(timeStampRef.current);
+                }
+            }, 0);
+        }
+    };
+    const handleNotificationMouseLeave = () => {
+        if (type === 'drawer') {
+            setTimeStampAnchor(null);
+        }
+    };
+    const showConfirmButton = Boolean(confirmButtonText && onConfirmProp);
+    const showCancelButton = Boolean(cancelButtonText && (onCancelProp || onCloseProp));
+    const hideButtons = !(type === 'notification' && (showConfirmButton || showCancelButton));
+    const notificationContent = (jsxs("div", { className: cx(notificationClasses.host, notificationClasses.severity(severity), notificationClasses.type(type)), onMouseEnter: handleNotificationMouseEnter, onMouseLeave: handleNotificationMouseLeave, children: [targetIcon
+                ? (jsx("div", { className: notificationClasses.iconContainer, children: jsx(Icon, { icon: targetIcon, className: notificationClasses.severityIcon }) }))
+                : null, jsxs("div", { className: notificationClasses.body, children: [jsxs("div", { className: notificationClasses.bodyContent, children: [jsx("h4", { className: notificationClasses.title, children: title }), jsx(Typography, { className: notificationClasses.content, children: description })] }), !hideButtons && (jsxs(ButtonGroup, { className: notificationClasses.action, children: [showConfirmButton
+                                ? (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: {
+                                    className: notificationClasses.timeStampPopperArrow,
+                                    enabled: true,
+                                    padding: 0,
+                                }, style: {
+                                    zIndex: 'var(--mzn-z-index-popover)',
+                                }, options: {
+                                    placement: 'bottom',
+                                    middleware: [
+                                        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'
+                ? (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 (jsxs(Fragment, { children: [prependTips && jsx(Typography, { className: notificationClasses.prependTips, children: prependTips }), notificationContent, appendTips && jsx(Typography, { className: notificationClasses.appendTips, children: appendTips })] }));
+});
+const { add: addNotifier, config, destroy, remove } = createNotifier({
+    duration: false,
+    render: (notif) => {
+        const { key, ...restNotif } = notif;
+        return (jsx(NotificationCenter, { ...restNotif, reference: key }, key));
+    },
+    renderContainer: (children) => (jsx(NotificationCenterContainer, { children: children })),
+    setRoot: (root) => {
+        root === null || root === void 0 ? void 0 : root.setAttribute('class', notificationClasses.root);
+    },
+});
+NotificationCenter.add = (notif) => {
+    if (notif.type === 'drawer') {
+        return 'NOT_SET';
+    }
+    return addNotifier(notif);
+};
+NotificationCenter.config = config;
+NotificationCenter.destroy = destroy;
+NotificationCenter.remove = remove;
+['success', 'warning', 'error', 'info'].forEach((severity) => {
+    NotificationCenter[severity] = (props) => NotificationCenter.add({
+        ...props,
+        severity: severity || 'info',
+        type: 'notification',
+    });
+});
+
+export { NotificationCenter as default };

package/NotificationCenter/NotificationCenterDrawer.d.ts

@@ -0,0 +1,89 @@
+import { type ChangeEventHandler, type ComponentProps, type Key, type ReactElement } from 'react';
+import { DrawerSize } from '@mezzanine-ui/core/drawer';
+import { type IconDefinition } from '@mezzanine-ui/icons';
+import { type DrawerProps } from '../Drawer';
+import NotificationCenter, { type NotificationData } from './NotificationCenter';
+type NotificationDataForDrawer = NotificationData & {
+    key: Key;
+    type: 'drawer';
+};
+type NotificationCenterDrawerPropsBase = Pick<DrawerProps, 'open' | 'onClose'> & {
+    /**
+     * The label of the all radio.
+     */
+    allRadioLabel?: string;
+    /**
+     * The label of the custom radio.
+     */
+    customRadioLabel?: string;
+    /**
+     * The default value of the radio group.
+     */
+    defaultValue?: string;
+    /**
+     * The size of the drawer.
+     * @default 'narrow'
+     */
+    drawerSize?: DrawerSize;
+    /**
+     * The icon of the empty notification.
+     */
+    emptyNotificationIcon?: IconDefinition;
+    /**
+     * The title of the empty notification.
+     */
+    emptyNotificationTitle?: string;
+    /**
+     * The callback function when the custom button is clicked.
+     */
+    onCustomButtonClick?: VoidFunction;
+    /**
+     * The callback function when the radio group value changes.
+     */
+    onRadioChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The label of the read radio.
+     */
+    readRadioLabel?: string;
+    /**
+     * Controls whether to display the toolbar.
+     * @default true
+     */
+    showToolbar?: boolean;
+    /**
+     * Controls whether to display the unread button.
+     * @default false
+     */
+    showUnreadButton?: boolean;
+    /**
+     * The title of the drawer.
+     */
+    title?: string;
+    /**
+     * The label of the unread radio.
+     */
+    unreadRadioLabel?: string;
+    /**
+     * The value of the radio group.
+     */
+    value?: string;
+};
+export type NotificationCenterDrawerProps = (NotificationCenterDrawerPropsBase & {
+    /**
+     * The children of the drawer.
+     * Use this when you want to manually render NotificationCenter components.
+     * Can be a single NotificationCenter element or an array of them.
+     */
+    children: ReactElement<ComponentProps<typeof NotificationCenter>> | ReactElement<ComponentProps<typeof NotificationCenter>>[];
+    notificationList?: never;
+}) | (NotificationCenterDrawerPropsBase & {
+    /**
+     * The list of notifications to render.
+     * Use this when you want to pass notification data and let the component render them.
+     * Each notification must have `key` and `type: 'drawer'`.
+     */
+    notificationList: NotificationDataForDrawer[];
+    children?: never;
+});
+declare const NotificationCenterDrawer: (props: NotificationCenterDrawerProps) => import("react/jsx-runtime").JSX.Element;
+export default NotificationCenterDrawer;

package/NotificationCenter/index.d.ts

@@ -0,0 +1,3 @@
+export type { NotificationSeverity } from '@mezzanine-ui/core/notification-center';
+export { default } from './NotificationCenter';
+export type { NotificationConfigProps, NotificationData, } from './NotificationCenter';

package/NotificationCenter/index.js

@@ -0,0 +1 @@
+export { default } from './NotificationCenter.js';

package/PageFooter/PageFooter.d.ts

@@ -1,5 +1,6 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import type { ButtonProps } from '../Button';
+import { DropdownProps } from '../Dropdown';
 /**
  * Single button configuration - only primary button is allowed
  */
@@ -41,14 +42,23 @@ type PageFooterStandardProps = PageFooterBaseProps & {
      */
     type?: 'standard';
     /**
-     * Standard type: A ghost button with text.
-     * Children of the button.
+     * The text/label (children) for the supporting action button in the PageFooter annotation.
      */
-    annotation?: string;
+    supportingActionName?: ButtonProps['children'];
+    /**
+     * The HTML button type for the supporting action (e.g., 'button', 'submit', 'reset').
+     */
+    supportingActionType?: ButtonProps['type'];
+    /**
+     * Click handler for the supporting action button in the PageFooter annotation.
+     */
+    supportingActionOnClick?: ButtonProps['onClick'];
     /**
-     * Standard type: Button click handler.
+     * Visual style variant of the supporting action button in the PageFooter
+     * (for example, 'base-ghost', 'base-secondary').
+     * @default 'base-ghost'
      */
-    onAnnotationClick?: ButtonProps['onClick'];
+    supportingActionVariant?: ButtonProps['variant'];
 };
 type PageFooterOverflowProps = PageFooterBaseProps & {
     /**
@@ -57,13 +67,13 @@ type PageFooterOverflowProps = PageFooterBaseProps & {
     type: 'overflow';
     /**
      * Overflow type: Icon for the icon-only button.
-     * @TODO Consider Dropdown integration after Dropdown redesign.
+     * @default DotVerticalIcon
      */
-    annotation?: ButtonProps['icon'];
+    supportingActionIcon?: ButtonProps['icon'];
     /**
-     * Overflow type: Button click handler.
+     * Dropdown props for the supporting action button.
      */
-    onAnnotationClick?: ButtonProps['onClick'];
+    dropdownProps: Partial<DropdownProps>;
 };
 type PageFooterInformationProps = PageFooterBaseProps & {
     /**

package/PageFooter/PageFooter.js

@@ -4,11 +4,13 @@ import { pageFooterClasses } from '@mezzanine-ui/core/page-footer';
 import Button from '../Button/Button.js';
 import ButtonGroup from '../Button/ButtonGroup.js';
 import Typography from '../Typography/Typography.js';
+import { DotVerticalIcon } from '@mezzanine-ui/icons';
+import Dropdown from '../Dropdown/Dropdown.js';
 import cx from 'clsx';
 
 const PageFooter = forwardRef(function PageFooter(props, ref) {
     var _a;
-    const { actions, annotation, annotationClassName, className, type = 'standard', warningMessage, ...rest } = props;
+    const { actions, annotationClassName, className, type = 'standard', warningMessage, ...rest } = props;
     // Filter out onAnnotationClick from rest props to avoid React warnings
     if ('onAnnotationClick' in rest) {
         delete rest.onAnnotationClick;
@@ -16,21 +18,19 @@ const PageFooter = forwardRef(function PageFooter(props, ref) {
     const { children: primaryButtonText, ...restPrimaryButtonProps } = (_a = actions === null || actions === void 0 ? void 0 : actions.primaryButton) !== null && _a !== void 0 ? _a : {};
     // Render annotation based on type
     const renderAnnotation = () => {
-        if (!annotation)
-            return null;
         switch (type) {
             case 'standard': {
-                return (jsx(Button, { onClick: 'onAnnotationClick' in props
-                        ? props.onAnnotationClick
-                        : undefined, size: "main", variant: "base-ghost", children: annotation }));
+                const { supportingActionName, supportingActionType, supportingActionOnClick, supportingActionVariant = 'base-ghost', } = props;
+                return (jsx(Button, { size: "main", type: supportingActionType, onClick: supportingActionOnClick, variant: supportingActionVariant, children: supportingActionName }));
             }
             case 'overflow': {
-                // @TODO Consider Dropdown integration after Dropdown redesign
-                return (jsx(Button, { icon: annotation, onClick: 'onAnnotationClick' in props
-                        ? props.onAnnotationClick
-                        : undefined, size: "main", variant: "base-ghost" }));
+                const { supportingActionIcon, dropdownProps } = props;
+                return (jsx(Dropdown, { ...dropdownProps, options: dropdownProps.options || [], placement: dropdownProps.placement || 'top', children: jsx(Button, { type: "button", iconType: "icon-only", icon: supportingActionIcon || DotVerticalIcon, size: "main", variant: "base-ghost" }) }));
             }
             case 'information': {
+                const { annotation } = props;
+                if (!annotation)
+                    return null;
                 return (jsx(Typography, { color: "text-neutral", variant: "caption", children: annotation }));
             }
             default:

package/PageHeader/PageHeader.js

@@ -27,20 +27,15 @@ const getBreadcrumbAndToolbar = (children) => {
             }
             else if (child.type === Button) {
                 backButtonOrLink = cloneElement(child, {
-                    icon: {
-                        position: 'icon-only',
-                        src: ChevronLeftIcon,
-                    },
+                    iconType: 'icon-only',
+                    icon: ChevronLeftIcon,
                     size: 'sub',
                     variant: 'base-tertiary',
                 });
             }
             else if (child.type === 'a') {
                 backButtonOrLink = cloneElement(child, {
-                    children: (jsx(Button, { component: 'div', icon: {
-                            position: 'icon-only',
-                            src: ChevronLeftIcon,
-                        }, size: "sub", variant: "base-tertiary" })),
+                    children: (jsx(Button, { component: 'div', iconType: "icon-only", icon: ChevronLeftIcon, size: "sub", variant: "base-tertiary" })),
                 });
             }
             else {
@@ -60,10 +55,7 @@ const PageHeader = forwardRef(function PageHeader(props, ref) {
     const { children, className, description, onBackClick, title, titleComponent = 'h2', ...rest } = props;
     const { backButtonOrLink, breadcrumb, pageToolbar } = getBreadcrumbAndToolbar(children);
     // prop onBack takes precedence over backButtonOrLink
-    const backButton = onBackClick ? (jsx(Button, { icon: {
-            position: 'icon-only',
-            src: ChevronLeftIcon,
-        }, onClick: onBackClick, size: "sub", variant: "base-tertiary" })) : (backButtonOrLink);
+    const backButton = onBackClick ? (jsx(Button, { iconType: "icon-only", icon: ChevronLeftIcon, onClick: onBackClick, size: "sub", variant: "base-tertiary" })) : (backButtonOrLink);
     return (jsxs("header", { ...rest, className: cx(pageHeaderClasses.host, className), ref: ref, children: [breadcrumb, jsxs("span", { className: pageHeaderClasses.headerContent, children: [jsxs("span", { className: pageHeaderClasses.pageTitleWithIcon, children: [backButton && jsx("div", { children: backButton }), jsxs("div", { className: pageHeaderClasses.pageTitleText, children: [jsx(Typography, { align: "left", color: "text-neutral-solid", component: titleComponent, variant: "h2", children: title }), description && (jsx(Typography, { align: "left", color: "text-neutral", component: "p", variant: "caption", children: description }))] })] }), pageToolbar] })] }));
 });