@nebula.js/stardust 4.0.0-alpha.5 → 4.0.0-alpha.7

package/core/esm/dev.js

@@ -1,14 +1,14 @@
 /*
-* @nebula.js/stardust v4.0.0-alpha.5
+* @nebula.js/stardust v4.0.0-alpha.7
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
 
 import * as React from 'react';
-import React__default, { useState as useState$1, useEffect as useEffect$1, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useReducer, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, createElement, useContext } from 'react';
+import React__default, { useState as useState$1, useEffect as useEffect$1, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useReducer, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, useContext, createElement } 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, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Icon, CircularProgress } from '@mui/material';
+import { Checkbox, Radio, Typography, FormControlLabel, Box, Grid, Tooltip, Paper, IconButton, styled as styled$4, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Icon, CircularProgress } from '@mui/material';
 import styled$3 from '@emotion/styled';
 
 function getAugmentedNamespace(n) {
@@ -1496,7 +1496,7 @@ var Selection_SelectPossible = {
 var SelectionToolbar_ClickToUnlock = {
 	id: "SelectionToolbar.ClickToUnlock",
 	locale: {
-		"de-DE": "Klicken zum Freigeben",
+		"de-DE": "Zum Entsperren klicken",
 		"en-US": "Click to unlock",
 		"es-ES": "Haga clic para desbloquearla",
 		"fr-FR": "Cliquez pour déverrouiller",
@@ -8064,7 +8064,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "6643" ;
+const NEBULA_VERSION_HASH = "a704" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8272,7 +8272,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.5" );
+  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.7" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   const root = client.createRoot(element);
@@ -9071,7 +9071,7 @@ function fillRange(elementNbrs, elemNumbersOrdered) {
   return elemNumbersOrdered.slice(min, max + 1);
 }
 
-const getKeyAsToggleSelected = event => !(event.metaKey || event.ctrlKey);
+const getKeyAsToggleSelected = event => !(event !== null && event !== void 0 && event.metaKey || event !== null && event !== void 0 && event.ctrlKey);
 function useSelectionsInteractions(_ref) {
   let {
     selectionState,
@@ -9112,6 +9112,11 @@ function useSelectionsInteractions(_ref) {
   const selectManually = function () {
     let elementIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    let event = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+    const toggle = !selectionState.isSingleSelect && getKeyAsToggleSelected(event === null || event === void 0 ? void 0 : event.nativeEvent);
+    if (!toggle) {
+      selectionState.clearItemStates(true);
+    }
     const elemNumbers = [];
     selectionState.updateItems(elementIds, additive, elemNumbers);
     selectionState.setSelectableValuesUpdating();
@@ -9119,7 +9124,7 @@ function useSelectionsInteractions(_ref) {
       selections,
       elemNumbers: additive ? elemNumbers : elementIds,
       isSingleSelect: selectionState.isSingleSelect,
-      toggle: !selectionState.isSingleSelect
+      toggle
     });
   };
   const handleSingleSelectKey = (event, target) => {
@@ -9343,6 +9348,84 @@ 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 ? void 0 : container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
+    elm.setAttribute('tabIndex', -1);
+  });
+}
+function removeLastFocused(container) {
+  container === null || container === void 0 ? 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 innerTabStops = !enabled || keyboardActive;
+  const keyboard = {
+    enabled,
+    active: keyboardActive,
+    innerTabStops,
+    // does keyboard permit inner tab stops
+    outerTabStops: !innerTabStops,
+    // does keyboard permit outer tab stops
+    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 fieldElement = c === null || c === void 0 ? void 0 : c.querySelector('.value.selector, .value, .ActionsToolbar-item button');
+      const elementToFocus = searchField || lastSelectedRow || fieldElement;
+      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.setAttribute('tabIndex', 0);
+      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
+    },
+    focusSelection: () => {
+      const confirmButton = document.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
+      confirmButton === null || confirmButton === void 0 ? void 0 : confirmButton.setAttribute('tabIndex', 0);
+      confirmButton === null || confirmButton === void 0 ? void 0 : confirmButton.focus();
+    }
+  };
+  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');
+  searchField === null || searchField === void 0 ? void 0 : searchField.focus();
+  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 ? void 0 : row.setAttribute('tabIndex', 0);
+  row === null || row === void 0 ? void 0 : row.focus();
+  return row;
+};
 function getFieldKeyboardNavigation(_ref) {
   let {
     select,
@@ -9351,7 +9434,9 @@ function getFieldKeyboardNavigation(_ref) {
     confirm,
     cancel,
     setScrollPosition,
-    focusListItems
+    focusListItems,
+    keyboard,
+    isModal
   } = _ref;
   const getElement = function (elm) {
     let next = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -9364,49 +9449,86 @@ function getFieldKeyboardNavigation(_ref) {
   };
   const handleKeyDown = event => {
     let elementToFocus;
+    const {
+      currentTarget,
+      nativeEvent
+    } = event;
     const {
       keyCode,
       shiftKey = false,
       ctrlKey = false,
       metaKey = false
-    } = event.nativeEvent;
+    } = nativeEvent;
     switch (keyCode) {
+      case KEYS.TAB:
+        {
+          // Try to focus search field, otherwise confirm button.
+          const container = currentTarget.closest('.listbox-container');
+          const inSelection = isModal();
+
+          // 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
+
+          if (shiftKey) {
+            if (!focusSearch(container)) {
+              if (inSelection) {
+                keyboard.focusSelection();
+              } else {
+                keyboard.blur(true);
+              }
+            }
+            break;
+          }
+
+          // Without shift key
+          if (inSelection) {
+            keyboard.focusSelection();
+          } else {
+            currentTarget.blur();
+            keyboard.blur();
+          }
+          break;
+        }
       case KEYS.SHIFT:
         // This is to ensure we include the first value when starting a range selection.
         setStartedRange(true);
         break;
       case KEYS.SPACE:
-        select([+event.currentTarget.getAttribute('data-n')]);
+        select([getElementIndex(currentTarget)], false, event);
         break;
       case KEYS.ARROW_DOWN:
       case KEYS.ARROW_RIGHT:
-        elementToFocus = getElement(event.currentTarget, true);
+        elementToFocus = getElement(currentTarget, true);
         if (shiftKey && elementToFocus) {
           if (startedRange) {
-            select([+event.currentTarget.getAttribute('data-n')], true);
+            select([getElementIndex(currentTarget)], true);
             setStartedRange(false);
           }
-          select([+elementToFocus.getAttribute('data-n')], true);
+          select([getElementIndex(elementToFocus)], true);
         }
         break;
       case KEYS.ARROW_UP:
       case KEYS.ARROW_LEFT:
-        elementToFocus = getElement(event.currentTarget, false);
+        elementToFocus = getElement(currentTarget, false);
         if (shiftKey && elementToFocus) {
           if (startedRange) {
-            select([+event.currentTarget.getAttribute('data-n')], true);
+            select([getElementIndex(currentTarget)], true);
             setStartedRange(false);
           }
-          select([+elementToFocus.getAttribute('data-n')], true);
+          select([getElementIndex(elementToFocus)], true);
         }
         break;
       case KEYS.ENTER:
         confirm();
         break;
       case KEYS.ESCAPE:
-        cancel();
-        return;
-      // let it propagate to top-level
+        if (isModal()) {
+          cancel();
+        } else {
+          return; // propagate to other Esc handler
+        }
+
+        break;
       case KEYS.HOME:
         focusListItems.setFirst(true);
         if (ctrlKey) {
@@ -9450,39 +9572,41 @@ function getFieldKeyboardNavigation(_ref) {
 }
 function getListboxInlineKeyboardNavigation(_ref2) {
   let {
-    setKeyboardActive,
+    keyboard,
     hovering,
     setHovering,
     updateKeyScroll,
     containerRef,
     currentScrollIndex,
-    app,
-    appSelections,
+    isModal,
     constraints
   } = _ref2;
-  const focusInsideListbox = element => {
-    const fieldElement = element.querySelector('.search input, .value.selector, .value, .ActionsToolbar-item button');
-    setKeyboardActive(true);
-    if (fieldElement) {
-      fieldElement.focus();
-    }
-  };
-  const changeFocus = event => {
-    var _event$target;
-    if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.classList.contains('listbox-container')) {
-      // Focus currently on a listbox
-      // Esc on a list box should move the focus to its parent, i.e. a filter pane if any
-      setKeyboardActive(false);
+  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 {
-      var _event$target2, _event$target3, _event$currentTarget, _event$currentTarget2;
-      // Focus currently on a row
-      // Esc on a row should move the focus to its parent, i.e. a listbox
-      // First unfocus the row
-      (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.setAttribute('tabIndex', '-1');
-      (_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.blur();
-      // Then focus the listbox
-      (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.setAttribute('tabIndex', '0');
-      (_event$currentTarget2 = event.currentTarget) === null || _event$currentTarget2 === void 0 ? void 0 : _event$currentTarget2.focus();
+      // 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', 0);
+      c === null || c === void 0 ? void 0 : c.focus();
     }
   };
   const updateKeyScrollOnHover = newState => {
@@ -9496,65 +9620,84 @@ function getListboxInlineKeyboardNavigation(_ref2) {
       ctrlKey = false,
       shiftKey = false
     } = event.nativeEvent;
+    const prevent = () => {
+      event.stopPropagation();
+      event.preventDefault();
+    };
     switch (keyCode) {
-      // case KEYS.TAB: TODO: Focus confirm button using keyboard.focusSelection when we can access the useKeyboard hook.
-      case KEYS.ENTER:
-      case KEYS.SPACE:
-        if (!event.target.classList.contains('listbox-container')) {
-          return; // don't mess with keydown handlers within the listbox
-        }
-
-        focusInsideListbox(event.currentTarget);
-        break;
-      case KEYS.ESCAPE:
-        changeFocus(event);
-        break;
-      case KEYS.ARROW_UP:
-        updateKeyScrollOnHover({
-          up: 1
-        });
-        break;
-      case KEYS.ARROW_DOWN:
-        updateKeyScrollOnHover({
-          down: 1
-        });
-        break;
-      case KEYS.ARROW_LEFT:
-      case KEYS.ARROW_RIGHT:
-        return;
-      // let it propagate to top-level
       case KEYS.PAGE_UP:
         updateKeyScrollOnHover({
           up: currentScrollIndex.stop - currentScrollIndex.start
         });
+        prevent();
         break;
       case KEYS.PAGE_DOWN:
         updateKeyScrollOnHover({
           down: currentScrollIndex.stop - currentScrollIndex.start
         });
+        prevent();
         break;
       case KEYS.HOME:
         updateKeyScrollOnHover({
           scrollPosition: ctrlKey && shiftKey ? 'overflowStart' : 'start'
         });
+        prevent();
         break;
       case KEYS.END:
         updateKeyScrollOnHover({
           scrollPosition: ctrlKey && shiftKey ? 'overflowEnd' : 'end'
         });
+        prevent();
+        break;
+      case KEYS.ARROW_UP:
+        updateKeyScrollOnHover({
+          up: 1
+        });
+        prevent();
+        break;
+      case KEYS.ARROW_DOWN:
+        updateKeyScrollOnHover({
+          down: 1
+        });
+        prevent();
         break;
-      default:
-        return;
     }
+    if (!keyboard.enabled) {
+      // Other keys should not be handled unless keyboard is enabled.
+      return undefined;
+    }
+    const container = event.currentTarget.closest('.listbox-container');
+    switch (keyCode) {
+      case KEYS.TAB:
+        if (shiftKey) {
+          focusRow(container) || focusSearch(container);
+        } else {
+          focusSearch(container) || focusRow(container);
+        }
+        prevent();
+        break;
+      case KEYS.ENTER:
+      case KEYS.SPACE:
+        if (!event.target.classList.contains('listbox-container')) {
+          return undefined; // don't mess with keydown handlers within the listbox (e.g. row seletion)
+        }
 
-    // Note: We should not stop propagation here as it will block the containing app
-    // from handling keydown events.
-    event.preventDefault();
+        keyboard.focus();
+        prevent();
+        break;
+      case KEYS.ESCAPE:
+        blur(event);
+        prevent();
+        break;
+      case KEYS.ARROW_LEFT:
+      case KEYS.ARROW_RIGHT:
+        return undefined;
+    }
+    return undefined;
   };
   const focusOnHoverDisabled = () => {
-    var _app$isInModalSelecti, _app$isInModalSelecti2;
     const selectNotAllowed = (constraints === null || constraints === void 0 ? void 0 : constraints.select) || (constraints === null || constraints === void 0 ? void 0 : constraints.active);
-    const appInModal = (_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();
+    const appInModal = isModal();
     return selectNotAllowed || appInModal;
   };
   const handleOnMouseEnter = () => {
@@ -9759,15 +9902,10 @@ const RowColRoot = styled$1('div', {
     ["& .".concat(rowColClasses.labelDense)]: {
       fontSize: 12
     },
-    // Highlight is added to labelText spans, which are created as siblings to original labelText,
+    // Highlight is added to labelText spans, which are created as children to original labelText,
     // when a search string is matched.
     ["& .".concat(rowColClasses.highlighted)]: {
-      overflow: 'visible',
-      width: '100%',
-      '& > span': {
-        width: '100%',
-        backgroundColor: '#FFC72A'
-      }
+      backgroundColor: '#FFC72A'
     },
     // Checkbox and label container.
     ["& .".concat(rowColClasses.checkboxLabel)]: {
@@ -9787,12 +9925,6 @@ const RowColRoot = styled$1('div', {
         paddingRight: '2px'
       })
     },
-    ["& .".concat(rowColClasses.checkboxLabel, " .").concat(rowColClasses.labelText)]: {
-      width: 'auto'
-    },
-    ["& .".concat(rowColClasses.checkboxLabel, " .").concat(rowColClasses.labelText, ".").concat(rowColClasses.highlighted)]: {
-      width: 'auto'
-    },
     // The icons container holding tick and lock, shown inside fields.
     ["& .".concat(rowColClasses.icon)]: {
       display: 'flex',
@@ -10027,7 +10159,6 @@ function ValueField(_ref) {
   let {
     label,
     color,
-    highlighted = false,
     dense,
     showGray = true,
     checkboxes,
@@ -10037,14 +10168,14 @@ function ValueField(_ref) {
   return /*#__PURE__*/React__default.createElement(Typography, {
     component: "span",
     variant: "body2",
-    className: joinClassNames([rowColClasses.labelText, highlighted && rowColClasses.highlighted, dense && rowColClasses.labelDense, showGray && excludedOrAlternative({
+    className: joinClassNames([rowColClasses.labelText, dense && rowColClasses.labelDense, showGray && excludedOrAlternative({
       cell,
       checkboxes
     }) && rowColClasses.excludedTextWithCheckbox]),
     color: color,
-    align: valueTextAlign
+    align: valueTextAlign,
+    dir: "auto"
   }, /*#__PURE__*/React__default.createElement("span", {
-    dir: "auto",
     style: {
       whiteSpace: 'pre'
     }
@@ -10055,7 +10186,6 @@ function LabelTag(_ref) {
   let {
     label,
     color,
-    highlighted,
     dense,
     showGray,
     checkboxes,
@@ -10066,7 +10196,6 @@ function LabelTag(_ref) {
     return /*#__PURE__*/React__default.createElement(ValueField, {
       label: label,
       color: color,
-      highlighted: highlighted,
       dense: dense,
       showGray: showGray,
       checkboxes: checkboxes,
@@ -10089,7 +10218,6 @@ function CheckboxField(_ref) {
     isGridCol,
     showGray,
     isSingleSelect,
-    highlighted,
     checkboxes,
     valueTextAlign
   } = _ref;
@@ -10117,7 +10245,6 @@ function CheckboxField(_ref) {
     label: /*#__PURE__*/React__default.createElement(LabelTag, {
       label: label,
       color: color,
-      highlighted: highlighted,
       dense: dense,
       showGray: showGray,
       checkboxes: checkboxes,
@@ -10133,23 +10260,21 @@ function LabelsWithRanges(_ref) {
     labels,
     dense,
     showGray,
-    checkboxes,
-    textDirection
+    checkboxes
   } = _ref;
-  return /*#__PURE__*/React__default.createElement("div", {
-    dir: textDirection
-  }, labels.map((_ref2, index) => {
+  const text = labels.map((_ref2, index) => {
     let [label, highlighted] = _ref2;
-    const key = "".concat(index);
-    return /*#__PURE__*/React__default.createElement(ValueField, {
-      label: label,
-      key: key,
-      highlighted: highlighted,
-      dense: dense,
-      showGray: showGray,
-      checkboxes: checkboxes
-    });
-  }));
+    return /*#__PURE__*/React__default.createElement("span", {
+      id: index,
+      className: highlighted ? rowColClasses.highlighted : ''
+    }, label);
+  });
+  return /*#__PURE__*/React__default.createElement(ValueField, {
+    label: text,
+    dense: dense,
+    showGray: showGray,
+    checkboxes: checkboxes
+  });
 }
 function FieldWithRanges(_ref3) {
   let {
@@ -10164,15 +10289,13 @@ function FieldWithRanges(_ref3) {
     cell,
     isGridCol,
     isSingleSelect,
-    valueTextAlign,
-    textDirection
+    valueTextAlign
   } = _ref3;
   const LWR = /*#__PURE__*/React__default.createElement(LabelsWithRanges, {
     labels: labels,
     dense: dense,
     showGray: showGray,
-    checkboxes: checkboxes,
-    textDirection: textDirection
+    checkboxes: checkboxes
   });
   return checkboxes ? /*#__PURE__*/React__default.createElement(CheckboxField, {
     onChange: onChange,
@@ -10202,7 +10325,6 @@ function Field(_ref) {
     isGridCol,
     showGray,
     isSingleSelect,
-    highlighted,
     checkboxes,
     valueTextAlign
   } = _ref;
@@ -10217,13 +10339,11 @@ function Field(_ref) {
     isGridCol: isGridCol,
     showGray: showGray,
     isSingleSelect: isSingleSelect,
-    highlighted: highlighted,
     checkboxes: checkboxes,
     valueTextAlign: valueTextAlign
   }) : /*#__PURE__*/React__default.createElement(ValueField, {
     label: label,
     color: color,
-    highlighted: false,
     dense: dense,
     showGray: true,
     checkboxes: checkboxes,
@@ -10265,13 +10385,15 @@ function Frequency(_ref) {
     dense,
     showGray
   } = _ref;
+  const frequencyText = getFrequencyText(cell === null || cell === void 0 ? void 0 : cell.qFrequency);
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     style: {
       display: 'flex',
       alignItems: 'center'
     },
-    className: rowColClasses.frequencyCount
+    className: rowColClasses.frequencyCount,
+    "aria-label": frequencyText
   }, /*#__PURE__*/React__default.createElement(Typography, {
     noWrap: true,
     color: "inherit",
@@ -10280,7 +10402,7 @@ function Frequency(_ref) {
       cell,
       checkboxes
     }) && rowColClasses.excludedTextWithCheckbox])
-  }, getFrequencyText(cell === null || cell === void 0 ? void 0 : cell.qFrequency)));
+  }, frequencyText));
 }
 
 function getGridItemSizes(_ref) {
@@ -10317,7 +10439,7 @@ function getGridItemSizes(_ref) {
 }
 
 const ItemGrid = styled$1(Grid, {
-  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'checkboxes'].includes(prop)
+  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'cellPaddingRight'].includes(prop)
 })(_ref => {
   let {
     dataLayout,
@@ -10352,54 +10474,78 @@ function getCellFromPages(_ref) {
   return c;
 }
 
-// Source: https://en.wikipedia.org/wiki/Bi-directional_text and http://www.unicode.org/Public/6.0.0/ucd/UnicodeData.txt
-// 3 types of strong direction characters: L (strong left-to-right), R(strong right-to-left, Hebrew) and AL(strong right-to-left, Arabic language)
-const rangesOfLChars = '[\u0041-\u005A\u0061-\u007A\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u02BB-\u02C1\u02D0-\u02D1\u02E0-\u02E4\u02EE\u0370-\u0373\u0376-\u037D\u0386\u0388-\u03F5\u03F7-\u0482\u048A-\u0589\u0903-\u0939\u093B\u093D-\u0940\u0949-\u094C\u094E-\u0950\u0958-\u0961\u0964-\u097F\u0982-\u09B9\u09BD-\u09C0\u09C7-\u09CC\u09CE-\u09E1\u09E6-\u09F1\u09F4-\u09FA\u0A03-\u0A39\u0A3E-\u0A40\u0A59-\u0A6F\u0A72-\u0A74\u0A83-\u0AB9\u0ABD-\u0AC0\u0AC9-\u0ACC\u0AD0-\u0AE1\u0AE6-\u0AEF\u0B02-\u0B39\u0B3D-\u0B3E\u0B40\u0B47-\u0B4C\u0B57-\u0B61\u0B66-\u0B77\u0B83-\u0BBF\u0BC1-\u0BCC\u0BD0-\u0BF2\u0C01-\u0C3D\u0C41-\u0C44\u0C58-\u0C61\u0C66-\u0C6F\u0C7F-\u0CB9\u0CBD-\u0CCB\u0CD5-\u0CE1\u0CE6-\u0D40\u0D46-\u0D4C\u0D4E-\u0D61\u0D66-\u0DC6\u0DCF-\u0DD1\u0DD8-\u0E30\u0E32-\u0E33\u0E40-\u0E46\u0E4F-\u0EB0\u0EB2-\u0EB3\u0EBD-\u0EC6\u0ED0-\u0F17\u0F1A-\u0F34\u0F36\u0F38\u0F3E-\u0F6C\u0F7F\u0F85\u0F88-\u0F8C\u0FBE-\u0FC5\u0FC7-\u102C\u1031\u1038\u103B-\u103C\u103F-\u1057\u105A-\u105D\u1061-\u1070\u1075-\u1081\u1083-\u1084\u1087-\u108C\u108E-\u109C\u109E-\u135A\u1360-\u138F\u13A0-\u13F4\u1401-\u167F\u1681-\u169A\u16A0-\u1711\u1720-\u1731\u1735-\u1751\u1760-\u1770\u1780-\u17B6\u17BE-\u17C5\u17C7-\u17C8\u17D4-\u17DA\u17DC\u17E0-\u17E9\u1810-\u18A8\u18AA-\u191C\u1923-\u1926\u1929-\u1931\u1933-\u1938\u1946-\u19DA\u1A00-\u1A16\u1A19-\u1A55\u1A57\u1A61\u1A63-\u1A64\u1A6D-\u1A72\u1A80-\u1AAD\u1B04-\u1B33\u1B35\u1B3B\u1B3D-\u1B41\u1B43-\u1B6A\u1B74-\u1B7C\u1B82-\u1BA1\u1BA6-\u1BA7\u1BAA-\u1BE5\u1BE7\u1BEA-\u1BEC\u1BEE\u1BF2-\u1C2B\u1C34-\u1C35\u1C3B-\u1C7F\u1CD3\u1CE1\u1CE9-\u1CEC\u1CEE-\u1DBF\u1E00-\u1FBC\u1FBE\u1FC2-\u1FCC\u1FD0-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FFC\u200E\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E-\u214F\u2160-\u2188\u2336-\u237A\u2395\u249C-\u24E9\u26AC\u2800-\u28FF\u2C00-\u2CE4\u2CEB-\u2CEE\u2D00-\u2D70\u2D80-\u2DDE\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u31BA\u31F0-\u321C\u3220-\u324F\u3260-\u327B\u327F-\u32B0\u32C0-\u32CB\u32D0-\u3376\u337B-\u33DD\u33E0-\u33FE\u3400-\u4DB5\u4E00-\uA48C\uA4D0-\uA60C\uA610-\uA66E\uA680-\uA6EF\uA6F2-\uA6F7\uA722-\uA787\uA789-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA824\uA827\uA830-\uA837\uA840-\uA873\uA880-\uA8C3\uA8CE-\uA8D9\uA8F2-\uA925\uA92E-\uA946\uA952-\uA97C\uA983-\uA9B2\uA9B4-\uA9B5\uA9BA-\uA9BB\uA9BD-\uAA28\uAA2F-\uAA30\uAA33-\uAA34\uAA40-\uAA42\uAA44-\uAA4B\uAA4D-\uAAAF\uAAB1\uAAB5-\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2-\uABE4\uABE6-\uABE7\uABE9-\uABEC\uABF0-\uFB17\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFDC]';
-const rangesOfRChars = '[\u05BE\u05C0\u05C3\u05C6\u05D0-\u05F4\u07C0-\u07EA\u07F4-\u07F5\u07FA-\u0815\u081A\u0824\u0828\u0830-\u0858\u085E\u200F\uFB1D\uFB1F-\uFB28\uFB2A-\uFB4F]';
-const rangesOfALChars = '[\u0608\u060B\u060D\u061B-\u064A\u066D-\u066F\u0671-\u06D5\u06E5-\u06E6\u06EE-\u06EF\u06FA-\u070D\u0710\u0712-\u072F\u074D-\u07A5\u07B1\uFB50-\uFD3D\uFD50-\uFDFC\uFE70-\uFEFC]';
-const rangesOfNChars = '[\u0009-\u000D\u001C-\u0022\u0026-\u002A\u003B-\u0040\u005B-\u0060\u007B-\u007E\u0085\u00A1\u00A6-\u00A9\u00AB-\u00AC\u00AE-\u00AF\u00B4\u00B6-\u00B8\u00BB-\u00BF\u00D7\u00F7\u02B9-\u02BA\u02C2-\u02CF\u02D2-\u02DF\u02E5-\u02ED\u02EF-\u02FF\u0374-\u0375\u037E-\u0385\u0387\u03F6\u058A\u0606-\u0607\u060E-\u060F\u06DE\u06E9\u07F6-\u07F9\u0BF3-\u0BF8\u0BFA\u0C78-\u0C7E\u0F3A-\u0F3D\u1390-\u1399\u1400\u1680\u169B-\u169C\u17F0-\u180A\u180E\u1940-\u1945\u19DE-\u19FF\u1FBD\u1FBF-\u1FC1\u1FCD-\u1FCF\u1FDD-\u1FDF\u1FED-\u1FEF\u1FFD-\u200A\u2010-\u2029\u2035-\u2043\u2045-\u205F\u207C-\u207E\u208C-\u208E\u2100-\u2101\u2103-\u2106\u2108-\u2109\u2114\u2116-\u2118\u211E-\u2123\u2125\u2127\u2129\u213A-\u213B\u2140-\u2144\u214A-\u214D\u2150-\u215F\u2189-\u2211\u2214-\u2335\u237B-\u2394\u2396-\u2487\u24EA-\u26AB\u26AD-\u27FF\u2900-\u2B59\u2CE5-\u2CEA\u2CF9-\u2CFF\u2E00-\u3004\u3008-\u3020\u3030\u3036-\u3037\u303D-\u303F\u309B-\u309C\u30A0\u30FB\u31C0-\u31E3\u321D-\u321E\u3250-\u325F\u327C-\u327E\u32B1-\u32BF\u32CC-\u32CF\u3377-\u337A\u33DE-\u33DF\u33FF\u4DC0-\u4DFF\uA490-\uA4C6\uA60D-\uA60F\uA673\uA67E-\uA67F\uA700-\uA721\uA788\uA828-\uA82B\uA874-\uA877\uFD3E-\uFD3F\uFDFD\uFE10-\uFE19\uFE30-\uFE4F\uFE51\uFE54\uFE56-\uFE5E\uFE60-\uFE61\uFE64-\uFE68\uFE6B\uFF01-\uFF02\uFF06-\uFF0A\uFF1B-\uFF20\uFF3B-\uFF40\uFF5B-\uFF65\uFFE2-\uFFE4\uFFE8-\uFFFD]';
-// eslint-disable-next-line no-misleading-character-class
-const rangesOfLRgExp = new RegExp(rangesOfLChars);
-const rangesOfRRgExp = new RegExp(rangesOfRChars);
-const rangesOfALRgExp = new RegExp(rangesOfALChars);
-const rangesOfNRgExp = new RegExp(rangesOfNChars);
-const
-// left-to-right marker
-lrm = String.fromCharCode(8206); // right-to-left marker
-
-const rlm = String.fromCharCode(8207);
-function isLtrChar(c) {
-  return rangesOfLRgExp.test(c);
-}
-function isRtlChar(c) {
-  return rangesOfRRgExp.test(c) || rangesOfALRgExp.test(c);
-}
-function isNeutralChar(c) {
-  return rangesOfNRgExp.test(c);
-}
-function detectTextDirection(s) {
-  const n = s ? s.length : 0;
-  let i;
-  let c;
-  for (i = 0; i < n; i++) {
-    c = s[i];
-    if (isLtrChar(c)) {
-      return 'ltr';
-    }
-    if (isRtlChar(c)) {
-      return 'rtl';
-    }
+/* eslint-disable import/prefer-default-export */
+const LOC_STATES = {
+  S: 'Object.Listbox.Selected',
+  A: 'Object.Listbox.Alternative',
+  O: 'Object.Listbox.Optional',
+  XS: 'Object.Listbox.SelectedExcluded',
+  L: 'Object.Listbox.Locked',
+  X: 'Object.Listbox.Excluded',
+  XL: 'Object.Listbox.ExcludedLock'
+};
+function getValueLabel(_ref) {
+  let {
+    translator,
+    label,
+    qState,
+    isSelected,
+    currentIndex,
+    maxIndex,
+    showSearch
+  } = _ref;
+  const stateTranslation = LOC_STATES[qState];
+  const state = translator.get(stateTranslation);
+  const srStringArr = [];
+  if (isSelected) {
+    const navTranslation = showSearch ? 'Listbox.ScreenReader.SearchThenSelectionsMenu.WithAccSelMenu' : 'Listbox.ScreenReader.SelectionMenu.WithAccSelMenu';
+    const nav = translator.get(navTranslation);
+    srStringArr.push(nav);
   }
-  return 'ltr';
+  const valueString = "".concat(label, " ").concat(state);
+  const indexString = translator.get('CurrentSelections.Of', [currentIndex + 1, maxIndex + 1]); // E.g. 3 of 20
+  srStringArr.unshift(valueString, indexString);
+  const srString = srStringArr.join('. ').trim();
+  return srString;
+}
+
+/**
+ * Announces the selection state.
+ *
+ * @ignore
+ * @param {Layout} object
+ * @returns {Element} An (invisible) component.
+ */
+function ScreenReaderForSelections(_ref2) {
+  var _layout$qListObject;
+  let {
+    layout
+  } = _ref2;
+  const {
+    translator
+  } = useContext(InstanceContext);
+  const {
+    qStateCounts: s = {}
+  } = (layout === null || layout === void 0 ? void 0 : (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qDimensionInfo) || {};
+  const count = s.qSelected + s.qSelectedExcluded + s.qLocked + s.qLockedExcluded;
+  let t;
+  switch (count) {
+    case 0:
+      t = 'ScreenReader.ZeroSelected';
+      break;
+    case 1:
+      t = 'ScreenReader.OneSelected';
+      break;
+    default:
+      t = 'ScreenReader.ManySelected';
+      break;
+  }
+  const text = translator.get(t, [count]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "screenReaderOnly",
+    "aria-live": "assertive"
+  }, text);
 }
-var rtlUtil = {
-  detectTextDirection,
-  isLtrChar,
-  isRtlChar,
-  isNeutralChar,
-  lrm,
-  rlm
-};
 
 function RowColumn(_ref) {
   var _cell$qText, _cell$qHighlightRange, _cell$qHighlightRange2;
@@ -10437,7 +10583,10 @@ function RowColumn(_ref) {
     focusListItems,
     listCount,
     itemPadding,
-    frequencyWidth
+    frequencyWidth,
+    translator,
+    showSearch,
+    isModal
   } = data;
   const {
     dense = false,
@@ -10487,8 +10636,10 @@ function RowColumn(_ref) {
     }
   }, [rowRef.current]);
   const handleKeyDownCallback = useCallback(getFieldKeyboardNavigation(_objectSpread2(_objectSpread2({}, actions), {}, {
-    focusListItems
-  })), [actions]);
+    focusListItems,
+    keyboard,
+    isModal
+  })), [actions, keyboard === null || keyboard === void 0 ? void 0 : keyboard.innerTabStops]);
   const cell = useMemo$1(() => getCellFromPages({
     pages,
     cellIndex
@@ -10526,7 +10677,6 @@ function RowColumn(_ref) {
   }
   const isGridCol = dataLayout === 'grid' && layoutOrder === 'column';
   const label = (_cell$qText = cell === null || cell === void 0 ? void 0 : cell.qText) !== null && _cell$qText !== void 0 ? _cell$qText : '';
-  const textDirection = rtlUtil.detectTextDirection(label);
   // Search highlights. Split up labelText span into several and add the highlighted class to matching sub-strings.
 
   let labels;
@@ -10554,6 +10704,14 @@ function RowColumn(_ref) {
   const showTick = !checkboxes && isSelected && !isLocked;
   const showIcon = !checkboxes && sizePermitsTickOrLock;
   const cellPaddingRight = checkboxes || !sizePermitsTickOrLock;
+  const ariaLabel = getValueLabel({
+    translator,
+    label,
+    qState: cell.qState,
+    currentIndex: count.currentIndex,
+    maxIndex: count.max,
+    showSearch
+  });
   return /*#__PURE__*/React__default.createElement(RowColRoot$1, {
     className: rowColClasses.barContainer,
     flexBasisProp: flexBasisVal,
@@ -10564,6 +10722,11 @@ function RowColumn(_ref) {
     frequencyWidth: frequencyWidth,
     "data-testid": "listbox.item"
   }, /*#__PURE__*/React__default.createElement(ItemGrid, {
+    role: "row",
+    "aria-label": ariaLabel,
+    "aria-selected": isSelected,
+    "aria-setsize": count.max,
+    "aria-rowindex": count.currentIndex,
     ref: rowRef,
     container: true,
     dataLayout: dataLayout,
@@ -10581,8 +10744,7 @@ function RowColumn(_ref) {
     onMouseEnter: onMouseEnter,
     onKeyDown: handleKeyDownCallback,
     onContextMenu: preventContextMenu,
-    role: column ? 'column' : 'row',
-    tabIndex: isFirstElement && (!keyboard.enabled || keyboard.active) ? 0 : -1,
+    tabIndex: isFirstElement && keyboard.innerTabStops ? 0 : -1,
     "data-n": cell === null || cell === void 0 ? void 0 : cell.qElemNumber
   }, (cell === null || cell === void 0 ? void 0 : cell.qFrequency) && /*#__PURE__*/React__default.createElement(Histogram, {
     qFrequency: cell === null || cell === void 0 ? void 0 : cell.qFrequency,
@@ -10608,8 +10770,7 @@ function RowColumn(_ref) {
     cell: cell,
     isGridCol: isGridCol,
     isSingleSelect: isSingleSelect,
-    valueTextAlign: valueTextAlign,
-    textDirection: textDirection
+    valueTextAlign: valueTextAlign
   }) : /*#__PURE__*/React__default.createElement(Field$1, {
     onChange: onChange,
     label: label,
@@ -12199,7 +12360,10 @@ function getListBoxComponents(_ref) {
     setCurrentScrollIndex,
     constraints,
     frequencyMax,
-    freqIsAllowed
+    freqIsAllowed,
+    translator,
+    showSearch,
+    isModal
   } = _ref;
   const {
     layoutOptions = {}
@@ -12253,7 +12417,10 @@ function getListBoxComponents(_ref) {
     showTick,
     dataOffset: local.current.dataOffset,
     focusListItems,
-    direction
+    direction,
+    translator,
+    showSearch,
+    isModal
   });
   const List = _ref2 => {
     let {
@@ -12695,17 +12862,14 @@ function useDataStore(model) {
   };
 }
 
-function ListBoxDisclaimer(_ref) {
+const StyledText = styled$1(Typography, {
+  shouldForwardProp: p => !['width', 'dense'].includes(p)
+})(_ref => {
   let {
     width,
-    text,
-    dense,
-    tooltip
+    dense
   } = _ref;
-  const {
-    translator
-  } = useContext(InstanceContext);
-  const StyledText = styled$1(Typography)(() => _objectSpread2({
+  return _objectSpread2({
     minWidth: "".concat(width, "px"),
     textAlign: 'center',
     fontSize: "".concat(dense ? '12px' : '14px')
@@ -12714,10 +12878,23 @@ function ListBoxDisclaimer(_ref) {
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     width
-  }));
+  });
+});
+function ListBoxDisclaimer(_ref2) {
+  let {
+    width,
+    text,
+    dense,
+    tooltip
+  } = _ref2;
+  const {
+    translator
+  } = useContext(InstanceContext);
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     title: tooltip ? translator.get(text) : ''
   }, /*#__PURE__*/React__default.createElement(StyledText, {
+    width: width,
+    dense: dense,
     component: "div",
     variant: "body1",
     py: "12px"
@@ -13085,6 +13262,14 @@ const useFrequencyMax = (app, layout) => {
 
 const _excluded$4 = ["isLoadingData"];
 const DEFAULT_MIN_BATCH_SIZE = 100;
+const StyledWrapper = styled$4('div')(() => ({
+  ["& .screenReaderOnly"]: {
+    position: 'absolute',
+    height: 0,
+    width: 0,
+    overflow: 'hidden'
+  }
+}));
 function ListBox(_ref) {
   var _layout$qListObject$q, _loaderRef$current, _loaderRef$current$_l, _loaderRef$current$_l2;
   let {
@@ -13115,8 +13300,13 @@ function ListBox(_ref) {
       set: () => {}
     },
     renderedCallback,
-    onCtrlF
+    onCtrlF,
+    showSearch,
+    isModal
   } = _ref;
+  const {
+    translator
+  } = useContext(InstanceContext);
   const [initScrollPosIsSet, setInitScrollPosIsSet] = useState$1(false);
   const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
   const {
@@ -13371,7 +13561,10 @@ function ListBox(_ref) {
     setCurrentScrollIndex: currentScrollIndex.set,
     constraints,
     frequencyMax,
-    freqIsAllowed
+    freqIsAllowed,
+    translator,
+    showSearch,
+    isModal
   });
   const {
     columnWidth,
@@ -13386,7 +13579,10 @@ function ListBox(_ref) {
       itemHeight
     });
   }
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !listCount && /*#__PURE__*/React__default.createElement(ListBoxDisclaimer, {
+  return /*#__PURE__*/React__default.createElement(StyledWrapper, null, /*#__PURE__*/React__default.createElement(ScreenReaderForSelections, {
+    className: "screenReaderOnly",
+    layout: layout
+  }), !listCount && /*#__PURE__*/React__default.createElement(ListBoxDisclaimer, {
     width: width,
     text: "Listbox.NoMatchesForYourTerms"
   }), /*#__PURE__*/React__default.createElement(InfiniteLoader, {
@@ -13398,7 +13594,8 @@ function ListBox(_ref) {
     }),
     threshold: 0,
     minimumBatchSize: minimumBatchSize,
-    ref: loaderRef
+    ref: loaderRef,
+    role: "grid"
   }, isVertical ? List : Grid), overflowDisclaimer.show && !overflowDisclaimer.dismissed && /*#__PURE__*/React__default.createElement(ListBoxFooter, {
     text: "Listbox.ItemsOverflow",
     dismiss: () => setOverflowDisclaimer(state => _objectSpread2(_objectSpread2({}, state), {}, {
@@ -13550,6 +13747,7 @@ const Item = React__default.forwardRef((_ref, ref) => {
   if (hidden) return null;
   const spacing = Number.parseInt(theme.spacing(0.5), 10);
   const handleKeyDown = item.keyboardAction ? e => ['Enter', ' ', 'Spacebar'].includes(e.key) && item.keyboardAction() : null;
+  const btnId = "actions-toolbar-".concat(item.key);
   return /*#__PURE__*/React__default.createElement(IconButton, {
     ref: !addAnchor ? ref : null,
     title: item.label,
@@ -13557,12 +13755,12 @@ const Item = React__default.forwardRef((_ref, ref) => {
     onKeyDown: handleKeyDown,
     disabled: disabled,
     style: style,
-    className: ActionElement.className,
+    className: [ActionElement.className, btnId].join(' '),
     size: "large",
     disableRipple: true,
     "aria-expanded": ariaExpanded,
     "aria-controls": "moreMenuList",
-    "data-testid": "actions-toolbar-".concat(item.key)
+    "data-testid": btnId
   }, hasSvgIconShape && SvgIcon$2(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     style: {
@@ -13741,6 +13939,70 @@ const More$1 = React__default.forwardRef((_ref3, ref) => {
   }))));
 });
 
+const getActionButtonIndex = btn => {
+  const toolbar = btn.closest('#actions-toolbar');
+  const nodeList = toolbar === null || toolbar === void 0 ? void 0 : toolbar.querySelectorAll('.njs-cell-action');
+  return Array.from(nodeList).indexOf(btn);
+};
+const focusButton = index => {
+  const toolbar = document.querySelector('#actions-toolbar');
+  const nodeList = toolbar === null || toolbar === void 0 ? void 0 : toolbar.querySelectorAll('.njs-cell-action');
+  if (!nodeList.length) {
+    return;
+  }
+  const ix = Math.min(Math.max(0, index), nodeList.length - 1);
+  const btn = nodeList[ix];
+  btn.focus();
+};
+function getActionsKeyDownHandler(_ref) {
+  let {
+    keyboardNavigation,
+    focusHandler,
+    getEnabledButton
+  } = _ref;
+  const handleActionsKeyDown = evt => {
+    const {
+      target,
+      nativeEvent
+    } = evt;
+    const {
+      keyCode
+    } = nativeEvent;
+    switch (keyCode) {
+      case KEYS.ARROW_LEFT:
+      case KEYS.ARROW_DOWN:
+      case KEYS.ARROW_RIGHT:
+      case KEYS.ARROW_UP:
+        {
+          const isActionButton = target.classList.contains('njs-cell-action');
+          if (isActionButton) {
+            const index = getActionButtonIndex(target);
+            const pressedLeft = [KEYS.ARROW_LEFT, KEYS.ARROW_DOWN].includes(keyCode);
+            focusButton(pressedLeft ? index - 1 : index + 1);
+          }
+          evt.stopPropagation();
+          evt.preventDefault();
+          break;
+        }
+      case KEYS.SPACE:
+        evt.preventDefault(); // prevent scrolling in listbox
+        break;
+      case KEYS.TAB:
+        if (keyboardNavigation && focusHandler !== null && focusHandler !== void 0 && focusHandler.refocusContent) {
+          const isTabbingOut = evt.shiftKey && getEnabledButton(false) === evt.target || !evt.shiftKey && getEnabledButton(true) === evt.target;
+          if (isTabbingOut) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            // if keyboardNavigation is true, create a callback to handle tabbing from the first/last button in the toolbar that resets focus on the content
+            focusHandler.refocusContent();
+          }
+        }
+        break;
+    }
+  };
+  return handleActionsKeyDown;
+}
+
 const PREFIX$7 = 'ActionsToolbar';
 const classes$7 = {
   item: "".concat(PREFIX$7, "-item"),
@@ -13776,6 +14038,7 @@ const ActionToolbarElement = {
 };
 const ActionsGroup = React__default.forwardRef((_ref2, ref) => {
   let {
+    className,
     ariaExpanded = false,
     actions = [],
     first = false,
@@ -13788,7 +14051,8 @@ const ActionsGroup = React__default.forwardRef((_ref2, ref) => {
     container: true,
     gap: 0,
     flexDirection: isRtl ? 'row-reverse' : 'row',
-    wrap: "nowrap"
+    wrap: "nowrap",
+    className: className
   }, actions.map((e, ix) => {
     let cls = [];
     const isFirstItem = first && ix === 0;
@@ -13856,22 +14120,27 @@ function ActionsToolbar(_ref3) {
     keyboardNavigation
   } = useContext(InstanceContext);
   const [showMoreItems, setShowMoreItems] = useState$1(false);
-  const moreRef = useRef();
+  const popoverAnchorOrigin = {
+    vertical: 7,
+    horizontal: ((_popover$anchorEl$cli = (_popover$anchorEl = popover.anchorEl) === null || _popover$anchorEl === void 0 ? void 0 : _popover$anchorEl.clientWidth) !== null && _popover$anchorEl$cli !== void 0 ? _popover$anchorEl$cli : 0) - 7
+  };
   const actionsRef = useRef();
+  const moreRef = useRef();
   const theme = useTheme$1();
   const dividerStyle = useMemo$1(() => ({
     margin: theme.spacing(0.5, 0)
   }));
-  const popoverAnchorOrigin = {
-    vertical: 15,
-    horizontal: ((_popover$anchorEl$cli = (_popover$anchorEl = popover.anchorEl) === null || _popover$anchorEl === void 0 ? void 0 : _popover$anchorEl.clientWidth) !== null && _popover$anchorEl$cli !== void 0 ? _popover$anchorEl$cli : 0) - 7
-  };
   const getEnabledButton = last => {
     const actionsElement = actionsRef.current || actionsRefMock;
     if (!actionsElement) return null;
     const buttons = actionsElement.querySelectorAll('button:not(.Mui-disabled)');
     return buttons[last ? buttons.length - 1 : 0];
   };
+  const handleActionsKeyDown = useMemo$1(() => getActionsKeyDownHandler({
+    keyboardNavigation,
+    focusHandler,
+    getEnabledButton
+  }), [keyboardNavigation, focusHandler, getEnabledButton]);
   useEffect$1(() => () => {
     setShowMoreItems(false);
   }, [popover.show, show, selections.show]);
@@ -13911,27 +14180,18 @@ function ActionsToolbar(_ref3) {
     enabled: () => moreEnabled,
     action: () => setShowMoreItems(!showMoreItems)
   };
-  const tabCallback =
-  // if keyboardNavigation is true, create a callback to handle tabbing from the first/last button in the toolbar that resets focus on the content
-  keyboardNavigation && focusHandler && focusHandler.refocusContent ? evt => {
-    if (evt.key !== 'Tab') return;
-    const isTabbingOut = evt.shiftKey && getEnabledButton(false) === evt.target || !evt.shiftKey && getEnabledButton(true) === evt.target;
-    if (isTabbingOut) {
-      evt.preventDefault();
-      evt.stopPropagation();
-      focusHandler.refocusContent();
-    }
-  } : null;
   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: tabCallback,
+    onKeyDown: handleActionsKeyDown,
     container: true,
     gap: 0,
     wrap: "nowrap",
+    id: "actions-toolbar",
+    "data-testid": "actions-toolbar",
     sx: {
       flexDirection: isRtl ? 'row-reverse' : 'row'
     }
@@ -13940,6 +14200,8 @@ function ActionsToolbar(_ref3) {
     first: true,
     last: !showMore && !selections.show
   }), showMore && /*#__PURE__*/React__default.createElement(ActionsGroup, {
+    id: "actions-toolbar-show-more",
+    "data-testid": "actions-toolbar-show-more",
     ref: moreRef,
     ariaExpanded: showMoreItems,
     actions: [moreItem],
@@ -13953,6 +14215,7 @@ function ActionsToolbar(_ref3) {
   }, /*#__PURE__*/React__default.createElement(Divider, {
     orientation: "vertical"
   })), selections.show && /*#__PURE__*/React__default.createElement(ActionsGroup, {
+    className: "actions-toolbar-default-actions",
     actions: defaultSelectionActions,
     first: !showActions && !showMore,
     last: true,
@@ -13976,6 +14239,8 @@ function ActionsToolbar(_ref3) {
     hideBackdrop: true,
     style: popoverStyle,
     PaperProps: {
+      id: 'njs-action-toolbar-popover',
+      'data-testid': 'njs-action-toolbar-popover',
       className: ActionToolbarElement.className,
       style: {
         pointerEvents: 'auto',
@@ -14103,29 +14368,57 @@ function ListBoxSearch(_ref3) {
     }
     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.setAttribute('tabIndex', 0);
+    row === null || row === void 0 ? void 0 : row.focus();
+  }
   const onKeyDown = async e => {
-    let response;
+    const {
+      currentTarget
+    } = e;
+    const container = currentTarget.closest('.listbox-container');
     switch (e.key) {
       case 'Enter':
-        response = await performSearch();
+        performSearch();
         break;
       case 'Escape':
-        response = cancel();
-        e.preventDefault();
-        e.stopPropagation();
-        break;
+        {
+          focusRow(container);
+          cancel();
+          break;
+        }
+      case 'Tab':
+        {
+          if (e.shiftKey) {
+            keyboard.focusSelection();
+          } else {
+            // Focus the row we last visited or the first one.
+            focusRow(container);
+
+            // Clean up.
+            container === null || container === void 0 ? void 0 : container.querySelectorAll('.last-focused').forEach(elm => {
+              elm.classList.remove('last-focused');
+            });
+          }
+          break;
+        }
       case 'f':
       case 'F':
         if (e.ctrlKey || e.metaKey) {
           if (hide) {
             hide();
           }
-          e.preventDefault();
-          e.stopPropagation();
+        } else {
+          return undefined;
         }
         break;
+      default:
+        return undefined;
     }
-    return response;
+    e.preventDefault();
+    e.stopPropagation();
+    return undefined;
   };
   if (!visible || searchEnabled === false) {
     return null;
@@ -14171,10 +14464,11 @@ function ListBoxSearch(_ref3) {
     onKeyDown: onKeyDown,
     autoFocus: autoFocus,
     inputProps: {
-      tabIndex: keyboard && (!keyboard.enabled || keyboard.active) ? 0 : -1,
+      tabIndex: keyboard.innerTabStops ? 0 : -1,
       style: {
         textAlign: "".concat(inpuTextAlign)
-      }
+      },
+      'data-testid': 'search-input-field'
     }
   });
 }
@@ -14418,6 +14712,12 @@ function useObjectSelections(app, model, elements, options) {
     objectSelections.addListener('activated', activateClickOut);
     objectSelections.addListener('deactivated', deactivateClickOut);
     return () => {
+      // confirm selection before removing event handler
+      // to end the selection when the object is removed
+      // and remove the (ClickOut) mousedown handler from the document
+      if (objectSelections.isActive()) {
+        objectSelections.confirm();
+      }
       objectSelections.removeListener('activated', activateClickOut);
       objectSelections.removeListener('deactivated', deactivateClickOut);
     };
@@ -16073,6 +16373,23 @@ function getListboxActionProps(_ref) {
   };
 }
 
+const StyledDiv = styled$1('div')(() => ({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center'
+}));
+function ListBoxError(_ref) {
+  let {
+    text
+  } = _ref;
+  const {
+    translator
+  } = useContext(InstanceContext);
+  return /*#__PURE__*/React__default.createElement(StyledDiv, null, translator.get(text));
+}
+
 const PREFIX$4 = 'ListBoxInline';
 const classes$4 = {
   listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader"),
@@ -16124,12 +16441,20 @@ const Title = styled$1(Typography)(_ref2 => {
     fontWeight: ((_theme$listBox5 = theme.listBox) === null || _theme$listBox5 === void 0 ? void 0 : (_theme$listBox5$title = _theme$listBox5.title) === null || _theme$listBox5$title === void 0 ? void 0 : (_theme$listBox5$title2 = _theme$listBox5$title.main) === null || _theme$listBox5$title2 === void 0 ? void 0 : _theme$listBox5$title2.fontWeight) || 'bold'
   };
 });
-function ListBoxInline(_ref3) {
+const isModal = _ref3 => {
+  var _app$isInModalSelecti, _app$isInModalSelecti2;
+  let {
+    app,
+    appSelections
+  } = _ref3;
+  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(_ref4) {
   var _layoutOptions$dense;
   let {
     options,
     layout
-  } = _ref3;
+  } = _ref4;
   const {
     app,
     direction,
@@ -16147,9 +16472,7 @@ function ListBoxInline(_ref3) {
     calculatePagesHeight,
     showGray = true,
     scrollState = undefined,
-    renderedCallback
-  } = options;
-  let {
+    renderedCallback,
     toolbar = true
   } = options;
 
@@ -16179,7 +16502,6 @@ function ListBoxInline(_ref3) {
   const [searchContainer, searchContainerRef] = useRefWithCallback();
   const [showToolbar, setShowToolbar] = useState$1(false);
   const [showSearch, setShowSearch] = useState$1(false);
-  const [keyboardActive, setKeyboardActive] = useState$1(false);
   const [hovering, setHovering] = useState$1(false);
   const [keyScroll, setKeyScroll] = useState$1({
     down: 0,
@@ -16194,12 +16516,22 @@ function ListBoxInline(_ref3) {
   const [appSelections] = useAppSelections(app);
   const titleRef = useRef(null);
   const [selectionState$1] = useState$1(() => selectionState());
+  const keyboard = useTempKeyboard({
+    containerRef,
+    enabled: keyboardNavigation
+  });
+  const isModalMode = useCallback(() => isModal({
+    app,
+    appSelections
+  }), [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 {
     handleKeyDown,
     handleOnMouseEnter,
     handleOnMouseLeave
   } = getListboxInlineKeyboardNavigation({
-    setKeyboardActive,
+    keyboard,
     hovering,
     setHovering,
     updateKeyScroll,
@@ -16207,20 +16539,11 @@ function ListBoxInline(_ref3) {
     currentScrollIndex,
     app,
     appSelections,
-    constraints
+    constraints,
+    isModal: isModalMode
   });
-
-  // Expose the keyboard flags in the same way as the keyboard hook does.
-  const keyboard = {
-    enabled: keyboardNavigation,
-    // this will be static until we can access the useKeyboard hook
-    active: keyboardActive
-  };
-  if ((layout === null || layout === void 0 ? void 0 : layout.toolbar) !== undefined) {
-    toolbar = layout.toolbar;
-  }
-  const toolbarDetachedOnly = toolbar && (layout === null || layout === void 0 ? void 0 : layout.title) === '';
-  toolbar = toolbar && (layout === null || layout === void 0 ? void 0 : layout.title) !== '';
+  const showDetachedToolbarOnly = toolbar && ((layout === null || layout === void 0 ? void 0 : layout.title) === '' || (layout === null || layout === void 0 ? void 0 : layout.showTitle) === false);
+  const showToolbarWithTitle = toolbar && (layout === null || layout === void 0 ? void 0 : layout.title) !== '' && (layout === null || layout === void 0 ? void 0 : layout.showTitle) !== false;
   useEffect$1(() => {
     const show = () => {
       setShowToolbar(true);
@@ -16244,7 +16567,7 @@ function ListBoxInline(_ref3) {
         selections.removeListener('deactivated', hide);
       }
     };
-  }, [selections, toolbar]);
+  }, [selections]);
   useEffect$1(() => {
     if (!searchContainer || !searchContainer.current) {
       return;
@@ -16278,7 +16601,7 @@ function ListBoxInline(_ref3) {
   const searchHeight = dense ? 27 : 40;
   const extraheight = dense ? 39 : 49;
   const searchAddHeight = searchVisible ? searchHeight : 0;
-  const minHeight = toolbar ? 49 + searchAddHeight + extraheight : 0;
+  const minHeight = showToolbarWithTitle ? 49 + searchAddHeight + extraheight : 0;
   const headerHeight = 32;
   const onShowSearch = () => {
     const newValue = !showSearch;
@@ -16350,12 +16673,12 @@ function ListBoxInline(_ref3) {
       fontSize: '12px'
     }
   }));
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, toolbarDetachedOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$6({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$6({
     direction: direction
   }, getActionToolbarProps(true))), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
     container: true,
-    tabIndex: keyboard.enabled && !keyboard.active ? 0 : -1,
+    tabIndex: keyboard.outerTabStops ? 0 : -1,
     direction: "column",
     gap: 0,
     containerPadding: containerPadding,
@@ -16369,7 +16692,7 @@ function ListBoxInline(_ref3) {
     onMouseLeave: handleOnMouseLeave,
     ref: containerRef,
     hasIcon: showIcons
-  }, toolbar && /*#__PURE__*/React__default.createElement(Grid, {
+  }, showToolbarWithTitle && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
     style: {
@@ -16459,11 +16782,13 @@ function ListBoxInline(_ref3) {
     className: classes$4.listboxWrapper
   }, /*#__PURE__*/React__default.createElement("div", {
     className: classes$4.screenReaderOnly
-  }, translator.get('Listbox.ScreenReaderInstructions')), /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref4 => {
+  }, translator.get('Listbox.ScreenReaderInstructions')), isInvalid ? /*#__PURE__*/React__default.createElement(ListBoxError, {
+    text: errorText
+  }) : /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref5 => {
     let {
       height,
       width
-    } = _ref4;
+    } = _ref5;
     return /*#__PURE__*/React__default.createElement(ListBox, {
       model: model,
       app: app,
@@ -16498,15 +16823,16 @@ function ListBoxInline(_ref3) {
         set: setCurrentScrollIndex
       },
       renderedCallback: renderedCallback,
-      onCtrlF: onCtrlF
+      onCtrlF: onCtrlF,
+      isModal: isModalMode
     });
   })))));
 }
 const ListBoxInlineMemoed = React__default.memo(ListBoxInline);
-function IsolateUseLayoutWrapper(_ref5) {
+function IsolateUseLayoutWrapper(_ref6) {
   let {
     options = {}
-  } = _ref5;
+  } = _ref6;
   const {
     model
   } = options;
@@ -16908,7 +17234,7 @@ function removeIndex(array, index) {
   array.splice(removeIdx, 1);
   return removeIdx;
 }
-const nxDimension = f => ({
+const nxDimension$1 = f => ({
   qDef: {
     qFieldDefs: [f]
   }
@@ -16939,7 +17265,7 @@ function hcHandler(_ref) {
       return hc.qMeasures;
     },
     addDimension(d) {
-      const dimension = typeof d === 'string' ? nxDimension(d) : _objectSpread2(_objectSpread2({}, d), {}, {
+      const dimension = typeof d === 'string' ? nxDimension$1(d) : _objectSpread2(_objectSpread2({}, d), {}, {
         qDef: d.qDef || {}
       });
       dimension.qDef.cId = dimension.qDef.cId || uid();
@@ -17022,6 +17348,69 @@ function hcHandler(_ref) {
   return handler;
 }
 
+const nxDimension = f => ({
+  qDef: {
+    qFieldDefs: [f]
+  }
+});
+function loHandler(_ref) {
+  let {
+    dc: lo,
+    def,
+    properties
+  } = _ref;
+  lo.qInitialDataFetch = lo.qInitialDataFetch || [];
+  const objectProperties = properties;
+  const handler = {
+    dimensions() {
+      if (!lo.qLibraryId && (!lo.qDef || !lo.qDef.qFieldDefs || lo.qDef.qFieldDefs.length === 0)) return [];
+      return [lo];
+    },
+    measures() {
+      return [];
+    },
+    addDimension(d) {
+      const dimension = typeof d === 'string' ? nxDimension(d) : _objectSpread2(_objectSpread2({}, d), {}, {
+        qDef: d.qDef || {}
+      });
+      dimension.qDef.cId = dimension.qDef.cId || uid();
+      dimension.qDef.qSortCriterias = lo.qDef.qSortCriterias || [{
+        qSortByState: 1,
+        qSortByLoadOrder: 1,
+        qSortByNumeric: 1,
+        qSortByAscii: 1
+      }];
+      Object.keys(dimension).forEach(k => {
+        lo[k] = dimension[k];
+      });
+      def.dimensions.added(dimension, objectProperties);
+      return dimension;
+    },
+    removeDimension(idx) {
+      const dimension = lo;
+      delete lo.qDef;
+      delete lo.qLibraryId;
+      def.dimensions.removed(dimension, objectProperties, idx);
+      return dimension;
+    },
+    addMeasure() {},
+    removeMeasure() {},
+    maxDimensions() {
+      return 1;
+    },
+    maxMeasures() {
+      return 0;
+    },
+    canAddDimension() {
+      return handler.dimensions().length === 0;
+    },
+    canAddMeasure() {
+      return false;
+    }
+  };
+  return handler;
+}
+
 /**
  * @interface LibraryField
  * @property {string} qLibraryId
@@ -17066,7 +17455,8 @@ function populateData(_ref) {
     const s = parts[i];
     p = s ? p[s] : p;
   }
-  const hc = hcHandler({
+  const createHandler = propertyPath.match('/qListObjectDef') ? loHandler : hcHandler;
+  const handler = createHandler({
     dc: p,
     def: target,
     properties
@@ -17074,9 +17464,9 @@ function populateData(_ref) {
   fields.forEach(f => {
     const type = fieldType(f);
     if (type === 'measure') {
-      hc.addMeasure(f);
+      handler.addMeasure(f);
     } else {
-      hc.addDimension(f);
+      handler.addDimension(f);
     }
   });
 }
@@ -18307,7 +18697,8 @@ function Header(_ref2) {
     sn,
     anchorEl,
     hovering,
-    focusHandler
+    focusHandler,
+    titleStyles = {}
   } = _ref2;
   const showTitle = layout.showTitles && !!layout.title;
   const showSubtitle = layout.showTitles && !!layout.subtitle;
@@ -18365,11 +18756,13 @@ function Header(_ref2) {
   }, showTitle && /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h6",
     noWrap: true,
-    className: CellTitle.className
+    className: CellTitle.className,
+    style: titleStyles.main
   }, layout.title), showSubtitle && /*#__PURE__*/React__default.createElement(Typography, {
     variant: "body2",
     noWrap: true,
-    className: CellSubTitle.className
+    className: CellSubTitle.className,
+    style: titleStyles.subTitle
   }, layout.subtitle))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, Toolbar));
@@ -18402,7 +18795,8 @@ const CellFooter = {
 };
 function Footer(_ref2) {
   let {
-    layout
+    layout,
+    titleStyles = {}
   } = _ref2;
   return layout && layout.showTitles && layout.footnote ? /*#__PURE__*/React__default.createElement(StyledGrid, {
     container: true
@@ -18412,7 +18806,8 @@ function Footer(_ref2) {
   }, /*#__PURE__*/React__default.createElement(Typography, {
     noWrap: true,
     variant: "body2",
-    className: CellFooter.className
+    className: CellFooter.className,
+    style: titleStyles.footer
   }, layout.footnote))) : null;
 }
 
@@ -18642,7 +19037,7 @@ function getBackgroundSize(bgComp) {
 function resolveImageUrl(app, relativeUrl) {
   return relativeUrl ? getSenseServerUrl(app) + relativeUrl : undefined;
 }
-const resolveBgImage = (bgComp, app) => {
+function resolveBgImage(bgComp, app) {
   const bgImageDef = bgComp === null || bgComp === void 0 ? void 0 : bgComp.bgImage;
   if (bgImageDef) {
     let url = '';
@@ -18663,8 +19058,8 @@ const resolveBgImage = (bgComp, app) => {
     } : undefined;
   }
   return undefined;
-};
-const resolveBgColor = (bgComp, theme) => {
+}
+function resolveBgColor(bgComp, theme, objectType) {
   const bgColor = bgComp === null || bgComp === void 0 ? void 0 : bgComp.bgColor;
   if (bgColor && theme) {
     if (bgColor.useExpression) {
@@ -18672,8 +19067,32 @@ const resolveBgColor = (bgComp, theme) => {
     }
     return bgColor.color && bgColor.color.color !== 'none' ? theme.getColorPickerColor(bgColor.color, true) : undefined;
   }
+  if (theme && objectType) {
+    return theme.getStyle("object.".concat(objectType), '', 'backgroundColor');
+  }
+  if (theme) {
+    return theme.getStyle('', '', 'backgroundColor');
+  }
   return undefined;
-};
+}
+function unfurlFontStyle(fontStyle, target) {
+  if (fontStyle && Array.isArray(fontStyle)) {
+    return fontStyle;
+  }
+  return target === 'main' ? ['bold'] : [];
+}
+function resolveTextStyle(textComp, target, theme, objectType) {
+  var _textComp$title;
+  const textProps = (textComp === null || textComp === void 0 ? void 0 : (_textComp$title = textComp.title) === null || _textComp$title === void 0 ? void 0 : _textComp$title[target]) || {};
+  const fontStyle = unfurlFontStyle(textProps.fontStyle, target);
+  return {
+    fontFamily: textProps.fontFamily || theme.getStyle("object.".concat(objectType), "title.".concat(target), 'fontFamily'),
+    color: textProps.color && textProps.color.color !== 'none' ? theme.getColorPickerColor(textProps.color, true) : theme.getStyle("object.".concat(objectType), target, 'color'),
+    fontWeight: fontStyle.includes('bold') ? 'bold' : 'normal',
+    fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',
+    textDecoration: fontStyle.includes('underline') ? 'underline' : 'initial'
+  };
+}
 
 /**
  * @interface
@@ -18915,7 +19334,8 @@ const loadType = async _ref5 => {
     app,
     selections,
     nebbie,
-    focusHandler
+    focusHandler,
+    emitter
   } = _ref5;
   try {
     const snType = await getType({
@@ -18928,7 +19348,8 @@ const loadType = async _ref5 => {
       app,
       selections,
       nebbie,
-      focusHandler
+      focusHandler,
+      emitter
     });
     return sn;
   } catch (err) {
@@ -18958,7 +19379,8 @@ const Cell = forwardRef((_ref6, ref) => {
     initialSnPlugins,
     initialError,
     onMount,
-    currentId
+    currentId,
+    emitter
   } = _ref6;
   const {
     app,
@@ -18997,7 +19419,7 @@ const Cell = forwardRef((_ref6, ref) => {
   });
   const [bgColor, setBgColor] = useState$1(undefined);
   const [bgImage, setBgImage] = useState$1(undefined); // {url: "", size: "", pos: ""}
-
+  const [titleStyles, setTitleStyles] = useState$1(undefined);
   const focusHandler = useRef({
     focusToolbarButton(last) {
       // eslint-disable-next-line react/no-this-in-sfc
@@ -19008,9 +19430,16 @@ const Cell = forwardRef((_ref6, ref) => {
     eventmixin(focusHandler.current);
   }, []);
   useEffect$1(() => {
-    const bgComp = layout !== null && layout !== void 0 && layout.components ? layout.components.find(comp => comp.key === 'general') : null;
-    setBgColor(resolveBgColor(bgComp, halo.public.theme));
-    setBgImage(resolveBgImage(bgComp, halo.app));
+    if (layout && halo.public.theme) {
+      const bgComp = layout.components ? layout.components.find(comp => comp.key === 'general') : null;
+      setTitleStyles({
+        main: resolveTextStyle(bgComp, 'main', halo.public.theme, layout.visualization),
+        footer: resolveTextStyle(bgComp, 'footer', halo.public.theme, layout.visualization),
+        subTitle: resolveTextStyle(bgComp, 'subTitle', halo.public.theme, layout.visualization)
+      });
+      setBgColor(resolveBgColor(bgComp, halo.public.theme, layout.visualization));
+      setBgImage(resolveBgImage(bgComp, halo.app));
+    }
   }, [layout, halo.public.theme, halo.app, themeName]);
   focusHandler.current.blurCallback = resetFocus => {
     halo.root.toggleFocusOfCells();
@@ -19082,7 +19511,8 @@ const Cell = forwardRef((_ref6, ref) => {
         app,
         selections,
         nebbie,
-        focusHandler: focusHandler.current
+        focusHandler: focusHandler.current,
+        emitter
       });
       if (sn) {
         dispatch({
@@ -19224,7 +19654,8 @@ const Cell = forwardRef((_ref6, ref) => {
     sn: state.sn,
     anchorEl: cellNode,
     hovering: hovering,
-    focusHandler: focusHandler.current
+    focusHandler: focusHandler.current,
+    titleStyles: titleStyles
   }, "\xA0"), /*#__PURE__*/React__default.createElement(Grid, {
     tabIndex: keyboardNavigation ? 0 : -1,
     onKeyDown: keyboardNavigation ? handleKeyDown : null,
@@ -19235,7 +19666,8 @@ const Cell = forwardRef((_ref6, ref) => {
     },
     ref: contentRef
   }, Content), /*#__PURE__*/React__default.createElement(Footer, {
-    layout: layout
+    layout: layout,
+    titleStyles: titleStyles
   })), state.longRunningQuery && /*#__PURE__*/React__default.createElement(LongRunningQuery, {
     canCancel: canCancel,
     canRetry: canRetry,
@@ -19251,6 +19683,7 @@ function glue$1(_ref) {
     initialSnOptions,
     initialSnPlugins,
     onMount,
+    emitter,
     initialError
   } = _ref;
   const {
@@ -19266,7 +19699,8 @@ function glue$1(_ref) {
     initialSnOptions: initialSnOptions,
     initialSnPlugins: initialSnPlugins,
     initialError: initialError,
-    onMount: onMount
+    onMount: onMount,
+    emitter: emitter
   }), element, currentId);
   const unmount = () => {
     root.remove(portal);
@@ -19366,6 +19800,7 @@ function viz() {
   });
   let initialSnOptions = {};
   let initialSnPlugins = [];
+  const emitter = new nodeEventEmitter();
   const setSnOptions = async opts => {
     if (mountedReference) {
       (async () => {
@@ -19456,6 +19891,24 @@ function viz() {
       }
       return propertyTree;
     },
+    /**
+     * Listens to custom events from inside the visualization. See useEmitter
+     * @experimental
+     * @param {string} eventName Event name to listen to
+     * @param {Function} listener Callback function to invoke
+     */
+    on(eventName, listener) {
+      emitter.on(eventName, listener);
+    },
+    /**
+     * Removes a listener
+     * @experimental
+     * @param {string} eventName Event name to remove from
+     * @param {Function} listener Callback function to remove
+     */
+    off(eventName, listener) {
+      emitter.off(eventName, listener);
+    },
     // ===== unexposed experimental API - use at own risk ======
     __DO_NOT_USE__: {
       mount(element) {
@@ -19470,7 +19923,8 @@ function viz() {
           initialSnOptions,
           initialSnPlugins,
           initialError,
-          onMount
+          onMount,
+          emitter
         });
         return mounted;
       },
@@ -21417,7 +21871,7 @@ function onTakeSnapshot(cb) {
  * @ignore
  * @example
  * import { onContextMenu } from '@nebula.js/stardust';
- 
+
  * onContextMenu((menu, event) => {
  *  menu.addItem(item, index);
  * });
@@ -21471,6 +21925,32 @@ function useRenderState() {
   };
 }
 
+/**
+ * Gets an event emitter instance for the visualization.
+ * @entry
+ * @experimental
+ * @returns {Emitter} The emitter instance. Implements https://nodejs.org/api/events.html#class-eventemitter.
+ * @example
+ * // In a Nebula visualization
+ * import { useEmitter } from '@nebula.js/stardust';
+ * useEffect(()=> {
+ *   // on some trigger
+ *   emitter.emit("trigger", params)
+ * }, [...])
+ *
+ * // In a mashup
+ * const viz = await n.render({
+ *   element: el,
+ *   id: 'abcdef'
+ * });
+ * viz.on("trigger", ()=> {
+ *   // do something
+ * })
+ */
+function useEmitter() {
+  return useInternalContext('emitter');
+}
+
 /**
  * @experimental
  * @interface Keyboard
@@ -21652,6 +22132,7 @@ function createWithHooks(generator, opts, galaxy) {
       nebbie: opts.nebbie,
       element: undefined,
       // set on mount
+      emitter: opts.emitter,
       // ---- singletons ----
       deviceType: galaxy.deviceType,
       theme: undefined,
@@ -24841,5 +25322,5 @@ const __DO_NOT_USE__ = {
   locale
 };
 
-export { mocker as EnigmaMocker, __DO_NOT_USE__, conversion, index as embed, onContextMenu, onTakeSnapshot, useAction, useApp, useAppLayout, useConstraints, useDeviceType, useEffect, useElement, useEmbed, useGlobal, useImperativeHandle, useKeyboard, useLayout, useMemo, useModel, useOptions, usePlugins, usePromise, useRect, useRenderState, useSelections, useStaleLayout, useState, useTheme, useTranslator };
+export { mocker as EnigmaMocker, __DO_NOT_USE__, conversion, index as embed, onContextMenu, onTakeSnapshot, useAction, useApp, useAppLayout, useConstraints, useDeviceType, useEffect, useElement, useEmbed, useEmitter, useGlobal, useImperativeHandle, useKeyboard, useLayout, useMemo, useModel, useOptions, usePlugins, usePromise, useRect, useRenderState, useSelections, useStaleLayout, useState, useTheme, useTranslator };
 //# sourceMappingURL=dev.js.map