@manuscripts/style-guide 3.8.3 → 3.8.4

package/dist/cjs/components/Dialog.js

@@ -107,6 +107,7 @@ class Dialog extends react_1.default.Component {
         this.state = {
             primaryActionDisabled: true,
         };
+        this.Parent = this.props.portaled ? StyledModal_1.StyledModal : StyledModal_1.StyledModalContent;
         this.renderButtons = (props, disabled) => ((0, jsx_runtime_1.jsx)(ButtonsContainer, { children: props.actions.secondary ? (!props.actions.primary.isDestructive ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryAction, { action: props.actions.secondary.action, hasForm: !!this.props.confirmFieldText, title: props.actions.secondary.title, variant: props.actions.secondary.variant ?? 'default' }), (0, jsx_runtime_1.jsx)(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, title: props.actions.primary.title || 'Dismiss' })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: true, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' }), (0, jsx_runtime_1.jsx)(SecondaryAction, { action: props.actions.secondary.action, title: props.actions.secondary.title, variant: props.actions.secondary.variant ?? 'default' })] }))) : ((0, jsx_runtime_1.jsx)(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: props.actions.primary.isDestructive, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' })) }));
         this.checkInputValue = (event) => {
             const testingVal = this.props.confirmFieldText && this.props.confirmFieldText.toUpperCase();
@@ -129,9 +130,10 @@ class Dialog extends react_1.default.Component {
         this.setDisabledBtnState(!!this.props.confirmFieldText);
     }
     render() {
-        const { actions, isOpen, header, message, category, children, confirmFieldText, className, } = this.props;
+        const { actions, isOpen, header, message, category, children, confirmFieldText, className, onExited } = this.props;
         const { primaryActionDisabled } = this.state;
-        return ((0, jsx_runtime_1.jsx)(StyledModal_1.StyledModal, { isOpen: isOpen, onRequestClose: actions.onClose, shouldCloseOnOverlayClick: true, className: className, children: (0, jsx_runtime_1.jsxs)(exports.DialogModalBody, { children: [(0, jsx_runtime_1.jsxs)(HeaderContainer, { children: [category === Category.error && ((0, jsx_runtime_1.jsx)(Icon, { children: (0, jsx_runtime_1.jsx)(icons_1.AttentionRedIcon, {}) })), category === Category.warning && ((0, jsx_runtime_1.jsx)(Icon, { children: (0, jsx_runtime_1.jsx)(icons_1.AttentionOrangeIcon, {}) })), category === Category.success && ((0, jsx_runtime_1.jsx)(Icon, { children: (0, jsx_runtime_1.jsx)(icons_1.AttentionGreenIcon, {}) })), header] }), (0, jsx_runtime_1.jsxs)(exports.MessageContainer, { children: [message, confirmFieldText && ((0, jsx_runtime_1.jsx)("form", { id: "formDialog", onSubmit: this.handleSubmit, children: (0, jsx_runtime_1.jsx)(ConfirmationTextField, { autoFocus: true, onChange: this.checkInputValue, placeholder: 'Please type: ' + confirmFieldText, required: true }) })), children] }), this.renderButtons(this.props, primaryActionDisabled)] }) }));
+        const { Parent } = this;
+        return ((0, jsx_runtime_1.jsx)(Parent, { isOpen: isOpen, onRequestClose: actions.onClose, shouldCloseOnOverlayClick: true, className: className, onExited: onExited, children: (0, jsx_runtime_1.jsxs)(exports.DialogModalBody, { children: [(0, jsx_runtime_1.jsxs)(HeaderContainer, { children: [category === Category.error && ((0, jsx_runtime_1.jsx)(Icon, { children: (0, jsx_runtime_1.jsx)(icons_1.AttentionRedIcon, {}) })), category === Category.warning && ((0, jsx_runtime_1.jsx)(Icon, { children: (0, jsx_runtime_1.jsx)(icons_1.AttentionOrangeIcon, {}) })), category === Category.success && ((0, jsx_runtime_1.jsx)(Icon, { children: (0, jsx_runtime_1.jsx)(icons_1.AttentionGreenIcon, {}) })), header] }), (0, jsx_runtime_1.jsxs)(exports.MessageContainer, { children: [message, confirmFieldText && ((0, jsx_runtime_1.jsx)("form", { id: "formDialog", onSubmit: this.handleSubmit, children: (0, jsx_runtime_1.jsx)(ConfirmationTextField, { autoFocus: true, onChange: this.checkInputValue, placeholder: 'Please type: ' + confirmFieldText, required: true }) })), children] }), this.renderButtons(this.props, primaryActionDisabled)] }) }));
     }
 }
 exports.Dialog = Dialog;

