@nebula.js/stardust 4.12.0 → 4.14.0

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.12.0
+* @nebula.js/stardust v4.14.0
 * Copyright (c) 2024 QlikTech International AB
 * Released under the MIT license.
 */
@@ -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,
@@ -2850,6 +2871,23 @@ var dataColors = {
 	errorColor: "#ff4444",
 	nullColor: "#d2d2d2"
 };
+var object$2 = {
+	title: {
+		main: {
+			color: "@B50",
+			fontSize: "15px"
+		},
+		subTitle: {
+			color: "@B50",
+			fontSize: "12px"
+		},
+		footer: {
+			color: "@B50",
+			fontSize: "12px",
+			backgroundColor: "transparent"
+		}
+	}
+};
 var scales = [
 	{
 		name: "Sequential Gradient",
@@ -3036,6 +3074,7 @@ var baseRawJSON = {
 	fontFamily: fontFamily,
 	backgroundColor: backgroundColor$1,
 	dataColors: dataColors,
+	object: object$2,
 	scales: scales,
 	palettes: palettes
 };
@@ -3233,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') {
@@ -5338,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,
@@ -5372,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) {
@@ -6437,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 = {},
@@ -6445,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({
@@ -6491,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 = {
@@ -6512,7 +6557,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$e);
+    other = _objectWithoutPropertiesLoose(props, _excluded$f);
   const {
     systemProps,
     otherProps
@@ -6947,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 = () => {
@@ -6967,7 +7012,7 @@ class Timeout {
   start(delay, fn) {
     this.clear();
     this.currentId = setTimeout(() => {
-      this.currentId = 0;
+      this.currentId = null;
       fn();
     }, delay);
   }
@@ -7190,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(() => {
@@ -7229,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
+      })
     })
   });
 }
@@ -8693,7 +8754,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 = {
@@ -9033,7 +9094,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "03a3" ;
+const NEBULA_VERSION_HASH = "3232" ;
 ClassNameGenerator.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -9293,7 +9354,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "4.12.0" );
+  element.setAttribute('data-nebulajs-version', "4.14.0" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -10458,31 +10519,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;
 };
@@ -10549,15 +10631,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,
@@ -10603,16 +10697,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")
@@ -10694,26 +10801,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'
@@ -10749,33 +10863,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'
     }
   };
@@ -11738,10 +11842,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]);
@@ -15385,6 +15488,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',
@@ -15409,8 +15515,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 => {
@@ -15519,11 +15627,12 @@ 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) {
@@ -15540,11 +15649,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;
@@ -17821,6 +17931,7 @@ function resolveTextStyle(textComp, target, theme, objectType) {
   const fontStyle = unfurlFontStyle(textProps.fontStyle, target);
   return {
     fontFamily: textProps.fontFamily || theme.getStyle("object.".concat(objectType), "title.".concat(target), 'fontFamily'),
+    fontSize: textProps.fontSize || theme.getStyle("object.".concat(objectType), "title.".concat(target), 'fontSize'),
     color: textProps.color && textProps.color.color !== 'none' ? theme.getColorPickerColor(textProps.color, true) : theme.getStyle("object.".concat(objectType), target, 'color'),
     fontWeight: fontStyle.includes('bold') ? 'bold' : 'normal',
     fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',
@@ -19326,6 +19437,7 @@ class AutoSizer extends Component {
       defaultWidth,
       disableHeight = false,
       disableWidth = false,
+      doNotBailOutOnEmptyChildren = false,
       nonce,
       onResize,
       style = {},
@@ -19366,6 +19478,9 @@ class AutoSizer extends Component {
       childParams.width = width;
       childParams.scaledWidth = scaledWidth;
     }
+    if (doNotBailOutOnEmptyChildren) {
+      bailoutOnChildren = false;
+    }
     return createElement(tagName, {
       ref: this._setRef,
       style: {
@@ -19647,16 +19762,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 {
@@ -19812,6 +19917,112 @@ 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 = (dimInfo, app) => {
+  switch (dimInfo.qGrouping) {
+    case dimensionTypes.drillDown:
+      return {
+        icon: DrillDownIcon,
+        tooltip: 'Listbox.DrillDown',
+        onClick: undefined
+      };
+    case dimensionTypes.cyclic:
+      return {
+        icon: app ? ReloadIcon : CyclicIcon,
+        tooltip: 'Listbox.Cyclic',
+        onClick: app ? () => {
+          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
+  } = _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
+  }, /*#__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;
@@ -19846,7 +20057,7 @@ function getToggleLock(_ref) {
   };
 }
 function ListBoxHeader(_ref2) {
-  var _layout$qListObject, _layout$qListObject3;
+  var _layout$qListObject, _layout$qListObject3, _layout$qListObject4;
   let {
     layout,
     translator,
@@ -19854,7 +20065,6 @@ function ListBoxHeader(_ref2) {
     isRtl,
     showLock,
     showSearchIcon,
-    isDrillDown,
     constraints,
     onShowSearch,
     classes,
@@ -19868,7 +20078,8 @@ function ListBoxHeader(_ref2) {
     isDirectQuery,
     selections,
     keyboard,
-    autoConfirm
+    autoConfirm,
+    app
   } = _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);
@@ -19878,15 +20089,16 @@ 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(layout === null || layout === void 0 || (_layout$qListObject4 = layout.qListObject) === null || _layout$qListObject4 === void 0 ? void 0 : _layout$qListObject4.qDimensionInfo, app);
   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,
@@ -19985,12 +20197,10 @@ 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,
+    translator: translator
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true,
@@ -20060,7 +20270,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
@@ -20226,7 +20436,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;
@@ -20264,8 +20473,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,
@@ -28962,7 +29171,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
 };