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

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @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.
 */
@@ -1680,6 +1680,12 @@
 			"zh-TW": "不符計算條件"
 		}
 	};
+	var Listbox_DrillDown = {
+		id: "Listbox.DrillDown",
+		locale: {
+			"en-US": "Drill-down dimension"
+		}
+	};
 	var all = {
 		Cancel: Cancel$1,
 		CurrentSelections_All: CurrentSelections_All,
@@ -1716,7 +1722,8 @@
 		Visualization_Invalid_Dimension: Visualization_Invalid_Dimension,
 		Visualization_Invalid_Measure: Visualization_Invalid_Measure,
 		Visualization_LayoutError: Visualization_LayoutError,
-		Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition
+		Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition,
+		Listbox_DrillDown: Listbox_DrillDown
 	};
 
 	function appLocaleFn(language) {
@@ -3505,6 +3512,8 @@
 	  return detectTouchscreen() ? 'touch' : 'desktop';
 	}
 
+	var client = {};
+
 	var reactDomExports = {};
 	var reactDom = {
 	  get exports(){ return reactDomExports; },
@@ -3901,6 +3910,12 @@
 
 	var ReactDOM = /*@__PURE__*/getDefaultExportFromCjs(reactDomExports);
 
+	var m$2 = reactDomExports;
+	{
+	  client.createRoot = m$2.createRoot;
+	  client.hydrateRoot = m$2.hydrateRoot;
+	}
+
 	function _extends$7() {
 	  _extends$7 = Object.assign ? Object.assign.bind() : function (target) {
 	    for (var i = 1; i < arguments.length; i++) {
@@ -15328,7 +15343,7 @@
 	  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', ''));
 	});
@@ -15383,395 +15398,87 @@
 	  return [useKeyStore, store];
 	});
 
-	const [useRpcResultStore, rpcResultStore] = createKeyStore({});
-	const [useRpcRequestStore, rpcRequestStore] = createKeyStore({});
-	const [useRpcRequestSessionModelStore, rpcRequestSessionModelStore] = createKeyStore({});
-	const [useRpcRequestModelStore, rpcRequestModelStore] = createKeyStore({});
-	const [useModelChangedStore, modelChangedStore] = createKeyStore({});
-	const [, modelInitializedStore] = createKeyStore({});
-	const modelStoreMiddleware = _ref => {
+	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 {
-	    type,
-	    value: model
+	    app
 	  } = _ref;
-	  const initialized = modelInitializedStore.get(model.id);
-	  modelInitializedStore.set(model.id, {});
-	  const onChanged = () => {
-	    rpcRequestStore.clear(model.id);
-	    modelChangedStore.set(model.id, {});
-	    modelChangedStore.dispatch(true); // Force new state to trigger hooks
+	  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;
+	    }
 
-	  const unsubscribe = () => {
-	    model.removeListener('changed', onChanged);
-	    rpcResultStore.clear(model.id);
-	    rpcRequestStore.clear(model.id);
-	    rpcRequestSessionModelStore.clear(model.id);
-	    rpcRequestModelStore.clear(model.id);
-	    modelChangedStore.clear(model.id);
-	    modelInitializedStore.clear(model.id);
-	  };
-	  switch (type) {
-	    case 'SET':
-	      if (!initialized) {
-	        model.on('changed', onChanged);
-	        model.once('closed', () => {
-	          unsubscribe();
-	        });
-	      }
-	      break;
-	  }
-	  return unsubscribe;
-	};
-	const [useModelStore, modelStore] = createKeyStore({}, modelStoreMiddleware);
-	const subscribe = model => {
-	  const unsubscribe = modelStoreMiddleware({
-	    type: 'SET',
-	    value: model
-	  });
-	  return () => {
-	    unsubscribe();
-	    modelStore.clear(model.id);
-	  };
-	};
+	    // If other model is in modal state end it
+	    end(accept);
 
-	const rpcReducer = (state, action) => {
-	  const {
-	    rpcResultStore,
-	    key,
-	    method
-	  } = action;
-	  let newState;
-	  switch (action.type) {
-	    case 'INVALID':
-	      {
-	        newState = _objectSpread2(_objectSpread2({}, state), {}, {
-	          valid: false,
-	          invalid: true,
-	          validating: true,
-	          canCancel: true,
-	          canRetry: false,
-	          rpcRetry: false
-	        });
-	        break;
-	      }
-	    case 'VALID':
-	      {
-	        newState = {
-	          result: _objectSpread2({}, action.result),
-	          invalid: false,
-	          valid: true,
-	          validating: false,
-	          canCancel: false,
-	          canRetry: false,
-	          rpcRetry: false
-	        };
-	        break;
-	      }
-	    case 'CANCELLED':
-	      {
-	        newState = _objectSpread2(_objectSpread2({}, state), {}, {
-	          invalid: true,
-	          valid: false,
-	          validating: false,
-	          canCancel: false,
-	          canRetry: true,
-	          rpcRetry: false
-	        });
-	        break;
-	      }
-	    default:
-	      throw new Error('Undefined action');
-	  }
-	  let sharedState = rpcResultStore.get(key);
-	  if (!sharedState) {
-	    sharedState = {};
-	  }
-	  sharedState[method] = newState;
-	  rpcResultStore.set(key, sharedState);
-	  return newState;
-	};
-	function useRpc(model, method) {
-	  const key = model ? "".concat(model.id) : null;
-	  const [rpcResultStore] = useRpcResultStore();
-	  const [state, dispatch] = reactExports.useReducer(rpcReducer, key ? rpcResultStore.get(key) : null);
-	  const [modelChangedStore] = useModelChangedStore();
-	  const [rpcRequestStore] = useRpcRequestStore();
-	  let rpcShared;
-	  if (key) {
-	    rpcShared = rpcRequestStore.get(key);
-	    if (!rpcShared) {
-	      rpcShared = {};
-	      rpcRequestStore.set(key, rpcShared);
-	    }
-	  }
-	  const call = async skipRetry => {
-	    let cache = rpcShared[method];
-	    if (!cache || cache && cache.rpcRetry) {
-	      const rpc = model[method]();
-	      cache = {
-	        rpc,
-	        rpcRetry: false
-	      };
-	      rpcShared[method] = cache;
-	      dispatch({
-	        type: 'INVALID',
-	        method,
-	        key,
-	        model,
-	        rpcResultStore,
-	        canCancel: true
-	      });
-	    }
-	    try {
-	      // await sleep(5000);
-	      const result = await cache.rpc;
-	      dispatch({
-	        type: 'VALID',
-	        result,
-	        key,
-	        method,
-	        model,
-	        rpcResultStore
-	      });
-	    } catch (err) {
-	      if (err.code === 15 && !skipRetry) {
-	        // Request aborted. This will be called multiple times by hooks only retry once
-	        if (!cache.rpcRetry) {
-	          cache.rpcRetry = true;
+	    // 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
 	        }
-	        call(true);
 	      }
-	    }
+	    };
+
+	    await beginSelections();
 	  };
-	  const longrunning = {
-	    cancel: async () => {
-	      const global = model.session.getObjectApi({
-	        handle: -1
-	      });
-	      await global.cancelRequest(rpcShared[method].rpc.requestId);
-	      dispatch({
-	        type: 'CANCELLED',
-	        key,
-	        method,
-	        model,
-	        rpcResultStore
-	      });
+	  const appModal = {
+	    begin,
+	    end
+	  };
+	  appModalStore.set(key, appModal);
+
+	  /**
+	   * @class
+	   * @alias AppSelections
+	   */
+	  const appSelections = {
+	    model: app,
+	    isInModal() {
+	      return !!modalObjectStore.get(key);
 	    },
-	    retry: () => {
-	      rpcShared[method].rpcRetry = true;
-	      call();
-	    }
-	  };
-	  reactExports.useEffect(() => {
-	    if (!model) return undefined;
-	    call();
-	    return undefined;
-	  }, [model, modelChangedStore.get(model && model.id), key, method]);
-	  return [
-	  // Result
-	  state && state.result, {
-	    validating: state && state.validating,
-	    canCancel: state && state.canCancel,
-	    canRetry: state && state.canRetry
-	  },
-	  // Long running api e.g cancel retry
-	  longrunning];
-	}
-
-	function useLayout$1(model) {
-	  return useRpc(model, 'getLayout');
-	}
-	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] = reactExports.useState();
-	  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];
-	  }
-	  reactExports.useEffect(() => {
-	    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 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] = reactExports.useState(null);
-	  reactExports.useEffect(() => {
-	    if (!appLayout || !currentSelectionsModel || !currentSelectionsLayout) return;
-	    patchAlternateState(currentSelectionsModel, currentSelectionsLayout, appLayout);
-	  }, [appLayout, currentSelectionsModel, currentSelectionsLayout]);
-	  reactExports.useEffect(() => {
-	    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];
-	}
-
-	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,
-	    currentSelectionsLayout,
-	    navState
-	  } = _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);
-	    },
-	    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()));
+	    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;
@@ -15781,27 +15488,25 @@
 	    // 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);
 	  reactExports.useEffect(() => {
-	    if (!app || !currentSelectionsModel || !currentSelectionsLayout || !navState || appSelections) return;
+	    if (!app || appSelections) return;
 	    appSelections = createAppSelections({
-	      app,
-	      currentSelectionsLayout,
-	      navState
+	      app
 	    });
 	    appSelectionsStore.set(key, appSelections);
 	    appSelectionsStore.dispatch(true);
-	  }, [app, currentSelectionsModel, currentSelectionsLayout, navState]);
-	  return [appSelections, navState];
+	  }, [app]);
+	  return [appSelections];
 	}
 
 	const NebulaApp = reactExports.forwardRef((_ref, ref) => {
 	  let {
 	    initialContext,
-	    app
+	    app,
+	    renderCallback
 	  } = _ref;
 	  const [appSelections] = useAppSelections(app);
 	  const [context, setContext] = reactExports.useState(initialContext);
@@ -15812,21 +15517,20 @@
 	    theme: create$3(muiThemeName)
 	  }), [muiThemeName]);
 	  const [components, setComponents] = reactExports.useState([]);
+
+	  // Will be called directly after the first render pass
+	  // See: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
+	  reactExports.useEffect(() => {
+	    renderCallback && renderCallback();
+	  }, []);
 	  reactExports.useImperativeHandle(ref, () => ({
-	    addComponent(component) {
-	      setComponents([...components, component]);
-	    },
-	    removeComponent(component) {
-	      const ix = components.indexOf(component);
-	      if (ix !== -1) {
-	        components.splice(ix, 1);
-	        setComponents([...components]);
-	      }
+	    setComps(comps) {
+	      setComponents([...comps]);
 	    },
 	    setMuiThemeName,
-	    setContext,
+	    setContext: ctx => setContext(oldContext => JSON.stringify(oldContext) !== JSON.stringify(ctx) ? ctx : oldContext),
 	    getAppSelections: () => appSelections
-	  }));
+	  }), []);
 	  return /*#__PURE__*/React.createElement(StyledEngineProvider, {
 	    injectFirst: true
 	  }, /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -15847,15 +15551,18 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "3.3.0-alpha.0" );
