@amazon-devices/react-navigation__native 8.0.9000000001 → 8.0.9000000002

package/src/createMemoryHistory.tsx

@@ -1,229 +0,0 @@
-import type { NavigationState } from '@amazon-devices/react-navigation__core';
-import { nanoid } from 'nanoid/non-secure';
-
-type HistoryRecord = {
-  // Unique identifier for this record to match it with window.history.state
-  id: string;
-  // Navigation state object for the history entry
-  state: NavigationState;
-  // Path of the history entry
-  path: string;
-};
-
-export function createMemoryHistory() {
-  let index = 0;
-  let items: HistoryRecord[] = [];
-
-  // Pending callbacks for `history.go(n)`
-  // We might modify the callback stored if it was interrupted, so we have a ref to identify it
-  const pending: { ref: unknown; cb: (interrupted?: boolean) => void }[] = [];
-
-  const interrupt = () => {
-    // If another history operation was performed we need to interrupt existing ones
-    // This makes sure that calls such as `history.replace` after `history.go` don't happen
-    // Since otherwise it won't be correct if something else has changed
-    pending.forEach((it) => {
-      const cb = it.cb;
-      it.cb = () => cb(true);
-    });
-  };
-
-  const history = {
-    get index(): number {
-      // We store an id in the state instead of an index
-      // Index could get out of sync with in-memory values if page reloads
-      const id = window.history.state?.id;
-
-      if (id) {
-        const index = items.findIndex((item) => item.id === id);
-
-        return index > -1 ? index : 0;
-      }
-
-      return 0;
-    },
-
-    get(index: number) {
-      return items[index];
-    },
-
-    backIndex({ path }: { path: string }) {
-      // We need to find the index from the element before current to get closest path to go back to
-      for (let i = index - 1; i >= 0; i--) {
-        const item = items[i];
-
-        if (item.path === path) {
-          return i;
-        }
-      }
-
-      return -1;
-    },
-
-    push({ path, state }: { path: string; state: NavigationState }) {
-      interrupt();
-
-      const id = nanoid();
-
-      // When a new entry is pushed, all the existing entries after index will be inaccessible
-      // So we remove any existing entries after the current index to clean them up
-      items = items.slice(0, index + 1);
-
-      items.push({ path, state, id });
-      index = items.length - 1;
-
-      // We pass empty string for title because it's ignored in all browsers except safari
-      // We don't store state object in history.state because:
-      // - browsers have limits on how big it can be, and we don't control the size
-      // - while not recommended, there could be non-serializable data in state
-      window.history.pushState({ id }, '', path);
-    },
-
-    replace({ path, state }: { path: string; state: NavigationState }) {
-      interrupt();
-
-      const id = window.history.state?.id ?? nanoid();
-
-      // Need to keep the hash part of the path if there was no previous history entry
-      // or the previous history entry had the same path
-      let pathWithHash = path;
-      const hash = pathWithHash.includes('#') ? '' : location.hash;
-
-      if (!items.length || items.findIndex((item) => item.id === id) < 0) {
-        // There are two scenarios for creating an array with only one history record:
-        // - When loaded id not found in the items array, this function by default will replace
-        //   the first item. We need to keep only the new updated object, otherwise it will break
-        //   the page when navigating forward in history.
-        // - This is the first time any state modifications are done
-        //   So we need to push the entry as there's nothing to replace
-
-        pathWithHash = pathWithHash + hash;
-        items = [{ path: pathWithHash, state, id }];
-        index = 0;
-      } else {
-        if (items[index].path === path) {
-          pathWithHash = pathWithHash + hash;
-        }
-        items[index] = { path, state, id };
-      }
-
-      window.history.replaceState({ id }, '', pathWithHash);
-    },
-
-    // `history.go(n)` is asynchronous, there are couple of things to keep in mind:
-    // - it won't do anything if we can't go `n` steps, the `popstate` event won't fire.
-    // - each `history.go(n)` call will trigger a separate `popstate` event with correct location.
-    // - the `popstate` event fires before the next frame after calling `history.go(n)`.
-    // This method differs from `history.go(n)` in the sense that it'll go back as many steps it can.
-    go(n: number) {
-      interrupt();
-
-      // To guard against unexpected navigation out of the app we will assume that browser history is only as deep as the length of our memory
-      // history. If we don't have an item to navigate to then update our index and navigate as far as we can without taking the user out of the app.
-      const nextIndex = index + n;
-      const lastItemIndex = items.length - 1;
-      if (n < 0 && !items[nextIndex]) {
-        // Attempted to navigate beyond the first index. Negating the current index will align the browser history with the first item.
-        n = -index;
-        index = 0;
-      } else if (n > 0 && nextIndex > lastItemIndex) {
-        // Attempted to navigate past the last index. Calculate how many indices away from the last index and go there.
-        n = lastItemIndex - index;
-        index = lastItemIndex;
-      } else {
-        index = nextIndex;
-      }
-
-      if (n === 0) {
-        return;
-      }
-
-      // When we call `history.go`, `popstate` will fire when there's history to go back to
-      // So we need to somehow handle following cases:
-      // - There's history to go back, `history.go` is called, and `popstate` fires
-      // - `history.go` is called multiple times, we need to resolve on respective `popstate`
-      // - No history to go back, but `history.go` was called, browser has no API to detect it
-      return new Promise<void>((resolve, reject) => {
-        const done = (interrupted?: boolean) => {
-          clearTimeout(timer);
-
-          if (interrupted) {
-            reject(new Error('History was changed during navigation.'));
-            return;
-          }
-
-          // There seems to be a bug in Chrome regarding updating the title
-          // If we set a title just before calling `history.go`, the title gets lost
-          // However the value of `document.title` is still what we set it to
-          // It's just not displayed in the tab bar
-          // To update the tab bar, we need to reset the title to something else first (e.g. '')
-          // And set the title to what it was before so it gets applied
-          // It won't work without setting it to empty string coz otherwise title isn't changing
-          // Which means that the browser won't do anything after setting the title
-          const { title } = window.document;
-
-          window.document.title = '';
-          window.document.title = title;
-
-          resolve();
-        };
-
-        pending.push({ ref: done, cb: done });
-
-        // If navigation didn't happen within 100ms, assume that it won't happen
-        // This may not be accurate, but hopefully it won't take so much time
-        // In Chrome, navigation seems to happen instantly in next microtask
-        // But on Firefox, it seems to take much longer, around 50ms from our testing
-        // We're using a hacky timeout since there doesn't seem to be way to know for sure
-        const timer = setTimeout(() => {
-          const foundIndex = pending.findIndex((it) => it.ref === done);
-
-          if (foundIndex > -1) {
-            pending[foundIndex].cb();
-            pending.splice(foundIndex, 1);
-          }
-
-          index = this.index;
-        }, 100);
-
-        const onPopState = () => {
-          // Fix createMemoryHistory.index variable's value
-          // as it may go out of sync when navigating in the browser.
-          index = this.index;
-
-          const last = pending.pop();
-
-          window.removeEventListener('popstate', onPopState);
-          last?.cb();
-        };
-
-        window.addEventListener('popstate', onPopState);
-        window.history.go(n);
-      });
-    },
-
-    // The `popstate` event is triggered when history changes, except `pushState` and `replaceState`
-    // If we call `history.go(n)` ourselves, we don't want it to trigger the listener
-    // Here we normalize it so that only external changes (e.g. user pressing back/forward) trigger the listener
-    listen(listener: () => void) {
-      const onPopState = () => {
-        // Fix createMemoryHistory.index variable's value
-        // as it may go out of sync when navigating in the browser.
-        index = this.index;
-
-        if (pending.length) {
-          // This was triggered by `history.go(n)`, we shouldn't call the listener
-          return;
-        }
-
-        listener();
-      };
-
-      window.addEventListener('popstate', onPopState);
-
-      return () => window.removeEventListener('popstate', onPopState);
-    },
-  };
-
-  return history;
-}

