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

package/core/esm/dev.js

@@ -1,14 +1,14 @@
 /*
-* @nebula.js/stardust v3.3.0-alpha.0
+* @nebula.js/stardust v4.0.0-alpha.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
 
 import * as React from 'react';
-import React__default, { useState as useState$1, useEffect as useEffect$1, useReducer, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, createElement, useContext } from 'react';
+import React__default, { useState as useState$1, useEffect as useEffect$1, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useReducer, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, createElement, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { CacheProvider, ThemeContext as ThemeContext$2 } from '@emotion/react';
-import { Checkbox, Radio, Grid, Typography, FormControlLabel, Tooltip, Paper, IconButton, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Box, Icon, CircularProgress } from '@mui/material';
+import { Checkbox, Radio, Typography, FormControlLabel, Grid, Tooltip, Paper, IconButton, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Box, Icon, CircularProgress } from '@mui/material';
 import styled$3 from '@emotion/styled';
 
 function getAugmentedNamespace(n) {
@@ -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++) {
@@ -7972,7 +7987,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "c721" ;
+const NEBULA_VERSION_HASH = "b1a6" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8027,6 +8042,220 @@ var createKeyStore = (function () {
   return [useKeyStore, store];
 });
 
+const [useAppSelectionsStore, appSelectionsStore] = createKeyStore({});
+const [useAppModalStore, appModalStore] = createKeyStore({});
+const [useObjectSelectionsStore, objectSelectionsStore] = createKeyStore({});
+const [useModalObjectStore, modalObjectStore] = createKeyStore({});
+
+/* eslint no-underscore-dangle: 0 */
+function createAppSelections(_ref) {
+  let {
+    app
+  } = _ref;
+  const key = "".concat(app.id);
+  const end = async function () {
+    let accept = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    const model = modalObjectStore.get(key);
+    if (model) {
+      await model.endSelections(accept);
+      modalObjectStore.clear(key);
+      const objectSelections = objectSelectionsStore.get(model.id);
+      objectSelections.emit('deactivated');
+    }
+  };
+  const begin = async function (model, path) {
+    let accept = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    // Quick return if it's already in modal
+    if (model === modalObjectStore.get(key)) {
+      return;
+    }
+
+    // If other model is in modal state end it
+    end(accept);
+
+    // Pending modal
+    modalObjectStore.set(key, model);
+    const p = Array.isArray(path) ? path : [path];
+    const beginSelections = async skipRetry => {
+      try {
+        await model.beginSelections(p);
+        modalObjectStore.set(key, model); // We have a modal
+      } catch (err) {
+        if (err.code === 6003 && !skipRetry) {
+          await app.abortModal(accept);
+          beginSelections(true);
+        } else {
+          modalObjectStore.clear(key); // No modal
+        }
+      }
+    };
+
+    await beginSelections();
+  };
+  const appModal = {
+    begin,
+    end
+  };
+  appModalStore.set(key, appModal);
+
+  /**
+   * @class
+   * @alias AppSelections
+   */
+  const appSelections = {
+    model: app,
+    isInModal() {
+      return !!modalObjectStore.get(key);
+    },
+    isModal(object) {
+      // TODO check model state
+      return object ? modalObjectStore.get(key) === object : !!modalObjectStore.get(key);
+    },
+    forward() {
+      return appModal.end().then(() => app.forward());
+    },
+    back() {
+      return appModal.end().then(() => app.back());
+    },
+    clear() {
+      return appModal.end().then(() => app.clearAll());
+    },
+    clearField(field) {
+      let state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '$';
+      return appModal.end().then(() => app.getField(field, state).then(f => f.clear()));
+    }
+  };
+  return appSelections;
+}
+function useAppSelections(app) {
+  if (!app.session) {
+    // assume the app is mocked if session is undefined
+    return [];
+  }
+  const [appSelectionsStore] = useAppSelectionsStore();
+  const key = app ? app.id : null;
+  let appSelections = appSelectionsStore.get(key);
+  useEffect$1(() => {
+    if (!app || appSelections) return;
+    appSelections = createAppSelections({
+      app
+    });
+    appSelectionsStore.set(key, appSelections);
+    appSelectionsStore.dispatch(true);
+  }, [app]);
+  return [appSelections];
+}
+
+const NebulaApp = forwardRef((_ref, ref) => {
+  let {
+    initialContext,
+    app,
+    renderCallback
+  } = _ref;
+  const [appSelections] = useAppSelections(app);
+  const [context, setContext] = useState$1(initialContext);
+  const [muiThemeName, setMuiThemeName] = useState$1();
+  const {
+    theme
+  } = useMemo$1(() => ({
+    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, () => ({
+    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, {
+    theme: theme
+  }, /*#__PURE__*/React__default.createElement(InstanceContext.Provider, {
+    value: context
+  }, components)));
+});
+function boot(_ref2) {
+  let {
+    app,
+    context
+  } = _ref2;
+  let resolveRender;
+  const rendered = new Promise(resolve => {
+    resolveRender = resolve;
+  });
+  const appRef = React__default.createRef();
+  const element = document.createElement('div');
+  element.style.display = 'none';
+  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.0" );
+  element.setAttribute('data-app-id', app.id);
+  document.body.appendChild(element);
+  const root = client.createRoot(element);
+  root.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
+    ref: appRef,
+    app: app,
+    initialContext: context,
+    renderCallback: resolveRender
+  }));
+  const cells = {};
+  const components = [];
+  return [{
+    toggleFocusOfCells(cellIdToFocus) {
+      Object.keys(cells).forEach(i => {
+        cells[i].current.toggleFocus(i === cellIdToFocus);
+      });
+    },
+    cells,
+    addCell(id, cell) {
+      cells[id] = cell;
+    },
+    removeCell(id) {
+      delete cells[id];
+    },
+    add(component) {
+      (async () => {
+        await rendered;
+        components.push(component);
+        appRef.current.setComps(components);
+      })();
+    },
+    remove(component) {
+      (async () => {
+        await rendered;
+        const ix = components.indexOf(component);
+        if (ix !== -1) {
+          components.splice(ix, 1);
+        }
+        appRef.current.setComps(components);
+      })();
+    },
+    setMuiThemeName(themeName) {
+      (async () => {
+        await rendered;
+        appRef.current.setMuiThemeName(themeName);
+      })();
+    },
+    context(ctx) {
+      (async () => {
+        await rendered;
+        appRef.current.setContext(ctx);
+      })();
+    },
+    getAppSelections: async () => {
+      await rendered;
+      return appRef.current.getAppSelections();
+    }
+  }, appRef, rendered];
+}
+
 const [useRpcResultStore, rpcResultStore] = createKeyStore({});
 const [useRpcRequestStore, rpcRequestStore] = createKeyStore({});
 const [useRpcRequestSessionModelStore, rpcRequestSessionModelStore] = createKeyStore({});
@@ -8079,6 +8308,51 @@ const subscribe = model => {
   };
 };
 
