labsense-ui-kit 1.4.48 → 1.4.50

package/dist/index.js

@@ -7455,8 +7455,17 @@ var Icon = function Icon(_ref2) {
     console.warn("Icon '" + icon + "' not found");
     return null;
   }
+  var handleKeyDown = onClick ? function (e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onClick(e);
+    }
+  } : undefined;
   return React__default.createElement(IconWrapper, {
     onClick: onClick,
+    onKeyDown: handleKeyDown,
+    role: onClick ? 'button' : undefined,
+    tabIndex: onClick ? 0 : undefined,
     "$clickable": !!onClick,
     "$cursor": cursor
   }, React__default.createElement(IconSVG, {
@@ -7707,13 +7716,68 @@ var ModalContainer = styled__default.div(_templateObject2$2 || (_templateObject2
   var $overflowY = _ref3.$overflowY;
   return $overflowY ? $overflowY : 'auto';
 });
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var openModalContainers = [];
+var setInert = function setInert(el, inert) {
+  if (inert) el.setAttribute('inert', '');else el.removeAttribute('inert');
+};
 var Modal = function Modal(_ref4) {
   var isOpen = _ref4.isOpen,
     maxWidth = _ref4.maxWidth,
     overflow = _ref4.overflow,
     children = _ref4.children;
+  var containerRef = React.useRef(null);
+  var previouslyFocusedElement = React.useRef(null);
+  React.useEffect(function () {
+    if (!isOpen) return;
+    var container = containerRef.current;
+    if (!container) return;
+    previouslyFocusedElement.current = document.activeElement;
+    openModalContainers.forEach(function (el) {
+      return setInert(el, true);
+    });
+    openModalContainers.push(container);
+    var focusableElements = function focusableElements() {
+      return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+    };
+    var firstFocusable = focusableElements()[0];
+    (firstFocusable != null ? firstFocusable : container).focus();
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key !== 'Tab') return;
+      var focusable = focusableElements();
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      var first = focusable[0];
+      var last = focusable[focusable.length - 1];
+      var active = document.activeElement;
+      if (e.shiftKey) {
+        if (active === first || !container.contains(active)) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (active === last || !container.contains(active)) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    container.addEventListener('keydown', handleKeyDown);
+    return function () {
+      container.removeEventListener('keydown', handleKeyDown);
+      var idx = openModalContainers.indexOf(container);
+      if (idx !== -1) openModalContainers.splice(idx, 1);
+      var newTop = openModalContainers[openModalContainers.length - 1];
+      if (newTop) setInert(newTop, false);
+      if (previouslyFocusedElement.current && document.contains(previouslyFocusedElement.current)) {
+        previouslyFocusedElement.current.focus();
+      }
+    };
+  }, [isOpen]);
   if (!isOpen) return null;
   return ReactDOM.createPortal(React__default.createElement(ModalOverlay, null, React__default.createElement(ModalContainer, {
+    ref: containerRef,
+    tabIndex: -1,
     "$maxWidth": maxWidth,
     "$overflowY": overflow,
     onClick: function onClick(e) {
@@ -10486,6 +10550,14 @@ var SelectOption = function SelectOption(_ref38) {
   };
   var dropdownRef = React.useRef(null);
   var searchInputRef = React.useRef(null);
+  var dropdownButtonRef = React.useRef(null);
+  var closeAndRestoreFocus = function closeAndRestoreFocus() {
+    var _dropdownButtonRef$cu;
+    setIsOpen(false);
+    setSearchTerm('');
+    setHighlightedIndex(-1);
+    (_dropdownButtonRef$cu = dropdownButtonRef.current) === null || _dropdownButtonRef$cu === void 0 ? void 0 : _dropdownButtonRef$cu.focus();
+  };
   var handleOptionClick = function handleOptionClick(selectedValue) {
     if (value === selectedValue && allowDeselect) {
       var Event = {
@@ -10504,9 +10576,7 @@ var SelectOption = function SelectOption(_ref38) {
       };
       onChange(_Event);
     }
-    setIsOpen(false);
-    setSearchTerm('');
-    setHighlightedIndex(-1);
+    closeAndRestoreFocus();
   };
   var filteredOptions = searchTerm ? options.filter(function (option) {
     return option.label.toLowerCase().includes(searchTerm.toLowerCase());
@@ -10523,8 +10593,7 @@ var SelectOption = function SelectOption(_ref38) {
       }
     };
     onChange(Event);
-    setIsOpen(false);
-    setSearchTerm('');
+    closeAndRestoreFocus();
   };
   React.useEffect(function () {
     var handleClickOutside = function handleClickOutside(event) {
@@ -10591,9 +10660,7 @@ var SelectOption = function SelectOption(_ref38) {
         }
         break;
       case 'Escape':
-        setIsOpen(false);
-        setSearchTerm('');
-        setHighlightedIndex(-1);
+        closeAndRestoreFocus();
         break;
     }
   };
@@ -10615,9 +10682,22 @@ var SelectOption = function SelectOption(_ref38) {
     ref: dropdownRef,
     "$width": width
   }, React__default.createElement(DropdownButton$1, {
+    ref: dropdownButtonRef,
     onClick: function onClick() {
       if (!disabled && !loading) toggleDropdown();
     },
+    onKeyDown: function onKeyDown(e) {
+      if (disabled || loading) return;
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        toggleDropdown();
+      }
+    },
+    role: 'button',
+    tabIndex: disabled || loading ? -1 : 0,
+    "aria-haspopup": 'listbox',
+    "aria-expanded": isOpen,
+    "aria-disabled": disabled || loading,
     "$width": width,
     "$border": border,
     "$background": background,
@@ -12447,7 +12527,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;
@@ -13367,6 +13447,17 @@ var Tabs = function Tabs(_ref15) {
       onClick: function onClick() {
         if (!disabled && tab.onClick) tab.onClick();
       },
+      onKeyDown: function onKeyDown(e) {
+        if (disabled || !tab.onClick) return;
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          tab.onClick();
+        }
+      },
+      role: 'tab',
+      tabIndex: disabled ? -1 : 0,
+      "aria-selected": activeTab === tab.title,
+      "aria-disabled": disabled,
       "$disabled": disabled,
       "$headerHeight": headerHeight
     }, React__default.createElement(TabItemContainer, {