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

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @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.
 */
@@ -3241,15 +3241,14 @@
 	    },
 	    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
@@ -3575,7 +3574,6 @@
 	    }
 	  });
 	}
-
 	styleResolver.resolveRawTheme = raw => {
 	  // TODO - validate format
 	  const c = extend$2(true, {}, raw);
@@ -6952,7 +6950,7 @@
 	}
 
 	/**
-	 * @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
@@ -7463,51 +7461,25 @@
 	  }
 	  return `${value}px solid`;
 	}
-	const border = style$2({
-	  prop: 'border',
-	  themeKey: 'borders',
-	  transform: borderTransform
-	});
-	const borderTop = style$2({
-	  prop: 'borderTop',
-	  themeKey: 'borders',
-	  transform: borderTransform
-	});
-	const borderRight = style$2({
-	  prop: 'borderRight',
-	  themeKey: 'borders',
-	  transform: borderTransform
-	});
-	const borderBottom = style$2({
-	  prop: 'borderBottom',
-	  themeKey: 'borders',
-	  transform: borderTransform
-	});
-	const borderLeft = style$2({
-	  prop: 'borderLeft',
-	  themeKey: 'borders',
-	  transform: borderTransform
-	});
-	const borderColor = style$2({
-	  prop: 'borderColor',
-	  themeKey: 'palette'
-	});
-	const borderTopColor = style$2({
-	  prop: 'borderTopColor',
-	  themeKey: 'palette'
-	});
-	const borderRightColor = style$2({
-	  prop: 'borderRightColor',
-	  themeKey: 'palette'
-	});
-	const borderBottomColor = style$2({
-	  prop: 'borderBottomColor',
-	  themeKey: 'palette'
-	});
-	const borderLeftColor = style$2({
-	  prop: 'borderLeftColor',
-	  themeKey: 'palette'
-	});
+	function createBorderStyle(prop, transform) {
+	  return style$2({
+	    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
@@ -7523,7 +7495,7 @@
 	};
 	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
@@ -7721,6 +7693,13 @@
 	  borderLeftColor: {
 	    themeKey: 'palette'
 	  },
+	  outline: {
+	    themeKey: 'borders',
+	    transform: borderTransform
+	  },
+	  outlineColor: {
+	    themeKey: 'palette'
+	  },
 	  borderRadius: {
 	    themeKey: 'shape.borderRadius',
 	    style: borderRadius$1
@@ -11820,7 +11799,7 @@
 	  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', ''));
 	});
@@ -11831,9 +11810,49 @@
 	  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] : () => {};
@@ -11876,169 +11895,97 @@
 	  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);
-	  reactExports.useEffect(() => {
-	    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 = reactExports.forwardRef((_ref, ref) => {
 	  let {
 	    initialContext,
-	    app,
-	    renderCallback
+	    renderCallback,
+	    modelStore,
+	    selectionStore
 	  } = _ref;
-	  const [appSelections] = useAppSelections(app);
 	  const [context, setContext] = reactExports.useState(initialContext);
 	  const [muiThemeName, setMuiThemeName] = reactExports.useState();
 	  const {
@@ -12058,9 +12005,12 @@
 	      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.createElement(StyledEngineProvider, {
 	    injectFirst: true
 	  }, /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -12081,18 +12031,21 @@
 	  const appRef = React.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.createElement(NebulaApp, {
 	    ref: appRef,
-	    app: app,
 	    initialContext: context,
-	    renderCallback: resolveRender
+	    renderCallback: resolveRender,
+	    modelStore: modelStore,
+	    selectionStore: selectionStore
 	  }));
 	  const cells = {};
 	  const components = [];
@@ -12141,12 +12094,8 @@
 	        }
 	        appRef.current.setContext(ctx);
 	      })();
-	    },
-	    getAppSelections: async () => {
-	      await rendered;
-	      return appRef.current.getAppSelections();
 	    }
-	  }, appRef, rendered];
+	  }, modelStore, selectionStore, appRef, rendered];
 	}
 
 	function getSvgIconUtilityClass(slot) {
@@ -16888,11 +16837,14 @@
 	});
 	var Badge$1 = Badge;
 
+	const boxClasses = generateUtilityClasses('MuiBox', ['root']);
+	var boxClasses$1 = boxClasses;
+
 	const defaultTheme = createTheme();
 	const Box = createBox({
 	  themeId: THEME_ID,
 	  defaultTheme,
-	  defaultClassName: 'MuiBox-root',
+	  defaultClassName: boxClasses$1.root,
 	  generateClassName: ClassNameGenerator$1.generate
 	});
 	var Box$1 = Box;
@@ -18672,10 +18624,10 @@
 	        color: "text.secondary",
 	        children: children
 	      }) : /*#__PURE__*/jsxRuntimeExports.jsxs(reactExports.Fragment, {
-	        children: [position === 'start' ? /* notranslate needed while Google Translate will not fix zero-width space issue */_span$1 || (_span$1 = /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+	        children: [position === 'start' ? ( /* notranslate needed while Google Translate will not fix zero-width space issue */_span$1 || (_span$1 = /*#__PURE__*/jsxRuntimeExports.jsx("span", {
 	          className: "notranslate",
 	          children: "\u200B"
-	        })) : null, children]
+	        }))) : null, children]
 	      })
 	    }))
 	  });
