@mezzanine-ui/react 0.6.4

package/Menu/Menu.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { toMenuCssVars, menuClasses } from '@mezzanine-ui/core/menu';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` menu.
+ */
+const Menu = forwardRef(function Menu(props, ref) {
+    const { children, className, itemsInView = 4, maxHeight, role = 'menu', size = 'medium', style: styleProp, ...rest } = props;
+    const cssVars = toMenuCssVars({
+        itemsInView,
+        maxHeight,
+    });
+    const style = {
+        ...cssVars,
+        ...styleProp,
+    };
+    return (jsx("ul", Object.assign({}, rest, { ref: ref, className: cx(menuClasses.host, menuClasses.size(size), className), role: role, style: style }, { children: children }), void 0));
+});
+
+export default Menu;

package/Menu/MenuDivider.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export declare type MenuDividerProps = NativeElementPropsWithoutKeyAndRef<'hr'>;
+/**
+ * The react component for `mezzanine` menu divider.
+ */
+declare const MenuDivider: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLHRElement>>;
+export default MenuDivider;

package/Menu/MenuDivider.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { menuDividerClasses } from '@mezzanine-ui/core/menu';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` menu divider.
+ */
+const MenuDivider = forwardRef(function MenuDivider(props, ref) {
+    const { className, ...rest } = props;
+    return (jsx("hr", Object.assign({}, rest, { ref: ref, className: cx(menuDividerClasses.host, className) }), void 0));
+});
+
+export default MenuDivider;

package/Menu/MenuItem.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface MenuItemProps extends NativeElementPropsWithoutKeyAndRef<'li'> {
+    /**
+     * Whether the menu item is active.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Whether the menu item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The role of menu item.
+     * @default 'menuitem'
+     */
+    role?: string;
+}
+/**
+ * The react component for `mezzanine` menu item.
+ */
+declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLLIElement>>;
+export default MenuItem;

package/Menu/MenuItem.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { menuItemClasses } from '@mezzanine-ui/core/menu';
+import { CheckIcon } from '@mezzanine-ui/icons';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` menu item.
+ */
+const MenuItem = forwardRef(function MenuItem(props, ref) {
+    const { active = false, children, className, disabled = false, onClick, onKeyDown = () => { }, role = 'menuitem', ...rest } = props;
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    jsxs("li", Object.assign({}, rest, { ref: ref, "aria-disabled": disabled, className: cx(menuItemClasses.host, {
+            [menuItemClasses.active]: active,
+            [menuItemClasses.disabled]: disabled,
+        }, className), onClick: (event) => {
+            if (!disabled && onClick) {
+                onClick(event);
+            }
+        }, onKeyDown: onKeyDown, role: role }, { children: [jsx("div", Object.assign({ className: menuItemClasses.label }, { children: children }), void 0),
+            active && jsx(Icon, { className: menuItemClasses.activeIcon, icon: CheckIcon }, void 0)] }), void 0));
+});
+
+export default MenuItem;

package/Menu/MenuItemGroup.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface MenuItemGroupProps extends NativeElementPropsWithoutKeyAndRef<'li'> {
+    /**
+     * The label of menu item group
+     */
+    label?: ReactNode;
+}
+/**
+ * The react component for `mezzanine` menu item group.
+ */
+declare const MenuItemGroup: import("react").ForwardRefExoticComponent<MenuItemGroupProps & import("react").RefAttributes<HTMLLIElement>>;
+export default MenuItemGroup;

package/Menu/MenuItemGroup.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { menuItemGroupClasses } from '@mezzanine-ui/core/menu';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` menu item group.
+ */
+const MenuItemGroup = forwardRef(function MenuItemGroup(props, ref) {
+    const { children, className, label, ...rest } = props;
+    return (jsxs("li", Object.assign({ ref: ref }, rest, { className: cx(menuItemGroupClasses.host, className) }, { children: [jsx("span", Object.assign({ className: menuItemGroupClasses.label }, { children: label }), void 0),
+            jsx("ul", Object.assign({ className: menuItemGroupClasses.items }, { children: children }), void 0)] }), void 0));
+});
+
+export default MenuItemGroup;

package/Menu/index.d.ts

