@nebula.js/stardust 4.8.0 → 4.9.0

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.8.0
+* @nebula.js/stardust v4.9.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -722,26 +722,26 @@
 	  }
 	})(runtime);
 
-	function ownKeys(object, enumerableOnly) {
-	  var keys = Object.keys(object);
+	function ownKeys(e, r) {
+	  var t = Object.keys(e);
 	  if (Object.getOwnPropertySymbols) {
-	    var symbols = Object.getOwnPropertySymbols(object);
-	    enumerableOnly && (symbols = symbols.filter(function (sym) {
-	      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-	    })), keys.push.apply(keys, symbols);
-	  }
-	  return keys;
-	}
-	function _objectSpread2(target) {
-	  for (var i = 1; i < arguments.length; i++) {
-	    var source = null != arguments[i] ? arguments[i] : {};
-	    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-	      _defineProperty(target, key, source[key]);
-	    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-	      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+	    var o = Object.getOwnPropertySymbols(e);
+	    r && (o = o.filter(function (r) {
+	      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+	    })), t.push.apply(t, o);
+	  }
+	  return t;
+	}
+	function _objectSpread2(e) {
+	  for (var r = 1; r < arguments.length; r++) {
+	    var t = null != arguments[r] ? arguments[r] : {};
+	    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+	      _defineProperty(e, r, t[r]);
+	    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+	      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
 	    });
 	  }
-	  return target;
+	  return e;
 	}
 	function _defineProperty(obj, key, value) {
 	  key = _toPropertyKey(key);
@@ -11820,7 +11820,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "f910" ;
+	const NEBULA_VERSION_HASH = "8934" ;
 	ClassNameGenerator$1.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -12081,7 +12081,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "4.8.0" );
