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

package/dist/stardust.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.
 */
@@ -1040,6 +1040,26 @@
 			"zh-TW": "解除"
 		}
 	};
+	var Listbox_DrillDown = {
+		id: "Listbox.DrillDown",
+		locale: {
+			"de-DE": "Drilldown-Dimension",
+			"en-US": "Drill-down dimension",
+			"es-ES": "Dimensión jerárquica",
+			"fr-FR": "Dimension hiérarchique",
+			"it-IT": "Dimensione drill-down",
+			"ja-JP": "軸のドリルダウン",
+			"ko-KR": "드릴다운 차원",
+			"nl-NL": "Drill-downdimensie",
+			"pl-PL": "Wymiar hierarchiczny",
+			"pt-BR": "Dimensão de detalhamento",
+			"ru-RU": "Детализированное измерение",
+			"sv-SE": "Hierarkisk dimension",
+			"tr-TR": "Detaya inme boyutu",
+			"zh-CN": "钻取维度",
+			"zh-TW": "向下探查維度"
+		}
+	};
 	var Listbox_ItemsOverflow = {
 		id: "Listbox.ItemsOverflow",
 		locale: {
@@ -1680,17 +1700,12 @@
 			"zh-TW": "不符計算條件"
 		}
 	};
-	var Listbox_DrillDown = {
-		id: "Listbox.DrillDown",
-		locale: {
-			"en-US": "Drill-down dimension"
-		}
-	};
 	var all = {
 		Cancel: Cancel$1,
 		CurrentSelections_All: CurrentSelections_All,
 		CurrentSelections_Of: CurrentSelections_Of,
 		Listbox_Dismiss: Listbox_Dismiss,
+		Listbox_DrillDown: Listbox_DrillDown,
 		Listbox_ItemsOverflow: Listbox_ItemsOverflow,
 		Listbox_Lock: Listbox_Lock,
 		Listbox_NoMatchesForYourTerms: Listbox_NoMatchesForYourTerms,
@@ -1722,8 +1737,7 @@
 		Visualization_Invalid_Dimension: Visualization_Invalid_Dimension,
 		Visualization_Invalid_Measure: Visualization_Invalid_Measure,
 		Visualization_LayoutError: Visualization_LayoutError,
-		Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition,
-		Listbox_DrillDown: Listbox_DrillDown
+		Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition
 	};
 
 	function appLocaleFn(language) {
@@ -2804,9 +2818,34 @@
 		color: color$1
 	};
 
