@storybook/react-native-ui-lite 10.0.0-beta.9 → 10.0.0-rc.2

package/dist/index.js

@@ -920,7 +920,8 @@ var SearchField = import_react_native_theming5.styled.View({
   position: "relative"
 });
 var Input = (0, import_react_native_theming5.styled)(import_react_native3.TextInput)(({ theme }) => ({
-  height: 32,
+  height: import_react_native3.Platform.OS === "android" ? "auto" : 32,
+  minHeight: 32,
   paddingLeft: 28,
   paddingRight: 28,
   borderWidth: 1,
@@ -1043,7 +1044,15 @@ var Search = import_react8.default.memo(function Search2({ children, dataset, se
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native3.View, { style: { flex: 1 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SearchField, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchIconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchIcon, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Input, { ref: inputRef, onChangeText: setInputValue, onFocus: () => setIsOpen(true) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        Input,
+        {
+          ref: inputRef,
+          onChangeText: setInputValue,
+          onFocus: () => setIsOpen(true),
+          returnKeyType: "search"
+        }
+      ),
       isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         ClearIcon,
         {
@@ -1372,6 +1381,7 @@ function useAnimatedValue(initialValue, config) {
 }
 
 // src/MobileAddonsPanel.tsx
+var import_react_native_safe_area_context = require("react-native-safe-area-context");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var MobileAddonsPanel = (0, import_react13.forwardRef)(
   ({ storyId }, ref) => {
@@ -1450,7 +1460,7 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
           transform: [{ translateY: positionBottomAnimation }]
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react_native7.SafeAreaView,
+          import_react_native7.View,
           {
             style: {
               justifyContent: "flex-end"
@@ -1508,12 +1518,10 @@ var centeredStyle = {
   alignItems: "center",
   justifyContent: "center"
 };
-var scrollContentContainerStyle = {
-  paddingBottom: 16
-};
 var hitSlop = { top: 10, right: 10, bottom: 10, left: 10 };
 var AddonsTabs = ({ onClose, storyId }) => {
   const panels = import_manager_api.addons.getElements(import_types.Addon_TypesEnum.PANEL);
+  const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const [addonSelected, setAddonSelected] = (0, import_react13.useState)(Object.keys(panels)[0]);
   const panel = (0, import_react13.useMemo)(() => {
     if (!storyId) {
@@ -1524,6 +1532,12 @@ var AddonsTabs = ({ onClose, storyId }) => {
     }
     return panels[addonSelected].render({ active: true });
   }, [addonSelected, panels, storyId]);
+  const scrollContentContainerStyle = (0, import_react_native_ui_common6.useStyle)(
+    () => ({
+      paddingBottom: insets.bottom + 16
+    }),
+    [insets]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native7.View, { style: addonsTabsContainerStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native7.View, { style: addonsTabsStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -1652,7 +1666,7 @@ var MobileMenuDrawer = (0, import_react14.memo)(
         transparent: true,
         statusBarTranslucent: true,
         onRequestClose: () => setMobileMenuOpen(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.KeyboardAvoidingView, { behavior: "height", style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native8.SafeAreaView, { style: { justifyContent: "flex-end", flex: 1 }, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native8.KeyboardAvoidingView, { behavior: "height", style: { flex: 1 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.Pressable, { style: { flex: 1 }, onPress: () => setMobileMenuOpen(false) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             import_react_native8.Animated.View,
@@ -1699,7 +1713,7 @@ var MobileMenuDrawer = (0, import_react14.memo)(
               ]
             }
           )
-        ] }) })
+        ] })
       }
     );
   })
@@ -1789,6 +1803,7 @@ var StorybookLogo = ({ theme }) => {
 };
 
 // src/Layout.tsx
+var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var desktopLogoContainer = {
   flexDirection: "row",
@@ -1810,7 +1825,7 @@ var mobileMenuDrawerContentStyle = {
   paddingTop: 4,
   paddingBottom: 4
 };
-var LiteUI = ({ storage, theme, storyHash, story, children }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_theming10.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.StorageProvider, { storage, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.LayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Layout, { storyHash, story, children }) }) }) }) });
+var LiteUI = ({ storage, theme, storyHash, story, children }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_safe_area_context2.SafeAreaProvider, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_theming10.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.StorageProvider, { storage, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.LayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Layout, { storyHash, story, children }) }) }) }) });
 var Layout = ({
   storyHash,
   story,
@@ -1818,6 +1833,7 @@ var Layout = ({
 }) => {
   const theme = (0, import_react_native_theming10.useTheme)();
   const { isDesktop } = (0, import_react_native_ui_common7.useLayout)();
+  const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
   const [desktopSidebarOpen, setDesktopSidebarOpen] = (0, import_react_native_ui_common7.useStoreBooleanState)(
     "desktopSidebarState",
     true
@@ -1857,9 +1873,15 @@ var Layout = ({
     return {
       flex: 1,
       backgroundColor: theme.background.content,
-      paddingVertical: import_react_native10.Platform.OS === "android" ? 32 : 0
+      paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top
     };
   }, [theme.background.content, story?.parameters?.noSafeArea, isDesktop]);
+  const navContainerStyle = (0, import_react_native_ui_common7.useStyle)(
+    () => ({
+      paddingBottom: insets.bottom
+    }),
+    [insets.bottom]
+  );
   const fullScreenButtonStyle = (0, import_react_native_ui_common7.useStyle)(
     () => ({
       position: "absolute",
@@ -1886,7 +1908,7 @@ var Layout = ({
     const channel = import_manager_api2.addons.getChannel();
     channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.SafeAreaView, { style: containerStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.View, { style: containerStyle, children: [
     isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native10.View, { style: desktopSidebarStyle, children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.ScrollView, { keyboardShouldPersistTaps: "handled", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.View, { style: desktopLogoContainer, children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StorybookLogo, { theme }),
@@ -1925,7 +1947,7 @@ var Layout = ({
         }
       ) }) : null
     ] }),
-    !uiHidden && !isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Container3, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Nav, { children: [
+    !uiHidden && !isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Container3, { style: navContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Nav, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         Button2,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-lite",
-  "version": "10.0.0-beta.9",
+  "version": "10.0.0-rc.2",
   "description": "lightweight ui components for react native storybook",
   "keywords": [
     "react",
@@ -58,18 +58,19 @@
     "typescript": "~5.9.2"
   },
   "dependencies": {
-    "@storybook/react": "10.0.0-beta.9",
-    "@storybook/react-native-theming": "^10.0.0-beta.9",
-    "@storybook/react-native-ui-common": "^10.0.0-beta.9",
+    "@storybook/react": "10.0.0",
+    "@storybook/react-native-theming": "^10.0.0-rc.2",
+    "@storybook/react-native-ui-common": "^10.0.0-rc.2",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
+    "react-native-safe-area-context": "^5",
     "store2": "^2.14.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": ">=0.57.0",
-    "storybook": ">=10 || 10.0.0-beta.0 || ^10"
+    "storybook": ">=10 || 10.0.0-rc.1 || ^10"
   },
   "engines": {
     "node": ">=20.0.0"
@@ -77,5 +78,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "abd5ecb65efafee8881b1f8c6ab6254586db694d"
+  "gitHead": "5cf63a3b01979f229638feb68a6b4131b9e67cd3"
 }

package/src/Layout.tsx

@@ -11,15 +11,7 @@ import {
   useStyle,
 } from '@storybook/react-native-ui-common';
 import { ReactElement, ReactNode, useCallback, useRef, useState } from 'react';
-import {
-  Platform,
-  SafeAreaView,
-  ScrollView,
-  Text,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { Platform, ScrollView, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
 import { SET_CURRENT_STORY } from 'storybook/internal/core-events';
 import { addons } from 'storybook/manager-api';
 import { type API_IndexHash } from 'storybook/internal/types';
@@ -35,6 +27,7 @@ import {
   FullscreenIcon,
   MenuIcon,
 } from './icon/iconDataUris';
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const desktopLogoContainer = {
   flexDirection: 'row',
@@ -65,9 +58,8 @@ const mobileMenuDrawerContentStyle = {
 } satisfies ViewStyle;
 
 export const LiteUI: SBUI = ({ storage, theme, storyHash, story, children }): ReactElement => (
-  <>
+  <SafeAreaProvider style={{ flex: 1 }}>
     <ThemeProvider theme={theme}>
-      {/* @ts-ignore something weird with story type */}
       <StorageProvider storage={storage}>
         <LayoutProvider>
           <Layout storyHash={storyHash} story={story}>
@@ -76,7 +68,7 @@ export const LiteUI: SBUI = ({ storage, theme, storyHash, story, children }): Re
         </LayoutProvider>
       </StorageProvider>
     </ThemeProvider>
-  </>
+  </SafeAreaProvider>
 );
 
 export const Layout = ({
@@ -92,6 +84,8 @@ export const Layout = ({
 
   const { isDesktop } = useLayout();
 
+  const insets = useSafeAreaInsets();
+
   const [desktopSidebarOpen, setDesktopSidebarOpen] = useStoreBooleanState(
     'desktopSidebarState',
     true
@@ -137,10 +131,17 @@ export const Layout = ({
     return {
       flex: 1,
       backgroundColor: theme.background.content,
-      paddingVertical: Platform.OS === 'android' ? 32 : 0,
+      paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
     };
   }, [theme.background.content, story?.parameters?.noSafeArea, isDesktop]);
 
+  const navContainerStyle = useStyle(
+    () => ({
+      paddingBottom: insets.bottom,
+    }),
+    [insets.bottom]
+  );
+
   const fullScreenButtonStyle = useStyle(
     () => ({
       position: 'absolute',
@@ -173,7 +174,7 @@ export const Layout = ({
   }, []);
 
   return (
-    <SafeAreaView style={containerStyle}>
+    <View style={containerStyle}>
       {isDesktop ? (
         <View style={desktopSidebarStyle}>
           {desktopSidebarOpen ? (
@@ -233,7 +234,7 @@ export const Layout = ({
       </View>
 
       {!uiHidden && !isDesktop ? (
-        <Container>
+        <Container style={navContainerStyle}>
           <Nav>
             <Button
               testID="mobile-menu-button"
@@ -278,7 +279,7 @@ export const Layout = ({
       )}
 
       {isDesktop ? null : <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />}
-    </SafeAreaView>
+    </View>
   );
 };
 

package/src/MobileAddonsPanel.tsx

@@ -1,12 +1,11 @@
 import { styled, useTheme } from '@storybook/react-native-theming';
-import { IconButton } from '@storybook/react-native-ui-common';
+import { IconButton, useStyle } from '@storybook/react-native-ui-common';
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import {
   Animated,
   Easing,
   Keyboard,
   Platform,
-  SafeAreaView,
   ScrollView,
   StyleProp,
   Text,
@@ -18,6 +17,7 @@ import { addons } from 'storybook/manager-api';
 import { Addon_TypesEnum } from 'storybook/internal/types';
 import { CloseIcon } from './icon/iconDataUris';
 import useAnimatedValue from './useAnimatedValue';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export interface MobileAddonsPanelRef {
   setAddonsPanelOpen: (isOpen: boolean) => void;
@@ -110,7 +110,7 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: st
           transform: [{ translateY: positionBottomAnimation }],
         }}
       >
-        <SafeAreaView
+        <View
           style={{
             justifyContent: 'flex-end',
           }}
@@ -132,7 +132,7 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: st
               storyId={storyId}
             />
           </View>
-        </SafeAreaView>
+        </View>
       </Animated.View>
     );
   }
@@ -170,14 +170,11 @@ const centeredStyle = {
   justifyContent: 'center',
 } satisfies StyleProp<ViewStyle>;
 
-const scrollContentContainerStyle = {
-  paddingBottom: 16,
-} satisfies StyleProp<ViewStyle>;
 const hitSlop = { top: 10, right: 10, bottom: 10, left: 10 };
 
 export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId?: string }) => {
   const panels = addons.getElements(Addon_TypesEnum.PANEL);
-
+  const insets = useSafeAreaInsets();
   const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0]);
 
   const panel = useMemo(() => {
@@ -200,6 +197,13 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
     return panels[addonSelected].render({ active: true });
   }, [addonSelected, panels, storyId]);
 
+  const scrollContentContainerStyle = useStyle(
+    () => ({
+      paddingBottom: insets.bottom + 16,
+    }),
+    [insets]
+  );
+
   return (
     <View style={addonsTabsContainerStyle}>
       <View style={addonsTabsStyle}>

package/src/MobileMenuDrawer.tsx

@@ -8,11 +8,9 @@ import {
   PanResponder,
   PanResponderInstance,
   Pressable,
-  SafeAreaView,
   ScrollView,
   View,
 } from 'react-native';
-
 import { useSelectedNode } from './SelectedNodeProvider';
 import useAnimatedValue from './useAnimatedValue';
 
@@ -98,51 +96,49 @@ export const MobileMenuDrawer = memo(
         onRequestClose={() => setMobileMenuOpen(false)}
       >
         <KeyboardAvoidingView behavior="height" style={{ flex: 1 }}>
-          <SafeAreaView style={{ justifyContent: 'flex-end', flex: 1 }}>
-            <View style={{ flex: 1 }}>
-              <Pressable style={{ flex: 1 }} onPress={() => setMobileMenuOpen(false)}></Pressable>
-            </View>
+          <View style={{ flex: 1 }}>
+            <Pressable style={{ flex: 1 }} onPress={() => setMobileMenuOpen(false)}></Pressable>
+          </View>
 
-            <Animated.View
-              style={[
-                {
-                  height: '65%',
-                  borderTopColor: theme.appBorderColor,
-                  borderTopWidth: 1,
-                  borderStyle: 'solid',
-                  backgroundColor: theme.background.content,
-                  elevation: 8,
-                },
-                { transform: [{ translateY: dragY }] },
-              ]}
+          <Animated.View
+            style={[
+              {
+                height: '65%',
+                borderTopColor: theme.appBorderColor,
+                borderTopWidth: 1,
+                borderStyle: 'solid',
+                backgroundColor: theme.background.content,
+                elevation: 8,
+              },
+              { transform: [{ translateY: dragY }] },
+            ]}
+          >
+            {/* Drag handle */}
+            <View
+              {...panResponder.panHandlers}
+              style={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: theme.background.content,
+              }}
             >
-              {/* Drag handle */}
-              <View
-                {...panResponder.panHandlers}
-                style={{
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  backgroundColor: theme.background.content,
-                }}
-              >
-                <View style={handleStyle} />
-              </View>
+              <View style={handleStyle} />
+            </View>
 
-              <ScrollView
-                ref={scrollRef}
-                keyboardShouldPersistTaps="handled"
-                style={{
-                  flex: 1,
-                  paddingBottom: 150,
-                  alignSelf: 'flex-end',
-                  width: '100%',
-                  backgroundColor: theme.background.content,
-                }}
-              >
-                {children}
-              </ScrollView>
-            </Animated.View>
-          </SafeAreaView>
+            <ScrollView
+              ref={scrollRef}
+              keyboardShouldPersistTaps="handled"
+              style={{
+                flex: 1,
+                paddingBottom: 150,
+                alignSelf: 'flex-end',
+                width: '100%',
+                backgroundColor: theme.background.content,
+              }}
+            >
+              {children}
+            </ScrollView>
+          </Animated.View>
         </KeyboardAvoidingView>
       </Modal>
     );

package/src/Search.tsx

@@ -2,7 +2,7 @@ import { styled } from '@storybook/react-native-theming';
 import type { IFuseOptions } from 'fuse.js';
 import Fuse from 'fuse.js';
 import React, { useCallback, useDeferredValue, useRef, useState } from 'react';
-import { TextInput, View } from 'react-native';
+import { Platform, TextInput, View } from 'react-native';
 import { useSelectedNode } from './SelectedNodeProvider';
 import {
   type CombinedDataset,
@@ -54,7 +54,8 @@ const SearchField = styled.View({
 });
 
 const Input = styled(TextInput)(({ theme }) => ({
-  height: 32,
+  height: Platform.OS === 'android' ? 'auto' : 32,
+  minHeight: 32,
   paddingLeft: 28,
   paddingRight: 28,
   borderWidth: 1,
@@ -207,7 +208,12 @@ export const Search = React.memo<{
           <SearchIcon />
         </SearchIconWrapper>
 
-        <Input ref={inputRef} onChangeText={setInputValue} onFocus={() => setIsOpen(true)} />
+        <Input
+          ref={inputRef}
+          onChangeText={setInputValue}
+          onFocus={() => setIsOpen(true)}
+          returnKeyType="search"
+        />
 
         {isOpen && (
           <ClearIcon

package/src/SearchResults.stories.tsx

@@ -30,6 +30,8 @@ export const Default: Story = {
           refId: 'storybook_internal',
           path: ['NestingExample', 'Message', 'bubble'],
           status: null,
+          subtype: 'story',
+          exportName: 'First',
         },
         refIndex: 46,
         matches: [
@@ -86,6 +88,8 @@ export const Default: Story = {
         refId: 'storybook_internal',
         path: ['NestingExample', 'Message', 'bubble'],
         status: null,
+        subtype: 'story',
+        exportName: 'First',
       },
       matches: [
         {

package/src/Tree.stories.tsx

@@ -105,8 +105,10 @@ export const SingleStoryComponents: Story = {
               args: {},
               argTypes: {},
               initialArgs: {},
+              exportName: 'Single',
               depth: 1,
               parent: 'single',
+              subtype: 'story',
               renderLabel: () => <Text>🔥 Single</Text>,
               importPath: './single.stories.js',
             },