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

package/core/package.json

@@ -1,7 +1,7 @@
 {
   "module": "esm/index.js",
   "peerDependencies": {
-    "@mui/material": "^5.11.11",
+    "@mui/material": "^5.11.15",
     "@mui/icons-material": "^5.11.11",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.0.0-alpha.7
+* @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 = "a704" ;
+	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.7" );
+	  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 {
@@ -22000,15 +22095,14 @@
 	    enabled
 	  } = _ref;
 	  const [keyboardActive, setKeyboardActive] = reactExports.useState(false);
-	  const innerTabStops = !enabled || keyboardActive;
 	  const keyboard = {
 	    enabled,
 	    active: keyboardActive,
-	    innerTabStops,
-	    // does keyboard permit inner tab stops
-	    outerTabStops: !innerTabStops,
-	    // does keyboard permit outer tab stops
-	    blur: resetFocus => {
+	    // innerTabStops: whether keyboard permits inner tab stops
+	    // (inner = everything inside .listbox-container)
+
+	    innerTabStops: !enabled || keyboardActive,
+	    blur(resetFocus) {
 	      var _containerRef$current;
 	      if (!enabled) {
 	        return;
@@ -22023,7 +22117,7 @@
 	        vizCell.focus();
 	      }
 	    },
-	    focus: () => {
+	    focus() {
 	      if (!enabled) {
 	        return;
 	      }
@@ -22036,7 +22130,7 @@
 	      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.setAttribute('tabIndex', 0);
 	      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
 	    },
-	    focusSelection: () => {
+	    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();
@@ -22045,6 +22139,7 @@
 	  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');
@@ -22205,7 +22300,6 @@
 	  let {
 	    keyboard,
 	    hovering,
-	    setHovering,
 	    updateKeyScroll,
 	    containerRef,
 	    currentScrollIndex,
@@ -22240,77 +22334,40 @@
 	      c === null || c === void 0 ? void 0 : c.focus();
 	    }
 	  };
-	  const updateKeyScrollOnHover = newState => {
-	    if (hovering) {
-	      updateKeyScroll(newState);
-	    }
-	  };
 	  const handleKeyDown = event => {
 	    const {
 	      keyCode,
-	      ctrlKey = false,
 	      shiftKey = false
 	    } = event.nativeEvent;
 	    const prevent = () => {
 	      event.stopPropagation();
 	      event.preventDefault();
 	    };
-	    switch (keyCode) {
-	      case KEYS.PAGE_UP:
-	        updateKeyScrollOnHover({
-	          up: currentScrollIndex.stop - currentScrollIndex.start
-	        });
-	        prevent();
-	        break;
-	      case KEYS.PAGE_DOWN:
-	        updateKeyScrollOnHover({
-	          down: currentScrollIndex.stop - currentScrollIndex.start
-	        });
-	        prevent();
-	        break;
-	      case KEYS.HOME:
-	        updateKeyScrollOnHover({
-	          scrollPosition: ctrlKey && shiftKey ? 'overflowStart' : 'start'
-	        });
-	        prevent();
-	        break;
-	      case KEYS.END:
-	        updateKeyScrollOnHover({
-	          scrollPosition: ctrlKey && shiftKey ? 'overflowEnd' : 'end'
-	        });
-	        prevent();
-	        break;
-	      case KEYS.ARROW_UP:
-	        updateKeyScrollOnHover({
-	          up: 1
-	        });
-	        prevent();
-	        break;
-	      case KEYS.ARROW_DOWN:
-	        updateKeyScrollOnHover({
-	          down: 1
-	        });
-	        prevent();
-	        break;
-	    }
 	    if (!keyboard.enabled) {
 	      // Other keys should not be handled unless keyboard is enabled.
-	      return undefined;
+	      return;
 	    }
 	    const container = event.currentTarget.closest('.listbox-container');
+	    const inSelection = isModal();
 	    switch (keyCode) {
 	      case KEYS.TAB:
-	        if (shiftKey) {
-	          focusRow(container) || focusSearch(container);
+	        if (inSelection) {
+	          if (shiftKey) {
+	            focusRow(container) || focusSearch(container);
+	          } else {
+	            focusSearch(container) || focusRow(container);
+	          }
+	        } else if (shiftKey) {
+	          keyboard.blur(true);
 	        } else {
-	          focusSearch(container) || focusRow(container);
+	          break;
 	        }
 	        prevent();
 	        break;
 	      case KEYS.ENTER:
 	      case KEYS.SPACE:
 	        if (!event.target.classList.contains('listbox-container')) {
-	          return undefined; // don't mess with keydown handlers within the listbox (e.g. row seletion)
+	          break; // don't mess with keydown handlers within the listbox (e.g. row seletion)
 	        }
 
 	        keyboard.focus();
@@ -22318,13 +22375,53 @@
 	        break;
 	      case KEYS.ESCAPE:
 	        blur(event);
-	        prevent();
 	        break;
-	      case KEYS.ARROW_LEFT:
-	      case KEYS.ARROW_RIGHT:
-	        return undefined;
 	    }
-	    return undefined;
+	  };
+	  const globalKeyDown = event => {
+	    if (!hovering.current) {
+	      return;
+	    }
+	    const {
+	      keyCode,
+	      ctrlKey = false,
+	      shiftKey = false
+	    } = event;
+	    switch (keyCode) {
+	      case KEYS.ARROW_UP:
+	        updateKeyScroll({
+	          up: 1
+	        });
+	        break;
+	      case KEYS.ARROW_DOWN:
+	        updateKeyScroll({
+	          down: 1
+	        });
+	        break;
+	      case KEYS.PAGE_UP:
+	        updateKeyScroll({
+	          up: currentScrollIndex.stop - currentScrollIndex.start
+	        });
+	        break;
+	      case KEYS.PAGE_DOWN:
+	        updateKeyScroll({
+	          down: currentScrollIndex.stop - currentScrollIndex.start
+	        });
+	        break;
+	      case KEYS.HOME:
+	        updateKeyScroll({
+	          scrollPosition: ctrlKey && shiftKey ? 'overflowStart' : 'start'
+	        });
+	        break;
+	      case KEYS.END:
+	        updateKeyScroll({
+	          scrollPosition: ctrlKey && shiftKey ? 'overflowEnd' : 'end'
+	        });
+	        break;
+	      default:
+	        return;
+	    }
+	    event.preventDefault();
 	  };
 	  const focusOnHoverDisabled = () => {
 	    const selectNotAllowed = (constraints === null || constraints === void 0 ? void 0 : constraints.select) || (constraints === null || constraints === void 0 ? void 0 : constraints.active);
@@ -22333,50 +22430,22 @@
 	  };
 	  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 => {
@@ -23193,6 +23262,8 @@
 	    onMouseDown,
 	    onMouseUp,
 	    onMouseEnter,
+	    onTouchStart,
+	    onTouchEnd,
 	    pages,
 	    isLocked,
 	    column = false,
@@ -23374,6 +23445,8 @@
 	    onMouseUp: onMouseUp,
 	    onMouseEnter: onMouseEnter,
 	    onKeyDown: handleKeyDownCallback,
+	    onTouchStart: onTouchStart,
+	    onTouchEnd: onTouchEnd,
 	    onContextMenu: preventContextMenu,
 	    tabIndex: isFirstElement && keyboard.innerTabStops ? 0 : -1,
 	    "data-n": cell === null || cell === void 0 ? void 0 : cell.qElemNumber
@@ -25865,7 +25938,8 @@
 	    selectionState,
 	    selections,
 	    checkboxes,
-	    doc: document
+	    doc: document,
+	    loaderRef
 	  });
 	  const {
 	    layoutOptions = {}
@@ -28807,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 {
@@ -28820,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,
@@ -28833,9 +28913,9 @@
 	    selections
 	  } = _ref;
 	  return {
-	    show: showToolbar && !isPopover,
+	    show: showToolbar && !isDetached,
 	    popover: {
-	      show: showToolbar && isPopover,
+	      show: showToolbar && isDetached,
 	      anchorEl: containerRef.current
 	    },
 	    more: {
@@ -28906,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': {
@@ -28958,7 +29038,8 @@
 	    showGray = true,
 	    scrollState = undefined,
 	    renderedCallback,
-	    toolbar = true
+	    toolbar = true,
+	    isPopover = false
 	  } = options;
 
 	  // Hook that will trigger update when used in useEffects.
@@ -28987,7 +29068,7 @@
 	  const [searchContainer, searchContainerRef] = useRefWithCallback();
 	  const [showToolbar, setShowToolbar] = reactExports.useState(false);
 	  const [showSearch, setShowSearch] = reactExports.useState(false);
-	  const [hovering, setHovering] = reactExports.useState(false);
+	  const hovering = reactExports.useRef(false);
 	  const [keyScroll, setKeyScroll] = reactExports.useState({
 	    down: 0,
 	    up: 0,
@@ -29014,11 +29095,11 @@
 	  const {
 	    handleKeyDown,
 	    handleOnMouseEnter,
-	    handleOnMouseLeave
-	  } = getListboxInlineKeyboardNavigation({
+	    handleOnMouseLeave,
+	    globalKeyDown
+	  } = reactExports.useMemo(() => getListboxInlineKeyboardNavigation({
 	    keyboard,
 	    hovering,
-	    setHovering,
 	    updateKeyScroll,
 	    containerRef,
 	    currentScrollIndex,
@@ -29026,9 +29107,15 @@
 	    appSelections,
 	    constraints,
 	    isModal: isModalMode
-	  });
-	  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;
+	  }), [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);
@@ -29039,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);
@@ -29052,7 +29147,7 @@
 	        selections.removeListener('deactivated', hide);
 	      }
 	    };
-	  }, [selections]);
+	  }, [selections, isPopover]);
 	  reactExports.useEffect(() => {
 	    if (!searchContainer || !searchContainer.current) {
 	      return;
@@ -29100,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,
@@ -29115,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';
@@ -29163,7 +29266,7 @@
 	  }, getActionToolbarProps(true))), /*#__PURE__*/React.createElement(StyledGrid$3, {
 	    className: "listbox-container",
 	    container: true,
-	    tabIndex: keyboard.outerTabStops ? 0 : -1,
+	    tabIndex: keyboard.enabled ? -1 : undefined,
 	    direction: "column",
 	    gap: 0,
 	    containerPadding: containerPadding,
@@ -29219,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
@@ -29229,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",