@hero-design/rn 8.103.3 → 8.103.5

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3301) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3289) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -15,9 +15,9 @@ node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/sr
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 1m 10.6s
+created lib/index.js, es/index.js in 1m 15.3s
 
 /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_AU.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_CA.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/index.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/types.ts → ., ....
 (!) Generated empty chunks
 "locales/types" and "locales/types"
-created ., . in 22.2s
+created ., . in 20.9s

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @hero-design/rn
 
+## 8.103.5
+
+### Patch Changes
+
+- [#4068](https://github.com/Thinkei/hero-design/pull/4068) [`3fd150ed0925245f0c9df0956681f19becac09c7`](https://github.com/Thinkei/hero-design/commit/3fd150ed0925245f0c9df0956681f19becac09c7) Thanks [@ttkien](https://github.com/ttkien)! - [RichTextEditor] apply new TextInput
+  [TextInput] update typings
+
+- [#4074](https://github.com/Thinkei/hero-design/pull/4074) [`3b1be909daf4d17abe49f37672ecde1ad048ae05`](https://github.com/Thinkei/hero-design/commit/3b1be909daf4d17abe49f37672ecde1ad048ae05) Thanks [@cuongnguyeneh](https://github.com/cuongnguyeneh)! - [PinInput] fix: android lagging issue by replacing keyboardType by inputMode prop
+
+## 8.103.4
+
+### Patch Changes
+
+- [#4069](https://github.com/Thinkei/hero-design/pull/4069) [`2e911c0297496b281a54bad63c5e60ee75bc8d81`](https://github.com/Thinkei/hero-design/commit/2e911c0297496b281a54bad63c5e60ee75bc8d81) Thanks [@ttkien](https://github.com/ttkien)! - [DatePicker] Fix issue month-year picker is gone in react-native 76
+
+- [#4062](https://github.com/Thinkei/hero-design/pull/4062) [`805b3e4f0222ed1e62c0feb2d3de4c42afe2012b`](https://github.com/Thinkei/hero-design/commit/805b3e4f0222ed1e62c0feb2d3de4c42afe2012b) Thanks [@ttkien](https://github.com/ttkien)! - [TimePicker][datepicker] apply new TextInput
+
 ## 8.103.3
 
 ### Patch Changes

package/es/index.js

@@ -19987,7 +19987,7 @@ var renderInput$1 = function renderInput(_ref3) {
     renderInputValue = _ref3.renderInputValue,
     ref = _ref3.ref,
     theme = _ref3.theme;
-  return renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
+  return renderInputValue ? renderInputValue(nativeInputProps, ref) : /*#__PURE__*/React__default.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
     themeVariant: variant,
     multiline: variant === 'textarea' || nativeInputProps.multiline,
     ref: ref,
@@ -20429,7 +20429,8 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     renderSelectedValue = _ref.renderSelectedValue,
-    locale = _ref.locale;
+    locale = _ref.locale,
+    TextInputComponent = _ref.TextInputComponent;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -20447,6 +20448,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     onChange: onChange,
     value: value
   });
+  var InputComponent = TextInputComponent || TextInput;
   return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -20455,7 +20457,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerInputAndroid"
-  }, /*#__PURE__*/React__default.createElement(TextInput, {
+  }, /*#__PURE__*/React__default.createElement(InputComponent, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -20550,7 +20552,8 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     _ref2$supportedOrient = _ref2.supportedOrientations,
     supportedOrientations = _ref2$supportedOrient === void 0 ? ['portrait'] : _ref2$supportedOrient,
     renderSelectedValue = _ref2.renderSelectedValue,
-    locale = _ref2.locale;
+    locale = _ref2.locale,
+    TextInputComponent = _ref2.TextInputComponent;
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     open = _useState6[0],
@@ -20576,6 +20579,7 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     onChange: onChange,
     value: value
   });
+  var InputComponent = TextInputComponent || TextInput;
   return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -20584,7 +20588,7 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerCalendar"
-  }, /*#__PURE__*/React__default.createElement(TextInput, {
+  }, /*#__PURE__*/React__default.createElement(InputComponent, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -20681,13 +20685,14 @@ var IOSDatePickerDialog = function IOSDatePickerDialog(_ref) {
     minimumDate: minDate,
     textColor: theme.colors.onDefaultGlobalSurface,
     maximumDate: maxDate,
+    style: {
+      height: '100%',
+      width: '100%'
+    },
     onChange: function onChange(date) {
       if (date) {
         setSelectingDate(date);
       }
-    },
-    style: {
-      flex: 1
     }
   }) : null, variant === 'default' ? /*#__PURE__*/React__default.createElement(DateTimePicker, {
     locale: locale,
@@ -20730,7 +20735,8 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     locale = _ref.locale,
-    renderSelectedValue = _ref.renderSelectedValue;
+    renderSelectedValue = _ref.renderSelectedValue,
+    TextInputComponent = _ref.TextInputComponent;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -20750,6 +20756,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     onChange: onChange,
     value: value
   });
+  var InputComponent = TextInputComponent || TextInput;
   return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -20758,7 +20765,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerInputIOS"
-  }, /*#__PURE__*/React__default.createElement(TextInput, {
+  }, /*#__PURE__*/React__default.createElement(InputComponent, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -20792,31 +20799,40 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }));
 };
 
