@utilitywarehouse/hearth-react-native 0.36.2 → 0.36.3

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

@@ -13,6 +13,7 @@ export interface DatePickerContextType extends DatePickerBaseProps {
     onSelectYear: (year: number) => void;
     onChangeMonth: (value: number) => void;
     onChangeYear: (value: number) => void;
+    onConfirm: () => void;
     closeDatePicker: () => void;
 }
 export declare const DatePickerContext: import("react").Context<DatePickerContextType>;

package/build/components/DatePicker/DatePicker.js

@@ -155,6 +155,9 @@ const DateTimePicker = (props) => {
     }, initialState);
     const stateRef = useRef(state);
     stateRef.current = state;
+    // Tracks whether a selection was made since the sheet last opened, so Ok doesn't
+    // re-emit onChange for a value it already just committed via onSelectDate.
+    const hasChangedRef = useRef(false);
     useEffect(() => {
         const newState = {
             ...initialState,
@@ -238,6 +241,7 @@ const DateTimePicker = (props) => {
         dispatch({ type: CalendarActionKind.SET_CALENDAR_VIEW, payload: view });
     }, []);
     const onSelectDate = useCallback((selectedDate) => {
+        hasChangedRef.current = true;
         if (onChange) {
             if (mode === 'single') {
                 const newDate = timePicker
@@ -336,6 +340,26 @@ const DateTimePicker = (props) => {
             }
         }
     }, [mode, timePicker, min, max, timeZone]);
+    const onConfirm = useCallback(() => {
+        if (!onChange || hasChangedRef.current)
+            return;
+        const current = stateRef.current;
+        if (mode === 'single' && current.date) {
+            onChange({ date: dayjs(current.date).toDate() });
+        }
+        else if (mode === 'range' && current.startDate) {
+            onChange({
+                startDate: dayjs(current.startDate).toDate(),
+                endDate: current.endDate ? dayjs(current.endDate).toDate() : current.endDate,
+            });
+        }
+        else if (mode === 'multiple' && current.dates?.length) {
+            onChange({
+                dates: current.dates.map(item => dayjs(item).toDate()),
+                change: 'updated',
+            });
+        }
+    }, [mode, onChange]);
     // set the active displayed month
     const onSelectMonth = useCallback((value) => {
         const currentMonth = dayjs(stateRef.current.currentDate).month();
@@ -449,6 +473,7 @@ const DateTimePicker = (props) => {
         onSelectYear,
         onChangeMonth,
         onChangeYear,
+        onConfirm,
         onCancel,
     }), [
         setCalendarView,
@@ -457,6 +482,7 @@ const DateTimePicker = (props) => {
         onSelectYear,
         onChangeMonth,
         onChangeYear,
+        onConfirm,
         onCancel,
     ]);
     const memoizedValue = useMemo(() => ({
@@ -466,6 +492,7 @@ const DateTimePicker = (props) => {
     }), [state, baseContextValue, handlerContextValue]);
     const handleChange = useCallback((index) => {
         if (index > -1) {
+            hasChangedRef.current = false;
             // Add a small delay to ensure the bottom sheet is fully rendered
             setTimeout(() => {
                 // Announce to screen readers

package/build/components/DatePicker/DatePickerFooter.js

@@ -4,14 +4,18 @@ import { StyleSheet } from 'react-native-unistyles';
 import { Button } from '../Button';
 import { useDatePickerContext } from './DatePicker.context';
 const Footer = () => {
-    const { closeDatePicker, onCancel } = useDatePickerContext();
+    const { closeDatePicker, onConfirm, onCancel } = useDatePickerContext();
     const handleCancel = () => {
         if (onCancel) {
             onCancel();
         }
         closeDatePicker();
     };
-    return (_jsxs(View, { style: styles.container, testID: "footer", children: [_jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: handleCancel, children: "Cancel" }), _jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: closeDatePicker, children: "Ok" })] }));
+    const handleConfirm = () => {
+        onConfirm();
+        closeDatePicker();
+    };
+    return (_jsxs(View, { style: styles.container, testID: "footer", children: [_jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: handleCancel, children: "Cancel" }), _jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: handleConfirm, children: "Ok" })] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

package/build/components/DatePickerInput/DatePickerInput.d.ts

@@ -4,7 +4,7 @@ import type DatePickerInputProps from './DatePickerInput.props';
  * attached calendar, formatting and parsing the value with Day.js.
  */
 declare const DatePickerInput: {
-    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, label, labelVariant, helperText, helperIcon, validText, invalidText, required, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }: DatePickerInputProps): import("react").JSX.Element;
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, disableManualEntry, label, labelVariant, helperText, helperIcon, validText, invalidText, required, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }: DatePickerInputProps): import("react").JSX.Element;
     displayName: string;
 };
 export default DatePickerInput;

package/build/components/DatePickerInput/DatePickerInput.js

@@ -3,7 +3,7 @@ import { CalendarSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-reac
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Keyboard, Platform } from 'react-native';
+import { Keyboard, Platform, Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { DatePicker } from '../DatePicker';
 import { useFormFieldContext } from '../FormField';
@@ -16,7 +16,7 @@ dayjs.extend(customParseFormat);
  * Use DatePickerInput for a text field that accepts a typed date or one picked from an
  * attached calendar, formatting and parsing the value with Day.js.
  */
-const DatePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, format = DEFAULT_FORMAT, openButtonLabel = 'Open date picker', autoCloseOnSelect = true, label, labelVariant, helperText, helperIcon, validText, invalidText, required = true, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }) => {
+const DatePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, format = DEFAULT_FORMAT, openButtonLabel = 'Open date picker', autoCloseOnSelect = true, disableManualEntry = false, label, labelVariant, helperText, helperIcon, validText, invalidText, required = true, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const isDisabled = formFieldContext?.disabled ?? disabled;
     const isReadonly = formFieldContext?.readonly ?? readonly;
@@ -105,18 +105,24 @@ const DatePickerInput = ({ validationStatus = 'initial', disabled, focused, read
         pickerRef.current?.close?.();
     }, [pickerOnCancel]);
     const placeholderValue = placeholder ?? format;
-    return (_jsxs(_Fragment, { children: [_jsxs(Input, { validationStatus: validationStatus, disabled: disabled, readonly: readonly, focused: focused, label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, style: styles.wrap, accessible: false, children: [_jsx(InputField, { editable: !isReadonly && !isDisabled, value: inputValue, placeholder: placeholderValue, onChangeText: handleTextChange, onBlur: handleBlur, onFocus: handleFocus, inBottomSheet: inBottomSheet, keyboardType: resolvedKeyboardType, inputMode: resolvedInputMode, accessibilityHint: resolvedAccessibilityHint, "aria-label": "Date input", accessibilityLabel: resolvedAccessibilityLabel, accessible: resolvedAccessible, accessibilityState: {
-                            disabled: isDisabled || isReadonly,
-                        }, importantForAccessibility: resolvedImportantForAccessibility, inputAccessoryViewID: Platform.OS === 'ios' ? accessoryViewID : undefined, ...textInputProps, style: [styles.input, inputStyle] }), !!inputValue && onClear && !isReadonly && !isDisabled && (_jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: "Clear date", accessibilityHint: "Removes the current date", icon: CloseSmallIcon, onPress: handleClear }) })), _jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: openButtonLabel, accessibilityHint: "Opens the date picker calendar", icon: CalendarSmallIcon, onPress: openPicker, disabled: isDisabled || isReadonly }) })] }), _jsx(DatePicker, { ref: pickerRef, mode: "single", date: selectedDate, onChange: handlePickerChange, onCancel: handleCancel, ...restDatePickerProps }), Platform.OS === 'ios' && accessoryViewID && (_jsx(DatePickerInputDoneButton, { accessoryViewID: accessoryViewID, closeKeyboard: closeKeyboard }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Input, { validationStatus: validationStatus, disabled: disabled, readonly: readonly, focused: focused, label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, style: styles.wrap, accessible: false, children: [_jsx(Pressable, { style: styles.fieldPressable, disabled: !disableManualEntry || isDisabled || isReadonly, onPress: openPicker, children: _jsx(InputField, { value: inputValue, placeholder: placeholderValue, onChangeText: handleTextChange, onBlur: handleBlur, onFocus: handleFocus, inBottomSheet: inBottomSheet, keyboardType: resolvedKeyboardType, inputMode: resolvedInputMode, accessibilityHint: resolvedAccessibilityHint, "aria-label": "Date input", accessibilityLabel: resolvedAccessibilityLabel, accessible: resolvedAccessible, accessibilityState: {
+                                disabled: isDisabled || isReadonly,
+                            }, importantForAccessibility: resolvedImportantForAccessibility, inputAccessoryViewID: Platform.OS === 'ios' ? accessoryViewID : undefined, ...textInputProps, editable: !isReadonly && !isDisabled && !disableManualEntry, style: [styles.input, inputStyle, disableManualEntry && styles.noPointerEvents] }) }), !!inputValue && onClear && !isReadonly && !isDisabled && (_jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: "Clear date", accessibilityHint: "Removes the current date", icon: CloseSmallIcon, onPress: handleClear }) })), _jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: openButtonLabel, accessibilityHint: "Opens the date picker calendar", icon: CalendarSmallIcon, onPress: openPicker, disabled: isDisabled || isReadonly }) })] }), _jsx(DatePicker, { ref: pickerRef, mode: "single", date: selectedDate, onChange: handlePickerChange, onCancel: handleCancel, ...restDatePickerProps }), Platform.OS === 'ios' && accessoryViewID && (_jsx(DatePickerInputDoneButton, { accessoryViewID: accessoryViewID, closeKeyboard: closeKeyboard }))] }));
 };
 DatePickerInput.displayName = 'DatePickerInput';
 const styles = StyleSheet.create(theme => ({
     wrap: {
         gap: theme.components.input.date.gap,
     },
+    fieldPressable: {
+        flex: 1,
+    },
     input: {
         paddingLeft: 0,
         paddingRight: 0,
     },
+    noPointerEvents: {
+        pointerEvents: 'none',
+    },
 }));
 export default DatePickerInput;

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