+function useSessionModel(definition, app) {
+  const key = app ? "".concat(app.id, "/").concat(JSON.stringify(definition)) : null;
+  const [modelStore] = useModelStore();
+  const [rpcRequestSessionModelStore] = useRpcRequestSessionModelStore();
+  const [model, setModel] = useState$1();
+  let rpcShared;
+  if (key) {
+    rpcShared = rpcRequestSessionModelStore.get(key);
+  }
+  for (var _len = arguments.length, deps = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    deps[_key - 2] = arguments[_key];
+  }
+  useEffect$1(() => {
+    if (!app) {
+      return;
+    }
+    // Create new session object
+    const create = async () => {
+      if (!rpcShared) {
+        const rpc = app.createSessionObject(definition);
+        rpcShared = rpc;
+        rpcRequestSessionModelStore.set(key, rpcShared);
+      }
+      const newModel = await rpcShared;
+      modelStore.set(key, newModel);
+      setModel(newModel);
+    };
+    create();
+  }, [app, ...deps]);
+  return [model];
+}
+
+const definition = {
+  qInfo: {
+    qType: 'current-selections'
+  },
+  qSelectionObjectDef: {
+    qStateName: '$'
+  },
+  alternateStates: []
+};
+function useCurrentSelectionsModel(app) {
+  return useSessionModel(definition, app);
+}
+
 const rpcReducer = (state, action) => {
   const {
     rpcResultStore,
@@ -8230,454 +8504,140 @@ function useAppLayout$1(model) {
   return useRpc(model, 'getAppLayout');
 }
 
-function useSessionModel(definition, app) {
-  const key = app ? "".concat(app.id, "/").concat(JSON.stringify(definition)) : null;
-  const [modelStore] = useModelStore();
-  const [rpcRequestSessionModelStore] = useRpcRequestSessionModelStore();
-  const [model, setModel] = useState$1();
-  let rpcShared;
-  if (key) {
-    rpcShared = rpcRequestSessionModelStore.get(key);
-  }
-  for (var _len = arguments.length, deps = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    deps[_key - 2] = arguments[_key];
-  }
-  useEffect$1(() => {
-    if (!app) {
-      return;
+function useRect$1() {
+  const [node, setNode] = useState$1();
+  const [rect, setRect] = useState$1();
+  const callbackRef = useCallback(ref => {
+    if (!ref) {
+      return;
     }
-    // Create new session object
-    const create = async () => {
-      if (!rpcShared) {
-        const rpc = app.createSessionObject(definition);
-        rpcShared = rpc;
-        rpcRequestSessionModelStore.set(key, rpcShared);
-      }
-      const newModel = await rpcShared;
-      modelStore.set(key, newModel);
-      setModel(newModel);
+    setNode(ref);
+  }, []);
+  const handleResize = () => {
+    const {
+      left,
+      top,
+      width,
+      height
+    } = node.getBoundingClientRect();
+    setRect({
+      left,
+      top,
+      width,
+      height
+    });
+  };
+  useLayoutEffect$1(() => {
+    if (!node) {
+      return undefined;
+    }
+    if (typeof ResizeObserver === 'function') {
+      let resizeObserver = new ResizeObserver(handleResize);
+      resizeObserver.observe(node);
+      return () => {
+        resizeObserver.unobserve(node);
+        resizeObserver.disconnect(node);
+        resizeObserver = null;
+      };
+    }
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
     };
-    create();
-  }, [app, ...deps]);
-  return [model];
-}
-
-const definition = {
-  qInfo: {
-    qType: 'current-selections'
-  },
-  qSelectionObjectDef: {
-    qStateName: '$'
-  },
-  alternateStates: []
-};
-function useCurrentSelectionsModel(app) {
-  return useSessionModel(definition, app);
+  }, [node]);
+  return [callbackRef, rect, node];
 }
 
-const patchAlternateState = (currentSelectionsModel, currentSelectionsLayout, appLayout) => {
-  const states = [...(appLayout.qStateNames || [])].map(s => ({
-    stateName: s,
-    // need this as reference in selection toolbar since qSelectionObject.qStateName is not in the layout
-    qSelectionObjectDef: {
-      qStateName: s
-    }
-  }));
-  const existingStates = (currentSelectionsLayout && currentSelectionsLayout.alternateStates ? currentSelectionsLayout.alternateStates.map(s => s.stateName) : []).join('::');
-  const newStates = (appLayout.qStateNames || []).map(s => s).join('::');
-  if (existingStates !== newStates) {
-    currentSelectionsModel.applyPatches([{
-      qOp: 'replace',
-      qPath: '/alternateStates',
-      qValue: JSON.stringify(states)
-    }], true);
+function getFontSize(size) {
+  if (size === 'large') {
+    return '20px';
   }
-};
-function useAppSelectionsNavigation(app) {
-  const [currentSelectionsModel] = useCurrentSelectionsModel(app);
-  const [currentSelectionsLayout] = useLayout$1(currentSelectionsModel);
-  const [appLayout] = useAppLayout$1(app);
-  const [navigationState, setNavigationState] = useState$1(null);
-  useEffect$1(() => {
-    if (!appLayout || !currentSelectionsModel || !currentSelectionsLayout) return;
-    patchAlternateState(currentSelectionsModel, currentSelectionsLayout, appLayout);
-  }, [appLayout, currentSelectionsModel, currentSelectionsLayout]);
-  useEffect$1(() => {
-    if (!currentSelectionsLayout) return;
-    let canGoBack = false;
-    let canGoForward = false;
-    let canClear = false;
-    [currentSelectionsLayout, ...(currentSelectionsLayout.alternateStates || [])].forEach(state => {
-      canGoBack = canGoBack || state.qSelectionObject && state.qSelectionObject.qBackCount > 0;
-      canGoForward = canGoForward || state.qSelectionObject && state.qSelectionObject.qForwardCount > 0;
-      canClear = canClear || (state.qSelectionObject && state.qSelectionObject.qSelections || []).filter(s => s.qLocked !== true).length > 0;
-    });
-    setNavigationState({
-      canGoBack,
-      canGoForward,
-      canClear
-    });
-  }, [currentSelectionsLayout]);
-  return [navigationState, currentSelectionsModel, currentSelectionsLayout];
+  if (size === 'small') {
+    return '12px';
+  }
+  return '16px';
 }
-
-const [useAppSelectionsStore, appSelectionsStore] = createKeyStore({});
-const [useAppModalStore, appModalStore] = createKeyStore({});
-const [useObjectSelectionsStore, objectSelectionsStore] = createKeyStore({});
-const [useModalObjectStore, modalObjectStore] = createKeyStore({});
-
-/* eslint no-underscore-dangle: 0 */
-function createAppSelections(_ref) {
+function SvgIcon$2(_ref) {
   let {
-    app,
-    currentSelectionsLayout,
-    navState
+    size,
+    style = {},
+    viewBox = '0 0 16 16',
+    shapes = []
   } = _ref;
-  const key = "".concat(app.id);
-  const end = async function () {
-    let accept = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    const model = modalObjectStore.get(key);
-    if (model) {
-      await model.endSelections(accept);
-      modalObjectStore.clear(key);
-      const objectSelections = objectSelectionsStore.get(model.id);
-      objectSelections.emit('deactivated');
+  const s = _objectSpread2({
+    fontSize: getFontSize(size),
+    display: 'inline-block',
+    fontStyle: 'normal',
+    lineHeight: '0',
+    textAlign: 'center',
+    textTransform: 'none',
+    verticalAlign: '-.125em',
+    textRendering: 'optimizeLegibility',
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale'
+  }, style);
+  return /*#__PURE__*/React__default.createElement("i", {
+    style: s
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: viewBox,
+    fill: "currentColor"
+  }, shapes.map((_ref2, ix) => {
+    let {
+      type: Type,
+      attrs
+    } = _ref2;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      React__default.createElement(Type, _extends$6({
+        key: ix
+      }, attrs))
+    );
+  })));
+}
+
+const remove = props => _objectSpread2(_objectSpread2({}, props), {}, {
+  shapes: [{
+    type: 'path',
+    attrs: {
+      d: 'M9.41421356,8 L11.8890873,5.52512627 C12.065864,5.34834957 12.0305087,4.95944084 11.8183766,4.74730881 L11.2526912,4.18162338 C11.0405592,3.96949135 10.6516504,3.93413601 10.4748737,4.1109127 L8,6.58578644 L5.52512627,4.1109127 C5.34834957,3.93413601 4.95944084,3.96949135 4.74730881,4.18162338 L4.25233406,4.67659813 C3.96949135,4.95944084 3.93413601,5.34834957 4.1109127,5.52512627 L6.58578644,8 L4.1109127,10.4748737 C3.93413601,10.6516504 3.96949135,11.0405592 4.18162338,11.2526912 L4.67659813,11.7476659 C4.95944084,12.0305087 5.34834957,12.065864 5.52512627,11.8890873 L8,9.41421356 L10.4748737,11.8890873 C10.6516504,12.065864 11.0405592,12.0305087 11.2526912,11.8183766 L11.8183766,11.2526912 C12.0305087,11.0405592 12.065864,10.6516504 11.8890873,10.4748737 L9.41421356,8 Z M8,0 C12.4,0 16,3.6 16,8 C16,12.4 12.4,16 8,16 C3.6,16 0,12.4 0,8 C0,3.6 3.6,0 8,0 Z'
     }
-  };
-  const begin = async function (model, path) {
-    let accept = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-    // Quick return if it's already in modal
-    if (model === modalObjectStore.get(key)) {
-      return;
+  }]
+});
+var Remove = (props => SvgIcon$2(remove(props)));
+
+const lock = props => _objectSpread2(_objectSpread2({}, props), {}, {
+  shapes: [{
+    type: 'path',
+    attrs: {
+      d: 'M8 10a1 1 0 0 1 .5 1.866v.634a.5.5 0 0 1-1 0v-.634A1 1 0 0 1 8 10ZM3.625 7.035A2 2 0 0 0 2 9v5a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9a2 2 0 0 0-1.625-1.965V5.383a4.375 4.375 0 0 0-8.75 0v1.652ZM3 9a1 1 0 0 1 .931-.998h8.138A1 1 0 0 1 13 9v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9Zm8.375-3.617V7h-6.75V5.383a3.375 3.375 0 0 1 6.75 0Z'
     }
+  }]
+});
+var Lock = (props => SvgIcon$2(lock(props)));
 
-    // If other model is in modal state end it
-    end(accept);
+const unlock = props => _objectSpread2(_objectSpread2({}, props), {}, {
+  shapes: [{
+    type: 'path',
+    attrs: {
+      d: 'M2.5,7 L11,7 C11.5522847,7 12,7.44771525 12,8 L12,15 C12,15.5522847 11.5522847,16 11,16 L1,16 C0.44771525,16 0,15.5522847 0,15 L0,8 C0,7.44771525 0.44771525,7 1,7 L1,4.98151367 C1,2.23029964 3.23857625,0 6,0 C8.4241995,0 10.4454541,1.71883353 10.9029715,4 L9.34209114,4 C8.9671727,2.54028848 7.9088888,1.5 6,1.5 C3.54860291,1.5 2.5,3.21561511 2.5,5.33193359 L2.5,7 Z'
+    }
+  }]
+});
+var Unlock = (props => SvgIcon$2(unlock(props)));
 
-    // Pending modal
-    modalObjectStore.set(key, model);
-    const p = Array.isArray(path) ? path : [path];
-    const beginSelections = async skipRetry => {
-      try {
-        await model.beginSelections(p);
-        modalObjectStore.set(key, model); // We have a modal
-      } catch (err) {
-        if (err.code === 6003 && !skipRetry) {
-          await app.abortModal(accept);
-          beginSelections(true);
-        } else {
-          modalObjectStore.clear(key); // No modal
-        }
-      }
-    };
+function isRangeVisible(_ref) {
+  var lastRenderedStartIndex = _ref.lastRenderedStartIndex,
+      lastRenderedStopIndex = _ref.lastRenderedStopIndex,
+      startIndex = _ref.startIndex,
+      stopIndex = _ref.stopIndex;
 
-    await beginSelections();
-  };
-  const appModal = {
-    begin,
-    end
-  };
-  appModalStore.set(key, appModal);
-
-  /**
-   * @class
-   * @alias AppSelections
-   */
-  const appSelections = {
-    model: app,
-    isInModal() {
-      return !!modalObjectStore.get(key);
-    },
-    isModal(object) {
-      // TODO check model state
-      return object ? modalObjectStore.get(key) === object : !!modalObjectStore.get(key);
-    },
-    canGoForward() {
-      return navState.canGoForward;
-    },
-    canGoBack() {
-      return navState.canGoBack;
-    },
-    canClear() {
-      return navState.canClear;
-    },
-    layout() {
-      return currentSelectionsLayout;
-    },
-    forward() {
-      return appModal.end().then(() => app.forward());
-    },
-    back() {
-      return appModal.end().then(() => app.back());
-    },
-    clear() {
-      return appModal.end().then(() => app.clearAll());
-    },
-    clearField(field) {
-      let state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '$';
-      return appModal.end().then(() => app.getField(field, state).then(f => f.clear()));
-    }
-  };
-  return appSelections;
-}
-function useAppSelections(app) {
-  if (!app.session) {
-    // assume the app is mocked if session is undefined
-    return [];
-  }
-  const [navState, currentSelectionsModel, currentSelectionsLayout] = useAppSelectionsNavigation(app);
-  const [appSelectionsStore] = useAppSelectionsStore();
-  const key = app ? app.id : null;
-  let appSelections = appSelectionsStore.get(key);
-  useEffect$1(() => {
-    if (!app || !currentSelectionsModel || !currentSelectionsLayout || !navState || appSelections) return;
-    appSelections = createAppSelections({
-      app,
-      currentSelectionsLayout,
-      navState
-    });
-    appSelectionsStore.set(key, appSelections);
-    appSelectionsStore.dispatch(true);
-  }, [app, currentSelectionsModel, currentSelectionsLayout, navState]);
-  return [appSelections, navState];
-}
-
-const NebulaApp = forwardRef((_ref, ref) => {
-  let {
-    initialContext,
-    app
-  } = _ref;
-  const [appSelections] = useAppSelections(app);
-  const [context, setContext] = useState$1(initialContext);
-  const [muiThemeName, setMuiThemeName] = useState$1();
-  const {
-    theme
-  } = useMemo$1(() => ({
-    theme: create$3(muiThemeName)
-  }), [muiThemeName]);
-  const [components, setComponents] = useState$1([]);
-  useImperativeHandle$1(ref, () => ({
-    addComponent(component) {
-      setComponents([...components, component]);
-    },
-    removeComponent(component) {
-      const ix = components.indexOf(component);
-      if (ix !== -1) {
-        components.splice(ix, 1);
-        setComponents([...components]);
-      }
-    },
-    setMuiThemeName,
-    setContext,
-    getAppSelections: () => appSelections
-  }));
-  return /*#__PURE__*/React__default.createElement(StyledEngineProvider, {
-    injectFirst: true
-  }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React__default.createElement(InstanceContext.Provider, {
-    value: context
-  }, components)));
-});
-function boot(_ref2) {
-  let {
-    app,
-    context
-  } = _ref2;
-  let resolveRender;
-  const rendered = new Promise(resolve => {
-    resolveRender = resolve;
-  });
-  const appRef = React__default.createRef();
-  const element = document.createElement('div');
-  element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "3.3.0-alpha.0" );
-  element.setAttribute('data-app-id', app.id);
-  document.body.appendChild(element);
-  ReactDOM.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
-    ref: appRef,
-    app: app,
-    initialContext: context
-  }), element, resolveRender);
-  const cells = {};
-  return [{
-    toggleFocusOfCells(cellIdToFocus) {
-      Object.keys(cells).forEach(i => {
-        cells[i].current.toggleFocus(i === cellIdToFocus);
-      });
-    },
-    cells,
-    addCell(id, cell) {
-      cells[id] = cell;
-    },
-    removeCell(id) {
-      delete cells[id];
-    },
-    add(component) {
-      (async () => {
-        await rendered;
-        appRef.current.addComponent(component);
-      })();
-    },
-    remove(component) {
-      (async () => {
-        await rendered;
-        appRef.current.removeComponent(component);
-      })();
-    },
-    setMuiThemeName(themeName) {
-      (async () => {
-        await rendered;
-        appRef.current.setMuiThemeName(themeName);
-      })();
-    },
-    context(ctx) {
-      (async () => {
-        await rendered;
-        appRef.current.setContext(ctx);
-      })();
-    },
-    getAppSelections: async () => {
-      await rendered;
-      return appRef.current.getAppSelections();
-    }
-  }, appRef, rendered];
-}
-
-function useRect$1() {
-  const [node, setNode] = useState$1();
-  const [rect, setRect] = useState$1();
-  const callbackRef = useCallback(ref => {
-    if (!ref) {
-      return;
-    }
-    setNode(ref);
-  }, []);
-  const handleResize = () => {
-    const {
-      left,
-      top,
-      width,
-      height
-    } = node.getBoundingClientRect();
-    setRect({
-      left,
-      top,
-      width,
-      height
-    });
-  };
-  useLayoutEffect$1(() => {
-    if (!node) {
-      return undefined;
-    }
-    if (typeof ResizeObserver === 'function') {
-      let resizeObserver = new ResizeObserver(handleResize);
-      resizeObserver.observe(node);
-      return () => {
-        resizeObserver.unobserve(node);
-        resizeObserver.disconnect(node);
-        resizeObserver = null;
-      };
-    }
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [node]);
-  return [callbackRef, rect, node];
-}
-
-function getFontSize(size) {
-  if (size === 'large') {
-    return '20px';
-  }
-  if (size === 'small') {
-    return '12px';
-  }
-  return '16px';
-}
-function SvgIcon$2(_ref) {
-  let {
-    size,
-    style = {},
-    viewBox = '0 0 16 16',
-    shapes = []
-  } = _ref;
-  const s = _objectSpread2({
-    fontSize: getFontSize(size),
-    display: 'inline-block',
-    fontStyle: 'normal',
-    lineHeight: '0',
-    textAlign: 'center',
-    textTransform: 'none',
-    verticalAlign: '-.125em',
-    textRendering: 'optimizeLegibility',
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale'
-  }, style);
-  return /*#__PURE__*/React__default.createElement("i", {
-    style: s
-  }, /*#__PURE__*/React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    viewBox: viewBox,
-    fill: "currentColor"
-  }, shapes.map((_ref2, ix) => {
-    let {
-      type: Type,
-      attrs
-    } = _ref2;
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      React__default.createElement(Type, _extends$6({
-        key: ix
-      }, attrs))
-    );
-  })));
-}
-
-const remove = props => _objectSpread2(_objectSpread2({}, props), {}, {
-  shapes: [{
-    type: 'path',
-    attrs: {
-      d: 'M9.41421356,8 L11.8890873,5.52512627 C12.065864,5.34834957 12.0305087,4.95944084 11.8183766,4.74730881 L11.2526912,4.18162338 C11.0405592,3.96949135 10.6516504,3.93413601 10.4748737,4.1109127 L8,6.58578644 L5.52512627,4.1109127 C5.34834957,3.93413601 4.95944084,3.96949135 4.74730881,4.18162338 L4.25233406,4.67659813 C3.96949135,4.95944084 3.93413601,5.34834957 4.1109127,5.52512627 L6.58578644,8 L4.1109127,10.4748737 C3.93413601,10.6516504 3.96949135,11.0405592 4.18162338,11.2526912 L4.67659813,11.7476659 C4.95944084,12.0305087 5.34834957,12.065864 5.52512627,11.8890873 L8,9.41421356 L10.4748737,11.8890873 C10.6516504,12.065864 11.0405592,12.0305087 11.2526912,11.8183766 L11.8183766,11.2526912 C12.0305087,11.0405592 12.065864,10.6516504 11.8890873,10.4748737 L9.41421356,8 Z M8,0 C12.4,0 16,3.6 16,8 C16,12.4 12.4,16 8,16 C3.6,16 0,12.4 0,8 C0,3.6 3.6,0 8,0 Z'
-    }
-  }]
-});
-var Remove = (props => SvgIcon$2(remove(props)));
-
-const lock = props => _objectSpread2(_objectSpread2({}, props), {}, {
-  shapes: [{
-    type: 'path',
-    attrs: {
-      d: 'M8 10a1 1 0 0 1 .5 1.866v.634a.5.5 0 0 1-1 0v-.634A1 1 0 0 1 8 10ZM3.625 7.035A2 2 0 0 0 2 9v5a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9a2 2 0 0 0-1.625-1.965V5.383a4.375 4.375 0 0 0-8.75 0v1.652ZM3 9a1 1 0 0 1 .931-.998h8.138A1 1 0 0 1 13 9v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9Zm8.375-3.617V7h-6.75V5.383a3.375 3.375 0 0 1 6.75 0Z'
-    }
-  }]
-});
-var Lock = (props => SvgIcon$2(lock(props)));
-
-const unlock = props => _objectSpread2(_objectSpread2({}, props), {}, {
-  shapes: [{
-    type: 'path',
-    attrs: {
-      d: 'M2.5,7 L11,7 C11.5522847,7 12,7.44771525 12,8 L12,15 C12,15.5522847 11.5522847,16 11,16 L1,16 C0.44771525,16 0,15.5522847 0,15 L0,8 C0,7.44771525 0.44771525,7 1,7 L1,4.98151367 C1,2.23029964 3.23857625,0 6,0 C8.4241995,0 10.4454541,1.71883353 10.9029715,4 L9.34209114,4 C8.9671727,2.54028848 7.9088888,1.5 6,1.5 C3.54860291,1.5 2.5,3.21561511 2.5,5.33193359 L2.5,7 Z'
-    }
-  }]
-});
-var Unlock = (props => SvgIcon$2(unlock(props)));
-
-function isRangeVisible(_ref) {
-  var lastRenderedStartIndex = _ref.lastRenderedStartIndex,
-      lastRenderedStopIndex = _ref.lastRenderedStopIndex,
-      startIndex = _ref.startIndex,
-      stopIndex = _ref.stopIndex;
-
-  return !(startIndex > lastRenderedStopIndex || stopIndex < lastRenderedStartIndex);
-}
+  return !(startIndex > lastRenderedStopIndex || stopIndex < lastRenderedStartIndex);
+}
 
 function scanForUnloadedRanges(_ref) {
   var isItemLoaded = _ref.isItemLoaded,
@@ -8927,9 +8887,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 [];
@@ -8943,45 +8900,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) {
@@ -9044,126 +8994,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 (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 (!currentSelect.current.active) {
       return;
     }
-    preSelect([elemNumber]);
-  }, [mouseDown, selectingValues, preSelected, selected, isRangeSelection, selectDisabled]);
+    currentSelect.current.active = false;
+    if (currentSelect.current.isRange) {
+      const elemNumber = +event.currentTarget.getAttribute('data-n');
+      addToRange(elemNumber);
+    }
+    doSelect();
+  }, []);
   const onMouseUpDoc = useCallback(() => {
     // 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 (!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 () => {
@@ -9171,25 +9127,24 @@ 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 onDeactivated = () => {
+      selectionState.clearItemStates(false);
+    };
+    const onCleared = () => {
+      selectionState.clearItemStates(true);
+      selectionState.triggerStateChanged();
+    };
+    selections.on('deactivated', onDeactivated);
+    selections.on('cleared', onCleared);
+    return () => {
+      selections.removeListener('activated', onDeactivated);
+      selections.removeListener('cleared', onCleared);
+    };
+  }, [selections]);
   const interactionEvents = {};
   if (checkboxes) {
     Object.assign(interactionEvents, {
-      onClick
+      onChange
     });
   } else {
     Object.assign(interactionEvents, {
@@ -9199,7 +9154,6 @@ function useSelectionsInteractions(_ref) {
     });
   }
   return {
-    instantPages,
     interactionEvents,
     select: selectManually // preselect and select without having to trigger an event
   };
@@ -9215,102 +9169,6 @@ const tick = props => _objectSpread2(_objectSpread2({}, props), {}, {
 });
 var Tick = (props => SvgIcon$2(tick(props)));
 
-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\")";
-
-const PREFIX$c = 'ListBoxCheckbox';
-const borderRadius = 3;
-const classes$c = {
-  cbIcon: "".concat(PREFIX$c, "-cbIcon"),
-  cbIconChecked: "".concat(PREFIX$c, "-cbIconChecked"),
-  cbIconExcluded: "".concat(PREFIX$c, "-cbIconExcluded"),
-  cbIconAlternative: "".concat(PREFIX$c, "-cbIconAlternative"),
-  checkbox: "".concat(PREFIX$c, "-checkbox"),
-  dense: "".concat(PREFIX$c, "-dense")
-};
-const StyledCheckbox = styled$1(Checkbox)(_ref => {
-  let {
-    theme
-  } = _ref;
-  return {
-    ["& .".concat(classes$c.cbIcon)]: {
-      borderRadius,
-      width: 16,
-      height: 16,
-      boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
-      backgroundColor: '#f5f8fa',
-      backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    ["& .".concat(classes$c.cbIconChecked)]: {
-      borderRadius,
-      backgroundColor: theme.palette.selected.main,
-      backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-      '&:before': {
-        display: 'block',
-        width: 16,
-        height: 16,
-        backgroundImage: CheckboxChecked,
-        content: '""'
-      }
-    },
-    ["& .".concat(classes$c.cbIconExcluded)]: {
-      borderRadius: borderRadius - 1,
-      width: 12,
-      height: 12,
-      backgroundColor: theme.palette.selected.excluded
-    },
-    ["& .".concat(classes$c.cbIconAlternative)]: {
-      borderRadius: borderRadius - 1,
-      width: 12,
-      height: 12,
-      backgroundColor: theme.palette.selected.alternative
-    },
-    ["&.".concat(classes$c.checkbox)]: {
-      margin: 0,
-      '&:hover': {
-        backgroundColor: 'inherit !important'
-      }
-    },
-    ["&.".concat(classes$c.dense)]: {
-      padding: '4px 8px'
-    }
-  };
-});
-const getIcon = function (cls) {
-  let showGray = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  let excluded = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  return /*#__PURE__*/React__default.createElement("span", {
-    className: cls.cbIcon
-  }, excluded && /*#__PURE__*/React__default.createElement("span", {
-    className: showGray && excluded ? cls.cbIconExcluded : ''
-  }));
-};
-function ListboxCheckbox(_ref2) {
-  let {
-    checked,
-    label,
-    dense,
-    excluded,
-    showGray = true
-  } = _ref2;
-  return /*#__PURE__*/React__default.createElement(StyledCheckbox, {
-    edge: "start",
-    checked: checked,
-    disableRipple: true,
-    className: [classes$c.checkbox, dense && classes$c.dense].filter(Boolean).join(' '),
-    inputProps: {
-      'aria-labelledby': label
-    },
-    name: label,
-    icon: getIcon(classes$c, showGray, excluded),
-    checkedIcon: /*#__PURE__*/React__default.createElement("span", {
-      className: classes$c.cbIconChecked
-    })
-  });
-}
-
 /**
  * @ignore
  * @interface Range
@@ -9375,45 +9233,6 @@ function getSegmentsFromRanges(label, ranges) {
   return labels;
 }
 
-const PREFIX$b = 'ListBoxRadioButton';
-const classes$b = {
-  denseRadioButton: "".concat(PREFIX$b, "-denseRadioButton"),
-  radioButton: "".concat(PREFIX$b, "-radioButton")
-};
-const StyledRadio = styled$1(Radio)(_ref => {
-  let {
-    theme,
-    checked
-  } = _ref;
-  return {
-    ["&.".concat(classes$b.radioButton)]: {
-      right: '5px',
-      color: checked ? theme.palette.selected.main : theme.palette.main
-    }
-  };
-});
-function ListBoxRadioButton(_ref2) {
-  let {
-    checked,
-    label,
-    dense
-  } = _ref2;
-  return /*#__PURE__*/React__default.createElement(StyledRadio, {
-    checked: checked,
-    value: label,
-    name: label,
-    className: classes$b.radioButton,
-    style: {
-      backgroundColor: 'transparent'
-    },
-    disableRipple: true,
-    size: dense ? 'small' : 'medium',
-    sx: dense && {
-      padding: '0px 0px 0px 12px'
-    }
-  });
-}
-
 const KEYS = Object.freeze({
   ENTER: 13,
   ESCAPE: 27,
@@ -9639,12 +9458,691 @@ function getListboxInlineKeyboardNavigation(_ref2) {
       setHovering(false);
       containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : (_containerRef$current4 = _containerRef$current3.blur) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.call(_containerRef$current3);
     }
-  };
-  return {
-    handleKeyDown,
-    handleOnMouseEnter,
-    handleOnMouseLeave
-  };
+  };
+  return {
+    handleKeyDown,
+    handleOnMouseEnter,
+    handleOnMouseLeave
+  };
+}
+
+const PREFIX$c = 'RowColumn';
+const rowColClasses = {
+  row: "".concat(PREFIX$c, "-row"),
+  rowBorderBottom: "".concat(PREFIX$c, "-rowBorderBottom"),
+  column: "".concat(PREFIX$c, "-column"),
+  fieldRoot: "".concat(PREFIX$c, "-fieldRoot"),
+  cell: "".concat(PREFIX$c, "-cell"),
+  labelText: "".concat(PREFIX$c, "-labelText"),
+  labelDense: "".concat(PREFIX$c, "-labelDense"),
+  highlighted: "".concat(PREFIX$c, "-highlighted"),
+  checkboxLabel: "".concat(PREFIX$c, "-checkboxLabel"),
+  icon: "".concat(PREFIX$c, "-icon"),
+  S: "".concat(PREFIX$c, "-S"),
+  XS: "".concat(PREFIX$c, "-XS"),
+  A: "".concat(PREFIX$c, "-A"),
+  X: "".concat(PREFIX$c, "-X"),
+  frequencyCount: "".concat(PREFIX$c, "-frequencyCount"),
+  barContainer: "".concat(PREFIX$c, "-barContainer"),
+  bar: "".concat(PREFIX$c, "-bar"),
+  barSelected: "".concat(PREFIX$c, "-barSelected"),
+  barWithCheckbox: "".concat(PREFIX$c, "-barWithCheckbox"),
+  barSelectedWithCheckbox: "".concat(PREFIX$c, "-barSelectedWithCheckbox"),
+  excludedTextWithCheckbox: "".concat(PREFIX$c, "-excludedTextWithCheckbox")
+};
+
+const isExcluded = c => c ? c.qState === 'X' || c.qState === 'XS' || c.qState === 'XL' : null;
+const isAlternative = c => c ? c.qState === 'A' : null;
+const excludedOrAlternative = _ref => {
+  let {
+    cell,
+    checkboxes
+  } = _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;
+const barBorderWidthPx = 1;
+const barWithCheckboxLeftPadPx = 29;
+
+const joinClassNames = namesArray => namesArray.filter(c => !!c).join(' ').trim();
+const getBarWidth = _ref => {
+  let {
+    qFrequency,
+    checkboxes,
+    frequencyMax
+  } = _ref;
+  const freqStr = String(qFrequency);
+  const isPercent = freqStr.substring(freqStr.length - 1) === '%';
+  const freq = parseFloat(isPercent ? freqStr : qFrequency);
+  const rightSlice = checkboxes ? "(".concat(barWithCheckboxLeftPadPx, "px + ").concat(barPadPx + barBorderWidthPx * 2, "px)") : "".concat(barPadPx * 2 + barBorderWidthPx * 2, "px");
+  const width = isPercent ? freq : freq / frequencyMax * 100;
+  return "calc(".concat(width, "% - ").concat(rightSlice, ")");
+};
+const getFrequencyText = _ref2 => {
+  let {
+    cell
+  } = _ref2;
+  if (cell) {
+    return cell.qFrequency ? cell.qFrequency : frequencyTextNone;
+  }
+  return '';
+};
+
+const ICON_PADDING = 7;
+const CELL_PADDING_LEFT = 9;
+
+const getSelectedStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    background: theme.palette.selected.main,
+    color: theme.palette.selected.mainContrastText,
+    '&:focus': {
+      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder),
+      outline: 'none'
+    },
+    '& $cell': {
+      paddingRight: 0
+    }
+  };
+};
+const ellipsis = {
+  width: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+};
+const RowColRoot = styled$1('div', {
+  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 {
+    theme,
+    flexBasisProp,
+    isGridMode,
+    isGridCol,
+    dense,
+    frequencyWidth
+  } = _ref2;
+  return {
+    '&:focus': {
+      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
+    },
+    '&:focus-visible': {
+      outline: 'none'
+    },
+    ["& .".concat(rowColClasses.row)]: {
+      flexWrap: 'nowrap',
+      color: (_theme$listBox$conten = (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : (_theme$listBox$conten2 = _theme$listBox.content) === null || _theme$listBox$conten2 === void 0 ? void 0 : _theme$listBox$conten2.color) !== null && _theme$listBox$conten !== void 0 ? _theme$listBox$conten : theme.palette.text.primary
+    },
+    ["& .".concat(rowColClasses.rowBorderBottom)]: {
+      borderBottom: isGridCol ? 'none' : "1px solid ".concat(theme.palette.divider),
+      borderLeft: isGridCol ? "1px solid ".concat(theme.palette.divider) : 'none'
+    },
+    ["& .".concat(rowColClasses.column)]: {
+      flexWrap: 'nowrap',
+      borderRight: "1px solid ".concat(theme.palette.divider),
+      color: (_theme$listBox$conten3 = (_theme$listBox2 = theme.listBox) === null || _theme$listBox2 === void 0 ? void 0 : (_theme$listBox2$conte = _theme$listBox2.content) === null || _theme$listBox2$conte === void 0 ? void 0 : _theme$listBox2$conte.color) !== null && _theme$listBox$conten3 !== void 0 ? _theme$listBox$conten3 : theme.palette.text.primary
+    },
+    // The interior wrapper for all field content.
+    ["& .".concat(rowColClasses.cell)]: {
+      display: 'flex',
+      alignItems: 'center',
+      minWidth: 0,
+      flexGrow: 1,
+      // Note that this padding is overridden when using checkboxes.
+      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
+      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
+    }),
+    ["& .".concat(rowColClasses.labelDense)]: {
+      fontSize: 12
+    },
+    // Highlight is added to labelText spans, which are created as siblings to original labelText,
+    // when a search string is matched.
+    ["& .".concat(rowColClasses.highlighted)]: {
+      overflow: 'visible',
+      width: '100%',
+      '& > span': {
+        width: '100%',
+        backgroundColor: '#FFC72A'
+      }
+    },
+    // Checkbox and label container.
+    ["& .".concat(rowColClasses.checkboxLabel)]: {
+      margin: 0,
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden',
+      // The checkbox's span
+      '& > span:nth-of-type(1)': {
+        paddingRight: '8px'
+      },
+      // The checkbox's label container.
+      '& > span:nth-of-type(2)': _objectSpread2(_objectSpread2({}, ellipsis), {}, {
+        display: 'flex',
+        alignItems: 'center',
+        paddingLeft: 0,
+        paddingRight: '2px'
+      })
+    },
+    // The icons container holding tick and lock, shown inside fields.
+    ["& .".concat(rowColClasses.icon)]: {
+      display: 'flex',
+      justifyContent: 'center',
+      width: 24,
+      minWidth: 24,
+      maxWidth: 24
+    },
+    // Selection styles (S=Selected, XS=ExcludedSelected, A=Available, X=Excluded).
+    ["& .".concat(rowColClasses.S)]: _objectSpread2(_objectSpread2({}, getSelectedStyle({
+      theme
+    })), {}, {
+      border: isGridMode ? 'none' : undefined
+    }),
+    ["& .".concat(rowColClasses.XS)]: _objectSpread2(_objectSpread2({}, getSelectedStyle({
+      theme
+    })), {}, {
+      background: theme.palette.selected.excluded,
+      color: theme.palette.selected.mainContrastText,
+      border: isGridMode ? 'none' : undefined
+    }),
+    ["& .".concat(rowColClasses.A)]: {
+      background: theme.palette.selected.alternative,
+      color: theme.palette.selected.alternativeContrastText,
+      border: isGridMode ? 'none' : undefined
+    },
+    ["& .".concat(rowColClasses.X)]: {
+      background: theme.palette.selected.excluded,
+      color: theme.palette.selected.excludedContrastText,
+      border: isGridMode ? 'none' : undefined
+    },
+    ["& .".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',
+      alignItems: 'center'
+    },
+    ["& .".concat(rowColClasses.bar)]: {
+      border: "".concat(barBorderWidthPx, "px solid"),
+      borderColor: '#D9D9D9',
+      height: dense ? '16px' : '20px',
+      position: 'absolute',
+      zIndex: '-1',
+      alignSelf: 'center',
+      left: "".concat(barPadPx, "px"),
+      transition: 'width 0.2s',
+      backgroundColor: '#FAFAFA'
+    },
+    ["& .".concat(rowColClasses.barSelected)]: {
+      opacity: '30%',
+      zIndex: '0',
+      background: theme.palette.background.lighter
+    },
+    ["& .".concat(rowColClasses.barWithCheckbox)]: {
+      left: "".concat(barWithCheckboxLeftPadPx, "px")
+    },
+    ["& .".concat(rowColClasses.barSelectedWithCheckbox)]: {
+      background: '#BFE5D0',
+      borderColor: '#BFE5D0'
+    },
+    ["& .".concat(rowColClasses.excludedTextWithCheckbox)]: {
+      color: '#828282',
+      fontStyle: 'italic'
+    }
+  };
+});
+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\")";
+
+const PREFIX$b = 'ListBoxCheckbox';
+const borderRadius = 3;
+const classes$b = {
+  cbIcon: "".concat(PREFIX$b, "-cbIcon"),
+  cbIconChecked: "".concat(PREFIX$b, "-cbIconChecked"),
+  cbIconExcluded: "".concat(PREFIX$b, "-cbIconExcluded"),
+  cbIconAlternative: "".concat(PREFIX$b, "-cbIconAlternative"),
+  checkbox: "".concat(PREFIX$b, "-checkbox"),
+  dense: "".concat(PREFIX$b, "-dense")
+};
+const StyledCheckbox = styled$1(Checkbox)(_ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    ["& .".concat(classes$b.cbIcon)]: {
+      borderRadius,
+      width: 16,
+      height: 16,
+      boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
+      backgroundColor: '#f5f8fa',
+      backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    ["& .".concat(classes$b.cbIconChecked)]: {
+      borderRadius,
+      backgroundColor: theme.palette.selected.main,
+      backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+      '&:before': {
+        display: 'block',
+        width: 16,
+        height: 16,
+        backgroundImage: CheckboxChecked,
+        content: '""'
+      }
+    },
+    ["& .".concat(classes$b.cbIconExcluded)]: {
+      borderRadius: borderRadius - 1,
+      width: 12,
+      height: 12,
+      backgroundColor: theme.palette.selected.excluded
+    },
+    ["& .".concat(classes$b.cbIconAlternative)]: {
+      borderRadius: borderRadius - 1,
+      width: 12,
+      height: 12,
+      backgroundColor: theme.palette.selected.alternative
+    },
+    ["&.".concat(classes$b.checkbox)]: {
+      margin: 0,
+      '&:hover': {
+        backgroundColor: 'inherit !important'
+      }
+    },
+    ["&.".concat(classes$b.dense)]: {
+      padding: '4px 8px'
+    }
+  };
+});
+const getIcon = function (cls) {
+  let showGray = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  let excluded = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: cls.cbIcon
+  }, excluded && /*#__PURE__*/React__default.createElement("span", {
+    className: showGray && excluded ? cls.cbIconExcluded : ''
+  }));
+};
+function ListboxCheckbox(_ref2) {
+  let {
+    onChange,
+    checked,
+    label,
+    dense,
+    excluded,
+    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,
+      'data-n': dataN
+    },
+    name: label,
+    icon: getIcon(classes$b, showGray, excluded),
+    checkedIcon: /*#__PURE__*/React__default.createElement("span", {
+      className: classes$b.cbIconChecked
+    })
+  });
+}
+
+const PREFIX$a = 'ListBoxRadioButton';
+const classes$a = {
+  denseRadioButton: "".concat(PREFIX$a, "-denseRadioButton"),
+  radioButton: "".concat(PREFIX$a, "-radioButton")
+};
+const StyledRadio = styled$1(Radio)(_ref => {
+  let {
+    theme,
+    checked
+  } = _ref;
+  return {
+    ["&.".concat(classes$a.radioButton)]: {
+      right: '5px',
+      color: checked ? theme.palette.selected.main : theme.palette.main
+    }
+  };
+});
+function ListBoxRadioButton(_ref2) {
+  let {
+    onChange,
+    checked,
+    label,
+    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'
+    },
+    disableRipple: true,
+    size: dense ? 'small' : 'medium',
+    sx: dense && {
+      padding: '0px 0px 0px 12px'
+    }
+  });
+}
+
+function ValueField(_ref) {
+  let {
+    label,
+    color,
+    highlighted = false,
+    dense,
+    showGray = true,
+    checkboxes,
+    cell,
+    valueTextAlign
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(Typography, {
+    component: "span",
+    variant: "body2",
+    className: joinClassNames([rowColClasses.labelText, highlighted && rowColClasses.highlighted, dense && rowColClasses.labelDense, showGray && excludedOrAlternative({
+      cell,
+      checkboxes
+    }) && rowColClasses.excludedTextWithCheckbox]),
+    color: color,
+    align: valueTextAlign
+  }, /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      whiteSpace: 'pre'
+    }
+  }, label));
+}
+
+function LabelTag(_ref) {
+  let {
+    label,
+    color,
+    highlighted,
+    dense,
+    showGray,
+    checkboxes,
+    cell,
+    valueTextAlign
+  } = _ref;
+  if (typeof label === 'string') {
+    return /*#__PURE__*/React__default.createElement(ValueField, {
+      label: label,
+      color: color,
+      highlighted: highlighted,
+      dense: dense,
+      showGray: showGray,
+      checkboxes: checkboxes,
+      cell: cell,
+      valueTextAlign: valueTextAlign
+    });
+  }
+  return label;
+}
+
+function CheckboxField(_ref) {
+  let {
+    onChange,
+    label,
+    color,
+    qElemNumber,
+    isSelected,
+    dense,
+    cell,
+    isGridCol,
+    showGray,
+    isSingleSelect,
+    highlighted,
+    checkboxes,
+    valueTextAlign
+  } = _ref;
+  const cb = /*#__PURE__*/React__default.createElement(ListboxCheckbox, {
+    onChange: onChange,
+    label: label,
+    checked: isSelected,
+    dense: dense,
+    excluded: isExcluded(cell),
+    isGridCol: isGridCol,
+    showGray: showGray,
+    dataN: qElemNumber
+  });
+  const rb = /*#__PURE__*/React__default.createElement(ListBoxRadioButton, {
+    onChange: onChange,
+    label: label,
+    checked: isSelected,
+    dense: dense,
+    dataN: qElemNumber
+  });
+  return /*#__PURE__*/React__default.createElement(FormControlLabel, {
+    color: color,
+    control: isSingleSelect ? rb : cb,
+    className: rowColClasses.checkboxLabel,
+    label: /*#__PURE__*/React__default.createElement(LabelTag, {
+      label: label,
+      color: color,
+      highlighted: highlighted,
+      dense: dense,
+      showGray: showGray,
+      checkboxes: checkboxes,
+      cell: cell,
+      valueTextAlign: valueTextAlign
+    }),
+    key: qElemNumber
+  });
+}
+
+function LabelsWithRanges(_ref) {
+  let {
+    labels,
+    dense,
+    showGray,
+    checkboxes
+  } = _ref;
+  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: key,
+      highlighted: highlighted,
+      dense: dense,
+      showGray: showGray,
+      checkboxes: checkboxes
+    });
+  }));
+}
+function FieldWithRanges(_ref3) {
+  let {
+    onChange,
+    labels,
+    checkboxes,
+    dense,
+    showGray,
+    color,
+    qElemNumber,
+    isSelected,
+    cell,
+    isGridCol,
+    isSingleSelect,
+    valueTextAlign
+  } = _ref3;
+  const LWR = /*#__PURE__*/React__default.createElement(LabelsWithRanges, {
+    labels: labels,
+    dense: dense,
+    showGray: showGray,
+    checkboxes: checkboxes
+  });
+  return checkboxes ? /*#__PURE__*/React__default.createElement(CheckboxField, {
+    onChange: onChange,
+    label: LWR,
+    color: color,
+    qElemNumber: qElemNumber,
+    isSelected: isSelected,
+    dense: dense,
+    cell: cell,
+    isGridCol: isGridCol,
+    showGray: showGray,
+    isSingleSelect: isSingleSelect,
+    checkboxes: checkboxes,
+    valueTextAlign: valueTextAlign
+  }) : LWR;
+}
+
+function Field(_ref) {
+  let {
+    onChange,
+    label,
+    color,
+    qElemNumber,
+    isSelected,
+    dense,
+    cell,
+    isGridCol,
+    showGray,
+    isSingleSelect,
+    highlighted,
+    checkboxes,
+    valueTextAlign
+  } = _ref;
+  return checkboxes ? /*#__PURE__*/React__default.createElement(CheckboxField, {
+    onChange: onChange,
+    label: label,
+    color: color,
+    qElemNumber: qElemNumber,
+    isSelected: isSelected,
+    dense: dense,
+    cell: cell,
+    isGridCol: isGridCol,
+    showGray: showGray,
+    isSingleSelect: isSingleSelect,
+    highlighted: highlighted,
+    checkboxes: checkboxes,
+    valueTextAlign: valueTextAlign
+  }) : /*#__PURE__*/React__default.createElement(ValueField, {
+    label: label,
+    color: color,
+    highlighted: false,
+    dense: dense,
+    showGray: true,
+    checkboxes: checkboxes,
+    cell: cell,
+    valueTextAlign: valueTextAlign
+  });
+}
+var Field$1 = React__default.memo(Field);
+
+function Histogram(_ref) {
+  let {
+    cell,
+    histogram,
+    checkboxes,
+    isSelected,
+    frequencyMax
+  } = _ref;
+  const hasHistogramBar = cell && histogram && getFrequencyText({
+    cell
+  }) !== frequencyTextNone;
+  if (!hasHistogramBar) {
+    return undefined;
+  }
+  const width = getBarWidth({
+    qFrequency: cell.qFrequency,
+    checkboxes,
+    frequencyMax
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: joinClassNames([rowColClasses.bar, checkboxes && rowColClasses.barWithCheckbox, isSelected && (checkboxes ? rowColClasses.barSelectedWithCheckbox : rowColClasses.barSelected)]),
+    style: {
+      width
+    }
+  });
+}
+
+function Frequency(_ref) {
+  let {
+    cell,
+    checkboxes,
+    dense,
+    showGray
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    className: rowColClasses.frequencyCount
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    noWrap: true,
+    color: "inherit",
+    variant: "body2",
+    className: joinClassNames([dense && rowColClasses.labelDense, rowColClasses.labelText, showGray && excludedOrAlternative({
+      cell,
+      checkboxes
+    }) && rowColClasses.excludedTextWithCheckbox])
+  }, getFrequencyText({
+    cell
+  })));
 }
 
 function getGridItemSizes(_ref) {
@@ -9664,243 +10162,69 @@ 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 {};
   }
 }
 
