react-sharesheet 1.7.0 → 1.9.0

package/dist/index.js

@@ -304,6 +304,8 @@ function useShareSheet({
   downloadUrl,
   downloadFilename,
   emailSubject = "Share",
+  shareFile,
+  shareFilename = "share.png",
   onNativeShare,
   onCopy,
   onDownload
@@ -332,10 +334,47 @@ function useShareSheet({
     }
   }, [safeUrl, onCopy]);
   const nativeShare = (0, import_react.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,
@@ -344,7 +383,7 @@ function useShareSheet({
       onNativeShare?.();
     } catch {
     }
-  }, [safeUrl, shareText, onNativeShare]);
+  }, [safeUrl, shareText, shareFile, shareFilename, onNativeShare]);
   const downloadFile = (0, import_react.useCallback)(async () => {
     const url = (downloadUrl ?? "").trim();
     if (!url) return;
@@ -604,7 +643,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",
@@ -623,9 +662,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",
@@ -637,6 +676,13 @@ var shimmerKeyframes = `
   0% { transform: translateX(-100%); }
   100% { transform: translateX(100%); }
 }
+@keyframes sharesheet-fadein {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+.sharesheet-fadein {
+  animation: sharesheet-fadein 0.3s ease-out forwards;
+}
 `;
 function cssVar(name, fallback) {
   return `var(${name}, ${fallback})`;
@@ -647,12 +693,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,
@@ -661,7 +711,7 @@ function ShareSheetContent({
 }) {
   const [imageLoaded, setImageLoaded] = (0, import_react2.useState)(false);
   const [imageError, setImageError] = (0, import_react2.useState)(false);
-  const { ogData, loading: ogLoading } = useOGData(shareUrl);
+  const { ogData, loading: ogLoading } = useOGData(previewImage ? void 0 : shareUrl);
   const handleImageLoad = (0, import_react2.useCallback)(() => {
     setImageLoaded(true);
   }, []);
@@ -674,6 +724,8 @@ function ShareSheetContent({
     downloadUrl,
     downloadFilename,
     emailSubject: shareText,
+    shareFile,
+    shareFilename,
     onNativeShare,
     onCopy,
     onDownload
@@ -719,11 +771,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 = (0, import_react2.useMemo)(() => {
     if (show && show.length > 0) {
       return show.map((id) => buttons.find((btn) => btn.id === id)).filter((btn) => {
@@ -743,9 +798,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__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
@@ -778,7 +834,7 @@ function ShareSheetContent({
         }
       ) });
     }
-    if (!ogData || !hasImage) {
+    if (!hasImage) {
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "div",
         {
@@ -831,6 +887,22 @@ function ShareSheetContent({
         }
       ) });
     }
+    const isDataUrl = typeof ogImage === "string" && ogImage.startsWith("data:");
+    if (isDataUrl) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "img",
+        {
+          src: ogImage,
+          alt: "Preview",
+          className: cn(defaultClasses.previewImage, classNames.previewImage),
+          style: {
+            width: "100%",
+            maxWidth: "320px",
+            height: "auto"
+          }
+        }
+      ) });
+    }
     if (!imageLoaded) {
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -868,7 +940,7 @@ function ShareSheetContent({
           "img",
           {
             src: ogImage,
-            alt: ogData.title || "Preview",
+            alt: ogData?.title || "Preview",
             onLoad: handleImageLoad,
             onError: handleImageError,
             style: { display: "none" }
@@ -880,15 +952,12 @@ function ShareSheetContent({
       "img",
       {
         src: ogImage,
-        alt: ogData.title || "Preview",
-        className: cn(defaultClasses.previewImage, classNames.previewImage),
+        alt: ogData?.title || "Preview",
+        className: cn(defaultClasses.previewImage, classNames.previewImage, "sharesheet-fadein"),
         style: {
           width: "100%",
           maxWidth: "320px",
-          height: "auto",
-          borderRadius: "12px",
-          opacity: 1,
-          transition: "opacity 0.3s ease-in-out"
+          height: "auto"
         }
       }
     ) });
@@ -964,12 +1033,26 @@ var defaultDrawerClasses = {
 function cssVar2(name, fallback) {
   return `var(${name}, ${fallback})`;
 }
+var srOnlyStyle = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  borderWidth: 0
+};
 function ShareSheetDrawer({
   title = "Share",
   shareUrl,
   shareText,
   downloadUrl,
   downloadFilename,
+  previewImage,
+  shareFile,
+  shareFilename,
   disabled,
   children,
   open: controlledOpen,
@@ -1021,7 +1104,7 @@ function ShareSheetDrawer({
             borderColor: cssVar2(CSS_VARS_UI.drawerBorder, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.drawerBorder])
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_vaul.Drawer.Title, { className: "sr-only", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_vaul.Drawer.Title, { style: srOnlyStyle, children: title }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "div",
               {
@@ -1047,6 +1130,9 @@ function ShareSheetDrawer({
                       shareText,
                       downloadUrl,
                       downloadFilename,
+                      previewImage,
+                      shareFile,
+                      shareFilename,
                       className,
                       classNames,
                       buttonSize,