@storybook/react-native-ui 8.5.5-alpha.3 → 8.5.5-alpha.4

package/dist/index.js

@@ -3487,19 +3487,37 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 var SelectedNodeContext = (0, import_react9.createContext)({
   nodeRef: { current: null },
   setNodeRef: () => {
-  }
+  },
+  scrollToSelectedNode: () => {
+  },
+  scrollRef: null
 });
 var SelectedNodeProvider = ({ children }) => {
   const nodeRef = (0, import_react9.useRef)(null);
   const setNodeRef = (0, import_react9.useCallback)((node) => {
     nodeRef.current = node;
   }, []);
+  const scrollRef = (0, import_react9.useRef)(null);
+  const scrollToSelectedNode = (0, import_react9.useCallback)(() => {
+    setTimeout(() => {
+      if (nodeRef?.current && scrollRef?.current) {
+        try {
+          nodeRef.current.measureLayout?.(scrollRef.current, (_x, y) => {
+            scrollRef.current?.scrollTo({ y: y - 100, animated: true });
+          });
+        } catch (error) {
+        }
+      }
+    }, 500);
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     SelectedNodeContext.Provider,
     {
       value: {
         nodeRef,
-        setNodeRef
+        setNodeRef,
+        scrollToSelectedNode,
+        scrollRef
       },
       children
     }
@@ -4077,14 +4095,16 @@ var Search = import_react15.default.memo(function Search2({ children, dataset, s
   const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
   const [allComponents, showAllComponents] = (0, import_react15.useState)(false);
   const { isMobile } = useLayout();
+  const { scrollToSelectedNode } = useSelectedNode();
   const selectStory = (0, import_react15.useCallback)(
     (id, refId) => {
       setSelection({ storyId: id, refId });
       inputRef.current?.blur();
       setIsOpen(false);
       showAllComponents(false);
+      scrollToSelectedNode();
     },
-    [setSelection]
+    [scrollToSelectedNode, setSelection]
   );
   const getItemProps = (0, import_react15.useCallback)(
     ({ item: result }) => {
@@ -4761,23 +4781,13 @@ var MobileMenuDrawer = (0, import_react22.memo)(
     const reducedMotion = (0, import_react_native_reanimated2.useReducedMotion)();
     const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
     const theme = (0, import_react_native_theming14.useTheme)();
-    const scrollRef = (0, import_react22.useRef)(null);
     const menuBottomSheetRef = (0, import_react22.useRef)(null);
-    const { nodeRef } = useSelectedNode();
+    const { scrollToSelectedNode, scrollRef } = useSelectedNode();
     (0, import_react22.useImperativeHandle)(ref, () => ({
       setMobileMenuOpen: (open) => {
         if (open) {
           menuBottomSheetRef.current?.snapToIndex(1);
-          setTimeout(() => {
-            if (nodeRef?.current) {
-              try {
-                nodeRef.current.measureLayout?.(scrollRef.current, (_x, y) => {
-                  scrollRef.current?.scrollTo({ y: y - 100, animated: true });
-                });
-              } catch (error) {
-              }
-            }
-          }, 500);
+          scrollToSelectedNode();
         } else {
           import_react_native7.Keyboard.dismiss();
           menuBottomSheetRef.current?.close();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "8.5.5-alpha.3",
+  "version": "8.5.5-alpha.4",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -60,7 +60,7 @@
   "dependencies": {
     "@storybook/core": "^8.5.1",
     "@storybook/react": "^8.5.1",
-    "@storybook/react-native-theming": "^8.5.5-alpha.3",
+    "@storybook/react-native-theming": "^8.5.5-alpha.4",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2a5a124d6646c080d72298e0fb12d8f28c85b412"
+  "gitHead": "1d84b44bf483612cdb27f8bf9b36dfd931776511"
 }

package/src/MobileMenuDrawer.tsx

@@ -3,7 +3,6 @@ import BottomSheet, {
   BottomSheetBackdropProps,
   BottomSheetScrollView,
 } from '@gorhom/bottom-sheet';
-import { BottomSheetScrollViewMethods } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
 import { useTheme } from '@storybook/react-native-theming';
 import { forwardRef, memo, ReactNode, useImperativeHandle, useMemo, useRef } from 'react';
 import { Keyboard } from 'react-native';
@@ -36,26 +35,15 @@ export const MobileMenuDrawer = memo(
     const reducedMotion = useReducedMotion();
     const insets = useSafeAreaInsets();
     const theme = useTheme();
-    const scrollRef = useRef<BottomSheetScrollViewMethods>(null);
     const menuBottomSheetRef = useRef<BottomSheet>(null);
-    const { nodeRef } = useSelectedNode();
+    const { scrollToSelectedNode, scrollRef } = useSelectedNode();
 
     useImperativeHandle(ref, () => ({
       setMobileMenuOpen: (open: boolean) => {
         if (open) {
           menuBottomSheetRef.current?.snapToIndex(1);
 
-          setTimeout(() => {
-            if (nodeRef?.current) {
-              // im just not sure if older versions would error here,
-              // since measure layout probably changed since new arch
-              try {
-                nodeRef.current.measureLayout?.(scrollRef.current as any, (_x, y) => {
-                  scrollRef.current?.scrollTo({ y: y - 100, animated: true });
-                });
-              } catch (error) {}
-            }
-          }, 500);
+          scrollToSelectedNode();
         } else {
           Keyboard.dismiss();
 

package/src/Search.tsx

@@ -18,6 +18,7 @@ import {
 } from './types';
 import { getGroupStatus, getHighestStatus } from './util/status';
 import { searchItem } from './util/tree';
+import { useSelectedNode } from './SelectedNodeProvider';
 
 const DEFAULT_MAX_SEARCH_RESULTS = 50;
 
@@ -111,6 +112,7 @@ export const Search = React.memo<{
   const [isOpen, setIsOpen] = useState(false);
   const [allComponents, showAllComponents] = useState(false);
   const { isMobile } = useLayout();
+  const { scrollToSelectedNode } = useSelectedNode();
 
   const selectStory = useCallback(
     (id: string, refId: string) => {
@@ -121,8 +123,10 @@ export const Search = React.memo<{
       setIsOpen(false);
 
       showAllComponents(false);
+
+      scrollToSelectedNode();
     },
-    [setSelection]
+    [scrollToSelectedNode, setSelection]
   );
 
   const getItemProps: GetSearchItemProps = useCallback(

package/src/SelectedNodeProvider.tsx

@@ -1,3 +1,4 @@
+import { BottomSheetScrollViewMethods } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
 import type { FC, PropsWithChildren } from 'react';
 import { createContext, useCallback, useContext, useRef } from 'react';
 import type { View } from 'react-native';
@@ -5,11 +6,15 @@ import type { View } from 'react-native';
 type SelectedNodeContextType = {
   nodeRef: React.RefObject<View>;
   setNodeRef: (node: View | null) => void;
+  scrollToSelectedNode: () => void;
+  scrollRef: React.RefObject<BottomSheetScrollViewMethods>;
 };
 
 const SelectedNodeContext = createContext<SelectedNodeContextType>({
   nodeRef: { current: null },
   setNodeRef: () => {},
+  scrollToSelectedNode: () => {},
+  scrollRef: null,
 });
 
 export const SelectedNodeProvider: FC<PropsWithChildren> = ({ children }) => {
@@ -19,11 +24,30 @@ export const SelectedNodeProvider: FC<PropsWithChildren> = ({ children }) => {
     nodeRef.current = node;
   }, []);
 
+  const scrollRef = useRef<BottomSheetScrollViewMethods>(null);
+
+  const scrollToSelectedNode = useCallback(() => {
+    // maybe later we can improve on this to not use setTimeout but right now it seems like the simplest solution
+    setTimeout(() => {
+      if (nodeRef?.current && scrollRef?.current) {
+        // im just not sure if older versions would error here,
+        // since measure layout probably changed since new arch
+        try {
+          nodeRef.current.measureLayout?.(scrollRef.current as any, (_x, y) => {
+            scrollRef.current?.scrollTo({ y: y - 100, animated: true });
+          });
+        } catch (error) {}
+      }
+    }, 500);
+  }, []);
+
   return (
     <SelectedNodeContext.Provider
       value={{
         nodeRef,
         setNodeRef,
+        scrollToSelectedNode,
+        scrollRef,
       }}
     >
       {children}