@nebula.js/stardust 5.3.0 → 5.4.0

package/dist/stardust.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.
 */
@@ -7349,7 +7349,7 @@
 	}
 
 	/**
-	 * @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
@@ -13544,7 +13544,7 @@
 	  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', ''));
 	});
@@ -13776,7 +13776,7 @@
 	  const appRef = React$1.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) {
@@ -19082,6 +19082,8 @@
 	  whiteSpace: 'nowrap',
 	  textAlign: 'center',
 	  border: 0,
+	  borderTopStyle: 'solid',
+	  borderLeftStyle: 'solid',
 	  '&::before, &::after': {
 	    content: '""',
 	    alignSelf: 'center'
@@ -19092,7 +19094,8 @@
 	}) => _extends$6({}, ownerState.children && ownerState.orientation !== 'vertical' && {
 	  '&::before, &::after': {
 	    width: '100%',
-	    borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
+	    borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
+	    borderTopStyle: 'inherit'
 	  }
 	}), ({
 	  theme,
@@ -19101,7 +19104,8 @@
 	  flexDirection: 'column',
 	  '&::before, &::after': {
 	    height: '100%',
-	    borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`
+	    borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
+	    borderLeftStyle: 'inherit'
 	  }
 	}), ({
 	  ownerState
@@ -27999,9 +28003,6 @@
 	    ref: ref,
 	    open: show,
 	    anchorEl: alignTo.current,
-	    getContentAnchorEl: null,
-	    container: alignTo.current,
-	    disablePortal: true,
 	    hideBackdrop: true,
 	    transitionDuration: 0,
 	    slotProps: {
@@ -28421,7 +28422,7 @@
 	    boxShadow: 'inset 0 0 0 2px rgb(2, 117, 217)'
 	  }
 	}));
-	function ListBoxSearch(_ref2) {
+	function ListBoxSearch(_ref2, ref) {
 	  let {
 	    popoverOpen,
 	    selections,
@@ -28583,7 +28584,7 @@
 	    abortSearch();
 	    focusOnInput();
 	  };
-	  const onKeyDownClearSearch = async e => {
+	  const onKeyDownClearSearch = e => {
 	    const container = e.currentTarget.closest('.listbox-container');
 	    switch (e.key) {
 	      case 'Enter':
@@ -28606,6 +28607,11 @@
 	    e.stopPropagation();
 	    return undefined;
 	  };
+	  reactExports.useImperativeHandle(ref, () => ({
+	    focus() {
+	      focusOnInput();
+	    }
+	  }));
 	  if (!visible || searchEnabled === false) {
 	    return null;
 	  }
@@ -28653,6 +28659,7 @@
 	    }
 	  });
 	}
+	var ListBoxSearch$1 = reactExports.forwardRef(ListBoxSearch);
 
 	/* eslint no-underscore-dangle: 0 */
 	function createAppSelections(_ref) {
@@ -31185,13 +31192,19 @@
 	    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] = reactExports.useState(0);
 	  const theme = useTheme$2();
-	  const searchContainerRef = reactExports.useRef();
+	  const searchInputRef = reactExports.useRef();
 	  const [model] = useSessionModel({
 	    qInfo: {
 	      qType: 'njsListbox'
@@ -31206,12 +31219,7 @@
 	        qHeight: 0
 	      }],
 	      qDef: {
-	        qSortCriterias: [{
-	          qSortByState: 1,
-	          qSortByAscii: 1,
-	          qSortByNumeric: 1,
-	          qSortByLoadOrder: 1
-	        }],
+	        qSortCriterias: sortCriteria,
 	        qFieldDefs: isMasterDim ? undefined : [fieldName]
 	      },
 	      qLibraryId: isMasterDim ? fieldName.qLibraryId : undefined
@@ -31274,8 +31282,7 @@
 	    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$1.createElement(Popover, {
@@ -31349,9 +31356,9 @@
 	  }, /*#__PURE__*/React$1.createElement("div", {
 	    ref: moreAlignTo
 	  }), /*#__PURE__*/React$1.createElement(Grid, {
-	    item: true,
-	    ref: searchContainerRef
-	  }, /*#__PURE__*/React$1.createElement(ListBoxSearch, {
+	    item: true
+	  }, /*#__PURE__*/React$1.createElement(ListBoxSearch$1, {
+	    ref: searchInputRef,
 	    popoverOpen: open,
 	    styles: styles,
 	    visible: true,
@@ -33308,18 +33315,6 @@
 	    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] = reactExports.useState({});
-	    const setRef = reactExports.useCallback(node => {
-	      setInternalRef({
-	        current: node
-	      });
-	    }, [setInternalRef]);
-	    return [ref, setRef];
-	  };
 	  const theme = useTheme$2();
 	  const {
 	    translator,
@@ -33343,8 +33338,8 @@
 	    appLayout: app === null || app === void 0 ? void 0 : app.layout
 	  });
 	  const containerRef = reactExports.useRef();
+	  const searchInputRef = reactExports.useRef();
 	  const [containerRectRef, containerRect] = useRect$1();
-	  const [searchContainer, searchContainerRef] = useRefWithCallback();
 	  const [showToolbar, setShowToolbar] = reactExports.useState(false);
 	  const [showSearch, setShowSearch] = reactExports.useState(false);
 	  const hovering = reactExports.useRef(false);
@@ -33430,16 +33425,6 @@
 	      }
 	    };
 	  }, [toolbar, selections, isPopover]);
