@nebula.js/stardust 3.3.0 → 4.0.0-alpha.1

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.3.0
+* @nebula.js/stardust v4.0.0-alpha.1
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -1613,6 +1613,12 @@ var Visualization_UnfulfilledCalculationCondition = {
 		"zh-TW": "不符計算條件"
 	}
 };
+var Listbox_DrillDown = {
+	id: "Listbox.DrillDown",
+	locale: {
+		"en-US": "Drill-down dimension"
+	}
+};
 var all = {
 	Cancel: Cancel$1,
 	CurrentSelections_All: CurrentSelections_All,
@@ -1649,7 +1655,8 @@ var all = {
 	Visualization_Invalid_Dimension: Visualization_Invalid_Dimension,
 	Visualization_Invalid_Measure: Visualization_Invalid_Measure,
 	Visualization_LayoutError: Visualization_LayoutError,
-	Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition
+	Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition,
+	Listbox_DrillDown: Listbox_DrillDown
 };
 
 function appLocaleFn(language) {
@@ -3438,6 +3445,14 @@ function deviceTypeFn(deviceType) {
   return detectTouchscreen() ? 'touch' : 'desktop';
 }
 
+var client = {};
+
+var m = ReactDOM;
+{
+  client.createRoot = m.createRoot;
+  client.hydrateRoot = m.hydrateRoot;
+}
+
 function _extends$5() {
   _extends$5 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -7741,7 +7756,7 @@ const light = {
       disabled: 'rgba(0, 0, 0, 0.3)'
     },
     action: {
-      active: colors.grey25,
+      active: '#545454',
       // color for actionable things like icon buttons
       hover: 'rgba(0, 0, 0, 0.03)',
       // color for hoverable things like list items
@@ -7881,10 +7896,21 @@ const overrides = theme => ({
       padding: 7,
       borderRadius: 2,
       border: '1px solid transparent',
-      // should ideally use $focusVisible, but that messes up focus in all other places where Iconbutton is used (Checkbox, Switch etc)
-      '&:focus': {
+      '&:hover': {
+        backgroundColor: theme.palette.btn.hover
+      },
+      '&:focus-visible': {
         borderColor: theme.palette.custom.focusBorder,
         boxShadow: "0 0 0 2px ".concat(theme.palette.custom.focusOutline)
+      },
+      '&:active': {
+        borderColor: 'transparent',
+        boxShadow: 'none',
+        backgroundColor: theme.palette.btn.active
+      },
+      '&:not(:active):not(:focus-visible)': {
+        borderColor: 'transparent',
+        boxShadow: 'none'
       }
     }
   },
@@ -7972,7 +7998,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "593e" ;
+const NEBULA_VERSION_HASH = "f871" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8134,7 +8160,8 @@ function useAppSelections(app) {
 const NebulaApp = forwardRef((_ref, ref) => {
   let {
     initialContext,
-    app
+    app,
+    renderCallback
   } = _ref;
   const [appSelections] = useAppSelections(app);
   const [context, setContext] = useState$1(initialContext);
@@ -8145,21 +8172,20 @@ const NebulaApp = forwardRef((_ref, ref) => {
     theme: create$3(muiThemeName)
   }), [muiThemeName]);
   const [components, setComponents] = useState$1([]);
+
+  // Will be called directly after the first render pass
+  // See: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
+  useEffect$1(() => {
+    renderCallback && renderCallback();
+  }, []);
   useImperativeHandle$1(ref, () => ({
-    addComponent(component) {
-      setComponents([...components, component]);
-    },
-    removeComponent(component) {
-      const ix = components.indexOf(component);
-      if (ix !== -1) {
-        components.splice(ix, 1);
-        setComponents([...components]);
-      }
+    setComps(comps) {
+      setComponents([...comps]);
     },
     setMuiThemeName,
     setContext: ctx => setContext(oldContext => JSON.stringify(oldContext) !== JSON.stringify(ctx) ? ctx : oldContext),
     getAppSelections: () => appSelections
-  }));
+  }), []);
   return /*#__PURE__*/React__default.createElement(StyledEngineProvider, {
     injectFirst: true
   }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
@@ -8180,15 +8206,18 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "3.3.0" );
+  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.1" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
-  ReactDOM.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
+  const root = client.createRoot(element);
+  root.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
     ref: appRef,
     app: app,
-    initialContext: context
-  }), element, resolveRender);
+    initialContext: context,
+    renderCallback: resolveRender
+  }));
   const cells = {};