package/dist/cjs/components/StyledModal.js

@@ -40,12 +40,18 @@ const react_dom_1 = require("react-dom");
 const styled_components_1 = __importStar(require("styled-components"));
 const Button_1 = require("./Button");
 const Sidebar_1 = require("./Sidebar");
-const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, ariaLabelledby, id, }) => {
+const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, ariaLabelledby, id, onExited, }) => {
     const dialogRef = (0, react_1.useRef)(null);
     const closedByCancelRef = (0, react_1.useRef)(false);
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    (0, react_1.useLayoutEffect)(() => {
+        if (isOpen) {
+            setVisible(true);
+        }
+    }, [isOpen]);
     (0, react_1.useEffect)(() => {
         const dialog = dialogRef.current;
-        if (!dialog) {
+        if (!dialog || !visible) {
             return;
         }
         if (isOpen && !dialog.open) {
@@ -57,9 +63,14 @@ const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick
             }
         }
         else if (!isOpen && dialog.open) {
+            const timeout = setTimeout(() => {
+                setVisible(false);
+                onExited?.();
+            }, TRANSITION_TIME + 50);
             dialog.close();
+            return () => clearTimeout(timeout);
         }
-    }, [isOpen]);
+    }, [isOpen, setVisible, visible]);
     (0, react_1.useEffect)(() => {
         const dialog = dialogRef.current;
         if (!dialog) {
@@ -71,7 +82,10 @@ const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick
             }
             closedByCancelRef.current = false;
         };
-        const listener = () => handleNativeClose(isOpen);
+        const listener = (e) => {
+            e.preventDefault();
+            handleNativeClose(isOpen);
+        };
         dialog.addEventListener('close', listener);
         return () => dialog.removeEventListener('close', listener);
     }, [isOpen, onRequestClose]);
@@ -92,6 +106,9 @@ const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick
             onRequestClose?.();
         }
     };
