@nebula.js/stardust 4.0.0-alpha.0 → 4.0.0-alpha.2

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.0.0-alpha.0
+* @nebula.js/stardust v4.0.0-alpha.2
 * 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) {
@@ -7756,7 +7801,7 @@ const light = {
       disabled: 'rgba(0, 0, 0, 0.3)'
     },
     action: {
-      active: colors.grey25,
+      active: '#545454',
       // color for actionable things like icon buttons
       hover: 'rgba(0, 0, 0, 0.03)',
       // color for hoverable things like list items
@@ -7896,10 +7941,21 @@ const overrides = theme => ({
       padding: 7,
       borderRadius: 2,
       border: '1px solid transparent',
-      // should ideally use $focusVisible, but that messes up focus in all other places where Iconbutton is used (Checkbox, Switch etc)
-      '&:focus': {
+      '&:hover': {
+        backgroundColor: theme.palette.btn.hover
+      },
+      '&:focus-visible': {
         borderColor: theme.palette.custom.focusBorder,
         boxShadow: "0 0 0 2px ".concat(theme.palette.custom.focusOutline)
+      },
+      '&:active': {
+        borderColor: 'transparent',
+        boxShadow: 'none',
+        backgroundColor: theme.palette.btn.active
+      },
+      '&:not(:active):not(:focus-visible)': {
+        borderColor: 'transparent',
+        boxShadow: 'none'
       }
     }
   },
@@ -7987,7 +8043,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "b1a6" ;
+const NEBULA_VERSION_HASH = "9a45" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8195,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.0" );
+  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.2" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   const root = client.createRoot(element);
@@ -9067,7 +9123,7 @@ function useSelectionsInteractions(_ref) {
     doSelect();
   }, []);
   const onMouseDown = useCallback(event => {
-    if (selectionState.selectDisabled()) {
+    if (event.button !== 0 || selectionState.selectDisabled()) {
       return;
     }
     const elemNumber = +event.currentTarget.getAttribute('data-n');
@@ -9088,7 +9144,7 @@ function useSelectionsInteractions(_ref) {
     handleSingleSelectKey(event, event.currentTarget);
   }, []);
   const onMouseUp = useCallback(event => {
-    if (!currentSelect.current.active) {
+    if (event.button !== 0 || !currentSelect.current.active) {
       return;
     }
     currentSelect.current.active = false;
@@ -9098,9 +9154,9 @@ function useSelectionsInteractions(_ref) {
     }
     doSelect();
   }, []);
-  const onMouseUpDoc = useCallback(() => {
+  const onMouseUpDoc = useCallback(event => {
     // Ensure we end interactions when mouseup happens outside the Listbox.
-    if (!currentSelect.current.active) {
+    if (event.button !== 0 || !currentSelect.current.active) {
       return;
     }
     currentSelect.current.active = false;
@@ -9127,17 +9183,19 @@ function useSelectionsInteractions(_ref) {
     };
   }, [onMouseUpDoc]);
   useEffect$1(() => {
-    const onDeactivated = () => {
+    const clearItemStates = () => {
       selectionState.clearItemStates(false);
     };
     const onCleared = () => {
       selectionState.clearItemStates(true);
       selectionState.triggerStateChanged();
     };
-    selections.on('deactivated', onDeactivated);
+    selections.on('clearItemStates', clearItemStates);
+    selections.on('deactivated', clearItemStates);
     selections.on('cleared', onCleared);
     return () => {
-      selections.removeListener('activated', onDeactivated);
+      selections.removeListener('clearItemStates', clearItemStates);
+      selections.removeListener('deactivated', clearItemStates);
       selections.removeListener('cleared', onCleared);
     };
   }, [selections]);
@@ -9367,15 +9425,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) {
@@ -9399,7 +9471,7 @@ function getListboxInlineKeyboardNavigation(_ref2) {
         focusInsideListbox(event.currentTarget);
         break;
       case KEYS.ESCAPE:
-        focusContainer(event.currentTarget);
+        changeFocus(event);
         break;
       case KEYS.ARROW_UP:
         updateKeyScrollOnHover({
@@ -9411,6 +9483,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
@@ -9538,28 +9614,20 @@ 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 ICON_PADDING = 7;
 const CELL_PADDING_LEFT = 9;
+const ICON_WIDTH = 12;
+const ICON_PADDING = 7;
+const BUTTON_ICON_WIDTH = ICON_WIDTH + (ICON_PADDING + 1) * 2; // 1 is border width
 
 const getSelectedStyle = _ref => {
   let {
@@ -9583,8 +9651,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 {
@@ -9593,7 +9663,9 @@ const RowColRoot = styled$1('div', {
     isGridMode,
     isGridCol,
     dense,
-    frequencyWidth
+    frequencyWidth,
+    showIcon,
+    checkboxes
   } = _ref2;
   return {
     '&:focus': {
@@ -9602,6 +9674,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
@@ -9630,7 +9710,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
@@ -9672,9 +9752,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({
@@ -9686,7 +9766,7 @@ const RowColRoot = styled$1('div', {
       theme
     })), {}, {
       background: theme.palette.selected.excluded,
-      color: theme.palette.selected.mainContrastText,
+      color: theme.palette.selected.excludedContrastText,
       border: isGridMode ? 'none' : undefined
     }),
     ["& .".concat(rowColClasses.A)]: {
@@ -9712,27 +9792,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',
@@ -9908,6 +9999,7 @@ function ValueField(_ref) {
     color: color,
     align: valueTextAlign
   }, /*#__PURE__*/React__default.createElement("span", {
+    dir: "auto",
     style: {
       whiteSpace: 'pre'
     }
@@ -10093,29 +10185,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) {
@@ -10140,9 +10230,7 @@ function Frequency(_ref) {
       cell,
       checkboxes
     }) && rowColClasses.excludedTextWithCheckbox])
-  }, getFrequencyText({
-    cell
-  })));
+  }, getFrequencyText(cell === null || cell === void 0 ? void 0 : cell.qFrequency)));
 }
 
 function getGridItemSizes(_ref) {
@@ -10243,6 +10331,7 @@ function RowColumn(_ref) {
     histogram = false,
     keyboard,
     showGray = true,
+    showTick: sizePermitsTick = true,
     columnCount = 1,
     rowCount = 1,
     dataOffset,
@@ -10305,7 +10394,7 @@ function RowColumn(_ref) {
     pages,
     cellIndex
   }), [pages, cellIndex]);
-  const isSelected = (cell === null || cell === void 0 ? void 0 : cell.qState) === 'S' || (cell === null || cell === void 0 ? void 0 : cell.qState) === 'XS' || (cell === null || cell === void 0 ? void 0 : cell.qState) === 'L';
+  const isSelected = (cell === null || cell === void 0 ? void 0 : cell.qState) === 'S' || (cell === null || cell === void 0 ? void 0 : cell.qState) === 'XS' || (cell === null || cell === void 0 ? void 0 : cell.qState) === 'L' || (cell === null || cell === void 0 ? void 0 : cell.qState) === 'XL';
   const classArr = useMemo$1(() => getValueStateClasses({
     column,
     histogram,
@@ -10314,10 +10403,6 @@ function RowColumn(_ref) {
     showGray
   }), [cell === null || cell === void 0 ? void 0 : cell.qState, histogram, dense, checkboxes]);
   const preventContextMenu = useCallback(event => {
-    if (checkboxes) {
-      // Event will not propagate in the checkbox/radiobutton case
-      onClick(event);
-    }
     event.preventDefault();
   }, [checkboxes]);
   if (!cell) {
@@ -10332,7 +10417,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';
   }
@@ -10351,22 +10440,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,
@@ -10392,8 +10485,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,
@@ -10435,14 +10528,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, {
@@ -11976,6 +12065,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
@@ -12007,20 +12098,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 = {
@@ -12054,8 +12148,10 @@ function getListBoxComponents(_ref) {
     histogram,
     keyboard,
     showGray,
+    showTick,
     dataOffset: local.current.dataOffset,
-    focusListItems
+    focusListItems,
+    direction
   });
   const List = _ref2 => {
     let {
@@ -12075,7 +12171,7 @@ function getListBoxComponents(_ref) {
       itemData: _objectSpread2(_objectSpread2({}, commonItemData), {}, {
         listCount
       }),
-      itemSize: itemSize,
+      itemSize: itemHeight,
       onItemsRendered: renderProps => {
         var _layout$qListObject, _layout$qListObject$q;
         setCurrentScrollIndex({
@@ -12106,14 +12202,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 => {
@@ -12152,7 +12247,7 @@ function getListBoxComponents(_ref) {
       columnCount: columnCount,
       columnWidth: columnWidth,
       rowCount: rowCount,
-      rowHeight: itemSize,
+      rowHeight: itemHeight,
       style: _objectSpread2({}, overflowStyling),
       itemData: _objectSpread2(_objectSpread2({}, commonItemData), {}, {
         column: undefined,
@@ -12169,11 +12264,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,
@@ -12182,7 +12331,8 @@ function getListSizes(_ref) {
     listCount,
     count,
     textWidth,
-    freqIsAllowed
+    freqIsAllowed,
+    checkboxes
   } = _ref;
   const {
     layoutOptions = {}
@@ -12195,50 +12345,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;
@@ -12255,9 +12415,9 @@ function getListSizes(_ref) {
     columnWidth,
     rowCount,
     overflowStyling,
-    itemSize,
+    itemHeight,
     listHeight,
-    scrollBarWidth,
+    scrollBarWidth: SCROLL_BAR_WIDTH,
     count,
     listCount: limitedListCount,
     maxCount: {
@@ -12306,9 +12466,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;
 }
@@ -12776,12 +12936,48 @@ 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 [frequencyMax, setFrequencyMax] = useState$1();
+  const needFetch = needToFetchFrequencyMax(layout);
+  useEffect$1(() => {
+    if (!needFetch) {
+      return;
+    }
+    const fetch = async () => {
+      const newValue = await getFrequencyMax(layout, app);
+      setFrequencyMax(newValue);
+    };
+    fetch();
+  }, [needFetch && layout]);
+  return needFetch ? frequencyMax : layout === null || layout === void 0 ? void 0 : layout.frequencyMax;
+};
+
 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,
@@ -12948,7 +13144,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.
@@ -13012,6 +13209,7 @@ function ListBox(_ref) {
       last
     }))
   });
+  const frequencyMax = useFrequencyMax(app, layout);
   const {
     List,
     Grid
@@ -13045,19 +13243,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, {
@@ -13233,6 +13432,7 @@ const Item = React__default.forwardRef((_ref, ref) => {
     style: style,
     className: ActionElement.className,
     size: "large",
+    disableRipple: true,
     "aria-expanded": ariaExpanded,
     "aria-controls": "moreMenuList"
   }, hasSvgIconShape && SvgIcon$2(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React__default.createElement("div", {
@@ -13415,6 +13615,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")
@@ -13451,25 +13652,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,
@@ -13518,7 +13721,9 @@ function ActionsToolbar(_ref3) {
       anchorEl: null
     },
     focusHandler = null,
-    actionsRefMock = null // for testing
+    actionsRefMock = null,
+    // for testing
+    direction = 'ltr'
   } = _ref3;
   const defaultSelectionActions = useDefaultSelectionActions(selections);
   const {
@@ -13591,12 +13796,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,
@@ -13617,7 +13826,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,
@@ -13640,7 +13850,7 @@ function ActionsToolbar(_ref3) {
       className: ActionToolbarElement.className,
       style: {
         pointerEvents: 'auto',
-        padding: theme.spacing(1, 1)
+        padding: theme.spacing(0.8)
       }
     }
   }, Actions) : show && Actions;
@@ -13673,7 +13883,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) {
@@ -13686,7 +13897,8 @@ function ListBoxSearch(_ref3) {
     visible = true,
     autoFocus = true,
     wildCardSearch = false,
-    searchEnabled
+    searchEnabled,
+    direction
   } = _ref3;
   const {
     translator
@@ -13698,6 +13910,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()) {
@@ -13785,6 +13999,7 @@ function ListBoxSearch(_ref3) {
     className: "search",
     sx: [{
       border: 'none',
+      fontSize: 14,
       borderRadius: 0,
       backgroundColor: 'transparent',
       '& fieldset': {
@@ -13803,6 +14018,8 @@ function ListBoxSearch(_ref3) {
         paddingTop: '5px',
         paddingBottom: '5px'
       }
+    }, {
+      flexDirection: isRtl ? 'row-reverse' : 'row'
     }],
     inputRef: inputRef,
     size: "small",
@@ -13814,7 +14031,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)
+      }
     }
   });
 }
@@ -14360,6 +14580,7 @@ function ListBoxPopover(_ref) {
     autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : true
   }), /*#__PURE__*/React__default.createElement(ListBox, {
     model: model,
+    app: app,
     layout: layout,
     selections: selections,
     selectionState: selectionState$1,
@@ -15633,27 +15854,77 @@ 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')
     }
   };
 };
 
+function showToolbarDetached(_ref) {
+  var _containerRef$current, _containerRef$current2, _titleRef$current$cli, _titleRef$current, _titleRef$current2, _titleRef$current3;
+  let {
+    containerRef,
+    titleRef,
+    iconsWidth
+  } = _ref;
+  const containerWidth = (_containerRef$current = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.clientWidth) !== null && _containerRef$current !== void 0 ? _containerRef$current : 0;
+  const padding = 16;
+  const contentWidth = ((_titleRef$current$cli = titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.clientWidth) !== null && _titleRef$current$cli !== void 0 ? _titleRef$current$cli : 0) + iconsWidth + padding;
+  const actionToolbarWidth = 128;
+  const notSufficientSpace = containerWidth < contentWidth + actionToolbarWidth;
+  const isTruncated = (titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current2 = titleRef.current) === null || _titleRef$current2 === void 0 ? void 0 : _titleRef$current2.scrollWidth) > (titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current3 = titleRef.current) === null || _titleRef$current3 === void 0 ? void 0 : _titleRef$current3.offsetWidth);
+  return !!(notSufficientSpace | isTruncated);
+}
+
+function getListboxActionProps(_ref) {
+  let {
+    isPopover,
+    showToolbar,
+    containerRef,
+    isLocked,
+    listboxSelectionToolbarItems,
+    selections
+  } = _ref;
+  return {
+    show: showToolbar && !isPopover,
+    popover: {
+      show: showToolbar && isPopover,
+      anchorEl: containerRef.current
+    },
+    more: {
+      enabled: !isLocked,
+      actions: listboxSelectionToolbarItems,
+      popoverProps: {
+        elevation: 0
+      },
+      popoverPaperStyle: {
+        boxShadow: '0 12px 8px -8px rgba(0, 0, 0, 0.2)',
+        minWidth: '250px'
+      }
+    },
+    selections: {
+      show: showToolbar,
+      api: selections,
+      onConfirm: () => {},
+      onCancel: () => {}
+    }
+  };
+}
+
 const PREFIX$4 = 'ListBoxInline';
-const searchIconWidth = 28;
-const drillDownIconWidth = 24;
 const classes$4 = {
   listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader"),
   screenReaderOnly: "".concat(PREFIX$4, "-screenReaderOnly"),
@@ -15671,8 +15942,8 @@ 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',
-      width: "calc(100% - ".concat(searchIconWidth, "px)")
+      display: 'flex',
+      width: "calc(100% - ".concat(BUTTON_ICON_WIDTH, "px)")
     },
     ["& .".concat(classes$4.screenReaderOnly)]: {
       position: 'absolute',
@@ -15682,18 +15953,25 @@ const StyledGrid$3 = styled$1(Grid, {
     },
     ["& .".concat(classes$4.listboxWrapper)]: {
       padding: containerPadding
+    },
+    '&:focus': {
+      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) {
@@ -15746,7 +16024,6 @@ function ListBoxInline(_ref3) {
     constraints
   } = useContext(InstanceContext);
   theme.listBox = addListboxTheme(themeApi);
-  const moreAlignTo = useRef();
   const containerRef = useRef();
   const [searchContainer, searchContainerRef] = useRefWithCallback();
   const [showToolbar, setShowToolbar] = useState$1(false);
@@ -15764,6 +16041,7 @@ function ListBoxInline(_ref3) {
     stop: 0
   });
   const [appSelections] = useAppSelections(app);
+  const titleRef = useRef(null);
   const [selectionState$1] = useState$1(() => selectionState());
   const {
     handleKeyDown,
@@ -15790,6 +16068,7 @@ function ListBoxInline(_ref3) {
   if ((layout === null || layout === void 0 ? void 0 : layout.toolbar) !== undefined) {
     toolbar = layout.toolbar;
   }
+  const toolbarDetachedOnly = toolbar && (layout === null || layout === void 0 ? void 0 : layout.title) === '';
   toolbar = toolbar && (layout === null || layout === void 0 ? void 0 : layout.title) !== '';
   useEffect$1(() => {
     const show = () => {
@@ -15806,15 +16085,15 @@ function ListBoxInline(_ref3) {
     };
     if (selections) {
       if (!selections.isModal()) {
-        selections.on('deactivated', hide);
         selections.on('activated', show);
+        selections.on('deactivated', hide);
       }
       setShowToolbar(selections.isActive());
     }
     return () => {
       if (selections && selections.removeListener) {
-        selections.removeListener('deactivated', show);
-        selections.removeListener('activated', hide);
+        selections.removeListener('activated', show);
+        selections.removeListener('deactivated', hide);
       }
     };
   }, [selections, toolbar]);
@@ -15832,38 +16111,46 @@ 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 = toolbar ? createListboxSelectionToolbar({
+  const listboxSelectionToolbarItems = createListboxSelectionToolbar({
     layout,
     model,
     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 getActionToolbarProps = isPopover => getListboxActionProps({
+    isPopover,
+    showToolbar,
+    containerRef,
+    isLocked,
+    listboxSelectionToolbarItems,
+    selections
+  });
   const shouldAutoFocus = searchVisible && search === 'toggle';
   const showSearchIcon = searchEnabled !== false && search === 'toggle' && !(constraints !== null && constraints !== void 0 && constraints.active);
   const showSearchOrLockIcon = isLocked || showSearchIcon;
   const showIcons = showSearchOrLockIcon || isDrillDown;
-  const iconsWidth = (showSearchOrLockIcon ? searchIconWidth : 0) + (isDrillDown ? drillDownIconWidth : 0);
-  const drillDownPaddingLeft = showSearchOrLockIcon ? 0 : ICON_PADDING;
-  const headerPaddingLeft = CELL_PADDING_LEFT - (showIcons ? ICON_PADDING : 0);
+  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';
@@ -15871,7 +16158,9 @@ function ListBoxInline(_ref3) {
   if (isGridMode) {
     containerPadding = layoutOptions.layoutOrder === 'row' ? '2px 4px' : '2px 6px 2px 4px';
   }
-  return /*#__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,
@@ -15892,13 +16181,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,
@@ -15908,12 +16204,13 @@ 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'
     }
@@ -15922,66 +16219,52 @@ function ListBoxInline(_ref3) {
     tabIndex: -1,
     title: translator.get('Listbox.Search'),
     size: "large",
+    disableRipple: true,
     "data-testid": "search-toggle-btn"
   }, /*#__PURE__*/React__default.createElement(SearchIcon, {
     style: {
       fontSize: '12px'
     }
-  })), isDrillDown && /*#__PURE__*/React__default.createElement(IconButton, {
+  })), isDrillDown && /*#__PURE__*/React__default.createElement(DrillDownIcon, {
     tabIndex: -1,
     title: translator.get('Listbox.DrillDown'),
     size: "large",
-    sx: {
-      paddingLeft: "".concat(drillDownPaddingLeft, "px")
-    }
-  }, /*#__PURE__*/React__default.createElement(DrillDownIcon, {
     style: {
       fontSize: '12px'
     }
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
+  })), /*#__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",
     noWrap: true,
+    ref: titleRef,
     title: layout.title
   }, layout.title))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, {
-    more: {
-      enabled: !isLocked,
-      actions: listboxSelectionToolbarItems,
-      alignTo: moreAlignTo,
-      popoverProps: {
-        elevation: 0
-      },
-      popoverPaperStyle: {
-        boxShadow: '0 12px 8px -8px rgba(0, 0, 0, 0.2)',
-        minWidth: '250px'
-      }
-    },
-    selections: {
-      show: showToolbar,
-      api: selections,
-      onConfirm: () => {},
-      onCancel: () => {}
-    }
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$6({
+    direction: direction
+  }, getActionToolbarProps(showToolbarDetached({
+    containerRef,
+    titleRef,
+    iconsWidth
+  })))))), /*#__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')
-  }, /*#__PURE__*/React__default.createElement("div", {
-    ref: moreAlignTo
-  }), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     ref: searchContainerRef
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -15997,7 +16280,8 @@ function ListBoxInline(_ref3) {
     autoFocus: shouldAutoFocus,
     searchContainerRef: searchContainerRef,
     wildCardSearch: wildCardSearch,
-    searchEnabled: searchEnabled
+    searchEnabled: searchEnabled,
+    direction: direction
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true,
@@ -16011,6 +16295,7 @@ function ListBoxInline(_ref3) {
     } = _ref4;
     return /*#__PURE__*/React__default.createElement(ListBox, {
       model: model,
+      app: app,
       constraints: constraints,
       layout: layout,
       selections: selections,
@@ -16042,7 +16327,7 @@ function ListBoxInline(_ref3) {
         set: setCurrentScrollIndex
       }
     });
-  }))));
+  })))));
 }
 const ListBoxInlineMemoed = React__default.memo(ListBoxInline);
 function IsolateUseLayoutWrapper(_ref5) {
@@ -16118,7 +16403,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);
@@ -16228,11 +16519,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(() => {
@@ -16336,7 +16632,7 @@ function ListBoxWrapper(_ref) {
     options
   });
   const elementRef = useRef(element);
-  const selections = hasExternalSelectionsApi ? options.selectionsApi : useObjectSelections(app, model, [elementRef, '.njs-action-toolbar-more'], options)[0];
+  const selections = hasExternalSelectionsApi ? options.selectionsApi : useObjectSelections(app, model, [elementRef, '.njs-action-toolbar-more', '.njs-action-toolbar-popover'], options)[0];
   const opts = useMemo$1(() => _objectSpread2(_objectSpread2({}, options), {}, {
     selections,
     model,
@@ -23583,6 +23879,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),
@@ -23629,6 +23926,7 @@ function nuked() {
     });
     const appTheme$1 = appTheme({
       themes: configuration.themes,
+      loadTheme: configuration.loadTheme,
       root
     });
     currentContext.themeApi = appTheme$1.externalAPI;