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

package/dist/stardust.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.
 */
@@ -1680,6 +1680,12 @@
 			"zh-TW": "不符計算條件"
 		}
 	};
+	var Listbox_DrillDown = {
+		id: "Listbox.DrillDown",
+		locale: {
+			"en-US": "Drill-down dimension"
+		}
+	};
 	var all = {
 		Cancel: Cancel$1,
 		CurrentSelections_All: CurrentSelections_All,
@@ -1716,7 +1722,8 @@
 		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) {
@@ -3505,6 +3512,8 @@
 	  return detectTouchscreen() ? 'touch' : 'desktop';
 	}
 
+	var client = {};
+
 	var reactDomExports = {};
 	var reactDom = {
 	  get exports(){ return reactDomExports; },
@@ -3901,6 +3910,12 @@
 
 	var ReactDOM = /*@__PURE__*/getDefaultExportFromCjs(reactDomExports);
 
+	var m$2 = reactDomExports;
+	{
+	  client.createRoot = m$2.createRoot;
+	  client.hydrateRoot = m$2.hydrateRoot;
+	}
+
 	function _extends$7() {
 	  _extends$7 = Object.assign ? Object.assign.bind() : function (target) {
 	    for (var i = 1; i < arguments.length; i++) {
@@ -15097,7 +15112,7 @@
 	      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
@@ -15237,10 +15252,21 @@
 	      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'
 	      }
 	    }
 	  },
@@ -15328,7 +15354,7 @@
 	  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', ''));
 	});
@@ -15490,7 +15516,8 @@
 	const NebulaApp = reactExports.forwardRef((_ref, ref) => {
 	  let {
 	    initialContext,
-	    app
+	    app,
+	    renderCallback
 	  } = _ref;
 	  const [appSelections] = useAppSelections(app);
 	  const [context, setContext] = reactExports.useState(initialContext);
@@ -15501,21 +15528,20 @@
 	    theme: create$3(muiThemeName)
 	  }), [muiThemeName]);
 	  const [components, setComponents] = reactExports.useState([]);
