@nebula.js/stardust 3.1.0-alpha.2 → 3.1.0-alpha.3

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.1.0-alpha.2
+* @nebula.js/stardust v3.1.0-alpha.3
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -8,7 +8,7 @@ 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, createElement, PureComponent, useRef, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { CacheProvider, ThemeContext as ThemeContext$2 } from '@emotion/react';
-import { Checkbox, Radio, Grid, Typography, FormControlLabel, IconButton, Popover, MenuList, MenuItem, ListItemIcon, Divider, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, Box, Icon, CircularProgress, Paper } from '@mui/material';
+import { Checkbox, Radio, Grid, Typography, FormControlLabel, IconButton, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Box, Icon, CircularProgress, Paper } from '@mui/material';
 import emStyled from '@emotion/styled';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -2742,7 +2742,9 @@ function theme$1(resolvedTheme) {
         }
       );
     },
-    uiColor(c) {
+    uiColor(c, shift) {
+      // eslint-disable-next-line no-param-reassign
+      shift = !!shift;
       if (c.index < 0 || typeof c.index === 'undefined') {
         return c.color;
       }
@@ -2752,10 +2754,10 @@ function theme$1(resolvedTheme) {
       if (!uiPalette) {
         return c.color;
       }
-      if (typeof uiPalette.colors[c.index] === 'undefined') {
+      if (typeof uiPalette.colors[c.index - shift] === 'undefined') {
         return c.color;
       }
-      return uiPalette.colors[c.index];
+      return uiPalette.colors[c.index - shift];
     }
   };
 }
@@ -2978,7 +2980,7 @@ function constructPaths(pathSteps, baseSteps) {
   }
   return ret;
 }
