@nebula.js/stardust 2.8.0 → 2.9.0

package/dist/stardust.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.
 */
@@ -9626,11 +9626,11 @@
     prop: 'borderColor',
     themeKey: 'palette'
   });
-  var borderRadius = style({
+  var borderRadius$1 = style({
     prop: 'borderRadius',
     themeKey: 'shape'
   });
-  var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius);
+  var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius$1);
   var borders$1 = borders;
 
   function omit(input, fields) {
@@ -11064,7 +11064,7 @@
     return [appSelections, navState];
   }
 
-  const NEBULA_VERSION_HASH = "0577" ;
+  const NEBULA_VERSION_HASH = "0d6f" ;
   let counter = 0;
   const NebulaApp = react.exports.forwardRef((_ref, ref) => {
     let {
@@ -11124,7 +11124,7 @@
     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, {
@@ -19178,11 +19178,12 @@
       checkboxes = false,
       selectDisabled,
       doc = document,
-      isSingleSelect = false
+      isSingleSelect: singleSelect = false
     } = _ref;
     const [instantPages, setInstantPages] = react.exports.useState(pages);
     const [mouseDown, setMouseDown] = react.exports.useState(false);
     const [selectingValues, setSelectingValues] = react.exports.useState(false);
+    const [isSingleSelect, setIsSingleSelect] = react.exports.useState(singleSelect);
     const [selected, setSelected] = react.exports.useState([]);
     const [isRangeSelection, setIsRangeSelection] = react.exports.useState(false);
     const [preSelected, setPreSelected] = react.exports.useState([]);
@@ -19204,6 +19205,7 @@
         isSingleSelect
       });
       setSelectingValues(false);
+      setPreSelected([]);
     }; // Show estimated selection states instantly before applying the selections for real.
 
 
@@ -19234,6 +19236,15 @@
       return p;
     };
 
+    const handleSingleSelectKey = event => {
+      if (event.ctrlKey || event.metaKey) {
+        setIsSingleSelect(true);
+        event.currentTarget.focus(); // will not be focused otherwise
+
+        event.preventDefault();
+      }
+    };
+
     const onClick = react.exports.useCallback(event => {
       if (selectingValues || selectDisabled()) {
         return;
@@ -19241,6 +19252,7 @@
 
       const elemNumber = +event.currentTarget.getAttribute('data-n');
       setPreSelected([elemNumber]);
+      handleSingleSelectKey(event);
     }, [selectingValues, selectDisabled]);
     const onMouseDown = react.exports.useCallback(event => {
       if (selectingValues || selectDisabled()) {
@@ -19251,6 +19263,7 @@
       setMouseDown(true);
       const elemNumber = +event.currentTarget.getAttribute('data-n');
       setPreSelected([elemNumber]);
+      handleSingleSelectKey(event);
     }, [selectingValues, selectDisabled]);
     const onMouseUp = react.exports.useCallback(event => {
       const elemNumber = +event.currentTarget.getAttribute('data-n');
@@ -19267,6 +19280,7 @@
       setMouseDown(false);
       setSelectingValues(false);
       setIsRangeSelection(false);
+      setIsSingleSelect(singleSelect);
     }, []);
     const onMouseEnter = react.exports.useCallback(event => {
       if (isSingleSelect || !mouseDown || selectingValues || selectDisabled()) {
@@ -19352,17 +19366,21 @@
 
   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$1(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': {
@@ -19373,6 +19391,18 @@
         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': {
@@ -19383,11 +19413,24 @@
       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$1, {
@@ -19399,9 +19442,7 @@
         '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
       })
@@ -19688,6 +19729,24 @@
   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$1(theme => ({
     row: {
       flexWrap: 'nowrap',
@@ -19714,8 +19773,8 @@
       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({
@@ -19742,34 +19801,39 @@
       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',
@@ -19805,13 +19869,13 @@
     }
   }));
 
-  function RowColumn(_ref) {
+  function RowColumn(_ref2) {
     let {
       index,
       style,
       data,
       column = false
-    } = _ref;
+    } = _ref2;
     const {
       onClick,
       onMouseDown,
@@ -19866,7 +19930,9 @@
       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);
@@ -19880,20 +19946,20 @@
 
     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$1, {
         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: {
@@ -19902,16 +19968,27 @@
       }, 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,
@@ -19947,12 +20024,12 @@
     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,
@@ -20005,6 +20082,7 @@
       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
@@ -20016,7 +20094,7 @@
     }), /*#__PURE__*/React.createElement(Grid$1, {
       item: true,
       style: cellStyle,
-      className: classes.cell,
+      className: joinClassNames([classes.cell, classes.selectedCell]),
       title: "".concat(label)
     }, ranges.length === 0 ? getField({
       lbl: label,
@@ -20034,7 +20112,7 @@
       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$1, {
       item: true,
       className: classes.icon
@@ -22636,6 +22714,13 @@
           });
         }
       }
+
+      return () => {
+        if (selections) {
+          selections.off('deactivated');
+          selections.off('activated');
+        }
+      };
     }, [selections]);
     react.exports.useEffect(() => {
       if (selections) {
@@ -24226,7 +24311,8 @@
       item: true
     }, /*#__PURE__*/React.createElement(Typography$1, {
       variant: "h6",
-      align: "center"
+      align: "center",
+      "data-tid": "update-active"
     }, translator.get('Object.Update.Active')))), /*#__PURE__*/React.createElement(Grid$1, _extends$a({
       item: true
     }, props), /*#__PURE__*/React.createElement(Button$1, {
@@ -24251,7 +24337,8 @@
       item: true
     }, /*#__PURE__*/React.createElement(Typography$1, {
       variant: "h6",
-      align: "center"
+      align: "center",
+      "data-tid": "update-cancelled"
     }, translator.get('Object.Update.Cancelled'))), /*#__PURE__*/React.createElement(Grid$1, {
       item: true
     }, /*#__PURE__*/React.createElement(Button$1, _extends$a({