@hero-design/rn-work-uikit 1.11.3 → 1.12.0

package/locales/index.mjs

@@ -1,9 +1,9 @@
-import locale from './en_AU.mjs';
-import locale$1 from './en_CA.mjs';
+import locale$1 from './en_AU.mjs';
+import locale from './en_CA.mjs';
 
 var index = {
-    'en-AU': locale,
-    'en-CA': locale$1,
+    'en-AU': locale$1,
+    'en-CA': locale,
 };
 
 export { index as default };

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.11.3",
+  "version": "1.12.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
+  "react-native": "src/index.ts",
   "types": "types/index.d.ts",
   "description": "EH Work specific UI components built on top of @hero-design/rn",
   "scripts": {
@@ -13,7 +14,7 @@
     "test:watch": "jest --runInBand --watch",
     "test:ci": "jest --c=jest-ci.config.js --i --logHeapUsage --coverage",
     "build:js": "rollup -c",
-    "build:types": "rollup -c rollup.config.mjs --configPlugin dts",
+    "build:types": "rollup -c rollup.config.mjs --configImportAttributesKey with --configPlugin dts",
     "build": "yarn build:js && yarn build:types",
     "build:watch": "yarn build:js -w & yarn build:types -w",
     "publish:npm": "yarn publish --access public",
@@ -22,20 +23,20 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "8.118.3",
+    "@hero-design/rn": "8.119.0",
     "hero-editor": "^1.17.0"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.45.0",
+    "@hero-design/react-native-month-year-picker": "^8.45.1",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
-    "@react-native-community/datetimepicker": "^3.5.2 || ^7.6.1",
-    "@react-native-community/slider": "^4.5.1",
-    "react": "18.3.1",
-    "react-native": "0.77.3",
-    "react-native-gesture-handler": "~2.20.2",
+    "@react-native-community/datetimepicker": "^8.4.4",
+    "@react-native-community/slider": " ^5.0.1",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-pager-view": "^6.7.0",
-    "react-native-safe-area-context": "^4.7.0",
+    "react-native-safe-area-context": "~5.6.0",
     "react-native-svg": "^15.11.2",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^13.10.2"
@@ -52,12 +53,12 @@
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
-    "@hero-design/eslint-plugin": "9.2.1",
-    "@hero-design/react-native-month-year-picker": "^8.45.0",
+    "@hero-design/eslint-plugin": "9.2.2",
+    "@hero-design/react-native-month-year-picker": "^8.45.1",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
-    "@react-native-community/datetimepicker": "8.2.0",
-    "@react-native-community/slider": "^4.5.1",
-    "@react-native/babel-preset": "0.77.3",
+    "@react-native-community/datetimepicker": "8.4.4",
+    "@react-native-community/slider": "^5.0.1",
+    "@react-native/babel-preset": "0.81.5",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
@@ -68,7 +69,7 @@
     "@testing-library/jest-native": "^5.4.2",
     "@testing-library/react-native": "^13.0.0",
     "@types/jest": "^29.5.3",
-    "@types/react": "^18.2.0",
+    "@types/react": "^19.0.0",
     "@types/react-native-vector-icons": "^6.4.10",
     "@types/react-test-renderer": "^19.1.0",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
@@ -81,21 +82,21 @@
     "jest-environment-jsdom": "^29.2.1",
     "jest-junit": "^16.0.0",
     "prettier-config-hd": "8.42.4",
-    "react": "18.3.1",
-    "react-dom": "^18.2.0",
-    "react-native": "0.77.3",
-    "react-native-gesture-handler": "~2.20.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
     "react-native-linear-gradient": "2.8.3",
-    "react-native-pager-view": "6.5.1",
-    "react-native-safe-area-context": "4.12.0",
-    "react-native-svg": "15.8.0",
+    "react-native-pager-view": "6.9.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-svg": "15.12.1",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^13.16.0",
-    "react-test-renderer": "18.3.1",
-    "rollup": "^4.24.3",
+    "react-test-renderer": "19.1.0",
+    "rollup": "^4.57.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^3.0.1",
-    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-dts": "^6.3.0",
     "rollup-plugin-flow": "^1.1.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "ts-jest": "^29.1.1",

package/rollup.config.mjs

@@ -6,7 +6,7 @@ import json from '@rollup/plugin-json';
 import replace from '@rollup/plugin-replace';
 import flow from 'rollup-plugin-flow';
 import { visualizer } from 'rollup-plugin-visualizer';
-import pkg from './package.json' assert { type: 'json' };
+import pkg from './package.json' with { type: 'json' };
 import copy from 'rollup-plugin-copy';
 import del from 'rollup-plugin-delete';
 import alias from '@rollup/plugin-alias';

package/src/components/FormGroup/index.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
 import React, { useMemo } from 'react';
-import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle, TextStyle } from 'react-native';
 import { StyleSheet } from 'react-native';
 import { Box, useTheme } from '@hero-design/rn';
 import { generateBorderStyle, generateMarginStyle } from './utils';
