@lunit/oui 2.2.20 → 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/components/Toggle/Toggle.styled.js

@@ -47,7 +47,7 @@ export const StyledToggle = styled(Switch, {
     },
     '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
         opacity: 1,
-        backgroundColor: toggleColor || theme.palette.lunitTeal[70],
+        backgroundColor: toggleColor || theme.palette.lunitTeal[40],
     },
     '& .MuiSwitch-switchBase.Mui-disabled + .MuiSwitch-track': {
         opacity: 1,

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/dist/presentations/ToggleControl/ToggleControl.js

@@ -9,6 +9,7 @@ import { FreeText } from '../FreeText';
 import { Statistic } from '../Statistic';
 import { Tooltip } from '../../components';
 import { Information } from '../../icons';
+import theme from '../../theme';
 const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbol, tooltip = [], content = [], color, isParent = false, disabled = false, bar, checked, isDimmed = false, onChange, }) => {
     if (!componentType)
         throw new Error("The 'componentType' prop is required.");
@@ -19,6 +20,6 @@ const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbo
     return (_jsxs(ToggleControlOuter, { "data-toggle-name": `toggle-control-${title?.replace(/\s/g, '-')}`, hasBar: !!bar || !!content.length, style: { marginBottom: isParent ? '4px' : '0' }, children: [_jsxs(ToggleControlContainer, { className: "toggle-inner-container", size: size, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: '6px' }, className: "toggle-label", children: [!!tooltip.length && (_jsx(Tooltip, { arrow: true, size: "large", title: _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: tooltip.map((item) => (_jsxs(Box, { children: [item.componentType === 'freeText' && (_jsx(FreeText, { componentType: item.componentType, size: item.size, content: item.content })), item.componentType === 'statistic' && (_jsx(Statistic, { componentType: item.componentType, title: item.title, size: item.size, layout: item.layout, symbol: item.symbol, color: item.color }))] }, uuidV4()))) }), children: _jsx(Box, { sx: {
                                         display: 'flex',
                                         alignItems: 'center',
-                                    }, children: _jsx(Information, {}) }) })), symbol && (_jsx(PresentationSymbolIcon, { symbol: symbol, color: color, isDimmed: isDimmed || !checked })), _jsx(PresentationTypography, { size: size, isDimmed: isDimmed || !checked, children: title })] }), _jsx(StyledToggle, { disabled: disabled || isDimmed, checked: checked, onChange: onChange })] }), content.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: content.map((item) => (_jsx(Statistic, { ...item, isDimmed: isDimmed || !checked }, uuidV4()))) }, uuidV4())), bar && (_jsx(Box, { sx: { padding: '0 8px', fontSize: '14px', lineHeight: '8px' }, children: _jsx(AnalysisBar, { isDimmed: isDimmed || !checked, componentType: bar.componentType, expressionValue: bar.expressionValue, expressionLevels: bar.expressionLevels, caption: bar.caption, segments: bar.segments }) }))] }));
+                                    }, children: _jsx(Information, {}) }) })), symbol && (_jsx(PresentationSymbolIcon, { symbol: symbol, color: color, isDimmed: isDimmed || !checked })), _jsx(PresentationTypography, { size: size, isDimmed: isDimmed || !checked, children: title })] }), _jsx(StyledToggle, { disabled: disabled || isDimmed, checked: checked, toggleColor: theme.palette.lunitTeal[70], onChange: onChange })] }), content.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: content.map((item) => (_jsx(Statistic, { ...item, isDimmed: isDimmed || !checked }, uuidV4()))) }, uuidV4())), bar && (_jsx(Box, { sx: { padding: '0 8px', fontSize: '14px', lineHeight: '8px' }, children: _jsx(AnalysisBar, { isDimmed: isDimmed || !checked, componentType: bar.componentType, expressionValue: bar.expressionValue, expressionLevels: bar.expressionLevels, caption: bar.caption, segments: bar.segments }) }))] }));
 };
 export default ToggleControl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "2.2.20",
+  "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)"