-	  reactExports.useEffect(() => {
-	    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,
@@ -33466,11 +33451,10 @@
 	    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';
@@ -33537,9 +33521,9 @@
 	    role: "region",
 	    "aria-label": translator.get('Listbox.ResultFilterLabel')
 	  }, /*#__PURE__*/React$1.createElement(Grid, {
-	    item: true,
-	    ref: searchContainerRef
-	  }, /*#__PURE__*/React$1.createElement(ListBoxSearch, {
+	    item: true
+	  }, /*#__PURE__*/React$1.createElement(ListBoxSearch$1, {
+	    ref: searchInputRef,
 	    selections: selections,
 	    selectionState: selectionState$1,
 	    model: model,
@@ -34165,7 +34149,8 @@
 	    stateName: stateName,
 	    autoFocus: options.autoFocus,
 	    components: options.components,
-	    flags: flags
+	    flags: flags,
+	    sortCriteria: options.sortCriteria
 	  });
 	}
 
@@ -36299,7 +36284,8 @@
 	    nebbie,
 	    focusHandler,
 	    emitter,
-	    onMount
+	    onMount,
+	    navigation
 	  } = _ref5;
 	  try {
 	    const snType = await getType({
@@ -36313,7 +36299,8 @@
 	      selections,
 	      nebbie,
 	      focusHandler,
-	      emitter
+	      emitter,
+	      navigation
 	    });
 	    if (sn) {
 	      dispatch({
@@ -36351,7 +36338,8 @@
 	    initialError,
 	    onMount,
 	    currentId,
-	    emitter
+	    emitter,
+	    navigation
 	  } = _ref6;
 	  const {
 	    app,
@@ -36481,7 +36469,8 @@
 	        nebbie,
 	        focusHandler: focusHandler.current,
 	        emitter,
-	        onMount
+	        onMount,
+	        navigation
 	      });
 	    };
 
@@ -36656,7 +36645,8 @@
 	    initialSnPlugins,
 	    onMount,
 	    emitter,
-	    initialError
+	    initialError,
+	    navigation
 	  } = _ref;
 	  const {
 	    root
@@ -36672,7 +36662,8 @@
 	    initialSnPlugins: initialSnPlugins,
 	    initialError: initialError,
 	    onMount: onMount,
-	    emitter: emitter
+	    emitter: emitter,
+	    navigation: navigation
 	  }), element, currentId);
 	  const unmount = () => {
 	    root.remove(portal);
@@ -37888,7 +37879,6 @@
 	/**
 	 * Gets the embed instance used.
 	 * @entry
-	 * @experimental
 	 * @since 1.7.0
 	 * @returns {Embed} The embed instance used.
 	 * @example
@@ -37929,6 +37919,22 @@
 	  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
@@ -38254,7 +38260,6 @@
 	 *
 	 * 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';
@@ -38291,7 +38296,6 @@
 	/**
 	 * Gets an event emitter instance for the visualization.
 	 * @entry
-	 * @experimental
 	 * @returns {Emitter}
 	 * @example
 	 * // In a Nebula visualization
@@ -38315,7 +38319,6 @@
 	}
 
 	/**
-	 * @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.
@@ -38506,6 +38509,7 @@
 	      deviceType: galaxy.deviceType,
 	      theme: undefined,
 	      translator: galaxy.translator,
+	      navigation: opts.navigation,
 	      // --- dynamic values ---
 	      layout: {},
 	      appLayout: {},
@@ -39036,6 +39040,7 @@
 	  let {
 	    model,
 	    halo,
+	    navigation,
 	    initialError,
 	    onDestroy = async () => {}
 	  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -39277,7 +39282,8 @@
 	          initialSnPlugins,
 	          initialError,
 	          onMount,
-	          emitter
+	          emitter,
+	          navigation
 	        });
 	        return mounted;
 	      },
@@ -39372,11 +39378,12 @@
 	}
 
 	/* 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
 	  });
@@ -39438,7 +39445,8 @@
 	    options,
 	    plugins,
 	    element,
-	    extendProperties
+	    extendProperties,
+	    navigation
 	  } = _ref;
 	  let mergedProps = {};
 	  const children = [];
@@ -39494,7 +39502,7 @@
 	    options,
 	    plugins,
 	    element
-	  }, halo, error, onDestroy);
+	  }, halo, navigation, error, onDestroy);
 	}
 
 	/**
@@ -39608,7 +39616,7 @@
 	  /** @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,
@@ -39622,7 +39630,8 @@
 	      width: "".concat(width, "%"),
 	      height: "".concat(height, "%"),
 	      position: 'absolute'
-	    }
+	    },
+	    key: cell.model.id
 	  }, /*#__PURE__*/React$1.createElement(Cell, {
 	    ref: cell.cellRef,
 	    halo: halo,
@@ -39631,7 +39640,8 @@
 	    initialSnOptions: initialSnOptions,
 	    initialSnPlugins: initialSnPlugins,
 	    initialError: initialError,
-	    onMount: onMount
+	    onMount: onMount,
+	    navigation: navigation
 	  }));
 	}
 	function getBounds(pos, columns, rows) {
@@ -39645,18 +39655,22 @@
 	    height: pos.rowspan / rows * 100
 	  };
 	}
