@utilitywarehouse/hearth-react-native 0.27.2-testid-fix-3 → 0.27.2

package/src/components/Select/SelectOption.tsx

@@ -14,7 +14,6 @@ const SelectOption = ({
   selected,
   disabled,
   onPress,
-  testID,
 }: SelectOptionProps) => {
   const { selectedValue, onValueChange, close } = useSelectContext();
   const isSelected = selected !== undefined ? selected : selectedValue === value;
@@ -39,7 +38,6 @@ const SelectOption = ({
     <Pressable
       onPress={handlePress}
       disabled={disabled}
-      testID={testID}
       style={({ pressed }) => [styles.container, pressed && styles.pressed]}
     >
       {!!LeftIcon && (

package/src/components/VerificationInput/VerificationInput.tsx

@@ -23,7 +23,6 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
       secureTextEntry = false,
       autoFocus = false,
       style,
-      testID,
       ...props
     },
     ref
@@ -240,7 +239,6 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
             maxLength={length}
             caretHidden
             style={styles.hiddenInput}
-            testID={testID}
           />
           {slots.map(index => {
             const char = displayValue[index] || '';
@@ -262,7 +260,6 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
                   inputRef.current?.focus();
                   setSelectionIndex(index);
                 }}
-                testID={testID ? `${testID}-${index}` : undefined}
               />
             );
           })}

package/build/components/DatePicker/TimePicker.d.ts

@@ -1,3 +0,0 @@
-export type Period = 'AM' | 'PM';
-declare const TimePicker: () => import("react/jsx-runtime").JSX.Element;
-export default TimePicker;

package/build/components/DatePicker/TimePicker.js

@@ -1,84 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import dayjs from 'dayjs';
-import { useCallback, useMemo } from 'react';
-import { ScrollView, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { useDatePickerContext } from './DatePicker.context';
-import { CONTAINER_HEIGHT } from './enums';
-import PeriodPicker from './time-picker/period-picker';
-import Wheel from './time-picker/wheel';
-import { formatNumber, getParsedDate } from './utils';
-const createNumberList = (num, numerals, startFrom = 0) => {
-    return Array.from({ length: num }, (_, i) => ({
-        value: i + startFrom,
-        text: i + startFrom < 10
-            ? `${formatNumber(0, numerals)}${formatNumber(i + startFrom, numerals)}`
-            : `${formatNumber(i + startFrom, numerals)}`,
-    }));
-};
-const TimePicker = () => {
-    const { currentDate, date, onSelectDate, timeZone, numerals = 'latn', use12Hours, } = useDatePickerContext();
-    const hours = useMemo(() => createNumberList(use12Hours ? 12 : 24, numerals, use12Hours ? 1 : 0), [numerals, use12Hours]);
-    const minutes = useMemo(() => createNumberList(60, numerals), [numerals]);
-    const { hour, hour12, minute, period } = getParsedDate(date || currentDate);
-    const handleChangeHour = useCallback((value) => {
-        let hour24 = value;
-        if (use12Hours) {
-            if (period === 'AM' && value === 12) {
-                hour24 = 0;
-            }
-            else if (period === 'PM' && value < 12) {
-                hour24 = value + 12;
-            }
-            else {
-                hour24 = value;
-            }
-        }
-        const newDate = dayjs.tz(date, timeZone).hour(hour24).minute(minute);
-        onSelectDate(newDate);
-    }, [date, onSelectDate, timeZone, use12Hours, period, minute]);
-    const handleChangeMinute = useCallback((value) => {
-        const newDate = dayjs.tz(date, timeZone).minute(value);
-        onSelectDate(newDate);
-    }, [date, onSelectDate, timeZone]);
-    const handlePeriodChange = useCallback((newPeriod) => {
-        let newHour = hour12;
-        if (newPeriod === 'PM' && hour12 < 12) {
-            newHour = hour12 + 12;
-        }
-        else if (newPeriod === 'AM' && hour12 === 12) {
-            newHour = 0;
-        }
-        else if (newPeriod === 'AM' && hour >= 12) {
-            newHour = hour12;
-        }
-        const newDate = dayjs.tz(date || currentDate, timeZone).hour(newHour);
-        onSelectDate(newDate);
-    }, [date, currentDate, onSelectDate, timeZone, hour, hour12]);
-    return (_jsxs(ScrollView, { horizontal: true, scrollEnabled: false, contentContainerStyle: styles.container, testID: "time-selector", children: [_jsxs(View, { style: styles.timePickerContainer, children: [_jsx(View, { style: styles.wheelContainer, children: _jsx(Wheel, { value: use12Hours ? hour12 : hour, items: hours, setValue: handleChangeHour }) }), _jsx(BodyText, { style: styles.timeSeparator, children: ":" }), _jsx(View, { style: styles.wheelContainer, children: _jsx(Wheel, { value: minute, items: minutes, setValue: handleChangeMinute }) })] }), use12Hours && period ? (_jsx(View, { style: styles.periodContainer, children: _jsx(PeriodPicker, { value: period, setValue: handlePeriodChange }) })) : null] }));
-};
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    wheelContainer: {
-        flex: 1,
-    },
-    timePickerContainer: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: CONTAINER_HEIGHT / 2,
-        height: CONTAINER_HEIGHT / 2,
-        flexDirection: 'row',
-    },
-    timeSeparator: {
-        marginHorizontal: 5,
-    },
-    periodContainer: {
-        marginLeft: 10,
-    },
-});
-export default TimePicker;

