expo-router 5.2.0-canary-20250701-6a945c5 → 5.2.0-canary-20250713-8f814f8

package/build/modal/web/ModalStackRouteDrawer.web.js

@@ -0,0 +1,161 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalStackRouteDrawer = ModalStackRouteDrawer;
+const react_1 = __importDefault(require("react"));
+const vaul_1 = require("vaul");
+const modalStyles_1 = __importDefault(require("./modalStyles"));
+const utils_1 = require("./utils");
+function ModalStackRouteDrawer({ routeKey, options, renderScreen, onDismiss, themeColors, }) {
+    const [open, setOpen] = react_1.default.useState(true);
+    // Determine sheet vs. modal with an SSR-safe hook. The first render (during
+    // hydration) always assumes mobile/sheet to match the server markup; an
+    // effect then updates the state after mount if the viewport is desktop.
+    const isDesktop = (0, utils_1.useIsDesktop)();
+    const isSheet = !isDesktop;
+    // Resolve snap points logic.
+    const allowed = options.sheetAllowedDetents;
+    const isArrayDetents = Array.isArray(allowed);
+    const useCustomSnapPoints = isArrayDetents && !(allowed.length === 1 && allowed[0] === 1);
+    let snapPoints = useCustomSnapPoints
+        ? allowed
+        : undefined;
+    if (!isSheet) {
+        snapPoints = [1];
+    }
+    const [snap, setSnap] = react_1.default.useState(useCustomSnapPoints && isArrayDetents ? allowed[0] : 1);
+    // Update the snap value when custom snap points change.
+    react_1.default.useEffect(() => {
+        if (isSheet) {
+            const next = useCustomSnapPoints && isArrayDetents ? allowed[0] : 1;
+            setSnap(next);
+        }
+        else {
+            // Desktop modal always fixed snap at 1
+            setSnap(1);
+        }
+    }, [isSheet, useCustomSnapPoints, isArrayDetents, allowed]);
+    // Map react-native-screens ios sheet undimmed logic to Vaul's fadeFromIndex
+    const fadeFromIndex = isSheet
+        ? options.sheetLargestUndimmedDetentIndex === 'last'
+            ? (snapPoints?.length ?? 0)
+            : typeof options.sheetLargestUndimmedDetentIndex === 'number'
+                ? options.sheetLargestUndimmedDetentIndex + 1
+                : 0
+        : 0;
+    // --- Styling -----------------------------------------------------------
+    // Using CSS variables so defaults live in CSS and can be overridden via props.
+    const modalStyleVars = {
+        backgroundColor: themeColors.background,
+    };
+    if (!isSheet) {
+        if (options.webModalStyle?.width) {
+            modalStyleVars['--expo-router-modal-width'] =
+                typeof options.webModalStyle.width === 'number'
+                    ? `${options.webModalStyle.width}px`
+                    : options.webModalStyle.width;
+            modalStyleVars['--expo-router-modal-max-width'] =
+                typeof options.webModalStyle.width === 'number'
+                    ? `${options.webModalStyle.width}px`
+                    : options.webModalStyle.width;
+            // Also set explicit width so browsers that ignore CSS vars in `width` prop still work.
+            modalStyleVars.width =
+                typeof options.webModalStyle.width === 'number'
+                    ? `${options.webModalStyle.width}px`
+                    : options.webModalStyle.width;
+        }
+        // Min width override
+        if (options.webModalStyle?.minWidth) {
+            const mw = typeof options.webModalStyle.minWidth === 'number'
+                ? `${options.webModalStyle.minWidth}px`
+                : options.webModalStyle.minWidth;
+            modalStyleVars['--expo-router-modal-min-width'] = mw;
+            modalStyleVars.minWidth = mw;
+        }
+        if (options.webModalStyle?.height) {
+            const h = typeof options.webModalStyle.height === 'number'
+                ? `${options.webModalStyle.height}px`
+                : options.webModalStyle.height;
+            modalStyleVars['--expo-router-modal-height'] = h;
+            modalStyleVars.maxHeight = h;
+            modalStyleVars.height = h;
+            modalStyleVars.minHeight = h;
+        }
+        // Separate min-height override (takes precedence over modalHeight)
+        if (options.webModalStyle?.minHeight) {
+            const mh = typeof options.webModalStyle.minHeight === 'number'
+                ? `${options.webModalStyle.minHeight}px`
+                : options.webModalStyle.minHeight;
+            modalStyleVars['--expo-router-modal-min-height'] = mh;
+            modalStyleVars.minHeight = mh;
+        }
+    }
+    const fitToContents = isSheet && options.sheetAllowedDetents === 'fitToContents';
+    if (fitToContents) {
+        modalStyleVars.height = 'auto';
+        modalStyleVars.minHeight = 'auto';
+        // Allow sheet to grow with content but never exceed viewport height
+        modalStyleVars.maxHeight = 'calc(100vh)';
+    }
+    // Apply corner radius (default 10px)
+    const radiusValue = options.sheetCornerRadius ?? 10;
+    const radiusCss = typeof radiusValue === 'number' ? `${radiusValue}px` : radiusValue;
+    if (options.webModalStyle?.border) {
+        modalStyleVars['--expo-router-modal-border'] = options.webModalStyle.border;
+    }
+    if (isSheet) {
+        // Only top corners for mobile sheet
+        modalStyleVars.borderTopLeftRadius = radiusCss;
+        modalStyleVars.borderTopRightRadius = radiusCss;
+        // Only apply CSS var override if a custom corner radius was provided
+        if (options.sheetCornerRadius) {
+            modalStyleVars['--expo-router-modal-border-radius'] = radiusCss;
+        }
+    }
+    else {
+        // All corners for desktop modal
+        if (options.sheetCornerRadius) {
+            modalStyleVars.borderRadius = radiusCss;
+            modalStyleVars['--expo-router-modal-border-radius'] = radiusCss;
+        }
+    }
+    // --- End Styling -----------------------------------------------------------
+    const handleOpenChange = (open) => {
+        if (!open)
+            onDismiss();
+    };
+    // Props that only make sense for sheets
+    const sheetProps = isSheet
+        ? {
+            snapPoints: snapPoints,
+            activeSnapPoint: snap,
+            setActiveSnapPoint: setSnap,
+            fadeFromIndex,
+        }
+        : {};
+    return (<vaul_1.Drawer.Root key={`${routeKey}-${isSheet ? 'sheet' : 'modal'}`} open={open} dismissible={options.gestureEnabled ?? true} onAnimationEnd={handleOpenChange} shouldScaleBackground autoFocus onOpenChange={setOpen} {...sheetProps}>
+      <vaul_1.Drawer.Portal>
+        <vaul_1.Drawer.Overlay className={modalStyles_1.default.overlay} style={options.webModalStyle?.overlayBackground
+            ? {
+                '--expo-router-modal-overlay-background': options.webModalStyle.overlayBackground,
+            }
+            : undefined}/>
+        <vaul_1.Drawer.Content aria-describedby="modal-description" className={modalStyles_1.default.drawerContent} style={{
+            pointerEvents: 'none',
+            ...(fitToContents ? { height: 'auto' } : null),
+        }}>
+          <div className={modalStyles_1.default.modal} data-presentation={isSheet ? 'formSheet' : 'modal'} style={modalStyleVars}>
+            {/* TODO:(@Hirbod) Figure out how to add title and description to the modal for screen readers in a meaningful way */}
+            <vaul_1.Drawer.Title about="" aria-describedby="" className={modalStyles_1.default.srOnly}/>
+            <vaul_1.Drawer.Description about="" className={modalStyles_1.default.srOnly}/>
+            {/* Render the screen content */}
+            <div className={modalStyles_1.default.modalBody}>{renderScreen()}</div>
+          </div>
+        </vaul_1.Drawer.Content>
+      </vaul_1.Drawer.Portal>
+    </vaul_1.Drawer.Root>);
+}
+//# sourceMappingURL=ModalStackRouteDrawer.web.js.map

