@nebula.js/stardust 4.8.0 → 4.8.1

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.8.0
+* @nebula.js/stardust v4.8.1
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -8551,7 +8551,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "f910" ;
+const NEBULA_VERSION_HASH = "cca9" ;
 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.8.1" );
   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, {