@nebula.js/stardust 3.1.2 → 3.2.0

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.1.2
+* @nebula.js/stardust v3.2.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -1020,6 +1020,46 @@
 			"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: {
@@ -1040,6 +1080,26 @@
 			"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: {
@@ -1060,26 +1120,6 @@
 			"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: {
@@ -1640,25 +1680,15 @@
 			"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,
@@ -1686,9 +1716,7 @@
 		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) {
@@ -9542,7 +9570,7 @@
 	      }
 
 	      // Make sure the next tab starts from the right place.
-	      // doc.activeElement referes to the origin.
+	      // doc.activeElement refers to the origin.
 	      if (doc.activeElement === rootRef.current && nativeEvent.shiftKey) {
 	        // We need to ignore the next contain as
 	        // it will try to move the focus back to the rootRef element.
@@ -13889,8 +13917,6 @@
 	      color: (theme.vars || theme).palette.action.disabled
 	    }, ownerState.variant === 'outlined' && {
 	      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
-	    }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
-	      border: `1px solid ${(theme.vars || theme).palette.action.disabled}`
 	    }, ownerState.variant === 'contained' && {
 	      color: (theme.vars || theme).palette.action.disabled,
 	      boxShadow: (theme.vars || theme).shadows[0],
@@ -14362,7 +14388,7 @@
 	  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', ''));
 	});
