@nebula.js/stardust 4.8.0 → 4.8.1

package/dist/stardust.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.
 */
@@ -11820,7 +11820,7 @@
 	  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', ''));
 	});
@@ -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.8.1" );
 	  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, {