@utilitywarehouse/hearth-react-native 0.28.6 → 0.29.1

package/.storybook/preview.tsx

@@ -1,8 +1,9 @@
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import '@utilitywarehouse/hearth-fonts';
-import '@utilitywarehouse/hearth-tokens/index.css';
 import { color } from '@utilitywarehouse/hearth-tokens';
+import '@utilitywarehouse/hearth-tokens/index.css';
 import { useEffect } from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import '../../../shared/storybook/styles/diff-highlighting.css';
 import '../../../shared/storybook/styles/preview.css';
 import theme from '../../../shared/storybook/theme';
@@ -159,9 +160,11 @@ const preview = {
       }, [isDarkMode, args.darkMode, args.surface, args.inverted]);
 
       return (
-        <BottomSheetModalProvider>
-          <Story args={{ ...args, darkMode: isDarkMode }} />
-        </BottomSheetModalProvider>
+        <SafeAreaProvider>
+          <BottomSheetModalProvider>
+            <Story args={{ ...args, darkMode: isDarkMode }} />
+          </BottomSheetModalProvider>
+        </SafeAreaProvider>
       );
     },
   ],

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.28.6 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.29.1 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.28.6 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.29.1 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -30,9 +30,6 @@
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Input/Input.tsx
   78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
 
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
-  66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-
 /home/runner/work/hearth/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
   17:9  warning  The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook  react-hooks/exhaustive-deps
 
@@ -52,17 +49,17 @@
    14:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
   106:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
 
-✖ 23 problems (0 errors, 23 warnings)
-
-Rule                              | Time (ms) | Relative
-:---------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars |  1617.178 |    58.4%
-react-hooks/exhaustive-deps       |   164.271 |     5.9%
-react-hooks/rules-of-hooks        |    89.591 |     3.2%
-no-global-assign                  |    84.280 |     3.0%
-no-unexpected-multiline           |    56.606 |     2.0%
-no-loss-of-precision              |    56.417 |     2.0%
-no-misleading-character-class     |    48.013 |     1.7%
-no-useless-escape                 |    38.194 |     1.4%
-no-regex-spaces                   |    36.638 |     1.3%
-@typescript-eslint/ban-ts-comment |    35.602 |     1.3%
+✖ 22 problems (0 errors, 22 warnings)
+
+Rule                                              | Time (ms) | Relative
+:-------------------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars                 |  1543.146 |    60.0%
+react-hooks/exhaustive-deps                       |   137.989 |     5.4%
+no-global-assign                                  |    91.047 |     3.5%
+react-hooks/rules-of-hooks                        |    90.077 |     3.5%
+@typescript-eslint/no-unnecessary-type-constraint |    40.362 |     1.6%
+no-loss-of-precision                              |    40.140 |     1.6%
+no-unexpected-multiline                           |    37.188 |     1.4%
+no-regex-spaces                                   |    35.566 |     1.4%
+@typescript-eslint/ban-ts-comment                 |    34.241 |     1.3%
+no-fallthrough                                    |    31.788 |     1.2%

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.29.1
+
+### Patch Changes
+
+- [#1062](https://github.com/utilitywarehouse/hearth/pull/1062) [`0da3ffe`](https://github.com/utilitywarehouse/hearth/commit/0da3ffe12691a4287694ae9fcb2290d459e3c041) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Respect the selected `NavModal` background style
+
+  Fixed an issue where `NavModal` always rendered its inner content with the default surface background, which prevented the `background="brand"` treatment from being applied correctly.
+
+  **Components affected**:
+  - `NavModal`
+
+  **Developer changes**:
+
+  No changes are required.
+
+## 0.29.0
+
+### Minor Changes
+
+- [#1060](https://github.com/utilitywarehouse/hearth/pull/1060) [`05d38f9`](https://github.com/utilitywarehouse/hearth/commit/05d38f9414fec6d6b4a0733829b4d290d96fccae) Thanks [@jordmccord](https://github.com/jordmccord)! - 💔 [BREAKING CHANGE]: Extract navigation-presented modal behaviour into `NavModal`
+
+  `Modal` now only supports the bottom-sheet modal behaviour. The React Navigation screen-based API that was previously exposed through `inNavModal`, `background`, and `scrollable` has moved to the new `NavModal` component.
+
+  `NavModal` also adds a `presentation` prop so the component can match the React Navigation screen presentation style for sheet-style and full-screen modal routes.
+
+  The package-owned `SafeAreaView` component has also been removed in favour of the `react-native-safe-area-context` `SafeAreaView`. Hearth now re-exports that implementation from the package root.
+
+  **Components affected**:
+  - `Modal`
+  - `NavModal`
+  - `SafeAreaView`
+
+  **Developer changes**:
+
+  Update navigation modal screens to use `NavModal` instead of `Modal`:
+
+  ```diff
+  - import { Modal } from '@utilitywarehouse/hearth-react-native';
+  + import { NavModal, type NavModalRef } from '@utilitywarehouse/hearth-react-native';
+
+  - const modalRef = useRef<Modal>(null);
+  + const modalRef = useRef<NavModalRef>(null);
+
+  - <Modal inNavModal background="brand" scrollable={false}>
+  + <NavModal background="brand" scrollable={false} presentation="modal">
+      {/* content */}
+  - </Modal>
+  + </NavModal>
+  ```
+
+  If you are using the bottom-sheet modal API, no changes are required.
+
+  If you were importing the old component from the component path, update it to use the package root re-export or import directly from `react-native-safe-area-context`:
+
+  ```diff
+  - import { SafeAreaView } from '@utilitywarehouse/hearth-react-native';
+  + import { SafeAreaView } from 'react-native-safe-area-context';
+  ```
+
 ## 0.28.6
 
 ### Patch Changes

package/build/components/Combobox/Combobox.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CloseSmallIcon, SearchMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Pressable, 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';
@@ -10,7 +11,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 } from './Combobox.context';

package/build/components/Modal/Modal.d.ts

@@ -3,5 +3,5 @@ import ModalProps from './Modal.props';
 type Modal<T = any> = BottomSheetModalMethods<T> & {
     triggerCloseAnimation?: () => void;
 };
-declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, stickyFooter, background, scrollable, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/build/components/Modal/Modal.js

@@ -1,64 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { BottomSheetFooter, } from '@gorhom/bottom-sheet';
 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';
-const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, stickyFooter = true, background = 'default', scrollable = true, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(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,
-        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, position, type) => {
         if (index > -1) {
@@ -107,13 +64,10 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         noButtons,
         stickyFooter,
         showHandle: props.showHandle,
-        background: isBrandBackground ? 'brand' : 'primary',
     });
-    const footer = useMemo(() => (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: isBrandBackground && inNavModal, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: isBrandBackground && inNavModal, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })), [
+    const footer = useMemo(() => (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })), [
         handlePrimaryButtonPress,
         handleSecondaryButtonPress,
-        inNavModal,
-        isBrandBackground,
         onPressPrimaryButton,
         onPressSecondaryButton,
         primaryButtonProps,
@@ -121,18 +75,9 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         secondaryButtonProps,
         secondaryButtonText,
     ]);
