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

package/src/components/Toast/StyledToast.tsx

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

package/src/components/Toast/Toast.tsx

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

package/src/components/Toast/ToastContainer.tsx

@@ -38,7 +38,7 @@ const SingleToastDisplay = ({
 const ToastContainer = React.forwardRef<
   ToastControllerContextType,
   ToastContainerProps
->(({ displayType = 'single', position = 'bottom', style }, ref) => {
+>(({ displayType = 'single', style }, ref) => {
   const theme = useTheme();
   const [toastList, setToastList] = useState<ToastItemProps[]>([]);
 
@@ -61,11 +61,7 @@ const ToastContainer = React.forwardRef<
   }));
 
   return (
-    <ToastContainerWrapper
-      pointerEvents="box-none"
-      position={position}
-      style={style}
-    >
+    <ToastContainerWrapper pointerEvents="box-none" 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: Omit<ToastProps, 'position'>) => string;
+  show: (props: ToastProps) => string;
   hide: (id: string) => void;
   clearAll: () => void;
 };
@@ -11,10 +11,7 @@ export const ToastContext = createContext<ToastControllerContextType>(
   {} as ToastControllerContextType
 );
 
-export type ToastConfigContextType = Pick<
-  ToastContainerProps,
-  'position' | 'displayType'
->;
+export type ToastConfigContextType = Pick<ToastContainerProps, 'displayType'>;
 
 export const ToastConfigContext = createContext<ToastConfigContextType>(
   {} as ToastConfigContextType

package/src/components/Toast/ToastProvider.tsx

@@ -6,7 +6,6 @@ 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 = {
   /**
@@ -18,16 +17,7 @@ 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);
@@ -38,21 +28,14 @@ const ToastProvider = ({
     }
   }, []);
 
-  const config = useMemo(
-    () => ({ displayType, position }),
-    [displayType, position]
-  );
+  const config = useMemo(() => ({ displayType }), [displayType]);
 
   return (
     <ToastContext.Provider value={refState}>
       <View style={{ flex: 1 }}>
         {refState ? children : null}
         <ToastConfigContext.Provider value={config}>
-          <ToastContainer
-            ref={toastRef}
-            displayType={displayType}
-            position={position}
-          />
+          <ToastContainer ref={toastRef} displayType={displayType} />
         </ToastConfigContext.Provider>
       </View>
     </ToastContext.Provider>

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

@@ -10,21 +10,18 @@ describe('ToastContainer', () => {
   });
 
   it.each`
-    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();
-    }
-  );
+    displayType
+    ${'single'}
+    ${'stack'}
+    ${'single'}
+    ${'stack'}
+  `('renders correctly with displayType: $displayType', ({ displayType }) => {
+    const { toJSON } = renderWithTheme(
+      <ToastContainer displayType={displayType} />
+    );
+
+    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,7 +113,6 @@ exports[`Toast Icon render custom icon correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -305,7 +304,6 @@ exports[`Toast renders correctly when intent is error 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -497,7 +495,6 @@ exports[`Toast renders correctly when intent is info 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -662,7 +659,6 @@ exports[`Toast renders correctly when intent is notification 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -827,7 +823,6 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1019,7 +1014,6 @@ exports[`Toast renders correctly when intent is success 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1211,7 +1205,6 @@ 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, position: bottom 1`] = `
+exports[`ToastContainer renders correctly with displayType: single 1`] = `
 <View
   style={
     {
@@ -10,7 +10,6 @@ exports[`ToastContainer renders correctly with displayType: single, position: bo
 >
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -30,7 +29,6 @@ exports[`ToastContainer renders correctly with displayType: single, position: bo
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -51,7 +49,7 @@ exports[`ToastContainer renders correctly with displayType: single, position: bo
 </View>
 `;
 
-exports[`ToastContainer renders correctly with displayType: single, position: top 1`] = `
+exports[`ToastContainer renders correctly with displayType: single 2`] = `
 <View
   style={
     {
@@ -61,13 +59,12 @@ exports[`ToastContainer renders correctly with displayType: single, position: to
 >
   <View
     pointerEvents="box-none"
-    position="top"
     style={
       [
         {
           "bottom": 0,
           "elevation": 9999,
-          "flexDirection": "column",
+          "flexDirection": "column-reverse",
           "left": 0,
           "paddingHorizontal": 24,
           "paddingVertical": 16,
@@ -81,7 +78,6 @@ exports[`ToastContainer renders correctly with displayType: single, position: to
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -102,7 +98,7 @@ exports[`ToastContainer renders correctly with displayType: single, position: to
 </View>
 `;
 
-exports[`ToastContainer renders correctly with displayType: stack, position: bottom 1`] = `
+exports[`ToastContainer renders correctly with displayType: stack 1`] = `
 <View
   style={
     {
@@ -112,7 +108,6 @@ exports[`ToastContainer renders correctly with displayType: stack, position: bot
 >
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -132,7 +127,6 @@ exports[`ToastContainer renders correctly with displayType: stack, position: bot
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -153,7 +147,7 @@ exports[`ToastContainer renders correctly with displayType: stack, position: bot
 </View>
 `;
 
-exports[`ToastContainer renders correctly with displayType: stack, position: top 1`] = `
+exports[`ToastContainer renders correctly with displayType: stack 2`] = `
 <View
   style={
     {
@@ -163,13 +157,12 @@ exports[`ToastContainer renders correctly with displayType: stack, position: top
 >
   <View
     pointerEvents="box-none"
-    position="top"
     style={
       [
         {
           "bottom": 0,
           "elevation": 9999,
-          "flexDirection": "column",
+          "flexDirection": "column-reverse",
           "left": 0,
           "paddingHorizontal": 24,
           "paddingVertical": 16,
@@ -183,7 +176,6 @@ exports[`ToastContainer renders correctly with displayType: stack, position: top
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Toast/types.ts

@@ -72,10 +72,6 @@ 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.
    */
@@ -84,5 +80,5 @@ export interface ToastContainerProps {
 
 export type ToastItemProps = {
   id: string;
-  props: Omit<ToastProps, 'position'>;
+  props: ToastProps;
 };

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

@@ -219,7 +219,6 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -459,7 +458,6 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -699,7 +697,6 @@ 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,7 +107,6 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -199,7 +198,6 @@ exports[`ToolbarItems renders correctly when intent is danger, icon is undefined
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -291,7 +289,6 @@ exports[`ToolbarItems renders correctly when intent is info, icon is undefined,
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -419,7 +416,6 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -547,7 +543,6 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -649,7 +644,6 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -741,7 +735,6 @@ exports[`ToolbarItems renders correctly when intent is success, icon is undefine
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -833,7 +826,6 @@ 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,7 +29,6 @@ exports[`StyledBody has body intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -79,7 +78,6 @@ exports[`StyledBody has danger intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -129,7 +127,6 @@ exports[`StyledBody has info intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -179,7 +176,6 @@ exports[`StyledBody has inverted intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -229,7 +225,6 @@ exports[`StyledBody has primary intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -279,7 +274,6 @@ exports[`StyledBody has regular variant and neutral typeface and $fontWeight fon
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -329,7 +323,6 @@ exports[`StyledBody has regular variant and playful typeface and $fontWeight fon
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -379,7 +372,6 @@ exports[`StyledBody has regular-bold variant and neutral typeface and $fontWeigh
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -429,7 +421,6 @@ exports[`StyledBody has regular-bold variant and playful typeface and $fontWeigh
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -479,7 +470,6 @@ exports[`StyledBody has small variant and neutral typeface and $fontWeight fontW
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -529,7 +519,6 @@ exports[`StyledBody has small variant and playful typeface and $fontWeight fontW
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -579,7 +568,6 @@ exports[`StyledBody has small-bold variant and neutral typeface and $fontWeight
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -629,7 +617,6 @@ exports[`StyledBody has small-bold variant and playful typeface and $fontWeight
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -679,7 +666,6 @@ exports[`StyledBody has subdued intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -729,7 +715,6 @@ exports[`StyledBody has success intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -779,7 +764,6 @@ exports[`StyledBody has warning intent style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {