fis-component 0.0.79 → 0.0.81

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/cjs/types/src/components/Tooltip/index.d.ts

@@ -23,6 +23,8 @@ interface TooltipProps extends Omit<TooltipPropsAntd, "variant" | "title"> {
     size?: TooltipSize;
     /** Child elements that the tooltip wraps (optional) */
     children?: React.ReactNode;
+    /** Enable smart placement (auto left/right) */
+    smartPlacement?: boolean;
 }
 declare const FISTooltip: FC<TooltipProps>;
 export default FISTooltip;

package/dist/cjs/types/src/components/Tooltip/useSmartTooltipPlacement.d.ts

@@ -0,0 +1,5 @@
+export type TooltipPlacement = "left" | "right";
+export declare const useSmartTooltipPlacement: () => {
+    placement: TooltipPlacement;
+    calculatePlacement: (triggerEl: HTMLElement | null) => void;
+};

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 }) })] }));
@@ -66297,18 +66423,58 @@ const DivTooltipSC = styled.div `
   }
 `;
 
-const FISTooltip = ({ className, variant = "primary", size = "md", title: titleProp, children, ...rest }) => {
+const useSmartTooltipPlacement = () => {
+    const [placement, setPlacement] = useState("right");
+    const calculatePlacement = useCallback((triggerEl) => {
+        if (!triggerEl)
+            return;
+        const rect = triggerEl.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const leftSpace = rect.left;
+        const rightSpace = viewportWidth - rect.right;
+        if (rightSpace > leftSpace) {
+            setPlacement("right");
+        }
+        else if (leftSpace > rightSpace) {
+            setPlacement("left");
+        }
+        else {
+            setPlacement("right");
+        }
+    }, []);
+    return { placement, calculatePlacement };
+};
+
+const FISTooltip = ({ className, variant = "primary", size = "md", title: titleProp, children, smartPlacement = false, ...rest }) => {
     const theme = useTheme$1();
+    const triggerRef = useRef(null);
+    const { placement, calculatePlacement } = useSmartTooltipPlacement();
+    useEffect(() => {
+        if (!smartPlacement)
+            return;
+        const el = triggerRef.current;
+        if (!el)
+            return;
+        const handleMouseEnter = () => calculatePlacement(el);
+        el.addEventListener("mouseenter", handleMouseEnter);
+        calculatePlacement(el);
+        return () => {
+            el.removeEventListener("mouseenter", handleMouseEnter);
+        };
+    }, [smartPlacement, calculatePlacement]);
+    const tooltipPlacement = smartPlacement
+        ? placement
+        : rest.placement || "right";
     if (isTooltipTitleCustom(titleProp)) {
         // Create properly structured custom title
         const title = (jsxs(DivTooltipContentWrapperSC, { children: [jsxs(DivTooltipContentSC, { children: [jsx(DivTooltipLabelSC, { children: titleProp.label }), titleProp.description && (jsx(DivTooltipDescriptionSC, { children: titleProp.description }))] }), titleProp.link && (jsx(ATooltipLinkSC, { href: titleProp.linkUrl, target: "_blank", rel: "noopener noreferrer", children: titleProp.link }))] }));
-        return (jsx(DivTooltipSC, { className: className, "$size": size, "$variant": variant, children: jsx(Tooltip, { color: variant === "primary"
-                    ? theme["com/tooltip/size-md/theme-black/background-color"]
-                    : theme["com/tooltip/size-md/theme-white/background-color"], title: title, getTooltipContainer: (trigger) => trigger, ...rest, children: children || jsx(Button$2, { children: "RT" }) }) }));
+        return (jsx(DivTooltipSC, { className: className, "$size": size, "$variant": variant, children: jsx("span", { ref: smartPlacement ? triggerRef : undefined, children: jsx(Tooltip, { color: variant === "primary"
+                        ? theme["com/tooltip/size-md/theme-black/background-color"]
+                        : theme["com/tooltip/size-md/theme-white/background-color"], title: title, getTooltipContainer: () => document.body, placement: tooltipPlacement, ...rest, children: children || jsx(Button$2, { children: "RT" }) }) }) }));
     }
-    return (jsx(DivTooltipSC, { className: className, "$size": size, "$variant": variant, children: jsx(Tooltip, { color: variant === "primary"
-                ? theme["com/tooltip/size-md/theme-black/background-color"]
-                : theme["com/tooltip/size-md/theme-white/background-color"], title: titleProp, getTooltipContainer: (trigger) => trigger, ...rest, children: children || jsx(Button$2, { children: "RT" }) }) }));
+    return (jsx(DivTooltipSC, { className: className, "$size": size, "$variant": variant, children: jsx("span", { ref: smartPlacement ? triggerRef : undefined, children: jsx(Tooltip, { color: variant === "primary"
+                    ? theme["com/tooltip/size-md/theme-black/background-color"]
+                    : theme["com/tooltip/size-md/theme-white/background-color"], title: titleProp, getTooltipContainer: () => document.body, placement: tooltipPlacement, ...rest, children: children || jsx(Button$2, { children: "RT" }) }) }) }));
 };
 FISTooltip.displayName = "FISTooltip";
 
@@ -67329,6 +67495,14 @@ const FISBadge = ({ className, icon, label, size = "sm", color, status, type = "
 FISBadge.displayName = "FISBadge";
 
 const FISMenuItem = ({ title, description, iconPrefix, type = "action", size = "md", selected = false, negative = false, disable, onClickMenu, }) => {
+    const titleRef = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    useEffect(() => {
+        const el = titleRef.current;
+        if (el) {
+            setIsTruncated(el.scrollWidth > el.clientWidth);
+        }
+    }, [title]);
     const renderSuffixIcon = () => {
         switch (type) {
             case "action":
@@ -67345,9 +67519,12 @@ const FISMenuItem = ({ title, description, iconPrefix, type = "action", size = "
             negative: negative,
         }), "$size": size, "$selected": selected, "$type": type, "$disable": disable, onClick: onClickMenu, children: [iconPrefix && (jsx(DivPrefixIconSC, { className: classNames({
                     negative: negative,
-                }), "$size": size, "$type": type, "$selected": selected, "$disable": disable, children: iconPrefix })), jsxs(DivContentSC$2, { children: [title && (jsx(PTitleSC$1, { className: classNames({
-                            negative: negative,
-                        }), "$selected": selected, "$type": type, "$disable": disable, children: title })), description && (jsx(PDescriptionSC, { className: classNames({
+                }), "$size": size, "$type": type, "$selected": selected, "$disable": disable, children: iconPrefix })), jsxs(DivContentSC$2, { children: [title &&
+                        (isTruncated ? (jsx(FISTooltip, { title: title, variant: "primary", smartPlacement: true, children: jsx(PTitleSC$1, { ref: titleRef, className: classNames({
+                                    negative: negative,
+                                }), "$selected": selected, "$type": type, "$disable": disable, children: title }) })) : (jsx(PTitleSC$1, { ref: titleRef, className: classNames({
+                                negative: negative,
+                            }), "$selected": selected, "$type": type, "$disable": disable, children: title }))), description && (jsx(PDescriptionSC, { className: classNames({
                             negative: negative,
                         }), "$type": type, "$selected": selected, "$disable": disable, children: description }))] }), renderSuffixIcon()] }));
 };
@@ -67477,7 +67654,7 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
             onClickMenu?.();
         }
     };
-    return (jsxs(DivContainerSC$4, { "$maxHeight": maxHeight, className: className, children: [showInput && !combobox && (jsx(DivSearchSC, { children: jsx(FISInputText, { iconPrefix: jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoResultIcon, {}) }), jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoDataIcon, {}) }), jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxs(DivLoaderSC, { children: [jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxs(Fragment, { children: [jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, children: groupsToRender.map((group, index) => (jsxs(DivWrapperSC$4, { children: [index !== 0 && jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }, idx)))] }, index))) }), removeSelectedGroup && (jsx(FixedBottomSection, { children: jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }));
+    return (jsxs(DivContainerSC$4, { "$maxHeight": maxHeight, className: className, children: [showInput && !combobox && (jsx(DivSearchSC, { children: jsx(FISInputText, { iconPrefix: jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoResultIcon, {}) }), jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoDataIcon, {}) }), jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxs(DivLoaderSC, { children: [jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxs(Fragment, { children: [jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, children: groupsToRender.map((group, index) => (jsxs(DivWrapperSC$4, { children: [index !== 0 && jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsx(FISTooltip, { title: item.label, variant: "primary", children: jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }) }, idx)))] }, index))) }), removeSelectedGroup && (jsx(FixedBottomSection, { children: jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsx(FISTooltip, { title: item.label, variant: "primary", children: jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsx(RemoveIcon, {}), negative: true }) }, idx))) }) }))] }))] }));
 };
 FISMenuSelect.displayName = "FISMenuSelect";