@nebula.js/stardust 4.8.1 → 5.0.0-alpha.0

package/core/esm/dev.js

@@ -1,11 +1,11 @@
 /*
-* @nebula.js/stardust v4.8.1
+* @nebula.js/stardust v5.0.0-alpha.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
 
 import * as React from 'react';
-import React__default, { useState as useState$1, useEffect as useEffect$1, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useReducer, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, useContext, createElement, Component } from 'react';
+import React__default, { useState as useState$1, useEffect as useEffect$1, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useContext, useReducer, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, createElement, Component } from 'react';
 import ReactDOM from 'react-dom';
 import { CacheProvider, ThemeContext as ThemeContext$2 } from '@emotion/react';
 import { Checkbox, Radio, Typography, FormControlLabel, Box, Grid, Tooltip, Paper, IconButton, styled as styled$4, Popover, MenuList, MenuItem, ListItemIcon, Divider, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, Icon, CircularProgress } from '@mui/material';
@@ -3184,15 +3184,14 @@ function theme$1(resolvedTheme) {
     },
     dataColors() {
       /** @interface Theme~DataColorSpecials */
-      return (/** @lends Theme~DataColorSpecials */{
-          /** @type {string} */
-          primary: resolvedTheme.dataColors.primaryColor,
-          /** @type {string} */
-          nil: resolvedTheme.dataColors.nullColor,
-          /** @type {string} */
-          others: resolvedTheme.dataColors.othersColor
-        }
-      );
+      return /** @lends Theme~DataColorSpecials */{
+        /** @type {string} */
+        primary: resolvedTheme.dataColors.primaryColor,
+        /** @type {string} */
+        nil: resolvedTheme.dataColors.nullColor,
+        /** @type {string} */
+        others: resolvedTheme.dataColors.othersColor
+      };
     },
     uiColor(c, shift) {
       // eslint-disable-next-line no-param-reassign
@@ -3518,7 +3517,6 @@ function resolveVariables(objTree, variables) {
     }
   });
 }
