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

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

@@ -35,7 +35,6 @@ exports[`Portal allows rendering children with custom theme 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Progress/__tests__/__snapshots__/index.spec.js.snap

@@ -46,7 +46,6 @@ exports[`Progress.Bar renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -113,7 +112,6 @@ exports[`Progress.Bar renders correctly with intent 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -431,7 +429,6 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -749,7 +746,6 @@ exports[`Progress.Circle renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1067,7 +1063,6 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -121,7 +121,6 @@ exports[`rendering renders correctly when checked 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -248,7 +247,6 @@ exports[`rendering renders correctly when not checked 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap

@@ -335,7 +335,6 @@ exports[`rendering renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -314,7 +314,6 @@ exports[`Rate renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -649,7 +648,6 @@ exports[`Rate renders correctly it is readonly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -984,7 +982,6 @@ exports[`Rate renders correctly when disabled 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -31,7 +31,6 @@ exports[`RefreshControl render correctly with props 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -81,7 +80,6 @@ exports[`RefreshControl renders correctly when refreshing is false 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -131,7 +129,6 @@ exports[`RefreshControl renders correctly when refreshing is true 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/RichTextEditor/__tests__/__snapshots__/EditorToolbar.spec.tsx.snap

@@ -442,7 +442,6 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/RichTextEditor/__tests__/__snapshots__/MentionList.spec.tsx.snap

@@ -52,7 +52,6 @@ exports[`MentionList when search string is not empty should render mention list
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -298,7 +298,6 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -616,7 +615,6 @@ exports[`RichTextEditor should render correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/SectionHeading/__tests__/__snapshots__/StyledHeading.spec.tsx.snap

@@ -28,7 +28,6 @@ exports[`StyledHeading renders correct style with medium 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -77,7 +76,6 @@ exports[`StyledHeading renders correct style with small 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -118,7 +116,6 @@ exports[`StyledIconWrapper renders correct style 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -161,7 +158,6 @@ exports[`StyledWrapper renders correct style 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -87,7 +87,6 @@ exports[`SectionHeading allows to customise the icon 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -196,7 +195,6 @@ exports[`SectionHeading render icon correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -310,7 +308,6 @@ exports[`SectionHeading render right children correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -403,7 +400,6 @@ exports[`SectionHeading renders correct style with medium 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -495,7 +491,6 @@ exports[`SectionHeading renders correct style with small 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -589,7 +584,6 @@ exports[`SectionHeading renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -45,7 +45,6 @@ describe('SectionHeading', () => {
       <SectionHeading
         text="test demo"
         intent="primary"
-        fontSize="large"
         icon={<Icon icon="home" intent="danger" />}
       />
     );

package/src/components/SectionHeading/index.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import type { ReactElement } from 'react';
+import React from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type { IconName, IconProps } from '../Icon';
 import Icon from '../Icon';
 import Typography from '../Typography';
 import {
@@ -8,8 +9,6 @@ import {
   StyledIconWrapper,
   StyledWrapper,
 } from './StyledHeading';
-import type { IconName, IconProps } from '../Icon';
-import { useDeprecation } from '../../utils/hooks';
 
 export interface SectionHeadingProps extends ViewProps {
   /**
@@ -24,16 +23,6 @@ export interface SectionHeadingProps extends ViewProps {
    * Right corner content
    */
   rightChildren?: ReactElement;
-  /**
-   * @deprecated fontSize will be removed in the next major release.
-   * Size of the text.
-   */
-  fontSize?: 'small' | 'medium' | 'large' | 'xlarge';
-  /**
-   * @deprecated fontWeight will be removed in the next major release.
-   * Heading's font-weight.
-   */
-  fontWeight?: 'light' | 'regular' | 'semi-bold';
   /**
    * Visual intent color to apply to text.
    */
@@ -67,54 +56,40 @@ const SectionHeading = ({
   icon,
   text,
   rightChildren,
-  fontSize = 'large',
   intent = 'body',
-  fontWeight = 'regular',
   size = 'medium',
   style,
   testID,
-}: SectionHeadingProps): ReactElement => {
-  useDeprecation(
-    `SectionHeading's fontSize prop is deprecated and will be removed in the next major release, please remove it.`,
-    fontSize !== undefined
-  );
-
-  useDeprecation(
-    `SectionHeading's fontWeight prop is deprecated and will be removed in the next major release, please remove it.`,
-    fontWeight !== undefined
-  );
-
-  return (
-    <StyledHeading themeSize={size} style={style} testID={testID}>
-      <StyledWrapper>
-        <StyledIconWrapper>
-          {icon !== undefined &&
-            (typeof icon === 'string' ? (
-              <Icon
-                icon={icon}
-                size={ICON_SIZE_MAP[size]}
-                intent={ICON_INTENT_MAP[intent]}
-              />
-            ) : (
-              React.cloneElement(icon, {
-                size: ICON_SIZE_MAP[size],
-                intent: ICON_INTENT_MAP[intent],
-                ...icon.props,
-              })
-            ))}
-        </StyledIconWrapper>
+}: SectionHeadingProps): ReactElement => (
+  <StyledHeading themeSize={size} style={style} testID={testID}>
+    <StyledWrapper>
+      <StyledIconWrapper>
+        {icon !== undefined &&
+          (typeof icon === 'string' ? (
+            <Icon
+              icon={icon}
+              size={ICON_SIZE_MAP[size]}
+              intent={ICON_INTENT_MAP[intent]}
+            />
+          ) : (
+            React.cloneElement(icon, {
+              size: ICON_SIZE_MAP[size],
+              intent: ICON_INTENT_MAP[intent],
+              ...icon.props,
+            })
+          ))}
+      </StyledIconWrapper>
 
-        {size === 'small' ? (
-          <Typography.Caption intent={intent}>{text}</Typography.Caption>
-        ) : (
-          <Typography.Body variant="small" intent={intent}>
-            {text}
-          </Typography.Body>
-        )}
-      </StyledWrapper>
-      {rightChildren}
-    </StyledHeading>
-  );
-};
+      {size === 'small' ? (
+        <Typography.Caption intent={intent}>{text}</Typography.Caption>
+      ) : (
+        <Typography.Body variant="small" intent={intent}>
+          {text}
+        </Typography.Body>
+      )}
+    </StyledWrapper>
+    {rightChildren}
+  </StyledHeading>
+);
 
 export default SectionHeading;

package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -107,7 +107,6 @@ exports[`Option renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -865,7 +865,6 @@ exports[`OptionList render isLoading correctly 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1586,7 +1585,6 @@ exports[`OptionList renders correctly 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -2335,7 +2333,6 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -3056,7 +3053,6 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -263,11 +263,37 @@ exports[`rendering allows custom renderer 1`] = `
       </View>
     </View>
   </View>
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={true}
+  <View
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "transparent",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0.4,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 1,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
   >
     <View
       pointerEvents="box-none"
@@ -1508,10 +1534,9 @@ exports[`rendering allows custom renderer 1`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </Modal>
+  </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1795,15 +1820,8 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
       </View>
     </View>
   </View>
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={false}
-  />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -2087,11 +2105,37 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
       </View>
     </View>
   </View>
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={true}
+  <View
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "transparent",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0.4,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 1,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
   >
     <View
       pointerEvents="box-none"
@@ -3538,10 +3582,9 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </Modal>
+  </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -3838,15 +3881,8 @@ exports[`rendering renders correctly when input is loading 1`] = `
       </View>
     </View>
   </View>
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={false}
-  />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -4130,11 +4166,37 @@ exports[`rendering renders correctly when receives sections 1`] = `
       </View>
     </View>
   </View>
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={true}
+  <View
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "transparent",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0.4,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 1,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
   >
     <View
       pointerEvents="box-none"
@@ -5161,10 +5223,9 @@ exports[`rendering renders correctly when receives sections 1`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </Modal>
+  </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -5448,11 +5509,37 @@ exports[`rendering renders correctly when receives sections 2`] = `
       </View>
     </View>
   </View>
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={true}
+  <View
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "transparent",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0.4,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 1,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
   >
     <View
       pointerEvents="box-none"
@@ -6451,10 +6538,9 @@ exports[`rendering renders correctly when receives sections 2`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </Modal>
+  </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Select/SingleSelect/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -79,7 +79,6 @@ exports[`Option renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -842,7 +842,6 @@ exports[`OptionList render isLoading correctly 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1540,7 +1539,6 @@ exports[`OptionList renders correctly 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -2238,7 +2236,6 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -2936,7 +2933,6 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {