@shopify/ui-extensions 2025.10.3 → 2025.10.4

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

@@ -0,0 +1,183 @@
+/** VERSION: 1.25.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 {ComponentChildren, DropZoneProps$1} 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;
+/** Used when an element does not have children. */
+export interface PreactBaseElementProps<TClass extends 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 PreactBaseElementPropsWithChildren<TClass extends HTMLElement>
+  extends PreactBaseElementProps<TClass> {
+  children?: preact.ComponentChildren;
+}
+
+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) => ComponentChildren;
+  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;
+}
+
+export type ReplaceType<TType, TFrom, TTo> = Exclude<TType, TFrom> | TTo;
+
+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;
+  /** This sets the input value for a file type, which cannot be set programatically, so it can only be reset. */
+  set value(value: '' | null);
+  get files(): File[];
+  set files(files: File[]);
+  /** @private */
+  [setFiles](files: File[]): void;
+  /** @private */
+  [getFileInput](): ReplaceType<
+    Element | null | undefined,
+    Element,
+    HTMLInputElement
+  >;
+
+  /** @private */
+  formResetCallback(): void;
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName]: DropZone;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName]: DropZoneJSXProps &
+        PreactBaseElementPropsWithChildren<DropZone>;
+    }
+  }
+}
+
+declare const tagName = 's-drop-zone';
+export interface DropZoneJSXProps
+  extends Partial<DropZoneProps>,
+    Pick<DropZoneProps$1, 'id'> {
+  /**
+   * Content to include inside the DropZone container
+   */
+  children?: ComponentChildren;
+  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};

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

@@ -3,7 +3,7 @@ const [error, setError] = useState('Please enter a valid email address');
 
 return (
   <s-section>
-    <s-stack gap="base" inlineAlign="start">
+    <s-stack gap="base" justifyContent="start">
       <s-text-field label="Name" />
       <s-email-field
         label="Contact email"
@@ -12,8 +12,8 @@ return (
         error={error}
         required
         onInput={(e) => {
-          setEmail(e.target.value);
-          setError(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.target.value) ? '' : 'Please enter a valid email address');
+          setEmail(e.currentTarget.value);
+          setError(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.currentTarget.value) ? '' : 'Please enter a valid email address');
         }}
       />
     </s-stack>

package/src/surfaces/admin/components/EmailField.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/Form.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/FunctionSettings.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/Grid.d.ts

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

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

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

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

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

package/src/surfaces/admin/components/Icon.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/Image.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/Link.d.ts

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

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

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

package/src/surfaces/admin/components/Menu/examples/menu-with-links-and-disabled-items.jsx

@@ -6,7 +6,7 @@
       View product page
     </s-button>
     <s-button disabled>Unavailable action</s-button>
