@nebula.js/stardust 4.0.0-alpha.0 → 4.0.0-alpha.1

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.0.0-alpha.0
+* @nebula.js/stardust v4.0.0-alpha.1
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -15112,7 +15112,7 @@
 	      disabled: 'rgba(0, 0, 0, 0.3)'
 	    },
 	    action: {
-	      active: colors.grey25,
+	      active: '#545454',
 	      // color for actionable things like icon buttons
 	      hover: 'rgba(0, 0, 0, 0.03)',
 	      // color for hoverable things like list items
@@ -15252,10 +15252,21 @@
 	      padding: 7,
 	      borderRadius: 2,
 	      border: '1px solid transparent',
-	      // should ideally use $focusVisible, but that messes up focus in all other places where Iconbutton is used (Checkbox, Switch etc)
-	      '&:focus': {
+	      '&:hover': {
+	        backgroundColor: theme.palette.btn.hover
+	      },
+	      '&:focus-visible': {
 	        borderColor: theme.palette.custom.focusBorder,
 	        boxShadow: "0 0 0 2px ".concat(theme.palette.custom.focusOutline)
+	      },
+	      '&:active': {
+	        borderColor: 'transparent',
+	        boxShadow: 'none',
+	        backgroundColor: theme.palette.btn.active
+	      },
+	      '&:not(:active):not(:focus-visible)': {
+	        borderColor: 'transparent',
+	        boxShadow: 'none'
 	      }
 	    }
 	  },
@@ -15343,7 +15354,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "b1a6" ;
+	const NEBULA_VERSION_HASH = "f871" ;
 	ClassNameGenerator$1.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -15551,7 +15562,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.0" );
+	  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.1" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  const root = client.createRoot(element);
@@ -21698,7 +21709,7 @@
 	    doSelect();
 	  }, []);
 	  const onMouseDown = reactExports.useCallback(event => {
-	    if (selectionState.selectDisabled()) {
+	    if (event.button !== 0 || selectionState.selectDisabled()) {
 	      return;
 	    }
 	    const elemNumber = +event.currentTarget.getAttribute('data-n');
@@ -21719,7 +21730,7 @@
 	    handleSingleSelectKey(event, event.currentTarget);
 	  }, []);
 	  const onMouseUp = reactExports.useCallback(event => {
-	    if (!currentSelect.current.active) {
+	    if (event.button !== 0 || !currentSelect.current.active) {
 	      return;
 	    }
 	    currentSelect.current.active = false;
@@ -21729,9 +21740,9 @@
 	    }
 	    doSelect();
 	  }, []);
-	  const onMouseUpDoc = reactExports.useCallback(() => {
+	  const onMouseUpDoc = reactExports.useCallback(event => {
 	    // Ensure we end interactions when mouseup happens outside the Listbox.
-	    if (!currentSelect.current.active) {
+	    if (event.button !== 0 || !currentSelect.current.active) {
 	      return;
 	    }
 	    currentSelect.current.active = false;
@@ -21758,17 +21769,19 @@
 	    };
 	  }, [onMouseUpDoc]);
 	  reactExports.useEffect(() => {
-	    const onDeactivated = () => {
+	    const clearItemStates = () => {
 	      selectionState.clearItemStates(false);
 	    };
 	    const onCleared = () => {
 	      selectionState.clearItemStates(true);
 	      selectionState.triggerStateChanged();
 	    };
-	    selections.on('deactivated', onDeactivated);
+	    selections.on('clearItemStates', clearItemStates);
+	    selections.on('deactivated', clearItemStates);
 	    selections.on('cleared', onCleared);
 	    return () => {
-	      selections.removeListener('activated', onDeactivated);
+	      selections.removeListener('clearItemStates', clearItemStates);
+	      selections.removeListener('deactivated', clearItemStates);
 	      selections.removeListener('cleared', onCleared);
 	    };
 	  }, [selections]);
@@ -22189,8 +22202,10 @@
 	  return '';
 	};
 
-	const ICON_PADDING = 7;
 	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 {
@@ -22317,7 +22332,7 @@
 	      theme
 	    })), {}, {
 	      background: theme.palette.selected.excluded,
-	      color: theme.palette.selected.mainContrastText,
+	      color: theme.palette.selected.excludedContrastText,
 	      border: isGridMode ? 'none' : undefined
 	    }),
 	    ["& .".concat(rowColClasses.A)]: {
@@ -22936,7 +22951,7 @@
 	    pages,
 	    cellIndex
 	  }), [pages, cellIndex]);
