@hero-design/rn 8.117.0 → 8.118.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.117.0",
+  "version": "8.118.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -28,16 +28,16 @@
     "nanoid": "^5.0.9"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.44.0",
+    "@hero-design/react-native-month-year-picker": "^8.45.0",
     "@ptomasroos/react-native-multi-slider": "^2.2.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-community/datetimepicker": "^3.5.2 || ^7.6.1",
+    "@react-native-community/slider": "^4.5.1",
+    "react": "18.3.1",
+    "react-native": "0.77.3 || 0.76.9",
+    "react-native-gesture-handler": "~2.20.2",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-pager-view": "^6.7.0",
-    "react-native-safe-area-context": "~5.6.0",
+    "react-native-safe-area-context": "^4.7.0",
     "react-native-svg": "^15.11.2",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^13.10.2"
@@ -56,11 +56,11 @@
     "@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.44.0",
+    "@hero-design/react-native-month-year-picker": "^8.45.0",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
-    "@react-native-community/datetimepicker": "8.4.4",
-    "@react-native-community/slider": "^5.0.1",
-    "@react-native/babel-preset": "0.81.5",
+    "@react-native-community/datetimepicker": "8.2.0",
+    "@react-native-community/slider": "^4.5.1",
+    "@react-native/babel-preset": "0.77.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
@@ -73,7 +73,7 @@
     "@types/d3": "^7.4.3",
     "@types/events": "^3.0.3",
     "@types/jest": "^29.5.3",
-    "@types/react": "^19.0.0",
+    "@types/react": "^18.2.0",
     "@types/react-native-vector-icons": "^6.4.10",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "babel-plugin-inline-import": "^3.0.0",
@@ -84,17 +84,17 @@
     "jest-environment-jsdom": "^29.2.1",
     "jest-junit": "^16.0.0",
     "prettier-config-hd": "8.42.4",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-native": "0.81.5",
-    "react-native-gesture-handler": "~2.28.0",
+    "react": "18.3.1",
+    "react-dom": "^18.2.0",
+    "react-native": "0.77.3",
+    "react-native-gesture-handler": "~2.20.2",
     "react-native-linear-gradient": "2.8.3",
-    "react-native-pager-view": "6.9.1",
-    "react-native-safe-area-context": "~5.6.0",
-    "react-native-svg": "15.12.1",
+    "react-native-pager-view": "6.5.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-svg": "15.8.0",
     "react-native-vector-icons": "^9.1.0",
-    "react-native-webview": "13.15.0",
-    "react-test-renderer": "19.1.0",
+    "react-native-webview": "13.10.3",
+    "react-test-renderer": "18.3.1",
     "rollup": "^4.24.3",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-flow": "^1.1.1",

package/src/components/AppCue/index.tsx

