react-sharesheet 1.9.0 → 1.10.0

package/src/__tests__/drawer-trigger.test.tsx

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import { ShareSheetDrawer } from "../ShareSheetDrawer";
+
+describe("ShareSheetDrawer trigger", () => {
+  it("puts the button semantics on the caller's own button, not on a wrapper div", () => {
+    render(
+      <ShareSheetDrawer shareUrl="https://example.com" shareText="hello">
+        <button type="button" data-testid="opener">Share</button>
+      </ShareSheetDrawer>,
+    );
+
+    const opener = screen.getByTestId("opener");
+    expect(opener.tagName).toBe("BUTTON");
+    expect(opener).toHaveAttribute("aria-haspopup", "dialog");
+    // Le défaut corrigé : ces attributs atterrissaient sur un div, ce qu'axe signale en
+    // critique et qu'aucun lecteur d'écran ne sait annoncer.
+    expect(document.querySelector("div[aria-haspopup]")).toBeNull();
+    expect(document.querySelector("div[aria-expanded]")).toBeNull();
+  });
+
+  it("still gives a bare string a real button to live in", () => {
+    render(
+      <ShareSheetDrawer shareUrl="https://example.com" shareText="hello">
+        Share this
+      </ShareSheetDrawer>,
+    );
+
+    const opener = screen.getByText("Share this");
+    expect(opener.tagName).toBe("BUTTON");
+    expect(opener).toHaveAttribute("type", "button");
+  });
+
+  it("merges the trigger class into the caller's element instead of wrapping it", () => {
+    render(
+      <ShareSheetDrawer
+        shareUrl="https://example.com"
+        shareText="hello"
+        classNames={{ trigger: "trigger-class" }}
+      >
+        <button type="button" className="mine" data-testid="opener">Share</button>
+      </ShareSheetDrawer>,
+    );
+
+    const opener = screen.getByTestId("opener");
+    expect(opener.className).toContain("mine");
+    expect(opener.className).toContain("trigger-class");
+  });
+});

package/src/__tests__/hooks.test.ts

