@cypress-design/react-modal 0.0.3 → 0.1.0

package/dist/index.umd.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-require('clsx');
+var clsx = require('clsx');
 var iconsRegistry = require('@cypress-design/icon-registry');
 
 function _interopNamespaceDefault(e) {
@@ -31047,8 +31047,10 @@ function freeBodyScroll() {
 }
 
 const ClassBackDrop = 'fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.92] backdrop-blur';
-const ClassModalContainer = 'pointer-events-none fixed left-0 top-0 z-[1000020] flex h-full w-screen items-center justify-center overflow-hidden';
-const ClassModal = 'pointer-events-auto relative flex max-h-[80vh] min-w-[200px] flex-col rounded-lg border-4 border-gray-700 bg-white sm:min-w-[390px] sm:max-w-[70vw]';
+const ClassModalContainer = 'pointer-events-none fixed left-0 top-0 z-[1000020] h-full w-screen overflow-hidden flex items-center justify-center';
+const ClassModal = 'pointer-events-auto relative flex flex-col rounded-lg border-4 border-gray-700 bg-white';
+const ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] sm:max-w-[70vw] shrink-0';
+const ClassModalFullscreenDimensions = 'h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)]';
 const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] px-[24px]';
 const ClassTitle = 'text-[18px] font-medium leading-[28px] text-gray-900';
 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-
 const ClassContent = 'overflow-y-auto p-[16px]';
 
 var Modal = function (_a) {
-    var _b = _a.show, show = _b === void 0 ? false : _b, title = _a.title, helpLink = _a.helpLink, onClose = _a.onClose, children = _a.children;
+    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;
     React__namespace.useEffect(function () {
         if (show) {
             disableBodyScroll();
@@ -31073,7 +31075,9 @@ var Modal = function (_a) {
         reactDomExports.createPortal(React__namespace.createElement("div", null,
             React__namespace.createElement("div", { className: ClassBackDrop, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } }),
             React__namespace.createElement("div", { className: ClassModalContainer, tabIndex: -1, "aria-modal": "true", role: "modal" },
-                React__namespace.createElement("div", { className: ClassModal },
+                React__namespace.createElement("div", { className: clsx(ClassModal, fullscreen
+                        ? ClassModalFullscreenDimensions
+                        : ClassModalStandardDimensions) },
                     React__namespace.createElement("div", { className: ClassTitleBox },
                         React__namespace.createElement("div", { className: ClassTitle }, title),
                         helpLink ? React__namespace.createElement("div", { className: ClassHelpLinkDash }) : null,
@@ -31089,4 +31093,4 @@ var Modal = function (_a) {
 module.exports = Modal;
 //# sourceMappingURL=index.umd.js.map
 
-/* <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] flex h-full items-center justify-center overflow-hidden pointer-events-auto relative max-h-[80vh] min-w-[200px] flex-col rounded-lg border-4 border-gray-700 bg-white sm:min-w-[390px] sm:max-w-[70vw] shrink-0 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"> */
+/* <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"> */