labsense-ui-kit 1.4.24 → 1.4.26

package/dist/index.modern.js

@@ -9928,7 +9928,8 @@ var ButtonDropdown = function ButtonDropdown(_ref) {
     placeholder = _ref$placeholder === void 0 ? 'Select Option' : _ref$placeholder,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    width = _ref.width;
+    width = _ref.width,
+    dropDownPosition = _ref.dropDownPosition;
   var _useState = useState(false),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
@@ -9958,15 +9959,17 @@ var ButtonDropdown = function ButtonDropdown(_ref) {
       } else {
         setDropUp(false);
       }
-      var dropdownWidth = rect.width;
-      var spaceRight = windowWidth - rect.left;
-      var spaceLeft = rect.right;
-      if (spaceRight < dropdownWidth && spaceLeft > dropdownWidth) {
-        setDropdownPosition('right');
-      } else if (rect.left < dropdownWidth / 2 && windowWidth - rect.right < dropdownWidth / 2) {
-        setDropdownPosition('center');
-      } else {
-        setDropdownPosition('left');
+      if (!dropDownPosition) {
+        var dropdownWidth = rect.width;
+        var spaceRight = windowWidth - rect.left;
+        var spaceLeft = rect.right;
+        if (spaceRight < dropdownWidth && spaceLeft > dropdownWidth) {
+          setDropdownPosition('right');
+        } else if (rect.left < dropdownWidth / 2 && windowWidth - rect.right < dropdownWidth / 2) {
+          setDropdownPosition('center');
+        } else {
+          setDropdownPosition('left');
+        }
       }
     }
     setIsOpen(function (prev) {
@@ -9998,7 +10001,7 @@ var ButtonDropdown = function ButtonDropdown(_ref) {
     "$top": dropUp ? 'auto' : '126%',
     "$bottom": dropUp ? '126%' : 'auto',
     "$optionsAvailable": options.length > 0,
-    "$dropDownPosition": dropdownPosition
+    "$dropDownPosition": dropDownPosition || dropdownPosition
   }, options.map(function (option) {
     return React.createElement(Options, {
       key: option.value,
@@ -11595,7 +11598,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  /* 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 (_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 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 $padding = _ref8.$padding;
   return $padding;
 }, function (_ref9) {
@@ -11620,7 +11623,7 @@ var SidebarLink = styled(NavLink)(_templateObject4$9 || (_templateObject4$9 = _t
   var theme = _ref15.theme;
   return theme.vms.text.white;
 });
-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"])), function (_ref16) {
+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;
   return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
@@ -11642,7 +11645,7 @@ var StyledContainer = styled(Container)(_templateObject6$8 || (_templateObject6$
   return theme.vms.text.medium;
 });
 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: all 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 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;
   return $padding;
 }, function (_ref23) {
@@ -11757,7 +11760,6 @@ var Sidebar = function Sidebar(_ref26) {
   };
   var ChildLink = function ChildLink(_ref28) {
     var child = _ref28.child;
-    var themeColors = useTheme$1();
     var location = useLocation();
     var active = getBasePath(location.pathname) === getBasePath(child.activeUrl) || getBasePath(location.pathname) === getBasePath(child.url);
     var handleClick = useCallback(function (e) {
@@ -11779,7 +11781,7 @@ var Sidebar = function Sidebar(_ref26) {
       icon: child.icon,
       size: 18,
       weight: child.iconWeight,
-      color: active ? themeColors.vms.text.white : themeColors.vms.text.medium
+      color: 'currentColor'
     })), React.createElement(Container, {
       "$width": '100%',
       "$justifyContent": 'space-between',
@@ -11855,7 +11857,7 @@ var Sidebar = function Sidebar(_ref26) {
       icon: item.icon,
       size: 20,
       weight: item.iconWeight,
-      color: isActive ? themeColors.vms.text.white : themeColors.vms.text.medium
+      color: 'currentColor'
     })), getTotalNotifications(item) > 0 && createPortal(React.createElement(NotificationBadge, {
       id: "badge-" + item.id,
       style: {
@@ -11870,7 +11872,7 @@ var Sidebar = function Sidebar(_ref26) {
       cursor: 'pointer',
       icon: isOpen ? 'UpArrow' : 'DownArrow',
       size: 10,
-      color: isActive ? themeColors.vms.text.white : themeColors.vms.text.medium
+      color: 'currentColor'
     })));
     var handleNavClick = useCallback(function (e) {
       if (item.url === location.pathname) {