labsense-ui-kit 1.4.47 → 1.4.49

package/dist/index.js

@@ -10349,6 +10349,24 @@ var SearchBar$1 = styled__default.input(_templateObject10$2 || (_templateObject1
     theme = _ref37.theme;
   return $placeholderColor || theme.vms.text.light;
 });
+var getClippingBoundary = function getClippingBoundary(element) {
+  var top = 0;
+  var bottom = window.innerHeight;
+  var node = element.parentElement;
+  while (node && node !== document.body) {
+    var style = window.getComputedStyle(node);
+    if (/(auto|hidden|scroll|clip)/.test(style.overflow) || /(auto|hidden|scroll|clip)/.test(style.overflowY)) {
+      var rect = node.getBoundingClientRect();
+      top = Math.max(top, rect.top);
+      bottom = Math.min(bottom, rect.bottom);
+    }
+    node = node.parentElement;
+  }
+  return {
+    top: top,
+    bottom: bottom
+  };
+};
 var SelectOption = function SelectOption(_ref38) {
   var title = _ref38.title,
     titlecolor = _ref38.titlecolor,
@@ -10430,9 +10448,13 @@ var SelectOption = function SelectOption(_ref38) {
   React.useEffect(function () {
     if (isOpen) {
       if (showSearchBox && searchInputRef.current) {
-        searchInputRef.current.focus();
+        searchInputRef.current.focus({
+          preventScroll: true
+        });
       } else if (dropdownMenuRef.current) {
-        dropdownMenuRef.current.focus();
+        dropdownMenuRef.current.focus({
+          preventScroll: true
+        });
       }
     }
   }, [isOpen, showSearchBox]);
@@ -10440,10 +10462,14 @@ var SelectOption = function SelectOption(_ref38) {
     var refToUse = (positionRef === null || positionRef === void 0 ? void 0 : positionRef.current) || dropdownRef.current;
     if (refToUse) {
       var rect = refToUse.getBoundingClientRect();
-      var windowHeight = window.innerHeight;
-      var spaceBelow = windowHeight - rect.bottom;
-      var spaceAbove = rect.top;
-      var dropdownHeight = 95;
+      var _getClippingBoundary = getClippingBoundary(refToUse),
+        clipTop = _getClippingBoundary.top,
+        clipBottom = _getClippingBoundary.bottom;
+      var spaceBelow = clipBottom - rect.bottom;
+      var spaceAbove = rect.top - clipTop;
+      var optionRowHeight = 30;
+      var visibleOptionRows = Math.min(options.length || 1, 5);
+      var dropdownHeight = (showSearchBox ? 44 : 0) + visibleOptionRows * optionRowHeight + 2;
       if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
         setDropUp(true);
       } else {
@@ -12421,7 +12447,7 @@ var Overlay = styled__default.div(_templateObject$n || (_templateObject$n = _tag
   return $isOpen ? 'visible' : 'hidden';
 });
 var HamburgerButton = styled__default.button(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  display: none;\n  \n  @media (max-width: ", ") {\n    display: flex;\n    width: max-content;\n    border: none;\n    padding: 8px;\n    cursor: pointer;\n    align-items: center;\n    justify-content: center;\n    // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    transition: transform 0.2s ease;\n\n    &:active {\n      transform: scale(0.95);\n    }\n  }\n"])), MOBILE_BREAKPOINT);
-var SidebarContainer = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  width: 68px;\n  max-width: 68px;\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: 998;\n  justify-content: space-between;\n  gap: 24px;\n\n  /* Expand on hover */\n  &:hover {\n    width: max-content;\n    max-width: 400px;\n\n    /* You can also add a class for children */\n    span, .expandable {\n      opacity: 1;\n      visibility: visible;\n      transform: translateX(0);\n    }\n  }\n\n  /* Mobile styles */\n  @media (max-width: ", ") {\n    transform: translateX(", ");\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    width: 280px;\n    max-width: 280px;\n    box-shadow: ", ";\n\n    /* Always show text on mobile when open */\n    span, .expandable {\n      opacity: ", ";\n      visibility: ", ";\n      transform: translateX(0);\n    }\n\n    /* Disable hover expansion on mobile */\n    &:hover {\n      width: 280px;\n      max-width: 280px;\n    }\n  }\n"])), function (_ref3) {
+var SidebarContainer = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  width: 68px;\n  max-width: 68px;\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: 998;\n  justify-content: space-between;\n  gap: 24px;\n\n  /* Expand on hover to a fixed width - not max-content, which would resize\n     the sidebar itself depending on which submenu happens to be open (a\n     longer/deeper-indented child label, e.g. \"API Key Management\" under\n     Administration, made the box wider than with it collapsed or another\n     menu open). Sized to comfortably fit the longest current label already\n     used with room to spare; matches the fixed width already used for the\n     mobile-open state below. */\n  &:hover {\n    width: 230px;\n    max-width: 230px;\n\n    /* You can also add a class for children */\n    span, .expandable {\n      opacity: 1;\n      visibility: visible;\n      transform: translateX(0);\n    }\n  }\n\n  /* Mobile styles */\n  @media (max-width: ", ") {\n    transform: translateX(", ");\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    width: 280px;\n    max-width: 280px;\n    box-shadow: ", ";\n\n    /* Always show text on mobile when open */\n    span, .expandable {\n      opacity: ", ";\n      visibility: ", ";\n      transform: translateX(0);\n    }\n\n    /* Disable hover expansion on mobile */\n    &:hover {\n      width: 280px;\n      max-width: 280px;\n    }\n  }\n"])), function (_ref3) {
   var $background = _ref3.$background,
     theme = _ref3.theme;
   return $background || theme.vms.accent.softBlue;