@rango-dev/ui 0.28.2-next.6 → 0.28.2-next.7

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAAoB,MAAM,OAAO,CAAC;AAiBzC,eAAO,MAAM,KAAK,UAAW,UAAU,sBAkEtC,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAmBnD,eAAO,MAAM,KAAK,UAAW,UAAU,sBAyFtC,CAAC"}

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

@@ -1,2 +1,6 @@
 export declare function idGenerator(): () => number;
+export declare const TOAST_UNMOUNT_DELAY = 500;
+export declare const TOAST_TRANSITION_DURATION = 300;
+export declare const HOVER_TRANSITION_DURATION = 200;
+export declare const TOAST_HIDE_DELAY = 200;
 //# sourceMappingURL=Toast.helpers.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.helpers.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,iBAM1B"}
+{"version":3,"file":"Toast.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.helpers.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,iBAM1B;AAED,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,eAAO,MAAM,gBAAgB,MAAM,CAAC"}

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

@@ -1,5 +1,171 @@
 import { Typography } from '../Typography';
-export declare const ToastContentContainer: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+export declare const toastContentStyles: import("@stitches/react/types/styled-component").CssComponent<never, {}, {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+}, {
+    colors: {
+        primary: string;
+        primary500: string;
+        primary600: string;
+        secondary: string;
+        secondary100: string;
+        secondary200: string;
+        secondary300: string;
+        secondary400: string;
+        secondary500: string;
+        secondary600: string;
+        secondary700: string;
+        secondary800: string;
+        secondary900: string;
+        neutral: string;
+        neutral100: string;
+        neutral200: string;
+        neutral300: string;
+        neutral400: string;
+        neutral500: string;
+        neutral600: string;
+        neutral700: string;
+        neutral800: string;
+        neutral900: string;
+        error100: string;
+        error300: string;
+        error500: string;
+        error600: string;
+        error700: string;
+        warning100: string;
+        warning300: string;
+        warning500: string;
+        warning600: string;
+        warning700: string;
+        info: string;
+        info100: string;
+        info300: string;
+        info500: string;
+        info600: string;
+        info700: string;
+        success100: string;
+        success300: string;
+        success500: string;
+        success600: string;
+        success700: string;
+        background: string;
+        foreground: string;
+    };
+    space: {
+        0: string;
+        5: string;
+        10: string;
+        15: string;
+        20: string;
+        25: string;
+        30: string;
+        40: string;
+        46: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+        28: string;
+        32: string;
+    };
+    radii: {
+        xs: string;
+        sm: string;
+        xm: string;
+        md: string;
+        xl: string;
+        lg: string;
+        primary: string;
+        secondary: string;
+    };
+    fontSizes: {
+        10: string;
+        12: string;
+        14: string;
+        16: string;
+        18: string;
+        20: string;
+        22: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        48: string;
+    };
+    fonts: {
+        primary: string;
+        widget: string;
+    };
+    fontWeights: {
+        regular: number;
+        medium: number;
+        semiBold: number;
+        bold: number;
+    };
+    lineHeights: {
+        12: string;
+        16: string;
+        20: string;
+        24: string;
+        26: string;
+        28: string;
+        30: string;
+        36: string;
+        40: string;
+        44: string;
+        52: string;
+        64: string;
+    };
+    letterSpacings: {};
+    sizes: {
+        4: string;
+        6: string;
+        8: string;
+        10: string;
+        12: string;
+        16: string;
+        18: string;
+        20: string;
+        24: string;
+        26: string;
+        28: string;
+        30: string;
+        32: string;
+        36: string;
+        40: string;
+        45: string;
+        48: string;
+    };
+    borderWidths: {};
+    borderStyles: {};
+    shadows: {
+        s: string;
+    };
+    zIndices: {};
+    transitions: {};
+}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
+export declare const ToastContentContainer: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    isActive?: boolean | "true" | undefined;
+    isVisible?: boolean | "true" | undefined;
+    position?: "right-top" | "right-bottom" | "left-top" | "left-bottom" | "center-top" | "center-bottom" | undefined;
+}, {
     xs: string;
     sm: string;
     md: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAO3C,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAEhC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAoCzB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAwEnB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAI7B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAa3B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAG9B,CAAC"}
+{"version":3,"file":"Toast.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAO3C,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAK7B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAmMhC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAwCzB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAwEnB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAI7B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAa3B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAG9B,CAAC"}

package/package.json

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

package/src/components/Toast/Toast.helpers.ts

@@ -5,3 +5,8 @@ export function idGenerator() {
     return id;
   };
 }
