@lunit/oui 2.4.7 → 2.4.9

package/dist/presentations/AnalysisBar/AnalysisBar.js

@@ -9,7 +9,7 @@ const Segments = ({ segments, isCutoff }) => {
         return null;
     }
     const validSegments = segments.filter((segment) => segment.width > 0);
-    const combinedWidth = segments.length > 1 ? segments[0].width + segments[1].width : 0;
+    const combinedWidth = segments.reduce((sum, segment) => sum + segment.width, 0);
     const onePercentSegmentIndex = _findIndex(segments, (segment) => segment.width > 0 && segment.width <= 1);
     if (segments?.length === 1 && segments[0].color === 'jet') {
         return (_jsx(Box, { sx: { width: '100%', height: '14px', transform: 'scaleY(0.8)' }, children: _jsx(HeatmapGraphSVG, {}) }));

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

@@ -105,7 +105,7 @@ const segmentStyle = (color, width, isFirstSegment, isLastSegment, isCutoff, com
         borderBottomRightRadius: isLastSegment ? '2px' : '0px',
         width: `${width}%`,
     };
-    if (isOnePercentSegment) {
+    if (isOnePercentSegment && isCutoff) {
         return {
             ...baseStyle,
             width: '12px',

package/dist/presentations/Threshold/Threshold.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import { v4 as uuidV4 } from 'uuid';
 import { Box } from '@mui/material';
 import { BaseSlider, Container } from './Threshold.styled';
@@ -9,7 +9,7 @@ import { PresentationTypography } from '../presentations.styled';
 import { Button, Dropdown, DropdownItem } from '../../components';
 import { HorizonDivider } from '../HorizonDivider';
 import { FreeText } from '../FreeText';
-import { getPresetValue, getSliderMarks } from './Threshold.utils';
+import { baseSliderMarks, getPresetValue } from './Threshold.utils';
 const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells, statisticItems, options, description, controlStep = 1, isLoading = false, thresholdState, onChangeDropdown, onChangeSlider, onSliderChangeCommitted, onClickUpdateConfiguration, }) => {
     if (!componentType)
         throw new Error("The 'componentType' prop is required.");
@@ -20,28 +20,28 @@ const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells,
     if (!options.length)
         throw new Error("The 'options' prop must contain at least one item.");
     const [isThresholdChanged, setIsThresholdChanged] = useState(false);
-    const [selectedOptionValue, setSelectedOptionValue] = useState(options[0].value);
+    const selectedOptionValue = useMemo(() => {
+        return (options.find((option) => option.title === thresholdState?.selectedItem)?.value ||
+            options[0].value);
+    }, [options, thresholdState?.selectedItem]);
     const presetValue = getPresetValue(options, thresholdState?.selectedItem);
-    const marks = getSliderMarks(presetValue);
-    const handleDropdownChange = (event) => {
+    const handleDropdownChange = useCallback((event) => {
         onChangeDropdown(event);
-        const newOption = options.find((option) => option.title === event.target.value)?.value;
-        setSelectedOptionValue(newOption);
         setIsThresholdChanged(false);
-    };
-    const handleSliderChange = (event, value) => {
+    }, [onChangeDropdown]);
+    const handleSliderChange = useCallback((event, value) => {
         onChangeSlider(event, value);
         setIsThresholdChanged(value !== selectedOptionValue);
-    };
-    const handleUpdateConfiguration = () => {
+    }, [onChangeSlider, selectedOptionValue]);
+    const handleUpdateConfiguration = useCallback(() => {
         onClickUpdateConfiguration();
         setIsThresholdChanged(false);
-    };
+    }, [onClickUpdateConfiguration]);
     return (_jsxs(Container, { children: [_jsx(Score, { ...totalScore }), _jsx(Statistic, { ...totalCells }), statisticItems.map((item) => {
                 return (_jsx(Statistic, { ...item }, uuidV4()));
             }), _jsx(HorizonDivider, { componentType: "divider" }), _jsx(PresentationTypography, { size: "medium", children: title }), _jsx(Dropdown, { value: thresholdState?.selectedItem, onChange: handleDropdownChange, sx: { width: '258px' }, children: options.map((option) => {
                     return (_jsx(DropdownItem, { value: option.title, children: option.title }, option.title));
-                }) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', paddingTop: '36px', gap: '6px' }, children: [_jsx(BaseSlider, { disabled: thresholdState?.isPresetSelected, step: controlStep, value: thresholdState?.sliderValue, valueLabelDisplay: "on", defaultThreshold: presetValue, marks: marks, onChange: handleSliderChange, onChangeCommitted: onSliderChangeCommitted }), !thresholdState?.isPresetSelected && (_jsx(Button, { id: "update-threshold-config-btn", label: "Update Configuration", sx: {
+                }) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', paddingTop: '36px', gap: '6px' }, children: [_jsx(BaseSlider, { disabled: thresholdState?.isPresetSelected, step: controlStep, value: thresholdState?.sliderValue, valueLabelDisplay: "on", defaultThreshold: presetValue, marks: baseSliderMarks, onChange: handleSliderChange, onChangeCommitted: onSliderChangeCommitted }), !thresholdState?.isPresetSelected && (_jsx(Button, { id: "update-threshold-config-btn", label: "Update Configuration", sx: {
                             width: '100%',
                         }, disabled: !isThresholdChanged || isLoading, onClick: handleUpdateConfiguration, loading: isLoading })), thresholdState?.isPresetSelected && description?.preset && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.preset })), !thresholdState?.isPresetSelected && description?.user && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.user }))] })] }));
 };

