@lunit/oui 2.4.6 → 2.4.8

package/dist/presentations/AnalysisBar/AnalysisBar.js

@@ -18,7 +18,7 @@ const Segments = ({ segments, isCutoff }) => {
             if (segment.color === 'jet') {
                 return _jsx(HeatmapGraphSVG, { width: `${segment.width}%` });
             }
-            return (_jsx(GraphSegment, { color: segment.color, width: segment.width, isFirstSegment: i === 0, isLastSegment: i === segments.length - 1, isCutoff: isCutoff, combinedWidth: combinedWidth, isNextSegment: onePercentSegmentIndex > 0 && i === onePercentSegmentIndex + 1, isOnePercentSegment: segment.width <= 1 }, i));
+            return (_jsx(GraphSegment, { color: segment.color, width: segment.width, isFirstSegment: i === 0, isLastSegment: i === segments.length - 1, isCutoff: isCutoff, combinedWidth: combinedWidth, isNextSegment: onePercentSegmentIndex >= 0 && i === onePercentSegmentIndex + 1, isOnePercentSegment: segment.width <= 1 }, i));
         }) }));
 };
 const AnalysisBar = ({ componentType = 'analysisBar', isCutoff = false, expressionValue, caption, expressionLevels = [], expressionLabels = [], segments, isDimmed = false, }) => {

package/dist/presentations/Threshold/Threshold.js

@@ -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.");
@@ -22,7 +22,6 @@ const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells,
     const [isThresholdChanged, setIsThresholdChanged] = useState(false);
     const [selectedOptionValue, setSelectedOptionValue] = useState(options[0].value);
     const presetValue = getPresetValue(options, thresholdState?.selectedItem);
-    const marks = getSliderMarks(presetValue);
     const handleDropdownChange = (event) => {
         onChangeDropdown(event);
         const newOption = options.find((option) => option.title === event.target.value)?.value;
@@ -41,7 +40,7 @@ const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells,
                 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/package.json

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