+	var object = {
+		listBox: {
+			backgroundColor: "#ffffff",
+			title: {
+				main: {
+					color: "#404040",
+					fontSize: "14px",
+					fontWeight: "bold"
+				}
+			},
+			content: {
+				color: "#404040",
+				fontSize: "12px"
+			}
+		}
+	};
+	var baseInheritRawJSON = {
+		object: object
+	};
+
+	/* eslint no-underscore-dangle:0 */
 	function setTheme(t, resolve) {
 	  const colorRawJSON = t.type === 'dark' ? darkRawJSON : lightRawJSON;
-	  const root = extend$1(true, {}, baseRawJSON, colorRawJSON);
+	  let baseInherit = baseInheritRawJSON;
+	  if (t._inherit === false || t._inherit === 'false') {
+	    baseInherit = {};
+	  }
+	  const root = extend$1(true, {}, baseRawJSON, colorRawJSON, baseInherit);
 	  // avoid merging known array objects as it could cause issues if they are of different types (pyramid vs class) or length
 	  const rawThemeJSON = extend$1(true, {}, root, {
 	    scales: null,
@@ -3450,15 +3489,21 @@
 	function appTheme() {
 	  let {
 	    themes = [],
+	    loadTheme,
 	    root
 	  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 	  const wrappedTheme = theme();
 	  const setTheme = async themeId => {
-	    const found = themes.filter(t => t.id === themeId)[0];
+	    let found = themes.filter(t => t.id === themeId)[0];
 	    let muiTheme = themeId === 'dark' ? 'dark' : 'light';
+	    if (!found && loadTheme) {
+	      found = {
+	        load: loadTheme
+	      };
+	    }
 	    if (found && found.load) {
 	      try {
-	        const raw = await Promise.race([found.load(), timed(LOAD_THEME_TIMEOUT, {
+	        const raw = await Promise.race([found.load(themeId), timed(LOAD_THEME_TIMEOUT, {
 	          __timedOut: true
 	        })]);
 	        if (raw.__timedOut) {
@@ -15112,7 +15157,7 @@
 	      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
@@ -15252,10 +15297,21 @@
 	      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'
 	      }
 	    }
 	  },
@@ -15343,7 +15399,7 @@
 	  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', ''));
 	});
@@ -15551,7 +15607,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.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);
@@ -21698,7 +21754,7 @@
 	    doSelect();
 	  }, []);
 	  const onMouseDown = reactExports.useCallback(event => {
-	    if (selectionState.selectDisabled()) {
+	    if (event.button !== 0 || selectionState.selectDisabled()) {
 	      return;
 	    }
 	    const elemNumber = +event.currentTarget.getAttribute('data-n');
@@ -21719,7 +21775,7 @@
 	    handleSingleSelectKey(event, event.currentTarget);
 	  }, []);
 	  const onMouseUp = reactExports.useCallback(event => {
-	    if (!currentSelect.current.active) {
+	    if (event.button !== 0 || !currentSelect.current.active) {
 	      return;
 	    }
 	    currentSelect.current.active = false;
@@ -21729,9 +21785,9 @@
 	    }
 	    doSelect();
 	  }, []);
-	  const onMouseUpDoc = reactExports.useCallback(() => {
+	  const onMouseUpDoc = reactExports.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;
@@ -21758,17 +21814,19 @@
 	    };
 	  }, [onMouseUpDoc]);
 	  reactExports.useEffect(() => {
-	    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]);
@@ -21998,15 +22056,29 @@
 	    constraints
 	  } = _ref2;
 	  const focusInsideListbox = element => {
-	    const fieldElement = element.querySelector('.search input, .value.selector, .value, .ActionsToolbar-* button');
+	    const fieldElement = element.querySelector('.search input, .value.selector, .value, .ActionsToolbar-item button');
 	    setKeyboardActive(true);
 	    if (fieldElement) {
 	      fieldElement.focus();
 	    }
 	  };
-	  const focusContainer = element => {
-	    setKeyboardActive(false);
-	    element.focus();
+	  const changeFocus = event => {
+	    var _event$target;
+	    if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.classList.contains('listbox-container')) {
+	      // Focus currently on a listbox
+	      // Esc on a list box should move the focus to its parent, i.e. a filter pane if any
+	      setKeyboardActive(false);
+	    } else {
+	      var _event$target2, _event$target3, _event$currentTarget, _event$currentTarget2;
+	      // Focus currently on a row
+	      // Esc on a row should move the focus to its parent, i.e. a listbox
+	      // First unfocus the row
+	      (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.setAttribute('tabIndex', '-1');
+	      (_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.blur();
+	      // Then focus the listbox
+	      (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.setAttribute('tabIndex', '0');
+	      (_event$currentTarget2 = event.currentTarget) === null || _event$currentTarget2 === void 0 ? void 0 : _event$currentTarget2.focus();
+	    }
 	  };
 	  const updateKeyScrollOnHover = newState => {
 	    if (hovering) {
@@ -22030,7 +22102,7 @@
 	        focusInsideListbox(event.currentTarget);
 	        break;
 	      case KEYS.ESCAPE:
-	        focusContainer(event.currentTarget);
+	        changeFocus(event);
 	        break;
 	      case KEYS.ARROW_UP:
 	        updateKeyScrollOnHover({
@@ -22042,6 +22114,10 @@
 	          down: 1
 	        });
 	        break;
+	      case KEYS.ARROW_LEFT:
+	      case KEYS.ARROW_RIGHT:
+	        return;
+	      // let it propagate to top-level
 	      case KEYS.PAGE_UP:
 	        updateKeyScrollOnHover({
 	          up: currentScrollIndex.stop - currentScrollIndex.start
@@ -22169,28 +22245,20 @@
 	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 {
@@ -22214,8 +22282,10 @@
 	  textOverflow: 'ellipsis',
 	  whiteSpace: 'nowrap'
 	};
+	const iconWidth = 24; // tick and lock icon width in px
+
 	const RowColRoot = styled$1('div', {
-	  shouldForwardProp: prop => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense', 'frequencyWidth'].includes(prop)
+	  shouldForwardProp: prop => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense', 'frequencyWidth', 'showIcon', 'checkboxes'].includes(prop)
 	})(_ref2 => {
 	  var _theme$listBox$conten, _theme$listBox, _theme$listBox$conten2, _theme$listBox$conten3, _theme$listBox2, _theme$listBox2$conte, _theme$listBox3, _theme$listBox3$conte, _theme$listBox4, _theme$listBox4$conte;
 	  let {
@@ -22224,7 +22294,9 @@
 	    isGridMode,
 	    isGridCol,
 	    dense,
-	    frequencyWidth
+	    frequencyWidth,
+	    showIcon,
+	    checkboxes
 	  } = _ref2;
 	  return {
 	    '&:focus': {
@@ -22233,6 +22305,14 @@
 	    '&:focus-visible': {
 	      outline: 'none'
 	    },
+	    '& .value': {
+	      '&:focus': {
+	        boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
+	      },
+	      '&:focus-visible': {
+	        outline: 'none'
+	      }
+	    },
 	    ["& .".concat(rowColClasses.row)]: {
 	      flexWrap: 'nowrap',
 	      color: (_theme$listBox$conten = (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : (_theme$listBox$conten2 = _theme$listBox.content) === null || _theme$listBox$conten2 === void 0 ? void 0 : _theme$listBox$conten2.color) !== null && _theme$listBox$conten !== void 0 ? _theme$listBox$conten : theme.palette.text.primary
@@ -22261,7 +22341,7 @@
 	      flexBasis: flexBasisProp,
 	      lineHeight: '16px',
 	      userSelect: 'none',
-	      paddingRight: '1px'
+	      paddingRight: showIcon || checkboxes ? '1px' : "".concat(iconWidth, "px")
 	    }, ellipsis), {}, {
 	      whiteSpace: 'pre',
 	      // to keep white-space on highlight
@@ -22303,9 +22383,9 @@
 	    ["& .".concat(rowColClasses.icon)]: {
 	      display: 'flex',
 	      justifyContent: 'center',
-	      width: 24,
-	      minWidth: 24,
-	      maxWidth: 24
+	      width: iconWidth,
+	      minWidth: iconWidth,
+	      maxWidth: iconWidth
 	    },
 	    // Selection styles (S=Selected, XS=ExcludedSelected, A=Available, X=Excluded).
 	    ["& .".concat(rowColClasses.S)]: _objectSpread2(_objectSpread2({}, getSelectedStyle({
@@ -22317,7 +22397,7 @@
 	      theme
 	    })), {}, {
 	      background: theme.palette.selected.excluded,
-	      color: theme.palette.selected.mainContrastText,
+	      color: theme.palette.selected.excludedContrastText,
 	      border: isGridMode ? 'none' : undefined
 	    }),
 	    ["& .".concat(rowColClasses.A)]: {
@@ -22343,27 +22423,38 @@
 	      alignItems: 'center'
 	    },
 	    ["& .".concat(rowColClasses.bar)]: {
-	      border: "".concat(barBorderWidthPx, "px solid"),
-	      borderColor: '#D9D9D9',
 	      height: dense ? '16px' : '20px',
 	      position: 'absolute',
 	      zIndex: '-1',
 	      alignSelf: 'center',
-	      left: "".concat(barPadPx, "px"),
-	      transition: 'width 0.2s',
-	      backgroundColor: '#FAFAFA'
+	      left: barPadPx,
+	      width: "calc(100% - ".concat(barPadPx * 2, "px)"),
+	      display: 'flex',
+	      alignItems: 'center',
+	      '& .bar-filled': {
+	        border: "".concat(barBorderWidthPx, "px solid"),
+	        borderColor: '#D9D9D9',
+	        transition: 'width 0.2s',
+	        backgroundColor: '#FAFAFA',
+	        height: '100%'
+	      }
 	    },
 	    ["& .".concat(rowColClasses.barSelected)]: {
-	      opacity: '30%',
 	      zIndex: '0',
-	      background: theme.palette.background.lighter
+	      '& .bar-filled': {
+	        opacity: '30%',
+	        background: theme.palette.background.lighter
+	      }
 	    },
 	    ["& .".concat(rowColClasses.barWithCheckbox)]: {
-	      left: "".concat(barWithCheckboxLeftPadPx, "px")
+	      left: barWithCheckboxLeftPadPx,
+	      width: "calc(100% - ".concat(barWithCheckboxLeftPadPx + barPadPx, "px)")
 	    },
 	    ["& .".concat(rowColClasses.barSelectedWithCheckbox)]: {
-	      background: '#BFE5D0',
-	      borderColor: '#BFE5D0'
+	      '& .bar-filled': {
+	        background: '#BFE5D0',
+	        borderColor: '#BFE5D0'
+	      }
 	    },
 	    ["& .".concat(rowColClasses.excludedTextWithCheckbox)]: {
 	      color: '#828282',
@@ -22539,6 +22630,7 @@
 	    color: color,
 	    align: valueTextAlign
 	  }, /*#__PURE__*/React.createElement("span", {
+	    dir: "auto",
 	    style: {
 	      whiteSpace: 'pre'
 	    }
@@ -22724,29 +22816,27 @@
 
 	function Histogram(_ref) {
 	  let {
-	    cell,
+	    qFrequency,
 	    histogram,
 	    checkboxes,
 	    isSelected,
 	    frequencyMax
 	  } = _ref;
-	  const hasHistogramBar = cell && histogram && getFrequencyText({
-	    cell
-	  }) !== frequencyTextNone;
+	  const hasHistogramBar = qFrequency && histogram && getFrequencyText(qFrequency) !== frequencyTextNone;
 	  if (!hasHistogramBar) {
 	    return undefined;
 	  }
 	  const width = getBarWidth({
-	    qFrequency: cell.qFrequency,
+	    qFrequency,
 	    checkboxes,
 	    frequencyMax
 	  });
-	  return /*#__PURE__*/React.createElement("div", {
-	    className: joinClassNames([rowColClasses.bar, checkboxes && rowColClasses.barWithCheckbox, isSelected && (checkboxes ? rowColClasses.barSelectedWithCheckbox : rowColClasses.barSelected)]),
-	    style: {
-	      width
-	    }
-	  });
+	  return /*#__PURE__*/React.createElement(Box$1, {
+	    className: joinClassNames([rowColClasses.bar, checkboxes && rowColClasses.barWithCheckbox, isSelected && (checkboxes ? rowColClasses.barSelectedWithCheckbox : rowColClasses.barSelected)])
+	  }, /*#__PURE__*/React.createElement(Box$1, {
+	    className: "bar-filled",
+	    width: width
+	  }));
 	}
 
 	function Frequency(_ref) {
@@ -22771,9 +22861,7 @@
 	      cell,
 	      checkboxes
 	    }) && rowColClasses.excludedTextWithCheckbox])
-	  }, getFrequencyText({
-	    cell
-	  })));
+	  }, getFrequencyText(cell === null || cell === void 0 ? void 0 : cell.qFrequency)));
 	}
 
 	function getGridItemSizes(_ref) {
@@ -22874,6 +22962,7 @@
 	    histogram = false,
 	    keyboard,
 	    showGray = true,
+	    showTick: sizePermitsTick = true,
 	    columnCount = 1,
 	    rowCount = 1,
 	    dataOffset,
@@ -22936,7 +23025,7 @@
 	    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 = reactExports.useMemo(() => getValueStateClasses({
 	    column,
 	    histogram,
@@ -22945,10 +23034,6 @@
 	    showGray
 	  }), [cell === null || cell === void 0 ? void 0 : cell.qState, histogram, dense, checkboxes]);
 	  const preventContextMenu = reactExports.useCallback(event => {
-	    if (checkboxes) {
-	      // Event will not propagate in the checkbox/radiobutton case
-	      onClick(event);
-	    }
 	    event.preventDefault();
 	  }, [checkboxes]);
 	  if (!cell) {
@@ -22963,7 +23048,11 @@
 	    ltr: 'left'
 	  };
 	  if (isAutoTextAlign) {
-	    valueTextAlign = isNumeric ? 'right' : dirToTextAlignMap[direction];
+	    if (!isNumeric) {
+	      valueTextAlign = dirToTextAlignMap[direction];
+	    } else {
+	      valueTextAlign = direction === 'rtl' ? 'left' : 'right';
+	    }
 	  } else {
 	    valueTextAlign = (textAlign === null || textAlign === void 0 ? void 0 : textAlign.align) || 'left';
 	  }
@@ -22982,22 +23071,26 @@
 	    display: 'flex',
 	    fontSize: '8px'
 	  };
-	  const showLock = isSelected && isLocked;
-	  const showTick = !checkboxes && isSelected && !isLocked;
 	  const cellStyle = {
 	    display: 'flex',
 	    alignItems: 'center',
 	    minWidth: 0,
 	    flexGrow: 1,
-	    paddingLeft: checkboxes ? 0 : undefined,
+	    paddingLeft: direction === 'rtl' ? 8 : checkboxes ? 0 : undefined,
+	    paddingRight: checkboxes ? 0 : direction === 'rtl' ? 8 : 0,
 	    justifyContent: valueTextAlign
 	  };
 	  const isFirstElement = index === 0;
 	  const flexBasisVal = checkboxes ? 'auto' : 'max-content';
+	  const showLock = isSelected && isLocked;
+	  const showTick = !checkboxes && isSelected && !isLocked && sizePermitsTick;
+	  const showIcon = !checkboxes && (showTick || showLock);
 	  return /*#__PURE__*/React.createElement(RowColRoot$1, {
 	    className: rowColClasses.barContainer,
 	    flexBasisProp: flexBasisVal,
 	    style: styles,
+	    showIcon: showIcon,
+	    checkboxes: checkboxes,
 	    isGridCol: isGridCol,
 	    isGridMode: dataLayout === 'grid',
 	    dense: dense,
@@ -23023,8 +23116,8 @@
 	    role: column ? 'column' : 'row',
 	    tabIndex: isFirstElement && (!keyboard.enabled || keyboard.active) ? 0 : -1,
 	    "data-n": cell === null || cell === void 0 ? void 0 : cell.qElemNumber
-	  }, /*#__PURE__*/React.createElement(Histogram, {
-	    cell: cell,
+	  }, (cell === null || cell === void 0 ? void 0 : cell.qFrequency) && /*#__PURE__*/React.createElement(Histogram, {
+	    qFrequency: cell === null || cell === void 0 ? void 0 : cell.qFrequency,
 	    histogram: histogram,
 	    checkboxes: checkboxes,
 	    isSelected: isSelected,
@@ -23066,14 +23159,10 @@
 	    checkboxes: checkboxes,
 	    dense: dense,
 	    showGray: showGray
-	  }), !checkboxes && /*#__PURE__*/React.createElement(Grid$1, {
+	  }), showIcon && /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    className: rowColClasses.icon
-	  }, !showLock && !showTick && /*#__PURE__*/React.createElement("span", {
-	    style: {
-	      minWidth: '12px'
-	    }
-	  }), showLock && /*#__PURE__*/React.createElement(Lock, {
+	  }, showLock && /*#__PURE__*/React.createElement(Lock, {
 	    style: iconStyles,
 	    size: "small"
 	  }), showTick && /*#__PURE__*/React.createElement(Tick, {
@@ -24607,6 +24696,8 @@
 	  overflowDisclaimer.set(show);
 	}
 
+	const REMOVE_TICK_LIMIT = 80; // an item width equal to or less than this, will hide the select tick
+
 	const {
 	  StyledFixedSizeList,
 	  StyledFixedSizeGrid
@@ -24638,20 +24729,23 @@
 	    focusListItems,
 	    setCurrentScrollIndex,
 	    constraints,
+	    frequencyMax,
 	    freqIsAllowed
 	  } = _ref;
 	  const {
-	    layoutOptions = {},
-	    frequencyMax
+	    layoutOptions = {}
 	  } = layout || {};
 	  const {
+	    columnWidth,
 	    itemPadding,
 	    listHeight,
-	    itemSize,
+	    itemHeight,
 	    rowCount,
 	    columnCount,
 	    frequencyWidth
 	  } = sizes || {};
+	  const itemWidth = layoutOptions.dataLayout === 'grid' ? columnWidth : width;
+	  const showTick = itemWidth > REMOVE_TICK_LIMIT;
 
 	  // Options common for List and Grid.
 	  const commonComponentOptions = {
@@ -24685,8 +24779,10 @@
 	    histogram,
 	    keyboard,
 	    showGray,
+	    showTick,
 	    dataOffset: local.current.dataOffset,
-	    focusListItems
+	    focusListItems,
+	    direction
 	  });
 	  const List = _ref2 => {
 	    let {
@@ -24706,7 +24802,7 @@
 	      itemData: _objectSpread2(_objectSpread2({}, commonItemData), {}, {
 	        listCount
 	      }),
-	      itemSize: itemSize,
+	      itemSize: itemHeight,
 	      onItemsRendered: renderProps => {
 	        var _layout$qListObject, _layout$qListObject$q;
 	        setCurrentScrollIndex({
@@ -24737,14 +24833,13 @@
 	      ref
 	    } = _ref3;
 	    const {
-	      columnWidth,
 	      overflowStyling,
 	      scrollBarWidth
 	    } = sizes;
 	    const {
 	      layoutOrder
 	    } = layoutOptions || {};
-	    const gridHeight = Math.min(listHeight, rowCount * itemSize + scrollBarWidth);
+	    const gridHeight = Math.min(listHeight, rowCount * itemHeight + scrollBarWidth);
 	    // eslint-disable-next-line no-param-reassign
 	    local.current.listRef = ref;
 	    const handleGridItemsRendered = renderProps => {
@@ -24783,7 +24878,7 @@
 	      columnCount: columnCount,
 	      columnWidth: columnWidth,
 	      rowCount: rowCount,
-	      rowHeight: itemSize,
+	      rowHeight: itemHeight,
 	      style: _objectSpread2({}, overflowStyling),
 	      itemData: _objectSpread2(_objectSpread2({}, commonItemData), {}, {
 	        column: undefined,
@@ -24800,11 +24895,65 @@
 	  };
 	}
 
-	const scrollBarWidth = 10; // TODO: ignore this - instead set the styling only show on hover...
+	function calculateColumnMode(_ref) {
+	  let {
+	    maxVisibleRows,
+	    itemHeight,
+	    listCount,
+	    listHeight,
+	    columnAutoWidth,
+	    containerWidth,
+	    itemMinWidth
+	  } = _ref;
+	  let rowCount;
+	  const maxRows = (maxVisibleRows === null || maxVisibleRows === void 0 ? void 0 : maxVisibleRows.maxRows) || 3;
+	  const autoRowCount = Math.floor(listHeight / itemHeight);
+	  if (maxVisibleRows.auto !== false) {
+	    rowCount = autoRowCount;
+	  } else {
+	    rowCount = Math.min(listCount, maxRows, autoRowCount);
+	  }
+	  const columnCount = Math.ceil(listCount / rowCount);
+	  const columnWidth = Math.max(columnAutoWidth, containerWidth / columnCount, itemMinWidth);
+	  return {
+	    columnWidth,
+	    columnCount,
+	    rowCount
+	  };
+	}
 
-	const ITEM_MIN_WIDTH = 56;
+	const SCROLL_BAR_WIDTH = 10; // TODO: ignore this - instead set the styling only show on hover...
 	const ITEM_MAX_WIDTH = 150;
 	const FREQUENCY_WIDTH = 40;
+	const ITEM_MIN_WIDTH = 56;
+	const CHECKBOX_WIDTH = 20;
+
+	function calculateRowMode(_ref) {
+	  let {
+	    maxVisibleColumns,
+	    listCount,
+	    containerWidth,
+	    columnAutoWidth,
+	    itemMinWidth
+	  } = _ref;
+	  const maxColumns = (maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.maxColumns) || 3;
+	  const innerWidth = containerWidth - SCROLL_BAR_WIDTH;
+	  let columnCount;
+	  const autoColumnCount = Math.min(listCount, Math.ceil(innerWidth / Math.max(itemMinWidth, columnAutoWidth))); // TODO: smarter sizing... based on glyph count + font size etc...??
+	  if ((maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.auto) !== false) {
+	    columnCount = autoColumnCount;
+	  } else {
+	    columnCount = Math.min(listCount, maxColumns, autoColumnCount);
+	  }
+	  const columnWidth = innerWidth / columnCount;
+	  const rowCount = Math.ceil(listCount / columnCount);
+	  return {
+	    rowCount,
+	    columnWidth,
+	    columnCount
+	  };
+	}
+
 	function getListSizes(_ref) {
 	  let {
 	    layout,
@@ -24813,7 +24962,8 @@
 	    listCount,
 	    count,
 	    textWidth,
-	    freqIsAllowed
+	    freqIsAllowed,
+	    checkboxes
 	  } = _ref;
 	  const {
 	    layoutOptions = {}
@@ -24826,50 +24976,60 @@
 	    dataLayout
 	  } = layoutOptions;
 	  const frequencyAddWidth = freqIsAllowed ? FREQUENCY_WIDTH : 0;
-	  const columnAutoWidth = Math.max(Math.min(ITEM_MAX_WIDTH, textWidth + 18 + frequencyAddWidth), ITEM_MIN_WIDTH + frequencyAddWidth);
+	  const checkboxAddWidth = checkboxes ? CHECKBOX_WIDTH : 0;
+	  const dynamicItemMinWidth = ITEM_MIN_WIDTH + frequencyAddWidth + checkboxAddWidth;
+	  const columnAutoWidth = Math.max(Math.min(ITEM_MAX_WIDTH, textWidth + 18 + frequencyAddWidth + checkboxAddWidth), dynamicItemMinWidth);
 	  let overflowStyling;
 	  let columnCount;
 	  let columnWidth;
 	  let rowCount;
 	  const isGridMode = dataLayout === 'grid';
 	  const itemPadding = 4;
-	  const denseItemSize = 20;
-	  const normalItemSize = isGridMode ? 32 : 29;
-	  let itemSize = dense ? denseItemSize : normalItemSize;
+	  const denseItemHeight = 20;
+	  const normalItemHeight = isGridMode ? 32 : 29;
+	  let itemHeight = dense ? denseItemHeight : normalItemHeight;
 	  if (isGridMode) {
 	    // Emulate a margin between items using padding, since the list library
 	    // needs an explicit row height and cannot handle margins.
-	    itemSize += itemPadding;
+	    itemHeight += itemPadding;
 	  }
-	  const listHeight = height !== null && height !== void 0 ? height : 8 * itemSize;
+	  const listHeight = height !== null && height !== void 0 ? height : 8 * itemHeight;
 	  if (layoutOrder) {
 	    // Modify container width to achieve the exact design with 8px margins on each side (left and right).
 	    let containerWidth = width;
 	    if (layoutOrder === 'row') {
-	      containerWidth += itemPadding * 2;
 	      overflowStyling = {
 	        overflowX: 'hidden'
 	      };
-	      const maxColumns = (maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.maxColumns) || 3;
-	      if ((maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.auto) !== false) {
-	        columnCount = Math.min(listCount, Math.ceil((containerWidth - scrollBarWidth) / columnAutoWidth)); // TODO: smarter sizing... based on glyph count + font size etc...??
-	      } else {
-	        columnCount = Math.min(listCount, maxColumns);
-	      }
-	      rowCount = Math.ceil(listCount / columnCount);
-	      columnWidth = (containerWidth - scrollBarWidth) / columnCount;
+	      containerWidth += itemPadding * 2;
+	      ({
+	        rowCount,
+	        columnWidth,
+	        columnCount
+	      } = calculateRowMode({
+	        maxVisibleColumns,
+	        listCount,
+	        containerWidth,
+	        columnAutoWidth,
+	        itemMinWidth: dynamicItemMinWidth
+	      }));
 	    } else {
 	      overflowStyling = {
 	        overflowY: 'hidden'
 	      };
-	      const maxRows = (maxVisibleRows === null || maxVisibleRows === void 0 ? void 0 : maxVisibleRows.maxRows) || 3;
-	      if (maxVisibleRows.auto !== false) {
-	        rowCount = Math.floor(listHeight / itemSize);
-	      } else {
-	        rowCount = Math.min(listCount, maxRows);
-	      }
-	      columnCount = Math.ceil(listCount / rowCount);
-	      columnWidth = Math.max(columnAutoWidth, containerWidth / columnCount);
+	      ({
+	        rowCount,
+	        columnWidth,
+	        columnCount
+	      } = calculateColumnMode({
+	        maxVisibleRows,
+	        itemHeight,
+	        listCount,
+	        listHeight,
+	        columnAutoWidth,
+	        containerWidth,
+	        itemMinWidth: dynamicItemMinWidth
+	      }));
 	    }
 	  }
 	  columnCount = (dataLayout === 'singleColumn' ? 1 : columnCount) || 1;
@@ -24886,9 +25046,9 @@
 	    columnWidth,
 	    rowCount,
 	    overflowStyling,
-	    itemSize,
+	    itemHeight,
 	    listHeight,
-	    scrollBarWidth,
+	    scrollBarWidth: SCROLL_BAR_WIDTH,
 	    count,
 	    listCount: limitedListCount,
 	    maxCount: {
@@ -24937,9 +25097,9 @@
 	    width,
 	    columnWidth,
 	    listHeight,
-	    itemSize
+	    itemHeight
 	  } = _ref;
-	  const visibleCellsCount = Math.ceil(width / columnWidth) * Math.ceil(listHeight / itemSize);
+	  const visibleCellsCount = Math.ceil(width / columnWidth) * Math.ceil(listHeight / itemHeight);
 	  const minSize = visibleCellsCount * 2;
 	  return minSize;
 	}
@@ -25261,12 +25421,48 @@
 	  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] = reactExports.useState();
+	  const needFetch = needToFetchFrequencyMax(layout);
+	  reactExports.useEffect(() => {
+	    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,
@@ -25433,7 +25629,8 @@
 	    listCount: unlimitedListCount,
 	    count,
 	    textWidth,
-	    freqIsAllowed
+	    freqIsAllowed,
+	    checkboxes
 	  });
 	  if (sizes.columnWidth) {
 	    // In grid mode, where we have a dynamic item width, get a second opinion on showing/hiding frequency.
@@ -25497,6 +25694,7 @@
 	      last
 	    }))
 	  });
+	  const frequencyMax = useFrequencyMax(app, layout);
 	  const {
 	    List,
 	    Grid
@@ -25530,19 +25728,20 @@
 	    focusListItems: getFocusState(),
 	    setCurrentScrollIndex: currentScrollIndex.set,
 	    constraints,
+	    frequencyMax,
 	    freqIsAllowed
 	  });
 	  const {
 	    columnWidth,
 	    listHeight,
-	    itemSize
+	    itemHeight
 	  } = sizes || {};
 	  if (!isVertical) {
 	    minimumBatchSize = getHorizontalMinBatchSize({
 	      width,
 	      columnWidth,
 	      listHeight,
-	      itemSize
+	      itemHeight
 	    });
 	  }
 	  return /*#__PURE__*/React.createElement(React.Fragment, null, !listCount && /*#__PURE__*/React.createElement(ListBoxDisclaimer, {
@@ -25718,6 +25917,7 @@
 	    style: style,
 	    className: ActionElement.className,
 	    size: "large",
+	    disableRipple: true,
 	    "aria-expanded": ariaExpanded,
 	    "aria-controls": "moreMenuList"
 	  }, hasSvgIconShape && SvgIcon(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React.createElement("div", {
@@ -25900,6 +26100,7 @@
 
 	const PREFIX$7 = 'ActionsToolbar';
 	const classes$7 = {
+	  item: "".concat(PREFIX$7, "-item"),
 	  itemSpacing: "".concat(PREFIX$7, "-itemSpacing"),
 	  firstItemSpacing: "".concat(PREFIX$7, "-firstItemSpacing"),
 	  lastItemSpacing: "".concat(PREFIX$7, "-lastItemSpacing")
@@ -25936,25 +26137,27 @@
 	    actions = [],
 	    first = false,
 	    last = false,
-	    addAnchor = false
+	    addAnchor = false,
+	    isRtl = false
 	  } = _ref2;
 	  return actions.length > 0 ? /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
 	    gap: 0,
+	    flexDirection: isRtl ? 'row-reverse' : 'row',
 	    wrap: "nowrap"
 	  }, actions.map((e, ix) => {
 	    let cls = [];
 	    const isFirstItem = first && ix === 0;
 	    const isLastItem = last && actions.length - 1 === ix;
 	    if (isFirstItem && !isLastItem) {
-	      cls = [classes$7.firstItemSpacing];
+	      cls = [classes$7.firstItemSpacing, classes$7.item];
 	    }
 	    if (isLastItem && !isFirstItem) {
-	      cls = [...cls, classes$7.lastItemSpacing];
+	      cls = [...cls, classes$7.lastItemSpacing, classes$7.item];
 	    }
 	    if (!isFirstItem && !isLastItem && cls.length === 0) {
-	      cls = [classes$7.itemSpacing];
+	      cls = [classes$7.itemSpacing, classes$7.item];
 	    }
 	    return /*#__PURE__*/React.createElement(Grid$1, {
 	      item: true,
@@ -26003,7 +26206,9 @@
 	      anchorEl: null
 	    },
 	    focusHandler = null,
-	    actionsRefMock = null // for testing
+	    actionsRefMock = null,
+	    // for testing
+	    direction = 'ltr'
 	  } = _ref3;
 	  const defaultSelectionActions = useDefaultSelectionActions(selections);
 	  const {
@@ -26076,12 +26281,16 @@
 	  const showActions = newActions.length > 0;
 	  const showMore = moreActions.length > 0;
 	  const showDivider = showActions && selections.show || showMore && selections.show;
+	  const isRtl = direction === 'rtl';
 	  const Actions = /*#__PURE__*/React.createElement(Grid$1, {
 	    ref: actionsRef,
 	    onKeyDown: tabCallback,
 	    container: true,
 	    gap: 0,
-	    wrap: "nowrap"
+	    wrap: "nowrap",
+	    sx: {
+	      flexDirection: isRtl ? 'row-reverse' : 'row'
+	    }
 	  }, showActions && /*#__PURE__*/React.createElement(ActionsGroup, {
 	    actions: newActions,
 	    first: true,
@@ -26102,7 +26311,8 @@
 	  })), selections.show && /*#__PURE__*/React.createElement(ActionsGroup, {
 	    actions: defaultSelectionActions,
 	    first: !showActions && !showMore,
-	    last: true
+	    last: true,
+	    isRtl: isRtl
 	  }), showMoreItems && /*#__PURE__*/React.createElement(More$1, {
 	    show: showMoreItems,
 	    actions: moreActions,
@@ -26125,7 +26335,7 @@
 	      className: ActionToolbarElement.className,
 	      style: {
 	        pointerEvents: 'auto',
-	        padding: theme.spacing(1, 1)
+	        padding: theme.spacing(0.8)
 	      }
 	    }
 	  }, Actions) : show && Actions;
@@ -26158,7 +26368,8 @@
 	    theme
 	  } = _ref2;
 	  return {
-	    color: (_theme$listBox2 = theme.listBox) === null || _theme$listBox2 === void 0 ? void 0 : (_theme$listBox2$conte = _theme$listBox2.content) === null || _theme$listBox2$conte === void 0 ? void 0 : _theme$listBox2$conte.color
+	    color: (_theme$listBox2 = theme.listBox) === null || _theme$listBox2 === void 0 ? void 0 : (_theme$listBox2$conte = _theme$listBox2.content) === null || _theme$listBox2$conte === void 0 ? void 0 : _theme$listBox2$conte.color,
+	    display: 'flex'
 	  };
 	});
 	function ListBoxSearch(_ref3) {
@@ -26171,7 +26382,8 @@
 	    visible = true,
 	    autoFocus = true,
 	    wildCardSearch = false,
-	    searchEnabled
+	    searchEnabled,
+	    direction
 	  } = _ref3;
 	  const {
 	    translator
@@ -26183,6 +26395,8 @@
 	  const {
 	    getStoreValue
 	  } = useDataStore(model);
+	  const isRtl = direction === 'rtl';
+	  const inpuTextAlign = isRtl ? 'right' : 'left';
 	  const cancel = () => selections.isActive() && selections.cancel();
 	  const abortSearch = async () => {
 	    if (!selections.isModal()) {
@@ -26270,6 +26484,7 @@
 	    className: "search",
 	    sx: [{
 	      border: 'none',
+	      fontSize: 14,
 	      borderRadius: 0,
 	      backgroundColor: 'transparent',
 	      '& fieldset': {
@@ -26288,6 +26503,8 @@
 	        paddingTop: '5px',
 	        paddingBottom: '5px'
 	      }
+	    }, {
+	      flexDirection: isRtl ? 'row-reverse' : 'row'
 	    }],
 	    inputRef: inputRef,
 	    size: "small",
@@ -26299,7 +26516,10 @@
 	    onKeyDown: onKeyDown,
 	    autoFocus: autoFocus,
 	    inputProps: {
-	      tabIndex: keyboard && (!keyboard.enabled || keyboard.active) ? 0 : -1
+	      tabIndex: keyboard && (!keyboard.enabled || keyboard.active) ? 0 : -1,
+	      style: {
+	        textAlign: "".concat(inpuTextAlign)
+	      }
 	    }
 	  });
 	}
@@ -26845,6 +27065,7 @@
 	    autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : true
 	  }), /*#__PURE__*/React.createElement(ListBox, {
 	    model: model,
+	    app: app,
 	    layout: layout,
 	    selections: selections,
 	    selectionState: selectionState$1,
@@ -28118,27 +28339,77 @@
 	var DrillDownIcon = (props => SvgIcon(drillDown(props)));
 
 	const addListboxTheme = themeApi => {
-	  const getListboxStyle = prop => themeApi.getStyle('object', '', "listBox.".concat(prop));
+	  const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
 	  return {
-	    backgroundColor: getListboxStyle('backgroundColor'),
+	    backgroundColor: getListboxStyle('', 'backgroundColor'),
 	    title: {
 	      main: {
-	        color: getListboxStyle('title.main.color'),
-	        fontSize: getListboxStyle('title.main.fontSize'),
-	        fontFamily: getListboxStyle('title.main.fontFamily')
+	        color: getListboxStyle('title.main', 'color'),
+	        fontSize: getListboxStyle('title.main', 'fontSize'),
+	        fontFamily: getListboxStyle('title.main', 'fontFamily'),
+	        fontWeight: getListboxStyle('title.main', 'fontWeight')
 	      }
 	    },
 	    content: {
-	      color: getListboxStyle('content.color'),
-	      fontSize: getListboxStyle('content.fontSize'),
-	      fontFamily: getListboxStyle('content.fontFamily')
+	      color: getListboxStyle('content', 'color'),
+	      fontSize: getListboxStyle('content', 'fontSize'),
+	      fontFamily: getListboxStyle('content', 'fontFamily')
 	    }
 	  };
 	};
 
+	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"),
@@ -28156,8 +28427,8 @@
 	    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',
@@ -28167,18 +28438,25 @@
 	    },
 	    ["& .".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$1)(_ref2 => {
-	  var _theme$listBox2, _theme$listBox2$title, _theme$listBox2$title2, _theme$listBox3, _theme$listBox3$title, _theme$listBox3$title2, _theme$listBox4, _theme$listBox4$title, _theme$listBox4$title2;
+	  var _theme$listBox2, _theme$listBox2$title, _theme$listBox2$title2, _theme$listBox3, _theme$listBox3$title, _theme$listBox3$title2, _theme$listBox4, _theme$listBox4$title, _theme$listBox4$title2, _theme$listBox5, _theme$listBox5$title, _theme$listBox5$title2;
 	  let {
 	    theme
 	  } = _ref2;
 	  return {
 	    color: (_theme$listBox2 = theme.listBox) === null || _theme$listBox2 === void 0 ? void 0 : (_theme$listBox2$title = _theme$listBox2.title) === null || _theme$listBox2$title === void 0 ? void 0 : (_theme$listBox2$title2 = _theme$listBox2$title.main) === null || _theme$listBox2$title2 === void 0 ? void 0 : _theme$listBox2$title2.color,
 	    fontSize: (_theme$listBox3 = theme.listBox) === null || _theme$listBox3 === void 0 ? void 0 : (_theme$listBox3$title = _theme$listBox3.title) === null || _theme$listBox3$title === void 0 ? void 0 : (_theme$listBox3$title2 = _theme$listBox3$title.main) === null || _theme$listBox3$title2 === void 0 ? void 0 : _theme$listBox3$title2.fontSize,
-	    fontFamily: (_theme$listBox4 = theme.listBox) === null || _theme$listBox4 === void 0 ? void 0 : (_theme$listBox4$title = _theme$listBox4.title) === null || _theme$listBox4$title === void 0 ? void 0 : (_theme$listBox4$title2 = _theme$listBox4$title.main) === null || _theme$listBox4$title2 === void 0 ? void 0 : _theme$listBox4$title2.fontFamily
+	    fontFamily: (_theme$listBox4 = theme.listBox) === null || _theme$listBox4 === void 0 ? void 0 : (_theme$listBox4$title = _theme$listBox4.title) === null || _theme$listBox4$title === void 0 ? void 0 : (_theme$listBox4$title2 = _theme$listBox4$title.main) === null || _theme$listBox4$title2 === void 0 ? void 0 : _theme$listBox4$title2.fontFamily,
+	    fontWeight: ((_theme$listBox5 = theme.listBox) === null || _theme$listBox5 === void 0 ? void 0 : (_theme$listBox5$title = _theme$listBox5.title) === null || _theme$listBox5$title === void 0 ? void 0 : (_theme$listBox5$title2 = _theme$listBox5$title.main) === null || _theme$listBox5$title2 === void 0 ? void 0 : _theme$listBox5$title2.fontWeight) || 'bold'
 	  };
 	});
 	function ListBoxInline(_ref3) {
@@ -28231,7 +28509,6 @@
 	    constraints
 	  } = reactExports.useContext(InstanceContext);
 	  theme.listBox = addListboxTheme(themeApi);
-	  const moreAlignTo = reactExports.useRef();
 	  const containerRef = reactExports.useRef();
 	  const [searchContainer, searchContainerRef] = useRefWithCallback();
 	  const [showToolbar, setShowToolbar] = reactExports.useState(false);
@@ -28249,6 +28526,7 @@
 	    stop: 0
 	  });
 	  const [appSelections] = useAppSelections(app);
+	  const titleRef = reactExports.useRef(null);
 	  const [selectionState$1] = reactExports.useState(() => selectionState());
 	  const {
 	    handleKeyDown,
@@ -28275,6 +28553,7 @@
 	  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) !== '';
 	  reactExports.useEffect(() => {
 	    const show = () => {
@@ -28291,15 +28570,15 @@
 	    };
 	    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]);
@@ -28317,38 +28596,46 @@
 	    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';
@@ -28356,7 +28643,9 @@
 	  if (isGridMode) {
 	    containerPadding = layoutOptions.layoutOrder === 'row' ? '2px 4px' : '2px 6px 2px 4px';
 	  }
-	  return /*#__PURE__*/React.createElement(StyledGrid$3, {
+	  return /*#__PURE__*/React.createElement(React.Fragment, null, toolbarDetachedOnly && /*#__PURE__*/React.createElement(ActionsToolbar, _extends$8({
+	    direction: direction
+	  }, getActionToolbarProps(true))), /*#__PURE__*/React.createElement(StyledGrid$3, {
 	    className: "listbox-container",
 	    container: true,
 	    tabIndex: keyboard.enabled && !keyboard.active ? 0 : -1,
@@ -28377,13 +28666,20 @@
 	    container: true,
 	    style: {
 	      padding: theme.spacing(1),
-	      paddingLeft: "".concat(headerPaddingLeft, "px")
+	      paddingLeft: "".concat(headerPaddingLeft, "px"),
+	      paddingRight: "".concat(headerPaddingRight, "px")
+	    },
+	    sx: {
+	      flexDirection: isRtl ? 'row-reverse' : 'row'
 	    },
 	    wrap: "nowrap"
 	  }, /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
 	    height: headerHeight,
+	    sx: {
+	      flexDirection: isRtl ? 'row-reverse' : 'row'
+	    },
 	    wrap: "nowrap"
 	  }, showIcons && /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
@@ -28393,12 +28689,13 @@
 	      width: iconsWidth
 	    }
 	  }, isLocked ? /*#__PURE__*/React.createElement(IconButton$1, {
+	    title: translator.get('SelectionToolbar.ClickToUnlock'),
 	    tabIndex: -1,
 	    onClick: unlock,
 	    disabled: selectDisabled(),
 	    size: "large"
 	  }, /*#__PURE__*/React.createElement(Lock, {
-	    title: translator.get('Listbox.Unlock'),
+	    disableRipple: true,
 	    style: {
 	      fontSize: '12px'
 	    }
@@ -28407,66 +28704,52 @@
 	    tabIndex: -1,
 	    title: translator.get('Listbox.Search'),
 	    size: "large",
+	    disableRipple: true,
 	    "data-testid": "search-toggle-btn"
 	  }, /*#__PURE__*/React.createElement(SearchIcon, {
 	    style: {
 	      fontSize: '12px'
 	    }
-	  })), isDrillDown && /*#__PURE__*/React.createElement(IconButton$1, {
+	  })), isDrillDown && /*#__PURE__*/React.createElement(DrillDownIcon, {
 	    tabIndex: -1,
 	    title: translator.get('Listbox.DrillDown'),
 	    size: "large",
-	    sx: {
-	      paddingLeft: "".concat(drillDownPaddingLeft, "px")
-	    }
-	  }, /*#__PURE__*/React.createElement(DrillDownIcon, {
 	    style: {
 	      fontSize: '12px'
 	    }
-	  }))), /*#__PURE__*/React.createElement(Grid$1, {
+	  })), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
+	    sx: {
+	      justifyContent: isRtl ? 'flex-end' : 'flex-start'
+	    },
 	    className: classes$4.listBoxHeader
 	  }, /*#__PURE__*/React.createElement(Title, {
 	    variant: "h6",
 	    noWrap: true,
+	    ref: titleRef,
 	    title: layout.title
 	  }, layout.title))), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    xs: true
 	  }), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true
-	  }, /*#__PURE__*/React.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.createElement(Grid$1, {
+	  }, /*#__PURE__*/React.createElement(ActionsToolbar, _extends$8({
+	    direction: direction
+	  }, getActionToolbarProps(showToolbarDetached({
+	    containerRef,
+	    titleRef,
+	    iconsWidth
+	  })))))), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
 	    direction: "column",
 	    style: {
 	      height: '100%',
-	      minHeight: "".concat(minHeight, "px")
+	      minHeight: '50px'
 	    },
 	    role: "region",
 	    "aria-label": translator.get('Listbox.ResultFilterLabel')
-	  }, /*#__PURE__*/React.createElement("div", {
-	    ref: moreAlignTo
-	  }), /*#__PURE__*/React.createElement(Grid$1, {
+	  }, /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    ref: searchContainerRef
 	  }, /*#__PURE__*/React.createElement("div", {
@@ -28482,7 +28765,8 @@
 	    autoFocus: shouldAutoFocus,
 	    searchContainerRef: searchContainerRef,
 	    wildCardSearch: wildCardSearch,
-	    searchEnabled: searchEnabled
+	    searchEnabled: searchEnabled,
+	    direction: direction
 	  })), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    xs: true,
