@nebula.js/stardust 5.3.0 → 5.4.0

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v5.3.0
+* @nebula.js/stardust v5.4.0
 * Copyright (c) 2024 QlikTech International AB
 * Released under the MIT license.
 */
@@ -5251,7 +5251,7 @@ function GlobalStyles(props) {
 }
 
 /**
- * @mui/styled-engine v5.16.4
+ * @mui/styled-engine v5.16.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -9081,7 +9081,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "b434";
+const NEBULA_VERSION_HASH = "4310";
 ClassNameGenerator.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -9313,7 +9313,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "5.3.0");
+  element.setAttribute('data-nebulajs-version', "5.4.0");
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -15247,9 +15247,6 @@ const More$1 = React__default.forwardRef((_ref3, ref) => {
     ref: ref,
     open: show,
     anchorEl: alignTo.current,
-    getContentAnchorEl: null,
-    container: alignTo.current,
-    disablePortal: true,
     hideBackdrop: true,
     transitionDuration: 0,
     slotProps: {
@@ -15669,7 +15666,7 @@ const StyledIconButton = styled(IconButton)(() => ({
     boxShadow: 'inset 0 0 0 2px rgb(2, 117, 217)'
   }
 }));
-function ListBoxSearch(_ref2) {
+function ListBoxSearch(_ref2, ref) {
   let {
     popoverOpen,
     selections,
@@ -15831,7 +15828,7 @@ function ListBoxSearch(_ref2) {
     abortSearch();
     focusOnInput();
   };
-  const onKeyDownClearSearch = async e => {
+  const onKeyDownClearSearch = e => {
     const container = e.currentTarget.closest('.listbox-container');
     switch (e.key) {
       case 'Enter':
@@ -15854,6 +15851,11 @@ function ListBoxSearch(_ref2) {
     e.stopPropagation();
     return undefined;
   };
+  useImperativeHandle$1(ref, () => ({
+    focus() {
+      focusOnInput();
+    }
+  }));
   if (!visible || searchEnabled === false) {
     return null;
   }
@@ -15901,6 +15903,7 @@ function ListBoxSearch(_ref2) {
     }
   });
 }
+var ListBoxSearch$1 = forwardRef(ListBoxSearch);
 
 /* eslint no-underscore-dangle: 0 */
 function createAppSelections(_ref) {
@@ -18433,13 +18436,19 @@ function ListBoxPopover(_ref) {
     components,
     checkboxes: checkboxesOption,
     selectDisabled = () => false,
-    flags
+    flags,
+    sortCriteria = [{
+      qSortByState: 1,
+      qSortByAscii: 1,
+      qSortByNumeric: 1,
+      qSortByLoadOrder: 1
+    }]
   } = _ref;
   const isMasterDim = Boolean(fieldName === null || fieldName === void 0 ? void 0 : fieldName.qLibraryId);
   const open = show && Boolean(alignTo.current);
   const [listCount, setListCount] = useState$1(0);
   const theme = useTheme$1();
-  const searchContainerRef = useRef();
+  const searchInputRef = useRef();
   const [model] = useSessionModel({
     qInfo: {
       qType: 'njsListbox'
@@ -18454,12 +18463,7 @@ function ListBoxPopover(_ref) {
         qHeight: 0
       }],
       qDef: {
-        qSortCriterias: [{
-          qSortByState: 1,
-          qSortByAscii: 1,
-          qSortByNumeric: 1,
-          qSortByLoadOrder: 1
-        }],
+        qSortCriterias: sortCriteria,
         qFieldDefs: isMasterDim ? undefined : [fieldName]
       },
       qLibraryId: isMasterDim ? fieldName.qLibraryId : undefined
@@ -18522,8 +18526,7 @@ function ListBoxPopover(_ref) {
     selections
   });
   const onCtrlF = () => {
-    const input = searchContainerRef.current.querySelector('input');
-    input === null || input === void 0 || input.focus();
+    searchInputRef.current.focus();
   };
   const hasSelections$1 = hasSelections(layout);
   return /*#__PURE__*/React__default.createElement(Popover, {
@@ -18597,9 +18600,9 @@ function ListBoxPopover(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: moreAlignTo
   }), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    ref: searchContainerRef
-  }, /*#__PURE__*/React__default.createElement(ListBoxSearch, {
+    item: true
+  }, /*#__PURE__*/React__default.createElement(ListBoxSearch$1, {
+    ref: searchInputRef,
     popoverOpen: open,
     styles: styles,
     visible: true,
@@ -20556,18 +20559,6 @@ function ListBoxInline(_ref3) {
     selectDisabled = () => false,
     flags
   } = options;
-
-  // Hook that will trigger update when used in useEffects.
-  // Modified from: https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
-  const useRefWithCallback = () => {
-    const [ref, setInternalRef] = useState$1({});
-    const setRef = useCallback(node => {
-      setInternalRef({
-        current: node
-      });
-    }, [setInternalRef]);
-    return [ref, setRef];
-  };
   const theme = useTheme$1();
   const {
     translator,
@@ -20591,8 +20582,8 @@ function ListBoxInline(_ref3) {
     appLayout: app === null || app === void 0 ? void 0 : app.layout
   });
   const containerRef = useRef();
+  const searchInputRef = useRef();
   const [containerRectRef, containerRect] = useRect$1();
-  const [searchContainer, searchContainerRef] = useRefWithCallback();
   const [showToolbar, setShowToolbar] = useState$1(false);
   const [showSearch, setShowSearch] = useState$1(false);
   const hovering = useRef(false);
@@ -20678,16 +20669,6 @@ function ListBoxInline(_ref3) {
       }
     };
   }, [toolbar, selections, isPopover]);
-  useEffect$1(() => {
-    if (!searchContainer || !searchContainer.current) {
-      return;
-    }
-    // Focus search field on toggle-show or when focusSearch is true.
-    if (search && focusSearch || search === 'toggle' && showSearch) {
-      const input = searchContainer.current.querySelector('input');
-      input && input.focus();
-    }
-  }, [searchContainer && searchContainer.current, showSearch, search, focusSearch]);
   const {
     wildCardSearch,
     searchEnabled,
@@ -20714,11 +20695,10 @@ function ListBoxInline(_ref3) {
     if (search === 'toggle') {
       handleShowSearch();
     } else {
-      const input = searchContainer.current.querySelector('input');
-      input === null || input === void 0 || input.focus();
+      searchInputRef.current.focus();
     }
   };
-  const shouldAutoFocus = searchVisible && search === 'toggle';
+  const shouldAutoFocus = searchVisible && (search === 'toggle' || focusSearch);
 
   // Add a container padding for grid mode to harmonize with the grid item margins (should sum to 8px).
   const isGridMode = (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.dataLayout) === 'grid';
@@ -20785,9 +20765,9 @@ function ListBoxInline(_ref3) {
     role: "region",
     "aria-label": translator.get('Listbox.ResultFilterLabel')
   }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    ref: searchContainerRef
-  }, /*#__PURE__*/React__default.createElement(ListBoxSearch, {
+    item: true
+  }, /*#__PURE__*/React__default.createElement(ListBoxSearch$1, {
+    ref: searchInputRef,
     selections: selections,
     selectionState: selectionState$1,
     model: model,
@@ -21413,7 +21393,8 @@ function ListBoxPopoverWrapper(_ref) {
     stateName: stateName,
     autoFocus: options.autoFocus,
     components: options.components,
-    flags: flags
+    flags: flags,
+    sortCriteria: options.sortCriteria
   });
 }
 
@@ -23547,7 +23528,8 @@ const loadType = async _ref5 => {
     nebbie,
     focusHandler,
     emitter,
-    onMount
+    onMount,
+    navigation
   } = _ref5;
   try {
     const snType = await getType({
@@ -23561,7 +23543,8 @@ const loadType = async _ref5 => {
       selections,
       nebbie,
       focusHandler,
-      emitter
+      emitter,
+      navigation
     });
     if (sn) {
       dispatch({
@@ -23599,7 +23582,8 @@ const Cell = forwardRef((_ref6, ref) => {
     initialError,
     onMount,
     currentId,
-    emitter
+    emitter,
+    navigation
   } = _ref6;
   const {
     app,
@@ -23729,7 +23713,8 @@ const Cell = forwardRef((_ref6, ref) => {
         nebbie,
         focusHandler: focusHandler.current,
         emitter,
-        onMount
+        onMount,
+        navigation
       });
     };
 
@@ -23904,7 +23889,8 @@ function glue$1(_ref) {
     initialSnPlugins,
     onMount,
     emitter,
-    initialError
+    initialError,
+    navigation
   } = _ref;
   const {
     root
@@ -23920,7 +23906,8 @@ function glue$1(_ref) {
     initialSnPlugins: initialSnPlugins,
     initialError: initialError,
     onMount: onMount,
-    emitter: emitter
+    emitter: emitter,
+    navigation: navigation
   }), element, currentId);
   const unmount = () => {
     root.remove(portal);
@@ -25136,7 +25123,6 @@ function useTheme() {
 /**
  * Gets the embed instance used.
  * @entry
- * @experimental
  * @since 1.7.0
  * @returns {Embed} The embed instance used.
  * @example
@@ -25177,6 +25163,22 @@ function useDeviceType() {
   return useInternalContext('deviceType');
 }
 
+/**
+ * Gets the navigation api to control sheet navigation. When useNavigation is used in Sense, it returns Sense.navigation.
+ * @entry
+ * @experimental
+ * @since 5.4.0
+ * @returns {Navigation} navigation api.
+ * @example
+ * import { useNavigation } from "@nebula.js/stardust";
+ * // ...
+ * const navigation = useNavigation();
+ * const [activeSheetId, setActiveSheetId] = useState(navigation?.getCurrentSheetId() || "");
+ */
+function useNavigation() {
+  return useInternalContext('navigation');
+}
+
 /**
  * Gets the array of plugins provided when rendering the visualization.
  * @entry
@@ -25502,7 +25504,6 @@ function onContextMenu(cb) {
  *
  * Used to update properties and get a new layout without triggering onInitialRender.
  * @entry
- * @experimental
  * @returns {RenderState} The render state.
  * @example
  * import { useRenderState } from '@nebula.js/stardust';
@@ -25539,7 +25540,6 @@ function useRenderState() {
 /**
  * Gets an event emitter instance for the visualization.
  * @entry
- * @experimental
  * @returns {Emitter}
  * @example
  * // In a Nebula visualization
@@ -25563,7 +25563,6 @@ function useEmitter() {
 }
 
 /**
- * @experimental
  * @interface Keyboard
  * @property {boolean} enabled Whether or not Nebula handles keyboard navigation or not.
  * @property {boolean} active Set to true when the chart is activated, ie a user tabs to the chart and presses Enter or Space.
@@ -25754,6 +25753,7 @@ function createWithHooks(generator, opts, galaxy) {
       deviceType: galaxy.deviceType,
       theme: undefined,
       translator: galaxy.translator,
+      navigation: opts.navigation,
       // --- dynamic values ---
       layout: {},
       appLayout: {},
@@ -26284,6 +26284,7 @@ function viz() {
   let {
     model,
     halo,
+    navigation,
     initialError,
     onDestroy = async () => {}
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -26525,7 +26526,8 @@ function viz() {
           initialSnPlugins,
           initialError,
           onMount,
-          emitter
+          emitter,
+          navigation
         });
         return mounted;
       },
@@ -26620,11 +26622,12 @@ function viz() {
 }
 
 /* eslint no-underscore-dangle:0 */
-async function init(model, optional, halo, initialError) {
-  let onDestroy = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : async () => {};
+async function init(model, optional, halo, navigation, initialError) {
+  let onDestroy = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : async () => {};
   const api = viz({
     model,
     halo,
+    navigation,
     initialError,
     onDestroy
   });
@@ -26686,7 +26689,8 @@ async function createSessionObject(_ref, halo, store) {
     options,
     plugins,
     element,
-    extendProperties
+    extendProperties,
+    navigation
   } = _ref;
   let mergedProps = {};
   const children = [];
@@ -26742,7 +26746,7 @@ async function createSessionObject(_ref, halo, store) {
     options,
     plugins,
     element
-  }, halo, error, onDestroy);
+  }, halo, navigation, error, onDestroy);
 }
 
 /**
@@ -26856,7 +26860,7 @@ const SheetElement = {
   /** @type {'njs-sheet'} */
   className: 'njs-sheet'
 };
-function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initialError, onMount) {
+function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initialError, onMount, navigation) {
   const {
     x,
     y,
@@ -26870,7 +26874,8 @@ function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initial
       width: "".concat(width, "%"),
       height: "".concat(height, "%"),
       position: 'absolute'
-    }
+    },
+    key: cell.model.id
   }, /*#__PURE__*/React__default.createElement(Cell, {
     ref: cell.cellRef,
     halo: halo,
@@ -26879,7 +26884,8 @@ function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initial
     initialSnOptions: initialSnOptions,
     initialSnPlugins: initialSnPlugins,
     initialError: initialError,
-    onMount: onMount
+    onMount: onMount,
+    navigation: navigation
   }));
 }
 function getBounds(pos, columns, rows) {
@@ -26893,18 +26899,22 @@ function getBounds(pos, columns, rows) {
     height: pos.rowspan / rows * 100
   };
 }
-function Sheet(_ref) {
+const Sheet = forwardRef((_ref, ref) => {
+  var _navigation$setCurren;
   let {
-    model,
+    model: inputModel,
     halo,
     initialSnOptions,
     initialSnPlugins,
     initialError,
-    onMount
+    onMount,
+    unmount,
+    navigation
   } = _ref;
   const {
     root
   } = halo;
+  const [model, setModel] = useState$1(inputModel);
   const [layout] = useLayout$1(model);
   const {
     theme: themeName,
@@ -26914,7 +26924,7 @@ function Sheet(_ref) {
   const [bgColor, setBgColor] = useState$1(undefined);
   const [bgImage, setBgImage] = useState$1(undefined);
   const [deepHash, setDeepHash] = useState$1('');
-
+  navigation === null || navigation === void 0 || (_navigation$setCurren = navigation.setCurrentSheetId) === null || _navigation$setCurren === void 0 || _navigation$setCurren.call(navigation, model.id);
   /// For each object
   useEffect$1(() => {
     if (layout) {
@@ -26925,8 +26935,8 @@ function Sheet(_ref) {
       setDeepHash(hash);
       const fetchObjects = async () => {
         /*
-          Need to always fetch and evaluate everything as the sheet need to support multiple instances of the same object?
-          No, there is no way to add the same chart twice, so the optimization should be worth it.
+        Need to always fetch and evaluate everything as the sheet need to support multiple instances of the same object?
+        No, there is no way to add the same chart twice, so the optimization should be worth it.
         */
 
         // Clear the cell list
@@ -26970,16 +26980,29 @@ function Sheet(_ref) {
       fetchObjects();
     }
   }, [layout]);
-  const cellRenderers = useMemo$1(() => cells ? cells.map(c => getCellRenderer(c, halo, initialSnOptions, initialSnPlugins, initialError, c.mounted)) : [], [cells]);
+  useEffect$1(() => {
+    const onModelClose = () => {
+      model.removeListener('closed', onModelClose);
+      unmount();
+    };
+    model.on('closed', onModelClose);
+    return () => model.removeListener('closed', onModelClose);
+  }, [model]);
+  const cellRenderers = useMemo$1(() => cells ? cells.map(c => getCellRenderer(c, halo, initialSnOptions, initialSnPlugins, initialError, c.mounted, navigation)) : [], [cells]);
   useEffect$1(() => {
     const bgComp = layout !== null && layout !== void 0 && layout.components ? layout.components.find(comp => comp.key === 'general') : null;
     setBgColor(resolveBgColor(bgComp, halo.public.theme));
     setBgImage(resolveBgImage(bgComp, halo.app));
   }, [layout, halo.public.theme, halo.app, themeName]);
 
+  // Expose sheet ref api
+  useImperativeHandle$1(ref, () => ({
+    setModel
+  }), []);
+
   /* TODO
-    - sheet title + bg + logo etc + as option
-    - sheet exposed classnames for theming
+  - sheet title + bg + logo etc + as option
+  - sheet exposed classnames for theming
   */
 
   const height = !layout || Number.isNaN(layout.height) ? '100%' : "".concat(Number(layout.height), "%");
@@ -27004,7 +27027,7 @@ function Sheet(_ref) {
       backgroundPosition: bgImage && bgImage.pos
     }
   }, cellRenderers);
-}
+});
 
 function glue(_ref) {
   let {
@@ -27014,26 +27037,29 @@ function glue(_ref) {
     initialSnOptions,
     initialSnPlugins,
     onMount,
-    initialError
+    initialError,
+    navigation
   } = _ref;
   const {
     root
   } = halo;
   const sheetRef = React__default.createRef();
-  const portal = ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Sheet, {
+  let portal;
+  const unmount = () => {
+    root.remove(portal);
+  };
+  portal = ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Sheet, {
     ref: sheetRef,
     halo: halo,
     model: model,
     initialSnOptions: initialSnOptions,
     initialSnPlugins: initialSnPlugins,
     initialError: initialError,
-    onMount: onMount
+    onMount: onMount,
+    unmount: unmount,
+    navigation: navigation
   }), element, model.id);
-  const unmount = () => {
-    root.remove(portal);
-    model.removeListener('closed', unmount);
-  };
-  model.on('closed', unmount);
+  navigation.setSheetRef(sheetRef);
   root.add(portal);
   return [unmount, sheetRef];
 }
@@ -27043,6 +27069,7 @@ function sheet() {
   let {
     model,
     halo,
+    navigation,
     initialError,
     onDestroy = async () => {}
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -27103,6 +27130,13 @@ function sheet() {
      * @type {string}
      */
     model,
+    /**
+     * The navigation api to control sheet navigation.
+     * @experimental
+     * @since 5.4.0
+     * @type {Navigation}
+     */
+    navigation,
     /**
      * Destroys the sheet and removes it from the the DOM.
      * @example
@@ -27134,7 +27168,8 @@ function sheet() {
           initialSnOptions,
           initialSnPlugins,
           initialError,
-          onMount
+          onMount,
+          navigation
         });
         return mounted;
       },
@@ -27167,11 +27202,12 @@ function sheet() {
 }
 
 /* eslint no-underscore-dangle:0 */
-async function initSheet(model, optional, halo, initialError) {
-  let onDestroy = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : async () => {};
+async function initSheet(model, optional, halo, navigation, initialError) {
+  let onDestroy = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : async () => {};
   const api = sheet({
     model,
     halo,
+    navigation,
     initialError,
     onDestroy
   });
@@ -27187,12 +27223,115 @@ async function initSheet(model, optional, halo, initialError) {
   return api;
 }
 
+function createNavigationApi(halo, store, model) {
+  var _galaxy$anything;
+  const {
+    galaxy
+  } = halo.public;
+  if ((_galaxy$anything = galaxy.anything) !== null && _galaxy$anything !== void 0 && (_galaxy$anything = _galaxy$anything.sense) !== null && _galaxy$anything !== void 0 && _galaxy$anything.navigation) {
+    var _galaxy$anything2;
+    return (_galaxy$anything2 = galaxy.anything) === null || _galaxy$anything2 === void 0 || (_galaxy$anything2 = _galaxy$anything2.sense) === null || _galaxy$anything2 === void 0 ? void 0 : _galaxy$anything2.navigation;
+  }
+  const State = {
+    model
+  };
+
+  /**
+   * @class Navigation
+   * @description The navigation api instance.
+   * @implements Emitter
+   * @experimental
+   * @since 5.4.0
+   * @example
+   * const navigation = useNavigation();
+   * //...
+   * useEffect(() => {
+   *   const onSheetChanged = () => {
+   *     // do something
+   *   };
+   *   if (navigation?.addListener) {
+   *     navigation.addListener("sheetChanged", onSheetChanged);
+   *   }
+   *   return () => {
+   *     if (navigation?.removeListener) {
+   *       navigation.removeListener("sheetChanged", onSheetChanged);
+   *     }
+   *   };
+   * }, [navigation]);
+   *
+   * const onSheetClick = (sheetId: string) => {
+   *   navigation?.goToSheet(sheetId);
+   * };
+   */
+  const navigationAPI = /** @lends Navigation# */{
+    /**
+     * Navigate to the supplied sheet and emit 'sheetChanged' event if the target sheet Id is valid.
+     * This allows a navigation object to synchronize its current sheet item with the active sheet.
+     * @experimental
+     * @since 5.4.0
+     * @param {string} sheetId Id of the sheet to navigate to
+     */
+    goToSheet: async sheetId => {
+      var _State$sheetRef, _State$sheetRef$setMo;
+      if (!State.sheetRef) {
+        return;
+      }
+      const {
+        modelStore,
+        rpcRequestModelStore
+      } = store;
+      const key = "".concat(sheetId);
+      let rpc = rpcRequestModelStore.get(key);
+      if (!rpc) {
+        rpc = halo.app.getObject(sheetId);
+        rpcRequestModelStore.set(key, rpc);
+      }
+      let newModel;
+      try {
+        newModel = await rpc;
+        if (newModel.genericType !== 'sheet') {
+          return;
+        }
+      } catch (e) {
+        return;
+      }
+      modelStore.set(key, newModel);
+      (_State$sheetRef = State.sheetRef) === null || _State$sheetRef === void 0 || (_State$sheetRef = _State$sheetRef.current) === null || _State$sheetRef === void 0 || (_State$sheetRef$setMo = _State$sheetRef.setModel) === null || _State$sheetRef$setMo === void 0 || _State$sheetRef$setMo.call(_State$sheetRef, newModel);
+      State.model = newModel;
+      navigationAPI.emit('sheetChanged');
+    },
+    /**
+     * @private
+     * Set the sheet ref
+     * @param {object} sheetRef sheet ref object
+     */
+    setSheetRef: sheetRef => {
+      State.sheetRef = sheetRef;
+    },
+    /**
+     * Return the current sheet id
+     * @experimental
+     * @since 5.4.0
+     * @returns {string|false} The current sheet Id. false means there is no current sheet.
+     */
+    getCurrentSheetId: () => {
+      if (State.model) {
+        return State.model.id;
+      }
+      return false;
+    }
+  };
+  eventmixin(navigationAPI);
+  return navigationAPI;
+}
+
 async function getObject(_ref, halo, store) {
   let {
     id,
     options,
     plugins,
-    element
+    element,
+    navigation: inputNavigation
   } = _ref;
   const {
     modelStore,
@@ -27206,18 +27345,19 @@ async function getObject(_ref, halo, store) {
   }
   const model = await rpc;
   modelStore.set(key, model);
+  const navigation = inputNavigation || (model.genericType === 'sheet' ? createNavigationApi(halo, store, model) : undefined);
   if (model.genericType === 'sheet') {
     return initSheet(model, {
       options,
       plugins,
       element
-    }, halo);
+    }, halo, navigation);
   }
   return init(model, {
     options,
     plugins,
     element
-  }, halo);
+  }, halo, navigation);
 }
 
 function flagsFn () {
@@ -29631,5 +29771,5 @@ const __DO_NOT_USE__ = {
   locale
 };
 
-export { mocker as EnigmaMocker, __DO_NOT_USE__, conversion, index as embed, onContextMenu, onTakeSnapshot, useAction, useApp, useAppLayout, useConstraints, useDeviceType, useEffect, useElement, useEmbed, useEmitter, useGlobal, useImperativeHandle, useInteractionState, useKeyboard, useLayout, useMemo, useModel, useOptions, usePlugins, usePromise, useRect, useRenderState, useSelections, useStaleLayout, useState, useTheme, useTranslator };
+export { mocker as EnigmaMocker, __DO_NOT_USE__, conversion, index as embed, onContextMenu, onTakeSnapshot, useAction, useApp, useAppLayout, useConstraints, useDeviceType, useEffect, useElement, useEmbed, useEmitter, useGlobal, useImperativeHandle, useInteractionState, useKeyboard, useLayout, useMemo, useModel, useNavigation, useOptions, usePlugins, usePromise, useRect, useRenderState, useSelections, useStaleLayout, useState, useTheme, useTranslator };
 //# sourceMappingURL=dev.js.map