@shopify/shop-minis-react 0.13.2 → 0.15.0

package/dist/shop-minis-react/node_modules/.pnpm/video.js@8.23.3/node_modules/video.js/dist/video.es.js

@@ -1,6 +1,6 @@
 import S from "../../../../../../../_virtual/window.js";
 import B from "../../../../../../../_virtual/document.js";
-import il from "../../../../../../../_virtual/index3.js";
+import il from "../../../../../../../_virtual/index2.js";
 import ao from "../../../../../../../_virtual/browser-index.js";
 import xe from "../../../../@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/extends.js";
 import Kc from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/resolve-url.js";

package/dist/utils/colors.js

@@ -1,4 +1,4 @@
-import o from "../_virtual/index2.js";
+import o from "../shop-minis-react/node_modules/.pnpm/color@5.0.3/node_modules/color/index.js";
 const a = (r) => o(r).darken(0.2).isDark();
 export {
   a as isDarkColor

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.13.2",
+  "version": "0.15.0",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -49,7 +49,6 @@
     "@shopify/shop-minis-platform": "0.13.0",
     "@tailwindcss/vite": "4.1.8",
     "@tanstack/react-query": "5.86.0",
-    "@types/color": "3.0.6",
     "@types/lodash": "4.17.20",
     "@types/react-window": "1.8.8",
     "@types/url-parse": "1.4.9",
@@ -57,7 +56,7 @@
     "@vitejs/plugin-react": "4.5.1",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
-    "color": "4.2.3",
+    "color": "5.0.3",
     "embla-carousel-react": "8.6.0",
     "eslint": "8.57.0",
     "eslint-plugin-compat": "6.0.2",
@@ -94,6 +93,7 @@
     "@types/react-dom": "^19.1.2",
     "@vitest/coverage-v8": "^2.1.8",
     "@vitest/ui": "^2.1.8",
+    "eslint-formatter-codeframe": "^7.32.1",
     "jsdom": "^25.0.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

package/src/components/atoms/list.tsx

@@ -35,11 +35,10 @@ export interface ListDocProps<T = any> {
   enablePullToRefresh?: boolean
 }
 
-export interface ListProps<T = any>
-  extends Omit<
-    VirtuosoProps<T, unknown>,
-    'data' | 'itemContent' | 'endReached'
-  > {
+export interface ListProps<T = any> extends Omit<
+  VirtuosoProps<T, unknown>,
+  'data' | 'itemContent' | 'endReached'
+> {
   items: T[]
   renderItem: (item: T, index: number) => React.ReactNode
   showScrollbar?: boolean

package/src/components/commerce/product-link.tsx

@@ -35,7 +35,8 @@ const productLinkVariants = cva('', {
 
 // Primitive components (building blocks)
 export interface ProductLinkRootProps
-  extends React.ComponentProps<typeof Card>,
+  extends
+    React.ComponentProps<typeof Card>,
     VariantProps<typeof productLinkVariants> {
   layout?: 'horizontal' | 'vertical'
   asChild?: boolean

package/src/components/commerce/search.tsx

@@ -207,10 +207,13 @@ function SearchResultsList({
   )
 }
 
-interface SearchProviderPropsWithoutChildren
-  extends Omit<SearchProviderProps, 'children'> {}
+interface SearchProviderPropsWithoutChildren extends Omit<
+  SearchProviderProps,
+  'children'
+> {}
 export interface SearchResultsProps
-  extends SearchProviderPropsWithoutChildren,
+  extends
+    SearchProviderPropsWithoutChildren,
     SearchInputProps,
     SearchResultsListProps {
   showSearchInput?: boolean

package/src/components/navigation/transition-link.tsx

@@ -13,8 +13,7 @@ export interface TransitionLinkDocProps {
   children?: React.ReactNode
 }
 
-export interface TransitionLinkProps
-  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface TransitionLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   to: string
 }
 

package/src/hooks/index.ts

@@ -51,6 +51,9 @@ export * from './util/useImagePicker'
 export * from './util/useKeyboardAvoidingView'
 export * from './util/useRequestPermissions'
 
+// - Intent Hooks
+export * from './intents/useIntent'
+
 // - Event Hooks
 export * from './events/useOnMiniFocus'
 export * from './events/useOnMiniBlur'

package/src/hooks/intents/useIntent.test.ts

@@ -0,0 +1,316 @@
+import {renderHook} from '@testing-library/react'
+import {describe, expect, it, vi, beforeEach} from 'vitest'
+
+import {useIntent} from './useIntent'
+
+vi.mock('../navigation/useDeeplink', () => ({
+  useDeeplink: vi.fn(),
+}))
+
+const {useDeeplink} = await import('../navigation/useDeeplink')
+
+describe('useIntent', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('without intent params', () => {
+    it('returns nulls when no query params', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: undefined,
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current).toEqual({query: null, data: null})
+    })
+
+    it('returns nulls when intentQuery is missing', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {other: 'param'},
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current).toEqual({query: null, data: null})
+    })
+  })
+
+  describe('intent query parsing', () => {
+    it('parses action:type,value format', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {
+          intentQuery: 'try_on:shopify/Product,gid://shopify/Product/123',
+        },
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current.query).toEqual({
+        action: 'try_on',
+        type: 'shopify/Product',
+        value: 'gid://shopify/Product/123',
+      })
+      expect(result.current.data).toBeNull()
+    })
+
+    it('parses action:type without value', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {intentQuery: 'create:shopify/Product'},
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current.query).toEqual({
+        action: 'create',
+        type: 'shopify/Product',
+        value: null,
+      })
+    })
+
+    it('handles URL-encoded intentQuery', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {
+          intentQuery:
+            'try_on%3Ashopify%2FProduct%2Cgid%3A%2F%2Fshopify%2FProduct%2F123',
+        },
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current.query).toEqual({
+        action: 'try_on',
+        type: 'shopify/Product',
+        value: 'gid://shopify/Product/123',
+      })
+    })
+
+    it('returns null query for invalid format without colon', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {intentQuery: 'invalid-no-colon'},
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current).toEqual({query: null, data: null})
+    })
+
+    it('returns null value for trailing comma', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {intentQuery: 'create:shopify/Product,'},
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current.query).toEqual({
+        action: 'create',
+        type: 'shopify/Product',
+        value: null,
+      })
+    })
+
+    it('returns null query when type is empty', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {intentQuery: 'try_on:'},
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current).toEqual({query: null, data: null})
+    })
+  })
+
+  describe('shorthand GID syntax', () => {
+    it('infers type and value from full GID', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {
+          intentQuery: 'edit:gid://shopify/Product/123',
+        },
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current.query).toEqual({
+        action: 'edit',
+        type: 'shopify/Product',
+        value: 'gid://shopify/Product/123',
+      })
+    })
+
+    it('infers type with null value from GID without ID', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {
+          intentQuery: 'create:gid://shopify/Product',
+        },
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current.query).toEqual({
+        action: 'create',
+        type: 'shopify/Product',
+        value: null,
+      })
+    })
+
+    it('parses intentData alongside shorthand GID', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {
+          intentQuery: 'edit:gid://shopify/Product/123',
+          intentData: '{"title":"Updated"}',
+        },
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current.query).toEqual({
+        action: 'edit',
+        type: 'shopify/Product',
+        value: 'gid://shopify/Product/123',
+      })
+      expect(result.current.data).toEqual({title: 'Updated'})
+    })
+  })
+
+  describe('intent data parsing', () => {
+    it('parses JSON intentData', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {
+          intentQuery: 'try_on:shopify/Product,gid://shopify/Product/123',
+          intentData: '{"variantId":"gid://shopify/ProductVariant/456"}',
+        },
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current.data).toEqual({
+        variantId: 'gid://shopify/ProductVariant/456',
+      })
+    })
+
+    it('parses URL-encoded intentData', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {
+          intentQuery: 'try_on:shopify/Product,gid://shopify/Product/123',
+          intentData: '%7B%22variantId%22%3A%22456%22%7D',
+        },
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current.data).toEqual({variantId: '456'})
+    })
+
+    it('preserves percent-encoded values inside already-decoded JSON', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {
+          intentQuery: 'edit:shopify/Product,gid://shopify/Product/123',
+          intentData: '{"redirect":"https%3A%2F%2Fexample.com"}',
+        },
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current.data).toEqual({
+        redirect: 'https%3A%2F%2Fexample.com',
+      })
+    })
+
+    it('returns null data when intentData is a JSON array', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {
+          intentQuery: 'try_on:shopify/Product,gid://shopify/Product/123',
+          intentData: '[1,2,3]',
+        },
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current.query).not.toBeNull()
+      expect(result.current.data).toBeNull()
+    })
+
+    it('returns null data when intentData is a JSON primitive', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {
+          intentQuery: 'try_on:shopify/Product,gid://shopify/Product/123',
+          intentData: '"just a string"',
+        },
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current.query).not.toBeNull()
+      expect(result.current.data).toBeNull()
+    })
+
+    it('returns null data for malformed JSON', () => {
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams: {
+          intentQuery: 'try_on:shopify/Product,gid://shopify/Product/123',
+          intentData: 'not-valid-json',
+        },
+        hash: '',
+      })
+
+      const {result} = renderHook(() => useIntent())
+
+      expect(result.current.query).not.toBeNull()
+      expect(result.current.data).toBeNull()
+    })
+  })
+
+  describe('memoization', () => {
+    it('returns same reference when queryParams do not change', () => {
+      const queryParams = {
+        intentQuery: 'try_on:shopify/Product,gid://shopify/Product/123',
+      }
+
+      vi.mocked(useDeeplink).mockReturnValue({
+        path: '/',
+        queryParams,
+        hash: '',
+      })
+
+      const {result, rerender} = renderHook(() => useIntent())
+      const firstResult = result.current
+
+      rerender()
+
+      expect(result.current).toBe(firstResult)
+    })
+  })
+})