@@ -32,22 +32,33 @@ interface FormGroupProps extends ViewProps {
   testID?: string;
 }
 
+interface ChildProps extends ViewProps {
+  textStyle?: TextStyle;
+  groupStyleEnabled?: boolean;
+  inputProps?: {
+    textStyle?: TextStyle;
+    [key: string]: unknown;
+  };
+}
+
 const FormGroup = ({ children, style, testID, ...props }: FormGroupProps) => {
   const theme = useTheme();
+
   const childrenArray = React.Children.toArray(children).filter(
-    (child): child is ReactElement => React.isValidElement(child)
+    (child): child is ReactElement<ChildProps> => React.isValidElement(child)
   );
 
   // If there are multiple children, inject styles to group them together.
   const groupedChildren = useMemo(
     () =>
       childrenArray.map((child, index) => {
-        const rawChildStyle = child.props.style;
-        const rawChildTextStyle = child.props.textStyle;
-
-        // Handle array styles by flattening them first
-        const childStyle = StyleSheet.flatten(rawChildStyle);
-        const childTextStyle = StyleSheet.flatten(rawChildTextStyle);
+        // Flatten styles to handle array styles
+        const childStyle = child.props.style
+          ? StyleSheet.flatten(child.props.style)
+          : undefined;
+        const childTextStyle = child.props.textStyle
+          ? StyleSheet.flatten(child.props.textStyle)
+          : undefined;
 
         /**
          * Merge the child style with the group injected style.
@@ -56,7 +67,7 @@ const FormGroup = ({ children, style, testID, ...props }: FormGroupProps) => {
          * 2. Group injected style.
          */
         const mergedStyle = {
-          ...childStyle,
+          ...(childStyle || {}),
           ...generateMarginStyle({
             index,
             length: childrenArray.length,
@@ -72,7 +83,7 @@ const FormGroup = ({ children, style, testID, ...props }: FormGroupProps) => {
          * 3. Group injected border style.
          */
         const mergedTextStyle = {
-          ...childTextStyle,
+          ...(childTextStyle || {}),
           ...generateBorderStyle({
             index,
             length: childrenArray.length,

package/src/components/FormGroup/utils.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react';
+import type { TextStyle, ViewStyle } from 'react-native';
 import type { Theme } from '@hero-design/rn';
 
 /**
@@ -13,7 +13,7 @@ const generateBorderStyle = ({
 }: {
   index: number;
   length: number;
-}): CSSProperties => {
+}): TextStyle => {
   const isFirst = index === 0;
   const isLast = index === length - 1;
 
@@ -48,7 +48,7 @@ const generateMarginStyle = ({
   index: number;
   length: number;
   theme: Theme;
-}) => {
+}): ViewStyle => {
   if (length === 1) {
     return {};
   }

package/src/components/TextInput/InputRow.tsx

@@ -1,9 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { View } from 'react-native';
-import type {
-  NativeSyntheticEvent,
-  TextInputFocusEventData,
-} from 'react-native';
+import type { BlurEvent, FocusEvent } from 'react-native';
 import type { IconName } from '@hero-design/rn';
 import { StyledInputRow } from './StyledTextInput';
 import PrefixComponent from './PrefixComponent';
@@ -81,7 +78,7 @@ const InputRow = React.forwardRef<TextInputRef, InputRowProps>(
 
     // Simplified callback functions (removed unnecessary memoization for simple cases)
     const handleFocus = useCallback(
-      (event?: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (event?: FocusEvent) => {
         setIsFocused(true);
         nativeInputProps.onFocus?.(event);
       },
@@ -89,7 +86,7 @@ const InputRow = React.forwardRef<TextInputRef, InputRowProps>(
     );
 
     const handleBlur = useCallback(
-      (event?: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (event?: BlurEvent) => {
         setIsFocused(false);
         nativeInputProps.onBlur?.(event);
       },

package/src/components/TextInput/index.tsx

@@ -3,9 +3,9 @@ import { StyleSheet } from 'react-native';
 import type {
   StyleProp,
   ViewStyle,
-  NativeSyntheticEvent,
-  TextInputFocusEventData,
   ColorValue,
+  BlurEvent,
+  FocusEvent,
 } from 'react-native';
 import {
   StyledInputWrapper,
@@ -210,7 +210,7 @@ export const InternalTextInput = forwardRef<
 
     // Simplified callback functions (removed unnecessary memoization for simple cases)
     const handleFocus = useCallback(
-      (event?: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (event?: FocusEvent) => {
         setIsFocused(true);
         onFocus?.(event);
       },
@@ -218,7 +218,7 @@ export const InternalTextInput = forwardRef<
     );
 
     const handleBlur = useCallback(
-      (event?: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (event?: BlurEvent) => {
         setIsFocused(false);
         onBlur?.(event);
       },

package/src/components/TextInput/types.ts

@@ -4,8 +4,8 @@ import type {
   ViewStyle,
   TextStyle,
   TextInput as RNTextInput,
-  NativeSyntheticEvent,
-  TextInputFocusEventData,
+  FocusEvent,
+  BlurEvent,
 } from 'react-native';
 import type { IconName } from '@hero-design/rn';
 
@@ -20,12 +20,8 @@ export type NativeTextInputProps = Omit<
   RNTextInputProps,
   'onFocus' | 'onBlur'
 > & {
-  onFocus?: (
-    event?: NativeSyntheticEvent<TextInputFocusEventData>
-  ) => void | undefined;
-  onBlur?: (
-    event?: NativeSyntheticEvent<TextInputFocusEventData>
-  ) => void | undefined;
+  onFocus?: (event?: FocusEvent) => void | undefined;
+  onBlur?: (event?: BlurEvent) => void | undefined;
 };
 
 export interface TextInputRef {

package/types/index.d.ts

@@ -1,13 +1,13 @@
 import React$1, { ReactNode, Ref, ReactElement, PropsWithChildren } from 'react';
-import { TextInput as TextInput$1, TextInputProps as TextInputProps$1, StyleProp, ViewStyle, TextStyle, NativeSyntheticEvent, TextInputFocusEventData, ViewProps } from 'react-native';
+import { TextInputProps as TextInputProps$1, FocusEvent, BlurEvent, StyleProp, ViewStyle, TextStyle, TextInput as TextInput$1, ViewProps } from 'react-native';
 import { IconName, SelectOptionType, SingleSelectProps, MultiSelectProps, DatePickerProps, TimePickerProps, Theme as Theme$1, Scale, SystemPalette } from '@hero-design/rn';
 export * from '@hero-design/rn';
 
 type TextInputHandles = Pick<TextInput$1, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'>;
 type TextInputVariant = 'text' | 'textarea';
 type NativeTextInputProps = Omit<TextInputProps$1, 'onFocus' | 'onBlur'> & {
-    onFocus?: (event?: NativeSyntheticEvent<TextInputFocusEventData>) => void | undefined;
-    onBlur?: (event?: NativeSyntheticEvent<TextInputFocusEventData>) => void | undefined;
+    onFocus?: (event?: FocusEvent) => void | undefined;
+    onBlur?: (event?: BlurEvent) => void | undefined;
 };
 interface TextInputRef {
     focus: () => void;