@nebula.js/stardust 5.10.1 → 5.12.0

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v5.10.1
+* @nebula.js/stardust v5.12.0
 * Copyright (c) 2025 QlikTech International AB
 * Released under the MIT license.
 */
@@ -16,7 +16,7 @@ function getDefaultExportFromCjs (x) {
 }
 
 function getAugmentedNamespace(n) {
-  if (n.__esModule) return n;
+  if (Object.prototype.hasOwnProperty.call(n, '__esModule')) return n;
   var f = n.default;
 	if (typeof f == "function") {
 		var a = function a () {
@@ -2905,11 +2905,13 @@ var object$2 = {
 	title: {
 		main: {
 			color: "@B50",
-			fontSize: "15px"
+			fontSize: "15px",
+			backgroundColor: "transparent"
 		},
 		subTitle: {
 			color: "@B50",
-			fontSize: "12px"
+			fontSize: "12px",
+			backgroundColor: "transparent"
 		},
 		footer: {
 			color: "@B50",
@@ -4849,12 +4851,13 @@ function theme$1(resolvedTheme) {
     uiPalettes() {
       const pals = [];
       resolvedTheme.palettes.ui.forEach(s => {
+        const colors = s.colors[0] !== 'none' ? ['none', ...s.colors] : s.colors;
         pals.push({
           key: 'ui',
           name: s.name,
           translation: s.translation,
           type: 'row',
-          colors: s.colors
+          colors
         });
       });
       return pals;
@@ -4870,7 +4873,7 @@ function theme$1(resolvedTheme) {
         others: resolvedTheme.dataColors.othersColor
       };
     },
-    uiColor(c, shift) {
+    uiColor(c) {
       const indexIsValid = typeof (c === null || c === void 0 ? void 0 : c.index) === 'number' && !Number.isNaN(c === null || c === void 0 ? void 0 : c.index);
       const colorIsValid = typeof (c === null || c === void 0 ? void 0 : c.color) === 'string';
       const somethingIsValid = indexIsValid || colorIsValid;
@@ -4878,8 +4881,6 @@ function theme$1(resolvedTheme) {
         return undefined;
       }
       const getColor = () => {
-        // eslint-disable-next-line no-param-reassign
-        shift = !!shift;
         if ((c === null || c === void 0 ? void 0 : c.index) < 0 || typeof (c === null || c === void 0 ? void 0 : c.index) === 'undefined') {
           return c.color;
         }
@@ -4889,10 +4890,10 @@ function theme$1(resolvedTheme) {
         if (!uiPalette) {
           return c.color;
         }
-        if (typeof uiPalette.colors[c.index - shift] === 'undefined') {
+        if (typeof uiPalette.colors[c.index] === 'undefined') {
           return c.color;
         }
-        return uiPalette.colors[c.index - shift];
+        return uiPalette.colors[c.index];
       };
       const color = getColor();
       if (c.alpha === undefined || c.alpha >= 1 || c.alpha < 0) {
@@ -5319,12 +5320,10 @@ 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() {
@@ -10011,7 +10010,10 @@ function createTheme(options = {}, ...args) {
       typography: typographyInput = {}
     } = options,
     other = _objectWithoutPropertiesLoose$1(options, _excluded$8);
-  if (options.vars) {
+  if (options.vars &&
+  // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
+  // `generateCssVars` is the closest identifier for checking that the `options` is a result of `extendTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
+  options.generateCssVars === undefined) {
     throw new Error(formatMuiErrorMessage$1(18));
   }
   const palette = createPalette(paletteInput);
@@ -10374,9 +10376,21 @@ function ThemeProvider(_ref) {
     } = _ref,
     props = _objectWithoutPropertiesLoose$1(_ref, _excluded$7);
   const scopedTheme = themeInput[THEME_ID];
+  let finalTheme = scopedTheme || themeInput;
+  if (typeof themeInput !== 'function') {
+    if (scopedTheme && !scopedTheme.vars) {
+      finalTheme = _extends$5({}, scopedTheme, {
+        vars: null
+      });
+    } else if (themeInput && !themeInput.vars) {
+      finalTheme = _extends$5({}, themeInput, {
+        vars: null
+      });
+    }
+  }
   return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$5({}, props, {
     themeId: scopedTheme ? THEME_ID : undefined,
-    theme: scopedTheme || themeInput
+    theme: finalTheme
   }));
 }
 
@@ -10754,7 +10768,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "a207";
+const NEBULA_VERSION_HASH = "02d6";
 ClassNameGenerator.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -10813,6 +10827,7 @@ var createKeyStore = (function () {
   let applyMiddleware = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
   const sharedState = initialState;
   const hookListeners = [];
+  const subscribedListeners = {};
   const store = {
     get: key => sharedState[key],
     set: (key, value) => {
@@ -10820,7 +10835,7 @@ var createKeyStore = (function () {
         throw new Error("Invalid key: ".concat(JSON.stringify(key)));
       }
       sharedState[key] = value;
-      applyMiddleware({
+      subscribedListeners[key] = applyMiddleware({
         type: 'SET',
         value
       });
@@ -10834,6 +10849,11 @@ var createKeyStore = (function () {
     },
     dispatch: forceNewState => {
       hookListeners.forEach(listener => listener(forceNewState ? {} : sharedState));
+    },
+    destroy: () => {
+      Object.keys(subscribedListeners).forEach(key => {
+        subscribedListeners[key] && subscribedListeners[key]();
+      });
     }
   };
   const useKeyStore = () => {
@@ -10870,6 +10890,7 @@ function initializeStores$1(appId) {
       modelChangedStore.dispatch(true); // Force new state to trigger hooks
     };
     const unsubscribe = () => {
+      model.removeListener('closed', unsubscribe);
       model.removeListener('changed', onChanged);
       rpcResultStore.clear(model.id);
       rpcRequestStore.clear(model.id);
@@ -10882,9 +10903,7 @@ function initializeStores$1(appId) {
       case 'SET':
         if (!initialized) {
           model.on('changed', onChanged);
-          model.once('closed', () => {
-            unsubscribe();
-          });
+          model.once('closed', unsubscribe);
         }
         break;
     }
@@ -10901,8 +10920,12 @@ function initializeStores$1(appId) {
       modelStore.clear(model.id);
     };
   };
+  const destroy = () => {
+    modelStore.destroy();
+  };
   return {
     subscribe,
+    destroy,
     useModelStore,
     modelStore,
     useModelChangedStore,
@@ -10986,7 +11009,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "5.10.1");
+  element.setAttribute('data-nebulajs-version', "5.12.0");
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -11003,6 +11026,7 @@ function boot(_ref2) {
     selectionStore: selectionStore
   }));
   const cells = {};
+  const cellsUnmount = {};
   const components = [];
   return [{
     toggleFocusOfCells(cellIdToFocus) {
@@ -11011,11 +11035,14 @@ function boot(_ref2) {
       });
     },
     cells,
-    addCell(id, cell) {
+    addCell(id, cell, unmount) {
       cells[id] = cell;
+      cellsUnmount[id] = unmount;
     },
     removeCell(id) {
       delete cells[id];
+      cellsUnmount[id]();
+      delete cellsUnmount[id];
     },
     add(component) {
       (async () => {
@@ -11049,6 +11076,12 @@ function boot(_ref2) {
         }
         appRef.current.setContext(ctx);
       })();
+    },
+    destroy() {
+      Object.keys(cellsUnmount).forEach(c => {
+        cellsUnmount[c]();
+      });
+      modelStore.destroy();
     }
   }, modelStore, selectionStore, appRef, rendered];
 }
@@ -12375,12 +12408,12 @@ const RowColRoot = styled('div', {
     },
     // The leaf node, containing the label text.
     ["& .".concat(rowColClasses.labelText)]: _objectSpread2(_objectSpread2({
-      lineHeight: '16px',
+      lineHeight: '24px',
       userSelect: 'none',
       paddingRight: '1px'
     }, ellipsis), contentFontStyles),
     ["& .".concat(rowColClasses.labelDense)]: {
-      fontSize: 12
+      lineHeight: 18
     },
     // Highlight is added to labelText spans, which are created as children to original labelText,
     // when a search string is matched.
@@ -18225,10 +18258,9 @@ function resolveProperty(path, attribute, theme, objectType) {
   return undefined;
 }
 
-const supportNone = true;
 function resolveColor(colorObj, path, attribute, theme, objectType) {
   if (colorObj && theme) {
-    return colorObj.color !== 'none' ? theme.getColorPickerColor(colorObj, supportNone) : undefined;
+    return colorObj.color !== 'none' ? theme.getColorPickerColor(colorObj) : undefined;
   }
   return resolveProperty(path, attribute, theme, objectType);
 }
@@ -18351,7 +18383,8 @@ function resolveTextStyle(textComp, target, theme, objectType) {
   return {
     fontFamily: textProps.fontFamily || theme.getStyle("object.".concat(objectType), "title.".concat(target), 'fontFamily'),
     fontSize: textProps.fontSize || theme.getStyle("object.".concat(objectType), "title.".concat(target), 'fontSize'),
-    color: textProps.color && textProps.color.color !== 'none' ? theme.getColorPickerColor(textProps.color, true) : theme.getStyle("object.".concat(objectType), target, 'color'),
+    color: textProps.color && textProps.color.color !== 'none' ? theme.getColorPickerColor(textProps.color) : theme.getStyle("object.".concat(objectType), target, 'color'),
+    backgroundColor: textProps.backgroundColor || theme.getStyle("object.".concat(objectType), "title.".concat(target), 'backgroundColor'),
     fontWeight: fontStyle.includes('bold') ? 'bold' : 'normal',
     fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',
     textDecoration: fontStyle.includes('underline') ? 'underline' : 'initial'
@@ -18422,7 +18455,7 @@ function getBackgroundColor(_ref2) {
       bgColor
     }, themeApi, 'listBox');
   } else {
-    color = themeApi.getColorPickerColor(bgColor === null || bgColor === void 0 ? void 0 : bgColor.color, false);
+    color = themeApi.getColorPickerColor(bgColor === null || bgColor === void 0 ? void 0 : bgColor.color);
   }
   return color;
 }
@@ -18447,7 +18480,7 @@ function getStyles(_ref3) {
   } = _ref3;
   const overrides = getOverridesAsObject(components);
   const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
-  const getColorPickerColor = c => (c === null || c === void 0 ? void 0 : c.index) > 0 || c !== null && c !== void 0 && c.color ? themeApi.getColorPickerColor(c, false) : undefined;
+  const getColorPickerColor = c => (c === null || c === void 0 ? void 0 : c.index) > 0 || c !== null && c !== void 0 && c.color ? themeApi.getColorPickerColor(c) : undefined;
   const selections = getSelectionColors({
     getColorPickerColor,
     theme,
@@ -23153,7 +23186,8 @@ const StyledGrid = styled(Grid)(_ref => {
   return {
     ["& .".concat(classes.itemStyle)]: {
       minWidth: 0,
-      paddingTop: theme.spacing(1)
+      paddingTop: theme.spacing(1),
+      width: '100%'
     }
   };
 });
@@ -23407,6 +23441,70 @@ class RenderError extends Error {
   }
 }
 
+const NP_PADDINH_IN_CARDS_WITHOUT_TITLE = ['action-button', 'sn-nav-menu'];
+const NO_PADDING_IN_CARDS = ['pivot-table', 'table', 'sn-table', 'sn-pivot-table', 'kpi', 'map', 'filterpane', 'sn-calendar', 'sn-filter-pane', 'sn-layout-container', 'sn-listbox', 'sn-shape', 'sn-tabbed-container'];
+const shouldUseCardPadding = _ref => {
+  let {
+    isCardTheme,
+    layout,
+    isError
+  } = _ref;
+  const visualization = layout === null || layout === void 0 ? void 0 : layout.visualization;
+  if (!isCardTheme) {
+    return false;
+  }
+  if (isError) {
+    return true;
+  }
+  if (NO_PADDING_IN_CARDS.indexOf(visualization) !== -1) {
+    return false;
+  }
+  const showTitle = layout === null || layout === void 0 ? void 0 : layout.showTitles;
+  if (!showTitle && NP_PADDINH_IN_CARDS_WITHOUT_TITLE.indexOf(visualization) !== -1) {
+    return false;
+  }
+  return true;
+};
+const getPadding = _ref2 => {
+  let {
+    layout,
+    isError,
+    senseTheme,
+    titleStyles
+  } = _ref2;
+  const isCardTheme = senseTheme === null || senseTheme === void 0 ? void 0 : senseTheme.getStyle('', '', '_cards');
+  const cardPadding = shouldUseCardPadding({
+    isCardTheme,
+    layout,
+    isError
+  });
+  if (isCardTheme) {
+    const showTitle = (layout === null || layout === void 0 ? void 0 : layout.showTitles) && !!(layout !== null && layout !== void 0 && layout.title);
+    const showSubtitle = (layout === null || layout === void 0 ? void 0 : layout.showTitles) && !!(layout !== null && layout !== void 0 && layout.subtitle);
+    const showFootnote = (layout === null || layout === void 0 ? void 0 : layout.showTitles) && !!(layout !== null && layout !== void 0 && layout.footnote);
+    if (showTitle && cardPadding) {
+      // eslint-disable-next-line no-param-reassign
+      titleStyles.main.padding = '10px 10px 0';
+    }
+    if (showSubtitle && cardPadding) {
+      // eslint-disable-next-line no-param-reassign
+      titleStyles.subTitle.padding = showTitle ? '0 10px' : '10px 10px 0';
+    }
+    if (showFootnote) {
+      // eslint-disable-next-line no-param-reassign
+      titleStyles.footer.borderTop = '1px solid #d9d9d9';
+      // eslint-disable-next-line no-param-reassign
+      titleStyles.footer.padding = '6px 10px';
+    }
+    let bodyPadding;
+    if (cardPadding) {
+      bodyPadding = "".concat(showTitle || showSubtitle ? '0' : '10px', " 10px ").concat(showFootnote ? '0' : '5px');
+    }
+    return bodyPadding;
+  }
+  return undefined;
+};
+
 /**
  * @interface
  * @extends HTMLElement
@@ -23415,6 +23513,15 @@ const CellElement = {
   /** @type {'njs-cell'} */
   className: 'njs-cell'
 };
+
+/**
+ * @interface
+ * @extends HTMLElement
+ */
+const CellBody = {
+  /** @type {'njs-cell-body'} */
+  className: 'njs-cell-body'
+};
 const initialState = err => ({
   loading: false,
   loaded: false,
@@ -23696,6 +23803,7 @@ const loadType = async _ref5 => {
   }
 };
 const Cell = forwardRef((_ref6, ref) => {
+  var _halo$public$galaxy;
   let {
     halo,
     model: inputModel,
@@ -23945,6 +24053,25 @@ const Cell = forwardRef((_ref6, ref) => {
       appLayout: appLayout
     });
   }
+  const flags = (_halo$public$galaxy = halo.public.galaxy) === null || _halo$public$galaxy === void 0 ? void 0 : _halo$public$galaxy.flags;
+  let useOldCellPadding;
+  let bodyPadding;
+  if (disableCellPadding) {
+    useOldCellPadding = false;
+    bodyPadding = undefined;
+  } else if (!(flags !== null && flags !== void 0 && flags.isEnabled('VNA-13_CELLPADDING_FROM_THEME'))) {
+    useOldCellPadding = true;
+    bodyPadding = undefined;
+  } else {
+    const senseTheme = halo.public.theme;
+    useOldCellPadding = false;
+    bodyPadding = getPadding({
+      layout,
+      isError: state.error,
+      senseTheme,
+      titleStyles
+    });
+  }
   return /*#__PURE__*/React__default.createElement(Paper, {
     style: {
       position: 'relative',
@@ -23976,7 +24103,7 @@ const Cell = forwardRef((_ref6, ref) => {
       position: 'relative',
       width: '100%',
       height: '100%'
-    }, !disableCellPadding ? {
+    }, useOldCellPadding ? {
       padding: theme.spacing(1)
     } : {}), state.longRunningQuery ? {
       opacity: '0.3'
@@ -23993,9 +24120,12 @@ const Cell = forwardRef((_ref6, ref) => {
     onKeyDown: keyboardNavigation ? handleKeyDown : null,
     item: true,
     xs: true,
-    style: {
+    className: CellBody.className,
+    style: _objectSpread2({
       height: '100%'
-    },
+    }, bodyPadding ? {
+      padding: bodyPadding
+    } : {}),
     ref: contentRef
   }, Content), cellNode && layout && state.sn && /*#__PURE__*/React__default.createElement(Footer, {
     layout: layout,
@@ -24045,7 +24175,7 @@ function glue$1(_ref) {
   model.on('closed', unmount);
   root.add(portal);
   // Cannot use model.id as it is not unique in a given mashup
-  root.addCell(currentId, cellRef);
+  root.addCell(currentId, cellRef, unmount);
   return [unmount, cellRef];
 }
 
@@ -26228,9 +26358,20 @@ const noop = () => {};
  * @returns {ExportFormat}
  */
 
+/**
+ * @callback onPropertyChange
+ * @param {qix.GenericObjectProperties} properties
+ */
+
+/**
+ * @interface QAEProperties
+ * @property {qix.GenericObjectProperties=} initial
+ * @property {onPropertyChange=} onChange
+ */
+
 /**
  * @interface QAEDefinition
- * @property {qix.GenericObjectProperties=} properties
+ * @property {(QAEProperties|qix.GenericObjectProperties)=} properties
  * @property {object=} data
  * @property {DataTarget[]} data.targets
  * @property {importProperties=} importProperties
@@ -27041,21 +27182,28 @@ const SheetElement = {
   /** @type {'njs-sheet'} */
   className: 'njs-sheet'
 };
-function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initialError, onMount, navigation) {
+function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initialError, onMount, navigation, onError) {
+  var _halo$public$galaxy;
   const {
     x,
     y,
     width,
     height
   } = cell.bounds;
+  const style = {
+    left: "".concat(x, "%"),
+    top: "".concat(y, "%"),
+    width: "".concat(width, "%"),
+    height: "".concat(height, "%"),
+    position: 'absolute'
+  };
+  const flags = (_halo$public$galaxy = halo.public.galaxy) === null || _halo$public$galaxy === void 0 ? void 0 : _halo$public$galaxy.flags;
+  if (flags !== null && flags !== void 0 && flags.isEnabled('VNA-13_CELLPADDING_FROM_THEME')) {
+    style.boxSizing = 'border-box';
+    style.padding = '4px';
+  }
   return /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      left: "".concat(x, "%"),
-      top: "".concat(y, "%"),
-      width: "".concat(width, "%"),
-      height: "".concat(height, "%"),
-      position: 'absolute'
-    },
+    style: style,
     key: cell.model.id
   }, /*#__PURE__*/React__default.createElement(Cell, {
     ref: cell.cellRef,
@@ -27066,7 +27214,8 @@ function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initial
     initialSnPlugins: initialSnPlugins,
     initialError: initialError,
     onMount: onMount,
-    navigation: navigation
+    navigation: navigation,
+    onError: onError
   }));
 }
 function getBounds(pos, columns, rows) {
@@ -27090,7 +27239,8 @@ const Sheet = forwardRef((_ref, ref) => {
     initialError,
     onMount,
     unmount,
-    navigation
+    navigation,
+    onError
   } = _ref;
   const {
     root
@@ -27105,6 +27255,11 @@ const Sheet = forwardRef((_ref, ref) => {
   const [bgColor, setBgColor] = useState$1(undefined);
   const [bgImage, setBgImage] = useState$1(undefined);
   const [deepHash, setDeepHash] = useState$1('');
+  const renderState = useRef$1({
+    cellCount: 0,
+    cellsRendered: 0,
+    initialRender: false
+  });
   navigation === null || navigation === void 0 || (_navigation$setCurren = navigation.setCurrentSheetId) === null || _navigation$setCurren === void 0 || _navigation$setCurren.call(navigation, model.id);
   /// For each object
   useEffect$1(() => {
@@ -27125,6 +27280,15 @@ const Sheet = forwardRef((_ref, ref) => {
           root.removeCell(c.currentId);
         });
         const lCells = layout.cells;
+        renderState.cellCount = lCells.length;
+        renderState.cellsRendered = 0;
+        const renderCallback = () => {
+          renderState.cellsRendered++;
+          if (renderState.cellsRendered === renderState.cellCount && !renderState.initialRender) {
+            renderState.initialRender = true;
+            initialSnOptions.onInitialRender();
+          }
+        };
         const {
           columns,
           rows
@@ -27152,7 +27316,10 @@ const Sheet = forwardRef((_ref, ref) => {
             cellRef: React__default.createRef(),
             currentId: uid(),
             mounted,
-            mountedPromise
+            mountedPromise,
+            options: _objectSpread2(_objectSpread2({}, initialSnOptions), {
+              onInitialRender: renderCallback
+            })
           };
         }));
         cs.forEach(c => root.addCell(c.currentId, c.cellRef));
@@ -27169,7 +27336,7 @@ const Sheet = forwardRef((_ref, ref) => {
     model.on('closed', onModelClose);
     return () => model.removeListener('closed', onModelClose);
   }, [model]);
-  const cellRenderers = useMemo$1(() => cells ? cells.map(c => getCellRenderer(c, halo, initialSnOptions, initialSnPlugins, initialError, c.mounted, navigation)) : [], [cells]);
+  const cellRenderers = useMemo$1(() => cells ? cells.map(c => getCellRenderer(c, halo, c.options, initialSnPlugins, initialError, c.mounted, navigation, onError)) : [], [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));
@@ -27219,7 +27386,8 @@ function glue(_ref) {
     initialSnPlugins,
     onMount,
     initialError,
-    navigation
+    navigation,
+    onError
   } = _ref;
   const {
     root
@@ -27238,7 +27406,8 @@ function glue(_ref) {
     initialError: initialError,
     onMount: onMount,
     unmount: unmount,
-    navigation: navigation
+    navigation: navigation,
+    onError: onError
   }), element, model.id);
   navigation.setSheetRef(sheetRef);
   root.add(portal);
@@ -27252,26 +27421,42 @@ function sheet() {
     halo,
     navigation,
     initialError,
-    onDestroy = async () => {}
+    onDestroy = async () => {},
+    onRender = () => {},
+    onError = () => {}
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let unmountSheet = noopi;
   let sheetRef = null;
   let mountedReference = null;
   let onMount = null;
+  let onRenderResolve = null;
   const mounted = new Promise(resolve => {
     onMount = resolve;
   });
+  const rendered = new Promise(resolve => {
+    onRenderResolve = resolve;
+  });
+  const createOnInitialRender = override => () => {
+    override === null || override === void 0 || override(); // from options.onInitialRender
+    onRenderResolve(); // internal promise in viz to wait for render
+    onRender(); // from RenderConfig
+  };
   let initialSnOptions = {};
   let initialSnPlugins = [];
   const setSnOptions = async opts => {
+    const override = opts.onInitialRender;
     if (mountedReference) {
       (async () => {
         await mounted;
-        sheetRef.current.setSnOptions(_objectSpread2(_objectSpread2({}, initialSnOptions), opts));
+        sheetRef.current.setSnOptions(_objectSpread2(_objectSpread2(_objectSpread2({}, initialSnOptions), opts), {
+          onInitialRender: createOnInitialRender(override)
+        }));
       })();
     } else {
       // Handle setting options before mount
-      initialSnOptions = _objectSpread2(_objectSpread2({}, initialSnOptions), opts);
+      initialSnOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, initialSnOptions), opts), {
+        onInitialRender: createOnInitialRender(override)
+      });
     }
   };
   const setSnPlugins = async plugins => {
@@ -27318,6 +27503,15 @@ function sheet() {
      * @type {Navigation}
      */
     navigation,
+    /**
+     * Gets the specific api that a Viz exposes.
+     * @private currently empty and private
+     * @returns {Promise<object>} object that contains the internal Viz api.
+     */
+    async getImperativeHandle() {
+      await rendered;
+      return sheetRef.current.getImperativeHandle();
+    },
     /**
      * Destroys the sheet and removes it from the the DOM.
      * @example
@@ -27350,7 +27544,8 @@ function sheet() {
           initialSnPlugins,
           initialError,
           onMount,
-          navigation
+          navigation,
+          onError
         });
         return mounted;
       },
@@ -27385,12 +27580,18 @@ function sheet() {
 /* eslint no-underscore-dangle:0 */
 async function initSheet(model, optional, halo, navigation, initialError) {
   let onDestroy = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : async () => {};
+  const {
+    onRender,
+    onError
+  } = optional;
   const api = sheet({
     model,
     halo,
     navigation,
     initialError,
-    onDestroy
+    onDestroy,
+    onRender,
+    onError
   });
   if (optional.options) {
     api.__DO_NOT_USE__.options(optional.options);
@@ -27533,7 +27734,9 @@ async function getObject(_ref, halo, store) {
     return initSheet(model, {
       options,
       plugins,
-      element
+      element,
+      onRender,
+      onError
     }, halo, navigation);
   }
   return init(model, {
@@ -29414,6 +29617,10 @@ function nuked() {
         }
         return createSessionObject(cfg, halo, modelStore);
       },
+      // TODO - document
+      destroy: async () => {
+        root.destroy();
+      },
       /**
        * Creates a visualization model
        * @param {CreateConfig} cfg The create configuration.