@shopify/ui-extensions 2025.10.0-rc.39 → 2025.10.0-rc.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/ui-extensions",
-  "version": "2025.10.0-rc.39",
+  "version": "2025.10.0-rc.40",
   "scripts": {
     "docs:admin": "node ./docs/surfaces/admin/build-docs.mjs",
     "docs:checkout": "bash ./docs/surfaces/checkout/build-docs.sh",

package/src/surfaces/admin/components/Image/examples/default.html

@@ -1,5 +1,5 @@
 <s-image
-  src="/assets/home/icons/icon-community-small-02dccda350b673dbd5d87a40cdd900de45ddef6f69b8dd9498c4ca9ab652cc0b.png"
+  src="https://cdn.shopify.com/static/images/polaris/image-wc_src.png"
   alt="Four pixelated characters ready to build amazing Shopify apps"
   aspectRatio="59/161"
   inlineSize="auto"

package/src/surfaces/admin/components/Thumbnail/examples/default.html

@@ -1,4 +1,4 @@
 <s-thumbnail
   alt="White sneakers"
-  src="/assets/products/sneakers.jpg">
-</s-thumbnail>
+  src="https://cdn.shopify.com/static/images/polaris/thumbnail-wc_src.jpg"
+></s-thumbnail>

package/src/surfaces/customer-account/globals.ts

@@ -10,5 +10,7 @@ export interface ShopifyGlobal {
 }
 
 declare global {
+  // @ts-expect-error - Intentionally overriding navigation type for POS context
+  // This is safe as point-of-sale and customer-account are never used together
   const navigation: Navigation;
 }

package/src/surfaces/point-of-sale/api/action-target-api/action-target-api.ts

@@ -1,9 +1,7 @@
 import {ScannerApi} from '../scanner-api/scanner-api';
-import {NavigationApi} from '../navigation-api/navigation-api';
 import {StandardApi} from '../standard/standard-api';
 
 export type ActionTargetApi<T> = {[key: string]: any} & {
   extensionPoint: T;
 } & StandardApi<T> &
-  ScannerApi &
-  NavigationApi;
+  ScannerApi;

package/src/surfaces/point-of-sale/api/navigation-api/navigation-api.ts

@@ -1,45 +1,63 @@
-export interface NavigationApiContent {
+export interface NavigationNavigateOptions {
   /**
-   * Using `(screenName: string, params?: any)` navigates to a route in current navigation tree.
-   * Pushes the specified screen if it isn't present in the navigation tree, goes back to a created screen otherwise.
-   * @param screenName the name of the screen you want to navigate to.
-   * @param params the parameters you want to pass to that screen.
+   * Developer-defined information to be stored in the associated NavigationHistoryEntry once the navigation is complete, retrievable via getState().
    */
-  navigate(screenName: string, params?: any): Promise<void>;
+  state?: unknown;
+}
 
+/**
+ * The NavigationHistoryEntry interface of the Navigation API represents a single navigation history entry.
+ */
+export interface NavigationHistoryEntry {
+  /** Returns the key of the history entry. This is a unique, UA-generated value that represents the history entry's slot in the entries list rather than the entry itself. */
+  key: string;
   /**
-   * Using `(uri: string | URL)` opens a POS Native screen modally.
-   * If the uri starts with `shopify:point-of-sale/` it will be treated as a POS Native screen. Otherwise it will try to navigate to an extension screen.
-   * Available POS Native screens:
-   * - `shopify:point-of-sale/products/{product_id}` to present product details.
-   * - `shopify:point-of-sale/products/{product_id}/variants/{variant_id}` to present product variant details.
-   * - `shopify:point-of-sale/customers/{customer_id}` to present customer details.
-   * - `shopify:point-of-sale/orders/{order_id}` to present order details.
-   * - `shopify:point-of-sale/draft_orders/{draft_order_id}` to present draft order details.
-   * - `shopify:point-of-sale/staff/{staff_id}` to present staff details.
-   * @param uri the uri of the POS Native screen to present modally.
-   * @returns A promise that resolves when the POS screen is presented, rejects when an error occurs.
-   * @example Open product variant details screen for product id 123 and variant id 456
-   * navigate('shopify:point-of-sale/products/123/variants/456');
-   */
-  navigate(uri: string | URL): Promise<void>;
-
-  /** Pops the currently shown screen */
-  pop(): void;
-
-  /** Dismisses the extension. */
-  dismiss(): void;
-
-  /** Checks if the user has permission to navigate to the specified screen.
-   * @param uri the uri to check if the user has permission to navigate to.
-   * @returns false if the uri is a valid uri to navigate to a POS screen and the user does not have permission to navigate to the specified screen, true otherwise. The promise rejects if the user is not on the correct API version of POS extensions.
+   * Returns the URL of this history entry.
    */
-  canNavigate(uri: string | URL): Promise<boolean>;
+  url: string | null;
+  /**
+   * Returns a clone of the available state associated with this history entry.
+   */
+  getState(): unknown;
 }
 
 /**
- * Access the navigation API for navigation functionality from a full screen modal.
+ * The NavigationCurrentEntryChangeEvent interface of the Navigation API is the event object for the currententrychange event, which fires when the Navigation.currentEntry has changed.
  */
-export interface NavigationApi {
-  navigation: NavigationApiContent;
+export interface NavigationCurrentEntryChangeEvent {
+  /**
+   * Returns the NavigationHistoryEntry that was navigated from.
+   */
+  from: NavigationHistoryEntry;
+}
+
+export interface Navigation {
+  /**
+   * The navigate() method navigates to a specific URL, updating any provided state in the history entries list.
+   */
+  navigate: NavigateFunction;
+  /**
+   * The currentEntry read-only property of the Navigation interface returns a NavigationHistoryEntry object representing the location the user is currently navigated to right now.
+   */
+  currentEntry: NavigationHistoryEntry;
+  /**
+   * The back() method of the Navigation interface navigates to the previous entry in the history list.
+   */
+  back(): void;
+  addEventListener(
+    type: 'currententrychange',
+    cb: (event: NavigationCurrentEntryChangeEvent) => void,
+  ): void;
+  removeEventListener(
+    type: 'currententrychange',
+    cb: (event: NavigationCurrentEntryChangeEvent) => void,
+  ): void;
+}
+
+export interface NavigateFunction {
+  /**
+   * Navigates to a specific URL, updating any provided state in the history entries list.
+   * @param url The destination URL to navigate to.
+   */
+  (url: string, options?: NavigationNavigateOptions): void;
 }

package/src/surfaces/point-of-sale/api.ts

@@ -28,11 +28,6 @@ export type {DeviceApi, DeviceApiContent} from './api/device-api/device-api';
 
 export type {LocaleApi, LocaleApiContent} from './api/locale-api/locale-api';
 
-export type {
-  NavigationApiContent,
-  NavigationApi,
-} from './api/navigation-api/navigation-api';
-
 export type {OrderApiContent, OrderApi} from './api/order-api/order-api';
 
 export type {

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

@@ -1,7 +1,5 @@
-  <s-badge text="New" />
-  <s-badge text="Success" variant="success" />
-  <s-badge text="Warning" variant="warning" />
-  <s-badge text="Critical" variant="critical" />
-  <s-badge text="Active" status="active" />
-  <s-badge text="Complete" status="complete" />
-  <s-badge text="In Progress" variant="info" status="active" />
+<s-badge tone="neutral">Neutral</s-badge>
+<s-badge tone="success">Success</s-badge>
+<s-badge tone="info">Highlight</s-badge>
+<s-badge tone="warning">Warning</s-badge>
+<s-badge tone="critical">Critical</s-badge>

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

@@ -1,13 +1,11 @@
 <s-date-field 
   label="Date"
-  required 
   value="2024-10-26"
   details="Select a date">
 </s-date-field>
 
 <s-date-field 
   label="Date" 
-  required 
   value="1890-10-26" 
   error="Date out of range"
   details="Select a date">

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

@@ -1,4 +1,4 @@
-<s-tile heading="Title" subheading="Subtitle" itemCount="2" tone="accent"></s-tile>
+<s-tile heading="Title" subheading="Subtitle" itemCount={2} tone="accent"></s-tile>
 
 <s-tile heading="Title" subheading="Subtitle" tone="accent"></s-tile>
 

package/src/surfaces/point-of-sale/globals.ts

@@ -0,0 +1,6 @@
+import {Navigation} from './api/navigation-api/navigation-api';
+
+declare global {
+  // @ts-expect-error - Intentionally overriding navigation type for POS context
+  const navigation: Navigation;
+}