magneto365.ui 2.52.0 → 2.52.1

package/dist/cjs/types/components/UI/molecules/ToggleButtonList/ToggleButtonList.interface.d.ts

@@ -11,9 +11,13 @@ export declare type TToggleButtonList = {
     /**
      * this property returns the values of the toggle button selected
      */
-    onChange?: (value: IToggleButtonOnchangeValues | null) => void;
+    onChange?: (value: IToggleButtonOnchangeValues | null | number) => void;
     /**
      * this property sets customs className for toggle buttons
      */
     className?: string;
+    /**
+     * this property sets the default value or current value of the toggle button
+     */
+    currentSelect?: Pick<IToggleButton, 'id' | 'name'>;
 };

package/dist/esm/index.js

@@ -2818,17 +2818,31 @@ var TimelineEvent = Component$1t;
 var styles$1i = {"toggle-button-list":"mg_toggle_button_list_toggle-button-list_zejg7"};
 
 var Component$1s = function (_a) {
-    var list = _a.list, toggleButtonProps = _a.toggleButtonProps, _b = _a.onChange, onChange = _b === void 0 ? function () { return ({}); } : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
-    var _d = useState(null), selectedValue = _d[0], setSelectedValue = _d[1];
+    var list = _a.list, toggleButtonProps = _a.toggleButtonProps, _b = _a.onChange, onChange = _b === void 0 ? function () { return ({}); } : _b, _c = _a.className, className = _c === void 0 ? '' : _c, currentSelect = _a.currentSelect;
+    var _d = useState(), valueSelected = _d[0], setValueSelected = _d[1];
+    useEffect(function () {
+        if (currentSelect) {
+            onChange(currentSelect);
+        }
+    }, [currentSelect, onChange]);
     var onHandleChange = function (value) {
         if (!(value === null || value === void 0 ? void 0 : value.name))
             return;
         onChange(value);
-        setSelectedValue(value);
+        setValueSelected(value);
+    };
+    var valueHasSelected = function (id) {
+        if (valueSelected) {
+            return valueSelected.id === id;
+        }
+        if (currentSelect) {
+            return currentSelect.id === id;
+        }
+        return false;
     };
     return (React.createElement("div", { className: "".concat(className, " ").concat(styles$1i['toggle-button-list']) }, list === null || list === void 0 ? void 0 : list.map(function (_a) {
         var _b = _a.id, id = _b === void 0 ? '' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, customIcon = _a.customIcon;
-        return (React.createElement(ToggleButton, __assign({}, toggleButtonProps, { customIcon: customIcon, currentSelect: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === id, key: id, id: id, name: name, onChange: onHandleChange })));
+        return (React.createElement(ToggleButton, __assign({}, toggleButtonProps, { customIcon: customIcon, currentSelect: valueHasSelected(+id), key: id, id: id, name: name, onChange: onHandleChange })));
     })));
 };
 var ToggleButtonList = Component$1s;