@apexnative/navigation 0.0.0-stage → 1.0.0-alpha.1

package/src/api/app/splash.ts

@@ -0,0 +1,154 @@
+import type { ComponentType } from 'react';
+import { getStartInfo } from '../../engine/native';
+import type { LayoutRoot } from '../../interfaces/Layout';
+import type { RootTransition } from '../layout/Root';
+
+/** The screen of the app's splash in React Native: the first root of a cold start. */
+export const SPLASH_SCREEN = 'ApexNavigation.Splash';
+
+/**
+ * The app's own splash in React Native: an animation, a progress. It shows after the native splash on a cold start
+ * of the app, once per process: not after a reload of the JavaScript, and not when Android makes a new activity while
+ * the JavaScript runs on.
+ */
+export interface SplashConfig {
+  /**
+   * What the splash shows: a component without props, over the whole window. It renders before `willMount` ends, so
+   * it is a React root of its own, outside `appProvider` and `screenProvider`, which may need what `willMount`
+   * prepares. The app's context is there (`useAppContext`), as `willMount` leaves it.
+   */
+  component: ComponentType;
+  /** The least time the splash stays on screen, in ms, from when it shows: the length of its animation. `0` by default. */
+  minDuration?: number;
+  /**
+   * When the splash leaves: `'auto'` (the default) once `willMount` ended and `minDuration` passed; `'manual'` waits
+   * for `useSplash().hide()` too.
+   */
+  hide?: 'auto' | 'manual';
+  /**
+   * How the first root replaces the splash: what `Root(…).transition` takes, `'fade'` by default. A first root with a
+   * transition of its own (`Root(…).transition(…)` other than `'platform'`) keeps it.
+   */
+  transition?: RootTransition;
+}
+
+/** The size of the native splash's logo: points on iOS, dp on Android. */
+export interface SplashLogo {
+  width: number;
+  height: number;
+}
+
+/** What `useSplash` returns. */
+export interface Splash {
+  /**
+   * Lets the splash leave, with `hide: 'manual'`: it still waits for `willMount` and `minDuration`. Does nothing once
+   * it left, or without a splash.
+   */
+  hide(): void;
+  /**
+   * The logo of the native splash, centered in the window at this size, as `apex-navigation splash` made it: a splash
+   * that starts from it continues the native one without a jump. Undefined without a splash made by the CLI.
+   */
+  logo: SplashLogo | undefined;
+}
+
+// hide() came: the splash may leave once the rest is done too.
+let hideCalled = false;
+let hideWaiter: (() => void) | undefined;
+
+function hide() {
+  hideCalled = true;
+  hideWaiter?.();
+}
+
+let splash: Splash | undefined;
+
+/**
+ * The app's splash in React Native: lets it leave (`hide: 'manual'`), and gives the size of the native splash's logo
+ * to start an animation from.
+ *
+ * @example
+ * function Splash() {
+ *   const { hide, logo } = useSplash();
+ *   // … the logo at logo.width × logo.height in the middle of the window, then an animation that calls hide()
+ * }
+ */
+export function useSplash(): Splash {
+  splash ??= { hide, logo: getStartInfo().splashLogo ?? undefined };
+  return splash;
+}
+
+/** Whether the splash shows at this start: the app has one, and the JavaScript runs for the first time in the process. */
+export function showsSplash(config: SplashConfig | undefined): config is SplashConfig {
+  return config !== undefined && getStartInfo().coldStart;
+}
+
+/**
+ * The splash as the first root: at once, as it continues the native splash, over the whole window. Its own screen
+ * options can't hold this, as `component` is any component.
+ */
+export const SPLASH_ROOT: LayoutRoot = {
+  root: {
+    component: {
+      name: SPLASH_SCREEN,
+      options: {
+        layout: { safeAreaEdges: [] },
+        animations: {
+          setRoot: { enter: { enabled: false, waitForRender: true }, exit: { enabled: false } },
+        },
+      },
+    },
+  },
+};
+
+// The splash left, or the start ended without it.
+let done = false;
+// Ends the wait for the splash at once.
+let release: (() => void) | undefined;
+
+/**
+ * Shows the splash and resolves once it may leave as far as it is concerned: it is on screen, `minDuration` passed
+ * and, with `hide: 'manual'`, `hide()` came; or at once on `releaseSplash()`. A splash that failed to show holds
+ * nothing: the native splash stays until the first root.
+ */
+export function showSplash(config: SplashConfig, show: () => Promise<unknown>): Promise<void> {
+  const { minDuration = 0, hide: mode = 'auto' } = config;
+  const hidden =
+    mode === 'manual' && !hideCalled
+      ? new Promise<void>((resolve) => {
+          hideWaiter = resolve;
+        })
+      : undefined;
+  const released = new Promise<void>((resolve) => {
+    release = resolve;
+  });
+  const shown = show().then(
+    () => Promise.all([delay(minDuration), hidden]).then(() => {}),
+    (error) => {
+      // A start that failed replaces the splash before it shows: its own error says enough.
+      if (__DEV__ && !done) console.warn(`[navigation] splash: it didn't show (${String(error)})`);
+    }
+  );
+  return Promise.race([shown, released]);
+}
+
+/**
+ * The splash can't leave by itself any more, and the start goes on at once: its screen went with an Android activity
+ * (the new one doesn't show it, and its setRoot may never end), or its component failed to render and can't call
+ * `hide()`.
+ */
+export function releaseSplash() {
+  release?.();
+}
+
+/** The splash left, or won't show: hide() does nothing from now on. */
+export function splashDone() {
+  done = true;
+  hideCalled = true;
+  hideWaiter = undefined;
+  release = undefined;
+}
+
+function delay(ms: number): Promise<void> | undefined {
+  return ms > 0 ? new Promise((resolve) => setTimeout(resolve, ms)) : undefined;
+}

