@idealyst/navigation 1.0.81 → 1.0.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/navigation",
-  "version": "1.0.81",
+  "version": "1.0.83",
   "description": "Cross-platform navigation library for React and React Native",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -31,6 +31,11 @@
       "import": "./src/examples/unistyles.ts",
       "require": "./src/examples/unistyles.ts",
       "types": "./src/examples/unistyles.ts"
+    },
+    "./router": {
+      "import": "./src/router/index.ts",
+      "require": "./src/router/index.ts",
+      "types": "./src/router/index.ts"
     }
   },
   "scripts": {
@@ -38,25 +43,26 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.81",
-    "@idealyst/theme": "^1.0.81",
-    "@react-navigation/bottom-tabs": "^7.0.0",
-    "@react-navigation/drawer": "^7.0.0",
-    "@react-navigation/native": "^7.0.0",
-    "@react-navigation/native-stack": "^7.0.0",
+    "@idealyst/components": "^1.0.83",
+    "@idealyst/theme": "^1.0.83",
+    "@react-navigation/bottom-tabs": ">=7.0.0",
+    "@react-navigation/drawer": ">=7.0.0",
+    "@react-navigation/native": ">=7.0.0",
+    "@react-navigation/native-stack": ">=7.0.0",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-gesture-handler": "*",
     "react-native-reanimated": "*",
     "react-native-safe-area-context": "*",
     "react-native-screens": "*",
-    "react-native-unistyles": "^3.0.10",
-    "react-router": "^7.6.3",
-    "react-router-dom": "^7.6.3"
+    "react-native-unistyles": ">=3.0.0",
+    "react-router": ">=6.0.0",
+    "react-router-dom": ">=6.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "react-router": "7.9.1",
     "typescript": "^5.0.0"
   },
   "files": [

package/src/context/NavigatorContext.native.tsx

@@ -9,15 +9,18 @@ const NavigatorContext = createContext<NavigatorContextValue>({
 });
 
 // Utility function to parse path with parameters and find matching route
-const parseParameterizedPath = (path: string, routes: any[]): { routeName: string, params: Record<string, string> } | null => {
+const parseParameterizedPath = (path: string, rootRoute: any): { routeName: string, params: Record<string, string> } | null => {
     // Handle absolute paths like /event/123
     if (path.startsWith('/')) {
         const pathSegments = path.split('/').filter(Boolean);
         
         // Find matching route by checking patterns like /event/:id
-        const findMatchingRoute = (routeList: any[], segments: string[], startIndex = 0): any => {
+        const findMatchingRoute = (routeList: any[], segments: string[], startIndex = 0, pathPrefix = ''): any => {
             for (const route of routeList) {
                 const routeSegments = route.path.split('/').filter(Boolean);
+                // Clean up path joining to avoid double slashes
+                const cleanPath = route.path.startsWith('/') ? route.path.slice(1) : route.path;
+                const fullRoutePath = pathPrefix ? `${pathPrefix}/${cleanPath}` : route.path;
                 
                 if (routeSegments.length === segments.length - startIndex) {
                     let isMatch = true;
@@ -39,13 +42,18 @@ const parseParameterizedPath = (path: string, routes: any[]): { routeName: strin
                     }
                     
                     if (isMatch) {
-                        return { route, params: extractedParams };
+                        return { route, params: extractedParams, fullPath: fullRoutePath };
                     }
                 }
                 
                 // Check nested routes
                 if (route.routes) {
-                    const nestedMatch = findMatchingRoute(route.routes, segments, startIndex + route.path.split('/').filter(Boolean).length);
+                    const nestedMatch = findMatchingRoute(
+                        route.routes, 
+                        segments, 
+                        startIndex + routeSegments.length,
+                        fullRoutePath
+                    );
                     if (nestedMatch) {
                         return nestedMatch;
                     }
@@ -54,10 +62,10 @@ const parseParameterizedPath = (path: string, routes: any[]): { routeName: strin
             return null;
         };
         
-        const match = findMatchingRoute([route], pathSegments);
+        const match = findMatchingRoute(rootRoute.routes || [], pathSegments);
         if (match) {
             return {
-                routeName: match.route.path,
+                routeName: match.fullPath,
                 params: match.params
             };
         }
@@ -71,10 +79,8 @@ const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
     const navigation = useNavigation();
         
     const navigate = (params: NavigateParams) => {
-        
         // Parse parameterized path for mobile
-        const parsed = parseParameterizedPath(params.path, [route]);
-        
+        const parsed = parseParameterizedPath(params.path, route);
         if (parsed) {
             // Navigate to the pattern route with extracted parameters
             navigation.navigate(parsed.routeName as never, parsed.params as never);

package/src/context/NavigatorContext.web.tsx

@@ -1,18 +1,16 @@
 import React, { createContext, memo, useContext, useMemo } from 'react';
-import { useNavigate, useParams } from 'react-router';
+import { useNavigate, useParams } from '../router';
 import { NavigateParams, NavigatorProviderProps, NavigatorContextValue } from './types';
 import { buildNavigator } from '../routing';
 
 const NavigatorContext = createContext<NavigatorContextValue>({
     navigate: () => {},
-    params: {},
 });
 
-export const NavigatorProvider = ({ 
+export const NavigatorProvider = ({
     route,
 }: NavigatorProviderProps) => {
     const reactRouterNavigate = useNavigate()
-    const params = useParams()
     
     const navigateFunction = (params: NavigateParams) => {
         if (params.path) {
@@ -44,7 +42,6 @@ export const NavigatorProvider = ({
     return (
         <NavigatorContext.Provider value={{ 
             navigate: navigateFunction,
-            params: params || {}
         }}>
             <RouteComponent />
         </NavigatorContext.Provider>

package/src/examples/ExampleStackRouter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DialogExamples, DividerExamples, IconExamples, InputExamples, PopoverExamples, ScreenExamples, SVGImageExamples, TextExamples, ViewExamples, ThemeExtensionExamples } from "../../../components/src/examples";
+import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DialogExamples, DividerExamples, IconExamples, InputExamples, PopoverExamples, ScreenExamples, SelectExamples, SVGImageExamples, TextExamples, ViewExamples, ThemeExtensionExamples } from "../../../components/src/examples";
 import { DataGridShowcase } from "../../../datagrid/src/examples";
 import { DatePickerExamples } from "../../../datepicker/src/examples";
 import { Button, Divider, Screen, Text, View } from "../../../components/src";
@@ -192,6 +192,15 @@ const HomeScreen = () => {
                     }}>
                     Popover
                 </Button>
+                <Button
+                    onPress={() => {
+                        navigator.navigate({
+                            path: "/select",
+                            vars: {},
+                        });
+                    }}>
+                    Select
+                </Button>
                 
                 <Divider spacing="medium" />
                 <Text size="small" weight="semibold" color="secondary">Data Components</Text>
@@ -257,6 +266,7 @@ const StackRouter: NavigatorParam = {
         { path: "svg-image", type: 'screen', component: SVGImageExamples},
         { path: "dialog", type: 'screen', component: DialogExamples},
         { path: "popover", type: 'screen', component: PopoverExamples},
+        { path: "select", type: 'screen', component: SelectExamples},
         { path: "datagrid", type: 'screen', component: DataGridShowcase},
         { path: "datepicker", type: 'screen', component: DatePickerExamples},
         { path: "theme-extension", type: 'screen', component: ThemeExtensionExamples},

package/src/hooks/useParams.web.ts

@@ -1,4 +1,4 @@
-import { useParams as useReactRouterParams } from 'react-router';
+import { useParams as useReactRouterParams } from '../router';
 
 /**
  * Custom useParams hook that wraps React Router's useParams

package/src/index.web.ts

@@ -1,5 +1,5 @@
 // Web-specific exports
 export * from './index';
 
-// Re-export React Router components to ensure single instance
-export { Outlet } from 'react-router';
+// Direct export to fix module resolution
+export { NavigatorProvider, useNavigator } from './context/NavigatorContext.web';

package/src/layouts/DefaultStackLayout.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { View, Text } from '@idealyst/components'
 import { StackLayoutProps } from '../routing/types'
-import { Outlet } from '..'
-
+import { Outlet } from '../router'
 export interface DefaultStackLayoutProps extends StackLayoutProps {
     onNavigate: (path: string) => void
     currentPath: string

package/src/layouts/DefaultTabLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { View, Text, Button, Icon } from '@idealyst/components'
 import { TabLayoutProps } from '../routing/types'
-import { Outlet } from '..'
+import { Outlet } from '../router'
 
 export interface DefaultTabLayoutProps extends TabLayoutProps {}
 

package/src/router/index.native.ts

@@ -0,0 +1,17 @@
+// Native platforms don't use React Router
+// This is a stub to maintain cross-platform compatibility
+
+export const BrowserRouter = null;
+export const HashRouter = null;
+export const MemoryRouter = null;
+export const Router = null;
+export const useNavigate = () => null;
+export const useLocation = () => null;
+export const useParams = () => null;
+export const useSearchParams = () => null;
+export const Navigate = null;
+export const Outlet = null;
+export const Route = null;
+export const Routes = null;
+export const Link = null;
+export const NavLink = null;

package/src/router/index.ts

@@ -0,0 +1,3 @@
+// Platform-specific exports will be used
+// This file exists for TypeScript resolution
+// The actual exports come from platform-specific files

package/src/router/index.web.ts

@@ -0,0 +1,6 @@
+// Export all React Router modules from a centralized location
+// This prevents duplication issues when multiple packages need React Router
+
+// Re-export everything from react-router-dom
+// This includes all react-router exports plus the DOM-specific ones
+export * from 'react-router-dom';

package/src/routing/index.native.tsx

@@ -1,6 +1,2 @@
 export * from './router.native';
 export * from './types';
-
-// Added for consistency
-const Outlet = null
-export { Outlet };

package/src/routing/index.web.tsx

@@ -1,4 +1,2 @@
 export * from './router.web';
-export * from './types'; 
-
-export { Outlet } from 'react-router';
+export * from './types';

package/src/routing/router.web.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Routes, Route } from 'react-router'
+import { Routes, Route } from '../router'
 import { DefaultStackLayout } from '../layouts/DefaultStackLayout'
 import { DefaultTabLayout } from '../layouts/DefaultTabLayout'
 import { NavigatorParam, RouteParam } from './types'