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

package/dist/stardust.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.
 */
@@ -1563,7 +1563,7 @@
 	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",
@@ -15420,7 +15420,7 @@
 	  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', ''));
 	});
@@ -15628,7 +15628,7 @@
 	  const appRef = React.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);
@@ -21702,7 +21702,7 @@
 	  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,
@@ -21743,6 +21743,11 @@
 	  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();
@@ -21750,7 +21755,7 @@
 	      selections,
 	      elemNumbers: additive ? elemNumbers : elementIds,
 	      isSingleSelect: selectionState.isSingleSelect,
-	      toggle: !selectionState.isSingleSelect
+	      toggle
 	    });
 	  };
 	  const handleSingleSelectKey = (event, target) => {
@@ -22007,7 +22012,7 @@
 	        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:
@@ -22272,6 +22277,16 @@
 	  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;
@@ -22291,11 +22306,6 @@
 	};
 	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
@@ -22321,7 +22331,7 @@
 	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 {
@@ -22330,9 +22340,7 @@
 	    isGridMode,
 	    isGridCol,
 	    dense,
-	    frequencyWidth,
-	    showIcon,
-	    checkboxes
+	    frequencyWidth
 	  } = _ref2;
 	  return {
 	    '&:focus': {
@@ -22377,7 +22385,7 @@
 	      flexBasis: flexBasisProp,
 	      lineHeight: '16px',
 	      userSelect: 'none',
-	      paddingRight: showIcon || checkboxes ? '1px' : "".concat(iconWidth, "px")
+	      paddingRight: '1px'
 	    }, ellipsis), {}, {
 	      whiteSpace: 'pre',
 	      // to keep white-space on highlight
@@ -22387,15 +22395,10 @@
 	    ["& .".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)]: {
@@ -22449,7 +22452,7 @@
 	    ["& .".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'
 	    }),
