@manuscripts/style-guide 2.0.36-LEAN-4311.2 → 2.1.0

package/dist/cjs/components/DraggableModal.js

@@ -0,0 +1,91 @@
+"use strict";
+/*!
+ * © 2025 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.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DraggableModal = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const StyledModal_1 = require("./StyledModal");
+const DraggableModal = ({ children, isOpen, onRequestClose }) => {
+    const [pos, setPos] = (0, react_1.useState)({ left: 0, top: 0, prevX: 0, prevY: 0 });
+    const [drag, setDrag] = (0, react_1.useState)(false);
+    const mouseDown = (event) => {
+        if (event.target instanceof Element &&
+            (event.target.tagName === 'INPUT' || event.target.tagName === 'BUTTON')) {
+            return;
+        }
+        pos.prevX = event.screenX;
+        pos.prevY = event.screenY;
+        setPos((state) => (Object.assign(Object.assign({}, state), { prevX: event.screenX, prevY: event.screenY })));
+        setDrag(true);
+    };
+    const mouseMove = (0, react_1.useCallback)(function (event) {
+        if (!drag) {
+            return;
+        }
+        const left = pos.left + event.screenX - pos.prevX;
+        const top = pos.top + event.screenY - pos.prevY;
+        setPos((state) => (Object.assign(Object.assign({}, state), { left,
+            top, prevX: event.screenX, prevY: event.screenY })));
+    }, [pos, drag]);
+    (0, react_1.useEffect)(() => {
+        const mouseup = () => {
+            setDrag(false);
+        };
+        document.addEventListener('mouseup', mouseup);
+        return () => {
+            document.removeEventListener('mouseup', mouseup);
+        };
+    }, []);
+    return (react_1.default.createElement(StyledModal_1.StyledModal, { isOpen: isOpen, onRequestClose: onRequestClose, shouldCloseOnOverlayClick: false, pointerEventsOnBackdrop: "none", style: {
+            content: {
+                left: pos.left + 'px',
+                top: pos.top + 'px',
+                transition: 'none',
+            },
+        } },
+        react_1.default.createElement(DraggableModalContainer, { onMouseDown: mouseDown, onMouseMove: mouseMove, "data-cy": "find-replace-modal" }, children)));
+};
+exports.DraggableModal = DraggableModal;
+const DraggableModalContainer = (0, styled_components_1.default)(StyledModal_1.ModalContainer) `
+  padding: 0 2rem 2rem 2rem;
+`;

package/dist/cjs/components/Menus/Submenu.js

@@ -58,7 +58,6 @@ exports.NestedSubmenusContainer = (0, styled_components_1.default)(exports.Subme
   position: absolute;
   top: 0;
   left: 100%;
-  overflow: visible;
 `;
 const Separator = styled_components_1.default.div `
   height: 0;

package/dist/cjs/components/StyledModal.js

@@ -40,6 +40,10 @@ const transitionDelay = 300;
 const delayedTransitionTime = totalTransitionTime - transitionDelay;
 const ReactModalAdapter = (_a) => {
     var { className, modalClassName } = _a, props = __rest(_a, ["className", "modalClassName"]);
+    props.style = props.style || {};
+    if (props.pointerEventsOnBackdrop == 'none') {
+        props.style.content = Object.assign(Object.assign({}, props.style.content), { pointerEvents: 'all' });
+    }
     return (react_1.default.createElement(react_modal_1.default, Object.assign({ className: modalClassName, portalClassName: className, closeTimeoutMS: totalTransitionTime, preventScroll: true, appElement: document.getElementById('root') }, props)));
 };
 exports.ModalContainer = styled_components_1.default.div `
@@ -137,12 +141,15 @@ exports.StyledModal = (0, styled_components_1.default)(ReactModalAdapter).attrs(
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: ${(props) => props.theme.colors.background.dark};
+    background-color: ${(props) => 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;

package/dist/cjs/hooks/use-menus.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMenus = void 0;
 const react_1 = require("react");
 const menus_1 = require("../lib/menus");
-const initialPointer = [-1, -1, -1, -1];
+const initialPointer = [-1, -1, -1];
 const transformPointer = (depth, index) => (pointer) => pointer.map((pointerPart, i) => {
     if (i === depth) {
         return index;
@@ -14,8 +14,7 @@ const transformPointer = (depth, index) => (pointer) => pointer.map((pointerPart
     return pointerPart;
 });
 const isPart = (pointer, position) => {
-    const max = initialPointer.length;
-    const limit = position.length < max ? position.length : max;
+    const limit = position.length < 3 ? position.length : 3;
     for (let i = 0; i < limit; i++) {
         if (position[i] !== pointer[i]) {
             return false;
@@ -61,7 +60,7 @@ const useMenus = (menus) => {
         }
         if (menu.run) {
             menu.run();
-            setPointer(initialPointer);
+            setPointer([-1, -1, -1]);
         }
         else if (menu.submenu) {
             const depth = indices.length - 1;
@@ -73,7 +72,7 @@ const useMenus = (menus) => {
     (0, react_1.useEffect)(() => {
         const handleClickOutside = (event) => {
             if (ref.current && !ref.current.contains(event.target)) {
-                setPointer(initialPointer);
+                setPointer([-1, -1, -1]);
             }
         };
         document.addEventListener('click', handleClickOutside);

package/dist/cjs/index.js

@@ -40,6 +40,7 @@ __exportStar(require("./components/RadioButton"), exports);
 __exportStar(require("./components/AutoSaveInput"), exports);
 __exportStar(require("./components/Avatar"), exports);
 __exportStar(require("./components/Dialog"), exports);
+__exportStar(require("./components/DraggableModal"), exports);
 __exportStar(require("./components/Checkbox"), exports);
 __exportStar(require("./components/Form"), exports);
 __exportStar(require("./components/MultiValueInput"), exports);

package/dist/es/components/DraggableModal.js

@@ -0,0 +1,61 @@
+/*!
+ * © 2025 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.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { useCallback, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { ModalContainer, StyledModal } from './StyledModal';
+export const DraggableModal = ({ children, isOpen, onRequestClose }) => {
+    const [pos, setPos] = useState({ left: 0, top: 0, prevX: 0, prevY: 0 });
+    const [drag, setDrag] = useState(false);
+    const mouseDown = (event) => {
+        if (event.target instanceof Element &&
+            (event.target.tagName === 'INPUT' || event.target.tagName === 'BUTTON')) {
+            return;
+        }
+        pos.prevX = event.screenX;
+        pos.prevY = event.screenY;
+        setPos((state) => (Object.assign(Object.assign({}, state), { prevX: event.screenX, prevY: event.screenY })));
+        setDrag(true);
+    };
+    const mouseMove = useCallback(function (event) {
+        if (!drag) {
+            return;
+        }
+        const left = pos.left + event.screenX - pos.prevX;
+        const top = pos.top + event.screenY - pos.prevY;
+        setPos((state) => (Object.assign(Object.assign({}, state), { left,
+            top, prevX: event.screenX, prevY: event.screenY })));
+    }, [pos, drag]);
+    useEffect(() => {
+        const mouseup = () => {
+            setDrag(false);
+        };
+        document.addEventListener('mouseup', mouseup);
+        return () => {
+            document.removeEventListener('mouseup', mouseup);
+        };
+    }, []);
+    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: onRequestClose, shouldCloseOnOverlayClick: false, pointerEventsOnBackdrop: "none", style: {
+            content: {
+                left: pos.left + 'px',
+                top: pos.top + 'px',
+                transition: 'none',
+            },
+        } },
+        React.createElement(DraggableModalContainer, { onMouseDown: mouseDown, onMouseMove: mouseMove, "data-cy": "find-replace-modal" }, children)));
+};
+const DraggableModalContainer = styled(ModalContainer) `
+  padding: 0 2rem 2rem 2rem;
+`;

package/dist/es/components/Menus/Submenu.js

@@ -52,7 +52,6 @@ export const NestedSubmenusContainer = styled(SubmenusContainer) `
   position: absolute;
   top: 0;
   left: 100%;
-  overflow: visible;
 `;
 const Separator = styled.div `
   height: 0;

package/dist/es/components/StyledModal.js

@@ -34,6 +34,10 @@ const transitionDelay = 300;
 const delayedTransitionTime = totalTransitionTime - transitionDelay;
 const ReactModalAdapter = (_a) => {
     var { className, modalClassName } = _a, props = __rest(_a, ["className", "modalClassName"]);
+    props.style = props.style || {};
+    if (props.pointerEventsOnBackdrop == 'none') {
+        props.style.content = Object.assign(Object.assign({}, props.style.content), { pointerEvents: 'all' });
+    }
     return (React.createElement(ReactModal, Object.assign({ className: modalClassName, portalClassName: className, closeTimeoutMS: totalTransitionTime, preventScroll: true, appElement: document.getElementById('root') }, props)));
 };
 export const ModalContainer = styled.div `
@@ -131,12 +135,15 @@ export const StyledModal = styled(ReactModalAdapter).attrs({
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: ${(props) => props.theme.colors.background.dark};
+    background-color: ${(props) => 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;

package/dist/es/hooks/use-menus.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { isMenuSeparator, } from '../lib/menus';
-const initialPointer = [-1, -1, -1, -1];
+const initialPointer = [-1, -1, -1];
 const transformPointer = (depth, index) => (pointer) => pointer.map((pointerPart, i) => {
     if (i === depth) {
         return index;
@@ -11,8 +11,7 @@ const transformPointer = (depth, index) => (pointer) => pointer.map((pointerPart
     return pointerPart;
 });
 const isPart = (pointer, position) => {
-    const max = initialPointer.length;
-    const limit = position.length < max ? position.length : max;
+    const limit = position.length < 3 ? position.length : 3;
     for (let i = 0; i < limit; i++) {
         if (position[i] !== pointer[i]) {
             return false;
@@ -58,7 +57,7 @@ export const useMenus = (menus) => {
         }
         if (menu.run) {
             menu.run();
-            setPointer(initialPointer);
+            setPointer([-1, -1, -1]);
         }
         else if (menu.submenu) {
             const depth = indices.length - 1;
@@ -70,7 +69,7 @@ export const useMenus = (menus) => {
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (ref.current && !ref.current.contains(event.target)) {
-                setPointer(initialPointer);
+                setPointer([-1, -1, -1]);
             }
         };
         document.addEventListener('click', handleClickOutside);

package/dist/es/index.js

@@ -20,6 +20,7 @@ export * from './components/RadioButton';
 export * from './components/AutoSaveInput';
 export * from './components/Avatar';
 export * from './components/Dialog';
+export * from './components/DraggableModal';
 export * from './components/Checkbox';
 export * from './components/Form';
 export * from './components/MultiValueInput';

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

@@ -0,0 +1,21 @@
+/*!
+ * © 2025 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.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+export declare const DraggableModal: React.FC<{
+    children: React.ReactNode;
+    isOpen: boolean;
+    onRequestClose: () => void;
+}>;

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

@@ -18,6 +18,7 @@ import ReactModal from 'react-modal';
 import { ThemeProps } from 'styled-components';
 interface Props {
     modalClassName?: ReactModal.Classes;
+    pointerEventsOnBackdrop?: 'all' | 'none' | 'auto';
 }
 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>;

package/dist/types/index.d.ts

@@ -21,6 +21,7 @@ export * from './components/RadioButton';
 export * from './components/AutoSaveInput';
 export * from './components/Avatar';
 export * from './components/Dialog';
+export * from './components/DraggableModal';
 export * from './components/Checkbox';
 export * from './components/Form';
 export * from './components/MultiValueInput';

package/dist/types/lib/menus.d.ts

@@ -41,4 +41,4 @@ export type MenuSeparator = {
     role: 'separator';
 };
 export declare const isMenuSeparator: (menu: any) => menu is MenuSeparator;
-export type MenuPointer = [number, number, number, number];
+export type MenuPointer = [number, number, number];

package/package.json

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