@lunit/oui 3.0.1 → 3.1.0

package/dist/components/Chip/Chip.utils.js

@@ -47,5 +47,4 @@ const presetMap = {
         label: 'Requested',
     },
 };
-// eslint-disable-next-line import/prefer-default-export
 export { presetMap };

package/dist/components/Dropdown/Dropdown.js

@@ -31,9 +31,7 @@ const Dropdown = (({ children, placeholder, value, error, helperMsg, onChange, s
                     setTimeout(() => {
                         document.activeElement.blur();
                     }, 0);
-                }, onChange: handleChange, error: !!error, open: 
-                // eslint-disable-next-line no-nested-ternary
-                typeof otherProps.open !== 'undefined'
+                }, onChange: handleChange, error: !!error, open: typeof otherProps.open !== 'undefined'
                     ? otherProps.open
                     : otherProps.disabled
                         ? false

package/dist/components/Dropdown/IconDropdown.js

@@ -13,9 +13,7 @@ const IconDropdown = ({ open, disabled, children, ...otherProps }) => {
                     cursor: 'pointer',
                     transform: 'scaleY(-1)',
                 }
-                : undefined })), open: 
-        // eslint-disable-next-line no-nested-ternary
-        typeof open !== 'undefined' ? open : disabled ? false : isOpen, disabled: disabled, multiple: false, onClick: () => {
+                : undefined })), open: typeof open !== 'undefined' ? open : disabled ? false : isOpen, disabled: disabled, multiple: false, onClick: () => {
             if (!disabled)
                 setOpen(!isOpen);
         }, MenuProps: {

package/dist/components/List/ListItemCaption.styled.js

@@ -1,5 +1,4 @@
 import { styled, Typography } from '@mui/material';
-// eslint-disable-next-line import/prefer-default-export
 export const StyledListItemCaption = styled(Typography)(({ theme }) => ({
     ...theme.typography.body_m1,
     color: theme.palette.neutralGrey[45],

package/dist/components/LoadingIndicator/LoadingIndicator.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-var-requires */
 import { Player } from '@lottiefiles/react-lottie-player';
 import { LoadingOverlay, LoadingIndicatorBox, LoadingMessage, LoadingDetails, } from './LoadingIndicator.styled';
 const DotLoadingAnimation = require('./assets/DotLoadingAnimation.json');

package/dist/components/NoMatchContainer/NoMatchContainer.js

@@ -12,11 +12,11 @@ const NoMatchContainer = () => {
                 flexDirection: 'column',
                 alignItems: 'center',
             }, children: [_jsx(Typography, { variant: "h7", sx: {
-                        color: "neutralGrey.25",
+                        color: 'neutralGrey.25',
                         mt: '100px',
-                        mb: '16px'
+                        mb: '16px',
                     }, children: "Nothing matches your search" }), _jsx(Typography, { variant: "h9", sx: {
-                        color: "neutralGrey.25"
+                        color: 'neutralGrey.25',
                     }, children: "Please try again!" })] }) }));
 };
 export default NoMatchContainer;

package/dist/components/Radio/RadioGroup.styled.js

@@ -1,5 +1,4 @@
 import { styled, RadioGroup } from '@mui/material';
-// eslint-disable-next-line import/prefer-default-export
 export const StyledRadioGroup = styled(RadioGroup)(({ theme }) => ({
     gap: theme.spacing(2),
 }));

package/dist/components/TextField/TextInput.styled.js

