@manuscripts/style-guide 3.3.1 → 3.3.3

package/dist/cjs/components/DraggableModal.js

@@ -55,7 +55,7 @@ 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 DraggableModal = ({ children, isOpen, onRequestClose, hideOverlay }) => {
     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) => {
@@ -95,16 +95,21 @@ const DraggableModal = ({ children, isOpen, onRequestClose }) => {
             document.removeEventListener('mouseup', mouseup);
         };
     }, []);
-    return (react_1.default.createElement(StyledModal_1.StyledModal, { isOpen: isOpen, onRequestClose: onRequestClose, shouldCloseOnOverlayClick: false, pointerEventsOnBackdrop: "none", style: {
+    return (react_1.default.createElement(StyledModal_1.StyledModal, { isOpen: isOpen, onRequestClose: onRequestClose, shouldCloseOnOverlayClick: false, pointerEventsOnBackdrop: "none", hideOverlay: hideOverlay, style: {
             content: {
-                left: pos.left + 'px',
-                top: pos.top + 'px',
+                left: '0',
+                bottom: '0',
                 transition: 'none',
+                position: 'fixed',
+                width: '100%',
             },
         } },
         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;
+  padding: 1rem 1.5rem;
+  margin: 0;
+  height: 72px;
+  border-radius: 0;
 `;

package/dist/cjs/components/StyledModal.js

@@ -134,9 +134,11 @@ exports.StyledModal = (0, styled_components_1.default)(ReactModalAdapter).attrs(
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: ${(props) => props.pointerEventsOnBackdrop === 'none'
-    ? 'rgba(0,0,0,0.1)'
-    : props.theme.colors.background.dark};
+    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;

package/dist/cjs/lib/capabilities.js

@@ -20,7 +20,6 @@ const getCapabilities = (project, profile, role, actions, isViewingMode) => {
     const isEditor = isMemberOf(project?.editors);
     const isWriter = isMemberOf(project?.writers);
     const isAnnotator = isMemberOf(project?.annotators);
-    const isProofer = isMemberOf(project?.proofers);
     const isViewer = isMemberOf(project?.viewers) || isViewingMode;
     const allowed = (action) => !!actions?.includes(action);
     const canEditWithoutTracking = allowed(Actions.editWithoutTracking);
@@ -45,8 +44,8 @@ const getCapabilities = (project, profile, role, actions, isViewingMode) => {
         setMainManuscript: allowed(Actions.setMainManuscript),
         editArticle: !isViewer,
         formatArticle: !isViewer,
-        editMetadata: !(isViewer || isProofer),
-        editCitationsAndRefs: !(isViewer || isProofer),
+        editMetadata: !isViewer,
+        editCitationsAndRefs: !isViewer,
         seeEditorToolbar: !isViewer,
         seeReferencesButtons: !isViewer,
     };

package/dist/es/components/DraggableModal.js

@@ -16,7 +16,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { ModalContainer, StyledModal } from './StyledModal';
-export const DraggableModal = ({ children, isOpen, onRequestClose }) => {
+export const DraggableModal = ({ children, isOpen, onRequestClose, hideOverlay }) => {
     const [pos, setPos] = useState({ left: 0, top: 0, prevX: 0, prevY: 0 });
     const [drag, setDrag] = useState(false);
     const mouseDown = (event) => {
@@ -56,15 +56,20 @@ export const DraggableModal = ({ children, isOpen, onRequestClose }) => {
             document.removeEventListener('mouseup', mouseup);
         };
     }, []);
-    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: onRequestClose, shouldCloseOnOverlayClick: false, pointerEventsOnBackdrop: "none", style: {
+    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: onRequestClose, shouldCloseOnOverlayClick: false, pointerEventsOnBackdrop: "none", hideOverlay: hideOverlay, style: {
             content: {
-                left: pos.left + 'px',
-                top: pos.top + 'px',
+                left: '0',
+                bottom: '0',
                 transition: 'none',
+                position: 'fixed',
+                width: '100%',
             },
         } },
         React.createElement(DraggableModalContainer, { onMouseDown: mouseDown, onMouseMove: mouseMove, "data-cy": "find-replace-modal" }, children)));
 };
 const DraggableModalContainer = styled(ModalContainer) `
-  padding: 0 2rem 2rem 2rem;
+  padding: 1rem 1.5rem;
+  margin: 0;
+  height: 72px;
+  border-radius: 0;
 `;

package/dist/es/components/StyledModal.js

@@ -128,9 +128,11 @@ export const StyledModal = styled(ReactModalAdapter).attrs({
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: ${(props) => props.pointerEventsOnBackdrop === 'none'
-    ? 'rgba(0,0,0,0.1)'
-    : props.theme.colors.background.dark};
+    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;

package/dist/es/lib/capabilities.js

@@ -14,7 +14,6 @@ export const getCapabilities = (project, profile, role, actions, isViewingMode)
     const isEditor = isMemberOf(project?.editors);
     const isWriter = isMemberOf(project?.writers);
     const isAnnotator = isMemberOf(project?.annotators);
-    const isProofer = isMemberOf(project?.proofers);
     const isViewer = isMemberOf(project?.viewers) || isViewingMode;
     const allowed = (action) => !!actions?.includes(action);
     const canEditWithoutTracking = allowed(Actions.editWithoutTracking);
@@ -39,8 +38,8 @@ export const getCapabilities = (project, profile, role, actions, isViewingMode)
         setMainManuscript: allowed(Actions.setMainManuscript),
         editArticle: !isViewer,
         formatArticle: !isViewer,
-        editMetadata: !(isViewer || isProofer),
-        editCitationsAndRefs: !(isViewer || isProofer),
+        editMetadata: !isViewer,
+        editCitationsAndRefs: !isViewer,
         seeEditorToolbar: !isViewer,
         seeReferencesButtons: !isViewer,
     };

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

@@ -18,4 +18,5 @@ export declare const DraggableModal: React.FC<{
     children: React.ReactNode;
     isOpen: boolean;
     onRequestClose: () => void;
+    hideOverlay?: boolean;
 }>;

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

@@ -19,6 +19,7 @@ import { ThemeProps } from 'styled-components';
 interface Props {
     modalClassName?: ReactModal.Classes;
     pointerEventsOnBackdrop?: 'all' | 'none' | 'auto';
+    hideOverlay?: boolean;
 }
 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/package.json

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