@utilitywarehouse/hearth-react-native 0.3.1 → 0.4.1

package/build/components/DatePickerInput/DatePickerInput.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CalendarSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+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 { StyleSheet } from 'react-native-unistyles';
+import { DatePicker } from '../DatePicker';
+import { useFormFieldContext } from '../FormField';
+import { Input, InputField, InputSlot } from '../Input';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import DatePickerInputDoneButton from './DatePickerInputDoneButton';
+dayjs.extend(customParseFormat);
+const DEFAULT_FORMAT = 'DD/MM/YYYY';
+const maskDefaultFormat = (value) => {
+    const digitsOnly = value.replace(/\D/g, '').slice(0, 8);
+    const day = digitsOnly.slice(0, 2);
+    const month = digitsOnly.slice(2, 4);
+    const year = digitsOnly.slice(4, 8);
+    return [day, month, year].filter(Boolean).join('/');
+};
+const DatePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, format = DEFAULT_FORMAT, openButtonLabel = 'Open date picker', autoCloseOnSelect = true, onChange, onChangeText, onBlur, onFocus, value, datePickerProps, onClear, ...rest }) => {
+    const formFieldContext = useFormFieldContext();
+    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+    const isDisabled = formFieldContext?.disabled ?? disabled;
+    const isReadonly = formFieldContext?.readonly ?? readonly;
+    const pickerRef = useRef(null);
+    const accessoryViewID = useMemo(() => {
+        if (Platform.OS !== 'ios')
+            return undefined;
+        return `datepicker-input-${Math.random().toString(36).slice(2)}`;
+    }, []);
+    const formatDate = useCallback((dateValue) => {
+        if (!dateValue)
+            return '';
+        const parsed = dayjs(dateValue);
+        return parsed.isValid() ? parsed.format(format) : '';
+    }, [format]);
+    const isDefaultFormat = format === DEFAULT_FORMAT;
+    const [inputValue, setInputValue] = useState(() => formatDate(value));
+    useEffect(() => {
+        setInputValue(formatDate(value));
+    }, [value, formatDate]);
+    const handleTextChange = useCallback((text) => {
+        const nextValue = isDefaultFormat ? maskDefaultFormat(text) : text;
+        setInputValue(nextValue);
+        onChangeText?.(nextValue);
+        if (!nextValue) {
+            onChange?.({ date: undefined });
+            return;
+        }
+        const parsed = dayjs(nextValue, format, true);
+        if (parsed.isValid()) {
+            onChange?.({ date: parsed.toDate() });
+        }
+        else {
+            onChange?.({ date: undefined });
+        }
+    }, [format, isDefaultFormat, onChange, onChangeText]);
+    const handleClear = useCallback(() => {
+        setInputValue('');
+        onChange?.({ date: undefined });
+        onClear?.();
+    }, [onChange, onClear]);
+    const closeKeyboard = useCallback(() => {
+        Keyboard.dismiss();
+    }, []);
+    const openPicker = useCallback(() => {
+        if (isDisabled || isReadonly)
+            return;
+        closeKeyboard();
+        pickerRef.current?.present();
+    }, [closeKeyboard, isDisabled, isReadonly]);
+    const selectedDate = useMemo(() => {
+        if (value) {
+            return value;
+        }
+        const parsed = dayjs(inputValue, format, true);
+        return parsed.isValid() ? parsed.toDate() : undefined;
+    }, [value, inputValue, format]);
+    const handlePickerChange = useCallback(({ date }) => {
+        if (!date) {
+            handleClear();
+            return;
+        }
+        const formatted = formatDate(date);
+        setInputValue(formatted);
+        onChange?.({ date });
+        if (autoCloseOnSelect) {
+            pickerRef.current?.close?.();
+        }
+    }, [autoCloseOnSelect, formatDate, handleClear, onChange]);
+    const handleBlur = useCallback((event) => {
+        onBlur?.(event);
+    }, [onBlur]);
+    const handleFocus = useCallback((event) => {
+        onFocus?.(event);
+    }, [onFocus]);
+    const { onCancel: pickerOnCancel, ...restDatePickerProps } = datePickerProps ?? {};
+    const { style: inputStyle, keyboardType: keyboardTypeProp, inputMode: inputModeProp, accessibilityHint: accessibilityHintProp, accessibilityLabel: accessibilityLabelProp, accessible: accessibleProp, accessibilityRole: accessibilityRoleProp, importantForAccessibility: importantForAccessibilityProp, ...textInputProps } = rest;
+    const resolvedKeyboardType = keyboardTypeProp ?? (isDefaultFormat ? 'number-pad' : undefined);
+    const resolvedInputMode = inputModeProp ?? (isDefaultFormat ? 'numeric' : undefined);
+    const resolvedAccessibilityHint = accessibilityHintProp ?? `Enter the date in ${format} format`;
+    const resolvedAccessibilityLabel = accessibilityLabelProp ?? 'Date input';
+    const resolvedAccessible = accessibleProp ?? true;
+    const resolvedImportantForAccessibility = importantForAccessibilityProp ?? 'yes';
+    const handleCancel = useCallback(() => {
+        pickerOnCancel?.();
+        pickerRef.current?.close?.();
+    }, [pickerOnCancel]);
+    const placeholderValue = placeholder ?? format;
+    return (_jsxs(_Fragment, { children: [_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: isDisabled, readonly: isReadonly, focused: focused, 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 }))] }));
+};
+DatePickerInput.displayName = 'DatePickerInput';
+const styles = StyleSheet.create(theme => ({
+    wrap: {
+        gap: theme.components.input.date.gap,
+    },
+    input: {
+        paddingLeft: 0,
+        paddingRight: 0,
+    },
+}));
+export default DatePickerInput;

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