+  const components = [];
   return [{
     toggleFocusOfCells(cellIdToFocus) {
       Object.keys(cells).forEach(i => {
@@ -8205,13 +8234,18 @@ function boot(_ref2) {
     add(component) {
       (async () => {
         await rendered;
-        appRef.current.addComponent(component);
+        components.push(component);
+        appRef.current.setComps(components);
       })();
     },
     remove(component) {
       (async () => {
         await rendered;
-        appRef.current.removeComponent(component);
+        const ix = components.indexOf(component);
+        if (ix !== -1) {
+          components.splice(ix, 1);
+        }
+        appRef.current.setComps(components);
       })();
     },
     setMuiThemeName(themeName) {
@@ -8864,9 +8898,6 @@ const flatten = arr => arr.reduce((prev, cur) => prev.concat(cur));
 function isStateSelected(qState) {
   return SELECTED_STATES.includes(qState);
 }
-function getUniques(arr) {
-  return Array.isArray(arr) ? Array.from(new Set(arr)) : undefined;
-}
 function getSelectedValues(pages) {
   if (!pages || !pages.length) {
     return [];
@@ -8880,45 +8911,38 @@ function getSelectedValues(pages) {
   });
   return flatten(elementNbrs);
 }
-function applySelectionsOnPages(pages, elmNumbers) {
-  let clearAllButElmNumbers = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  const getNewSelectionState = qState => elmNumbers.length <= 1 && isStateSelected(qState) ? 'A' : 'S';
-  const matrices = pages.map(page => {
-    const qMatrix = page.qMatrix.map(p => {
-      const [p0] = p;
-      const selectionMatchesElement = elmNumbers.includes(p0.qElemNumber);
-      let qState;
-      if (clearAllButElmNumbers) {
-        qState = selectionMatchesElement ? 'S' : 'A';
-      } else {
-        qState = selectionMatchesElement ? getNewSelectionState(p0.qState) : p0.qState;
-      }
-      return [_objectSpread2(_objectSpread2({}, p0), {}, {
-        qState
-      }), p.slice(1)];
-    });
-    return _objectSpread2(_objectSpread2({}, page), {}, {
-      qMatrix
-    });
-  });
-  return matrices;
-}
 async function selectValues(_ref) {
   let {
     selections,
     elemNumbers,
-    isSingleSelect = false
+    toggle,
+    isSingleSelect
   } = _ref;
-  let resolved = Promise.resolve(false);
+  if (elemNumbers.length === 0) {
+    return false;
+  }
   const hasNanValues = elemNumbers.some(elemNumber => Number.isNaN(elemNumber));
+  let success = false;
   if (!hasNanValues) {
     const elemNumbersToSelect = elemNumbers;
-    resolved = selections.select({
-      method: 'selectListObjectValues',
-      params: ['/qListObjectDef', elemNumbersToSelect, !isSingleSelect]
-    }).then(success => success !== false).catch(() => false);
+    try {
+      const response = await selections.select({
+        method: 'selectListObjectValues',
+        params: ['/qListObjectDef', elemNumbersToSelect, toggle]
+      });
+      success = response !== false;
+    } catch (_unused) {
+      success = false;
+    }
+    if (!success) {
+      if (isSingleSelect) {
+        selections.cancel(); // revert selection
+      } else {
+        selections.clear();
+      }
+    }
   }
-  return resolved;
+  return success;
 }
 function getElemNumbersFromPages(pages) {
   if (!pages || !pages.length) {
@@ -8981,126 +9005,132 @@ function fillRange(elementNbrs, elemNumbersOrdered) {
   return elemNumbersOrdered.slice(min, max + 1);
 }
 
+const getKeyAsToggleSelected = event => !(event.metaKey || event.ctrlKey);
 function useSelectionsInteractions(_ref) {
   let {
-    layout,
+    selectionState,
     selections,
-    pages = [],
     checkboxes = false,
-    selectDisabled,
-    doc = document,
-    isSingleSelect: singleSelect = false
+    doc = document
   } = _ref;
-  const [instantPages, setInstantPages] = useState$1(pages);
-  const [mouseDown, setMouseDown] = useState$1(false);
-  const [selectingValues, setSelectingValues] = useState$1(false);
-  const [isSingleSelect, setIsSingleSelect] = useState$1(singleSelect);
-  const [selected, setSelected] = useState$1([]);
-  const [isRangeSelection, setIsRangeSelection] = useState$1(false);
-  const [preSelected, setPreSelected] = useState$1([]);
-  const elemNumbersOrdered = getElemNumbersFromPages(pages);
-  useEffect$1(() => {
-    setIsSingleSelect(singleSelect);
-  }, [singleSelect]);
+  const currentSelect = useRef({
+    startElemNumber: undefined,
+    elemNumbers: [],
+    isRange: false,
+    toggle: false,
+    active: false
+  });
 
-  // Select values for real, by calling the backend.
-  const select = async function () {
-    let elemNumbers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    if (selectDisabled()) {
-      return;
-    }
-    setSelectingValues(true);
-    const filtered = additive ? elemNumbers.filter(n => !selected.includes(n)) : elemNumbers;
-    await selectValues({
+  // eslint-disable-next-line arrow-body-style
+  const doSelect = () => {
+    selectionState.setSelectableValuesUpdating();
+    return selectValues({
       selections,
-      elemNumbers: filtered,
-      isSingleSelect
+      elemNumbers: currentSelect.current.elemNumbers,
+      isSingleSelect: selectionState.isSingleSelect,
+      toggle: currentSelect.current.toggle
     });
-    setSelectingValues(false);
-    setPreSelected([]);
   };
-
-  // Show estimated selection states instantly before applying the selections for real.
-  const preSelect = function (elemNumbers) {
-    let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    if (selectDisabled()) {
+  const addToRange = elemNumber => {
+    const {
+      startElemNumber
+    } = currentSelect.current;
+    if (startElemNumber === elemNumber) {
       return;
     }
-    setPreSelected(existing => {
-      const uniques = getUniques([...existing, ...elemNumbers]);
-      const filtered = additive ? uniques.filter(n => !selected.includes(n)) : uniques;
-      const filled = additive ? fillRange(uniques, elemNumbersOrdered) : filtered;
-      return filled;
-    });
+    const rangeEnds = [currentSelect.current.startElemNumber, elemNumber];
+    const elemNumbersOrdered = getElemNumbersFromPages(selectionState.enginePages);
+    const toMaybeAdd = fillRange(rangeEnds, elemNumbersOrdered);
+    selectionState.updateItems(toMaybeAdd, true, currentSelect.current.elemNumbers);
   };
   const selectManually = function () {
     let elementIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    setIsRangeSelection(false); // range is not supported for manual select
-    setMouseDown(true);
-    preSelect(elementIds, additive || isRangeSelection);
-    const p = select(elementIds, additive || isRangeSelection);
-    setMouseDown(false);
-    return p;
+    const elemNumbers = [];
+    selectionState.updateItems(elementIds, additive, elemNumbers);
+    selectionState.setSelectableValuesUpdating();
+    return selectValues({
+      selections,
+      elemNumbers: additive ? elemNumbers : elementIds,
+      isSingleSelect: selectionState.isSingleSelect,
+      toggle: !selectionState.isSingleSelect
+    });
   };
-  const handleSingleSelectKey = event => {
+  const handleSingleSelectKey = (event, target) => {
     if (event.ctrlKey || event.metaKey) {
-      setIsSingleSelect(true);
-      event.currentTarget.focus(); // will not be focused otherwise
+      target.focus(); // will not be focused otherwise
       event.preventDefault();
     }
   };
-  const onClick = useCallback(event => {
-    if (selectingValues || selectDisabled()) {
+  const onChange = useCallback(event => {
+    if (selectionState.selectDisabled()) {
       return;
     }
-    const elemNumber = +event.currentTarget.getAttribute('data-n');
-    setPreSelected([elemNumber]);
-    handleSingleSelectKey(event);
-  }, [selectingValues, selectDisabled]);
+    const elemNumber = +event.target.getAttribute('data-n');
+    const toggle = !selectionState.isSingleSelect && getKeyAsToggleSelected(event.nativeEvent);
+    currentSelect.current.elemNumbers = [elemNumber];
+    currentSelect.current.toggle = toggle;
+    if (!toggle) {
+      selectionState.clearItemStates(true);
+    }
+    selectionState.updateItem(elemNumber);
+    currentSelect.current.active = false;
+    doSelect();
+  }, []);
   const onMouseDown = useCallback(event => {
-    if (selectingValues || selectDisabled()) {
+    if (event.button !== 0 || selectionState.selectDisabled()) {
       return;
     }
-    setIsRangeSelection(false);
-    setMouseDown(true);
     const elemNumber = +event.currentTarget.getAttribute('data-n');
-    setPreSelected([elemNumber]);
-    handleSingleSelectKey(event);
-  }, [selectingValues, selectDisabled]);
+    const toggle = !selectionState.isSingleSelect && getKeyAsToggleSelected(event);
+    currentSelect.current.isRange = false;
+    currentSelect.current.startElemNumber = elemNumber;
+    currentSelect.current.elemNumbers = [elemNumber];
+    currentSelect.current.toggle = toggle;
+    currentSelect.current.active = true;
+    if (!toggle) {
+      selectionState.clearItemStates(true);
+    }
+    selectionState.updateItem(elemNumber);
+    if (selectionState.isSingleSelect) {
+      currentSelect.current.active = false;
+      doSelect();
+    }
+    handleSingleSelectKey(event, event.currentTarget);
+  }, []);
   const onMouseUp = useCallback(event => {
-    const elemNumber = +event.currentTarget.getAttribute('data-n');
-    if (isSingleSelect || !mouseDown || selectingValues || preSelected.length === 1 && preSelected[0] === elemNumber // prevent toggling again on mouseup
-    ) {
+    if (event.button !== 0 || !currentSelect.current.active) {
       return;
     }
-    preSelect([elemNumber]);
-  }, [mouseDown, selectingValues, preSelected, selected, isRangeSelection, selectDisabled]);
-  const onMouseUpDoc = useCallback(() => {
+    currentSelect.current.active = false;
+    if (currentSelect.current.isRange) {
+      const elemNumber = +event.currentTarget.getAttribute('data-n');
+      addToRange(elemNumber);
+    }
+    doSelect();
+  }, []);
+  const onMouseUpDoc = useCallback(event => {
     // Ensure we end interactions when mouseup happens outside the Listbox.
-    setMouseDown(false);
-    setSelectingValues(false);
-    setIsRangeSelection(false);
-    setIsSingleSelect(singleSelect);
-  }, [singleSelect]);
-  const onMouseEnter = useCallback(event => {
-    if (isSingleSelect || !mouseDown || selectingValues || selectDisabled()) {
+    if (event.button !== 0 || !currentSelect.current.active) {
       return;
     }
-    setIsRangeSelection(true);
-    const elemNumber = +event.currentTarget.getAttribute('data-n');
-    preSelect([elemNumber], true);
-  }, [mouseDown, selectingValues, isRangeSelection, preSelected, selected, selectDisabled, layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne]);
-  useEffect$1(() => {
-    // Perform selections of pre-selected values. This can
-    // happen only when interactions have finished (mouseup).
-    const interactionIsFinished = !mouseDown;
-    if (!preSelected || !preSelected.length || selectingValues || !interactionIsFinished || !layout) {
+    currentSelect.current.active = false;
+    doSelect();
+  }, []);
+  const onMouseEnter = useCallback(event => {
+    if (!currentSelect.current.active) {
       return;
     }
-    select(preSelected, isRangeSelection);
-  }, [preSelected, mouseDown, selectDisabled()]);
+    if (!currentSelect.current.isRange) {
+      currentSelect.current.isRange = true;
+      if (!selectionState.isSelected(currentSelect.current.startElemNumber)) {
+        selectionState.updateItem(currentSelect.current.startElemNumber, true);
+        currentSelect.current.elemNumbers = [];
+      }
+    }
+    const elemNumber = +event.currentTarget.getAttribute('data-n');
+    addToRange(elemNumber);
+  }, []);
   useEffect$1(() => {
     doc.addEventListener('mouseup', onMouseUpDoc);
     return () => {
@@ -9108,25 +9138,26 @@ function useSelectionsInteractions(_ref) {
     };
   }, [onMouseUpDoc]);
   useEffect$1(() => {
-    if (selectingValues || mouseDown) {
-      return;
-    }
-    // Keep track of (truely) selected fields so we can prevent toggling them on range select.
-    const alreadySelected = getSelectedValues(pages);
-    setSelected(alreadySelected);
-  }, [pages]);
-  useEffect$1(() => {
-    if (selectingValues || !pages || !checkboxes && !mouseDown) {
-      return;
-    }
-    // Render pre-selections before they have been selected in Engine.
-    const newPages = applySelectionsOnPages(pages, preSelected, isSingleSelect);
-    setInstantPages(newPages);
-  }, [preSelected]);
+    const clearItemStates = () => {
+      selectionState.clearItemStates(false);
+    };
+    const onCleared = () => {
+      selectionState.clearItemStates(true);
+      selectionState.triggerStateChanged();
+    };
+    selections.on('clearItemStates', clearItemStates);
+    selections.on('deactivated', clearItemStates);
+    selections.on('cleared', onCleared);
+    return () => {
+      selections.removeListener('clearItemStates', clearItemStates);
+      selections.removeListener('deactivated', clearItemStates);
+      selections.removeListener('cleared', onCleared);
+    };
+  }, [selections]);
   const interactionEvents = {};
   if (checkboxes) {
     Object.assign(interactionEvents, {
-      onClick
+      onChange
     });
   } else {
     Object.assign(interactionEvents, {
@@ -9136,7 +9167,6 @@ function useSelectionsInteractions(_ref) {
     });
   }
   return {
-    instantPages,
     interactionEvents,
     select: selectManually // preselect and select without having to trigger an event
   };
@@ -9483,6 +9513,34 @@ const excludedOrAlternative = _ref => {
   } = _ref;
   return (isAlternative(cell) || isExcluded(cell)) && checkboxes;
 };
+const getValueStateClasses = _ref2 => {
+  let {
+    column,
+    histogram,
+    checkboxes,
+    cell,
+    showGray
+  } = _ref2;
+  const clazzArr = [column ? rowColClasses.column : rowColClasses.row];
+  if (!histogram) {
+    clazzArr.push(rowColClasses.rowBorderBottom);
+  }
+  if (!cell) {
+    return [];
+  }
+  if (!checkboxes) {
+    if (cell.qState === 'XS') {
+      clazzArr.push(showGray ? rowColClasses.XS : rowColClasses.S);
+    } else if (cell.qState === 'S' || cell.qState === 'L') {
+      clazzArr.push(rowColClasses.S);
+    } else if (showGray && isAlternative(cell)) {
+      clazzArr.push(rowColClasses.A);
+    } else if (showGray && isExcluded(cell)) {
+      clazzArr.push(rowColClasses.X);
+    }
+  }
+  return clazzArr;
+};
 
 const frequencyTextNone = '-';
 const barPadPx = 4;
@@ -9513,6 +9571,11 @@ const getFrequencyText = _ref2 => {
   return '';
 };
 
+const CELL_PADDING_LEFT = 9;
+const ICON_WIDTH = 12;
+const ICON_PADDING = 7;
+const BUTTON_ICON_WIDTH = ICON_WIDTH + (ICON_PADDING + 1) * 2; // 1 is border width
+
 const getSelectedStyle = _ref => {
   let {
     theme
@@ -9532,10 +9595,11 @@ const getSelectedStyle = _ref => {
 const ellipsis = {
   width: '100%',
   overflow: 'hidden',
-  textOverflow: 'ellipsis'
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
 };
 const RowColRoot = styled$1('div', {
-  shouldForwardProp: prop => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense'].includes(prop)
+  shouldForwardProp: prop => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense', 'frequencyWidth'].includes(prop)
 })(_ref2 => {
   var _theme$listBox$conten, _theme$listBox, _theme$listBox$conten2, _theme$listBox$conten3, _theme$listBox2, _theme$listBox2$conte, _theme$listBox3, _theme$listBox3$conte, _theme$listBox4, _theme$listBox4$conte;
   let {
@@ -9543,7 +9607,8 @@ const RowColRoot = styled$1('div', {
     flexBasisProp,
     isGridMode,
     isGridCol,
-    dense
+    dense,
+    frequencyWidth
   } = _ref2;
   return {
     '&:focus': {
@@ -9572,18 +9637,18 @@ const RowColRoot = styled$1('div', {
       minWidth: 0,
       flexGrow: 1,
       // Note that this padding is overridden when using checkboxes.
-      paddingLeft: '9px',
-      paddingRight: '9px'
+      paddingLeft: "".concat(CELL_PADDING_LEFT, "px"),
+      paddingRight: 0
     },
     // The leaf node, containing the label text.
     ["& .".concat(rowColClasses.labelText)]: _objectSpread2(_objectSpread2({
       flexBasis: flexBasisProp,
       lineHeight: '16px',
       userSelect: 'none',
+      paddingRight: '1px'
+    }, ellipsis), {}, {
       whiteSpace: 'pre',
       // to keep white-space on highlight
-      paddingRight: '9px'
-    }, ellipsis), {}, {
       fontSize: (_theme$listBox3 = theme.listBox) === null || _theme$listBox3 === void 0 ? void 0 : (_theme$listBox3$conte = _theme$listBox3.content) === null || _theme$listBox3$conte === void 0 ? void 0 : _theme$listBox3$conte.fontSize,
       fontFamily: (_theme$listBox4 = theme.listBox) === null || _theme$listBox4 === void 0 ? void 0 : (_theme$listBox4$conte = _theme$listBox4.content) === null || _theme$listBox4$conte === void 0 ? void 0 : _theme$listBox4$conte.fontFamily
     }),
@@ -9621,7 +9686,10 @@ const RowColRoot = styled$1('div', {
     // The icons container holding tick and lock, shown inside fields.
     ["& .".concat(rowColClasses.icon)]: {
       display: 'flex',
-      padding: theme.spacing(1, 1, 1, 0)
+      justifyContent: 'center',
+      width: 24,
+      minWidth: 24,
+      maxWidth: 24
     },
     // Selection styles (S=Selected, XS=ExcludedSelected, A=Available, X=Excluded).
     ["& .".concat(rowColClasses.S)]: _objectSpread2(_objectSpread2({}, getSelectedStyle({
@@ -9633,7 +9701,7 @@ const RowColRoot = styled$1('div', {
       theme
     })), {}, {
       background: theme.palette.selected.excluded,
-      color: theme.palette.selected.mainContrastText,
+      color: theme.palette.selected.excludedContrastText,
       border: isGridMode ? 'none' : undefined
     }),
     ["& .".concat(rowColClasses.A)]: {
@@ -9646,10 +9714,13 @@ const RowColRoot = styled$1('div', {
       color: theme.palette.selected.excludedContrastText,
       border: isGridMode ? 'none' : undefined
     },
-    ["& .".concat(rowColClasses.frequencyCount)]: {
-      width: '66px',
+    ["& .".concat(rowColClasses.frequencyCount)]: _objectSpread2(_objectSpread2({
       justifyContent: 'flex-end'
-    },
+    }, ellipsis), {}, {
+      flex: "0 1 ".concat(frequencyWidth, "px"),
+      textAlign: 'right',
+      paddingLeft: '2px'
+    }),
     ["&.".concat(rowColClasses.barContainer)]: {
       height: '100%',
       display: 'flex',
@@ -9684,6 +9755,7 @@ const RowColRoot = styled$1('div', {
     }
   };
 });
+var RowColRoot$1 = React__default.memo(RowColRoot);
 
 const CheckboxChecked = "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")";
 
@@ -9759,19 +9831,23 @@ const getIcon = function (cls) {
 };
 function ListboxCheckbox(_ref2) {
   let {
+    onChange,
     checked,
     label,
     dense,
     excluded,
-    showGray = true
+    showGray = true,
+    dataN
   } = _ref2;
   return /*#__PURE__*/React__default.createElement(StyledCheckbox, {
     edge: "start",
+    onChange: onChange,
     checked: checked,
     disableRipple: true,
     className: [classes$b.checkbox, dense && classes$b.dense].filter(Boolean).join(' '),
     inputProps: {
-      'aria-labelledby': label
+      'aria-labelledby': label,
+      'data-n': dataN
     },
     name: label,
     icon: getIcon(classes$b, showGray, excluded),
@@ -9800,15 +9876,21 @@ const StyledRadio = styled$1(Radio)(_ref => {
 });
 function ListBoxRadioButton(_ref2) {
   let {
+    onChange,
     checked,
     label,
-    dense
+    dense,
+    dataN
   } = _ref2;
   return /*#__PURE__*/React__default.createElement(StyledRadio, {
     checked: checked,
+    onChange: onChange,
     value: label,
     name: label,
     className: classes$a.radioButton,
+    inputProps: {
+      'data-n': dataN
+    },
     style: {
       backgroundColor: 'transparent'
     },
@@ -9839,7 +9921,7 @@ function ValueField(_ref) {
       checkboxes
     }) && rowColClasses.excludedTextWithCheckbox]),
     color: color,
-    justifyContent: valueTextAlign
+    align: valueTextAlign
   }, /*#__PURE__*/React__default.createElement("span", {
     style: {
       whiteSpace: 'pre'
@@ -9875,6 +9957,7 @@ function LabelTag(_ref) {
 
 function CheckboxField(_ref) {
   let {
+    onChange,
     label,
     color,
     qElemNumber,
@@ -9889,17 +9972,21 @@ function CheckboxField(_ref) {
     valueTextAlign
   } = _ref;
   const cb = /*#__PURE__*/React__default.createElement(ListboxCheckbox, {
+    onChange: onChange,
     label: label,
     checked: isSelected,
     dense: dense,
     excluded: isExcluded(cell),
     isGridCol: isGridCol,
-    showGray: showGray
+    showGray: showGray,
+    dataN: qElemNumber
   });
   const rb = /*#__PURE__*/React__default.createElement(ListBoxRadioButton, {
+    onChange: onChange,
     label: label,
     checked: isSelected,
-    dense: dense
+    dense: dense,
+    dataN: qElemNumber
   });
   return /*#__PURE__*/React__default.createElement(FormControlLabel, {
     color: color,
@@ -9926,11 +10013,12 @@ function LabelsWithRanges(_ref) {
     showGray,
     checkboxes
   } = _ref;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, labels.map(_ref2 => {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, labels.map((_ref2, index) => {
     let [label, highlighted] = _ref2;
+    const key = "".concat(index);
     return /*#__PURE__*/React__default.createElement(ValueField, {
       label: label,
-      key: label,
+      key: key,
       highlighted: highlighted,
       dense: dense,
       showGray: showGray,
@@ -9940,6 +10028,7 @@ function LabelsWithRanges(_ref) {
 }
 function FieldWithRanges(_ref3) {
   let {
+    onChange,
     labels,
     checkboxes,
     dense,
@@ -9959,6 +10048,7 @@ function FieldWithRanges(_ref3) {
     checkboxes: checkboxes
   });
   return checkboxes ? /*#__PURE__*/React__default.createElement(CheckboxField, {
+    onChange: onChange,
     label: LWR,
     color: color,
     qElemNumber: qElemNumber,
@@ -9975,6 +10065,7 @@ function FieldWithRanges(_ref3) {
 
 function Field(_ref) {
   let {
+    onChange,
     label,
     color,
     qElemNumber,
@@ -9989,6 +10080,7 @@ function Field(_ref) {
     valueTextAlign
   } = _ref;
   return checkboxes ? /*#__PURE__*/React__default.createElement(CheckboxField, {
+    onChange: onChange,
     label: label,
     color: color,
     qElemNumber: qElemNumber,
@@ -10012,6 +10104,7 @@ function Field(_ref) {
     valueTextAlign: valueTextAlign
   });
 }
+var Field$1 = React__default.memo(Field);
 
 function Histogram(_ref) {
   let {
@@ -10084,12 +10177,16 @@ function getGridItemSizes(_ref) {
     case 'row':
       return {
         height: "calc(100% - ".concat(itemPadding, "px)"),
-        width: "calc(100% - ".concat(2 * itemPadding, "px)")
+        width: "calc(100% - ".concat(2 * itemPadding, "px)"),
+        position: 'absolute',
+        left: 4
       };
     case 'column':
       return {
         height: "calc(100% - ".concat(itemPadding, "px)"),
-        width: "calc(100% - ".concat(2 * itemPadding, "px)")
+        width: "calc(100% - ".concat(2 * itemPadding, "px)"),
+        position: 'absolute',
+        left: 4
       };
     default:
       return {};
@@ -10097,24 +10194,43 @@ function getGridItemSizes(_ref) {
 }
 
 const ItemGrid = styled$1(Grid, {
-  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding'].includes(prop)
+  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'checkboxes'].includes(prop)
 })(_ref => {
   let {
     dataLayout,
     layoutOrder,
-    itemPadding
+    itemPadding,
+    checkboxes
   } = _ref;
   return {
-    ["&.".concat(rowColClasses.fieldRoot)]: getGridItemSizes({
+    ["&.".concat(rowColClasses.fieldRoot)]: _objectSpread2(_objectSpread2({}, getGridItemSizes({
       dataLayout,
       layoutOrder,
       itemPadding
+    })), {}, {
+      paddingRight: checkboxes ? '8px' : undefined
     })
   };
 });
 
+function getCellFromPages(_ref) {
+  let {
+    pages,
+    cellIndex
+  } = _ref;
+  let c;
+  const page = pages.filter(p => p.qArea.qTop <= cellIndex && cellIndex < p.qArea.qTop + p.qArea.qHeight)[0];
+  if (page) {
+    const area = page.qArea;
+    if (cellIndex >= area.qTop && cellIndex < area.qTop + area.qHeight) {
+      [c] = page.qMatrix[cellIndex - area.qTop];
+    }
+  }
+  return c;
+}
+
 function RowColumn(_ref) {
-  var _cell$qText;
+  var _cell$qText, _cell$qHighlightRange, _cell$qHighlightRange2;
   let {
     index,
     rowIndex,
@@ -10123,6 +10239,7 @@ function RowColumn(_ref) {
     data
   } = _ref;
   const {
+    onChange,
     onClick,
     onMouseDown,
     onMouseUp,
@@ -10146,7 +10263,8 @@ function RowColumn(_ref) {
     dataOffset,
     focusListItems,
     listCount,
-    itemPadding
+    itemPadding,
+    frequencyWidth
   } = data;
   const {
     dense = false,
@@ -10198,44 +10316,21 @@ function RowColumn(_ref) {
   const handleKeyDownCallback = useCallback(getFieldKeyboardNavigation(_objectSpread2(_objectSpread2({}, actions), {}, {
     focusListItems
   })), [actions]);
-  const [isSelected, setSelected] = useState$1(false);
-  const [cell, setCell] = useState$1();
-  const [classArr, setClassArr] = useState$1([]);
-  useEffect$1(() => {
-    if (!pages) {
-      return;
-    }
-    let c;
-    const page = pages.filter(p => p.qArea.qTop <= cellIndex && cellIndex < p.qArea.qTop + p.qArea.qHeight)[0];
-    if (page) {
-      const area = page.qArea;
-      if (cellIndex >= area.qTop && cellIndex < area.qTop + area.qHeight) {
-        [c] = page.qMatrix[cellIndex - area.qTop];
-      }
-    }
-    setCell(c);
-  }, [pages]);
-  useEffect$1(() => {
-    if (!cell) {
-      return;
-    }
-    const selected = cell.qState === 'S' || cell.qState === 'XS' || cell.qState === 'L';
-    setSelected(selected);
-    const clazzArr = [column ? rowColClasses.column : rowColClasses.row];
-    if (!(histogram && (dense || checkboxes))) clazzArr.push(rowColClasses.rowBorderBottom);
-    if (!checkboxes) {
-      if (cell.qState === 'XS') {
-        clazzArr.push(showGray ? rowColClasses.XS : rowColClasses.S);
-      } else if (cell.qState === 'S' || cell.qState === 'L') {
-        clazzArr.push(rowColClasses.S);
-      } else if (showGray && isAlternative(cell)) {
-        clazzArr.push(rowColClasses.A);
-      } else if (showGray && isExcluded(cell)) {
-        clazzArr.push(rowColClasses.X);
-      }
-    }
-    setClassArr(clazzArr);
-  }, [cell && cell.qState, histogram, dense, checkboxes]);
+  const cell = useMemo$1(() => getCellFromPages({
+    pages,
+    cellIndex
+  }), [pages, cellIndex]);
+  const isSelected = (cell === null || cell === void 0 ? void 0 : cell.qState) === 'S' || (cell === null || cell === void 0 ? void 0 : cell.qState) === 'XS' || (cell === null || cell === void 0 ? void 0 : cell.qState) === 'L' || (cell === null || cell === void 0 ? void 0 : cell.qState) === 'XL';
+  const classArr = useMemo$1(() => getValueStateClasses({
+    column,
+    histogram,
+    checkboxes,
+    cell,
+    showGray
+  }), [cell === null || cell === void 0 ? void 0 : cell.qState, histogram, dense, checkboxes]);
+  const preventContextMenu = useCallback(event => {
+    event.preventDefault();
+  }, [checkboxes]);
   if (!cell) {
     return null; // prevent rendering empty rows
   }
@@ -10252,19 +10347,16 @@ function RowColumn(_ref) {
   } else {
     valueTextAlign = (textAlign === null || textAlign === void 0 ? void 0 : textAlign.align) || 'left';
   }
-  const preventContextMenu = event => {
-    if (checkboxes) {
-      // Event will not propagate in the checkbox/radiobutton case
-      onClick(event);
-    }
-    event.preventDefault();
-  };
   const isGridCol = dataLayout === 'grid' && layoutOrder === 'column';
   const label = (_cell$qText = cell === null || cell === void 0 ? void 0 : cell.qText) !== null && _cell$qText !== void 0 ? _cell$qText : '';
 
   // Search highlights. Split up labelText span into several and add the highlighted class to matching sub-strings.
-  const ranges = cell && cell.qHighlightRanges && cell.qHighlightRanges.qRanges.sort((a, b) => a.qCharPos - b.qCharPos) || [];
-  const labels = getSegmentsFromRanges(label, ranges);
+
+  let labels;
+  if ((_cell$qHighlightRange = cell.qHighlightRanges) !== null && _cell$qHighlightRange !== void 0 && (_cell$qHighlightRange2 = _cell$qHighlightRange.qRanges) !== null && _cell$qHighlightRange2 !== void 0 && _cell$qHighlightRange2.length) {
+    const ranges = cell.qHighlightRanges.qRanges.sort((a, b) => a.qCharPos - b.qCharPos) || [];
+    labels = getSegmentsFromRanges(label, ranges);
+  }
   const iconStyles = {
     alignItems: 'center',
     display: 'flex',
@@ -10277,22 +10369,24 @@ function RowColumn(_ref) {
     alignItems: 'center',
     minWidth: 0,
     flexGrow: 1,
-    padding: checkboxes ? 0 : undefined,
+    paddingLeft: checkboxes ? 0 : undefined,
     justifyContent: valueTextAlign
   };
   const isFirstElement = index === 0;
   const flexBasisVal = checkboxes ? 'auto' : 'max-content';
-  return /*#__PURE__*/React__default.createElement(RowColRoot, {
+  return /*#__PURE__*/React__default.createElement(RowColRoot$1, {
     className: rowColClasses.barContainer,
     flexBasisProp: flexBasisVal,
     style: styles,
     isGridCol: isGridCol,
     isGridMode: dataLayout === 'grid',
-    dense: dense
+    dense: dense,
+    frequencyWidth: frequencyWidth
   }, /*#__PURE__*/React__default.createElement(ItemGrid, {
     ref: rowRef,
     container: true,
     dataLayout: dataLayout,
+    checkboxes: checkboxes,
     layoutOrder: layoutOrder,
     itemPadding: itemPadding,
     gap: 0,
@@ -10308,7 +10402,7 @@ function RowColumn(_ref) {
     onContextMenu: preventContextMenu,
     role: column ? 'column' : 'row',
     tabIndex: isFirstElement && (!keyboard.enabled || keyboard.active) ? 0 : -1,
-    "data-n": cell && cell.qElemNumber
+    "data-n": cell === null || cell === void 0 ? void 0 : cell.qElemNumber
   }, /*#__PURE__*/React__default.createElement(Histogram, {
     cell: cell,
     histogram: histogram,
@@ -10320,18 +10414,8 @@ function RowColumn(_ref) {
     style: cellStyle,
     className: joinClassNames([rowColClasses.cell, rowColClasses.selectedCell]),
     title: "".concat(label)
-  }, ranges.length === 0 ? /*#__PURE__*/React__default.createElement(Field, {
-    label: label,
-    color: "inherit",
-    qElemNumber: cell.qElemNumber,
-    isSelected: isSelected,
-    dense: dense,
-    cell: cell,
-    isGridCol: isGridCol,
-    showGray: showGray,
-    isSingleSelect: isSingleSelect,
-    checkboxes: checkboxes
-  }) : /*#__PURE__*/React__default.createElement(FieldWithRanges, {
+  }, labels ? /*#__PURE__*/React__default.createElement(FieldWithRanges, {
+    onChange: onChange,
     labels: labels,
     checkboxes: checkboxes,
     dense: dense,
@@ -10344,6 +10428,19 @@ function RowColumn(_ref) {
     isGridCol: isGridCol,
     isSingleSelect: isSingleSelect,
     valueTextAlign: valueTextAlign
+  }) : /*#__PURE__*/React__default.createElement(Field$1, {
+    onChange: onChange,
+    label: label,
+    color: "inherit",
+    qElemNumber: cell.qElemNumber,
+    isSelected: isSelected,
+    dense: dense,
+    cell: cell,
+    isGridCol: isGridCol,
+    showGray: showGray,
+    isSingleSelect: isSingleSelect,
+    checkboxes: checkboxes,
+    valueTextAlign: valueTextAlign
   })), freqIsAllowed && /*#__PURE__*/React__default.createElement(Frequency, {
     cell: cell,
     checkboxes: checkboxes,
@@ -10365,21 +10462,6 @@ function RowColumn(_ref) {
   }))));
 }
 
-const FREQUENCY_MIN_SHOW_WIDTH = 80;
-function getFrequencyAllowed(_ref) {
-  let {
-    width,
-    layout,
-    frequencyMode
-  } = _ref;
-  const widthPermitsFreq = width > FREQUENCY_MIN_SHOW_WIDTH;
-  const {
-    frequencyEnabled = false
-  } = (layout === null || layout === void 0 ? void 0 : layout.qListObject) || {};
-  const hasValidFreqOption = !['none', undefined].includes(frequencyMode);
-  return !!(widthPermitsFreq && (hasValidFreqOption || frequencyEnabled));
-}
-
 function deriveRenderOptions(options) {
   const {
     renderProps,
@@ -11826,8 +11908,9 @@ const classes$9 = {
   styledScrollbars: "".concat(PREFIX$9, "-styledScrollbars")
 };
 function getStyledComponents() {
-  const scrollbarStyling = {
+  const getScrollbarStyling = scrollDisabled => ({
     scrollbarColor: "".concat(scrollBarThumb, " ").concat(scrollBarBackground),
+    overflow: scrollDisabled ? 'hidden !important' : undefined,
     '&::-webkit-scrollbar': {
       width: 10,
       height: 10
@@ -11842,42 +11925,27 @@ function getStyledComponents() {
     '&::-webkit-scrollbar-thumb:hover': {
       backgroundColor: scrollBarThumbHover
     }
-  };
-  const StyledFixedSizeList = styled$3(FixedSizeList)(() => ({
-    ["&.".concat(classes$9.styledScrollbars)]: scrollbarStyling,
-    // TODO: Verify these props and make generic together with grid component.
-    '&::-webkit-scrollbar': {
-      width: 10,
-      height: 10
-    },
-    '&::-webkit-scrollbar-track': {
-      backgroundColor: scrollBarBackground
-    },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: scrollBarThumb,
-      borderRadius: '1rem'
-    },
-    '&::-webkit-scrollbar-thumb:hover': {
-      backgroundColor: scrollBarThumbHover
-    }
-  }));
-  const StyledFixedSizeGrid = styled$3(FixedSizeGrid)(() => ({
-    ["&.".concat(classes$9.styledScrollbars)]: scrollbarStyling,
-    '&::-webkit-scrollbar': {
-      width: 10,
-      height: 10
-    },
-    '&::-webkit-scrollbar-track': {
-      backgroundColor: scrollBarBackground
-    },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: scrollBarThumb,
-      borderRadius: '1rem'
-    },
-    '&::-webkit-scrollbar-thumb:hover': {
-      backgroundColor: scrollBarThumbHover
-    }
-  }));
+  });
+  const StyledFixedSizeList = styled$3(FixedSizeList, {
+    shouldForwardProp: prop => prop !== 'scrollDisabled'
+  })(_ref => {
+    let {
+      scrollDisabled
+    } = _ref;
+    return {
+      ["&.".concat(classes$9.styledScrollbars)]: getScrollbarStyling(scrollDisabled)
+    };
+  });
+  const StyledFixedSizeGrid = styled$3(FixedSizeGrid, {
+    shouldForwardProp: prop => prop !== 'scrollDisabled'
+  })(_ref2 => {
+    let {
+      scrollDisabled
+    } = _ref2;
+    return {
+      ["&.".concat(classes$9.styledScrollbars)]: getScrollbarStyling(scrollDisabled)
+    };
+  });
   return {
     StyledFixedSizeList,
     StyledFixedSizeGrid
@@ -11943,13 +12011,14 @@ function getListBoxComponents(_ref) {
     showGray,
     scrollState,
     direction,
-    listLayout,
     sizes,
     listCount,
     overflowDisclaimer,
     setScrollPosition,
     focusListItems,
-    setCurrentScrollIndex
+    setCurrentScrollIndex,
+    constraints,
+    freqIsAllowed
   } = _ref;
   const {
     layoutOptions = {},
@@ -11960,7 +12029,8 @@ function getListBoxComponents(_ref) {
     listHeight,
     itemSize,
     rowCount,
-    columnCount
+    columnCount,
+    frequencyWidth
   } = sizes || {};
 
   // Options common for List and Grid.
@@ -11980,14 +12050,11 @@ function getListBoxComponents(_ref) {
     checkboxes,
     layoutOptions,
     frequencyMode,
-    freqIsAllowed: getFrequencyAllowed({
-      width,
-      layout,
-      frequencyMode
-    }),
+    freqIsAllowed,
     isSingleSelect,
     textAlign,
     itemPadding,
+    frequencyWidth,
     actions: {
       select,
       confirm: () => selections === null || selections === void 0 ? void 0 : selections.confirm.call(selections),
@@ -12012,10 +12079,10 @@ function getListBoxComponents(_ref) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     , _extends$6({}, commonComponentOptions, {
       dataTestid: "fixed-size-list",
+      scrollDisabled: constraints === null || constraints === void 0 ? void 0 : constraints.active,
       height: listHeight,
       width: width,
       itemCount: listCount,
-      layout: listLayout,
       itemData: _objectSpread2(_objectSpread2({}, commonItemData), {}, {
         listCount
       }),
@@ -12090,6 +12157,7 @@ function getListBoxComponents(_ref) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     , _extends$6({}, commonComponentOptions, {
       dataTestid: "fixed-size-grid",
+      scrollDisabled: constraints === null || constraints === void 0 ? void 0 : constraints.active,
       height: gridHeight,
       width: width,
       columnCount: columnCount,
@@ -12114,6 +12182,9 @@ function getListBoxComponents(_ref) {
 
 const scrollBarWidth = 10; // TODO: ignore this - instead set the styling only show on hover...
 
+const ITEM_MIN_WIDTH = 56;
+const ITEM_MAX_WIDTH = 150;
+const FREQUENCY_WIDTH = 40;
 function getListSizes(_ref) {
   let {
     layout,
@@ -12121,7 +12192,8 @@ function getListSizes(_ref) {
     height,
     listCount,
     count,
-    textWidth
+    textWidth,
+    freqIsAllowed
   } = _ref;
   const {
     layoutOptions = {}
@@ -12133,7 +12205,8 @@ function getListSizes(_ref) {
     dense,
     dataLayout
   } = layoutOptions;
-  const columnAutoWidth = Math.min(150, textWidth + 18);
+  const frequencyAddWidth = freqIsAllowed ? FREQUENCY_WIDTH : 0;
+  const columnAutoWidth = Math.max(Math.min(ITEM_MAX_WIDTH, textWidth + 18 + frequencyAddWidth), ITEM_MIN_WIDTH + frequencyAddWidth);
   let overflowStyling;
   let columnCount;
   let columnWidth;
@@ -12150,18 +12223,21 @@ function getListSizes(_ref) {
   }
   const listHeight = height !== null && height !== void 0 ? height : 8 * itemSize;
   if (layoutOrder) {
+    // Modify container width to achieve the exact design with 8px margins on each side (left and right).
+    let containerWidth = width;
     if (layoutOrder === 'row') {
+      containerWidth += itemPadding * 2;
       overflowStyling = {
         overflowX: 'hidden'
       };
       const maxColumns = (maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.maxColumns) || 3;
       if ((maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.auto) !== false) {
-        columnCount = Math.min(listCount, Math.ceil((width - scrollBarWidth) / columnAutoWidth)); // TODO: smarter sizing... based on glyph count + font size etc...??
+        columnCount = Math.min(listCount, Math.ceil((containerWidth - scrollBarWidth) / columnAutoWidth)); // TODO: smarter sizing... based on glyph count + font size etc...??
       } else {
         columnCount = Math.min(listCount, maxColumns);
       }
       rowCount = Math.ceil(listCount / columnCount);
-      columnWidth = (width - scrollBarWidth) / columnCount;
+      columnWidth = (containerWidth - scrollBarWidth) / columnCount;
     } else {
       overflowStyling = {
         overflowY: 'hidden'
@@ -12173,7 +12249,7 @@ function getListSizes(_ref) {
         rowCount = Math.min(listCount, maxRows);
       }
       columnCount = Math.ceil(listCount / rowCount);
-      columnWidth = Math.max(columnAutoWidth, width / columnCount);
+      columnWidth = Math.max(columnAutoWidth, containerWidth / columnCount);
     }
   }
   columnCount = (dataLayout === 'singleColumn' ? 1 : columnCount) || 1;
@@ -12199,7 +12275,8 @@ function getListSizes(_ref) {
       row: maxRowCount,
       column: maxColumnCount
     },
-    itemPadding
+    itemPadding,
+    frequencyWidth: FREQUENCY_WIDTH
   };
 }
 
@@ -12695,19 +12772,35 @@ function getScrollIndex(_ref) {
   };
 }
 
+const FREQUENCY_MIN_SHOW_WIDTH = 80;
+function getFrequencyAllowed(_ref) {
+  let {
+    itemWidth,
+    layout,
+    frequencyMode
+  } = _ref;
+  const widthPermitsFreq = itemWidth > FREQUENCY_MIN_SHOW_WIDTH;
+  const {
+    frequencyEnabled = false
+  } = (layout === null || layout === void 0 ? void 0 : layout.qListObject) || {};
+  const hasValidFreqOption = !['none', undefined].includes(frequencyMode);
+  return !!(widthPermitsFreq && (hasValidFreqOption || frequencyEnabled));
+}
+
 const _excluded$4 = ["isLoadingData"];
 const DEFAULT_MIN_BATCH_SIZE = 100;
 function ListBox(_ref) {
   var _layout$qListObject$q, _loaderRef$current, _loaderRef$current$_l, _loaderRef$current$_l2;
   let {
     model,
+    constraints,
     layout,
     selections,
+    selectionState,
     direction,
     checkboxes: checkboxOption,
     height,
     width,
-    listLayout = 'vertical',
     frequencyMode,
     update = undefined,
     fetchStart = undefined,
@@ -12752,11 +12845,7 @@ function ListBox(_ref) {
       postProcessPages,
       listData
     }),
-    {
-      isLoadingData
-    } = _useItemsLoader,
     itemsLoader = _objectWithoutProperties(_useItemsLoader, _excluded$4);
-  const [pages, setPages] = useState$1([]);
   const {
     setStoreValue
   } = useDataStore(model);
@@ -12768,9 +12857,16 @@ function ListBox(_ref) {
   const showOverflowDisclaimer = show => setOverflowDisclaimer(state => _objectSpread2(_objectSpread2({}, state), {}, {
     show
   }));
-  useEffect$1(() => {
-    setPages((itemsLoader === null || itemsLoader === void 0 ? void 0 : itemsLoader.pages) || []);
-  }, [itemsLoader === null || itemsLoader === void 0 ? void 0 : itemsLoader.pages]);
+  const [pages, setPages] = useState$1([]);
+  if (itemsLoader !== null && itemsLoader !== void 0 && itemsLoader.pages) {
+    selectionState.update({
+      setPages,
+      pages: itemsLoader === null || itemsLoader === void 0 ? void 0 : itemsLoader.pages,
+      isSingleSelect,
+      selectDisabled,
+      layout
+    });
+  }
   const isItemLoaded = useCallback(index => {
     if (!(pages !== null && pages !== void 0 && pages.length) || !local.current.validPages) {
       return false;
@@ -12781,17 +12877,13 @@ function ListBox(_ref) {
     return page && isLoaded(page);
   }, [layout, pages]);
   const {
-    instantPages = [],
     interactionEvents,
     select
   } = useSelectionsInteractions({
-    layout,
+    selectionState,
     selections,
-    pages,
     checkboxes,
-    selectDisabled,
-    doc: document,
-    isSingleSelect
+    doc: document
   });
   const {
     layoutOptions = {}
@@ -12831,12 +12923,6 @@ function ListBox(_ref) {
     // Hand over the update function for manual refresh from hosting application.
     update.call(null, fetchData);
   }
-  useEffect$1(() => {
-    if (!instantPages || isLoadingData) {
-      return;
-    }
-    setPages(instantPages);
-  }, [instantPages]);
   useEffect$1(() => {
     if (scrollState && !initScrollPosIsSet && loaderRef.current) {
       loaderRef.current._listRef.scrollToItem(scrollState.initScrollPos);
@@ -12851,7 +12937,7 @@ function ListBox(_ref) {
     font: '14px Source sans pro'
   });
   let minimumBatchSize = DEFAULT_MIN_BATCH_SIZE;
-  const isVertical = layoutOptions.dataLayout ? layoutOptions.dataLayout === 'singleColumn' : listLayout !== 'horizontal';
+  const isVertical = layoutOptions.dataLayout !== 'grid';
   const count = layout === null || layout === void 0 ? void 0 : (_layout$qListObject$q = layout.qListObject.qSize) === null || _layout$qListObject$q === void 0 ? void 0 : _layout$qListObject$q.qcy;
   const unlimitedListCount = getListCount({
     pages,
@@ -12861,14 +12947,28 @@ function ListBox(_ref) {
     layoutOptions,
     model
   });
+  let freqIsAllowed = getFrequencyAllowed({
+    itemWidth: width,
+    layout,
+    frequencyMode
+  });
   const sizes = getListSizes({
     layout,
     width,
     height,
     listCount: unlimitedListCount,
     count,
-    textWidth
+    textWidth,
+    freqIsAllowed
   });
+  if (sizes.columnWidth) {
+    // In grid mode, where we have a dynamic item width, get a second opinion on showing/hiding frequency.
+    freqIsAllowed = getFrequencyAllowed({
+      itemWidth: sizes.columnWidth,
+      layout,
+      frequencyMode
+    });
+  }
   const {
     listCount
   } = sizes;
@@ -12887,7 +12987,7 @@ function ListBox(_ref) {
     });
     local.current.dataOffset = offset;
     if (triggerRerender) {
-      setPages(currentPages => [...currentPages]);
+      selectionState.triggerStateChanged();
     }
     scrollToIndex(scrollIndex);
   };
@@ -12954,7 +13054,9 @@ function ListBox(_ref) {
     },
     setScrollPosition,
     focusListItems: getFocusState(),
-    setCurrentScrollIndex: currentScrollIndex.set
+    setCurrentScrollIndex: currentScrollIndex.set,
+    constraints,
+    freqIsAllowed
   });
   const {
     columnWidth,
@@ -13032,7 +13134,8 @@ var createListboxSelectionToolbar = (_ref => {
   let {
     layout,
     model,
-    translator
+    translator,
+    selectionState
   } = _ref;
   if (layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne) {
     return [];
@@ -13048,6 +13151,7 @@ var createListboxSelectionToolbar = (_ref => {
     getSvgIconShape: selectAll,
     enabled: canSelectAll,
     action: () => {
+      selectionState.clearItemStates(false);
       model.selectListObjectAll('/qListObjectDef');
     }
   }, {
@@ -13057,6 +13161,7 @@ var createListboxSelectionToolbar = (_ref => {
     getSvgIconShape: selectPossible,
     enabled: canSelectPossible,
     action: () => {
+      selectionState.clearItemStates(false);
       model.selectListObjectPossible('/qListObjectDef');
     }
   }, {
@@ -13066,6 +13171,7 @@ var createListboxSelectionToolbar = (_ref => {
     getSvgIconShape: selectAlternative,
     enabled: canSelectAlternative,
     action: () => {
+      selectionState.clearItemStates(false);
       model.selectListObjectAlternative('/qListObjectDef');
     }
   }, {
@@ -13075,6 +13181,7 @@ var createListboxSelectionToolbar = (_ref => {
     getSvgIconShape: selectExcluded,
     enabled: canSelectExcluded,
     action: () => {
+      selectionState.clearItemStates(false);
       model.selectListObjectExcluded('/qListObjectDef');
     }
   }];
@@ -13137,6 +13244,7 @@ const Item = React__default.forwardRef((_ref, ref) => {
     style: style,
     className: ActionElement.className,
     size: "large",
+    disableRipple: true,
     "aria-expanded": ariaExpanded,
     "aria-controls": "moreMenuList"
   }, hasSvgIconShape && SvgIcon$2(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React__default.createElement("div", {
@@ -13544,7 +13652,7 @@ function ActionsToolbar(_ref3) {
       className: ActionToolbarElement.className,
       style: {
         pointerEvents: 'auto',
-        padding: theme.spacing(1, 1)
+        padding: theme.spacing(0.8)
       }
     }
   }, Actions) : show && Actions;
@@ -13583,6 +13691,7 @@ const StyledOutlinedInput = styled$1(OutlinedInput)(_ref2 => {
 function ListBoxSearch(_ref3) {
   let {
     selections,
+    selectionState,
     model,
     keyboard,
     dense = false,
@@ -13657,6 +13766,7 @@ function ListBoxSearch(_ref3) {
       response = model.acceptListObjectSearch(TREE_PATH, true);
       // eslint-disable-next-line no-param-reassign
       selections.selectionsMade = true;
+      selectionState.clearItemStates(false);
       setValue('');
     }
     return response;
@@ -13696,7 +13806,8 @@ function ListBoxSearch(_ref3) {
       },
       '&:hover': {
         border: 'none'
-      }
+      },
+      paddingLeft: "".concat(CELL_PADDING_LEFT, "px")
     }, dense && {
       fontSize: 12,
       paddingLeft: theme.spacing(1),
@@ -13970,6 +14081,125 @@ function useObjectSelections(app, model, elements, options) {
   return [objectSelections];
 }
 
+function selectionState() {
+  const state = {
+    itemStates: {},
+    ignoreSelectionState: false,
+    selectedInEngine: [],
+    enginePages: [],
+    setPages: undefined,
+    lastRowCount: undefined,
+    lastApprMaxGlyphCount: undefined,
+    update(_ref) {
+      var _layout$qListObject$q, _layout$qListObject, _layout$qListObject$q2;
+      let {
+        setPages,
+        pages,
+        isSingleSelect,
+        selectDisabled,
+        layout
+      } = _ref;
+      this.setPages = setPages;
+      const isSameRowCount = this.lastRowCount === layout.qListObject.qSize.qcy;
+      const isSameMaxGlyphCnt = this.lastApprMaxGlyphCount === layout.qListObject.qDimensionInfo.qApprMaxGlyphCount;
+      if (!isSameRowCount || !isSameMaxGlyphCnt) {
+        this.lastRowCount = layout.qListObject.qSize.qcy;
+        this.lastApprMaxGlyphCount = layout.qListObject.qDimensionInfo.qApprMaxGlyphCount;
+
+        // The field have probably changed (drill up/down)
+        // need to clear the client side item states since the field values have changed
+        this.clearItemStates(false);
+      }
+      if (state.enginePages !== pages && pages !== undefined) {
+        state.enginePages = pages !== null && pages !== void 0 ? pages : [];
+        state.selectedInEngine = getSelectedValues(pages);
+        state.selectableValuesUpdating = false;
+        state.triggerStateChanged();
+      }
+      state.isSingleSelect = isSingleSelect;
+      state.selectDisabled = selectDisabled;
+      state.isDimCalculated = (_layout$qListObject$q = layout === null || layout === void 0 ? void 0 : (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 ? void 0 : (_layout$qListObject$q2 = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject$q2 === void 0 ? void 0 : _layout$qListObject$q2.qIsCalculated) !== null && _layout$qListObject$q !== void 0 ? _layout$qListObject$q : false;
+    },
+    allowedToSelect() {
+      if (state.selectDisabled()) {
+        return false;
+      }
+      // When a dim is calculated, the rows must be done updating after previeous selection
+      return !(state.isDimCalculated && state.selectableValuesUpdating);
+    },
+    setSelectableValuesUpdating() {
+      state.selectableValuesUpdating = true;
+    },
+    useClientItemState(elementNumber) {
+      return state.ignoreSelectionState || elementNumber in state.itemStates;
+    },
+    isSelected(elementNumber) {
+      if (state.useClientItemState(elementNumber)) {
+        return !!state.itemStates[elementNumber];
+      }
+      return state.selectedInEngine.includes(elementNumber);
+    },
+    getState(item) {
+      const {
+        qElemNumber,
+        qState
+      } = item;
+      if (!state.useClientItemState(qElemNumber)) {
+        return qState;
+      }
+      if (state.itemStates[qElemNumber]) {
+        return qState === 'XS' ? 'XS' : 'S';
+      }
+      return qState === 'S' || qState === 'XS' ? 'A' : qState;
+    },
+    updateItemNoEvents(elementNumber, additive, selectedValues) {
+      const selected = state.isSelected(elementNumber);
+      if (selected && !additive) {
+        state.itemStates[elementNumber] = false;
+      } else if (!selected) {
+        selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.push(elementNumber);
+        state.itemStates[elementNumber] = true;
+      }
+    },
+    triggerStateChanged() {
+      if (this.setPages) {
+        const pages = state.applySelectionsOnPages(state.enginePages);
+        this.setPages(pages);
+      }
+    },
+    applySelectionsOnPages(pages) {
+      const matrices = pages.map(page => {
+        const qMatrix = page.qMatrix.map(p => {
+          const [p0] = p;
+          const qState = state.getState(p0);
+          return [_objectSpread2(_objectSpread2({}, p0), {}, {
+            qState
+          }), ...p.slice(1)];
+        });
+        return _objectSpread2(_objectSpread2({}, page), {}, {
+          qMatrix
+        });
+      });
+      return matrices;
+    },
+    updateItem(elementNumber, additive, selectedValues) {
+      state.updateItemNoEvents(elementNumber, additive, selectedValues);
+      state.triggerStateChanged();
+    },
+    updateItems(elementNumbers, additive, selectedValues) {
+      elementNumbers.forEach(elementNumber => {
+        state.updateItemNoEvents(elementNumber, additive, selectedValues);
+      });
+      state.triggerStateChanged();
+    },
+    clearItemStates(ignoreSelectionState) {
+      state.itemStates = {};
+      state.ignoreSelectionState = ignoreSelectionState;
+    }
+  };
+  return state;
+}
+
 const getValue$1 = function (obj, prop) {
   var _obj$prop;
   let defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
@@ -14041,6 +14271,7 @@ function ListBoxPopover(_ref) {
   const containerRef = useRef();
   const [selections] = useObjectSelections(app, model, containerRef);
   const [layout] = useLayout$1(model);
+  const [selectionState$1] = useState$1(() => selectionState());
   useEffect$1(() => {
     if (selections && open) {
       if (!selections.isModal(model)) {
@@ -14060,7 +14291,8 @@ function ListBoxPopover(_ref) {
   const listboxSelectionToolbarItems = createListboxSelectionToolbar({
     layout,
     model,
-    translator
+    translator,
+    selectionState: selectionState$1
   });
   const hasSelections$1 = hasSelections(layout);
   return /*#__PURE__*/React__default.createElement(Popover, {
@@ -14133,6 +14365,7 @@ function ListBoxPopover(_ref) {
     model: model,
     listCount: listCount,
     selections: selections,
+    selectionState: selectionState$1,
     keyboard: {
       enabled: false
     },
@@ -14141,6 +14374,7 @@ function ListBoxPopover(_ref) {
     model: model,
     layout: layout,
     selections: selections,
+    selectionState: selectionState$1,
     direction: "ltr",
     onSetListCount: c => setListCount(c)
   }))));
@@ -15400,6 +15634,16 @@ AutoSizer.defaultProps = {
   style: {}
 };
 
+const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
+  shapes: [{
+    type: 'path',
+    attrs: {
+      d: 'M15.9993744,3 L15.9993744,5 L4.99937445,5 L4.99937445,3 L15.9993744,3 Z M8.99937445,7 L15.9993744,7 L15.9993744,9 L8.99937445,9 L8.99937445,7 Z M11.9993744,11 L15.9993744,11 L15.9993744,13 L11.9993744,13 L11.9993744,11 Z M2.2,11 L7,11 L7,9.00369263 C7,8.89323568 7.08954305,8.80369263 7.2,8.80369263 C7.2549016,8.80369263 7.30738916,8.82626165 7.34515712,8.86610844 L10.1852182,11.8624926 C10.2583124,11.93961 10.258346,12.0604218 10.1852948,12.13758 L7.34523376,15.1373102 C7.2692928,15.2175206 7.14270711,15.2209817 7.06249671,15.1450407 C7.02260076,15.1072683 7,15.0547472 7,14.9998069 L7,12.9043747 C4.79351111,12.9043747 2.8018683,12.9266213 1.02507156,12.9711145 L1.02507252,12.9711526 C0.472939773,12.9849787 0.014139487,12.5485949 0.000313396522,11.9964622 C0.000104473692,11.988119 -1.32268838e-12,11.9797736 -1.3231638e-12,11.9714278 L-1.83320026e-12,3 L2,3 L2,10.8 C2,10.9104569 2.08954305,11 2.2,11 Z'
+    }
+  }]
+});
+var DrillDownIcon = (props => SvgIcon$2(drillDown(props)));
+
 const addListboxTheme = themeApi => {
   const getListboxStyle = prop => themeApi.getStyle('object', '', "listBox.".concat(prop));
   return {
@@ -15419,29 +15663,86 @@ const addListboxTheme = themeApi => {
   };
 };
 
+function showToolbarDetached(_ref) {
+  var _containerRef$current, _containerRef$current2, _titleRef$current$cli, _titleRef$current, _titleRef$current2, _titleRef$current3;
+  let {
+    containerRef,
+    titleRef,
+    iconsWidth
+  } = _ref;
+  const containerWidth = (_containerRef$current = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.clientWidth) !== null && _containerRef$current !== void 0 ? _containerRef$current : 0;
+  const padding = 16;
+  const contentWidth = ((_titleRef$current$cli = titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.clientWidth) !== null && _titleRef$current$cli !== void 0 ? _titleRef$current$cli : 0) + iconsWidth + padding;
+  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);
+}
+
+function getListboxActionProps(_ref) {
+  let {
+    isPopover,
+    showToolbar,
+    containerRef,
+    isLocked,
+    listboxSelectionToolbarItems,
+    selections
+  } = _ref;
+  return {
+    show: showToolbar && !isPopover,
+    popover: {
+      show: showToolbar && isPopover,
+      anchorEl: containerRef.current
+    },
+    more: {
+      enabled: !isLocked,
+      actions: listboxSelectionToolbarItems,
+      popoverProps: {
+        elevation: 0
+      },
+      popoverPaperStyle: {
+        boxShadow: '0 12px 8px -8px rgba(0, 0, 0, 0.2)',
+        minWidth: '250px'
+      }
+    },
+    selections: {
+      show: showToolbar,
+      api: selections,
+      onConfirm: () => {},
+      onCancel: () => {}
+    }
+  };
+}
+
 const PREFIX$4 = 'ListBoxInline';
-const searchIconWidth = 28;
 const classes$4 = {
   listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader"),
-  screenReaderOnly: "".concat(PREFIX$4, "-screenReaderOnly")
+  screenReaderOnly: "".concat(PREFIX$4, "-screenReaderOnly"),
+  listboxWrapper: "".concat(PREFIX$4, "-listboxWrapper")
 };
-const StyledGrid$3 = styled$1(Grid)(_ref => {
+const StyledGrid$3 = styled$1(Grid, {
+  shouldForwardProp: p => !['containerPadding'].includes(p)
+})(_ref => {
   var _theme$listBox$backgr, _theme$listBox;
   let {
-    theme
+    theme,
+    containerPadding
   } = _ref;
   return {
     backgroundColor: (_theme$listBox$backgr = (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : _theme$listBox.backgroundColor) !== null && _theme$listBox$backgr !== void 0 ? _theme$listBox$backgr : theme.palette.background.default,
     ["& .".concat(classes$4.listBoxHeader)]: {
       alignSelf: 'center',
       display: 'inline-flex',
-      width: "calc(100% - ".concat(searchIconWidth, "px)")
+      width: "calc(100% - ".concat(BUTTON_ICON_WIDTH, "px)")
     },
     ["& .".concat(classes$4.screenReaderOnly)]: {
       position: 'absolute',
       height: 0,
       width: 0,
       overflow: 'hidden'
+    },
+    ["& .".concat(classes$4.listboxWrapper)]: {
+      padding: containerPadding
     }
   };
 });
@@ -15457,7 +15758,7 @@ const Title = styled$1(Typography)(_ref2 => {
   };
 });
 function ListBoxInline(_ref3) {
-  var _layout$layoutOptions, _layout$layoutOptions2;
+  var _layoutOptions$dense;
   let {
     options,
     layout
@@ -15466,7 +15767,6 @@ function ListBoxInline(_ref3) {
     app,
     direction,
     frequencyMode,
-    listLayout,
     checkboxes,
     search = true,
     focusSearch = false,
@@ -15507,7 +15807,6 @@ function ListBoxInline(_ref3) {
     constraints
   } = useContext(InstanceContext);
   theme.listBox = addListboxTheme(themeApi);
-  const moreAlignTo = useRef();
   const containerRef = useRef();
   const [searchContainer, searchContainerRef] = useRefWithCallback();
   const [showToolbar, setShowToolbar] = useState$1(false);
@@ -15525,6 +15824,8 @@ function ListBoxInline(_ref3) {
     stop: 0
   });
   const [appSelections] = useAppSelections(app);
+  const titleRef = useRef(null);
+  const [selectionState$1] = useState$1(() => selectionState());
   const {
     handleKeyDown,
     handleOnMouseEnter,
@@ -15550,6 +15851,7 @@ function ListBoxInline(_ref3) {
   if ((layout === null || layout === void 0 ? void 0 : layout.toolbar) !== undefined) {
     toolbar = layout.toolbar;
   }
+  const toolbarDetachedOnly = toolbar && (layout === null || layout === void 0 ? void 0 : layout.title) === '';
   toolbar = toolbar && (layout === null || layout === void 0 ? void 0 : layout.title) !== '';
   useEffect$1(() => {
     const show = () => {
@@ -15566,15 +15868,15 @@ function ListBoxInline(_ref3) {
     };
     if (selections) {
       if (!selections.isModal()) {
-        selections.on('deactivated', hide);
         selections.on('activated', show);
+        selections.on('deactivated', hide);
       }
       setShowToolbar(selections.isActive());
     }
     return () => {
       if (selections && selections.removeListener) {
-        selections.removeListener('deactivated', show);
-        selections.removeListener('activated', hide);
+        selections.removeListener('activated', show);
+        selections.removeListener('deactivated', hide);
       }
     };
   }, [selections, toolbar]);
@@ -15592,17 +15894,23 @@ function ListBoxInline(_ref3) {
     return null;
   }
   const isLocked = layout.qListObject.qDimensionInfo.qLocked === true;
-  const listboxSelectionToolbarItems = toolbar ? createListboxSelectionToolbar({
+  const isDrillDown = layout.qListObject.qDimensionInfo.qGrouping === 'H';
+  const listboxSelectionToolbarItems = createListboxSelectionToolbar({
     layout,
     model,
-    translator
-  }) : [];
+    translator,
+    selectionState: selectionState$1
+  });
   const showSearchToggle = search === 'toggle' && showSearch;
   const searchVisible = (search === true || showSearchToggle) && !selectDisabled();
-  const dense = (_layout$layoutOptions = (_layout$layoutOptions2 = layout.layoutOptions) === null || _layout$layoutOptions2 === void 0 ? void 0 : _layout$layoutOptions2.dense) !== null && _layout$layoutOptions !== void 0 ? _layout$layoutOptions : false;
+  const {
+    layoutOptions = {}
+  } = layout;
+  const dense = (_layoutOptions$dense = layoutOptions.dense) !== null && _layoutOptions$dense !== void 0 ? _layoutOptions$dense : false;
   const searchHeight = dense ? 27 : 40;
   const extraheight = dense ? 39 : 49;
   const minHeight = 49 + (searchVisible ? searchHeight : 0) + extraheight;
+  const headerHeight = 32;
   const {
     wildCardSearch,
     searchEnabled
@@ -15611,13 +15919,34 @@ function ListBoxInline(_ref3) {
     const newValue = !showSearch;
     setShowSearch(newValue);
   };
+  const getActionToolbarProps = isPopover => getListboxActionProps({
+    isPopover,
+    showToolbar,
+    containerRef,
+    isLocked,
+    listboxSelectionToolbarItems,
+    selections
+  });
   const shouldAutoFocus = searchVisible && search === 'toggle';
-  return /*#__PURE__*/React__default.createElement(StyledGrid$3, {
+  const showSearchIcon = searchEnabled !== false && search === 'toggle' && !(constraints !== null && constraints !== void 0 && constraints.active);
+  const showSearchOrLockIcon = isLocked || showSearchIcon;
+  const showIcons = showSearchOrLockIcon || isDrillDown;
+  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);
+
+  // 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';
+  let containerPadding;
+  if (isGridMode) {
+    containerPadding = layoutOptions.layoutOrder === 'row' ? '2px 4px' : '2px 6px 2px 4px';
+  }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, toolbarDetachedOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, getActionToolbarProps(true)), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
     container: true,
     tabIndex: keyboard.enabled && !keyboard.active ? 0 : -1,
     direction: "column",
     gap: 0,
+    containerPadding: containerPadding,
     style: {
       height: '100%',
       minHeight: "".concat(minHeight, "px"),
@@ -15631,70 +15960,69 @@ function ListBoxInline(_ref3) {
     item: true,
     container: true,
     style: {
-      padding: theme.spacing(1)
+      padding: theme.spacing(1),
+      paddingLeft: "".concat(headerPaddingLeft, "px")
     },
     wrap: "nowrap"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
+    height: headerHeight,
     wrap: "nowrap"
-  }, /*#__PURE__*/React__default.createElement(Grid, {
+  }, showIcons && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     sx: {
       display: 'flex',
       alignItems: 'center',
-      width: searchIconWidth
+      width: iconsWidth
     }
   }, isLocked ? /*#__PURE__*/React__default.createElement(IconButton, {
     tabIndex: -1,
     onClick: unlock,
-    disabled: !isLocked,
+    disabled: selectDisabled(),
     size: "large"
   }, /*#__PURE__*/React__default.createElement(Lock, {
     title: translator.get('Listbox.Unlock'),
+    disableRipple: true,
     style: {
       fontSize: '12px'
     }
-  })) : searchEnabled !== false && /*#__PURE__*/React__default.createElement(IconButton, {
+  })) : showSearchIcon && /*#__PURE__*/React__default.createElement(IconButton, {
     onClick: onShowSearch,
     tabIndex: -1,
     title: translator.get('Listbox.Search'),
-    size: "large"
+    size: "large",
+    disableRipple: true,
+    "data-testid": "search-toggle-btn"
   }, /*#__PURE__*/React__default.createElement(SearchIcon, {
     style: {
       fontSize: '12px'
     }
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
+  })), isDrillDown && /*#__PURE__*/React__default.createElement(DrillDownIcon, {
+    tabIndex: -1,
+    title: translator.get('Listbox.DrillDown'),
+    size: "large",
+    style: {
+      fontSize: '12px'
+    }
+  })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: classes$4.listBoxHeader
   }, /*#__PURE__*/React__default.createElement(Title, {
     variant: "h6",
-    noWrap: true
+    noWrap: true,
+    ref: titleRef,
+    title: layout.title
   }, layout.title))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, {
-    more: {
-      enabled: !isLocked,
-      actions: listboxSelectionToolbarItems,
-      alignTo: moreAlignTo,
-      popoverProps: {
-        elevation: 0
-      },
-      popoverPaperStyle: {
-        boxShadow: '0 12px 8px -8px rgba(0, 0, 0, 0.2)',
-        minWidth: '250px'
-      }
-    },
-    selections: {
-      show: showToolbar,
-      api: selections,
-      onConfirm: () => {},
-      onCancel: () => {}
-    }
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, getActionToolbarProps(showToolbarDetached({
+    containerRef,
+    titleRef,
+    iconsWidth
+  }))))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
     direction: "column",
@@ -15704,15 +16032,14 @@ function ListBoxInline(_ref3) {
     },
     role: "region",
     "aria-label": translator.get('Listbox.ResultFilterLabel')
-  }, /*#__PURE__*/React__default.createElement("div", {
-    ref: moreAlignTo
-  }), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     ref: searchContainerRef
   }, /*#__PURE__*/React__default.createElement("div", {
     className: classes$4.screenReaderOnly
   }, translator.get('Listbox.Search.ScreenReaderInstructions')), /*#__PURE__*/React__default.createElement(ListBoxSearch, {
     selections: selections,
+    selectionState: selectionState$1,
     model: model,
     dense: dense,
     keyboard: keyboard,
@@ -15724,7 +16051,8 @@ function ListBoxInline(_ref3) {
     searchEnabled: searchEnabled
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: true
+    xs: true,
+    className: classes$4.listboxWrapper
   }, /*#__PURE__*/React__default.createElement("div", {
     className: classes$4.screenReaderOnly
   }, translator.get('Listbox.ScreenReaderInstructions')), /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref4 => {
@@ -15734,10 +16062,11 @@ function ListBoxInline(_ref3) {
     } = _ref4;
     return /*#__PURE__*/React__default.createElement(ListBox, {
       model: model,
+      constraints: constraints,
       layout: layout,
       selections: selections,
+      selectionState: selectionState$1,
       direction: direction,
-      listLayout: listLayout,
       frequencyMode: frequencyMode,
       rangeSelect: rangeSelect,
       checkboxes: checkboxes,
@@ -15764,7 +16093,7 @@ function ListBoxInline(_ref3) {
         set: setCurrentScrollIndex
       }
     });
-  }))));
+  })))));
 }
 const ListBoxInlineMemoed = React__default.memo(ListBoxInline);
 function IsolateUseLayoutWrapper(_ref5) {
@@ -15806,6 +16135,9 @@ function useExistingModel(_ref) {
       } else {
         const m = await app.getObject(qId);
         modelStore.set(m.id, m);
+        m.once('closed', () => {
+          modelStore.clear(m.id);
+        });
         setModel(m);
       }
     }
@@ -15859,6 +16191,7 @@ function useOnTheFlyModel(_ref) {
   const {
     dense,
     checkboxes,
+    listLayout,
     properties = {}
   } = options;
   let {
@@ -15887,6 +16220,20 @@ function useOnTheFlyModel(_ref) {
       break;
   }
   const getListdefFrequencyMode = () => histogram && frequencyMode === 'N' ? 'V' : frequencyMode;
+  const layoutOptions = {
+    dense
+  };
+  if (listLayout === 'horizontal') {
+    layoutOptions.dataLayout = 'grid';
+    layoutOptions.layoutOrder = 'column';
+    layoutOptions.maxVisibleColumns = {
+      auto: true
+    };
+    layoutOptions.maxVisibleRows = {
+      auto: false,
+      maxRows: 1
+    };
+  }
   const id = useRef();
   if (!id.current) {
     id.current = uid();
@@ -15899,6 +16246,7 @@ function useOnTheFlyModel(_ref) {
     qListObjectDef: {
       qStateName: stateName,
       qShowAlternatives: true,
+      frequencyEnabled: false,
       qFrequencyMode: getListdefFrequencyMode(),
       qInitialDataFetch: [{
         qTop: 0,
@@ -15917,9 +16265,7 @@ function useOnTheFlyModel(_ref) {
     },
     histogram,
     checkboxes,
-    layoutOptions: {
-      dense
-    },
+    layoutOptions,
     title
   };
   extend$1(true, listdef, properties);
@@ -16041,7 +16387,7 @@ function ListBoxWrapper(_ref) {
     options
   });
   const elementRef = useRef(element);
-  const selections = hasExternalSelectionsApi ? options.selectionsApi : useObjectSelections(app, model, [elementRef, '.njs-action-toolbar-more'], options)[0];
+  const selections = hasExternalSelectionsApi ? options.selectionsApi : useObjectSelections(app, model, [elementRef, '.njs-action-toolbar-more', '.njs-action-toolbar-popover'], options)[0];
   const opts = useMemo$1(() => _objectSpread2(_objectSpread2({}, options), {}, {
     selections,
     model,