@nebula.js/stardust 4.0.0-alpha.4 → 4.0.0-alpha.6

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.0.0-alpha.4
+* @nebula.js/stardust v4.0.0-alpha.6
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -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 = "0bc0" ;
+const NEBULA_VERSION_HASH = "9917" ;
 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.4" );
+  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.6" );
   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) => {
@@ -9376,7 +9381,7 @@ function getFieldKeyboardNavigation(_ref) {
         setStartedRange(true);
         break;
       case KEYS.SPACE:
-        select([+event.currentTarget.getAttribute('data-n')]);
+        select([+event.currentTarget.getAttribute('data-n')], false, event);
         break;
       case KEYS.ARROW_DOWN:
       case KEYS.ARROW_RIGHT:
@@ -9641,6 +9646,16 @@ const getValueStateClasses = _ref2 => {
   return clazzArr;
 };
 
+const CELL_PADDING_LEFT = 9;
+const ICON_WIDTH = 12;
+const ICON_PADDING = 7;
+const BUTTON_ICON_WIDTH = ICON_WIDTH + (ICON_PADDING + 1) * 2; // 1 is border width
+const REMOVE_TICK_LIMIT = 80; // an item width equal to or less than this, will hide the select tick
+const SCROLL_BAR_WIDTH = 10; // TODO: ignore this - instead set the styling only show on hover...
+const ITEM_MAX_WIDTH = 150;
+const FREQUENCY_WIDTH = 40;
+const ITEM_MIN_WIDTH = 56;
+const CHECKBOX_WIDTH = 20;
 const frequencyTextNone = '-';
 const barPadPx = 4;
 const barBorderWidthPx = 1;
@@ -9660,11 +9675,6 @@ const getBarWidth = _ref => {
 };
 const getFrequencyText = qFrequency => qFrequency || frequencyTextNone;
 
-const CELL_PADDING_LEFT = 9;
-const ICON_WIDTH = 12;
-const ICON_PADDING = 7;
-const BUTTON_ICON_WIDTH = ICON_WIDTH + (ICON_PADDING + 1) * 2; // 1 is border width
-
 const getSelectedStyle = _ref => {
   let {
     theme
@@ -9690,7 +9700,7 @@ const ellipsis = {
 const iconWidth = 24; // tick and lock icon width in px
 
 const RowColRoot = styled$1('div', {
-  shouldForwardProp: prop => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense', 'frequencyWidth', 'showIcon', 'checkboxes'].includes(prop)
+  shouldForwardProp: prop => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense', 'frequencyWidth'].includes(prop)
 })(_ref2 => {
   var _theme$listBox$conten, _theme$listBox, _theme$listBox$conten2, _theme$listBox$conten3, _theme$listBox2, _theme$listBox2$conte, _theme$listBox3, _theme$listBox3$conte, _theme$listBox4, _theme$listBox4$conte;
   let {
@@ -9699,9 +9709,7 @@ const RowColRoot = styled$1('div', {
     isGridMode,
     isGridCol,
     dense,
-    frequencyWidth,
-    showIcon,
-    checkboxes
+    frequencyWidth
   } = _ref2;
   return {
     '&:focus': {
@@ -9746,7 +9754,7 @@ const RowColRoot = styled$1('div', {
       flexBasis: flexBasisProp,
       lineHeight: '16px',
       userSelect: 'none',
-      paddingRight: showIcon || checkboxes ? '1px' : "".concat(iconWidth, "px")
+      paddingRight: '1px'
     }, ellipsis), {}, {
       whiteSpace: 'pre',
       // to keep white-space on highlight
@@ -9756,15 +9764,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)]: {
@@ -9818,7 +9821,7 @@ const RowColRoot = styled$1('div', {
     ["& .".concat(rowColClasses.frequencyCount)]: _objectSpread2(_objectSpread2({
       justifyContent: 'flex-end'
     }, ellipsis), {}, {
-      flex: "0 1 ".concat(frequencyWidth + (showIcon || checkboxes ? 0 : iconWidth), "px"),
+      flex: "0 1 ".concat(frequencyWidth, "px"),
       textAlign: 'right',
       paddingLeft: '2px'
     }),
@@ -10018,7 +10021,6 @@ function ValueField(_ref) {
   let {
     label,
     color,
-    highlighted = false,
     dense,
     showGray = true,
     checkboxes,
@@ -10028,14 +10030,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'
     }
@@ -10046,7 +10048,6 @@ function LabelTag(_ref) {
   let {
     label,
     color,
-    highlighted,
     dense,
     showGray,
     checkboxes,
@@ -10057,7 +10058,6 @@ function LabelTag(_ref) {
     return /*#__PURE__*/React__default.createElement(ValueField, {
       label: label,
       color: color,
-      highlighted: highlighted,
       dense: dense,
       showGray: showGray,
       checkboxes: checkboxes,
@@ -10080,7 +10080,6 @@ function CheckboxField(_ref) {
     isGridCol,
     showGray,
     isSingleSelect,
-    highlighted,
     checkboxes,
     valueTextAlign
   } = _ref;
@@ -10108,7 +10107,6 @@ function CheckboxField(_ref) {
     label: /*#__PURE__*/React__default.createElement(LabelTag, {
       label: label,
       color: color,
-      highlighted: highlighted,
       dense: dense,
       showGray: showGray,
       checkboxes: checkboxes,
@@ -10126,18 +10124,19 @@ function LabelsWithRanges(_ref) {
     showGray,
     checkboxes
   } = _ref;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, 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 {
@@ -10188,7 +10187,6 @@ function Field(_ref) {
     isGridCol,
     showGray,
     isSingleSelect,
-    highlighted,
     checkboxes,
     valueTextAlign
   } = _ref;
@@ -10203,13 +10201,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,
@@ -10309,7 +10305,7 @@ const ItemGrid = styled$1(Grid, {
     dataLayout,
     layoutOrder,
     itemPadding,
-    checkboxes
+    cellPaddingRight
   } = _ref;
   return {
     ["&.".concat(rowColClasses.fieldRoot)]: _objectSpread2(_objectSpread2({}, getGridItemSizes({
@@ -10317,7 +10313,7 @@ const ItemGrid = styled$1(Grid, {
       layoutOrder,
       itemPadding
     })), {}, {
-      paddingRight: checkboxes ? '8px' : undefined
+      paddingRight: cellPaddingRight ? '8px' : undefined
     })
   };
 });
@@ -10367,7 +10363,7 @@ function RowColumn(_ref) {
     histogram = false,
     keyboard,
     showGray = true,
-    showTick: sizePermitsTick = true,
+    showTick: sizePermitsTickOrLock = true,
     columnCount = 1,
     rowCount = 1,
     dataOffset,
@@ -10463,7 +10459,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 : '';
-
   // Search highlights. Split up labelText span into several and add the highlighted class to matching sub-strings.
 
   let labels;
@@ -10488,23 +10483,23 @@ function RowColumn(_ref) {
   const isFirstElement = index === 0;
   const flexBasisVal = checkboxes ? 'auto' : 'max-content';
   const showLock = isSelected && isLocked;
-  const showTick = !checkboxes && isSelected && !isLocked && sizePermitsTick;
-  const showIcon = !checkboxes && (showTick || showLock);
+  const showTick = !checkboxes && isSelected && !isLocked;
+  const showIcon = !checkboxes && sizePermitsTickOrLock;
+  const cellPaddingRight = checkboxes || !sizePermitsTickOrLock;
   return /*#__PURE__*/React__default.createElement(RowColRoot$1, {
     className: rowColClasses.barContainer,
     flexBasisProp: flexBasisVal,
     style: styles,
-    showIcon: showIcon,
-    checkboxes: checkboxes,
     isGridCol: isGridCol,
     isGridMode: dataLayout === 'grid',
     dense: dense,
-    frequencyWidth: frequencyWidth
+    frequencyWidth: frequencyWidth,
+    "data-testid": "listbox.item"
   }, /*#__PURE__*/React__default.createElement(ItemGrid, {
     ref: rowRef,
     container: true,
     dataLayout: dataLayout,
-    checkboxes: checkboxes,
+    cellPaddingRight: cellPaddingRight,
     layoutOrder: layoutOrder,
     itemPadding: itemPadding,
     gap: 0,
@@ -12101,8 +12096,6 @@ function handleSetOverflowDisclaimer(_ref) {
   overflowDisclaimer.set(show);
 }
 
-const REMOVE_TICK_LIMIT = 80; // an item width equal to or less than this, will hide the select tick
-
 const {
   StyledFixedSizeList,
   StyledFixedSizeGrid
@@ -12331,12 +12324,6 @@ function calculateColumnMode(_ref) {
   };
 }
 
-const SCROLL_BAR_WIDTH = 10; // TODO: ignore this - instead set the styling only show on hover...
-const ITEM_MAX_WIDTH = 150;
-const FREQUENCY_WIDTH = 40;
-const ITEM_MIN_WIDTH = 56;
-const CHECKBOX_WIDTH = 20;
-
 function calculateRowMode(_ref) {
   let {
     maxVisibleColumns,
@@ -12348,7 +12335,7 @@ function calculateRowMode(_ref) {
   const maxColumns = (maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.maxColumns) || 3;
   const innerWidth = containerWidth - SCROLL_BAR_WIDTH;
   let columnCount;
-  const autoColumnCount = Math.min(listCount, Math.ceil(innerWidth / Math.max(itemMinWidth, columnAutoWidth))); // TODO: smarter sizing... based on glyph count + font size etc...??
+  const autoColumnCount = Math.min(listCount, Math.max(1, Math.round(innerWidth / Math.max(itemMinWidth, columnAutoWidth)))); // TODO: smarter sizing... based on glyph count + font size etc...??
   if ((maxVisibleColumns === null || maxVisibleColumns === void 0 ? void 0 : maxVisibleColumns.auto) !== false) {
     columnCount = autoColumnCount;
   } else {
@@ -12386,8 +12373,16 @@ function getListSizes(_ref) {
   } = layoutOptions;
   const frequencyAddWidth = freqIsAllowed ? FREQUENCY_WIDTH : 0;
   const checkboxAddWidth = checkboxes ? CHECKBOX_WIDTH : 0;
-  const dynamicItemMinWidth = ITEM_MIN_WIDTH + frequencyAddWidth + checkboxAddWidth;
-  const columnAutoWidth = Math.max(Math.min(ITEM_MAX_WIDTH, textWidth + 18 + frequencyAddWidth + checkboxAddWidth), dynamicItemMinWidth);
+  const tickIconWidth = CHECKBOX_WIDTH;
+  let dynamicItemMinWidth = ITEM_MIN_WIDTH + frequencyAddWidth + checkboxAddWidth;
+  if (!checkboxes && dynamicItemMinWidth >= REMOVE_TICK_LIMIT) {
+    dynamicItemMinWidth += tickIconWidth;
+  }
+  let columnAutoWidth = textWidth + 18 + frequencyAddWidth + checkboxAddWidth;
+  if (!checkboxes && columnAutoWidth >= REMOVE_TICK_LIMIT) {
+    columnAutoWidth += tickIconWidth;
+  }
+  columnAutoWidth = Math.min(ITEM_MAX_WIDTH, Math.max(columnAutoWidth, dynamicItemMinWidth));
   let overflowStyling;
   let columnCount;
   let columnWidth;
@@ -13107,7 +13102,7 @@ function ListBox(_ref) {
     });
     if (itemsLoader.pages.length && !awaitingFrequencyMax) {
       // All necessary data fetching done - signal rendering done!
-      renderedCallback();
+      renderedCallback === null || renderedCallback === void 0 ? void 0 : renderedCallback();
     }
   }
   const isItemLoaded = useCallback(index => {
@@ -13497,7 +13492,8 @@ const Item = React__default.forwardRef((_ref, ref) => {
     size: "large",
     disableRipple: true,
     "aria-expanded": ariaExpanded,
-    "aria-controls": "moreMenuList"
+    "aria-controls": "moreMenuList",
+    "data-testid": "actions-toolbar-".concat(item.key)
   }, hasSvgIconShape && SvgIcon$2(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     style: {
@@ -16008,6 +16004,23 @@ function getListboxActionProps(_ref) {
   };
 }
 
+function ListBoxError(_ref) {
+  let {
+    text
+  } = _ref;
+  const {
+    translator
+  } = useContext(InstanceContext);
+  const StyledDiv = styled$1('div')(() => ({
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }));
+  return /*#__PURE__*/React__default.createElement(StyledDiv, null, translator.get(text));
+}
+
 const PREFIX$4 = 'ListBoxInline';
 const classes$4 = {
   listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader"),
@@ -16082,9 +16095,7 @@ function ListBoxInline(_ref3) {
     calculatePagesHeight,
     showGray = true,
     scrollState = undefined,
-    renderedCallback
-  } = options;
-  let {
+    renderedCallback,
     toolbar = true
   } = options;
 
@@ -16129,6 +16140,8 @@ function ListBoxInline(_ref3) {
   const [appSelections] = useAppSelections(app);
   const titleRef = useRef(null);
   const [selectionState$1] = useState$1(() => selectionState());
+  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,
@@ -16151,11 +16164,8 @@ function ListBoxInline(_ref3) {
     // 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);
@@ -16179,7 +16189,7 @@ function ListBoxInline(_ref3) {
         selections.removeListener('deactivated', hide);
       }
     };
-  }, [selections, toolbar]);
+  }, [selections]);
   useEffect$1(() => {
     if (!searchContainer || !searchContainer.current) {
       return;
@@ -16213,7 +16223,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;
@@ -16236,7 +16246,7 @@ function ListBoxInline(_ref3) {
     selections
   });
   const shouldAutoFocus = searchVisible && search === 'toggle';
-  const showSearchIcon = searchEnabled !== false && search === 'toggle' && !(constraints !== null && constraints !== void 0 && constraints.active);
+  const showSearchIcon = searchEnabled !== false && search === 'toggle';
   const showSearchOrLockIcon = isLocked || showSearchIcon;
   const showIcons = showSearchOrLockIcon || isDrillDown;
   const iconsWidth = (showSearchOrLockIcon ? BUTTON_ICON_WIDTH : 0) + (isDrillDown ? ICON_WIDTH + ICON_PADDING : 0); // Drill-down icon needs padding right so there is space between the icon and the title
@@ -16249,7 +16259,43 @@ function ListBoxInline(_ref3) {
   if (isGridMode) {
     containerPadding = layoutOptions.layoutOrder === 'row' ? '2px 4px' : '2px 6px 2px 4px';
   }
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, toolbarDetachedOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$6({
+  const searchIconComp = constraints !== null && constraints !== void 0 && constraints.active ? /*#__PURE__*/React__default.createElement(SearchIcon, {
+    title: translator.get('Listbox.Search'),
+    size: "large",
+    style: {
+      fontSize: '12px',
+      padding: '7px'
+    }
+  }) : /*#__PURE__*/React__default.createElement(IconButton, {
+    onClick: onShowSearch,
+    tabIndex: -1,
+    title: translator.get('Listbox.Search'),
+    size: "large",
+    disableRipple: true,
+    "data-testid": "search-toggle-btn"
+  }, /*#__PURE__*/React__default.createElement(SearchIcon, {
+    style: {
+      fontSize: '12px'
+    }
+  }));
+  const lockIconComp = selectDisabled() ? /*#__PURE__*/React__default.createElement(Lock, {
+    size: "large",
+    style: {
+      fontSize: '12px',
+      padding: '7px'
+    }
+  }) : /*#__PURE__*/React__default.createElement(IconButton, {
+    title: translator.get('SelectionToolbar.ClickToUnlock'),
+    tabIndex: -1,
+    onClick: unlock,
+    size: "large"
+  }, /*#__PURE__*/React__default.createElement(Lock, {
+    disableRipple: true,
+    style: {
+      fontSize: '12px'
+    }
+  }));
+  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",
@@ -16268,7 +16314,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: {
@@ -16295,29 +16341,7 @@ function ListBoxInline(_ref3) {
       alignItems: 'center',
       width: iconsWidth
     }
-  }, isLocked ? /*#__PURE__*/React__default.createElement(IconButton, {
-    title: translator.get('SelectionToolbar.ClickToUnlock'),
-    tabIndex: -1,
-    onClick: unlock,
-    disabled: selectDisabled(),
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(Lock, {
-    disableRipple: true,
-    style: {
-      fontSize: '12px'
-    }
-  })) : showSearchIcon && /*#__PURE__*/React__default.createElement(IconButton, {
-    onClick: onShowSearch,
-    tabIndex: -1,
-    title: translator.get('Listbox.Search'),
-    size: "large",
-    disableRipple: true,
-    "data-testid": "search-toggle-btn"
-  }, /*#__PURE__*/React__default.createElement(SearchIcon, {
-    style: {
-      fontSize: '12px'
-    }
-  })), isDrillDown && /*#__PURE__*/React__default.createElement(DrillDownIcon, {
+  }, isLocked ? lockIconComp : showSearchIcon && searchIconComp, isDrillDown && /*#__PURE__*/React__default.createElement(DrillDownIcon, {
     tabIndex: -1,
     title: translator.get('Listbox.DrillDown'),
     size: "large",
@@ -16380,7 +16404,9 @@ 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, _ref4 => {
     let {
       height,
       width
@@ -16829,7 +16855,7 @@ function removeIndex(array, index) {
   array.splice(removeIdx, 1);
   return removeIdx;
 }
-const nxDimension = f => ({
+const nxDimension$1 = f => ({
   qDef: {
     qFieldDefs: [f]
   }
@@ -16860,7 +16886,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();
@@ -16943,6 +16969,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
@@ -16987,7 +17076,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
@@ -16995,9 +17085,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);
     }
   });
 }
@@ -18228,7 +18318,8 @@ function Header(_ref2) {
     sn,
     anchorEl,
     hovering,
-    focusHandler
+    focusHandler,
+    titleStyles = {}
   } = _ref2;
   const showTitle = layout.showTitles && !!layout.title;
   const showSubtitle = layout.showTitles && !!layout.subtitle;
@@ -18286,11 +18377,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));
@@ -18323,7 +18416,8 @@ const CellFooter = {
 };
 function Footer(_ref2) {
   let {
-    layout
+    layout,
+    titleStyles = {}
   } = _ref2;
   return layout && layout.showTitles && layout.footnote ? /*#__PURE__*/React__default.createElement(StyledGrid, {
     container: true
@@ -18333,7 +18427,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;
 }
 
@@ -18563,7 +18658,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 = '';
@@ -18584,8 +18679,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) {
@@ -18593,8 +18688,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
@@ -18836,7 +18955,8 @@ const loadType = async _ref5 => {
     app,
     selections,
     nebbie,
-    focusHandler
+    focusHandler,
+    emitter
   } = _ref5;
   try {
     const snType = await getType({
@@ -18849,16 +18969,26 @@ const loadType = async _ref5 => {
       app,
       selections,
       nebbie,
-      focusHandler
+      focusHandler,
+      emitter
     });
     return sn;
   } catch (err) {
-    dispatch({
-      type: 'ERROR',
-      error: {
-        title: err.message
-      }
-    });
+    if (!version) {
+      dispatch({
+        type: 'ERROR',
+        error: {
+          title: "Could not find a version of '".concat(visualization, "' that supports current object version. Did you forget to register ").concat(visualization, "?")
+        }
+      });
+    } else {
+      dispatch({
+        type: 'ERROR',
+        error: {
+          title: err.message
+        }
+      });
+    }
   }
   return undefined;
 };
@@ -18870,7 +19000,8 @@ const Cell = forwardRef((_ref6, ref) => {
     initialSnPlugins,
     initialError,
     onMount,
-    currentId
+    currentId,
+    emitter
   } = _ref6;
   const {
     app,
@@ -18909,7 +19040,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
@@ -18920,9 +19051,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();
@@ -18994,7 +19132,8 @@ const Cell = forwardRef((_ref6, ref) => {
         app,
         selections,
         nebbie,
-        focusHandler: focusHandler.current
+        focusHandler: focusHandler.current,
+        emitter
       });
       if (sn) {
         dispatch({
@@ -19015,15 +19154,6 @@ const Cell = forwardRef((_ref6, ref) => {
 
     // Load supernova
     const withVersion = types.getSupportedVersion(layout.visualization, layout.version);
-    if (!withVersion) {
-      dispatch({
-        type: 'ERROR',
-        error: {
-          title: "Could not find a version of '".concat(layout.visualization, "' that supports current object version. Did you forget to register ").concat(layout.visualization, "?")
-        }
-      });
-      return undefined;
-    }
     load(layout.visualization, withVersion);
     return () => {};
   }, [types, state.sn, model, selections, layout, appLayout, language]);
@@ -19145,7 +19275,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,
@@ -19156,7 +19287,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,
@@ -19172,6 +19304,7 @@ function glue$1(_ref) {
     initialSnOptions,
     initialSnPlugins,
     onMount,
+    emitter,
     initialError
   } = _ref;
   const {
@@ -19187,7 +19320,8 @@ function glue$1(_ref) {
     initialSnOptions: initialSnOptions,
     initialSnPlugins: initialSnPlugins,
     initialError: initialError,
-    onMount: onMount
+    onMount: onMount,
+    emitter: emitter
   }), element, currentId);
   const unmount = () => {
     root.remove(portal);
@@ -19287,6 +19421,7 @@ function viz() {
   });
   let initialSnOptions = {};
   let initialSnPlugins = [];
+  const emitter = new nodeEventEmitter();
   const setSnOptions = async opts => {
     if (mountedReference) {
       (async () => {
@@ -19377,6 +19512,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) {
@@ -19391,7 +19544,8 @@ function viz() {
           initialSnOptions,
           initialSnPlugins,
           initialError,
-          onMount
+          onMount,
+          emitter
         });
         return mounted;
       },
@@ -21338,7 +21492,7 @@ function onTakeSnapshot(cb) {
  * @ignore
  * @example
  * import { onContextMenu } from '@nebula.js/stardust';
- 
+
  * onContextMenu((menu, event) => {
  *  menu.addItem(item, index);
  * });
@@ -21392,6 +21546,32 @@ function useRenderState() {
   };
 }
 
+/**
+ * Gets an event emitter instance for the visualization.
+ * @entry
+ * @experimental
+ * @returns {Emitter} The emitter instance.
+ * @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
@@ -21573,6 +21753,7 @@ function createWithHooks(generator, opts, galaxy) {
       nebbie: opts.nebbie,
       element: undefined,
       // set on mount
+      emitter: opts.emitter,
       // ---- singletons ----
       deviceType: galaxy.deviceType,
       theme: undefined,
@@ -24762,5 +24943,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