@rango-dev/ui 0.36.1-next.11 → 0.36.1-next.12

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;AAkB3D,wBAAgB,KAAK,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,qBA4G7D"}
+{"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,qBAyG7D"}

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

@@ -1,5 +1,4 @@
 export declare const BackDrop: import("@stitches/react/types/styled-component").StyledComponent<"div", {
-    anchor?: "center" | "bottom" | "right" | undefined;
     active?: boolean | "true" | undefined;
 }, {
     xs: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAsCnB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAsCzB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAOf,CAAC;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAatB,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DASlB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAUjB,CAAC"}
+{"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAqBnB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAsDzB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAOf,CAAC;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAatB,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DASlB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAUjB,CAAC"}

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import type { BackDrop } from './Modal.styles';
+import type { ModalContainer } from './Modal.styles';
 import type { config } from '../../theme';
 import type * as Stitches from '@stitches/react';
-type BaseProps = Stitches.VariantProps<typeof BackDrop>;
+type BaseProps = Stitches.VariantProps<typeof ModalContainer>;
 type BaseAnchor = Exclude<BaseProps['anchor'], object>;
 export interface ModalPropTypes {
     title?: string;

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;CACxB"}
+{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,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,cAAc,CAAC,CAAC;AAC9D,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.11",
+  "version": "0.36.1-next.12",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

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

@@ -5,34 +5,17 @@ export const BackDrop = styled('div', {
   position: 'absolute',
   top: '0',
   left: '0',
+  right: '0',
+  bottom: '0',
   width: '100%',
   height: '100%',
   backgroundColor: 'transparent',
   zIndex: 10,
   borderRadius: '$primary',
-  display: 'flex',
   overflow: 'hidden',
   transition: 'background .35s',
 
   variants: {
-    anchor: {
-      bottom: {
-        justifyContent: 'end',
-        alignItems: 'end',
-        bottom: '0',
-      },
-      center: {
-        justifyContent: 'center',
-        alignItems: 'center',
-      },
-      right: {
-        right: '0',
-        left: 'unset',
-        borderTopRightRadius: '0',
-        borderBottomRightRadius: '0',
-        justifyContent: 'end',
-      },
-    },
     active: {
       true: {
         backgroundColor: 'color-mix(in srgb, $neutral500 70%, transparent)',
@@ -48,26 +31,26 @@ export const ModalContainer = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   zIndex: 9999999,
-  transform: 'translateY(100vh)',
-  transition: 'transform .45s ease-in-out',
+  position: 'absolute',
+  transition:
+    'transform .45s ease-in-out, top .45s ease-in-out, left .45s ease-in-out',
 
   variants: {
     anchor: {
-      bottom: {
-        width: '100%',
-        maxHeight: '95%',
-      },
-      center: { height: '100%' },
       right: {
-        borderTopRightRadius: '0',
-        borderBottomRightRadius: '0',
-        transform: 'translateX(100vw)',
+        left: '100%',
+      },
+      center: {
+        top: '100%',
+        left: '50%',
+        transform: 'translateX(-50%)',
+      },
+      bottom: {
+        top: '100%',
       },
     },
     active: {
-      true: {
-        transform: 'translateY(0)',
-      },
+      true: {},
     },
   },
   compoundVariants: [
@@ -75,7 +58,23 @@ export const ModalContainer = styled('div', {
       active: true,
       anchor: 'right',
       css: {
-        transform: 'translateX(0)',
+        transform: 'translateX(-100%)',
+      },
+    },
+    {
+      active: true,
+      anchor: 'center',
+      css: {
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+      },
+    },
+    {
+      active: true,
+      anchor: 'bottom',
+      css: {
+        transform: 'translateY(-100%)',
       },
     },
   ],

package/src/components/Modal/Modal.tsx

@@ -19,6 +19,9 @@ import {
   ModalHeader,
 } from './Modal.styles';
 
+const CLOSED_DELAY = 600;
+const OPEN_DELAY = 100;
+
 export function Modal(props: PropsWithChildren<ModalPropTypes>) {
   const {
     title,
@@ -39,8 +42,7 @@ export function Modal(props: PropsWithChildren<ModalPropTypes>) {
 
   const [active, setActive] = useState(false);
   const [isMount, setIsMount] = useState(false);
-
-  const ref = useRef<HTMLDivElement | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
@@ -49,29 +51,30 @@ 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);
+        }, OPEN_DELAY);
       } else {
         setActive(false);
+        timeoutRef.current = setTimeout(() => {
+          setIsMount(false);
+          container.style.removeProperty('overflow');
+        }, CLOSED_DELAY);
       }
     }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
   }, [open, container]);
 
   return (
@@ -82,14 +85,11 @@ export function Modal(props: PropsWithChildren<ModalPropTypes>) {
           <BackDrop
             active={active}
             onClick={handleBackDropClick}
-            anchor={anchor}
             css={styles?.root}>
             <ModalContainer
               active={active}
               css={styles?.container}
-              anchor={anchor}
-              onTransitionEnd={handleTransitionEnd}
-              ref={ref}>
+              anchor={anchor}>
               {header ?? (
                 <ModalHeader noTitle={!title && dismissible && !prefix}>
                   {prefix}

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

@@ -1,8 +1,8 @@
-import type { BackDrop } from './Modal.styles';
+import type { ModalContainer } from './Modal.styles';
 import type { config } from '../../theme';
 import type * as Stitches from '@stitches/react';
 
-type BaseProps = Stitches.VariantProps<typeof BackDrop>;
+type BaseProps = Stitches.VariantProps<typeof ModalContainer>;
 type BaseAnchor = Exclude<BaseProps['anchor'], object>;
 
 export interface ModalPropTypes {