package/build/modal/web/ModalStackRouteDrawer.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalStackRouteDrawer.web.js","sourceRoot":"","sources":["../../../src/modal/web/ModalStackRouteDrawer.web.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\nimport React from 'react';\nimport { Drawer } from 'vaul';\n\nimport modalStyles from './modalStyles';\nimport { CSSWithVars } from './types';\nimport { useIsDesktop } from './utils';\nimport { ExtendedStackNavigationOptions } from '../../layouts/StackClient';\n\nfunction ModalStackRouteDrawer({\n  routeKey,\n  options,\n  renderScreen,\n  onDismiss,\n  themeColors,\n}: {\n  routeKey: string;\n  options: ExtendedStackNavigationOptions;\n  renderScreen: () => React.ReactNode;\n  onDismiss: () => void;\n  themeColors: { card: string; background: string };\n}) {\n  const [open, setOpen] = React.useState(true);\n  // Determine sheet vs. modal with an SSR-safe hook. The first render (during\n  // hydration) always assumes mobile/sheet to match the server markup; an\n  // effect then updates the state after mount if the viewport is desktop.\n  const isDesktop = useIsDesktop();\n  const isSheet = !isDesktop;\n\n  // Resolve snap points logic.\n  const allowed = options.sheetAllowedDetents;\n\n  const isArrayDetents = Array.isArray(allowed);\n  const useCustomSnapPoints = isArrayDetents && !(allowed.length === 1 && allowed[0] === 1);\n\n  let snapPoints: (number | string)[] | undefined = useCustomSnapPoints\n    ? (allowed as (number | string)[])\n    : undefined;\n\n  if (!isSheet) {\n    snapPoints = [1];\n  }\n\n  const [snap, setSnap] = React.useState<number | string | null>(\n    useCustomSnapPoints && isArrayDetents ? allowed[0] : 1\n  );\n\n  // Update the snap value when custom snap points change.\n  React.useEffect(() => {\n    if (isSheet) {\n      const next = useCustomSnapPoints && isArrayDetents ? allowed[0] : 1;\n      setSnap(next);\n    } else {\n      // Desktop modal always fixed snap at 1\n      setSnap(1);\n    }\n  }, [isSheet, useCustomSnapPoints, isArrayDetents, allowed]);\n\n  // Map react-native-screens ios sheet undimmed logic to Vaul's fadeFromIndex\n  const fadeFromIndex = isSheet\n    ? options.sheetLargestUndimmedDetentIndex === 'last'\n      ? (snapPoints?.length ?? 0)\n      : typeof options.sheetLargestUndimmedDetentIndex === 'number'\n        ? options.sheetLargestUndimmedDetentIndex + 1\n        : 0\n    : 0;\n\n  // --- Styling -----------------------------------------------------------\n\n  // Using CSS variables so defaults live in CSS and can be overridden via props.\n  const modalStyleVars: CSSWithVars = {\n    backgroundColor: themeColors.background,\n  };\n\n  if (!isSheet) {\n    if (options.webModalStyle?.width) {\n      modalStyleVars['--expo-router-modal-width'] =\n        typeof options.webModalStyle.width === 'number'\n          ? `${options.webModalStyle.width}px`\n          : options.webModalStyle.width;\n\n      modalStyleVars['--expo-router-modal-max-width'] =\n        typeof options.webModalStyle.width === 'number'\n          ? `${options.webModalStyle.width}px`\n          : options.webModalStyle.width;\n\n      // Also set explicit width so browsers that ignore CSS vars in `width` prop still work.\n      modalStyleVars.width =\n        typeof options.webModalStyle.width === 'number'\n          ? `${options.webModalStyle.width}px`\n          : options.webModalStyle.width;\n    }\n\n    // Min width override\n    if (options.webModalStyle?.minWidth) {\n      const mw =\n        typeof options.webModalStyle.minWidth === 'number'\n          ? `${options.webModalStyle.minWidth}px`\n          : options.webModalStyle.minWidth;\n      modalStyleVars['--expo-router-modal-min-width'] = mw;\n      modalStyleVars.minWidth = mw;\n    }\n\n    if (options.webModalStyle?.height) {\n      const h =\n        typeof options.webModalStyle.height === 'number'\n          ? `${options.webModalStyle.height}px`\n          : options.webModalStyle.height;\n      modalStyleVars['--expo-router-modal-height'] = h;\n      modalStyleVars.maxHeight = h;\n      modalStyleVars.height = h;\n      modalStyleVars.minHeight = h;\n    }\n\n    // Separate min-height override (takes precedence over modalHeight)\n    if (options.webModalStyle?.minHeight) {\n      const mh =\n        typeof options.webModalStyle.minHeight === 'number'\n          ? `${options.webModalStyle.minHeight}px`\n          : options.webModalStyle.minHeight;\n      modalStyleVars['--expo-router-modal-min-height'] = mh;\n      modalStyleVars.minHeight = mh;\n    }\n  }\n\n  const fitToContents = isSheet && options.sheetAllowedDetents === 'fitToContents';\n\n  if (fitToContents) {\n    modalStyleVars.height = 'auto';\n    modalStyleVars.minHeight = 'auto';\n    // Allow sheet to grow with content but never exceed viewport height\n    modalStyleVars.maxHeight = 'calc(100vh)';\n  }\n\n  // Apply corner radius (default 10px)\n  const radiusValue = options.sheetCornerRadius ?? 10;\n  const radiusCss = typeof radiusValue === 'number' ? `${radiusValue}px` : radiusValue;\n\n  if (options.webModalStyle?.border) {\n    modalStyleVars['--expo-router-modal-border'] = options.webModalStyle.border;\n  }\n\n  if (isSheet) {\n    // Only top corners for mobile sheet\n    modalStyleVars.borderTopLeftRadius = radiusCss;\n    modalStyleVars.borderTopRightRadius = radiusCss;\n\n    // Only apply CSS var override if a custom corner radius was provided\n    if (options.sheetCornerRadius) {\n      modalStyleVars['--expo-router-modal-border-radius'] = radiusCss;\n    }\n  } else {\n    // All corners for desktop modal\n    if (options.sheetCornerRadius) {\n      modalStyleVars.borderRadius = radiusCss;\n      modalStyleVars['--expo-router-modal-border-radius'] = radiusCss;\n    }\n  }\n  // --- End Styling -----------------------------------------------------------\n\n  const handleOpenChange = (open: boolean) => {\n    if (!open) onDismiss();\n  };\n\n  // Props that only make sense for sheets\n  const sheetProps = isSheet\n    ? {\n        snapPoints: snapPoints as (number | string)[],\n        activeSnapPoint: snap,\n        setActiveSnapPoint: setSnap,\n        fadeFromIndex,\n      }\n    : {};\n\n  return (\n    <Drawer.Root\n      key={`${routeKey}-${isSheet ? 'sheet' : 'modal'}`}\n      open={open}\n      dismissible={options.gestureEnabled ?? true}\n      onAnimationEnd={handleOpenChange}\n      shouldScaleBackground\n      autoFocus\n      onOpenChange={setOpen}\n      {...sheetProps}>\n      <Drawer.Portal>\n        <Drawer.Overlay\n          className={modalStyles.overlay}\n          style={\n            options.webModalStyle?.overlayBackground\n              ? ({\n                  '--expo-router-modal-overlay-background': options.webModalStyle.overlayBackground,\n                } as React.CSSProperties)\n              : undefined\n          }\n        />\n        <Drawer.Content\n          aria-describedby=\"modal-description\"\n          className={modalStyles.drawerContent}\n          style={{\n            pointerEvents: 'none',\n            ...(fitToContents ? { height: 'auto' } : null),\n          }}>\n          <div\n            className={modalStyles.modal}\n            data-presentation={isSheet ? 'formSheet' : 'modal'}\n            style={modalStyleVars}>\n            {/* TODO:(@Hirbod) Figure out how to add title and description to the modal for screen readers in a meaningful way */}\n            <Drawer.Title about=\"\" aria-describedby=\"\" className={modalStyles.srOnly} />\n            <Drawer.Description about=\"\" className={modalStyles.srOnly} />\n            {/* Render the screen content */}\n            <div className={modalStyles.modalBody}>{renderScreen()}</div>\n          </div>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  );\n}\n\nexport { ModalStackRouteDrawer };\n"]}

package/build/modal/web/TransparentModalStackRouteDrawer.web.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ExtendedStackNavigationOptions } from '../../layouts/StackClient';
+declare function TransparentModalStackRouteDrawer({ routeKey, options, renderScreen, onDismiss, }: {
+    routeKey: string;
+    options: ExtendedStackNavigationOptions;
+    renderScreen: () => React.ReactNode;
+    onDismiss: () => void;
+}): React.JSX.Element;
+export { TransparentModalStackRouteDrawer };
+//# sourceMappingURL=TransparentModalStackRouteDrawer.web.d.ts.map

