magneto365.ui 2.52.0 → 2.53.0

package/dist/cjs/index.js

@@ -250,7 +250,7 @@ var useMediaQuery = function (defaultValue, options) {
 
 var style$_ = {"magneto-ui-icon":"mg_icon_magneto-ui-icon_4jxnv","magneto-ui-hover":"mg_icon_magneto-ui-hover_4jxnv"};
 
-var Component$29 = function (_a) {
+var Component$2a = function (_a) {
     var fallbackIcon = _a.fallbackIcon, _b = _a.showDefaultFallback, showDefaultFallback = _b === void 0 ? true : _b, icon = _a.icon, _c = _a.hover, hover = _c === void 0 ? false : _c, size = _a.size, className = _a.className, alt = _a.alt;
     var _d = React.useState(false), imageError = _d[0], setImageError = _d[1];
     var handleError = function () {
@@ -266,9 +266,9 @@ var Component$29 = function (_a) {
 /**
  * Atom UI component of Icon for general purpose
  */
-var IconItem = Component$29;
+var IconItem = Component$2a;
 
-var styles$25 = {"avatarComponent":"mg_avatar_avatarComponent_1upgt","magneto-ui-default-avatar":"mg_avatar_magneto-ui-default-avatar_1upgt"};
+var styles$26 = {"avatarComponent":"mg_avatar_avatarComponent_1upgt","magneto-ui-default-avatar":"mg_avatar_magneto-ui-default-avatar_1upgt"};
 
 var Add = "https://static.magneto365.com/lib/assets/f738cef7b76c444f.svg";
 
@@ -522,21 +522,31 @@ var Youtube = "https://static.magneto365.com/lib/assets/f78dbede1bdf3dd0.svg";
 
 var YoutubeSolid = "https://static.magneto365.com/lib/assets/cdcc07646d43bd9d.svg";
 
-var Component$28 = function (_a) {
+var Component$29 = function (_a) {
     var userImage = _a.userImage, fallbackImage = _a.fallbackImage, onClick = _a.onClick;
     var _b = React.useState(false), imageError = _b[0], setImageError = _b[1];
     var handleError = function () {
         setImageError(true);
     };
-    return (React__default["default"].createElement("div", { className: styles$25.avatarComponent, onClick: onClick },
+    return (React__default["default"].createElement("div", { className: styles$26.avatarComponent, onClick: onClick },
         userImage && !imageError && React__default["default"].createElement("img", { src: userImage, alt: "User Avatar", loading: "lazy", onError: handleError }),
-        (!userImage || imageError) && (React__default["default"].createElement("div", { className: styles$25['magneto-ui-default-avatar'] },
+        (!userImage || imageError) && (React__default["default"].createElement("div", { className: styles$26['magneto-ui-default-avatar'] },
             React__default["default"].createElement(IconItem, { icon: fallbackImage || User, hover: false })))));
 };
 /**
  * UI Atom component of Avatar
  */
-var Avatar = Component$28;
+var Avatar = Component$29;
+
+var styles$25 = {"badge-count":"mg_badge_badge-count_15t5z","badge-count__animation":"mg_badge_badge-count_animation_15t5z","pulse":"mg_badge_pulse_15t5z"};
+
+var Component$28 = function (_a) {
+    var _b = _a.number, number = _b === void 0 ? undefined : _b, className = _a.className;
+    return (React__default["default"].createElement("p", { className: "".concat(styles$25['badge-count'], " ").concat(className) },
+        React__default["default"].createElement("span", { className: styles$25['badge-count__animation'] }),
+        number && number));
+};
+var Badge = Component$28;
 
 var BAR_LOADER_PREFIX = '--bar-loader';
 
@@ -2827,17 +2837,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 = React.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 = React.useState(), valueSelected = _d[0], setValueSelected = _d[1];
+    React.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__default["default"].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__default["default"].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__default["default"].createElement(ToggleButton, __assign({}, toggleButtonProps, { customIcon: customIcon, currentSelect: valueHasSelected(+id), key: id, id: id, name: name, onChange: onHandleChange })));
     })));
 };
 var ToggleButtonList = Component$1s;
@@ -4384,14 +4408,16 @@ var Component$15 = function (_a) {
  */
 var Divider = Component$15;
 
-var styles$$ = {"headerTabComponent":"mg_header_tab_headerTabComponent_1a6hv"};
+var styles$$ = {"headerTabComponent":"mg_header_tab_headerTabComponent_1mp3q","headerTabComponent__count":"mg_header_tab_headerTabComponent_count_1mp3q","headerTabComponent__text":"mg_header_tab_headerTabComponent_text_1mp3q"};
 
 var Component$14 = function (_a) {
-    var tabType = _a.tabType, tabText = _a.tabText, url = _a.url, isActive = _a.isActive;
+    var tabType = _a.tabType, tabText = _a.tabText, url = _a.url, isActive = _a.isActive, _b = _a.count, count = _b === void 0 ? 0 : _b;
     var TabLink = tabType === 'tabOption' ? url : '';
     return (React__default["default"].createElement(React__default["default"].Fragment, null, tabType === 'tabTitle' ? (React__default["default"].createElement("div", { className: styles$$.headerTabComponent, "data-tab-type": "tabTitle" },
-        React__default["default"].createElement("p", null, tabText))) : (React__default["default"].createElement("a", { className: styles$$.headerTabComponent, href: TabLink, "data-tab-type": "tabOption", "data-is-active": isActive },
-        React__default["default"].createElement("p", null, tabText)))));
+        count > 0 && React__default["default"].createElement(Badge, { number: count, className: styles$$['headerTabComponent__count'] }),
+        React__default["default"].createElement("p", { className: styles$$['headerTabComponent__text'] }, tabText))) : (React__default["default"].createElement("a", { className: styles$$.headerTabComponent, href: TabLink, "data-tab-type": "tabOption", "data-is-active": isActive },
+        count > 0 && React__default["default"].createElement(Badge, { number: count, className: styles$$['headerTabComponent__count'] }),
+        React__default["default"].createElement("p", { className: styles$$['headerTabComponent__text'] }, tabText)))));
 };
 /**
  * UI Atom component for HeaderTab
@@ -7801,6 +7827,7 @@ exports.Alert = Alert;
 exports.AlphabetFilter = AlphabetFilter;
 exports.AnalystTemplate = AnalystTemplate;
 exports.Avatar = Avatar;
+exports.Badge = Badge;
 exports.BarLoader = BarLoader;
 exports.BrandMenu = BrandMenu;
 exports.BrandsContainer = BrandsContainer;