package/src/createStaticNavigation.tsx

@@ -1,109 +0,0 @@
-import {
-  createComponentForStaticNavigation,
-  createPathConfigForStaticNavigation,
-  type NavigationContainerRef,
-  type ParamListBase,
-  type StaticNavigation,
-} from '@amazon-devices/react-navigation__core';
-import * as React from 'react';
-
-import { NavigationContainer } from './NavigationContainer';
-import type { LinkingOptions } from './types';
-
-type Props = Omit<
-  React.ComponentProps<typeof NavigationContainer>,
-  'linking' | 'children'
-> & {
-  /**
-   * Options for deep linking.
-   */
-  linking?: Omit<LinkingOptions<ParamListBase>, 'config' | 'enabled'> & {
-    /**
-     * Whether deep link handling should be enabled.
-     * Defaults to `true` if any `linking` options are specified, `false` otherwise.
-     *
-     * When 'auto' is specified, all leaf screens will get a autogenerated path.
-     * The generated path will be a kebab-case version of the screen name.
-     * This can be overridden for specific screens by specifying `linking` for the screen.
-     */
-    enabled?: 'auto' | true | false;
-    /**
-     * Additional configuration
-     */
-    config?: Omit<
-      NonNullable<LinkingOptions<ParamListBase>['config']>,
-      'screens'
-    >;
-  };
-};
-
-/**
- * Create a navigation component from a static navigation config.
- * The returned component is a wrapper around `NavigationContainer`.
- *
- * @param tree Static navigation config.
- * @returns Navigation component to use in your app.
- */
-export function createStaticNavigation(tree: StaticNavigation<any, any, any>) {
-  const Component = createComponentForStaticNavigation(tree, 'RootNavigator');
-
-  function Navigation(
-    { linking, ...rest }: Props,
-    ref: React.Ref<NavigationContainerRef<ParamListBase>>
-  ) {
-    const linkingConfig = React.useMemo(() => {
-      const screens = createPathConfigForStaticNavigation(
-        tree,
-        { initialRouteName: linking?.config?.initialRouteName },
-        linking?.enabled === 'auto'
-      );
-
-      if (!screens) return;
-
-      return {
-        path: linking?.config?.path,
-        initialRouteName: linking?.config?.initialRouteName,
-        screens,
-      };
-    }, [
-      linking?.enabled,
-      linking?.config?.path,
-      linking?.config?.initialRouteName,
-    ]);
-
-    const memoizedLinking = React.useMemo(() => {
-      if (!linking) {
-        return undefined;
-      }
-
-      const enabled =
-        typeof linking.enabled === 'boolean'
-          ? linking.enabled
-          : linkingConfig?.screens != null;
-
-      return {
-        ...linking,
-        enabled,
-        config: linkingConfig,
-      };
-    }, [linking, linkingConfig]);
-
-    if (linking?.enabled === true && linkingConfig?.screens == null) {
-      throw new Error(
-        'Linking is enabled but no linking configuration was found for the screens.\n\n' +
-          'To solve this:\n' +
-          "- Specify a 'linking' property for the screens you want to link to.\n" +
-          "- Or set 'linking.enabled' to 'auto' to generate paths automatically.\n\n" +
-          'See usage guide: https://reactnavigation.org/docs/static-configuration#linking'
-      );
-    }
-
-    return (
-      <NavigationContainer {...rest} ref={ref} linking={memoizedLinking}>
-        <Component />
-      </NavigationContainer>
-    );
-  }
-
-  return React.forwardRef(Navigation);
-}