package/build/modal/web/TransparentModalStackRouteDrawer.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransparentModalStackRouteDrawer.web.d.ts","sourceRoot":"","sources":["../../../src/modal/web/TransparentModalStackRouteDrawer.web.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,8BAA8B,EAAE,MAAM,2BAA2B,CAAC;AAE3E,iBAAS,gCAAgC,CAAC,EACxC,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,8BAA8B,CAAC;IACxC,YAAY,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,qBAuBA;AAED,OAAO,EAAE,gCAAgC,EAAE,CAAC"}

package/build/modal/web/TransparentModalStackRouteDrawer.web.js

@@ -0,0 +1,28 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransparentModalStackRouteDrawer = TransparentModalStackRouteDrawer;
+const react_1 = __importDefault(require("react"));
+const vaul_1 = require("vaul");
+const modalStyles_1 = __importDefault(require("./modalStyles"));
+function TransparentModalStackRouteDrawer({ routeKey, options, renderScreen, onDismiss, }) {
+    const handleOpenChange = (open) => {
+        if (!open)
+            onDismiss();
+    };
+    return (<vaul_1.Drawer.Root defaultOpen autoFocus key={`${routeKey}-transparent`} dismissible={options.gestureEnabled ?? false} onAnimationEnd={handleOpenChange}>
+      <vaul_1.Drawer.Portal>
+        <vaul_1.Drawer.Content className={modalStyles_1.default.transparentDrawerContent}>
+          {/* TODO:(@Hirbod) Figure out how to add title and description to the modal for screen readers in a meaningful way */}
+          <vaul_1.Drawer.Title about="" aria-describedby="" className={modalStyles_1.default.srOnly}/>
+          <vaul_1.Drawer.Description about="" className={modalStyles_1.default.srOnly}/>
+          {/* Render the screen content */}
+          <div className={modalStyles_1.default.modalBody}>{renderScreen()}</div>
+        </vaul_1.Drawer.Content>
+      </vaul_1.Drawer.Portal>
+    </vaul_1.Drawer.Root>);
+}
+//# sourceMappingURL=TransparentModalStackRouteDrawer.web.js.map

