@cypress-design/react-modal 0.2.0 → 0.3.0

package/.turbo/turbo-build.log

@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
 $ rollup -c ./rollup.config.mjs
 
 ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
-created ./dist/index.umd.js, ./dist/index.es.mjs in 16.7s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 16.2s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @cypress-design/react-modal
 
+## 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
+
+- [#288](https://github.com/cypress-io/cypress-design/pull/288) [`2c53ea8`](https://github.com/cypress-io/cypress-design/commit/2c53ea8ffa13baaf299bd3168de819166ad071ce) Thanks [@elevatebart](https://github.com/elevatebart)! - fix accessibility
+
 ## 0.2.0
 
 ### Minor Changes

package/Modal.tsx

@@ -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,74 +36,89 @@ 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(
     () => () => {
       freeBodyScroll()
     },
-    []
+    [],
+  )
+
+  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"
-          role="modal"
-        >
-          <div
-            className={clsx(
-              ClassModal,
-              fullscreen
-                ? ClassModalFullscreenDimensions
-                : ClassModalStandardDimensions
-            )}
+          <div className="grow" />
+          <button
+            aria-label="Close"
+            className={ClassCloseButton}
+            onClick={() => onClose?.()}
           >
-            <div className={ClassTitleBox}>
-              <div 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>,
-      document.body
+        <div className={ClassContent}>{children}</div>
+      </dialog>,
+      document.body,
     )
   )
 }

package/dist/Modal.d.ts.map

@@ -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,CA8EtC,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"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"}