one/dist/cjs/router/web/WebStackView.cjs

One is a new React Framework that makes Vite serve both native and web.

"use client";

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all) __defProp(target, name, {
    get: all[name],
    enumerable: true
  });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
      get: () => from[key],
      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
    });
  }
  return to;
};
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
  value: true
}), mod);
var WebStackView_exports = {};
__export(WebStackView_exports, {
  OverlayHost: () => OverlayHost,
  WebStackView: () => WebStackView,
  resolveOverlayRender: () => resolveOverlayRender
});
module.exports = __toCommonJS(WebStackView_exports);
var import_native = require("@react-navigation/native");
var import_native_stack = require("@react-navigation/native-stack");
var import_react = require("react");
var import_stackStateUtils = require("./stackStateUtils.cjs");
var import_ScreenRenderContext = require("./ScreenRenderContext.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
function resolveOverlayRender(options, contextRender) {
  return options?.render?.web ?? contextRender?.web;
}
function WebStackView({
  state,
  navigation,
  descriptors,
  describe
}) {
  const contextRender = (0, import_ScreenRenderContext.useStackRender)();
  const persistentSlotsRef = (0, import_react.useRef)(/* @__PURE__ */new Map());
  for (const route of state.routes) {
    const desc = descriptors[route.key];
    if (!desc) continue;
    const {
      options
    } = desc;
    if (!options.keepMounted) continue;
    if (!(0, import_stackStateUtils.isOverlayPresentation)(options)) continue;
    const Render = resolveOverlayRender(options, contextRender);
    if (!Render) continue;
    if (persistentSlotsRef.current.has(route.name)) continue;
    persistentSlotsRef.current.set(route.name, {
      routeName: route.name,
      Render,
      options,
      content: desc.render()
    });
  }
  const isOverlayCandidate = options => (0, import_stackStateUtils.isOverlayPresentation)(options) && resolveOverlayRender(options ?? void 0, contextRender) !== void 0;
  const nonOverlay = (0, import_stackStateUtils.convertStackStateToNonOverlayState)(state, descriptors, isOverlayCandidate);
  const underlyingState = {
    ...state,
    routes: nonOverlay.routes,
    index: nonOverlay.index
  };
  const lastNonOverlay = (0, import_stackStateUtils.findLastNonOverlayIndex)(state, descriptors, isOverlayCandidate);
  const trailingOverlays = state.routes.slice(lastNonOverlay + 1);
  const focusedOverlayNames = new Set(trailingOverlays.map(r => r.name));
  const regularOverlays = trailingOverlays.filter(r => !descriptors[r.key]?.options.keepMounted);
  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.Fragment, {
    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_native_stack.NativeStackView, {
      state: underlyingState,
      descriptors,
      navigation,
      describe
    }), regularOverlays.map(route => /* @__PURE__ */(0, import_jsx_runtime.jsx)(OverlayHost, {
      route,
      descriptor: descriptors[route.key],
      contextRender,
      open: true,
      onDismiss: () => navigation.dispatch({
        ...import_native.StackActions.pop(),
        source: route.key,
        target: state.key
      })
    }, route.key)), Array.from(persistentSlotsRef.current.values()).map(slot => /* @__PURE__ */(0, import_jsx_runtime.jsx)(PersistentOverlayHost, {
      slot,
      open: focusedOverlayNames.has(slot.routeName),
      onDismiss: () => {
        const live = state.routes.find(r => r.name === slot.routeName);
        if (live) {
          navigation.dispatch({
            ...import_native.StackActions.pop(),
            source: live.key,
            target: state.key
          });
        }
      }
    }, slot.routeName))]
  });
}
function OverlayHost({
  route,
  descriptor,
  contextRender,
  open,
  onDismiss
}) {
  const dismiss = useStableCallback(onDismiss);
  const options = descriptor.options;
  const Render = resolveOverlayRender(options, contextRender);
  const content = descriptor.render();
  if (!Render || !(0, import_stackStateUtils.isOverlayPresentation)(options)) {
    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.Fragment, {
      children: content
    });
  }
  const renderProps = {
    routeKey: route.key,
    routeName: route.name,
    presentation: options.presentation,
    open,
    dismiss,
    dismissible: options.gestureEnabled ?? true,
    sheetAllowedDetents: options.sheetAllowedDetents,
    sheetGrabberVisible: options.sheetGrabberVisible,
    sheetCornerRadius: options.sheetCornerRadius,
    sheetInitialDetentIndex: options.sheetInitialDetentIndex,
    sheetLargestUndimmedDetentIndex: options.sheetLargestUndimmedDetentIndex,
    sheetExpandsWhenScrolledToEdge: options.sheetExpandsWhenScrolledToEdge,
    children: content
  };
  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Render, {
    ...renderProps
  });
}
function PersistentOverlayHost({
  slot,
  open,
  onDismiss
}) {
  const dismiss = useStableCallback(onDismiss);
  const {
    Render,
    options,
    content,
    routeName
  } = slot;
  const renderProps = {
    routeKey: `__keepMounted:${routeName}`,
    routeName,
    presentation: options.presentation,
    open,
    dismiss,
    dismissible: options.gestureEnabled ?? true,
    sheetAllowedDetents: options.sheetAllowedDetents,
    sheetGrabberVisible: options.sheetGrabberVisible,
    sheetCornerRadius: options.sheetCornerRadius,
    sheetInitialDetentIndex: options.sheetInitialDetentIndex,
    sheetLargestUndimmedDetentIndex: options.sheetLargestUndimmedDetentIndex,
    sheetExpandsWhenScrolledToEdge: options.sheetExpandsWhenScrolledToEdge,
    children: content
  };
  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Render, {
    ...renderProps
  });
}
function useStableCallback(fn) {
  const [ref] = (0, import_react.useState)(() => ({
    current: fn
  }));
  ref.current = fn;
  return (0, import_react.useCallback)((...args) => ref.current(...args), [ref]);
}