package/build/modal/web/TransparentModalStackRouteDrawer.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransparentModalStackRouteDrawer.web.js","sourceRoot":"","sources":["../../../src/modal/web/TransparentModalStackRouteDrawer.web.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;AA0CJ,4EAAgC;AAzCzC,kDAA0B;AAC1B,+BAA8B;AAE9B,gEAAwC;AAGxC,SAAS,gCAAgC,CAAC,EACxC,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,GAMV;IACC,MAAM,gBAAgB,GAAG,CAAC,IAAa,EAAE,EAAE;QACzC,IAAI,CAAC,IAAI;YAAE,SAAS,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,aAAM,CAAC,IAAI,CACV,WAAW,CACX,SAAS,CACT,GAAG,CAAC,CAAC,GAAG,QAAQ,cAAc,CAAC,CAC/B,WAAW,CAAC,CAAC,OAAO,CAAC,cAAc,IAAI,KAAK,CAAC,CAC7C,cAAc,CAAC,CAAC,gBAAgB,CAAC,CACjC;MAAA,CAAC,aAAM,CAAC,MAAM,CACZ;QAAA,CAAC,aAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,qBAAW,CAAC,wBAAwB,CAAC,CAC9D;UAAA,CAAC,oHAAoH,CACrH;UAAA,CAAC,aAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,qBAAW,CAAC,MAAM,CAAC,EACzE;UAAA,CAAC,aAAM,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,qBAAW,CAAC,MAAM,CAAC,EAC3D;UAAA,CAAC,+BAA+B,CAChC;UAAA,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,qBAAW,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,EAAE,GAAG,CAC9D;QAAA,EAAE,aAAM,CAAC,OAAO,CAClB;MAAA,EAAE,aAAM,CAAC,MAAM,CACjB;IAAA,EAAE,aAAM,CAAC,IAAI,CAAC,CACf,CAAC;AACJ,CAAC","sourcesContent":["'use client';\nimport React from 'react';\nimport { Drawer } from 'vaul';\n\nimport modalStyles from './modalStyles';\nimport { ExtendedStackNavigationOptions } from '../../layouts/StackClient';\n\nfunction TransparentModalStackRouteDrawer({\n  routeKey,\n  options,\n  renderScreen,\n  onDismiss,\n}: {\n  routeKey: string;\n  options: ExtendedStackNavigationOptions;\n  renderScreen: () => React.ReactNode;\n  onDismiss: () => void;\n}) {\n  const handleOpenChange = (open: boolean) => {\n    if (!open) onDismiss();\n  };\n\n  return (\n    <Drawer.Root\n      defaultOpen\n      autoFocus\n      key={`${routeKey}-transparent`}\n      dismissible={options.gestureEnabled ?? false}\n      onAnimationEnd={handleOpenChange}>\n      <Drawer.Portal>\n        <Drawer.Content className={modalStyles.transparentDrawerContent}>\n          {/* TODO:(@Hirbod) Figure out how to add title and description to the modal for screen readers in a meaningful way */}\n          <Drawer.Title about=\"\" aria-describedby=\"\" className={modalStyles.srOnly} />\n          <Drawer.Description about=\"\" className={modalStyles.srOnly} />\n          {/* Render the screen content */}\n          <div className={modalStyles.modalBody}>{renderScreen()}</div>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  );\n}\n\nexport { TransparentModalStackRouteDrawer };\n"]}

