labsense-ui-kit 1.2.96 → 1.2.98

package/dist/index.js

@@ -7,6 +7,7 @@ var styled__default = _interopDefault(styled);
 var reactHotToast = require('react-hot-toast');
 var reactRouterDom = require('react-router-dom');
 var reactI18next = require('react-i18next');
+var reactDom = require('react-dom');
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -9327,7 +9328,7 @@ var TextContainer = styled__default.span(_templateObject6$7 || (_templateObject6
   var $fontWeight = _ref15.$fontWeight;
   return $fontWeight || '500';
 }, SidebarContainer);
-var NotificationBadge = styled__default.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -4px;\n  right: -4px;\n  background: red;\n  color: white;\n  font-size: 10px;\n  font-weight: bold;\n  border-radius: 50%;\n  padding: 2px 5px;\n  min-width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref16) {
+var NotificationBadge = styled__default.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  // top: -4px;\n  // right: 4px;\n  background: red;\n  color: white;\n  font-size: 10px;\n  font-weight: bold;\n  border-radius: 50%;\n  padding: 2px 5px;\n  min-width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  width: max-content;\n"])), function (_ref16) {
   var $position = _ref16.$position;
   return $position || 'absolute';
 });
@@ -9343,7 +9344,17 @@ var Sidebar = function Sidebar(_ref17) {
   var _useState = React.useState({}),
     openMenus = _useState[0],
     setOpenMenus = _useState[1];
-  var isExpandedRef = React__default.useRef(isExpanded);
+  var isExpandedRef = React.useRef(isExpanded);
+  var _useState2 = React.useState(function () {
+      var container = document.getElementById('badge-portal-container');
+      if (!container) {
+        container = document.createElement('div');
+        container.id = 'badge-portal-container';
+        document.body.appendChild(container);
+      }
+      return container;
+    }),
+    badgePortalContainer = _useState2[0];
   React.useEffect(function () {
     isExpandedRef.current = isExpanded;
     if (!isExpanded) setOpenMenus({});
@@ -9455,7 +9466,18 @@ var Sidebar = function Sidebar(_ref17) {
       "$cursor": 'pointer',
       "$borderRadius": '4px'
     }, React__default.createElement(Container, {
-      "$position": 'relative'
+      "$position": 'relative',
+      id: "icon-container-" + item.id,
+      ref: function ref(el) {
+        if (el && _getTotalNotifications(item) > 0) {
+          var rect = el.getBoundingClientRect();
+          var badge = document.getElementById("badge-" + item.id);
+          if (badge) {
+            badge.style.top = rect.top - 4 + "px";
+            badge.style.left = rect.right - 14 + "px";
+          }
+        }
+      }
     }, React__default.createElement(IconWrapper$2, {
       "$selected": !!isActive
     }, React__default.createElement(Icon, {
@@ -9464,7 +9486,12 @@ var Sidebar = function Sidebar(_ref17) {
       size: 20,
       weight: item.iconWeight,
       color: isActive ? themeColors.vms.text.white : themeColors.vms.text.medium
-    })), _getTotalNotifications(item) > 0 && React__default.createElement(NotificationBadge, null, _getTotalNotifications(item) > 99 ? '99+' : _getTotalNotifications(item))), React__default.createElement(TextContainer, {
+    })), _getTotalNotifications(item) > 0 && reactDom.createPortal(React__default.createElement(NotificationBadge, {
+      id: "badge-" + item.id,
+      style: {
+        position: 'fixed'
+      }
+    }, _getTotalNotifications(item) > 99 ? '99+' : _getTotalNotifications(item)), badgePortalContainer)), React__default.createElement(TextContainer, {
       "$fontSize": '14px'
     }, item.label)), hasChildren && React__default.createElement(Container, {
       "$padding": '9px',
@@ -9506,6 +9533,26 @@ var Sidebar = function Sidebar(_ref17) {
       setIsExpanded(expanded);
     }
   }, [setIsExpanded]);
+  React.useEffect(function () {
+    var updateBadgePositions = function updateBadgePositions() {
+      content.forEach(function (item) {
+        if (_getTotalNotifications(item) > 0) {
+          var iconContainer = document.getElementById("icon-container-" + item.id);
+          var badge = document.getElementById("badge-" + item.id);
+          if (iconContainer && badge) {
+            var rect = iconContainer.getBoundingClientRect();
+            badge.style.top = rect.top - 4 + "px";
+            badge.style.left = rect.right - 14 + "px";
+          }
+        }
+      });
+    };
+    updateBadgePositions();
+    window.addEventListener('resize', updateBadgePositions);
+    return function () {
+      window.removeEventListener('resize', updateBadgePositions);
+    };
+  }, [content, isExpanded, _getTotalNotifications]);
   return React__default.createElement(SidebarContainer, {
     "$background": background,
     onMouseEnter: function onMouseEnter() {
@@ -9687,7 +9734,7 @@ var TableRow = function TableRow(_ref) {
 };
 
 var _templateObject$q, _templateObject2$l, _templateObject3$e, _templateObject4$b, _templateObject5$9;
-var TableContainer = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  border-radius: 8px;\n  scrollbar-width: thin;\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n  box-sizing: border-box;\n"])), function (_ref) {
+var TableContainer = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  border-radius: 8px;\n  scrollbar-width: thin;\n  flex: 1;\n  height: 100%;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.vms.brand.light;
 });