+
+	  // Will be called directly after the first render pass
+	  // See: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
+	  reactExports.useEffect(() => {
+	    renderCallback && renderCallback();
+	  }, []);
 	  reactExports.useImperativeHandle(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.createElement(StyledEngineProvider, {
 	    injectFirst: true
 	  }, /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -15536,15 +15562,18 @@
 	  const appRef = React.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.createElement(NebulaApp, {
+	  const root = client.createRoot(element);
+	  root.render( /*#__PURE__*/React.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 => {
@@ -15561,13 +15590,18 @@
 	    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) {
@@ -21495,9 +21529,6 @@
 	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 [];
@@ -21511,45 +21542,38 @@
 	  });
 	  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) {
@@ -21612,126 +21636,132 @@
 	  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] = reactExports.useState(pages);
-	  const [mouseDown, setMouseDown] = reactExports.useState(false);
-	  const [selectingValues, setSelectingValues] = reactExports.useState(false);
-	  const [isSingleSelect, setIsSingleSelect] = reactExports.useState(singleSelect);
-	  const [selected, setSelected] = reactExports.useState([]);
-	  const [isRangeSelection, setIsRangeSelection] = reactExports.useState(false);
-	  const [preSelected, setPreSelected] = reactExports.useState([]);
-	  const elemNumbersOrdered = getElemNumbersFromPages(pages);
-	  reactExports.useEffect(() => {
-	    setIsSingleSelect(singleSelect);
-	  }, [singleSelect]);
-
-	  // 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({
+	  const currentSelect = reactExports.useRef({
+	    startElemNumber: undefined,
+	    elemNumbers: [],
+	    isRange: false,
+	    toggle: false,
+	    active: false
+	  });
+
+	  // 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 handleSingleSelectKey = event => {
+	    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, 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 = reactExports.useCallback(event => {
-	    if (selectingValues || selectDisabled()) {
+	  const onChange = reactExports.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 = reactExports.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 = reactExports.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 = reactExports.useCallback(() => {
+	    currentSelect.current.active = false;
+	    if (currentSelect.current.isRange) {
+	      const elemNumber = +event.currentTarget.getAttribute('data-n');
+	      addToRange(elemNumber);
+	    }
+	    doSelect();
+	  }, []);
+	  const onMouseUpDoc = reactExports.useCallback(event => {
 	    // Ensure we end interactions when mouseup happens outside the Listbox.
-	    setMouseDown(false);
-	    setSelectingValues(false);
-	    setIsRangeSelection(false);
-	    setIsSingleSelect(singleSelect);
-	  }, [singleSelect]);
-	  const onMouseEnter = reactExports.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]);
-	  reactExports.useEffect(() => {
-	    // 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 = reactExports.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);
+	  }, []);
 	  reactExports.useEffect(() => {
 	    doc.addEventListener('mouseup', onMouseUpDoc);
 	    return () => {
@@ -21739,25 +21769,26 @@
 	    };
 	  }, [onMouseUpDoc]);
 	  reactExports.useEffect(() => {
-	    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]);
-	  reactExports.useEffect(() => {
-	    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, {
@@ -21767,7 +21798,6 @@
 	    });
 	  }
 	  return {
-	    instantPages,
 	    interactionEvents,
 	    select: selectManually // preselect and select without having to trigger an event
 	  };
@@ -22114,6 +22144,34 @@
 	  } = _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;
@@ -22144,6 +22202,11 @@
 	  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
@@ -22163,10 +22226,11 @@
 	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 {
@@ -22174,7 +22238,8 @@
 	    flexBasisProp,
 	    isGridMode,
 	    isGridCol,
-	    dense
+	    dense,
+	    frequencyWidth
 	  } = _ref2;
 	  return {
 	    '&:focus': {
@@ -22203,18 +22268,18 @@
 	      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
 	    }),
@@ -22252,7 +22317,10 @@
 	    // 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({
@@ -22264,7 +22332,7 @@
 	      theme
 	    })), {}, {
 	      background: theme.palette.selected.excluded,
-	      color: theme.palette.selected.mainContrastText,
+	      color: theme.palette.selected.excludedContrastText,
 	      border: isGridMode ? 'none' : undefined
 	    }),
 	    ["& .".concat(rowColClasses.A)]: {
@@ -22277,10 +22345,13 @@
 	      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',
@@ -22315,6 +22386,7 @@
 	    }
 	  };
 	});
+	var RowColRoot$1 = React.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\")";
 
@@ -22390,19 +22462,23 @@
 	};
 	function ListboxCheckbox(_ref2) {
 	  let {
+	    onChange,
 	    checked,
 	    label,
 	    dense,
 	    excluded,
-	    showGray = true
+	    showGray = true,
+	    dataN
 	  } = _ref2;
 	  return /*#__PURE__*/React.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),
@@ -22431,15 +22507,21 @@
 	});
 	function ListBoxRadioButton(_ref2) {
 	  let {
+	    onChange,
 	    checked,
 	    label,
-	    dense
+	    dense,
+	    dataN
 	  } = _ref2;
 	  return /*#__PURE__*/React.createElement(StyledRadio, {
 	    checked: checked,
+	    onChange: onChange,
 	    value: label,
 	    name: label,
 	    className: classes$a.radioButton,
+	    inputProps: {
+	      'data-n': dataN
+	    },
 	    style: {
 	      backgroundColor: 'transparent'
 	    },
@@ -22470,7 +22552,7 @@
 	      checkboxes
 	    }) && rowColClasses.excludedTextWithCheckbox]),
 	    color: color,
