@lunit/oui 2.2.4 → 2.2.6

package/dist/presentations/Preview/Preview.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { v4 as uuidV4 } from 'uuid';
+import { find as _find } from 'lodash';
 import { Container } from './Preview.styled';
 import { Box } from '@mui/material';
 import { ToggleControl } from '../ToggleControl';
@@ -15,6 +16,11 @@ import { Threshold } from '../Threshold';
 import { Histogram } from '../Histogram';
 const Preview = ({ visualizationControls = [], analysisSummary = [] }) => {
     const [controls, setControls] = useState(visualizationControls);
+    const thresholdItem = _find(analysisSummary, { componentType: 'threshold' });
+    const [selectedThresholdItem, setSelectedThresholdItem] = useState(thresholdItem?.options?.[0]?.title?.toString());
+    const [selectedThresholdValue, setSelectedThresholdValue] = useState(thresholdItem?.options?.[0]?.value);
+    const [selectedThresholdOptionValue, setSelectedThresholdOptionValue] = useState(thresholdItem?.options?.[0]?.value);
+    const [isThresholdPresetSelected, setIsThresholdPresetSelected] = useState(thresholdItem?.options?.[0]?.isPreset);
     return (_jsxs(Container, { children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: visualizationControls.map((item, index) => {
                     if (item.componentType === 'toggleGroup') {
                         item.onChange = (event) => {
@@ -55,6 +61,13 @@ 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 }, 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) => {
+                        return (_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, selectedItem: selectedThresholdItem, selectedValue: selectedThresholdValue, selectedOptionValue: selectedThresholdOptionValue, isPresetSelected: !!isThresholdPresetSelected, onChangeDropdown: (event) => {
+                                        setSelectedThresholdItem(event.target.value);
+                                        setSelectedThresholdValue(_find(thresholdItem?.options, { title: event.target.value })?.value);
+                                        setSelectedThresholdOptionValue(_find(thresholdItem?.options, { title: event.target.value })?.value);
+                                        setIsThresholdPresetSelected(_find(thresholdItem?.options, { title: event.target.value })?.isPreset);
+                                    }, onClickUpdateConfiguration: () => { } }, uuidV4())), item.componentType === 'histogram' && (_jsx(Histogram, { ...item }, uuidV4()))] }, uuidV4()));
+                    })] })] }));
 };
 export default Preview;

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, selectedItem, selectedValue, selectedOptionValue, isPresetSelected, onChangeDropdown, onSliderChangeCommitted, onClickUpdateConfiguration, }: ThresholdProps) => import("react/jsx-runtime").JSX.Element;
 export default Threshold;

package/dist/presentations/Threshold/Threshold.js

@@ -10,23 +10,13 @@ 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 [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 Threshold = ({ componentType = 'threshold', title, totalScore, totalCells, statisticItems, options, description, controlStep = 1, isLoading = false, selectedItem, selectedValue, selectedOptionValue, isPresetSelected, onChangeDropdown, onSliderChangeCommitted, onClickUpdateConfiguration, }) => {
+    const [value, setValue] = useState(selectedValue || options[0].value);
     const [isThresholdChanged, setIsThresholdChanged] = useState(false);
     const presetValue = getPresetValue(options, 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);
-        onChangeDropdown(event);
-    };
     const handleSliderChange = (event, value) => {
-        setSelectedValue(value);
+        setValue(value);
         setIsThresholdChanged(value !== selectedOptionValue);
     };
     const handleUpdateConfiguration = () => {
@@ -35,9 +25,9 @@ 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: selectedItem, onChange: onChangeDropdown, 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, { label: "Update Configuration", sx: {
+                }) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', paddingTop: '36px', gap: '6px' }, children: [_jsx(BaseSlider, { disabled: isPresetSelected, step: controlStep, value: value, valueLabelDisplay: "on", defaultThreshold: presetValue, marks: marks, onChange: handleSliderChange, onChangeCommitted: onSliderChangeCommitted }), !isPresetSelected && (_jsx(Button, { 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 }))] })] }));
 };

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

@@ -26,6 +26,10 @@ export interface ThresholdProps extends ThresholdSpec {
     onChangeDropdown: (event: SelectChangeEvent) => void;
     onSliderChangeCommitted: (event: Event | SyntheticEvent, value: number | number[]) => void;
     onClickUpdateConfiguration: () => void;
+    selectedItem: string;
+    selectedValue: number;
+    selectedOptionValue: number;
+    isPresetSelected: boolean;
     isLoading?: boolean;
 }
 export interface BaseSliderProps extends SliderProps {

package/dist/presentations/ToggleControlGroup/ToggleControlGroup.d.ts

@@ -1,3 +1,3 @@
 import type { ToggleControlGroupProps } from './ToggleControlGroup.types';
-declare const ToggleControlGroup: ({ componentType, size, title, tooltip, bar, childToggles, disabled, checked, behavior, onChange, }: ToggleControlGroupProps) => import("react/jsx-runtime").JSX.Element;
+declare const ToggleControlGroup: ({ componentType, size, title, tooltip, bar, childToggles, disabled, checked, behavior, isDimmed, onChange, }: ToggleControlGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default ToggleControlGroup;

package/dist/presentations/ToggleControlGroup/ToggleControlGroup.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { v4 as uuidV4 } from 'uuid';
 import { ToggleControlGroupContainer } from './ToggleControlGroup.styled';
 import ToggleControl from '../ToggleControl/ToggleControl';
-const ToggleControlGroup = ({ componentType = 'toggleGroup', size = 'medium', title, tooltip = [], bar, childToggles, disabled, checked = true, behavior = 'multi', onChange, }) => {
-    return (_jsxs(ToggleControlGroupContainer, { children: [_jsx(ToggleControl, { isParent: true, componentType: "toggle", bar: bar, disabled: disabled, size: size, title: title, tooltip: tooltip, checked: checked, onChange: onChange }), childToggles?.map((child, index) => {
-                return (_jsx(ToggleControl, { componentType: "toggle", title: child.title, size: size, tooltip: child.tooltip, symbol: child.symbol, color: child.color, isDimmed: child.isDimmed, checked: child.checked, disabled: child.disabled, onChange: (event) => {
+const ToggleControlGroup = ({ componentType = 'toggleGroup', size = 'medium', title, tooltip = [], bar, childToggles, disabled, checked = true, behavior = 'multi', isDimmed = false, onChange, }) => {
+    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: size, tooltip: child.tooltip, symbol: child.symbol, color: child.color, isDimmed: child.isDimmed || isDimmed, checked: child.checked, disabled: child.disabled, onChange: (event) => {
                         child.onChange(event);
                     }, bar: child.bar }, uuidV4()));
             })] }));

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

@@ -18,4 +18,5 @@ export interface ToggleGroupControlSpec {
 export interface ToggleControlGroupProps extends ToggleGroupControlSpec {
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     disabled?: boolean;
+    isDimmed?: boolean;
 }

package/package.json

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