@hero-design/rn 8.102.0 → 8.102.1

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3176) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3206) 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 11.7s
+created lib/index.js, es/index.js in 1m 13s
 
 /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.5s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.102.1
+
+### Patch Changes
+
+- [#3980](https://github.com/Thinkei/hero-design/pull/3980) [`7e0859459ea48c43c9edcc01a64c80ab715b4d15`](https://github.com/Thinkei/hero-design/commit/7e0859459ea48c43c9edcc01a64c80ab715b4d15) Thanks [@cuongnguyeneh](https://github.com/cuongnguyeneh)! - [TextInput] Update testId of native text input
+
 ## 8.102.0
 
 ### Minor Changes
@@ -12,6 +18,8 @@
 
 - [#3999](https://github.com/Thinkei/hero-design/pull/3999) [`28a6ab3090ec7d2a596de5c5838072b12f5c6104`](https://github.com/Thinkei/hero-design/commit/28a6ab3090ec7d2a596de5c5838072b12f5c6104) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [TextInput] Update internal border testID
 
+- [#4002](https://github.com/Thinkei/hero-design/pull/4002) [`ffaa510e9dec7177e29a3afe1b2d07c012d14fd8`](https://github.com/Thinkei/hero-design/commit/ffaa510e9dec7177e29a3afe1b2d07c012d14fd8) Thanks [@ttkien](https://github.com/ttkien)! - export more types
+
 ## 8.101.3
 
 ### Patch Changes

package/es/index.js

@@ -20177,12 +20177,13 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     }, [style, theme]),
     backgroundColor = _useMemo2.backgroundColor,
     styleWithoutBackgroundColor = _useMemo2.styleWithoutBackgroundColor;
+  var nativeInputTestIDSuffix = testID ? "-".concat(testID) : '';
   var nativeInputProps = _objectSpread2(_objectSpread2({
     style: StyleSheet$1.flatten([{
       backgroundColor: backgroundColor,
       color: theme.__hd__.textInput.colors.text
     }, textStyleWithoutBorderStyle]),
-    testID: 'text-input',
+    testID: "text-input".concat(nativeInputTestIDSuffix),
     accessibilityState: {
       disabled: state === 'disabled' || state === 'readonly'
     },

package/lib/index.js

@@ -20206,12 +20206,13 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     }, [style, theme]),
     backgroundColor = _useMemo2.backgroundColor,
     styleWithoutBackgroundColor = _useMemo2.styleWithoutBackgroundColor;
+  var nativeInputTestIDSuffix = testID ? "-".concat(testID) : '';
   var nativeInputProps = _objectSpread2(_objectSpread2({
     style: reactNative.StyleSheet.flatten([{
       backgroundColor: backgroundColor,
       color: theme.__hd__.textInput.colors.text
     }, textStyleWithoutBorderStyle]),
-    testID: 'text-input',
+    testID: "text-input".concat(nativeInputTestIDSuffix),
     accessibilityState: {
       disabled: state === 'disabled' || state === 'readonly'
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.102.0",
+  "version": "8.102.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Select/BaseOptionList.tsx

@@ -4,16 +4,16 @@ import { Dimensions, SectionList, SectionListProps, View } from 'react-native';
 import SectionHeading from '../SectionHeading';
 import Spinner from '../Spinner';
 import { OptionSpacer, SectionSpacer, StyledSectionList } from './StyledSelect';
-import type { OptionType, SelectProps, SectionType } from './types';
+import type { SelectOptionType, SelectProps, SectionType } from './types';
 
-export type BaseOptionListProps<V, T extends OptionType<V>> = Pick<
+export type BaseOptionListProps<V, T extends SelectOptionType<V>> = Pick<
   SelectProps<V, T>,
   'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange'
 > & {
   sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 } & SectionListProps<T, SectionType>;
 
-const BaseOptionList = <V, T extends OptionType<V>>({
+const BaseOptionList = <V, T extends SelectOptionType<V>>({
   keyExtractor,
   loading,
   onEndReached,

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

@@ -3,11 +3,11 @@ import type { SectionListRenderItemInfo } from 'react-native';
 import BaseOptionList, { BaseOptionListProps } from '../BaseOptionList';
 import Option from './Option';
 import type { MultiSelectProps } from '.';
-import type { OptionType, SectionType } from '../types';
+import type { SelectOptionType, SectionType } from '../types';
 import { isOptionSelected } from './utils';
 import { deepCompareValue } from '../../../utils/helpers';
 
-type OptionListProps<V, T extends OptionType<V>> = Pick<
+type OptionListProps<V, T extends SelectOptionType<V>> = Pick<
   MultiSelectProps<V, T>,
   | 'keyExtractor'
   | 'loading'
@@ -19,7 +19,7 @@ type OptionListProps<V, T extends OptionType<V>> = Pick<
   onPress: (value: V[]) => void;
 } & BaseOptionListProps<V, T>;
 
-const OptionList = <V, T extends OptionType<V>>({
+const OptionList = <V, T extends SelectOptionType<V>>({
   keyExtractor,
   loading,
   onEndReached,

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

@@ -10,13 +10,15 @@ import TextInput from '../../TextInput';
 import Footer from '../Footer';
 import { getScrollParams, toFlatOptions, toSections } from '../helpers';
 import { StyledSearchBar } from '../StyledSelect';
-import type { OptionType, SectionType, SelectProps } from '../types';
+import type { SelectOptionType, SectionType, SelectProps } from '../types';
 import OptionList from './OptionList';
 import { isOptionSelected } from './utils';
 import { useKeyboard } from '../../../utils/helpers';
 
-export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>>
-  extends SelectProps<V, T> {
+export interface MultiSelectProps<
+  V,
+  T extends SelectOptionType<V> = SelectOptionType<V>
+> extends SelectProps<V, T> {
   /**
    * Current selected value.
    */
@@ -50,7 +52,7 @@ export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>>
   supportedOrientations?: ('portrait' | 'landscape')[];
 }
 
-function MultiSelect<V, T extends OptionType<V>>({
+function MultiSelect<V, T extends SelectOptionType<V>>({
   footerLabel,
   label,
   loading = false,

package/src/components/Select/MultiSelect/utils.ts

@@ -1,7 +1,7 @@
 import { deepCompareValue } from '../../../utils/helpers';
-import { OptionType } from '../types';
+import { SelectOptionType } from '../types';
 
-export const isOptionSelected = <V, T extends OptionType<V>>(
+export const isOptionSelected = <V, T extends SelectOptionType<V>>(
   value?: V[],
   option?: T
 ): boolean => {

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

@@ -6,12 +6,12 @@ import {
 } from 'react-native';
 import type { SingleSelectProps } from '.';
 import { BaseOptionListProps } from '../BaseOptionList';
-import type { OptionType, SectionType } from '../types';
+import type { SelectOptionType, SectionType } from '../types';
 import Option from './Option';
 import { StyledOptionList } from './StyledSingleSelect';
 import { deepCompareValue } from '../../../utils/helpers';
 
-type OptionListProps<V, T extends OptionType<V>> = Pick<
+type OptionListProps<V, T extends SelectOptionType<V>> = Pick<
   SingleSelectProps<V, T>,
   | 'keyExtractor'
   | 'loading'
@@ -24,7 +24,7 @@ type OptionListProps<V, T extends OptionType<V>> = Pick<
   sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 } & BaseOptionListProps<V, T>;
 
-const OptionList = <V, T extends OptionType<V>>({
+const OptionList = <V, T extends SelectOptionType<V>>({
   keyExtractor,
   loading,
   onEndReached,

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

@@ -8,12 +8,14 @@ import BottomSheet from '../../BottomSheet';
 import TextInput from '../../TextInput';
 import { getScrollParams, toFlatOptions, toSections } from '../helpers';
 import { StyledSearchBar } from '../StyledSelect';
-import type { OptionType, SectionType, SelectProps } from '../types';
+import type { SelectOptionType, SectionType, SelectProps } from '../types';
 import OptionList from './OptionList';
 import { deepCompareValue, useKeyboard } from '../../../utils/helpers';
 
-export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>>
-  extends SelectProps<V, T> {
+export interface SingleSelectProps<
+  V,
+  T extends SelectOptionType<V> = SelectOptionType<V>
+> extends SelectProps<V, T> {
   /**
    * Current selected value.
    */
@@ -35,7 +37,7 @@ export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>>
   supportedOrientations?: ('portrait' | 'landscape')[];
 }
 
-const SingleSelect = <V, T extends OptionType<V>>({
+const SingleSelect = <V, T extends SelectOptionType<V>>({
   label,
   loading = false,
   inputProps,

package/src/components/Select/helpers.tsx

@@ -1,6 +1,10 @@
-import type { SectionData, CombinedOptionsType, OptionType } from './types';
+import type {
+  SectionData,
+  CombinedOptionsType,
+  SelectOptionType,
+} from './types';
 
-export const getKey = <V, T extends OptionType<V>>(
+export const getKey = <V, T extends SelectOptionType<V>>(
   option: T,
   index: number,
   keyExtractor?: (opt: T, i?: number) => string
@@ -17,7 +21,7 @@ export const getKey = <V, T extends OptionType<V>>(
   return key;
 };
 
-export const isSections = <V, T extends OptionType<V>>(
+export const isSections = <V, T extends SelectOptionType<V>>(
   options: CombinedOptionsType<V, T>
 ): options is SectionData<V, T>[] => {
   const firstOption = options[0];
@@ -28,7 +32,7 @@ export const isSections = <V, T extends OptionType<V>>(
   );
 };
 
-export const toSections = <V, T extends OptionType<V>>(
+export const toSections = <V, T extends SelectOptionType<V>>(
   options: CombinedOptionsType<V, T>
 ): SectionData<V, T>[] => {
   if (isSections(options)) {
@@ -38,9 +42,9 @@ export const toSections = <V, T extends OptionType<V>>(
   return [{ category: '', data: options }];
 };
 
-export const toFlatOptions = <V, T extends OptionType<V>>(
+export const toFlatOptions = <V, T extends SelectOptionType<V>>(
   options: CombinedOptionsType<V, T>
-): OptionType<V>[] => {
+): SelectOptionType<V>[] => {
   if (isSections(options)) {
     return options.flatMap((opt) => opt.data);
   }
@@ -53,7 +57,7 @@ export type ScrollParams = {
   sectionIndex: number;
 };
 
-export const getScrollParams = <V, T extends OptionType<V>>(
+export const getScrollParams = <V, T extends SelectOptionType<V>>(
   value: V,
   sections: SectionData<V, T>[]
 ): ScrollParams => {

package/src/components/Select/types.ts

@@ -9,7 +9,7 @@ import type {
 import { BottomSheetProps } from '../BottomSheet';
 import type { TextInputProps } from '../TextInput';
 
-export type OptionType<V> = {
+export type SelectOptionType<V> = {
   value: V;
   text: string;
   key?: string;
@@ -18,29 +18,29 @@ export type OptionType<V> = {
 };
 
 export type SectionType = { category: string };
-export type SectionData<V, T extends OptionType<V>> = SectionListData<
+export type SectionData<V, T extends SelectOptionType<V>> = SectionListData<
   T,
   SectionType
 >;
 
-export type CombinedOptionsType<V, T extends OptionType<V>> =
+export type CombinedOptionsType<V, T extends SelectOptionType<V>> =
   | T[]
   | SectionData<V, T>[];
 
 export type ListRenderOptionInfo<
   V,
-  T extends OptionType<V>
+  T extends SelectOptionType<V>
 > = ListRenderItemInfo<T> & { selected: boolean; onPress: () => void };
 
 export type SectionListRenderOptionInfo<
   V,
-  T extends OptionType<V>
+  T extends SelectOptionType<V>
 > = SectionListRenderItemInfo<T, SectionType> & {
   selected: boolean;
   onPress: () => void;
 };
 
-export interface SelectProps<V, T extends OptionType<V>>
+export interface SelectProps<V, T extends SelectOptionType<V>>
   extends Pick<TextInputProps, 'editable' | 'disabled' | 'error' | 'required'> {
   /**
    * An array of options to be selected.

package/src/components/Switch/SelectorSwitch/Option.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import React, { useEffect, useRef } from 'react';
 import { Animated, Easing, LayoutChangeEvent, Platform } from 'react-native';
-import type { BadgeConfigType, OptionType } from '.';
+import type { BadgeConfigType, SwitchOptionType } from '.';
 import { useTheme } from '../../../theme';
 import Badge from '../../Badge';
 import Icon from '../../Icon';
@@ -42,7 +42,7 @@ const Option = <T,>({
   selected,
   onLayout,
   index = 0,
-}: Pick<OptionType<T>, 'text' | 'icon' | 'badge'> & {
+}: Pick<SwitchOptionType<T>, 'text' | 'icon' | 'badge'> & {
   selected: boolean;
   onLayout?: (e: LayoutChangeEvent) => void;
   index?: number;

package/src/components/Switch/SelectorSwitch/index.tsx

@@ -23,7 +23,7 @@ type StatusBadgeType = {
 };
 export type BadgeConfigType = StatusBadgeType;
 
-export type OptionType<T> = {
+export type SwitchOptionType<T> = {
   value: T;
   text: string;
   icon: IconName;
@@ -34,7 +34,7 @@ export interface SelectorSwitchProps<T> {
   /**
    * Array of exactly TWO options to switch between.
    */
-  options: [OptionType<T>, OptionType<T>];
+  options: [SwitchOptionType<T>, SwitchOptionType<T>];
   /**
    * Current selected value.
    */

package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1185,7 +1185,7 @@ exports[`TextInput disabled renders correctly 1`] = `
               },
             ]
           }
-          testID="text-input"
+          testID="text-input-disabled-text-input"
           themeVariant="text"
           value="100"
         />
@@ -2320,7 +2320,7 @@ exports[`TextInput idle renders correctly 1`] = `
               },
             ]
           }
-          testID="text-input"
+          testID="text-input-idle-text-input"
           themeVariant="text"
         />
       </View>

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -54,7 +54,9 @@ describe('TextInput', () => {
       expect(toJSON()).toMatchSnapshot();
       expect(getByTestId('idle-text-input')).toBeTruthy();
       expect(
-        within(getByTestId('idle-text-input')).queryAllByTestId('text-input')
+        within(getByTestId('idle-text-input')).queryAllByTestId(
+          'text-input-idle-text-input'
+        )
       ).toHaveLength(1);
       expect(
         within(getByTestId('idle-text-input')).queryAllByText('Amount (AUD)')
@@ -69,7 +71,9 @@ describe('TextInput', () => {
         within(getByTestId('idle-text-input')).queryAllByTestId('input-suffix')
       ).toHaveLength(1);
 
-      expect(getByTestId('text-input').props.placeholder).toBe(' ');
+      expect(getByTestId('text-input-idle-text-input').props.placeholder).toBe(
+        ' '
+      );
     });
 
     it('should not render input-label if label is empty', () => {
@@ -104,7 +108,7 @@ describe('TextInput', () => {
       );
 
       const testInput = within(getByTestId('idle-text-input')).getByTestId(
-        'text-input'
+        'text-input-idle-text-input'
       );
 
       fireEvent.changeText(testInput, 'Thong Quach');
@@ -305,13 +309,18 @@ describe('TextInput', () => {
       expect(toJSON()).toMatchSnapshot();
       expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
       expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      expect(queryAllByTestId('text-input-disabled-text-input')).toHaveLength(
+        1
+      );
       expect(getByTestId('disabled-text-input')).toHaveProp(
         'pointerEvents',
         'none'
       );
 
-      expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
+      expect(getByTestId('text-input-disabled-text-input')).not.toHaveProp(
+        'multiline',
+        'true'
+      );
     });
   });
 
@@ -560,7 +569,7 @@ describe('renderInput', () => {
         {renderInput({
           variant: 'textarea',
           nativeInputProps: {
-            testID: 'text-input',
+            testID: 'text-input-idle-text-input',
             value: 'text input value',
           },
           theme,
@@ -568,7 +577,9 @@ describe('renderInput', () => {
       </>
     );
 
-    expect(wrapper.queryAllByTestId('text-input')).toHaveLength(1);
+    expect(wrapper.queryAllByTestId('text-input-idle-text-input')).toHaveLength(
+      1
+    );
     expect(wrapper.queryAllByDisplayValue('text input value')).toHaveLength(1);
   });
 });

package/src/components/TextInput/index.tsx

@@ -397,6 +397,8 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       };
     }, [style, theme]);
 
+    const nativeInputTestIDSuffix = testID ? `-${testID}` : '';
+
     const nativeInputProps: NativeTextInputProps = {
       style: StyleSheet.flatten([
         {
@@ -405,7 +407,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
         },
         textStyleWithoutBorderStyle,
       ]),
-      testID: 'text-input',
+      testID: `text-input${nativeInputTestIDSuffix}`,
       accessibilityState: {
         disabled: state === 'disabled' || state === 'readonly',
       },

package/src/types.ts

@@ -1,5 +1,5 @@
 import type { BottomNavigationTabType } from './components/BottomNavigation';
-import type { IconName } from './components/Icon';
+import type { IconName, IconProps } from './components/Icon';
 import type { SingleSelectProps, MultiSelectProps } from './components/Select';
 import type { TabType } from './components/Tabs';
 import type { TextInputProps, TextInputHandles } from './components/TextInput';
@@ -8,9 +8,10 @@ import type {
   RichTextEditorProps,
 } from './components/RichTextEditor';
 import type { Theme } from './theme';
-import type {
+import {
   ListRenderOptionInfo,
   SectionListRenderOptionInfo,
+  SelectOptionType,
 } from './components/Select/types';
 import { SwipeableProps } from './components/Swipeable';
 import { TextProps } from './components/Typography/Text';
@@ -20,21 +21,54 @@ import {
   ActionGroupHandles,
   ActionGroupProps,
 } from './components/FAB/ActionGroup';
+import type { ActionItemProps } from './components/FAB/ActionGroup/ActionItem';
 import type { SliderRangeValue } from './components/Slider/RangeSlider';
 import type { CalendarDateRange } from './components/Calendar/CalendarRange';
 import { LocaleCode, LocaleValues, DateTimeFormats } from './locales/types';
 import type { ColumnChartProps } from './components/Chart/ColumnChart';
 import { LineChartProps } from './components/Chart/Line';
 import type { Scale, SystemPalette } from './theme/global';
+import type {
+  BrandSystemPalette,
+  GlobalSystemPalette,
+} from './theme/global/colors/types';
+import { ToolbarItemProps } from './components/Toolbar/ToolbarItem';
+import type { CheckboxProps } from './components/Checkbox';
+import type { SwitchOptionType } from './components/Switch/SelectorSwitch';
+import type { BoxProps } from './components/Box';
+import type { BodyProps } from './components/Typography/Body';
+import type { ToolbarButtonName } from './components/RichTextEditor/types';
+import type { ListItemProps } from './components/List/ListItem';
+import type { IconButtonProps } from './components/Button/IconButton';
+import type { BadgeProps } from './components/Badge';
+import { ToastProps } from './components/Toast/types';
+import { Space } from './theme/global/space';
+import { CaptionProps } from './components/Typography/Caption';
+import { Radii } from './theme/global/borders';
+import { TitleProps } from './components/Typography/Title';
+import { CarouselData, CarouselImageProps } from './components/Carousel/types';
+import { PinInputHandler } from './components/PinInput';
+import { ThemeScale } from './components/Box/types';
 
 export type {
+  Space,
+  CaptionProps,
+  Radii,
+  TitleProps,
+  CarouselData,
+  CarouselImageProps,
+  PinInputHandler,
+  ThemeScale,
+  ToastProps,
   ActionGroupProps,
+  ToolbarItemProps,
   BottomNavigationTabType,
   IconName,
   SingleSelectProps,
   MultiSelectProps,
   ListRenderOptionInfo,
   SectionListRenderOptionInfo,
+  SelectOptionType,
   SwipeableProps,
   RichTextEditorProps,
   RichTextEditorRef,
@@ -46,6 +80,7 @@ export type {
   CardCarouselHandles,
   FABHandles,
   ActionGroupHandles,
+  ActionItemProps,
   SliderRangeValue,
   CalendarDateRange,
   LocaleCode,
@@ -55,4 +90,15 @@ export type {
   LineChartProps,
   Scale,
   SystemPalette,
+  BrandSystemPalette,
+  GlobalSystemPalette,
+  IconProps,
+  CheckboxProps,
+  SwitchOptionType,
+  BoxProps,
+  BodyProps,
+  ToolbarButtonName,
+  ListItemProps,
+  IconButtonProps,
+  BadgeProps,
 };