@cypress-design/react-modal 1.0.1 → 1.0.2
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.
- package/.turbo/turbo-build.log +1 -1
- package/CHANGELOG.md +6 -0
- package/dist/index.es.mjs +31 -2
- package/dist/index.es.mjs.map +1 -1
- package/dist/index.umd.js +43 -14
- package/dist/index.umd.js.map +1 -1
- package/package.json +3 -3
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
$ yarn build:module && yarn build:types
|
|
2
2
|
$ rollup -c ./rollup.config.mjs
|
|
3
|
-
(node:
|
|
3
|
+
(node:4106) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
|
|
4
4
|
(Use `node --trace-warnings ...` to show where the warning was created)
|
|
5
5
|
[36m
|
|
6
6
|
[1m./index.ts[22m → [1m./dist/index.umd.js, ./dist/index.es.mjs[22m...[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @cypress-design/react-modal
|
|
2
2
|
|
|
3
|
+
## 1.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#454](https://github.com/cypress-io/cypress-design/pull/454) [`48a3f6c`](https://github.com/cypress-io/cypress-design/commit/48a3f6cc5957844de2a5164137a8cedc31abe673) Thanks [@elevatebart](https://github.com/elevatebart)! - make sure the constant packages roll up in the react components for tailwind class detection
|
|
8
|
+
|
|
3
9
|
## 1.0.1
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/dist/index.es.mjs
CHANGED
|
@@ -2,7 +2,36 @@ import * as React from 'react';
|
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { IconActionQuestionMarkCircle, IconActionDelete } from '@cypress-design/react-icon';
|
|
5
|
-
|
|
5
|
+
|
|
6
|
+
const ATTR_DATA_MODAL_SCROLL_TOP = 'data-modal-scroll-top';
|
|
7
|
+
const CY_MODAL_CLASS = 'cy-modal-overflow-hidden';
|
|
8
|
+
function disableBodyScroll() {
|
|
9
|
+
document.body.setAttribute(ATTR_DATA_MODAL_SCROLL_TOP, `${window.scrollY}`);
|
|
10
|
+
if (document.documentElement.clientWidth > window.innerWidth) {
|
|
11
|
+
document.documentElement.classList.add('cy-modal-overflow-scroll-x');
|
|
12
|
+
}
|
|
13
|
+
if (document.documentElement.clientHeight > window.innerHeight) {
|
|
14
|
+
document.documentElement.classList.add('cy-modal-overflow-scroll-y');
|
|
15
|
+
}
|
|
16
|
+
document.body.classList.add(CY_MODAL_CLASS);
|
|
17
|
+
}
|
|
18
|
+
function freeBodyScroll() {
|
|
19
|
+
const scrollY = parseInt(document.body.getAttribute(ATTR_DATA_MODAL_SCROLL_TOP) || '0');
|
|
20
|
+
document.body.classList.remove(CY_MODAL_CLASS);
|
|
21
|
+
document.documentElement.classList.remove('cy-modal-overflow-scroll-x');
|
|
22
|
+
document.documentElement.classList.remove('cy-modal-overflow-scroll-y');
|
|
23
|
+
window.scrollTo({ top: scrollY });
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const ClassModal = 'pointer-events-auto fixed flex flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white backdrop:bg-gray-900/[.80] backdrop:backdrop-blur-sm';
|
|
27
|
+
const ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] sm:max-w-[70vw] shrink-0';
|
|
28
|
+
const ClassModalFullscreenDimensions = 'h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)]';
|
|
29
|
+
const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] px-16px sm:px-[24px]';
|
|
30
|
+
const ClassTitle = 'text-[18px] font-medium leading-[28px] text-gray-900';
|
|
31
|
+
const ClassHelpLinkDash = 'mx-[8px] h-[1px] w-[32px] bg-gray-100';
|
|
32
|
+
const ClassHelpLink = 'flex items-center text-[16px] font-normal leading-[24px] text-indigo-500';
|
|
33
|
+
const ClassCloseButton = 'group rounded-full border-transparent p-[4px] outline-none';
|
|
34
|
+
const ClassContent = 'overflow-y-auto p-[16px] sm:px-[24px]';
|
|
6
35
|
|
|
7
36
|
var Modal = function (_a) {
|
|
8
37
|
var _b = _a.show, show = _b === void 0 ? false : _b, title = _a.title, helpLink = _a.helpLink, onClose = _a.onClose, children = _a.children, _c = _a.fullscreen, fullscreen = _c === void 0 ? false : _c;
|
|
@@ -53,4 +82,4 @@ var Modal = function (_a) {
|
|
|
53
82
|
export { Modal as default };
|
|
54
83
|
//# sourceMappingURL=index.es.mjs.map
|
|
55
84
|
|
|
56
|
-
/* <wind-keep class="ml-[4px] grow"> */
|
|
85
|
+
/* <wind-keep class="ml-[4px] grow pointer-events-auto fixed flex flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white backdrop:bg-gray-900/[.80] backdrop:backdrop-blur-sm max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] sm:max-w-[70vw] shrink-0 h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)] items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] sm:px-[24px] text-[18px] font-medium leading-[28px] text-gray-900 mx-[8px] h-[1px] w-[32px] bg-gray-100 text-[16px] font-normal leading-[24px] text-indigo-500 rounded-full border-transparent p-[4px] outline-none overflow-y-auto cy-modal-overflow-hidden cy-modal-overflow-scroll-x cy-modal-overflow-scroll-y"> */
|
package/dist/index.es.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.mjs","sources":["../Modal.tsx"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/bodyScroll.js","../../constants/dist/index.js","../Modal.tsx"],"sourcesContent":["const ATTR_DATA_MODAL_SCROLL_TOP = 'data-modal-scroll-top';\nconst CY_MODAL_CLASS = 'cy-modal-overflow-hidden';\nexport function disableBodyScroll() {\n document.body.setAttribute(ATTR_DATA_MODAL_SCROLL_TOP, `${window.scrollY}`);\n if (document.documentElement.clientWidth > window.innerWidth) {\n document.documentElement.classList.add('cy-modal-overflow-scroll-x');\n }\n if (document.documentElement.clientHeight > window.innerHeight) {\n document.documentElement.classList.add('cy-modal-overflow-scroll-y');\n }\n document.body.classList.add(CY_MODAL_CLASS);\n}\nexport function freeBodyScroll() {\n const scrollY = parseInt(document.body.getAttribute(ATTR_DATA_MODAL_SCROLL_TOP) || '0');\n document.body.classList.remove(CY_MODAL_CLASS);\n document.documentElement.classList.remove('cy-modal-overflow-scroll-x');\n document.documentElement.classList.remove('cy-modal-overflow-scroll-y');\n window.scrollTo({ top: scrollY });\n}\n","export const ClassModal = 'pointer-events-auto fixed flex flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white backdrop:bg-gray-900/[.80] backdrop:backdrop-blur-sm';\nexport const ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] sm:max-w-[70vw] shrink-0';\nexport const ClassModalFullscreenDimensions = 'h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)]';\nexport const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] px-16px sm:px-[24px]';\nexport const ClassTitle = 'text-[18px] font-medium leading-[28px] text-gray-900';\nexport const ClassHelpLinkDash = 'mx-[8px] h-[1px] w-[32px] bg-gray-100';\nexport const ClassHelpLink = 'flex items-center text-[16px] font-normal leading-[24px] text-indigo-500';\nexport const ClassCloseButton = 'group rounded-full border-transparent p-[4px] outline-none';\nexport const ClassContent = 'overflow-y-auto p-[16px] sm:px-[24px]';\nexport * from './bodyScroll';\n",null],"names":[],"mappings":"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"}
|
package/dist/index.umd.js
CHANGED
|
@@ -4,7 +4,6 @@ var React = require('react');
|
|
|
4
4
|
var reactDom = require('react-dom');
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var reactIcon = require('@cypress-design/react-icon');
|
|
7
|
-
var constantsModal = require('@cypress-design/constants-modal');
|
|
8
7
|
|
|
9
8
|
function _interopNamespaceDefault(e) {
|
|
10
9
|
var n = Object.create(null);
|
|
@@ -25,22 +24,52 @@ function _interopNamespaceDefault(e) {
|
|
|
25
24
|
|
|
26
25
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
27
26
|
|
|
27
|
+
const ATTR_DATA_MODAL_SCROLL_TOP = 'data-modal-scroll-top';
|
|
28
|
+
const CY_MODAL_CLASS = 'cy-modal-overflow-hidden';
|
|
29
|
+
function disableBodyScroll() {
|
|
30
|
+
document.body.setAttribute(ATTR_DATA_MODAL_SCROLL_TOP, `${window.scrollY}`);
|
|
31
|
+
if (document.documentElement.clientWidth > window.innerWidth) {
|
|
32
|
+
document.documentElement.classList.add('cy-modal-overflow-scroll-x');
|
|
33
|
+
}
|
|
34
|
+
if (document.documentElement.clientHeight > window.innerHeight) {
|
|
35
|
+
document.documentElement.classList.add('cy-modal-overflow-scroll-y');
|
|
36
|
+
}
|
|
37
|
+
document.body.classList.add(CY_MODAL_CLASS);
|
|
38
|
+
}
|
|
39
|
+
function freeBodyScroll() {
|
|
40
|
+
const scrollY = parseInt(document.body.getAttribute(ATTR_DATA_MODAL_SCROLL_TOP) || '0');
|
|
41
|
+
document.body.classList.remove(CY_MODAL_CLASS);
|
|
42
|
+
document.documentElement.classList.remove('cy-modal-overflow-scroll-x');
|
|
43
|
+
document.documentElement.classList.remove('cy-modal-overflow-scroll-y');
|
|
44
|
+
window.scrollTo({ top: scrollY });
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const ClassModal = 'pointer-events-auto fixed flex flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white backdrop:bg-gray-900/[.80] backdrop:backdrop-blur-sm';
|
|
48
|
+
const ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] sm:max-w-[70vw] shrink-0';
|
|
49
|
+
const ClassModalFullscreenDimensions = 'h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)]';
|
|
50
|
+
const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] px-16px sm:px-[24px]';
|
|
51
|
+
const ClassTitle = 'text-[18px] font-medium leading-[28px] text-gray-900';
|
|
52
|
+
const ClassHelpLinkDash = 'mx-[8px] h-[1px] w-[32px] bg-gray-100';
|
|
53
|
+
const ClassHelpLink = 'flex items-center text-[16px] font-normal leading-[24px] text-indigo-500';
|
|
54
|
+
const ClassCloseButton = 'group rounded-full border-transparent p-[4px] outline-none';
|
|
55
|
+
const ClassContent = 'overflow-y-auto p-[16px] sm:px-[24px]';
|
|
56
|
+
|
|
28
57
|
var Modal = function (_a) {
|
|
29
58
|
var _b = _a.show, show = _b === void 0 ? false : _b, title = _a.title, helpLink = _a.helpLink, onClose = _a.onClose, children = _a.children, _c = _a.fullscreen, fullscreen = _c === void 0 ? false : _c;
|
|
30
59
|
var dialogRef = React__namespace.useRef(null);
|
|
31
60
|
React__namespace.useEffect(function () {
|
|
32
61
|
var _a, _b;
|
|
33
62
|
if (show) {
|
|
34
|
-
|
|
63
|
+
disableBodyScroll();
|
|
35
64
|
(_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
36
65
|
}
|
|
37
66
|
else {
|
|
38
67
|
(_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.close();
|
|
39
|
-
|
|
68
|
+
freeBodyScroll();
|
|
40
69
|
}
|
|
41
70
|
}, [show, onClose]);
|
|
42
71
|
React__namespace.useEffect(function () { return function () {
|
|
43
|
-
|
|
72
|
+
freeBodyScroll();
|
|
44
73
|
}; }, []);
|
|
45
74
|
var closeOnClickBackdrop = React__namespace.useCallback(function (event) {
|
|
46
75
|
var _a;
|
|
@@ -56,22 +85,22 @@ var Modal = function (_a) {
|
|
|
56
85
|
}
|
|
57
86
|
}, [onClose]);
|
|
58
87
|
return (show &&
|
|
59
|
-
reactDom.createPortal(React__namespace.createElement("dialog", { ref: dialogRef, className: clsx(show ?
|
|
60
|
-
?
|
|
61
|
-
:
|
|
62
|
-
React__namespace.createElement("div", { className:
|
|
63
|
-
React__namespace.createElement("div", { id: "cy_modal_label", className:
|
|
64
|
-
helpLink ? React__namespace.createElement("div", { className:
|
|
65
|
-
helpLink ? (React__namespace.createElement("a", { href: helpLink, className:
|
|
88
|
+
reactDom.createPortal(React__namespace.createElement("dialog", { ref: dialogRef, className: clsx(show ? ClassModal : null, fullscreen
|
|
89
|
+
? ClassModalFullscreenDimensions
|
|
90
|
+
: ClassModalStandardDimensions), onClick: closeOnClickBackdrop },
|
|
91
|
+
React__namespace.createElement("div", { className: ClassTitleBox },
|
|
92
|
+
React__namespace.createElement("div", { id: "cy_modal_label", className: ClassTitle }, title),
|
|
93
|
+
helpLink ? React__namespace.createElement("div", { className: ClassHelpLinkDash }) : null,
|
|
94
|
+
helpLink ? (React__namespace.createElement("a", { href: helpLink, className: ClassHelpLink },
|
|
66
95
|
"Need help",
|
|
67
96
|
React__namespace.createElement(reactIcon.IconActionQuestionMarkCircle, { className: "ml-[4px]", "stroke-color": "indigo-500", "fill-color": "indigo-100" }))) : null,
|
|
68
97
|
React__namespace.createElement("div", { className: "grow" }),
|
|
69
|
-
React__namespace.createElement("button", { "aria-label": "Close", className:
|
|
98
|
+
React__namespace.createElement("button", { "aria-label": "Close", className: ClassCloseButton, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } },
|
|
70
99
|
React__namespace.createElement(reactIcon.IconActionDelete, { className: "children:transition-all", "stroke-color": "gray-400", "hover-stroke-color": "gray-700", interactiveColorsOnGroup: true }))),
|
|
71
|
-
React__namespace.createElement("div", { className:
|
|
100
|
+
React__namespace.createElement("div", { className: ClassContent }, children)), document.body));
|
|
72
101
|
};
|
|
73
102
|
|
|
74
103
|
module.exports = Modal;
|
|
75
104
|
//# sourceMappingURL=index.umd.js.map
|
|
76
105
|
|
|
77
|
-
/* <wind-keep class="ml-[4px] grow"> */
|
|
106
|
+
/* <wind-keep class="ml-[4px] grow pointer-events-auto fixed flex flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white backdrop:bg-gray-900/[.80] backdrop:backdrop-blur-sm max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] sm:max-w-[70vw] shrink-0 h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)] items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] sm:px-[24px] text-[18px] font-medium leading-[28px] text-gray-900 mx-[8px] h-[1px] w-[32px] bg-gray-100 text-[16px] font-normal leading-[24px] text-indigo-500 rounded-full border-transparent p-[4px] outline-none overflow-y-auto cy-modal-overflow-hidden cy-modal-overflow-scroll-x cy-modal-overflow-scroll-y"> */
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","sources":["../Modal.tsx"],"sourcesContent":[
|
|
1
|
+
{"version":3,"file":"index.umd.js","sources":["../../constants/dist/bodyScroll.js","../../constants/dist/index.js","../Modal.tsx"],"sourcesContent":["const ATTR_DATA_MODAL_SCROLL_TOP = 'data-modal-scroll-top';\nconst CY_MODAL_CLASS = 'cy-modal-overflow-hidden';\nexport function disableBodyScroll() {\n document.body.setAttribute(ATTR_DATA_MODAL_SCROLL_TOP, `${window.scrollY}`);\n if (document.documentElement.clientWidth > window.innerWidth) {\n document.documentElement.classList.add('cy-modal-overflow-scroll-x');\n }\n if (document.documentElement.clientHeight > window.innerHeight) {\n document.documentElement.classList.add('cy-modal-overflow-scroll-y');\n }\n document.body.classList.add(CY_MODAL_CLASS);\n}\nexport function freeBodyScroll() {\n const scrollY = parseInt(document.body.getAttribute(ATTR_DATA_MODAL_SCROLL_TOP) || '0');\n document.body.classList.remove(CY_MODAL_CLASS);\n document.documentElement.classList.remove('cy-modal-overflow-scroll-x');\n document.documentElement.classList.remove('cy-modal-overflow-scroll-y');\n window.scrollTo({ top: scrollY });\n}\n","export const ClassModal = 'pointer-events-auto fixed flex flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white backdrop:bg-gray-900/[.80] backdrop:backdrop-blur-sm';\nexport const ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] sm:max-w-[70vw] shrink-0';\nexport const ClassModalFullscreenDimensions = 'h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)]';\nexport const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] px-16px sm:px-[24px]';\nexport const ClassTitle = 'text-[18px] font-medium leading-[28px] text-gray-900';\nexport const ClassHelpLinkDash = 'mx-[8px] h-[1px] w-[32px] bg-gray-100';\nexport const ClassHelpLink = 'flex items-center text-[16px] font-normal leading-[24px] text-indigo-500';\nexport const ClassCloseButton = 'group rounded-full border-transparent p-[4px] outline-none';\nexport const ClassContent = 'overflow-y-auto p-[16px] sm:px-[24px]';\nexport * from './bodyScroll';\n",null],"names":["React","createPortal","IconActionQuestionMarkCircle","IconActionDelete"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cypress-design/react-modal",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"files": [
|
|
5
5
|
"*"
|
|
6
6
|
],
|
|
@@ -19,11 +19,11 @@
|
|
|
19
19
|
"build:types": "tsc --project ./tsconfig.build.json"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@cypress-design/
|
|
23
|
-
"@cypress-design/react-icon": "^1.1.0",
|
|
22
|
+
"@cypress-design/react-icon": "^1.2.0",
|
|
24
23
|
"clsx": "^2.1.1"
|
|
25
24
|
},
|
|
26
25
|
"devDependencies": {
|
|
26
|
+
"@cypress-design/constants-modal": "*",
|
|
27
27
|
"@cypress-design/css": "*"
|
|
28
28
|
},
|
|
29
29
|
"license": "MIT"
|