@@ -20849,57 +20801,36 @@
 	});
 	var Tooltip$1 = Tooltip;
 
-	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
+	  } = reactExports.useContext(InstanceContext).modelStore;
+	  return useFunc();
+	}
+	function useModelChangedStore() {
+	  const {
+	    useModelChangedStore: useFunc
+	  } = reactExports.useContext(InstanceContext).modelStore;
+	  return useFunc();
+	}
+	function useRpcResultStore() {
+	  const {
+	    useRpcResultStore: useFunc
+	  } = reactExports.useContext(InstanceContext).modelStore;
+	  return useFunc();
+	}
+	function useRpcRequestStore() {
+	  const {
+	    useRpcRequestStore: useFunc
+	  } = reactExports.useContext(InstanceContext).modelStore;
+	  return useFunc();
+	}
+	function useRpcRequestSessionModelStore() {
+	  const {
+	    useRpcRequestSessionModelStore: useFunc
+	  } = reactExports.useContext(InstanceContext).modelStore;
+	  return useFunc();
+	}
 
 	function useSessionModel(definition, app) {
 	  const key = app ? "".concat(app.id, "/").concat(JSON.stringify(definition)) : null;
@@ -22027,7 +21958,6 @@
 	  if (frequencyMode === 'P') {
 	    return sizes.freqMinWidth; // because it will never grow beyond "100.0%"
 	  }
-
 	  return sizes.freqMaxWidth;
 	};
 	const getSelectedStyle = _ref3 => {
@@ -23034,7 +22964,6 @@
 	        } else {
 	          return; // propagate to other Esc handler
 	        }
-
 	        break;
 	      case KEYS.HOME:
 	        focusListItems.setFirst(true);
@@ -23068,7 +22997,6 @@
 	        return;
 	      // don't stop propagation since we want to outsource keydown to other handlers.
 	    }
-
 	    if (elementToFocus) {
 	      elementToFocus.focus();
 	    }
@@ -23234,7 +23162,6 @@
 	  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.
@@ -25977,7 +25904,6 @@
 	    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 {
@@ -26956,6 +26882,128 @@
 	  });
 	}
 
