@lunit/oui 2.2.2 → 2.2.3

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

package/dist/presentations/Threshold/Threshold.js

@@ -10,20 +10,24 @@ 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, onChangeDropdown, onSliderChangeCommitted, }) => {
+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 [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);
+        setIsThresholdChanged(value !== selectedOptionValue);
     };
     return (_jsxs(Container, { children: [_jsx(Score, { ...totalScore }), _jsx(Statistic, { ...totalCells }), statisticItems.map((item) => {
                 return (_jsx(Statistic, { ...item }, uuidV4()));
@@ -31,6 +35,6 @@ const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells,
                     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: {
                             width: '100%',
-                        } })), 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: onClickUpdateConfiguration, 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 }))] })] }));
 };
 export default Threshold;

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

@@ -25,6 +25,8 @@ export interface ThresholdSpec {
 export interface ThresholdProps extends ThresholdSpec {
     onChangeDropdown: (event: SelectChangeEvent) => void;
     onSliderChangeCommitted: (event: Event | SyntheticEvent, value: number | number[]) => void;
+    onClickUpdateConfiguration: () => void;
+    isLoading?: boolean;
 }
 export interface BaseSliderProps extends SliderProps {
     defaultThreshold: number;

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

@@ -1,4 +1,4 @@
 import Threshold from './Threshold';
-import type { ThresholdProps } from './Threshold.types';
+import type { ThresholdProps, ThresholdSpec } from './Threshold.types';
 export { Threshold };
-export type { ThresholdProps };
+export type { ThresholdProps, ThresholdSpec };

package/dist/presentations/ToggleControl/ToggleControl.js

@@ -14,7 +14,7 @@ const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbo
     const [isChecked, setIsChecked] = useState(checked);
     const handleChange = (event) => {
         setIsChecked(event.target.checked);
-        onChange && onChange(event);
+        onChange && onChange(event, event.target.checked);
     };
     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',

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

@@ -48,6 +48,6 @@ export interface ToggleControlProps extends ToggleControlSpec {
     disabled?: boolean;
     target?: TargetSpec;
     isMaster?: boolean;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>, toggle: boolean) => void;
 }
 export {};

package/dist/presentations/ToggleControlGroup/ToggleControlGroup.js

@@ -19,18 +19,20 @@ const ToggleControlGroup = ({ componentType = 'toggleGroup', size = 'medium', ti
                 setChildrenChecked(newState);
             }
         }
-        onChange(event);
+        onChange(event, event.target.checked, childrenChecked);
     };
-    const handleMultiChange = (index) => {
+    const handleMultiChange = (index, event) => {
         const newState = [...childrenChecked];
         newState[index] = !newState[index];
         setChildrenChecked(newState);
+        onChange(event, toggleChecked, newState);
     };
     const handleExclusiveChange = (index, event) => {
         const newState = Array(childrenChecked.length).fill(false);
         setChildrenChecked(newState);
         newState[index] = event.target.checked;
         setChildrenChecked(newState);
+        onChange(event, toggleChecked, newState);
     };
     useEffect(() => {
         if (behavior === 'exclusive') {
@@ -49,9 +51,11 @@ const ToggleControlGroup = ({ componentType = 'toggleGroup', size = 'medium', ti
         }
     }, [behavior, childToggles, childrenChecked.length]);
     return (_jsxs(ToggleControlGroupContainer, { children: [_jsx(ToggleControl, { isParent: true, componentType: "toggle", bar: bar, disabled: disabled, size: size, title: title, tooltip: tooltip, checked: toggleChecked, onChange: handleToggleChange }), childToggles?.map((child, index) => {
-                return (_jsx(ToggleControl, { componentType: "toggle", title: child.title, size: size, tooltip: child.tooltip, symbol: child.symbol, color: child.color, isDimmed: !toggleChecked, checked: childrenChecked[index], disabled: !toggleChecked, onChange: (event) => {
-                        behavior === 'multi' ? handleMultiChange(index) : handleExclusiveChange(index, event);
-                        child.onChange(event);
+                return (_jsx(ToggleControl, { componentType: "toggle", title: child.title, size: size, tooltip: child.tooltip, symbol: child.symbol, color: child.color, isDimmed: !toggleChecked, checked: childrenChecked[index], disabled: !toggleChecked, onChange: (event, toggle) => {
+                        behavior === 'multi'
+                            ? handleMultiChange(index, event)
+                            : handleExclusiveChange(index, event);
+                        child.onChange(event, toggle);
                     }, bar: child.bar }, uuidV4()));
             })] }));
 };

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

@@ -16,6 +16,6 @@ export interface ToggleGroupControlSpec {
     childToggles: ToggleControlProps[];
 }
 export interface ToggleControlGroupProps extends ToggleGroupControlSpec {
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>, parent: boolean, children: Array<boolean | undefined>) => void;
     disabled?: boolean;
 }

package/package.json

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