@utilitywarehouse/hearth-react-native 0.28.0 → 0.28.1-testid-fix-2

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Platform, View, } from 'react-native';
+import WheelPickerItem from './wheel-picker-item';
+import styles from './wheel-picker.style';
+const WheelPicker = ({ value, options, onChange, selectedIndicatorStyle = {}, containerStyle = {}, itemStyle = {}, itemHeight = 40, scaleFunction = (x) => 1.0 ** x, rotationFunction = (x) => 1 - Math.pow(1 / 2, x), opacityFunction = (x) => Math.pow(1 / 3, x), visibleRest = 2, decelerationRate = 'normal', containerProps = {}, flatListProps = {}, }) => {
+    const momentumStarted = useRef(false);
+    const selectedIndex = options.findIndex(item => item.value === value);
+    const flatListRef = useRef(null);
+    const [scrollY] = useState(new Animated.Value(selectedIndex * itemHeight));
+    const containerHeight = (1 + visibleRest * 2) * itemHeight;
+    const paddedOptions = useMemo(() => {
+        const array = [...options];
+        for (let i = 0; i < visibleRest; i++) {
+            array.unshift(null);
+            array.push(null);
+        }
+        return array;
+    }, [options, visibleRest]);
+    const offsets = useMemo(() => [...Array(paddedOptions.length)].map((_, i) => i * itemHeight), [paddedOptions, itemHeight]);
+    const currentScrollIndex = useMemo(() => Animated.add(Animated.divide(scrollY, itemHeight), visibleRest), [visibleRest, scrollY, itemHeight]);
+    const handleScrollEnd = (event) => {
+        const offsetY = Math.min(itemHeight * (options.length - 1), Math.max(event.nativeEvent.contentOffset.y, 0));
+        let index = Math.floor(offsetY / itemHeight);
+        const remainder = offsetY % itemHeight;
+        if (remainder > itemHeight / 2) {
+            index++;
+        }
+        if (index !== selectedIndex) {
+            onChange(options[index]?.value || 0);
+        }
+    };
+    const handleMomentumScrollBegin = () => {
+        momentumStarted.current = true;
+    };
+    const handleMomentumScrollEnd = (event) => {
+        momentumStarted.current = false;
+        handleScrollEnd(event);
+    };
+    const handleScrollEndDrag = (event) => {
+        // Capture the offset value immediately
+        const offsetY = event.nativeEvent.contentOffset?.y;
+        // We'll start a short timer to see if momentum scroll begins
+        setTimeout(() => {
+            // If momentum scroll hasn't started within the timeout,
+            // then it was a slow scroll that won't trigger momentum
+            if (!momentumStarted.current && offsetY !== undefined) {
+                // Create a synthetic event with just the data we need
+                const syntheticEvent = {
+                    nativeEvent: {
+                        contentOffset: { y: offsetY },
+                    },
+                };
+                handleScrollEnd(syntheticEvent);
+            }
+        }, 50);
+    };
+    useEffect(() => {
+        if (selectedIndex < 0 || selectedIndex >= options.length) {
+            throw new Error(`Selected index ${selectedIndex} is out of bounds [0, ${options.length - 1}]`);
+        }
+    }, [selectedIndex, options]);
+    /**
+     * If selectedIndex is changed from outside (not via onChange) we need to scroll to the specified index.
+     * This ensures that what the user sees as selected in the picker always corresponds to the value state.
+     */
+    useEffect(() => {
+        flatListRef.current?.scrollToIndex({
+            index: selectedIndex,
+            animated: Platform.OS === 'ios',
+        });
+    }, [selectedIndex, itemHeight]);
+    return (_jsxs(View, { style: [styles.container, { height: containerHeight }, containerStyle], ...containerProps, children: [_jsx(View, { style: [
+                    styles.selectedIndicator,
+                    selectedIndicatorStyle,
+                    {
+                        transform: [{ translateY: -itemHeight / 2 }],
+                        height: itemHeight,
+                    },
+                ] }), _jsx(Animated.FlatList, { ...flatListProps, ref: flatListRef, nestedScrollEnabled: true, style: styles.scrollView, showsVerticalScrollIndicator: false, onScroll: Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+                    useNativeDriver: true,
+                }), onScrollEndDrag: handleScrollEndDrag, onMomentumScrollBegin: handleMomentumScrollBegin, onMomentumScrollEnd: handleMomentumScrollEnd, snapToOffsets: offsets, decelerationRate: decelerationRate, initialScrollIndex: selectedIndex, getItemLayout: (_, index) => ({
+                    length: itemHeight,
+                    offset: itemHeight * index,
+                    index,
+                }), data: paddedOptions, keyExtractor: (item, index) => item ? `${item.value}-${item.text}-${index}` : `null-${index}`, renderItem: ({ item: option, index }) => (_jsx(WheelPickerItem, { index: index, option: option, style: itemStyle, height: itemHeight, currentScrollIndex: currentScrollIndex, scaleFunction: scaleFunction, rotationFunction: rotationFunction, opacityFunction: opacityFunction, visibleRest: visibleRest }, `option-${index}`)) })] }));
+};
+export default memo(WheelPicker);

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.style.d.ts