package/build/modal/web/modalStyles.d.ts

@@ -0,0 +1,3 @@
+import styles from '../../../assets/modal.module.css';
+export default styles;
+//# sourceMappingURL=modalStyles.d.ts.map

package/build/modal/web/modalStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalStyles.d.ts","sourceRoot":"","sources":["../../../src/modal/web/modalStyles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,kCAAkC,CAAC;AAEtD,eAAe,MAAM,CAAC"}

package/build/modal/web/modalStyles.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const modal_module_css_1 = __importDefault(require("../../../assets/modal.module.css"));
+exports.default = modal_module_css_1.default;
+//# sourceMappingURL=modalStyles.js.map

package/build/modal/web/modalStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalStyles.js","sourceRoot":"","sources":["../../../src/modal/web/modalStyles.ts"],"names":[],"mappings":";;;;;AAAA,wFAAsD;AAEtD,kBAAe,0BAAM,CAAC","sourcesContent":["import styles from '../../../assets/modal.module.css';\n\nexport default styles;\n"]}

package/build/modal/web/types.d.ts

@@ -0,0 +1,14 @@
+import { ParamListBase, StackActionHelpers, StackNavigationState, StackRouterOptions, useNavigationBuilder } from '@react-navigation/native';
+import { NativeStackNavigationEventMap, NativeStackNavigationOptions } from '@react-navigation/native-stack';
+import { ExtendedStackNavigationOptions } from '../../layouts/StackClient';
+export type ModalStackNavigatorProps = {
+    initialRouteName?: string;
+    screenOptions?: ExtendedStackNavigationOptions;
+    children: React.ReactNode;
+};
+export type ModalStackViewProps = Omit<ReturnType<typeof useNavigationBuilder<StackNavigationState<ParamListBase>, StackRouterOptions, StackActionHelpers<ParamListBase>, NativeStackNavigationOptions, NativeStackNavigationEventMap>>, 'NavigationContent'>;
+export type CSSWithVars = React.CSSProperties & {
+    [key: `--${string}`]: string | number;
+};
+export type PresentationOptions = Partial<Pick<ExtendedStackNavigationOptions, 'presentation'>>;
+//# sourceMappingURL=types.d.ts.map

package/build/modal/web/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/modal/web/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,oBAAoB,EACpB,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,6BAA6B,EAC7B,4BAA4B,EAC7B,MAAM,gCAAgC,CAAC;AAExC,OAAO,EAAE,8BAA8B,EAAE,MAAM,2BAA2B,CAAC;AAE3E,MAAM,MAAM,wBAAwB,GAAG;IACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,8BAA8B,CAAC;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,UAAU,CACR,OAAO,oBAAoB,CACzB,oBAAoB,CAAC,aAAa,CAAC,EACnC,kBAAkB,EAClB,kBAAkB,CAAC,aAAa,CAAC,EACjC,4BAA4B,EAC5B,6BAA6B,CAC9B,CACF,EACD,mBAAmB,CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,GAAG;IAC9C,CAAC,GAAG,EAAE,KAAK,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,8BAA8B,EAAE,cAAc,CAAC,CAAC,CAAC"}

package/build/modal/web/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/build/modal/web/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/modal/web/types.ts"],"names":[],"mappings":"","sourcesContent":["import {\n  ParamListBase,\n  StackActionHelpers,\n  StackNavigationState,\n  StackRouterOptions,\n  useNavigationBuilder,\n} from '@react-navigation/native';\nimport {\n  NativeStackNavigationEventMap,\n  NativeStackNavigationOptions,\n} from '@react-navigation/native-stack';\n\nimport { ExtendedStackNavigationOptions } from '../../layouts/StackClient';\n\nexport type ModalStackNavigatorProps = {\n  initialRouteName?: string;\n  screenOptions?: ExtendedStackNavigationOptions;\n  children: React.ReactNode;\n};\n\nexport type ModalStackViewProps = Omit<\n  ReturnType<\n    typeof useNavigationBuilder<\n      StackNavigationState<ParamListBase>,\n      StackRouterOptions,\n      StackActionHelpers<ParamListBase>,\n      NativeStackNavigationOptions,\n      NativeStackNavigationEventMap\n    >\n  >,\n  'NavigationContent'\n>;\n\nexport type CSSWithVars = React.CSSProperties & {\n  [key: `--${string}`]: string | number;\n};\n\nexport type PresentationOptions = Partial<Pick<ExtendedStackNavigationOptions, 'presentation'>>;\n"]}

package/build/modal/web/utils.d.ts

