@storybook/react-native-ui 10.4.4 → 10.5.0-canary-20260606223917

package/dist/index.js

@@ -37,8 +37,8 @@ let _gorhom_portal = require("@gorhom/portal");
 let react_native_gesture_handler = require("react-native-gesture-handler");
 let react_native_safe_area_context = require("react-native-safe-area-context");
 let storybook_internal_core_events = require("storybook/internal/core-events");
-let storybook_manager_api = require("storybook/manager-api");
 let storybook_internal_types = require("storybook/internal/types");
+let storybook_manager_api = require("storybook/manager-api");
 let react_native_reanimated = require("react-native-reanimated");
 react_native_reanimated = __toESM(react_native_reanimated);
 //#region src/icon/ComponentIcon.tsx
@@ -1133,7 +1133,7 @@ const MenuIcon = ({ color = "currentColor", width = 14, height = 14, ...props })
 //#region src/MobileAddonsPanel.tsx
 const bottomSheetStyle = { paddingTop: 8 };
 const contentStyle = { flex: 1 };
-const MobileAddonsPanel = (0, react.forwardRef)(({ storyId }, ref) => {
+const MobileAddonsPanel = (0, react.forwardRef)(({ storyId, parameters }, ref) => {
 	const theme = (0, _storybook_react_native_theming.useTheme)();
 	const reducedMotion = (0, react_native_reanimated.useReducedMotion)();
 	const addonsPanelBottomSheetRef = (0, react.useRef)(null);
@@ -1188,7 +1188,8 @@ const MobileAddonsPanel = (0, react.forwardRef)(({ storyId }, ref) => {
 				onClose: () => {
 					addonsPanelBottomSheetRef.current?.dismiss();
 				},
-				storyId
+				storyId,
+				parameters
 			})
 		})
 	});
@@ -1219,14 +1220,18 @@ const hitSlop = {
 	bottom: 10,
 	left: 10
 };
-const AddonsTabs = ({ onClose, storyId }) => {
-	const panels = storybook_manager_api.addons.getElements(storybook_internal_types.Addon_TypesEnum.PANEL);
+const AddonsTabs = ({ onClose, storyId, parameters }) => {
+	const panels = (0, react.useMemo)(() => {
+		const allPanels = storybook_manager_api.addons.getElements(storybook_internal_types.Addon_TypesEnum.PANEL);
+		return Object.fromEntries(Object.entries(allPanels).filter(([, p]) => !p.paramKey || !parameters?.[p.paramKey]?.disable));
+	}, [parameters]);
 	const [addonSelected, setAddonSelected] = (0, react.useState)(Object.keys(panels)[0]);
 	const insets = (0, react_native_safe_area_context.useSafeAreaInsets)();
 	const scrollContentContainerStyle = (0, _storybook_react_native_ui_common.useStyle)(() => {
 		return { paddingBottom: insets.bottom + 16 };
 	});
 	const panelEntries = (0, react.useMemo)(() => Object.entries(panels), [panels]);
+	const activeAddonId = panels[addonSelected] ? addonSelected : panelEntries[0]?.[0];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
 		style: addonsTabsContainerStyle,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
@@ -1238,7 +1243,7 @@ const AddonsTabs = ({ onClose, storyId }) => {
 				children: Object.values(panels).map(({ id, title }) => {
 					const resolvedTitle = typeof title === "function" ? title({}) : title;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tab, {
-						active: id === addonSelected,
+						active: id === activeAddonId,
 						onPress: () => setAddonSelected(id),
 						text: String(resolvedTitle)
 					}, id);
@@ -1259,7 +1264,7 @@ const AddonsTabs = ({ onClose, storyId }) => {
 				style: centeredStyle,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, { children: "No addons loaded." })
 			}) : panelEntries.map(([id, p]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-				style: id === addonSelected ? void 0 : hiddenStyle,
+				style: id === activeAddonId ? void 0 : hiddenStyle,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PanelRenderer, { panel: p })
 			}, id))
 		})]
