react-sharesheet 1.8.0 → 1.9.1

package/src/ShareSheetContent.tsx

@@ -28,9 +28,9 @@ const defaultClasses = {
   header: "text-center mb-2",
   title: "text-2xl font-black",
   subtitle: "mt-1 text-sm",
-  preview: "flex justify-center mb-4 px-4",
+  preview: "flex justify-center my-4 px-4",
   previewSkeleton: "rounded-xl overflow-hidden",
-  previewImage: "border border-white/10",
+  previewImage: "border border-white/10 rounded-xl",
   previewMeta: "",
   grid: "px-2 py-6 flex flex-row items-start gap-4 gap-y-6 flex-wrap justify-center",
   button: "flex flex-col items-center gap-0 text-xs w-[60px] outline-none cursor-pointer group",
@@ -64,12 +64,16 @@ export function ShareSheetContent({
   shareText,
   downloadUrl,
   downloadFilename,
+  previewImage,
+  shareFile,
+  shareFilename,
   className,
   classNames = {},
   buttonSize = DEFAULT_BUTTON_SIZE,
   iconSize = DEFAULT_ICON_SIZE,
   onNativeShare,
   onCopy,
+  onShare,
   onDownload,
   hide = [],
   show,
@@ -79,8 +83,8 @@ export function ShareSheetContent({
   const [imageLoaded, setImageLoaded] = useState(false);
   const [imageError, setImageError] = useState(false);
 
-  // Fetch OG data automatically from shareUrl
-  const { ogData, loading: ogLoading } = useOGData(shareUrl);
+  // Only fetch OG data if previewImage is not provided
+  const { ogData, loading: ogLoading } = useOGData(previewImage ? undefined : shareUrl);
 
   const handleImageLoad = useCallback(() => {
     setImageLoaded(true);
@@ -96,6 +100,8 @@ export function ShareSheetContent({
     downloadUrl,
     downloadFilename,
     emailSubject: shareText,
+    shareFile,
+    shareFilename,
     onNativeShare,
     onCopy,
     onDownload,
@@ -151,11 +157,14 @@ export function ShareSheetContent({
         // Use CSS var with fallback to platform color
         bgColor: cssVar(PLATFORM_CSS_VARS[id], PLATFORM_COLORS[id].bg),
         textColor: PLATFORM_COLORS[id].text,
-        onClick: shareActions[id],
+        onClick: () => {
+          onShare?.(id);
+          shareActions[id]();
+        },
         condition,
       };
     });
-  }, [iconSize, labels, icons, dynamicLabels, shareActions, shareSheet.canNativeShare, shareSheet.platformAvailability, downloadUrl]);
+  }, [iconSize, labels, icons, dynamicLabels, shareActions, onShare, shareSheet.canNativeShare, shareSheet.platformAvailability, downloadUrl]);
 
   const visibleButtons = useMemo(() => {
     // If show is provided, use its order
@@ -184,11 +193,13 @@ export function ShareSheetContent({
 
   // Render OG preview
   const renderPreview = () => {
-    const ogImage = ogData?.image;
+    // Use previewImage if provided, otherwise use OG data
+    const ogImage = previewImage || ogData?.image;
     const hasImage = ogImage && !imageError;
+    const isLoading = !previewImage && ogLoading;
 
-    // Loading state
-    if (ogLoading) {
+    // Loading state (only when fetching OG data, not when previewImage is provided)
+    if (isLoading) {
       return (
         <div style={{ display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }}>
           <div
@@ -221,8 +232,8 @@ export function ShareSheetContent({
       );
     }
 
-    // No OG data or no image - show link placeholder
-    if (!ogData || !hasImage) {
+    // No image available - show link placeholder (skip if previewImage was provided)
+    if (!hasImage) {
       return (
         <div style={{ display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }}>
           <div
@@ -274,7 +285,27 @@ export function ShareSheetContent({
       );
     }
 
-    // Image loading state
+    // If previewImage is a data URL, show it directly (no preloading needed)
+    const isDataUrl = typeof ogImage === "string" && ogImage.startsWith("data:");
+    if (isDataUrl) {
+      return (
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }}>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={ogImage}
+            alt="Preview"
+            className={cn(defaultClasses.previewImage, classNames.previewImage)}
+            style={{
+              width: "100%",
+              maxWidth: "320px",
+              height: "auto",
+            }}
+          />
+        </div>
+      );
+    }
+
+    // Image loading state (for remote URLs)
     if (!imageLoaded) {
       return (
         <div style={{ display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }}>
@@ -308,7 +339,7 @@ export function ShareSheetContent({
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={ogImage}
-            alt={ogData.title || "Preview"}
+            alt={ogData?.title || "Preview"}
             onLoad={handleImageLoad}
             onError={handleImageError}
             style={{ display: "none" }}
@@ -323,13 +354,12 @@ export function ShareSheetContent({
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={ogImage}
-          alt={ogData.title || "Preview"}
+          alt={ogData?.title || "Preview"}
           className={cn(defaultClasses.previewImage, classNames.previewImage, "sharesheet-fadein")}
           style={{
             width: "100%",
             maxWidth: "320px",
             height: "auto",
-            borderRadius: "12px",
           }}
         />
       </div>

package/src/ShareSheetDrawer.tsx

@@ -16,6 +16,31 @@ const defaultDrawerClasses = {
   trigger: "",
 };
 
+/**
+ * Vaul passes the trigger's button semantics down to whatever element it receives:
+ * `type="button"`, `aria-haspopup="dialog"` and `aria-expanded`. Handing it a plain
+ * `div` puts button attributes on a non-button, which axe reports as a critical
+ * `aria-allowed-attr` violation and which screen readers cannot announce.
+ *
+ * So the trigger element is the one the caller already provided, usually their own
+ * button, with the trigger classes merged in. Only a bare string or a fragment needs a
+ * host element, and that host is a real button.
+ */
+function renderTrigger(children: React.ReactNode, className: string): React.ReactElement {
+  if (React.isValidElement(children)) {
+    if (!className) return children;
+    const childClassName = (children.props as { className?: string }).className;
+    return React.cloneElement(children as React.ReactElement<{ className?: string }>, {
+      className: cn(childClassName, className),
+    });
+  }
+  return (
+    <button type="button" className={className}>
+      {children}
+    </button>
+  );
+}
+
 // Helper to create var() with fallback
 function cssVar(name: string, fallback: string): string {
   return `var(${name}, ${fallback})`;
@@ -40,6 +65,9 @@ export function ShareSheetDrawer({
   shareText,
   downloadUrl,
   downloadFilename,
+  previewImage,
+  shareFile,
+  shareFilename,
   disabled,
   children,
   open: controlledOpen,
@@ -67,15 +95,11 @@ export function ShareSheetDrawer({
   return (
     <Drawer.Root open={open} onOpenChange={setOpen} shouldScaleBackground>
       <Drawer.Trigger asChild>
-        <div
-          className={cn(
-            defaultDrawerClasses.trigger,
-            classNames.trigger,
-            disabled ? "pointer-events-none opacity-50" : ""
-          )}
-        >
-          {children}
-        </div>
+        {renderTrigger(children, cn(
+          defaultDrawerClasses.trigger,
+          classNames.trigger,
+          disabled ? "pointer-events-none opacity-50" : ""
+        ))}
       </Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Overlay
@@ -111,6 +135,9 @@ export function ShareSheetDrawer({
               shareText={shareText}
               downloadUrl={downloadUrl}
               downloadFilename={downloadFilename}
+              previewImage={previewImage}
+              shareFile={shareFile}
+              shareFilename={shareFilename}
               className={className}
               classNames={classNames}
               buttonSize={buttonSize}

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__/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/hooks.ts

@@ -50,6 +50,10 @@ export interface UseShareSheetOptions {
   downloadFilename?: string;
   /** Email subject (optional) */
   emailSubject?: string;
+  /** File to share via native share (data URL or Blob) - takes priority over URL sharing */
+  shareFile?: string | Blob | null;
+  /** Filename for the shared file */
+  shareFilename?: string;
   /** Callback after native share */
   onNativeShare?: () => void;
   /** Callback after copy */
@@ -68,6 +72,8 @@ export function useShareSheet({
   downloadUrl,
   downloadFilename,
   emailSubject = "Share",
+  shareFile,
+  shareFilename = "share.png",
   onNativeShare,
   onCopy,
   onDownload,
@@ -105,12 +111,64 @@ export function useShareSheet({
   }, [safeUrl, onCopy]);
 
   const nativeShare = useCallback(async () => {
-    if (!safeUrl) return;
     const nav = navigator as Navigator & {
       share?: (data: ShareData) => Promise<void>;
+      canShare?: (data: ShareData) => boolean;
     };
     if (!("share" in nav) || typeof nav.share !== "function") return;
+
     try {
+      // If shareFile is provided, try to share as a file
+      if (shareFile) {
+        let blob: Blob;
+
+        // Convert data URL to Blob if needed
+        if (typeof shareFile === "string" && shareFile.startsWith("data:")) {
+          const response = await fetch(shareFile);
+          blob = await response.blob();
+        } else if (shareFile instanceof Blob) {
+          blob = shareFile;
+        } else {
+          // Invalid shareFile, fall back to URL sharing
+          if (!safeUrl) return;
+          await nav.share({
+            title: shareText,
+            text: shareText,
+            url: safeUrl,
+          });
+          onNativeShare?.();
+          return;
+        }
+
+        // Create a File from the Blob
+        const file = new File([blob], shareFilename, { type: blob.type || "image/png" });
+
+        // Check if file sharing is supported
+        const shareData: ShareData = {
+          files: [file],
+          title: shareText,
+          text: shareText,
+        };
+
+        if (nav.canShare && !nav.canShare(shareData)) {
+          // File sharing not supported, fall back to URL sharing
+          if (!safeUrl) return;
+          await nav.share({
+            title: shareText,
+            text: shareText,
+            url: safeUrl,
+          });
+          onNativeShare?.();
+          return;
+        }
+
+        await nav.share(shareData);
+        onNativeShare?.();
+        return;
+      }
+
+      // Fall back to URL sharing
+      if (!safeUrl) return;
       await nav.share({
         title: shareText,
         text: shareText,
@@ -120,7 +178,7 @@ export function useShareSheet({
     } catch {
       // user canceled or share failed -> ignore
     }
-  }, [safeUrl, shareText, onNativeShare]);
+  }, [safeUrl, shareText, shareFile, shareFilename, onNativeShare]);
 
   const downloadFile = useCallback(async () => {
     const url = (downloadUrl ?? "").trim();

package/src/types.ts

@@ -21,7 +21,7 @@ export const CSS_VAR_UI_DEFAULTS = {
   [CSS_VARS_UI.overlayBg]: "rgba(0, 0, 0, 0.7)",
   [CSS_VARS_UI.drawerBg]: "#09090b",
   [CSS_VARS_UI.drawerBorder]: "#27272a",
-  [CSS_VARS_UI.handleBg]: "#27272a",
+  [CSS_VARS_UI.handleBg]: "rgba(255, 255, 255, 0.2)",
   [CSS_VARS_UI.titleColor]: "#ffffff",
   [CSS_VARS_UI.subtitleColor]: "#a1a1aa",
   [CSS_VARS_UI.buttonLabelColor]: "#ffffff",
@@ -108,6 +108,12 @@ export interface ShareSheetContentProps {
   downloadUrl?: string | null;
   /** Filename for downloaded file */
   downloadFilename?: string;
+  /** Custom preview image URL (skips OG fetching if provided) */
+  previewImage?: string | null;
+  /** File to share via native share (data URL or Blob) - takes priority over URL sharing */
+  shareFile?: string | Blob | null;
+  /** Filename for the shared file */
+  shareFilename?: string;
   /** Custom class name for the container (shorthand for classNames.root) */
   className?: string;
   /** Override class names for sub-components */
@@ -122,6 +128,8 @@ export interface ShareSheetContentProps {
   onCopy?: () => void;
   /** Called when download starts */
   onDownload?: () => void;
+  /** Called on every share option click, with the option id (analytics-friendly) */
+  onShare?: (option: ShareOption) => void;
   /** Hide specific share options */
   hide?: ShareOption[];
   /** Show only these platforms, in this exact order */