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

package/dist/stardust.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.
 */
@@ -2756,7 +2756,9 @@
 	        }
 	      );
 	    },
-	    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;
 	      }
@@ -2766,10 +2768,10 @@
 	      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];
 	    }
 	  };
 	}
@@ -2992,7 +2994,7 @@
 	  }
 	  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]]) {
@@ -3006,7 +3008,7 @@
 	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;
@@ -3175,10 +3177,12 @@
 	     * @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() {
@@ -11926,7 +11930,7 @@
 	  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', ''));
 	});
@@ -11935,7 +11939,8 @@
 	  language: null,
 	  theme: null,
 	  translator: null,
-	  constraints: {}
+	  constraints: {},
+	  themeApi: null
 	});
 
 	var createKeyStore = (function () {
@@ -12444,7 +12449,7 @@
 	  const appRef = React.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.createElement(NebulaApp, {
@@ -12463,6 +12468,9 @@
 	    addCell(id, cell) {
 	      cells[id] = cell;
 	    },
+	    removeCell(id) {
+	      delete cells[id];
+	    },
 	    add(component) {
 	      (async () => {
 	        await rendered;
@@ -18899,7 +18907,7 @@
 	const barPadPx = 4;
 	const barBorderWidthPx = 1;
 	const barWithCheckboxLeftPadPx = 29;
-	const frequencyTextNone = '0';
+	const frequencyTextNone = '-';
 	const getSelectedStyle = _ref => {
 	  let {
 	    theme
@@ -18917,13 +18925,14 @@
 	  };
 	};
 	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)
@@ -18931,7 +18940,7 @@
 	    ["& .".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': {
@@ -18952,12 +18961,15 @@
 	      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
 	    },
@@ -19063,7 +19075,7 @@
 	    column = false,
 	    checkboxes = false,
 	    dense = false,
-	    frequencyMode = 'N',
+	    freqIsAllowed,
 	    isSingleSelect,
 	    actions,
 	    frequencyMax = '',
@@ -19256,7 +19268,7 @@
 	    color: 'inherit'
 	  }) : getFieldWithRanges({
 	    lbls: labels
-	  })), frequencyMode !== 'N' && /*#__PURE__*/React.createElement(Grid$1, {
+	  })), freqIsAllowed && /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    style: {
 	      display: 'flex',
@@ -19285,6 +19297,7 @@
 	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")
 	};
@@ -19335,7 +19348,7 @@
 	    height,
 	    width,
 	    listLayout = 'vertical',
-	    frequencyMode = 'N',
+	    frequencyMode,
 	    histogram = false,
 	    checkboxes = false,
 	    update = undefined,
@@ -19475,6 +19488,14 @@
 	    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;
@@ -19491,6 +19512,7 @@
 	  const {
 	    frequencyMax
 	  } = layout;
+	  const freqIsAllowed = getFrequencyAllowed();
 	  return /*#__PURE__*/React.createElement(InfiniteLoader, {
 	    isItemLoaded: isItemLoaded,
 	    itemCount: listCount || 1 // must be more than 0 or loadMoreItems will never be called again
@@ -19524,6 +19546,7 @@
 	        checkboxes,
 	        dense,
 	        frequencyMode,
+	        freqIsAllowed,
 	        isSingleSelect,
 	        actions: {
 	          select,
@@ -20110,7 +20133,25 @@
 	var SearchIcon = (props => SvgIcon(search(props)));
 
 	const TREE_PATH = '/qListObjectDef';
-	function ListBoxSearch(_ref) {
+	const StyledInputAdornment = styled$1(InputAdornment$1)(_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$1)(_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,
@@ -20118,7 +20159,7 @@
 	    listCount,
 	    dense = false,
 	    visible = true
-	  } = _ref;
+	  } = _ref3;
 	  const {
 	    translator
 	  } = react.exports.useContext(InstanceContext);
@@ -20187,8 +20228,8 @@
 	  if (!visible) {
 	    return null;
 	  }
-	  return /*#__PURE__*/React.createElement(OutlinedInput$1, {
-	    startAdornment: /*#__PURE__*/React.createElement(InputAdornment$1, {
+	  return /*#__PURE__*/React.createElement(StyledOutlinedInput, {
+	    startAdornment: /*#__PURE__*/React.createElement(StyledInputAdornment, {
 	      position: "start"
 	    }, /*#__PURE__*/React.createElement(SearchIcon, {
 	      size: dense ? 'small' : 'normal'
@@ -20197,6 +20238,7 @@
 	    sx: [{
 	      border: 'none',
 	      borderRadius: 0,
+	      backgroundColor: 'transparent',
 	      '& fieldset': {
 	        border: "1px solid ".concat(theme.palette.divider),
 	        borderWidth: '1px 0 1px 0',
@@ -21835,28 +21877,65 @@
 	  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$1)(() => ({
-	  ["& .".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$1)(_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$1)(_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,
@@ -21899,8 +21978,10 @@
 	  }, [model]);
 	  const {
 	    translator,
-	    keyboardNavigation
+	    keyboardNavigation,
+	    themeApi
 	  } = react.exports.useContext(InstanceContext);
+	  theme.listBox = addListboxTheme(themeApi);
 	  const moreAlignTo = react.exports.useRef();
 	  const [searchContainer, searchContainerRef] = useRefWithCallback();
 	  const [layout] = useLayout$1(model);
@@ -22015,7 +22096,7 @@
 	  })) : getSearchOrUnlock()), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    className: classes$4.listBoxHeader
-	  }, /*#__PURE__*/React.createElement(Typography$1, {
+	  }, /*#__PURE__*/React.createElement(Title, {
 	    variant: "h6",
 	    noWrap: true
 	  }, layout.title || layout.qListObject.qDimensionInfo.qFallbackTitle)), /*#__PURE__*/React.createElement(Grid$1, {
@@ -22072,11 +22153,11 @@
 	    ref: moreAlignTo
 	  }), /*#__PURE__*/React.createElement("div", {
 	    className: classes$4.screenReaderOnly
-	  }, translator.get('Listbox.ScreenReaderInstructions')), /*#__PURE__*/React.createElement(AutoSizer, null, _ref2 => {
+	  }, translator.get('Listbox.ScreenReaderInstructions')), /*#__PURE__*/React.createElement(AutoSizer, null, _ref4 => {
 	    let {
 	      height,
 	      width
-	    } = _ref2;
+	    } = _ref4;
 	    return /*#__PURE__*/React.createElement(ListBox, {
 	      model: model,
 	      selections: selections,
@@ -22116,6 +22197,9 @@
 	  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.');
+	  }
 	  react.exports.useEffect(() => {
 	    async function fetchObject() {
 	      const modelFromStore = modelStore.get(qId);
@@ -24099,7 +24183,7 @@
 	  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);
@@ -24123,7 +24207,7 @@
 	    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;
 	};
@@ -24415,6 +24499,7 @@
 	    disableCellPadding = false
 	  } = halo.context || {};
 	  const {
+	    theme: themeName,
 	    translator,
 	    language,
 	    keyboardNavigation
@@ -24431,11 +24516,8 @@
 	  const [contentRef, contentRect, contentNode] = useRect$1();
 	  const [snOptions, setSnOptions] = react.exports.useState(initialSnOptions);
 	  const [snPlugins, setSnPlugins] = react.exports.useState(initialSnPlugins);
-	  const [clickOutElement, setClickOutElement] = react.exports.useState();
-	  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] = react.exports.useState(false);
 	  const hoveringDebouncer = react.exports.useRef({
 	    enter: null,
@@ -24453,17 +24535,11 @@
 	  react.exports.useEffect(() => {
 	    eventmixin(focusHandler.current);
 	  }, []);
-	  react.exports.useEffect(() => {
-	    if (!contentNode) {
-	      return;
-	    }
-	    setClickOutElement(cellNode);
-	  }, [cellRect]);
 	  react.exports.useEffect(() => {
 	    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) {
@@ -24654,7 +24730,7 @@
 	      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,
@@ -24664,6 +24740,7 @@
 	    square: true,
 	    className: CellElement.className,
 	    ref: cellRef,
+	    id: cellElementId,
 	    onMouseEnter: handleOnMouseEnter,
 	    onMouseLeave: handleOnMouseLeave
 	  }, /*#__PURE__*/React.createElement(Grid$1, {
@@ -24703,7 +24780,7 @@
 	  }));
 	});
 
-	function glue(_ref) {
+	function glue$1(_ref) {
 	  let {
 	    halo,
 	    element,
@@ -24809,7 +24886,7 @@
 	  });
 	}
 
-	const noopi = () => {};
+	const noopi$1 = () => {};
 	function viz() {
 	  let {
 	    model,
@@ -24817,7 +24894,7 @@
 	    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;
@@ -24867,6 +24944,11 @@
 	     * @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
@@ -24879,7 +24961,7 @@
 	    async destroy() {
 	      await onDestroy();
 	      unmountCell();
-	      unmountCell = noopi;
+	      unmountCell = noopi$1;
 	    },
 	    /**
 	     * Converts the visualization to a different registered type
@@ -24918,7 +25000,7 @@
 	          throw new Error('Already mounted');
 	        }
 	        mountedReference = element;
-	        [unmountCell, cellRef] = glue({
+	        [unmountCell, cellRef] = glue$1({
 	          halo,
 	          element,
 	          model,
@@ -25058,6 +25140,350 @@
 	  }, 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.createElement("div", {
+	    style: {
+	      left: "".concat(x, "%"),
+	      top: "".concat(y, "%"),
+	      width: "".concat(width, "%"),
+	      height: "".concat(height, "%"),
+	      position: 'absolute'
+	    }
+	  }, /*#__PURE__*/React.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
+	  } = react.exports.useContext(InstanceContext);
+	  const [cells, setCells] = react.exports.useState([]);
+	  const [bgColor, setBgColor] = react.exports.useState(undefined);
+	  const [bgImage, setBgImage] = react.exports.useState(undefined);
+	  const [deepHash, setDeepHash] = react.exports.useState('');
+
+	  /// For each object
+	  react.exports.useEffect(() => {
+	    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.createRef(),
+	            currentId: uid(),
+	            mounted,
+	            mountedPromise
+	          };
+	        }));
+	        cs.forEach(c => root.addCell(c.currentId, c.cellRef));
+	        setCells(cs);
+	      };
+	      fetchObjects();
+	    }
+	  }, [layout]);
+	  const cellRenderers = react.exports.useMemo(() => cells ? cells.map(c => getCellRenderer(c, halo, initialSnOptions, initialSnPlugins, initialError, c.mounted)) : [], [cells]);
+	  react.exports.useEffect(() => {
+	    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.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.createRef();
+	  const portal = ReactDOM.createPortal( /*#__PURE__*/React.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
@@ -25088,6 +25514,13 @@
 	  }
 	  const model = await rpc;
 	  modelStore.set(key, model);
+	  if (model.genericType === 'sheet') {
+	    return initSheet(model, {
+	      options,
+	      plugins,
+	      element
+	    }, halo);
+	  }
 	  return init(model, {
 	    options,
 	    plugins,
@@ -28957,6 +29390,7 @@
 	      themes: configuration.themes,
 	      root
 	    });
+	    currentContext.themeApi = appTheme$1.externalAPI;
 	    const publicAPIs = {
 	      galaxy: /** @lends Galaxy */{
 	        /** @type {Translator} */
@@ -29002,9 +29436,10 @@
 	     */
 	    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({
@@ -29288,7 +29723,7 @@
 	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.
 	*/
@@ -29662,7 +30097,7 @@
 	        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
@@ -29677,7 +30112,9 @@
 	            delay
 	          })
 	        });
-	      }, {}));
+	      }, {})), {}, {
+	        genericType: genericObject.type
+	      });
 	      return {
 	        [qId]: mock
 	      };