@storybook/react-native-ui-lite 10.4.7 → 10.4.8-canary-20260711115827

package/dist/index.d.ts

@@ -5,7 +5,6 @@ import { State, StoriesHash } from "storybook/manager-api";
 import { API_IndexHash, API_LoadedRefData } from "storybook/internal/types";
 import { ReactRenderer } from "@storybook/react";
 import { Args, StoryContext } from "storybook/internal/csf";
-
 //#region src/TreeNode.d.ts
 interface NodeProps {
   children: React.ReactNode | React.ReactNode[];
@@ -106,26 +105,11 @@ interface SidebarProps extends API_LoadedRefData {
   setSelection: (selection: Selection) => void;
   onSearchActiveChange?: (active: boolean) => void;
 }
-declare const Sidebar: React.MemoExoticComponent<({
-  storyId,
-  refId,
-  index,
-  indexError,
-  status,
-  previewInitialized,
-  refs,
-  setSelection,
-  onSearchActiveChange
-}: SidebarProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Sidebar: React.MemoExoticComponent<({ storyId, refId, index, indexError, status, previewInitialized, refs, setSelection, onSearchActiveChange }: SidebarProps) => import("react/jsx-runtime").JSX.Element>;
 //#endregion
 //#region src/Layout.d.ts
 declare const LiteUI: SBUI;
-declare const Layout: ({
-  storyHash,
-  story,
-  storyBackgroundColor,
-  children
-}: {
+declare const Layout: ({ storyHash, story, storyBackgroundColor, children }: {
   storyHash: API_IndexHash | undefined;
   story?: StoryContext<ReactRenderer, Args>;
   storyBackgroundColor?: string;

package/dist/index.js

@@ -694,8 +694,9 @@ const Tree = react.default.memo(function Tree({ isMain, refId, data, status, doc
 	(0, react.useLayoutEffect)(() => {
 		registerCallback(({ id: nextId, animated }) => {
 			const targetId = nextId ?? selectedStoryId;
+			const ancestorIds = (0, _storybook_react_native_ui_common.getAncestorIds)(collapsedData, targetId);
 			setExpanded({
-				ids: [...(0, _storybook_react_native_ui_common.getAncestorIds)(collapsedData, targetId), targetId],
+				ids: [...ancestorIds, targetId],
 				value: true
 			});
 			setPendingScrollTarget({
@@ -1164,46 +1165,47 @@ const SearchResults = react.default.memo(function SearchResults({ query, results
 			}
 		}
 	}, []);
+	const renderItem = (0, react.useCallback)(({ item: listItem }) => {
+		switch (listItem.type) {
+			case "header": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RecentlyOpenedTitle, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text$3, { children: "Recently opened" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_storybook_react_native_ui_common.IconButton, {
+				onPress: listItem.clearLastViewed,
+				accessibilityLabel: "Clear recently opened"
+			})] });
+			case "noResults": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NoResults, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NoResultsText, {
+				style: noResultsFirstLineStyle,
+				children: "No components found"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NoResultsText, { children: "Find components by name or path." })] });
+			case "expand": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoreWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_storybook_react_native_ui_common.Button, {
+				...listItem.result,
+				...getItemProps({
+					key: `${listItem.index}`,
+					index: listItem.index,
+					item: listItem.result
+				}),
+				size: "small",
+				text: `Show ${listItem.result.moreCount} more results`
+			}) });
+			case "result": {
+				const { item: resultItem } = listItem.result;
+				const key = `${resultItem.refId}::${resultItem.id}`;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Result, {
+					...listItem.result,
+					...getItemProps({
+						key,
+						index: listItem.index,
+						item: listItem.result
+					}),
+					isHighlighted: highlightedIndex === listItem.index
+				});
+			}
+		}
+	}, [getItemProps, highlightedIndex]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
 		style: flexStyle$3,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_legendapp_list_react_native.LegendList, {
 			style: flexStyle$3,
 			data: listData,
-			renderItem: (0, react.useCallback)(({ item: listItem }) => {
-				switch (listItem.type) {
-					case "header": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RecentlyOpenedTitle, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text$3, { children: "Recently opened" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_storybook_react_native_ui_common.IconButton, {
-						onPress: listItem.clearLastViewed,
-						accessibilityLabel: "Clear recently opened"
-					})] });
-					case "noResults": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NoResults, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NoResultsText, {
-						style: noResultsFirstLineStyle,
-						children: "No components found"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NoResultsText, { children: "Find components by name or path." })] });
-					case "expand": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoreWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_storybook_react_native_ui_common.Button, {
-						...listItem.result,
-						...getItemProps({
-							key: `${listItem.index}`,
-							index: listItem.index,
-							item: listItem.result
-						}),
-						size: "small",
-						text: `Show ${listItem.result.moreCount} more results`
-					}) });
-					case "result": {
-						const { item: resultItem } = listItem.result;
-						const key = `${resultItem.refId}::${resultItem.id}`;
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Result, {
-							...listItem.result,
-							...getItemProps({
-								key,
-								index: listItem.index,
-								item: listItem.result
-							}),
-							isHighlighted: highlightedIndex === listItem.index
-						});
-					}
-				}
-			}, [getItemProps, highlightedIndex]),
+			renderItem,
 			keyExtractor,
 			contentContainerStyle,
 			estimatedItemSize: 50,
