@nebula.js/stardust 5.10.1 → 5.12.0

package/dist/stardust.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.
 */
@@ -30,7 +30,7 @@
 	}
 
 	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 () {
@@ -2978,11 +2978,13 @@
 		title: {
 			main: {
 				color: "@B50",
-				fontSize: "15px"
+				fontSize: "15px",
+				backgroundColor: "transparent"
 			},
 			subTitle: {
 				color: "@B50",
-				fontSize: "12px"
+				fontSize: "12px",
+				backgroundColor: "transparent"
 			},
 			footer: {
 				color: "@B50",
@@ -4922,12 +4924,13 @@
 	    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;
@@ -4943,7 +4946,7 @@
 	        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;
@@ -4951,8 +4954,6 @@
 	        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;
 	        }
@@ -4962,10 +4963,10 @@
 	        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) {
@@ -5392,12 +5393,10 @@
 	     * @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() {
@@ -10446,12 +10445,12 @@
 		unstable_applyStyles: applyStyles$2
 	});
 
-	function isObjectEmpty(obj) {
+	function isObjectEmpty$1(obj) {
 	  return Object.keys(obj).length === 0;
 	}
 	function useTheme$5(defaultTheme = null) {
 	  const contextTheme = reactExports.useContext(ThemeContext$1);
-	  return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
+	  return !contextTheme || isObjectEmpty$1(contextTheme) ? defaultTheme : contextTheme;
 	}
 
 	const systemDefaultTheme$1 = createTheme$2();
@@ -12898,7 +12897,10 @@
 	      typography: typographyInput = {}
 	    } = options,
 	    other = _objectWithoutPropertiesLoose$3(options, _excluded$G);
-	  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);
@@ -13261,9 +13263,21 @@
 	    } = _ref,
 	    props = _objectWithoutPropertiesLoose$3(_ref, _excluded$F);
 	  const scopedTheme = themeInput[THEME_ID];
+	  let finalTheme = scopedTheme || themeInput;
+	  if (typeof themeInput !== 'function') {
+	    if (scopedTheme && !scopedTheme.vars) {
+	      finalTheme = _extends$6({}, scopedTheme, {
+	        vars: null
+	      });
+	    } else if (themeInput && !themeInput.vars) {
+	      finalTheme = _extends$6({}, themeInput, {
+	        vars: null
+	      });
+	    }
+	  }
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends$6({}, props, {
 	    themeId: scopedTheme ? THEME_ID : undefined,
-	    theme: scopedTheme || themeInput
+	    theme: finalTheme
 	  }));
 	}
 
@@ -15297,7 +15311,7 @@
 	  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', ''));
 	});
@@ -15356,6 +15370,7 @@
 	  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) => {
@@ -15363,7 +15378,7 @@
 	        throw new Error("Invalid key: ".concat(JSON.stringify(key)));
 	      }
 	      sharedState[key] = value;
-	      applyMiddleware({
+	      subscribedListeners[key] = applyMiddleware({
 	        type: 'SET',
 	        value
 	      });
@@ -15377,6 +15392,11 @@
 	    },
 	    dispatch: forceNewState => {
 	      hookListeners.forEach(listener => listener(forceNewState ? {} : sharedState));
+	    },
+	    destroy: () => {
+	      Object.keys(subscribedListeners).forEach(key => {
+	        subscribedListeners[key] && subscribedListeners[key]();
+	      });
 	    }
 	  };
 	  const useKeyStore = () => {
@@ -15413,6 +15433,7 @@
 	      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);
@@ -15425,9 +15446,7 @@
 	      case 'SET':
 	        if (!initialized) {
 	          model.on('changed', onChanged);
-	          model.once('closed', () => {
-	            unsubscribe();
-	          });
+	          model.once('closed', unsubscribe);
 	        }
 	        break;
 	    }
@@ -15444,8 +15463,12 @@
 	      modelStore.clear(model.id);
 	    };
 	  };
+	  const destroy = () => {
+	    modelStore.destroy();
+	  };
 	  return {
 	    subscribe,
+	    destroy,
 	    useModelStore,
 	    modelStore,
 	    useModelChangedStore,
@@ -15529,7 +15552,7 @@
 	  const appRef = React.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) {
@@ -15546,6 +15569,7 @@
 	    selectionStore: selectionStore
 	  }));
 	  const cells = {};
