@nebula.js/stardust 3.1.1 → 3.1.3

package/core/esm/dev.js

@@ -1,16 +1,44 @@
 /*
-* @nebula.js/stardust v3.1.1
+* @nebula.js/stardust v3.1.3
 * 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, IconButton, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Box, Icon, CircularProgress, Paper } from '@mui/material';
+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';
 import styled$3 from '@emotion/styled';
 
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+				var args = [null];
+				args.push.apply(args, arguments);
+				var Ctor = Function.bind.apply(f, args);
+				return new Ctor();
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
 var runtimeExports = {};
 var runtime = {
   get exports(){ return runtimeExports; },
@@ -1545,6 +1573,18 @@ 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,
@@ -1579,7 +1619,9 @@ var all = {
 	Visualization_Invalid_Dimension: Visualization_Invalid_Dimension,
 	Visualization_Invalid_Measure: Visualization_Invalid_Measure,
 	Visualization_LayoutError: Visualization_LayoutError,
-	Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition
+	Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition,
+	Listbox_ItemsOverflow: Listbox_ItemsOverflow,
+	Listbox_Dismiss: Listbox_Dismiss
 };
 
 function appLocaleFn(language) {
@@ -3450,6 +3492,391 @@ function capitalize(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
+/**
+ * Safe chained function.
+ *
+ * Will only create a new function if needed,
+ * otherwise will pass back existing functions or null.
+ */
+function createChainedFunction(...funcs) {
+  return funcs.reduce((acc, func) => {
+    if (func == null) {
+      return acc;
+    }
+    return function chainedFunction(...args) {
+      acc.apply(this, args);
+      func.apply(this, args);
+    };
+  }, () => {});
+}
+
+// Corresponds to 10 frames at 60 Hz.
+// A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.
+function debounce(func, wait = 166) {
+  let timeout;
+  function debounced(...args) {
+    const later = () => {
+      func.apply(this, args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  }
+  debounced.clear = () => {
+    clearTimeout(timeout);
+  };
+  return debounced;
+}
+
+function deprecatedPropType(validator, reason) {
+  {
+    return () => null;
+  }
+}
+
+function isMuiElement(element, muiNames) {
+  return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
+}
+
+function ownerDocument(node) {
+  return node && node.ownerDocument || document;
+}
+
+function ownerWindow(node) {
+  const doc = ownerDocument(node);
+  return doc.defaultView || window;
+}
+
+function requirePropFactory(componentNameInError, Component) {
+  {
+    return () => null;
+  }
+}
+
+/**
+ * TODO v5: consider making it private
+ *
+ * passes {value} to {ref}
+ *
+ * WARNING: Be sure to only call this inside a callback that is passed as a ref.
+ * Otherwise, make sure to cleanup the previous {ref} if it changes. See
+ * https://github.com/mui/material-ui/issues/13539
+ *
+ * Useful if you want to expose the ref of an inner component to the public API
+ * while still using it inside the component.
+ * @param ref A ref callback or ref object. If anything falsy, this is a no-op.
+ */
+function setRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var useEnhancedEffect$1 = useEnhancedEffect;
+
+let globalId = 0;
+function useGlobalId(idOverride) {
+  const [defaultId, setDefaultId] = React.useState(idOverride);
+  const id = idOverride || defaultId;
+  React.useEffect(() => {
+    if (defaultId == null) {
+      // Fallback to this default id when possible.
+      // Use the incrementing value for client-side rendering only.
+      // We can't use it server-side.
+      // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
+      globalId += 1;
+      setDefaultId(`mui-${globalId}`);
+    }
+  }, [defaultId]);
+  return id;
+}
+
+// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
+const maybeReactUseId = React['useId' + ''];
+/**
+ *
+ * @example <div id={useId()} />
+ * @param idOverride
+ * @returns {string}
+ */
+function useId(idOverride) {
+  if (maybeReactUseId !== undefined) {
+    const reactId = maybeReactUseId();
+    return idOverride != null ? idOverride : reactId;
+  }
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
+  return useGlobalId(idOverride);
+}
+
+function unsupportedProp(props, propName, componentName, location, propFullName) {
+  {
+    return null;
+  }
+}
+
+/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+function useControlled({
+  controlled,
+  default: defaultProp,
+  name,
+  state = 'value'
+}) {
+  // isControlled is ignored in the hook dependency lists as it should never change.
+  const {
+    current: isControlled
+  } = React.useRef(controlled !== undefined);
+  const [valueState, setValue] = React.useState(defaultProp);
+  const value = isControlled ? controlled : valueState;
+  const setValueIfUncontrolled = React.useCallback(newValue => {
+    if (!isControlled) {
+      setValue(newValue);
+    }
+  }, []);
+  return [value, setValueIfUncontrolled];
+}
+
+/**
+ * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ */
+function useEventCallback(fn) {
+  const ref = React.useRef(fn);
+  useEnhancedEffect$1(() => {
+    ref.current = fn;
+  });
+  return React.useCallback((...args) =>
+  // @ts-expect-error hide `this`
+  // tslint:disable-next-line:ban-comma-operator
+  (0, ref.current)(...args), []);
+}
+
+function useForkRef(...refs) {
+  /**
+   * This will create a new function if the refs passed to this hook change and are all defined.
+   * This means react will call the old forkRef with `null` and the new forkRef
+   * with the ref. Cleanup naturally emerges from this behavior.
+   */
+  return React.useMemo(() => {
+    if (refs.every(ref => ref == null)) {
+      return null;
+    }
+    return instance => {
+      refs.forEach(ref => {
+        setRef(ref, instance);
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
+}
+
+// based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
+let hadKeyboardEvent = true;
+let hadFocusVisibleRecently = false;
+let hadFocusVisibleRecentlyTimeout;
+const inputTypesWhitelist = {
+  text: true,
+  search: true,
+  url: true,
+  tel: true,
+  email: true,
+  password: true,
+  number: true,
+  date: true,
+  month: true,
+  week: true,
+  time: true,
+  datetime: true,
+  'datetime-local': true
+};
+
+/**
+ * Computes whether the given element should automatically trigger the
+ * `focus-visible` class being added, i.e. whether it should always match
+ * `:focus-visible` when focused.
+ * @param {Element} node
+ * @returns {boolean}
+ */
+function focusTriggersKeyboardModality(node) {
+  const {
+    type,
+    tagName
+  } = node;
+  if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
+    return true;
+  }
+  if (tagName === 'TEXTAREA' && !node.readOnly) {
+    return true;
+  }
+  if (node.isContentEditable) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Keep track of our keyboard modality state with `hadKeyboardEvent`.
+ * If the most recent user interaction was via the keyboard;
+ * and the key press did not include a meta, alt/option, or control key;
+ * then the modality is keyboard. Otherwise, the modality is not keyboard.
+ * @param {KeyboardEvent} event
+ */
+function handleKeyDown(event) {
+  if (event.metaKey || event.altKey || event.ctrlKey) {
+    return;
+  }
+  hadKeyboardEvent = true;
+}
+
+/**
+ * If at any point a user clicks with a pointing device, ensure that we change
+ * the modality away from keyboard.
+ * This avoids the situation where a user presses a key on an already focused
+ * element, and then clicks on a different element, focusing it with a
+ * pointing device, while we still think we're in keyboard modality.
+ */
+function handlePointerDown() {
+  hadKeyboardEvent = false;
+}
+function handleVisibilityChange() {
+  if (this.visibilityState === 'hidden') {
+    // If the tab becomes active again, the browser will handle calling focus
+    // on the element (Safari actually calls it twice).
+    // If this tab change caused a blur on an element with focus-visible,
+    // re-apply the class when the user switches back to the tab.
+    if (hadFocusVisibleRecently) {
+      hadKeyboardEvent = true;
+    }
+  }
+}
+function prepare(doc) {
+  doc.addEventListener('keydown', handleKeyDown, true);
+  doc.addEventListener('mousedown', handlePointerDown, true);
+  doc.addEventListener('pointerdown', handlePointerDown, true);
+  doc.addEventListener('touchstart', handlePointerDown, true);
+  doc.addEventListener('visibilitychange', handleVisibilityChange, true);
+}
+function isFocusVisible(event) {
+  const {
+    target
+  } = event;
+  try {
+    return target.matches(':focus-visible');
+  } catch (error) {
+    // Browsers not implementing :focus-visible will throw a SyntaxError.
+    // We use our own heuristic for those browsers.
+    // Rethrow might be better if it's not the expected error but do we really
+    // want to crash if focus-visible malfunctioned?
+  }
+
+  // No need for validFocusTarget check. The user does that by attaching it to
+  // focusable events only.
+  return hadKeyboardEvent || focusTriggersKeyboardModality(target);
+}
+function useIsFocusVisible() {
+  const ref = React.useCallback(node => {
+    if (node != null) {
+      prepare(node.ownerDocument);
+    }
+  }, []);
+  const isFocusVisibleRef = React.useRef(false);
+
+  /**
+   * Should be called if a blur event is fired
+   */
+  function handleBlurVisible() {
+    // checking against potential state variable does not suffice if we focus and blur synchronously.
+    // React wouldn't have time to trigger a re-render so `focusVisible` would be stale.
+    // Ideally we would adjust `isFocusVisible(event)` to look at `relatedTarget` for blur events.
+    // This doesn't work in IE11 due to https://github.com/facebook/react/issues/3751
+    // TODO: check again if React releases their internal changes to focus event handling (https://github.com/facebook/react/pull/19186).
+    if (isFocusVisibleRef.current) {
+      // To detect a tab/window switch, we look for a blur event followed
+      // rapidly by a visibility change.
+      // If we don't see a visibility change within 100ms, it's probably a
+      // regular focus change.
+      hadFocusVisibleRecently = true;
+      window.clearTimeout(hadFocusVisibleRecentlyTimeout);
+      hadFocusVisibleRecentlyTimeout = window.setTimeout(() => {
+        hadFocusVisibleRecently = false;
+      }, 100);
+      isFocusVisibleRef.current = false;
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Should be called if a blur event is fired
+   */
+  function handleFocusVisible(event) {
+    if (isFocusVisible(event)) {
+      isFocusVisibleRef.current = true;
+      return true;
+    }
+    return false;
+  }
+  return {
+    isFocusVisibleRef,
+    onFocus: handleFocusVisible,
+    onBlur: handleBlurVisible,
+    ref
+  };
+}
+
+/**
+ * Add keys, values of `defaultProps` that does not exist in `props`
+ * @param {object} defaultProps
+ * @param {object} props
+ * @returns {object} resolved props
+ */
+function resolveProps(defaultProps, props) {
+  const output = _extends$5({}, props);
+  Object.keys(defaultProps).forEach(propName => {
+    if (propName.toString().match(/^(components|slots)$/)) {
+      output[propName] = _extends$5({}, defaultProps[propName], output[propName]);
+    } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
+      const defaultSlotProps = defaultProps[propName] || {};
+      const slotProps = props[propName];
+      output[propName] = {};
+      if (!slotProps || !Object.keys(slotProps)) {
+        // Reduce the iteration if the slot props is empty
+        output[propName] = defaultSlotProps;
+      } else if (!defaultSlotProps || !Object.keys(defaultSlotProps)) {
+        // Reduce the iteration if the default slot props is empty
+        output[propName] = slotProps;
+      } else {
+        output[propName] = _extends$5({}, slotProps);
+        Object.keys(defaultSlotProps).forEach(slotPropName => {
+          output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
+        });
+      }
+    } else if (output[propName] === undefined) {
+      output[propName] = defaultProps[propName];
+    }
+  });
+  return output;
+}
+
+function composeClasses(slots, getUtilityClass, classes) {
+  const output = {};
+  Object.keys(slots).forEach(
+  // `Objet.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
+  // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
+  slot => {
+    output[slot] = slots[slot].reduce((acc, key) => {
+      if (key) {
+        acc.push(getUtilityClass(key));
+        if (classes && classes[key]) {
+          acc.push(classes[key]);
+        }
+      }
+      return acc;
+    }, []).join(' ');
+  });
+  return output;
+}
+
 const defaultGenerator = componentName => componentName;
 const createClassNameGenerator = () => {
   let generate = defaultGenerator;
@@ -4766,10 +5193,10 @@ var createCache = function createCache(options) {
 
 var createCache$1 = createCache;
 
-var jsxRuntimeExports = {};
+var jsxRuntimeExports$1 = {};
 var jsxRuntime = {
-  get exports(){ return jsxRuntimeExports; },
-  set exports(v){ jsxRuntimeExports = v; },
+  get exports(){ return jsxRuntimeExports$1; },
+  set exports(v){ jsxRuntimeExports$1 = v; },
 };
 
 var reactJsxRuntime_production_min = {};
@@ -4783,15 +5210,32 @@ var reactJsxRuntime_production_min = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
+var hasRequiredReactJsxRuntime_production_min;
+
+function requireReactJsxRuntime_production_min () {
+	if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
+	hasRequiredReactJsxRuntime_production_min = 1;
 var f=React__default,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
-function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
+	function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
+	return reactJsxRuntime_production_min;
+}
 
-(function (module) {
+var hasRequiredJsxRuntime;
 
-	{
-	  module.exports = reactJsxRuntime_production_min;
-	}
+function requireJsxRuntime () {
+	if (hasRequiredJsxRuntime) return jsxRuntimeExports$1;
+	hasRequiredJsxRuntime = 1;
+	(function (module) {
+
+		{
+		  module.exports = requireReactJsxRuntime_production_min();
+		}
 } (jsxRuntime));
+	return jsxRuntimeExports$1;
+}
+
+var jsxRuntimeExports = requireJsxRuntime();
 
 const cache$1 = createCache$1({
   key: 'css',
@@ -5759,7 +6203,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$d = ["values", "unit", "step"];
+const _excluded$e = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -5794,7 +6238,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$d);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$e);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -5868,7 +6312,7 @@ function createSpacing(spacingInput = 8) {
   return spacing;
 }
 
-const _excluded$c = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$d = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -5876,7 +6320,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$c);
+    other = _objectWithoutPropertiesLoose(options, _excluded$d);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -5972,7 +6416,7 @@ function useTheme$2(defaultTheme = systemDefaultTheme$1) {
   return useTheme$3(defaultTheme);
 }
 
-const _excluded$b = ["variant"];
+const _excluded$c = ["variant"];
 function isEmpty$2(string) {
   return string.length === 0;
 }
@@ -5986,7 +6430,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$b);
+    other = _objectWithoutPropertiesLoose(props, _excluded$c);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -5998,7 +6442,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$a = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+const _excluded$b = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
   _excluded2$2 = ["theme"],
   _excluded3 = ["theme"];
 function isEmpty$1(obj) {
@@ -6082,7 +6526,7 @@ function createStyled(input = {}) {
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$a);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$b);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -6175,6 +6619,32 @@ function createStyled(input = {}) {
   };
 }
 
+function getThemeProps(params) {
+  const {
+    theme,
+    name,
+    props
+  } = params;
+  if (!theme || !theme.components || !theme.components[name] || !theme.components[name].defaultProps) {
+    return props;
+  }
+  return resolveProps(theme.components[name].defaultProps, props);
+}
+
+function useThemeProps$1({
+  props,
+  name,
+  defaultTheme
+}) {
+  const theme = useTheme$2(defaultTheme);
+  const mergedProps = getThemeProps({
+    theme,
+    name,
+    props
+  });
+  return mergedProps;
+}
+
 /**
  * Returns a number whose value is limited to the given range.
  * @param {number} value The value to be clamped
@@ -6406,7 +6876,7 @@ function ThemeProvider(props) {
   });
 }
 
-const _excluded$9 = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+const _excluded$a = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
   _excluded2$1 = ["type", "mode"];
 function adaptV4Theme(inputTheme) {
   const {
@@ -6417,7 +6887,7 @@ function adaptV4Theme(inputTheme) {
       props = {},
       styleOverrides = {}
     } = inputTheme,
-    other = _objectWithoutPropertiesLoose$1(inputTheme, _excluded$9);
+    other = _objectWithoutPropertiesLoose$1(inputTheme, _excluded$a);
   const theme = _extends$4({}, other, {
     components: {}
   });
@@ -6630,7 +7100,7 @@ const green = {
 };
 var green$1 = green;
 
-const _excluded$8 = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$9 = ["mode", "contrastThreshold", "tonalOffset"];
 const light$1 = {
   // The colors used to style the text.
   text: {
@@ -6799,7 +7269,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose$1(palette, _excluded$8);
+    other = _objectWithoutPropertiesLoose$1(palette, _excluded$9);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -6898,7 +7368,7 @@ function createPalette(palette) {
   return paletteOutput;
 }
 
-const _excluded$7 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$8 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -6929,7 +7399,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose$1(_ref, _excluded$7);
+    other = _objectWithoutPropertiesLoose$1(_ref, _excluded$8);
   const coef = fontSize / 14;
   const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
   const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$4({
@@ -6981,7 +7451,7 @@ function createShadow(...px) {
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 var shadows$1 = shadows;
 
-const _excluded$6 = ["duration", "easing", "delay"];
+const _excluded$7 = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 const easing = {
@@ -7032,7 +7502,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options;
-      _objectWithoutPropertiesLoose$1(options, _excluded$6);
+      _objectWithoutPropertiesLoose$1(options, _excluded$7);
     return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
   };
   return _extends$4({
@@ -7058,7 +7528,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$5 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$6 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -7066,7 +7536,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose$1(options, _excluded$5);
+    other = _objectWithoutPropertiesLoose$1(options, _excluded$6);
   if (options.vars) {
     throw new Error(formatMuiErrorMessage(18));
   }
@@ -7101,6 +7571,17 @@ function useTheme$1() {
   return theme;
 }
 
+function useThemeProps({
+  props,
+  name
+}) {
+  return useThemeProps$1({
+    props,
+    name,
+    defaultTheme: defaultTheme$1
+  });
+}
+
 const rootShouldForwardProp = prop => shouldForwardProp(prop) && prop !== 'classes';
 const styled = createStyled({
   defaultTheme: defaultTheme$1,
@@ -7108,6 +7589,8 @@ const styled = createStyled({
 });
 var styled$1 = styled;
 
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -7457,7 +7940,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "d9e1" ;
+const NEBULA_VERSION_HASH = "b117" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -7976,7 +8459,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.1" );
+  element.setAttribute('data-nebulajs-version', "3.1.3" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
@@ -8083,7 +8566,7 @@ function getFontSize(size) {
   }
   return '16px';
 }
-function SvgIcon(_ref) {
+function SvgIcon$2(_ref) {
   let {
     size,
     style = {},
@@ -8133,7 +8616,7 @@ const remove = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var Remove = (props => SvgIcon(remove(props)));
+var Remove = (props => SvgIcon$2(remove(props)));
 
 const lock = props => _objectSpread2(_objectSpread2({}, props), {}, {
   shapes: [{
@@ -8143,7 +8626,7 @@ const lock = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var Lock = (props => SvgIcon(lock(props)));
+var Lock = (props => SvgIcon$2(lock(props)));
 
 const unlock = props => _objectSpread2(_objectSpread2({}, props), {}, {
   shapes: [{
@@ -8153,7 +8636,7 @@ const unlock = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var Unlock = (props => SvgIcon(unlock(props)));
+var Unlock = (props => SvgIcon$2(unlock(props)));
 
 function isRangeVisible(_ref) {
   var lastRenderedStartIndex = _ref.lastRenderedStartIndex,
@@ -8698,7 +9181,7 @@ const tick = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var Tick = (props => SvgIcon(tick(props)));
+var Tick = (props => SvgIcon$2(tick(props)));
 
 const CheckboxChecked = "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")";
 
@@ -8934,7 +9417,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;
@@ -8949,7 +9434,8 @@ function getFieldKeyboardNavigation(_ref) {
     let elementToFocus;
     const {
       keyCode,
-      shiftKey = false
+      shiftKey = false,
+      ctrlKey = false
     } = event.nativeEvent;
     switch (keyCode) {
       case KEYS.SHIFT:
@@ -8988,6 +9474,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.
@@ -9265,15 +9767,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), {}, {
@@ -9283,9 +9796,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([]);
@@ -9460,6 +9991,7 @@ function RowColumn(_ref3) {
     flexBasisProp: flexBasisVal,
     dense: dense
   }, /*#__PURE__*/React__default.createElement(Grid, {
+    ref: rowRef,
     container: true,
     gap: 0,
     className: joinClassNames(['value', ...classArr]),
@@ -11038,6 +11570,41 @@ function getStyledComponents() {
   };
 }
 
+const getIndex = (renderProps, isColumnLayout) => {
+  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,
+    layoutOptions,
+    maxCount,
+    columnCount,
+    rowCount,
+    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 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);
+}
+
 const {
   StyledFixedSizeList,
   StyledFixedSizeGrid
@@ -11064,7 +11631,10 @@ function getListBoxComponents(_ref) {
     direction,
     listLayout,
     sizes,
-    listCount
+    listCount,
+    overflowDisclaimer,
+    setScrollPosition,
+    focusListItems
   } = _ref;
   const {
     layoutOptions = {},
@@ -11107,12 +11677,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 {
@@ -11129,12 +11702,25 @@ 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);
         }
+        handleSetOverflowDisclaimer({
+          renderProps,
+          layoutOptions,
+          maxCount: sizes.maxCount,
+          columnCount,
+          rowCount,
+          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));
       },
       ref: ref
@@ -11157,6 +11743,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,
@@ -11164,6 +11751,16 @@ function getListBoxComponents(_ref) {
         rowCount,
         columnCount
       });
+      handleSetOverflowDisclaimer({
+        renderProps,
+        layoutOptions,
+        maxCount: sizes.maxCount,
+        columnCount,
+        rowCount,
+        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);
     };
     return /*#__PURE__*/React__default.createElement(StyledFixedSizeGrid
@@ -11211,7 +11808,8 @@ function getListSizes(_ref) {
     layoutOrder,
     maxVisibleRows = {},
     maxVisibleColumns,
-    dense
+    dense,
+    dataLayout
   } = layoutOptions;
   const columnAutoWidth = Math.min(150, textWidth + 18);
   let overflowStyling;
@@ -11225,8 +11823,8 @@ function getListSizes(_ref) {
       overflowStyling = {
         overflowX: 'hidden'
       };
-      const maxColumns = maxVisibleColumns.maxColumns || 3;
-      if (maxVisibleColumns.auto !== false) {
+      const maxColumns = (maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.maxColumns) || 3;
+      if ((maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.auto) !== false) {
         columnCount = Math.min(listCount, Math.ceil((width - scrollBarWidth) / columnAutoWidth)); // TODO: smarter sizing... based on glyph count + font size etc...??
       } else {
         columnCount = Math.min(listCount, maxColumns);
@@ -11237,7 +11835,7 @@ function getListSizes(_ref) {
       overflowStyling = {
         overflowY: 'hidden'
       };
-      const maxRows = maxVisibleRows.maxRows || 3;
+      const maxRows = (maxVisibleRows === null || maxVisibleRows === void 0 ? void 0 : maxVisibleRows.maxRows) || 3;
       if (maxVisibleRows.auto !== false) {
         rowCount = Math.floor(listHeight / itemSize);
       } else {
@@ -11247,6 +11845,15 @@ function getListSizes(_ref) {
       columnWidth = Math.max(columnAutoWidth, width / columnCount);
     }
   }
+  columnCount = (dataLayout === 'singleColumn' ? 1 : columnCount) || 1;
+  rowCount = (dataLayout === 'singleColumn' ? count : rowCount) || listCount;
+  const maxRowCount = layoutOptions.dense ? 838000 : 577000; // Styling breaks on items above this number: https://github.com/bvaughn/react-window/issues/659
+  rowCount = Math.min(rowCount, maxRowCount);
+  const maxScrollWidth = 33550000; // Styling breaks on items above this width: https://github.com/bvaughn/react-window/issues/659
+  const maxColumnCount = Math.floor(maxScrollWidth / columnWidth);
+  columnCount = Math.min(columnCount, maxColumnCount) || 1;
+  const maxListCount = rowCount * columnCount;
+  const limitedListCount = Math.min(listCount, maxListCount);
   return {
     columnCount,
     columnWidth,
@@ -11256,7 +11863,11 @@ function getListSizes(_ref) {
     listHeight,
     scrollBarWidth,
     count,
-    listCount
+    listCount: limitedListCount,
+    maxCount: {
+      row: maxRowCount,
+      column: maxColumnCount
+    }
   };
 }
 
@@ -11319,9 +11930,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
@@ -11423,24 +12035,338 @@ function useDataStore(model) {
 
 function ListBoxDisclaimer(_ref) {
   let {
-    width
+    width,
+    text,
+    dense,
+    tooltip
   } = _ref;
   const {
     translator
   } = useContext(InstanceContext);
-  return /*#__PURE__*/React__default.createElement(Typography, {
+  const StyledText = styled$1(Typography)(() => _objectSpread2({
+    minWidth: "".concat(width, "px"),
+    textAlign: 'center',
+    fontSize: "".concat(dense ? '12px' : '14px')
+  }, dense && {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    width
+  }));
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: tooltip ? translator.get(text) : ''
+  }, /*#__PURE__*/React__default.createElement(StyledText, {
     component: "div",
     variant: "body1",
-    minWidth: width,
-    textAlign: "center",
-    py: "16px"
-  }, translator.get('Listbox.NoMatchesForYourTerms'));
+    py: "12px"
+  }, translator.get(text)));
+}
+
+var Close = {};
+
+var interopRequireDefaultExports = {};
+var interopRequireDefault = {
+  get exports(){ return interopRequireDefaultExports; },
+  set exports(v){ interopRequireDefaultExports = v; },
+};
+
+(function (module) {
+	function _interopRequireDefault(obj) {
+	  return obj && obj.__esModule ? obj : {
+	    "default": obj
+	  };
+	}
+	module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports;
+} (interopRequireDefault));
+
+var createSvgIcon$1 = {};
+
+function getSvgIconUtilityClass(slot) {
+  return generateUtilityClass('MuiSvgIcon', slot);
+}
+generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
+
+const _excluded$5 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const useUtilityClasses = ownerState => {
+  const {
+    color,
+    fontSize,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', color !== 'inherit' && `color${capitalize(color)}`, `fontSize${capitalize(fontSize)}`]
+  };
+  return composeClasses(slots, getSvgIconUtilityClass, classes);
+};
+const SvgIconRoot = styled$1('svg', {
+  name: 'MuiSvgIcon',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.color !== 'inherit' && styles[`color${capitalize(ownerState.color)}`], styles[`fontSize${capitalize(ownerState.fontSize)}`]];
+  }
+})(({
+  theme,
+  ownerState
+}) => {
+  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette$ownerState$c2, _palette2, _palette2$action, _palette3, _palette3$action;
+  return {
+    userSelect: 'none',
+    width: '1em',
+    height: '1em',
+    display: 'inline-block',
+    fill: 'currentColor',
+    flexShrink: 0,
+    transition: (_theme$transitions = theme.transitions) == null ? void 0 : (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
+      duration: (_theme$transitions2 = theme.transitions) == null ? void 0 : (_theme$transitions2$d = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2$d.shorter
+    }),
+    fontSize: {
+      inherit: 'inherit',
+      small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
+      medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
+      large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
+    }[ownerState.fontSize],
+    // TODO v5 deprecate, v6 remove for sx
+    color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null ? void 0 : (_palette$ownerState$c2 = _palette[ownerState.color]) == null ? void 0 : _palette$ownerState$c2.main) != null ? _palette$ownerState$c : {
+      action: (_palette2 = (theme.vars || theme).palette) == null ? void 0 : (_palette2$action = _palette2.action) == null ? void 0 : _palette2$action.active,
+      disabled: (_palette3 = (theme.vars || theme).palette) == null ? void 0 : (_palette3$action = _palette3.action) == null ? void 0 : _palette3$action.disabled,
+      inherit: undefined
+    }[ownerState.color]
+  };
+});
+const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiSvgIcon'
+  });
+  const {
+      children,
+      className,
+      color = 'inherit',
+      component = 'svg',
+      fontSize = 'medium',
+      htmlColor,
+      inheritViewBox = false,
+      titleAccess,
+      viewBox = '0 0 24 24'
+    } = props,
+    other = _objectWithoutPropertiesLoose$1(props, _excluded$5);
+  const ownerState = _extends$4({}, props, {
+    color,
+    component,
+    fontSize,
+    instanceFontSize: inProps.fontSize,
+    inheritViewBox,
+    viewBox
+  });
+  const more = {};
+  if (!inheritViewBox) {
+    more.viewBox = viewBox;
+  }
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, _extends$4({
+    as: component,
+    className: clsx(classes.root, className),
+    focusable: "false",
+    color: htmlColor,
+    "aria-hidden": titleAccess ? undefined : true,
+    role: titleAccess ? 'img' : undefined,
+    ref: ref
+  }, more, other, {
+    ownerState: ownerState,
+    children: [children, titleAccess ? /*#__PURE__*/jsxRuntimeExports.jsx("title", {
+      children: titleAccess
+    }) : null]
+  }));
+});
+SvgIcon.muiName = 'SvgIcon';
+var SvgIcon$1 = SvgIcon;
+
+function createSvgIcon(path, displayName) {
+  function Component(props, ref) {
+    return /*#__PURE__*/jsxRuntimeExports.jsx(SvgIcon$1, _extends$4({
+      "data-testid": `${displayName}Icon`,
+      ref: ref
+    }, props, {
+      children: path
+    }));
+  }
+  Component.muiName = SvgIcon$1.muiName;
+  return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));
+}
+
+// TODO: remove this export once ClassNameGenerator is stable
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const unstable_ClassNameGenerator = {
+  configure: generator => {
+    ClassNameGenerator$1.configure(generator);
+  }
+};
+
+var utils$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	capitalize: capitalize,
+	createChainedFunction: createChainedFunction,
+	createSvgIcon: createSvgIcon,
+	debounce: debounce,
+	deprecatedPropType: deprecatedPropType,
+	isMuiElement: isMuiElement,
+	ownerDocument: ownerDocument,
+	ownerWindow: ownerWindow,
+	requirePropFactory: requirePropFactory,
+	setRef: setRef,
+	unstable_ClassNameGenerator: unstable_ClassNameGenerator,
+	unstable_useEnhancedEffect: useEnhancedEffect$1,
+	unstable_useId: useId,
+	unsupportedProp: unsupportedProp,
+	useControlled: useControlled,
+	useEventCallback: useEventCallback,
+	useForkRef: useForkRef,
+	useIsFocusVisible: useIsFocusVisible
+});
+
+var require$$0 = /*@__PURE__*/getAugmentedNamespace(utils$1);
+
+var hasRequiredCreateSvgIcon;
+
+function requireCreateSvgIcon () {
+	if (hasRequiredCreateSvgIcon) return createSvgIcon$1;
+	hasRequiredCreateSvgIcon = 1;
+	(function (exports) {
+
+		Object.defineProperty(exports, "__esModule", {
+		  value: true
+		});
+		Object.defineProperty(exports, "default", {
+		  enumerable: true,
+		  get: function () {
+		    return _utils.createSvgIcon;
+		  }
+		});
+		var _utils = require$$0;
+} (createSvgIcon$1));
+	return createSvgIcon$1;
+}
+
+var _interopRequireDefault = interopRequireDefaultExports;
+Object.defineProperty(Close, "__esModule", {
+  value: true
+});
+var default_1 = Close.default = void 0;
+var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
+var _jsxRuntime = requireJsxRuntime();
+var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), 'Close');
+default_1 = Close.default = _default;
+
+const RootContainer = styled$1(Paper)(_ref => {
+  let {
+    theme,
+    left
+  } = _ref;
+  return {
+    position: 'absolute',
+    bottom: '12px',
+    display: 'flex',
+    border: "1px solid ".concat(theme.palette.divider),
+    width: 'calc(100% - 11px)',
+    left
+  };
+});
+const LeftItem = styled$1('div')(() => ({
+  paddingLeft: '6px',
+  flexGrow: 1
+}));
+const RightItem = styled$1('div')(_ref2 => {
+  let {
+    dense
+  } = _ref2;
+  return {
+    display: 'flex',
+    alignItems: "".concat(dense ? 'center' : 'flex-start')
+  };
+});
+const SmallCloseIcon = styled$1(default_1)(() => ({
+  fontSize: '14px'
+}));
+function ListBoxFooter(_ref3) {
+  let {
+    text,
+    dismiss,
+    dense,
+    parentWidth = 0
+  } = _ref3;
+  const hasDismissButton = typeof dismiss === 'function';
+  const maxWidth = dense ? 370 : 282;
+  const left = Math.max(parentWidth / 2 - maxWidth / 2, 0);
+  const textWidth = Math.min(maxWidth, parentWidth) - 42;
+  const enableTooltip = dense && parentWidth < maxWidth;
+  return /*#__PURE__*/React__default.createElement(RootContainer, {
+    left: left,
+    style: {
+      maxWidth
+    }
+  }, /*#__PURE__*/React__default.createElement(LeftItem, null, /*#__PURE__*/React__default.createElement(ListBoxDisclaimer, {
+    text: text,
+    dense: dense,
+    width: textWidth,
+    tooltip: enableTooltip
+  })), /*#__PURE__*/React__default.createElement(RightItem, {
+    dense: dense
+  }, hasDismissButton && /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "close",
+    onClick: () => dismiss()
+  }, /*#__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) {
-  var _layout$qListObject$q;
+  var _layout$qListObject$q, _loaderRef$current, _loaderRef$current$_l, _loaderRef$current$_l2;
   let {
     model,
     selections,
@@ -11469,7 +12395,8 @@ function ListBox(_ref) {
   const loaderRef = useRef(null);
   const local = useRef({
     queue: [],
-    validPages: false
+    validPages: false,
+    dataOffset: 0
   });
   const listData = useRef({
     pages: []
@@ -11495,6 +12422,13 @@ function ListBox(_ref) {
     setStoreValue
   } = useDataStore(model);
   const loadMoreItems = useCallback(itemsLoader.loadMoreItems, [layout]);
+  const [overflowDisclaimer, setOverflowDisclaimer] = useState$1({
+    show: false,
+    dismissed: false
+  });
+  const showOverflowDisclaimer = show => setOverflowDisclaimer(state => _objectSpread2(_objectSpread2({}, state), {}, {
+    show
+  }));
   useEffect$1(() => {
     setPages((itemsLoader === null || itemsLoader === void 0 ? void 0 : itemsLoader.pages) || []);
   }, [itemsLoader === null || itemsLoader === void 0 ? void 0 : itemsLoader.pages]);
@@ -11520,6 +12454,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;
@@ -11529,7 +12480,8 @@ function ListBox(_ref) {
       if (layout && layout.qSelectionInfo.qInSelections) {
         return;
       }
-      loaderRef.current._listRef.scrollToItem(0);
+      local.current.dataOffset = 0;
+      scrollToIndex(0);
     }
   };
   if (update) {
@@ -11550,35 +12502,69 @@ 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;
-  const listCount = getListCount({
+  const unlimitedListCount = getListCount({
     pages,
     minimumBatchSize,
     count,
-    calculatePagesHeight
+    calculatePagesHeight,
+    layoutOptions,
+    model
   });
-  setStoreValue('listCount', listCount);
   const sizes = getListSizes({
     layout,
     width,
     height,
-    listCount,
+    listCount: unlimitedListCount,
     count,
     textWidth
   });
+  const {
+    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
@@ -11603,7 +12589,13 @@ function ListBox(_ref) {
     scrollState,
     local,
     sizes,
-    listCount
+    listCount,
+    overflowDisclaimer: {
+      state: overflowDisclaimer,
+      set: showOverflowDisclaimer
+    },
+    setScrollPosition,
+    focusListItems: getFocusState()
   });
   const {
     columnWidth,
@@ -11619,7 +12611,8 @@ function ListBox(_ref) {
     });
   }
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !listCount && /*#__PURE__*/React__default.createElement(ListBoxDisclaimer, {
-    width: width
+    width: width,
+    text: "Listbox.NoMatchesForYourTerms"
   }), /*#__PURE__*/React__default.createElement(InfiniteLoader, {
     isItemLoaded: isItemLoaded,
     itemCount: listCount || 1 // must be more than 0 or loadMoreItems will never be called again
@@ -11630,7 +12623,14 @@ function ListBox(_ref) {
     threshold: 0,
     minimumBatchSize: minimumBatchSize,
     ref: loaderRef
-  }, isVertical ? List : Grid));
+  }, isVertical ? List : Grid), overflowDisclaimer.show && !overflowDisclaimer.dismissed && /*#__PURE__*/React__default.createElement(ListBoxFooter, {
+    text: "Listbox.ItemsOverflow",
+    dismiss: () => setOverflowDisclaimer(state => _objectSpread2(_objectSpread2({}, state), {}, {
+      dismissed: true
+    })),
+    parentWidth: loaderRef === null || loaderRef === void 0 ? void 0 : (_loaderRef$current = loaderRef.current) === null || _loaderRef$current === void 0 ? void 0 : (_loaderRef$current$_l = _loaderRef$current._listRef) === null || _loaderRef$current$_l === void 0 ? void 0 : (_loaderRef$current$_l2 = _loaderRef$current$_l.props) === null || _loaderRef$current$_l2 === void 0 ? void 0 : _loaderRef$current$_l2.width,
+    dense: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.dense
+  }));
 }
 
 const selectAll = props => _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11780,7 +12780,7 @@ const Item = React__default.forwardRef((_ref, ref) => {
     size: "large",
     "aria-expanded": ariaExpanded,
     "aria-controls": "moreMenuList"
-  }, hasSvgIconShape && SvgIcon(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React__default.createElement("div", {
+  }, hasSvgIconShape && SvgIcon$2(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     style: {
       bottom: -spacing,
@@ -11809,7 +12809,7 @@ const clearSelections = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var ClearSelections = (props => SvgIcon(clearSelections(props)));
+var ClearSelections = (props => SvgIcon$2(clearSelections(props)));
 
 function useDefaultSelectionActions(_ref) {
   let {
@@ -11896,7 +12896,7 @@ function MoreItem(_ref2) {
     tabindex: "0"
   }, hasSvgIconShape && /*#__PURE__*/React__default.createElement(ListItemIcon, {
     className: classes$8.icon
-  }, SvgIcon(item.getSvgIconShape())), /*#__PURE__*/React__default.createElement(Typography, {
+  }, SvgIcon$2(item.getSvgIconShape())), /*#__PURE__*/React__default.createElement(Typography, {
     noWrap: true
   }, item.label)) : null;
 }
@@ -12190,9 +13190,10 @@ const search = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var SearchIcon = (props => SvgIcon(search(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 {
@@ -12217,12 +13218,15 @@ function ListBoxSearch(_ref3) {
     model,
     keyboard,
     dense = false,
-    visible = true
+    visible = true,
+    wildCardSearch = true
   } = _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
@@ -12249,6 +13253,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) {
@@ -12257,6 +13268,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']);
     }
@@ -12320,6 +13335,7 @@ function ListBoxSearch(_ref3) {
         paddingBottom: '5px'
       }
     }],
+    inputRef: inputRef,
     size: "small",
     fullWidth: true,
     placeholder: translator.get('Listbox.Search'),
@@ -12591,6 +13607,14 @@ function hasSelections(layout) {
 function ListBoxPopover(_ref) {
   let {
     alignTo,
+    anchorOrigin = {
+      vertical: 'bottom',
+      horizontal: 'center'
+    },
+    transformOrigin = {
+      vertical: 'top',
+      horizontal: 'center'
+    },
     show,
     close,
     app,
@@ -12663,14 +13687,8 @@ function ListBoxPopover(_ref) {
     open: open,
     onClose: popoverClose,
     anchorEl: alignTo.current,
-    anchorOrigin: {
-      vertical: 'bottom',
-      horizontal: 'center'
-    },
-    transformOrigin: {
-      vertical: 'top',
-      horizontal: 'center'
-    },
+    anchorOrigin: anchorOrigin,
+    transformOrigin: transformOrigin,
     PaperProps: {
       style: {
         minWidth: '250px'
@@ -12917,7 +13935,7 @@ const downArrow = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var DownArrow = (props => SvgIcon(downArrow(props)));
+var DownArrow = (props => SvgIcon$2(downArrow(props)));
 
 const PREFIX$6 = 'MultiState';
 const classes$6 = {
@@ -13355,7 +14373,7 @@ const selectionsBack = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var SelectionsBack = (props => SvgIcon(selectionsBack(props)));
+var SelectionsBack = (props => SvgIcon$2(selectionsBack(props)));
 
 const selectionsForward = props => _objectSpread2(_objectSpread2({}, props), {}, {
   shapes: [{
@@ -13365,7 +14383,7 @@ const selectionsForward = props => _objectSpread2(_objectSpread2({}, props), {},
     }
   }]
 });
-var SelectionsForward = (props => SvgIcon(selectionsForward(props)));
+var SelectionsForward = (props => SvgIcon$2(selectionsForward(props)));
 
 function Nav(_ref) {
   let {
@@ -13414,6 +14432,15 @@ function Nav(_ref) {
   }, /*#__PURE__*/React__default.createElement(ClearSelections, null))));
 }
 
+const idGen = [[10, 31], [0, 31], [0, 31], [0, 31], [0, 31], [0, 31]];
+function toChar(_ref) {
+  let [min, max] = _ref;
+  return (min + (Math.random() * (max - min) | 0)).toString(32);
+}
+function uid() {
+  return idGen.map(toChar).join('');
+}
+
 function AppSelections(_ref) {
   let {
     app
@@ -13456,7 +14483,7 @@ function mount(_ref2) {
   } = _ref2;
   return ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(AppSelections, {
     app: app
-  }), element);
+  }), element, uid());
 }
 
 var classCallCheck = function (instance, Constructor) {
@@ -14110,6 +15137,7 @@ function ListBoxInline(_ref3) {
   const searchHeight = dense ? 27 : 40;
   const extraheight = dense ? 39 : 49;
   const minHeight = 49 + (searchVisible ? searchHeight : 0) + extraheight;
+  const wildCardSearch = layout === null || layout === void 0 ? void 0 : layout.wildCardSearch;
   const onShowSearch = () => {
     const newValue = !showSearch;
     setShowSearch(newValue);
@@ -14206,7 +15234,8 @@ function ListBoxInline(_ref3) {
     dense: dense,
     keyboard: keyboard,
     visible: searchVisible,
-    searchContainerRef: searchContainerRef
+    searchContainerRef: searchContainerRef,
+    wildCardSearch: wildCardSearch
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true
@@ -14413,6 +15442,51 @@ function identify(_ref) {
   };
 }
 
+const _excluded$3 = ["__DO_NOT_USE__"];
+
+/**
+ * @ignore
+ * @typedef {object} DoNotUseOptions Options strictly recommended not to use as they might change anytime. Documenting them to keep track of them, but not exposing them to API docs.
+ * @property {boolean=} [focusSearch=false] Initialize the Listbox with the search input focused. Only applicable when
+ *    search is true, since toggling will always focus the search input on show.
+ * @property {boolean=} [options.showGray=true] Render fields or checkboxes in shades of gray instead of white when their state is excluded or alternative.
+ * @property {boolean=} [options.calculatePagesHeight=false] Override each page's qHeight with its actual row count.
+ * @property {object} [options.sessionModel] Use a custom sessionModel.
+ * @property {object} [options.selectionsApi] Use a custom selectionsApi to customize how values are selected.
+ * @property {function():boolean} [options.selectDisabled=] Define a function which tells when selections are disabled (true) or enabled (false). By default, always returns false.
+ * @property {function():object[]} [options.postProcessPages] A function for client-side post-processing of returned pages.
+ * @property {PromiseFunction} [options.fetchStart] A function called when the Listbox starts fetching data. Receives the fetch request promise as an argument.
+ * @property {ReceiverFunction} [options.update] A function which receives an update function which upon call will trigger a data fetch.
+ * @property {{setScrollPos:function(number):void, initScrollPos:number}} [options.scrollState=] Object including a setScrollPos function that sets current scroll position index. A initial scroll position index.
+ * @property {function(number):void} [options.setCount=] A function that gets called with the length of the data in the Listbox.
+ */
+
+/**
+ * @ignore
+ * @param {object} usersOptions Options sent in to fieldInstance.mount.
+ * @param {DoNotUseOptions} __DO_NOT_USE__
+ * @returns {object} Squashed options with defaults given for non-exposed options.
+ */
+const getOptions$1 = function () {
+  let usersOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+      __DO_NOT_USE__ = {}
+    } = usersOptions,
+    exposedOptions = _objectWithoutProperties(usersOptions, _excluded$3);
+  const DO_NOT_USE_DEFAULTS = {
+    update: undefined,
+    fetchStart: undefined,
+    showGray: true,
+    focusSearch: false,
+    sessionModel: undefined,
+    selectionsApi: undefined,
+    selectDisabled: undefined,
+    postProcessPages: undefined,
+    calculatePagesHeight: false
+  };
+  const squashedOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, exposedOptions), DO_NOT_USE_DEFAULTS), __DO_NOT_USE__);
+  return squashedOptions;
+};
 function ListBoxWrapper(_ref) {
   let {
     app,
@@ -14475,16 +15549,53 @@ function ListBoxPortal(_ref2) {
     qId: qId,
     stateName: stateName,
     options: options
-  }), element);
+  }), element, uid());
 }
 
-const idGen = [[10, 31], [0, 31], [0, 31], [0, 31], [0, 31], [0, 31]];
-function toChar(_ref) {
-  let [min, max] = _ref;
-  return (min + (Math.random() * (max - min) | 0)).toString(32);
-}
-function uid() {
-  return idGen.map(toChar).join('');
+const DEFAULTS = {
+  show: true,
+  anchorOrigin: {
+    vertical: 'bottom',
+    horizontal: 'center'
+  },
+  transformOrigin: {
+    vertical: 'top',
+    horizontal: 'center'
+  }
+};
+const getOptions = function () {
+  let usersOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const squashedOptions = _objectSpread2({}, DEFAULTS);
+  extend$1(true, squashedOptions, usersOptions);
+  return squashedOptions;
+};
+function ListBoxPopoverWrapper(_ref) {
+  let {
+    app,
+    fieldIdentifier,
+    stateName,
+    element,
+    options = {}
+  } = _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,
+    app: app,
+    alignTo: {
+      current: element
+    },
+    anchorOrigin: options.anchorOrigin,
+    transformOrigin: options.transformOrigin,
+    close: handleCloseShowState,
+    fieldName: fieldIdentifier,
+    stateName: stateName
+  });
 }
 
 function addIndex(array, index) {
@@ -15542,7 +16653,7 @@ const warning = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
-var WarningTriangle = (props => SvgIcon(warning(props)));
+var WarningTriangle = (props => SvgIcon$2(warning(props)));
 
 /* eslint-disable react/no-array-index-key */
 function DescriptionRow(_ref) {
@@ -15674,7 +16785,7 @@ function Error$1(_ref3) {
   }));
 }
 
-const _excluded$3 = ["size"];
+const _excluded$2 = ["size"];
 const PREFIX$3 = 'Progress';
 const classes$3 = {
   root: "".concat(PREFIX$3, "-root"),
@@ -15711,7 +16822,7 @@ function Progress(_ref2) {
   let {
       size = 'medium'
     } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded$3);
+    props = _objectWithoutProperties(_ref2, _excluded$2);
   const s = SIZES[size];
   return /*#__PURE__*/React__default.createElement(Root, {
     className: classes$3.root
@@ -15730,7 +16841,7 @@ function Progress(_ref2) {
   }, props)));
 }
 