@@ -28496,6 +28780,7 @@
 	    } = _ref4;
 	    return /*#__PURE__*/React.createElement(ListBox, {
 	      model: model,
+	      app: app,
 	      constraints: constraints,
 	      layout: layout,
 	      selections: selections,
@@ -28527,7 +28812,7 @@
 	        set: setCurrentScrollIndex
 	      }
 	    });
-	  }))));
+	  })))));
 	}
 	const ListBoxInlineMemoed = React.memo(ListBoxInline);
 	function IsolateUseLayoutWrapper(_ref5) {
@@ -28603,7 +28888,13 @@
 	        const dim = await app.getDimension(fieldIdentifier.qLibraryId);
 	        const dimLayout = await dim.getLayout();
 	        setFallbackTitle(dimLayout.qDim.title);
-	        setFieldDef(dimLayout.qDim.qFieldDefs ? dimLayout.qDim.qFieldDefs[0] : '');
+	        if (dimLayout.qDim.qGrouping === 'N') {
+	          setFieldDef(dimLayout.qDim.qFieldDefs ? dimLayout.qDim.qFieldDefs[0] : '');
+	        } else {
+	          setFieldDef({
+	            multiFieldDim: true
+	          });
+	        }
 	        setIsFetching(false);
 	      } catch (e) {
 	        setIsFetching(false);
@@ -28713,11 +29004,16 @@
 	    listdef.qListObjectDef.qDef.qFieldDefs = [fieldIdentifier];
 	    fieldName = fieldIdentifier;
 	  }