@@ -14881,7 +14907,7 @@
 	  const appRef = React.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.createElement(NebulaApp, {
@@ -16490,7 +16516,7 @@
 	      onChange,
 	      onFocus,
 	      readOnly,
-	      required,
+	      required = false,
 	      tabIndex,
 	      type,
 	      value
@@ -17324,7 +17350,7 @@
 	...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
 
 	const _excluded$j = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
-	function getOffset(val) {
+	function getOffset$1(val) {
 	  const parse = parseFloat(val);
 	  return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
 	}
@@ -17372,7 +17398,7 @@
 	      if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
 	        const themeSpacing = theme.spacing(ownerState.columnSpacing);
 	        if (themeSpacing !== '0px') {
-	          const fullWidth = `calc(${width} + ${getOffset(themeSpacing)})`;
+	          const fullWidth = `calc(${width} + ${getOffset$1(themeSpacing)})`;
 	          more = {
 	            flexBasis: fullWidth,
 	            maxWidth: fullWidth
@@ -17472,9 +17498,9 @@
 	      const themeSpacing = theme.spacing(propValue);
 	      if (themeSpacing !== '0px') {
 	        return {
-	          marginTop: `-${getOffset(themeSpacing)}`,
+	          marginTop: `-${getOffset$1(themeSpacing)}`,
 	          [`& > .${gridClasses.item}`]: {
-	            paddingTop: getOffset(themeSpacing)
+	            paddingTop: getOffset$1(themeSpacing)
 	          }
 	        };
 	      }
@@ -17519,10 +17545,10 @@
 	      const themeSpacing = theme.spacing(propValue);
 	      if (themeSpacing !== '0px') {
 	        return {
-	          width: `calc(100% + ${getOffset(themeSpacing)})`,
-	          marginLeft: `-${getOffset(themeSpacing)}`,
+	          width: `calc(100% + ${getOffset$1(themeSpacing)})`,
+	          marginLeft: `-${getOffset$1(themeSpacing)}`,
 	          [`& > .${gridClasses.item}`]: {
-	            paddingLeft: getOffset(themeSpacing)
+	            paddingLeft: getOffset$1(themeSpacing)
 	          }
 	        };
 	      }
@@ -19854,6 +19880,10 @@
 	}));
 	let hystersisOpen = false;
 	let hystersisTimer = null;
+	let cursorPosition = {
+	  x: 0,
+	  y: 0
+	};
 	function composeEventHandler(handler, eventHandler) {
 	  return event => {
 	    if (eventHandler) {
@@ -20078,17 +20108,13 @@
 	  if (!title && title !== 0) {
 	    open = false;
 	  }
-	  const positionRef = reactExports.useRef({
-	    x: 0,
-	    y: 0
-	  });
 	  const popperRef = reactExports.useRef();
 	  const handleMouseMove = event => {
 	    const childrenProps = children.props;
 	    if (childrenProps.onMouseMove) {
 	      childrenProps.onMouseMove(event);
 	    }
-	    positionRef.current = {
+	    cursorPosition = {
 	      x: event.clientX,
 	      y: event.clientY
 	    };
@@ -20179,10 +20205,10 @@
 	      placement: placement,
 	      anchorEl: followCursor ? {
 	        getBoundingClientRect: () => ({
-	          top: positionRef.current.y,
-	          left: positionRef.current.x,
-	          right: positionRef.current.x,
-	          bottom: positionRef.current.y,
+	          top: cursorPosition.y,
+	          left: cursorPosition.x,
+	          right: cursorPosition.x,
+	          bottom: cursorPosition.y,
 	          width: 0,
 	          height: 0
 	        })
@@ -21114,7 +21140,9 @@
 	  let {
 	    select,
 	    confirm,
-	    cancel
+	    cancel,
+	    setScrollPosition,
+	    focusListItems
 	  } = _ref;
 	  const getElement = function (elm) {
 	    let next = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -21129,7 +21157,8 @@
 	    let elementToFocus;
 	    const {
 	      keyCode,
-	      shiftKey = false
+	      shiftKey = false,
+	      ctrlKey = false
 	    } = event.nativeEvent;
 	    switch (keyCode) {
 	      case KEYS.SHIFT:
@@ -21168,6 +21197,22 @@
 	        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.
@@ -21445,15 +21490,26 @@
 	    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), {}, {
@@ -21463,9 +21519,27 @@
 	    });
 	  } else {
 	    cellIndex = index;
+	    count.max = listCount;
+	    count.currentIndex = index;
 	    styles = _objectSpread2({}, style);
 	  }
-	  const handleKeyDownCallback = reactExports.useCallback(getFieldKeyboardNavigation(actions), [actions]);
+	  cellIndex += dataOffset;
+	  const rowRef = reactExports.useRef(null);
+	  reactExports.useEffect(() => {
+	    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 = reactExports.useCallback(getFieldKeyboardNavigation(_objectSpread2(_objectSpread2({}, actions), {}, {
+	    focusListItems
+	  })), [actions]);
 	  const [isSelected, setSelected] = reactExports.useState(false);
 	  const [cell, setCell] = reactExports.useState();
 	  const [classArr, setClassArr] = reactExports.useState([]);
@@ -21612,7 +21686,8 @@
 	  };
 	  const iconStyles = {
 	    alignItems: 'center',
-	    display: 'flex'
+	    display: 'flex',
+	    fontSize: '8px'
 	  };
 	  const showLock = isSelected && isLocked;
 	  const showTick = !checkboxes && isSelected && !isLocked;
@@ -21640,6 +21715,7 @@
 	    flexBasisProp: flexBasisVal,
 	    dense: dense
 	  }, /*#__PURE__*/React.createElement(Grid$1, {
+	    ref: rowRef,
 	    container: true,
 	    gap: 0,
 	    className: joinClassNames(['value', ...classArr]),
@@ -23219,11 +23295,18 @@
 	}
 
 	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,
@@ -23231,14 +23314,18 @@
 	    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);
 	}
 
@@ -23269,7 +23356,9 @@
 	    listLayout,
 	    sizes,
 	    listCount,
-	    overflowDisclaimer
+	    overflowDisclaimer,
+	    setScrollPosition,
+	    focusListItems
 	  } = _ref;
 	  const {
 	    layoutOptions = {},
@@ -23312,12 +23401,15 @@
 	    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 {
@@ -23334,9 +23426,12 @@
 	      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);
 	        }
@@ -23346,7 +23441,9 @@
 	          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));
 	      },
@@ -23370,6 +23467,7 @@
 	    // eslint-disable-next-line no-param-reassign
 	    local.current.listRef = ref;
 	    const handleGridItemsRendered = renderProps => {
+	      var _layout$qListObject2, _layout$qListObject2$;
 	      const renderOptions = deriveRenderOptions({
 	        renderProps,
 	        scrollState,
@@ -23383,7 +23481,9 @@
 	        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);
 	    };
@@ -23554,9 +23654,10 @@
 	  const [pages, setPages] = reactExports.useState([]);
 	  let [minimumBatchSize] = reactExports.useState(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
@@ -23799,6 +23900,47 @@
 	  }, /*#__PURE__*/React.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) {
@@ -23831,7 +23973,8 @@
 	  const loaderRef = reactExports.useRef(null);
 	  const local = reactExports.useRef({
 	    queue: [],
-	    validPages: false
+	    validPages: false,
+	    dataOffset: 0
 	  });
 	  const listData = reactExports.useRef({
 	    pages: []
@@ -23889,6 +24032,23 @@
 	    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;
@@ -23898,7 +24058,8 @@
 	      if (layout && layout.qSelectionInfo.qInSelections) {
 	        return;
 	      }
-	      loaderRef.current._listRef.scrollToItem(0);
+	      local.current.dataOffset = 0;
+	      scrollToIndex(0);
 	    }
 	  };
 	  if (update) {
@@ -23919,14 +24080,11 @@
 	  }, [loaderRef.current]);
 	  reactExports.useEffect(() => {
 	    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;
@@ -23950,9 +24108,41 @@
 	    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] = reactExports.useState({
+	    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
@@ -23981,7 +24171,9 @@
 	    overflowDisclaimer: {
 	      state: overflowDisclaimer,
 	      set: showOverflowDisclaimer
-	    }
+	    },
+	    setScrollPosition,
+	    focusListItems: getFocusState()
 	  });
 	  const {
 	    columnWidth,
@@ -24579,6 +24771,7 @@
 	var SearchIcon = (props => SvgIcon(search(props)));
 
 	const TREE_PATH = '/qListObjectDef';
+	const WILDCARD = '**';
 	const StyledInputAdornment = styled$1(InputAdornment$1)(_ref => {
 	  var _theme$listBox, _theme$listBox$conten;
 	  let {
@@ -24603,12 +24796,16 @@
 	    model,
 	    keyboard,
 	    dense = false,
-	    visible = true
+	    visible = true,
+	    wildCardSearch = true,
+	    searchEnabled
 	  } = _ref3;
 	  const {
 	    translator
 	  } = reactExports.useContext(InstanceContext);
 	  const [value, setValue] = reactExports.useState('');
+	  const [wildcardOn, setWildcardOn] = reactExports.useState(false);
+	  const inputRef = reactExports.useRef();
 	  const theme = useTheme$1();
 	  const {
 	    getStoreValue
@@ -24635,6 +24832,13 @@
 	      selections.removeListener && selections.removeListener('deactivated', abortSearch);
 	    };
 	  }, []);
+	  reactExports.useEffect(() => {
+	    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) {
@@ -24643,6 +24847,10 @@
 	    return model.searchListObjectFor(TREE_PATH, e.target.value);
 	  };
 	  const handleFocus = () => {
+	    if (wildCardSearch) {
+	      setValue(WILDCARD);
+	      setWildcardOn(true);
+	    }
 	    if (!selections.isModal()) {
 	      selections.begin(['/qListObjectDef']);
 	    }
@@ -24676,7 +24884,7 @@
 	    }
 	    return response;
 	  };
-	  if (!visible) {
+	  if (!visible || searchEnabled === false) {
 	    return null;
 	  }
 	  return /*#__PURE__*/React.createElement(StyledOutlinedInput, {
@@ -24706,6 +24914,7 @@
 	        paddingBottom: '5px'
 	      }
 	    }],
+	    inputRef: inputRef,
 	    size: "small",
 	    fullWidth: true,
 	    placeholder: translator.get('Listbox.Search'),
@@ -24906,7 +25115,8 @@
 	const getClickOutFuncs = _ref3 => {
 	  let {
 	    elements,
-	    objectSelections
+	    objectSelections,
+	    options
 	  } = _ref3;
 	  const handler = createHandler({
 	    elements,
@@ -24914,14 +25124,18 @@
 	  });
 	  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);
@@ -24947,7 +25161,8 @@
 	      deactivateClickOut
 	    } = getClickOutFuncs({
 	      elements: elementsArr,
-	      objectSelections
+	      objectSelections,
+	      options
 	    });
 	    objectSelections.addListener('activated', activateClickOut);
 	    objectSelections.addListener('deactivated', deactivateClickOut);
@@ -26405,7 +26620,6 @@
 	    checkboxes,
 	    search = true,
 	    focusSearch = false,
-	    toolbar = true,
 	    rangeSelect = true,
 	    model,
 	    selections,
@@ -26417,6 +26631,9 @@
 	    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
@@ -26430,9 +26647,6 @@
 	    return [ref, setRef];
 	  };
 	  const theme = useTheme$1();
-	  const lock = reactExports.useCallback(() => {
-	    model.lock('/qListObjectDef');
-	  }, [model]);
 	  const unlock = reactExports.useCallback(() => {
 	    model.unlock('/qListObjectDef');
 	  }, [model]);
@@ -26458,13 +26672,19 @@
 	    // 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;
+	  }
 	  reactExports.useEffect(() => {
 	    const show = () => {
 	      setShowToolbar(true);
+	      if (search === 'inSelection') {
+	        setShowSearch(true);
+	      }
 	    };
 	    const hide = () => {
 	      setShowToolbar(false);
-	      if (search === 'toggle') {
+	      if (search === 'toggle' || search === 'inSelection') {
 	        setShowSearch(false);
 	      }
 	    };
@@ -26501,30 +26721,19 @@
 	    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.createElement(IconButton$1, {
-	      onClick: onShowSearch,
-	      tabIndex: -1,
-	      title: translator.get('Listbox.Search'),
-	      size: "large"
-	    }, /*#__PURE__*/React.createElement(SearchIcon, null)) : /*#__PURE__*/React.createElement(IconButton$1, {
-	      onClick: lock,
-	      tabIndex: -1,
-	      disabled: !hasSelections$1,
-	      size: "large"
-	    }, /*#__PURE__*/React.createElement(Unlock, null));
-	  };
 	  return /*#__PURE__*/React.createElement(StyledGrid$3, {
 	    className: "listbox-container",
 	    container: true,
@@ -26537,28 +26746,44 @@
 	      flexFlow: 'column nowrap'
 	    },
 	    onKeyDown: handleKeyDown
-	  }, toolbar && /*#__PURE__*/React.createElement(Grid$1, {
+	  }, toolbar && layout.title && /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
 	    style: {
 	      padding: theme.spacing(1)
 	    }
 	  }, /*#__PURE__*/React.createElement(Grid$1, {
-	    item: true
+	    item: true,
+	    sx: {
+	      display: 'flex',
+	      alignItems: 'center'
+	    }
 	  }, isLocked ? /*#__PURE__*/React.createElement(IconButton$1, {
 	    tabIndex: -1,
 	    onClick: unlock,
 	    disabled: !isLocked,
 	    size: "large"
 	  }, /*#__PURE__*/React.createElement(Lock, {
-	    title: translator.get('Listbox.Unlock')
-	  })) : getSearchOrUnlock()), /*#__PURE__*/React.createElement(Grid$1, {
+	    title: translator.get('Listbox.Unlock'),
+	    style: {
+	      fontSize: '12px'
+	    }
+	  })) : searchEnabled !== false && /*#__PURE__*/React.createElement(IconButton$1, {
+	    onClick: onShowSearch,
+	    tabIndex: -1,
+	    title: translator.get('Listbox.Search'),
+	    size: "large"
+	  }, /*#__PURE__*/React.createElement(SearchIcon, {
+	    style: {
+	      fontSize: '12px'
+	    }
+	  }))), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    className: classes$4.listBoxHeader
 	  }, /*#__PURE__*/React.createElement(Title, {
 	    variant: "h6",
 	    noWrap: true
-	  }, layout.title || layout.qListObject.qDimensionInfo.qFallbackTitle)), /*#__PURE__*/React.createElement(Grid$1, {
+	  }, layout.title)), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    xs: true
 	  }), /*#__PURE__*/React.createElement(Grid$1, {
@@ -26603,7 +26828,9 @@
 	    dense: dense,
 	    keyboard: keyboard,
 	    visible: searchVisible,
-	    searchContainerRef: searchContainerRef
+	    searchContainerRef: searchContainerRef,
+	    wildCardSearch: wildCardSearch,
+	    searchEnabled: searchEnabled
 	  })), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    xs: true