-    <s-button download href="javascript:void(0)">
+    <s-button download="sales-report.csv" href="/reports/sales-report.csv">
       Download report
     </s-button>
   </s-menu>

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -182,7 +182,14 @@ declare module 'preact' {
 declare const tagName = 's-menu';
 export interface MenuJSXProps
   extends Partial<MenuProps>,
-    Pick<MenuProps$1, 'id'> {}
+    Pick<MenuProps$1, 'id' | 'children'> {
+  /**
+   * The Menu items.
+   *
+   * Only accepts `Button` and `Section` components.
+   */
+  children?: ComponentChildren;
+}
 
 export {Menu};
 export type {MenuJSXProps};

package/src/surfaces/admin/components/Modal/examples/form-modal.html

@@ -11,12 +11,11 @@
         value="Sarah Johnson"
       ></s-text-field>
 
-      <s-text-field
+      <s-email-field
         label="Email address"
         name="email"
-        type="email"
         value="sarah@example.com"
-      ></s-text-field>
+      ></s-email-field>
 
       <s-text-field
         label="Phone number"

package/src/surfaces/admin/components/Modal/examples/form-modal.jsx

@@ -11,10 +11,9 @@
         value="Sarah Johnson"
        />
 
-      <s-text-field
+      <s-email-field
         label="Email address"
         name="email"
-        type="email"
         value="sarah@example.com"
        />
 

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -291,7 +291,11 @@ declare module 'preact' {
 declare const tagName = 's-modal';
 export interface ModalJSXProps
   extends Partial<ModalProps>,
-    Pick<ModalProps$1, 'id'> {
+    Pick<ModalProps$1, 'id' | 'children'> {
+  /**
+   * The content of the Modal.
+   */
+  children?: ComponentChildren;
   /**
    * The primary action to perform.
    *

package/src/surfaces/admin/components/MoneyField/examples/basic-field.jsx

@@ -1,6 +1,6 @@
 <s-money-field
   label="Product cost"
   value="29.99"
-  min="0.01"
+  min={0.01}
   error="Product cost is required"
  />

package/src/surfaces/admin/components/MoneyField/examples/basic-usage.html

@@ -3,5 +3,4 @@
   value="19.99"
   min="0"
   max="1000"
-  step="0.01"
 ></s-money-field>

package/src/surfaces/admin/components/MoneyField/examples/basic-usage.jsx

@@ -3,5 +3,4 @@
   value="19.99"
   min={0}
   max={1000}
-  step="0.01"
  />

package/src/surfaces/admin/components/MoneyField/examples/currency-formatting-with-form-integration.html

@@ -4,7 +4,6 @@
     value="0.00"
     min="0.01"
     max="99999.99"
-    step="0.01"
     details="Customers will see this price"
   ></s-money-field>
 
@@ -13,7 +12,6 @@
     value=""
     min="0"
     max="99999.99"
-    step="0.01"
     details="Show customers the original price when on sale"
   ></s-money-field>
 
@@ -22,7 +20,6 @@
     value=""
     min="0"
     max="99999.99"
-    step="0.01"
     details="Customers won't see this"
   ></s-money-field>
 </s-stack>

package/src/surfaces/admin/components/MoneyField/examples/currency-formatting-with-form-integration.jsx

@@ -2,9 +2,8 @@
   <s-money-field
     label="Price"
     value="0.00"
-    min="0.01"
-    max="99999.99"
-    step="0.01"
+    min={0.01}
+    max={99999.99}
     details="Customers will see this price"
    />
 
@@ -12,8 +11,7 @@
     label="Compare at price"
     value=""
     min={0}
-    max="99999.99"
-    step="0.01"
+    max={99999.99}
     details="Show customers the original price when on sale"
    />
 
@@ -21,8 +19,7 @@
     label="Cost per item"
     value=""
     min={0}
-    max="99999.99"
-    step="0.01"
+    max={99999.99}
     details="Customers won't see this"
    />
 </s-stack>

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

@@ -3,20 +3,19 @@ const [error, setError] = useState('Value must be no more than $100');
 
 return (
   <s-section>
-    <s-stack gap="base" inlineAlign="start">
+    <s-stack gap="base" justifyContent="start">
       <s-text-field label="Product name" />
       <s-money-field
         label="Discount amount"
         value={amount}
         min={0}
         max={100}
-        step="0.5"
         details="Enter discount amount between $0 and $100"
         error={error}
         onInput={(e) => {
-          setAmount(e.target.value);
-          const val = parseFloat(e.target.value);
-          setError(val > e.target.max ? 'Value must be no more than $100' : val < e.target.min ? 'Value must be at least $0' : '');
+          setAmount(e.currentTarget.value);
+          const val = parseFloat(e.currentTarget.value);
+          setError(val > e.currentTarget.max ? 'Value must be no more than $100' : val < e.currentTarget.min ? 'Value must be at least $0' : '');
         }}
       />
     </s-stack>

package/src/surfaces/admin/components/MoneyField/examples/with-validation-limits.html

@@ -3,6 +3,5 @@
   value="5.00"
   min="0"
   max="100"
-  step="0.5"
   details="Enter discount amount between $0 and $100"
 ></s-money-field>

package/src/surfaces/admin/components/MoneyField/examples/with-validation-limits.jsx

@@ -3,6 +3,5 @@
   value="5.00"
   min={0}
   max={100}
-  step="0.5"
   details="Enter discount amount between $0 and $100"
 />

package/src/surfaces/admin/components/MoneyField.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/NumberField/examples/basic-usage.jsx

@@ -1,6 +1,6 @@
 <s-number-field
   label="Order quantity"
-  value={5}
+  value="5"
   min={1}
   max={999}
   step={1}

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

@@ -1,7 +1,7 @@
 <s-number-field
   label="Quantity"
   details="Number of items in stock"
-  placeholder={0}
+  placeholder="0"
   step={5}
   min={0}
   max={100}

package/src/surfaces/admin/components/NumberField/examples/multiple-examples.jsx

@@ -1,7 +1,7 @@
 <s-stack gap="base">
   <s-number-field
     label="Inventory count"
-    value={150}
+    value="150"
     min={0}
     step={1}
     inputMode="numeric"
@@ -10,17 +10,17 @@
 
   <s-number-field
     label="Discount percentage"
-    value={15}
+    value="15"
     suffix="%"
     min={0}
     max={100}
-    step="0.1"
+    step={0.1}
     inputMode="decimal"
    />
 
   <s-number-field
     label="Shipping weight"
-    value={2.5}
+    value="2.5"
     suffix="kg"
     min={0.1}
     step={0.1}

package/src/surfaces/admin/components/NumberField/examples/with-prefix-and-suffix.jsx

@@ -1,6 +1,6 @@
 <s-number-field
   label="Product price"
-  value={29.99}
+  value="29.99"
   prefix="$"
   suffix="CAD"
   inputMode="decimal"

package/src/surfaces/admin/components/NumberField.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/Option.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -111,7 +111,12 @@ declare module 'preact' {
 declare const tagName = 's-option';
 export interface OptionJSXProps
   extends Partial<OptionProps>,
-    Pick<OptionProps$1, 'id'> {}
+    Pick<OptionProps$1, 'id' | 'children'> {
+  /**
+   * The content to use as the label.
+   */
+  children?: ComponentChildren;
+}
 
 export {Option};
 export type {OptionJSXProps};

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -111,7 +111,14 @@ declare module 'preact' {
 declare const tagName = 's-option-group';
 export interface OptionGroupJSXProps
   extends Partial<OptionGroupProps>,
-    Pick<OptionGroupProps$1, 'id'> {}
+    Pick<OptionGroupProps$1, 'id' | 'children'> {
+  /**
+   * The options a user can select from.
+   *
+   * Accepts `Option` components.
+   */
+  children?: ComponentChildren;
+}
 
 export {OptionGroup};
 export type {OptionGroupJSXProps};