fis-component 0.0.80 → 0.0.81

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

@@ -66423,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";
 
@@ -67455,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":
@@ -67471,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()] }));
 };
@@ -67603,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";