@natsuneko-laboratory/react-native-desktop-navigation 0.1.0-alpha.12 → 0.1.0-alpha.14

package/dist/native/host.js

@@ -92,17 +92,40 @@ function NativeSurface({ configuration, slots, icons = [], footer, onFooterHeigh
     }
     const [acknowledgement, acknowledge] = react_1.default.useReducer((n) => n + 1, 0);
     const serialized = JSON.stringify(configuration);
-    const version = react_1.default.useRef({ serialized, acknowledgement, revision: 0 });
+    // Selection and acknowledgements do not invalidate sidebar icon positions.
+    // Other configuration changes may move/resize rows, so await fresh geometry.
+    const iconLayoutConfiguration = JSON.stringify({
+        ...configuration,
+        activeKey: undefined,
+        items: configuration.items.map((item) => ({
+            ...item,
+            // Native icons occupy fixed square slots. Switching a symbol/glyph,
+            // image or tint on selection changes its contents, not row geometry.
+            icon: item.icon && { type: item.icon.type, size: item.icon.size },
+        })),
+    });
+    const version = react_1.default.useRef({
+        serialized,
+        acknowledgement,
+        revision: 0,
+        iconLayoutConfiguration,
+        iconLayoutRevision: 0,
+    });
     if (version.current.serialized !== serialized ||
         version.current.acknowledgement !== acknowledgement) {
         version.current = {
             serialized,
             acknowledgement,
             revision: version.current.revision + 1,
+            iconLayoutConfiguration,
+            iconLayoutRevision: version.current.iconLayoutRevision +
+                Number(version.current.iconLayoutConfiguration !== iconLayoutConfiguration),
         };
     }
     const revision = version.current.revision;
-    const [layout, setLayout] = react_1.default.useState(null);
+    const iconLayoutRevision = version.current.iconLayoutRevision;
+    const [measurement, setMeasurement] = react_1.default.useState(null);
+    const layout = measurement?.event;
     const footerFrame = layout?.footerFrame;
     const footerPlaced = !!footerFrame && footerFrame.width > 0;
     return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, style], onLayout: onLayout, children: [(0, jsx_runtime_1.jsx)(DesktopNavigationHostNativeComponent_1.default, { style: react_native_1.StyleSheet.absoluteFillObject, configuration: JSON.stringify({ ...configuration, revision }), onNavigationEvent: (event) => {
@@ -111,9 +134,9 @@ function NativeSurface({ configuration, slots, icons = [], footer, onFooterHeigh
                         return;
                     if (message.type === 'layout') {
                         onMeasurements?.(message.frames);
-                        setLayout((previous) => JSON.stringify(previous) === JSON.stringify(message)
+                        setMeasurement((previous) => JSON.stringify(previous?.event) === JSON.stringify(message)
                             ? previous
-                            : message);
+                            : { event: message, iconLayoutRevision });
                     }
                     else {
                         onRequest(message);
@@ -154,9 +177,10 @@ function NativeSurface({ configuration, slots, icons = [], footer, onFooterHeigh
                             opacity: 0,
                         },
                 ], children: footer })), (0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: react_native_1.StyleSheet.absoluteFillObject, children: icons.map((icon) => {
-                    // Never display a removed/resized icon at a previous revision's position.
-                    const geometry = layout?.revision === revision
-                        ? layout.iconFrames?.[icon.key]
+                    // Keep SVGs mounted across selection-only revisions, but never reuse
+                    // positions after a layout configuration change (even if reverted).
+                    const geometry = measurement?.iconLayoutRevision === iconLayoutRevision
+                        ? layout?.iconFrames?.[icon.key]
                         : undefined;
                     if (!geometry ||
                         geometry.clip.width <= 0 ||

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@natsuneko-laboratory/react-native-desktop-navigation",
-  "version": "0.1.0-alpha.12",
+  "version": "0.1.0-alpha.14",
   "description": "Desktop-first navigation for React Native macOS and Windows",
   "license": "MIT",
   "main": "./dist/index.js",

package/src/native/host.tsx

@@ -211,7 +211,25 @@ export function NativeSurface({
   }
   const [acknowledgement, acknowledge] = React.useReducer((n) => n + 1, 0);
   const serialized = JSON.stringify(configuration);
-  const version = React.useRef({ serialized, acknowledgement, revision: 0 });
+  // Selection and acknowledgements do not invalidate sidebar icon positions.
+  // Other configuration changes may move/resize rows, so await fresh geometry.
+  const iconLayoutConfiguration = JSON.stringify({
+    ...configuration,
+    activeKey: undefined,
+    items: configuration.items.map((item) => ({
+      ...item,
+      // Native icons occupy fixed square slots. Switching a symbol/glyph,
+      // image or tint on selection changes its contents, not row geometry.
+      icon: item.icon && { type: item.icon.type, size: item.icon.size },
+    })),
+  });
+  const version = React.useRef({
+    serialized,
+    acknowledgement,
+    revision: 0,
+    iconLayoutConfiguration,
+    iconLayoutRevision: 0,
+  });
   if (
     version.current.serialized !== serialized ||
     version.current.acknowledgement !== acknowledgement
@@ -220,10 +238,21 @@ export function NativeSurface({
       serialized,
       acknowledgement,
       revision: version.current.revision + 1,
+      iconLayoutConfiguration,
+      iconLayoutRevision:
+        version.current.iconLayoutRevision +
+        Number(
+          version.current.iconLayoutConfiguration !== iconLayoutConfiguration,
+        ),
     };
   }
   const revision = version.current.revision;
-  const [layout, setLayout] = React.useState<LayoutEvent | null>(null);
+  const iconLayoutRevision = version.current.iconLayoutRevision;
+  const [measurement, setMeasurement] = React.useState<{
+    event: LayoutEvent;
+    iconLayoutRevision: number;
+  } | null>(null);
+  const layout = measurement?.event;
   const footerFrame = layout?.footerFrame;
   const footerPlaced = !!footerFrame && footerFrame.width > 0;
   return (
@@ -236,10 +265,10 @@ export function NativeSurface({
           if (!message || message.revision !== revision) return;
           if (message.type === 'layout') {
             onMeasurements?.(message.frames);
-            setLayout((previous) =>
-              JSON.stringify(previous) === JSON.stringify(message)
+            setMeasurement((previous) =>
+              JSON.stringify(previous?.event) === JSON.stringify(message)
                 ? previous
-                : message,
+                : { event: message, iconLayoutRevision },
             );
           } else {
             onRequest(message);
@@ -321,10 +350,11 @@ export function NativeSurface({
         style={StyleSheet.absoluteFillObject}
       >
         {icons.map((icon) => {
-          // Never display a removed/resized icon at a previous revision's position.
+          // Keep SVGs mounted across selection-only revisions, but never reuse
+          // positions after a layout configuration change (even if reverted).
           const geometry =
-            layout?.revision === revision
-              ? layout.iconFrames?.[icon.key]
+            measurement?.iconLayoutRevision === iconLayoutRevision
+              ? layout?.iconFrames?.[icon.key]
               : undefined;
           if (
             !geometry ||