@idealyst/navigation 1.2.30 → 1.2.31

package/package.json

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

package/src/examples/ExampleNavigationRouter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DialogExamples, DividerExamples, IconExamples, InputExamples, LinkExamples, PopoverExamples, ScreenExamples, SelectExamples, SliderExamples, SVGImageExamples, TextExamples, ViewExamples, ThemeExtensionExamples, SwitchExamples, RadioButtonExamples, ProgressExamples, TextAreaExamples, TabBarExamples, TooltipExamples, AccordionExamples, ListExamples, TableExamples, MenuExamples, ImageExamples, VideoExamples, AlertExamples, SkeletonExamples, ChipExamples, BreadcrumbExamples } from '@idealyst/components/examples';
+import { ActivityIndicatorExamples, AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DialogExamples, DividerExamples, IconExamples, InputExamples, LinkExamples, PopoverExamples, ScreenExamples, SelectExamples, SliderExamples, SVGImageExamples, TextExamples, ViewExamples, ThemeExtensionExamples, SwitchExamples, RadioButtonExamples, ProgressExamples, TextAreaExamples, TabBarExamples, TooltipExamples, AccordionExamples, ListExamples, TableExamples, MenuExamples, ImageExamples, VideoExamples, AlertExamples, SkeletonExamples, ChipExamples, BreadcrumbExamples } from '@idealyst/components/examples';
 import { DataGridShowcase } from '@idealyst/datagrid/examples';
 import { DatePickerExamples } from '@idealyst/datepicker/examples';
 import { CameraExamples } from '@idealyst/camera/examples';
@@ -298,6 +298,7 @@ const ExampleNavigationRouter: NavigatorParam = {
         { path: "fullscreen-demo", type: 'screen', component: FullScreenExample, options: { title: "Full Screen Demo", fullScreen: true } },
         // Nested settings navigator with its own 404 handling
         SettingsNavigator,
+        { path: "activity-indicator", type: 'screen', component: ActivityIndicatorExamples, options: { title: "Activity Indicator" } },
         { path: "avatar", type: 'screen', component: AvatarExamples, options: { title: "Avatar" } },
         { path: "badge", type: 'screen', component: BadgeExamples, options: { title: "Badge" } },
         { path: "button", type: 'screen', component: ButtonExamples, options: { title: "Button" } },

package/src/examples/ExampleSidebar.tsx

@@ -68,6 +68,7 @@ const componentGroups: ComponentGroup[] = [
     {
         title: 'Feedback',
         items: [
+            { label: 'Activity Indicator', path: '/activity-indicator', icon: 'loading' },
             { label: 'Progress', path: '/progress', icon: 'timer-sand-empty' },
         ],
     },

package/src/routing/router.web.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef } from 'react'
 import { Routes, Route, useLocation, useParams } from '../router'
 import { DefaultStackLayout } from '../layouts/DefaultStackLayout'
 import { DefaultTabLayout } from '../layouts/DefaultTabLayout'
-import { NavigatorParam, RouteParam, ScreenParam, NotFoundComponentProps } from './types'
+import { NavigatorParam, RouteParam, ScreenParam, NotFoundComponentProps, StackLayoutProps, TabLayoutProps, RouteWithFullPath } from './types'
 import { NavigateParams } from '../context/types'
 
 /**
@@ -89,6 +89,24 @@ const NotFoundWrapper = ({
     return <Component path={location.pathname} params={params as Record<string, string>} />
 }
 
+/**
+ * Wrapper component that provides currentPath to layout components
+ */
+const LayoutWrapper: React.FC<{
+    LayoutComponent: React.ComponentType<StackLayoutProps | TabLayoutProps>
+    options?: any
+    routes: RouteWithFullPath[]
+}> = ({ LayoutComponent, options, routes }) => {
+    const location = useLocation()
+    return (
+        <LayoutComponent
+            options={options}
+            routes={routes}
+            currentPath={location.pathname}
+        />
+    )
+}
+
 /**
  * Build the Web navigator using React Router v7 nested routes
  * @param params Navigator configuration
@@ -218,15 +236,16 @@ const buildRoute = (params: RouteParam, index: number, isNested = false, parentP
         }
 
         // Build the main navigator route with layout
+        // Use LayoutWrapper to provide reactive currentPath
         const navigatorRoute = (
             <Route
                 key={`${params.path}-${index}`}
                 path={routePath}
                 element={
-                    <LayoutComponent
+                    <LayoutWrapper
+                        LayoutComponent={LayoutComponent}
                         options={params.options}
                         routes={routesWithFullPaths}
-                        currentPath=""
                     />
                 }
             >