-const PREFIX$a = 'RowColumn';
-const classes$a = {
-  row: "".concat(PREFIX$a, "-row"),
-  rowBorderBottom: "".concat(PREFIX$a, "-rowBorderBottom"),
-  column: "".concat(PREFIX$a, "-column"),
-  fieldRoot: "".concat(PREFIX$a, "-fieldRoot"),
-  cell: "".concat(PREFIX$a, "-cell"),
-  labelText: "".concat(PREFIX$a, "-labelText"),
-  labelDense: "".concat(PREFIX$a, "-labelDense"),
-  highlighted: "".concat(PREFIX$a, "-highlighted"),
-  checkboxLabel: "".concat(PREFIX$a, "-checkboxLabel"),
-  icon: "".concat(PREFIX$a, "-icon"),
-  S: "".concat(PREFIX$a, "-S"),
-  XS: "".concat(PREFIX$a, "-XS"),
-  A: "".concat(PREFIX$a, "-A"),
-  X: "".concat(PREFIX$a, "-X"),
-  frequencyCount: "".concat(PREFIX$a, "-frequencyCount"),
-  barContainer: "".concat(PREFIX$a, "-barContainer"),
-  bar: "".concat(PREFIX$a, "-bar"),
-  barSelected: "".concat(PREFIX$a, "-barSelected"),
-  barWithCheckbox: "".concat(PREFIX$a, "-barWithCheckbox"),
-  barSelectedWithCheckbox: "".concat(PREFIX$a, "-barSelectedWithCheckbox"),
-  excludedTextWithCheckbox: "".concat(PREFIX$a, "-excludedTextWithCheckbox")
-};
-const ellipsis = {
-  width: '100%',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis'
-};
-const barPadPx = 4;
-const barBorderWidthPx = 1;
-const barWithCheckboxLeftPadPx = 29;
-const frequencyTextNone = '-';
-const getSelectedStyle = _ref => {
-  let {
-    theme
-  } = _ref;
-  return {
-    background: theme.palette.selected.main,
-    color: theme.palette.selected.mainContrastText,
-    '&:focus': {
-      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder),
-      outline: 'none'
-    },
-    '& $cell': {
-      paddingRight: 0
-    }
-  };
-};
 const ItemGrid = styled$1(Grid, {
-  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding'].includes(prop)
-})(_ref2 => {
+  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'checkboxes'].includes(prop)
+})(_ref => {
   let {
     dataLayout,
     layoutOrder,
-    itemPadding
-  } = _ref2;
+    itemPadding,
+    checkboxes
+  } = _ref;
   return {
-    ["&.".concat(classes$a.fieldRoot)]: getGridItemSizes({
+    ["&.".concat(rowColClasses.fieldRoot)]: _objectSpread2(_objectSpread2({}, getGridItemSizes({
       dataLayout,
       layoutOrder,
       itemPadding
+    })), {}, {
+      paddingRight: checkboxes ? '8px' : undefined
     })
   };
 });
-const Root$1 = styled$1('div', {
-  shouldForwardProp: prop => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense'].includes(prop)
-})(_ref3 => {
-  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;
+
+function getCellFromPages(_ref) {
   let {
-    theme,
-    flexBasisProp,
-    isGridMode,
-    isGridCol,
-    dense
-  } = _ref3;
-  return {
-    '&:focus': {
-      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
-    },
-    '&:focus-visible': {
-      outline: 'none'
-    },
-    ["& .".concat(classes$a.row)]: {
-      flexWrap: 'nowrap',
-      color: (_theme$listBox$conten = (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : (_theme$listBox$conten2 = _theme$listBox.content) === null || _theme$listBox$conten2 === void 0 ? void 0 : _theme$listBox$conten2.color) !== null && _theme$listBox$conten !== void 0 ? _theme$listBox$conten : theme.palette.text.primary
-    },
-    ["& .".concat(classes$a.rowBorderBottom)]: {
-      borderBottom: isGridCol ? 'none' : "1px solid ".concat(theme.palette.divider),
-      borderLeft: isGridCol ? "1px solid ".concat(theme.palette.divider) : 'none'
-    },
-    ["& .".concat(classes$a.column)]: {
-      flexWrap: 'nowrap',
-      borderRight: "1px solid ".concat(theme.palette.divider),
-      color: (_theme$listBox$conten3 = (_theme$listBox2 = theme.listBox) === null || _theme$listBox2 === void 0 ? void 0 : (_theme$listBox2$conte = _theme$listBox2.content) === null || _theme$listBox2$conte === void 0 ? void 0 : _theme$listBox2$conte.color) !== null && _theme$listBox$conten3 !== void 0 ? _theme$listBox$conten3 : theme.palette.text.primary
-    },
-    // The interior wrapper for all field content.
-    ["& .".concat(classes$a.cell)]: {
-      display: 'flex',
-      alignItems: 'center',
-      minWidth: 0,
-      flexGrow: 1,
-      // Note that this padding is overridden when using checkboxes.
-      paddingLeft: '9px',
-      paddingRight: '9px'
-    },
-    // The leaf node, containing the label text.
-    ["& .".concat(classes$a.labelText)]: _objectSpread2(_objectSpread2({
-      flexBasis: flexBasisProp,
-      lineHeight: '16px',
-      userSelect: 'none',
-      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
-    }),
-    ["& .".concat(classes$a.labelDense)]: {
-      fontSize: 12
-    },
-    // Highlight is added to labelText spans, which are created as siblings to original labelText,
-    // when a search string is matched.
-    ["& .".concat(classes$a.highlighted)]: {
-      overflow: 'visible',
-      width: '100%',
-      '& > span': {
-        width: '100%',
-        backgroundColor: '#FFC72A'
-      }
-    },
-    // Checkbox and label container.
-    ["& .".concat(classes$a.checkboxLabel)]: {
-      margin: 0,
-      width: '100%',
-      height: '100%',
-      overflow: 'hidden',
-      // The checkbox's span
-      '& > span:nth-of-type(1)': {
-        paddingRight: '8px'
-      },
-      // The checkbox's label container.
-      '& > span:nth-of-type(2)': _objectSpread2(_objectSpread2({}, ellipsis), {}, {
-        display: 'flex',
-        alignItems: 'center',
-        paddingLeft: 0,
-        paddingRight: '2px'
-      })
-    },
-    // The icons container holding tick and lock, shown inside fields.
-    ["& .".concat(classes$a.icon)]: {
-      display: 'flex',
-      padding: theme.spacing(1, 1, 1, 0)
-    },
-    // Selection styles (S=Selected, XS=ExcludedSelected, A=Available, X=Excluded).
-    ["& .".concat(classes$a.S)]: _objectSpread2(_objectSpread2({}, getSelectedStyle({
-      theme
-    })), {}, {
-      border: isGridMode ? 'none' : undefined
-    }),
-    ["& .".concat(classes$a.XS)]: _objectSpread2(_objectSpread2({}, getSelectedStyle({
-      theme
-    })), {}, {
-      background: theme.palette.selected.excluded,
-      color: theme.palette.selected.mainContrastText,
-      border: isGridMode ? 'none' : undefined
-    }),
-    ["& .".concat(classes$a.A)]: {
-      background: theme.palette.selected.alternative,
-      color: theme.palette.selected.alternativeContrastText,
-      border: isGridMode ? 'none' : undefined
-    },
-    ["& .".concat(classes$a.X)]: {
-      background: theme.palette.selected.excluded,
-      color: theme.palette.selected.excludedContrastText,
-      border: isGridMode ? 'none' : undefined
-    },
-    ["& .".concat(classes$a.frequencyCount)]: {
-      width: '66px',
-      justifyContent: 'flex-end'
-    },
-    ["&.".concat(classes$a.barContainer)]: {
-      height: '100%',
-      display: 'flex',
-      alignItems: 'center'
-    },
-    ["& .".concat(classes$a.bar)]: {
-      border: "".concat(barBorderWidthPx, "px solid"),
-      borderColor: '#D9D9D9',
-      height: dense ? '16px' : '20px',
-      position: 'absolute',
-      zIndex: '-1',
-      alignSelf: 'center',
-      left: "".concat(barPadPx, "px"),
-      transition: 'width 0.2s',
-      backgroundColor: '#FAFAFA'
-    },
-    ["& .".concat(classes$a.barSelected)]: {
-      opacity: '30%',
-      zIndex: '0',
-      background: theme.palette.background.lighter
-    },
-    ["& .".concat(classes$a.barWithCheckbox)]: {
-      left: "".concat(barWithCheckboxLeftPadPx, "px")
-    },
-    ["& .".concat(classes$a.barSelectedWithCheckbox)]: {
-      background: '#BFE5D0',
-      borderColor: '#BFE5D0'
-    },
-    ["& .".concat(classes$a.excludedTextWithCheckbox)]: {
-      color: '#828282',
-      fontStyle: 'italic'
+    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];
     }
-  };
-});
-function RowColumn(_ref4) {
-  var _cell$qText;
+  }
+  return c;
+}
+
+function RowColumn(_ref) {
+  var _cell$qText, _cell$qHighlightRange, _cell$qHighlightRange2;
   let {
     index,
     rowIndex,
     columnIndex,
     style,
     data
-  } = _ref4;
+  } = _ref;
   const {
+    onChange,
     onClick,
     onMouseDown,
     onMouseUp,
@@ -9924,7 +10248,8 @@ function RowColumn(_ref4) {
     dataOffset,
     focusListItems,
     listCount,
-    itemPadding
+    itemPadding,
+    frequencyWidth
   } = data;
   const {
     dense = false,
@@ -9976,52 +10301,29 @@ function RowColumn(_ref4) {
   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]);
-  const isExcluded = c => c ? c.qState === 'X' || c.qState === 'XS' || c.qState === 'XL' : null;
-  const isAlternative = c => c ? c.qState === 'A' : null;
-  useEffect$1(() => {
-    if (!cell) {
-      return;
-    }
-    const selected = cell.qState === 'S' || cell.qState === 'XS' || cell.qState === 'L';
-    setSelected(selected);
-    const clazzArr = [column ? classes$a.column : classes$a.row];
-    if (!(histogram && (dense || checkboxes))) clazzArr.push(classes$a.rowBorderBottom);
-    if (!checkboxes) {
-      if (cell.qState === 'XS') {
-        clazzArr.push(showGray ? classes$a.XS : classes$a.S);
-      } else if (cell.qState === 'S' || cell.qState === 'L') {
-        clazzArr.push(classes$a.S);
-      } else if (showGray && isAlternative(cell)) {
-        clazzArr.push(classes$a.A);
-      } else if (showGray && isExcluded(cell)) {
-        clazzArr.push(classes$a.X);
-      }
+  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';
+  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 => {
+    if (checkboxes) {
+      // Event will not propagate in the checkbox/radiobutton case
+      onClick(event);
     }
-    setClassArr(clazzArr);
-  }, [cell && cell.qState, histogram, dense, checkboxes]);
+    event.preventDefault();
+  }, [checkboxes]);
   if (!cell) {
     return null; // prevent rendering empty rows
   }
 
-  const joinClassNames = namesArray => namesArray.filter(c => !!c).join(' ').trim();
-  const excludedOrAlternative = () => (isAlternative(cell) || isExcluded(cell)) && checkboxes;
   const isNumeric = !['NaN', undefined].includes(cell === null || cell === void 0 ? void 0 : cell.qNum);
   let valueTextAlign;
   const isAutoTextAlign = !textAlign || textAlign.auto;
@@ -10034,94 +10336,16 @@ function RowColumn(_ref4) {
   } else {
     valueTextAlign = (textAlign === null || textAlign === void 0 ? void 0 : textAlign.align) || 'left';
   }
-  const getValueField = _ref5 => {
-    let {
-      lbl,
-      ix,
-      color,
-      highlighted = false
-    } = _ref5;
-    return /*#__PURE__*/React__default.createElement(Typography, {
-      component: "span",
-      variant: "body2",
-      key: ix,
-      className: joinClassNames([classes$a.labelText, highlighted && classes$a.highlighted, dense && classes$a.labelDense, showGray && excludedOrAlternative() && classes$a.excludedTextWithCheckbox]),
-      color: color,
-      justifyContent: valueTextAlign
-    }, /*#__PURE__*/React__default.createElement("span", {
-      style: {
-        whiteSpace: 'pre'
-      }
-    }, lbl));
-  };
-  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 getCheckboxField = _ref6 => {
-    let {
-      lbl,
-      color,
-      qElemNumber
-    } = _ref6;
-    const cb = /*#__PURE__*/React__default.createElement(ListboxCheckbox, {
-      label: lbl,
-      checked: isSelected,
-      dense: dense,
-      excluded: isExcluded(cell),
-      isGridCol: isGridCol,
-      showGray: showGray
-    });
-    const rb = /*#__PURE__*/React__default.createElement(ListBoxRadioButton, {
-      label: lbl,
-      checked: isSelected,
-      dense: dense
-    });
-    const labelTag = typeof lbl === 'string' ? getValueField({
-      lbl,
-      color,
-      highlighted: false
-    }) : lbl;
-    return /*#__PURE__*/React__default.createElement(FormControlLabel, {
-      color: color,
-      control: isSingleSelect ? rb : cb,
-      className: classes$a.checkboxLabel,
-      label: labelTag,
-      key: qElemNumber
-    });
-  };
   const label = (_cell$qText = cell === null || cell === void 0 ? void 0 : cell.qText) !== null && _cell$qText !== void 0 ? _cell$qText : '';
-  const getFrequencyText = () => {
-    if (cell) {
-      return cell.qFrequency ? cell.qFrequency : frequencyTextNone;
-    }
-    return '';
-  };
 
   // 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);
-  const getField = checkboxes ? getCheckboxField : getValueField;
-  const getFieldWithRanges = _ref7 => {
-    let {
-      lbls
-    } = _ref7;
-    const labelsWithRanges = lbls.map((_ref8, ix) => {
-      let [lbl, highlighted] = _ref8;
-      return getValueField({
-        ix,
-        highlighted,
-        lbl
-      });
-    });
-    return checkboxes ? getCheckboxField({
-      lbl: labelsWithRanges
-    }) : labelsWithRanges;
-  };
+
+  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',
@@ -10134,37 +10358,30 @@ function RowColumn(_ref4) {
     alignItems: 'center',
     minWidth: 0,
     flexGrow: 1,
-    padding: checkboxes ? 0 : undefined,
+    paddingLeft: checkboxes ? 0 : undefined,
     justifyContent: valueTextAlign
   };
-  const hasHistogramBar = () => cell && histogram && getFrequencyText() !== frequencyTextNone;
-  const getBarWidth = qFrequency => {
-    const freqStr = String(qFrequency);
-    const isPercent = freqStr.substring(freqStr.length - 1) === '%';
-    const freq = parseFloat(isPercent ? freqStr : qFrequency);
-    const rightSlice = checkboxes ? "(".concat(barWithCheckboxLeftPadPx, "px + ").concat(barPadPx + barBorderWidthPx * 2, "px)") : "".concat(barPadPx * 2 + barBorderWidthPx * 2, "px");
-    const width = isPercent ? freq : freq / frequencyMax * 100;
-    return "calc(".concat(width, "% - ").concat(rightSlice, ")");
-  };
   const isFirstElement = index === 0;
   const flexBasisVal = checkboxes ? 'auto' : 'max-content';
-  return /*#__PURE__*/React__default.createElement(Root$1, {
-    className: classes$a.barContainer,
+  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,
     className: joinClassNames(['value', ...classArr]),
     classes: {
-      root: classes$a.fieldRoot
+      root: rowColClasses.fieldRoot
     },
     onClick: onClick,
     onMouseDown: onMouseDown,
@@ -10174,37 +10391,53 @@ function RowColumn(_ref4) {
     onContextMenu: preventContextMenu,
     role: column ? 'column' : 'row',
     tabIndex: isFirstElement && (!keyboard.enabled || keyboard.active) ? 0 : -1,
-    "data-n": cell && cell.qElemNumber
-  }, hasHistogramBar() && /*#__PURE__*/React__default.createElement("div", {
-    className: joinClassNames([classes$a.bar, checkboxes && classes$a.barWithCheckbox, isSelected && (checkboxes ? classes$a.barSelectedWithCheckbox : classes$a.barSelected)]),
-    style: {
-      width: getBarWidth(cell.qFrequency)
-    }
+    "data-n": cell === null || cell === void 0 ? void 0 : cell.qElemNumber
+  }, /*#__PURE__*/React__default.createElement(Histogram, {
+    cell: cell,
+    histogram: histogram,
+    checkboxes: checkboxes,
+    isSelected: isSelected,
+    frequencyMax: frequencyMax
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     style: cellStyle,
-    className: joinClassNames([classes$a.cell, classes$a.selectedCell]),
+    className: joinClassNames([rowColClasses.cell, rowColClasses.selectedCell]),
     title: "".concat(label)
-  }, ranges.length === 0 ? getField({
-    lbl: label,
-    color: 'inherit'
-  }) : getFieldWithRanges({
-    lbls: labels
-  })), freqIsAllowed && /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    style: {
-      display: 'flex',
-      alignItems: 'center'
-    },
-    className: classes$a.frequencyCount
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    noWrap: true,
+  }, labels ? /*#__PURE__*/React__default.createElement(FieldWithRanges, {
+    onChange: onChange,
+    labels: labels,
+    checkboxes: checkboxes,
+    dense: dense,
+    showGray: showGray,
+    color: "inherit" // TODO: Check this
+    ,
+    qElemNumber: cell.qElemNumber,
+    isSelected: isSelected,
+    cell: cell,
+    isGridCol: isGridCol,
+    isSingleSelect: isSingleSelect,
+    valueTextAlign: valueTextAlign
+  }) : /*#__PURE__*/React__default.createElement(Field$1, {
+    onChange: onChange,
+    label: label,
     color: "inherit",
-    variant: "body2",
-    className: joinClassNames([dense && classes$a.labelDense, classes$a.labelText, showGray && excludedOrAlternative() && classes$a.excludedTextWithCheckbox])
-  }, getFrequencyText())), !checkboxes && /*#__PURE__*/React__default.createElement(Grid, {
+    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,
+    dense: dense,
+    showGray: showGray
+  }), !checkboxes && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: classes$a.icon
+    className: rowColClasses.icon
   }, !showLock && !showTick && /*#__PURE__*/React__default.createElement("span", {
     style: {
       minWidth: '12px'
@@ -10218,21 +10451,6 @@ function RowColumn(_ref4) {
   }))));
 }
 
-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,
@@ -11679,8 +11897,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
@@ -11695,42 +11914,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
@@ -11796,13 +12000,14 @@ function getListBoxComponents(_ref) {
     showGray,
     scrollState,
     direction,
-    listLayout,
     sizes,
     listCount,
     overflowDisclaimer,
     setScrollPosition,
     focusListItems,
-    setCurrentScrollIndex
+    setCurrentScrollIndex,
+    constraints,
+    freqIsAllowed
   } = _ref;
   const {
     layoutOptions = {},
@@ -11813,7 +12018,8 @@ function getListBoxComponents(_ref) {
     listHeight,
     itemSize,
     rowCount,
-    columnCount
+    columnCount,
+    frequencyWidth
   } = sizes || {};
 
   // Options common for List and Grid.
@@ -11833,14 +12039,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),
@@ -11865,10 +12068,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
       }),