@@ -0,0 +1,70 @@
+import { ParamListBase, StackNavigationState } from '@react-navigation/native';
+import { ExtendedStackNavigationOptions } from '../../layouts/StackClient';
+/**
+ * A minimal subset of `ExtendedStackNavigationOptions` needed for the helper
+ * @internal
+ */
+export type PresentationOptions = Partial<Pick<ExtendedStackNavigationOptions, 'presentation'>>;
+/**
+ * Helper to determine if a given screen should be treated as a modal-type presentation
+ *
+ * @param options - The navigation options.
+ * @returns Whether the screen should be treated as a modal-type presentation.
+ *
+ * @internal
+ */
+export declare function isModalPresentation(options?: PresentationOptions | null): boolean;
+/**
+ * Helper to determine if a given screen should be treated as a transparent modal-type presentation
+ *
+ * @param options - The navigation options.
+ * @returns Whether the screen should be treated as a transparent modal-type presentation.
+ *
+ * @internal
+ */
+export declare function isTransparentModalPresentation(options?: PresentationOptions | null): boolean;
+/**
+ * SSR-safe viewport detection: initial render always returns `false` so that
+ * server and client markup match. The actual media query evaluation happens
+ * after mount.
+ *
+ * @internal
+ */
+export declare function useIsDesktop(breakpoint?: number): boolean;
+/**
+ * Returns a copy of the given Stack navigation state with any modal-type routes removed
+ * (only when running on the web) and a recalculated `index` that still points at the
+ * currently active non-modal route. If the active route *is* a modal that gets
+ * filtered out, we fall back to the last remaining route – this matches the logic
+ * used inside `ModalStackView` so that the underlying `NativeStackView` never tries
+ * to render a modal screen that is simultaneously being shown in the overlay.
+ *
+ * This helper is exported primarily for unit-testing; it should be considered
+ * internal to `ModalStack.web` and not a public API.
+ *
+ * @param state - The navigation state.
+ * @param descriptors - The navigation descriptors.
+ * @param isWeb - Whether the current platform is web.
+ * @returns The navigation state with any modal-type routes removed.
+ *
+ * @internal
+ */
+export declare function convertStackStateToNonModalState(state: StackNavigationState<ParamListBase>, descriptors: Record<string, {
+    options: ExtendedStackNavigationOptions;
+}>, isWeb: boolean): {
+    routes: import("@react-navigation/native").NavigationRoute<ParamListBase, string>[];
+    index: number;
+};
+/**
+ * Returns the index of the last route in the stack that is *not* a modal.
+ *
+ * @param state - The navigation state.
+ * @param descriptors - The navigation descriptors.
+ * @returns The index of the last non-modal route.
+ *
+ * @internal
+ */
+export declare function findLastNonModalIndex(state: StackNavigationState<ParamListBase>, descriptors: Record<string, {
+    options: ExtendedStackNavigationOptions;
+}>): number;
+//# sourceMappingURL=utils.d.ts.map

package/build/modal/web/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/modal/web/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAG/E,OAAO,EAAE,8BAA8B,EAAE,MAAM,2BAA2B,CAAC;AAE3E;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,8BAA8B,EAAE,cAAc,CAAC,CAAC,CAAC;AAEhG;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,WAUvE;AAED;;;;;;;GAOG;AACH,wBAAgB,8BAA8B,CAAC,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,WAGlF;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,UAAU,GAAE,MAAY,WAoBpD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gCAAgC,CAC9C,KAAK,EAAE,oBAAoB,CAAC,aAAa,CAAC,EAC1C,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,8BAA8B,CAAA;CAAE,CAAC,EACxE,KAAK,EAAE,OAAO;;;EAmBf;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,oBAAoB,CAAC,aAAa,CAAC,EAC1C,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,8BAA8B,CAAA;CAAE,CAAC,UASzE"}

package/build/modal/web/utils.js

@@ -0,0 +1,117 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isModalPresentation = isModalPresentation;
+exports.isTransparentModalPresentation = isTransparentModalPresentation;
+exports.useIsDesktop = useIsDesktop;
+exports.convertStackStateToNonModalState = convertStackStateToNonModalState;
+exports.findLastNonModalIndex = findLastNonModalIndex;
+const react_1 = __importDefault(require("react"));
+/**
+ * Helper to determine if a given screen should be treated as a modal-type presentation
+ *
+ * @param options - The navigation options.
+ * @returns Whether the screen should be treated as a modal-type presentation.
+ *
+ * @internal
+ */
+function isModalPresentation(options) {
+    const presentation = options?.presentation;
+    return (presentation === 'modal' ||
+        presentation === 'formSheet' ||
+        presentation === 'fullScreenModal' ||
+        presentation === 'containedModal' ||
+        presentation === 'transparentModal' ||
+        presentation === 'containedTransparentModal');
+}
+/**
+ * Helper to determine if a given screen should be treated as a transparent modal-type presentation
+ *
+ * @param options - The navigation options.
+ * @returns Whether the screen should be treated as a transparent modal-type presentation.
+ *
+ * @internal
+ */
+function isTransparentModalPresentation(options) {
+    const presentation = options?.presentation;
+    return presentation === 'transparentModal' || presentation === 'containedTransparentModal';
+}
+/**
+ * SSR-safe viewport detection: initial render always returns `false` so that
+ * server and client markup match. The actual media query evaluation happens
+ * after mount.
+ *
+ * @internal
+ */
+function useIsDesktop(breakpoint = 768) {
+    const isWeb = process.env.EXPO_OS === 'web';
+    // Ensure server-side and initial client render agree (mobile first).
+    const [isDesktop, setIsDesktop] = react_1.default.useState(false);
+    react_1.default.useEffect(() => {
+        if (!isWeb || typeof window === 'undefined')
+            return;
+        const mql = window.matchMedia(`(min-width: ${breakpoint}px)`);
+        const listener = (e) => setIsDesktop(e.matches);
+        // Update immediately after mount
+        setIsDesktop(mql.matches);
+        mql.addEventListener('change', listener);
+        return () => mql.removeEventListener('change', listener);
+    }, [breakpoint, isWeb]);
+    return isDesktop;
+}
+/**
+ * Returns a copy of the given Stack navigation state with any modal-type routes removed
+ * (only when running on the web) and a recalculated `index` that still points at the
+ * currently active non-modal route. If the active route *is* a modal that gets
+ * filtered out, we fall back to the last remaining route – this matches the logic
+ * used inside `ModalStackView` so that the underlying `NativeStackView` never tries
+ * to render a modal screen that is simultaneously being shown in the overlay.
+ *
+ * This helper is exported primarily for unit-testing; it should be considered
+ * internal to `ModalStack.web` and not a public API.
+ *
+ * @param state - The navigation state.
+ * @param descriptors - The navigation descriptors.
+ * @param isWeb - Whether the current platform is web.
+ * @returns The navigation state with any modal-type routes removed.
+ *
+ * @internal
+ */
+function convertStackStateToNonModalState(state, descriptors, isWeb) {
+    if (!isWeb) {
+        return { routes: state.routes, index: state.index };
+    }
+    // Remove every modal-type route from the stack on web.
+    const routes = state.routes.filter((route) => {
+        return !isModalPresentation(descriptors[route.key].options);
+    });
+    // Recalculate the active index so it still points at the same non-modal route, or –
+    // if that route was filtered out – at the last remaining route.
+    let index = routes.findIndex((r) => r.key === state.routes[state.index]?.key);
+    if (index < 0) {
+        index = routes.length > 0 ? routes.length - 1 : 0;
+    }
+    return { routes, index };
+}
+/**
+ * Returns the index of the last route in the stack that is *not* a modal.
+ *
+ * @param state - The navigation state.
+ * @param descriptors - The navigation descriptors.
+ * @returns The index of the last non-modal route.
+ *
+ * @internal
+ */
+function findLastNonModalIndex(state, descriptors) {
+    // Iterate backwards through the stack to find the last non-modal route.
+    for (let i = state.routes.length - 1; i >= 0; i--) {
+        if (!isModalPresentation(descriptors[state.routes[i].key].options)) {
+            return i;
+        }
+    }
+    return -1;
+}
+//# sourceMappingURL=utils.js.map

