@shopify/ui-extensions 2025.10.0-rc.41 → 2025.10.0-rc.43

package/src/surfaces/customer-account/components/CustomerAccountAction.d.ts

@@ -2,18 +2,18 @@ import {BaseElementPropsWithChildren, IdProps} from './shared';
 
 export interface CustomerAccountActionProps extends IdProps {
   /**
-   * Sets the heading of the Action container.
+   * Sets the heading of the action container.
    */
   heading: string;
 }
 
 export interface CustomerAccountActionElementSlots {
   /**
-   * The primary action to perform, provided as a button type element.
+   * The primary action for the page. Accepts a single Button element with restricted properties (see below).
    */
   'primary-action'?: HTMLElement;
   /**
-   * The secondary actions to perform, provided as button type elements.
+   * The secondary actions for the page. Accepts multiple Button elements with restricted properties (see below).
    */
   'secondary-actions'?: HTMLElement;
 }

package/src/surfaces/customer-account/components/ImageGroup/examples/basic-ImageGroup.example.html

@@ -0,0 +1,18 @@
+<s-image-group>
+  <s-image 
+    src="https://cdn.shopify.com/YOUR_IMAGE_HERE"
+    alt="Product image"
+  ></s-image>
+  <s-image 
+    src="https://cdn.shopify.com/YOUR_IMAGE_HERE"
+    alt="Product image"
+  ></s-image>
+  <s-image 
+    src="https://cdn.shopify.com/YOUR_IMAGE_HERE"
+    alt="Product image"
+  ></s-image>
+  <s-image 
+    src="https://cdn.shopify.com/YOUR_IMAGE_HERE"
+    alt="Product image"
+  ></s-image>
+</s-image-group>

package/src/surfaces/customer-account/components/Menu/examples/basic-Menu.example.html

@@ -0,0 +1,14 @@
+<>
+  <s-button commandFor="order-actions-menu">
+    Manage
+  </s-button>
+
+  <s-menu
+    id="order-actions-menu"
+    accessibilityLabel="List of order actions"
+  >
+    <s-button>Submit problem</s-button>
+    <s-button>Request return</s-button>
+    <s-button tone="critical">Cancel order</s-button>
+  </s-menu>
+</>

package/src/surfaces/customer-account/components/Page/examples/basic-Page.example.html

@@ -0,0 +1,19 @@
+<s-page
+  heading="Order #1411"
+  subheading="Confirmed Oct 5"
+>
+  <s-button slot="primary-action">
+    Buy again
+  </s-button>
+  <s-button slot="secondary-actions">
+    Edit order
+  </s-button>
+  <s-button slot="secondary-actions">
+    Cancel order
+  </s-button>
+  <s-button
+    slot="breadcrumb-actions"
+    accessibilityLabel="Back to orders"
+  ></s-button>
+  Content
+</s-page>

package/src/surfaces/customer-account/components/Page.d.ts

