@manuscripts/style-guide 3.3.2 → 3.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/components/DraggableModal.js +10 -5
  2. package/dist/cjs/components/StyledModal.js +5 -3
  3. package/dist/cjs/components/ToggleHeader.js +1 -2
  4. package/dist/es/components/DraggableModal.js +10 -5
  5. package/dist/es/components/StyledModal.js +5 -3
  6. package/dist/es/components/ToggleHeader.js +1 -2
  7. package/dist/types/components/DraggableModal.d.ts +1 -0
  8. package/dist/types/components/StyledModal.d.ts +1 -0
  9. package/package.json +1 -1
package/dist/cjs/components/DraggableModal.js CHANGED
@@ -55,7 +55,7 @@ exports.DraggableModal = void 0;
55
55
  const react_1 = __importStar(require("react"));
56
56
  const styled_components_1 = __importDefault(require("styled-components"));
57
57
  const StyledModal_1 = require("./StyledModal");
58
- const DraggableModal = ({ children, isOpen, onRequestClose }) => {
58
+ const DraggableModal = ({ children, isOpen, onRequestClose, hideOverlay }) => {
59
59
  const [pos, setPos] = (0, react_1.useState)({ left: 0, top: 0, prevX: 0, prevY: 0 });
60
60
  const [drag, setDrag] = (0, react_1.useState)(false);
61
61
  const mouseDown = (event) => {
@@ -95,16 +95,21 @@ const DraggableModal = ({ children, isOpen, onRequestClose }) => {
95
95
  document.removeEventListener('mouseup', mouseup);
96
96
  };
97
97
  }, []);
98
- return (react_1.default.createElement(StyledModal_1.StyledModal, { isOpen: isOpen, onRequestClose: onRequestClose, shouldCloseOnOverlayClick: false, pointerEventsOnBackdrop: "none", style: {
98
+ return (react_1.default.createElement(StyledModal_1.StyledModal, { isOpen: isOpen, onRequestClose: onRequestClose, shouldCloseOnOverlayClick: false, pointerEventsOnBackdrop: "none", hideOverlay: hideOverlay, style: {
99
99
  content: {
100
- left: pos.left + 'px',
101
- top: pos.top + 'px',
100
+ left: '0',
101
+ bottom: '0',
102
102
  transition: 'none',
103
+ position: 'fixed',
104
+ width: '100%',
103
105
  },
104
106
  } },
105
107
  react_1.default.createElement(DraggableModalContainer, { onMouseDown: mouseDown, onMouseMove: mouseMove, "data-cy": "find-replace-modal" }, children)));
106
108
  };
107
109
  exports.DraggableModal = DraggableModal;
108
110
  const DraggableModalContainer = (0, styled_components_1.default)(StyledModal_1.ModalContainer) `
109
- padding: 0 2rem 2rem 2rem;
111
+ padding: 1rem 1.5rem;
112
+ margin: 0;
113
+ height: 72px;
114
+ border-radius: 0;
110
115
  `;
package/dist/cjs/components/StyledModal.js CHANGED
@@ -134,9 +134,11 @@ exports.StyledModal = (0, styled_components_1.default)(ReactModalAdapter).attrs(
134
134
  left: 0;
135
135
  right: 0;
136
136
  bottom: 0;
137
- background-color: ${(props) => props.pointerEventsOnBackdrop === 'none'
138
- ? 'rgba(0,0,0,0.1)'
139
- : props.theme.colors.background.dark};
137
+ background-color: ${(props) => props.hideOverlay
138
+ ? 'transparent'
139
+ : props.pointerEventsOnBackdrop === 'none'
140
+ ? 'rgba(0,0,0,0.1)'
141
+ : props.theme.colors.background.dark};
140
142
  z-index: 1000;
141
143
  display: flex;
142
144
  justify-content: center;
package/dist/cjs/components/ToggleHeader.js CHANGED
@@ -35,8 +35,7 @@ const ToggleHeaderContainer = styled_components_1.default.div `
35
35
  display: flex;
36
36
  align-items: center;
37
37
  justify-content: space-between;
38
- padding: 16px 8px;
39
- margin: 8px;
38
+ padding: 16px;
40
39
  color: #353535;
41
40
 
42
41
  cursor: pointer;
package/dist/es/components/DraggableModal.js CHANGED
@@ -16,7 +16,7 @@
16
16
  import React, { useCallback, useEffect, useState } from 'react';
17
17
  import styled from 'styled-components';
18
18
  import { ModalContainer, StyledModal } from './StyledModal';
19
- export const DraggableModal = ({ children, isOpen, onRequestClose }) => {
19
+ export const DraggableModal = ({ children, isOpen, onRequestClose, hideOverlay }) => {
20
20
  const [pos, setPos] = useState({ left: 0, top: 0, prevX: 0, prevY: 0 });
21
21
  const [drag, setDrag] = useState(false);
22
22
  const mouseDown = (event) => {
@@ -56,15 +56,20 @@ export const DraggableModal = ({ children, isOpen, onRequestClose }) => {
56
56
  document.removeEventListener('mouseup', mouseup);
57
57
  };
58
58
  }, []);
59
- return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: onRequestClose, shouldCloseOnOverlayClick: false, pointerEventsOnBackdrop: "none", style: {
59
+ return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: onRequestClose, shouldCloseOnOverlayClick: false, pointerEventsOnBackdrop: "none", hideOverlay: hideOverlay, style: {
60
60
  content: {
61
- left: pos.left + 'px',
62
- top: pos.top + 'px',
61
+ left: '0',
62
+ bottom: '0',
63
63
  transition: 'none',
64
+ position: 'fixed',
65
+ width: '100%',
64
66
  },
65
67
  } },
66
68
  React.createElement(DraggableModalContainer, { onMouseDown: mouseDown, onMouseMove: mouseMove, "data-cy": "find-replace-modal" }, children)));
67
69
  };
68
70
  const DraggableModalContainer = styled(ModalContainer) `
69
- padding: 0 2rem 2rem 2rem;
71
+ padding: 1rem 1.5rem;
72
+ margin: 0;
73
+ height: 72px;
74
+ border-radius: 0;
70
75
  `;
package/dist/es/components/StyledModal.js CHANGED
@@ -128,9 +128,11 @@ export const StyledModal = styled(ReactModalAdapter).attrs({
128
128
  left: 0;
129
129
  right: 0;
130
130
  bottom: 0;
131
- background-color: ${(props) => props.pointerEventsOnBackdrop === 'none'
132
- ? 'rgba(0,0,0,0.1)'
133
- : props.theme.colors.background.dark};
131
+ background-color: ${(props) => props.hideOverlay
132
+ ? 'transparent'
133
+ : props.pointerEventsOnBackdrop === 'none'
134
+ ? 'rgba(0,0,0,0.1)'
135
+ : props.theme.colors.background.dark};
134
136
  z-index: 1000;
135
137
  display: flex;
136
138
  justify-content: center;
package/dist/es/components/ToggleHeader.js CHANGED
@@ -28,8 +28,7 @@ const ToggleHeaderContainer = styled.div `
28
28
  display: flex;
29
29
  align-items: center;
30
30
  justify-content: space-between;
31
- padding: 16px 8px;
32
- margin: 8px;
31
+ padding: 16px;
33
32
  color: #353535;
34
33
 
35
34
  cursor: pointer;
package/dist/types/components/DraggableModal.d.ts CHANGED
@@ -18,4 +18,5 @@ export declare const DraggableModal: React.FC<{
18
18
  children: React.ReactNode;
19
19
  isOpen: boolean;
20
20
  onRequestClose: () => void;
21
+ hideOverlay?: boolean;
21
22
  }>;
package/dist/types/components/StyledModal.d.ts CHANGED
@@ -19,6 +19,7 @@ import { ThemeProps } from 'styled-components';
19
19
  interface Props {
20
20
  modalClassName?: ReactModal.Classes;
21
21
  pointerEventsOnBackdrop?: 'all' | 'none' | 'auto';
22
+ hideOverlay?: boolean;
22
23
  }
23
24
  export declare const ModalContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
24
25
  export declare const ModalHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/style-guide",
3
3
  "description": "Shared components for Manuscripts applications",
4
- "version": "3.3.2",
4
+ "version": "3.3.4",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",