@resistdesign/voltra 3.0.0-alpha.47 → 3.0.0-alpha.48

package/app/index.js

@@ -1,6 +1,6 @@
-export { createEasyLayout, getEasyLayoutTemplateDetails, getPascalCaseAreaName } from '../chunk-QXYUXJKM.js';
+export { createEasyLayout, getEasyLayoutTemplateDetails, getPascalCaseAreaName } from '../chunk-BSHQIRBV.js';
 export { computeTrackPixels } from '../chunk-TJFTWPXQ.js';
-export { AutoForm, AutoFormView, Route, RouteContext, RouteContextConsumer, RouteContextProvider, RouteProvider, buildHistoryPath, buildQueryString, buildRoutePath, canUseBrowserHistory, computeAreaBounds, createAutoField, createBrowserRouteAdapter, createFormRenderer, createHistoryBackHandler, createManualRouteAdapter, createMemoryHistory, createNativeRouteAdapter, createRouteAdapterFromHistory, createUniversalAdapter, defaultTranslateValidationErrorCode, getFieldKind, parseHistoryPath, parseTemplate, resolveSuite, useFormEngine, useRouteContext, validateAreas, wrapRouteAdapterWithPathResolver } from '../chunk-UD2ALOCE.js';
+export { AutoForm, AutoFormView, Route, RouteContext, RouteContextConsumer, RouteContextProvider, RouteProvider, buildHistoryPath, buildQueryString, buildRoutePath, canUseBrowserHistory, computeAreaBounds, createAutoField, createBrowserRouteAdapter, createFormRenderer, createHistoryBackHandler, createManualRouteAdapter, createMemoryHistory, createNativeRouteAdapter, createRouteAdapterFromHistory, createUniversalAdapter, defaultTranslateValidationErrorCode, getFieldKind, parseHistoryPath, parseTemplate, resolveSuite, useFormEngine, useRouteContext, validateAreas, wrapRouteAdapterWithPathResolver } from '../chunk-K4R2PFNG.js';
 import '../chunk-RUNXRISF.js';
 import '../chunk-3HVYVX3S.js';
 import { mergeStringPaths, PATH_DELIMITER } from '../chunk-2JDOM6PB.js';

package/app/utils/Route.d.ts

