@nebula.js/stardust 4.0.0-alpha.1 → 4.0.0-alpha.3

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.0.0-alpha.1
+* @nebula.js/stardust v4.0.0-alpha.3
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -1040,6 +1040,26 @@
 			"zh-TW": "解除"
 		}
 	};
+	var Listbox_DrillDown = {
+		id: "Listbox.DrillDown",
+		locale: {
+			"de-DE": "Drilldown-Dimension",
+			"en-US": "Drill-down dimension",
+			"es-ES": "Dimensión jerárquica",
+			"fr-FR": "Dimension hiérarchique",
+			"it-IT": "Dimensione drill-down",
+			"ja-JP": "軸のドリルダウン",
+			"ko-KR": "드릴다운 차원",
+			"nl-NL": "Drill-downdimensie",
+			"pl-PL": "Wymiar hierarchiczny",
+			"pt-BR": "Dimensão de detalhamento",
+			"ru-RU": "Детализированное измерение",
+			"sv-SE": "Hierarkisk dimension",
+			"tr-TR": "Detaya inme boyutu",
+			"zh-CN": "钻取维度",
+			"zh-TW": "向下探查維度"
+		}
+	};
 	var Listbox_ItemsOverflow = {
 		id: "Listbox.ItemsOverflow",
 		locale: {
@@ -1680,17 +1700,12 @@
 			"zh-TW": "不符計算條件"
 		}
 	};
-	var Listbox_DrillDown = {
-		id: "Listbox.DrillDown",
-		locale: {
-			"en-US": "Drill-down dimension"
-		}
-	};
 	var all = {
 		Cancel: Cancel$1,
 		CurrentSelections_All: CurrentSelections_All,
 		CurrentSelections_Of: CurrentSelections_Of,
 		Listbox_Dismiss: Listbox_Dismiss,
+		Listbox_DrillDown: Listbox_DrillDown,
 		Listbox_ItemsOverflow: Listbox_ItemsOverflow,
 		Listbox_Lock: Listbox_Lock,
 		Listbox_NoMatchesForYourTerms: Listbox_NoMatchesForYourTerms,
@@ -1722,8 +1737,7 @@
 		Visualization_Invalid_Dimension: Visualization_Invalid_Dimension,
 		Visualization_Invalid_Measure: Visualization_Invalid_Measure,
 		Visualization_LayoutError: Visualization_LayoutError,
-		Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition,
-		Listbox_DrillDown: Listbox_DrillDown
+		Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition
 	};
 
 	function appLocaleFn(language) {
@@ -2804,9 +2818,34 @@
 		color: color$1
 	};
 