-
 styleResolver.resolveRawTheme = raw => {
   // TODO - validate format
   const c = extend$2(true, {}, raw);
@@ -5670,7 +5668,7 @@ function StyledEngineProvider(props) {
 }
 
 /**
- * @mui/styled-engine v5.14.18
+ * @mui/styled-engine v5.14.19
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -6126,51 +6124,25 @@ function borderTransform(value) {
   }
   return `${value}px solid`;
 }
-const border = style$1({
-  prop: 'border',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderTop = style$1({
-  prop: 'borderTop',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderRight = style$1({
-  prop: 'borderRight',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderBottom = style$1({
-  prop: 'borderBottom',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderLeft = style$1({
-  prop: 'borderLeft',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderColor = style$1({
-  prop: 'borderColor',
-  themeKey: 'palette'
-});
-const borderTopColor = style$1({
-  prop: 'borderTopColor',
-  themeKey: 'palette'
-});
-const borderRightColor = style$1({
-  prop: 'borderRightColor',
-  themeKey: 'palette'
-});
-const borderBottomColor = style$1({
-  prop: 'borderBottomColor',
-  themeKey: 'palette'
-});
-const borderLeftColor = style$1({
-  prop: 'borderLeftColor',
-  themeKey: 'palette'
-});
+function createBorderStyle(prop, transform) {
+  return style$1({
+    prop,
+    themeKey: 'borders',
+    transform
+  });
+}
+const border = createBorderStyle('border', borderTransform);
+const borderTop = createBorderStyle('borderTop', borderTransform);
+const borderRight = createBorderStyle('borderRight', borderTransform);
+const borderBottom = createBorderStyle('borderBottom', borderTransform);
+const borderLeft = createBorderStyle('borderLeft', borderTransform);
+const borderColor = createBorderStyle('borderColor');
+const borderTopColor = createBorderStyle('borderTopColor');
+const borderRightColor = createBorderStyle('borderRightColor');
+const borderBottomColor = createBorderStyle('borderBottomColor');
+const borderLeftColor = createBorderStyle('borderLeftColor');
+const outline = createBorderStyle('outline', borderTransform);
+const outlineColor = createBorderStyle('outlineColor');
 
 // false positive
 // eslint-disable-next-line react/function-component-definition
@@ -6186,7 +6158,7 @@ const borderRadius$1 = props => {
 };
 borderRadius$1.propTypes = {};
 borderRadius$1.filterProps = ['borderRadius'];
-compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius$1);
+compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius$1, outline, outlineColor);
 
 // false positive
 // eslint-disable-next-line react/function-component-definition
@@ -6384,6 +6356,13 @@ const defaultSxConfig = {
   borderLeftColor: {
     themeKey: 'palette'
   },
+  outline: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  outlineColor: {
+    themeKey: 'palette'
+  },
   borderRadius: {
     themeKey: 'shape.borderRadius',
     style: borderRadius$1
@@ -8551,7 +8530,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "cca9" ;
+const NEBULA_VERSION_HASH = "117f" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8562,9 +8541,49 @@ var InstanceContext = React__default.createContext({
   translator: null,
   constraints: {},
   interactions: {},
-  themeApi: null
+  themeApi: null,
+  modelStore: {},
+  selectionStore: {}
 });
 
+const DEFAULT_INTERACTIONS = {
+  active: true,
+  select: true,
+  passive: true,
+  edit: false
+};
+function pickConstraintsOrInteractions(context) {
+  const {
+    constraints = {},
+    interactions = {}
+  } = context;
+  // If some interaction is defined, then we use that
+  if (Object.keys(interactions).length > 0) {
+    return interactions;
+  }
+  const ret = {};
+  Object.keys(constraints).forEach(state => {
+    ret[state] = !constraints[state];
+  });
+  return ret;
+}
+function unifyContraintsAndInteractions(context) {
+  const interactions = {};
+  const constraints = {};
+  const definedSettings = pickConstraintsOrInteractions(context);
+  Object.keys(DEFAULT_INTERACTIONS).forEach(state => {
+    if (definedSettings[state] !== undefined) {
+      interactions[state] = definedSettings[state];
+      constraints[state] = !definedSettings[state];
+    } else {
+      interactions[state] = DEFAULT_INTERACTIONS[state];
+      constraints[state] = !DEFAULT_INTERACTIONS[state];
+    }
+  });
+  context.constraints = constraints;
+  context.interactions = interactions;
+}
+
 var createKeyStore = (function () {
   let initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let applyMiddleware = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
@@ -8607,169 +8626,97 @@ var createKeyStore = (function () {
   return [useKeyStore, store];
 });
 
-const [useAppSelectionsStore, appSelectionsStore] = createKeyStore({});
-const [useAppModalStore, appModalStore] = 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,
-      objectSelections
-    } = modalObjectStore.get(key) || {};
-    if (model) {
-      await model.endSelections(accept);
-      modalObjectStore.clear(key);
-      objectSelections.emit('deactivated');
-    }
-  };
-  const begin = async _ref2 => {
-    var _modalObjectStore$get;
+function initializeStores$1(appId) {
+  const [useRpcResultStore, rpcResultStore] = createKeyStore({});
+  const [useRpcRequestStore, rpcRequestStore] = createKeyStore({});
+  const [useRpcRequestSessionModelStore, rpcRequestSessionModelStore] = createKeyStore({});
+  const [useRpcRequestModelStore, rpcRequestModelStore] = createKeyStore({});
+  const [useModelChangedStore, modelChangedStore] = createKeyStore({});
+  const [, modelInitializedStore] = createKeyStore({});
+  const modelStoreMiddleware = _ref => {
     let {
-      model,
-      paths,
-      accept = true,
-      objectSelections
-    } = _ref2;
-    // Quick return if it's already in modal
-    if (objectSelections === ((_modalObjectStore$get = modalObjectStore.get(key)) === null || _modalObjectStore$get === void 0 ? void 0 : _modalObjectStore$get.objectSelections)) {
-      return;
+      type,
+      value: model
+    } = _ref;
+    const initialized = modelInitializedStore.get(model.id);
+    modelInitializedStore.set(model.id, {});
+    const onChanged = () => {
+      rpcRequestStore.clear(model.id);
+      modelChangedStore.set(model.id, {});
+      modelChangedStore.dispatch(true); // Force new state to trigger hooks
+    };
+    const unsubscribe = () => {
+      model.removeListener('changed', onChanged);
+      rpcResultStore.clear(model.id);
+      rpcRequestStore.clear(model.id);
+      rpcRequestSessionModelStore.clear(model.id);
+      rpcRequestModelStore.clear(model.id);
+      modelChangedStore.clear(model.id);
+      modelInitializedStore.clear(model.id);
+    };
+    switch (type) {
+      case 'SET':
+        if (!initialized) {
+          model.on('changed', onChanged);
+          model.once('closed', () => {
+            unsubscribe();
+          });
+        }
+        break;
     }
-
-    // If other model is in modal state end it
-    end(accept);
-
-    // Pending modal
-    modalObjectStore.set(key, {
-      model,
-      objectSelections
+    return unsubscribe;
+  };
+  const [useModelStore, modelStore] = createKeyStore({}, modelStoreMiddleware);
+  const subscribe = model => {
+    const unsubscribe = modelStoreMiddleware({
+      type: 'SET',
+      value: model
     });
-    const p = Array.isArray(paths) ? paths : [paths];
-    const beginSelections = async skipRetry => {
-      try {
-        await model.beginSelections(p);
-        modalObjectStore.set(key, {
-          model,
-          objectSelections
-        }); // We have a modal
-      } catch (err) {
-        if (err.code === 6003 && !skipRetry) {
-          await app.abortModal(accept);
-          beginSelections(true);
-        } else {
-          modalObjectStore.clear(key); // No modal
-        }
-      }
+    return () => {
+      unsubscribe();
+      modelStore.clear(model.id);
     };
-
-    await beginSelections();
   };
-  const appModal = {
-    begin,
-    end
-  };
-  appModalStore.set(key, appModal);
-
-  /**
-   * @class
-   * @alias AppSelections
-   */
-  const appSelections = {
-    model: app,
-    isInModal() {
-      return !!modalObjectStore.get(key);
-    },
-    isModal(objectSelections) {
-      var _modalObjectStore$get2;
-      // TODO check model state
-      return objectSelections ? ((_modalObjectStore$get2 = modalObjectStore.get(key)) === null || _modalObjectStore$get2 === void 0 ? void 0 : _modalObjectStore$get2.objectSelections) === objectSelections : !!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 {
+    subscribe,
+    useModelStore,
+    modelStore,
+    useModelChangedStore,
+    useRpcResultStore,
+    rpcResultStore,
+    useRpcRequestStore,
+    rpcRequestStore,
+    useRpcRequestModelStore,
+    rpcRequestModelStore,
+    useRpcRequestSessionModelStore,
+    rpcRequestSessionModelStore,
+    modelChangedStore,
+    appId
   };
-  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 DEFAULT_INTERACTIONS = {
-  active: true,
-  select: true,
-  passive: true,
-  edit: false
-};
-function pickConstraintsOrInteractions(context) {
-  const {
-    constraints = {},
-    interactions = {}
-  } = context;
-  // If some interaction is defined, then we use that
-  if (Object.keys(interactions).length > 0) {
-    return interactions;
-  }
-  const ret = {};
-  Object.keys(constraints).forEach(state => {
-    ret[state] = !constraints[state];
-  });
-  return ret;
-}
-function unifyContraintsAndInteractions(context) {
-  const interactions = {};
-  const constraints = {};
-  const definedSettings = pickConstraintsOrInteractions(context);
-  Object.keys(DEFAULT_INTERACTIONS).forEach(state => {
-    if (definedSettings[state] !== undefined) {
-      interactions[state] = definedSettings[state];
-      constraints[state] = !definedSettings[state];
-    } else {
-      interactions[state] = DEFAULT_INTERACTIONS[state];
-      constraints[state] = !DEFAULT_INTERACTIONS[state];
-    }
-  });
-  context.constraints = constraints;
-  context.interactions = interactions;
+function initializeStores(appId) {
+  const [useAppSelectionsStore, appSelectionsStore] = createKeyStore({});
+  const [useAppModalStore, appModalStore] = createKeyStore({});
+  const [useModalObjectStore, modalObjectStore] = createKeyStore({});
+  return {
+    useAppSelectionsStore,
+    useAppModalStore,
+    appSelectionsStore,
+    appModalStore,
+    useModalObjectStore,
+    modalObjectStore,
+    appId
+  };
 }
 
 const NebulaApp = forwardRef((_ref, ref) => {
   let {
     initialContext,
-    app,
-    renderCallback
+    renderCallback,
+    modelStore,
+    selectionStore
   } = _ref;
-  const [appSelections] = useAppSelections(app);
   const [context, setContext] = useState$1(initialContext);
   const [muiThemeName, setMuiThemeName] = useState$1();
   const {
@@ -8789,9 +8736,12 @@ const NebulaApp = forwardRef((_ref, ref) => {
       setComponents([...comps]);
     },
     setMuiThemeName,
-    setContext: ctx => setContext(oldContext => JSON.stringify(oldContext) !== JSON.stringify(ctx) ? ctx : oldContext),
-    getAppSelections: () => appSelections
+    setContext: ctx => setContext(oldContext => JSON.stringify(oldContext) !== JSON.stringify(ctx) ? ctx : oldContext)
   }), []);
+  if (context) {
+    context.modelStore = modelStore;
+    context.selectionStore = selectionStore;
+  }
   return /*#__PURE__*/React__default.createElement(StyledEngineProvider, {
     injectFirst: true
   }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
@@ -8812,18 +8762,21 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "4.8.1" );
+  element.setAttribute('data-nebulajs-version', "5.0.0-alpha.0" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
     unifyContraintsAndInteractions(context);
   }
+  const modelStore = initializeStores$1(app.id);
+  const selectionStore = initializeStores(app.id);
   const root = client.createRoot(element);
   root.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
     ref: appRef,
-    app: app,
     initialContext: context,
-    renderCallback: resolveRender
+    renderCallback: resolveRender,
+    modelStore: modelStore,
+    selectionStore: selectionStore
   }));
   const cells = {};
   const components = [];
@@ -8872,65 +8825,40 @@ function boot(_ref2) {
         }
         appRef.current.setContext(ctx);
       })();
