@nebula.js/stardust 2.8.0 → 2.9.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.9.0](https://github.com/qlik-oss/nebula.js/compare/v2.8.0...v2.9.0) (2022-04-01)
+
+**Note:** Version bump only for package @nebula.js/stardust
+
 # [2.8.0](https://github.com/qlik-oss/nebula.js/compare/v2.7.0...v2.8.0) (2022-03-25)
 
 **Note:** Version bump only for package @nebula.js/stardust

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v2.8.0
+* @nebula.js/stardust v2.9.0
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -5275,7 +5275,7 @@ function useAppSelections(app) {
   return [appSelections, navState];
 }
 
-const NEBULA_VERSION_HASH = "0577" ;
+const NEBULA_VERSION_HASH = "0d6f" ;
 let counter = 0;
 const NebulaApp = forwardRef((_ref, ref) => {
   let {
@@ -5335,7 +5335,7 @@ function boot(_ref2) {
   const appRef = React.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "2.8.0" );
+  element.setAttribute('data-nebulajs-version', "2.9.0" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
@@ -6621,11 +6621,12 @@ function useSelectionsInteractions(_ref) {
     checkboxes = false,
     selectDisabled,
     doc = document,
-    isSingleSelect = false
+    isSingleSelect: singleSelect = false
   } = _ref;
   const [instantPages, setInstantPages] = useState$1(pages);
   const [mouseDown, setMouseDown] = useState$1(false);
   const [selectingValues, setSelectingValues] = useState$1(false);
+  const [isSingleSelect, setIsSingleSelect] = useState$1(singleSelect);
   const [selected, setSelected] = useState$1([]);
   const [isRangeSelection, setIsRangeSelection] = useState$1(false);
   const [preSelected, setPreSelected] = useState$1([]);
@@ -6647,6 +6648,7 @@ function useSelectionsInteractions(_ref) {
       isSingleSelect
     });
     setSelectingValues(false);
+    setPreSelected([]);
   }; // Show estimated selection states instantly before applying the selections for real.
 
 
@@ -6677,6 +6679,15 @@ function useSelectionsInteractions(_ref) {
     return p;
   };
 
+  const handleSingleSelectKey = event => {
+    if (event.ctrlKey || event.metaKey) {
+      setIsSingleSelect(true);
+      event.currentTarget.focus(); // will not be focused otherwise
+
+      event.preventDefault();
+    }
+  };
+
   const onClick = useCallback(event => {
     if (selectingValues || selectDisabled()) {
       return;
@@ -6684,6 +6695,7 @@ function useSelectionsInteractions(_ref) {
 
     const elemNumber = +event.currentTarget.getAttribute('data-n');
     setPreSelected([elemNumber]);
+    handleSingleSelectKey(event);
   }, [selectingValues, selectDisabled]);
   const onMouseDown = useCallback(event => {
     if (selectingValues || selectDisabled()) {
@@ -6694,6 +6706,7 @@ function useSelectionsInteractions(_ref) {
     setMouseDown(true);
     const elemNumber = +event.currentTarget.getAttribute('data-n');
     setPreSelected([elemNumber]);
+    handleSingleSelectKey(event);
   }, [selectingValues, selectDisabled]);
   const onMouseUp = useCallback(event => {
     const elemNumber = +event.currentTarget.getAttribute('data-n');
@@ -6710,6 +6723,7 @@ function useSelectionsInteractions(_ref) {
     setMouseDown(false);
     setSelectingValues(false);
     setIsRangeSelection(false);
+    setIsSingleSelect(singleSelect);
   }, []);
   const onMouseEnter = useCallback(event => {
     if (isSingleSelect || !mouseDown || selectingValues || selectDisabled()) {
@@ -6795,17 +6809,21 @@ var Tick = (props => SvgIcon(tick(props)));
 
 const CheckboxChecked = "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")";
 
+const borderRadius = 2;
 const useStyles$d = makeStyles(theme => ({
   cbIcon: {
-    borderRadius: 3,
+    borderRadius,
     width: 16,
     height: 16,
     boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
     backgroundColor: '#f5f8fa',
-    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))'
+    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   cbIconChecked: {
-    borderRadius: 3,
+    borderRadius,
     backgroundColor: theme.palette.selected.main,
     backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
     '&:before': {
@@ -6816,6 +6834,18 @@ const useStyles$d = makeStyles(theme => ({
       content: '""'
     }
   },
+  cbIconExcluded: {
+    borderRadius,
+    width: 12,
+    height: 12,
+    backgroundColor: theme.palette.selected.excluded
+  },
+  cbIconAlternative: {
+    borderRadius,
+    width: 12,
+    height: 12,
+    backgroundColor: theme.palette.selected.alternative
+  },
   checkbox: {
     margin: 0,
     '&:hover': {
@@ -6826,11 +6856,24 @@ const useStyles$d = makeStyles(theme => ({
     padding: '4px 8px'
   }
 }));
+
+const getIcon = function (styles) {
+  let excluded = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  let alternative = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  return /*#__PURE__*/React.createElement("span", {
+    className: styles.cbIcon
+  }, (excluded || alternative) && /*#__PURE__*/React.createElement("span", {
+    className: [excluded && styles.cbIconExcluded, alternative && styles.cbIconAlternative].filter(Boolean).join(' ')
+  }));
+};
+
 function ListboxCheckbox(_ref) {
   let {
     checked,
     label,
-    dense
+    dense,
+    excluded,
+    alternative
   } = _ref;
   const styles = useStyles$d();
   return /*#__PURE__*/React.createElement(Checkbox, {
@@ -6842,9 +6885,7 @@ function ListboxCheckbox(_ref) {
       'aria-labelledby': label
     },
     name: label,
-    icon: /*#__PURE__*/React.createElement("span", {
-      className: styles.cbIcon
-    }),
+    icon: getIcon(styles, excluded, alternative),
     checkedIcon: /*#__PURE__*/React.createElement("span", {
       className: styles.cbIconChecked
     })
@@ -7131,6 +7172,24 @@ const barPadPx = 4;
 const barBorderWidthPx = 1;
 const barWithCheckboxLeftPadEm = 2;
 const frequencyTextNone = '0';
+
+const getSelectedStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    background: theme.palette.selected.main,
+    color: theme.palette.selected.mainContrastText,
+    '&:focus': {
+      boxShadow: "inset 0 0 0 2px rgba(0, 0, 0, 0.3)",
+      outline: 'none'
+    },
+    '& $cell': {
+      paddingRight: 0
+    }
+  };
+};
+
 const useStyles$b = makeStyles(theme => ({
   row: {
     flexWrap: 'nowrap',
@@ -7157,8 +7216,8 @@ const useStyles$b = makeStyles(theme => ({
     minWidth: 0,
     flexGrow: 1,
     // Note that this padding is overridden when using checkboxes.
-    paddingLeft: '12px',
-    paddingRight: '12px'
+    paddingLeft: '9px',
+    paddingRight: '9px'
   },
   // The leaf node, containing the label text.
   labelText: _objectSpread2({
@@ -7185,34 +7244,39 @@ const useStyles$b = makeStyles(theme => ({
     margin: 0,
     width: '100%',
     height: '100%',
-    // For checkboxes the first child is the checkbox container, second is the label container.
+    // The checkbox's span
+    '& > span:nth-child(1)': {
+      paddingRight: '7px'
+    },
+    // The checkbox's label container.
     '& > span:nth-child(2)': _objectSpread2(_objectSpread2({}, ellipsis), {}, {
       display: 'flex',
       alignItems: 'center',
-      paddingLeft: '8px'
+      paddingLeft: 0
     })
   },
   // The icons container holding tick and lock, shown inside fields.
   icon: {
     display: 'flex',
-    padding: theme.spacing(1)
-  },
-  // Selection styles (S=Selected, A=Available, X=Excluded).
-  S: {
-    background: theme.palette.selected.main,
-    color: theme.palette.selected.mainContrastText,
-    '&:focus': {
-      boxShadow: "inset 0 0 0 2px rgba(0, 0, 0, 0.3)",
-      outline: 'none'
-    }
+    padding: theme.spacing(1, 1, 1, 0)
   },
+  // Selection styles (S=Selected, XS=ExcludedSelected, A=Available, X=Excluded).
+  S: _objectSpread2({}, getSelectedStyle({
+    theme
+  })),
+  XS: _objectSpread2(_objectSpread2({}, getSelectedStyle({
+    theme
+  })), {}, {
+    background: theme.palette.selected.excluded,
+    color: theme.palette.selected.mainContrastText
+  }),
   A: {
     background: theme.palette.selected.alternative,
     color: theme.palette.selected.alternativeContrastText
   },
   X: {
     background: theme.palette.selected.excluded,
-    color: theme.palette.selected.excludedContrastText
+    color: theme.palette.selected.mainContrastText
   },
   frequencyCount: {
     paddingLeft: '8px',
@@ -7248,13 +7312,13 @@ const useStyles$b = makeStyles(theme => ({
   }
 }));
 
-function RowColumn(_ref) {
+function RowColumn(_ref2) {
   let {
     index,
     style,
     data,
     column = false
-  } = _ref;
+  } = _ref2;
   const {
     onClick,
     onMouseDown,
@@ -7309,7 +7373,9 @@ function RowColumn(_ref) {
     const clazzArr = [column ? classes.column : classes.row];
 
     if (!checkboxes) {
-      if (cell.qState === 'S' || cell.qState === 'L') {
+      if (cell.qState === 'XS') {
+        clazzArr.push(classes.XS);
+      } else if (cell.qState === 'S' || cell.qState === 'L') {
         clazzArr.push(classes.S);
       } else if (isAlternative(cell)) {
         clazzArr.push(classes.A);
@@ -7323,20 +7389,20 @@ function RowColumn(_ref) {
 
   const joinClassNames = namesArray => namesArray.filter(c => !!c).join(' ').trim();
 
-  const hasGrayText = () => (isAlternative(cell) || isExcluded(cell)) && checkboxes ? classes.excludedTextWithCheckbox : false;
+  const excludedOrAlternative = () => (isAlternative(cell) || isExcluded(cell)) && checkboxes;
 
-  const getValueField = _ref2 => {
+  const getValueField = _ref3 => {
     let {
       lbl,
       ix,
       color,
       highlighted = false
-    } = _ref2;
+    } = _ref3;
     return /*#__PURE__*/React.createElement(Typography, {
       component: "span",
       variant: "body2",
       key: ix,
-      className: joinClassNames([classes.labelText, highlighted && classes.highlighted, dense && classes.labelDense, hasGrayText()]),
+      className: joinClassNames([classes.labelText, highlighted && classes.highlighted, dense && classes.labelDense, excludedOrAlternative() && classes.excludedTextWithCheckbox]),
       color: color
     }, /*#__PURE__*/React.createElement("span", {
       style: {
@@ -7345,16 +7411,27 @@ function RowColumn(_ref) {
     }, lbl));
   };
 
-  const getCheckboxField = _ref3 => {
+  const preventContextMenu = event => {
+    if (checkboxes) {
+      // Event will not propagate in the checkbox/radiobutton case
+      onClick(event);
+    }
+
+    event.preventDefault();
+  };
+
+  const getCheckboxField = _ref4 => {
     let {
       lbl,
       color,
       qElemNumber
-    } = _ref3;
+    } = _ref4;
     const cb = /*#__PURE__*/React.createElement(ListboxCheckbox, {
       label: lbl,
       checked: isSelected,
-      dense: dense
+      dense: dense,
+      excluded: isExcluded(cell),
+      alternative: isAlternative(cell)
     });
     const rb = /*#__PURE__*/React.createElement(ListBoxRadioButton, {
       label: lbl,
@@ -7390,12 +7467,12 @@ function RowColumn(_ref) {
   const labels = getSegmentsFromRanges(label, ranges);
   const getField = checkboxes ? getCheckboxField : getValueField;
 
-  const getFieldWithRanges = _ref4 => {
+  const getFieldWithRanges = _ref5 => {
     let {
       lbls
-    } = _ref4;
-    const labelsWithRanges = lbls.map((_ref5, ix) => {
-      let [lbl, highlighted] = _ref5;
+    } = _ref5;
+    const labelsWithRanges = lbls.map((_ref6, ix) => {
+      let [lbl, highlighted] = _ref6;
       return getValueField({
         ix,
         highlighted,
@@ -7448,6 +7525,7 @@ function RowColumn(_ref) {
     onMouseUp: onMouseUp,
     onMouseEnter: onMouseEnter,
     onKeyDown: handleKeyDownCallback,
+    onContextMenu: preventContextMenu,
     role: column ? 'column' : 'row',
     tabIndex: isFirstElement && (!keyboard.enabled || keyboard.active) ? 0 : -1,
     "data-n": cell && cell.qElemNumber
@@ -7459,7 +7537,7 @@ function RowColumn(_ref) {
   }), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     style: cellStyle,
-    className: classes.cell,
+    className: joinClassNames([classes.cell, classes.selectedCell]),
     title: "".concat(label)
   }, ranges.length === 0 ? getField({
     lbl: label,
@@ -7477,7 +7555,7 @@ function RowColumn(_ref) {
     noWrap: true,
     color: "inherit",
     variant: "body2",
-    className: joinClassNames([dense && classes.labelDense, classes.labelText, hasGrayText()])
+    className: joinClassNames([dense && classes.labelDense, classes.labelText, excludedOrAlternative() && classes.excludedTextWithCheckbox])
   }, getFrequencyText())), (showLock || showTick) && /*#__PURE__*/React.createElement(Grid, {
     item: true,
     className: classes.icon
@@ -10079,6 +10157,13 @@ function ListBoxInline(_ref) {
         });
       }
     }
+
+    return () => {
+      if (selections) {
+        selections.off('deactivated');
+        selections.off('activated');
+      }
+    };
   }, [selections]);
   useEffect$1(() => {
     if (selections) {
@@ -11669,7 +11754,8 @@ function Cancel(_ref) {
     item: true
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "h6",
-    align: "center"
+    align: "center",
+    "data-tid": "update-active"
   }, translator.get('Object.Update.Active')))), /*#__PURE__*/React.createElement(Grid, _extends$4({
     item: true
   }, props), /*#__PURE__*/React.createElement(Button, {
@@ -11694,7 +11780,8 @@ function Retry(_ref2) {
     item: true
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "h6",
-    align: "center"
+    align: "center",
+    "data-tid": "update-cancelled"
   }, translator.get('Object.Update.Cancelled'))), /*#__PURE__*/React.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React.createElement(Button, _extends$4({