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

package/core/esm/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.
 */
@@ -7756,7 +7756,7 @@ const light = {
       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
@@ -7896,10 +7896,21 @@ const overrides = theme => ({
       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'
       }
     }
   },
@@ -7987,7 +7998,7 @@ function create$3(definition) {
   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', ''));
 });
@@ -8195,7 +8206,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.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);
@@ -9067,7 +9078,7 @@ function useSelectionsInteractions(_ref) {
     doSelect();
   }, []);
   const onMouseDown = useCallback(event => {
-    if (selectionState.selectDisabled()) {
+    if (event.button !== 0 || selectionState.selectDisabled()) {
       return;
     }
     const elemNumber = +event.currentTarget.getAttribute('data-n');
@@ -9088,7 +9099,7 @@ function useSelectionsInteractions(_ref) {
     handleSingleSelectKey(event, event.currentTarget);
   }, []);
   const onMouseUp = useCallback(event => {
-    if (!currentSelect.current.active) {
+    if (event.button !== 0 || !currentSelect.current.active) {
       return;
     }
     currentSelect.current.active = false;
@@ -9098,9 +9109,9 @@ function useSelectionsInteractions(_ref) {
     }
     doSelect();
   }, []);
-  const onMouseUpDoc = useCallback(() => {
+  const onMouseUpDoc = 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;
@@ -9127,17 +9138,19 @@ function useSelectionsInteractions(_ref) {
     };
   }, [onMouseUpDoc]);
   useEffect$1(() => {
-    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]);
@@ -9558,8 +9571,10 @@ const getFrequencyText = _ref2 => {
   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 {
@@ -9686,7 +9701,7 @@ const RowColRoot = styled$1('div', {
       theme
     })), {}, {
       background: theme.palette.selected.excluded,
-      color: theme.palette.selected.mainContrastText,
+      color: theme.palette.selected.excludedContrastText,
       border: isGridMode ? 'none' : undefined
     }),
     ["& .".concat(rowColClasses.A)]: {
@@ -10305,7 +10320,7 @@ function RowColumn(_ref) {
     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 = useMemo$1(() => getValueStateClasses({
     column,
     histogram,
@@ -10314,10 +10329,6 @@ function RowColumn(_ref) {
     showGray
   }), [cell === null || cell === void 0 ? void 0 : cell.qState, histogram, dense, checkboxes]);
   const preventContextMenu = useCallback(event => {
-    if (checkboxes) {
-      // Event will not propagate in the checkbox/radiobutton case
-      onClick(event);
-    }
     event.preventDefault();
   }, [checkboxes]);
   if (!cell) {
@@ -13233,6 +13244,7 @@ const Item = React__default.forwardRef((_ref, ref) => {
     style: style,
     className: ActionElement.className,
     size: "large",
+    disableRipple: true,
     "aria-expanded": ariaExpanded,
     "aria-controls": "moreMenuList"
   }, hasSvgIconShape && SvgIcon$2(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React__default.createElement("div", {
@@ -13640,7 +13652,7 @@ function ActionsToolbar(_ref3) {
       className: ActionToolbarElement.className,
       style: {
         pointerEvents: 'auto',
-        padding: theme.spacing(1, 1)
+        padding: theme.spacing(0.8)
       }
     }
   }, Actions) : show && Actions;
@@ -15651,9 +15663,58 @@ const addListboxTheme = themeApi => {
   };
 };
 
+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"),
@@ -15672,7 +15733,7 @@ const StyledGrid$3 = styled$1(Grid, {
     ["& .".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',
@@ -15746,7 +15807,6 @@ function ListBoxInline(_ref3) {
     constraints
   } = useContext(InstanceContext);
   theme.listBox = addListboxTheme(themeApi);
-  const moreAlignTo = useRef();
   const containerRef = useRef();
   const [searchContainer, searchContainerRef] = useRefWithCallback();
   const [showToolbar, setShowToolbar] = useState$1(false);
@@ -15764,6 +15824,7 @@ function ListBoxInline(_ref3) {
     stop: 0
   });
   const [appSelections] = useAppSelections(app);
+  const titleRef = useRef(null);
   const [selectionState$1] = useState$1(() => selectionState());
   const {
     handleKeyDown,
@@ -15790,6 +15851,7 @@ function ListBoxInline(_ref3) {
   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) !== '';
   useEffect$1(() => {
     const show = () => {
@@ -15806,15 +15868,15 @@ function ListBoxInline(_ref3) {
     };
     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]);
@@ -15833,12 +15895,12 @@ function ListBoxInline(_ref3) {
   }
   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 {
@@ -15857,13 +15919,20 @@ function ListBoxInline(_ref3) {
     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';
@@ -15871,7 +15940,7 @@ function ListBoxInline(_ref3) {
   if (isGridMode) {
     containerPadding = layoutOptions.layoutOrder === 'row' ? '2px 4px' : '2px 6px 2px 4px';
   }
-  return /*#__PURE__*/React__default.createElement(StyledGrid$3, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, toolbarDetachedOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, getActionToolbarProps(true)), /*#__PURE__*/React__default.createElement(StyledGrid$3, {
     className: "listbox-container",
     container: true,
     tabIndex: keyboard.enabled && !keyboard.active ? 0 : -1,
@@ -15914,6 +15983,7 @@ function ListBoxInline(_ref3) {
     size: "large"
   }, /*#__PURE__*/React__default.createElement(Lock, {
     title: translator.get('Listbox.Unlock'),
+    disableRipple: true,
     style: {
       fontSize: '12px'
     }
@@ -15922,54 +15992,37 @@ function ListBoxInline(_ref3) {
     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(IconButton, {
+  })), isDrillDown && /*#__PURE__*/React__default.createElement(DrillDownIcon, {
     tabIndex: -1,
     title: translator.get('Listbox.DrillDown'),
     size: "large",
-    sx: {
-      paddingLeft: "".concat(drillDownPaddingLeft, "px")
-    }
-  }, /*#__PURE__*/React__default.createElement(DrillDownIcon, {
     style: {
       fontSize: '12px'
     }
-  }))), /*#__PURE__*/React__default.createElement(Grid, {
+  })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     className: classes$4.listBoxHeader
   }, /*#__PURE__*/React__default.createElement(Title, {
     variant: "h6",
     noWrap: true,
+    ref: titleRef,
     title: layout.title
   }, layout.title))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React__default.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__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(ActionsToolbar, getActionToolbarProps(showToolbarDetached({
+    containerRef,
+    titleRef,
+    iconsWidth
+  }))))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
     direction: "column",
@@ -15979,9 +16032,7 @@ function ListBoxInline(_ref3) {
     },
     role: "region",
     "aria-label": translator.get('Listbox.ResultFilterLabel')
-  }, /*#__PURE__*/React__default.createElement("div", {
-    ref: moreAlignTo
-  }), /*#__PURE__*/React__default.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     ref: searchContainerRef
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -16042,7 +16093,7 @@ function ListBoxInline(_ref3) {
         set: setCurrentScrollIndex
       }
     });
-  }))));
+  })))));
 }
 const ListBoxInlineMemoed = React__default.memo(ListBoxInline);
 function IsolateUseLayoutWrapper(_ref5) {
@@ -16336,7 +16387,7 @@ function ListBoxWrapper(_ref) {
     options
   });
   const elementRef = 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 = useMemo$1(() => _objectSpread2(_objectSpread2({}, options), {}, {
     selections,
     model,