@@ -11943,6 +12146,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,
@@ -11967,6 +12171,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,
@@ -11974,7 +12181,8 @@ function getListSizes(_ref) {
     height,
     listCount,
     count,
-    textWidth
+    textWidth,
+    freqIsAllowed
   } = _ref;
   const {
     layoutOptions = {}
@@ -11986,7 +12194,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;
@@ -12003,18 +12212,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'
@@ -12026,7 +12238,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;
@@ -12052,7 +12264,8 @@ function getListSizes(_ref) {
       row: maxRowCount,
       column: maxColumnCount
     },
-    itemPadding
+    itemPadding,
+    frequencyWidth: FREQUENCY_WIDTH
   };
 }
 
@@ -12548,18 +12761,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,
@@ -12578,7 +12808,6 @@ function ListBox(_ref) {
     }
   } = _ref;
   const [initScrollPosIsSet, setInitScrollPosIsSet] = useState$1(false);
-  const [layout] = useLayout$1(model);
   const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
   const {
     checkboxes = checkboxOption,
@@ -12605,11 +12834,7 @@ function ListBox(_ref) {
       postProcessPages,
       listData
     }),
-    {
-      isLoadingData
-    } = _useItemsLoader,
     itemsLoader = _objectWithoutProperties(_useItemsLoader, _excluded$4);
