@platformatic/ui-components 0.1.146 → 0.1.148

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.146",
+  "version": "0.1.148",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/Modal.jsx

@@ -1,5 +1,5 @@
 'use strict'
-import React from 'react'
+import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
 import ButtonFullRounded from './ButtonFullRounded'
 import useEscapeKey from '../hooks/useEscapeKey'
@@ -41,8 +41,8 @@ function Modal ({
   let modalClassName = `${styles.modal}`
   modalClassName += ' ' + styles[`modal--${layout}`]
   modalClassName += ' ' + styles[`modal--${size}`]
-
   let buttonFullRoundedClassName
+  const blurRef = useRef()
 
   const headerClassName = styles[`header--${layout}`]
   let modalCoverClassName = `${styles.container} ${styles.fullscreen} `
@@ -66,7 +66,6 @@ function Modal ({
     default:
       break
   }
-
   useEscapeKey(() => setIsOpen(false))
   let whichModal = <></>
 
@@ -80,12 +79,18 @@ function Modal ({
     return <Logo width={100} heigth={80} color={MAIN_DARK_BLUE} />
   }
 
+  function closeModal (event) {
+    if (event.target === blurRef.current) {
+      setIsOpen(false)
+    }
+  }
+
   switch (layout) {
     case MODAL_POPUP_V2:
       whichModal = (
-        <>
-          <div className={`${styles['blur-fixed']}`} onClick={() => setIsOpen(false)} />
-          <div className={`${styles.container} ${styles.centered}`}>
+
+        <div className={`${styles['blur-fixed']}`} onClick={(event) => closeModal(event)} ref={blurRef}>
+          <div className={styles.content}>
             <div className={modalClassName}>
               <div className={headerClassName}>
                 <div className={titleClassName}>{title}</div>
@@ -96,7 +101,8 @@ function Modal ({
               </div>
             </div>
           </div>
-        </>
+        </div>
+
       )
       break
     case MODAL_POPUP:

package/src/components/Modal.module.css

@@ -1,12 +1,18 @@
 .blur {
-  @apply fixed top-[50%] left-[50%] w-full h-screen translate-x-[-50%] translate-y-[-50%] z-10;
+  @apply fixed top-0 left-0 w-full h-screen z-20;
   background-color: rgba(0, 0, 0, 0.75);
 }
 .blur-absolute {
   @apply absolute top-0 left-0 w-full h-full z-10 bg-rich-black/75;
 }
 .blur-fixed {
-  @apply fixed top-0 left-0 w-screen h-full z-10 bg-rich-black/75;
+  @apply fixed top-0 left-0 w-screen h-full z-20 bg-rich-black/75 flex justify-center items-center;
+}
+.fixedContainer {
+  @apply fixed top-0 left-0 w-full h-screen z-20 ;
+}
+.content {
+  @apply fixed top-0 h-[100vH] flex justify-center items-center ;
 }
 
 .container {
@@ -52,7 +58,7 @@
   @apply inline-flex items-center;
 }
 .modal--small {
-  @apply w-[calc(100vW-2rem)] md:min-w-[480px] md:max-w-[480px];
+  @apply w-auto md:min-w-[480px] md:max-w-[480px];
 }
 .modal--medium {
   @apply w-[calc(100vW-2rem)] md:min-w-[480px] md:max-w-[480px] lg:min-w-[880px] lg:max-w-[880px];

package/src/components/ModalDirectional.module.css

@@ -1,5 +1,5 @@
 .blur {
-  @apply absolute top-0 left-0 w-full h-full z-10 bg-rich-black/75;
+  @apply fixed top-0 left-0 w-full h-full z-10 bg-rich-black/75;
 }
 .container {
   @apply z-20 fixed top-0 -right-[100%] min-h-full h-full bg-rich-black border-solid border-white border-l; 
@@ -23,7 +23,7 @@
   @apply flex items-center gap-x-2 pb-4;
 }
 .modalLefty {
-  @apply p-5 lg:py-20 lg:px-[7.5rem] h-[calc(100%-42px)] lg:h-[calc(100%-10rem)];
+  @apply p-5 xl:py-20 xl:px-[7.5rem] h-[calc(100%-2rem)] xl:h-[calc(100%-10rem)];
 }
 
 @keyframes come-in {

package/src/stories/Modal.stories.jsx

@@ -28,13 +28,20 @@ export default {
 
 const Template = (args) => {
   const [isOpen, setIsOpen] = useState(false)
+  const [isOpenInside, setIsOpenInside] = useState(false)
   const { text, ...rest } = args
   return (
-    <main>
+    <main style={{ height: '1440px', overflow: 'scroll' }}>
       <BorderedBox>This Is another Content</BorderedBox>
-      <ContentThatLoads />
       <Button color={MAIN_GREEN} backgroundColor={MAIN_DARK_BLUE} onClick={() => setIsOpen(true)} label='Open Modal' />
       {isOpen && <Modal setIsOpen={setIsOpen} {...rest}>{text}</Modal>}
+
+      <BorderedBox style={{ position: 'relative' }}>
+        <p>This Is another Component with Modal inside</p>
+
+        <Button color={MAIN_GREEN} backgroundColor={MAIN_DARK_BLUE} onClick={() => setIsOpenInside(true)} label='Open Modal Inside' />
+        {isOpenInside && <Modal setIsOpen={setIsOpenInside} {...rest}>{text}</Modal>}
+      </BorderedBox>
     </main>
   )
 }