package/src/extractPathFromURL.tsx

@@ -1,29 +0,0 @@
-import escapeStringRegexp from 'escape-string-regexp';
-
-export function extractPathFromURL(prefixes: string[], url: string) {
-  for (const prefix of prefixes) {
-    const protocol = prefix.match(/^[^:]+:/)?.[0] ?? '';
-    const host = prefix
-      .replace(new RegExp(`^${escapeStringRegexp(protocol)}`), '')
-      .replace(/\/+/g, '/') // Replace multiple slash (//) with single ones
-      .replace(/^\//, ''); // Remove extra leading slash
-
-    const prefixRegex = new RegExp(
-      `^${escapeStringRegexp(protocol)}(/)*${host
-        .split('.')
-        .map((it) => (it === '*' ? '[^/]+' : escapeStringRegexp(it)))
-        .join('\\.')}`
-    );
-
-    const [originAndPath, ...searchParams] = url.split('?');
-    const normalizedURL = originAndPath
-      .replace(/\/+/g, '/')
-      .concat(searchParams.length ? `?${searchParams.join('?')}` : '');
-
-    if (prefixRegex.test(normalizedURL)) {
-      return normalizedURL.replace(prefixRegex, '');
-    }
-  }
-
-  return undefined;
-}

package/src/theming/DarkTheme.tsx

@@ -1,15 +0,0 @@
-import type { Theme } from '../types';
-import { fonts } from './fonts';
-
-export const DarkTheme: Theme = {
-  dark: true,
-  colors: {
-    primary: 'rgb(10, 132, 255)',
-    background: 'rgb(1, 1, 1)',
-    card: 'rgb(18, 18, 18)',
-    text: 'rgb(229, 229, 231)',
-    border: 'rgb(39, 39, 41)',
-    notification: 'rgb(255, 69, 58)',
-  },
-  fonts,
-};

package/src/theming/DefaultTheme.tsx

@@ -1,15 +0,0 @@
-import type { Theme } from '../types';
-import { fonts } from './fonts';
-
-export const DefaultTheme: Theme = {
-  dark: false,
-  colors: {
-    primary: 'rgb(0, 122, 255)',
-    background: 'rgb(242, 242, 242)',
-    card: 'rgb(255, 255, 255)',
-    text: 'rgb(28, 28, 30)',
-    border: 'rgb(216, 216, 216)',
-    notification: 'rgb(255, 59, 48)',
-  },
-  fonts,
-};

package/src/theming/fonts.tsx

@@ -1,63 +0,0 @@
-import { Platform } from 'react-native';
-
-import type { Theme } from '../types';
-
-const WEB_FONT_STACK =
-  'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
-
-export const fonts = Platform.select({
-  web: {
-    regular: {
-      fontFamily: WEB_FONT_STACK,
-      fontWeight: '400',
-    },
-    medium: {
-      fontFamily: WEB_FONT_STACK,
-      fontWeight: '500',
-    },
-    bold: {
-      fontFamily: WEB_FONT_STACK,
-      fontWeight: '600',
-    },
-    heavy: {
-      fontFamily: WEB_FONT_STACK,
-      fontWeight: '700',
-    },
-  },
-  ios: {
-    regular: {
-      fontFamily: 'System',
-      fontWeight: '400',
-    },
-    medium: {
-      fontFamily: 'System',
-      fontWeight: '500',
-    },
-    bold: {
-      fontFamily: 'System',
-      fontWeight: '600',
-    },
-    heavy: {
-      fontFamily: 'System',
-      fontWeight: '700',
-    },
-  },
-  default: {
-    regular: {
-      fontFamily: 'sans-serif',
-      fontWeight: 'normal',
-    },
-    medium: {
-      fontFamily: 'sans-serif-medium',
-      fontWeight: 'normal',
-    },
-    bold: {
-      fontFamily: 'sans-serif',
-      fontWeight: '600',
-    },
-    heavy: {
-      fontFamily: 'sans-serif',
-      fontWeight: '700',
-    },
-  },
-} as const satisfies Record<string, Theme['fonts']>);

package/src/types.tsx

@@ -1,191 +0,0 @@
-import type {
-  getActionFromState as getActionFromStateDefault,
-  getPathFromState as getPathFromStateDefault,
-  getStateFromPath as getStateFromPathDefault,
-  PathConfigMap,
-  Route,
-} from '@amazon-devices/react-navigation__core';
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace ReactNavigation {
-    interface Theme extends NativeTheme {}
-  }
-}
-
-type FontStyle = {
-  fontFamily: string;
-  fontWeight:
-    | 'normal'
-    | 'bold'
-    | '100'
-    | '200'
-    | '300'
-    | '400'
-    | '500'
-    | '600'
-    | '700'
-    | '800'
-    | '900';
-};
-
-interface NativeTheme {
-  dark: boolean;
-  colors: {
-    primary: string;
-    background: string;
-    card: string;
-    text: string;
-    border: string;
-    notification: string;
-  };
-  fonts: {
-    regular: FontStyle;
-    medium: FontStyle;
-    bold: FontStyle;
-    heavy: FontStyle;
-  };
-}
-
-export type Theme = NativeTheme;
-
-export type LocaleDirection = 'ltr' | 'rtl';
-
-export type LinkingOptions<ParamList extends {}> = {
-  /**
-   * Whether deep link handling should be enabled.
-   * Defaults to true.
-   */
-  enabled?: boolean;
-  /**
-   * The prefixes are stripped from the URL before parsing them.
-   * Usually they are the `scheme` + `host` (e.g. `myapp://chat?user=jane`)
-   *
-   * This is not supported on Web.
-   *
-   * @example
-   * ```js
-   * {
-   *    prefixes: [
-   *      "myapp://", // App-specific scheme
-   *      "https://example.com", // Prefix for universal links
-   *      "https://*.example.com" // Prefix which matches any subdomain
-   *    ]
-   * }
-   * ```
-   */
-  prefixes: string[];
-  /**
-   * Optional function which takes an incoming URL returns a boolean
-   * indicating whether React Navigation should handle it.
-   *
-   * This can be used to disable deep linking for specific URLs.
-   * e.g. URLs used for authentication, and not for deep linking to screens.
-   *
-   * This is not supported on Web.
-   *
-   * @example
-   * ```js
-   * {
-   *   // Filter out URLs used by expo-auth-session
-   *   filter: (url) => !url.includes('+expo-auth-session')
-   * }
-   * ```
-   */
-  filter?: (url: string) => boolean;
-  /**
-   * Config to fine-tune how to parse the path.
-   *
-   * @example
-   * ```js
-   * {
-   *   Chat: {
-   *     path: 'chat/:author/:id',
-   *     parse: { id: Number }
-   *   }
-   * }
-   * ```
-   */
-  config?: {
-    /**
-     * Path string to match against for the whole navigation tree.
-     * It's not possible to specify params here since this doesn't belong to a screen.
-     * This is useful when the whole app is under a specific path.
-     * e.g. all of the screens are under `/admin` in `https://example.com/admin`
-     */
-    path?: string;
-    /**
-     * Path configuration for child screens.
-     */
-    screens: PathConfigMap<ParamList>;
-    /**
-     * Name of the initial route to use for the root navigator.
-     */
-    initialRouteName?: keyof ParamList;
-  };
-  /**
-   * Custom function to get the initial URL used for linking.
-   * Uses `Linking.getInitialURL()` by default.
-   *
-   * This is not supported on Web.
-   *
-   * @example
-   * ```js
-   * {
-   *    getInitialURL () => Linking.getInitialURL(),
-   * }
-   * ```
-   */
-  getInitialURL?: () =>
-    | string
-    | null
-    | undefined
-    | Promise<string | null | undefined>;
-  /**
-   * Custom function to get subscribe to URL updates.
-   * Uses `Linking.addEventListener('url', callback)` by default.
-   *
-   * This is not supported on Web.
-   *
-   * @example
-   * ```js
-   * {
-   *    subscribe: (listener) => {
-   *      const onReceiveURL = ({ url }) => listener(url);
-   *
-   *      Linking.addEventListener('url', onReceiveURL);
-   *
-   *      return () => Linking.removeEventListener('url', onReceiveURL);
-   *   }
-   * }
-   * ```
-   */
-  subscribe?: (
-    listener: (url: string) => void
-  ) => undefined | void | (() => void);
-  /**
-   * Custom function to parse the URL to a valid navigation state (advanced).
-   */
-  getStateFromPath?: typeof getStateFromPathDefault;
-  /**
-   * Custom function to convert the state object to a valid URL (advanced).
-   * Only applicable on Web.
-   */
-  getPathFromState?: typeof getPathFromStateDefault;
-  /**
-   * Custom function to convert the state object to a valid action (advanced).
-   */
-  getActionFromState?: typeof getActionFromStateDefault;
-};
-
-export type DocumentTitleOptions = {
-  enabled?: boolean;
-  formatter?: (
-    options: Record<string, any> | undefined,
-    route: Route<string> | undefined
-  ) => string;
-};
-
-export type ServerContainerRef = {
-  getCurrentOptions(): Record<string, any> | undefined;
-};

package/src/useBackButton.native.tsx

@@ -1,33 +0,0 @@
-import type {
-  NavigationContainerRef,
-  ParamListBase,
-} from '@amazon-devices/react-navigation__core';
-import * as React from 'react';
-import { BackHandler } from 'react-native';
-
-export function useBackButton(
-  ref: React.RefObject<NavigationContainerRef<ParamListBase> | null>
-) {
-  React.useEffect(() => {
-    const subscription = BackHandler.addEventListener(
-      'hardwareBackPress',
-      () => {
-        const navigation = ref.current;
-
-        if (navigation == null) {
-          return false;
-        }
-
-        if (navigation.canGoBack()) {
-          navigation.goBack();
-
-          return true;
-        }
-
-        return false;
-      }
-    );
-
-    return () => subscription.remove();
-  }, [ref]);
-}

package/src/useBackButton.tsx

@@ -1,11 +0,0 @@
-import type {
-  NavigationContainerRef,
-  ParamListBase,
-} from '@amazon-devices/react-navigation__core';
-
-export function useBackButton(
-  _: React.RefObject<NavigationContainerRef<ParamListBase> | null>
-) {
-  // No-op
-  // BackHandler is not available on web
-}