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

package/core/esm/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.
 */
@@ -8,7 +8,7 @@ import * as React from 'react';
 import React__default, { useState as useState$1, useEffect as useEffect$1, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useReducer, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, createElement, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { CacheProvider, ThemeContext as ThemeContext$2 } from '@emotion/react';
-import { Checkbox, Radio, Typography, FormControlLabel, Grid, Tooltip, Paper, IconButton, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Box, Icon, CircularProgress } from '@mui/material';
+import { Checkbox, Radio, Typography, FormControlLabel, Box, Grid, Tooltip, Paper, IconButton, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Icon, CircularProgress } from '@mui/material';
 import styled$3 from '@emotion/styled';
 
 function getAugmentedNamespace(n) {
@@ -973,6 +973,26 @@ var Listbox_Dismiss = {
 		"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: {
@@ -1613,17 +1633,12 @@ var Visualization_UnfulfilledCalculationCondition = {
 		"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,
@@ -1655,8 +1670,7 @@ var all = {
 	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) {
@@ -2737,9 +2751,34 @@ var darkRawJSON = {
 	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,
@@ -3383,15 +3422,21 @@ const LOAD_THEME_TIMEOUT = 5000;
 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) {
@@ -7998,7 +8043,7 @@ function create$3(definition) {
   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', ''));
 });
@@ -8206,7 +8251,7 @@ function boot(_ref2) {
   const appRef = React__default.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);
@@ -9280,6 +9325,8 @@ const KEYS = Object.freeze({
 function getFieldKeyboardNavigation(_ref) {
   let {
     select,
+    selectAll,
+    onCtrlF,
     confirm,
     cancel,
     setScrollPosition,
@@ -9299,7 +9346,8 @@ function getFieldKeyboardNavigation(_ref) {
     const {
       keyCode,
       shiftKey = false,
-      ctrlKey = false
+      ctrlKey = false,
+      metaKey = false
     } = event.nativeEvent;
     switch (keyCode) {
       case KEYS.SHIFT:
@@ -9354,6 +9402,18 @@ function getFieldKeyboardNavigation(_ref) {
         }
         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.
@@ -9380,15 +9440,29 @@ function getListboxInlineKeyboardNavigation(_ref2) {
     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) {
@@ -9412,7 +9486,7 @@ function getListboxInlineKeyboardNavigation(_ref2) {
         focusInsideListbox(event.currentTarget);
         break;
       case KEYS.ESCAPE:
-        focusContainer(event.currentTarget);
+        changeFocus(event);
         break;
       case KEYS.ARROW_UP:
         updateKeyScrollOnHover({
@@ -9424,6 +9498,10 @@ function getListboxInlineKeyboardNavigation(_ref2) {
           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
@@ -9551,25 +9629,15 @@ const joinClassNames = namesArray => namesArray.filter(c => !!c).join(' ').trim(
 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;
@@ -9598,8 +9666,10 @@ const ellipsis = {
   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 {
@@ -9608,7 +9678,9 @@ const RowColRoot = styled$1('div', {
     isGridMode,
     isGridCol,
     dense,
-    frequencyWidth
+    frequencyWidth,
+    showIcon,
+    checkboxes
   } = _ref2;
   return {
     '&:focus': {
@@ -9617,6 +9689,14 @@ const RowColRoot = styled$1('div', {
     '&: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
@@ -9645,7 +9725,7 @@ const RowColRoot = styled$1('div', {
       flexBasis: flexBasisProp,
       lineHeight: '16px',
       userSelect: 'none',
-      paddingRight: '1px'
+      paddingRight: showIcon || checkboxes ? '1px' : "".concat(iconWidth, "px")
     }, ellipsis), {}, {
       whiteSpace: 'pre',
       // to keep white-space on highlight
@@ -9687,9 +9767,9 @@ const RowColRoot = styled$1('div', {
     ["& .".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({
@@ -9717,7 +9797,7 @@ const RowColRoot = styled$1('div', {
     ["& .".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'
     }),
@@ -9727,27 +9807,38 @@ const RowColRoot = styled$1('div', {
       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',
@@ -9923,6 +10014,7 @@ function ValueField(_ref) {
     color: color,
     align: valueTextAlign
   }, /*#__PURE__*/React__default.createElement("span", {
+    dir: "auto",
     style: {
       whiteSpace: 'pre'
     }
@@ -10108,29 +10200,27 @@ var Field$1 = React__default.memo(Field);
 
 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__default.createElement("div", {
-    className: joinClassNames([rowColClasses.bar, checkboxes && rowColClasses.barWithCheckbox, isSelected && (checkboxes ? rowColClasses.barSelectedWithCheckbox : rowColClasses.barSelected)]),
-    style: {
-      width
-    }
-  });
+  return /*#__PURE__*/React__default.createElement(Box, {
+    className: joinClassNames([rowColClasses.bar, checkboxes && rowColClasses.barWithCheckbox, isSelected && (checkboxes ? rowColClasses.barSelectedWithCheckbox : rowColClasses.barSelected)])
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    className: "bar-filled",
+    width: width
+  }));
 }
 
 function Frequency(_ref) {
@@ -10155,9 +10245,7 @@ function Frequency(_ref) {
       cell,
       checkboxes
     }) && rowColClasses.excludedTextWithCheckbox])
-  }, getFrequencyText({
-    cell
-  })));
+  }, getFrequencyText(cell === null || cell === void 0 ? void 0 : cell.qFrequency)));
 }
 
 function getGridItemSizes(_ref) {
@@ -10258,6 +10346,7 @@ function RowColumn(_ref) {
     histogram = false,
     keyboard,
     showGray = true,
+    showTick: sizePermitsTick = true,
     columnCount = 1,
     rowCount = 1,
     dataOffset,
@@ -10343,7 +10432,11 @@ function RowColumn(_ref) {
     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';
   }
@@ -10362,22 +10455,26 @@ function RowColumn(_ref) {
     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__default.createElement(RowColRoot$1, {
     className: rowColClasses.barContainer,
     flexBasisProp: flexBasisVal,
     style: styles,
+    showIcon: showIcon,
+    checkboxes: checkboxes,
     isGridCol: isGridCol,
     isGridMode: dataLayout === 'grid',
     dense: dense,
@@ -10403,8 +10500,8 @@ function RowColumn(_ref) {
     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__default.createElement(Histogram, {
-    cell: cell,
+  }, (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,
     checkboxes: checkboxes,
     isSelected: isSelected,
@@ -10446,14 +10543,10 @@ function RowColumn(_ref) {
     checkboxes: checkboxes,
     dense: dense,
     showGray: showGray
-  }), !checkboxes && /*#__PURE__*/React__default.createElement(Grid, {
+  }), showIcon && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: rowColClasses.icon
-  }, !showLock && !showTick && /*#__PURE__*/React__default.createElement("span", {
-    style: {
-      minWidth: '12px'
-    }
-  }), showLock && /*#__PURE__*/React__default.createElement(Lock, {
+  }, showLock && /*#__PURE__*/React__default.createElement(Lock, {
     style: iconStyles,
     size: "small"
   }), showTick && /*#__PURE__*/React__default.createElement(Tick, {
@@ -11987,6 +12080,8 @@ function handleSetOverflowDisclaimer(_ref) {
   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
@@ -12005,6 +12100,8 @@ function getListBoxComponents(_ref) {
     histogram,
     isSingleSelect,
     select,
+    selectAll,
+    onCtrlF,
     textAlign,
     selections,
     keyboard,
@@ -12018,20 +12115,23 @@ function getListBoxComponents(_ref) {
     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 = {
@@ -12059,14 +12159,18 @@ function getListBoxComponents(_ref) {
       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 {
@@ -12086,7 +12190,7 @@ function getListBoxComponents(_ref) {
       itemData: _objectSpread2(_objectSpread2({}, commonItemData), {}, {
         listCount
       }),
-      itemSize: itemSize,
+      itemSize: itemHeight,
       onItemsRendered: renderProps => {
         var _layout$qListObject, _layout$qListObject$q;
         setCurrentScrollIndex({
@@ -12117,14 +12221,13 @@ function getListBoxComponents(_ref) {
       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 => {
@@ -12163,7 +12266,7 @@ function getListBoxComponents(_ref) {
       columnCount: columnCount,
       columnWidth: columnWidth,
       rowCount: rowCount,
-      rowHeight: itemSize,
+      rowHeight: itemHeight,
       style: _objectSpread2({}, overflowStyling),
       itemData: _objectSpread2(_objectSpread2({}, commonItemData), {}, {
         column: undefined,
@@ -12180,11 +12283,65 @@ function getListBoxComponents(_ref) {
   };
 }
 
-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,
@@ -12193,7 +12350,8 @@ function getListSizes(_ref) {
     listCount,
     count,
     textWidth,
-    freqIsAllowed
+    freqIsAllowed,
+    checkboxes
   } = _ref;
   const {
     layoutOptions = {}
@@ -12206,50 +12364,60 @@ function getListSizes(_ref) {
     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;
@@ -12266,9 +12434,9 @@ function getListSizes(_ref) {
     columnWidth,
     rowCount,
     overflowStyling,
-    itemSize,
+    itemHeight,
     listHeight,
-    scrollBarWidth,
+    scrollBarWidth: SCROLL_BAR_WIDTH,
     count,
     listCount: limitedListCount,
     maxCount: {
@@ -12317,9 +12485,9 @@ function getHorizontalMinBatchSize(_ref) {
     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;
 }
@@ -12787,12 +12955,53 @@ function getFrequencyAllowed(_ref) {
   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] = useState$1();
+  const [awaitingFrequencyMax, setAwaitingFrequencyMax] = useState$1(needFetch);
+  useEffect$1(() => {
+    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,
@@ -12816,7 +13025,9 @@ function ListBox(_ref) {
     },
     currentScrollIndex = {
       set: () => {}
-    }
+    },
+    renderedCallback,
+    onCtrlF
   } = _ref;
   const [initScrollPosIsSet, setInitScrollPosIsSet] = useState$1(false);
   const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
@@ -12836,6 +13047,10 @@ function ListBox(_ref) {
 
   // 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,
@@ -12861,11 +13076,15 @@ function ListBox(_ref) {
   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 = useCallback(index => {
     if (!(pages !== null && pages !== void 0 && pages.length) || !local.current.validPages) {
@@ -12959,7 +13178,8 @@ function ListBox(_ref) {
     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.
@@ -13023,6 +13243,10 @@ function ListBox(_ref) {
       last
     }))
   });
+  const selectAll = () => {
+    selectionState.clearItemStates(false);
+    model.selectListObjectAll('/qListObjectDef');
+  };
   const {
     List,
     Grid
@@ -13038,6 +13262,8 @@ function ListBox(_ref) {
     showGray,
     interactionEvents,
     select,
+    selectAll,
+    onCtrlF,
     textAlign,
     isVertical,
     pages,
@@ -13056,19 +13282,20 @@ function ListBox(_ref) {
     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__default.createElement(React__default.Fragment, null, !listCount && /*#__PURE__*/React__default.createElement(ListBoxDisclaimer, {
@@ -13427,6 +13654,7 @@ const More$1 = React__default.forwardRef((_ref3, ref) => {
 
 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")
@@ -13463,25 +13691,27 @@ const ActionsGroup = React__default.forwardRef((_ref2, ref) => {
     actions = [],
     first = false,
     last = false,
-    addAnchor = false
+    addAnchor = false,
+    isRtl = false
   } = _ref2;
   return actions.length > 0 ? /*#__PURE__*/React__default.createElement(Grid, {
     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__default.createElement(Grid, {
       item: true,
@@ -13530,7 +13760,9 @@ function ActionsToolbar(_ref3) {
       anchorEl: null
     },
     focusHandler = null,
-    actionsRefMock = null // for testing
+    actionsRefMock = null,
+    // for testing
+    direction = 'ltr'
   } = _ref3;
   const defaultSelectionActions = useDefaultSelectionActions(selections);
   const {
@@ -13603,12 +13835,16 @@ function ActionsToolbar(_ref3) {
   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__default.createElement(Grid, {
     ref: actionsRef,
     onKeyDown: tabCallback,
     container: true,
     gap: 0,
-    wrap: "nowrap"
+    wrap: "nowrap",
+    sx: {
+      flexDirection: isRtl ? 'row-reverse' : 'row'
+    }
   }, showActions && /*#__PURE__*/React__default.createElement(ActionsGroup, {
     actions: newActions,
     first: true,
@@ -13629,7 +13865,8 @@ function ActionsToolbar(_ref3) {
   })), selections.show && /*#__PURE__*/React__default.createElement(ActionsGroup, {
     actions: defaultSelectionActions,
     first: !showActions && !showMore,
-    last: true
+    last: true,
+    isRtl: isRtl
   }), showMoreItems && /*#__PURE__*/React__default.createElement(More$1, {
     show: showMoreItems,
     actions: moreActions,
@@ -13685,7 +13922,8 @@ const StyledOutlinedInput = styled$1(OutlinedInput)(_ref2 => {
     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) {
@@ -13698,7 +13936,9 @@ function ListBoxSearch(_ref3) {
     visible = true,
     autoFocus = true,
     wildCardSearch = false,
-    searchEnabled
+    searchEnabled,
+    direction,
+    hide
   } = _ref3;
   const {
     translator
@@ -13710,6 +13950,8 @@ function ListBoxSearch(_ref3) {
   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()) {
@@ -13782,6 +14024,16 @@ function ListBoxSearch(_ref3) {
         e.preventDefault();
         e.stopPropagation();
         break;
+      case 'f':
+      case 'F':
+        if (e.ctrlKey || e.metaKey) {
+          if (hide) {
+            hide();
+          }
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        break;
     }
     return response;
   };
@@ -13797,6 +14049,7 @@ function ListBoxSearch(_ref3) {
     className: "search",
     sx: [{
       border: 'none',
+      fontSize: 14,
       borderRadius: 0,
       backgroundColor: 'transparent',
       '& fieldset': {
@@ -13815,6 +14068,8 @@ function ListBoxSearch(_ref3) {
         paddingTop: '5px',
         paddingBottom: '5px'
       }
+    }, {
+      flexDirection: isRtl ? 'row-reverse' : 'row'
     }],
     inputRef: inputRef,
     size: "small",
@@ -13826,7 +14081,10 @@ function ListBoxSearch(_ref3) {
     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)
+      }
     }
   });
 }
@@ -14233,6 +14491,7 @@ function ListBoxPopover(_ref) {
   const open = show && Boolean(alignTo.current);
   const [listCount, setListCount] = useState$1(0);
   const theme = useTheme$1();
+  const searchContainerRef = useRef();
   const [model] = useSessionModel({
     qInfo: {
       qType: 'njsListbox'
@@ -14294,6 +14553,10 @@ function ListBoxPopover(_ref) {
     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__default.createElement(Popover, {
     open: open,
@@ -14360,7 +14623,10 @@ function ListBoxPopover(_ref) {
     xs: true
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: moreAlignTo
-  }), /*#__PURE__*/React__default.createElement(ListBoxSearch, {
+  }), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    ref: searchContainerRef
+  }, /*#__PURE__*/React__default.createElement(ListBoxSearch, {
     visible: true,
     model: model,
     listCount: listCount,
@@ -14370,13 +14636,15 @@ function ListBoxPopover(_ref) {
       enabled: false
     },
     autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : true
-  }), /*#__PURE__*/React__default.createElement(ListBox, {
+  })), /*#__PURE__*/React__default.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
   }))));
 }
 
@@ -15645,20 +15913,21 @@ const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
 var DrillDownIcon = (props => SvgIcon$2(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')
     }
   };
 };
@@ -15732,7 +16001,7 @@ const StyledGrid$3 = styled$1(Grid, {
     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)]: {
@@ -15743,18 +16012,25 @@ const StyledGrid$3 = styled$1(Grid, {
     },
     ["& .".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)(_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) {
@@ -15779,7 +16055,8 @@ function ListBoxInline(_ref3) {
     postProcessPages = undefined,
     calculatePagesHeight,
     showGray = true,
-    scrollState = undefined
+    scrollState = undefined,
+    renderedCallback
   } = options;
   let {
     toolbar = true
@@ -15894,6 +16171,7 @@ function ListBoxInline(_ref3) {
     return null;
   }
   const isLocked = layout.qListObject.qDimensionInfo.qLocked === true;
+  const isRtl = direction === 'rtl';
   const isDrillDown = layout.qListObject.qDimensionInfo.qGrouping === 'H';
   const listboxSelectionToolbarItems = createListboxSelectionToolbar({
     layout,
@@ -15901,24 +16179,31 @@ function ListBoxInline(_ref3) {
     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,
@@ -15933,6 +16218,7 @@ function ListBoxInline(_ref3) {
   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';
@@ -15940,7 +16226,9 @@ function ListBoxInline(_ref3) {
   if (isGridMode) {
     containerPadding = layoutOptions.layoutOrder === 'row' ? '2px 4px' : '2px 6px 2px 4px';
   }
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, toolbarDetachedOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, getActionToolbarProps(true)), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, toolbarDetachedOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$6({
+    direction: direction
+  }, getActionToolbarProps(true))), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
     container: true,
     tabIndex: keyboard.enabled && !keyboard.active ? 0 : -1,
@@ -15961,13 +16249,20 @@ function ListBoxInline(_ref3) {
     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__default.createElement(Grid, {
     item: true,
     container: true,
     height: headerHeight,
+    sx: {
+      flexDirection: isRtl ? 'row-reverse' : 'row'
+    },
     wrap: "nowrap"
   }, showIcons && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -15977,12 +16272,12 @@ function ListBoxInline(_ref3) {
       width: iconsWidth
     }
   }, isLocked ? /*#__PURE__*/React__default.createElement(IconButton, {
+    title: translator.get('SelectionToolbar.ClickToUnlock'),
     tabIndex: -1,
     onClick: unlock,
     disabled: selectDisabled(),
     size: "large"
   }, /*#__PURE__*/React__default.createElement(Lock, {
-    title: translator.get('Listbox.Unlock'),
     disableRipple: true,
     style: {
       fontSize: '12px'
@@ -16007,6 +16302,9 @@ function ListBoxInline(_ref3) {
     }
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
+    sx: {
+      justifyContent: isRtl ? 'flex-end' : 'flex-start'
+    },
     className: classes$4.listBoxHeader
   }, /*#__PURE__*/React__default.createElement(Title, {
     variant: "h6",
@@ -16018,17 +16316,19 @@ function ListBoxInline(_ref3) {
     xs: true
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, getActionToolbarProps(showToolbarDetached({
+  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$6({
+    direction: direction
+  }, getActionToolbarProps(showToolbarDetached({
     containerRef,
     titleRef,
     iconsWidth
-  }))))), /*#__PURE__*/React__default.createElement(Grid, {
+  })))))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
     direction: "column",
     style: {
       height: '100%',
-      minHeight: "".concat(minHeight, "px")
+      minHeight: '50px'
     },
     role: "region",
     "aria-label": translator.get('Listbox.ResultFilterLabel')
@@ -16046,9 +16346,10 @@ function ListBoxInline(_ref3) {
     visible: searchVisible,
     search: search,
     autoFocus: shouldAutoFocus,
-    searchContainerRef: searchContainerRef,
     wildCardSearch: wildCardSearch,
-    searchEnabled: searchEnabled
+    searchEnabled: searchEnabled,
+    direction: direction,
+    hide: showSearchIcon && onShowSearch
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true,
@@ -16062,6 +16363,7 @@ function ListBoxInline(_ref3) {
     } = _ref4;
     return /*#__PURE__*/React__default.createElement(ListBox, {
       model: model,
+      app: app,
       constraints: constraints,
       layout: layout,
       selections: selections,
@@ -16091,7 +16393,9 @@ function ListBoxInline(_ref3) {
       currentScrollIndex: {
         state: currentScrollIndex,
         set: setCurrentScrollIndex
-      }
+      },
+      renderedCallback: renderedCallback,
+      onCtrlF: onCtrlF
     });
   })))));
 }
@@ -16169,7 +16473,13 @@ function useOnTheFlyModel(_ref) {
         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);
@@ -16279,11 +16589,16 @@ function useOnTheFlyModel(_ref) {
     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);
   useEffect$1(() => {
@@ -16360,7 +16675,8 @@ function ListBoxWrapper(_ref) {
     qId,
     stateName,
     element,
-    options
+    options,
+    renderedCallback
   } = _ref;
   const {
     isExistingObject,
@@ -16391,7 +16707,8 @@ function ListBoxWrapper(_ref) {
   const opts = useMemo$1(() => _objectSpread2(_objectSpread2({}, options), {}, {
     selections,
     model,
-    app
+    app,
+    renderedCallback
   }), [options, selections, model, app]);
   if (!selections || !model) {
     return null;
@@ -16407,7 +16724,8 @@ function ListBoxPortal(_ref2) {
     fieldIdentifier,
     qId,
     stateName = '$',
-    options = {}
+    options = {},
+    renderedCallback
   } = _ref2;
   return ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(ListBoxWrapper, {
     app: app,
@@ -16415,7 +16733,8 @@ function ListBoxPortal(_ref2) {
     fieldIdentifier: fieldIdentifier,
     qId: qId,
     stateName: stateName,
-    options: options
+    options: options,
+    renderedCallback: renderedCallback
   }), element, uid());
 }
 
@@ -23634,6 +23953,7 @@ const mergeArray = function () {
 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),
@@ -23680,6 +24000,7 @@ function nuked() {
     });
     const appTheme$1 = appTheme({
       themes: configuration.themes,
+      loadTheme: configuration.loadTheme,
       root
     });
     currentContext.themeApi = appTheme$1.externalAPI;
@@ -23938,13 +24259,14 @@ function nuked() {
            * @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"));
@@ -23954,18 +24276,21 @@ function nuked() {
             }
             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.