@utilitywarehouse/hearth-react-native 0.27.1 → 0.27.2-testid-fix-1

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/List/List.js

@@ -6,7 +6,7 @@ import { Card } from '../Card';
 import { SectionHeader } from '../SectionHeader';
 import { ListContext } from './List.context';
 const List = ({ children, heading, helperText, headerTrailingContent, invalidText, ...props }) => {
-    const { loading, disabled, container = 'none' } = props;
+    const { loading, disabled, container = 'none', testID, style, ...rest } = props;
     const orderRef = useRef([]);
     const [firstItemId, setFirstItemId] = useState(undefined);
     const containerToCard = {
@@ -35,7 +35,7 @@ const List = ({ children, heading, helperText, headerTrailingContent, invalidTex
         registerItem,
     };
     styles.useVariants({ disabled });
-    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, container === 'none' ? (_jsx(View, { children: children })) : (React.Children.count(children) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: children }) })))] }) }));
+    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...rest, style: [styles.container, style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, container === 'none' ? (_jsx(View, { testID: testID, children: children })) : (React.Children.count(children) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, testID: testID, children: _jsx(_Fragment, { children: children }) })))] }) }));
 };
 List.displayName = 'List';
 const styles = StyleSheet.create(theme => ({

package/build/components/Modal/Modal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { BottomSheetFooter, } from '@gorhom/bottom-sheet';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { AccessibilityInfo, Dimensions, Platform, ScrollView, View, findNodeHandle } from 'react-native';
+import { AccessibilityInfo, Dimensions, Platform, ScrollView, View, findNodeHandle, } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
@@ -120,7 +120,12 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     });
     const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: isBrandBackground && inNavModal, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: isBrandBackground && inNavModal, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
     const InNavModalContainer = scrollable ? ScrollView : View;
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal && (_jsxs(InNavModalContainer, { style: { flex: stickyFooter ? 1 : 0 }, children: [children, !stickyFooter ? _jsx(View, { style: styles.inNavModalFooterContainer, children: footer }) : null] })), !inNavModal && children, ((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons ? footer : null] })) }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal && (_jsxs(InNavModalContainer, { style: {
+                        flex: stickyFooter ? 1 : 0,
+                        ...(scrollable ? { marginHorizontal: -1 } : {}),
+                    }, ...(scrollable ? { contentContainerStyle: { paddingHorizontal: 1 } } : {}), children: [children, !stickyFooter ? (_jsx(View, { style: styles.inNavModalFooterContainer, children: footer })) : null] })), !inNavModal && children, ((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons
+                    ? footer
+                    : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,
@@ -129,7 +134,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         primaryButtonProps,
         secondaryButtonProps,
     ]);