@@ -26,9 +26,7 @@ const BaseTextInput = styled('input', {
 })(({ theme, large, error, leftIcon, width, type }) => {
     let resultStyle = {
         ...baseTextInputStyle(theme),
-        width: 
-        // eslint-disable-next-line no-nested-ternary
-        typeof width !== 'undefined' ? (typeof width === 'number' ? `${width}px` : width) : width,
+        width: typeof width !== 'undefined' ? (typeof width === 'number' ? `${width}px` : width) : width,
     };
     if (error) {
         resultStyle = {
@@ -64,9 +62,7 @@ const FileInputLabel = styled('label', {
 })(({ theme, large, error, leftIcon, width, disabled, readOnly }) => {
     let resultStyle = {
         ...baseTextInputStyle(theme),
-        width: 
-        // eslint-disable-next-line no-nested-ternary
-        typeof width !== 'undefined' ? (typeof width === 'number' ? `${width}px` : width) : width,
+        width: typeof width !== 'undefined' ? (typeof width === 'number' ? `${width}px` : width) : width,
     };
     if (error) {
         resultStyle = {

package/dist/components/Toggle/Toggle.js

@@ -7,13 +7,18 @@ const Toggle = ({ value, name, checked, defaultChecked, disabled, required, onCh
     return (_jsxs(Container, { ...rootProps, className: clsx('toggle', { 'is-disabled': disabled }, rootProps.className), component: label != null ? 'label' : 'span', children: [_jsx(ToggleComponent, { disableRipple: true, value: true, name: name, 
                 // indeterminate가 true인 Toggle을 클릭했을 때
                 // 발생하는 change event target의 checked property의 일관성을 보장함
-                checked: indeterminate ? true : checked, defaultChecked: defaultChecked, disabled: disabled, required: required, onChange: onChange, onChangeCapture: onChangeCapture, slotProps: { input: { ...inputProps, ref: inputRef } }, focusRipple: false, toggleColor: toggleColor }), label && (_jsx(Typography, { variant: "body_m1", sx: [{
+                checked: indeterminate ? true : checked, defaultChecked: defaultChecked, disabled: disabled, required: required, onChange: onChange, onChangeCapture: onChangeCapture, slotProps: { input: { ...inputProps, ref: inputRef } }, focusRipple: false, toggleColor: toggleColor }), label && (_jsx(Typography, { variant: "body_m1", sx: [
+                    {
                         display: 'flex',
-                        alignItems: 'center'
-                    }, labelPlacement === 'left' ? {
-                        order: -1
-                    } : {
-                        order: 1
-                    }], children: label }))] }));
+                        alignItems: 'center',
+                    },
+                    labelPlacement === 'left'
+                        ? {
+                            order: -1,
+                        }
+                        : {
+                            order: 1,
+                        },
+                ], children: label }))] }));
 };
 export default Toggle;

package/dist/components/UploadManager/UploadManager.js

@@ -83,10 +83,14 @@ const UploadManager = ({ title, subTitle, files, onClose, onCancel, onRetry, })
             bottom: '20px',
             right: '20px',
             zIndex: 10,
-        }, children: _jsxs(StyledPaper, { elevation: 1, children: [_jsxs(StyledToolbar, { children: [_jsx(Typography, { variant: "h9", children: title }), _jsx(Typography, { variant: "body1", sx: { marginLeft: '8px' }, children: subTitle }), _jsxs(StyledToolbarButtonContainer, { children: [_jsx(Tooltip, { title: expanded ? 'Minimize' : 'Maximize', children: _jsx(Box, { children: _jsx(Button, { onClick: handleExpandClick, variant: "ghost", color: "secondary", icon: _jsx(ArrowUp, { style: { color: theme.palette.neutralGrey[40] } }), size: "small", sx: [expanded ? {
-                                                    transform: 'rotate(0deg)'
-                                                } : {
-                                                    transform: 'rotate(180deg)'
-                                                }] }) }) }), _jsx(Tooltip, { title: "Close", children: _jsx(Box, { children: _jsx(Button, { onClick: onClose, variant: "ghost", color: "secondary", icon: _jsx(Close, { style: { color: theme.palette.neutralGrey[40] } }), size: "small" }) }) })] })] }), expanded && _jsx(Divider, { orientation: "horizontal" }), _jsx(StyledCollapse, { in: expanded, timeout: "auto", unmountOnExit: true, children: files.map((download, index) => (_jsxs(Fragment, { children: [_jsx(UploadFile, { file: download, onCancel: onCancel, onRetry: onRetry }), index !== files.length - 1 && _jsx(Divider, { orientation: "horizontal" })] }, download.id))) })] }) }));
+        }, children: _jsxs(StyledPaper, { elevation: 1, children: [_jsxs(StyledToolbar, { children: [_jsx(Typography, { variant: "h9", children: title }), _jsx(Typography, { variant: "body1", sx: { marginLeft: '8px' }, children: subTitle }), _jsxs(StyledToolbarButtonContainer, { children: [_jsx(Tooltip, { title: expanded ? 'Minimize' : 'Maximize', children: _jsx(Box, { children: _jsx(Button, { onClick: handleExpandClick, variant: "ghost", color: "secondary", icon: _jsx(ArrowUp, { style: { color: theme.palette.neutralGrey[40] } }), size: "small", sx: [
+                                                expanded
+                                                    ? {
+                                                        transform: 'rotate(0deg)',
+                                                    }
+                                                    : {
+                                                        transform: 'rotate(180deg)',
+                                                    },
+                                            ] }) }) }), _jsx(Tooltip, { title: "Close", children: _jsx(Box, { children: _jsx(Button, { onClick: onClose, variant: "ghost", color: "secondary", icon: _jsx(Close, { style: { color: theme.palette.neutralGrey[40] } }), size: "small" }) }) })] })] }), expanded && _jsx(Divider, { orientation: "horizontal" }), _jsx(StyledCollapse, { in: expanded, timeout: "auto", unmountOnExit: true, children: files.map((download, index) => (_jsxs(Fragment, { children: [_jsx(UploadFile, { file: download, onCancel: onCancel, onRetry: onRetry }), index !== files.length - 1 && _jsx(Divider, { orientation: "horizontal" })] }, download.id))) })] }) }));
 };
 export default UploadManager;

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

