@mezzanine-ui/react 0.6.4

package/Navigation/Navigation.js

@@ -0,0 +1,48 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, Children, cloneElement } from 'react';
+import { navigationClasses } from '@mezzanine-ui/core/navigation';
+import NavigationItem from './NavigationItem.js';
+import NavigationSubMenu from './NavigationSubMenu.js';
+import { NavigationContext } from './NavigationContext.js';
+import cx from 'clsx';
+
+const Navigation = forwardRef((props, ref) => {
+    const { activeKey, children = [], className, onClick, orientation = 'horizontal', ...rest } = props;
+    const ItemChildren = Children.map(children, (child) => {
+        switch (child.type) {
+            case NavigationItem: {
+                const itemChild = child;
+                return cloneElement(itemChild, {
+                    active: itemChild.props.active || activeKey === itemChild.key,
+                    eventKey: itemChild.key,
+                    onClick: itemChild.props.onClick || onClick,
+                });
+            }
+            case NavigationSubMenu: {
+                const subMenuChild = child;
+                const subMenuChildren = child.props.children;
+                let subMenuActive = false;
+                const groupChildren = Children
+                    .map(subMenuChildren, (groupChild) => {
+                    const active = activeKey === groupChild.key || groupChild.props.active;
+                    if (active) {
+                        subMenuActive = true;
+                    }
+                    return cloneElement(groupChild, {
+                        active,
+                        eventKey: groupChild.key,
+                        onClick: groupChild.props.onClick || onClick,
+                    });
+                });
+                return cloneElement(subMenuChild, {
+                    active: subMenuChild.props.active || subMenuActive,
+                }, groupChildren);
+            }
+        }
+    });
+    return (jsx("ul", Object.assign({}, rest, { ref: ref, className: cx(navigationClasses.host, navigationClasses[orientation], className) }, { children: jsx(NavigationContext.Provider, Object.assign({ value: {
+                orientation,
+            } }, { children: ItemChildren }), void 0) }), void 0));
+});
+
+export default Navigation;

package/Navigation/NavigationContext.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { NavigationOrientation } from '@mezzanine-ui/core/navigation';
+export interface NavigationContextValue {
+    orientation: NavigationOrientation;
+}
+export declare const NavigationContext: import("react").Context<NavigationContextValue>;

package/Navigation/NavigationContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const NavigationContext = createContext({
+    orientation: 'horizontal',
+});
+
+export { NavigationContext };

package/Navigation/NavigationItem.d.ts

@@ -0,0 +1,31 @@
+import { Key, ReactNode } from 'react';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface NavigationItemProps extends Omit<NativeElementPropsWithoutKeyAndRef<'li'>, 'onClick'> {
+    /**
+     * Whether the item is active.
+     */
+    active?: boolean;
+    /**
+     * Item display content.
+     */
+    children?: ReactNode;
+    /**
+     * Unique ID of the item.
+     */
+    key?: Key | null;
+    /**
+     * @ignore
+     */
+    eventKey?: Key | null;
+    /**
+     * Icon of the item.
+     */
+    icon?: IconDefinition;
+    /**
+     * Called when item is clicked.
+     */
+    onClick?: (key?: Key | string | null) => void;
+}
+declare const NavigationItem: import("react").ForwardRefExoticComponent<NavigationItemProps & import("react").RefAttributes<HTMLLIElement>>;
+export default NavigationItem;

package/Navigation/NavigationItem.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useCallback } from 'react';
+import { navigationItemClasses } from '@mezzanine-ui/core/navigation';
+import { NavigationContext } from './NavigationContext.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const NavigationItem = forwardRef((props, ref) => {
+    const { active, children, className, eventKey, icon, onClick, ...rest } = props;
+    const { orientation, } = useContext(NavigationContext);
+    const handleClick = useCallback((event) => {
+        if (orientation === 'vertical') {
+            event.stopPropagation();
+        }
+        if (onClick) {
+            onClick(eventKey);
+        }
+    }, [eventKey, onClick, orientation]);
+    return (jsxs("li", Object.assign({}, rest, { ref: ref, className: cx(navigationItemClasses.host, active && navigationItemClasses.active, className), role: "menuitem", onClick: handleClick, onKeyDown: () => { } }, { children: [icon && (jsx(Icon, { className: navigationItemClasses.icon, icon: icon }, void 0)), children] }), void 0));
+});
+
+export default NavigationItem;

