@shopify/shop-minis-react 0.13.0 → 0.13.1

package/dist/components/atoms/content-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-wrapper.js","sources":["../../../src/components/atoms/content-wrapper.tsx"],"sourcesContent":["import {useContent} from '../../hooks/content/useContent'\nimport {Content} from '../../types'\n\nimport {ContentMonitor} from './content-monitor'\n\ninterface BaseContentWrapperProps {\n  children: ({\n    content,\n    loading,\n  }: {\n    content?: Content\n    loading: boolean\n  }) => React.JSX.Element | null\n}\n\ninterface PublicIdContentWrapperProps extends BaseContentWrapperProps {\n  publicId: string\n  externalId?: never\n}\n\ninterface ExternalIdContentWrapperProps extends BaseContentWrapperProps {\n  externalId: string\n  publicId?: never\n}\n\ntype ContentWrapperProps =\n  | PublicIdContentWrapperProps\n  | ExternalIdContentWrapperProps\n\n// It's too messy in the docs to show the complete types here so we show a simplified version\nexport interface ContentWrapperPropsForDocs extends BaseContentWrapperProps {\n  publicId?: string\n  externalId?: string\n}\n\nexport function ContentWrapper({\n  publicId,\n  externalId,\n  children,\n}: ContentWrapperProps) {\n  const {content, loading} = useContent({\n    identifiers: [{publicId, externalId}],\n    skip: !publicId && !externalId,\n  })\n\n  const contentItem = content?.[0]\n\n  if (loading || !contentItem) {\n    return children({loading})\n  }\n\n  return (\n    <ContentMonitor publicId={contentItem.publicId}>\n      {children({content: contentItem, loading})}\n    </ContentMonitor>\n  )\n}\n"],"names":["ContentWrapper","publicId","externalId","children","content","loading","useContent","contentItem","jsx","ContentMonitor"],"mappings":";;;AAmCO,SAASA,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AACF,GAAwB;AACtB,QAAM,EAAC,SAAAC,GAAS,SAAAC,EAAO,IAAIC,EAAW;AAAA,IACpC,aAAa,CAAC,EAAC,UAAAL,GAAU,YAAAC,GAAW;AAAA,IACpC,MAAM,CAACD,KAAY,CAACC;AAAA,EAAA,CACrB,GAEKK,IAAcH,IAAU,CAAC;AAE3B,SAAAC,KAAW,CAACE,IACPJ,EAAS,EAAC,SAAAE,GAAQ,IAIzB,gBAAAG,EAACC,GAAe,EAAA,UAAUF,EAAY,UACnC,UAASJ,EAAA,EAAC,SAASI,GAAa,SAAAF,EAAO,CAAC,EAC3C,CAAA;AAEJ;"}
+{"version":3,"file":"content-wrapper.js","sources":["../../../src/components/atoms/content-wrapper.tsx"],"sourcesContent":["import {useContent} from '../../hooks/content/useContent'\nimport {Content} from '../../types'\n\nimport {ContentMonitor} from './content-monitor'\n\ninterface BaseContentWrapperProps {\n  /** A render function that receives the content data and loading state, and returns a React element. */\n  children: ({\n    content,\n    loading,\n  }: {\n    content?: Content\n    loading: boolean\n  }) => React.JSX.Element | null\n}\n\ninterface PublicIdContentWrapperProps extends BaseContentWrapperProps {\n  publicId: string\n  externalId?: never\n}\n\ninterface ExternalIdContentWrapperProps extends BaseContentWrapperProps {\n  externalId: string\n  publicId?: never\n}\n\ntype ContentWrapperProps =\n  | PublicIdContentWrapperProps\n  | ExternalIdContentWrapperProps\n\n// It's too messy in the docs to show the complete types here so we show a simplified version\nexport interface ContentWrapperPropsForDocs extends BaseContentWrapperProps {\n  /** The public ID of the content item (use this OR externalId). */\n  publicId?: string\n  /** The external ID of the content item (use this OR publicId). */\n  externalId?: string\n}\n\nexport function ContentWrapper({\n  publicId,\n  externalId,\n  children,\n}: ContentWrapperProps) {\n  const {content, loading} = useContent({\n    identifiers: [{publicId, externalId}],\n    skip: !publicId && !externalId,\n  })\n\n  const contentItem = content?.[0]\n\n  if (loading || !contentItem) {\n    return children({loading})\n  }\n\n  return (\n    <ContentMonitor publicId={contentItem.publicId}>\n      {children({content: contentItem, loading})}\n    </ContentMonitor>\n  )\n}\n"],"names":["ContentWrapper","publicId","externalId","children","content","loading","useContent","contentItem","jsx","ContentMonitor"],"mappings":";;;AAsCO,SAASA,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AACF,GAAwB;AACtB,QAAM,EAAC,SAAAC,GAAS,SAAAC,EAAO,IAAIC,EAAW;AAAA,IACpC,aAAa,CAAC,EAAC,UAAAL,GAAU,YAAAC,GAAW;AAAA,IACpC,MAAM,CAACD,KAAY,CAACC;AAAA,EAAA,CACrB,GAEKK,IAAcH,IAAU,CAAC;AAE3B,SAAAC,KAAW,CAACE,IACPJ,EAAS,EAAC,SAAAE,GAAQ,IAIzB,gBAAAG,EAACC,GAAe,EAAA,UAAUF,EAAY,UACnC,UAASJ,EAAA,EAAC,SAASI,GAAa,SAAAF,EAAO,CAAC,EAC3C,CAAA;AAEJ;"}