-    return inNavModal ? (_jsxs(View, { onLayout: (e) => {
+    return inNavModal ? (_jsxs(View, { onLayout: e => {
             setInNavModalHeight(e.nativeEvent.layout.height);
         }, style: {
             flex: 1,
@@ -240,7 +245,7 @@ const styles = StyleSheet.create((theme, rt) => ({
         borderTopLeftRadius: theme.components.modal.borderRadius,
         borderTopRightRadius: theme.components.modal.borderRadius,
         backgroundColor: theme.color.surface.neutral.strong,
-        paddingBottom: theme.components.modal.padding + rt.insets.bottom,
+        paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
         variants: {
             background: {
                 primary: {},
@@ -250,22 +255,22 @@ const styles = StyleSheet.create((theme, rt) => ({
             },
             fullscreen: {
                 true: {
-                    padding: theme.components.modal.padding,
+                    padding: theme.components.bottomSheet.padding,
                     paddingTop: rt.insets.top,
                 },
                 false: {
-                    padding: theme.components.modal.padding,
-                }
-            }
+                    padding: theme.components.bottomSheet.padding,
+                },
+            },
         },
     },
     inNavModalFooterContainer: {
-        paddingTop: theme.components.modal.padding,
+        paddingTop: theme.components.bottomSheet.padding,
     },
     androidContainer: {
         height: rt.insets.top + 18,
-        paddingLeft: theme.components.modal.padding,
-        paddingRight: theme.components.modal.padding,
+        paddingLeft: theme.components.bottomSheet.padding,
+        paddingRight: theme.components.bottomSheet.padding,
         justifyContent: 'flex-end',
     },
     pretendContent: {

package/build/components/SegmentedControl/SegmentedControl.js

@@ -153,7 +153,7 @@ const SegmentedControl = ({ value: controlledValue, defaultValue, onValueChange,
         size,
         registerOptionLayout,
     }), [currentValue, select, disabled, size, registerOptionLayout]);
-    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsxs(View, { accessibilityRole: "radiogroup", accessibilityState: { disabled }, style: [styles.container, computedStyles, style], ...remainingProps, children: [hasIndicator ? (_jsx(Indicator, { pointerEvents: "none", style: [styles.indicator, indicatorStyle] })) : null, children] }) }));
+    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsxs(View, { accessibilityRole: "radiogroup", accessibilityState: { disabled }, style: [styles.container, computedStyles, style], ...remainingProps, children: [hasIndicator ? (_jsx(Indicator, { style: [styles.indicator, styles.pointerEventsNone, indicatorStyle] })) : null, children] }) }));
 };
 SegmentedControl.displayName = 'SegmentedControl';
 const styles = StyleSheet.create(theme => ({
@@ -192,5 +192,8 @@ const styles = StyleSheet.create(theme => ({
         borderRadius: theme.components.segmentedControl.borderRadius,
         backgroundColor: theme.color.interactive.brand.surface.strong.default,
     },
+    pointerEventsNone: {
+        pointerEvents: 'none',
+    },
 }));
 export default SegmentedControl;

package/build/components/SegmentedControl/SegmentedControlOption.js

@@ -36,7 +36,7 @@ const SegmentedControlOptionRoot = ({ value, children, icon, accessibilityLabel,
     const accessibleLabel = typeof children === 'string' || typeof children === 'number' ? String(children) : value;
     return (_jsx(Pressable, { ...props, accessibilityRole: "radio", accessibilityState: { checked: selected, disabled: isDisabled }, accessibilityLabel: accessibilityLabel ?? accessibleLabel, onPress: onPress, onLayout: e => registerOptionLayout(value, e.nativeEvent.layout), disabled: isDisabled, style: [styles.option, style], ...(Platform.OS === 'web'
             ? { 'aria-label': accessibilityLabel ?? accessibleLabel }
-            : null), children: _jsxs(View, { style: styles.contentWrap, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: [icon ? _jsx(Icon, { as: icon, size: "sm", style: styles.icon }) : null, _jsxs(View, { style: styles.labelWrap, children: [_jsx(BodyText, { size: "md", weight: "semibold", style: styles.labelSizer, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: children }), _jsx(AnimatedView, { pointerEvents: "none", style: [styles.textLayer, regularLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "regular", style: styles.textRegular, children: children }) }), _jsx(AnimatedView, { pointerEvents: "none", style: [styles.textLayer, selectedLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "semibold", style: styles.textSelected, children: children }) })] })] }) }));
+            : null), children: _jsxs(View, { style: styles.contentWrap, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: [icon ? _jsx(Icon, { as: icon, size: "sm", style: styles.icon }) : null, _jsxs(View, { style: styles.labelWrap, children: [_jsx(BodyText, { size: "md", weight: "semibold", style: styles.labelSizer, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: children }), _jsx(AnimatedView, { style: [styles.textLayer, styles.pointerEventsNone, regularLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "regular", style: styles.textRegular, children: children }) }), _jsx(AnimatedView, { style: [styles.textLayer, styles.pointerEventsNone, selectedLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "semibold", style: styles.textSelected, children: children }) })] })] }) }));
 };
 const SegmentedControlOption = createPressable({ Root: SegmentedControlOptionRoot });
 SegmentedControlOption.displayName = 'SegmentedControlOption';
