@nebula.js/stardust 2.3.1 → 2.4.1

package/dist/stardust.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.
 */
 
@@ -3210,8 +3210,8 @@
        * @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]) {
@@ -11023,7 +11023,7 @@
     return [appSelections, navState];
   }
 
-  const NEBULA_VERSION_HASH = "03e4" ;
+  const NEBULA_VERSION_HASH = "12a4" ;
   let counter = 0;
   const NebulaApp = react.exports.forwardRef((_ref, ref) => {
     let {
@@ -11083,7 +11083,7 @@
     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, {
@@ -18337,6 +18337,256 @@
     return InfiniteLoader;
   }(react.exports.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] = react.exports.useState(pages);
+    const [mouseDown, setMouseDown] = react.exports.useState(false);
+    const [selectingValues, setSelectingValues] = react.exports.useState(false);
+    const [selected, setSelected] = react.exports.useState([]);
+    const [isRangeSelection, setIsRangeSelection] = react.exports.useState(false);
+    const [preSelected, setPreSelected] = react.exports.useState([]);
+    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 = react.exports.useCallback(event => {
+      if (selectingValues) {
+        return;
+      }
+
+      setIsRangeSelection(false);
+      setMouseDown(true);
+      const elemNumber = +event.currentTarget.getAttribute('data-n');
+      setPreSelected([elemNumber]);
+    }, [selectingValues]);
+    const onMouseUp = react.exports.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 = react.exports.useCallback(() => {
+      // Ensure we end interactions when mouseup happens outside the Listbox.
+      setMouseDown(false);
+      setSelectingValues(false);
+    }, []);
+    const onMouseEnter = react.exports.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]);
+    react.exports.useEffect(() => {
+      // 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]);
+    react.exports.useEffect(() => {
+      doc.addEventListener('mouseup', onMouseUpDoc);
+      return () => {
+        doc.removeEventListener('mouseup', onMouseUpDoc);
+      };
+    }, []);
+    react.exports.useEffect(() => {
+      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]);
+    react.exports.useEffect(() => {
+      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',
@@ -18362,7 +18612,8 @@
       '& span': {
         whiteSpace: 'nowrap',
         fontSize: '12px',
-        lineHeight: '16px'
+        lineHeight: '16px',
+        userSelect: 'none'
       },
       overflow: 'hidden',
       textOverflow: 'ellipsis'
@@ -18400,7 +18651,9 @@
     const classArr = [classes.row];
     let label = '';
     const {
-      onClick,
+      onMouseDown,
+      onMouseUp,
+      onMouseEnter,
       pages
     } = data;
     let cell;
@@ -18463,7 +18716,9 @@
       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
@@ -18515,7 +18770,8 @@
       '& span': {
         whiteSpace: 'nowrap',
         fontSize: '12px',
-        lineHeight: '16px'
+        lineHeight: '16px',
+        userSelect: 'none'
       },
       overflow: 'hidden',
       textOverflow: 'ellipsis'
@@ -18553,7 +18809,9 @@
     const classArr = [classes.column];
     let label = '';
     const {
-      onClick,
+      onMouseDown,
+      onMouseUp,
+      onMouseEnter,
       pages
     } = data;
     let cell;
@@ -18616,8 +18874,10 @@
       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
@@ -18655,7 +18915,6 @@
     })));
   }
 
-  /* eslint no-underscore-dangle:0 */
   function ListBox(_ref) {
     let {
       model,
@@ -18663,10 +18922,23 @@
       direction,
       height,
       width,
-      listLayout = 'vertical'
+      listLayout = 'vertical',
+      rangeSelect = true,
+      update = undefined
     } = _ref;
     const [layout] = useLayout$1(model);
     const [pages, setPages] = react.exports.useState(null);
+    const [isLoadingData, setIsLoadingData] = react.exports.useState(false);
+    const {
+      instantPages = [],
+      interactionEvents
+    } = useSelectionsInteractions({
+      layout,
+      selections,
+      pages,
+      rangeSelect,
+      doc: document
+    });
     const loaderRef = react.exports.useRef(null);
     const local = react.exports.useRef({
       queue: [],
@@ -18675,28 +18947,17 @@
     const listData = react.exports.useRef({
       pages: []
     });
-    const onClick = react.exports.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 = react.exports.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 = react.exports.useCallback((startIndex, stopIndex) => {
       local.current.queue.push({
@@ -18710,6 +18971,7 @@
       }
 
       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);
@@ -18722,12 +18984,14 @@
             local.current.validPages = true;
             listData.current.pages = p;
             setPages(p);
+            setIsLoadingData(false);
             resolve();
           });
         }, isScrolling ? 500 : 0);
       });
     }, [layout]);