@@ -26889,7 +27116,7 @@
 	    options
 	  });
 	  const elementRef = reactExports.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;
 	  }
@@ -26948,6 +27175,9 @@
 	  const [showState, setShowstate] = reactExports.useState(!!options.show);
 	  const handleCloseShowState = () => {
 	    setShowstate(false);
+	    if (options.onPopoverClose) {
+	      options.onPopoverClose();
+	    }
 	  };
 	  return /*#__PURE__*/React.createElement(ListBoxPopover, {
 	    show: showState,
@@ -33734,9 +33964,9 @@
 	        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({
@@ -33767,26 +33997,6 @@
 	  };
 	}
 
-	/**
-	 * @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
@@ -33816,30 +34026,68 @@
 
 	/**
 	 * @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
 	 */
@@ -33948,6 +34196,23 @@
 	    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
@@ -34095,7 +34360,34 @@
 	         */
 
 	        /**
-	         * @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
 	         */
 
 	        /**
@@ -34114,7 +34406,7 @@
 	           * @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)
@@ -34134,12 +34426,17 @@
 	            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);
@@ -34158,6 +34455,7 @@
 	            }
 	          }
 	        };
+	        eventmixin(fieldSels);
 	        return fieldSels;
 	      },
 	      /**
@@ -34182,7 +34480,10 @@
 	            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.createElement(ListBoxPopoverWrapper, {
 	            element: anchorElement,
 	            key: uid(),
@@ -34197,6 +34498,7 @@
 	    };
 	    halo.public.nebbie = api;
 	    halo.types = types;
+	    eventmixin(api);
 	    return api;
 	  }