labsense-ui-kit 1.2.39 → 1.2.41

package/dist/Sidebar/Sidebar.d.ts

@@ -7,6 +7,7 @@ export interface SidebarItems {
     iconWeight?: string;
     url?: string;
     activeUrl?: string;
+    notificationCount?: number;
     children?: SidebarItems[];
 }
 export interface ImageDetails {

package/dist/index.js

@@ -5990,8 +5990,8 @@ var StyledButton = styled__default.button(_templateObject5$1 || (_templateObject
       return '';
   }
 }, function (_ref16) {
-  var color = _ref16.color;
-  return color;
+  var $color = _ref16.$color;
+  return $color;
 });
 var ButtonText = styled__default.span(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n"])), function (_ref17) {
   var $fontFamily = _ref17.$fontFamily;
@@ -8838,7 +8838,7 @@ var ProgressBar = function ProgressBar(_ref3) {
   }));
 };
 
-var _templateObject$n, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$8;
+var _templateObject$n, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$8, _templateObject6$7;
 var SidebarContainer = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  max-width: ", ";\n  height: 100vh;\n  background: ", ";\n  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
   var $isExpanded = _ref.$isExpanded;
   return $isExpanded ? 'max-content' : '68px';
@@ -8850,7 +8850,7 @@ var SidebarContainer = styled__default.div(_templateObject$n || (_templateObject
     theme = _ref3.theme;
   return $background || theme.accent.softBlue;
 });
-var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  text-decoration: none;\n  // transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: ", ";\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    background: ", ";\n  }\n"])), function (_ref4) {
+var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  text-decoration: none;\n  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: ", ";\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    background: ", ";\n  }\n"])), function (_ref4) {
   var $padding = _ref4.$padding;
   return $padding;
 }, function (_ref5) {
@@ -8888,14 +8888,18 @@ var TextContainer = styled__default.span(_templateObject5$8 || (_templateObject5
   var $isExpanded = _ref14.$isExpanded;
   return $isExpanded ? 'translateX(0)' : 'translateX(-10px)';
 });
-var Sidebar = function Sidebar(_ref15) {
-  var logo = _ref15.logo,
-    content = _ref15.content,
-    background = _ref15.background,
-    ProfileContent = _ref15.ProfileContent,
-    _ref15$isExpanded = _ref15.isExpanded,
-    isExpanded = _ref15$isExpanded === void 0 ? false : _ref15$isExpanded,
-    setIsExpanded = _ref15.setIsExpanded;
+var NotificationBadge = styled__default.div(_templateObject6$7 || (_templateObject6$7 = _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 (_ref15) {
+  var $position = _ref15.$position;
+  return $position || 'absolute';
+});
+var Sidebar = function Sidebar(_ref16) {
+  var logo = _ref16.logo,
+    content = _ref16.content,
+    background = _ref16.background,
+    ProfileContent = _ref16.ProfileContent,
+    _ref16$isExpanded = _ref16.isExpanded,
+    isExpanded = _ref16$isExpanded === void 0 ? false : _ref16$isExpanded,
+    setIsExpanded = _ref16.setIsExpanded;
   var location = reactRouterDom.useLocation();
   var _useState = React.useState({}),
     openMenus = _useState[0],
@@ -8909,22 +8913,31 @@ var Sidebar = function Sidebar(_ref15) {
       return _extends({}, prev, (_extends2 = {}, _extends2[id] = !prev[id], _extends2));
     });
   };
+  var _getTotalNotifications = function getTotalNotifications(item) {
+    var _item$children;
+    if ((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
+      return (item.notificationCount || 0) + item.children.reduce(function (sum, child) {
+        return sum + _getTotalNotifications(child);
+      }, 0);
+    }
+    return item.notificationCount || 0;
+  };
   var getBasePath = function getBasePath(path) {
     if (!path) return '';
     var parts = path.split('/').filter(Boolean);
     return parts.length > 0 ? "/" + parts[0] : '';
   };
   var isRouteActive = function isRouteActive(item) {
-    var _item$children;
+    var _item$children2;
     var currentBase = getBasePath(location.pathname);
     var itemBase = item.activeUrl ? getBasePath(item.activeUrl) : getBasePath(item.url);
-    return currentBase === itemBase || ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.some(function (child) {
+    return currentBase === itemBase || ((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.some(function (child) {
       return currentBase === getBasePath(child.activeUrl) || currentBase === getBasePath(child.url);
     }));
   };
-  var ChildLink = React__default.memo(function (_ref16) {
-    var child = _ref16.child,
-      isExpanded = _ref16.isExpanded;
+  var ChildLink = React__default.memo(function (_ref17) {
+    var child = _ref17.child,
+      isExpanded = _ref17.isExpanded;
     var themeColors = styled.useTheme();
     var location = reactRouterDom.useLocation();
     var active = getBasePath(location.pathname) === getBasePath(child.activeUrl) || getBasePath(location.pathname) === getBasePath(child.url);
@@ -8939,7 +8952,8 @@ var Sidebar = function Sidebar(_ref15) {
       },
       onMouseLeave: function onMouseLeave() {
         return setIsHovered(false);
-      }
+      },
+      "$padding": '0px 10px 0px 0px'
     }, React__default.createElement(IconWrapper$2, {
       "$selected": active
     }, React__default.createElement(Icon, {
@@ -8947,12 +8961,17 @@ var Sidebar = function Sidebar(_ref15) {
       size: 18,
       weight: child.iconWeight,
       color: isHovered || active ? themeColors.text.white : themeColors.text.medium
-    })), React__default.createElement(TextContainer, {
+    })), React__default.createElement(Container, {
+      "$width": '100%',
+      "$justifyContent": 'space-between',
+      "$gap": '5px'
+    }, React__default.createElement(TextContainer, {
       "$isExpanded": isExpanded,
       "$fontSize": '12px',
-      "$color": themeColors.text.medium,
-      "$padding": '0px 10px 0px 0px'
-    }, child.label));
+      "$color": themeColors.text.medium
+    }, child.label), _getTotalNotifications(child) > 0 && React__default.createElement(NotificationBadge, {
+      "$position": 'unset'
+    }, _getTotalNotifications(child) > 99 ? '99+' : _getTotalNotifications(child))));
   });
   var renderChildLinks = function renderChildLinks(children) {
     return React__default.createElement(Container, {
@@ -8967,14 +8986,14 @@ var Sidebar = function Sidebar(_ref15) {
       });
     }));
   };
