@nebula.js/stardust 3.1.2 → 3.2.0

package/core/esm/dev.js

@@ -1,11 +1,11 @@
 /*
-* @nebula.js/stardust v3.1.2
+* @nebula.js/stardust v3.2.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
 
 import * as React from 'react';
-import React__default, { useState as useState$1, useEffect as useEffect$1, useReducer, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, createElement, useContext, useRef } from 'react';
+import React__default, { useState as useState$1, useEffect as useEffect$1, useReducer, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, createElement, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { CacheProvider, ThemeContext as ThemeContext$2 } from '@emotion/react';
 import { Checkbox, Radio, Grid, Typography, FormControlLabel, Tooltip, Paper, IconButton, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Box, Icon, CircularProgress } from '@mui/material';
@@ -953,6 +953,46 @@ var CurrentSelections_Of = {
 		"zh-TW": "{0}/ {1}"
 	}
 };
+var Listbox_Dismiss = {
+	id: "Listbox.Dismiss",
+	locale: {
+		"de-DE": "Schließen",
+		"en-US": "Dismiss",
+		"es-ES": "Descartar",
+		"fr-FR": "Ignorer",
+		"it-IT": "Ignora",
+		"ja-JP": "却下",
+		"ko-KR": "해제",
+		"nl-NL": "Overslaan",
+		"pl-PL": "Zamknij",
+		"pt-BR": "Ignorar",
+		"ru-RU": "Пропустить",
+		"sv-SE": "Hoppa över",
+		"tr-TR": "Kapat",
+		"zh-CN": "离开",
+		"zh-TW": "解除"
+	}
+};
+var Listbox_ItemsOverflow = {
+	id: "Listbox.ItemsOverflow",
+	locale: {
+		"de-DE": "Derzeit wird ein eingeschränkter Datensatz angezeigt, verwenden Sie die Suche, um die Größe zu reduzieren",
+		"en-US": "Currently showing a limited data set, use search to reduce the size",
+		"es-ES": "Actualmente se muestra un conjunto de datos limitado, utilice la búsqueda para reducir el tamaño",
+		"fr-FR": "Ensemble de données limité actuellement affiché. Utilisez la rechercher pour réduire la taille.",
+		"it-IT": "Attualmente visualizzato un set di dati limitato; utilizzare la ricerca per ridurre le dimensioni",
+		"ja-JP": "現在表示されているデータ セットは制限されているため、検索を使ってサイズを縮小してください",
+		"ko-KR": "현재 제한된 데이터 집합이 표시되고 있습니다. 검색을 사용하여 크기를 줄이십시오.",
+		"nl-NL": "Er wordt momenteel een beperkte gegevensverzameling getoond, gebruik Zoeken om de omvang te verkleinen",
+		"pl-PL": "Wyświetlany jest ograniczony zestaw danych. Użyj wyszukiwania, aby zmniejszyć rozmiar.",
+		"pt-BR": "Atualmente mostrando um conjunto de dados limitado, use a pesquisa para reduzir o tamanho",
+		"ru-RU": "Сейчас отображается ограниченный набор данных. Используйте поиск, чтобы уменьшить размер.",
+		"sv-SE": "En begränsad datauppsättning visas. Använd sök för att minska storleken",
+		"tr-TR": "Şu anda sınırlı bir veri kümesi gösteriliyor. Boyutu azaltmak için arama işlevini kullanın",
+		"zh-CN": "目前显示有限的数据集，使用搜索来减少大小",
+		"zh-TW": "目前顯示有限資料集，請使用搜尋減少大小"
+	}
+};
 var Listbox_Lock = {
 	id: "Listbox.Lock",
 	locale: {
@@ -973,6 +1013,26 @@ var Listbox_Lock = {
 		"zh-TW": "鎖定選項"
 	}
 };
+var Listbox_NoMatchesForYourTerms = {
+	id: "Listbox.NoMatchesForYourTerms",
+	locale: {
+		"de-DE": "Für Ihre Suche wurden keine Übereinstimmungen gefunden.",
+		"en-US": "There are no matches for your search.",
+		"es-ES": "No hay resultados para su búsqueda.",
+		"fr-FR": "Aucun résultat ne correspond à votre recherche.",
+		"it-IT": "Non è stata trovata alcuna corrispondenza per questa ricerca.",
+		"ja-JP": "検索に一致するものがありません。",
+		"ko-KR": "검색에 대해 일치하는 항목이 없습니다.",
+		"nl-NL": "Er zijn geen overeenkomsten voor uw zoekopdracht.",
+		"pl-PL": "Brak dopasowań dla tego wyszukiwania.",
+		"pt-BR": "Não há correspondências para sua pesquisa.",
+		"ru-RU": "Нет совпадений по вашему поисковому запросу.",
+		"sv-SE": "Det finns inga matchningar för din sökning.",
+		"tr-TR": "Aramanızla eşleşen sonuç yok.",
+		"zh-CN": "您的搜索条件没有任何匹配结果。",
+		"zh-TW": "沒有與您搜尋相符的項目。"
+	}
+};
 var Listbox_ResultFilterLabel = {
 	id: "Listbox.ResultFilterLabel",
 	locale: {
@@ -993,26 +1053,6 @@ var Listbox_ResultFilterLabel = {
 		"zh-TW": "搜尋結果篩選"
 	}
 };
-var Listbox_NoMatchesForYourTerms = {
-	id: "Listbox.NoMatchesForYourTerms",
-	locale: {
-		"de-DE": "Für Ihre Suche wurden keine Übereinstimmungen gefunden.",
-		"en-US": "There are no matches for your search.",
-		"es-ES": "No hay resultados para su búsqueda.",
-		"fr-FR": "Aucun résultat ne correspond à votre recherche.",
-		"it-IT": "Non esistono corrispondenze per la ricerca.",
-		"ja-JP": "検索に一致するものがありません。",
-		"ko-KR": "검색에 대해 일치하는 항목이 없습니다.",
-		"nl-NL": "Er zijn geen overeenkomsten voor uw zoekopdracht.",
-		"pl-PL": "Brak dopasowań dla tego wyszukiwania.",
-		"pt-BR": "Não há correspondências para sua pesquisa.",
-		"ru-RU": "Нет совпадений для искомого текста.",
-		"sv-SE": "Det finns inga matchningar för din sökning.",
-		"tr-TR": "Aramanızla eşleşen sonuç yok.",
-		"zh-CN": "您的搜索条件没有任何匹配结果。",
-		"zh-TW": "沒有與您搜尋相符的項目。"
-	}
-};
 var Listbox_ScreenReaderInstructions = {
 	id: "Listbox.ScreenReaderInstructions",
 	locale: {
@@ -1573,25 +1613,15 @@ var Visualization_UnfulfilledCalculationCondition = {
 		"zh-TW": "不符計算條件"
 	}
 };
-var Listbox_ItemsOverflow = {
-	id: "Listbox.ItemsOverflow",
-	locale: {
-		"en-US": "Currently showing a limited data set, use search to reduce the size"
-	}
-};
-var Listbox_Dismiss = {
-	id: "Listbox.Dismiss",
-	locale: {
-		"en-US": "Dismiss"
-	}
-};
 var all = {
 	Cancel: Cancel$1,
 	CurrentSelections_All: CurrentSelections_All,
 	CurrentSelections_Of: CurrentSelections_Of,
+	Listbox_Dismiss: Listbox_Dismiss,
+	Listbox_ItemsOverflow: Listbox_ItemsOverflow,
 	Listbox_Lock: Listbox_Lock,
-	Listbox_ResultFilterLabel: Listbox_ResultFilterLabel,
 	Listbox_NoMatchesForYourTerms: Listbox_NoMatchesForYourTerms,
+	Listbox_ResultFilterLabel: Listbox_ResultFilterLabel,
 	Listbox_ScreenReaderInstructions: Listbox_ScreenReaderInstructions,
 	Listbox_Search: Listbox_Search,
 	Listbox_Search_ScreenReaderInstructions: Listbox_Search_ScreenReaderInstructions,
@@ -1619,9 +1649,7 @@ var all = {
 	Visualization_Invalid_Dimension: Visualization_Invalid_Dimension,
 	Visualization_Invalid_Measure: Visualization_Invalid_Measure,
 	Visualization_LayoutError: Visualization_LayoutError,
-	Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition,
-	Listbox_ItemsOverflow: Listbox_ItemsOverflow,
-	Listbox_Dismiss: Listbox_Dismiss
+	Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition
 };
 
 function appLocaleFn(language) {
@@ -7940,7 +7968,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "1f4e" ;
+const NEBULA_VERSION_HASH = "070a" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8459,7 +8487,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "3.1.2" );
+  element.setAttribute('data-nebulajs-version', "3.2.0" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
@@ -9417,7 +9445,9 @@ function getFieldKeyboardNavigation(_ref) {
   let {
     select,
     confirm,
-    cancel
+    cancel,
+    setScrollPosition,
+    focusListItems
   } = _ref;
   const getElement = function (elm) {
     let next = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -9432,7 +9462,8 @@ function getFieldKeyboardNavigation(_ref) {
     let elementToFocus;
     const {
       keyCode,
-      shiftKey = false
+      shiftKey = false,
+      ctrlKey = false
     } = event.nativeEvent;
     switch (keyCode) {
       case KEYS.SHIFT:
@@ -9471,6 +9502,22 @@ function getFieldKeyboardNavigation(_ref) {
         cancel();
         return;
       // let it propagate to top-level
+      case KEYS.HOME:
+        focusListItems.setFirst(true);
+        if (ctrlKey) {
+          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowStart');
+          break;
+        }
+        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('start');
+        break;
+      case KEYS.END:
+        focusListItems.setLast(true);
+        if (ctrlKey) {
+          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowEnd');
+          break;
+        }
+        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('end');
+        break;
       default:
         return;
       // don't stop propagation since we want to outsource keydown to other handlers.
@@ -9748,15 +9795,26 @@ function RowColumn(_ref3) {
     showGray = true,
     columnCount = 1,
     rowCount = 1,
-    layoutOrder
+    layoutOrder,
+    dataOffset,
+    focusListItems,
+    listCount
   } = data;
   let cellIndex;
   let styles;
+  const count = {
+    max: null,
+    currentIndex: null
+  };
   if (typeof rowIndex === 'number' && typeof columnIndex === 'number') {
     if (layoutOrder === 'row') {
       cellIndex = rowIndex * columnCount + columnIndex;
+      count.max = rowCount;
+      count.currentIndex = rowIndex;
     } else {
       cellIndex = columnIndex * rowCount + rowIndex;
+      count.max = columnCount;
+      count.currentIndex = columnIndex;
     }
     const padding = 0;
     styles = _objectSpread2(_objectSpread2({}, style), {}, {
@@ -9766,9 +9824,27 @@ function RowColumn(_ref3) {
     });
   } else {
     cellIndex = index;
+    count.max = listCount;
+    count.currentIndex = index;
     styles = _objectSpread2({}, style);
   }
-  const handleKeyDownCallback = useCallback(getFieldKeyboardNavigation(actions), [actions]);
+  cellIndex += dataOffset;
+  const rowRef = useRef(null);
+  useEffect$1(() => {
+    if (rowRef.current !== null) {
+      if (count.currentIndex === 0 && focusListItems.first) {
+        rowRef.current.focus();
+        focusListItems.setFirst(false);
+      }
+      if (count.currentIndex === count.max - 1 && focusListItems.last) {
+        rowRef.current.focus();
+        focusListItems.setLast(false);
+      }
+    }
+  }, [rowRef.current]);
+  const handleKeyDownCallback = useCallback(getFieldKeyboardNavigation(_objectSpread2(_objectSpread2({}, actions), {}, {
+    focusListItems
+  })), [actions]);
   const [isSelected, setSelected] = useState$1(false);
   const [cell, setCell] = useState$1();
   const [classArr, setClassArr] = useState$1([]);
@@ -9915,7 +9991,8 @@ function RowColumn(_ref3) {
   };
   const iconStyles = {
     alignItems: 'center',
-    display: 'flex'
+    display: 'flex',
+    fontSize: '8px'
   };
   const showLock = isSelected && isLocked;
   const showTick = !checkboxes && isSelected && !isLocked;
@@ -9943,6 +10020,7 @@ function RowColumn(_ref3) {
     flexBasisProp: flexBasisVal,
     dense: dense
   }, /*#__PURE__*/React__default.createElement(Grid, {
+    ref: rowRef,
     container: true,
     gap: 0,
     className: joinClassNames(['value', ...classArr]),
@@ -11522,11 +11600,18 @@ function getStyledComponents() {
 }
 
 const getIndex = (renderProps, isColumnLayout) => {
-  if (renderProps !== null && renderProps !== void 0 && renderProps.visibleRowStopIndex || renderProps.visibleColumnStopIndex) {
+  if ((renderProps === null || renderProps === void 0 ? void 0 : renderProps.visibleRowStopIndex) !== undefined || renderProps.visibleColumnStopIndex !== undefined) {
     return isColumnLayout ? renderProps.visibleColumnStopIndex : renderProps.visibleRowStopIndex;
   }
   return renderProps.visibleStopIndex;
 };
+const getIsScrollTop = (renderProps, isColumnLayout) => {
+  if ((renderProps === null || renderProps === void 0 ? void 0 : renderProps.visibleRowStartIndex) !== undefined || renderProps.visibleColumnStartIndex !== undefined) {
+    return isColumnLayout ? renderProps.visibleColumnStartIndex === 0 : renderProps.visibleRowStartIndex === 0;
+  }
+  return renderProps.visibleStartIndex === 0;
+};
+const getIsEndOfData = (qCardinal, index, count, dataOffset) => qCardinal === index * count + dataOffset + count;
 function handleSetOverflowDisclaimer(_ref) {
   let {
     renderProps,
@@ -11534,14 +11619,18 @@ function handleSetOverflowDisclaimer(_ref) {
     maxCount,
     columnCount,
     rowCount,
-    overflowDisclaimer
+    overflowDisclaimer,
+    qCardinal,
+    dataOffset
   } = _ref;
   const isColumnLayout = (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.layoutOrder) === 'column' && layoutOptions.dataLayout !== 'singleColumn';
   const index = getIndex(renderProps, isColumnLayout);
   const stopIndex = isColumnLayout ? maxCount.column : maxCount.row;
   const count = isColumnLayout ? columnCount : rowCount;
   const overflowPossible = count >= stopIndex;
-  const show = overflowPossible && index >= stopIndex - 1 || overflowDisclaimer.state.show;
+  const isEndOfData = getIsEndOfData(qCardinal, index, isColumnLayout ? rowCount : columnCount, dataOffset);
+  const isTopOfOverflowData = !!dataOffset && getIsScrollTop(renderProps, isColumnLayout);
+  const show = overflowPossible && !isEndOfData && index >= stopIndex - 1 || isTopOfOverflowData || overflowDisclaimer.state.show; // If its shown once, the user have to dismiss to hide it.
   overflowDisclaimer.set(show);
 }
 
@@ -11572,7 +11661,9 @@ function getListBoxComponents(_ref) {
     listLayout,
     sizes,
     listCount,
-    overflowDisclaimer
+    overflowDisclaimer,
+    setScrollPosition,
+    focusListItems
   } = _ref;
   const {
     layoutOptions = {},
@@ -11615,12 +11706,15 @@ function getListBoxComponents(_ref) {
     actions: {
       select,
       confirm: () => selections === null || selections === void 0 ? void 0 : selections.confirm.call(selections),
-      cancel: () => selections === null || selections === void 0 ? void 0 : selections.cancel.call(selections)
+      cancel: () => selections === null || selections === void 0 ? void 0 : selections.cancel.call(selections),
+      setScrollPosition
     },
     frequencyMax,
     histogram,
     keyboard,
-    showGray
+    showGray,
+    dataOffset: local.current.dataOffset,
+    focusListItems
   });
   const List = _ref2 => {
     let {
@@ -11637,9 +11731,12 @@ function getListBoxComponents(_ref) {
       width: width,
       itemCount: listCount,
       layout: listLayout,
-      itemData: _objectSpread2({}, commonItemData),
+      itemData: _objectSpread2(_objectSpread2({}, commonItemData), {}, {
+        listCount
+      }),
       itemSize: itemSize,
       onItemsRendered: renderProps => {
+        var _layout$qListObject, _layout$qListObject$q;
         if (scrollState) {
           scrollState.setScrollPos(renderProps.visibleStopIndex);
         }
@@ -11649,7 +11746,9 @@ function getListBoxComponents(_ref) {
           maxCount: sizes.maxCount,
           columnCount,
           rowCount,
-          overflowDisclaimer
+          overflowDisclaimer,
+          qCardinal: layout === null || layout === void 0 ? void 0 : (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 ? void 0 : (_layout$qListObject$q = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject$q === void 0 ? void 0 : _layout$qListObject$q.qCardinal,
+          dataOffset: local.current.dataOffset
         });
         onItemsRendered(_objectSpread2({}, renderProps));
       },
@@ -11673,6 +11772,7 @@ function getListBoxComponents(_ref) {
     // eslint-disable-next-line no-param-reassign
     local.current.listRef = ref;
     const handleGridItemsRendered = renderProps => {
+      var _layout$qListObject2, _layout$qListObject2$;
       const renderOptions = deriveRenderOptions({
         renderProps,
         scrollState,
@@ -11686,7 +11786,9 @@ function getListBoxComponents(_ref) {
         maxCount: sizes.maxCount,
         columnCount,
         rowCount,
-        overflowDisclaimer
+        overflowDisclaimer,
+        qCardinal: layout === null || layout === void 0 ? void 0 : (_layout$qListObject2 = layout.qListObject) === null || _layout$qListObject2 === void 0 ? void 0 : (_layout$qListObject2$ = _layout$qListObject2.qDimensionInfo) === null || _layout$qListObject2$ === void 0 ? void 0 : _layout$qListObject2$.qCardinal,
+        dataOffset: local.current.dataOffset
       });
       onItemsRendered(renderOptions);
     };
@@ -11857,9 +11959,10 @@ function useItemsLoader(_ref) {
   const [pages, setPages] = useState$1([]);
   let [minimumBatchSize] = useState$1(0);
   const loadMoreItems = (startIndex, stopIndex) => {
+    const offset = local.current.dataOffset;
     local.current.queue.push({
-      start: startIndex,
-      stop: stopIndex
+      start: startIndex + offset,
+      stop: stopIndex + offset
     });
     const isScrolling = loaderRef.current ?
     // eslint-disable-next-line no-underscore-dangle
@@ -12248,6 +12351,47 @@ function ListBoxFooter(_ref3) {
   }, /*#__PURE__*/React__default.createElement(SmallCloseIcon, null))));
 }
 
+const getOffset = (layout, listCount) => {
+  const totalLength = layout.qListObject.qDimensionInfo.qCardinal;
+  const offset = totalLength - listCount;
+  return offset;
+};
+function getScrollIndex(_ref) {
+  let {
+    position,
+    isRow,
+    sizes,
+    layout,
+    offset
+  } = _ref;
+  let scrollIndex;
+  let triggerRerender = false;
+  let newOffset = offset !== null && offset !== void 0 ? offset : 0;
+  switch (position) {
+    case 'start':
+      scrollIndex = 0;
+      break;
+    case 'end':
+      scrollIndex = isRow ? sizes.rowCount : sizes.columnCount;
+      break;
+    case 'overflowStart':
+      newOffset = 0;
+      scrollIndex = 0;
+      triggerRerender = true;
+      break;
+    case 'overflowEnd':
+      newOffset = getOffset(layout, sizes.listCount);
+      scrollIndex = layout.qListObject.qDimensionInfo.qCardinal;
+      triggerRerender = true;
+      break;
+  }
+  return {
+    scrollIndex,
+    offset: newOffset,
+    triggerRerender
+  };
+}
+
 const _excluded$4 = ["isLoadingData"];
 const DEFAULT_MIN_BATCH_SIZE = 100;
 function ListBox(_ref) {
@@ -12280,7 +12424,8 @@ function ListBox(_ref) {
   const loaderRef = useRef(null);
   const local = useRef({
     queue: [],
-    validPages: false
+    validPages: false,
+    dataOffset: 0
   });
   const listData = useRef({
     pages: []
@@ -12338,6 +12483,23 @@ function ListBox(_ref) {
     doc: document,
     isSingleSelect
   });
+  const {
+    layoutOptions = {}
+  } = layout || {};
+  let isRow = true;
+  if (layoutOptions.dataLayout) {
+    isRow = layoutOptions.dataLayout === 'singleColumn' ? true : (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.layoutOrder) === 'row';
+  }
+  const isGrid = (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.dataLayout) === 'grid';
+  const scrollToIndex = index => {
+    const gridIndex = _objectSpread2({}, isRow ? {
+      rowIndex: index
+    } : {
+      columnIndex: index
+    });
+    const scrollIndex = isGrid ? gridIndex : index;
+    loaderRef.current._listRef.scrollToItem(scrollIndex);
+  };
   const fetchData = () => {
     local.current.queue = [];
     local.current.validPages = false;
@@ -12347,7 +12509,8 @@ function ListBox(_ref) {
       if (layout && layout.qSelectionInfo.qInSelections) {
         return;
       }
-      loaderRef.current._listRef.scrollToItem(0);
+      local.current.dataOffset = 0;
+      scrollToIndex(0);
     }
   };
   if (update) {
@@ -12368,14 +12531,11 @@ function ListBox(_ref) {
   }, [loaderRef.current]);
   useEffect$1(() => {
     fetchData();
-  }, [layout]);
+  }, [layout, local.current.dataOffset]);
   const textWidth = useTextWidth({
     text: getMeasureText(layout),
     font: '14px Source sans pro'
   });
-  const {
-    layoutOptions = {}
-  } = layout || {};
   let minimumBatchSize = DEFAULT_MIN_BATCH_SIZE;
   const isVertical = layoutOptions.dataLayout ? layoutOptions.dataLayout === 'singleColumn' : listLayout !== 'horizontal';
   const count = layout === null || layout === void 0 ? void 0 : (_layout$qListObject$q = layout.qListObject.qSize) === null || _layout$qListObject$q === void 0 ? void 0 : _layout$qListObject$q.qcy;
@@ -12399,9 +12559,41 @@ function ListBox(_ref) {
     listCount
   } = sizes;
   setStoreValue('listCount', listCount);
+  const setScrollPosition = position => {
+    const {
+      scrollIndex,
+      offset,
+      triggerRerender
+    } = getScrollIndex({
+      position,
+      isRow,
+      sizes,
+      layout,
+      offset: local.current.dataOffset
+    });
+    local.current.dataOffset = offset;
+    if (triggerRerender) {
+      setPages(currentPages => [...currentPages]);
+    }
+    scrollToIndex(scrollIndex);
+  };
   const {
     textAlign
   } = (layout === null || layout === void 0 ? void 0 : layout.qListObject.qDimensionInfo) || {};
+  const [focusListItem, setFocusListItem] = useState$1({
+    first: false,
+    last: false
+  });
+  const getFocusState = () => ({
+    first: focusListItem.first,
+    setFirst: first => setFocusListItem(prevState => _objectSpread2(_objectSpread2({}, prevState), {}, {
+      first
+    })),
+    last: focusListItem.last,
+    setLast: last => setFocusListItem(prevState => _objectSpread2(_objectSpread2({}, prevState), {}, {
+      last
+    }))
+  });
   const {
     List,
     Grid
@@ -12430,7 +12622,9 @@ function ListBox(_ref) {
     overflowDisclaimer: {
       state: overflowDisclaimer,
       set: showOverflowDisclaimer
-    }
+    },
+    setScrollPosition,
+    focusListItems: getFocusState()
   });
   const {
     columnWidth,
@@ -13028,6 +13222,7 @@ const search = props => _objectSpread2(_objectSpread2({}, props), {}, {
 var SearchIcon = (props => SvgIcon$2(search(props)));
 
 const TREE_PATH = '/qListObjectDef';
+const WILDCARD = '**';
 const StyledInputAdornment = styled$1(InputAdornment)(_ref => {
   var _theme$listBox, _theme$listBox$conten;
   let {
@@ -13052,12 +13247,16 @@ function ListBoxSearch(_ref3) {
     model,
     keyboard,
     dense = false,
-    visible = true
+    visible = true,
+    wildCardSearch = true,
+    searchEnabled
   } = _ref3;
   const {
     translator
   } = useContext(InstanceContext);
   const [value, setValue] = useState$1('');
+  const [wildcardOn, setWildcardOn] = useState$1(false);
+  const inputRef = useRef();
   const theme = useTheme$1();
   const {
     getStoreValue
@@ -13084,6 +13283,13 @@ function ListBoxSearch(_ref3) {
       selections.removeListener && selections.removeListener('deactivated', abortSearch);
     };
   }, []);
+  useEffect$1(() => {
+    if (wildcardOn && inputRef.current) {
+      const cursorPos = value.length - 1;
+      inputRef.current.setSelectionRange(cursorPos, cursorPos); // place the cursor in the wildcard
+      setWildcardOn(false);
+    }
+  }, [wildcardOn, inputRef.current]);
   const onChange = async e => {
     setValue(e.target.value);
     if (!e.target.value.length) {
@@ -13092,6 +13298,10 @@ function ListBoxSearch(_ref3) {
     return model.searchListObjectFor(TREE_PATH, e.target.value);
   };
   const handleFocus = () => {
+    if (wildCardSearch) {
+      setValue(WILDCARD);
+      setWildcardOn(true);
+    }
     if (!selections.isModal()) {
       selections.begin(['/qListObjectDef']);
     }
@@ -13125,7 +13335,7 @@ function ListBoxSearch(_ref3) {
     }
     return response;
   };
-  if (!visible) {
+  if (!visible || searchEnabled === false) {
     return null;
   }
   return /*#__PURE__*/React__default.createElement(StyledOutlinedInput, {
@@ -13155,6 +13365,7 @@ function ListBoxSearch(_ref3) {
         paddingBottom: '5px'
       }
     }],
+    inputRef: inputRef,
     size: "small",
     fullWidth: true,
     placeholder: translator.get('Listbox.Search'),
@@ -13355,7 +13566,8 @@ const createObjectSelections = _ref2 => {
 const getClickOutFuncs = _ref3 => {
   let {
     elements,
-    objectSelections
+    objectSelections,
+    options
   } = _ref3;
   const handler = createHandler({
     elements,
@@ -13363,14 +13575,18 @@ const getClickOutFuncs = _ref3 => {
   });
   return {
     activateClickOut() {
+      var _options$onSelectionA;
       document.addEventListener('mousedown', handler);
+      (_options$onSelectionA = options.onSelectionActivated) === null || _options$onSelectionA === void 0 ? void 0 : _options$onSelectionA.call(options);
     },
     deactivateClickOut() {
+      var _options$onSelectionD;
       document.removeEventListener('mousedown', handler);
+      (_options$onSelectionD = options.onSelectionDeactivated) === null || _options$onSelectionD === void 0 ? void 0 : _options$onSelectionD.call(options);
     }
   };
 };
-function useObjectSelections(app, model, elements) {
+function useObjectSelections(app, model, elements, options) {
   const elementsArr = Array.isArray(elements) ? elements : [elements];
   const [appSelections] = useAppSelections(app);
   const [layout] = useLayout$1(model);
@@ -13396,7 +13612,8 @@ function useObjectSelections(app, model, elements) {
       deactivateClickOut
     } = getClickOutFuncs({
       elements: elementsArr,
-      objectSelections
+      objectSelections,
+      options
     });
     objectSelections.addListener('activated', activateClickOut);
     objectSelections.addListener('deactivated', deactivateClickOut);
@@ -14854,7 +15071,6 @@ function ListBoxInline(_ref3) {
     checkboxes,
     search = true,
     focusSearch = false,
-    toolbar = true,
     rangeSelect = true,
     model,
     selections,
@@ -14866,6 +15082,9 @@ function ListBoxInline(_ref3) {
     showGray = true,
     scrollState = undefined
   } = options;
+  let {
+    toolbar = true
+  } = options;
 
   // Hook that will trigger update when used in useEffects.
   // Modified from: https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
@@ -14879,9 +15098,6 @@ function ListBoxInline(_ref3) {
     return [ref, setRef];
   };
   const theme = useTheme$1();
-  const lock = useCallback(() => {
-    model.lock('/qListObjectDef');
-  }, [model]);
   const unlock = useCallback(() => {
     model.unlock('/qListObjectDef');
   }, [model]);
@@ -14907,13 +15123,19 @@ function ListBoxInline(_ref3) {
     // this will be static until we can access the useKeyboard hook
     active: keyboardActive
   };
+  if ((layout === null || layout === void 0 ? void 0 : layout.toolbar) !== undefined) {
+    toolbar = layout.toolbar;
+  }
   useEffect$1(() => {
     const show = () => {
       setShowToolbar(true);
+      if (search === 'inSelection') {
+        setShowSearch(true);
+      }
     };
     const hide = () => {
       setShowToolbar(false);
-      if (search === 'toggle') {
+      if (search === 'toggle' || search === 'inSelection') {
         setShowSearch(false);
       }
     };
@@ -14950,30 +15172,19 @@ function ListBoxInline(_ref3) {
     model,
     translator
   }) : [];
-  const hasSelections$1 = hasSelections(layout);
-  const searchVisible = (search === true || search === 'toggle' && showSearch) && !selectDisabled();
+  const searchVisible = (search === true || (search === 'toggle' || search === 'inSelection') && showSearch) && !selectDisabled();
   const dense = (_layout$layoutOptions = (_layout$layoutOptions2 = layout.layoutOptions) === null || _layout$layoutOptions2 === void 0 ? void 0 : _layout$layoutOptions2.dense) !== null && _layout$layoutOptions !== void 0 ? _layout$layoutOptions : false;
   const searchHeight = dense ? 27 : 40;
   const extraheight = dense ? 39 : 49;
   const minHeight = 49 + (searchVisible ? searchHeight : 0) + extraheight;
+  const {
+    wildCardSearch,
+    searchEnabled
+  } = layout;
   const onShowSearch = () => {
     const newValue = !showSearch;
     setShowSearch(newValue);
   };
-  const getSearchOrUnlock = () => {
-    const showSearchIcon = search === 'toggle' && !hasSelections$1;
-    return showSearchIcon ? /*#__PURE__*/React__default.createElement(IconButton, {
-      onClick: onShowSearch,
-      tabIndex: -1,
-      title: translator.get('Listbox.Search'),
-      size: "large"
-    }, /*#__PURE__*/React__default.createElement(SearchIcon, null)) : /*#__PURE__*/React__default.createElement(IconButton, {
-      onClick: lock,
-      tabIndex: -1,
-      disabled: !hasSelections$1,
-      size: "large"
-    }, /*#__PURE__*/React__default.createElement(Unlock, null));
-  };
   return /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
     container: true,
@@ -14986,28 +15197,44 @@ function ListBoxInline(_ref3) {
       flexFlow: 'column nowrap'
     },
     onKeyDown: handleKeyDown
-  }, toolbar && /*#__PURE__*/React__default.createElement(Grid, {
+  }, toolbar && layout.title && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
     style: {
       padding: theme.spacing(1)
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
+    item: true,
+    sx: {
+      display: 'flex',
+      alignItems: 'center'
+    }
   }, isLocked ? /*#__PURE__*/React__default.createElement(IconButton, {
     tabIndex: -1,
     onClick: unlock,
     disabled: !isLocked,
     size: "large"
   }, /*#__PURE__*/React__default.createElement(Lock, {
-    title: translator.get('Listbox.Unlock')
-  })) : getSearchOrUnlock()), /*#__PURE__*/React__default.createElement(Grid, {
+    title: translator.get('Listbox.Unlock'),
+    style: {
+      fontSize: '12px'
+    }
+  })) : searchEnabled !== false && /*#__PURE__*/React__default.createElement(IconButton, {
+    onClick: onShowSearch,
+    tabIndex: -1,
+    title: translator.get('Listbox.Search'),
+    size: "large"
+  }, /*#__PURE__*/React__default.createElement(SearchIcon, {
+    style: {
+      fontSize: '12px'
+    }
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: classes$4.listBoxHeader
   }, /*#__PURE__*/React__default.createElement(Title, {
     variant: "h6",
     noWrap: true
-  }, layout.title || layout.qListObject.qDimensionInfo.qFallbackTitle)), /*#__PURE__*/React__default.createElement(Grid, {
+  }, layout.title)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true
   }), /*#__PURE__*/React__default.createElement(Grid, {
@@ -15052,7 +15279,9 @@ function ListBoxInline(_ref3) {
     dense: dense,
     keyboard: keyboard,
     visible: searchVisible,
-    searchContainerRef: searchContainerRef
+    searchContainerRef: searchContainerRef,
+    wildCardSearch: wildCardSearch,
+    searchEnabled: searchEnabled
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true
@@ -15338,7 +15567,7 @@ function ListBoxWrapper(_ref) {
     options
   });
   const elementRef = useRef(element);
-  const selections = hasExternalSelectionsApi ? options.selectionsApi : useObjectSelections(app, model, elementRef)[0];
+  const selections = hasExternalSelectionsApi ? options.selectionsApi : useObjectSelections(app, model, elementRef, options)[0];
   if (!selections || !model) {
     return null;
   }
@@ -15397,6 +15626,9 @@ function ListBoxPopoverWrapper(_ref) {
   const [showState, setShowstate] = useState$1(!!options.show);
   const handleCloseShowState = () => {
     setShowstate(false);
+    if (options.onPopoverClose) {
+      options.onPopoverClose();
+    }
   };
   return /*#__PURE__*/React__default.createElement(ListBoxPopover, {
     show: showState,
@@ -22183,9 +22415,9 @@ function create(_ref) {
         version
       } = typeInfo;
       if (!tc[name]) {
-        // Fall back to existing version
+        // Chart not registered, so we'll do that now.
         {
-          console.warn("Visualization ".concat(name, " is not registered.")); // eslint-disable-line no-console
+          console.warn("Visualization ".concat(name, " is not registered. Adding it now.")); // eslint-disable-line no-console
         }
 
         this.register({
@@ -22216,26 +22448,6 @@ function create(_ref) {
   };
 }
 
-/**
- * @interface Context
- * @property {boolean=} keyboardNavigation
- * @property {object=} constraints
- * @property {boolean=} constraints.active
- * @property {boolean=} constraints.passive
- * @property {boolean=} constraints.select
- */
-const DEFAULT_CONTEXT = /** @lends Context */{
-  /** @type {string=} */
-  theme: 'light',
-  /** @type {string=} */
-  language: 'en-US',
-  /** @type {string=} */
-  deviceType: 'auto',
-  constraints: {},
-  keyboardNavigation: false,
-  disableCellPadding: false
-};
-
 /**
  * @interface SnapshotConfiguration
  * @private
@@ -22265,30 +22477,68 @@ const DEFAULT_SNAPSHOT_CONFIG = /** @lends SnapshotConfiguration */{
 
 /**
  * @interface Configuration
+ * @property {LoadType=} load Fallback load function for missing types
+ * @property {Context=} context Settings for the rendering instance
+ * @property {Array<TypeInfo>=} types Visualization types to register
+ * @property {Array<ThemeInfo>=} themes Themes to register
+ * @property {object=} anything
+ * @example
+ * import { embed } from '@nebula.js/stardust'
+ * n = embed(app, {
+ *   context: {
+ *     keyboardNavigation: true,
+ *     theme: 'purple',
+ *   },
+ *   load: ({ name, version }) => {
+ *     if (name === 'linechart') {
+ *       return Promise.resolve(line);
+ *     }
+ *   },
+ *   types: [
+ *     {
+ *       name: 'bar',
+ *       load: () => Promise.resolve(bar),
+ *     },
+ *   ],
+ *   themes: [
+ *     {
+ *       id: 'purple',
+ *       load: () => Promise.resolve(purpleThemeJson),
+ *     },
+ *   ],
+ * });
  */
-const DEFAULT_CONFIG = /** @lends Configuration */{
-  /**
-   * @type {Context=}
-   */
-  context: DEFAULT_CONTEXT,
+
+const DEFAULT_CONFIG = {
+  context: {},
   load: () => undefined,
-  /**
-   * @type {(TypeInfo[])=}
-   */
   types: [],
-  /**
-   * @type {(ThemeInfo[])=}
-   */
   themes: [],
-  /** @type {object=} */
   anything: {},
-  /**
-   * @type {SnapshotConfiguration=}
-   * @private
-   */
   snapshot: DEFAULT_SNAPSHOT_CONFIG
 };
 
+/**
+ * @interface Context
+ * @property {boolean=} keyboardNavigation
+ * @property {object=} constraints
+ * @property {boolean=} constraints.active
+ * @property {boolean=} constraints.passive
+ * @property {boolean=} constraints.select
+ */
+const DEFAULT_CONTEXT = /** @lends Context */{
+  /** @type {string=} */
+  theme: 'light',
+  /** @type {string=} */
+  language: 'en-US',
+  /** @type {string=} */
+  deviceType: 'auto',
+  constraints: {},
+  keyboardNavigation: false,
+  disableCellPadding: false
+};
+DEFAULT_CONFIG.context = DEFAULT_CONTEXT;
+
 /**
  * @interface Galaxy
  */
@@ -22397,6 +22647,23 @@ function nuked() {
     let selectionsApi = null;
     let selectionsComponentReference = null;
 
+    /**
+     * @ignore
+     * @typedef { 'fieldPopoverClose' } EmbedEventTypes
+     */
+
+    /**
+     * Event listener function on instance
+     *
+     * @ignore
+     * @method
+     * @name Embed#on
+     * @param {EmbedEventTypes} eventType event type that function needs to listen
+     * @param {Function} callback a callback function to run when event emits
+     * @example
+     * api.on('someEvent', () => {...});
+     */
+
     /**
      * @class
      * @alias Embed
@@ -22544,7 +22811,34 @@ function nuked() {
          */
 
         /**
-         * @typedef { boolean | 'toggle' } SearchMode
+         * @typedef { boolean | 'toggle' | 'inSelection' } SearchMode
+         */
+
+        /**
+         * @typedef { 'selectionActivated' | 'selectionDeactivated' } FieldEventTypes
+         */
+
+        /**
+         * Event listener function on instance
+         *
+         * @method
+         * @name FieldInstance#on
+         * @param {FieldEventTypes} eventType event type that function needs to listen
+         * @param {Function} callback a callback function to run when event emits
+         * @example
+         * const handleSomeEvent () => {...};
+         * fieldInstance.on('someEvent', handleSomeEvent);
+         * ...
+         * fieldInstance.removeListener('someEvent', handleSomeEvent);
+         */
+
+        /**
+         * Remove listener on instance
+         *
+         * @method
+         * @name FieldInstance#removeListener
+         * @param {FieldEventTypes} eventType event type
+         * @param {Function} callback handler
          */
 
         /**
@@ -22563,7 +22857,7 @@ function nuked() {
            * @param {ListLayout=} [options.listLayout=vertical] Layout direction vertical|horizontal (not applicable for existing objects)
            * @param {FrequencyMode=} [options.frequencyMode=none] Show frequency none|value|percent|relative
            * @param {boolean=} [options.histogram=false] Show histogram bar (not applicable for existing objects)
-           * @param {SearchMode=} [options.search=true] Show the search bar permanently or using the toggle button: false|true|toggle|toggleShow
+           * @param {SearchMode=} [options.search=true] Show the search bar permanently, using the toggle button or when in selection: false|true|toggle|inSelection
            * @param {boolean=} [options.toolbar=true] Show the toolbar
            * @param {boolean=} [options.checkboxes=false] Show values as checkboxes instead of as fields (not applicable for existing objects)
            * @param {boolean=} [options.dense=false] Reduces padding and text size (not applicable for existing objects)
@@ -22583,12 +22877,17 @@ function nuked() {
             if (this._instance) {
               throw new Error("Field or object ".concat(fieldName || qId, " already mounted"));
             }
+            const onSelectionActivated = () => fieldSels.emit('selectionActivated');
+            const onSelectionDeactivated = () => fieldSels.emit('selectionDeactivated');
             this._instance = ListBoxPortal({
               element,
               app,
               fieldIdentifier,
               qId,
-              options: getOptions$1(options),
+              options: getOptions$1(_objectSpread2({
+                onSelectionActivated,
+                onSelectionDeactivated
+              }, options)),
               stateName: options.stateName || '$'
             });
             root.add(this._instance);
@@ -22607,6 +22906,7 @@ function nuked() {
             }
           }
         };
+        eventmixin(fieldSels);
         return fieldSels;
       },
       /**
@@ -22631,7 +22931,10 @@ function nuked() {
             root.remove(api._popoverInstance);
             api._popoverInstance = null;
           }
-          const opts = getOptions(options);
+          const onPopoverClose = () => api.emit('fieldPopoverClose');
+          const opts = getOptions(_objectSpread2({
+            onPopoverClose
+          }, options));
           api._popoverInstance = React__default.createElement(ListBoxPopoverWrapper, {
             element: anchorElement,
             key: uid(),
@@ -22646,6 +22949,7 @@ function nuked() {
     };
     halo.public.nebbie = api;
     halo.types = types;
+    eventmixin(api);
     return api;
   }