-var _excluded$s = ["variant"];
+var _excluded$s = ["variant", "TextInputComponent"];
 var DatePicker = function DatePicker(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$TextInputCompone = _ref.TextInputComponent,
+    TextInputComponent = _ref$TextInputCompone === void 0 ? TextInput : _ref$TextInputCompone,
     props = _objectWithoutProperties(_ref, _excluded$s);
   if (variant === 'calendar') {
-    return /*#__PURE__*/React__default.createElement(DatePickerCalendar, props);
+    return /*#__PURE__*/React__default.createElement(DatePickerCalendar, _extends$1({}, props, {
+      TextInputComponent: TextInputComponent
+    }));
   }
   if (Platform.OS === 'ios') {
     return /*#__PURE__*/React__default.createElement(DatePickerIOS, _extends$1({}, props, {
-      variant: variant
+      variant: variant,
+      TextInputComponent: TextInputComponent
     }));
   }
   return /*#__PURE__*/React__default.createElement(DatePickerAndroid, _extends$1({}, props, {
-    variant: variant
+    variant: variant,
+    TextInputComponent: TextInputComponent
   }));
 };
-var Dialog = function Dialog(_ref2) {
-  var props = _extends$1({}, (_objectDestructuringEmpty(_ref2), _ref2));
+
+var Dialog = function Dialog(_ref) {
+  var props = _extends$1({}, (_objectDestructuringEmpty(_ref), _ref));
   if (Platform.OS === 'ios') {
     return /*#__PURE__*/React__default.createElement(IOSDatePickerDialog, props);
   }
   return /*#__PURE__*/React__default.createElement(AndroidDatePickerDialog, props);
 };
-var index$8 = Object.assign(DatePicker, {
+
+var PublicDatePicker = DatePicker;
+var index$8 = Object.assign(PublicDatePicker, {
   Dialog: Dialog
 });
 
@@ -23958,7 +23974,7 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     onFocus: focus,
     onBlur: blur,
     pointerEvents: "none",
-    keyboardType: "numeric",
+    inputMode: "numeric",
     testID: "pin-hidden-input",
     textContentType: textContentType,
     autoComplete: autoComplete,
@@ -26661,7 +26677,8 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     _ref$showSuffix = _ref.showSuffix,
-    showSuffix = _ref$showSuffix === void 0 ? true : _ref$showSuffix;
+    showSuffix = _ref$showSuffix === void 0 ? true : _ref$showSuffix,
+    TextInputComponent = _ref.TextInputComponent;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -26669,6 +26686,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   var is12Hour = displayFormat.includes('hh');
   var displayValue = value ? formatTime(displayFormat, value) : '';
   var pickerInitValue = value || new Date();
+  var InputComponent = TextInputComponent || TextInput;
   return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -26677,7 +26695,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none",
     testID: "timePickerInputAndroid"
-  }, /*#__PURE__*/React__default.createElement(TextInput, {
+  }, /*#__PURE__*/React__default.createElement(InputComponent, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -26729,7 +26747,8 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
     _ref$showSuffix = _ref.showSuffix,
     showSuffix = _ref$showSuffix === void 0 ? true : _ref$showSuffix,
     _ref$supportedOrienta = _ref.supportedOrientations,
-    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
+    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
+    TextInputComponent = _ref.TextInputComponent;
   var _useState = useState(value || new Date()),
     _useState2 = _slicedToArray(_useState, 2),
     selectingDate = _useState2[0],
@@ -26741,6 +26760,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   var is12Hour = displayFormat.includes('hh');
   var displayValue = value ? formatTime(displayFormat, value) : '';
   var theme = useTheme();
+  var InputComponent = TextInputComponent || TextInput;
   useEffect(function () {
     setSelectingDate(value || new Date());
   }, [value]);
@@ -26752,7 +26772,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none",
     testID: "timePickerInputIOS"
-  }, /*#__PURE__*/React__default.createElement(TextInput, {
+  }, /*#__PURE__*/React__default.createElement(InputComponent, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -26808,6 +26828,8 @@ var TimePicker = function TimePicker(props) {
   return /*#__PURE__*/React__default.createElement(TimePickerAndroid, props);
 };
 
+var PublicTimePicker = TimePicker;
+
 var ToolbarWrapper = index$b(View)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -46771,4 +46793,4 @@ var FloatingIsland = function FloatingIsland(_ref2) {
   }));
 };
 
-export { Accordion, Alert, AppCue, Attachment, index$a as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar$1 as Calendar, Card$1 as Card, index$9 as Carousel, Chart, Checkbox, Chip, Collapse, ContentNavigator, index$8 as DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List$1 as List, LocaleProvider, index$6 as MapPin, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, ehJobsSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, getTheme, jobsSystemPalette, scale, index$b as styled, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette$1 as swagLightSystemPalette, swagSystemPalette$2 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+export { Accordion, Alert, AppCue, Attachment, index$a as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar$1 as Calendar, Card$1 as Card, index$9 as Carousel, Chart, Checkbox, Chip, Collapse, ContentNavigator, index$8 as DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List$1 as List, LocaleProvider, index$6 as MapPin, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, PublicTimePicker as TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, ehJobsSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, getTheme, jobsSystemPalette, scale, index$b as styled, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette$1 as swagLightSystemPalette, swagSystemPalette$2 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };

package/lib/index.js

@@ -20016,7 +20016,7 @@ var renderInput$1 = function renderInput(_ref3) {
     renderInputValue = _ref3.renderInputValue,
     ref = _ref3.ref,
     theme = _ref3.theme;
-  return renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__namespace.default.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
+  return renderInputValue ? renderInputValue(nativeInputProps, ref) : /*#__PURE__*/React__namespace.default.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
     themeVariant: variant,
     multiline: variant === 'textarea' || nativeInputProps.multiline,
     ref: ref,
@@ -20458,7 +20458,8 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     renderSelectedValue = _ref.renderSelectedValue,
-    locale = _ref.locale;
+    locale = _ref.locale,
+    TextInputComponent = _ref.TextInputComponent;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -20476,6 +20477,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     onChange: onChange,
     value: value
   });
+  var InputComponent = TextInputComponent || TextInput;
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -20484,7 +20486,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "datePickerInputAndroid"
-  }, /*#__PURE__*/React__namespace.default.createElement(TextInput, {
+  }, /*#__PURE__*/React__namespace.default.createElement(InputComponent, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -20579,7 +20581,8 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     _ref2$supportedOrient = _ref2.supportedOrientations,
     supportedOrientations = _ref2$supportedOrient === void 0 ? ['portrait'] : _ref2$supportedOrient,
     renderSelectedValue = _ref2.renderSelectedValue,
-    locale = _ref2.locale;
+    locale = _ref2.locale,
+    TextInputComponent = _ref2.TextInputComponent;
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     open = _useState6[0],
@@ -20605,6 +20608,7 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     onChange: onChange,
     value: value
   });
+  var InputComponent = TextInputComponent || TextInput;
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -20613,7 +20617,7 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "datePickerCalendar"
-  }, /*#__PURE__*/React__namespace.default.createElement(TextInput, {
+  }, /*#__PURE__*/React__namespace.default.createElement(InputComponent, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -20710,13 +20714,14 @@ var IOSDatePickerDialog = function IOSDatePickerDialog(_ref) {
     minimumDate: minDate,
     textColor: theme.colors.onDefaultGlobalSurface,
     maximumDate: maxDate,
+    style: {
+      height: '100%',
+      width: '100%'
+    },
     onChange: function onChange(date) {
       if (date) {
         setSelectingDate(date);
       }
-    },
-    style: {
-      flex: 1
     }
   }) : null, variant === 'default' ? /*#__PURE__*/React__namespace.default.createElement(DateTimePicker__default.default, {
     locale: locale,
@@ -20759,7 +20764,8 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     locale = _ref.locale,
-    renderSelectedValue = _ref.renderSelectedValue;
+    renderSelectedValue = _ref.renderSelectedValue,
+    TextInputComponent = _ref.TextInputComponent;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -20779,6 +20785,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     onChange: onChange,
     value: value
   });
+  var InputComponent = TextInputComponent || TextInput;
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -20787,7 +20794,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "datePickerInputIOS"
-  }, /*#__PURE__*/React__namespace.default.createElement(TextInput, {
+  }, /*#__PURE__*/React__namespace.default.createElement(InputComponent, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -20821,31 +20828,40 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }));
 };
 
