@amazon-devices/react-navigation__stack 8.0.9000000001 → 8.0.9000000002

package/src/utils/gestureActivationCriteria.tsx

@@ -1,70 +0,0 @@
-import type { LocaleDirection } from '@amazon-devices/react-navigation__native';
-
-import type { GestureDirection, Layout } from '../types';
-import { getInvertedMultiplier } from './getInvertedMultiplier';
-
-/**
- * The distance of touch start from the edge of the screen where the gesture will be recognized
- */
-const GESTURE_RESPONSE_DISTANCE_HORIZONTAL = 50;
-const GESTURE_RESPONSE_DISTANCE_VERTICAL = 135;
-
-export const gestureActivationCriteria = ({
-  direction,
-  gestureDirection,
-  gestureResponseDistance,
-  layout,
-}: {
-  direction: LocaleDirection;
-  gestureDirection: GestureDirection;
-  gestureResponseDistance?: number;
-  layout: Layout;
-}) => {
-  const enableTrackpadTwoFingerGesture = true;
-
-  const distance =
-    gestureResponseDistance !== undefined
-      ? gestureResponseDistance
-      : gestureDirection === 'vertical' ||
-          gestureDirection === 'vertical-inverted'
-        ? GESTURE_RESPONSE_DISTANCE_VERTICAL
-        : GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
-
-  if (gestureDirection === 'vertical') {
-    return {
-      maxDeltaX: 15,
-      minOffsetY: 5,
-      hitSlop: { bottom: -layout.height + distance },
-      enableTrackpadTwoFingerGesture,
-    };
-  } else if (gestureDirection === 'vertical-inverted') {
-    return {
-      maxDeltaX: 15,
-      minOffsetY: -5,
-      hitSlop: { top: -layout.height + distance },
-      enableTrackpadTwoFingerGesture,
-    };
-  } else {
-    const hitSlop = -layout.width + distance;
-    const invertedMultiplier = getInvertedMultiplier(
-      gestureDirection,
-      direction === 'rtl'
-    );
-
-    if (invertedMultiplier === 1) {
-      return {
-        minOffsetX: 5,
-        maxDeltaY: 20,
-        hitSlop: { right: hitSlop },
-        enableTrackpadTwoFingerGesture,
-      };
-    } else {
-      return {
-        minOffsetX: -5,
-        maxDeltaY: 20,
-        hitSlop: { left: hitSlop },
-        enableTrackpadTwoFingerGesture,
-      };
-    }
-  }
-};

package/src/utils/getDistanceForDirection.tsx

@@ -1,19 +0,0 @@
-import type { GestureDirection, Layout } from '../types';
-import { getInvertedMultiplier } from './getInvertedMultiplier';
-
-export function getDistanceForDirection(
-  layout: Layout,
-  gestureDirection: GestureDirection,
-  isRTL: boolean
-): number {
-  const multiplier = getInvertedMultiplier(gestureDirection, isRTL);
-
-  switch (gestureDirection) {
-    case 'vertical':
-    case 'vertical-inverted':
-      return layout.height * multiplier;
-    case 'horizontal':
-    case 'horizontal-inverted':
-      return layout.width * multiplier;
-  }
-}

package/src/utils/getInvertedMultiplier.tsx

@@ -1,17 +0,0 @@
-import type { GestureDirection } from '../types';
-
-export function getInvertedMultiplier(
-  gestureDirection: GestureDirection,
-  isRTL: boolean
-): 1 | -1 {
-  switch (gestureDirection) {
-    case 'vertical':
-      return 1;
-    case 'vertical-inverted':
-      return -1;
-    case 'horizontal':
-      return isRTL ? -1 : 1;
-    case 'horizontal-inverted':
-      return isRTL ? 1 : -1;
-  }
-}

package/src/utils/getModalRoutesKeys.ts

@@ -1,21 +0,0 @@
-import type { Route } from '@amazon-devices/react-navigation__native';
-
-import type { StackDescriptorMap } from '../types';
-
-export const getModalRouteKeys = (
-  routes: Route<string>[],
-  descriptors: StackDescriptorMap
-) =>
-  routes.reduce<string[]>((acc, route) => {
-    const { presentation } = descriptors[route.key]?.options ?? {};
-
-    if (
-      (acc.length && !presentation) ||
-      presentation === 'modal' ||
-      presentation === 'transparentModal'
-    ) {
-      acc.push(route.key);
-    }
-
-    return acc;
-  }, []);

