@sigmela/router 0.3.6 → 0.4.0

package/lib/module/ScreenStack/animationHelpers.js

@@ -1,87 +0,0 @@
-"use strict";
-
-import { isModalLikePresentation } from "../types.js";
-export function getPresentationTypeClass(presentation) {
-  switch (presentation) {
-    case 'push':
-      return 'push';
-    case 'modal':
-      return 'modal';
-    case 'modalRight':
-      return 'modal-right';
-    case 'transparentModal':
-      return 'transparent-modal';
-    case 'containedModal':
-      return 'contained-modal';
-    case 'containedTransparentModal':
-      return 'contained-transparent-modal';
-    case 'fullScreenModal':
-      return 'fullscreen-modal';
-    case 'formSheet':
-      return 'formsheet';
-    case 'pageSheet':
-      return 'pagesheet';
-    case 'sheet':
-      return 'sheet';
-    default:
-      return 'push';
-  }
-}
-export function getAnimationTypeForPresentation(presentation, isEntering, direction) {
-  const suffix = isEntering ? 'enter' : 'exit';
-  const presentationClass = getPresentationTypeClass(presentation);
-  if (presentation === 'push') {
-    return direction === 'forward' ? `push-${suffix}` : `pop-${suffix}`;
-  }
-  return `${presentationClass}-${suffix}`;
-}
-export function computeAnimationType(_key, isInStack, isTop, direction, presentation, isInitialPhase, animated = true, isBulkRemoval = false) {
-  if (!animated) {
-    return 'no-animate';
-  }
-  if (isInitialPhase) {
-    return 'none';
-  }
-
-  // When multiple screens are removed at once (bulk removal), don't animate them
-  if (isBulkRemoval && !isInStack) {
-    return 'no-animate';
-  }
-  const isEntering = isInStack && isTop;
-  const isModalLike = isModalLikePresentation(presentation);
-  if (isModalLike) {
-    if (!isInStack) {
-      return getAnimationTypeForPresentation(presentation, false, direction);
-    }
-    if (isEntering) {
-      return getAnimationTypeForPresentation(presentation, true, direction);
-    }
-
-    // Modal-like screen that's NOT top (background) - animate like push
-    // This happens when navigating inside a modal stack
-    if (direction === 'forward') {
-      return 'push-background';
-    } else {
-      return 'pop-background';
-    }
-  }
-  if (!isInStack) {
-    if (direction === 'forward') {
-      return 'push-exit';
-    } else {
-      return 'pop-exit';
-    }
-  }
-  if (isTop) {
-    if (direction === 'forward') {
-      return 'push-enter';
-    } else {
-      return 'pop-enter';
-    }
-  }
-  if (direction === 'forward') {
-    return 'push-background';
-  } else {
-    return 'pop-background';
-  }
-}

package/lib/module/ScreenStack/index.js

@@ -1,3 +0,0 @@
-"use strict";
-
-export { ScreenStack } from './ScreenStack';

package/lib/module/ScreenStackItem/ScreenStackItem.js

@@ -1,70 +0,0 @@
-"use strict";
-
-import { ScreenStackItem as RNSScreenStackItem } from 'react-native-screens';
-import { RouteLocalContext, useRouter } from "../RouterContext.js";
-import { ScreenStackSheetItem } from "../ScreenStackSheetItem/index.js";
-import { StyleSheet } from 'react-native';
-import { memo, useMemo, useCallback } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ScreenStackItem = /*#__PURE__*/memo(({
-  item,
-  stackId,
-  stackAnimation,
-  appearance
-}) => {
-  const {
-    header,
-    stackPresentation,
-    ...screenProps
-  } = item.options || {};
-
-  // On native, modalRight behaves as regular modal
-  const nativePresentation = stackPresentation === 'modalRight' ? 'modal' : stackPresentation;
-  const route = useMemo(() => ({
-    presentation: stackPresentation ?? 'push',
-    params: item.params,
-    query: item.query,
-    pattern: item.pattern,
-    path: item.path
-  }), [stackPresentation, item.params, item.query, item.pattern, item.path]);
-  const router = useRouter();
-  const onDismissed = useCallback(() => {
-    if (stackId) {
-      const history = router.getStackHistory(stackId);
-      const topKey = history.length ? history[history.length - 1]?.key : null;
-      if (topKey && topKey === item.key) {
-        router.goBack();
-      }
-    }
-  }, [stackId, router, item.key]);
-  const headerConfig = useMemo(() => ({
-    ...header,
-    hidden: !header?.title || header?.hidden,
-    backgroundColor: appearance?.header?.backgroundColor ?? 'transparent'
-  }), [header, appearance?.header?.backgroundColor]);
-  if (route.presentation === 'sheet') {
-    return /*#__PURE__*/_jsx(ScreenStackSheetItem, {
-      appearance: appearance?.sheet,
-      onDismissed: onDismissed,
-      route: route,
-      item: item
-    });
-  }
-  return /*#__PURE__*/_jsx(RNSScreenStackItem, {
-    ...screenProps,
-    screenId: item.key,
-    onDismissed: onDismissed,
-    style: StyleSheet.absoluteFill,
-    contentStyle: appearance?.screen,
-    headerConfig: headerConfig,
-    stackPresentation: nativePresentation,
-    stackAnimation: stackAnimation ?? item.options?.stackAnimation,
-    children: /*#__PURE__*/_jsx(RouteLocalContext.Provider, {
-      value: route,
-      children: /*#__PURE__*/_jsx(item.component, {
-        ...item.passProps,
-        appearance: appearance
-      })
-    })
-  }, item.key);
-});

