@hero-design/rn 8.103.2 → 8.103.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.103.2",
+  "version": "8.103.4",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -92,10 +92,10 @@
     "eslint-config-hd": "8.42.5",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import DatePickerAndroid from './DatePickerAndroid';
+import DatePickerCalendar from './DatePickerCalendar';
+import DatePickerIOS from './DatePickerIOS';
+import type { InternalDatePickerProps } from './types';
+import TextInput from '../TextInput';
+
+const DatePicker = ({
+  variant = 'default',
+  TextInputComponent = TextInput,
+  ...props
+}: InternalDatePickerProps) => {
+  if (variant === 'calendar') {
+    return (
+      <DatePickerCalendar {...props} TextInputComponent={TextInputComponent} />
+    );
+  }
+  if (Platform.OS === 'ios') {
+    return (
+      <DatePickerIOS
+        {...props}
+        variant={variant}
+        TextInputComponent={TextInputComponent}
+      />
+    );
+  }
+
+  return (
+    <DatePickerAndroid
+      {...props}
+      variant={variant}
+      TextInputComponent={TextInputComponent}
+    />
+  );
+};
+
+export default DatePicker;

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -5,10 +5,10 @@ import TextInput from '../TextInput';
 import AndroidDatePickerDialog from './Dialog/AndroidDialog';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
-import type { DatePickerProps } from './types';
+import type { InternalDatePickerProps } from './types';
 
 type DatePickerAndroidProps = Omit<
-  DatePickerProps,
+  InternalDatePickerProps,
   'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
 > & {
   variant?: 'default' | 'month-year';
@@ -30,6 +30,7 @@ const DatePickerAndroid = ({
   variant = 'default',
   renderSelectedValue,
   locale,
+  TextInputComponent,
 }: DatePickerAndroidProps) => {
   const [open, setOpen] = useState(false);
 
@@ -41,10 +42,12 @@ const DatePickerAndroid = ({
 
   useCalculateDate({ minDate, maxDate, onChange, value });
 
+  const InputComponent = TextInputComponent || TextInput;
+
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="datePickerInputAndroid">
-        <TextInput
+        <InputComponent
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -7,7 +7,7 @@ import Calendar, { CalendarProps } from '../Calendar';
 import TextInput from '../TextInput';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
-import type { DatePickerProps } from './types';
+import type { InternalDatePickerProps } from './types';
 
 const InternalCalendar = ({
   minDate,
@@ -80,7 +80,8 @@ const DatePickerCalendar = ({
   supportedOrientations = ['portrait'],
   renderSelectedValue,
   locale,
-}: Omit<DatePickerProps, 'variant'>) => {
+  TextInputComponent,
+}: Omit<InternalDatePickerProps, 'variant'>) => {
   const [open, setOpen] = useState(false);
   const [monthPickerVisible, setMonthPickerVisible] = useState(false);
   const shouldHideToolbar = Platform.OS === 'ios' && monthPickerVisible;
@@ -95,10 +96,12 @@ const DatePickerCalendar = ({
 
   useCalculateDate({ minDate, maxDate, onChange, value });
 
+  const InputComponent = TextInputComponent || TextInput;
+
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="datePickerCalendar">
-        <TextInput
+        <InputComponent
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"

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/StyledDatePicker.tsx

@@ -4,6 +4,7 @@ import type { ViewProps } from 'react-native';
 
 const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
   height: theme.__hd__.datePicker.sizes.height,
+  alignItems: 'center',
 }));
 
 export { StyledPickerWrapper };

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -524,6 +524,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                     style={
                       [
                         {
+                          "alignItems": "center",
                           "height": 176,
                         },
                         undefined,
@@ -1192,6 +1193,7 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
                     style={
                       [
                         {
+                          "alignItems": "center",
                           "height": 176,
                         },
                         undefined,

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/PinCell.tsx

@@ -19,7 +19,12 @@ function PinCell({
   state?: State;
 }) {
   return (
-    <StyledCell themeFocused={focused} themeState={state}>
+    <StyledCell
+      themeFocused={focused}
+      themeState={state}
+      accessibilityState={{ selected: focused }}
+      testID="pin-cell"
+    >
       {value === '' && <StyledMask themeState={state} testID="pin-cell-mask" />}
       {value !== '' && secure && (
         <StyledFilledMask themeState={state} testID="pin-cell-filled-mask" />

package/src/components/PinInput/StyledPinInput.tsx

@@ -1,12 +1,12 @@
 import styled from '@emotion/native';
-import { TextInput, View } from 'react-native';
+import { Pressable, TextInput, View } from 'react-native';
 import Typography from '../Typography';
 
 export const StyledWrapper = styled(View)(() => ({
   alignContent: 'flex-start',
 }));
 
-export const StyledPinWrapper = styled(View)(() => ({
+export const StyledPinWrapper = styled(Pressable)(() => ({
   flexDirection: 'row',
 }));
 

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

@@ -9,6 +9,11 @@ exports[`PinCell renders correctly when focused is false, state is default 1`] =
   }
 >
   <View
+    accessibilityState={
+      {
+        "selected": false,
+      }
+    }
     style={
       [
         {
@@ -23,6 +28,7 @@ exports[`PinCell renders correctly when focused is false, state is default 1`] =
         undefined,
       ]
     }
+    testID="pin-cell"
     themeFocused={false}
     themeState="default"
   >
@@ -85,6 +91,11 @@ exports[`PinCell renders correctly when focused is false, state is disabled 1`]
   }
 >
   <View
+    accessibilityState={
+      {
+        "selected": false,
+      }
+    }
     style={
       [
         {
@@ -99,6 +110,7 @@ exports[`PinCell renders correctly when focused is false, state is disabled 1`]
         undefined,
       ]
     }
+    testID="pin-cell"
     themeFocused={false}
     themeState="disabled"
   >
@@ -161,6 +173,11 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
   }
 >
   <View
+    accessibilityState={
+      {
+        "selected": false,
+      }
+    }
     style={
       [
         {
@@ -175,6 +192,7 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
         undefined,
       ]
     }
+    testID="pin-cell"
     themeFocused={false}
     themeState="error"
   >
@@ -237,6 +255,11 @@ exports[`PinCell renders correctly when focused is true, state is default 1`] =
   }
 >
   <View
+    accessibilityState={
+      {
+        "selected": true,
+      }
+    }
     style={
       [
         {
@@ -251,6 +274,7 @@ exports[`PinCell renders correctly when focused is true, state is default 1`] =
         undefined,
       ]
     }
+    testID="pin-cell"
     themeFocused={true}
     themeState="default"
   >
@@ -313,6 +337,11 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
   }
 >
   <View
+    accessibilityState={
+      {
+        "selected": true,
+      }
+    }
     style={
       [
         {
@@ -327,6 +356,7 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
         undefined,
       ]
     }
+    testID="pin-cell"
     themeFocused={true}
     themeState="error"
   >