Merge pull request #5117 from GeekyAnts/release/3.4.8-rc.0

release 3.4.8-rc.0

example/storybook/stories/components/composites/Toast/StatusRecipies.tsx

@@ -52,7 +52,7 @@ export const Example = () => {
       maxWidth="100%"
       alignSelf="center"
       flexDirection="row"
-      status={status ?? 'info'}
+      status={status ? status : 'info'}
       variant={variant as any}
       {...rest}
     >
@@ -91,8 +91,9 @@ export const Example = () => {
   return (
     <Center>
       <VStack space={2}>
-        {ToastDetails.map((item) => (
+        {ToastDetails.map((item, index) => (
           <Button
+            key={index}
             colorScheme={item.status}
             onPress={() =>
               toast.show({

package.json

@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.7-rc.0",
+  "version": "3.4.8-rc.0",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",

src/components/composites/Actionsheet/Actionsheet.tsx

@@ -4,6 +4,7 @@ import type { IActionsheetProps } from './types';
 import { usePropsResolution } from '../../../hooks';
 import { ActionSheetContext } from './ActionSheetContext';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { Platform } from 'react-native';
 
 const Actionsheet = (
   { children, hideDragIndicator = false, ...props }: IActionsheetProps,
@@ -20,6 +21,9 @@ const Actionsheet = (
   if (useHasResponsiveProps(props)) {
     return null;
   }
+  //Fixing overlay position for Web due to scrollView issue
+  let overlayStyle = Platform.OS === 'web' ? { position: 'fixed' } : {};
+
   return (
     <Modal
       isOpen={isOpen}
@@ -28,6 +32,7 @@ const Actionsheet = (
       overlayVisible={disableOverlay ? false : true}
       closeOnOverlayClick={disableOverlay ? false : true}
       ref={ref}
+      _overlay={{ style: overlayStyle }}
     >
       <ActionSheetContext.Provider value={{ hideDragIndicator }}>
         {children}

src/components/composites/Modal/Modal.tsx

@@ -37,6 +37,7 @@ const Modal = (
     _backdropFade,
     _fade,
     _slide,
+    _overlay,
     ...resolvedProps
   } = usePropsResolution('Modal', rest);
 
@@ -83,6 +84,7 @@ const Modal = (
       isKeyboardDismissable={isKeyboardDismissable}
       animationPreset={animationPreset}
       useRNModalOnAndroid
+      {..._overlay}
     >
       <ModalContext.Provider value={contextValue}>
         <Fade in={visible} style={StyleSheet.absoluteFill} {..._backdropFade}>

src/components/composites/Modal/types.ts

@@ -5,6 +5,7 @@ import type { CustomProps } from '../../../components/types';
 import type { IScrollViewProps } from '../../basic/ScrollView';
 import type { IFadeProps, ISlideProps } from '../Transitions';
 import type { ThemeComponentSizeType } from '../../../components/types/utils';
+import type { IOverlayProps } from '../../primitives/Overlay';
 export interface InterfaceModalProps extends InterfaceBoxProps<IModalProps> {
   /**
    * If true, the modal will open. Useful for controllable state behaviour
@@ -76,6 +77,10 @@ export interface InterfaceModalProps extends InterfaceBoxProps<IModalProps> {
    * Props applied on Child Slide Animation.
    */
   _slide?: Partial<ISlideProps>;
+  /**
+   * Props to be passed to the Overlay used inside of Modal.
+   */
+  _overlay?: IOverlayProps;
 }
 
 export type IModalComponentType = ((

src/components/composites/Toast/Toast.tsx

@@ -11,7 +11,7 @@ import { AccessibilityInfo, Platform, SafeAreaView } from 'react-native';
 import Box from '../../primitives/Box';
 import { usePropsResolution } from '../../../hooks';
 import type { IToastContext, IToastInfo, IToast, IToastProps } from './types';
-
+import { useKeyboardBottomInset } from '../../../utils';
 const INSET = 50;
 
 const POSITIONS = {
@@ -71,6 +71,7 @@ const CustomToast = ({ _overlay, _stack, _presenceTransition }: any) => {
     ToastContext
   );
 
+  const bottomInset = useKeyboardBottomInset() * 2;
   const getPositions = () => {
     return Object.keys(toastInfo);
   };
@@ -110,7 +111,19 @@ const CustomToast = ({ _overlay, _stack, _presenceTransition }: any) => {
                       translateY: transitionConfig[position],
                     }}
                   >
-                    <SafeAreaView>{toast.component}</SafeAreaView>
+                    <SafeAreaView>
+                      <Box
+                        bottom={
+                          ['bottom', 'bottom-left', 'bottom-right'].includes(
+                            position
+                          )
+                            ? bottomInset + 'px'
+                            : undefined
+                        }
+                      >
+                        {toast.component}
+                      </Box>
+                    </SafeAreaView>
                   </PresenceTransition>
                 ))
               }

src/components/composites/Transitions/Fade.tsx

@@ -5,16 +5,26 @@ import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 import { usePropsResolution } from '../../../hooks/';
 
 const Fade = ({ children, ...props }: IFadeProps, ref?: any) => {
-  const { in: animationState, ...resolvedProps } = usePropsResolution(
-    'Fade',
-    props
-  );
+  const {
+    in: animationState,
+    entryDuration,
+    exitDuration,
+    ...resolvedProps
+  } = usePropsResolution('Fade', props);
   //TODO: refactor for responsive prop
   if (useHasResponsiveProps(props)) {
     return null;
   }
+
+  if (entryDuration) {
+    resolvedProps.animate.transition.duration = entryDuration;
+  }
+  if (exitDuration) {
+    resolvedProps.exit.transition.duration = exitDuration;
+  }
+
   return (
-    <PresenceTransition visible={animationState} {...resolvedProps} ref={ref}>
+    <PresenceTransition visible={animationState} ref={ref} {...resolvedProps}>
       {children}
     </PresenceTransition>
   );

src/components/composites/Transitions/ScaleFade.tsx

@@ -5,14 +5,24 @@ import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 import { usePropsResolution } from '../../../hooks/';
 
 const ScaleFade = ({ children, ...props }: IScaleFadeProps, ref?: any) => {
-  const { in: animationState, ...resolvedProps } = usePropsResolution(
-    'ScaleFade',
-    props
-  );
+  const {
+    in: animationState,
+    duration,
+    initialScale,
+    ...resolvedProps
+  } = usePropsResolution('ScaleFade', props);
   //TODO: refactor for responsive prop
   if (useHasResponsiveProps(props)) {
     return null;
   }
+  if (duration) {
+    resolvedProps.animate.transition.duration = duration;
+    resolvedProps.exit.transition.duration = duration;
+  }
+  if (initialScale) {
+    resolvedProps.animate.initial.scale = initialScale;
+    resolvedProps.exit.initial.scale = initialScale;
+  }
 
   return (
     <PresenceTransition visible={animationState} {...resolvedProps} ref={ref}>

src/components/composites/Transitions/types.tsx

@@ -1,25 +1,35 @@
 import type { ReactNode } from 'react';
 import type { ViewProps } from 'react-native';
 import type { InterfaceBoxProps } from '../../primitives/Box';
-
+import type { IOverlayProps } from '../../primitives/Overlay';
 export type IFadeProps = InterfaceBoxProps<IFadeProps> & {
   in?: boolean;
   entryDuration?: number;
   exitDuration?: number;
   delay?: number;
+  initial?: ISupportedTransitions;
+  animate?: ITransitionStyleProps;
+  exit?: ITransitionStyleProps;
 };
 export type IScaleFadeProps = InterfaceBoxProps<IScaleFadeProps> & {
   in?: boolean;
   duration?: number;
   delay?: number;
   initialScale?: number;
+  initial?: ISupportedTransitions;
+  animate?: ITransitionStyleProps;
+  exit?: ITransitionStyleProps;
 };
 export type ISlideProps = InterfaceBoxProps<ISlideProps> & {
   in?: boolean;
   duration?: number;
   delay?: number;
   placement?: 'top' | 'bottom' | 'right' | 'left';
   overlay?: boolean;
+  /**
+   * Props to be passed to the Overlay used inside of Slide when overlay is true.
+   */
+  _overlay?: IOverlayProps;
 };
 export type ISlideFadeProps = InterfaceBoxProps<ISlideFadeProps> & {
   in?: boolean;

src/theme/components/toast.ts

@@ -16,6 +16,7 @@ const baseStyle = (props: Record<string, any>) => {
       alignItems: 'center',
       justifyContent: 'center',
       pointerEvents: 'box-none',
+      _web: { position: 'fixed' },
     },
     _overlay: {},
     _presenceTransition: {

src/theme/styled-system.ts

@@ -531,10 +531,10 @@ export const typography = {
   fontFamily: {
     property: 'fontFamily',
     scale: 'fonts',
-    transformer: (val: any, scale: any) => {
-      const value = get(scale, val);
-      return value ? value.toString() : undefined;
-    },
+    // transformer: (val: any, scale: any) => {
+    //   const value = get(scale, val);
+    //   return value ? value.toString() : undefined;
+    // },
   },
   fontSize: {
     property: 'fontSize',

src/utils/getSpacedChildren.tsx

@@ -17,17 +17,34 @@ type SpaceType =
 // Thanks @gregberge for code and @nandorojo for suggestion.
 // Original source: https://github.com/gregberge/react-flatten-children
 type ReactChildArray = ReturnType<typeof React.Children.toArray>;
-function flattenChildren(children: React.ReactNode): ReactChildArray {
+function flattenChildren(
+  children: JSX.Element[] | JSX.Element,
+  keys: (string | number)[] = []
+): ReactChildArray {
   const childrenArray = React.Children.toArray(children);
-  return childrenArray.reduce((flatChildren: ReactChildArray, child) => {
-    if ((child as React.ReactElement<any>).type === React.Fragment) {
-      return flatChildren.concat(
-        flattenChildren((child as React.ReactElement<any>).props.children)
-      );
-    }
-    flatChildren.push(child);
-    return flatChildren;
-  }, []);
+  return childrenArray.reduce(
+    (flatChildren: ReactChildArray, child: any, index: number) => {
+      if ((child as React.ReactElement<any>).type === React.Fragment) {
+        return flatChildren.concat(
+          flattenChildren(
+            (child as React.ReactElement<any>).props.children,
+            keys.concat(child.key || index)
+          )
+        );
+      }
+      if (React.isValidElement(child)) {
+        flatChildren.push(
+          React.cloneElement(child, {
+            key: keys.concat(String(child.key || index)).join('.'),
+          })
+        );
+      } else {
+        flatChildren.push(child);
+      }
+      return flatChildren;
+    },
+    []
+  );
 }
 
 const getSpacedChildren = (