+	var object = {
+		listBox: {
+			backgroundColor: "#ffffff",
+			title: {
+				main: {
+					color: "#404040",
+					fontSize: "14px",
+					fontWeight: "bold"
+				}
+			},
+			content: {
+				color: "#404040",
+				fontSize: "12px"
+			}
+		}
+	};
+	var baseInheritRawJSON = {
+		object: object
+	};
+
+	/* eslint no-underscore-dangle:0 */
 	function setTheme(t, resolve) {
 	  const colorRawJSON = t.type === 'dark' ? darkRawJSON : lightRawJSON;
-	  const root = extend$1(true, {}, baseRawJSON, colorRawJSON);
+	  let baseInherit = baseInheritRawJSON;
+	  if (t._inherit === false || t._inherit === 'false') {
+	    baseInherit = {};
+	  }
+	  const root = extend$1(true, {}, baseRawJSON, colorRawJSON, baseInherit);
 	  // avoid merging known array objects as it could cause issues if they are of different types (pyramid vs class) or length
 	  const rawThemeJSON = extend$1(true, {}, root, {
 	    scales: null,
@@ -3450,15 +3489,21 @@
 	function appTheme() {
 	  let {
 	    themes = [],
+	    loadTheme,
 	    root
 	  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 	  const wrappedTheme = theme();
 	  const setTheme = async themeId => {
-	    const found = themes.filter(t => t.id === themeId)[0];
+	    let found = themes.filter(t => t.id === themeId)[0];
 	    let muiTheme = themeId === 'dark' ? 'dark' : 'light';
+	    if (!found && loadTheme) {
+	      found = {
+	        load: loadTheme
+	      };
+	    }
 	    if (found && found.load) {
 	      try {
-	        const raw = await Promise.race([found.load(), timed(LOAD_THEME_TIMEOUT, {
+	        const raw = await Promise.race([found.load(themeId), timed(LOAD_THEME_TIMEOUT, {
 	          __timedOut: true
 	        })]);
 	        if (raw.__timedOut) {
@@ -15354,7 +15399,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "f871" ;
+	const NEBULA_VERSION_HASH = "ee80" ;
 	ClassNameGenerator$1.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -15562,7 +15607,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.1" );
+	  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.3" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  const root = client.createRoot(element);
@@ -21911,6 +21956,8 @@
 	function getFieldKeyboardNavigation(_ref) {
 	  let {
 	    select,
+	    selectAll,
+	    onCtrlF,
 	    confirm,
 	    cancel,
 	    setScrollPosition,
@@ -21930,7 +21977,8 @@
 	    const {
 	      keyCode,
 	      shiftKey = false,
-	      ctrlKey = false
+	      ctrlKey = false,
+	      metaKey = false
 	    } = event.nativeEvent;
 	    switch (keyCode) {
 	      case KEYS.SHIFT:
@@ -21985,6 +22033,18 @@
 	        }
 	        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('end');
 	        break;
+	      case KEYS.A:
+	        if (ctrlKey || metaKey) {
+	          selectAll();
+	          break;
+	        }
+	        return;
+	      case KEYS.F:
+	        if (ctrlKey || metaKey) {
+	          onCtrlF();
+	          break;
+	        }
+	        return;
 	      default:
 	        return;
 	      // don't stop propagation since we want to outsource keydown to other handlers.
@@ -22011,15 +22071,29 @@
 	    constraints
 	  } = _ref2;
 	  const focusInsideListbox = element => {
-	    const fieldElement = element.querySelector('.search input, .value.selector, .value, .ActionsToolbar-* button');
+	    const fieldElement = element.querySelector('.search input, .value.selector, .value, .ActionsToolbar-item button');
 	    setKeyboardActive(true);
 	    if (fieldElement) {
 	      fieldElement.focus();
 	    }
 	  };
-	  const focusContainer = element => {
-	    setKeyboardActive(false);
-	    element.focus();
+	  const changeFocus = event => {
+	    var _event$target;
+	    if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.classList.contains('listbox-container')) {
+	      // Focus currently on a listbox
+	      // Esc on a list box should move the focus to its parent, i.e. a filter pane if any
+	      setKeyboardActive(false);
+	    } else {
+	      var _event$target2, _event$target3, _event$currentTarget, _event$currentTarget2;
+	      // Focus currently on a row
+	      // Esc on a row should move the focus to its parent, i.e. a listbox
+	      // First unfocus the row
+	      (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.setAttribute('tabIndex', '-1');
+	      (_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.blur();
+	      // Then focus the listbox
+	      (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.setAttribute('tabIndex', '0');
+	      (_event$currentTarget2 = event.currentTarget) === null || _event$currentTarget2 === void 0 ? void 0 : _event$currentTarget2.focus();
+	    }
 	  };
 	  const updateKeyScrollOnHover = newState => {
 	    if (hovering) {
@@ -22043,7 +22117,7 @@
 	        focusInsideListbox(event.currentTarget);
 	        break;
 	      case KEYS.ESCAPE:
-	        focusContainer(event.currentTarget);
+	        changeFocus(event);
 	        break;
 	      case KEYS.ARROW_UP:
 	        updateKeyScrollOnHover({
@@ -22055,6 +22129,10 @@
 	          down: 1
 	        });
 	        break;
+	      case KEYS.ARROW_LEFT:
+	      case KEYS.ARROW_RIGHT:
+	        return;
+	      // let it propagate to top-level
 	      case KEYS.PAGE_UP:
 	        updateKeyScrollOnHover({
 	          up: currentScrollIndex.stop - currentScrollIndex.start
@@ -22182,25 +22260,15 @@
 	const getBarWidth = _ref => {
 	  let {
 	    qFrequency,
-	    checkboxes,
 	    frequencyMax
 	  } = _ref;
 	  const freqStr = String(qFrequency);
 	  const isPercent = freqStr.substring(freqStr.length - 1) === '%';
 	  const freq = parseFloat(isPercent ? freqStr : qFrequency);
-	  const rightSlice = checkboxes ? "(".concat(barWithCheckboxLeftPadPx, "px + ").concat(barPadPx + barBorderWidthPx * 2, "px)") : "".concat(barPadPx * 2 + barBorderWidthPx * 2, "px");
 	  const width = isPercent ? freq : freq / frequencyMax * 100;
-	  return "calc(".concat(width, "% - ").concat(rightSlice, ")");
-	};
-	const getFrequencyText = _ref2 => {
-	  let {
-	    cell
-	  } = _ref2;
-	  if (cell) {
-	    return cell.qFrequency ? cell.qFrequency : frequencyTextNone;
-	  }
-	  return '';
+	  return "".concat(width, "%");
 	};
+	const getFrequencyText = qFrequency => qFrequency || frequencyTextNone;
 
 	const CELL_PADDING_LEFT = 9;
 	const ICON_WIDTH = 12;
@@ -22229,8 +22297,10 @@
 	  textOverflow: 'ellipsis',
 	  whiteSpace: 'nowrap'
 	};
+	const iconWidth = 24; // tick and lock icon width in px
+
 	const RowColRoot = styled$1('div', {
-	  shouldForwardProp: prop => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense', 'frequencyWidth'].includes(prop)
+	  shouldForwardProp: prop => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense', 'frequencyWidth', 'showIcon', 'checkboxes'].includes(prop)
 	})(_ref2 => {
 	  var _theme$listBox$conten, _theme$listBox, _theme$listBox$conten2, _theme$listBox$conten3, _theme$listBox2, _theme$listBox2$conte, _theme$listBox3, _theme$listBox3$conte, _theme$listBox4, _theme$listBox4$conte;
 	  let {
@@ -22239,7 +22309,9 @@
 	    isGridMode,
 	    isGridCol,
 	    dense,
-	    frequencyWidth
+	    frequencyWidth,
+	    showIcon,
+	    checkboxes
 	  } = _ref2;
 	  return {
 	    '&:focus': {
@@ -22248,6 +22320,14 @@
 	    '&:focus-visible': {
 	      outline: 'none'
 	    },
+	    '& .value': {
+	      '&:focus': {
+	        boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
+	      },
+	      '&:focus-visible': {
+	        outline: 'none'
+	      }
+	    },
 	    ["& .".concat(rowColClasses.row)]: {
 	      flexWrap: 'nowrap',
 	      color: (_theme$listBox$conten = (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : (_theme$listBox$conten2 = _theme$listBox.content) === null || _theme$listBox$conten2 === void 0 ? void 0 : _theme$listBox$conten2.color) !== null && _theme$listBox$conten !== void 0 ? _theme$listBox$conten : theme.palette.text.primary
@@ -22276,7 +22356,7 @@
 	      flexBasis: flexBasisProp,
 	      lineHeight: '16px',
 	      userSelect: 'none',
-	      paddingRight: '1px'
+	      paddingRight: showIcon || checkboxes ? '1px' : "".concat(iconWidth, "px")
 	    }, ellipsis), {}, {
 	      whiteSpace: 'pre',
 	      // to keep white-space on highlight
@@ -22318,9 +22398,9 @@
 	    ["& .".concat(rowColClasses.icon)]: {
 	      display: 'flex',
 	      justifyContent: 'center',
-	      width: 24,
-	      minWidth: 24,
-	      maxWidth: 24
+	      width: iconWidth,
+	      minWidth: iconWidth,
+	      maxWidth: iconWidth
 	    },
 	    // Selection styles (S=Selected, XS=ExcludedSelected, A=Available, X=Excluded).
 	    ["& .".concat(rowColClasses.S)]: _objectSpread2(_objectSpread2({}, getSelectedStyle({
@@ -22348,7 +22428,7 @@
 	    ["& .".concat(rowColClasses.frequencyCount)]: _objectSpread2(_objectSpread2({
 	      justifyContent: 'flex-end'
 	    }, ellipsis), {}, {
-	      flex: "0 1 ".concat(frequencyWidth, "px"),
+	      flex: "0 1 ".concat(frequencyWidth + (showIcon || checkboxes ? 0 : iconWidth), "px"),
 	      textAlign: 'right',
 	      paddingLeft: '2px'
 	    }),
@@ -22358,27 +22438,38 @@
 	      alignItems: 'center'
 	    },
 	    ["& .".concat(rowColClasses.bar)]: {
-	      border: "".concat(barBorderWidthPx, "px solid"),
-	      borderColor: '#D9D9D9',
 	      height: dense ? '16px' : '20px',
 	      position: 'absolute',
 	      zIndex: '-1',
 	      alignSelf: 'center',
-	      left: "".concat(barPadPx, "px"),
-	      transition: 'width 0.2s',
-	      backgroundColor: '#FAFAFA'
+	      left: barPadPx,
+	      width: "calc(100% - ".concat(barPadPx * 2, "px)"),
+	      display: 'flex',
+	      alignItems: 'center',
+	      '& .bar-filled': {
+	        border: "".concat(barBorderWidthPx, "px solid"),
+	        borderColor: '#D9D9D9',
+	        transition: 'width 0.2s',
+	        backgroundColor: '#FAFAFA',
+	        height: '100%'
+	      }
 	    },
 	    ["& .".concat(rowColClasses.barSelected)]: {
-	      opacity: '30%',
 	      zIndex: '0',
-	      background: theme.palette.background.lighter
+	      '& .bar-filled': {
+	        opacity: '30%',
+	        background: theme.palette.background.lighter
+	      }
 	    },
 	    ["& .".concat(rowColClasses.barWithCheckbox)]: {
-	      left: "".concat(barWithCheckboxLeftPadPx, "px")
+	      left: barWithCheckboxLeftPadPx,
+	      width: "calc(100% - ".concat(barWithCheckboxLeftPadPx + barPadPx, "px)")
 	    },
 	    ["& .".concat(rowColClasses.barSelectedWithCheckbox)]: {
-	      background: '#BFE5D0',
-	      borderColor: '#BFE5D0'
+	      '& .bar-filled': {
+	        background: '#BFE5D0',
+	        borderColor: '#BFE5D0'
+	      }
 	    },
 	    ["& .".concat(rowColClasses.excludedTextWithCheckbox)]: {
 	      color: '#828282',
@@ -22554,6 +22645,7 @@
 	    color: color,
 	    align: valueTextAlign
 	  }, /*#__PURE__*/React.createElement("span", {
+	    dir: "auto",
 	    style: {
 	      whiteSpace: 'pre'
 	    }
@@ -22739,29 +22831,27 @@
 
 	function Histogram(_ref) {
 	  let {
-	    cell,
+	    qFrequency,
 	    histogram,
 	    checkboxes,
 	    isSelected,
 	    frequencyMax
 	  } = _ref;
-	  const hasHistogramBar = cell && histogram && getFrequencyText({
-	    cell
-	  }) !== frequencyTextNone;
+	  const hasHistogramBar = qFrequency && histogram && getFrequencyText(qFrequency) !== frequencyTextNone;
 	  if (!hasHistogramBar) {
 	    return undefined;
 	  }
 	  const width = getBarWidth({
-	    qFrequency: cell.qFrequency,
+	    qFrequency,
 	    checkboxes,
 	    frequencyMax
 	  });
-	  return /*#__PURE__*/React.createElement("div", {
-	    className: joinClassNames([rowColClasses.bar, checkboxes && rowColClasses.barWithCheckbox, isSelected && (checkboxes ? rowColClasses.barSelectedWithCheckbox : rowColClasses.barSelected)]),
-	    style: {
-	      width
-	    }
-	  });
+	  return /*#__PURE__*/React.createElement(Box$1, {
+	    className: joinClassNames([rowColClasses.bar, checkboxes && rowColClasses.barWithCheckbox, isSelected && (checkboxes ? rowColClasses.barSelectedWithCheckbox : rowColClasses.barSelected)])
+	  }, /*#__PURE__*/React.createElement(Box$1, {
+	    className: "bar-filled",
+	    width: width
+	  }));
 	}
 
 	function Frequency(_ref) {
@@ -22786,9 +22876,7 @@
 	      cell,
 	      checkboxes
 	    }) && rowColClasses.excludedTextWithCheckbox])
-	  }, getFrequencyText({
-	    cell
-	  })));
+	  }, getFrequencyText(cell === null || cell === void 0 ? void 0 : cell.qFrequency)));
 	}
 
 	function getGridItemSizes(_ref) {
@@ -22889,6 +22977,7 @@
 	    histogram = false,
 	    keyboard,
 	    showGray = true,
+	    showTick: sizePermitsTick = true,
 	    columnCount = 1,
 	    rowCount = 1,
 	    dataOffset,
@@ -22974,7 +23063,11 @@
 	    ltr: 'left'
 	  };
 	  if (isAutoTextAlign) {
-	    valueTextAlign = isNumeric ? 'right' : dirToTextAlignMap[direction];
+	    if (!isNumeric) {
+	      valueTextAlign = dirToTextAlignMap[direction];
+	    } else {
+	      valueTextAlign = direction === 'rtl' ? 'left' : 'right';
+	    }
 	  } else {
 	    valueTextAlign = (textAlign === null || textAlign === void 0 ? void 0 : textAlign.align) || 'left';
 	  }
@@ -22993,22 +23086,26 @@
 	    display: 'flex',
 	    fontSize: '8px'
 	  };
-	  const showLock = isSelected && isLocked;
-	  const showTick = !checkboxes && isSelected && !isLocked;
 	  const cellStyle = {
 	    display: 'flex',
 	    alignItems: 'center',
 	    minWidth: 0,
 	    flexGrow: 1,
-	    paddingLeft: checkboxes ? 0 : undefined,
+	    paddingLeft: direction === 'rtl' ? 8 : checkboxes ? 0 : undefined,
+	    paddingRight: checkboxes ? 0 : direction === 'rtl' ? 8 : 0,
 	    justifyContent: valueTextAlign
 	  };
 	  const isFirstElement = index === 0;
 	  const flexBasisVal = checkboxes ? 'auto' : 'max-content';
+	  const showLock = isSelected && isLocked;
+	  const showTick = !checkboxes && isSelected && !isLocked && sizePermitsTick;
+	  const showIcon = !checkboxes && (showTick || showLock);
 	  return /*#__PURE__*/React.createElement(RowColRoot$1, {
 	    className: rowColClasses.barContainer,
 	    flexBasisProp: flexBasisVal,
 	    style: styles,
+	    showIcon: showIcon,
+	    checkboxes: checkboxes,
 	    isGridCol: isGridCol,
 	    isGridMode: dataLayout === 'grid',
 	    dense: dense,
@@ -23034,8 +23131,8 @@
 	    role: column ? 'column' : 'row',
 	    tabIndex: isFirstElement && (!keyboard.enabled || keyboard.active) ? 0 : -1,
 	    "data-n": cell === null || cell === void 0 ? void 0 : cell.qElemNumber
-	  }, /*#__PURE__*/React.createElement(Histogram, {
-	    cell: cell,
+	  }, (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,
 	    checkboxes: checkboxes,
 	    isSelected: isSelected,
@@ -23077,14 +23174,10 @@
 	    checkboxes: checkboxes,
 	    dense: dense,
 	    showGray: showGray
-	  }), !checkboxes && /*#__PURE__*/React.createElement(Grid$1, {
+	  }), showIcon && /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    className: rowColClasses.icon
-	  }, !showLock && !showTick && /*#__PURE__*/React.createElement("span", {
-	    style: {
-	      minWidth: '12px'
-	    }
-	  }), showLock && /*#__PURE__*/React.createElement(Lock, {
+	  }, showLock && /*#__PURE__*/React.createElement(Lock, {
 	    style: iconStyles,
 	    size: "small"
 	  }), showTick && /*#__PURE__*/React.createElement(Tick, {
@@ -24618,6 +24711,8 @@
 	  overflowDisclaimer.set(show);
 	}
 
+	const REMOVE_TICK_LIMIT = 80; // an item width equal to or less than this, will hide the select tick
+
 	const {
 	  StyledFixedSizeList,
 	  StyledFixedSizeGrid
@@ -24636,6 +24731,8 @@
 	    histogram,
 	    isSingleSelect,
 	    select,
+	    selectAll,
+	    onCtrlF,
 	    textAlign,
 	    selections,
 	    keyboard,
@@ -24649,20 +24746,23 @@
 	    focusListItems,
 	    setCurrentScrollIndex,
 	    constraints,
+	    frequencyMax,
 	    freqIsAllowed
 	  } = _ref;
 	  const {
-	    layoutOptions = {},
-	    frequencyMax
+	    layoutOptions = {}
 	  } = layout || {};
 	  const {
+	    columnWidth,
 	    itemPadding,
 	    listHeight,
-	    itemSize,
+	    itemHeight,
 	    rowCount,
 	    columnCount,
 	    frequencyWidth
 	  } = sizes || {};
+	  const itemWidth = layoutOptions.dataLayout === 'grid' ? columnWidth : width;
+	  const showTick = itemWidth > REMOVE_TICK_LIMIT;
 
 	  // Options common for List and Grid.
 	  const commonComponentOptions = {
@@ -24690,14 +24790,18 @@
 	      select,
 	      confirm: () => selections === null || selections === void 0 ? void 0 : selections.confirm.call(selections),
 	      cancel: () => selections === null || selections === void 0 ? void 0 : selections.cancel.call(selections),
-	      setScrollPosition
+	      setScrollPosition,
+	      selectAll,
+	      onCtrlF
 	    },
 	    frequencyMax,
 	    histogram,
 	    keyboard,
 	    showGray,
+	    showTick,
 	    dataOffset: local.current.dataOffset,
-	    focusListItems
+	    focusListItems,
+	    direction
 	  });
 	  const List = _ref2 => {
 	    let {
@@ -24717,7 +24821,7 @@
 	      itemData: _objectSpread2(_objectSpread2({}, commonItemData), {}, {
 	        listCount
 	      }),
-	      itemSize: itemSize,
+	      itemSize: itemHeight,
 	      onItemsRendered: renderProps => {
 	        var _layout$qListObject, _layout$qListObject$q;
 	        setCurrentScrollIndex({
@@ -24748,14 +24852,13 @@
 	      ref
 	    } = _ref3;
 	    const {
-	      columnWidth,
 	      overflowStyling,
 	      scrollBarWidth
 	    } = sizes;
 	    const {
 	      layoutOrder
 	    } = layoutOptions || {};
-	    const gridHeight = Math.min(listHeight, rowCount * itemSize + scrollBarWidth);
+	    const gridHeight = Math.min(listHeight, rowCount * itemHeight + scrollBarWidth);
 	    // eslint-disable-next-line no-param-reassign
 	    local.current.listRef = ref;
 	    const handleGridItemsRendered = renderProps => {
@@ -24794,7 +24897,7 @@
 	      columnCount: columnCount,
 	      columnWidth: columnWidth,
 	      rowCount: rowCount,
-	      rowHeight: itemSize,
+	      rowHeight: itemHeight,
 	      style: _objectSpread2({}, overflowStyling),
 	      itemData: _objectSpread2(_objectSpread2({}, commonItemData), {}, {
 	        column: undefined,
@@ -24811,11 +24914,65 @@
 	  };
 	}
 
-	const scrollBarWidth = 10; // TODO: ignore this - instead set the styling only show on hover...
+	function calculateColumnMode(_ref) {
+	  let {
+	    maxVisibleRows,
+	    itemHeight,
+	    listCount,
+	    listHeight,
+	    columnAutoWidth,
+	    containerWidth,
+	    itemMinWidth
+	  } = _ref;
+	  let rowCount;
+	  const maxRows = (maxVisibleRows === null || maxVisibleRows === void 0 ? void 0 : maxVisibleRows.maxRows) || 3;
+	  const autoRowCount = Math.floor(listHeight / itemHeight);
+	  if (maxVisibleRows.auto !== false) {
+	    rowCount = autoRowCount;
+	  } else {
+	    rowCount = Math.min(listCount, maxRows, autoRowCount);
+	  }
+	  const columnCount = Math.ceil(listCount / rowCount);
+	  const columnWidth = Math.max(columnAutoWidth, containerWidth / columnCount, itemMinWidth);
+	  return {
+	    columnWidth,
+	    columnCount,
+	    rowCount
+	  };
+	}
 
-	const ITEM_MIN_WIDTH = 56;
+	const SCROLL_BAR_WIDTH = 10; // TODO: ignore this - instead set the styling only show on hover...
 	const ITEM_MAX_WIDTH = 150;
 	const FREQUENCY_WIDTH = 40;
+	const ITEM_MIN_WIDTH = 56;
+	const CHECKBOX_WIDTH = 20;
+
+	function calculateRowMode(_ref) {
+	  let {
+	    maxVisibleColumns,
+	    listCount,
+	    containerWidth,
+	    columnAutoWidth,
+	    itemMinWidth
+	  } = _ref;
+	  const maxColumns = (maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.maxColumns) || 3;
+	  const innerWidth = containerWidth - SCROLL_BAR_WIDTH;
+	  let columnCount;
+	  const autoColumnCount = Math.min(listCount, Math.ceil(innerWidth / Math.max(itemMinWidth, columnAutoWidth))); // TODO: smarter sizing... based on glyph count + font size etc...??
+	  if ((maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.auto) !== false) {
+	    columnCount = autoColumnCount;
+	  } else {
+	    columnCount = Math.min(listCount, maxColumns, autoColumnCount);
+	  }
+	  const columnWidth = innerWidth / columnCount;
+	  const rowCount = Math.ceil(listCount / columnCount);
+	  return {
+	    rowCount,
+	    columnWidth,
+	    columnCount
+	  };
+	}
+
 	function getListSizes(_ref) {
 	  let {
 	    layout,
@@ -24824,7 +24981,8 @@
 	    listCount,
 	    count,
 	    textWidth,
-	    freqIsAllowed
+	    freqIsAllowed,
+	    checkboxes
 	  } = _ref;
 	  const {
 	    layoutOptions = {}
@@ -24837,50 +24995,60 @@
 	    dataLayout
 	  } = layoutOptions;
 	  const frequencyAddWidth = freqIsAllowed ? FREQUENCY_WIDTH : 0;
-	  const columnAutoWidth = Math.max(Math.min(ITEM_MAX_WIDTH, textWidth + 18 + frequencyAddWidth), ITEM_MIN_WIDTH + frequencyAddWidth);
+	  const checkboxAddWidth = checkboxes ? CHECKBOX_WIDTH : 0;
+	  const dynamicItemMinWidth = ITEM_MIN_WIDTH + frequencyAddWidth + checkboxAddWidth;
+	  const columnAutoWidth = Math.max(Math.min(ITEM_MAX_WIDTH, textWidth + 18 + frequencyAddWidth + checkboxAddWidth), dynamicItemMinWidth);
 	  let overflowStyling;
 	  let columnCount;
 	  let columnWidth;
 	  let rowCount;
 	  const isGridMode = dataLayout === 'grid';
 	  const itemPadding = 4;
-	  const denseItemSize = 20;
-	  const normalItemSize = isGridMode ? 32 : 29;
-	  let itemSize = dense ? denseItemSize : normalItemSize;
+	  const denseItemHeight = 20;
+	  const normalItemHeight = isGridMode ? 32 : 29;
+	  let itemHeight = dense ? denseItemHeight : normalItemHeight;
 	  if (isGridMode) {
 	    // Emulate a margin between items using padding, since the list library
 	    // needs an explicit row height and cannot handle margins.
-	    itemSize += itemPadding;
+	    itemHeight += itemPadding;
 	  }
-	  const listHeight = height !== null && height !== void 0 ? height : 8 * itemSize;
+	  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).
 	    let containerWidth = width;
 	    if (layoutOrder === 'row') {
-	      containerWidth += itemPadding * 2;
 	      overflowStyling = {
 	        overflowX: 'hidden'
 	      };
-	      const maxColumns = (maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.maxColumns) || 3;
-	      if ((maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.auto) !== false) {
-	        columnCount = Math.min(listCount, Math.ceil((containerWidth - scrollBarWidth) / columnAutoWidth)); // TODO: smarter sizing... based on glyph count + font size etc...??
-	      } else {
-	        columnCount = Math.min(listCount, maxColumns);
-	      }
-	      rowCount = Math.ceil(listCount / columnCount);
-	      columnWidth = (containerWidth - scrollBarWidth) / columnCount;
+	      containerWidth += itemPadding * 2;
+	      ({
+	        rowCount,
+	        columnWidth,
+	        columnCount
+	      } = calculateRowMode({
+	        maxVisibleColumns,
+	        listCount,
+	        containerWidth,
+	        columnAutoWidth,
+	        itemMinWidth: dynamicItemMinWidth
+	      }));
 	    } else {
 	      overflowStyling = {
 	        overflowY: 'hidden'
 	      };
-	      const maxRows = (maxVisibleRows === null || maxVisibleRows === void 0 ? void 0 : maxVisibleRows.maxRows) || 3;
-	      if (maxVisibleRows.auto !== false) {
-	        rowCount = Math.floor(listHeight / itemSize);
-	      } else {
-	        rowCount = Math.min(listCount, maxRows);
-	      }
-	      columnCount = Math.ceil(listCount / rowCount);
-	      columnWidth = Math.max(columnAutoWidth, containerWidth / columnCount);
+	      ({
+	        rowCount,
+	        columnWidth,
+	        columnCount
+	      } = calculateColumnMode({
+	        maxVisibleRows,
+	        itemHeight,
+	        listCount,
+	        listHeight,
+	        columnAutoWidth,
+	        containerWidth,
+	        itemMinWidth: dynamicItemMinWidth
+	      }));
 	    }
 	  }
 	  columnCount = (dataLayout === 'singleColumn' ? 1 : columnCount) || 1;
@@ -24897,9 +25065,9 @@
 	    columnWidth,
 	    rowCount,
 	    overflowStyling,
-	    itemSize,
+	    itemHeight,
 	    listHeight,
-	    scrollBarWidth,
+	    scrollBarWidth: SCROLL_BAR_WIDTH,
 	    count,
 	    listCount: limitedListCount,
 	    maxCount: {
@@ -24948,9 +25116,9 @@
 	    width,
 	    columnWidth,
 	    listHeight,
-	    itemSize
+	    itemHeight
 	  } = _ref;
-	  const visibleCellsCount = Math.ceil(width / columnWidth) * Math.ceil(listHeight / itemSize);
+	  const visibleCellsCount = Math.ceil(width / columnWidth) * Math.ceil(listHeight / itemHeight);
 	  const minSize = visibleCellsCount * 2;
 	  return minSize;
 	}
@@ -25272,12 +25440,53 @@
 	  return !!(widthPermitsFreq && (hasValidFreqOption || frequencyEnabled));
 	}
 
+	const escapeField = field => {
+	  if (!field) {
+	    return field;
+	  }
+	  return "".concat(field.replace(/\]/g, ']]'));
+	};
+	const needToFetchFrequencyMax = layout => (layout === null || layout === void 0 ? void 0 : layout.frequencyMax) === 'fetch';
+	const getFrequencyMaxExpression = field => {
+	  const escapedField = escapeField(field);
+	  return "Max(AGGR(Count(".concat(escapedField, "), ").concat(escapedField, "))");
+	};
+	const getFrequencyMax = async (layout, app) => {
+	  const dimInfo = layout.qListObject.qDimensionInfo;
+	  const field = dimInfo.qGroupFieldDefs[dimInfo.qGroupPos];
+	  const expression = getFrequencyMaxExpression(field);
+	  const evaluadedExpression = await app.evaluateEx(expression);
+	  return evaluadedExpression.qNumber;
+	};
+
+	const useFrequencyMax = (app, layout) => {
+	  const needFetch = needToFetchFrequencyMax(layout);
+	  const [frequencyMax, setFrequencyMax] = reactExports.useState();
+	  const [awaitingFrequencyMax, setAwaitingFrequencyMax] = reactExports.useState(needFetch);
+	  reactExports.useEffect(() => {
+	    if (!needFetch) {
+	      return;
+	    }
+	    const fetch = async () => {
+	      const newValue = await getFrequencyMax(layout, app);
+	      setFrequencyMax(newValue);
+	      setAwaitingFrequencyMax(false);
+	    };
+	    fetch();
+	  }, [needFetch && layout]);
+	  return {
+	    frequencyMax: needFetch ? frequencyMax : layout === null || layout === void 0 ? void 0 : layout.frequencyMax,
+	    awaitingFrequencyMax
+	  };
+	};
+
 	const _excluded$4 = ["isLoadingData"];
 	const DEFAULT_MIN_BATCH_SIZE = 100;
 	function ListBox(_ref) {
 	  var _layout$qListObject$q, _loaderRef$current, _loaderRef$current$_l, _loaderRef$current$_l2;
 	  let {
 	    model,
+	    app,
 	    constraints,
 	    layout,
 	    selections,
@@ -25301,7 +25510,9 @@
 	    },
 	    currentScrollIndex = {
 	      set: () => {}
-	    }
+	    },
+	    renderedCallback,
+	    onCtrlF
 	  } = _ref;
 	  const [initScrollPosIsSet, setInitScrollPosIsSet] = reactExports.useState(false);
 	  const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
@@ -25321,6 +25532,10 @@
 
 	  // The time from scroll end until new data is being fetched, may be exposed in API later on.
 	  const scrollTimeout = 0;
+	  const {
+	    frequencyMax,
+	    awaitingFrequencyMax
+	  } = useFrequencyMax(app, layout);
 	  const _useItemsLoader = useItemsLoader({
 	      local,
 	      loaderRef,
@@ -25346,11 +25561,15 @@
 	  if (itemsLoader !== null && itemsLoader !== void 0 && itemsLoader.pages) {
 	    selectionState.update({
 	      setPages,
-	      pages: itemsLoader === null || itemsLoader === void 0 ? void 0 : itemsLoader.pages,
+	      pages: itemsLoader.pages,
 	      isSingleSelect,
 	      selectDisabled,
 	      layout
 	    });
+	    if (itemsLoader.pages.length && !awaitingFrequencyMax) {
+	      // All necessary data fetching done - signal rendering done!
+	      renderedCallback();
+	    }
 	  }
 	  const isItemLoaded = reactExports.useCallback(index => {
 	    if (!(pages !== null && pages !== void 0 && pages.length) || !local.current.validPages) {
@@ -25444,7 +25663,8 @@
 	    listCount: unlimitedListCount,
 	    count,
 	    textWidth,
-	    freqIsAllowed
+	    freqIsAllowed,
+	    checkboxes
 	  });
 	  if (sizes.columnWidth) {
 	    // In grid mode, where we have a dynamic item width, get a second opinion on showing/hiding frequency.
@@ -25508,6 +25728,10 @@
 	      last
 	    }))
 	  });
+	  const selectAll = () => {
+	    selectionState.clearItemStates(false);
+	    model.selectListObjectAll('/qListObjectDef');
+	  };
 	  const {
 	    List,
 	    Grid
@@ -25523,6 +25747,8 @@
 	    showGray,
 	    interactionEvents,
 	    select,
+	    selectAll,
+	    onCtrlF,
 	    textAlign,
 	    isVertical,
 	    pages,
@@ -25541,19 +25767,20 @@
 	    focusListItems: getFocusState(),
 	    setCurrentScrollIndex: currentScrollIndex.set,
 	    constraints,
+	    frequencyMax,
 	    freqIsAllowed
 	  });
 	  const {
 	    columnWidth,
 	    listHeight,
-	    itemSize
+	    itemHeight
 	  } = sizes || {};
 	  if (!isVertical) {
 	    minimumBatchSize = getHorizontalMinBatchSize({
 	      width,
 	      columnWidth,
 	      listHeight,
-	      itemSize
+	      itemHeight
 	    });
 	  }
 	  return /*#__PURE__*/React.createElement(React.Fragment, null, !listCount && /*#__PURE__*/React.createElement(ListBoxDisclaimer, {
@@ -25912,6 +26139,7 @@
 
 	const PREFIX$7 = 'ActionsToolbar';
 	const classes$7 = {
+	  item: "".concat(PREFIX$7, "-item"),
 	  itemSpacing: "".concat(PREFIX$7, "-itemSpacing"),
 	  firstItemSpacing: "".concat(PREFIX$7, "-firstItemSpacing"),
 	  lastItemSpacing: "".concat(PREFIX$7, "-lastItemSpacing")
@@ -25948,25 +26176,27 @@
 	    actions = [],
 	    first = false,
 	    last = false,
-	    addAnchor = false
+	    addAnchor = false,
+	    isRtl = false
 	  } = _ref2;
 	  return actions.length > 0 ? /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
 	    gap: 0,
+	    flexDirection: isRtl ? 'row-reverse' : 'row',
 	    wrap: "nowrap"
 	  }, actions.map((e, ix) => {
 	    let cls = [];
 	    const isFirstItem = first && ix === 0;
 	    const isLastItem = last && actions.length - 1 === ix;
 	    if (isFirstItem && !isLastItem) {
-	      cls = [classes$7.firstItemSpacing];
+	      cls = [classes$7.firstItemSpacing, classes$7.item];
 	    }
 	    if (isLastItem && !isFirstItem) {
-	      cls = [...cls, classes$7.lastItemSpacing];
+	      cls = [...cls, classes$7.lastItemSpacing, classes$7.item];
 	    }
 	    if (!isFirstItem && !isLastItem && cls.length === 0) {
-	      cls = [classes$7.itemSpacing];
+	      cls = [classes$7.itemSpacing, classes$7.item];
 	    }
 	    return /*#__PURE__*/React.createElement(Grid$1, {
 	      item: true,
@@ -26015,7 +26245,9 @@
 	      anchorEl: null
 	    },
 	    focusHandler = null,
-	    actionsRefMock = null // for testing
+	    actionsRefMock = null,
+	    // for testing
+	    direction = 'ltr'
 	  } = _ref3;
 	  const defaultSelectionActions = useDefaultSelectionActions(selections);
 	  const {
@@ -26088,12 +26320,16 @@
 	  const showActions = newActions.length > 0;
 	  const showMore = moreActions.length > 0;
 	  const showDivider = showActions && selections.show || showMore && selections.show;
+	  const isRtl = direction === 'rtl';
 	  const Actions = /*#__PURE__*/React.createElement(Grid$1, {
 	    ref: actionsRef,
 	    onKeyDown: tabCallback,
 	    container: true,
 	    gap: 0,
-	    wrap: "nowrap"
+	    wrap: "nowrap",
+	    sx: {
+	      flexDirection: isRtl ? 'row-reverse' : 'row'
+	    }
 	  }, showActions && /*#__PURE__*/React.createElement(ActionsGroup, {
 	    actions: newActions,
 	    first: true,
@@ -26114,7 +26350,8 @@
 	  })), selections.show && /*#__PURE__*/React.createElement(ActionsGroup, {
 	    actions: defaultSelectionActions,
 	    first: !showActions && !showMore,
-	    last: true
+	    last: true,
+	    isRtl: isRtl
 	  }), showMoreItems && /*#__PURE__*/React.createElement(More$1, {
 	    show: showMoreItems,
 	    actions: moreActions,
@@ -26170,7 +26407,8 @@
 	    theme
 	  } = _ref2;
 	  return {
-	    color: (_theme$listBox2 = theme.listBox) === null || _theme$listBox2 === void 0 ? void 0 : (_theme$listBox2$conte = _theme$listBox2.content) === null || _theme$listBox2$conte === void 0 ? void 0 : _theme$listBox2$conte.color
+	    color: (_theme$listBox2 = theme.listBox) === null || _theme$listBox2 === void 0 ? void 0 : (_theme$listBox2$conte = _theme$listBox2.content) === null || _theme$listBox2$conte === void 0 ? void 0 : _theme$listBox2$conte.color,
+	    display: 'flex'
 	  };
 	});
 	function ListBoxSearch(_ref3) {
@@ -26183,7 +26421,9 @@
 	    visible = true,
 	    autoFocus = true,
 	    wildCardSearch = false,
-	    searchEnabled
+	    searchEnabled,
+	    direction,
+	    hide
 	  } = _ref3;
 	  const {
 	    translator
@@ -26195,6 +26435,8 @@
 	  const {
 	    getStoreValue
 	  } = useDataStore(model);
+	  const isRtl = direction === 'rtl';
+	  const inpuTextAlign = isRtl ? 'right' : 'left';
 	  const cancel = () => selections.isActive() && selections.cancel();
 	  const abortSearch = async () => {
 	    if (!selections.isModal()) {
@@ -26267,6 +26509,16 @@
 	        e.preventDefault();
 	        e.stopPropagation();
 	        break;
+	      case 'f':
+	      case 'F':
+	        if (e.ctrlKey || e.metaKey) {
+	          if (hide) {
+	            hide();
+	          }
+	          e.preventDefault();
+	          e.stopPropagation();
+	        }
+	        break;
 	    }
 	    return response;
 	  };
@@ -26282,6 +26534,7 @@
 	    className: "search",
 	    sx: [{
 	      border: 'none',
+	      fontSize: 14,
 	      borderRadius: 0,
 	      backgroundColor: 'transparent',
 	      '& fieldset': {
@@ -26300,6 +26553,8 @@
 	        paddingTop: '5px',
 	        paddingBottom: '5px'
 	      }
+	    }, {
+	      flexDirection: isRtl ? 'row-reverse' : 'row'
 	    }],
 	    inputRef: inputRef,
 	    size: "small",
@@ -26311,7 +26566,10 @@
 	    onKeyDown: onKeyDown,
 	    autoFocus: autoFocus,
 	    inputProps: {
-	      tabIndex: keyboard && (!keyboard.enabled || keyboard.active) ? 0 : -1
+	      tabIndex: keyboard && (!keyboard.enabled || keyboard.active) ? 0 : -1,
+	      style: {
+	        textAlign: "".concat(inpuTextAlign)
+	      }
 	    }
 	  });
 	}
@@ -26718,6 +26976,7 @@
 	  const open = show && Boolean(alignTo.current);
 	  const [listCount, setListCount] = reactExports.useState(0);
 	  const theme = useTheme$1();
+	  const searchContainerRef = reactExports.useRef();
 	  const [model] = useSessionModel({
 	    qInfo: {
 	      qType: 'njsListbox'
@@ -26779,6 +27038,10 @@
 	    translator,
 	    selectionState: selectionState$1
 	  });
+	  const onCtrlF = () => {
+	    const input = searchContainerRef.current.querySelector('input');
+	    input === null || input === void 0 ? void 0 : input.focus();
+	  };
 	  const hasSelections$1 = hasSelections(layout);
 	  return /*#__PURE__*/React.createElement(Popover$1, {
 	    open: open,
@@ -26845,7 +27108,10 @@
 	    xs: true
 	  }, /*#__PURE__*/React.createElement("div", {
 	    ref: moreAlignTo
-	  }), /*#__PURE__*/React.createElement(ListBoxSearch, {
+	  }), /*#__PURE__*/React.createElement(Grid$1, {
+	    item: true,
+	    ref: searchContainerRef
+	  }, /*#__PURE__*/React.createElement(ListBoxSearch, {
 	    visible: true,
 	    model: model,
 	    listCount: listCount,
@@ -26855,13 +27121,15 @@
 	      enabled: false
 	    },
 	    autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : true
-	  }), /*#__PURE__*/React.createElement(ListBox, {
+	  })), /*#__PURE__*/React.createElement(ListBox, {
 	    model: model,
+	    app: app,
 	    layout: layout,
 	    selections: selections,
 	    selectionState: selectionState$1,
 	    direction: "ltr",
-	    onSetListCount: c => setListCount(c)
+	    onSetListCount: c => setListCount(c),
+	    onCtrlF: onCtrlF
 	  }))));
 	}
 
@@ -28130,20 +28398,21 @@
 	var DrillDownIcon = (props => SvgIcon(drillDown(props)));
 
 	const addListboxTheme = themeApi => {
-	  const getListboxStyle = prop => themeApi.getStyle('object', '', "listBox.".concat(prop));
+	  const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
 	  return {
-	    backgroundColor: getListboxStyle('backgroundColor'),
+	    backgroundColor: getListboxStyle('', 'backgroundColor'),
 	    title: {
 	      main: {
-	        color: getListboxStyle('title.main.color'),
-	        fontSize: getListboxStyle('title.main.fontSize'),
-	        fontFamily: getListboxStyle('title.main.fontFamily')
+	        color: getListboxStyle('title.main', 'color'),
+	        fontSize: getListboxStyle('title.main', 'fontSize'),
+	        fontFamily: getListboxStyle('title.main', 'fontFamily'),
+	        fontWeight: getListboxStyle('title.main', 'fontWeight')
 	      }
 	    },
 	    content: {
-	      color: getListboxStyle('content.color'),
-	      fontSize: getListboxStyle('content.fontSize'),
-	      fontFamily: getListboxStyle('content.fontFamily')
+	      color: getListboxStyle('content', 'color'),
+	      fontSize: getListboxStyle('content', 'fontSize'),
+	      fontFamily: getListboxStyle('content', 'fontFamily')
 	    }
 	  };
 	};
@@ -28217,7 +28486,7 @@
 	    backgroundColor: (_theme$listBox$backgr = (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : _theme$listBox.backgroundColor) !== null && _theme$listBox$backgr !== void 0 ? _theme$listBox$backgr : theme.palette.background.default,
 	    ["& .".concat(classes$4.listBoxHeader)]: {
 	      alignSelf: 'center',
-	      display: 'inline-flex',
+	      display: 'flex',
 	      width: "calc(100% - ".concat(BUTTON_ICON_WIDTH, "px)")
 	    },
 	    ["& .".concat(classes$4.screenReaderOnly)]: {
@@ -28228,18 +28497,25 @@
 	    },
 	    ["& .".concat(classes$4.listboxWrapper)]: {
 	      padding: containerPadding
+	    },
+	    '&:focus:not(:hover)': {
+	      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
+	    },
+	    '&:focus-visible': {
+	      outline: 'none'
 	    }
 	  };
 	});
 	const Title = styled$1(Typography$1)(_ref2 => {
-	  var _theme$listBox2, _theme$listBox2$title, _theme$listBox2$title2, _theme$listBox3, _theme$listBox3$title, _theme$listBox3$title2, _theme$listBox4, _theme$listBox4$title, _theme$listBox4$title2;
+	  var _theme$listBox2, _theme$listBox2$title, _theme$listBox2$title2, _theme$listBox3, _theme$listBox3$title, _theme$listBox3$title2, _theme$listBox4, _theme$listBox4$title, _theme$listBox4$title2, _theme$listBox5, _theme$listBox5$title, _theme$listBox5$title2;
 	  let {
 	    theme
 	  } = _ref2;
 	  return {
 	    color: (_theme$listBox2 = theme.listBox) === null || _theme$listBox2 === void 0 ? void 0 : (_theme$listBox2$title = _theme$listBox2.title) === null || _theme$listBox2$title === void 0 ? void 0 : (_theme$listBox2$title2 = _theme$listBox2$title.main) === null || _theme$listBox2$title2 === void 0 ? void 0 : _theme$listBox2$title2.color,
 	    fontSize: (_theme$listBox3 = theme.listBox) === null || _theme$listBox3 === void 0 ? void 0 : (_theme$listBox3$title = _theme$listBox3.title) === null || _theme$listBox3$title === void 0 ? void 0 : (_theme$listBox3$title2 = _theme$listBox3$title.main) === null || _theme$listBox3$title2 === void 0 ? void 0 : _theme$listBox3$title2.fontSize,
-	    fontFamily: (_theme$listBox4 = theme.listBox) === null || _theme$listBox4 === void 0 ? void 0 : (_theme$listBox4$title = _theme$listBox4.title) === null || _theme$listBox4$title === void 0 ? void 0 : (_theme$listBox4$title2 = _theme$listBox4$title.main) === null || _theme$listBox4$title2 === void 0 ? void 0 : _theme$listBox4$title2.fontFamily
+	    fontFamily: (_theme$listBox4 = theme.listBox) === null || _theme$listBox4 === void 0 ? void 0 : (_theme$listBox4$title = _theme$listBox4.title) === null || _theme$listBox4$title === void 0 ? void 0 : (_theme$listBox4$title2 = _theme$listBox4$title.main) === null || _theme$listBox4$title2 === void 0 ? void 0 : _theme$listBox4$title2.fontFamily,
+	    fontWeight: ((_theme$listBox5 = theme.listBox) === null || _theme$listBox5 === void 0 ? void 0 : (_theme$listBox5$title = _theme$listBox5.title) === null || _theme$listBox5$title === void 0 ? void 0 : (_theme$listBox5$title2 = _theme$listBox5$title.main) === null || _theme$listBox5$title2 === void 0 ? void 0 : _theme$listBox5$title2.fontWeight) || 'bold'
 	  };
 	});
 	function ListBoxInline(_ref3) {
@@ -28264,7 +28540,8 @@
 	    postProcessPages = undefined,
 	    calculatePagesHeight,
 	    showGray = true,
-	    scrollState = undefined
+	    scrollState = undefined,
+	    renderedCallback
 	  } = options;
 	  let {
 	    toolbar = true
@@ -28379,6 +28656,7 @@
 	    return null;
 	  }
 	  const isLocked = layout.qListObject.qDimensionInfo.qLocked === true;
+	  const isRtl = direction === 'rtl';
 	  const isDrillDown = layout.qListObject.qDimensionInfo.qGrouping === 'H';
 	  const listboxSelectionToolbarItems = createListboxSelectionToolbar({
 	    layout,
@@ -28386,24 +28664,31 @@
 	    translator,
 	    selectionState: selectionState$1
 	  });
-	  const showSearchToggle = search === 'toggle' && showSearch;
-	  const searchVisible = (search === true || showSearchToggle) && !selectDisabled();
 	  const {
+	    wildCardSearch,
+	    searchEnabled,
 	    layoutOptions = {}
 	  } = layout;
+	  const showSearchToggle = search === 'toggle' && showSearch;
+	  const searchVisible = (search === true || showSearchToggle) && !selectDisabled() && searchEnabled !== false;
 	  const dense = (_layoutOptions$dense = layoutOptions.dense) !== null && _layoutOptions$dense !== void 0 ? _layoutOptions$dense : false;
 	  const searchHeight = dense ? 27 : 40;
 	  const extraheight = dense ? 39 : 49;
-	  const minHeight = 49 + (searchVisible ? searchHeight : 0) + extraheight;
+	  const searchAddHeight = searchVisible ? searchHeight : 0;
+	  const minHeight = toolbar ? 49 + searchAddHeight + extraheight : 0;
 	  const headerHeight = 32;
-	  const {
-	    wildCardSearch,
-	    searchEnabled
-	  } = layout;
 	  const onShowSearch = () => {
 	    const newValue = !showSearch;
 	    setShowSearch(newValue);
 	  };
+	  const onCtrlF = () => {
+	    if (search === 'toggle') {
+	      onShowSearch();
+	    } else {
+	      const input = searchContainer.current.querySelector('input');
+	      input === null || input === void 0 ? void 0 : input.focus();
+	    }
+	  };
 	  const getActionToolbarProps = isPopover => getListboxActionProps({
 	    isPopover,
 	    showToolbar,
@@ -28418,6 +28703,7 @@
 	  const showIcons = showSearchOrLockIcon || isDrillDown;
 	  const iconsWidth = (showSearchOrLockIcon ? BUTTON_ICON_WIDTH : 0) + (isDrillDown ? ICON_WIDTH + ICON_PADDING : 0); // Drill-down icon needs padding right so there is space between the icon and the title
 	  const headerPaddingLeft = CELL_PADDING_LEFT - (showSearchOrLockIcon ? ICON_PADDING : 0);
+	  const headerPaddingRight = isRtl ? CELL_PADDING_LEFT - (showIcons ? ICON_PADDING : 0) : 0;
 
 	  // 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';
@@ -28425,7 +28711,9 @@
 	  if (isGridMode) {
 	    containerPadding = layoutOptions.layoutOrder === 'row' ? '2px 4px' : '2px 6px 2px 4px';
 	  }
-	  return /*#__PURE__*/React.createElement(React.Fragment, null, toolbarDetachedOnly && /*#__PURE__*/React.createElement(ActionsToolbar, getActionToolbarProps(true)), /*#__PURE__*/React.createElement(StyledGrid$3, {
+	  return /*#__PURE__*/React.createElement(React.Fragment, null, toolbarDetachedOnly && /*#__PURE__*/React.createElement(ActionsToolbar, _extends$8({
+	    direction: direction
+	  }, getActionToolbarProps(true))), /*#__PURE__*/React.createElement(StyledGrid$3, {
 	    className: "listbox-container",
 	    container: true,
 	    tabIndex: keyboard.enabled && !keyboard.active ? 0 : -1,
@@ -28446,13 +28734,20 @@
 	    container: true,
 	    style: {
 	      padding: theme.spacing(1),
-	      paddingLeft: "".concat(headerPaddingLeft, "px")
+	      paddingLeft: "".concat(headerPaddingLeft, "px"),
+	      paddingRight: "".concat(headerPaddingRight, "px")
+	    },
+	    sx: {
+	      flexDirection: isRtl ? 'row-reverse' : 'row'
 	    },
 	    wrap: "nowrap"
 	  }, /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
 	    height: headerHeight,
+	    sx: {
+	      flexDirection: isRtl ? 'row-reverse' : 'row'
+	    },
 	    wrap: "nowrap"
 	  }, showIcons && /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
@@ -28462,12 +28757,12 @@
 	      width: iconsWidth
 	    }
 	  }, isLocked ? /*#__PURE__*/React.createElement(IconButton$1, {
+	    title: translator.get('SelectionToolbar.ClickToUnlock'),
 	    tabIndex: -1,
 	    onClick: unlock,
 	    disabled: selectDisabled(),
 	    size: "large"
 	  }, /*#__PURE__*/React.createElement(Lock, {
-	    title: translator.get('Listbox.Unlock'),
 	    disableRipple: true,
 	    style: {
 	      fontSize: '12px'
@@ -28492,6 +28787,9 @@
 	    }
 	  })), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
+	    sx: {
+	      justifyContent: isRtl ? 'flex-end' : 'flex-start'
+	    },
 	    className: classes$4.listBoxHeader
 	  }, /*#__PURE__*/React.createElement(Title, {
 	    variant: "h6",
@@ -28503,17 +28801,19 @@
 	    xs: true
 	  }), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true
-	  }, /*#__PURE__*/React.createElement(ActionsToolbar, getActionToolbarProps(showToolbarDetached({
+	  }, /*#__PURE__*/React.createElement(ActionsToolbar, _extends$8({
+	    direction: direction
+	  }, getActionToolbarProps(showToolbarDetached({
 	    containerRef,
 	    titleRef,
 	    iconsWidth
-	  }))))), /*#__PURE__*/React.createElement(Grid$1, {
+	  })))))), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
 	    direction: "column",
 	    style: {
 	      height: '100%',
-	      minHeight: "".concat(minHeight, "px")
+	      minHeight: '50px'
 	    },
 	    role: "region",
 	    "aria-label": translator.get('Listbox.ResultFilterLabel')
@@ -28531,9 +28831,10 @@
 	    visible: searchVisible,
 	    search: search,
 	    autoFocus: shouldAutoFocus,
-	    searchContainerRef: searchContainerRef,
 	    wildCardSearch: wildCardSearch,
-	    searchEnabled: searchEnabled
+	    searchEnabled: searchEnabled,
+	    direction: direction,
+	    hide: showSearchIcon && onShowSearch
 	  })), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    xs: true,
@@ -28547,6 +28848,7 @@
 	    } = _ref4;
 	    return /*#__PURE__*/React.createElement(ListBox, {
 	      model: model,
+	      app: app,
 	      constraints: constraints,
 	      layout: layout,
 	      selections: selections,
@@ -28576,7 +28878,9 @@
 	      currentScrollIndex: {
 	        state: currentScrollIndex,
 	        set: setCurrentScrollIndex
-	      }
+	      },
+	      renderedCallback: renderedCallback,
+	      onCtrlF: onCtrlF
 	    });
 	  })))));
 	}
@@ -28654,7 +28958,13 @@
 	        const dim = await app.getDimension(fieldIdentifier.qLibraryId);
 	        const dimLayout = await dim.getLayout();
 	        setFallbackTitle(dimLayout.qDim.title);
-	        setFieldDef(dimLayout.qDim.qFieldDefs ? dimLayout.qDim.qFieldDefs[0] : '');
+	        if (dimLayout.qDim.qGrouping === 'N') {
+	          setFieldDef(dimLayout.qDim.qFieldDefs ? dimLayout.qDim.qFieldDefs[0] : '');
+	        } else {
+	          setFieldDef({
+	            multiFieldDim: true
+	          });
+	        }
 	        setIsFetching(false);
 	      } catch (e) {
 	        setIsFetching(false);
@@ -28764,11 +29074,16 @@
 	    listdef.qListObjectDef.qDef.qFieldDefs = [fieldIdentifier];
 	    fieldName = fieldIdentifier;
 	  }
