@nebula.js/stardust 5.1.2 → 5.3.0

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v5.1.2
+* @nebula.js/stardust v5.3.0
 * Copyright (c) 2024 QlikTech International AB
 * Released under the MIT license.
 */
@@ -753,8 +753,8 @@ function _objectWithoutProperties(e, t) {
     r,
     i = _objectWithoutPropertiesLoose$2(e, t);
   if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+    var s = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
   }
   return i;
 }
@@ -762,7 +762,7 @@ function _objectWithoutPropertiesLoose$2(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.indexOf(n) >= 0) continue;
+    if (e.includes(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -1954,6 +1954,12 @@ var Visualization_UnfulfilledCalculationCondition = {
 		"zh-TW": "不符計算條件"
 	}
 };
+var Listbox_Clear_Search = {
+	id: "Listbox.Clear.Search",
+	locale: {
+		"en-US": "Clear search"
+	}
+};
 var all = {
 	Cancel: Cancel$1,
 	CurrentSelections_All: CurrentSelections_All,
@@ -2008,7 +2014,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,
+	Listbox_Clear_Search: Listbox_Clear_Search
 };
 
 function appLocaleFn(language) {
@@ -5244,7 +5251,7 @@ function GlobalStyles(props) {
 }
 
 /**
- * @mui/styled-engine v5.15.14
+ * @mui/styled-engine v5.16.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -5342,11 +5349,9 @@ function deepmerge$1(target, source, options = {
   const output = options.clone ? _extends$3({}, target) : target;
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(key => {
+      if (isPlainObject(source[key]) &&
       // Avoid prototype pollution
-      if (key === '__proto__') {
-        return;
-      }
-      if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {
+      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
         // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
         output[key] = deepmerge$1(target[key], source[key], options);
       } else if (options.clone) {
@@ -6726,36 +6731,6 @@ function resolveProps(defaultProps, props) {
   return output;
 }
 
-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,
-  themeId
-}) {
-  let theme = useTheme$3(defaultTheme);
-  if (themeId) {
-    theme = theme[themeId] || theme;
-  }
-  const mergedProps = getThemeProps({
-    theme,
-    name,
-    props
-  });
-  return mergedProps;
-}
-
 /**
  * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
  * This is useful for effects that are only needed for client-side rendering but not for SSR.
@@ -7225,6 +7200,50 @@ function RtlProvider(_ref) {
   }, props));
 }
 
+const PropsContext = /*#__PURE__*/React.createContext(undefined);
+function DefaultPropsProvider({
+  value,
+  children
+}) {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(PropsContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+function getThemeProps(params) {
+  const {
+    theme,
+    name,
+    props
+  } = params;
+  if (!theme || !theme.components || !theme.components[name]) {
+    return props;
+  }
+  const config = theme.components[name];
+  if (config.defaultProps) {
+    // compatible with v5 signature
+    return resolveProps(config.defaultProps, props);
+  }
+  if (!config.styleOverrides && !config.variants) {
+    // v6 signature, no property 'defaultProps'
+    return resolveProps(config, props);
+  }
+  return props;
+}
+function useDefaultProps$1({
+  props,
+  name
+}) {
+  const ctx = React.useContext(PropsContext);
+  return getThemeProps({
+    props,
+    name,
+    theme: {
+      components: ctx
+    }
+  });
+}
+
 const EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
   return React.useMemo(() => {
@@ -7271,7 +7290,10 @@ function ThemeProvider$1(props) {
       value: engineTheme,
       children: /*#__PURE__*/jsxRuntimeExports.jsx(RtlProvider, {
         value: rtlValue,
-        children: children
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(DefaultPropsProvider, {
+          value: engineTheme == null ? void 0 : engineTheme.components,
+          children: children
+        })
       })
     })
   });
@@ -8352,18 +8374,6 @@ function useTheme$1() {
   return theme[THEME_ID] || theme;
 }
 
-function useThemeProps({
-  props,
-  name
-}) {
-  return useThemeProps$1({
-    props,
-    name,
-    defaultTheme,
-    themeId: THEME_ID
-  });
-}
-
 var createStyled$1 = {};
 
 var _extends$1 = {exports: {}};
@@ -8689,6 +8699,10 @@ function ThemeProvider(_ref) {
   }));
 }
 
+function useDefaultProps(params) {
+  return useDefaultProps$1(params);
+}
+
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -9067,7 +9081,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "4acd" ;
+const NEBULA_VERSION_HASH = "b434";
 ClassNameGenerator.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -9299,7 +9313,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "5.1.2" );
+  element.setAttribute('data-nebulajs-version', "5.3.0");
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -11309,6 +11323,78 @@ const KEYS = Object.freeze({
   isArrow: key => key === KEYS.ARROW_UP || key === KEYS.ARROW_DOWN || key === KEYS.ARROW_LEFT || key === KEYS.ARROW_RIGHT
 });
 