-	    justifyContent: valueTextAlign
+	    align: valueTextAlign
 	  }, /*#__PURE__*/React.createElement("span", {
 	    style: {
 	      whiteSpace: 'pre'
@@ -22506,6 +22588,7 @@
 
 	function CheckboxField(_ref) {
 	  let {
+	    onChange,
 	    label,
 	    color,
 	    qElemNumber,
@@ -22520,17 +22603,21 @@
 	    valueTextAlign
 	  } = _ref;
 	  const cb = /*#__PURE__*/React.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.createElement(ListBoxRadioButton, {
+	    onChange: onChange,
 	    label: label,
 	    checked: isSelected,
-	    dense: dense
+	    dense: dense,
+	    dataN: qElemNumber
 	  });
 	  return /*#__PURE__*/React.createElement(FormControlLabel$1, {
 	    color: color,
@@ -22557,11 +22644,12 @@
 	    showGray,
 	    checkboxes
 	  } = _ref;
-	  return /*#__PURE__*/React.createElement(React.Fragment, null, labels.map(_ref2 => {
+	  return /*#__PURE__*/React.createElement(React.Fragment, null, labels.map((_ref2, index) => {
 	    let [label, highlighted] = _ref2;
+	    const key = "".concat(index);
 	    return /*#__PURE__*/React.createElement(ValueField, {
 	      label: label,
-	      key: label,
+	      key: key,
 	      highlighted: highlighted,
 	      dense: dense,
 	      showGray: showGray,
@@ -22571,6 +22659,7 @@
 	}
 	function FieldWithRanges(_ref3) {
 	  let {
+	    onChange,
 	    labels,
 	    checkboxes,
 	    dense,
@@ -22590,6 +22679,7 @@
 	    checkboxes: checkboxes
 	  });
 	  return checkboxes ? /*#__PURE__*/React.createElement(CheckboxField, {
+	    onChange: onChange,
 	    label: LWR,
 	    color: color,
 	    qElemNumber: qElemNumber,
@@ -22606,6 +22696,7 @@
 
 	function Field(_ref) {
 	  let {
+	    onChange,
 	    label,
 	    color,
 	    qElemNumber,
@@ -22620,6 +22711,7 @@
 	    valueTextAlign
 	  } = _ref;
 	  return checkboxes ? /*#__PURE__*/React.createElement(CheckboxField, {
+	    onChange: onChange,
 	    label: label,
 	    color: color,
 	    qElemNumber: qElemNumber,
@@ -22643,6 +22735,7 @@
 	    valueTextAlign: valueTextAlign
 	  });
 	}
+	var Field$1 = React.memo(Field);
 
 	function Histogram(_ref) {
 	  let {
@@ -22715,12 +22808,16 @@
 	    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 {};
@@ -22728,24 +22825,43 @@
 	}
 
 	const ItemGrid = styled$1(Grid$1, {
-	  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,
@@ -22754,6 +22870,7 @@
 	    data
 	  } = _ref;
 	  const {
+	    onChange,
 	    onClick,
 	    onMouseDown,
 	    onMouseUp,
@@ -22777,7 +22894,8 @@
 	    dataOffset,
 	    focusListItems,
 	    listCount,
-	    itemPadding
+	    itemPadding,
+	    frequencyWidth
 	  } = data;
 	  const {
 	    dense = false,
@@ -22829,44 +22947,21 @@
 	  const handleKeyDownCallback = reactExports.useCallback(getFieldKeyboardNavigation(_objectSpread2(_objectSpread2({}, actions), {}, {
 	    focusListItems
 	  })), [actions]);
-	  const [isSelected, setSelected] = reactExports.useState(false);
-	  const [cell, setCell] = reactExports.useState();
-	  const [classArr, setClassArr] = reactExports.useState([]);
-	  reactExports.useEffect(() => {
-	    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]);
-	  reactExports.useEffect(() => {
-	    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 = reactExports.useMemo(() => 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 = reactExports.useMemo(() => getValueStateClasses({
+	    column,
+	    histogram,
+	    checkboxes,
+	    cell,
+	    showGray
+	  }), [cell === null || cell === void 0 ? void 0 : cell.qState, histogram, dense, checkboxes]);
+	  const preventContextMenu = reactExports.useCallback(event => {
+	    event.preventDefault();
+	  }, [checkboxes]);
 	  if (!cell) {
 	    return null; // prevent rendering empty rows
 	  }
@@ -22883,19 +22978,16 @@
 	  } 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',
@@ -22908,22 +23000,24 @@
 	    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.createElement(RowColRoot, {
+	  return /*#__PURE__*/React.createElement(RowColRoot$1, {
 	    className: rowColClasses.barContainer,
 	    flexBasisProp: flexBasisVal,
 	    style: styles,
 	    isGridCol: isGridCol,
 	    isGridMode: dataLayout === 'grid',
-	    dense: dense
+	    dense: dense,
+	    frequencyWidth: frequencyWidth
 	  }, /*#__PURE__*/React.createElement(ItemGrid, {
 	    ref: rowRef,
 	    container: true,
 	    dataLayout: dataLayout,
+	    checkboxes: checkboxes,
 	    layoutOrder: layoutOrder,
 	    itemPadding: itemPadding,
 	    gap: 0,
@@ -22939,7 +23033,7 @@
 	    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.createElement(Histogram, {
 	    cell: cell,
 	    histogram: histogram,
@@ -22951,18 +23045,8 @@
 	    style: cellStyle,
 	    className: joinClassNames([rowColClasses.cell, rowColClasses.selectedCell]),
 	    title: "".concat(label)
-	  }, ranges.length === 0 ? /*#__PURE__*/React.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.createElement(FieldWithRanges, {
+	  }, labels ? /*#__PURE__*/React.createElement(FieldWithRanges, {
+	    onChange: onChange,
 	    labels: labels,
 	    checkboxes: checkboxes,
 	    dense: dense,
@@ -22975,6 +23059,19 @@
 	    isGridCol: isGridCol,
 	    isSingleSelect: isSingleSelect,
 	    valueTextAlign: valueTextAlign
+	  }) : /*#__PURE__*/React.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.createElement(Frequency, {
 	    cell: cell,
 	    checkboxes: checkboxes,
@@ -22996,21 +23093,6 @@
 	  }))));
 	}
 
-	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,
@@ -24457,8 +24539,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
@@ -24473,42 +24556,27 @@
 	    '&::-webkit-scrollbar-thumb:hover': {
 	      backgroundColor: scrollBarThumbHover
 	    }
-	  };
-	  const StyledFixedSizeList = newStyled(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 = newStyled(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 = newStyled(FixedSizeList, {
+	    shouldForwardProp: prop => prop !== 'scrollDisabled'
+	  })(_ref => {
+	    let {
+	      scrollDisabled
+	    } = _ref;
+	    return {
+	      ["&.".concat(classes$9.styledScrollbars)]: getScrollbarStyling(scrollDisabled)
+	    };
+	  });
+	  const StyledFixedSizeGrid = newStyled(FixedSizeGrid, {
+	    shouldForwardProp: prop => prop !== 'scrollDisabled'
+	  })(_ref2 => {
+	    let {
+	      scrollDisabled
+	    } = _ref2;
+	    return {
+	      ["&.".concat(classes$9.styledScrollbars)]: getScrollbarStyling(scrollDisabled)
+	    };
+	  });
 	  return {
 	    StyledFixedSizeList,
 	    StyledFixedSizeGrid
@@ -24574,13 +24642,14 @@
 	    showGray,
 	    scrollState,
 	    direction,
-	    listLayout,
 	    sizes,
 	    listCount,
 	    overflowDisclaimer,
 	    setScrollPosition,
 	    focusListItems,
-	    setCurrentScrollIndex
+	    setCurrentScrollIndex,
+	    constraints,
+	    freqIsAllowed
 	  } = _ref;
 	  const {
 	    layoutOptions = {},
@@ -24591,7 +24660,8 @@
 	    listHeight,
 	    itemSize,
 	    rowCount,
-	    columnCount
+	    columnCount,
+	    frequencyWidth
 	  } = sizes || {};
 
 	  // Options common for List and Grid.
@@ -24611,14 +24681,11 @@
 	    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),
@@ -24643,10 +24710,10 @@
 	    // eslint-disable-next-line react/jsx-props-no-spreading
 	    , _extends$8({}, 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
 	      }),
@@ -24721,6 +24788,7 @@
 	    // eslint-disable-next-line react/jsx-props-no-spreading
 	    , _extends$8({}, commonComponentOptions, {
 	      dataTestid: "fixed-size-grid",
+	      scrollDisabled: constraints === null || constraints === void 0 ? void 0 : constraints.active,
 	      height: gridHeight,
 	      width: width,
 	      columnCount: columnCount,
@@ -24745,6 +24813,9 @@
 
 	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,
@@ -24752,7 +24823,8 @@
 	    height,
 	    listCount,
 	    count,
-	    textWidth
+	    textWidth,
+	    freqIsAllowed
 	  } = _ref;
 	  const {
 	    layoutOptions = {}
@@ -24764,7 +24836,8 @@
 	    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;
@@ -24781,18 +24854,21 @@
 	  }
 	  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'
@@ -24804,7 +24880,7 @@
 	        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;
@@ -24830,7 +24906,8 @@
 	      row: maxRowCount,
 	      column: maxColumnCount
 	    },
-	    itemPadding
+	    itemPadding,
+	    frequencyWidth: FREQUENCY_WIDTH
 	  };
 	}
 
@@ -25180,19 +25257,35 @@
 	  };
 	}
 
+	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,
@@ -25237,11 +25330,7 @@
 	      postProcessPages,
 	      listData
 	    }),
-	    {
-	      isLoadingData
-	    } = _useItemsLoader,
 	    itemsLoader = _objectWithoutProperties(_useItemsLoader, _excluded$4);
-	  const [pages, setPages] = reactExports.useState([]);
 	  const {
 	    setStoreValue
 	  } = useDataStore(model);
@@ -25253,9 +25342,16 @@
 	  const showOverflowDisclaimer = show => setOverflowDisclaimer(state => _objectSpread2(_objectSpread2({}, state), {}, {
 	    show
 	  }));
-	  reactExports.useEffect(() => {
-	    setPages((itemsLoader === null || itemsLoader === void 0 ? void 0 : itemsLoader.pages) || []);
-	  }, [itemsLoader === null || itemsLoader === void 0 ? void 0 : itemsLoader.pages]);
+	  const [pages, setPages] = reactExports.useState([]);
+	  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 = reactExports.useCallback(index => {
 	    if (!(pages !== null && pages !== void 0 && pages.length) || !local.current.validPages) {
 	      return false;
@@ -25266,17 +25362,13 @@
 	    return page && isLoaded(page);
 	  }, [layout, pages]);
 	  const {
-	    instantPages = [],
 	    interactionEvents,
 	    select
 	  } = useSelectionsInteractions({
-	    layout,
+	    selectionState,
 	    selections,
-	    pages,
 	    checkboxes,
-	    selectDisabled,
-	    doc: document,
-	    isSingleSelect
+	    doc: document
 	  });
 	  const {
 	    layoutOptions = {}
@@ -25316,12 +25408,6 @@
 	    // Hand over the update function for manual refresh from hosting application.
 	    update.call(null, fetchData);
 	  }
-	  reactExports.useEffect(() => {
-	    if (!instantPages || isLoadingData) {
-	      return;
-	    }
-	    setPages(instantPages);
-	  }, [instantPages]);
 	  reactExports.useEffect(() => {
 	    if (scrollState && !initScrollPosIsSet && loaderRef.current) {
 	      loaderRef.current._listRef.scrollToItem(scrollState.initScrollPos);
@@ -25336,7 +25422,7 @@
 	    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,
@@ -25346,14 +25432,28 @@
 	    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;
@@ -25372,7 +25472,7 @@
 	    });
 	    local.current.dataOffset = offset;
 	    if (triggerRerender) {
-	      setPages(currentPages => [...currentPages]);
+	      selectionState.triggerStateChanged();
 	    }
 	    scrollToIndex(scrollIndex);
 	  };
@@ -25439,7 +25539,9 @@
 	    },
 	    setScrollPosition,
 	    focusListItems: getFocusState(),
-	    setCurrentScrollIndex: currentScrollIndex.set
+	    setCurrentScrollIndex: currentScrollIndex.set,
+	    constraints,
+	    freqIsAllowed
 	  });
 	  const {
 	    columnWidth,
@@ -25517,7 +25619,8 @@
 	  let {
 	    layout,
 	    model,
-	    translator
+	    translator,
+	    selectionState
 	  } = _ref;
 	  if (layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne) {
 	    return [];
@@ -25533,6 +25636,7 @@
 	    getSvgIconShape: selectAll,
 	    enabled: canSelectAll,
 	    action: () => {
+	      selectionState.clearItemStates(false);
 	      model.selectListObjectAll('/qListObjectDef');
 	    }
 	  }, {
@@ -25542,6 +25646,7 @@
 	    getSvgIconShape: selectPossible,
 	    enabled: canSelectPossible,
 	    action: () => {
+	      selectionState.clearItemStates(false);
 	      model.selectListObjectPossible('/qListObjectDef');
 	    }
 	  }, {
@@ -25551,6 +25656,7 @@
 	    getSvgIconShape: selectAlternative,
 	    enabled: canSelectAlternative,
 	    action: () => {
+	      selectionState.clearItemStates(false);
 	      model.selectListObjectAlternative('/qListObjectDef');
 	    }
 	  }, {
@@ -25560,6 +25666,7 @@
 	    getSvgIconShape: selectExcluded,
 	    enabled: canSelectExcluded,
 	    action: () => {
+	      selectionState.clearItemStates(false);
 	      model.selectListObjectExcluded('/qListObjectDef');
 	    }
 	  }];
@@ -25622,6 +25729,7 @@
 	    style: style,
 	    className: ActionElement.className,
 	    size: "large",
+	    disableRipple: true,
 	    "aria-expanded": ariaExpanded,
 	    "aria-controls": "moreMenuList"
 	  }, hasSvgIconShape && SvgIcon(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React.createElement("div", {
@@ -26029,7 +26137,7 @@
 	      className: ActionToolbarElement.className,
 	      style: {
 	        pointerEvents: 'auto',
-	        padding: theme.spacing(1, 1)
+	        padding: theme.spacing(0.8)
 	      }
 	    }
 	  }, Actions) : show && Actions;
@@ -26068,6 +26176,7 @@
 	function ListBoxSearch(_ref3) {
 	  let {
 	    selections,
+	    selectionState,
 	    model,
 	    keyboard,
 	    dense = false,
@@ -26142,6 +26251,7 @@
 	      response = model.acceptListObjectSearch(TREE_PATH, true);
 	      // eslint-disable-next-line no-param-reassign
 	      selections.selectionsMade = true;
+	      selectionState.clearItemStates(false);
 	      setValue('');
 	    }
 	    return response;
@@ -26181,7 +26291,8 @@
 	      },
 	      '&:hover': {
 	        border: 'none'
-	      }
+	      },
+	      paddingLeft: "".concat(CELL_PADDING_LEFT, "px")
 	    }, dense && {
 	      fontSize: 12,
 	      paddingLeft: theme.spacing(1),
@@ -26455,6 +26566,125 @@
 	  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;
@@ -26526,6 +26756,7 @@
 	  const containerRef = reactExports.useRef();
 	  const [selections] = useObjectSelections(app, model, containerRef);
 	  const [layout] = useLayout$1(model);
+	  const [selectionState$1] = reactExports.useState(() => selectionState());
 	  reactExports.useEffect(() => {
 	    if (selections && open) {
 	      if (!selections.isModal(model)) {
@@ -26545,7 +26776,8 @@
 	  const listboxSelectionToolbarItems = createListboxSelectionToolbar({
 	    layout,
 	    model,
-	    translator
+	    translator,
+	    selectionState: selectionState$1
 	  });
 	  const hasSelections$1 = hasSelections(layout);
 	  return /*#__PURE__*/React.createElement(Popover$1, {
@@ -26618,6 +26850,7 @@
 	    model: model,
 	    listCount: listCount,
 	    selections: selections,
+	    selectionState: selectionState$1,
 	    keyboard: {
 	      enabled: false
 	    },
@@ -26626,6 +26859,7 @@
 	    model: model,
 	    layout: layout,
 	    selections: selections,
+	    selectionState: selectionState$1,
 	    direction: "ltr",
 	    onSetListCount: c => setListCount(c)
 	  }))));
@@ -27885,6 +28119,16 @@
 	  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(drillDown(props)));
+
 	const addListboxTheme = themeApi => {
 	  const getListboxStyle = prop => themeApi.getStyle('object', '', "listBox.".concat(prop));
 	  return {
@@ -27904,29 +28148,86 @@
 	  };
 	};
 
+	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$1)(_ref => {
+	const StyledGrid$3 = styled$1(Grid$1, {
+	  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
 	    }
 	  };
 	});
@@ -27942,7 +28243,7 @@
 	  };
 	});
 	function ListBoxInline(_ref3) {
-	  var _layout$layoutOptions, _layout$layoutOptions2;
+	  var _layoutOptions$dense;
 	  let {
 	    options,
 	    layout
@@ -27951,7 +28252,6 @@
 	    app,
 	    direction,
 	    frequencyMode,
-	    listLayout,
 	    checkboxes,
 	    search = true,
 	    focusSearch = false,
@@ -27992,7 +28292,6 @@
 	    constraints
 	  } = reactExports.useContext(InstanceContext);
 	  theme.listBox = addListboxTheme(themeApi);
-	  const moreAlignTo = reactExports.useRef();
 	  const containerRef = reactExports.useRef();
 	  const [searchContainer, searchContainerRef] = useRefWithCallback();
 	  const [showToolbar, setShowToolbar] = reactExports.useState(false);
@@ -28010,6 +28309,8 @@
 	    stop: 0
 	  });
 	  const [appSelections] = useAppSelections(app);
+	  const titleRef = reactExports.useRef(null);
+	  const [selectionState$1] = reactExports.useState(() => selectionState());
 	  const {
 	    handleKeyDown,
 	    handleOnMouseEnter,
@@ -28035,6 +28336,7 @@
 	  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) !== '';
 	  reactExports.useEffect(() => {
 	    const show = () => {
@@ -28051,15 +28353,15 @@
 	    };
 	    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]);
@@ -28077,17 +28379,23 @@
 	    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
@@ -28096,13 +28404,34 @@
 	    const newValue = !showSearch;
 	    setShowSearch(newValue);
 	  };
+	  const getActionToolbarProps = isPopover => getListboxActionProps({
+	    isPopover,
+	    showToolbar,
+	    containerRef,
+	    isLocked,
+	    listboxSelectionToolbarItems,
+	    selections
+	  });
 	  const shouldAutoFocus = searchVisible && search === 'toggle';
-	  return /*#__PURE__*/React.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.createElement(React.Fragment, null, toolbarDetachedOnly && /*#__PURE__*/React.createElement(ActionsToolbar, getActionToolbarProps(true)), /*#__PURE__*/React.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"),
@@ -28116,70 +28445,69 @@
 	    item: true,
 	    container: true,
 	    style: {
-	      padding: theme.spacing(1)
+	      padding: theme.spacing(1),
+	      paddingLeft: "".concat(headerPaddingLeft, "px")
 	    },
 	    wrap: "nowrap"
 	  }, /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
+	    height: headerHeight,
 	    wrap: "nowrap"
-	  }, /*#__PURE__*/React.createElement(Grid$1, {
+	  }, showIcons && /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    sx: {
 	      display: 'flex',
 	      alignItems: 'center',
-	      width: searchIconWidth
+	      width: iconsWidth
 	    }
 	  }, isLocked ? /*#__PURE__*/React.createElement(IconButton$1, {
 	    tabIndex: -1,
 	    onClick: unlock,
-	    disabled: !isLocked,
+	    disabled: selectDisabled(),
 	    size: "large"
 	  }, /*#__PURE__*/React.createElement(Lock, {
 	    title: translator.get('Listbox.Unlock'),
+	    disableRipple: true,
 	    style: {
 	      fontSize: '12px'
 	    }
-	  })) : searchEnabled !== false && /*#__PURE__*/React.createElement(IconButton$1, {
+	  })) : showSearchIcon && /*#__PURE__*/React.createElement(IconButton$1, {
 	    onClick: onShowSearch,
 	    tabIndex: -1,
 	    title: translator.get('Listbox.Search'),
-	    size: "large"
+	    size: "large",
+	    disableRipple: true,
+	    "data-testid": "search-toggle-btn"
 	  }, /*#__PURE__*/React.createElement(SearchIcon, {
 	    style: {
 	      fontSize: '12px'
 	    }
-	  }))), /*#__PURE__*/React.createElement(Grid$1, {
+	  })), isDrillDown && /*#__PURE__*/React.createElement(DrillDownIcon, {
+	    tabIndex: -1,
+	    title: translator.get('Listbox.DrillDown'),
+	    size: "large",
+	    style: {
+	      fontSize: '12px'
+	    }
+	  })), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    className: classes$4.listBoxHeader
 	  }, /*#__PURE__*/React.createElement(Title, {
 	    variant: "h6",
-	    noWrap: true
+	    noWrap: true,
+	    ref: titleRef,
+	    title: layout.title
 	  }, layout.title))), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    xs: true
 	  }), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true