package/src/utils/getShadowStyle.tsx

@@ -1,37 +0,0 @@
-import Color from 'color';
-import { Platform } from 'react-native';
-
-type ShadowConfig = {
-  offset: {
-    width: number;
-    height: number;
-  };
-  radius: number;
-  opacity: number;
-  color?: string;
-};
-
-export function getShadowStyle({
-  offset,
-  radius,
-  opacity,
-  color = '#000',
-}: ShadowConfig) {
-  const result = Platform.select({
-    web: {
-      boxShadow: `${offset.width}px ${offset.height}px ${radius}px ${Color(
-        color
-      )
-        .alpha(opacity)
-        .toString()}`,
-    },
-    default: {
-      shadowOffset: offset,
-      shadowRadius: radius,
-      shadowColor: color,
-      shadowOpacity: opacity,
-    },
-  });
-
-  return result;
-}

package/src/utils/throttle.tsx

@@ -1,16 +0,0 @@
-export function throttle<T extends (...args: any[]) => void>(
-  func: T,
-  duration: number
-): T {
-  let timeout: ReturnType<typeof setTimeout> | undefined;
-
-  return function (this: unknown, ...args) {
-    if (timeout == null) {
-      func.apply(this, args);
-
-      timeout = setTimeout(() => {
-        timeout = undefined;
-      }, duration);
-    }
-  } as T;
-}

package/src/utils/useCardAnimation.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-import { CardAnimationContext } from './CardAnimationContext';
-
-export function useCardAnimation() {
-  const animation = React.useContext(CardAnimationContext);
-
-  if (animation === undefined) {
-    throw new Error(
-      "Couldn't find values for card animation. Are you inside a screen in Stack?"
-    );
-  }
-
-  return animation;
-}

package/src/utils/useGestureHandlerRef.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-import { GestureHandlerRefContext } from './GestureHandlerRefContext';
-
-export function useGestureHandlerRef() {
-  const ref = React.useContext(GestureHandlerRefContext);
-
-  if (ref === undefined) {
-    throw new Error(
-      "Couldn't find a ref for gesture handler. Are you inside a screen in Stack?"
-    );
-  }
-
-  return ref;
-}

package/src/utils/useKeyboardManager.tsx

