@nebula.js/stardust 2.3.1 → 2.4.1

package/core/esm/dev.js

@@ -1,6 +1,6 @@
 /*
-* @nebula.js/stardust v2.3.1
-* Copyright (c) 2021 QlikTech International AB
+* @nebula.js/stardust v2.4.1
+* Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
 
@@ -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 = "12a4" ;
 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.4.1" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React.createElement(NebulaApp, {
@@ -6435,6 +6435,256 @@ 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,
+    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 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 || !mouseDown) {
+      return;
+    } // Render pre-selections before they have been selected in Engine.
+
+
+    const newPages = applySelectionsOnPages(pages, preSelected);
+    setInstantPages(newPages);
+  }, [preSelected]);
+  const rangeSelectEvents = rangeSelect ? {
+    onMouseUp,
+    onMouseEnter
+  } : {};
+  return {
+    instantPages,
+    interactionEvents: _objectSpread2({
+      onMouseDown
+    }, rangeSelectEvents)
+  };
+}
+
 const tick = props => _objectSpread2(_objectSpread2({}, props), {}, {
   shapes: [{
     type: 'path',
@@ -6460,7 +6710,8 @@ const useStyles$b = makeStyles(theme => ({
     '& span': {
       whiteSpace: 'nowrap',
       fontSize: '12px',
-      lineHeight: '16px'
+      lineHeight: '16px',
+      userSelect: 'none'
     },
     overflow: 'hidden',
     textOverflow: 'ellipsis'
@@ -6498,7 +6749,9 @@ function Row(_ref) {
   const classArr = [classes.row];
   let label = '';
   const {
-    onClick,
+    onMouseDown,
+    onMouseUp,
+    onMouseEnter,
     pages
   } = data;
   let cell;
@@ -6561,7 +6814,9 @@ function Row(_ref) {
     spacing: 0,
     className: classArr.join(' ').trim(),
     style: style,
-    onClick: onClick,
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp,
+    onMouseEnter: onMouseEnter,
     role: "row",
     tabIndex: 0,
     "data-n": cell && cell.qElemNumber
@@ -6613,7 +6868,8 @@ const useStyles$a = makeStyles(theme => ({
     '& span': {
       whiteSpace: 'nowrap',
       fontSize: '12px',
-      lineHeight: '16px'
+      lineHeight: '16px',
+      userSelect: 'none'
     },
     overflow: 'hidden',
     textOverflow: 'ellipsis'
@@ -6651,7 +6907,9 @@ function Column(_ref) {
   const classArr = [classes.column];
   let label = '';
   const {
-    onClick,
+    onMouseDown,
+    onMouseUp,
+    onMouseEnter,
     pages
   } = data;
   let cell;
@@ -6714,8 +6972,10 @@ function Column(_ref) {
     spacing: 0,
     className: classArr.join(' ').trim(),
     style: style,
-    onClick: onClick,
     alignItems: "center",
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp,
+    onMouseEnter: onMouseEnter,
     role: "row",
     tabIndex: 0,
     "data-n": cell && cell.qElemNumber
@@ -6753,7 +7013,6 @@ function Column(_ref) {
   })));
 }
 
-/* eslint no-underscore-dangle:0 */
 function ListBox(_ref) {
   let {
     model,
@@ -6761,10 +7020,23 @@ function ListBox(_ref) {
     direction,
     height,
     width,
-    listLayout = 'vertical'
+    listLayout = 'vertical',
+    rangeSelect = true,
+    update = undefined
   } = _ref;
   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,
+    doc: document
+  });
   const loaderRef = useRef(null);
   const local = useRef({
     queue: [],
@@ -6773,28 +7045,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 +7069,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 +7082,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 +7102,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;
@@ -6863,16 +7143,16 @@ function ListBox(_ref) {
     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({}, interactionEvents), {}, {
         pages
-      },
+      }),
       itemSize: ITEM_SIZE,
       onItemsRendered: onItemsRendered,
       ref: ref
@@ -9098,7 +9378,12 @@ function ListBoxInline(_ref2) {
     direction,
     listLayout,
     search = true,
-    properties = {}
+    toolbar = true,
+    rangeSelect = true,
+    properties = {},
+    sessionModel = undefined,
+    selectionsApi = undefined,
+    update = undefined
   } = options;
 
   const listdef = _objectSpread2({
@@ -9124,9 +9409,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 +9422,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 +9445,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 +9470,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 +9486,7 @@ function ListBoxInline(_ref2) {
       height: '100%',
       minHeight: "".concat(minHeight, "px")
     }
-  }, /*#__PURE__*/React.createElement(Grid, {
+  }, toolbar && /*#__PURE__*/React.createElement(Grid, {
     item: true,
     container: true,
     style: {
@@ -9254,8 +9550,10 @@ function ListBoxInline(_ref2) {
       selections: selections,
       direction: direction,
       listLayout: listLayout,
+      rangeSelect: rangeSelect,
       height: height,
-      width: width
+      width: width,
+      update: update
     });
   })));
 }
@@ -9496,10 +9794,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 +11241,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 = {
@@ -11996,7 +12300,7 @@ async function init(model, optional, halo, initialError) {
 }
 
 /**
- * @typedef {string | qae.NxDimension | qae.NxMeasure | LibraryField} Field
+ * @typedef {string | EngineAPI.INxDimension | EngineAPI.INxMeasure | LibraryField} Field
  */
 
 /**
@@ -12006,7 +12310,7 @@ async function init(model, optional, halo, initialError) {
  * @property {string} type
  * @property {string} version
  * @property {(Field[])=} fields
- * @property {qae.GenericObjectProperties=} properties
+ * @property {EngineAPI.IGenericObjectProperties=} properties
  */
 
 async function createSessionObject(_ref, halo) {
@@ -13179,7 +13483,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 +13503,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 +13526,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 +13540,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 +13559,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 +13578,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';
  *
@@ -13599,7 +13903,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 +13929,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 +14501,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 +14511,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 +14535,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]
  */
 
 
@@ -16280,7 +16605,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 +16824,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
@@ -16517,8 +16846,12 @@ function nuked() {
            * @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.toolbar=true] To show the toolbar
            * @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
            * @example
            * fieldInstance.mount(element);
@@ -16619,6 +16952,10 @@ function nuked() {
   embed.config = configuration;
   return embed;
 }
+/**
+ * @typedef {any} ThemeJSON
+ */
+
 /**
  * @interface ThemeInfo
  * @property {string} id Theme identifier