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

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

"use client";

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
  value: mod,
  enumerable: true
}) : target, mod));
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
  value: true
}), mod);
var WebStackView_exports = {};
__export(WebStackView_exports, {
  WebStackView: () => WebStackView
});
module.exports = __toCommonJS(WebStackView_exports);
var import_routers = require("@react-navigation/routers");
var import_react = require("react");
var import_use_latest_callback = __toESM(require("use-latest-callback"), 1);
var import_devHeadlessNote = require("../../headless/devHeadlessNote.cjs");
var import_Presentations = require("../../headless/Presentations.cjs");
var import_useStack = require("../../headless/useStack.cjs");
var import_stackStateUtils = require("./stackStateUtils.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
function WebStackView({
  state,
  navigation,
  descriptors,
  customChildren
}) {
  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_useStack.StackStateProvider, {
    state,
    descriptors,
    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadlessStackView, {
      state,
      navigation,
      descriptors,
      customChildren
    })
  });
}
function HeadlessStackView({
  state,
  navigation,
  descriptors,
  customChildren
}) {
  const stack = (0, import_useStack.useStack)();
  const presentations = (0, import_Presentations.useWebPresentations)();
  if (customChildren?.length) {
    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.Fragment, {
      children: customChildren
    });
  }
  (0, import_devHeadlessNote.devHeadlessNote)("Stack");
  const lastBaseIndex = (0, import_stackStateUtils.findLastNonOverlayIndex)(state, descriptors, options => getPresentationType(options) !== void 0);
  const baseRouteKeys = new Set(state.routes.slice(0, lastBaseIndex + 1).map(route => route.key));
  const baseFocusedKey = state.routes[lastBaseIndex]?.key;
  const overlayRoutes = state.routes.slice(lastBaseIndex + 1);
  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.Fragment, {
    children: [stack.screens.map(screen => {
      if (!baseRouteKeys.has(screen.key)) return null;
      if (screen.key === baseFocusedKey) {
        return screen.keepMounted ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.Activity, {
          mode: "visible",
          children: screen.element
        }, screen.key) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.Fragment, {
          children: screen.element
        }, screen.key);
      }
      if (!screen.keepMounted) return null;
      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.Activity, {
        mode: "hidden",
        children: screen.element
      }, screen.key);
    }), overlayRoutes.map(route => {
      const screen = stack.screens.find(entry => entry.key === route.key);
      const type = getPresentationType(descriptors[route.key]?.options);
      if (!screen || !type) return null;
      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PresentationScreen, {
        screen,
        type,
        presentations,
        onDismiss: () => navigation.dispatch({
          ...import_routers.StackActions.pop(),
          source: route.key,
          target: state.key
        })
      }, route.key);
    })]
  });
}
function PresentationScreen({
  screen,
  type,
  presentations,
  onDismiss
}) {
  const dismiss = (0, import_use_latest_callback.default)(onDismiss);
  const onOpenChange = (0, import_react.useCallback)(nextOpen => {
    if (!nextOpen) dismiss();
  }, [dismiss]);
  const [open, setOpen] = (0, import_react.useState)(false);
  (0, import_react.useEffect)(() => setOpen(true), []);
  if (type === "sheet") {
    const Sheet = presentations?.sheet;
    if (!Sheet) return screen.element;
    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Sheet, {
      open,
      onOpenChange,
      options: screen.options,
      screen,
      children: screen.element
    });
  }
  const Modal = presentations?.modal;
  if (!Modal) return screen.element;
  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Modal, {
    open,
    onOpenChange,
    options: screen.options,
    screen,
    children: screen.element
  });
}
function getPresentationType(options) {
  const presentation = options?.presentation;
  if (!presentation || presentation === "card" || presentation === "push") {
    return void 0;
  }
  if (presentation === "sheet" || presentation === "formSheet" || presentation === "pageSheet") {
    return "sheet";
  }
  return "modal";
}