@@ -1,103 +0,0 @@
-import * as React from 'react';
-import { type HostInstance, Keyboard, TextInput } from 'react-native';
-
-export function useKeyboardManager(isEnabled: () => boolean) {
-  // Numeric id of the previously focused text input
-  // When a gesture didn't change the tab, we can restore the focused input with this
-  const previouslyFocusedTextInputRef = React.useRef<HostInstance>(undefined);
-  const startTimestampRef = React.useRef<number>(0);
-  const keyboardTimeoutRef = React.useRef<NodeJS.Timeout>(undefined);
-
-  const clearKeyboardTimeout = React.useCallback(() => {
-    if (keyboardTimeoutRef.current !== undefined) {
-      clearTimeout(keyboardTimeoutRef.current);
-      keyboardTimeoutRef.current = undefined;
-    }
-  }, []);
-
-  const onPageChangeStart = React.useCallback(() => {
-    if (!isEnabled()) {
-      return;
-    }
-
-    clearKeyboardTimeout();
-
-    const input = TextInput.State.currentlyFocusedInput();
-
-    // When a page change begins, blur the currently focused input
-    input?.blur();
-
-    // Store the id of this input so we can refocus it if change was cancelled
-    previouslyFocusedTextInputRef.current = input;
-
-    // Store timestamp for touch start
-    startTimestampRef.current = Date.now();
-  }, [clearKeyboardTimeout, isEnabled]);
-
-  const onPageChangeConfirm = React.useCallback(
-    (force: boolean) => {
-      if (!isEnabled()) {
-        return;
-      }
-
-      clearKeyboardTimeout();
-
-      if (force) {
-        // Always dismiss input, even if we don't have a ref to it
-        // We might not have the ref if onPageChangeStart was never called
-        // This can happen if page change was not from a gesture
-        Keyboard.dismiss();
-      } else {
-        const input = previouslyFocusedTextInputRef.current;
-
-        // Dismiss the keyboard only if an input was a focused before
-        // This makes sure we don't dismiss input on going back and focusing an input
-        input?.blur();
-      }
-
-      // Cleanup the ID on successful page change
-      previouslyFocusedTextInputRef.current = undefined;
-    },
-    [clearKeyboardTimeout, isEnabled]
-  );
-
-  const onPageChangeCancel = React.useCallback(() => {
-    if (!isEnabled()) {
-      return;
-    }
-
-    clearKeyboardTimeout();
-
-    // The page didn't change, we should restore the focus of text input
-    const input = previouslyFocusedTextInputRef.current;
-
-    if (input) {
-      // If the interaction was super short we should make sure keyboard won't hide again.
-
-      // Too fast input refocus will result only in keyboard flashing on screen and hiding right away.
-      // During first ~100ms keyboard will be dismissed no matter what,
-      // so we have to make sure it won't interrupt input refocus logic.
-      // That's why when the interaction is shorter than 100ms we add delay so it won't hide once again.
-      // Subtracting timestamps makes us sure the delay is executed only when needed.
-      if (Date.now() - startTimestampRef.current < 100) {
-        keyboardTimeoutRef.current = setTimeout(() => {
-          input?.focus();
-          previouslyFocusedTextInputRef.current = undefined;
-        }, 100);
-      } else {
-        input?.focus();
-        previouslyFocusedTextInputRef.current = undefined;
-      }
-    }
-  }, [clearKeyboardTimeout, isEnabled]);
-
-  React.useEffect(() => {
-    return () => clearKeyboardTimeout();
-  }, [clearKeyboardTimeout]);
-
-  return {
-    onPageChangeStart,
-    onPageChangeConfirm,
-    onPageChangeCancel,
-  };
-}

package/src/views/GestureHandler.android.tsx

@@ -1 +0,0 @@
-export * from './GestureHandlerNative';

package/src/views/GestureHandler.ios.tsx

@@ -1 +0,0 @@
-export * from './GestureHandlerNative';

package/src/views/GestureHandler.kepler.tsx

@@ -1 +0,0 @@
-export * from './GestureHandlerNative';

package/src/views/GestureHandler.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import type { PanGestureHandlerProperties } from '@amazon-devices/react-native-gesture-handler';
-
-const Dummy: any = ({ children }: { children: React.ReactNode }) => (
-  <>{children}</>
-);
-
-export const PanGestureHandler =
-  Dummy as React.ComponentType<PanGestureHandlerProperties>;
-
-export const GestureHandlerRootView = View;
-
-export const GestureState = {
-  UNDETERMINED: 0,
-  FAILED: 1,
-  BEGAN: 2,
-  CANCELLED: 3,
-  ACTIVE: 4,
-  END: 5,
-};
-
-export type { PanGestureHandlerGestureEvent } from '@amazon-devices/react-native-gesture-handler';

package/src/views/GestureHandlerNative.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import {
-  PanGestureHandler as PanGestureHandlerNative,
-  type PanGestureHandlerProperties,
-} from '@amazon-devices/react-native-gesture-handler';
-
-import { GestureHandlerRefContext } from '../utils/GestureHandlerRefContext';
-
-export function PanGestureHandler(props: PanGestureHandlerProperties) {
-  const gestureRef = React.useRef<PanGestureHandlerNative>(null);
-
-  return (
-    <GestureHandlerRefContext.Provider value={gestureRef}>
-      <PanGestureHandlerNative {...props} ref={gestureRef} />
-    </GestureHandlerRefContext.Provider>
-  );
-}
-
-export type { PanGestureHandlerGestureEvent } from '@amazon-devices/react-native-gesture-handler';
-export {
-  GestureHandlerRootView,
-  State as GestureState,
-} from '@amazon-devices/react-native-gesture-handler';

package/src/views/Header/Header.tsx

