@hero-design/rn 8.52.2-rc2.0 → 8.53.0

package/src/components/Toast/StyledToast.tsx

@@ -4,13 +4,15 @@ import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
 import { IntentType } from './types';
 
-const ToastContainerWrapper = styled(View)(({ theme }) => ({
-  ...StyleSheet.absoluteFillObject,
-  paddingHorizontal: theme.__hd__.toast.space.wrapperVerticalPadding,
-  paddingVertical: theme.__hd__.toast.space.wrapperHorizontalPadding,
-  flexDirection: 'column-reverse',
-  elevation: 9999,
-}));
+const ToastContainerWrapper = styled(View)<{ position: 'top' | 'bottom' }>(
+  ({ theme, position }) => ({
+    ...StyleSheet.absoluteFillObject,
+    paddingHorizontal: theme.__hd__.toast.space.wrapperVerticalPadding,
+    paddingVertical: theme.__hd__.toast.space.wrapperHorizontalPadding,
+    flexDirection: position === 'bottom' ? 'column-reverse' : 'column',
+    elevation: 9999,
+  })
+);
 
 const Container = styled(Animated.View)<{
   themeVariant: 'default' | 'round';

package/src/components/Toast/Toast.tsx

@@ -9,6 +9,7 @@ import {
   CTAWrapper,
   TextContainer,
 } from './StyledToast';
+import { useToastConfig } from './ToastContext';
 import type { IconName } from '../Icon';
 import type { IntentType, ToastProps } from './types';
 
@@ -58,6 +59,7 @@ const Toast = ({
   distance = 0,
 }: ToastProps): JSX.Element => {
   const animatedValue = useRef(new Animated.Value(0)).current;
+  const toastConfig = useToastConfig();
 
   useEffect(() => {
     if (autoDismiss && duration >= 0) {
@@ -84,7 +86,8 @@ const Toast = ({
 
   const interpolateY = animatedValue.interpolate({
     inputRange: [0, 1],
-    outputRange: [20, -distance],
+    outputRange:
+      toastConfig.position === 'top' ? [-20, distance] : [20, -distance],
   });
 
   return (

package/src/components/Toast/ToastContainer.tsx

@@ -38,7 +38,7 @@ const SingleToastDisplay = ({
 const ToastContainer = React.forwardRef<
   ToastControllerContextType,
   ToastContainerProps
->(({ displayType = 'single', style }, ref) => {
+>(({ displayType = 'single', position = 'bottom', style }, ref) => {
   const theme = useTheme();
   const [toastList, setToastList] = useState<ToastItemProps[]>([]);
 
@@ -61,7 +61,11 @@ const ToastContainer = React.forwardRef<
   }));
 
   return (
-    <ToastContainerWrapper pointerEvents="box-none" style={style}>
+    <ToastContainerWrapper
+      pointerEvents="box-none"
+      position={position}
+      style={style}
+    >
       {displayType === 'single' ? (
         <SingleToastDisplay toastList={toastList} setToastList={setToastList} />
       ) : (

package/src/components/Toast/ToastContext.ts

@@ -2,7 +2,7 @@ import { createContext, useContext } from 'react';
 import type { ToastContainerProps, ToastProps } from './types';
 
 export type ToastControllerContextType = {
-  show: (props: ToastProps) => string;
+  show: (props: Omit<ToastProps, 'position'>) => string;
   hide: (id: string) => void;
   clearAll: () => void;
 };
@@ -11,7 +11,10 @@ export const ToastContext = createContext<ToastControllerContextType>(
   {} as ToastControllerContextType
 );
 
-export type ToastConfigContextType = Pick<ToastContainerProps, 'displayType'>;
+export type ToastConfigContextType = Pick<
+  ToastContainerProps,
+  'position' | 'displayType'
+>;
 
 export const ToastConfigContext = createContext<ToastConfigContextType>(
   {} as ToastConfigContextType

package/src/components/Toast/ToastProvider.tsx

@@ -6,6 +6,7 @@ import ToastContainer from './ToastContainer';
 import { ToastConfigContext, ToastContext } from './ToastContext';
 import type { ToastControllerContextType } from './ToastContext';
 import type { ToastContainerProps } from './types';
+import { useDeprecation } from '../../utils/hooks';
 
 type ToastProviderProps = {
   /**
@@ -17,7 +18,16 @@ type ToastProviderProps = {
 const ToastProvider = ({
   children,
   displayType = 'single',
+  position: _position,
 }: ToastProviderProps) => {
+  const position: ToastContainerProps['position'] =
+    _position === undefined ? 'bottom' : _position;
+
+  useDeprecation(
+    "Toast's position prop is deprecated and will be removed in the next major release.\nPlease remove it.",
+    _position !== undefined
+  );
+
   const toastRef = useRef<ToastControllerContextType>(null);
   // @ts-expect-error: TODO: @tungv Fix this type error
   const [refState, setRefState] = useState<ToastControllerContextType>(null);
@@ -28,14 +38,21 @@ const ToastProvider = ({
     }
   }, []);
 
-  const config = useMemo(() => ({ displayType }), [displayType]);
+  const config = useMemo(
+    () => ({ displayType, position }),
+    [displayType, position]
+  );
 
   return (
     <ToastContext.Provider value={refState}>
       <View style={{ flex: 1 }}>
         {refState ? children : null}
         <ToastConfigContext.Provider value={config}>
-          <ToastContainer ref={toastRef} displayType={displayType} />
+          <ToastContainer
+            ref={toastRef}
+            displayType={displayType}
+            position={position}
+          />
         </ToastConfigContext.Provider>
       </View>
     </ToastContext.Provider>

package/src/components/Toast/__tests__/ToastContainer.spec.tsx

@@ -10,18 +10,21 @@ describe('ToastContainer', () => {
   });
 
   it.each`
-    displayType
-    ${'single'}
-    ${'stack'}
-    ${'single'}
-    ${'stack'}
-  `('renders correctly with displayType: $displayType', ({ displayType }) => {
-    const { toJSON } = renderWithTheme(
-      <ToastContainer displayType={displayType} />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
+    displayType | position
+    ${'single'} | ${'top'}
+    ${'stack'}  | ${'top'}
+    ${'single'} | ${'bottom'}
+    ${'stack'}  | ${'bottom'}
+  `(
+    'renders correctly with displayType: $displayType, position: $position',
+    ({ displayType, position }) => {
+      const { toJSON } = renderWithTheme(
+        <ToastContainer displayType={displayType} position={position} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
 
   it('show multiple toasts correctly when displayType is stack', () => {
     const toastRef = createRef<ToastControllerContextType>();

package/src/components/Toast/__tests__/__snapshots__/Toast.spec.tsx.snap

@@ -113,6 +113,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -304,6 +305,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -495,6 +497,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -659,6 +662,7 @@ exports[`Toast renders correctly when intent is notification 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -823,6 +827,7 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1014,6 +1019,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1205,6 +1211,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/Toast/__tests__/__snapshots__/ToastContainer.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ToastContainer renders correctly with displayType: single 1`] = `
+exports[`ToastContainer renders correctly with displayType: single, position: bottom 1`] = `
 <View
   style={
     {
@@ -10,6 +10,7 @@ exports[`ToastContainer renders correctly with displayType: single 1`] = `
 >
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -29,6 +30,7 @@ exports[`ToastContainer renders correctly with displayType: single 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -49,7 +51,7 @@ exports[`ToastContainer renders correctly with displayType: single 1`] = `
 </View>
 `;
 
-exports[`ToastContainer renders correctly with displayType: single 2`] = `
+exports[`ToastContainer renders correctly with displayType: single, position: top 1`] = `
 <View
   style={
     {
@@ -59,12 +61,13 @@ exports[`ToastContainer renders correctly with displayType: single 2`] = `
 >
   <View
     pointerEvents="box-none"
+    position="top"
     style={
       [
         {
           "bottom": 0,
           "elevation": 9999,
-          "flexDirection": "column-reverse",
+          "flexDirection": "column",
           "left": 0,
           "paddingHorizontal": 24,
           "paddingVertical": 16,
@@ -78,6 +81,7 @@ exports[`ToastContainer renders correctly with displayType: single 2`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -98,7 +102,7 @@ exports[`ToastContainer renders correctly with displayType: single 2`] = `
 </View>
 `;
 
-exports[`ToastContainer renders correctly with displayType: stack 1`] = `
+exports[`ToastContainer renders correctly with displayType: stack, position: bottom 1`] = `
 <View
   style={
     {
@@ -108,6 +112,7 @@ exports[`ToastContainer renders correctly with displayType: stack 1`] = `
 >
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -127,6 +132,7 @@ exports[`ToastContainer renders correctly with displayType: stack 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -147,7 +153,7 @@ exports[`ToastContainer renders correctly with displayType: stack 1`] = `
 </View>
 `;
 
-exports[`ToastContainer renders correctly with displayType: stack 2`] = `
+exports[`ToastContainer renders correctly with displayType: stack, position: top 1`] = `
 <View
   style={
     {
@@ -157,12 +163,13 @@ exports[`ToastContainer renders correctly with displayType: stack 2`] = `
 >
   <View
     pointerEvents="box-none"
+    position="top"
     style={
       [
         {
           "bottom": 0,
           "elevation": 9999,
-          "flexDirection": "column-reverse",
+          "flexDirection": "column",
           "left": 0,
           "paddingHorizontal": 24,
           "paddingVertical": 16,
@@ -176,6 +183,7 @@ exports[`ToastContainer renders correctly with displayType: stack 2`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/Toast/types.ts

@@ -72,6 +72,10 @@ export interface ToastContainerProps {
    * Displays multiple toasts at a time or one by one.
    */
   displayType?: 'single' | 'stack';
+  /**
+   * Position that the toast message will appear on the screen.
+   */
+  position?: 'top' | 'bottom';
   /**
    * Additional style for toasts container.
    */
@@ -80,5 +84,5 @@ export interface ToastContainerProps {
 
 export type ToastItemProps = {
   id: string;
-  props: ToastProps;
+  props: Omit<ToastProps, 'position'>;
 };

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarGroup.spec.tsx.snap

@@ -219,6 +219,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -458,6 +459,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -697,6 +699,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -107,6 +107,7 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -198,6 +199,7 @@ exports[`ToolbarItems renders correctly when intent is danger, icon is undefined
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -289,6 +291,7 @@ exports[`ToolbarItems renders correctly when intent is info, icon is undefined,
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -416,6 +419,7 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -543,6 +547,7 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -644,6 +649,7 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -735,6 +741,7 @@ exports[`ToolbarItems renders correctly when intent is success, icon is undefine
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -826,6 +833,7 @@ exports[`ToolbarItems renders correctly when intent is warning, icon is undefine
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/Typography/Body/__tests__/__snapshots__/StyledBody.tsx.snap

@@ -29,6 +29,7 @@ exports[`StyledBody has body intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -78,6 +79,7 @@ exports[`StyledBody has danger intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -127,6 +129,7 @@ exports[`StyledBody has info intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -176,6 +179,7 @@ exports[`StyledBody has inverted intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -225,6 +229,7 @@ exports[`StyledBody has primary intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -274,6 +279,7 @@ exports[`StyledBody has regular variant and neutral typeface and $fontWeight fon
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -323,6 +329,7 @@ exports[`StyledBody has regular variant and playful typeface and $fontWeight fon
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -372,6 +379,7 @@ exports[`StyledBody has regular-bold variant and neutral typeface and $fontWeigh
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -421,6 +429,7 @@ exports[`StyledBody has regular-bold variant and playful typeface and $fontWeigh
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -470,6 +479,7 @@ exports[`StyledBody has small variant and neutral typeface and $fontWeight fontW
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -519,6 +529,7 @@ exports[`StyledBody has small variant and playful typeface and $fontWeight fontW
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -568,6 +579,7 @@ exports[`StyledBody has small-bold variant and neutral typeface and $fontWeight
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -617,6 +629,7 @@ exports[`StyledBody has small-bold variant and playful typeface and $fontWeight
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -666,6 +679,7 @@ exports[`StyledBody has subdued intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -715,6 +729,7 @@ exports[`StyledBody has success intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -764,6 +779,7 @@ exports[`StyledBody has warning intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {