@manuscripts/style-guide 3.5.4 → 3.5.5

package/dist/cjs/components/DraggableModal.js

@@ -52,9 +52,13 @@ const DraggableModal = ({ children, isOpen, onRequestClose, hideOverlay }) => {
             content: {
                 left: '0',
                 bottom: '0',
+                top: 'auto',
+                margin: '0',
                 transition: 'none',
                 position: 'fixed',
                 width: '100%',
+                maxWidth: '100%',
+                maxHeight: 'none',
             },
         }, children: (0, jsx_runtime_1.jsx)(DraggableModalContainer, { onMouseDown: mouseDown, onMouseMove: mouseMove, "data-cy": "find-replace-modal", children: children }) }));
 };

package/dist/cjs/components/LoadingOverlay.js

@@ -5,29 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingOverlay = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_modal_1 = __importDefault(require("react-modal"));
-const LoadingOverlay = ({ children, }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_modal_1.default, { isOpen: true, style: {
-            overlay: {
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                backgroundColor: 'white',
-                zIndex: 20,
-            },
-            content: {
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                background: 'white',
-                display: 'flex',
-                flexDirection: 'column',
-                padding: 0,
-                overflow: 'auto',
-                border: 'none',
-            },
-        }, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }) }) }));
+const styled_components_1 = __importDefault(require("styled-components"));
+const LoadingOverlay = ({ children, }) => (0, jsx_runtime_1.jsx)(Overlay, { children: children });
 exports.LoadingOverlay = LoadingOverlay;
+const Overlay = styled_components_1.default.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: auto;
+  border: none;
+  z-index: 20;
+`;

package/dist/cjs/components/StyledModal.js

@@ -1,27 +1,152 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledModal = exports.ModalTitle = exports.ModalCardBody = exports.ScrollableModalContent = exports.ModelContent = exports.ModalSidebarTitle = exports.ModalSidebarHeader = exports.ModalSidebar = exports.ModalBody = exports.CloseButton = exports.ModalHeader = exports.ModalContainer = void 0;
+exports.ModalTitle = exports.ModalCardBody = exports.ScrollableModalContent = exports.ModelContent = exports.ModalSidebarTitle = exports.ModalSidebarHeader = exports.ModalSidebar = exports.ModalBody = exports.CloseButton = exports.ModalHeader = exports.ModalContainer = exports.StyledModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_modal_1 = __importDefault(require("react-modal"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = require("react");
+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 totalTransitionTime = 800;
-const transitionDelay = 300;
-const delayedTransitionTime = totalTransitionTime - transitionDelay;
-const ReactModalAdapter = ({ className, modalClassName, ...props }) => {
-    props.style = props.style || {};
-    if (props.pointerEventsOnBackdrop == 'none') {
-        props.style.content = {
-            ...props.style.content,
-            pointerEvents: 'all',
+const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, }) => {
+    const dialogRef = (0, react_1.useRef)(null);
+    const closedByCancelRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) {
+            return;
+        }
+        if (isOpen && !dialog.open) {
+            dialog.showModal();
+        }
+        else if (!isOpen && dialog.open) {
+            dialog.close();
+        }
+    }, [isOpen]);
+    (0, react_1.useEffect)(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) {
+            return;
+        }
+        const handleNativeClose = (wasOpen) => {
+            if (wasOpen && !closedByCancelRef.current) {
+                onRequestClose?.();
+            }
+            closedByCancelRef.current = false;
         };
-    }
-    return ((0, jsx_runtime_1.jsx)(react_modal_1.default, { className: modalClassName, portalClassName: className, closeTimeoutMS: totalTransitionTime, preventScroll: true, appElement: document.getElementById('root'), ...props }));
+        const listener = () => handleNativeClose(isOpen);
+        dialog.addEventListener('close', listener);
+        return () => dialog.removeEventListener('close', listener);
+    }, [isOpen, onRequestClose]);
+    (0, react_1.useEffect)(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) {
+            return;
+        }
+        const handleCancel = (e) => {
+            closedByCancelRef.current = true;
+            onRequestClose?.(e);
+        };
+        dialog.addEventListener('cancel', handleCancel);
+        return () => dialog.removeEventListener('cancel', handleCancel);
+    }, [onRequestClose]);
+    const handleBackdropClick = (e) => {
+        if (shouldCloseOnOverlayClick && e.target === dialogRef.current) {
+            onRequestClose?.();
+        }
+    };
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(Dialog, { ref: dialogRef, onClick: handleBackdropClick, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className, style: style?.content, children: children }), document.body);
 };
+exports.StyledModal = StyledModal;
+const Dialog = styled_components_1.default.dialog `
+  background: transparent;
+  border: none;
+  position: relative;
+  outline: none;
+  padding: 0;
+  overflow: visible;
+  opacity: 1;
+  transition:
+    opacity 0.5s ease-in-out,
+    display 0.5s ease allow-discrete,
+    overlay 0.5s ease allow-discrete;
+
+  &:not([open]) {
+    opacity: 0;
+  }
+
+  @starting-style {
+    &[open] {
+      opacity: 0;
+    }
+  }
+
+  &::backdrop {
+    ${(props) => {
+    if (props.$hideOverlay) {
+        return (0, styled_components_1.css) `
+          background: transparent;
+        `;
+    }
+    if (props.$pointerEventsOnBackdrop === 'none') {
+        return (0, styled_components_1.css) `
+          background: rgba(0, 0, 0, 0.1);
+        `;
+    }
+    return (0, styled_components_1.css) `
+        background: ${props.theme.colors.background.dark};
+      `;
+}}
+    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;
+  }
+
+  &:not([open])::backdrop {
+    opacity: 0;
+  }
+
+  @starting-style {
+    &[open]::backdrop {
+      opacity: 0;
+    }
+  }
+`;
 exports.ModalContainer = styled_components_1.default.div `
   background: ${(props) => props.theme.colors.background.primary};
   border-radius: ${(props) => props.theme.grid.radius.default};
@@ -119,67 +244,3 @@ exports.ModalTitle = styled_components_1.default.h2 `
   color: ${(props) => props.theme.colors.text.primary};
   margin: 0 0 20px 0;
 `;
-exports.StyledModal = (0, styled_components_1.default)(ReactModalAdapter).attrs({
-    closeTimeoutMS: totalTransitionTime,
-    overlayClassName: {
-        base: 'Overlay',
-        afterOpen: 'Overlay--after-open',
-        beforeClose: 'Overlay--before-close',
-    },
-    modalClassName: {
-        base: 'Modal',
-        afterOpen: 'Modal--after-open',
-        beforeClose: 'Modal--before-close',
-    },
-}) `
-  .Overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: ${(props) => props.hideOverlay
-    ? 'transparent'
-    : props.pointerEventsOnBackdrop === 'none'
-        ? 'rgba(0,0,0,0.1)'
-        : props.theme.colors.background.dark};
-    z-index: 1000;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    pointer-events: ${(props) => props.pointerEventsOnBackdrop || 'auto'};
-
-    &--after-open {
-      transition: opacity ${totalTransitionTime}ms ease-in-out;
-      opacity: 1;
-    }
-
-    &--before-close {
-      transition: opacity ${delayedTransitionTime}ms ease-in-out;
-      transition-delay: ${transitionDelay}ms;
-      opacity: 0;
-    }
-  }
-
-  .Modal {
-    background: transparent;
-    border: none;
-    position: relative;
-    outline: none;
-    opacity: 0;
-    transition:
-      opacity ${delayedTransitionTime}ms ease-in-out,
-      top ${delayedTransitionTime}ms ease-in-out;
-    transition-delay: ${transitionDelay}ms;
-
-    &--after-open {
-      opacity: 1;
-    }
-
-    &--before-close {
-      transition-delay: 0ms;
-      opacity: 0;
-    }
-  }
-`;

package/dist/es/components/DraggableModal.js

@@ -46,9 +46,13 @@ export const DraggableModal = ({ children, isOpen, onRequestClose, hideOverlay }
             content: {
                 left: '0',
                 bottom: '0',
+                top: 'auto',
+                margin: '0',
                 transition: 'none',
                 position: 'fixed',
                 width: '100%',
+                maxWidth: '100%',
+                maxHeight: 'none',
             },
         }, children: _jsx(DraggableModalContainer, { onMouseDown: mouseDown, onMouseMove: mouseMove, "data-cy": "find-replace-modal", children: children }) }));
 };

package/dist/es/components/LoadingOverlay.js

@@ -1,26 +1,17 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import Modal from 'react-modal';
-export const LoadingOverlay = ({ children, }) => (_jsx(_Fragment, { children: _jsx(Modal, { isOpen: true, style: {
-            overlay: {
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                backgroundColor: 'white',
-                zIndex: 20,
-            },
-            content: {
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                background: 'white',
-                display: 'flex',
-                flexDirection: 'column',
-                padding: 0,
-                overflow: 'auto',
-                border: 'none',
-            },
-        }, children: _jsx(_Fragment, { children: children }) }) }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+export const LoadingOverlay = ({ children, }) => _jsx(Overlay, { children: children });
+const Overlay = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: auto;
+  border: none;
+  z-index: 20;
+`;

package/dist/es/components/StyledModal.js

@@ -1,21 +1,115 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ReactModal from 'react-modal';
-import styled from 'styled-components';
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import styled, { css } from 'styled-components';
 import { RoundIconButton } from './Button';
 import { SidebarStyles } from './Sidebar';
-const totalTransitionTime = 800;
-const transitionDelay = 300;
-const delayedTransitionTime = totalTransitionTime - transitionDelay;
-const ReactModalAdapter = ({ className, modalClassName, ...props }) => {
-    props.style = props.style || {};
-    if (props.pointerEventsOnBackdrop == 'none') {
-        props.style.content = {
-            ...props.style.content,
-            pointerEvents: 'all',
+export const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, }) => {
+    const dialogRef = useRef(null);
+    const closedByCancelRef = useRef(false);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) {
+            return;
+        }
+        if (isOpen && !dialog.open) {
+            dialog.showModal();
+        }
+        else if (!isOpen && dialog.open) {
+            dialog.close();
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) {
+            return;
+        }
+        const handleNativeClose = (wasOpen) => {
+            if (wasOpen && !closedByCancelRef.current) {
+                onRequestClose?.();
+            }
+            closedByCancelRef.current = false;
         };
-    }
-    return (_jsx(ReactModal, { className: modalClassName, portalClassName: className, closeTimeoutMS: totalTransitionTime, preventScroll: true, appElement: document.getElementById('root'), ...props }));
+        const listener = () => handleNativeClose(isOpen);
+        dialog.addEventListener('close', listener);
+        return () => dialog.removeEventListener('close', listener);
+    }, [isOpen, onRequestClose]);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) {
+            return;
+        }
+        const handleCancel = (e) => {
+            closedByCancelRef.current = true;
+            onRequestClose?.(e);
+        };
+        dialog.addEventListener('cancel', handleCancel);
+        return () => dialog.removeEventListener('cancel', handleCancel);
+    }, [onRequestClose]);
+    const handleBackdropClick = (e) => {
+        if (shouldCloseOnOverlayClick && e.target === dialogRef.current) {
+            onRequestClose?.();
+        }
+    };
+    return createPortal(_jsx(Dialog, { ref: dialogRef, onClick: handleBackdropClick, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className, style: style?.content, children: children }), document.body);
 };
+const Dialog = styled.dialog `
+  background: transparent;
+  border: none;
+  position: relative;
+  outline: none;
+  padding: 0;
+  overflow: visible;
+  opacity: 1;
+  transition:
+    opacity 0.5s ease-in-out,
+    display 0.5s ease allow-discrete,
+    overlay 0.5s ease allow-discrete;
+
+  &:not([open]) {
+    opacity: 0;
+  }
+
+  @starting-style {
+    &[open] {
+      opacity: 0;
+    }
+  }
+
+  &::backdrop {
+    ${(props) => {
+    if (props.$hideOverlay) {
+        return css `
+          background: transparent;
+        `;
+    }
+    if (props.$pointerEventsOnBackdrop === 'none') {
+        return css `
+          background: rgba(0, 0, 0, 0.1);
+        `;
+    }
+    return css `
+        background: ${props.theme.colors.background.dark};
+      `;
+}}
+    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;
+  }
+
+  &:not([open])::backdrop {
+    opacity: 0;
+  }
+
+  @starting-style {
+    &[open]::backdrop {
+      opacity: 0;
+    }
+  }
+`;
 export const ModalContainer = styled.div `
   background: ${(props) => props.theme.colors.background.primary};
   border-radius: ${(props) => props.theme.grid.radius.default};
@@ -113,67 +207,3 @@ export const ModalTitle = styled.h2 `
   color: ${(props) => props.theme.colors.text.primary};
   margin: 0 0 20px 0;
 `;
-export const StyledModal = styled(ReactModalAdapter).attrs({
-    closeTimeoutMS: totalTransitionTime,
-    overlayClassName: {
-        base: 'Overlay',
-        afterOpen: 'Overlay--after-open',
-        beforeClose: 'Overlay--before-close',
-    },
-    modalClassName: {
-        base: 'Modal',
-        afterOpen: 'Modal--after-open',
-        beforeClose: 'Modal--before-close',
-    },
-}) `
-  .Overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: ${(props) => props.hideOverlay
-    ? 'transparent'
-    : props.pointerEventsOnBackdrop === 'none'
-        ? 'rgba(0,0,0,0.1)'
-        : props.theme.colors.background.dark};
-    z-index: 1000;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    pointer-events: ${(props) => props.pointerEventsOnBackdrop || 'auto'};
-
-    &--after-open {
-      transition: opacity ${totalTransitionTime}ms ease-in-out;
-      opacity: 1;
-    }
-
-    &--before-close {
-      transition: opacity ${delayedTransitionTime}ms ease-in-out;
-      transition-delay: ${transitionDelay}ms;
-      opacity: 0;
-    }
-  }
-
-  .Modal {
-    background: transparent;
-    border: none;
-    position: relative;
-    outline: none;
-    opacity: 0;
-    transition:
-      opacity ${delayedTransitionTime}ms ease-in-out,
-      top ${delayedTransitionTime}ms ease-in-out;
-    transition-delay: ${transitionDelay}ms;
-
-    &--after-open {
-      opacity: 1;
-    }
-
-    &--before-close {
-      transition-delay: 0ms;
-      opacity: 0;
-    }
-  }
-`;

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

@@ -1,5 +1,5 @@
 /*!
- * © 2019 Atypon Systems LLC
+ * © 2026 Atypon Systems LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,13 +14,19 @@
  * limitations under the License.
  */
 import React from 'react';
-import ReactModal from 'react-modal';
-import { ThemeProps } from 'styled-components';
-interface Props {
-    modalClassName?: ReactModal.Classes;
-    pointerEventsOnBackdrop?: 'all' | 'none' | 'auto';
+interface StyledModalProps {
+    isOpen: boolean;
+    onRequestClose?: (e?: Event) => void;
+    shouldCloseOnOverlayClick?: boolean;
     hideOverlay?: boolean;
+    pointerEventsOnBackdrop?: 'all' | 'none' | 'auto';
+    children: React.ReactNode;
+    className?: string;
+    style?: {
+        content?: React.CSSProperties;
+    };
 }
+export declare const StyledModal: React.FC<StyledModalProps>;
 export declare const ModalContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ModalHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const CloseButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
@@ -48,17 +54,4 @@ export declare const ModalCardBody: import("styled-components").StyledComponent<
     width?: number | string;
 }, never>;
 export declare const ModalTitle: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledModal: import("styled-components").StyledComponent<React.FC<ReactModal.Props & ThemeProps<ReactModal> & Props>, import("styled-components").DefaultTheme, {
-    closeTimeoutMS: 800;
-    overlayClassName: {
-        base: string;
-        afterOpen: string;
-        beforeClose: string;
-    };
-    modalClassName: {
-        base: string;
-        afterOpen: string;
-        beforeClose: string;
-    };
-}, "modalClassName" | "overlayClassName" | "closeTimeoutMS">;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "3.5.4",
+  "version": "3.5.5",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -47,7 +47,6 @@
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "19.2.0",
     "react-is": "19.2.0",
-    "react-modal": "3.16.3",
     "react-router-dom": "5.3.4",
     "react-select": "5.10.1",
     "react-tooltip": "5.28.1",
@@ -75,7 +74,6 @@
     "@types/react": "19.2.3",
     "@types/react-datepicker": "^7.0.0",
     "@types/react-dom": "19.2.3",
-    "@types/react-modal": "3.16.3",
     "@types/react-router-dom": "5.3.3",
     "@types/styled-components": "5.1.34",
     "@typescript-eslint/eslint-plugin": "8.46.4",