-    react.exports.useEffect(() => {
+
+    const fetchData = () => {
       local.current.queue = [];
       local.current.validPages = false;
 
@@ -18740,7 +19004,23 @@
 
         loaderRef.current._listRef.scrollToItem(0);
       }
+    };
+
+    if (update) {
+      // Hand over the update function for manual refresh from hosting application.
+      update.call(null, fetchData);
+    }
+
+    react.exports.useEffect(() => {
+      fetchData();
     }, [layout]);
+    react.exports.useEffect(() => {
+      if (!instantPages || isLoadingData) {
+        return;
+      }
+
+      setPages(instantPages);
+    }, [instantPages]);
 
     if (!layout) {
       return null;
@@ -18765,16 +19045,16 @@
       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
@@ -21000,7 +21280,12 @@
       direction,
       listLayout,
       search = true,
-      properties = {}
+      toolbar = true,
+      rangeSelect = true,
+      properties = {},
+      sessionModel = undefined,
+      selectionsApi = undefined,
+      update = undefined
     } = options;
 
     const listdef = _objectSpread2({
@@ -21026,9 +21311,10 @@
         }
       },
       title
-    }, properties);
+    }, properties); // Something something lib dimension
+
 
-    let fieldName; // Something something lib dimension
+    let fieldName;
 
     if (fieldIdentifier.qLibraryId) {
       listdef.qListObjectDef.qLibraryId = fieldIdentifier.qLibraryId;
@@ -21038,8 +21324,19 @@
       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$2();
-    const [model] = useSessionModel(listdef, app, fieldName, stateName);
     const lock = react.exports.useCallback(() => {
       model.lock('/qListObjectDef');
     }, [model]);
@@ -21050,7 +21347,6 @@
       translator
     } = react.exports.useContext(InstanceContext);
     const moreAlignTo = react.exports.useRef();
-    const [selections] = useObjectSelections(app, model);
     const [layout] = useLayout$1(model);
     const [showToolbar, setShowToolbar] = react.exports.useState(false);
     react.exports.useEffect(() => {
@@ -21076,11 +21372,11 @@
     }
 
     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;
@@ -21092,7 +21388,7 @@
         height: '100%',
         minHeight: "".concat(minHeight, "px")
       }
-    }, /*#__PURE__*/React.createElement(Grid$1, {
+    }, toolbar && /*#__PURE__*/React.createElement(Grid$1, {
       item: true,
       container: true,
       style: {
@@ -21156,8 +21452,10 @@
         selections: selections,
         direction: direction,
         listLayout: listLayout,
+        rangeSelect: rangeSelect,
         height: height,
-        width: width
+        width: width,
+        update: update
       });
     })));
   }
@@ -21398,10 +21696,10 @@
   /**
    * @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
    */
 
@@ -22845,10 +23143,16 @@
 
   }
 
+  /**
+   * @interface VizElementAttributes
+   * @extends NamedNodeMap
+   * @property {string} data-render-count
+   */
+
   /**
    * @interface
    * @extends HTMLElement
-   * @property {string} attributes.data-render-count
+   * @property {VizElementAttributes} attributes
    */
 
   const VizElement = {
@@ -23898,7 +24202,7 @@
   }
 
   /**
-   * @typedef {string | qae.NxDimension | qae.NxMeasure | LibraryField} Field
+   * @typedef {string | EngineAPI.INxDimension | EngineAPI.INxMeasure | LibraryField} Field
    */
 
   /**
@@ -23908,7 +24212,7 @@
    * @property {string} type
    * @property {string} version
    * @property {(Field[])=} fields
-   * @property {qae.GenericObjectProperties=} properties
+   * @property {EngineAPI.IGenericObjectProperties=} properties
    */
 
   async function createSessionObject(_ref, halo) {
@@ -25081,7 +25385,7 @@
   /**
    * 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';
    * // ...
@@ -25101,7 +25405,7 @@
    * 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';
    * // ...
@@ -25124,7 +25428,7 @@
   /**
    * 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';
    * // ...
@@ -25138,7 +25442,7 @@
   /**
    * 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';
    * // ...
@@ -25157,7 +25461,7 @@
   /**
    * 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';
    * // ...
@@ -25176,7 +25480,7 @@
   /**
    * 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';
    *
@@ -25501,7 +25805,7 @@
   /**
    * 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';
@@ -25527,13 +25831,19 @@
 
     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';
    *
@@ -26093,7 +26403,7 @@
 
   /**
    * @interface QAEDefinition
-   * @property {qae.GenericObjectProperties=} properties
+   * @property {EngineAPI.IGenericObjectProperties=} properties
    * @property {object=} data
    * @property {DataTarget[]} data.targets
    * @property {importProperties=} importProperties
@@ -26103,8 +26413,23 @@
   /**
    * @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
    */
 
   /**
@@ -26112,8 +26437,8 @@
    * @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]
    */
 
 
@@ -28182,7 +28507,7 @@
      * 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
@@ -28401,6 +28726,10 @@
           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
@@ -28419,8 +28748,12 @@
              * @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);
@@ -28521,6 +28854,10 @@
     embed.config = configuration;
     return embed;
   }
+  /**
+   * @typedef {any} ThemeJSON
+   */
+
   /**
    * @interface ThemeInfo
    * @property {string} id Theme identifier