@hero-design/rn 8.110.0 → 8.110.1

package/src/components/AppCue/__tests__/__snapshots__/StyledAppCue.tsx.snap

@@ -11,20 +11,23 @@ exports[`AppCue renders icon bottom correctly 1`] = `
   <View
     collapsable={false}
     style={
-      {
-        "alignItems": "center",
-        "color": "#001f23",
-        "display": "flex",
-        "justifyContent": "center",
-        "position": "absolute",
-        "top": -12,
-        "transform": [
-          {
-            "rotate": "180deg",
-          },
-        ],
-        "width": "100%",
-      }
+      [
+        {
+          "alignItems": "center",
+          "color": "#001f23",
+          "display": "flex",
+          "justifyContent": "center",
+          "position": "absolute",
+          "top": -12,
+          "transform": [
+            {
+              "rotate": "180deg",
+            },
+          ],
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
     themePlacement="bottom"
   />
@@ -62,20 +65,23 @@ exports[`AppCue renders icon bottom-left correctly 1`] = `
   <View
     collapsable={false}
     style={
-      {
-        "alignItems": "center",
-        "color": "#001f23",
-        "display": "flex",
-        "justifyContent": "center",
-        "position": "absolute",
-        "right": 12,
-        "top": -12,
-        "transform": [
-          {
-            "rotate": "180deg",
-          },
-        ],
-      }
+      [
+        {
+          "alignItems": "center",
+          "color": "#001f23",
+          "display": "flex",
+          "justifyContent": "center",
+          "position": "absolute",
+          "right": 12,
+          "top": -12,
+          "transform": [
+            {
+              "rotate": "180deg",
+            },
+          ],
+        },
+        undefined,
+      ]
     }
     themePlacement="bottom-left"
   />
@@ -113,20 +119,23 @@ exports[`AppCue renders icon bottom-right correctly 1`] = `
   <View
     collapsable={false}
     style={
-      {
-        "alignItems": "center",
-        "color": "#001f23",
-        "display": "flex",
-        "justifyContent": "center",
-        "left": 12,
-        "position": "absolute",
-        "top": -12,
-        "transform": [
-          {
-            "rotate": "180deg",
-          },
-        ],
-      }
+      [
+        {
+          "alignItems": "center",
+          "color": "#001f23",
+          "display": "flex",
+          "justifyContent": "center",
+          "left": 12,
+          "position": "absolute",
+          "top": -12,
+          "transform": [
+            {
+              "rotate": "180deg",
+            },
+          ],
+        },
+        undefined,
+      ]
     }
     themePlacement="bottom-right"
   />
@@ -164,20 +173,23 @@ exports[`AppCue renders icon left correctly 1`] = `
   <View
     collapsable={false}
     style={
-      {
-        "alignItems": "center",
-        "color": "#001f23",
-        "display": "flex",
-        "height": "100%",
-        "justifyContent": "center",
-        "position": "absolute",
-        "right": -12,
-        "transform": [
-          {
-            "rotate": "-90deg",
-          },
-        ],
-      }
+      [
+        {
+          "alignItems": "center",
+          "color": "#001f23",
+          "display": "flex",
+          "height": "100%",
+          "justifyContent": "center",
+          "position": "absolute",
+          "right": -12,
+          "transform": [
+            {
+              "rotate": "-90deg",
+            },
+          ],
+        },
+        undefined,
+      ]
     }
     themePlacement="left"
   />
