@storybook/react-native-ui-lite 10.0.2-alpha.0 → 10.0.2

package/dist/index.d.ts

@@ -7,8 +7,8 @@ import { Item, ExpandAction, CombinedDataset, Selection, SBUI } from '@storybook
 import { State, StoriesHash } from 'storybook/manager-api';
 import { API_LoadedRefData, API_IndexHash } from 'storybook/internal/types';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { StoryContext, Args } from 'storybook/internal/csf';
 import { ReactRenderer } from '@storybook/react';
+import { StoryContext, Args } from 'storybook/internal/csf';
 
 interface NodeProps$1 {
     children: React.ReactNode | React.ReactNode[];

package/dist/index.js

@@ -49,7 +49,6 @@ module.exports = __toCommonJS(index_exports);
 var import_react_native_theming2 = require("@storybook/react-native-theming");
 var import_react2 = __toESM(require("react"));
 var import_polished = require("polished");
-var import_react_native2 = require("react-native");
 
 // src/icon/iconDataUris.tsx
 var import_react = require("react");
@@ -388,12 +387,11 @@ var GroupNode = import_react2.default.memo(function GroupNode2({
   const color = (0, import_react2.useMemo)(() => {
     return theme.base === "dark" ? theme.color.primary : theme.color.ultraviolet;
   }, [theme.base, theme.color.primary, theme.color.ultraviolet]);
-  const wrapperProps = import_react_native2.Platform.OS === "macos" ? { key: `${props.id}-${color}` } : {};
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(BranchNode, { isExpandable, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Wrapper, { ...wrapperProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Wrapper, { children: [
       isExpandable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CollapseIcon, { isExpanded }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GroupIcon, { width: 14, height: 14, color })
-    ] }),
+    ] }, `group-${props.id}-${color}`),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BranchNodeText, { children })
   ] });
 });
@@ -403,12 +401,11 @@ var ComponentNode = import_react2.default.memo(
     const color = (0, import_react2.useMemo)(() => {
       return theme.color.secondary;
     }, [theme.color.secondary]);
-    const wrapperProps = import_react_native2.Platform.OS === "macos" ? { key: `${props.id}-${color}` } : {};
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(BranchNode, { isExpandable, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Wrapper, { ...wrapperProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Wrapper, { children: [
         isExpandable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CollapseIcon, { isExpanded }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComponentIcon, { width: 12, height: 12, color })
-      ] }),
+      ] }, `component-${props.id}-${color}`),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BranchNodeText, { children })
     ] });
   }
@@ -419,9 +416,8 @@ var StoryNode = import_react2.default.memo(
     const color = (0, import_react2.useMemo)(() => {
       return props.selected ? theme.color.lightest : theme.color.seafoam;
     }, [props.selected, theme.color.lightest, theme.color.seafoam]);
-    const wrapperProps = import_react_native2.Platform.OS === "macos" ? { key: `${props.id}-${color}` } : {};
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(LeafNode, { ...props, ref, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Wrapper, { ...wrapperProps, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StoryIcon, { width: 14, height: 14, color }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StoryIcon, { width: 14, height: 14, color }) }, `story-${props.id}-${color}`),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LeafNodeText, { selected: props.selected, children })
     ] });
   })
@@ -848,7 +844,7 @@ var Ref = import_react5.default.memo(
 );
 
 // src/Explorer.tsx
