@rango-dev/ui 0.36.1-next.7 → 0.36.1-next.8

package/dist/widget/ui/src/components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAsC,MAAM,OAAO,CAAC;AAqB3D,wBAAgB,KAAK,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,qBAqH7D"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAsC,MAAM,OAAO,CAAC;AAkB3D,wBAAgB,KAAK,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,qBA4G7D"}

package/dist/widget/ui/src/components/Modal/Modal.types.d.ts

@@ -23,10 +23,6 @@ export interface ModalPropTypes {
     footer?: React.ReactNode;
     hasWatermark?: boolean;
     hasCloseIcon?: boolean;
-    transitionDuration?: {
-        enter?: number;
-        exit?: number;
-    };
 }
 export {};
 //# sourceMappingURL=Modal.types.d.ts.map

package/dist/widget/ui/src/components/Modal/Modal.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,KAAK,KAAK,QAAQ,MAAM,iBAAiB,CAAC;AAEjD,KAAK,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AACxD,KAAK,UAAU,GAAG,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC;AAEvD,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;QACnC,SAAS,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;QACtC,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;KACtC,CAAC;IACF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH"}
+{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,KAAK,KAAK,QAAQ,MAAM,iBAAiB,CAAC;AAEjD,KAAK,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AACxD,KAAK,UAAU,GAAG,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC;AAEvD,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;QACnC,SAAS,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;QACtC,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC;KACtC,CAAC;IACF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.36.1-next.7",
+  "version": "0.36.1-next.8",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/components/Modal/Modal.styles.ts

@@ -48,7 +48,7 @@ export const ModalContainer = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   zIndex: 9999999,
-  transform: 'translateY(100%)',
+  transform: 'translateY(100vh)',
   transition: 'transform .45s ease-in-out',
 
   variants: {
@@ -61,7 +61,7 @@ export const ModalContainer = styled('div', {
       right: {
         borderTopRightRadius: '0',
         borderBottomRightRadius: '0',
-        transform: 'translateX(100%)',
+        transform: 'translateX(100vw)',
       },
     },
     active: {

package/src/components/Modal/Modal.tsx

@@ -19,9 +19,6 @@ import {
   ModalHeader,
 } from './Modal.styles';
 
-const CLOSED_DELAY = 600;
-const OPEN_DELAY = 100;
-
 export function Modal(props: PropsWithChildren<ModalPropTypes>) {
   const {
     title,
@@ -38,12 +35,12 @@ export function Modal(props: PropsWithChildren<ModalPropTypes>) {
     footer,
     hasWatermark = true,
     hasCloseIcon = true,
-    transitionDuration,
   } = props;
 
   const [active, setActive] = useState(false);
   const [isMount, setIsMount] = useState(false);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const ref = useRef<HTMLDivElement | null>(null);
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
@@ -52,40 +49,29 @@ export function Modal(props: PropsWithChildren<ModalPropTypes>) {
       onClose();
     }
   };
+
+  const handleTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>) => {
+    if (!open && ref.current === e.target) {
+      setIsMount(false);
+      container.style.removeProperty('overflow');
+    }
+  };
+
+  useEffect(() => {
+    if (isMount) {
+      setActive(true);
+    }
+  }, [isMount]);
+
   useEffect(() => {
     if (container) {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
       if (open) {
         setIsMount(true);
         container.style.overflow = 'hidden';
-        timeoutRef.current = setTimeout(
-          () => {
-            setActive(true);
-          },
-          typeof transitionDuration?.enter !== 'undefined'
-            ? transitionDuration?.enter
-            : OPEN_DELAY
-        );
       } else {
         setActive(false);
-        timeoutRef.current = setTimeout(
-          () => {
-            setIsMount(false);
-            container.style.removeProperty('overflow');
-          },
-          typeof transitionDuration?.exit !== 'undefined'
-            ? transitionDuration?.exit
-            : CLOSED_DELAY
-        );
       }
     }
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
   }, [open, container]);
 
   return (
@@ -101,7 +87,9 @@ export function Modal(props: PropsWithChildren<ModalPropTypes>) {
             <ModalContainer
               active={active}
               css={styles?.container}
-              anchor={anchor}>
+              anchor={anchor}
+              onTransitionEnd={handleTransitionEnd}
+              ref={ref}>
               {header ?? (
                 <ModalHeader noTitle={!title && dismissible && !prefix}>
                   {prefix}

package/src/components/Modal/Modal.types.ts

@@ -24,8 +24,4 @@ export interface ModalPropTypes {
   footer?: React.ReactNode;
   hasWatermark?: boolean;
   hasCloseIcon?: boolean;
-  transitionDuration?: {
-    enter?: number;
-    exit?: number;
-  };
 }