@@ -52,13 +52,18 @@ export const GraphScoreIndicator = ({ value, isCutoff, isJet, }) => {
             leftPos = '20px';
         }
     }
-    return (_jsxs(GraphScoreIndicatorContainer, { className: "analysis-bar-score-indicator", sx: [{
-                left: leftPos
-            }, isJet ? {
-                transform: 'translateX(-50%) translateY(8px)'
-            } : {
-                transform: 'translateX(-50%)'
-            }], isJet: isJet, children: [_jsx(Typography, { variant: "small_body_sb1", sx: { textAlign: 'center' }, children: value }), _jsx(GraphScoreIndicatorPip, {})] }));
+    return (_jsxs(GraphScoreIndicatorContainer, { className: "analysis-bar-score-indicator", sx: [
+            {
+                left: leftPos,
+            },
+            isJet
+                ? {
+                    transform: 'translateX(-50%) translateY(8px)',
+                }
+                : {
+                    transform: 'translateX(-50%)',
+                },
+        ], isJet: isJet, children: [_jsx(Typography, { variant: "small_body_sb1", sx: { textAlign: 'center' }, children: value }), _jsx(GraphScoreIndicatorPip, {})] }));
 };
 const GraphAxisLabelContainer = styled('span')(() => {
     return {

package/dist/presentations/FreeText/FreeText.js

@@ -7,26 +7,41 @@ const FreeText = ({ componentType = 'freeText', size = 'medium', content, height
         throw new Error("The 'componentType' prop is required.");
     if (!content)
         throw new Error("The 'content' prop is required.");
-    return (_jsx(Box, { sx: [{
+    return (_jsx(Box, { sx: [
+            {
                 display: 'flex',
-                overflowY: 'auto'
-            }, background ? {
-                padding: '8px 6px 8px 16px'
-            } : {
-                padding: 0
-            }, background ? {
-                borderRadius: '8px'
-            } : {
-                borderRadius: 0
-            }, background ? {
-                backgroundColor: theme.palette.neutralGrey[75]
-            } : {
-                backgroundColor: 'transparent'
-            }, height ? {
-                height: height
-            } : {
-                height: 'auto'
-            }], children: _jsx(PresentationTypography, { size: size, sx: [{
+                overflowY: 'auto',
+            },
+            background
+                ? {
+                    padding: '8px 6px 8px 16px',
+                }
+                : {
+                    padding: 0,
+                },
+            background
+                ? {
+                    borderRadius: '8px',
+                }
+                : {
+                    borderRadius: 0,
+                },
+            background
+                ? {
+                    backgroundColor: theme.palette.neutralGrey[75],
+                }
+                : {
+                    backgroundColor: 'transparent',
+                },
+            height
+                ? {
+                    height: height,
+                }
+                : {
+                    height: 'auto',
+                },
+        ], children: _jsx(PresentationTypography, { size: size, sx: [
+                {
                     display: 'block',
                     whiteSpace: 'pre-wrap',
                     overflow: 'auto',
@@ -37,15 +52,22 @@ const FreeText = ({ componentType = 'freeText', size = 'medium', content, height
                         width: '6px',
                         backgroundColor: theme.palette.neutralGrey[65],
                         borderRadius: '6px',
+                    },
+                },
+                background
+                    ? {
+                        color: '#FFFFFF',
+                    }
+                    : {
+                        color: 'inherit',
+                    },
+                height
+                    ? {
+                        height: '100%',
                     }
-                }, background ? {
-                    color: '#FFFFFF'
-                } : {
-                    color: 'inherit'
-                }, height ? {
-                    height: '100%'
-                } : {
-                    height: 'auto'
-                }], children: content }) }));
+                    : {
+                        height: 'auto',
+                    },
+            ], children: content }) }));
 };
 export default FreeText;

package/dist/presentations/HorizonDivider/HorizonDivider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Divider } from '../../components';
+import { Divider } from '../../components/Divider';
 const HorizonDivider = ({ componentType = 'divider' }) => {
     if (!componentType)
         throw new Error("The 'componentType' prop is required.");

package/dist/presentations/Threshold/Threshold.js

@@ -6,25 +6,27 @@ import { BaseSlider, Container } from './Threshold.styled';
 import { Score } from '../Score';
 import { Statistic } from '../Statistic';
 import { PresentationTypography } from '../presentations.styled';
-import { Button, Dropdown, DropdownItem } from '../../components';
+import { Button } from '../../components/Button';
+import { Dropdown, DropdownItem } from '../../components/Dropdown';
 import { HorizonDivider } from '../HorizonDivider';
 import { FreeText } from '../FreeText';
-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, }) => {
+import { NO_LABEL_ONLY_MARK, baseSliderMarks, getLabelOnlyMarkIndex, getSliderMarks, } from './Threshold.utils';
+const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells, statisticItems, options, description, controlStep = 1, showDefaultMark = false, isLoading = false, thresholdState, onChangeDropdown, onChangeSlider, onSliderChangeCommitted, onClickUpdateConfiguration, }) => {
     if (!componentType)
         throw new Error("The 'componentType' prop is required.");
-    if (!totalScore)
-        throw new Error("The 'totalScore' prop is required.");
     if (!statisticItems.length)
         throw new Error("The 'statisticItems' prop must contain at least one item.");
     if (!options.length)
         throw new Error("The 'options' prop must contain at least one item.");
     const [isThresholdChanged, setIsThresholdChanged] = useState(false);
     const selectedOptionValue = useMemo(() => {
-        return (options.find((option) => option.title === thresholdState?.selectedItem)?.value ||
+        return (options.find((option) => option.title === thresholdState?.selectedItem)?.value ??
             options[0].value);
     }, [options, thresholdState?.selectedItem]);
-    const presetValue = getPresetValue(options, thresholdState?.selectedItem);
+    const sliderMarks = useMemo(() => (showDefaultMark ? getSliderMarks(selectedOptionValue) : baseSliderMarks), [showDefaultMark, selectedOptionValue]);
+    const labelOnlyMarkIndex = useMemo(() => showDefaultMark
+        ? getLabelOnlyMarkIndex(sliderMarks, selectedOptionValue)
+        : NO_LABEL_ONLY_MARK, [showDefaultMark, sliderMarks, selectedOptionValue]);
     const handleDropdownChange = useCallback((event) => {
         onChangeDropdown(event);
         setIsThresholdChanged(false);
@@ -37,11 +39,11 @@ const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells,
         onClickUpdateConfiguration();
         setIsThresholdChanged(false);
     }, [onClickUpdateConfiguration]);
-    return (_jsxs(Container, { children: [_jsx(Score, { ...totalScore }), _jsx(Statistic, { ...totalCells }), statisticItems.map((item) => {
+    return (_jsxs(Container, { children: [totalScore && _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: baseSliderMarks, 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", marks: sliderMarks, labelOnlyMarkIndex: labelOnlyMarkIndex, 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

@@ -1,4 +1,5 @@
 import { Box, Slider, styled } from '@mui/material';
+import { NO_LABEL_ONLY_MARK } from './Threshold.utils';
 import theme from '../../theme';
 export const Container = styled(Box)({
     display: 'flex',
@@ -6,67 +7,64 @@ export const Container = styled(Box)({
     gap: '12px',
 });
 export const BaseSlider = styled(Slider, {
-    shouldForwardProp: (prop) => prop !== 'defaultThreshold',
-})(({ defaultThreshold, marks, disabled }) => {
-    let markIndex = 0;
-    if (Array.isArray(marks) && marks.length > 0) {
-        markIndex = marks.findIndex((mark) => mark.value === defaultThreshold);
-    }
-    const defaultThresClass = `&:nth-of-type(${markIndex + 4})`;
-    const defaultLabelClass = `&:nth-of-type(${markIndex + 5})`;
-    return {
-        '& .MuiSlider-rail': {
-            background: theme.palette.neutralGrey[75],
-            height: '8px',
+    shouldForwardProp: (prop) => prop !== 'labelOnlyMarkIndex',
+})(({ disabled, labelOnlyMarkIndex = NO_LABEL_ONLY_MARK }) => ({
+    '& .MuiSlider-rail': {
+        background: theme.palette.neutralGrey[75],
+        height: '8px',
+    },
+    '& .MuiSlider-track': {
+        display: 'none',
+    },
+    '& .MuiSlider-thumb': {
+        background: theme.palette.neutralGrey[0],
+        '&:hover': {
+            boxShadow: `0px 0px 0px 8px rgba(255, 0, 0, 0.2)`,
         },
-        '& .MuiSlider-track': {
-            display: 'none',
+        '&.Mui-focusVisible': {
+            boxShadow: `0px 0px 0px 8px rgba(255, 0, 0, 0.2)`,
         },
-        '& .MuiSlider-thumb': {
-            background: theme.palette.neutralGrey[0],
-            '&:hover': {
-                boxShadow: `0px 0px 0px 8px rgba(255, 0, 0, 0.2)`,
-            },
-            '&.Mui-focusVisible': {
-                boxShadow: `0px 0px 0px 8px rgba(255, 0, 0, 0.2)`,
-            },
+    },
+    '& .MuiSlider-mark': {
+        background: theme.palette.neutralGrey[40],
+        height: '6px',
+        width: '6px',
+        borderRadius: '50%',
+    },
+    '& .MuiSlider-markLabel': {
+        fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
+        fontSize: '8px',
+        fontStyle: 'normal',
+        fontWeight: '500',
+        lineHeight: '12px',
+    },
+    '& .MuiSlider-valueLabel': {
+        fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
+        fontSize: '12px',
+        fontWeight: '700',
+        lineHeight: '16px',
+        background: 'unset',
+        padding: 0,
+        width: 32,
+        height: 32,
+        borderRadius: '50% 50% 50% 0',
+        backgroundColor: disabled ? theme.palette.neutralGrey[60] : theme.palette.lunitTeal[40],
+        transformOrigin: 'bottom left',
+        transform: 'translate(50%, -100%) rotate(-45deg) scale(0)',
+        '&:before': { display: 'none' },
+        '&.MuiSlider-valueLabelOpen': {
+            transform: 'translate(50%, -100%) rotate(-45deg) scale(1)',
         },
-        '& .MuiSlider-mark': {
-            background: theme.palette.neutralGrey[40],
-            height: '6px',
-            width: '6px',
-            borderRadius: '50%',
+        '& > *': {
+            transform: 'rotate(45deg)',
         },
-        '& .MuiSlider-markLabel': {
-            fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
-            fontSize: '8px',
-            fontStyle: 'normal',
-            fontWeight: '500',
-            lineHeight: '12px',
+        '&.Mui-disabled': {
+            visibility: 'visible',
         },
-        '& .MuiSlider-valueLabel': {
-            fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
-            fontSize: '12px',
-            fontWeight: '700',
-            lineHeight: '16px',
-            background: 'unset',
-            padding: 0,
-            width: 32,
-            height: 32,
-            borderRadius: '50% 50% 50% 0',
-            backgroundColor: disabled ? theme.palette.neutralGrey[60] : theme.palette.lunitTeal[40],
-            transformOrigin: 'bottom left',
-            transform: 'translate(50%, -100%) rotate(-45deg) scale(0)',
-            '&:before': { display: 'none' },
-            '&.MuiSlider-valueLabelOpen': {
-                transform: 'translate(50%, -100%) rotate(-45deg) scale(1)',
-            },
-            '& > *': {
-                transform: 'rotate(45deg)',
-            },
-            '&.Mui-disabled': {
-                visibility: 'visible',
-            },
+    },
+    ...(labelOnlyMarkIndex > NO_LABEL_ONLY_MARK && {
+        [`& .MuiSlider-mark[data-index="${labelOnlyMarkIndex}"]`]: {
+            display: 'none',
         },
-    };
-});
+    }),
+}));

package/dist/presentations/Threshold/Threshold.utils.js

@@ -1,3 +1,5 @@
+const DEFAULT_MARK_LABEL_PREFIX = 'Default: ';
+export const NO_LABEL_ONLY_MARK = -1;
 export const baseSliderMarks = [
     { value: 0, label: '0' },
     { value: 10 },
@@ -11,24 +13,31 @@ export const baseSliderMarks = [
     { value: 90 },
     { value: 100, label: '100' },
 ];
-export const getPresetValue = (options, selectedItem) => {
-    const presetValue = options.find((option) => option.title === selectedItem && option.isPreset)
-        ?.value;
-    return presetValue;
-};
-export const getSliderMarks = (presetValue) => {
-    const marks = baseSliderMarks.map((mark) => {
-        if (mark.value === presetValue) {
-            return {
-                ...mark,
-                label: `Preset: ${presetValue}`,
-            };
-        }
-        return mark;
+/**
+ * Builds the slider marks with the default threshold labelled.
+ *
+ * @param defaultThreshold - Default threshold of the selected option
+ * @returns Marks ordered by value, including an extra mark when the default sits between intervals
+ */
+export const getSliderMarks = (defaultThreshold) => {
+    const defaultLabel = `${DEFAULT_MARK_LABEL_PREFIX}${defaultThreshold}`;
+    const marks = baseSliderMarks.map((mark) => mark.value === defaultThreshold ? { ...mark, label: defaultLabel } : mark);
+    if (baseSliderMarks.some((mark) => mark.value === defaultThreshold))
+        return marks;
+    const insertIndex = marks.findIndex((mark) => mark.value > defaultThreshold);
+    marks.splice(insertIndex < 0 ? marks.length : insertIndex, 0, {
+        value: defaultThreshold,
+        label: defaultLabel,
     });
-    if (!baseSliderMarks.find((mark) => mark.value === presetValue)) {
-        const index = Math.floor(presetValue / 10);
-        marks.splice(index + 1, 0, { value: presetValue, label: `Preset: ${presetValue}` });
-    }
     return marks;
 };
+/**
+ * Finds the mark that exists only to label the default threshold.
+ *
+ * @param marks - Marks built by `getSliderMarks`
+ * @param defaultThreshold - Default threshold of the selected option
+ * @returns Index of the mark whose dot should stay hidden, or `-1` when the default sits on an interval
+ */
+export const getLabelOnlyMarkIndex = (marks, defaultThreshold) => baseSliderMarks.some((mark) => mark.value === defaultThreshold)
+    ? NO_LABEL_ONLY_MARK
+    : marks.findIndex((mark) => mark.value === defaultThreshold);

package/dist/types/components/Tooltip/Tooltip.types.d.ts

@@ -2,10 +2,10 @@ import { ReactNode } from 'react';
 import type { TooltipClasses, TooltipProps as MuiTooltipProps } from '@mui/material';
 export type Position = Pick<TooltipProps, 'placement'>;
 export type TooltipSizes = 'small' | 'large';
-export type TooltipSize = {
+export interface TooltipSize {
     width: number;
     height: number;
-};
+}
 export type TooltipPlacement = TooltipClasses['tooltipPlacementBottom'] | TooltipClasses['tooltipPlacementLeft'] | TooltipClasses['tooltipPlacementRight'] | TooltipClasses['tooltipPlacementTop'];
 export type ArrowSizeBySize = Record<TooltipSizes, TooltipSize>;
 export type TooltipPlacementToSize = Record<TooltipPlacement, ArrowSizeBySize>;

package/dist/types/presentations/Threshold/Threshold.d.ts

@@ -1,3 +1,3 @@
 import { ThresholdProps } from './Threshold.types';
-declare const Threshold: ({ componentType, title, totalScore, totalCells, statisticItems, options, description, controlStep, isLoading, thresholdState, onChangeDropdown, onChangeSlider, onSliderChangeCommitted, onClickUpdateConfiguration, }: ThresholdProps) => import("react/jsx-runtime").JSX.Element;
+declare const Threshold: ({ componentType, title, totalScore, totalCells, statisticItems, options, description, controlStep, showDefaultMark, isLoading, thresholdState, onChangeDropdown, onChangeSlider, onSliderChangeCommitted, onClickUpdateConfiguration, }: ThresholdProps) => import("react/jsx-runtime").JSX.Element;
 export default Threshold;

package/dist/types/presentations/Threshold/Threshold.types.d.ts

@@ -9,18 +9,29 @@ export interface ThresholdOption {
     value: number;
     isPreset?: boolean;
 }
+export interface ThresholdMark {
+    /** Position of the mark on the 0-100 intensity scale */
+    value: number;
+    /** Text rendered under the mark; marks without a label render as a dot only */
+    label?: string;
+}
 export interface ThresholdSpec {
     componentType: 'threshold';
-    totalScore: ScoreProps;
+    /** Overall score summary shown above the cell statistics; omitted when the analysis has no score */
+    totalScore?: ScoreProps;
     totalCells: StatisticProps;
     statisticItems: StatisticProps[];
     title?: string;
     description?: {
-        preset: string;
-        user: string;
+        /** Guidance shown while a preset option is selected */
+        preset?: string;
+        /** Guidance shown while a user-adjustable option is selected */
+        user?: string;
     };
     options: ThresholdOption[];
     controlStep?: number;
+    /** Labels the selected option's threshold on the slider, e.g. `Default: 40`; off by default */
+    showDefaultMark?: boolean;
 }
 export interface ThresholdProps extends ThresholdSpec {
     thresholdState?: {
@@ -35,5 +46,6 @@ export interface ThresholdProps extends ThresholdSpec {
     isLoading?: boolean;
 }
 export interface BaseSliderProps extends SliderProps {
-    defaultThreshold: number;
+    /** Index of the mark that renders its label without a dot; `-1` hides nothing */
+    labelOnlyMarkIndex?: number;
 }

package/dist/types/presentations/Threshold/Threshold.utils.d.ts

@@ -1,16 +1,18 @@
-import { ThresholdOption } from './Threshold.types';
-export declare const baseSliderMarks: ({
-    value: number;
-    label: string;
-} | {
-    value: number;
-    label?: undefined;
-})[];
-export declare const getPresetValue: (options: ThresholdOption[], selectedItem: string) => number;
-export declare const getSliderMarks: (presetValue: number) => ({
-    value: number;
-    label: string;
-} | {
-    value: number;
-    label?: undefined;
-})[];
+import { ThresholdMark } from './Threshold.types';
+export declare const NO_LABEL_ONLY_MARK = -1;
+export declare const baseSliderMarks: ThresholdMark[];
+/**
+ * Builds the slider marks with the default threshold labelled.
+ *
+ * @param defaultThreshold - Default threshold of the selected option
+ * @returns Marks ordered by value, including an extra mark when the default sits between intervals
+ */
+export declare const getSliderMarks: (defaultThreshold: number) => ThresholdMark[];
+/**
+ * Finds the mark that exists only to label the default threshold.
+ *
+ * @param marks - Marks built by `getSliderMarks`
+ * @param defaultThreshold - Default threshold of the selected option
+ * @returns Index of the mark whose dot should stay hidden, or `-1` when the default sits on an interval
+ */
+export declare const getLabelOnlyMarkIndex: (marks: ThresholdMark[], defaultThreshold: number) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "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)"
@@ -8,14 +8,25 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@lottiefiles/react-lottie-player": "^3.5.3",
     "@mui/icons-material": "^9.0.0",
     "@mui/lab": "^9.0.0",
     "@mui/material": "^9.0.0",
     "@mui/system": "^9.0.0",
+    "@mui/x-data-grid": "^9.0.0",
+    "@mui/x-data-grid-pro": "^9.0.0",
     "@mui/x-date-pickers": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
+  "peerDependenciesMeta": {
+    "@lottiefiles/react-lottie-player": {
+      "optional": true
+    },
+    "@mui/x-data-grid-pro": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@date-io/date-fns": "^3.2.1",
     "@lunit/design-system-icons": "2.1.0",
@@ -31,6 +42,7 @@
   },
   "scripts": {
     "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "test": "jest",
     "build": "npm run build:transpile",
     "build:transpile": "tsc -p tsconfig.build.json",
     "build:cjs": "NODE_ENV=production webpack -c config/cjs.config.js",
@@ -82,7 +94,7 @@
       "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
     },
     "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
+      "[/\\\\]node_modules[/\\\\](?!uuid[/\\\\]).+\\.(js|jsx|mjs|cjs|ts|tsx)$",
       "^.+\\.module\\.(css|sass|scss)$"
     ],
     "modulePaths": [],
@@ -120,7 +132,7 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@lottiefiles/react-lottie-player": "^3.5.3",
-    "@lunit/eslint-config": "^2.0.0",
+    "@lunit/eslint-config": "^2.0.1",
     "@mui/icons-material": "9.1.0",
     "@mui/lab": "9.0.0-beta.3",
     "@mui/material": "9.1.0",
@@ -164,7 +176,7 @@
     "css-minimizer-webpack-plugin": "^8.0.0",
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
-    "eslint": "^8.3.0",
+    "eslint": "^9.39.5",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^5.1.0",
@@ -176,6 +188,7 @@
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.3.0",
+    "jest-environment-jsdom": "^30.4.1",
     "jest-resolve": "^27.4.2",
     "jest-watch-typeahead": "^1.0.0",
     "lint-staged": "^15.2.0",