@storybook/react-native-ui 8.3.1-alpha.0 → 8.3.1-alpha.2

package/dist/index.js

@@ -3132,7 +3132,7 @@ var StoryNode = import_react.default.memo(function StoryNode2({
 
 // src/Tree.tsx
 var import_react_native_theming7 = require("@storybook/react-native-theming");
-var import_react6 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 
 // src/Button.tsx
 var import_react_native_theming3 = require("@storybook/react-native-theming");
@@ -3289,40 +3289,10 @@ var IconButton = (0, import_react3.forwardRef)(
 );
 IconButton.displayName = "IconButton";
 
-// src/LayoutProvider.tsx
-var import_react4 = require("react");
-var import_react_native = require("react-native");
-
-// src/constants.ts
-var BREAKPOINT = 1e3;
-var MEDIA_DESKTOP_BREAKPOINT = `@media (min-width: ${BREAKPOINT}px)`;
-var DEFAULT_REF_ID = "storybook_internal";
-
-// src/LayoutProvider.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var LayoutContext = (0, import_react4.createContext)({
-  isDesktop: false,
-  isMobile: true
-});
-var LayoutProvider = ({ children }) => {
-  const { width } = (0, import_react_native.useWindowDimensions)();
-  const isDesktop = width >= BREAKPOINT;
-  const isMobile = !isDesktop;
-  const contextValue = (0, import_react4.useMemo)(
-    () => ({
-      isDesktop,
-      isMobile
-    }),
-    [isDesktop, isMobile]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LayoutContext.Provider, { value: contextValue, children });
-};
-var useLayout = () => (0, import_react4.useContext)(LayoutContext);
-
 // src/icon/CollapseAllIcon.tsx
 var import_react_native_svg5 = require("react-native-svg");
 var import_react_native_theming4 = require("@storybook/react-native-theming");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var CollapseAllIcon = ({
   color,
   //= '#2E3438',
@@ -3331,7 +3301,7 @@ var CollapseAllIcon = ({
   ...props
 }) => {
   const theme = (0, import_react_native_theming4.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_svg5.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_svg5.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_react_native_svg5.Path,
     {
       d: "M3.354.146a.5.5 0 10-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 00-.708-.708L7 3.793 3.354.146zM6.646 9.146a.5.5 0 01.708 0l4 4a.5.5 0 01-.708.708L7 10.207l-3.646 3.647a.5.5 0 01-.708-.708l4-4z",
@@ -3343,7 +3313,7 @@ var CollapseAllIcon = ({
 // src/icon/ExpandAllIcon.tsx
 var import_react_native_svg6 = require("react-native-svg");
 var import_react_native_theming5 = require("@storybook/react-native-theming");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var ExpandAllIcon = ({
   color,
   //= '#2E3438',
@@ -3352,7 +3322,7 @@ var ExpandAllIcon = ({
   ...props
 }) => {
   const theme = (0, import_react_native_theming5.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_svg6.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_svg6.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_react_native_svg6.Path,
     {
       d: "M7.354.146l4 4a.5.5 0 01-.708.708L7 1.207 3.354 4.854a.5.5 0 11-.708-.708l4-4a.5.5 0 01.708 0zM11.354 9.146a.5.5 0 010 .708l-4 4a.5.5 0 01-.708 0l-4-4a.5.5 0 11.708-.708L7 12.793l3.646-3.647a.5.5 0 01.708 0z",
@@ -3362,10 +3332,17 @@ var ExpandAllIcon = ({
 };
 
 // src/useExpanded.ts
-var import_react5 = require("react");
+var import_react4 = require("react");
 
 // src/util/tree.ts
 var import_memoizerific = __toESM(require("memoizerific"));
+
+// src/constants.ts
+var BREAKPOINT = 1e3;
+var MEDIA_DESKTOP_BREAKPOINT = `@media (min-width: ${BREAKPOINT}px)`;
+var DEFAULT_REF_ID = "storybook_internal";
+
+// src/util/tree.ts
 var createId = (itemId, refId) => !refId || refId === DEFAULT_REF_ID ? itemId : `${refId}_${itemId}`;
 var get = (0, import_memoizerific.default)(1e3)((id, dataset) => dataset[id]);
 var getParent = (0, import_memoizerific.default)(1e3)((id, dataset) => {
@@ -3436,15 +3413,15 @@ var useExpanded = ({
   rootIds,
   selectedStoryId
 }) => {
-  const [expanded, setExpanded] = (0, import_react5.useReducer)(
+  const [expanded, setExpanded] = (0, import_react4.useReducer)(
     (state, { ids, value }) => ids.reduce((acc, id) => Object.assign(acc, { [id]: value }), { ...state }),
     { refId, data, rootIds, initialExpanded },
     initializeExpanded
   );
-  const updateExpanded = (0, import_react5.useCallback)(({ ids, value }) => {
+  const updateExpanded = (0, import_react4.useCallback)(({ ids, value }) => {
     setExpanded({ ids, value });
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     setExpanded({ ids: getAncestorIds(data, selectedStoryId), value: true });
   }, [data, selectedStoryId]);
   return [expanded, updateExpanded];
@@ -3453,16 +3430,16 @@ var useExpanded = ({
 // src/util/status.tsx
 var import_react_native_theming6 = require("@storybook/react-native-theming");
 var import_react_native_svg7 = __toESM(require("react-native-svg"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function CircleIcon({ height = 14, width = 14, color, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_svg7.default, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_svg7.Path, { d: "M14 7A7 7 0 110 7a7 7 0 0114 0z", fill: color }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_svg7.default, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_svg7.Path, { d: "M14 7A7 7 0 110 7a7 7 0 0114 0z", fill: color }) });
 }
 function SmallIcons(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CircleIcon, { width: 6, height: 6, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CircleIcon, { width: 6, height: 6, ...props });
 }
 function LoadingIcons(props) {
   const theme = (0, import_react_native_theming6.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     SmallIcons,
     {
       color: theme.base === "light" ? theme.color.mediumdark : theme.color.darker,
@@ -3473,10 +3450,10 @@ function LoadingIcons(props) {
 var statusPriority = ["unknown", "pending", "success", "warn", "error"];
 var statusMapping = {
   unknown: [null, null],
-  pending: [/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LoadingIcons, {}, "icon"), "currentColor"],
-  success: [/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SmallIcons, { color: "green" }, "icon"), "currentColor"],
-  warn: [/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SmallIcons, { color: "orange" }, "icon"), "#A15C20"],
-  error: [/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SmallIcons, { color: "red" }, "icon"), "brown"]
+  pending: [/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoadingIcons, {}, "icon"), "currentColor"],
+  success: [/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SmallIcons, { color: "green" }, "icon"), "currentColor"],
+  warn: [/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SmallIcons, { color: "orange" }, "icon"), "#A15C20"],
+  error: [/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SmallIcons, { color: "red" }, "icon"), "brown"]
 };
 var getHighestStatus = (statuses) => {
   return statusPriority.reduce(
@@ -3500,11 +3477,11 @@ function getGroupStatus(collapsedData, status) {
 }
 
 // src/Tree.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var TextItem = import_react_native_theming7.styled.Text(({ theme }) => ({
   color: theme.color.defaultText
 }));
-var Node = import_react6.default.memo(function Node2({
+var Node = import_react5.default.memo(function Node2({
   item,
   refId,
   isOrphan,
@@ -3517,14 +3494,13 @@ var Node = import_react6.default.memo(function Node2({
   setExpanded,
   onSelectStoryId
 }) {
-  const { isDesktop } = useLayout();
   if (!isDisplayed) {
     return null;
   }
   const id = createId(item.id, refId);
   if (item.type === "story") {
     const LeafNode2 = StoryNode;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LeafNodeStyleWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LeafNodeStyleWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       LeafNode2,
       {
         selected: isSelected,
@@ -3539,8 +3515,8 @@ var Node = import_react6.default.memo(function Node2({
     ) });
   }
   if (item.type === "root") {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(RootNode, { id, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(RootNode, { id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         CollapseButton,
         {
           "data-action": "collapse-root",
@@ -3550,12 +3526,12 @@ var Node = import_react6.default.memo(function Node2({
           },
           "aria-expanded": isExpanded,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CollapseIcon, { isExpanded }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TextItem, { children: item.renderLabel?.(item, {}) || item.name })
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CollapseIcon, { isExpanded }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextItem, { children: item.renderLabel?.(item, {}) || item.name })
           ]
         }
       ),
-      isExpanded && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      isExpanded && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         IconButton,
         {
           "aria-label": isFullyExpanded ? "Expand" : "Collapse",
@@ -3565,14 +3541,14 @@ var Node = import_react6.default.memo(function Node2({
             event.preventDefault();
             setFullyExpanded();
           },
-          children: isFullyExpanded ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CollapseAllIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ExpandAllIcon, {})
+          children: isFullyExpanded ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CollapseAllIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ExpandAllIcon, {})
         }
       )
     ] }, id);
   }
   if (item.type === "component" || item.type === "group") {
     const BranchNode2 = item.type === "component" ? ComponentNode : GroupNode;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       BranchNode2,
       {
         id,
@@ -3585,8 +3561,6 @@ var Node = import_react6.default.memo(function Node2({
         onPress: (event) => {
           event.preventDefault();
           setExpanded({ ids: [item.id], value: !isExpanded });
-          if (item.type === "component" && !isExpanded && isDesktop)
-            onSelectStoryId(item.id);
         },
         children: item.renderLabel?.(item) || item.name
       },
@@ -3635,9 +3609,9 @@ var CollapseButton = import_react_native_theming7.styled.TouchableOpacity(({}) =
   cursor: "pointer",
   height: 28
 }));
-var Tree = import_react6.default.memo(function Tree2({ isMain, refId, data, status, docsMode, selectedStoryId, onSelectStoryId }) {
-  const containerRef = (0, import_react6.useRef)(null);
-  const [rootIds, orphanIds, initialExpanded] = (0, import_react6.useMemo)(
+var Tree = import_react5.default.memo(function Tree2({ isMain, refId, data, status, docsMode, selectedStoryId, onSelectStoryId }) {
+  const containerRef = (0, import_react5.useRef)(null);
+  const [rootIds, orphanIds, initialExpanded] = (0, import_react5.useMemo)(
     () => Object.keys(data).reduce(
       (acc, id) => {
         const item = data[id];
@@ -3653,7 +3627,7 @@ var Tree = import_react6.default.memo(function Tree2({ isMain, refId, data, stat
     ),
     [data]
   );
-  const { expandableDescendants } = (0, import_react6.useMemo)(() => {
+  const { expandableDescendants } = (0, import_react5.useMemo)(() => {
     return [...orphanIds, ...rootIds].reduce(
       (acc, nodeId) => {
         acc.expandableDescendants[nodeId] = getDescendantIds(data, nodeId, false).filter(
@@ -3664,7 +3638,7 @@ var Tree = import_react6.default.memo(function Tree2({ isMain, refId, data, stat
       { orphansFirst: [], expandableDescendants: {} }
     );
   }, [data, rootIds, orphanIds]);
-  const singleStoryComponentIds = (0, import_react6.useMemo)(() => {
+  const singleStoryComponentIds = (0, import_react5.useMemo)(() => {
     return Object.keys(data).filter((id) => {
       const entry = data[id];
       if (entry.type !== "component")
@@ -3680,12 +3654,12 @@ var Tree = import_react6.default.memo(function Tree2({ isMain, refId, data, stat
       return false;
     });
   }, [data]);
-  const collapsedItems = (0, import_react6.useMemo)(
+  const collapsedItems = (0, import_react5.useMemo)(
     () => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [singleStoryComponentIds]
   );
-  const collapsedData = (0, import_react6.useMemo)(() => {
+  const collapsedData = (0, import_react5.useMemo)(() => {
     return singleStoryComponentIds.reduce(
       (acc, id) => {
         const { children, parent, name } = data[id];
@@ -3706,7 +3680,7 @@ var Tree = import_react6.default.memo(function Tree2({ isMain, refId, data, stat
       { ...data }
     );
   }, [data]);
-  const ancestry = (0, import_react6.useMemo)(() => {
+  const ancestry = (0, import_react5.useMemo)(() => {
     return collapsedItems.reduce(
       (acc, id) => Object.assign(acc, { [id]: getAncestorIds(collapsedData, id) }),
       {}
@@ -3720,15 +3694,15 @@ var Tree = import_react6.default.memo(function Tree2({ isMain, refId, data, stat
     selectedStoryId,
     onSelectStoryId
   });
-  const groupStatus = (0, import_react6.useMemo)(() => getGroupStatus(collapsedData, status), [collapsedData, status]);
-  const treeItems = (0, import_react6.useMemo)(() => {
+  const groupStatus = (0, import_react5.useMemo)(() => getGroupStatus(collapsedData, status), [collapsedData, status]);
+  const treeItems = (0, import_react5.useMemo)(() => {
     return collapsedItems.map((itemId) => {
       const item = collapsedData[itemId];
       const id = createId(itemId, refId);
       if (item.type === "root") {
         const descendants = expandableDescendants[item.id];
         const isFullyExpanded = descendants.every((d) => expanded[d]);
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Root,
           {
             item,
@@ -3750,7 +3724,7 @@ var Tree = import_react6.default.memo(function Tree2({ isMain, refId, data, stat
       }
       const isDisplayed = !item.parent || ancestry[itemId].every((a) => expanded[a]);
       const color = groupStatus[itemId] ? statusMapping[groupStatus[itemId]][1] : null;
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         Node,
         {
           item,
@@ -3783,23 +3757,23 @@ var Tree = import_react6.default.memo(function Tree2({ isMain, refId, data, stat
     setExpanded,
     status
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Container, { ref: containerRef, hasOrphans: isMain && orphanIds.length > 0, children: treeItems });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Container, { ref: containerRef, hasOrphans: isMain && orphanIds.length > 0, children: treeItems });
 });
 var Container = import_react_native_theming7.styled.View((props) => ({
   marginTop: props.hasOrphans ? 20 : 0,
   marginBottom: 20
 }));
-var Root = import_react6.default.memo(function Root2({
+var Root = import_react5.default.memo(function Root2({
   setExpanded,
   isFullyExpanded,
   expandableDescendants,
   ...props
 }) {
-  const setFullyExpanded = (0, import_react6.useCallback)(
+  const setFullyExpanded = (0, import_react5.useCallback)(
     () => setExpanded({ ids: expandableDescendants, value: !isFullyExpanded }),
     [setExpanded, isFullyExpanded, expandableDescendants]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Node,
     {
       ...props,
@@ -3810,6 +3784,29 @@ var Root = import_react6.default.memo(function Root2({
   );
 });
 
+// src/LayoutProvider.tsx
+var import_react6 = require("react");
+var import_react_native = require("react-native");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var LayoutContext = (0, import_react6.createContext)({
+  isDesktop: false,
+  isMobile: true
+});
+var LayoutProvider = ({ children }) => {
+  const { width } = (0, import_react_native.useWindowDimensions)();
+  const isDesktop = width >= BREAKPOINT;
+  const isMobile = !isDesktop;
+  const contextValue = (0, import_react6.useMemo)(
+    () => ({
+      isDesktop,
+      isMobile
+    }),
+    [isDesktop, isMobile]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LayoutContext.Provider, { value: contextValue, children });
+};
+var useLayout = () => (0, import_react6.useContext)(LayoutContext);
+
 // src/Explorer.tsx
 var import_react8 = __toESM(require("react"));
 
@@ -4785,6 +4782,8 @@ var Layout = ({
   const addonPanelRef = (0, import_react17.useRef)(null);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const { isDesktop } = useLayout();
+  const [desktopSidebarOpen, setDesktopSidebarOpen] = (0, import_react17.useState)(true);
+  const [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = (0, import_react17.useState)(true);
   if (isDesktop) {
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       import_react_native8.View,
@@ -4800,36 +4799,56 @@ var Layout = ({
             import_react_native8.View,
             {
               style: {
-                width: 240,
+                width: desktopSidebarOpen ? 240 : void 0,
+                padding: desktopSidebarOpen ? 0 : 10,
                 borderColor: theme.appBorderColor,
                 borderRightWidth: 1
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 import_react_native8.ScrollView,
                 {
                   keyboardShouldPersistTaps: "handled",
                   contentContainerStyle: {
                     paddingBottom: insets.bottom
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime24.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
-                    }
-                  )
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                      import_react_native8.View,
+                      {
+                        style: {
+                          flexDirection: "row",
+                          alignItems: "center",
+                          paddingVertical: 10,
+                          paddingLeft: 16,
+                          paddingRight: 10,
+                          justifyContent: "space-between"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native8.Text, { style: { fontSize: 20, fontWeight: "bold", color: theme.color.defaultText }, children: "Storybook" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native8.View, { style: { flex: 1 }, children: [
@@ -4838,12 +4857,20 @@ var Layout = ({
               import_react_native8.View,
               {
                 style: {
-                  height: 300,
+                  height: desktopAddonsPanelOpen ? 300 : void 0,
                   borderTopWidth: 1,
                   borderColor: theme.appBorderColor,
-                  paddingTop: 4
+                  paddingTop: desktopAddonsPanelOpen ? 4 : 0,
+                  padding: desktopAddonsPanelOpen ? 0 : 10
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AddonsTabs, { storyId: story?.id })
+                children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  IconButton,
+                  {
+                    style: { marginLeft: "auto" },
+                    onPress: () => setDesktopAddonsPanelOpen(true),
+                    Icon: BottomBarToggleIcon
+                  }
+                )
               }
             )
           ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "8.3.1-alpha.0",
+  "version": "8.3.1-alpha.2",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -59,7 +59,7 @@
   "dependencies": {
     "@storybook/core": "^8.3.1",
     "@storybook/react": "^8.3.1",
-    "@storybook/react-native-theming": "^8.3.1-alpha.0",
+    "@storybook/react-native-theming": "^8.3.1-alpha.2",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -80,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bddc79632c24901e83c61b063a46f05e528918a5"
+  "gitHead": "2db7054f47b2addecdb947cba539544be40379e3"
 }

package/src/Layout.tsx

@@ -33,6 +33,10 @@ export const Layout = ({
   const insets = useSafeAreaInsets();
   const { isDesktop } = useLayout();
 
+  const [desktopSidebarOpen, setDesktopSidebarOpen] = useState(true);
+
+  const [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = useState(true);
+
   if (isDesktop) {
     return (
       <View
@@ -45,33 +49,55 @@ export const Layout = ({
       >
         <View
           style={{
-            width: 240,
+            width: desktopSidebarOpen ? 240 : undefined,
+            padding: desktopSidebarOpen ? 0 : 10,
             borderColor: theme.appBorderColor,
             borderRightWidth: 1,
           }}
         >
-          <ScrollView
-            keyboardShouldPersistTaps="handled"
-            contentContainerStyle={{
-              paddingBottom: insets.bottom,
-            }}
-          >
-            <Sidebar
-              extra={[]}
-              previewInitialized
-              indexError={undefined}
-              refs={{}}
-              setSelection={({ storyId: newStoryId }) => {
-                const channel = addons.getChannel();
-
-                channel.emit(SET_CURRENT_STORY, { storyId: newStoryId });
+          {desktopSidebarOpen ? (
+            <ScrollView
+              keyboardShouldPersistTaps="handled"
+              contentContainerStyle={{
+                paddingBottom: insets.bottom,
               }}
-              status={{}}
-              index={storyHash}
-              storyId={story?.id}
-              refId={DEFAULT_REF_ID}
-            />
-          </ScrollView>
+            >
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  paddingVertical: 10,
+                  paddingLeft: 16,
+                  paddingRight: 10,
+                  justifyContent: 'space-between',
+                }}
+              >
+                <Text style={{ fontSize: 20, fontWeight: 'bold', color: theme.color.defaultText }}>
+                  Storybook
+                </Text>
+
+                <IconButton onPress={() => setDesktopSidebarOpen(false)} Icon={MenuIcon} />
+              </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}
+              />
+            </ScrollView>
+          ) : (
+            <IconButton onPress={() => setDesktopSidebarOpen(true)} Icon={MenuIcon} />
+          )}
         </View>
 
         <View style={{ flex: 1 }}>
@@ -79,13 +105,22 @@ export const Layout = ({
 
           <View
             style={{
-              height: 300,
+              height: desktopAddonsPanelOpen ? 300 : undefined,
               borderTopWidth: 1,
               borderColor: theme.appBorderColor,
-              paddingTop: 4,
+              paddingTop: desktopAddonsPanelOpen ? 4 : 0,
+              padding: desktopAddonsPanelOpen ? 0 : 10,
             }}
           >
-            <AddonsTabs storyId={story?.id} />
+            {desktopAddonsPanelOpen ? (
+              <AddonsTabs storyId={story?.id} onClose={() => setDesktopAddonsPanelOpen(false)} />
+            ) : (
+              <IconButton
+                style={{ marginLeft: 'auto' }}
+                onPress={() => setDesktopAddonsPanelOpen(true)}
+                Icon={BottomBarToggleIcon}
+              />
+            )}
           </View>
         </View>
       </View>

package/src/Tree.tsx

@@ -9,7 +9,6 @@ import { styled } from '@storybook/react-native-theming';
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View } from 'react-native';
 import { IconButton } from './IconButton';
-import { useLayout } from './LayoutProvider';
 import { ComponentNode, GroupNode, StoryNode } from './TreeNode';
 import { CollapseAllIcon } from './icon/CollapseAllIcon';
 import { CollapseIcon } from './icon/CollapseIcon';
@@ -53,8 +52,6 @@ export const Node = React.memo<NodeProps>(function Node({
   setExpanded,
   onSelectStoryId,
 }) {
-  const { isDesktop } = useLayout();
-
   if (!isDisplayed) {
     return null;
   }
@@ -127,7 +124,6 @@ export const Node = React.memo<NodeProps>(function Node({
         onPress={(event) => {
           event.preventDefault();
           setExpanded({ ids: [item.id], value: !isExpanded });
-          if (item.type === 'component' && !isExpanded && isDesktop) onSelectStoryId(item.id);
         }}
       >
         {(item.renderLabel as (i: typeof item) => React.ReactNode)?.(item) || item.name}