package/build/modal/web/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/modal/web/utils.ts"],"names":[],"mappings":"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","sourcesContent":["'use client';\nimport { ParamListBase, StackNavigationState } from '@react-navigation/native';\nimport React from 'react';\n\nimport { ExtendedStackNavigationOptions } from '../../layouts/StackClient';\n\n/**\n * A minimal subset of `ExtendedStackNavigationOptions` needed for the helper\n * @internal\n */\nexport type PresentationOptions = Partial<Pick<ExtendedStackNavigationOptions, 'presentation'>>;\n\n/**\n * Helper to determine if a given screen should be treated as a modal-type presentation\n *\n * @param options - The navigation options.\n * @returns Whether the screen should be treated as a modal-type presentation.\n *\n * @internal\n */\nexport function isModalPresentation(options?: PresentationOptions | null) {\n  const presentation = options?.presentation;\n  return (\n    presentation === 'modal' ||\n    presentation === 'formSheet' ||\n    presentation === 'fullScreenModal' ||\n    presentation === 'containedModal' ||\n    presentation === 'transparentModal' ||\n    presentation === 'containedTransparentModal'\n  );\n}\n\n/**\n * Helper to determine if a given screen should be treated as a transparent modal-type presentation\n *\n * @param options - The navigation options.\n * @returns Whether the screen should be treated as a transparent modal-type presentation.\n *\n * @internal\n */\nexport function isTransparentModalPresentation(options?: PresentationOptions | null) {\n  const presentation = options?.presentation;\n  return presentation === 'transparentModal' || presentation === 'containedTransparentModal';\n}\n\n/**\n * SSR-safe viewport detection: initial render always returns `false` so that\n * server and client markup match. The actual media query evaluation happens\n * after mount.\n *\n * @internal\n */\nexport function useIsDesktop(breakpoint: number = 768) {\n  const isWeb = process.env.EXPO_OS === 'web';\n\n  // Ensure server-side and initial client render agree (mobile first).\n  const [isDesktop, setIsDesktop] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    if (!isWeb || typeof window === 'undefined') return;\n\n    const mql = window.matchMedia(`(min-width: ${breakpoint}px)`);\n    const listener = (e: MediaQueryListEvent) => setIsDesktop(e.matches);\n\n    // Update immediately after mount\n    setIsDesktop(mql.matches);\n\n    mql.addEventListener('change', listener);\n    return () => mql.removeEventListener('change', listener);\n  }, [breakpoint, isWeb]);\n\n  return isDesktop;\n}\n\n/**\n * Returns a copy of the given Stack navigation state with any modal-type routes removed\n * (only when running on the web) and a recalculated `index` that still points at the\n * currently active non-modal route. If the active route *is* a modal that gets\n * filtered out, we fall back to the last remaining route – this matches the logic\n * used inside `ModalStackView` so that the underlying `NativeStackView` never tries\n * to render a modal screen that is simultaneously being shown in the overlay.\n *\n * This helper is exported primarily for unit-testing; it should be considered\n * internal to `ModalStack.web` and not a public API.\n *\n * @param state - The navigation state.\n * @param descriptors - The navigation descriptors.\n * @param isWeb - Whether the current platform is web.\n * @returns The navigation state with any modal-type routes removed.\n *\n * @internal\n */\nexport function convertStackStateToNonModalState(\n  state: StackNavigationState<ParamListBase>,\n  descriptors: Record<string, { options: ExtendedStackNavigationOptions }>,\n  isWeb: boolean\n) {\n  if (!isWeb) {\n    return { routes: state.routes, index: state.index };\n  }\n\n  // Remove every modal-type route from the stack on web.\n  const routes = state.routes.filter((route) => {\n    return !isModalPresentation(descriptors[route.key].options);\n  });\n\n  // Recalculate the active index so it still points at the same non-modal route, or –\n  // if that route was filtered out – at the last remaining route.\n  let index = routes.findIndex((r) => r.key === state.routes[state.index]?.key);\n  if (index < 0) {\n    index = routes.length > 0 ? routes.length - 1 : 0;\n  }\n\n  return { routes, index };\n}\n\n/**\n * Returns the index of the last route in the stack that is *not* a modal.\n *\n * @param state - The navigation state.\n * @param descriptors - The navigation descriptors.\n * @returns The index of the last non-modal route.\n *\n * @internal\n */\nexport function findLastNonModalIndex(\n  state: StackNavigationState<ParamListBase>,\n  descriptors: Record<string, { options: ExtendedStackNavigationOptions }>\n) {\n  // Iterate backwards through the stack to find the last non-modal route.\n  for (let i = state.routes.length - 1; i >= 0; i--) {\n    if (!isModalPresentation(descriptors[state.routes[i].key].options)) {\n      return i;\n    }\n  }\n  return -1;\n}\n"]}

package/ios/ExpoHead.podspec

@@ -13,7 +13,7 @@ Pod::Spec.new do |s|
   s.platforms      = {
     :ios => '15.1'
   }
-  s.swift_version  = '5.4'
+  s.swift_version  = '5.9'
   s.source         = { git: 'https://github.com/expo/expo.git' }
   s.static_framework = true
 

package/ios/LinkPreview/LinkPreviewNativeActionView.swift

@@ -4,9 +4,31 @@ import WebKit
 class LinkPreviewNativeActionView: ExpoView {
   var id: String = ""
   var title: String = ""
+  var icon: String?
+  var subActions: [LinkPreviewNativeActionView] = []
 
   required init(appContext: AppContext? = nil) {
     super.init(appContext: appContext)
     clipsToBounds = true
   }
+
+  override func mountChildComponentView(_ childComponentView: UIView, index: Int) {
+    if let childActionView = childComponentView as? LinkPreviewNativeActionView {
+      subActions.append(childActionView)
+    } else {
+      print(
+        "ExpoRouter: Unknown child component view (\(childComponentView)) mounted to NativeLinkPreviewActionView"
+      )
+    }
+  }
+
+  override func unmountChildComponentView(_ child: UIView, index: Int) {
+    if let childActionView = child as? LinkPreviewNativeActionView {
+      subActions.removeAll(where: { $0 == childActionView })
+    } else {
+      print(
+        "ExpoRouter: Unknown child component view (\(child)) unmounted from NativeLinkPreviewActionView"
+      )
+    }
+  }
 }

package/ios/LinkPreview/LinkPreviewNativeModule.swift

@@ -43,6 +43,9 @@ public class LinkPreviewNativeModule: Module {
       Prop("title") { (view: LinkPreviewNativeActionView, title: String) in
         view.title = title
       }
+      Prop("icon") { (view: LinkPreviewNativeActionView, icon: String) in
+        view.icon = icon
+      }
     }
 
     View(NativeLinkPreviewTrigger.self) {}

package/ios/LinkPreview/LinkPreviewNativeView.swift

@@ -25,7 +25,7 @@ class NativeLinkPreviewView: ExpoView, UIContextMenuInteractionDelegate {
 
   func setNextScreenId(_ screenId: String) {
     self.nextScreenId = screenId
-      linkPreviewNativeNavigation.updatePreloadedView(screenId, with: self)
+    linkPreviewNativeNavigation.updatePreloadedView(screenId, with: self)
   }
 
   // MARK: - Children
@@ -138,8 +138,8 @@ class NativeLinkPreviewView: ExpoView, UIContextMenuInteractionDelegate {
     animator: UIContextMenuInteractionCommitAnimating
   ) {
     linkPreviewNativeNavigation.pushPreloadedView()
+    onPreviewTapped()
     animator.addCompletion { [weak self] in
-      self?.onPreviewTapped()
     }
   }
 
@@ -159,17 +159,36 @@ class NativeLinkPreviewView: ExpoView, UIContextMenuInteractionDelegate {
   }
 
   private func createContextMenu() -> UIMenu {
-    let uiActions = actions.map { action in
-      return UIAction(
-        title: action.title
-      ) { _ in
-        self.onActionSelected([
-          "id": action.id
-        ])
-      }
+    if actions.count == 1, let menu = convertActionViewToUiAction(actions[0]) as? UIMenu {
+      return menu
     }
+    return UIMenu(
+      title: "",
+      children: actions.map { action in
+        self.convertActionViewToUiAction(action)
+      }
+    )
+  }
 
-    return UIMenu(title: "", children: uiActions)
+  private func convertActionViewToUiAction(_ action: LinkPreviewNativeActionView) -> UIMenuElement {
+    if !action.subActions.isEmpty {
+      let subActions = action.subActions.map { subAction in
+        self.convertActionViewToUiAction(subAction)
+      }
+      return UIMenu(
+        title: action.title,
+        image: action.icon.flatMap { UIImage(systemName: $0) },
+        children: subActions
+      )
+    }
+    return UIAction(
+      title: action.title,
+      image: action.icon.flatMap { UIImage(systemName: $0) }
+    ) { _ in
+      self.onActionSelected([
+        "id": action.id
+      ])
+    }
   }
 }