@cypress-design/react-modal 0.0.2 → 0.1.0
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 +17 -0
- package/Modal.tsx +55 -48
- package/ModalReact.cy.tsx +8 -1
- package/ReadMe.md +13 -8
- package/dist/Modal.d.ts +1 -0
- package/dist/Modal.d.ts.map +1 -1
- package/dist/index.es.mjs +24 -19
- package/dist/index.es.mjs.map +1 -1
- package/dist/index.umd.js +24 -19
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -2
package/.turbo/turbo-build.log
CHANGED
|
@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
|
|
|
2
2
|
$ rollup -c ./rollup.config.mjs
|
|
3
3
|
[36m
|
|
4
4
|
[1m./index.ts[22m → [1m./dist/index.umd.js, ./dist/index.es.mjs[22m...[39m
|
|
5
|
-
[32mcreated [1m./dist/index.umd.js, ./dist/index.es.mjs[22m in [
|
|
5
|
+
[32mcreated [1m./dist/index.umd.js, ./dist/index.es.mjs[22m in [1m19.2s[22m[39m
|
|
6
6
|
$ tsc --project ./tsconfig.build.json
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @cypress-design/react-modal
|
|
2
2
|
|
|
3
|
+
## 0.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#270](https://github.com/cypress-io/cypress-design/pull/270) [`2200d4f`](https://github.com/cypress-io/cypress-design/commit/2200d4fcca11f40509051e942b0eea22e5ec38b1) Thanks [@elevatebart](https://github.com/elevatebart)! - add fullscreen prop to modal
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [[`2200d4f`](https://github.com/cypress-io/cypress-design/commit/2200d4fcca11f40509051e942b0eea22e5ec38b1)]:
|
|
12
|
+
- @cypress-design/constants-modal@0.1.0
|
|
13
|
+
|
|
14
|
+
## 0.0.3
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- [#265](https://github.com/cypress-io/cypress-design/pull/265) [`a69b7ee`](https://github.com/cypress-io/cypress-design/commit/a69b7ee3e7ca0900362b463f9925ba6ff6f4332f) Thanks [@elevatebart](https://github.com/elevatebart)! - avoid creating empty divs
|
|
19
|
+
|
|
3
20
|
## 0.0.2
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
package/Modal.tsx
CHANGED
|
@@ -12,6 +12,8 @@ import {
|
|
|
12
12
|
ClassHelpLink,
|
|
13
13
|
ClassHelpLinkDash,
|
|
14
14
|
ClassModal,
|
|
15
|
+
ClassModalFullscreenDimensions,
|
|
16
|
+
ClassModalStandardDimensions,
|
|
15
17
|
ClassModalContainer,
|
|
16
18
|
ClassTitle,
|
|
17
19
|
ClassTitleBox,
|
|
@@ -25,6 +27,7 @@ export interface ModalProps {
|
|
|
25
27
|
children?: React.ReactNode
|
|
26
28
|
show?: boolean
|
|
27
29
|
onClose?: () => void
|
|
30
|
+
fullscreen?: boolean
|
|
28
31
|
}
|
|
29
32
|
|
|
30
33
|
export const Modal: React.FC<ModalProps> = ({
|
|
@@ -33,6 +36,7 @@ export const Modal: React.FC<ModalProps> = ({
|
|
|
33
36
|
helpLink,
|
|
34
37
|
onClose,
|
|
35
38
|
children,
|
|
39
|
+
fullscreen = false,
|
|
36
40
|
}) => {
|
|
37
41
|
React.useEffect(() => {
|
|
38
42
|
if (show) {
|
|
@@ -50,56 +54,59 @@ export const Modal: React.FC<ModalProps> = ({
|
|
|
50
54
|
)
|
|
51
55
|
|
|
52
56
|
return (
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
<div className={ClassBackDrop} onClick={() => onClose?.()}></div>
|
|
58
|
-
) : null}
|
|
59
|
-
{show ? (
|
|
60
|
-
<div
|
|
61
|
-
className={ClassModalContainer}
|
|
62
|
-
tabIndex={-1}
|
|
63
|
-
aria-modal="true"
|
|
64
|
-
role="modal"
|
|
65
|
-
>
|
|
66
|
-
<div className={ClassModal}>
|
|
67
|
-
<div className={ClassTitleBox}>
|
|
68
|
-
<div className={ClassTitle}>{title}</div>
|
|
69
|
-
{helpLink ? <div className={ClassHelpLinkDash} /> : null}
|
|
70
|
-
{helpLink ? (
|
|
71
|
-
<a href={helpLink} className={ClassHelpLink}>
|
|
72
|
-
Need help
|
|
73
|
-
<IconActionQuestionMarkCircle
|
|
74
|
-
className="ml-[4px]"
|
|
75
|
-
stroke-color="indigo-500"
|
|
76
|
-
fill-color="indigo-100"
|
|
77
|
-
/>
|
|
78
|
-
</a>
|
|
79
|
-
) : null}
|
|
57
|
+
show &&
|
|
58
|
+
createPortal(
|
|
59
|
+
<div>
|
|
60
|
+
<div className={ClassBackDrop} onClick={() => onClose?.()}></div>
|
|
80
61
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
</div>
|
|
62
|
+
<div
|
|
63
|
+
className={ClassModalContainer}
|
|
64
|
+
tabIndex={-1}
|
|
65
|
+
aria-modal="true"
|
|
66
|
+
role="modal"
|
|
67
|
+
>
|
|
68
|
+
<div
|
|
69
|
+
className={clsx(
|
|
70
|
+
ClassModal,
|
|
71
|
+
fullscreen
|
|
72
|
+
? ClassModalFullscreenDimensions
|
|
73
|
+
: ClassModalStandardDimensions
|
|
74
|
+
)}
|
|
75
|
+
>
|
|
76
|
+
<div className={ClassTitleBox}>
|
|
77
|
+
<div className={ClassTitle}>{title}</div>
|
|
78
|
+
{helpLink ? <div className={ClassHelpLinkDash} /> : null}
|
|
79
|
+
{helpLink ? (
|
|
80
|
+
<a href={helpLink} className={ClassHelpLink}>
|
|
81
|
+
Need help
|
|
82
|
+
<IconActionQuestionMarkCircle
|
|
83
|
+
className="ml-[4px]"
|
|
84
|
+
stroke-color="indigo-500"
|
|
85
|
+
fill-color="indigo-100"
|
|
86
|
+
/>
|
|
87
|
+
</a>
|
|
88
|
+
) : null}
|
|
89
|
+
|
|
90
|
+
<div className="grow" />
|
|
91
|
+
<button
|
|
92
|
+
aria-label="Close"
|
|
93
|
+
className={ClassCloseButton}
|
|
94
|
+
onClick={() => onClose?.()}
|
|
95
|
+
>
|
|
96
|
+
<IconActionDelete
|
|
97
|
+
className="children:transition-all"
|
|
98
|
+
stroke-color="gray-400"
|
|
99
|
+
hover-stroke-color="gray-700"
|
|
100
|
+
interactiveColorsOnGroup
|
|
101
|
+
/>
|
|
102
|
+
</button>
|
|
97
103
|
</div>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
104
|
+
<div className={ClassContent}>{children}</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>,
|
|
108
|
+
document.body
|
|
109
|
+
)
|
|
103
110
|
)
|
|
104
111
|
}
|
|
105
112
|
|
package/ModalReact.cy.tsx
CHANGED
|
@@ -8,6 +8,7 @@ import assertions from '../assertions'
|
|
|
8
8
|
const ComponentUsingModal = (options: {
|
|
9
9
|
title?: string
|
|
10
10
|
helpLink?: string
|
|
11
|
+
fullscreen?: boolean
|
|
11
12
|
}) => {
|
|
12
13
|
const [visibleModal, setVisibleModal] = React.useState(false)
|
|
13
14
|
return (
|
|
@@ -32,7 +33,13 @@ const ComponentUsingModal = (options: {
|
|
|
32
33
|
}
|
|
33
34
|
|
|
34
35
|
describe('Modal', () => {
|
|
35
|
-
function mountStory(
|
|
36
|
+
function mountStory(
|
|
37
|
+
options: {
|
|
38
|
+
title?: string
|
|
39
|
+
helpLink?: string
|
|
40
|
+
fullscreen?: boolean
|
|
41
|
+
} = {}
|
|
42
|
+
) {
|
|
36
43
|
mount(<ComponentUsingModal {...options} />)
|
|
37
44
|
}
|
|
38
45
|
assertions(mountStory)
|
package/ReadMe.md
CHANGED
|
@@ -16,15 +16,20 @@ yarn add @cypress-design/react-modal
|
|
|
16
16
|
import React from 'react'
|
|
17
17
|
import Button from '@cypress-design/react-button'
|
|
18
18
|
import Modal from '@cypress-design/react-modal'
|
|
19
|
-
const [visible, setVisible] = React.useState(false)
|
|
20
19
|
|
|
21
20
|
export default () => {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
21
|
+
const [visible, setVisible] = React.useState(false)
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<>
|
|
25
|
+
<Modal show={visible} title="modal" onClose={() => setVisible(false)}>
|
|
26
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id perspiciatis
|
|
27
|
+
hic ad minima ex recusandae autem incidunt, perferendis, illo voluptatum
|
|
28
|
+
repudiandae iste voluptate reiciendis quam officiis voluptas laboriosam
|
|
29
|
+
eligendi explicabo!
|
|
30
|
+
</Modal>
|
|
31
|
+
<Button onClick={() => setVisible(true)}>Open Modal</Button>
|
|
32
|
+
</>
|
|
33
|
+
)
|
|
29
34
|
}
|
|
30
35
|
```
|
package/dist/Modal.d.ts
CHANGED
package/dist/Modal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"./","sources":["Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"./","sources":["Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuB9B,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA8EtC,CAAA;AAED,eAAe,KAAK,CAAA"}
|
package/dist/index.es.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import React__default from 'react';
|
|
3
|
-
import 'clsx';
|
|
3
|
+
import clsx from 'clsx';
|
|
4
4
|
import * as iconsRegistry from '@cypress-design/icon-registry';
|
|
5
5
|
import { ICON_COLOR_PROP_NAMES } from '@cypress-design/icon-registry';
|
|
6
6
|
|
|
@@ -31027,8 +31027,10 @@ function freeBodyScroll() {
|
|
|
31027
31027
|
}
|
|
31028
31028
|
|
|
31029
31029
|
const ClassBackDrop = 'fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.92] backdrop-blur';
|
|
31030
|
-
const ClassModalContainer = 'pointer-events-none fixed left-0 top-0 z-[1000020]
|
|
31031
|
-
const ClassModal = 'pointer-events-auto relative flex
|
|
31030
|
+
const ClassModalContainer = 'pointer-events-none fixed left-0 top-0 z-[1000020] h-full w-screen overflow-hidden flex items-center justify-center';
|
|
31031
|
+
const ClassModal = 'pointer-events-auto relative flex flex-col rounded-lg border-4 border-gray-700 bg-white';
|
|
31032
|
+
const ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] sm:max-w-[70vw] shrink-0';
|
|
31033
|
+
const ClassModalFullscreenDimensions = 'h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)]';
|
|
31032
31034
|
const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] px-[24px]';
|
|
31033
31035
|
const ClassTitle = 'text-[18px] font-medium leading-[28px] text-gray-900';
|
|
31034
31036
|
const ClassHelpLinkDash = 'mx-[8px] h-[1px] w-[32px] bg-gray-100';
|
|
@@ -31037,7 +31039,7 @@ const ClassCloseButton = 'group rounded-full border-transparent p-[4px] outline-
|
|
|
31037
31039
|
const ClassContent = 'overflow-y-auto p-[16px]';
|
|
31038
31040
|
|
|
31039
31041
|
var Modal = function (_a) {
|
|
31040
|
-
var _b = _a.show, show = _b === void 0 ? false : _b, title = _a.title, helpLink = _a.helpLink, onClose = _a.onClose, children = _a.children;
|
|
31042
|
+
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;
|
|
31041
31043
|
React.useEffect(function () {
|
|
31042
31044
|
if (show) {
|
|
31043
31045
|
disableBodyScroll();
|
|
@@ -31049,23 +31051,26 @@ var Modal = function (_a) {
|
|
|
31049
31051
|
React.useEffect(function () { return function () {
|
|
31050
31052
|
freeBodyScroll();
|
|
31051
31053
|
}; }, []);
|
|
31052
|
-
return (
|
|
31053
|
-
|
|
31054
|
-
|
|
31055
|
-
React.createElement("div", { className:
|
|
31056
|
-
React.createElement("div", { className:
|
|
31057
|
-
|
|
31058
|
-
|
|
31059
|
-
|
|
31060
|
-
"
|
|
31061
|
-
React.createElement(
|
|
31062
|
-
|
|
31063
|
-
|
|
31064
|
-
|
|
31065
|
-
|
|
31054
|
+
return (show &&
|
|
31055
|
+
reactDomExports.createPortal(React.createElement("div", null,
|
|
31056
|
+
React.createElement("div", { className: ClassBackDrop, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } }),
|
|
31057
|
+
React.createElement("div", { className: ClassModalContainer, tabIndex: -1, "aria-modal": "true", role: "modal" },
|
|
31058
|
+
React.createElement("div", { className: clsx(ClassModal, fullscreen
|
|
31059
|
+
? ClassModalFullscreenDimensions
|
|
31060
|
+
: ClassModalStandardDimensions) },
|
|
31061
|
+
React.createElement("div", { className: ClassTitleBox },
|
|
31062
|
+
React.createElement("div", { className: ClassTitle }, title),
|
|
31063
|
+
helpLink ? React.createElement("div", { className: ClassHelpLinkDash }) : null,
|
|
31064
|
+
helpLink ? (React.createElement("a", { href: helpLink, className: ClassHelpLink },
|
|
31065
|
+
"Need help",
|
|
31066
|
+
React.createElement(IconActionQuestionMarkCircle, { className: "ml-[4px]", "stroke-color": "indigo-500", "fill-color": "indigo-100" }))) : null,
|
|
31067
|
+
React.createElement("div", { className: "grow" }),
|
|
31068
|
+
React.createElement("button", { "aria-label": "Close", className: ClassCloseButton, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } },
|
|
31069
|
+
React.createElement(IconActionDelete, { className: "children:transition-all", "stroke-color": "gray-400", "hover-stroke-color": "gray-700", interactiveColorsOnGroup: true }))),
|
|
31070
|
+
React.createElement("div", { className: ClassContent }, children)))), document.body));
|
|
31066
31071
|
};
|
|
31067
31072
|
|
|
31068
31073
|
export { Modal as default };
|
|
31069
31074
|
//# sourceMappingURL=index.es.mjs.map
|
|
31070
31075
|
|
|
31071
|
-
/* <wind-keep class="ml-[4px] grow fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.92] backdrop-blur pointer-events-none z-[1000020]
|
|
31076
|
+
/* <wind-keep class="ml-[4px] grow fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.92] backdrop-blur pointer-events-none z-[1000020] h-full overflow-hidden flex items-center justify-center pointer-events-auto relative flex-col rounded-lg border-4 border-gray-700 bg-white max-h-[80vh] min-w-[200px] sm:min-w-[390px] sm:max-w-[70vw] shrink-0 h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)] justify-between rounded-t-md border-b border-gray-100 p-[16px] 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"> */
|