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

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @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.
 */
@@ -15420,7 +15420,7 @@
 	  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', ''));
 	});
@@ -15628,7 +15628,7 @@
 	  const appRef = React.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);
@@ -21702,21 +21702,70 @@
 	  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 = reactExports.useRef({
 	    startElemNumber: undefined,
 	    elemNumbers: [],
 	    isRange: false,
 	    toggle: false,
-	    active: false
+	    active: false,
+	    touchElemNumbers: [],
+	    touchRangeSmall: false
 	  });
+	  reactExports.useEffect(() => {
+	    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 = () => {
@@ -21728,6 +21777,10 @@
 	      toggle: currentSelect.current.toggle
 	    });
 	  };
+	  const getRange = (start, end) => {
+	    const elemNumbersOrdered = getElemNumbersFromPages(selectionState.enginePages);
+	    return fillRange([start, end], elemNumbersOrdered);
+	  };
 	  const addToRange = elemNumber => {
 	    const {
 	      startElemNumber
@@ -21735,9 +21788,7 @@
 	    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 () {
@@ -21833,6 +21884,48 @@
 	    const elemNumber = +event.currentTarget.getAttribute('data-n');
 	    addToRange(elemNumber);
 	  }, []);
+	  const onTouchStart = reactExports.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 = reactExports.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();
+	  }, []);
 	  reactExports.useEffect(() => {
 	    doc.addEventListener('mouseup', onMouseUpDoc);
 	    return () => {
@@ -21865,7 +21958,9 @@
 	    Object.assign(interactionEvents, {
 	      onMouseUp,
 	      onMouseDown,
-	      onMouseEnter
+	      onMouseEnter,
+	      onTouchStart,
+	      onTouchEnd
 	    });
 	  }
 	  return {
@@ -21979,6 +22074,84 @@
 	  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] = reactExports.useState(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,
@@ -21987,7 +22160,9 @@
 	    confirm,
 	    cancel,
 	    setScrollPosition,
-	    focusListItems
+	    focusListItems,
+	    keyboard,
+	    isModal
 	  } = _ref;
 	  const getElement = function (elm) {
 	    let next = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -22000,49 +22175,86 @@
 	  };
 	  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) {
@@ -22086,159 +22298,154 @@
 	}
 	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 => {
@@ -22878,13 +23085,15 @@
 	    dense,
 	    showGray
 	  } = _ref;
+	  const frequencyText = getFrequencyText(cell === null || cell === void 0 ? void 0 : cell.qFrequency);
 	  return /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    style: {
 	      display: 'flex',
 	      alignItems: 'center'
 	    },
-	    className: rowColClasses.frequencyCount
+	    className: rowColClasses.frequencyCount,
+	    "aria-label": frequencyText
 	  }, /*#__PURE__*/React.createElement(Typography$1, {
 	    noWrap: true,
 	    color: "inherit",
@@ -22893,7 +23102,7 @@
 	      cell,
 	      checkboxes
 	    }) && rowColClasses.excludedTextWithCheckbox])
