@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/dist/index.umd.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
require('clsx');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
5
|
var iconsRegistry = require('@cypress-design/icon-registry');
|
|
6
6
|
|
|
7
7
|
function _interopNamespaceDefault(e) {
|
|
@@ -31047,8 +31047,10 @@ function freeBodyScroll() {
|
|
|
31047
31047
|
}
|
|
31048
31048
|
|
|
31049
31049
|
const ClassBackDrop = 'fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.92] backdrop-blur';
|
|
31050
|
-
const ClassModalContainer = 'pointer-events-none fixed left-0 top-0 z-[1000020]
|
|
31051
|
-
const ClassModal = 'pointer-events-auto relative flex
|
|
31050
|
+
const ClassModalContainer = 'pointer-events-none fixed left-0 top-0 z-[1000020] h-full w-screen overflow-hidden flex items-center justify-center';
|
|
31051
|
+
const ClassModal = 'pointer-events-auto relative flex flex-col rounded-lg border-4 border-gray-700 bg-white';
|
|
31052
|
+
const ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] sm:max-w-[70vw] shrink-0';
|
|
31053
|
+
const ClassModalFullscreenDimensions = 'h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)]';
|
|
31052
31054
|
const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] px-[24px]';
|
|
31053
31055
|
const ClassTitle = 'text-[18px] font-medium leading-[28px] text-gray-900';
|
|
31054
31056
|
const ClassHelpLinkDash = 'mx-[8px] h-[1px] w-[32px] bg-gray-100';
|
|
@@ -31057,7 +31059,7 @@ const ClassCloseButton = 'group rounded-full border-transparent p-[4px] outline-
|
|
|
31057
31059
|
const ClassContent = 'overflow-y-auto p-[16px]';
|
|
31058
31060
|
|
|
31059
31061
|
var Modal = function (_a) {
|
|
31060
|
-
var _b = _a.show, show = _b === void 0 ? false : _b, title = _a.title, helpLink = _a.helpLink, onClose = _a.onClose, children = _a.children;
|
|
31062
|
+
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;
|
|
31061
31063
|
React__namespace.useEffect(function () {
|
|
31062
31064
|
if (show) {
|
|
31063
31065
|
disableBodyScroll();
|
|
@@ -31069,23 +31071,26 @@ var Modal = function (_a) {
|
|
|
31069
31071
|
React__namespace.useEffect(function () { return function () {
|
|
31070
31072
|
freeBodyScroll();
|
|
31071
31073
|
}; }, []);
|
|
31072
|
-
return (
|
|
31073
|
-
|
|
31074
|
-
|
|
31075
|
-
React__namespace.createElement("div", { className:
|
|
31076
|
-
React__namespace.createElement("div", { className:
|
|
31077
|
-
|
|
31078
|
-
|
|
31079
|
-
|
|
31080
|
-
"
|
|
31081
|
-
React__namespace.createElement(
|
|
31082
|
-
|
|
31083
|
-
|
|
31084
|
-
|
|
31085
|
-
|
|
31074
|
+
return (show &&
|
|
31075
|
+
reactDomExports.createPortal(React__namespace.createElement("div", null,
|
|
31076
|
+
React__namespace.createElement("div", { className: ClassBackDrop, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } }),
|
|
31077
|
+
React__namespace.createElement("div", { className: ClassModalContainer, tabIndex: -1, "aria-modal": "true", role: "modal" },
|
|
31078
|
+
React__namespace.createElement("div", { className: clsx(ClassModal, fullscreen
|
|
31079
|
+
? ClassModalFullscreenDimensions
|
|
31080
|
+
: ClassModalStandardDimensions) },
|
|
31081
|
+
React__namespace.createElement("div", { className: ClassTitleBox },
|
|
31082
|
+
React__namespace.createElement("div", { className: ClassTitle }, title),
|
|
31083
|
+
helpLink ? React__namespace.createElement("div", { className: ClassHelpLinkDash }) : null,
|
|
31084
|
+
helpLink ? (React__namespace.createElement("a", { href: helpLink, className: ClassHelpLink },
|
|
31085
|
+
"Need help",
|
|
31086
|
+
React__namespace.createElement(IconActionQuestionMarkCircle, { className: "ml-[4px]", "stroke-color": "indigo-500", "fill-color": "indigo-100" }))) : null,
|
|
31087
|
+
React__namespace.createElement("div", { className: "grow" }),
|
|
31088
|
+
React__namespace.createElement("button", { "aria-label": "Close", className: ClassCloseButton, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } },
|
|
31089
|
+
React__namespace.createElement(IconActionDelete, { className: "children:transition-all", "stroke-color": "gray-400", "hover-stroke-color": "gray-700", interactiveColorsOnGroup: true }))),
|
|
31090
|
+
React__namespace.createElement("div", { className: ClassContent }, children)))), document.body));
|
|
31086
31091
|
};
|
|
31087
31092
|
|
|
31088
31093
|
module.exports = Modal;
|
|
31089
31094
|
//# sourceMappingURL=index.umd.js.map
|
|
31090
31095
|
|
|
31091
|
-
/* <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]
|
|
31096
|
+
/* <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"> */
|