Merge pull request #4873 from GeekyAnts/release/3.4.0-rc.3

Release/3.4.0 rc.3

example/storybook/stories/components/Wrapper.tsx

@@ -11,6 +11,7 @@ import {
   SunIcon,
   extendTheme,
   Button,
+  Input,
 } from 'native-base';
 import type { StorageManager } from 'native-base';
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -38,6 +39,12 @@ const myTheme = extendTheme({
             padding: myPaddingX,
           };
         },
+
+        myNewButton1: (props: any) => {
+          return {
+            padding: props.padding,
+          };
+        },
       },
       sizes: {
         newsize: ({ mySize }: { mySize: number }) => {
@@ -48,6 +55,27 @@ const myTheme = extendTheme({
       },
     },
 
+    Input: {
+      variants: {
+        newsize: ({ mySize }: { mySize: number }) => {
+          return {
+            padding: mySize,
+          };
+        },
+
+        newsize1: (props: any) => {
+          return {
+            padding: props.padding,
+          };
+        },
+      },
+      sizes: {
+        'my-size': {
+          padding: 2,
+        },
+      },
+    },
+
     Checkbox: {
       sizes: {
         myBtn: {
@@ -115,7 +143,9 @@ export function RenderTestButton() {
   const [state, setState] = React.useState(1);
   return (
     <Box style={{ position: 'absolute', top: 10, left: 20 }} m={2} bg="red.100">
+      <Input m={2} size="my-size" />
       <Button
+        size=""
         variant={'myNewButton'}
         // title={state.toString()}
         onPress={() => setState(state + 1)}

package.json

@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.0-rc.1",
+  "version": "3.4.0-rc.3",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",
@@ -89,7 +89,7 @@
     "release-it": "^13.5.8",
     "rollup": "^2.34.1",
     "rollup-plugin-flow": "^1.1.1",
-    "typescript": "4.2",
+    "typescript": "4.6",
     "visualize-bundle": "^1.4.0"
   },
   "peerDependencies": {
@@ -182,7 +182,7 @@
     "@react-native-aria/combobox": "^0.2.4-alpha.0",
     "@react-native-aria/focus": "^0.2.4",
     "@react-native-aria/interactions": "^0.2.2",
-    "@react-native-aria/listbox": "0.2.4-alpha.3",
+    "@react-native-aria/listbox": "^0.2.4-alpha.3",
     "@react-native-aria/overlays": "0.3.3-rc.0",
     "@react-native-aria/radio": "^0.2.4",
     "@react-native-aria/slider": "^0.2.5-alpha.1",

src/components/basic/FlatList/types.ts

@@ -12,6 +12,5 @@ export interface InterfaceFlatListProps<ItemT>
   _contentContainerStyle?: Partial<IFlatListProps<ItemT>>;
 }
 
-export type IFlatListProps<ItemT> =
-  | InterfaceFlatListProps<ItemT>
-  | CustomProps<'FlatList'>;
+export type IFlatListProps<ItemT> = InterfaceFlatListProps<ItemT> &
+  CustomProps<'FlatList'>;

src/components/basic/KeyboardAvoidingView/types.ts

@@ -11,6 +11,5 @@ export interface InterfaceKeyboardAvoidingViewProps
   children?: JSX.Element | JSX.Element[] | string | any;
 }
 
-export type IKeyboardAvoidingViewProps =
-  | InterfaceKeyboardAvoidingViewProps
-  | CustomProps<'KeyboardAvoidingView'>;
+export type IKeyboardAvoidingViewProps = InterfaceKeyboardAvoidingViewProps &
+  CustomProps<'KeyboardAvoidingView'>;

src/components/basic/ScrollView/types.ts

@@ -15,6 +15,5 @@ export interface InterfaceScrollViewProps
   _contentContainerStyle?: Partial<IScrollViewProps>;
 }
 
-export type IScrollViewProps =
-  | InterfaceScrollViewProps
-  | CustomProps<'ScrollView'>;
+export type IScrollViewProps = InterfaceScrollViewProps &
+  CustomProps<'ScrollView'>;

src/components/basic/SectionList/types.ts

@@ -10,6 +10,7 @@ export interface InterfaceSectionListProps<ItemT, sectionT = DefaultSectionT>
     StyledProps,
     PlatformProps<ISectionListProps<ItemT, sectionT>> {}
 
-export type ISectionListProps<ItemT, sectionT = DefaultSectionT> =
-  | InterfaceSectionListProps<ItemT, sectionT>
-  | CustomProps<'SectionList'>;
+export type ISectionListProps<
+  ItemT,
+  sectionT = DefaultSectionT
+> = InterfaceSectionListProps<ItemT, sectionT> & CustomProps<'SectionList'>;

src/components/basic/StatusBar/types.ts

@@ -2,6 +2,7 @@ import type { StatusBarProps } from 'react-native';
 import type { CustomProps } from '../../../components/types';
 
 export interface InterfaceStatusBarProps extends StatusBarProps {}
-export type IStatusBarProps =
-  | InterfaceStatusBarProps
-  | CustomProps<'StatusBar'>;
+export type IStatusBarProps = InterfaceStatusBarProps &
+  CustomProps<'StatusBar'>;
+
+export type IStatusBarComponentType = (props: IStatusBarProps) => JSX.Element;

src/components/basic/View/types.ts

@@ -11,4 +11,4 @@ export interface InterfaceViewProps
   children?: JSX.Element | JSX.Element[] | string | any;
 }
 
-export type IViewProps = InterfaceViewProps | CustomProps<'View'>;
+export type IViewProps = InterfaceViewProps & CustomProps<'View'>;

src/components/composites/Actionsheet/types.tsx

@@ -1,10 +1,10 @@
 import type { InterfaceButtonProps } from '../../primitives/Button/types';
-import type { IBoxProps } from '../../primitives/Box';
+import type { InterfaceBoxProps } from '../../primitives/Box';
 import type { MutableRefObject } from 'react';
 import type { CustomProps } from '../../../components/types';
 
 export interface InterfaceActionsheetProps
-  extends IBoxProps<IActionsheetProps> {
+  extends InterfaceBoxProps<IActionsheetProps> {
   /**
    * If true, the ActionSheet will open. Useful for controllable state behaviour
    */
@@ -30,24 +30,24 @@ export interface InterfaceActionsheetProps
 }
 
 export interface IActionsheetContentProps
-  extends IBoxProps<IActionsheetContentProps> {
+  extends InterfaceBoxProps<IActionsheetContentProps> {
   /**
    * Props applied on area above actionsheet content
    */
-  _dragIndicatorWrapperOffSet?: IBoxProps<IActionsheetContentProps>;
+  _dragIndicatorWrapperOffSet?: InterfaceBoxProps<IActionsheetContentProps>;
   /**
    * Props applied on area around drag indicator
    */
-  _dragIndicatorWrapper?: IBoxProps<IActionsheetContentProps>;
+  _dragIndicatorWrapper?: InterfaceBoxProps<IActionsheetContentProps>;
   /**
    * Props applied on drag indicator
    */
-  _dragIndicator?: IBoxProps<IActionsheetContentProps>;
+  _dragIndicator?: InterfaceBoxProps<IActionsheetContentProps>;
 }
 export interface IActionsheetFooterProps
-  extends IBoxProps<IActionsheetFooterProps> {}
+  extends InterfaceBoxProps<IActionsheetFooterProps> {}
 export interface IActionsheetHeaderProps
-  extends IBoxProps<IActionsheetHeaderProps> {}
+  extends InterfaceBoxProps<IActionsheetHeaderProps> {}
 export interface IActionsheetItemProps extends InterfaceButtonProps {}
 
 export type IActionsheetComponentType = ((
@@ -75,6 +75,5 @@ export type IActionsheetComponentType = ((
   // >;
 };
 
-export type IActionsheetProps =
-  | InterfaceActionsheetProps
-  | CustomProps<'Actionsheet'>;
+export type IActionsheetProps = InterfaceActionsheetProps &
+  CustomProps<'Actionsheet'>;

src/components/composites/Alert/types.tsx

@@ -1,8 +1,9 @@
 import type { MutableRefObject } from 'react';
-import type { IBoxProps, IIconProps } from '../../primitives';
+import type { InterfaceBoxProps } from '../../../components/primitives/Box';
+import type { IIconProps } from '../../primitives';
 import type { CustomProps, VariantType } from '../../types';
 
-export interface InterfaceAlertProps extends IBoxProps<IAlertProps> {
+export interface InterfaceAlertProps extends InterfaceBoxProps<IAlertProps> {
   /** The status of the alert
    *  @default info
    */
@@ -32,4 +33,4 @@ export type IAlertComponentType = ((
   >;
 };
 
-export type IAlertProps = InterfaceAlertProps | CustomProps<'Alert'>;
+export type IAlertProps = InterfaceAlertProps & CustomProps<'Alert'>;

src/components/composites/AlertDialog/types.ts

@@ -2,7 +2,10 @@ import type { IBoxProps } from '../../primitives/Box';
 import type { IIconButtonProps } from '../IconButton';
 import type { MutableRefObject } from 'react';
 import type { IFadeProps, ISlideProps } from '../Transitions';
-import type { CustomProps } from '../../../components/types/utils';
+import type {
+  CustomProps,
+  ThemeComponentSizeType,
+} from '../../../components/types/utils';
 
 export interface InterfaceAlertDialogProps extends IBoxProps {
   /**
@@ -20,7 +23,7 @@ export interface InterfaceAlertDialogProps extends IBoxProps {
   /**
    * The size of the AlertDialog
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | number | string;
+  size?: ThemeComponentSizeType<'AlertDialog'>; //'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | number | string;
   /**
    * The ref of element that is least destructive child of the AlertDialog.
    */
@@ -65,15 +68,15 @@ export interface InterfaceAlertDialogProps extends IBoxProps {
   /**
    * Props applied on Overlay Animation.
    */
-  _backdropFade?: IFadeProps;
+  _backdropFade?: Partial<IFadeProps>;
   /**
    * Props applied on Child Fade Animation.
    */
-  _fade?: IFadeProps;
+  _fade?: Partial<IFadeProps>;
   /**
    * Props applied on Child Slide Animation.
    */
-  _slide?: ISlideProps;
+  _slide?: Partial<ISlideProps>;
   /**
    * Sets the animation type
    * @default "fade"
@@ -101,6 +104,5 @@ export type IAlertDialogComponentType = ((
   >;
 };
 
-export type IAlertDialogProps =
-  | InterfaceAlertDialogProps
-  | CustomProps<'AlertDialog'>;
+export type IAlertDialogProps = InterfaceAlertDialogProps &
+  CustomProps<'AlertDialog'>;

src/components/composites/AspectRatio/types.ts

@@ -1,15 +1,14 @@
-import type { IBoxProps } from '../../primitives/Box';
+import type { InterfaceBoxProps } from '../../primitives/Box';
 import type { CustomProps, ResponsiveValue } from '../../../components/types';
 
 export interface InterfaceAspectRatioProps
-  extends IBoxProps<IAspectRatioProps> {
+  extends InterfaceBoxProps<IAspectRatioProps> {
   /**
    * The aspect ratio of the container. Some examples are `16/9`, `16/10`, `9/16`, `4/3`
    * @default 4/3
    */
   ratio?: ResponsiveValue<number>;
 }
 
-export type IAspectRatioProps =
-  | InterfaceAspectRatioProps
-  | CustomProps<'AspectRatio'>;
+export type IAspectRatioProps = InterfaceAspectRatioProps &
+  CustomProps<'AspectRatio'>;

src/components/composites/Avatar/types.tsx

@@ -1,11 +1,10 @@
-import type { IBoxProps } from '../../primitives/Box';
+import type { InterfaceBoxProps } from '../../primitives/Box';
 import type { IImageProps } from '../../primitives/Image';
 import type { ImageSourcePropType } from 'react-native';
 import type { MutableRefObject } from 'react';
-import type { CustomProps, ResponsiveValue } from '../../../components/types';
-import type { ISizes } from '../../../theme/base/sizes';
-
-export interface InterfaceAvatarProps extends IBoxProps<IAvatarProps> {
+import type { CustomProps } from '../../../components/types';
+import type { ThemeComponentSizeType } from '../../../components/types/utils';
+export interface InterfaceAvatarProps extends InterfaceBoxProps<IAvatarProps> {
   /**
    * The image source of the avatar.
    */
@@ -14,18 +13,19 @@ export interface InterfaceAvatarProps extends IBoxProps<IAvatarProps> {
    * The size of the avatar
    * @default md
    */
-  size?: ResponsiveValue<ISizes | (string & {}) | number>;
+  size?: ThemeComponentSizeType<'Avatar'>;
   /**
    * For providing props to Image component inside Avatar
    */
-  _image?: IImageProps;
+  _image?: Partial<IImageProps>;
   /**
    * ref to be attached to Avatar wrapper
    */
   wrapperRef?: MutableRefObject<any>;
 }
 
-export interface IAvatarBadgeProps extends IBoxProps<IAvatarBadgeProps> {}
+export interface IAvatarBadgeProps
+  extends InterfaceBoxProps<IAvatarBadgeProps> {}
 
 export interface IAvatarGroupProps extends IAvatarProps {
   /**
@@ -49,11 +49,11 @@ export interface IAvatarGroupProps extends IAvatarProps {
   /**
    * For providing props to all Avatar in that Avatar.Group
    */
-  _avatar?: IAvatarProps;
+  _avatar?: Partial<IAvatarProps>;
   /**
    * For providing props to the Avatar that shows the count of remaining Avatars that are not visible when max is applied.
    */
-  _hiddenAvatarPlaceholder?: IAvatarProps;
+  _hiddenAvatarPlaceholder?: Partial<IAvatarProps>;
 }
 
 export type IAvatarComponentType = ((
@@ -67,4 +67,4 @@ export type IAvatarComponentType = ((
   >;
 };
 
-export type IAvatarProps = InterfaceAvatarProps | CustomProps<'Avatar'>;
+export type IAvatarProps = InterfaceAvatarProps & CustomProps<'Avatar'>;

src/components/composites/Badge/types.tsx

@@ -1,9 +1,9 @@
 import type { ITextProps } from '../../primitives/Text/types';
 import type { IIconProps } from '../../primitives/Icon';
 import type { CustomProps, VariantType } from '../../types';
-import type { IBoxProps } from '../../primitives';
+import type { InterfaceBoxProps } from '../../primitives/Box';
 
-export interface InterfaceBadgeProps extends IBoxProps<IBadgeProps> {
+export interface InterfaceBadgeProps extends InterfaceBoxProps<IBadgeProps> {
   /**
    * The style variant of the badge.
    * @default subtle
@@ -39,4 +39,4 @@ export interface InterfaceBadgeProps extends IBoxProps<IBadgeProps> {
   _icon?: IIconProps;
 }
 
-export type IBadgeProps = InterfaceBadgeProps | CustomProps<'Badge'>;
+export type IBadgeProps = InterfaceBadgeProps & CustomProps<'Badge'>;

src/components/composites/Breadcrumb/types.ts

@@ -44,6 +44,5 @@ export type IBreadcrumbComponentType = ((
   >;
 };
 
-export type IBreadcrumbProps =
-  | InterfaceBreadcrumbProps
-  | CustomProps<'Breadcrumb'>;
+export type IBreadcrumbProps = InterfaceBreadcrumbProps &
+  CustomProps<'Breadcrumb'>;

src/components/composites/Card/types.ts

@@ -1,5 +1,5 @@
 import type { CustomProps } from '../../../components/types/utils';
-import type { IBoxProps } from '../../primitives';
+import type { InterfaceBoxProps } from '../../primitives/Box';
 
-export interface InterfaceCardProps extends IBoxProps<ICardProps> {}
-export type ICardProps = InterfaceCardProps | CustomProps<'Card'>;
+export interface InterfaceCardProps extends InterfaceBoxProps<ICardProps> {}
+export type ICardProps = InterfaceCardProps & CustomProps<'Card'>;

src/components/composites/Center/types.ts

@@ -9,4 +9,4 @@ export type ISquareProps = InterfaceBoxProps<ISquareProps> & {
   size?: number | string;
 };
 
-export type ICenterProps = InterfaceCenterProps | CustomProps<'Center'>;
+export type ICenterProps = InterfaceCenterProps & CustomProps<'Center'>;

src/components/composites/CircularProgress/types.ts

@@ -20,6 +20,5 @@ export type InterfaceCircularProgressProps = InterfaceBoxProps<ICircularProgress
   _text?: ITextProps;
 };
 
-export type ICircularProgressProps =
-  | InterfaceCircularProgressProps
-  | CustomProps<'CircularProgress'>;
+export type ICircularProgressProps = InterfaceCircularProgressProps &
+  CustomProps<'CircularProgress'>;

src/components/composites/Code/types.ts

@@ -5,4 +5,4 @@ export type InterfaceCodeProps = InterfaceBoxProps<ICodeProps> & {
   colorScheme?: string | undefined;
 };
 
-export type ICodeProps = InterfaceCodeProps | CustomProps<'Code'>;
+export type ICodeProps = InterfaceCodeProps & CustomProps<'Code'>;