labsense-ui-kit 1.2.74 → 1.2.75

package/dist/index.js

@@ -9242,8 +9242,8 @@ var ProgressBar = function ProgressBar(_ref3) {
   }));
 };
 
-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 _templateObject$n, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$8, _templateObject6$7, _templateObject7$5;
+var SidebarContainer = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  max-width: ", ";\n  height: 100vh;\n  background: ", ";\n  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), max-width 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';
 }, function (_ref2) {
@@ -9254,7 +9254,7 @@ var SidebarContainer = styled__default.div(_templateObject$n || (_templateObject
     theme = _ref3.theme;
   return $background || theme.vms.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.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 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: none;\n  padding: ", ";\n  color: ", ";\n\n  /* Hover state */\n  &:hover {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white on hover */\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n\n  /* Active link state */\n  &.active {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white when active */\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n"])), function (_ref4) {
   var $padding = _ref4.$padding;
   return $padding;
 }, function (_ref5) {
@@ -9271,50 +9271,65 @@ var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject2$j ||
   return theme.vms.text.white;
 }, function (_ref9) {
   var theme = _ref9.theme;
+  return theme.vms.text.white;
+}, function (_ref10) {
+  var theme = _ref10.theme;
   return theme.vms["default"].primary;
+}, function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.vms.text.white;
 });
-var IconWrapper$2 = styled__default.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;
+var IconWrapper$2 = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  transition: none;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref12) {
+  var $selected = _ref12.$selected,
+    theme = _ref12.theme;
   return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
 });
-var Logo = styled__default.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__default.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;
+var StyledContainer = styled__default(Container)(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  transition: none;\n  \n  &:hover {\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n  \n  &.active {\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n"])), function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.vms.text.white;
+}, function (_ref14) {
+  var theme = _ref14.theme;
+  return theme.vms.text.white;
+});
+var Logo = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  transition: none;\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__default.span(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: none;\n  transform: ", ";\n"])), function (_ref15) {
+  var $padding = _ref15.$padding;
   return $padding;
-}, function (_ref12) {
-  var $fontSize = _ref12.$fontSize;
+}, function (_ref16) {
+  var $fontSize = _ref16.$fontSize;
   return $fontSize || '20px';
-}, function (_ref13) {
-  var $fontWeight = _ref13.$fontWeight;
+}, function (_ref17) {
+  var $fontWeight = _ref17.$fontWeight;
   return $fontWeight || '500';
-}, function (_ref14) {
-  var $isExpanded = _ref14.$isExpanded;
+}, function (_ref18) {
+  var $isExpanded = _ref18.$isExpanded;
   return $isExpanded ? 1 : 0;
-}, function (_ref15) {
-  var $isExpanded = _ref15.$isExpanded;
+}, function (_ref19) {
+  var $isExpanded = _ref19.$isExpanded;
   return $isExpanded ? 'visible' : 'hidden';
-}, function (_ref16) {
-  var $isExpanded = _ref16.$isExpanded;
+}, function (_ref20) {
+  var $isExpanded = _ref20.$isExpanded;
   return $isExpanded ? 'translateX(0)' : 'translateX(-10px)';
 });
-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 (_ref17) {
-  var $position = _ref17.$position;
+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 (_ref21) {
+  var $position = _ref21.$position;
   return $position || 'absolute';
 });
-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 Sidebar = function Sidebar(_ref22) {
+  var logo = _ref22.logo,
+    content = _ref22.content,
+    background = _ref22.background,
+    ProfileContent = _ref22.ProfileContent,
+    _ref22$isExpanded = _ref22.isExpanded,
+    isExpanded = _ref22$isExpanded === void 0 ? false : _ref22$isExpanded,
+    setIsExpanded = _ref22.setIsExpanded;
   var location = reactRouterDom.useLocation();
   var _useState = React.useState({}),
     openMenus = _useState[0],
     setOpenMenus = _useState[1];
+  var isExpandedRef = React__default.useRef(isExpanded);
   React.useEffect(function () {
+    isExpandedRef.current = isExpanded;
     if (!isExpanded) setOpenMenus({});
   }, [isExpanded]);
   var toggleMenu = function toggleMenu(id) {
@@ -9345,37 +9360,30 @@ var Sidebar = function Sidebar(_ref18) {
       return currentBase === getBasePath(child.activeUrl) || currentBase === getBasePath(child.url);
     }));
   };