-	  if (frequencyMode !== 'N' || histogram) {
-	    const field = fieldIdentifier.qLibraryId ? fieldDef : fieldName;
-	    listdef.frequencyMax = {
-	      qValueExpression: "Max(AGGR(Count([".concat(field, "]), [").concat(field, "]))")
-	    };
+	  if (frequencyMode !== 'P' && histogram) {
+	    if (fieldDef !== null && fieldDef !== void 0 && fieldDef.multiFieldDim) {
+	      listdef.frequencyMax = 'fetch';
+	      // maybe for all lib dimension to handle if it properties change
+	    } else {
+	      const field = fieldIdentifier.qLibraryId ? fieldDef : fieldName;
+	      listdef.frequencyMax = {
+	        qValueExpression: getFrequencyMaxExpression(field)
+	      };
+	    }
 	  }
 	  const [sessionModel] = useSessionModel(listdef, isFetching ? null : app, fieldName, stateName);
 	  reactExports.useEffect(() => {
@@ -28821,7 +29117,7 @@
 	    options
 	  });
 	  const elementRef = reactExports.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 = reactExports.useMemo(() => _objectSpread2(_objectSpread2({}, options), {}, {
 	    selections,
 	    model,
@@ -36068,6 +36364,7 @@
 	const mergeConfigs = (base, c) => ({
 	  context: mergeObj(base.context, c.context),
 	  load: c.load || base.load,
+	  loadTheme: c.loadTheme || base.loadTheme,
 	  snapshot: _objectSpread2({}, c.snapshot || base.snapshot),
 	  types: mergeArray(base.types, c.types),
 	  themes: mergeArray(base.themes, c.themes),
@@ -36114,6 +36411,7 @@
 	    });
 	    const appTheme$1 = appTheme({
 	      themes: configuration.themes,
+	      loadTheme: configuration.loadTheme,
 	      root
 	    });
 	    currentContext.themeApi = appTheme$1.externalAPI;