@utilitywarehouse/hearth-react-native 0.31.1 → 0.32.1

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

@@ -1,6 +1,17 @@
 import type { TextInputProps, ViewProps } from 'react-native';
 
 export interface TextareaBaseProps {
+  /**
+   * Sets the initial height of a resizable textarea in pixels.
+   * Has no effect unless `resizable` is enabled.
+   *
+   * @type number
+   * @example
+   * ```tsx
+   * <Textarea resizable defaultHeight={140} />
+   * ```
+   */
+  defaultHeight?: number;
   /**
    * If true, the textarea can be resized vertically using a drag handle.
    *

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

@@ -66,6 +66,10 @@ const meta = {
       description: 'Enables a drag handle to resize the Textarea vertically',
       defaultValue: false,
     },
+    defaultHeight: {
+      control: { type: 'number', min: 64, step: 8 },
+      description: 'Sets the initial height of the Textarea in pixels',
+    },
   },
   args: {
     placeholder: 'Textarea placeholder',
@@ -90,3 +94,13 @@ export const Resizable: Story = {
     resizable: true,
   },
 };
+
+export const DefaultHeight: Story = {
+  args: {
+    label: 'Notes',
+    helperText: 'Starts taller by default',
+    placeholder: 'Add more detail here...',
+    resizable: true,
+    defaultHeight: 140,
+  },
+};

package/src/components/Textarea/Textarea.tsx

@@ -13,7 +13,7 @@ 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 { useFormFieldAccessibility, useTheme } from '../../hooks';
 import { FormField, useFormFieldContext } from '../FormField';
 import TextareaFieldComponent from './TextareaField';
 import TextareaRoot from './TextareaRoot';
@@ -33,6 +33,7 @@ const Textarea = ({
   validationStatus = 'initial',
   children,
   resizable = false,
+  defaultHeight,
   disabled,
   focused,
   readonly,
@@ -56,9 +57,20 @@ 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 textareaDefaultHeight = defaultHeight ?? DEFAULT_TEXTAREA_HEIGHT;
+  const textareaHeight = useSharedValue(textareaDefaultHeight);
+  const resizeStartHeight = useSharedValue(textareaDefaultHeight);
   const theme = useTheme();
+  const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+    label: textareaLabel,
+    helperText: textareaHelperText,
+    validText: textareaValidText,
+    invalidText: textareaInvalidText,
+    required: textareaRequired,
+    validationStatus: textareaValidationStatus,
+    fallbackLabel: props.accessibilityLabel,
+    fallbackHint: props.accessibilityHint,
+  });
 
   useEffect(() => {
     if (formFieldContext?.setShouldHandleAccessibility) {
@@ -66,36 +78,12 @@ const Textarea = ({
     }
   }, [formFieldContext]);
 
-  const getAccessibilityLabel = () => {
-    let accessibilityLabel = '';
-    if (textareaLabel) {
-      accessibilityLabel = accessibilityLabel + textareaLabel;
-    }
-    if (textareaRequired) {
-      accessibilityLabel = accessibilityLabel + ', required';
-    }
-
-    return accessibilityLabel || props.accessibilityLabel;
-  };
-
-  const getAccessibilityHint = () => {
-    let accessibilityHint = '';
-    if (textareaHelperText) {
-      accessibilityHint = accessibilityHint + textareaHelperText;
-    }
-    if (textareaValidationStatus !== 'initial') {
-      if (accessibilityHint.length > 0) {
-        accessibilityHint = accessibilityHint + ', ';
-      }
-      if (textareaValidationStatus === 'invalid' && textareaInvalidText) {
-        accessibilityHint = accessibilityHint + textareaInvalidText;
-      }
-      if (textareaValidationStatus === 'valid' && textareaValidText) {
-        accessibilityHint = accessibilityHint + textareaValidText;
-      }
+  useEffect(() => {
+    if (!hasMeasuredHeight.current) {
+      textareaHeight.value = textareaDefaultHeight;
+      resizeStartHeight.value = textareaDefaultHeight;
     }
-    return accessibilityHint || props.accessibilityHint;
-  };
+  }, [resizeStartHeight, textareaDefaultHeight, textareaHeight]);
 
   const handleTextareaLayout = (event: LayoutChangeEvent) => {
     if (!hasMeasuredHeight.current) {
@@ -162,8 +150,8 @@ const Textarea = ({
         isDisabled={textareaDisabled}
         isFocused={focused}
         required={textareaRequired}
-        aria-label={getAccessibilityLabel()}
-        accessibilityHint={getAccessibilityHint()}
+        aria-label={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
       >
         {children ? (
           <>{children}</>

package/src/components/VerificationInput/VerificationInput.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { TextInput, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { useFormFieldAccessibility } from '../../hooks';
 import { FormField } from '../FormField';
 import type { VerificationInputHandle, VerificationInputProps } from './VerificationInput.props';
 import { getNextIndexFromValueChange } from './VerificationInput.utils';
@@ -163,29 +164,16 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
     );
 
     const slots = Array.from({ length }, (_, index) => index);
-
-    const getAccessibilityLabel = () => {
-      return label || props.accessibilityLabel;
-    };
-
-    const getAccessibilityHint = () => {
-      let accessibilityHint = '';
-      if (helperText) {
-        accessibilityHint = accessibilityHint + helperText;
-      }
-      if (validationStatus !== 'initial') {
-        if (accessibilityHint.length > 0) {
-          accessibilityHint = accessibilityHint + ', ';
-        }
-        if (validationStatus === 'invalid' && invalidText) {
-          accessibilityHint = accessibilityHint + invalidText;
-        }
-        if (validationStatus === 'valid' && validText) {
-          accessibilityHint = accessibilityHint + validText;
-        }
-      }
-      return accessibilityHint || props.accessibilityHint;
-    };
+    const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+      label,
+      helperText,
+      validText,
+      invalidText,
+      validationStatus,
+      fallbackLabel: props.accessibilityLabel,
+      fallbackHint: props.accessibilityHint,
+      includeRequiredInLabel: false,
+    });
 
     return (
       <FormField
@@ -208,8 +196,8 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
             value={displayValue}
             autoFocus={autoFocus}
             editable={!disabled && !readonly}
-            accessibilityLabel={getAccessibilityLabel()}
-            accessibilityHint={getAccessibilityHint()}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
             accessibilityState={{ disabled: disabled || readonly }}
             importantForAccessibility="yes"
             onChangeText={handleChangeText}

package/src/components/index.ts

@@ -48,11 +48,14 @@ export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
+export * from './Rating';
+export * from './Roundel';
 export * from './SectionHeader';
 export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
+export * from './StepperInput';
 export * from './Switch';
 export * from './Table';
 export * from './Tabs';

package/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export { default as useBreakpointValue } from './useBreakpointValue';
 export { default as useColorMode } from './useColorMode';
+export { default as useFormFieldAccessibility } from './useFormFieldAccessibility';
 export { default as useMedia } from './useMedia';
 export { usePrevious } from './usePrevious';
 export { useStyleProps } from './useStyleProps';

package/src/hooks/useFormFieldAccessibility.test.tsx

@@ -0,0 +1,74 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import useFormFieldAccessibility from './useFormFieldAccessibility';
+
+type HookArgs = Parameters<typeof useFormFieldAccessibility>[0];
+
+const renderHook = (args: HookArgs) => {
+  let result: ReturnType<typeof useFormFieldAccessibility> | undefined;
+
+  const TestComponent = () => {
+    result = useFormFieldAccessibility(args);
+    return null;
+  };
+
+  renderToStaticMarkup(<TestComponent />);
+
+  if (!result) {
+    throw new Error('Hook did not return a result');
+  }
+
+  return result;
+};
+
+describe('useFormFieldAccessibility', () => {
+  it('builds a label from the field label and required state', () => {
+    expect(
+      renderHook({
+        label: 'Email',
+        required: true,
+      })
+    ).toEqual({
+      accessibilityHint: undefined,
+      accessibilityLabel: 'Email, required',
+    });
+  });
+
+  it('builds a hint from helper text and validation feedback', () => {
+    expect(
+      renderHook({
+        helperText: 'Enter the code we sent you',
+        validationStatus: 'invalid',
+        invalidText: 'Code is invalid',
+      })
+    ).toEqual({
+      accessibilityHint: 'Enter the code we sent you, Code is invalid',
+      accessibilityLabel: undefined,
+    });
+  });
+
+  it('falls back to provided accessibility props when no composed value exists', () => {
+    expect(
+      renderHook({
+        fallbackLabel: 'Custom label',
+        fallbackHint: 'Custom hint',
+      })
+    ).toEqual({
+      accessibilityHint: 'Custom hint',
+      accessibilityLabel: 'Custom label',
+    });
+  });
+
+  it('supports omitting the required suffix from the label', () => {
+    expect(
+      renderHook({
+        label: 'Verification code',
+        required: true,
+        includeRequiredInLabel: false,
+      })
+    ).toEqual({
+      accessibilityHint: undefined,
+      accessibilityLabel: 'Verification code',
+    });
+  });
+});

package/src/hooks/useFormFieldAccessibility.ts

@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+
+type ValidationStatus = 'initial' | 'valid' | 'invalid';
+
+type UseFormFieldAccessibilityArgs = {
+  label?: string;
+  helperText?: string;
+  validText?: string;
+  invalidText?: string;
+  required?: boolean;
+  validationStatus?: ValidationStatus;
+  fallbackLabel?: string;
+  fallbackHint?: string;
+  includeRequiredInLabel?: boolean;
+};
+
+const useFormFieldAccessibility = ({
+  label,
+  helperText,
+  validText,
+  invalidText,
+  required = false,
+  validationStatus = 'initial',
+  fallbackLabel,
+  fallbackHint,
+  includeRequiredInLabel = true,
+}: UseFormFieldAccessibilityArgs) => {
+  const accessibilityLabel = useMemo(() => {
+    const nextAccessibilityLabelParts: string[] = [];
+
+    if (label) {
+      nextAccessibilityLabelParts.push(label);
+    }
+
+    if (includeRequiredInLabel && required) {
+      nextAccessibilityLabelParts.push('required');
+    }
+
+    const nextAccessibilityLabel = nextAccessibilityLabelParts.join(', ');
+    return nextAccessibilityLabel || fallbackLabel;
+  }, [fallbackLabel, includeRequiredInLabel, label, required]);
+
+  const accessibilityHint = useMemo(() => {
+    const accessibilityHints: string[] = [];
+
+    if (helperText) {
+      accessibilityHints.push(helperText);
+    }
+
+    if (validationStatus === 'invalid' && invalidText) {
+      accessibilityHints.push(invalidText);
+    }
+
+    if (validationStatus === 'valid' && validText) {
+      accessibilityHints.push(validText);
+    }
+
+    return accessibilityHints.join(', ') || fallbackHint;
+  }, [fallbackHint, helperText, invalidText, validText, validationStatus]);
+
+  return {
+    accessibilityHint,
+    accessibilityLabel,
+  };
+};
+
+export default useFormFieldAccessibility;