@utilitywarehouse/hearth-react-native 0.30.4 → 0.31.0

package/src/components/NavModal/NavModal.docs.mdx

@@ -1,4 +1,5 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { BodyText, Button, Flex } from '../../';
 import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import modalAndroidVideo from '../../../docs/assets/modal-android.mp4';
 import modaliOSVideo from '../../../docs/assets/modal-ios.mp4';
@@ -147,6 +148,8 @@ const styles = StyleSheet.create({
 | `onPressCloseButton`     | `() => void`                                                                                                     | Called when the close button is pressed.                                                                                                                                                         | -              |
 | `primaryButtonProps`     | `Omit<ButtonWithoutChildrenProps, 'children'>`                                                                   | Extra props forwarded to the primary button.                                                                                                                                                     | -              |
 | `secondaryButtonProps`   | `Omit<ButtonWithoutChildrenProps, 'children'>`                                                                   | Extra props forwarded to the secondary button.                                                                                                                                                   | -              |
+| `footer`                 | `ReactNode`                                                                                                      | Custom footer content that replaces the built-in action buttons.                                                                                                                                 | -              |
+| `footerStyle`            | `StyleProp<ViewStyle>`                                                                                           | Styles applied to the footer container, useful for sticky footer shadows or extra spacing.                                                                                                       | -              |
 | `closeButtonProps`       | `Omit<UnstyledIconButtonProps, 'children'>`                                                                      | Extra props forwarded to the close button.                                                                                                                                                       | -              |
 | `loading`                | `boolean`                                                                                                        | Replaces the content with a loading state and spinner.                                                                                                                                           | `false`        |
 | `loadingHeading`         | `string`                                                                                                         | Heading text shown while `loading` is true.                                                                                                                                                      | `'Loading...'` |
@@ -160,6 +163,8 @@ const styles = StyleSheet.create({
 | `useSafeAreaInsets`      | `boolean`                                                                                                        | Whether to apply safe area insets as padding within the component. This is enabled by default to fix full-screen presentation padding but can be disabled if you want to manage insets yourself. | `true`         |
 | `scrollViewProps`        | `ScrollViewProps`                                                                                                | Extra props forwarded to the `ScrollView` wrapping the modal content when `scrollable` is true.                                                                                                  | -              |
 
+When `footer` is provided, the primary and secondary button props are not available. Compose the footer actions directly inside the custom footer instead.
+
 ## Accessibility
 
 `NavModal` keeps the same heading, description, button labeling, and loading-state support as `Modal`, but it does not force accessibility focus on mount. Because this component is used on a navigation-presented screen, React Navigation and the platform own the initial screen focus behavior.
@@ -177,3 +182,27 @@ const styles = StyleSheet.create({
 ### Full-Screen Presentation
 
 <Canvas of={Stories.FullScreenPresentation} />
+
+### Sticky Custom Footer
+
+<Canvas of={Stories.StickyCustomFooter} />
+
+```tsx
+<NavModal
+  heading="Confirm changes"
+  description="Use a custom sticky footer when your actions need a custom layout."
+  footer={
+    <Flex direction="row" spacing="md">
+      <Button variant="outline" colorScheme="functional" style={{ flex: 1 }}>
+        Back
+      </Button>
+      <Button style={{ flex: 1 }}>Continue</Button>
+    </Flex>
+  }
+  footerStyle={{
+    boxShadow: '0px -6px 12px rgba(16, 24, 40, 0.12)',
+  }}
+>
+  <BodyText>This sticky footer stays pinned while the content scrolls.</BodyText>
+</NavModal>
+```

package/src/components/NavModal/NavModal.props.ts

@@ -1,12 +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;
@@ -18,6 +22,10 @@ interface NavModalProps extends ModalCommonProps {
     | 'containedTransparentModal';
   useSafeAreaInsets?: boolean;
   scrollViewProps?: Omit<ScrollViewProps, 'children'>;
-}
+};
+
+type NavModalProps =
+  | (NavModalBaseProps & ModalButtonFooterProps)
+  | (NavModalBaseProps & ModalCustomFooterProps);
 
 export default NavModalProps;

package/src/components/NavModal/NavModal.stories.tsx

@@ -2,6 +2,8 @@ import { Meta, StoryObj } from '@storybook/react-native';
 import { Platform, View } from 'react-native';
 import { BodyText } from '../BodyText';
 import { Box } from '../Box';
+import { Button } from '../Button';
+import { Flex } from '../Flex';
 import NavModal from './NavModal';
 
 const meta = {
@@ -129,3 +131,30 @@ export const FullScreenPresentation: Story = {
     </View>
   ),
 };
+
+export const StickyCustomFooter: Story = {
+  render: () => (
+    <View style={Platform.OS === 'web' ? { width: 400, height: 720 } : { flex: 1 }}>
+      <NavModal
+        heading="Confirm changes"
+        description="This example replaces the default buttons with a custom sticky footer."
+        footer={
+          <Flex direction="row" spacing="md">
+            <Button variant="outline" colorScheme="functional" style={{ flex: 1 }}>
+              Back
+            </Button>
+            <Button style={{ flex: 1 }}>Continue</Button>
+          </Flex>
+        }
+        footerStyle={{
+          boxShadow: '0px -6px 12px rgba(16, 24, 40, 0.12)',
+        }}
+      >
+        <Box gap="200">
+          <BodyText>This sticky footer stays pinned while the body content scrolls.</BodyText>
+          <BodyText>Use the footer prop when you need custom layouts or custom buttons.</BodyText>
+        </Box>
+      </NavModal>
+    </View>
+  ),
+};

package/src/components/NavModal/NavModal.tsx

@@ -33,6 +33,8 @@ const NavModal = ({
   loadingHeading = 'Loading...',
   loadingDescription,
   image,
+  footer,
+  footerStyle,
   primaryButtonProps,
   secondaryButtonProps,
   closeButtonProps,
@@ -110,7 +112,9 @@ const NavModal = ({
     onPressSecondaryButton?.();
   }, [onPressSecondaryButton]);
 
-  const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
+  const hasPrimaryButton = !!(onPressPrimaryButton && primaryButtonText);
+  const hasSecondaryButton = !!(onPressSecondaryButton && secondaryButtonText);
+  const hasFooter = !!footer || hasPrimaryButton || hasSecondaryButton;
 
   styles.useVariants({
     loading,
@@ -121,37 +125,39 @@ const NavModal = ({
     stickyFooter,
   });
 
-  const footer = useMemo(
-    () => (
-      <View style={styles.footer}>
-        {onPressPrimaryButton && primaryButtonText ? (
-          <Button
-            onPress={handlePrimaryButtonPress}
-            text={primaryButtonText}
-            inverted={isBrandBackground}
-            {...primaryButtonProps}
-            variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
-            colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
-          />
-        ) : null}
-        {onPressSecondaryButton && secondaryButtonText ? (
-          <Button
-            onPress={handleSecondaryButtonPress}
-            text={secondaryButtonText}
-            inverted={isBrandBackground}
-            {...secondaryButtonProps}
-            variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
-            colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
-          />
-        ) : null}
-      </View>
-    ),
+  const footerContent = useMemo(
+    () =>
+      footer ?? (
+        <View style={styles.footer}>
+          {hasPrimaryButton ? (
+            <Button
+              onPress={handlePrimaryButtonPress}
+              text={primaryButtonText}
+              inverted={isBrandBackground}
+              {...primaryButtonProps}
+              variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
+              colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
+            />
+          ) : null}
+          {hasSecondaryButton ? (
+            <Button
+              onPress={handleSecondaryButtonPress}
+              text={secondaryButtonText}
+              inverted={isBrandBackground}
+              {...secondaryButtonProps}
+              variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
+              colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
+            />
+          ) : null}
+        </View>
+      ),
     [
+      footer,
       handlePrimaryButtonPress,
       handleSecondaryButtonPress,
+      hasPrimaryButton,
+      hasSecondaryButton,
       isBrandBackground,
-      onPressPrimaryButton,
-      onPressSecondaryButton,
       primaryButtonProps,
       primaryButtonText,
       secondaryButtonProps,
@@ -238,8 +244,8 @@ const NavModal = ({
               {...scrollViewProps}
             >
               {children}
-              {!stickyFooter && !noButtons ? (
-                <View style={styles.inNavModalFooterContainer}>{footer}</View>
+              {!stickyFooter && hasFooter ? (
+                <View style={[styles.inNavModalFooterContainer, footerStyle]}>{footerContent}</View>
               ) : null}
             </ScrollView>
           ) : (
@@ -249,12 +255,12 @@ const NavModal = ({
               }}
             >
               {children}
-              {!stickyFooter && !noButtons ? (
-                <View style={styles.inNavModalFooterContainer}>{footer}</View>
+              {!stickyFooter && hasFooter ? (
+                <View style={[styles.inNavModalFooterContainer, footerStyle]}>{footerContent}</View>
               ) : null}
             </View>
           )}
-          {stickyFooter && !noButtons ? footer : null}
+          {stickyFooter && hasFooter ? <View style={footerStyle}>{footerContent}</View> : null}
         </View>
       )}
     </>

package/src/components/Textarea/Textarea.docs.mdx

@@ -71,7 +71,8 @@ all of the React Native [`View` props](https://reactnative.dev/docs/view).
 | helperIcon       | `ComponentType`                    | `-`         | Icon to display alongside the helper text. **(Only to be used if the input has no children)**                                                                           |
 | validText        | `string`                           | `-`         | Text to display when validation status is 'valid'. **(Only to be used if the input has no children)**                                                                   |
 | invalidText      | `string`                           | `-`         | Text to display when validation status is 'invalid'.                                                                                                                    |
-| required         | `boolean`                          | `false`     | Whether the input is required. **(Only to be used if the input has no children)**                                                                                       |
+| required         | `boolean`                          | `true`      | Whether the input is required. **(Only to be used if the input has no children)**                                                                                       |
+| resizable        | `boolean`                          | `false`     | Adds a bottom-right drag handle so the textarea can be resized vertically.                                                                                              |
 | value            | `string`                           | `-`         | The value of the input. **(Only to be used if the input has no children)**                                                                                              |
 | onChange         | `function`                         | `-`         | Callback function that is triggered when the input value changes. **(Only to be used if the input has no children)** **(Only to be used if the input has no children)** |
 | onBlur           | `function`                         | `-`         | Callback function that is triggered when the input loses focus. **(Only to be used if the input has no children)**                                                      |
@@ -118,6 +119,7 @@ const MyComponent = () => {
   const handleChange = text => {
     setValue(text);
   };
+
   return (
     <Textarea
       label="Description"
@@ -130,6 +132,36 @@ const MyComponent = () => {
 };
 ```
 
+### Resizable
+
+Set `resizable` to `true` to let people drag the bottom-right handle and increase the textarea height.
+
+<UsageWrap>
+  <Center>
+    <Textarea
+      label="Additional notes"
+      helperText="Drag the corner handle to resize"
+      placeholder="Enter your text here..."
+      resizable
+    />
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Textarea } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  return (
+    <Textarea
+      label="Additional notes"
+      helperText="Drag the corner handle to resize"
+      placeholder="Enter your text here..."
+      resizable
+    />
+  );
+};
+```
+
 ## Accessibility
 
 We have outlined the various features that ensure the Textarea component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Adheres to the [WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-1.2/#textbox).

package/src/components/Textarea/Textarea.props.ts

@@ -1,6 +1,16 @@
 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.
    *
@@ -37,8 +47,7 @@ export interface TextareaBaseProps {
 export interface TextareaWithChildrenProps extends TextareaBaseProps, ViewProps {}
 
 export interface TextareaWithoutChildrenProps
-  extends TextareaBaseProps,
-    Omit<TextInputProps, 'children'> {
+  extends TextareaBaseProps, Omit<TextInputProps, 'children'> {
   children?: never;
 }
 

package/src/components/Textarea/Textarea.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { Textarea } from '.';
 
 const meta = {
@@ -56,6 +56,16 @@ const meta = {
       description: 'Focus the Textarea component',
       defaultValue: false,
     },
+    required: {
+      control: 'boolean',
+      description: 'Whether the Textarea component is required',
+      defaultValue: true,
+    },
+    resizable: {
+      control: 'boolean',
+      description: 'Enables a drag handle to resize the Textarea vertically',
+      defaultValue: false,
+    },
   },
   args: {
     placeholder: 'Textarea placeholder',
@@ -63,6 +73,7 @@ const meta = {
     disabled: false,
     readonly: false,
     focused: false,
+    resizable: false,
   },
 } satisfies Meta<typeof Textarea>;
 
@@ -70,3 +81,12 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {};
+
+export const Resizable: Story = {
+  args: {
+    label: 'Notes',
+    helperText: 'Drag the bottom-right handle to resize',
+    placeholder: 'Add more detail here...',
+    resizable: true,
+  },
+};

package/src/components/Textarea/Textarea.tsx

@@ -1,7 +1,19 @@
 import { createTextarea } from '@gluestack-ui/textarea';
 import type TextareaProps from './Textarea.props';
 
-import { useEffect } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
+import {
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} 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';
@@ -13,9 +25,14 @@ export const TextareaComponent = createTextarea({
 
 export const TextareaField = TextareaComponent.Input;
 
+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,
@@ -26,9 +43,11 @@ const Textarea = ({
   invalidText,
   required,
   helperIcon,
+  onLayout,
   ...props
 }: TextareaProps) => {
   const formFieldContext = useFormFieldContext();
+  const hasMeasuredHeight = useRef(false);
   const textareaLabel = label ?? formFieldContext?.label;
   const textareaHelperText = helperText ?? formFieldContext?.helperText;
   const textareaValidText = validText ?? formFieldContext?.validText;
@@ -37,12 +56,15 @@ const Textarea = ({
   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 = '';
@@ -75,6 +97,47 @@ const Textarea = ({
     return accessibilityHint || props.accessibilityHint;
   };
 
+  const handleTextareaLayout = (event: LayoutChangeEvent) => {
+    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) as StyleProp<ViewStyle>;
+  const inputStyle = (!children ? props.style : undefined) as StyleProp<TextStyle>;
+  const textareaStyle = (
+    resizable ? [rootStyle, animatedHeightStyle] : rootStyle
+  ) as StyleProp<ViewStyle>;
+
   return (
     <FormField
       label={label}
@@ -91,6 +154,8 @@ const Textarea = ({
     >
       <TextareaComponent
         {...(children ? props : {})}
+        onLayout={handleTextareaLayout}
+        style={textareaStyle}
         validationStatus={textareaValidationStatus}
         isInvalid={textareaValidationStatus === 'invalid'}
         isReadOnly={textareaReadonly}
@@ -104,12 +169,51 @@ const Textarea = ({
           <>{children}</>
         ) : (
           <>
-            <TextareaField {...props} />
+            <TextareaField {...props} onLayout={onLayout} style={[styles.textarea, inputStyle]} />
           </>
         )}
+        {resizable && !textareaDisabled ? (
+          <GestureDetector gesture={resizeGesture}>
+            <View style={styles.resizeHandle}>
+              <Svg
+                width={RESIZE_HANDLE_ICON_SIZE}
+                height={RESIZE_HANDLE_ICON_SIZE}
+                viewBox="0 0 9 9"
+                fill="none"
+              >
+                <Path
+                  d="M0.353516 8.35355L8.35352 0.353546M4.35352 8.35355L8.35352 4.35355"
+                  stroke={theme.color.icon.primary}
+                />
+              </Svg>
+            </View>
+          </GestureDetector>
+        ) : null}
       </TextareaComponent>
     </FormField>
   );
 };
 
+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/src/components/Textarea/TextareaRoot.tsx

@@ -1,9 +1,12 @@
 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';
 import InputProps from './Textarea.props';
 
+const AnimatedView = Animated.createAnimatedComponent(View);
+
 const TextareaRoot = ({
   children,
   style,
@@ -21,9 +24,9 @@ const TextareaRoot = ({
 
   return (
     <TextareaContext.Provider value={value}>
-      <View {...props} style={[styles.container, style]}>
+      <AnimatedView {...props} style={[styles.container, style]}>
         {children}
-      </View>
+      </AnimatedView>
     </TextareaContext.Provider>
   );
 };
@@ -35,6 +38,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',