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

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

@@ -0,0 +1,180 @@
+import { BottomSheetFlatListProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
+import { ComponentType, ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+import { BottomSheetProps } from '../BottomSheet';
+import { ComboboxSelection } from './Combobox.context';
+type ValidationStatus = 'initial' | 'valid' | 'invalid';
+export interface ComboboxOptionItemProps {
+    /**
+     * Label shown for this option.
+     */
+    label: string;
+    /**
+     * Value returned when this option is selected.
+     */
+    value: string;
+    /**
+     * Optional icon shown before the option label.
+     */
+    leadingIcon?: ComponentType;
+    /**
+     * Optional icon shown after the option label.
+     */
+    trailingIcon?: ComponentType;
+    /**
+     * Additional searchable terms for this option.
+     */
+    keywords?: string[];
+    /**
+     * Whether this option is disabled.
+     */
+    disabled?: boolean;
+}
+export interface ComboboxRenderContentProps {
+    /**
+     * Current search value used by both the trigger and bottom sheet input.
+     */
+    search: string;
+    /**
+     * Update the search value.
+     */
+    setSearch: (value: string) => void;
+    /**
+     * Close the bottom sheet.
+     */
+    close: () => void;
+    /**
+     * Select an option, update the trigger text and close the bottom sheet.
+     */
+    selectOption: (option: ComboboxSelection) => void;
+    /**
+     * Currently selected value.
+     */
+    selectedValue?: string | null;
+}
+export interface ComboboxOptionProps extends ComboboxOptionItemProps {
+    /**
+     * Whether this option is selected.
+     */
+    selected?: boolean;
+    /**
+     * Custom press handler for this option.
+     */
+    onPress?: (value: string) => void;
+}
+type ComboboxChildren = ReactNode | ((props: ComboboxRenderContentProps) => ReactNode);
+interface ComboboxProps extends Omit<ViewProps, 'children'> {
+    /**
+     * Array of options to render using the default bottom sheet list.
+     */
+    options?: ComboboxOptionItemProps[];
+    /**
+     * Currently selected value.
+     */
+    value?: string | null;
+    /**
+     * Callback fired when the selected value changes.
+     */
+    onValueChange?: (value: string | null) => void;
+    /**
+     * Controlled search value used by the trigger and bottom sheet input.
+     */
+    inputValue?: string;
+    /**
+     * Callback fired when the search value changes.
+     */
+    onInputValueChange?: (value: string) => void;
+    /**
+     * Label shown above the combobox.
+     */
+    label?: string;
+    /**
+     * The variant of the label text.
+     *
+     * @default 'body'
+     */
+    labelVariant?: 'heading' | 'body';
+    /**
+     * Helper text shown below the label.
+     */
+    helperText?: string;
+    /**
+     * Optional helper icon.
+     */
+    helperIcon?: ComponentType;
+    /**
+     * Text shown for invalid state.
+     */
+    invalidText?: string;
+    /**
+     * Text shown for valid state.
+     */
+    validText?: string;
+    /**
+     * Placeholder shown when the combobox is empty.
+     *
+     * @default 'Search'
+     */
+    placeholder?: string;
+    /**
+     * Placeholder shown in the bottom sheet search input.
+     *
+     * @default 'Search'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Whether the combobox is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Validation status for the combobox.
+     *
+     * @default 'initial'
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Whether the combobox is required.
+     *
+     * @default true
+     */
+    required?: boolean;
+    /**
+     * Heading displayed above the bottom sheet search input.
+     */
+    menuHeading?: string;
+    /**
+     * Custom bottom sheet content, or a render function for fully custom list rendering.
+     */
+    children?: ComboboxChildren;
+    /**
+     * Props passed to the BottomSheetModal.
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+    /**
+     * Text shown when no options match the current search.
+     *
+     * @default 'No options found'
+     */
+    noOptionsFoundText?: string;
+    /**
+     * Props passed to the default BottomSheetFlatList renderer.
+     */
+    listProps?: Partial<BottomSheetFlatListProps<ComboboxOptionItemProps>>;
+    /**
+     * Whether the combobox should show a loading spinner.
+     */
+    loading?: boolean;
+    /**
+     * Whether the combobox is readonly.
+     */
+    readonly?: boolean;
+    /**
+     * Resolve a label for a selected value when the current options array does not contain it.
+     */
+    getValueLabel?: (value: string | null | undefined) => string;
+    /**
+     * Override the default filtering behaviour for the default options list.
+     */
+    filterOption?: (option: ComboboxOptionItemProps, search: string) => boolean;
+}
+export default ComboboxProps;

package/build/components/Combobox/Combobox.props.js

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

package/build/components/Combobox/ComboboxOption.d.ts

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

package/build/components/Combobox/ComboboxOption.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
+import { useComboboxContext } from './Combobox.context';
+const ComboboxOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, }) => {
+    const { selectedValue, selectOption } = useComboboxContext();
+    const isSelected = selected !== undefined ? selected : selectedValue === value;
+    styles.useVariants({ disabled });
+    const handlePress = () => {
+        if (disabled) {
+            return;
+        }
+        if (onPress) {
+            onPress(value);
+            return;
+        }
+        selectOption({ label, value });
+    };
+    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 }) }))] }));
+};
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.components.select.dropdown.item.gap,
+        borderRadius: theme.components.select.dropdown.item.borderRadius,
+        paddingVertical: theme.components.select.dropdown.item.padding,
+        paddingHorizontal: theme.components.select.dropdown.padding,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+        _web: {
+            _hover: {
+                backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+            },
+        },
+    },
+    icon: {
+        color: theme.color.interactive.functional.foreground.subtle,
+    },
+    pressed: {
+        backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+    },
+    labelContainer: {
+        flex: 1,
+    },
+}));
+ComboboxOption.displayName = 'ComboboxOption';
+export default ComboboxOption;

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

@@ -0,0 +1,4 @@
+export { default as Combobox } from './Combobox';
+export { ComboboxContext, useComboboxContext } from './Combobox.context';
+export { default as ComboboxOption } from './ComboboxOption';
+export type { default as ComboboxProps, ComboboxOptionItemProps, ComboboxOptionProps, ComboboxRenderContentProps, } from './Combobox.props';

package/build/components/Combobox/index.js

@@ -0,0 +1,3 @@
+export { default as Combobox } from './Combobox';
+export { ComboboxContext, useComboboxContext } from './Combobox.context';
+export { default as ComboboxOption } from './ComboboxOption';

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

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

package/build/components/DatePicker/TimePicker.js

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

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

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

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

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

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

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

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

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

@@ -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-native.js

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

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

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

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

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

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

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

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