@rango-dev/ui 0.37.1-next.0 → 0.37.1-next.1

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

@@ -2,9 +2,9 @@ import type { IconHighlight } from './MessageBox.styles.js';
 import type * as Stitches from '@stitches/react';
 import type { ReactNode } from 'react';
 type BaseProps = Stitches.VariantProps<typeof IconHighlight>;
-type BaseTypes = Exclude<BaseProps['type'], object>;
+export type MessageType = Exclude<BaseProps['type'], object>;
 export interface PropTypes {
-    type: BaseTypes;
+    type: MessageType;
     title: string;
     description?: string | ReactNode;
     icon?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"MessageBox.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MessageBox/MessageBox.types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,KAAK,QAAQ,MAAM,iBAAiB,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC7D,KAAK,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AAEpD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB"}
+{"version":3,"file":"MessageBox.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MessageBox/MessageBox.types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,KAAK,QAAQ,MAAM,iBAAiB,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AAE7D,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB"}

package/dist/widget/ui/src/components/MessageBox/index.d.ts

@@ -1,2 +1,3 @@
 export * from './MessageBox.js';
+export type { MessageType } from './MessageBox.types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/MessageBox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MessageBox/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MessageBox/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -1,5 +1,5 @@
 import type { ModalPropTypes } from './Modal.types.js';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-export declare function Modal(props: PropsWithChildren<ModalPropTypes>): React.JSX.Element;
+export declare function Modal(props: PropsWithChildren<ModalPropTypes>): React.ReactPortal | null;
 //# sourceMappingURL=Modal.d.ts.map

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,kBAAkB,CAAC;AACvD,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"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAsC,MAAM,OAAO,CAAC;AAmB3D,wBAAgB,KAAK,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,4BAgI7D"}

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

@@ -0,0 +1,2 @@
+export declare function forceReflow(node: HTMLElement): number;
+//# sourceMappingURL=Modal.helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.helpers.ts"],"names":[],"mappings":"AACA,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,UAE5C"}

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

