@lunit/oui 2.2.26 → 2.2.28

package/dist/presentations/Preview/Preview.js

@@ -11,8 +11,8 @@ import { Accordion } from '../Accordion';
 import { Statistic } from '../Statistic';
 import { Score } from '../Score';
 import { FreeText } from '../FreeText';
-import { Threshold } from '../Threshold';
 import { Histogram } from '../Histogram';
+import ThresholdControl from './ThresholdControl';
 const Preview = ({ visualizationControls = [], analysisSummary = [] }) => {
     const [controls, setControls] = useState(visualizationControls);
     return (_jsxs(Container, { children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: visualizationControls.map((item, index) => {
@@ -55,6 +55,6 @@ const Preview = ({ visualizationControls = [], analysisSummary = [] }) => {
                         });
                     }
                     return (_jsxs(Box, { children: [item.componentType === 'toggle' && (_jsx(ToggleControl, { ...item }, uuidV4())), item.componentType === 'toggleGroup' && (_jsx(ToggleControlGroup, { ...item }, uuidV4())), item.componentType === 'analysisBar' && (_jsx(AnalysisBar, { ...item }, uuidV4()))] }, uuidV4()));
-                }) }), _jsx(HorizonDivider, { componentType: "divider" }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: [_jsx(FreeText, { componentType: "freeText", size: "medium-bold", content: "Analysis Summary" }), analysisSummary.map((item) => (_jsxs(Box, { children: [item.componentType === 'accordion' && (_jsx(Accordion, { ...item }, uuidV4())), item.componentType === 'analysisBar' && (_jsx(AnalysisBar, { ...item }, uuidV4())), item.componentType === 'statistic' && (_jsx(Statistic, { ...item }, uuidV4())), item.componentType === 'score' && (_jsx(Score, { ...item }, uuidV4())), item.componentType === 'freeText' && (_jsx(FreeText, { ...item }, uuidV4())), item.componentType === 'threshold' && (_jsx(Threshold, { ...item, onChangeDropdown: () => { }, onSliderChangeCommitted: () => { }, onClickUpdateConfiguration: () => { } }, uuidV4())), item.componentType === 'histogram' && (_jsx(Histogram, { ...item }, uuidV4()))] }, uuidV4())))] })] }));
+                }) }), _jsx(HorizonDivider, { componentType: "divider" }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: [_jsx(FreeText, { componentType: "freeText", size: "medium-bold", content: "Analysis Summary" }), analysisSummary.map((item) => (_jsxs(Box, { children: [item.componentType === 'accordion' && (_jsx(Accordion, { ...item }, uuidV4())), item.componentType === 'analysisBar' && (_jsx(AnalysisBar, { ...item }, uuidV4())), item.componentType === 'statistic' && (_jsx(Statistic, { ...item }, uuidV4())), item.componentType === 'score' && (_jsx(Score, { ...item }, uuidV4())), item.componentType === 'freeText' && (_jsx(FreeText, { ...item }, uuidV4())), item.componentType === 'threshold' && (_jsx(ThresholdControl, { ...item }, uuidV4())), item.componentType === 'histogram' && (_jsx(Histogram, { ...item }, uuidV4()))] }, uuidV4())))] })] }));
 };
 export default Preview;

package/dist/presentations/Preview/ThresholdControl.d.ts

@@ -0,0 +1,3 @@
+import { type ThresholdProps } from '../Threshold';
+declare const ThresholdControl: (threshold: ThresholdProps) => import("react/jsx-runtime").JSX.Element;
+export default ThresholdControl;

package/dist/presentations/Preview/ThresholdControl.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Threshold } from '../Threshold';
+const ThresholdControl = (threshold) => {
+    const [selectedItem, setSelectedItem] = useState(threshold?.options[0].title.toString());
+    const [sliderValue, setSliderValue] = useState(threshold?.options[0].value);
+    const [isPresetSelected, setIsPresetSelected] = useState(threshold?.options[0].isPreset || false);
+    const onChangeDropdown = (event) => {
+        setSelectedItem(event.target.value);
+        setSliderValue(threshold.options.find((option) => option.title === event.target.value)?.value);
+        setIsPresetSelected(threshold.options.find((option) => option.title === event.target.value)?.isPreset || false);
+    };
+    const onChangeSlider = (event, value) => {
+        setSliderValue(value);
+    };
+    const onSliderChangeCommitted = (event, value) => { };
+    const onClickUpdateConfiguration = () => { };
+    return (_jsx(Threshold, { ...threshold, thresholdState: {
+            selectedItem,
+            sliderValue,
+            isPresetSelected,
+        }, onChangeDropdown: onChangeDropdown, onChangeSlider: onChangeSlider, onSliderChangeCommitted: onSliderChangeCommitted, onClickUpdateConfiguration: onClickUpdateConfiguration }));
+};
+export default ThresholdControl;