package/build/components/DatePicker/time-picker/animated-math.d.ts

@@ -1,4 +0,0 @@
-import { Animated } from 'react-native';
-declare function sin(animated: Animated.Animated): Animated.AnimatedAddition<string | number>;
-declare function normalize(animated: Animated.Animated): Animated.Animated;
-export { sin, normalize };

package/build/components/DatePicker/time-picker/animated-math.js

@@ -1,19 +0,0 @@
-import { Animated } from 'react-native';
-const FACTORIAL_3 = 3 * 2;
-const FACTORIAL_5 = 5 * 4 * FACTORIAL_3;
-const FACTORIAL_7 = 7 * 6 * FACTORIAL_5;
-function sin(animated) {
-    const normalized = normalize(animated);
-    const square = Animated.multiply(normalized, normalized);
-    const pow3 = Animated.multiply(normalized, square);
-    const pow5 = Animated.multiply(pow3, square);
-    const pow7 = Animated.multiply(pow5, square);
-    return Animated.add(Animated.add(normalized, Animated.multiply(pow3, -1 / FACTORIAL_3)), Animated.add(Animated.multiply(pow5, 1 / FACTORIAL_5), Animated.multiply(pow7, -1 / FACTORIAL_7)));
-}
-function normalize(animated) {
-    return Animated.add(Animated.modulo(Animated.add(animated, Math.PI), Math.PI * 2), -Math.PI).interpolate({
-        inputRange: [-Math.PI, -Math.PI / 2, Math.PI / 2, Math.PI],
-        outputRange: [0, -Math.PI / 2, Math.PI / 2, 0],
-    });
-}
-export { sin, normalize };

package/build/components/DatePicker/time-picker/period-native.d.ts

