@nebula.js/stardust 5.0.0-alpha.2 → 5.0.0-alpha.3

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v5.0.0-alpha.2
+* @nebula.js/stardust v5.0.0-alpha.3
 * Copyright (c) 2024 QlikTech International AB
 * Released under the MIT license.
 */
@@ -8,7 +8,7 @@ import * as React from 'react';
 import React__default, { useState as useState$1, useEffect as useEffect$1, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useContext, useReducer, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, createElement, Component } from 'react';
 import ReactDOM from 'react-dom';
 import { CacheProvider, ThemeContext as ThemeContext$2 } from '@emotion/react';
-import { Checkbox, Radio, Typography, FormControlLabel, Box, Grid, Tooltip, Paper, IconButton, styled as styled$3, Popover, MenuList, MenuItem, ListItemIcon, Divider, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, Icon, CircularProgress } from '@mui/material';
+import { Checkbox, Radio, Typography, FormControlLabel, Box, Grid, Tooltip, Paper, IconButton, styled as styled$3, Popover, MenuList, MenuItem, ListItemIcon, Divider, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, ButtonBase, CircularProgress, Icon } from '@mui/material';
 import styled$2 from '@emotion/styled';
 
 function getDefaultExportFromCjs (x) {
@@ -709,26 +709,40 @@ var runtime = {exports: {}};
   }
 })(runtime);
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
-  return target;
+  return e;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : String(i);
 }
 function _defineProperty(obj, key, value) {
   key = _toPropertyKey(key);
@@ -785,20 +799,6 @@ function _objectWithoutProperties(source, excluded) {
   }
   return target;
 }
