@shopify/shop-minis-react 0.0.9 → 0.0.10

package/dist/_virtual/index2.js

@@ -1,5 +1,6 @@
-var r = {};
+import { __require as r } from "../node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js";
+var i = r();
 export {
-  r as __exports
+  i as s
 };
 //# sourceMappingURL=index2.js.map

package/dist/_virtual/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/index3.js

@@ -1,6 +1,5 @@
-import { __require as r } from "../node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js";
-var i = r();
+var r = {};
 export {
-  i as s
+  r as __exports
 };
 //# sourceMappingURL=index3.js.map

package/dist/_virtual/index3.js.map

@@ -1 +1 @@
-{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/MinisContainer.js

@@ -1,14 +1,15 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import { useState as m, useEffect as l } from "react";
-function v({ children: s }) {
-  const [a, r] = m(!1);
+import { ImagePickerProvider as u } from "../providers/ImagePickerProvider.js";
+function p({ children: s }) {
+  const [a, t] = m(!1);
   return l(() => {
-    const n = () => window.minisSDK ? (r(!0), !0) : !1;
+    const n = () => window.minisSDK ? (t(!0), !0) : !1;
     if (n())
       return;
-    const e = (d) => {
-      const { type: o } = JSON.parse(d.data);
-      o === "MINIS_SDK_READY" && r(!0);
+    const e = (o) => {
+      const { type: d } = JSON.parse(o.data);
+      d === "MINIS_SDK_READY" && t(!0);
     };
     window.addEventListener("message", e), document.addEventListener("message", e);
     const i = setInterval(() => {
@@ -17,12 +18,12 @@ function v({ children: s }) {
     return () => {
       window.removeEventListener("message", e), document.removeEventListener("message", e);
     };
-  }, []), a ? s : /* @__PURE__ */ t("div", { className: "h-screen bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ c("div", { className: "text-center", children: [
-    /* @__PURE__ */ t("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4" }),
-    /* @__PURE__ */ t("p", { className: "text-gray-600", children: "Loading..." })
+  }, []), a ? /* @__PURE__ */ r(u, { children: s }) : /* @__PURE__ */ r("div", { className: "h-screen bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ c("div", { className: "text-center", children: [
+    /* @__PURE__ */ r("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4" }),
+    /* @__PURE__ */ r("p", { className: "text-gray-600", children: "Loading..." })
   ] }) });
 }
 export {
-  v as MinisContainer
+  p as MinisContainer
 };
 //# sourceMappingURL=MinisContainer.js.map

package/dist/components/MinisContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MinisContainer.js","sources":["../../src/components/MinisContainer.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react'\n\nexport function MinisContainer({children}: {children: React.ReactNode}) {\n  const [isSDKReady, setIsSDKReady] = useState(false)\n\n  useEffect(() => {\n    // Function to check if SDK is ready\n    const checkSDKReady = () => {\n      if (window.minisSDK) {\n        setIsSDKReady(true)\n        return true\n      }\n      return false\n    }\n\n    // Check immediately\n    if (checkSDKReady()) {\n      return\n    }\n\n    // If not ready, set up a listener for the MINIS_SDK_READY event\n    const handleSDKReady = (event: any) => {\n      const {type} = JSON.parse(event.data)\n\n      if (type === 'MINIS_SDK_READY') {\n        setIsSDKReady(true)\n      }\n    }\n\n    // Listen for the MINIS_SDK_READY event\n    window.addEventListener('message', handleSDKReady)\n    document.addEventListener('message', handleSDKReady)\n\n    // Also poll for SDK availability as a fallback\n    const pollInterval = setInterval(() => {\n      if (checkSDKReady()) {\n        clearInterval(pollInterval)\n      }\n    }, 100)\n\n    // Cleanup\n    return () => {\n      // clearInterval(pollInterval);\n      window.removeEventListener('message', handleSDKReady)\n      document.removeEventListener('message', handleSDKReady)\n    }\n  }, [])\n\n  // Don't render anything until SDK is ready\n  if (!isSDKReady) {\n    return (\n      <div className=\"h-screen bg-gray-50 flex items-center justify-center\">\n        <div className=\"text-center\">\n          <div className=\"animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4\" />\n          <p className=\"text-gray-600\">Loading...</p>\n        </div>\n      </div>\n    )\n  }\n\n  return children\n}\n"],"names":["MinisContainer","children","isSDKReady","setIsSDKReady","useState","useEffect","checkSDKReady","handleSDKReady","event","type","pollInterval","jsxs","jsx"],"mappings":";;AAEgB,SAAAA,EAAe,EAAC,UAAAC,KAAwC;AACtE,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK;AA8ClD,SA5CAC,EAAU,MAAM;AAEd,UAAMC,IAAgB,MAChB,OAAO,YACTH,EAAc,EAAI,GACX,MAEF;AAIT,QAAIG;AACF;AAII,UAAAC,IAAiB,CAACC,MAAe;AACrC,YAAM,EAAC,MAAAC,EAAI,IAAI,KAAK,MAAMD,EAAM,IAAI;AAEpC,MAAIC,MAAS,qBACXN,EAAc,EAAI;AAAA,IAEtB;AAGO,WAAA,iBAAiB,WAAWI,CAAc,GACxC,SAAA,iBAAiB,WAAWA,CAAc;AAG7C,UAAAG,IAAe,YAAY,MAAM;AACrC,MAAIJ,OACF,cAAcI,CAAY;AAAA,OAE3B,GAAG;AAGN,WAAO,MAAM;AAEJ,aAAA,oBAAoB,WAAWH,CAAc,GAC3C,SAAA,oBAAoB,WAAWA,CAAc;AAAA,IACxD;AAAA,EACF,GAAG,EAAE,GAGAL,IAWED,sBATF,OAAI,EAAA,WAAU,wDACb,UAAC,gBAAAU,EAAA,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,IAAC,gBAAAC,EAAA,OAAA,EAAI,WAAU,4EAA4E,CAAA;AAAA,IAC1F,gBAAAA,EAAA,KAAA,EAAE,WAAU,iBAAgB,UAAU,aAAA,CAAA;AAAA,EAAA,EAAA,CACzC,EACF,CAAA;AAKN;"}
+{"version":3,"file":"MinisContainer.js","sources":["../../src/components/MinisContainer.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react'\n\nimport {ImagePickerProvider} from '../providers/ImagePickerProvider'\n\nexport function MinisContainer({children}: {children: React.ReactNode}) {\n  const [isSDKReady, setIsSDKReady] = useState(false)\n\n  useEffect(() => {\n    // Function to check if SDK is ready\n    const checkSDKReady = () => {\n      if (window.minisSDK) {\n        setIsSDKReady(true)\n        return true\n      }\n      return false\n    }\n\n    // Check immediately\n    if (checkSDKReady()) {\n      return\n    }\n\n    // If not ready, set up a listener for the MINIS_SDK_READY event\n    const handleSDKReady = (event: any) => {\n      const {type} = JSON.parse(event.data)\n\n      if (type === 'MINIS_SDK_READY') {\n        setIsSDKReady(true)\n      }\n    }\n\n    // Listen for the MINIS_SDK_READY event\n    window.addEventListener('message', handleSDKReady)\n    document.addEventListener('message', handleSDKReady)\n\n    // Also poll for SDK availability as a fallback\n    const pollInterval = setInterval(() => {\n      if (checkSDKReady()) {\n        clearInterval(pollInterval)\n      }\n    }, 100)\n\n    // Cleanup\n    return () => {\n      // clearInterval(pollInterval);\n      window.removeEventListener('message', handleSDKReady)\n      document.removeEventListener('message', handleSDKReady)\n    }\n  }, [])\n\n  // Don't render anything until SDK is ready\n  if (!isSDKReady) {\n    return (\n      <div className=\"h-screen bg-gray-50 flex items-center justify-center\">\n        <div className=\"text-center\">\n          <div className=\"animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4\" />\n          <p className=\"text-gray-600\">Loading...</p>\n        </div>\n      </div>\n    )\n  }\n\n  return <ImagePickerProvider>{children}</ImagePickerProvider>\n}\n"],"names":["MinisContainer","children","isSDKReady","setIsSDKReady","useState","useEffect","checkSDKReady","handleSDKReady","event","type","pollInterval","jsx","ImagePickerProvider","jsxs"],"mappings":";;;AAIgB,SAAAA,EAAe,EAAC,UAAAC,KAAwC;AACtE,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK;AA8ClD,SA5CAC,EAAU,MAAM;AAEd,UAAMC,IAAgB,MAChB,OAAO,YACTH,EAAc,EAAI,GACX,MAEF;AAIT,QAAIG;AACF;AAII,UAAAC,IAAiB,CAACC,MAAe;AACrC,YAAM,EAAC,MAAAC,EAAI,IAAI,KAAK,MAAMD,EAAM,IAAI;AAEpC,MAAIC,MAAS,qBACXN,EAAc,EAAI;AAAA,IAEtB;AAGO,WAAA,iBAAiB,WAAWI,CAAc,GACxC,SAAA,iBAAiB,WAAWA,CAAc;AAG7C,UAAAG,IAAe,YAAY,MAAM;AACrC,MAAIJ,OACF,cAAcI,CAAY;AAAA,OAE3B,GAAG;AAGN,WAAO,MAAM;AAEJ,aAAA,oBAAoB,WAAWH,CAAc,GAC3C,SAAA,oBAAoB,WAAWA,CAAc;AAAA,IACxD;AAAA,EACF,GAAG,EAAE,GAGAL,IAWE,gBAAAS,EAACC,KAAqB,UAAAX,GAAS,sBATjC,OAAI,EAAA,WAAU,wDACb,UAAC,gBAAAY,EAAA,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,IAAC,gBAAAF,EAAA,OAAA,EAAI,WAAU,4EAA4E,CAAA;AAAA,IAC1F,gBAAAA,EAAA,KAAA,EAAE,WAAU,iBAAgB,UAAU,aAAA,CAAA;AAAA,EAAA,EAAA,CACzC,EACF,CAAA;AAKN;"}

package/dist/hooks/util/useImagePicker.js

@@ -0,0 +1,12 @@
+import { useImagePickerContext as o } from "../../providers/ImagePickerProvider.js";
+function t() {
+  const { openCamera: e, openGallery: r } = o();
+  return {
+    openCamera: e,
+    openGallery: r
+  };
+}
+export {
+  t as useImagePicker
+};
+//# sourceMappingURL=useImagePicker.js.map

package/dist/hooks/util/useImagePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImagePicker.js","sources":["../../../src/hooks/util/useImagePicker.tsx"],"sourcesContent":["import {\n  CameraFacing,\n  useImagePickerContext,\n} from '../../providers/ImagePickerProvider'\n\ninterface UseImagePickerReturn {\n  openCamera: (cameraFacing?: CameraFacing) => Promise<File>\n  openGallery: () => Promise<File>\n}\n\nexport function useImagePicker(): UseImagePickerReturn {\n  const {openCamera, openGallery} = useImagePickerContext()\n\n  return {\n    openCamera,\n    openGallery,\n  }\n}\n"],"names":["useImagePicker","openCamera","openGallery","useImagePickerContext"],"mappings":";AAUO,SAASA,IAAuC;AACrD,QAAM,EAAC,YAAAC,GAAY,aAAAC,EAAW,IAAIC,EAAsB;AAEjD,SAAA;AAAA,IACL,YAAAF;AAAA,IACA,aAAAC;AAAA,EACF;AACF;"}

package/dist/index.js

@@ -1,6 +1,6 @@
 import { MinisContainer as o } from "./components/MinisContainer.js";
 import { ProductCard as a, ProductCardBadge as i, ProductCardCurrentPrice as l, ProductCardFavoriteButton as n, ProductCardImage as c, ProductCardImageContainer as u, ProductCardInfo as d, ProductCardOriginalPrice as p, ProductCardPrice as s, ProductCardRoot as m, ProductCardTitle as f } from "./components/commerce/product-card.js";
-import { ProductLink as g, ProductLinkActions as C, ProductLinkCurrentPrice as P, ProductLinkDiscountPrice as D, ProductLinkImage as S, ProductLinkInfo as A, ProductLinkOriginalPrice as L, ProductLinkPrice as T, ProductLinkRating as k, ProductLinkRoot as h, ProductLinkTitle as w } from "./components/commerce/product-link.js";
+import { ProductLink as g, ProductLinkActions as C, ProductLinkCurrentPrice as P, ProductLinkDiscountPrice as D, ProductLinkImage as S, ProductLinkInfo as A, ProductLinkOriginalPrice as k, ProductLinkPrice as L, ProductLinkRating as T, ProductLinkRoot as h, ProductLinkTitle as w } from "./components/commerce/product-link.js";
 import { Accordion as b, AccordionContent as v, AccordionItem as R, AccordionTrigger as F } from "./components/atoms/accordion.js";
 import { Alert as y, AlertDescription as E, AlertTitle as H } from "./components/atoms/alert.js";
 import { AlertDialog as G, AlertDialogAction as M, AlertDialogCancel as N, AlertDialogContent as U, AlertDialogDescription as z, AlertDialogFooter as V, AlertDialogHeader as j, AlertDialogOverlay as q, AlertDialogPortal as J, AlertDialogTitle as K, AlertDialogTrigger as Q } from "./components/atoms/alert-dialog.js";
@@ -10,7 +10,7 @@ import { Button as or, buttonVariants as tr } from "./components/atoms/button.js
 import { Card as ir, CardAction as lr, CardContent as nr, CardDescription as cr, CardFooter as ur, CardHeader as dr, CardTitle as pr } from "./components/atoms/card.js";
 import { Carousel as mr, CarouselContent as fr, CarouselItem as xr, CarouselNext as gr, CarouselPrevious as Cr } from "./components/atoms/carousel.js";
 import { Checkbox as Dr } from "./components/atoms/checkbox.js";
-import { Dialog as Ar, DialogClose as Lr, DialogContent as Tr, DialogDescription as kr, DialogFooter as hr, DialogHeader as wr, DialogOverlay as Ir, DialogPortal as br, DialogTitle as vr, DialogTrigger as Rr } from "./components/atoms/dialog.js";
+import { Dialog as Ar, DialogClose as kr, DialogContent as Lr, DialogDescription as Tr, DialogFooter as hr, DialogHeader as wr, DialogOverlay as Ir, DialogPortal as br, DialogTitle as vr, DialogTrigger as Rr } from "./components/atoms/dialog.js";
 import { Drawer as Br, DrawerClose as yr, DrawerContent as Er, DrawerDescription as Hr, DrawerFooter as Or, DrawerHeader as Gr, DrawerOverlay as Mr, DrawerPortal as Nr, DrawerTitle as Ur, DrawerTrigger as zr } from "./components/atoms/drawer.js";
 import { Input as jr } from "./components/atoms/input.js";
 import { Label as Jr } from "./components/atoms/label.js";
@@ -20,7 +20,7 @@ import { ResizableHandle as _r, ResizablePanel as $r, ResizablePanelGroup as re
 import { ScrollArea as oe, ScrollBar as te } from "./components/atoms/scroll-area.js";
 import { Select as ie, SelectContent as le, SelectGroup as ne, SelectItem as ce, SelectLabel as ue, SelectScrollDownButton as de, SelectScrollUpButton as pe, SelectSeparator as se, SelectTrigger as me, SelectValue as fe } from "./components/atoms/select.js";
 import { Separator as ge } from "./components/atoms/separator.js";
-import { Sheet as Pe, SheetClose as De, SheetContent as Se, SheetDescription as Ae, SheetFooter as Le, SheetHeader as Te, SheetTitle as ke, SheetTrigger as he } from "./components/atoms/sheet.js";
+import { Sheet as Pe, SheetClose as De, SheetContent as Se, SheetDescription as Ae, SheetFooter as ke, SheetHeader as Le, SheetTitle as Te, SheetTrigger as he } from "./components/atoms/sheet.js";
 import { Toaster as Ie } from "./components/atoms/sonner.js";
 import { useSavedProductsActions as ve } from "./hooks/user/useSavedProductsActions.js";
 import { useFollowedShopsActions as Fe } from "./hooks/user/useFollowedShopsActions.js";
@@ -43,9 +43,10 @@ import { useRecommendedShops as uo } from "./hooks/shop/useRecommendedShops.js";
 import { useErrorToast as so } from "./hooks/util/useErrorToast.js";
 import { useErrorScreen as fo } from "./hooks/util/useErrorScreen.js";
 import { useShare as go } from "./hooks/util/useShare.js";
-import { MiniEntityNotFoundError as Po, MiniError as Do, MiniNetworkError as So, formatError as Ao } from "./utils/errors.js";
-import { parseUrl as To } from "./utils/parseUrl.js";
-import { Consent as ho, ConsentStatus as wo, CurrencyCode as Io, Gender as bo } from "./types/minisSDK.generated.d.js";
+import { useImagePicker as Po } from "./hooks/util/useImagePicker.js";
+import { MiniEntityNotFoundError as So, MiniError as Ao, MiniNetworkError as ko, formatError as Lo } from "./utils/errors.js";
+import { parseUrl as ho } from "./utils/parseUrl.js";
+import { Consent as Io, ConsentStatus as bo, CurrencyCode as vo, Gender as Ro } from "./types/minisSDK.generated.d.js";
 export {
   b as Accordion,
   v as AccordionContent,
@@ -83,13 +84,13 @@ export {
   gr as CarouselNext,
   Cr as CarouselPrevious,
   Dr as Checkbox,
-  ho as Consent,
-  wo as ConsentStatus,
-  Io as CurrencyCode,
+  Io as Consent,
+  bo as ConsentStatus,
+  vo as CurrencyCode,
   Ar as Dialog,
-  Lr as DialogClose,
-  Tr as DialogContent,
-  kr as DialogDescription,
+  kr as DialogClose,
+  Lr as DialogContent,
+  Tr as DialogDescription,
   hr as DialogFooter,
   wr as DialogHeader,
   Ir as DialogOverlay,
@@ -106,12 +107,12 @@ export {
   Nr as DrawerPortal,
   Ur as DrawerTitle,
   zr as DrawerTrigger,
-  bo as Gender,
+  Ro as Gender,
   jr as Input,
   Jr as Label,
-  Po as MiniEntityNotFoundError,
-  Do as MiniError,
-  So as MiniNetworkError,
+  So as MiniEntityNotFoundError,
+  Ao as MiniError,
+  ko as MiniNetworkError,
   o as MinisContainer,
   a as ProductCard,
   i as ProductCardBadge,
@@ -130,9 +131,9 @@ export {
   D as ProductLinkDiscountPrice,
   S as ProductLinkImage,
   A as ProductLinkInfo,
-  L as ProductLinkOriginalPrice,
-  T as ProductLinkPrice,
-  k as ProductLinkRating,
+  k as ProductLinkOriginalPrice,
+  L as ProductLinkPrice,
+  T as ProductLinkRating,
   h as ProductLinkRoot,
   w as ProductLinkTitle,
   Qr as Progress,
@@ -158,15 +159,15 @@ export {
   De as SheetClose,
   Se as SheetContent,
   Ae as SheetDescription,
-  Le as SheetFooter,
-  Te as SheetHeader,
-  ke as SheetTitle,
+  ke as SheetFooter,
+  Le as SheetHeader,
+  Te as SheetTitle,
   he as SheetTrigger,
   Ie as Toaster,
   rr as badgeVariants,
   tr as buttonVariants,
-  Ao as formatError,
-  To as parseUrl,
+  Lo as formatError,
+  ho as parseUrl,
   Xe as useAsyncStorage,
   Ge as useBuyerAttributes,
   to as useCloseMini,
@@ -175,6 +176,7 @@ export {
   fo as useErrorScreen,
   so as useErrorToast,
   Fe as useFollowedShopsActions,
+  Po as useImagePicker,
   $e as useImageUpload,
   He as useOrders,
   Qe as usePopularProducts,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/node_modules/.pnpm/@radix-ui_react-use-is-hydrated@0.1.0_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-use-is-hydrated/dist/index.js

@@ -1,4 +1,4 @@
-import { s as r } from "../../../../../../../_virtual/index3.js";
+import { s as r } from "../../../../../../../_virtual/index2.js";
 function s() {
   return r.useSyncExternalStore(
     e,

package/dist/node_modules/.pnpm/querystringify@2.2.0/node_modules/querystringify/index.js

@@ -1,4 +1,4 @@
-import { __exports as i } from "../../../../../_virtual/index2.js";
+import { __exports as i } from "../../../../../_virtual/index3.js";
 var c;
 function d() {
   if (c) return i;

package/dist/providers/ImagePickerProvider.js

@@ -0,0 +1,107 @@
+import { jsxs as w, jsx as p } from "react/jsx-runtime";
+import { useRef as o, useCallback as s, useEffect as x, useMemo as E, createContext as I, useContext as R } from "react";
+const P = I(null);
+function j() {
+  const f = R(P);
+  if (!f)
+    throw new Error(
+      "useImagePickerContext must be used within an ImagePickerProvider"
+    );
+  return f;
+}
+function G({ children: f }) {
+  const m = o(null), C = o(null), g = o(null), n = o(null), e = o(null), i = o(null), r = s(() => {
+    if (i.current) {
+      const { input: c, handler: t } = i.current;
+      c.removeEventListener("cancel", t), i.current = null;
+    }
+  }, []), a = s(() => {
+    e.current && (e.current(
+      new Error("New file picker opened before previous completed")
+    ), n.current = null, e.current = null);
+  }, []), d = s(
+    (c) => {
+      const t = c.target.files?.[0];
+      t && n.current && (n.current(t), n.current = null, e.current = null, r()), c.target.value = "";
+    },
+    [r]
+  ), h = s(() => new Promise((c, t) => {
+    a(), r(), n.current = c, e.current = t;
+    const u = m.current;
+    if (!u) {
+      t(new Error("Gallery input not found")), n.current = null, e.current = null;
+      return;
+    }
+    const l = () => {
+      e.current && (e.current(new Error("User cancelled file selection")), n.current = null, e.current = null), r();
+    };
+    u.addEventListener("cancel", l), i.current = { input: u, handler: l }, u.click();
+  }), [a, r]), v = s(
+    (c = "back") => new Promise((t, u) => {
+      a(), r(), n.current = t, e.current = u;
+      const l = c === "front" ? C.current : g.current;
+      if (!l) {
+        u(new Error("Camera input not found")), n.current = null, e.current = null;
+        return;
+      }
+      const y = () => {
+        e.current && (e.current(new Error("User cancelled camera")), n.current = null, e.current = null), r();
+      };
+      l.addEventListener("cancel", y), i.current = { input: l, handler: y }, l.click();
+    }),
+    [a, r]
+  );
+  x(() => () => {
+    a(), r();
+  }, [a, r]);
+  const k = E(
+    () => ({
+      openCamera: v,
+      openGallery: h
+    }),
+    [v, h]
+  );
+  return /* @__PURE__ */ w(P.Provider, { value: k, children: [
+    f,
+    /* @__PURE__ */ p(
+      "input",
+      {
+        ref: m,
+        type: "file",
+        accept: "image/*",
+        onChange: d,
+        style: { display: "none" },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ p(
+      "input",
+      {
+        ref: C,
+        type: "file",
+        accept: "image/*",
+        capture: "user",
+        onChange: d,
+        style: { display: "none" },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ p(
+      "input",
+      {
+        ref: g,
+        type: "file",
+        accept: "image/*",
+        capture: "environment",
+        onChange: d,
+        style: { display: "none" },
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}
+export {
+  G as ImagePickerProvider,
+  j as useImagePickerContext
+};
+//# sourceMappingURL=ImagePickerProvider.js.map

package/dist/providers/ImagePickerProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePickerProvider.js","sources":["../../src/providers/ImagePickerProvider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useRef,\n  useCallback,\n  useEffect,\n  useMemo,\n} from 'react'\n\nexport type CameraFacing = 'front' | 'back'\n\ninterface ImagePickerContextValue {\n  openCamera: (cameraFacing?: CameraFacing) => Promise<File>\n  openGallery: () => Promise<File>\n}\n\nconst ImagePickerContext = createContext<ImagePickerContextValue | null>(null)\n\nexport function useImagePickerContext() {\n  const context = useContext(ImagePickerContext)\n  if (!context) {\n    throw new Error(\n      'useImagePickerContext must be used within an ImagePickerProvider'\n    )\n  }\n  return context\n}\n\ninterface ImagePickerProviderProps {\n  children: React.ReactNode\n}\n\nexport function ImagePickerProvider({children}: ImagePickerProviderProps) {\n  const galleryInputRef = useRef<HTMLInputElement>(null)\n  const frontCameraInputRef = useRef<HTMLInputElement>(null)\n  const backCameraInputRef = useRef<HTMLInputElement>(null)\n  const resolveRef = useRef<((file: File) => void) | null>(null)\n  const rejectRef = useRef<((reason: Error) => void) | null>(null)\n  const activeCancelHandlerRef = useRef<{\n    input: HTMLInputElement\n    handler: () => void\n  } | null>(null)\n\n  const cleanupCancelHandler = useCallback(() => {\n    if (activeCancelHandlerRef.current) {\n      const {input, handler} = activeCancelHandlerRef.current\n      input.removeEventListener('cancel', handler)\n      activeCancelHandlerRef.current = null\n    }\n  }, [])\n\n  const rejectPendingPromise = useCallback(() => {\n    if (rejectRef.current) {\n      rejectRef.current(\n        new Error('New file picker opened before previous completed')\n      )\n      resolveRef.current = null\n      rejectRef.current = null\n    }\n  }, [])\n\n  const handleFileChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0]\n\n      if (file && resolveRef.current) {\n        resolveRef.current(file)\n\n        resolveRef.current = null\n        rejectRef.current = null\n\n        cleanupCancelHandler()\n      }\n\n      event.target.value = ''\n    },\n    [cleanupCancelHandler]\n  )\n\n  const openGallery = useCallback(() => {\n    return new Promise<File>((resolve, reject) => {\n      rejectPendingPromise()\n      cleanupCancelHandler()\n\n      resolveRef.current = resolve\n      rejectRef.current = reject\n\n      const input = galleryInputRef.current\n\n      if (!input) {\n        reject(new Error('Gallery input not found'))\n        resolveRef.current = null\n        rejectRef.current = null\n        return\n      }\n\n      const handleCancel = () => {\n        if (rejectRef.current) {\n          rejectRef.current(new Error('User cancelled file selection'))\n          resolveRef.current = null\n          rejectRef.current = null\n        }\n        cleanupCancelHandler()\n      }\n\n      input.addEventListener('cancel', handleCancel)\n      activeCancelHandlerRef.current = {input, handler: handleCancel}\n\n      input.click()\n    })\n  }, [rejectPendingPromise, cleanupCancelHandler])\n\n  const openCamera = useCallback(\n    (cameraFacing: CameraFacing = 'back') => {\n      return new Promise<File>((resolve, reject) => {\n        rejectPendingPromise()\n        cleanupCancelHandler()\n\n        resolveRef.current = resolve\n        rejectRef.current = reject\n\n        const input =\n          cameraFacing === 'front'\n            ? frontCameraInputRef.current\n            : backCameraInputRef.current\n\n        if (!input) {\n          reject(new Error('Camera input not found'))\n          resolveRef.current = null\n          rejectRef.current = null\n          return\n        }\n\n        const handleCancel = () => {\n          if (rejectRef.current) {\n            rejectRef.current(new Error('User cancelled camera'))\n            resolveRef.current = null\n            rejectRef.current = null\n          }\n          cleanupCancelHandler()\n        }\n\n        input.addEventListener('cancel', handleCancel)\n        activeCancelHandlerRef.current = {input, handler: handleCancel}\n\n        input.click()\n      })\n    },\n    [rejectPendingPromise, cleanupCancelHandler]\n  )\n\n  useEffect(() => {\n    return () => {\n      rejectPendingPromise()\n      cleanupCancelHandler()\n    }\n  }, [rejectPendingPromise, cleanupCancelHandler])\n\n  const contextValue: ImagePickerContextValue = useMemo(\n    () => ({\n      openCamera,\n      openGallery,\n    }),\n    [openCamera, openGallery]\n  )\n\n  return (\n    <ImagePickerContext.Provider value={contextValue}>\n      {children}\n      <input\n        ref={galleryInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        onChange={handleFileChange}\n        style={{display: 'none'}}\n        aria-hidden=\"true\"\n      />\n      <input\n        ref={frontCameraInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"user\"\n        onChange={handleFileChange}\n        style={{display: 'none'}}\n        aria-hidden=\"true\"\n      />\n      <input\n        ref={backCameraInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"environment\"\n        onChange={handleFileChange}\n        style={{display: 'none'}}\n        aria-hidden=\"true\"\n      />\n    </ImagePickerContext.Provider>\n  )\n}\n"],"names":["ImagePickerContext","createContext","useImagePickerContext","context","useContext","ImagePickerProvider","children","galleryInputRef","useRef","frontCameraInputRef","backCameraInputRef","resolveRef","rejectRef","activeCancelHandlerRef","cleanupCancelHandler","useCallback","input","handler","rejectPendingPromise","handleFileChange","event","file","openGallery","resolve","reject","handleCancel","openCamera","cameraFacing","useEffect","contextValue","useMemo","jsxs","jsx"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "sideEffects": false,
   "type": "module",
   "engines": {

package/src/components/MinisContainer.tsx

@@ -1,5 +1,7 @@
 import React, {useEffect, useState} from 'react'
 
+import {ImagePickerProvider} from '../providers/ImagePickerProvider'
+
 export function MinisContainer({children}: {children: React.ReactNode}) {
   const [isSDKReady, setIsSDKReady] = useState(false)
 
@@ -58,5 +60,5 @@ export function MinisContainer({children}: {children: React.ReactNode}) {
     )
   }
 
-  return children
+  return <ImagePickerProvider>{children}</ImagePickerProvider>
 }

package/src/hooks/index.ts

@@ -32,3 +32,4 @@ export * from './shop/useRecommendedShops'
 export * from './util/useErrorToast'
 export * from './util/useErrorScreen'
 export * from './util/useShare'
+export * from './util/useImagePicker'

package/src/hooks/util/useImagePicker.doc.tsx

@@ -0,0 +1,41 @@
+export const useImagePickerDoc = {
+  name: 'useImagePicker',
+  category: 'Utility',
+  description:
+    'Hook for selecting images from camera or gallery in web-based mini apps',
+  params: [
+    {
+      name: 'options',
+      type: 'UseImagePickerOptions',
+      description: 'Configuration options for the image picker',
+      optional: true,
+      properties: [
+        {
+          name: 'cameraFacing',
+          type: "'user' | 'environment'",
+          description: 'Which camera to use when opening camera',
+          optional: true,
+          default: "'environment'",
+        },
+      ],
+    },
+  ],
+  returns: [
+    {
+      name: 'openCamera',
+      type: '() => Promise<File>',
+      description: 'Function to open the camera for capturing an image',
+    },
+    {
+      name: 'openGallery',
+      type: '() => Promise<File>',
+      description: 'Function to open the gallery for selecting an image',
+    },
+    {
+      name: 'ImagePickerInputs',
+      type: 'React.FC',
+      description:
+        'Component that renders hidden file inputs. Must be rendered in your component for the picker to work',
+    },
+  ],
+}

package/src/hooks/util/useImagePicker.example.tsx

@@ -0,0 +1,85 @@
+import React, {useState} from 'react'
+
+import {Camera, Image} from 'lucide-react'
+
+import {Alert, AlertDescription, AlertTitle} from '../../components/ui/alert'
+import {Button} from '../../components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '../../components/ui/card'
+
+import {useImagePicker} from './useImagePicker'
+
+export const UseImagePickerExample = () => {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const {openCamera, openGallery, ImagePickerInputs} = useImagePicker({
+    cameraFacing: 'user',
+  })
+
+  const handleCameraCapture = async () => {
+    try {
+      setError(null)
+      const file = await openCamera()
+      const url = URL.createObjectURL(file)
+      setSelectedImage(url)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to capture image')
+    }
+  }
+
+  const handleGallerySelect = async () => {
+    try {
+      setError(null)
+      const file = await openGallery()
+      const url = URL.createObjectURL(file)
+      setSelectedImage(url)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to select image')
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Image Picker Example</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <ImagePickerInputs />
+
+        <div className="flex gap-2">
+          <Button onClick={handleCameraCapture} variant="primary">
+            <Camera className="mr-2 h-4 w-4" />
+            Open Camera
+          </Button>
+
+          <Button onClick={handleGallerySelect} variant="secondary">
+            <Image className="mr-2 h-4 w-4" />
+            Open Gallery
+          </Button>
+        </div>
+
+        {error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+
+        {selectedImage && (
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium">Selected Image:</h3>
+            <img
+              src={selectedImage}
+              alt="Selected"
+              className="w-full rounded-md border"
+            />
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/src/hooks/util/useImagePicker.tsx

@@ -0,0 +1,18 @@
+import {
+  CameraFacing,
+  useImagePickerContext,
+} from '../../providers/ImagePickerProvider'
+
+interface UseImagePickerReturn {
+  openCamera: (cameraFacing?: CameraFacing) => Promise<File>
+  openGallery: () => Promise<File>
+}
+
+export function useImagePicker(): UseImagePickerReturn {
+  const {openCamera, openGallery} = useImagePickerContext()
+
+  return {
+    openCamera,
+    openGallery,
+  }
+}

package/src/providers/ImagePickerProvider.tsx

@@ -0,0 +1,198 @@
+import React, {
+  createContext,
+  useContext,
+  useRef,
+  useCallback,
+  useEffect,
+  useMemo,
+} from 'react'
+
+export type CameraFacing = 'front' | 'back'
+
+interface ImagePickerContextValue {
+  openCamera: (cameraFacing?: CameraFacing) => Promise<File>
+  openGallery: () => Promise<File>
+}
+
+const ImagePickerContext = createContext<ImagePickerContextValue | null>(null)
+
+export function useImagePickerContext() {
+  const context = useContext(ImagePickerContext)
+  if (!context) {
+    throw new Error(
+      'useImagePickerContext must be used within an ImagePickerProvider'
+    )
+  }
+  return context
+}
+
+interface ImagePickerProviderProps {
+  children: React.ReactNode
+}
+
+export function ImagePickerProvider({children}: ImagePickerProviderProps) {
+  const galleryInputRef = useRef<HTMLInputElement>(null)
+  const frontCameraInputRef = useRef<HTMLInputElement>(null)
+  const backCameraInputRef = useRef<HTMLInputElement>(null)
+  const resolveRef = useRef<((file: File) => void) | null>(null)
+  const rejectRef = useRef<((reason: Error) => void) | null>(null)
+  const activeCancelHandlerRef = useRef<{
+    input: HTMLInputElement
+    handler: () => void
+  } | null>(null)
+
+  const cleanupCancelHandler = useCallback(() => {
+    if (activeCancelHandlerRef.current) {
+      const {input, handler} = activeCancelHandlerRef.current
+      input.removeEventListener('cancel', handler)
+      activeCancelHandlerRef.current = null
+    }
+  }, [])
+
+  const rejectPendingPromise = useCallback(() => {
+    if (rejectRef.current) {
+      rejectRef.current(
+        new Error('New file picker opened before previous completed')
+      )
+      resolveRef.current = null
+      rejectRef.current = null
+    }
+  }, [])
+
+  const handleFileChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0]
+
+      if (file && resolveRef.current) {
+        resolveRef.current(file)
+
+        resolveRef.current = null
+        rejectRef.current = null
+
+        cleanupCancelHandler()
+      }
+
+      event.target.value = ''
+    },
+    [cleanupCancelHandler]
+  )
+
+  const openGallery = useCallback(() => {
+    return new Promise<File>((resolve, reject) => {
+      rejectPendingPromise()
+      cleanupCancelHandler()
+
+      resolveRef.current = resolve
+      rejectRef.current = reject
+
+      const input = galleryInputRef.current
+
+      if (!input) {
+        reject(new Error('Gallery input not found'))
+        resolveRef.current = null
+        rejectRef.current = null
+        return
+      }
+
+      const handleCancel = () => {
+        if (rejectRef.current) {
+          rejectRef.current(new Error('User cancelled file selection'))
+          resolveRef.current = null
+          rejectRef.current = null
+        }
+        cleanupCancelHandler()
+      }
+
+      input.addEventListener('cancel', handleCancel)
+      activeCancelHandlerRef.current = {input, handler: handleCancel}
+
+      input.click()
+    })
+  }, [rejectPendingPromise, cleanupCancelHandler])
+
+  const openCamera = useCallback(
+    (cameraFacing: CameraFacing = 'back') => {
+      return new Promise<File>((resolve, reject) => {
+        rejectPendingPromise()
+        cleanupCancelHandler()
+
+        resolveRef.current = resolve
+        rejectRef.current = reject
+
+        const input =
+          cameraFacing === 'front'
+            ? frontCameraInputRef.current
+            : backCameraInputRef.current
+
+        if (!input) {
+          reject(new Error('Camera input not found'))
+          resolveRef.current = null
+          rejectRef.current = null
+          return
+        }
+
+        const handleCancel = () => {
+          if (rejectRef.current) {
+            rejectRef.current(new Error('User cancelled camera'))
+            resolveRef.current = null
+            rejectRef.current = null
+          }
+          cleanupCancelHandler()
+        }
+
+        input.addEventListener('cancel', handleCancel)
+        activeCancelHandlerRef.current = {input, handler: handleCancel}
+
+        input.click()
+      })
+    },
+    [rejectPendingPromise, cleanupCancelHandler]
+  )
+
+  useEffect(() => {
+    return () => {
+      rejectPendingPromise()
+      cleanupCancelHandler()
+    }
+  }, [rejectPendingPromise, cleanupCancelHandler])
+
+  const contextValue: ImagePickerContextValue = useMemo(
+    () => ({
+      openCamera,
+      openGallery,
+    }),
+    [openCamera, openGallery]
+  )
+
+  return (
+    <ImagePickerContext.Provider value={contextValue}>
+      {children}
+      <input
+        ref={galleryInputRef}
+        type="file"
+        accept="image/*"
+        onChange={handleFileChange}
+        style={{display: 'none'}}
+        aria-hidden="true"
+      />
+      <input
+        ref={frontCameraInputRef}
+        type="file"
+        accept="image/*"
+        capture="user"
+        onChange={handleFileChange}
+        style={{display: 'none'}}
+        aria-hidden="true"
+      />
+      <input
+        ref={backCameraInputRef}
+        type="file"
+        accept="image/*"
+        capture="environment"
+        onChange={handleFileChange}
+        style={{display: 'none'}}
+        aria-hidden="true"
+      />
+    </ImagePickerContext.Provider>
+  )
+}