@shopify/ui-extensions 2025.10.3 → 2025.10.5

package/package.json

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

package/src/surfaces/admin/components/AdminAction.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/AdminBlock.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/AdminPrintAction.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Avatar.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Badge.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -139,7 +139,12 @@ declare module 'preact' {
 declare const tagName = 's-badge';
 export interface BadgeJSXProps
   extends Partial<BadgeProps>,
-    Pick<BadgeProps$1, 'id'> {}
+    Pick<BadgeProps$1, 'id' | 'children'> {
+  /**
+   * The content of the Badge.
+   */
+  children?: ComponentChildren;
+}
 
 export {Badge};
 export type {BadgeJSXProps};

package/src/surfaces/admin/components/Banner.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -129,7 +129,11 @@ declare module 'preact' {
 declare const tagName = 's-banner';
 export interface BannerJSXProps
   extends Partial<BannerProps>,
-    Pick<BannerProps$1, 'id'> {
+    Pick<BannerProps$1, 'id' | 'children'> {
+  /**
+   * The content of the Banner.
+   */
+  children?: ComponentChildren;
   /**
    * The secondary actions to display at the bottom of the Banner.
    *

package/src/surfaces/admin/components/Box.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -382,7 +382,12 @@ declare module 'preact' {
 declare const tagName = 's-box';
 export interface BoxJSXProps
   extends Partial<BoxProps>,
-    Pick<BoxProps$1, 'id'> {}
+    Pick<BoxProps$1, 'id' | 'children'> {
+  /**
+   * The content of the Box.
+   */
+  children?: ComponentChildren;
+}
 
 export {Box};
 export type {BoxJSXProps};

package/src/surfaces/admin/components/Button.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -208,7 +208,11 @@ declare module 'preact' {
 declare const tagName = 's-button';
 export interface ButtonJSXProps
   extends Partial<ButtonProps>,
-    Pick<ButtonProps$1, 'id'> {
+    Pick<ButtonProps$1, 'id' | 'children'> {
+  /**
+   * The content of the Button.
+   */
+  children?: ComponentChildren;
   onClick?: ((event: CallbackEvent<typeof tagName>) => void) | null;
   onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
   onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;

package/src/surfaces/admin/components/ButtonGroup.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -114,7 +114,11 @@ declare module 'preact' {
 declare const tagName = 's-button-group';
 export interface ButtonGroupJSXProps
   extends Partial<ButtonGroupProps>,
-    Pick<ButtonGroupProps$1, 'id'> {
+    Pick<ButtonGroupProps$1, 'id' | 'children'> {
+  /**
+   * The content of the ButtonGroup.
+   */
+  children?: ComponentChildren;
   /**
    * The primary action button for the group.
    * Accepts a single Button element with a `variant` of `primary`.

package/src/surfaces/admin/components/Checkbox/examples/indeterminate-state.jsx

@@ -1,21 +1,21 @@
 const [selectedItems, setSelectedItems] = useState([]);
 const items = ['Item 1', 'Item 2', 'Item 3'];
 
-const toggleItem = (value, checked) => setSelectedItems(prev => checked ? [...prev, value] : prev.filter(item => item !== value));
+const toggleItem = (value, checked) => setSelectedItems(checked ? [...selectedItems, value] : selectedItems.filter(item => item !== value));
 const toggleAll = (checked) => setSelectedItems(checked ? items : []);
 const isSelected = (item) => selectedItems.includes(item);
 
 return (
   <s-stack gap="small">
-    <s-checkbox 
-      label="Select all items" 
-      indeterminate={selectedItems.length > 0 && selectedItems.length < items.length}
+    <s-checkbox
+      label="Select all items"
+      indeterminate={selectedItems.length !== 0 && selectedItems.length !== items.length}
       checked={selectedItems.length === items.length}
-      onChange={e => toggleAll(e.target.checked)} 
+      onChange={e => toggleAll(e.currentTarget.checked)}
     />
     <s-divider />
     {items.map(i => (
-      <s-checkbox key={i} label={i} checked={isSelected(i)} onChange={e => toggleItem(i, e.target.checked)} />
+      <s-checkbox key={i} label={i} checked={isSelected(i)} onChange={e => toggleItem(i, e.currentTarget.checked)} />
     ))}
   </s-stack>
 );

package/src/surfaces/admin/components/Checkbox/examples/validation-example.jsx

@@ -4,15 +4,15 @@ const [error, setError] = useState(errorMessage);
 
 return (
   <s-section>
-    <s-stack gap="base" inlineAlign="start">
+    <s-stack gap="base" justifyContent="start">
       <s-text-field label="Name" />
       <s-checkbox
         label="I agree to the terms"
         checked={checked}
         error={error}
         onChange={(e) => {
-          setChecked(e.target.checked);
-          setError(e.target.checked ? '' : errorMessage);
+          setChecked(e.currentTarget.checked);
+          setError(e.currentTarget.checked ? '' : errorMessage);
         }}
       />
     </s-stack>

package/src/surfaces/admin/components/Checkbox.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Chip.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -108,7 +108,11 @@ declare module 'preact' {
 declare const tagName = 's-chip';
 export interface ChipJSXProps
   extends Partial<ChipProps>,
-    Pick<ChipProps$1, 'id'> {
+    Pick<ChipProps$1, 'id' | 'children'> {
+  /**
+   * The content of the Chip.
+   */
+  children?: ComponentChildren;
   /**
    * The graphic to display in the chip.
    *

package/src/surfaces/admin/components/Choice.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -125,7 +125,15 @@ declare module 'preact' {
 declare const tagName = 's-choice';
 export interface ChoiceJSXProps
   extends Partial<ChoiceProps>,
-    Pick<ChoiceProps$1, 'id' | 'details'> {
+    Pick<ChoiceProps$1, 'id' | 'children' | 'details'> {
+  /**
+   * Content to use as the choice label.
+   *
+   * The label is produced by extracting and
+   * concatenating the text nodes from the provided content;
+   * any markup or element structure is ignored.
+   */
+  children?: ComponentChildren;
   /**
    * Additional text to provide context or guidance for the input.
    *

package/src/surfaces/admin/components/ChoiceList/examples/validation-example.jsx

@@ -2,7 +2,7 @@ const [error, setError] = useState('Please select at least one option');
 
 return (
   <s-section>
-    <s-stack gap="base" inlineAlign="start">
+    <s-stack gap="base" justifyContent="start">
       <s-choice-list
         label="Product visibility"
         name="visibility"

package/src/surfaces/admin/components/ChoiceList.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -150,7 +150,13 @@ declare module 'preact' {
 declare const tagName = 's-choice-list';
 export interface ChoiceListJSXProps
   extends Partial<ChoiceListProps>,
-    Pick<ChoiceListProps$1, 'id'> {
+    Pick<ChoiceListProps$1, 'id' | 'children'> {
+  /**
+   * The choices a user can select from.
+   *
+   * Accepts `Choice` components.
+   */
+  children?: ComponentChildren;
   onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
   onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
 }

package/src/surfaces/admin/components/Clickable.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -455,7 +455,11 @@ declare module 'preact' {
 declare const tagName = 's-clickable';
 export interface ClickableJSXProps
   extends Partial<ClickableProps>,
-    Pick<ClickableProps$1, 'id'> {
+    Pick<ClickableProps$1, 'id' | 'children'> {
+  /**
+   * The content of the Clickable.
+   */
+  children?: ComponentChildren;
   onClick?: ((event: CallbackEvent<typeof tagName>) => void) | null;
   onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
   onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;

package/src/surfaces/admin/components/ClickableChip.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -6,7 +6,11 @@
 
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
-import type {ComponentChildren, ClickableChipProps$1} from './shared.d.ts';
+import type {
+  ComponentChildren,
+  ClickableChipProps$1,
+  InteractionProps,
+} from './shared.d.ts';
 
 export type CallbackEvent<T extends keyof HTMLElementTagNameMap> = Event & {
   currentTarget: HTMLElementTagNameMap[T];
@@ -41,6 +45,9 @@ export interface ClickableChipProps
       | 'hidden'
       | 'href'
       | 'disabled'
+      | 'command'
+      | 'commandFor'
+      | 'interestFor'
     >
   > {}
 
@@ -104,8 +111,40 @@ declare abstract class PreactCustomElement extends BaseClass {
   click({sourceEvent}?: ClickOptions): void;
 }
 
+export interface PreactOverlayControlProps
+  extends Pick<InteractionProps, 'commandFor' | 'interestFor'> {
+  /**
+   * Sets the action the [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this clickable is activated.
+   *
+   * See the documentation of particular components for the actions they support.
+   *
+   * - `--auto`: a default action for the target component.
+   * - `--show`: shows the target component.
+   * - `--hide`: hides the target component.
+   * - `--toggle`: toggles the target component.
+   *
+   * @default '--auto'
+   */
+  command: Extract<
+    InteractionProps['command'],
+    '--show' | '--hide' | '--toggle' | '--auto'
+  >;
+  /**
+   * Sets the element the [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this clickable is activated.
+   */
+  commandFor: Extract<InteractionProps['commandFor'], string>;
+  /**
+   * Sets the element the [interestFor](https://open-ui.org/components/interest-invokers.explainer/#the-pitch-in-code) should act on when this clickable is activated.
+   */
+  interestFor: Extract<InteractionProps['interestFor'], string>;
+}
+
+declare const ClickableChip_base: (abstract new (
+  args_0: RenderImpl,
+) => PreactCustomElement & PreactOverlayControlProps) &
+  Pick<typeof PreactCustomElement, 'prototype' | 'observedAttributes'>;
 declare class ClickableChip
-  extends PreactCustomElement
+  extends ClickableChip_base
   implements ClickableChipProps
 {
   accessor color: ClickableChipProps['color'];
@@ -136,7 +175,11 @@ declare module 'preact' {
 declare const tagName = 's-clickable-chip';
 export interface ClickableChipJSXProps
   extends Partial<ClickableChipProps>,
-    Pick<ClickableChipProps$1, 'id'> {
+    Pick<ClickableChipProps$1, 'id' | 'children'> {
+  /**
+   * The content of the clickable chip.
+   */
+  children?: ComponentChildren;
   /**
    * The graphic to display in the clickable chip.
    *

package/src/surfaces/admin/components/ColorField/examples/validation-example.jsx

@@ -3,7 +3,7 @@ const [error, setError] = useState('Please enter a valid color format');
 
 return (
   <s-section>
-    <s-stack gap="base" inlineAlign="start">
+    <s-stack gap="base" justifyContent="start">
       <s-text-field label="Theme name" />
       <s-color-field
         label="Brand color"
@@ -11,9 +11,9 @@ return (
         value={color}
         error={error}
         required
-        onChange={(e) => {
-          setColor(e.target.value);
-          setError(/^#([0-9A-F]{3}){1,2}$/i.test(e.target.value) ? '' : 'Please enter a valid color format');
+        onInput={(e) => {
+          setColor(e.currentTarget.value);
+          setError(/^#([0-9A-F]{3}){1,2}$/i.test(e.currentTarget.value) ? '' : 'Please enter a valid color format');
         }}
       />
     </s-stack>

package/src/surfaces/admin/components/ColorField.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/ColorPicker.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/DateField/examples/validation-example.jsx

@@ -3,7 +3,7 @@ const [error, setError] = useState('Event date is required');
 
 return (
   <s-section>
-    <s-stack gap="base" inlineAlign="start">
+    <s-stack gap="base" justifyContent="start">
       <s-text-field label="Event name" />
       <s-date-field
         label="Event date"
@@ -11,8 +11,8 @@ return (
         error={error}
         required
         onChange={(e) => {
-          setDate(e.target.value);
-          setError(e.target.value ? '' : 'Event date is required');
+          setDate(e.currentTarget.value);
+          setError(e.currentTarget.value ? '' : 'Event date is required');
         }}
       />
     </s-stack>

package/src/surfaces/admin/components/DateField.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/DatePicker/examples/analytics-dashboard.html

@@ -13,7 +13,7 @@
     view="2025-01"
     onchange="console.log('Date range changed:', event.target.value)"
   ></s-date-picker>
-  <s-text size="sm" id="selected-range">
+  <s-text id="selected-range">
     Selected range: 2025-01-01--2025-01-31
   </s-text>
 </s-stack>

package/src/surfaces/admin/components/DatePicker/examples/analytics-dashboard.jsx

@@ -26,10 +26,10 @@ return (
       view="2025-01"
       value={value}
       onChange={(event) => {
-        console.log('Date range changed:', event.target.value);
-        setValue(event.target.value);
+        console.log('Date range changed:', event.currentTarget.value);
+        setValue(event.currentTarget.value);
       }}
     />
-    <s-text size="sm">Selected range: {value}</s-text>
+    <s-text>Selected range: {value}</s-text>
   </s-stack>
 )

package/src/surfaces/admin/components/DatePicker/examples/form-integration.jsx

@@ -14,13 +14,13 @@ return (
       label="Order number"
       placeholder="Search orders..."
       value={orderNumber}
-      onChange={(event) => setOrderNumber(event.target.value)}
+      onChange={(event) => setOrderNumber(event.currentTarget.value)}
     />
     <s-date-picker
       type="range"
       name="order-date-range"
       value={dateRange}
-      onChange={(event) => setDateRange(event.target.value)}
+      onChange={(event) => setDateRange(event.currentTarget.value)}
       view="2024-01"
     />
     <s-button onClick={handleApplyFilters}>Apply filters</s-button>

package/src/surfaces/admin/components/DatePicker.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Divider.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/DropZone/examples/default.jsx

@@ -3,7 +3,7 @@
   accessibilityLabel="Upload image of type jpg, png, or gif"
   accept=".jpg,.png,.gif"
   multiple
-  onInput="console.log('onInput', event.currentTarget?.value)"
-  onChange="console.log('onChange', event.currentTarget?.value)"
-  onDropRejected="console.log('onDropRejected', event.currentTarget?.value)"
+  onInput={(event) => console.log('onInput', event.currentTarget?.value)}
+  onChange={(event) => console.log('onChange', event.currentTarget?.value)}
+  onDropRejected={(event) => console.log('onDropRejected', event.currentTarget?.value)}
  />