@@ -1607,6 +1612,10 @@ const Layout = ({ storyHash, story, storyBackgroundColor, children }) => {
 	const { isDesktop } = (0, _storybook_react_native_ui_common.useLayout)();
 	const [desktopSidebarOpen, setDesktopSidebarOpen] = (0, _storybook_react_native_ui_common.useStoreBooleanState)("desktopSidebarState", true);
 	const [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = (0, _storybook_react_native_ui_common.useStoreBooleanState)("desktopPanelState", true);
+	const hasEnabledPanels = (0, react.useMemo)(() => {
+		const allPanels = storybook_manager_api.addons.getElements(storybook_internal_types.Addon_TypesEnum.PANEL);
+		return Object.values(allPanels).some((p) => !p.paramKey || !story?.parameters?.[p.paramKey]?.disable);
+	}, [story?.parameters]);
 	const [uiHidden, setUiHidden] = (0, react.useState)(false);
 	(0, react.useLayoutEffect)(() => {
 		setUiHidden(story?.parameters?.storybookUIVisibility === "hidden");
@@ -1716,10 +1725,11 @@ const Layout = ({ storyHash, story, storyBackgroundColor, children }) => {
 						onPress: () => setUiHidden((prev) => !prev),
 						children: uiHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseFullscreenIcon, { color: theme.color.mediumdark }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FullscreenIcon, { color: theme.color.mediumdark })
 					}),
-					isDesktop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+					isDesktop && hasEnabledPanels ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
 						style: desktopAddonsPanelStyle,
 						children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddonsTabs, {
 							storyId: story?.id,
+							parameters: story?.parameters,
 							onClose: () => setDesktopAddonsPanelOpen(false)
 						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_storybook_react_native_ui_common.IconButton, {
 							style: iconFloatRightStyle,
@@ -1745,7 +1755,7 @@ const Layout = ({ storyHash, story, storyBackgroundColor, children }) => {
 							story?.name
 						]
 					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_storybook_react_native_ui_common.IconButton, {
+				}), hasEnabledPanels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_storybook_react_native_ui_common.IconButton, {
 					testID: "mobile-addons-button",
 					onPress: () => addonPanelRef.current.setAddonsPanelOpen(true),
 					Icon: BottomBarToggleIcon
@@ -1767,9 +1777,10 @@ const Layout = ({ storyHash, story, storyBackgroundColor, children }) => {
 					refId: DEFAULT_REF_ID
 				})]
 			}) }) : null,
-			!isDesktop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileAddonsPanel, {
+			!isDesktop && hasEnabledPanels ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileAddonsPanel, {
 				ref: addonPanelRef,
-				storyId: story?.id
+				storyId: story?.id,
+				parameters: story?.parameters
 			}) : null
 		]
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "10.4.4",
+  "version": "10.5.0-canary-20260606223917",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -30,14 +30,14 @@
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
     "@nozbe/microfuzz": "^1.0.0",
-    "@storybook/react": "^10.4.0",
-    "@storybook/react-native-theming": "^10.4.4",
-    "@storybook/react-native-ui-common": "^10.4.4",
+    "@storybook/react": "^10.4.2",
+    "@storybook/react-native-theming": "10.5.0-canary-20260606223917",
+    "@storybook/react-native-ui-common": "10.5.0-canary-20260606223917",
     "polished": "^4.3.1"
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
-    "storybook": "^10.4.0",
+    "storybook": "^10.4.2",
     "tsdown": "^0.22.0",
     "typescript": "~6.0.3"
   },

package/src/Layout.tsx

@@ -11,13 +11,18 @@ import {
   useStyle,
   type SBUI,
 } from '@storybook/react-native-ui-common';