package/dist/presentations/Threshold/Threshold.styled.js

@@ -7,7 +7,7 @@ export const Container = styled(Box)({
 });
 export const BaseSlider = styled(Slider, {
     shouldForwardProp: (prop) => prop !== 'defaultThreshold',
-})(({ defaultThreshold, marks }) => {
+})(({ defaultThreshold, marks, disabled }) => {
     let markIndex = 0;
     if (Array.isArray(marks) && marks.length > 0) {
         markIndex = marks.findIndex((mark) => mark.value === defaultThreshold);
@@ -30,18 +30,12 @@ export const BaseSlider = styled(Slider, {
             '&.Mui-focusVisible': {
                 boxShadow: `0px 0px 0px 8px rgba(255, 0, 0, 0.2)`,
             },
-            '&.Mui-disabled': {
-                visibility: 'hidden',
-            },
         },
         '& .MuiSlider-mark': {
             background: theme.palette.neutralGrey[40],
             height: '6px',
             width: '6px',
             borderRadius: '50%',
-            [defaultThresClass]: {
-                background: theme.palette.lunitTeal[40],
-            },
         },
         '& .MuiSlider-markLabel': {
             fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
@@ -49,9 +43,6 @@ export const BaseSlider = styled(Slider, {
             fontStyle: 'normal',
             fontWeight: '500',
             lineHeight: '12px',
-            [defaultLabelClass]: {
-                color: theme.palette.lunitTeal[40],
-            },
         },
         '& .MuiSlider-valueLabel': {
             fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
@@ -63,7 +54,7 @@ export const BaseSlider = styled(Slider, {
             width: 32,
             height: 32,
             borderRadius: '50% 50% 50% 0',
-            backgroundColor: theme.palette.lunitTeal[40],
+            backgroundColor: disabled ? theme.palette.neutralGrey[60] : theme.palette.lunitTeal[40],
             transformOrigin: 'bottom left',
             transform: 'translate(50%, -100%) rotate(-45deg) scale(0)',
             '&:before': { display: 'none' },

package/dist/presentations/ToggleControl/ToggleControl.js

@@ -22,6 +22,6 @@ const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbo
     return (_jsxs(ToggleControlOuter, { "data-testid": `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, 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, expressionLabels: bar.expressionLabels, 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', width: '100%' }, children: _jsx(AnalysisBar, { isDimmed: isDimmed || !checked, componentType: bar.componentType, expressionValue: bar.expressionValue, expressionLevels: bar.expressionLevels, expressionLabels: bar.expressionLabels, caption: bar.caption, segments: bar.segments }) }))] }));
 };
 export default ToggleControl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "2.4.7",
+  "version": "2.4.9",
   "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)"
@@ -11,7 +11,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@lunit/design-system-icons": "^2.1.0",
-    "@lunit/design-system-logo": "^1.1.0",
+    "@lunit/design-system-logo": "1.1.1",
     "@mui/icons-material": "^5.15.2",
     "@mui/lab": "^5.0.0-alpha.158",
     "@mui/material": "^5.15.2",