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

package/core/esm/dev.js

@@ -1,14 +1,14 @@
 /*
-* @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.
 */
 
 import * as React from 'react';
-import React__default, { useState as useState$1, useEffect as useEffect$1, useReducer, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, createElement, useContext } from 'react';
+import React__default, { useState as useState$1, useEffect as useEffect$1, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useReducer, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, createElement, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { CacheProvider, ThemeContext as ThemeContext$2 } from '@emotion/react';
-import { Checkbox, Radio, Grid, Typography, FormControlLabel, Tooltip, Paper, IconButton, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Box, Icon, CircularProgress } from '@mui/material';
+import { Checkbox, Radio, Typography, FormControlLabel, Grid, Tooltip, Paper, IconButton, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Box, Icon, CircularProgress } from '@mui/material';
 import styled$3 from '@emotion/styled';
 
 function getAugmentedNamespace(n) {
@@ -7972,7 +7972,7 @@ function create$3(definition) {
   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', ''));
 });
@@ -8027,6 +8027,212 @@ var createKeyStore = (function () {
   return [useKeyStore, store];
 });
 
+const [useAppSelectionsStore, appSelectionsStore] = createKeyStore({});
+const [useAppModalStore, appModalStore] = createKeyStore({});
+const [useObjectSelectionsStore, objectSelectionsStore] = createKeyStore({});
+const [useModalObjectStore, modalObjectStore] = createKeyStore({});
+
+/* eslint no-underscore-dangle: 0 */
+function createAppSelections(_ref) {
+  let {
+    app
+  } = _ref;
+  const key = "".concat(app.id);
+  const end = async function () {
+    let accept = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    const model = modalObjectStore.get(key);
+    if (model) {
+      await model.endSelections(accept);
+      modalObjectStore.clear(key);
+      const objectSelections = objectSelectionsStore.get(model.id);
+      objectSelections.emit('deactivated');
+    }
+  };
+  const begin = async function (model, path) {
+    let accept = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    // Quick return if it's already in modal
+    if (model === modalObjectStore.get(key)) {
+      return;
+    }
+
+    // If other model is in modal state end it
+    end(accept);
+
+    // Pending modal
+    modalObjectStore.set(key, model);
+    const p = Array.isArray(path) ? path : [path];
+    const beginSelections = async skipRetry => {
+      try {
+        await model.beginSelections(p);
+        modalObjectStore.set(key, model); // We have a modal
+      } catch (err) {
+        if (err.code === 6003 && !skipRetry) {
+          await app.abortModal(accept);
+          beginSelections(true);
+        } else {
+          modalObjectStore.clear(key); // No modal
+        }
+      }
+    };
+
+    await beginSelections();
+  };
+  const appModal = {
+    begin,
+    end
+  };
+  appModalStore.set(key, appModal);
+
+  /**
+   * @class
+   * @alias AppSelections
+   */
+  const appSelections = {
+    model: app,
+    isInModal() {
+      return !!modalObjectStore.get(key);
+    },
+    isModal(object) {
+      // TODO check model state
+      return object ? modalObjectStore.get(key) === object : !!modalObjectStore.get(key);
+    },
+    forward() {
+      return appModal.end().then(() => app.forward());
+    },
+    back() {
+      return appModal.end().then(() => app.back());
+    },
+    clear() {
+      return appModal.end().then(() => app.clearAll());
+    },
+    clearField(field) {
+      let state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '$';
+      return appModal.end().then(() => app.getField(field, state).then(f => f.clear()));
+    }
+  };
+  return appSelections;
+}
+function useAppSelections(app) {
+  if (!app.session) {
+    // assume the app is mocked if session is undefined
+    return [];
+  }
+  const [appSelectionsStore] = useAppSelectionsStore();
+  const key = app ? app.id : null;
+  let appSelections = appSelectionsStore.get(key);
+  useEffect$1(() => {
+    if (!app || appSelections) return;
+    appSelections = createAppSelections({
+      app
+    });
+    appSelectionsStore.set(key, appSelections);
+    appSelectionsStore.dispatch(true);
+  }, [app]);
+  return [appSelections];
+}
+
+const NebulaApp = forwardRef((_ref, ref) => {
+  let {
+    initialContext,
+    app
+  } = _ref;
+  const [appSelections] = useAppSelections(app);
+  const [context, setContext] = useState$1(initialContext);
+  const [muiThemeName, setMuiThemeName] = useState$1();
+  const {
+    theme
+  } = useMemo$1(() => ({
+    theme: create$3(muiThemeName)
+  }), [muiThemeName]);
+  const [components, setComponents] = useState$1([]);
+  useImperativeHandle$1(ref, () => ({
+    addComponent(component) {
+      setComponents([...components, component]);
+    },
+    removeComponent(component) {
+      const ix = components.indexOf(component);
+      if (ix !== -1) {
+        components.splice(ix, 1);
+        setComponents([...components]);
+      }
+    },
+    setMuiThemeName,
+    setContext: ctx => setContext(oldContext => JSON.stringify(oldContext) !== JSON.stringify(ctx) ? ctx : oldContext),
+    getAppSelections: () => appSelections
+  }));
+  return /*#__PURE__*/React__default.createElement(StyledEngineProvider, {
+    injectFirst: true
+  }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React__default.createElement(InstanceContext.Provider, {
+    value: context
+  }, components)));
+});
+function boot(_ref2) {
+  let {
+    app,
+    context
+  } = _ref2;
+  let resolveRender;
+  const rendered = new Promise(resolve => {
+    resolveRender = resolve;
+  });
+  const appRef = React__default.createRef();
+  const element = document.createElement('div');
+  element.style.display = 'none';
+  element.setAttribute('data-nebulajs-version', "3.3.0" );
+  element.setAttribute('data-app-id', app.id);
+  document.body.appendChild(element);
+  ReactDOM.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
+    ref: appRef,
+    app: app,
+    initialContext: context
+  }), element, resolveRender);
+  const cells = {};
+  return [{
+    toggleFocusOfCells(cellIdToFocus) {
+      Object.keys(cells).forEach(i => {
+        cells[i].current.toggleFocus(i === cellIdToFocus);
+      });
+    },
+    cells,
+    addCell(id, cell) {
+      cells[id] = cell;
+    },
+    removeCell(id) {
+      delete cells[id];
+    },
+    add(component) {
+      (async () => {
+        await rendered;
+        appRef.current.addComponent(component);
+      })();
+    },
+    remove(component) {
+      (async () => {
+        await rendered;
+        appRef.current.removeComponent(component);
+      })();
+    },
+    setMuiThemeName(themeName) {
+      (async () => {
+        await rendered;
+        appRef.current.setMuiThemeName(themeName);
+      })();
+    },
+    context(ctx) {
+      (async () => {
+        await rendered;
+        appRef.current.setContext(ctx);
+      })();
+    },
+    getAppSelections: async () => {
+      await rendered;
+      return appRef.current.getAppSelections();
+    }
+  }, appRef, rendered];
+}
+
 const [useRpcResultStore, rpcResultStore] = createKeyStore({});
 const [useRpcRequestStore, rpcRequestStore] = createKeyStore({});
 const [useRpcRequestSessionModelStore, rpcRequestSessionModelStore] = createKeyStore({});