package/dist/presentations/Score/Score.js

@@ -10,6 +10,8 @@ const Score = ({ componentType = 'score', title, size = 'medium', metrics }) =>
         throw new Error("The 'title' prop is required.");
     if (!metrics)
         throw new Error("The 'metrics' prop is required.");
+    if (metrics && !metrics.value)
+        throw new Error("The 'value' prop in 'metrics' is required.");
     return (_jsxs(PresentationTypography, { size: size, style: { color: metrics.isFullColored ? metrics.color : 'inherit' }, children: [title, ": ", metrics.value, metrics.scoreType && (_jsx("span", { style: { color: metrics.color, marginLeft: 4 }, children: capitalize(metrics.scoreType) }))] }));
 };
 export default Score;

package/dist/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, onChangeDropdown, onSliderChangeCommitted, onClickUpdateConfiguration, }: ThresholdProps) => import("react/jsx-runtime").JSX.Element;
+declare const Threshold: ({ componentType, title, totalScore, totalCells, statisticItems, options, description, controlStep, isLoading, thresholdState, onChangeDropdown, onChangeSlider, onSliderChangeCommitted, onClickUpdateConfiguration, }: ThresholdProps) => import("react/jsx-runtime").JSX.Element;
 export default Threshold;

package/dist/presentations/Threshold/Threshold.js

@@ -10,7 +10,7 @@ import { Button, Dropdown, DropdownItem } from '../../components';
 import { HorizonDivider } from '../HorizonDivider';
 import { FreeText } from '../FreeText';
 import { getPresetValue, getSliderMarks } from './Threshold.utils';
-const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells, statisticItems, options, description, controlStep = 1, isLoading = false, onChangeDropdown, onSliderChangeCommitted, onClickUpdateConfiguration, }) => {
+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.");
     if (!totalScore)
@@ -19,22 +19,16 @@ const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells,
         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 [selectedItem, setSelectedItem] = useState(options[0].title.toString());
-    const [selectedValue, setSelectedValue] = useState(options[0].value);
-    const [selectedOptionValue, setSelectedOptionValue] = useState(options[0].value);
-    const [isPresetSelected, setIsPresetSelected] = useState(options[0].isPreset);
     const [isThresholdChanged, setIsThresholdChanged] = useState(false);
-    const presetValue = getPresetValue(options, selectedItem);
+    const [selectedOptionValue, setSelectedOptionValue] = useState(options[0].value);
+    const presetValue = getPresetValue(options, thresholdState?.selectedItem);
     const marks = getSliderMarks(presetValue);
-    const handleChange = (event) => {
-        setSelectedItem(event.target.value);
-        setSelectedValue(options.find((option) => option.title === event.target.value)?.value);
-        setSelectedOptionValue(options.find((option) => option.title === event.target.value)?.value);
-        setIsPresetSelected(options.find((option) => option.title === event.target.value)?.isPreset || false);
+    const handleDropdownChange = (event) => {
         onChangeDropdown(event);
+        setSelectedOptionValue(options.find((option) => option.title === event.target.value)?.value);
     };
     const handleSliderChange = (event, value) => {
-        setSelectedValue(value);
+        onChangeSlider(event, value);
         setIsThresholdChanged(value !== selectedOptionValue);
     };
     const handleUpdateConfiguration = () => {
@@ -43,10 +37,10 @@ const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells,
     };
     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: selectedItem, onChange: handleChange, sx: { width: '258px' }, children: options.map((option) => {
+            }), _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: isPresetSelected, step: controlStep, value: selectedValue, valueLabelDisplay: "on", defaultThreshold: presetValue, marks: marks, onChange: handleSliderChange, onChangeCommitted: onSliderChangeCommitted }), !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: marks, 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 })), isPresetSelected && description?.preset && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.preset })), !isPresetSelected && description?.user && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.user }))] })] }));
+                        }, 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 }))] })] }));
 };
 export default Threshold;

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