@@ -0,0 +1,5 @@
+export type { MenuSize, } from '@mezzanine-ui/core/menu';
+export { MenuProps, default } from './Menu';
+export { MenuDividerProps, default as MenuDivider } from './MenuDivider';
+export { MenuItemProps, default as MenuItem } from './MenuItem';
+export { MenuItemGroupProps, default as MenuItemGroup } from './MenuItemGroup';

package/Menu/index.js

@@ -0,0 +1,4 @@
+export { default } from './Menu.js';
+export { default as MenuDivider } from './MenuDivider.js';
+export { default as MenuItem } from './MenuItem.js';
+export { default as MenuItemGroup } from './MenuItemGroup.js';

package/Message/Message.d.ts

@@ -0,0 +1,33 @@
+import { MessageSeverity } from '@mezzanine-ui/core/message';
+import { FC, Key } from 'react';
+import { Notifier, NotifierData, NotifierConfig } from '../Notifier';
+import { SlideFadeProps } from '../Transition';
+export interface MessageConfigProps extends Pick<NotifierConfig, 'duration'>, Pick<SlideFadeProps, 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited' | 'easing' | 'direction'> {
+}
+export interface MessageData extends Omit<NotifierData, 'onClose'>, MessageConfigProps {
+    /**
+     * If given, the message will be closed after the amount of time.
+     * You can use `Message.config` to overwrite.
+     * @default 3000
+     */
+    duration?: NotifierData['duration'];
+    /**
+     * The key of message.
+     */
+    reference?: Key;
+    /**
+     * The severity of the message.
+     * @default info
+     */
+    severity?: MessageSeverity;
+}
+export interface Message extends FC<MessageData>, Notifier<MessageData, MessageConfigProps>, Record<MessageSeverity, (message: MessageData['children'], props?: Omit<MessageData, 'children' | 'severity'>) => Key> {
+}
+/**
+ * The react component for `mezzanine` message.
+ *
+ * Use the API from the Message instance such as `Message.success` and `Message.error`
+ * to display a notification message globally.
+ */
+declare const Message: Message;
+export default Message;