@@ -0,0 +1,47 @@
+import type { TextInputProps, ViewProps } from 'react-native';
+import type { DatePickerSingleProps } from '../DatePicker/DatePicker';
+import type { DateType } from '../DatePicker/DatePicker.props';
+export interface DatePickerInputBaseProps {
+    disabled?: boolean;
+    validationStatus?: 'initial' | 'valid' | 'invalid';
+    readonly?: boolean;
+    focused?: boolean;
+    placeholder?: string;
+    inBottomSheet?: boolean;
+    required?: boolean;
+    /**
+     * Controls how the selected date is formatted when displayed inside the input.
+     * Accepts any Day.js format string. When left as the default `DD/MM/YYYY`,
+     * the input automatically inserts separators as people type.
+     */
+    format?: string;
+    /**
+     * Accessible label announced when activating the calendar trigger button.
+     */
+    openButtonLabel?: string;
+    /**
+     * When true (default), the calendar sheet is dismissed as soon as a date is picked.
+     */
+    autoCloseOnSelect?: boolean;
+    /**
+     * Additional props forwarded to the underlying DatePicker instance.
+     */
+    datePickerProps?: Omit<DatePickerSingleProps, 'mode' | 'date' | 'onChange' | 'ref'>;
+    /**
+     * Handles cleared input values.
+     */
+    onClear?: () => void;
+}
+export type DatePickerInputProps = DatePickerInputBaseProps & Omit<TextInputProps, 'value' | 'onChange' | 'children'> & ViewProps & {
+    /**
+     * Controlled date value. Accepts Date, string, number or Day.js instances.
+     */
+    value?: DateType;
+    /**
+     * Fired after a valid date is parsed either from typing or the picker selection.
+     */
+    onChange?: (params: {
+        date: DateType;
+    }) => void;
+};
+export default DatePickerInputProps;

package/build/components/DatePickerInput/DatePickerInput.props.js

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

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

@@ -0,0 +1,8 @@
+declare const DatePickerInputDoneButton: {
+    ({ accessoryViewID, closeKeyboard, }: {
+        accessoryViewID: string;
+        closeKeyboard: () => void;
+    }): import("react/jsx-runtime").JSX.Element;
+    DisplayName: string;
+};
+export default DatePickerInputDoneButton;

