@storybook/react-native-ui 10.0.0-beta.0 → 10.0.0-beta.8

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as _storybook_react_native_theming from '@storybook/react-native-themin
 import * as react_native from 'react-native';
 import { View } from 'react-native';
 import React, { FC, ComponentProps, ReactNode } from 'react';
-import { State, StoriesHash } from 'storybook/internal/manager-api';
+import { State, StoriesHash } from 'storybook/manager-api';
 import { Item, ExpandAction, CombinedDataset, Selection, SBUI } from '@storybook/react-native-ui-common';
 import { API_LoadedRefData, API_IndexHash } from 'storybook/internal/types';
 import * as react_jsx_runtime from 'react/jsx-runtime';

package/dist/index.js

@@ -1284,7 +1284,7 @@ var import_react_native8 = require("react-native");
 var import_react_native_gesture_handler2 = require("react-native-gesture-handler");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 var import_core_events = require("storybook/internal/core-events");
-var import_manager_api2 = require("storybook/internal/manager-api");
+var import_manager_api2 = require("storybook/manager-api");
 
 // src/icon/BottomBarToggleIcon.tsx
 var import_react_native_svg9 = require("react-native-svg");
@@ -1367,7 +1367,7 @@ var MenuIcon = ({
 
 // src/MobileAddonsPanel.tsx
 var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
-var import_manager_api = require("storybook/internal/manager-api");
+var import_manager_api = require("storybook/manager-api");
 var import_react_native_theming13 = require("@storybook/react-native-theming");
 var import_types = require("storybook/internal/types");
 var import_react15 = require("react");
@@ -1562,16 +1562,33 @@ var import_react_native6 = require("react-native");
 var import_react_native_reanimated2 = require("react-native-reanimated");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var BottomSheetBackdropComponent = (backdropComponentProps) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-  import_bottom_sheet3.BottomSheetBackdrop,
-  {
-    ...backdropComponentProps,
-    appearsOnIndex: 0,
-    disappearsOnIndex: -1,
-    pressBehavior: "close",
-    style: [backdropComponentProps.style, { backgroundColor: "rgba(0,0,0,0.5)" }]
-  }
-);
+var BottomSheetBackdropComponent = (backdropComponentProps) => {
+  const androidTouchEventFix = (0, import_react_native_reanimated2.useAnimatedStyle)(() => {
+    if (import_react_native6.Platform.OS === "android") {
+      return {
+        zIndex: backdropComponentProps.animatedIndex.value >= 0 ? 0 : -1
+      };
+    }
+    return {};
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_bottom_sheet3.BottomSheetBackdrop,
+    {
+      ...backdropComponentProps,
+      appearsOnIndex: 0,
+      disappearsOnIndex: -1,
+      pressBehavior: "close",
+      style: [
+        backdropComponentProps.style,
+        androidTouchEventFix,
+        {
+          backgroundColor: "rgba(0,0,0,0.5)",
+          paddingTop: import_react_native6.Platform.OS === "android" ? 1 : void 0
+        }
+      ]
+    }
+  );
+};
 var snapPoints = ["50%", "75%"];
 var MobileMenuDrawer = (0, import_react16.memo)(
   (0, import_react16.forwardRef)(({ children }, ref) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "10.0.0-beta.0",
+  "version": "10.0.0-beta.8",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -58,9 +58,9 @@
     "typescript": "~5.9.2"
   },
   "dependencies": {
-    "@storybook/react": "10.0.0-beta.0",
-    "@storybook/react-native-theming": "^10.0.0-beta.0",
-    "@storybook/react-native-ui-common": "^10.0.0-beta.0",
+    "@storybook/react": "10.0.0-beta.8",
+    "@storybook/react-native-theming": "^10.0.0-beta.8",
+    "@storybook/react-native-ui-common": "^10.0.0-beta.8",
     "es-toolkit": "^1.38.0",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2a6a4f7e68024b71178cad8ea0dc08cbba7dca1b"
+  "gitHead": "18834e54853a10911b05fb67d78d5ad3f1f35635"
 }

package/src/Layout.tsx

@@ -16,7 +16,7 @@ import { ScrollView, Text, TouchableOpacity, View, ViewStyle } from 'react-nativ
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { SET_CURRENT_STORY } from 'storybook/internal/core-events';
-import { addons } from 'storybook/internal/manager-api';
+import { addons } from 'storybook/manager-api';
 import type { API_IndexHash } from 'storybook/internal/types';
 import { DEFAULT_REF_ID } from './constants';
 import { BottomBarToggleIcon } from './icon/BottomBarToggleIcon';

package/src/MobileAddonsPanel.tsx

@@ -1,5 +1,5 @@
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
-import { addons } from 'storybook/internal/manager-api';
+import { addons } from 'storybook/manager-api';
 import { styled, useTheme } from '@storybook/react-native-theming';
 import { Addon_TypesEnum } from 'storybook/internal/types';
 import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';

package/src/MobileMenuDrawer.tsx

@@ -5,8 +5,8 @@ import BottomSheet, {
 } from '@gorhom/bottom-sheet';
 import { useTheme } from '@storybook/react-native-theming';
 import { forwardRef, memo, ReactNode, useImperativeHandle, useMemo, useRef } from 'react';
-import { Keyboard } from 'react-native';
-import { useReducedMotion } from 'react-native-reanimated';
+import { Keyboard, Platform, StyleSheet } from 'react-native';
+import { useAnimatedStyle, useReducedMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useSelectedNode } from './SelectedNodeProvider';
 
@@ -18,15 +18,33 @@ export interface MobileMenuDrawerRef {
   setMobileMenuOpen: (isOpen: boolean) => void;
 }
 
-export const BottomSheetBackdropComponent = (backdropComponentProps: BottomSheetBackdropProps) => (
-  <BottomSheetBackdrop
-    {...backdropComponentProps}
-    appearsOnIndex={0}
-    disappearsOnIndex={-1}
-    pressBehavior={'close'}
-    style={[backdropComponentProps.style, { backgroundColor: 'rgba(0,0,0,0.5)' }]}
-  />
-);
+export const BottomSheetBackdropComponent = (backdropComponentProps: BottomSheetBackdropProps) => {
+  const androidTouchEventFix = useAnimatedStyle(() => {
+    if (Platform.OS === 'android') {
+      return {
+        zIndex: backdropComponentProps.animatedIndex.value >= 0 ? 0 : -1,
+      };
+    }
+    return {};
+  });
+
+  return (
+    <BottomSheetBackdrop
+      {...backdropComponentProps}
+      appearsOnIndex={0}
+      disappearsOnIndex={-1}
+      pressBehavior={'close'}
+      style={[
+        backdropComponentProps.style,
+        androidTouchEventFix,
+        {
+          backgroundColor: 'rgba(0,0,0,0.5)',
+          paddingTop: Platform.OS === 'android' ? 1 : undefined,
+        },
+      ]}
+    />
+  );
+};
 
 const snapPoints = ['50%', '75%'];
 

package/src/Refs.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { useMemo, useCallback, useEffect, useState } from 'react';
-import type { State } from 'storybook/internal/manager-api';
+import type { State } from 'storybook/manager-api';
 import { styled } from '@storybook/react-native-theming';
 import { Tree } from './Tree';
 import type { RefType } from '@storybook/react-native-ui-common';

package/src/Sidebar.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import type { IndexHash, State } from 'storybook/internal/manager-api';
+import type { IndexHash, State } from 'storybook/manager-api';
 import { Button, type RefType } from '@storybook/react-native-ui-common';
 import { Sidebar } from './Sidebar';
 import { DEFAULT_REF_ID } from './constants';

package/src/Sidebar.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { styled } from '@storybook/react-native-theming';
-import type { State } from 'storybook/internal/manager-api';
+import type { State } from 'storybook/manager-api';
 import type { API_LoadedRefData } from 'storybook/internal/types';
 import { Explorer } from './Explorer';
 import { Search } from './Search';

package/src/Tree.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { ComponentEntry, IndexHash } from 'storybook/internal/manager-api';
+import type { ComponentEntry, IndexHash } from 'storybook/manager-api';
 import type { StoryObj, Meta } from '@storybook/react';
 import { Tree } from './Tree';
 import type { Dataset } from '@storybook/react-native-ui-common';

package/src/Tree.tsx

@@ -4,7 +4,7 @@ import type {
   State,
   StoriesHash,
   StoryEntry,
-} from 'storybook/internal/manager-api';
+} from 'storybook/manager-api';
 import { styled } from '@storybook/react-native-theming';
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View } from 'react-native';