@@ -112,6 +112,9 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'center',
         justifyContent: 'center',
     },
+    pointerEventsNone: {
+        pointerEvents: 'none',
+    },
     icon: {
         variants: {
             selected: {

package/build/components/TimePicker/TimePickerWheel.js

@@ -26,7 +26,12 @@ const TimePickerWheel = ({ value, setValue = () => { }, items }) => {
             setValue(item.value);
         }
     }, [setValue, value]);
-    const renderOverlay = useCallback(() => (_jsxs(View, { style: [styles.overlayContainer], pointerEvents: "none", children: [_jsx(View, { pointerEvents: "none", style: [styles.fadeOverlay, { height: fadeHeight }], children: _jsxs(Svg, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [_jsx(Defs, { children: _jsxs(LinearGradient, { id: `${gradientId}-top`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx(Stop, { offset: "0", stopColor: theme.color.background.secondary, stopOpacity: 1 }), _jsx(Stop, { offset: "1", stopColor: theme.color.background.secondary, stopOpacity: 0 })] }) }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientId}-top)` })] }) }), _jsx(View, { pointerEvents: "none", style: [styles.fadeOverlay, styles.fadeOverlayBottom, { height: fadeHeight }], children: _jsxs(Svg, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [_jsx(Defs, { children: _jsxs(LinearGradient, { id: `${gradientId}-bottom`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx(Stop, { offset: "0", stopColor: theme.color.background.secondary, stopOpacity: 0 }), _jsx(Stop, { offset: "1", stopColor: theme.color.background.secondary, stopOpacity: 1 })] }) }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientId}-bottom)` })] }) })] })), [fadeHeight, gradientId, theme.color.background.secondary]);
+    const renderOverlay = useCallback(() => (_jsxs(View, { style: [styles.overlayContainer, styles.pointerEventsNone], children: [_jsx(View, { style: [styles.fadeOverlay, styles.pointerEventsNone, { height: fadeHeight }], children: _jsxs(Svg, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [_jsx(Defs, { children: _jsxs(LinearGradient, { id: `${gradientId}-top`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx(Stop, { offset: "0", stopColor: theme.color.background.secondary, stopOpacity: 1 }), _jsx(Stop, { offset: "1", stopColor: theme.color.background.secondary, stopOpacity: 0 })] }) }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientId}-top)` })] }) }), _jsx(View, { style: [
+                    styles.fadeOverlay,
+                    styles.fadeOverlayBottom,
+                    styles.pointerEventsNone,
+                    { height: fadeHeight },
+                ], children: _jsxs(Svg, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [_jsx(Defs, { children: _jsxs(LinearGradient, { id: `${gradientId}-bottom`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx(Stop, { offset: "0", stopColor: theme.color.background.secondary, stopOpacity: 0 }), _jsx(Stop, { offset: "1", stopColor: theme.color.background.secondary, stopOpacity: 1 })] }) }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientId}-bottom)` })] }) })] })), [fadeHeight, gradientId, theme.color.background.secondary]);
     const renderItem = useCallback(({ item }) => (_jsx(View, { style: styles.indicator, children: _jsx(BodyText, { size: "lg", children: item.label }) })), []);
     return (_jsxs(View, { style: [styles.container, { height: pickerHeight }], children: [_jsx(View, { style: styles.overlayContainer, children: _jsx(View, { style: [styles.selection] }) }), _jsx(WheelPicker, { data: data, value: value, onValueChanged: handleValueChanged, itemHeight: ITEM_HEIGHT, visibleItemCount: displayCount, width: theme.components.timePicker.time.item.width, renderItem: renderItem, renderOverlay: renderOverlay })] }));
 };
