@sigmela/router 0.2.2 → 0.2.3

package/lib/module/Router.js

@@ -367,6 +367,14 @@ export class Router {
       }
       return;
     }
+
+    // Ensure the root-level container (e.g. TabBar) is activated for the matched route.
+    // This is important when the matched route belongs to a nested stack inside a composite node
+    // like SplitView: stackActivators won't fire for the tab itself in that case.
+    const rootStackId = this.root?.getId();
+    if (rootStackId) {
+      this.activateContainerForRoute(base.routeId, rootStackId);
+    }
     const activator = base.stackId ? this.stackActivators.get(base.stackId) : undefined;
     if (activator) {
       activator();

package/lib/module/TabBar/RenderTabBar.native.js

@@ -5,7 +5,7 @@ import { TabBarContext } from "./TabBarContext.js";
 import { useRouter } from "../RouterContext.js";
 import { BottomTabsScreen, BottomTabs, ScreenStackItem } from 'react-native-screens';
 import { Platform, StyleSheet, View } from 'react-native';
-import { useCallback, useSyncExternalStore, memo, useEffect, useState } from 'react';
+import { useCallback, useSyncExternalStore, memo, useEffect, useState, useMemo } from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isImageSource = value => {
   if (value == null) return false;
@@ -146,6 +146,16 @@ const TabStackRenderer = /*#__PURE__*/memo(({
   });
 });
 TabStackRenderer.displayName = 'TabStackRenderer';
+const TabNodeRenderer = /*#__PURE__*/memo(({
+  node,
+  appearance
+}) => {
+  const Renderer = useMemo(() => node.getRenderer(), [node]);
+  return /*#__PURE__*/_jsx(Renderer, {
+    appearance: appearance
+  });
+});
+TabNodeRenderer.displayName = 'TabNodeRenderer';
 export const RenderTabBar = /*#__PURE__*/memo(({
   tabBar,
   appearance = {}
@@ -245,12 +255,16 @@ export const RenderTabBar = /*#__PURE__*/memo(({
           children: tabs.filter(t => visited[t.tabKey]).map(tab => {
             const isActive = tab.tabKey === tabs[index]?.tabKey;
             const stackForTab = tabBar.stacks[tab.tabKey];
+            const nodeForTab = tabBar.nodes[tab.tabKey];
             const ScreenForTab = tabBar.screens[tab.tabKey];
             return /*#__PURE__*/_jsx(View, {
               style: [styles.flex, !isActive && styles.hidden],
               children: stackForTab ? /*#__PURE__*/_jsx(TabStackRenderer, {
                 appearance: appearance,
                 stack: stackForTab
+              }) : nodeForTab ? /*#__PURE__*/_jsx(TabNodeRenderer, {
+                appearance: appearance,
+                node: nodeForTab
               }) : ScreenForTab ? /*#__PURE__*/_jsx(ScreenForTab, {}) : null
             }, `tab-content-${tab.tabKey}`);
           })
@@ -277,6 +291,7 @@ export const RenderTabBar = /*#__PURE__*/memo(({
         children: tabs.map(tab => {
           const isFocused = tab.tabKey === tabs[index]?.tabKey;
           const stack = tabBar.stacks[tab.tabKey];
+          const node = tabBar.nodes[tab.tabKey];
           const Screen = tabBar.screens[tab.tabKey];
           const icon = getTabIcon(tab);
           return /*#__PURE__*/_jsx(BottomTabsScreen, {
@@ -292,6 +307,9 @@ export const RenderTabBar = /*#__PURE__*/memo(({
             children: stack ? /*#__PURE__*/_jsx(TabStackRenderer, {
               appearance: appearance,
               stack: stack
+            }) : node ? /*#__PURE__*/_jsx(TabNodeRenderer, {
+              appearance: appearance,
+              node: node
             }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null
           }, tab.tabKey);
         })

package/lib/module/TabBar/RenderTabBar.web.js

@@ -34,6 +34,29 @@ const TabStackRenderer = /*#__PURE__*/memo(({
   });
 });
 TabStackRenderer.displayName = 'TabStackRenderer';
+const TabNodeRenderer = /*#__PURE__*/memo(({
+  node,
+  appearance
+}) => {
+  const Renderer = useMemo(() => node.getRenderer(), [node]);
+  return /*#__PURE__*/_jsx(Renderer, {
+    appearance: appearance
+  });
+});
+TabNodeRenderer.displayName = 'TabNodeRenderer';
+const joinPrefixAndPath = (prefix, path) => {
+  const base = (prefix ?? '').trim();
+  const child = (path || '/').trim();
+  if (!base) return child || '/';
+  const baseNorm = base === '/' ? '' : base.endsWith('/') ? base.slice(0, -1) : base;
+  if (!child || child === '/') {
+    return baseNorm || '/';
+  }
+  if (child.startsWith('/')) {
+    return `${baseNorm}${child}`;
+  }
+  return `${baseNorm}/${child}`;
+};
 export const RenderTabBar = /*#__PURE__*/memo(({
   tabBar,
   appearance
@@ -48,11 +71,13 @@ export const RenderTabBar = /*#__PURE__*/memo(({
   } = snapshot;
   const focusedTab = tabs[index];
   const stack = focusedTab ? tabBar.stacks[focusedTab.tabKey] : undefined;
+  const node = focusedTab ? tabBar.nodes[focusedTab.tabKey] : undefined;
   const Screen = focusedTab ? tabBar.screens[focusedTab.tabKey] : undefined;
   const onTabClick = useCallback(nextIndex => {
     const targetTab = tabs[nextIndex];
     if (!targetTab) return;
     const targetStack = tabBar.stacks[targetTab.tabKey];
+    const targetNode = tabBar.nodes[targetTab.tabKey];
     if (targetStack) {
       // Keep TabBar UI in sync immediately.
       if (nextIndex !== index) {
@@ -65,6 +90,17 @@ export const RenderTabBar = /*#__PURE__*/memo(({
         router.reset(firstRoutePath);
         return;
       }
+    } else if (targetNode) {
+      // Keep TabBar UI in sync immediately.
+      if (nextIndex !== index) {
+        tabBar.onIndexChange(nextIndex);
+      }
+      const seedPath = targetNode.seed?.()?.path;
+      const fallbackFirstPath = targetNode.getNodeRoutes()?.[0]?.path;
+      const path = seedPath ?? fallbackFirstPath ?? '/';
+      const fullPath = joinPrefixAndPath(targetTab.tabPrefix, path);
+      router.reset(fullPath);
+      return;
     }
     if (nextIndex !== index) {
       tabBar.onIndexChange(nextIndex);
@@ -97,6 +133,9 @@ export const RenderTabBar = /*#__PURE__*/memo(({
       children: [stack ? /*#__PURE__*/_jsx(TabStackRenderer, {
         appearance: appearance,
         stack: stack
+      }) : node ? /*#__PURE__*/_jsx(TabNodeRenderer, {
+        appearance: appearance,
+        node: node
       }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null, CustomTabBar ? /*#__PURE__*/_jsx(CustomTabBar, {
         onTabPress: onTabClick,
         activeIndex: index,

package/lib/module/TabBar/TabBar.js

@@ -8,6 +8,7 @@ import { RenderTabBar } from './RenderTabBar';
 export class TabBar {
   screens = {};
   stacks = {};
+  nodes = {};
   listeners = new Set();
   constructor(options = {}) {
     this.tabBarId = `tabbar-${Math.random().toString(36).slice(2)}`;
@@ -23,6 +24,10 @@ export class TabBar {
     return this.tabBarId;
   }
   addTab(tab) {
+    const sourcesCount = (tab.stack ? 1 : 0) + (tab.node ? 1 : 0) + (tab.screen ? 1 : 0);
+    if (sourcesCount !== 1) {
+      throw new Error(`TabBar.addTab: exactly one of { stack, node, screen } must be provided (got ${sourcesCount})`);
+    }
     const {
       key,
       ...rest
@@ -31,6 +36,7 @@ export class TabBar {
     const tabKey = key ?? `tab-${nextIndex}`;
     const nextTabs = [...this.state.tabs, {
       tabKey,
+      tabPrefix: tab.prefix,
       ...rest
     }];
     this.setState({
@@ -38,6 +44,8 @@ export class TabBar {
     });
     if (tab.stack) {
       this.stacks[tabKey] = tab.stack;
+    } else if (tab.node) {
+      this.nodes[tabKey] = tab.node;
     } else if (tab.screen) {
       this.screens[tabKey] = tab.screen;
     }
@@ -102,8 +110,8 @@ export class TabBar {
   getActiveChildId() {
     const activeTab = this.state.tabs[this.state.index];
     if (!activeTab) return undefined;
-    const stack = this.stacks[activeTab.tabKey];
-    return stack?.getId();
+    const node = this.nodes[activeTab.tabKey] ?? this.stacks[activeTab.tabKey];
+    return node?.getId();
   }
   switchToRoute(routeId) {
     const idx = this.findTabIndexByRoute(routeId);
@@ -126,11 +134,11 @@ export class TabBar {
     const children = [];
     for (let idx = 0; idx < this.state.tabs.length; idx++) {
       const tab = this.state.tabs[idx];
-      const stack = tab ? this.stacks[tab.tabKey] : undefined;
-      if (stack) {
+      const node = tab ? this.nodes[tab.tabKey] ?? this.stacks[tab.tabKey] : undefined;
+      if (node) {
         children.push({
-          prefix: '',
-          node: stack,
+          prefix: tab?.tabPrefix ?? '',
+          node,
           onMatch: () => this.onIndexChange(idx)
         });
       }
@@ -150,6 +158,10 @@ export class TabBar {
   seed() {
     const activeTab = this.state.tabs[this.state.index];
     if (!activeTab) return null;
+    const node = this.nodes[activeTab.tabKey];
+    if (node) {
+      return node.seed?.() ?? null;
+    }
     const stack = this.stacks[activeTab.tabKey];
     if (!stack) return null;
     const firstRoute = stack.getFirstRoute();
@@ -163,9 +175,9 @@ export class TabBar {
   findTabIndexByRoute(routeId) {
     for (let i = 0; i < this.state.tabs.length; i++) {
       const tab = this.state.tabs[i];
-      const stack = tab && this.stacks[tab.tabKey];
-      if (!stack) continue;
-      const hasRoute = this.nodeHasRoute(stack, routeId);
+      const node = tab ? this.nodes[tab.tabKey] ?? this.stacks[tab.tabKey] : undefined;
+      if (!node) continue;
+      const hasRoute = this.nodeHasRoute(node, routeId);
       if (hasRoute) {
         return i;
       }

package/lib/module/styles.css

@@ -489,7 +489,8 @@
   position: relative;
 }
 
-.tab-stacks-container > .screen-stack {
+.tab-stacks-container > .screen-stack,
+.tab-stacks-container > .split-view-container {
   padding-bottom: calc(73px + env(safe-area-inset-bottom)); 
 }
 
@@ -725,7 +726,8 @@
     flex-direction: row;
   }
 
-  .tab-stacks-container > .screen-stack {
+  .tab-stacks-container > .screen-stack,
+  .tab-stacks-container > .split-view-container {
     padding-bottom: 0;
     margin-left: 260px;
     min-width: 0;

package/lib/typescript/src/TabBar/TabBar.d.ts

@@ -17,6 +17,11 @@ export type InternalTabItem = Omit<TabItem, 'icon' | 'selectedIcon'> & {
     icon?: ExtendedIcon;
     selectedIcon?: ExtendedIcon;
     badgeValue?: string;
+    /**
+     * Optional base prefix for this tab's navigation subtree, e.g. '/mail'.
+     * Used by Router registry building via TabBar.getNodeChildren().
+     */
+    tabPrefix?: string;
 };
 export type TabBarProps = {
     onTabPress: (index: number) => void;
@@ -27,8 +32,25 @@ export type TabBarDescriptor = {
     renderer?: ComponentType<TabBarProps>;
 };
 type TabBarConfig = Omit<InternalTabItem, 'tabKey' | 'key'> & {
+    /**
+     * Legacy content type: a stack rendered in the tab.
+     */
     stack?: NavigationStack;
+    /**
+     * New content type: any NavigationNode (e.g. SplitView).
+     */
+    node?: NavigationNode;
+    /**
+     * Screen component rendered in the tab (no routing).
+     */
     screen?: React.ComponentType<any>;
+    /**
+     * Optional base prefix for node/stack routes, e.g. '/mail'.
+     */
+    prefix?: string;
+    /**
+     * Custom tab bar component (UI). Kept for compatibility.
+     */
     component?: ComponentType<TabBarProps>;
 };
 type TabBarOptions = {
@@ -40,6 +62,7 @@ export declare class TabBar implements NavigationNode {
     private readonly tabBarId;
     screens: Record<string, React.ComponentType<any>>;
     stacks: Record<string, NavigationStack>;
+    nodes: Record<string, NavigationNode>;
     private listeners;
     private state;
     constructor(options?: TabBarOptions);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigmela/router",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",