+    if (!visible) {
+        return null;
+    }
     return ((0, jsx_runtime_1.jsx)(Dialog, { ref: dialogRef, onClick: (e) => {
             e.stopPropagation();
             handleBackdropClick(e);
@@ -102,6 +119,7 @@ const StyledModal = (props) => {
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.StyledModalContent, { ...props }), document.body);
 };
 exports.StyledModal = StyledModal;
+const TRANSITION_TIME = 500;
 const Dialog = styled_components_1.default.dialog `
   background: transparent;
   border: none;
@@ -112,9 +130,9 @@ const Dialog = styled_components_1.default.dialog `
   z-index: 100;
   opacity: 1;
   transition:
-    opacity 0.5s ease-in-out,
-    display 0.5s ease allow-discrete,
-    overlay 0.5s ease allow-discrete;
+    opacity ${TRANSITION_TIME}ms ease-in-out,
+    display ${TRANSITION_TIME}ms ease allow-discrete,
+    overlay ${TRANSITION_TIME}ms ease allow-discrete;
 
   &:not([open]) {
     opacity: 0;
@@ -145,9 +163,9 @@ const Dialog = styled_components_1.default.dialog `
     opacity: 1;
     pointer-events: ${(props) => props.$pointerEventsOnBackdrop || 'auto'};
     transition:
-      opacity 0.5s ease-in-out,
-      display 0.5s ease allow-discrete,
-      overlay 0.5s ease allow-discrete;
+      opacity ${TRANSITION_TIME}ms ease-in-out,
+      display ${TRANSITION_TIME}ms ease allow-discrete,
+      overlay ${TRANSITION_TIME}ms ease allow-discrete;
   }
 
   &:not([open])::backdrop {

package/dist/es/components/Dialog.js

@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { ButtonGroup, PrimaryButton, SecondaryButton } from './Button';
 import { AttentionGreenIcon, AttentionOrangeIcon, AttentionRedIcon, } from './icons';
-import { StyledModal } from './StyledModal';
+import { StyledModal, StyledModalContent } from './StyledModal';
 import { TextField } from './TextField';
 const Icon = styled.div `
   margin-right: 6px;
@@ -101,6 +101,7 @@ export class Dialog extends React.Component {
         this.state = {
             primaryActionDisabled: true,
         };
+        this.Parent = this.props.portaled ? StyledModal : StyledModalContent;
         this.renderButtons = (props, disabled) => (_jsx(ButtonsContainer, { children: props.actions.secondary ? (!props.actions.primary.isDestructive ? (_jsxs(_Fragment, { children: [_jsx(SecondaryAction, { action: props.actions.secondary.action, hasForm: !!this.props.confirmFieldText, title: props.actions.secondary.title, variant: props.actions.secondary.variant ?? 'default' }), _jsx(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, title: props.actions.primary.title || 'Dismiss' })] })) : (_jsxs(_Fragment, { children: [_jsx(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: true, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' }), _jsx(SecondaryAction, { action: props.actions.secondary.action, title: props.actions.secondary.title, variant: props.actions.secondary.variant ?? 'default' })] }))) : (_jsx(PrimaryAction, { action: props.actions.primary.action, disabled: disabled, isDestructive: props.actions.primary.isDestructive, hasForm: !!this.props.confirmFieldText, title: props.actions.primary.title || 'Dismiss' })) }));
         this.checkInputValue = (event) => {
             const testingVal = this.props.confirmFieldText && this.props.confirmFieldText.toUpperCase();
@@ -123,8 +124,9 @@ export class Dialog extends React.Component {
         this.setDisabledBtnState(!!this.props.confirmFieldText);
     }
     render() {
-        const { actions, isOpen, header, message, category, children, confirmFieldText, className, } = this.props;
+        const { actions, isOpen, header, message, category, children, confirmFieldText, className, onExited } = this.props;
         const { primaryActionDisabled } = this.state;
-        return (_jsx(StyledModal, { isOpen: isOpen, onRequestClose: actions.onClose, shouldCloseOnOverlayClick: true, className: className, children: _jsxs(DialogModalBody, { children: [_jsxs(HeaderContainer, { children: [category === Category.error && (_jsx(Icon, { children: _jsx(AttentionRedIcon, {}) })), category === Category.warning && (_jsx(Icon, { children: _jsx(AttentionOrangeIcon, {}) })), category === Category.success && (_jsx(Icon, { children: _jsx(AttentionGreenIcon, {}) })), header] }), _jsxs(MessageContainer, { children: [message, confirmFieldText && (_jsx("form", { id: "formDialog", onSubmit: this.handleSubmit, children: _jsx(ConfirmationTextField, { autoFocus: true, onChange: this.checkInputValue, placeholder: 'Please type: ' + confirmFieldText, required: true }) })), children] }), this.renderButtons(this.props, primaryActionDisabled)] }) }));
+        const { Parent } = this;
+        return (_jsx(Parent, { isOpen: isOpen, onRequestClose: actions.onClose, shouldCloseOnOverlayClick: true, className: className, onExited: onExited, children: _jsxs(DialogModalBody, { children: [_jsxs(HeaderContainer, { children: [category === Category.error && (_jsx(Icon, { children: _jsx(AttentionRedIcon, {}) })), category === Category.warning && (_jsx(Icon, { children: _jsx(AttentionOrangeIcon, {}) })), category === Category.success && (_jsx(Icon, { children: _jsx(AttentionGreenIcon, {}) })), header] }), _jsxs(MessageContainer, { children: [message, confirmFieldText && (_jsx("form", { id: "formDialog", onSubmit: this.handleSubmit, children: _jsx(ConfirmationTextField, { autoFocus: true, onChange: this.checkInputValue, placeholder: 'Please type: ' + confirmFieldText, required: true }) })), children] }), this.renderButtons(this.props, primaryActionDisabled)] }) }));
     }
 }

package/dist/es/components/StyledModal.js

@@ -1,15 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
 import { RoundIconButton } from './Button';
 import { SidebarStyles } from './Sidebar';
-export const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, ariaLabelledby, id, }) => {
+export const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, ariaLabelledby, id, onExited, }) => {
     const dialogRef = useRef(null);
     const closedByCancelRef = useRef(false);
+    const [visible, setVisible] = useState(false);
+    useLayoutEffect(() => {
+        if (isOpen) {
+            setVisible(true);
+        }
+    }, [isOpen]);
     useEffect(() => {
         const dialog = dialogRef.current;
-        if (!dialog) {
+        if (!dialog || !visible) {
             return;
         }
         if (isOpen && !dialog.open) {
@@ -21,9 +27,14 @@ export const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverla
             }
         }
         else if (!isOpen && dialog.open) {
+            const timeout = setTimeout(() => {
+                setVisible(false);
+                onExited?.();
+            }, TRANSITION_TIME + 50);
             dialog.close();
+            return () => clearTimeout(timeout);
         }
-    }, [isOpen]);
+    }, [isOpen, setVisible, visible]);
     useEffect(() => {
         const dialog = dialogRef.current;
         if (!dialog) {
@@ -35,7 +46,10 @@ export const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverla
             }
             closedByCancelRef.current = false;
         };
-        const listener = () => handleNativeClose(isOpen);
+        const listener = (e) => {
+            e.preventDefault();
+            handleNativeClose(isOpen);
+        };
         dialog.addEventListener('close', listener);
         return () => dialog.removeEventListener('close', listener);
     }, [isOpen, onRequestClose]);
@@ -56,6 +70,9 @@ export const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverla
             onRequestClose?.();
         }
     };
+    if (!visible) {
+        return null;
+    }
     return (_jsx(Dialog, { ref: dialogRef, onClick: (e) => {
             e.stopPropagation();
             handleBackdropClick(e);
@@ -64,6 +81,7 @@ export const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverla
 export const StyledModal = (props) => {
     return createPortal(_jsx(StyledModalContent, { ...props }), document.body);
 };
+const TRANSITION_TIME = 500;
 const Dialog = styled.dialog `
   background: transparent;
   border: none;
@@ -74,9 +92,9 @@ const Dialog = styled.dialog `
   z-index: 100;
   opacity: 1;
   transition:
-    opacity 0.5s ease-in-out,
-    display 0.5s ease allow-discrete,
-    overlay 0.5s ease allow-discrete;
+    opacity ${TRANSITION_TIME}ms ease-in-out,
+    display ${TRANSITION_TIME}ms ease allow-discrete,
+    overlay ${TRANSITION_TIME}ms ease allow-discrete;
 
   &:not([open]) {
     opacity: 0;
@@ -107,9 +125,9 @@ const Dialog = styled.dialog `
     opacity: 1;
     pointer-events: ${(props) => props.$pointerEventsOnBackdrop || 'auto'};
     transition:
-      opacity 0.5s ease-in-out,
-      display 0.5s ease allow-discrete,
-      overlay 0.5s ease allow-discrete;
+      opacity ${TRANSITION_TIME}ms ease-in-out,
+      display ${TRANSITION_TIME}ms ease allow-discrete,
+      overlay ${TRANSITION_TIME}ms ease allow-discrete;
   }
 
   &:not([open])::backdrop {

package/dist/types/components/Dialog.d.ts

@@ -40,6 +40,8 @@ interface DialogProps {
     message: string | React.ReactElement;
     className?: string;
     children?: React.ReactNode;
+    portaled?: boolean;
+    onExited?: () => void;
 }
 export declare enum Category {
     error = "error",
@@ -50,6 +52,7 @@ export declare enum Category {
 export declare class Dialog extends React.Component<DialogProps, DialogState> {
     state: DialogState;
     componentDidMount(): void;
+    Parent: React.FC<import("./StyledModal").StyledModalProps>;
     render(): React.JSX.Element;
     private renderButtons;
     private checkInputValue;

package/dist/types/components/StyledModal.d.ts

@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 import React from 'react';
-interface StyledModalProps {
+export interface StyledModalProps {
     isOpen: boolean;
     onRequestClose?: (e?: Event) => void;
+    onExited?: () => void;
     shouldCloseOnOverlayClick?: boolean;
     hideOverlay?: boolean;
     pointerEventsOnBackdrop?: 'all' | 'none' | 'auto';
@@ -549,4 +550,3 @@ export declare const ModalCardBody: import("styled-components/dist/types").IStyl
     $width?: number | string;
 }, never>>> & string;
 export declare const ModalTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
-export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "3.8.3",
+  "version": "3.8.4",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",