@@ -74,5 +79,8 @@ const styles = StyleSheet.create(theme => ({
         top: undefined,
         bottom: 0,
     },
+    pointerEventsNone: {
+        pointerEvents: 'none',
+    },
 }));
 export default TimePickerWheel;

package/build/components/Toast/Toast.context.js

@@ -63,7 +63,7 @@ export const ToastProvider = ({ children, safeAreaPadding = true, }) => {
             timers.current = {};
         };
     }, []);
-    return (_jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, _jsx(View, { pointerEvents: "box-none", style: styles.container, children: _jsx(View, { style: styles.stack, children: toasts.map(t => (_jsx(ToastItem, { ref: el => {
+    return (_jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, _jsx(View, { style: styles.container, children: _jsx(View, { style: styles.stack, children: toasts.map(t => (_jsx(ToastItem, { ref: el => {
                             toastRefs.current[t.id] = el;
                         }, toast: t, onClose: removeToast }, t.id))) }) })] }));
 };

package/build/components/VerificationInput/VerificationInput.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Platform, TextInput, View } from 'react-native';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { TextInput, View } from 'react-native';
 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);
@@ -26,12 +27,12 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
             setSelection(nextSelection);
         }
     }, [length, value]);
-    const updateValue = (nextValue) => {
+    const updateValue = useCallback((nextValue) => {
         const trimmedValue = nextValue.slice(0, length);
         latestValueRef.current = trimmedValue;
         setDisplayValue(trimmedValue);
         onChangeText?.(trimmedValue);
-    };
+    }, [length, onChangeText]);
     const setSelectionIndex = (index) => {
         const clampedIndex = Math.max(0, Math.min(index, length));
         const hasChar = !!latestValueRef.current[clampedIndex];
@@ -50,15 +51,6 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
         setSelection(nextSelection);
         setFocusedIndex(Math.min(clampedIndex, length - 1));
     };
-    const findDiffIndex = (prevValue, nextValue) => {
-        const minLength = Math.min(prevValue.length, nextValue.length);
-        for (let i = 0; i < minLength; i += 1) {
-            if (prevValue[i] !== nextValue[i]) {
-                return i;
-            }
-        }
-        return minLength;
-    };
     const handleChangeText = (text) => {
         const prevValue = latestValueRef.current;
         const nextValue = text.slice(0, length);
@@ -67,11 +59,7 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
         const diff = nextLength - prevLength;
         const isBulkInsert = text.length > 1 && diff > 1;
         const shouldBlur = nextLength >= length;
-        let nextIndex = Math.max(0, Math.min(latestSelectionRef.current.start + (diff >= 0 ? 1 : diff), length));
-        if (Platform.OS === 'android') {
-            const editedIndex = findDiffIndex(prevValue, nextValue);
-            nextIndex = diff >= 0 ? Math.min(editedIndex + 1, length) : Math.max(editedIndex, 0);
-        }
+        const nextIndex = getNextIndexFromValueChange({ prevValue, nextValue, length });
         updateValue(nextValue);
         if (isBulkInsert) {
             setCaretIndex(Math.min(nextLength, length));
@@ -135,7 +123,7 @@ const VerificationInput = forwardRef(({ value = '', onChangeText, label, labelVa
                 setSelectionIndex(index);
             }
         },
-    }), [length, onChangeText]);
+    }), [length, updateValue]);
     const slots = Array.from({ length }, (_, index) => index);
     const getAccessibilityLabel = () => {
         return label || props.accessibilityLabel;
@@ -172,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, pointerEvents: "none" }), 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;
@@ -199,11 +187,12 @@ const styles = StyleSheet.create(theme => ({
         position: 'absolute',
         width: '100%',
         height: '100%',
+        pointerEvents: 'none',
         left: 0,
         top: 0,
         color: 'transparent',
         fontSize: 1,
-        opacity: 0.1,
+        opacity: 0.01,
     },
 }));
 VerificationInput.displayName = 'VerificationInput';

