@cypress-design/react-modal 0.2.1 → 1.0.0

package/dist/index.umd.js

@@ -7024,7 +7024,7 @@ function requireReactDom_development () {
 	  return a !== 0 && a < b ? a : b;
 	}
 	function lowerEventPriority(a, b) {
-	  return a === 0 || a > b ? a : b;
+	  return a > b ? a : b;
 	}
 	function isHigherEventPriority(a, b) {
 	  return a !== 0 && a < b;
@@ -10145,7 +10145,7 @@ function requireReactDom_development () {
 
 	  var isCapturePhaseListener = false;
 	  var listenerSet = getEventListenerSet(targetElement);
-	  var listenerSetKey = getListenerSetKey(domEventName, isCapturePhaseListener);
+	  var listenerSetKey = getListenerSetKey(domEventName);
 
 	  if (!listenerSet.has(listenerSetKey)) {
 	    addTrappedEventListener(targetElement, domEventName, IS_NON_DELEGATED, isCapturePhaseListener);
@@ -10542,7 +10542,7 @@ function requireReactDom_development () {
 	  }
 	}
 	function getListenerSetKey(domEventName, capture) {
-	  return domEventName + "__" + (capture ? 'capture' : 'bubble');
+	  return domEventName + "__" + ('bubble');
 	}
 
 	var didWarnInvalidHydration = false;
@@ -30971,7 +30971,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 var compileReactIconProperties = function (_a) {
-    var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name"]);
+    var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, alt = _a.alt, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name", "alt"]);
     var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
         if (!iconsRegistry.ICON_COLOR_PROP_NAMES.includes(attrName) &&
             attrName !== 'name') {
@@ -30982,6 +30982,7 @@ var compileReactIconProperties = function (_a) {
         }
         return newAttributes;
     }, {});
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     React__namespace.useEffect(function () {
         var iconFileId = "".concat(name, "_").concat(size);
         if (defs) {
@@ -30995,9 +30996,13 @@ var compileReactIconProperties = function (_a) {
             svgElement.innerHTML = defs;
             document.body.appendChild(svgElement);
         }
-    }, [defs]);
+    }, [defs, name, size]);
     var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
-            __html: body,
+            __html: alt
+                ? "<title>".concat(alt.replace(/[><]/g, function (s) {
+                    return s === '>' ? '&gt;' : '&lt;';
+                }), "</title>").concat(body)
+                : body,
         }, className: undefined }, filteredAttributes);
     if (attributes.className) {
         compiledClasses.push(attributes.className);
@@ -31019,12 +31024,12 @@ function useIconProps(props, iconBodiesAndDefs, availableSizes, name) {
 }
 var IconActionDelete = function (props) { return React__namespace.createElement('svg', useIconProps(props, {
     "12": {
-        "body": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M1 11 11 1M1 1l10 10\" class=\"icon-dark\"/>"
+        "body": "<path d=\"M1 11 11 1M1 1l10 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon-dark\"/>"
     }
 }, ["12"], "action-delete")); };
 var IconActionQuestionMarkCircle = function (props) { return React__namespace.createElement('svg', useIconProps(props, {
     "16": {
-        "body": "<path fill=\"#D0D2E0\" d=\"M13.657 13.657A8 8 0 1 1 2.343 2.343a8 8 0 0 1 11.314 11.314Z\" class=\"icon-light\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m1.845 2.535-.001.001A1 1 0 0 1 .146 1.48L1 2c-.854-.52-.854-.52-.853-.521v-.001l.001-.002.003-.004.005-.009.015-.023.042-.061A3.315 3.315 0 0 1 .87.707 3.452 3.452 0 0 1 3 0c1.099 0 1.911.432 2.414 1.113C5.879 1.743 6 2.478 6 3c0 .63-.173 1.147-.463 1.574-.272.402-.62.68-.871.873-.608.465-.655.516-.673.67a1 1 0 0 1-1.986-.234c.125-1.061.915-1.638 1.327-1.938l.117-.087c.229-.175.352-.29.43-.405C3.944 3.363 4 3.237 4 3c0-.259-.067-.525-.195-.7C3.714 2.179 3.526 2 3 2c-.437 0-.729.152-.913.294a1.316 1.316 0 0 0-.242.241ZM3 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" class=\"icon-dark\" clip-rule=\"evenodd\" style=\"transform:translate(5px,2.8px)\"/>"
+        "body": "<path d=\"M13.657 13.657A8 8 0 1 1 2.343 2.343a8 8 0 0 1 11.314 11.314Z\" fill=\"#D0D2E0\" class=\"icon-light\"/><path fill-rule=\"evenodd\" style=\"transform:translate(5px,2.8px)\" clip-rule=\"evenodd\" d=\"m1.845 2.535-.001.001A1 1 0 0 1 .146 1.48L1 2c-.854-.52-.854-.52-.853-.521v-.001l.001-.002.003-.004.005-.009.015-.023.042-.061A3.315 3.315 0 0 1 .87.707 3.452 3.452 0 0 1 3 0c1.099 0 1.911.432 2.414 1.113C5.879 1.743 6 2.478 6 3c0 .63-.173 1.147-.463 1.574-.272.402-.62.68-.871.873-.608.465-.655.516-.673.67a1 1 0 0 1-1.986-.234c.125-1.061.915-1.638 1.327-1.938l.117-.087c.229-.175.352-.29.43-.405C3.944 3.363 4 3.237 4 3c0-.259-.067-.525-.195-.7C3.714 2.179 3.526 2 3 2c-.437 0-.729.152-.913.294a1.316 1.316 0 0 0-.242.241ZM3 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" fill=\"currentColor\" class=\"icon-dark\"/>"
     }
 }, ["16"], "action-question-mark-circle")); };
 
@@ -31051,9 +31056,7 @@ function freeBodyScroll() {
     window.scrollTo({ top: scrollY });
 }
 
-const ClassBackDrop = 'fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.80] backdrop-blur-sm';
-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 outline outline-4 outline-gray-500/[.40] bg-white';
+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';
 const ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] 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-16px sm:px-[24px]';