+function removeInnnerTabStops(container) {
+  container === null || container === void 0 || container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
+    elm.setAttribute('tabIndex', -1);
+  });
+}
+function removeLastFocused(container) {
+  container === null || container === void 0 || container.querySelectorAll('.last-focused').forEach(elm => {
+    elm.classList.remove('last-focused');
+  });
+}
+function getVizCell(container) {
+  return (container === null || container === void 0 ? void 0 : container.closest('.njs-cell')) || (container === null || container === void 0 ? void 0 : container.closest('.qv-gridcell')) || (container === null || container === void 0 ? void 0 : container.closest('.qv-gs-listbox'));
+}
+
+// Emulate the keyboard hook, until we support it in the Listbox.
+function useTempKeyboard(_ref) {
+  let {
+    containerRef,
+    enabled
+  } = _ref;
+  const [keyboardActive, setKeyboardActive] = useState$1(false);
+  const keyboard = {
+    enabled,
+    active: keyboardActive,
+    // innerTabStops: whether keyboard permits inner tab stops
+    // (inner = everything inside .listbox-container)
+
+    innerTabStops: !enabled || keyboardActive,
+    blur(resetFocus) {
+      var _containerRef$current;
+      if (!enabled) {
+        return;
+      }
+      setKeyboardActive(false);
+      const vizCell = getVizCell(containerRef.current) || ((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.parentElement);
+      removeInnnerTabStops(containerRef.current);
+      removeLastFocused(containerRef.current);
+      if (resetFocus && vizCell) {
+        // Move focus to the viz's cell.
+        vizCell.setAttribute('tabIndex', 0);
+        containerRef.current.setAttribute('tabIndex', -1);
+        vizCell.focus();
+      }
+    },
+    focus() {
+      if (!enabled) {
+        return;
+      }
+      setKeyboardActive(true);
+      const c = containerRef.current;
+      const searchField = c === null || c === void 0 ? void 0 : c.querySelector('.search input');
+      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 unlockCoverButton = c === null || c === void 0 ? void 0 : c.querySelector('#listbox-unlock-button');
+      const cyclicButton = c === null || c === void 0 ? void 0 : c.querySelector('.listbox-cyclic-button');
+      const elementToFocus = cyclicButton || 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:not(:disabled)');
+      const btnToFocus = unlockCoverButton || confirmButton;
+      btnToFocus === null || btnToFocus === void 0 || btnToFocus.setAttribute('tabIndex', 0);
+      btnToFocus === null || btnToFocus === void 0 || btnToFocus.focus();
+      return btnToFocus;
+    }
+  };
+  return keyboard;
+}
+
 const getElementIndex = currentTarget => +currentTarget.getAttribute('data-n');
 const focusSearch = container => {
   const searchField = container === null || container === void 0 ? void 0 : container.querySelector('.search input');
@@ -11316,10 +11402,49 @@ const focusSearch = container => {
   return searchField;
 };
 const focusRow = container => {
-  const row = container === null || container === void 0 ? void 0 : container.querySelector('.value.last-focused, .value.selector, .value');
-  row === null || row === void 0 || row.setAttribute('tabIndex', 0);
-  row === null || row === void 0 || row.focus();
-  return row;
+  const lastFocusedRow = container === null || container === void 0 ? void 0 : container.querySelector('.value.last-focused');
+  const selectorRow = container === null || container === void 0 ? void 0 : container.querySelector('.value.selector');
+  const row = container === null || container === void 0 ? void 0 : container.querySelector('.value');
+  const rowToFocus = lastFocusedRow || selectorRow || row;
+  rowToFocus === null || rowToFocus === void 0 || rowToFocus.setAttribute('tabIndex', 0);
+  rowToFocus === null || rowToFocus === void 0 || rowToFocus.focus();
+  removeLastFocused(container);
+  return rowToFocus;
+};
+const focusCyclicButton = container => {
+  const button = container === null || container === void 0 ? void 0 : container.querySelector('.listbox-cyclic-button:not(:disabled)');
+  button === null || button === void 0 || button.setAttribute('tabIndex', 0);
+  button === null || button === void 0 || button.focus();
+  return button;
+};
+const blur$1 = (event, keyboard) => {
+  if (!keyboard.enabled) return;
+  const {
+    currentTarget,
+    target
+  } = event;
+  const isFocusedOnListbox = target.classList.contains('listbox-container');
+  const container = currentTarget.closest('.listbox-container');
+  const vizCell = getVizCell(container);
+  const isSingleListbox = (vizCell === null || vizCell === void 0 ? void 0 : vizCell.querySelectorAll('.listbox-container').length) === 1;
+  if (isFocusedOnListbox || isSingleListbox) {
+    // Move the focus from listbox container to the viz container.
+    keyboard.blur(true);
+  } else {
+    // More than one listbox: Move focus from row to listbox container.
+
+    // 1. Remove last-focused class from row siblings.
+    removeLastFocused(container);
+
+    // 2. Add last-focused class so we can re-focus it later.
+    currentTarget.classList.add('last-focused');
+
+    // 3. Blur row and focus the listbox container.
+    keyboard.blur();
+    const c = currentTarget.closest('.listbox-container');
+    c.setAttribute('tabIndex', -1);
+    c === null || c === void 0 || c.focus();
+  }
 };
 
 // Find next item index to focus in the dom element list on key up and key down
@@ -11432,28 +11557,33 @@ function getRowsKeyboardNavigation(_ref) {
         {
           // Try to focus search field, otherwise confirm button.
           const container = currentTarget.closest('.listbox-container');
-          const inSelection = isModal();
-
+          const inSelection = typeof isModal !== 'undefined' ? isModal() : undefined;
           // TODO: use a store to keep track of this row.
           currentTarget.classList.add('last-focused'); // so that we can go back here when we tab back
 
+          const useDefaultBrowserSupport = !(keyboard !== null && keyboard !== void 0 && keyboard.enabled);
+          if (useDefaultBrowserSupport) {
+            if (!inSelection) return;
+            keyboard.focusSelection();
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+          }
           if (shiftKey) {
-            if (!focusSearch(container)) {
+            if (!focusSearch(container) && !focusCyclicButton(container)) {
               if (inSelection) {
                 keyboard.focusSelection();
               } else {
-                keyboard.blur(true);
+                blur$1(event, keyboard);
               }
             }
             break;
           }
 
           // Without shift key
-          if (inSelection) {
-            keyboard.focusSelection();
-          } else {
+          if (!keyboard.focusSelection() && !focusCyclicButton(container) && !focusSearch(container)) {
             currentTarget.blur();
-            keyboard.blur();
+            blur$1(event, keyboard);
           }
           break;
         }
@@ -11493,6 +11623,10 @@ function getRowsKeyboardNavigation(_ref) {
         }
         break;
       case KEYS.ESCAPE:
+        if (typeof isModal === 'undefined') {
+          cancel();
+          return;
+        }
         if (isModal()) {
           cancel();
         } else {
@@ -13994,7 +14128,7 @@ function ListBoxDisclaimer(_ref2) {
   }, translatorDynamic.get(text)));
 }
 
-var Close = {};
+var Close$1 = {};
 
 var interopRequireDefault = {exports: {}};
 
@@ -14069,7 +14203,7 @@ const SvgIconRoot = styled('svg', {
   };
 });
 const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiSvgIcon'
   });
@@ -14185,13 +14319,13 @@ function requireCreateSvgIcon () {
 }
 
 var _interopRequireDefault = interopRequireDefaultExports;
