@nebula.js/stardust 2.7.0 → 2.8.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.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
+
 # [2.7.0](https://github.com/qlik-oss/nebula.js/compare/v2.6.1...v2.7.0) (2022-03-21)
 
 ### Bug Fixes

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v2.7.0
+* @nebula.js/stardust v2.8.0
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -7,7 +7,7 @@
 import React, { useState as useState$1, useEffect as useEffect$1, useReducer, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useCallback, useLayoutEffect as useLayoutEffect$1, createElement, PureComponent, useRef, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { createGenerateClassName, StylesProvider, ThemeProvider, makeStyles, useTheme as useTheme$1 } from '@material-ui/styles';
-import { Checkbox, Grid, FormControlLabel, Typography, IconButton, makeStyles as makeStyles$1, Popover, MenuList, MenuItem, ListItemIcon, Divider, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, Box, Icon, CircularProgress, Paper } from '@material-ui/core';
+import { Checkbox, Radio, Grid, FormControlLabel, Typography, IconButton, makeStyles as makeStyles$1, Popover, MenuList, MenuItem, ListItemIcon, Divider, OutlinedInput, InputAdornment, Badge, List, ListItem, Button, Box, Icon, CircularProgress, Paper } from '@material-ui/core';
 
 var runtime = {exports: {}};
 
@@ -5275,7 +5275,7 @@ function useAppSelections(app) {
   return [appSelections, navState];
 }
 
-const NEBULA_VERSION_HASH = "b1d7" ;
+const NEBULA_VERSION_HASH = "0577" ;
 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.7.0" );
+  element.setAttribute('data-nebulajs-version', "2.8.0" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
@@ -6502,13 +6502,22 @@ function getSelectedValues(pages) {
   return flatten(elementNbrs);
 }
 function applySelectionsOnPages(pages, elmNumbers) {
+  let clearAllButElmNumbers = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
   const getNewSelectionState = qState => elmNumbers.length <= 1 && isStateSelected(qState) ? 'A' : 'S';
 
   const matrices = pages.map(page => {
     const qMatrix = page.qMatrix.map(p => {
       const [p0] = p;
       const selectionMatchesElement = elmNumbers.includes(p0.qElemNumber);
-      const qState = selectionMatchesElement ? getNewSelectionState(p0.qState) : p0.qState;
+      let qState;
+
+      if (clearAllButElmNumbers) {
+        qState = selectionMatchesElement ? 'S' : 'A';
+      } else {
+        qState = selectionMatchesElement ? getNewSelectionState(p0.qState) : p0.qState;
+      }
+
       return [_objectSpread2(_objectSpread2({}, p0), {}, {
         qState
       }), p.slice(1)];
@@ -6611,7 +6620,8 @@ function useSelectionsInteractions(_ref) {
     rangeSelect = true,
     checkboxes = false,
     selectDisabled,
-    doc = document
+    doc = document,
+    isSingleSelect = false
   } = _ref;
   const [instantPages, setInstantPages] = useState$1(pages);
   const [mouseDown, setMouseDown] = useState$1(false);
@@ -6619,10 +6629,7 @@ function useSelectionsInteractions(_ref) {
   const [selected, setSelected] = useState$1([]);
   const [isRangeSelection, setIsRangeSelection] = useState$1(false);
   const [preSelected, setPreSelected] = useState$1([]);
-  const elemNumbersOrdered = getElemNumbersFromPages(pages);
-
-  const getIsSingleSelect = () => !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne); // Select values for real, by calling the backend.
-
+  const elemNumbersOrdered = getElemNumbersFromPages(pages); // Select values for real, by calling the backend.
 
   const select = async function () {
     let elemNumbers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -6633,7 +6640,6 @@ function useSelectionsInteractions(_ref) {
     }
 
     setSelectingValues(true);
-    const isSingleSelect = getIsSingleSelect();
     const filtered = additive ? elemNumbers.filter(n => !selected.includes(n)) : elemNumbers;
     await selectValues({
       selections,
@@ -6662,6 +6668,8 @@ function useSelectionsInteractions(_ref) {
   const selectManually = function () {
     let elementIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    setIsRangeSelection(false); // range is not supported for manual select
+
     setMouseDown(true);
     preSelect(elementIds, additive || isRangeSelection);
     const p = select(elementIds, additive || isRangeSelection);
@@ -6690,7 +6698,7 @@ function useSelectionsInteractions(_ref) {
   const onMouseUp = useCallback(event => {
     const elemNumber = +event.currentTarget.getAttribute('data-n');
 
-    if (getIsSingleSelect() || !rangeSelect || !mouseDown || selectingValues || preSelected.length === 1 && preSelected[0] === elemNumber // prevent toggling again on mouseup
+    if (isSingleSelect || !rangeSelect || !mouseDown || selectingValues || preSelected.length === 1 && preSelected[0] === elemNumber // prevent toggling again on mouseup
     ) {
       return;
     }
@@ -6701,9 +6709,10 @@ function useSelectionsInteractions(_ref) {
     // Ensure we end interactions when mouseup happens outside the Listbox.
     setMouseDown(false);
     setSelectingValues(false);
+    setIsRangeSelection(false);
   }, []);
   const onMouseEnter = useCallback(event => {
-    if (getIsSingleSelect() || !mouseDown || selectingValues || selectDisabled()) {
+    if (isSingleSelect || !mouseDown || selectingValues || selectDisabled()) {
       return;
     }
 
@@ -6743,7 +6752,7 @@ function useSelectionsInteractions(_ref) {
     } // Render pre-selections before they have been selected in Engine.
 
 
-    const newPages = applySelectionsOnPages(pages, preSelected);
+    const newPages = applySelectionsOnPages(pages, preSelected, isSingleSelect);
     setInstantPages(newPages);
   }, [preSelected]);
   const interactionEvents = {};
@@ -6786,7 +6795,7 @@ 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 useStyles$c = makeStyles(theme => ({
+const useStyles$d = makeStyles(theme => ({
   cbIcon: {
     borderRadius: 3,
     width: 16,
@@ -6823,7 +6832,7 @@ function ListboxCheckbox(_ref) {
     label,
     dense
   } = _ref;
-  const styles = useStyles$c();
+  const styles = useStyles$d();
   return /*#__PURE__*/React.createElement(Checkbox, {
     edge: "start",
     checked: checked,
@@ -6910,6 +6919,41 @@ function getSegmentsFromRanges(label, ranges) {
   return labels;
 }
 
+const useStyles$c = makeStyles(() => ({
+  denseRadioButton: {
+    height: '100%',
+    boxSizing: 'border-box',
+    '& svg': {
+      width: '0.7em',
+      height: '0.7em'
+    }
+  },
+  radioButton: {
+    right: '5px'
+  }
+}));
+function ListBoxRadioButton(_ref) {
+  let {
+    checked,
+    label,
+    dense
+  } = _ref;
+  const styles = useStyles$c();
+  return /*#__PURE__*/React.createElement(Radio, {
+    checked: checked,
+    value: label,
+    name: label,
+    inputProps: {
+      'aria-labelledby': label
+    },
+    className: dense ? styles.denseRadioButton : styles.radioButton,
+    style: {
+      backgroundColor: 'transparent'
+    },
+    disableRipple: true
+  });
+}
+
 const KEYS = Object.freeze({
   ENTER: 13,
   ESCAPE: 27,
@@ -7140,6 +7184,7 @@ const useStyles$b = makeStyles(theme => ({
   checkboxLabel: {
     margin: 0,
     width: '100%',
+    height: '100%',
     // For checkboxes the first child is the checkbox container, second is the label container.
     '& > span:nth-child(2)': _objectSpread2(_objectSpread2({}, ellipsis), {}, {
       display: 'flex',
@@ -7202,6 +7247,7 @@ const useStyles$b = makeStyles(theme => ({
     color: '#828282'
   }
 }));
+
 function RowColumn(_ref) {
   let {
     index,
@@ -7219,6 +7265,7 @@ function RowColumn(_ref) {
     checkboxes = false,
     dense = false,
     frequencyMode = 'N',
+    isSingleSelect,
     actions,
     frequencyMax = '',
     histogram = false,
@@ -7309,6 +7356,11 @@ function RowColumn(_ref) {
       checked: isSelected,
       dense: dense
     });
+    const rb = /*#__PURE__*/React.createElement(ListBoxRadioButton, {
+      label: lbl,
+      checked: isSelected,
+      dense: dense
+    });
     const labelTag = typeof lbl === 'string' ? getValueField({
       lbl,
       color,
@@ -7316,7 +7368,7 @@ function RowColumn(_ref) {
     }) : lbl;
     return /*#__PURE__*/React.createElement(FormControlLabel, {
       color: color,
-      control: cb,
+      control: isSingleSelect ? rb : cb,
       className: classes.checkboxLabel,
       label: labelTag,
       key: qElemNumber
@@ -7477,6 +7529,7 @@ function ListBox(_ref2) {
     selectDisabled = () => false
   } = _ref2;
   const [layout] = useLayout$1(model);
+  const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
   const [pages, setPages] = useState$1(null);
   const [isLoadingData, setIsLoadingData] = useState$1(false);
   const {
@@ -7490,7 +7543,8 @@ function ListBox(_ref2) {
     rangeSelect,
     checkboxes,
     selectDisabled,
-    doc: document
+    doc: document,
+    isSingleSelect
   });
   const loaderRef = useRef(null);
   const local = useRef({
@@ -7624,6 +7678,7 @@ function ListBox(_ref2) {
         checkboxes,
         dense,
         frequencyMode,
+        isSingleSelect,
         actions: {
           select,
           confirm: () => selections && selections.confirm.call(selections),
@@ -8232,7 +8287,6 @@ function ListBoxSearch(_ref) {
   let {
     model,
     keyboard,
-    autoFocus = true,
     dense = false
   } = _ref;
   const {
@@ -8266,7 +8320,6 @@ function ListBoxSearch(_ref) {
       size: dense ? 'small' : 'normal'
     })),
     className: ['search', classes.root, dense && classes.dense].filter(Boolean).join(' '),
-    autoFocus: autoFocus,
     margin: "dense",
     fullWidth: true,
     placeholder: translator.get('Listbox.Search'),
@@ -8274,7 +8327,7 @@ function ListBoxSearch(_ref) {
     onChange: onChange,
     onKeyDown: onKeyDown,
     inputProps: {
-      tabIndex: !keyboard.enabled || keyboard.active ? 0 : -1
+      tabIndex: keyboard && (!keyboard.enabled || keyboard.active) ? 0 : -1
     }
   });
 }
@@ -9918,7 +9971,19 @@ function ListBoxInline(_ref) {
       break;
   }
 
-  const getListdefFrequencyMode = () => histogram && frequencyMode === 'N' ? 'V' : frequencyMode;
+  const getListdefFrequencyMode = () => histogram && frequencyMode === 'N' ? 'V' : frequencyMode; // Hook that will trigger update when used in useEffects.
+  // Modified from: https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
+
+
+  const useRefWithCallback = () => {
+    const [ref, setInternalRef] = useState$1({});
+    const setRef = useCallback(node => {
+      setInternalRef({
+        current: node
+      });
+    }, [setInternalRef]);
+    return [ref, setRef];
+  };
 
   const listdef = _objectSpread2({
     qInfo: {
@@ -9989,10 +10054,10 @@ function ListBoxInline(_ref) {
     keyboardNavigation
   } = useContext(InstanceContext);
   const moreAlignTo = useRef();
+  const [searchContainer, searchContainerRef] = useRefWithCallback();
   const [layout] = useLayout$1(model);
   const [showToolbar, setShowToolbar] = useState$1(false);
   const [showSearch, setShowSearch] = useState$1(false);
-  const [autoFocusSearch, setAutoFocusSearch] = useState$1(focusSearch);
   const [keyboardActive, setKeyboardActive] = useState$1(false);
   const handleKeyDown = getListboxInlineKeyboardNavigation({
     setKeyboardActive
@@ -10020,6 +10085,17 @@ function ListBoxInline(_ref) {
       setShowToolbar(selections.isActive());
     }
   }, [selections]);
+  useEffect$1(() => {
+    if (!searchContainer || !searchContainer.current) {
+      return;
+    } // Focus search field on toggle-show or when focusSearch is true.
+
+
+    if (search && focusSearch || search === 'toggle' && showSearch) {
+      const input = searchContainer.current.querySelector('input');
+      input && input.focus();
+    }
+  }, [searchContainer && searchContainer.current, showSearch, search, focusSearch]);
 
   if (!model || !layout || !translator) {
     return null;
@@ -10039,7 +10115,6 @@ function ListBoxInline(_ref) {
   const onShowSearch = () => {
     const newValue = !showSearch;
     setShowSearch(newValue);
-    setAutoFocusSearch(newValue);
   };
 
   const getSearchOrUnlock = () => search === 'toggle' && !hasSelections ? /*#__PURE__*/React.createElement(IconButton, {
@@ -10107,10 +10182,10 @@ function ListBoxInline(_ref) {
       onCancel: () => {}
     }
   }))), searchVisible && /*#__PURE__*/React.createElement(Grid, {
-    item: true
+    item: true,
+    ref: searchContainerRef
   }, /*#__PURE__*/React.createElement(ListBoxSearch, {
     model: model,
-    autoFocus: autoFocusSearch,
     dense: dense,
     keyboard: keyboard
   })), /*#__PURE__*/React.createElement(Grid, {
@@ -10538,7 +10613,7 @@ const setValue = (data, reference, value) => {
     dataContainer = dataContainer[step];
   }
 
-  if (typeof value !== 'undefined') {
+  if (typeof value !== 'undefined' && propertyName !== '__proto__' && propertyName !== 'constructor') {
     dataContainer[propertyName] = value;
   } else {
     delete dataContainer[propertyName];
@@ -17538,7 +17613,7 @@ function nuked() {
          */
 
         /**
-         * @typedef { false | true | 'toggle' } SearchMode
+         * @typedef { boolean | 'toggle' } SearchMode
          */
 
         /**