fis-component 0.0.79 → 0.0.80

package/dist/cjs/types/src/components/Toast/index.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 export type ThemeType = "neutral" | "info" | "positive" | "caution" | "negative";
 export type ToastType = "link" | "button" | "no-action";
 export type PositionType = "inline" | "bottom";
-export type ToastPositionType = "top-center" | "bottom-center";
+export type ToastPositionType = "top-center" | "bottom-center" | "top-right" | "bottom-right" | "top-left" | "bottom-left";
 export type ToastProps = {
     className?: string;
     theme?: ThemeType;

package/dist/cjs/types/src/components/Toast/styles.d.ts

@@ -10,6 +10,6 @@ export declare const PTitleSC: import("styled-components/dist/types").IStyledCom
 export declare const LinkSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
 export declare const DivTitleWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ToastProps>> & string;
 export declare const ToastWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $position?: "top-center" | "bottom-center";
+    $position?: "top-center" | "bottom-center" | "top-right" | "bottom-right" | "top-left" | "bottom-left";
 }>> & string;
 export {};

package/dist/esm/index.js

@@ -61815,13 +61815,139 @@ const DivTitleWrap = styled.div `
 `;
 const ToastWrapper = styled.div `
   position: fixed;
-  ${(props) => props.$position === "bottom-center" ? "bottom: 20px;" : "top: 20px;"}
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1000;
+  z-index: 1050; /* Cao hơn bootstrap modal (1040) và các component khác */
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px; /* Tăng gap để toast không quá sát nhau */
+  max-width: 420px; /* Tăng một chút cho nội dung dài */
+  min-width: 320px; /* Tăng min-width cho đẹp hơn */
+  pointer-events: none; /* Tránh chặn click vào các element phía sau */
+
+  /* Cho phép click vào các toast con */
+  > * {
+    pointer-events: auto;
+  }
+
+  ${(props) => {
+    switch (props.$position) {
+        case "top-center":
+            return css `
+          top: 24px;
+          left: 50%;
+          transform: translateX(-50%);
+        `;
+        case "bottom-center":
+            return css `
+          bottom: 24px;
+          left: 50%;
+          transform: translateX(-50%);
+          flex-direction: column-reverse; /* Toast mới xuất hiện từ dưới lên */
+        `;
+        case "top-right":
+            return css `
+          top: 24px;
+          right: 24px;
+        `;
+        case "bottom-right":
+            return css `
+          bottom: 24px;
+          right: 24px;
+          flex-direction: column-reverse;
+        `;
+        case "top-left":
+            return css `
+          top: 24px;
+          left: 24px;
+        `;
+        case "bottom-left":
+            return css `
+          bottom: 24px;
+          left: 24px;
+          flex-direction: column-reverse;
+        `;
+        default:
+            return css `
+          top: 24px;
+          left: 50%;
+          transform: translateX(-50%);
+        `;
+    }
+}}
+
+  /* Animation cho toast xuất hiện */
+  > div {
+    animation: toastSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  @keyframes toastSlideIn {
+    from {
+      opacity: 0;
+      transform: translateY(-12px) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  /* Animation cho bottom positions */
+  ${(props) => props.$position?.includes("bottom") &&
+    css `
+      > div {
+        animation: toastSlideInBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      @keyframes toastSlideInBottom {
+        from {
+          opacity: 0;
+          transform: translateY(12px) scale(0.95);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+      }
+    `}
+
+  /* Responsive cho mobile */
+  @media (max-width: 768px) {
+    max-width: calc(100vw - 32px);
+    min-width: calc(100vw - 32px);
+
+    ${(props) => {
+    if (props.$position?.includes("center")) {
+        return css `
+          left: 16px;
+          right: 16px;
+          transform: none;
+        `;
+    }
+    else if (props.$position?.includes("left")) {
+        return css `
+          left: 16px;
+        `;
+    }
+    else if (props.$position?.includes("right")) {
+        return css `
+          right: 16px;
+        `;
+    }
+}}
+
+    ${(props) => props.$position?.includes("top")
+    ? css `
+            top: 16px;
+          `
+    : css `
+            bottom: 16px;
+          `}
+  }
+
+  /* Tablet breakpoint */
+  @media (max-width: 1024px) and (min-width: 769px) {
+    max-width: 380px;
+    min-width: 300px;
+  }
 `;
 
 const getPadding = (size, borderPath) => {
@@ -62547,7 +62673,7 @@ const ToastProvider = ({ children, }) => {
             setToasts((prev) => prev.slice(1));
         }, duration);
     }, []);
-    return (jsxs(ToastContext.Provider, { value: { showToast }, children: [children, toasts.length > 0 && (jsx(ToastWrapper, { "$position": toasts[0].position || "top-center", children: toasts.map((toast, index) => (jsx(FISToast, { ...toast }, index))) }))] }));
+    return (jsxs(ToastContext.Provider, { value: { showToast }, children: [children, toasts.length > 0 && (jsx(ToastWrapper, { "$position": toasts[0].position || "top-right", children: toasts.map((toast, index) => (jsx(FISToast, { ...toast }, index))) }))] }));
 };
 
 const FISThemeProvider = ({ theme: theme$1 = theme, children, }) => (jsxs(ThemeProvider, { theme: theme$1, children: [jsx(GlobalStyle, { theme: theme$1 }), jsx(NotificationProvider, { children: jsx(ToastProvider, { children: children }) })] }));