@@ -31065,37 +31068,51 @@ const ClassContent = 'overflow-y-auto p-[16px] sm:px-[24px]';
 
 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, _c = _a.fullscreen, fullscreen = _c === void 0 ? false : _c;
+    var dialogRef = React__namespace.useRef(null);
     React__namespace.useEffect(function () {
+        var _a, _b;
         if (show) {
             disableBodyScroll();
+            (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.showModal();
         }
         else {
+            (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.close();
             freeBodyScroll();
         }
-    }, [show]);
+    }, [show, onClose]);
     React__namespace.useEffect(function () { return function () {
         freeBodyScroll();
     }; }, []);
+    var closeOnClickBackdrop = React__namespace.useCallback(function (event) {
+        var _a;
+        var rect = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect)
+            return;
+        var isInDialog = rect.top <= event.clientY &&
+            event.clientY <= rect.top + rect.height &&
+            rect.left <= event.clientX &&
+            event.clientX <= rect.left + rect.width;
+        if (!isInDialog) {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    }, [onClose]);
     return (show &&
-        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", "aria-labelledby": "cy_modal_label", role: "dialog" },
-                React__namespace.createElement("div", { className: clsx(ClassModal, fullscreen
-                        ? ClassModalFullscreenDimensions
-                        : ClassModalStandardDimensions) },
-                    React__namespace.createElement("div", { className: ClassTitleBox },
-                        React__namespace.createElement("div", { id: "cy_modal_label", className: ClassTitle }, title),
-                        helpLink ? React__namespace.createElement("div", { className: ClassHelpLinkDash }) : null,
-                        helpLink ? (React__namespace.createElement("a", { href: helpLink, className: ClassHelpLink },
-                            "Need help",
-                            React__namespace.createElement(IconActionQuestionMarkCircle, { className: "ml-[4px]", "stroke-color": "indigo-500", "fill-color": "indigo-100" }))) : null,
-                        React__namespace.createElement("div", { className: "grow" }),
-                        React__namespace.createElement("button", { "aria-label": "Close", className: ClassCloseButton, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } },
-                            React__namespace.createElement(IconActionDelete, { className: "children:transition-all", "stroke-color": "gray-400", "hover-stroke-color": "gray-700", interactiveColorsOnGroup: true }))),
-                    React__namespace.createElement("div", { className: ClassContent }, children)))), document.body));
+        reactDomExports.createPortal(React__namespace.createElement("dialog", { ref: dialogRef, className: clsx(show ? ClassModal : null, fullscreen
+                ? ClassModalFullscreenDimensions
+                : ClassModalStandardDimensions), onClick: closeOnClickBackdrop },
+            React__namespace.createElement("div", { className: ClassTitleBox },
+                React__namespace.createElement("div", { id: "cy_modal_label", className: ClassTitle }, title),
+                helpLink ? React__namespace.createElement("div", { className: ClassHelpLinkDash }) : null,
+                helpLink ? (React__namespace.createElement("a", { href: helpLink, className: ClassHelpLink },
+                    "Need help",
+                    React__namespace.createElement(IconActionQuestionMarkCircle, { className: "ml-[4px]", "stroke-color": "indigo-500", "fill-color": "indigo-100" }))) : null,
+                React__namespace.createElement("div", { className: "grow" }),
+                React__namespace.createElement("button", { "aria-label": "Close", className: ClassCloseButton, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } },
+                    React__namespace.createElement(IconActionDelete, { className: "children:transition-all", "stroke-color": "gray-400", "hover-stroke-color": "gray-700", interactiveColorsOnGroup: true }))),
+            React__namespace.createElement("div", { className: ClassContent }, children)), document.body));
 };
 
 module.exports = Modal;
 //# sourceMappingURL=index.umd.js.map
 
-/* <wind-keep class="ml-[4px] grow children:transition-all fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.80] backdrop-blur-sm pointer-events-none z-[1000020] h-full overflow-hidden flex items-center justify-center pointer-events-auto relative flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white 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)] 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"> */
+/* <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"> */