-  const [pages, setPages] = useState$1([]);
   const {
     setStoreValue
   } = useDataStore(model);
@@ -12621,9 +12846,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;
@@ -12634,17 +12866,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 = {}
@@ -12684,12 +12912,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);
@@ -12704,7 +12926,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,
@@ -12714,14 +12936,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;
@@ -12740,7 +12976,7 @@ function ListBox(_ref) {
     });
     local.current.dataOffset = offset;
     if (triggerRerender) {
-      setPages(currentPages => [...currentPages]);
+      selectionState.triggerStateChanged();
     }
     scrollToIndex(scrollIndex);
   };
@@ -12807,7 +13043,9 @@ function ListBox(_ref) {
     },
     setScrollPosition,
     focusListItems: getFocusState(),
-    setCurrentScrollIndex: currentScrollIndex.set
+    setCurrentScrollIndex: currentScrollIndex.set,
+    constraints,
+    freqIsAllowed
   });
   const {
     columnWidth,
@@ -12885,7 +13123,8 @@ var createListboxSelectionToolbar = (_ref => {
   let {
     layout,
     model,
-    translator
+    translator,
+    selectionState
   } = _ref;
   if (layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne) {
     return [];
@@ -12901,6 +13140,7 @@ var createListboxSelectionToolbar = (_ref => {
     getSvgIconShape: selectAll,
     enabled: canSelectAll,
     action: () => {
+      selectionState.clearItemStates(false);
       model.selectListObjectAll('/qListObjectDef');
     }
   }, {
@@ -12910,6 +13150,7 @@ var createListboxSelectionToolbar = (_ref => {
     getSvgIconShape: selectPossible,
     enabled: canSelectPossible,
     action: () => {
+      selectionState.clearItemStates(false);
       model.selectListObjectPossible('/qListObjectDef');
     }
   }, {
@@ -12919,6 +13160,7 @@ var createListboxSelectionToolbar = (_ref => {
     getSvgIconShape: selectAlternative,
     enabled: canSelectAlternative,
     action: () => {
+      selectionState.clearItemStates(false);
       model.selectListObjectAlternative('/qListObjectDef');
     }
   }, {
@@ -12928,6 +13170,7 @@ var createListboxSelectionToolbar = (_ref => {
     getSvgIconShape: selectExcluded,
     enabled: canSelectExcluded,
     action: () => {
+      selectionState.clearItemStates(false);
       model.selectListObjectExcluded('/qListObjectDef');
     }
   }];
@@ -13436,6 +13679,7 @@ const StyledOutlinedInput = styled$1(OutlinedInput)(_ref2 => {
 function ListBoxSearch(_ref3) {
   let {
     selections,
+    selectionState,
     model,
     keyboard,
     dense = false,
@@ -13510,6 +13754,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;
@@ -13549,7 +13794,8 @@ function ListBoxSearch(_ref3) {
       },
       '&:hover': {
         border: 'none'
-      }
+      },
+      paddingLeft: "".concat(CELL_PADDING_LEFT, "px")
     }, dense && {
       fontSize: 12,
       paddingLeft: theme.spacing(1),
@@ -13823,6 +14069,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;
@@ -13894,6 +14259,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)) {
@@ -13913,7 +14279,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, {
@@ -13986,13 +14353,16 @@ function ListBoxPopover(_ref) {
     model: model,
     listCount: listCount,
     selections: selections,
+    selectionState: selectionState$1,
     keyboard: {
       enabled: false
     },
     autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : true
   }), /*#__PURE__*/React__default.createElement(ListBox, {
     model: model,
+    layout: layout,
     selections: selections,
+    selectionState: selectionState$1,
     direction: "ltr",
     onSetListCount: c => setListCount(c)
   }))));
@@ -14622,6 +14992,52 @@ const selectionsForward = props => _objectSpread2(_objectSpread2({}, props), {},
 });
 var SelectionsForward = (props => SvgIcon$2(selectionsForward(props)));
 
+const patchAlternateState = (currentSelectionsModel, currentSelectionsLayout, appLayout) => {
+  const states = [...(appLayout.qStateNames || [])].map(s => ({
+    stateName: s,
+    // need this as reference in selection toolbar since qSelectionObject.qStateName is not in the layout
+    qSelectionObjectDef: {
+      qStateName: s
+    }
+  }));
+  const existingStates = (currentSelectionsLayout && currentSelectionsLayout.alternateStates ? currentSelectionsLayout.alternateStates.map(s => s.stateName) : []).join('::');
+  const newStates = (appLayout.qStateNames || []).map(s => s).join('::');
+  if (existingStates !== newStates) {
+    currentSelectionsModel.applyPatches([{
+      qOp: 'replace',
+      qPath: '/alternateStates',
+      qValue: JSON.stringify(states)
+    }], true);
+  }
+};
+function useAppSelectionsNavigation(app) {
+  const [currentSelectionsModel] = useCurrentSelectionsModel(app);
+  const [currentSelectionsLayout] = useLayout$1(currentSelectionsModel);
+  const [appLayout] = useAppLayout$1(app);
+  const [navigationState, setNavigationState] = useState$1(null);
+  useEffect$1(() => {
+    if (!appLayout || !currentSelectionsModel || !currentSelectionsLayout) return;
+    patchAlternateState(currentSelectionsModel, currentSelectionsLayout, appLayout);
+  }, [appLayout, currentSelectionsModel, currentSelectionsLayout]);
+  useEffect$1(() => {
+    if (!currentSelectionsLayout) return;
+    let canGoBack = false;
+    let canGoForward = false;
+    let canClear = false;
+    [currentSelectionsLayout, ...(currentSelectionsLayout.alternateStates || [])].forEach(state => {
+      canGoBack = canGoBack || state.qSelectionObject && state.qSelectionObject.qBackCount > 0;
+      canGoForward = canGoForward || state.qSelectionObject && state.qSelectionObject.qForwardCount > 0;
+      canClear = canClear || (state.qSelectionObject && state.qSelectionObject.qSelections || []).filter(s => s.qLocked !== true).length > 0;
+    });
+    setNavigationState({
+      canGoBack,
+      canGoForward,
+      canClear
+    });
+  }, [currentSelectionsLayout]);
+  return [navigationState, currentSelectionsModel, currentSelectionsLayout];
+}
+
 function Nav(_ref) {
   let {
     api,
@@ -15206,6 +15622,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 {
@@ -15227,14 +15653,19 @@ const addListboxTheme = themeApi => {
 
 const PREFIX$4 = 'ListBoxInline';
 const searchIconWidth = 28;
+const drillDownIconWidth = 24;
 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,
@@ -15248,6 +15679,9 @@ const StyledGrid$3 = styled$1(Grid)(_ref => {
       height: 0,
       width: 0,
       overflow: 'hidden'
+    },
+    ["& .".concat(classes$4.listboxWrapper)]: {
+      padding: containerPadding
     }
   };
 });
@@ -15263,15 +15697,15 @@ const Title = styled$1(Typography)(_ref2 => {
   };
 });
 function ListBoxInline(_ref3) {
-  var _layout$layoutOptions, _layout$layoutOptions2;
+  var _layoutOptions$dense;
   let {
-    options = {}
+    options,
+    layout
   } = _ref3;
   const {
     app,
     direction,
     frequencyMode,
-    listLayout,
     checkboxes,
     search = true,
     focusSearch = false,
@@ -15315,7 +15749,6 @@ function ListBoxInline(_ref3) {
   const moreAlignTo = useRef();
   const containerRef = useRef();
   const [searchContainer, searchContainerRef] = useRefWithCallback();
-  const [layout] = useLayout$1(model);
   const [showToolbar, setShowToolbar] = useState$1(false);
   const [showSearch, setShowSearch] = useState$1(false);
   const [keyboardActive, setKeyboardActive] = useState$1(false);
@@ -15331,6 +15764,7 @@ function ListBoxInline(_ref3) {
     stop: 0
   });
   const [appSelections] = useAppSelections(app);
+  const [selectionState$1] = useState$1(() => selectionState());
   const {
     handleKeyDown,
     handleOnMouseEnter,
@@ -15398,17 +15832,23 @@ function ListBoxInline(_ref3) {
     return null;
   }
   const isLocked = layout.qListObject.qDimensionInfo.qLocked === true;
+  const isDrillDown = layout.qListObject.qDimensionInfo.qGrouping === 'H';
   const listboxSelectionToolbarItems = toolbar ? 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
@@ -15418,12 +15858,26 @@ function ListBoxInline(_ref3) {
     setShowSearch(newValue);
   };
   const shouldAutoFocus = searchVisible && search === 'toggle';
+  const showSearchIcon = searchEnabled !== false && search === 'toggle' && !(constraints !== null && constraints !== void 0 && constraints.active);
+  const showSearchOrLockIcon = isLocked || showSearchIcon;
+  const showIcons = showSearchOrLockIcon || isDrillDown;
+  const iconsWidth = (showSearchOrLockIcon ? searchIconWidth : 0) + (isDrillDown ? drillDownIconWidth : 0);
+  const drillDownPaddingLeft = showSearchOrLockIcon ? 0 : ICON_PADDING;
+  const headerPaddingLeft = CELL_PADDING_LEFT - (showIcons ? 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(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"),
@@ -15437,45 +15891,60 @@ 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'),
     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",
+    "data-testid": "search-toggle-btn"
   }, /*#__PURE__*/React__default.createElement(SearchIcon, {
     style: {
       fontSize: '12px'
     }
+  })), isDrillDown && /*#__PURE__*/React__default.createElement(IconButton, {
+    tabIndex: -1,
+    title: translator.get('Listbox.DrillDown'),
+    size: "large",
+    sx: {
+      paddingLeft: "".concat(drillDownPaddingLeft, "px")
+    }
+  }, /*#__PURE__*/React__default.createElement(DrillDownIcon, {
+    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,
+    title: layout.title
   }, layout.title))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true
@@ -15519,6 +15988,7 @@ function ListBoxInline(_ref3) {
     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,
@@ -15530,7 +16000,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 => {
@@ -15540,9 +16011,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,
@@ -15571,6 +16044,20 @@ function ListBoxInline(_ref3) {
     });
   }))));
 }
+const ListBoxInlineMemoed = React__default.memo(ListBoxInline);
+function IsolateUseLayoutWrapper(_ref5) {
+  let {
+    options = {}
+  } = _ref5;
+  const {
+    model
+  } = options;
+  const [layout] = useLayout$1(model);
+  return /*#__PURE__*/React__default.createElement(ListBoxInlineMemoed, {
+    options: options,
+    layout: layout
+  });
+}
 
 function useExistingModel(_ref) {
   let {
@@ -15597,6 +16084,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);
       }
     }
@@ -15650,6 +16140,7 @@ function useOnTheFlyModel(_ref) {
   const {
     dense,
     checkboxes,
+    listLayout,
     properties = {}
   } = options;
   let {
@@ -15678,6 +16169,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();
@@ -15690,6 +16195,7 @@ function useOnTheFlyModel(_ref) {
     qListObjectDef: {
       qStateName: stateName,
       qShowAlternatives: true,
+      frequencyEnabled: false,
       qFrequencyMode: getListdefFrequencyMode(),
       qInitialDataFetch: [{
         qTop: 0,
@@ -15708,9 +16214,7 @@ function useOnTheFlyModel(_ref) {
     },
     histogram,
     checkboxes,
-    layoutOptions: {
-      dense
-    },
+    layoutOptions,
     title
   };
   extend$1(true, listdef, properties);
@@ -15833,15 +16337,15 @@ function ListBoxWrapper(_ref) {
   });
   const elementRef = useRef(element);
   const selections = hasExternalSelectionsApi ? options.selectionsApi : useObjectSelections(app, model, [elementRef, '.njs-action-toolbar-more'], options)[0];
-  if (!selections || !model) {
-    return null;
-  }
-  const opts = _objectSpread2(_objectSpread2({}, options), {}, {
+  const opts = useMemo$1(() => _objectSpread2(_objectSpread2({}, options), {}, {
     selections,
     model,
     app
-  });
-  return /*#__PURE__*/React__default.createElement(ListBoxInline, {
+  }), [options, selections, model, app]);
+  if (!selections || !model) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(IsolateUseLayoutWrapper, {
     options: opts
   });
 }