@hero-design/rn 8.103.3 → 8.103.5

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -6,10 +6,10 @@ import TextInput from '../TextInput';
 import IOSDatePickerDialog from './Dialog/IOSDialog';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
-import type { DatePickerProps } from './types';
+import type { InternalDatePickerProps } from './types';
 
 type DatePickerIOSProps = Omit<
-  DatePickerProps,
+  InternalDatePickerProps,
   'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
 > & {
   variant?: 'default' | 'month-year';
@@ -33,6 +33,7 @@ const DatePickerIOS = ({
   variant = 'default',
   locale,
   renderSelectedValue,
+  TextInputComponent,
 }: DatePickerIOSProps) => {
   const [open, setOpen] = useState(false);
   const { lang: defaultLocale } = useLocale();
@@ -44,10 +45,12 @@ const DatePickerIOS = ({
 
   useCalculateDate({ minDate, maxDate, onChange, value });
 
+  const InputComponent = TextInputComponent || TextInput;
+
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="datePickerInputIOS">
-        <TextInput
+        <InputComponent
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"

package/src/components/DatePicker/Dialog/IOSDialog.tsx

@@ -50,6 +50,11 @@ const IOSDatePickerDialog = ({
       supportedOrientations={supportedOrientations}
     >
       <StyledPickerWrapper>
+        {/*
+          For native pickers like MonthYearPickerViewIOS, using style={{ height: '100%', width: '100%' }} ensures the picker fills the parent container.
+          This is because many native views (especially iOS pickers) do not always respect flexbox properties like flex: 1,
+          and may render as empty or collapsed if not given explicit width/height. Using '100%' makes the picker reliably fill the available space.
+        */}
         {variant === 'month-year' ? (
           <MonthYearPickerViewIOS
             value={selectingDate}
@@ -57,12 +62,12 @@ const IOSDatePickerDialog = ({
             minimumDate={minDate}
             textColor={theme.colors.onDefaultGlobalSurface}
             maximumDate={maxDate}
+            style={{ height: '100%', width: '100%' }}
             onChange={(date: Date | undefined) => {
               if (date) {
                 setSelectingDate(date);
               }
             }}
-            style={{ flex: 1 }}
           />
         ) : null}
         {variant === 'default' ? (

package/src/components/DatePicker/Dialog.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import IOSDatePickerDialog from './Dialog/IOSDialog';
+import AndroidDatePickerDialog from './Dialog/AndroidDialog';
+import { DatePickerDialogProps } from './Dialog/type';
+
+const Dialog = ({ ...props }: DatePickerDialogProps) => {
+  if (Platform.OS === 'ios') {
+    return <IOSDatePickerDialog {...props} />;
+  }
+
+  return <AndroidDatePickerDialog {...props} />;
+};
+
+export default Dialog;

package/src/components/DatePicker/index.internal.tsx

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'react';
+import DatePicker from './DatePicker';
+import { InternalDatePickerProps } from './types';
+import Dialog from './Dialog';
+
+export type { InternalDatePickerProps as DatePickerProps };
+
+const InternalDatePicker =
+  DatePicker as FunctionComponent<InternalDatePickerProps>;
+export default Object.assign(InternalDatePicker, { Dialog });

package/src/components/DatePicker/index.tsx

@@ -1,30 +1,7 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import DatePickerAndroid from './DatePickerAndroid';
-import DatePickerCalendar from './DatePickerCalendar';
-import DatePickerIOS from './DatePickerIOS';
-import type { DatePickerProps } from './types';
-import IOSDatePickerDialog from './Dialog/IOSDialog';
-import AndroidDatePickerDialog from './Dialog/AndroidDialog';
-import { DatePickerDialogProps } from './Dialog/type';
+import { FunctionComponent } from 'react';
+import DatePicker from './DatePicker';
+import { DatePickerProps } from './types';
+import Dialog from './Dialog';
 
-const DatePicker = ({ variant = 'default', ...props }: DatePickerProps) => {
-  if (variant === 'calendar') {
-    return <DatePickerCalendar {...props} />;
-  }
-  if (Platform.OS === 'ios') {
-    return <DatePickerIOS {...props} variant={variant} />;
-  }
-
-  return <DatePickerAndroid {...props} variant={variant} />;
-};
-
-const Dialog = ({ ...props }: DatePickerDialogProps) => {
-  if (Platform.OS === 'ios') {
-    return <IOSDatePickerDialog {...props} />;
-  }
-
-  return <AndroidDatePickerDialog {...props} />;
-};
-
-export default Object.assign(DatePicker, { Dialog });
+const PublicDatePicker = DatePicker as FunctionComponent<DatePickerProps>;
+export default Object.assign(PublicDatePicker, { Dialog });

package/src/components/DatePicker/types.ts

@@ -3,6 +3,7 @@ import type {
   StyleProp,
   ViewStyle,
 } from 'react-native';
+import { TextInputProps } from '../TextInput';
 
 export interface DatePickerProps {
   /**
@@ -100,3 +101,8 @@ export interface DatePickerProps {
     props?: NativeTextInputProps
   ) => React.ReactNode;
 }
+
+// Add an internal prop type for TextInputComponent, not exported
+export interface InternalDatePickerProps extends DatePickerProps {
+  TextInputComponent?: React.ComponentType<TextInputProps>;
+}

package/src/components/PinInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -258,7 +258,7 @@ exports[`rendering renders correctly 1`] = `
     <TextInput
       autoFocus={false}
       editable={true}
-      keyboardType="numeric"
+      inputMode="numeric"
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
@@ -573,7 +573,7 @@ exports[`rendering renders correctly when disabled 1`] = `
     <TextInput
       autoFocus={false}
       editable={false}
-      keyboardType="numeric"
+      inputMode="numeric"
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
@@ -1018,7 +1018,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
     <TextInput
       autoFocus={false}
       editable={true}
-      keyboardType="numeric"
+      inputMode="numeric"
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
@@ -1386,7 +1386,7 @@ exports[`rendering renders correctly when there is error 1`] = `
     <TextInput
       autoFocus={false}
       editable={true}
-      keyboardType="numeric"
+      inputMode="numeric"
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
@@ -1702,7 +1702,7 @@ exports[`rendering renders correctly with textContentType and autoComplete 1`] =
       autoComplete="one-time-code"
       autoFocus={false}
       editable={true}
-      keyboardType="numeric"
+      inputMode="numeric"
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}

package/src/components/PinInput/index.tsx

@@ -231,7 +231,7 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
           onFocus={focus}
           onBlur={blur}
           pointerEvents="none"
-          keyboardType="numeric"
+          inputMode="numeric"
           testID="pin-hidden-input"
           textContentType={textContentType}
           autoComplete={autoComplete}

package/src/components/TextInput/index.tsx

@@ -13,11 +13,13 @@ import {
   View,
 } from 'react-native';
 import type {
-  TextInputProps as NativeTextInputProps,
+  TextInputProps as RNTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
   LayoutChangeEvent,
+  NativeSyntheticEvent,
+  TextInputFocusEventData,
 } from 'react-native';
 import {
   StyledTextInputContainer,
@@ -49,6 +51,23 @@ export type TextInputHandles = Pick<
 
 export type TextInputVariant = 'text' | 'textarea';
 
+type NativeTextInputProps = Omit<RNTextInputProps, 'onFocus' | 'onBlur'> & {
+  onFocus?: (
+    event?: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => void | undefined;
+  onBlur?: (
+    event?: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => void | undefined;
+};
+
+export interface TextInputRef {
+  focus: () => void;
+  blur: () => void;
+  clear: () => void;
+  isFocused: () => boolean;
+  setNativeProps?: (props: RNTextInputProps) => void;
+}
+
 export interface TextInputProps extends NativeTextInputProps {
   /**
    * Field label.
@@ -118,7 +137,10 @@ export interface TextInputProps extends NativeTextInputProps {
   /**
    * Customise input value renderer
    */
-  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  renderInputValue?: (
+    inputProps: NativeTextInputProps,
+    ref?: React.ForwardedRef<TextInputRef>
+  ) => React.ReactNode;
   /**
    * Component ref.
    */
@@ -197,12 +219,15 @@ export const renderInput = ({
   variant: TextInputVariant;
   nativeInputProps: NativeTextInputProps;
   multiline?: boolean;
-  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  renderInputValue?: (
+    inputProps: NativeTextInputProps,
+    ref?: React.Ref<TextInputRef>
+  ) => React.ReactNode;
   ref?: React.Ref<RNTextInput>;
   theme: Theme;
 }) => {
   return renderInputValue ? (
-    renderInputValue(nativeInputProps)
+    renderInputValue(nativeInputProps, ref)
   ) : (
     <StyledTextInput
       {...nativeInputProps}

package/src/components/TimePicker/TimePicker.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import TimePickerAndroid from './TimePickerAndroid';
+import TimePickerIOS from './TimePickerIOS';
+import type { InternalTimePickerProps } from './types';
+
+const TimePicker = (props: InternalTimePickerProps) => {
+  if (Platform.OS === 'ios') {
+    return <TimePickerIOS {...props} />;
+  }
+
+  return <TimePickerAndroid {...props} />;
+};
+
+export default TimePicker;

package/src/components/TimePicker/TimePickerAndroid.tsx

@@ -4,7 +4,7 @@ import { TouchableOpacity, View } from 'react-native';
 import formatTime from 'date-fns/fp/format';
 
 import TextInput from '../TextInput';
-import type { TimePickerProps } from './types';
+import type { InternalTimePickerProps } from './types';
 
 const TimePickerAndroid = ({
   value,
@@ -19,17 +19,20 @@ const TimePickerAndroid = ({
   style,
   testID,
   showSuffix = true,
-}: TimePickerProps) => {
+  TextInputComponent,
+}: InternalTimePickerProps) => {
   const [open, setOpen] = useState(false);
 
   const is12Hour = displayFormat.includes('hh');
   const displayValue = value ? formatTime(displayFormat, value) : '';
   const pickerInitValue = value || new Date();
 
+  const InputComponent = TextInputComponent || TextInput;
+
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="timePickerInputAndroid">
-        <TextInput
+        <InputComponent
           label={label}
           value={displayValue}
           suffix={showSuffix ? 'clock-3' : undefined}

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -7,7 +7,7 @@ import BottomSheet from '../BottomSheet';
 import TextInput from '../TextInput';
 import Button from '../Button';
 import { StyledPickerWrapper } from './StyledTimePicker';
-import type { TimePickerProps } from './types';
+import type { InternalTimePickerProps } from './types';
 import { useTheme } from '../../theme';
 
 const TimePickerIOS = ({
@@ -25,7 +25,8 @@ const TimePickerIOS = ({
   testID,
   showSuffix = true,
   supportedOrientations = ['portrait'],
-}: TimePickerProps) => {
+  TextInputComponent,
+}: InternalTimePickerProps) => {
   const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
   const [open, setOpen] = useState(false);
 
@@ -33,6 +34,8 @@ const TimePickerIOS = ({
   const displayValue = value ? formatTime(displayFormat, value) : '';
   const theme = useTheme();
 
+  const InputComponent = TextInputComponent || TextInput;
+
   useEffect(() => {
     setSelectingDate(value || new Date());
   }, [value]);
@@ -40,7 +43,7 @@ const TimePickerIOS = ({
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="timePickerInputIOS">
-        <TextInput
+        <InputComponent
           label={label}
           value={displayValue}
           suffix={showSuffix ? 'clock-3' : undefined}

package/src/components/TimePicker/index.internal.tsx

@@ -0,0 +1,9 @@
+import { FunctionComponent } from 'react';
+import { InternalTimePickerProps } from './types';
+import TimePicker from './TimePicker';
+
+const InternalTimePicker =
+  TimePicker as FunctionComponent<InternalTimePickerProps>;
+
+export type { InternalTimePickerProps as TimePickerProps };
+export default InternalTimePicker;

package/src/components/TimePicker/index.tsx

@@ -1,15 +1,6 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import TimePickerAndroid from './TimePickerAndroid';
-import TimePickerIOS from './TimePickerIOS';
+import { FunctionComponent } from 'react';
 import type { TimePickerProps } from './types';
+import TimePicker from './TimePicker';
 
-const TimePicker = (props: TimePickerProps) => {
-  if (Platform.OS === 'ios') {
-    return <TimePickerIOS {...props} />;
-  }
-
-  return <TimePickerAndroid {...props} />;
-};
-
-export default TimePicker;
+const PublicTimePicker = TimePicker as FunctionComponent<TimePickerProps>;
+export default PublicTimePicker;

package/src/components/TimePicker/types.ts

@@ -1,4 +1,5 @@
 import type { StyleProp, ViewStyle } from 'react-native';
+import { TextInputProps } from '../TextInput';
 
 export interface TimePickerProps {
   /**
@@ -61,3 +62,8 @@ export interface TimePickerProps {
    */
   supportedOrientations?: ('portrait' | 'landscape')[];
 }
+
+// Add an internal prop type for TextInputComponent, not exported
+export interface InternalTimePickerProps extends TimePickerProps {
+  TextInputComponent?: React.ComponentType<TextInputProps>;
+}

package/src/index.internal.ts

@@ -1,5 +1,12 @@
 import Select from './components/Select/index.internal';
+import DatePicker from './components/DatePicker/index.internal';
+import TimePicker from './components/TimePicker/index.internal';
 
 export * from '.';
-export { Select };
-export type { MultiSelectProps, SingleSelectProps } from './types.internal';
+export type {
+  MultiSelectProps,
+  SingleSelectProps,
+  DatePickerProps,
+  TimePickerProps,
+} from './types.internal';
+export { Select, DatePicker, TimePicker };

package/src/types.internal.ts

@@ -1,8 +1,15 @@
+import { DatePickerProps } from './components/DatePicker/index.internal';
 import type {
   SingleSelectProps,
   MultiSelectProps,
 } from './components/Select/index.internal';
+import { TimePickerProps } from './components/TimePicker/index.internal';
 
 export * from './types';
 
-export { SingleSelectProps, MultiSelectProps };
+export {
+  SingleSelectProps,
+  MultiSelectProps,
+  DatePickerProps,
+  TimePickerProps,
+};

package/src/types.ts

@@ -49,6 +49,8 @@ import { TitleProps } from './components/Typography/Title';
 import { CarouselData, CarouselImageProps } from './components/Carousel/types';
 import { PinInputHandler } from './components/PinInput';
 import { ThemeScale } from './components/Box/types';
+import { TimePickerProps } from './components/TimePicker/types';
+import { DatePickerProps } from './components/DatePicker/types';
 
 export type {
   Space,
@@ -101,4 +103,6 @@ export type {
   ListItemProps,
   IconButtonProps,
   BadgeProps,
+  TimePickerProps,
+  DatePickerProps,
 };

package/stats/8.103.3/rn-stats.html

@@ -4840,5 +4840,3 @@ var drawChart = (function (exports) {
 </body>
 </html>
 
-l>
-