@nebula.js/stardust 5.12.3 → 5.12.5

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v5.12.3
+* @nebula.js/stardust v5.12.5
 * Copyright (c) 2025 QlikTech International AB
 * Released under the MIT license.
 */
@@ -10768,7 +10768,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "138a";
+const NEBULA_VERSION_HASH = "4f66";
 ClassNameGenerator.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -11009,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.12.3");
+  element.setAttribute('data-nebulajs-version', "5.12.5");
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -11026,7 +11026,7 @@ function boot(_ref2) {
     selectionStore: selectionStore
   }));
   const cells = {};
-  const cellsUnmount = {};
+  const componentsUnmount = [];
   const components = [];
   return [{
     toggleFocusOfCells(cellIdToFocus) {
@@ -11035,30 +11035,31 @@ function boot(_ref2) {
       });
     },
     cells,
-    addCell(id, cell, unmount) {
+    addCell(id, cell) {
       cells[id] = cell;
-      cellsUnmount[id] = unmount;
     },
     removeCell(id) {
       delete cells[id];
-      cellsUnmount[id]();
-      delete cellsUnmount[id];
     },
-    add(component) {
+    add(component, unmount) {
       (async () => {
         await rendered;
         components.push(component);
+        componentsUnmount.push(unmount);
         appRef.current.setComps(components);
       })();
     },
     remove(component) {
-      (async () => {
+      (async _appRef$current => {
         await rendered;
         const ix = components.indexOf(component);
         if (ix !== -1) {
+          var _componentsUnmount$ix;
+          (_componentsUnmount$ix = componentsUnmount[ix]) === null || _componentsUnmount$ix === void 0 || _componentsUnmount$ix.call(componentsUnmount);
           components.splice(ix, 1);
+          componentsUnmount.splice(ix, 1);
         }
-        appRef.current.setComps(components);
+        appRef === null || appRef === void 0 || (_appRef$current = appRef.current) === null || _appRef$current === void 0 || _appRef$current.setComps(components);
       })();
     },
     setMuiThemeName(themeName) {
@@ -11078,10 +11079,11 @@ function boot(_ref2) {
       })();
     },
     destroy() {
-      Object.keys(cellsUnmount).forEach(c => {
-        cellsUnmount[c]();
+      componentsUnmount.forEach(c => {
+        c && c();
       });
       modelStore.destroy();
+      root.unmount();
     }
   }, modelStore, selectionStore, appRef, rendered];
 }
@@ -12408,12 +12410,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: '18px'
     },
     // Highlight is added to labelText spans, which are created as children to original labelText,
     // when a search string is matched.
@@ -18383,7 +18385,7 @@ 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) : theme.getStyle("object.".concat(objectType), target, 'color'),
+    color: textProps.color && textProps.color.color !== 'none' ? theme.getColorPickerColor(textProps.color) : theme.getStyle("object.".concat(objectType), "title.".concat(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',
@@ -19233,7 +19235,7 @@ function More(_ref2) {
   })))))), CurrentItem);
 }
 