-	  }, /*#__PURE__*/React.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.createElement(Grid$1, {
+	  }, /*#__PURE__*/React.createElement(ActionsToolbar, getActionToolbarProps(showToolbarDetached({
+	    containerRef,
+	    titleRef,
+	    iconsWidth
+	  }))))), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
 	    direction: "column",
@@ -28189,15 +28517,14 @@
 	    },
 	    role: "region",
 	    "aria-label": translator.get('Listbox.ResultFilterLabel')
-	  }, /*#__PURE__*/React.createElement("div", {
-	    ref: moreAlignTo
-	  }), /*#__PURE__*/React.createElement(Grid$1, {
+	  }, /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    ref: searchContainerRef
 	  }, /*#__PURE__*/React.createElement("div", {
 	    className: classes$4.screenReaderOnly
 	  }, translator.get('Listbox.Search.ScreenReaderInstructions')), /*#__PURE__*/React.createElement(ListBoxSearch, {
 	    selections: selections,
+	    selectionState: selectionState$1,
 	    model: model,
 	    dense: dense,
 	    keyboard: keyboard,
@@ -28209,7 +28536,8 @@
 	    searchEnabled: searchEnabled
 	  })), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
-	    xs: true
+	    xs: true,
+	    className: classes$4.listboxWrapper
 	  }, /*#__PURE__*/React.createElement("div", {
 	    className: classes$4.screenReaderOnly
 	  }, translator.get('Listbox.ScreenReaderInstructions')), /*#__PURE__*/React.createElement(AutoSizer, null, _ref4 => {
@@ -28219,10 +28547,11 @@
 	    } = _ref4;
 	    return /*#__PURE__*/React.createElement(ListBox, {
 	      model: model,
+	      constraints: constraints,
 	      layout: layout,
 	      selections: selections,
+	      selectionState: selectionState$1,
 	      direction: direction,
-	      listLayout: listLayout,
 	      frequencyMode: frequencyMode,
 	      rangeSelect: rangeSelect,
 	      checkboxes: checkboxes,
@@ -28249,7 +28578,7 @@
 	        set: setCurrentScrollIndex
 	      }
 	    });