@@ -1,73 +0,0 @@
-import { getHeaderTitle, HeaderShownContext } from '@amazon-devices/react-navigation__elements';
-import { StackActions } from '@amazon-devices/react-navigation__native';
-import * as React from 'react';
-import { useSafeAreaInsets } from '@amazon-devices/react-native-safe-area-context';
-
-import type { StackHeaderProps } from '../../types';
-import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
-import { throttle } from '../../utils/throttle';
-import { HeaderSegment } from './HeaderSegment';
-
-export const Header = React.memo(function Header({
-  back,
-  layout,
-  progress,
-  options,
-  route,
-  navigation,
-  styleInterpolator,
-}: StackHeaderProps) {
-  const insets = useSafeAreaInsets();
-
-  let previousTitle;
-
-  // The label for the left back button shows the title of the previous screen
-  // If a custom label is specified, we use it, otherwise use previous screen's title
-  if (options.headerBackTitle !== undefined) {
-    previousTitle = options.headerBackTitle;
-  } else if (back) {
-    previousTitle = back.title;
-  }
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const goBack = React.useCallback(
-    throttle(() => {
-      if (navigation.isFocused() && navigation.canGoBack()) {
-        navigation.dispatch({
-          ...StackActions.pop(),
-          source: route.key,
-        });
-      }
-    }, 50),
-    [navigation, route.key]
-  );
-
-  const isModal = React.useContext(ModalPresentationContext);
-  const isParentHeaderShown = React.useContext(HeaderShownContext);
-
-  const statusBarHeight =
-    options.headerStatusBarHeight !== undefined
-      ? options.headerStatusBarHeight
-      : isModal || isParentHeaderShown
-        ? 0
-        : insets.top;
-
-  return (
-    <HeaderSegment
-      {...options}
-      title={getHeaderTitle(options, route.name)}
-      progress={progress}
-      layout={layout}
-      modal={isModal}
-      headerBackTitle={
-        options.headerBackTitle !== undefined
-          ? options.headerBackTitle
-          : previousTitle
-      }
-      headerStatusBarHeight={statusBarHeight}
-      onGoBack={back ? goBack : undefined}
-      backHref={back ? back.href : undefined}
-      styleInterpolator={styleInterpolator}
-    />
-  );
-});

package/src/views/Header/HeaderContainer.tsx

@@ -1,191 +0,0 @@
-import { getHeaderTitle, HeaderBackContext } from '@amazon-devices/react-navigation__elements';
-import {
-  NavigationContext,
-  NavigationRouteContext,
-  type ParamListBase,
-  type Route,
-  useLinkBuilder,
-} from '@amazon-devices/react-navigation__native';
-import * as React from 'react';
-import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';
-
-import {
-  forNoAnimation,
-  forSlideLeft,
-  forSlideRight,
-  forSlideUp,
-} from '../../TransitionConfigs/HeaderStyleInterpolators';
-import type {
-  Layout,
-  Scene,
-  StackHeaderMode,
-  StackHeaderProps,
-  StackNavigationProp,
-} from '../../types';
-import { Header } from './Header';
-
-export type Props = {
-  mode: StackHeaderMode;
-  layout: Layout;
-  scenes: (Scene | undefined)[];
-  getPreviousScene: (props: { route: Route<string> }) => Scene | undefined;
-  getFocusedRoute: () => Route<string>;
-  onContentHeightChange?: (props: {
-    route: Route<string>;
-    height: number;
-  }) => void;
-  style?: StyleProp<ViewStyle>;
-};
-
-export function HeaderContainer({
-  mode,
-  scenes,
-  layout,
-  getPreviousScene,
-  getFocusedRoute,
-  onContentHeightChange,
-  style,
-}: Props) {
-  const focusedRoute = getFocusedRoute();
-  const parentHeaderBack = React.useContext(HeaderBackContext);
-  const { buildHref } = useLinkBuilder();
-
-  return (
-    <View pointerEvents="box-none" style={style}>
-      {/* We render header only on two top-most headers as
-         a workaround for https://github.com/react-navigation/react-navigation/issues/12456.
-         If the header is persisted, it might be placed incorrectly when navigating back. */}
-      {scenes.slice(-2).map((scene, i, self) => {
-        if ((mode === 'screen' && i !== self.length - 1) || !scene) {
-          return null;
-        }
-
-        const {
-          header,
-          headerMode,
-          headerShown = true,
-          headerTransparent,
-          headerStyleInterpolator,
-        } = scene.descriptor.options;
-
-        if (headerMode !== mode || !headerShown) {
-          return null;
-        }
-
-        const isFocused = focusedRoute.key === scene.descriptor.route.key;
-        const previousScene = getPreviousScene({
-          route: scene.descriptor.route,
-        });
-
-        let headerBack = parentHeaderBack;
-
-        if (previousScene) {
-          const { options, route } = previousScene.descriptor;
-
-          headerBack = previousScene
-            ? {
-                title: getHeaderTitle(options, route.name),
-                href: buildHref(route.name, route.params),
-              }
-            : parentHeaderBack;
-        }
-
-        // If the screen is next to a headerless screen, we need to make the header appear static
-        // This makes the header look like it's moving with the screen
-        const previousDescriptor = self[i - 1]?.descriptor;
-        const nextDescriptor = self[i + 1]?.descriptor;
-
-        const {
-          headerShown: previousHeaderShown = true,
-          headerMode: previousHeaderMode,
-        } = previousDescriptor?.options || {};
-
-        // If any of the next screens don't have a header or header is part of the screen
-        // Then we need to move this header offscreen so that it doesn't cover it
-        const nextHeaderlessScene = self.slice(i + 1).find((scene) => {
-          const {
-            headerShown: currentHeaderShown = true,
-            headerMode: currentHeaderMode,
-          } = scene?.descriptor.options || {};
-
-          return currentHeaderShown === false || currentHeaderMode === 'screen';
-        });
-
-        const { gestureDirection: nextHeaderlessGestureDirection } =
-          nextHeaderlessScene?.descriptor.options || {};
-
-        const isHeaderStatic =
-          ((previousHeaderShown === false || previousHeaderMode === 'screen') &&
-            // We still need to animate when coming back from next scene
-            // A hacky way to check this is if the next scene exists
-            !nextDescriptor) ||
-          nextHeaderlessScene;
-
-        const props: StackHeaderProps = {
-          layout,
-          back: headerBack,
-          progress: scene.progress,
-          options: scene.descriptor.options,
-          route: scene.descriptor.route,
-          navigation: scene.descriptor
-            .navigation as StackNavigationProp<ParamListBase>,
-          styleInterpolator:
-            mode === 'float'
-              ? isHeaderStatic
-                ? nextHeaderlessGestureDirection === 'vertical' ||
-                  nextHeaderlessGestureDirection === 'vertical-inverted'
-                  ? forSlideUp
-                  : nextHeaderlessGestureDirection === 'horizontal-inverted'
-                    ? forSlideRight
-                    : forSlideLeft
-                : headerStyleInterpolator
-              : forNoAnimation,
-        };
-
-        return (
-          <NavigationContext.Provider
-            key={scene.descriptor.route.key}
-            value={scene.descriptor.navigation}
-          >
-            <NavigationRouteContext.Provider value={scene.descriptor.route}>
-              <View
-                onLayout={
-                  onContentHeightChange
-                    ? (e) => {
-                        const { height } = e.nativeEvent.layout;
-
-                        onContentHeightChange({
-                          route: scene.descriptor.route,
-                          height,
-                        });
-                      }
-                    : undefined
-                }
-                pointerEvents={isFocused ? 'box-none' : 'none'}
-                aria-hidden={!isFocused}
-                style={
-                  // Avoid positioning the focused header absolutely
-                  // Otherwise accessibility tools don't seem to be able to find it
-                  (mode === 'float' && !isFocused) || headerTransparent
-                    ? styles.header
-                    : null
-                }
-              >
-                {header !== undefined ? header(props) : <Header {...props} />}
-              </View>
-            </NavigationRouteContext.Provider>
-          </NavigationContext.Provider>
-        );
-      })}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  header: {
-    position: 'absolute',
-    top: 0,
-    start: 0,
-    end: 0,
-  },
-});