package/Navigation/NavigationSubMenu.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { NavigationItemProps } from './NavigationItem';
+export declare type NavigationSubMenuChild = ReactElement<NavigationItemProps>;
+export declare type NavigationSubMenuChildren = NavigationSubMenuChild | NavigationSubMenuChild[];
+export interface NavigationSubMenuProps extends Omit<NavigationItemProps, 'onClick' | 'eventKey' | 'key'> {
+    /**
+     * Strict children with `NavigationItem`.
+     * @default []
+     */
+    children?: NavigationSubMenuChildren;
+    /**
+     * Set display title for sub-menu item.
+     */
+    title?: string;
+}
+declare const NavigationSubMenu: import("react").ForwardRefExoticComponent<NavigationSubMenuProps & import("react").RefAttributes<HTMLLIElement>>;
+export default NavigationSubMenu;

package/Navigation/NavigationSubMenu.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useContext } from 'react';
+import { navigationSubMenuClasses } from '@mezzanine-ui/core/navigation';
+import { ChevronUpIcon, ChevronDownIcon } from '@mezzanine-ui/icons';
+import { useClickAway } from '../hooks/useClickAway.js';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import NavigationItem from './NavigationItem.js';
+import { NavigationContext } from './NavigationContext.js';
+import Icon from '../Icon/Icon.js';
+import Popper from '../Popper/Popper.js';
+import Collapse from '../Transition/Collapse.js';
+import cx from 'clsx';
+
+/* istanbul ignore next */
+const popperOptions = {
+    modifiers: [
+        {
+            name: 'offset',
+            options: {
+                offset: [0, 0],
+            },
+        },
+        {
+            name: 'sameWidth',
+            enabled: true,
+            phase: 'beforeWrite',
+            requires: ['computeStyles'],
+            fn: ({ state }) => {
+                const reassignState = state;
+                reassignState.styles.popper.width = `${state.rects.reference.width}px`;
+            },
+            effect: ({ state }) => {
+                const reassignState = state;
+                reassignState.elements.popper.style.width = `${state.elements.reference.getBoundingClientRect().width}px`;
+            },
+        },
+    ],
+};
+const NavigationSubMenu = forwardRef((props, ref) => {
+    const { className, children = [], active, icon, title, ...rest } = props;
+    const [open, setOpen] = useState(false);
+    const nodeRef = useRef(null);
+    const composedNodeRef = useComposeRefs([ref, nodeRef]);
+    const { orientation, } = useContext(NavigationContext);
+    const GroupToggleIcon = open ? ChevronUpIcon : ChevronDownIcon;
+    useClickAway(() => {
+        if (!open || orientation === 'vertical') {
+            return;
+        }
+        return () => {
+            setOpen(!open);
+        };
+    }, nodeRef, [
+        open,
+        orientation,
+    ]);
+    const WrapChildren = (jsx("ul", Object.assign({ className: navigationSubMenuClasses.group }, { children: children }), void 0));
+    return (jsxs(NavigationItem, Object.assign({}, rest, { ref: composedNodeRef, className: cx(navigationSubMenuClasses.host, active && navigationSubMenuClasses.active, open && navigationSubMenuClasses.open, (icon && orientation === 'vertical') && navigationSubMenuClasses.indent, className), onClick: () => setOpen(!open) }, { children: [jsxs("div", Object.assign({ className: navigationSubMenuClasses.title }, { children: [icon && (jsx(Icon, { className: navigationSubMenuClasses.icon, icon: icon }, void 0)), title, jsx(Icon, { className: navigationSubMenuClasses.toggleIcon, icon: GroupToggleIcon }, void 0)] }), void 0),
+            orientation === 'horizontal' && (jsx(Popper, Object.assign({ anchor: nodeRef, disablePortal: true, open: !!open, options: popperOptions }, { children: WrapChildren }), void 0)),
+            orientation === 'vertical' && (jsx(Collapse, Object.assign({ style: {
+                    width: '100%',
+                }, in: !!open }, { children: WrapChildren }), void 0))] }), void 0));
+});
+
+export default NavigationSubMenu;

package/Navigation/index.d.ts

