@rango-dev/ui 0.28.2-next.1 → 0.28.2-next.10

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>
   );
 };

package/src/components/Typography/NotSelectableTypography.ts

@@ -0,0 +1,7 @@
+import { styled } from '../../theme';
+
+import { Typography } from './Typography';
+
+export const NotSelectableTypography = styled(Typography, {
+  userSelect: 'none',
+});

package/src/components/Typography/index.ts

@@ -1,2 +1,3 @@
 export { Typography } from './Typography';
+export { NotSelectableTypography } from './NotSelectableTypography';
 export type { PropTypes as TypographyPropTypes } from './Typography.types';

package/src/components/index.ts

@@ -51,3 +51,4 @@ export * from './TokenAmount';
 export * from './StepDetails';
 export * from './Popover';
 export * from './Flags';
+export * from './Select';

package/src/theme.ts

@@ -1,6 +1,6 @@
 // TSDX + stiches doesn't work with import statement and has a bug.
 
-import type { PropertyValue } from '@stitches/react';
+import type { PropertyValue, CSS as StitchesCSS } from '@stitches/react';
 import type { DefaultThemeMap } from '@stitches/react/types/config';
 
 import { createStitches } from '@stitches/react';
@@ -153,6 +153,7 @@ export const theme = {
     18: '18px',
     20: '20px',
     24: '24px',
+    26: '26px',
     28: '28px',
     30: '30px',
     32: '32px',
@@ -217,6 +218,8 @@ export const { styled, css, createTheme, keyframes, globalCss, config } =
     utils,
   });
 
+export type CSS = StitchesCSS<typeof config>;
+
 export const lightTheme = createTheme('light-theme-ui', {});
 
 export const darkTheme = createTheme('dark-theme-ui', {