@nebula.js/stardust 5.0.0-alpha4 → 5.0.1

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v5.0.0-alpha4
+* @nebula.js/stardust v5.0.1
 * Copyright (c) 2024 QlikTech International AB
 * Released under the MIT license.
 */
@@ -742,7 +742,7 @@ function _toPrimitive(t, r) {
 }
 function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : String(i);
+  return "symbol" == typeof i ? i : i + "";
 }
 function _defineProperty(obj, key, value) {
   key = _toPropertyKey(key);
@@ -952,6 +952,26 @@ var CurrentSelections_Of = {
 		"zh-TW": "{0}/ {1}"
 	}
 };
+var Listbox_Cyclic = {
+	id: "Listbox.Cyclic",
+	locale: {
+		"de-DE": "Zyklische Dimension",
+		"en-US": "Cyclic dimension",
+		"es-ES": "Dimensión cíclica",
+		"fr-FR": "Dimension cyclique",
+		"it-IT": "Dimensione ciclica",
+		"ja-JP": "サイクリック軸",
+		"ko-KR": "순환 차원",
+		"nl-NL": "Cyclische dimensie",
+		"pl-PL": "Wymiar cykliczny",
+		"pt-BR": "Dimensão cíclica",
+		"ru-RU": "Циклическое измерение",
+		"sv-SE": "Cyklisk dimension",
+		"tr-TR": "Döngüsel boyut",
+		"zh-CN": "循环维度",
+		"zh-TW": "循環維度"
+	}
+};
 var Listbox_Dismiss = {
 	id: "Listbox.Dismiss",
 	locale: {
@@ -1956,6 +1976,7 @@ var all = {
 	Cancel: Cancel$1,
 	CurrentSelections_All: CurrentSelections_All,
 	CurrentSelections_Of: CurrentSelections_Of,
+	Listbox_Cyclic: Listbox_Cyclic,
 	Listbox_Dismiss: Listbox_Dismiss,
 	Listbox_DrillDown: Listbox_DrillDown,
 	Listbox_ItemsOverflow: Listbox_ItemsOverflow,
@@ -3251,9 +3272,15 @@ function theme$1(resolvedTheme) {
       };
     },
     uiColor(c, shift) {
+      const indexIsValid = typeof (c === null || c === void 0 ? void 0 : c.index) === 'number' && !Number.isNaN(c === null || c === void 0 ? void 0 : c.index);
+      const colorIsValid = typeof (c === null || c === void 0 ? void 0 : c.color) === 'string';
+      const somethingIsValid = indexIsValid || colorIsValid;
+      if (!somethingIsValid) {
+        return undefined;
+      }
       // eslint-disable-next-line no-param-reassign
       shift = !!shift;
-      if (c.index < 0 || typeof c.index === 'undefined') {
+      if ((c === null || c === void 0 ? void 0 : c.index) < 0 || typeof (c === null || c === void 0 ? void 0 : c.index) === 'undefined') {
         return c.color;
       }
       if (typeof uiPalette === 'undefined') {
@@ -5235,7 +5262,7 @@ function GlobalStyles(props) {
 }
 
 /**
- * @mui/styled-engine v5.15.11
+ * @mui/styled-engine v5.15.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -5356,7 +5383,7 @@ var deepmerge = /*#__PURE__*/Object.freeze({
 	isPlainObject: isPlainObject
 });
 
-const _excluded$g = ["values", "unit", "step"];
+const _excluded$h = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -5390,7 +5417,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$g);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$h);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -6455,7 +6482,7 @@ function applyStyles(key, styles) {
   return {};
 }
 
-const _excluded$f = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$g = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$2(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -6463,7 +6490,7 @@ function createTheme$2(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$f);
+    other = _objectWithoutPropertiesLoose(options, _excluded$g);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge$1({
@@ -6509,7 +6536,7 @@ function useTheme$3(defaultTheme = systemDefaultTheme$1) {
   return useTheme$4(defaultTheme);
 }
 
-const _excluded$e = ["sx"];
+const _excluded$f = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -6530,7 +6557,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$e);
+    other = _objectWithoutPropertiesLoose(props, _excluded$f);
   const {
     systemProps,
     otherProps
@@ -6965,11 +6992,11 @@ function useForkRef(...refs) {
 
 class Timeout {
   constructor() {
-    this.currentId = 0;
+    this.currentId = null;
     this.clear = () => {
-      if (this.currentId !== 0) {
+      if (this.currentId !== null) {
         clearTimeout(this.currentId);
-        this.currentId = 0;
+        this.currentId = null;
       }
     };
     this.disposeEffect = () => {
@@ -6985,7 +7012,7 @@ class Timeout {
   start(delay, fn) {
     this.clear();
     this.currentId = setTimeout(() => {
-      this.currentId = 0;
+      this.currentId = null;
       fn();
     }, delay);
   }
@@ -7208,6 +7235,18 @@ function ThemeProvider$2(props) {
   });
 }
 
+const _excluded$e = ["value"];
+const RtlContext = /*#__PURE__*/React.createContext();
+function RtlProvider(_ref) {
+  let {
+      value
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(RtlContext.Provider, _extends$4({
+    value: value != null ? value : true
+  }, props));
+}
+
 const EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
   return React.useMemo(() => {
@@ -7247,11 +7286,15 @@ function ThemeProvider$1(props) {
   const upperPrivateTheme = useTheme$2() || EMPTY_THEME;
   const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
+  const rtlValue = engineTheme.direction === 'rtl';
   return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$2, {
     theme: privateTheme,
     children: /*#__PURE__*/jsxRuntimeExports.jsx(ThemeContext$2.Provider, {
       value: engineTheme,
-      children: children
+      children: /*#__PURE__*/jsxRuntimeExports.jsx(RtlProvider, {
+        value: rtlValue,
+        children: children
+      })
     })
   });
 }
@@ -7703,7 +7746,7 @@ function emphasize(color, coefficient = 0.15) {
 }
 function private_safeEmphasize(color, coefficient, warning) {
   try {
-    return private_safeEmphasize(color, coefficient);
+    return emphasize(color, coefficient);
   } catch (error) {
     if (warning && "production" !== 'production') {
       console.warn(warning);
@@ -8424,7 +8467,7 @@ Object.defineProperty(createStyled$1, "__esModule", {
   value: true
 });
 var _default = createStyled$1.default = createStyled;
-var shouldForwardProp_1 = createStyled$1.shouldForwardProp = shouldForwardProp;
+createStyled$1.shouldForwardProp = shouldForwardProp;
 createStyled$1.systemDefaultTheme = void 0;
 var _extends2 = _interopRequireDefault$1(require_extends());
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault$1(requireObjectWithoutPropertiesLoose());
@@ -8652,11 +8695,18 @@ function createStyled(input = {}) {
   };
 }
 
-const rootShouldForwardProp = prop => shouldForwardProp_1(prop) && prop !== 'classes';
+// copied from @mui/system/createStyled
+function slotShouldForwardProp(prop) {
+  return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
+}
+
+const rootShouldForwardProp = prop => slotShouldForwardProp(prop) && prop !== 'classes';
+var rootShouldForwardProp$1 = rootShouldForwardProp;
+
 const styled = _default({
   themeId: THEME_ID,
   defaultTheme: defaultTheme$1,
-  rootShouldForwardProp
+  rootShouldForwardProp: rootShouldForwardProp$1
 });
 
 const _excluded$7 = ["theme"];
@@ -8711,7 +8761,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
 var buttonClasses$1 = buttonClasses;
 
 var base = {
@@ -9051,7 +9101,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "41f6" ;
+const NEBULA_VERSION_HASH = "19bb" ;
 ClassNameGenerator.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -9283,7 +9333,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "5.0.0-alpha4" );
+  element.setAttribute('data-nebulajs-version', "5.0.1" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -10427,31 +10477,52 @@ const excludedOrAlternative = _ref => {
   } = _ref;
   return (isAlternative(cell) || isExcluded(cell)) && checkboxes;
 };
-const getValueStateClasses = _ref2 => {
+function getSelectionStateClass(_ref2) {
+  let {
+    cell,
+    showGray
+  } = _ref2;
+  let selectionStateClass;
+  switch (cell.qState) {
+    case 'XS':
+      selectionStateClass = showGray ? rowColClasses.XS : rowColClasses.S;
+      break;
+    case 'S':
+    case 'L':
+      selectionStateClass = rowColClasses.S;
+      break;
+    case 'A':
+      selectionStateClass = showGray ? rowColClasses.A : false;
+      break;
+    case 'X':
+    case 'XL':
+      selectionStateClass = showGray ? rowColClasses.X : false;
+      break;
+    default:
+      selectionStateClass = false;
+  }
+  return selectionStateClass;
+}
+const getValueStateClasses = _ref3 => {
   let {
     column,
     histogram,
-    checkboxes,
     cell,
     showGray
-  } = _ref2;
+  } = _ref3;
+  if (!cell) {
+    return [];
+  }
   const clazzArr = [column ? rowColClasses.column : rowColClasses.row];
   if (!histogram) {
     clazzArr.push(rowColClasses.rowBorderBottom);
   }
-  if (!cell) {
-    return [];
-  }
-  if (!checkboxes) {
-    if (cell.qState === 'XS') {
-      clazzArr.push(showGray ? rowColClasses.XS : rowColClasses.S);
-    } else if (cell.qState === 'S' || cell.qState === 'L') {
-      clazzArr.push(rowColClasses.S);
-    } else if (showGray && isAlternative(cell)) {
-      clazzArr.push(rowColClasses.A);
-    } else if (showGray && isExcluded(cell)) {
-      clazzArr.push(rowColClasses.X);
-    }
+  const selectionStateClass = getSelectionStateClass({
+    cell,
+    showGray
+  });
+  if (selectionStateClass) {
+    clazzArr.push(selectionStateClass);
   }
   return clazzArr;
 };
@@ -10518,15 +10589,27 @@ const getMaxFreqWidth = _ref2 => {
   }
   return sizes.freqMaxWidth;
 };
-const getSelectedStyle = _ref3 => {
+const getRowSelectionStyle = _ref3 => {
   let {
     theme,
+    checkboxes,
     styles,
-    selectedState
+    selectionState
   } = _ref3;
+  if (checkboxes) {
+    if (selectionState === 'selected') {
+      return {
+        ["& .".concat(rowColClasses.labelText)]: {
+          // Override labels (value and frequency count) color when selected.
+          color: styles.selections.selected
+        }
+      };
+    }
+    return {};
+  }
   const selectionStyles = styles.selections;
-  const backgroundColor = selectionStyles[selectedState];
-  const contrastTextColor = selectionStyles["".concat(selectedState, "Contrast")];
+  const backgroundColor = selectionStyles[selectionState];
+  const contrastTextColor = selectionStyles["".concat(selectionState, "Contrast")];
   return {
     background: backgroundColor,
     color: contrastTextColor,
@@ -10572,16 +10655,29 @@ const RowColRoot = styled('div', {
   } = _ref4;
   const _styles$content = styles.content,
     contentFontStyles = _objectWithoutProperties(_styles$content, _excluded$6);
-  const selectStyle = getSelectedStyle({
+  const rowSelectionStyle = getRowSelectionStyle({
     theme,
     styles,
-    selectedState: 'selected'
+    checkboxes,
+    selectionState: 'selected'
   });
-  const excludedSelectStyle = getSelectedStyle({
+  const rowExcludedStyle = getRowSelectionStyle({
     theme,
     styles,
-    selectedState: 'excluded'
+    checkboxes,
+    selectionState: 'excluded'
   });
+  const barDefaultFilledStyle = {
+    height: '100%',
+    transition: 'width 0.2s',
+    border: "".concat(barBorderWidthPx, "px solid"),
+    borderColor: '#D9D9D9',
+    // overridden by selected color (classes.S),
+    backgroundColor: '#FAFAFA'
+  };
+  const barSelectedFilledStyle = {
+    opacity: '30%'
+  };
   return {
     '&:focus': {
       boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
@@ -10663,26 +10759,33 @@ const RowColRoot = styled('div', {
       color: contentFontStyles.color
     },
     // Selection styles (S=Selected, XS=ExcludedSelected, A=Alternative, X=Excluded).
-    ["& .".concat(rowColClasses.S)]: _objectSpread2(_objectSpread2({}, selectStyle), {}, {
+    ["& .".concat(rowColClasses.S)]: _objectSpread2(_objectSpread2({}, rowSelectionStyle), {}, {
       border: isGridMode ? 'none' : undefined
     }),
-    ["& .".concat(rowColClasses.XS)]: _objectSpread2(_objectSpread2({}, getSelectedStyle({
+    ["& .".concat(rowColClasses.XS)]: _objectSpread2(_objectSpread2({}, getRowSelectionStyle({
       theme,
       styles,
-      selectedState: 'selectedExcluded'
+      checkboxes,
+      selectionState: 'selectedExcluded'
     })), {}, {
       border: isGridMode ? 'none' : undefined
     }),
-    ["& .".concat(rowColClasses.A)]: _objectSpread2(_objectSpread2({}, getSelectedStyle({
+    ["& .".concat(rowColClasses.A)]: _objectSpread2(_objectSpread2({}, getRowSelectionStyle({
       theme,
       styles,
-      selectedState: 'alternative'
+      checkboxes,
+      selectionState: 'alternative'
     })), {}, {
       border: isGridMode ? 'none' : undefined
     }),
-    ["& .".concat(rowColClasses.X)]: _objectSpread2(_objectSpread2({}, excludedSelectStyle), {}, {
+    ["& .".concat(rowColClasses.X)]: _objectSpread2(_objectSpread2({}, rowExcludedStyle), {}, {
       border: isGridMode ? 'none' : undefined
     }),
+    ["& .".concat(rowColClasses.X, ", & .").concat(rowColClasses.XS)]: {
+      // Override the selected color for bar-filled, when the value is selected and excluded.
+      border: isGridMode ? 'none' : undefined,
+      ["& .".concat(rowColClasses.barSelected, " .bar-filled")]: _objectSpread2({}, barDefaultFilledStyle)
+    },
     ["& .".concat(rowColClasses.frequencyCount)]: _objectSpread2(_objectSpread2({
       zIndex: 3,
       justifyContent: 'flex-end'
@@ -10718,33 +10821,23 @@ const RowColRoot = styled('div', {
       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%'
-      }
+      '& .bar-filled': _objectSpread2({}, barDefaultFilledStyle)
     },
     ["& .".concat(rowColClasses.barSelected)]: {
-      '& .bar-filled': {
-        opacity: '30%',
-        background: theme.palette.background.lighter
-      }
+      '& .bar-filled': _objectSpread2({}, barSelectedFilledStyle)
     },
     ["& .".concat(rowColClasses.barWithCheckbox)]: {
       left: direction === 'rtl' ? barPadPx : barWithCheckboxLeftPadPx,
       width: "calc(100% - ".concat(barWithCheckboxLeftPadPx + barPadPx, "px)")
     },
     ["& .".concat(rowColClasses.barSelectedWithCheckbox)]: {
-      '& .bar-filled': {
-        opacity: '30%',
-        background: selectStyle.background || '#BFE5D0',
-        borderColor: selectStyle.background || '#BFE5D0'
-      }
+      '& .bar-filled': _objectSpread2(_objectSpread2({}, barSelectedFilledStyle), {}, {
+        backgroundColor: styles.selections.selected || '#BFE5D0',
+        borderColor: styles.selections.selected
+      })
     },
     ["& .".concat(rowColClasses.excludedTextWithCheckbox)]: {
-      color: '#828282',
+      color: styles.content.color,
       fontStyle: 'italic'
     }
   };
@@ -11219,94 +11312,6 @@ function getCellFromPages(_ref) {
   return c;
 }
 
-/* eslint-disable import/prefer-default-export */
-const LOC_STATES = {
-  S: 'Object.Listbox.Selected',
-  A: 'Object.Listbox.Alternative',
-  O: 'Object.Listbox.Optional',
-  XS: 'Object.Listbox.SelectedExcluded',
-  L: 'Object.Listbox.Locked',
-  X: 'Object.Listbox.Excluded',
-  XL: 'Object.Listbox.ExcludedLock'
-};
-function getValueLabel(_ref) {
-  let {
-    translator: translatorDynamic,
-    label,
-    qState,
-    isSelected,
-    currentIndex,
-    maxIndex,
-    showSearch
-  } = _ref;
-  const stateTranslation = LOC_STATES[qState];
-  const state = translatorDynamic.get(stateTranslation);
-  const srStringArr = [];
-  if (isSelected) {
-    const navTranslation = showSearch ? 'Listbox.ScreenReader.SearchThenSelectionsMenu.WithAccSelMenu' : 'Listbox.ScreenReader.SelectionMenu.WithAccSelMenu';
-    const nav = translatorDynamic.get(navTranslation);
-    srStringArr.push(nav);
-  }
-  const valueString = "".concat(label, " ").concat(state);
-  const indexString = translatorDynamic.get('CurrentSelections.Of', [currentIndex + 1, maxIndex + 1]); // E.g. 3 of 20
-  srStringArr.unshift(valueString, indexString);
-  const srString = srStringArr.join('. ').trim();
-  return srString;
-}
-
-/**
- * Announces the selection state.
- *
- * @ignore
- * @param {Layout} object
- * @returns {Element} An (invisible) component.
- */
-function ScreenReaderForSelections(_ref2) {
-  var _layout$qListObject;
-  let {
-    layout
-  } = _ref2;
-  const {
-    translator: translatorDynamic
-  } = useContext(InstanceContext);
-  const {
-    qStateCounts: s = {}
-  } = (layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qDimensionInfo) || {};
-  const count = s.qSelected + s.qSelectedExcluded + s.qLocked + s.qLockedExcluded;
-  let t;
-  switch (count) {
-    case 0:
-      t = 'ScreenReader.ZeroSelected';
-      break;
-    case 1:
-      t = 'ScreenReader.OneSelected';
-      break;
-    default:
-      t = 'ScreenReader.ManySelected';
-      break;
-  }
-  const text = translatorDynamic.get(t, [count]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "screenReaderOnly",
-    "aria-live": "assertive"
-  }, text);
-}
-function getScreenReaderSearchText(listCount) {
-  let t;
-  switch (listCount) {
-    case 0:
-      t = 'Listbox.NoMatchesForYourTerms';
-      break;
-    case 1:
-      t = 'ScreenReader.OneSearchResult';
-      break;
-    default:
-      t = 'ScreenReader.ManySearchResults';
-      break;
-  }
-  return t;
-}
-
 const KEYS = Object.freeze({
   ENTER: 13,
   ESCAPE: 27,
@@ -11592,6 +11597,40 @@ function getValueTextAlign(_ref) {
   return ALLOWED_OPTIONS.includes(valueTextAlign) ? valueTextAlign : 'left';
 }
 
+const LOC_STATES = {
+  S: 'Object.Listbox.Selected',
+  A: 'Object.Listbox.Alternative',
+  O: 'Object.Listbox.Optional',
+  XS: 'Object.Listbox.SelectedExcluded',
+  L: 'Object.Listbox.Locked',
+  X: 'Object.Listbox.Excluded',
+  XL: 'Object.Listbox.ExcludedLock'
+};
+function getValueLabel(_ref) {
+  let {
+    translator: translatorDynamic,
+    label,
+    qState,
+    isSelected,
+    currentIndex,
+    maxIndex,
+    showSearch
+  } = _ref;
+  const stateTranslation = LOC_STATES[qState];
+  const state = translatorDynamic.get(stateTranslation);
+  const srStringArr = [];
+  if (isSelected) {
+    const navTranslation = showSearch ? 'Listbox.ScreenReader.SearchThenSelectionsMenu.WithAccSelMenu' : 'Listbox.ScreenReader.SelectionMenu.WithAccSelMenu';
+    const nav = translatorDynamic.get(navTranslation);
+    srStringArr.push(nav);
+  }
+  const valueString = "".concat(label, " ").concat(state);
+  const indexString = translatorDynamic.get('CurrentSelections.Of', [currentIndex + 1, maxIndex + 1]); // E.g. 3 of 20
+  srStringArr.unshift(valueString, indexString);
+  const srString = srStringArr.join('. ').trim();
+  return srString;
+}
+
 function RowColumn(_ref) {
   var _cell$qText, _cell$qHighlightRange;
   let {
@@ -11707,10 +11746,9 @@ function RowColumn(_ref) {
   const classArr = useMemo$1(() => getValueStateClasses({
     column,
     histogram,
-    checkboxes,
     cell,
     showGray
-  }), [cell === null || cell === void 0 ? void 0 : cell.qState, histogram, dense, checkboxes]);
+  }), [cell === null || cell === void 0 ? void 0 : cell.qState, histogram, dense]);
   const preventContextMenu = useCallback(event => {
     event.preventDefault();
   }, [checkboxes]);
@@ -14041,7 +14079,7 @@ const SvgIconRoot = styled('svg', {
     height: '1em',
     display: 'inline-block',
     // the <svg> will define the property that has `currentColor`
-    // e.g. heroicons uses fill="none" and stroke="currentColor"
+    // for example heroicons uses fill="none" and stroke="currentColor"
     fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
     flexShrink: 0,
     transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
@@ -14347,6 +14385,82 @@ const useFrequencyMax = (app, layout) => {
   };
 };
 
+/**
+ * Announces the selection state.
+ *
+ * @ignore
+ * @param {Layout} object
+ * @returns {string}
+ */
+function getSRForSelectedState(_ref) {
+  var _layout$qListObject;
+  let {
+    layout,
+    translatorDynamic
+  } = _ref;
+  const {
+    qStateCounts: s = {}
+  } = (layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qDimensionInfo) || {};
+  const count = s.qSelected + s.qSelectedExcluded + s.qLocked + s.qLockedExcluded;
+  let t;
+  switch (count) {
+    case 0:
+      t = 'ScreenReader.ZeroSelected';
+      break;
+    case 1:
+      t = 'ScreenReader.OneSelected';
+      break;
+    default:
+      t = 'ScreenReader.ManySelected';
+      break;
+  }
+  const text = translatorDynamic.get(t, [count]);
+  return text;
+}
+function getSearchTranslationString(listCount) {
+  let t;
+  switch (listCount) {
+    case 0:
+      t = 'Listbox.NoMatchesForYourTerms';
+      break;
+    case 1:
+      t = 'ScreenReader.OneSearchResult';
+      break;
+    default:
+      t = 'ScreenReader.ManySearchResults';
+      break;
+  }
+  return t;
+}
+function getScreenReaderAssertiveText(_ref2) {
+  let {
+    layout,
+    searchInputText,
+    listCount
+  } = _ref2;
+  const {
+    translator: translatorDynamic
+  } = useContext(InstanceContext);
+  const finalStringArr = [];
+  if (searchInputText !== null && searchInputText !== void 0 && searchInputText.length) {
+    // Add search result text.
+    const srSearchTranslationString = getSearchTranslationString(listCount);
+    const srSearchString = translatorDynamic.get(srSearchTranslationString, [listCount]);
+    finalStringArr.push(srSearchString);
+  }
+
+  // Add selection value text.
+  const srSelectionValueText = getSRForSelectedState({
+    layout,
+    translatorDynamic
+  });
+  finalStringArr.push(srSelectionValueText);
+
+  // Merge texts into one text string, targeting the assertive screen reader.
+  const finalString = finalStringArr.filter(v => !!(v !== null && v !== void 0 && v.length)).join('. ');
+  return finalString;
+}
+
 function deduceFrequencyMode(pages) {
   const hasPercentSign = pages.some(_ref => {
     let {
@@ -14415,7 +14529,6 @@ function ListBox(_ref) {
     checkboxes = checkboxOption,
     histogram
   } = layout !== null && layout !== void 0 ? layout : {};
-  const [screenReaderText, setScreenReaderText] = useState$1('');
   const loaderRef = useRef(null);
   const local = useRef({
     queue: [],
@@ -14573,14 +14686,12 @@ function ListBox(_ref) {
     listCount
   } = sizes;
   setStoreValue('listCount', listCount);
-  const inputText = getStoreValue('inputText');
-  useEffect$1(() => {
-    if (inputText) {
-      const srText = getScreenReaderSearchText(listCount);
-      const srFinalText = translatorDynamic.get(srText, [listCount]);
-      setScreenReaderText(srFinalText);
-    }
-  }, [inputText, listCount]);
+  const searchInputText = getStoreValue('inputText');
+  const screenReaderText = getScreenReaderAssertiveText({
+    layout,
+    searchInputText,
+    listCount
+  });
   const setScrollPosition = position => {
     const {
       scrollIndex,
@@ -14689,10 +14800,7 @@ function ListBox(_ref) {
       itemHeight
     });
   }
-  return /*#__PURE__*/React__default.createElement(StyledWrapper, null, /*#__PURE__*/React__default.createElement(ScreenReaderForSelections, {
-    className: "screenReaderOnly",
-    layout: layout
-  }), /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement(StyledWrapper, null, /*#__PURE__*/React__default.createElement("div", {
     className: "screenReaderOnly",
     "aria-live": "assertive"
   }, screenReaderText), !listCount && cardinal > 0 && /*#__PURE__*/React__default.createElement(ListBoxDisclaimer, {
@@ -15354,6 +15462,9 @@ function ActionsToolbar(_ref3) {
     transformOrigin: popoverTransformOrigin,
     hideBackdrop: true,
     style: popoverStyle,
+    onMouseDown: e => {
+      e.stopPropagation(); // prevent click through, closing when it should not
+    },
     slotProps: {
       paper: {
         id: 'njs-action-toolbar-popover',
@@ -15378,8 +15489,10 @@ const search = props => _objectSpread2(_objectSpread2({}, props), {}, {
 });
 var SearchIcon = (props => SvgIcon$1(search(props)));
 
+const MAX_SEARCH_LENGTH = 64000;
 const TREE_PATH = '/qListObjectDef';
 const WILDCARD = '**';
+const limitSearchLength = val => val === null || val === void 0 ? void 0 : val.substring(0, MAX_SEARCH_LENGTH);
 const StyledOutlinedInput = styled(OutlinedInput, {
   shouldForwardProp: p => !['styles', 'dense', 'isRtl'].includes(p)
 })(_ref => {
@@ -15488,20 +15601,18 @@ function ListBoxSearch(_ref2) {
     setStoreValue('inputText', value);
   }, [value]);
   const onChange = async e => {
-    setValue(e.target.value);
-    if (!e.target.value.length) {
+    const searchValue = limitSearchLength(e.target.value);
+    setValue(searchValue);
+    if (!searchValue.length) {
       return abortSearch();
     }
-    return model.searchListObjectFor(TREE_PATH, e.target.value);
+    return model.searchListObjectFor(TREE_PATH, searchValue);
   };
   const handleFocus = () => {
     if (wildCardSearch) {
       setValue(WILDCARD);
       setWildcardOn(true);
     }
-    if (!selectionState.selectDisabled() && !selections.isModal()) {
-      selections.begin(['/qListObjectDef']);
-    }
   };
   const hasHits = () => {
     const listCount = getStoreValue("listCount");
@@ -15509,11 +15620,12 @@ function ListBoxSearch(_ref2) {
   };
   const performSearch = async () => {
     let response;
-    const success = await model.searchListObjectFor(TREE_PATH, value);
+    const searchValue = limitSearchLength(value);
+    const success = await model.searchListObjectFor(TREE_PATH, searchValue);
     if (selectionState.selectDisabled()) {
       return success;
     }
-    if (success && value.length && hasHits()) {
+    if (success && searchValue.length && hasHits()) {
       response = model.acceptListObjectSearch(TREE_PATH, true);
       // eslint-disable-next-line no-param-reassign
       selections.selectionsMade = true;
@@ -19422,6 +19534,7 @@ class AutoSizer extends Component {
       defaultWidth,
       disableHeight = false,
       disableWidth = false,
+      doNotBailOutOnEmptyChildren = false,
       nonce,
       onResize,
       style = {},
@@ -19462,6 +19575,9 @@ class AutoSizer extends Component {
       childParams.width = width;
       childParams.scaledWidth = scaledWidth;
     }
+    if (doNotBailOutOnEmptyChildren) {
+      bailoutOnChildren = false;
+    }
     return createElement(tagName, {
       ref: this._setRef,
       style: {
@@ -19743,16 +19859,6 @@ function getContainerPadding(_ref) {
   return containerPadding;
 }
 
-const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
-  shapes: [{
-    type: 'path',
-    attrs: {
-      d: 'M15.9993744,3 L15.9993744,5 L4.99937445,5 L4.99937445,3 L15.9993744,3 Z M8.99937445,7 L15.9993744,7 L15.9993744,9 L8.99937445,9 L8.99937445,7 Z M11.9993744,11 L15.9993744,11 L15.9993744,13 L11.9993744,13 L11.9993744,11 Z M2.2,11 L7,11 L7,9.00369263 C7,8.89323568 7.08954305,8.80369263 7.2,8.80369263 C7.2549016,8.80369263 7.30738916,8.82626165 7.34515712,8.86610844 L10.1852182,11.8624926 C10.2583124,11.93961 10.258346,12.0604218 10.1852948,12.13758 L7.34523376,15.1373102 C7.2692928,15.2175206 7.14270711,15.2209817 7.06249671,15.1450407 C7.02260076,15.1072683 7,15.0547472 7,14.9998069 L7,12.9043747 C4.79351111,12.9043747 2.8018683,12.9266213 1.02507156,12.9711145 L1.02507252,12.9711526 C0.472939773,12.9849787 0.014139487,12.5485949 0.000313396522,11.9964622 C0.000104473692,11.988119 -1.32268838e-12,11.9797736 -1.3231638e-12,11.9714278 L-1.83320026e-12,3 L2,3 L2,10.8 C2,10.9104569 2.08954305,11 2.2,11 Z'
-    }
-  }]
-});
-var DrillDownIcon = (props => SvgIcon$1(drillDown(props)));
-
 function showToolbarDetached(_ref) {
   var _titleRef$current$cli, _titleRef$current, _titleRef$current2, _titleRef$current3;
   let {
@@ -19908,6 +20014,127 @@ function UnlockCoverButton(_ref4) {
   return component;
 }
 
+const cyclic = props => _objectSpread2(_objectSpread2({}, props), {}, {
+  shapes: [{
+    type: 'path',
+    attrs: {
+      d: 'M 6 2 h 10 V 1 H 6 Z m 5 5 h 5 V 6 h -5 Z m 5 5 h -5 v -1 h 5 Z M 5 10 h 1 v 2.663 a 3.5 3.5 0 1 0 -2.922 0.036 l -0.406 0.914 A 4.501 4.501 0 1 1 7.329 13 H 9 v 1 H 5 Z'
+    }
+  }]
+});
+var CyclicIcon = (props => SvgIcon$1(cyclic(props)));
+
+const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
+  shapes: [{
+    type: 'path',
+    attrs: {
+      d: 'M7 4h9v1H7zm2 4h7v1H9zm2 4h5v1h-5zM1 4v3.526a3.5 3.5 0 0 0 3.5 3.5h2.31L5.22 9.402l.715-.7L8.7 11.527 5.935 14.35l-.714-.7 1.59-1.624H4.5a4.5 4.5 0 0 1-4.5-4.5V4z'
+    }
+  }]
+});
+var DrillDownIcon = (props => SvgIcon$1(drillDown(props)));
+
+const reload = props => _objectSpread2(_objectSpread2({}, props), {}, {
+  shapes: [{
+    type: 'path',
+    attrs: {
+      d: 'M1 8a7 7 0 1 1 10 6.326V11h-1v5h5v-1h-3.124A8 8 0 1 0 8 16v-1a7 7 0 0 1-7-7Z'
+    }
+  }]
+});
+var ReloadIcon = (props => SvgIcon$1(reload(props)));
+
+const dimensionTypes = {
+  single: 'N',
+  drillDown: 'H',
+  cyclic: 'C'
+};
+const createDimensionIconData = _ref => {
+  let {
+    dimInfo,
+    app,
+    selections,
+    isPopover,
+    active
+  } = _ref;
+  switch (dimInfo.qGrouping) {
+    case dimensionTypes.drillDown:
+      return {
+        icon: DrillDownIcon,
+        tooltip: 'Listbox.DrillDown',
+        onClick: undefined
+      };
+    case dimensionTypes.cyclic:
+      {
+        const clickable = app && active;
+        return {
+          icon: clickable ? ReloadIcon : CyclicIcon,
+          tooltip: 'Listbox.Cyclic',
+          onClick: clickable ? () => {
+            if (!isPopover) {
+              selections.confirm();
+            }
+            app.getDimension(dimInfo.qLibraryId).then(dimensionModel => {
+              if (!dimensionModel.stepCycle) {
+                // eslint-disable-next-line no-console
+                console.log("engine api spec version doesn't have support for function stepCycle");
+                return;
+              }
+              dimensionModel.stepCycle(1);
+            }).catch(() => null);
+          } : undefined
+        };
+      }
+    default:
+      return undefined;
+  }
+};
+var iconUtils = {
+  createDimensionIconData
+};
+
+const StyledButton = styled$3(Button)(() => ({
+  borderRadius: 4,
+  width: 24,
+  height: 24,
+  minWidth: 22,
+  padding: 0
+}));
+function DimensionIcon(_ref) {
+  let {
+    iconData,
+    translator,
+    iconStyle,
+    disabled
+  } = _ref;
+  if (!iconData) return undefined;
+  const {
+    icon,
+    tooltip,
+    onClick
+  } = iconData;
+  const Icon = icon;
+  const title = translator.get(tooltip);
+  const isButton = onClick;
+  return isButton ? /*#__PURE__*/React__default.createElement(StyledButton, {
+    variant: "outlined",
+    onClick: onClick,
+    tabIndex: -1,
+    title: title,
+    size: "large",
+    disableRipple: true,
+    disabled: disabled
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    style: iconStyle
+  })) : /*#__PURE__*/React__default.createElement(Icon, {
+    title: title,
+    size: "large",
+    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
+      padding: "".concat(ICON_PADDING, "px")
+    })
+  });
+}
+
 // ms that needs to pass before the lock button can be toggled again
 const lockTimeFrameMs = 500;
 let lastTime = 0;
@@ -19942,7 +20169,7 @@ function getToggleLock(_ref) {
   };
 }
 function ListBoxHeader(_ref2) {
-  var _layout$qListObject, _layout$qListObject3;
+  var _layout$qListObject, _layout$qListObject3, _layout$qListObject4;
   let {
     layout,
     translator,
@@ -19950,7 +20177,6 @@ function ListBoxHeader(_ref2) {
     isRtl,
     showLock,
     showSearchIcon,
-    isDrillDown,
     constraints,
     onShowSearch,
     classes,
@@ -19964,7 +20190,9 @@ function ListBoxHeader(_ref2) {
     isDirectQuery,
     selections,
     keyboard,
-    autoConfirm
+    autoConfirm,
+    app,
+    isInSelection
   } = _ref2;
   const [isToolbarDetached, setIsToolbarDetached] = useState$1(showDetachedToolbarOnly);
   const [isLocked, setLocked] = useState$1(layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 || (_layout$qListObject = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qLocked);
@@ -19974,15 +20202,22 @@ function ListBoxHeader(_ref2) {
     setLocked(layout === null || layout === void 0 || (_layout$qListObject2 = layout.qListObject) === null || _layout$qListObject2 === void 0 || (_layout$qListObject2 = _layout$qListObject2.qDimensionInfo) === null || _layout$qListObject2 === void 0 ? void 0 : _layout$qListObject2.qLocked);
   }, [layout === null || layout === void 0 || (_layout$qListObject3 = layout.qListObject) === null || _layout$qListObject3 === void 0 || (_layout$qListObject3 = _layout$qListObject3.qDimensionInfo) === null || _layout$qListObject3 === void 0 ? void 0 : _layout$qListObject3.qLocked]);
   const titleRef = useRef(null);
+  const iconData = iconUtils.createDimensionIconData({
+    dimInfo: layout === null || layout === void 0 || (_layout$qListObject4 = layout.qListObject) === null || _layout$qListObject4 === void 0 ? void 0 : _layout$qListObject4.qDimensionInfo,
+    app,
+    selections,
+    isPopover,
+    active: !(constraints !== null && constraints !== void 0 && constraints.active)
+  });
   const showUnlock = showLock && isLocked;
   const showLockIcon = !showLock && isLocked; // shows instead of the cover button when field/dim is locked.
-  const showLeftIcon = showSearchIcon || showLockIcon || isDrillDown; // the left-most icon outside of the actions/selections toolbar.
+  const showLeftIcon = showSearchIcon || showLockIcon || iconData; // the left-most icon outside of the actions/selections toolbar.
 
   const paddingLeft = CELL_PADDING_LEFT - (showLeftIcon ? ICON_PADDING : 0);
   const paddingRight = isRtl ? CELL_PADDING_LEFT - (showLeftIcon ? ICON_PADDING : 0) : HEADER_PADDING_RIGHT;
 
   // Calculate explicit width for icons container. Search and lock cannot exist combined.
-  const iconsWidth = (showSearchIcon ? BUTTON_ICON_WIDTH : 0) + (showLockIcon ? BUTTON_ICON_WIDTH : 0) + (isDrillDown ? BUTTON_ICON_WIDTH : 0);
+  const iconsWidth = (showSearchIcon ? BUTTON_ICON_WIDTH : 0) + (showLockIcon ? BUTTON_ICON_WIDTH : 0) + (iconData ? BUTTON_ICON_WIDTH : 0);
   const toggleLock = getToggleLock({
     isLocked,
     setLocked,
@@ -20081,12 +20316,11 @@ function ListBoxHeader(_ref2) {
     alignItems: "center",
     width: iconsWidth,
     className: "header-action-container"
-  }, lockedIconComp || showSearchIcon && searchIconComp, isDrillDown && /*#__PURE__*/React__default.createElement(DrillDownIcon, {
-    tabIndex: -1,
-    title: translator.get('Listbox.DrillDown'),
-    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
-      padding: "".concat(ICON_PADDING, "px")
-    })
+  }, lockedIconComp || showSearchIcon && searchIconComp, /*#__PURE__*/React__default.createElement(DimensionIcon, {
+    iconData: iconData,
+    iconStyle: iconStyle,
+    disabled: isInSelection && isPopover,
+    translator: translator
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true,
@@ -20156,7 +20390,7 @@ const isModal = _ref2 => {
   return (_app$isInModalSelecti = (_app$isInModalSelecti2 = app.isInModalSelection) === null || _app$isInModalSelecti2 === void 0 ? void 0 : _app$isInModalSelecti2.call(app)) !== null && _app$isInModalSelecti !== void 0 ? _app$isInModalSelecti : appSelections.isInModal();
 };
 function ListBoxInline(_ref3) {
-  var _layout$qListObject, _layout$qListObject2, _layout$title, _layoutOptions$dense, _containerRef$current;
+  var _layout$qListObject, _layout$title, _layoutOptions$dense, _containerRef$current;
   let {
     options,
     layout
@@ -20246,6 +20480,7 @@ function ListBoxInline(_ref3) {
   }), [app, appSelections]);
   const isInvalid = layout === null || layout === void 0 ? void 0 : layout.qListObject.qDimensionInfo.qError;
   const errorText = isInvalid && constraints.active ? 'Visualization.Invalid.Dimension' : 'Visualization.Incomplete';
+  const [isInSelection, setIsInSelection] = useState$1(false);
   const {
     handleKeyDown,
     handleOnMouseEnter,
@@ -20274,9 +20509,11 @@ function ListBoxInline(_ref3) {
     }
     const show = () => {
       setShowToolbar(true);
+      setIsInSelection(true);
     };
     const hide = () => {
       setShowToolbar(false);
+      setIsInSelection(false);
       if (search === 'toggle') {
         setShowSearch(false);
       }
@@ -20284,7 +20521,6 @@ function ListBoxInline(_ref3) {
     if (isPopover) {
       // When isPopover, toolbar == false will be ignored.
       if (!selections.isActive()) {
-        selections.begin('/qListObjectDef');
         selections.on('activated', show);
         selections.on('deactivated', hide);
       }
@@ -20322,7 +20558,6 @@ function ListBoxInline(_ref3) {
   } = layout !== null && layout !== void 0 ? layout : {};
   const isLocked = layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 || (_layout$qListObject = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qLocked;
   const showSearchIcon = searchEnabled !== false && search === 'toggle' && !isLocked;
-  const isDrillDown = (layout === null || layout === void 0 || (_layout$qListObject2 = layout.qListObject) === null || _layout$qListObject2 === void 0 || (_layout$qListObject2 = _layout$qListObject2.qDimensionInfo) === null || _layout$qListObject2 === void 0 ? void 0 : _layout$qListObject2.qGrouping) === 'H';
   const canShowTitle = (layout === null || layout === void 0 || (_layout$title = layout.title) === null || _layout$title === void 0 ? void 0 : _layout$title.length) && (layout === null || layout === void 0 ? void 0 : layout.showTitle) !== false;
   const showDetachedToolbarOnly = toolbar && !canShowTitle && !isPopover;
   const showAttachedToolbar = toolbar && canShowTitle || isPopover;
@@ -20360,8 +20595,8 @@ function ListBoxInline(_ref3) {
   }
   const listBoxMinHeight = showAttachedToolbar ? DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH : 0;
   const listBoxHeader = /*#__PURE__*/React__default.createElement(ListBoxHeader, {
+    app: app,
     showSearchIcon: showSearchIcon,
-    isDrillDown: isDrillDown,
     onShowSearch: handleShowSearch,
     isPopover: isPopover,
     showToolbar: showToolbar,
@@ -20380,7 +20615,8 @@ function ListBoxInline(_ref3) {
     model: model,
     selectionState: selectionState$1,
     selections: selections,
-    keyboard: keyboard
+    keyboard: keyboard,
+    isInSelection: isInSelection
   });
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && listBoxHeader, /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
@@ -20545,7 +20781,7 @@ function useExistingModel(_ref) {
 /**
  * Extends `ListObjectDef`, see Engine API: `ListObjectDef`.
  * @interface ListObjectDef
- * @extends EngineAPI.IListObjectDef
+ * @extends qix.ListObjectDef
  * @property {boolean} [frequencyEnabled=false] Show frequency count. also requires qListObjectDef.qFrequencyMode to be set
  */
 
@@ -21384,10 +21620,10 @@ async function populateData(_ref, halo) {
 /**
  * @since 1.1.0
  * @interface ExportDataDef
- * @property {EngineAPI.INxDimension[]} dimensions
- * @property {EngineAPI.INxMeasure[]} measures
- * @property {EngineAPI.INxDimension[]} excludedDimensions
- * @property {EngineAPI.INxMeasure[]} excludedMeasures
+ * @property {qix.NxDimension[]} dimensions
+ * @property {qix.NxMeasure[]} measures
+ * @property {qix.NxDimension[]} excludedDimensions
+ * @property {qix.NxMeasure[]} excludedMeasures
  * @property {number[]} interColumnSortOrder
  */
 
@@ -24604,7 +24840,7 @@ function useRect() {
 /**
  * Gets the layout of the generic object associated with this visualization.
  * @entry
- * @returns {EngineAPI.IGenericObjectLayout}
+ * @returns {qix.GenericObjectLayout}
  * @example
  * import { useLayout } from '@nebula.js/stardust';
  * // ...
@@ -24624,7 +24860,7 @@ function useLayout() {
  * The returned value from `useStaleLayout()` and `useLayout()` are identical when the object
  * is not in a modal state.
  * @entry
- * @returns {EngineAPI.IGenericObjectLayout}
+ * @returns {qix.GenericObjectLayout}
  * @example
  * import { useStaleLayout } from '@nebula.js/stardust';
  * // ...
@@ -24645,7 +24881,7 @@ function useStaleLayout() {
 /**
  * Gets the layout of the app associated with this visualization.
  * @entry
- * @returns {EngineAPI.INxAppLayout} The app layout
+ * @returns {qix.NxAppLayout} The app layout
  * @example
  * import { useAppLayout } from '@nebula.js/stardust';
  * // ...
@@ -24659,7 +24895,7 @@ function useAppLayout() {
 /**
  * Gets the generic object API of the generic object connected to this visualization.
  * @entry
- * @returns {EngineAPI.IGenericObject|undefined}
+ * @returns {qix.GenericObject|undefined}
  * @example
  * import { useModel } from '@nebula.js/stardust';
  * // ...
@@ -24678,7 +24914,7 @@ function useModel() {
 /**
  * Gets the doc API.
  * @entry
- * @returns {EngineAPI.IApp|undefined} The doc API.
+ * @returns {qix.Doc|undefined} The doc API.
  * @example
  * import { useApp } from '@nebula.js/stardust';
  * // ...
@@ -24697,7 +24933,7 @@ function useApp() {
 /**
  * Gets the global API.
  * @entry
- * @returns {EngineAPI.IGlobal|undefined} The global API.
+ * @returns {qix.Global|undefined} The global API.
  * @example
  * import { useGlobal } from '@nebula.js/stardust';
  *
@@ -24747,7 +24983,7 @@ function useSelections() {
  * import { useTheme } from '@nebula.js/stardust';
  *
  * const theme = useTheme();
- * console.log(theme.getContrastinColorTo('#ff0000'));
+ * console.log(theme.getContrastingColorTo('#ff0000'));
  */
 function useTheme() {
   return useInternalContext('theme');
@@ -24940,7 +25176,7 @@ function useConstraints() {
  * @interface Interactions
  * @property {boolean=} passive=true Whether or not passive interactions are on. Allows passive interaction by users, ie: tooltips
  * @property {boolean=} active=true Whether or not active interactions are on. Allows active interaction by users, ie: scroll, click
- * @property {boolean=} select=true Whether or not select interactions are on. Alows selection actions. Implied when active is false.
+ * @property {boolean=} select=true Whether or not select interactions are on. Allows selection actions. Implied when active is false.
  * @property {boolean=} edit=false Whether or not edit actions are on. Allows edit actions.
  */
 /**
@@ -25068,7 +25304,7 @@ function useImperativeHandle(fn, deps) {
 /**
  * Registers a callback that is called when a snapshot is taken.
  * @entry
- * @param {function(EngineAPI.IGenericObjectLayout): Promise<EngineAPI.IGenericObjectLayout>} snapshotCallback
+ * @param {function(qix.GenericObjectLayout): Promise<qix.GenericObjectLayout>} snapshotCallback
  * @example
  * import { onTakeSnapshot } from '@nebula.js/stardust';
  * import { useState } from '@nebula.js/stardust';
@@ -25129,7 +25365,7 @@ function onContextMenu(cb) {
  *
  * const renderState = useRenderState();
  * useState(() => {
- *   if(needProperteisUpdate(...)) {
+ *   if(needPropertiesUpdate(...)) {
  *      useRenderState.pending();
  *      updateProperties(...);
  *   } else {
@@ -25671,7 +25907,7 @@ const noop = () => {};
 
 /**
  * @interface QAEDefinition
- * @property {EngineAPI.IGenericObjectProperties=} properties
+ * @property {qix.GenericObjectProperties=} properties
  * @property {object=} data
  * @property {DataTarget[]} data.targets
  * @property {importProperties=} importProperties
@@ -25681,22 +25917,22 @@ const noop = () => {};
 /**
  * @interface DataTarget
  * @property {string} path
- * @property {FieldTarget<EngineAPI.INxDimension>=} dimensions
- * @property {FieldTarget<EngineAPI.INxMeasure>=} measures
+ * @property {FieldTarget<qix.NxDimension>=} dimensions
+ * @property {FieldTarget<qix.NxMeasure>=} measures
  */
 
 /**
  * @callback fieldTargetAddedCallback
  * @template T
  * @param {T} field
- * @param {EngineAPI.IGenericObjectProperties} properties
+ * @param {qix.GenericObjectProperties} properties
  */
 
 /**
  * @callback fieldTargetRemovedCallback
  * @template T
  * @param {T} field
- * @param {EngineAPI.IGenericObjectProperties} properties
+ * @param {qix.GenericObjectProperties} properties
  * @param {number} index
  */
 
@@ -25960,7 +26196,7 @@ function viz() {
     id: model.id,
     /**
      * This visualizations Enigma model, a representation of the generic object.
-     * @type {EngineAPI.IGenericObject}
+     * @type {qix.GenericObject}
      */
     model,
     /**
@@ -26081,7 +26317,6 @@ function viz() {
     },
     /**
      * Listens to custom events from inside the visualization. See useEmitter
-     * @experimental
      * @param {string} eventName Event name to listen to
      * @param {Function} listener Callback function to invoke
      */
@@ -26090,7 +26325,6 @@ function viz() {
     },
     /**
      * Removes a listener
-     * @experimental
      * @param {string} eventName Event name to remove from
      * @param {Function} listener Callback function to remove
      */
@@ -26105,6 +26339,16 @@ function viz() {
       await rendered;
       return cellRef.current.getImperativeHandle();
     },
+    /**
+     * Takes a snapshot of the Viz layout and state
+     * @experimental
+     * @private
+     * @returns {Promise<object>} viz layout object with snapshot settings
+     */
+    async takeSnapshot() {
+      await rendered;
+      return cellRef.current.takeSnapshot();
+    },
     // ===== unexposed experimental API - use at own risk ======
     __DO_NOT_USE__: {
       mount(element) {
@@ -26239,7 +26483,7 @@ async function init(model, optional, halo, initialError) {
 }
 
 /**
- * @typedef {string | EngineAPI.INxDimension | EngineAPI.INxMeasure | LibraryField} Field
+ * @typedef {string | qix.NxDimension | qix.NxMeasure | LibraryField} Field
  */
 
 /**
@@ -26253,7 +26497,7 @@ async function init(model, optional, halo, initialError) {
  * @property {string=} version For creating objects: Version of visualization to render
  * @property {(Field[])=} fields For creating objects: Data fields to use
  * @property {boolean=} [extendProperties=false] For creating objects: Whether to deeply extend properties or not. If false then subtrees will be overwritten.
- * @property {EngineAPI.IGenericObjectProperties=} properties For creating objects: Explicit properties to set
+ * @property {qix.GenericObjectProperties=} properties For creating objects: Explicit properties to set
  * @example
  * // A config for Creating objects:
  * const createConfig = {
@@ -26344,7 +26588,7 @@ async function createSessionObject(_ref, halo, store) {
 }
 
 /**
- * @typedef {string | EngineAPI.INxDimension | EngineAPI.INxMeasure | LibraryField} Field
+ * @typedef {string | qix.NxDimension | qix.NxMeasure | LibraryField} Field
  */
 
 /**
@@ -26353,7 +26597,7 @@ async function createSessionObject(_ref, halo, store) {
  * @property {string} type
  * @property {string=} version
  * @property {(Field[])=} fields
- * @property {EngineAPI.IGenericObjectProperties=} properties
+ * @property {qix.GenericObjectProperties=} properties
  */
 
 async function createObject(_ref, halo, generateOnly, store) {
@@ -29074,7 +29318,10 @@ const DEFAULT_CONFIG = {
   themes: [],
   anything: {},
   flags: {
-    KPI_REACTCOLORPICKER: true
+    KPI_REACTCOLORPICKER: true,
+    IM_1869_HIDE_DIM_MEA_LINE: true,
+    IM_1579_HIDE_DIM_MEA: true,
+    CLIENT_IM_3365: true
   },
   snapshot: DEFAULT_SNAPSHOT_CONFIG
 };
@@ -29155,7 +29402,7 @@ function nuked() {
    * Initiates a new `Embed` instance using the specified enigma `app`.
    * @entry
    * @function embed
-   * @param {EngineAPI.IApp} app
+   * @param {qix.Doc} app
    * @param {Configuration=} instanceConfig
    * @returns {Embed}
    * @example
@@ -29270,8 +29517,7 @@ function nuked() {
       /**
        * Creates a visualization model
        * @param {CreateConfig} cfg The create configuration.
-       * @experimental
-       * @returns {Promise<EngineAPI.IGenericObject>} An engima model
+       * @returns {Promise<qix.GenericObject>} An engima model
        * @example
        * // create a barchart in the app and return the model
        * const model = await n.create({
@@ -29285,7 +29531,6 @@ function nuked() {
       /**
        * Generates properties for a visualization object
        * @param {CreateConfig} cfg The create configuration.
-       * @experimental
        * @returns {Promise<object>} The objects properties
        * @example
        * // generate properties for a barchart
@@ -29905,7 +30150,7 @@ function fromGenericObjects(genericObjects) {
  */
 const mocker = /** @lends EnigmaMocker# */{
   /**
-   * Mocks Engima app functionality. It accepts one / many generic objects as input argument and returns the mocked Enigma app. Each generic object represents one visulization and specifies how it behaves. For example, what layout to use the data to present.
+   * Mocks Engima app functionality. It accepts one / many generic objects as input argument and returns the mocked Enigma app. Each generic object represents one visualisation and specifies how it behaves. For example, what layout to use the data to present.
    *
    * The generic object is represented with a Javascript object with a number of properties. The name of the property correlates to the name in the Enigma model for `app.getObject(id)`. For example, the property `getLayout` in the generic object is used to define `app.getObject(id).getLayout()`. Any property can be added to the fixture (just make sure it exists and behaves as in the Enigma model!).
    *
@@ -29913,9 +30158,9 @@ const mocker = /** @lends EnigmaMocker# */{
    * @type function
    * @experimental
    * @since 3.0.0
-   * @param {Array<object>} genericObjects Generic objects controling behaviour of visualizations.
+   * @param {Array<object>} genericObjects Generic objects controlling behaviour of visualizations.
    * @param {EnigmaMockerOptions=} options Options
-   * @returns {Promise<EngineAPI.IApp>}
+   * @returns {Promise<qix.Doc>}
    * @example
    * const genericObject = {
    *   getLayout() {