@@ -14,15 +14,15 @@ export interface PageProps extends IdProps {
 
 export interface PageElementSlots {
   /**
-   * The breadcrumb actions to perform, provided as button type elements.
+   * The breadcrumb actions for the page. Accepts a single Button element with restricted properties (see below).
    */
   'breadcrumb-actions'?: HTMLElement;
   /**
-   * The primary action to perform, provided as a button type element.
+   * The primary action for the page. Accepts a single Button element with restricted properties (see below).
    */
   'primary-action'?: HTMLElement;
   /**
-   * The secondary actions to perform, provided as button type elements.
+   * The secondary actions for the page. Accepts multiple Button elements with restricted properties (see below).
    */
   'secondary-actions'?: HTMLElement;
 }

package/src/surfaces/customer-account/components/Section/examples/basic-Section.example.html

@@ -0,0 +1,12 @@
+<s-section heading="Rewards">
+  <s-button slot="primary-action" variant="primary">
+    Redeem
+  </s-button>
+  <s-button slot="secondary-actions" variant="secondary">
+    My rewards
+  </s-button>
+  <s-paragraph>
+    Earn 10 points for every $1 spent. Redeem 100 points for $10 off your
+    next purchase.
+  </s-paragraph>
+</s-section>

package/src/surfaces/customer-account/components/Section.d.ts

@@ -18,11 +18,11 @@ export interface SectionProps extends IdProps {
 
 export interface SectionElementSlots {
   /**
-   * The primary action to perform, provided as a button type element.
+   * The primary action for the section. Accepts a single [Button](/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) element.
    */
   'primary-action'?: HTMLElement;
   /**
-   * The secondary actions to perform, provided as button type elements.
+   * The secondary actions for the section. Accepts multiple [Button](/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) elements.
    */
   'secondary-actions'?: HTMLElement;
 }

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

@@ -12,7 +12,7 @@ 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;
   /**
-   * Returns the URL of this history entry.
+   * Returns the lowercased URL of this history entry.
    */
   url: string | null;
   /**
@@ -35,7 +35,7 @@ export interface Navigation {
   /**
    * The navigate() method navigates to a specific URL, updating any provided state in the history entries list.
    */
-  navigate: NavigateFunction;
+  navigate: (url: string, options?: NavigationNavigateOptions) => Promise<void>;
   /**
    * The currentEntry read-only property of the Navigation interface returns a NavigationHistoryEntry object representing the location the user is currently navigated to right now.
    */
@@ -53,11 +53,3 @@ export interface Navigation {
     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/components/Badge/examples/default.html

@@ -1,5 +1,5 @@
-<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>
+<s-badge tone="neutral">Paid</s-badge>
+<s-badge tone="success">Active</s-badge>
+<s-badge tone="info">Draft</s-badge>
+<s-badge tone="warning">On hold</s-badge>
+<s-badge tone="critical">Action required</s-badge>

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

@@ -14,7 +14,6 @@ import type {
   Ref,
   ComponentChild,
 } from './components-shared.d.ts';
-import {ReactNode} from 'react';
 
 export type ComponentChildren = any;
 /**
@@ -48,7 +47,7 @@ export interface ModalJSXProps extends Pick<ModalProps, 'id' | 'heading'> {
   secondaryActions?: ComponentChild;
   onHide?: (event: CallbackEvent<typeof tagName>) => void | null;
   onShow?: (event: CallbackEvent<typeof tagName>) => void | null;
-  children?: ReactNode;
+  children?: ComponentChildren;
 }
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -3110,8 +3110,6 @@ export interface Context<T> extends Provider<T> {
   displayName?: string;
 }
 
-import {ReactNode} from 'react';
-
 type ComponentChildren = any;
 /**
  * Used when an element does not have children.
@@ -3838,7 +3836,7 @@ interface ModalJSXProps extends Pick<ModalProps, 'id' | 'heading'> {
   secondaryActions?: ComponentChild;
   onHide?: (event: CallbackEvent<typeof tagName$i>) => void | null;
   onShow?: (event: CallbackEvent<typeof tagName$i>) => void | null;
-  children?: ReactNode;
+  children?: ComponentChildren;
 }
 declare global {
   interface HTMLElementTagNameMap {
@@ -4554,7 +4552,7 @@ interface Box {
 }
 
 interface ButtonEvents {
-  click?: (event: CallbackEvent<typeof tagName>) => void;
+  click?: (event: CallbackEvent<typeof tagName$t>) => void;
 }
 
 interface Button {
@@ -4618,8 +4616,8 @@ interface Choice {
 }
 
 interface ChoiceListEvents {
-  change?: (event: CallbackEvent<typeof tagName>) => void;
-  input?: (event: CallbackEvent<typeof tagName>) => void;
+  change?: (event: CallbackEvent<typeof tagName$k>) => void;
+  input?: (event: CallbackEvent<typeof tagName$k>) => void;
 }
 
 interface ChoiceList {
@@ -4637,7 +4635,7 @@ interface ChoiceList {
 }
 
 interface ClickableEvents {
-  click?: (event: CallbackEvent<typeof tagName>) => void;
+  click?: (event: CallbackEvent<typeof tagName$e>) => void;
 }
 
 interface Clickable {
@@ -4656,10 +4654,10 @@ interface Clickable {
 }
 
 interface DateFieldEvents {
-  input?: (event: CallbackEvent<typeof tagName>) => void;
-  focus?: (event: CallbackEvent<typeof tagName>) => void;
-  blur?: (event: CallbackEvent<typeof tagName>) => void;
-  change?: (event: CallbackEvent<typeof tagName>) => void;
+  input?: (event: CallbackEvent<typeof tagName$b>) => void;
+  focus?: (event: CallbackEvent<typeof tagName$b>) => void;
+  blur?: (event: CallbackEvent<typeof tagName$b>) => void;
+  change?: (event: CallbackEvent<typeof tagName$b>) => void;
 }
 
 interface DateFieldSlots {
@@ -4692,10 +4690,10 @@ interface DateField {
 }
 
 interface DatePickerEvents {
-  blur?: (event: CallbackEvent<typeof tagName>) => void | null;
-  focus?: (event: CallbackEvent<typeof tagName>) => void | null;
-  change?: (event: CallbackEvent<typeof tagName>) => void | null;
-  input?: (event: CallbackEvent<typeof tagName>) => void | null;
+  blur?: (event: CallbackEvent<typeof tagName$a>) => void | null;
+  focus?: (event: CallbackEvent<typeof tagName$a>) => void | null;
+  change?: (event: CallbackEvent<typeof tagName$a>) => void | null;
+  input?: (event: CallbackEvent<typeof tagName$a>) => void | null;
 }
 
 interface DatePicker {
@@ -4719,10 +4717,10 @@ interface DatePicker {
 }
 
 interface DateSpinnerEvents {
-  blur?: (event: CallbackEvent<typeof tagName>) => void | null;
-  focus?: (event: CallbackEvent<typeof tagName>) => void | null;
-  change?: (event: CallbackEvent<typeof tagName>) => void | null;
-  input?: (event: CallbackEvent<typeof tagName>) => void | null;
+  blur?: (event: CallbackEvent<typeof tagName$9>) => void | null;
+  focus?: (event: CallbackEvent<typeof tagName$9>) => void | null;
+  change?: (event: CallbackEvent<typeof tagName$9>) => void | null;
+  input?: (event: CallbackEvent<typeof tagName$9>) => void | null;
 }
 
 interface DateSpinner {
@@ -4746,10 +4744,10 @@ interface Divider {
 }
 
 interface EmailFieldEvents {
-  input?: (event: CallbackEvent<typeof tagName>) => void;
-  focus?: (event: CallbackEvent<typeof tagName>) => void;
-  blur?: (event: CallbackEvent<typeof tagName>) => void;
-  change?: (event: CallbackEvent<typeof tagName>) => void;
+  input?: (event: CallbackEvent<typeof tagName$f>) => void;
+  focus?: (event: CallbackEvent<typeof tagName$f>) => void;
+  blur?: (event: CallbackEvent<typeof tagName$f>) => void;
+  change?: (event: CallbackEvent<typeof tagName$f>) => void;
 }
 
 interface EmailFieldSlots {
@@ -4852,8 +4850,8 @@ interface Image {
 }
 
 interface ModalEvents {
-  hide?: (event: CallbackEvent<typeof tagName>) => void | null;
-  show?: (event: CallbackEvent<typeof tagName>) => void | null;
+  hide?: (event: CallbackEvent<typeof tagName$i>) => void | null;
+  show?: (event: CallbackEvent<typeof tagName$i>) => void | null;
 }
 
 interface ModalSlots {
@@ -4869,10 +4867,10 @@ interface Modal {
 }
 
 interface NumberFieldEvents {
-  input?: (event: CallbackEvent<typeof tagName>) => void;
-  focus?: (event: CallbackEvent<typeof tagName>) => void;
-  blur?: (event: CallbackEvent<typeof tagName>) => void;
-  change?: (event: CallbackEvent<typeof tagName>) => void;
+  input?: (event: CallbackEvent<typeof tagName$c>) => void;
+  focus?: (event: CallbackEvent<typeof tagName$c>) => void;
+  blur?: (event: CallbackEvent<typeof tagName$c>) => void;
+  change?: (event: CallbackEvent<typeof tagName$c>) => void;
 }
 
 interface NumberFieldSlots {
@@ -5110,10 +5108,10 @@ interface ScrollBox {
 }
 
 interface SearchFieldEvents {
-  focus?: (event: CallbackEvent<typeof tagName>) => void;
-  blur?: (event: CallbackEvent<typeof tagName>) => void;
-  input?: (event: CallbackEvent<typeof tagName>) => void;
-  change?: (event: CallbackEvent<typeof tagName>) => void;
+  focus?: (event: CallbackEvent<typeof tagName$g>) => void;
+  blur?: (event: CallbackEvent<typeof tagName$g>) => void;
+  input?: (event: CallbackEvent<typeof tagName$g>) => void;
+  change?: (event: CallbackEvent<typeof tagName$g>) => void;
 }
 
 interface SearchField {
@@ -5312,10 +5310,10 @@ interface Text {
 }
 
 interface TextAreaEvents {
-  input?: (event: CallbackEvent<typeof tagName>) => void;
-  focus?: (event: CallbackEvent<typeof tagName>) => void;
-  blur?: (event: CallbackEvent<typeof tagName>) => void;
-  change?: (event: CallbackEvent<typeof tagName>) => void;
+  input?: (event: CallbackEvent<typeof tagName$d>) => void;
+  focus?: (event: CallbackEvent<typeof tagName$d>) => void;
+  blur?: (event: CallbackEvent<typeof tagName$d>) => void;
+  change?: (event: CallbackEvent<typeof tagName$d>) => void;
 }
 
 interface TextAreaSlots {
@@ -5368,10 +5366,10 @@ interface TextArea {
 }
 
 interface TextFieldEvents {
-  input?: (event: CallbackEvent<typeof tagName>) => void;
-  focus?: (event: CallbackEvent<typeof tagName>) => void;
-  blur?: (event: CallbackEvent<typeof tagName>) => void;
-  change?: (event: CallbackEvent<typeof tagName>) => void;
+  input?: (event: CallbackEvent<typeof tagName$h>) => void;
+  focus?: (event: CallbackEvent<typeof tagName$h>) => void;
+  blur?: (event: CallbackEvent<typeof tagName$h>) => void;
+  change?: (event: CallbackEvent<typeof tagName$h>) => void;
 }
 
 interface TextFieldSlots {
@@ -5419,7 +5417,7 @@ interface TextField {
 }
 
 interface TileEvents {
-  click?: (event: CallbackEvent<typeof tagName>) => void;
+  click?: (event: CallbackEvent<typeof tagName$q>) => void;
 }
 
 interface Tile {
@@ -5455,10 +5453,10 @@ interface Tile {
 }
 
 interface TimeFieldEvents {
-  blur?: (event: CallbackEvent<typeof tagName>) => void | null;
-  focus?: (event: CallbackEvent<typeof tagName>) => void | null;
-  input?: (event: CallbackEvent<typeof tagName>) => void | null;
-  change?: (event: CallbackEvent<typeof tagName>) => void | null;
+  blur?: (event: CallbackEvent<typeof tagName$3>) => void | null;
+  focus?: (event: CallbackEvent<typeof tagName$3>) => void | null;
+  input?: (event: CallbackEvent<typeof tagName$3>) => void | null;
+  change?: (event: CallbackEvent<typeof tagName$3>) => void | null;
 }
 
 interface TimeField {
@@ -5502,10 +5500,10 @@ interface TimeField {
 }
 
 interface TimePickerEvents {
-  blur?: (event: CallbackEvent<typeof tagName>) => void | null;
-  focus?: (event: CallbackEvent<typeof tagName>) => void | null;
-  change?: (event: CallbackEvent<typeof tagName>) => void | null;
-  input?: (event: CallbackEvent<typeof tagName>) => void | null;
+  blur?: (event: CallbackEvent<typeof tagName$6>) => void | null;
+  focus?: (event: CallbackEvent<typeof tagName$6>) => void | null;
+  change?: (event: CallbackEvent<typeof tagName$6>) => void | null;
+  input?: (event: CallbackEvent<typeof tagName$6>) => void | null;
 }
 
 interface TimePicker {

package/build/ts/surfaces/admin/components/DropZone.d.ts

@@ -1,160 +0,0 @@
-/** VERSION: 1.19.0 **/
-/* eslint-disable import/extensions */
-
-/* eslint-disable @typescript-eslint/no-namespace */
-/* eslint-disable @typescript-eslint/member-ordering */
-
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
-/// <reference lib="DOM" />
-import type {DropZoneProps$1, ComponentChild} from './shared.d.ts';
-
-export type CallbackEvent<T extends keyof HTMLElementTagNameMap> = Event & {
-  currentTarget: HTMLElementTagNameMap[T];
-};
-export type CallbackEventListener<T extends keyof HTMLElementTagNameMap> =
-  | (EventListener & {
-      (event: CallbackEvent<T>): void;
-    })
-  | null;
-
-export interface DropZoneProps
-  extends Required<
-    Pick<
-      DropZoneProps$1,
-      | 'accept'
-      | 'accessibilityLabel'
-      | 'disabled'
-      | 'files'
-      | 'name'
-      | 'error'
-      | 'label'
-      | 'labelAccessibilityVisibility'
-      | 'multiple'
-      | 'required'
-      | 'value'
-    >
-  > {}
-
-export type Styles = string;
-export type RenderImpl = Omit<ShadowRootInit, 'mode'> & {
-  ShadowRoot: (element: any) => ComponentChild;
-  styles?: Styles;
-};
-export interface ActivationEventEsque {
-  shiftKey: boolean;
-  metaKey: boolean;
-  ctrlKey: boolean;
-  button: number;
-}
-export interface ClickOptions {
-  /**
-   * The event you want to influence the synthetic click.
-   */
-  sourceEvent?: ActivationEventEsque;
-}
-/**
- * Base class for creating custom elements with Preact.
- * While this class could be used in both Node and the browser, the constructor will only be used in the browser.
- * So we give it a type of HTMLElement to avoid typing issues later where it's used, which will only happen in the browser.
- */
-declare const BaseClass$1: typeof globalThis.HTMLElement;
-declare abstract class PreactCustomElement extends BaseClass$1 {
-  /** @private */
-  static get observedAttributes(): string[];
-  constructor({
-    styles,
-    ShadowRoot: renderFunction,
-    delegatesFocus,
-    ...options
-  }: RenderImpl);
-
-  /** @private */
-  setAttribute(name: string, value: string): void;
-  /** @private */
-  attributeChangedCallback(name: string): void;
-  /** @private */
-  connectedCallback(): void;
-  /** @private */
-  disconnectedCallback(): void;
-  /** @private */
-  adoptedCallback(): void;
-  /**
-   * Queue a run of the render function.
-   * You shouldn't need to call this manually - it should be handled by changes to @property values.
-   * @private
-   */
-  queueRender(): void;
-  /**
-   * Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.
-   *
-   * For example, if the `sourceEvent` was a middle click, or has particular keys held down,
-   * components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
-   * @private
-   * @param options
-   */
-  click({sourceEvent}?: ClickOptions): void;
-}
-
-declare const setFiles: unique symbol;
-
-declare const internals: unique symbol;
-declare const getFileInput: unique symbol;
-declare class BaseClass extends PreactCustomElement {
-  static formAssociated: boolean;
-  constructor(renderImpl: RenderImpl);
-  /** @private */
-  [internals]: ElementInternals;
-}
-declare class DropZone extends BaseClass implements DropZoneProps {
-  accessor accept: DropZoneProps['accept'];
-  accessor accessibilityLabel: DropZoneProps['accessibilityLabel'];
-  accessor disabled: DropZoneProps['disabled'];
-  accessor error: DropZoneProps['error'];
-  accessor label: DropZoneProps['label'];
-  accessor labelAccessibilityVisibility: DropZoneProps['labelAccessibilityVisibility'];
-  accessor multiple: DropZoneProps['multiple'];
-  accessor name: DropZoneProps['name'];
-  accessor required: DropZoneProps['required'];
-  accessor onchange: CallbackEventListener<typeof tagName>;
-  accessor oninput: CallbackEventListener<typeof tagName>;
-  accessor ondroprejected: CallbackEventListener<typeof tagName>;
-  get value(): string;
-  set value(value: string);
-  get files(): File[];
-  set files(files: File[]);
-  /** @private */
-  [setFiles](files: File[]): void;
-  /** @private */
-  [getFileInput](): HTMLInputElement | null;
-  /** @private */
-  formResetCallback(): void;
-  constructor();
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName]: DropZone;
-  }
-}
-declare module 'preact' {
-  namespace createElement.JSX {
-    interface IntrinsicElements {
-      [tagName]: Omit<
-        HTMLAttributes<HTMLElement>,
-        Extract<keyof HTMLAttributes<HTMLElement>, `on${Capitalize<string>}`>
-      > &
-        DropZoneJSXProps;
-    }
-  }
-}
-
-declare const tagName = 's-drop-zone';
-export interface DropZoneJSXProps
-  extends Partial<DropZoneProps>,
-    Pick<DropZoneProps$1, 'id'> {
-  onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onDropRejected?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-}
-
-export {DropZone};
-export type {DropZoneJSXProps};