+	  const cellsUnmount = {};
 	  const components = [];
 	  return [{
 	    toggleFocusOfCells(cellIdToFocus) {
@@ -15554,11 +15578,14 @@
 	      });
 	    },
 	    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 () => {
@@ -15592,6 +15619,12 @@
 	        }
 	        appRef.current.setContext(ctx);
 	      })();
+	    },
+	    destroy() {
+	      Object.keys(cellsUnmount).forEach(c => {
+	        cellsUnmount[c]();
+	      });
+	      modelStore.destroy();
 	    }
 	  }, modelStore, selectionStore, appRef, rendered];
 	}
@@ -18270,8 +18303,15 @@
 	    transform: 'translateZ(0)'
 	  }
 	};
+	function isObjectEmpty(object) {
+	  // eslint-disable-next-line
+	  for (const _ in object) {
+	    return false;
+	  }
+	  return true;
+	}
 	function isEmpty$1(obj) {
-	  return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflowing;
+	  return isObjectEmpty(obj) || obj.outerHeightStyle === 0 && !obj.overflowing;
 	}
 
 	/**
@@ -18296,14 +18336,18 @@
 	  const {
 	    current: isControlled
 	  } = reactExports.useRef(value != null);
-	  const inputRef = reactExports.useRef(null);
-	  const handleRef = useForkRef(forwardedRef, inputRef);
+	  const textareaRef = reactExports.useRef(null);
+	  const handleRef = useForkRef(forwardedRef, textareaRef);
 	  const heightRef = reactExports.useRef(null);
-	  const shadowRef = reactExports.useRef(null);
+	  const hiddenTextareaRef = reactExports.useRef(null);
 	  const calculateTextareaStyles = reactExports.useCallback(() => {
-	    const input = inputRef.current;
-	    const containerWindow = ownerWindow(input);
-	    const computedStyle = containerWindow.getComputedStyle(input);
+	    const textarea = textareaRef.current;
+	    const hiddenTextarea = hiddenTextareaRef.current;
+	    if (!textarea || !hiddenTextarea) {
+	      return undefined;
+	    }
+	    const containerWindow = ownerWindow(textarea);
+	    const computedStyle = containerWindow.getComputedStyle(textarea);
 
 	    // If input's width is shrunk and it's not visible, don't sync height.
 	    if (computedStyle.width === '0px') {
@@ -18312,25 +18356,24 @@
 	        overflowing: false
 	      };
 	    }
-	    const inputShallow = shadowRef.current;
-	    inputShallow.style.width = computedStyle.width;
-	    inputShallow.value = input.value || props.placeholder || 'x';
-	    if (inputShallow.value.slice(-1) === '\n') {
+	    hiddenTextarea.style.width = computedStyle.width;
+	    hiddenTextarea.value = textarea.value || props.placeholder || 'x';
+	    if (hiddenTextarea.value.slice(-1) === '\n') {
 	      // Certain fonts which overflow the line height will cause the textarea
 	      // to report a different scrollHeight depending on whether the last line
 	      // is empty. Make it non-empty to avoid this issue.
-	      inputShallow.value += ' ';
+	      hiddenTextarea.value += ' ';
 	    }
 	    const boxSizing = computedStyle.boxSizing;
 	    const padding = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
 	    const border = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
 
 	    // The height of the inner content
-	    const innerHeight = inputShallow.scrollHeight;
+	    const innerHeight = hiddenTextarea.scrollHeight;
 
 	    // Measure height of a textarea with a single row
-	    inputShallow.value = 'x';
-	    const singleRowHeight = inputShallow.scrollHeight;
+	    hiddenTextarea.value = 'x';
+	    const singleRowHeight = hiddenTextarea.scrollHeight;
 
 	    // The height of the outer content
 	    let outerHeight = innerHeight;
@@ -18350,46 +18393,63 @@
 	      overflowing
 	    };
 	  }, [maxRows, minRows, props.placeholder]);
+	  const didHeightChange = useEventCallback(() => {
+	    const textarea = textareaRef.current;
+	    const textareaStyles = calculateTextareaStyles();
+	    if (!textarea || !textareaStyles || isEmpty$1(textareaStyles)) {
+	      return false;
+	    }
+	    const outerHeightStyle = textareaStyles.outerHeightStyle;
+	    return heightRef.current != null && heightRef.current !== outerHeightStyle;
+	  });
 	  const syncHeight = reactExports.useCallback(() => {
+	    const textarea = textareaRef.current;
 	    const textareaStyles = calculateTextareaStyles();
-	    if (isEmpty$1(textareaStyles)) {
+	    if (!textarea || !textareaStyles || isEmpty$1(textareaStyles)) {
 	      return;
 	    }
 	    const outerHeightStyle = textareaStyles.outerHeightStyle;
-	    const input = inputRef.current;
 	    if (heightRef.current !== outerHeightStyle) {
 	      heightRef.current = outerHeightStyle;
-	      input.style.height = `${outerHeightStyle}px`;
+	      textarea.style.height = `${outerHeightStyle}px`;
 	    }
-	    input.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
+	    textarea.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
 	  }, [calculateTextareaStyles]);
+	  const frameRef = reactExports.useRef(-1);
 	  useEnhancedEffect(() => {
-	    const handleResize = () => {
-	      syncHeight();
-	    };
-	    // Workaround a "ResizeObserver loop completed with undelivered notifications" error
-	    // in test.
-	    // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
-	    // Also see https://github.com/mui/mui-x/issues/8733
-	    let rAF;
-	    const debounceHandleResize = debounce$1(handleResize);
-	    const input = inputRef.current;
-	    const containerWindow = ownerWindow(input);
-	    containerWindow.addEventListener('resize', debounceHandleResize);
+	    const debouncedHandleResize = debounce$1(syncHeight);
+	    const textarea = textareaRef == null ? void 0 : textareaRef.current;
+	    if (!textarea) {
+	      return undefined;
+	    }
+	    const containerWindow = ownerWindow(textarea);
+	    containerWindow.addEventListener('resize', debouncedHandleResize);
 	    let resizeObserver;
 	    if (typeof ResizeObserver !== 'undefined') {
-	      resizeObserver = new ResizeObserver(handleResize);
-	      resizeObserver.observe(input);
+	      resizeObserver = new ResizeObserver(() => {
+	        if (didHeightChange()) {
+	          // avoid "ResizeObserver loop completed with undelivered notifications" error
+	          // by temporarily unobserving the textarea element while manipulating the height
+	          // and reobserving one frame later
+	          resizeObserver.unobserve(textarea);
+	          cancelAnimationFrame(frameRef.current);
+	          syncHeight();
+	          frameRef.current = requestAnimationFrame(() => {
+	            resizeObserver.observe(textarea);
+	          });
+	        }
+	      });
+	      resizeObserver.observe(textarea);
 	    }
 	    return () => {
-	      debounceHandleResize.clear();
-	      cancelAnimationFrame(rAF);
-	      containerWindow.removeEventListener('resize', debounceHandleResize);
+	      debouncedHandleResize.clear();
+	      cancelAnimationFrame(frameRef.current);
+	      containerWindow.removeEventListener('resize', debouncedHandleResize);
 	      if (resizeObserver) {
 	        resizeObserver.disconnect();
 	      }
 	    };
-	  }, [calculateTextareaStyles, syncHeight]);
+	  }, [calculateTextareaStyles, syncHeight, didHeightChange]);
 	  useEnhancedEffect(() => {
 	    syncHeight();
 	  });
@@ -18414,7 +18474,7 @@
 	      "aria-hidden": true,
 	      className: props.className,
 	      readOnly: true,
-	      ref: shadowRef,
+	      ref: hiddenTextareaRef,
 	      tabIndex: -1,
 	      style: _extends$6({}, styles$2.shadow, style, {
 	        paddingTop: 0,
@@ -25366,12 +25426,12 @@
 	    },
 	    // 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.
@@ -31067,10 +31127,9 @@
 	  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);
 	}
@@ -31193,7 +31252,8 @@
 	  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'
@@ -31264,7 +31324,7 @@
 	      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;
 	}
@@ -31289,7 +31349,7 @@
 	  } = _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,
@@ -35995,7 +36055,8 @@
 	  return {
 	    ["& .".concat(classes.itemStyle)]: {
 	      minWidth: 0,
-	      paddingTop: theme.spacing(1)
+	      paddingTop: theme.spacing(1),
+	      width: '100%'
 	    }
 	  };
 	});
@@ -36249,6 +36310,70 @@
 	  }
 	}
 
+	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
@@ -36257,6 +36382,15 @@
 	  /** @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,
@@ -36538,6 +36672,7 @@
 	  }
 	};
 	const Cell = reactExports.forwardRef((_ref6, ref) => {
+	  var _halo$public$galaxy;
 	  let {
 	    halo,
 	    model: inputModel,
@@ -36787,6 +36922,25 @@
 	      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.createElement(Paper, {
 	    style: {
 	      position: 'relative',
@@ -36818,7 +36972,7 @@
 	      position: 'relative',
 	      width: '100%',
 	      height: '100%'
-	    }, !disableCellPadding ? {
+	    }, useOldCellPadding ? {
 	      padding: theme.spacing(1)
 	    } : {}), state.longRunningQuery ? {
 	      opacity: '0.3'
@@ -36835,9 +36989,12 @@
 	    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.createElement(Footer, {
 	    layout: layout,
@@ -36887,7 +37044,7 @@
 	  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];
 	}
 
@@ -39070,9 +39227,20 @@
 	 * @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
@@ -39883,21 +40051,28 @@
 	  /** @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.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.createElement(Cell, {
 	    ref: cell.cellRef,
@@ -39908,7 +40083,8 @@
 	    initialSnPlugins: initialSnPlugins,
 	    initialError: initialError,
 	    onMount: onMount,
-	    navigation: navigation
+	    navigation: navigation,
+	    onError: onError
 	  }));
 	}
 	function getBounds(pos, columns, rows) {
@@ -39932,7 +40108,8 @@
 	    initialError,
 	    onMount,
 	    unmount,
-	    navigation
+	    navigation,
+	    onError
 	  } = _ref;
 	  const {
 	    root
@@ -39947,6 +40124,11 @@
 	  const [bgColor, setBgColor] = reactExports.useState(undefined);
 	  const [bgImage, setBgImage] = reactExports.useState(undefined);
 	  const [deepHash, setDeepHash] = reactExports.useState('');
+	  const renderState = reactExports.useRef({
+	    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
 	  reactExports.useEffect(() => {
@@ -39967,6 +40149,15 @@
 	          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
@@ -39994,7 +40185,10 @@
 	            cellRef: React.createRef(),
 	            currentId: uid(),
 	            mounted,
-	            mountedPromise
+	            mountedPromise,
+	            options: _objectSpread2(_objectSpread2({}, initialSnOptions), {
+	              onInitialRender: renderCallback
+	            })
 	          };
 	        }));
 	        cs.forEach(c => root.addCell(c.currentId, c.cellRef));
@@ -40011,7 +40205,7 @@
 	    model.on('closed', onModelClose);
 	    return () => model.removeListener('closed', onModelClose);
 	  }, [model]);
-	  const cellRenderers = reactExports.useMemo(() => cells ? cells.map(c => getCellRenderer(c, halo, initialSnOptions, initialSnPlugins, initialError, c.mounted, navigation)) : [], [cells]);
+	  const cellRenderers = reactExports.useMemo(() => cells ? cells.map(c => getCellRenderer(c, halo, c.options, initialSnPlugins, initialError, c.mounted, navigation, onError)) : [], [cells]);
 	  reactExports.useEffect(() => {
 	    const bgComp = layout !== null && layout !== void 0 && layout.components ? layout.components.find(comp => comp.key === 'general') : null;
 	    setBgColor(resolveBgColor(bgComp, halo.public.theme));
@@ -40061,7 +40255,8 @@
 	    initialSnPlugins,
 	    onMount,
 	    initialError,
-	    navigation
+	    navigation,
+	    onError
 	  } = _ref;
 	  const {
 	    root
@@ -40080,7 +40275,8 @@
 	    initialError: initialError,
 	    onMount: onMount,
 	    unmount: unmount,
-	    navigation: navigation
+	    navigation: navigation,
+	    onError: onError
 	  }), element, model.id);
 	  navigation.setSheetRef(sheetRef);
 	  root.add(portal);
@@ -40094,26 +40290,42 @@
 	    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 => {
@@ -40160,6 +40372,15 @@
 	     * @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
@@ -40192,7 +40413,8 @@
 	          initialSnPlugins,
 	          initialError,
 	          onMount,
-	          navigation
+	          navigation,
+	          onError
 	        });
 	        return mounted;
 	      },
@@ -40227,12 +40449,18 @@
 	/* 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);
@@ -40375,7 +40603,9 @@
 	    return initSheet(model, {
 	      options,
 	      plugins,
-	      element
+	      element,
+	      onRender,
+	      onError
 	    }, halo, navigation);
 	  }
 	  return init(model, {
@@ -42256,6 +42486,10 @@
 	        }
 	        return createSessionObject(cfg, halo, modelStore);
 	      },
+	      // TODO - document
+	      destroy: async () => {
+	        root.destroy();
+	      },
 	      /**
 	       * Creates a visualization model
 	       * @param {CreateConfig} cfg The create configuration.