package/Message/Message.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { messageIcons, messageClasses } from '@mezzanine-ui/core/message';
+import { useState, useEffect } from 'react';
+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` message.
+ *
+ * Use the API from the Message instance such as `Message.success` and `Message.error`
+ * to display a notification message globally.
+ */
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+const Message = ((props) => {
+    const { children, duration, reference, severity = 'info', onExited: onExitedProp, ...restTransitionProps } = props;
+    const icon = messageIcons[severity];
+    const [open, setOpen] = useState(true);
+    useEffect(() => {
+        if (open && duration) {
+            const timer = window.setTimeout(() => {
+                setOpen(false);
+            }, duration);
+            return () => {
+                window.clearTimeout(timer);
+            };
+        }
+    }, [open, duration]);
+    const onExited = (node) => {
+        if (onExitedProp) {
+            onExitedProp(node);
+        }
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        Message.remove(reference);
+    };
+    return (jsx(SlideFade, Object.assign({ in: open, appear: true, onExited: onExited }, restTransitionProps, { children: jsxs("div", Object.assign({ className: cx(messageClasses.host, messageClasses.severity(severity)) }, { children: [jsx(Icon, { className: messageClasses.icon, icon: icon }, void 0),
+                jsx("span", Object.assign({ className: messageClasses.content }, { children: children }), void 0)] }), void 0) }), void 0));
+});
+const { add, config, destroy, remove, } = createNotifier({
+    duration: 3000,
+    render: (message) => jsx(Message, Object.assign({}, message), void 0),
+    setRoot: (root) => {
+        root.setAttribute('class', messageClasses.root);
+    },
+});
+Message.add = add;
+Message.config = config;
+Message.destroy = destroy;
+Message.remove = remove;
+['success', 'warning', 'error', 'info'].forEach((severity) => {
+    Message[severity] = (message, props) => Message.add({
+        ...props,
+        children: message,
+        severity,
+    });
+});
+
+export default Message;

package/Message/index.d.ts

@@ -0,0 +1,2 @@
+export { MessageSeverity, } from '@mezzanine-ui/core/message';
+export { MessageData, default, } from './Message';

package/Message/index.js

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

package/Modal/Modal.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { ModalSeverity, ModalSize } from '@mezzanine-ui/core/modal';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { OverlayProps } from '../Overlay';
+export interface ModalProps extends NativeElementPropsWithoutKeyAndRef<'div'>, Pick<OverlayProps, 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'hideBackdrop' | 'onBackdropClick' | 'onClose' | 'open'> {
+    /**
+     * Controls whether to disable closing modal while escape key down.
+     * @default false
+     */
+    disableCloseOnEscapeKeyDown?: boolean;
+    /**
+     * Whether to force full screen on any breakpoint.
+     * @default false
+     */
+    fullScreen?: boolean;
+    /**
+     * Controls whether or not to hide close button at top-end.
+     * @default false
+     */
+    hideCloseIcon?: boolean;
+    /**
+     * Whether the modal is loading.
+     * Controls the loading prop of confirm button in modal actions.
+     */
+    loading?: boolean;
+    /**
+     * Controlls whether or not to display status icon before title. <br />
+     * Notice that giving a status will only display the regular title.
+     * @default 'info'
+     */
+    severity?: ModalSeverity;
+    /**
+     * Controls the size of the modal.
+     * @default "medium"
+     */
+    size?: ModalSize;
+}
+/**
+ * The react component for `mezzanine` modal.
+ */
+declare const Modal: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Modal;

package/Modal/Modal.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { modalClasses } from '@mezzanine-ui/core/modal';
+import { TimesIcon } from '@mezzanine-ui/icons';
+import { forwardRef, useState, useLayoutEffect, useEffect } from 'react';
+import { useDocumentEscapeKeyDown } from '../hooks/useDocumentEscapeKeyDown.js';
+import { lockBodyScroll, allowBodyScroll } from '../utils/scroll-lock.js';
+import { useIsTopModal } from './useIsTopModal.js';
+import { ModalControlContext } from './ModalControl.js';
+import Overlay from '../Overlay/Overlay.js';
+import SlideFade from '../Transition/SlideFade.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` modal.
+ */
+const Modal = forwardRef(function Modal(props, ref) {
+    const { children, className, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, fullScreen = false, hideBackdrop, hideCloseIcon = false, loading = false, onBackdropClick, onClose, open, severity = 'info', size = 'medium', ...rest } = props;
+    const modalControl = {
+        loading,
+        severity,
+    };
+    const [exited, setExited] = useState(true);
+    /**
+     * Escape keydown close: escape will only close the top modal
+     */
+    const isTopModal = useIsTopModal(open);
+    useDocumentEscapeKeyDown(() => {
+        if (!open || disableCloseOnEscapeKeyDown || !onClose) {
+            return;
+        }
+        return (event) => {
+            if (isTopModal()) {
+                event.stopPropagation();
+                onClose();
+            }
+        };
+    }, [
+        disableCloseOnEscapeKeyDown,
+        isTopModal,
+        open,
+        onClose,
+    ]);
+    /** lock body scroll */
+    useLayoutEffect(() => {
+        if (open) {
+            lockBodyScroll();
+        }
+    }, [open]);
+    /** unlock body scroll */
+    useEffect(() => {
+        function checkAndAllowScroll() {
+            // wait until dom element unmount, and check if other modal existed
+            const allModals = document.querySelectorAll('.mzn-modal');
+            if (!allModals.length) {
+                allowBodyScroll();
+            }
+        }
+        if (!open && exited) {
+            checkAndAllowScroll();
+        }
+        return (() => {
+            requestAnimationFrame(checkAndAllowScroll);
+        });
+    }, [open, exited]);
+    if (!open && exited) {
+        return null;
+    }
+    return (jsx(Overlay, Object.assign({ className: modalClasses.overlay, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, hideBackdrop: hideBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation" }, { children: jsx(ModalControlContext.Provider, Object.assign({ value: modalControl }, { children: jsx(SlideFade, Object.assign({ ref: ref, in: open, direction: "down", onEntered: () => setExited(false), onExited: () => setExited(true) }, { children: jsxs("div", Object.assign({}, rest, { className: cx(modalClasses.host, modalClasses.severity(severity), modalClasses.size(size), {
+                        [modalClasses.fullScreen]: fullScreen,
+                        [modalClasses.withCloseIcon]: !hideCloseIcon,
+                    }, className), role: "dialog" }, { children: [children, !hideCloseIcon && (jsx(Icon, { className: modalClasses.closeIcon, icon: TimesIcon, onClick: onClose }, void 0))] }), void 0) }), void 0) }), void 0) }), void 0));
+});
+
+export default Modal;