@@ -8,6 +8,7 @@ export interface ModalPropTypes {
     title?: string;
     open: boolean;
     onClose: () => void;
+    onExit?: () => void;
     anchor?: BaseAnchor;
     dismissible?: boolean;
     header?: React.ReactNode;

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,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAC7C,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"}
+{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAC7C,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,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.37.1-next.0",
+  "version": "0.37.1-next.1",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/components/MessageBox/MessageBox.types.tsx

@@ -3,10 +3,10 @@ import type * as Stitches from '@stitches/react';
 import type { ReactNode } from 'react';
 
 type BaseProps = Stitches.VariantProps<typeof IconHighlight>;
-type BaseTypes = Exclude<BaseProps['type'], object>;
+export type MessageType = Exclude<BaseProps['type'], object>;
 
 export interface PropTypes {
-  type: BaseTypes;
+  type: MessageType;
   title: string;
   description?: string | ReactNode;
   icon?: ReactNode;

package/src/components/MessageBox/index.ts

@@ -1 +1,2 @@
 export * from './MessageBox.js';
+export type { MessageType } from './MessageBox.types.js';

package/src/components/Modal/Modal.helpers.ts

@@ -0,0 +1,4 @@
+// https://github.com/reactjs/react-transition-group/blob/master/src/CSSTransition.js#L48-L55
+export function forceReflow(node: HTMLElement) {
+  return node.scrollTop;
+}

package/src/components/Modal/Modal.tsx

@@ -10,6 +10,7 @@ import { Divider } from '../Divider/index.js';
 import { IconButton } from '../IconButton/index.js';
 import { Typography } from '../Typography/index.js';
 
+import { forceReflow } from './Modal.helpers.js';
 import {
   BackDrop,
   Content,
@@ -19,14 +20,12 @@ import {
   ModalHeader,
 } from './Modal.styles.js';
 
-const CLOSED_DELAY = 600;
-const OPEN_DELAY = 100;
-
 export function Modal(props: PropsWithChildren<ModalPropTypes>) {
   const {
     title,
     open,
     onClose,
+    onExit,
     styles,
     anchor = 'bottom',
     container = document.body,
@@ -40,9 +39,14 @@ export function Modal(props: PropsWithChildren<ModalPropTypes>) {
     hasCloseIcon = true,
   } = props;
 
-  const [active, setActive] = useState(false);
-  const [isMount, setIsMount] = useState(false);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [status, setStatus] = useState<
+    'unmounted' | 'mounted' | 'activated' | 'deactivated'
+  >('unmounted');
+  const active = status === 'activated';
+  const isMount =
+    status == 'mounted' || status === 'activated' || status === 'deactivated';
+  const modalContainerRef = useRef<HTMLElement | null>(null);
+  const exitCallbackRef = useRef<ModalPropTypes['onExit']>();
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
@@ -51,80 +55,97 @@ export function Modal(props: PropsWithChildren<ModalPropTypes>) {
       onClose();
     }
   };
+
   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);
+    exitCallbackRef.current = onExit;
+  }, [onExit]);
+
+  useEffect(() => {
+    if (exitCallbackRef.current) {
+      modalContainerRef.current?.addEventListener(
+        'transitionend',
+        exitCallbackRef.current
+      );
+    }
+
+    if (!open) {
+      if (status === 'activated') {
+        setStatus('deactivated');
+        modalContainerRef.current?.addEventListener('transitionend', () => {
+          setStatus('unmounted');
           container.style.removeProperty('overflow');
-        }, CLOSED_DELAY);
+        });
+      } else {
+        setStatus('unmounted');
       }
+    } else {
+      setStatus('mounted');
+      container.style.overflow = 'hidden';
     }
+
     return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
+      if (exitCallbackRef.current) {
+        modalContainerRef.current?.removeEventListener(
+          'transitionend',
+          exitCallbackRef.current
+        );
       }
     };
-  }, [open, container]);
-
-  return (
-    <>
-      {isMount &&
-        container &&
-        createPortal(
-          <BackDrop
-            active={active}
-            onClick={handleBackDropClick}
-            css={styles?.root}>
-            <ModalContainer
-              active={active}
-              css={styles?.container}
-              anchor={anchor}>
-              {header ?? (
-                <ModalHeader noTitle={!title && dismissible && !prefix}>
-                  {prefix}
-                  {title && (
-                    <Typography variant="title" size="small">
-                      {title}
-                    </Typography>
-                  )}
-                  <Flex>
-                    {suffix}
-                    {dismissible && hasCloseIcon && (
-                      <IconButton onClick={onClose} variant="ghost">
-                        <CloseIcon color="gray" size={14} />
-                      </IconButton>
-                    )}
-                  </Flex>
-                </ModalHeader>
+  }, [open]);
+
+  useEffect(() => {
+    if (!!container && isMount) {
+      if (modalContainerRef.current) {
+        forceReflow(modalContainerRef.current);
+      }
+      setStatus('activated');
+    }
+  }, [isMount, container]);
+
+  if (status === 'unmounted' || !container) {
+    return null;
+  }
+
+  return createPortal(
+    <BackDrop active={active} onClick={handleBackDropClick} css={styles?.root}>
+      <ModalContainer
+        active={active}
+        css={styles?.container}
+        anchor={anchor}
+        ref={(ref) => (modalContainerRef.current = ref)}>
+        {header ?? (
+          <ModalHeader noTitle={!title && dismissible && !prefix}>
+            {prefix}
+            {title && (
+              <Typography variant="title" size="small">
+                {title}
+              </Typography>
+            )}
+            <Flex>
+              {suffix}
+              {dismissible && hasCloseIcon && (
+                <IconButton onClick={onClose} variant="ghost">
+                  <CloseIcon color="gray" size={14} />
+                </IconButton>
               )}
-              <Content css={styles?.content}>{children}</Content>
-
-              <Footer css={styles?.footer}>
-                {footer && <div className="footer__content">{footer}</div>}
-
-                <div
-                  className={`footer__logo ${
-                    hasWatermark ? 'logo__show' : 'logo__hidden'
-                  }`}>
-                  <Divider size={12} />
-                  <BottomLogo />
-                </div>
-              </Footer>
-            </ModalContainer>
-          </BackDrop>,
-          container
+            </Flex>
+          </ModalHeader>
         )}
-    </>
+        <Content css={styles?.content}>{children}</Content>
+
+        <Footer css={styles?.footer}>
+          {footer && <div className="footer__content">{footer}</div>}
+
+          <div
+            className={`footer__logo ${
+              hasWatermark ? 'logo__show' : 'logo__hidden'
+            }`}>
+            <Divider size={12} />
+            <BottomLogo />
+          </div>
+        </Footer>
+      </ModalContainer>
+    </BackDrop>,
+    container
   );
 }

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

@@ -9,6 +9,7 @@ export interface ModalPropTypes {
   title?: string;
   open: boolean;
   onClose: () => void;
+  onExit?: () => void;
   anchor?: BaseAnchor;
   dismissible?: boolean;
   header?: React.ReactNode;