+	  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.0" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
-	  ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
+	  const root = client.createRoot(element);
+	  root.render( /*#__PURE__*/React.createElement(NebulaApp, {
 	    ref: appRef,
 	    app: app,
-	    initialContext: context
-	  }), element, resolveRender);
+	    initialContext: context,
+	    renderCallback: resolveRender
+	  }));
 	  const cells = {};
+	  const components = [];
 	  return [{
 	    toggleFocusOfCells(cellIdToFocus) {
 	      Object.keys(cells).forEach(i => {
@@ -15872,13 +15579,18 @@
 	    add(component) {
 	      (async () => {
 	        await rendered;
-	        appRef.current.addComponent(component);
+	        components.push(component);
+	        appRef.current.setComps(components);
 	      })();
 	    },
 	    remove(component) {
 	      (async () => {
 	        await rendered;
-	        appRef.current.removeComponent(component);
+	        const ix = components.indexOf(component);
+	        if (ix !== -1) {
+	          components.splice(ix, 1);
+	        }
+	        appRef.current.setComps(components);
 	      })();
 	    },
 	    setMuiThemeName(themeName) {
@@ -21175,267 +20887,515 @@
 	});
 	var Tooltip$1 = Tooltip;
 
-	function useRect$1() {
-	  const [node, setNode] = reactExports.useState();
-	  const [rect, setRect] = reactExports.useState();
-	  const callbackRef = reactExports.useCallback(ref => {
-	    if (!ref) {
-	      return;
-	    }
-	    setNode(ref);
-	  }, []);
-	  const handleResize = () => {
-	    const {
-	      left,
-	      top,
-	      width,
-	      height
-	    } = node.getBoundingClientRect();
-	    setRect({
-	      left,
-	      top,
-	      width,
-	      height
-	    });
+	const [useRpcResultStore, rpcResultStore] = createKeyStore({});
+	const [useRpcRequestStore, rpcRequestStore] = createKeyStore({});
+	const [useRpcRequestSessionModelStore, rpcRequestSessionModelStore] = createKeyStore({});
+	const [useRpcRequestModelStore, rpcRequestModelStore] = createKeyStore({});
+	const [useModelChangedStore, modelChangedStore] = createKeyStore({});
+	const [, modelInitializedStore] = createKeyStore({});
+	const modelStoreMiddleware = _ref => {
+	  let {
+	    type,
+	    value: model
+	  } = _ref;
+	  const initialized = modelInitializedStore.get(model.id);
+	  modelInitializedStore.set(model.id, {});
+	  const onChanged = () => {
+	    rpcRequestStore.clear(model.id);
+	    modelChangedStore.set(model.id, {});
+	    modelChangedStore.dispatch(true); // Force new state to trigger hooks
 	  };
-	  reactExports.useLayoutEffect(() => {
-	    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';
+	  const unsubscribe = () => {
+	    model.removeListener('changed', onChanged);
+	    rpcResultStore.clear(model.id);
+	    rpcRequestStore.clear(model.id);
+	    rpcRequestSessionModelStore.clear(model.id);
+	    rpcRequestModelStore.clear(model.id);
+	    modelChangedStore.clear(model.id);
+	    modelInitializedStore.clear(model.id);
+	  };
+	  switch (type) {
+	    case 'SET':
+	      if (!initialized) {
+	        model.on('changed', onChanged);
+	        model.once('closed', () => {
+	          unsubscribe();
+	        });
+	      }
+	      break;
 	  }
-	  return '16px';
-	}
-	function SvgIcon(_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.createElement("i", {
-	    style: s
-	  }, /*#__PURE__*/React.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.createElement(Type, _extends$8({
-	        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(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(lock(props)));
+	  return unsubscribe;
+	};
+	const [useModelStore, modelStore] = createKeyStore({}, modelStoreMiddleware);
+	const subscribe = model => {
+	  const unsubscribe = modelStoreMiddleware({
+	    type: 'SET',
+	    value: model
+	  });
+	  return () => {
+	    unsubscribe();
+	    modelStore.clear(model.id);
+	  };
+	};
 
-	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'
+	function useSessionModel(definition, app) {
+	  const key = app ? "".concat(app.id, "/").concat(JSON.stringify(definition)) : null;
+	  const [modelStore] = useModelStore();
+	  const [rpcRequestSessionModelStore] = useRpcRequestSessionModelStore();
+	  const [model, setModel] = reactExports.useState();
+	  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];
+	  }
+	  reactExports.useEffect(() => {
+	    if (!app) {
+	      return;
 	    }
-	  }]
-	});
-	var Unlock = (props => SvgIcon(unlock(props)));
-
-	function isRangeVisible(_ref) {
-	  var lastRenderedStartIndex = _ref.lastRenderedStartIndex,
-	      lastRenderedStopIndex = _ref.lastRenderedStopIndex,
-	      startIndex = _ref.startIndex,
-	      stopIndex = _ref.stopIndex;
-
-	  return !(startIndex > lastRenderedStopIndex || stopIndex < lastRenderedStartIndex);
+	    // 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];
 	}
 
-	function scanForUnloadedRanges(_ref) {
-	  var isItemLoaded = _ref.isItemLoaded,
-	      itemCount = _ref.itemCount,
-	      minimumBatchSize = _ref.minimumBatchSize,
-	      startIndex = _ref.startIndex,
-	      stopIndex = _ref.stopIndex;
-
-	  var unloadedRanges = [];
-
-	  var rangeStartIndex = null;
-	  var rangeStopIndex = null;
-
-	  for (var _index = startIndex; _index <= stopIndex; _index++) {
-	    var loaded = isItemLoaded(_index);
+	const definition = {
+	  qInfo: {
+	    qType: 'current-selections'
+	  },
+	  qSelectionObjectDef: {
+	    qStateName: '$'
+	  },
+	  alternateStates: []
+	};
+	function useCurrentSelectionsModel(app) {
+	  return useSessionModel(definition, app);
+	}
 
-	    if (!loaded) {
-	      rangeStopIndex = _index;
-	      if (rangeStartIndex === null) {
-	        rangeStartIndex = _index;
+	const rpcReducer = (state, action) => {
+	  const {
+	    rpcResultStore,
+	    key,
+	    method
+	  } = action;
+	  let newState;
+	  switch (action.type) {
+	    case 'INVALID':
+	      {
+	        newState = _objectSpread2(_objectSpread2({}, state), {}, {
+	          valid: false,
+	          invalid: true,
+	          validating: true,
+	          canCancel: true,
+	          canRetry: false,
+	          rpcRetry: false
+	        });
+	        break;
 	      }
-	    } else if (rangeStopIndex !== null) {
-	      unloadedRanges.push(rangeStartIndex, rangeStopIndex);
-
-	      rangeStartIndex = rangeStopIndex = null;
-	    }
-	  }
-
-	  // If :rangeStopIndex is not null it means we haven't ran out of unloaded rows.
-	  // Scan forward to try filling our :minimumBatchSize.
-	  if (rangeStopIndex !== null) {
-	    var potentialStopIndex = Math.min(Math.max(rangeStopIndex, rangeStartIndex + minimumBatchSize - 1), itemCount - 1);
-
-	    for (var _index2 = rangeStopIndex + 1; _index2 <= potentialStopIndex; _index2++) {
-	      if (!isItemLoaded(_index2)) {
-	        rangeStopIndex = _index2;
-	      } else {
+	    case 'VALID':
+	      {
+	        newState = {
+	          result: _objectSpread2({}, action.result),
+	          invalid: false,
+	          valid: true,
+	          validating: false,
+	          canCancel: false,
+	          canRetry: false,
+	          rpcRetry: false
+	        };
 	        break;
 	      }
-	    }
-
-	    unloadedRanges.push(rangeStartIndex, rangeStopIndex);
-	  }
-
-	  // Check to see if our first range ended prematurely.
-	  // In this case we should scan backwards to try filling our :minimumBatchSize.
-	  if (unloadedRanges.length) {
-	    while (unloadedRanges[1] - unloadedRanges[0] + 1 < minimumBatchSize && unloadedRanges[0] > 0) {
-	      var _index3 = unloadedRanges[0] - 1;
-
-	      if (!isItemLoaded(_index3)) {
-	        unloadedRanges[0] = _index3;
-	      } else {
+	    case 'CANCELLED':
+	      {
+	        newState = _objectSpread2(_objectSpread2({}, state), {}, {
+	          invalid: true,
+	          valid: false,
+	          validating: false,
+	          canCancel: false,
+	          canRetry: true,
+	          rpcRetry: false
+	        });
 	        break;
 	      }
-	    }
-	  }
-
-	  return unloadedRanges;
-	}
-
-	var classCallCheck$1 = function (instance, Constructor) {
-	  if (!(instance instanceof Constructor)) {
-	    throw new TypeError("Cannot call a class as a function");
+	    default:
+	      throw new Error('Undefined action');
+	  }
+	  let sharedState = rpcResultStore.get(key);
+	  if (!sharedState) {
+	    sharedState = {};
 	  }
+	  sharedState[method] = newState;
+	  rpcResultStore.set(key, sharedState);
+	  return newState;
 	};
-
-	var createClass$1 = function () {
-	  function defineProperties(target, props) {
-	    for (var i = 0; i < props.length; i++) {
-	      var descriptor = props[i];
-	      descriptor.enumerable = descriptor.enumerable || false;
-	      descriptor.configurable = true;
-	      if ("value" in descriptor) descriptor.writable = true;
-	      Object.defineProperty(target, descriptor.key, descriptor);
+	function useRpc(model, method) {
+	  const key = model ? "".concat(model.id) : null;
+	  const [rpcResultStore] = useRpcResultStore();
+	  const [state, dispatch] = reactExports.useReducer(rpcReducer, key ? rpcResultStore.get(key) : null);
+	  const [modelChangedStore] = useModelChangedStore();
+	  const [rpcRequestStore] = useRpcRequestStore();
+	  let rpcShared;
+	  if (key) {
+	    rpcShared = rpcRequestStore.get(key);
+	    if (!rpcShared) {
+	      rpcShared = {};
+	      rpcRequestStore.set(key, rpcShared);
 	    }
 	  }
-
-	  return function (Constructor, protoProps, staticProps) {
-	    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-	    if (staticProps) defineProperties(Constructor, staticProps);
-	    return Constructor;
+	  const call = async skipRetry => {
+	    let cache = rpcShared[method];
+	    if (!cache || cache && cache.rpcRetry) {
+	      const rpc = model[method]();
+	      cache = {
+	        rpc,
+	        rpcRetry: false
+	      };
+	      rpcShared[method] = cache;
+	      dispatch({
+	        type: 'INVALID',
+	        method,
+	        key,
+	        model,
+	        rpcResultStore,
+	        canCancel: true
+	      });
+	    }
+	    try {
+	      // await sleep(5000);
+	      const result = await cache.rpc;
+	      dispatch({
+	        type: 'VALID',
+	        result,
+	        key,
+	        method,
+	        model,
+	        rpcResultStore
+	      });
+	    } catch (err) {
+	      if (err.code === 15 && !skipRetry) {
+	        // Request aborted. This will be called multiple times by hooks only retry once
+	        if (!cache.rpcRetry) {
+	          cache.rpcRetry = true;
+	        }
+	        call(true);
+	      }
+	    }
 	  };
-	}();
+	  const longrunning = {
+	    cancel: async () => {
+	      const global = model.session.getObjectApi({
+	        handle: -1
+	      });
+	      await global.cancelRequest(rpcShared[method].rpc.requestId);
+	      dispatch({
+	        type: 'CANCELLED',
+	        key,
+	        method,
+	        model,
+	        rpcResultStore
+	      });
+	    },
+	    retry: () => {
+	      rpcShared[method].rpcRetry = true;
+	      call();
+	    }
+	  };
+	  reactExports.useEffect(() => {
+	    if (!model) return undefined;
+	    call();
+	    return undefined;
+	  }, [model, modelChangedStore.get(model && model.id), key, method]);
+	  return [
+	  // Result
+	  state && state.result, {
+	    validating: state && state.validating,
+	    canCancel: state && state.canCancel,
+	    canRetry: state && state.canRetry
+	  },
+	  // Long running api e.g cancel retry
+	  longrunning];
+	}
 
-	var inherits$1 = function (subClass, superClass) {
-	  if (typeof superClass !== "function" && superClass !== null) {
-	    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-	  }
+	function useLayout$1(model) {
+	  return useRpc(model, 'getLayout');
+	}
+	function useAppLayout$1(model) {
+	  return useRpc(model, 'getAppLayout');
+	}
 
-	  subClass.prototype = Object.create(superClass && superClass.prototype, {
-	    constructor: {
-	      value: subClass,
-	      enumerable: false,
-	      writable: true,
-	      configurable: true
+	function useRect$1() {
+	  const [node, setNode] = reactExports.useState();
+	  const [rect, setRect] = reactExports.useState();
+	  const callbackRef = reactExports.useCallback(ref => {
+	    if (!ref) {
+	      return;
 	    }
-	  });
-	  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-	};
+	    setNode(ref);
+	  }, []);
+	  const handleResize = () => {
+	    const {
+	      left,
+	      top,
+	      width,
+	      height
+	    } = node.getBoundingClientRect();
+	    setRect({
+	      left,
+	      top,
+	      width,
+	      height
+	    });
+	  };
+	  reactExports.useLayoutEffect(() => {
+	    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];
+	}
 
-	var possibleConstructorReturn$1 = function (self, call) {
-	  if (!self) {
-	    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+	function getFontSize(size) {
+	  if (size === 'large') {
+	    return '20px';
 	  }
+	  if (size === 'small') {
+	    return '12px';
+	  }
+	  return '16px';
+	}
+	function SvgIcon(_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.createElement("i", {
+	    style: s
+	  }, /*#__PURE__*/React.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.createElement(Type, _extends$8({
+	        key: ix
+	      }, attrs))
+	    );
+	  })));
+	}
 
-	  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-	};
-
-	var InfiniteLoader = function (_PureComponent) {
-	  inherits$1(InfiniteLoader, _PureComponent);
-
-	  function InfiniteLoader() {
-	    var _ref;
-
-	    var _temp, _this, _ret;
-
-	    classCallCheck$1(this, InfiniteLoader);
-
-	    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-	      args[_key] = arguments[_key];
+	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(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(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(unlock(props)));
+
+	function isRangeVisible(_ref) {
+	  var lastRenderedStartIndex = _ref.lastRenderedStartIndex,
+	      lastRenderedStopIndex = _ref.lastRenderedStopIndex,
+	      startIndex = _ref.startIndex,
+	      stopIndex = _ref.stopIndex;
+
+	  return !(startIndex > lastRenderedStopIndex || stopIndex < lastRenderedStartIndex);
+	}
+
+	function scanForUnloadedRanges(_ref) {
+	  var isItemLoaded = _ref.isItemLoaded,
+	      itemCount = _ref.itemCount,
+	      minimumBatchSize = _ref.minimumBatchSize,
+	      startIndex = _ref.startIndex,
+	      stopIndex = _ref.stopIndex;
+
+	  var unloadedRanges = [];
+
+	  var rangeStartIndex = null;
+	  var rangeStopIndex = null;
+
+	  for (var _index = startIndex; _index <= stopIndex; _index++) {
+	    var loaded = isItemLoaded(_index);
+
+	    if (!loaded) {
+	      rangeStopIndex = _index;
+	      if (rangeStartIndex === null) {
+	        rangeStartIndex = _index;
+	      }
+	    } else if (rangeStopIndex !== null) {
+	      unloadedRanges.push(rangeStartIndex, rangeStopIndex);
+
+	      rangeStartIndex = rangeStopIndex = null;
+	    }
+	  }
+
+	  // If :rangeStopIndex is not null it means we haven't ran out of unloaded rows.
+	  // Scan forward to try filling our :minimumBatchSize.
+	  if (rangeStopIndex !== null) {
+	    var potentialStopIndex = Math.min(Math.max(rangeStopIndex, rangeStartIndex + minimumBatchSize - 1), itemCount - 1);
+
+	    for (var _index2 = rangeStopIndex + 1; _index2 <= potentialStopIndex; _index2++) {
+	      if (!isItemLoaded(_index2)) {
+	        rangeStopIndex = _index2;
+	      } else {
+	        break;
+	      }
+	    }
+
+	    unloadedRanges.push(rangeStartIndex, rangeStopIndex);
+	  }
+
+	  // Check to see if our first range ended prematurely.
+	  // In this case we should scan backwards to try filling our :minimumBatchSize.
+	  if (unloadedRanges.length) {
+	    while (unloadedRanges[1] - unloadedRanges[0] + 1 < minimumBatchSize && unloadedRanges[0] > 0) {
+	      var _index3 = unloadedRanges[0] - 1;
+
+	      if (!isItemLoaded(_index3)) {
+	        unloadedRanges[0] = _index3;
+	      } else {
+	        break;
+	      }
+	    }
+	  }
+
+	  return unloadedRanges;
+	}
+
+	var classCallCheck$1 = function (instance, Constructor) {
+	  if (!(instance instanceof Constructor)) {
+	    throw new TypeError("Cannot call a class as a function");
+	  }
+	};
+
+	var createClass$1 = function () {
+	  function defineProperties(target, props) {
+	    for (var i = 0; i < props.length; i++) {
+	      var descriptor = props[i];
+	      descriptor.enumerable = descriptor.enumerable || false;
+	      descriptor.configurable = true;
+	      if ("value" in descriptor) descriptor.writable = true;
+	      Object.defineProperty(target, descriptor.key, descriptor);
+	    }
+	  }
+
+	  return function (Constructor, protoProps, staticProps) {
+	    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+	    if (staticProps) defineProperties(Constructor, staticProps);
+	    return Constructor;
+	  };
+	}();
+
+	var inherits$1 = function (subClass, superClass) {
+	  if (typeof superClass !== "function" && superClass !== null) {
+	    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+	  }
+
+	  subClass.prototype = Object.create(superClass && superClass.prototype, {
+	    constructor: {
+	      value: subClass,
+	      enumerable: false,
+	      writable: true,
+	      configurable: true
+	    }
+	  });
+	  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+	};
+
+	var possibleConstructorReturn$1 = function (self, call) {
+	  if (!self) {
+	    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+	  }
+
+	  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+	};
+
+	var InfiniteLoader = function (_PureComponent) {
+	  inherits$1(InfiniteLoader, _PureComponent);
+
+	  function InfiniteLoader() {
+	    var _ref;
+
+	    var _temp, _this, _ret;
+
+	    classCallCheck$1(this, InfiniteLoader);
+
+	    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+	      args[_key] = arguments[_key];
+	    }
+
+	    return _ret = (_temp = (_this = possibleConstructorReturn$1(this, (_ref = InfiniteLoader.__proto__ || Object.getPrototypeOf(InfiniteLoader)).call.apply(_ref, [this].concat(args))), _this), _this._lastRenderedStartIndex = -1, _this._lastRenderedStopIndex = -1, _this._memoizedUnloadedRanges = [], _this._onItemsRendered = function (_ref2) {
+	      var visibleStartIndex = _ref2.visibleStartIndex,
+	          visibleStopIndex = _ref2.visibleStopIndex;
 
-	    return _ret = (_temp = (_this = possibleConstructorReturn$1(this, (_ref = InfiniteLoader.__proto__ || Object.getPrototypeOf(InfiniteLoader)).call.apply(_ref, [this].concat(args))), _this), _this._lastRenderedStartIndex = -1, _this._lastRenderedStopIndex = -1, _this._memoizedUnloadedRanges = [], _this._onItemsRendered = function (_ref2) {
-	      var visibleStartIndex = _ref2.visibleStartIndex,
-	          visibleStopIndex = _ref2.visibleStopIndex;
-
 	      _this._lastRenderedStartIndex = visibleStartIndex;
 	      _this._lastRenderedStopIndex = visibleStopIndex;
 
@@ -21558,9 +21518,6 @@
 	function isStateSelected(qState) {
 	  return SELECTED_STATES.includes(qState);
 	}
-	function getUniques(arr) {
-	  return Array.isArray(arr) ? Array.from(new Set(arr)) : undefined;
-	}
 	function getSelectedValues(pages) {
 	  if (!pages || !pages.length) {
 	    return [];
@@ -21574,45 +21531,38 @@
 	  });
 	  return flatten(elementNbrs);
 	}
-	function applySelectionsOnPages(pages, elmNumbers) {
-	  let clearAllButElmNumbers = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-	  const getNewSelectionState = qState => elmNumbers.length <= 1 && isStateSelected(qState) ? 'A' : 'S';
-	  const matrices = pages.map(page => {
-	    const qMatrix = page.qMatrix.map(p => {
-	      const [p0] = p;
-	      const selectionMatchesElement = elmNumbers.includes(p0.qElemNumber);
-	      let qState;
-	      if (clearAllButElmNumbers) {
-	        qState = selectionMatchesElement ? 'S' : 'A';
-	      } else {
-	        qState = selectionMatchesElement ? getNewSelectionState(p0.qState) : p0.qState;
-	      }
-	      return [_objectSpread2(_objectSpread2({}, p0), {}, {
-	        qState
-	      }), p.slice(1)];
-	    });
-	    return _objectSpread2(_objectSpread2({}, page), {}, {
-	      qMatrix
-	    });
-	  });
-	  return matrices;
-	}
 	async function selectValues(_ref) {
 	  let {
 	    selections,
 	    elemNumbers,
-	    isSingleSelect = false
+	    toggle,
+	    isSingleSelect
 	  } = _ref;
-	  let resolved = Promise.resolve(false);
+	  if (elemNumbers.length === 0) {
+	    return false;
+	  }
 	  const hasNanValues = elemNumbers.some(elemNumber => Number.isNaN(elemNumber));
+	  let success = false;
 	  if (!hasNanValues) {
 	    const elemNumbersToSelect = elemNumbers;
-	    resolved = selections.select({
-	      method: 'selectListObjectValues',
-	      params: ['/qListObjectDef', elemNumbersToSelect, !isSingleSelect]
-	    }).then(success => success !== false).catch(() => false);
+	    try {
+	      const response = await selections.select({
+	        method: 'selectListObjectValues',
+	        params: ['/qListObjectDef', elemNumbersToSelect, toggle]
+	      });
+	      success = response !== false;
+	    } catch (_unused) {
+	      success = false;
+	    }
+	    if (!success) {
+	      if (isSingleSelect) {
+	        selections.cancel(); // revert selection
+	      } else {
+	        selections.clear();
+	      }
+	    }
 	  }
-	  return resolved;
+	  return success;
 	}
 	function getElemNumbersFromPages(pages) {
 	  if (!pages || !pages.length) {
@@ -21675,126 +21625,132 @@
 	  return elemNumbersOrdered.slice(min, max + 1);
 	}
 
+	const getKeyAsToggleSelected = event => !(event.metaKey || event.ctrlKey);
 	function useSelectionsInteractions(_ref) {
 	  let {
-	    layout,
+	    selectionState,
 	    selections,
-	    pages = [],
 	    checkboxes = false,
-	    selectDisabled,
-	    doc = document,
-	    isSingleSelect: singleSelect = false
+	    doc = document
 	  } = _ref;
-	  const [instantPages, setInstantPages] = reactExports.useState(pages);
-	  const [mouseDown, setMouseDown] = reactExports.useState(false);
-	  const [selectingValues, setSelectingValues] = reactExports.useState(false);
-	  const [isSingleSelect, setIsSingleSelect] = reactExports.useState(singleSelect);
-	  const [selected, setSelected] = reactExports.useState([]);
-	  const [isRangeSelection, setIsRangeSelection] = reactExports.useState(false);
-	  const [preSelected, setPreSelected] = reactExports.useState([]);
-	  const elemNumbersOrdered = getElemNumbersFromPages(pages);
-	  reactExports.useEffect(() => {
-	    setIsSingleSelect(singleSelect);
-	  }, [singleSelect]);
-
-	  // Select values for real, by calling the backend.
-	  const select = async function () {
-	    let elemNumbers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-	    let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-	    if (selectDisabled()) {
-	      return;
-	    }
-	    setSelectingValues(true);
-	    const filtered = additive ? elemNumbers.filter(n => !selected.includes(n)) : elemNumbers;
-	    await selectValues({
+	  const currentSelect = reactExports.useRef({
+	    startElemNumber: undefined,
+	    elemNumbers: [],
+	    isRange: false,
+	    toggle: false,
+	    active: false
+	  });
+
+	  // eslint-disable-next-line arrow-body-style
+	  const doSelect = () => {
+	    selectionState.setSelectableValuesUpdating();
+	    return selectValues({
 	      selections,
-	      elemNumbers: filtered,
-	      isSingleSelect
+	      elemNumbers: currentSelect.current.elemNumbers,
+	      isSingleSelect: selectionState.isSingleSelect,
+	      toggle: currentSelect.current.toggle
 	    });
-	    setSelectingValues(false);
-	    setPreSelected([]);
 	  };
-
-	  // Show estimated selection states instantly before applying the selections for real.
-	  const preSelect = function (elemNumbers) {
-	    let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-	    if (selectDisabled()) {
+	  const addToRange = elemNumber => {
+	    const {
+	      startElemNumber
+	    } = currentSelect.current;
+	    if (startElemNumber === elemNumber) {
 	      return;
 	    }
-	    setPreSelected(existing => {
-	      const uniques = getUniques([...existing, ...elemNumbers]);
-	      const filtered = additive ? uniques.filter(n => !selected.includes(n)) : uniques;
-	      const filled = additive ? fillRange(uniques, elemNumbersOrdered) : filtered;
-	      return filled;
-	    });
+	    const rangeEnds = [currentSelect.current.startElemNumber, elemNumber];
+	    const elemNumbersOrdered = getElemNumbersFromPages(selectionState.enginePages);
+	    const toMaybeAdd = fillRange(rangeEnds, elemNumbersOrdered);
+	    selectionState.updateItems(toMaybeAdd, true, currentSelect.current.elemNumbers);
 	  };
 	  const selectManually = function () {
 	    let elementIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
 	    let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-	    setIsRangeSelection(false); // range is not supported for manual select
-	    setMouseDown(true);
-	    preSelect(elementIds, additive || isRangeSelection);
-	    const p = select(elementIds, additive || isRangeSelection);
-	    setMouseDown(false);
-	    return p;
-	  };
-	  const handleSingleSelectKey = event => {
+	    const elemNumbers = [];
+	    selectionState.updateItems(elementIds, additive, elemNumbers);
+	    selectionState.setSelectableValuesUpdating();
+	    return selectValues({
+	      selections,
+	      elemNumbers: additive ? elemNumbers : elementIds,
+	      isSingleSelect: selectionState.isSingleSelect,
+	      toggle: !selectionState.isSingleSelect
+	    });
+	  };
+	  const handleSingleSelectKey = (event, target) => {
 	    if (event.ctrlKey || event.metaKey) {
-	      setIsSingleSelect(true);
-	      event.currentTarget.focus(); // will not be focused otherwise
+	      target.focus(); // will not be focused otherwise
 	      event.preventDefault();
 	    }
 	  };
-	  const onClick = reactExports.useCallback(event => {
-	    if (selectingValues || selectDisabled()) {
+	  const onChange = reactExports.useCallback(event => {
+	    if (selectionState.selectDisabled()) {
 	      return;
 	    }
-	    const elemNumber = +event.currentTarget.getAttribute('data-n');
-	    setPreSelected([elemNumber]);
-	    handleSingleSelectKey(event);
-	  }, [selectingValues, selectDisabled]);
+	    const elemNumber = +event.target.getAttribute('data-n');
+	    const toggle = !selectionState.isSingleSelect && getKeyAsToggleSelected(event.nativeEvent);
+	    currentSelect.current.elemNumbers = [elemNumber];
+	    currentSelect.current.toggle = toggle;
+	    if (!toggle) {
+	      selectionState.clearItemStates(true);
+	    }
+	    selectionState.updateItem(elemNumber);
+	    currentSelect.current.active = false;
+	    doSelect();
+	  }, []);
 	  const onMouseDown = reactExports.useCallback(event => {
-	    if (selectingValues || selectDisabled()) {
+	    if (selectionState.selectDisabled()) {
 	      return;
 	    }
-	    setIsRangeSelection(false);
-	    setMouseDown(true);
 	    const elemNumber = +event.currentTarget.getAttribute('data-n');
-	    setPreSelected([elemNumber]);
-	    handleSingleSelectKey(event);
-	  }, [selectingValues, selectDisabled]);
+	    const toggle = !selectionState.isSingleSelect && getKeyAsToggleSelected(event);
+	    currentSelect.current.isRange = false;
+	    currentSelect.current.startElemNumber = elemNumber;
+	    currentSelect.current.elemNumbers = [elemNumber];
+	    currentSelect.current.toggle = toggle;
+	    currentSelect.current.active = true;
+	    if (!toggle) {
+	      selectionState.clearItemStates(true);
+	    }
+	    selectionState.updateItem(elemNumber);
+	    if (selectionState.isSingleSelect) {
+	      currentSelect.current.active = false;
+	      doSelect();
+	    }
+	    handleSingleSelectKey(event, event.currentTarget);
+	  }, []);
 	  const onMouseUp = reactExports.useCallback(event => {
-	    const elemNumber = +event.currentTarget.getAttribute('data-n');
-	    if (isSingleSelect || !mouseDown || selectingValues || preSelected.length === 1 && preSelected[0] === elemNumber // prevent toggling again on mouseup
-	    ) {
+	    if (!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 = reactExports.useCallback(() => {
 	    // Ensure we end interactions when mouseup happens outside the Listbox.
-	    setMouseDown(false);
-	    setSelectingValues(false);
-	    setIsRangeSelection(false);
-	    setIsSingleSelect(singleSelect);
-	  }, [singleSelect]);
-	  const onMouseEnter = reactExports.useCallback(event => {
-	    if (isSingleSelect || !mouseDown || selectingValues || selectDisabled()) {
+	    if (!currentSelect.current.active) {
 	      return;
 	    }
-	    setIsRangeSelection(true);
-	    const elemNumber = +event.currentTarget.getAttribute('data-n');
-	    preSelect([elemNumber], true);
-	  }, [mouseDown, selectingValues, isRangeSelection, preSelected, selected, selectDisabled, layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne]);
-	  reactExports.useEffect(() => {
-	    // Perform selections of pre-selected values. This can
-	    // happen only when interactions have finished (mouseup).
-	    const interactionIsFinished = !mouseDown;
-	    if (!preSelected || !preSelected.length || selectingValues || !interactionIsFinished || !layout) {
+	    currentSelect.current.active = false;
+	    doSelect();
+	  }, []);
+	  const onMouseEnter = reactExports.useCallback(event => {
+	    if (!currentSelect.current.active) {
 	      return;
 	    }
-	    select(preSelected, isRangeSelection);
-	  }, [preSelected, mouseDown, selectDisabled()]);
+	    if (!currentSelect.current.isRange) {
+	      currentSelect.current.isRange = true;
+	      if (!selectionState.isSelected(currentSelect.current.startElemNumber)) {
+	        selectionState.updateItem(currentSelect.current.startElemNumber, true);
+	        currentSelect.current.elemNumbers = [];
+	      }
+	    }
+	    const elemNumber = +event.currentTarget.getAttribute('data-n');
+	    addToRange(elemNumber);
+	  }, []);
 	  reactExports.useEffect(() => {
 	    doc.addEventListener('mouseup', onMouseUpDoc);
 	    return () => {
@@ -21802,25 +21758,24 @@
 	    };
 	  }, [onMouseUpDoc]);
 	  reactExports.useEffect(() => {
-	    if (selectingValues || mouseDown) {
-	      return;
-	    }
-	    // Keep track of (truely) selected fields so we can prevent toggling them on range select.
-	    const alreadySelected = getSelectedValues(pages);
-	    setSelected(alreadySelected);
-	  }, [pages]);
-	  reactExports.useEffect(() => {
-	    if (selectingValues || !pages || !checkboxes && !mouseDown) {
-	      return;
-	    }
-	    // Render pre-selections before they have been selected in Engine.
-	    const newPages = applySelectionsOnPages(pages, preSelected, isSingleSelect);
-	    setInstantPages(newPages);
-	  }, [preSelected]);
+	    const 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, {
@@ -21830,7 +21785,6 @@
 	    });
 	  }
 	  return {
-	    instantPages,
 	    interactionEvents,
 	    select: selectManually // preselect and select without having to trigger an event
 	  };
@@ -21846,108 +21800,12 @@
 	});
 	var Tick = (props => SvgIcon(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$1)(_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.createElement("span", {
-	    className: cls.cbIcon
-	  }, excluded && /*#__PURE__*/React.createElement("span", {
-	    className: showGray && excluded ? cls.cbIconExcluded : ''
-	  }));
-	};
-	function ListboxCheckbox(_ref2) {
-	  let {
-	    checked,
-	    label,
-	    dense,
-	    excluded,
-	    showGray = true
-	  } = _ref2;
-	  return /*#__PURE__*/React.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.createElement("span", {
-	      className: classes$c.cbIconChecked
-	    })
-	  });
-	}
-
-	/**
-	 * @ignore
-	 * @interface Range
-	 * @property {number} qCharPos The (absolute) index where the highlighted range starts.
-	 * @property {number} qCharCount The length of the sub-string (starting from qChartPos) that should be highlighted.
-	 */
+	/**
+	 * @ignore
+	 * @interface Range
+	 * @property {number} qCharPos The (absolute) index where the highlighted range starts.
+	 * @property {number} qCharCount The length of the sub-string (starting from qChartPos) that should be highlighted.
+	 */
 
 	/**
 	 * @ignore
@@ -22006,45 +21864,6 @@
 	  return labels;
 	}
 
-	const PREFIX$b = 'ListBoxRadioButton';
-	const classes$b = {
-	  denseRadioButton: "".concat(PREFIX$b, "-denseRadioButton"),
-	  radioButton: "".concat(PREFIX$b, "-radioButton")
-	};
-	const StyledRadio = styled$1(Radio$1)(_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.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,
@@ -22270,12 +22089,691 @@
 	      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.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$1)(_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.createElement("span", {
+	    className: cls.cbIcon
+	  }, excluded && /*#__PURE__*/React.createElement("span", {
+	    className: showGray && excluded ? cls.cbIconExcluded : ''
+	  }));
+	};
+	function ListboxCheckbox(_ref2) {
+	  let {
+	    onChange,
+	    checked,
+	    label,
+	    dense,
+	    excluded,
+	    showGray = true,
+	    dataN
+	  } = _ref2;
+	  return /*#__PURE__*/React.createElement(StyledCheckbox, {
+	    edge: "start",
+	    onChange: onChange,
+	    checked: checked,
+	    disableRipple: true,
+	    className: [classes$b.checkbox, dense && classes$b.dense].filter(Boolean).join(' '),
+	    inputProps: {
+	      'aria-labelledby': label,
+	      'data-n': dataN
+	    },
+	    name: label,
+	    icon: getIcon(classes$b, showGray, excluded),
+	    checkedIcon: /*#__PURE__*/React.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$1)(_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.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.createElement(Typography$1, {
+	    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.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.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.createElement(ListboxCheckbox, {
+	    onChange: onChange,
+	    label: label,
+	    checked: isSelected,
+	    dense: dense,
+	    excluded: isExcluded(cell),
+	    isGridCol: isGridCol,
+	    showGray: showGray,
+	    dataN: qElemNumber
+	  });
+	  const rb = /*#__PURE__*/React.createElement(ListBoxRadioButton, {
+	    onChange: onChange,
+	    label: label,
+	    checked: isSelected,
+	    dense: dense,
+	    dataN: qElemNumber
+	  });
+	  return /*#__PURE__*/React.createElement(FormControlLabel$1, {
+	    color: color,
+	    control: isSingleSelect ? rb : cb,
+	    className: rowColClasses.checkboxLabel,
+	    label: /*#__PURE__*/React.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.createElement(React.Fragment, null, labels.map((_ref2, index) => {
+	    let [label, highlighted] = _ref2;
+	    const key = "".concat(index);
+	    return /*#__PURE__*/React.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.createElement(LabelsWithRanges, {
+	    labels: labels,
+	    dense: dense,
+	    showGray: showGray,
+	    checkboxes: checkboxes
+	  });
+	  return checkboxes ? /*#__PURE__*/React.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.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.createElement(ValueField, {
+	    label: label,
+	    color: color,
+	    highlighted: false,
+	    dense: dense,
+	    showGray: true,
+	    checkboxes: checkboxes,
+	    cell: cell,
+	    valueTextAlign: valueTextAlign
+	  });
+	}
+	var Field$1 = React.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.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.createElement(Grid$1, {
+	    item: true,
+	    style: {
+	      display: 'flex',
+	      alignItems: 'center'
+	    },
+	    className: rowColClasses.frequencyCount
+	  }, /*#__PURE__*/React.createElement(Typography$1, {
+	    noWrap: true,
+	    color: "inherit",
+	    variant: "body2",
+	    className: joinClassNames([dense && rowColClasses.labelDense, rowColClasses.labelText, showGray && excludedOrAlternative({
+	      cell,
+	      checkboxes
+	    }) && rowColClasses.excludedTextWithCheckbox])
+	  }, getFrequencyText({
+	    cell
+	  })));
 	}
 
 	function getGridItemSizes(_ref) {
@@ -22295,243 +22793,69 @@
 	    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$1, {
-	  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,
@@ -22555,7 +22879,8 @@
 	    dataOffset,
 	    focusListItems,
 	    listCount,
-	    itemPadding
+	    itemPadding,
+	    frequencyWidth
 	  } = data;
 	  const {
 	    dense = false,
@@ -22607,52 +22932,29 @@
 	  const handleKeyDownCallback = reactExports.useCallback(getFieldKeyboardNavigation(_objectSpread2(_objectSpread2({}, actions), {}, {
 	    focusListItems
 	  })), [actions]);
-	  const [isSelected, setSelected] = reactExports.useState(false);
-	  const [cell, setCell] = reactExports.useState();
-	  const [classArr, setClassArr] = reactExports.useState([]);
-	  reactExports.useEffect(() => {
-	    if (!pages) {
-	      return;
-	    }
-	    let c;
-	    const page = pages.filter(p => p.qArea.qTop <= cellIndex && cellIndex < p.qArea.qTop + p.qArea.qHeight)[0];
-	    if (page) {
-	      const area = page.qArea;
-	      if (cellIndex >= area.qTop && cellIndex < area.qTop + area.qHeight) {
-	        [c] = page.qMatrix[cellIndex - area.qTop];
-	      }
-	    }
-	    setCell(c);
-	  }, [pages]);
-	  const isExcluded = c => c ? c.qState === 'X' || c.qState === 'XS' || c.qState === 'XL' : null;
-	  const isAlternative = c => c ? c.qState === 'A' : null;
-	  reactExports.useEffect(() => {
-	    if (!cell) {
-	      return;
+	  const cell = reactExports.useMemo(() => getCellFromPages({
+	    pages,
+	    cellIndex
+	  }), [pages, cellIndex]);
+	  const isSelected = (cell === null || cell === void 0 ? void 0 : cell.qState) === 'S' || (cell === null || cell === void 0 ? void 0 : cell.qState) === 'XS' || (cell === null || cell === void 0 ? void 0 : cell.qState) === 'L';
+	  const classArr = reactExports.useMemo(() => getValueStateClasses({
+	    column,
+	    histogram,
+	    checkboxes,
+	    cell,
+	    showGray
+	  }), [cell === null || cell === void 0 ? void 0 : cell.qState, histogram, dense, checkboxes]);
+	  const preventContextMenu = reactExports.useCallback(event => {
+	    if (checkboxes) {
+	      // Event will not propagate in the checkbox/radiobutton case
+	      onClick(event);
 	    }
-	    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);
-	      }
-	    }
-	    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;
@@ -22665,94 +22967,16 @@
 	  } 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.createElement(Typography$1, {
-	      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.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.createElement(ListboxCheckbox, {
-	      label: lbl,
-	      checked: isSelected,
-	      dense: dense,
-	      excluded: isExcluded(cell),
-	      isGridCol: isGridCol,
-	      showGray: showGray
-	    });
-	    const rb = /*#__PURE__*/React.createElement(ListBoxRadioButton, {
-	      label: lbl,
-	      checked: isSelected,
-	      dense: dense
-	    });
-	    const labelTag = typeof lbl === 'string' ? getValueField({
-	      lbl,
-	      color,
-	      highlighted: false
-	    }) : lbl;
-	    return /*#__PURE__*/React.createElement(FormControlLabel$1, {
-	      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',
@@ -22765,37 +22989,30 @@
 	    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.createElement(Root$1, {
-	    className: classes$a.barContainer,
+	  return /*#__PURE__*/React.createElement(RowColRoot$1, {
+	    className: rowColClasses.barContainer,
 	    flexBasisProp: flexBasisVal,
 	    style: styles,
 	    isGridCol: isGridCol,
 	    isGridMode: dataLayout === 'grid',
-	    dense: dense
+	    dense: dense,
+	    frequencyWidth: frequencyWidth
 	  }, /*#__PURE__*/React.createElement(ItemGrid, {
 	    ref: rowRef,
 	    container: true,
 	    dataLayout: dataLayout,
+	    checkboxes: checkboxes,
 	    layoutOrder: layoutOrder,
 	    itemPadding: itemPadding,
 	    gap: 0,
 	    className: joinClassNames(['value', ...classArr]),
 	    classes: {
-	      root: classes$a.fieldRoot
+	      root: rowColClasses.fieldRoot
 	    },
 	    onClick: onClick,
 	    onMouseDown: onMouseDown,
@@ -22805,37 +23022,53 @@
 	    onContextMenu: preventContextMenu,
 	    role: column ? 'column' : 'row',
 	    tabIndex: isFirstElement && (!keyboard.enabled || keyboard.active) ? 0 : -1,
-	    "data-n": cell && cell.qElemNumber
-	  }, hasHistogramBar() && /*#__PURE__*/React.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.createElement(Histogram, {
+	    cell: cell,
+	    histogram: histogram,
+	    checkboxes: checkboxes,
+	    isSelected: isSelected,
+	    frequencyMax: frequencyMax
 	  }), /*#__PURE__*/React.createElement(Grid$1, {
 	    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.createElement(Grid$1, {
-	    item: true,
-	    style: {
-	      display: 'flex',
-	      alignItems: 'center'
-	    },
-	    className: classes$a.frequencyCount
-	  }, /*#__PURE__*/React.createElement(Typography$1, {
-	    noWrap: true,
+	  }, labels ? /*#__PURE__*/React.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.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.createElement(Grid$1, {
+	    qElemNumber: cell.qElemNumber,
+	    isSelected: isSelected,
+	    dense: dense,
+	    cell: cell,
+	    isGridCol: isGridCol,
+	    showGray: showGray,
+	    isSingleSelect: isSingleSelect,
+	    checkboxes: checkboxes,
+	    valueTextAlign: valueTextAlign
+	  })), freqIsAllowed && /*#__PURE__*/React.createElement(Frequency, {
+	    cell: cell,
+	    checkboxes: checkboxes,
+	    dense: dense,
+	    showGray: showGray
+	  }), !checkboxes && /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
-	    className: classes$a.icon
+	    className: rowColClasses.icon
 	  }, !showLock && !showTick && /*#__PURE__*/React.createElement("span", {
 	    style: {
 	      minWidth: '12px'
@@ -22849,21 +23082,6 @@
 	  }))));
 	}
 
-	const FREQUENCY_MIN_SHOW_WIDTH = 80;
-	function getFrequencyAllowed(_ref) {
-	  let {
-	    width,
-	    layout,
-	    frequencyMode
-	  } = _ref;
-	  const widthPermitsFreq = width > FREQUENCY_MIN_SHOW_WIDTH;
-	  const {
-	    frequencyEnabled = false
-	  } = (layout === null || layout === void 0 ? void 0 : layout.qListObject) || {};
-	  const hasValidFreqOption = !['none', undefined].includes(frequencyMode);
-	  return !!(widthPermitsFreq && (hasValidFreqOption || frequencyEnabled));
-	}
-
 	function deriveRenderOptions(options) {
 	  const {
 	    renderProps,
@@ -24310,8 +24528,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
@@ -24326,42 +24545,27 @@
 	    '&::-webkit-scrollbar-thumb:hover': {
 	      backgroundColor: scrollBarThumbHover
 	    }
-	  };
-	  const StyledFixedSizeList = newStyled(FixedSizeList)(() => ({
-	    ["&.".concat(classes$9.styledScrollbars)]: scrollbarStyling,
-	    // TODO: Verify these props and make generic together with grid component.
-	    '&::-webkit-scrollbar': {
-	      width: 10,
-	      height: 10
-	    },
-	    '&::-webkit-scrollbar-track': {
-	      backgroundColor: scrollBarBackground
-	    },
-	    '&::-webkit-scrollbar-thumb': {
-	      backgroundColor: scrollBarThumb,
-	      borderRadius: '1rem'
-	    },
-	    '&::-webkit-scrollbar-thumb:hover': {
-	      backgroundColor: scrollBarThumbHover
-	    }
-	  }));
-	  const StyledFixedSizeGrid = newStyled(FixedSizeGrid)(() => ({
-	    ["&.".concat(classes$9.styledScrollbars)]: scrollbarStyling,
-	    '&::-webkit-scrollbar': {
-	      width: 10,
-	      height: 10
-	    },
-	    '&::-webkit-scrollbar-track': {
-	      backgroundColor: scrollBarBackground
-	    },
-	    '&::-webkit-scrollbar-thumb': {
-	      backgroundColor: scrollBarThumb,
-	      borderRadius: '1rem'
-	    },
-	    '&::-webkit-scrollbar-thumb:hover': {
-	      backgroundColor: scrollBarThumbHover
-	    }
-	  }));
+	  });
+	  const StyledFixedSizeList = newStyled(FixedSizeList, {
+	    shouldForwardProp: prop => prop !== 'scrollDisabled'
+	  })(_ref => {
+	    let {
+	      scrollDisabled
+	    } = _ref;
+	    return {
+	      ["&.".concat(classes$9.styledScrollbars)]: getScrollbarStyling(scrollDisabled)
+	    };
+	  });
+	  const StyledFixedSizeGrid = newStyled(FixedSizeGrid, {
+	    shouldForwardProp: prop => prop !== 'scrollDisabled'
+	  })(_ref2 => {
+	    let {
+	      scrollDisabled
+	    } = _ref2;
+	    return {
+	      ["&.".concat(classes$9.styledScrollbars)]: getScrollbarStyling(scrollDisabled)
+	    };
+	  });
 	  return {
 	    StyledFixedSizeList,
 	    StyledFixedSizeGrid
@@ -24427,13 +24631,14 @@
 	    showGray,
 	    scrollState,
 	    direction,
-	    listLayout,
 	    sizes,
 	    listCount,
 	    overflowDisclaimer,
 	    setScrollPosition,
 	    focusListItems,
-	    setCurrentScrollIndex
+	    setCurrentScrollIndex,
+	    constraints,
+	    freqIsAllowed
 	  } = _ref;
 	  const {
 	    layoutOptions = {},
@@ -24444,7 +24649,8 @@
 	    listHeight,
 	    itemSize,
 	    rowCount,
-	    columnCount
+	    columnCount,
+	    frequencyWidth
 	  } = sizes || {};
 
 	  // Options common for List and Grid.
@@ -24464,14 +24670,11 @@
 	    checkboxes,
 	    layoutOptions,
 	    frequencyMode,
-	    freqIsAllowed: getFrequencyAllowed({
-	      width,
-	      layout,
-	      frequencyMode
-	    }),
+	    freqIsAllowed,
 	    isSingleSelect,
 	    textAlign,
 	    itemPadding,
+	    frequencyWidth,
 	    actions: {
 	      select,
 	      confirm: () => selections === null || selections === void 0 ? void 0 : selections.confirm.call(selections),
@@ -24496,10 +24699,10 @@
 	    // eslint-disable-next-line react/jsx-props-no-spreading
 	    , _extends$8({}, commonComponentOptions, {
 	      dataTestid: "fixed-size-list",
+	      scrollDisabled: constraints === null || constraints === void 0 ? void 0 : constraints.active,
 	      height: listHeight,
 	      width: width,
 	      itemCount: listCount,
-	      layout: listLayout,
 	      itemData: _objectSpread2(_objectSpread2({}, commonItemData), {}, {
 	        listCount
 	      }),
@@ -24574,6 +24777,7 @@
 	    // eslint-disable-next-line react/jsx-props-no-spreading
 	    , _extends$8({}, commonComponentOptions, {
 	      dataTestid: "fixed-size-grid",
+	      scrollDisabled: constraints === null || constraints === void 0 ? void 0 : constraints.active,
 	      height: gridHeight,
 	      width: width,
 	      columnCount: columnCount,
@@ -24598,6 +24802,9 @@
 
 	const scrollBarWidth = 10; // TODO: ignore this - instead set the styling only show on hover...
 
+	const ITEM_MIN_WIDTH = 56;
+	const ITEM_MAX_WIDTH = 150;
+	const FREQUENCY_WIDTH = 40;
 	function getListSizes(_ref) {
 	  let {
 	    layout,
@@ -24605,7 +24812,8 @@
 	    height,
 	    listCount,
 	    count,
-	    textWidth
+	    textWidth,
+	    freqIsAllowed
 	  } = _ref;
 	  const {
 	    layoutOptions = {}
@@ -24617,7 +24825,8 @@
 	    dense,
 	    dataLayout
 	  } = layoutOptions;
-	  const columnAutoWidth = Math.min(150, textWidth + 18);
+	  const frequencyAddWidth = freqIsAllowed ? FREQUENCY_WIDTH : 0;
+	  const columnAutoWidth = Math.max(Math.min(ITEM_MAX_WIDTH, textWidth + 18 + frequencyAddWidth), ITEM_MIN_WIDTH + frequencyAddWidth);
 	  let overflowStyling;
 	  let columnCount;
 	  let columnWidth;
@@ -24634,18 +24843,21 @@
 	  }
 	  const listHeight = height !== null && height !== void 0 ? height : 8 * itemSize;
 	  if (layoutOrder) {
+	    // Modify container width to achieve the exact design with 8px margins on each side (left and right).
+	    let containerWidth = width;
 	    if (layoutOrder === 'row') {
+	      containerWidth += itemPadding * 2;
 	      overflowStyling = {
 	        overflowX: 'hidden'
 	      };
 	      const maxColumns = (maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.maxColumns) || 3;
 	      if ((maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.auto) !== false) {
-	        columnCount = Math.min(listCount, Math.ceil((width - scrollBarWidth) / columnAutoWidth)); // TODO: smarter sizing... based on glyph count + font size etc...??
+	        columnCount = Math.min(listCount, Math.ceil((containerWidth - scrollBarWidth) / columnAutoWidth)); // TODO: smarter sizing... based on glyph count + font size etc...??
 	      } else {
 	        columnCount = Math.min(listCount, maxColumns);
 	      }
 	      rowCount = Math.ceil(listCount / columnCount);
-	      columnWidth = (width - scrollBarWidth) / columnCount;
+	      columnWidth = (containerWidth - scrollBarWidth) / columnCount;
 	    } else {
 	      overflowStyling = {
 	        overflowY: 'hidden'
@@ -24657,7 +24869,7 @@
 	        rowCount = Math.min(listCount, maxRows);
 	      }
 	      columnCount = Math.ceil(listCount / rowCount);
-	      columnWidth = Math.max(columnAutoWidth, width / columnCount);
+	      columnWidth = Math.max(columnAutoWidth, containerWidth / columnCount);
 	    }
 	  }
 	  columnCount = (dataLayout === 'singleColumn' ? 1 : columnCount) || 1;
@@ -24683,7 +24895,8 @@
 	      row: maxRowCount,
 	      column: maxColumnCount
 	    },
-	    itemPadding
+	    itemPadding,
+	    frequencyWidth: FREQUENCY_WIDTH
 	  };
 	}
 
@@ -25033,18 +25246,35 @@
 	  };
 	}
 
+	const FREQUENCY_MIN_SHOW_WIDTH = 80;
+	function getFrequencyAllowed(_ref) {
+	  let {
+	    itemWidth,
+	    layout,
+	    frequencyMode
+	  } = _ref;
+	  const widthPermitsFreq = itemWidth > FREQUENCY_MIN_SHOW_WIDTH;
+	  const {
+	    frequencyEnabled = false
+	  } = (layout === null || layout === void 0 ? void 0 : layout.qListObject) || {};
+	  const hasValidFreqOption = !['none', undefined].includes(frequencyMode);
+	  return !!(widthPermitsFreq && (hasValidFreqOption || frequencyEnabled));
+	}
+
 	const _excluded$4 = ["isLoadingData"];
 	const DEFAULT_MIN_BATCH_SIZE = 100;
 	function ListBox(_ref) {
 	  var _layout$qListObject$q, _loaderRef$current, _loaderRef$current$_l, _loaderRef$current$_l2;
 	  let {
 	    model,
+	    constraints,
+	    layout,
 	    selections,
+	    selectionState,
 	    direction,
 	    checkboxes: checkboxOption,
 	    height,
 	    width,
-	    listLayout = 'vertical',
 	    frequencyMode,
 	    update = undefined,
 	    fetchStart = undefined,
@@ -25063,7 +25293,6 @@
 	    }
 	  } = _ref;
 	  const [initScrollPosIsSet, setInitScrollPosIsSet] = reactExports.useState(false);
-	  const [layout] = useLayout$1(model);
 	  const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
 	  const {
 	    checkboxes = checkboxOption,
@@ -25090,11 +25319,7 @@
 	      postProcessPages,
 	      listData
 	    }),
-	    {
-	      isLoadingData
-	    } = _useItemsLoader,
 	    itemsLoader = _objectWithoutProperties(_useItemsLoader, _excluded$4);
-	  const [pages, setPages] = reactExports.useState([]);
 	  const {
 	    setStoreValue
 	  } = useDataStore(model);
@@ -25106,9 +25331,16 @@
 	  const showOverflowDisclaimer = show => setOverflowDisclaimer(state => _objectSpread2(_objectSpread2({}, state), {}, {
 	    show
 	  }));
-	  reactExports.useEffect(() => {
-	    setPages((itemsLoader === null || itemsLoader === void 0 ? void 0 : itemsLoader.pages) || []);
-	  }, [itemsLoader === null || itemsLoader === void 0 ? void 0 : itemsLoader.pages]);
+	  const [pages, setPages] = reactExports.useState([]);
+	  if (itemsLoader !== null && itemsLoader !== void 0 && itemsLoader.pages) {
+	    selectionState.update({
+	      setPages,
+	      pages: itemsLoader === null || itemsLoader === void 0 ? void 0 : itemsLoader.pages,
+	      isSingleSelect,
+	      selectDisabled,
+	      layout
+	    });
+	  }
 	  const isItemLoaded = reactExports.useCallback(index => {
 	    if (!(pages !== null && pages !== void 0 && pages.length) || !local.current.validPages) {
 	      return false;
@@ -25119,17 +25351,13 @@
 	    return page && isLoaded(page);
 	  }, [layout, pages]);
 	  const {
-	    instantPages = [],
 	    interactionEvents,
 	    select
 	  } = useSelectionsInteractions({
-	    layout,
+	    selectionState,
 	    selections,
-	    pages,
 	    checkboxes,
-	    selectDisabled,
-	    doc: document,
-	    isSingleSelect
+	    doc: document
 	  });
 	  const {
 	    layoutOptions = {}
@@ -25169,12 +25397,6 @@
 	    // Hand over the update function for manual refresh from hosting application.
 	    update.call(null, fetchData);
 	  }
-	  reactExports.useEffect(() => {
-	    if (!instantPages || isLoadingData) {
-	      return;
-	    }
-	    setPages(instantPages);
-	  }, [instantPages]);
 	  reactExports.useEffect(() => {
 	    if (scrollState && !initScrollPosIsSet && loaderRef.current) {
 	      loaderRef.current._listRef.scrollToItem(scrollState.initScrollPos);
@@ -25189,7 +25411,7 @@
 	    font: '14px Source sans pro'
 	  });
 	  let minimumBatchSize = DEFAULT_MIN_BATCH_SIZE;
-	  const isVertical = layoutOptions.dataLayout ? layoutOptions.dataLayout === 'singleColumn' : listLayout !== 'horizontal';
+	  const isVertical = layoutOptions.dataLayout !== 'grid';
 	  const count = layout === null || layout === void 0 ? void 0 : (_layout$qListObject$q = layout.qListObject.qSize) === null || _layout$qListObject$q === void 0 ? void 0 : _layout$qListObject$q.qcy;
 	  const unlimitedListCount = getListCount({
 	    pages,
@@ -25199,14 +25421,28 @@
 	    layoutOptions,
 	    model
 	  });
+	  let freqIsAllowed = getFrequencyAllowed({
+	    itemWidth: width,
+	    layout,
+	    frequencyMode
+	  });
 	  const sizes = getListSizes({
 	    layout,
 	    width,
 	    height,
 	    listCount: unlimitedListCount,
 	    count,
-	    textWidth
+	    textWidth,
+	    freqIsAllowed
 	  });
+	  if (sizes.columnWidth) {
+	    // In grid mode, where we have a dynamic item width, get a second opinion on showing/hiding frequency.
+	    freqIsAllowed = getFrequencyAllowed({
+	      itemWidth: sizes.columnWidth,
+	      layout,
+	      frequencyMode
+	    });
+	  }
 	  const {
 	    listCount
 	  } = sizes;
@@ -25225,7 +25461,7 @@
 	    });
 	    local.current.dataOffset = offset;
 	    if (triggerRerender) {
-	      setPages(currentPages => [...currentPages]);
+	      selectionState.triggerStateChanged();
 	    }
 	    scrollToIndex(scrollIndex);
 	  };
@@ -25292,7 +25528,9 @@
 	    },
 	    setScrollPosition,
 	    focusListItems: getFocusState(),
-	    setCurrentScrollIndex: currentScrollIndex.set
+	    setCurrentScrollIndex: currentScrollIndex.set,
+	    constraints,
+	    freqIsAllowed
 	  });
 	  const {
 	    columnWidth,
@@ -25370,7 +25608,8 @@
 	  let {
 	    layout,
 	    model,
-	    translator
+	    translator,
+	    selectionState
 	  } = _ref;
 	  if (layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne) {
 	    return [];
@@ -25386,6 +25625,7 @@
 	    getSvgIconShape: selectAll,
 	    enabled: canSelectAll,
 	    action: () => {
+	      selectionState.clearItemStates(false);
 	      model.selectListObjectAll('/qListObjectDef');
 	    }
 	  }, {
@@ -25395,6 +25635,7 @@
 	    getSvgIconShape: selectPossible,
 	    enabled: canSelectPossible,
 	    action: () => {
+	      selectionState.clearItemStates(false);
 	      model.selectListObjectPossible('/qListObjectDef');
 	    }
 	  }, {
@@ -25404,6 +25645,7 @@
 	    getSvgIconShape: selectAlternative,
 	    enabled: canSelectAlternative,
 	    action: () => {
+	      selectionState.clearItemStates(false);
 	      model.selectListObjectAlternative('/qListObjectDef');
 	    }
 	  }, {
@@ -25413,6 +25655,7 @@
 	    getSvgIconShape: selectExcluded,
 	    enabled: canSelectExcluded,
 	    action: () => {
+	      selectionState.clearItemStates(false);
 	      model.selectListObjectExcluded('/qListObjectDef');
 	    }
 	  }];
@@ -25921,6 +26164,7 @@
 	function ListBoxSearch(_ref3) {
 	  let {
 	    selections,
+	    selectionState,
 	    model,
 	    keyboard,
 	    dense = false,
@@ -25995,6 +26239,7 @@
 	      response = model.acceptListObjectSearch(TREE_PATH, true);
 	      // eslint-disable-next-line no-param-reassign
 	      selections.selectionsMade = true;
+	      selectionState.clearItemStates(false);
 	      setValue('');
 	    }
 	    return response;
@@ -26034,7 +26279,8 @@
 	      },
 	      '&:hover': {
 	        border: 'none'
-	      }
+	      },
+	      paddingLeft: "".concat(CELL_PADDING_LEFT, "px")
 	    }, dense && {
 	      fontSize: 12,
 	      paddingLeft: theme.spacing(1),
@@ -26308,6 +26554,125 @@
 	  return [objectSelections];
 	}
 
+	function selectionState() {
+	  const state = {
+	    itemStates: {},
+	    ignoreSelectionState: false,
+	    selectedInEngine: [],
+	    enginePages: [],
+	    setPages: undefined,
+	    lastRowCount: undefined,
+	    lastApprMaxGlyphCount: undefined,
+	    update(_ref) {
+	      var _layout$qListObject$q, _layout$qListObject, _layout$qListObject$q2;
+	      let {
+	        setPages,
+	        pages,
+	        isSingleSelect,
+	        selectDisabled,
+	        layout
+	      } = _ref;
+	      this.setPages = setPages;
+	      const isSameRowCount = this.lastRowCount === layout.qListObject.qSize.qcy;
+	      const isSameMaxGlyphCnt = this.lastApprMaxGlyphCount === layout.qListObject.qDimensionInfo.qApprMaxGlyphCount;
+	      if (!isSameRowCount || !isSameMaxGlyphCnt) {
+	        this.lastRowCount = layout.qListObject.qSize.qcy;
+	        this.lastApprMaxGlyphCount = layout.qListObject.qDimensionInfo.qApprMaxGlyphCount;
+
+	        // The field have probably changed (drill up/down)
+	        // need to clear the client side item states since the field values have changed
+	        this.clearItemStates(false);
+	      }
+	      if (state.enginePages !== pages && pages !== undefined) {
+	        state.enginePages = pages !== null && pages !== void 0 ? pages : [];
+	        state.selectedInEngine = getSelectedValues(pages);
+	        state.selectableValuesUpdating = false;
+	        state.triggerStateChanged();
+	      }
+	      state.isSingleSelect = isSingleSelect;
+	      state.selectDisabled = selectDisabled;
+	      state.isDimCalculated = (_layout$qListObject$q = layout === null || layout === void 0 ? void 0 : (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 ? void 0 : (_layout$qListObject$q2 = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject$q2 === void 0 ? void 0 : _layout$qListObject$q2.qIsCalculated) !== null && _layout$qListObject$q !== void 0 ? _layout$qListObject$q : false;
+	    },
+	    allowedToSelect() {
+	      if (state.selectDisabled()) {
+	        return false;
+	      }
+	      // When a dim is calculated, the rows must be done updating after previeous selection
+	      return !(state.isDimCalculated && state.selectableValuesUpdating);
+	    },
+	    setSelectableValuesUpdating() {
+	      state.selectableValuesUpdating = true;
+	    },
+	    useClientItemState(elementNumber) {
+	      return state.ignoreSelectionState || elementNumber in state.itemStates;
+	    },
+	    isSelected(elementNumber) {
+	      if (state.useClientItemState(elementNumber)) {
+	        return !!state.itemStates[elementNumber];
+	      }
+	      return state.selectedInEngine.includes(elementNumber);
+	    },
+	    getState(item) {
+	      const {
+	        qElemNumber,
+	        qState
+	      } = item;
+	      if (!state.useClientItemState(qElemNumber)) {
+	        return qState;
+	      }
+	      if (state.itemStates[qElemNumber]) {
+	        return qState === 'XS' ? 'XS' : 'S';
+	      }
+	      return qState === 'S' || qState === 'XS' ? 'A' : qState;
+	    },
+	    updateItemNoEvents(elementNumber, additive, selectedValues) {
+	      const selected = state.isSelected(elementNumber);
+	      if (selected && !additive) {
+	        state.itemStates[elementNumber] = false;
+	      } else if (!selected) {
+	        selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.push(elementNumber);
+	        state.itemStates[elementNumber] = true;
+	      }
+	    },
+	    triggerStateChanged() {
+	      if (this.setPages) {
+	        const pages = state.applySelectionsOnPages(state.enginePages);
+	        this.setPages(pages);
+	      }
+	    },
+	    applySelectionsOnPages(pages) {
+	      const matrices = pages.map(page => {
+	        const qMatrix = page.qMatrix.map(p => {
+	          const [p0] = p;
+	          const qState = state.getState(p0);
+	          return [_objectSpread2(_objectSpread2({}, p0), {}, {
+	            qState
+	          }), ...p.slice(1)];
+	        });
+	        return _objectSpread2(_objectSpread2({}, page), {}, {
+	          qMatrix
+	        });
+	      });
+	      return matrices;
+	    },
+	    updateItem(elementNumber, additive, selectedValues) {
+	      state.updateItemNoEvents(elementNumber, additive, selectedValues);
+	      state.triggerStateChanged();
+	    },
+	    updateItems(elementNumbers, additive, selectedValues) {
+	      elementNumbers.forEach(elementNumber => {
+	        state.updateItemNoEvents(elementNumber, additive, selectedValues);
+	      });
+	      state.triggerStateChanged();
+	    },
+	    clearItemStates(ignoreSelectionState) {
+	      state.itemStates = {};
+	      state.ignoreSelectionState = ignoreSelectionState;
+	    }
+	  };
+	  return state;
+	}
+
 	const getValue$1 = function (obj, prop) {
 	  var _obj$prop;
 	  let defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
@@ -26379,6 +26744,7 @@
 	  const containerRef = reactExports.useRef();
 	  const [selections] = useObjectSelections(app, model, containerRef);
 	  const [layout] = useLayout$1(model);
+	  const [selectionState$1] = reactExports.useState(() => selectionState());
 	  reactExports.useEffect(() => {
 	    if (selections && open) {
 	      if (!selections.isModal(model)) {
@@ -26398,7 +26764,8 @@
 	  const listboxSelectionToolbarItems = createListboxSelectionToolbar({
 	    layout,
 	    model,
-	    translator
+	    translator,
+	    selectionState: selectionState$1
 	  });
 	  const hasSelections$1 = hasSelections(layout);
 	  return /*#__PURE__*/React.createElement(Popover$1, {
@@ -26471,13 +26838,16 @@
 	    model: model,
 	    listCount: listCount,
 	    selections: selections,
+	    selectionState: selectionState$1,
 	    keyboard: {
 	      enabled: false
 	    },
 	    autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : true
 	  }), /*#__PURE__*/React.createElement(ListBox, {
 	    model: model,
+	    layout: layout,
 	    selections: selections,
+	    selectionState: selectionState$1,
 	    direction: "ltr",
 	    onSetListCount: c => setListCount(c)
 	  }))));
@@ -27107,6 +27477,52 @@
 	});
 	var SelectionsForward = (props => SvgIcon(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] = reactExports.useState(null);
+	  reactExports.useEffect(() => {
+	    if (!appLayout || !currentSelectionsModel || !currentSelectionsLayout) return;
+	    patchAlternateState(currentSelectionsModel, currentSelectionsLayout, appLayout);
+	  }, [appLayout, currentSelectionsModel, currentSelectionsLayout]);
+	  reactExports.useEffect(() => {
+	    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,
@@ -27691,6 +28107,16 @@
 	  style: {}
 	};
 
+	const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
+	  shapes: [{
+	    type: 'path',
+	    attrs: {
+	      d: 'M15.9993744,3 L15.9993744,5 L4.99937445,5 L4.99937445,3 L15.9993744,3 Z M8.99937445,7 L15.9993744,7 L15.9993744,9 L8.99937445,9 L8.99937445,7 Z M11.9993744,11 L15.9993744,11 L15.9993744,13 L11.9993744,13 L11.9993744,11 Z M2.2,11 L7,11 L7,9.00369263 C7,8.89323568 7.08954305,8.80369263 7.2,8.80369263 C7.2549016,8.80369263 7.30738916,8.82626165 7.34515712,8.86610844 L10.1852182,11.8624926 C10.2583124,11.93961 10.258346,12.0604218 10.1852948,12.13758 L7.34523376,15.1373102 C7.2692928,15.2175206 7.14270711,15.2209817 7.06249671,15.1450407 C7.02260076,15.1072683 7,15.0547472 7,14.9998069 L7,12.9043747 C4.79351111,12.9043747 2.8018683,12.9266213 1.02507156,12.9711145 L1.02507252,12.9711526 C0.472939773,12.9849787 0.014139487,12.5485949 0.000313396522,11.9964622 C0.000104473692,11.988119 -1.32268838e-12,11.9797736 -1.3231638e-12,11.9714278 L-1.83320026e-12,3 L2,3 L2,10.8 C2,10.9104569 2.08954305,11 2.2,11 Z'
+	    }
+	  }]
+	});
+	var DrillDownIcon = (props => SvgIcon(drillDown(props)));
+
 	const addListboxTheme = themeApi => {
 	  const getListboxStyle = prop => themeApi.getStyle('object', '', "listBox.".concat(prop));
 	  return {
@@ -27712,14 +28138,19 @@
 
 	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$1)(_ref => {
+	const StyledGrid$3 = styled$1(Grid$1, {
+	  shouldForwardProp: p => !['containerPadding'].includes(p)
+	})(_ref => {
 	  var _theme$listBox$backgr, _theme$listBox;
 	  let {
-	    theme
+	    theme,
+	    containerPadding
 	  } = _ref;
 	  return {
 	    backgroundColor: (_theme$listBox$backgr = (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : _theme$listBox.backgroundColor) !== null && _theme$listBox$backgr !== void 0 ? _theme$listBox$backgr : theme.palette.background.default,
@@ -27733,6 +28164,9 @@
 	      height: 0,
 	      width: 0,
 	      overflow: 'hidden'
+	    },
+	    ["& .".concat(classes$4.listboxWrapper)]: {
+	      padding: containerPadding
 	    }
 	  };
 	});
@@ -27748,15 +28182,15 @@
 	  };
 	});
 	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,
@@ -27800,7 +28234,6 @@
 	  const moreAlignTo = reactExports.useRef();
 	  const containerRef = reactExports.useRef();
 	  const [searchContainer, searchContainerRef] = useRefWithCallback();
-	  const [layout] = useLayout$1(model);
 	  const [showToolbar, setShowToolbar] = reactExports.useState(false);
 	  const [showSearch, setShowSearch] = reactExports.useState(false);
 	  const [keyboardActive, setKeyboardActive] = reactExports.useState(false);
@@ -27816,6 +28249,7 @@
 	    stop: 0
 	  });
 	  const [appSelections] = useAppSelections(app);
+	  const [selectionState$1] = reactExports.useState(() => selectionState());
 	  const {
 	    handleKeyDown,
 	    handleOnMouseEnter,
@@ -27883,17 +28317,23 @@
 	    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
@@ -27903,12 +28343,26 @@
 	    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.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"),
@@ -27922,45 +28376,60 @@
 	    item: true,
 	    container: true,
 	    style: {
-	      padding: theme.spacing(1)
+	      padding: theme.spacing(1),
+	      paddingLeft: "".concat(headerPaddingLeft, "px")
 	    },
 	    wrap: "nowrap"
 	  }, /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
+	    height: headerHeight,
 	    wrap: "nowrap"
-	  }, /*#__PURE__*/React.createElement(Grid$1, {
+	  }, showIcons && /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    sx: {
 	      display: 'flex',
 	      alignItems: 'center',
-	      width: searchIconWidth
+	      width: iconsWidth
 	    }
 	  }, isLocked ? /*#__PURE__*/React.createElement(IconButton$1, {
 	    tabIndex: -1,
 	    onClick: unlock,
-	    disabled: !isLocked,
+	    disabled: selectDisabled(),
 	    size: "large"
 	  }, /*#__PURE__*/React.createElement(Lock, {
 	    title: translator.get('Listbox.Unlock'),
 	    style: {
 	      fontSize: '12px'
 	    }
-	  })) : searchEnabled !== false && /*#__PURE__*/React.createElement(IconButton$1, {
+	  })) : showSearchIcon && /*#__PURE__*/React.createElement(IconButton$1, {
 	    onClick: onShowSearch,
 	    tabIndex: -1,
 	    title: translator.get('Listbox.Search'),
-	    size: "large"
+	    size: "large",
+	    "data-testid": "search-toggle-btn"
 	  }, /*#__PURE__*/React.createElement(SearchIcon, {
 	    style: {
 	      fontSize: '12px'
 	    }
+	  })), isDrillDown && /*#__PURE__*/React.createElement(IconButton$1, {
+	    tabIndex: -1,
+	    title: translator.get('Listbox.DrillDown'),
+	    size: "large",
+	    sx: {
+	      paddingLeft: "".concat(drillDownPaddingLeft, "px")
+	    }
+	  }, /*#__PURE__*/React.createElement(DrillDownIcon, {
+	    style: {
+	      fontSize: '12px'
+	    }
 	  }))), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    className: classes$4.listBoxHeader
 	  }, /*#__PURE__*/React.createElement(Title, {
 	    variant: "h6",
-	    noWrap: true
+	    noWrap: true,
+	    title: layout.title
 	  }, layout.title))), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    xs: true
@@ -28004,6 +28473,7 @@
 	    className: classes$4.screenReaderOnly
 	  }, translator.get('Listbox.Search.ScreenReaderInstructions')), /*#__PURE__*/React.createElement(ListBoxSearch, {
 	    selections: selections,
+	    selectionState: selectionState$1,
 	    model: model,
 	    dense: dense,
 	    keyboard: keyboard,
@@ -28015,7 +28485,8 @@
 	    searchEnabled: searchEnabled
 	  })), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
-	    xs: true
+	    xs: true,
+	    className: classes$4.listboxWrapper
 	  }, /*#__PURE__*/React.createElement("div", {
 	    className: classes$4.screenReaderOnly
 	  }, translator.get('Listbox.ScreenReaderInstructions')), /*#__PURE__*/React.createElement(AutoSizer, null, _ref4 => {
@@ -28025,9 +28496,11 @@
 	    } = _ref4;
 	    return /*#__PURE__*/React.createElement(ListBox, {
 	      model: model,
+	      constraints: constraints,
+	      layout: layout,
 	      selections: selections,
+	      selectionState: selectionState$1,
 	      direction: direction,
-	      listLayout: listLayout,
 	      frequencyMode: frequencyMode,
 	      rangeSelect: rangeSelect,
 	      checkboxes: checkboxes,
@@ -28056,6 +28529,20 @@
 	    });
 	  }))));
 	}
+	const ListBoxInlineMemoed = React.memo(ListBoxInline);
+	function IsolateUseLayoutWrapper(_ref5) {
+	  let {
+	    options = {}
+	  } = _ref5;
+	  const {
+	    model
+	  } = options;
+	  const [layout] = useLayout$1(model);
+	  return /*#__PURE__*/React.createElement(ListBoxInlineMemoed, {
+	    options: options,
+	    layout: layout
+	  });
+	}
 
 	function useExistingModel(_ref) {
 	  let {
@@ -28082,6 +28569,9 @@
 	      } else {
 	        const m = await app.getObject(qId);
 	        modelStore.set(m.id, m);
+	        m.once('closed', () => {
+	          modelStore.clear(m.id);
+	        });
 	        setModel(m);
 	      }
 	    }
@@ -28135,6 +28625,7 @@
 	  const {
 	    dense,
 	    checkboxes,
+	    listLayout,
 	    properties = {}
 	  } = options;
 	  let {
@@ -28163,6 +28654,20 @@
 	      break;
 	  }
 	  const getListdefFrequencyMode = () => histogram && frequencyMode === 'N' ? 'V' : frequencyMode;
+	  const layoutOptions = {
+	    dense
+	  };
+	  if (listLayout === 'horizontal') {
+	    layoutOptions.dataLayout = 'grid';
+	    layoutOptions.layoutOrder = 'column';
+	    layoutOptions.maxVisibleColumns = {
+	      auto: true
+	    };
+	    layoutOptions.maxVisibleRows = {
+	      auto: false,
+	      maxRows: 1
+	    };
+	  }
 	  const id = reactExports.useRef();
 	  if (!id.current) {
 	    id.current = uid();
@@ -28175,6 +28680,7 @@
 	    qListObjectDef: {
 	      qStateName: stateName,
 	      qShowAlternatives: true,
+	      frequencyEnabled: false,
 	      qFrequencyMode: getListdefFrequencyMode(),
 	      qInitialDataFetch: [{
 	        qTop: 0,
@@ -28193,9 +28699,7 @@
 	    },
 	    histogram,
 	    checkboxes,
-	    layoutOptions: {
-	      dense
-	    },
+	    layoutOptions,
 	    title
 	  };
 	  extend$1(true, listdef, properties);
@@ -28318,15 +28822,15 @@
 	  });
 	  const elementRef = reactExports.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 = reactExports.useMemo(() => _objectSpread2(_objectSpread2({}, options), {}, {
 	    selections,
 	    model,
 	    app
-	  });
-	  return /*#__PURE__*/React.createElement(ListBoxInline, {
+	  }), [options, selections, model, app]);
+	  if (!selections || !model) {
+	    return null;
+	  }
+	  return /*#__PURE__*/React.createElement(IsolateUseLayoutWrapper, {
 	    options: opts
 	  });
 	}