-const _excluded$2 = ["cancel", "translator"],
+const _excluded$1 = ["cancel", "translator"],
   _excluded2 = ["retry", "translator"];
 const PREFIX$2 = 'LongRunningQuery';
 const classes$2 = {
@@ -15756,7 +16867,7 @@ function Cancel(_ref) {
       cancel,
       translator
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$1);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledGrid$2, {
     container: true,
     item: true,
@@ -16866,7 +17977,7 @@ function glue$1(_ref) {
     initialSnPlugins: initialSnPlugins,
     initialError: initialError,
     onMount: onMount
-  }), element, model.id);
+  }), element, currentId);
   const unmount = () => {
     root.remove(portal);
     model.removeListener('closed', unmount);
@@ -17144,7 +18255,22 @@ async function init(model, optional, halo, initialError) {
  * @property {string} type
  * @property {string=} version
  * @property {(Field[])=} fields
+ * @property {boolean} [extendProperties=false] Whether to deeply extend properties or not. If false then subtrees will be overwritten.
  * @property {EngineAPI.IGenericObjectProperties=} properties
+ * @example
+ * // A config for Creating objects:
+ * const createConfig = {
+ *   type: 'bar',
+ *   element: document.querySelector('.bar'),
+ *   extendProperties: true,
+ *   fields: ['[Country names]', '=Sum(Sales)'],
+ *   properties: {
+ *     legend: {
+ *       show: false,
+ *     },
+ *   }
+ * };
+ * nebbie.render(createConfig);
  */
 async function createSessionObject(_ref, halo) {
   let {
@@ -17154,7 +18280,8 @@ async function createSessionObject(_ref, halo) {
     properties,
     options,
     plugins,
-    element
+    element,
+    extendProperties
   } = _ref;
   let mergedProps = {};
   let error;
@@ -17163,7 +18290,7 @@ async function createSessionObject(_ref, halo) {
       name: type,
       version
     });
-    mergedProps = await t.initialProperties(properties);
+    mergedProps = await t.initialProperties(properties, extendProperties);
     const sn = await t.supernova();
     if (fields) {
       populateData({
@@ -21157,16 +22284,21 @@ function create$1(info, halo) {
       return sn;
     }),
     initialProperties(initial) {
+      let extendProperties = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       return this.supernova().then(() => {
-        const props = _objectSpread2(_objectSpread2({
+        const props = _objectSpread2({
           qInfo: {
             qType: type.name
           },
           visualization: type.name,
           version: type.version,
           showTitles: true
-        }, JSON.parse(stringified)), initial);
-        return props;
+        }, JSON.parse(stringified));
+        if (extendProperties) {
+          extend$1(true, props, initial);
+          return props;
+        }
+        return _objectSpread2(_objectSpread2({}, props), initial);
       });
     }
   };
@@ -21270,8 +22402,6 @@ function create(_ref) {
   };
 }
 
-const _excluded$1 = ["__DO_NOT_USE__"];
-
 /**
  * @interface Context
  * @property {boolean=} keyboardNavigation
@@ -21382,49 +22512,6 @@ const mergeConfigs = (base, c) => ({
  * @typedef {function(function)} ReceiverFunction A callback function which receives another function as input.
  */
 
-/**
- * @ignore
- * @typedef {object} DoNotUseOptions Options strictly recommended not to use as they might change anytime. Documenting them to keep track of them, but not exposing them to API docs.
- * @property {boolean=} [focusSearch=false] Initialize the Listbox with the search input focused. Only applicable when
- *    search is true, since toggling will always focus the search input on show.
- * @property {boolean=} [options.showGray=true] Render fields or checkboxes in shades of gray instead of white when their state is excluded or alternative.
- * @property {boolean=} [options.calculatePagesHeight=false] Override each page's qHeight with its actual row count.
- * @property {object} [options.sessionModel] Use a custom sessionModel.
- * @property {object} [options.selectionsApi] Use a custom selectionsApi to customize how values are selected.
- * @property {function():boolean} [options.selectDisabled=] Define a function which tells when selections are disabled (true) or enabled (false). By default, always returns false.
- * @property {function():object[]} [options.postProcessPages] A function for client-side post-processing of returned pages.
- * @property {PromiseFunction} [options.fetchStart] A function called when the Listbox starts fetching data. Receives the fetch request promise as an argument.
- * @property {ReceiverFunction} [options.update] A function which receives an update function which upon call will trigger a data fetch.
- * @property {{setScrollPos:function(number):void, initScrollPos:number}} [options.scrollState=] Object including a setScrollPos function that sets current scroll position index. A initial scroll position index.
- * @property {function(number):void} [options.setCount=] A function that gets called with the length of the data in the Listbox.
- */
-
-/**
- * @ignore
- * @param {object} usersOptions Options sent in to fieldInstance.mount.
- * @param {DoNotUseOptions} __DO_NOT_USE__
- * @returns {object} Squashed options with defaults given for non-exposed options.
- */
-const getOptions = function () {
-  let usersOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const {
-      __DO_NOT_USE__ = {}
-    } = usersOptions,
-    exposedOptions = _objectWithoutProperties(usersOptions, _excluded$1);
-  const DO_NOT_USE_DEFAULTS = {
-    update: undefined,
-    fetchStart: undefined,
-    showGray: true,
-    focusSearch: false,
-    sessionModel: undefined,
-    selectionsApi: undefined,
-    selectDisabled: undefined,
-    postProcessPages: undefined,
-    calculatePagesHeight: false
-  };
-  const squashedOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, exposedOptions), DO_NOT_USE_DEFAULTS), __DO_NOT_USE__);
-  return squashedOptions;
-};
 function nuked() {
   let configuration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const locale = appLocaleFn(configuration.context.language);
@@ -21496,6 +22583,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
@@ -21687,7 +22791,7 @@ function nuked() {
               app,
               fieldIdentifier,
               qId,
-              options: getOptions(options),
+              options: getOptions$1(options),
               stateName: options.stateName || '$'
             });
             root.add(this._instance);
@@ -21724,11 +22828,31 @@ function nuked() {
        */
       getRegisteredTypes: types.getList,
       __DO_NOT_USE__: {
-        types
+        types,
+        popover(anchorElement, fieldIdentifier, options) {
+          if (api._popoverInstance) {
+            root.remove(api._popoverInstance);
+            api._popoverInstance = null;
+          }
+          const onPopoverClose = () => api.emit('fieldPopoverClose');
+          const opts = getOptions(_objectSpread2({
+            onPopoverClose
+          }, options));
+          api._popoverInstance = React__default.createElement(ListBoxPopoverWrapper, {
+            element: anchorElement,
+            key: uid(),
+            app,
+            fieldIdentifier,
+            options: opts,
+            stateName: options.stateName || '$'
+          });
+          root.add(api._popoverInstance);
+        }
       }
     };
     halo.public.nebbie = api;
     halo.types = types;
+    eventmixin(api);
     return api;
   }