package/lib/module/ScreenStackItem/ScreenStackItem.types.js

@@ -1,3 +0,0 @@
-"use strict";
-
-export {};

package/lib/module/ScreenStackItem/ScreenStackItem.web.js

@@ -1,171 +0,0 @@
-"use strict";
-
-import { RouteLocalContext, useRouter } from "../RouterContext.js";
-import { isModalLikePresentation } from "../types.js";
-import { memo, useMemo, useCallback, useEffect, useRef } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { useScreenStackItemsContext } from "../ScreenStack/ScreenStackContext.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ScreenStackItem = /*#__PURE__*/memo(({
-  item,
-  appearance,
-  style
-}) => {
-  const itemsContext = useScreenStackItemsContext();
-  const router = useRouter();
-  const containerRef = useRef(null);
-  const debugEnabled = router.isDebugEnabled();
-  const devLog = useCallback((msg, data) => {
-    if (!debugEnabled) return;
-    console.log(msg, data !== undefined ? JSON.stringify(data) : '');
-  }, [debugEnabled]);
-  const key = item.key;
-  const itemState = itemsContext.items[key];
-  const presentationType = itemState?.presentationType;
-  const animationType = itemState?.animationType;
-  const phase = itemState?.phase;
-  const transitionStatus = itemState?.transitionStatus;
-  const zIndex = itemState?.zIndex ?? 0;
-  const presentation = item.options?.stackPresentation ?? 'push';
-  const isModalLike = isModalLikePresentation(presentation);
-  const className = useMemo(() => {
-    const classes = ['screen-stack-item'];
-    if (presentationType) {
-      classes.push(presentationType);
-    }
-    if (animationType) {
-      classes.push(animationType);
-    }
-    if (transitionStatus) {
-      classes.push(`transition-${transitionStatus}`);
-    }
-    if (phase) {
-      classes.push(`phase-${phase}`);
-    }
-    devLog('[ScreenStackItem] className', {
-      key: item.key,
-      path: item.path,
-      presentationType,
-      animationType,
-      phase,
-      transitionStatus,
-      className: classes.join(' ')
-    });
-    return classes.join(' ');
-  }, [presentationType, animationType, transitionStatus, phase, devLog, item.key, item.path]);
-  const mergedStyle = useMemo(() => ({
-    flex: 1,
-    ...style,
-    zIndex
-  }), [style, zIndex]);
-  const modalContainerStyle = useMemo(() => {
-    if (!isModalLike || !item.options?.maxWidth) {
-      return undefined;
-    }
-    return {
-      maxWidth: `${item.options.maxWidth}px`
-    };
-  }, [isModalLike, item.options?.maxWidth]);
-  const routeValue = useMemo(() => ({
-    presentation,
-    params: item.params,
-    query: item.query,
-    pattern: item.pattern,
-    path: item.path
-  }), [presentation, item.params, item.query, item.pattern, item.path]);
-  const handleDismiss = useCallback(() => router.dismiss(), [router]);
-  const handleDismissKeyDown = useCallback(e => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault?.();
-      router.dismiss();
-    }
-  }, [router]);
-
-  // Escape key handler for modals — only dismiss if this is the topmost modal
-  useEffect(() => {
-    if (!isModalLike) return;
-    const handler = e => {
-      if (e.key !== 'Escape') return;
-      const allModals = document.querySelectorAll('[aria-modal="true"]');
-      if (allModals.length > 0) {
-        const last = allModals[allModals.length - 1] ?? null;
-        if (!containerRef.current?.contains(last)) return;
-      }
-      router.dismiss();
-    };
-    document.addEventListener('keydown', handler);
-    return () => document.removeEventListener('keydown', handler);
-  }, [isModalLike, router]);
-
-  // Focus trap for modals — re-queries focusable elements on each Tab
-  useEffect(() => {
-    if (!isModalLike || !containerRef.current) return;
-    const container = containerRef.current;
-    const FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-    const focusable = container.querySelectorAll(FOCUSABLE);
-    focusable[0]?.focus();
-    const trap = e => {
-      if (e.key !== 'Tab') return;
-      const els = container.querySelectorAll(FOCUSABLE);
-      if (!els.length) return;
-      const first = els[0];
-      const last = els[els.length - 1];
-      if (e.shiftKey && document.activeElement === first) {
-        e.preventDefault();
-        last?.focus();
-      } else if (!e.shiftKey && document.activeElement === last) {
-        e.preventDefault();
-        first?.focus();
-      }
-    };
-    container.addEventListener('keydown', trap);
-    return () => container.removeEventListener('keydown', trap);
-  }, [isModalLike]);
-  if (!itemState) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs("div", {
-    ref: containerRef,
-    style: mergedStyle,
-    className: className,
-    children: [isModalLike && /*#__PURE__*/_jsx("div", {
-      className: "stack-modal-overlay",
-      onClick: handleDismiss,
-      onKeyDown: handleDismissKeyDown,
-      role: "button",
-      "aria-label": "Close modal",
-      tabIndex: 0
-    }), /*#__PURE__*/_jsx("div", {
-      className: isModalLike ? 'stack-modal-container' : 'stack-screen-container',
-      style: modalContainerStyle,
-      ...(isModalLike ? {
-        'role': 'dialog',
-        'aria-modal': true,
-        'aria-label': item.pattern || 'Dialog'
-      } : undefined),
-      children: appearance?.screen ? /*#__PURE__*/_jsx(View, {
-        style: [appearance?.screen, styles.flex],
-        children: /*#__PURE__*/_jsx(RouteLocalContext.Provider, {
-          value: routeValue,
-          children: /*#__PURE__*/_jsx(item.component, {
-            ...(item.passProps || {}),
-            appearance: appearance
-          })
-        })
-      }) : /*#__PURE__*/_jsx(RouteLocalContext.Provider, {
-        value: routeValue,
-        children: /*#__PURE__*/_jsx(item.component, {
-          ...(item.passProps || {}),
-          appearance: appearance
-        })
-      })
-    })]
-  });
-}, (prevProps, nextProps) => {
-  return prevProps.item.key === nextProps.item.key && prevProps.item === nextProps.item && prevProps.appearance === nextProps.appearance && prevProps.style === nextProps.style;
-});
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1
-  }
-});

package/lib/module/ScreenStackItem/index.js

@@ -1,3 +0,0 @@
-"use strict";
-
-export { ScreenStackItem } from './ScreenStackItem';

package/lib/module/ScreenStackSheetItem/ScreenStackSheetItem.native.js

@@ -1,70 +0,0 @@
-"use strict";
-
-import { ScreenStackItem as RNSScreenStackItem } from 'react-native-screens';
-import { NativeSheetView, Commands } from '@sigmela/native-sheet';
-import { RouteLocalContext, useRouter } from "../RouterContext.js";
-import { memo, useRef, useEffect, useCallback } from 'react';
-import { StyleSheet } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ScreenStackSheetItem = /*#__PURE__*/memo(props => {
-  const {
-    item,
-    onDismissed,
-    route,
-    appearance
-  } = props;
-  const {
-    convertModalToSheetForAndroid
-  } = item.options || {};
-  const headerConfig = {
-    hidden: true
-  };
-  const ref = useRef(null);
-  const router = useRouter();
-  useEffect(() => {
-    if (route.presentation === 'sheet') {
-      router.registerSheetDismisser(item.key, () => {
-        if (ref.current) {
-          Commands.dismiss(ref.current);
-        }
-      });
-      return () => router.unregisterSheetDismisser(item.key);
-    }
-    return undefined;
-  }, [route.presentation, router, item.key]);
-  const handleSheetDismissed = useCallback(() => {
-    router.unregisterSheetDismisser(item.key);
-    onDismissed();
-  }, [router, item.key, onDismissed]);
-  return /*#__PURE__*/_jsx(RNSScreenStackItem, {
-    stackPresentation: "transparentModal",
-    headerConfig: headerConfig,
-    style: StyleSheet.absoluteFill,
-    contentStyle: styles.content,
-    screenId: item.key,
-    stackAnimation: "none",
-    onDismissed: onDismissed,
-    children: /*#__PURE__*/_jsx(NativeSheetView, {
-      containerBackgroundColor: appearance?.backgroundColor,
-      cornerRadius: appearance?.cornerRadius ?? 18,
-      onDismissed: handleSheetDismissed,
-      style: styles.flex,
-      ref: ref,
-      fullscreenTopInset: convertModalToSheetForAndroid ? appearance?.androidFullScreenTopInset ?? 40 : undefined,
-      children: /*#__PURE__*/_jsx(RouteLocalContext.Provider, {
-        value: route,
-        children: /*#__PURE__*/_jsx(item.component, {
-          ...item.passProps
-        })
-      })
-    })
-  }, `${item.key}-sheet-item`);
-});
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1
-  },
-  content: {
-    backgroundColor: 'transparent'
-  }
-});