-import { ReactNode, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { ReactNode, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { ScrollView, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { SET_CURRENT_STORY } from 'storybook/internal/core-events';
 import type { Args, StoryContext } from 'storybook/internal/csf';
-import type { API_IndexHash } from 'storybook/internal/types';
+import {
+  Addon_TypesEnum,
+  type Addon_BaseType,
+  type Addon_Collection,
+  type API_IndexHash,
+} from 'storybook/internal/types';
 import { addons } from 'storybook/manager-api';
 import { DEFAULT_REF_ID } from './constants';
 import { BottomBarToggleIcon } from './icon/BottomBarToggleIcon';
@@ -117,6 +122,14 @@ export const Layout = ({
     true
   );
 
+  const hasEnabledPanels = useMemo(() => {
+    const allPanels: Addon_Collection<Addon_BaseType> = addons.getElements(Addon_TypesEnum.PANEL);
+
+    return Object.values(allPanels).some(
+      (p) => !p.paramKey || !story?.parameters?.[p.paramKey]?.disable
+    );
+  }, [story?.parameters]);
+
   const [uiHidden, setUiHidden] = useState(false);
 
   useLayoutEffect(() => {
@@ -270,10 +283,14 @@ export const Layout = ({
           </TouchableOpacity>
         )}
 
-        {isDesktop ? (
+        {isDesktop && hasEnabledPanels ? (
           <View style={desktopAddonsPanelStyle}>
             {desktopAddonsPanelOpen ? (
-              <AddonsTabs storyId={story?.id} onClose={() => setDesktopAddonsPanelOpen(false)} />
+              <AddonsTabs
+                storyId={story?.id}
+                parameters={story?.parameters}
+                onClose={() => setDesktopAddonsPanelOpen(false)}
+              />
             ) : (
               <IconButton
                 style={iconFloatRightStyle}
@@ -300,11 +317,13 @@ export const Layout = ({
               </Text>
             </Button>
 
-            <IconButton
-              testID="mobile-addons-button"
-              onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
-              Icon={BottomBarToggleIcon}
-            />
+            {hasEnabledPanels && (
+              <IconButton
+                testID="mobile-addons-button"
+                onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
+                Icon={BottomBarToggleIcon}
+              />
+            )}
           </Nav>
         </Container>
       ) : null}
@@ -330,7 +349,9 @@ export const Layout = ({
         </SelectedNodeProvider>
       ) : null}
 
-      {!isDesktop ? <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} /> : null}
+      {!isDesktop && hasEnabledPanels ? (
+        <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} parameters={story?.parameters} />
+      ) : null}
     </View>
   );
 };

package/src/MobileAddonsPanel.tsx

@@ -1,6 +1,7 @@
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import { addons } from 'storybook/manager-api';
 import { styled, useTheme } from '@storybook/react-native-theming';
+import type { Parameters } from 'storybook/internal/csf';
 import {
   Addon_TypesEnum,
   type Addon_BaseType,
@@ -31,8 +32,10 @@ const contentStyle = {
   flex: 1,
 } satisfies StyleProp<ViewStyle>;
 
-export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: string }>(
-  ({ storyId }, ref) => {
+type MobileAddonsPanelProps = { storyId?: string; parameters?: Parameters };
+
+export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, MobileAddonsPanelProps>(
+  ({ storyId, parameters }, ref) => {
     const theme = useTheme();
     const reducedMotion = useReducedMotion();
 
@@ -103,6 +106,7 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: st
               addonsPanelBottomSheetRef.current?.dismiss();
             }}
             storyId={storyId}
+            parameters={parameters}
           />
         </Animated.View>
       </BottomSheetModal>
@@ -148,8 +152,22 @@ const hiddenStyle = {
 
 const hitSlop = { top: 10, right: 10, bottom: 10, left: 10 };
 
-export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId?: string }) => {
-  const panels: Addon_Collection<Addon_BaseType> = addons.getElements(Addon_TypesEnum.PANEL);
+export const AddonsTabs = ({
+  onClose,
+  storyId,
+  parameters,
+}: {
+  onClose?: () => void;
+  storyId?: string;
+  parameters?: Parameters;
+}) => {
+  const panels = useMemo<Addon_Collection<Addon_BaseType>>(() => {
+    const allPanels: Addon_Collection<Addon_BaseType> = addons.getElements(Addon_TypesEnum.PANEL);
+
+    return Object.fromEntries(
+      Object.entries(allPanels).filter(([, p]) => !p.paramKey || !parameters?.[p.paramKey]?.disable)
+    );
+  }, [parameters]);
 
   const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0]);
 
@@ -162,6 +180,7 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
   });
 
   const panelEntries = useMemo(() => Object.entries(panels), [panels]);
+  const activeAddonId = panels[addonSelected] ? addonSelected : panelEntries[0]?.[0];
 
   return (
     <View style={addonsTabsContainerStyle}>
@@ -177,7 +196,7 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
             return (
               <Tab
                 key={id}
-                active={id === addonSelected}
+                active={id === activeAddonId}
                 onPress={() => setAddonSelected(id)}
                 text={String(resolvedTitle)}
               />
@@ -207,7 +226,7 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
           </View>
         ) : (
           panelEntries.map(([id, p]) => (
-            <View key={id} style={id === addonSelected ? undefined : hiddenStyle}>
+            <View key={id} style={id === activeAddonId ? undefined : hiddenStyle}>
               <PanelRenderer panel={p} />
             </View>
           ))

package/src/MobileMenuDrawer.tsx

@@ -13,7 +13,7 @@ import {
   useMemo,
   useRef,
 } from 'react';
-import { Keyboard, Platform } from 'react-native';
+import { Keyboard, Platform, type ViewStyle } from 'react-native';
 import { useAnimatedStyle, useReducedMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useSelectedNode } from './SelectedNodeProvider';
@@ -44,7 +44,7 @@ export const BottomSheetBackdropComponent = (backdropComponentProps: BottomSheet
       pressBehavior={'close'}
       style={[
         backdropComponentProps.style,
-        androidTouchEventFix,
+        androidTouchEventFix as unknown as ViewStyle,
         {
           backgroundColor: 'rgba(0,0,0,0.5)',
           paddingTop: Platform.OS === 'android' ? 1 : undefined,