@nebula.js/stardust 2.7.0 → 2.10.0

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v2.7.0
+* @nebula.js/stardust v2.10.0
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -7,7 +7,9 @@
 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 commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var runtime = {exports: {}};
 
@@ -5275,7 +5277,7 @@ function useAppSelections(app) {
   return [appSelections, navState];
 }
 
-const NEBULA_VERSION_HASH = "b1d7" ;
+const NEBULA_VERSION_HASH = "fcc9" ;
 let counter = 0;
 const NebulaApp = forwardRef((_ref, ref) => {
   let {
@@ -5335,7 +5337,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.10.0" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
@@ -6502,13 +6504,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)];
@@ -6608,21 +6619,19 @@ function useSelectionsInteractions(_ref) {
     layout,
     selections,
     pages = [],
-    rangeSelect = true,
     checkboxes = false,
     selectDisabled,
-    doc = document
+    doc = document,
+    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([]);
-  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 +6642,6 @@ function useSelectionsInteractions(_ref) {
     }
 
     setSelectingValues(true);
-    const isSingleSelect = getIsSingleSelect();
     const filtered = additive ? elemNumbers.filter(n => !selected.includes(n)) : elemNumbers;
     await selectValues({
       selections,
@@ -6641,6 +6649,7 @@ function useSelectionsInteractions(_ref) {
       isSingleSelect
     });
     setSelectingValues(false);
+    setPreSelected([]);
   }; // Show estimated selection states instantly before applying the selections for real.
 
 
@@ -6662,6 +6671,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);
@@ -6669,6 +6680,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;
@@ -6676,6 +6696,7 @@ function useSelectionsInteractions(_ref) {
 
     const elemNumber = +event.currentTarget.getAttribute('data-n');
     setPreSelected([elemNumber]);
+    handleSingleSelectKey(event);
   }, [selectingValues, selectDisabled]);
   const onMouseDown = useCallback(event => {
     if (selectingValues || selectDisabled()) {
@@ -6686,11 +6707,12 @@ 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');
 
-    if (getIsSingleSelect() || !rangeSelect || !mouseDown || selectingValues || preSelected.length === 1 && preSelected[0] === elemNumber // prevent toggling again on mouseup
+    if (isSingleSelect || !mouseDown || selectingValues || preSelected.length === 1 && preSelected[0] === elemNumber // prevent toggling again on mouseup
     ) {
       return;
     }
@@ -6701,9 +6723,11 @@ function useSelectionsInteractions(_ref) {
     // Ensure we end interactions when mouseup happens outside the Listbox.
     setMouseDown(false);
     setSelectingValues(false);
+    setIsRangeSelection(false);
+    setIsSingleSelect(singleSelect);
   }, []);
   const onMouseEnter = useCallback(event => {
-    if (getIsSingleSelect() || !mouseDown || selectingValues || selectDisabled()) {
+    if (isSingleSelect || !mouseDown || selectingValues || selectDisabled()) {
       return;
     }
 
@@ -6743,7 +6767,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 = {};
@@ -6752,17 +6776,12 @@ function useSelectionsInteractions(_ref) {
     Object.assign(interactionEvents, {
       onClick
     });
-  } else if (rangeSelect) {
+  } else {
     Object.assign(interactionEvents, {
       onMouseUp,
       onMouseDown,
       onMouseEnter
     });
-  } else {
-    Object.assign(interactionEvents, {
-      onMouseUp,
-      onMouseDown
-    });
   }
 
   return {
@@ -6786,17 +6805,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 useStyles$c = makeStyles(theme => ({
+const borderRadius = 2;
+const useStyles$e = 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': {
@@ -6807,6 +6830,18 @@ const useStyles$c = 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': {
@@ -6817,13 +6852,28 @@ const useStyles$c = makeStyles(theme => ({
     padding: '4px 8px'
   }
 }));
+
+const getIcon = function (styles) {
+  let showGray = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  let excluded = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  let alternative = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  return /*#__PURE__*/React.createElement("span", {
+    className: styles.cbIcon
+  }, (excluded || alternative) && /*#__PURE__*/React.createElement("span", {
+    className: [showGray && excluded && styles.cbIconExcluded, showGray && alternative && styles.cbIconAlternative].filter(Boolean).join(' ')
+  }));
+};
+
 function ListboxCheckbox(_ref) {
   let {
     checked,
     label,
-    dense
+    dense,
+    excluded,
+    alternative,
+    showGray = true
   } = _ref;
-  const styles = useStyles$c();
+  const styles = useStyles$e();
   return /*#__PURE__*/React.createElement(Checkbox, {
     edge: "start",
     checked: checked,
@@ -6833,9 +6883,7 @@ function ListboxCheckbox(_ref) {
       'aria-labelledby': label
     },
     name: label,
-    icon: /*#__PURE__*/React.createElement("span", {
-      className: styles.cbIcon
-    }),
+    icon: getIcon(styles, showGray, excluded, alternative),
     checkedIcon: /*#__PURE__*/React.createElement("span", {
       className: styles.cbIconChecked
     })
@@ -6910,6 +6958,41 @@ function getSegmentsFromRanges(label, ranges) {
   return labels;
 }
 
+const useStyles$d = 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$d();
+  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,
@@ -7087,7 +7170,25 @@ const barPadPx = 4;
 const barBorderWidthPx = 1;
 const barWithCheckboxLeftPadEm = 2;
 const frequencyTextNone = '0';
-const useStyles$b = makeStyles(theme => ({
+
+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$c = makeStyles(theme => ({
   row: {
     flexWrap: 'nowrap',
     borderBottom: "1px solid ".concat(theme.palette.divider),
@@ -7113,8 +7214,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({
@@ -7140,34 +7241,40 @@ const useStyles$b = makeStyles(theme => ({
   checkboxLabel: {
     margin: 0,
     width: '100%',
-    // For checkboxes the first child is the checkbox container, second is the label container.
+    height: '100%',
+    // 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',
@@ -7202,13 +7309,14 @@ const useStyles$b = makeStyles(theme => ({
     color: '#828282'
   }
 }));
-function RowColumn(_ref) {
+
+function RowColumn(_ref2) {
   let {
     index,
     style,
     data,
     column = false
-  } = _ref;
+  } = _ref2;
   const {
     onClick,
     onMouseDown,
@@ -7219,15 +7327,17 @@ function RowColumn(_ref) {
     checkboxes = false,
     dense = false,
     frequencyMode = 'N',
+    isSingleSelect,
     actions,
     frequencyMax = '',
     histogram = false,
-    keyboard
+    keyboard,
+    showGray = true
   } = data;
   const handleKeyDownCallback = useCallback(getFieldKeyboardNavigation(actions), [actions]);
   const [isSelected, setSelected] = useState$1(false);
   const [cell, setCell] = useState$1();
-  const classes = useStyles$b();
+  const classes = useStyles$c();
   const [classArr, setClassArr] = useState$1([]);
   useEffect$1(() => {
     if (!pages) {
@@ -7262,11 +7372,13 @@ 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(showGray ? classes.XS : classes.S);
+      } else if (cell.qState === 'S' || cell.qState === 'L') {
         clazzArr.push(classes.S);
-      } else if (isAlternative(cell)) {
+      } else if (showGray && isAlternative(cell)) {
         clazzArr.push(classes.A);
-      } else if (isExcluded(cell)) {
+      } else if (showGray && isExcluded(cell)) {
         clazzArr.push(classes.X);
       }
     }
@@ -7276,20 +7388,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, showGray && excludedOrAlternative() && classes.excludedTextWithCheckbox]),
       color: color
     }, /*#__PURE__*/React.createElement("span", {
       style: {
@@ -7298,13 +7410,30 @@ 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,
+      excluded: isExcluded(cell),
+      alternative: isAlternative(cell),
+      showGray: showGray
+    });
+    const rb = /*#__PURE__*/React.createElement(ListBoxRadioButton, {
       label: lbl,
       checked: isSelected,
       dense: dense
@@ -7316,7 +7445,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
@@ -7338,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,
@@ -7396,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
@@ -7407,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,
@@ -7425,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, showGray && excludedOrAlternative() && classes.excludedTextWithCheckbox])
   }, getFrequencyText())), (showLock || showTick) && /*#__PURE__*/React.createElement(Grid, {
     item: true,
     className: classes.icon
@@ -7438,6 +7568,29 @@ function RowColumn(_ref) {
   }))));
 }
 
+const scrollBarThumb = '#BBB';
+const scrollBarThumbHover = '#555';
+const scrollBarBackground = '#f1f1f1';
+const useStyles$b = makeStyles(() => ({
+  styledScrollbars: {
+    scrollbarColor: "".concat(scrollBarThumb, " ").concat(scrollBarBackground),
+    '&::-webkit-scrollbar': {
+      width: 10,
+      height: 10
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: scrollBarBackground
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: scrollBarThumb,
+      borderRadius: '1rem'
+    },
+    '&::-webkit-scrollbar-thumb:hover': {
+      backgroundColor: scrollBarThumbHover
+    }
+  }
+}));
+
 function getSizeInfo(_ref) {
   let {
     isVertical,
@@ -7469,16 +7622,19 @@ function ListBox(_ref2) {
     listLayout = 'vertical',
     frequencyMode = 'N',
     histogram = false,
-    rangeSelect = true,
     checkboxes = false,
     update = undefined,
+    fetchStart = undefined,
     dense = false,
     keyboard = {},
+    showGray = true,
     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 styles = useStyles$b();
   const {
     instantPages = [],
     interactionEvents,
@@ -7487,10 +7643,10 @@ function ListBox(_ref2) {
     layout,
     selections,
     pages,
-    rangeSelect,
     checkboxes,
     selectDisabled,
-    doc: document
+    doc: document,
+    isSingleSelect
   });
   const loaderRef = useRef(null);
   const local = useRef({
@@ -7511,7 +7667,9 @@ function ListBox(_ref2) {
 
     const page = pages.filter(p => isLoaded(p))[0];
     return page && isLoaded(page);
-  }, [layout, pages]);
+  }, [layout, pages]); // The time from scroll end until new data is being fetched, may be exposed in API later on.
+
+  const scrollTimeout = 0;
   const loadMoreItems = useCallback((startIndex, stopIndex) => {
     local.current.queue.push({
       start: startIndex,
@@ -7528,7 +7686,7 @@ function ListBox(_ref2) {
     return new Promise(resolve => {
       local.current.timeout = setTimeout(() => {
         const sorted = local.current.queue.slice(-2).sort((a, b) => a.start - b.start);
-        model.getListObjectData('/qListObjectDef', sorted.map(s => ({
+        const reqPromise = model.getListObjectData('/qListObjectDef', sorted.map(s => ({
           qTop: s.start,
           qHeight: s.stop - s.start + 1,
           qLeft: 0,
@@ -7540,7 +7698,8 @@ function ListBox(_ref2) {
           setIsLoadingData(false);
           resolve();
         });
-      }, isScrolling ? 500 : 0);
+        fetchStart && fetchStart(reqPromise);
+      }, isScrolling ? scrollTimeout : 0);
     });
   }, [layout]);
 
@@ -7616,6 +7775,7 @@ function ListBox(_ref2) {
       width: width,
       itemCount: count,
       layout: listLayout,
+      className: styles.styledScrollbars,
       itemData: _objectSpread2(_objectSpread2({
         isLocked,
         column: !isVertical,
@@ -7624,6 +7784,7 @@ function ListBox(_ref2) {
         checkboxes,
         dense,
         frequencyMode,
+        isSingleSelect,
         actions: {
           select,
           confirm: () => selections && selections.confirm.call(selections),
@@ -7631,7 +7792,8 @@ function ListBox(_ref2) {
         },
         frequencyMax,
         histogram,
-        keyboard
+        keyboard,
+        showGray
       }),
       itemSize: itemSize,
       onItemsRendered: onItemsRendered,
@@ -8232,7 +8394,6 @@ function ListBoxSearch(_ref) {
   let {
     model,
     keyboard,
-    autoFocus = true,
     dense = false
   } = _ref;
   const {
@@ -8266,7 +8427,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 +8434,7 @@ function ListBoxSearch(_ref) {
     onChange: onChange,
     onKeyDown: onKeyDown,
     inputProps: {
-      tabIndex: !keyboard.enabled || keyboard.active ? 0 : -1
+      tabIndex: keyboard && (!keyboard.enabled || keyboard.active) ? 0 : -1
     }
   });
 }
@@ -9883,8 +10043,10 @@ function ListBoxInline(_ref) {
     sessionModel = undefined,
     selectionsApi = undefined,
     update = undefined,
+    fetchStart = undefined,
     dense = false,
-    selectDisabled = () => false
+    selectDisabled = () => false,
+    showGray = true
   } = options;
   let {
     frequencyMode,
@@ -9918,7 +10080,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 +10163,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
@@ -10014,12 +10188,30 @@ function ListBoxInline(_ref) {
         });
       }
     }
+
+    return () => {
+      if (selections) {
+        selections.off('deactivated');
+        selections.off('activated');
+      }
+    };
   }, [selections]);
   useEffect$1(() => {
     if (selections) {
       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 +10231,6 @@ function ListBoxInline(_ref) {
   const onShowSearch = () => {
     const newValue = !showSearch;
     setShowSearch(newValue);
-    setAutoFocusSearch(newValue);
   };
 
   const getSearchOrUnlock = () => search === 'toggle' && !hasSelections ? /*#__PURE__*/React.createElement(IconButton, {
@@ -10107,10 +10298,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, {
@@ -10135,9 +10326,11 @@ function ListBoxInline(_ref) {
       height: height,
       width: width,
       update: update,
+      fetchStart: fetchStart,
       dense: dense,
       selectDisabled: selectDisabled,
-      keyboard: keyboard
+      keyboard: keyboard,
+      showGray: showGray
     });
   })));
 }
@@ -10538,7 +10731,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];
@@ -11511,7 +11704,7 @@ function Error$1(_ref3) {
   }));
 }
 
-const _excluded$1 = ["size"];
+const _excluded$2 = ["size"];
 const useStyles$3 = makeStyles(theme => ({
   root: {
     position: 'relative',
@@ -11537,7 +11730,7 @@ function Progress(_ref) {
   let {
     size = 'medium'
   } = _ref,
-      props = _objectWithoutProperties$1(_ref, _excluded$1);
+      props = _objectWithoutProperties$1(_ref, _excluded$2);
 
   const classes = useStyles$3();
   const s = SIZES[size];
@@ -11558,7 +11751,7 @@ function Progress(_ref) {
   }, props)));
 }
 
-const _excluded = ["cancel", "translator"],
+const _excluded$1 = ["cancel", "translator"],
       _excluded2 = ["retry", "translator"];
 const useStyles$2 = makeStyles$1(() => ({
   stripes: {
@@ -11580,7 +11773,7 @@ function Cancel(_ref) {
     cancel,
     translator
   } = _ref,
-      props = _objectWithoutProperties$1(_ref, _excluded);
+      props = _objectWithoutProperties$1(_ref, _excluded$1);
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -11594,7 +11787,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, {
@@ -11619,7 +11813,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({
@@ -12908,6 +13103,10 @@ function viz() {
 
       takeSnapshot() {
         return cellRef.current.takeSnapshot();
+      },
+
+      getModel() {
+        return model;
       }
 
     } // old QVisualization API
@@ -17181,9 +17380,9 @@ function create(_ref) {
   };
 }
 
+const _excluded = ["__DO_NOT_USE__"];
 /**
  * @interface Context
- * @property {boolean=} disableCellPadding
  * @property {boolean=} keyboardNavigation
  * @property {object=} constraints
  * @property {boolean=} constraints.active
@@ -17298,6 +17497,59 @@ const mergeConfigs = (base, c) => ({
   flags: mergeObj(base.flags, c.flags),
   anything: mergeObj(base.anything, c.anything)
 });
+/**
+ * @ignore
+ * @typedef {function(promise)} PromiseFunction A callback function which receives a request promise as the first argument.
+ */
+
+/**
+ * @ignore
+ * @typedef {function(function)} ReceiverFunction A callback function which receives another function as input.
+ */
+
+/**
+ * @ignore
+ * @typedef {object} DoNotUseOptions Options strictly recommended not to use as they might change anytime. Documenting them to keep track of them, but not exposing them to API docs.
+ * @property {boolean=} [focusSearch=false] Initialize the Listbox with the search input focused. Only applicable when
+ *    search is true, since toggling will always focus the search input on show.
+ * @property {boolean=} [options.showGray=true] Render fields or checkboxes in shades of gray instead of white when their state is excluded or alternative.
+ * @property {object} [options.sessionModel] Use a custom sessionModel.
+ * @property {object} [options.selectionsApi] Use a custom selectionsApi to customize how values are selected.
+ * @property {function():boolean} [options.selectDisabled=] Define a function which tells when selections are disabled (true) or enabled (false). By default, always returns false.
+ * @property {PromiseFunction} [options.fetchStart] A function called when the Listbox starts fetching data. Receives the fetch request promise as an argument.
+ * @property {ReceiverFunction} [options.update] A function which receives an update function which upon call will trigger a data fetch.
+ */
+
+/**
+ * @ignore
+ * @param {object} usersOptions Options sent in to fieldInstance.mount.
+ * @param {DoNotUseOptions} __DO_NOT_USE__
+ * @returns {object} Squashed options with defaults given for non-exposed options.
+ */
+
+
+const getOptions = function () {
+  let usersOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  const {
+    __DO_NOT_USE__ = {}
+  } = usersOptions,
+        exposedOptions = _objectWithoutProperties$1(usersOptions, _excluded);
+
+  const DO_NOT_USE_DEFAULTS = {
+    update: undefined,
+    fetchStart: undefined,
+    showGray: true,
+    focusSearch: false,
+    sessionModel: undefined,
+    selectionsApi: undefined,
+    selectDisabled: undefined
+  };
+
+  const squashedOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, exposedOptions), DO_NOT_USE_DEFAULTS), __DO_NOT_USE__);
+
+  return squashedOptions;
+};
 
 function nuked() {
   let configuration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -17538,11 +17790,7 @@ function nuked() {
          */
 
         /**
-         * @typedef { false | true | 'toggle' } SearchMode
-         */
-
-        /**
-         * @typedef {function(function)} ReceiverFunction A callback function which receives another function as input.
+         * @typedef { boolean | 'toggle' } SearchMode
          */
 
         /**
@@ -17565,18 +17813,12 @@ function nuked() {
            * @param {FrequencyMode=} [options.frequencyMode=none] Show frequency none|value|percent|relative
            * @param {boolean=} [options.histogram=false] Show histogram bar
            * @param {SearchMode=} [options.search=true] Show the search bar permanently or using the toggle button: false|true|toggle|toggleShow
-           * @param {boolean=} [options.focusSearch=false] Initialize the Listbox with the search input focused. Only applicable when
-           *   search is true, since toggling will always focus the search input on show.
            * @param {boolean=} [options.toolbar=true] Show the toolbar
            * @param {boolean=} [options.checkboxes=false] Show values as checkboxes instead of as fields
-           * @param {boolean=} [options.rangeSelect=true] Enable range selection
            * @param {boolean=} [options.dense=false] Reduces padding and text size
            * @param {boolean=} [options.stateName="$"] Sets the state to make selections in
            * @param {object=} [options.properties={}] Properties object to extend default properties with
-           * @param {object} [options.sessionModel] Use a custom sessionModel.
-           * @param {object} [options.selectionsApi] Use a custom selectionsApi to customize how values are selected.
-           * @param {function():boolean} [options.selectDisabled=] Define a function which tells when selections are disabled (true) or enabled (false). By default, always returns false.
-           * @param {ReceiverFunction} [options.update] A function which receives an update function which upon call will trigger a data fetch.
+           *
            * @since 1.1.0
            * @instance
            * @example
@@ -17597,7 +17839,7 @@ function nuked() {
               element,
               app,
               fieldIdentifier,
-              options,
+              options: getOptions(options),
               stateName: options.stateName || '$'
             });
             root.add(this._instance);
@@ -17694,13 +17936,535 @@ function nuked() {
 
 var index = nuked(DEFAULT_CONFIG);
 
+var enigmaMocker_dev = {exports: {}};
+
+/*
+* @nebula.js/enigma-mocker v2.9.0
+* Copyright (c) 2022 QlikTech International AB
+* Released under the MIT license.
+*/
+
+(function (module, exports) {
+  (function (global, factory) {
+    module.exports = factory() ;
+  })(commonjsGlobal, function () {
+
+    function SessionMock() {
+      return {
+        getObjectApi() {
+          return Promise.resolve({
+            id: "sessapi - ".concat(+Date.now())
+          });
+        }
+
+      };
+    }
+
+    function ownKeys(object, enumerableOnly) {
+      var keys = Object.keys(object);
+
+      if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        enumerableOnly && (symbols = symbols.filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        })), keys.push.apply(keys, symbols);
+      }
+
+      return keys;
+    }
+
+    function _objectSpread2(target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = null != arguments[i] ? arguments[i] : {};
+        i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+
+      return target;
+    }
+
+    function _defineProperty(obj, key, value) {
+      if (key in obj) {
+        Object.defineProperty(obj, key, {
+          value: value,
+          enumerable: true,
+          configurable: true,
+          writable: true
+        });
+      } else {
+        obj[key] = value;
+      }
+
+      return obj;
+    }
+
+    function _objectWithoutPropertiesLoose(source, excluded) {
+      if (source == null) return {};
+      var target = {};
+      var sourceKeys = Object.keys(source);
+      var key, i;
+
+      for (i = 0; i < sourceKeys.length; i++) {
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+      }
+
+      return target;
+    }
+
+    function _objectWithoutProperties(source, excluded) {
+      if (source == null) return {};
+
+      var target = _objectWithoutPropertiesLoose(source, excluded);
+
+      var key, i;
+
+      if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+        for (i = 0; i < sourceSymbolKeys.length; i++) {
+          key = sourceSymbolKeys[i];
+          if (excluded.indexOf(key) >= 0) continue;
+          if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+          target[key] = source[key];
+        }
+      }
+
+      return target;
+    }
+
+    var hasOwn = Object.prototype.hasOwnProperty;
+    var toStr = Object.prototype.toString;
+    var defineProperty = Object.defineProperty;
+    var gOPD = Object.getOwnPropertyDescriptor;
+
+    var isArray = function isArray(arr) {
+      if (typeof Array.isArray === 'function') {
+        return Array.isArray(arr);
+      }
+
+      return toStr.call(arr) === '[object Array]';
+    };
+
+    var isPlainObject = function isPlainObject(obj) {
+      if (!obj || toStr.call(obj) !== '[object Object]') {
+        return false;
+      }
+
+      var hasOwnConstructor = hasOwn.call(obj, 'constructor');
+      var hasIsPrototypeOf = obj.constructor && obj.constructor.prototype && hasOwn.call(obj.constructor.prototype, 'isPrototypeOf'); // Not own constructor property must be Object
+
+      if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
+        return false;
+      } // Own properties are enumerated firstly, so to speed up,
+      // if last one is own, then all properties are own.
+
+
+      var key;
+
+      for (key in obj) {
+        /**/
+      }
+
+      return typeof key === 'undefined' || hasOwn.call(obj, key);
+    }; // If name is '__proto__', and Object.defineProperty is available, define __proto__ as an own property on target
+
+
+    var setProperty = function setProperty(target, options) {
+      if (defineProperty && options.name === '__proto__') {
+        defineProperty(target, options.name, {
+          enumerable: true,
+          configurable: true,
+          value: options.newValue,
+          writable: true
+        });
+      } else {
+        target[options.name] = options.newValue;
+      }
+    }; // Return undefined instead of __proto__ if '__proto__' is not an own property
+
+
+    var getProperty = function getProperty(obj, name) {
+      if (name === '__proto__') {
+        if (!hasOwn.call(obj, name)) {
+          return void 0;
+        } else if (gOPD) {
+          // In early versions of node, obj['__proto__'] is buggy when obj has
+          // __proto__ as an own property. Object.getOwnPropertyDescriptor() works.
+          return gOPD(obj, name).value;
+        }
+      }
+
+      return obj[name];
+    };
+
+    var extend = function extend() {
+      var options, name, src, copy, copyIsArray, clone;
+      var target = arguments[0];
+      var i = 1;
+      var length = arguments.length;
+      var deep = false; // Handle a deep copy situation
+
+      if (typeof target === 'boolean') {
+        deep = target;
+        target = arguments[1] || {}; // skip the boolean and the target
+
+        i = 2;
+      }
+
+      if (target == null || typeof target !== 'object' && typeof target !== 'function') {
+        target = {};
+      }
+
+      for (; i < length; ++i) {
+        options = arguments[i]; // Only deal with non-null/undefined values
+
+        if (options != null) {
+          // Extend the base object
+          for (name in options) {
+            src = getProperty(target, name);
+            copy = getProperty(options, name); // Prevent never-ending loop
+
+            if (target !== copy) {
+              // Recurse if we're merging plain objects or arrays
+              if (deep && copy && (isPlainObject(copy) || (copyIsArray = isArray(copy)))) {
+                if (copyIsArray) {
+                  copyIsArray = false;
+                  clone = src && isArray(src) ? src : [];
+                } else {
+                  clone = src && isPlainObject(src) ? src : {};
+                } // Never move original objects, clone them
+
+
+                setProperty(target, {
+                  name: name,
+                  newValue: extend(deep, clone, copy)
+                }); // Don't bring in undefined values
+              } else if (typeof copy !== 'undefined') {
+                setProperty(target, {
+                  name: name,
+                  newValue: copy
+                });
+              }
+            }
+          }
+        }
+      } // Return the modified object
+
+
+      return target;
+    };
+
+    function CreateSessionObjectMock() {
+      return props => {
+        const mockedInclusions = props ? props._mock : null;
+        let layout = props;
+
+        if (mockedInclusions) {
+          delete props._mock; // eslint-disable-line no-param-reassign
+
+          layout = extend({}, props, mockedInclusions);
+        }
+
+        return Promise.resolve(_objectSpread2({
+          on: () => {},
+          once: () => {},
+          getLayout: () => Promise.resolve(layout),
+          getProperties: () => Promise.resolve(props),
+          getEffectiveProperties: () => Promise.resolve(props),
+          id: props && props.qInfo && props.qInfo.qId ? props.qInfo.qId : "sel - ".concat(+Date.now())
+        }, props));
+      };
+    }
+    /**
+     * Get value for a fixture property.
+     *
+     * The value is either static (e.g. pass a string / object / similar) or dynamic when passing a function.
+     *
+     * It falls back to the default value in case the fixture has no value specified.
+     *
+     * Example
+     * ```js
+     * const fixture = {
+     *  id: 'grid-chart-1',
+     * };
+     * const app = {
+     *   id: getValue(fixture.id, { defaultValue: 'object-id-${+Date.now()}'}),
+     * }
+     * ```
+     *
+     * @param {any} prop Fixture property. Either a fixed value (string / object / boolean / ...) or a function invoked when the value is needed.
+     * @param {object} options Options.
+     * @param {Array<any>} options.args Arguments used to evaluate the property value.
+     * @param {any} options.defaultValue Default value in case not value is defined in fixture.
+     * @returns The property value.
+     */
+
+
+    const getPropValue = function (prop) {
+      let {
+        args = [],
+        defaultValue
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+      if (typeof prop === 'function') {
+        return prop(...args);
+      }
+
+      if (prop !== undefined) {
+        return prop;
+      }
+
+      return defaultValue;
+    };
+    /**
+     * Get function for a fixture property.
+     *
+     * When the returned function is invoked it resolves the value - using `defaultValue` as fallback - and returns it. The value is returned as a promise if `option.usePromise` is `true`.
+     *
+     * Example:
+     * ```js
+     * const fixture = {
+     *   getHyperCubeData(path, page) {
+     *     return [ ... ];
+     *   }
+     * }
+     * const app = {
+     *   getHyperCubeData: getPropFn(fixture.getHyperCubeData, { defaultValue: [], usePromise: true })
+     * };
+     * ```
+     *
+     * @param {any} prop Fixture property. Either a fixed value (string / object / boolean / ...) or a function invoked when the value is needed.
+     * @param {object} options Options.
+     * @param {any} options.defaultValue Default value in case not value is defined in fixture.
+     * @param {boolean} options.async When `true` the returns value is wrapped in a promise, otherwise the value is directly returned.
+     * @param {number} options.number Delay before value is returned.
+     * @returns A fixture property function
+     */
+
+
+    const getPropFn = function (prop) {
+      let {
+        defaultValue,
+        async = true,
+        delay = 0
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      return function () {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        const value = getPropValue(prop, {
+          defaultValue,
+          args
+        });
+        return async ? new Promise(resolve => {
+          setTimeout(() => resolve(value), delay);
+        }) : value;
+      };
+    };
+
+    const _excluded = ["id", "session"];
+    /**
+     * Properties on `getObject()` operating synchronously.
+     */
+
+    const PROPS_SYNC = ['addListener', 'emit', 'listeners', 'on', 'once', 'removeAllListeners', 'removeListener', 'setMaxListerners'];
+    /**
+     * Is property operating asynchrously.
+     * @param {string} name Property name.
+     * @returns `true` if property is operating asynchrously, otherwise `false`.
+     */
+
+    function isPropAsync(name) {
+      return !PROPS_SYNC.includes(name);
+    }
+    /**
+     * Get `qId` for visualization.
+     * @param {object} genericObject Generic object describing behaviour of mock
+     * @returns The `qId`, undefined if not present
+     */
+
+
+    function getQId(genericObject) {
+      const layout = getPropValue(genericObject.getLayout);
+      return layout.qInfo && layout.qInfo.qId;
+    }
+    /**
+     * Create a mock of a generic object. Mandatory properties are added, functions returns async values where applicable etc.
+     * @param {object} genericObject Generic object describing behaviour of mock
+     * @param {EnigmaMockerOptions} options Options.
+     * @returns The mocked object
+     */
+
+
+    function createMock(genericObject, options) {
+      const qId = getQId(genericObject);
+      const {
+        delay
+      } = options;
+
+      const {
+        id,
+        session
+      } = genericObject,
+            props = _objectWithoutProperties(genericObject, _excluded);
+
+      const mock = _objectSpread2({
+        id: getPropValue(id, {
+          defaultValue: "object - ".concat(+Date.now())
+        }),
+        session: getPropValue(session, {
+          defaultValue: true
+        }),
+        on: () => {},
+        once: () => {}
+      }, Object.entries(props).reduce((fns, _ref) => {
+        let [name, value] = _ref;
+        return _objectSpread2(_objectSpread2({}, fns), {}, {
+          [name]: getPropFn(value, {
+            async: isPropAsync(name),
+            delay
+          })
+        });
+      }, {}));
+
+      return {
+        [qId]: mock
+      };
+    }
+    /**
+     * Create mocked objects from list of generic objects.
+     * @param {Array<object>} genericObjects Generic objects describing behaviour of mock
+     * @param {EnigmaMockerOptions} options options
+     * @returns Object with mocks where key is `qId` and value is the mocked object.
+     */
+
+
+    function createMocks(genericObjects, options) {
+      return genericObjects.reduce((mocks, genericObject) => _objectSpread2(_objectSpread2({}, mocks), createMock(genericObject, options)), {});
+    }
+    /**
+     * Validates if mandatory information is available.
+     * @param {object} genericObject Generic object to validate
+     * @throws {}
+     * <ul>
+     *   <li>{Error} If getLayout is missing</li>
+     *   <li>{Error} If getLayout.qInfo.qId is missing</li>
+     * </ul>
+     */
+
+
+    function validate(genericObject) {
+      if (!genericObject.getLayout) {
+        throw new Error('Generic object is missing "getLayout"');
+      }
+
+      const qId = getQId(genericObject);
+
+      if (!qId) {
+        throw new Error('Generic object is missing "qId" for path "getLayout().qInfo.qId"');
+      }
+    }
+    /**
+     * Creates mock of `getObject(id)` based on an array of generic objects.
+     * @param {Array<object>} genericObjects Generic objects.
+     * @param {EnigmaMockerOptions} options Options.
+     * @returns Function to retrieve the mocked generic object with the corresponding id.
+     */
+
+
+    function GetObjectMock() {
+      let genericObjects = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+      if (!Array.isArray(genericObjects) || genericObjects.length === 0) {
+        return () => {
+          throw new Error('No "genericObjects" specified');
+        };
+      }
+
+      genericObjects.forEach(validate);
+      const mocks = createMocks(genericObjects, options);
+      return async id => Promise.resolve(mocks[id]);
+    }
+
+    function GetAppLayoutMock() {
+      return () => Promise.resolve({
+        id: 'app-layout'
+      });
+    }
+    /**
+     * @interface EnigmaMockerOptions
+     * @property {number} delay Simulate delay (in ms) for calls in enigma-mocker.
+     */
+
+    /**
+     * Mocks Engima app functionality. It accepts one / many generic objects as input argument and returns the mocked Enigma app. Each generic object represents one visulization and specifies how it behaves. For example, what layout to use the data to present.
+     *
+     * The generic object is represented with a Javascript object with a number of properties. The name of the property correlates to the name in the Enigma model for `app.getObject(id)`. For example, the property `getLayout` in the generic object is used to define `app.getObject(id).getLayout()`. Any property can be added to the fixture (just make sure it exists and behaves as in the Enigma model!).
+     *
+     * The value for each property is either fixed (string / boolean / number / object) or a function. Arguments are forwarded to the function to allow for greater flexibility. For example, this can be used to return different hypercube data when scrolling in the chart.
+     *
+     * @param {Array<object>} genericObjects Generic objects controling behaviour of visualizations.
+     * @param {EnigmaMockerOptions} options Options
+     * @returns {Promise<enigma.Doc>}
+     * @example
+     * const genericObject = {
+     *   getLayout() {
+     *     return {
+     *       qInfo: {
+     *         qId: 'qqj4zx',
+     *         qType: 'sn-grid-chart'
+     *       },
+     *       ...
+     *     }
+     *   },
+     *   getHyperCubeData(path, page) {
+     *     return [ ... ];
+     *   }
+     * };
+     * const app = await EnigmaMocker.fromGenericObjects([genericObject]);
+     */
+
+
+    var fromGenericObjects = function (genericObjects) {
+      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      const session = new SessionMock();
+      const createSessionObject = new CreateSessionObjectMock();
+      const getObject = new GetObjectMock(genericObjects, options);
+      const getAppLayout = new GetAppLayoutMock();
+      const app = {
+        id: "app - ".concat(+Date.now()),
+        session,
+        createSessionObject,
+        getObject,
+        getAppLayout
+      };
+      return Promise.resolve(app);
+    };
+
+    var index = {
+      fromGenericObjects
+    };
+    return index;
+  });
+})(enigmaMocker_dev);
+
+var enigmaMocker = enigmaMocker_dev.exports;
+
 /* eslint no-underscore-dangle: 0 */
 
 const __DO_NOT_USE__ = {
   generator: generatorFn,
   hook,
   theme,
-  locale
+  locale,
+  EnigmaMocker: enigmaMocker
 };
 
 export { __DO_NOT_USE__, conversion, index as embed, onTakeSnapshot, useAction, useApp, useAppLayout, useConstraints, useDeviceType, useEffect, useElement, useEmbed, useGlobal, useImperativeHandle, useKeyboard, useLayout, useMemo, useModel, useOptions, usePlugins, usePromise, useRect, useRenderState, useSelections, useStaleLayout, useState, useTheme, useTranslator };