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

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.0.0-alpha.3
+* @nebula.js/stardust v4.0.0-alpha.5
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -1493,6 +1493,26 @@ var Selection_SelectPossible = {
 		"zh-TW": "選取可能值"
 	}
 };
+var SelectionToolbar_ClickToUnlock = {
+	id: "SelectionToolbar.ClickToUnlock",
+	locale: {
+		"de-DE": "Klicken zum Freigeben",
+		"en-US": "Click to unlock",
+		"es-ES": "Haga clic para desbloquearla",
+		"fr-FR": "Cliquez pour déverrouiller",
+		"it-IT": "Fare clic per sbloccare",
+		"ja-JP": "クリックしてロック解除",
+		"ko-KR": "잠금을 해제하려면 클릭하십시오.",
+		"nl-NL": "Klik om te ontgrendelen",
+		"pl-PL": "Aby odblokować, kliknij",
+		"pt-BR": "Clique para destravar",
+		"ru-RU": "Щелкните, чтобы разблокировать",
+		"sv-SE": "Klicka för att låsa upp",
+		"tr-TR": "Kilidi kaldırmak için tıklayın",
+		"zh-CN": "单击以解锁",
+		"zh-TW": "按一下以解除鎖定"
+	}
+};
 var Visualization_Incomplete = {
 	id: "Visualization.Incomplete",
 	locale: {
@@ -1664,6 +1684,7 @@ var all = {
 	Selection_SelectAlternative: Selection_SelectAlternative,
 	Selection_SelectExcluded: Selection_SelectExcluded,
 	Selection_SelectPossible: Selection_SelectPossible,
+	SelectionToolbar_ClickToUnlock: SelectionToolbar_ClickToUnlock,
 	Visualization_Incomplete: Visualization_Incomplete,
 	Visualization_Incomplete_Dimensions: Visualization_Incomplete_Dimensions,
 	Visualization_Incomplete_Measures: Visualization_Incomplete_Measures,
@@ -8043,7 +8064,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "ee80" ;
+const NEBULA_VERSION_HASH = "6643" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8251,7 +8272,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.3" );
+  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.5" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   const root = client.createRoot(element);
@@ -9620,6 +9641,16 @@ const getValueStateClasses = _ref2 => {
   return clazzArr;
 };
 
+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 REMOVE_TICK_LIMIT = 80; // an item width equal to or less than this, will hide the select tick
+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;
 const frequencyTextNone = '-';
 const barPadPx = 4;
 const barBorderWidthPx = 1;
@@ -9639,11 +9670,6 @@ const getBarWidth = _ref => {
 };
 const getFrequencyText = qFrequency => qFrequency || frequencyTextNone;
 
-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 {
     theme
@@ -9669,7 +9695,7 @@ const ellipsis = {
 const iconWidth = 24; // tick and lock icon width in px
 
 const RowColRoot = styled$1('div', {
-  shouldForwardProp: prop => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense', 'frequencyWidth', 'showIcon', 'checkboxes'].includes(prop)
+  shouldForwardProp: prop => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense', 'frequencyWidth'].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 {
@@ -9678,9 +9704,7 @@ const RowColRoot = styled$1('div', {
     isGridMode,
     isGridCol,
     dense,
-    frequencyWidth,
-    showIcon,
-    checkboxes
+    frequencyWidth
   } = _ref2;
   return {
     '&:focus': {
@@ -9725,7 +9749,7 @@ const RowColRoot = styled$1('div', {
       flexBasis: flexBasisProp,
       lineHeight: '16px',
       userSelect: 'none',
-      paddingRight: showIcon || checkboxes ? '1px' : "".concat(iconWidth, "px")
+      paddingRight: '1px'
     }, ellipsis), {}, {
       whiteSpace: 'pre',
       // to keep white-space on highlight
@@ -9763,6 +9787,12 @@ const RowColRoot = styled$1('div', {
         paddingRight: '2px'
       })
     },
+    ["& .".concat(rowColClasses.checkboxLabel, " .").concat(rowColClasses.labelText)]: {
+      width: 'auto'
+    },
+    ["& .".concat(rowColClasses.checkboxLabel, " .").concat(rowColClasses.labelText, ".").concat(rowColClasses.highlighted)]: {
+      width: 'auto'
+    },
     // The icons container holding tick and lock, shown inside fields.
     ["& .".concat(rowColClasses.icon)]: {
       display: 'flex',
@@ -9797,7 +9827,7 @@ const RowColRoot = styled$1('div', {
     ["& .".concat(rowColClasses.frequencyCount)]: _objectSpread2(_objectSpread2({
       justifyContent: 'flex-end'
     }, ellipsis), {}, {
-      flex: "0 1 ".concat(frequencyWidth + (showIcon || checkboxes ? 0 : iconWidth), "px"),
+      flex: "0 1 ".concat(frequencyWidth, "px"),
       textAlign: 'right',
       paddingLeft: '2px'
     }),
@@ -10103,9 +10133,12 @@ function LabelsWithRanges(_ref) {
     labels,
     dense,
     showGray,
-    checkboxes
+    checkboxes,
+    textDirection
   } = _ref;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, labels.map((_ref2, index) => {
+  return /*#__PURE__*/React__default.createElement("div", {
+    dir: textDirection
+  }, labels.map((_ref2, index) => {
     let [label, highlighted] = _ref2;
     const key = "".concat(index);
     return /*#__PURE__*/React__default.createElement(ValueField, {
@@ -10131,13 +10164,15 @@ function FieldWithRanges(_ref3) {
     cell,
     isGridCol,
     isSingleSelect,
-    valueTextAlign
+    valueTextAlign,
+    textDirection
   } = _ref3;
   const LWR = /*#__PURE__*/React__default.createElement(LabelsWithRanges, {
     labels: labels,
     dense: dense,
     showGray: showGray,
-    checkboxes: checkboxes
+    checkboxes: checkboxes,
+    textDirection: textDirection
   });
   return checkboxes ? /*#__PURE__*/React__default.createElement(CheckboxField, {
     onChange: onChange,
@@ -10288,7 +10323,7 @@ const ItemGrid = styled$1(Grid, {
     dataLayout,
     layoutOrder,
     itemPadding,
-    checkboxes
+    cellPaddingRight
   } = _ref;
   return {
     ["&.".concat(rowColClasses.fieldRoot)]: _objectSpread2(_objectSpread2({}, getGridItemSizes({
@@ -10296,7 +10331,7 @@ const ItemGrid = styled$1(Grid, {
       layoutOrder,
       itemPadding
     })), {}, {
-      paddingRight: checkboxes ? '8px' : undefined
+      paddingRight: cellPaddingRight ? '8px' : undefined
     })
   };
 });
@@ -10317,6 +10352,55 @@ function getCellFromPages(_ref) {
   return c;
 }
 
+// Source: https://en.wikipedia.org/wiki/Bi-directional_text and http://www.unicode.org/Public/6.0.0/ucd/UnicodeData.txt
+// 3 types of strong direction characters: L (strong left-to-right), R(strong right-to-left, Hebrew) and AL(strong right-to-left, Arabic language)
+const rangesOfLChars = '[\u0041-\u005A\u0061-\u007A\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u02BB-\u02C1\u02D0-\u02D1\u02E0-\u02E4\u02EE\u0370-\u0373\u0376-\u037D\u0386\u0388-\u03F5\u03F7-\u0482\u048A-\u0589\u0903-\u0939\u093B\u093D-\u0940\u0949-\u094C\u094E-\u0950\u0958-\u0961\u0964-\u097F\u0982-\u09B9\u09BD-\u09C0\u09C7-\u09CC\u09CE-\u09E1\u09E6-\u09F1\u09F4-\u09FA\u0A03-\u0A39\u0A3E-\u0A40\u0A59-\u0A6F\u0A72-\u0A74\u0A83-\u0AB9\u0ABD-\u0AC0\u0AC9-\u0ACC\u0AD0-\u0AE1\u0AE6-\u0AEF\u0B02-\u0B39\u0B3D-\u0B3E\u0B40\u0B47-\u0B4C\u0B57-\u0B61\u0B66-\u0B77\u0B83-\u0BBF\u0BC1-\u0BCC\u0BD0-\u0BF2\u0C01-\u0C3D\u0C41-\u0C44\u0C58-\u0C61\u0C66-\u0C6F\u0C7F-\u0CB9\u0CBD-\u0CCB\u0CD5-\u0CE1\u0CE6-\u0D40\u0D46-\u0D4C\u0D4E-\u0D61\u0D66-\u0DC6\u0DCF-\u0DD1\u0DD8-\u0E30\u0E32-\u0E33\u0E40-\u0E46\u0E4F-\u0EB0\u0EB2-\u0EB3\u0EBD-\u0EC6\u0ED0-\u0F17\u0F1A-\u0F34\u0F36\u0F38\u0F3E-\u0F6C\u0F7F\u0F85\u0F88-\u0F8C\u0FBE-\u0FC5\u0FC7-\u102C\u1031\u1038\u103B-\u103C\u103F-\u1057\u105A-\u105D\u1061-\u1070\u1075-\u1081\u1083-\u1084\u1087-\u108C\u108E-\u109C\u109E-\u135A\u1360-\u138F\u13A0-\u13F4\u1401-\u167F\u1681-\u169A\u16A0-\u1711\u1720-\u1731\u1735-\u1751\u1760-\u1770\u1780-\u17B6\u17BE-\u17C5\u17C7-\u17C8\u17D4-\u17DA\u17DC\u17E0-\u17E9\u1810-\u18A8\u18AA-\u191C\u1923-\u1926\u1929-\u1931\u1933-\u1938\u1946-\u19DA\u1A00-\u1A16\u1A19-\u1A55\u1A57\u1A61\u1A63-\u1A64\u1A6D-\u1A72\u1A80-\u1AAD\u1B04-\u1B33\u1B35\u1B3B\u1B3D-\u1B41\u1B43-\u1B6A\u1B74-\u1B7C\u1B82-\u1BA1\u1BA6-\u1BA7\u1BAA-\u1BE5\u1BE7\u1BEA-\u1BEC\u1BEE\u1BF2-\u1C2B\u1C34-\u1C35\u1C3B-\u1C7F\u1CD3\u1CE1\u1CE9-\u1CEC\u1CEE-\u1DBF\u1E00-\u1FBC\u1FBE\u1FC2-\u1FCC\u1FD0-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FFC\u200E\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E-\u214F\u2160-\u2188\u2336-\u237A\u2395\u249C-\u24E9\u26AC\u2800-\u28FF\u2C00-\u2CE4\u2CEB-\u2CEE\u2D00-\u2D70\u2D80-\u2DDE\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u31BA\u31F0-\u321C\u3220-\u324F\u3260-\u327B\u327F-\u32B0\u32C0-\u32CB\u32D0-\u3376\u337B-\u33DD\u33E0-\u33FE\u3400-\u4DB5\u4E00-\uA48C\uA4D0-\uA60C\uA610-\uA66E\uA680-\uA6EF\uA6F2-\uA6F7\uA722-\uA787\uA789-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA824\uA827\uA830-\uA837\uA840-\uA873\uA880-\uA8C3\uA8CE-\uA8D9\uA8F2-\uA925\uA92E-\uA946\uA952-\uA97C\uA983-\uA9B2\uA9B4-\uA9B5\uA9BA-\uA9BB\uA9BD-\uAA28\uAA2F-\uAA30\uAA33-\uAA34\uAA40-\uAA42\uAA44-\uAA4B\uAA4D-\uAAAF\uAAB1\uAAB5-\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2-\uABE4\uABE6-\uABE7\uABE9-\uABEC\uABF0-\uFB17\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFDC]';
+const rangesOfRChars = '[\u05BE\u05C0\u05C3\u05C6\u05D0-\u05F4\u07C0-\u07EA\u07F4-\u07F5\u07FA-\u0815\u081A\u0824\u0828\u0830-\u0858\u085E\u200F\uFB1D\uFB1F-\uFB28\uFB2A-\uFB4F]';
+const rangesOfALChars = '[\u0608\u060B\u060D\u061B-\u064A\u066D-\u066F\u0671-\u06D5\u06E5-\u06E6\u06EE-\u06EF\u06FA-\u070D\u0710\u0712-\u072F\u074D-\u07A5\u07B1\uFB50-\uFD3D\uFD50-\uFDFC\uFE70-\uFEFC]';
+const rangesOfNChars = '[\u0009-\u000D\u001C-\u0022\u0026-\u002A\u003B-\u0040\u005B-\u0060\u007B-\u007E\u0085\u00A1\u00A6-\u00A9\u00AB-\u00AC\u00AE-\u00AF\u00B4\u00B6-\u00B8\u00BB-\u00BF\u00D7\u00F7\u02B9-\u02BA\u02C2-\u02CF\u02D2-\u02DF\u02E5-\u02ED\u02EF-\u02FF\u0374-\u0375\u037E-\u0385\u0387\u03F6\u058A\u0606-\u0607\u060E-\u060F\u06DE\u06E9\u07F6-\u07F9\u0BF3-\u0BF8\u0BFA\u0C78-\u0C7E\u0F3A-\u0F3D\u1390-\u1399\u1400\u1680\u169B-\u169C\u17F0-\u180A\u180E\u1940-\u1945\u19DE-\u19FF\u1FBD\u1FBF-\u1FC1\u1FCD-\u1FCF\u1FDD-\u1FDF\u1FED-\u1FEF\u1FFD-\u200A\u2010-\u2029\u2035-\u2043\u2045-\u205F\u207C-\u207E\u208C-\u208E\u2100-\u2101\u2103-\u2106\u2108-\u2109\u2114\u2116-\u2118\u211E-\u2123\u2125\u2127\u2129\u213A-\u213B\u2140-\u2144\u214A-\u214D\u2150-\u215F\u2189-\u2211\u2214-\u2335\u237B-\u2394\u2396-\u2487\u24EA-\u26AB\u26AD-\u27FF\u2900-\u2B59\u2CE5-\u2CEA\u2CF9-\u2CFF\u2E00-\u3004\u3008-\u3020\u3030\u3036-\u3037\u303D-\u303F\u309B-\u309C\u30A0\u30FB\u31C0-\u31E3\u321D-\u321E\u3250-\u325F\u327C-\u327E\u32B1-\u32BF\u32CC-\u32CF\u3377-\u337A\u33DE-\u33DF\u33FF\u4DC0-\u4DFF\uA490-\uA4C6\uA60D-\uA60F\uA673\uA67E-\uA67F\uA700-\uA721\uA788\uA828-\uA82B\uA874-\uA877\uFD3E-\uFD3F\uFDFD\uFE10-\uFE19\uFE30-\uFE4F\uFE51\uFE54\uFE56-\uFE5E\uFE60-\uFE61\uFE64-\uFE68\uFE6B\uFF01-\uFF02\uFF06-\uFF0A\uFF1B-\uFF20\uFF3B-\uFF40\uFF5B-\uFF65\uFFE2-\uFFE4\uFFE8-\uFFFD]';
+// eslint-disable-next-line no-misleading-character-class
+const rangesOfLRgExp = new RegExp(rangesOfLChars);
+const rangesOfRRgExp = new RegExp(rangesOfRChars);
+const rangesOfALRgExp = new RegExp(rangesOfALChars);
+const rangesOfNRgExp = new RegExp(rangesOfNChars);
+const
+// left-to-right marker
+lrm = String.fromCharCode(8206); // right-to-left marker
+
+const rlm = String.fromCharCode(8207);
+function isLtrChar(c) {
+  return rangesOfLRgExp.test(c);
+}
+function isRtlChar(c) {
+  return rangesOfRRgExp.test(c) || rangesOfALRgExp.test(c);
+}
+function isNeutralChar(c) {
+  return rangesOfNRgExp.test(c);
+}
+function detectTextDirection(s) {
+  const n = s ? s.length : 0;
+  let i;
+  let c;
+  for (i = 0; i < n; i++) {
+    c = s[i];
+    if (isLtrChar(c)) {
+      return 'ltr';
+    }
+    if (isRtlChar(c)) {
+      return 'rtl';
+    }
+  }
+  return 'ltr';
+}
+var rtlUtil = {
+  detectTextDirection,
+  isLtrChar,
+  isRtlChar,
+  isNeutralChar,
+  lrm,
+  rlm
+};
+
 function RowColumn(_ref) {
   var _cell$qText, _cell$qHighlightRange, _cell$qHighlightRange2;
   let {
@@ -10346,7 +10430,7 @@ function RowColumn(_ref) {
     histogram = false,
     keyboard,
     showGray = true,
-    showTick: sizePermitsTick = true,
+    showTick: sizePermitsTickOrLock = true,
     columnCount = 1,
     rowCount = 1,
     dataOffset,
@@ -10442,7 +10526,7 @@ function RowColumn(_ref) {
   }
   const isGridCol = dataLayout === 'grid' && layoutOrder === 'column';
   const label = (_cell$qText = cell === null || cell === void 0 ? void 0 : cell.qText) !== null && _cell$qText !== void 0 ? _cell$qText : '';
-
+  const textDirection = rtlUtil.detectTextDirection(label);
   // Search highlights. Split up labelText span into several and add the highlighted class to matching sub-strings.
 
   let labels;
@@ -10467,23 +10551,23 @@ function RowColumn(_ref) {
   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);
+  const showTick = !checkboxes && isSelected && !isLocked;
+  const showIcon = !checkboxes && sizePermitsTickOrLock;
+  const cellPaddingRight = checkboxes || !sizePermitsTickOrLock;
   return /*#__PURE__*/React__default.createElement(RowColRoot$1, {
     className: rowColClasses.barContainer,
     flexBasisProp: flexBasisVal,
     style: styles,
-    showIcon: showIcon,
-    checkboxes: checkboxes,
     isGridCol: isGridCol,
     isGridMode: dataLayout === 'grid',
     dense: dense,
-    frequencyWidth: frequencyWidth
+    frequencyWidth: frequencyWidth,
+    "data-testid": "listbox.item"
   }, /*#__PURE__*/React__default.createElement(ItemGrid, {
     ref: rowRef,
     container: true,
     dataLayout: dataLayout,
-    checkboxes: checkboxes,
+    cellPaddingRight: cellPaddingRight,
     layoutOrder: layoutOrder,
     itemPadding: itemPadding,
     gap: 0,
@@ -10524,7 +10608,8 @@ function RowColumn(_ref) {
     cell: cell,
     isGridCol: isGridCol,
     isSingleSelect: isSingleSelect,
-    valueTextAlign: valueTextAlign
+    valueTextAlign: valueTextAlign,
+    textDirection: textDirection
   }) : /*#__PURE__*/React__default.createElement(Field$1, {
     onChange: onChange,
     label: label,
@@ -12080,8 +12165,6 @@ function handleSetOverflowDisclaimer(_ref) {
   overflowDisclaimer.set(show);
 }
 
-const REMOVE_TICK_LIMIT = 80; // an item width equal to or less than this, will hide the select tick
-
 const {
   StyledFixedSizeList,
   StyledFixedSizeGrid
@@ -12310,12 +12393,6 @@ function calculateColumnMode(_ref) {
   };
 }
 
-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,
@@ -12327,7 +12404,7 @@ function calculateRowMode(_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...??
+  const autoColumnCount = Math.min(listCount, Math.max(1, Math.round(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 {
@@ -12365,8 +12442,16 @@ function getListSizes(_ref) {
   } = layoutOptions;
   const frequencyAddWidth = freqIsAllowed ? FREQUENCY_WIDTH : 0;
   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);
+  const tickIconWidth = CHECKBOX_WIDTH;
+  let dynamicItemMinWidth = ITEM_MIN_WIDTH + frequencyAddWidth + checkboxAddWidth;
+  if (!checkboxes && dynamicItemMinWidth >= REMOVE_TICK_LIMIT) {
+    dynamicItemMinWidth += tickIconWidth;
+  }
+  let columnAutoWidth = textWidth + 18 + frequencyAddWidth + checkboxAddWidth;
+  if (!checkboxes && columnAutoWidth >= REMOVE_TICK_LIMIT) {
+    columnAutoWidth += tickIconWidth;
+  }
+  columnAutoWidth = Math.min(ITEM_MAX_WIDTH, Math.max(columnAutoWidth, dynamicItemMinWidth));
   let overflowStyling;
   let columnCount;
   let columnWidth;
@@ -12959,7 +13044,10 @@ const escapeField = field => {
   if (!field) {
     return field;
   }
-  return "".concat(field.replace(/\]/g, ']]'));
+  if (/^[A-Za-z][A-Za-z0-9_]*$/.test(field)) {
+    return field;
+  }
+  return "[".concat(field.replace(/\]/g, ']]'), "]");
 };
 const needToFetchFrequencyMax = layout => (layout === null || layout === void 0 ? void 0 : layout.frequencyMax) === 'fetch';
 const getFrequencyMaxExpression = field => {
@@ -13083,7 +13171,7 @@ function ListBox(_ref) {
     });
     if (itemsLoader.pages.length && !awaitingFrequencyMax) {
       // All necessary data fetching done - signal rendering done!
-      renderedCallback();
+      renderedCallback === null || renderedCallback === void 0 ? void 0 : renderedCallback();
     }
   }
   const isItemLoaded = useCallback(index => {
@@ -13473,7 +13561,8 @@ const Item = React__default.forwardRef((_ref, ref) => {
     size: "large",
     disableRipple: true,
     "aria-expanded": ariaExpanded,
-    "aria-controls": "moreMenuList"
+    "aria-controls": "moreMenuList",
+    "data-testid": "actions-toolbar-".concat(item.key)
   }, hasSvgIconShape && SvgIcon$2(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     style: {
@@ -13729,15 +13818,12 @@ const ActionsGroup = React__default.forwardRef((_ref2, ref) => {
 const popoverStyle = {
   pointerEvents: 'none'
 };
-const popoverAnchorOrigin = {
-  vertical: 'top',
-  horizontal: 'right'
-};
 const popoverTransformOrigin = {
   vertical: 'bottom',
   horizontal: 'right'
 };
 function ActionsToolbar(_ref3) {
+  var _popover$anchorEl$cli, _popover$anchorEl;
   let {
     show = true,
     actions = [],
@@ -13776,6 +13862,10 @@ function ActionsToolbar(_ref3) {
   const dividerStyle = useMemo$1(() => ({
     margin: theme.spacing(0.5, 0)
   }));
+  const popoverAnchorOrigin = {
+    vertical: 15,
+    horizontal: ((_popover$anchorEl$cli = (_popover$anchorEl = popover.anchorEl) === null || _popover$anchorEl === void 0 ? void 0 : _popover$anchorEl.clientWidth) !== null && _popover$anchorEl$cli !== void 0 ? _popover$anchorEl$cli : 0) - 7
+  };
   const getEnabledButton = last => {
     const actionsElement = actionsRef.current || actionsRefMock;
     if (!actionsElement) return null;
@@ -15990,19 +16080,20 @@ const classes$4 = {
   listboxWrapper: "".concat(PREFIX$4, "-listboxWrapper")
 };
 const StyledGrid$3 = styled$1(Grid, {
-  shouldForwardProp: p => !['containerPadding'].includes(p)
+  shouldForwardProp: p => !['containerPadding', 'hasIcon'].includes(p)
 })(_ref => {
   var _theme$listBox$backgr, _theme$listBox;
   let {
     theme,
-    containerPadding
+    containerPadding,
+    hasIcon
   } = _ref;
   return {
     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: 'flex',
-      width: "calc(100% - ".concat(BUTTON_ICON_WIDTH, "px)")
+      width: "calc(100% - ".concat(hasIcon ? BUTTON_ICON_WIDTH : 0, "px)")
     },
     ["& .".concat(classes$4.screenReaderOnly)]: {
       position: 'absolute',
@@ -16133,9 +16224,6 @@ function ListBoxInline(_ref3) {
   useEffect$1(() => {
     const show = () => {
       setShowToolbar(true);
-      if (search === 'toggle' && toolbar === false) {
-        setShowSearch(true);
-      }
     };
     const hide = () => {
       setShowToolbar(false);
@@ -16213,7 +16301,7 @@ function ListBoxInline(_ref3) {
     selections
   });
   const shouldAutoFocus = searchVisible && search === 'toggle';
-  const showSearchIcon = searchEnabled !== false && search === 'toggle' && !(constraints !== null && constraints !== void 0 && constraints.active);
+  const showSearchIcon = searchEnabled !== false && search === 'toggle';
   const showSearchOrLockIcon = isLocked || showSearchIcon;
   const showIcons = showSearchOrLockIcon || isDrillDown;
   const iconsWidth = (showSearchOrLockIcon ? BUTTON_ICON_WIDTH : 0) + (isDrillDown ? ICON_WIDTH + ICON_PADDING : 0); // Drill-down icon needs padding right so there is space between the icon and the title
@@ -16226,6 +16314,42 @@ function ListBoxInline(_ref3) {
   if (isGridMode) {
     containerPadding = layoutOptions.layoutOrder === 'row' ? '2px 4px' : '2px 6px 2px 4px';
   }
+  const searchIconComp = constraints !== null && constraints !== void 0 && constraints.active ? /*#__PURE__*/React__default.createElement(SearchIcon, {
+    title: translator.get('Listbox.Search'),
+    size: "large",
+    style: {
+      fontSize: '12px',
+      padding: '7px'
+    }
+  }) : /*#__PURE__*/React__default.createElement(IconButton, {
+    onClick: onShowSearch,
+    tabIndex: -1,
+    title: translator.get('Listbox.Search'),
+    size: "large",
+    disableRipple: true,
+    "data-testid": "search-toggle-btn"
+  }, /*#__PURE__*/React__default.createElement(SearchIcon, {
+    style: {
+      fontSize: '12px'
+    }
+  }));
+  const lockIconComp = selectDisabled() ? /*#__PURE__*/React__default.createElement(Lock, {
+    size: "large",
+    style: {
+      fontSize: '12px',
+      padding: '7px'
+    }
+  }) : /*#__PURE__*/React__default.createElement(IconButton, {
+    title: translator.get('SelectionToolbar.ClickToUnlock'),
+    tabIndex: -1,
+    onClick: unlock,
+    size: "large"
+  }, /*#__PURE__*/React__default.createElement(Lock, {
+    disableRipple: true,
+    style: {
+      fontSize: '12px'
+    }
+  }));
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, toolbarDetachedOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$6({
     direction: direction
   }, getActionToolbarProps(true))), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
@@ -16243,7 +16367,8 @@ function ListBoxInline(_ref3) {
     onKeyDown: handleKeyDown,
     onMouseEnter: handleOnMouseEnter,
     onMouseLeave: handleOnMouseLeave,
-    ref: containerRef
+    ref: containerRef,
+    hasIcon: showIcons
   }, toolbar && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
@@ -16271,29 +16396,7 @@ function ListBoxInline(_ref3) {
       alignItems: 'center',
       width: iconsWidth
     }
-  }, isLocked ? /*#__PURE__*/React__default.createElement(IconButton, {
-    title: translator.get('SelectionToolbar.ClickToUnlock'),
-    tabIndex: -1,
-    onClick: unlock,
-    disabled: selectDisabled(),
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(Lock, {
-    disableRipple: true,
-    style: {
-      fontSize: '12px'
-    }
-  })) : showSearchIcon && /*#__PURE__*/React__default.createElement(IconButton, {
-    onClick: onShowSearch,
-    tabIndex: -1,
-    title: translator.get('Listbox.Search'),
-    size: "large",
-    disableRipple: true,
-    "data-testid": "search-toggle-btn"
-  }, /*#__PURE__*/React__default.createElement(SearchIcon, {
-    style: {
-      fontSize: '12px'
-    }
-  })), isDrillDown && /*#__PURE__*/React__default.createElement(DrillDownIcon, {
+  }, isLocked ? lockIconComp : showSearchIcon && searchIconComp, isDrillDown && /*#__PURE__*/React__default.createElement(DrillDownIcon, {
     tabIndex: -1,
     title: translator.get('Listbox.DrillDown'),
     size: "large",
@@ -18829,12 +18932,21 @@ const loadType = async _ref5 => {
     });
     return sn;
   } catch (err) {
-    dispatch({
-      type: 'ERROR',
-      error: {
-        title: err.message
-      }
-    });
+    if (!version) {
+      dispatch({
+        type: 'ERROR',
+        error: {
+          title: "Could not find a version of '".concat(visualization, "' that supports current object version. Did you forget to register ").concat(visualization, "?")
+        }
+      });
+    } else {
+      dispatch({
+        type: 'ERROR',
+        error: {
+          title: err.message
+        }
+      });
+    }
   }
   return undefined;
 };
@@ -18991,15 +19103,6 @@ const Cell = forwardRef((_ref6, ref) => {
 
     // Load supernova
     const withVersion = types.getSupportedVersion(layout.visualization, layout.version);
-    if (!withVersion) {
-      dispatch({
-        type: 'ERROR',
-        error: {
-          title: "Could not find a version of '".concat(layout.visualization, "' that supports current object version. Did you forget to register ").concat(layout.visualization, "?")
-        }
-      });
-      return undefined;
-    }
     load(layout.visualization, withVersion);
     return () => {};
   }, [types, state.sn, model, selections, layout, appLayout, language]);