@@ -0,0 +1,4 @@
+export { NavigationProps, NavigationChild, NavigationChildren, default, } from './Navigation';
+export { NavigationSubMenuProps, NavigationSubMenuChild, NavigationSubMenuChildren, default as NavigationSubMenu, } from './NavigationSubMenu';
+export { NavigationItemProps, default as NavigationItem, } from './NavigationItem';
+export { NavigationContext, NavigationContextValue, } from './NavigationContext';

package/Navigation/index.js

@@ -0,0 +1,4 @@
+export { default } from './Navigation.js';
+export { default as NavigationSubMenu } from './NavigationSubMenu.js';
+export { default as NavigationItem } from './NavigationItem.js';
+export { NavigationContext } from './NavigationContext.js';

package/Notification/Notification.d.ts

@@ -0,0 +1,54 @@
+import { NotificationSeverity } from '@mezzanine-ui/core/notification';
+import { FC, Key, ReactNode } from 'react';
+import { NotifierData, Notifier, NotifierConfig } from '../Notifier';
+import { SlideFadeProps } from '../Transition';
+export interface NotificationConfigProps extends Pick<NotifierConfig, 'duration'>, Pick<SlideFadeProps, 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited' | 'easing' | 'direction'> {
+}
+export interface NotificationData extends NotifierData, NotificationConfigProps {
+    /**
+     * Cancel button text;
+     */
+    cancelText?: ReactNode;
+    /**
+     * Confirm button text;
+     */
+    confirmText?: ReactNode;
+    /**
+     * Cancel button click event handler. <br />
+     * If not provided, the event handler will fallback to a close function using `Notification.remove`.
+     */
+    onCancel?: VoidFunction;
+    /**
+     * Confirm button click event handler. <br />
+     * If given, will render action button group.
+     */
+    onConfirm?: VoidFunction;
+    /**
+     * If given, the message will be closed after the amount of time.
+     * You can use `Message.config` to overwrite.
+     * @default false
+     */
+    /**
+     * The identifier of the notification.
+     */
+    reference?: Key;
+    /**
+     * The severity of the message.
+     * @default info
+     */
+    severity?: NotificationSeverity;
+    /**
+     * The title of notification.
+     */
+    title?: ReactNode;
+}
+export interface Notification extends FC<NotificationData>, Notifier<NotificationData, NotificationConfigProps>, Record<NotificationSeverity, (props?: Omit<NotificationData, 'severity'>) => Key> {
+}
+/**
+ * The react component for `mezzanine` notification.
+ *
+ * Use the API from the Notification instance such as `Notification.success` and `Notification.error`
+ * to display a notification globally.
+ */
+declare const Notification: Notification;
+export default Notification;

package/Notification/Notification.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { notificationIcons, notificationClasses } from '@mezzanine-ui/core/notification';
+import { TimesIcon } from '@mezzanine-ui/icons';
+import { useState, useEffect } from 'react';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+import SlideFade from '../Transition/SlideFade.js';
+import Icon from '../Icon/Icon.js';
+import { createNotifier } from '../Notifier/createNotifier.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` notification.
+ *
+ * Use the API from the Notification instance such as `Notification.success` and `Notification.error`
+ * to display a notification globally.
+ */
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+const Notification = ((props) => {
+    const { cancelText, children, confirmText, direction = 'left', duration, onCancel: onCancelProp, onClose: onCloseProp, onConfirm: onConfirmProp, onExited: onExitedProp, reference, severity, title, ...restTransitionProps } = props;
+    const targetIcon = severity ? notificationIcons[severity] : severity;
+    const [open, setOpen] = useState(true);
+    useEffect(() => {
+        if (open && duration) {
+            const timer = window.setTimeout(() => {
+                setOpen(false);
+            }, duration);
+            return () => {
+                window.clearTimeout(timer);
+            };
+        }
+    }, [open, duration]);
+    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);
+        }
+        Notification.remove(reference);
+    };
+    return (jsx(SlideFade, Object.assign({ in: open, appear: true, onExited: onExited, direction: direction }, restTransitionProps, { children: jsxs("div", Object.assign({ className: cx(notificationClasses.host, severity ? notificationClasses.severity(severity) : undefined) }, { children: [targetIcon ? (jsx("div", Object.assign({ className: notificationClasses.iconContainer }, { children: jsx(Icon, { icon: targetIcon, className: notificationClasses.severityIcon }, void 0) }), void 0)) : null,
+                jsxs("div", Object.assign({ className: notificationClasses.body }, { children: [jsx("h4", Object.assign({ className: notificationClasses.title }, { children: title }), void 0),
+                        jsx("div", Object.assign({ className: notificationClasses.content }, { children: children }), void 0),
+                        onConfirm && !severity ? (jsxs(ButtonGroup, Object.assign({ className: notificationClasses.action }, { children: [jsx(Button, Object.assign({ variant: "contained", onClick: onConfirm }, { children: confirmText }), void 0),
+                                jsx(Button, Object.assign({ variant: "outlined", onClick: onCancel || onClose }, { children: cancelText }), void 0)] }), void 0)) : null] }), void 0),
+                jsx(Icon, { icon: TimesIcon, className: notificationClasses.closeIcon, onClick: onClose }, void 0)] }), void 0) }), void 0));
+});
+const { add, config, destroy, remove, } = createNotifier({
+    duration: false,
+    render: (notif) => jsx(Notification, Object.assign({}, notif), void 0),
+    setRoot: (root) => {
+        root.setAttribute('class', notificationClasses.root);
+    },
+});
+Notification.add = add;
+Notification.config = config;
+Notification.destroy = destroy;
+Notification.remove = remove;
+['success', 'warning', 'error', 'info'].forEach((severity) => {
+    Notification[severity] = (props) => Notification.add({
+        ...props,
+        severity,
+    });
+});
+
+export default Notification;