@@ -0,0 +1,23 @@
+declare const _default: {
+    container: {
+        position: "relative";
+    };
+    selectedIndicator: {
+        position: "absolute";
+        width: "100%";
+        top: "50%";
+    };
+    scrollView: {
+        overflow: "hidden";
+        flex: number;
+    };
+    option: {
+        alignItems: "center";
+        justifyContent: "center";
+        paddingHorizontal: number;
+        zIndex: number;
+    };
+} & {
+    useVariants: (variants: never) => void;
+};
+export default _default;

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.style.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native-unistyles';
+export default StyleSheet.create({
+    container: {
+        position: 'relative',
+    },
+    selectedIndicator: {
+        position: 'absolute',
+        width: '100%',
+        top: '50%',
+    },
+    scrollView: {
+        overflow: 'hidden',
+        flex: 1,
+    },
+    option: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 16,
+        zIndex: 100,
+    },
+});

package/build/components/DatePicker/time-picker/wheel-web.d.ts

@@ -0,0 +1,8 @@
+import { PickerOption } from '../DatePicker.props';
+interface WheelProps {
+    value: number | string;
+    setValue?: (value: any) => void;
+    items: PickerOption[];
+}
+declare const _default: import("react").MemoExoticComponent<({ value, setValue, items }: WheelProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/wheel-web.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useRef } from 'react';
+import { Animated, PanResponder, Platform, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isEqual } from '../../../utils';
+import { BodyText } from '../../BodyText';
+import { CONTAINER_HEIGHT } from '../enums';
+import { sin } from './animated-math';
+const ITEM_HEIGHT = 44;
+const WheelWeb = ({ value, setValue = () => { }, items }) => {
+    const displayCount = 5;
+    const translateY = useRef(new Animated.Value(0)).current;
+    const renderCount = displayCount * 2 < items.length ? displayCount * 8 : displayCount * 2 - 1;
+    const circular = items.length >= displayCount;
+    const height = 140;
+    const radius = height / 2;
+    const valueIndex = useMemo(() => {
+        return Math.max(0, items.findIndex(item => item.value === value));
+    }, [items, value]);
+    const panResponder = useMemo(() => {
+        return PanResponder.create({
+            onMoveShouldSetPanResponder: () => true,
+            onStartShouldSetPanResponderCapture: () => true,
+            onPanResponderGrant: () => {
+                translateY.setValue(0);
+            },
+            onPanResponderMove: (evt, gestureState) => {
+                translateY.setValue(gestureState.dy);
+                evt.stopPropagation();
+            },
+            onPanResponderRelease: (_, gestureState) => {
+                translateY.extractOffset();
+                let newValueIndex = valueIndex - Math.round(gestureState.dy / ((radius * 2) / displayCount));
+                if (circular) {
+                    newValueIndex = (newValueIndex + items.length) % items.length;
+                }
+                else {
+                    if (newValueIndex < 0) {
+                        newValueIndex = 0;
+                    }
+                    else if (newValueIndex >= items.length) {
+                        newValueIndex = items.length - 1;
+                    }
+                }
+                const newValue = items[newValueIndex];
+                if (newValue?.value === value) {
+                    translateY.setOffset(0);
+                    translateY.setValue(0);
+                }
+                else if (newValue?.value) {
+                    setValue(newValue.value);
+                }
+                else if (items[0]?.value) {
+                    setValue(items[0].value);
+                }
+            },
+        });
+    }, [circular, displayCount, radius, setValue, value, valueIndex, items, translateY]);
+    const displayValues = useMemo(() => {
+        const centerIndex = Math.floor(renderCount / 2);
+        return Array.from({ length: renderCount }, (_, index) => {
+            let targetIndex = valueIndex + index - centerIndex;
+            if (circular) {
+                targetIndex = ((targetIndex % items.length) + items.length) % items.length;
+            }
+            else {
+                targetIndex = Math.max(0, Math.min(targetIndex, items.length - 1));
+            }
+            return items[targetIndex] || items[0];
+        });
+    }, [renderCount, valueIndex, items, circular]);
+    const animatedAngles = useMemo(() => {
+        //translateY.setValue(0);
+        translateY.setOffset(0);
+        const currentIndex = displayValues.findIndex(item => item?.value === value);
+        return displayValues && displayValues.length > 0
+            ? displayValues.map((_, index) => translateY
+                .interpolate({
+                inputRange: [-radius, radius],
+                outputRange: [
+                    -radius + ((radius * 2) / displayCount) * (index - currentIndex),
+                    radius + ((radius * 2) / displayCount) * (index - currentIndex),
+                ],
+                extrapolate: 'extend',
+            })
+                .interpolate({
+                inputRange: [-radius, radius],
+                outputRange: [-Math.PI / 2, Math.PI / 2],
+                extrapolate: 'clamp',
+            }))
+            : [];
+    }, [displayValues, radius, value, displayCount, translateY]);
+    return (_jsxs(View, { style: [styles.container], ...panResponder.panHandlers, children: [_jsx(View, { style: [
+                    styles.selectedIndicator,
+                    {
+                        transform: [{ translateY: -ITEM_HEIGHT / 2 }],
+                        height: ITEM_HEIGHT,
+                    },
+                ] }), displayValues?.map((displayValue, index) => {
+                const animatedAngle = animatedAngles[index];
+                return (_jsx(Animated.View, { style: {
+                        position: 'absolute',
+                        height: ITEM_HEIGHT - 10,
+                        transform: animatedAngle
+                            ? [
+                                {
+                                    translateY: Animated.multiply(radius, sin(animatedAngle)),
+                                },
+                                {
+                                    rotateX: animatedAngle.interpolate({
+                                        inputRange: [-Math.PI / 2, Math.PI / 2],
+                                        outputRange: ['-89deg', '89deg'],
+                                        extrapolate: 'clamp',
+                                    }),
+                                },
+                            ]
+                            : [],
+                        opacity: displayValue?.value !== value ? 0.3 : 1,
+                    }, children: _jsx(BodyText, { children: displayValue?.text }) }, `${displayValue?.text}-${index}`));
+            })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        minWidth: 30,
+        overflow: 'hidden',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: CONTAINER_HEIGHT / 2,
+        ...Platform.select({
+            web: {
+                cursor: 'pointer',
+                userSelect: 'none',
+            },
+        }),
+    },
+    selectedIndicator: {
+        position: 'absolute',
+        width: '100%',
+        top: '50%',
+    },
+});
+const customComparator = (prev, next) => {
+    const areEqual = prev.value === next.value && prev.setValue === next.setValue && isEqual(prev.items, next.items);
+    return areEqual;
+};
+export default memo(WheelWeb, customComparator);

package/build/components/DatePicker/time-picker/wheel.d.ts

@@ -0,0 +1,8 @@
+import { PickerOption } from '../DatePicker.props';
+type WheelProps = {
+    value: number | string;
+    setValue?: (value: any) => void;
+    items: PickerOption[];
+};
+declare const _default: import("react").MemoExoticComponent<(props: WheelProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/wheel.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Platform } from 'react-native';
+import WheelNative from './wheel-native';
+import WheelWeb from './wheel-web';
+const Wheel = (props) => {
+    const Component = Platform.OS === 'web' ? WheelWeb : WheelNative;
+    return _jsx(Component, { ...props });
+};
+export default memo(Wheel);

package/build/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import SelectProps from './Select.props';
 declare const Select: {
-    ({ options, value, onValueChange, label, labelVariant, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, helperText, helperIcon, invalidText, validText, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
+    ({ options, value, onValueChange, label, labelVariant, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, helperText, helperIcon, invalidText, validText, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, testID, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Select;

package/build/components/Select/Select.js

@@ -12,7 +12,7 @@ import { Input } from '../Input';
 import { SelectContext } from './Select.context';
 import SelectOption from './SelectOption';
 import { SafeAreaView } from '../SafeAreaView';
-const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', ...rest }) => {
+const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', testID, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
     const isRequired = formFieldContext?.required ?? required;
@@ -65,9 +65,9 @@ const Select = ({ options = [], value, onValueChange, label, labelVariant = 'bod
         setIsOpen(false);
         setSearch('');
     }, []);
-    const renderSelectOption = useCallback(({ item }) => (_jsx(SelectOption, { label: item.label, value: item.value, disabled: item.disabled, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon })), []);
+    const renderSelectOption = useCallback(({ item }) => (_jsx(SelectOption, { label: item.label, value: item.value, disabled: item.disabled, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon, testID: testID ? `${testID}-option-${item.label}` : undefined })), [testID]);
     const renderEmptyComponent = useCallback(() => (_jsx(BottomSheetView, { style: styles.emptyContainer, children: _jsx(DetailText, { children: emptyText }) })), [emptyText]);
-    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatusFromContext, required: isRequired, disabled: isDisabled, readonly: isReadonly, invalidText: invalidText, validText: validText, children: _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, style: ({ pressed }) => [
+    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatusFromContext, required: isRequired, disabled: isDisabled, readonly: isReadonly, invalidText: invalidText, validText: validText, children: _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, testID: testID, style: ({ pressed }) => [
                         styles.selectContainer,
                         styles.pressedContainer(pressed || isOpen),
                     ], children: [!!LeadingIcon && (_jsx(View, { children: (() => {
@@ -77,7 +77,7 @@ const Select = ({ options = [], value, onValueChange, label, labelVariant = 'bod
                         selectedValue: value,
                         onValueChange,
                         close: closeBottomSheet,
-                    }, children: _jsxs(SafeAreaView, { edges: ['top'], style: { flex: 1 }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search" }) })), children ? (_jsx(BottomSheetScrollView, { children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) }) })] }));
+                    }, children: _jsxs(SafeAreaView, { edges: ['top'], style: { flex: 1 }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", testID: testID ? `${testID}-search` : undefined }) })), children ? (_jsx(BottomSheetScrollView, { testID: testID ? `${testID}-options` : undefined, children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, testID: testID ? `${testID}-options` : undefined, ...listProps }))] }) }) })] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

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

@@ -148,5 +148,9 @@ export interface SelectOptionProps {
      * Callback when this option is selected
      */
     onPress?: (value: string) => void;
+    /**
+     * Test ID for testing
+     */
+    testID?: string;
 }
 export default SelectProps;

package/build/components/Select/SelectOption.d.ts

@@ -1,6 +1,6 @@
 import { SelectOptionProps } from './Select.props';
 declare const SelectOption: {
-    ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, }: SelectOptionProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, testID, }: SelectOptionProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default SelectOption;

package/build/components/Select/SelectOption.js

@@ -5,7 +5,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Icon } from '../Icon';
 import { useSelectContext } from './Select.context';
-const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, }) => {
+const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, testID, }) => {
     const { selectedValue, onValueChange, close } = useSelectContext();
     const isSelected = selected !== undefined ? selected : selectedValue === value;
     styles.useVariants({ disabled });
@@ -22,7 +22,7 @@ const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: Right
             close();
         }
     };
-    return (_jsxs(Pressable, { onPress: handlePress, disabled: disabled, style: ({ pressed }) => [styles.container, pressed && styles.pressed], children: [!!LeftIcon && (_jsx(View, { children: _jsx(Icon, { as: LeftIcon, style: styles.icon }) })), _jsx(View, { style: styles.labelContainer, children: _jsx(BodyText, { children: label }) }), isSelected && (_jsx(View, { children: _jsx(Icon, { as: TickSmallIcon, style: styles.icon }) })), !!RightIcon && !isSelected && (_jsx(View, { children: _jsx(Icon, { as: RightIcon, style: styles.icon }) }))] }));
+    return (_jsxs(Pressable, { onPress: handlePress, disabled: disabled, testID: testID, style: ({ pressed }) => [styles.container, pressed && styles.pressed], children: [!!LeftIcon && (_jsx(View, { children: _jsx(Icon, { as: LeftIcon, style: styles.icon }) })), _jsx(View, { style: styles.labelContainer, children: _jsx(BodyText, { children: label }) }), isSelected && (_jsx(View, { children: _jsx(Icon, { as: TickSmallIcon, style: styles.icon }) })), !!RightIcon && !isSelected && (_jsx(View, { children: _jsx(Icon, { as: RightIcon, style: styles.icon }) }))] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

package/build/components/VerificationInput/VerificationInput.js

@@ -5,7 +5,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { FormField } from '../FormField';
 import { getNextIndexFromValueChange } from './VerificationInput.utils';
 import { VerificationInputSlot } from './VerificationInputSlot';
-const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVariant = 'body', helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, autoFocus = false, style, ...props }, ref) => {
+const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVariant = 'body', helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled = false, readonly = false, secureTextEntry = false, autoFocus = false, style, testID, ...props }, ref) => {
     const length = 6;
     const inputRef = useRef(null);
     const latestValueRef = useRef(value);
@@ -160,7 +160,7 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
                         latestSelectionRef.current = nextSelection;
                         setSelection(nextSelection);
                         setFocusedIndex(Math.min(nextSelection.start, length - 1));
-                    }, onFocus: handleFocus, onBlur: handleBlur, selection: selection, keyboardType: "number-pad", textContentType: "oneTimeCode", autoComplete: "sms-otp", secureTextEntry: secureTextEntry, maxLength: length, caretHidden: true, style: styles.hiddenInput }), slots.map(index => {
+                    }, onFocus: handleFocus, onBlur: handleBlur, selection: selection, keyboardType: "number-pad", textContentType: "oneTimeCode", autoComplete: "sms-otp", secureTextEntry: secureTextEntry, maxLength: length, caretHidden: true, style: styles.hiddenInput, testID: testID }), slots.map(index => {
                     const char = displayValue[index] || '';
                     const isActive = focusedIndex === index;
                     const displayChar = secureTextEntry && char ? '*' : char;
@@ -168,7 +168,7 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
                             pendingFocusIndexRef.current = index;
                             inputRef.current?.focus();
                             setSelectionIndex(index);
-                        } }, index));
+                        }, testID: testID ? `${testID}-${index}` : undefined }, index));
                 })] }) }));
 });
 const styles = StyleSheet.create(theme => ({

package/docs/all-components.mdx

@@ -12,8 +12,8 @@ This page showcases all the components available in the Hearth React Native libr
 <AllComponents />
 
 <NextPrevPage
-  prevLink="/?path=/docs/layout-components--docs"
+  prevLink="layout-components"
   prevTitle="Layout Components"
-  nextLink="/?path=/docs/components-accordion--docs"
+  nextLink="components-accordion"
   nextTitle="Accordion"
 />

package/docs/changelog.mdx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/addon-docs/blocks';
-import { BackToTopButton } from './components';
+import { BackToTopButton, NextPrevPage } from './components';
 
 <Meta title="Changelog" />
 <BackToTopButton />
@@ -9,6 +9,176 @@ import { BackToTopButton } from './components';
 The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
 
 
+## 0.28.1
+
+### Patch Changes
+
+- [#1018](https://github.com/utilitywarehouse/hearth/pull/1018) [`1c5e02e`](https://github.com/utilitywarehouse/hearth/commit/1c5e02ea4b61329e7c55e52f9aa4ae44abc0da23) Thanks [@fillyD](https://github.com/fillyD)! - 🐛 [FIX]: Adds missing `testID` to `Select`, `SelectOption` and `VerificationInput` component
+
+## 0.28.0
+
+### Minor Changes
+
+- [#1014](https://github.com/utilitywarehouse/hearth/pull/1014) [`c10ff82`](https://github.com/utilitywarehouse/hearth/commit/c10ff82243265217acd95f687d48d803b3c7a4bd) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `Combobox` and `SafeAreaView` to the React Native library
+
+  The React Native package now includes a `Combobox` component for searchable selection in a bottom sheet, plus a `SafeAreaView` primitive that applies Unistyles runtime insets only when a view actually overlaps a screen edge. `Combobox` supports the built-in options API for fixed lists, controlled search values for dynamic results, and custom bottom sheet content for cases where you need to bring your own `BottomSheetFlatList` or bespoke option layout. `Modal` now uses `SafeAreaView` in its full-screen navigation modal path so content like search inputs no longer sits behind the dynamic island on iOS.
+
+  **Components affected**:
+  - `Combobox`
+  - `ComboboxOption`
+  - `SafeAreaView`
+  - `Modal`
+
+  **Developer changes**:
+
+  Import the new components from `@utilitywarehouse/hearth-react-native` and choose the API that fits your layout. Use `options` for straightforward searchable lists, render custom sheet content when you need virtualised or dynamic results, and wrap full-screen content in `SafeAreaView` when it should only pick up edge insets if it actually touches that edge.
+
+- [`8e37595`](https://github.com/utilitywarehouse/hearth/commit/8e375958559357ce5c1703505fa7438887d9e18e) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `Pagination` component
+
+  The package now includes a `Pagination` component for moving between pages of content. It supports numbered pagination, a condensed layout for smaller spaces, optional skip buttons for jumping to the first and last page, and controlled page state so it can be wired into lists, tables, or other paged views.
+
+  **Components affected**:
+  - `Pagination`
+
+  **Developer changes**:
+
+  Import `Pagination` from `@utilitywarehouse/hearth-react-native` and control the current page in your screen or feature state.
+
+  ```tsx
+  import { useState } from 'react';
+  import { Pagination } from '@utilitywarehouse/hearth-react-native';
+
+  const MyComponent = () => {
+    const [page, setPage] = useState(1);
+
+    return <Pagination currentPage={page} onPageChange={setPage} totalPages={10} />;
+  };
+  ```
+
+- [`8e37595`](https://github.com/utilitywarehouse/hearth/commit/8e375958559357ce5c1703505fa7438887d9e18e) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `Table` component
+
+  The package now includes a composable `Table` API for presenting structured data with headers, rows, cells, optional card-style containers, horizontal scrolling for narrow viewports, configurable column widths, and pagination support through `TablePagination`. Header cells support trailing actions such as sort controls, and the API is split into smaller building blocks so layouts can be assembled to fit different datasets.
+
+  **Components affected**:
+  - `Table`
+  - `TableHeader`
+  - `TableHeaderCell`
+  - `TableBody`
+  - `TableRow`
+  - `TableCell`
+  - `TablePagination`
+
+  **Developer changes**:
+
+  Import the table primitives from `@utilitywarehouse/hearth-react-native` and compose them to match your data shape. Add `columnWidths` when you need fixed or weighted columns, and pass `pagination` when rows should be paged.
+
+  ```tsx
+  import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableHeaderCell,
+    TableRow,
+  } from '@utilitywarehouse/hearth-react-native';
+
+  const MyComponent = () => (
+    <Table columnWidths={[180, '2fr', '1fr']} container="subtle">
+      <TableHeader color="purple">
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Email</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableHeaderCell row>Alex Morgan</TableHeaderCell>
+          <TableCell>alex@example.com</TableCell>
+          <TableCell>Active</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+  ```
+
+- [#1016](https://github.com/utilitywarehouse/hearth/pull/1016) [`33baa9e`](https://github.com/utilitywarehouse/hearth/commit/33baa9e8edb091bbd1d17c9a3838352a7f1b87ea) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Adds `Timeline` and `TimelineItem`
+
+  The package now includes `Timeline` and `TimelineItem` components for showing a sequence of static stops or progress steps. The new API supports labelled items, optional helper text, progress states for complete or active steps, and custom content within an item when you need to show extra context or actions.
+
+  **Components affected**:
+  - `Timeline`
+  - `TimelineItem`
+
+  **Developer changes**:
+
+  Import `Timeline` and `TimelineItem` from `@utilitywarehouse/hearth-react-native`. Use `variant="static"` for simple ordered events, or `variant="progress"` with item `state` values to communicate step progress.
+
+  ```tsx
+  import { Timeline, TimelineItem } from '@utilitywarehouse/hearth-react-native';
+
+  const MyComponent = () => (
+    <Timeline variant="progress">
+      <TimelineItem label="Ordered" helperText="We have received your order" state="complete" />
+      <TimelineItem label="Packed" helperText="Your items are ready" state="complete" />
+      <TimelineItem label="Out for delivery" helperText="Arriving today" state="active" />
+      <TimelineItem label="Delivered" helperText="Pending" state="incomplete" />
+    </Timeline>
+  );
+  ```
+
+## 0.27.3
+
+### Patch Changes
+
+- [#1006](https://github.com/utilitywarehouse/hearth/pull/1006) [`1996112`](https://github.com/utilitywarehouse/hearth/commit/1996112864146e86972ef6b9b07a8be5a72b552f) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Make `paddingNone` remove horizontal padding for ghost buttons in `md` size
+
+  Fixed an issue where setting `paddingNone` on a ghost button did not remove horizontal padding when using `md` size. The prop now removes horizontal padding for both `sm` and `md` ghost buttons.
+
+  **Components affected**:
+  - `Button`
+
+  **Developer changes**:
+
+  No changes required.
+
+- [#1012](https://github.com/utilitywarehouse/hearth/pull/1012) [`4fda116`](https://github.com/utilitywarehouse/hearth/commit/4fda116c2a1bec383df7e630180ab57166ab9da4) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Prevent outlines from being clipped for scrollable children in `Modal`
+
+  Fixed an issue in in-nav modals where child components with outlines could be visually clipped at the horizontal edges when content was scrollable.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes required.
+
+- [#1012](https://github.com/utilitywarehouse/hearth/pull/1012) [`4fda116`](https://github.com/utilitywarehouse/hearth/commit/4fda116c2a1bec383df7e630180ab57166ab9da4) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Update horizontal padding values for scrollable in-nav `Modal` content
+
+  Adjusted horizontal padding behaviour in scrollable in-nav modals to preserve child outlines while keeping visual spacing consistent.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes required.
+
+- [#1009](https://github.com/utilitywarehouse/hearth/pull/1009) [`3d65ef2`](https://github.com/utilitywarehouse/hearth/commit/3d65ef2f8f7701b128a9c679f1910cd3d0f5c0c3) Thanks [@fillyD](https://github.com/fillyD)! - 🐛 [FIX]: testID for `List` component
+
+## 0.27.2
+
+### Patch Changes
+
+- [#1003](https://github.com/utilitywarehouse/hearth/pull/1003) [`cdb95ea`](https://github.com/utilitywarehouse/hearth/commit/cdb95eabb279adaf348487ae3fb4a20e600e039e) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Correct `VerificationInput` focus progression after editing an empty slot
+
+  Fixed an issue where entering a value after selecting an empty verification slot could move focus to the wrong slot. Focus now moves to the slot immediately after the one that was actually updated.
+
+  **Components affected**:
+  - `VerificationInput`
+
+  **Developer changes**:
+
+  No changes required.
+
 ## 0.27.1
 
 ### Patch Changes
@@ -1255,3 +1425,10 @@ The changelog for the Hearth React Native library. Here you can find all the cha
 
 - [`f6366c4`](https://github.com/utilitywarehouse/hearth/commit/f6366c4da2676c535dca90be570d6e6bae5a0349) Thanks [@jordmccord](https://github.com/jordmccord)! - Initial Release 🎉
 
+
+<NextPrevPage
+  prevLink="getting-started"
+  prevTitle="Getting Started"
+  nextLink="styling"
+  nextTitle="Styling"
+/>