package/src/hooks/intents/useIntent.ts

@@ -0,0 +1,111 @@
+import {useMemo} from 'react'
+
+import {useDeeplink} from '../navigation/useDeeplink'
+
+/**
+ * Structured description of an intent, following the Shopify Intents API
+ * URI format: `action:type,value`
+ *
+ * @see https://shopify.dev/docs/api/admin-extensions/latest/target-apis/utility-apis/intents-api
+ */
+export interface IntentQuery {
+  /** Verb describing the operation (e.g., 'try_on', 'create', 'edit') */
+  action: string
+  /** Resource type identifier (e.g., 'shopify/Product', 'shop/UserImage') */
+  type: string
+  /** Resource GID (e.g., 'gid://shopify/Product/123') if applicable */
+  value: string | null
+}
+
+export interface UseIntentReturn {
+  /** Parsed intent query, or null if no intent was passed */
+  query: IntentQuery | null
+  /** Additional JSON data passed with the intent, or null */
+  data: {[key: string]: unknown} | null
+}
+
+/**
+ * Parses an intent passed to this mini via deeplink.
+ *
+ * Follows the Shopify Intents API URI format (`action:type,value`) with
+ * an optional JSON data payload passed separately.
+ *
+ * @see https://shopify.dev/docs/api/admin-extensions/latest/target-apis/utility-apis/intents-api
+ *
+ * Deeplink format:
+ *   ?intentQuery=action:type,value&intentData={"key":"value"}
+ *
+ * Examples:
+ *   ?intentQuery=try_on:shopify/Product,gid://shopify/Product/123
+ *   ?intentQuery=create:shopify/Product
+ *   ?intentQuery=edit:shopify/Product,gid://shopify/Product/123&intentData={"variantId":"456"}
+ *
+ * Shorthand GID syntax (type inferred from GID):
+ *   ?intentQuery=edit:gid://shopify/Product/123
+ *   ?intentQuery=create:gid://shopify/Product
+ *
+ * Use this hook to receive intents from the host app (Host → Mini direction).
+ */
+export function useIntent(): UseIntentReturn {
+  const {queryParams} = useDeeplink()
+
+  return useMemo(() => {
+    const raw = queryParams?.intentQuery
+
+    if (!raw) return {query: null, data: null}
+
+    let decoded: string
+    try {
+      decoded = decodeURIComponent(raw)
+    } catch {
+      decoded = raw
+    }
+
+    const colonIdx = decoded.indexOf(':')
+    if (colonIdx === -1) return {query: null, data: null}
+
+    const action = decoded.slice(0, colonIdx)
+    const rest = decoded.slice(colonIdx + 1)
+    const commaIdx = rest.indexOf(',')
+
+    let type = commaIdx === -1 ? rest : rest.slice(0, commaIdx)
+    let value = commaIdx === -1 ? null : rest.slice(commaIdx + 1) || null
+
+    // Shorthand GID syntax: edit:gid://shopify/Product/123
+    // Infer type from GID and use full GID as value
+    const gidMatch = type.match(/^gid:\/\/shopify\/(\w+)(?:\/(.+))?$/)
+    if (gidMatch) {
+      type = `shopify/${gidMatch[1]}`
+      value = gidMatch[2] ? `gid://shopify/${gidMatch[1]}/${gidMatch[2]}` : null
+    }
+
+    if (!type) return {query: null, data: null}
+
+    let data: {[key: string]: unknown} | null = null
+    const rawData = queryParams?.intentData
+    if (rawData) {
+      let parsed: unknown
+      try {
+        parsed = JSON.parse(rawData)
+      } catch {
+        try {
+          parsed = JSON.parse(decodeURIComponent(rawData))
+        } catch {
+          // malformed JSON — ignore
+        }
+      }
+      if (
+        parsed !== null &&
+        typeof parsed === 'object' &&
+        !Array.isArray(parsed)
+      ) {
+        data = parsed as {[key: string]: unknown}
+      }
+    }
+
+    return {
+      query: {action, type, value},
+      data,
+    }
+  }, [queryParams])
+}

package/src/internal/components/product-review-stars.tsx

@@ -17,8 +17,7 @@ const textSizeClasses = {
   lg: 'text-base',
 } as const
 
-export interface ProductReviewStarsProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface ProductReviewStarsProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Average rating value (0-5)
    */

package/dist/_virtual/index10.js

@@ -1,5 +0,0 @@
-var e = { exports: {} };
-export {
-  e as __module
-};
-//# sourceMappingURL=index10.js.map

package/dist/_virtual/index10.js.map

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

package/dist/_virtual/index11.js

@@ -1,5 +0,0 @@
-var e = { exports: {} };
-export {
-  e as __module
-};
-//# sourceMappingURL=index11.js.map

package/dist/_virtual/index11.js.map

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

package/dist/_virtual/index9.js

@@ -1,5 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};
-//# sourceMappingURL=index9.js.map

package/dist/_virtual/index9.js.map

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