@idealyst/navigation 1.2.13 → 1.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/navigation",
-  "version": "1.2.13",
+  "version": "1.2.15",
   "description": "Cross-platform navigation library for React and React Native",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -44,9 +44,9 @@
   },
   "peerDependencies": {
     "@idealyst/camera": "^1.1.6",
-    "@idealyst/components": "^1.2.13",
+    "@idealyst/components": "^1.2.15",
     "@idealyst/microphone": "^1.1.7",
-    "@idealyst/theme": "^1.2.13",
+    "@idealyst/theme": "^1.2.15",
     "@react-navigation/bottom-tabs": ">=7.0.0",
     "@react-navigation/drawer": ">=7.0.0",
     "@react-navigation/native": ">=7.0.0",
@@ -71,11 +71,11 @@
   },
   "devDependencies": {
     "@idealyst/camera": "^1.1.6",
-    "@idealyst/components": "^1.2.13",
+    "@idealyst/components": "^1.2.15",
     "@idealyst/datagrid": "^1.0.93",
     "@idealyst/datepicker": "^1.0.93",
     "@idealyst/microphone": "^1.1.7",
-    "@idealyst/theme": "^1.2.13",
+    "@idealyst/theme": "^1.2.15",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "react": "^19.1.0",

package/src/examples/ExampleSidebar.tsx

@@ -102,37 +102,36 @@ export default function ExampleSidebar({ insets }: DrawerSidebarProps) {
     const navigator = useNavigator();
 
     return (
-    <Screen
-            style={{
-                height: '100%',
-                padding: 16,
-            }}
+        <Screen
+            style={{ height: '100%' }}
             contentInset={insets}
         >
-        {componentGroups.map((group, groupIndex) => (
-            <List key={group.title}>
-                <Text
-                    size="sm"
-                    weight="bold"
-                    color="secondary"
-                    style={{ marginBottom: 8, marginLeft: 8 }}
-                >
-                    {group.title}
-                </Text>
-                {group.items.map((item) => (
-                    <ListItem
-                        key={item.path}
-                        label={item.label}
-                        leading={item.icon}
-                        size="sm"
-                        onPress={() => navigator.navigate({ path: item.path, vars: {} })}
-                    />
+            <View scrollable padding="md" style={{ height: '100%' }}>
+                {componentGroups.map((group, groupIndex) => (
+                    <List key={group.title}>
+                        <Text
+                            size="sm"
+                            weight="bold"
+                            color="secondary"
+                            style={{ marginBottom: 8, marginLeft: 8 }}
+                        >
+                            {group.title}
+                        </Text>
+                        {group.items.map((item) => (
+                            <ListItem
+                                key={item.path}
+                                label={item.label}
+                                leading={item.icon}
+                                size="sm"
+                                onPress={() => navigator.navigate({ path: item.path, vars: {} })}
+                            />
+                        ))}
+                        {groupIndex < componentGroups.length - 1 && (
+                            <Divider spacing="sm" style={{ marginTop: 8 }} />
+                        )}
+                    </List>
                 ))}
-                {groupIndex < componentGroups.length - 1 && (
-                    <Divider spacing="sm" style={{ marginTop: 8 }} />
-                )}
-            </List>
-        ))}
+            </View>
         </Screen>
-    )
+    );
 }

package/src/hooks/useParams.web.ts

@@ -4,7 +4,7 @@ import { useParams as useReactRouterParams } from '../router';
  * Custom useParams hook that wraps React Router's useParams
  * This ensures we're accessing the correct React Router context
  */
-export const useParams = (): Record<string, string> => {
+export const useParams = (): Record<string, string | undefined> => {
     const params = useReactRouterParams();
     return params || {};
 };

package/src/routing/router.native.tsx

@@ -1,4 +1,4 @@
-import { NavigatorParam, RouteParam, ScreenOptions, NotFoundComponentProps } from './types'
+import { NavigatorParam, RouteParam, ScreenOptions, NotFoundComponentProps, NOT_FOUND_SCREEN_NAME } from './types'
 
 import { TypedNavigator } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
@@ -8,11 +8,8 @@ import { DrawerContentWrapper } from './DrawerContentWrapper.native';
 import { HeaderWrapper } from './HeaderWrapper.native';
 import React from 'react';
 
-
-/**
- * Internal screen name for 404 pages
- */
-export const NOT_FOUND_SCREEN_NAME = '__notFound__';
+// Re-export for backwards compatibility
+export { NOT_FOUND_SCREEN_NAME };
 
 /**
  * Creates a NotFound screen component that receives path and params from route params

package/src/routing/router.web.tsx

@@ -164,7 +164,7 @@ const buildRoute = (params: RouteParam, index: number, isNested = false, parentP
 
         // Separate fullScreen routes from regular routes
         const regularRoutes = params.routes.filter(route => !isFullScreenRoute(route));
-        const fullScreenRoutes = params.routes.filter(isFullScreenRoute);
+        const fullScreenRoutes = params.routes.filter((route): route is ScreenParam => isFullScreenRoute(route));
 
         // Transform routes to include full paths for layout component (only non-fullScreen)
         const routesWithFullPaths = regularRoutes.map(route => ({
@@ -241,12 +241,14 @@ const buildRoute = (params: RouteParam, index: number, isNested = false, parentP
                 const fullPath = joinPaths(navigatorFullPath, route.path);
                 // Remove leading slash for React Router path (it will be relative to root)
                 const routerPath = fullPath.startsWith('/') ? fullPath.slice(1) : fullPath;
+                // Type assertion: fullScreen routes are always screens with a component
+                const screenRoute = route as ScreenParam;
 
                 return (
                     <Route
                         key={`fullscreen-${route.path}-${fsIndex}`}
                         path={routerPath || '/'}
-                        element={React.createElement(route.component)}
+                        element={React.createElement(screenRoute.component)}
                     />
                 );
             });

package/src/routing/types.ts

@@ -1,6 +1,11 @@
 import React from "react";
 import type { NavigateParams } from "../context/types";
 
+/**
+ * Special screen name used for not-found/404 routes
+ */
+export const NOT_FOUND_SCREEN_NAME = '__notFound__';
+
 /**
  * Tab bar specific screen options
  */