labsense-ui-kit 1.4.56 → 1.4.58

package/dist/index.modern.js

@@ -12549,7 +12549,7 @@ var SidebarContainer = styled.div(_templateObject3$c || (_templateObject3$c = _t
   var $isMobileOpen = _ref7.$isMobileOpen;
   return $isMobileOpen ? 'visible' : 'hidden';
 });
-var SidebarLink = styled(NavLink)(_templateObject4$9 || (_templateObject4$9 = _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  /* Remove all transitions for instant color changes */\n  * {\n    transition: none !important;\n  }\n\n  /* Hover state */\n  &:hover {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white on hover */\n    svg {\n      color: ", " !important;\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    }\n  }\n"])), function (_ref8) {
+var SidebarLink = styled(NavLink)(_templateObject4$9 || (_templateObject4$9 = _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  /* Remove all transitions for instant color changes */\n  * {\n    transition: none !important;\n  }\n\n  /* Hover / active / keyboard-focus share the same highlight, so the icon\n     switches color together with the fill instead of the ring appearing alone */\n  &:hover,\n  &.active,\n  &:focus-visible {\n    color: ", ";\n    background: ", ";\n\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  /* text.dark tracks the sidebar's own surface (near-black on the light\n     theme, white on the dark theme) so the ring stays visible in both,\n     unlike text.white which is calibrated for text sitting on the primary fill */\n  &:focus-visible {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), function (_ref8) {
   var $padding = _ref8.$padding;
   return $padding;
 }, function (_ref9) {
@@ -12566,20 +12566,20 @@ var SidebarLink = styled(NavLink)(_templateObject4$9 || (_templateObject4$9 = _t
   return theme.vms.text.white;
 }, function (_ref13) {
   var theme = _ref13.theme;
-  return theme.vms.text.white;
-}, function (_ref14) {
-  var theme = _ref14.theme;
-  return theme.vms["default"].primary;
-}, function (_ref15) {
-  var theme = _ref15.theme;
-  return theme.vms.text.white;
+  return theme.vms.text.dark;
 });
-var IconWrapper$2 = styled.div(_templateObject5$8 || (_templateObject5$8 = _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\n  /* Ensure icons inherit hover color from parent */\n  svg {\n    transition: none;\n  }\n"])), function (_ref16) {
-  var $selected = _ref16.$selected,
-    theme = _ref16.theme;
+var IconWrapper$2 = styled.div(_templateObject5$8 || (_templateObject5$8 = _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\n  /* Ensure icons inherit hover color from parent */\n  svg {\n    transition: none;\n  }\n"])), function (_ref14) {
+  var $selected = _ref14.$selected,
+    theme = _ref14.theme;
   return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
 });
-var StyledContainer = styled(Container)(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  transition: none;\n\n  svg {\n    transition: none;\n  }\n\n  /* Parent hover / active */\n  &:hover,\n  &.active {\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  /* 2nd child reacts ONLY when parent is hovered */\n  &:hover > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n\n  /* Default state for 2nd child */\n  > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n"])), function (_ref17) {
+var StyledContainer = styled(Container)(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  transition: none;\n\n  svg {\n    transition: none;\n  }\n\n  /* Parent hover / active / keyboard-focus (for rows with no url of their\n     own - see the tabIndex added in SidebarItem) */\n  &:hover,\n  &.active,\n  &:focus-visible {\n    svg {\n      color: ", " !important;\n    }\n  }\n\n  /* 2nd child reacts ONLY when parent is hovered or keyboard-focused */\n  &:hover > div:nth-child(2),\n  &:focus-visible > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n\n  /* Default state for 2nd child */\n  > div:nth-child(2) {\n    svg {\n      color: ", " !important;\n\n      path {\n        stroke: ", " !important;\n      }\n    }\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  /* Same fill + ring treatment as SidebarLink, for rows made keyboard-focusable below */\n  &:focus-visible {\n    background: ", ";\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), function (_ref15) {
+  var theme = _ref15.theme;
+  return theme.vms.text.white;
+}, function (_ref16) {
+  var theme = _ref16.theme;
+  return theme.vms.text.white;
+}, function (_ref17) {
   var theme = _ref17.theme;
   return theme.vms.text.white;
 }, function (_ref18) {
@@ -12587,37 +12587,40 @@ var StyledContainer = styled(Container)(_templateObject6$8 || (_templateObject6$
   return theme.vms.text.white;
 }, function (_ref19) {
   var theme = _ref19.theme;
-  return theme.vms.text.white;
+  return theme.vms.text.medium;
 }, function (_ref20) {
   var theme = _ref20.theme;
-  return theme.vms.text.white;
+  return theme.vms["default"].primary;
 }, function (_ref21) {
   var theme = _ref21.theme;
-  return theme.vms.text.medium;
+  return theme.vms.text.white;
+}, function (_ref22) {
+  var theme = _ref22.theme;
+  return theme.vms.text.dark;
 });
 var Logo = styled(Container)(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n  transition: none;\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n"])));
-var TextContainer = styled.span(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateX(-10px);\n  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n\n  ", ":hover & {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n\n  /* Mobile: Always visible when sidebar is open */\n  @media (max-width: ", ") {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n"])), function (_ref22) {
-  var $padding = _ref22.$padding;
+var TextContainer = styled.span(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateX(-10px);\n  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n\n  ", ":hover & {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n\n  /* Mobile: Always visible when sidebar is open */\n  @media (max-width: ", ") {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n"])), function (_ref23) {
+  var $padding = _ref23.$padding;
   return $padding;
-}, function (_ref23) {
-  var $fontSize = _ref23.$fontSize;
-  return $fontSize || '20px';
 }, function (_ref24) {
-  var $fontWeight = _ref24.$fontWeight;
+  var $fontSize = _ref24.$fontSize;
+  return $fontSize || '20px';
+}, function (_ref25) {
+  var $fontWeight = _ref25.$fontWeight;
   return $fontWeight || '500';
 }, SidebarContainer, MOBILE_BREAKPOINT);
-var NotificationBadge = styled.div(_templateObject9$4 || (_templateObject9$4 = _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 (_ref25) {
-  var $position = _ref25.$position;
+var NotificationBadge = styled.div(_templateObject9$4 || (_templateObject9$4 = _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 (_ref26) {
+  var $position = _ref26.$position;
   return $position || 'absolute';
 });
-var Sidebar = function Sidebar(_ref26) {
-  var logo = _ref26.logo,
-    content = _ref26.content,
-    background = _ref26.background,
-    ProfileContent = _ref26.ProfileContent,
-    _ref26$isExpanded = _ref26.isExpanded,
-    isExpanded = _ref26$isExpanded === void 0 ? false : _ref26$isExpanded,
-    setIsExpanded = _ref26.setIsExpanded;
+var Sidebar = function Sidebar(_ref27) {
+  var logo = _ref27.logo,
+    content = _ref27.content,
+    background = _ref27.background,
+    ProfileContent = _ref27.ProfileContent,
+    _ref27$isExpanded = _ref27.isExpanded,
+    isExpanded = _ref27$isExpanded === void 0 ? false : _ref27$isExpanded,
+    setIsExpanded = _ref27.setIsExpanded;
   var location = useLocation();
   var _useState = useState({}),
     openMenus = _useState[0],
@@ -12682,9 +12685,9 @@ var Sidebar = function Sidebar(_ref26) {
   }, []);
   var toggleMenu = function toggleMenu(id) {
     setOpenMenus(function (prev) {
-      var _ref27;
+      var _ref28;
       var isCurrentlyOpen = !!prev[id];
-      return isCurrentlyOpen ? {} : (_ref27 = {}, _ref27[id] = true, _ref27);
+      return isCurrentlyOpen ? {} : (_ref28 = {}, _ref28[id] = true, _ref28);
     });
   };
   var getTotalNotifications = useCallback(function (item) {
@@ -12709,8 +12712,8 @@ var Sidebar = function Sidebar(_ref26) {
       return currentBase === getBasePath(child.activeUrl) || currentBase === getBasePath(child.url);
     }));
   };
-  var ChildLink = function ChildLink(_ref28) {
-    var child = _ref28.child;
+  var ChildLink = function ChildLink(_ref29) {
+    var child = _ref29.child;
     var location = useLocation();
     var active = getBasePath(location.pathname) === getBasePath(child.activeUrl) || getBasePath(location.pathname) === getBasePath(child.url);
     var handleClick = useCallback(function (e) {
@@ -12757,14 +12760,14 @@ var Sidebar = function Sidebar(_ref26) {
       });
     }));
   };
-  var SidebarItem = function SidebarItem(_ref29) {
-    var item = _ref29.item,
-      isActive = _ref29.isActive,
-      isOpen = _ref29.isOpen,
-      hasChildren = _ref29.hasChildren,
-      isExpanded = _ref29.isExpanded,
-      onToggle = _ref29.onToggle,
-      renderChildLinks = _ref29.renderChildLinks;
+  var SidebarItem = function SidebarItem(_ref30) {
+    var item = _ref30.item,
+      isActive = _ref30.isActive,
+      isOpen = _ref30.isOpen,
+      hasChildren = _ref30.hasChildren,
+      isExpanded = _ref30.isExpanded,
+      onToggle = _ref30.onToggle,
+      renderChildLinks = _ref30.renderChildLinks;
     var themeColors = useTheme$1();
     var activeClass = isActive ? 'active' : '';
     var handleClick = useCallback(function () {
@@ -12772,6 +12775,7 @@ var Sidebar = function Sidebar(_ref26) {
         onToggle();
       }
     }, [hasChildren, onToggle]);
+    var isOwnFocusTarget = !item.url && hasChildren;
     var ContentLayout = React.createElement(StyledContainer, {
       className: activeClass,
       "$alignItems": 'center',
@@ -12781,7 +12785,16 @@ var Sidebar = function Sidebar(_ref26) {
       "$borderRadius": '4px',
       "$justifyContent": 'space-between',
       "$hoverBackground": themeColors.vms["default"].primary,
-      onClick: handleClick
+      onClick: handleClick,
+      role: isOwnFocusTarget ? 'button' : undefined,
+      tabIndex: isOwnFocusTarget ? 0 : undefined,
+      "aria-expanded": isOwnFocusTarget ? isOpen : undefined,
+      onKeyDown: isOwnFocusTarget ? function (e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleClick();
+        }
+      } : undefined
     }, React.createElement(Container, {
       "$alignItems": 'center',
       "$gap": '8px',
@@ -13407,7 +13420,7 @@ var FirstContainer = styled.div(_templateObject2$m || (_templateObject2$m = _tag
   var $headerPadding = _ref6.$headerPadding;
   return $headerPadding ? $headerPadding : '0px';
 });
-var TabContainer = styled.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref7) {
+var TabContainer = styled.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    height: 35px;\n    max-height: 35px;\n    border-radius: 4px;\n    box-shadow: 0 0 0 2px ", ";\n\n    div {\n      font-size: 12px;\n    }\n  }\n"])), function (_ref7) {
   var $disabled = _ref7.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref8) {
@@ -13422,36 +13435,39 @@ var TabContainer = styled.div(_templateObject3$f || (_templateObject3$f = _tagge
 }, function (_ref11) {
   var $disabled = _ref11.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.vms["default"].primary;
 });
-var TabItemContainer = styled.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: '';\n    display: ", ";\n    width: 100%;\n    min-height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref12) {
-  var $headerHeight = _ref12.$headerHeight;
+var TabItemContainer = styled.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: '';\n    display: ", ";\n    width: 100%;\n    min-height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref13) {
+  var $headerHeight = _ref13.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
 }, function (props) {
   return props.$active ? 'block' : 'none';
-}, function (_ref13) {
-  var theme = _ref13.theme;
+}, function (_ref14) {
+  var theme = _ref14.theme;
   return theme.vms["default"].primary;
 });
-var DetailsFirstContainer = styled.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  white-space: nowrap;\n"])), function (_ref14) {
-  var $active = _ref14.$active,
-    theme = _ref14.theme;
+var DetailsFirstContainer = styled.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  white-space: nowrap;\n"])), function (_ref15) {
+  var $active = _ref15.$active,
+    theme = _ref15.theme;
   return $active ? theme.vms["default"].primary : theme.vms.text.medium;
 });
 var TabItemsWrapper = styled.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(_ref15) {
-  var tabItems = _ref15.tabItems,
-    _ref15$disabled = _ref15.disabled,
-    disabled = _ref15$disabled === void 0 ? false : _ref15$disabled,
-    headerHeight = _ref15.headerHeight,
-    headerPadding = _ref15.headerPadding,
-    activeTab = _ref15.activeTab,
-    border = _ref15.border,
-    _ref15$gap = _ref15.gap,
-    gap = _ref15$gap === void 0 ? '24px' : _ref15$gap,
-    overflow = _ref15.overflow,
-    scrollbarWidth = _ref15.scrollbarWidth,
-    bordeBottom = _ref15.bordeBottom,
-    tabRightNode = _ref15.tabRightNode;
+var Tabs = function Tabs(_ref16) {
+  var tabItems = _ref16.tabItems,
+    _ref16$disabled = _ref16.disabled,
+    disabled = _ref16$disabled === void 0 ? false : _ref16$disabled,
+    headerHeight = _ref16.headerHeight,
+    headerPadding = _ref16.headerPadding,
+    activeTab = _ref16.activeTab,
+    border = _ref16.border,
+    _ref16$gap = _ref16.gap,
+    gap = _ref16$gap === void 0 ? '24px' : _ref16$gap,
+    overflow = _ref16.overflow,
+    scrollbarWidth = _ref16.scrollbarWidth,
+    bordeBottom = _ref16.bordeBottom,
+    tabRightNode = _ref16.tabRightNode;
   var themeColors = useTheme();
   return React.createElement(Container$4, {
     "$gap": gap,