fis-component 0.0.80 → 0.0.82

package/dist/cjs/index.js

@@ -66443,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";
 
@@ -67475,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":
@@ -67491,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()] }));
 };
@@ -67558,7 +67609,7 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
         if (search.trim()) {
             filteredItems = filteredItems.map((group) => ({
                 ...group,
-                items: group.items.filter((item) => item.label.toLowerCase().includes(search.toLowerCase())),
+                items: group.items.filter((item) => item?.label?.toLowerCase()?.includes(search?.toLowerCase())),
             }));
         }
         return filteredItems.filter((group) => group.items.length > 0);
@@ -67623,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";
 
@@ -71043,7 +71094,7 @@ const FISCombobox = React.forwardRef(({ className, options, value, disabled = fa
             return options;
         return options.map((group) => ({
             ...group,
-            items: group.items.filter((item) => item.label.toLowerCase().includes(searchValue.toLowerCase())),
+            items: group.items.filter((item) => item?.label?.toLowerCase()?.includes(searchValue?.toLowerCase())),
         }));
     }, [options, searchValue, computedDisplayValue]);
     const hasNoResults = React.useMemo(() => {