@@ -22649,7 +22652,6 @@
 	  let {
 	    label,
 	    color,
-	    highlighted = false,
 	    dense,
 	    showGray = true,
 	    checkboxes,
@@ -22659,14 +22661,14 @@
 	  return /*#__PURE__*/React.createElement(Typography$1, {
 	    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.createElement("span", {
-	    dir: "auto",
 	    style: {
 	      whiteSpace: 'pre'
 	    }
@@ -22677,7 +22679,6 @@
 	  let {
 	    label,
 	    color,
-	    highlighted,
 	    dense,
 	    showGray,
 	    checkboxes,
@@ -22688,7 +22689,6 @@
 	    return /*#__PURE__*/React.createElement(ValueField, {
 	      label: label,
 	      color: color,
-	      highlighted: highlighted,
 	      dense: dense,
 	      showGray: showGray,
 	      checkboxes: checkboxes,
@@ -22711,7 +22711,6 @@
 	    isGridCol,
 	    showGray,
 	    isSingleSelect,
-	    highlighted,
 	    checkboxes,
 	    valueTextAlign
 	  } = _ref;
@@ -22739,7 +22738,6 @@
 	    label: /*#__PURE__*/React.createElement(LabelTag, {
 	      label: label,
 	      color: color,
-	      highlighted: highlighted,
 	      dense: dense,
 	      showGray: showGray,
 	      checkboxes: checkboxes,
@@ -22757,18 +22755,19 @@
 	    showGray,
 	    checkboxes
 	  } = _ref;
-	  return /*#__PURE__*/React.createElement(React.Fragment, null, labels.map((_ref2, index) => {
+	  const text = labels.map((_ref2, index) => {
 	    let [label, highlighted] = _ref2;
-	    const key = "".concat(index);
-	    return /*#__PURE__*/React.createElement(ValueField, {
-	      label: label,
-	      key: key,
-	      highlighted: highlighted,
-	      dense: dense,
-	      showGray: showGray,
-	      checkboxes: checkboxes
-	    });
-	  }));
+	    return /*#__PURE__*/React.createElement("span", {
+	      id: index,
+	      className: highlighted ? rowColClasses.highlighted : ''
+	    }, label);
+	  });
+	  return /*#__PURE__*/React.createElement(ValueField, {
+	    label: text,
+	    dense: dense,
+	    showGray: showGray,
+	    checkboxes: checkboxes
+	  });
 	}
 	function FieldWithRanges(_ref3) {
 	  let {
@@ -22819,7 +22818,6 @@
 	    isGridCol,
 	    showGray,
 	    isSingleSelect,
-	    highlighted,
 	    checkboxes,
 	    valueTextAlign
 	  } = _ref;
@@ -22834,13 +22832,11 @@
 	    isGridCol: isGridCol,
 	    showGray: showGray,
 	    isSingleSelect: isSingleSelect,
-	    highlighted: highlighted,
 	    checkboxes: checkboxes,
 	    valueTextAlign: valueTextAlign
 	  }) : /*#__PURE__*/React.createElement(ValueField, {
 	    label: label,
 	    color: color,
-	    highlighted: false,
 	    dense: dense,
 	    showGray: true,
 	    checkboxes: checkboxes,
@@ -22940,7 +22936,7 @@
 	    dataLayout,
 	    layoutOrder,
 	    itemPadding,
-	    checkboxes
+	    cellPaddingRight
 	  } = _ref;
 	  return {
 	    ["&.".concat(rowColClasses.fieldRoot)]: _objectSpread2(_objectSpread2({}, getGridItemSizes({
@@ -22948,7 +22944,7 @@
 	      layoutOrder,
 	      itemPadding
 	    })), {}, {
-	      paddingRight: checkboxes ? '8px' : undefined
+	      paddingRight: cellPaddingRight ? '8px' : undefined
 	    })
 	  };
 	});
@@ -22998,7 +22994,7 @@
 	    histogram = false,
 	    keyboard,
 	    showGray = true,
-	    showTick: sizePermitsTick = true,
+	    showTick: sizePermitsTickOrLock = true,
 	    columnCount = 1,
 	    rowCount = 1,
 	    dataOffset,
@@ -23094,7 +23090,6 @@
 	  }
 	  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;
@@ -23119,23 +23114,23 @@
 	  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.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.createElement(ItemGrid, {
 	    ref: rowRef,
 	    container: true,
 	    dataLayout: dataLayout,
-	    checkboxes: checkboxes,
+	    cellPaddingRight: cellPaddingRight,
 	    layoutOrder: layoutOrder,
 	    itemPadding: itemPadding,
 	    gap: 0,
@@ -24732,8 +24727,6 @@
 	  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
@@ -24962,12 +24955,6 @@
 	  };
 	}
 
-	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,
@@ -24979,7 +24966,7 @@
 	  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 {
@@ -25017,8 +25004,16 @@
 	  } = 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;
@@ -25592,7 +25587,7 @@
 	    });
 	    if (itemsLoader.pages.length && !awaitingFrequencyMax) {
 	      // All necessary data fetching done - signal rendering done!
-	      renderedCallback();
+	      renderedCallback === null || renderedCallback === void 0 ? void 0 : renderedCallback();
 	    }
 	  }
 	  const isItemLoaded = reactExports.useCallback(index => {
@@ -25982,7 +25977,8 @@
 	    size: "large",
 	    disableRipple: true,
 	    "aria-expanded": ariaExpanded,
-	    "aria-controls": "moreMenuList"
+	    "aria-controls": "moreMenuList",
+	    "data-testid": "actions-toolbar-".concat(item.key)
 	  }, hasSvgIconShape && SvgIcon(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React.createElement("div", {
 	    ref: ref,
 	    style: {
@@ -28493,6 +28489,23 @@
 	  };
 	}
 
+	function ListBoxError(_ref) {
+	  let {
+	    text
+	  } = _ref;
+	  const {
+	    translator
+	  } = reactExports.useContext(InstanceContext);
+	  const StyledDiv = styled$1('div')(() => ({
+	    display: 'flex',
+	    width: '100%',
+	    height: '100%',
+	    alignItems: 'center',
+	    justifyContent: 'center'
+	  }));
+	  return /*#__PURE__*/React.createElement(StyledDiv, null, translator.get(text));
+	}
+
 	const PREFIX$4 = 'ListBoxInline';
 	const classes$4 = {
 	  listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader"),
@@ -28567,9 +28580,7 @@
 	    calculatePagesHeight,
 	    showGray = true,
 	    scrollState = undefined,
-	    renderedCallback
-	  } = options;
-	  let {
+	    renderedCallback,
 	    toolbar = true
 	  } = options;
 
@@ -28614,6 +28625,8 @@
 	  const [appSelections] = useAppSelections(app);
 	  const titleRef = reactExports.useRef(null);
 	  const [selectionState$1] = reactExports.useState(() => 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,
@@ -28636,11 +28649,8 @@
 	    // 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;
 	  reactExports.useEffect(() => {
 	    const show = () => {
 	      setShowToolbar(true);
@@ -28664,7 +28674,7 @@
 	        selections.removeListener('deactivated', hide);
 	      }
 	    };
-	  }, [selections, toolbar]);
+	  }, [selections]);
 	  reactExports.useEffect(() => {
 	    if (!searchContainer || !searchContainer.current) {
 	      return;
@@ -28698,7 +28708,7 @@
 	  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;
@@ -28721,7 +28731,7 @@
 	    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
@@ -28734,7 +28744,43 @@
 	  if (isGridMode) {
 	    containerPadding = layoutOptions.layoutOrder === 'row' ? '2px 4px' : '2px 6px 2px 4px';
 	  }
-	  return /*#__PURE__*/React.createElement(React.Fragment, null, toolbarDetachedOnly && /*#__PURE__*/React.createElement(ActionsToolbar, _extends$8({
+	  const searchIconComp = constraints !== null && constraints !== void 0 && constraints.active ? /*#__PURE__*/React.createElement(SearchIcon, {
+	    title: translator.get('Listbox.Search'),
+	    size: "large",
+	    style: {
+	      fontSize: '12px',
+	      padding: '7px'
+	    }
+	  }) : /*#__PURE__*/React.createElement(IconButton$1, {
+	    onClick: onShowSearch,
+	    tabIndex: -1,
+	    title: translator.get('Listbox.Search'),
+	    size: "large",
+	    disableRipple: true,
+	    "data-testid": "search-toggle-btn"
+	  }, /*#__PURE__*/React.createElement(SearchIcon, {
+	    style: {
+	      fontSize: '12px'
+	    }
+	  }));
+	  const lockIconComp = selectDisabled() ? /*#__PURE__*/React.createElement(Lock, {
+	    size: "large",
+	    style: {
+	      fontSize: '12px',
+	      padding: '7px'
+	    }
+	  }) : /*#__PURE__*/React.createElement(IconButton$1, {
+	    title: translator.get('SelectionToolbar.ClickToUnlock'),
+	    tabIndex: -1,
+	    onClick: unlock,
+	    size: "large"
+	  }, /*#__PURE__*/React.createElement(Lock, {
+	    disableRipple: true,
+	    style: {
+	      fontSize: '12px'
+	    }
+	  }));
+	  return /*#__PURE__*/React.createElement(React.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React.createElement(ActionsToolbar, _extends$8({
 	    direction: direction
 	  }, getActionToolbarProps(true))), /*#__PURE__*/React.createElement(StyledGrid$3, {
 	    className: "listbox-container",
@@ -28753,7 +28799,7 @@
 	    onMouseLeave: handleOnMouseLeave,
 	    ref: containerRef,
 	    hasIcon: showIcons
-	  }, toolbar && /*#__PURE__*/React.createElement(Grid$1, {
+	  }, showToolbarWithTitle && /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
 	    style: {
@@ -28780,29 +28826,7 @@
 	      alignItems: 'center',
 	      width: iconsWidth
 	    }
-	  }, isLocked ? /*#__PURE__*/React.createElement(IconButton$1, {
-	    title: translator.get('SelectionToolbar.ClickToUnlock'),
-	    tabIndex: -1,
-	    onClick: unlock,
-	    disabled: selectDisabled(),
-	    size: "large"
-	  }, /*#__PURE__*/React.createElement(Lock, {
-	    disableRipple: true,
-	    style: {
-	      fontSize: '12px'
-	    }
-	  })) : showSearchIcon && /*#__PURE__*/React.createElement(IconButton$1, {
-	    onClick: onShowSearch,
-	    tabIndex: -1,
-	    title: translator.get('Listbox.Search'),
-	    size: "large",
-	    disableRipple: true,
-	    "data-testid": "search-toggle-btn"
-	  }, /*#__PURE__*/React.createElement(SearchIcon, {
-	    style: {
-	      fontSize: '12px'
-	    }
-	  })), isDrillDown && /*#__PURE__*/React.createElement(DrillDownIcon, {
+	  }, isLocked ? lockIconComp : showSearchIcon && searchIconComp, isDrillDown && /*#__PURE__*/React.createElement(DrillDownIcon, {
 	    tabIndex: -1,
 	    title: translator.get('Listbox.DrillDown'),
 	    size: "large",
@@ -28865,7 +28889,9 @@
 	    className: classes$4.listboxWrapper
 	  }, /*#__PURE__*/React.createElement("div", {
 	    className: classes$4.screenReaderOnly
-	  }, translator.get('Listbox.ScreenReaderInstructions')), /*#__PURE__*/React.createElement(AutoSizer, null, _ref4 => {
+	  }, translator.get('Listbox.ScreenReaderInstructions')), isInvalid ? /*#__PURE__*/React.createElement(ListBoxError, {
+	    text: errorText
+	  }) : /*#__PURE__*/React.createElement(AutoSizer, null, _ref4 => {
 	    let {
 	      height,
 	      width
@@ -29314,7 +29340,7 @@
 	  array.splice(removeIdx, 1);
 	  return removeIdx;
 	}
-	const nxDimension = f => ({
+	const nxDimension$1 = f => ({
 	  qDef: {
 	    qFieldDefs: [f]
 	  }
@@ -29345,7 +29371,7 @@
 	      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();
@@ -29428,6 +29454,69 @@
 	  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
@@ -29472,7 +29561,8 @@
 	    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
@@ -29480,9 +29570,9 @@
 	  fields.forEach(f => {
 	    const type = fieldType(f);
 	    if (type === 'measure') {
-	      hc.addMeasure(f);
+	      handler.addMeasure(f);
 	    } else {
-	      hc.addDimension(f);
+	      handler.addDimension(f);
 	    }
 	  });
 	}
@@ -30713,7 +30803,8 @@
 	    sn,
 	    anchorEl,
 	    hovering,
-	    focusHandler
+	    focusHandler,
+	    titleStyles = {}
 	  } = _ref2;
 	  const showTitle = layout.showTitles && !!layout.title;
 	  const showSubtitle = layout.showTitles && !!layout.subtitle;
@@ -30771,11 +30862,13 @@
 	  }, showTitle && /*#__PURE__*/React.createElement(Typography$1, {
 	    variant: "h6",
 	    noWrap: true,
-	    className: CellTitle.className
+	    className: CellTitle.className,
+	    style: titleStyles.main
 	  }, layout.title), showSubtitle && /*#__PURE__*/React.createElement(Typography$1, {
 	    variant: "body2",
 	    noWrap: true,
-	    className: CellSubTitle.className
+	    className: CellSubTitle.className,
+	    style: titleStyles.subTitle
 	  }, layout.subtitle))), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true
 	  }, Toolbar));
@@ -30808,7 +30901,8 @@
 	};
 	function Footer(_ref2) {
 	  let {
-	    layout
+	    layout,
+	    titleStyles = {}
 	  } = _ref2;
 	  return layout && layout.showTitles && layout.footnote ? /*#__PURE__*/React.createElement(StyledGrid, {
 	    container: true
@@ -30818,7 +30912,8 @@
 	  }, /*#__PURE__*/React.createElement(Typography$1, {
 	    noWrap: true,
 	    variant: "body2",
-	    className: CellFooter.className
+	    className: CellFooter.className,
+	    style: titleStyles.footer
 	  }, layout.footnote))) : null;
 	}
 
@@ -31048,7 +31143,7 @@
 	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 = '';
@@ -31069,8 +31164,8 @@
 	    } : 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) {
@@ -31078,8 +31173,32 @@
 	    }
 	    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
@@ -31321,7 +31440,8 @@
 	    app,
 	    selections,
 	    nebbie,
-	    focusHandler
+	    focusHandler,
+	    emitter
 	  } = _ref5;
 	  try {
 	    const snType = await getType({
@@ -31334,16 +31454,26 @@
 	      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;
 	};
@@ -31355,7 +31485,8 @@
 	    initialSnPlugins,
 	    initialError,
 	    onMount,
-	    currentId
+	    currentId,
+	    emitter
 	  } = _ref6;
 	  const {
 	    app,
@@ -31394,7 +31525,7 @@
 	  });
 	  const [bgColor, setBgColor] = reactExports.useState(undefined);
 	  const [bgImage, setBgImage] = reactExports.useState(undefined); // {url: "", size: "", pos: ""}
-
+	  const [titleStyles, setTitleStyles] = reactExports.useState(undefined);
 	  const focusHandler = reactExports.useRef({
 	    focusToolbarButton(last) {
 	      // eslint-disable-next-line react/no-this-in-sfc
@@ -31405,9 +31536,16 @@
 	    eventmixin(focusHandler.current);
 	  }, []);
 	  reactExports.useEffect(() => {
-	    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();
@@ -31479,7 +31617,8 @@
 	        app,
 	        selections,
 	        nebbie,
-	        focusHandler: focusHandler.current
+	        focusHandler: focusHandler.current,
+	        emitter
 	      });
 	      if (sn) {
 	        dispatch({
@@ -31500,15 +31639,6 @@
 
 	    // 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]);
@@ -31630,7 +31760,8 @@
 	    sn: state.sn,
 	    anchorEl: cellNode,
 	    hovering: hovering,
-	    focusHandler: focusHandler.current
+	    focusHandler: focusHandler.current,
+	    titleStyles: titleStyles
 	  }, "\xA0"), /*#__PURE__*/React.createElement(Grid$1, {
 	    tabIndex: keyboardNavigation ? 0 : -1,
 	    onKeyDown: keyboardNavigation ? handleKeyDown : null,
@@ -31641,7 +31772,8 @@
 	    },
 	    ref: contentRef
 	  }, Content), /*#__PURE__*/React.createElement(Footer, {
-	    layout: layout
+	    layout: layout,
+	    titleStyles: titleStyles
 	  })), state.longRunningQuery && /*#__PURE__*/React.createElement(LongRunningQuery, {
 	    canCancel: canCancel,
 	    canRetry: canRetry,
@@ -31657,6 +31789,7 @@
 	    initialSnOptions,
 	    initialSnPlugins,
 	    onMount,
+	    emitter,
 	    initialError
 	  } = _ref;
 	  const {
@@ -31672,7 +31805,8 @@
 	    initialSnOptions: initialSnOptions,
 	    initialSnPlugins: initialSnPlugins,
 	    initialError: initialError,
-	    onMount: onMount
+	    onMount: onMount,
+	    emitter: emitter
 	  }), element, currentId);
 	  const unmount = () => {
 	    root.remove(portal);
@@ -31772,6 +31906,7 @@
 	  });
 	  let initialSnOptions = {};
 	  let initialSnPlugins = [];
+	  const emitter = new nodeEventEmitter();
 	  const setSnOptions = async opts => {
 	    if (mountedReference) {
 	      (async () => {
@@ -31862,6 +31997,24 @@
 	      }
 	      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) {
@@ -31876,7 +32029,8 @@
 	          initialSnOptions,
 	          initialSnPlugins,
 	          initialError,
-	          onMount
+	          onMount,
+	          emitter
 	        });
 	        return mounted;
 	      },
@@ -33823,7 +33977,7 @@
 	 * @ignore
 	 * @example
 	 * import { onContextMenu } from '@nebula.js/stardust';
-	 
+
 	 * onContextMenu((menu, event) => {
 	 *  menu.addItem(item, index);
 	 * });
@@ -33877,6 +34031,32 @@
 	  };
 	}
 
+	/**
+	 * 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
@@ -34058,6 +34238,7 @@
 	      nebbie: opts.nebbie,
 	      element: undefined,
 	      // set on mount
+	      emitter: opts.emitter,
 	      // ---- singletons ----
 	      deviceType: galaxy.deviceType,
 	      theme: undefined,
@@ -37261,6 +37442,7 @@
 	exports.useEffect = useEffect;
 	exports.useElement = useElement;
 	exports.useEmbed = useEmbed;
+	exports.useEmitter = useEmitter;
 	exports.useGlobal = useGlobal;
 	exports.useImperativeHandle = useImperativeHandle;
 	exports.useKeyboard = useKeyboard;