@hero-design/rn 8.103.2 → 8.103.4

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

@@ -6,7 +6,7 @@ import type {
 import { TouchableOpacity, View } from 'react-native';
 import BottomSheet from '../../BottomSheet';
 import Box from '../../Box';
-import TextInput from '../../TextInput';
+import TextInput, { TextInputProps } from '../../TextInput';
 import Footer from '../Footer';
 import { getScrollParams, toFlatOptions, toSections } from '../helpers';
 import { StyledSearchBar } from '../StyledSelect';
@@ -52,6 +52,14 @@ 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>;
+}
+
 function MultiSelect<V, T extends SelectOptionType<V>>({
   footerLabel,
   label,
@@ -74,7 +82,8 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
   value,
   supportedOrientations = ['portrait'],
   bottomSheetConfig = {},
-}: MultiSelectProps<V, T>) {
+  ...rest
+}: InternalMultiSelectProps<V, T>) {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
   const [selectingValue, setSelectingValue] = useState(value);
@@ -89,6 +98,8 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
   const { variant: bottomSheetVariant, header: bottomSheetHeader } =
     bottomSheetConfig;
 
+  const TextInputComponent = rest.TextInputComponent || TextInput;
+
   useEffect(() => {
     setSelectingValue(value);
   }, [open, value]);
@@ -105,7 +116,7 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
             // prevent users from focusing TextInput
           }
           <View pointerEvents="none">
-            <TextInput
+            <TextInputComponent
               {...inputProps}
               label={label}
               value={renderSelectedValue ? rawValue : displayedValue}
@@ -166,7 +177,7 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
       >
         {onQueryChange && (
           <StyledSearchBar>
-            <TextInput
+            <TextInputComponent
               editable
               placeholder="Search"
               suffix="search-outlined"

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

@@ -5,7 +5,7 @@ import type {
 } from 'react-native';
 import { TouchableOpacity, View } from 'react-native';
 import BottomSheet from '../../BottomSheet';
-import TextInput from '../../TextInput';
+import TextInput, { TextInputProps } from '../../TextInput';
 import { getScrollParams, toFlatOptions, toSections } from '../helpers';
 import { StyledSearchBar } from '../StyledSelect';
 import type { SelectOptionType, SectionType, SelectProps } from '../types';
@@ -37,6 +37,14 @@ 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>;
+}
+
 const SingleSelect = <V, T extends SelectOptionType<V>>({
   label,
   loading = false,
@@ -58,7 +66,8 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
   value,
   supportedOrientations = ['portrait'],
   bottomSheetConfig = {},
-}: SingleSelectProps<V, T>) => {
+  ...rest
+}: InternalSingleSelectProps<V, T>) => {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
   const sectionListRef = useRef<SectionList<T, SectionType>>(null);
@@ -72,6 +81,8 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
   const { variant: bottomSheetVariant, header: bottomSheetHeader } =
     bottomSheetConfig;
 
+  const TextInputComponent = rest.TextInputComponent || TextInput;
+
   return (
     <>
       <View
@@ -84,7 +95,7 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
             // prevent users from focusing TextInput
           }
           <View pointerEvents="none">
-            <TextInput
+            <TextInputComponent
               {...inputProps}
               label={label}
               value={renderSelectedValue ? rawValue : displayedValue}
@@ -127,7 +138,7 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
       >
         {onQueryChange && (
           <StyledSearchBar>
-            <TextInput
+            <TextInputComponent
               editable
               placeholder="Search"
               suffix="search-outlined"

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

@@ -0,0 +1,13 @@
+import MultiSelect from './MultiSelect';
+import SingleSelect from './SingleSelect';
+import type { InternalMultiSelectProps } from './MultiSelect';
+import type { InternalSingleSelectProps } from './SingleSelect';
+
+export type {
+  InternalMultiSelectProps as MultiSelectProps,
+  InternalSingleSelectProps as SingleSelectProps,
+};
+
+export default Object.assign(SingleSelect, {
+  Multi: MultiSelect,
+});

package/src/components/Select/index.tsx

@@ -2,9 +2,21 @@ import MultiSelect from './MultiSelect';
 import SingleSelect from './SingleSelect';
 import type { MultiSelectProps } from './MultiSelect';
 import type { SingleSelectProps } from './SingleSelect';
+import { SelectOptionType } from './types';
 
 export type { MultiSelectProps, SingleSelectProps };
 
-export default Object.assign(SingleSelect, {
-  Multi: MultiSelect,
+type SingleSelectType = <
+  V,
+  T extends SelectOptionType<V> = SelectOptionType<V>
+>(
+  props: Omit<SingleSelectProps<V, T>, 'TextInputComponent'>
+) => React.ReactElement;
+
+type MultiSelectType = <V, T extends SelectOptionType<V> = SelectOptionType<V>>(
+  props: Omit<MultiSelectProps<V, T>, 'TextInputComponent'>
+) => React.ReactElement;
+
+export default Object.assign(SingleSelect as SingleSelectType, {
+  Multi: MultiSelect as MultiSelectType,
 });

package/src/components/Select/types.ts

@@ -102,4 +102,8 @@ 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

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

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/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -815,6 +815,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                     style={
                       [
                         {
+                          "alignItems": "center",
                           "height": 176,
                         },
                         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

@@ -0,0 +1,7 @@
+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, DatePicker, TimePicker };
+export type { MultiSelectProps, SingleSelectProps } from './types.internal';

package/src/types.internal.ts

@@ -0,0 +1,16 @@
+import type {
+  SingleSelectProps,
+  MultiSelectProps,
+} from './components/Select/index.internal';
+
+import type { DatePickerProps } from './components/DatePicker/index.internal';
+import type { TimePickerProps } from './components/TimePicker/index.internal';
+
+export * from './types';
+
+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,
 };