@nebula.js/stardust 2.3.1 → 2.6.1

package/core/esm/dev.js

@@ -1,13 +1,13 @@
 /*
-* @nebula.js/stardust v2.3.1
-* Copyright (c) 2021 QlikTech International AB
+* @nebula.js/stardust v2.6.1
+* Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
 
 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 { Grid, 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, 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: {}};
 
@@ -3209,8 +3209,8 @@ function theme() {
      * @returns {string} The style value
      *
      * @example
-     * theme.getStyle('object', 'title.main', 'fontSize'));
-     * theme.getStyle('', '', 'fontSize'));
+     * theme.getStyle('object', 'title.main', 'fontSize');
+     * theme.getStyle('', '', 'fontSize');
      */
     getStyle(basePath, path, attribute) {
       if (!styleResolverInstanceCache[basePath]) {
@@ -5234,7 +5234,7 @@ function useAppSelections(app) {
   return [appSelections, navState];
 }
 
-const NEBULA_VERSION_HASH = "03e4" ;
+const NEBULA_VERSION_HASH = "375a" ;
 let counter = 0;
 const NebulaApp = forwardRef((_ref, ref) => {
   let {
@@ -5294,7 +5294,7 @@ function boot(_ref2) {
   const appRef = React.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "2.3.1" );
+  element.setAttribute('data-nebulajs-version', "2.6.1" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
@@ -6435,6 +6435,278 @@ var InfiniteLoader = function (_PureComponent) {
   return InfiniteLoader;
 }(PureComponent);
 
+const SELECTED_STATES = ['S', 'XS'];
+
+const flatten = arr => arr.reduce((prev, cur) => prev.concat(cur));
+
+function isStateSelected(qState) {
+  return SELECTED_STATES.includes(qState);
+}
+
+function getUniques(arr) {
+  return Array.isArray(arr) ? Array.from(new Set(arr)) : undefined;
+}
+function getSelectedValues(pages) {
+  if (!pages || !pages.length) {
+    return [];
+  }
+
+  const elementNbrs = pages.map(page => {
+    const elementNumbers = page.qMatrix.map(p => {
+      const [p0] = p;
+      return isStateSelected(p0.qState) ? p0.qElemNumber : false;
+    });
+    return elementNumbers.filter(n => n !== false);
+  });
+  return flatten(elementNbrs);
+}
+function applySelectionsOnPages(pages, elmNumbers) {
+  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;
+      return [_objectSpread2(_objectSpread2({}, p0), {}, {
+        qState
+      }), p.slice(1)];
+    });
+    return _objectSpread2(_objectSpread2({}, page), {}, {
+      qMatrix
+    });
+  });
+  return matrices;
+}
+async function selectValues(_ref) {
+  let {
+    selections,
+    elemNumbers,
+    isSingleSelect = false
+  } = _ref;
+  let resolved = Promise.resolve(false);
+  const hasNanValues = elemNumbers.some(elemNumber => Number.isNaN(elemNumber));
+
+  if (!hasNanValues) {
+    const elemNumbersToSelect = elemNumbers;
+    resolved = selections.select({
+      method: 'selectListObjectValues',
+      params: ['/qListObjectDef', elemNumbersToSelect, !isSingleSelect]
+    }).then(success => success !== false).catch(() => false);
+  }
+
+  return resolved;
+}
+function getElemNumbersFromPages(pages) {
+  if (!pages || !pages.length) {
+    return [];
+  }
+
+  const elemNumbersArr = pages.map(page => {
+    const qElemNumbers = page.qMatrix.map(p => {
+      const [{
+        qElemNumber
+      }] = p;
+      return qElemNumber;
+    });
+    return qElemNumbers;
+  });
+  const elemNumbers = flatten(elemNumbersArr);
+  return elemNumbers;
+}
+/**
+ * @typedef {object} MinMaxResult
+ * @property {number} min
+ * @property {number} max
+ */
+
+/**
+ * Returns the min and max indices of elemNumbersOrdered which contains
+ * all numbers in elementNbrs.
+ *
+ * @param {number[]} elementNbrs
+ * @param {number[]} elemNumbersOrdered
+ * @returns {MinMaxResult}
+ */
+
+function getMinMax(elementNbrs, elemNumbersOrdered) {
+  let min = Infinity;
+  let max = -Infinity;
+  elementNbrs.forEach(nbr => {
+    const index = elemNumbersOrdered.indexOf(nbr);
+    min = index < min ? index : min;
+    max = index > max ? index : max;
+  });
+  return {
+    min,
+    max
+  };
+}
+
+function fillRange(elementNbrs, elemNumbersOrdered) {
+  if (!elementNbrs) {
+    return [];
+  }
+
+  if (elementNbrs.length <= 1) {
+    return elementNbrs;
+  } // Interpolate values algorithm
+
+
+  const {
+    min,
+    max
+  } = getMinMax(elementNbrs, elemNumbersOrdered);
+  return elemNumbersOrdered.slice(min, max + 1);
+}
+
+function useSelectionsInteractions(_ref) {
+  let {
+    layout,
+    selections,
+    pages = [],
+    rangeSelect = true,
+    checkboxes = false,
+    doc = document
+  } = _ref;
+  const [instantPages, setInstantPages] = useState$1(pages);
+  const [mouseDown, setMouseDown] = useState$1(false);
+  const [selectingValues, setSelectingValues] = useState$1(false);
+  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 select = async function () {
+    let elemNumbers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    setSelectingValues(true);
+    const isSingleSelect = getIsSingleSelect();
+    const filtered = additive ? elemNumbers.filter(n => !selected.includes(n)) : elemNumbers;
+    await selectValues({
+      selections,
+      elemNumbers: filtered,
+      isSingleSelect
+    });
+    setSelectingValues(false);
+  }; // Show estimated selection states instantly before applying the selections for real.
+
+
+  const preSelect = function (elemNumbers) {
+    let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    setPreSelected(existing => {
+      const uniques = getUniques([...existing, ...elemNumbers]);
+      const filtered = additive ? uniques.filter(n => !selected.includes(n)) : uniques;
+      const filled = additive ? fillRange(uniques, elemNumbersOrdered) : filtered;
+      return filled;
+    });
+  };
+
+  const onClick = useCallback(event => {
+    if (selectingValues) {
+      return;
+    }
+
+    const elemNumber = +event.currentTarget.getAttribute('data-n');
+    setPreSelected([elemNumber]);
+  }, [selectingValues]);
+  const onMouseDown = useCallback(event => {
+    if (selectingValues) {
+      return;
+    }
+
+    setIsRangeSelection(false);
+    setMouseDown(true);
+    const elemNumber = +event.currentTarget.getAttribute('data-n');
+    setPreSelected([elemNumber]);
+  }, [selectingValues]);
+  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
+    ) {
+      return;
+    }
+
+    preSelect([elemNumber]);
+  }, [mouseDown, selectingValues, preSelected, selected, isRangeSelection]);
+  const onMouseUpDoc = useCallback(() => {
+    // Ensure we end interactions when mouseup happens outside the Listbox.
+    setMouseDown(false);
+    setSelectingValues(false);
+  }, []);
+  const onMouseEnter = useCallback(event => {
+    if (getIsSingleSelect() || !mouseDown || selectingValues) {
+      return;
+    }
+
+    setIsRangeSelection(true);
+    const elemNumber = +event.currentTarget.getAttribute('data-n');
+    preSelect([elemNumber], true);
+  }, [mouseDown, selectingValues, isRangeSelection, preSelected, selected, layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne]);
+  useEffect$1(() => {
+    // Perform selections of pre-selected values. This can
+    // happen only when interactions have finished (mouseup).
+    const interactionIsFinished = !mouseDown;
+
+    if (!preSelected || !preSelected.length || selectingValues || !interactionIsFinished || !layout) {
+      return;
+    }
+
+    select(preSelected, isRangeSelection);
+  }, [preSelected, mouseDown]);
+  useEffect$1(() => {
+    doc.addEventListener('mouseup', onMouseUpDoc);
+    return () => {
+      doc.removeEventListener('mouseup', onMouseUpDoc);
+    };
+  }, []);
+  useEffect$1(() => {
+    if (selectingValues || mouseDown) {
+      return;
+    } // Keep track of (truely) selected fields so we can prevent toggling them on range select.
+
+
+    const alreadySelected = getSelectedValues(pages);
+    setSelected(alreadySelected);
+  }, [pages]);
+  useEffect$1(() => {
+    if (selectingValues || !pages || !checkboxes && !mouseDown) {
+      return;
+    } // Render pre-selections before they have been selected in Engine.
+
+
+    const newPages = applySelectionsOnPages(pages, preSelected);
+    setInstantPages(newPages);
+  }, [preSelected]);
+  const interactionEvents = {};
+
+  if (checkboxes) {
+    Object.assign(interactionEvents, {
+      onClick
+    });
+  } else if (rangeSelect) {
+    Object.assign(interactionEvents, {
+      onMouseUp,
+      onMouseDown,
+      onMouseEnter
+    });
+  } else {
+    Object.assign(interactionEvents, {
+      onMouseUp,
+      onMouseDown
+    });
+  }
+
+  return {
+    instantPages,
+    interactionEvents
+  };
+}
+
 const tick = props => _objectSpread2(_objectSpread2({}, props), {}, {
   shapes: [{
     type: 'path',
@@ -6446,181 +6718,196 @@ const tick = props => _objectSpread2(_objectSpread2({}, props), {}, {
 
 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$b = makeStyles(theme => ({
-  row: {
-    flexWrap: 'nowrap',
-    borderBottom: "1px solid ".concat(theme.palette.divider),
-    '&:focus': {
-      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusOutline),
-      outline: 'none'
-    }
+  cbIcon: {
+    borderRadius: 3,
+    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))'
   },
-  cell: {
-    padding: '8px',
-    '& span': {
-      whiteSpace: 'nowrap',
-      fontSize: '12px',
-      lineHeight: '16px'
-    },
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  },
-  icon: {
-    padding: theme.spacing(1)
-  },
-  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'
+  cbIconChecked: {
+    borderRadius: 3,
+    backgroundColor: theme.palette.selected.main,
+    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+    '&:before': {
+      display: 'block',
+      width: 16,
+      height: 16,
+      backgroundImage: CheckboxChecked,
+      content: '""'
     }
   },
-  A: {
-    background: theme.palette.selected.alternative,
-    color: theme.palette.selected.alternativeContrastText
-  },
-  X: {
-    background: theme.palette.selected.excluded,
-    color: theme.palette.selected.excludedContrastText
+  checkbox: {
+    margin: 0,
+    '&:hover': {
+      backgroundColor: 'inherit !important'
+    }
   },
-  highlighted: {
-    backgroundColor: '#FFC72A'
+  dense: {
+    padding: '4px 8px'
   }
 }));
-function Row(_ref) {
+function ListboxCheckbox(_ref) {
   let {
-    index,
-    style,
-    data
+    checked,
+    label,
+    dense
   } = _ref;
-  const classes = useStyles$b();
-  const classArr = [classes.row];
-  let label = '';
-  const {
-    onClick,
-    pages
-  } = data;
-  let cell;
-
-  if (pages) {
-    const page = pages.filter(p => p.qArea.qTop <= index && index < p.qArea.qTop + p.qArea.qHeight)[0];
-
-    if (page) {
-      const area = page.qArea;
-
-      if (index >= area.qTop && index < area.qTop + area.qHeight) {
-        [cell] = page.qMatrix[index - area.qTop];
-      }
-    }
-  }
+  const styles = useStyles$b();
+  return /*#__PURE__*/React.createElement(Checkbox, {
+    edge: "start",
+    checked: checked,
+    tabIndex: -1,
+    disableRipple: true,
+    className: [styles.checkbox, dense && styles.dense].filter(Boolean).join(' '),
+    inputProps: {
+      'aria-labelledby': label
+    },
+    name: label,
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: styles.cbIcon
+    }),
+    checkedIcon: /*#__PURE__*/React.createElement("span", {
+      className: styles.cbIconChecked
+    })
+  });
+}
 
-  let locked = false;
-  let selected = false;
+/**
+ * @typedef {object} Range
+ * @property {number} qCharPos The (absolute) index where the highlighted range starts.
+ * @property {number} qCharCount The length of the sub-string (starting from qChartPos) that should be highlighted.
+ */
 
-  if (cell) {
-    label = cell.qText;
-    locked = cell.qState === 'L' || cell.qState === 'XL';
-    selected = cell.qState === 'S' || cell.qState === 'XS';
+/**
+ * @typedef {object} Segment
+ * @property {string} segment The sub-string/segment cut out from the original label.
+ * @property {boolean} highlighted A flag which tells whether the segment should be highlighted or not.
+ */
 
-    if (cell.qState === 'S' || cell.qState === 'L') {
-      classArr.push(classes.S);
-    } else if (cell.qState === 'A') {
-      classArr.push(classes.A);
-    } else if (cell.qState === 'X' || cell.qState === 'XS' || cell.qState === 'XL') {
-      classArr.push(classes.X);
-    }
-  } // Handle search highlights
+/**
+ * @param {string} label The label we want to create segments out of.
+ * @param {Range} range The indexes which define how to create the segments.
+ * @param {number=} [startIndex] An optional index which tells where we want to start the first segment from
+ *   (only relevant for creating the first unhighlighted segment of a string/sub-string).
+ * @returns {Segment[]} An array of segments.
+ */
+function getSegmentsFromRange(label, range) {
+  let startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  const {
+    qCharPos,
+    qCharCount
+  } = range;
+  const segments = [];
 
+  if (qCharPos > startIndex) {
+    // Create a non-highlighted section before the highighted section.
+    segments.push([label.slice(startIndex, qCharPos), false]);
+  } // Highlighted segment.
 
-  const ranges = cell && cell.qHighlightRanges && cell.qHighlightRanges.qRanges.sort((a, b) => a.qCharPos - b.qCharPos) || [];
-  const labels = ranges.reduce((acc, curr, ix) => {
-    // First non highlighted segment
-    if (curr.qCharPos > 0 && ix === 0) {
-      acc.push([label.slice(0, curr.qCharPos)]);
-    } // Previous non highlighted segment
 
+  segments.push([label.slice(qCharPos, qCharPos + qCharCount), true]);
+  return segments;
+}
+/**
+ * @param {string} label The label we want to create segments out of.
+ * @param {Range[]} ranges The ranges defining indices for cutting the string into segments.
+ * @returns {Segment[]} An array of segments, covering the entire string label.
+ */
 
-    const prev = ranges[ix - 1];
 
-    if (prev) {
-      acc.push([label.slice(prev.qCharPos + prev.qCharPos + 1, curr.qCharPos)]);
-    } // Highlighted segment
+function getSegmentsFromRanges(label, ranges) {
+  if (!ranges.length) {
+    return [];
+  }
 
+  const labels = ranges.reduce((acc, curr, ix) => {
+    const startIndex = ix === 0 ? 0 : ranges[ix - 1].qCharPos + ranges[ix - 1].qCharCount;
+    acc.push(...getSegmentsFromRange(label, curr, startIndex)); // Last non highlighted segment
 
-    acc.push([label.slice(curr.qCharPos, curr.qCharPos + curr.qCharCount), classes.highlighted]); // Last non highlighted segment
+    const isLastRange = ix === ranges.length - 1;
+    const endIndex = ranges[ix].qCharPos + ranges[ix].qCharCount;
 
-    if (ix === ranges.length - 1 && curr.qCharPos + curr.qCharCount < label.length) {
-      acc.push([label.slice(curr.qCharPos + curr.qCharCount)]);
+    if (isLastRange && endIndex < label.length) {
+      acc.push([label.slice(endIndex), false]);
     }
 
     return acc;
   }, []);
-  return /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    spacing: 0,
-    className: classArr.join(' ').trim(),
-    style: style,
-    onClick: onClick,
-    role: "row",
-    tabIndex: 0,
-    "data-n": cell && cell.qElemNumber
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    style: {
-      minWidth: 0,
-      flexGrow: 1
-    },
-    className: classes.cell,
-    title: "".concat(label)
-  }, ranges.length === 0 ? /*#__PURE__*/React.createElement(Typography, {
-    component: "span",
-    noWrap: true,
-    color: "inherit"
-  }, "".concat(label)) : labels.map((_ref2, ix) => {
-    let [l, highlighted] = _ref2;
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      React.createElement(Typography, {
-        component: "span",
-        key: ix,
-        className: highlighted,
-        noWrap: true
-      }, l)
-    );
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    className: classes.icon
-  }, locked && /*#__PURE__*/React.createElement(Lock, {
-    size: "small"
-  }), selected && /*#__PURE__*/React.createElement(Tick, {
-    size: "small"
-  })));
+  return labels;
 }
 
+const ellipsis = {
+  width: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+};
 const useStyles$a = makeStyles(theme => ({
+  row: {
+    flexWrap: 'nowrap',
+    borderBottom: "1px solid ".concat(theme.palette.divider),
+    color: theme.palette.text.primary,
+    '&:focus': {
+      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusOutline),
+      outline: 'none'
+    }
+  },
   column: {
     flexWrap: 'nowrap',
     borderRight: "1px solid ".concat(theme.palette.divider),
+    color: theme.palette.text.primary,
     '&:focus': {
       boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusOutline),
       outline: 'none'
     }
   },
+  // The interior wrapper for all field content.
   cell: {
-    padding: '8px',
-    '& span': {
-      whiteSpace: 'nowrap',
-      fontSize: '12px',
-      lineHeight: '16px'
-    },
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+    flexGrow: 1,
+    // Note that this padding is overridden when using checkboxes.
+    paddingLeft: '12px',
+    paddingRight: '12px'
+  },
+  // The leaf node, containing the label text.
+  labelText: _objectSpread2({
+    flexBasis: 'max-content',
+    lineHeight: '16px',
+    userSelect: 'none',
+    whiteSpace: 'pre'
+  }, ellipsis),
+  labelDense: {
+    fontSize: 12
   },
+  // Highlight is added to labelText spans, which are created as siblings to original labelText,
+  // when a search string is matched.
+  highlighted: {
+    overflow: 'visible',
+    width: '100%',
+    '& > span': {
+      width: '100%',
+      backgroundColor: '#FFC72A'
+    }
+  },
+  // Checkbox and label container.
+  checkboxLabel: {
+    margin: 0,
+    width: '100%',
+    // For checkboxes the first child is the checkbox container, second is the label container.
+    '& > span:nth-child(2)': _objectSpread2({}, ellipsis)
+  },
+  // 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,
@@ -6636,135 +6923,232 @@ const useStyles$a = makeStyles(theme => ({
   X: {
     background: theme.palette.selected.excluded,
     color: theme.palette.selected.excludedContrastText
-  },
-  highlighted: {
-    backgroundColor: '#FFC72A'
   }
 }));
-function Column(_ref) {
+function RowColumn(_ref) {
   let {
     index,
     style,
-    data
+    data,
+    column = false
   } = _ref;
-  const classes = useStyles$a();
-  const classArr = [classes.column];
-  let label = '';
   const {
     onClick,
-    pages
+    onMouseDown,
+    onMouseUp,
+    onMouseEnter,
+    pages,
+    isLocked,
+    checkboxes = false,
+    dense = false
   } = data;
-  let cell;
+  const [isSelected, setSelected] = useState$1(false);
+  const [cell, setCell] = useState$1();
+  const classes = useStyles$a();
+  const [classArr, setClassArr] = useState$1([]);
+  useEffect$1(() => {
+    if (!pages) {
+      return;
+    }
 
-  if (pages) {
+    let c;
     const page = pages.filter(p => p.qArea.qTop <= index && index < p.qArea.qTop + p.qArea.qHeight)[0];
 
     if (page) {
       const area = page.qArea;
 
       if (index >= area.qTop && index < area.qTop + area.qHeight) {
-        [cell] = page.qMatrix[index - area.qTop];
+        [c] = page.qMatrix[index - area.qTop];
       }
     }
-  }
-
-  let locked = false;
-  let selected = false;
 
-  if (cell) {
-    label = cell.qText;
-    locked = cell.qState === 'L' || cell.qState === 'XL';
-    selected = cell.qState === 'S' || cell.qState === 'XS';
-
-    if (cell.qState === 'S' || cell.qState === 'L') {
-      classArr.push(classes.S);
-    } else if (cell.qState === 'A') {
-      classArr.push(classes.A);
-    } else if (cell.qState === 'X' || cell.qState === 'XS' || cell.qState === 'XL') {
-      classArr.push(classes.X);
+    setCell(c);
+  }, [pages]);
+  useEffect$1(() => {
+    if (!cell) {
+      return;
     }
-  } // Handle search highlights
 
+    const selected = cell.qState === 'S' || cell.qState === 'XS' || cell.qState === 'L';
+    setSelected(selected);
+    const clazzArr = [column ? classes.column : classes.row];
 
-  const ranges = cell && cell.qHighlightRanges && cell.qHighlightRanges.qRanges.sort((a, b) => a.qCharPos - b.qCharPos) || [];
-  const labels = ranges.reduce((acc, curr, ix) => {
-    // First non highlighted segment
-    if (curr.qCharPos > 0 && ix === 0) {
-      acc.push([label.slice(0, curr.qCharPos)]);
-    } // Previous non highlighted segment
+    if (!checkboxes) {
+      if (cell.qState === 'S' || cell.qState === 'L') {
+        clazzArr.push(classes.S);
+      } else if (cell.qState === 'A') {
+        clazzArr.push(classes.A);
+      } else if (cell.qState === 'X' || cell.qState === 'XS' || cell.qState === 'XL') {
+        clazzArr.push(classes.X);
+      }
+    }
 
+    setClassArr(clazzArr);
+  }, [cell && cell.qState]);
 
-    const prev = ranges[ix - 1];
+  const getValueField = _ref2 => {
+    let {
+      lbl,
+      ix,
+      color,
+      highlighted = false
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Typography, {
+      component: "span",
+      variant: "body2",
+      key: ix,
+      className: [classes.labelText, highlighted && classes.highlighted, dense && classes.labelDense].filter(c => !!c).join(' ').trim(),
+      color: color
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        whiteSpace: 'pre'
+      }
+    }, lbl));
+  };
 
-    if (prev) {
-      acc.push([label.slice(prev.qCharPos + prev.qCharPos + 1, curr.qCharPos)]);
-    } // Highlighted segment
+  const getCheckboxField = _ref3 => {
+    let {
+      lbl,
+      color,
+      qElemNumber
+    } = _ref3;
+    const cb = /*#__PURE__*/React.createElement(ListboxCheckbox, {
+      label: lbl,
+      checked: isSelected,
+      dense: dense
+    });
+    const labelTag = typeof lbl === 'string' ? getValueField({
+      lbl,
+      color,
+      highlighted: false
+    }) : lbl;
+    return /*#__PURE__*/React.createElement(FormControlLabel, {
+      color: color,
+      control: cb,
+      className: classes.checkboxLabel,
+      label: labelTag,
+      key: qElemNumber
+    });
+  };
 
+  const label = cell ? cell.qText : ''; // Search highlights. Split up labelText span into several and add the highlighted class to matching sub-strings.
 
-    acc.push([label.slice(curr.qCharPos, curr.qCharPos + curr.qCharCount), classes.highlighted]); // Last non highlighted segment
+  const ranges = cell && cell.qHighlightRanges && cell.qHighlightRanges.qRanges.sort((a, b) => a.qCharPos - b.qCharPos) || [];
+  const labels = getSegmentsFromRanges(label, ranges);
+  const getField = checkboxes ? getCheckboxField : getValueField;
 
-    if (ix === ranges.length - 1 && curr.qCharPos + curr.qCharCount < label.length) {
-      acc.push([label.slice(curr.qCharPos + curr.qCharCount)]);
-    }
+  const getFieldWithRanges = _ref4 => {
+    let {
+      lbls
+    } = _ref4;
+    const labelsWithRanges = lbls.map((_ref5, ix) => {
+      let [lbl, highlighted] = _ref5;
+      return getValueField({
+        ix,
+        highlighted,
+        lbl
+      });
+    });
+    return checkboxes ? getCheckboxField({
+      lbl: labelsWithRanges
+    }) : labelsWithRanges;
+  };
 
-    return acc;
-  }, []);
+  const iconStyles = {
+    alignItems: 'center',
+    display: 'flex'
+  };
+  const showLock = isSelected && isLocked;
+  const showTick = !checkboxes && isSelected && !isLocked;
+  const cellStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+    flexGrow: 1,
+    padding: checkboxes ? 0 : undefined
+  };
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     spacing: 0,
-    className: classArr.join(' ').trim(),
+    className: ['value', ...classArr].join(' ').trim(),
     style: style,
     onClick: onClick,
-    alignItems: "center",
-    role: "row",
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp,
+    onMouseEnter: onMouseEnter,
+    role: column ? 'column' : 'row',
     tabIndex: 0,
     "data-n": cell && cell.qElemNumber
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    style: {
-      minWidth: 0,
-      flexGrow: 1
-    },
+    style: cellStyle,
     className: classes.cell,
     title: "".concat(label)
-  }, ranges.length === 0 ? /*#__PURE__*/React.createElement(Typography, {
-    component: "span",
-    noWrap: true,
-    color: "inherit"
-  }, "".concat(label)) : labels.map((_ref2, ix) => {
-    let [l, highlighted] = _ref2;
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      React.createElement(Typography, {
-        component: "span",
-        key: ix,
-        className: highlighted,
-        noWrap: true
-      }, l)
-    );
-  })), /*#__PURE__*/React.createElement(Grid, {
+  }, ranges.length === 0 ? getField({
+    lbl: label,
+    color: 'inherit'
+  }) : getFieldWithRanges({
+    lbls: labels
+  })), (showLock || showTick) && /*#__PURE__*/React.createElement(Grid, {
     item: true,
     className: classes.icon
-  }, locked && /*#__PURE__*/React.createElement(Lock, {
+  }, showLock && /*#__PURE__*/React.createElement(Lock, {
+    style: iconStyles,
     size: "small"
-  }), selected && /*#__PURE__*/React.createElement(Tick, {
+  }), showTick && /*#__PURE__*/React.createElement(Tick, {
+    style: iconStyles,
     size: "small"
   })));
 }
 
-/* eslint no-underscore-dangle:0 */
-function ListBox(_ref) {
+function getSizeInfo(_ref) {
+  let {
+    isVertical,
+    checkboxes,
+    dense,
+    height
+  } = _ref;
+  let sizeVertical = checkboxes ? 40 : 33;
+
+  if (dense) {
+    sizeVertical = 24;
+  }
+
+  const itemSize = isVertical ? sizeVertical : 200;
+  const listHeight = height || 8 * itemSize;
+  return {
+    itemSize,
+    listHeight
+  };
+}
+
+function ListBox(_ref2) {
   let {
     model,
     selections,
     direction,
     height,
     width,
-    listLayout = 'vertical'
-  } = _ref;
+    listLayout = 'vertical',
+    rangeSelect = true,
+    checkboxes = false,
+    update = undefined,
+    dense = false
+  } = _ref2;
   const [layout] = useLayout$1(model);
   const [pages, setPages] = useState$1(null);
+  const [isLoadingData, setIsLoadingData] = useState$1(false);
+  const {
+    instantPages = [],
+    interactionEvents
+  } = useSelectionsInteractions({
+    layout,
+    selections,
+    pages,
+    rangeSelect,
+    checkboxes,
+    doc: document
+  });
   const loaderRef = useRef(null);
   const local = useRef({
     queue: [],
@@ -6773,28 +7157,17 @@ function ListBox(_ref) {
   const listData = useRef({
     pages: []
   });
-  const onClick = useCallback(e => {
-    if (layout && layout.qListObject.qDimensionInfo.qLocked) {
-      return;
-    }
-
-    const elemNumber = +e.currentTarget.getAttribute('data-n');
-
-    if (!Number.isNaN(elemNumber)) {
-      selections.select({
-        method: 'selectListObjectValues',
-        params: ['/qListObjectDef', [elemNumber], !layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne]
-      });
-    }
-  }, [model, layout && !!layout.qListObject.qDimensionInfo.qLocked, layout && !!layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne]);
   const isItemLoaded = useCallback(index => {
     if (!pages || !local.current.validPages) {
       return false;
     }
 
     local.current.checkIdx = index;
-    const page = pages.filter(p => p.qArea.qTop <= index && index < p.qArea.qTop + p.qArea.qHeight)[0];
-    return page && page.qArea.qTop <= index && index < page.qArea.qTop + page.qArea.qHeight;
+
+    const isLoaded = p => p.qArea.qTop <= index && index < p.qArea.qTop + p.qArea.qHeight;
+
+    const page = pages.filter(p => isLoaded(p))[0];
+    return page && isLoaded(page);
   }, [layout, pages]);
   const loadMoreItems = useCallback((startIndex, stopIndex) => {
     local.current.queue.push({
@@ -6808,6 +7181,7 @@ function ListBox(_ref) {
     }
 
     clearTimeout(local.current.timeout);
+    setIsLoadingData(true);
     return new Promise(resolve => {
       local.current.timeout = setTimeout(() => {
         const sorted = local.current.queue.slice(-2).sort((a, b) => a.start - b.start);
@@ -6820,12 +7194,14 @@ function ListBox(_ref) {
           local.current.validPages = true;
           listData.current.pages = p;
           setPages(p);
+          setIsLoadingData(false);
           resolve();
         });
       }, isScrolling ? 500 : 0);
     });
   }, [layout]);
-  useEffect$1(() => {
+
+  const fetchData = () => {
     local.current.queue = [];
     local.current.validPages = false;
 
@@ -6838,7 +7214,23 @@ function ListBox(_ref) {
 
       loaderRef.current._listRef.scrollToItem(0);
     }
+  };
+
+  if (update) {
+    // Hand over the update function for manual refresh from hosting application.
+    update.call(null, fetchData);
+  }
+
+  useEffect$1(() => {
+    fetchData();
   }, [layout]);
+  useEffect$1(() => {
+    if (!instantPages || isLoadingData) {
+      return;
+    }
+
+    setPages(instantPages);
+  }, [instantPages]);
 
   if (!layout) {
     return null;
@@ -6846,8 +7238,16 @@ function ListBox(_ref) {
 
   const isVertical = listLayout !== 'horizontal';
   const count = layout.qListObject.qSize.qcy;
-  const ITEM_SIZE = isVertical ? 33 : 200;
-  const listHeight = height || 8 * ITEM_SIZE;
+  const {
+    itemSize,
+    listHeight
+  } = getSizeInfo({
+    isVertical,
+    checkboxes,
+    dense,
+    height
+  });
+  const isLocked = layout && layout.qListObject.qDimensionInfo.qLocked;
   return /*#__PURE__*/React.createElement(InfiniteLoader, {
     isItemLoaded: isItemLoaded,
     itemCount: count,
@@ -6855,28 +7255,33 @@ function ListBox(_ref) {
     threshold: 0,
     minimumBatchSize: 100,
     ref: loaderRef
-  }, _ref2 => {
+  }, _ref3 => {
     let {
       onItemsRendered,
       ref
-    } = _ref2;
+    } = _ref3;
     local.current.listRef = ref;
     return /*#__PURE__*/React.createElement(FixedSizeList, {
       direction: direction,
+      "data-testid": "fixed-size-list",
       useIsScrolling: true,
       style: {},
       height: listHeight,
       width: width,
       itemCount: count,
       layout: listLayout,
-      itemData: {
-        onClick,
+      itemData: _objectSpread2(_objectSpread2({
+        isLocked,
+        column: !isVertical,
         pages
-      },
-      itemSize: ITEM_SIZE,
+      }, isLocked ? {} : interactionEvents), {}, {
+        checkboxes,
+        dense
+      }),
+      itemSize: itemSize,
       onItemsRendered: onItemsRendered,
       ref: ref
-    }, isVertical ? Row : Column);
+    }, RowColumn);
   });
 }
 
@@ -7451,13 +7856,22 @@ const useStyles$7 = makeStyles(theme => ({
       borderRadius: 0,
       borderColor: "".concat(theme.palette.divider, " transparent")
     }
+  },
+  dense: {
+    fontSize: 12,
+    paddingLeft: theme.spacing(1),
+    '& input': {
+      paddingTop: '5px',
+      paddingBottom: '5px'
+    }
   }
 }));
 const TREE_PATH = '/qListObjectDef';
 function ListBoxSearch(_ref) {
   let {
     model,
-    autoFocus = true
+    autoFocus = true,
+    dense = false
   } = _ref;
   const {
     translator
@@ -7486,8 +7900,10 @@ function ListBoxSearch(_ref) {
   return /*#__PURE__*/React.createElement(OutlinedInput, {
     startAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
       position: "start"
-    }, /*#__PURE__*/React.createElement(Search, null)),
-    className: [classes.root].join(' '),
+    }, /*#__PURE__*/React.createElement(Search, {
+      size: dense ? 'small' : 'normal'
+    })),
+    className: ['search', classes.root, dense && classes.dense].filter(Boolean).join(' '),
     autoFocus: autoFocus,
     margin: "dense",
     fullWidth: true,
@@ -9098,7 +9514,14 @@ function ListBoxInline(_ref2) {
     direction,
     listLayout,
     search = true,
-    properties = {}
+    toolbar = true,
+    rangeSelect = true,
+    checkboxes = false,
+    properties = {},
+    sessionModel = undefined,
+    selectionsApi = undefined,
+    update = undefined,
+    dense = false
   } = options;
 
   const listdef = _objectSpread2({
@@ -9124,9 +9547,10 @@ function ListBoxInline(_ref2) {
       }
     },
     title
-  }, properties);
+  }, properties); // Something something lib dimension
+
 
-  let fieldName; // Something something lib dimension
+  let fieldName;
 
   if (fieldIdentifier.qLibraryId) {
     listdef.qListObjectDef.qLibraryId = fieldIdentifier.qLibraryId;
@@ -9136,8 +9560,19 @@ function ListBoxInline(_ref2) {
     fieldName = fieldIdentifier;
   }
 
+  let [model] = useSessionModel(listdef, sessionModel ? null : app, fieldName, stateName);
+
+  if (sessionModel) {
+    model = sessionModel;
+  }
+
+  let selections = useObjectSelections(selectionsApi ? {} : app, model)[0];
+
+  if (selectionsApi) {
+    selections = selectionsApi;
+  }
+
   const theme = useTheme$1();
-  const [model] = useSessionModel(listdef, app, fieldName, stateName);
   const lock = useCallback(() => {
     model.lock('/qListObjectDef');
   }, [model]);
@@ -9148,7 +9583,6 @@ function ListBoxInline(_ref2) {
     translator
   } = useContext(InstanceContext);
   const moreAlignTo = useRef();
-  const [selections] = useObjectSelections(app, model);
   const [layout] = useLayout$1(model);
   const [showToolbar, setShowToolbar] = useState$1(false);
   useEffect$1(() => {
@@ -9174,11 +9608,11 @@ function ListBoxInline(_ref2) {
   }
 
   const isLocked = layout.qListObject.qDimensionInfo.qLocked === true;
-  const listboxSelectionToolbarItems = createListboxSelectionToolbar({
+  const listboxSelectionToolbarItems = toolbar ? createListboxSelectionToolbar({
     layout,
     model,
     translator
-  });
+  }) : [];
   const counts = layout.qListObject.qDimensionInfo.qStateCounts;
   const hasSelections = counts.qSelected + counts.qSelectedExcluded + counts.qLocked + counts.qLockedExcluded > 0;
   const minHeight = 49 + (search ? 40 : 0) + 49;
@@ -9190,7 +9624,7 @@ function ListBoxInline(_ref2) {
       height: '100%',
       minHeight: "".concat(minHeight, "px")
     }
-  }, /*#__PURE__*/React.createElement(Grid, {
+  }, toolbar && /*#__PURE__*/React.createElement(Grid, {
     item: true,
     container: true,
     style: {
@@ -9238,7 +9672,8 @@ function ListBoxInline(_ref2) {
     item: true
   }, /*#__PURE__*/React.createElement(ListBoxSearch, {
     model: model,
-    autoFocus: false
+    autoFocus: false,
+    dense: dense
   })) : '', /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: true
@@ -9254,8 +9689,12 @@ function ListBoxInline(_ref2) {
       selections: selections,
       direction: direction,
       listLayout: listLayout,
+      rangeSelect: rangeSelect,
+      checkboxes: checkboxes,
       height: height,
-      width: width
+      width: width,
+      update: update,
+      dense: dense
     });
   })));
 }
@@ -9496,10 +9935,10 @@ function populateData(_ref) {
 /**
  * @since 1.1.0
  * @interface ExportDataDef
- * @property {qae.NxDimension[]} dimensions
- * @property {qae.NxMeasure[]} measures
- * @property {qae.NxDimension[]} excludedDimensions
- * @property {qae.NxMeasure[]} excludedMeasures
+ * @property {EngineAPI.INxDimension[]} dimensions
+ * @property {EngineAPI.INxMeasure[]} measures
+ * @property {EngineAPI.INxDimension[]} excludedDimensions
+ * @property {EngineAPI.INxMeasure[]} excludedMeasures
  * @property {number[]} interColumnSortOrder
  */
 
@@ -10943,10 +11382,16 @@ class RenderDebouncer {
 
 }
 
+/**
+ * @interface VizElementAttributes
+ * @extends NamedNodeMap
+ * @property {string} data-render-count
+ */
+
 /**
  * @interface
  * @extends HTMLElement
- * @property {string} attributes.data-render-count
+ * @property {VizElementAttributes} attributes
  */
 
 const VizElement = {
@@ -11390,6 +11835,9 @@ const Cell = forwardRef((_ref6, ref) => {
   const {
     nebbie
   } = halo.public;
+  const {
+    disableCellPadding = false
+  } = halo.context || {};
   const {
     translator,
     language,
@@ -11649,12 +12097,13 @@ const Cell = forwardRef((_ref6, ref) => {
     container: true,
     direction: "column",
     spacing: 0,
-    style: _objectSpread2({
+    style: _objectSpread2(_objectSpread2({
       position: 'relative',
       width: '100%',
-      height: '100%',
+      height: '100%'
+    }, !disableCellPadding ? {
       padding: theme.spacing(1)
-    }, state.longRunningQuery ? {
+    } : {}), state.longRunningQuery ? {
       opacity: '0.3'
     } : {})
   }, cellNode && layout && state.sn && /*#__PURE__*/React.createElement(Header, {
@@ -11996,7 +12445,7 @@ async function init(model, optional, halo, initialError) {
 }
 
 /**
- * @typedef {string | qae.NxDimension | qae.NxMeasure | LibraryField} Field
+ * @typedef {string | EngineAPI.INxDimension | EngineAPI.INxMeasure | LibraryField} Field
  */
 
 /**
@@ -12004,9 +12453,9 @@ async function init(model, optional, halo, initialError) {
  * @description Rendering configuration for creating and rendering a new object
  * @extends BaseConfig
  * @property {string} type
- * @property {string} version
+ * @property {string=} version
  * @property {(Field[])=} fields
- * @property {qae.GenericObjectProperties=} properties
+ * @property {EngineAPI.IGenericObjectProperties=} properties
  */
 
 async function createSessionObject(_ref, halo) {
@@ -13179,7 +13628,7 @@ function useRect() {
 /**
  * Gets the layout of the generic object associated with this visualization.
  * @entry
- * @returns {qae.GenericObjectLayout}
+ * @returns {EngineAPI.IGenericObjectLayout}
  * @example
  * import { useLayout } from '@nebula.js/stardust';
  * // ...
@@ -13199,7 +13648,7 @@ function useLayout() {
  * The returned value from `useStaleLayout()` and `useLayout()` are identical when the object
  * is not in a modal state.
  * @entry
- * @returns {qae.GenericObjectLayout}
+ * @returns {EngineAPI.IGenericObjectLayout}
  * @example
  * import { useStaleLayout } from '@nebula.js/stardust';
  * // ...
@@ -13222,7 +13671,7 @@ function useStaleLayout() {
 /**
  * Gets the layout of the app associated with this visualization.
  * @entry
- * @returns {qae.NxAppLayout} The app layout
+ * @returns {EngineAPI.INxAppLayout} The app layout
  * @example
  * import { useAppLayout } from '@nebula.js/stardust';
  * // ...
@@ -13236,7 +13685,7 @@ function useAppLayout() {
 /**
  * Gets the generic object API of the generic object connected to this visualization.
  * @entry
- * @returns {enigma.GenericObject|undefined}
+ * @returns {EngineAPI.IGenericObject|undefined}
  * @example
  * import { useModel } from '@nebula.js/stardust';
  * // ...
@@ -13255,7 +13704,7 @@ function useModel() {
 /**
  * Gets the doc API.
  * @entry
- * @returns {enigma.Doc|undefined} The doc API.
+ * @returns {EngineAPI.IApp|undefined} The doc API.
  * @example
  * import { useApp } from '@nebula.js/stardust';
  * // ...
@@ -13274,7 +13723,7 @@ function useApp() {
 /**
  * Gets the global API.
  * @entry
- * @returns {enigma.Global|undefined} The global API.
+ * @returns {EngineAPI.IGlobal|undefined} The global API.
  * @example
  * import { useGlobal } from '@nebula.js/stardust';
  *
@@ -13479,9 +13928,11 @@ function useAction(fn, deps) {
  * @example
  * // configure embed to disallow active interactions when rendering
  * embed(app, {
- *   constraints: {
- *     active: true, // do not allow interactions
- *   }
+ *  context: {
+ *    constraints: {
+ *      active: true, // do not allow interactions
+ *    }
+ *  }
  * }).render({ element, id: 'sdfsdf' });
  *
  * @example
@@ -13599,7 +14050,7 @@ function useImperativeHandle(fn, deps) {
 /**
  * Registers a callback that is called when a snapshot is taken.
  * @entry
- * @param {function(qae.GenericObjectLayout): Promise<qae.GenericObjectLayout>} snapshotCallback
+ * @param {function(EngineAPI.IGenericObjectLayout): Promise<EngineAPI.IGenericObjectLayout>} snapshotCallback
  * @example
  * import { onTakeSnapshot } from '@nebula.js/stardust';
  * import { useState } from '@nebula.js/stardust';
@@ -13625,13 +14076,19 @@ function onTakeSnapshot(cb) {
 
   h.fn = cb;
 }
+/**
+ * @interface RenderState
+ * @property {any} pending
+ * @property {any} restore
+ */
+
 /**
  * Gets render state instance.
  *
  * Used to update properties and get a new layout without triggering onInitialRender.
  * @entry
  * @experimental
- * @returns {{ pending, restore }} The render state.
+ * @returns {RenderState} The render state.
  * @example
  * import { useRenderState } from '@nebula.js/stardust';
  *
@@ -14191,7 +14648,7 @@ const noop = () => {};
 
 /**
  * @interface QAEDefinition
- * @property {qae.GenericObjectProperties=} properties
+ * @property {EngineAPI.IGenericObjectProperties=} properties
  * @property {object=} data
  * @property {DataTarget[]} data.targets
  * @property {importProperties=} importProperties
@@ -14201,8 +14658,23 @@ const noop = () => {};
 /**
  * @interface DataTarget
  * @property {string} path
- * @property {FieldTarget<qae.NxDimension>=} dimensions
- * @property {FieldTarget<qae.NxMeasure>=} measures
+ * @property {FieldTarget<EngineAPI.INxDimension>=} dimensions
+ * @property {FieldTarget<EngineAPI.INxMeasure>=} measures
+ */
+
+/**
+ * @callback fieldTargetAddedCallback
+ * @template T
+ * @param {T} field
+ * @param {EngineAPI.IGenericObjectProperties} properties
+ */
+
+/**
+ * @callback fieldTargetRemovedCallback
+ * @template T
+ * @param {T} field
+ * @param {EngineAPI.IGenericObjectProperties} properties
+ * @param {number} index
  */
 
 /**
@@ -14210,8 +14682,8 @@ const noop = () => {};
  * @template T
  * @property {function():number} [min]
  * @property {function():number} [max]
- * @property {function(T, qae.GenericObjectProperties)} [added]
- * @property {function(T, qae.GenericObjectProperties, number)} [removed]
+ * @property {fieldTargetAddedCallback<T>} [added]
+ * @property {fieldTargetRemovedCallback<T>} [removed]
  */
 
 
@@ -15999,7 +16471,7 @@ function clearFromCache(name) {
 /**
  * @interface TypeInfo
  * @property {string} name
- * @property {string} version
+ * @property {string=} version
  * @property {LoadType} load
  * @property {object=} meta
  */
@@ -16159,6 +16631,7 @@ function create(_ref) {
 
 /**
  * @interface Context
+ * @property {boolean=} disableCellPadding
  * @property {boolean=} keyboardNavigation
  * @property {object=} constraints
  * @property {boolean=} constraints.active
@@ -16178,7 +16651,8 @@ const DEFAULT_CONTEXT =
   /** @type {string=} */
   deviceType: 'auto',
   constraints: {},
-  keyboardNavigation: false
+  keyboardNavigation: false,
+  disableCellPadding: false
 };
 /**
  * @interface SnapshotConfiguration
@@ -16280,7 +16754,7 @@ function nuked() {
    * Initiates a new `Embed` instance using the specified enigma `app`.
    * @entry
    * @function embed
-   * @param {enigma.Doc} app
+   * @param {EngineAPI.IApp} app
    * @param {Configuration=} instanceConfig
    * @returns {Embed}
    * @example
@@ -16499,6 +16973,10 @@ function nuked() {
         if (!fieldName) {
           throw new Error("Field identifier must be provided");
         }
+        /**
+         * @typedef {function(function)} ReceiverFunction A callback function which receives another function as input.
+         */
+
         /**
          * @class
          * @alias FieldInstance
@@ -16516,10 +16994,18 @@ function nuked() {
            * @param {string=} options.title Custom title, defaults to fieldname
            * @param {string=} [options.direction=ltr] Direction setting ltr|rtl.
            * @param {string=} [options.listLayout=vertical] Layout direction vertical|horizontal
-           * @param {boolean=} [options.search=true] To show the search bar
+           * @param {boolean=} [options.search=true] Show the search bar
+           * @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 {ReceiverFunction} [options.update] A function which receives an update function which upon call will trigger a data fetch.
            * @since 1.1.0
+           * @instance
            * @example
            * fieldInstance.mount(element);
            */
@@ -16547,6 +17033,7 @@ function nuked() {
           /**
            * Unmounts the field listbox from the DOM.
            * @since 1.1.0
+           * @instance
            * @example
            * listbox.unmount();
            */
@@ -16605,7 +17092,9 @@ function nuked() {
    * // create an alternate config with dark theme
    * // and inherit the config from the previous
    * const d = m.createConfiguration({
-   *  theme: 'dark'
+   *  context: {
+   *    theme: 'dark'
+   *  }
    * });
    *
    * m(app).render({ type: 'mekko' }); // will render the object with default theme
@@ -16619,6 +17108,10 @@ function nuked() {
   embed.config = configuration;
   return embed;
 }
+/**
+ * @typedef {any} ThemeJSON
+ */
+
 /**
  * @interface ThemeInfo
  * @property {string} id Theme identifier