package/src/api/app/startFailure.tsx

@@ -0,0 +1,39 @@
+import React, { type ComponentType, useContext, useSyncExternalStore } from 'react';
+import type { ErrorFallbackProps } from '../screens/ScreenBoundary';
+import { ScreenContext } from '../screens/registerScreens';
+
+/** The screen a failed start shows as the first root, in place of the splash screen: `errorFallback`. */
+export const START_FAILURE_SCREEN = 'ApexNavigation.StartFailure';
+
+interface StartFailure {
+  error: unknown;
+  /** Runs the start again, from `willMount`. */
+  retry: () => void;
+}
+
+let failure: StartFailure | undefined;
+const listeners = new Set<() => void>();
+
+/** The start failed: the screen shows this error, or the new one of a try that failed again. */
+export function setStartFailure(next: StartFailure) {
+  failure = next;
+  listeners.forEach((listener) => listener());
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/** The component of the screen: the app's `errorFallback` with the error of the start, its `retry` starts again. */
+export function startFailureScreen(Fallback: ComponentType<ErrorFallbackProps>): ComponentType {
+  function StartFailure() {
+    const current = useSyncExternalStore(subscribe, () => failure);
+    const screen = useContext(ScreenContext);
+    if (!current || !screen) return null;
+    return <Fallback error={current.error} screen={screen} retry={current.retry} />;
+  }
+  return StartFailure;
+}

package/src/api/arrangement/arrangementState.ts

@@ -0,0 +1,98 @@
+import ANNTurboModule from '../../adapters/NativeANNTurboModule';
+import { onNativeEvent } from '../../engine/native';
+import { placeOf } from '../../engine/places';
+import type { ArrangementChangedEvent } from '../../interfaces/Events';
+
+/** How a screen of a pair (`defineArrangement`) shows now. */
+export interface ArrangementState {
+  /** Which view of the pair this screen is. */
+  placement: 'primary' | 'secondary';
+  /**
+   * How the pair lies: `sideBySide`, `stacked` (one above the other), `overlay` (one over the other, both full size),
+   * `single` (only one view is in the window).
+   */
+  layout: 'sideBySide' | 'stacked' | 'overlay' | 'single';
+  /** `overlay`: this view lies over the other one. */
+  front: boolean;
+  /** `single`: this screen is out of the window. */
+  hidden: boolean;
+}
+
+// The state of a primary shown alone, where the native side shows no pair.
+const ALONE: ArrangementState = Object.freeze({
+  placement: 'primary',
+  layout: 'single',
+  front: false,
+  hidden: false,
+});
+
+// The states read so far, by screen id, until the screen unmounts.
+const stateById = new Map<string, ArrangementState>();
+const listeners = new Map<string, Set<() => void>>();
+let listening = false;
+
+/** The state of a screen of a pair; null for a screen outside one. */
+export function getArrangementState(screenId: string): ArrangementState | null {
+  const place = placeOf(screenId);
+  if (!place?.arrangement) return null;
+  if (place.arrangement.alone) return ALONE;
+  listen();
+  const known = stateById.get(screenId);
+  if (known) return known;
+  const read = readNative(screenId);
+  if (read) stateById.set(screenId, read);
+  return read ?? null;
+}
+
+/** Calls `onChange` when the screen's state in its pair changes; returns the function that stops it. */
+export function subscribeArrangementState(screenId: string, onChange: () => void): () => void {
+  listen();
+  const own = listeners.get(screenId) ?? new Set<() => void>();
+  own.add(onChange);
+  listeners.set(screenId, own);
+  return () => {
+    own.delete(onChange);
+    if (own.size === 0) listeners.delete(screenId);
+  };
+}
+
+/** The screen unmounted: its state goes. */
+export function forgetArrangementState(screenId: string) {
+  stateById.delete(screenId);
+  listeners.delete(screenId);
+}
+
+function listen() {
+  if (listening) return;
+  listening = true;
+  onNativeEvent<ArrangementChangedEvent>('ArrangementChanged', ({ componentId, ...state }) => {
+    // Only the screens that read their state keep it.
+    if (!stateById.has(componentId) && !listeners.has(componentId)) return;
+    const next = toState(state);
+    if (!next) return;
+    const current = stateById.get(componentId);
+    if (current && sameState(current, next)) return;
+    stateById.set(componentId, next);
+    listeners.get(componentId)?.forEach((onChange) => onChange());
+  });
+}
+
+function readNative(screenId: string): ArrangementState | undefined {
+  // No native module in tests with the mock.
+  const read = ANNTurboModule?.getArrangementState?.(screenId) as Partial<ArrangementState> | undefined;
+  return read ? toState(read) : undefined;
+}
+
+function toState(value: Partial<ArrangementState>): ArrangementState | undefined {
+  if (value.placement !== 'primary' && value.placement !== 'secondary') return undefined;
+  return {
+    placement: value.placement,
+    layout: value.layout ?? 'single',
+    front: value.front ?? false,
+    hidden: value.hidden ?? false,
+  };
+}
+
+function sameState(a: ArrangementState, b: ArrangementState): boolean {
+  return a.placement === b.placement && a.layout === b.layout && a.front === b.front && a.hidden === b.hidden;
+}

package/src/api/commands/commands.ts

@@ -0,0 +1,371 @@
+import { takeButtonHandlers } from '../../engine/buttons';
+import type { NavigationButton } from '../options/buttons';
+import * as engine from '../../engine/commands';
+import { nextId } from '../../engine/ids';
+import { propsOf } from '../../engine/props';
+import { afterLoading, screenOptions } from '../../engine/screens';
+import { withSlots } from '../../engine/slots';
+import type { Layout } from '../../interfaces/Layout';
+import type {
+  AnimationOptions,
+  ModalOptions,
+  Options,
+  OptionsModalPresentationStyle,
+} from '../../interfaces/Options';
+import { getActiveApp } from '../app/activeApp';
+import { whenScreenUnmounts } from '../events/screenLifecycle';
+import { mergeLayoutOptions } from '../layout/element';
+import { stackChild, type StackEntry } from '../layout/Stack';
+import { badgeText } from '../layout/Tabs';
+import { mergeOptions } from '../../engine/mergeOptions';
+import { buildScreenOptions, type ScreenOptionsInput } from '../screens/defineScreen';
+import { coversColumn, placeOf } from '../../engine/places';
+import { command, placeFor } from './errors';
+import type { ColumnConfig, ModalConfig, OverlayConfig, PushConfig } from './presentation';
+import { defined, modalAnimations, pushAnimations } from './transitions';
+
+// The id and testID of the close button of a modal.
+const CLOSE_BUTTON = 'CloseButton';
+
+// The modals shown by `showModal`, for the ids of their first screens.
+let modals = 0;
+
+// The settings of a command with the props of the screen it shows.
+type WithProps<Config> = Config & { props?: object };
+
+// `replace` comes in with the push's animation, not that of `setStackRoot` (Android's fade through).
+const AS_PUSH = { animations: { setStackRoot: { asPush: true } } } as Options;
+
+// An overlay shows the screens below it where its content is not.
+const OVERLAY_OPTIONS: Options = {
+  layout: { backgroundColor: 'transparent', componentBackgroundColor: 'transparent' },
+};
+
+// A command that shows a lazy screen waits for its module: the screen's own options come from it.
+
+export function push(
+  fromId: string,
+  name: string,
+  config: WithProps<PushConfig> = {}
+): Promise<string> {
+  return command('push', () => {
+    placeFor('push', fromId, { stack: true });
+    return afterLoading([name], () => pushNow(fromId, name, config));
+  });
+}
+
+function pushNow(fromId: string, name: string, config: WithProps<PushConfig>): Promise<string> {
+  const { props } = config;
+  const base = getActiveApp()?.presentation?.push;
+  const options = showOptions(name, props, {}, base?.options, config.options, {
+    app: pushAnimations(base?.transition),
+    call: pushAnimations(config.transition),
+  });
+  return withSlots(() => engine.push(fromId, screenLayout(name, props, options)));
+}
+
+/**
+ * A push that waits as the preview of a view of the screen (`usePreview`): a tap on the preview pushes it. The screen
+ * has the given id, so the presses of its menu reach the hook. A preview that is no longer `wanted` when its push is
+ * about to go out (the component unmounted while the screen loaded) isn't sent: its `dismissPreview` came before it.
+ */
+export function pushPreview(
+  fromId: string,
+  name: string,
+  props: object | undefined,
+  preview: object,
+  id: string,
+  wanted: () => boolean
+): Promise<string> {
+  return command('push', () => {
+    placeFor('push', fromId, { stack: true });
+    return afterLoading([name], () => {
+      // Unmounted while the module of the screen loaded: nothing is built for it.
+      if (!wanted()) throw new Error('[navigation] push: the preview went before it was shown');
+      const options = mergeOptions(showOptions(name, props, {}, undefined, undefined), {
+        preview,
+      } as Options);
+      return withSlots(() => engine.push(fromId, screenLayout(name, props, options, id), wanted));
+    });
+  });
+}
+
+export function pop(fromId: string): Promise<string> {
+  return command('pop', () => {
+    // The first screen of a column over the column before it: the native side goes back to that column.
+    if (!coversColumn(fromId)) placeFor('pop', fromId, { below: true });
+    return engine.pop(fromId);
+  });
+}
+
+export function popTo(screenId: string): Promise<string> {
+  return command('popTo', () => {
+    placeFor('popTo', screenId, { stack: true });
+    return engine.popTo(screenId);
+  });
+}
+
+export function popToRoot(fromId: string): Promise<string> {
+  return command('popToRoot', () => {
+    placeFor('popToRoot', fromId, { stack: true });
+    return engine.popToRoot(fromId);
+  });
+}
+
+export function setStack(fromId: string, entries: StackEntry[]): Promise<string> {
+  return command('setStack', () => {
+    placeFor('setStack', fromId, { stack: true });
+    return withSlots(() => engine.setStackRoot(fromId, entries.map(stackChild)));
+  });
+}
+
+/**
+ * The screen alone in the stack of the screen it is made from: the history of the stack goes, so there is no back. It
+ * comes in as a push does; resolves with its id.
+ */
+export function replace(
+  fromId: string,
+  name: string,
+  config: WithProps<PushConfig> = {}
+): Promise<string> {
+  return command('replace', () => {
+    placeFor('replace', fromId, { stack: true });
+    return afterLoading([name], () => {
+      const { props } = config;
+      const base = getActiveApp()?.presentation?.push;
+      const options = showOptions(name, props, AS_PUSH, base?.options, config.options, {
+        app: pushAnimations(base?.transition),
+        call: pushAnimations(config.transition),
+      });
+      const id = nextId('Component');
+      return withSlots(() =>
+        engine.setStackRoot(fromId, [screenLayout(name, props, options, id)])
+      ).then(() => id);
+    });
+  });
+}
+
+export function showInColumn(
+  fromId: string,
+  name: string,
+  config: WithProps<ColumnConfig> = {}
+): Promise<string> {
+  return command('showInColumn', () => {
+    placeFor('showInColumn', fromId);
+    return afterLoading([name], () => {
+      const { props, column = 'secondary' } = config;
+      const options = showOptions(name, props, {}, undefined, config.options);
+      return withSlots(() =>
+        engine.showInColumn(fromId, column, screenLayout(name, props, options))
+      );
+    });
+  });
+}
+
+/** A column of a split view that the app shows and hides. */
+export type SplitColumn = 'primary' | 'supplementary' | 'inspector';
+
+/** Shows or hides a column of the split view the screen is in; resolves once the columns have moved. */
+export function setColumnShown(fromId: string, column: SplitColumn, shown: boolean): Promise<void> {
+  const name = shown ? 'showColumn' : 'hideColumn';
+  return command(name, () => {
+    placeFor(name, fromId);
+    return engine.setColumnShown(fromId, column, shown);
+  });
+}
+
+export function showModal(name: string, config: WithProps<ModalConfig> = {}): Promise<string> {
+  return command('showModal', () => afterLoading([name], () => showModalNow(name, config)));
+}
+
+function showModalNow(name: string, config: WithProps<ModalConfig>): Promise<string> {
+  const { props, ...call } = config;
+  const base = getActiveApp()?.presentation?.modal ?? {};
+  // The screen's options come in layers; the rest of the settings merge, the command's over the app's.
+  const settings = mergeOptions(
+    { ...base, options: undefined, transition: undefined },
+    { ...call, options: undefined, onDismiss: undefined, transition: undefined }
+  );
+  // The first screen gets an id of its own: the close button and `onDismiss` go by it.
+  const screenId = `ModalScreen${++modals}`;
+  let options = showOptions(name, props, {}, base.options, call.options, {
+    app: modalAnimations(base.transition),
+    call: modalAnimations(call.transition),
+  });
+  if (settings.closeButton && settings.stack !== false)
+    options = withCloseButton(options, screenId);
+  if (call.onDismiss) whenScreenUnmounts(screenId, call.onDismiss);
+  const screen = screenLayout(name, props, options, screenId);
+  const presentation = presentationOptions(settings);
+  const layout: Layout =
+    settings.stack === false
+      ? mergeLayoutOptions(screen, presentation)
+      : { stack: { children: [screen], options: presentation } };
+  return withSlots(() => engine.showModal(layout));
+}
+
+export function dismissModal(modalId: string): Promise<string> {
+  return command('dismissModal', () => engine.dismissModal(modalId));
+}
+
+export function dismissAllModals(): Promise<string> {
+  return command('dismissAllModals', () => engine.dismissAllModals());
+}
+
+export function showOverlay(name: string, config: WithProps<OverlayConfig> = {}): Promise<string> {
+  return command('showOverlay', () => afterLoading([name], () => showOverlayNow(name, config)));
+}
+
+function showOverlayNow(name: string, config: WithProps<OverlayConfig>): Promise<string> {
+  const { props, ...call } = config;
+  const base = getActiveApp()?.presentation?.overlay ?? {};
+  const settings = { ...base, ...call };
+  const options = showOptions(name, props, OVERLAY_OPTIONS, base.options, call.options);
+  const overlay = defined({ interceptTouchOutside: settings.blockTouches });
+  const layout = screenLayout(name, props, mergeOptions(options, { overlay }));
+  return withSlots(() => engine.showOverlay(layout));
+}
+
+export function dismissOverlay(overlayId: string): Promise<string> {
+  return command('dismissOverlay', () => engine.dismissOverlay(overlayId));
+}
+
+/**
+ * There is a screen under this one in its stack, or it is the first of a split view column shown over the column
+ * before it.
+ */
+export function canPop(screenId: string): boolean {
+  const place = placeOf(screenId);
+  return (place !== undefined && place.stack !== null && place.index > 0) || coversColumn(screenId);
+}
+
+/** The screen is in a modal or an overlay. */
+export function canDismiss(screenId: string): boolean {
+  const place = placeOf(screenId);
+  return place !== undefined && place.container !== 'root';
+}
+
+/**
+ * What the back button would do on the screen: back to the screen under it in its stack, or else it closes the modal
+ * or the overlay it is in.
+ */
+export function goBack(screenId: string): Promise<string> {
+  if (canPop(screenId)) return pop(screenId);
+  if (canDismiss(screenId)) return dismiss(screenId);
+  return command('goBack', () => {
+    const place = placeFor('goBack', screenId);
+    throw new Error(
+      `[navigation] goBack: ${place?.name ?? screenId} is the first screen of the root, there is nothing to go back to`
+    );
+  });
+}
+
+/** Closes the modal or the overlay the screen is in. */
+export function dismiss(screenId: string): Promise<string> {
+  return command('dismiss', () =>
+    placeFor('dismiss', screenId, { dismissible: true })?.container === 'overlay'
+      ? engine.dismissOverlay(screenId)
+      : engine.dismissModal(screenId)
+  );
+}
+
+export function dismissAllOverlays(): Promise<string> {
+  return command('dismissAllOverlays', () => engine.dismissAllOverlays());
+}
+
+/** Selects a tab of the tabs the screen is in: by its index, or by the id of the tab. */
+export function selectTab(screenId: string, tab: number | string): void {
+  engine.mergeOptions(screenId, {
+    bottomTabs: typeof tab === 'number' ? { currentTabIndex: tab } : { currentTabId: tab },
+  });
+}
+
+/** The badge of the tab the screen is in, or of the tab with the id; `null` and `0` take it away. */
+export function setTabBadge(screenId: string, badge: string | number | null, tab?: string): void {
+  engine.mergeOptions(tab ?? screenId, { bottomTab: { badge: badgeText(badge) } });
+}
+
+/** A chain of the options gets the props of the screen and `{ theme, context }`, as in `defineScreen`. */
+export function setOptions(screenId: string, options: ScreenOptionsInput<object>): void {
+  engine.mergeOptions(
+    screenId,
+    takeButtonHandlers(screenId, buildScreenOptions(options, propsOf(screenId)))
+  );
+}
+
+/**
+ * The options a screen shows with: those of the kind of show, of the app's presentation, the screen's own and those
+ * of this show. The engine merges the screen's own again under these, which changes nothing.
+ */
+function showOptions(
+  name: string,
+  props: object | undefined,
+  base: Options,
+  presentation: ScreenOptionsInput<object> | undefined,
+  show: ScreenOptionsInput<object> | undefined,
+  transitions: { app?: AnimationOptions; call?: AnimationOptions } = {}
+): Options {
+  const screenProps = props ?? {};
+  // A transition is options too: the app's goes under the screen's own options, that of the command over them.
+  return [
+    buildScreenOptions(presentation, screenProps),
+    animationsOf(transitions.app),
+    screenOptions(name, screenProps),
+    animationsOf(transitions.call),
+    buildScreenOptions(show, screenProps),
+  ].reduce(mergeOptions, base);
+}
+
+function animationsOf(animations: AnimationOptions | undefined): Options {
+  return animations ? { animations } : {};
+}
+
+function screenLayout(
+  name: string,
+  props: object | undefined,
+  options: Options,
+  id?: string
+): Layout {
+  return { component: { ...(id && { id }), name, ...(props && { passProps: props }), options } };
+}
+
+// The screens that keep the user on them (`usePreventLeave`), with what a try to leave calls.
+const leaveHolds = new Map<string, () => void>();
+
+/** Keeps the user on the screen: the close button of its modal calls `onAttempt` instead. Returns what lets go. */
+export function holdLeave(screenId: string, onAttempt: () => void): () => void {
+  leaveHolds.set(screenId, onAttempt);
+  return () => {
+    if (leaveHolds.get(screenId) === onAttempt) leaveHolds.delete(screenId);
+  };
+}
+
+/** The options with a close button first at the leading edge, which dismisses the modal of the screen. */
+function withCloseButton(options: Options, screenId: string): Options {
+  const close: NavigationButton = {
+    id: CLOSE_BUTTON,
+    testID: CLOSE_BUTTON,
+    systemItem: 'close',
+    onPress: () => {
+      const held = leaveHolds.get(screenId);
+      if (held) held();
+      else dismissModal(screenId);
+    },
+  };
+  const leftButtons = [close, ...(options.topBar?.leftButtons ?? [])];
+  return mergeOptions(options, { topBar: { leftButtons } });
+}
+
+function presentationOptions(settings: ModalConfig): Options {
+  const style =
+    settings.style ?? (settings.popover ? 'popover' : settings.sheet ? 'pageSheet' : undefined);
+  const modal: ModalOptions = defined({
+    sheet: settings.sheet,
+    contentSize: settings.contentSize,
+    popover: settings.popover,
+  });
+  return {
+    ...(style && { modalPresentationStyle: style as OptionsModalPresentationStyle }),
+    ...(Object.keys(modal).length > 0 && { modal }),
+  };
+}