@hero-design/rn 8.109.2 → 8.110.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.109.2",
+  "version": "8.110.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,7 +25,7 @@
     "@hero-design/colors": "8.46.2",
     "d3": "^7.8.5",
     "date-fns": "^2.30.0",
-    "hero-editor": "^1.16.0",
+    "hero-editor": "^1.17.0",
     "nanoid": "^5.0.9"
   },
   "peerDependencies": {
@@ -34,7 +34,7 @@
     "@react-native-community/datetimepicker": "^3.5.2 || ^7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "react": "18.3.1",
-    "react-native": "0.76.9",
+    "react-native": "0.77.3 || 0.76.9",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-pager-view": "^6.7.0",
@@ -64,10 +64,10 @@
     "@react-native-community/cli-platform-ios": "15.0.1",
     "@react-native-community/datetimepicker": "8.2.0",
     "@react-native-community/slider": "^4.5.1",
-    "@react-native/babel-preset": "0.76.9",
-    "@react-native/eslint-config": "0.76.9",
-    "@react-native/metro-config": "0.76.9",
-    "@react-native/typescript-config": "0.76.9",
+    "@react-native/babel-preset": "0.77.3",
+    "@react-native/eslint-config": "0.77.3",
+    "@react-native/metro-config": "0.77.3",
+    "@react-native/typescript-config": "0.77.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
@@ -104,7 +104,7 @@
     "prettier-config-hd": "8.42.4",
     "react": "18.3.1",
     "react-dom": "^18.2.0",
-    "react-native": "0.76.9",
+    "react-native": "0.77.3",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-linear-gradient": "2.8.3",
     "react-native-pager-view": "6.5.1",

package/src/components/Accordion/__tests__/__snapshots__/AccordionItem.spec.tsx.snap

@@ -96,12 +96,16 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
       collapsable={false}
       onLayout={[Function]}
       style={
-        {
-          "height": 0,
-          "margin": 0,
-          "overflow": "hidden",
-          "padding": 0,
-        }
+        [
+          {
+            "margin": 0,
+            "overflow": "hidden",
+            "padding": 0,
+          },
+          {
+            "height": 0,
+          },
+        ]
       }
     >
       <View
@@ -274,12 +278,16 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
       collapsable={false}
       onLayout={[Function]}
       style={
-        {
-          "height": 0,
-          "margin": 0,
-          "overflow": "hidden",
-          "padding": 0,
-        }
+        [
+          {
+            "margin": 0,
+            "overflow": "hidden",
+            "padding": 0,
+          },
+          {
+            "height": 0,
+          },
+        ]
       }
     >
       <View
@@ -452,12 +460,16 @@ exports[`AccordionItem renders correctly when open 1`] = `
       collapsable={false}
       onLayout={[Function]}
       style={
-        {
-          "height": 0,
-          "margin": 0,
-          "overflow": "hidden",
-          "padding": 0,
-        }
+        [
+          {
+            "margin": 0,
+            "overflow": "hidden",
+            "padding": 0,
+          },
+          {
+            "height": 0,
+          },
+        ]
       }
     >
       <View
@@ -630,12 +642,16 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
       collapsable={false}
       onLayout={[Function]}
       style={
-        {
-          "height": 0,
-          "margin": 0,
-          "overflow": "hidden",
-          "padding": 0,
-        }
+        [
+          {
+            "margin": 0,
+            "overflow": "hidden",
+            "padding": 0,
+          },
+          {
+            "height": 0,
+          },
+        ]
       }
     >
       <View

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

@@ -104,12 +104,16 @@ exports[`Accordion allows fully controlled 1`] = `
         collapsable={false}
         onLayout={[Function]}
         style={
-          {
-            "height": 0,
-            "margin": 0,
-            "overflow": "hidden",
-            "padding": 0,
-          }
+          [
+            {
+              "margin": 0,
+              "overflow": "hidden",
+              "padding": 0,
+            },
+            {
+              "height": 0,
+            },
+          ]
         }
       >
         <View
@@ -251,12 +255,16 @@ exports[`Accordion allows fully controlled 1`] = `
         collapsable={false}
         onLayout={[Function]}
         style={
-          {
-            "height": 0,
-            "margin": 0,
-            "overflow": "hidden",
-            "padding": 0,
-          }
+          [
+            {
+              "margin": 0,
+              "overflow": "hidden",
+              "padding": 0,
+            },
+            {
+              "height": 0,
+            },
+          ]
         }
       >
         <View
@@ -438,12 +446,16 @@ exports[`Accordion renders correctly 1`] = `
         collapsable={false}
         onLayout={[Function]}
         style={
-          {
-            "height": 0,
-            "margin": 0,
-            "overflow": "hidden",
-            "padding": 0,
-          }
+          [
+            {
+              "margin": 0,
+              "overflow": "hidden",
+              "padding": 0,
+            },
+            {
+              "height": 0,
+            },
+          ]
         }
       >
         <View
@@ -585,12 +597,16 @@ exports[`Accordion renders correctly 1`] = `
         collapsable={false}
         onLayout={[Function]}
         style={
-          {
-            "height": 0,
-            "margin": 0,
-            "overflow": "hidden",
-            "padding": 0,
-          }
+          [
+            {
+              "margin": 0,
+              "overflow": "hidden",
+              "padding": 0,
+            },
+            {
+              "height": 0,
+            },
+          ]
         }
       >
         <View
@@ -772,12 +788,16 @@ exports[`Accordion renders correctly when variant is card 1`] = `
         collapsable={false}
         onLayout={[Function]}
         style={
-          {
-            "height": 0,
-            "margin": 0,
-            "overflow": "hidden",
-            "padding": 0,
-          }
+          [
+            {
+              "margin": 0,
+              "overflow": "hidden",
+              "padding": 0,
+            },
+            {
+              "height": 0,
+            },
+          ]
         }
       >
         <View
@@ -930,12 +950,16 @@ exports[`Accordion renders correctly when variant is card 1`] = `
         collapsable={false}
         onLayout={[Function]}
         style={
-          {
-            "height": 0,
-            "margin": 0,
-            "overflow": "hidden",
-            "padding": 0,
-          }
+          [
+            {
+              "margin": 0,
+              "overflow": "hidden",
+              "padding": 0,
+            },
+            {
+              "height": 0,
+            },
+          ]
         }
       >
         <View

package/src/components/Accordion/index.tsx

@@ -38,6 +38,10 @@ export interface AccordionProps<K extends Key> {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * If true, indicates that the Accordion is accessible to screen readers.
+   */
+  accessible?: boolean;
 }
 
 const Accordion = <K extends Key>({
@@ -47,6 +51,7 @@ const Accordion = <K extends Key>({
   variant = 'default',
   style,
   testID,
+  accessible,
 }: AccordionProps<K>) => {
   const defaultValue = useMemo(
     () => (typeof activeItemKey === 'number' ? NaN : '') as K,
@@ -59,7 +64,7 @@ const Accordion = <K extends Key>({
   );
 
   return (
-    <StyledWrapper style={style} testID={testID}>
+    <StyledWrapper style={style} testID={testID} accessible={accessible}>
       {items.map(({ key, ...props }, index) => {
         const open = _activeItemKey === key;
         return (

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