@hero-design/rn 8.128.1 → 8.128.2

package/package.json

@@ -1,10 +1,17 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.128.1",
+  "version": "8.128.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "types/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "locales/*": [
+        "types/locales/*"
+      ]
+    }
+  },
   "react-native": "src/index.ts",
   "scripts": {
     "lint": "eslint src --quiet",

package/src/components/DatePicker/DatePicker.tsx

@@ -3,36 +3,17 @@ 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';
+import type { DatePickerProps } from './types';
 
-const DatePicker = ({
-  variant = 'default',
-  TextInputComponent = TextInput,
-  ...props
-}: InternalDatePickerProps) => {
+const DatePicker = ({ variant = 'default', ...props }: DatePickerProps) => {
   if (variant === 'calendar') {
-    return (
-      <DatePickerCalendar {...props} TextInputComponent={TextInputComponent} />
-    );
+    return <DatePickerCalendar {...props} />;
   }
   if (Platform.OS === 'ios') {
-    return (
-      <DatePickerIOS
-        {...props}
-        variant={variant}
-        TextInputComponent={TextInputComponent}
-      />
-    );
+    return <DatePickerIOS {...props} variant={variant} />;
   }
 
-  return (
-    <DatePickerAndroid
-      {...props}
-      variant={variant}
-      TextInputComponent={TextInputComponent}
-    />
-  );
+  return <DatePickerAndroid {...props} variant={variant} />;
 };
 
 export default DatePicker;

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -1,15 +1,14 @@
 import React, { useState, useCallback } from 'react';
-import { View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 
 import TextInput from '../TextInput';
 import AndroidDatePickerDialog from './Dialog/AndroidDialog';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
-import { StyledTouchableOpacity } from './StyledDatePicker';
-import type { InternalDatePickerProps } from './types';
+import type { DatePickerProps } from './types';
 
 type DatePickerAndroidProps = Omit<
-  InternalDatePickerProps,
+  DatePickerProps,
   'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
 > & {
   variant?: 'default' | 'month-year';
@@ -31,9 +30,6 @@ const DatePickerAndroid = ({
   variant = 'default',
   renderSelectedValue,
   locale,
-  TextInputComponent,
-  inputProps,
-  groupStyleEnabled = false,
 }: DatePickerAndroidProps) => {
   const [open, setOpen] = useState(false);
 
@@ -45,23 +41,18 @@ const DatePickerAndroid = ({
 
   useCalculateDate({ minDate, maxDate, onChange, value });
 
-  const InputComponent = TextInputComponent || TextInput;
-
   const onPress = useCallback(() => {
     setOpen(true);
   }, []);
 
   return (
-    <StyledTouchableOpacity
+    <TouchableOpacity
       onPress={onPress}
       disabled={disabled}
-      themeGroupStyleEnabled={groupStyleEnabled}
-      themeHasError={!!error}
       testID="date-picker-android-touchable-opacity"
     >
       <View pointerEvents="none" testID="datePickerInputAndroid">
-        <InputComponent
-          {...inputProps}
+        <TextInput
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
@@ -74,13 +65,13 @@ const DatePickerAndroid = ({
           testID={testID}
           renderInputValue={
             renderSelectedValue !== undefined && !!value
-              ? (props) =>
+              ? (inputProps) =>
                   renderSelectedValue(
                     {
                       date: value,
                       formattedDateString: displayValue,
                     },
-                    props
+                    inputProps
                   )
               : undefined
           }
@@ -95,7 +86,7 @@ const DatePickerAndroid = ({
         onChange={onChange}
         variant={variant}
       />
-    </StyledTouchableOpacity>
+    </TouchableOpacity>
   );
 };
 

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { Platform, ScrollView, View } from 'react-native';
+import { Platform, ScrollView, TouchableOpacity, View } from 'react-native';
 
 import BottomSheet from '../BottomSheet';
 import Button from '../Button';
@@ -8,8 +8,7 @@ import type { CalendarProps } from '../Calendar/types';
 import TextInput from '../TextInput';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
-import { StyledTouchableOpacity } from './StyledDatePicker';
-import type { InternalDatePickerProps } from './types';
+import type { DatePickerProps } from './types';
 
 const InternalCalendar = ({
   minDate,
@@ -82,10 +81,7 @@ const DatePickerCalendar = ({
   supportedOrientations = ['portrait'],
   renderSelectedValue,
   locale,
-  TextInputComponent,
-  inputProps,
-  groupStyleEnabled = false,
-}: Omit<InternalDatePickerProps, 'variant'>) => {
+}: Omit<DatePickerProps, 'variant'>) => {
   const [open, setOpen] = useState(false);
   const [monthPickerVisible, setMonthPickerVisible] = useState(false);
   const shouldHideToolbar = Platform.OS === 'ios' && monthPickerVisible;
@@ -100,23 +96,18 @@ const DatePickerCalendar = ({
 
   useCalculateDate({ minDate, maxDate, onChange, value });
 
-  const InputComponent = TextInputComponent || TextInput;
-
   const onPress = useCallback(() => {
     setOpen(true);
   }, []);
 
   return (
-    <StyledTouchableOpacity
+    <TouchableOpacity
       onPress={onPress}
       disabled={disabled}
-      themeGroupStyleEnabled={groupStyleEnabled}
-      themeHasError={!!error}
       testID="date-picker-calendar-touchable-opacity"
     >
       <View pointerEvents="none" testID="datePickerCalendar">
-        <InputComponent
-          {...inputProps}
+        <TextInput
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
@@ -129,13 +120,13 @@ const DatePickerCalendar = ({
           style={style}
           renderInputValue={
             renderSelectedValue !== undefined && !!value
-              ? (props) =>
+              ? (inputProps) =>
                   renderSelectedValue(
                     {
                       date: value,
                       formattedDateString: displayValue,
                     },
-                    props
+                    inputProps
                   )
               : undefined
           }
@@ -173,7 +164,7 @@ const DatePickerCalendar = ({
           />
         </ScrollView>
       </BottomSheet>
-    </StyledTouchableOpacity>
+    </TouchableOpacity>
   );
 };
 

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -1,16 +1,15 @@
 import React, { useState, useCallback } from 'react';
-import { View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 
 import { useLocale } from '../LocaleProvider/hooks';
 import TextInput from '../TextInput';
 import IOSDatePickerDialog from './Dialog/IOSDialog';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
-import { StyledTouchableOpacity } from './StyledDatePicker';
-import type { InternalDatePickerProps } from './types';
+import type { DatePickerProps } from './types';
 
 type DatePickerIOSProps = Omit<
-  InternalDatePickerProps,
+  DatePickerProps,
   'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
 > & {
   variant?: 'default' | 'month-year';
@@ -34,9 +33,6 @@ const DatePickerIOS = ({
   variant = 'default',
   locale,
   renderSelectedValue,
-  TextInputComponent,
-  inputProps,
-  groupStyleEnabled = false,
 }: DatePickerIOSProps) => {
   const [open, setOpen] = useState(false);
   const { lang: defaultLocale } = useLocale();
@@ -48,23 +44,18 @@ const DatePickerIOS = ({
 
   useCalculateDate({ minDate, maxDate, onChange, value });
 
-  const InputComponent = TextInputComponent || TextInput;
-
   const onPress = useCallback(() => {
     setOpen(true);
   }, []);
 
   return (
-    <StyledTouchableOpacity
+    <TouchableOpacity
       onPress={onPress}
       disabled={disabled}
-      themeGroupStyleEnabled={groupStyleEnabled}
-      themeHasError={!!error}
       testID="date-picker-ios-touchable-opacity"
     >
       <View pointerEvents="none" testID="datePickerInputIOS">
-        <InputComponent
-          {...inputProps}
+        <TextInput
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
@@ -77,13 +68,13 @@ const DatePickerIOS = ({
           style={style}
           renderInputValue={
             renderSelectedValue !== undefined && !!value
-              ? (props) =>
+              ? (inputProps) =>
                   renderSelectedValue(
                     {
                       date: value,
                       formattedDateString: displayValue,
                     },
-                    props
+                    inputProps
                   )
               : undefined
           }
@@ -102,7 +93,7 @@ const DatePickerIOS = ({
         minDate={minDate}
         maxDate={maxDate}
       />
-    </StyledTouchableOpacity>
+    </TouchableOpacity>
   );
 };
 

package/src/components/DatePicker/StyledDatePicker.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { View, TouchableOpacity } from 'react-native';
+import { View } from 'react-native';
 import type { ViewProps } from 'react-native';
 
 const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
@@ -7,21 +7,4 @@ const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
   alignItems: 'center',
 }));
 
-const getZIndexByState = ({ themeHasError }: { themeHasError: boolean }) => {
-  if (themeHasError) {
-    return 1;
-  }
-
-  return 0;
-};
-
-const StyledTouchableOpacity = styled(TouchableOpacity)<{
-  themeGroupStyleEnabled: boolean;
-  themeHasError: boolean;
-}>(({ themeGroupStyleEnabled, themeHasError }) => ({
-  ...(themeGroupStyleEnabled && {
-    zIndex: getZIndexByState({ themeHasError }),
-  }),
-}));
-
-export { StyledPickerWrapper, StyledTouchableOpacity };
+export { StyledPickerWrapper };

package/src/components/DatePicker/types.ts

@@ -3,7 +3,6 @@ import type {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import type { TextInputProps } from '../TextInput';
 
 export interface DatePickerProps {
   /**
@@ -101,19 +100,3 @@ export interface DatePickerProps {
     props?: NativeTextInputProps
   ) => React.ReactNode;
 }
-
-// Add an internal prop type for TextInputComponent, not exported
-export interface InternalDatePickerProps extends DatePickerProps {
-  /**
-   * Props that are passed to TextInput.
-   */
-  inputProps?: Pick<TextInputProps, 'loading' | 'numberOfLines'>;
-  /**
-   * Whether the component is used within a FormGroup for styling purposes.
-   */
-  groupStyleEnabled?: boolean;
-  /**
-   * Input component to use instead of the default TextInput.
-   */
-  TextInputComponent?: React.ComponentType<TextInputProps>;
-}

package/src/components/Select/MultiSelect/index.tsx

@@ -3,7 +3,7 @@ import type {
   TextInputProps as NativeTextInputProps,
   SectionList,
 } from 'react-native';
-import { View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { useKeyboard } from '../../../utils/helpers';
 import BottomSheet from '../../BottomSheet';
 import Box from '../../Box';
@@ -11,7 +11,7 @@ import type { TextInputProps } from '../../TextInput';
 import TextInput from '../../TextInput';
 import Footer from '../Footer';
 import { getScrollParams, toFlatOptions, toSections } from '../helpers';
-import { StyledSearchBar, StyledTouchableOpacity } from '../StyledSelect';
+import { StyledSearchBar } from '../StyledSelect';
 import type { SectionType, SelectOptionType, SelectProps } from '../types';
 import OptionList from './OptionList';
 import { isOptionSelected } from './utils';
@@ -53,15 +53,6 @@ export interface MultiSelectProps<
   supportedOrientations?: ('portrait' | 'landscape')[];
 }
 
-// Add an internal prop type for TextInputComponent, not exported
-export interface InternalMultiSelectProps<
-  V,
-  T extends SelectOptionType<V> = SelectOptionType<V>
-> extends MultiSelectProps<V, T> {
-  TextInputComponent?: React.ComponentType<TextInputProps>;
-  groupStyleEnabled?: boolean;
-}
-
 function MultiSelect<V, T extends SelectOptionType<V>>({
   footerLabel,
   label,
@@ -84,9 +75,7 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
   value,
   supportedOrientations = ['portrait'],
   bottomSheetConfig = {},
-  groupStyleEnabled = false,
-  ...rest
-}: InternalMultiSelectProps<V, T>) {
+}: MultiSelectProps<V, T>) {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
   const [selectingValue, setSelectingValue] = useState(value);
@@ -101,8 +90,6 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
   const { variant: bottomSheetVariant, header: bottomSheetHeader } =
     bottomSheetConfig;
 
-  const TextInputComponent = rest.TextInputComponent || TextInput;
-
   const onPress = useCallback(() => {
     setOpen(true);
   }, []);
@@ -122,17 +109,15 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
           !editable || disabled || inputProps?.loading ? 'none' : 'auto'
         }
       >
-        <StyledTouchableOpacity
+        <TouchableOpacity
           onPress={onPress}
-          themeGroupStyleEnabled={groupStyleEnabled}
-          themeHasError={!!error}
           testID="multi-select-touchable-opacity"
         >
           {
             // prevent users from focusing TextInput
           }
           <View pointerEvents="none">
-            <TextInputComponent
+            <TextInput
               {...inputProps}
               label={label}
               value={renderSelectedValue ? rawValue : displayedValue}
@@ -147,12 +132,13 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
               testID={testID}
               renderInputValue={
                 renderSelectedValue !== undefined && rawValue?.length > 0
-                  ? (props) => renderSelectedValue(value, props)
+                  ? (nativeInputProps) =>
+                      renderSelectedValue(value, nativeInputProps)
                   : undefined
               }
             />
           </View>
-        </StyledTouchableOpacity>
+        </TouchableOpacity>
       </View>
       <BottomSheet
         variant={bottomSheetVariant || 'fixed'}
@@ -193,7 +179,7 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
       >
         {onQueryChange && (
           <StyledSearchBar>
-            <TextInputComponent
+            <TextInput
               editable
               placeholder="Search"
               suffix="search-outlined"

package/src/components/Select/SingleSelect/index.tsx

@@ -3,13 +3,13 @@ import type {
   TextInputProps as NativeTextInputProps,
   SectionList,
 } from 'react-native';
-import { View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { deepCompareValue, useKeyboard } from '../../../utils/helpers';
 import BottomSheet from '../../BottomSheet';
 import type { TextInputProps } from '../../TextInput';
 import TextInput from '../../TextInput';
 import { getScrollParams, toFlatOptions, toSections } from '../helpers';
-import { StyledSearchBar, StyledTouchableOpacity } from '../StyledSelect';
+import { StyledSearchBar } from '../StyledSelect';
 import type { SectionType, SelectOptionType, SelectProps } from '../types';
 import OptionList from './OptionList';
 
@@ -38,15 +38,6 @@ export interface SingleSelectProps<
   supportedOrientations?: ('portrait' | 'landscape')[];
 }
 
-// Add an internal prop type for TextInputComponent, not exported
-export interface InternalSingleSelectProps<
-  V,
-  T extends SelectOptionType<V> = SelectOptionType<V>
-> extends SingleSelectProps<V, T> {
-  TextInputComponent?: React.ComponentType<TextInputProps>;
-  groupStyleEnabled?: boolean;
-}
-
 const SingleSelect = <V, T extends SelectOptionType<V>>({
   label,
   loading = false,
@@ -68,9 +59,7 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
   value,
   supportedOrientations = ['portrait'],
   bottomSheetConfig = {},
-  groupStyleEnabled = false,
-  ...rest
-}: InternalSingleSelectProps<V, T>) => {
+}: SingleSelectProps<V, T>) => {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
   const sectionListRef = useRef<SectionList<T, SectionType>>(null);
@@ -84,8 +73,6 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
   const { variant: bottomSheetVariant, header: bottomSheetHeader } =
     bottomSheetConfig;
 
-  const TextInputComponent = rest.TextInputComponent || TextInput;
-
   const onPress = useCallback(() => {
     setOpen(true);
   }, []);
@@ -105,17 +92,15 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
           !editable || disabled || inputProps?.loading ? 'none' : 'auto'
         }
       >
-        <StyledTouchableOpacity
+        <TouchableOpacity
           onPress={onPress}
-          themeGroupStyleEnabled={groupStyleEnabled}
-          themeHasError={!!error}
           testID="single-select-touchable-opacity"
         >
           {
             // prevent users from focusing TextInput
           }
           <View pointerEvents="none">
-            <TextInputComponent
+            <TextInput
               {...inputProps}
               label={label}
               value={renderSelectedValue ? rawValue : displayedValue}
@@ -130,12 +115,13 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
               testID={testID}
               renderInputValue={
                 renderSelectedValue !== undefined && !!rawValue
-                  ? (props) => renderSelectedValue(value, props)
+                  ? (nativeInputProps) =>
+                      renderSelectedValue(value, nativeInputProps)
                   : undefined
               }
             />
           </View>
-        </StyledTouchableOpacity>
+        </TouchableOpacity>
       </View>
       <BottomSheet
         variant={bottomSheetVariant || 'fixed'}
@@ -158,7 +144,7 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
       >
         {onQueryChange && (
           <StyledSearchBar>
-            <TextInputComponent
+            <TextInput
               editable
               placeholder="Search"
               suffix="search-outlined"

package/src/components/Select/StyledSelect.tsx

@@ -1,4 +1,4 @@
-import { SectionList, TouchableOpacity, View } from 'react-native';
+import { SectionList, View } from 'react-native';
 import styled from '@emotion/native';
 
 const SectionSpacer = styled(View)(({ theme }) => ({
@@ -19,27 +19,4 @@ const StyledSectionList = styled(SectionList)(({ theme }) => ({
   paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding,
 })) as unknown as typeof SectionList;
 
-const getZIndexByState = ({ themeHasError }: { themeHasError: boolean }) => {
-  if (themeHasError) {
-    return 1;
-  }
-
-  return 0;
-};
-
-const StyledTouchableOpacity = styled(TouchableOpacity)<{
-  themeGroupStyleEnabled: boolean;
-  themeHasError: boolean;
-}>(({ themeGroupStyleEnabled, themeHasError }) => ({
-  ...(themeGroupStyleEnabled && {
-    zIndex: getZIndexByState({ themeHasError }),
-  }),
-}));
-
-export {
-  SectionSpacer,
-  OptionSpacer,
-  StyledSearchBar,
-  StyledSectionList,
-  StyledTouchableOpacity,
-};
+export { SectionSpacer, OptionSpacer, StyledSearchBar, StyledSectionList };

package/src/components/Select/index.tsx

@@ -10,17 +10,11 @@ type SingleSelectType = <
   V,
   T extends SelectOptionType<V> = SelectOptionType<V>
 >(
-  props: Omit<
-    SingleSelectProps<V, T>,
-    'TextInputComponent' | 'groupStyleEnabled'
-  >
+  props: SingleSelectProps<V, T>
 ) => React.ReactElement;
 
 type MultiSelectType = <V, T extends SelectOptionType<V> = SelectOptionType<V>>(
-  props: Omit<
-    MultiSelectProps<V, T>,
-    'TextInputComponent' | 'groupStyleEnabled'
-  >
+  props: MultiSelectProps<V, T>
 ) => React.ReactElement;
 
 export default Object.assign(SingleSelect as SingleSelectType, {

package/src/components/Select/types.ts

@@ -102,8 +102,4 @@ export interface SelectProps<V, T extends SelectOptionType<V>>
     variant?: BottomSheetProps['variant'];
     header?: BottomSheetProps['header'];
   };
-  /**
-   * Inject a custom TextInput component (e.g., from rn-work-uikit). Defaults to local TextInput.
-   */
-  TextInputComponent?: React.ComponentType<TextInputProps>;
 }

package/src/components/TimePicker/StyledTimePicker.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { View, TouchableOpacity } from 'react-native';
+import { View } from 'react-native';
 import type { ViewProps } from 'react-native';
 
 const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
@@ -7,21 +7,4 @@ const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
   alignItems: 'center',
 }));
 
-const getZIndexByState = ({ themeHasError }: { themeHasError: boolean }) => {
-  if (themeHasError) {
-    return 1;
-  }
-
-  return 0;
-};
-
-const StyledTouchableOpacity = styled(TouchableOpacity)<{
-  themeGroupStyleEnabled: boolean;
-  themeHasError: boolean;
-}>(({ themeGroupStyleEnabled, themeHasError }) => ({
-  ...(themeGroupStyleEnabled && {
-    zIndex: getZIndexByState({ themeHasError }),
-  }),
-}));
-
-export { StyledPickerWrapper, StyledTouchableOpacity };
+export { StyledPickerWrapper };

package/src/components/TimePicker/TimePicker.tsx

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