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

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -24,6 +24,7 @@ exports[`LeadingStatus renders correctly themeLeadingStausIntent archived 1`] =
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -68,6 +69,7 @@ exports[`LeadingStatus renders correctly themeLeadingStausIntent danger 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -112,6 +114,7 @@ exports[`LeadingStatus renders correctly themeLeadingStausIntent info 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -156,6 +159,7 @@ exports[`LeadingStatus renders correctly themeLeadingStausIntent success 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -200,6 +204,7 @@ exports[`LeadingStatus renders correctly themeLeadingStausIntent warning 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -290,6 +295,7 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant ca
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -371,6 +377,7 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant fu
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -461,6 +468,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -542,6 +550,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

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

@@ -63,6 +63,7 @@ exports[`Modal renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -146,6 +147,7 @@ exports[`Modal renders correctly with transparent 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

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

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

package/src/components/PinInput/__tests__/__snapshots__/PinCell.spec.tsx.snap

@@ -55,6 +55,7 @@ exports[`PinCell renders correctly when focused is false, state is default 1`] =
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -130,6 +131,7 @@ exports[`PinCell renders correctly when focused is false, state is disabled 1`]
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -205,6 +207,7 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -280,6 +283,7 @@ exports[`PinCell renders correctly when focused is true, state is default 1`] =
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -355,6 +359,7 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

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

@@ -233,6 +233,7 @@ exports[`rendering renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -486,6 +487,7 @@ exports[`rendering renders correctly when disabled 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -857,6 +859,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1163,6 +1166,7 @@ exports[`rendering renders correctly when there is error 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

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

@@ -35,6 +35,7 @@ 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,6 +46,7 @@ exports[`Progress.Bar renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -112,6 +113,7 @@ exports[`Progress.Bar renders correctly with intent 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -429,6 +431,7 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -746,6 +749,7 @@ exports[`Progress.Circle renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1063,6 +1067,7 @@ 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,6 +121,7 @@ exports[`rendering renders correctly when checked 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -247,6 +248,7 @@ 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,6 +335,7 @@ exports[`rendering renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

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

@@ -314,6 +314,7 @@ exports[`Rate renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -648,6 +649,7 @@ exports[`Rate renders correctly it is readonly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -982,6 +984,7 @@ 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,6 +31,7 @@ exports[`RefreshControl render correctly with props 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -80,6 +81,7 @@ exports[`RefreshControl renders correctly when refreshing is false 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -129,6 +131,7 @@ 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,6 +442,7 @@ 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,6 +52,7 @@ 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,6 +298,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -615,6 +616,7 @@ 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,6 +28,7 @@ exports[`StyledHeading renders correct style with medium 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -76,6 +77,7 @@ exports[`StyledHeading renders correct style with small 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -116,6 +118,7 @@ exports[`StyledIconWrapper renders correct style 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -158,6 +161,7 @@ exports[`StyledWrapper renders correct style 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

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

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

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

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

package/src/components/SectionHeading/index.tsx

@@ -1,7 +1,6 @@
-import type { ReactElement } from 'react';
 import React from 'react';
+import type { ReactElement } 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 {
@@ -9,6 +8,8 @@ import {
   StyledIconWrapper,
   StyledWrapper,
 } from './StyledHeading';
+import type { IconName, IconProps } from '../Icon';
+import { useDeprecation } from '../../utils/hooks';
 
 export interface SectionHeadingProps extends ViewProps {
   /**
@@ -23,6 +24,16 @@ 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.
    */
@@ -56,40 +67,54 @@ const SectionHeading = ({
   icon,
   text,
   rightChildren,
+  fontSize = 'large',
   intent = 'body',
+  fontWeight = 'regular',
   size = 'medium',
   style,
   testID,
-}: 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>
+}: 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>
 
-      {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,6 +107,7 @@ 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,6 +865,7 @@ exports[`OptionList render isLoading correctly 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1585,6 +1586,7 @@ exports[`OptionList renders correctly 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -2333,6 +2335,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -3053,6 +3056,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
   </RCTScrollView>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {