@utilitywarehouse/hearth-react-native 0.30.4 → 0.31.1

package/build/components/Modal/Modal.js

@@ -1,9 +1,10 @@
 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, useImperativeHandle, useMemo, useRef } from 'react';
+import { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
 import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
 import { useBottomSheetContext } from '../BottomSheet/BottomSheet.context';
@@ -11,10 +12,12 @@ 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...', loadingDescription, fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', loadingDescription, fullscreen = false, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, ...props }) => {
+    const theme = useTheme();
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
+    const [stickyFooterHeight, setStickyFooterHeight] = useState(0);
     const { useSafeAreaInsets } = useBottomSheetContext();
     useImperativeHandle(ref, () => ({
         ...bottomSheetModalRef.current,
@@ -59,28 +62,40 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
             bottomSheetModalRef.current?.dismiss();
         }
     }, [closeOnSecondaryButtonPress, onPressSecondaryButton]);
-    const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
+    const handleStickyFooterLayout = useCallback((event) => {
+        const nextHeight = Math.ceil(event.nativeEvent.layout.height);
+        setStickyFooterHeight(currentHeight => currentHeight === nextHeight ? currentHeight : nextHeight);
+    }, []);
+    const hasPrimaryButton = !!(onPressPrimaryButton && primaryButtonText);
+    const hasSecondaryButton = !!(onPressSecondaryButton && secondaryButtonText);
+    const hasFooter = !!footer || hasPrimaryButton || hasSecondaryButton;
+    const shouldShowFooter = !loading && hasFooter;
     styles.useVariants({
         loading,
-        bothButtons: !!(onPressPrimaryButton && onPressSecondaryButton),
-        noButtons,
+        noButtons: !shouldShowFooter,
         stickyFooter,
         showHandle: props.showHandle,
         useSafeAreaInsets,
     });
-    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] })), [
+    const footerContent = useMemo(() => footer ?? (_jsxs(View, { style: styles.footer, children: [hasPrimaryButton ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, hasSecondaryButton ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })), [
+        footer,
         handlePrimaryButtonPress,
         handleSecondaryButtonPress,
-        onPressPrimaryButton,
-        onPressSecondaryButton,
+        hasPrimaryButton,
+        hasSecondaryButton,
         primaryButtonProps,
         primaryButtonText,
         secondaryButtonProps,
         secondaryButtonText,
     ]);
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined, accessibilityHint: Platform.OS === 'android' && loadingDescription ? loadingDescription : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading }), loadingDescription ? _jsx(BodyText, { textAlign: "center", children: loadingDescription }) : null] })) : (_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 (_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 content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined, accessibilityHint: Platform.OS === 'android' && loadingDescription ? loadingDescription : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading }), loadingDescription ? _jsx(BodyText, { textAlign: "center", children: loadingDescription }) : null] })) : (_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 && shouldShowFooter ? (_jsx(View, { style: footerStyle, children: footerContent })) : null] })) }));
+    const renderFooter = useCallback((bottomSheetFooterProps) => (_jsx(BottomSheetFooter, { ...bottomSheetFooterProps, children: _jsx(View, { onLayout: handleStickyFooterLayout, style: [styles.footerWrap, footerStyle], children: footerContent }) })), [footerContent, footerStyle, handleStickyFooterLayout]);
+    return (_jsxs(_Fragment, { children: [stickyFooter && shouldShowFooter && stickyFooterHeight === 0 ? (_jsx(View, { accessible: false, importantForAccessibility: "no-hide-descendants", pointerEvents: "none", style: styles.footerMeasurementContainer, children: _jsx(View, { onLayout: handleStickyFooterLayout, style: [styles.footerWrap, footerStyle], children: footerContent }) })) : null, _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 && shouldShowFooter ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: [
+                            styles.scrollView,
+                            stickyFooter && shouldShowFooter && stickyFooterHeight > 0
+                                ? { paddingBottom: stickyFooterHeight + theme.components.modal.gap }
+                                : null,
+                        ], ref: scrollViewRef, children: content })] })] }));
 };
 const styles = StyleSheet.create((theme, rt) => ({
     modal: {
@@ -100,14 +115,6 @@ const styles = StyleSheet.create((theme, rt) => ({
     scrollView: {
         flex: 1,
         variants: {
-            bothButtons: {
-                true: {
-                    paddingBottom: 166,
-                },
-                false: {
-                    paddingBottom: 102,
-                },
-            },
             noButtons: {
                 true: {
                     paddingBottom: theme.components.modal.padding,
@@ -125,29 +132,10 @@ const styles = StyleSheet.create((theme, rt) => ({
             },
         },
         compoundVariants: [
-            {
-                bothButtons: true,
-                useSafeAreaInsets: true,
-                styles: {
-                    paddingBottom: 166 +
-                        rt.insets.bottom -
-                        theme.components.modal.padding +
-                        theme.components.bottomSheet.padding,
-                },
-            },
-            {
-                bothButtons: false,
-                useSafeAreaInsets: true,
-                styles: {
-                    paddingBottom: 102 +
-                        rt.insets.bottom -
-                        theme.components.modal.padding +
-                        theme.components.bottomSheet.padding,
-                },
-            },
             {
                 noButtons: true,
                 useSafeAreaInsets: true,
+                stickyFooter: false,
                 styles: {
                     paddingBottom: rt.insets.bottom +
                         theme.components.modal.padding +
@@ -206,6 +194,12 @@ const styles = StyleSheet.create((theme, rt) => ({
     footer: {
         gap: theme.components.modal.action.gap,
     },
+    footerMeasurementContainer: {
+        left: 0,
+        opacity: 0,
+        position: 'absolute',
+        right: 0,
+    },
     footerWrap: {
         backgroundColor: theme.color.surface.neutral.strong,
         paddingHorizontal: theme.components.bottomSheet.padding,

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

@@ -1,8 +1,13 @@
 import { BottomSheetProps } from '../BottomSheet';
-import { ModalCommonProps } from './Modal.shared.types';
-interface ModalProps extends Omit<BottomSheetProps, 'children'>, ModalCommonProps {
+import { ModalButtonFooterProps, ModalCommonBaseProps, ModalCustomFooterProps } from './Modal.shared.types';
+type ModalBaseProps = Omit<BottomSheetProps, 'children'> & ModalCommonBaseProps & {
     fullscreen?: boolean;
+};
+type ModalProps = (ModalBaseProps & ModalButtonFooterProps & {
     closeOnPrimaryButtonPress?: boolean;
     closeOnSecondaryButtonPress?: boolean;
-}
+}) | (ModalBaseProps & ModalCustomFooterProps & {
+    closeOnPrimaryButtonPress?: never;
+    closeOnSecondaryButtonPress?: never;
+});
 export default ModalProps;

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

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { ViewProps } from 'react-native';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { ButtonWithoutChildrenProps } from '../Button/Button.props';
 import { UnstyledIconButtonProps } from '../UnstyledIconButton';
-export interface ModalCommonProps {
+export interface ModalCommonBaseProps {
     loading?: boolean;
     image?: ReactNode;
     showCloseButton?: boolean;
@@ -12,12 +12,27 @@ export interface ModalCommonProps {
     description?: string;
     stickyFooter?: boolean;
     children?: ViewProps['children'];
+    onPressCloseButton?: () => void;
+    closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
+}
+export interface ModalButtonFooterProps {
     onPressPrimaryButton?: () => void;
     primaryButtonText?: string;
     onPressSecondaryButton?: () => void;
     secondaryButtonText?: string;
-    onPressCloseButton?: () => void;
     primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
     secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
-    closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
+    footer?: never;
+    footerStyle?: StyleProp<ViewStyle>;
+}
+export interface ModalCustomFooterProps {
+    footer: ReactNode;
+    footerStyle?: StyleProp<ViewStyle>;
+    onPressPrimaryButton?: never;
+    primaryButtonText?: never;
+    onPressSecondaryButton?: never;
+    secondaryButtonText?: never;
+    primaryButtonProps?: never;
+    secondaryButtonProps?: never;
 }
+export type ModalCommonProps = ModalCommonBaseProps & (ModalButtonFooterProps | ModalCustomFooterProps);

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, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, ...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, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

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

@@ -9,7 +9,7 @@ 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...', fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -56,8 +56,11 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
             bottomSheetModalRef.current?.dismiss();
         }
     };
-    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] })) }));
+    const hasPrimaryButton = !!(onPressPrimaryButton && primaryButtonText);
+    const hasSecondaryButton = !!(onPressSecondaryButton && secondaryButtonText);
+    const hasFooter = !!footer || hasPrimaryButton || hasSecondaryButton;
+    const footerContent = footer ?? (_jsxs(View, { style: styles.footer, children: [hasPrimaryButton ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, hasSecondaryButton ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : 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, hasFooter ? _jsx(View, { style: footerStyle, children: footerContent }) : 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 => ({

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

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

package/build/components/NavModal/NavModal.js

@@ -11,7 +11,7 @@ import { Button } from '../Button';
 import { Heading } from '../Heading';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const NavModal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, loading, loadingHeading = 'Loading...', loadingDescription, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, background = 'default', scrollable = true, presentation = 'modal', scrollViewProps, useSafeAreaInsets = true, ...props }) => {
+const NavModal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, loading, loadingHeading = 'Loading...', loadingDescription, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, background = 'default', scrollable = true, presentation = 'modal', scrollViewProps, useSafeAreaInsets = true, ...props }) => {
     const theme = useTheme();
     const backgroundOpacity = useSharedValue(0);
     const pretendContentTranslateY = useSharedValue(20);
@@ -60,7 +60,9 @@ const NavModal = ({ ref, children, heading, description, showCloseButton = true,
     const handleSecondaryButtonPress = useCallback(() => {
         onPressSecondaryButton?.();
     }, [onPressSecondaryButton]);
-    const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
+    const hasPrimaryButton = !!(onPressPrimaryButton && primaryButtonText);
+    const hasSecondaryButton = !!(onPressSecondaryButton && secondaryButtonText);
+    const hasFooter = !!footer || hasPrimaryButton || hasSecondaryButton;
     styles.useVariants({
         loading,
         background: isBrandBackground ? 'brand' : 'primary',
@@ -69,12 +71,13 @@ const NavModal = ({ ref, children, heading, description, showCloseButton = true,
         usesSheetPresentation,
         stickyFooter,
     });
-    const footer = useMemo(() => (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: isBrandBackground, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: isBrandBackground, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })), [
+    const footerContent = useMemo(() => footer ?? (_jsxs(View, { style: styles.footer, children: [hasPrimaryButton ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: isBrandBackground, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, hasSecondaryButton ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: isBrandBackground, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })), [
+        footer,
         handlePrimaryButtonPress,
         handleSecondaryButtonPress,
+        hasPrimaryButton,
+        hasSecondaryButton,
         isBrandBackground,
-        onPressPrimaryButton,
-        onPressSecondaryButton,
         primaryButtonProps,
         primaryButtonText,
         secondaryButtonProps,
@@ -83,9 +86,9 @@ const NavModal = ({ ref, children, heading, description, showCloseButton = true,
     const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined, accessibilityHint: Platform.OS === 'android' && loadingDescription ? loadingDescription : undefined, screenReaderFocusable: true, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground, children: loadingHeading }), loadingDescription ? (_jsx(BodyText, { size: "md", textAlign: "center", inverted: isBrandBackground, children: loadingDescription })) : null] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground, ...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, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground, children: description })) : null] })] })) : null, scrollable ? (_jsxs(ScrollView, { style: {
                         flex: stickyFooter ? 1 : 0,
                         marginHorizontal: -4,
-                    }, contentContainerStyle: { paddingHorizontal: 4 }, ...scrollViewProps, children: [children, !stickyFooter && !noButtons ? (_jsx(View, { style: styles.inNavModalFooterContainer, children: footer })) : null] })) : (_jsxs(View, { style: {
+                    }, contentContainerStyle: { paddingHorizontal: 4 }, ...scrollViewProps, children: [children, !stickyFooter && hasFooter ? (_jsx(View, { style: [styles.inNavModalFooterContainer, footerStyle], children: footerContent })) : null] })) : (_jsxs(View, { style: {
                         flex: stickyFooter ? 1 : 0,
-                    }, children: [children, !stickyFooter && !noButtons ? (_jsx(View, { style: styles.inNavModalFooterContainer, children: footer })) : null] })), stickyFooter && !noButtons ? footer : null] })) }));
+                    }, children: [children, !stickyFooter && hasFooter ? (_jsx(View, { style: [styles.inNavModalFooterContainer, footerStyle], children: footerContent })) : null] })), stickyFooter && hasFooter ? _jsx(View, { style: footerStyle, children: footerContent }) : null] })) }));
     return (_jsxs(View, { style: styles.root, children: [Platform.OS === 'android' && usesSheetPresentation ? (_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' && usesSheetPresentation && animatedBackgroundStyle,

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

@@ -1,15 +1,16 @@
 import { Ref } from 'react';
 import { ScrollViewProps } from 'react-native';
-import { ModalCommonProps } from '../Modal/Modal.shared.types';
+import { ModalButtonFooterProps, ModalCommonBaseProps, ModalCustomFooterProps } from '../Modal/Modal.shared.types';
 export interface NavModalRef {
     triggerCloseAnimation?: () => void;
 }
-interface NavModalProps extends ModalCommonProps {
+type NavModalBaseProps = ModalCommonBaseProps & {
     ref?: Ref<NavModalRef>;
     background?: 'default' | 'brand';
     scrollable?: boolean;
     presentation?: 'fullScreenModal' | 'modal' | 'transparentModal' | 'containedModal' | 'containedTransparentModal';
     useSafeAreaInsets?: boolean;
     scrollViewProps?: Omit<ScrollViewProps, 'children'>;
-}
+};
+type NavModalProps = (NavModalBaseProps & ModalButtonFooterProps) | (NavModalBaseProps & ModalCustomFooterProps);
 export default NavModalProps;

package/build/components/Table/TableHeaderCell.js

@@ -6,8 +6,9 @@ import { BodyText } from '../BodyText';
 import { useTableContext } from './Table.context';
 import { getColumnStyle } from './Table.utils';
 const renderContent = (children, weight = 'semibold', color = 'white') => {
+    styles.useVariants({ color });
     if (typeof children === 'string' || typeof children === 'number') {
-        return (_jsx(BodyText, { size: "md", weight: weight, style: styles.text, inverted: color === 'purple', children: children }));
+        return (_jsx(BodyText, { size: "md", weight: weight, style: styles.text, children: children }));
     }
     return children;
 };
@@ -91,6 +92,14 @@ const styles = StyleSheet.create(theme => ({
                     color: theme.color.text.primary,
                 },
             },
+            color: {
+                purple: {
+                    color: theme.components.table.headerCell.foregoundColorInverted,
+                },
+                white: {
+                    color: theme.components.table.headerCell.foregoundColor,
+                },
+            },
         },
     },
 }));

package/build/components/Textarea/Textarea.d.ts

@@ -7,5 +7,5 @@ export declare const TextareaComponent: import("@gluestack-ui/textarea/lib/types
     };
 }, import("react-native").TextInputProps>;
 export declare const TextareaField: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & import("react").RefAttributes<import("react-native").TextInputProps> & import("@gluestack-ui/textarea/lib/typescript/types").IInputProps>;
-declare const Textarea: ({ validationStatus, children, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+declare const Textarea: ({ validationStatus, children, resizable, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, onLayout, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
 export default Textarea;

package/build/components/Textarea/Textarea.js

@@ -1,6 +1,12 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createTextarea } from '@gluestack-ui/textarea';
-import { useEffect } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
+import { View, } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { Path, Svg } from 'react-native-svg';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
 import { FormField, useFormFieldContext } from '../FormField';
 import TextareaFieldComponent from './TextareaField';
 import TextareaRoot from './TextareaRoot';
@@ -9,8 +15,12 @@ export const TextareaComponent = createTextarea({
     Input: TextareaFieldComponent,
 });
 export const TextareaField = TextareaComponent.Input;
-const Textarea = ({ validationStatus = 'initial', children, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, ...props }) => {
+const DEFAULT_TEXTAREA_HEIGHT = 96;
+const RESIZE_HANDLE_TOUCH_SIZE = 28;
+const RESIZE_HANDLE_ICON_SIZE = 9;
+const Textarea = ({ validationStatus = 'initial', children, resizable = false, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, onLayout, ...props }) => {
     const formFieldContext = useFormFieldContext();
+    const hasMeasuredHeight = useRef(false);
     const textareaLabel = label ?? formFieldContext?.label;
     const textareaHelperText = helperText ?? formFieldContext?.helperText;
     const textareaValidText = validText ?? formFieldContext?.validText;
@@ -19,11 +29,14 @@ const Textarea = ({ validationStatus = 'initial', children, disabled, focused, r
     const textareaDisabled = disabled ?? formFieldContext?.disabled;
     const textareaReadonly = readonly ?? formFieldContext?.readonly;
     const textareaValidationStatus = formFieldContext?.validationStatus ?? validationStatus;
+    const textareaHeight = useSharedValue(DEFAULT_TEXTAREA_HEIGHT);
+    const resizeStartHeight = useSharedValue(DEFAULT_TEXTAREA_HEIGHT);
+    const theme = useTheme();
     useEffect(() => {
         if (formFieldContext?.setShouldHandleAccessibility) {
             formFieldContext.setShouldHandleAccessibility(true);
         }
-    }, []);
+    }, [formFieldContext]);
     const getAccessibilityLabel = () => {
         let accessibilityLabel = '';
         if (textareaLabel) {
@@ -52,6 +65,52 @@ const Textarea = ({ validationStatus = 'initial', children, disabled, focused, r
         }
         return accessibilityHint || props.accessibilityHint;
     };
-    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, validationStatus: validationStatus, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, children: _jsx(TextareaComponent, { ...(children ? props : {}), validationStatus: textareaValidationStatus, isInvalid: textareaValidationStatus === 'invalid', isReadOnly: textareaReadonly, isDisabled: textareaDisabled, isFocused: focused, required: textareaRequired, "aria-label": getAccessibilityLabel(), accessibilityHint: getAccessibilityHint(), children: children ? (_jsx(_Fragment, { children: children })) : (_jsx(_Fragment, { children: _jsx(TextareaField, { ...props }) })) }) }));
+    const handleTextareaLayout = (event) => {
+        if (!hasMeasuredHeight.current) {
+            textareaHeight.value = event.nativeEvent.layout.height;
+            resizeStartHeight.value = event.nativeEvent.layout.height;
+            hasMeasuredHeight.current = true;
+        }
+        if (children) {
+            onLayout?.(event);
+        }
+    };
+    const resizeGesture = useMemo(() => Gesture.Pan()
+        .enabled(resizable && !textareaDisabled)
+        .onBegin(() => {
+        resizeStartHeight.value = textareaHeight.value;
+    })
+        .onUpdate(event => {
+        const nextHeight = resizeStartHeight.value + event.translationY + event.translationX * 0.35;
+        textareaHeight.value = Math.max(DEFAULT_TEXTAREA_HEIGHT, nextHeight);
+    }), [resizable, resizeStartHeight, textareaDisabled, textareaHeight]);
+    const animatedHeightStyle = useAnimatedStyle(() => ({
+        height: textareaHeight.value,
+    }), [textareaHeight]);
+    const rootStyle = (children ? props.style : undefined);
+    const inputStyle = (!children ? props.style : undefined);
+    const textareaStyle = (resizable ? [rootStyle, animatedHeightStyle] : rootStyle);
+    return (_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, validationStatus: validationStatus, disabled: disabled, readonly: readonly, accessibilityHandledByChildren: true, children: _jsxs(TextareaComponent, { ...(children ? props : {}), onLayout: handleTextareaLayout, style: textareaStyle, validationStatus: textareaValidationStatus, isInvalid: textareaValidationStatus === 'invalid', isReadOnly: textareaReadonly, isDisabled: textareaDisabled, isFocused: focused, required: textareaRequired, "aria-label": getAccessibilityLabel(), accessibilityHint: getAccessibilityHint(), children: [children ? (_jsx(_Fragment, { children: children })) : (_jsx(_Fragment, { children: _jsx(TextareaField, { ...props, onLayout: onLayout, style: [styles.textarea, inputStyle] }) })), resizable && !textareaDisabled ? (_jsx(GestureDetector, { gesture: resizeGesture, children: _jsx(View, { style: styles.resizeHandle, children: _jsx(Svg, { width: RESIZE_HANDLE_ICON_SIZE, height: RESIZE_HANDLE_ICON_SIZE, viewBox: "0 0 9 9", fill: "none", children: _jsx(Path, { d: "M0.353516 8.35355L8.35352 0.353546M4.35352 8.35355L8.35352 4.35355", stroke: theme.color.icon.primary }) }) }) })) : null] }) }));
 };
+const styles = StyleSheet.create({
+    textarea: {
+        padding: 0,
+        _web: {
+            outlineStyle: 'none',
+            _focusVisible: {
+                outlineStyle: 'none',
+            },
+        },
+    },
+    resizeHandle: {
+        position: 'absolute',
+        right: 0,
+        bottom: 0,
+        width: RESIZE_HANDLE_TOUCH_SIZE,
+        height: RESIZE_HANDLE_TOUCH_SIZE,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1,
+    },
+});
 export default Textarea;

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

@@ -1,5 +1,15 @@
 import type { TextInputProps, ViewProps } from 'react-native';
 export interface TextareaBaseProps {
+    /**
+     * If true, the textarea can be resized vertically using a drag handle.
+     *
+     * @type boolean
+     * @example
+     * ```tsx
+     * <Textarea resizable />
+     * ```
+     */
+    resizable?: boolean;
     /**
      * If true, the textarea will be disabled.
      *

package/build/components/Textarea/TextareaRoot.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { TextareaContext } from './Textarea.context';
+const AnimatedView = Animated.createAnimatedComponent(View);
 const TextareaRoot = ({ children, style, states, validationStatus, ...props }) => {
     const { focus = false, disabled = false, readonly = false } = states || {};
     styles.useVariants({ validationStatus, focus, disabled, readonly });
     const value = useMemo(() => ({ focused: focus, disabled, readonly, validationStatus }), [focus, disabled, readonly, validationStatus]);
-    return (_jsx(TextareaContext.Provider, { value: value, children: _jsx(View, { ...props, style: [styles.container, style], children: children }) }));
+    return (_jsx(TextareaContext.Provider, { value: value, children: _jsx(AnimatedView, { ...props, style: [styles.container, style], children: children }) }));
 };
 TextareaRoot.displayName = 'TextareaRoot';
 const styles = StyleSheet.create(theme => ({
@@ -15,6 +17,7 @@ const styles = StyleSheet.create(theme => ({
         borderColor: theme.color.border.strong,
         height: theme.components.input.textArea.height,
         borderRadius: theme.components.input.borderRadius,
+        position: 'relative',
         flexDirection: 'row',
         overflow: 'hidden',
         alignContent: 'center',