@mezzanine-ui/react 0.7.1 → 0.7.2

package/Drawer/Drawer.d.ts

@@ -1,13 +1,8 @@
 /// <reference types="react" />
 import { DrawerPlacement } from '@mezzanine-ui/core/drawer';
-import { OverlayProps } from '../Overlay';
+import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface DrawerProps extends NativeElementPropsWithoutKeyAndRef<'div'>, Pick<OverlayProps, 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'hideBackdrop' | 'invisibleBackdrop' | 'onBackdropClick' | 'onClose' | 'open'> {
-    /**
-     * Controls whether to disable closing drawer while escape key down.
-     * @default false
-     */
-    disableCloseOnEscapeKeyDown?: boolean;
+export interface DrawerProps extends Omit<SlideFadeOverlayProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
     /**
      * Whether the drawer placement.
      * @default 'left'

package/Drawer/Drawer.js

@@ -1,34 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { drawerClasses } from '@mezzanine-ui/core/drawer';
-import { useDocumentEscapeKeyDown } from '../hooks/useDocumentEscapeKeyDown.js';
-import Overlay from '../Overlay/Overlay.js';
-import SlideFade from '../Transition/SlideFade.js';
+import SlideFadeOverlay from '../_internal/SlideFadeOverlay/SlideFadeOverlay.js';
 import cx from 'clsx';
 
 const Drawer = forwardRef((props, ref) => {
     const { className, children, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, hideBackdrop, invisibleBackdrop, onBackdropClick, onClose, open, placement = 'left', ...rest } = props;
-    const [exited, setExited] = useState(true);
-    useDocumentEscapeKeyDown(() => {
-        if (!open || disableCloseOnEscapeKeyDown || !onClose) {
-            return;
-        }
-        return onClose;
-    }, [
-        disableCloseOnEscapeKeyDown,
-        open,
-        onClose,
-    ]);
-    if (!open && exited) {
-        return null;
-    }
-    const slideFadeDirection = {
+    const slideFadeDirection = useMemo(() => ({
         top: 'down',
         left: 'right',
         right: 'left',
         bottom: 'up',
-    };
-    return (jsx(Overlay, Object.assign({ className: drawerClasses.overlay, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation" }, { children: jsx(SlideFade, Object.assign({ ref: ref, direction: slideFadeDirection[placement], in: open, onEntered: () => setExited(false), onExited: () => setExited(true) }, { children: jsx("div", Object.assign({}, rest, { className: cx(drawerClasses.host, drawerClasses[placement], className) }, { children: children }), void 0) }), void 0) }), void 0));
+    }), []);
+    return (jsx(SlideFadeOverlay, Object.assign({ className: drawerClasses.overlay, container: container, direction: slideFadeDirection[placement], disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref }, { children: jsx("div", Object.assign({}, rest, { className: cx(drawerClasses.host, drawerClasses[placement], className) }, { children: children }), void 0) }), void 0));
 });
 var Drawer$1 = Drawer;
 

package/Icon/Icon.d.ts

@@ -11,6 +11,10 @@ export interface IconProps extends NativeElementPropsWithoutKeyAndRef<'i'> {
      * The icon provided by `@mezzanine-ui/icons` package.
      */
     icon: IconDefinition;
+    /**
+     * Icon size in px
+     */
+    size?: number;
     /**
      * Whether to spin the icon or not.
      * @default false

package/Icon/Icon.js

@@ -7,9 +7,9 @@ import cx from 'clsx';
  * The react component for `mezzanine` icon.
  */
 const Icon = forwardRef(function Icon(props, ref) {
-    const { className, color, icon, spin = false, style: styleProp, ...rest } = props;
+    const { className, color, icon, size, spin = false, style: styleProp, ...rest } = props;
     const { definition } = icon;
-    const cssVars = toIconCssVars({ color });
+    const cssVars = toIconCssVars({ color, size });
     const style = {
         ...cssVars,
         ...styleProp,
@@ -17,6 +17,7 @@ const Icon = forwardRef(function Icon(props, ref) {
     return (jsx("i", Object.assign({}, rest, { ref: ref, "aria-hidden": true, className: cx(iconClasses.host, {
             [iconClasses.color]: color,
             [iconClasses.spin]: spin,
+            [iconClasses.size]: size,
         }, className), "data-icon-name": icon.name, style: style }, { children: jsx("svg", Object.assign({}, definition.svg, { focusable: false }, { children: jsx("path", Object.assign({}, definition.path), void 0) }), void 0) }), void 0));
 });
 var Icon$1 = Icon;

package/Modal/Modal.d.ts

@@ -1,13 +1,8 @@
 /// <reference types="react" />
 import { ModalSeverity, ModalSize } from '@mezzanine-ui/core/modal';
+import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
 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;
+export interface ModalProps extends Omit<SlideFadeOverlayProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
     /**
      * Whether to force full screen on any breakpoint.
      * @default false

package/Modal/Modal.js

@@ -1,13 +1,9 @@
 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 { forwardRef } from 'react';
 import { ModalControlContext } from './ModalControl.js';
-import Overlay from '../Overlay/Overlay.js';
-import SlideFade from '../Transition/SlideFade.js';
+import useModalContainer from './useModalContainer.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -15,61 +11,16 @@ 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 { children, className, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, fullScreen = false, hideBackdrop = false, hideCloseIcon = false, invisibleBackdrop = 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));
+    const { Container: ModalContainer } = useModalContainer();
+    return (jsx(ModalControlContext.Provider, Object.assign({ value: modalControl }, { children: jsx(ModalContainer, Object.assign({ className: modalClasses.overlay, container: container, direction: "down", disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref }, { 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));
 });
 var Modal$1 = Modal;
 

package/Modal/index.d.ts

@@ -3,4 +3,5 @@ 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 { default as useModalContainer, } from './useModalContainer';
 export { ModalProps, default, } from './Modal';

package/Modal/index.js

@@ -2,4 +2,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 as useModalContainer } from './useModalContainer.js';
 export { default } from './Modal.js';

package/Modal/useModalContainer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
+export default function useModalContainer(): {
+    Container: import("react").ForwardRefExoticComponent<SlideFadeOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+    defaultOptions: Pick<SlideFadeOverlayProps, "className" | "direction" | "disableCloseOnBackdropClick" | "disableCloseOnEscapeKeyDown" | "disablePortal" | "hideBackdrop" | "invisibleBackdrop" | "open">;
+};

package/Modal/useModalContainer.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { modalClasses } from '@mezzanine-ui/core/modal';
+import { forwardRef } from 'react';
+import SlideFadeOverlay from '../_internal/SlideFadeOverlay/SlideFadeOverlay.js';
+
+const defaultOptions = {
+    className: modalClasses.overlay,
+    direction: 'down',
+    disableCloseOnBackdropClick: false,
+    disableCloseOnEscapeKeyDown: false,
+    disablePortal: false,
+    hideBackdrop: false,
+    invisibleBackdrop: false,
+    open: false,
+};
+const ModalContainer = forwardRef((props, ref) => {
+    const { className = defaultOptions.className, children, container, direction = defaultOptions.direction, disableCloseOnBackdropClick = defaultOptions.disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown = defaultOptions.disableCloseOnEscapeKeyDown, disablePortal = defaultOptions.disablePortal, hideBackdrop = defaultOptions.hideBackdrop, invisibleBackdrop = defaultOptions.invisibleBackdrop, onBackdropClick, onClose, open = defaultOptions.open, } = props;
+    return (jsx(SlideFadeOverlay, Object.assign({ className: className, container: container, direction: direction, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref }, { children: children }), void 0));
+});
+function useModalContainer() {
+    return {
+        Container: ModalContainer,
+        defaultOptions,
+    };
+}
+
+export { useModalContainer as default };

package/Transition/Transition.d.ts

@@ -19,7 +19,7 @@ export interface TransitionImplementationChildProps {
     style?: CSSProperties;
 }
 export interface TransitionImplementationProps extends Omit<TransitionProps, 'addEndListener' | 'children' | 'nodeRef'> {
-    children?: ReactElement<TransitionImplementationChildProps, NativeElementTag | JSXElementConstructor<TransitionImplementationChildProps>>;
+    children: ReactElement<TransitionImplementationChildProps, NativeElementTag | JSXElementConstructor<TransitionImplementationChildProps>>;
     /**
      * The delay of the transition, in milliseconds
      */

package/_internal/SlideFadeOverlay/SlideFadeOverlay.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
+import { OverlayProps } from '../../Overlay';
+import { SlideFadeProps, SlideFadeDirection } from '../../Transition';
+export interface SlideFadeOverlayProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'>, Pick<OverlayProps, 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'invisibleBackdrop' | 'hideBackdrop' | 'onBackdropClick' | 'onClose' | 'open'>, Pick<SlideFadeProps, 'children'> {
+    /**
+     * Control slide fade in direction
+     * @default 'down'
+     */
+    direction?: SlideFadeDirection;
+    /**
+     * Controls whether to disable closing modal while escape key down.
+     * @default false
+     */
+    disableCloseOnEscapeKeyDown?: boolean;
+}
+/**
+ * The react component for slide fade + overlay compose
+ */
+declare const SlideFadeOverlay: import("react").ForwardRefExoticComponent<SlideFadeOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+export default SlideFadeOverlay;

package/_internal/SlideFadeOverlay/SlideFadeOverlay.js

@@ -0,0 +1,66 @@
+import { jsx } from 'react/jsx-runtime';
+import { overlayWithSlideFadeClasses } from '@mezzanine-ui/core/_internal/overlay-with-slide-fade';
+import { forwardRef, useState, useLayoutEffect, useEffect } from 'react';
+import { useDocumentEscapeKeyDown } from '../../hooks/useDocumentEscapeKeyDown.js';
+import { lockBodyScroll, allowBodyScroll } from '../../utils/scroll-lock.js';
+import useTopStack from './useTopStack.js';
+import Overlay from '../../Overlay/Overlay.js';
+import SlideFade from '../../Transition/SlideFade.js';
+import cx from 'clsx';
+
+/**
+ * The react component for slide fade + overlay compose
+ */
+const SlideFadeOverlay = forwardRef(function SlideFadeOverlay(props, ref) {
+    const { children, className, container, direction = 'down', disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, hideBackdrop = false, invisibleBackdrop = false, onBackdropClick, onClose, open, } = props;
+    const [exited, setExited] = useState(true);
+    /**
+     * Escape keydown close: escape will only close the top modal
+     */
+    const checkIsOnTheTop = useTopStack(open);
+    useDocumentEscapeKeyDown(() => {
+        if (!open || disableCloseOnEscapeKeyDown || !onClose) {
+            return;
+        }
+        return (event) => {
+            if (checkIsOnTheTop()) {
+                event.stopPropagation();
+                onClose();
+            }
+        };
+    }, [
+        disableCloseOnEscapeKeyDown,
+        checkIsOnTheTop,
+        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 allStacks = document.querySelectorAll('.mzn-overlay-with-slide-fade');
+            if (!allStacks.length) {
+                allowBodyScroll();
+            }
+        }
+        if (!open && exited) {
+            checkAndAllowScroll();
+        }
+        return (() => {
+            requestAnimationFrame(checkAndAllowScroll);
+        });
+    }, [open, exited]);
+    if (!open && exited) {
+        return null;
+    }
+    return (jsx(Overlay, Object.assign({ className: cx(overlayWithSlideFadeClasses.host, className), container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation" }, { children: jsx(SlideFade, Object.assign({ ref: ref, in: open, direction: direction, onEntered: () => setExited(false), onExited: () => setExited(true) }, { children: children }), void 0) }), void 0));
+});
+var SlideFadeOverlay$1 = SlideFadeOverlay;
+
+export { SlideFadeOverlay$1 as default };

package/_internal/SlideFadeOverlay/index.d.ts

@@ -0,0 +1 @@
+export { SlideFadeOverlayProps, default, } from './SlideFadeOverlay';

package/_internal/SlideFadeOverlay/index.js

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

package/_internal/SlideFadeOverlay/useTopStack.d.ts

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

package/{Modal/useIsTopModal.js → _internal/SlideFadeOverlay/useTopStack.js}

@@ -1,8 +1,8 @@
-import { useCallback, useMemo, useEffect } from 'react';
+import { useMemo, useEffect, useCallback } from 'react';
 
 let seedStack = [];
 let seed = 1;
-function useIsTopModal(open) {
+function useTopStack(open) {
     const modalSeed = useMemo(() => {
         seed += 1;
         return seed;
@@ -19,4 +19,4 @@ function useIsTopModal(open) {
     return useCallback(() => seedStack[seedStack.length - 1] === modalSeed, [modalSeed]);
 }
 
-export { useIsTopModal };
+export { useTopStack as default };

package/index.d.ts

@@ -81,7 +81,7 @@ export { AlertSeverity, AlertProps, default as Alert, } from './Alert';
 export { ConfirmActionsProps, default as ConfirmActions, } from './ConfirmActions';
 export { LoadingProps, default as Loading, } from './Loading';
 export { MessageData, MessageSeverity, MessageType, default as Message, } from './Message';
-export { ModalSeverity, ModalSize, ModalHeaderProps, ModalHeader, ModalBodyProps, ModalBody, ModalFooterProps, ModalFooter, ModalActionsProps, ModalActions, ModalProps, default as Modal, } from './Modal';
+export { ModalSeverity, ModalSize, ModalHeaderProps, ModalHeader, ModalBodyProps, ModalBody, ModalFooterProps, ModalFooter, ModalActionsProps, ModalActions, ModalProps, useModalContainer, default as Modal, } from './Modal';
 export { PopconfirmProps, default as Popconfirm, } from './Popconfirm';
 export { NotificationData, NotificationSeverity, default as Notification, } from './Notification';
 export { ProgressProps, ProgressType, ProgressStatus, ProgressTypes, ProgressStatuses, default as Progress, } from './Progress';

package/index.js

@@ -23,6 +23,7 @@ export { useSelectValueControl } from './Form/useSelectValueControl.js';
 export { useSwitchControlValue } from './Form/useSwitchControlValue.js';
 export { IconButton } from './Button/index.js';
 export { default as Typography } from './Typography/Typography.js';
+export { default as useModalContainer } from './Modal/useModalContainer.js';
 export { default as Transition } from './Transition/Transition.js';
 export { default as Button } from './Button/Button.js';
 export { default as ButtonGroup } from './Button/ButtonGroup.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -32,7 +32,7 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.7.1",
+    "@mezzanine-ui/core": "^0.7.2",
     "@mezzanine-ui/icons": "^0.5.0",
     "@mezzanine-ui/system": "^0.7.0",
     "@popperjs/core": "^2.9.2",

package/Modal/useIsTopModal.d.ts

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