react-native-molecules 0.5.0-beta.17 → 0.5.0-beta.19

package/components/Popover/{Popover.native.tsx → usePlatformMeasure.native.ts}

@@ -1,52 +1,19 @@
-import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
-import { AppState, Dimensions, Platform, Pressable, View } from 'react-native';
-import { ScopedTheme, UnistylesRuntime } from 'react-native-unistyles';
+import { useCallback, useEffect, useLayoutEffect } from 'react';
+import { AppState, Dimensions, Platform } from 'react-native';
 
-import { Portal } from '../Portal';
-import {
-    DEFAULT_ARROW_SIZE,
-    popoverDefaultStyles,
-    type PopoverProps,
-    useArrowStyles,
-    usePopover,
-} from './common';
-import { popoverStyles } from './utils';
+import { popoverDefaultStyles } from './common';
+import type { UsePlatformMeasureArgs, UsePlatformMeasureResult } from './usePlatformMeasure';
 
-const Popover = ({
+export const usePlatformMeasure = ({
     triggerRef,
-    children,
     isOpen,
-    onClose,
-    position = 'bottom',
-    align = 'center',
-    style,
-    showArrow = false,
-    arrowSize = DEFAULT_ARROW_SIZE,
-    inverted = false,
+    calculatedPosition,
+    calculateAndSetPosition,
+    targetLayoutRef,
     triggerDimensions,
-    offset = 8,
-    ...rest
-}: PopoverProps) => {
-    const {
-        popoverLayoutRef,
-        targetLayoutRef,
-        actualPositionRef,
-        calculatedPosition,
-        calculateAndSetPosition,
-        handlePopoverLayout,
-    } = usePopover({
-        isOpen,
-        position,
-        align,
-        showArrow,
-        arrowSize,
-        offset,
-    });
-
-    const popoverRef = useRef<View>(null);
-
+}: UsePlatformMeasureArgs): UsePlatformMeasureResult => {
     const measureTarget = useCallback(() => {
-        if (triggerRef.current) {
+        if (triggerRef?.current) {
             triggerRef.current.measure(
                 (
                     _fx: number,
@@ -117,48 +84,7 @@ const Popover = ({
         };
     }, [isOpen, measureTarget]);
 
-    const arrowStyles = useArrowStyles({
-        showArrow,
-        arrowSize,
-        style,
-        calculatedPosition,
-        targetLayoutRef,
-        popoverLayoutRef,
-        actualPositionRef,
-    });
-
-    const popoverStyle = calculatedPosition ?? popoverDefaultStyles;
-    const Wrapper = inverted ? ScopedTheme : Fragment;
-
-    if (!isOpen && popoverStyle.opacity === 0) {
-        return null;
-    }
-
-    const handleOutsidePress = () => {
-        if (isOpen && onClose) {
-            onClose();
-        }
+    return {
+        popoverStyle: (calculatedPosition ?? popoverDefaultStyles) as any,
     };
-
-    return (
-        <Portal>
-            <Wrapper
-                {...(inverted
-                    ? { name: UnistylesRuntime.themeName === 'dark' ? 'light' : 'dark' }
-                    : ({} as { name: 'light' }))}>
-                <Pressable onPress={handleOutsidePress} style={popoverStyles.overlay} />
-
-                <View
-                    ref={popoverRef}
-                    onLayout={handlePopoverLayout}
-                    style={[popoverStyles.popoverContainer, style, popoverStyle]}
-                    {...rest}>
-                    {children}
-                    {showArrow && popoverStyle.opacity === 1 && <View style={arrowStyles} />}
-                </View>
-            </Wrapper>
-        </Portal>
-    );
 };
-
-export default memo(Popover);

package/components/Popover/usePlatformMeasure.ts

@@ -0,0 +1,118 @@
+import { type RefObject, useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
+import type { LayoutRectangle, View, ViewStyle } from 'react-native';
+
+import { popoverDefaultStyles } from './common';
+
+export type UsePlatformMeasureArgs = {
+    triggerRef: RefObject<View | any> | undefined;
+    isOpen: boolean;
+    onClose?: () => void;
+    calculatedPosition: ViewStyle | null;
+    calculateAndSetPosition: () => void;
+    targetLayoutRef: RefObject<LayoutRectangle | null>;
+    popoverRef: RefObject<View | null>;
+    triggerDimensions?: { width: number; height: number } | null;
+};
+
+export type UsePlatformMeasureResult = {
+    /** Platform-adjusted popover position (includes scroll offset on web) */
+    popoverStyle: ViewStyle;
+};
+
+export const usePlatformMeasure = ({
+    triggerRef,
+    isOpen,
+    onClose,
+    calculatedPosition,
+    calculateAndSetPosition,
+    targetLayoutRef,
+    popoverRef,
+    triggerDimensions,
+}: UsePlatformMeasureArgs): UsePlatformMeasureResult => {
+    const measureTarget = useCallback(() => {
+        if (triggerRef?.current) {
+            triggerRef.current.measureInWindow(
+                (x: number, y: number, width: number, height: number) => {
+                    if (width !== 0 || height !== 0) {
+                        const newLayout = { x, y, width, height };
+                        const changed =
+                            !targetLayoutRef.current ||
+                            targetLayoutRef.current.x !== newLayout.x ||
+                            targetLayoutRef.current.y !== newLayout.y ||
+                            targetLayoutRef.current.width !== newLayout.width ||
+                            targetLayoutRef.current.height !== newLayout.height;
+
+                        if (changed) {
+                            targetLayoutRef.current = newLayout;
+                            calculateAndSetPosition();
+                        }
+                    } else {
+                        targetLayoutRef.current = null;
+                        calculateAndSetPosition();
+                    }
+                },
+            );
+        } else {
+            targetLayoutRef.current = null;
+            calculateAndSetPosition();
+        }
+    }, [triggerRef, calculateAndSetPosition, targetLayoutRef]);
+
+    useLayoutEffect(() => {
+        if (isOpen) {
+            const timeoutId = setTimeout(measureTarget, 0);
+            return () => clearTimeout(timeoutId);
+        }
+        return;
+    }, [isOpen, measureTarget, triggerDimensions]);
+
+    useLayoutEffect(() => {
+        if (!isOpen) return;
+        const handleResize = () => {
+            if (triggerRef?.current && isOpen) {
+                window.requestAnimationFrame(measureTarget);
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', handleResize, true);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleResize, true);
+        };
+    }, [isOpen, measureTarget, triggerRef]);
+
+    useEffect(() => {
+        if (!isOpen || !onClose) return;
+        const handleClickOutside = (event: MouseEvent) => {
+            const popoverElement = popoverRef.current as any as HTMLElement;
+            const targetElement = triggerRef?.current as any as HTMLElement;
+            if (
+                popoverElement &&
+                !popoverElement.contains(event.target as Node) &&
+                targetElement &&
+                !targetElement.contains(event.target as Node)
+            ) {
+                onClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside, { capture: true });
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside, { capture: true });
+        };
+    }, [isOpen, onClose, popoverRef, triggerRef]);
+
+    const popoverStyle = useMemo(() => {
+        if (!calculatedPosition) return popoverDefaultStyles;
+
+        const scrollX = window.scrollX ?? window.pageXOffset ?? 0;
+        const scrollY = window.scrollY ?? window.pageYOffset ?? 0;
+
+        return {
+            ...calculatedPosition,
+            left: (calculatedPosition.left as number) + scrollX,
+            top: (calculatedPosition.top as number) + scrollY,
+        };
+    }, [calculatedPosition]);
+
+    return { popoverStyle };
+};

package/components/Popover/utils.ts

@@ -15,24 +15,17 @@ const popoverStylesDefault = StyleSheet.create(theme => ({
         elevation: 5,
         zIndex: 100,
     },
-    backdrop: {
+    overlay: {
         position: 'absolute',
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
+        backgroundColor: 'transparent',
         _web: {
             cursor: 'default',
         },
     },
-    overlay: {
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        backgroundColor: 'transparent',
-    },
 }));
 
 export const popoverStyles = getRegisteredComponentStylesWithFallback(

package/components/TimePicker/TimeInput.tsx

@@ -1,24 +1,28 @@
-import { forwardRef, memo, useCallback, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { forwardRef, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import {
+    type NativeSyntheticEvent,
+    StyleSheet,
+    TextInput as NativeTextInput,
+    type TextInputProps as NativeTextInputProps,
+    type TextInputSelectionChangeEventData,
+    View,
+} from 'react-native';
 
 import { useTheme } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
-import { TextInput, type TextInputProps } from '../TextInput';
 import { TouchableRipple } from '../TouchableRipple';
 import { inputTypes, type PossibleClockTypes, type PossibleInputTypes } from './timeUtils';
 import { timePickerInputStyles } from './utils';
 
-interface TimeInputProps
-    extends Omit<
-        Omit<TextInputProps, 'value' | 'variant' | 'onChangeText' | 'onPress'>,
-        'onFocus'
-    > {
+interface TimeInputProps extends Omit<NativeTextInputProps, 'value' | 'onChangeText' | 'onPress'> {
     value: number;
     clockType: PossibleClockTypes;
     onPress?: (type: PossibleClockTypes) => any;
     pressed: boolean;
-    onChanged: (n: number) => any;
+    onChanged: (n: number, text: string) => any;
     inputType: PossibleInputTypes;
+    error?: boolean;
+    inputStyle?: NativeTextInputProps['style'];
 }
 
 function TimeInput(
@@ -29,18 +33,22 @@ function TimeInput(
         onPress,
         onChanged,
         inputType,
+        error = false,
         inputStyle,
         style,
         ...rest
     }: TimeInputProps,
     ref: any,
 ) {
-    const onInnerChange = (text: string) => {
-        onChanged(Number(text));
-    };
-
     const theme = useTheme();
     const [inputFocused, setInputFocused] = useState<boolean>(false);
+    const [rawText, setRawText] = useState<string | null>(null);
+    const [selection, setSelection] = useState<{ start: number; end: number } | undefined>();
+
+    const onInnerChange = (text: string) => {
+        setRawText(text);
+        onChanged(Number(text), text);
+    };
 
     const highlighted = inputType === inputTypes.picker ? pressed : inputFocused;
 
@@ -52,46 +60,88 @@ function TimeInput(
     });
 
     const formattedValue = useMemo(() => {
-        let _formattedValue = `${value}`;
-
-        if (!inputFocused) {
-            _formattedValue = `${value}`.length === 1 ? `0${value}` : `${value}`;
-        }
+        if (rawText !== null && (inputFocused || error)) return rawText;
 
-        return _formattedValue;
-    }, [value, inputFocused]);
+        const str = `${value}`;
+        return str.length === 1 ? `0${str}` : str;
+    }, [value, inputFocused, rawText, error]);
 
-    const { rippleColor, containerStyle, textInputContainerStyle, textInputStyle, buttonStyle } =
-        useMemo(() => {
-            const { container, input, button } = timePickerInputStyles;
+    const { rippleColor, containerStyle, textInputStyle, buttonStyle } = useMemo(() => {
+        const {
+            container,
+            input,
+            keyboardInput,
+            keyboardInputHighlighted,
+            inputError,
+            keyboardInputError,
+            button,
+        } = timePickerInputStyles;
+        const isKeyboardInput = inputType === inputTypes.keyboard;
 
-            return {
-                rippleColor: timePickerInputStyles.root?._rippleColor,
-                containerStyle: container,
-                textInputContainerStyle: [{ paddingHorizontal: 0 }, style],
-                textInputStyle: [input, inputStyle],
-                buttonStyle: [StyleSheet.absoluteFill, button],
-            };
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [inputStyle, style, state]);
+        return {
+            rippleColor: timePickerInputStyles.root?._rippleColor,
+            containerStyle: container,
+            textInputStyle: [
+                input,
+                isKeyboardInput ? keyboardInput : null,
+                isKeyboardInput && highlighted ? keyboardInputHighlighted : null,
+                error ? inputError : null,
+                isKeyboardInput && error ? keyboardInputError : null,
+                style,
+                inputStyle,
+            ],
+            buttonStyle: [StyleSheet.absoluteFill, button],
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [error, highlighted, inputStyle, inputType, style, state]);
 
     const onFocus = useCallback(() => setInputFocused(true), []);
-    const onBlur = useCallback(() => setInputFocused(false), []);
+
+    const onBlur = useCallback(() => {
+        setInputFocused(false);
+        setSelection(undefined);
+        if (!error) {
+            setRawText(null);
+        }
+    }, [error]);
+
     const onPressInput = useCallback(() => onPress?.(clockType), [clockType, onPress]);
 
+    const onSelectionChange = useCallback(
+        (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+            if (selection) {
+                setSelection(undefined);
+            }
+
+            rest.onSelectionChange?.(e);
+        },
+        [rest, selection],
+    );
+
+    useEffect(() => {
+        if (error && inputFocused && rawText?.length) {
+            setSelection({ start: 0, end: rawText.length });
+            return;
+        }
+
+        setSelection(undefined);
+    }, [error, inputFocused, rawText]);
+
     return (
         <View style={containerStyle}>
-            <TextInput
-                variant="plain"
+            <NativeTextInput
                 ref={ref}
-                inputStyle={textInputStyle}
-                style={textInputContainerStyle}
                 onFocus={onFocus}
                 onBlur={onBlur}
                 keyboardAppearance={theme.dark ? 'dark' : 'default'}
                 value={formattedValue}
                 maxLength={2}
+                placeholderTextColor={theme.colors.onSurfaceVariant}
+                selectTextOnFocus={inputType === inputTypes.picker || error}
+                selection={selection}
+                onSelectionChange={onSelectionChange}
                 onChangeText={onInnerChange}
+                style={textInputStyle}
                 {...rest}
             />
             <>

package/components/TimePicker/TimeInputs.tsx

@@ -1,11 +1,12 @@
 // @typescript-eslint/no-unused-vars
 // WORK IN PROGRESS
 
-import { memo, useCallback, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { TextInput as TextInputNative, useWindowDimensions, View } from 'react-native';
 
 import { useLatest } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
+import { Text } from '../Text';
 import AmPmSwitcher from './AmPmSwitcher';
 import TimeInput from './TimeInput';
 import {
@@ -41,6 +42,8 @@ function TimeInputs({
 }: Props) {
     const dimensions = useWindowDimensions();
     const isLandscape = dimensions.width > dimensions.height;
+    const [hourError, setHourError] = useState(false);
+    const [minuteError, setMinuteError] = useState(false);
 
     timePickerInputsStyles.useVariants({
         state: resolveStateVariant({
@@ -50,6 +53,17 @@ function TimeInputs({
     const startInput = useRef<TextInputNative | null>(null);
     const endInput = useRef<TextInputNative | null>(null);
 
+    useEffect(() => {
+        if (inputType !== 'keyboard') {
+            setHourError(false);
+            setMinuteError(false);
+            return;
+        }
+
+        const id = setTimeout(() => startInput.current?.focus(), 0);
+        return () => clearTimeout(id);
+    }, [inputType]);
+
     const onSubmitStartInput = useCallback(() => {
         if (endInput.current) {
             endInput.current.focus();
@@ -61,6 +75,9 @@ function TimeInputs({
     }, []);
 
     const minutesRef = useLatest(minutes);
+    const isPm = hours >= 12;
+    const hourErrorText = is24Hour ? 'Hour must be 0-23' : 'Hour must be 1-12';
+    const minuteErrorText = 'Minute must be 0-59';
     const onChangeHours = useCallback(
         (newHours: number) => {
             onChange({
@@ -73,74 +90,139 @@ function TimeInputs({
     );
 
     const onHourChange = useCallback(
-        (newHoursFromInput: number) => {
+        (newHoursFromInput: number, text: string) => {
+            if (text.length === 0) {
+                setHourError(false);
+                return;
+            }
+
+            const isNumeric = /^\d+$/.test(text);
+            const minHours = is24Hour ? 0 : 1;
+            const maxHours = is24Hour ? 23 : 12;
+            const isValid =
+                isNumeric && newHoursFromInput >= minHours && newHoursFromInput <= maxHours;
+
+            setHourError(!isValid);
+
+            if (!isValid) {
+                return;
+            }
+
             let newHours = newHoursFromInput;
-            if (newHoursFromInput >= 24) {
-                newHours = 0;
+            if (!is24Hour) {
+                if (isPm) {
+                    newHours = newHoursFromInput === 12 ? 12 : newHoursFromInput + 12;
+                } else {
+                    newHours = newHoursFromInput === 12 ? 0 : newHoursFromInput;
+                }
             }
+
             onChange({
                 hours: newHours,
-                minutes,
+                minutes: minutesRef.current,
             });
+
+            const maxStartDigit = is24Hour ? 2 : 1;
+            const shouldAdvance = text.length >= 2 || newHoursFromInput > maxStartDigit;
+            if (shouldAdvance) endInput.current?.focus();
         },
-        [minutes, onChange],
+        [is24Hour, isPm, minutesRef, onChange],
     );
 
     const onMinuteChange = useCallback(
-        (newMinutesFromInput: number) => {
-            let newMinutes = newMinutesFromInput;
+        (newMinutesFromInput: number, text: string) => {
+            if (text.length === 0) {
+                setMinuteError(false);
+                return;
+            }
+
+            const isNumeric = /^\d+$/.test(text);
+            const isValid = isNumeric && newMinutesFromInput >= 0 && newMinutesFromInput <= 59;
 
-            if (newMinutesFromInput > 59) {
-                newMinutes = 0;
+            setMinuteError(!isValid);
+
+            if (!isValid) {
+                return;
             }
+
             onChange({
                 hours: hours,
-                minutes: newMinutes,
+                minutes: newMinutesFromInput,
             });
         },
         [hours, onChange],
     );
 
     return (
-        <View style={timePickerInputsStyles.inputContainer}>
-            <TimeInput
-                ref={startInput}
-                placeholder={'00'}
-                value={toHourInputFormat(hours, is24Hour)}
-                clockType={clockTypes.hours}
-                pressed={focused === clockTypes.hours}
-                onPress={onFocusInput}
-                inputType={inputType}
-                returnKeyType={'next'}
-                onSubmitEditing={onSubmitStartInput}
-                blurOnSubmit={false}
-                onChanged={onHourChange}
-                // onChangeText={onChangeStartInput}
-            />
-            <View style={timePickerInputsStyles.hoursAndMinutesSeparator}>
-                <View style={timePickerInputsStyles.spaceDot} />
-                <View style={timePickerInputsStyles.dot} />
-                <View style={timePickerInputsStyles.betweenDot} />
-                <View style={timePickerInputsStyles.dot} />
-                <View style={timePickerInputsStyles.spaceDot} />
+        <View style={timePickerInputsStyles.wrapper}>
+            <View style={timePickerInputsStyles.inputContainer}>
+                <TimeInput
+                    ref={startInput}
+                    placeholder={''}
+                    value={toHourInputFormat(hours, is24Hour)}
+                    clockType={clockTypes.hours}
+                    pressed={focused === clockTypes.hours}
+                    onPress={onFocusInput}
+                    inputType={inputType}
+                    returnKeyType={'next'}
+                    onSubmitEditing={onSubmitStartInput}
+                    blurOnSubmit={false}
+                    error={hourError}
+                    onChanged={onHourChange}
+                    // onChangeText={onChangeStartInput}
+                />
+                <View style={timePickerInputsStyles.hoursAndMinutesSeparator}>
+                    <View style={timePickerInputsStyles.spaceDot} />
+                    <View style={timePickerInputsStyles.dot} />
+                    <View style={timePickerInputsStyles.betweenDot} />
+                    <View style={timePickerInputsStyles.dot} />
+                    <View style={timePickerInputsStyles.spaceDot} />
+                </View>
+                <TimeInput
+                    ref={endInput}
+                    placeholder={'00'}
+                    value={minutes}
+                    clockType={clockTypes.minutes}
+                    pressed={focused === clockTypes.minutes}
+                    onPress={onFocusInput}
+                    inputType={inputType}
+                    error={minuteError}
+                    onSubmitEditing={onSubmitEndInput}
+                    onChanged={onMinuteChange}
+                />
+                {!is24Hour && (
+                    <>
+                        <View style={timePickerInputsStyles.spaceBetweenInputsAndSwitcher} />
+                        <AmPmSwitcher hours={hours} onChange={onChangeHours} />
+                    </>
+                )}
             </View>
-            <TimeInput
-                ref={endInput}
-                placeholder={'00'}
-                value={minutes}
-                clockType={clockTypes.minutes}
-                pressed={focused === clockTypes.minutes}
-                onPress={onFocusInput}
-                inputType={inputType}
-                onSubmitEditing={onSubmitEndInput}
-                onChanged={onMinuteChange}
-            />
-            {!is24Hour && (
-                <>
-                    <View style={timePickerInputsStyles.spaceBetweenInputsAndSwitcher} />
-                    <AmPmSwitcher hours={hours} onChange={onChangeHours} />
-                </>
-            )}
+            {inputType === 'keyboard' ? (
+                <View style={timePickerInputsStyles.supportingRow}>
+                    <View style={timePickerInputsStyles.supportingSlot}>
+                        <Text
+                            style={[
+                                timePickerInputsStyles.supportingText,
+                                hourError ? timePickerInputsStyles.supportingTextError : null,
+                            ]}>
+                            {hourError ? hourErrorText : 'Hour'}
+                        </Text>
+                    </View>
+                    <View style={timePickerInputsStyles.hoursAndMinutesSeparator} />
+                    <View style={timePickerInputsStyles.supportingSlot}>
+                        <Text
+                            style={[
+                                timePickerInputsStyles.supportingText,
+                                minuteError ? timePickerInputsStyles.supportingTextError : null,
+                            ]}>
+                            {minuteError ? minuteErrorText : 'Minute'}
+                        </Text>
+                    </View>
+                    {!is24Hour && (
+                        <View style={timePickerInputsStyles.spaceBetweenInputsAndSwitcher} />
+                    )}
+                </View>
+            ) : null}
         </View>
     );
 }