+	/* 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
+	  } = reactExports.useContext(InstanceContext);
+	  const [appSelectionsStore] = selectionStore.useAppSelectionsStore();
+	  const key = app ? app.id : null;
+	  let appSelections = appSelectionsStore.get(key);
+	  reactExports.useEffect(() => {
+	    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 => {
@@ -27199,7 +27247,9 @@
 	  const elementsArr = Array.isArray(elements) ? elements : [elements];
 	  const [appSelections] = useAppSelections(app);
 	  const [layout] = useLayout$1(model);
-	  const [appModalStore] = useAppModalStore();
+	  const {
+	    appModalStore
+	  } = reactExports.useContext(InstanceContext).selectionStore;
 	  const appModal = appModalStore.get(app.id);
 	  const [objectSelections, setObjectSelections] = reactExports.useState();
 	  reactExports.useEffect(() => {
@@ -28546,7 +28596,6 @@
 	      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;
 	  }
 
@@ -29599,7 +29648,6 @@
 	  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;
@@ -30052,7 +30100,9 @@
 	    items: [],
 	    more: []
 	  });
-	  const [modalObjectStore] = useModalObjectStore();
+	  const {
+	    modalObjectStore
+	  } = reactExports.useContext(InstanceContext).selectionStore;
 	  const [containerRef, containerRect] = useRect$1();
 	  const [maxItems, setMaxItems] = reactExports.useState(0);
 	  const isInListboxPopover = () => {
@@ -30830,7 +30880,6 @@
 	        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;
@@ -31015,7 +31064,6 @@
 	  } else {
 	    containerPadding = undefined; // to prevent overriding any default padding
 	  }
-
 	  return containerPadding;
 	}
 
@@ -31087,7 +31135,6 @@
 	    paddingRight: '1px' // make place for italic font style
 	  });
 	});
-
 	const isModal = _ref4 => {
 	  var _app$isInModalSelecti, _app$isInModalSelecti2;
 	  let {
@@ -31962,7 +32009,6 @@
 	      frequencyMode: getFrequencyModeLetter(options.frequencyMode) // stick to letter option hereafter
 	    });
 	  }
-
 	  const [changeCount, setChangeCount] = reactExports.useState(0);
 	  reactExports.useEffect(() => {
 	    if (changeCount) {
@@ -32364,7 +32410,6 @@
 	    {
 	      console.warn('Attempting to add fields to an object without a specified data target'); // eslint-disable-line no-console
 	    }
-
 	    return;
 	  }
 	  const {
@@ -32463,7 +32508,6 @@
 	    if (step === '') {
 	      continue; // eslint-disable-line no-continue
 	    }
-
 	    if (dataContainer[step] === undefined || dataContainer[step] === null) {
 	      return defaultValue;
 	    }
@@ -32633,7 +32677,6 @@
 	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')) {
@@ -33159,7 +33202,6 @@
 	  }
 	  return undefined; // TODO: add listbox and other
 	};
-
 	const getExportPropertiesFnc = qae => {
 	  if (qae.exportProperties) {
 	    return qae.exportProperties;
@@ -33174,7 +33216,6 @@
 	  }
 	  return undefined; // TODO: add listbox and other
 	};
-
 	const getImportPropertiesFnc = qae => {
 	  if (qae.importProperties) {
 	    return qae.importProperties;
@@ -33188,7 +33229,8 @@
 	    model,
 	    cellRef,
 	    newType,
-	    properties
+	    properties,
+	    viewDataMode = false
 	  } = _ref2;
 	  const propertyTree = properties ? {
 	    qProperty: properties
@@ -33209,7 +33251,8 @@
 	  }
 	  const exportFormat = exportProperties({
 	    propertyTree,
-	    hypercubePath: helpers.getHypercubePath(sourceQae)
+	    hypercubePath: helpers.getHypercubePath(sourceQae),
+	    viewDataMode
 	  });
 	  const initial = utils.getValue(targetQae, 'properties.initial', {});
 	  const initialProperties = _objectSpread2({
@@ -33222,7 +33265,8 @@
 	    exportFormat,
 	    initialProperties,
 	    dataDefinition: utils.getValue(targetQae, 'data.targets.0.', {}),
-	    hypercubePath: helpers.getHypercubePath(targetQae)
+	    hypercubePath: helpers.getHypercubePath(targetQae),
+	    viewDataMode
 	  });
 	  return newPropertyTree;
 	};
@@ -34241,7 +34285,7 @@
 	const Cell = reactExports.forwardRef((_ref6, ref) => {
 	  let {
 	    halo,
-	    model,
+	    model: inputModel,
 	    initialSnOptions,
 	    initialSnPlugins,
 	    initialError,
@@ -34266,6 +34310,7 @@
 	  const theme = useTheme$1();
 	  const [cellRef, cellRect, cellNode] = useRect$1();
 	  const [state, dispatch] = reactExports.useReducer(contentReducer, initialState(initialError));
+	  const [model, setModel] = reactExports.useState(inputModel);
 	  const [layout, {
 	    validating,
 	    canCancel,
@@ -34419,6 +34464,7 @@
 	    },
 	    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') {
@@ -35207,7 +35253,6 @@
 	  hooks.macro = null;
 	  maybeEndChain(hooks); // eslint-disable-line no-use-before-define
 	}
-
 	function maybeEndChain(hooks) {
 	  if (hooks.pendingPromises.length || hooks.micro || hooks.macro) {
 	    return;
@@ -36744,7 +36789,6 @@
 	    if (steps[i] === '') {
 	      continue; // eslint-disable-line no-continue
 	    }
-
 	    if (typeof dataContainer[steps[i]] === 'undefined') {
 	      return defaultValue;
 	    }
@@ -36904,6 +36948,7 @@
 	  let mountedReference = null;
 	  let onMount = null;
 	  let onRender = null;
+	  let viewDataObjectId;
 	  const mounted = new Promise(resolve => {
 	    onMount = resolve;
 	  });
@@ -37041,6 +37086,49 @@
 	      });
 	      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
@@ -37175,9 +37263,7 @@
 	    // setOptions() {}, // applied soft patch
 	    // resize() {},
 	    // show() {},
-	    // toggleDataView() {},
 	  };
-
 	  return api;
 	}
 
@@ -37239,7 +37325,7 @@
 	 * };
 	 * nebbie.render(createConfig);
 	 */