-    },
-    getAppSelections: async () => {
-      await rendered;
-      return appRef.current.getAppSelections();
     }
-  }, appRef, rendered];
+  }, modelStore, selectionStore, appRef, rendered];
 }
 
-const [useRpcResultStore, rpcResultStore] = createKeyStore({});
-const [useRpcRequestStore, rpcRequestStore] = createKeyStore({});
-const [useRpcRequestSessionModelStore, rpcRequestSessionModelStore] = createKeyStore({});
-const [useRpcRequestModelStore, rpcRequestModelStore] = createKeyStore({});
-const [useModelChangedStore, modelChangedStore] = createKeyStore({});
-const [, modelInitializedStore] = createKeyStore({});
-const modelStoreMiddleware = _ref => {
-  let {
-    type,
-    value: model
-  } = _ref;
-  const initialized = modelInitializedStore.get(model.id);
-  modelInitializedStore.set(model.id, {});
-  const onChanged = () => {
-    rpcRequestStore.clear(model.id);
-    modelChangedStore.set(model.id, {});
-    modelChangedStore.dispatch(true); // Force new state to trigger hooks
-  };
-
-  const unsubscribe = () => {
-    model.removeListener('changed', onChanged);
-    rpcResultStore.clear(model.id);
-    rpcRequestStore.clear(model.id);
-    rpcRequestSessionModelStore.clear(model.id);
-    rpcRequestModelStore.clear(model.id);
-    modelChangedStore.clear(model.id);
-    modelInitializedStore.clear(model.id);
-  };
-  switch (type) {
-    case 'SET':
-      if (!initialized) {
-        model.on('changed', onChanged);
-        model.once('closed', () => {
-          unsubscribe();
-        });
-      }
-      break;
-  }
-  return unsubscribe;
-};
-const [useModelStore, modelStore] = createKeyStore({}, modelStoreMiddleware);
-const subscribe = model => {
-  const unsubscribe = modelStoreMiddleware({
-    type: 'SET',
-    value: model
-  });
-  return () => {
-    unsubscribe();
-    modelStore.clear(model.id);
-  };
-};
+function useModelStore() {
+  const {
+    useModelStore: useFunc
+  } = useContext(InstanceContext).modelStore;
+  return useFunc();
+}
+function useModelChangedStore() {
+  const {
+    useModelChangedStore: useFunc
+  } = useContext(InstanceContext).modelStore;
+  return useFunc();
+}
+function useRpcResultStore() {
+  const {
+    useRpcResultStore: useFunc
+  } = useContext(InstanceContext).modelStore;
+  return useFunc();
+}
+function useRpcRequestStore() {
+  const {
+    useRpcRequestStore: useFunc
+  } = useContext(InstanceContext).modelStore;
+  return useFunc();
+}
+function useRpcRequestSessionModelStore() {
+  const {
+    useRpcRequestSessionModelStore: useFunc
+  } = useContext(InstanceContext).modelStore;
+  return useFunc();
+}
 
 function useSessionModel(definition, app) {
   const key = app ? "".concat(app.id, "/").concat(JSON.stringify(definition)) : null;
@@ -10058,7 +9986,6 @@ const getMaxFreqWidth = _ref2 => {
   if (frequencyMode === 'P') {
     return sizes.freqMinWidth; // because it will never grow beyond "100.0%"
   }
-
   return sizes.freqMaxWidth;
 };
 const getSelectedStyle = _ref3 => {
@@ -11065,7 +10992,6 @@ function getRowsKeyboardNavigation(_ref) {
         } else {
           return; // propagate to other Esc handler
         }
-
         break;
       case KEYS.HOME:
         focusListItems.setFirst(true);
@@ -11099,7 +11025,6 @@ function getRowsKeyboardNavigation(_ref) {
         return;
       // don't stop propagation since we want to outsource keydown to other handlers.
     }
-
     if (elementToFocus) {
       elementToFocus.focus();
     }
@@ -11265,7 +11190,6 @@ function RowColumn(_ref) {
   if (!cell) {
     return null; // prevent rendering empty rows
   }
-
   const isGridCol = dataLayout === 'grid' && layoutOrder === 'column';
   const label = (_cell$qText = cell === null || cell === void 0 ? void 0 : cell.qText) !== null && _cell$qText !== void 0 ? _cell$qText : '';
   // Search highlights. Split up labelText span into several and add the highlighted class to matching sub-strings.
@@ -14158,7 +14082,6 @@ function ListBox(_ref) {
     if (s.scrollPosition === 'overflowEnd') {
       return; // Do keyScroll.reset() in fetchData() to avoid scrolling to top.
     }
-
     keyScroll.reset();
   }, [keyScroll.state.up, keyScroll.state.down, keyScroll.state.scrollPosition]);
   const {
@@ -15137,6 +15060,128 @@ function ListBoxSearch(_ref2) {
   });
 }
 
+/* eslint no-underscore-dangle: 0 */
+function createAppSelections(_ref) {
+  let {
+    app,
+    selectionStore
+  } = _ref;
+  const key = "".concat(app.id);
+  const {
+    modalObjectStore,
+    appModalStore
+  } = selectionStore;
+  const end = async function () {
+    let accept = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    const {
+      model,
+      objectSelections
+    } = modalObjectStore.get(key) || {};
+    if (model) {
+      await model.endSelections(accept);
+      modalObjectStore.clear(key);
+      objectSelections.emit('deactivated');
+    }
+  };
+  const begin = async _ref2 => {
+    var _modalObjectStore$get;
+    let {
+      model,
+      paths,
+      accept = true,
+      objectSelections
+    } = _ref2;
+    // Quick return if it's already in modal
+    if (objectSelections === ((_modalObjectStore$get = modalObjectStore.get(key)) === null || _modalObjectStore$get === void 0 ? void 0 : _modalObjectStore$get.objectSelections)) {
+      return;
+    }
+
+    // If other model is in modal state end it
+    end(accept);
+
+    // Pending modal
+    modalObjectStore.set(key, {
+      model,
+      objectSelections
+    });
+    const p = Array.isArray(paths) ? paths : [paths];
+    const beginSelections = async skipRetry => {
+      try {
+        await model.beginSelections(p);
+        modalObjectStore.set(key, {
+          model,
+          objectSelections
+        }); // 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(objectSelections) {
+      var _modalObjectStore$get2;
+      // TODO check model state
+      return objectSelections ? ((_modalObjectStore$get2 = modalObjectStore.get(key)) === null || _modalObjectStore$get2 === void 0 ? void 0 : _modalObjectStore$get2.objectSelections) === objectSelections : !!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 {
+    selectionStore
+  } = useContext(InstanceContext);
+  const [appSelectionsStore] = selectionStore.useAppSelectionsStore();
+  const key = app ? app.id : null;
+  let appSelections = appSelectionsStore.get(key);
+  useEffect$1(() => {
+    if (!app || appSelections) return;
+    appSelections = createAppSelections({
+      app,
+      selectionStore
+    });
+    appSelectionsStore.set(key, appSelections);
+    appSelectionsStore.dispatch(true);
+  }, [app]);
+  return [appSelections];
+}
+
 function eventmixin (obj) {
   /* eslint no-param-reassign: 0 */
   Object.keys(EventEmitter$1.prototype).forEach(key => {
@@ -15380,7 +15425,9 @@ function useObjectSelections(app, model, elements, options) {
   const elementsArr = Array.isArray(elements) ? elements : [elements];
   const [appSelections] = useAppSelections(app);
   const [layout] = useLayout$1(model);
-  const [appModalStore] = useAppModalStore();
+  const {
+    appModalStore
+  } = useContext(InstanceContext).selectionStore;
   const appModal = appModalStore.get(app.id);
   const [objectSelections, setObjectSelections] = useState$1();
   useEffect$1(() => {
@@ -16727,7 +16774,6 @@ class Color {
       this._lumi = 0.299 * this._r + 0.587 * this._g + 0.114 * this._b; // option 2
       // this._lumi = Math.sqrt( 0.241 * this._r * this._r + 0.691 * this._g * this._g + 0.068 * this._b * this._b ); // option 3
     }
-
     return this._lumi;
   }
 
@@ -17780,7 +17826,6 @@ function OneField(_ref) {
   segments.forEach((s, i) => {
     s.offset = i ? segments[i - 1].offset + segments[i - 1].ratio : 0; // eslint-disable-line
   });
-
   let Header = null;
   let Icon = null;
   let SegmentsIndicator = null;
@@ -18233,7 +18278,9 @@ function SelectedFields(_ref) {
     items: [],
     more: []
   });
-  const [modalObjectStore] = useModalObjectStore();
+  const {
+    modalObjectStore
+  } = useContext(InstanceContext).selectionStore;
   const [containerRef, containerRect] = useRect$1();
   const [maxItems, setMaxItems] = useState$1(0);
   const isInListboxPopover = () => {
@@ -19011,7 +19058,6 @@ function getListboxContainerKeyboardNavigation(_ref) {
         if (!event.target.classList.contains('listbox-container')) {
           break; // don't mess with keydown handlers within the listbox (e.g. row seletion)
         }
-
         keyboard.focus();
         prevent();
         break;
@@ -19196,7 +19242,6 @@ function getContainerPadding(_ref) {
   } else {
     containerPadding = undefined; // to prevent overriding any default padding
   }
-
   return containerPadding;
 }
 
@@ -19268,7 +19313,6 @@ const Title = styled$1(Typography)(_ref3 => {
     paddingRight: '1px' // make place for italic font style
   });
 });
-
 const isModal = _ref4 => {
   var _app$isInModalSelecti, _app$isInModalSelecti2;
   let {
@@ -20143,7 +20187,6 @@ function ListBoxWrapper(_ref) {
       frequencyMode: getFrequencyModeLetter(options.frequencyMode) // stick to letter option hereafter
     });
   }
-
   const [changeCount, setChangeCount] = useState$1(0);
   useEffect$1(() => {
     if (changeCount) {
@@ -20545,7 +20588,6 @@ async function populateData(_ref, halo) {
     {
       console.warn('Attempting to add fields to an object without a specified data target'); // eslint-disable-line no-console
     }
-
     return;
   }
   const {
@@ -20644,7 +20686,6 @@ const getValue = (data, reference, defaultValue) => {
     if (step === '') {
       continue; // eslint-disable-line no-continue
     }
-
     if (dataContainer[step] === undefined || dataContainer[step] === null) {
       return defaultValue;
     }
@@ -20814,7 +20855,6 @@ function copyPropertyOrSetDefault(propertyName, source, target, defaultValue) {
 function getOthersLabel() {
   return 'Others'; // TODO: translator.get('properties.dimensionLimits.others')
 }
-
 function createDefaultDimension(dimensionDef, dimensionProperties) {
   const def = extend$2(true, {}, dimensionProperties, dimensionDef);
   if (!utils.getValue(def, 'qOtherTotalSpec.qOtherCounted')) {
@@ -21340,7 +21380,6 @@ const getDefaultExportPropertiesFn = path => {
   }
   return undefined; // TODO: add listbox and other
 };
-
 const getExportPropertiesFnc = qae => {
   if (qae.exportProperties) {
     return qae.exportProperties;
@@ -21355,7 +21394,6 @@ const getDefaultImportPropertiesFnc = path => {
   }
   return undefined; // TODO: add listbox and other
 };
-
 const getImportPropertiesFnc = qae => {
   if (qae.importProperties) {
     return qae.importProperties;
@@ -21369,7 +21407,8 @@ const convertTo = async _ref2 => {
     model,
     cellRef,
     newType,
-    properties
+    properties,
+    viewDataMode = false
   } = _ref2;
   const propertyTree = properties ? {
     qProperty: properties
@@ -21390,7 +21429,8 @@ const convertTo = async _ref2 => {
   }
   const exportFormat = exportProperties({
     propertyTree,
-    hypercubePath: helpers.getHypercubePath(sourceQae)
+    hypercubePath: helpers.getHypercubePath(sourceQae),
+    viewDataMode
   });
   const initial = utils.getValue(targetQae, 'properties.initial', {});
   const initialProperties = _objectSpread2({
@@ -21403,7 +21443,8 @@ const convertTo = async _ref2 => {
     exportFormat,
     initialProperties,
     dataDefinition: utils.getValue(targetQae, 'data.targets.0.', {}),
-    hypercubePath: helpers.getHypercubePath(targetQae)
+    hypercubePath: helpers.getHypercubePath(targetQae),
+    viewDataMode
   });
   return newPropertyTree;
 };
@@ -22422,7 +22463,7 @@ const loadType = async _ref5 => {
 const Cell = forwardRef((_ref6, ref) => {
   let {
     halo,
-    model,
+    model: inputModel,
     initialSnOptions,
     initialSnPlugins,
     initialError,
@@ -22447,6 +22488,7 @@ const Cell = forwardRef((_ref6, ref) => {
   const theme = useTheme$1();
   const [cellRef, cellRect, cellNode] = useRect$1();
   const [state, dispatch] = useReducer(contentReducer, initialState(initialError));
+  const [model, setModel] = useState$1(inputModel);
   const [layout, {
     validating,
     canCancel,
@@ -22600,6 +22642,7 @@ const Cell = forwardRef((_ref6, ref) => {
     },
     setSnOptions,
     setSnPlugins,
+    setModel,
     getImperativeHandle() {
       var _state$sn;
       if ((_state$sn = state.sn) !== null && _state$sn !== void 0 && _state$sn.component && typeof state.sn.component.getImperativeHandle === 'function') {
@@ -23388,7 +23431,6 @@ function flushMacro(hooks) {
   hooks.macro = null;
   maybeEndChain(hooks); // eslint-disable-line no-use-before-define
 }
-
 function maybeEndChain(hooks) {
   if (hooks.pendingPromises.length || hooks.micro || hooks.macro) {
     return;
@@ -24925,7 +24967,6 @@ const resolveValue = (data, reference, defaultValue) => {
     if (steps[i] === '') {
       continue; // eslint-disable-line no-continue
     }
-
     if (typeof dataContainer[steps[i]] === 'undefined') {
       return defaultValue;
     }
@@ -25085,6 +25126,7 @@ function viz() {
   let mountedReference = null;
   let onMount = null;
   let onRender = null;
+  let viewDataObjectId;
   const mounted = new Promise(resolve => {
     onMount = resolve;
   });
@@ -25222,6 +25264,49 @@ function viz() {
       });
       return propertyTree;
     },
+    /**
+     * Toggles the chart to a data view of the chart.
+     *
+     * The chart will be toggled to the type defined in the nebula context (dataViewType).
+     *
+     * The default dataViewType for nebula is sn-table. The specified chart type needs to be registered as well, in order to make it possible to render the data view.
+     *
+     * @experimental
+     * @since 4.9.0
+     * @param {boolean=} showDataView - If included, forces the chart into a specific state. True will show data view, and false will show the original chart. If not included it will always toggle between the two views.
+     */
+    async toggleDataView(showDataView) {
+      let newModel;
+      if (!viewDataObjectId && showDataView !== false) {
+        let newType = halo.config.context.dataViewType;
+        const oldProperties = await model.getEffectiveProperties();
+        // Check if dataViewType is registered. Otherwise potentially fallback to table
+        if (!halo.types.getSupportedVersion(newType)) {
+          if (halo.types.getSupportedVersion('table')) {
+            newType = 'table';
+          } else {
+            throw new Error('No data view type registered');
+          }
+        }
+        const propertyTree = await convertTo({
+          halo,
+          model,
+          cellRef,
+          newType,
+          properties: oldProperties,
+          viewDataMode: true
+        });
+        newModel = await halo.app.createSessionObject(propertyTree.qProperty);
+        viewDataObjectId = newModel.id;
+      } else if (viewDataObjectId && showDataView !== true) {
+        newModel = model;
+        await halo.app.destroySessionObject(viewDataObjectId);
+        viewDataObjectId = undefined;
+      }
+      if (newModel) {
+        cellRef.current.setModel(newModel);
+      }
+    },
     /**
      * Listens to custom events from inside the visualization. See useEmitter
      * @experimental
@@ -25356,9 +25441,7 @@ function viz() {
     // setOptions() {}, // applied soft patch
     // resize() {},
     // show() {},
-    // toggleDataView() {},
   };
-
   return api;
 }
 
@@ -25420,7 +25503,7 @@ async function init(model, optional, halo, initialError) {
  * };
  * nebbie.render(createConfig);
  */
-async function createSessionObject(_ref, halo) {
+async function createSessionObject(_ref, halo, store) {
   let {
     type,
     version,
@@ -25433,6 +25516,10 @@ async function createSessionObject(_ref, halo) {
   } = _ref;
   let mergedProps = {};
   const children = [];
+  const {
+    modelStore,
+    subscribe
+  } = store;
   let error;
   try {
     const t = halo.types.get({
@@ -25464,7 +25551,6 @@ async function createSessionObject(_ref, halo) {
     };
     // console.error(e); // eslint-disable-line
   }
-
   const model = await halo.app.createSessionObject(mergedProps);
   if (children.length > 0) {
     await model.setFullPropertyTree({
@@ -25498,7 +25584,7 @@ async function createSessionObject(_ref, halo) {
  * @property {EngineAPI.IGenericObjectProperties=} properties
  */
 
-async function createObject(_ref, halo, generateOnly) {
+async function createObject(_ref, halo, generateOnly, store) {
   let {
     type,
     version,
@@ -25508,6 +25594,9 @@ async function createObject(_ref, halo, generateOnly) {
   } = _ref;
   let mergedProps = {};
   const children = [];
+  const {
+    modelStore
+  } = store;
   // let error;
   try {
     const t = halo.types.get({
@@ -25543,7 +25632,6 @@ async function createObject(_ref, halo, generateOnly) {
     }
     // console.error(e); // eslint-disable-line
   }
-
   if (!generateOnly) {
     const model = await halo.app.createObject(mergedProps);
     if (children.length > 0) {
@@ -25558,13 +25646,17 @@ async function createObject(_ref, halo, generateOnly) {
   return mergedProps;
 }
 
-async function getObject$1(_ref, halo) {
+async function getObject$1(_ref, halo, store) {
   let {
     id,
     options,
     plugins,
     element
   } = _ref;
+  const {
+    modelStore,
+    rpcRequestModelStore
+  } = store;
   const key = "".concat(id);
   let rpc = rpcRequestModelStore.get(key);
   if (!rpc) {
@@ -25641,7 +25733,8 @@ function Sheet(_ref) {
   } = halo;
   const [layout] = useLayout$1(model);
   const {
-    theme: themeName
+    theme: themeName,
+    modelStore
   } = useContext(InstanceContext);
   const [cells, setCells] = useState$1([]);
   const [bgColor, setBgColor] = useState$1(undefined);
@@ -25686,7 +25779,7 @@ function Sheet(_ref) {
           }
           const vs = await getObject$1({
             id: c.name
-          }, halo);
+          }, halo, modelStore);
           return {
             model: vs.model,
             id: c.name,
@@ -25920,13 +26013,17 @@ async function initSheet(model, optional, halo, initialError) {
   return api;
 }
 
-async function getObject(_ref, halo) {
+async function getObject(_ref, halo, store) {
   let {
     id,
     options,
     plugins,
     element
   } = _ref;
+  const {
+    modelStore,
+    rpcRequestModelStore
+  } = store;
   const key = "".concat(id);
   let rpc = rpcRequestModelStore.get(key);
   if (!rpc) {
@@ -25955,15 +26052,14 @@ function flagsFn () {
    * @interface Flags
    */
 
-  return (/** @lends Flags */{
-      /**
-       * Checks whether the specified flag is enabled.
-       * @param {string} flag - The value flag to check.
-       * @returns {boolean} True if the specified flag is enabled, false otherwise.
-       */
-      isEnabled: f => flags[f] === true
-    }
-  );
+  return /** @lends Flags */{
+    /**
+     * Checks whether the specified flag is enabled.
+     * @param {string} flag - The value flag to check.
+     * @returns {boolean} True if the specified flag is enabled, false otherwise.
+     */
+    isEnabled: f => flags[f] === true
+  };
 }
 
 var iterator;
@@ -26526,7 +26622,6 @@ class LRUCache {
     this[LRU_LIST] = new Yallist(); // list of items in order of use recency
     this[LENGTH] = 0; // length of items in the list
   }
-
   dump() {
     return this[LRU_LIST].map(hit => isStale(this, hit) ? false : {
       k: hit.key,
@@ -27885,7 +27980,6 @@ async function load(name, version, _ref, loader) {
       {
         console.warn(e); // eslint-disable-line no-console
       }
-
       throw new Error("Failed to load visualization: '".concat(sKey, "'"));
     });
   }
@@ -28018,7 +28112,6 @@ function create(_ref) {
         {
           console.warn("Visualization ".concat(name, " is not registered. Adding it now.")); // eslint-disable-line no-console
         }
-
         this.register({
           name,
           version
@@ -28029,7 +28122,6 @@ function create(_ref) {
         {
           console.warn("Version ".concat(version, " of ").concat(name, " is not registered. Falling back to version ").concat(versionToUse)); // eslint-disable-line no-console
         }
-
         version = versionToUse;
       }
       return tc[name].get(version) || p.get(typeInfo);
@@ -28168,7 +28260,13 @@ const DEFAULT_CONTEXT = /** @lends Context */{
   /** @type {boolean=} */
   keyboardNavigation: false,
   /** @type {boolean=} */
-  disableCellPadding: false
+  disableCellPadding: false,
+  /**
+   * Type used for toggling to the data view (toggleDataView)
+   * This type need to be registered as well
+   * @type {string=}
+   * */
+  dataViewType: 'sn-table'
 };
 DEFAULT_CONFIG.context = DEFAULT_CONTEXT;
 
@@ -28233,7 +28331,7 @@ function nuked() {
     let currentContext = _objectSpread2(_objectSpread2({}, configuration.context), {}, {
       translator: locale.translator
     });
-    const [root] = boot({
+    const [root, modelStore] = boot({
       app,
       context: currentContext
     });
@@ -28259,7 +28357,6 @@ function nuked() {
       translator: locale.translator,
       nebbie: null // actual value is set further down
     };
-
     const halo = {
       app,
       root,
@@ -28327,9 +28424,9 @@ function nuked() {
       render: async cfg => {
         await currentThemePromise;
         if (cfg.id) {
-          return getObject(cfg, halo);
+          return getObject(cfg, halo, modelStore);
         }
-        return createSessionObject(cfg, halo);
+        return createSessionObject(cfg, halo, modelStore);
       },
       /**
        * Creates a visualization model
@@ -28345,7 +28442,7 @@ function nuked() {
        *   }
        * );
        */
-      create: async cfg => createObject(cfg, halo, false),
+      create: async cfg => createObject(cfg, halo, false, modelStore),
       /**
        * Generates properties for a visualization object
        * @param {CreateConfig} cfg The create configuration.
@@ -28408,7 +28505,6 @@ function nuked() {
        */
       selections: async () => {
         if (!selectionsApi) {
-          // const appSelections = await root.getAppSelections(); // Don't expose this for now
           selectionsApi = /** @lends AppSelections# */{
             /**
              * Mounts the app selection UI into the provided HTMLElement.
@@ -28421,7 +28517,6 @@ function nuked() {
                 {
                   console.error('Already mounted'); // eslint-disable-line no-console
                 }
-
                 return;
               }
               selectionsComponentReference = mount({