-const MIN_WIDTH$1 = 120;
+const MIN_WIDTH = 120;
 const MIN_WIDTH_MORE = 72;
 function getItems(layout) {
   if (!layout) {
@@ -19298,7 +19300,7 @@ function SelectedFields(_ref) {
       width
     } = containerRect;
     const maxWidth = Math.floor(width) - MIN_WIDTH_MORE;
-    const items = Math.floor(maxWidth / MIN_WIDTH$1);
+    const items = Math.floor(maxWidth / MIN_WIDTH);
     setMaxItems(items);
   }, [containerRect]);
   useEffect$1(() => {
@@ -19344,7 +19346,7 @@ function SelectedFields(_ref) {
     style: {
       position: 'relative',
       maxWidth: '240px',
-      minWidth: "".concat(MIN_WIDTH$1, "px"),
+      minWidth: "".concat(MIN_WIDTH, "px"),
       background: theme.palette.background.paper,
       borderRight: "1px solid ".concat(theme.palette.divider)
     }
@@ -19756,12 +19758,11 @@ class AutoSizer extends Component {
     super(...args);
     this.state = {
       height: this.props.defaultHeight || 0,
-      scaledHeight: this.props.defaultHeight || 0,
-      scaledWidth: this.props.defaultWidth || 0,
       width: this.props.defaultWidth || 0
     };
     this._autoSizer = null;
     this._detectElementResize = null;
+    this._didLogDeprecationWarning = false;
     this._parentNode = null;
     this._resizeObserver = null;
     this._timeoutId = null;
@@ -19783,23 +19784,32 @@ class AutoSizer extends Component {
         const paddingTop = parseFloat(style.paddingTop || "0");
         const paddingBottom = parseFloat(style.paddingBottom || "0");
         const rect = this._parentNode.getBoundingClientRect();
-        const scaledHeight = rect.height - paddingTop - paddingBottom;
-        const scaledWidth = rect.width - paddingLeft - paddingRight;
-        const height = this._parentNode.offsetHeight - paddingTop - paddingBottom;
-        const width = this._parentNode.offsetWidth - paddingLeft - paddingRight;
-        if (!disableHeight && (this.state.height !== height || this.state.scaledHeight !== scaledHeight) || !disableWidth && (this.state.width !== width || this.state.scaledWidth !== scaledWidth)) {
+        const height = rect.height - paddingTop - paddingBottom;
+        const width = rect.width - paddingLeft - paddingRight;
+        if (!disableHeight && this.state.height !== height || !disableWidth && this.state.width !== width) {
           this.setState({
             height,
-            width,
-            scaledHeight,
-            scaledWidth
+            width
           });
+          const maybeLogDeprecationWarning = () => {
+            if (!this._didLogDeprecationWarning) {
+              this._didLogDeprecationWarning = true;
+              console.warn("scaledWidth and scaledHeight parameters have been deprecated; use width and height instead");
+            }
+          };
           if (typeof onResize === "function") {
             onResize({
               height,
-              scaledHeight,
-              scaledWidth,
-              width
+              width,
+              // TODO Remove these params in the next major release
+              get scaledHeight() {
+                maybeLogDeprecationWarning();
+                return height;
+              },
+              get scaledWidth() {
+                maybeLogDeprecationWarning();
+                return width;
+              }
             });
           }
         }
@@ -19869,8 +19879,6 @@ class AutoSizer extends Component {
     } = this.props;
     const {
       height,
-      scaledHeight,
-      scaledWidth,
       width
     } = this.state;
 
@@ -19891,7 +19899,9 @@ class AutoSizer extends Component {
       }
       outerStyle.height = 0;
       childParams.height = height;
-      childParams.scaledHeight = scaledHeight;
+
+      // TODO Remove this in the next major release
+      childParams.scaledHeight = height;
     }
     if (!disableWidth) {
       if (width === 0) {
@@ -19899,7 +19909,9 @@ class AutoSizer extends Component {
       }
       outerStyle.width = 0;
       childParams.width = width;
-      childParams.scaledWidth = scaledWidth;
+
+      // TODO Remove this in the next major release
+      childParams.scaledWidth = width;
     }
     if (doNotBailOutOnEmptyChildren) {
       bailoutOnChildren = false;
@@ -20995,26 +21007,34 @@ function useExistingModel(_ref) {
     throw new Error("Option \"".concat(usedForbiddenOptions.join(', '), "\" is not applicable for existing objects."));
   }
   useEffect$1(() => {
-    function storeModel(m) {
-      if (modelStore.get(m.id)) {
-        return;
-      }
-      // Nebula gets the model from this store in some of its
-      // core functions, so it must always be stored here.
-      modelStore.set(m.id, m);
-      m.once('closed', () => {
-        modelStore.clear(m.id);
-      });
-    }
+    let isCleaned = false;
+    let cleanupFn = () => {};
     async function fetchObject(modelId) {
       const m = modelStore.get(modelId) || (await app.getObject(modelId));
       return m;
     }
-    const p = Promise.resolve(sessionModel || fetchObject(qId));
-    p.then(m => {
-      storeModel(m);
+    async function fetchModel() {
+      const m = await Promise.resolve(sessionModel || fetchObject(qId));
+      if (isCleaned) {
+        return;
+      }
+      if (!modelStore.get(m.id)) {
+        modelStore.set(m.id, m);
+        const onClosed = () => {
+          modelStore.clear(m.id);
+        };
+        m.once('closed', onClosed);
+        cleanupFn = () => {
+          m.removeListener('closed', onClosed);
+        };
+      }
       setModel(m);
-    });
+    }
+    fetchModel();
+    return () => {
+      isCleaned = true;
+      cleanupFn();
+    };
   }, []);
   return model;
 }
@@ -23068,11 +23088,6 @@ const StyledGrid$1 = styled(Grid)(_ref => {
     }
   };
 });
-const ITEM_WIDTH = 32;
-const ITEM_SPACING = 4;
-const DIVIDER = 1;
-const NUMBER_OF_ITEMS = 6;
-const MIN_WIDTH = (ITEM_WIDTH + ITEM_SPACING) * NUMBER_OF_ITEMS + DIVIDER + ITEM_SPACING;
 
 /**
  * @interface
@@ -23106,8 +23121,6 @@ function Header(_ref2) {
   const showSubtitle = layout.showTitles && !!layout.subtitle;
   const showInSelectionActions = layout.qSelectionInfo && layout.qSelectionInfo.qInSelections;
   const [actions, setActions] = useState$1([]);
-  const [containerRef, containerRect] = useRect$1();
-  const [shouldShowPopoverToolbar, setShouldShowPopoverToolbar] = useState$1(false);
   useEffect$1(() => {
     if (!sn || !sn.component || !sn.component.isHooked) {
       return;
@@ -23116,19 +23129,11 @@ function Header(_ref2) {
       setActions([...a, ...(sn && sn.selectionToolbar && sn.selectionToolbar.items || [])]);
     });
   }, [sn]);
-  useEffect$1(() => {
-    if (!containerRect) return;
-    const {
-      width
-    } = containerRect;
-    setShouldShowPopoverToolbar(width < MIN_WIDTH);
-  }, [containerRect]);
   const showTitles = showTitle || showSubtitle;
   const cls = [classes$1.containerStyle, ...(showTitles ? [classes$1.containerTitleStyle] : [])];
-  const showPopoverToolbar = (hovering || showInSelectionActions) && (shouldShowPopoverToolbar || !showTitles);
-  const showToolbar = showTitles && !showPopoverToolbar && !shouldShowPopoverToolbar;
+  const showPopoverToolbar = hovering || showInSelectionActions;
   const Toolbar = /*#__PURE__*/React__default.createElement(ActionsToolbar, {
-    show: showToolbar,
+    show: false,
     selections: {
       show: showInSelectionActions,
       api: sn.component.selections,
@@ -23143,7 +23148,6 @@ function Header(_ref2) {
     layout: layout
   });
   return /*#__PURE__*/React__default.createElement(StyledGrid$1, {
-    ref: containerRef,
     item: true,
     container: true,
     wrap: "nowrap",
@@ -23397,20 +23401,46 @@ function Supernova(_ref) {
   }));
 }
 
+const THEME_OBJECT_TYPE_MAP = {
+  linechart: 'lineChart',
+  barchart: 'barChart',
+  combochart: 'comboChart',
+  scatterplot: 'scatterPlot',
+  piechart: 'pieChart',
+  straightable: 'straightTable',
+  pivottable: 'pivotTable',
+  table: 'straightTable',
+  'pivot-table': 'pivotTable',
+  listbox: 'listBox',
+  referenceline: 'referenceLine',
+  datacolors: 'dataColors',
+  'text-image': 'textImage',
+  boxplot: 'boxPlot',
+  map: 'mapChart',
+  mapchart: 'mapChart',
+  bulletchart: 'bulletChart'
+};
+const getThemeObjectType = visualization => {
+  if (THEME_OBJECT_TYPE_MAP[visualization.toLowerCase()]) {
+    return THEME_OBJECT_TYPE_MAP[visualization.toLowerCase()];
+  }
+  return visualization;
+};
 const useStyling = (layout, theme, app, themeName) => {
   const styling = useMemo$1(() => {
     if (layout && theme) {
       const generalComp = layout.components ? layout.components.find(comp => comp.key === 'general') : null;
+      const objectType = getThemeObjectType(layout.visualization);
       const titleStyles = {
-        main: resolveTextStyle(generalComp, 'main', theme, layout.visualization),
-        footer: resolveTextStyle(generalComp, 'footer', theme, layout.visualization),
-        subTitle: resolveTextStyle(generalComp, 'subTitle', theme, layout.visualization)
+        main: resolveTextStyle(generalComp, 'main', theme, objectType),
+        footer: resolveTextStyle(generalComp, 'footer', theme, objectType),
+        subTitle: resolveTextStyle(generalComp, 'subTitle', theme, objectType)
       };
-      const bgColor = resolveBgColor(generalComp, theme, layout.visualization);
+      const bgColor = resolveBgColor(generalComp, theme, objectType);
       const bgImage = resolveBgImage(generalComp, app);
-      const border = resolveBorder(generalComp, theme, layout.visualization);
-      const borderRadius = resolveBorderRadius(generalComp, theme, layout.visualization);
-      const boxShadow = resolveBoxShadow(generalComp, theme, layout.visualization);
+      const border = resolveBorder(generalComp, theme, objectType);
+      const borderRadius = resolveBorderRadius(generalComp, theme, objectType);
+      const boxShadow = resolveBoxShadow(generalComp, theme, objectType);
       return {
         titleStyles,
         bgColor,
@@ -24173,9 +24203,9 @@ function glue$1(_ref) {
     model.removeListener('closed', unmount);
   };
   model.on('closed', unmount);
-  root.add(portal);
+  root.add(portal, unmount);
   // Cannot use model.id as it is not unique in a given mashup
-  root.addCell(currentId, cellRef, unmount);
+  root.addCell(currentId, cellRef);
   return [unmount, cellRef];
 }
 
@@ -27202,6 +27232,7 @@ function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initial
     style.boxSizing = 'border-box';
     style.padding = '4px';
   }
+  const emitter = new EventEmitter();
   return /*#__PURE__*/React__default.createElement("div", {
     style: style,
     key: cell.model.id
@@ -27214,6 +27245,7 @@ function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initial
     initialSnPlugins: initialSnPlugins,
     initialError: initialError,
     onMount: onMount,
+    emitter: emitter,
     navigation: navigation,
     onError: onError
   }));
@@ -27410,7 +27442,7 @@ function glue(_ref) {
     onError: onError
   }), element, model.id);
   navigation.setSheetRef(sheetRef);
-  root.add(portal);
+  root.add(portal, unmount);
   return [unmount, sheetRef];
 }