package/Notification/index.d.ts

@@ -0,0 +1,2 @@
+export { NotificationSeverity, } from '@mezzanine-ui/core/notification';
+export { NotificationData, default, } from './Notification';

package/Notification/index.js

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

package/Notifier/NotifierManager.d.ts

@@ -0,0 +1,17 @@
+import { Key, RefObject } from 'react';
+import { NotifierData, NotifierConfig, RenderNotifier } from './typings';
+export interface NotifierController<N extends NotifierData> {
+    add: (notifier: N & {
+        key: Key;
+    }) => void;
+    remove: (key: Key) => void;
+}
+export interface NotifierManagerProps<N extends NotifierData> extends Pick<NotifierConfig, 'maxCount'> {
+    controllerRef: RefObject<NotifierController<N>>;
+    defaultNotifiers?: (N & {
+        key: Key;
+    })[];
+    render: RenderNotifier<N>;
+}
+declare function NotifierManager<N extends NotifierData>(props: NotifierManagerProps<N>): JSX.Element;
+export default NotifierManager;

package/Notifier/NotifierManager.js

@@ -0,0 +1,31 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo, useImperativeHandle, Fragment as Fragment$1 } from 'react';
+
+function NotifierManager(props) {
+    const { controllerRef, defaultNotifiers = [], maxCount, render, } = props;
+    const [notifiers, setNotifiers] = useState(defaultNotifiers);
+    const notifiersShouldRendered = typeof maxCount === 'number' && notifiers.length > maxCount
+        ? notifiers.slice(0, maxCount)
+        : notifiers;
+    const controller = useMemo(() => ({
+        add(notifier) {
+            setNotifiers((prev) => {
+                const notifierIndex = prev.findIndex(({ key }) => key === notifier.key);
+                return ~notifierIndex
+                    ? [
+                        ...prev.slice(0, notifierIndex),
+                        notifier,
+                        ...prev.slice(notifierIndex + 1, prev.length),
+                    ]
+                    : [...prev, notifier];
+            });
+        },
+        remove(key) {
+            setNotifiers((prev) => prev.filter((m) => m.key !== key));
+        },
+    }), []);
+    useImperativeHandle(controllerRef, () => controller, [controller]);
+    return (jsx(Fragment, { children: notifiersShouldRendered.map((notifier) => (jsx(Fragment$1, { children: render(notifier) }, notifier.key))) }, void 0));
+}
+
+export default NotifierManager;

package/Notifier/createNotifier.d.ts

@@ -0,0 +1,21 @@
+import { Notifier, NotifierConfig, NotifierData, RenderNotifier } from './typings';
+export interface CreateNotifierProps<N extends NotifierData, C extends NotifierConfig> extends NotifierConfig {
+    /**
+     * Customizable config for notifier. The given values should be retrivable from your notification carrier.
+     */
+    config?: C;
+    /**
+     * The render props for notification carrier(UI component).
+     */
+    render: RenderNotifier<N>;
+    /**
+     * The method to set attributes or listeners to root.
+     */
+    setRoot?: (root: HTMLDivElement) => void;
+}
+/**
+ * The utility factory for `mezzanine` to create a notifier.
+ *
+ * When APIs are called, Notifier will dynamically render a new react instance by `ReactDOM.render` method.
+ */
+export declare function createNotifier<N extends NotifierData, C extends NotifierConfig = NotifierConfig>(props: CreateNotifierProps<N, C>): Notifier<N, C>;

