@storybook/react-native-ui 8.5.4 → 8.5.5-alpha.1

package/dist/index.js

@@ -4742,7 +4742,7 @@ var MobileMenuDrawer = (0, import_react20.memo)(
     const handleIndicatorStyle = (0, import_react20.useMemo)(() => {
       return { backgroundColor: theme.textMutedColor };
     }, [theme.textMutedColor]);
-    const contentContainerStyle = (0, import_react20.useMemo)(() => {
+    const contentContainerStyle2 = (0, import_react20.useMemo)(() => {
       return { paddingBottom: insets.bottom };
     }, [insets.bottom]);
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -4765,7 +4765,7 @@ var MobileMenuDrawer = (0, import_react20.memo)(
           import_bottom_sheet3.BottomSheetScrollView,
           {
             keyboardShouldPersistTaps: "handled",
-            contentContainerStyle,
+            contentContainerStyle: contentContainerStyle2,
             children
           }
         )
@@ -5121,8 +5121,7 @@ var desktopLogoContainer = {
   paddingRight: 10,
   justifyContent: "space-between"
 };
-var desktopContentContainerStyle = { flex: 1 };
-var desktopContentStyle = { flex: 1, overflow: "hidden" };
+var contentContainerStyle = { flex: 1, overflow: "hidden" };
 var mobileContentStyle = { flex: 1, overflow: "hidden" };
 var placeholderObject = {};
 var placeholderArray = [];
@@ -5153,15 +5152,6 @@ var Layout = ({
     true
   );
   const [uiHidden, setUiHidden] = (0, import_react26.useState)(false);
-  const desktopContainerStyle = useStyle(
-    () => ({
-      flex: 1,
-      paddingTop: insets.top,
-      backgroundColor: theme.background.content,
-      flexDirection: "row"
-    }),
-    [theme.background.content, insets.top]
-  );
   const desktopSidebarStyle = useStyle(
     () => ({
       width: desktopSidebarOpen ? 240 : void 0,
@@ -5187,14 +5177,21 @@ var Layout = ({
     }),
     [desktopAddonsPanelOpen, theme.appBorderColor]
   );
-  const mobileContainerStyle = useStyle(
-    () => ({
+  const containerStyle = useStyle(() => {
+    if (isDesktop) {
+      return {
+        flex: 1,
+        paddingTop: insets.top,
+        backgroundColor: theme.background.content,
+        flexDirection: "row"
+      };
+    }
+    return {
       flex: 1,
       paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
       backgroundColor: theme.background.content
-    }),
-    [theme.background.content, insets.top, story?.parameters?.noSafeArea]
-  );
+    };
+  }, [theme.background.content, insets.top, story?.parameters?.noSafeArea, isDesktop]);
   const fullScreenButtonStyle = useStyle(
     () => ({
       position: "absolute",
@@ -5208,7 +5205,7 @@ var Layout = ({
     }),
     [uiHidden, insets.bottom, theme.background.content, theme.appBorderColor]
   );
-  const containerStyle = useStyle(
+  const menuContainerStyle = useStyle(
     () => ({
       marginBottom: insets.bottom
     }),
@@ -5228,61 +5225,54 @@ var Layout = ({
     const channel = import_manager_api2.addons.getChannel();
     channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
   }, []);
-  if (isDesktop) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: desktopContainerStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: desktopSidebarStyle, children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-        import_react_native9.ScrollView,
-        {
-          keyboardShouldPersistTaps: "handled",
-          contentContainerStyle: desktopScrollViewContentContainerStyle,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: desktopLogoContainer, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StorybookLogo, { theme }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-              Sidebar,
-              {
-                extra: placeholderArray,
-                previewInitialized: true,
-                indexError: void 0,
-                refs: placeholderObject,
-                setSelection,
-                status: placeholderObject,
-                index: storyHash,
-                storyId: story?.id,
-                refId: DEFAULT_REF_ID
-              }
-            )
-          ]
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: desktopContentContainerStyle, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: desktopContentStyle, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: desktopAddonsPanelStyle, children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          IconButton,
-          {
-            style: iconFloatRightStyle,
-            onPress: () => setDesktopAddonsPanelOpen(true),
-            Icon: BottomBarToggleIcon
-          }
-        ) })
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: mobileContainerStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: containerStyle, children: [
+    isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: desktopSidebarStyle, children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      import_react_native9.ScrollView,
+      {
+        keyboardShouldPersistTaps: "handled",
+        contentContainerStyle: desktopScrollViewContentContainerStyle,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: desktopLogoContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StorybookLogo, { theme }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            Sidebar,
+            {
+              extra: placeholderArray,
+              previewInitialized: true,
+              indexError: void 0,
+              refs: placeholderObject,
+              setSelection,
+              status: placeholderObject,
+              index: storyHash,
+              storyId: story?.id,
+              refId: DEFAULT_REF_ID
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: mobileContentStyle, children: [
-      children,
-      story?.parameters?.hideFullScreenButton ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: contentContainerStyle, children }),
+      story?.parameters?.hideFullScreenButton || isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         import_react_native9.TouchableOpacity,
         {
           style: fullScreenButtonStyle,
           onPress: () => setUiHidden((prev) => !prev),
           children: uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseFullscreenIcon, { color: theme.color.mediumdark }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FullscreenIcon, { color: theme.color.mediumdark })
         }
-      )
+      ),
+      isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: desktopAddonsPanelStyle, children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        IconButton,
+        {
+          style: iconFloatRightStyle,
+          onPress: () => setDesktopAddonsPanelOpen(true),
+          Icon: BottomBarToggleIcon
+        }
+      ) }) : null
     ] }),