+	  element.setAttribute('data-nebulajs-version', "4.9.0" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  if (context) {
@@ -21984,6 +21984,7 @@
 	const GRID_ROW_HEIGHT = 32;
 	const LIST_ROW_HEIGHT = 29;
 	const DENSE_ROW_HEIGHT = 20; // same for both list and grid in dense mode
+	const GRID_ITEM_PADDING = 4;
 
 	const joinClassNames = namesArray => namesArray.filter(c => !!c).join(' ').trim();
 	const getBarWidth = _ref => {
@@ -22658,7 +22659,8 @@
 	  let {
 	    dataLayout,
 	    layoutOrder,
-	    itemPadding
+	    itemPadding,
+	    fillHeight
 	  } = _ref;
 	  // Simulate margin/padding by making the item smaller than its container.
 	  if (dataLayout === 'singleColumn') {
@@ -22670,14 +22672,14 @@
 	  switch (layoutOrder) {
 	    case 'row':
 	      return {
-	        height: "calc(100% - ".concat(itemPadding, "px)"),
+	        height: fillHeight ? '100%' : "calc(100% - ".concat(itemPadding, "px)"),
 	        width: "calc(100% - ".concat(2 * itemPadding, "px)"),
 	        position: 'absolute',
 	        left: 4
 	      };
 	    case 'column':
 	      return {
-	        height: "calc(100% - ".concat(itemPadding, "px)"),
+	        height: fillHeight ? '100%' : "calc(100% - ".concat(itemPadding, "px)"),
 	        width: "calc(100% - ".concat(2 * itemPadding, "px)"),
 	        position: 'absolute',
 	        left: 4
@@ -22688,21 +22690,23 @@
 	}
 
 	const ItemGrid = styled$1(Grid$1, {
-	  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'cellPaddingRight', 'direction'].includes(prop)
+	  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'cellPaddingRight', 'direction', 'fillHeight'].includes(prop)
 	})(_ref => {
 	  let {
 	    dataLayout,
 	    layoutOrder,
 	    itemPadding,
 	    cellPaddingRight,
-	    direction
+	    direction,
+	    fillHeight
 	  } = _ref;
 	  const att = "padding".concat(direction === 'rtl' ? 'Left' : 'Right');
 	  return {
 	    ["&.".concat(rowColClasses.fieldRoot)]: _objectSpread2(_objectSpread2({}, getGridItemSizes({
 	      dataLayout,
 	      layoutOrder,
-	      itemPadding
+	      itemPadding,
+	      fillHeight
 	    })), {}, {
 	      [att]: cellPaddingRight ? '8px' : undefined
 	    })
@@ -23143,7 +23147,8 @@
 	    showSearch,
 	    isModal,
 	    contentFontStyle,
-	    styles
+	    styles,
+	    fillHeight
 	  } = data;
 	  const {
 	    dense = false,
@@ -23171,6 +23176,7 @@
 	    }
 	    const padding = 0;
 	    styleOverrides = _objectSpread2(_objectSpread2({}, style), {}, {
+	      height: fillHeight ? '100%' : style.height,
 	      left: padding + (columnIndex === 0 ? style.left : Number(style.left) + columnIndex * padding),
 	      // right: columnIndex === columnCount ? style.right : Number(style.right) + columnIndex * padding,
 	      top: rowIndex === 0 ? style.top : Number(style.top) + rowIndex * padding
@@ -23307,7 +23313,8 @@
 	    onContextMenu: preventContextMenu,
 	    tabIndex: isFirstElement && keyboard.innerTabStops ? 0 : -1,
 	    "data-n": cell === null || cell === void 0 ? void 0 : cell.qElemNumber,
-	    direction: direction
+	    direction: direction,
+	    fillHeight: fillHeight
 	  }, (cell === null || cell === void 0 ? void 0 : cell.qFrequency) && /*#__PURE__*/React.createElement(Histogram, {
 	    qFrequency: cell === null || cell === void 0 ? void 0 : cell.qFrequency,
 	    histogram: histogram,
@@ -24205,7 +24212,7 @@
 	          scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
 	          return {
 	            isScrolling: true,
-	            scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
+	            scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
 	            scrollOffset: scrollOffset,
 	            scrollUpdateWasRequested: false
 	          };
@@ -24947,6 +24954,7 @@
 	    className: classes$9.styledScrollbars
 	  };
 	  const isLocked = layout === null || layout === void 0 ? void 0 : layout.qListObject.qDimensionInfo.qLocked;
+	  const fillHeight = listHeight <= itemHeight;
 
 	  // Item data common for List and Grid.
 	  const commonItemData = _objectSpread2(_objectSpread2({
@@ -24980,7 +24988,8 @@
 	    translator,
 	    showSearch,
 	    isModal,
-	    styles
+	    styles,
+	    fillHeight
 	  });
 	  const List = _ref2 => {
 	    let {
@@ -25177,6 +25186,21 @@
 	  return measureString;
 	}
 
+	function getItemHeight(_ref) {
+	  let {
+	    isGridMode,
+	    dense
+	  } = _ref;
+	  const normalItemHeight = isGridMode ? GRID_ROW_HEIGHT : LIST_ROW_HEIGHT;
+	  let itemHeight = dense ? DENSE_ROW_HEIGHT : normalItemHeight;
+	  if (isGridMode) {
+	    // Emulate a margin between items using padding, since the list library
+	    // needs an explicit row height and cannot handle margins.
+	    itemHeight += GRID_ITEM_PADDING;
+	  }
+	  return itemHeight;
+	}
+
 	function useListSizes(_ref) {
 	  let {
 	    layout,
@@ -25232,14 +25256,10 @@
 	  let columnWidth;
 	  let rowCount;
 	  const isGridMode = dataLayout === 'grid';
-	  const itemPadding = 4;
-	  const normalItemHeight = isGridMode ? GRID_ROW_HEIGHT : LIST_ROW_HEIGHT;
-	  let itemHeight = dense ? DENSE_ROW_HEIGHT : normalItemHeight;
-	  if (isGridMode) {
-	    // Emulate a margin between items using padding, since the list library
-	    // needs an explicit row height and cannot handle margins.
-	    itemHeight += itemPadding;
-	  }
+	  const itemHeight = getItemHeight({
+	    isGridMode,
+	    dense
+	  });
 	  const listHeight = height !== null && height !== void 0 ? height : 8 * itemHeight;
 	  if (layoutOrder) {
 	    // Modify container width to achieve the exact design with 8px margins on each side (left and right).
@@ -25248,7 +25268,7 @@
 	      overflowStyling = {
 	        overflowX: 'hidden'
 	      };
-	      containerWidth += itemPadding * 2;
+	      containerWidth += GRID_ITEM_PADDING * 2;
 	      ({
 	        rowCount,
 	        columnWidth,
@@ -25303,7 +25323,7 @@
 	      row: maxRowCount,
 	      column: maxColumnCount
 	    },
-	    itemPadding,
+	    itemPadding: GRID_ITEM_PADDING,
 	    textWidth,
 	    freqMinWidth,
 	    freqMaxWidth
@@ -30972,6 +30992,33 @@
 	  return isDQ;
 	}
 
+	function getContainerPadding(_ref) {
+	  let {
+	    isGridMode,
+	    dense,
+	    height,
+	    layoutOrder
+	  } = _ref;
+	  let containerPadding;
+	  if (isGridMode) {
+	    const itemHeight = getItemHeight({
+	      isGridMode,
+	      dense
+	    });
+	    let paddingY;
+	    if (itemHeight > height) {
+	      paddingY = '0px';
+	    } else {
+	      paddingY = '2px';
+	    }
+	    containerPadding = layoutOrder === 'row' ? "".concat(paddingY, " 4px") : "".concat(paddingY, " 6px ").concat(paddingY, " 4px");
+	  } else {
+	    containerPadding = undefined; // to prevent overriding any default padding
+	  }
+
+	  return containerPadding;
+	}
+
 	const PREFIX$4 = 'ListBoxInline';
 	const classes$4 = {
 	  listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader"),
@@ -31050,7 +31097,7 @@
 	  return (_app$isInModalSelecti = (_app$isInModalSelecti2 = app.isInModalSelection) === null || _app$isInModalSelecti2 === void 0 ? void 0 : _app$isInModalSelecti2.call(app)) !== null && _app$isInModalSelecti !== void 0 ? _app$isInModalSelecti : appSelections.isInModal();
 	};
 	function ListBoxInline(_ref5) {
-	  var _layout$qListObject, _layout$qListObject2, _layoutOptions$dense;
+	  var _layout$qListObject, _layout$qListObject2, _layoutOptions$dense, _containerRef$current;
 	  let {
 	    options,
 	    layout
@@ -31276,10 +31323,12 @@
 
 	  // Add a container padding for grid mode to harmonize with the grid item margins (should sum to 8px).
 	  const isGridMode = (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.dataLayout) === 'grid';
-	  let containerPadding;
-	  if (isGridMode) {
-	    containerPadding = layoutOptions.layoutOrder === 'row' ? '2px 4px' : '2px 6px 2px 4px';
-	  }
+	  const containerPadding = getContainerPadding({
+	    isGridMode,
+	    dense,
+	    height: (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight,
+	    layoutOrder: layoutOptions.layoutOrder
+	  });
 	  const searchIconComp = constraints !== null && constraints !== void 0 && constraints.active ? /*#__PURE__*/React.createElement(SearchIcon, {
 	    title: translator.get('Listbox.Search'),
 	    size: "large",
@@ -31319,6 +31368,7 @@
 	  if (isInvalid) {
 	    renderedCallback === null || renderedCallback === void 0 || renderedCallback();
 	  }
+	  const listBoxMinHeight = showToolbarWithTitle ? DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH : 0;
 	  return /*#__PURE__*/React.createElement(React.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React.createElement(ActionsToolbar, _extends$7({
 	    direction: direction
 	  }, getActionToolbarProps(true))), /*#__PURE__*/React.createElement(StyledGrid$3, {
@@ -31384,10 +31434,8 @@
 	    item: true,
 	    container: true,
 	    direction: "column",
-	    style: {
-	      height: '100%',
-	      minHeight: DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH
-	    },
+	    height: "100%",
+	    minHeight: listBoxMinHeight,
 	    role: "region",
 	    "aria-label": translator.get('Listbox.ResultFilterLabel')
 	  }, /*#__PURE__*/React.createElement(Grid$1, {
@@ -33140,7 +33188,8 @@
 	    model,
 	    cellRef,
 	    newType,
-	    properties
+	    properties,
+	    viewDataMode = false
 	  } = _ref2;
 	  const propertyTree = properties ? {
 	    qProperty: properties
@@ -33161,7 +33210,8 @@
 	  }
 	  const exportFormat = exportProperties({
 	    propertyTree,
-	    hypercubePath: helpers.getHypercubePath(sourceQae)
+	    hypercubePath: helpers.getHypercubePath(sourceQae),
+	    viewDataMode
 	  });
 	  const initial = utils.getValue(targetQae, 'properties.initial', {});
 	  const initialProperties = _objectSpread2({
@@ -33174,7 +33224,8 @@
 	    exportFormat,
 	    initialProperties,
 	    dataDefinition: utils.getValue(targetQae, 'data.targets.0.', {}),
-	    hypercubePath: helpers.getHypercubePath(targetQae)
+	    hypercubePath: helpers.getHypercubePath(targetQae),
+	    viewDataMode
 	  });
 	  return newPropertyTree;
 	};
@@ -34193,7 +34244,7 @@
 	const Cell = reactExports.forwardRef((_ref6, ref) => {
 	  let {
 	    halo,
-	    model,
+	    model: inputModel,
 	    initialSnOptions,
 	    initialSnPlugins,
 	    initialError,
@@ -34218,6 +34269,7 @@
 	  const theme = useTheme$1();
 	  const [cellRef, cellRect, cellNode] = useRect$1();
 	  const [state, dispatch] = reactExports.useReducer(contentReducer, initialState(initialError));
+	  const [model, setModel] = reactExports.useState(inputModel);
 	  const [layout, {
 	    validating,
 	    canCancel,
@@ -34371,6 +34423,7 @@
 	    },
 	    setSnOptions,
 	    setSnPlugins,
+	    setModel,
 	    getImperativeHandle() {
 	      var _state$sn;
 	      if ((_state$sn = state.sn) !== null && _state$sn !== void 0 && _state$sn.component && typeof state.sn.component.getImperativeHandle === 'function') {
@@ -36856,6 +36909,7 @@
 	  let mountedReference = null;
 	  let onMount = null;
 	  let onRender = null;
+	  let viewDataObjectId;
 	  const mounted = new Promise(resolve => {
 	    onMount = resolve;
 	  });
@@ -36993,6 +37047,49 @@
 	      });
 	      return propertyTree;
 	    },
+	    /**
+	     * Toggles the chart to a data view of the chart.
+	     *
+	     * The chart will be toggled to the type defined in the nebula context (dataViewType).
+	     *
+	     * The default dataViewType for nebula is sn-table. The specified chart type needs to be registered as well, in order to make it possible to render the data view.
+	     *
+	     * @experimental
+	     * @since 4.9.0
+	     * @param {boolean=} showDataView - If included, forces the chart into a specific state. True will show data view, and false will show the original chart. If not included it will always toggle between the two views.
+	     */
+	    async toggleDataView(showDataView) {
+	      let newModel;
+	      if (!viewDataObjectId && showDataView !== false) {
+	        let newType = halo.config.context.dataViewType;
+	        const oldProperties = await model.getEffectiveProperties();
+	        // Check if dataViewType is registered. Otherwise potentially fallback to table
+	        if (!halo.types.getSupportedVersion(newType)) {
+	          if (halo.types.getSupportedVersion('table')) {
+	            newType = 'table';
+	          } else {
+	            throw new Error('No data view type registered');
+	          }
+	        }
+	        const propertyTree = await convertTo({
+	          halo,
+	          model,
+	          cellRef,
+	          newType,
+	          properties: oldProperties,
+	          viewDataMode: true
+	        });
+	        newModel = await halo.app.createSessionObject(propertyTree.qProperty);
+	        viewDataObjectId = newModel.id;
+	      } else if (viewDataObjectId && showDataView !== true) {
+	        newModel = model;
+	        await halo.app.destroySessionObject(viewDataObjectId);
+	        viewDataObjectId = undefined;
+	      }
+	      if (newModel) {
+	        cellRef.current.setModel(newModel);
+	      }
+	    },
 	    /**
 	     * Listens to custom events from inside the visualization. See useEmitter
 	     * @experimental
@@ -37127,7 +37224,6 @@
 	    // setOptions() {}, // applied soft patch
 	    // resize() {},
 	    // show() {},
-	    // toggleDataView() {},
 	  };
 
 	  return api;
@@ -39939,7 +40035,13 @@
 	  /** @type {boolean=} */
 	  keyboardNavigation: false,
 	  /** @type {boolean=} */
-	  disableCellPadding: false
+	  disableCellPadding: false,
+	  /**
+	   * Type used for toggling to the data view (toggleDataView)
+	   * This type need to be registered as well
+	   * @type {string=}
+	   * */
+	  dataViewType: 'sn-table'
 	};
 	DEFAULT_CONFIG.context = DEFAULT_CONTEXT;