labsense-ui-kit 1.2.55 → 1.2.56

package/dist/index.modern.js

@@ -8778,7 +8778,7 @@ var SidebarContainer = styled.div(_templateObject$n || (_templateObject$n = _tag
     theme = _ref3.theme;
   return $background || theme.vms.accent.softBlue;
 });
-var SidebarLink = styled(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.1s 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(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.1s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: ", ";\n  color: ", ";\n\n  /* Hover state */\n  &:hover {\n    color: ", ";\n    background: ", ";\n  }\n\n  /* Active link state */\n  &.active {\n    color: ", ";\n    background: ", ";\n  }\n"])), function (_ref4) {
   var $padding = _ref4.$padding;
   return $padding;
 }, function (_ref5) {
@@ -8790,44 +8790,50 @@ var SidebarLink = styled(NavLink)(_templateObject2$j || (_templateObject2$j = _t
 }, function (_ref7) {
   var theme = _ref7.theme;
   return theme.vms["default"].primary;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.vms.text.white;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.vms["default"].primary;
 });
-var IconWrapper$2 = styled.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref8) {
-  var $selected = _ref8.$selected,
-    theme = _ref8.theme;
+var IconWrapper$2 = styled.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref10) {
+  var $selected = _ref10.$selected,
+    theme = _ref10.theme;
   return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
 });
 var Logo = styled.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n"])));
-var TextContainer = styled.span(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n  transform: ", ";\n"])), function (_ref9) {
-  var $padding = _ref9.$padding;
+var TextContainer = styled.span(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n  transform: ", ";\n"])), function (_ref11) {
+  var $padding = _ref11.$padding;
   return $padding;
-}, function (_ref10) {
-  var $fontSize = _ref10.$fontSize;
-  return $fontSize || '20px';
-}, function (_ref11) {
-  var $fontWeight = _ref11.$fontWeight;
-  return $fontWeight || '500';
 }, function (_ref12) {
-  var $isExpanded = _ref12.$isExpanded;
-  return $isExpanded ? 1 : 0;
+  var $fontSize = _ref12.$fontSize;
+  return $fontSize || '20px';
 }, function (_ref13) {
-  var $isExpanded = _ref13.$isExpanded;
-  return $isExpanded ? 'visible' : 'hidden';
+  var $fontWeight = _ref13.$fontWeight;
+  return $fontWeight || '500';
 }, function (_ref14) {
   var $isExpanded = _ref14.$isExpanded;
+  return $isExpanded ? 1 : 0;
+}, function (_ref15) {
+  var $isExpanded = _ref15.$isExpanded;
+  return $isExpanded ? 'visible' : 'hidden';
+}, function (_ref16) {
+  var $isExpanded = _ref16.$isExpanded;
   return $isExpanded ? 'translateX(0)' : 'translateX(-10px)';
 });
-var NotificationBadge = styled.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;
+var NotificationBadge = styled.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 (_ref17) {
+  var $position = _ref17.$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 Sidebar = function Sidebar(_ref18) {
+  var logo = _ref18.logo,
+    content = _ref18.content,
+    background = _ref18.background,
+    ProfileContent = _ref18.ProfileContent,
+    _ref18$isExpanded = _ref18.isExpanded,
+    isExpanded = _ref18$isExpanded === void 0 ? false : _ref18$isExpanded,
+    setIsExpanded = _ref18.setIsExpanded;
   var location = useLocation();
   var _useState = useState({}),
     openMenus = _useState[0],
@@ -8863,9 +8869,9 @@ var Sidebar = function Sidebar(_ref16) {
       return currentBase === getBasePath(child.activeUrl) || currentBase === getBasePath(child.url);
     }));
   };
-  var ChildLink = React.memo(function (_ref17) {
-    var child = _ref17.child,
-      isExpanded = _ref17.isExpanded;
+  var ChildLink = React.memo(function (_ref19) {
+    var child = _ref19.child,
+      isExpanded = _ref19.isExpanded;
     var themeColors = useTheme$1();
     var location = useLocation();
     var active = getBasePath(location.pathname) === getBasePath(child.activeUrl) || getBasePath(location.pathname) === getBasePath(child.url);
@@ -8875,28 +8881,32 @@ var Sidebar = function Sidebar(_ref16) {
     return React.createElement(SidebarLink, {
       to: child.url || '#',
       key: child.id,
+      "$padding": '0px 10px 0px 0px',
+      onClick: function onClick(e) {
+        if (child.url && child.url === location.pathname) {
+          e.preventDefault();
+        }
+      },
       onMouseEnter: function onMouseEnter() {
         return setIsHovered(true);
       },
       onMouseLeave: function onMouseLeave() {
         return setIsHovered(false);
-      },
-      "$padding": '0px 10px 0px 0px'
+      }
     }, React.createElement(IconWrapper$2, {
       "$selected": active
     }, React.createElement(Icon, {
       icon: child.icon,
       size: 18,
       weight: child.iconWeight,
-      color: isHovered || active ? themeColors.vms.text.white : themeColors.vms.text.medium
+      color: active || isHovered ? themeColors.vms.text.white : themeColors.vms.text.medium
     })), React.createElement(Container, {
       "$width": '100%',
       "$justifyContent": 'space-between',
       "$gap": '5px'
     }, React.createElement(TextContainer, {
       "$isExpanded": isExpanded,
-      "$fontSize": '12px',
-      "$color": themeColors.vms.text.medium
+      "$fontSize": '12px'
     }, child.label), _getTotalNotifications(child) > 0 && React.createElement(NotificationBadge, {
       "$position": 'unset'
     }, _getTotalNotifications(child) > 99 ? '99+' : _getTotalNotifications(child))));
@@ -8914,14 +8924,14 @@ var Sidebar = function Sidebar(_ref16) {
       });
     }));
   };
-  var SidebarItem = React.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 SidebarItem = function SidebarItem(_ref20) {
+    var item = _ref20.item,
+      isActive = _ref20.isActive,
+      isOpen = _ref20.isOpen,
+      hasChildren = _ref20.hasChildren,
+      isExpanded = _ref20.isExpanded,
+      onToggle = _ref20.onToggle,
+      renderChildLinks = _ref20.renderChildLinks;
     var themeColors = useTheme$1();
     var _useState3 = useState(false),
       isHovered = _useState3[0],
@@ -8971,7 +8981,12 @@ var Sidebar = function Sidebar(_ref16) {
       cursor: 'pointer'
     })));
     return item.url ? React.createElement(SidebarLink, {
-      to: item.url
+      to: item.url,
+      onClick: function onClick(e) {
+        if (item.url === location.pathname) {
+          e.preventDefault();
+        }
+      }
     }, ContentLayout) : React.createElement(Container, {
       "$flexDirection": 'column',
       "$alignItems": 'start',
@@ -8982,7 +8997,7 @@ var Sidebar = function Sidebar(_ref16) {
       "$hoverColor": themeColors.vms.text.white,
       "$width": '100%'
     }, ContentLayout), hasChildren && isExpanded && isOpen && renderChildLinks && React.createElement(Container, null, renderChildLinks(item.children)));
-  });
+  };
   return React.createElement(SidebarContainer, {
     "$background": background,
     "$isExpanded": isExpanded,