@manuscripts/style-guide 3.5.27 → 3.5.28

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 (4) hide show
  1. package/dist/cjs/components/StyledModal.js +17 -4
  2. package/dist/es/components/StyledModal.js +15 -3
  3. package/dist/types/components/StyledModal.d.ts +1 -0
  4. package/package.json +1 -1
package/dist/cjs/components/StyledModal.js CHANGED
@@ -33,14 +33,14 @@ var __importStar = (this && this.__importStar) || (function () {
33
33
  };
34
34
  })();
35
35
  Object.defineProperty(exports, "__esModule", { value: true });
36
- 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;
36
+ exports.ModalTitle = exports.ModalCardBody = exports.ScrollableModalContent = exports.ModelContent = exports.ModalSidebarTitle = exports.ModalSidebarHeader = exports.ModalSidebar = exports.ModalBody = exports.CloseButton = exports.ModalHeader = exports.ModalContainer = exports.StyledModal = exports.StyledModalContent = void 0;
37
37
  const jsx_runtime_1 = require("react/jsx-runtime");
38
38
  const react_1 = require("react");
39
39
  const react_dom_1 = require("react-dom");
40
40
  const styled_components_1 = __importStar(require("styled-components"));
41
41
  const Button_1 = require("./Button");
42
42
  const Sidebar_1 = require("./Sidebar");
43
- const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, }) => {
43
+ const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, }) => {
44
44
  const dialogRef = (0, react_1.useRef)(null);
45
45
  const closedByCancelRef = (0, react_1.useRef)(false);
46
46
  (0, react_1.useEffect)(() => {
@@ -49,7 +49,12 @@ const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true,
49
49
  return;
50
50
  }
51
51
  if (isOpen && !dialog.open) {
52
- dialog.showModal();
52
+ if (hideOverlay) {
53
+ dialog.show();
54
+ }
55
+ else {
56
+ dialog.showModal();
57
+ }
53
58
  }
54
59
  else if (!isOpen && dialog.open) {
55
60
  dialog.close();
@@ -87,7 +92,14 @@ const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true,
87
92
  onRequestClose?.();
88
93
  }
89
94
  };
90
- return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(Dialog, { ref: dialogRef, onClick: handleBackdropClick, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className ? `Modal ${className}` : 'Modal', style: style?.content, children: children }), document.body);
95
+ return ((0, jsx_runtime_1.jsx)(Dialog, { ref: dialogRef, onClick: e => {
96
+ e.stopPropagation();
97
+ handleBackdropClick(e);
98
+ }, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className ? `Modal ${className}` : 'Modal', style: style?.content, children: children }));
99
+ };
100
+ exports.StyledModalContent = StyledModalContent;
101
+ const StyledModal = (props) => {
102
+ return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.StyledModalContent, { ...props }), document.body);
91
103
  };
92
104
  exports.StyledModal = StyledModal;
93
105
  const Dialog = styled_components_1.default.dialog `
@@ -97,6 +109,7 @@ const Dialog = styled_components_1.default.dialog `
97
109
  outline: none;
98
110
  padding: 0;
99
111
  overflow: visible;
112
+ z-index: 100;
100
113
  opacity: 1;
101
114
  transition:
102
115
  opacity 0.5s ease-in-out,
package/dist/es/components/StyledModal.js CHANGED
@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
4
4
  import styled, { css } from 'styled-components';
5
5
  import { RoundIconButton } from './Button';
6
6
  import { SidebarStyles } from './Sidebar';
7
- export const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, }) => {
7
+ export const StyledModalContent = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, }) => {
8
8
  const dialogRef = useRef(null);
9
9
  const closedByCancelRef = useRef(false);
10
10
  useEffect(() => {
@@ -13,7 +13,12 @@ export const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick
13
13
  return;
14
14
  }
15
15
  if (isOpen && !dialog.open) {
16
- dialog.showModal();
16
+ if (hideOverlay) {
17
+ dialog.show();
18
+ }
19
+ else {
20
+ dialog.showModal();
21
+ }
17
22
  }
18
23
  else if (!isOpen && dialog.open) {
19
24
  dialog.close();
@@ -51,7 +56,13 @@ export const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick
51
56
  onRequestClose?.();
52
57
  }
53
58
  };
54
- return createPortal(_jsx(Dialog, { ref: dialogRef, onClick: handleBackdropClick, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className ? `Modal ${className}` : 'Modal', style: style?.content, children: children }), document.body);
59
+ return (_jsx(Dialog, { ref: dialogRef, onClick: e => {
60
+ e.stopPropagation();
61
+ handleBackdropClick(e);
62
+ }, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className ? `Modal ${className}` : 'Modal', style: style?.content, children: children }));
63
+ };
64
+ export const StyledModal = (props) => {
65
+ return createPortal(_jsx(StyledModalContent, { ...props }), document.body);
55
66
  };
56
67
  const Dialog = styled.dialog `
57
68
  background: transparent;
@@ -60,6 +71,7 @@ const Dialog = styled.dialog `
60
71
  outline: none;
61
72
  padding: 0;
62
73
  overflow: visible;
74
+ z-index: 100;
63
75
  opacity: 1;
64
76
  transition:
65
77
  opacity 0.5s ease-in-out,
package/dist/types/components/StyledModal.d.ts CHANGED
@@ -26,6 +26,7 @@ interface StyledModalProps {
26
26
  content?: React.CSSProperties;
27
27
  };
28
28
  }
29
+ export declare const StyledModalContent: React.FC<StyledModalProps>;
29
30
  export declare const StyledModal: React.FC<StyledModalProps>;
30
31
  export declare const ModalContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
31
32
  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.5.27",
4
+ "version": "3.5.28",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",