@@ -215,20 +227,23 @@ exports[`AppCue renders icon right correctly 1`] = `
   <View
     collapsable={false}
     style={
-      {
-        "alignItems": "center",
-        "color": "#001f23",
-        "display": "flex",
-        "height": "100%",
-        "justifyContent": "center",
-        "left": -12,
-        "position": "absolute",
-        "transform": [
-          {
-            "rotate": "90deg",
-          },
-        ],
-      }
+      [
+        {
+          "alignItems": "center",
+          "color": "#001f23",
+          "display": "flex",
+          "height": "100%",
+          "justifyContent": "center",
+          "left": -12,
+          "position": "absolute",
+          "transform": [
+            {
+              "rotate": "90deg",
+            },
+          ],
+        },
+        undefined,
+      ]
     }
     themePlacement="right"
   />
@@ -266,15 +281,18 @@ exports[`AppCue renders icon top correctly 1`] = `
   <View
     collapsable={false}
     style={
-      {
-        "alignItems": "center",
-        "bottom": -12,
-        "color": "#001f23",
-        "display": "flex",
-        "justifyContent": "center",
-        "position": "absolute",
-        "width": "100%",
-      }
+      [
+        {
+          "alignItems": "center",
+          "bottom": -12,
+          "color": "#001f23",
+          "display": "flex",
+          "justifyContent": "center",
+          "position": "absolute",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
     themePlacement="top"
   />
@@ -312,15 +330,18 @@ exports[`AppCue renders icon top-left correctly 1`] = `
   <View
     collapsable={false}
     style={
-      {
-        "alignItems": "center",
-        "bottom": -12,
-        "color": "#001f23",
-        "display": "flex",
-        "justifyContent": "center",
-        "position": "absolute",
-        "right": 12,
-      }
+      [
+        {
+          "alignItems": "center",
+          "bottom": -12,
+          "color": "#001f23",
+          "display": "flex",
+          "justifyContent": "center",
+          "position": "absolute",
+          "right": 12,
+        },
+        undefined,
+      ]
     }
     themePlacement="top-left"
   />
@@ -358,15 +379,18 @@ exports[`AppCue renders icon top-right correctly 1`] = `
   <View
     collapsable={false}
     style={
-      {
-        "alignItems": "center",
-        "bottom": -12,
-        "color": "#001f23",
-        "display": "flex",
-        "justifyContent": "center",
-        "left": 12,
-        "position": "absolute",
-      }
+      [
+        {
+          "alignItems": "center",
+          "bottom": -12,
+          "color": "#001f23",
+          "display": "flex",
+          "justifyContent": "center",
+          "left": 12,
+          "position": "absolute",
+        },
+        undefined,
+      ]
     }
     themePlacement="top-right"
   />

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

@@ -488,9 +488,12 @@ exports[`BottomSheet renders floating BottomSheet correctly 1`] = `
         <RCTSafeAreaView
           collapsable={false}
           style={
-            {
-              "margin": 16,
-            }
+            [
+              {
+                "margin": 16,
+              },
+              undefined,
+            ]
           }
         >
           <View

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

@@ -321,7 +321,7 @@ exports[`Button renders correctly 2`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -706,7 +706,7 @@ exports[`Button renders correctly 5`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -1095,7 +1095,7 @@ exports[`Button renders correctly 8`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -1486,7 +1486,7 @@ exports[`Button renders correctly 11`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -1875,7 +1875,7 @@ exports[`Button renders correctly 14`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -2264,7 +2264,7 @@ exports[`Button renders correctly 17`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -2653,7 +2653,7 @@ exports[`Button renders correctly 20`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -3042,7 +3042,7 @@ exports[`Button renders correctly 23`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -3431,7 +3431,7 @@ exports[`Button renders correctly 26`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -3713,7 +3713,7 @@ exports[`Button renders correctly 28`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -4107,7 +4107,7 @@ exports[`Button renders correctly 31`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -4509,7 +4509,7 @@ exports[`Button renders correctly 34`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -4908,7 +4908,7 @@ exports[`Button renders correctly 37`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -5303,7 +5303,7 @@ exports[`Button renders correctly 40`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -5698,7 +5698,7 @@ exports[`Button renders correctly 43`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -6093,7 +6093,7 @@ exports[`Button renders correctly 46`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -6379,7 +6379,7 @@ exports[`Button renders correctly 48`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="undefined-loading-indicator"
@@ -6665,7 +6665,7 @@ exports[`Button renders loading icon 1`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
-          {},
+          undefined,
         ]
       }
       testID="button-loading-indicator"

package/src/components/Chip/index.tsx

@@ -40,6 +40,10 @@ export interface ChipProps extends ViewProps {
    * Whether to show the selected icon when using outlined variant.
    */
   showSelectedIcon?: boolean;
+  /**
+   * If true, indicates that the Chip is accessible to screen readers.
+   */
+  accessible?: boolean;
 }
 
 const getChipLabel = (label: string | ReactNode) => {
@@ -71,6 +75,7 @@ const Chip = ({
   icon,
   onPress,
   showSelectedIcon = true,
+  accessible,
   ...otherProps
 }: ChipProps) => {
   useDeprecation(
@@ -91,6 +96,7 @@ const Chip = ({
       onPress={onPress}
       themeVariant={renamedVariant}
       themeSelected={selected}
+      accessible={accessible}
       {...otherProps}
     >
       {icon && (

package/src/components/Collapse/__tests__/__snapshots__/StyledCollapse.spec.tsx.snap

@@ -57,11 +57,14 @@ exports[`StyledWrapper renders correct style 1`] = `
   <View
     collapsable={false}
     style={
-      {
-        "margin": 0,
-        "overflow": "hidden",
-        "padding": 0,
-      }
+      [
+        {
+          "margin": 0,
+          "overflow": "hidden",
+          "padding": 0,
+        },
+        undefined,
+      ]
     }
   >
     <Text>

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

@@ -12,12 +12,16 @@ exports[`Collapse renders correctly 1`] = `
     collapsable={false}
     onLayout={[Function]}
     style={
-      {
-        "height": 0,
-        "margin": 0,
-        "overflow": "hidden",
-        "padding": 0,
-      }
+      [
+        {
+          "margin": 0,
+          "overflow": "hidden",
+          "padding": 0,
+        },
+        {
+          "height": 0,
+        },
+      ]
     }
     testID="collapse"
   >
@@ -84,12 +88,16 @@ exports[`Collapse should render Sample Text but not visible 1`] = `
     collapsable={false}
     onLayout={[Function]}
     style={
-      {
-        "height": 0,
-        "margin": 0,
-        "overflow": "hidden",
-        "padding": 0,
-      }
+      [
+        {
+          "margin": 0,
+          "overflow": "hidden",
+          "padding": 0,
+        },
+        {
+          "height": 0,
+        },
+      ]
     }
     testID="collapse"
   >

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

@@ -316,15 +316,19 @@ exports[`Drawer renders correctly with no backdrop 1`] = `
       onStartShouldSetResponder={[Function]}
       pointerEvents="box-none"
       style={
-        {
-          "backgroundColor": "#000000",
-          "bottom": 0,
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
+        [
+          {
+            "backgroundColor": "#000000",
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 0,
+          },
+        ]
       }
       testID="undefined-backdrop"
     />

package/src/components/PinInput/index.tsx

@@ -72,6 +72,10 @@ interface PinInputProps {
    * The autofill type of the input.
    */
   autoComplete?: ComponentProps<typeof TextInput>['autoComplete'];
+  /**
+   * If true, indicates that the PinInput is accessible to screen readers.
+   */
+  accessible?: boolean;
 }
 
 export function getState({
@@ -120,6 +124,7 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
       testID,
       textContentType,
       autoComplete,
+      accessible,
     },
     ref
   ) => {
@@ -191,7 +196,7 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
     );
 
     return (
-      <StyledWrapper style={style} testID={testID}>
+      <StyledWrapper style={style} testID={testID} accessible={accessible}>
         <StyledPinWrapper
           onPress={focus}
           disabled={disabled}

package/src/components/Radio/RadioGroup.tsx

@@ -32,6 +32,10 @@ export interface RadioGroupProps<T> {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Overrides the text that's read by the screen reader when the user interacts with the element.
+   */
+  accessible?: boolean;
   /**
    * Idle background color of the Radio.
    */
@@ -62,9 +66,10 @@ const RadioGroup = <T,>({
   keyExtractor,
   style,
   testID,
+  accessible,
   inactiveIntent = 'light',
 }: RadioGroupProps<T>): ReactElement => (
-  <View style={style} testID={testID}>
+  <View style={style} testID={testID} accessible={accessible}>
     {options.map((option, index) => (
       <React.Fragment key={getKey(option, index, keyExtractor)}>
         {index !== 0 && <Spacer themeIntent={inactiveIntent} />}