+
+export const TOAST_UNMOUNT_DELAY = 500; // the delay before the toast is unmounted
+export const TOAST_TRANSITION_DURATION = 300; // the duration of the toast transition
+export const HOVER_TRANSITION_DURATION = 200; // the duration of the toast transition hover
+export const TOAST_HIDE_DELAY = 200; // the delay before the toast is invisible to shift remained toast smoothly

package/src/components/Toast/Toast.styles.ts

@@ -1,16 +1,217 @@
-import { darkTheme, keyframes, lightTheme, styled } from '../../theme';
+import { css, darkTheme, lightTheme, styled } from '../../theme';
 import { Typography } from '../Typography';
 
-const toastOpacity = keyframes({
-  from: { opacity: 0 },
-  to: { opacity: 1 },
+import {
+  HOVER_TRANSITION_DURATION,
+  TOAST_TRANSITION_DURATION,
+} from './Toast.helpers';
+
+export const toastContentStyles = css({
+  transition: `transform ${HOVER_TRANSITION_DURATION}ms ease-in-out`,
+  '&:hover': {
+    transform: 'scale(0.99)',
+  },
 });
 
 export const ToastContentContainer = styled('div', {
-  animation: `${toastOpacity} .7s`,
+  transition: `transform ${TOAST_TRANSITION_DURATION}ms cubic-bezier(0, 0, 0.75, 1.25)`,
+  cursor: 'pointer',
+  variants: {
+    isActive: {
+      true: {},
+    },
+    isVisible: {
+      true: {},
+    },
+    position: {
+      'right-top': {},
+      'right-bottom': {},
+      'left-top': {},
+      'left-bottom': {},
+      'center-top': {},
+      'center-bottom': {},
+    },
+  },
+  compoundVariants: [
+    {
+      position: 'right-top',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'right-top',
+      isActive: false,
+      isVisible: true,
+      css: {
+        maxHeight: '200px',
+        transform: 'translateX(100%)',
+      },
+    },
+    {
+      position: 'right-top',
+      isActive: false,
+      isVisible: false,
+      css: {
+        maxHeight: '0px',
+        transform: 'translateX(100%)',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'right-bottom',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'right-bottom',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateX(100%)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'right-bottom',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateX(100%)',
+        maxHeight: '0px',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'left-top',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-top',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-top',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '0px',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'left-bottom',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-bottom',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-bottom',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '0px',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'center-top',
+      isActive: true,
+      isVisible: true,
+      css: {
+        maxHeight: '200px',
+        transform: 'translateY(0)',
+        opacity: 1,
+      },
+    },
+    {
+      position: 'center-top',
+      isActive: false,
+      isVisible: true,
+      css: {
+        maxHeight: '200px',
+        transform: 'translateY(-1000%)',
+        opacity: 0,
+      },
+    },
+    {
+      position: 'center-top',
+      isActive: false,
+      isVisible: false,
+      css: {
+        maxHeight: '0px',
+        opacity: 0,
+        transform: 'translateY(-1000%)',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'center-bottom',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateY(0)',
+        maxHeight: '200px',
+        opacity: 1,
+      },
+    },
+    {
+      position: 'center-bottom',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateY(1000%)',
+        maxHeight: '200px',
+        opacity: 0,
+      },
+    },
+    {
+      position: 'center-bottom',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateY(1000%)',
+        maxHeight: '0px',
+        opacity: 0,
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+  ],
 });
 
 export const ToastContainer = styled('div', {
+  overflow: 'hidden',
   position: 'absolute',
   zIndex: 9999,
   display: 'flex',
@@ -25,6 +226,7 @@ export const ToastContainer = styled('div', {
       'right-bottom': {
         right: 12,
         bottom: 2,
+        flexDirection: 'column-reverse',
       },
       'left-top': {
         left: 12,
@@ -33,6 +235,7 @@ export const ToastContainer = styled('div', {
       'left-bottom': {
         left: 12,
         bottom: 2,
+        flexDirection: 'column-reverse',
       },
       'center-top': {
         left: '50%',
@@ -43,6 +246,7 @@ export const ToastContainer = styled('div', {
         left: '50%',
         transform: 'translateX(-50%)',
         bottom: 2,
+        flexDirection: 'column-reverse',
       },
     },
   },

package/src/components/Toast/Toast.tsx

@@ -1,6 +1,6 @@
 import type { ToastProps } from './Toast.types';
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { CloseIcon } from '../../icons';
 import { Alert } from '../Alert';
@@ -9,12 +9,14 @@ import AlertIcon from '../Alert/AlertIcon';
 import { Divider } from '../Divider';
 import { IconButton } from '../IconButton';
 
+import { TOAST_HIDE_DELAY, TOAST_UNMOUNT_DELAY } from './Toast.helpers';
 import { useToast } from './Toast.Provider';
 import {
   AlertBox,
   AlertFlexContainer,
   StyledTypography,
   ToastContentContainer,
+  toastContentStyles,
 } from './Toast.styles';
 
 export const Toast = (props: ToastProps) => {
@@ -29,6 +31,8 @@ export const Toast = (props: ToastProps) => {
     hideOnTap = true,
     variant = 'standard',
   } = props;
+  const [isActive, setIsActive] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
   const { removeToast } = useToast();
   useEffect(() => {
     let cleanup;
@@ -45,42 +49,63 @@ export const Toast = (props: ToastProps) => {
   }, [id]);
 
   const handleClose = () => {
-    removeToast(id, position);
-    onClose?.();
+    setIsActive(false);
+    setTimeout(() => {
+      setIsVisible(false);
+    }, TOAST_HIDE_DELAY);
+    setTimeout(() => {
+      removeToast(id, position);
+      onClose?.();
+    }, TOAST_UNMOUNT_DELAY);
   };
 
+  useEffect(() => {
+    setIsVisible(true);
+    setTimeout(() => {
+      setIsActive(true);
+    }, 0);
+  }, []);
+
   return (
-    <ToastContentContainer>
-      <AlertBox
-        onClick={hideOnTap ? handleClose : undefined}
-        variant={variant}
-        type={type}>
-        {variant === 'custom' ? (
-          <AlertFlexContainer>
-            <IconHighlight type={type} align="center">
-              <AlertIcon type={type} />
-            </IconHighlight>
-            <Divider direction="horizontal" size={10} />
-            <StyledTypography variant="body" size="small" align="left">
-              {props.title}
-            </StyledTypography>
-          </AlertFlexContainer>
-        ) : (
-          <Alert
-            title={title}
-            type={type}
-            variant="alarm"
-            titleAlign="left"
-            action={
-              hasCloseIcon ? (
-                <IconButton variant="ghost" size="xsmall" onClick={handleClose}>
-                  <CloseIcon size={12} />
-                </IconButton>
-              ) : undefined
-            }
-          />
-        )}
-      </AlertBox>
+    <ToastContentContainer
+      isActive={isActive}
+      position={position}
+      isVisible={isVisible}>
+      <div className={toastContentStyles()}>
+        <AlertBox
+          onClick={hideOnTap ? handleClose : undefined}
+          variant={variant}
+          type={type}>
+          {variant === 'custom' ? (
+            <AlertFlexContainer>
+              <IconHighlight type={type} align="center">
+                <AlertIcon type={type} />
+              </IconHighlight>
+              <Divider direction="horizontal" size={10} />
+              <StyledTypography variant="body" size="small" align="left">
+                {props.title}
+              </StyledTypography>
+            </AlertFlexContainer>
+          ) : (
+            <Alert
+              title={title}
+              type={type}
+              variant="alarm"
+              titleAlign="left"
+              action={
+                hasCloseIcon ? (
+                  <IconButton
+                    variant="ghost"
+                    size="xsmall"
+                    onClick={handleClose}>
+                    <CloseIcon size={12} />
+                  </IconButton>
+                ) : undefined
+              }
+            />
+          )}
+        </AlertBox>
+      </div>
     </ToastContentContainer>
   );
 };