package/lib/module/ScreenStackSheetItem/ScreenStackSheetItem.web.js

@@ -1,5 +0,0 @@
-"use strict";
-
-export const ScreenStackSheetItem = () => {
-  return null;
-};

package/lib/module/ScreenStackSheetItem/index.js

@@ -1,3 +0,0 @@
-"use strict";
-
-export { ScreenStackSheetItem } from './ScreenStackSheetItem';

package/lib/module/SplitView/RenderSplitView.native.js

@@ -1,101 +0,0 @@
-"use strict";
-
-import { ScreenStackItem } from "../ScreenStackItem/index.js";
-import { ScreenStack } from "../ScreenStack/index.js";
-import { SplitViewContext } from "./SplitViewContext.js";
-import { useRouter } from "../RouterContext.js";
-import { memo, useMemo, useRef, useState, useEffect, startTransition } from 'react';
-import { StyleSheet } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-const EMPTY_HISTORY = [];
-/**
- * On native, SplitView renders primary and secondary screens in a SINGLE
- * ScreenStack to get native push/pop animations.
- *
- * The combined history is: [...primaryHistory, ...secondaryHistory]
- * This way, navigating from primary to secondary is a native push.
- *
- * History starts empty and is populated via useEffect + startTransition,
- * following the pattern from react-native-screens' BottomTabsContainer.
- * This lets the parent Screen attach before child ScreenStackItems mount.
- */
-export const RenderSplitView = /*#__PURE__*/memo(({
-  splitView,
-  appearance
-}) => {
-  const router = useRouter();
-  const primaryId = splitView.primary.getId();
-  const secondaryId = splitView.secondary.getId();
-
-  // Start with empty history — useEffect populates via startTransition.
-  const hydratedRef = useRef(false);
-  const [primaryHistory, setPrimaryHistory] = useState(EMPTY_HISTORY);
-  const [secondaryHistory, setSecondaryHistory] = useState(EMPTY_HISTORY);
-  useEffect(() => {
-    hydratedRef.current = true;
-    const updatePrimary = () => {
-      startTransition(() => {
-        setPrimaryHistory(router.getStackHistory(primaryId));
-      });
-    };
-    const updateSecondary = () => {
-      startTransition(() => {
-        setSecondaryHistory(router.getStackHistory(secondaryId));
-      });
-    };
-    const unsub1 = router.subscribeStack(primaryId, updatePrimary);
-    const unsub2 = router.subscribeStack(secondaryId, updateSecondary);
-
-    // Sync in case the store changed between useState init and useEffect
-    updatePrimary();
-    updateSecondary();
-    return () => {
-      unsub1();
-      unsub2();
-    };
-  }, [router, primaryId, secondaryId]);
-
-  // Fallback: if primary is empty, seed with first route.
-  // Skip the seed during the initial empty mount (before useEffect
-  // hydrates history) so no ScreenStackItems mount before the parent Fragment attaches.
-  const primaryHistoryToRender = useMemo(() => {
-    if (primaryHistory.length > 0) {
-      return primaryHistory;
-    }
-    if (!hydratedRef.current) return [];
-    const first = splitView.primary.getFirstRoute();
-    if (!first) return [];
-    const activePath = router.getActiveRoute()?.path;
-    return [{
-      key: `splitview-seed-${primaryId}`,
-      routeId: first.routeId,
-      component: first.component,
-      options: first.options,
-      stackId: primaryId,
-      pattern: first.path,
-      path: activePath ?? first.path
-    }];
-  }, [primaryHistory, splitView.primary, primaryId, router]);
-
-  // Combine histories: primary screens first, then secondary screens on top
-  // This gives native push animation when navigating from primary to secondary
-  const combinedHistory = useMemo(() => {
-    return [...primaryHistoryToRender, ...secondaryHistory];
-  }, [primaryHistoryToRender, secondaryHistory]);
-  return /*#__PURE__*/_jsx(SplitViewContext.Provider, {
-    value: splitView,
-    children: /*#__PURE__*/_jsx(ScreenStack, {
-      style: styles.container,
-      children: combinedHistory.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
-        appearance: appearance,
-        stackId: item.stackId,
-        item: item
-      }, `splitview-${item.key}`))
-    })
-  });
-});
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  }
-});

