npm - @cypress-design/react-modal - Versions diffs - 0.2.1 → 1.0.0 - Mend

@cypress-design/react-modal 0.2.1 → 1.0.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.

Files changed (11) hide show

package/.turbo/turbo-build.log CHANGED Viewed

@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
 $ rollup -c ./rollup.config.mjs
 [36m
 [1m./index.ts[22m → [1m./dist/index.umd.js, ./dist/index.es.mjs[22m...[39m
-[32mcreated [1m./dist/index.umd.js, ./dist/index.es.mjs[22m in [1m47.3s[22m[39m
+[32mcreated [1m./dist/index.umd.js, ./dist/index.es.mjs[22m in [1m23.3s[22m[39m
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,28 @@
 # @cypress-design/react-modal
+## 1.0.0
+### Major Changes
+- [`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87) Thanks [@elevatebart](https://github.com/elevatebart)! - Create 1.0
+### Patch Changes
+- Updated dependencies [[`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87)]:
+  - @cypress-design/react-icon@1.0.0
+  - @cypress-design/constants-modal@1.0.0
+## 0.3.0
+### Minor Changes
+- [#351](https://github.com/cypress-io/cypress-design/pull/351) [`98322c8`](https://github.com/cypress-io/cypress-design/commit/98322c8ca62a62f3462457704a0d3a06beb84be2) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: build dialog using dialog html
+### Patch Changes
+- Updated dependencies [[`98322c8`](https://github.com/cypress-io/cypress-design/commit/98322c8ca62a62f3462457704a0d3a06beb84be2)]:
+  - @cypress-design/constants-modal@0.3.0
 ## 0.2.1
 ### Patch Changes

package/Modal.tsx CHANGED Viewed

@@ -6,7 +6,6 @@ import {
   IconActionDelete,
 } from '@cypress-design/react-icon'
 import {
-  ClassBackDrop,
   ClassCloseButton,
   ClassContent,
   ClassHelpLink,
@@ -14,7 +13,6 @@ import {
   ClassModal,
   ClassModalFullscreenDimensions,
   ClassModalStandardDimensions,
-  ClassModalContainer,
   ClassTitle,
   ClassTitleBox,
   disableBodyScroll,
@@ -38,13 +36,17 @@ export const Modal: React.FC<ModalProps> = ({
   children,
   fullscreen = false,
 }) => {
+  const dialogRef = React.useRef<HTMLDialogElement>(null)
   React.useEffect(() => {
     if (show) {
       disableBodyScroll()
+      dialogRef.current?.showModal()
     } else {
+      dialogRef.current?.close()
       freeBodyScroll()
     }
-  }, [show])
+  }, [show, onClose])
   React.useEffect(
     () => () => {
@@ -53,61 +55,69 @@ export const Modal: React.FC<ModalProps> = ({
     [],
   )
+  const closeOnClickBackdrop = React.useCallback<
+    React.MouseEventHandler<HTMLDialogElement>
+  >(
+    (event) => {
+      const rect = dialogRef.current?.getBoundingClientRect()
+      if (!rect) return
+      const isInDialog =
+        rect.top <= event.clientY &&
+        event.clientY <= rect.top + rect.height &&
+        rect.left <= event.clientX &&
+        event.clientX <= rect.left + rect.width
+      if (!isInDialog) {
+        onClose?.()
+      }
+    },
+    [onClose],
+  )
   return (
     show &&
     createPortal(
-      <div>
-        <div className={ClassBackDrop} onClick={() => onClose?.()}></div>
+      <dialog
+        ref={dialogRef}
+        className={clsx(
+          show ? ClassModal : null,
+          fullscreen
+            ? ClassModalFullscreenDimensions
+            : ClassModalStandardDimensions,
+        )}
+        onClick={closeOnClickBackdrop}
+      >
+        <div className={ClassTitleBox}>
+          <div id="cy_modal_label" className={ClassTitle}>
+            {title}
+          </div>
+          {helpLink ? <div className={ClassHelpLinkDash} /> : null}
+          {helpLink ? (
+            <a href={helpLink} className={ClassHelpLink}>
+              Need help
+              <IconActionQuestionMarkCircle
+                className="ml-[4px]"
+                stroke-color="indigo-500"
+                fill-color="indigo-100"
+              />
+            </a>
+          ) : null}
-        <div
-          className={ClassModalContainer}
-          tabIndex={-1}
-          aria-modal="true"
-          aria-labelledby="cy_modal_label"
-          role="dialog"
-        >
-          <div
-            className={clsx(
-              ClassModal,
-              fullscreen
-                ? ClassModalFullscreenDimensions
-                : ClassModalStandardDimensions,
-            )}
+          <div className="grow" />
+          <button
+            aria-label="Close"
+            className={ClassCloseButton}
+            onClick={() => onClose?.()}
           >
-            <div className={ClassTitleBox}>
-              <div id="cy_modal_label" className={ClassTitle}>
-                {title}
-              </div>
-              {helpLink ? <div className={ClassHelpLinkDash} /> : null}
-              {helpLink ? (
-                <a href={helpLink} className={ClassHelpLink}>
-                  Need help
-                  <IconActionQuestionMarkCircle
-                    className="ml-[4px]"
-                    stroke-color="indigo-500"
-                    fill-color="indigo-100"
-                  />
-                </a>
-              ) : null}
-              <div className="grow" />
-              <button
-                aria-label="Close"
-                className={ClassCloseButton}
-                onClick={() => onClose?.()}
-              >
-                <IconActionDelete
-                  className="children:transition-all"
-                  stroke-color="gray-400"
-                  hover-stroke-color="gray-700"
-                  interactiveColorsOnGroup
-                />
-              </button>
-            </div>
-            <div className={ClassContent}>{children}</div>
-          </div>
+            <IconActionDelete
+              className="children:transition-all"
+              stroke-color="gray-400"
+              hover-stroke-color="gray-700"
+              interactiveColorsOnGroup
+            />
+          </button>
         </div>
-      </div>,
+        <div className={ClassContent}>{children}</div>
+      </dialog>,
       document.body,
     )
   )

package/ModalReact.cy.tsx CHANGED Viewed

@@ -38,7 +38,7 @@ describe('Modal', () => {
       title?: string
       helpLink?: string
       fullscreen?: boolean
-    } = {}
+    } = {},
   ) {
     mount(<ComponentUsingModal {...options} />)
   }

package/dist/Modal.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
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,~~CAiFtC~~,CAAA;AAED,eAAe,KAAK,CAAA"}
1	+ {"version":3,"file":"Modal.d.ts","sourceRoot":"./","sources":["Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,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,CA6FtC,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/index.es.mjs CHANGED Viewed

@@ -7004,7 +7004,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;
@@ -10125,7 +10125,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);
@@ -10522,7 +10522,7 @@ function requireReactDom_development () {
 	  }
 	}
 	function getListenerSetKey(domEventName, capture) {
-	  return domEventName + "__" + (capture ? 'capture' : 'bubble');
+	  return domEventName + "__" + ('bubble');
 	}
 	var didWarnInvalidHydration = false;
@@ -30951,7 +30951,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 (!ICON_COLOR_PROP_NAMES.includes(attrName) &&
             attrName !== 'name') {
@@ -30962,6 +30962,7 @@ var compileReactIconProperties = function (_a) {
         }
         return newAttributes;
     }, {});
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(function () {
         var iconFileId = "".concat(name, "_").concat(size);
         if (defs) {
@@ -30975,9 +30976,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);
@@ -30999,12 +31004,12 @@ function useIconProps(props, iconBodiesAndDefs, availableSizes, name) {
 }
 var IconActionDelete = function (props) { return React.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.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")); };
@@ -31031,9 +31036,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]';
@@ -31045,37 +31048,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.useRef(null);
     React.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.useEffect(function () { return function () {
         freeBodyScroll();
     }; }, []);
+    var closeOnClickBackdrop = React.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.createElement("div", null,
-            React.createElement("div", { className: ClassBackDrop, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } }),
-            React.createElement("div", { className: ClassModalContainer, tabIndex: -1, "aria-modal": "true", "aria-labelledby": "cy_modal_label", role: "dialog" },
-                React.createElement("div", { className: clsx(ClassModal, fullscreen
-                        ? ClassModalFullscreenDimensions
-                        : ClassModalStandardDimensions) },
-                    React.createElement("div", { className: ClassTitleBox },
-                        React.createElement("div", { id: "cy_modal_label", className: ClassTitle }, title),
-                        helpLink ? React.createElement("div", { className: ClassHelpLinkDash }) : null,
-                        helpLink ? (React.createElement("a", { href: helpLink, className: ClassHelpLink },
-                            "Need help",
-                            React.createElement(IconActionQuestionMarkCircle, { className: "ml-[4px]", "stroke-color": "indigo-500", "fill-color": "indigo-100" }))) : null,
-                        React.createElement("div", { className: "grow" }),
-                        React.createElement("button", { "aria-label": "Close", className: ClassCloseButton, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } },
-                            React.createElement(IconActionDelete, { className: "children:transition-all", "stroke-color": "gray-400", "hover-stroke-color": "gray-700", interactiveColorsOnGroup: true }))),
-                    React.createElement("div", { className: ClassContent }, children)))), document.body));
+        reactDomExports.createPortal(React.createElement("dialog", { ref: dialogRef, className: clsx(show ? ClassModal : null, fullscreen
+                ? ClassModalFullscreenDimensions
+                : ClassModalStandardDimensions), onClick: closeOnClickBackdrop },
+            React.createElement("div", { className: ClassTitleBox },
+                React.createElement("div", { id: "cy_modal_label", className: ClassTitle }, title),
+                helpLink ? React.createElement("div", { className: ClassHelpLinkDash }) : null,
+                helpLink ? (React.createElement("a", { href: helpLink, className: ClassHelpLink },
+                    "Need help",
+                    React.createElement(IconActionQuestionMarkCircle, { className: "ml-[4px]", "stroke-color": "indigo-500", "fill-color": "indigo-100" }))) : null,
+                React.createElement("div", { className: "grow" }),
+                React.createElement("button", { "aria-label": "Close", className: ClassCloseButton, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } },
+                    React.createElement(IconActionDelete, { className: "children:transition-all", "stroke-color": "gray-400", "hover-stroke-color": "gray-700", interactiveColorsOnGroup: true }))),
+            React.createElement("div", { className: ClassContent }, children)), document.body));
 };
 export { Modal as default };
 //# sourceMappingURL=index.es.mjs.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"> */