@lunit/oui 2.2.1 → 2.2.2

package/dist/presentations/Accordion/Accordion.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { v4 as uuidV4 } from 'uuid';
 import { Box } from '@mui/material';
 import theme from '../../theme';
@@ -15,7 +15,7 @@ const Accordion = ({ componentType = 'accordion', MuiAccordionProps, AccordionDe
                                 display: 'flex',
                                 alignItems: 'center',
                             }, children: _jsx(Information, {}) }) })), _jsx(PresentationTypography, { size: size, children: title }), metrics && (_jsx(PresentationTypography, { size: size, children: _jsxs(Box, { sx: { marginLeft: '4px' }, children: [": ", metrics] }) }))] }), _jsx(BaseAccordionDetails, { ...AccordionDetailsProps, sx: { display: 'flex', flexDirection: 'column', gap: '14px' }, children: items.map((item) => {
-                    return (_jsxs(_Fragment, { children: [item.componentType === 'statistic' && _jsx(Statistic, { ...item }), item.componentType === 'freeText' && _jsx(FreeText, { ...item }), item.componentType === 'score' && _jsx(Score, { ...item })] }));
+                    return (_jsxs("div", { children: [item.componentType === 'statistic' && _jsx(Statistic, { ...item }), item.componentType === 'freeText' && _jsx(FreeText, { ...item }), item.componentType === 'score' && _jsx(Score, { ...item })] }, uuidV4()));
                 }) })] }));
 };
 export default Accordion;

package/dist/presentations/AnalysisBar/AnalysisBar.js

@@ -8,11 +8,11 @@ const Segments = ({ segments, adjustForOnePercent }) => {
         return null;
     }
     if (segments?.length === 1 && segments[0].color === 'jet') {
-        return (_jsx(Box, { sx: { width: '100%', height: '14px', transform: 'scaleY(0.8)' }, children: _jsx(HeatmapGraphSVG, { width: 'auto', height: 'auto' }) }));
+        return (_jsx(Box, { sx: { width: '100%', height: '14px', transform: 'scaleY(0.8)' }, children: _jsx(HeatmapGraphSVG, {}) }));
     }
     return (_jsx(_Fragment, { children: segments?.map((segment, i) => {
             if (segment.color === 'jet') {
-                return (_jsx(HeatmapGraphSVG, { width: `${segment.width}%`, height: 'auto' }));
+                return _jsx(HeatmapGraphSVG, { width: `${segment.width}%` });
             }
             return (_jsx(GraphSegment, { color: segment.color, width: adjustForOnePercent ? adjustBarSegmentWidth(segment.width) : segment.width }, i));
         }) }));

package/dist/presentations/AnalysisBar/HeatmapGraphIcon/HeatmapGraphSVG.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const HeatmapGraphSVG = (props) => (_jsxs("svg", { width: "234", height: "8", viewBox: "0 0 234 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.30733e-07 4C5.85312e-08 1.79086 1.79086 5.86502e-08 4 1.30999e-07L230 7.53243e-06C232.209 7.60478e-06 234 1.79087 234 4.00001C234 6.20915 232.209 8.00001 230 8.00001L4 8C1.79086 8 2.02935e-07 6.20914 1.30733e-07 4Z", fill: "url(#paint0_linear_4060_316245)" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_4060_316245", x1: "-0.585003", y1: "5.99984", x2: "228.159", y2: "4.97311", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#3000FF" }), _jsx("stop", { offset: "0.239583", stopColor: "#5CFFE2" }), _jsx("stop", { offset: "0.447917", stopColor: "#E2FFA4" }), _jsx("stop", { offset: "0.546875", stopColor: "#FCFF75" }), _jsx("stop", { offset: "0.78125", stopColor: "#FDBA73" }), _jsx("stop", { offset: "1", stopColor: "#FF0F00" })] }) })] }));
+const HeatmapGraphSVG = (props) => (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 234 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.30733e-07 4C5.85312e-08 1.79086 1.79086 5.86502e-08 4 1.30999e-07L230 7.53243e-06C232.209 7.60478e-06 234 1.79087 234 4.00001C234 6.20915 232.209 8.00001 230 8.00001L4 8C1.79086 8 2.02935e-07 6.20914 1.30733e-07 4Z", fill: "url(#paint0_linear_4060_316245)" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_4060_316245", x1: "-0.585003", y1: "5.99984", x2: "228.159", y2: "4.97311", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#3000FF" }), _jsx("stop", { offset: "0.239583", stopColor: "#5CFFE2" }), _jsx("stop", { offset: "0.447917", stopColor: "#E2FFA4" }), _jsx("stop", { offset: "0.546875", stopColor: "#FCFF75" }), _jsx("stop", { offset: "0.78125", stopColor: "#FDBA73" }), _jsx("stop", { offset: "1", stopColor: "#FF0F00" })] }) })] }));
 export default HeatmapGraphSVG;

package/dist/presentations/Histogram/HistogramTabs.js

@@ -5,23 +5,16 @@ import { HistogramTabsContainer, TabButton } from './Histogram.styled';
 const HistogramTabs = ({ options, active, onChange }) => {
     return (_jsx(HistogramTabsContainer, { children: options.map((tabLabel, idx) => {
             const fontSize = calculateFontSize(tabLabel);
-            const commonButtonProps = {
-                key: tabLabel,
-                disableRipple: true,
-                active: idx === active,
-                onClick: () => onChange(idx),
-                sx: {
+            return (_jsx(TabButton, { disableRipple: true, active: idx === active, onClick: () => onChange(idx), sx: {
                     padding: '4px 6px',
                     borderRadius: doBorderRadius(idx, options.length),
-                },
-            };
-            return (_jsx(TabButton, { ...commonButtonProps, children: _jsx(Typography, { variant: "body_sb1", sx: {
+                }, children: _jsx(Typography, { variant: "body_sb1", sx: {
                         fontSize: `${fontSize}px`,
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
                         textOverflow: 'ellipsis',
                         width: '100%',
-                    }, children: tabLabel }) }));
+                    }, children: tabLabel }) }, tabLabel));
         }) }));
 };
 export default HistogramTabs;

package/dist/presentations/ToggleControl/ToggleControl.js

@@ -19,6 +19,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 || !isChecked })), _jsx(PresentationTypography, { size: size, isDimmed: isDimmed || !isChecked, children: title })] }), _jsx(StyledToggle, { disabled: disabled, checked: isChecked, onChange: handleChange })] }), content.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: content.map((item) => (_jsx(Statistic, { ...item, isDimmed: isDimmed || !isChecked }))) }, uuidV4())), bar && (_jsx(Box, { sx: { padding: '0 8px', fontSize: '14px', lineHeight: '8px' }, children: _jsx(AnalysisBar, { isDimmed: isDimmed || !isChecked, 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 || !isChecked })), _jsx(PresentationTypography, { size: size, isDimmed: isDimmed || !isChecked, children: title })] }), _jsx(StyledToggle, { disabled: disabled, checked: isChecked, onChange: handleChange })] }), content.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: content.map((item) => (_jsx(Statistic, { ...item, isDimmed: isDimmed || !isChecked }, uuidV4()))) }, uuidV4())), bar && (_jsx(Box, { sx: { padding: '0 8px', fontSize: '14px', lineHeight: '8px' }, children: _jsx(AnalysisBar, { isDimmed: isDimmed || !isChecked, 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.1",
+  "version": "2.2.2",
   "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)"