-	  }, getFrequencyText(cell === null || cell === void 0 ? void 0 : cell.qFrequency)));
+	  }, frequencyText));
 	}
 
 	function getGridItemSizes(_ref) {
@@ -22930,7 +23139,7 @@
 	}
 
 	const ItemGrid = styled$1(Grid$1, {
-	  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'checkboxes'].includes(prop)
+	  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'cellPaddingRight'].includes(prop)
 	})(_ref => {
 	  let {
 	    dataLayout,
@@ -22965,6 +23174,79 @@
 	  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
+	  } = reactExports.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.createElement("div", {
+	    className: "screenReaderOnly",
+	    "aria-live": "assertive"
+	  }, text);
+	}
+
 	function RowColumn(_ref) {
 	  var _cell$qText, _cell$qHighlightRange, _cell$qHighlightRange2;
 	  let {
@@ -22980,6 +23262,8 @@
 	    onMouseDown,
 	    onMouseUp,
 	    onMouseEnter,
+	    onTouchStart,
+	    onTouchEnd,
 	    pages,
 	    isLocked,
 	    column = false,
@@ -23001,7 +23285,10 @@
 	    focusListItems,
 	    listCount,
 	    itemPadding,
-	    frequencyWidth
+	    frequencyWidth,
+	    translator,
+	    showSearch,
+	    isModal
 	  } = data;
 	  const {
 	    dense = false,
@@ -23051,8 +23338,10 @@
 	    }
 	  }, [rowRef.current]);
 	  const handleKeyDownCallback = reactExports.useCallback(getFieldKeyboardNavigation(_objectSpread2(_objectSpread2({}, actions), {}, {
-	    focusListItems
-	  })), [actions]);
+	    focusListItems,
+	    keyboard,
+	    isModal
+	  })), [actions, keyboard === null || keyboard === void 0 ? void 0 : keyboard.innerTabStops]);
 	  const cell = reactExports.useMemo(() => getCellFromPages({
 	    pages,
 	    cellIndex
@@ -23117,6 +23406,14 @@
 	  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.createElement(RowColRoot$1, {
 	    className: rowColClasses.barContainer,
 	    flexBasisProp: flexBasisVal,
@@ -23127,6 +23424,11 @@
 	    frequencyWidth: frequencyWidth,
 	    "data-testid": "listbox.item"
 	  }, /*#__PURE__*/React.createElement(ItemGrid, {
+	    role: "row",
+	    "aria-label": ariaLabel,
+	    "aria-selected": isSelected,
+	    "aria-setsize": count.max,
+	    "aria-rowindex": count.currentIndex,
 	    ref: rowRef,
 	    container: true,
 	    dataLayout: dataLayout,
@@ -23143,9 +23445,10 @@
 	    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.createElement(Histogram, {
 	    qFrequency: cell === null || cell === void 0 ? void 0 : cell.qFrequency,
@@ -24761,7 +25064,10 @@
 	    setCurrentScrollIndex,
 	    constraints,
 	    frequencyMax,
-	    freqIsAllowed
+	    freqIsAllowed,
+	    translator,
+	    showSearch,
+	    isModal
 	  } = _ref;
 	  const {
 	    layoutOptions = {}
@@ -24815,7 +25121,10 @@
 	    showTick,
 	    dataOffset: local.current.dataOffset,
 	    focusListItems,
-	    direction
+	    direction,
+	    translator,
+	    showSearch,
+	    isModal
 	  });
 	  const List = _ref2 => {
 	    let {
@@ -25257,17 +25566,14 @@
 	  };
 	}
 
-	function ListBoxDisclaimer(_ref) {
+	const StyledText = styled$1(Typography$1, {
+	  shouldForwardProp: p => !['width', 'dense'].includes(p)
+	})(_ref => {
 	  let {
 	    width,
-	    text,
-	    dense,
-	    tooltip
+	    dense
 	  } = _ref;
-	  const {
-	    translator
-	  } = reactExports.useContext(InstanceContext);
-	  const StyledText = styled$1(Typography$1)(() => _objectSpread2({
+	  return _objectSpread2({
 	    minWidth: "".concat(width, "px"),
 	    textAlign: 'center',
 	    fontSize: "".concat(dense ? '12px' : '14px')
@@ -25276,10 +25582,23 @@
 	    overflow: 'hidden',
 	    whiteSpace: 'nowrap',
 	    width
-	  }));
+	  });
+	});
+	function ListBoxDisclaimer(_ref2) {
+	  let {
+	    width,
+	    text,
+	    dense,
+	    tooltip
+	  } = _ref2;
+	  const {
+	    translator
+	  } = reactExports.useContext(InstanceContext);
 	  return /*#__PURE__*/React.createElement(Tooltip$1, {
 	    title: tooltip ? translator.get(text) : ''
 	  }, /*#__PURE__*/React.createElement(StyledText, {
+	    width: width,
+	    dense: dense,
 	    component: "div",
 	    variant: "body1",
 	    py: "12px"
@@ -25501,6 +25820,14 @@
 
 	const _excluded$4 = ["isLoadingData"];
 	const DEFAULT_MIN_BATCH_SIZE = 100;
+	const StyledWrapper = styled$1('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 {
@@ -25531,8 +25858,13 @@
 	      set: () => {}
 	    },
 	    renderedCallback,
-	    onCtrlF
+	    onCtrlF,
+	    showSearch,
+	    isModal
 	  } = _ref;
+	  const {
+	    translator
+	  } = reactExports.useContext(InstanceContext);
 	  const [initScrollPosIsSet, setInitScrollPosIsSet] = reactExports.useState(false);
 	  const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
 	  const {
@@ -25606,7 +25938,8 @@
 	    selectionState,
 	    selections,
 	    checkboxes,
-	    doc: document
+	    doc: document,
+	    loaderRef
 	  });
 	  const {
 	    layoutOptions = {}
@@ -25787,7 +26120,10 @@
 	    setCurrentScrollIndex: currentScrollIndex.set,
 	    constraints,
 	    frequencyMax,
-	    freqIsAllowed
+	    freqIsAllowed,
+	    translator,
+	    showSearch,
+	    isModal
 	  });
 	  const {
 	    columnWidth,
@@ -25802,7 +26138,10 @@
 	      itemHeight
 	    });
 	  }
-	  return /*#__PURE__*/React.createElement(React.Fragment, null, !listCount && /*#__PURE__*/React.createElement(ListBoxDisclaimer, {
+	  return /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(ScreenReaderForSelections, {
+	    className: "screenReaderOnly",
+	    layout: layout
+	  }), !listCount && /*#__PURE__*/React.createElement(ListBoxDisclaimer, {
 	    width: width,
 	    text: "Listbox.NoMatchesForYourTerms"
 	  }), /*#__PURE__*/React.createElement(InfiniteLoader, {
@@ -25814,7 +26153,8 @@
 	    }),
 	    threshold: 0,
 	    minimumBatchSize: minimumBatchSize,
-	    ref: loaderRef
+	    ref: loaderRef,
+	    role: "grid"
 	  }, isVertical ? List : Grid), overflowDisclaimer.show && !overflowDisclaimer.dismissed && /*#__PURE__*/React.createElement(ListBoxFooter, {
 	    text: "Listbox.ItemsOverflow",
 	    dismiss: () => setOverflowDisclaimer(state => _objectSpread2(_objectSpread2({}, state), {}, {
@@ -25966,6 +26306,7 @@
 	  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.createElement(IconButton$1, {
 	    ref: !addAnchor ? ref : null,
 	    title: item.label,
@@ -25973,12 +26314,12 @@
 	    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(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React.createElement("div", {
 	    ref: ref,
 	    style: {
@@ -26157,6 +26498,70 @@
 	  }))));
 	});
 
+	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"),
@@ -26192,6 +26597,7 @@
 	};
 	const ActionsGroup = React.forwardRef((_ref2, ref) => {
 	  let {
+	    className,
 	    ariaExpanded = false,
 	    actions = [],
 	    first = false,
@@ -26204,7 +26610,8 @@
 	    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;
@@ -26272,22 +26679,27 @@
 	    keyboardNavigation
 	  } = reactExports.useContext(InstanceContext);
 	  const [showMoreItems, setShowMoreItems] = reactExports.useState(false);
-	  const moreRef = reactExports.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 = reactExports.useRef();
+	  const moreRef = reactExports.useRef();
 	  const theme = useTheme$1();
 	  const dividerStyle = reactExports.useMemo(() => ({
 	    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 = reactExports.useMemo(() => getActionsKeyDownHandler({
+	    keyboardNavigation,
+	    focusHandler,
+	    getEnabledButton
+	  }), [keyboardNavigation, focusHandler, getEnabledButton]);
 	  reactExports.useEffect(() => () => {
 	    setShowMoreItems(false);
 	  }, [popover.show, show, selections.show]);
@@ -26327,27 +26739,18 @@
 	    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.createElement(Grid$1, {
 	    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'
 	    }
@@ -26356,6 +26759,8 @@
 	    first: true,
 	    last: !showMore && !selections.show
 	  }), showMore && /*#__PURE__*/React.createElement(ActionsGroup, {
+	    id: "actions-toolbar-show-more",
+	    "data-testid": "actions-toolbar-show-more",
 	    ref: moreRef,
 	    ariaExpanded: showMoreItems,
 	    actions: [moreItem],
@@ -26369,6 +26774,7 @@
 	  }, /*#__PURE__*/React.createElement(Divider$1, {
 	    orientation: "vertical"
 	  })), selections.show && /*#__PURE__*/React.createElement(ActionsGroup, {
+	    className: "actions-toolbar-default-actions",
 	    actions: defaultSelectionActions,
 	    first: !showActions && !showMore,
 	    last: true,
@@ -26392,6 +26798,8 @@
 	    hideBackdrop: true,
 	    style: popoverStyle,
 	    PaperProps: {
+	      id: 'njs-action-toolbar-popover',
+	      'data-testid': 'njs-action-toolbar-popover',
 	      className: ActionToolbarElement.className,
 	      style: {
 	        pointerEvents: 'auto',
@@ -26519,29 +26927,57 @@
 	    }
 	    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;
@@ -26587,10 +27023,11 @@
 	    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'
 	    }
 	  });
 	}
@@ -26834,6 +27271,12 @@
 	    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);
 	    };
@@ -28438,6 +28881,7 @@
 	  };
 	};
 
+	/* eslint-disable no-nested-ternary */
 	function showToolbarDetached(_ref) {
 	  var _containerRef$current, _containerRef$current2, _titleRef$current$cli, _titleRef$current, _titleRef$current2, _titleRef$current3;
 	  let {
@@ -28451,12 +28895,17 @@
 	  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,
@@ -28464,9 +28913,9 @@
 	    selections
 	  } = _ref;
 	  return {
-	    show: showToolbar && !isPopover,
+	    show: showToolbar && !isDetached,
 	    popover: {
-	      show: showToolbar && isPopover,
+	      show: showToolbar && isDetached,
 	      anchorEl: containerRef.current
 	    },
 	    more: {
@@ -28489,6 +28938,13 @@
 	  };
 	}
 
+	const StyledDiv = styled$1('div')(() => ({
+	  display: 'flex',
+	  width: '100%',
+	  height: '100%',
+	  alignItems: 'center',
+	  justifyContent: 'center'
+	}));
 	function ListBoxError(_ref) {
 	  let {
 	    text
@@ -28496,13 +28952,6 @@
 	  const {
 	    translator
 	  } = reactExports.useContext(InstanceContext);
-	  const StyledDiv = styled$1('div')(() => ({
-	    display: 'flex',
-	    width: '100%',
-	    height: '100%',
-	    alignItems: 'center',
-	    justifyContent: 'center'
-	  }));
 	  return /*#__PURE__*/React.createElement(StyledDiv, null, translator.get(text));
 	}
 
@@ -28537,7 +28986,7 @@
 	    ["& .".concat(classes$4.listboxWrapper)]: {
 	      padding: containerPadding
 	    },
-	    '&:focus:not(:hover)': {
+	    '&:focus': {
 	      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
 	    },
 	    '&:focus-visible': {
@@ -28557,12 +29006,20 @@
 	    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,
@@ -28581,7 +29038,8 @@
 	    showGray = true,
 	    scrollState = undefined,
 	    renderedCallback,
-	    toolbar = true
+	    toolbar = true,
+	    isPopover = false
 	  } = options;
 
 	  // Hook that will trigger update when used in useEffects.
@@ -28610,8 +29068,7 @@
 	  const [searchContainer, searchContainerRef] = useRefWithCallback();
 	  const [showToolbar, setShowToolbar] = reactExports.useState(false);
 	  const [showSearch, setShowSearch] = reactExports.useState(false);
-	  const [keyboardActive, setKeyboardActive] = reactExports.useState(false);
-	  const [hovering, setHovering] = reactExports.useState(false);
+	  const hovering = reactExports.useRef(false);
 	  const [keyScroll, setKeyScroll] = reactExports.useState({
 	    down: 0,
 	    up: 0,
@@ -28625,32 +29082,40 @@
 	  const [appSelections] = useAppSelections(app);
 	  const titleRef = reactExports.useRef(null);
 	  const [selectionState$1] = reactExports.useState(() => selectionState());
+	  const keyboard = useTempKeyboard({
+	    containerRef,
+	    enabled: keyboardNavigation
+	  });
+	  const isModalMode = reactExports.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
+	  } = reactExports.useMemo(() => 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;
+	  reactExports.useEffect(() => {
+	    document.addEventListener('keydown', globalKeyDown);
+	    return () => {
+	      document.removeEventListener('keydown', globalKeyDown);
+	    };
+	  }, [globalKeyDown]);
 	  reactExports.useEffect(() => {
 	    const show = () => {
 	      setShowToolbar(true);
@@ -28661,6 +29126,14 @@
 	        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);
@@ -28674,7 +29147,7 @@
 	        selections.removeListener('deactivated', hide);
 	      }
 	    };
-	  }, [selections]);
+	  }, [selections, isPopover]);
 	  reactExports.useEffect(() => {
 	    if (!searchContainer || !searchContainer.current) {
 	      return;
@@ -28722,8 +29195,8 @@
 	      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,
@@ -28737,6 +29210,14 @@
 	  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';
@@ -28785,7 +29266,7 @@
 	  }, getActionToolbarProps(true))), /*#__PURE__*/React.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,
@@ -28841,6 +29322,9 @@
 	    className: classes$4.listBoxHeader
 	  }, /*#__PURE__*/React.createElement(Title, {
 	    variant: "h6",
+	    sx: {
+	      width: isPopover && reasonDetached === 'noSpace' ? '60px' : undefined
+	    },
 	    noWrap: true,
 	    ref: titleRef,
 	    title: layout.title
@@ -28851,11 +29335,7 @@
 	    item: true
 	  }, /*#__PURE__*/React.createElement(ActionsToolbar, _extends$8({
 	    direction: direction
-	  }, getActionToolbarProps(showToolbarDetached({
-	    containerRef,
-	    titleRef,
-	    iconsWidth
-	  })))))), /*#__PURE__*/React.createElement(Grid$1, {
+	  }, getActionToolbarProps(isDetached))))), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
 	    direction: "column",
@@ -28891,11 +29371,11 @@
 	    className: classes$4.screenReaderOnly
 	  }, translator.get('Listbox.ScreenReaderInstructions')), isInvalid ? /*#__PURE__*/React.createElement(ListBoxError, {
 	    text: errorText
-	  }) : /*#__PURE__*/React.createElement(AutoSizer, null, _ref4 => {
+	  }) : /*#__PURE__*/React.createElement(AutoSizer, null, _ref5 => {
 	    let {
 	      height,
 	      width
-	    } = _ref4;
+	    } = _ref5;
 	    return /*#__PURE__*/React.createElement(ListBox, {
 	      model: model,
 	      app: app,
@@ -28930,15 +29410,16 @@
 	        set: setCurrentScrollIndex
 	      },
 	      renderedCallback: renderedCallback,
-	      onCtrlF: onCtrlF
+	      onCtrlF: onCtrlF,
+	      isModal: isModalMode
 	    });
 	  })))));
 	}
 	const ListBoxInlineMemoed = React.memo(ListBoxInline);
-	function IsolateUseLayoutWrapper(_ref5) {
+	function IsolateUseLayoutWrapper(_ref6) {
 	  let {
 	    options = {}
-	  } = _ref5;
+	  } = _ref6;
 	  const {
 	    model
 	  } = options;
@@ -34035,7 +34516,7 @@
 	 * 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';