react-sharesheet 1.8.0 → 1.9.1

package/dist/index.mjs

@@ -231,6 +231,8 @@ function useShareSheet({
   downloadUrl,
   downloadFilename,
   emailSubject = "Share",
+  shareFile,
+  shareFilename = "share.png",
   onNativeShare,
   onCopy,
   onDownload
@@ -259,10 +261,47 @@ function useShareSheet({
     }
   }, [safeUrl, onCopy]);
   const nativeShare = useCallback(async () => {
-    if (!safeUrl) return;
     const nav = navigator;
     if (!("share" in nav) || typeof nav.share !== "function") return;
     try {
+      if (shareFile) {
+        let blob;
+        if (typeof shareFile === "string" && shareFile.startsWith("data:")) {
+          const response = await fetch(shareFile);
+          blob = await response.blob();
+        } else if (shareFile instanceof Blob) {
+          blob = shareFile;
+        } else {
+          if (!safeUrl) return;
+          await nav.share({
+            title: shareText,
+            text: shareText,
+            url: safeUrl
+          });
+          onNativeShare?.();
+          return;
+        }
+        const file = new File([blob], shareFilename, { type: blob.type || "image/png" });
+        const shareData = {
+          files: [file],
+          title: shareText,
+          text: shareText
+        };
+        if (nav.canShare && !nav.canShare(shareData)) {
+          if (!safeUrl) return;
+          await nav.share({
+            title: shareText,
+            text: shareText,
+            url: safeUrl
+          });
+          onNativeShare?.();
+          return;
+        }
+        await nav.share(shareData);
+        onNativeShare?.();
+        return;
+      }
+      if (!safeUrl) return;
       await nav.share({
         title: shareText,
         text: shareText,
@@ -271,7 +310,7 @@ function useShareSheet({
       onNativeShare?.();
     } catch {
     }
-  }, [safeUrl, shareText, onNativeShare]);
+  }, [safeUrl, shareText, shareFile, shareFilename, onNativeShare]);
   const downloadFile = useCallback(async () => {
     const url = (downloadUrl ?? "").trim();
     if (!url) return;
@@ -545,7 +584,7 @@ var 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",
@@ -564,9 +603,9 @@ var 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",
@@ -595,12 +634,16 @@ function ShareSheetContent({
   shareText,
   downloadUrl,
   downloadFilename,
+  previewImage,
+  shareFile,
+  shareFilename,
   className,
   classNames = {},
   buttonSize = DEFAULT_BUTTON_SIZE,
   iconSize = DEFAULT_ICON_SIZE,
   onNativeShare,
   onCopy,
+  onShare,
   onDownload,
   hide = [],
   show,
@@ -609,7 +652,7 @@ function ShareSheetContent({
 }) {
   const [imageLoaded, setImageLoaded] = useState2(false);
   const [imageError, setImageError] = useState2(false);
-  const { ogData, loading: ogLoading } = useOGData(shareUrl);
+  const { ogData, loading: ogLoading } = useOGData(previewImage ? void 0 : shareUrl);
   const handleImageLoad = useCallback2(() => {
     setImageLoaded(true);
   }, []);
@@ -622,6 +665,8 @@ function ShareSheetContent({
     downloadUrl,
     downloadFilename,
     emailSubject: shareText,
+    shareFile,
+    shareFilename,
     onNativeShare,
     onCopy,
     onDownload
@@ -667,11 +712,14 @@ 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 = useMemo2(() => {
     if (show && show.length > 0) {
       return show.map((id) => buttons.find((btn) => btn.id === id)).filter((btn) => {
@@ -691,9 +739,10 @@ function ShareSheetContent({
   const shimmerColor = cssVar(CSS_VARS_UI.previewShimmer, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.previewShimmer]);
   const textColor = cssVar(CSS_VARS_UI.subtitleColor, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.subtitleColor]);
   const renderPreview = () => {
-    const ogImage = ogData?.image;
+    const ogImage = previewImage || ogData?.image;
     const hasImage = ogImage && !imageError;
-    if (ogLoading) {
+    const isLoading = !previewImage && ogLoading;
+    if (isLoading) {
       return /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -726,7 +775,7 @@ function ShareSheetContent({
         }
       ) });
     }
-    if (!ogData || !hasImage) {
+    if (!hasImage) {
       return /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: /* @__PURE__ */ jsx2(
         "div",
         {
@@ -779,6 +828,22 @@ function ShareSheetContent({
         }
       ) });
     }
+    const isDataUrl = typeof ogImage === "string" && ogImage.startsWith("data:");
+    if (isDataUrl) {
+      return /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: /* @__PURE__ */ jsx2(
+        "img",
+        {
+          src: ogImage,
+          alt: "Preview",
+          className: cn(defaultClasses.previewImage, classNames.previewImage),
+          style: {
+            width: "100%",
+            maxWidth: "320px",
+            height: "auto"
+          }
+        }
+      ) });
+    }
     if (!imageLoaded) {
       return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: [
         /* @__PURE__ */ jsxs(
@@ -816,7 +881,7 @@ function ShareSheetContent({
           "img",
           {
             src: ogImage,
-            alt: ogData.title || "Preview",
+            alt: ogData?.title || "Preview",
             onLoad: handleImageLoad,
             onError: handleImageError,
             style: { display: "none" }
@@ -828,13 +893,12 @@ function ShareSheetContent({
       "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"
+          height: "auto"
         }
       }
     ) });
@@ -897,7 +961,7 @@ function ShareSheetContent({
 var ShareMenuContent = ShareSheetContent;
 
 // src/ShareSheetDrawer.tsx
-import { useState as useState3 } from "react";
+import React, { useState as useState3 } from "react";
 import { Drawer } from "vaul";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var defaultDrawerClasses = {
@@ -907,6 +971,16 @@ var defaultDrawerClasses = {
   handle: "mx-auto w-12 h-1.5 shrink-0 rounded-full mb-6",
   trigger: ""
 };
+function renderTrigger(children, className) {
+  if (React.isValidElement(children)) {
+    if (!className) return children;
+    const childClassName = children.props.className;
+    return React.cloneElement(children, {
+      className: cn(childClassName, className)
+    });
+  }
+  return /* @__PURE__ */ jsx3("button", { type: "button", className, children });
+}
 function cssVar2(name, fallback) {
   return `var(${name}, ${fallback})`;
 }
@@ -927,6 +1001,9 @@ function ShareSheetDrawer({
   shareText,
   downloadUrl,
   downloadFilename,
+  previewImage,
+  shareFile,
+  shareFilename,
   disabled,
   children,
   open: controlledOpen,
@@ -948,17 +1025,11 @@ function ShareSheetDrawer({
   const open = isControlled ? controlledOpen : internalOpen;
   const setOpen = isControlled ? (value) => controlledOnOpenChange?.(value) : setInternalOpen;
   return /* @__PURE__ */ jsxs2(Drawer.Root, { open, onOpenChange: setOpen, shouldScaleBackground: true, children: [
-    /* @__PURE__ */ jsx3(Drawer.Trigger, { asChild: true, children: /* @__PURE__ */ jsx3(
-      "div",
-      {
-        className: cn(
-          defaultDrawerClasses.trigger,
-          classNames.trigger,
-          disabled ? "pointer-events-none opacity-50" : ""
-        ),
-        children
-      }
-    ) }),
+    /* @__PURE__ */ jsx3(Drawer.Trigger, { asChild: true, children: renderTrigger(children, cn(
+      defaultDrawerClasses.trigger,
+      classNames.trigger,
+      disabled ? "pointer-events-none opacity-50" : ""
+    )) }),
     /* @__PURE__ */ jsxs2(Drawer.Portal, { children: [
       /* @__PURE__ */ jsx3(
         Drawer.Overlay,
@@ -1004,6 +1075,9 @@ function ShareSheetDrawer({
                       shareText,
                       downloadUrl,
                       downloadFilename,
+                      previewImage,
+                      shareFile,
+                      shareFilename,
                       className,
                       classNames,
                       buttonSize,