@@ -26,10 +26,7 @@ interface AppCueProps {
   /*
    * The target where the App Cue is relatively placed to.
    */
-  target: React.ReactElement<{
-    onPress?: () => void;
-    children?: React.ReactNode;
-  }>;
+  target: React.ReactElement;
 
   /**
    * The Position of the App Cue.

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactChild, ReactElement, ReactNode } from 'react';
 import React, { useCallback, useMemo, useState } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { Theme } from '../../theme';
@@ -69,7 +69,7 @@ export interface ButtonProps {
   /**
    * Button label.
    */
-  text?: ReactNode;
+  text?: ReactChild;
   /**
    * Button type.
    */

package/src/components/Button/UtilityButton/index.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
 import React from 'react';
+import type { ReactChild } from 'react';
 import type { ViewProps } from 'react-native';
 import Icon from '../../Icon';
 import {
@@ -21,7 +21,7 @@ interface UtilityButtonProps extends ViewProps {
   /**
    * Button label.
    */
-  text: ReactNode;
+  text: ReactChild;
   /**
    * Visual intent color to apply to button.
    */

package/src/components/Chip/index.tsx

@@ -77,8 +77,6 @@ const Chip = ({
   onPress,
   showSelectedIcon = true,
   accessible,
-  onBlur,
-  onFocus,
   ...otherProps
 }: ChipProps) => {
   useDeprecation(
@@ -100,8 +98,6 @@ const Chip = ({
       themeVariant={renamedVariant}
       themeSelected={selected}
       accessible={accessible}
-      onBlur={onBlur || undefined}
-      onFocus={onFocus || undefined}
       {...otherProps}
     >
       {icon && (

package/src/components/FloatingIsland/index.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import React from 'react';
-import type { LayoutChangeEvent, TouchableOpacityProps } from 'react-native';
+import type { LayoutChangeEvent, ViewProps } from 'react-native';
 import {
   StyledWrapper,
   StyledPrefixWrapper,
@@ -9,7 +9,7 @@ import {
 } from './StyledFloatingIsland';
 import type { IconName } from '../Icon';
 
-interface FloatingIslandProps extends TouchableOpacityProps {
+interface FloatingIslandProps extends ViewProps {
   /**
    * Callback that is called when the floating island is pressed.
    */

package/src/components/Search/SearchOneLine.tsx

@@ -149,7 +149,7 @@ const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
       isEmptyValue,
     });
 
-    const innerTextInput = React.useRef<RNTextInput | undefined | null>(null);
+    const innerTextInput = React.useRef<RNTextInput | undefined | null>();
 
     React.useImperativeHandle(
       ref,

package/src/components/Select/BaseOptionList.tsx

@@ -11,7 +11,7 @@ export type BaseOptionListProps<V, T extends SelectOptionType<V>> = Pick<
   SelectProps<V, T>,
   'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange'
 > & {
-  sectionListRef?: React.RefObject<SectionList<T, SectionType> | null>;
+  sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 } & SectionListProps<T, SectionType>;
 
 const BaseOptionList = <V, T extends SelectOptionType<V>>({
@@ -51,7 +51,7 @@ const BaseOptionList = <V, T extends SelectOptionType<V>>({
               height: theme.space.xxxxlarge,
             }}
           >
-            <Spinner testID="select-loading-spinner" />
+            <Spinner />
           </View>
         ) : null
       }

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

@@ -18,7 +18,7 @@ type OptionListProps<V, T extends SelectOptionType<V>> = Pick<
   | 'renderOption'
 > & {
   onPress: (value: V | null) => void;
-  sectionListRef?: React.RefObject<SectionList<T, SectionType> | null>;
+  sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 } & BaseOptionListProps<V, T>;
 
 const OptionList = <V, T extends SelectOptionType<V>>({

package/src/components/StatusScreens/Error/index.tsx

@@ -189,7 +189,7 @@ const ErrorPage = ({
  * @return {*}  {ReactElement}
  */
 const ErrorComponent = ({
-  visible: _visible,
+  visible = true,
   variant = 'in-page',
   title,
   description,
@@ -203,9 +203,8 @@ const ErrorComponent = ({
 }: ErrorProps): ReactElement => {
   useDeprecation(
     `Visible prop is deprecated. Use conditional rendering instead`,
-    _visible !== undefined
+    visible
   );
-  const visible = _visible === undefined ? true : _visible;
 
   const [isVisible, setIsVisible] = useState(visible);
   const [ctaPressed, setCtaPressed] = useState<onCloseCallbackType>(null);

package/src/components/Tabs/ScrollableTabs.tsx

@@ -1,3 +1,4 @@
+import type { FunctionComponent } from 'react';
 import React, { useEffect, useMemo, useRef } from 'react';
 import PagerView from 'react-native-pager-view';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -11,7 +12,7 @@ import { ScreenContext, TabContext } from './useIsFocused';
 
 export interface ScrollableTabProps extends Omit<TabsProps, 'header'> {
   variant?: 'underlined' | 'highlighted';
-  header?: (props: ScrollableTabHeaderProps) => React.ReactElement | null;
+  header?: FunctionComponent<ScrollableTabHeaderProps>;
 }
 
 const ScrollableTab = ({

package/src/components/Tabs/index.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@emotion/react';
-import type { ReactElement, ReactNode } from 'react';
+import type { FunctionComponent, ReactElement, ReactNode } from 'react';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { Animated, TouchableWithoutFeedback, View } from 'react-native';
@@ -92,7 +92,7 @@ export interface TabsProps extends ViewProps {
   /**
    * Custom header component.
    */
-  header?: (props: TabsHeaderProps) => ReactElement;
+  header?: FunctionComponent<TabsHeaderProps>;
 }
 
 const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);

package/src/components/TextInput/index.tsx

@@ -12,9 +12,9 @@ import type {
   ViewStyle,
   TextStyle,
   LayoutChangeEvent,
+  NativeSyntheticEvent,
+  TextInputFocusEventData,
   TextInput as RNTextInput,
-  BlurEvent,
-  FocusEvent,
 } from 'react-native';
 import {
   StyledTextInputContainer,
@@ -48,8 +48,12 @@ export type TextInputHandles = Pick<
 type TextInputVariant = 'text' | 'textarea';
 
 type NativeTextInputProps = Omit<RNTextInputProps, 'onFocus' | 'onBlur'> & {
-  onFocus?: (event?: FocusEvent) => void | undefined;
-  onBlur?: (event?: BlurEvent) => void | undefined;
+  onFocus?: (
+    event?: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => void | undefined;
+  onBlur?: (
+    event?: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => void | undefined;
 };
 
 interface TextInputRef {
@@ -234,8 +238,6 @@ export const renderInput = ({
       numberOfLines={numberOfLines}
       ref={ref}
       placeholderTextColor={theme.__hd__.textInput.colors.placeholder[state]}
-      onBlur={nativeInputProps?.onBlur}
-      onFocus={nativeInputProps?.onFocus}
     />
   );
 };
@@ -371,7 +373,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       setInputSize((prev) => ({ ...prev, height, width }));
     }, []);
 
-    const innerTextInput = React.useRef<RNTextInput | undefined | null>(null);
+    const innerTextInput = React.useRef<RNTextInput | undefined | null>();
     React.useImperativeHandle(
       ref,
       () => ({

package/src/components/Toolbar/ToolbarMessage.tsx

@@ -108,7 +108,7 @@ const ToolbarMessage = forwardRef<ToolbarMessageHandles, ToolbarMessageProps>(
     } = props;
     const theme = useTheme();
 
-    const innerTextInput = React.useRef<RNTextInput | undefined | null>(null);
+    const innerTextInput = React.useRef<RNTextInput | undefined | null>();
 
     const displayText = (value !== undefined ? value : defaultValue) ?? '';
     const isEmptyValue = displayText.length === 0;

package/src/utils/hooks.ts

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 
 // Get previous state value
 export const usePrevious = <T>(value: T) => {
-  const ref = React.useRef<T>(undefined);
+  const ref = React.useRef<T>();
   React.useEffect(() => {
     ref.current = value;
   }, [value]);

package/testUtils/setup.tsx

@@ -153,4 +153,10 @@ jest.mock('@hero-design/react-native-month-year-picker', () => {
   };
 });
 
+jest.mock('react-native/Libraries/Utilities/BackHandler', () => {
+  return jest.requireActual(
+    'react-native/Libraries/Utilities/__mocks__/BackHandler.js'
+  );
+});
+
 export {};

package/types/components/AppCue/index.d.ts

@@ -3,10 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import type { Placement } from './StyledAppCue';
 interface AppCueProps {
     content: string | React.ReactElement;
-    target: React.ReactElement<{
-        onPress?: () => void;
-        children?: React.ReactNode;
-    }>;
+    target: React.ReactElement;
     /**
      * The Position of the App Cue.
      */

package/types/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactChild, ReactElement, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 import type { Intent, ThemeVariant } from './StyledButton';
@@ -53,7 +53,7 @@ export interface ButtonProps {
     /**
      * Button label.
      */
-    text?: ReactNode;
+    text?: ReactChild;
     /**
      * Button type.
      */

package/types/components/Button/UtilityButton/index.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
 import React from 'react';
+import type { ReactChild } from 'react';
 import type { ViewProps } from 'react-native';
 import type { IconName } from '../../Icon';
 interface UtilityButtonProps extends ViewProps {
@@ -14,7 +14,7 @@ interface UtilityButtonProps extends ViewProps {
     /**
      * Button label.
      */
-    text: ReactNode;
+    text: ReactChild;
     /**
      * Visual intent color to apply to button.
      */

package/types/components/Chip/index.d.ts

@@ -39,5 +39,5 @@ interface ChipProps extends ViewProps {
      */
     accessible?: boolean;
 }
-declare const Chip: ({ label, variant, selected, icon, onPress, showSelectedIcon, accessible, onBlur, onFocus, ...otherProps }: ChipProps) => React.JSX.Element;
+declare const Chip: ({ label, variant, selected, icon, onPress, showSelectedIcon, accessible, ...otherProps }: ChipProps) => React.JSX.Element;
 export default Chip;

package/types/components/FloatingIsland/index.d.ts

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 import React from 'react';
-import type { TouchableOpacityProps } from 'react-native';
+import type { ViewProps } from 'react-native';
 import type { IconName } from '../Icon';
-interface FloatingIslandProps extends TouchableOpacityProps {
+interface FloatingIslandProps extends ViewProps {
     /**
      * Callback that is called when the floating island is pressed.
      */

package/types/components/Select/BaseOptionList.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { SectionList, SectionListProps } from 'react-native';
 import type { SelectOptionType, SelectProps, SectionType } from './types';
 export type BaseOptionListProps<V, T extends SelectOptionType<V>> = Pick<SelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange'> & {
-    sectionListRef?: React.RefObject<SectionList<T, SectionType> | null>;
+    sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 } & SectionListProps<T, SectionType>;
 declare const BaseOptionList: <V, T extends SelectOptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, sectionListRef, ...rest }: BaseOptionListProps<V, T>) => React.JSX.Element;
 export default BaseOptionList;

package/types/components/Select/SingleSelect/OptionList.d.ts

@@ -5,7 +5,7 @@ import type { BaseOptionListProps } from '../BaseOptionList';
 import type { SelectOptionType, SectionType } from '../types';
 type OptionListProps<V, T extends SelectOptionType<V>> = Pick<SingleSelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange' | 'value' | 'renderOption'> & {
     onPress: (value: V | null) => void;
-    sectionListRef?: React.RefObject<SectionList<T, SectionType> | null>;
+    sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 } & BaseOptionListProps<V, T>;
 declare const OptionList: <V, T extends SelectOptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, sectionListRef, ...rest }: OptionListProps<V, T>) => React.JSX.Element;
 export default OptionList;

package/types/components/StatusScreens/Error/index.d.ts

@@ -58,5 +58,5 @@ interface ErrorProps extends ViewProps {
  * @param {ErrorProps}
  * @return {*}  {ReactElement}
  */
-declare const ErrorComponent: ({ visible: _visible, variant, title, description, image, testID, ctaText, onCtaPress, secondaryCtaText, onSecondaryCtaPress, ...nativeProps }: ErrorProps) => ReactElement;
+declare const ErrorComponent: ({ visible, variant, title, description, image, testID, ctaText, onCtaPress, secondaryCtaText, onSecondaryCtaPress, ...nativeProps }: ErrorProps) => ReactElement;
 export default ErrorComponent;

package/types/components/Swipeable/index.d.ts

@@ -45,6 +45,6 @@ export interface SwipeableProps extends Pick<RnghSwipeableProps, 'enableTrackpad
 }
 declare const _default: (({ children, state, onStateChange, leftActions, leftActionsWidth, rightActions, rightActionsWidth, variant, ...swipeableProps }: SwipeableProps) => React.JSX.Element) & {
     Action: ({ intent, onPress, style, children, testID, }: import("./SwipeableAction").SwipeableActionProps) => React.JSX.Element;
-    Content: React.ForwardRefExoticComponent<Omit<import("react-native-gesture-handler").RectButtonProps, "innerRef"> & React.RefAttributes<React.ComponentType<{}>>>;
+    Content: React.ForwardRefExoticComponent<Omit<import("react-native-gesture-handler").RectButtonProps, "innerRef"> & React.RefAttributes<any>>;
 };
 export default _default;

package/types/components/Tabs/ScrollableTabs.d.ts

@@ -1,9 +1,10 @@
+import type { FunctionComponent } from 'react';
 import React from 'react';
 import type { TabsProps } from '.';
 import type { ScrollableTabHeaderProps } from './ScrollableTabsHeader/ScrollableTabsHeader';
 export interface ScrollableTabProps extends Omit<TabsProps, 'header'> {
     variant?: 'underlined' | 'highlighted';
-    header?: (props: ScrollableTabHeaderProps) => React.ReactElement | null;
+    header?: FunctionComponent<ScrollableTabHeaderProps>;
 }
 declare const ScrollableTab: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, variant, header, }: ScrollableTabProps) => React.JSX.Element;
 export default ScrollableTab;

package/types/components/Tabs/index.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { FunctionComponent, ReactElement, ReactNode } from 'react';
 import React from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { Animated } from 'react-native';
@@ -75,7 +75,7 @@ export interface TabsProps extends ViewProps {
     /**
      * Custom header component.
      */
-    header?: (props: TabsHeaderProps) => ReactElement;
+    header?: FunctionComponent<TabsHeaderProps>;
 }
 declare const _default: (({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, header, }: TabsProps) => ReactElement) & {
     Header: ({ tabs, selectedTabKey, onTabPress, barStyle, insets, componentTestID, tabsWidth, setTabsWidth, positionAnimatedValue, scrollOffsetAnimatedValue, }: TabsHeaderProps) => React.JSX.Element;

package/types/components/Tabs/useHandlePageScroll.d.ts

@@ -3,6 +3,6 @@ declare const useHandlePageScroll: () => {
     onPageScrollStateChanged: (e: NativeSyntheticEvent<Readonly<{
         pageScrollState: "idle" | "dragging" | "settling";
     }>>) => void;
-    hasScrolled: import("react").RefObject<boolean>;
+    hasScrolled: import("react").MutableRefObject<boolean>;
 };
 export default useHandlePageScroll;

package/types/components/TextInput/index.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import type { TextInputProps as RNTextInputProps, StyleProp, ViewStyle, TextStyle, TextInput as RNTextInput, BlurEvent, FocusEvent } from 'react-native';
+import type { TextInputProps as RNTextInputProps, StyleProp, ViewStyle, TextStyle, NativeSyntheticEvent, TextInputFocusEventData, TextInput as RNTextInput } from 'react-native';
 import type { Theme } from '../../theme';
 import type { State } from './StyledTextInput';
 import type { IconName } from '../Icon';
 export type TextInputHandles = Pick<RNTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'>;
 type TextInputVariant = 'text' | 'textarea';
 type NativeTextInputProps = Omit<RNTextInputProps, 'onFocus' | 'onBlur'> & {
-    onFocus?: (event?: FocusEvent) => void | undefined;
-    onBlur?: (event?: BlurEvent) => void | undefined;
+    onFocus?: (event?: NativeSyntheticEvent<TextInputFocusEventData>) => void | undefined;
+    onBlur?: (event?: NativeSyntheticEvent<TextInputFocusEventData>) => void | undefined;
 };
 interface TextInputRef {
     focus: () => void;
@@ -116,7 +116,7 @@ export declare const renderInput: ({ variant, nativeInputProps, renderInputValue
     ref?: React.Ref<RNTextInput>;
     theme: Theme;
     state: State;
-}) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+}) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
 export declare const renderSuffix: ({ state, loading, suffix, }: {
     state: State;
     loading: boolean;