@lunit/oui 2.2.21 → 2.2.22

package/dist/components/EllipsisTypography/EllipsisTypography.js

@@ -10,52 +10,24 @@ function EllipsisTypography({ children, heightThreshold: heightThresholdProp, to
     const [showTooltip, setShowTooltip] = useState(false);
     const { addResizeHandler, removeResizeHandler } = useContext(ResizeObserverContext);
     useEffect(() => {
-        if (typographyRef.current) {
-            const target = typographyRef.current;
-            const resizeHandler = () => {
-                switch (direction) {
-                    case 'row':
-                        if (target.scrollHeight - target.clientHeight > heightThreshold && !showTooltip) {
-                            setShowTooltip(true);
-                        }
-                        else if (target.scrollHeight - target.clientHeight <= heightThreshold &&
-                            showTooltip) {
-                            setShowTooltip(false);
-                        }
-                        break;
-                    case 'column':
-                    default:
-                        if (target.scrollHeight - target.clientHeight > heightThreshold && !showTooltip) {
-                            setShowTooltip(true);
-                        }
-                        else if (target.scrollHeight - target.clientHeight <= heightThreshold &&
-                            showTooltip) {
-                            setShowTooltip(false);
-                        }
-                }
-            };
-            if (addResizeHandler) {
-                console.log(addResizeHandler);
-                addResizeHandler(target, resizeHandler);
-            }
-            return () => {
-                if (removeResizeHandler)
-                    removeResizeHandler(target);
-            };
+        if (!typographyRef.current)
+            return;
+        const target = typographyRef.current;
+        const checkOverflow = () => {
+            const isOverflowing = target.scrollHeight - target.clientHeight > heightThreshold;
+            setShowTooltip(isOverflowing);
+        };
+        if (addResizeHandler) {
+            addResizeHandler(target, checkOverflow);
         }
-        return () => { };
-    }, [
-        typographyRef,
-        direction,
-        showTooltip,
-        heightThreshold,
-        addResizeHandler,
-        removeResizeHandler,
-    ]);
-    console.log(showTooltip);
-    if (showTooltip) {
-        return (_jsx(Tooltip, { title: children, placement: tooltipPlacement, size: "small", children: _jsx(StyledTypography, { ...otherProps, ref: typographyRef, direction: direction, maxLines: maxLines, children: children }) }));
-    }
-    return (_jsx(StyledTypography, { ...otherProps, ref: typographyRef, direction: direction, maxLines: maxLines, children: children }));
+        checkOverflow();
+        return () => {
+            if (removeResizeHandler) {
+                removeResizeHandler(target);
+            }
+        };
+    }, [heightThreshold, addResizeHandler, removeResizeHandler]);
+    const TypographyComponent = (_jsx(StyledTypography, { ...otherProps, ref: typographyRef, direction: direction, maxLines: maxLines, children: children }));
+    return showTooltip ? (_jsx(Tooltip, { title: children, placement: tooltipPlacement, size: "small", children: TypographyComponent })) : (TypographyComponent);
 }
 export default EllipsisTypography;

package/dist/presentations/AnalysisBar/AnalysisBar.styled.js

@@ -99,7 +99,9 @@ const segmentStyle = (color, width, square) => {
 export const GraphSegment = styled('span', {
     shouldForwardProp: (prop) => !['color', 'width', 'square'].includes(prop.toString()),
 })(({ color, width, square }) => {
+    // cover undefined and empty string
+    const barColor = color && color.length ? color : 'red';
     return {
-        ...segmentStyle(color ?? 'red', width, square ?? false), // fallback color
+        ...segmentStyle(barColor, width, square ?? false), // fallback color
     };
 });

package/dist/presentations/Histogram/HistogramTabs.js

@@ -1,19 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from '@mui/material';
 import { calculateFontSize, doBorderRadius } from './Histogram.utils';
 import { HistogramTabsContainer, TabButton } from './Histogram.styled';
+import { EllipsisTypography } from '../../components';
 const HistogramTabs = ({ options, active, onChange }) => {
     return (_jsx(HistogramTabsContainer, { children: options.map((tabLabel, idx) => {
             const fontSize = calculateFontSize(tabLabel);
             return (_jsx(TabButton, { disableRipple: true, active: idx === active, onClick: () => onChange(idx), sx: {
                     padding: '4px 6px',
                     borderRadius: doBorderRadius(idx, options.length),
-                }, children: _jsx(Typography, { variant: "body_sb1", sx: {
+                }, children: _jsx(EllipsisTypography, { variant: "body_sb1", sx: {
                         fontSize: `${fontSize}px`,
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        width: '100%',
                     }, children: tabLabel }) }, tabLabel));
         }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "2.2.21",
+  "version": "2.2.22",
   "validate-branch-name": {
     "pattern": "^(main|develop)|(feature|fix|release|hotfix|qe)/.+$",
     "errorMsg": "The branch name is not correct. Please check the pattern. (ex. feature/add-something)"