@@ -115,7 +115,7 @@ describe("useOGData", () => {
   });
 
   it("should return initial loading state", () => {
-    vi.mocked(global.fetch).mockImplementation(
+    vi.mocked(globalThis.fetch).mockImplementation(
       () => new Promise(() => {}) // Never resolves
     );
 
@@ -137,7 +137,7 @@ describe("useOGData", () => {
       },
     };
 
-    vi.mocked(global.fetch).mockResolvedValueOnce({
+    vi.mocked(globalThis.fetch).mockResolvedValueOnce({
       ok: true,
       json: () => Promise.resolve(mockResponse),
     } as Response);
@@ -175,7 +175,7 @@ describe("useOGData", () => {
       data: { title: "Page 2", url: "https://example2.com" },
     };
 
-    vi.mocked(global.fetch)
+    vi.mocked(globalThis.fetch)
       .mockResolvedValueOnce({
         ok: true,
         json: () => Promise.resolve(mockResponse1),

package/src/__tests__/og-fetcher.test.ts

@@ -19,7 +19,7 @@ describe("og-fetcher", () => {
       },
     };
 
-    vi.mocked(global.fetch).mockResolvedValueOnce({
+    vi.mocked(globalThis.fetch).mockResolvedValueOnce({
       ok: true,
       json: () => Promise.resolve(mockResponse),
     } as Response);
@@ -36,7 +36,7 @@ describe("og-fetcher", () => {
   });
 
   it("should return null on failed fetch", async () => {
-    vi.mocked(global.fetch).mockResolvedValueOnce({
+    vi.mocked(globalThis.fetch).mockResolvedValueOnce({
       ok: false,
       status: 404,
     } as Response);
@@ -52,7 +52,7 @@ describe("og-fetcher", () => {
       data: null,
     };
 
-    vi.mocked(global.fetch).mockResolvedValueOnce({
+    vi.mocked(globalThis.fetch).mockResolvedValueOnce({
       ok: true,
       json: () => Promise.resolve(mockResponse),
     } as Response);
@@ -73,7 +73,7 @@ describe("og-fetcher", () => {
       },
     };
 
-    vi.mocked(global.fetch).mockResolvedValueOnce({
+    vi.mocked(globalThis.fetch).mockResolvedValueOnce({
       ok: true,
       json: () => Promise.resolve(mockResponse),
     } as Response);
@@ -84,7 +84,7 @@ describe("og-fetcher", () => {
     const result2 = await fetchOGData("https://example.com/cached");
 
     expect(result1).toEqual(result2);
-    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(globalThis.fetch).toHaveBeenCalledTimes(1);
   });
 
   it("should clear cache", async () => {
@@ -96,7 +96,7 @@ describe("og-fetcher", () => {
       },
     };
 
-    vi.mocked(global.fetch).mockResolvedValue({
+    vi.mocked(globalThis.fetch).mockResolvedValue({
       ok: true,
       json: () => Promise.resolve(mockResponse),
     } as Response);
@@ -105,11 +105,11 @@ describe("og-fetcher", () => {
     clearOGCache();
     await fetchOGData("https://example.com");
 
-    expect(global.fetch).toHaveBeenCalledTimes(2);
+    expect(globalThis.fetch).toHaveBeenCalledTimes(2);
   });
 
   it("should handle network errors gracefully", async () => {
-    vi.mocked(global.fetch).mockRejectedValueOnce(new Error("Network error"));
+    vi.mocked(globalThis.fetch).mockRejectedValueOnce(new Error("Network error"));
 
     const result = await fetchOGData("https://example.com");
 
@@ -126,7 +126,7 @@ describe("og-fetcher", () => {
       },
     };
 
-    vi.mocked(global.fetch).mockResolvedValueOnce({
+    vi.mocked(globalThis.fetch).mockResolvedValueOnce({
       ok: true,
       json: () => Promise.resolve(mockResponse),
     } as Response);

package/src/__tests__/preview-fetch.test.tsx

@@ -0,0 +1,82 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { render, renderHook, waitFor } from "@testing-library/react";
+
+import { ShareSheetContent } from "../ShareSheetContent";
+import { ShareSheetDrawer } from "../ShareSheetDrawer";
+import { useOGData } from "../hooks";
+import { clearOGCache, type OGFetcher } from "../og-fetcher";
+
+const card = { title: "A page", image: "https://example.com/card.png", url: "https://example.com/p" };
+
+describe("link preview lookup", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    clearOGCache();
+  });
+
+  it("sends the link nowhere by default: no request, a link placeholder", async () => {
+    const { container } = render(<ShareSheetContent shareUrl="https://example.com/private?seed=42" shareText="hi" />);
+
+    // Give a stray effect the chance to fire before looking
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(globalThis.fetch).not.toHaveBeenCalled();
+    expect(container.querySelector("img")).toBeNull();
+  });
+
+  it("looks the link up with the fetcher the caller passes, and shows its image", async () => {
+    const fetchPreview = vi.fn<OGFetcher>().mockResolvedValue(card);
+    const { container } = render(
+      <ShareSheetContent shareUrl="https://example.com/p" shareText="hi" fetchPreview={fetchPreview} />,
+    );
+
+    await waitFor(() => expect(container.querySelector("img")).not.toBeNull());
+    expect(fetchPreview).toHaveBeenCalledTimes(1);
+    expect(fetchPreview).toHaveBeenCalledWith("https://example.com/p");
+    expect(container.querySelector("img")).toHaveAttribute("src", card.image);
+    expect(globalThis.fetch).not.toHaveBeenCalled();
+  });
+
+  it("never looks up a link that already has a preview image", async () => {
+    const fetchPreview = vi.fn<OGFetcher>().mockResolvedValue(card);
+    render(
+      <ShareSheetContent
+        shareUrl="https://example.com/p"
+        shareText="hi"
+        previewImage="data:image/png;base64,AAAA"
+        fetchPreview={fetchPreview}
+      />,
+    );
+
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(fetchPreview).not.toHaveBeenCalled();
+    expect(globalThis.fetch).not.toHaveBeenCalled();
+  });
+
+  it("the drawer hands the fetcher to its sheet", async () => {
+    const fetchPreview = vi.fn<OGFetcher>().mockResolvedValue(card);
+    render(
+      <ShareSheetDrawer shareUrl="https://example.com/p" shareText="hi" fetchPreview={fetchPreview} open onOpenChange={() => {}}>
+        <button type="button">Share</button>
+      </ShareSheetDrawer>,
+    );
+
+    await waitFor(() => expect(fetchPreview).toHaveBeenCalledWith("https://example.com/p"));
+  });
+
+  it("useOGData does not refetch when the caller passes a new inline fetcher each render", async () => {
+    const calls: string[] = [];
+    const { result, rerender } = renderHook(() =>
+      useOGData("https://example.com/p", async (url) => {
+        calls.push(url);
+        return card;
+      }),
+    );
+
+    await waitFor(() => expect(result.current.ogData).toEqual(card));
+    rerender();
+    rerender();
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(calls).toEqual(["https://example.com/p"]);
+    expect(globalThis.fetch).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/setup.ts

@@ -19,4 +19,4 @@ Object.defineProperty(navigator, "clipboard", {
 vi.stubGlobal("open", vi.fn());
 
 // Mock fetch for OG data tests
-global.fetch = vi.fn();
+globalThis.fetch = vi.fn();

package/src/content.ts

@@ -2,3 +2,4 @@ export { ShareSheetContent, ShareMenuContent } from "./ShareSheetContent";
 export type { ShareSheetContentProps, ShareSheetContentClassNames, ShareMenuContentProps, ShareMenuContentClassNames, ShareOption } from "./types";
 export { CSS_VARS_UI, CSS_VAR_UI_DEFAULTS, CSS_VARS, CSS_VAR_DEFAULTS } from "./types";
 export { PLATFORM_COLORS, PLATFORM_CSS_VARS } from "./platforms";
+export { fetchOGData, type OGData, type OGFetcher } from "./og-fetcher";

package/src/drawer.ts

@@ -2,3 +2,4 @@ export { ShareSheetDrawer, ShareMenuDrawer } from "./ShareSheetDrawer";
 export type { ShareSheetDrawerProps, ShareSheetDrawerClassNames, ShareMenuDrawerProps, ShareMenuDrawerClassNames, ShareOption } from "./types";
 export { CSS_VARS_UI, CSS_VAR_UI_DEFAULTS, CSS_VARS, CSS_VAR_DEFAULTS } from "./types";
 export { PLATFORM_COLORS, PLATFORM_CSS_VARS } from "./platforms";
+export { fetchOGData, type OGData, type OGFetcher } from "./og-fetcher";

package/src/headless.ts

@@ -3,7 +3,7 @@
 export { useShareSheet, useShareMenu, useOGData, type UseShareSheetOptions, type UseShareMenuOptions } from "./hooks";
 
 // OG Data fetcher
-export { fetchOGData, clearOGCache, type OGData } from "./og-fetcher";
+export { fetchOGData, clearOGCache, type OGData, type OGFetcher } from "./og-fetcher";
 
 export {
   shareToWhatsApp,

package/src/hooks.ts

@@ -1,8 +1,8 @@
 "use client";
 
-import { useMemo, useState, useCallback, useEffect } from "react";
+import { useMemo, useState, useCallback, useEffect, useRef } from "react";
 import { getSafeUrl, isMobileDevice, getAllPlatformAvailability } from "./utils";
-import { fetchOGData, type OGData } from "./og-fetcher";
+import { fetchOGData, type OGData, type OGFetcher } from "./og-fetcher";
 import {
   shareToWhatsApp,
   shareToTelegram,
@@ -279,9 +279,10 @@ export function useShareSheet({
 
 /**
  * Hook to fetch OG (Open Graph) data from a URL.
- * Automatically fetches and caches OG metadata for link previews.
+ * Fetches with `fetcher`, the Microlink lookup (`fetchOGData`, cached) unless another is given:
+ * calling this hook is the opt-in, since the lookup sends `url` to a third party.
  */
-export function useOGData(url: string | undefined): {
+export function useOGData(url: string | undefined, fetcher: OGFetcher = fetchOGData): {
   ogData: OGData | null;
   loading: boolean;
   error: string | null;
@@ -289,6 +290,12 @@ export function useOGData(url: string | undefined): {
   const [ogData, setOgData] = useState<OGData | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  // Read at fetch time, so an inline fetcher does not refetch on every render
+  // (this effect runs before the one below in the same commit)
+  const fetcherRef = useRef(fetcher);
+  useEffect(() => {
+    fetcherRef.current = fetcher;
+  });
 
   useEffect(() => {
     if (!url) {
@@ -302,7 +309,7 @@ export function useOGData(url: string | undefined): {
     setLoading(true);
     setError(null);
 
-    fetchOGData(url)
+    fetcherRef.current(url)
       .then((data) => {
         if (!cancelled) {
           setOgData(data);

package/src/index.ts

@@ -6,7 +6,7 @@ export { ShareSheetDrawer, ShareMenuDrawer } from "./ShareSheetDrawer";
 export { useShareSheet, useShareMenu, useOGData, type UseShareSheetOptions, type UseShareMenuOptions } from "./hooks";
 
 // OG Data fetcher
-export { fetchOGData, clearOGCache, type OGData } from "./og-fetcher";
+export { fetchOGData, clearOGCache, type OGData, type OGFetcher } from "./og-fetcher";
 
 // Types
 export type {

package/src/og-fetcher.ts

@@ -1,4 +1,6 @@
-// OG Data fetcher using Microlink API (free, no API key required)
+// OG data fetcher using the Microlink API (free, no API key required).
+// The sheet never calls it on its own: a caller opts in with `fetchPreview={fetchOGData}`,
+// because the lookup sends the shared link to a third party.
 
 export interface OGData {
   title?: string;
@@ -8,6 +10,9 @@ export interface OGData {
   siteName?: string;
 }
 
+/** Looks up a link's card. Resolves to null when there is none. */
+export type OGFetcher = (url: string) => Promise<OGData | null>;
+
 export interface OGFetchResult {
   data: OGData | null;
   loading: boolean;

package/src/types.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { OGFetcher } from "./og-fetcher";
 
 /** CSS variable names for UI elements (non-platform specific) */
 export const CSS_VARS_UI = {
@@ -100,7 +101,7 @@ export interface ShareSheetDrawerClassNames extends ShareSheetContentClassNames
 export interface ShareSheetContentProps {
   /** Title displayed at the top of the sheet */
   title?: string;
-  /** URL to share (OG preview will be fetched automatically) */
+  /** URL to share */
   shareUrl: string;
   /** Text to share alongside the URL */
   shareText: string;
@@ -110,6 +111,12 @@ export interface ShareSheetContentProps {
   downloadFilename?: string;
   /** Custom preview image URL (skips OG fetching if provided) */
   previewImage?: string | null;
+  /**
+   * Looks up the link's card when there is no `previewImage`. Unset (the default), no request
+   * leaves the page and the sheet shows a link placeholder. Pass `fetchOGData` for the Microlink
+   * lookup the sheet made by itself before 1.10.0: it sends `shareUrl` to api.microlink.io.
+   */
+  fetchPreview?: OGFetcher;
   /** File to share via native share (data URL or Blob) - takes priority over URL sharing */
   shareFile?: string | Blob | null;
   /** Filename for the shared file */