@utilitywarehouse/hearth-react-native 0.30.4-testid-fix-2 → 0.31.0

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;

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

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

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

@@ -1,10 +0,0 @@
-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/SafeAreaView/SafeAreaView.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import SafeAreaViewProps from './SafeAreaView.props';
-declare const SafeAreaView: React.ForwardRefExoticComponent<SafeAreaViewProps & React.RefAttributes<View>>;
-export default SafeAreaView;

package/build/components/SafeAreaView/SafeAreaView.js

@@ -1,117 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { StyleSheet as RNStyleSheet, useWindowDimensions, View, } from 'react-native';
-import { UnistylesRuntime } from '../../core';
-const DEFAULT_EDGES = ['top', 'right', 'bottom', 'left'];
-const EMPTY_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
-const EDGE_EPSILON = 1;
-const getNumericStyleValue = (value) => {
-    return typeof value === 'number' ? value : 0;
-};
-const getStyleInsetValue = (style, mode, edge) => {
-    const prefix = mode === 'margin' ? 'margin' : 'padding';
-    if (!style) {
-        // No style specified at all; treat as zero inset for safe-area calculations.
-        return 0;
-    }
-    if (edge === 'top') {
-        const raw = style[`${prefix}Top`] ?? style[`${prefix}Vertical`] ?? style[prefix];
-        if (raw == null) {
-            return 0;
-        }
-        return getNumericStyleValue(raw);
-    }
-    if (edge === 'bottom') {
-        const raw = style[`${prefix}Bottom`] ?? style[`${prefix}Vertical`] ?? style[prefix];
-        if (raw == null) {
-            return 0;
-        }
-        return getNumericStyleValue(raw);
-    }
-    if (edge === 'left') {
-        const raw = style[`${prefix}Left`] ?? style[`${prefix}Horizontal`] ?? style[prefix];
-        if (raw == null) {
-            return 0;
-        }
-        return getNumericStyleValue(raw);
-    }
-    const raw = style[`${prefix}Right`] ?? style[`${prefix}Horizontal`] ?? style[prefix];
-    if (raw == null) {
-        return 0;
-    }
-    return getNumericStyleValue(raw);
-};
-const SafeAreaView = forwardRef(({ children, edges = DEFAULT_EDGES, mode = 'padding', onLayout, style, ...props }, ref) => {
-    const viewRef = useRef(null);
-    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
-    const [edgeInsets, setEdgeInsets] = useState(EMPTY_INSETS);
-    const flattenedStyle = useMemo(() => RNStyleSheet.flatten(style), [style]);
-    const updateEdgeInsets = useCallback(() => {
-        const currentView = viewRef.current;
-        if (!currentView) {
-            return;
-        }
-        currentView.measureInWindow((x, y, width, height) => {
-            const runtimeInsets = UnistylesRuntime.insets ?? EMPTY_INSETS;
-            const nextEdgeInsets = {
-                top: edges.includes('top') ? Math.max(runtimeInsets.top - Math.max(y, 0), 0) : 0,
-                right: edges.includes('right')
-                    ? Math.max(runtimeInsets.right - Math.max(windowWidth - (x + width), 0), 0)
-                    : 0,
-                bottom: edges.includes('bottom')
-                    ? Math.max(runtimeInsets.bottom - Math.max(windowHeight - (y + height), 0), 0)
-                    : 0,
-                left: edges.includes('left') ? Math.max(runtimeInsets.left - Math.max(x, 0), 0) : 0,
-            };
-            setEdgeInsets(previousInsets => {
-                const hasChanged = Object.keys(nextEdgeInsets).some(edge => Math.abs(previousInsets[edge] - nextEdgeInsets[edge]) > EDGE_EPSILON);
-                return hasChanged ? nextEdgeInsets : previousInsets;
-            });
-        });
-    }, [edges, windowHeight, windowWidth]);
-    useEffect(() => {
-        const frame = requestAnimationFrame(updateEdgeInsets);
-        return () => cancelAnimationFrame(frame);
-    }, [updateEdgeInsets]);
-    const handleRef = useCallback((node) => {
-        viewRef.current = node;
-        if (typeof ref === 'function') {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-    }, [ref]);
-    const handleLayout = useCallback((event) => {
-        onLayout?.(event);
-        requestAnimationFrame(updateEdgeInsets);
-    }, [onLayout, updateEdgeInsets]);
-    const safeAreaStyle = useMemo(() => {
-        const nextStyle = {};
-        if (mode === 'padding') {
-            nextStyle.paddingTop = getStyleInsetValue(flattenedStyle, mode, 'top') + edgeInsets.top;
-            nextStyle.paddingRight =
-                getStyleInsetValue(flattenedStyle, mode, 'right') + edgeInsets.right;
-            nextStyle.paddingBottom =
-                getStyleInsetValue(flattenedStyle, mode, 'bottom') + edgeInsets.bottom;
-            nextStyle.paddingLeft = getStyleInsetValue(flattenedStyle, mode, 'left') + edgeInsets.left;
-            return nextStyle;
-        }
-        nextStyle.marginTop = getStyleInsetValue(flattenedStyle, mode, 'top') + edgeInsets.top;
-        nextStyle.marginRight = getStyleInsetValue(flattenedStyle, mode, 'right') + edgeInsets.right;
-        nextStyle.marginBottom =
-            getStyleInsetValue(flattenedStyle, mode, 'bottom') + edgeInsets.bottom;
-        nextStyle.marginLeft = getStyleInsetValue(flattenedStyle, mode, 'left') + edgeInsets.left;
-        return nextStyle;
-    }, [
-        edgeInsets.bottom,
-        edgeInsets.left,
-        edgeInsets.right,
-        edgeInsets.top,
-        flattenedStyle,
-        mode,
-    ]);
-    return (_jsx(View, { ref: handleRef, onLayout: handleLayout, style: [style, safeAreaStyle], ...props, children: children }));
-});
-SafeAreaView.displayName = 'SafeAreaView';
-export default SafeAreaView;

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

@@ -1,17 +0,0 @@
-import { ViewProps } from 'react-native';
-export type SafeAreaEdge = 'top' | 'right' | 'bottom' | 'left';
-interface SafeAreaViewProps extends ViewProps {
-    /**
-     * Which edges should receive safe area compensation.
-     *
-     * @default ['top', 'right', 'bottom', 'left']
-     */
-    edges?: SafeAreaEdge[];
-    /**
-     * Whether safe area compensation should be applied as padding or margin.
-     *
-     * @default 'padding'
-     */
-    mode?: 'padding' | 'margin';
-}
-export default SafeAreaViewProps;

package/build/components/SafeAreaView/SafeAreaView.props.js

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

package/build/components/SafeAreaView/index.d.ts

@@ -1,2 +0,0 @@
-export { default as SafeAreaView } from './SafeAreaView';
-export type { default as SafeAreaViewProps, SafeAreaEdge } from './SafeAreaView.props';

package/build/components/SafeAreaView/index.js

@@ -1 +0,0 @@
-export { default as SafeAreaView } from './SafeAreaView';