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

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.3.0-alpha.0
+* @nebula.js/stardust v3.3.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -15328,7 +15328,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "c721" ;
+	const NEBULA_VERSION_HASH = "593e" ;
 	ClassNameGenerator$1.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -15383,419 +15383,108 @@
 	  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();
+	    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()));
 	    }
 	  };
-	  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()));
-	    }
-	  };
-	  return appSelections;
+	  return appSelections;
 	}
 	function useAppSelections(app) {
 	  if (!app.session) {
 	    // assume the app is mocked if session is undefined
 	    return [];
 	  }
-	  const [navState, currentSelectionsModel, currentSelectionsLayout] = useAppSelectionsNavigation(app);
 	  const [appSelectionsStore] = useAppSelectionsStore();
 	  const key = app ? app.id : null;
 	  let appSelections = appSelectionsStore.get(key);
 	  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) => {
@@ -15824,7 +15513,7 @@
 	      }
 	    },
 	    setMuiThemeName,
-	    setContext,
+	    setContext: ctx => setContext(oldContext => JSON.stringify(oldContext) !== JSON.stringify(ctx) ? ctx : oldContext),
 	    getAppSelections: () => appSelections
 	  }));
 	  return /*#__PURE__*/React.createElement(StyledEngineProvider, {
@@ -15847,7 +15536,7 @@
 	  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', "3.3.0" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
@@ -21175,261 +20864,509 @@
 	});
 	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;
 	      }
-	    }
+	    default:
+	      throw new Error('Undefined action');
 	  }
-
-	  return unloadedRanges;
-	}
-
-	var classCallCheck$1 = function (instance, Constructor) {
-	  if (!(instance instanceof Constructor)) {
-	    throw new TypeError("Cannot call a class as a function");
+	  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;
-	};
+	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)));
 
-	var InfiniteLoader = function (_PureComponent) {
-	  inherits$1(InfiniteLoader, _PureComponent);
+	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)));
 
-	  function InfiniteLoader() {
-	    var _ref;
+	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)));
 
-	    var _temp, _this, _ret;
+	function isRangeVisible(_ref) {
+	  var lastRenderedStartIndex = _ref.lastRenderedStartIndex,
+	      lastRenderedStopIndex = _ref.lastRenderedStopIndex,
+	      startIndex = _ref.startIndex,
+	      stopIndex = _ref.stopIndex;
 
-	    classCallCheck$1(this, InfiniteLoader);
+	  return !(startIndex > lastRenderedStopIndex || stopIndex < lastRenderedStartIndex);
+	}
 