package/Notifier/createNotifier.js

@@ -0,0 +1,67 @@
+import { jsx } from 'react/jsx-runtime';
+import { createRef } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import NotifierManager from './NotifierManager.js';
+
+/**
+ * The utility factory for `mezzanine` to create a notifier.
+ *
+ * When APIs are called, Notifier will dynamically render a new react instance by `ReactDOM.render` method.
+ */
+function createNotifier(props) {
+    const { config: configProp, render: renderNotifier, setRoot, duration, maxCount, ...restNotifierProps } = props;
+    const root = document.createElement('div');
+    const controllerRef = createRef();
+    let currentConfig = {
+        duration,
+        maxCount,
+        ...configProp,
+    };
+    if (setRoot) {
+        setRoot(root);
+    }
+    return {
+        add(notifier) {
+            var _a, _b;
+            document.body.appendChild(root);
+            const key = (_a = notifier.key) !== null && _a !== void 0 ? _a : Date.now();
+            const resolvedNotifier = {
+                ...restNotifierProps,
+                ...notifier,
+                ...currentConfig,
+                duration: (_b = notifier.duration) !== null && _b !== void 0 ? _b : currentConfig.duration,
+                key,
+                instanceKey: key,
+            };
+            if (controllerRef.current) {
+                controllerRef.current.add(resolvedNotifier);
+            }
+            else {
+                render((jsx(NotifierManager, { controllerRef: controllerRef, defaultNotifiers: [resolvedNotifier], maxCount: currentConfig.maxCount, render: renderNotifier }, void 0)), root);
+            }
+            return resolvedNotifier.key;
+        },
+        remove(key) {
+            if (controllerRef.current) {
+                controllerRef.current.remove(key);
+            }
+        },
+        destroy() {
+            unmountComponentAtNode(root);
+            if (root.parentNode) {
+                root.parentNode.removeChild(root);
+            }
+        },
+        config(config) {
+            currentConfig = {
+                ...currentConfig,
+                ...config,
+            };
+        },
+        getConfig() {
+            return currentConfig;
+        },
+    };
+}
+
+export { createNotifier };

package/Notifier/index.d.ts

@@ -0,0 +1,2 @@
+export * from './typings';
+export * from './createNotifier';

package/Notifier/index.js

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

package/Notifier/typings.d.ts

@@ -0,0 +1,28 @@
+import { Key, ReactNode } from 'react';
+export interface NotifierConfig {
+    /**
+     * If passed as number, the notification will be closed after the amount of time.
+     */
+    duration?: number | false;
+    maxCount?: number;
+}
+export interface NotifierData extends Pick<NotifierConfig, 'duration'> {
+    /**
+     * The notification content.
+     */
+    children?: ReactNode;
+    /**
+     * Close Handler
+     */
+    onClose?: (key: Key) => void;
+}
+export declare type RenderNotifier<N extends NotifierData> = (notifier: N) => ReactNode;
+export interface Notifier<N extends NotifierData, C extends NotifierConfig = NotifierConfig> {
+    add: (notifier: N & {
+        key?: Key;
+    }) => Key;
+    config: (configs: C) => void;
+    destroy: VoidFunction;
+    remove: (key: Key) => void;
+    getConfig: () => C;
+}

package/Overlay/Overlay.d.ts

@@ -0,0 +1,43 @@
+import { MouseEventHandler } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { PortalProps } from '../Portal';
+export interface OverlayProps extends Pick<PortalProps, 'children' | 'container' | 'disablePortal'>, NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Controls whether to disable closing element while backdrop clicked.
+     * @default false
+     */
+    disableCloseOnBackdropClick?: boolean;
+    /**
+     * Whether to hide backdrop.
+     * @default false
+     */
+    hideBackdrop?: boolean;
+    /**
+     * Whether to set backdrop invisible
+     * @default false
+     */
+    invisibleBackdrop?: boolean;
+    /**
+     * Click handler for backdrop.
+     */
+    onBackdropClick?: MouseEventHandler;
+    /**
+     * Callback fired while the element will be closed.
+     */
+    onClose?: VoidFunction;
+    /**
+     * Overlay is use on top of a component(surface)
+     * @default false
+     */
+    onSurface?: boolean;
+    /**
+     * Controls whether to show the element.
+     * @default false
+     */
+    open?: boolean;
+}
+/**
+ * The react component for `mezzanine` overlay.
+ */
+declare const Overlay: import("react").ForwardRefExoticComponent<OverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Overlay;