package/build/components/DatePickerInput/DatePickerInputDoneButton.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputAccessoryView, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Button } from '../Button';
+const DatePickerInputDoneButton = ({ accessoryViewID, closeKeyboard, }) => {
+    return (_jsx(InputAccessoryView, { nativeID: accessoryViewID, children: _jsx(View, { style: styles.accessory, children: _jsx(Button, { accessibilityRole: "button", accessibilityLabel: "Done", onPress: closeKeyboard, variant: "ghost", colorScheme: "functional", children: "Done" }) }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    accessory: {
+        paddingHorizontal: 16,
+        paddingVertical: 2,
+        alignItems: 'flex-end',
+        backgroundColor: theme.color.surface.neutral.strong,
+        borderTopWidth: theme.borderWidth[1],
+        borderTopColor: theme.color.border.subtle,
+    },
+}));
+DatePickerInputDoneButton.DisplayName = 'DatePickerInputDoneButton';
+export default DatePickerInputDoneButton;

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

@@ -0,0 +1,5 @@
+declare const DatePickerInputDoneButton: {
+    (): null;
+    DisplayName: string;
+};
+export default DatePickerInputDoneButton;

package/build/components/DatePickerInput/DatePickerInputDoneButton.web.js

@@ -0,0 +1,5 @@
+const DatePickerInputDoneButton = () => {
+    return null;
+};
+DatePickerInputDoneButton.DisplayName = 'DatePickerInputDoneButton';
+export default DatePickerInputDoneButton;

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

@@ -0,0 +1,2 @@
+export { default as DatePickerInput } from './DatePickerInput';
+export type { default as DatePickerInputProps } from './DatePickerInput.props';

package/build/components/DatePickerInput/index.js

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

package/build/components/Input/InputField.d.ts

@@ -1,6 +1,6 @@
 import { TextInputProps } from 'react-native';
 declare const InputField: {
-    ({ style, onFocus, onBlur, inBottomSheet, ...props }: TextInputProps & {
+    ({ style, inBottomSheet, ...props }: TextInputProps & {
         inBottomSheet?: boolean;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/build/components/Input/InputField.js

@@ -4,7 +4,7 @@ import { TextInput as RNTextInput } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { useInputContext } from './Input.context';
-const InputField = ({ style, onFocus, onBlur, inBottomSheet = false, ...props }) => {
+const InputField = ({ style, inBottomSheet = false, ...props }) => {
     const { disabled, focused = false, type } = useInputContext();
     styles.useVariants({ focused, type });
     const { color } = useTheme();

package/build/components/Input/InputSlot.d.ts

@@ -1,6 +1,6 @@
 import { ViewProps } from 'react-native';
 declare const InputSlot: {
-    ({ children, style, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, accessible, importantForAccessibility, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default InputSlot;

package/build/components/Input/InputSlot.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StyleSheet } from 'react-native-unistyles';
 import { View } from 'react-native';
-const InputSlot = ({ children, style, ...props }) => {
-    return (_jsx(View, { ...props, style: [styles.container, style], children: children }));
+import { StyleSheet } from 'react-native-unistyles';
+const InputSlot = ({ children, style, accessible, importantForAccessibility, ...props }) => {
+    return (_jsx(View, { ...props, accessible: accessible ?? false, importantForAccessibility: importantForAccessibility ?? 'auto', style: [styles.container, style], children: children }));
 };
 InputSlot.displayName = 'InputSlot';
 const styles = StyleSheet.create({

package/build/components/UnstyledIconButton/UnstyledIconButton.js

@@ -17,10 +17,10 @@ UnstyledIconButtonSpinner.displayName = 'UnstyledIconButtonSpinner';
 UnstyledIconButtonIcon.displayName = 'UnstyledIconButtonIcon';
 const UnstyledIconButton = ({ icon, disabled = false, pressed, size = 'md', inverted = false, iconStyle, ...props }) => {
     const { disabled: groupDisabled, loading: groupLoading } = useButtonGroupContext();
-    const { loading } = props;
+    const { loading, accessibilityRole = 'button', accessible = true, focusable = true, importantForAccessibility = 'yes', ...restProps } = props;
     const isLoading = loading ?? groupLoading;
     const buttonDisabled = isLoading || (disabled ?? groupDisabled);
-    return (_jsx(UnstyledIconButtonComponent, { ...props, size: size, inverted: inverted, isDisabled: buttonDisabled, isPressed: pressed, icon: icon, children: loading ? (_jsx(UnstyledIconButtonSpinner, {})) : (_jsx(UnstyledIconButtonIcon, { as: icon, style: iconStyle })) }));
+    return (_jsx(UnstyledIconButtonComponent, { ...restProps, size: size, inverted: inverted, isDisabled: buttonDisabled, isPressed: pressed, accessibilityRole: accessibilityRole, accessible: accessible, focusable: focusable, importantForAccessibility: importantForAccessibility, icon: icon, children: loading ? (_jsx(UnstyledIconButtonSpinner, {})) : (_jsx(UnstyledIconButtonIcon, { as: icon, style: iconStyle })) }));
 };
 UnstyledIconButton.displayName = 'UnstyledIconButton';
 export default UnstyledIconButton;

package/build/components/UnstyledIconButton/UnstyledIconButtonRoot.js

@@ -7,7 +7,7 @@ const UnstyledIconButtonRoot = ({ size, inverted, states, ...props }) => {
     const { active, disabled } = states || {};
     styles.useVariants({ disabled, size });
     const value = useMemo(() => ({ disabled, active, inverted, size }), [disabled, active, inverted, size]);
-    return (_jsx(UnstyledIconButtonContext.Provider, { value: value, children: _jsx(Pressable, { ...props, style: [styles.container, props.style] }) }));
+    return (_jsx(UnstyledIconButtonContext.Provider, { value: value, children: _jsx(Pressable, { ...props, accessibilityState: { disabled: !!disabled, ...props.accessibilityState }, style: [styles.container, props.style] }) }));
 };
 UnstyledIconButtonRoot.displayName = 'UnstyledIconButtonRoot';
 const styles = StyleSheet.create(theme => ({

package/build/components/index.d.ts

@@ -9,6 +9,8 @@ export * from './Card';
 export * from './Center';
 export * from './Checkbox';
 export * from './CurrencyInput';
+export * from './DatePicker';
+export * from './DatePickerInput';
 export * from './DescriptionList';
 export * from './DetailText';
 export * from './Divider';

package/build/components/index.js

@@ -10,6 +10,8 @@ export * from './Card';
 export * from './Center';
 export * from './Checkbox';
 export * from './CurrencyInput';
+export * from './DatePicker';
+export * from './DatePickerInput';
 export * from './DescriptionList';
 export * from './DetailText';
 export * from './Divider';