-	function Sheet(_ref) {
+	const Sheet = reactExports.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] = reactExports.useState(inputModel);
 	  const [layout] = useLayout$1(model);
 	  const {
 	    theme: themeName,
@@ -39666,7 +39680,7 @@
 	  const [bgColor, setBgColor] = reactExports.useState(undefined);
 	  const [bgImage, setBgImage] = reactExports.useState(undefined);
 	  const [deepHash, setDeepHash] = reactExports.useState('');
-
+	  navigation === null || navigation === void 0 || (_navigation$setCurren = navigation.setCurrentSheetId) === null || _navigation$setCurren === void 0 || _navigation$setCurren.call(navigation, model.id);
 	  /// For each object
 	  reactExports.useEffect(() => {
 	    if (layout) {
@@ -39677,8 +39691,8 @@
 	      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
@@ -39722,16 +39736,29 @@
 	      fetchObjects();
 	    }
 	  }, [layout]);
-	  const cellRenderers = reactExports.useMemo(() => cells ? cells.map(c => getCellRenderer(c, halo, initialSnOptions, initialSnPlugins, initialError, c.mounted)) : [], [cells]);
+	  reactExports.useEffect(() => {
+	    const onModelClose = () => {
+	      model.removeListener('closed', onModelClose);
+	      unmount();
+	    };
+	    model.on('closed', onModelClose);
+	    return () => model.removeListener('closed', onModelClose);
+	  }, [model]);
+	  const cellRenderers = reactExports.useMemo(() => cells ? cells.map(c => getCellRenderer(c, halo, initialSnOptions, initialSnPlugins, initialError, c.mounted, navigation)) : [], [cells]);
 	  reactExports.useEffect(() => {
 	    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
+	  reactExports.useImperativeHandle(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), "%");
@@ -39756,7 +39783,7 @@
 	      backgroundPosition: bgImage && bgImage.pos
 	    }
 	  }, cellRenderers);
-	}
+	});
 
 	function glue(_ref) {
 	  let {
@@ -39766,26 +39793,29 @@
 	    initialSnOptions,
 	    initialSnPlugins,
 	    onMount,
-	    initialError
+	    initialError,
+	    navigation
 	  } = _ref;
 	  const {
 	    root
 	  } = halo;
 	  const sheetRef = React$1.createRef();
-	  const portal = ReactDOM.createPortal( /*#__PURE__*/React$1.createElement(Sheet, {
+	  let portal;
+	  const unmount = () => {
+	    root.remove(portal);
+	  };
+	  portal = ReactDOM.createPortal( /*#__PURE__*/React$1.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];
 	}
@@ -39795,6 +39825,7 @@
 	  let {
 	    model,
 	    halo,
+	    navigation,
 	    initialError,
 	    onDestroy = async () => {}
 	  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -39855,6 +39886,13 @@
 	     * @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
@@ -39886,7 +39924,8 @@
 	          initialSnOptions,
 	          initialSnPlugins,
 	          initialError,
-	          onMount
+	          onMount,
+	          navigation
 	        });
 	        return mounted;
 	      },
@@ -39919,11 +39958,12 @@
 	}
 
 	/* 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
 	  });
@@ -39939,12 +39979,115 @@
 	  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,
@@ -39958,18 +40101,19 @@
 	  }
 	  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 () {
@@ -42405,6 +42549,7 @@
 	exports.useLayout = useLayout;
 	exports.useMemo = useMemo;
 	exports.useModel = useModel;
+	exports.useNavigation = useNavigation;
 	exports.useOptions = useOptions;
 	exports.usePlugins = usePlugins;
 	exports.usePromise = usePromise;