@@ -50,6 +50,13 @@ export interface DatePickerInputBaseProps {
      * When true (default), the calendar sheet is dismissed as soon as a date is picked.
      */
     autoCloseOnSelect?: boolean;
+    /**
+     * Blocks manual keyboard entry and makes tapping anywhere on the field open the
+     * calendar picker, instead of only the trailing calendar button. Independent of
+     * `disabled`/`readonly`, which still disable the whole field regardless of this prop.
+     * @default false
+     */
+    disableManualEntry?: boolean;
     /**
      * Additional props forwarded to the underlying DatePicker instance.
      */

package/build/components/TimePicker/TimePicker.js

@@ -27,6 +27,9 @@ const TimePicker = ({ timeZone, date, onChange, use12Hours, minuteInterval, hide
     const [currentDate, setCurrentDate] = useState(() => {
         return date ? dayjs.tz(date, timeZone) : dayjs().tz(timeZone);
     });
+    // Tracks whether a wheel change was made since the sheet last opened, so Ok
+    // doesn't re-emit onChange for a value it already just committed via the wheel.
+    const hasChangedRef = useRef(false);
     useEffect(() => {
         const nextDate = date ? dayjs.tz(date, timeZone) : dayjs().tz(timeZone);
         const isSameMinute = dayjs(currentDate).isSame(nextDate, 'minute');
@@ -39,6 +42,7 @@ const TimePicker = ({ timeZone, date, onChange, use12Hours, minuteInterval, hide
     }, []);
     const handleSelectDate = useCallback((selectedDate) => {
         const newDate = dayjs.tz(selectedDate ?? currentDate, timeZone);
+        hasChangedRef.current = true;
         if (!dayjs(currentDate).isSame(newDate, 'minute')) {
             setCurrentDate(newDate);
         }
@@ -49,10 +53,14 @@ const TimePicker = ({ timeZone, date, onChange, use12Hours, minuteInterval, hide
         closeTimePicker();
     }, [closeTimePicker, onCancel]);
     const handleConfirm = useCallback(() => {
+        if (!hasChangedRef.current) {
+            onChange?.({ date: currentDate ? dayjs(currentDate).toDate() : currentDate });
+        }
         closeTimePicker();
-    }, [closeTimePicker]);
+    }, [currentDate, onChange, closeTimePicker]);
     const handleChange = useCallback((index) => {
         if (index > -1) {
+            hasChangedRef.current = false;
             setTimeout(() => {
                 AccessibilityInfo.announceForAccessibility('Time picker opened.');
                 const targetRef = pickerViewRef.current;

package/build/components/TimePicker/TimePickerView.js

@@ -6,6 +6,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { formatNumber, getParsedDate } from '../DatePicker/utils';
 import TimePickerWheel from './TimePickerWheel';
+import { getClosestOption } from './utils';
 const createNumberList = (num, numerals, startFrom = 0) => {
     return Array.from({ length: num }, (_, i) => ({
         value: i + startFrom,
@@ -24,23 +25,6 @@ const createMinuteList = (interval, numerals) => {
             : `${formatNumber(value, numerals)}`,
     }));
 };
-const getClosestMinute = (value, options) => {
-    if (!options.length)
-        return value;
-    const values = options.map(option => option.value);
-    if (values.includes(value))
-        return value;
-    let closest = values[0] ?? value;
-    let closestDiff = Math.abs(value - closest);
-    values.forEach(optionValue => {
-        const diff = Math.abs(value - optionValue);
-        if (diff < closestDiff) {
-            closestDiff = diff;
-            closest = optionValue;
-        }
-    });
-    return closest;
-};
 const TimePickerView = ({ currentDate, onSelectDate, timeZone, use12Hours, minuteInterval = 1, }) => {
     const hours = useMemo(() => createNumberList(use12Hours ? 12 : 24, 'latn', use12Hours ? 1 : 0), [use12Hours]);
     const minutes = useMemo(() => createMinuteList(minuteInterval, 'latn'), [minuteInterval]);
@@ -50,7 +34,9 @@ const TimePickerView = ({ currentDate, onSelectDate, timeZone, use12Hours, minut
     ], []);
     const baseDate = currentDate;
     const { hour, hour12, minute, period } = getParsedDate(baseDate);
-    const minuteValue = useMemo(() => getClosestMinute(minute, minutes), [minute, minutes]);
+    const rawHour = use12Hours ? hour12 : hour;
+    const hourValue = useMemo(() => getClosestOption(rawHour, hours), [rawHour, hours]);
+    const minuteValue = useMemo(() => getClosestOption(minute, minutes), [minute, minutes]);
     const handleChangeHour = useCallback((value) => {
         let hour24 = value;
         if (use12Hours) {
@@ -85,7 +71,7 @@ const TimePickerView = ({ currentDate, onSelectDate, timeZone, use12Hours, minut
         const newDate = dayjs.tz(baseDate, timeZone).hour(newHour);
         onSelectDate(newDate);
     }, [baseDate, onSelectDate, timeZone, hour, hour12]);
-    return (_jsxs(View, { style: styles.container, testID: "time-selector", children: [_jsxs(View, { style: styles.timePickerContainer, children: [_jsx(View, { style: styles.wheelContainer, children: _jsx(TimePickerWheel, { value: use12Hours ? hour12 : hour, items: hours, setValue: handleChangeHour }) }), _jsx(BodyText, { style: styles.timeSeparator, size: "lg", children: ":" }), _jsx(View, { style: styles.wheelContainer, children: _jsx(TimePickerWheel, { value: minuteValue, items: minutes, setValue: handleChangeMinute }) })] }), use12Hours && period ? (_jsx(View, { style: styles.periodContainer, children: _jsx(TimePickerWheel, { value: period, items: periodOptions, setValue: handlePeriodChange }) })) : null] }));
+    return (_jsxs(View, { style: styles.container, testID: "time-selector", children: [_jsxs(View, { style: styles.timePickerContainer, children: [_jsx(View, { style: styles.wheelContainer, children: _jsx(TimePickerWheel, { value: hourValue, items: hours, setValue: handleChangeHour }) }), _jsx(BodyText, { style: styles.timeSeparator, size: "lg", children: ":" }), _jsx(View, { style: styles.wheelContainer, children: _jsx(TimePickerWheel, { value: minuteValue, items: minutes, setValue: handleChangeMinute }) })] }), use12Hours && period ? (_jsx(View, { style: styles.periodContainer, children: _jsx(TimePickerWheel, { value: period, items: periodOptions, setValue: handlePeriodChange }) })) : null] }));
 };
 const styles = StyleSheet.create({
     container: {

package/build/components/TimePicker/TimePickerWheel.web.js

@@ -34,7 +34,14 @@ const TimePickerWheel = ({ value, setValue = () => { }, items }) => {
     const height = 140;
     const radius = height / 2;
     const valueIndex = useMemo(() => {
-        return Math.max(0, items.findIndex(item => item.value === value));
+        const rawIndex = items.findIndex(item => item.value === value);
+        if (rawIndex === -1) {
+            if (__DEV__) {
+                console.warn(`TimePickerWheel: value "${value}" not found in items [${items.map(item => item.value).join(', ')}]; falling back to index 0.`);
+            }
+            return 0;
+        }
+        return rawIndex;
     }, [items, value]);
     const handlePanEnd = useCallback((deltaY) => {
         let newValueIndex = valueIndex - Math.round(deltaY / ((radius * 2) / displayCount));
@@ -81,7 +88,9 @@ const TimePickerWheel = ({ value, setValue = () => { }, items }) => {
             return items[targetIndex] || items[0];
         });
     }, [renderCount, valueIndex, items, circular]);
-    const currentIndex = Math.max(0, displayValues.findIndex(item => item?.value === value));
+    // displayValues is centered on valueIndex by construction, so the current item always
+    // sits at the middle index rather than needing a second findIndex/fallback lookup.
+    const currentIndex = Math.floor(renderCount / 2);
     return (_jsx(GestureDetector, { gesture: panGesture, children: _jsxs(View, { style: styles.container, children: [_jsx(View, { style: [
                         styles.selectedIndicator,
                         {

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

@@ -0,0 +1,9 @@
+import type { PickerOption } from './TimePicker.props';
+/**
+ * Snaps a value to the closest matching option's value. Used to guarantee the value
+ * handed to a wheel picker always exists in its own options list — an exact match is
+ * returned as-is, a numeric mismatch snaps to the nearest option by distance, and a
+ * non-numeric or unmatched value falls back to the first option, since a mismatched
+ * value has nothing for the wheel to scroll to.
+ */
+export declare const getClosestOption: <T extends number | string>(value: T, options: PickerOption[]) => T;

package/build/components/TimePicker/utils.js

@@ -0,0 +1,30 @@
+/**
+ * Snaps a value to the closest matching option's value. Used to guarantee the value
+ * handed to a wheel picker always exists in its own options list — an exact match is
+ * returned as-is, a numeric mismatch snaps to the nearest option by distance, and a
+ * non-numeric or unmatched value falls back to the first option, since a mismatched
+ * value has nothing for the wheel to scroll to.
+ */
+export const getClosestOption = (value, options) => {
+    if (!options.length)
+        return value;
+    const values = options.map(option => option.value);
+    if (values.includes(value))
+        return value;
+    const numericValues = values.filter((optionValue) => {
+        return typeof optionValue === 'number';
+    });
+    if (typeof value !== 'number' || Number.isNaN(value) || !numericValues.length) {
+        return (options[0]?.value ?? value);
+    }
+    let closest = numericValues[0];
+    let closestDiff = Math.abs(value - closest);
+    numericValues.forEach(optionValue => {
+        const diff = Math.abs(value - optionValue);
+        if (diff < closestDiff) {
+            closestDiff = diff;
+            closest = optionValue;
+        }
+    });
+    return closest;
+};

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

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

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

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { getClosestOption } from './utils';
+const minuteOptions = [0, 15, 30, 45].map(value => ({
+    value,
+    text: String(value),
+}));
+const periodOptions = [
+    { value: 'AM', text: 'AM' },
+    { value: 'PM', text: 'PM' },
+];
+describe('getClosestOption', () => {
+    it('returns the value unchanged when it matches an option exactly', () => {
+        expect(getClosestOption(30, minuteOptions)).toBe(30);
+    });
+    it('snaps a mismatched numeric value to the nearest option', () => {
+        expect(getClosestOption(20, minuteOptions)).toBe(15);
+        expect(getClosestOption(23, minuteOptions)).toBe(30);
+    });
+    it('returns the value unchanged when options is empty', () => {
+        expect(getClosestOption(37, [])).toBe(37);
+    });
+    it('falls back to the first option for a NaN value', () => {
+        expect(getClosestOption(NaN, minuteOptions)).toBe(0);
+    });
+    it('matches a non-numeric value against string options', () => {
+        expect(getClosestOption('PM', periodOptions)).toBe('PM');
+    });
+    it('falls back to the first option for an unmatched non-numeric value', () => {
+        expect(getClosestOption('unknown', periodOptions)).toBe('AM');
+    });
+});

package/build/components/TimePickerInput/TimePickerInput.d.ts

@@ -5,7 +5,7 @@ import type TimePickerInputProps from './TimePickerInput.props';
  * @summary A text input with a time picker trigger.
  */
 declare const TimePickerInput: {
-    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, label, labelVariant, helperText, helperIcon, validText, invalidText, required, onChange, onChangeText, onBlur, onFocus, value, timePickerProps, onClear, ...rest }: TimePickerInputProps): import("react").JSX.Element;
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, disableManualEntry, label, labelVariant, helperText, helperIcon, validText, invalidText, required, onChange, onChangeText, onBlur, onFocus, value, timePickerProps, onClear, ...rest }: TimePickerInputProps): import("react").JSX.Element;
     displayName: string;
 };
 export default TimePickerInput;

package/build/components/TimePickerInput/TimePickerInput.js

@@ -3,7 +3,7 @@ import { CloseSmallIcon, TimeSmallIcon } from '@utilitywarehouse/hearth-react-na
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Keyboard, Platform } from 'react-native';
+import { Keyboard, Platform, Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useFormFieldContext } from '../FormField';
 import { Input, InputField, InputSlot } from '../Input';
@@ -17,7 +17,7 @@ dayjs.extend(customParseFormat);
  * TimePicker for selecting the same value. Formats and parses input using Day.js.
  * @summary A text input with a time picker trigger.
  */
-const TimePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder = '--:--', inBottomSheet = false, format, openButtonLabel = 'Open time picker', autoCloseOnSelect = true, label, labelVariant, helperText, helperIcon, validText, invalidText, required = true, onChange, onChangeText, onBlur, onFocus, value, timePickerProps, onClear, ...rest }) => {
+const TimePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder = '--:--', inBottomSheet = false, format, openButtonLabel = 'Open time picker', autoCloseOnSelect = true, disableManualEntry = false, label, labelVariant, helperText, helperIcon, validText, invalidText, required = true, onChange, onChangeText, onBlur, onFocus, value, timePickerProps, onClear, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const isDisabled = formFieldContext?.disabled ?? disabled;
     const isReadonly = formFieldContext?.readonly ?? readonly;
@@ -108,18 +108,24 @@ const TimePickerInput = ({ validationStatus = 'initial', disabled, focused, read
         pickerRef.current?.close?.();
     }, [pickerOnCancel]);
     const placeholderValue = placeholder;
-    return (_jsxs(_Fragment, { children: [_jsxs(Input, { validationStatus: validationStatus, disabled: disabled, readonly: readonly, focused: focused, label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, style: styles.wrap, accessible: false, children: [_jsx(InputField, { editable: !isReadonly && !isDisabled, value: inputValue, placeholder: placeholderValue, onChangeText: handleTextChange, onBlur: handleBlur, onFocus: handleFocus, inBottomSheet: inBottomSheet, keyboardType: resolvedKeyboardType, inputMode: resolvedInputMode, accessibilityHint: resolvedAccessibilityHint, "aria-label": "Time input", accessibilityLabel: resolvedAccessibilityLabel, accessible: resolvedAccessible, accessibilityState: {
-                            disabled: isDisabled || isReadonly,
-                        }, importantForAccessibility: resolvedImportantForAccessibility, inputAccessoryViewID: Platform.OS === 'ios' ? accessoryViewID : undefined, ...textInputProps, style: [styles.input, inputStyle] }), !!inputValue && onClear && !isReadonly && !isDisabled && (_jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: "Clear time", accessibilityHint: "Removes the current time", icon: CloseSmallIcon, onPress: handleClear }) })), _jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: openButtonLabel, accessibilityHint: "Opens the time picker", icon: TimeSmallIcon, onPress: openPicker, disabled: isDisabled || isReadonly }) })] }), _jsx(TimePicker, { ref: pickerRef, date: selectedDate, onChange: handlePickerChange, onCancel: handleCancel, ...restTimePickerProps }), Platform.OS === 'ios' && accessoryViewID && (_jsx(TimePickerInputDoneButton, { accessoryViewID: accessoryViewID, closeKeyboard: closeKeyboard }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Input, { validationStatus: validationStatus, disabled: disabled, readonly: readonly, focused: focused, label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, style: styles.wrap, accessible: false, children: [_jsx(Pressable, { style: styles.fieldPressable, disabled: !disableManualEntry || isDisabled || isReadonly, onPress: openPicker, children: _jsx(InputField, { value: inputValue, placeholder: placeholderValue, onChangeText: handleTextChange, onBlur: handleBlur, onFocus: handleFocus, inBottomSheet: inBottomSheet, keyboardType: resolvedKeyboardType, inputMode: resolvedInputMode, accessibilityHint: resolvedAccessibilityHint, "aria-label": "Time input", accessibilityLabel: resolvedAccessibilityLabel, accessible: resolvedAccessible, accessibilityState: {
+                                disabled: isDisabled || isReadonly,
+                            }, importantForAccessibility: resolvedImportantForAccessibility, inputAccessoryViewID: Platform.OS === 'ios' ? accessoryViewID : undefined, ...textInputProps, editable: !isReadonly && !isDisabled && !disableManualEntry, style: [styles.input, inputStyle, disableManualEntry && styles.noPointerEvents] }) }), !!inputValue && onClear && !isReadonly && !isDisabled && (_jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: "Clear time", accessibilityHint: "Removes the current time", icon: CloseSmallIcon, onPress: handleClear }) })), _jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: openButtonLabel, accessibilityHint: "Opens the time picker", icon: TimeSmallIcon, onPress: openPicker, disabled: isDisabled || isReadonly }) })] }), _jsx(TimePicker, { ref: pickerRef, date: selectedDate, onChange: handlePickerChange, onCancel: handleCancel, ...restTimePickerProps }), Platform.OS === 'ios' && accessoryViewID && (_jsx(TimePickerInputDoneButton, { accessoryViewID: accessoryViewID, closeKeyboard: closeKeyboard }))] }));
 };
 TimePickerInput.displayName = 'TimePickerInput';
 const styles = StyleSheet.create(theme => ({
     wrap: {
         gap: theme.components.input.date.gap,
     },
+    fieldPressable: {
+        flex: 1,
+    },
     input: {
         paddingLeft: 0,
         paddingRight: 0,
     },
+    noPointerEvents: {
+        pointerEvents: 'none',
+    },
 }));
 export default TimePickerInput;

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

@@ -56,6 +56,13 @@ export interface TimePickerInputBaseProps {
      * When true (default), the picker sheet is dismissed as soon as a time is picked.
      */
     autoCloseOnSelect?: boolean;
+    /**
+     * Blocks manual keyboard entry and makes tapping anywhere on the field open the
+     * time picker, instead of only the trailing trigger button. Independent of
+     * `disabled`/`readonly`, which still disable the whole field regardless of this prop.
+     * @default false
+     */
+    disableManualEntry?: boolean;
     /**
      * Additional props forwarded to the underlying TimePicker instance.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.36.2",
+  "version": "0.36.3",
   "description": "Utility Warehouse React Native UI library",
   "license": "Apache-2.0",
   "repository": {
@@ -82,9 +82,9 @@
     "vitest": "^4.1.7",
     "@utilitywarehouse/hearth-fonts": "^0.1.1",
     "@utilitywarehouse/hearth-react-icons": "^0.9.2",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.9.2",
     "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.6.6",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.9.2",
     "@utilitywarehouse/hearth-tokens": "^0.4.7"
   },
   "peerDependencies": {

package/public/llms/components/date-picker.md

@@ -24,11 +24,17 @@ The `DatePicker` component presents a calendar experience in a bottom sheet so p
 <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
   <ViewWrap>
     <Button onPress={() => modalRef.current?.present()}>Show Date Picker</Button>
+    <BodyText>
+      {confirmedDate ? `Confirmed: ${dayjs(confirmedDate).format('YYYY-MM-DD')}` : 'Not confirmed'}
+    </BodyText>
     <DatePicker
       ref={modalRef}
       mode="single"
       date={selected}
-      onChange={({ date }) => setSelected(date)}
+      onChange={({ date }) => {
+        setSelected(date);
+        setConfirmedDate(date);
+      }}
       onCancel={() => setSelected(undefined)}
     />
   </ViewWrap>

package/public/llms/components/time-picker.md

@@ -14,6 +14,7 @@
 <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
   <ViewWrap>
     <Button onPress={() => modalRef.current?.present()}>Show Time Picker</Button>
+    <BodyText>{selected ? 'Confirmed' : 'Not confirmed'}</BodyText>
     <TimePicker
       ref={modalRef}
       date={selected}

package/public/llms/docs/introduction.md

@@ -1,7 +1,7 @@
 # Hearth React Native
 
 React Native component library for building UIs at Utility Warehouse.<br/>
-Current version: v0.36.2
+Current version: v0.36.3
 
 Hearth React Native is a comprehensive design system library for React Native, providing reusable components, consistent styling, and tools to streamline UI development. It is built to enhance productivity and maintain design consistency across projects.