package/build/components/VerificationInput/VerificationInput.utils.d.ts

@@ -0,0 +1,8 @@
+interface GetNextIndexFromValueChangeOptions {
+    prevValue: string;
+    nextValue: string;
+    length: number;
+}
+export declare const findDiffIndex: (prevValue: string, nextValue: string) => number;
+export declare const getNextIndexFromValueChange: ({ prevValue, nextValue, length, }: GetNextIndexFromValueChangeOptions) => number;
+export {};

package/build/components/VerificationInput/VerificationInput.utils.js

@@ -0,0 +1,17 @@
+export const findDiffIndex = (prevValue, nextValue) => {
+    const minLength = Math.min(prevValue.length, nextValue.length);
+    for (let i = 0; i < minLength; i += 1) {
+        if (prevValue[i] !== nextValue[i]) {
+            return i;
+        }
+    }
+    return minLength;
+};
+export const getNextIndexFromValueChange = ({ prevValue, nextValue, length, }) => {
+    const diff = nextValue.length - prevValue.length;
+    const editedIndex = findDiffIndex(prevValue, nextValue);
+    if (diff >= 0) {
+        return Math.min(editedIndex + 1, length);
+    }
+    return Math.max(editedIndex, 0);
+};

package/build/components/VerificationInput/VerificationInput.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/components/VerificationInput/VerificationInput.utils.test.js

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { findDiffIndex, getNextIndexFromValueChange } from './VerificationInput.utils';
+describe('findDiffIndex', () => {
+    it('returns first differing index', () => {
+        expect(findDiffIndex('12', '19')).toBe(1);
+    });
+    it('returns previous length when next appends', () => {
+        expect(findDiffIndex('12', '123')).toBe(2);
+    });
+    it('returns next length when next shortens with same prefix', () => {
+        expect(findDiffIndex('123', '12')).toBe(2);
+    });
+});
+describe('getNextIndexFromValueChange', () => {
+    it('moves to the slot after the one that changed when inserting in an empty later slot', () => {
+        expect(getNextIndexFromValueChange({
+            prevValue: '12',
+            nextValue: '123',
+            length: 6,
+        })).toBe(3);
+    });
+    it('caps at length when value becomes full', () => {
+        expect(getNextIndexFromValueChange({
+            prevValue: '12345',
+            nextValue: '123456',
+            length: 6,
+        })).toBe(6);
+    });
+    it('stays at edited index for deletions', () => {
+        expect(getNextIndexFromValueChange({
+            prevValue: '123',
+            nextValue: '12',
+            length: 6,
+        })).toBe(2);
+    });
+});

package/docs/changelog.mdx