-	  if (frequencyMode !== 'N' || histogram) {
-	    const field = fieldIdentifier.qLibraryId ? fieldDef : fieldName;
-	    listdef.frequencyMax = {
-	      qValueExpression: "Max(AGGR(Count([".concat(field, "]), [").concat(field, "]))")
-	    };
+	  if (frequencyMode !== 'P' && histogram) {
+	    if (fieldDef !== null && fieldDef !== void 0 && fieldDef.multiFieldDim) {
+	      listdef.frequencyMax = 'fetch';
+	      // maybe for all lib dimension to handle if it properties change
+	    } else {
+	      const field = fieldIdentifier.qLibraryId ? fieldDef : fieldName;
+	      listdef.frequencyMax = {
+	        qValueExpression: getFrequencyMaxExpression(field)
+	      };
+	    }
 	  }
 	  const [sessionModel] = useSessionModel(listdef, isFetching ? null : app, fieldName, stateName);
 	  reactExports.useEffect(() => {
@@ -28845,7 +29160,8 @@
 	    qId,
 	    stateName,
 	    element,
-	    options
+	    options,
+	    renderedCallback
 	  } = _ref;
 	  const {
 	    isExistingObject,
@@ -28876,7 +29192,8 @@
 	  const opts = reactExports.useMemo(() => _objectSpread2(_objectSpread2({}, options), {}, {
 	    selections,
 	    model,
-	    app
+	    app,
+	    renderedCallback
 	  }), [options, selections, model, app]);
 	  if (!selections || !model) {
 	    return null;
@@ -28892,7 +29209,8 @@
 	    fieldIdentifier,
 	    qId,
 	    stateName = '$',
-	    options = {}
+	    options = {},
+	    renderedCallback
 	  } = _ref2;
 	  return ReactDOM.createPortal( /*#__PURE__*/React.createElement(ListBoxWrapper, {
 	    app: app,
@@ -28900,7 +29218,8 @@
 	    fieldIdentifier: fieldIdentifier,
 	    qId: qId,
 	    stateName: stateName,
-	    options: options
+	    options: options,
+	    renderedCallback: renderedCallback
 	  }), element, uid());
 	}
 
@@ -36119,6 +36438,7 @@
 	const mergeConfigs = (base, c) => ({
 	  context: mergeObj(base.context, c.context),
 	  load: c.load || base.load,
+	  loadTheme: c.loadTheme || base.loadTheme,
 	  snapshot: _objectSpread2({}, c.snapshot || base.snapshot),
 	  types: mergeArray(base.types, c.types),
 	  themes: mergeArray(base.themes, c.themes),
@@ -36165,6 +36485,7 @@
 	    });
 	    const appTheme$1 = appTheme({
 	      themes: configuration.themes,
+	      loadTheme: configuration.loadTheme,
 	      root
 	    });
 	    currentContext.themeApi = appTheme$1.externalAPI;
@@ -36423,13 +36744,14 @@
 	           * @param {boolean=} [options.dense=false] Reduces padding and text size (not applicable for existing objects)
 	           * @param {string=} [options.stateName="$"] Sets the state to make selections in (not applicable for existing objects)
 	           * @param {object=} [options.properties={}] Properties object to extend default properties with
+	           * @returns {Promise<void>} A promise that resolves when the data is fetched.
 	           *
 	           * @since 1.1.0
 	           * @instance
 	           * @example
 	           * fieldInstance.mount(element);
 	           */
-	          mount(element) {
+	          async mount(element) {
 	            let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 	            if (!element) {
 	              throw new Error("Element for ".concat(fieldName || qId, " not provided"));
@@ -36439,18 +36761,21 @@
 	            }
 	            const onSelectionActivated = () => fieldSels.emit('selectionActivated');
 	            const onSelectionDeactivated = () => fieldSels.emit('selectionDeactivated');
-	            this._instance = ListBoxPortal({
-	              element,
-	              app,
-	              fieldIdentifier,
-	              qId,
-	              options: getOptions$1(_objectSpread2({
-	                onSelectionActivated,
-	                onSelectionDeactivated
-	              }, options)),
-	              stateName: options.stateName || '$'
+	            return new Promise(resolve => {
+	              this._instance = ListBoxPortal({
+	                element,
+	                app,
+	                fieldIdentifier,
+	                qId,
+	                options: getOptions$1(_objectSpread2({
+	                  onSelectionActivated,
+	                  onSelectionDeactivated
+	                }, options)),
+	                stateName: options.stateName || '$',
+	                renderedCallback: resolve
+	              });
+	              root.add(this._instance);
 	            });
-	            root.add(this._instance);
 	          },
 	          /**
 	           * Unmounts the field listbox from the DOM.