react-sharesheet 1.8.0 → 1.9.1

package/dist/drawer.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/drawer.ts
@@ -32,7 +42,7 @@ __export(drawer_exports, {
 module.exports = __toCommonJS(drawer_exports);
 
 // src/ShareSheetDrawer.tsx
-var import_react3 = require("react");
+var import_react3 = __toESM(require("react"));
 var import_vaul = require("vaul");
 
 // src/utils.ts
@@ -251,6 +261,8 @@ function useShareSheet({
   downloadUrl,
   downloadFilename,
   emailSubject = "Share",
+  shareFile,
+  shareFilename = "share.png",
   onNativeShare,
   onCopy,
   onDownload
@@ -279,10 +291,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,
@@ -291,7 +340,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;
@@ -528,7 +577,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",
@@ -547,9 +596,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",
@@ -578,12 +627,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,
@@ -592,7 +645,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);
   }, []);
@@ -605,6 +658,8 @@ function ShareSheetContent({
     downloadUrl,
     downloadFilename,
     emailSubject: shareText,
+    shareFile,
+    shareFilename,
     onNativeShare,
     onCopy,
     onDownload
@@ -650,11 +705,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) => {
@@ -674,9 +732,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",
         {
@@ -709,7 +768,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",
         {
@@ -762,6 +821,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)(
@@ -799,7 +874,7 @@ function ShareSheetContent({
           "img",
           {
             src: ogImage,
-            alt: ogData.title || "Preview",
+            alt: ogData?.title || "Preview",
             onLoad: handleImageLoad,
             onError: handleImageError,
             style: { display: "none" }
@@ -811,13 +886,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"
         }
       }
     ) });
@@ -887,6 +961,16 @@ var defaultDrawerClasses = {
   handle: "mx-auto w-12 h-1.5 shrink-0 rounded-full mb-6",
   trigger: ""
 };
+function renderTrigger(children, className) {
+  if (import_react3.default.isValidElement(children)) {
+    if (!className) return children;
+    const childClassName = children.props.className;
+    return import_react3.default.cloneElement(children, {
+      className: cn(childClassName, className)
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className, children });
+}
 function cssVar2(name, fallback) {
   return `var(${name}, ${fallback})`;
 }
@@ -907,6 +991,9 @@ function ShareSheetDrawer({
   shareText,
   downloadUrl,
   downloadFilename,
+  previewImage,
+  shareFile,
+  shareFilename,
   disabled,
   children,
   open: controlledOpen,
@@ -928,17 +1015,11 @@ function ShareSheetDrawer({
   const open = isControlled ? controlledOpen : internalOpen;
   const setOpen = isControlled ? (value) => controlledOnOpenChange?.(value) : setInternalOpen;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_vaul.Drawer.Root, { open, onOpenChange: setOpen, shouldScaleBackground: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_vaul.Drawer.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "div",
-      {
-        className: cn(
-          defaultDrawerClasses.trigger,
-          classNames.trigger,
-          disabled ? "pointer-events-none opacity-50" : ""
-        ),
-        children
-      }
-    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_vaul.Drawer.Trigger, { asChild: true, children: renderTrigger(children, cn(
+      defaultDrawerClasses.trigger,
+      classNames.trigger,
+      disabled ? "pointer-events-none opacity-50" : ""
+    )) }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_vaul.Drawer.Portal, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         import_vaul.Drawer.Overlay,
@@ -984,6 +1065,9 @@ function ShareSheetDrawer({
                       shareText,
                       downloadUrl,
                       downloadFilename,
+                      previewImage,
+                      shareFile,
+                      shareFilename,
                       className,
                       classNames,
                       buttonSize,