@nebula.js/stardust 4.0.0-alpha.6 → 4.0.0-alpha.8

package/core/esm/dev.js

@@ -1,14 +1,14 @@
 /*
-* @nebula.js/stardust v4.0.0-alpha.6
+* @nebula.js/stardust v4.0.0-alpha.8
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
 
 import * as React from 'react';
-import React__default, { useState as useState$1, useEffect as useEffect$1, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useReducer, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, createElement, useContext } from 'react';
+import React__default, { useState as useState$1, useEffect as useEffect$1, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useReducer, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, useContext, createElement } from 'react';
 import ReactDOM from 'react-dom';
 import { CacheProvider, ThemeContext as ThemeContext$2 } from '@emotion/react';
-import { Checkbox, Radio, Typography, FormControlLabel, Box, Grid, Tooltip, Paper, IconButton, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Icon, CircularProgress } from '@mui/material';
+import { Checkbox, Radio, Typography, FormControlLabel, Box, Grid, Tooltip, Paper, IconButton, styled as styled$4, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Icon, CircularProgress } from '@mui/material';
 import styled$3 from '@emotion/styled';
 
 function getAugmentedNamespace(n) {
@@ -8064,7 +8064,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "9917" ;
+const NEBULA_VERSION_HASH = "757e" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8272,7 +8272,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.6" );
+  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.8" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   const root = client.createRoot(element);
@@ -9071,21 +9071,70 @@ function fillRange(elementNbrs, elemNumbersOrdered) {
   return elemNumbersOrdered.slice(min, max + 1);
 }
 
+const PREFIX$c = 'RowColumn';
+const rowColClasses = {
+  row: "".concat(PREFIX$c, "-row"),
+  rowBorderBottom: "".concat(PREFIX$c, "-rowBorderBottom"),
+  column: "".concat(PREFIX$c, "-column"),
+  fieldRoot: "".concat(PREFIX$c, "-fieldRoot"),
+  cell: "".concat(PREFIX$c, "-cell"),
+  labelText: "".concat(PREFIX$c, "-labelText"),
+  labelDense: "".concat(PREFIX$c, "-labelDense"),
+  highlighted: "".concat(PREFIX$c, "-highlighted"),
+  checkboxLabel: "".concat(PREFIX$c, "-checkboxLabel"),
+  icon: "".concat(PREFIX$c, "-icon"),
+  S: "".concat(PREFIX$c, "-S"),
+  XS: "".concat(PREFIX$c, "-XS"),
+  A: "".concat(PREFIX$c, "-A"),
+  X: "".concat(PREFIX$c, "-X"),
+  frequencyCount: "".concat(PREFIX$c, "-frequencyCount"),
+  barContainer: "".concat(PREFIX$c, "-barContainer"),
+  bar: "".concat(PREFIX$c, "-bar"),
+  barSelected: "".concat(PREFIX$c, "-barSelected"),
+  barWithCheckbox: "".concat(PREFIX$c, "-barWithCheckbox"),
+  barSelectedWithCheckbox: "".concat(PREFIX$c, "-barSelectedWithCheckbox"),
+  excludedTextWithCheckbox: "".concat(PREFIX$c, "-excludedTextWithCheckbox")
+};
+
+/* eslint-disable no-underscore-dangle */
+const dataItemSelector = ".".concat(rowColClasses.fieldRoot);
 const getKeyAsToggleSelected = event => !(event !== null && event !== void 0 && event.metaKey || event !== null && event !== void 0 && event.ctrlKey);
 function useSelectionsInteractions(_ref) {
+  var _loaderRef$current2, _loaderRef$current2$_;
   let {
     selectionState,
     selections,
     checkboxes = false,
-    doc = document
+    doc = document,
+    loaderRef
   } = _ref;
   const currentSelect = useRef({
     startElemNumber: undefined,
     elemNumbers: [],
     isRange: false,
     toggle: false,
-    active: false
+    active: false,
+    touchElemNumbers: [],
+    touchRangeSmall: false
   });
+  useEffect$1(() => {
+    var _loaderRef$current, _loaderRef$current$_l;
+    if (!((_loaderRef$current = loaderRef.current) !== null && _loaderRef$current !== void 0 && (_loaderRef$current$_l = _loaderRef$current._listRef) !== null && _loaderRef$current$_l !== void 0 && _loaderRef$current$_l._outerRef)) {
+      return undefined;
+    }
+    const preventGestureStart = e => e.preventDefault();
+    const preventGestureChange = e => e.preventDefault();
+    const preventGestureEnd = e => e.preventDefault();
+    const listRef = loaderRef.current._listRef._outerRef;
+    listRef.addEventListener('gesturestart', preventGestureStart);
+    listRef.addEventListener('gesturechange', preventGestureChange);
+    listRef.addEventListener('gestureend', preventGestureEnd);
+    return () => {
+      listRef.removeEventListener('gesturestart', preventGestureStart);
+      listRef.removeEventListener('gesturechange', preventGestureChange);
+      listRef.removeEventListener('gestureend', preventGestureEnd);
+    };
+  }, [(_loaderRef$current2 = loaderRef.current) === null || _loaderRef$current2 === void 0 ? void 0 : (_loaderRef$current2$_ = _loaderRef$current2._listRef) === null || _loaderRef$current2$_ === void 0 ? void 0 : _loaderRef$current2$_._outerRef]);
 
   // eslint-disable-next-line arrow-body-style
   const doSelect = () => {
@@ -9097,6 +9146,10 @@ function useSelectionsInteractions(_ref) {
       toggle: currentSelect.current.toggle
     });
   };