-	  }))));
+	  })))));
 	}
 	const ListBoxInlineMemoed = React.memo(ListBoxInline);
 	function IsolateUseLayoutWrapper(_ref5) {
@@ -28291,6 +28620,9 @@
 	      } else {
 	        const m = await app.getObject(qId);
 	        modelStore.set(m.id, m);
+	        m.once('closed', () => {
+	          modelStore.clear(m.id);
+	        });
 	        setModel(m);
 	      }
 	    }
@@ -28344,6 +28676,7 @@
 	  const {
 	    dense,
 	    checkboxes,
+	    listLayout,
 	    properties = {}
 	  } = options;
 	  let {
@@ -28372,6 +28705,20 @@
 	      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 = reactExports.useRef();
 	  if (!id.current) {
 	    id.current = uid();
@@ -28384,6 +28731,7 @@
 	    qListObjectDef: {
 	      qStateName: stateName,
 	      qShowAlternatives: true,
+	      frequencyEnabled: false,
 	      qFrequencyMode: getListdefFrequencyMode(),
 	      qInitialDataFetch: [{
 	        qTop: 0,
@@ -28402,9 +28750,7 @@
 	    },
 	    histogram,
 	    checkboxes,
-	    layoutOptions: {
-	      dense
-	    },
+	    layoutOptions,
 	    title
 	  };
 	  extend$1(true, listdef, properties);
@@ -28526,7 +28872,7 @@
 	    options
 	  });
 	  const elementRef = reactExports.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 = reactExports.useMemo(() => _objectSpread2(_objectSpread2({}, options), {}, {
 	    selections,
 	    model,