-	    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-	      args[_key] = arguments[_key];
+	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) {
@@ -21813,57 +21750,590 @@
 	    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 interactionEvents = {};
-	  if (checkboxes) {
-	    Object.assign(interactionEvents, {
-	      onClick
-	    });
-	  } else {
-	    Object.assign(interactionEvents, {
-	      onMouseUp,
-	      onMouseDown,
-	      onMouseEnter
-	    });
-	  }
-	  return {
-	    instantPages,
-	    interactionEvents,
-	    select: selectManually // preselect and select without having to trigger an event
+	    // Render pre-selections before they have been selected in Engine.
+	    const newPages = applySelectionsOnPages(pages, preSelected, isSingleSelect);
+	    setInstantPages(newPages);
+	  }, [preSelected]);
+	  const interactionEvents = {};
+	  if (checkboxes) {
+	    Object.assign(interactionEvents, {
+	      onClick
+	    });
+	  } else {
+	    Object.assign(interactionEvents, {
+	      onMouseUp,
+	      onMouseDown,
+	      onMouseEnter
+	    });
+	  }
+	  return {
+	    instantPages,
+	    interactionEvents,
+	    select: selectManually // preselect and select without having to trigger an event
+	  };
+	}
+
+	const tick = props => _objectSpread2(_objectSpread2({}, props), {}, {
+	  shapes: [{
+	    type: 'path',
+	    attrs: {
+	      d: 'M6,10 L13,3 L15,5 L8,12 L6,14 L1,9 L3,7 L6,10 Z'
+	    }
+	  }]
+	});
+	var Tick = (props => SvgIcon(tick(props)));
+
+	/**
+	 * @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 Segment
+	 * @property {string} segment The sub-string/segment cut out from the original label.
+	 * @property {boolean} highlighted A flag which tells whether the segment should be highlighted or not.
+	 */
+
+	/**
+	 * @ignore
+	 * @param {string} label The label we want to create segments out of.
+	 * @param {Range} range The indexes which define how to create the segments.
+	 * @param {number=} [startIndex] An optional index which tells where we want to start the first segment from
+	 *   (only relevant for creating the first unhighlighted segment of a string/sub-string).
+	 * @returns {Segment[]} An array of segments.
+	 */
+	function getSegmentsFromRange(label, range) {
+	  let startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+	  const {
+	    qCharPos,
+	    qCharCount
+	  } = range;
+	  const segments = [];
+	  if (qCharPos > startIndex) {
+	    // Create a non-highlighted section before the highighted section.
+	    segments.push([label.slice(startIndex, qCharPos), false]);
+	  }
+
+	  // Highlighted segment.
+	  segments.push([label.slice(qCharPos, qCharPos + qCharCount), true]);
+	  return segments;
+	}
+
+	/**
+	 * @ignore
+	 * @param {string} label The label we want to create segments out of.
+	 * @param {Range[]} ranges The ranges defining indices for cutting the string into segments.
+	 * @returns {Segment[]} An array of segments, covering the entire string label.
+	 */
+	function getSegmentsFromRanges(label, ranges) {
+	  if (!ranges.length) {
+	    return [];
+	  }
+	  const labels = ranges.reduce((acc, curr, ix) => {
+	    const startIndex = ix === 0 ? 0 : ranges[ix - 1].qCharPos + ranges[ix - 1].qCharCount;
+	    acc.push(...getSegmentsFromRange(label, curr, startIndex));
+
+	    // Last non highlighted segment
+	    const isLastRange = ix === ranges.length - 1;
+	    const endIndex = ranges[ix].qCharPos + ranges[ix].qCharCount;
+	    if (isLastRange && endIndex < label.length) {
+	      acc.push([label.slice(endIndex), false]);
+	    }
+	    return acc;
+	  }, []);
+	  return labels;
+	}
+
+	const KEYS = Object.freeze({
+	  ENTER: 13,
+	  ESCAPE: 27,
+	  SPACE: 32,
+	  TAB: 9,
+	  BACKSPACE: 8,
+	  DELETE: 46,
+	  ALT: 18,
+	  CTRL: 17,
+	  SHIFT: 16,
+	  ARROW_UP: 38,
+	  ARROW_DOWN: 40,
+	  ARROW_LEFT: 37,
+	  ARROW_RIGHT: 39,
+	  PAGE_DOWN: 34,
+	  PAGE_UP: 33,
+	  HOME: 36,
+	  END: 35,
+	  F10: 121,
+	  A: 65,
+	  F: 70,
+	  ZERO: 48,
+	  NINE: 57,
+	  NUMPAD_ZERO: 96,
+	  NUMPAD_NINE: 105,
+	  SUBTRACTION: 189,
+	  DECIMAL: 190,
+	  NUMPAD_DECIMAL: 110,
+	  isArrow: key => key === KEYS.ARROW_UP || key === KEYS.ARROW_DOWN || key === KEYS.ARROW_LEFT || key === KEYS.ARROW_RIGHT
+	});
+
+	function getFieldKeyboardNavigation(_ref) {
+	  let {
+	    select,
+	    confirm,
+	    cancel,
+	    setScrollPosition,
+	    focusListItems
+	  } = _ref;
+	  const getElement = function (elm) {
+	    let next = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+	    const parentElm = elm && elm.parentElement[next ? 'nextElementSibling' : 'previousElementSibling'];
+	    return parentElm && parentElm.querySelector('[role]');
+	  };
+	  let startedRange = false;
+	  const setStartedRange = val => {
+	    startedRange = val;
+	  };
+	  const handleKeyDown = event => {
+	    let elementToFocus;
+	    const {
+	      keyCode,
+	      shiftKey = false,
+	      ctrlKey = false
+	    } = event.nativeEvent;
+	    switch (keyCode) {
+	      case KEYS.SHIFT:
+	        // This is to ensure we include the first value when starting a range selection.
+	        setStartedRange(true);
+	        break;
+	      case KEYS.SPACE:
+	        select([+event.currentTarget.getAttribute('data-n')]);
+	        break;
+	      case KEYS.ARROW_DOWN:
+	      case KEYS.ARROW_RIGHT:
+	        elementToFocus = getElement(event.currentTarget, true);
+	        if (shiftKey && elementToFocus) {
+	          if (startedRange) {
+	            select([+event.currentTarget.getAttribute('data-n')], true);
+	            setStartedRange(false);
+	          }
+	          select([+elementToFocus.getAttribute('data-n')], true);
+	        }
+	        break;
+	      case KEYS.ARROW_UP:
+	      case KEYS.ARROW_LEFT:
+	        elementToFocus = getElement(event.currentTarget, false);
+	        if (shiftKey && elementToFocus) {
+	          if (startedRange) {
+	            select([+event.currentTarget.getAttribute('data-n')], true);
+	            setStartedRange(false);
+	          }
+	          select([+elementToFocus.getAttribute('data-n')], true);
+	        }
+	        break;
+	      case KEYS.ENTER:
+	        confirm();
+	        break;
+	      case KEYS.ESCAPE:
+	        cancel();
+	        return;
+	      // let it propagate to top-level
+	      case KEYS.HOME:
+	        focusListItems.setFirst(true);
+	        if (ctrlKey) {
+	          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowStart');
+	          break;
+	        }
+	        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('start');
+	        break;
+	      case KEYS.END:
+	        focusListItems.setLast(true);
+	        if (ctrlKey) {
+	          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowEnd');
+	          break;
+	        }
+	        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('end');
+	        break;
+	      default:
+	        return;
+	      // don't stop propagation since we want to outsource keydown to other handlers.
+	    }
+
+	    if (elementToFocus) {
+	      elementToFocus.focus();
+	    }
+	    event.preventDefault();
+	    event.stopPropagation();
+	  };
+	  return handleKeyDown;
+	}
+	function getListboxInlineKeyboardNavigation(_ref2) {
+	  let {
+	    setKeyboardActive,
+	    hovering,
+	    setHovering,
+	    updateKeyScroll,
+	    containerRef,
+	    currentScrollIndex,
+	    app,
+	    appSelections,
+	    constraints
+	  } = _ref2;
+	  const focusInsideListbox = element => {
+	    const fieldElement = element.querySelector('.search input, .value.selector, .value, .ActionsToolbar-* button');
+	    setKeyboardActive(true);
+	    if (fieldElement) {
+	      fieldElement.focus();
+	    }
+	  };
+	  const focusContainer = element => {
+	    setKeyboardActive(false);
+	    element.focus();
+	  };
+	  const updateKeyScrollOnHover = newState => {
+	    if (hovering) {
+	      updateKeyScroll(newState);
+	    }
+	  };
+	  const handleKeyDown = event => {
+	    const {
+	      keyCode,
+	      ctrlKey = false,
+	      shiftKey = false
+	    } = event.nativeEvent;
+	    switch (keyCode) {
+	      // case KEYS.TAB: TODO: Focus confirm button using keyboard.focusSelection when we can access the useKeyboard hook.
+	      case KEYS.ENTER:
+	      case KEYS.SPACE:
+	        if (!event.target.classList.contains('listbox-container')) {
+	          return; // don't mess with keydown handlers within the listbox
+	        }
+
+	        focusInsideListbox(event.currentTarget);
+	        break;
+	      case KEYS.ESCAPE:
+	        focusContainer(event.currentTarget);
+	        break;
+	      case KEYS.ARROW_UP:
+	        updateKeyScrollOnHover({
+	          up: 1
+	        });
+	        break;
+	      case KEYS.ARROW_DOWN:
+	        updateKeyScrollOnHover({
+	          down: 1
+	        });
+	        break;
+	      case KEYS.PAGE_UP:
+	        updateKeyScrollOnHover({
+	          up: currentScrollIndex.stop - currentScrollIndex.start
+	        });
+	        break;
+	      case KEYS.PAGE_DOWN:
+	        updateKeyScrollOnHover({
+	          down: currentScrollIndex.stop - currentScrollIndex.start
+	        });
+	        break;
+	      case KEYS.HOME:
+	        updateKeyScrollOnHover({
+	          scrollPosition: ctrlKey && shiftKey ? 'overflowStart' : 'start'
+	        });
+	        break;
+	      case KEYS.END:
+	        updateKeyScrollOnHover({
+	          scrollPosition: ctrlKey && shiftKey ? 'overflowEnd' : 'end'
+	        });
+	        break;
+	      default:
+	        return;
+	    }
+
+	    // Note: We should not stop propagation here as it will block the containing app
+	    // from handling keydown events.
+	    event.preventDefault();
+	  };
+	  const focusOnHoverDisabled = () => {
+	    var _app$isInModalSelecti, _app$isInModalSelecti2;
+	    const selectNotAllowed = (constraints === null || constraints === void 0 ? void 0 : constraints.select) || (constraints === null || constraints === void 0 ? void 0 : constraints.active);
+	    const appInModal = (_app$isInModalSelecti = (_app$isInModalSelecti2 = app.isInModalSelection) === null || _app$isInModalSelecti2 === void 0 ? void 0 : _app$isInModalSelecti2.call(app)) !== null && _app$isInModalSelecti !== void 0 ? _app$isInModalSelecti : appSelections.isInModal();
+	    return selectNotAllowed || appInModal;
+	  };
+	  const handleOnMouseEnter = () => {
+	    if (!focusOnHoverDisabled()) {
+	      var _containerRef$current, _containerRef$current2;
+	      setHovering(true);
+	      containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : (_containerRef$current2 = _containerRef$current.focus) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.call(_containerRef$current);
+	    }
+	  };
+	  const handleOnMouseLeave = () => {
+	    if (hovering) {
+	      var _containerRef$current3, _containerRef$current4;
+	      setHovering(false);
+	      containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : (_containerRef$current4 = _containerRef$current3.blur) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.call(_containerRef$current3);
+	    }
+	  };
+	  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 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 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'
+	};
+	const RowColRoot = styled$1('div', {
+	  shouldForwardProp: prop => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense'].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
+	  } = _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: '9px',
+	      paddingRight: '9px'
+	    },
+	    // The leaf node, containing the label text.
+	    ["& .".concat(rowColClasses.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(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',
+	      padding: theme.spacing(1, 1, 1, 0)
+	    },
+	    // 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)]: {
+	      width: '66px',
+	      justifyContent: 'flex-end'
+	    },
+	    ["&.".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'
+	    }
 	  };