+  const getRange = (start, end) => {
+    const elemNumbersOrdered = getElemNumbersFromPages(selectionState.enginePages);
+    return fillRange([start, end], elemNumbersOrdered);
+  };
   const addToRange = elemNumber => {
     const {
       startElemNumber
@@ -9104,9 +9157,7 @@ function useSelectionsInteractions(_ref) {
     if (startElemNumber === elemNumber) {
       return;
     }
-    const rangeEnds = [currentSelect.current.startElemNumber, elemNumber];
-    const elemNumbersOrdered = getElemNumbersFromPages(selectionState.enginePages);
-    const toMaybeAdd = fillRange(rangeEnds, elemNumbersOrdered);
+    const toMaybeAdd = getRange(currentSelect.current.startElemNumber, elemNumber);
     selectionState.updateItems(toMaybeAdd, true, currentSelect.current.elemNumbers);
   };
   const selectManually = function () {
@@ -9202,6 +9253,48 @@ function useSelectionsInteractions(_ref) {
     const elemNumber = +event.currentTarget.getAttribute('data-n');
     addToRange(elemNumber);
   }, []);
+  const onTouchStart = useCallback(event => {
+    var _event$touches$0$targ, _event$touches$0$targ2, _event$touches$1$targ, _event$touches$1$targ2;
+    // Handle range selection with two finger touch
+    if (currentSelect.current.active || currentSelect.current.isRange || selectionState.isSingleSelect || event.touches.length <= 1) {
+      return;
+    }
+    if (event.touches.length > 2) {
+      doSelect();
+      return;
+    }
+    const startTouchElemNumber = Number((_event$touches$0$targ = event.touches[0].target) === null || _event$touches$0$targ === void 0 ? void 0 : (_event$touches$0$targ2 = _event$touches$0$targ.closest(dataItemSelector)) === null || _event$touches$0$targ2 === void 0 ? void 0 : _event$touches$0$targ2.getAttribute('data-n'));
+    const endTouchElemNumber = Number((_event$touches$1$targ = event.touches[1].target) === null || _event$touches$1$targ === void 0 ? void 0 : (_event$touches$1$targ2 = _event$touches$1$targ.closest(dataItemSelector)) === null || _event$touches$1$targ2 === void 0 ? void 0 : _event$touches$1$targ2.getAttribute('data-n'));
+    if (Number.isNaN(startTouchElemNumber) || Number.isNaN(startTouchElemNumber)) {
+      doSelect();
+      return;
+    }
+    currentSelect.current.active = true;
+    const range = getRange(startTouchElemNumber, endTouchElemNumber);
+    if (range.length < 7) {
+      currentSelect.current.touchRangeSmall = true;
+    }
+    currentSelect.current.elemNumbers = [];
+    currentSelect.current.touchElemNumbers = [startTouchElemNumber, endTouchElemNumber];
+  }, []);
+  const onTouchEnd = useCallback(() => {
+    if (currentSelect.current.touchElemNumbers.length !== 2) {
+      return;
+    }
+    if (currentSelect.current.touchRangeSmall) {
+      currentSelect.current.touchRangeSmall = false;
+      currentSelect.current.touchElemNumbers = [];
+      currentSelect.current.active = false;
+      return;
+    }
+    const [startTouchElemNumber, endTouchElemNumber] = currentSelect.current.touchElemNumbers;
+    currentSelect.current.startElemNumber = startTouchElemNumber;
+    addToRange(endTouchElemNumber);
+    currentSelect.current.touchElemNumbers = [];
+    currentSelect.current.active = false;
+    currentSelect.current.toggle = true;
+    doSelect();
+  }, []);
   useEffect$1(() => {
     doc.addEventListener('mouseup', onMouseUpDoc);
     return () => {
@@ -9234,7 +9327,9 @@ function useSelectionsInteractions(_ref) {
     Object.assign(interactionEvents, {
       onMouseUp,
       onMouseDown,
-      onMouseEnter
+      onMouseEnter,
+      onTouchStart,
+      onTouchEnd
     });
   }
   return {
@@ -9348,6 +9443,84 @@ const KEYS = Object.freeze({
   isArrow: key => key === KEYS.ARROW_UP || key === KEYS.ARROW_DOWN || key === KEYS.ARROW_LEFT || key === KEYS.ARROW_RIGHT
 });
 
+function removeInnnerTabStops(container) {
+  container === null || container === void 0 ? void 0 : container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
+    elm.setAttribute('tabIndex', -1);
+  });
+}
+function removeLastFocused(container) {
+  container === null || container === void 0 ? void 0 : container.querySelectorAll('.last-focused').forEach(elm => {
+    elm.classList.remove('last-focused');
+  });
+}
+function getVizCell(container) {
+  return (container === null || container === void 0 ? void 0 : container.closest('.njs-cell')) || (container === null || container === void 0 ? void 0 : container.closest('.qv-gridcell'));
+}
+
+// Emulate the keyboard hook, until we support it in the Listbox.
+function useTempKeyboard(_ref) {
+  let {
+    containerRef,
+    enabled
+  } = _ref;
+  const [keyboardActive, setKeyboardActive] = useState$1(false);
+  const keyboard = {
+    enabled,
+    active: keyboardActive,
+    // innerTabStops: whether keyboard permits inner tab stops
+    // (inner = everything inside .listbox-container)
+
+    innerTabStops: !enabled || keyboardActive,
+    blur(resetFocus) {
+      var _containerRef$current;
+      if (!enabled) {
+        return;
+      }
+      setKeyboardActive(false);
+      const vizCell = getVizCell(containerRef.current) || ((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.parentElement);
+      removeInnnerTabStops(containerRef.current);
+      removeLastFocused(containerRef.current);
+      if (resetFocus && vizCell) {
+        // Move focus to the viz's cell.
+        vizCell.setAttribute('tabIndex', 0);
+        vizCell.focus();
+      }
+    },
+    focus() {
+      if (!enabled) {
+        return;
+      }
+      setKeyboardActive(true);
+      const c = containerRef.current;
+      const searchField = c === null || c === void 0 ? void 0 : c.querySelector('.search input');
+      const lastSelectedRow = c === null || c === void 0 ? void 0 : c.querySelector('.value.last-focused');
+      const fieldElement = c === null || c === void 0 ? void 0 : c.querySelector('.value.selector, .value, .ActionsToolbar-item button');
+      const elementToFocus = searchField || lastSelectedRow || fieldElement;
+      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.setAttribute('tabIndex', 0);
+      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
+    },
+    focusSelection() {
+      const confirmButton = document.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
+      confirmButton === null || confirmButton === void 0 ? void 0 : confirmButton.setAttribute('tabIndex', 0);
+      confirmButton === null || confirmButton === void 0 ? void 0 : confirmButton.focus();
+    }
+  };
+  return keyboard;
+}
+
+/* eslint-disable no-param-reassign */
+const getElementIndex = currentTarget => +currentTarget.getAttribute('data-n');
+const focusSearch = container => {
+  const searchField = container === null || container === void 0 ? void 0 : container.querySelector('.search input');
+  searchField === null || searchField === void 0 ? void 0 : searchField.focus();
+  return searchField;
+};
+const focusRow = container => {
+  const row = container === null || container === void 0 ? void 0 : container.querySelector('.value.last-focused, .value.selector, .value');
+  row === null || row === void 0 ? void 0 : row.setAttribute('tabIndex', 0);
+  row === null || row === void 0 ? void 0 : row.focus();
+  return row;
+};
 function getFieldKeyboardNavigation(_ref) {
   let {
     select,
@@ -9356,7 +9529,9 @@ function getFieldKeyboardNavigation(_ref) {
     confirm,
     cancel,
     setScrollPosition,
-    focusListItems
+    focusListItems,
+    keyboard,
+    isModal
   } = _ref;
   const getElement = function (elm) {
     let next = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -9369,49 +9544,86 @@ function getFieldKeyboardNavigation(_ref) {
   };
   const handleKeyDown = event => {
     let elementToFocus;
+    const {
+      currentTarget,
+      nativeEvent
+    } = event;
     const {
       keyCode,
       shiftKey = false,
       ctrlKey = false,
       metaKey = false
-    } = event.nativeEvent;
+    } = nativeEvent;
     switch (keyCode) {
+      case KEYS.TAB:
+        {
+          // Try to focus search field, otherwise confirm button.
+          const container = currentTarget.closest('.listbox-container');
+          const inSelection = isModal();
+
+          // TODO: use a store to keep track of this row.
+          currentTarget.classList.add('last-focused'); // so that we can go back here when we tab back
+
+          if (shiftKey) {
+            if (!focusSearch(container)) {
+              if (inSelection) {
+                keyboard.focusSelection();
+              } else {
+                keyboard.blur(true);
+              }
+            }
+            break;
+          }
+
+          // Without shift key
+          if (inSelection) {
+            keyboard.focusSelection();
+          } else {
+            currentTarget.blur();
+            keyboard.blur();
+          }
+          break;
+        }
       case KEYS.SHIFT:
         // This is to ensure we include the first value when starting a range selection.
         setStartedRange(true);
         break;
       case KEYS.SPACE:
-        select([+event.currentTarget.getAttribute('data-n')], false, event);
+        select([getElementIndex(currentTarget)], false, event);
         break;
       case KEYS.ARROW_DOWN:
       case KEYS.ARROW_RIGHT:
-        elementToFocus = getElement(event.currentTarget, true);
+        elementToFocus = getElement(currentTarget, true);
         if (shiftKey && elementToFocus) {
           if (startedRange) {
-            select([+event.currentTarget.getAttribute('data-n')], true);
+            select([getElementIndex(currentTarget)], true);
             setStartedRange(false);
           }
-          select([+elementToFocus.getAttribute('data-n')], true);
+          select([getElementIndex(elementToFocus)], true);
         }
         break;
       case KEYS.ARROW_UP:
       case KEYS.ARROW_LEFT:
-        elementToFocus = getElement(event.currentTarget, false);
+        elementToFocus = getElement(currentTarget, false);
         if (shiftKey && elementToFocus) {
           if (startedRange) {
-            select([+event.currentTarget.getAttribute('data-n')], true);
+            select([getElementIndex(currentTarget)], true);
             setStartedRange(false);
           }
-          select([+elementToFocus.getAttribute('data-n')], true);
+          select([getElementIndex(elementToFocus)], true);
         }
         break;
       case KEYS.ENTER:
         confirm();
         break;
       case KEYS.ESCAPE:
-        cancel();
-        return;
-      // let it propagate to top-level
+        if (isModal()) {
+          cancel();
+        } else {
+          return; // propagate to other Esc handler
+        }
+
+        break;
       case KEYS.HOME:
         focusListItems.setFirst(true);
         if (ctrlKey) {
@@ -9455,159 +9667,154 @@ function getFieldKeyboardNavigation(_ref) {
 }
 function getListboxInlineKeyboardNavigation(_ref2) {
   let {
-    setKeyboardActive,
+    keyboard,
     hovering,
-    setHovering,
     updateKeyScroll,
     containerRef,
     currentScrollIndex,
-    app,
-    appSelections,
+    isModal,
     constraints
   } = _ref2;
-  const focusInsideListbox = element => {
-    const fieldElement = element.querySelector('.search input, .value.selector, .value, .ActionsToolbar-item button');
-    setKeyboardActive(true);
-    if (fieldElement) {
-      fieldElement.focus();
-    }
-  };
-  const changeFocus = event => {
-    var _event$target;
-    if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.classList.contains('listbox-container')) {
-      // Focus currently on a listbox
-      // Esc on a list box should move the focus to its parent, i.e. a filter pane if any
-      setKeyboardActive(false);
+  const blur = event => {
+    const {
+      currentTarget,
+      target
+    } = event;
+    const isFocusedOnListbox = target.classList.contains('listbox-container');
+    const container = currentTarget.closest('.listbox-container');
+    const vizCell = getVizCell(container);
+    const isSingleListbox = (vizCell === null || vizCell === void 0 ? void 0 : vizCell.querySelectorAll('.listbox-container').length) === 1;
+    if (isFocusedOnListbox || isSingleListbox) {
+      // Move the focus from listbox container to the viz container.
+      keyboard.blur(true);
     } else {
-      var _event$target2, _event$target3, _event$currentTarget, _event$currentTarget2;
-      // Focus currently on a row
-      // Esc on a row should move the focus to its parent, i.e. a listbox
-      // First unfocus the row
-      (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.setAttribute('tabIndex', '-1');
-      (_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.blur();
-      // Then focus the listbox
-      (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.setAttribute('tabIndex', '0');
-      (_event$currentTarget2 = event.currentTarget) === null || _event$currentTarget2 === void 0 ? void 0 : _event$currentTarget2.focus();
-    }
-  };
-  const updateKeyScrollOnHover = newState => {
-    if (hovering) {
-      updateKeyScroll(newState);
+      // More than one listbox: Move focus from row to listbox container.
+
+      // 1. Remove last-focused class from row siblings.
+      removeLastFocused(containerRef.current);
+
+      // 2. Add last-focused class so we can re-focus it later.
+      currentTarget.classList.add('last-focused');
+
+      // 3. Blur row and focus the listbox container.
+      keyboard.blur();
+      const c = currentTarget.closest('.listbox-container');
+      c.setAttribute('tabIndex', 0);
+      c === null || c === void 0 ? void 0 : c.focus();
     }
   };
   const handleKeyDown = event => {
     const {
       keyCode,
-      ctrlKey = false,
       shiftKey = false
     } = event.nativeEvent;
+    const prevent = () => {
+      event.stopPropagation();
+      event.preventDefault();
+    };
+    if (!keyboard.enabled) {
+      // Other keys should not be handled unless keyboard is enabled.
+      return;
+    }
+    const container = event.currentTarget.closest('.listbox-container');
+    const inSelection = isModal();
     switch (keyCode) {
-      // case KEYS.TAB: TODO: Focus confirm button using keyboard.focusSelection when we can access the useKeyboard hook.
+      case KEYS.TAB:
+        if (inSelection) {
+          if (shiftKey) {
+            focusRow(container) || focusSearch(container);
+          } else {
+            focusSearch(container) || focusRow(container);
+          }
+        } else if (shiftKey) {
+          keyboard.blur(true);
+        } else {
+          break;
+        }
+        prevent();
+        break;
       case KEYS.ENTER:
       case KEYS.SPACE:
         if (!event.target.classList.contains('listbox-container')) {
-          return; // don't mess with keydown handlers within the listbox
+          break; // don't mess with keydown handlers within the listbox (e.g. row seletion)
         }
 
-        focusInsideListbox(event.currentTarget);
+        keyboard.focus();
+        prevent();
         break;
       case KEYS.ESCAPE:
-        changeFocus(event);
+        blur(event);
         break;
+    }
+  };
+  const globalKeyDown = event => {
+    if (!hovering.current) {
+      return;
+    }
+    const {
+      keyCode,
+      ctrlKey = false,
+      shiftKey = false
+    } = event;
+    switch (keyCode) {
       case KEYS.ARROW_UP:
-        updateKeyScrollOnHover({
+        updateKeyScroll({
           up: 1
         });
         break;
       case KEYS.ARROW_DOWN:
-        updateKeyScrollOnHover({
+        updateKeyScroll({
           down: 1
         });
         break;
-      case KEYS.ARROW_LEFT:
-      case KEYS.ARROW_RIGHT:
-        return;
-      // let it propagate to top-level
       case KEYS.PAGE_UP:
-        updateKeyScrollOnHover({
+        updateKeyScroll({
           up: currentScrollIndex.stop - currentScrollIndex.start
         });
         break;
       case KEYS.PAGE_DOWN:
-        updateKeyScrollOnHover({
+        updateKeyScroll({
           down: currentScrollIndex.stop - currentScrollIndex.start
         });
         break;
       case KEYS.HOME:
-        updateKeyScrollOnHover({
+        updateKeyScroll({
           scrollPosition: ctrlKey && shiftKey ? 'overflowStart' : 'start'
         });
         break;
       case KEYS.END:
-        updateKeyScrollOnHover({
+        updateKeyScroll({
           scrollPosition: ctrlKey && shiftKey ? 'overflowEnd' : 'end'
         });
         break;
       default:
         return;
     }
-
-    // Note: We should not stop propagation here as it will block the containing app
-    // from handling keydown events.
     event.preventDefault();
   };
   const focusOnHoverDisabled = () => {
-    var _app$isInModalSelecti, _app$isInModalSelecti2;
     const selectNotAllowed = (constraints === null || constraints === void 0 ? void 0 : constraints.select) || (constraints === null || constraints === void 0 ? void 0 : constraints.active);
-    const appInModal = (_app$isInModalSelecti = (_app$isInModalSelecti2 = app.isInModalSelection) === null || _app$isInModalSelecti2 === void 0 ? void 0 : _app$isInModalSelecti2.call(app)) !== null && _app$isInModalSelecti !== void 0 ? _app$isInModalSelecti : appSelections.isInModal();
+    const appInModal = isModal();
     return selectNotAllowed || appInModal;
   };
   const handleOnMouseEnter = () => {
     if (!focusOnHoverDisabled()) {
-      var _containerRef$current, _containerRef$current2;
-      setHovering(true);
-      containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : (_containerRef$current2 = _containerRef$current.focus) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.call(_containerRef$current);
+      hovering.current = true;
     }
   };
   const handleOnMouseLeave = () => {
-    if (hovering) {
-      var _containerRef$current3, _containerRef$current4;
-      setHovering(false);
-      containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : (_containerRef$current4 = _containerRef$current3.blur) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.call(_containerRef$current3);
+    if (hovering.current) {
+      hovering.current = false;
     }
   };
   return {
     handleKeyDown,
     handleOnMouseEnter,
-    handleOnMouseLeave
+    handleOnMouseLeave,
+    globalKeyDown
   };
 }
 
-const PREFIX$c = 'RowColumn';
-const rowColClasses = {
-  row: "".concat(PREFIX$c, "-row"),
-  rowBorderBottom: "".concat(PREFIX$c, "-rowBorderBottom"),
-  column: "".concat(PREFIX$c, "-column"),
-  fieldRoot: "".concat(PREFIX$c, "-fieldRoot"),
-  cell: "".concat(PREFIX$c, "-cell"),
-  labelText: "".concat(PREFIX$c, "-labelText"),
-  labelDense: "".concat(PREFIX$c, "-labelDense"),
-  highlighted: "".concat(PREFIX$c, "-highlighted"),
-  checkboxLabel: "".concat(PREFIX$c, "-checkboxLabel"),
-  icon: "".concat(PREFIX$c, "-icon"),
-  S: "".concat(PREFIX$c, "-S"),
-  XS: "".concat(PREFIX$c, "-XS"),
-  A: "".concat(PREFIX$c, "-A"),
-  X: "".concat(PREFIX$c, "-X"),
-  frequencyCount: "".concat(PREFIX$c, "-frequencyCount"),
-  barContainer: "".concat(PREFIX$c, "-barContainer"),
-  bar: "".concat(PREFIX$c, "-bar"),
-  barSelected: "".concat(PREFIX$c, "-barSelected"),
-  barWithCheckbox: "".concat(PREFIX$c, "-barWithCheckbox"),
-  barSelectedWithCheckbox: "".concat(PREFIX$c, "-barSelectedWithCheckbox"),
-  excludedTextWithCheckbox: "".concat(PREFIX$c, "-excludedTextWithCheckbox")
-};
-
 const isExcluded = c => c ? c.qState === 'X' || c.qState === 'XS' || c.qState === 'XL' : null;
 const isAlternative = c => c ? c.qState === 'A' : null;
 const excludedOrAlternative = _ref => {
@@ -10247,13 +10454,15 @@ function Frequency(_ref) {
     dense,
     showGray
   } = _ref;
+  const frequencyText = getFrequencyText(cell === null || cell === void 0 ? void 0 : cell.qFrequency);
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     style: {
       display: 'flex',
       alignItems: 'center'
     },
-    className: rowColClasses.frequencyCount
+    className: rowColClasses.frequencyCount,
+    "aria-label": frequencyText
   }, /*#__PURE__*/React__default.createElement(Typography, {
     noWrap: true,
     color: "inherit",
@@ -10262,7 +10471,7 @@ function Frequency(_ref) {
       cell,
       checkboxes
     }) && rowColClasses.excludedTextWithCheckbox])
-  }, getFrequencyText(cell === null || cell === void 0 ? void 0 : cell.qFrequency)));
+  }, frequencyText));
 }
 
 function getGridItemSizes(_ref) {
@@ -10299,7 +10508,7 @@ function getGridItemSizes(_ref) {
 }
 
 const ItemGrid = styled$1(Grid, {
-  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'checkboxes'].includes(prop)
+  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'cellPaddingRight'].includes(prop)
 })(_ref => {
   let {
     dataLayout,
@@ -10334,6 +10543,79 @@ function getCellFromPages(_ref) {
   return c;
 }
 
+/* eslint-disable import/prefer-default-export */
+const LOC_STATES = {
+  S: 'Object.Listbox.Selected',
+  A: 'Object.Listbox.Alternative',
+  O: 'Object.Listbox.Optional',
+  XS: 'Object.Listbox.SelectedExcluded',
+  L: 'Object.Listbox.Locked',
+  X: 'Object.Listbox.Excluded',
+  XL: 'Object.Listbox.ExcludedLock'
+};
+function getValueLabel(_ref) {
+  let {
+    translator,
+    label,
+    qState,
+    isSelected,
+    currentIndex,
+    maxIndex,
+    showSearch
+  } = _ref;
+  const stateTranslation = LOC_STATES[qState];
+  const state = translator.get(stateTranslation);
+  const srStringArr = [];
+  if (isSelected) {
+    const navTranslation = showSearch ? 'Listbox.ScreenReader.SearchThenSelectionsMenu.WithAccSelMenu' : 'Listbox.ScreenReader.SelectionMenu.WithAccSelMenu';
+    const nav = translator.get(navTranslation);
+    srStringArr.push(nav);
+  }
+  const valueString = "".concat(label, " ").concat(state);
+  const indexString = translator.get('CurrentSelections.Of', [currentIndex + 1, maxIndex + 1]); // E.g. 3 of 20
+  srStringArr.unshift(valueString, indexString);
+  const srString = srStringArr.join('. ').trim();
+  return srString;
+}
+
+/**
+ * Announces the selection state.
+ *
+ * @ignore
+ * @param {Layout} object
+ * @returns {Element} An (invisible) component.
+ */
+function ScreenReaderForSelections(_ref2) {
+  var _layout$qListObject;
+  let {
+    layout
+  } = _ref2;
+  const {
+    translator
+  } = useContext(InstanceContext);
+  const {
+    qStateCounts: s = {}
+  } = (layout === null || layout === void 0 ? void 0 : (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qDimensionInfo) || {};
+  const count = s.qSelected + s.qSelectedExcluded + s.qLocked + s.qLockedExcluded;
+  let t;
+  switch (count) {
+    case 0:
+      t = 'ScreenReader.ZeroSelected';
+      break;
+    case 1:
+      t = 'ScreenReader.OneSelected';
+      break;
+    default:
+      t = 'ScreenReader.ManySelected';
+      break;
+  }
+  const text = translator.get(t, [count]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "screenReaderOnly",
+    "aria-live": "assertive"
+  }, text);
+}
+
 function RowColumn(_ref) {
   var _cell$qText, _cell$qHighlightRange, _cell$qHighlightRange2;
   let {
@@ -10349,6 +10631,8 @@ function RowColumn(_ref) {
     onMouseDown,
     onMouseUp,
     onMouseEnter,
+    onTouchStart,
+    onTouchEnd,
     pages,
     isLocked,
     column = false,
@@ -10370,7 +10654,10 @@ function RowColumn(_ref) {
     focusListItems,
     listCount,
     itemPadding,
-    frequencyWidth
+    frequencyWidth,
+    translator,
+    showSearch,
+    isModal
   } = data;
   const {
     dense = false,
@@ -10420,8 +10707,10 @@ function RowColumn(_ref) {
     }
   }, [rowRef.current]);
   const handleKeyDownCallback = useCallback(getFieldKeyboardNavigation(_objectSpread2(_objectSpread2({}, actions), {}, {
-    focusListItems
-  })), [actions]);
+    focusListItems,
+    keyboard,
+    isModal
+  })), [actions, keyboard === null || keyboard === void 0 ? void 0 : keyboard.innerTabStops]);
   const cell = useMemo$1(() => getCellFromPages({
     pages,
     cellIndex
@@ -10486,6 +10775,14 @@ function RowColumn(_ref) {
   const showTick = !checkboxes && isSelected && !isLocked;
   const showIcon = !checkboxes && sizePermitsTickOrLock;
   const cellPaddingRight = checkboxes || !sizePermitsTickOrLock;
+  const ariaLabel = getValueLabel({
+    translator,
+    label,
+    qState: cell.qState,
+    currentIndex: count.currentIndex,
+    maxIndex: count.max,
+    showSearch
+  });
   return /*#__PURE__*/React__default.createElement(RowColRoot$1, {
     className: rowColClasses.barContainer,
     flexBasisProp: flexBasisVal,
@@ -10496,6 +10793,11 @@ function RowColumn(_ref) {
     frequencyWidth: frequencyWidth,
     "data-testid": "listbox.item"
   }, /*#__PURE__*/React__default.createElement(ItemGrid, {
+    role: "row",
+    "aria-label": ariaLabel,
+    "aria-selected": isSelected,
+    "aria-setsize": count.max,
+    "aria-rowindex": count.currentIndex,
     ref: rowRef,
     container: true,
     dataLayout: dataLayout,
@@ -10512,9 +10814,10 @@ function RowColumn(_ref) {
     onMouseUp: onMouseUp,
     onMouseEnter: onMouseEnter,
     onKeyDown: handleKeyDownCallback,
+    onTouchStart: onTouchStart,
+    onTouchEnd: onTouchEnd,
     onContextMenu: preventContextMenu,
-    role: column ? 'column' : 'row',
-    tabIndex: isFirstElement && (!keyboard.enabled || keyboard.active) ? 0 : -1,
+    tabIndex: isFirstElement && keyboard.innerTabStops ? 0 : -1,
     "data-n": cell === null || cell === void 0 ? void 0 : cell.qElemNumber
   }, (cell === null || cell === void 0 ? void 0 : cell.qFrequency) && /*#__PURE__*/React__default.createElement(Histogram, {
     qFrequency: cell === null || cell === void 0 ? void 0 : cell.qFrequency,
@@ -12130,7 +12433,10 @@ function getListBoxComponents(_ref) {
     setCurrentScrollIndex,
     constraints,
     frequencyMax,
-    freqIsAllowed
+    freqIsAllowed,
+    translator,
+    showSearch,
+    isModal
   } = _ref;
   const {
     layoutOptions = {}
@@ -12184,7 +12490,10 @@ function getListBoxComponents(_ref) {
     showTick,
     dataOffset: local.current.dataOffset,
     focusListItems,
-    direction
+    direction,
+    translator,
+    showSearch,
+    isModal
   });
   const List = _ref2 => {
     let {
@@ -12626,17 +12935,14 @@ function useDataStore(model) {
   };
 }
 
-function ListBoxDisclaimer(_ref) {
+const StyledText = styled$1(Typography, {
+  shouldForwardProp: p => !['width', 'dense'].includes(p)
+})(_ref => {
   let {
     width,
-    text,
-    dense,
-    tooltip
+    dense
   } = _ref;
-  const {
-    translator
-  } = useContext(InstanceContext);
-  const StyledText = styled$1(Typography)(() => _objectSpread2({
+  return _objectSpread2({
     minWidth: "".concat(width, "px"),
     textAlign: 'center',
     fontSize: "".concat(dense ? '12px' : '14px')
@@ -12645,10 +12951,23 @@ function ListBoxDisclaimer(_ref) {
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     width
-  }));
+  });
+});
+function ListBoxDisclaimer(_ref2) {
+  let {
+    width,
+    text,
+    dense,
+    tooltip
+  } = _ref2;
+  const {
+    translator
+  } = useContext(InstanceContext);
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     title: tooltip ? translator.get(text) : ''
   }, /*#__PURE__*/React__default.createElement(StyledText, {
+    width: width,
+    dense: dense,
     component: "div",
     variant: "body1",
     py: "12px"
@@ -13016,6 +13335,14 @@ const useFrequencyMax = (app, layout) => {
 
 const _excluded$4 = ["isLoadingData"];
 const DEFAULT_MIN_BATCH_SIZE = 100;
+const StyledWrapper = styled$4('div')(() => ({
+  ["& .screenReaderOnly"]: {
+    position: 'absolute',
+    height: 0,
+    width: 0,
+    overflow: 'hidden'
+  }
+}));
 function ListBox(_ref) {
   var _layout$qListObject$q, _loaderRef$current, _loaderRef$current$_l, _loaderRef$current$_l2;
   let {
@@ -13046,8 +13373,13 @@ function ListBox(_ref) {
       set: () => {}
     },
     renderedCallback,
-    onCtrlF
+    onCtrlF,
+    showSearch,
+    isModal
   } = _ref;
+  const {
+    translator
+  } = useContext(InstanceContext);
   const [initScrollPosIsSet, setInitScrollPosIsSet] = useState$1(false);
   const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
   const {
@@ -13121,7 +13453,8 @@ function ListBox(_ref) {
     selectionState,
     selections,
     checkboxes,
-    doc: document
+    doc: document,
+    loaderRef
   });
   const {
     layoutOptions = {}
@@ -13302,7 +13635,10 @@ function ListBox(_ref) {
     setCurrentScrollIndex: currentScrollIndex.set,
     constraints,
     frequencyMax,
-    freqIsAllowed
+    freqIsAllowed,
+    translator,
+    showSearch,
+    isModal
   });
   const {
     columnWidth,
@@ -13317,7 +13653,10 @@ function ListBox(_ref) {
       itemHeight
     });
   }
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !listCount && /*#__PURE__*/React__default.createElement(ListBoxDisclaimer, {
+  return /*#__PURE__*/React__default.createElement(StyledWrapper, null, /*#__PURE__*/React__default.createElement(ScreenReaderForSelections, {
+    className: "screenReaderOnly",
+    layout: layout
+  }), !listCount && /*#__PURE__*/React__default.createElement(ListBoxDisclaimer, {
     width: width,
     text: "Listbox.NoMatchesForYourTerms"
   }), /*#__PURE__*/React__default.createElement(InfiniteLoader, {
@@ -13329,7 +13668,8 @@ function ListBox(_ref) {
     }),
     threshold: 0,
     minimumBatchSize: minimumBatchSize,
-    ref: loaderRef
+    ref: loaderRef,
+    role: "grid"
   }, isVertical ? List : Grid), overflowDisclaimer.show && !overflowDisclaimer.dismissed && /*#__PURE__*/React__default.createElement(ListBoxFooter, {
     text: "Listbox.ItemsOverflow",
     dismiss: () => setOverflowDisclaimer(state => _objectSpread2(_objectSpread2({}, state), {}, {
@@ -13481,6 +13821,7 @@ const Item = React__default.forwardRef((_ref, ref) => {
   if (hidden) return null;
   const spacing = Number.parseInt(theme.spacing(0.5), 10);
   const handleKeyDown = item.keyboardAction ? e => ['Enter', ' ', 'Spacebar'].includes(e.key) && item.keyboardAction() : null;
+  const btnId = "actions-toolbar-".concat(item.key);
   return /*#__PURE__*/React__default.createElement(IconButton, {
     ref: !addAnchor ? ref : null,
     title: item.label,
@@ -13488,12 +13829,12 @@ const Item = React__default.forwardRef((_ref, ref) => {
     onKeyDown: handleKeyDown,
     disabled: disabled,
     style: style,
-    className: ActionElement.className,
+    className: [ActionElement.className, btnId].join(' '),
     size: "large",
     disableRipple: true,
     "aria-expanded": ariaExpanded,
     "aria-controls": "moreMenuList",
-    "data-testid": "actions-toolbar-".concat(item.key)
+    "data-testid": btnId
   }, hasSvgIconShape && SvgIcon$2(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     style: {
@@ -13672,6 +14013,70 @@ const More$1 = React__default.forwardRef((_ref3, ref) => {
   }))));
 });
 
+const getActionButtonIndex = btn => {
+  const toolbar = btn.closest('#actions-toolbar');
+  const nodeList = toolbar === null || toolbar === void 0 ? void 0 : toolbar.querySelectorAll('.njs-cell-action');
+  return Array.from(nodeList).indexOf(btn);
+};
+const focusButton = index => {
+  const toolbar = document.querySelector('#actions-toolbar');
+  const nodeList = toolbar === null || toolbar === void 0 ? void 0 : toolbar.querySelectorAll('.njs-cell-action');
+  if (!nodeList.length) {
+    return;
+  }
+  const ix = Math.min(Math.max(0, index), nodeList.length - 1);
+  const btn = nodeList[ix];
+  btn.focus();
+};
+function getActionsKeyDownHandler(_ref) {
+  let {
+    keyboardNavigation,
+    focusHandler,
+    getEnabledButton
+  } = _ref;
+  const handleActionsKeyDown = evt => {
+    const {
+      target,
+      nativeEvent
+    } = evt;
+    const {
+      keyCode
+    } = nativeEvent;
+    switch (keyCode) {
+      case KEYS.ARROW_LEFT:
+      case KEYS.ARROW_DOWN:
+      case KEYS.ARROW_RIGHT:
+      case KEYS.ARROW_UP:
+        {
+          const isActionButton = target.classList.contains('njs-cell-action');
+          if (isActionButton) {
+            const index = getActionButtonIndex(target);
+            const pressedLeft = [KEYS.ARROW_LEFT, KEYS.ARROW_DOWN].includes(keyCode);
+            focusButton(pressedLeft ? index - 1 : index + 1);
+          }
+          evt.stopPropagation();
+          evt.preventDefault();
+          break;
+        }
+      case KEYS.SPACE:
+        evt.preventDefault(); // prevent scrolling in listbox
+        break;
+      case KEYS.TAB:
+        if (keyboardNavigation && focusHandler !== null && focusHandler !== void 0 && focusHandler.refocusContent) {
+          const isTabbingOut = evt.shiftKey && getEnabledButton(false) === evt.target || !evt.shiftKey && getEnabledButton(true) === evt.target;
+          if (isTabbingOut) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            // if keyboardNavigation is true, create a callback to handle tabbing from the first/last button in the toolbar that resets focus on the content
+            focusHandler.refocusContent();
+          }
+        }
+        break;
+    }
+  };
+  return handleActionsKeyDown;
+}
+
 const PREFIX$7 = 'ActionsToolbar';
 const classes$7 = {
   item: "".concat(PREFIX$7, "-item"),
@@ -13707,6 +14112,7 @@ const ActionToolbarElement = {
 };
 const ActionsGroup = React__default.forwardRef((_ref2, ref) => {
   let {
+    className,
     ariaExpanded = false,
     actions = [],
     first = false,
@@ -13719,7 +14125,8 @@ const ActionsGroup = React__default.forwardRef((_ref2, ref) => {
     container: true,
     gap: 0,
     flexDirection: isRtl ? 'row-reverse' : 'row',
-    wrap: "nowrap"
+    wrap: "nowrap",
+    className: className
   }, actions.map((e, ix) => {
     let cls = [];
     const isFirstItem = first && ix === 0;
@@ -13787,22 +14194,27 @@ function ActionsToolbar(_ref3) {
     keyboardNavigation
   } = useContext(InstanceContext);
   const [showMoreItems, setShowMoreItems] = useState$1(false);
-  const moreRef = useRef();
+  const popoverAnchorOrigin = {
+    vertical: 7,
+    horizontal: ((_popover$anchorEl$cli = (_popover$anchorEl = popover.anchorEl) === null || _popover$anchorEl === void 0 ? void 0 : _popover$anchorEl.clientWidth) !== null && _popover$anchorEl$cli !== void 0 ? _popover$anchorEl$cli : 0) - 7
+  };
   const actionsRef = useRef();
+  const moreRef = useRef();
   const theme = useTheme$1();
   const dividerStyle = useMemo$1(() => ({
     margin: theme.spacing(0.5, 0)
   }));
-  const popoverAnchorOrigin = {
-    vertical: 15,
-    horizontal: ((_popover$anchorEl$cli = (_popover$anchorEl = popover.anchorEl) === null || _popover$anchorEl === void 0 ? void 0 : _popover$anchorEl.clientWidth) !== null && _popover$anchorEl$cli !== void 0 ? _popover$anchorEl$cli : 0) - 7
-  };
   const getEnabledButton = last => {
     const actionsElement = actionsRef.current || actionsRefMock;
     if (!actionsElement) return null;
     const buttons = actionsElement.querySelectorAll('button:not(.Mui-disabled)');
     return buttons[last ? buttons.length - 1 : 0];
   };
+  const handleActionsKeyDown = useMemo$1(() => getActionsKeyDownHandler({
+    keyboardNavigation,
+    focusHandler,
+    getEnabledButton
+  }), [keyboardNavigation, focusHandler, getEnabledButton]);
   useEffect$1(() => () => {
     setShowMoreItems(false);
   }, [popover.show, show, selections.show]);
@@ -13842,27 +14254,18 @@ function ActionsToolbar(_ref3) {
     enabled: () => moreEnabled,
     action: () => setShowMoreItems(!showMoreItems)
   };
-  const tabCallback =
-  // if keyboardNavigation is true, create a callback to handle tabbing from the first/last button in the toolbar that resets focus on the content
-  keyboardNavigation && focusHandler && focusHandler.refocusContent ? evt => {
-    if (evt.key !== 'Tab') return;
-    const isTabbingOut = evt.shiftKey && getEnabledButton(false) === evt.target || !evt.shiftKey && getEnabledButton(true) === evt.target;
-    if (isTabbingOut) {
-      evt.preventDefault();
-      evt.stopPropagation();
-      focusHandler.refocusContent();
-    }
-  } : null;
   const showActions = newActions.length > 0;
   const showMore = moreActions.length > 0;
   const showDivider = showActions && selections.show || showMore && selections.show;
   const isRtl = direction === 'rtl';
   const Actions = /*#__PURE__*/React__default.createElement(Grid, {
     ref: actionsRef,
-    onKeyDown: tabCallback,
+    onKeyDown: handleActionsKeyDown,
     container: true,
     gap: 0,
     wrap: "nowrap",
+    id: "actions-toolbar",
+    "data-testid": "actions-toolbar",
     sx: {
       flexDirection: isRtl ? 'row-reverse' : 'row'
     }
@@ -13871,6 +14274,8 @@ function ActionsToolbar(_ref3) {
     first: true,
     last: !showMore && !selections.show
   }), showMore && /*#__PURE__*/React__default.createElement(ActionsGroup, {
+    id: "actions-toolbar-show-more",
+    "data-testid": "actions-toolbar-show-more",
     ref: moreRef,
     ariaExpanded: showMoreItems,
     actions: [moreItem],
@@ -13884,6 +14289,7 @@ function ActionsToolbar(_ref3) {
   }, /*#__PURE__*/React__default.createElement(Divider, {
     orientation: "vertical"
   })), selections.show && /*#__PURE__*/React__default.createElement(ActionsGroup, {
+    className: "actions-toolbar-default-actions",
     actions: defaultSelectionActions,
     first: !showActions && !showMore,
     last: true,
@@ -13907,6 +14313,8 @@ function ActionsToolbar(_ref3) {
     hideBackdrop: true,
     style: popoverStyle,
     PaperProps: {
+      id: 'njs-action-toolbar-popover',
+      'data-testid': 'njs-action-toolbar-popover',
       className: ActionToolbarElement.className,
       style: {
         pointerEvents: 'auto',
@@ -14034,29 +14442,57 @@ function ListBoxSearch(_ref3) {
     }
     return response;
   };
+  function focusRow(container) {
+    const row = (container === null || container === void 0 ? void 0 : container.querySelector('.last-focused')) || (container === null || container === void 0 ? void 0 : container.querySelector('[role="row"]:first-child'));
+    row.setAttribute('tabIndex', 0);
+    row === null || row === void 0 ? void 0 : row.focus();
+  }
   const onKeyDown = async e => {
-    let response;
+    const {
+      currentTarget
+    } = e;
+    const container = currentTarget.closest('.listbox-container');
     switch (e.key) {
       case 'Enter':
-        response = await performSearch();
+        performSearch();
         break;
       case 'Escape':
-        response = cancel();
-        e.preventDefault();
-        e.stopPropagation();
-        break;
+        {
+          focusRow(container);
+          cancel();
+          break;
+        }
+      case 'Tab':
+        {
+          if (e.shiftKey) {
+            keyboard.focusSelection();
+          } else {
+            // Focus the row we last visited or the first one.
+            focusRow(container);
+
+            // Clean up.
+            container === null || container === void 0 ? void 0 : container.querySelectorAll('.last-focused').forEach(elm => {
+              elm.classList.remove('last-focused');
+            });
+          }
+          break;
+        }
       case 'f':
       case 'F':
         if (e.ctrlKey || e.metaKey) {
           if (hide) {
             hide();
           }
-          e.preventDefault();
-          e.stopPropagation();
+        } else {
+          return undefined;
         }
         break;
+      default:
+        return undefined;
     }
-    return response;
+    e.preventDefault();
+    e.stopPropagation();
+    return undefined;
   };
   if (!visible || searchEnabled === false) {
     return null;
@@ -14102,10 +14538,11 @@ function ListBoxSearch(_ref3) {
     onKeyDown: onKeyDown,
     autoFocus: autoFocus,
     inputProps: {
-      tabIndex: keyboard && (!keyboard.enabled || keyboard.active) ? 0 : -1,
+      tabIndex: keyboard.innerTabStops ? 0 : -1,
       style: {
         textAlign: "".concat(inpuTextAlign)
-      }
+      },
+      'data-testid': 'search-input-field'
     }
   });
 }
@@ -14349,6 +14786,12 @@ function useObjectSelections(app, model, elements, options) {
     objectSelections.addListener('activated', activateClickOut);
     objectSelections.addListener('deactivated', deactivateClickOut);
     return () => {
+      // confirm selection before removing event handler
+      // to end the selection when the object is removed
+      // and remove the (ClickOut) mousedown handler from the document
+      if (objectSelections.isActive()) {
+        objectSelections.confirm();
+      }
       objectSelections.removeListener('activated', activateClickOut);
       objectSelections.removeListener('deactivated', deactivateClickOut);
     };
@@ -15953,6 +16396,7 @@ const addListboxTheme = themeApi => {
   };
 };
 
+/* eslint-disable no-nested-ternary */
 function showToolbarDetached(_ref) {
   var _containerRef$current, _containerRef$current2, _titleRef$current$cli, _titleRef$current, _titleRef$current2, _titleRef$current3;
   let {
@@ -15966,12 +16410,17 @@ function showToolbarDetached(_ref) {
   const actionToolbarWidth = 128;
   const notSufficientSpace = containerWidth < contentWidth + actionToolbarWidth;
   const isTruncated = (titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current2 = titleRef.current) === null || _titleRef$current2 === void 0 ? void 0 : _titleRef$current2.scrollWidth) > (titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current3 = titleRef.current) === null || _titleRef$current3 === void 0 ? void 0 : _titleRef$current3.offsetWidth);
-  return !!(notSufficientSpace | isTruncated);
+  const isDetached = !!(notSufficientSpace | isTruncated);
+  const reasonDetached = isDetached ? notSufficientSpace ? 'noSpace' : 'truncated' : '';
+  return {
+    isDetached,
+    reasonDetached
+  };
 }
 
 function getListboxActionProps(_ref) {
   let {
-    isPopover,
+    isDetached,
     showToolbar,
     containerRef,
     isLocked,
@@ -15979,9 +16428,9 @@ function getListboxActionProps(_ref) {
     selections
   } = _ref;
   return {
-    show: showToolbar && !isPopover,
+    show: showToolbar && !isDetached,
     popover: {
-      show: showToolbar && isPopover,
+      show: showToolbar && isDetached,
       anchorEl: containerRef.current
     },
     more: {
@@ -16004,6 +16453,13 @@ function getListboxActionProps(_ref) {
   };
 }
 
+const StyledDiv = styled$1('div')(() => ({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center'
+}));
 function ListBoxError(_ref) {
   let {
     text
@@ -16011,13 +16467,6 @@ function ListBoxError(_ref) {
   const {
     translator
   } = useContext(InstanceContext);
-  const StyledDiv = styled$1('div')(() => ({
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }));
   return /*#__PURE__*/React__default.createElement(StyledDiv, null, translator.get(text));
 }
 
@@ -16052,7 +16501,7 @@ const StyledGrid$3 = styled$1(Grid, {
     ["& .".concat(classes$4.listboxWrapper)]: {
       padding: containerPadding
     },
-    '&:focus:not(:hover)': {
+    '&:focus': {
       boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
     },
     '&:focus-visible': {
@@ -16072,12 +16521,20 @@ const Title = styled$1(Typography)(_ref2 => {
     fontWeight: ((_theme$listBox5 = theme.listBox) === null || _theme$listBox5 === void 0 ? void 0 : (_theme$listBox5$title = _theme$listBox5.title) === null || _theme$listBox5$title === void 0 ? void 0 : (_theme$listBox5$title2 = _theme$listBox5$title.main) === null || _theme$listBox5$title2 === void 0 ? void 0 : _theme$listBox5$title2.fontWeight) || 'bold'
   };
 });
-function ListBoxInline(_ref3) {
+const isModal = _ref3 => {
+  var _app$isInModalSelecti, _app$isInModalSelecti2;
+  let {
+    app,
+    appSelections
+  } = _ref3;
+  return (_app$isInModalSelecti = (_app$isInModalSelecti2 = app.isInModalSelection) === null || _app$isInModalSelecti2 === void 0 ? void 0 : _app$isInModalSelecti2.call(app)) !== null && _app$isInModalSelecti !== void 0 ? _app$isInModalSelecti : appSelections.isInModal();
+};
+function ListBoxInline(_ref4) {
   var _layoutOptions$dense;
   let {
     options,
     layout
-  } = _ref3;
+  } = _ref4;
   const {
     app,
     direction,
@@ -16096,7 +16553,8 @@ function ListBoxInline(_ref3) {
     showGray = true,
     scrollState = undefined,
     renderedCallback,
-    toolbar = true
+    toolbar = true,
+    isPopover = false
   } = options;
 
   // Hook that will trigger update when used in useEffects.
@@ -16125,8 +16583,7 @@ function ListBoxInline(_ref3) {
   const [searchContainer, searchContainerRef] = useRefWithCallback();
   const [showToolbar, setShowToolbar] = useState$1(false);
   const [showSearch, setShowSearch] = useState$1(false);
-  const [keyboardActive, setKeyboardActive] = useState$1(false);
-  const [hovering, setHovering] = useState$1(false);
+  const hovering = useRef(false);
   const [keyScroll, setKeyScroll] = useState$1({
     down: 0,
     up: 0,
@@ -16140,32 +16597,40 @@ function ListBoxInline(_ref3) {
   const [appSelections] = useAppSelections(app);
   const titleRef = useRef(null);
   const [selectionState$1] = useState$1(() => selectionState());
+  const keyboard = useTempKeyboard({
+    containerRef,
+    enabled: keyboardNavigation
+  });
+  const isModalMode = useCallback(() => isModal({
+    app,
+    appSelections
+  }), [app, appSelections]);
   const isInvalid = layout === null || layout === void 0 ? void 0 : layout.qListObject.qDimensionInfo.qError;
   const errorText = isInvalid && constraints.active ? 'Visualization.Invalid.Dimension' : 'Visualization.Incomplete';
   const {
     handleKeyDown,
     handleOnMouseEnter,
-    handleOnMouseLeave
-  } = getListboxInlineKeyboardNavigation({
-    setKeyboardActive,
+    handleOnMouseLeave,
+    globalKeyDown
+  } = useMemo$1(() => getListboxInlineKeyboardNavigation({
+    keyboard,
     hovering,
-    setHovering,
     updateKeyScroll,
     containerRef,
     currentScrollIndex,
     app,
     appSelections,
-    constraints
-  });
-
-  // Expose the keyboard flags in the same way as the keyboard hook does.
-  const keyboard = {
-    enabled: keyboardNavigation,
-    // this will be static until we can access the useKeyboard hook
-    active: keyboardActive
-  };
-  const showDetachedToolbarOnly = toolbar && ((layout === null || layout === void 0 ? void 0 : layout.title) === '' || (layout === null || layout === void 0 ? void 0 : layout.showTitle) === false);
-  const showToolbarWithTitle = toolbar && (layout === null || layout === void 0 ? void 0 : layout.title) !== '' && (layout === null || layout === void 0 ? void 0 : layout.showTitle) !== false;
+    constraints,
+    isModal: isModalMode
+  }), [keyboard, hovering, updateKeyScroll, containerRef, currentScrollIndex, app, appSelections, constraints, isModalMode]);
+  const showDetachedToolbarOnly = toolbar && ((layout === null || layout === void 0 ? void 0 : layout.title) === '' || (layout === null || layout === void 0 ? void 0 : layout.showTitle) === false) && !isPopover;
+  const showToolbarWithTitle = toolbar && (layout === null || layout === void 0 ? void 0 : layout.title) !== '' && (layout === null || layout === void 0 ? void 0 : layout.showTitle) !== false || isPopover;
+  useEffect$1(() => {
+    document.addEventListener('keydown', globalKeyDown);
+    return () => {
+      document.removeEventListener('keydown', globalKeyDown);
+    };
+  }, [globalKeyDown]);
   useEffect$1(() => {
     const show = () => {
       setShowToolbar(true);
@@ -16176,6 +16641,14 @@ function ListBoxInline(_ref3) {
         setShowSearch(false);
       }
     };
+    if (isPopover) {
+      if (!selections.isActive()) {
+        selections.begin('/qListObjectDef');
+        selections.on('activated', show);
+        selections.on('deactivated', hide);
+      }
+      setShowToolbar(isPopover);
+    }
     if (selections) {
       if (!selections.isModal()) {
         selections.on('activated', show);
@@ -16189,7 +16662,7 @@ function ListBoxInline(_ref3) {
         selections.removeListener('deactivated', hide);
       }
     };
-  }, [selections]);
+  }, [selections, isPopover]);
   useEffect$1(() => {
     if (!searchContainer || !searchContainer.current) {
       return;
@@ -16237,8 +16710,8 @@ function ListBoxInline(_ref3) {
       input === null || input === void 0 ? void 0 : input.focus();
     }
   };
-  const getActionToolbarProps = isPopover => getListboxActionProps({
-    isPopover,
+  const getActionToolbarProps = isDetached => getListboxActionProps({
+    isDetached: isPopover ? false : isDetached,
     showToolbar,
     containerRef,
     isLocked,
@@ -16252,6 +16725,14 @@ function ListBoxInline(_ref3) {
   const iconsWidth = (showSearchOrLockIcon ? BUTTON_ICON_WIDTH : 0) + (isDrillDown ? ICON_WIDTH + ICON_PADDING : 0); // Drill-down icon needs padding right so there is space between the icon and the title
   const headerPaddingLeft = CELL_PADDING_LEFT - (showSearchOrLockIcon ? ICON_PADDING : 0);
   const headerPaddingRight = isRtl ? CELL_PADDING_LEFT - (showIcons ? ICON_PADDING : 0) : 0;
+  const {
+    isDetached,
+    reasonDetached
+  } = showToolbarDetached({
+    containerRef,
+    titleRef,
+    iconsWidth
+  });
 
   // Add a container padding for grid mode to harmonize with the grid item margins (should sum to 8px).
   const isGridMode = (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.dataLayout) === 'grid';
@@ -16300,7 +16781,7 @@ function ListBoxInline(_ref3) {
   }, getActionToolbarProps(true))), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
     container: true,
-    tabIndex: keyboard.enabled && !keyboard.active ? 0 : -1,
+    tabIndex: keyboard.enabled ? -1 : undefined,
     direction: "column",
     gap: 0,
     containerPadding: containerPadding,
@@ -16356,6 +16837,9 @@ function ListBoxInline(_ref3) {
     className: classes$4.listBoxHeader
   }, /*#__PURE__*/React__default.createElement(Title, {
     variant: "h6",
+    sx: {
+      width: isPopover && reasonDetached === 'noSpace' ? '60px' : undefined
+    },
     noWrap: true,
     ref: titleRef,
     title: layout.title
@@ -16366,11 +16850,7 @@ function ListBoxInline(_ref3) {
     item: true
   }, /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$6({
     direction: direction
-  }, getActionToolbarProps(showToolbarDetached({
-    containerRef,
-    titleRef,
-    iconsWidth
-  })))))), /*#__PURE__*/React__default.createElement(Grid, {
+  }, getActionToolbarProps(isDetached))))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
     direction: "column",
@@ -16406,11 +16886,11 @@ function ListBoxInline(_ref3) {
     className: classes$4.screenReaderOnly
   }, translator.get('Listbox.ScreenReaderInstructions')), isInvalid ? /*#__PURE__*/React__default.createElement(ListBoxError, {
     text: errorText
-  }) : /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref4 => {
+  }) : /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref5 => {
     let {
       height,
       width
-    } = _ref4;
+    } = _ref5;
     return /*#__PURE__*/React__default.createElement(ListBox, {
       model: model,
       app: app,
@@ -16445,15 +16925,16 @@ function ListBoxInline(_ref3) {
         set: setCurrentScrollIndex
       },
       renderedCallback: renderedCallback,
-      onCtrlF: onCtrlF
+      onCtrlF: onCtrlF,
+      isModal: isModalMode
     });
   })))));
 }
 const ListBoxInlineMemoed = React__default.memo(ListBoxInline);
-function IsolateUseLayoutWrapper(_ref5) {
+function IsolateUseLayoutWrapper(_ref6) {
   let {
     options = {}
-  } = _ref5;
+  } = _ref6;
   const {
     model
   } = options;
@@ -21550,7 +22031,7 @@ function useRenderState() {
  * Gets an event emitter instance for the visualization.
  * @entry
  * @experimental
- * @returns {Emitter} The emitter instance.
+ * @returns {Emitter} The emitter instance. Implements https://nodejs.org/api/events.html#class-eventemitter.
  * @example
  * // In a Nebula visualization
  * import { useEmitter } from '@nebula.js/stardust';