-	  const isSelected = (cell === null || cell === void 0 ? void 0 : cell.qState) === 'S' || (cell === null || cell === void 0 ? void 0 : cell.qState) === 'XS' || (cell === null || cell === void 0 ? void 0 : cell.qState) === 'L';
+	  const isSelected = (cell === null || cell === void 0 ? void 0 : cell.qState) === 'S' || (cell === null || cell === void 0 ? void 0 : cell.qState) === 'XS' || (cell === null || cell === void 0 ? void 0 : cell.qState) === 'L' || (cell === null || cell === void 0 ? void 0 : cell.qState) === 'XL';
 	  const classArr = reactExports.useMemo(() => getValueStateClasses({
 	    column,
 	    histogram,
@@ -22945,10 +22960,6 @@
 	    showGray
 	  }), [cell === null || cell === void 0 ? void 0 : cell.qState, histogram, dense, checkboxes]);
 	  const preventContextMenu = reactExports.useCallback(event => {
-	    if (checkboxes) {
-	      // Event will not propagate in the checkbox/radiobutton case
-	      onClick(event);
-	    }
 	    event.preventDefault();
 	  }, [checkboxes]);
 	  if (!cell) {
@@ -25718,6 +25729,7 @@
 	    style: style,
 	    className: ActionElement.className,
 	    size: "large",
+	    disableRipple: true,
 	    "aria-expanded": ariaExpanded,
 	    "aria-controls": "moreMenuList"
 	  }, hasSvgIconShape && SvgIcon(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React.createElement("div", {
@@ -26125,7 +26137,7 @@
 	      className: ActionToolbarElement.className,
 	      style: {
 	        pointerEvents: 'auto',
-	        padding: theme.spacing(1, 1)
+	        padding: theme.spacing(0.8)
 	      }
 	    }
 	  }, Actions) : show && Actions;
@@ -28136,9 +28148,58 @@
 	  };
 	};
 
+	function showToolbarDetached(_ref) {
+	  var _containerRef$current, _containerRef$current2, _titleRef$current$cli, _titleRef$current, _titleRef$current2, _titleRef$current3;
+	  let {
+	    containerRef,
+	    titleRef,
+	    iconsWidth
+	  } = _ref;
+	  const containerWidth = (_containerRef$current = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.clientWidth) !== null && _containerRef$current !== void 0 ? _containerRef$current : 0;
+	  const padding = 16;
+	  const contentWidth = ((_titleRef$current$cli = titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.clientWidth) !== null && _titleRef$current$cli !== void 0 ? _titleRef$current$cli : 0) + iconsWidth + padding;
+	  const actionToolbarWidth = 128;
+	  const notSufficientSpace = containerWidth < contentWidth + actionToolbarWidth;
+	  const isTruncated = (titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current2 = titleRef.current) === null || _titleRef$current2 === void 0 ? void 0 : _titleRef$current2.scrollWidth) > (titleRef === null || titleRef === void 0 ? void 0 : (_titleRef$current3 = titleRef.current) === null || _titleRef$current3 === void 0 ? void 0 : _titleRef$current3.offsetWidth);
+	  return !!(notSufficientSpace | isTruncated);
+	}
+
+	function getListboxActionProps(_ref) {
+	  let {
+	    isPopover,
+	    showToolbar,
+	    containerRef,
+	    isLocked,
+	    listboxSelectionToolbarItems,
+	    selections
+	  } = _ref;
+	  return {
+	    show: showToolbar && !isPopover,
+	    popover: {
+	      show: showToolbar && isPopover,
+	      anchorEl: containerRef.current
+	    },
+	    more: {
+	      enabled: !isLocked,
+	      actions: listboxSelectionToolbarItems,
+	      popoverProps: {
+	        elevation: 0
+	      },
+	      popoverPaperStyle: {
+	        boxShadow: '0 12px 8px -8px rgba(0, 0, 0, 0.2)',
+	        minWidth: '250px'
+	      }
+	    },
+	    selections: {
+	      show: showToolbar,
+	      api: selections,
+	      onConfirm: () => {},
+	      onCancel: () => {}
+	    }
+	  };
+	}
+
 	const PREFIX$4 = 'ListBoxInline';
-	const searchIconWidth = 28;
-	const drillDownIconWidth = 24;
 	const classes$4 = {
 	  listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader"),
 	  screenReaderOnly: "".concat(PREFIX$4, "-screenReaderOnly"),
@@ -28157,7 +28218,7 @@
 	    ["& .".concat(classes$4.listBoxHeader)]: {
 	      alignSelf: 'center',
 	      display: 'inline-flex',
-	      width: "calc(100% - ".concat(searchIconWidth, "px)")
+	      width: "calc(100% - ".concat(BUTTON_ICON_WIDTH, "px)")
 	    },
 	    ["& .".concat(classes$4.screenReaderOnly)]: {
 	      position: 'absolute',
@@ -28231,7 +28292,6 @@
 	    constraints
 	  } = reactExports.useContext(InstanceContext);
 	  theme.listBox = addListboxTheme(themeApi);
-	  const moreAlignTo = reactExports.useRef();
 	  const containerRef = reactExports.useRef();
 	  const [searchContainer, searchContainerRef] = useRefWithCallback();
 	  const [showToolbar, setShowToolbar] = reactExports.useState(false);
@@ -28249,6 +28309,7 @@
 	    stop: 0
 	  });
 	  const [appSelections] = useAppSelections(app);
+	  const titleRef = reactExports.useRef(null);
 	  const [selectionState$1] = reactExports.useState(() => selectionState());
 	  const {
 	    handleKeyDown,
@@ -28275,6 +28336,7 @@
 	  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) !== '';
 	  reactExports.useEffect(() => {
 	    const show = () => {
@@ -28291,15 +28353,15 @@
 	    };
 	    if (selections) {
 	      if (!selections.isModal()) {
-	        selections.on('deactivated', hide);
 	        selections.on('activated', show);
+	        selections.on('deactivated', hide);
 	      }
 	      setShowToolbar(selections.isActive());
 	    }
 	    return () => {
 	      if (selections && selections.removeListener) {
-	        selections.removeListener('deactivated', show);
-	        selections.removeListener('activated', hide);
+	        selections.removeListener('activated', show);
+	        selections.removeListener('deactivated', hide);
 	      }
 	    };
 	  }, [selections, toolbar]);
@@ -28318,12 +28380,12 @@
 	  }
 	  const isLocked = layout.qListObject.qDimensionInfo.qLocked === true;
 	  const isDrillDown = layout.qListObject.qDimensionInfo.qGrouping === 'H';
-	  const listboxSelectionToolbarItems = toolbar ? createListboxSelectionToolbar({
+	  const listboxSelectionToolbarItems = createListboxSelectionToolbar({
 	    layout,
 	    model,
 	    translator,
 	    selectionState: selectionState$1
-	  }) : [];
+	  });
 	  const showSearchToggle = search === 'toggle' && showSearch;
 	  const searchVisible = (search === true || showSearchToggle) && !selectDisabled();
 	  const {
@@ -28342,13 +28404,20 @@
 	    const newValue = !showSearch;
 	    setShowSearch(newValue);
 	  };
+	  const getActionToolbarProps = isPopover => getListboxActionProps({
+	    isPopover,
+	    showToolbar,
+	    containerRef,
+	    isLocked,
+	    listboxSelectionToolbarItems,
+	    selections
+	  });
 	  const shouldAutoFocus = searchVisible && search === 'toggle';
 	  const showSearchIcon = searchEnabled !== false && search === 'toggle' && !(constraints !== null && constraints !== void 0 && constraints.active);
 	  const showSearchOrLockIcon = isLocked || showSearchIcon;
 	  const showIcons = showSearchOrLockIcon || isDrillDown;
-	  const iconsWidth = (showSearchOrLockIcon ? searchIconWidth : 0) + (isDrillDown ? drillDownIconWidth : 0);
-	  const drillDownPaddingLeft = showSearchOrLockIcon ? 0 : ICON_PADDING;
-	  const headerPaddingLeft = CELL_PADDING_LEFT - (showIcons ? ICON_PADDING : 0);
+	  const iconsWidth = (showSearchOrLockIcon ? BUTTON_ICON_WIDTH : 0) + (isDrillDown ? ICON_WIDTH + ICON_PADDING : 0); // Drill-down icon needs padding right so there is space between the icon and the title
+	  const headerPaddingLeft = CELL_PADDING_LEFT - (showSearchOrLockIcon ? ICON_PADDING : 0);
 
 	  // Add a container padding for grid mode to harmonize with the grid item margins (should sum to 8px).
 	  const isGridMode = (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.dataLayout) === 'grid';