-Object.defineProperty(Close, "__esModule", {
+Object.defineProperty(Close$1, "__esModule", {
   value: true
 });
-var default_1 = Close.default = void 0;
+var default_1 = Close$1.default = void 0;
 var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
 var _jsxRuntime = jsxRuntimeExports;
-default_1 = Close.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+default_1 = Close$1.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');
 
@@ -14838,11 +14972,18 @@ var createListboxSelectionToolbar = (_ref => {
     model,
     translator,
     selectionState,
-    isDirectQuery = false
+    isDirectQuery = false,
+    selections
   } = _ref;
   if (layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne) {
     return [];
   }
+  const path = '/qListObjectDef';
+  const activateSelection = () => {
+    if (!selections.isActive()) {
+      selections.begin(path);
+    }
+  };
   const canSelectAll = () => ['qOption', 'qAlternative', 'qExcluded', 'qDeselected'].some(sc => layout.qListObject.qDimensionInfo.qStateCounts[sc] > 0);
   const canSelectPossible = () => ['qOption'].some(sc => layout.qListObject.qDimensionInfo.qStateCounts[sc] > 0);
   const canSelectAlternative = () => ['qAlternative'].some(sc => layout.qListObject.qDimensionInfo.qStateCounts[sc] > 0);
@@ -14854,8 +14995,9 @@ var createListboxSelectionToolbar = (_ref => {
     getSvgIconShape: selectAll,
     enabled: canSelectAll,
     action: () => {
+      activateSelection();
       selectionState.clearItemStates(false);
-      model.selectListObjectAll('/qListObjectDef');
+      model.selectListObjectAll(path);
     }
   }, {
     key: 'selectPossible',
@@ -14864,8 +15006,9 @@ var createListboxSelectionToolbar = (_ref => {
     getSvgIconShape: selectPossible,
     enabled: canSelectPossible,
     action: () => {
+      activateSelection();
       selectionState.clearItemStates(false);
-      model.selectListObjectPossible('/qListObjectDef');
+      model.selectListObjectPossible(path);
     }
   }, isDirectQuery ? false : {
     key: 'selectAlternative',
@@ -14874,8 +15017,9 @@ var createListboxSelectionToolbar = (_ref => {
     getSvgIconShape: selectAlternative,
     enabled: canSelectAlternative,
     action: () => {
+      activateSelection();
       selectionState.clearItemStates(false);
-      model.selectListObjectAlternative('/qListObjectDef');
+      model.selectListObjectAlternative(path);
     }
   }, isDirectQuery ? false : {
     key: 'selectExcluded',
@@ -14884,8 +15028,9 @@ var createListboxSelectionToolbar = (_ref => {
     getSvgIconShape: selectExcluded,
     enabled: canSelectExcluded,
     action: () => {
+      activateSelection();
       selectionState.clearItemStates(false);
-      model.selectListObjectExcluded('/qListObjectDef');
+      model.selectListObjectExcluded(path);
     }
   }].filter(Boolean);
 });
@@ -14975,6 +15120,7 @@ const close = props => _objectSpread2(_objectSpread2({}, props), {}, {
     }
   }]
 });
+var Close = (props => SvgIcon$1(close(props)));
 
 const clearSelections = props => _objectSpread2(_objectSpread2({}, props), {}, {
   shapes: [{
@@ -15362,7 +15508,7 @@ function ActionsToolbar(_ref3) {
     moreEnabled = true;
     moreActions = [...newMoreActions, ...more$1.actions];
   }
-  if (!selections.show && newActions.length === 0) return null;
+  if (!selections.show && newActions.length === 0 && !moreEnabled) return null;
   const handleCloseShowMoreItems = () => {
     setShowMoreItems(false);
   };
@@ -15466,7 +15612,6 @@ const StyledOutlinedInput = styled(OutlinedInput, {
   shouldForwardProp: p => !['styles', 'dense', 'isRtl'].includes(p)
 })(_ref => {
   let {
-    theme,
     styles,
     dense,
     isRtl
@@ -15475,10 +15620,11 @@ const StyledOutlinedInput = styled(OutlinedInput, {
   if (dense) {
     denseProps = {
       fontSize: 12,
-      paddingLeft: theme.spacing(1),
       '& input': {
         paddingTop: '5px',
-        paddingBottom: '5px'
+        paddingBottom: '5px',
+        color: styles.search.color,
+        textAlign: isRtl ? 'right' : 'left'
       }
     };
   }
@@ -15489,7 +15635,8 @@ const StyledOutlinedInput = styled(OutlinedInput, {
     borderRadius: 0,
     backgroundColor: styles.search.backgroundColor,
     backdropFilter: styles.background.backgroundImage ? styles.search.backdropFilter : undefined,
-    paddingLeft: "".concat(CELL_PADDING_LEFT, "px"),
+    paddingLeft: 0,
+    paddingRight: 0,
     flexDirection: isRtl ? 'row-reverse' : 'row',
     '& fieldset': {
       borderColor: "".concat(styles.search.borderColor),
@@ -15509,8 +15656,22 @@ const StyledOutlinedInput = styled(OutlinedInput, {
     }
   }, denseProps);
 });
+const StyledIconButton = styled(IconButton)(() => ({
+  border: 0,
+  padding: '8px',
+  cursor: 'pointer',
+  lineHeight: '12px',
+  '&:hover': {
+    backgroundColor: 'transparent'
+  },
+  ':focus-visible': {
+    borderRadius: '4px',
+    boxShadow: 'inset 0 0 0 2px rgb(2, 117, 217)'
+  }
+}));
 function ListBoxSearch(_ref2) {
   let {
+    popoverOpen,
     selections,
     selectionState,
     model,
@@ -15518,6 +15679,7 @@ function ListBoxSearch(_ref2) {
     dense = false,
     visible = true,
     autoFocus = true,
+    beginSelectionOnFocus = true,
     wildCardSearch = false,
     searchEnabled,
     direction,
@@ -15530,6 +15692,8 @@ function ListBoxSearch(_ref2) {
   const [value, setValue] = useState$1('');
   const [wildcardOn, setWildcardOn] = useState$1(false);
   const inputRef = useRef();
+  const clearSearchRef = useRef();
+  const clearSearchText = translator.get('Listbox.Clear.Search');
   const {
     getStoreValue,
     setStoreValue
@@ -15573,11 +15737,20 @@ function ListBoxSearch(_ref2) {
     }
     return model.searchListObjectFor(TREE_PATH, searchValue);
   };
+  const beginSelection = () => {
+    const shouldBeginSelection = !selectionState.selectDisabled() && !selections.isModal();
+    if (shouldBeginSelection) {
+      selections.begin('/qListObjectDef');
+    }
+  };
   const handleFocus = () => {
     if (wildCardSearch) {
       setValue(WILDCARD);
       setWildcardOn(true);
     }
+    if (beginSelectionOnFocus) {
+      beginSelection();
+    }
   };
   const hasHits = () => {
     const listCount = getStoreValue("listCount");
@@ -15599,11 +15772,6 @@ function ListBoxSearch(_ref2) {
     }
     return response;
   };
-  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 === null || row === void 0 || row.setAttribute('tabIndex', 0);
-    row === null || row === void 0 || row.focus();
-  }
   const onKeyDown = async e => {
     const {
       currentTarget
@@ -15617,20 +15785,22 @@ function ListBoxSearch(_ref2) {
         {
           focusRow(container);
           cancel();
+          if (popoverOpen) {
+            return undefined;
+          }
           break;
         }
       case 'Tab':
         {
           if (e.shiftKey) {
-            keyboard.focusSelection();
+            if (!focusCyclicButton(container)) {
+              keyboard.focusSelection();
+            }
+          } else if (clearSearchRef.current) {
+            clearSearchRef.current.focus();
           } else {
             // Focus the row we last visited or the first one.
             focusRow(container);
-
-            // Clean up.
-            container === null || container === void 0 || container.querySelectorAll('.last-focused').forEach(elm => {
-              elm.classList.remove('last-focused');
-            });
           }
           break;
         }
@@ -15653,6 +15823,37 @@ function ListBoxSearch(_ref2) {
     e.stopPropagation();
     return undefined;
   };
+  const focusOnInput = () => {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+  };
+  const onClearSearch = () => {
+    abortSearch();
+    focusOnInput();
+  };
+  const onKeyDownClearSearch = async e => {
+    const container = e.currentTarget.closest('.listbox-container');
+    switch (e.key) {
+      case 'Enter':
+        onClearSearch();
+        break;
+      case 'Tab':
+        {
+          if (e.shiftKey) {
+            focusOnInput();
+          } else {
+            // Focus the row we last visited or the first one.
+            focusRow(container);
+          }
+          break;
+        }
+      default:
+        return undefined;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    return undefined;
+  };
   if (!visible || searchEnabled === false) {
     return null;
   }
@@ -15661,10 +15862,28 @@ function ListBoxSearch(_ref2) {
     dense: dense,
     isRtl: isRtl,
     startAdornment: /*#__PURE__*/React__default.createElement(InputAdornment, {
-      position: "start"
+      position: "start",
+      sx: {
+        marginLeft: dense ? '8px' : "".concat(CELL_PADDING_LEFT, "px")
+      }
     }, /*#__PURE__*/React__default.createElement(SearchIcon, {
       size: dense ? 'small' : 'normal'
     })),
+    endAdornment: /*#__PURE__*/React__default.createElement(InputAdornment, {
+      position: "end",
+      sx: {
+        marginLeft: 0
+      }
+    }, value !== '' && /*#__PURE__*/React__default.createElement(StyledIconButton, {
+      tabIndex: 0,
+      ref: clearSearchRef,
+      title: clearSearchText,
+      "aria-label": clearSearchText,
+      onClick: onClearSearch,
+      onKeyDown: onKeyDownClearSearch
+    }, /*#__PURE__*/React__default.createElement(Close, {
+      size: dense ? 'small' : 'normal'
+    }))),
     className: "search",
     inputRef: inputRef,
     size: "small",
@@ -18003,6 +18222,13 @@ const LIGHT = '#FFF';
 const DARK = '#000';
 const CONTRAST_THRESHOLD = 1.5;
 const LIGHT_PREFERRED_THRESHOLD = 3;
+const DEFAULT_SELECTION_COLORS = {
+  selected: '#009845',
+  alternative: '#E4E4E4',
+  excluded: '#A9A9A9',
+  selectedExcluded: '#A9A9A9',
+  possible: '#FFFFFF'
+};
 const getContrast = (desired, background) => {
   let contrast = false;
   const des = new Color(desired);
@@ -18054,52 +18280,35 @@ function getOverridesAsObject() {
   return overrides;
 }
 function getSelectionColors(_ref) {
-  var _overrides$theme, _theme$palette, _overrides$theme$cont, _overrides$theme2, _overrides$selections, _theme$palette2, _theme$palette3, _theme$palette4, _theme$palette5, _theme$palette6, _theme$palette7, _theme$palette8, _theme$palette9, _theme$palette10, _theme$palette11;
+  var _overrides$theme, _theme$palette, _overrides$theme$cont, _overrides$theme2, _overrides$selections;
   let {
     getColorPickerColor,
     theme,
     getListboxStyle,
     overrides,
-    checkboxes
+    checkboxes,
+    themeSelectionColorsEnabled
   } = _ref;
   const componentContentTextColor = (_overrides$theme = overrides.theme) === null || _overrides$theme === void 0 || (_overrides$theme = _overrides$theme.content) === null || _overrides$theme === void 0 ? void 0 : _overrides$theme.fontColor;
+
+  // color priority: layout.component > theme content color > MUI theme
   const desiredTextColor = getColorPickerColor(componentContentTextColor) || getListboxStyle('content', 'color') || ((_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.text.primary);
   const useContrastTextColor = !checkboxes && ((_overrides$theme$cont = (_overrides$theme2 = overrides.theme) === null || _overrides$theme2 === void 0 || (_overrides$theme2 = _overrides$theme2.content) === null || _overrides$theme2 === void 0 ? void 0 : _overrides$theme2.useContrastColor) !== null && _overrides$theme$cont !== void 0 ? _overrides$theme$cont : true);
-
-  // Background colors
-  const selectionColors = ((_overrides$selections = overrides.selections) === null || _overrides$selections === void 0 ? void 0 : _overrides$selections.colors) || {};
-  const selected = getColorPickerColor(selectionColors.selected) || ((_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.selected.main) || '#009845';
-  const alternative = getColorPickerColor(selectionColors.alternative) || ((_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.selected.alternative) || '#E4E4E4';
-  const excluded = getColorPickerColor(selectionColors.excluded) || ((_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.selected.excluded) || '#A9A9A9';
-  const selectedExcluded = getColorPickerColor(selectionColors.selectedExcluded) || ((_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.selected.selectedExcluded) || '#A9A9A9';
-  const possible = getColorPickerColor(selectionColors.possible) || getListboxStyle('', 'backgroundColor') || ((_theme$palette6 = theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.selected.possible) || '#FFFFFF';
-
-  // Font colors
-  let selectedContrast = desiredTextColor || ((_theme$palette7 = theme.palette) === null || _theme$palette7 === void 0 ? void 0 : _theme$palette7.selected.selectedContrastText);
-  let alternativeContrast = desiredTextColor || ((_theme$palette8 = theme.palette) === null || _theme$palette8 === void 0 ? void 0 : _theme$palette8.selected.alternativeContrastText);
-  let excludedContrast = desiredTextColor || ((_theme$palette9 = theme.palette) === null || _theme$palette9 === void 0 ? void 0 : _theme$palette9.selected.excludedContrastText);
-  let selectedExcludedContrast = desiredTextColor || ((_theme$palette10 = theme.palette) === null || _theme$palette10 === void 0 ? void 0 : _theme$palette10.selected.selectedExcludedContrastText);
-  let possibleContrast = desiredTextColor || ((_theme$palette11 = theme.palette) === null || _theme$palette11 === void 0 ? void 0 : _theme$palette11.selected.possibleContrastText);
-  if (useContrastTextColor) {
-    // Override preferred text color if it does not contrast enough with the background color.
-    selectedContrast = getContrastingColor(selected, desiredTextColor);
-    alternativeContrast = getContrastingColor(alternative, desiredTextColor);
-    excludedContrast = getContrastingColor(excluded, desiredTextColor);
-    selectedExcludedContrast = getContrastingColor(selectedExcluded, desiredTextColor);
-    possibleContrast = getContrastingColor(possible, desiredTextColor);
-  }
-  return {
-    selected,
-    alternative,
-    excluded,
-    selectedExcluded,
-    possible,
-    selectedContrast,
-    alternativeContrast,
-    excludedContrast,
-    selectedExcludedContrast,
-    possibleContrast
+  const getSelectionThemeColor = state => themeSelectionColorsEnabled ? getListboxStyle('', "dataColors.".concat(state)) : undefined;
+  const componentSelectionColors = ((_overrides$selections = overrides.selections) === null || _overrides$selections === void 0 ? void 0 : _overrides$selections.colors) || {};
+  const getSelectionStateColors = state => {
+    var _theme$palette2, _theme$palette3;
+    const paletteState = state === 'selected' ? 'main' : state;
+    const contrastState = "".concat(state, "Contrast");
+    // color priority: layout.component > theme dataColors > theme background (only for 'possible') > MUI theme > hardcoded default
+    const color = getColorPickerColor(componentSelectionColors[state]) || getSelectionThemeColor(state) || state === 'possible' && getListboxStyle('', 'backgroundColor') || ((_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.selected[paletteState]) || DEFAULT_SELECTION_COLORS[state];
+    const contrastColor = useContrastTextColor ? getContrastingColor(color, desiredTextColor) : desiredTextColor || ((_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.selected["".concat(contrastState, "Text}")]);
+    return {
+      [state]: color,
+      [contrastState]: contrastColor
+    };
   };
+  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, getSelectionStateColors('selected')), getSelectionStateColors('alternative')), getSelectionStateColors('excluded')), getSelectionStateColors('selectedExcluded')), getSelectionStateColors('possible'));
 }
 function getBackgroundColor(_ref2) {
   let {
@@ -18137,7 +18346,8 @@ function getStyles(_ref3) {
     themeApi,
     theme,
     components = [],
-    checkboxes = false
+    checkboxes = false,
+    themeSelectionColorsEnabled = false
   } = _ref3;
   const overrides = getOverridesAsObject(components);
   const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
@@ -18147,7 +18357,8 @@ function getStyles(_ref3) {
     theme,
     getListboxStyle,
     overrides,
-    checkboxes
+    checkboxes,
+    themeSelectionColorsEnabled
   });
   const themeOverrides = overrides.theme || {};
   const headerColor = getColorPickerColor((_themeOverrides$heade = themeOverrides.header) === null || _themeOverrides$heade === void 0 ? void 0 : _themeOverrides$heade.fontColor) || getListboxStyle('title.main', 'color');
@@ -18221,7 +18432,8 @@ function ListBoxPopover(_ref) {
     autoFocus,
     components,
     checkboxes: checkboxesOption,
-    selectDisabled = () => false
+    selectDisabled = () => false,
+    flags
   } = _ref;
   const isMasterDim = Boolean(fieldName === null || fieldName === void 0 ? void 0 : fieldName.qLibraryId);
   const open = show && Boolean(alignTo.current);
@@ -18261,7 +18473,8 @@ function ListBoxPopover(_ref) {
   }, [model]);
   const {
     translator,
-    themeApi
+    themeApi,
+    keyboardNavigation
   } = useContext(InstanceContext);
   const moreAlignTo = useRef();
   const containerRef = useRef();
@@ -18270,14 +18483,20 @@ function ListBoxPopover(_ref) {
   const [selectionState$1] = useState$1(() => selectionState({
     selectDisabled
   }));
+  const keyboard = useTempKeyboard({
+    containerRef,
+    enabled: keyboardNavigation
+  });
   const {
     checkboxes = checkboxesOption
   } = layout || {};
+  const themeSelectionColorsEnabled = flags === null || flags === void 0 ? void 0 : flags.isEnabled('PS_22149_THEME_SELECTION_COLORS');
   const styles = getStyles({
     themeApi,
     theme,
     components,
-    checkboxes
+    checkboxes,
+    themeSelectionColorsEnabled
   });
   useEffect$1(() => {
     if (selections && open) {
@@ -18299,7 +18518,8 @@ function ListBoxPopover(_ref) {
     layout,
     model,
     translator,
-    selectionState: selectionState$1
+    selectionState: selectionState$1,
+    selections
   });
   const onCtrlF = () => {
     const input = searchContainerRef.current.querySelector('input');
@@ -18307,6 +18527,7 @@ function ListBoxPopover(_ref) {
   };
   const hasSelections$1 = hasSelections(layout);
   return /*#__PURE__*/React__default.createElement(Popover, {
+    className: "listbox-container",
     open: open,
     onClose: popoverClose,
     anchorEl: alignTo.current,
@@ -18379,6 +18600,7 @@ function ListBoxPopover(_ref) {
     item: true,
     ref: searchContainerRef
   }, /*#__PURE__*/React__default.createElement(ListBoxSearch, {
+    popoverOpen: open,
     styles: styles,
     visible: true,
     model: model,
@@ -18386,7 +18608,9 @@ function ListBoxPopover(_ref) {
     selections: selections,
     selectionState: selectionState$1,
     keyboard: {
-      enabled: false
+      enabled: false,
+      innerTabStops: true,
+      focusSelection: keyboard.focusSelection
     },
     autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : true
   })), /*#__PURE__*/React__default.createElement(ListBox, {
@@ -18398,7 +18622,8 @@ function ListBoxPopover(_ref) {
     direction: "ltr",
     onSetListCount: c => setListCount(c),
     onCtrlF: onCtrlF,
-    styles: styles
+    styles: styles,
+    keyboard: keyboard
   }))));
 }
 
@@ -19555,114 +19780,17 @@ class AutoSizer extends Component {
   }
 }
 
-function removeInnnerTabStops(container) {
-  container === null || container === void 0 || container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
-    elm.setAttribute('tabIndex', -1);
-  });
-}
-function removeLastFocused(container) {
-  container === null || container === void 0 || container.querySelectorAll('.last-focused').forEach(elm => {
-    elm.classList.remove('last-focused');
-  });
-}
-function getVizCell(container) {
-  return (container === null || container === void 0 ? void 0 : container.closest('.njs-cell')) || (container === null || container === void 0 ? void 0 : container.closest('.qv-gridcell'));
-}
-
-// Emulate the keyboard hook, until we support it in the Listbox.
-function useTempKeyboard(_ref) {
-  let {
-    containerRef,
-    enabled
-  } = _ref;
-  const [keyboardActive, setKeyboardActive] = useState$1(false);
-  const keyboard = {
-    enabled,
-    active: keyboardActive,
-    // innerTabStops: whether keyboard permits inner tab stops
-    // (inner = everything inside .listbox-container)
-
-    innerTabStops: !enabled || keyboardActive,
-    blur(resetFocus) {
-      var _containerRef$current;
-      if (!enabled) {
-        return;
-      }
-      setKeyboardActive(false);
-      const vizCell = getVizCell(containerRef.current) || ((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.parentElement);
-      removeInnnerTabStops(containerRef.current);
-      removeLastFocused(containerRef.current);
-      if (resetFocus && vizCell) {
-        // Move focus to the viz's cell.
-        vizCell.setAttribute('tabIndex', 0);
-        vizCell.focus();
-      }
-    },
-    focus() {
-      if (!enabled) {
-        return;
-      }
-      setKeyboardActive(true);
-      const c = containerRef.current;
-      const searchField = c === null || c === void 0 ? void 0 : c.querySelector('.search input');
-      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 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');
-      const btnToFocus = unlockCoverButton || confirmButton;
-      btnToFocus === null || btnToFocus === void 0 || btnToFocus.setAttribute('tabIndex', 0);
-      btnToFocus === null || btnToFocus === void 0 || btnToFocus.focus();
-    }
-  };
-  return keyboard;
-}
-
 /* eslint-disable no-param-reassign */
 function getListboxContainerKeyboardNavigation(_ref) {
   let {
     keyboard,
     hovering,
     updateKeyScroll,
-    containerRef,
     currentScrollIndex,
     isModal,
-    constraints
+    constraints,
+    selections
   } = _ref;
-  const blur = event => {
-    const {
-      currentTarget,
-      target
-    } = event;
-    const isFocusedOnListbox = target.classList.contains('listbox-container');
-    const container = currentTarget.closest('.listbox-container');
-    const vizCell = getVizCell(container);
-    const isSingleListbox = (vizCell === null || vizCell === void 0 ? void 0 : vizCell.querySelectorAll('.listbox-container').length) === 1;
-    if (isFocusedOnListbox || isSingleListbox) {
-      // Move the focus from listbox container to the viz container.
-      keyboard.blur(true);
-    } else {
-      // More than one listbox: Move focus from row to listbox container.
-
-      // 1. Remove last-focused class from row siblings.
-      removeLastFocused(containerRef.current);
-
-      // 2. Add last-focused class so we can re-focus it later.
-      currentTarget.classList.add('last-focused');
-
-      // 3. Blur row and focus the listbox container.
-      keyboard.blur();
-      const c = currentTarget.closest('.listbox-container');
-      c.setAttribute('tabIndex', -1);
-      c === null || c === void 0 || c.focus();
-    }
-  };
   const handleKeyDown = event => {
     const {
       keyCode,
@@ -19680,16 +19808,18 @@ function getListboxContainerKeyboardNavigation(_ref) {
     const inSelection = isModal();
     switch (keyCode) {
       case KEYS.TAB:
-        if (inSelection) {
-          if (shiftKey) {
-            focusRow(container) || focusSearch(container);
-          } else {
-            focusSearch(container) || focusRow(container);
+        //  Only react to tab after enter/space have been pressed or the target element is inside listbox (mouse case) or target is selection toolbar
+        if (document.activeElement === container || !inSelection && !container.contains(document.activeElement)) return;
+        if (shiftKey) {
+          const focused = focusRow(container) || focusSearch(container);
+          if (!focused) {
+            blur$1(event, keyboard);
           }
-        } else if (shiftKey) {
-          keyboard.blur(true);
         } else {
-          break;
+          const focused = focusCyclicButton(container) || focusSearch(container) || focusRow(container);
+          if (!focused) {
+            break;
+          }
         }
         prevent();
         break;
@@ -19702,7 +19832,10 @@ function getListboxContainerKeyboardNavigation(_ref) {
         prevent();
         break;
       case KEYS.ESCAPE:
-        blur(event);
+        blur$1(event, keyboard);
+        if (selections.isActive()) {
+          selections.cancel();
+        }
         break;
     }
   };
@@ -20019,7 +20152,8 @@ const createDimensionIconData = _ref => {
     app,
     selections,
     isPopover,
-    active
+    active,
+    keyboard
   } = _ref;
   switch (dimInfo.qGrouping) {
     case dimensionTypes.drillDown:
@@ -20031,21 +20165,52 @@ const createDimensionIconData = _ref => {
     case dimensionTypes.cyclic:
       {
         const clickable = app && active;
+        const stepToNextField = () => {
+          if (!isPopover) {
+            selections.confirm();
+          }
+          app.getDimension(dimInfo.qLibraryId).then(dimensionModel => {
+            if (!dimensionModel.stepCycle) {
+              // eslint-disable-next-line no-console
+              console.log("engine api spec version doesn't have support for function stepCycle");
+              return;
+            }
+            dimensionModel.stepCycle(1);
+          }).catch(() => null);
+        };
         return {
           icon: clickable ? ReloadIcon : CyclicIcon,
           tooltip: 'Listbox.Cyclic',
-          onClick: clickable ? () => {
-            if (!isPopover) {
-              selections.confirm();
-            }
-            app.getDimension(dimInfo.qLibraryId).then(dimensionModel => {
-              if (!dimensionModel.stepCycle) {
-                // eslint-disable-next-line no-console
-                console.log("engine api spec version doesn't have support for function stepCycle");
+          onClick: clickable ? stepToNextField : undefined,
+          onKeyDown: clickable ? event => {
+            const container = event.currentTarget.closest('.listbox-container');
+            switch (event.keyCode) {
+              case KEYS.SPACE:
+              case KEYS.ENTER:
+                stepToNextField();
+                break;
+              case KEYS.TAB:
+                {
+                  const useDefaultBrowserSupport = !keyboard.enabled;
+                  if (useDefaultBrowserSupport) {
+                    return;
+                  }
+                  let focused;
+                  if (event.shiftKey) {
+                    focused = keyboard.focusSelection();
+                  } else {
+                    focused = focusSearch(container) || focusRow(container);
+                  }
+                  if (!focused) {
+                    blur$1(event, keyboard);
+                  }
+                }
+                break;
+              default:
                 return;
-              }
-              dimensionModel.stepCycle(1);
-            }).catch(() => null);
+            }
+            event.preventDefault();
+            event.stopPropagation();
           } : undefined
         };
       }
@@ -20069,13 +20234,15 @@ function DimensionIcon(_ref) {
     iconData,
     translator,
     iconStyle,
-    disabled
+    disabled,
+    keyboard
   } = _ref;
   if (!iconData) return undefined;
   const {
     icon,
     tooltip,
-    onClick
+    onClick = undefined,
+    onKeyDown = undefined
   } = iconData;
   const Icon = icon;
   const title = translator.get(tooltip);
@@ -20083,11 +20250,14 @@ function DimensionIcon(_ref) {
   return isButton ? /*#__PURE__*/React__default.createElement(StyledButton, {
     variant: "outlined",
     onClick: onClick,
-    tabIndex: -1,
+    tabIndex: keyboard.innerTabStops ? 0 : -1,
     title: title,
     size: "large",
     disableRipple: true,
-    disabled: disabled
+    disabled: disabled,
+    onKeyDown: onKeyDown,
+    className: "listbox-cyclic-button",
+    "data-testid": "listbox-cyclic-button"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     style: iconStyle
   })) : /*#__PURE__*/React__default.createElement(Icon, {
@@ -20155,8 +20325,7 @@ function ListBoxHeader(_ref2) {
     selections,
     keyboard,
     autoConfirm,
-    app,
-    isInSelection
+    app
   } = _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);
@@ -20171,7 +20340,8 @@ function ListBoxHeader(_ref2) {
     app,
     selections,
     isPopover,
-    active: !(constraints !== null && constraints !== void 0 && constraints.active)
+    active: !(constraints !== null && constraints !== void 0 && constraints.active),
+    keyboard
   });
   const showUnlock = showLock && isLocked;
   const showLockIcon = !showLock && isLocked; // shows instead of the cover button when field/dim is locked.
@@ -20194,7 +20364,8 @@ function ListBoxHeader(_ref2) {
     model,
     translator,
     selectionState,
-    isDirectQuery
+    isDirectQuery,
+    selections
   });
   const extraItems = isLocked || !showLock ? undefined : [{
     key: 'lock',
@@ -20238,6 +20409,7 @@ function ListBoxHeader(_ref2) {
     isDetached: isPopover ? false : isToolbarDetached,
     showToolbar,
     containerRef,
+    isPopover,
     isLocked,
     extraItems,
     listboxSelectionToolbarItems,
@@ -20283,8 +20455,9 @@ function ListBoxHeader(_ref2) {
   }, lockedIconComp || showSearchIcon && searchIconComp, /*#__PURE__*/React__default.createElement(DimensionIcon, {
     iconData: iconData,
     iconStyle: iconStyle,
-    disabled: isInSelection && isPopover,
-    translator: translator
+    disabled: selections.isActive() && isPopover,
+    translator: translator,
+    keyboard: keyboard
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true,
@@ -20380,7 +20553,8 @@ function ListBoxInline(_ref3) {
     isPopover = false,
     showLock = false,
     components,
-    selectDisabled = () => false
+    selectDisabled = () => false,
+    flags
   } = options;
 
   // Hook that will trigger update when used in useEffects.
@@ -20404,12 +20578,14 @@ function ListBoxInline(_ref3) {
   const {
     checkboxes = checkboxesOption
   } = layout || {};
+  const themeSelectionColorsEnabled = flags === null || flags === void 0 ? void 0 : flags.isEnabled('PS_22149_THEME_SELECTION_COLORS');
   const styles = getStyles({
     app,
     themeApi,
     theme,
     components,
-    checkboxes
+    checkboxes,
+    themeSelectionColorsEnabled
   });
   const isDirectQuery = isDirectQueryEnabled({
     appLayout: app === null || app === void 0 ? void 0 : app.layout
@@ -20444,7 +20620,6 @@ function ListBoxInline(_ref3) {
   }), [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 [isInSelection, setIsInSelection] = useState$1(false);
   const {
     handleKeyDown,
     handleOnMouseEnter,
@@ -20459,7 +20634,8 @@ function ListBoxInline(_ref3) {
     app,
     appSelections,
     constraints,
-    isModal: isModalMode
+    isModal: isModalMode,
+    selections
   }), [keyboard, hovering, updateKeyScroll, containerRef, currentScrollIndex, app, appSelections, constraints, isModalMode]);
   useEffect$1(() => {
     document.addEventListener('keydown', globalKeyDown);
@@ -20473,11 +20649,9 @@ function ListBoxInline(_ref3) {
     }
     const show = () => {
       setShowToolbar(true);
-      setIsInSelection(true);
     };
     const hide = () => {
       setShowToolbar(false);
-      setIsInSelection(false);
       if (search === 'toggle') {
         setShowSearch(false);
       }
@@ -20495,7 +20669,7 @@ function ListBoxInline(_ref3) {
         selections.on('activated', show);
         selections.on('deactivated', hide);
       }
-      setShowToolbar(selections.isActive());
+      setShowToolbar(isPopover || selections.isActive());
     }
     return () => {
       if (selections && selections.removeListener) {
@@ -20579,8 +20753,7 @@ function ListBoxInline(_ref3) {
     model: model,
     selectionState: selectionState$1,
     selections: selections,
-    keyboard: keyboard,
-    isInSelection: isInSelection
+    keyboard: keyboard
   });
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && listBoxHeader, /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
@@ -20623,6 +20796,7 @@ function ListBoxInline(_ref3) {
     visible: searchVisible,
     search: search,
     autoFocus: shouldAutoFocus,
+    beginSelectionOnFocus: !isPopover,
     wildCardSearch: wildCardSearch,
     searchEnabled: searchEnabled,
     direction: direction,
@@ -21122,7 +21296,8 @@ function ListBoxWrapper(_ref) {
     stateName,
     element,
     options,
-    renderedCallback
+    renderedCallback,
+    flags
   } = _ref;
   const {
     isExistingObject,
@@ -21159,7 +21334,8 @@ function ListBoxWrapper(_ref) {
     selections,
     model,
     app,
-    renderedCallback
+    renderedCallback,
+    flags
   }), [options, selections, model, app]);
   if (!selections || !model) {
     return null;
@@ -21176,7 +21352,8 @@ function ListBoxPortal(_ref2) {
     qId,
     stateName = '$',
     options = {},
-    renderedCallback
+    renderedCallback,
+    flags
   } = _ref2;
   return ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(ListBoxWrapper, {
     app: app,
@@ -21185,7 +21362,8 @@ function ListBoxPortal(_ref2) {
     qId: qId,
     stateName: stateName,
     options: options,
-    renderedCallback: renderedCallback
+    renderedCallback: renderedCallback,
+    flags: flags
   }), element, uid());
 }
 
@@ -21212,7 +21390,8 @@ function ListBoxPopoverWrapper(_ref) {
     fieldIdentifier,
     stateName,
     element,
-    options = {}
+    options = {},
+    flags
   } = _ref;
   const [showState, setShowstate] = useState$1(!!options.show);
   const handleCloseShowState = () => {
@@ -21233,7 +21412,8 @@ function ListBoxPopoverWrapper(_ref) {
     fieldName: fieldIdentifier,
     stateName: stateName,
     autoFocus: options.autoFocus,
-    components: options.components
+    components: options.components,
+    flags: flags
   });
 }
 
@@ -27798,6 +27978,8 @@ var hasRequiredRange;
 function requireRange() {
   if (hasRequiredRange) return range;
   hasRequiredRange = 1;
+  const SPACE_CHARACTERS = /\s+/g;
+
   // hoisted class for cyclic dependency
   class Range {
     constructor(range, options) {
@@ -27813,7 +27995,7 @@ function requireRange() {
         // just put it in the set and return
         this.raw = range.value;
         this.set = [[range]];
-        this.format();
+        this.formatted = undefined;
         return this;
       }
       this.options = options;
@@ -27823,7 +28005,7 @@ function requireRange() {
       // First reduce all whitespace as much as possible so we do not have to rely
       // on potentially slow regexes like \s*. This is then stored and used for
       // future error messages as well.
-      this.raw = range.trim().split(/\s+/).join(' ');
+      this.raw = range.trim().replace(SPACE_CHARACTERS, ' ');
 
       // First, split on ||
       this.set = this.raw.split('||')
@@ -27854,10 +28036,27 @@ function requireRange() {
           }
         }
       }
-      this.format();
+      this.formatted = undefined;
+    }
+    get range() {
+      if (this.formatted === undefined) {
+        this.formatted = '';
+        for (let i = 0; i < this.set.length; i++) {
+          if (i > 0) {
+            this.formatted += '||';
+          }
+          const comps = this.set[i];
+          for (let k = 0; k < comps.length; k++) {
+            if (k > 0) {
+              this.formatted += ' ';
+            }
+            this.formatted += comps[k].toString().trim();
+          }
+        }
+      }
+      return this.formatted;
     }
     format() {
-      this.range = this.set.map(comps => comps.join(' ').trim()).join('||').trim();
       return this.range;
     }
     toString() {
@@ -28973,7 +29172,8 @@ function nuked() {
                   onSelectionDeactivated
                 }, options)),
                 stateName: options.stateName || '$',
-                renderedCallback: resolve
+                renderedCallback: resolve,
+                flags: halo.public.galaxy.flags
               });
               root.add(this._instance);
             });
@@ -29027,7 +29227,8 @@ function nuked() {
             app,
             fieldIdentifier,
             options: opts,
-            stateName: options.stateName || '$'
+            stateName: options.stateName || '$',
+            flags: halo.public.galaxy.flags
           });
           root.add(api._popoverInstance);
         }