-function getObject$1(root, steps) {
+function getObject$2(root, steps) {
   let obj = root;
   for (let i = 0; i < steps.length; i++) {
     if (obj[steps[i]]) {
@@ -2992,7 +2994,7 @@ function getObject$1(root, steps) {
 function searchPathArray(pathArray, attribute, theme) {
   const attributeArray = attribute.split('.');
   for (let i = 0; i < pathArray.length; i++) {
-    const restult = getObject$1(theme, [...pathArray[i], ...attributeArray]);
+    const restult = getObject$2(theme, [...pathArray[i], ...attributeArray]);
     if (restult !== undefined) return restult;
   }
   return undefined;
@@ -3161,10 +3163,12 @@ function theme() {
      * @param {object} c
      * @param {number=} c.index
      * @param {string=} c.color
+     * @param {boolean=} supportNone Shifts the palette index by one to account for the "none" color
      * @returns {string} The resolved color.
      *
      * @example
      * theme.getColorPickerColor({ index: 1 });
+     * theme.getColorPickerColor({ index: 1 }, true);
      * theme.getColorPickerColor({ color: 'red' });
      */
     getColorPickerColor() {
@@ -7226,7 +7230,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "de86" ;
+const NEBULA_VERSION_HASH = "d1ab" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -7235,7 +7239,8 @@ var InstanceContext = React__default.createContext({
   language: null,
   theme: null,
   translator: null,
-  constraints: {}
+  constraints: {},
+  themeApi: null
 });
 
 var createKeyStore = (function () {
@@ -7744,7 +7749,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "3.1.0-alpha.2" );
+  element.setAttribute('data-nebulajs-version', "3.1.0-alpha.3" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
@@ -7763,6 +7768,9 @@ function boot(_ref2) {
     addCell(id, cell) {
       cells[id] = cell;
     },
+    removeCell(id) {
+      delete cells[id];
+    },
     add(component) {
       (async () => {
         await rendered;
@@ -9534,7 +9542,7 @@ const ellipsis = {
 const barPadPx = 4;
 const barBorderWidthPx = 1;
 const barWithCheckboxLeftPadPx = 29;
-const frequencyTextNone = '0';
+const frequencyTextNone = '-';
 const getSelectedStyle = _ref => {
   let {
     theme
@@ -9552,13 +9560,14 @@ const getSelectedStyle = _ref => {
   };
 };
 const Root$1 = styled$1('div')(_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
   } = _ref2;
   return {
     ["& .".concat(classes$a.row)]: {
       flexWrap: 'nowrap',
-      color: theme.palette.text.primary
+      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: "1px solid ".concat(theme.palette.divider)
@@ -9566,7 +9575,7 @@ const Root$1 = styled$1('div')(_ref2 => {
     ["& .".concat(classes$a.column)]: {
       flexWrap: 'nowrap',
       borderRight: "1px solid ".concat(theme.palette.divider),
-      color: theme.palette.text.primary
+      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
     },
     ["& .".concat(classes$a.fieldRoot)]: {
       '&:focus': {
@@ -9587,12 +9596,15 @@ const Root$1 = styled$1('div')(_ref2 => {
       paddingRight: '9px'
     },
     // The leaf node, containing the label text.
-    ["& .".concat(classes$a.labelText)]: _objectSpread2({
+    ["& .".concat(classes$a.labelText)]: _objectSpread2(_objectSpread2({
       flexBasis: 'max-content',
       lineHeight: '16px',
       userSelect: 'none',
       whiteSpace: 'pre'
-    }, ellipsis),
+    }, 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
     },
@@ -9698,7 +9710,7 @@ function RowColumn(_ref3) {
     column = false,
     checkboxes = false,
     dense = false,
-    frequencyMode = 'N',
+    freqIsAllowed,
     isSingleSelect,
     actions,
     frequencyMax = '',
@@ -9891,7 +9903,7 @@ function RowColumn(_ref3) {
     color: 'inherit'
   }) : getFieldWithRanges({
     lbls: labels
-  })), frequencyMode !== 'N' && /*#__PURE__*/React__default.createElement(Grid, {
+  })), freqIsAllowed && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     style: {
       display: 'flex',
@@ -9920,6 +9932,7 @@ const scrollBarThumb = '#BBB';
 const scrollBarThumbHover = '#555';
 const scrollBarBackground = '#f1f1f1';
 const MINIMUM_BATCH_SIZE = 100;
+const FREQUENCY_MIN_SHOW_WIDTH = 80;
 const classes$9 = {
   styledScrollbars: "".concat(PREFIX$9, "-styledScrollbars")
 };
@@ -9970,7 +9983,7 @@ function ListBox(_ref2) {
     height,
     width,
     listLayout = 'vertical',
-    frequencyMode = 'N',
+    frequencyMode,
     histogram = false,
     checkboxes = false,
     update = undefined,
@@ -10110,6 +10123,14 @@ function ListBox(_ref2) {
     const h = Math.max(...ps.map(page => page.qArea.qTop + page.qArea.qHeight));
     return hasFilteredValues ? h : count;
   };
+  const getFrequencyAllowed = () => {
+    const widthPermitsFreq = width > FREQUENCY_MIN_SHOW_WIDTH;
+    const {
+      frequencyEnabled = false
+    } = layout.qListObject;
+    const hasValidFreqOption = !['none', undefined].includes(frequencyMode);
+    return widthPermitsFreq && (hasValidFreqOption || frequencyEnabled);
+  };
   const listCount = pages && pages.length && calculatePagesHeight ? getCalculatedHeight(pages) : count;
   onSetListCount === null || onSetListCount === void 0 ? void 0 : onSetListCount(listCount);
   const dense = (_layout$layoutOptions = (_layout$layoutOptions2 = layout.layoutOptions) === null || _layout$layoutOptions2 === void 0 ? void 0 : _layout$layoutOptions2.dense) !== null && _layout$layoutOptions !== void 0 ? _layout$layoutOptions : false;
@@ -10126,6 +10147,7 @@ function ListBox(_ref2) {
   const {
     frequencyMax
   } = layout;
+  const freqIsAllowed = getFrequencyAllowed();
   return /*#__PURE__*/React__default.createElement(InfiniteLoader, {
     isItemLoaded: isItemLoaded,
     itemCount: listCount || 1 // must be more than 0 or loadMoreItems will never be called again
@@ -10159,6 +10181,7 @@ function ListBox(_ref2) {
         checkboxes,
         dense,
         frequencyMode,
+        freqIsAllowed,
         isSingleSelect,
         actions: {
           select,
@@ -10745,7 +10768,25 @@ const search = props => _objectSpread2(_objectSpread2({}, props), {}, {
 var SearchIcon = (props => SvgIcon(search(props)));
 
 const TREE_PATH = '/qListObjectDef';
-function ListBoxSearch(_ref) {
+const StyledInputAdornment = styled$1(InputAdornment)(_ref => {
+  var _theme$listBox, _theme$listBox$conten;
+  let {
+    theme
+  } = _ref;
+  return {
+    color: (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : (_theme$listBox$conten = _theme$listBox.content) === null || _theme$listBox$conten === void 0 ? void 0 : _theme$listBox$conten.color
+  };
+});
+const StyledOutlinedInput = styled$1(OutlinedInput)(_ref2 => {
+  var _theme$listBox2, _theme$listBox2$conte;
+  let {
+    theme
+  } = _ref2;
+  return {
+    color: (_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
+  };
+});
+function ListBoxSearch(_ref3) {
   let {
     selections,
     model,
@@ -10753,7 +10794,7 @@ function ListBoxSearch(_ref) {
     listCount,
     dense = false,
     visible = true
-  } = _ref;
+  } = _ref3;
   const {
     translator
   } = useContext(InstanceContext);
@@ -10822,8 +10863,8 @@ function ListBoxSearch(_ref) {
   if (!visible) {
     return null;
   }
-  return /*#__PURE__*/React__default.createElement(OutlinedInput, {
-    startAdornment: /*#__PURE__*/React__default.createElement(InputAdornment, {
+  return /*#__PURE__*/React__default.createElement(StyledOutlinedInput, {
+    startAdornment: /*#__PURE__*/React__default.createElement(StyledInputAdornment, {
       position: "start"
     }, /*#__PURE__*/React__default.createElement(SearchIcon, {
       size: dense ? 'small' : 'normal'
@@ -10832,6 +10873,7 @@ function ListBoxSearch(_ref) {
     sx: [{
       border: 'none',
       borderRadius: 0,
+      backgroundColor: 'transparent',
       '& fieldset': {
         border: "1px solid ".concat(theme.palette.divider),
         borderWidth: '1px 0 1px 0',
@@ -12470,28 +12512,65 @@ AutoSizer.defaultProps = {
   style: {}
 };
 
+const addListboxTheme = themeApi => {
+  const getListboxStyle = prop => themeApi.getStyle('object', '', "listBox.".concat(prop));
+  return {
+    backgroundColor: getListboxStyle('backgroundColor'),
+    title: {
+      main: {
+        color: getListboxStyle('title.main.color'),
+        fontSize: getListboxStyle('title.main.fontSize'),
+        fontFamily: getListboxStyle('title.main.fontFamily')
+      }
+    },
+    content: {
+      color: getListboxStyle('content.color'),
+      fontSize: getListboxStyle('content.fontSize'),
+      fontFamily: getListboxStyle('content.fontFamily')
+    }
+  };
+};
+
 const PREFIX$4 = 'ListBoxInline';
 const classes$4 = {
   listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader"),
   screenReaderOnly: "".concat(PREFIX$4, "-screenReaderOnly")
 };
-const StyledGrid$3 = styled$1(Grid)(() => ({
-  ["& .".concat(classes$4.listBoxHeader)]: {
-    alignSelf: 'center',
-    display: 'inline-flex'
-  },
-  ["& .".concat(classes$4.screenReaderOnly)]: {
-    position: 'absolute',
-    height: 0,
-    width: 0,
-    overflow: 'hidden'
-  }
-}));
-function ListBoxInline(_ref) {
+const StyledGrid$3 = styled$1(Grid)(_ref => {
+  var _theme$listBox$backgr, _theme$listBox;
+  let {
+    theme
+  } = _ref;
+  return {
+    backgroundColor: (_theme$listBox$backgr = (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : _theme$listBox.backgroundColor) !== null && _theme$listBox$backgr !== void 0 ? _theme$listBox$backgr : theme.palette.background.default,
+    ["& .".concat(classes$4.listBoxHeader)]: {
+      alignSelf: 'center',
+      display: 'inline-flex'
+    },
+    ["& .".concat(classes$4.screenReaderOnly)]: {
+      position: 'absolute',
+      height: 0,
+      width: 0,
+      overflow: 'hidden'
+    }
+  };
+});
+const Title = styled$1(Typography)(_ref2 => {
+  var _theme$listBox2, _theme$listBox2$title, _theme$listBox2$title2, _theme$listBox3, _theme$listBox3$title, _theme$listBox3$title2, _theme$listBox4, _theme$listBox4$title, _theme$listBox4$title2;
+  let {
+    theme
+  } = _ref2;
+  return {
+    color: (_theme$listBox2 = theme.listBox) === null || _theme$listBox2 === void 0 ? void 0 : (_theme$listBox2$title = _theme$listBox2.title) === null || _theme$listBox2$title === void 0 ? void 0 : (_theme$listBox2$title2 = _theme$listBox2$title.main) === null || _theme$listBox2$title2 === void 0 ? void 0 : _theme$listBox2$title2.color,
+    fontSize: (_theme$listBox3 = theme.listBox) === null || _theme$listBox3 === void 0 ? void 0 : (_theme$listBox3$title = _theme$listBox3.title) === null || _theme$listBox3$title === void 0 ? void 0 : (_theme$listBox3$title2 = _theme$listBox3$title.main) === null || _theme$listBox3$title2 === void 0 ? void 0 : _theme$listBox3$title2.fontSize,
+    fontFamily: (_theme$listBox4 = theme.listBox) === null || _theme$listBox4 === void 0 ? void 0 : (_theme$listBox4$title = _theme$listBox4.title) === null || _theme$listBox4$title === void 0 ? void 0 : (_theme$listBox4$title2 = _theme$listBox4$title.main) === null || _theme$listBox4$title2 === void 0 ? void 0 : _theme$listBox4$title2.fontFamily
+  };
+});
+function ListBoxInline(_ref3) {
   var _layout$layoutOptions, _layout$layoutOptions2;
   let {
     options = {}
-  } = _ref;
+  } = _ref3;
   const {
     direction,
     frequencyMode,
@@ -12534,8 +12613,10 @@ function ListBoxInline(_ref) {
   }, [model]);
   const {
     translator,
-    keyboardNavigation
+    keyboardNavigation,
+    themeApi
   } = useContext(InstanceContext);
+  theme.listBox = addListboxTheme(themeApi);
   const moreAlignTo = useRef();
   const [searchContainer, searchContainerRef] = useRefWithCallback();
   const [layout] = useLayout$1(model);
@@ -12650,7 +12731,7 @@ function ListBoxInline(_ref) {
   })) : getSearchOrUnlock()), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: classes$4.listBoxHeader
-  }, /*#__PURE__*/React__default.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(Title, {
     variant: "h6",
     noWrap: true
   }, layout.title || layout.qListObject.qDimensionInfo.qFallbackTitle)), /*#__PURE__*/React__default.createElement(Grid, {
@@ -12707,11 +12788,11 @@ function ListBoxInline(_ref) {
     ref: moreAlignTo
   }), /*#__PURE__*/React__default.createElement("div", {
     className: classes$4.screenReaderOnly
-  }, translator.get('Listbox.ScreenReaderInstructions')), /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref2 => {
+  }, translator.get('Listbox.ScreenReaderInstructions')), /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref4 => {
     let {
       height,
       width
-    } = _ref2;
+    } = _ref4;
     return /*#__PURE__*/React__default.createElement(ListBox, {
       model: model,
       selections: selections,
@@ -12751,6 +12832,9 @@ function useExistingModel(_ref) {
   if (options.dense) {
     throw new Error('Option "dense" is not applicable for existing objects.');
   }
+  if (options.frequencyMode) {
+    throw new Error('Option "frequencyMode" is not applicable for existing objects.');
+  }
   useEffect$1(() => {
     async function fetchObject() {
       const modelFromStore = modelStore.get(qId);
@@ -14734,7 +14818,7 @@ const resolveBgImage = (bgComp, app) => {
   const bgImageDef = bgComp === null || bgComp === void 0 ? void 0 : bgComp.bgImage;
   if (bgImageDef) {
     let url = '';
-    if (bgImageDef.mode === 'media') {
+    if (bgImageDef.mode === 'media' || bgComp.useImage === 'media') {
       var _bgImageDef$mediaUrl, _bgImageDef$mediaUrl$;
       url = bgImageDef !== null && bgImageDef !== void 0 && (_bgImageDef$mediaUrl = bgImageDef.mediaUrl) !== null && _bgImageDef$mediaUrl !== void 0 && (_bgImageDef$mediaUrl$ = _bgImageDef$mediaUrl.qStaticContentUrl) !== null && _bgImageDef$mediaUrl$ !== void 0 && _bgImageDef$mediaUrl$.qUrl ? decodeURIComponent(bgImageDef.mediaUrl.qStaticContentUrl.qUrl) : undefined;
       url = resolveImageUrl(app, url);
@@ -14758,7 +14842,7 @@ const resolveBgColor = (bgComp, theme) => {
     if (bgColor.useColorExpression) {
       return theme.validateColor(bgColor.colorExpression);
     }
-    return bgColor.color && bgColor.color.color !== 'none' ? theme.getColorPickerColor(bgColor.color) : undefined;
+    return bgColor.color && bgColor.color.color !== 'none' ? theme.getColorPickerColor(bgColor.color, true) : undefined;
   }
   return undefined;
 };
@@ -15050,6 +15134,7 @@ const Cell = forwardRef((_ref6, ref) => {
     disableCellPadding = false
   } = halo.context || {};
   const {
+    theme: themeName,
     translator,
     language,
     keyboardNavigation
@@ -15066,11 +15151,8 @@ const Cell = forwardRef((_ref6, ref) => {
   const [contentRef, contentRect, contentNode] = useRect$1();
   const [snOptions, setSnOptions] = useState$1(initialSnOptions);
   const [snPlugins, setSnPlugins] = useState$1(initialSnPlugins);
-  const [clickOutElement, setClickOutElement] = useState$1();
-  const clickOutElements = [{
-    current: clickOutElement
-  }, '.njs-action-toolbar-popover']; // elements which will not trigger the click out listener
-  const [selections] = useObjectSelections(app, model, clickOutElements);
+  const cellElementId = "njs-cell-".concat(currentId);
+  const [selections] = useObjectSelections(app, model, ["#".concat(cellElementId), '.njs-action-toolbar-popover']); // elements which will not trigger the click out listener
   const [hovering, setHover] = useState$1(false);
   const hoveringDebouncer = useRef({
     enter: null,
@@ -15088,17 +15170,11 @@ const Cell = forwardRef((_ref6, ref) => {
   useEffect$1(() => {
     eventmixin(focusHandler.current);
   }, []);
-  useEffect$1(() => {
-    if (!contentNode) {
-      return;
-    }
-    setClickOutElement(cellNode);
-  }, [cellRect]);
   useEffect$1(() => {
     const bgComp = layout !== null && layout !== void 0 && layout.components ? layout.components.find(comp => comp.key === 'general') : null;
     setBgColor(resolveBgColor(bgComp, halo.public.theme));
     setBgImage(resolveBgImage(bgComp, halo.app));
-  }, [layout, halo.public.theme, halo.app]);
+  }, [layout, halo.public.theme, halo.app, themeName]);
   focusHandler.current.blurCallback = resetFocus => {
     halo.root.toggleFocusOfCells();
     if (resetFocus && contentNode) {
@@ -15289,7 +15365,7 @@ const Cell = forwardRef((_ref6, ref) => {
       width: '100%',
       height: '100%',
       overflow: 'hidden',
-      backgroundColor: bgColor,
+      backgroundColor: bgColor || 'unset',
       backgroundImage: bgImage && bgImage.url ? "url(".concat(bgImage.url, ")") : undefined,
       backgroundRepeat: 'no-repeat',
       backgroundSize: bgImage && bgImage.size,
@@ -15299,6 +15375,7 @@ const Cell = forwardRef((_ref6, ref) => {
     square: true,
     className: CellElement.className,
     ref: cellRef,
+    id: cellElementId,
     onMouseEnter: handleOnMouseEnter,
     onMouseLeave: handleOnMouseLeave
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -15338,7 +15415,7 @@ const Cell = forwardRef((_ref6, ref) => {
   }));
 });
 
-function glue(_ref) {
+function glue$1(_ref) {
   let {
     halo,
     element,
@@ -15444,7 +15521,7 @@ function validatePlugins(plugins) {
   });
 }
 
-const noopi = () => {};
+const noopi$1 = () => {};
 function viz() {
   let {
     model,
@@ -15452,7 +15529,7 @@ function viz() {
     initialError,
     onDestroy = async () => {}
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let unmountCell = noopi;
+  let unmountCell = noopi$1;
   let cellRef = null;
   let mountedReference = null;
   let onMount = null;
@@ -15502,6 +15579,11 @@ function viz() {
      * @type {string}
      */
     id: model.id,
+    /**
+     * This visualizations Enigma model, a representation of the generic object.
+     * @type {string}
+     */
+    model,
     /**
      * Destroys the visualization and removes it from the the DOM.
      * @example
@@ -15514,7 +15596,7 @@ function viz() {
     async destroy() {
       await onDestroy();
       unmountCell();
-      unmountCell = noopi;
+      unmountCell = noopi$1;
     },
     /**
      * Converts the visualization to a different registered type
@@ -15553,7 +15635,7 @@ function viz() {
           throw new Error('Already mounted');
         }
         mountedReference = element;
-        [unmountCell, cellRef] = glue({
+        [unmountCell, cellRef] = glue$1({
           halo,
           element,
           model,
@@ -15693,6 +15775,350 @@ async function createSessionObject(_ref, halo) {
   }, halo, error, onDestroy);
 }
 
+async function getObject$1(_ref, halo) {
+  let {
+    id,
+    options,
+    plugins,
+    element
+  } = _ref;
+  const key = "".concat(id);
+  let rpc = rpcRequestModelStore.get(key);
+  if (!rpc) {
+    rpc = halo.app.getObject(id);
+    rpcRequestModelStore.set(key, rpc);
+  }
+  const model = await rpc;
+  modelStore.set(key, model);
+  return init(model, {
+    options,
+    plugins,
+    element
+  }, halo);
+}
+
+/**
+ * @interface
+ * @extends HTMLElement
+ * @experimental
+ * @since 3.1.0
+ */
+const SheetElement = {
+  /** @type {'njs-sheet'} */
+  className: 'njs-sheet'
+};
+function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initialError, onMount) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = cell.bounds;
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      left: "".concat(x, "%"),
+      top: "".concat(y, "%"),
+      width: "".concat(width, "%"),
+      height: "".concat(height, "%"),
+      position: 'absolute'
+    }
+  }, /*#__PURE__*/React__default.createElement(Cell, {
+    ref: cell.cellRef,
+    halo: halo,
+    model: cell.model,
+    currentId: cell.currentId,
+    initialSnOptions: initialSnOptions,
+    initialSnPlugins: initialSnPlugins,
+    initialError: initialError,
+    onMount: onMount
+  }));
+}
+function Sheet(_ref) {
+  let {
+    model,
+    halo,
+    initialSnOptions,
+    initialSnPlugins,
+    initialError,
+    onMount
+  } = _ref;
+  const {
+    root
+  } = halo;
+  const [layout] = useLayout$1(model);
+  const {
+    theme: themeName
+  } = useContext(InstanceContext);
+  const [cells, setCells] = useState$1([]);
+  const [bgColor, setBgColor] = useState$1(undefined);
+  const [bgImage, setBgImage] = useState$1(undefined);
+  const [deepHash, setDeepHash] = useState$1('');
+
+  /// For each object
+  useEffect$1(() => {
+    if (layout) {
+      const hash = JSON.stringify(layout.cells);
+      if (hash === deepHash) {
+        return;
+      }
+      setDeepHash(hash);
+      const fetchObjects = async () => {
+        /*
+          Need to always fetch and evaluate everything as the sheet need to support multiple instances of the same object?
+          No, there is no way to add the same chart twice, so the optimization should be worth it.
+        */
+
+        // Clear the cell list
+        cells.forEach(c => {
+          root.removeCell(c.currentId);
+        });
+        const lCells = layout.cells;
+        // TODO - should try reuse existing objects on subsequent renders
+        // Non-id updates should only change the "css"
+        const cs = await Promise.all(lCells.map(async c => {
+          let mounted;
+          const mountedPromise = new Promise(resolve => {
+            mounted = resolve;
+          });
+          const cell = cells.find(ce => ce.id === c.name);
+          if (cell) {
+            cell.bounds = c.bounds;
+            delete cell.mountedPromise;
+            return cell;
+          }
+          const vs = await getObject$1({
+            id: c.name
+          }, halo);
+          return {
+            model: vs.model,
+            id: c.name,
+            bounds: c.bounds,
+            cellRef: React__default.createRef(),
+            currentId: uid(),
+            mounted,
+            mountedPromise
+          };
+        }));
+        cs.forEach(c => root.addCell(c.currentId, c.cellRef));
+        setCells(cs);
+      };
+      fetchObjects();
+    }
+  }, [layout]);
+  const cellRenderers = useMemo$1(() => cells ? cells.map(c => getCellRenderer(c, halo, initialSnOptions, initialSnPlugins, initialError, c.mounted)) : [], [cells]);
+  useEffect$1(() => {
+    const bgComp = layout !== null && layout !== void 0 && layout.components ? layout.components.find(comp => comp.key === 'general') : null;
+    setBgColor(resolveBgColor(bgComp, halo.public.theme));
+    setBgImage(resolveBgImage(bgComp, halo.app));
+  }, [layout, halo.public.theme, halo.app, themeName]);
+
+  /* TODO
+    - sheet title + bg + logo etc + as option
+    - sheet exposed classnames for theming
+  */
+
+  const height = !layout || Number.isNaN(layout.height) ? '100%' : "".concat(Number(layout.height), "%");
+  const promises = cells.map(c => c.mountedPromise);
+  const ps = promises.filter(p => !!p);
+  if (ps.length) {
+    Promise.all(promises).then(() => {
+      // TODO - correct? Currently called each time a new cell is mounted?
+      onMount();
+    });
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: SheetElement.className,
+    style: {
+      width: "100%",
+      height,
+      position: 'relative',
+      backgroundColor: bgColor,
+      backgroundImage: bgImage && bgImage.url ? "url(".concat(bgImage.url, ")") : undefined,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: bgImage && bgImage.size,
+      backgroundPosition: bgImage && bgImage.pos
+    }
+  }, cellRenderers);
+}
+
+function glue(_ref) {
+  let {
+    halo,
+    element,
+    model,
+    initialSnOptions,
+    initialSnPlugins,
+    onMount,
+    initialError
+  } = _ref;
+  const {
+    root
+  } = halo;
+  const sheetRef = React__default.createRef();
+  const portal = ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Sheet, {
+    ref: sheetRef,
+    halo: halo,
+    model: model,
+    initialSnOptions: initialSnOptions,
+    initialSnPlugins: initialSnPlugins,
+    initialError: initialError,
+    onMount: onMount
+  }), element, model.id);
+  const unmount = () => {
+    root.remove(portal);
+    model.removeListener('closed', unmount);
+  };
+  model.on('closed', unmount);
+  root.add(portal);
+  return [unmount, sheetRef];
+}
+
+const noopi = () => {};
+function sheet() {
+  let {
+    model,
+    halo,
+    initialError,
+    onDestroy = async () => {}
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let unmountSheet = noopi;
+  let sheetRef = null;
+  let mountedReference = null;
+  let onMount = null;
+  const mounted = new Promise(resolve => {
+    onMount = resolve;
+  });
+  let initialSnOptions = {};
+  let initialSnPlugins = [];
+  const setSnOptions = async opts => {
+    if (mountedReference) {
+      (async () => {
+        await mounted;
+        sheetRef.current.setSnOptions(_objectSpread2(_objectSpread2({}, initialSnOptions), opts));
+      })();
+    } else {
+      // Handle setting options before mount
+      initialSnOptions = _objectSpread2(_objectSpread2({}, initialSnOptions), opts);
+    }
+  };
+  const setSnPlugins = async plugins => {
+    validatePlugins(plugins);
+    if (mountedReference) {
+      (async () => {
+        await mounted;
+        sheetRef.current.setSnPlugins(plugins);
+      })();
+    } else {
+      // Handle setting plugins before mount
+      initialSnPlugins = plugins;
+    }
+  };
+
+  /**
+   * @class
+   * @alias Sheet
+   * @classdesc A controller to further modify a visualization after it has been rendered.
+   * @experimental
+   * @since 3.1.0
+   * @example
+   * const sheet = await embed(app).render({
+   *   element,
+   *   id: "jD5Gd"
+   * });
+   * sheet.destroy();
+   */
+  const api = /** @lends Sheet# */{
+    /**
+     * The id of this sheets's generic object.
+     * @type {string}
+     */
+    id: model.id,
+    /**
+     * This sheets Enigma model, a representation of the generic object.
+     * @type {string}
+     */
+    model,
+    /**
+     * Destroys the sheet and removes it from the the DOM.
+     * @example
+     * const sheet = await embed(app).render({
+     *   element,
+     *   id: "jD5Gd"
+     * });
+     * sheet.destroy();
+     */
+    async destroy() {
+      await onDestroy();
+      unmountSheet();
+      unmountSheet = noopi;
+    },
+    // ===== unexposed experimental API - use at own risk ======
+    __DO_NOT_USE__: {
+      mount(element) {
+        if (mountedReference) {
+          throw new Error('Already mounted');
+        }
+        mountedReference = element;
+        [unmountSheet, sheetRef] = glue({
+          halo,
+          element,
+          model,
+          initialSnOptions,
+          initialSnPlugins,
+          initialError,
+          onMount
+        });
+        return mounted;
+      },
+      async applyProperties(props) {
+        const current = await model.getEffectiveProperties();
+        const patches = getPatches('/', props, current);
+        if (patches.length) {
+          return model.applyPatches(patches, true);
+        }
+        return undefined;
+      },
+      options(opts) {
+        setSnOptions(opts);
+      },
+      plugins(plugins) {
+        setSnPlugins(plugins);
+      },
+      exportImage() {
+        throw new Error('Not implemented');
+      },
+      takeSnapshot() {
+        throw new Error('Not implemented');
+      },
+      getModel() {
+        return model;
+      }
+    }
+  };
+  return api;
+}
+
+/* eslint no-underscore-dangle:0 */
+async function initSheet(model, optional, halo, initialError) {
+  let onDestroy = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : async () => {};
+  const api = sheet({
+    model,
+    halo,
+    initialError,
+    onDestroy
+  });
+  if (optional.options) {
+    api.__DO_NOT_USE__.options(optional.options);
+  }
+  if (optional.plugins) {
+    api.__DO_NOT_USE__.plugins(optional.plugins);
+  }
+  if (optional.element) {
+    await api.__DO_NOT_USE__.mount(optional.element);
+  }
+  return api;
+}
+
 /**
  * @interface BaseConfig
  * @description Basic rendering configuration for rendering an object
@@ -15723,6 +16149,13 @@ async function getObject(_ref, halo) {
   }
   const model = await rpc;
   modelStore.set(key, model);
+  if (model.genericType === 'sheet') {
+    return initSheet(model, {
+      options,
+      plugins,
+      element
+    }, halo);
+  }
   return init(model, {
     options,
     plugins,
@@ -19592,6 +20025,7 @@ function nuked() {
       themes: configuration.themes,
       root
     });
+    currentContext.themeApi = appTheme$1.externalAPI;
     const publicAPIs = {
       galaxy: /** @lends Galaxy */{
         /** @type {Translator} */
@@ -19637,9 +20071,10 @@ function nuked() {
      */
     const api = /** @lends Embed# */{
       /**
-       * Renders a visualization into an HTMLElement.
+       * Renders a visualization or sheet into an HTMLElement.
+       * Support for sense sheets is experimental.
        * @param {CreateConfig | GetConfig} cfg - The render configuration.
-       * @returns {Promise<Viz>} A controller to the rendered visualization.
+       * @returns {Promise<Viz|Sheet>} A controller to the rendered visualization or sheet.
        * @example
        * // render from existing object
        * n.render({
@@ -19923,7 +20358,7 @@ var enigmaMocker = {exports: {}};
 var enigmaMocker_dev = {exports: {}};
 
 /*
-* @nebula.js/enigma-mocker v3.1.0-alpha.1
+* @nebula.js/enigma-mocker v3.1.0-alpha.2
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -20297,7 +20732,7 @@ var enigmaMocker_dev = {exports: {}};
         throw new Error("Generic object has multiple IDs, qInfo.qId: ".concat(qId, ", id: ").concat(id));
       }
       qId = qId || id || "object - ".concat(+Date.now());
-      const mock = _objectSpread2({
+      const mock = _objectSpread2(_objectSpread2({
         id: qId,
         session: getPropValue(session, {
           defaultValue: true
@@ -20312,7 +20747,9 @@ var enigmaMocker_dev = {exports: {}};
             delay
           })
         });
-      }, {}));
+      }, {})), {}, {
+        genericType: genericObject.type
+      });
       return {
         [qId]: mock
       };