package/dist/hooks/content/useCreateImageContent.js

@@ -1,34 +1,44 @@
-import { useState as g, useCallback as p } from "react";
-import { useHandleAction as f } from "../../internal/useHandleAction.js";
-import { useShopActions as d } from "../../internal/useShopActions.js";
-import { useImageUpload as I } from "../storage/useImageUpload.js";
-const U = () => {
-  const { createContent: t } = d(), { uploadImage: a } = I(), [r, o] = g(!1), i = p(
+import { useState as f, useCallback as I } from "react";
+import { useHandleAction as w } from "../../internal/useHandleAction.js";
+import { useShopActions as C } from "../../internal/useShopActions.js";
+import { useImageUpload as y } from "../storage/useImageUpload.js";
+const v = () => {
+  const { createContent: t } = C(), { uploadImage: o } = y(), [n, a] = f(!1), i = I(
     async (s) => {
-      o(!0);
-      const { image: e, contentTitle: l, visibility: m } = s;
+      a(!0);
+      const {
+        image: e,
+        contentTitle: l,
+        visibility: m,
+        externalId: c,
+        description: p,
+        productIds: u
+      } = s;
       if (!e.type)
         throw new Error("Unable to determine file type");
       if (!e.type.startsWith("image/"))
         throw new Error("Invalid file type: must be an image");
-      const [c] = await a(e), n = c.imageUrl;
-      if (!n)
+      const [d] = await o(e), r = d.imageUrl;
+      if (!r)
         throw new Error("Image upload failed");
-      const u = await t({
+      const g = await t({
         title: l,
-        imageUrl: n,
-        visibility: m
+        imageUrl: r,
+        visibility: m,
+        externalId: c,
+        description: p,
+        productIds: u
       });
-      return o(!1), u;
+      return a(!1), g;
     },
-    [t, a]
+    [t, o]
   );
   return {
-    createImageContent: f(i),
-    loading: r
+    createImageContent: w(i),
+    loading: n
   };
 };
 export {
-  U as useCreateImageContent
+  v as useCreateImageContent
 };
 //# sourceMappingURL=useCreateImageContent.js.map

package/dist/hooks/content/useCreateImageContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCreateImageContent.js","sources":["../../../src/hooks/content/useCreateImageContent.ts"],"sourcesContent":["import {useCallback, useState} from 'react'\n\nimport {\n  ContentVisibility,\n  Content,\n  ContentCreateUserErrors,\n} from '@shopify/shop-minis-platform'\n\nimport {useHandleAction} from '../../internal/useHandleAction'\nimport {useShopActions} from '../../internal/useShopActions'\nimport {useImageUpload} from '../storage/useImageUpload'\n\ninterface CreateImageContentParams {\n  image: File\n  contentTitle: string\n  visibility?: ContentVisibility[] | null\n}\n\ninterface UseCreateImageContentReturns {\n  /**\n   * Upload an image and create content.\n   */\n  createImageContent: (\n    params: CreateImageContentParams\n  ) => Promise<{data: Content; userErrors?: ContentCreateUserErrors[]}>\n  /**\n   * Whether the content is being created.\n   */\n  loading: boolean\n}\n\nexport const useCreateImageContent = (): UseCreateImageContentReturns => {\n  const {createContent} = useShopActions()\n  const {uploadImage} = useImageUpload()\n  const [loading, setLoading] = useState(false)\n\n  const createImageContent = useCallback(\n    async (params: CreateImageContentParams) => {\n      setLoading(true)\n\n      const {image, contentTitle, visibility} = params\n\n      if (!image.type) {\n        throw new Error('Unable to determine file type')\n      }\n      if (!image.type.startsWith('image/')) {\n        throw new Error('Invalid file type: must be an image')\n      }\n\n      const [uploadImageResult] = await uploadImage(image)\n      const uploadImageUrl = uploadImageResult.imageUrl\n\n      if (!uploadImageUrl) {\n        throw new Error('Image upload failed')\n      }\n\n      const createContentResult = await createContent({\n        title: contentTitle,\n        imageUrl: uploadImageUrl,\n        visibility,\n      })\n\n      setLoading(false)\n\n      return createContentResult\n    },\n    [createContent, uploadImage]\n  )\n\n  return {\n    createImageContent: useHandleAction(createImageContent),\n    loading,\n  }\n}\n"],"names":["useCreateImageContent","createContent","useShopActions","uploadImage","useImageUpload","loading","setLoading","useState","createImageContent","useCallback","params","image","contentTitle","visibility","uploadImageResult","uploadImageUrl","createContentResult","useHandleAction"],"mappings":";;;;AA+BO,MAAMA,IAAwB,MAAoC;AACjE,QAAA,EAAC,eAAAC,EAAa,IAAIC,EAAe,GACjC,EAAC,aAAAC,EAAW,IAAIC,EAAe,GAC/B,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAqBC;AAAA,IACzB,OAAOC,MAAqC;AAC1C,MAAAJ,EAAW,EAAI;AAEf,YAAM,EAAC,OAAAK,GAAO,cAAAC,GAAc,YAAAC,EAAc,IAAAH;AAEtC,UAAA,CAACC,EAAM;AACH,cAAA,IAAI,MAAM,+BAA+B;AAEjD,UAAI,CAACA,EAAM,KAAK,WAAW,QAAQ;AAC3B,cAAA,IAAI,MAAM,qCAAqC;AAGvD,YAAM,CAACG,CAAiB,IAAI,MAAMX,EAAYQ,CAAK,GAC7CI,IAAiBD,EAAkB;AAEzC,UAAI,CAACC;AACG,cAAA,IAAI,MAAM,qBAAqB;AAGjC,YAAAC,IAAsB,MAAMf,EAAc;AAAA,QAC9C,OAAOW;AAAA,QACP,UAAUG;AAAA,QACV,YAAAF;AAAA,MAAA,CACD;AAED,aAAAP,EAAW,EAAK,GAETU;AAAA,IACT;AAAA,IACA,CAACf,GAAeE,CAAW;AAAA,EAC7B;AAEO,SAAA;AAAA,IACL,oBAAoBc,EAAgBT,CAAkB;AAAA,IACtD,SAAAH;AAAA,EACF;AACF;"}
+{"version":3,"file":"useCreateImageContent.js","sources":["../../../src/hooks/content/useCreateImageContent.ts"],"sourcesContent":["import {useCallback, useState} from 'react'\n\nimport {\n  ContentVisibility,\n  Content,\n  ContentCreateUserErrors,\n} from '@shopify/shop-minis-platform'\n\nimport {useHandleAction} from '../../internal/useHandleAction'\nimport {useShopActions} from '../../internal/useShopActions'\nimport {useImageUpload} from '../storage/useImageUpload'\n\ninterface CreateImageContentParams {\n  /**\n   * The image file to upload.\n   */\n  image: File\n  /**\n   * The title for the content entry.\n   */\n  contentTitle: string\n  /**\n   * Visibility options for the content. Use `['DISCOVERABLE']` to appear in\n   * recommendations, `['LINKABLE']` to enable shareable URLs, or both. Pass\n   * `null` or `[]` to keep content private within your Mini.\n   */\n  visibility?: ContentVisibility[] | null\n  /**\n   * A unique identifier from your own system that lets you look up content\n   * later via `ContentWrapper` using an ID you already know.\n   * If not provided, the content can only be retrieved by its `publicId`.\n   * Each `externalId` must be unique per Mini — creating content with a\n   * duplicate returns a `DUPLICATE_EXTERNAL_ID` error.\n   */\n  externalId?: string\n  /**\n   * A text description for the content. Displayed alongside the image in Shop\n   * surfaces such as feeds and content detail views. Use this to provide\n   * context about the image, such as a caption or review text.\n   */\n  description?: string\n  /**\n   * An array of Shopify product GIDs (e.g. `'gid://shopify/Product/123'`) to\n   * associate with the content. Maximum 20 products. Associated products\n   * appear alongside the content, enabling shoppable content experiences.\n   */\n  productIds?: string[]\n}\n\ninterface UseCreateImageContentReturns {\n  /**\n   * Upload an image and create content.\n   */\n  createImageContent: (\n    params: CreateImageContentParams\n  ) => Promise<{data: Content; userErrors?: ContentCreateUserErrors[]}>\n  /**\n   * Whether the content is being created.\n   */\n  loading: boolean\n}\n\nexport const useCreateImageContent = (): UseCreateImageContentReturns => {\n  const {createContent} = useShopActions()\n  const {uploadImage} = useImageUpload()\n  const [loading, setLoading] = useState(false)\n\n  const createImageContent = useCallback(\n    async (params: CreateImageContentParams) => {\n      setLoading(true)\n\n      const {\n        image,\n        contentTitle,\n        visibility,\n        externalId,\n        description,\n        productIds,\n      } = params\n\n      if (!image.type) {\n        throw new Error('Unable to determine file type')\n      }\n      if (!image.type.startsWith('image/')) {\n        throw new Error('Invalid file type: must be an image')\n      }\n\n      const [uploadImageResult] = await uploadImage(image)\n      const uploadImageUrl = uploadImageResult.imageUrl\n\n      if (!uploadImageUrl) {\n        throw new Error('Image upload failed')\n      }\n\n      const createContentResult = await createContent({\n        title: contentTitle,\n        imageUrl: uploadImageUrl,\n        visibility,\n        externalId,\n        description,\n        productIds,\n      })\n\n      setLoading(false)\n\n      return createContentResult\n    },\n    [createContent, uploadImage]\n  )\n\n  return {\n    createImageContent: useHandleAction(createImageContent),\n    loading,\n  }\n}\n"],"names":["useCreateImageContent","createContent","useShopActions","uploadImage","useImageUpload","loading","setLoading","useState","createImageContent","useCallback","params","image","contentTitle","visibility","externalId","description","productIds","uploadImageResult","uploadImageUrl","createContentResult","useHandleAction"],"mappings":";;;;AA8DO,MAAMA,IAAwB,MAAoC;AACjE,QAAA,EAAC,eAAAC,EAAa,IAAIC,EAAe,GACjC,EAAC,aAAAC,EAAW,IAAIC,EAAe,GAC/B,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAqBC;AAAA,IACzB,OAAOC,MAAqC;AAC1C,MAAAJ,EAAW,EAAI;AAET,YAAA;AAAA,QACJ,OAAAK;AAAA,QACA,cAAAC;AAAA,QACA,YAAAC;AAAA,QACA,YAAAC;AAAA,QACA,aAAAC;AAAA,QACA,YAAAC;AAAA,MAAA,IACEN;AAEA,UAAA,CAACC,EAAM;AACH,cAAA,IAAI,MAAM,+BAA+B;AAEjD,UAAI,CAACA,EAAM,KAAK,WAAW,QAAQ;AAC3B,cAAA,IAAI,MAAM,qCAAqC;AAGvD,YAAM,CAACM,CAAiB,IAAI,MAAMd,EAAYQ,CAAK,GAC7CO,IAAiBD,EAAkB;AAEzC,UAAI,CAACC;AACG,cAAA,IAAI,MAAM,qBAAqB;AAGjC,YAAAC,IAAsB,MAAMlB,EAAc;AAAA,QAC9C,OAAOW;AAAA,QACP,UAAUM;AAAA,QACV,YAAAL;AAAA,QACA,YAAAC;AAAA,QACA,aAAAC;AAAA,QACA,YAAAC;AAAA,MAAA,CACD;AAED,aAAAV,EAAW,EAAK,GAETa;AAAA,IACT;AAAA,IACA,CAAClB,GAAeE,CAAW;AAAA,EAC7B;AAEO,SAAA;AAAA,IACL,oBAAoBiB,EAAgBZ,CAAkB;AAAA,IACtD,SAAAH;AAAA,EACF;AACF;"}

package/dist/hooks/navigation/useCloseMini.js

@@ -1,12 +1,15 @@
+import { useCallback as s } from "react";
 import { useHandleAction as i } from "../../internal/useHandleAction.js";
-import { useShopActions as e } from "../../internal/useShopActions.js";
-const t = () => {
-  const { closeMini: o } = e();
+import { useShopActions as n } from "../../internal/useShopActions.js";
+const l = () => {
+  const { closeMini: e } = n(), o = i(e);
   return {
-    closeMini: i(o)
+    // Wrapper prevents React SyntheticEvent args from leaking through
+    // when used directly as an event handler (e.g. onClick={closeMini})
+    closeMini: s(() => o(), [o])
   };
 };
 export {
-  t as useCloseMini
+  l as useCloseMini
 };
 //# sourceMappingURL=useCloseMini.js.map

package/dist/hooks/navigation/useCloseMini.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCloseMini.js","sources":["../../../src/hooks/navigation/useCloseMini.ts"],"sourcesContent":["import {useHandleAction} from '../../internal/useHandleAction'\nimport {useShopActions} from '../../internal/useShopActions'\n\ninterface UseCloseMiniReturns {\n  /**\n   * Closes the Mini viewer.\n   */\n  closeMini: () => void\n}\n\nexport const useCloseMini = (): UseCloseMiniReturns => {\n  const {closeMini} = useShopActions()\n\n  return {\n    closeMini: useHandleAction(closeMini),\n  }\n}\n"],"names":["useCloseMini","closeMini","useShopActions","useHandleAction"],"mappings":";;AAUO,MAAMA,IAAe,MAA2B;AAC/C,QAAA,EAAC,WAAAC,EAAS,IAAIC,EAAe;AAE5B,SAAA;AAAA,IACL,WAAWC,EAAgBF,CAAS;AAAA,EACtC;AACF;"}
+{"version":3,"file":"useCloseMini.js","sources":["../../../src/hooks/navigation/useCloseMini.ts"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {useHandleAction} from '../../internal/useHandleAction'\nimport {useShopActions} from '../../internal/useShopActions'\n\ninterface UseCloseMiniReturns {\n  /**\n   * Closes the Mini viewer.\n   */\n  closeMini: () => void\n}\n\nexport const useCloseMini = (): UseCloseMiniReturns => {\n  const {closeMini} = useShopActions()\n  const handleClose = useHandleAction(closeMini)\n\n  return {\n    // Wrapper prevents React SyntheticEvent args from leaking through\n    // when used directly as an event handler (e.g. onClick={closeMini})\n    closeMini: useCallback(() => handleClose(), [handleClose]),\n  }\n}\n"],"names":["useCloseMini","closeMini","useShopActions","handleClose","useHandleAction","useCallback"],"mappings":";;;AAYO,MAAMA,IAAe,MAA2B;AAC/C,QAAA,EAAC,WAAAC,EAAS,IAAIC,EAAe,GAC7BC,IAAcC,EAAgBH,CAAS;AAEtC,SAAA;AAAA;AAAA;AAAA,IAGL,WAAWI,EAAY,MAAMF,EAAe,GAAA,CAACA,CAAW,CAAC;AAAA,EAC3D;AACF;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useSafeArea.js","sources":["../../../src/hooks/util/useSafeArea.ts"],"sourcesContent":["import type {SafeAreaInsets} from '@shopify/shop-minis-platform'\n\nconst DEFAULT_INSETS: SafeAreaInsets = {top: 0, right: 0, bottom: 0, left: 0}\n\n/**\n * Returns the safe area insets for the current device.\n *\n * These values represent the areas of the screen that are obscured by\n * system UI (home indicator, navigation bar, etc). Use them to ensure\n * content isn't hidden behind system chrome.\n *\n * The values are also available as CSS custom properties:\n * `--safe-area-inset-top`, `--safe-area-inset-right`,\n * `--safe-area-inset-bottom`, `--safe-area-inset-left`\n *\n * @example\n * ```tsx\n * const {bottom} = useSafeArea()\n * return <div style={{paddingBottom: bottom}}>Content</div>\n * ```\n */\nexport function useSafeArea(): SafeAreaInsets {\n  return window.minisParams?.safeAreaInsets ?? DEFAULT_INSETS\n}\n"],"names":["DEFAULT_INSETS","useSafeArea"],"mappings":"AAEA,MAAMA,IAAiC,EAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EAAC;AAmBrE,SAASC,IAA8B;AACrC,SAAA,OAAO,aAAa,kBAAkBD;AAC/C;"}
+{"version":3,"file":"useSafeArea.js","sources":["../../../src/hooks/util/useSafeArea.ts"],"sourcesContent":["import type {SafeAreaInsets} from '@shopify/shop-minis-platform'\n\n/** @docs Return type for the useSafeArea hook */\nexport type UseSafeAreaGeneratedType = SafeAreaInsets\n\nconst DEFAULT_INSETS: SafeAreaInsets = {top: 0, right: 0, bottom: 0, left: 0}\n\n/**\n * Returns the safe area insets for the current device.\n *\n * These values represent the areas of the screen that are obscured by\n * system UI (home indicator, navigation bar, etc). Use them to ensure\n * content isn't hidden behind system chrome.\n *\n * The values are also available as CSS custom properties:\n * `--safe-area-inset-top`, `--safe-area-inset-right`,\n * `--safe-area-inset-bottom`, `--safe-area-inset-left`\n *\n * @example\n * ```tsx\n * const {bottom} = useSafeArea()\n * return <div style={{paddingBottom: bottom}}>Content</div>\n * ```\n */\nexport function useSafeArea(): SafeAreaInsets {\n  return window.minisParams?.safeAreaInsets ?? DEFAULT_INSETS\n}\n"],"names":["DEFAULT_INSETS","useSafeArea"],"mappings":"AAKA,MAAMA,IAAiC,EAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EAAC;AAmBrE,SAASC,IAA8B;AACrC,SAAA,OAAO,aAAa,kBAAkBD;AAC/C;"}

package/package.json

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

package/src/components/atoms/content-wrapper.tsx

@@ -4,6 +4,7 @@ import {Content} from '../../types'
 import {ContentMonitor} from './content-monitor'
 
 interface BaseContentWrapperProps {
+  /** A render function that receives the content data and loading state, and returns a React element. */
   children: ({
     content,
     loading,
@@ -29,7 +30,9 @@ type ContentWrapperProps =
 
 // It's too messy in the docs to show the complete types here so we show a simplified version
 export interface ContentWrapperPropsForDocs extends BaseContentWrapperProps {
+  /** The public ID of the content item (use this OR externalId). */
   publicId?: string
+  /** The external ID of the content item (use this OR publicId). */
   externalId?: string
 }
 

package/src/hooks/content/useCreateImageContent.test.ts

@@ -120,6 +120,9 @@ describe('useCreateImageContent', () => {
         title: 'Test Content',
         imageUrl: 'https://example.com/uploaded-image.jpg',
         visibility: ['DISCOVERABLE'],
+        externalId: undefined,
+        description: undefined,
+        productIds: undefined,
       })
       expect(mockCreateContent).toHaveBeenCalledTimes(1)
     })
@@ -253,6 +256,36 @@ describe('useCreateImageContent', () => {
         title: 'Test Content',
         imageUrl: 'https://example.com/uploaded-image.jpg',
         visibility: null,
+        externalId: undefined,
+        description: undefined,
+        productIds: undefined,
+      })
+    })
+
+    it('passes externalId, description, and productIds to createContent', async () => {
+      const {result} = renderHook(() => useCreateImageContent())
+
+      const imageFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      const params = {
+        image: imageFile,
+        contentTitle: 'Test Content',
+        visibility: ['DISCOVERABLE'] as any,
+        externalId: 'ext-123',
+        description: 'A test description',
+        productIds: ['gid://shopify/Product/1', 'gid://shopify/Product/2'],
+      }
+
+      await act(async () => {
+        await result.current.createImageContent(params)
+      })
+
+      expect(mockCreateContent).toHaveBeenCalledWith({
+        title: 'Test Content',
+        imageUrl: 'https://example.com/uploaded-image.jpg',
+        visibility: ['DISCOVERABLE'],
+        externalId: 'ext-123',
+        description: 'A test description',
+        productIds: ['gid://shopify/Product/1', 'gid://shopify/Product/2'],
       })
     })
 

package/src/hooks/content/useCreateImageContent.ts

@@ -11,9 +11,40 @@ import {useShopActions} from '../../internal/useShopActions'
 import {useImageUpload} from '../storage/useImageUpload'
 
 interface CreateImageContentParams {
+  /**
+   * The image file to upload.
+   */
   image: File
+  /**
+   * The title for the content entry.
+   */
   contentTitle: string
+  /**
+   * Visibility options for the content. Use `['DISCOVERABLE']` to appear in
+   * recommendations, `['LINKABLE']` to enable shareable URLs, or both. Pass
+   * `null` or `[]` to keep content private within your Mini.
+   */
   visibility?: ContentVisibility[] | null
+  /**
+   * A unique identifier from your own system that lets you look up content
+   * later via `ContentWrapper` using an ID you already know.
+   * If not provided, the content can only be retrieved by its `publicId`.
+   * Each `externalId` must be unique per Mini — creating content with a
+   * duplicate returns a `DUPLICATE_EXTERNAL_ID` error.
+   */
+  externalId?: string
+  /**
+   * A text description for the content. Displayed alongside the image in Shop
+   * surfaces such as feeds and content detail views. Use this to provide
+   * context about the image, such as a caption or review text.
+   */
+  description?: string
+  /**
+   * An array of Shopify product GIDs (e.g. `'gid://shopify/Product/123'`) to
+   * associate with the content. Maximum 20 products. Associated products
+   * appear alongside the content, enabling shoppable content experiences.
+   */
+  productIds?: string[]
 }
 
 interface UseCreateImageContentReturns {
@@ -38,7 +69,14 @@ export const useCreateImageContent = (): UseCreateImageContentReturns => {
     async (params: CreateImageContentParams) => {
       setLoading(true)
 
-      const {image, contentTitle, visibility} = params
+      const {
+        image,
+        contentTitle,
+        visibility,
+        externalId,
+        description,
+        productIds,
+      } = params
 
       if (!image.type) {
         throw new Error('Unable to determine file type')
@@ -58,6 +96,9 @@ export const useCreateImageContent = (): UseCreateImageContentReturns => {
         title: contentTitle,
         imageUrl: uploadImageUrl,
         visibility,
+        externalId,
+        description,
+        productIds,
       })
 
       setLoading(false)

package/src/hooks/navigation/useCloseMini.ts

@@ -1,3 +1,5 @@
+import {useCallback} from 'react'
+
 import {useHandleAction} from '../../internal/useHandleAction'
 import {useShopActions} from '../../internal/useShopActions'
 
@@ -10,8 +12,11 @@ interface UseCloseMiniReturns {
 
 export const useCloseMini = (): UseCloseMiniReturns => {
   const {closeMini} = useShopActions()
+  const handleClose = useHandleAction(closeMini)
 
   return {
-    closeMini: useHandleAction(closeMini),
+    // Wrapper prevents React SyntheticEvent args from leaking through
+    // when used directly as an event handler (e.g. onClick={closeMini})
+    closeMini: useCallback(() => handleClose(), [handleClose]),
   }
 }

package/src/hooks/util/useSafeArea.ts

@@ -1,5 +1,8 @@
 import type {SafeAreaInsets} from '@shopify/shop-minis-platform'
 
+/** @docs Return type for the useSafeArea hook */
+export type UseSafeAreaGeneratedType = SafeAreaInsets
+
 const DEFAULT_INSETS: SafeAreaInsets = {top: 0, right: 0, bottom: 0, left: 0}
 
 /**