@shopify/ui-extensions 2025.10.0-rc.3 → 2025.10.0-rc.5

package/src/surfaces/checkout/shared.ts

@@ -25,9 +25,12 @@ export type AnyComponent =
   | 'Paragraph'
   | 'PaymentIcon'
   | 'Progress'
+  | 'QRCode'
+  | 'Section'
   | 'Spinner'
   | 'Stack'
   | 'Text'
+  | 'TextField'
   | 'Time'
   | 'UnorderedList';
 

package/src/surfaces/customer-account/api/docs.ts

@@ -191,7 +191,7 @@ export interface Docs_Menu_Button_Action
 export interface Docs_OrderActionMenu_Button
   extends Pick<
     ButtonProps,
-    'onClick' | 'loading' | 'disabled' | 'accessibilityLabel' | 'href'
+    'onClick' | 'loading' | 'disabled' | 'accessibilityLabel' | 'href' | 'tone'
   > {
   /**
    * Destination URL to link to.

package/src/surfaces/customer-account/api/shared.ts

@@ -393,12 +393,6 @@ export interface CompanyLocation {
 }
 
 export interface Ui {
-  /**
-   * An overlay is a contextual element on top of the main interface that provides additional information or functionality.
-   */
-  overlay: {
-    close(overlayId: string): void;
-  };
   /**
    * The Toast API displays a non-disruptive message that displays at the bottom
    * of the interface to provide quick, at-a-glance feedback on the outcome

package/src/surfaces/customer-account/components/CustomerAccountAction/examples/basic-CustomerAccountAction-js.example.ts

@@ -3,7 +3,7 @@ export default function extension() {
 
   const closeButton = document.createElement('s-button');
   closeButton.innerHTML = 'Click to close';
-  closeButton.slot = 'primaryAction';
+  closeButton.slot = 'primary-action';
   closeButton.addEventListener('click', () => shopify.close());
 
   accountAction.append('Extension content');

package/src/surfaces/customer-account/components/CustomerAccountAction/examples/basic-CustomerAccountAction-preact.example.tsx

@@ -8,7 +8,7 @@ function App() {
   return (
     <s-customer-account-action heading="Extension title">
       Extension content
-      <s-button slot="primaryAction" onClick={() => shopify.close()}>
+      <s-button slot="primary-action" onClick={() => shopify.close()}>
         Click to close
       </s-button>
     </s-customer-account-action>

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

@@ -1,3 +1,5 @@
+import {BaseElementPropsWithChildren} from './shared';
+
 export interface CustomerAccountActionProps {
   /**
    * Sets the heading of the Action container.
@@ -16,14 +18,11 @@ declare global {
 }
 
 declare module 'preact' {
-  interface BaseProps {
-    children?: preact.ComponentChildren;
-    slot?: Lowercase<string>;
-  }
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace createElement.JSX {
     interface IntrinsicElements {
-      ['s-customer-account-action']: BaseProps & CustomerAccountActionProps;
+      ['s-customer-account-action']: BaseElementPropsWithChildren<CustomerAccountActionElement> &
+        CustomerAccountActionProps;
     }
   }
 }

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

@@ -1,3 +1,5 @@
+import {BaseElementPropsWithChildren} from './shared';
+
 export interface ImageGroupProps {
   /**
    * Indicates the total number of items that could be displayed in the image group.
@@ -15,13 +17,11 @@ declare global {
 }
 
 declare module 'preact' {
-  interface BaseProps {
-    children?: preact.ComponentChildren;
-  }
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace createElement.JSX {
     interface IntrinsicElements {
-      ['s-image-group']: BaseProps & ImageGroupProps;
+      ['s-image-group']: BaseElementPropsWithChildren<ImageGroupElement> &
+        ImageGroupProps;
     }
   }
 }

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

@@ -3,25 +3,25 @@ export default function extension() {
 
   const primaryAction = document.createElement('s-button');
   primaryAction.innerHTML = 'Primary action';
-  primaryAction.slot = 'primaryAction';
+  primaryAction.slot = 'primary-action';
   primaryAction.addEventListener('click', () => console.log('Primary action'));
 
   const secondaryActions1 = document.createElement('s-button');
-  secondaryActions1.slot = 'secondaryActions';
+  secondaryActions1.slot = 'secondary-actions';
   secondaryActions1.textContent = 'Secondary action 1';
   secondaryActions1.addEventListener('click', () =>
     console.log('Secondary action 1'),
   );
 
   const secondaryActions2 = document.createElement('s-button');
-  secondaryActions2.slot = 'secondaryActions';
+  secondaryActions2.slot = 'secondary-actions';
   secondaryActions2.textContent = 'Secondary action 2';
   secondaryActions2.addEventListener('click', () =>
     console.log('Secondary action 2'),
   );
 
   const breadcrumbActions = document.createElement('s-button');
-  breadcrumbActions.slot = 'breadcrumbActions';
+  breadcrumbActions.slot = 'breadcrumb-actions';
   breadcrumbActions.setAttribute('accessibilitylabel', 'Button');
   breadcrumbActions.setAttribute('href', 'shopify://customer-account/orders');
 

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

@@ -8,25 +8,25 @@ function App() {
   return (
     <s-page heading="Order #1411" subheading="Confirmed Oct 5">
       <s-button
-        slot="primaryAction"
+        slot="primary-action"
         onClick={() => console.log('Primary action')}
       >
         Primary action
       </s-button>
       <s-button
-        slot="secondaryActions"
+        slot="secondary-actions"
         onClick={() => console.log('Secondary action 1')}
       >
         Secondary action 1
       </s-button>
       <s-button
-        slot="secondaryActions"
+        slot="secondary-actions"
         onClick={() => console.log('Secondary action 2')}
       >
         Secondary action 2
       </s-button>
       <s-button
-        slot="breadcrumbActions"
+        slot="breadcrumb-actions"
         accessibilitylabel="Button"
         href="shopify://customer-account/orders"
       />

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

@@ -1,3 +1,5 @@
+import {BaseElementPropsWithChildren} from './shared';
+
 export interface PageProps {
   /**
    * The main page heading
@@ -19,14 +21,10 @@ declare global {
 }
 
 declare module 'preact' {
-  interface BaseProps {
-    children?: preact.ComponentChildren;
-    slot?: Lowercase<string>;
-  }
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace createElement.JSX {
     interface IntrinsicElements {
-      ['s-page']: BaseProps & PageProps;
+      ['s-page']: BaseElementPropsWithChildren<PageElement> & PageProps;
     }
   }
 }

package/src/surfaces/customer-account/components/shared.ts

@@ -12,3 +12,20 @@ export type Size =
   | 'large'
   | 'extraLarge'
   | 'fill';
+
+export interface BaseElementProps<TClass = HTMLElement> {
+  // Assigns a unique key to this element.
+  key?: preact.Key;
+  // Assigns a ref (generally from `useRef()`) to this element.
+  ref?: preact.Ref<TClass>;
+  // Assigns this element to a parent's slot.
+  slot?: Lowercase<string>;
+}
+
+/**
+ * Used when an element has children.
+ */
+export interface BaseElementPropsWithChildren<TClass = HTMLElement>
+  extends BaseElementProps<TClass> {
+  children?: preact.ComponentChildren;
+}