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

package/package.json

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

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

@@ -0,0 +1,12 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Details',
+  description:
+    'Creates a collapsible content area that can be expanded or collapsed by users. Use with Summary to provide expandable sections for additional information or settings.',
+  category: 'Polaris web components',
+  subCategory: 'Interactive',
+  related: [],
+};
+
+export default data;

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

@@ -3,7 +3,7 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'EmailField',
   description:
-    'Let users enter email addresses with built-in validation and optimized keyboard settings.',
+    'Let users enter email addresses with optimized keyboard settings.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],

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

@@ -3,7 +3,7 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Modal',
   description:
-    'Use modal to display content in a overlay. This component is useful for creating a distraction-free experience, such as a confirmation dialog or a settings panel.',
+    'Displays content in an overlay. Use to create a distraction-free experience such as a confirmation dialog or a settings panel.',
   category: 'Polaris web components',
   subCategory: 'Overlays',
   related: [],

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

@@ -2,7 +2,8 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
 
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'MoneyField',
-  description: 'Collect monetary values from users.',
+  description:
+    'Collect monetary values from users with built-in currency formatting and validation.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],

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

@@ -3,7 +3,7 @@ import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Popover',
   description:
-    'Popover is used to display content in an overlay that can be triggered by a button.',
+    'Popovers are used to display content in an overlay that can be triggered by a button.',
   category: 'Polaris web components',
   subCategory: 'Overlays',
   related: [],

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

@@ -0,0 +1,12 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'PressButton',
+  description:
+    'Allows users to toggle between active/inactive states. Use to represent a persistent on/off or selected/unselected status.',
+  category: 'Polaris web components',
+  subCategory: 'Actions',
+  related: [],
+};
+
+export default data;

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

@@ -0,0 +1,12 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'SkeletonParagraph',
+  description:
+    'Displays a placeholder representation of text content while it loads. Use to improve perceived performance by showing users where text will appear.',
+  category: 'Polaris web components',
+  subCategory: 'Feedback',
+  related: [],
+};
+
+export default data;

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

@@ -0,0 +1,12 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Summary',
+  description:
+    'Provides a clickable label for collapsible Details content. Use to create clear, accessible disclosure controls that show or hide additional information.',
+  category: 'Polaris web components',
+  subCategory: 'Interactive',
+  related: [],
+};
+
+export default data;

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

@@ -1,9 +1,9 @@
-import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
 
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Tooltip',
   description:
-    'Floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover or focus.',
+    'Displays helpful information in a small overlay when users hover or focus on an element. Use to provide additional context without cluttering the interface.',
   category: 'Polaris web components',
   subCategory: 'Overlays',
   related: [],

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

@@ -7,8 +7,8 @@ export {default as Checkbox} from './Checkbox';
 export {default as ChoiceList} from './ChoiceList';
 export {default as Clickable} from './Clickable';
 export {default as ClipboardItem} from './ClipboardItem';
-export {default as DateField} from './DateField';
 export {default as DatePicker} from './DatePicker';
+export {default as Details} from './Details';
 export {default as Divider} from './Divider';
 export {default as DropZone} from './DropZone';
 export {default as EmailField} from './EmailField';
@@ -25,17 +25,22 @@ export {default as OrderedList} from './OrderedList';
 export {default as Paragraph} from './Paragraph';
 export {default as PasswordField} from './PasswordField';
 export {default as PaymentIcon} from './PaymentIcon';
+export {default as Popover} from './Popover';
+export {default as PressButton} from './PressButton';
 export {default as Progress} from './Progress';
 export {default as QRCode} from './QRCode';
 export {default as SearchField} from './SearchField';
 export {default as Section} from './Section';
 export {default as Select} from './Select';
+export {default as SkeletonParagraph} from './SkeletonParagraph';
 export {default as Spinner} from './Spinner';
 export {default as Stack} from './Stack';
+export {default as Summary} from './Summary';
 export {default as Switch} from './Switch';
 export {default as Table} from './Table';
 export {default as Text} from './Text';
 export {default as TextArea} from './TextArea';
 export {default as Time} from './Time';
+export {default as Tooltip} from './Tooltip';
 export {default as UnorderedList} from './UnorderedList';
 export {default as URLField} from './URLField';

package/src/index.ts

@@ -1,3 +1,2 @@
 export * from './api';
-
 export * from './extension';

package/src/shared.ts

@@ -13,7 +13,8 @@ export type ApiVersion =
   | '2025-04'
   | 'unstable'
   | '2025-07'
