@storybook/react-native-ui-lite 10.4.1 → 10.4.2-next.0

package/dist/index.js

@@ -393,6 +393,10 @@ const SelectedNodeProvider = ({ children }) => {
 };
 const useSelectedNode = () => (0, react.useContext)(SelectedNodeContext);
 //#endregion
+//#region src/DrawerKeyboardInsetContext.tsx
+const DrawerKeyboardInsetContext = (0, react.createContext)(0);
+const useDrawerKeyboardInset = () => (0, react.useContext)(DrawerKeyboardInsetContext);
+//#endregion
 //#region src/Tree.tsx
 const Node = react.default.memo(function Node({ item, refId, isOrphan: _isOrphan, isDisplayed: _isDisplayed, isSelected, isFullyExpanded, color: _2, setFullyExpanded, isExpanded, setExpanded, onSelectStoryId }) {
 	const id = (0, _storybook_react_native_ui_common.createId)(item.id, refId);
@@ -516,6 +520,7 @@ const Tree = react.default.memo(function Tree({ isMain, refId, data, status, doc
 	const { registerCallback } = useSelectedNode();
 	const [pendingScrollTarget, setPendingScrollTarget] = (0, react.useState)(null);
 	const insets = (0, react_native_safe_area_context.useSafeAreaInsets)();
+	const drawerKeyboardInset = useDrawerKeyboardInset();
 	const listRef = (0, react.useRef)(null);
 	const [rootIds, orphanIds, initialExpanded] = (0, react.useMemo)(() => Object.keys(data).reduce((acc, id) => {
 		const item = data[id];
@@ -680,12 +685,13 @@ const Tree = react.default.memo(function Tree({ isMain, refId, data, status, doc
 	}, [refId]);
 	const contentContainerStyle = (0, react.useMemo)(() => ({
 		marginTop: isMain && orphanIds.length > 0 ? 20 : 0,
-		paddingBottom: insets.bottom + 20,
+		paddingBottom: insets.bottom + drawerKeyboardInset + 20,
 		paddingLeft: 6
 	}), [
 		isMain,
 		orphanIds.length,
-		insets.bottom
+		insets.bottom,
+		drawerKeyboardInset
 	]);
 	(0, react.useLayoutEffect)(() => {
 		registerCallback(({ id: nextId, animated }) => {
@@ -1114,6 +1120,7 @@ const Result = react.default.memo(function Result({ item, matches, icon: _icon,
 const Text$3 = _storybook_react_native_theming.styled.Text(({ theme }) => ({ color: theme.color.defaultText }));
 const SearchResults = react.default.memo(function SearchResults({ query, results, closeMenu, getItemProps, highlightedIndex, clearLastViewed }) {
 	const insets = (0, react_native_safe_area_context.useSafeAreaInsets)();
+	const drawerKeyboardInset = useDrawerKeyboardInset();
 	const handleClearLastViewed = (0, react.useCallback)(() => {
 		clearLastViewed();
 		closeMenu();
@@ -1121,8 +1128,8 @@ const SearchResults = react.default.memo(function SearchResults({ query, results
 	const contentContainerStyle = (0, react.useMemo)(() => ({
 		paddingHorizontal: 10,
 		paddingTop: 8,
-		paddingBottom: insets.bottom + 20
-	}), [insets.bottom]);
+		paddingBottom: insets.bottom + drawerKeyboardInset + 20
+	}), [insets.bottom, drawerKeyboardInset]);
 	const listData = (0, react.useMemo)(() => {
 		const items = [];
 		if (results.length > 0 && !query) items.push({
@@ -1518,50 +1525,29 @@ const portalContainerStyle = {
 const useAnimatedModalHeight = () => {
 	const { height } = (0, react_native.useWindowDimensions)();
 	const modalHeight = .65 * height;
-	const maxModalHeight = .85 * height;
-	const [sheetHeight, setSheetHeight] = (0, react.useState)(modalHeight);
-	const [keyboardInset, setKeyboardInset] = (0, react.useState)(0);
-	const [isKeyboardVisible, setIsKeyboardVisible] = (0, react.useState)(false);
-	(0, react.useEffect)(() => {
-		setSheetHeight(modalHeight);
-		setKeyboardInset(0);
-		setIsKeyboardVisible(false);
-	}, [modalHeight]);
+	const maxKeyboardModalHeight = .75 * height;
+	const [keyboardHeight, setKeyboardHeight] = (0, react.useState)(0);
+	const isKeyboardVisible = keyboardHeight > 0;
+	const sheetHeight = modalHeight + (isKeyboardVisible ? Math.min(keyboardHeight, maxKeyboardModalHeight - modalHeight) : 0);
+	const keyboardInset = isKeyboardVisible ? keyboardHeight : 0;
 	(0, react.useEffect)(() => {
 		const expand = (keyboardHeight = 0) => {
-			const maxKeyboardOffset = maxModalHeight - modalHeight;
-			const keyboardAvoidanceOffset = Math.min(keyboardHeight, maxKeyboardOffset);
-			setIsKeyboardVisible(true);
-			setSheetHeight(modalHeight + keyboardAvoidanceOffset);
-			setKeyboardInset(Math.max(keyboardHeight - keyboardAvoidanceOffset, 0));
+			setKeyboardHeight(keyboardHeight);
 		};
 		const collapse = () => {
-			setSheetHeight(modalHeight);
-			setKeyboardInset(0);
-			setIsKeyboardVisible(false);
-		};
-		const handleKeyboardWillShow = (e) => {
-			if (react_native.Platform.OS === "ios") expand(e.endCoordinates.height);
+			setKeyboardHeight(0);
 		};
-		const handleKeyboardDidShow = (e) => {
-			if (react_native.Platform.OS === "android") expand(e.endCoordinates.height);
+		const handleKeyboardShow = (e) => {
+			expand(e.endCoordinates.height);
 		};
-		const handleKeyboardWillHide = (e) => {
-			if (react_native.Platform.OS === "ios") collapse();
-		};
-		const handleKeyboardDidHide = (e) => {
-			if (react_native.Platform.OS === "android") collapse();
+		const handleKeyboardHide = () => {
+			collapse();
 		};
-		const subscriptions = [
-			react_native.Keyboard.addListener("keyboardWillShow", handleKeyboardWillShow),
-			react_native.Keyboard.addListener("keyboardDidShow", handleKeyboardDidShow),
-			react_native.Keyboard.addListener("keyboardWillHide", handleKeyboardWillHide),
-			react_native.Keyboard.addListener("keyboardDidHide", handleKeyboardDidHide)
-		];
+		const subscriptions = [react_native.Keyboard.addListener(react_native.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow", handleKeyboardShow), react_native.Keyboard.addListener(react_native.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide", handleKeyboardHide)];
 		return () => {
 			subscriptions.forEach((subscription) => subscription.remove());
 		};
-	}, [maxModalHeight, modalHeight]);
+	}, []);
 	return {
 		height: sheetHeight,
 		keyboardInset,
@@ -1681,9 +1667,8 @@ const MobileMenuDrawer = (0, react.memo)((0, react.forwardRef)(({ children, onVi
 	}), [theme.background.content]);
 	const childrenWrapperStyle = (0, react.useMemo)(() => ({
 		flex: 1,
-		backgroundColor: theme.background.content,
-		paddingBottom: keyboardInset
-	}), [keyboardInset, theme.background.content]);
+		backgroundColor: theme.background.content
+	}), [theme.background.content]);
 	const scrollToSelectedButtonWrapperStyle = (0, react.useMemo)(() => ({
 		position: "absolute",
 		right: 16,
@@ -1726,11 +1711,14 @@ const MobileMenuDrawer = (0, react.memo)((0, react.forwardRef)(({ children, onVi
 							style: dragHandleWrapperStyle,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: handleStyle })
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-							style: childrenWrapperStyle,
-							children
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerKeyboardInsetContext.Provider, {
+							value: keyboardInset,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+								style: childrenWrapperStyle,
+								children
+							})
 						}),
-						showScrollToSelected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+						showScrollToSelected && !isKeyboardVisible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
 							style: scrollToSelectedButtonWrapperStyle,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_storybook_react_native_ui_common.Button, {
 								text: "Scroll to selected",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-lite",
-  "version": "10.4.1",
+  "version": "10.4.2-next.0",
   "description": "lightweight ui components for react native storybook",
   "keywords": [
     "react",
@@ -32,8 +32,8 @@
     "@legendapp/list": "3.0.0-beta.38",
     "@nozbe/microfuzz": "^1.0.0",
     "@storybook/react": "^10.3.2",
-    "@storybook/react-native-theming": "^10.4.1",
-    "@storybook/react-native-ui-common": "^10.4.1",
+    "@storybook/react-native-theming": "^10.4.2-next.0",
+    "@storybook/react-native-ui-common": "^10.4.2-next.0",
     "polished": "^4.3.1"
   },
   "devDependencies": {

package/src/DrawerKeyboardInsetContext.tsx

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+
+export const DrawerKeyboardInsetContext = createContext(0);
+
+export const useDrawerKeyboardInset = () => useContext(DrawerKeyboardInsetContext);

package/src/MobileMenuDrawer.tsx

@@ -25,6 +25,7 @@ import {
 } from 'react-native';
 
 import { useSelectedNode } from './SelectedNodeProvider';
+import { DrawerKeyboardInsetContext } from './DrawerKeyboardInsetContext';
 import useAnimatedValue from './useAnimatedValue';
 
 const flexStyle: ViewStyle = { flex: 1 };
@@ -52,68 +53,47 @@ export interface MobileMenuDrawerRef {
 export const useAnimatedModalHeight = () => {
   const { height } = useWindowDimensions();
   const modalHeight = 0.65 * height;
-  const maxModalHeight = 0.85 * height;
-  const [sheetHeight, setSheetHeight] = useState(modalHeight);
-  const [keyboardInset, setKeyboardInset] = useState(0);
-  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
-
-  useEffect(() => {
-    setSheetHeight(modalHeight);
-    setKeyboardInset(0);
-    setIsKeyboardVisible(false);
-  }, [modalHeight]);
+  const maxKeyboardModalHeight = 0.75 * height;
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const isKeyboardVisible = keyboardHeight > 0;
+  const keyboardAvoidanceOffset = isKeyboardVisible
+    ? Math.min(keyboardHeight, maxKeyboardModalHeight - modalHeight)
+    : 0;
+  const sheetHeight = modalHeight + keyboardAvoidanceOffset;
+  const keyboardInset = isKeyboardVisible ? keyboardHeight : 0;
 
   useEffect(() => {
     const expand = (keyboardHeight: number = 0) => {
-      const maxKeyboardOffset = maxModalHeight - modalHeight;
-      const keyboardAvoidanceOffset = Math.min(keyboardHeight, maxKeyboardOffset);
-
-      setIsKeyboardVisible(true);
-      setSheetHeight(modalHeight + keyboardAvoidanceOffset);
-      setKeyboardInset(Math.max(keyboardHeight - keyboardAvoidanceOffset, 0));
+      setKeyboardHeight(keyboardHeight);
     };
 
     const collapse = () => {
-      setSheetHeight(modalHeight);
-      setKeyboardInset(0);
-      setIsKeyboardVisible(false);
-    };
-
-    const handleKeyboardWillShow: KeyboardEventListener = (e) => {
-      if (Platform.OS === 'ios') {
-        expand(e.endCoordinates.height);
-      }
-    };
-
-    const handleKeyboardDidShow: KeyboardEventListener = (e) => {
-      if (Platform.OS === 'android') {
-        expand(e.endCoordinates.height);
-      }
+      setKeyboardHeight(0);
     };
 
-    const handleKeyboardWillHide: KeyboardEventListener = (e) => {
-      if (Platform.OS === 'ios') {
-        collapse();
-      }
+    const handleKeyboardShow: KeyboardEventListener = (e) => {
+      expand(e.endCoordinates.height);
     };
 
-    const handleKeyboardDidHide: KeyboardEventListener = (e) => {
-      if (Platform.OS === 'android') {
-        collapse();
-      }
+    const handleKeyboardHide: KeyboardEventListener = () => {
+      collapse();
     };
 
     const subscriptions = [
-      Keyboard.addListener('keyboardWillShow', handleKeyboardWillShow),
-      Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow),
-      Keyboard.addListener('keyboardWillHide', handleKeyboardWillHide),
-      Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide),
+      Keyboard.addListener(
+        Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
+        handleKeyboardShow
+      ),
+      Keyboard.addListener(
+        Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
+        handleKeyboardHide
+      ),
     ];
 
     return () => {
       subscriptions.forEach((subscription) => subscription.remove());
     };
-  }, [maxModalHeight, modalHeight]);
+  }, []);
 
   return {
     height: sheetHeight,
@@ -271,9 +251,8 @@ export const MobileMenuDrawer = memo(
         () => ({
           flex: 1,
           backgroundColor: theme.background.content,
-          paddingBottom: keyboardInset,
         }),
-        [keyboardInset, theme.background.content]
+        [theme.background.content]
       );
 
       const scrollToSelectedButtonWrapperStyle = useMemo(
@@ -320,8 +299,10 @@ export const MobileMenuDrawer = memo(
                   <View style={handleStyle} />
                 </View>
 
-                <View style={childrenWrapperStyle}>{children}</View>
-                {showScrollToSelected ? (
+                <DrawerKeyboardInsetContext.Provider value={keyboardInset}>
+                  <View style={childrenWrapperStyle}>{children}</View>
+                </DrawerKeyboardInsetContext.Provider>
+                {showScrollToSelected && !isKeyboardVisible ? (
                   <View style={scrollToSelectedButtonWrapperStyle}>
                     <Button
                       text="Scroll to selected"

package/src/SearchResults.tsx

@@ -11,6 +11,7 @@ import type { FC, PropsWithChildren, ReactNode } from 'react';
 import React, { useCallback, useMemo } from 'react';
 import { PressableProps, View, ViewStyle, TextStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useDrawerKeyboardInset } from './DrawerKeyboardInsetContext';
 import { ComponentIcon, StoryIcon } from './icon/iconDataUris';
 
 // Microfuzz highlight types
@@ -218,6 +219,7 @@ export const SearchResults: FC<{
   clearLastViewed,
 }) {
   const insets = useSafeAreaInsets();
+  const drawerKeyboardInset = useDrawerKeyboardInset();
 
   const handleClearLastViewed = useCallback(() => {
     clearLastViewed();
@@ -228,9 +230,9 @@ export const SearchResults: FC<{
     () => ({
       paddingHorizontal: 10,
       paddingTop: 8,
-      paddingBottom: insets.bottom + 20,
+      paddingBottom: insets.bottom + drawerKeyboardInset + 20,
     }),
-    [insets.bottom]
+    [insets.bottom, drawerKeyboardInset]
   );
 
   const listData = useMemo<ListItemType[]>(() => {

package/src/Tree.tsx

@@ -15,6 +15,7 @@ import { View, ViewStyle } from 'react-native';
 import { LegendList, LegendListRef, LegendListRenderItemProps } from './LegendList';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useSelectedNode } from './SelectedNodeProvider';
+import { useDrawerKeyboardInset } from './DrawerKeyboardInsetContext';
 import type {
   ComponentEntry,
   GroupEntry,
@@ -225,6 +226,7 @@ export const Tree = React.memo<{
   const [pendingScrollTarget, setPendingScrollTarget] = useState<PendingScrollTarget | null>(null);
 
   const insets = useSafeAreaInsets();
+  const drawerKeyboardInset = useDrawerKeyboardInset();
   const listRef = useRef<LegendListRef | null>(null);
   // Find top-level nodes and group them so we can hoist any orphans and expand any roots.
   const [rootIds, orphanIds, initialExpanded] = useMemo(
@@ -434,10 +436,10 @@ export const Tree = React.memo<{
   const contentContainerStyle = useMemo(
     () => ({
       marginTop: isMain && orphanIds.length > 0 ? 20 : 0,
-      paddingBottom: insets.bottom + 20,
+      paddingBottom: insets.bottom + drawerKeyboardInset + 20,
       paddingLeft: 6,
     }),
-    [isMain, orphanIds.length, insets.bottom]
+    [isMain, orphanIds.length, insets.bottom, drawerKeyboardInset]
   );
 
   // so we can call the scroll to function in the search component