@shopify/ui-extensions 2025.10.0-rc.44 → 2025.10.0-rc.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/ui-extensions",
-  "version": "2025.10.0-rc.44",
+  "version": "2025.10.0-rc.46",
   "scripts": {
     "docs:admin": "node ./docs/surfaces/admin/build-docs.mjs",
     "docs:checkout": "bash ./docs/surfaces/checkout/build-docs.sh",
@@ -129,12 +129,22 @@
     "@remote-ui/async-subscription": "^2.1.16",
     "@shopify/generate-docs": "0.19.6",
     "typescript": "^4.9.0",
-    "@faker-js/faker": "^8.4.1"
+    "@faker-js/faker": "^8.4.1",
+    "preact": "^10.10.x",
+    "@preact/signals": "^2.3.x"
   },
-  "optionalDependencies": {
+  "peerDependencies": {
     "preact": "*",
     "@preact/signals": "*"
   },
+  "peerDependenciesMeta": {
+    "preact": {
+      "optional": true
+    },
+    "@preact/signals": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org/"

package/src/docs/shared/components/ColorField.ts

@@ -2,7 +2,8 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
 
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'ColorField',
-  description: 'Allow users to select a color from a color palette.',
+  description:
+    'Allow users to select a color with a color picker or as a text input.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],

package/src/surfaces/admin/api/intents/examples/create-article.js

@@ -0,0 +1,9 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('create:shopify/Article');
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Article created:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/create-catalog.js

@@ -0,0 +1,9 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('create:shopify/Catalog');
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Catalog created:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/create-collection.js

@@ -0,0 +1,9 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('create:shopify/Collection');
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Collection created:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/create-customer.js

@@ -0,0 +1,9 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('create:shopify/Customer');
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Customer created:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/create-discount.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('create:shopify/Discount', {
+  data: {type: 'amount-off-product'},
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Discount created:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/create-market.js

@@ -0,0 +1,9 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('create:shopify/Market');
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Market created:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/create-menu.js

@@ -0,0 +1,9 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('create:shopify/Menu');
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Menu created:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/create-metafield-definition.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('create:shopify/MetafieldDefinition', {
+  data: {ownerType: 'product'},
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Metafield definition created:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/create-metaobject-definition.js

@@ -0,0 +1,9 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('create:shopify/MetaobjectDefinition');
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Metaobject definition created:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/create-metaobject.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('create:shopify/Metaobject', {
+  data: {type: 'shopify--color-pattern'},
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Metaobject created:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/create-page.js

@@ -0,0 +1,9 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('create:shopify/Page');
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Page created:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/create-product.js

@@ -0,0 +1,9 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('create:shopify/Product');
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Product created:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/create-variant.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('create:shopify/ProductVariant', {
+  data: {productId: 'gid://shopify/Product/123456789'},
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Product variant created:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/edit-article.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('edit:shopify/Article', {
+  value: 'gid://shopify/Article/123456789',
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Article updated:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/edit-catalog.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('edit:shopify/Catalog', {
+  value: 'gid://shopify/Catalog/123456789',
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Catalog updated:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/edit-collection.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('edit:shopify/Collection', {
+  value: 'gid://shopify/Collection/987654321',
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Collection updated:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/edit-customer.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('edit:shopify/Customer', {
+  value: 'gid://shopify/Customer/456789123',
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Customer updated:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/edit-discount.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('edit:shopify/Discount', {
+  value: 'gid://shopify/Discount/123456789',
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Discount updated:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/edit-market.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('edit:shopify/Market', {
+  value: 'gid://shopify/Market/123456789',
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Market updated:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/edit-menu.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('edit:shopify/Menu', {
+  value: 'gid://shopify/Menu/123456789',
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Menu updated:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/edit-metafield-definition.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('edit:shopify/MetafieldDefinition', {
+  value: 'gid://shopify/MetafieldDefinition/123456789',
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Metafield definition updated:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/edit-metaobject-definition.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('edit:shopify/MetaobjectDefinition', {
+  value: 'gid://shopify/MetaobjectDefinition/123456789',
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Metaobject definition updated:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/edit-metaobject.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('edit:shopify/Metaobject', {
+  value: 'gid://shopify/Metaobject/123456789',
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Metaobject updated:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/edit-page.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('edit:shopify/Page', {
+  value: 'gid://shopify/Page/123456789',
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Page updated:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/edit-product.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('edit:shopify/Product', {
+  value: 'gid://shopify/Product/123456789',
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Product updated:', response.data);
+}

package/src/surfaces/admin/api/intents/examples/edit-variant.js

@@ -0,0 +1,11 @@
+const {intents} = useApi(TARGET);
+
+const activity = await intents.invoke('edit:shopify/ProductVariant', {
+  value: 'gid://shopify/ProductVariant/123456789',
+});
+
+const response = await activity.complete;
+
+if (response.code === 'ok') {
+  console.log('Product variant updated:', response.data);
+}

package/src/surfaces/admin/api/intents/intents.ts

@@ -0,0 +1,153 @@
+/**
+ * User dismissed or closed the workflow without completing it.
+ */
+export interface ClosedIntentResponse {
+  code?: 'closed';
+}
+
+/**
+ * Successful intent completion.
+ */
+export interface SuccessIntentResponse {
+  code?: 'ok';
+  data?: {[key: string]: unknown};
+}
+
+/**
+ * Failed intent completion.
+ */
+export interface ErrorIntentResponse {
+  code?: 'error';
+  message?: string;
+  issues?: {
+    /**
+     * The path to the field with the issue.
+     */
+    path?: string[];
+    /**
+     * The error message for the issue.
+     */
+    message?: string;
+    /**
+     * A code identifier for the issue.
+     */
+    code?: string;
+  }[];
+}
+
+/**
+ * Result of an intent activity.
+ * Discriminated union representing all possible completion outcomes.
+ */
+export type IntentResponse =
+  | SuccessIntentResponse
+  | ErrorIntentResponse
+  | ClosedIntentResponse;
+
+/**
+ * Activity handle for tracking intent workflow progress.
+ */
+export interface IntentActivity {
+  /**
+   * A Promise that resolves when the intent workflow completes, returning the response.
+   */
+  complete?: Promise<IntentResponse>;
+}
+
+/**
+ * The action to perform on a resource.
+ */
+export type IntentAction = 'create' | 'edit';
+
+/**
+ * Supported resource types that can be targeted by intents.
+ */
+export type IntentType =
+  | 'shopify/Article'
+  | 'shopify/Catalog'
+  | 'shopify/Collection'
+  | 'shopify/Customer'
+  | 'shopify/Discount'
+  | 'shopify/Market'
+  | 'shopify/Menu'
+  | 'shopify/MetafieldDefinition'
+  | 'shopify/Metaobject'
+  | 'shopify/MetaobjectDefinition'
+  | 'shopify/Page'
+  | 'shopify/Product'
+  | 'shopify/ProductVariant';
+
+/**
+ * Options for invoking intents when using the query string format.
+ */
+export interface IntentQueryOptions {
+  /**
+   * The resource identifier for edit actions (e.g., 'gid://shopify/Product/123').
+   */
+  value?: string;
+  /**
+   * Additional data required for certain intent types.
+   * For example:
+   * - Discount creation requires { type: 'amount-off-product' | 'amount-off-order' | 'buy-x-get-y' | 'free-shipping' }
+   * - ProductVariant creation requires { productId: 'gid://shopify/Product/123' }
+   * - Metaobject creation requires { type: 'shopify--color-pattern' }
+   */
+  data?: {[key: string]: unknown};
+}
+
+/**
+ * Structured description of an intent to invoke.
+ */
+export interface IntentQuery extends IntentQueryOptions {
+  /**
+   * The operation to perform on the target resource.
+   */
+  action: IntentAction;
+  /**
+   * The resource type (e.g., 'shopify/Product').
+   */
+  type: IntentType;
+}
+
+/**
+ * The invoke API for triggering intent workflows.
+ *
+ * @param intent - Either a string query or structured object describing the intent
+ * @param options - Optional parameters when using string query format
+ * @returns A Promise resolving to an activity handle for tracking the workflow
+ *
+ * @example
+ * ```javascript
+ * // Create a new product
+ * const activity = await intents.invoke('create:shopify/Product');
+ * const response = await activity.complete;
+ *
+ * // Edit an existing product
+ * const activity = await intents.invoke('edit:shopify/Product,gid://shopify/Product/123');
+ * const response = await activity.complete;
+ *
+ * // Create a discount with required type
+ * const activity = await intents.invoke('create:shopify/Discount', {
+ *   data: { type: 'amount-off-product' }
+ * });
+ * const response = await activity.complete;
+ * ```
+ */
+export interface IntentInvokeApi {
+  (query: IntentQuery): Promise<IntentActivity>;
+  (intentURL: string, options?: IntentQueryOptions): Promise<IntentActivity>;
+}
+
+/**
+ * Intent information provided to the receiver of an intent.
+ */
+export interface Intents {
+  /**
+   * The URL that was used to launch the intent.
+   */
+  launchUrl?: string | URL;
+  /**
+   * Invoke an intent workflow to create or edit Shopify resources.
+   */
+  invoke?: IntentInvokeApi;
+}

package/src/surfaces/admin/api/standard/standard.ts

@@ -2,13 +2,9 @@ import type {I18n} from '../../../../api';
 import {ApiVersion} from '../../../../shared';
 import type {Storage} from './storage';
 import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
+import type {Intents} from '../intents/intents';
 
-export interface Intents {
-  /**
-   * The URL that was used to launch the intent.
-   */
-  launchUrl?: string | URL;
-}
+export type {Intents} from '../intents/intents';
 
 /**
  * GraphQL error returned by the Shopify Admin API.

package/src/surfaces/point-of-sale/components/Banner/examples/default.html

@@ -1,15 +1,15 @@
-<s-banner heading="Label" tone="success">
-  <s-button slot="primary-action">Action</s-button>
+<s-banner heading="Marked as delivered" tone="success">
+  <s-button slot="primary-action">Dismiss</s-button>
 </s-banner>
 
-<s-banner heading="Label" tone="info">
-  <s-button slot="primary-action">Action</s-button>
+<s-banner heading="Ready for shipping" tone="info">
+  <s-button slot="primary-action">Dismiss</s-button>
 </s-banner>
 
-<s-banner heading="Label" tone="warning">
-  <s-button slot="primary-action">Action</s-button>
+<s-banner heading="Couldn't restock items" tone="warning">
+  <s-button slot="primary-action">Dismiss</s-button>
 </s-banner>
 
-<s-banner heading="Label" tone="critical">
-  <s-button slot="primary-action">Action</s-button>
+<s-banner heading="Action failed. Contact developer" tone="critical">
+  <s-button slot="primary-action">Dismiss</s-button>
 </s-banner>

package/src/surfaces/point-of-sale/components/Box/examples/default.html

@@ -1,3 +1,3 @@
-<s-box>
-  <s-text>Content inside a box container</s-text>
+<s-box padding="base">
+  <s-text>View shipping settings</s-text>
 </s-box>

package/src/surfaces/point-of-sale/components/Button/examples/default.html

@@ -1,4 +1,2 @@
-<s-button variant="primary">Label</s-button>
-<s-button variant="secondary">Label</s-button>
-<s-button tone="critical">Label</s-button>
-<s-button disabled>Label</s-button>
+<s-button variant="primary">Add customer</s-button>
+<s-button variant="secondary">Select more items</s-button>

package/src/surfaces/point-of-sale/components/ChoiceList/examples/default.html

@@ -1,5 +1,6 @@
 <s-choice-list>
-  <s-choice value="small">Small</s-choice>
-  <s-choice value="medium">Medium</s-choice>
-  <s-choice value="large">Large</s-choice>
-</s-choice-list>
+  <s-choice value="s" selected>Small</s-choice>
+  <s-choice value="m">Medium</s-choice>
+  <s-choice value="l">Large</s-choice>
+  <s-choice value="xl">Extra large</s-choice>
+</s-choice-list>

package/src/surfaces/point-of-sale/components/ChoiceList/examples/event-handling.jsx

@@ -0,0 +1,8 @@
+<s-choice-list
+  onChange={(event) => console.log('onChange:', event.target.values)}
+  onInput={(event) => console.log('onInput:', event.target.values)}
+>
+  <s-choice value="option1">Option 1</s-choice>
+  <s-choice value="option2" disabled>Option 2 (disabled)</s-choice>
+  <s-choice value="option3">Option 3</s-choice>
+</s-choice-list>

package/src/surfaces/point-of-sale/components/ChoiceList/examples/multiple-selection.jsx

@@ -0,0 +1,9 @@
+<s-choice-list 
+  multiple
+  values={['small', 'medium']}
+  onChange={(event) => console.log('Selected:', event.target.values)}
+>
+  <s-choice value="small">Small</s-choice>
+  <s-choice value="medium">Medium</s-choice>
+  <s-choice value="large">Large</s-choice>
+</s-choice-list>

package/src/surfaces/point-of-sale/components/ChoiceList.d.ts

@@ -39,8 +39,10 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 declare const tagName = 's-choice-list';
 export interface ChoiceListJSXProps
   extends Pick<ChoiceListProps, 'values' | 'multiple'> {
-  onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the user changes a choice. Fires simultaneously with onChange. */
   onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the user changes a choice. Fires simultaneously with onInput. */
+  onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
   children?: ComponentChildren;
 }
 declare global {

package/src/surfaces/point-of-sale/components/Clickable/examples/default.html

@@ -1,3 +1,6 @@
-<s-clickable>
-  <s-text>Click me</s-text>
+<s-clickable onClick={handleShippingSettings}>
+  <s-box padding="base">
+    <s-text>View shipping settings</s-text>
+  </s-box>
 </s-clickable>
+

package/src/surfaces/point-of-sale/components/DateField/examples/default.html

@@ -1,12 +1,4 @@
-<s-date-field 
-  label="Date"
-  value="2024-10-26"
-  details="Select a date">
-</s-date-field>
-
 <s-date-field 
   label="Date" 
-  value="1890-10-26" 
-  error="Date out of range"
-  details="Select a date">
-</s-date-field>
+  value="2025-10-08"
+/>

package/src/surfaces/point-of-sale/components/DateField/examples/event-handling.jsx

@@ -0,0 +1,8 @@
+<s-date-field 
+  label="Order date"
+  value="2024-10-26"
+  onInput={(event) => console.log('Input:', event.target.value)}
+  onChange={(event) => console.log('Change:', event.target.value)}
+  onFocus={(event) => console.log('Focused with:', event.target.value)}
+  onBlur={(event) => console.log('Blurred with:', event.target.value)}
+/>