@nebula.js/stardust 4.8.0 → 4.9.0

package/core/esm/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.
 */
@@ -708,26 +708,26 @@ var runtime = {exports: {}};
   }
 })(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);
@@ -8551,7 +8551,7 @@ function create$3(definition) {
   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', ''));
 });
@@ -8812,7 +8812,7 @@ function boot(_ref2) {
   const appRef = React__default.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) {
@@ -10015,6 +10015,7 @@ const barWithCheckboxLeftPadPx = 29;
 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 => {
@@ -10689,7 +10690,8 @@ function getGridItemSizes(_ref) {
   let {
     dataLayout,
     layoutOrder,
-    itemPadding
+    itemPadding,
+    fillHeight
   } = _ref;
   // Simulate margin/padding by making the item smaller than its container.
   if (dataLayout === 'singleColumn') {
@@ -10701,14 +10703,14 @@ function getGridItemSizes(_ref) {
   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
@@ -10719,21 +10721,23 @@ function getGridItemSizes(_ref) {
 }
 
 const ItemGrid = styled$1(Grid, {
-  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
     })
@@ -11174,7 +11178,8 @@ function RowColumn(_ref) {
     showSearch,
     isModal,
     contentFontStyle,
-    styles
+    styles,
+    fillHeight
   } = data;
   const {
     dense = false,
@@ -11202,6 +11207,7 @@ function RowColumn(_ref) {
     }
     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
@@ -11338,7 +11344,8 @@ function RowColumn(_ref) {
     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__default.createElement(Histogram, {
     qFrequency: cell === null || cell === void 0 ? void 0 : cell.qFrequency,
     histogram: histogram,
@@ -12236,7 +12243,7 @@ function createListComponent(_ref) {
           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
           };
@@ -12978,6 +12985,7 @@ function getListBoxComponents(_ref) {
     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({
@@ -13011,7 +13019,8 @@ function getListBoxComponents(_ref) {
     translator,
     showSearch,
     isModal,
-    styles
+    styles,
+    fillHeight
   });
   const List = _ref2 => {
     let {
@@ -13208,6 +13217,21 @@ function getMeasureText(layoutOrNumber) {
   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,
@@ -13263,14 +13287,10 @@ function useListSizes(_ref) {
   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).
@@ -13279,7 +13299,7 @@ function useListSizes(_ref) {
       overflowStyling = {
         overflowX: 'hidden'
       };
-      containerWidth += itemPadding * 2;
+      containerWidth += GRID_ITEM_PADDING * 2;
       ({
         rowCount,
         columnWidth,
@@ -13334,7 +13354,7 @@ function useListSizes(_ref) {
       row: maxRowCount,
       column: maxColumnCount
     },
-    itemPadding,
+    itemPadding: GRID_ITEM_PADDING,
     textWidth,
     freqMinWidth,
     freqMaxWidth
@@ -19153,6 +19173,33 @@ function isDirectQueryEnabled(_ref) {
   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"),
@@ -19231,7 +19278,7 @@ const isModal = _ref4 => {
   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
@@ -19457,10 +19504,12 @@ function ListBoxInline(_ref5) {
 
   // 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__default.createElement(SearchIcon, {
     title: translator.get('Listbox.Search'),
     size: "large",
@@ -19500,6 +19549,7 @@ function ListBoxInline(_ref5) {
   if (isInvalid) {
     renderedCallback === null || renderedCallback === void 0 || renderedCallback();
   }
+  const listBoxMinHeight = showToolbarWithTitle ? DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH : 0;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
     direction: direction
   }, getActionToolbarProps(true))), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
@@ -19565,10 +19615,8 @@ function ListBoxInline(_ref5) {
     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__default.createElement(Grid, {
@@ -21321,7 +21369,8 @@ const convertTo = async _ref2 => {
     model,
     cellRef,
     newType,
-    properties
+    properties,
+    viewDataMode = false
   } = _ref2;
   const propertyTree = properties ? {
     qProperty: properties
@@ -21342,7 +21391,8 @@ const convertTo = async _ref2 => {
   }
   const exportFormat = exportProperties({
     propertyTree,
-    hypercubePath: helpers.getHypercubePath(sourceQae)
+    hypercubePath: helpers.getHypercubePath(sourceQae),
+    viewDataMode
   });
   const initial = utils.getValue(targetQae, 'properties.initial', {});
   const initialProperties = _objectSpread2({
@@ -21355,7 +21405,8 @@ const convertTo = async _ref2 => {
     exportFormat,
     initialProperties,
     dataDefinition: utils.getValue(targetQae, 'data.targets.0.', {}),
-    hypercubePath: helpers.getHypercubePath(targetQae)
+    hypercubePath: helpers.getHypercubePath(targetQae),
+    viewDataMode
   });
   return newPropertyTree;
 };
@@ -22374,7 +22425,7 @@ const loadType = async _ref5 => {
 const Cell = forwardRef((_ref6, ref) => {
   let {
     halo,
-    model,
+    model: inputModel,
     initialSnOptions,
     initialSnPlugins,
     initialError,
@@ -22399,6 +22450,7 @@ const Cell = forwardRef((_ref6, ref) => {
   const theme = useTheme$1();
   const [cellRef, cellRect, cellNode] = useRect$1();
   const [state, dispatch] = useReducer(contentReducer, initialState(initialError));
+  const [model, setModel] = useState$1(inputModel);
   const [layout, {
     validating,
     canCancel,
@@ -22552,6 +22604,7 @@ const Cell = forwardRef((_ref6, ref) => {
     },
     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') {
@@ -25037,6 +25090,7 @@ function viz() {
   let mountedReference = null;
   let onMount = null;
   let onRender = null;
+  let viewDataObjectId;
   const mounted = new Promise(resolve => {
     onMount = resolve;
   });
@@ -25174,6 +25228,49 @@ function viz() {
       });
       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
@@ -25308,7 +25405,6 @@ function viz() {
     // setOptions() {}, // applied soft patch
     // resize() {},
     // show() {},
-    // toggleDataView() {},
   };
 
   return api;
@@ -28120,7 +28216,13 @@ const DEFAULT_CONTEXT = /** @lends Context */{
   /** @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;