-    !uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Container3, { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Nav, { children: [
+    !uiHidden && !isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Container3, { style: menuContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Nav, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         Button2,
         {
@@ -5309,7 +5299,7 @@ var Layout = ({
         }
       )
     ] }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
+    isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StorybookLogo, { theme }) }),
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         Sidebar,
@@ -5326,7 +5316,7 @@ var Layout = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
+    isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
   ] });
 };
 var Nav = import_react_native_theming17.styled.View({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "8.5.4",
+  "version": "8.5.5-alpha.1",
   "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.4",
+    "@storybook/react-native-theming": "^8.5.5-alpha.1",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bd630c52410fd1d6090e9bb52ecb7ea269e556b8"
+  "gitHead": "24fa3902e20ab6412d60dcf326a3b8aa2c17dce6"
 }

package/src/Layout.tsx

@@ -29,10 +29,7 @@ const desktopLogoContainer = {
   paddingRight: 10,
   justifyContent: 'space-between',
 } satisfies ViewStyle;
-
-const desktopContentContainerStyle = { flex: 1 } satisfies ViewStyle;
-
-const desktopContentStyle = { flex: 1, overflow: 'hidden' } satisfies ViewStyle;
+const contentContainerStyle = { flex: 1, overflow: 'hidden' } satisfies ViewStyle;
 
 const mobileContentStyle = { flex: 1, overflow: 'hidden' } satisfies ViewStyle;
 
@@ -79,16 +76,6 @@ export const Layout = ({
 
   const [uiHidden, setUiHidden] = useState(false);
 
-  const desktopContainerStyle = useStyle(
-    () => ({
-      flex: 1,
-      paddingTop: insets.top,
-      backgroundColor: theme.background.content,
-      flexDirection: 'row',
-    }),
-    [theme.background.content, insets.top]
-  );
-
   const desktopSidebarStyle = useStyle(
     () => ({
       width: desktopSidebarOpen ? 240 : undefined,
@@ -117,14 +104,22 @@ export const Layout = ({
     [desktopAddonsPanelOpen, theme.appBorderColor]
   );
 
-  const mobileContainerStyle = useStyle(
-    () => ({
+  const containerStyle = useStyle(() => {
+    if (isDesktop) {
+      return {
+        flex: 1,
+        paddingTop: insets.top,
+        backgroundColor: theme.background.content,
+        flexDirection: 'row',
+      };
+    }
+
+    return {
       flex: 1,
       paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
       backgroundColor: theme.background.content,
-    }),
-    [theme.background.content, insets.top, story?.parameters?.noSafeArea]
-  );
+    };
+  }, [theme.background.content, insets.top, story?.parameters?.noSafeArea, isDesktop]);
 
   const fullScreenButtonStyle = useStyle(
     () => ({
@@ -140,7 +135,7 @@ export const Layout = ({
     [uiHidden, insets.bottom, theme.background.content, theme.appBorderColor]
   );
 
-  const containerStyle = useStyle(
+  const menuContainerStyle = useStyle(
     () => ({
       marginBottom: insets.bottom,
     }),
@@ -165,9 +160,9 @@ export const Layout = ({
     channel.emit(SET_CURRENT_STORY, { storyId: newStoryId });
   }, []);
 
-  if (isDesktop) {
-    return (
-      <View style={desktopContainerStyle}>
+  return (
+    <View style={containerStyle}>
+      {isDesktop ? (
         <View style={desktopSidebarStyle}>
           {desktopSidebarOpen ? (
             <ScrollView
@@ -196,32 +191,12 @@ export const Layout = ({
             <IconButton onPress={() => setDesktopSidebarOpen(true)} Icon={MenuIcon} />
           )}
         </View>
+      ) : null}
 
-        <View style={desktopContentContainerStyle}>
-          <View style={desktopContentStyle}>{children}</View>
-
-          <View style={desktopAddonsPanelStyle}>
-            {desktopAddonsPanelOpen ? (
-              <AddonsTabs storyId={story?.id} onClose={() => setDesktopAddonsPanelOpen(false)} />
-            ) : (
-              <IconButton
-                style={iconFloatRightStyle}
-                onPress={() => setDesktopAddonsPanelOpen(true)}
-                Icon={BottomBarToggleIcon}
-              />
-            )}
-          </View>
-        </View>
-      </View>
-    );
-  }
-
-  return (
-    <View style={mobileContainerStyle}>
       <View style={mobileContentStyle}>
-        {children}
+        <View style={contentContainerStyle}>{children}</View>
 
-        {story?.parameters?.hideFullScreenButton ? null : (
+        {story?.parameters?.hideFullScreenButton || isDesktop ? null : (
           <TouchableOpacity
             style={fullScreenButtonStyle}
             onPress={() => setUiHidden((prev) => !prev)}
@@ -233,10 +208,24 @@ export const Layout = ({
             )}
           </TouchableOpacity>
         )}
+
+        {isDesktop ? (
+          <View style={desktopAddonsPanelStyle}>
+            {desktopAddonsPanelOpen ? (
+              <AddonsTabs storyId={story?.id} onClose={() => setDesktopAddonsPanelOpen(false)} />
+            ) : (
+              <IconButton
+                style={iconFloatRightStyle}
+                onPress={() => setDesktopAddonsPanelOpen(true)}
+                Icon={BottomBarToggleIcon}
+              />
+            )}
+          </View>
+        ) : null}
       </View>
 
-      {!uiHidden ? (
-        <Container style={containerStyle}>
+      {!uiHidden && !isDesktop ? (
+        <Container style={menuContainerStyle}>
           <Nav>
             <Button
               testID="mobile-menu-button"
@@ -259,25 +248,27 @@ export const Layout = ({
         </Container>
       ) : null}
 
-      <MobileMenuDrawer ref={mobileMenuDrawerRef}>
-        <View style={mobileMenuDrawerContentStyle}>
-          <StorybookLogo theme={theme} />
-        </View>
+      {isDesktop ? null : (
+        <MobileMenuDrawer ref={mobileMenuDrawerRef}>
+          <View style={mobileMenuDrawerContentStyle}>
+            <StorybookLogo theme={theme} />
+          </View>
 
-        <Sidebar
-          extra={placeholderArray}
-          previewInitialized
-          indexError={undefined}
-          refs={placeholderObject}
-          setSelection={setSelection}
-          status={placeholderObject}
-          index={storyHash}
-          storyId={story?.id}
-          refId={DEFAULT_REF_ID}
-        />
-      </MobileMenuDrawer>
-
-      <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />
+          <Sidebar
+            extra={placeholderArray}
+            previewInitialized
+            indexError={undefined}
+            refs={placeholderObject}
+            setSelection={setSelection}
+            status={placeholderObject}
+            index={storyHash}
+            storyId={story?.id}
+            refId={DEFAULT_REF_ID}
+          />
+        </MobileMenuDrawer>
+      )}
+
+      {isDesktop ? null : <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />}
     </View>
   );
 };