@utilitywarehouse/hearth-react-native 0.28.6 → 0.29.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.28.6",
+  "version": "0.29.1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -46,6 +46,7 @@
     "react-native-gesture-handler": "2.28.0",
     "react-native-nitro-modules": "0.31.4",
     "react-native-reanimated": "4.1.3",
+    "react-native-safe-area-context": "5.6.1",
     "react-native-svg": "^15.12.1",
     "react-native-unistyles": "3.0.17",
     "react-native-web": "^0.20.0",
@@ -59,8 +60,8 @@
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
-    "@utilitywarehouse/hearth-tokens": "^0.2.4"
+    "@utilitywarehouse/hearth-tokens": "^0.2.4",
+    "@utilitywarehouse/hearth-svg-assets": "^0.5.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",
@@ -69,6 +70,7 @@
     "react-native": ">=0.77",
     "react-native-gesture-handler": ">=2",
     "react-native-reanimated": "3.x || ^4.x",
+    "react-native-safe-area-context": "5.x",
     "react-native-svg": ">=13.4.0",
     "react-native-unistyles": ">=3.0.0",
     "react-native-web": ">=0.19"

package/src/components/Combobox/Combobox.tsx

@@ -1,6 +1,7 @@
 import { CloseSmallIcon, SearchMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { GestureResponderEvent, Pressable, TextInput, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
@@ -9,7 +10,6 @@ import { DetailText } from '../DetailText';
 import { FormField, useFormFieldContext } from '../FormField';
 import { Icon } from '../Icon';
 import { Input } from '../Input';
-import { SafeAreaView } from '../SafeAreaView';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import { ComboboxContext, ComboboxSelection } from './Combobox.context';

package/src/components/Modal/Modal.docs.mdx

@@ -1,8 +1,6 @@
 import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import { BodyText, BottomSheetModal, Box, Button, Center, Heading, Modal } from '../../';
 import StorybookLink from '../../../../../shared/storybook/StorybookLink';
-import modalAndroidVideo from '../../../docs/assets/modal-android.mp4';
-import modaliOSVideo from '../../../docs/assets/modal-ios.mp4';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Modal.stories';
 
@@ -18,6 +16,8 @@ The `Modal` component provides a versatile dialog interface that slides up from
 
 The Modal component is ideal for displaying important information, collecting user input, or presenting choices that require user attention without navigating away from the current screen.
 
+If you need a modal layout inside a React Navigation modal screen, use <StorybookLink to="components-navmodal">`NavModal`</StorybookLink> instead.
+
 - [Playground](#playground)
 - [Usage](#usage)
 - [Props](#props)
@@ -31,7 +31,6 @@ The Modal component is ideal for displaying important information, collecting us
   - [Loading State](#loading-state)
   - [Without Close Button](#without-close-button)
   - [Single Action Modal](#single-action-modal)
-  - [Modal in Navigation Modal](#modal-in-navigation-modal)
 - [Integration Notes](#integration-notes)
 - [External Resources](#external-resources)
 
@@ -108,10 +107,7 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')      | -              |
 | `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline') | -              |
 | `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                  | -              |
-| `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height. Only applies when `inNavModal` is `false`            | `false`        |
-| `inNavModal`                  | `boolean`                                                          | Renders the modal correctly when used inside a navigation modal                                               | `false`        |
-| `background`                  | `'default' \| 'brand'`                                             | Sets the modal background. Only applies when `inNavModal` is `true`                                           | `'default'`    |
-| `scrollable`                  | `boolean`                                                          | Whether the modal's content should be placed in a `ScrollView`. Only applies when `inNavModal` is `true`      | `true`         |
+| `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                       | `false`        |
 
 \* use this to detect if the modal has been opened or closed, index 0 indicates open state and -1 indicates closed state
 
@@ -462,122 +458,9 @@ const AlertModal = () => {
 };
 ```
 
-### Modal In Navigation Modal
-
-When wanting to use the Modal component in a navigation context using [React Navigation](https://reactnavigation.org/docs/modal), you can set `inNavModal` to `true` to make it behave like a standard modal screen.
-
-Within React Navigation, you can set `presentation: 'modal'` in the screen's settings to have the Modal look and behave like a standard modal/bottom sheet, or you can set `presentation: 'fullScreenModal'` to have the Modal fill the entire screen.
-
-When using `inNavModal`, by default the content will be rendered inside a `ScrollView` to ensure it is scrollable, especially on smaller devices or smaller modals. You can disable this by setting `scrollable={false}` if, for example, you need to center your content or add some custom content.
-
-Here's an example of how to implement this with custom close animations for Android:
-
-```tsx
-import { useNavigation } from '@react-navigation/native';
-import { useCallback, useEffect, useRef } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-
-import { BodyText, Heading, InlineLink, Modal } from '@utilitywarehouse/hearth-react-native';
-import type { NavigationAction } from '@react-navigation/native';
-
-export default function ModalScreen({ onClose }: { onClose?: () => void }) {
-  const modalRef = useRef<Modal>(null);
-  const navigation = useNavigation();
-  const isClosingRef = useRef(false);
-
-  const handleClose = useCallback(
-    (action?: NavigationAction) => {
-      if (Platform.OS === 'ios') {
-        if (onClose) {
-          onClose();
-        } else {
-          navigation.goBack();
-        }
-
-        return;
-      }
-
-      if (isClosingRef.current) {
-        return;
-      }
-
-      isClosingRef.current = true;
-      // Trigger our custom animation first
-      modalRef.current?.triggerCloseAnimation?.();
-
-      // Delay the actual navigation to allow our animation to play
-      setTimeout(() => {
-        if (onClose) {
-          onClose();
-        } else if (action) {
-          // Dispatch the original action (e.g. popToTop, replace, reset)
-          // so we don't override the caller's intended navigation behaviour
-          navigation.dispatch(action);
-        } else {
-          navigation.goBack();
-        }
-      }, 100); // Match Modal animation duration
-    },
-    [navigation, onClose]
-  );
-
-  useEffect(() => {
-    if (Platform.OS === 'android') {
-      const unsubscribe = navigation.addListener('beforeRemove', e => {
-        if (!isClosingRef.current) {
-          // Prevent default behavior of the navigation action so we can
-          // play the close animation before letting navigation proceed
-          e.preventDefault();
-          handleClose(e.data.action);
-        }
-      });
-
-      return unsubscribe;
-    }
-  }, [navigation, handleClose]);
-
-  return (
-    <Modal
-      ref={modalRef}
-      inNavModal
-      onPressCloseButton={handleClose}
-      primaryButtonText="Action"
-      onPressPrimaryButton={handleClose}
-      secondaryButtonText="Cancel"
-      onPressSecondaryButton={handleClose}
-    >
-      <View style={styles.container}>
-        <Heading size="xl">This is a modal</Heading>
-        <BodyText>
-          <InlineLink onPress={handleClose} style={styles.link}>
-            Go to home screen
-          </InlineLink>
-        </BodyText>
-      </View>
-    </Modal>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 20,
-  },
-  link: {
-    marginTop: 15,
-    paddingVertical: 15,
-  },
-});
-```
-
-The above example demonstrates how to create a fullscreen modal that integrates with navigation.
-It includes custom close animations for Android to enhance the user experience. See the videos below for platform-specific behavior:
+### Navigation Modals
 
-| ios                                                                            | android                                                                            |
-| ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- |
-| <video src={modaliOSVideo} width={300} height="auto" controls loop autoPlay /> | <video src={modalAndroidVideo} width={300} height="auto" controls loop autoPlay /> |
+For React Navigation modal screens, use <StorybookLink to="components-navmodal">`NavModal`</StorybookLink>. It contains the extracted screen-based modal layout, background variants, scrollable content handling, and the Android `triggerCloseAnimation()` ref used during navigation dismissal.
 
 ## Integration Notes
 

package/src/components/Modal/Modal.props.ts

@@ -1,42 +1,10 @@
-import { ReactNode } from 'react';
-import { ViewProps } from 'react-native';
 import { BottomSheetProps } from '../BottomSheet';
-import { ButtonWithoutChildrenProps } from '../Button/Button.props';
-import { UnstyledIconButtonProps } from '../UnstyledIconButton';
+import { ModalCommonProps } from './Modal.shared.types';
 
-interface ModalPropsBase extends Omit<BottomSheetProps, 'children'> {
-  loading?: boolean;
-  image?: ReactNode;
-  showCloseButton?: boolean;
-  heading?: string;
-  loadingHeading?: string;
-  description?: string;
+interface ModalProps extends Omit<BottomSheetProps, 'children'>, ModalCommonProps {
   fullscreen?: boolean;
-  stickyFooter?: boolean;
-  children?: ViewProps['children'];
-  onPressPrimaryButton?: () => void;
-  primaryButtonText?: string;
-  onPressSecondaryButton?: () => void;
   closeOnPrimaryButtonPress?: boolean;
-  secondaryButtonText?: string;
-  onPressCloseButton?: () => void;
   closeOnSecondaryButtonPress?: boolean;
-  primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
-  secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
-  closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
 }
 
-type ModalProps =
-  | (ModalPropsBase & {
-      inNavModal?: false | undefined;
-      scrollable?: never;
-      background?: never;
-    })
-  | (ModalPropsBase & {
-      inNavModal: true;
-      fullscreen?: never;
-      scrollable?: boolean;
-      background?: 'default' | 'brand';
-    });
-
 export default ModalProps;

package/src/components/Modal/Modal.shared.types.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+import { ButtonWithoutChildrenProps } from '../Button/Button.props';
+import { UnstyledIconButtonProps } from '../UnstyledIconButton';
+
+export interface ModalCommonProps {
+  loading?: boolean;
+  image?: ReactNode;
+  showCloseButton?: boolean;
+  heading?: string;
+  loadingHeading?: string;
+  description?: string;
+  stickyFooter?: boolean;
+  children?: ViewProps['children'];
+  onPressPrimaryButton?: () => void;
+  primaryButtonText?: string;
+  onPressSecondaryButton?: () => void;
+  secondaryButtonText?: string;
+  onPressCloseButton?: () => void;
+  primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
+  secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
+  closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
+}

package/src/components/Modal/Modal.stories.tsx

@@ -66,7 +66,6 @@ const meta = {
     onPressCloseButton: () => null,
     onPressPrimaryButton: () => null,
     onPressSecondaryButton: () => null,
-    background: 'brand',
   },
 } satisfies Meta<typeof Modal>;
 

package/src/components/Modal/Modal.tsx

@@ -6,23 +6,13 @@ import {
 } from '@gorhom/bottom-sheet';
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { AccessibilityInfo, Platform, ScrollView, View, findNodeHandle } from 'react-native';
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withDelay,
-  withTiming,
-} from 'react-native-reanimated';
+import { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
-import { hexWithOpacity } from '../../utils';
 import { BodyText } from '../BodyText';
 import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
 import { Button } from '../Button';
 import { Heading } from '../Heading';
-import { SafeAreaView } from '../SafeAreaView';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import ModalProps from './Modal.props';
@@ -49,74 +39,15 @@ const Modal = ({
   primaryButtonProps,
   secondaryButtonProps,
   closeButtonProps,
-  inNavModal = false,
   stickyFooter = true,
-  background = 'default',
-  scrollable = true,
   ...props
 }: ModalProps) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
   const viewRef = useRef<View>(null);
   const scrollViewRef = useRef<BottomSheetScrollViewMethods>(null);
-  const theme = useTheme();
-  const backgroundOpacity = useSharedValue(0);
-  const pretendContentTranslateY = useSharedValue(20);
-  const isBrandBackground = background === 'brand';
-
-  const triggerCloseAnimation = useCallback(() => {
-    if (Platform.OS === 'android' && inNavModal) {
-      pretendContentTranslateY.value = withTiming(20, {
-        duration: 50,
-        easing: Easing.in(Easing.quad),
-      });
-      backgroundOpacity.value = withTiming(0, {
-        duration: 100,
-        easing: Easing.in(Easing.quad),
-      });
-    }
-  }, [inNavModal, pretendContentTranslateY, backgroundOpacity]);
 
   useImperativeHandle(ref, () => ({
     ...(bottomSheetModalRef.current as BottomSheetModal),
-    triggerCloseAnimation,
-  }));
-
-  // Trigger animations on render for inNavModal Android modal
-  useEffect(() => {
-    if (Platform.OS === 'android' && inNavModal) {
-      backgroundOpacity.value = withDelay(
-        300,
-        withTiming(1, {
-          duration: 200,
-          easing: Easing.out(Easing.quad),
-        })
-      );
-      pretendContentTranslateY.value = withDelay(
-        500,
-        withTiming(0, {
-          duration: 300,
-          easing: Easing.out(Easing.quad),
-        })
-      );
-    }
-  }, [inNavModal, backgroundOpacity, pretendContentTranslateY]);
-
-  const animatedBackgroundStyle = useAnimatedStyle(() => ({
-    backgroundColor: hexWithOpacity(
-      theme.components.overlay.backgroundColor,
-      backgroundOpacity.value * (theme.components.overlay.opacity / 100)
-    ),
-  }));
-
-  const animatedInNavModalStyle = useAnimatedStyle(() => ({
-    backgroundColor: hexWithOpacity(
-      theme.components.overlay.backgroundColor,
-      backgroundOpacity.value * (theme.components.overlay.opacity / 100)
-    ),
-  }));
-
-  const animatedPretendContentStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: pretendContentTranslateY.value }],
   }));
 
   const handleChange = (index: number, position: number, type: SNAP_POINT_TYPE) => {
@@ -174,7 +105,6 @@ const Modal = ({
     noButtons,
     stickyFooter,
     showHandle: props.showHandle,
-    background: isBrandBackground ? 'brand' : 'primary',
   });
 
   const footer = useMemo(
@@ -184,7 +114,6 @@ const Modal = ({
           <Button
             onPress={handlePrimaryButtonPress}
             text={primaryButtonText}
-            inverted={isBrandBackground && inNavModal}
             {...primaryButtonProps}
             variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
             colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
@@ -194,7 +123,6 @@ const Modal = ({
           <Button
             onPress={handleSecondaryButtonPress}
             text={secondaryButtonText}
-            inverted={isBrandBackground && inNavModal}
             {...secondaryButtonProps}
             variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
             colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
@@ -205,8 +133,6 @@ const Modal = ({
     [
       handlePrimaryButtonPress,
       handleSecondaryButtonPress,
-      inNavModal,
-      isBrandBackground,
       onPressPrimaryButton,
       onPressSecondaryButton,
       primaryButtonProps,
@@ -216,8 +142,6 @@ const Modal = ({
     ]
   );
 
-  const InNavModalContainer = scrollable ? ScrollView : View;
-
   const content = (
     <>
       {loading ? (
@@ -228,11 +152,8 @@ const Modal = ({
           screenReaderFocusable
           ref={viewRef}
         >
-          <Spinner
-            size="lg"
-            color={isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined}
-          />
-          <Heading size="lg" textAlign="center" inverted={isBrandBackground && inNavModal}>
+          <Spinner size="lg" />
+          <Heading size="lg" textAlign="center">
             {loadingHeading}
           </Heading>
         </View>
@@ -247,22 +168,17 @@ const Modal = ({
           <View style={styles.header}>
             <View style={styles.headerTextContent}>
               {heading && !image ? (
-                <Heading size="lg" accessible inverted={isBrandBackground && inNavModal}>
+                <Heading size="lg" accessible>
                   {heading}
                 </Heading>
               ) : null}
-              {description && !image ? (
-                <BodyText accessible inverted={isBrandBackground && inNavModal}>
-                  {description}
-                </BodyText>
-              ) : null}
+              {description && !image ? <BodyText accessible>{description}</BodyText> : null}
             </View>
             {showCloseButton ? (
               <UnstyledIconButton
                 icon={CloseMediumIcon}
                 onPress={handleCloseButtonPress}
                 accessibilityLabel="Close modal"
-                inverted={isBrandBackground && inNavModal}
                 {...closeButtonProps}
               />
             ) : null}
@@ -272,45 +188,20 @@ const Modal = ({
               {image}
               <View style={styles.textContent}>
                 {heading ? (
-                  <Heading
-                    size="lg"
-                    textAlign="center"
-                    accessible
-                    inverted={isBrandBackground && inNavModal}
-                  >
+                  <Heading size="lg" textAlign="center" accessible>
                     {heading}
                   </Heading>
                 ) : null}
                 {description ? (
-                  <BodyText
-                    textAlign="center"
-                    accessible
-                    inverted={isBrandBackground && inNavModal}
-                  >
+                  <BodyText textAlign="center" accessible>
                     {description}
                   </BodyText>
                 ) : null}
               </View>
             </View>
           ) : null}
-          {inNavModal && (
-            <InNavModalContainer
-              style={{
-                flex: stickyFooter ? 1 : 0,
-                ...(scrollable ? { marginHorizontal: -1 } : {}),
-              }}
-              {...(scrollable ? { contentContainerStyle: { paddingHorizontal: 1 } } : {})}
-            >
-              {children}
-              {!stickyFooter ? (
-                <View style={styles.inNavModalFooterContainer}>{footer}</View>
-              ) : null}
-            </InNavModalContainer>
-          )}
-          {!inNavModal && children}
-          {((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons
-            ? footer
-            : null}
+          {children}
+          {!stickyFooter && !noButtons ? footer : null}
         </View>
       )}
     </>
@@ -325,27 +216,7 @@ const Modal = ({
     [footer]
   );
 
-  return inNavModal ? (
-    <View
-      style={{
-        flex: 1,
-        backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'primary'],
-      }}
-    >
-      {Platform.OS === 'android' ? (
-        <Animated.View style={[styles.androidContainer, animatedBackgroundStyle]}>
-          <Animated.View style={[styles.pretendContent, animatedPretendContentStyle]} />
-        </Animated.View>
-      ) : null}
-      <Animated.View
-        style={[styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle]}
-      >
-        <SafeAreaView edges={['top', 'bottom']} style={styles.inNavModalContent}>
-          {content}
-        </SafeAreaView>
-      </Animated.View>
-    </View>
-  ) : (
+  return (
     <BottomSheetModal
       ref={bottomSheetModalRef}
       enableDynamicSizing={true}
@@ -464,40 +335,6 @@ const styles = StyleSheet.create((theme, rt) => ({
     paddingHorizontal: theme.components.bottomSheet.padding,
     paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
   },
-  inNavModalContainer: {
-    flex: 1,
-    ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),
-  },
-  inNavModalContent: {
-    flex: 1,
-    borderTopLeftRadius: theme.components.modal.borderRadius,
-    borderTopRightRadius: theme.components.modal.borderRadius,
-    backgroundColor: theme.color.surface.neutral.strong,
-    padding: theme.components.bottomSheet.padding,
-    variants: {
-      background: {
-        primary: {},
-        brand: {
-          backgroundColor: theme.color.background.brand,
-        },
-      },
-    },
-  },
-  inNavModalFooterContainer: {
-    paddingTop: theme.components.bottomSheet.padding,
-  },
-  androidContainer: {
-    height: rt.insets.top + 18,
-    paddingLeft: theme.components.bottomSheet.padding,
-    paddingRight: theme.components.bottomSheet.padding,
-    justifyContent: 'flex-end',
-  },
-  pretendContent: {
-    borderTopLeftRadius: theme.components.modal.borderRadius,
-    borderTopRightRadius: theme.components.modal.borderRadius,
-    height: 12,
-    backgroundColor: theme.components.parts.modalStack.backgroundColorCardTop,
-  },
 }));
 
 export default Modal;