-  | '2025-10';
+  | '2025-10'
+  | '2026-01';
 
 /**
  * The capabilities an extension has access to.
@@ -941,45 +942,13 @@ export interface GraphQLError {
 /**
  * Represents a read-only value managed on the main thread that an extension can subscribe to.
  *
- * Example: extension surfaces use this to manage the state of an object and
+ * Example: Checkout uses this to manage the state of an object and
  * communicate state changes to extensions running in a sandboxed web worker.
  *
- * This interface is compatible with [Preact's ReadonlySigna](https://github.com/preactjs/signals/blob/a023a132a81bd4ba4a0bebb8cbbeffbd8c8bbafc/packages/core/src/index.ts#L700-L709).
+ * This interface is compatible with [Preact's ReadonlySignal](https://github.com/preactjs/signals/blob/a023a132a81bd4ba4a0bebb8cbbeffbd8c8bbafc/packages/core/src/index.ts#L700-L709).
+ *
  */
 export interface ReadonlySignalLike<T> {
   readonly value: T;
   subscribe(fn: (value: T) => void): () => void;
 }
-
-/**
- * A remote-subscribable object exposed to a sandboxed web worker.
- *
- * Example: extensions use this to get updates about an object
- * managed by extension surfaces on the main thread.
- */
-export interface StatefulRemoteSubscribable<T> extends ReadonlySignalLike<T> {
-  readonly current: T;
-  destroy(): Promise<void>;
-}
-
-/**
- * Represents a read-only value managed on the main thread that an extension can subscribe to.
- *
- * Example: extension surfaces use this to manage the state of an object and
- * communicate state changes to extensions running in a sandboxed web worker.
- *
- * This interface is compatible with [Preact's ReadonlySignal](https://github.com/preactjs/signals/blob/a023a132a81bd4ba4a0bebb8cbbeffbd8c8bbafc/packages/core/src/index.ts#L700-L709).
- *
- * Some fields are deprecated but still supported for backwards compatibility.
- * In version 2025-10, [`StatefulRemoteSubscribable`](https://github.com/Shopify/remote-dom/blob/03929aa8418a89d41d294005f219837582718df8/packages/async-subscription/src/types.ts#L17) was replaced with `ReadonlySignalLike`. The old fields will be removed some time in the future.
- */
-export interface SubscribableSignalLike<T> extends ReadonlySignalLike<T> {
-  /**
-   * @deprecated Use `.value` instead.
-   */
-  readonly current: T;
-  /**
-   * @deprecated No longer needed. Use Preact Signal management instead.
-   */
-  destroy(): Promise<void>;
-}

package/src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts

@@ -10,3 +10,34 @@ export interface CustomerSegmentTemplateApi<
   /** @private */
   __enabledFeatures: string[];
 }
+
+export type CustomerStandardMetafieldDependency = 'facts.birth_date';
+export interface CustomerSegmentTemplate {
+  /**
+   * The localized title of the template.
+   */
+  title: string;
+  /**
+   * The localized description of the template. An array can be used for multiple paragraphs.
+   */
+  description: string | string[];
+  /**
+   * The code snippet to render in the template with syntax highlighting. The `query` is not validated in the template.
+   */
+  query: string;
+  /**
+   * The code snippet to insert in the segment editor. If missing, `query` will be used. The `queryToInsert` is not validated in the template.
+   */
+  queryToInsert: string;
+  /**
+   * The list of customer standard metafields or custom metafields used in the template's query.
+   */
+  dependencies?: {
+    standardMetafields?: CustomerStandardMetafieldDependency[];
+    customMetafields?: string[];
+  };
+  /**
+   * ISO 8601-encoded date and time string. A "New" badge will be rendered for templates introduced in the last month.
+   */
+  createdOn: string;
+}

package/src/surfaces/admin/api.ts

@@ -1,7 +1,10 @@
 export type {I18n, I18nTranslate} from '../../api';
 export type {StandardApi, Intents} from './api/standard/standard';
 export type {Navigation} from './api/block/block';
-export type {CustomerSegmentTemplateApi} from './api/customer-segment-template/customer-segment-template';
+export type {
+  CustomerSegmentTemplateApi,
+  CustomerSegmentTemplate,
+} from './api/customer-segment-template/customer-segment-template';
 export type {ActionExtensionApi} from './api/action/action';
 export type {BlockExtensionApi} from './api/block/block';
 export type {PrintActionExtensionApi} from './api/print-action/print-action';

package/src/surfaces/admin/components/patterns/examples/accountConnection.html

@@ -0,0 +1,16 @@
+<s-section>
+  <s-stack gap="base">
+  <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+    <s-grid-item>
+      <s-stack>
+        <s-heading>Puzzlify</s-heading>
+        <s-text color="subdued">No account connected</s-text>
+      </s-stack>
+    </s-grid-item>
+    <s-grid-item>
+      <s-button variant="primary">Connect</s-button>
+    </s-grid-item>
+  </s-grid>
+  <s-text>By clicking Connect, you agree to accept Sample App's terms and conditions. You'll pay a commission rate of 15% on sales made through Sample App.</s-text>
+</s-stack>
+</s-section>