@@ -8079,6 +8285,51 @@ const subscribe = model => {
   };
 };
 
+function useSessionModel(definition, app) {
+  const key = app ? "".concat(app.id, "/").concat(JSON.stringify(definition)) : null;
+  const [modelStore] = useModelStore();
+  const [rpcRequestSessionModelStore] = useRpcRequestSessionModelStore();
+  const [model, setModel] = useState$1();
+  let rpcShared;
+  if (key) {
+    rpcShared = rpcRequestSessionModelStore.get(key);
+  }
+  for (var _len = arguments.length, deps = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    deps[_key - 2] = arguments[_key];
+  }
+  useEffect$1(() => {
+    if (!app) {
+      return;
+    }
+    // Create new session object
+    const create = async () => {
+      if (!rpcShared) {
+        const rpc = app.createSessionObject(definition);
+        rpcShared = rpc;
+        rpcRequestSessionModelStore.set(key, rpcShared);
+      }
+      const newModel = await rpcShared;
+      modelStore.set(key, newModel);
+      setModel(newModel);
+    };
+    create();
+  }, [app, ...deps]);
+  return [model];
+}
+
+const definition = {
+  qInfo: {
+    qType: 'current-selections'
+  },
+  qSelectionObjectDef: {
+    qStateName: '$'
+  },
+  alternateStates: []
+};
+function useCurrentSelectionsModel(app) {
+  return useSessionModel(definition, app);
+}
+
 const rpcReducer = (state, action) => {
   const {
     rpcResultStore,
@@ -8230,530 +8481,216 @@ function useAppLayout$1(model) {
   return useRpc(model, 'getAppLayout');
 }
 
-function useSessionModel(definition, app) {
-  const key = app ? "".concat(app.id, "/").concat(JSON.stringify(definition)) : null;
-  const [modelStore] = useModelStore();
-  const [rpcRequestSessionModelStore] = useRpcRequestSessionModelStore();
-  const [model, setModel] = useState$1();
-  let rpcShared;
-  if (key) {
-    rpcShared = rpcRequestSessionModelStore.get(key);
-  }
-  for (var _len = arguments.length, deps = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    deps[_key - 2] = arguments[_key];
-  }
-  useEffect$1(() => {
-    if (!app) {
+function useRect$1() {
+  const [node, setNode] = useState$1();
+  const [rect, setRect] = useState$1();
+  const callbackRef = useCallback(ref => {
+    if (!ref) {
       return;
     }
-    // Create new session object
-    const create = async () => {
-      if (!rpcShared) {
-        const rpc = app.createSessionObject(definition);
-        rpcShared = rpc;
-        rpcRequestSessionModelStore.set(key, rpcShared);
-      }
-      const newModel = await rpcShared;
-      modelStore.set(key, newModel);
-      setModel(newModel);
+    setNode(ref);
+  }, []);
+  const handleResize = () => {
+    const {
+      left,
+      top,
+      width,
+      height
+    } = node.getBoundingClientRect();
+    setRect({
+      left,
+      top,
+      width,
+      height
+    });
+  };
+  useLayoutEffect$1(() => {
+    if (!node) {
+      return undefined;
+    }
+    if (typeof ResizeObserver === 'function') {
+      let resizeObserver = new ResizeObserver(handleResize);
+      resizeObserver.observe(node);
+      return () => {
+        resizeObserver.unobserve(node);
+        resizeObserver.disconnect(node);
+        resizeObserver = null;
+      };
+    }
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
     };
-    create();
-  }, [app, ...deps]);
-  return [model];
-}
-
-const definition = {
-  qInfo: {
-    qType: 'current-selections'
-  },
-  qSelectionObjectDef: {
-    qStateName: '$'
-  },
-  alternateStates: []
-};
-function useCurrentSelectionsModel(app) {
-  return useSessionModel(definition, app);
+  }, [node]);
+  return [callbackRef, rect, node];
 }
 
-const patchAlternateState = (currentSelectionsModel, currentSelectionsLayout, appLayout) => {
-  const states = [...(appLayout.qStateNames || [])].map(s => ({
-    stateName: s,
-    // need this as reference in selection toolbar since qSelectionObject.qStateName is not in the layout
-    qSelectionObjectDef: {
-      qStateName: s
-    }
-  }));
-  const existingStates = (currentSelectionsLayout && currentSelectionsLayout.alternateStates ? currentSelectionsLayout.alternateStates.map(s => s.stateName) : []).join('::');
-  const newStates = (appLayout.qStateNames || []).map(s => s).join('::');
-  if (existingStates !== newStates) {
-    currentSelectionsModel.applyPatches([{
-      qOp: 'replace',
-      qPath: '/alternateStates',
-      qValue: JSON.stringify(states)
-    }], true);
+function getFontSize(size) {
+  if (size === 'large') {
+    return '20px';
   }
-};
-function useAppSelectionsNavigation(app) {
-  const [currentSelectionsModel] = useCurrentSelectionsModel(app);
-  const [currentSelectionsLayout] = useLayout$1(currentSelectionsModel);
-  const [appLayout] = useAppLayout$1(app);
-  const [navigationState, setNavigationState] = useState$1(null);
-  useEffect$1(() => {
-    if (!appLayout || !currentSelectionsModel || !currentSelectionsLayout) return;
-    patchAlternateState(currentSelectionsModel, currentSelectionsLayout, appLayout);
-  }, [appLayout, currentSelectionsModel, currentSelectionsLayout]);
-  useEffect$1(() => {
-    if (!currentSelectionsLayout) return;
-    let canGoBack = false;
-    let canGoForward = false;
-    let canClear = false;
-    [currentSelectionsLayout, ...(currentSelectionsLayout.alternateStates || [])].forEach(state => {
-      canGoBack = canGoBack || state.qSelectionObject && state.qSelectionObject.qBackCount > 0;
-      canGoForward = canGoForward || state.qSelectionObject && state.qSelectionObject.qForwardCount > 0;
-      canClear = canClear || (state.qSelectionObject && state.qSelectionObject.qSelections || []).filter(s => s.qLocked !== true).length > 0;
-    });
-    setNavigationState({
-      canGoBack,
-      canGoForward,
-      canClear
-    });
-  }, [currentSelectionsLayout]);
-  return [navigationState, currentSelectionsModel, currentSelectionsLayout];
+  if (size === 'small') {
+    return '12px';
+  }
+  return '16px';
 }
-
-const [useAppSelectionsStore, appSelectionsStore] = createKeyStore({});
-const [useAppModalStore, appModalStore] = createKeyStore({});
-const [useObjectSelectionsStore, objectSelectionsStore] = createKeyStore({});
-const [useModalObjectStore, modalObjectStore] = createKeyStore({});
-
-/* eslint no-underscore-dangle: 0 */
-function createAppSelections(_ref) {
+function SvgIcon$2(_ref) {
   let {
-    app,
-    currentSelectionsLayout,
-    navState
+    size,
+    style = {},
+    viewBox = '0 0 16 16',
+    shapes = []
   } = _ref;
-  const key = "".concat(app.id);
-  const end = async function () {
-    let accept = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    const model = modalObjectStore.get(key);
-    if (model) {
-      await model.endSelections(accept);
-      modalObjectStore.clear(key);
-      const objectSelections = objectSelectionsStore.get(model.id);
-      objectSelections.emit('deactivated');
+  const s = _objectSpread2({
+    fontSize: getFontSize(size),
+    display: 'inline-block',
+    fontStyle: 'normal',
+    lineHeight: '0',
+    textAlign: 'center',
+    textTransform: 'none',
+    verticalAlign: '-.125em',
+    textRendering: 'optimizeLegibility',
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale'
+  }, style);
+  return /*#__PURE__*/React__default.createElement("i", {
+    style: s
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: viewBox,
+    fill: "currentColor"
+  }, shapes.map((_ref2, ix) => {
+    let {
+      type: Type,
+      attrs
+    } = _ref2;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      React__default.createElement(Type, _extends$6({
+        key: ix
+      }, attrs))
+    );
+  })));
+}
+
+const remove = props => _objectSpread2(_objectSpread2({}, props), {}, {
+  shapes: [{
+    type: 'path',
+    attrs: {
+      d: 'M9.41421356,8 L11.8890873,5.52512627 C12.065864,5.34834957 12.0305087,4.95944084 11.8183766,4.74730881 L11.2526912,4.18162338 C11.0405592,3.96949135 10.6516504,3.93413601 10.4748737,4.1109127 L8,6.58578644 L5.52512627,4.1109127 C5.34834957,3.93413601 4.95944084,3.96949135 4.74730881,4.18162338 L4.25233406,4.67659813 C3.96949135,4.95944084 3.93413601,5.34834957 4.1109127,5.52512627 L6.58578644,8 L4.1109127,10.4748737 C3.93413601,10.6516504 3.96949135,11.0405592 4.18162338,11.2526912 L4.67659813,11.7476659 C4.95944084,12.0305087 5.34834957,12.065864 5.52512627,11.8890873 L8,9.41421356 L10.4748737,11.8890873 C10.6516504,12.065864 11.0405592,12.0305087 11.2526912,11.8183766 L11.8183766,11.2526912 C12.0305087,11.0405592 12.065864,10.6516504 11.8890873,10.4748737 L9.41421356,8 Z M8,0 C12.4,0 16,3.6 16,8 C16,12.4 12.4,16 8,16 C3.6,16 0,12.4 0,8 C0,3.6 3.6,0 8,0 Z'
     }
-  };
-  const begin = async function (model, path) {
-    let accept = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-    // Quick return if it's already in modal
-    if (model === modalObjectStore.get(key)) {
-      return;
+  }]
+});
+var Remove = (props => SvgIcon$2(remove(props)));
+
+const lock = props => _objectSpread2(_objectSpread2({}, props), {}, {
+  shapes: [{
+    type: 'path',
+    attrs: {
+      d: 'M8 10a1 1 0 0 1 .5 1.866v.634a.5.5 0 0 1-1 0v-.634A1 1 0 0 1 8 10ZM3.625 7.035A2 2 0 0 0 2 9v5a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9a2 2 0 0 0-1.625-1.965V5.383a4.375 4.375 0 0 0-8.75 0v1.652ZM3 9a1 1 0 0 1 .931-.998h8.138A1 1 0 0 1 13 9v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9Zm8.375-3.617V7h-6.75V5.383a3.375 3.375 0 0 1 6.75 0Z'
     }
+  }]
+});
+var Lock = (props => SvgIcon$2(lock(props)));
 
-    // If other model is in modal state end it
-    end(accept);
+const unlock = props => _objectSpread2(_objectSpread2({}, props), {}, {
+  shapes: [{
+    type: 'path',
+    attrs: {
+      d: 'M2.5,7 L11,7 C11.5522847,7 12,7.44771525 12,8 L12,15 C12,15.5522847 11.5522847,16 11,16 L1,16 C0.44771525,16 0,15.5522847 0,15 L0,8 C0,7.44771525 0.44771525,7 1,7 L1,4.98151367 C1,2.23029964 3.23857625,0 6,0 C8.4241995,0 10.4454541,1.71883353 10.9029715,4 L9.34209114,4 C8.9671727,2.54028848 7.9088888,1.5 6,1.5 C3.54860291,1.5 2.5,3.21561511 2.5,5.33193359 L2.5,7 Z'
+    }
+  }]
+});
+var Unlock = (props => SvgIcon$2(unlock(props)));
 
-    // Pending modal
-    modalObjectStore.set(key, model);
-    const p = Array.isArray(path) ? path : [path];
-    const beginSelections = async skipRetry => {
-      try {
-        await model.beginSelections(p);
-        modalObjectStore.set(key, model); // We have a modal
-      } catch (err) {
-        if (err.code === 6003 && !skipRetry) {
-          await app.abortModal(accept);
-          beginSelections(true);
-        } else {
-          modalObjectStore.clear(key); // No modal
-        }
-      }
-    };
+function isRangeVisible(_ref) {
+  var lastRenderedStartIndex = _ref.lastRenderedStartIndex,
+      lastRenderedStopIndex = _ref.lastRenderedStopIndex,
+      startIndex = _ref.startIndex,
+      stopIndex = _ref.stopIndex;
 
-    await beginSelections();
-  };
-  const appModal = {
-    begin,
-    end
-  };
-  appModalStore.set(key, appModal);
+  return !(startIndex > lastRenderedStopIndex || stopIndex < lastRenderedStartIndex);
+}
 
-  /**
-   * @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()));
+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;
     }
-  };
-  return appSelections;
-}
-function useAppSelections(app) {
-  if (!app.session) {
-    // assume the app is mocked if session is undefined
-    return [];
   }
-  const [navState, currentSelectionsModel, currentSelectionsLayout] = useAppSelectionsNavigation(app);
-  const [appSelectionsStore] = useAppSelectionsStore();
-  const key = app ? app.id : null;
-  let appSelections = appSelectionsStore.get(key);
-  useEffect$1(() => {
-    if (!app || !currentSelectionsModel || !currentSelectionsLayout || !navState || appSelections) return;
-    appSelections = createAppSelections({
-      app,
-      currentSelectionsLayout,
-      navState
-    });
-    appSelectionsStore.set(key, appSelections);
-    appSelectionsStore.dispatch(true);
-  }, [app, currentSelectionsModel, currentSelectionsLayout, navState]);
-  return [appSelections, navState];
-}
 
-const NebulaApp = forwardRef((_ref, ref) => {
-  let {
-    initialContext,
-    app
-  } = _ref;
-  const [appSelections] = useAppSelections(app);
-  const [context, setContext] = useState$1(initialContext);
-  const [muiThemeName, setMuiThemeName] = useState$1();
-  const {
-    theme
-  } = useMemo$1(() => ({
-    theme: create$3(muiThemeName)
-  }), [muiThemeName]);
-  const [components, setComponents] = useState$1([]);
-  useImperativeHandle$1(ref, () => ({
-    addComponent(component) {
-      setComponents([...components, component]);
-    },
-    removeComponent(component) {
-      const ix = components.indexOf(component);
-      if (ix !== -1) {
-        components.splice(ix, 1);
-        setComponents([...components]);
+  // 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;
       }
-    },
-    setMuiThemeName,
-    setContext,
-    getAppSelections: () => appSelections
-  }));
-  return /*#__PURE__*/React__default.createElement(StyledEngineProvider, {
-    injectFirst: true
-  }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React__default.createElement(InstanceContext.Provider, {
-    value: context
-  }, components)));
-});
-function boot(_ref2) {
-  let {
-    app,
-    context
-  } = _ref2;
-  let resolveRender;
-  const rendered = new Promise(resolve => {
-    resolveRender = resolve;
-  });
-  const appRef = React__default.createRef();
-  const element = document.createElement('div');
-  element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "3.3.0-alpha.0" );
-  element.setAttribute('data-app-id', app.id);
-  document.body.appendChild(element);
-  ReactDOM.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
-    ref: appRef,
-    app: app,
-    initialContext: context
-  }), element, resolveRender);
-  const cells = {};
-  return [{
-    toggleFocusOfCells(cellIdToFocus) {
-      Object.keys(cells).forEach(i => {
-        cells[i].current.toggleFocus(i === cellIdToFocus);
-      });
-    },
-    cells,
-    addCell(id, cell) {
-      cells[id] = cell;
-    },
-    removeCell(id) {
-      delete cells[id];
-    },
-    add(component) {
-      (async () => {
-        await rendered;
-        appRef.current.addComponent(component);
-      })();
-    },
-    remove(component) {
-      (async () => {
-        await rendered;
-        appRef.current.removeComponent(component);
-      })();
-    },
-    setMuiThemeName(themeName) {
-      (async () => {
-        await rendered;
-        appRef.current.setMuiThemeName(themeName);
-      })();
-    },
-    context(ctx) {
-      (async () => {
-        await rendered;
-        appRef.current.setContext(ctx);
-      })();
-    },
-    getAppSelections: async () => {
-      await rendered;
-      return appRef.current.getAppSelections();
     }
-  }, appRef, rendered];
-}
 