package/Modal/ModalActions.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ConfirmActionsProps } from '../ConfirmActions';
+import { ModalFooterProps } from './ModalFooter';
+export interface ModalActionsProps extends ModalFooterProps, Pick<ConfirmActionsProps, 'cancelButtonProps' | 'cancelText' | 'confirmButtonProps' | 'confirmText' | 'hideCancelButton' | 'hideConfirmButton' | 'onCancel' | 'onConfirm'> {
+}
+/**
+ * The react component for `mezzanine` modal actions.
+ */
+declare const ModalActions: import("react").ForwardRefExoticComponent<ModalActionsProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ModalActions;

package/Modal/ModalActions.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { modalClasses } from '@mezzanine-ui/core/modal';
+import { forwardRef, useContext } from 'react';
+import ModalFooter from './ModalFooter.js';
+import { ModalControlContext } from './ModalControl.js';
+import ConfirmActions from '../ConfirmActions/ConfirmActions.js';
+
+/**
+ * The react component for `mezzanine` modal actions.
+ */
+const ModalActions = forwardRef(function ModalActions(props, ref) {
+    const { cancelButtonProps, cancelText, children, confirmButtonProps, confirmText, hideCancelButton, hideConfirmButton, onCancel, onConfirm, ...rest } = props;
+    const { loading, severity, } = useContext(ModalControlContext);
+    const danger = severity === 'error';
+    return (jsxs(ModalFooter, Object.assign({}, rest, { ref: ref }, { children: [children, jsx(ConfirmActions, { cancelButtonProps: cancelButtonProps, cancelText: cancelText, className: modalClasses.actions, confirmButtonProps: confirmButtonProps, confirmText: confirmText, danger: danger, hideCancelButton: hideCancelButton, hideConfirmButton: hideConfirmButton, loading: loading, onCancel: onCancel, onConfirm: onConfirm }, void 0)] }), void 0));
+});
+
+export default ModalActions;

package/Modal/ModalBody.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export declare type ModalBodyProps = NativeElementPropsWithoutKeyAndRef<'div'>;
+/**
+ * The react component for `mezzanine` modal body.
+ */
+declare const ModalBody: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;
+export default ModalBody;

package/Modal/ModalBody.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { modalClasses } from '@mezzanine-ui/core/modal';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` modal body.
+ */
+const ModalBody = forwardRef(function ModalBody(props, ref) {
+    const { children, className, ...rest } = props;
+    return (jsx("div", Object.assign({}, rest, { ref: ref, className: cx(modalClasses.body, className) }, { children: children }), void 0));
+});
+
+export default ModalBody;

package/Modal/ModalControl.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ModalSeverity } from '@mezzanine-ui/core/modal';
+export interface ModalControl {
+    loading: boolean;
+    severity: ModalSeverity;
+}
+export declare const ModalControlContext: import("react").Context<ModalControl>;

package/Modal/ModalControl.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+const ModalControlContext = createContext({
+    loading: false,
+    severity: 'info',
+});
+
+export { ModalControlContext };

package/Modal/ModalFooter.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export declare type ModalFooterProps = NativeElementPropsWithoutKeyAndRef<'div'>;
+/**
+ * The react component for `mezzanine` modal footer.
+ */
+declare const ModalFooter: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;
+export default ModalFooter;

package/Modal/ModalFooter.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { modalClasses } from '@mezzanine-ui/core/modal';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` modal footer.
+ */
+const ModalFooter = forwardRef(function ModalFooter(props, ref) {
+    const { children, className, ...rest } = props;
+    return (jsx("div", Object.assign({}, rest, { ref: ref, className: cx(modalClasses.footer, className) }, { children: children }), void 0));
+});
+
+export default ModalFooter;