-  var SidebarItem = React__default.memo(function (_ref17) {
-    var item = _ref17.item,
-      isActive = _ref17.isActive,
-      isOpen = _ref17.isOpen,
-      hasChildren = _ref17.hasChildren,
-      isExpanded = _ref17.isExpanded,
-      onToggle = _ref17.onToggle,
-      renderChildLinks = _ref17.renderChildLinks;
+  var SidebarItem = React__default.memo(function (_ref18) {
+    var item = _ref18.item,
+      isActive = _ref18.isActive,
+      isOpen = _ref18.isOpen,
+      hasChildren = _ref18.hasChildren,
+      isExpanded = _ref18.isExpanded,
+      onToggle = _ref18.onToggle,
+      renderChildLinks = _ref18.renderChildLinks;
     var themeColors = styled.useTheme();
     var _useState3 = React.useState(false),
       isHovered = _useState3[0],
@@ -8991,10 +9010,19 @@ var Sidebar = function Sidebar(_ref15) {
       "$width": '100%',
       "$cursor": 'pointer',
       "$borderRadius": '4px',
+      "$justifyContent": 'space-between',
       "$hoverBackground": themeColors["default"].primary,
       onClick: function onClick() {
         return hasChildren && onToggle();
       }
+    }, React__default.createElement(Container, {
+      "$alignItems": 'center',
+      "$gap": '8px',
+      "$width": '100%',
+      "$cursor": 'pointer',
+      "$borderRadius": '4px'
+    }, React__default.createElement(Container, {
+      "$position": 'relative'
     }, React__default.createElement(IconWrapper$2, {
       "$selected": !!isActive
     }, React__default.createElement(Icon, {
@@ -9002,11 +9030,12 @@ var Sidebar = function Sidebar(_ref15) {
       size: 20,
       weight: item.iconWeight,
       color: isHovered || isActive ? themeColors.text.white : themeColors.text.medium
-    })), React__default.createElement(TextContainer, {
+    })), _getTotalNotifications(item) > 0 && React__default.createElement(NotificationBadge, null, _getTotalNotifications(item) > 99 ? '99+' : _getTotalNotifications(item))), React__default.createElement(TextContainer, {
       "$isExpanded": isExpanded,
       "$fontSize": '14px'
-    }, item.label), hasChildren && React__default.createElement(Container, {
-      "$padding": '9px'
+    }, item.label)), hasChildren && React__default.createElement(Container, {
+      "$padding": '9px',
+      "$opacity": isExpanded ? 1 : 0
     }, React__default.createElement(Icon, {
       icon: isOpen ? 'UpArrow' : 'DownArrow',
       size: 10,
@@ -9018,10 +9047,12 @@ var Sidebar = function Sidebar(_ref15) {
     }, ContentLayout) : React__default.createElement(Container, {
       "$flexDirection": 'column',
       "$alignItems": 'start',
-      "$gap": '8px'
+      "$gap": '8px',
+      "$width": '100%'
     }, React__default.createElement(Container, {
       "$color": themeColors.text.medium,
-      "$hoverColor": themeColors.text.white
+      "$hoverColor": themeColors.text.white,
+      "$width": '100%'
     }, ContentLayout), hasChildren && isExpanded && isOpen && renderChildLinks && React__default.createElement(Container, null, renderChildLinks(item.children)));
   });
   return React__default.createElement(SidebarContainer, {
@@ -9053,9 +9084,9 @@ var Sidebar = function Sidebar(_ref15) {
     "$gap": '16px',
     "$width": '100%'
   }, content.map(function (item) {
-    var _item$children2;
+    var _item$children3;
     var active = isRouteActive(item) || false;
-    var hasChildren = !!((_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length);
+    var hasChildren = !!((_item$children3 = item.children) !== null && _item$children3 !== void 0 && _item$children3.length);
     var isOpen = openMenus[item.id];
     return React__default.createElement(SidebarItem, {
       key: item.id,
@@ -9200,7 +9231,7 @@ var TableRow = function TableRow(_ref) {
   }));
 };
 
-var _templateObject$q, _templateObject2$l, _templateObject3$e, _templateObject4$b, _templateObject5$9, _templateObject6$7;
+var _templateObject$q, _templateObject2$l, _templateObject3$e, _templateObject4$b, _templateObject5$9, _templateObject6$8;
 var TableContainer = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.brand.light;
@@ -9226,7 +9257,7 @@ var LegendDivider = styled__default.div(_templateObject5$9 || (_templateObject5$
   var $marginRight = _ref6.$marginRight;
   return $marginRight != null ? $marginRight : '0px';
 });
-var Divider = styled__default.div(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  height: 2px;\n  background: ", ";\n"])), function (_ref7) {
+var Divider = styled__default.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  height: 2px;\n  background: ", ";\n"])), function (_ref7) {
   var theme = _ref7.theme;
   return theme.border.extraLight;
 });
@@ -9397,7 +9428,7 @@ var Table = function Table(_ref8) {
   }))));
 };
 
-var _templateObject$r, _templateObject2$m, _templateObject3$f, _templateObject4$c, _templateObject5$a, _templateObject6$8;
+var _templateObject$r, _templateObject2$m, _templateObject3$f, _templateObject4$c, _templateObject5$a, _templateObject6$9;
 var Container$4 = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: ", ";\n  gap: ", ";\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
   var $overflow = _ref.$overflow;
   return $overflow || 'visible';
@@ -9446,7 +9477,7 @@ var DetailsFirstContainer = styled__default.div(_templateObject5$a || (_template
     theme = _ref13.theme;
   return $active ? theme["default"].primary : theme.text.medium;
 });
-var TabItemsWrapper = styled__default.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  // overflow-x: auto;\n  scrollbar-width: thin;\n"])));
+var TabItemsWrapper = styled__default.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  // overflow-x: auto;\n  scrollbar-width: thin;\n"])));
 var Tabs = function Tabs(_ref14) {
   var tabItems = _ref14.tabItems,
     _ref14$disabled = _ref14.disabled,