-	}
-
-	const tick = props => _objectSpread2(_objectSpread2({}, props), {}, {
-	  shapes: [{
-	    type: 'path',
-	    attrs: {
-	      d: 'M6,10 L13,3 L15,5 L8,12 L6,14 L1,9 L3,7 L6,10 Z'
-	    }
-	  }]
 	});
-	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 PREFIX$b = '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 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$c.cbIcon)]: {
+	    ["& .".concat(classes$b.cbIcon)]: {
 	      borderRadius,
 	      width: 16,
 	      height: 16,
@@ -21874,7 +22344,7 @@
 	      alignItems: 'center',
 	      justifyContent: 'center'
 	    },
-	    ["& .".concat(classes$c.cbIconChecked)]: {
+	    ["& .".concat(classes$b.cbIconChecked)]: {
 	      borderRadius,
 	      backgroundColor: theme.palette.selected.main,
 	      backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
@@ -21886,25 +22356,25 @@
 	        content: '""'
 	      }
 	    },
-	    ["& .".concat(classes$c.cbIconExcluded)]: {
+	    ["& .".concat(classes$b.cbIconExcluded)]: {
 	      borderRadius: borderRadius - 1,
 	      width: 12,
 	      height: 12,
 	      backgroundColor: theme.palette.selected.excluded
 	    },
-	    ["& .".concat(classes$c.cbIconAlternative)]: {
+	    ["& .".concat(classes$b.cbIconAlternative)]: {
 	      borderRadius: borderRadius - 1,
 	      width: 12,
 	      height: 12,
 	      backgroundColor: theme.palette.selected.alternative
 	    },
-	    ["&.".concat(classes$c.checkbox)]: {
+	    ["&.".concat(classes$b.checkbox)]: {
 	      margin: 0,
 	      '&:hover': {
 	        backgroundColor: 'inherit !important'
 	      }
 	    },
-	    ["&.".concat(classes$c.dense)]: {
+	    ["&.".concat(classes$b.dense)]: {
 	      padding: '4px 8px'
 	    }
 	  };
@@ -21930,86 +22400,22 @@
 	    edge: "start",
 	    checked: checked,
 	    disableRipple: true,
-	    className: [classes$c.checkbox, dense && classes$c.dense].filter(Boolean).join(' '),
+	    className: [classes$b.checkbox, dense && classes$b.dense].filter(Boolean).join(' '),
 	    inputProps: {
 	      'aria-labelledby': label
 	    },
 	    name: label,
-	    icon: getIcon(classes$c, showGray, excluded),
+	    icon: getIcon(classes$b, showGray, excluded),
 	    checkedIcon: /*#__PURE__*/React.createElement("span", {
-	      className: classes$c.cbIconChecked
+	      className: classes$b.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 Segment
-	 * @property {string} segment The sub-string/segment cut out from the original label.
-	 * @property {boolean} highlighted A flag which tells whether the segment should be highlighted or not.
-	 */
-
-	/**
-	 * @ignore
-	 * @param {string} label The label we want to create segments out of.
-	 * @param {Range} range The indexes which define how to create the segments.
-	 * @param {number=} [startIndex] An optional index which tells where we want to start the first segment from
-	 *   (only relevant for creating the first unhighlighted segment of a string/sub-string).
-	 * @returns {Segment[]} An array of segments.
-	 */
-	function getSegmentsFromRange(label, range) {
-	  let startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-	  const {
-	    qCharPos,
-	    qCharCount
-	  } = range;
-	  const segments = [];
-	  if (qCharPos > startIndex) {
-	    // Create a non-highlighted section before the highighted section.
-	    segments.push([label.slice(startIndex, qCharPos), false]);
-	  }
-
-	  // Highlighted segment.
-	  segments.push([label.slice(qCharPos, qCharPos + qCharCount), true]);
-	  return segments;
-	}
-
-	/**
-	 * @ignore
-	 * @param {string} label The label we want to create segments out of.
-	 * @param {Range[]} ranges The ranges defining indices for cutting the string into segments.
-	 * @returns {Segment[]} An array of segments, covering the entire string label.
-	 */
-	function getSegmentsFromRanges(label, ranges) {
-	  if (!ranges.length) {
-	    return [];
-	  }
-	  const labels = ranges.reduce((acc, curr, ix) => {
-	    const startIndex = ix === 0 ? 0 : ranges[ix - 1].qCharPos + ranges[ix - 1].qCharCount;
-	    acc.push(...getSegmentsFromRange(label, curr, startIndex));
-
-	    // Last non highlighted segment
-	    const isLastRange = ix === ranges.length - 1;
-	    const endIndex = ranges[ix].qCharPos + ranges[ix].qCharCount;
-	    if (isLastRange && endIndex < label.length) {
-	      acc.push([label.slice(endIndex), false]);
-	    }
-	    return acc;
-	  }, []);
-	  return labels;
-	}
-
-	const PREFIX$b = 'ListBoxRadioButton';
-	const classes$b = {
-	  denseRadioButton: "".concat(PREFIX$b, "-denseRadioButton"),
-	  radioButton: "".concat(PREFIX$b, "-radioButton")
+	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 {
@@ -22017,7 +22423,7 @@
 	    checked
 	  } = _ref;
 	  return {
-	    ["&.".concat(classes$b.radioButton)]: {
+	    ["&.".concat(classes$a.radioButton)]: {
 	      right: '5px',
 	      color: checked ? theme.palette.selected.main : theme.palette.main
 	    }
@@ -22033,7 +22439,7 @@
 	    checked: checked,
 	    value: label,
 	    name: label,
-	    className: classes$b.radioButton,
+	    className: classes$a.radioButton,
 	    style: {
 	      backgroundColor: 'transparent'
 	    },
@@ -22045,237 +22451,251 @@
 	  });
 	}
 
-	const KEYS = Object.freeze({
-	  ENTER: 13,
-	  ESCAPE: 27,
-	  SPACE: 32,
-	  TAB: 9,
-	  BACKSPACE: 8,
-	  DELETE: 46,
-	  ALT: 18,
-	  CTRL: 17,
-	  SHIFT: 16,
-	  ARROW_UP: 38,
-	  ARROW_DOWN: 40,
-	  ARROW_LEFT: 37,
-	  ARROW_RIGHT: 39,
-	  PAGE_DOWN: 34,
-	  PAGE_UP: 33,
-	  HOME: 36,
-	  END: 35,
-	  F10: 121,
-	  A: 65,
-	  F: 70,
-	  ZERO: 48,
-	  NINE: 57,
-	  NUMPAD_ZERO: 96,
-	  NUMPAD_NINE: 105,
-	  SUBTRACTION: 189,
-	  DECIMAL: 190,
-	  NUMPAD_DECIMAL: 110,
-	  isArrow: key => key === KEYS.ARROW_UP || key === KEYS.ARROW_DOWN || key === KEYS.ARROW_LEFT || key === KEYS.ARROW_RIGHT
-	});
-
-	function getFieldKeyboardNavigation(_ref) {
+	function ValueField(_ref) {
 	  let {
-	    select,
-	    confirm,
-	    cancel,
-	    setScrollPosition,
-	    focusListItems
+	    label,
+	    color,
+	    highlighted = false,
+	    dense,
+	    showGray = true,
+	    checkboxes,
+	    cell,
+	    valueTextAlign
 	  } = _ref;
-	  const getElement = function (elm) {
-	    let next = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-	    const parentElm = elm && elm.parentElement[next ? 'nextElementSibling' : 'previousElementSibling'];
-	    return parentElm && parentElm.querySelector('[role]');
-	  };
-	  let startedRange = false;
-	  const setStartedRange = val => {
-	    startedRange = val;
-	  };
-	  const handleKeyDown = event => {
-	    let elementToFocus;
-	    const {
-	      keyCode,
-	      shiftKey = false,
-	      ctrlKey = false
-	    } = event.nativeEvent;
-	    switch (keyCode) {
-	      case KEYS.SHIFT:
-	        // This is to ensure we include the first value when starting a range selection.
-	        setStartedRange(true);
-	        break;
-	      case KEYS.SPACE:
-	        select([+event.currentTarget.getAttribute('data-n')]);
-	        break;
-	      case KEYS.ARROW_DOWN:
-	      case KEYS.ARROW_RIGHT:
-	        elementToFocus = getElement(event.currentTarget, true);
-	        if (shiftKey && elementToFocus) {
-	          if (startedRange) {
-	            select([+event.currentTarget.getAttribute('data-n')], true);
-	            setStartedRange(false);
-	          }
-	          select([+elementToFocus.getAttribute('data-n')], true);
-	        }
-	        break;
-	      case KEYS.ARROW_UP:
-	      case KEYS.ARROW_LEFT:
-	        elementToFocus = getElement(event.currentTarget, false);
-	        if (shiftKey && elementToFocus) {
-	          if (startedRange) {
-	            select([+event.currentTarget.getAttribute('data-n')], true);
-	            setStartedRange(false);
-	          }
-	          select([+elementToFocus.getAttribute('data-n')], true);
-	        }
-	        break;
-	      case KEYS.ENTER:
-	        confirm();
-	        break;
-	      case KEYS.ESCAPE:
-	        cancel();
-	        return;
-	      // let it propagate to top-level
-	      case KEYS.HOME:
-	        focusListItems.setFirst(true);
-	        if (ctrlKey) {
-	          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowStart');
-	          break;
-	        }
-	        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('start');
-	        break;
-	      case KEYS.END:
-	        focusListItems.setLast(true);
-	        if (ctrlKey) {
-	          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowEnd');
-	          break;
-	        }
-	        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('end');
-	        break;
-	      default:
-	        return;
-	      // don't stop propagation since we want to outsource keydown to other handlers.
+	  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,
+	    justifyContent: valueTextAlign
+	  }, /*#__PURE__*/React.createElement("span", {
+	    style: {
+	      whiteSpace: 'pre'
 	    }
+	  }, label));
+	}
 
-	    if (elementToFocus) {
-	      elementToFocus.focus();
-	    }
-	    event.preventDefault();
-	    event.stopPropagation();
-	  };
-	  return handleKeyDown;
+	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 getListboxInlineKeyboardNavigation(_ref2) {
+
+	function CheckboxField(_ref) {
 	  let {
-	    setKeyboardActive,
-	    hovering,
-	    setHovering,
-	    updateKeyScroll,
-	    containerRef,
-	    currentScrollIndex,
-	    app,
-	    appSelections,
-	    constraints
-	  } = _ref2;
-	  const focusInsideListbox = element => {
-	    const fieldElement = element.querySelector('.search input, .value.selector, .value, .ActionsToolbar-* button');
-	    setKeyboardActive(true);
-	    if (fieldElement) {
-	      fieldElement.focus();
-	    }
-	  };
-	  const focusContainer = element => {
-	    setKeyboardActive(false);
-	    element.focus();
-	  };
-	  const updateKeyScrollOnHover = newState => {
-	    if (hovering) {
-	      updateKeyScroll(newState);
-	    }
-	  };
-	  const handleKeyDown = event => {
-	    const {
-	      keyCode,
-	      ctrlKey = false,
-	      shiftKey = false
-	    } = event.nativeEvent;
-	    switch (keyCode) {
-	      // case KEYS.TAB: TODO: Focus confirm button using keyboard.focusSelection when we can access the useKeyboard hook.
-	      case KEYS.ENTER:
-	      case KEYS.SPACE:
-	        if (!event.target.classList.contains('listbox-container')) {
-	          return; // don't mess with keydown handlers within the listbox
-	        }
+	    label,
+	    color,
+	    qElemNumber,
+	    isSelected,
+	    dense,
+	    cell,
+	    isGridCol,
+	    showGray,
+	    isSingleSelect,
+	    highlighted,
+	    checkboxes,
+	    valueTextAlign
+	  } = _ref;
+	  const cb = /*#__PURE__*/React.createElement(ListboxCheckbox, {
+	    label: label,
+	    checked: isSelected,
+	    dense: dense,
+	    excluded: isExcluded(cell),
+	    isGridCol: isGridCol,
+	    showGray: showGray
+	  });
+	  const rb = /*#__PURE__*/React.createElement(ListBoxRadioButton, {
+	    label: label,
+	    checked: isSelected,
+	    dense: dense
+	  });
+	  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
+	  });
+	}
 
-	        focusInsideListbox(event.currentTarget);
-	        break;
-	      case KEYS.ESCAPE:
-	        focusContainer(event.currentTarget);
-	        break;
-	      case KEYS.ARROW_UP:
-	        updateKeyScrollOnHover({
-	          up: 1
-	        });
-	        break;
-	      case KEYS.ARROW_DOWN:
-	        updateKeyScrollOnHover({
-	          down: 1
-	        });
-	        break;
-	      case KEYS.PAGE_UP:
-	        updateKeyScrollOnHover({
-	          up: currentScrollIndex.stop - currentScrollIndex.start
-	        });
-	        break;
-	      case KEYS.PAGE_DOWN:
-	        updateKeyScrollOnHover({
-	          down: currentScrollIndex.stop - currentScrollIndex.start
-	        });
-	        break;
-	      case KEYS.HOME:
-	        updateKeyScrollOnHover({
-	          scrollPosition: ctrlKey && shiftKey ? 'overflowStart' : 'start'
-	        });
-	        break;
-	      case KEYS.END:
-	        updateKeyScrollOnHover({
-	          scrollPosition: ctrlKey && shiftKey ? 'overflowEnd' : 'end'
-	        });
-	        break;
-	      default:
-	        return;
-	    }
+	function LabelsWithRanges(_ref) {
+	  let {
+	    labels,
+	    dense,
+	    showGray,
+	    checkboxes
+	  } = _ref;
+	  return /*#__PURE__*/React.createElement(React.Fragment, null, labels.map(_ref2 => {
+	    let [label, highlighted] = _ref2;
+	    return /*#__PURE__*/React.createElement(ValueField, {
+	      label: label,
+	      key: label,
+	      highlighted: highlighted,
+	      dense: dense,
+	      showGray: showGray,
+	      checkboxes: checkboxes
+	    });
+	  }));
+	}
+	function FieldWithRanges(_ref3) {
+	  let {
+	    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, {
+	    label: LWR,
+	    color: color,
+	    qElemNumber: qElemNumber,
+	    isSelected: isSelected,
+	    dense: dense,
+	    cell: cell,
+	    isGridCol: isGridCol,
+	    showGray: showGray,
+	    isSingleSelect: isSingleSelect,
+	    checkboxes: checkboxes,
+	    valueTextAlign: valueTextAlign
+	  }) : LWR;
+	}
 
-	    // Note: We should not stop propagation here as it will block the containing app
-	    // from handling keydown events.
-	    event.preventDefault();
-	  };
-	  const focusOnHoverDisabled = () => {
-	    var _app$isInModalSelecti, _app$isInModalSelecti2;
-	    const selectNotAllowed = (constraints === null || constraints === void 0 ? void 0 : constraints.select) || (constraints === null || constraints === void 0 ? void 0 : constraints.active);
-	    const appInModal = (_app$isInModalSelecti = (_app$isInModalSelecti2 = app.isInModalSelection) === null || _app$isInModalSelecti2 === void 0 ? void 0 : _app$isInModalSelecti2.call(app)) !== null && _app$isInModalSelecti !== void 0 ? _app$isInModalSelecti : appSelections.isInModal();
-	    return selectNotAllowed || appInModal;
-	  };
-	  const handleOnMouseEnter = () => {
-	    if (!focusOnHoverDisabled()) {
-	      var _containerRef$current, _containerRef$current2;
-	      setHovering(true);
-	      containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : (_containerRef$current2 = _containerRef$current.focus) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.call(_containerRef$current);
-	    }
-	  };
-	  const handleOnMouseLeave = () => {
-	    if (hovering) {
-	      var _containerRef$current3, _containerRef$current4;
-	      setHovering(false);
-	      containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : (_containerRef$current4 = _containerRef$current3.blur) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.call(_containerRef$current3);
+	function Field(_ref) {
+	  let {
+	    label,
+	    color,
+	    qElemNumber,
+	    isSelected,
+	    dense,
+	    cell,
+	    isGridCol,
+	    showGray,
+	    isSingleSelect,
+	    highlighted,
+	    checkboxes,
+	    valueTextAlign
+	  } = _ref;
+	  return checkboxes ? /*#__PURE__*/React.createElement(CheckboxField, {
+	    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
+	  });
+	}
+
+	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
 	    }
-	  };
-	  return {
-	    handleKeyDown,
-	    handleOnMouseEnter,
-	    handleOnMouseLeave
-	  };
+	  });
+	}
+
+	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,234 +22715,36 @@
 	    case 'row':
 	      return {
 	        height: "calc(100% - ".concat(itemPadding, "px)"),
-	        width: "calc(100% - ".concat(2 * itemPadding, "px)")
-	      };
-	    case 'column':
-	      return {
-	        height: "calc(100% - ".concat(itemPadding, "px)"),
-	        width: "calc(100% - ".concat(2 * itemPadding, "px)")
-	      };
-	    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
-	    }
-	  };
-	};
+	        width: "calc(100% - ".concat(2 * itemPadding, "px)")
+	      };
+	    case 'column':
+	      return {
+	        height: "calc(100% - ".concat(itemPadding, "px)"),
+	        width: "calc(100% - ".concat(2 * itemPadding, "px)")
+	      };
+	    default:
+	      return {};
+	  }
+	}
+
 	const ItemGrid = styled$1(Grid$1, {
 	  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding'].includes(prop)
-	})(_ref2 => {
+	})(_ref => {
 	  let {
 	    dataLayout,
 	    layoutOrder,
 	    itemPadding
-	  } = _ref2;
+	  } = _ref;
 	  return {
-	    ["&.".concat(classes$a.fieldRoot)]: getGridItemSizes({
+	    ["&.".concat(rowColClasses.fieldRoot)]: getGridItemSizes({
 	      dataLayout,
 	      layoutOrder,
 	      itemPadding
 	    })
 	  };
 	});
-	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;
-	  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'
-	    }
-	  };
-	});
-	function RowColumn(_ref4) {
+
+	function RowColumn(_ref) {
 	  var _cell$qText;
 	  let {
 	    index,
@@ -22530,7 +22752,7 @@
 	    columnIndex,
 	    style,
 	    data
-	  } = _ref4;
+	  } = _ref;
 	  const {
 	    onClick,
 	    onMouseDown,
@@ -22624,25 +22846,23 @@
 	    }
 	    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 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);