@@ -1486,11 +1488,15 @@ const PanelRenderer = ({ panel }) => {
 	return panel.render({ active: true });
 };
 const Tab = ({ active, onPress, text }) => {
+	const testID = `addon-tab-${text.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabButton, {
 		active,
 		onPress,
+		testID,
+		accessible: true,
 		accessibilityRole: "tab",
 		accessibilityState: { selected: active },
+		accessibilityLabel: text,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabText, {
 			active,
 			children: text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-lite",
-  "version": "10.4.7",
+  "version": "10.4.8-canary-20260711115827",
   "description": "lightweight ui components for react native storybook",
   "keywords": [
     "react",
@@ -29,18 +29,18 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
+    "@legendapp/list": "^3.3.2",
     "@nozbe/microfuzz": "^1.0.0",
-    "@legendapp/list": "^3.0.6",
-    "@storybook/react": "^10.4.6",
-    "@storybook/react-native-theming": "^10.4.7",
-    "@storybook/react-native-ui-common": "^10.4.7",
+    "@storybook/react": "^10.5.0",
+    "@storybook/react-native-theming": "10.4.8-canary-20260711115827",
+    "@storybook/react-native-ui-common": "10.4.8-canary-20260711115827",
     "polished": "^4.3.1"
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
-    "storybook": "^10.4.6",
+    "storybook": "^10.5.0",
     "ts-dedent": "^2.3.0",
-    "tsdown": "^0.22.3",
+    "tsdown": "^0.22.4",
     "typescript": "~6.0.3"
   },
   "peerDependencies": {

package/src/Layout.tsx

@@ -173,6 +173,7 @@ export const Layout = ({
   const [uiHidden, setUiHidden] = useState(false);
 
   useLayoutEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setUiHidden(story?.parameters?.storybookUIVisibility === 'hidden');
   }, [story?.parameters?.storybookUIVisibility]);
 

package/src/MobileAddonsPanel.tsx

@@ -41,6 +41,7 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, MobileAddonsPa
     const [isOpen, setIsOpen] = useState(false);
 
     useEffect(() => {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setPanelHeight(defaultPanelHeight);
     }, [defaultPanelHeight]);
 
@@ -284,12 +285,17 @@ const PanelRenderer = ({ panel }: { panel: Addon_BaseType }) => {
 };
 
 const Tab = ({ active, onPress, text }: { active: boolean; onPress: () => void; text: string }) => {
+  const testID = `addon-tab-${text.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`;
+
   return (
     <TabButton
       active={active}
       onPress={onPress}
+      testID={testID}
+      accessible
       accessibilityRole="tab"
       accessibilityState={{ selected: active }}
+      accessibilityLabel={text}
     >
       <TabText active={active}>{text}</TabText>
     </TabButton>