@@ -9,6 +9,119 @@ 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.27.1
+
+### Patch Changes
+
+- [#990](https://github.com/utilitywarehouse/hearth/pull/990) [`958e0e1`](https://github.com/utilitywarehouse/hearth/commit/958e0e1a9d5451d1e11fecadc69ae3c5ad9d42ca) Thanks [@declanelcocks](https://github.com/declanelcocks)! - 🐛 [FIX]: Fix `Modal` layout when `inNavModal` and `stickyFooter={false}`.
+
+  Corrects the container flex style for `inNavModal` modals with a non-sticky footer, where the UX was not great when scrolling.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes required.
+
+- [#992](https://github.com/utilitywarehouse/hearth/pull/992) [`2560b3d`](https://github.com/utilitywarehouse/hearth/commit/2560b3dcba7ed4981fad585628f96afd07d8de4f) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Add optional leading `icon` support to `SegmentedControlOption`.
+
+  This adds an optional `icon` prop to `SegmentedControlOption`, allowing icons to be displayed before option labels in segmented controls.
+
+  Docs and stories were updated to include icon usage examples.
+
+  **Components affected**:
+  - `SegmentedControlOption`
+
+  **Developer changes**:
+
+  No changes required for existing usage.
+
+  To use the new optional icon prop:
+
+  ```tsx
+  import { SegmentedControl, SegmentedControlOption } from '@utilitywarehouse/hearth-react-native';
+  import { ElectricitySmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+  <SegmentedControl defaultValue="energy">
+    <SegmentedControlOption value="energy" icon={ElectricitySmallIcon}>
+      Energy
+    </SegmentedControlOption>
+    <SegmentedControlOption value="broadband">Broadband</SegmentedControlOption>
+  </SegmentedControl>;
+  ```
+
+## 0.27.0
+
+### Minor Changes
+
+- [#987](https://github.com/utilitywarehouse/hearth/pull/987) [`eb962d2`](https://github.com/utilitywarehouse/hearth/commit/eb962d2f33b63fa3aeda0b291fd41ace90d04c41) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `SegmentedControl` and `SegmentedControlOption` components.
+
+  This introduces a new segmented control component for switching between a small set of related options.
+  The component includes controlled and uncontrolled usage, size variants (`sm`, `md`), animated selected indicator movement, and improved accessibility semantics for screen readers.
+
+  **Components affected**:
+  - `SegmentedControl`
+  - `SegmentedControlOption`
+
+  **Developer changes**:
+
+  Import and compose the new components as follows:
+
+  ```tsx
+  import { SegmentedControl, SegmentedControlOption } from '@utilitywarehouse/hearth-react-native';
+
+  <SegmentedControl defaultValue="day" size="sm">
+    <SegmentedControlOption value="day">Day</SegmentedControlOption>
+    <SegmentedControlOption value="week">Week</SegmentedControlOption>
+    <SegmentedControlOption value="month">Month</SegmentedControlOption>
+  </SegmentedControl>;
+  ```
+
+### Patch Changes
+
+- [#989](https://github.com/utilitywarehouse/hearth/pull/989) [`c97122e`](https://github.com/utilitywarehouse/hearth/commit/c97122eb429ec4adef656fb245a9256a5619df61) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Ensure horizontal `Banner` fills available width when `onPress` is not provided.
+
+  Fixed a layout issue where a horizontal `Banner` without `onPress` could fail to stretch correctly within its parent container.
+
+  **Components affected**:
+  - `Banner`
+
+  **Developer changes**:
+
+  No changes required.
+
+## 0.26.0
+
+### Minor Changes
+
+- [#981](https://github.com/utilitywarehouse/hearth/pull/981) [`df56387`](https://github.com/utilitywarehouse/hearth/commit/df563872e6bf040d419f6c7fce2343ebe560edb9) Thanks [@declanelcocks](https://github.com/declanelcocks)! - 🌟 [ENHANCEMENT]: Improve `Modal` behaviour when used inside a React Navigation modal (`inNavModal`).
+
+  The following improvements have been made to the `Modal` component when used in a navigation context with `inNavModal={true}`:
+  - **`scrollable` prop**: Content is now rendered inside a `ScrollView` by default. Set `scrollable={false}` to opt out, for example when you need to centre content or use a custom layout.
+  - **`stickyFooter` support**: The `stickyFooter` prop now works correctly in `inNavModal` mode.
+  - **Auto full-screen detection**: When the modal fills the entire screen (e.g. with `presentation: 'fullScreenModal'`), the `fullscreen` style is applied automatically. The `fullscreen` prop is no longer available when `inNavModal` is `true`.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes are required for existing usage. If you were passing `fullscreen` alongside `inNavModal={true}`, remove the `fullscreen` prop — full-screen styling is now detected automatically:
+
+  ```diff
+  - <Modal inNavModal fullscreen>
+  + <Modal inNavModal>
+  ```
+
+  To disable the default `ScrollView` wrapping in `inNavModal` mode:
+
+  ```tsx
+  <Modal inNavModal scrollable={false}>
+    {/* custom layout */}
+  </Modal>
+  ```
+
 ## 0.25.0
 
 ### Minor Changes