package/lib/module/SplitView/RenderSplitView.web.js

@@ -1,107 +0,0 @@
-"use strict";
-
-import { StackRenderer } from "../StackRenderer.js";
-import { SplitViewContext } from "./SplitViewContext.js";
-import { useRouter } from "../RouterContext.js";
-import { ScreenStackConfigContext } from "../ScreenStack/ScreenStackContext.js";
-import { memo, useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StackSliceRenderer = /*#__PURE__*/memo(({
-  stack,
-  appearance,
-  fallbackToFirstRoute
-}) => {
-  const router = useRouter();
-  const stackId = stack.getId();
-  const subscribe = useCallback(cb => router.subscribeStack(stackId, cb), [router, stackId]);
-  const get = useCallback(() => router.getStackHistory(stackId), [router, stackId]);
-  const history = useSyncExternalStore(subscribe, get, get);
-  let historyToRender = history;
-
-  // When a container route (like /mail -> SplitView) is active, the child stack can be empty,
-  // yet we still want to render its root screen. We keep Router history intact and provide a
-  // renderer-only fallback item.
-  if (fallbackToFirstRoute && historyToRender.length === 0) {
-    const first = stack.getFirstRoute();
-    if (first) {
-      const activePath = router.getActiveRoute()?.path;
-      historyToRender = [{
-        key: `splitview-seed-${stackId}`,
-        routeId: first.routeId,
-        component: first.component,
-        options: first.options,
-        stackId,
-        pattern: first.path,
-        path: activePath ?? first.path
-      }];
-    }
-  }
-  return /*#__PURE__*/_jsx(StackRenderer, {
-    appearance: appearance,
-    stackId: stackId,
-    history: historyToRender
-  });
-});
-StackSliceRenderer.displayName = 'SplitViewStackSliceRenderer';
-export const RenderSplitView = /*#__PURE__*/memo(({
-  splitView,
-  appearance
-}) => {
-  const [isWide, setIsWide] = useState(() => {
-    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
-      return false;
-    }
-    return window.matchMedia(`(min-width: ${splitView.minWidth}px)`).matches;
-  });
-  useEffect(() => {
-    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
-      return;
-    }
-    const mq = window.matchMedia(`(min-width: ${splitView.minWidth}px)`);
-    const onChange = ev => setIsWide(ev.matches);
-
-    // Sync immediately.
-    setIsWide(mq.matches);
-    if (typeof mq.addEventListener === 'function') {
-      mq.addEventListener('change', onChange);
-      return () => mq.removeEventListener('change', onChange);
-    }
-
-    // Safari < 14 fallback (deprecated, but still needed).
-    const mqAny = mq;
-    mqAny.addListener?.(onChange);
-    return () => mqAny.removeListener?.(onChange);
-  }, [splitView.minWidth]);
-  const containerStyle = useMemo(() => {
-    return {
-      '--split-view-primary-max-width': `${splitView.primaryMaxWidth}px`
-    };
-  }, [splitView.primaryMaxWidth]);
-  const secondaryConfig = useMemo(() => ({
-    animateFirstScreenAfterEmpty: !isWide
-  }), [isWide]);
-  return /*#__PURE__*/_jsx(SplitViewContext.Provider, {
-    value: splitView,
-    children: /*#__PURE__*/_jsxs("div", {
-      className: "split-view-container",
-      style: containerStyle,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "split-view-primary",
-        children: /*#__PURE__*/_jsx(StackSliceRenderer, {
-          appearance: appearance,
-          stack: splitView.primary,
-          fallbackToFirstRoute: true
-        })
-      }), /*#__PURE__*/_jsx("div", {
-        className: "split-view-secondary",
-        children: /*#__PURE__*/_jsx(ScreenStackConfigContext.Provider, {
-          value: secondaryConfig,
-          children: /*#__PURE__*/_jsx(StackSliceRenderer, {
-            appearance: appearance,
-            stack: splitView.secondary
-          })
-        })
-      })]
-    })
-  });
-});