-function useRect$1() {
-  const [node, setNode] = useState$1();
-  const [rect, setRect] = useState$1();
-  const callbackRef = useCallback(ref => {
-    if (!ref) {
-      return;
-    }
-    setNode(ref);
-  }, []);
-  const handleResize = () => {
-    const {
-      left,
-      top,
-      width,
-      height
-    } = node.getBoundingClientRect();
-    setRect({
-      left,
-      top,
-      width,
-      height
-    });
-  };
-  useLayoutEffect$1(() => {
-    if (!node) {
-      return undefined;
-    }
-    if (typeof ResizeObserver === 'function') {
-      let resizeObserver = new ResizeObserver(handleResize);
-      resizeObserver.observe(node);
-      return () => {
-        resizeObserver.unobserve(node);
-        resizeObserver.disconnect(node);
-        resizeObserver = null;
-      };
+    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;
+      }
     }
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [node]);
-  return [callbackRef, rect, node];
+  }
+
+  return unloadedRanges;
 }
 
-function getFontSize(size) {
-  if (size === 'large') {
-    return '20px';
+var classCallCheck$1 = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
   }
-  if (size === 'small') {
-    return '12px';
-  }
-  return '16px';
-}
-function SvgIcon$2(_ref) {
-  let {
-    size,
-    style = {},
-    viewBox = '0 0 16 16',
-    shapes = []
-  } = _ref;
-  const s = _objectSpread2({
-    fontSize: getFontSize(size),
-    display: 'inline-block',
-    fontStyle: 'normal',
-    lineHeight: '0',
-    textAlign: 'center',
-    textTransform: 'none',
-    verticalAlign: '-.125em',
-    textRendering: 'optimizeLegibility',
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale'
-  }, style);
-  return /*#__PURE__*/React__default.createElement("i", {
-    style: s
-  }, /*#__PURE__*/React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    viewBox: viewBox,
-    fill: "currentColor"
-  }, shapes.map((_ref2, ix) => {
-    let {
-      type: Type,
-      attrs
-    } = _ref2;
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      React__default.createElement(Type, _extends$6({
-        key: ix
-      }, attrs))
-    );
-  })));
-}
-
-const remove = props => _objectSpread2(_objectSpread2({}, props), {}, {
-  shapes: [{
-    type: 'path',
-    attrs: {
-      d: 'M9.41421356,8 L11.8890873,5.52512627 C12.065864,5.34834957 12.0305087,4.95944084 11.8183766,4.74730881 L11.2526912,4.18162338 C11.0405592,3.96949135 10.6516504,3.93413601 10.4748737,4.1109127 L8,6.58578644 L5.52512627,4.1109127 C5.34834957,3.93413601 4.95944084,3.96949135 4.74730881,4.18162338 L4.25233406,4.67659813 C3.96949135,4.95944084 3.93413601,5.34834957 4.1109127,5.52512627 L6.58578644,8 L4.1109127,10.4748737 C3.93413601,10.6516504 3.96949135,11.0405592 4.18162338,11.2526912 L4.67659813,11.7476659 C4.95944084,12.0305087 5.34834957,12.065864 5.52512627,11.8890873 L8,9.41421356 L10.4748737,11.8890873 C10.6516504,12.065864 11.0405592,12.0305087 11.2526912,11.8183766 L11.8183766,11.2526912 C12.0305087,11.0405592 12.065864,10.6516504 11.8890873,10.4748737 L9.41421356,8 Z M8,0 C12.4,0 16,3.6 16,8 C16,12.4 12.4,16 8,16 C3.6,16 0,12.4 0,8 C0,3.6 3.6,0 8,0 Z'
-    }
-  }]
-});
-var Remove = (props => SvgIcon$2(remove(props)));
-
-const lock = props => _objectSpread2(_objectSpread2({}, props), {}, {
-  shapes: [{
-    type: 'path',
-    attrs: {
-      d: 'M8 10a1 1 0 0 1 .5 1.866v.634a.5.5 0 0 1-1 0v-.634A1 1 0 0 1 8 10ZM3.625 7.035A2 2 0 0 0 2 9v5a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9a2 2 0 0 0-1.625-1.965V5.383a4.375 4.375 0 0 0-8.75 0v1.652ZM3 9a1 1 0 0 1 .931-.998h8.138A1 1 0 0 1 13 9v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9Zm8.375-3.617V7h-6.75V5.383a3.375 3.375 0 0 1 6.75 0Z'
-    }
-  }]
-});
-var Lock = (props => SvgIcon$2(lock(props)));
-
-const unlock = props => _objectSpread2(_objectSpread2({}, props), {}, {
-  shapes: [{
-    type: 'path',
-    attrs: {
-      d: 'M2.5,7 L11,7 C11.5522847,7 12,7.44771525 12,8 L12,15 C12,15.5522847 11.5522847,16 11,16 L1,16 C0.44771525,16 0,15.5522847 0,15 L0,8 C0,7.44771525 0.44771525,7 1,7 L1,4.98151367 C1,2.23029964 3.23857625,0 6,0 C8.4241995,0 10.4454541,1.71883353 10.9029715,4 L9.34209114,4 C8.9671727,2.54028848 7.9088888,1.5 6,1.5 C3.54860291,1.5 2.5,3.21561511 2.5,5.33193359 L2.5,7 Z'
-    }
-  }]
-});
-var Unlock = (props => SvgIcon$2(unlock(props)));
-
-function isRangeVisible(_ref) {
-  var lastRenderedStartIndex = _ref.lastRenderedStartIndex,
-      lastRenderedStopIndex = _ref.lastRenderedStopIndex,
-      startIndex = _ref.startIndex,
-      stopIndex = _ref.stopIndex;
-
-  return !(startIndex > lastRenderedStopIndex || stopIndex < lastRenderedStartIndex);
-}
-
-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);
-    }
+};
+
+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) {
@@ -9182,57 +9119,590 @@ function useSelectionsInteractions(_ref) {
     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$2(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$2(tick(props)));
 
 const CheckboxChecked = "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")";
 
-const PREFIX$c = 'ListBoxCheckbox';
+const 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)(_ref => {
   let {
     theme
   } = _ref;
   return {
-    ["& .".concat(classes$c.cbIcon)]: {
+    ["& .".concat(classes$b.cbIcon)]: {
       borderRadius,
       width: 16,
       height: 16,
@@ -9243,7 +9713,7 @@ const StyledCheckbox = styled$1(Checkbox)(_ref => {
       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))',
@@ -9255,25 +9725,25 @@ const StyledCheckbox = styled$1(Checkbox)(_ref => {
         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'
     }
   };
@@ -9299,86 +9769,22 @@ function ListboxCheckbox(_ref2) {
     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__default.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)(_ref => {
   let {
@@ -9386,7 +9792,7 @@ const StyledRadio = styled$1(Radio)(_ref => {
     checked
   } = _ref;
   return {
-    ["&.".concat(classes$b.radioButton)]: {
+    ["&.".concat(classes$a.radioButton)]: {
       right: '5px',
       color: checked ? theme.palette.selected.main : theme.palette.main
     }
@@ -9402,7 +9808,7 @@ function ListBoxRadioButton(_ref2) {
     checked: checked,
     value: label,
     name: label,
-    className: classes$b.radioButton,
+    className: classes$a.radioButton,
     style: {
       backgroundColor: 'transparent'
     },
@@ -9414,237 +9820,251 @@ function ListBoxRadioButton(_ref2) {
   });
 }
 
-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.
-    }
-
-    if (elementToFocus) {
-      elementToFocus.focus();
+  return /*#__PURE__*/React__default.createElement(Typography, {
+    component: "span",
+    variant: "body2",
+    className: joinClassNames([rowColClasses.labelText, highlighted && rowColClasses.highlighted, dense && rowColClasses.labelDense, showGray && excludedOrAlternative({
+      cell,
+      checkboxes
+    }) && rowColClasses.excludedTextWithCheckbox]),
+    color: color,
+    justifyContent: valueTextAlign
+  }, /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      whiteSpace: 'pre'
     }
-    event.preventDefault();
-    event.stopPropagation();
-  };
-  return handleKeyDown;
+  }, label));
 }
-function getListboxInlineKeyboardNavigation(_ref2) {
+
+function LabelTag(_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,
+    highlighted,
+    dense,
+    showGray,
+    checkboxes,
+    cell,
+    valueTextAlign
+  } = _ref;
+  if (typeof label === 'string') {
+    return /*#__PURE__*/React__default.createElement(ValueField, {
+      label: label,
+      color: color,
+      highlighted: highlighted,
+      dense: dense,
+      showGray: showGray,
+      checkboxes: checkboxes,
+      cell: cell,
+      valueTextAlign: valueTextAlign
+    });
+  }
+  return label;
+}
 
-        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 CheckboxField(_ref) {
+  let {
+    label,
+    color,
+    qElemNumber,
+    isSelected,
+    dense,
+    cell,
+    isGridCol,
+    showGray,
+    isSingleSelect,
+    highlighted,
+    checkboxes,
+    valueTextAlign
+  } = _ref;
+  const cb = /*#__PURE__*/React__default.createElement(ListboxCheckbox, {
+    label: label,
+    checked: isSelected,
+    dense: dense,
+    excluded: isExcluded(cell),
+    isGridCol: isGridCol,
+    showGray: showGray
+  });
+  const rb = /*#__PURE__*/React__default.createElement(ListBoxRadioButton, {
+    label: label,
+    checked: isSelected,
+    dense: dense
+  });
+  return /*#__PURE__*/React__default.createElement(FormControlLabel, {
+    color: color,
+    control: isSingleSelect ? rb : cb,
+    className: rowColClasses.checkboxLabel,
+    label: /*#__PURE__*/React__default.createElement(LabelTag, {
+      label: label,
+      color: color,
+      highlighted: highlighted,
+      dense: dense,
+      showGray: showGray,
+      checkboxes: checkboxes,
+      cell: cell,
+      valueTextAlign: valueTextAlign
+    }),
+    key: qElemNumber
+  });
+}
 
-    // 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 LabelsWithRanges(_ref) {
+  let {
+    labels,
+    dense,
+    showGray,
+    checkboxes
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, labels.map(_ref2 => {
+    let [label, highlighted] = _ref2;
+    return /*#__PURE__*/React__default.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__default.createElement(LabelsWithRanges, {
+    labels: labels,
+    dense: dense,
+    showGray: showGray,
+    checkboxes: checkboxes
+  });
+  return checkboxes ? /*#__PURE__*/React__default.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;
+}
+
+function Field(_ref) {
+  let {
+    label,
+    color,
+    qElemNumber,
+    isSelected,
+    dense,
+    cell,
+    isGridCol,
+    showGray,
+    isSingleSelect,
+    highlighted,
+    checkboxes,
+    valueTextAlign
+  } = _ref;
+  return checkboxes ? /*#__PURE__*/React__default.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__default.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__default.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__default.createElement(Grid, {
+    item: true,
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    className: rowColClasses.frequencyCount
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    noWrap: true,
+    color: "inherit",
+    variant: "body2",
+    className: joinClassNames([dense && rowColClasses.labelDense, rowColClasses.labelText, showGray && excludedOrAlternative({
+      cell,
+      checkboxes
+    }) && rowColClasses.excludedTextWithCheckbox])
+  }, getFrequencyText({
+    cell
+  })));
 }
 
 function getGridItemSizes(_ref) {
@@ -9663,235 +10083,37 @@ function getGridItemSizes(_ref) {
   switch (layoutOrder) {
     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
-    }
-  };
-};
+        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 ItemGrid = styled$1(Grid, {
   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,
@@ -9899,7 +10121,7 @@ function RowColumn(_ref4) {
     columnIndex,
     style,
     data
-  } = _ref4;
+  } = _ref;
   const {
     onClick,
     onMouseDown,
@@ -9993,25 +10215,23 @@ function RowColumn(_ref4) {
     }
     setCell(c);
   }, [pages]);
-  const isExcluded = c => c ? c.qState === 'X' || c.qState === 'XS' || c.qState === 'XL' : null;
-  const isAlternative = c => c ? c.qState === 'A' : null;
   useEffect$1(() => {
     if (!cell) {
       return;
     }
     const selected = cell.qState === 'S' || cell.qState === 'XS' || cell.qState === 'L';
     setSelected(selected);
-    const clazzArr = [column ? classes$a.column : classes$a.row];
-    if (!(histogram && (dense || checkboxes))) clazzArr.push(classes$a.rowBorderBottom);
+    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);
@@ -10020,8 +10240,6 @@ function RowColumn(_ref4) {
     return null; // prevent rendering empty rows
   }
 
-  const joinClassNames = namesArray => namesArray.filter(c => !!c).join(' ').trim();
-  const excludedOrAlternative = () => (isAlternative(cell) || isExcluded(cell)) && checkboxes;
   const isNumeric = !['NaN', undefined].includes(cell === null || cell === void 0 ? void 0 : cell.qNum);
   let valueTextAlign;
   const isAutoTextAlign = !textAlign || textAlign.auto;
@@ -10034,26 +10252,6 @@ function RowColumn(_ref4) {
   } else {
     valueTextAlign = (textAlign === null || textAlign === void 0 ? void 0 : textAlign.align) || 'left';
   }
-  const getValueField = _ref5 => {
-    let {
-      lbl,
-      ix,
-      color,
-      highlighted = false
-    } = _ref5;
-    return /*#__PURE__*/React__default.createElement(Typography, {
-      component: "span",
-      variant: "body2",
-      key: ix,
-      className: joinClassNames([classes$a.labelText, highlighted && classes$a.highlighted, dense && classes$a.labelDense, showGray && excludedOrAlternative() && classes$a.excludedTextWithCheckbox]),
-      color: color,
-      justifyContent: valueTextAlign
-    }, /*#__PURE__*/React__default.createElement("span", {
-      style: {
-        whiteSpace: 'pre'
-      }
-    }, lbl));
-  };
   const preventContextMenu = event => {
     if (checkboxes) {
       // Event will not propagate in the checkbox/radiobutton case
@@ -10062,66 +10260,11 @@ function RowColumn(_ref4) {
     event.preventDefault();
   };
   const isGridCol = dataLayout === 'grid' && layoutOrder === 'column';
-  const getCheckboxField = _ref6 => {
-    let {
-      lbl,
-      color,
-      qElemNumber
-    } = _ref6;
-    const cb = /*#__PURE__*/React__default.createElement(ListboxCheckbox, {
-      label: lbl,
-      checked: isSelected,
-      dense: dense,
-      excluded: isExcluded(cell),
-      isGridCol: isGridCol,
-      showGray: showGray
-    });
-    const rb = /*#__PURE__*/React__default.createElement(ListBoxRadioButton, {
-      label: lbl,
-      checked: isSelected,
-      dense: dense
-    });
-    const labelTag = typeof lbl === 'string' ? getValueField({
-      lbl,
-      color,
-      highlighted: false
-    }) : lbl;
-    return /*#__PURE__*/React__default.createElement(FormControlLabel, {
-      color: color,
-      control: isSingleSelect ? rb : cb,
-      className: classes$a.checkboxLabel,
-      label: labelTag,
-      key: qElemNumber
-    });
-  };
   const label = (_cell$qText = cell === null || cell === void 0 ? void 0 : cell.qText) !== null && _cell$qText !== void 0 ? _cell$qText : '';
-  const getFrequencyText = () => {
-    if (cell) {
-      return cell.qFrequency ? cell.qFrequency : frequencyTextNone;
-    }
-    return '';
-  };
 
   // Search highlights. Split up labelText span into several and add the highlighted class to matching sub-strings.
   const ranges = cell && cell.qHighlightRanges && cell.qHighlightRanges.qRanges.sort((a, b) => a.qCharPos - b.qCharPos) || [];
   const labels = getSegmentsFromRanges(label, ranges);
-  const getField = checkboxes ? getCheckboxField : getValueField;
-  const getFieldWithRanges = _ref7 => {
-    let {
-      lbls
-    } = _ref7;
-    const labelsWithRanges = lbls.map((_ref8, ix) => {
-      let [lbl, highlighted] = _ref8;
-      return getValueField({
-        ix,
-        highlighted,
-        lbl
-      });
-    });
-    return checkboxes ? getCheckboxField({
-      lbl: labelsWithRanges
-    }) : labelsWithRanges;
-  };
   const iconStyles = {
     alignItems: 'center',
     display: 'flex',
@@ -10137,19 +10280,10 @@ function RowColumn(_ref4) {
     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__default.createElement(Root$1, {
-    className: classes$a.barContainer,
+  return /*#__PURE__*/React__default.createElement(RowColRoot, {
+    className: rowColClasses.barContainer,
     flexBasisProp: flexBasisVal,
     style: styles,
     isGridCol: isGridCol,
@@ -10164,7 +10298,7 @@ function RowColumn(_ref4) {
     gap: 0,
     className: joinClassNames(['value', ...classArr]),
     classes: {
-      root: classes$a.fieldRoot
+      root: rowColClasses.fieldRoot
     },
     onClick: onClick,
     onMouseDown: onMouseDown,
@@ -10175,36 +10309,49 @@ function RowColumn(_ref4) {
     role: column ? 'column' : 'row',
     tabIndex: isFirstElement && (!keyboard.enabled || keyboard.active) ? 0 : -1,
     "data-n": cell && cell.qElemNumber
-  }, hasHistogramBar() && /*#__PURE__*/React__default.createElement("div", {
-    className: joinClassNames([classes$a.bar, checkboxes && classes$a.barWithCheckbox, isSelected && (checkboxes ? classes$a.barSelectedWithCheckbox : classes$a.barSelected)]),
-    style: {
-      width: getBarWidth(cell.qFrequency)
-    }
+  }, /*#__PURE__*/React__default.createElement(Histogram, {
+    cell: cell,
+    histogram: histogram,
+    checkboxes: checkboxes,
+    isSelected: isSelected,
+    frequencyMax: frequencyMax
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     style: cellStyle,
-    className: joinClassNames([classes$a.cell, classes$a.selectedCell]),
+    className: joinClassNames([rowColClasses.cell, rowColClasses.selectedCell]),
     title: "".concat(label)
-  }, ranges.length === 0 ? getField({
-    lbl: label,
-    color: 'inherit'
-  }) : getFieldWithRanges({
-    lbls: labels
-  })), freqIsAllowed && /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    style: {
-      display: 'flex',
-      alignItems: 'center'
-    },
-    className: classes$a.frequencyCount
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    noWrap: true,
+  }, ranges.length === 0 ? /*#__PURE__*/React__default.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__default.createElement(Grid, {
+    qElemNumber: cell.qElemNumber,
+    isSelected: isSelected,
+    dense: dense,
+    cell: cell,
+    isGridCol: isGridCol,
+    showGray: showGray,
+    isSingleSelect: isSingleSelect,
+    checkboxes: checkboxes
+  }) : /*#__PURE__*/React__default.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__default.createElement(Frequency, {
+    cell: cell,
+    checkboxes: checkboxes,
+    dense: dense,
+    showGray: showGray
+  }), !checkboxes && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: classes$a.icon
+    className: rowColClasses.icon
   }, !showLock && !showTick && /*#__PURE__*/React__default.createElement("span", {
     style: {
       minWidth: '12px'
@@ -12554,6 +12701,7 @@ function ListBox(_ref) {
   var _layout$qListObject$q, _loaderRef$current, _loaderRef$current$_l, _loaderRef$current$_l2;
   let {
     model,
+    layout,
     selections,
     direction,
     checkboxes: checkboxOption,
@@ -12578,7 +12726,6 @@ function ListBox(_ref) {
     }
   } = _ref;
   const [initScrollPosIsSet, setInitScrollPosIsSet] = useState$1(false);
-  const [layout] = useLayout$1(model);
   const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
   const {
     checkboxes = checkboxOption,
@@ -13992,6 +14139,7 @@ function ListBoxPopover(_ref) {
     autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : true
   }), /*#__PURE__*/React__default.createElement(ListBox, {
     model: model,
+    layout: layout,
     selections: selections,
     direction: "ltr",
     onSetListCount: c => setListCount(c)
@@ -14622,6 +14770,52 @@ const selectionsForward = props => _objectSpread2(_objectSpread2({}, props), {},
 });
 var SelectionsForward = (props => SvgIcon$2(selectionsForward(props)));
 
+const patchAlternateState = (currentSelectionsModel, currentSelectionsLayout, appLayout) => {
+  const states = [...(appLayout.qStateNames || [])].map(s => ({
+    stateName: s,
+    // need this as reference in selection toolbar since qSelectionObject.qStateName is not in the layout
+    qSelectionObjectDef: {
+      qStateName: s
+    }
+  }));
+  const existingStates = (currentSelectionsLayout && currentSelectionsLayout.alternateStates ? currentSelectionsLayout.alternateStates.map(s => s.stateName) : []).join('::');
+  const newStates = (appLayout.qStateNames || []).map(s => s).join('::');
+  if (existingStates !== newStates) {
+    currentSelectionsModel.applyPatches([{
+      qOp: 'replace',
+      qPath: '/alternateStates',
+      qValue: JSON.stringify(states)
+    }], true);
+  }
+};
+function useAppSelectionsNavigation(app) {
+  const [currentSelectionsModel] = useCurrentSelectionsModel(app);
+  const [currentSelectionsLayout] = useLayout$1(currentSelectionsModel);
+  const [appLayout] = useAppLayout$1(app);
+  const [navigationState, setNavigationState] = useState$1(null);
+  useEffect$1(() => {
+    if (!appLayout || !currentSelectionsModel || !currentSelectionsLayout) return;
+    patchAlternateState(currentSelectionsModel, currentSelectionsLayout, appLayout);
+  }, [appLayout, currentSelectionsModel, currentSelectionsLayout]);
+  useEffect$1(() => {
+    if (!currentSelectionsLayout) return;
+    let canGoBack = false;
+    let canGoForward = false;
+    let canClear = false;
+    [currentSelectionsLayout, ...(currentSelectionsLayout.alternateStates || [])].forEach(state => {
+      canGoBack = canGoBack || state.qSelectionObject && state.qSelectionObject.qBackCount > 0;
+      canGoForward = canGoForward || state.qSelectionObject && state.qSelectionObject.qForwardCount > 0;
+      canClear = canClear || (state.qSelectionObject && state.qSelectionObject.qSelections || []).filter(s => s.qLocked !== true).length > 0;
+    });
+    setNavigationState({
+      canGoBack,
+      canGoForward,
+      canClear
+    });
+  }, [currentSelectionsLayout]);
+  return [navigationState, currentSelectionsModel, currentSelectionsLayout];
+}
+
 function Nav(_ref) {
   let {
     api,
@@ -15265,7 +15459,8 @@ const Title = styled$1(Typography)(_ref2 => {
 function ListBoxInline(_ref3) {
   var _layout$layoutOptions, _layout$layoutOptions2;
   let {
-    options = {}
+    options,
+    layout
   } = _ref3;
   const {
     app,
@@ -15315,7 +15510,6 @@ function ListBoxInline(_ref3) {
   const moreAlignTo = useRef();
   const containerRef = useRef();
   const [searchContainer, searchContainerRef] = useRefWithCallback();
-  const [layout] = useLayout$1(model);
   const [showToolbar, setShowToolbar] = useState$1(false);
   const [showSearch, setShowSearch] = useState$1(false);
   const [keyboardActive, setKeyboardActive] = useState$1(false);
@@ -15540,6 +15734,7 @@ function ListBoxInline(_ref3) {
     } = _ref4;
     return /*#__PURE__*/React__default.createElement(ListBox, {
       model: model,
+      layout: layout,
       selections: selections,
       direction: direction,
       listLayout: listLayout,
@@ -15571,6 +15766,20 @@ function ListBoxInline(_ref3) {
     });
   }))));
 }
+const ListBoxInlineMemoed = React__default.memo(ListBoxInline);
+function IsolateUseLayoutWrapper(_ref5) {
+  let {
+    options = {}
+  } = _ref5;
+  const {
+    model
+  } = options;
+  const [layout] = useLayout$1(model);
+  return /*#__PURE__*/React__default.createElement(ListBoxInlineMemoed, {
+    options: options,
+    layout: layout
+  });
+}
 
 function useExistingModel(_ref) {
   let {
@@ -15833,15 +16042,15 @@ function ListBoxWrapper(_ref) {
   });
   const elementRef = useRef(element);
   const selections = hasExternalSelectionsApi ? options.selectionsApi : useObjectSelections(app, model, [elementRef, '.njs-action-toolbar-more'], options)[0];
-  if (!selections || !model) {
-    return null;
-  }
-  const opts = _objectSpread2(_objectSpread2({}, options), {}, {
+  const opts = useMemo$1(() => _objectSpread2(_objectSpread2({}, options), {}, {
     selections,
     model,
     app
-  });
-  return /*#__PURE__*/React__default.createElement(ListBoxInline, {
+  }), [options, selections, model, app]);
+  if (!selections || !model) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(IsolateUseLayoutWrapper, {
     options: opts
   });
 }