fis-component 0.0.79 → 0.0.81

package/dist/cjs/index.js

@@ -61835,13 +61835,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 styled.css `
+          top: 24px;
+          left: 50%;
+          transform: translateX(-50%);
+        `;
+        case "bottom-center":
+            return styled.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 styled.css `
+          top: 24px;
+          right: 24px;
+        `;
+        case "bottom-right":
+            return styled.css `
+          bottom: 24px;
+          right: 24px;
+          flex-direction: column-reverse;
+        `;
+        case "top-left":
+            return styled.css `
+          top: 24px;
+          left: 24px;
+        `;
+        case "bottom-left":
+            return styled.css `
+          bottom: 24px;
+          left: 24px;
+          flex-direction: column-reverse;
+        `;
+        default:
+            return styled.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") &&
+    styled.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 styled.css `
+          left: 16px;
+          right: 16px;
+          transform: none;
+        `;
+    }
+    else if (props.$position?.includes("left")) {
+        return styled.css `
+          left: 16px;
+        `;
+    }
+    else if (props.$position?.includes("right")) {
+        return styled.css `
+          right: 16px;
+        `;
+    }
+}}
+
+    ${(props) => props.$position?.includes("top")
+    ? styled.css `
+            top: 16px;
+          `
+    : styled.css `
+            bottom: 16px;
+          `}
+  }
+
+  /* Tablet breakpoint */
+  @media (max-width: 1024px) and (min-width: 769px) {
+    max-width: 380px;
+    min-width: 300px;
+  }
 `;
 
 const getPadding = (size, borderPath) => {
@@ -62567,7 +62693,7 @@ const ToastProvider = ({ children, }) => {
             setToasts((prev) => prev.slice(1));
         }, duration);
     }, []);
-    return (jsxRuntime.jsxs(ToastContext.Provider, { value: { showToast }, children: [children, toasts.length > 0 && (jsxRuntime.jsx(ToastWrapper, { "$position": toasts[0].position || "top-center", children: toasts.map((toast, index) => (jsxRuntime.jsx(FISToast, { ...toast }, index))) }))] }));
+    return (jsxRuntime.jsxs(ToastContext.Provider, { value: { showToast }, children: [children, toasts.length > 0 && (jsxRuntime.jsx(ToastWrapper, { "$position": toasts[0].position || "top-right", children: toasts.map((toast, index) => (jsxRuntime.jsx(FISToast, { ...toast }, index))) }))] }));
 };
 
 const FISThemeProvider = ({ theme: theme$1 = theme, children, }) => (jsxRuntime.jsxs(styled.ThemeProvider, { theme: theme$1, children: [jsxRuntime.jsx(GlobalStyle, { theme: theme$1 }), jsxRuntime.jsx(NotificationProvider, { children: jsxRuntime.jsx(ToastProvider, { children: children }) })] }));
@@ -66317,18 +66443,58 @@ const DivTooltipSC = styled.div `
   }
 `;
 
-const FISTooltip = ({ className, variant = "primary", size = "md", title: titleProp, children, ...rest }) => {
+const useSmartTooltipPlacement = () => {
+    const [placement, setPlacement] = React.useState("right");
+    const calculatePlacement = React.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 = styled.useTheme();
+    const triggerRef = React.useRef(null);
+    const { placement, calculatePlacement } = useSmartTooltipPlacement();
+    React.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 = (jsxRuntime.jsxs(DivTooltipContentWrapperSC, { children: [jsxRuntime.jsxs(DivTooltipContentSC, { children: [jsxRuntime.jsx(DivTooltipLabelSC, { children: titleProp.label }), titleProp.description && (jsxRuntime.jsx(DivTooltipDescriptionSC, { children: titleProp.description }))] }), titleProp.link && (jsxRuntime.jsx(ATooltipLinkSC, { href: titleProp.linkUrl, target: "_blank", rel: "noopener noreferrer", children: titleProp.link }))] }));
-        return (jsxRuntime.jsx(DivTooltipSC, { className: className, "$size": size, "$variant": variant, children: jsxRuntime.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 || jsxRuntime.jsx(Button$2, { children: "RT" }) }) }));
+        return (jsxRuntime.jsx(DivTooltipSC, { className: className, "$size": size, "$variant": variant, children: jsxRuntime.jsx("span", { ref: smartPlacement ? triggerRef : undefined, children: jsxRuntime.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 || jsxRuntime.jsx(Button$2, { children: "RT" }) }) }) }));
     }
-    return (jsxRuntime.jsx(DivTooltipSC, { className: className, "$size": size, "$variant": variant, children: jsxRuntime.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 || jsxRuntime.jsx(Button$2, { children: "RT" }) }) }));
+    return (jsxRuntime.jsx(DivTooltipSC, { className: className, "$size": size, "$variant": variant, children: jsxRuntime.jsx("span", { ref: smartPlacement ? triggerRef : undefined, children: jsxRuntime.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 || jsxRuntime.jsx(Button$2, { children: "RT" }) }) }) }));
 };
 FISTooltip.displayName = "FISTooltip";
 
@@ -67349,6 +67515,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 = React.useRef(null);
+    const [isTruncated, setIsTruncated] = React.useState(false);
+    React.useEffect(() => {
+        const el = titleRef.current;
+        if (el) {
+            setIsTruncated(el.scrollWidth > el.clientWidth);
+        }
+    }, [title]);
     const renderSuffixIcon = () => {
         switch (type) {
             case "action":
@@ -67365,9 +67539,12 @@ const FISMenuItem = ({ title, description, iconPrefix, type = "action", size = "
             negative: negative,
         }), "$size": size, "$selected": selected, "$type": type, "$disable": disable, onClick: onClickMenu, children: [iconPrefix && (jsxRuntime.jsx(DivPrefixIconSC, { className: classNames({
                     negative: negative,
-                }), "$size": size, "$type": type, "$selected": selected, "$disable": disable, children: iconPrefix })), jsxRuntime.jsxs(DivContentSC$2, { children: [title && (jsxRuntime.jsx(PTitleSC$1, { className: classNames({
-                            negative: negative,
-                        }), "$selected": selected, "$type": type, "$disable": disable, children: title })), description && (jsxRuntime.jsx(PDescriptionSC, { className: classNames({
+                }), "$size": size, "$type": type, "$selected": selected, "$disable": disable, children: iconPrefix })), jsxRuntime.jsxs(DivContentSC$2, { children: [title &&
+                        (isTruncated ? (jsxRuntime.jsx(FISTooltip, { title: title, variant: "primary", smartPlacement: true, children: jsxRuntime.jsx(PTitleSC$1, { ref: titleRef, className: classNames({
+                                    negative: negative,
+                                }), "$selected": selected, "$type": type, "$disable": disable, children: title }) })) : (jsxRuntime.jsx(PTitleSC$1, { ref: titleRef, className: classNames({
+                                negative: negative,
+                            }), "$selected": selected, "$type": type, "$disable": disable, children: title }))), description && (jsxRuntime.jsx(PDescriptionSC, { className: classNames({
                             negative: negative,
                         }), "$type": type, "$selected": selected, "$disable": disable, children: description }))] }), renderSuffixIcon()] }));
 };
@@ -67497,7 +67674,7 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
             onClickMenu?.();
         }
     };
-    return (jsxRuntime.jsxs(DivContainerSC$4, { "$maxHeight": maxHeight, className: className, children: [showInput && !combobox && (jsxRuntime.jsx(DivSearchSC, { children: jsxRuntime.jsx(FISInputText, { iconPrefix: jsxRuntime.jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoResultIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoDataIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsxRuntime.jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, children: groupsToRender.map((group, index) => (jsxRuntime.jsxs(DivWrapperSC$4, { children: [index !== 0 && jsxRuntime.jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsxRuntime.jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }, idx)))] }, index))) }), removeSelectedGroup && (jsxRuntime.jsx(FixedBottomSection, { children: jsxRuntime.jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsxRuntime.jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }));
+    return (jsxRuntime.jsxs(DivContainerSC$4, { "$maxHeight": maxHeight, className: className, children: [showInput && !combobox && (jsxRuntime.jsx(DivSearchSC, { children: jsxRuntime.jsx(FISInputText, { iconPrefix: jsxRuntime.jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoResultIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoDataIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsxRuntime.jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, children: groupsToRender.map((group, index) => (jsxRuntime.jsxs(DivWrapperSC$4, { children: [index !== 0 && jsxRuntime.jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsxRuntime.jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsxRuntime.jsx(FISTooltip, { title: item.label, variant: "primary", children: jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }) }, idx)))] }, index))) }), removeSelectedGroup && (jsxRuntime.jsx(FixedBottomSection, { children: jsxRuntime.jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsxRuntime.jsx(FISTooltip, { title: item.label, variant: "primary", children: jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsxRuntime.jsx(RemoveIcon, {}), negative: true }) }, idx))) }) }))] }))] }));
 };
 FISMenuSelect.displayName = "FISMenuSelect";