-var import_react_native3 = require("react-native");
+var import_react_native2 = require("react-native");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var import_react7 = require("react");
 var Explorer = import_react6.default.memo(function Explorer2({
@@ -859,7 +855,7 @@ var Explorer = import_react6.default.memo(function Explorer2({
   setSelection
 }) {
   const containerRef = (0, import_react6.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native3.View, { ref: containerRef, id: "storybook-explorer-tree", children: dataset.entries.map(([refId, ref]) => /* @__PURE__ */ (0, import_react7.createElement)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.View, { ref: containerRef, id: "storybook-explorer-tree", children: dataset.entries.map(([refId, ref]) => /* @__PURE__ */ (0, import_react7.createElement)(
     Ref,
     {
       ...ref,
@@ -876,7 +872,7 @@ var Explorer = import_react6.default.memo(function Explorer2({
 var import_react_native_theming7 = require("@storybook/react-native-theming");
 var import_react_native_ui_common5 = require("@storybook/react-native-ui-common");
 var import_react11 = __toESM(require("react"));
-var import_react_native6 = require("react-native");
+var import_react_native5 = require("react-native");
 
 // src/constants.ts
 var BREAKPOINT = 1e3;
@@ -887,7 +883,7 @@ var DEFAULT_REF_ID = "storybook_internal";
 var import_react_native_theming5 = require("@storybook/react-native-theming");
 var import_fuse = __toESM(require("fuse.js"));
 var import_react8 = __toESM(require("react"));
-var import_react_native4 = require("react-native");
+var import_react_native3 = require("react-native");
 var import_react_native_ui_common3 = require("@storybook/react-native-ui-common");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_MAX_SEARCH_RESULTS = 50;
@@ -923,7 +919,7 @@ var SearchField = import_react_native_theming5.styled.View({
   flexDirection: "column",
   position: "relative"
 });
-var inputPlatformSpecificStyles = import_react_native4.Platform.select({
+var inputPlatformSpecificStyles = import_react_native3.Platform.select({
   macos: {
     paddingVertical: 6
   },
@@ -935,7 +931,7 @@ var inputPlatformSpecificStyles = import_react_native4.Platform.select({
     height: 32
   }
 });
-var Input = (0, import_react_native_theming5.styled)(import_react_native4.TextInput)(({ theme }) => ({
+var Input = (0, import_react_native_theming5.styled)(import_react_native3.TextInput)(({ theme }) => ({
   ...inputPlatformSpecificStyles,
   paddingLeft: 28,
   paddingRight: 28,
@@ -1056,7 +1052,7 @@ var Search = import_react8.default.memo(function Search2({ children, dataset, se
   const deferredQuery = (0, import_react8.useDeferredValue)(inputValue);
   const input = deferredQuery ? deferredQuery.trim() : "";
   const results = input ? getResults(input) : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native4.View, { style: { flex: 1 }, children: [
+  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)(
@@ -1096,7 +1092,7 @@ var import_react_native_theming6 = require("@storybook/react-native-theming");
 var import_react_native_ui_common4 = require("@storybook/react-native-ui-common");
 var import_polished2 = require("polished");
 var import_react9 = __toESM(require("react"));
-var import_react_native5 = require("react-native");
+var import_react_native4 = require("react-native");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var import_react10 = require("react");
 var ResultsList = import_react_native_theming6.styled.View({
@@ -1223,7 +1219,7 @@ var Result = import_react9.default.memo(function Result2({
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Title, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Highlight, { match: nameMatch, children: item.name }, "search-result-item--label-highlight") }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Path, { children: item.path.map((group, index) => {
         const pathSeparator = index === item.path.length - 1 ? "" : "/";
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native5.View, { style: { flexShrink: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native4.View, { style: { flexShrink: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Highlight,
           {
             match: pathMatches.find((match) => match.refIndex === index),
@@ -1254,7 +1250,7 @@ var SearchResults = import_react9.default.memo(function SearchResults2({
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: "Recently opened" }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_ui_common4.IconButton, { onPress: handleClearLastViewed })
     ] }) : null,
-    results.length === 0 && query ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native5.View, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(NoResults, { children: [
+    results.length === 0 && query ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native4.View, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(NoResults, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { style: { marginBottom: 8 }, children: "No components found" }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: "Find components by name or path." })
     ] }) }) : null,
@@ -1307,8 +1303,8 @@ var Swap = import_react11.default.memo(function Swap2({
 }) {
   const [a, b] = import_react11.default.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native6.View, { style: { display: condition ? "flex" : "none" }, children: a }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native6.View, { style: { display: condition ? "none" : "flex" }, children: b })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native5.View, { style: { display: condition ? "flex" : "none" }, children: a }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native5.View, { style: { display: condition ? "none" : "flex" }, children: b })
   ] });
 });
 var useCombination = (index, indexError, previewInitialized, status, refs) => {
@@ -1369,10 +1365,12 @@ var Sidebar = import_react11.default.memo(function Sidebar2({
 });
 
 // src/Layout.tsx
+var import_portal = require("@gorhom/portal");
 var import_react_native_theming10 = require("@storybook/react-native-theming");
 var import_react_native_ui_common7 = require("@storybook/react-native-ui-common");
 var import_react16 = require("react");
-var import_react_native11 = require("react-native");
+var import_react_native10 = require("react-native");
+var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_core_events = require("storybook/internal/core-events");
 var import_manager_api2 = require("storybook/manager-api");
 
@@ -1380,17 +1378,17 @@ var import_manager_api2 = require("storybook/manager-api");
 var import_react_native_theming8 = require("@storybook/react-native-theming");
 var import_react_native_ui_common6 = require("@storybook/react-native-ui-common");
 var import_react13 = require("react");
-var import_react_native8 = require("react-native");
+var import_react_native7 = require("react-native");
 var import_manager_api = require("storybook/manager-api");
 var import_types = require("storybook/internal/types");
 
 // src/useAnimatedValue.ts
 var import_react12 = require("react");
-var import_react_native7 = require("react-native");
+var import_react_native6 = require("react-native");
 function useAnimatedValue(initialValue, config) {
   const ref = (0, import_react12.useRef)(null);
   if (ref.current == null) {
-    ref.current = new import_react_native7.Animated.Value(initialValue, config);
+    ref.current = new import_react_native6.Animated.Value(initialValue, config);
   }
   return ref.current;
 }
@@ -1401,7 +1399,7 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 var MobileAddonsPanel = (0, import_react13.forwardRef)(
   ({ storyId }, ref) => {
     const theme = (0, import_react_native_theming8.useTheme)();
-    const { height } = (0, import_react_native8.useWindowDimensions)();
+    const { height } = (0, import_react_native7.useWindowDimensions)();
     const panelHeight = useAnimatedValue(0);
     const positionBottomAnimation = useAnimatedValue(height / 2);
     const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
@@ -1409,34 +1407,34 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
       (open) => {
         setIsOpen(open);
         if (open) {
-          import_react_native8.Animated.parallel([
-            import_react_native8.Animated.timing(positionBottomAnimation, {
+          import_react_native7.Animated.parallel([
+            import_react_native7.Animated.timing(positionBottomAnimation, {
               toValue: 0,
               // Negative to move up
               duration: 350,
               useNativeDriver: false,
-              easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
+              easing: import_react_native7.Easing.inOut(import_react_native7.Easing.cubic)
             }),
-            import_react_native8.Animated.timing(panelHeight, {
+            import_react_native7.Animated.timing(panelHeight, {
               toValue: height / 2,
               duration: 350,
               useNativeDriver: false,
-              easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
+              easing: import_react_native7.Easing.inOut(import_react_native7.Easing.cubic)
             })
           ]).start();
         } else {
-          import_react_native8.Animated.parallel([
-            import_react_native8.Animated.timing(positionBottomAnimation, {
+          import_react_native7.Animated.parallel([
+            import_react_native7.Animated.timing(positionBottomAnimation, {
               toValue: height / 2,
               duration: 350,
               useNativeDriver: false,
-              easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
+              easing: import_react_native7.Easing.inOut(import_react_native7.Easing.cubic)
             }),
-            import_react_native8.Animated.timing(panelHeight, {
+            import_react_native7.Animated.timing(panelHeight, {
               toValue: 0,
               duration: 350,
               useNativeDriver: false,
-              easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
+              easing: import_react_native7.Easing.inOut(import_react_native7.Easing.cubic)
             })
           ]).start();
         }
@@ -1446,46 +1444,46 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
     (0, import_react13.useEffect)(() => {
       const handleKeyboardShow = ({ endCoordinates, duration, easing }) => {
         if (isOpen) {
-          import_react_native8.Animated.parallel([
-            import_react_native8.Animated.timing(panelHeight, {
+          import_react_native7.Animated.parallel([
+            import_react_native7.Animated.timing(panelHeight, {
               toValue: (height - endCoordinates.height) / 2,
               duration,
               useNativeDriver: false,
-              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.Easing.ease)
+              easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
             }),
-            import_react_native8.Animated.timing(positionBottomAnimation, {
+            import_react_native7.Animated.timing(positionBottomAnimation, {
               toValue: -endCoordinates.height,
               // Negative to move up
               duration,
               useNativeDriver: false,
-              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.Easing.ease)
+              easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
             })
           ]).start();
         }
       };
       const handleKeyboardHide = ({ duration, easing }) => {
         if (isOpen) {
-          import_react_native8.Animated.parallel([
-            import_react_native8.Animated.timing(positionBottomAnimation, {
+          import_react_native7.Animated.parallel([
+            import_react_native7.Animated.timing(positionBottomAnimation, {
               toValue: 0,
               // Back to original position
               duration,
               useNativeDriver: false,
-              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.Easing.ease)
+              easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
             }),
-            import_react_native8.Animated.timing(panelHeight, {
+            import_react_native7.Animated.timing(panelHeight, {
               toValue: height / 2,
               duration,
               useNativeDriver: false,
-              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.Easing.ease)
+              easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
             })
           ]).start();
         }
       };
-      const showSubscription = import_react_native8.Keyboard.addListener("keyboardDidShow", handleKeyboardShow);
-      const willShowSubscription = import_react_native8.Keyboard.addListener("keyboardWillShow", handleKeyboardShow);
-      const hideSubscription = import_react_native8.Keyboard.addListener("keyboardWillHide", handleKeyboardHide);
-      const didHideSubscription = import_react_native8.Keyboard.addListener("keyboardDidHide", handleKeyboardHide);
+      const showSubscription = import_react_native7.Keyboard.addListener("keyboardDidShow", handleKeyboardShow);
+      const willShowSubscription = import_react_native7.Keyboard.addListener("keyboardWillShow", handleKeyboardShow);
+      const hideSubscription = import_react_native7.Keyboard.addListener("keyboardWillHide", handleKeyboardHide);
+      const didHideSubscription = import_react_native7.Keyboard.addListener("keyboardDidHide", handleKeyboardHide);
       return () => {
         showSubscription.remove();
         willShowSubscription.remove();
@@ -1503,7 +1501,7 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
       }
     }));
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react_native8.Animated.View,
+      import_react_native7.Animated.View,
       {
         style: {
           position: "absolute",
@@ -1514,13 +1512,13 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
           transform: [{ translateY: positionBottomAnimation }]
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react_native8.View,
+          import_react_native7.View,
           {
             style: {
               justifyContent: "flex-end"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              import_react_native8.View,
+              import_react_native7.View,
               {
                 style: {
                   height: "100%",
@@ -1528,7 +1526,7 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
                   paddingTop: 10,
                   borderTopColor: theme.appBorderColor,
                   borderTopWidth: 1,
-                  paddingBottom: import_react_native8.Platform.OS === "android" ? 16 : 0
+                  paddingBottom: import_react_native7.Platform.OS === "android" ? 16 : 0
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   AddonsTabs,
@@ -1579,10 +1577,10 @@ var AddonsTabs = ({ onClose, storyId }) => {
   const [addonSelected, setAddonSelected] = (0, import_react13.useState)(Object.keys(panels)[0]);
   const panel = (0, import_react13.useMemo)(() => {
     if (!storyId) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.Text, { children: "No Story Selected" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native7.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native7.Text, { children: "No Story Selected" }) });
     }
     if (Object.keys(panels).length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.Text, { children: "No addons loaded." }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native7.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native7.Text, { children: "No addons loaded." }) });
     }
     return panels[addonSelected].render({ active: true });
   }, [addonSelected, panels, storyId]);
@@ -1592,10 +1590,10 @@ var AddonsTabs = ({ onClose, storyId }) => {
     }),
     [insets]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native8.View, { style: addonsTabsContainerStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native8.View, { style: addonsTabsStyle, children: [
+  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)(
-        import_react_native8.ScrollView,
+        import_react_native7.ScrollView,
         {
           horizontal: true,
           showsHorizontalScrollIndicator: false,
@@ -1625,7 +1623,7 @@ var AddonsTabs = ({ onClose, storyId }) => {
       )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react_native8.ScrollView,
+      import_react_native7.ScrollView,
       {
         style: addonsScrollStyle,
         contentContainerStyle: scrollContentContainerStyle,
@@ -1657,49 +1655,49 @@ var TabText = import_react_native_theming8.styled.Text(({ theme, active }) => ({
 // src/MobileMenuDrawer.tsx
 var import_react_native_theming9 = require("@storybook/react-native-theming");
 var import_react14 = require("react");
-var import_react_native9 = require("react-native");
+var import_react_native8 = require("react-native");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var useAnimatedModalHeight = () => {
-  const { height } = (0, import_react_native9.useWindowDimensions)();
+  const { height } = (0, import_react_native8.useWindowDimensions)();
   const animatedHeight = useAnimatedValue(0.65 * height);
   (0, import_react14.useEffect)(() => {
     const modalHeight = 0.65 * height;
     const maxModalHeight = 0.85 * height;
-    const expand = (duration = 250) => import_react_native9.Animated.timing(animatedHeight, {
+    const expand = (duration = 250) => import_react_native8.Animated.timing(animatedHeight, {
       toValue: maxModalHeight,
       duration,
       useNativeDriver: false
     }).start();
-    const collapse = (duration = 250) => import_react_native9.Animated.timing(animatedHeight, {
+    const collapse = (duration = 250) => import_react_native8.Animated.timing(animatedHeight, {
       toValue: modalHeight,
       duration,
       useNativeDriver: false
     }).start();
     const handleKeyboardWillShow = (e) => {
-      if (import_react_native9.Platform.OS === "ios") {
+      if (import_react_native8.Platform.OS === "ios") {
         expand(e.duration);
       }
     };
     const handleKeyboardDidShow = (e) => {
-      if (import_react_native9.Platform.OS === "android") {
+      if (import_react_native8.Platform.OS === "android") {
         expand();
       }
     };
     const handleKeyboardWillHide = (e) => {
-      if (import_react_native9.Platform.OS === "ios") {
+      if (import_react_native8.Platform.OS === "ios") {
         collapse(e.duration);
       }
     };
     const handleKeyboardDidHide = (e) => {
-      if (import_react_native9.Platform.OS === "android") {
+      if (import_react_native8.Platform.OS === "android") {
         collapse();
       }
     };
     const subscriptions = [
-      import_react_native9.Keyboard.addListener("keyboardWillShow", handleKeyboardWillShow),
-      import_react_native9.Keyboard.addListener("keyboardDidShow", handleKeyboardDidShow),
-      import_react_native9.Keyboard.addListener("keyboardWillHide", handleKeyboardWillHide),
-      import_react_native9.Keyboard.addListener("keyboardDidHide", handleKeyboardDidHide)
+      import_react_native8.Keyboard.addListener("keyboardWillShow", handleKeyboardWillShow),
+      import_react_native8.Keyboard.addListener("keyboardDidShow", handleKeyboardDidShow),
+      import_react_native8.Keyboard.addListener("keyboardWillHide", handleKeyboardWillHide),
+      import_react_native8.Keyboard.addListener("keyboardDidHide", handleKeyboardDidHide)
     ];
     return () => {
       subscriptions.forEach((subscription) => subscription.remove());
@@ -1715,7 +1713,7 @@ var MobileMenuDrawer = (0, import_react14.memo)(
     const animatedHeight = useAnimatedModalHeight();
     const dragY = useAnimatedValue(0);
     const panResponder = (0, import_react14.useRef)(
-      import_react_native9.PanResponder.create({
+      import_react_native8.PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: (_, gestureState) => {
           return gestureState.dy > 0;
@@ -1727,10 +1725,10 @@ var MobileMenuDrawer = (0, import_react14.memo)(
         },
         onPanResponderRelease: (_, gestureState) => {
           if (gestureState.dy > 50) {
-            import_react_native9.Keyboard.dismiss();
+            import_react_native8.Keyboard.dismiss();
             setMobileMenuOpen(false);
           }
-          import_react_native9.Animated.timing(dragY, {
+          import_react_native8.Animated.timing(dragY, {
             toValue: 0,
             duration: 300,
             useNativeDriver: true
@@ -1745,7 +1743,7 @@ var MobileMenuDrawer = (0, import_react14.memo)(
           scrollToSelectedNode();
           setMobileMenuOpen(true);
         } else {
-          import_react_native9.Keyboard.dismiss();
+          import_react_native8.Keyboard.dismiss();
           setMobileMenuOpen(false);
         }
       }
@@ -1763,66 +1761,60 @@ var MobileMenuDrawer = (0, import_react14.memo)(
       [theme.color.mediumdark]
     );
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_react_native9.Modal,
+      import_react_native8.Modal,
       {
         visible: mobileMenuOpen,
         animationType: "slide",
         transparent: true,
         statusBarTranslucent: true,
         onRequestClose: () => setMobileMenuOpen(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native9.Animated.View, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.Pressable, { style: { flex: 1 }, onPress: () => setMobileMenuOpen(false) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_react_native9.Animated.View,
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native8.Animated.View, { 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.jsx)(import_react_native8.Animated.View, { style: { height: animatedHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            import_react_native8.Animated.View,
             {
-              style: { backgroundColor: theme.background.content, height: animatedHeight },
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-                import_react_native9.Animated.View,
+              style: [
                 {
-                  style: [
-                    {
+                  flex: 1,
+                  borderTopColor: theme.appBorderColor,
+                  borderTopWidth: 1,
+                  borderStyle: "solid",
+                  backgroundColor: theme.background.content,
+                  elevation: 8
+                },
+                { transform: [{ translateY: dragY }] }
+              ],
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native8.View,
+                  {
+                    ...panResponder.panHandlers,
+                    style: {
+                      alignItems: "center",
+                      justifyContent: "center",
+                      backgroundColor: theme.background.content
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.View, { style: handleStyle })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native8.ScrollView,
+                  {
+                    ref: scrollRef,
+                    keyboardShouldPersistTaps: "handled",
+                    style: {
                       flex: 1,
-                      borderTopColor: theme.appBorderColor,
-                      borderTopWidth: 1,
-                      borderStyle: "solid",
-                      backgroundColor: theme.background.content,
-                      elevation: 8
+                      paddingBottom: 150,
+                      alignSelf: "flex-end",
+                      width: "100%",
+                      backgroundColor: theme.background.content
                     },
-                    { transform: [{ translateY: dragY }] }
-                  ],
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      import_react_native9.View,
-                      {
-                        ...panResponder.panHandlers,
-                        style: {
-                          alignItems: "center",
-                          justifyContent: "center",
-                          backgroundColor: theme.background.content
-                        },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: handleStyle })
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      import_react_native9.ScrollView,
-                      {
-                        ref: scrollRef,
-                        keyboardShouldPersistTaps: "handled",
-                        style: {
-                          flex: 1,
-                          paddingBottom: 150,
-                          alignSelf: "flex-end",
-                          width: "100%",
-                          backgroundColor: theme.background.content
-                        },
-                        children
-                      }
-                    )
-                  ]
-                }
-              )
+                    children
+                  }
+                )
+              ]
             }
-          )
+          ) })
         ] })
       }
     );
@@ -1831,7 +1823,7 @@ var MobileMenuDrawer = (0, import_react14.memo)(
 
 // src/StorybookLogo.tsx
 var import_react15 = require("react");
-var import_react_native10 = require("react-native");
+var import_react_native9 = require("react-native");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var WIDTH = 125;
 var HEIGHT = 25;
@@ -1855,7 +1847,7 @@ var BrandLogo = ({ theme }) => {
     return theme.brand.image;
   }
   const image = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_native10.Image,
+    import_react_native9.Image,
     {
       source: theme.brand.image,
       resizeMode: theme.brand.resizeMode ?? "contain",
@@ -1864,10 +1856,10 @@ var BrandLogo = ({ theme }) => {
   );
   if (theme.brand.url) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react_native10.TouchableOpacity,
+      import_react_native9.TouchableOpacity,
       {
         onPress: () => {
-          if (theme.brand.url) import_react_native10.Linking.openURL(theme.brand.url);
+          if (theme.brand.url) import_react_native9.Linking.openURL(theme.brand.url);
         },
         children: image
       }
@@ -1885,13 +1877,13 @@ var BrandTitle = ({ theme }) => {
       fontSize: theme.typography.size.m1
     };
   }, [theme]);
-  const title = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native10.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
+  const title = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native9.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
   if (theme.brand.url) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react_native10.TouchableOpacity,
+      import_react_native9.TouchableOpacity,
       {
         onPress: () => {
-          if (theme.brand.url) import_react_native10.Linking.openURL(theme.brand.url);
+          if (theme.brand.url) import_react_native9.Linking.openURL(theme.brand.url);
         },
         children: title
       }
@@ -1913,8 +1905,6 @@ var StorybookLogo = ({ theme }) => {
 };
 
 // src/Layout.tsx
-var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
-var import_portal = require("@gorhom/portal");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var desktopLogoContainer = {
   flexDirection: "row",
@@ -2022,9 +2012,9 @@ 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_native11.View, { style: containerStyle, children: [
-    isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.View, { style: desktopSidebarStyle, children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.ScrollView, { keyboardShouldPersistTaps: "handled", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.View, { style: desktopLogoContainer, 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 }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
       ] }),
@@ -2042,17 +2032,17 @@ var Layout = ({
         }
       )
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.View, { style: mobileContentStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.View, { style: contentContainerStyle, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.View, { style: mobileContentStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native10.View, { style: contentContainerStyle, children }),
       story?.parameters?.hideFullScreenButton || isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        import_react_native11.TouchableOpacity,
+        import_react_native10.TouchableOpacity,
         {
           style: fullScreenButtonStyle,
           onPress: () => setUiHidden((prev) => !prev),
           children: uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseFullscreenIcon, { color: theme.color.mediumdark }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FullscreenIcon, { color: theme.color.mediumdark })
         }
       ),
-      isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.View, { style: desktopAddonsPanelStyle, children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native10.View, { style: desktopAddonsPanelStyle, children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         import_react_native_ui_common7.IconButton,
         {
           style: iconFloatRightStyle,
@@ -2071,7 +2061,7 @@ var Layout = ({
           onPress: () => mobileMenuDrawerRef.current?.setMobileMenuOpen(true),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuIcon, { color: theme.color.mediumdark }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
               story?.title,
               "/",
               story?.name
@@ -2089,7 +2079,7 @@ var Layout = ({
       )
     ] }) }) : null,
     isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectedNodeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StorybookLogo, { theme }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native10.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StorybookLogo, { theme }) }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         Sidebar,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-lite",
-  "version": "10.0.2-alpha.0",
+  "version": "10.0.2",
   "description": "lightweight ui components for react native storybook",
   "keywords": [
     "react",
@@ -59,9 +59,9 @@
   },
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@storybook/react": "^10.0.1",
-    "@storybook/react-native-theming": "^10.0.2-alpha.0",
-    "@storybook/react-native-ui-common": "^10.0.2-alpha.0",
+    "@storybook/react": "^10.0.2",
+    "@storybook/react-native-theming": "^10.0.2",
+    "@storybook/react-native-ui-common": "^10.0.2",
     "fuse.js": "^7.1.0",
     "polished": "^4.3.1",
     "react-native-safe-area-context": "^5"
@@ -77,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f88cc47d0ddc9958f4a8b029f8366de9184bfc8e"
+  "gitHead": "73ee48de3fba05ca66288b335059e1ec944b162b"
 }

package/src/Layout.tsx

@@ -1,4 +1,4 @@
-import type { Args, StoryContext } from 'storybook/internal/csf';
+import { PortalHost, PortalProvider } from '@gorhom/portal';
 import type { ReactRenderer } from '@storybook/react';
 import { styled, ThemeProvider, useTheme } from '@storybook/react-native-theming';
 import {
@@ -12,9 +12,11 @@ import {
 } from '@storybook/react-native-ui-common';
 import { ReactElement, ReactNode, useCallback, useRef, useState } from 'react';
 import { ScrollView, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { SET_CURRENT_STORY } from 'storybook/internal/core-events';
-import { addons } from 'storybook/manager-api';
+import type { Args, StoryContext } from 'storybook/internal/csf';
 import { type API_IndexHash } from 'storybook/internal/types';
+import { addons } from 'storybook/manager-api';
 import { AddonsTabs, MobileAddonsPanel, MobileAddonsPanelRef } from './MobileAddonsPanel';
 import { MobileMenuDrawer, MobileMenuDrawerRef } from './MobileMenuDrawer';
 import { SelectedNodeProvider } from './SelectedNodeProvider';
@@ -27,8 +29,6 @@ import {
   FullscreenIcon,
   MenuIcon,
 } from './icon/iconDataUris';
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Portal, PortalHost, PortalProvider } from '@gorhom/portal';
 
 const desktopLogoContainer = {
   flexDirection: 'row',

package/src/MobileMenuDrawer.tsx

@@ -173,9 +173,7 @@ export const MobileMenuDrawer = memo(
             <Pressable style={{ flex: 1 }} onPress={() => setMobileMenuOpen(false)}></Pressable>
           </View>
 
-          <Animated.View
-            style={{ backgroundColor: theme.background.content, height: animatedHeight }}
-          >
+          <Animated.View style={{ height: animatedHeight }}>
             <Animated.View
               style={[
                 {

package/src/TreeNode.tsx

@@ -2,7 +2,7 @@ import { styled, useTheme } from '@storybook/react-native-theming';
 
 import React, { ComponentProps, FC, forwardRef, useMemo } from 'react';
 import { transparentize } from 'polished';
-import { Platform, View } from 'react-native';
+import { View } from 'react-native';
 import { CollapseIcon, ComponentIcon, GroupIcon, StoryIcon } from './icon/iconDataUris';
 
 export interface NodeProps {
@@ -98,12 +98,9 @@ export const GroupNode: FC<
     return theme.base === 'dark' ? theme.color.primary : theme.color.ultraviolet;
   }, [theme.base, theme.color.primary, theme.color.ultraviolet]);
 
-  const wrapperProps = Platform.OS === 'macos' ? { key: `${props.id}-${color}` } : {};
-
   return (
     <BranchNode isExpandable={isExpandable} {...props}>
-      {/* workaround for macos icon color bug */}
-      <Wrapper {...wrapperProps}>
+      <Wrapper key={`group-${props.id}-${color}`}>
         {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
         <GroupIcon width={14} height={14} color={color} />
       </Wrapper>
@@ -120,12 +117,10 @@ export const ComponentNode: FC<ComponentProps<typeof BranchNode>> = React.memo(
       return theme.color.secondary;
     }, [theme.color.secondary]);
 
-    const wrapperProps = Platform.OS === 'macos' ? { key: `${props.id}-${color}` } : {};
-
     return (
       <BranchNode isExpandable={isExpandable} {...props}>
         {/* workaround for macos icon color bug */}
-        <Wrapper {...wrapperProps}>
+        <Wrapper key={`component-${props.id}-${color}`}>
           {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
           <ComponentIcon width={12} height={12} color={color} />
         </Wrapper>
@@ -146,12 +141,9 @@ export const StoryNode = React.memo(
       return props.selected ? theme.color.lightest : theme.color.seafoam;
     }, [props.selected, theme.color.lightest, theme.color.seafoam]);
 
-    const wrapperProps = Platform.OS === 'macos' ? { key: `${props.id}-${color}` } : {};
-
     return (
       <LeafNode {...props} ref={ref}>
-        {/* workaround for macos icon color bug */}
-        <Wrapper {...wrapperProps}>
+        <Wrapper key={`story-${props.id}-${color}`}>
           <StoryIcon width={14} height={14} color={color} />
         </Wrapper>
         <LeafNodeText selected={props.selected}>{children}</LeafNodeText>