-	async function createSessionObject(_ref, halo) {
+	async function createSessionObject(_ref, halo, store) {
 	  let {
 	    type,
 	    version,
@@ -37252,6 +37338,10 @@
 	  } = _ref;
 	  let mergedProps = {};
 	  const children = [];
+	  const {
+	    modelStore,
+	    subscribe
+	  } = store;
 	  let error;
 	  try {
 	    const t = halo.types.get({
@@ -37283,7 +37373,6 @@
 	    };
 	    // console.error(e); // eslint-disable-line
 	  }
-
 	  const model = await halo.app.createSessionObject(mergedProps);
 	  if (children.length > 0) {
 	    await model.setFullPropertyTree({
@@ -37317,7 +37406,7 @@
 	 * @property {EngineAPI.IGenericObjectProperties=} properties
 	 */
 
-	async function createObject(_ref, halo, generateOnly) {
+	async function createObject(_ref, halo, generateOnly, store) {
 	  let {
 	    type,
 	    version,
@@ -37327,6 +37416,9 @@
 	  } = _ref;
 	  let mergedProps = {};
 	  const children = [];
+	  const {
+	    modelStore
+	  } = store;
 	  // let error;
 	  try {
 	    const t = halo.types.get({
@@ -37362,7 +37454,6 @@
 	    }
 	    // console.error(e); // eslint-disable-line
 	  }
-
 	  if (!generateOnly) {
 	    const model = await halo.app.createObject(mergedProps);
 	    if (children.length > 0) {
@@ -37377,13 +37468,17 @@
 	  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) {
@@ -37460,7 +37555,8 @@
 	  } = halo;
 	  const [layout] = useLayout$1(model);
 	  const {
-	    theme: themeName
+	    theme: themeName,
+	    modelStore
 	  } = reactExports.useContext(InstanceContext);
 	  const [cells, setCells] = reactExports.useState([]);
 	  const [bgColor, setBgColor] = reactExports.useState(undefined);
@@ -37505,7 +37601,7 @@
 	          }
 	          const vs = await getObject$1({
 	            id: c.name
-	          }, halo);
+	          }, halo, modelStore);
 	          return {
 	            model: vs.model,
 	            id: c.name,
@@ -37739,13 +37835,17 @@
 	  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) {
@@ -37774,15 +37874,14 @@
 	   * @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;
@@ -38345,7 +38444,6 @@
 	    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,
@@ -39704,7 +39802,6 @@
 	      {
 	        console.warn(e); // eslint-disable-line no-console
 	      }
-
 	      throw new Error("Failed to load visualization: '".concat(sKey, "'"));
 	    });
 	  }
@@ -39837,7 +39934,6 @@
 	        {
 	          console.warn("Visualization ".concat(name, " is not registered. Adding it now.")); // eslint-disable-line no-console
 	        }
-
 	        this.register({
 	          name,
 	          version
@@ -39848,7 +39944,6 @@
 	        {
 	          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);
@@ -39987,7 +40082,13 @@
 	  /** @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;
 
@@ -40052,7 +40153,7 @@
 	    let currentContext = _objectSpread2(_objectSpread2({}, configuration.context), {}, {
 	      translator: locale.translator
 	    });
-	    const [root] = boot({
+	    const [root, modelStore] = boot({
 	      app,
 	      context: currentContext
 	    });
@@ -40078,7 +40179,6 @@
 	      translator: locale.translator,
 	      nebbie: null // actual value is set further down
 	    };
-
 	    const halo = {
 	      app,
 	      root,
@@ -40146,9 +40246,9 @@
 	      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
@@ -40164,7 +40264,7 @@
 	       *   }
 	       * );
 	       */
-	      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.
@@ -40227,7 +40327,6 @@
 	       */
 	      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.
@@ -40240,7 +40339,6 @@
 	                {
 	                  console.error('Already mounted'); // eslint-disable-line no-console
 	                }
-
 	                return;
 	              }
 	              selectionsComponentReference = mount({