package/Overlay/Overlay.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { overlayClasses } from '@mezzanine-ui/core/overlay';
+import Portal from '../Portal/Portal.js';
+import Fade from '../Transition/Fade.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` overlay.
+ */
+const Overlay = forwardRef(function Overlay(props, ref) {
+    const { children, className, container, disableCloseOnBackdropClick = false, disablePortal, hideBackdrop = false, invisibleBackdrop = false, onBackdropClick, onClose, onSurface, open = false, ...rest } = props;
+    const fixedAtBody = Boolean(!container);
+    return (jsx(Portal, Object.assign({ container: container, disablePortal: disablePortal }, { children: jsxs("div", Object.assign({}, rest, { ref: ref, className: cx(overlayClasses.host, {
+                [overlayClasses.hostFixed]: fixedAtBody,
+                [overlayClasses.hostOpen]: open,
+            }, className) }, { children: [hideBackdrop ? null : (jsx(Fade, Object.assign({ in: open }, { children: jsx("div", { "aria-hidden": true, className: cx(overlayClasses.backdrop, {
+                            [overlayClasses.backdropFixed]: fixedAtBody,
+                            [overlayClasses.invisible]: invisibleBackdrop,
+                            [overlayClasses.backdropOnSurface]: onSurface,
+                        }), onClick: (event) => {
+                            if (!disableCloseOnBackdropClick && onClose) {
+                                onClose();
+                            }
+                            if (onBackdropClick) {
+                                onBackdropClick(event);
+                            }
+                        } }, void 0) }), void 0)), children] }), void 0) }), void 0));
+});
+
+export default Overlay;

package/Overlay/index.d.ts

@@ -0,0 +1 @@
+export { OverlayProps, default, } from './Overlay';

package/Overlay/index.js

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

package/PageFooter/PageFooter.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { ConfirmActionsProps } from '../ConfirmActions';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface PageFooterProps extends NativeElementPropsWithoutKeyAndRef<'footer'>, Pick<ConfirmActionsProps, 'cancelButtonProps' | 'cancelText' | 'confirmButtonProps' | 'confirmText' | 'danger' | 'loading' | 'hideCancelButton' | 'hideConfirmButton' | 'onCancel' | 'onConfirm'> {
+    /**
+     * The className of action wrapper.
+     */
+    actionClassName?: string;
+    /**
+     * The action element in the left.
+     */
+    children?: ReactNode;
+}
+declare const PageFooter: import("react").ForwardRefExoticComponent<PageFooterProps & import("react").RefAttributes<HTMLElement>>;
+export default PageFooter;

package/PageFooter/PageFooter.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { pageFooterClasses } from '@mezzanine-ui/core/page-footer';
+import ConfirmActions from '../ConfirmActions/ConfirmActions.js';
+import cx from 'clsx';
+
+const PageFooter = forwardRef(function PageFooter(props, ref) {
+    const { className, actionClassName, cancelButtonProps, cancelText, children, danger, loading, confirmButtonProps, confirmText, hideCancelButton, hideConfirmButton, onCancel, onConfirm, ...rest } = props;
+    return (jsxs("footer", Object.assign({ ref: ref }, rest, { className: cx(pageFooterClasses.host, className) }, { children: [jsx("div", Object.assign({ className: actionClassName }, { children: children }), void 0),
+            jsx(ConfirmActions, { cancelText: cancelText, confirmText: confirmText, cancelButtonProps: cancelButtonProps, confirmButtonProps: confirmButtonProps, danger: danger, hideCancelButton: hideCancelButton, hideConfirmButton: hideConfirmButton, loading: loading, onCancel: onCancel, onConfirm: onConfirm }, void 0)] }), void 0));
+});
+
+export default PageFooter;

package/PageFooter/index.d.ts

@@ -0,0 +1 @@
+export { PageFooterProps, default } from './PageFooter';

package/PageFooter/index.js

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