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

package/core/esm/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.
 */
@@ -8064,7 +8064,7 @@ function create$3(definition) {
   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', ''));
 });
@@ -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.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);
@@ -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 {
@@ -9369,15 +9464,14 @@ function useTempKeyboard(_ref) {
     enabled
   } = _ref;
   const [keyboardActive, setKeyboardActive] = useState$1(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;
@@ -9392,7 +9486,7 @@ function useTempKeyboard(_ref) {
         vizCell.focus();
       }
     },
-    focus: () => {
+    focus() {
       if (!enabled) {
         return;
       }
@@ -9405,7 +9499,7 @@ function useTempKeyboard(_ref) {
       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();
@@ -9414,6 +9508,7 @@ function useTempKeyboard(_ref) {
   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');
@@ -9574,7 +9669,6 @@ function getListboxInlineKeyboardNavigation(_ref2) {
   let {
     keyboard,
     hovering,
-    setHovering,
     updateKeyScroll,
     containerRef,
     currentScrollIndex,
@@ -9609,77 +9703,40 @@ function getListboxInlineKeyboardNavigation(_ref2) {
       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();
@@ -9687,13 +9744,53 @@ function getListboxInlineKeyboardNavigation(_ref2) {
         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);
@@ -9702,50 +9799,22 @@ function getListboxInlineKeyboardNavigation(_ref2) {
   };
   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 => {
@@ -10562,6 +10631,8 @@ function RowColumn(_ref) {
     onMouseDown,
     onMouseUp,
     onMouseEnter,
+    onTouchStart,
+    onTouchEnd,
     pages,
     isLocked,
     column = false,
@@ -10743,6 +10814,8 @@ function RowColumn(_ref) {
     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
@@ -13380,7 +13453,8 @@ function ListBox(_ref) {
     selectionState,
     selections,
     checkboxes,
-    doc: document
+    doc: document,
+    loaderRef
   });
   const {
     layoutOptions = {}
@@ -16322,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 {
@@ -16335,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,
@@ -16348,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: {
@@ -16421,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': {
@@ -16473,7 +16553,8 @@ function ListBoxInline(_ref4) {
     showGray = true,
     scrollState = undefined,
     renderedCallback,
-    toolbar = true
+    toolbar = true,
+    isPopover = false
   } = options;
 
   // Hook that will trigger update when used in useEffects.
@@ -16502,7 +16583,7 @@ function ListBoxInline(_ref4) {
   const [searchContainer, searchContainerRef] = useRefWithCallback();
   const [showToolbar, setShowToolbar] = useState$1(false);
   const [showSearch, setShowSearch] = useState$1(false);
-  const [hovering, setHovering] = useState$1(false);
+  const hovering = useRef(false);
   const [keyScroll, setKeyScroll] = useState$1({
     down: 0,
     up: 0,
@@ -16529,11 +16610,11 @@ function ListBoxInline(_ref4) {
   const {
     handleKeyDown,
     handleOnMouseEnter,
-    handleOnMouseLeave
-  } = getListboxInlineKeyboardNavigation({
+    handleOnMouseLeave,
+    globalKeyDown
+  } = useMemo$1(() => getListboxInlineKeyboardNavigation({
     keyboard,
     hovering,
-    setHovering,
     updateKeyScroll,
     containerRef,
     currentScrollIndex,
@@ -16541,9 +16622,15 @@ function ListBoxInline(_ref4) {
     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;
+  useEffect$1(() => {
+    document.addEventListener('keydown', globalKeyDown);
+    return () => {
+      document.removeEventListener('keydown', globalKeyDown);
+    };
+  }, [globalKeyDown]);
   useEffect$1(() => {
     const show = () => {
       setShowToolbar(true);
@@ -16554,6 +16641,14 @@ function ListBoxInline(_ref4) {
         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);
@@ -16567,7 +16662,7 @@ function ListBoxInline(_ref4) {
         selections.removeListener('deactivated', hide);
       }
     };
-  }, [selections]);
+  }, [selections, isPopover]);
   useEffect$1(() => {
     if (!searchContainer || !searchContainer.current) {
       return;
@@ -16615,8 +16710,8 @@ function ListBoxInline(_ref4) {
       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,
@@ -16630,6 +16725,14 @@ function ListBoxInline(_ref4) {
   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';
@@ -16678,7 +16781,7 @@ function ListBoxInline(_ref4) {
   }, getActionToolbarProps(true))), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
     container: true,
-    tabIndex: keyboard.outerTabStops ? 0 : -1,
+    tabIndex: keyboard.enabled ? -1 : undefined,
     direction: "column",
     gap: 0,
     containerPadding: containerPadding,
@@ -16734,6 +16837,9 @@ function ListBoxInline(_ref4) {
     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
@@ -16744,11 +16850,7 @@ function ListBoxInline(_ref4) {
     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",