@cypress-design/react-modal 0.0.2 → 0.0.3

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 17s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 44.5s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cypress-design/react-modal
 
+## 0.0.3
+
+### Patch Changes
+
+- [#265](https://github.com/cypress-io/cypress-design/pull/265) [`a69b7ee`](https://github.com/cypress-io/cypress-design/commit/a69b7ee3e7ca0900362b463f9925ba6ff6f4332f) Thanks [@elevatebart](https://github.com/elevatebart)! - avoid creating empty divs
+
 ## 0.0.2
 
 ### Patch Changes

package/Modal.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { createPortal } from 'react-dom'
-import clsx from 'clsx'
 import {
   IconActionQuestionMarkCircle,
   IconActionDelete,
@@ -50,56 +49,52 @@ export const Modal: React.FC<ModalProps> = ({
   )
 
   return (
-    <>
-      {createPortal(
-        <div>
-          {show ? (
-            <div className={ClassBackDrop} onClick={() => onClose?.()}></div>
-          ) : null}
-          {show ? (
-            <div
-              className={ClassModalContainer}
-              tabIndex={-1}
-              aria-modal="true"
-              role="modal"
-            >
-              <div className={ClassModal}>
-                <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}
+    show &&
+    createPortal(
+      <div>
+        <div className={ClassBackDrop} onClick={() => onClose?.()}></div>
 
-                  <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>
+        <div
+          className={ClassModalContainer}
+          tabIndex={-1}
+          aria-modal="true"
+          role="modal"
+        >
+          <div className={ClassModal}>
+            <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>
-          ) : null}
-        </div>,
-        document.body
-      )}
-    </>
+            <div className={ClassContent}>{children}</div>
+          </div>
+        </div>
+      </div>,
+      document.body
+    )
   )
 }
 

package/ReadMe.md

@@ -16,15 +16,20 @@ yarn add @cypress-design/react-modal
 import React from 'react'
 import Button from '@cypress-design/react-button'
 import Modal from '@cypress-design/react-modal'
-const [visible, setVisible] = React.useState(false)
 
 export default () => {
-  return (<Modal show={visible} title="modal" onClose={() => setVisible(false)}>
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Id perspiciatis hic
-    ad minima ex recusandae autem incidunt, perferendis, illo voluptatum
-    repudiandae iste voluptate reiciendis quam officiis voluptas laboriosam
-    eligendi explicabo!
-  </Modal>
-  <Button @click={() => setVisible(true)}>Open Modal</Button>)
+  const [visible, setVisible] = React.useState(false)
+
+  return (
+    <>
+      <Modal show={visible} title="modal" onClose={() => setVisible(false)}>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Id perspiciatis
+        hic ad minima ex recusandae autem incidunt, perferendis, illo voluptatum
+        repudiandae iste voluptate reiciendis quam officiis voluptas laboriosam
+        eligendi explicabo!
+      </Modal>
+      <Button onClick={() => setVisible(true)}>Open Modal</Button>
+    </>
+  )
 }
 ```

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;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;CACrB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0EtC,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"./","sources":["Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoB9B,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;CACrB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAsEtC,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/index.es.mjs

@@ -31049,20 +31049,21 @@ var Modal = function (_a) {
     React.useEffect(function () { return function () {
         freeBodyScroll();
     }; }, []);
-    return (React.createElement(React.Fragment, null, reactDomExports.createPortal(React.createElement("div", null,
-        show ? (React.createElement("div", { className: ClassBackDrop, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } })) : null,
-        show ? (React.createElement("div", { className: ClassModalContainer, tabIndex: -1, "aria-modal": "true", role: "modal" },
-            React.createElement("div", { className: ClassModal },
-                React.createElement("div", { className: ClassTitleBox },
-                    React.createElement("div", { 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)))) : null), document.body)));
+    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", role: "modal" },
+                React.createElement("div", { className: ClassModal },
+                    React.createElement("div", { className: ClassTitleBox },
+                        React.createElement("div", { 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 };