@@ -23,7 +23,13 @@ export interface ThresholdSpec {
     controlStep?: number;
 }
 export interface ThresholdProps extends ThresholdSpec {
+    thresholdState?: {
+        selectedItem: string;
+        sliderValue: number;
+        isPresetSelected: boolean;
+    };
     onChangeDropdown: (event: SelectChangeEvent) => void;
+    onChangeSlider: (event: Event | SyntheticEvent, value: number | number[]) => void;
     onSliderChangeCommitted: (event: Event | SyntheticEvent, value: number | number[]) => void;
     onClickUpdateConfiguration: () => void;
     isLoading?: boolean;

package/dist/presentations/ToggleControl/ToggleControl.js

@@ -17,6 +17,8 @@ const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbo
         throw new Error("The 'title' prop is required.");
     if (checked === undefined)
         throw new Error("The 'checked' prop is required.");
+    if (typeof checked !== 'boolean')
+        throw new Error("The 'checked' prop must be a boolean.");
     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',

package/dist/presentations/ToggleControlGroup/ToggleControlGroup.js

@@ -1,3 +1,4 @@
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { v4 as uuidV4 } from 'uuid';
 import { ToggleControlGroupContainer } from './ToggleControlGroup.styled';
@@ -9,12 +10,14 @@ const ToggleControlGroup = ({ componentType = 'toggleGroup', size = 'medium', ti
         throw new Error("The 'title' prop is required.");
     if (checked === undefined)
         throw new Error("The 'checked' prop is required.");
+    if (typeof checked !== 'boolean')
+        throw new Error("The 'checked' prop must be a boolean.");
     if (!childToggles.length)
         throw new Error("The 'childToggles' prop must contain at least one child toggle.");
     return (_jsxs(ToggleControlGroupContainer, { children: [_jsx(ToggleControl, { isParent: true, componentType: "toggle", bar: bar, disabled: disabled, size: size, title: title, tooltip: tooltip, checked: checked, isDimmed: isDimmed, onChange: onChange }), childToggles?.map((child, index) => {
-                return (_jsx(ToggleControl, { componentType: "toggle", title: child.title, size: child.size, tooltip: child.tooltip, symbol: child.symbol, color: child.color, isDimmed: child.isDimmed || isDimmed || !checked, checked: child.checked, disabled: child.disabled || !checked, onChange: (event) => {
+                return (_createElement(ToggleControl, { ...child, componentType: "toggle", key: uuidV4(), isDimmed: child.isDimmed || isDimmed || !checked, disabled: child.disabled || !checked, onChange: (event) => {
                         child.onChange(event);
-                    }, bar: child.bar }, uuidV4()));
+                    }, bar: child.bar }));
             })] }));
 };
 export default ToggleControlGroup;

package/dist/presentations/presentations.styled.js

@@ -22,6 +22,7 @@ export const PresentationTypography = (props) => {
     return (_jsx(Typography, { variant: "body5", ...rest, sx: { color: isDimmed ? theme.palette.neutralGrey[40] : 'inherit' } }));
 };
 export const PresentationSymbolIcon = ({ symbol, color = 'black', isDimmed = false, }) => {
+    const symbolColor = color?.length ? color : 'black';
     if (symbol === 'circle') {
         return (_jsx("div", { style: {
                 height: '100%',
@@ -31,7 +32,7 @@ export const PresentationSymbolIcon = ({ symbol, color = 'black', isDimmed = fal
             }, children: _jsx("span", { style: {
                     height: '6px',
                     width: '6px',
-                    backgroundColor: color,
+                    backgroundColor: symbolColor,
                     borderRadius: '50%',
                     border: '1px solid black',
                 } }) }));
@@ -45,7 +46,7 @@ export const PresentationSymbolIcon = ({ symbol, color = 'black', isDimmed = fal
             }, children: _jsx("span", { style: {
                     height: '10px',
                     width: '10px',
-                    backgroundColor: color,
+                    backgroundColor: symbolColor,
                 } }) }));
     }
     if (symbol === 'border-circle') {
@@ -57,7 +58,7 @@ export const PresentationSymbolIcon = ({ symbol, color = 'black', isDimmed = fal
             }, children: _jsx("span", { style: {
                     height: '10px',
                     width: '10px',
-                    backgroundColor: color,
+                    backgroundColor: symbolColor,
                     borderRadius: '50%',
                     border: '1px solid black',
                 } }) }));
@@ -71,7 +72,7 @@ export const PresentationSymbolIcon = ({ symbol, color = 'black', isDimmed = fal
             }, children: _jsx("span", { style: {
                     height: '10px',
                     width: '10px',
-                    backgroundColor: color,
+                    backgroundColor: symbolColor,
                     border: '1px solid black',
                 } }) }));
     }

package/package.json

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