-  var ChildLink = React__default.memo(function (_ref19) {
-    var child = _ref19.child,
-      isExpanded = _ref19.isExpanded;
+  var ChildLink = React__default.memo(function (_ref23) {
+    var child = _ref23.child,
+      isExpanded = _ref23.isExpanded;
     var themeColors = styled.useTheme();
     var location = reactRouterDom.useLocation();
     var active = getBasePath(location.pathname) === getBasePath(child.activeUrl) || getBasePath(location.pathname) === getBasePath(child.url);
-    var _useState2 = React.useState(false),
-      isHovered = _useState2[0],
-      setIsHovered = _useState2[1];
+    var handleClick = React__default.useCallback(function (e) {
+      if (child.url && child.url === location.pathname) {
+        e.preventDefault();
+      }
+    }, [child.url, location.pathname]);
     return React__default.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);
-      }
+      onClick: handleClick,
+      className: active ? 'active' : ''
     }, React__default.createElement(IconWrapper$2, {
       "$selected": active
     }, React__default.createElement(Icon, {
       icon: child.icon,
       size: 18,
       weight: child.iconWeight,
-      color: active || isHovered ? themeColors.vms.text.white : themeColors.vms.text.medium
+      color: active ? themeColors.vms.text.white : themeColors.vms.text.medium
     })), React__default.createElement(Container, {
       "$width": '100%',
       "$justifyContent": 'space-between',
@@ -9400,25 +9408,23 @@ var Sidebar = function Sidebar(_ref18) {
       });
     }));
   };
-  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 SidebarItem = React__default.memo(function (_ref24) {
+    var item = _ref24.item,
+      isActive = _ref24.isActive,
+      isOpen = _ref24.isOpen,
+      hasChildren = _ref24.hasChildren,
+      isExpanded = _ref24.isExpanded,
+      onToggle = _ref24.onToggle,
+      renderChildLinks = _ref24.renderChildLinks;
     var themeColors = styled.useTheme();
-    var _useState3 = React.useState(false),
-      isHovered = _useState3[0],
-      setIsHovered = _useState3[1];
-    var ContentLayout = React__default.createElement(Container, {
-      onMouseEnter: function onMouseEnter() {
-        return setIsHovered(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setIsHovered(false);
-      },
+    var activeClass = isActive ? 'active' : '';
+    var handleClick = React__default.useCallback(function () {
+      if (hasChildren) {
+        onToggle();
+      }
+    }, [hasChildren, onToggle]);
+    var ContentLayout = React__default.createElement(StyledContainer, {
+      className: activeClass,
       "$alignItems": 'center',
       "$gap": '8px',
       "$width": '100%',
@@ -9426,9 +9432,7 @@ var Sidebar = function Sidebar(_ref18) {
       "$borderRadius": '4px',
       "$justifyContent": 'space-between',
       "$hoverBackground": themeColors.vms["default"].primary,
-      onClick: function onClick() {
-        return hasChildren && onToggle();
-      }
+      onClick: handleClick
     }, React__default.createElement(Container, {
       "$alignItems": 'center',
       "$gap": '8px',
@@ -9443,7 +9447,7 @@ var Sidebar = function Sidebar(_ref18) {
       icon: item.icon,
       size: 20,
       weight: item.iconWeight,
-      color: isHovered || isActive ? themeColors.vms.text.white : themeColors.vms.text.medium
+      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, {
       "$isExpanded": isExpanded,
       "$fontSize": '14px'
@@ -9453,38 +9457,41 @@ var Sidebar = function Sidebar(_ref18) {
     }, React__default.createElement(Icon, {
       icon: isOpen ? 'UpArrow' : 'DownArrow',
       size: 10,
-      color: isHovered ? themeColors.vms.text.white : themeColors.vms.text.medium,
+      color: isActive ? themeColors.vms.text.white : themeColors.vms.text.medium,
       cursor: 'pointer'
     })));
+    var handleNavClick = React__default.useCallback(function (e) {
+      if (item.url === location.pathname) {
+        e.preventDefault();
+      }
+    }, [item.url, location.pathname]);
     return item.url ? React__default.createElement(SidebarLink, {
       to: item.url,
-      onClick: function onClick(e) {
-        if (item.url === location.pathname) {
-          e.preventDefault();
-        }
-      }
+      onClick: handleNavClick
     }, ContentLayout) : React__default.createElement(Container, {
       "$flexDirection": 'column',
       "$alignItems": 'start',
       "$gap": '8px',
       "$width": '100%'
-    }, React__default.createElement(Container, {
+    }, React__default.createElement(StyledContainer, {
       "$color": themeColors.vms.text.medium,
       "$hoverColor": themeColors.vms.text.white,
       "$width": '100%'
     }, ContentLayout), hasChildren && isExpanded && isOpen && renderChildLinks && React__default.createElement(Container, null, renderChildLinks(item.children)));
-  };
+  });
+  var handleSidebarExpansion = React__default.useCallback(function (expanded) {
+    if (isExpandedRef.current !== expanded) {
+      setIsExpanded(expanded);
+    }
+  }, [setIsExpanded]);
   return React__default.createElement(SidebarContainer, {
     "$background": background,
     "$isExpanded": isExpanded,
     onMouseEnter: function onMouseEnter() {
-      return setIsExpanded(true);
+      return handleSidebarExpansion(true);
     },
     onMouseLeave: function onMouseLeave() {
-      return setIsExpanded(false);
-    },
-    onPointerLeave: function onPointerLeave() {
-      return setIsExpanded(false);
+      return handleSidebarExpansion(false);
     }
   }, React__default.createElement(Container, {
     "$flexDirection": 'column',