@@ -1,6 +0,0 @@
-interface PeriodProps {
-    value: string;
-    setValue?: (value: any) => void;
-}
-declare const _default: import("react").MemoExoticComponent<({ value, setValue }: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/build/components/DatePicker/time-picker/period-native.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import WheelPicker from './wheel-picker';
-const options = [
-    { value: 'AM', text: 'AM' },
-    { value: 'PM', text: 'PM' },
-];
-const PeriodNative = ({ value, setValue = () => { } }) => {
-    return (_jsx(WheelPicker, { value: value, options: options, onChange: setValue, 
-        //containerStyle={defaultStyles.container}
-        itemHeight: 44, decelerationRate: "fast" }));
-};
-const customComparator = (prev, next) => {
-    const areEqual = prev.value === next.value && prev.setValue === next.setValue;
-    return areEqual;
-};
-export default memo(PeriodNative, customComparator);

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

@@ -1,6 +0,0 @@
-type PeriodProps = {
-    value: string;
-    setValue?: (value: any) => void;
-};
-declare const _default: import("react").MemoExoticComponent<(props: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

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

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

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

@@ -1,6 +0,0 @@
-interface PeriodProps {
-    value: string;
-    setValue?: (value: any) => void;
-}
-declare const _default: import("react").MemoExoticComponent<({ value, setValue }: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

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

@@ -1,21 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { Pressable, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../../BodyText';
-const PeriodWeb = ({ value, setValue = () => { } }) => {
-    return (_jsx(Pressable, { onPress: () => setValue(value == 'AM' ? 'PM' : 'AM'), children: _jsx(View, { style: [styles.period], children: _jsx(BodyText, { children: value }) }) }));
-};
-const styles = StyleSheet.create({
-    period: {
-        width: 65,
-        height: 44,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-});
-const customComparator = (prev, next) => {
-    const areEqual = prev.value === next.value && prev.setValue === next.setValue;
-    return areEqual;
-};
-export default memo(PeriodWeb, customComparator);

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

@@ -1,8 +0,0 @@
-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-native.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { Platform } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import WheelPicker from './wheel-picker';
-const WheelNative = ({ value, setValue = () => { }, items }) => {
-    return (_jsx(WheelPicker, { value: value, options: items, onChange: setValue, containerStyle: styles.container, itemHeight: 44, decelerationRate: "fast" }));
-};
-const styles = StyleSheet.create({
-    container: {
-        display: 'flex',
-        ...Platform.select({
-            web: {
-                userSelect: 'none',
-            },
-        }),
-    },
-});
-export default memo(WheelNative);

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

@@ -1,2 +0,0 @@
-import WheelPicker from './wheel-picker';
-export default WheelPicker;

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

@@ -1,2 +0,0 @@
-import WheelPicker from './wheel-picker';
-export default WheelPicker;

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Animated, StyleProp, ViewStyle } from 'react-native';
-import { PickerOption } from '../../DatePicker.props';
-interface ItemProps {
-    style: StyleProp<ViewStyle>;
-    option: PickerOption | null;
-    height: number;
-    index: number;
-    currentScrollIndex: Animated.AnimatedAddition<number>;
-    visibleRest: number;
-    rotationFunction: (x: number) => number;
-    opacityFunction: (x: number) => number;
-    scaleFunction: (x: number) => number;
-}
-declare const _default: React.NamedExoticComponent<ItemProps>;
-export default _default;

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

@@ -1,97 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { Animated } from 'react-native';
-import { BodyText } from '../../../BodyText';
-import styles from './wheel-picker.style';
-const WheelPickerItem = ({ style, height, option, index, visibleRest, currentScrollIndex, opacityFunction, rotationFunction, scaleFunction, }) => {
-    const relativeScrollIndex = Animated.subtract(index, currentScrollIndex);
-    const translateY = relativeScrollIndex.interpolate({
-        inputRange: (() => {
-            const range = [0];
-            for (let i = 1; i <= visibleRest + 1; i++) {
-                range.unshift(-i);
-                range.push(i);
-            }
-            return range;
-        })(),
-        outputRange: (() => {
-            const range = [0];
-            for (let i = 1; i <= visibleRest + 1; i++) {
-                let y = (height / 2) * (1 - Math.sin(Math.PI / 2 - rotationFunction(i)));
-                for (let j = 1; j < i; j++) {
-                    y += height * (1 - Math.sin(Math.PI / 2 - rotationFunction(j)));
-                }
-                range.unshift(y);
-                range.push(-y);
-            }
-            return range;
-        })(),
-    });
-    const opacity = relativeScrollIndex.interpolate({
-        inputRange: (() => {
-            const range = [0];
-            for (let i = 1; i <= visibleRest + 1; i++) {
-                range.unshift(-i);
-                range.push(i);
-            }
-            return range;
-        })(),
-        outputRange: (() => {
-            const range = [1];
-            for (let x = 1; x <= visibleRest + 1; x++) {
-                const y = opacityFunction(x);
-                range.unshift(y);
-                range.push(y);
-            }
-            return range;
-        })(),
-    });
-    const scale = relativeScrollIndex.interpolate({
-        inputRange: (() => {
-            const range = [0];
-            for (let i = 1; i <= visibleRest + 1; i++) {
-                range.unshift(-i);
-                range.push(i);
-            }
-            return range;
-        })(),
-        outputRange: (() => {
-            const range = [1.0];
-            for (let x = 1; x <= visibleRest + 1; x++) {
-                const y = scaleFunction(x);
-                range.unshift(y);
-                range.push(y);
-            }
-            return range;
-        })(),
-    });
-    const rotateX = relativeScrollIndex.interpolate({
-        inputRange: (() => {
-            const range = [0];
-            for (let i = 1; i <= visibleRest + 1; i++) {
-                range.unshift(-i);
-                range.push(i);
-            }
-            return range;
-        })(),
-        outputRange: (() => {
-            const range = ['0deg'];
-            for (let x = 1; x <= visibleRest + 1; x++) {
-                const y = rotationFunction(x);
-                range.unshift(`${y}deg`);
-                range.push(`${y}deg`);
-            }
-            return range;
-        })(),
-    });
-    return (_jsx(Animated.View, { style: [
-            styles.option,
-            style,
-            {
-                height,
-                opacity,
-                transform: [{ translateY }, { rotateX }, { scale }],
-            },
-        ], children: _jsx(BodyText, { children: option?.text }) }));
-};
-export default React.memo(WheelPickerItem);

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import { FlatListProps, StyleProp, ViewProps, ViewStyle } from 'react-native';
-import { PickerOption } from '../../DatePicker.props';
-interface Props {
-    value: number | string;
-    options: PickerOption[];
-    onChange: (index: number | string) => void;
-    selectedIndicatorStyle?: StyleProp<ViewStyle>;
-    itemStyle?: ViewStyle;
-    itemHeight?: number;
-    containerStyle?: ViewStyle;
-    containerProps?: Omit<ViewProps, 'style'>;
-    scaleFunction?: (x: number) => number;
-    rotationFunction?: (x: number) => number;
-    opacityFunction?: (x: number) => number;
-    visibleRest?: number;
-    decelerationRate?: 'normal' | 'fast' | number;
-    flatListProps?: Omit<FlatListProps<PickerOption | null>, 'data' | 'renderItem'>;
-}
-declare const _default: React.NamedExoticComponent<Props>;
-export default _default;

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

@@ -1,88 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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;