@@ -119,6 +119,11 @@ export type RouteContextType = {
      * Whether this route is the top-level router.
      */
     isTopLevel: boolean;
+    /**
+     * Absolute matched path used as the base for relative navigation at this
+     * route level.
+     */
+    adapterBasePath: string;
     /**
      * Adapter driving route updates.
      */
@@ -148,7 +153,7 @@ export declare const useRouteContext: () => RouteContextType;
  * @param adapter - RouteAdapter to normalize.
  * @returns Adapter with relative-aware `push` and `replace`.
  */
-export declare const wrapRouteAdapterWithPathResolver: (adapter: RouteAdapter) => RouteAdapter;
+export declare const wrapRouteAdapterWithPathResolver: (adapter: RouteAdapter, getBasePath?: () => string) => RouteAdapter;
 /**
  * RouteProvider props.
  */

package/{chunk-QXYUXJKM.js → chunk-BSHQIRBV.js}

@@ -1,4 +1,4 @@
-import { parseTemplate, validateAreas } from './chunk-UD2ALOCE.js';
+import { parseTemplate, validateAreas } from './chunk-K4R2PFNG.js';
 
 // src/app/utils/EasyLayout.tsx
 var getPascalCaseAreaName = (area) => {

package/{chunk-UD2ALOCE.js → chunk-K4R2PFNG.js}

@@ -552,7 +552,8 @@ var RouteContext = createContext({
   parentPath: "",
   parentPathInternal: "",
   params: {},
-  isTopLevel: true
+  isTopLevel: true,
+  adapterBasePath: "/"
 });
 var {
   /**
@@ -565,27 +566,42 @@ var {
   Consumer: RouteContextConsumer
 } = RouteContext;
 var useRouteContext = () => useContext(RouteContext);
-var wrappedRouteAdapterCache = /* @__PURE__ */ new WeakMap();
-var wrapRouteAdapterWithPathResolver = (adapter) => {
+var wrapRouteAdapterWithPathResolver = (adapter, getBasePath = () => adapter.getPath()) => {
   if (!adapter.push && !adapter.replace) {
     return adapter;
   }
-  const cachedAdapter = wrappedRouteAdapterCache.get(adapter);
-  if (cachedAdapter) {
-    return cachedAdapter;
-  }
   const wrappedAdapter = {
     ...adapter,
     push: adapter.push ? (path, title) => {
-      adapter.push?.(resolveRouteAdapterPath(adapter.getPath(), path), title);
+      adapter.push?.(resolveRouteAdapterPath(getBasePath(), path), title);
     } : void 0,
     replace: adapter.replace ? (path, title) => {
-      adapter.replace?.(resolveRouteAdapterPath(adapter.getPath(), path), title);
+      adapter.replace?.(resolveRouteAdapterPath(getBasePath(), path), title);
     } : void 0
   };
-  wrappedRouteAdapterCache.set(adapter, wrappedAdapter);
   return wrappedAdapter;
 };
+var getAdapterBasePath = (currentPath) => {
+  const normalizedPath = String(currentPath ?? "").trim();
+  if (normalizedPath === "") {
+    return "/";
+  }
+  const [pathOnly] = normalizedPath.split(/[?#]/, 1);
+  return pathOnly || "/";
+};
+var getMatchedRouteBasePath = (currentPath, matchedRoutePath) => {
+  const currentPathSegments = getPathArray(
+    getAdapterBasePath(currentPath),
+    PATH_DELIMITER,
+    true,
+    true,
+    false,
+    false
+  );
+  const matchedRouteSegments = getPathArray(matchedRoutePath);
+  const resolvedSegments = currentPathSegments.slice(0, matchedRouteSegments.length);
+  return resolvedSegments.length > 0 ? `/${resolvedSegments.join(PATH_DELIMITER)}` : "/";
+};
 var getWindow2 = () => {
   if (typeof globalThis === "undefined") {
     return void 0;
@@ -645,6 +661,10 @@ var RouteProvider = ({
   const [currentPath, setCurrentPath] = useState(
     initialPath ?? normalizedAdapter.getPath()
   );
+  const adapterBasePath = useMemo(
+    () => getAdapterBasePath(currentPath),
+    [currentPath]
+  );
   useEffect(() => {
     return normalizedAdapter.subscribe((nextPath) => {
       setCurrentPath(nextPath);
@@ -657,9 +677,10 @@ var RouteProvider = ({
       parentPathInternal: "",
       params: {},
       isTopLevel: true,
+      adapterBasePath,
       adapter: normalizedAdapter
     }),
-    [currentPath, normalizedAdapter]
+    [currentPath, adapterBasePath, normalizedAdapter]
   );
   return /* @__PURE__ */ jsx(RouteContextProvider, { value: contextValue, children });
 };
@@ -677,6 +698,7 @@ var RouteMatcher = ({
     parentPath = "",
     parentPathInternal = "",
     params: parentParams = {},
+    adapterBasePath: inheritedAdapterBasePath = "/",
     adapter
   } = useRouteContext();
   const targetCurrentPath = useMemo(
@@ -722,6 +744,14 @@ var RouteMatcher = ({
     }),
     [parentParams, matchedRoute]
   );
+  const matchedAdapterBasePath = useMemo(
+    () => matchedRoute ? getMatchedRouteBasePath(targetCurrentPath, matchedRoute.fullPath) : inheritedAdapterBasePath,
+    [targetCurrentPath, matchedRoute, inheritedAdapterBasePath]
+  );
+  const scopedAdapter = useMemo(
+    () => adapter ? wrapRouteAdapterWithPathResolver(adapter, () => matchedAdapterBasePath) : adapter,
+    [adapter, matchedAdapterBasePath]
+  );
   const newRouteContext = useMemo(
     () => ({
       currentWindowPath: targetCurrentPath,
@@ -729,9 +759,17 @@ var RouteMatcher = ({
       parentPathInternal: matchedRoute?.fullPath ?? parentPathInternal,
       params,
       isTopLevel: false,
-      adapter
+      adapterBasePath: matchedAdapterBasePath,
+      adapter: scopedAdapter
     }),
-    [targetCurrentPath, matchedRoute, parentPathInternal, params, adapter]
+    [
+      targetCurrentPath,
+      matchedRoute,
+      parentPathInternal,
+      params,
+      matchedAdapterBasePath,
+      scopedAdapter
+    ]
   );
   useEffect(() => {
     if (onParamsChange) {

package/native/index.js

@@ -1,5 +1,5 @@
 import { computeTrackPixels } from '../chunk-TJFTWPXQ.js';
-import { createFormRenderer, createHistoryBackHandler, buildHistoryPath, AutoFormView, AutoForm, parseTemplate, validateAreas, computeAreaBounds, parseHistoryPath, createMemoryHistory, createBrowserRouteAdapter, Route, createRouteAdapterFromHistory } from '../chunk-UD2ALOCE.js';
+import { createFormRenderer, createHistoryBackHandler, buildHistoryPath, AutoFormView, AutoForm, parseTemplate, validateAreas, computeAreaBounds, parseHistoryPath, createMemoryHistory, useRouteContext, createBrowserRouteAdapter, Route, createRouteAdapterFromHistory } from '../chunk-K4R2PFNG.js';
 import { ERROR_MESSAGE_CONSTANTS } from '../chunk-3HVYVX3S.js';
 import '../chunk-2JDOM6PB.js';
 import '../chunk-I2KLQ2HA.js';
@@ -675,6 +675,33 @@ var createNativeHistory = (options = {}) => {
   };
 };
 var createNativeBackHandler = (history) => createHistoryBackHandler(history);
+var NavButton = ({
+  path,
+  replace = false,
+  onPress,
+  disabled,
+  children,
+  ...other
+}) => {
+  const { adapter } = useRouteContext();
+  const onPressInternal = (event) => {
+    onPress?.(event);
+    if (disabled || event?.defaultPrevented) {
+      return;
+    }
+    const navigate = replace ? adapter?.replace : adapter?.push;
+    navigate?.(path);
+  };
+  return createElement(
+    Pressable,
+    {
+      ...other,
+      disabled,
+      onPress: onPressInternal
+    },
+    children
+  );
+};
 var createNativeHardwareBackHandler = (adapter) => {
   return () => {
     if (adapter.canGoBack?.()) {
@@ -762,4 +789,4 @@ var Route2 = (props) => {
   ) : /* @__PURE__ */ jsx(Route, { ...routeProps });
 };
 
-export { ArrayContainer, ArrayItemWrapper, AutoField, AutoForm2 as AutoForm, AutoFormView2 as AutoFormView, Button, ErrorMessage, FieldWrapper, NativeEasyLayoutView, Route2 as Route, createNativeBackHandler, createNativeFormRenderer, createNativeHardwareBackHandler, createNativeHistory, createNativeRouteBackIntegration, makeNativeEasyLayout, mapNativeURLToPath, nativeAutoField, nativeSuite, registerNativeHardwareBackHandler, useNativeEasyLayout };
+export { ArrayContainer, ArrayItemWrapper, AutoField, AutoForm2 as AutoForm, AutoFormView2 as AutoFormView, Button, ErrorMessage, FieldWrapper, NativeEasyLayoutView, NavButton, Route2 as Route, createNativeBackHandler, createNativeFormRenderer, createNativeHardwareBackHandler, createNativeHistory, createNativeRouteBackIntegration, makeNativeEasyLayout, mapNativeURLToPath, nativeAutoField, nativeSuite, registerNativeHardwareBackHandler, useNativeEasyLayout };

package/native/utils/NavButton.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @packageDocumentation
+ *
+ * Native intra-application navigation button.
+ */
+import type { FC } from "react";
+import { type PressableProps } from "react-native";
+/**
+ * Props for {@link NavButton}.
+ */
+export type NavButtonProps = PressableProps & {
+    /** Relative or absolute Voltra route path. */
+    path: string;
+    /** Use adapter `replace` instead of `push` when true. */
+    replace?: boolean;
+};
+/**
+ * Render a pressable control that navigates within the current Voltra app.
+ *
+ * Relative paths resolve from the route context where this component renders.
+ *
+ * @param props - Pressable props plus the destination route path.
+ * @returns Pressable element wired to the current route adapter.
+ */
+export declare const NavButton: FC<NavButtonProps>;

package/native/utils/index.d.ts

@@ -13,6 +13,11 @@ export * from "./EasyLayout";
  * @group Layout and Navigation
  */
 export * from "./History";
+/**
+ * @category native
+ * @group Layout and Navigation
+ */
+export * from "./NavButton";
 /**
  * @category native
  * @group Layout and Navigation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resistdesign/voltra",
-  "version": "3.0.0-alpha.47",
+  "version": "3.0.0-alpha.48",
   "description": "With our powers combined!",
   "homepage": "https://voltra.app",
   "repository": "git@github.com:resistdesign/voltra.git",

package/web/index.js

@@ -1,7 +1,7 @@
-import { createEasyLayout } from '../chunk-QXYUXJKM.js';
-import { createFormRenderer, AutoFormView, AutoForm, createBrowserRouteAdapter, Route } from '../chunk-UD2ALOCE.js';
+import { createEasyLayout } from '../chunk-BSHQIRBV.js';
+import { createFormRenderer, AutoFormView, AutoForm, useRouteContext, createBrowserRouteAdapter, Route } from '../chunk-K4R2PFNG.js';
 import { ERROR_MESSAGE_CONSTANTS } from '../chunk-3HVYVX3S.js';
-import '../chunk-2JDOM6PB.js';
+import { resolveRouteAdapterPath } from '../chunk-2JDOM6PB.js';
 import { __export, __reExport } from '../chunk-I2KLQ2HA.js';
 import { createElement, useCallback, useRef } from 'react';
 import * as styledBase from 'styled-components';
@@ -648,6 +648,39 @@ var styledFactory = {
 var getEasyLayout = (extendFrom, areasExtendFrom, options = {}) => {
   return createEasyLayout(styledFactory, extendFrom, areasExtendFrom, options);
 };
+var NavLink = ({
+  path,
+  replace = false,
+  onClick,
+  title,
+  children,
+  ...other
+}) => {
+  const { adapter, adapterBasePath } = useRouteContext();
+  const href = resolveRouteAdapterPath(adapterBasePath, path);
+  const onClickInternal = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {
+      return;
+    }
+    const navigate = replace ? adapter?.replace : adapter?.push;
+    if (!navigate) {
+      return;
+    }
+    event.preventDefault();
+    navigate(path, title);
+  };
+  return createElement(
+    "a",
+    {
+      ...other,
+      href,
+      title,
+      onClick: onClickInternal
+    },
+    children
+  );
+};
 var Route2 = (props) => {
   const hasMatcherProps = typeof props.path !== "undefined" || typeof props.exact !== "undefined" || typeof props.onParamsChange !== "undefined";
   const adapterRef = useRef(null);
@@ -665,4 +698,4 @@ var Route2 = (props) => {
   ) : /* @__PURE__ */ jsx(Route, { ...routeProps });
 };
 
-export { ArrayContainer, ArrayItemWrapper, AutoField, AutoForm2 as AutoForm, AutoFormView2 as AutoFormView, ErrorMessage, FieldWrapper, Route2 as Route, createWebFormRenderer, getEasyLayout, webAutoField, webSuite };
+export { ArrayContainer, ArrayItemWrapper, AutoField, AutoForm2 as AutoForm, AutoFormView2 as AutoFormView, ErrorMessage, FieldWrapper, NavLink, Route2 as Route, createWebFormRenderer, getEasyLayout, webAutoField, webSuite };

package/web/utils/NavLink.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @packageDocumentation
+ *
+ * Web intra-application navigation link.
+ */
+import type { AnchorHTMLAttributes, FC } from "react";
+/**
+ * Props for {@link NavLink}.
+ */
+export type NavLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
+    /** Relative or absolute Voltra route path. */
+    path: string;
+    /** Use adapter `replace` instead of `push` when true. */
+    replace?: boolean;
+};
+/**
+ * Render an anchor-like control that navigates within the current Voltra app.
+ *
+ * Relative paths resolve from the route context where this component renders.
+ *
+ * @param props - Anchor props plus the destination route path.
+ * @returns Anchor element wired to the current route adapter.
+ */
+export declare const NavLink: FC<NavLinkProps>;

package/web/utils/index.d.ts

@@ -4,4 +4,5 @@
  * Web-only utilities.
  */
 export * from "./EasyLayout";
+export * from "./NavLink";
 export * from "./Route";