@@ -28356,7 +28425,7 @@
 	  if (isGridMode) {
 	    containerPadding = layoutOptions.layoutOrder === 'row' ? '2px 4px' : '2px 6px 2px 4px';
 	  }
-	  return /*#__PURE__*/React.createElement(StyledGrid$3, {
+	  return /*#__PURE__*/React.createElement(React.Fragment, null, toolbarDetachedOnly && /*#__PURE__*/React.createElement(ActionsToolbar, getActionToolbarProps(true)), /*#__PURE__*/React.createElement(StyledGrid$3, {
 	    className: "listbox-container",
 	    container: true,
 	    tabIndex: keyboard.enabled && !keyboard.active ? 0 : -1,
@@ -28399,6 +28468,7 @@
 	    size: "large"
 	  }, /*#__PURE__*/React.createElement(Lock, {
 	    title: translator.get('Listbox.Unlock'),
+	    disableRipple: true,
 	    style: {
 	      fontSize: '12px'
 	    }
@@ -28407,54 +28477,37 @@
 	    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(IconButton$1, {
+	  })), isDrillDown && /*#__PURE__*/React.createElement(DrillDownIcon, {
 	    tabIndex: -1,
 	    title: translator.get('Listbox.DrillDown'),
 	    size: "large",
-	    sx: {
-	      paddingLeft: "".concat(drillDownPaddingLeft, "px")
-	    }
-	  }, /*#__PURE__*/React.createElement(DrillDownIcon, {
 	    style: {
 	      fontSize: '12px'
 	    }
-	  }))), /*#__PURE__*/React.createElement(Grid$1, {
+	  })), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    className: classes$4.listBoxHeader
 	  }, /*#__PURE__*/React.createElement(Title, {
 	    variant: "h6",
 	    noWrap: true,
+	    ref: titleRef,
 	    title: layout.title
 	  }, layout.title))), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    xs: true
 	  }), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true
-	  }, /*#__PURE__*/React.createElement(ActionsToolbar, {
-	    more: {
-	      enabled: !isLocked,
-	      actions: listboxSelectionToolbarItems,
-	      alignTo: moreAlignTo,
-	      popoverProps: {
-	        elevation: 0
-	      },
-	      popoverPaperStyle: {
-	        boxShadow: '0 12px 8px -8px rgba(0, 0, 0, 0.2)',
-	        minWidth: '250px'
-	      }
-	    },
-	    selections: {
-	      show: showToolbar,
-	      api: selections,
-	      onConfirm: () => {},
-	      onCancel: () => {}
-	    }
-	  }))), /*#__PURE__*/React.createElement(Grid$1, {
+	  }, /*#__PURE__*/React.createElement(ActionsToolbar, getActionToolbarProps(showToolbarDetached({
+	    containerRef,
+	    titleRef,
+	    iconsWidth
+	  }))))), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
 	    direction: "column",
@@ -28464,9 +28517,7 @@
 	    },
 	    role: "region",
 	    "aria-label": translator.get('Listbox.ResultFilterLabel')
-	  }, /*#__PURE__*/React.createElement("div", {
-	    ref: moreAlignTo
-	  }), /*#__PURE__*/React.createElement(Grid$1, {
+	  }, /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    ref: searchContainerRef
 	  }, /*#__PURE__*/React.createElement("div", {
@@ -28527,7 +28578,7 @@
 	        set: setCurrentScrollIndex
 	      }
 	    });
-	  }))));
+	  })))));
 	}
 	const ListBoxInlineMemoed = React.memo(ListBoxInline);
 	function IsolateUseLayoutWrapper(_ref5) {
@@ -28821,7 +28872,7 @@
 	    options
 	  });
 	  const elementRef = reactExports.useRef(element);
-	  const selections = hasExternalSelectionsApi ? options.selectionsApi : useObjectSelections(app, model, [elementRef, '.njs-action-toolbar-more'], options)[0];
+	  const selections = hasExternalSelectionsApi ? options.selectionsApi : useObjectSelections(app, model, [elementRef, '.njs-action-toolbar-more', '.njs-action-toolbar-popover'], options)[0];
 	  const opts = reactExports.useMemo(() => _objectSpread2(_objectSpread2({}, options), {}, {
 	    selections,
 	    model,