+	    const clazzArr = [column ? rowColClasses.column : rowColClasses.row];
+	    if (!(histogram && (dense || checkboxes))) clazzArr.push(rowColClasses.rowBorderBottom);
 	    if (!checkboxes) {
 	      if (cell.qState === 'XS') {
-	        clazzArr.push(showGray ? classes$a.XS : classes$a.S);
+	        clazzArr.push(showGray ? rowColClasses.XS : rowColClasses.S);
 	      } else if (cell.qState === 'S' || cell.qState === 'L') {
-	        clazzArr.push(classes$a.S);
+	        clazzArr.push(rowColClasses.S);
 	      } else if (showGray && isAlternative(cell)) {
-	        clazzArr.push(classes$a.A);
+	        clazzArr.push(rowColClasses.A);
 	      } else if (showGray && isExcluded(cell)) {
-	        clazzArr.push(classes$a.X);
+	        clazzArr.push(rowColClasses.X);
 	      }
 	    }
 	    setClassArr(clazzArr);
@@ -22651,8 +22871,6 @@
 	    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,26 +22883,6 @@
 	  } 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
@@ -22693,66 +22891,11 @@
 	    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;
-	  };
 	  const iconStyles = {
 	    alignItems: 'center',
 	    display: 'flex',
@@ -22768,19 +22911,10 @@
 	    padding: 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, {
+	    className: rowColClasses.barContainer,
 	    flexBasisProp: flexBasisVal,
 	    style: styles,
 	    isGridCol: isGridCol,
@@ -22795,7 +22929,7 @@
 	    gap: 0,
 	    className: joinClassNames(['value', ...classArr]),
 	    classes: {
-	      root: classes$a.fieldRoot
+	      root: rowColClasses.fieldRoot
 	    },
 	    onClick: onClick,
 	    onMouseDown: onMouseDown,
@@ -22806,36 +22940,49 @@
 	    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)
-	    }
+	  }, /*#__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,
+	  }, ranges.length === 0 ? /*#__PURE__*/React.createElement(Field, {
+	    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
+	  }) : /*#__PURE__*/React.createElement(FieldWithRanges, {
+	    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
+	  })), 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'
@@ -25039,6 +25186,7 @@
 	  var _layout$qListObject$q, _loaderRef$current, _loaderRef$current$_l, _loaderRef$current$_l2;
 	  let {
 	    model,
+	    layout,
 	    selections,
 	    direction,
 	    checkboxes: checkboxOption,
@@ -25063,7 +25211,6 @@
 	    }
 	  } = _ref;
 	  const [initScrollPosIsSet, setInitScrollPosIsSet] = reactExports.useState(false);
-	  const [layout] = useLayout$1(model);
 	  const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
 	  const {
 	    checkboxes = checkboxOption,
@@ -26477,6 +26624,7 @@
 	    autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : true
 	  }), /*#__PURE__*/React.createElement(ListBox, {
 	    model: model,
+	    layout: layout,
 	    selections: selections,
 	    direction: "ltr",
 	    onSetListCount: c => setListCount(c)
@@ -27107,6 +27255,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,
@@ -27750,7 +27944,8 @@
 	function ListBoxInline(_ref3) {
 	  var _layout$layoutOptions, _layout$layoutOptions2;
 	  let {
-	    options = {}
+	    options,
+	    layout
 	  } = _ref3;
 	  const {
 	    app,
@@ -27800,7 +27995,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);
@@ -28025,6 +28219,7 @@
 	    } = _ref4;
 	    return /*#__PURE__*/React.createElement(ListBox, {
 	      model: model,
+	      layout: layout,
 	      selections: selections,
 	      direction: direction,
 	      listLayout: listLayout,
@@ -28056,6 +28251,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 {
@@ -28318,15 +28527,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
 	  });
 	}