package/Modal/ModalHeader.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface ModalHeaderProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Whether to show severity icon.
+     * @default false
+     */
+    showSeverityIcon?: boolean;
+    /**
+     * Controlls the title styles.
+     * Use large title if the modal body has section/block titles.
+     * @default false
+     */
+    titleLarge?: boolean;
+}
+/**
+ * The react component for `mezzanine` modal header.
+ */
+declare const ModalHeader: import("react").ForwardRefExoticComponent<ModalHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ModalHeader;

package/Modal/ModalHeader.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { modalClasses, modalSeverityIcons } from '@mezzanine-ui/core/modal';
+import { ModalControlContext } from './ModalControl.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` modal header.
+ */
+const ModalHeader = forwardRef(function ModalHeader(props, ref) {
+    const { children, className, showSeverityIcon = false, titleLarge = false, ...rest } = props;
+    const { severity } = useContext(ModalControlContext);
+    return (jsxs("div", Object.assign({}, rest, { ref: ref, className: cx(modalClasses.header, className) }, { children: [showSeverityIcon && (jsx(Icon, { className: modalClasses.severityIcon, icon: modalSeverityIcons[severity] }, void 0)),
+            jsx("h3", Object.assign({ className: cx(modalClasses.title, {
+                    [modalClasses.titleLarge]: titleLarge,
+                }), title: typeof children === 'string' ? children : undefined }, { children: children }), void 0)] }), void 0));
+});
+
+export default ModalHeader;

package/Modal/index.d.ts

@@ -0,0 +1,6 @@
+export type { ModalSeverity, ModalSize, } from '@mezzanine-ui/core/modal';
+export { ModalActionsProps, default as ModalActions, } from './ModalActions';
+export { ModalBodyProps, default as ModalBody, } from './ModalBody';
+export { ModalFooterProps, default as ModalFooter, } from './ModalFooter';
+export { ModalHeaderProps, default as ModalHeader, } from './ModalHeader';
+export { ModalProps, default, } from './Modal';

package/Modal/index.js

@@ -0,0 +1,5 @@
+export { default as ModalActions } from './ModalActions.js';
+export { default as ModalBody } from './ModalBody.js';
+export { default as ModalFooter } from './ModalFooter.js';
+export { default as ModalHeader } from './ModalHeader.js';
+export { default } from './Modal.js';

package/Modal/useIsTopModal.d.ts

@@ -0,0 +1 @@
+export declare function useIsTopModal(open?: boolean): () => boolean;

package/Modal/useIsTopModal.js

@@ -0,0 +1,22 @@
+import { useCallback, useMemo, useEffect } from 'react';
+
+let seedStack = [];
+let seed = 1;
+function useIsTopModal(open) {
+    const modalSeed = useMemo(() => {
+        seed += 1;
+        return seed;
+    }, []);
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        seedStack = [...seedStack, modalSeed];
+        return () => {
+            seedStack = seedStack.filter((s) => s !== modalSeed);
+        };
+    }, [open, modalSeed]);
+    return useCallback(() => seedStack[seedStack.length - 1] === modalSeed, [modalSeed]);
+}
+
+export { useIsTopModal };

package/Navigation/Navigation.d.ts

@@ -0,0 +1,29 @@
+import { Key, ReactElement } from 'react';
+import { NavigationOrientation } from '@mezzanine-ui/core/navigation';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { NavigationItemProps } from './NavigationItem';
+import { NavigationSubMenuProps } from './NavigationSubMenu';
+export declare type NavigationChild = ReactElement<NavigationItemProps | NavigationSubMenuProps>;
+export declare type NavigationChildren = NavigationChild | NavigationChild[];
+export interface NavigationProps extends Omit<NativeElementPropsWithoutKeyAndRef<'ul'>, 'onClick'> {
+    /**
+     * Current active key.
+     */
+    activeKey?: Key | null;
+    /**
+     * Strict children with `NavigationItem` or `NavigationSubMenu`.
+     * @default []
+     */
+    children?: NavigationChildren;
+    /**
+     * Called when a navigation item is clicked.
+     */
+    onClick?: (key?: Key | string | null) => void;
+    /**
+     * Navigation orientation.
+     * @default 'horizontal'
+     */
+    orientation?: NavigationOrientation;
+}
+declare const Navigation: import("react").ForwardRefExoticComponent<NavigationProps & import("react").RefAttributes<HTMLUListElement>>;
+export default Navigation;