-var _excluded$s = ["variant"];
+var _excluded$s = ["variant", "TextInputComponent"];
 var DatePicker = function DatePicker(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$TextInputCompone = _ref.TextInputComponent,
+    TextInputComponent = _ref$TextInputCompone === void 0 ? TextInput : _ref$TextInputCompone,
     props = _objectWithoutProperties(_ref, _excluded$s);
   if (variant === 'calendar') {
-    return /*#__PURE__*/React__namespace.default.createElement(DatePickerCalendar, props);
+    return /*#__PURE__*/React__namespace.default.createElement(DatePickerCalendar, _extends$1({}, props, {
+      TextInputComponent: TextInputComponent
+    }));
   }
   if (reactNative.Platform.OS === 'ios') {
     return /*#__PURE__*/React__namespace.default.createElement(DatePickerIOS, _extends$1({}, props, {
-      variant: variant
+      variant: variant,
+      TextInputComponent: TextInputComponent
     }));
   }
   return /*#__PURE__*/React__namespace.default.createElement(DatePickerAndroid, _extends$1({}, props, {
-    variant: variant
+    variant: variant,
+    TextInputComponent: TextInputComponent
   }));
 };
-var Dialog = function Dialog(_ref2) {
-  var props = _extends$1({}, (_objectDestructuringEmpty(_ref2), _ref2));
+
+var Dialog = function Dialog(_ref) {
+  var props = _extends$1({}, (_objectDestructuringEmpty(_ref), _ref));
   if (reactNative.Platform.OS === 'ios') {
     return /*#__PURE__*/React__namespace.default.createElement(IOSDatePickerDialog, props);
   }
   return /*#__PURE__*/React__namespace.default.createElement(AndroidDatePickerDialog, props);
 };
-var index$8 = Object.assign(DatePicker, {
+
+var PublicDatePicker = DatePicker;
+var index$8 = Object.assign(PublicDatePicker, {
   Dialog: Dialog
 });
 
@@ -23987,7 +24003,7 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     onFocus: focus,
     onBlur: blur,
     pointerEvents: "none",
-    keyboardType: "numeric",
+    inputMode: "numeric",
     testID: "pin-hidden-input",
     textContentType: textContentType,
     autoComplete: autoComplete,
@@ -26690,7 +26706,8 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     _ref$showSuffix = _ref.showSuffix,
-    showSuffix = _ref$showSuffix === void 0 ? true : _ref$showSuffix;
+    showSuffix = _ref$showSuffix === void 0 ? true : _ref$showSuffix,
+    TextInputComponent = _ref.TextInputComponent;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -26698,6 +26715,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   var is12Hour = displayFormat.includes('hh');
   var displayValue = value ? formatTime(displayFormat, value) : '';
   var pickerInitValue = value || new Date();
+  var InputComponent = TextInputComponent || TextInput;
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -26706,7 +26724,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "timePickerInputAndroid"
-  }, /*#__PURE__*/React__namespace.default.createElement(TextInput, {
+  }, /*#__PURE__*/React__namespace.default.createElement(InputComponent, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -26758,7 +26776,8 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
     _ref$showSuffix = _ref.showSuffix,
     showSuffix = _ref$showSuffix === void 0 ? true : _ref$showSuffix,
     _ref$supportedOrienta = _ref.supportedOrientations,
-    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
+    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
+    TextInputComponent = _ref.TextInputComponent;
   var _useState = React.useState(value || new Date()),
     _useState2 = _slicedToArray(_useState, 2),
     selectingDate = _useState2[0],
@@ -26770,6 +26789,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   var is12Hour = displayFormat.includes('hh');
   var displayValue = value ? formatTime(displayFormat, value) : '';
   var theme = useTheme();
+  var InputComponent = TextInputComponent || TextInput;
   React.useEffect(function () {
     setSelectingDate(value || new Date());
   }, [value]);
@@ -26781,7 +26801,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "timePickerInputIOS"
-  }, /*#__PURE__*/React__namespace.default.createElement(TextInput, {
+  }, /*#__PURE__*/React__namespace.default.createElement(InputComponent, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -26837,6 +26857,8 @@ var TimePicker = function TimePicker(props) {
   return /*#__PURE__*/React__namespace.default.createElement(TimePickerAndroid, props);
 };
 
+var PublicTimePicker = TimePicker;
+
 var ToolbarWrapper = index$b(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -46856,7 +46878,7 @@ exports.Tag = Tag;
 exports.TextInput = TextInput;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitcher = ThemeSwitcher;
-exports.TimePicker = TimePicker;
+exports.TimePicker = PublicTimePicker;
 exports.Toast = Toast;
 exports.Toolbar = index$1;
 exports.Typography = Typography;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.103.3",
+  "version": "8.103.5",
   "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"