@storybook/react-native-ui 8.5.1 → 8.5.2-alpha.1

package/dist/index.js

@@ -4129,7 +4129,8 @@ var Search = import_react10.default.memo(function Search2({ children, dataset, s
     },
     [allComponents, dataset.hash, getLastViewed, makeFuse]
   );
-  const input = inputValue ? inputValue.trim() : "";
+  const deferredQuery = (0, import_react10.useDeferredValue)(inputValue);
+  const input = deferredQuery ? deferredQuery.trim() : "";
   const results = input ? getResults(input) : [];
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native3.View, { style: { flex: 1 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(SearchField, { children: [
@@ -4530,8 +4531,9 @@ var MobileAddonsPanel = (0, import_react15.forwardRef)(
     }));
     const { height } = (0, import_react_native6.useWindowDimensions)();
     const adjustedBottomSheetSize = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
+      const extraPadding = import_react_native6.Platform.OS === "android" ? 32 : 16;
       return {
-        maxHeight: height - animatedPosition.value - insets.bottom
+        maxHeight: height - animatedPosition.value - insets.bottom - extraPadding
       };
     }, [animatedPosition, height, insets.bottom]);
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -4654,7 +4656,7 @@ var TabText = import_react_native_theming12.styled.Text(({ theme, active }) => (
 }));
 
 // src/MobileMenuDrawer.tsx
-var import_bottom_sheet3 = require("@gorhom/bottom-sheet");
+var import_bottom_sheet3 = __toESM(require("@gorhom/bottom-sheet"));
 var import_react16 = require("react");
 var import_react_native7 = require("react-native");
 var import_react_native_reanimated2 = require("react-native-reanimated");
@@ -4680,27 +4682,25 @@ var MobileMenuDrawer = (0, import_react16.forwardRef)(
     (0, import_react16.useImperativeHandle)(ref, () => ({
       setMobileMenuOpen: (open) => {
         if (open) {
-          menuBottomSheetRef.current?.present();
+          menuBottomSheetRef.current?.expand();
         } else {
           import_react_native7.Keyboard.dismiss();
-          menuBottomSheetRef.current?.dismiss();
+          menuBottomSheetRef.current?.close();
         }
       }
     }));
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      import_bottom_sheet3.BottomSheetModal,
+      import_bottom_sheet3.default,
       {
         ref: menuBottomSheetRef,
-        index: 1,
+        index: -1,
         animateOnMount: !reducedMotion,
         snapPoints: ["50%", "75%"],
-        enableDismissOnClose: true,
         enableHandlePanningGesture: true,
         enableContentPanningGesture: true,
         enableDynamicSizing: false,
         keyboardBehavior: "extend",
         keyboardBlurBehavior: "restore",
-        stackBehavior: "replace",
         backdropComponent: BottomSheetBackdropComponent,
         backgroundStyle: { backgroundColor: theme.background.content },
         handleIndicatorStyle: { backgroundColor: theme.textMutedColor },
@@ -5200,27 +5200,6 @@ var Layout = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: { paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StorybookLogo, { theme }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            Sidebar,
-            {
-              extra: [],
-              previewInitialized: true,
-              indexError: void 0,
-              refs: {},
-              setSelection: ({ storyId: newStoryId }) => {
-                const channel = import_manager_api2.addons.getChannel();
-                channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
-              },
-              status: {},
-              index: storyHash,
-              storyId: story?.id,
-              refId: DEFAULT_REF_ID
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id }),
         !uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Container3, { style: { marginBottom: insets.bottom }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Nav, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
             Button2,
@@ -5249,7 +5228,28 @@ var Layout = ({
               Icon: BottomBarToggleIcon
             }
           )
-        ] }) }) : null
+        ] }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: { paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StorybookLogo, { theme }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            Sidebar,
+            {
+              extra: [],
+              previewInitialized: true,
+              indexError: void 0,
+              refs: {},
+              setSelection: ({ storyId: newStoryId }) => {
+                const channel = import_manager_api2.addons.getChannel();
+                channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
+              },
+              status: {},
+              index: storyHash,
+              storyId: story?.id,
+              refId: DEFAULT_REF_ID
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "8.5.1",
+  "version": "8.5.2-alpha.1",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -60,7 +60,7 @@
   "dependencies": {
     "@storybook/core": "^8.4.2",
     "@storybook/react": "^8.4.2",
-    "@storybook/react-native-theming": "^8.5.1",
+    "@storybook/react-native-theming": "^8.5.2-alpha.1",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "398bc81db9781ee795e8b958a7cb03f0aa9f6b7d"
+  "gitHead": "6829dc629b4ca18e2869267a9c9e0afed094f2f3"
 }

package/src/Layout.tsx

@@ -169,30 +169,6 @@ export const Layout = ({
         )}
       </View>
 
-      <MobileMenuDrawer ref={mobileMenuDrawerRef}>
-        <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>
-          <StorybookLogo theme={theme} />
-        </View>
-
-        <Sidebar
-          extra={[]}
-          previewInitialized
-          indexError={undefined}
-          refs={{}}
-          setSelection={({ storyId: newStoryId }) => {
-            const channel = addons.getChannel();
-
-            channel.emit(SET_CURRENT_STORY, { storyId: newStoryId });
-          }}
-          status={{}}
-          index={storyHash}
-          storyId={story?.id}
-          refId={DEFAULT_REF_ID}
-        />
-      </MobileMenuDrawer>
-
-      <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />
-
       {!uiHidden ? (
         <Container style={{ marginBottom: insets.bottom }}>
           <Nav>
@@ -218,6 +194,30 @@ export const Layout = ({
           </Nav>
         </Container>
       ) : null}
+
+      <MobileMenuDrawer ref={mobileMenuDrawerRef}>
+        <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>
+          <StorybookLogo theme={theme} />
+        </View>
+
+        <Sidebar
+          extra={[]}
+          previewInitialized
+          indexError={undefined}
+          refs={{}}
+          setSelection={({ storyId: newStoryId }) => {
+            const channel = addons.getChannel();
+
+            channel.emit(SET_CURRENT_STORY, { storyId: newStoryId });
+          }}
+          status={{}}
+          index={storyHash}
+          storyId={story?.id}
+          refId={DEFAULT_REF_ID}
+        />
+      </MobileMenuDrawer>
+
+      <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />
     </View>
   );
 };

package/src/MobileAddonsPanel.tsx

@@ -3,7 +3,7 @@ import { addons } from '@storybook/core/manager-api';
 import { styled } from '@storybook/react-native-theming';
 import { Addon_TypesEnum } from '@storybook/core/types';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { Text, View, useWindowDimensions } from 'react-native';
+import { Platform, Text, View, useWindowDimensions } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import Animated, {
   useAnimatedKeyboard,
@@ -47,8 +47,9 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: st
     const { height } = useWindowDimensions();
 
     const adjustedBottomSheetSize = useAnimatedStyle(() => {
+      const extraPadding = Platform.OS === 'android' ? 32 : 16;
       return {
-        maxHeight: height - animatedPosition.value - insets.bottom,
+        maxHeight: height - animatedPosition.value - insets.bottom - extraPadding,
       };
     }, [animatedPosition, height, insets.bottom]);
 

package/src/MobileMenuDrawer.tsx

@@ -1,4 +1,4 @@
-import {
+import BottomSheet, {
   BottomSheetBackdrop,
   BottomSheetBackdropProps,
   BottomSheetModal,
@@ -39,28 +39,30 @@ export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawer
     useImperativeHandle(ref, () => ({
       setMobileMenuOpen: (open: boolean) => {
         if (open) {
-          menuBottomSheetRef.current?.present();
+          // menuBottomSheetRef.current?.present();
+          menuBottomSheetRef.current?.expand();
         } else {
           Keyboard.dismiss();
 
-          menuBottomSheetRef.current?.dismiss();
+          // menuBottomSheetRef.current?.dismiss();
+          menuBottomSheetRef.current?.close();
         }
       },
     }));
 
     return (
-      <BottomSheetModal
+      <BottomSheet
         ref={menuBottomSheetRef}
-        index={1}
+        index={-1}
         animateOnMount={!reducedMotion}
         snapPoints={['50%', '75%']}
-        enableDismissOnClose
+        // enableDismissOnClose
         enableHandlePanningGesture
         enableContentPanningGesture
         enableDynamicSizing={false}
         keyboardBehavior="extend"
         keyboardBlurBehavior="restore"
-        stackBehavior="replace"
+        // stackBehavior="replace"
         backdropComponent={BottomSheetBackdropComponent}
         backgroundStyle={{ backgroundColor: theme.background.content }}
         handleIndicatorStyle={{ backgroundColor: theme.textMutedColor }}
@@ -73,7 +75,7 @@ export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawer
         >
           {children}
         </BottomSheetScrollView>
-      </BottomSheetModal>
+      </BottomSheet>
     );
   }
 );

package/src/Search.tsx

@@ -2,7 +2,7 @@ import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
 import { styled } from '@storybook/react-native-theming';
 import type { IFuseOptions } from 'fuse.js';
 import Fuse from 'fuse.js';
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useDeferredValue, useRef, useState } from 'react';
 import { TextInput, View } from 'react-native';
 import { CloseIcon } from './icon/CloseIcon';
 import { SearchIcon } from './icon/SearchIcon';
@@ -219,8 +219,8 @@ export const Search = React.memo<{
     },
     [allComponents, dataset.hash, getLastViewed, makeFuse]
   );
-
-  const input = inputValue ? inputValue.trim() : '';
+  const deferredQuery = useDeferredValue(inputValue);
+  const input = deferredQuery ? deferredQuery.trim() : '';
   const results = input ? getResults(input) : [];
 
   return (