-    const InNavModalContainer = scrollable ? ScrollView : View;
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal && (_jsxs(InNavModalContainer, { style: {
-                        flex: stickyFooter ? 1 : 0,
-                        ...(scrollable ? { marginHorizontal: -1 } : {}),
-                    }, ...(scrollable ? { contentContainerStyle: { paddingHorizontal: 1 } } : {}), children: [children, !stickyFooter ? (_jsx(View, { style: styles.inNavModalFooterContainer, children: footer })) : null] })), !inNavModal && children, ((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons
-                    ? footer
-                    : null] })) }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, !stickyFooter && !noButtons ? footer : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [footer]);
-    return inNavModal ? (_jsxs(View, { style: {
-            flex: 1,
-            backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'primary'],
-        }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle], children: _jsx(SafeAreaView, { edges: ['top', 'bottom'], style: styles.inNavModalContent, children: content }) })] })) : (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, footerComponent: stickyFooter && !noButtons ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.scrollView, ref: scrollViewRef, children: content })] }));
+    return (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, footerComponent: stickyFooter && !noButtons ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.scrollView, ref: scrollViewRef, children: content })] }));
 };
 const styles = StyleSheet.create((theme, rt) => ({
     modal: {
@@ -229,39 +174,5 @@ 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;

package/build/components/Modal/Modal.props.d.ts

@@ -1,37 +1,8 @@
-import { ReactNode } from 'react';
-import { ViewProps } from 'react-native';
 import { BottomSheetProps } from '../BottomSheet';
-import { ButtonWithoutChildrenProps } from '../Button/Button.props';
-import { UnstyledIconButtonProps } from '../UnstyledIconButton';
-interface ModalPropsBase extends Omit<BottomSheetProps, 'children'> {
-    loading?: boolean;
-    image?: ReactNode;
-    showCloseButton?: boolean;
-    heading?: string;
-    loadingHeading?: string;
-    description?: string;
+import { ModalCommonProps } from './Modal.shared.types';
+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/build/components/Modal/Modal.shared.types.d.ts

@@ -0,0 +1,22 @@
+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/build/components/Modal/Modal.web.d.ts

@@ -3,5 +3,5 @@ import ModalProps from './Modal.props';
 type Modal<T = any> = BottomSheetModalMethods<T> & {
     triggerCloseAnimation?: () => void;
 };
-declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/build/components/Modal/Modal.web.js

@@ -1,61 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import { useImperativeHandle, useRef } from 'react';
 import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
-import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming, } from 'react-native-reanimated';
 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 { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
-    const theme = useTheme();
-    const backgroundOpacity = useSharedValue(0);
-    const pretendContentTranslateY = useSharedValue(20);
-    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),
-            });
-        }
-    }, [Platform.OS, inNavModal, pretendContentTranslateY, backgroundOpacity]);
     useImperativeHandle(ref, () => ({
         ...bottomSheetModalRef.current,
-        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, position, type) => {
         if (index > -1) {
@@ -97,10 +56,11 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
             bottomSheetModalRef.current?.dismiss();
         }
     };
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, _jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })] })) }));
-    return inNavModal ? (_jsxs(View, { style: { flex: 1, backgroundColor: theme.color.background.primary }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle], children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] })) : (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, ...props, onChange: handleChange, children: _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content }) }));
+    const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, !noButtons ? (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })) : null] })) }));
+    return (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, ...props, onChange: handleChange, children: _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content }) }));
 };
-const styles = StyleSheet.create((theme, rt) => ({
+const styles = StyleSheet.create(theme => ({
     container: {
         flex: 1,
         gap: theme.components.modal.gap,
@@ -131,30 +91,5 @@ const styles = StyleSheet.create((theme, rt) => ({
     footer: {
         gap: theme.components.modal.action.gap,
     },
-    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,
-        gap: theme.components.modal.gap,
-        padding: theme.components.bottomSheet.padding,
-        paddingBottom: theme.components.modal.padding + rt.insets.bottom,
-    },
-    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;

package/build/components/NavModal/NavModal.d.ts

@@ -0,0 +1,3 @@
+import NavModalProps from './NavModal.props';
+declare const NavModal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, loading, loadingHeading, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, background, scrollable, presentation, scrollViewProps, safeAreaViewProps, ...props }: NavModalProps) => import("react/jsx-runtime").JSX.Element;
+export default NavModal;