-function _toPrimitive(input, hint) {
-  if (typeof input !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
 
 const format = function () {
   let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
@@ -1932,6 +1932,26 @@ var Visualization_UnfulfilledCalculationCondition = {
 		"zh-TW": "不符計算條件"
 	}
 };
+var SelectionToolbar_ClickToLock = {
+	id: "SelectionToolbar.ClickToLock",
+	locale: {
+		"de-DE": "Klicken zum Sperren",
+		"en-US": "Click to lock",
+		"es-ES": "Haga clic para bloquearla",
+		"fr-FR": "Cliquez pour verrouiller",
+		"it-IT": "Fare clic per bloccare",
+		"ja-JP": "クリックしてロック",
+		"ko-KR": "잠그려면 클릭하십시오.",
+		"nl-NL": "Klik om te vergrendelen",
+		"pl-PL": "Aby zablokować, kliknij",
+		"pt-BR": "Clique para travar",
+		"ru-RU": "Щелкните, чтобы заблокировать",
+		"sv-SE": "Klicka för att låsa",
+		"tr-TR": "Kilitlemek için tıklayın",
+		"zh-CN": "单击以锁定",
+		"zh-TW": "按一下鎖定"
+	}
+};
 var all = {
 	Cancel: Cancel$1,
 	CurrentSelections_All: CurrentSelections_All,
@@ -1984,7 +2004,8 @@ 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,
+	SelectionToolbar_ClickToLock: SelectionToolbar_ClickToLock
 };
 
 function appLocaleFn(language) {
@@ -3063,10 +3084,27 @@ var _variables = {
 };
 var type = "dark";
 var color$1 = "@B98";
+var object$1 = {
+	listBox: {
+		backgroundColor: "@B20",
+		title: {
+			main: {
+				color: "@B98",
+				fontSize: "14px",
+				fontWeight: "bold"
+			}
+		},
+		content: {
+			color: "#@B98",
+			fontSize: "12px"
+		}
+	}
+};
 var darkRawJSON = {
 	_variables: _variables,
 	type: type,
-	color: color$1
+	color: color$1,
+	object: object$1
 };
 
 var object = {
@@ -3096,7 +3134,7 @@ function setTheme(t, resolve) {
   if (t._inherit === false || t._inherit === 'false') {
     baseInherit = {};
   }
-  const root = extend$2(true, {}, baseRawJSON, colorRawJSON, baseInherit);
+  const root = extend$2(true, {}, baseRawJSON, baseInherit, colorRawJSON);
   // avoid merging known array objects as it could cause issues if they are of different types (pyramid vs class) or length
   const rawThemeJSON = extend$2(true, {}, root, {
     scales: null,
@@ -5160,7 +5198,7 @@ function StyledEngineProvider(props) {
 }
 
 /**
- * @mui/styled-engine v5.15.2
+ * @mui/styled-engine v5.15.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -5223,8 +5261,13 @@ function _extends$2() {
   return _extends$2.apply(this, arguments);
 }
 
+// https://github.com/sindresorhus/is-plain-obj/blob/main/index.js
 function isPlainObject(item) {
-  return item !== null && typeof item === 'object' && item.constructor === Object;
+  if (typeof item !== 'object' || item === null) {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(item);
+  return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
 }
 function deepClone(source) {
   if (!isPlainObject(source)) {
@@ -5460,9 +5503,37 @@ function useForkRef(...refs) {
   }, refs);
 }
 
+class Timeout {
+  constructor() {
+    this.currentId = 0;
+    this.clear = () => {
+      if (this.currentId !== 0) {
+        clearTimeout(this.currentId);
+        this.currentId = 0;
+      }
+    };
+    this.disposeEffect = () => {
+      return this.clear;
+    };
+  }
+  static create() {
+    return new Timeout();
+  }
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(delay, fn) {
+    this.clear();
+    this.currentId = setTimeout(() => {
+      this.currentId = 0;
+      fn();
+    }, delay);
+  }
+}
+
 let hadKeyboardEvent = true;
 let hadFocusVisibleRecently = false;
-let hadFocusVisibleRecentlyTimeout;
+const hadFocusVisibleRecentlyTimeout = new Timeout();
 const inputTypesWhitelist = {
   text: true,
   search: true,
@@ -5585,10 +5656,9 @@ function useIsFocusVisible() {
       // 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(() => {
+      hadFocusVisibleRecentlyTimeout.start(100, () => {
         hadFocusVisibleRecently = false;
-      }, 100);
+      });
       isFocusVisibleRef.current = false;
       return true;
     }
@@ -5686,10 +5756,7 @@ const createClassNameGenerator = () => {
 };
 const ClassNameGenerator = createClassNameGenerator();
 
-// If GlobalStateSlot is changed, GLOBAL_STATE_CLASSES in
-// \packages\api-docs-builder\utils\parseSlotsAndClasses.ts must be updated accordingly.
-
-const globalStateClassesMapping = {
+const globalStateClasses = {
   active: 'active',
   checked: 'checked',
   completed: 'completed',
@@ -5704,7 +5771,7 @@ const globalStateClassesMapping = {
   selected: 'selected'
 };
 function generateUtilityClass(componentName, slot, globalStatePrefix = 'Mui') {
-  const globalStateClass = globalStateClassesMapping[slot];
+  const globalStateClass = globalStateClasses[slot];
   return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
 }
 
@@ -5716,6 +5783,10 @@ function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui')
   return result;
 }
 
+function clamp(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
+  return Math.max(min, Math.min(val, max));
+}
+
 const _excluded$g = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
@@ -6724,6 +6795,81 @@ function unstable_createStyleFunctionSx() {
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 
+/**
+ * A universal utility to style components with multiple color modes. Always use it from the theme object.
+ * It works with:
+ *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
+ *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - Zero-runtime engine
+ *
+ * Tips: Use an array over object spread and place `theme.applyStyles()` last.
+ *
+ * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
+ *
+ * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
+ *
+ * @example
+ * 1. using with `styled`:
+ * ```jsx
+ *   const Component = styled('div')(({ theme }) => [
+ *     { background: '#e5e5e5' },
+ *     theme.applyStyles('dark', {
+ *       background: '#1c1c1c',
+ *       color: '#fff',
+ *     }),
+ *   ]);
+ * ```
+ *
+ * @example
+ * 2. using with `sx` prop:
+ * ```jsx
+ *   <Box sx={theme => [
+ *     { background: '#e5e5e5' },
+ *     theme.applyStyles('dark', {
+ *        background: '#1c1c1c',
+ *        color: '#fff',
+ *      }),
+ *     ]}
+ *   />
+ * ```
+ *
+ * @example
+ * 3. theming a component:
+ * ```jsx
+ *   extendTheme({
+ *     components: {
+ *       MuiButton: {
+ *         styleOverrides: {
+ *           root: ({ theme }) => [
+ *             { background: '#e5e5e5' },
+ *             theme.applyStyles('dark', {
+ *               background: '#1c1c1c',
+ *               color: '#fff',
+ *             }),
+ *           ],
+ *         },
+ *       }
+ *     }
+ *   })
+ *```
+ */
+function applyStyles(key, styles) {
+  // @ts-expect-error this is 'any' type
+  const theme = this;
+  if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
+    // If CssVarsProvider is used as a provider,
+    // returns '* :where([data-mui-color-scheme="light|dark"]) &'
+    const selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
+    return {
+      [selector]: styles
+    };
+  }
+  if (theme.palette.mode === key) {
+    return styles;
+  }
+  return {};
+}
+
 const _excluded$f = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
@@ -6746,6 +6892,7 @@ function createTheme$1(options = {}, ...args) {
     spacing,
     shape: _extends$3({}, shape$1, shapeInput)
   }, other);
+  muiTheme.applyStyles = applyStyles;
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
   muiTheme.unstable_sxConfig = _extends$3({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
@@ -6770,7 +6917,7 @@ function useTheme$3(defaultTheme = systemDefaultTheme$1) {
   return useTheme$4(defaultTheme);
 }
 
-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 r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 const _excluded$e = ["variant"];
 function isEmpty$2(string) {
@@ -7122,7 +7269,6 @@ function useThemeProps$1({
   return mergedProps;
 }
 
-/* eslint-disable @typescript-eslint/naming-convention */
 /**
  * Returns a number whose value is limited to the given range.
  * @param {number} value The value to be clamped
@@ -7130,8 +7276,8 @@ function useThemeProps$1({
  * @param {number} max The upper boundary of the output range
  * @returns {number} A number in the range [min, max]
  */
-function clamp(value, min = 0, max = 1) {
-  return Math.min(Math.max(min, value), max);
+function clampWrapper(value, min = 0, max = 1) {
+  return clamp(value, min, max);
 }
 
 /**
@@ -7293,7 +7439,7 @@ function getContrastRatio(foreground, background) {
  */
 function darken(color, coefficient) {
   color = decomposeColor(color);
-  coefficient = clamp(coefficient);
+  coefficient = clampWrapper(coefficient);
   if (color.type.indexOf('hsl') !== -1) {
     color.values[2] *= 1 - coefficient;
   } else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
@@ -7312,7 +7458,7 @@ function darken(color, coefficient) {
  */
 function lighten(color, coefficient) {
   color = decomposeColor(color);
-  coefficient = clamp(coefficient);
+  coefficient = clampWrapper(coefficient);
   if (color.type.indexOf('hsl') !== -1) {
     color.values[2] += (100 - color.values[2]) * coefficient;
   } else if (color.type.indexOf('rgb') !== -1) {
@@ -8258,6 +8404,7 @@ const colors = {
   grey90: '#E6E6E6',
   grey85: '#D9D9D9',
   grey55: '#8C8C8C',
+  grey45: '#737373',
   grey30: '#4D4D4D',
   grey25: '#404040',
   grey20: '#333333',
@@ -8312,7 +8459,9 @@ const light = {
     custom: {
       focusBorder: colors.blue,
       focusOutline: 'rgba(70, 157, 205, 0.3)',
-      inputBackground: 'rgba(255, 255, 255, 1)'
+      inputBackground: 'rgba(255, 255, 255, 1)',
+      disabledBackground: colors.grey45,
+      disabledContrastText: colors.grey100
     },
     selected: {
       main: colors.green,
@@ -8380,7 +8529,9 @@ const dark = {
     custom: {
       focusBorder: colors.blue,
       focusOutline: 'rgba(70, 157, 205, 0.3)',
-      inputBackground: 'rgba(0, 0, 0, 0.2)'
+      inputBackground: 'rgba(0, 0, 0, 0.2)',
+      disabledBackground: colors.grey45,
+      disabledContrastText: colors.grey100
     },
     selected: {
       main: colors.green,
@@ -8541,7 +8692,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "b12a" ;
+const NEBULA_VERSION_HASH = "fc09" ;
 ClassNameGenerator.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8773,7 +8924,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "5.0.0-alpha.2" );
+  element.setAttribute('data-nebulajs-version', "5.0.0-alpha.3" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -9185,6 +9336,7 @@ const lock = props => _objectSpread2(_objectSpread2({}, props), {}, {
 var Lock = (props => SvgIcon$1(lock(props)));
 
 const unlock = props => _objectSpread2(_objectSpread2({}, props), {}, {
+  viewBox: '0 0 12 16',
   shapes: [{
     type: 'path',
     attrs: {
@@ -11222,12 +11374,13 @@ function RowColumn(_ref) {
     flexGrow: 1,
     paddingLeft: isRtl ? 8 : checkboxes ? 0 : undefined,
     paddingRight: checkboxes ? 0 : isRtl ? 8 : 0,
-    justifyContent: valueTextAlign
+    justifyContent: valueTextAlign,
+    textAlign: valueTextAlign
   };
   const isFirstElement = index === 0;
-  const showLock = isSelected && isLocked;
-  const showTick = !checkboxes && isSelected && !isLocked;
-  const showIcon = !checkboxes && sizePermitsTickOrLock;
+  const showLockIcon = isSelected && isLocked;
+  const showTickIcon = !checkboxes && isSelected && !isLocked;
+  const showAnyIcon = !checkboxes && sizePermitsTickOrLock;
   const cellPaddingRight = checkboxes || !sizePermitsTickOrLock;
   const ariaLabel = getValueLabel({
     translator,
@@ -11323,13 +11476,13 @@ function RowColumn(_ref) {
     checkboxes: checkboxes,
     dense: dense,
     showGray: showGray
-  }), showIcon && /*#__PURE__*/React__default.createElement(Grid, {
+  }), showAnyIcon && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: rowColClasses.icon
-  }, showLock && /*#__PURE__*/React__default.createElement(Lock, {
+  }, showLockIcon && /*#__PURE__*/React__default.createElement(Lock, {
     style: iconStyles,
     size: "small"
-  }), showTick && /*#__PURE__*/React__default.createElement(Tick, {
+  }), showTickIcon && /*#__PURE__*/React__default.createElement(Tick, {
     style: iconStyles,
     size: "small"
   }))));
@@ -13662,10 +13815,9 @@ Object.defineProperty(Close, "__esModule", {
 var default_1 = Close.default = void 0;
 var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
 var _jsxRuntime = jsxRuntimeExports;
-var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+default_1 = Close.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(Paper)(_ref => {
   let {
@@ -14393,6 +14545,7 @@ var ClearSelections = (props => SvgIcon$1(clearSelections(props)));
 function useDefaultSelectionActions(_ref) {
   let {
     api,
+    layout,
     onConfirm = () => {},
     onCancel = () => {},
     onKeyDeactivate = () => {}
@@ -14404,14 +14557,14 @@ function useDefaultSelectionActions(_ref) {
     key: 'clear',
     type: 'icon-button',
     label: translator.get('Selection.Clear'),
-    enabled: () => api.canClear(),
+    enabled: () => api.canClear(layout),
     action: () => api.clear(),
     getSvgIconShape: clearSelections
   }, {
     key: 'cancel',
     type: 'icon-button',
     label: translator.get('Selection.Cancel'),
-    enabled: () => api.canCancel(),
+    enabled: () => api.canCancel(layout),
     action: () => {
       onCancel();
       api.cancel();
@@ -14426,7 +14579,7 @@ function useDefaultSelectionActions(_ref) {
     key: 'confirm',
     type: 'icon-button',
     label: translator.get('Selection.Confirm'),
-    enabled: () => api.canConfirm(),
+    enabled: () => api.canConfirm(layout),
     action: () => {
       onConfirm();
       api.confirm();
@@ -14531,7 +14684,7 @@ const More$1 = React__default.forwardRef((_ref3, ref) => {
   }), /*#__PURE__*/React__default.createElement(MenuList, {
     id: "moreMenuList"
   }, actions.map((item, ix) =>
-  
+  /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
   React__default.createElement(MoreItem, {
     key: ix,
@@ -14561,7 +14714,8 @@ function getActionsKeyDownHandler(_ref) {
     keyboardNavigation,
     focusHandler,
     getEnabledButton,
-    selections
+    selections,
+    isRtl
   } = _ref;
   const handleActionsKeyDown = evt => {
     const {
@@ -14580,7 +14734,8 @@ function getActionsKeyDownHandler(_ref) {
           const isActionButton = target.classList.contains('njs-cell-action');
           if (isActionButton) {
             const index = getActionButtonIndex(target);
-            const pressedLeft = [KEYS.ARROW_LEFT, KEYS.ARROW_DOWN].includes(keyCode);
+            let pressedLeft = [KEYS.ARROW_LEFT, KEYS.ARROW_DOWN].includes(keyCode);
+            pressedLeft = isRtl ? !pressedLeft : pressedLeft; // invert direction when using RTL
             focusButton(pressedLeft ? index - 1 : index + 1);
           }
           evt.stopPropagation();
@@ -14685,6 +14840,7 @@ function ActionsToolbar(_ref3) {
       onConfirm: () => {},
       onCancel: () => {}
     },
+    extraItems,
     more: more$1 = {
       enabled: false,
       actions: [],
@@ -14699,10 +14855,13 @@ function ActionsToolbar(_ref3) {
     focusHandler = null,
     actionsRefMock = null,
     // for testing
-    direction = 'ltr',
-    autoConfirm = false
+    isRtl,
+    autoConfirm = false,
+    layout
   } = _ref3;
-  const defaultSelectionActions = useDefaultSelectionActions(selections);
+  const defaultSelectionActions = useDefaultSelectionActions(_objectSpread2(_objectSpread2({}, selections), {}, {
+    layout
+  }));
   const {
     translator,
     keyboardNavigation
@@ -14728,8 +14887,9 @@ function ActionsToolbar(_ref3) {
     keyboardNavigation,
     focusHandler,
     getEnabledButton,
-    selections
-  }), [keyboardNavigation, focusHandler, getEnabledButton, selections]);
+    selections,
+    isRtl
+  }), [keyboardNavigation, focusHandler, getEnabledButton, selections, isRtl]);
   useEffect$1(() => () => {
     setShowMoreItems(false);
   }, [popover.show, show, selections.show]);
@@ -14737,11 +14897,11 @@ function ActionsToolbar(_ref3) {
     if (!focusHandler) return;
     const focusFirst = () => {
       const enabledButton = getEnabledButton(false);
-      enabledButton && enabledButton.focus();
+      enabledButton === null || enabledButton === void 0 || enabledButton.focus();
     };
     const focusLast = () => {
       const enabledButton = getEnabledButton(true);
-      enabledButton && enabledButton.focus();
+      enabledButton === null || enabledButton === void 0 || enabledButton.focus();
     };
     focusHandler.on('focus_toolbar_first', focusFirst);
     focusHandler.on('focus_toolbar_last', focusLast);
@@ -14775,7 +14935,6 @@ function ActionsToolbar(_ref3) {
   const showActions = newActions.length > 0;
   const showMore = moreActions.length > 0;
   const showDivider = showActions && selections.show || showMore && selections.show;
-  const isRtl = direction === 'rtl';
   const Actions = /*#__PURE__*/React__default.createElement(Grid, {
     ref: actionsRef,
     onKeyDown: handleActionsKeyDown,
@@ -14787,7 +14946,11 @@ function ActionsToolbar(_ref3) {
     sx: {
       flexDirection: isRtl ? 'row-reverse' : 'row'
     }
-  }, showActions && /*#__PURE__*/React__default.createElement(ActionsGroup, {
+  }, (extraItems === null || extraItems === void 0 ? void 0 : extraItems.length) && /*#__PURE__*/React__default.createElement(ActionsGroup, {
+    className: "actions-toolbar-extra-actions",
+    actions: extraItems,
+    isRtl: isRtl
+  }), showActions && /*#__PURE__*/React__default.createElement(ActionsGroup, {
     actions: newActions
   }), showMore && /*#__PURE__*/React__default.createElement(ActionsGroup, {
     id: "actions-toolbar-show-more",
@@ -14989,7 +15152,7 @@ function ListBoxSearch(_ref2) {
   };
   function focusRow(container) {
     const row = (container === null || container === void 0 ? void 0 : container.querySelector('.last-focused')) || (container === null || container === void 0 ? void 0 : container.querySelector('[role="row"]:first-child'));
-    row.setAttribute('tabIndex', 0);
+    row === null || row === void 0 || row.setAttribute('tabIndex', 0);
     row === null || row === void 0 || row.focus();
   }
   const onKeyDown = async e => {
@@ -17509,6 +17672,11 @@ function getSearchColor(getListboxStyle) {
   const color = getContrastingColor('#fff', desiredTextColor);
   return color;
 }
+function getSearchBGColor(bgCol, getListboxStyle) {
+  const searchBgColorObj = new Color(getListboxStyle('', 'backgroundColor'));
+  searchBgColorObj.setAlpha(0.7);
+  return searchBgColorObj.isInvalid() ? bgCol : searchBgColorObj.toRGBA();
+}
 function getStyles(_ref3) {
   var _themeOverrides$heade, _themeOverrides$backg, _themeOverrides$heade2, _themeOverrides$conte, _themeOverrides$heade3, _themeOverrides$heade4, _themeOverrides$conte2, _themeOverrides$conte3;
   let {
@@ -17537,7 +17705,8 @@ function getStyles(_ref3) {
   const bgImage = (_themeOverrides$backg = themeOverrides.background) !== null && _themeOverrides$backg !== void 0 && _themeOverrides$backg.image ? resolveBgImage({
     bgImage: themeOverrides.background.image
   }, app) : undefined;
-  const searchBgColor = 'rgba(255, 255, 255, 0.7)';
+  const bgColor = bgComponentColor || getListboxStyle('', 'backgroundColor') || theme.palette.background.default;
+  const searchBgColor = getSearchBGColor(bgColor, getListboxStyle);
   const searchColor = getSearchColor(getListboxStyle);
   const headerFontStyle = ((_themeOverrides$heade2 = themeOverrides.header) === null || _themeOverrides$heade2 === void 0 ? void 0 : _themeOverrides$heade2.fontStyle) || {};
   const contentFontStyle = ((_themeOverrides$conte = themeOverrides.content) === null || _themeOverrides$conte === void 0 ? void 0 : _themeOverrides$conte.fontStyle) || {};
@@ -17546,7 +17715,7 @@ function getStyles(_ref3) {
   const getWithFallback = (value, trueValue, falseValue) => value === true && trueValue || value === false && falseValue || undefined;
   return {
     background: {
-      backgroundColor: bgComponentColor || getListboxStyle('', 'backgroundColor') || theme.palette.background.default,
+      backgroundColor: bgColor,
       backgroundImage: bgImage !== null && bgImage !== void 0 && bgImage.url && !(bgImage !== null && bgImage !== void 0 && bgImage.url.startsWith('url(')) ? "url('".concat(bgImage.url, "')") : undefined,
       backgroundRepeat: 'no-repeat',
       backgroundSize: bgImage === null || bgImage === void 0 ? void 0 : bgImage.size,
@@ -17687,9 +17856,11 @@ function ListBoxPopover(_ref) {
     anchorEl: alignTo.current,
     anchorOrigin: anchorOrigin,
     transformOrigin: transformOrigin,
-    PaperProps: {
-      style: {
-        minWidth: '250px'
+    slotProps: {
+      paper: {
+        style: {
+          minWidth: '250px'
+        }
       }
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -17723,6 +17894,7 @@ function ListBoxPopover(_ref) {
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(ActionsToolbar, {
+    layout: layout,
     more: {
       enabled: !isLocked,
       actions: listboxSelectionToolbarItems,
@@ -18052,7 +18224,7 @@ function MultiState(_ref2) {
     variant: "contained",
     fullWidth: true
   }, clearAllStates)), field.states.map((s, ix) =>
-  
+  /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
   React__default.createElement(ListItem, {
     key: ix,
@@ -18230,7 +18402,7 @@ function More(_ref2) {
   }, /*#__PURE__*/React__default.createElement(List, {
     dense: true
   }, items.map((s, ix) =>
-  
+  /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
   React__default.createElement(ListItem, {
     key: ix,
@@ -18784,16 +18956,15 @@ class AutoSizer extends Component {
         onResize
       } = this.props;
       if (this._parentNode) {
-        var _style$paddingLeft, _style$paddingRight, _style$paddingTop, _style$paddingBottom;
         // Guard against AutoSizer component being removed from the DOM immediately after being added.
         // This can result in invalid style values which can result in NaN values if we don't handle them.
         // See issue #150 for more context.
 
         const style = window.getComputedStyle(this._parentNode) || {};
-        const paddingLeft = parseFloat((_style$paddingLeft = style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : "0");
-        const paddingRight = parseFloat((_style$paddingRight = style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : "0");
-        const paddingTop = parseFloat((_style$paddingTop = style.paddingTop) !== null && _style$paddingTop !== void 0 ? _style$paddingTop : "0");
-        const paddingBottom = parseFloat((_style$paddingBottom = style.paddingBottom) !== null && _style$paddingBottom !== void 0 ? _style$paddingBottom : "0");
+        const paddingLeft = parseFloat(style.paddingLeft || "0");
+        const paddingRight = parseFloat(style.paddingRight || "0");
+        const paddingTop = parseFloat(style.paddingTop || "0");
+        const paddingBottom = parseFloat(style.paddingBottom || "0");
         const rect = this._parentNode.getBoundingClientRect();
         const scaledHeight = rect.height - paddingTop - paddingBottom;
         const scaledWidth = rect.width - paddingLeft - paddingRight;
@@ -18922,16 +19093,6 @@ class AutoSizer extends Component {
   }
 }
 
-const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
-  shapes: [{
-    type: 'path',
-    attrs: {
-      d: 'M15.9993744,3 L15.9993744,5 L4.99937445,5 L4.99937445,3 L15.9993744,3 Z M8.99937445,7 L15.9993744,7 L15.9993744,9 L8.99937445,9 L8.99937445,7 Z M11.9993744,11 L15.9993744,11 L15.9993744,13 L11.9993744,13 L11.9993744,11 Z M2.2,11 L7,11 L7,9.00369263 C7,8.89323568 7.08954305,8.80369263 7.2,8.80369263 C7.2549016,8.80369263 7.30738916,8.82626165 7.34515712,8.86610844 L10.1852182,11.8624926 C10.2583124,11.93961 10.258346,12.0604218 10.1852948,12.13758 L7.34523376,15.1373102 C7.2692928,15.2175206 7.14270711,15.2209817 7.06249671,15.1450407 C7.02260076,15.1072683 7,15.0547472 7,14.9998069 L7,12.9043747 C4.79351111,12.9043747 2.8018683,12.9266213 1.02507156,12.9711145 L1.02507252,12.9711526 C0.472939773,12.9849787 0.014139487,12.5485949 0.000313396522,11.9964622 C0.000104473692,11.988119 -1.32268838e-12,11.9797736 -1.3231638e-12,11.9714278 L-1.83320026e-12,3 L2,3 L2,10.8 C2,10.9104569 2.08954305,11 2.2,11 Z'
-    }
-  }]
-});
-var DrillDownIcon = (props => SvgIcon$1(drillDown(props)));
-
 function removeInnnerTabStops(container) {
   container === null || container === void 0 || container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
     elm.setAttribute('tabIndex', -1);
@@ -18985,14 +19146,17 @@ function useTempKeyboard(_ref) {
       const lastSelectedRow = c === null || c === void 0 ? void 0 : c.querySelector('.value.last-focused');
       const firstRowElement = c === null || c === void 0 ? void 0 : c.querySelector('.value.selector, .value');
       const confirmButton = c === null || c === void 0 ? void 0 : c.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
-      const elementToFocus = searchField || lastSelectedRow || firstRowElement || confirmButton;
+      const unlockCoverButton = c === null || c === void 0 ? void 0 : c.querySelector('#listbox-unlock-button');
+      const elementToFocus = searchField || lastSelectedRow || firstRowElement || unlockCoverButton || confirmButton;
       elementToFocus === null || elementToFocus === void 0 || elementToFocus.setAttribute('tabIndex', 0);
       elementToFocus === null || elementToFocus === void 0 || elementToFocus.focus();
     },
     focusSelection() {
+      const unlockCoverButton = document.querySelector('#listbox-unlock-button');
       const confirmButton = document.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
-      confirmButton === null || confirmButton === void 0 || confirmButton.setAttribute('tabIndex', 0);
-      confirmButton === null || confirmButton === void 0 || confirmButton.focus();
+      const btnToFocus = unlockCoverButton || confirmButton;
+      btnToFocus === null || btnToFocus === void 0 || btnToFocus.setAttribute('tabIndex', 0);
+      btnToFocus === null || btnToFocus === void 0 || btnToFocus.focus();
     }
   };
   return keyboard;
@@ -19148,18 +19312,79 @@ function getListboxContainerKeyboardNavigation(_ref) {
   };
 }
 
+const StyledDiv = styled('div')(() => ({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center'
+}));
+function ListBoxError(_ref) {
+  let {
+    text
+  } = _ref;
+  const {
+    translator: translatorDynamic
+  } = useContext(InstanceContext);
+  return /*#__PURE__*/React__default.createElement(StyledDiv, null, translatorDynamic.get(text));
+}
+
+function isDirectQueryEnabled(_ref) {
+  let {
+    appLayout
+  } = _ref;
+  const isDQ = !!(appLayout !== null && appLayout !== void 0 && appLayout.qIsDirectQueryMode);
+  return isDQ;
+}
+
+function getContainerPadding(_ref) {
+  let {
+    isGridMode,
+    dense,
+    height,
+    layoutOrder
+  } = _ref;
+  let containerPadding;
+  if (isGridMode) {
+    const itemHeight = getItemHeight({
+      isGridMode,
+      dense
+    });
+    let paddingY;
+    if (itemHeight > height) {
+      paddingY = '0px';
+    } else {
+      paddingY = '2px';
+    }
+    containerPadding = layoutOrder === 'row' ? "".concat(paddingY, " 4px") : "".concat(paddingY, " 6px ").concat(paddingY, " 4px");
+  } else {
+    containerPadding = undefined;
+  }
+  return containerPadding;
+}
+
+const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
+  shapes: [{
+    type: 'path',
+    attrs: {
+      d: 'M15.9993744,3 L15.9993744,5 L4.99937445,5 L4.99937445,3 L15.9993744,3 Z M8.99937445,7 L15.9993744,7 L15.9993744,9 L8.99937445,9 L8.99937445,7 Z M11.9993744,11 L15.9993744,11 L15.9993744,13 L11.9993744,13 L11.9993744,11 Z M2.2,11 L7,11 L7,9.00369263 C7,8.89323568 7.08954305,8.80369263 7.2,8.80369263 C7.2549016,8.80369263 7.30738916,8.82626165 7.34515712,8.86610844 L10.1852182,11.8624926 C10.2583124,11.93961 10.258346,12.0604218 10.1852948,12.13758 L7.34523376,15.1373102 C7.2692928,15.2175206 7.14270711,15.2209817 7.06249671,15.1450407 C7.02260076,15.1072683 7,15.0547472 7,14.9998069 L7,12.9043747 C4.79351111,12.9043747 2.8018683,12.9266213 1.02507156,12.9711145 L1.02507252,12.9711526 C0.472939773,12.9849787 0.014139487,12.5485949 0.000313396522,11.9964622 C0.000104473692,11.988119 -1.32268838e-12,11.9797736 -1.3231638e-12,11.9714278 L-1.83320026e-12,3 L2,3 L2,10.8 C2,10.9104569 2.08954305,11 2.2,11 Z'
+    }
+  }]
+});
+var DrillDownIcon = (props => SvgIcon$1(drillDown(props)));
+
 function showToolbarDetached(_ref) {
   var _titleRef$current$cli, _titleRef$current, _titleRef$current2, _titleRef$current3;
   let {
     containerRect,
     titleRef,
     iconsWidth,
-    headerPaddingLeft,
-    headerPaddingRight
+    paddingLeft,
+    paddingRight
   } = _ref;
   const containerWidth = containerRect.width;
   const preventTruncation = 2;
-  const padding = headerPaddingLeft + headerPaddingRight;
+  const padding = paddingLeft + paddingRight;
   const contentWidth = ((_titleRef$current$cli = titleRef === null || titleRef === void 0 || (_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.clientWidth) !== null && _titleRef$current$cli !== void 0 ? _titleRef$current$cli : 0) + iconsWidth + padding + preventTruncation;
   const actionToolbarWidth = 128;
   const notSufficientSpace = containerWidth < contentWidth + actionToolbarWidth;
@@ -19175,15 +19400,18 @@ function getListboxActionProps(_ref) {
     containerRef,
     isLocked,
     listboxSelectionToolbarItems,
+    extraItems,
     selections,
     keyboard
   } = _ref;
   return {
+    isDetached,
     show: showToolbar && !isDetached,
     popover: {
       show: showToolbar && isDetached,
       anchorEl: containerRef.current
     },
+    extraItems,
     more: {
       enabled: !isLocked,
       actions: listboxSelectionToolbarItems,
@@ -19208,55 +19436,293 @@ function getListboxActionProps(_ref) {
   };
 }
 
-const StyledDiv = styled('div')(() => ({
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  alignItems: 'center',
-  justifyContent: 'center'
-}));
-function ListBoxError(_ref) {
+const iconStyle = {
+  fontSize: '12px'
+};
+const UnlockButton = styled(ButtonBase)(_ref => {
   let {
-    text
+    theme,
+    isLoading
   } = _ref;
-  const {
-    translator: translatorDynamic
-  } = useContext(InstanceContext);
-  return /*#__PURE__*/React__default.createElement(StyledDiv, null, translatorDynamic.get(text));
-}
-
-function isDirectQueryEnabled(_ref) {
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: 48,
+    zIndex: 2,
+    // so it goes on top of action buttons
+    background: theme.palette.custom.disabledBackground,
+    opacity: 1,
+    color: theme.palette.custom.disabledContrastText,
+    width: '100%',
+    display: 'flex',
+    justifyContent: isLoading ? 'center' : 'flex-start',
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderRadius: 0,
+    '& *, & p': {
+      color: theme.palette.custom.disabledContrastText
+    },
+    '& i': {
+      padding: "".concat(ICON_PADDING, "px")
+    }
+  };
+});
+const StyledGridHeader = styled(Grid, {
+  shouldForwardProp: p => !['styles', 'isRtl'].includes(p)
+})(_ref2 => {
   let {
-    appLayout
-  } = _ref;
-  const isDQ = !!(appLayout !== null && appLayout !== void 0 && appLayout.qIsDirectQueryMode);
-  return isDQ;
+    styles,
+    isRtl
+  } = _ref2;
+  return _objectSpread2(_objectSpread2({
+    flexDirection: isRtl ? 'row-reverse' : 'row',
+    wrap: 'nowrap',
+    minHeight: 32,
+    alignContent: 'center'
+  }, styles.header), {}, {
+    '& *': {
+      color: styles.header.color
+    }
+  });
+});
+const HeaderTitle = styled(Typography)(_ref3 => {
+  let {
+    styles
+  } = _ref3;
+  return _objectSpread2(_objectSpread2({}, styles.header), {}, {
+    display: 'block',
+    // needed for text-overflow to work
+    alignItems: 'center',
+    paddingRight: '1px' // make place for italic font style
+  });
+});
+function UnlockCoverButton(_ref4) {
+  let {
+    translator,
+    toggleLock,
+    keyboard,
+    isLoading
+  } = _ref4;
+  const fontSize = '14px';
+  const unLockText = translator.get('SelectionToolbar.ClickToUnlock');
+  const component = /*#__PURE__*/React__default.createElement(UnlockButton, {
+    title: unLockText,
+    tabIndex: keyboard.enabled ? 0 : -1,
+    onClick: toggleLock,
+    "data-testid": "listbox-unlock-button",
+    id: "listbox-unlock-button",
+    isLoading: isLoading
+  }, isLoading ? /*#__PURE__*/React__default.createElement(CircularProgress, {
+    size: 16,
+    variant: "indeterminate",
+    color: "primary"
+  }) : /*#__PURE__*/React__default.createElement(Lock, {
+    disableRipple: true,
+    style: iconStyle
+  }), !isLoading && /*#__PURE__*/React__default.createElement(Typography, {
+    fontSize: fontSize
+  }, unLockText));
+  return component;
 }
 
-function getContainerPadding(_ref) {
+// ms that needs to pass before the lock button can be toggled again
+const lockTimeFrameMs = 500;
+let lastTime = 0;
+function getToggleLock(_ref) {
   let {
-    isGridMode,
-    dense,
-    height,
-    layoutOrder
+    isLocked,
+    setLocked,
+    settingLockedState,
+    model,
+    setSettingLockedState
   } = _ref;
-  let containerPadding;
-  if (isGridMode) {
-    const itemHeight = getItemHeight({
-      isGridMode,
-      dense
+  return () => {
+    const now = new Date();
+    const curTime = now - lastTime;
+    if (curTime < lockTimeFrameMs) {
+      return Promise.resolve();
+    }
+    if (settingLockedState) {
+      return () => {};
+    }
+    setSettingLockedState(true);
+    lastTime = now;
+    const func = isLocked ? model.unlock : model.lock;
+    setLocked(!isLocked);
+    return func.call(model, '/qListObjectDef').catch(() => {
+      setLocked(isLocked); // revert to the layout value
+    }).finally(() => {
+      setTimeout(() => {
+        setSettingLockedState(false);
+      }, 0);
     });
-    let paddingY;
-    if (itemHeight > height) {
-      paddingY = '0px';
-    } else {
-      paddingY = '2px';
+  };
+}
+function ListBoxHeader(_ref2) {
+  var _layout$qListObject, _layout$qListObject3;
+  let {
+    layout,
+    translator,
+    styles,
+    isRtl,
+    showLock,
+    selectDisabled,
+    showSearchIcon,
+    isDrillDown,
+    constraints,
+    onShowSearch,
+    classes,
+    containerRect,
+    isPopover,
+    showToolbar,
+    showDetachedToolbarOnly,
+    containerRef,
+    model,
+    selectionState,
+    isDirectQuery,
+    selections,
+    keyboard,
+    autoConfirm
+  } = _ref2;
+  const [isToolbarDetached, setIsToolbarDetached] = useState$1(showDetachedToolbarOnly);
+  const [isLocked, setLocked] = useState$1(layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 || (_layout$qListObject = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qLocked);
+  const [settingLockedState, setSettingLockedState] = useState$1(false);
+  useEffect$1(() => {
+    var _layout$qListObject2;
+    setLocked(layout === null || layout === void 0 || (_layout$qListObject2 = layout.qListObject) === null || _layout$qListObject2 === void 0 || (_layout$qListObject2 = _layout$qListObject2.qDimensionInfo) === null || _layout$qListObject2 === void 0 ? void 0 : _layout$qListObject2.qLocked);
+  }, [layout === null || layout === void 0 || (_layout$qListObject3 = layout.qListObject) === null || _layout$qListObject3 === void 0 || (_layout$qListObject3 = _layout$qListObject3.qDimensionInfo) === null || _layout$qListObject3 === void 0 ? void 0 : _layout$qListObject3.qLocked]);
+  const titleRef = useRef(null);
+  const showUnlock = showLock && isLocked;
+  const showLockIcon = !showLock && isLocked; // shows instead of the cover button when field/dim is locked.
+  const showLeftIcon = showSearchIcon || showLockIcon || isDrillDown; // the left-most icon outside of the actions/selections toolbar.
+
+  const paddingLeft = CELL_PADDING_LEFT - (showLeftIcon ? ICON_PADDING : 0);
+  const paddingRight = isRtl ? CELL_PADDING_LEFT - (showLeftIcon ? ICON_PADDING : 0) : HEADER_PADDING_RIGHT;
+
+  // Calculate explicit width for icons container. Search and lock cannot exist combined.
+  const iconsWidth = (showSearchIcon ? BUTTON_ICON_WIDTH : 0) + (showLockIcon ? BUTTON_ICON_WIDTH : 0) + (isDrillDown ? BUTTON_ICON_WIDTH : 0);
+  const toggleLock = getToggleLock({
+    isLocked,
+    setLocked,
+    settingLockedState,
+    setSettingLockedState,
+    model
+  });
+  const listboxSelectionToolbarItems = createListboxSelectionToolbar({
+    layout,
+    model,
+    translator,
+    selectionState,
+    isDirectQuery
+  });
+  const extraItems = isLocked || !showLock ? undefined : [{
+    key: 'lock',
+    type: undefined,
+    label: translator.get('SelectionToolbar.ClickToLock'),
+    getSvgIconShape: unlock,
+    enabled: () => !settingLockedState && !selectDisabled() && hasSelections(layout),
+    action: toggleLock
+  }];
+  const searchIconComp = constraints !== null && constraints !== void 0 && constraints.active ? /*#__PURE__*/React__default.createElement(SearchIcon, {
+    title: translator.get('Listbox.Search'),
+    size: "large",
+    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
+      padding: "".concat(ICON_PADDING, "px")
+    })
+  }) : /*#__PURE__*/React__default.createElement(IconButton, {
+    onClick: onShowSearch,
+    tabIndex: -1,
+    title: translator.get('Listbox.Search'),
+    size: "large",
+    disableRipple: true,
+    "data-testid": "search-toggle-btn"
+  }, /*#__PURE__*/React__default.createElement(SearchIcon, {
+    style: iconStyle
+  }));
+  useEffect$1(() => {
+    if (!titleRef.current || !containerRect) {
+      return;
     }
-    containerPadding = layoutOrder === 'row' ? "".concat(paddingY, " 4px") : "".concat(paddingY, " 6px ").concat(paddingY, " 4px");
-  } else {
-    containerPadding = undefined;
+    const mustShowDetached = showToolbarDetached({
+      containerRect,
+      titleRef,
+      iconsWidth,
+      paddingLeft,
+      paddingRight
+    });
+    const isDetached = showDetachedToolbarOnly || mustShowDetached;
+    setIsToolbarDetached(isDetached);
+  }, [iconsWidth, paddingLeft, paddingRight, titleRef.current, showDetachedToolbarOnly, Object.entries(containerRect || {}).sort().join(',')]);
+  const toolbarProps = getListboxActionProps({
+    isDetached: isPopover ? false : isToolbarDetached,
+    showToolbar,
+    containerRef,
+    isLocked,
+    extraItems,
+    listboxSelectionToolbarItems,
+    selections,
+    keyboard,
+    autoConfirm
+  });
+  const actionsToolbar = /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
+    isRtl: isRtl,
+    layout: layout
+  }, toolbarProps));
+  if (showDetachedToolbarOnly) {
+    return actionsToolbar;
   }
-  return containerPadding;
+
+  // Always show a lock symbol when locked and showLock is false
+  const lockedIconComp = showLockIcon ? /*#__PURE__*/React__default.createElement(Lock, {
+    size: "large",
+    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
+      padding: "".concat(ICON_PADDING, "px")
+    })
+  }) : undefined;
+  return /*#__PURE__*/React__default.createElement(StyledGridHeader, {
+    item: true,
+    container: true,
+    styles: styles,
+    isRtl: isRtl,
+    marginY: 1,
+    paddingLeft: "".concat(paddingLeft, "px"),
+    paddingRight: "".concat(paddingRight, "px"),
+    className: "header-container"
+  }, showUnlock && /*#__PURE__*/React__default.createElement(UnlockCoverButton, {
+    isLoading: settingLockedState,
+    translator: translator,
+    toggleLock: toggleLock,
+    keyboard: keyboard
+  }), showLeftIcon && /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    container: true,
+    alignItems: "center",
+    width: iconsWidth,
+    className: "header-action-container"
+  }, lockedIconComp || showSearchIcon && searchIconComp, isDrillDown && /*#__PURE__*/React__default.createElement(DrillDownIcon, {
+    tabIndex: -1,
+    title: translator.get('Listbox.DrillDown'),
+    style: _objectSpread2(_objectSpread2({}, iconStyle), {}, {
+      padding: "".concat(ICON_PADDING, "px")
+    })
+  })), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: true,
+    minWidth: 0 // needed to text-overflow see: https://css-tricks.com/flexbox-truncated-text/
+    ,
+    justifyContent: isRtl ? 'flex-end' : 'flex-start',
+    className: classes.listBoxHeader
+  }, /*#__PURE__*/React__default.createElement(HeaderTitle, {
+    variant: "h6",
+    noWrap: true,
+    ref: titleRef,
+    title: layout.title,
+    styles: styles
+  }, layout.title)), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    display: "flex"
+  }, actionsToolbar));
 }
 
 const PREFIX$4 = 'ListBoxInline';
@@ -19300,47 +19766,20 @@ const StyledGrid$3 = styled(Grid, {
     }
   });
 });
-const StyledGridHeader = styled(Grid, {
-  shouldForwardProp: p => !['styles', 'isRtl'].includes(p)
-})(_ref2 => {
-  let {
-    styles,
-    isRtl
-  } = _ref2;
-  return _objectSpread2(_objectSpread2({
-    flexDirection: isRtl ? 'row-reverse' : 'row',
-    wrap: 'nowrap',
-    minHeight: 32,
-    alignContent: 'center'
-  }, styles.header), {}, {
-    '& *': {
-      // Assign the styles color as defaul color for all elements in the header
-      color: styles.header.color
-    }
-  });
-});
-const Title = styled(Typography)(_ref3 => {
-  let {
-    styles
-  } = _ref3;
-  return _objectSpread2(_objectSpread2({}, styles.header), {}, {
-    paddingRight: '1px' // make place for italic font style
-  });
-});
-const isModal = _ref4 => {
+const isModal = _ref2 => {
   var _app$isInModalSelecti, _app$isInModalSelecti2;
   let {
     app,
     appSelections
-  } = _ref4;
+  } = _ref2;
   return (_app$isInModalSelecti = (_app$isInModalSelecti2 = app.isInModalSelection) === null || _app$isInModalSelecti2 === void 0 ? void 0 : _app$isInModalSelecti2.call(app)) !== null && _app$isInModalSelecti !== void 0 ? _app$isInModalSelecti : appSelections.isInModal();
 };
-function ListBoxInline(_ref5) {
-  var _layout$qListObject, _layout$qListObject2, _layoutOptions$dense, _containerRef$current;
+function ListBoxInline(_ref3) {
+  var _layout$qListObject, _layout$qListObject2, _layout$title, _layoutOptions$dense, _containerRef$current;
   let {
     options,
     layout
-  } = _ref5;
+  } = _ref3;
   const {
     app,
     direction,
@@ -19361,6 +19800,7 @@ function ListBoxInline(_ref5) {
     renderedCallback,
     toolbar = true,
     isPopover = false,
+    showLock = false,
     components
   } = options;
 
@@ -19376,9 +19816,6 @@ function ListBoxInline(_ref5) {
     return [ref, setRef];
   };
   const theme = useTheme$1();
-  const unlock = useCallback(() => {
-    model.unlock('/qListObjectDef');
-  }, [model]);
   const {
     translator,
     keyboardNavigation,
@@ -19415,7 +19852,6 @@ function ListBoxInline(_ref5) {
     stop: 0
   });
   const [appSelections] = useAppSelections(app);
-  const titleRef = useRef(null);
   const [selectionState$1] = useState$1(() => selectionState());
   const keyboard = useTempKeyboard({
     containerRef,
@@ -19427,7 +19863,6 @@ function ListBoxInline(_ref5) {
   }), [app, appSelections]);
   const isInvalid = layout === null || layout === void 0 ? void 0 : layout.qListObject.qDimensionInfo.qError;
   const errorText = isInvalid && constraints.active ? 'Visualization.Invalid.Dimension' : 'Visualization.Incomplete';
-  const [isToolbarDetached, setIsToolbarDetached] = useState$1(false);
   const {
     handleKeyDown,
     handleOnMouseEnter,
@@ -19444,8 +19879,6 @@ function ListBoxInline(_ref5) {
     constraints,
     isModal: isModalMode
   }), [keyboard, hovering, updateKeyScroll, containerRef, currentScrollIndex, app, appSelections, constraints, isModalMode]);
-  const showDetachedToolbarOnly = toolbar && ((layout === null || layout === void 0 ? void 0 : layout.title) === '' || (layout === null || layout === void 0 ? void 0 : layout.showTitle) === false) && !isPopover;
-  const showToolbarWithTitle = toolbar && (layout === null || layout === void 0 ? void 0 : layout.title) !== '' && (layout === null || layout === void 0 ? void 0 : layout.showTitle) !== false || isPopover;
   useEffect$1(() => {
     document.addEventListener('keydown', globalKeyDown);
     return () => {
@@ -19453,6 +19886,9 @@ function ListBoxInline(_ref5) {
     };
   }, [globalKeyDown]);
   useEffect$1(() => {
+    if (search === true) {
+      setShowSearch(true);
+    }
     const show = () => {
       setShowToolbar(true);
     };
@@ -19463,6 +19899,7 @@ function ListBoxInline(_ref5) {
       }
     };
     if (isPopover) {
+      // When isPopover, toolbar == false will be ignored.
       if (!selections.isActive()) {
         selections.begin('/qListObjectDef');
         selections.on('activated', show);
@@ -19470,7 +19907,7 @@ function ListBoxInline(_ref5) {
       }
       setShowToolbar(isPopover);
     }
-    if (selections) {
+    if (toolbar && selections) {
       if (!selections.isModal()) {
         selections.on('activated', show);
         selections.on('deactivated', hide);
@@ -19483,7 +19920,7 @@ function ListBoxInline(_ref5) {
         selections.removeListener('deactivated', hide);
       }
     };
-  }, [selections, isPopover]);
+  }, [toolbar, selections, isPopover]);
   useEffect$1(() => {
     if (!searchContainer || !searchContainer.current) {
       return;
@@ -19500,64 +19937,31 @@ function ListBoxInline(_ref5) {
     autoConfirm = false,
     layoutOptions = {}
   } = layout !== null && layout !== void 0 ? layout : {};
-  const showSearchIcon = searchEnabled !== false && search === 'toggle';
-  const isLocked = (layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 || (_layout$qListObject = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qLocked) === true;
-  const showSearchOrLockIcon = isLocked || showSearchIcon;
+  const isLocked = layout === null || layout === void 0 || (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 || (_layout$qListObject = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qLocked;
+  const showSearchIcon = searchEnabled !== false && search === 'toggle' && !isLocked;
   const isDrillDown = (layout === null || layout === void 0 || (_layout$qListObject2 = layout.qListObject) === null || _layout$qListObject2 === void 0 || (_layout$qListObject2 = _layout$qListObject2.qDimensionInfo) === null || _layout$qListObject2 === void 0 ? void 0 : _layout$qListObject2.qGrouping) === 'H';
-  const showIcons = showSearchOrLockIcon || isDrillDown;
-  const iconsWidth = (showSearchOrLockIcon ? BUTTON_ICON_WIDTH : 0) + (isDrillDown ? ICON_WIDTH + ICON_PADDING : 0); // Drill-down icon needs padding right so there is space between the icon and the title
+  const canShowTitle = (layout === null || layout === void 0 || (_layout$title = layout.title) === null || _layout$title === void 0 ? void 0 : _layout$title.length) && (layout === null || layout === void 0 ? void 0 : layout.showTitle) !== false;
+  const showDetachedToolbarOnly = toolbar && !canShowTitle && !isPopover;
+  const showAttachedToolbar = toolbar && canShowTitle || isPopover;
   const isRtl = direction === 'rtl';
-  const headerPaddingLeft = CELL_PADDING_LEFT - (showSearchOrLockIcon ? ICON_PADDING : 0);
-  const headerPaddingRight = isRtl ? CELL_PADDING_LEFT - (showIcons ? ICON_PADDING : 0) : HEADER_PADDING_RIGHT;
-  useEffect$1(() => {
-    if (!titleRef.current || !containerRect) {
-      return;
-    }
-    const isDetached = showToolbarDetached({
-      containerRect,
-      titleRef,
-      iconsWidth,
-      headerPaddingLeft,
-      headerPaddingRight
-    });
-    setIsToolbarDetached(isDetached);
-  }, [titleRef.current, containerRect]);
   if (!model || !layout || !translator) {
     return null;
   }
-  const listboxSelectionToolbarItems = createListboxSelectionToolbar({
-    layout,
-    model,
-    translator,
-    selectionState: selectionState$1,
-    isDirectQuery
-  });
   const showSearchToggle = search === 'toggle' && showSearch;
-  const searchVisible = (search === true || showSearchToggle) && !selectDisabled() && searchEnabled !== false;
+  const searchVisible = search === true || showSearchToggle && !selectDisabled() && searchEnabled !== false;
   const dense = (_layoutOptions$dense = layoutOptions.dense) !== null && _layoutOptions$dense !== void 0 ? _layoutOptions$dense : false;
-  const onShowSearch = () => {
+  const handleShowSearch = () => {
     const newValue = !showSearch;
     setShowSearch(newValue);
   };
   const onCtrlF = () => {
     if (search === 'toggle') {
-      onShowSearch();
+      handleShowSearch();
     } else {
       const input = searchContainer.current.querySelector('input');
       input === null || input === void 0 || input.focus();
     }
   };
-  const getActionToolbarProps = isDetached => _objectSpread2(_objectSpread2({}, getListboxActionProps({
-    isDetached: isPopover ? false : isDetached,
-    showToolbar,
-    containerRef,
-    isLocked,
-    listboxSelectionToolbarItems,
-    selections,
-    keyboard
-  })), {}, {
-    autoConfirm
-  });
   const shouldAutoFocus = searchVisible && search === 'toggle';
 
   // Add a container padding for grid mode to harmonize with the grid item margins (should sum to 8px).
@@ -19568,49 +19972,35 @@ function ListBoxInline(_ref5) {
     height: (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight,
     layoutOrder: layoutOptions.layoutOrder
   });
-  const searchIconComp = constraints !== null && constraints !== void 0 && constraints.active ? /*#__PURE__*/React__default.createElement(SearchIcon, {
-    title: translator.get('Listbox.Search'),
-    size: "large",
-    style: {
-      fontSize: '12px',
-      padding: '7px'
-    }
-  }) : /*#__PURE__*/React__default.createElement(IconButton, {
-    onClick: onShowSearch,
-    tabIndex: -1,
-    title: translator.get('Listbox.Search'),
-    size: "large",
-    disableRipple: true,
-    "data-testid": "search-toggle-btn"
-  }, /*#__PURE__*/React__default.createElement(SearchIcon, {
-    style: {
-      fontSize: '12px'
-    }
-  }));
-  const lockIconComp = selectDisabled() ? /*#__PURE__*/React__default.createElement(Lock, {
-    size: "large",
-    style: {
-      fontSize: '12px',
-      padding: '7px'
-    }
-  }) : /*#__PURE__*/React__default.createElement(IconButton, {
-    title: translator.get('SelectionToolbar.ClickToUnlock'),
-    tabIndex: -1,
-    onClick: unlock,
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(Lock, {
-    disableRipple: true,
-    style: {
-      fontSize: '12px'
-    }
-  }));
   if (isInvalid) {
     renderedCallback === null || renderedCallback === void 0 || renderedCallback();
   }
-  const listBoxMinHeight = showToolbarWithTitle ? DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH : 0;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
-    direction: direction
-  }, getActionToolbarProps(true))), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
+  const listBoxMinHeight = showAttachedToolbar ? DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH : 0;
+  const listBoxHeader = /*#__PURE__*/React__default.createElement(ListBoxHeader, {
+    selectDisabled: selectDisabled,
+    showSearchIcon: showSearchIcon,
+    isDrillDown: isDrillDown,
+    onShowSearch: handleShowSearch,
+    isPopover: isPopover,
+    showToolbar: showToolbar,
+    isDirectQuery: isDirectQuery,
+    autoConfirm: autoConfirm,
+    showDetachedToolbarOnly: showDetachedToolbarOnly,
+    layout: layout,
+    translator: translator,
+    styles: styles,
+    isRtl: isRtl,
+    showLock: showLock,
+    constraints: constraints,
+    classes: classes$4,
+    containerRect: containerRect,
+    containerRef: containerRef,
+    model: model,
+    selectionState: selectionState$1,
+    selections: selections,
+    keyboard: keyboard
+  });
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && listBoxHeader, /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
     container: true,
     tabIndex: keyboard.enabled ? -1 : undefined,
@@ -19631,45 +20021,7 @@ function ListBoxInline(_ref5) {
     },
     isGridMode: isGridMode,
     "aria-label": keyboard.active ? translator.get('Listbox.ScreenReaderInstructions') : ''
-  }, showToolbarWithTitle && /*#__PURE__*/React__default.createElement(StyledGridHeader, {
-    item: true,
-    container: true,
-    styles: styles,
-    isRtl: isRtl,
-    marginY: 1,
-    paddingLeft: "".concat(headerPaddingLeft, "px"),
-    paddingRight: "".concat(headerPaddingRight, "px")
-  }, showIcons && /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    alignItems: "center",
-    width: iconsWidth
-  }, isLocked ? lockIconComp : showSearchIcon && searchIconComp, isDrillDown && /*#__PURE__*/React__default.createElement(DrillDownIcon, {
-    tabIndex: -1,
-    title: translator.get('Listbox.DrillDown'),
-    size: "large",
-    style: {
-      fontSize: '12px'
-    }
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: true,
-    minWidth: 0 // needed to text-overflow see: https://css-tricks.com/flexbox-truncated-text/
-    ,
-    justifyContent: isRtl ? 'flex-end' : 'flex-start',
-    className: classes$4.listBoxHeader
-  }, /*#__PURE__*/React__default.createElement(Title, {
-    variant: "h6",
-    noWrap: true,
-    ref: titleRef,
-    title: layout.title,
-    styles: styles
-  }, layout.title)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    display: "flex"
-  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
-    direction: direction
-  }, getActionToolbarProps(isToolbarDetached))))), /*#__PURE__*/React__default.createElement(Grid, {
+  }, showAttachedToolbar && listBoxHeader, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
     direction: "column",
@@ -19692,7 +20044,7 @@ function ListBoxInline(_ref5) {
     wildCardSearch: wildCardSearch,
     searchEnabled: searchEnabled,
     direction: direction,
-    hide: showSearchIcon && onShowSearch,
+    hide: showSearchIcon && handleShowSearch,
     styles: styles
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -19700,11 +20052,11 @@ function ListBoxInline(_ref5) {
     className: classes$4.listboxWrapper
   }, isInvalid ? /*#__PURE__*/React__default.createElement(ListBoxError, {
     text: errorText
-  }) : /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref6 => {
+  }) : /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref4 => {
     let {
       height,
       width
-    } = _ref6;
+    } = _ref4;
     return /*#__PURE__*/React__default.createElement(ListBox, {
       model: model,
       app: app,
@@ -19746,10 +20098,10 @@ function ListBoxInline(_ref5) {
   })))));
 }
 const ListBoxInlineMemoed = React__default.memo(ListBoxInline);
-function IsolateUseLayoutWrapper(_ref7) {
+function IsolateUseLayoutWrapper(_ref5) {
   let {
     options = {}
-  } = _ref7;
+  } = _ref5;
   const {
     model
   } = options;
@@ -19778,24 +20130,26 @@ function useExistingModel(_ref) {
     throw new Error("Option \"".concat(usedForbiddenOptions.join(', '), "\" is not applicable for existing objects."));
   }
   useEffect$1(() => {
-    async function fetchObject() {
-      const modelFromStore = modelStore.get(qId);
-      if (modelFromStore) {
-        setModel(modelFromStore);
-      } else {
-        const m = await app.getObject(qId);
-        modelStore.set(m.id, m);
-        m.once('closed', () => {
-          modelStore.clear(m.id);
-        });
-        setModel(m);
+    function storeModel(m) {
+      if (modelStore.get(m.id)) {
+        return;
       }
+      // Nebula gets the model from this store in some of its
+      // core functions, so it must always be stored here.
+      modelStore.set(m.id, m);
+      m.once('closed', () => {
+        modelStore.clear(m.id);
+      });
     }
-    if (sessionModel) {
-      setModel(sessionModel);
-    } else {
-      fetchObject();
+    async function fetchObject(modelId) {
+      const m = modelStore.get(modelId) || (await app.getObject(modelId));
+      return m;
     }
+    const p = Promise.resolve(sessionModel || fetchObject(qId));
+    p.then(m => {
+      storeModel(m);
+      setModel(m);
+    });
   }, []);
   return model;
 }
@@ -21911,7 +22265,8 @@ function Header(_ref2) {
       show: showPopoverToolbar,
       anchorEl
     },
-    focusHandler: focusHandler
+    focusHandler: focusHandler,
+    layout: layout
   });
   return /*#__PURE__*/React__default.createElement(StyledGrid$1, {
     ref: containerRef,
@@ -23589,11 +23944,17 @@ function useState(initial) {
 }
 
 /**
+ * Callback function that should return a function that in turns gets
+ * called before the hook runs again or when the component is destroyed.
+ * For example to remove any listeners added in the callback itself.
  * @typedef {function():(void | function():void)} EffectCallback
  */
 
 /**
  * Triggers a callback function when a dependent value changes.
+ *
+ * Omitting the dependency array will have the hook run on each update
+ * and an empty dependency array runs only once.
  * @entry
  * @param {EffectCallback} effect - The callback.
  * @param {Array<any>=} deps - The dependencies that should trigger the callback.
@@ -23606,6 +23967,15 @@ function useState(initial) {
  *     console.log('unmounted');
  *   };
  * }, []);
+ *
+ * useEffect(() => {
+ *   const clickHandler = () => { console.log('click') };
+ *   const button = element.querySelector('.button');
+ *   button.addEventListener('click', clickHandler);
+ *   return () => {
+ *     button.removeEventListener('click', clickHandler);
+ *   };
+ * }, []);
  */
 function useEffect(cb, deps) {
   {
@@ -23665,17 +24035,20 @@ function useMemo(fn, deps) {
 
 /**
  * Runs a callback function when a dependent changes.
+ *
+ * Useful for async operations that otherwise cause no side effects.
+ * Do not add for example listeners withing the callback as there is no teardown function.
  * @entry
  * @template P
  * @param {function():Promise<P>} factory - The factory function that calls the promise.
  * @param {Array<any>=} deps - The dependencies.
- * @returns {Array<P,Error>} The resolved value.
+ * @returns {Array<P,Error>} The resolved value or rejected error
  * @example
  * import { usePromise } from '@nebula.js/stardust';
  * import { useModel } from '@nebula.js/stardust';
  * // ...
  * const model = useModel();
- * const [resolved, rejected] = usePromise(() => model.getLayout(), []);
+ * const [resolved, rejected] = usePromise(() => model.getLayout(), [model]);
  */
 function usePromise(p, deps) {
   const [obj, setObj] = useState(() => ({
@@ -28274,7 +28647,7 @@ const DEFAULT_SNAPSHOT_CONFIG = /** @lends SnapshotConfiguration */{
 
 /**
  * @interface Configuration
- * @property {LoadType=} load Fallback load function for missing types
+ * @property {Function(LoadType):Promise<Visualization>=} 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
@@ -28693,6 +29066,7 @@ function nuked() {
            * @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, using the toggle button or when in selection: false|true|toggle
+           * @param {boolean=} [options.showLock=false] Show the button for toggling locked state.
            * @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)