@shopify/ui-extensions 2025.10.0-rc.45 → 2025.10.0-rc.47

package/build/ts/surfaces/point-of-sale/components/TextArea.d.ts

@@ -31,6 +31,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -45,6 +46,7 @@ declare const tagName = 's-text-area';
 export interface TextAreaJSXProps
   extends Pick<
     TextAreaProps,
+    | 'id'
     | 'label'
     | 'details'
     | 'value'
@@ -55,22 +57,37 @@ export interface TextAreaJSXProps
     | 'maxLength'
     | 'rows'
   > {
+  /**
+   * Callback when the user makes any changes in the field.
+   */
   onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Callback after editing completes (typically on blur).
+   */
   onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Callback when the element loses focus.
+   */
+  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Callback when the element receives focus.
+   */
+  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Additional content to be displayed in the field. Commonly used to display clickable text.
+   */
   accessory?: ComponentChild;
 }
+export type ElementProps = Omit<TextAreaJSXProps, 'accessory'>;
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName]: TextAreaJSXProps;
+    [tagName]: ElementProps;
   }
 }
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: Omit<TextAreaJSXProps, 'accessory'> &
-        BaseElementPropsWithChildren<Omit<TextAreaJSXProps, 'accessory'>>;
+      [tagName]: IntrinsicElementProps<ElementProps>;
     }
   }
 }

package/build/ts/surfaces/point-of-sale/components/TextField/TextField.doc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.doc.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/point-of-sale/components/TextField/TextField.doc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,6BAA6B,EAAC,MAAM,wBAAwB,CAAC;AAErE,QAAA,MAAM,IAAI,EAAE,6BAuCX,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"TextField.doc.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/point-of-sale/components/TextField/TextField.doc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,6BAA6B,EAAC,MAAM,wBAAwB,CAAC;AAErE,QAAA,MAAM,IAAI,EAAE,6BAqFX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/build/ts/surfaces/point-of-sale/components/TextField.d.ts

@@ -31,6 +31,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -45,6 +46,7 @@ declare const tagName = 's-text-field';
 export interface TextFieldJSXProps
   extends Pick<
     TextFieldProps,
+    | 'id'
     | 'label'
     | 'details'
     | 'value'
@@ -54,22 +56,37 @@ export interface TextFieldJSXProps
     | 'required'
     | 'maxLength'
   > {
+  /**
+   * Callback when the user makes any changes in the field.
+   */
   onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Callback after editing completes (typically on blur).
+   */
   onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Callback when the element loses focus.
+   */
+  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Callback when the element receives focus.
+   */
+  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Additional content to be displayed in the field. Commonly used to display clickable text.
+   */
   accessory?: ComponentChild;
 }
+export type ElementProps = Omit<TextFieldJSXProps, 'accessory'>;
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName]: TextFieldJSXProps;
+    [tagName]: ElementProps;
   }
 }
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: Omit<TextFieldJSXProps, 'accessory'> &
-        BaseElementPropsWithChildren<Omit<TextFieldJSXProps, 'accessory'>>;
+      [tagName]: IntrinsicElementProps<ElementProps>;
     }
   }
 }

package/build/ts/surfaces/point-of-sale/components/Tile.d.ts

@@ -26,6 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -40,8 +41,17 @@ declare const tagName = 's-tile';
 export interface TileJSXProps
   extends Pick<
     TileProps,
-    'disabled' | 'heading' | 'id' | 'itemCount' | 'tone' | 'subheading'
+    'heading' | 'id' | 'itemCount' | 'tone' | 'subheading'
   > {
+  /**
+   * Disables the Tile meaning it cannot be clicked or receive focus.
+   *
+   * @default false
+   */
+  disabled?: TileProps['disabled'];
+  /**
+   * Callback when the Tile is activated.
+   */
   onClick?: (event: CallbackEvent<typeof tagName>) => void;
 }
 declare global {
@@ -52,7 +62,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: TileJSXProps & BaseElementPropsWithChildren<TileJSXProps>;
+      [tagName]: IntrinsicElementProps<TileJSXProps>;
     }
   }
 }

package/build/ts/surfaces/point-of-sale/components/TimeField/TimeField.doc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.doc.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/point-of-sale/components/TimeField/TimeField.doc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,6BAA6B,EAAC,MAAM,wBAAwB,CAAC;AAErE,QAAA,MAAM,IAAI,EAAE,6BAkCX,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"TimeField.doc.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/point-of-sale/components/TimeField/TimeField.doc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,6BAA6B,EAAC,MAAM,wBAAwB,CAAC;AAErE,QAAA,MAAM,IAAI,EAAE,6BAoDX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/build/ts/surfaces/point-of-sale/components/TimeField.d.ts

@@ -26,6 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -42,10 +43,22 @@ export interface TimeFieldJSXProps
     TimeFieldProps,
     'id' | 'label' | 'disabled' | 'value' | 'error' | 'details'
   > {
-  onBlur?: (event: CallbackEvent<typeof tagName>) => void | null;
-  onFocus?: (event: CallbackEvent<typeof tagName>) => void | null;
-  onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
-  onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /**
+   * Callback when the user makes any changes in the field.
+   */
+  onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Callback after editing completes (typically on blur).
+   */
+  onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Callback when the element loses focus.
+   */
+  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Callback when the element receives focus.
+   */
+  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
 }
 declare global {
   interface HTMLElementTagNameMap {
@@ -55,8 +68,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: TimeFieldJSXProps &
-        BaseElementPropsWithChildren<TimeFieldJSXProps>;
+      [tagName]: IntrinsicElementProps<TimeFieldJSXProps>;
     }
   }
 }

package/build/ts/surfaces/point-of-sale/components/TimePicker/TimePicker.doc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.doc.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/point-of-sale/components/TimePicker/TimePicker.doc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,6BAA6B,EAAC,MAAM,wBAAwB,CAAC;AAErE,QAAA,MAAM,IAAI,EAAE,6BAiCX,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"TimePicker.doc.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/point-of-sale/components/TimePicker/TimePicker.doc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,6BAA6B,EAAC,MAAM,wBAAwB,CAAC;AAErE,QAAA,MAAM,IAAI,EAAE,6BA+DX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/build/ts/surfaces/point-of-sale/components/TimePicker.d.ts

@@ -26,6 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -39,10 +40,22 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 declare const tagName = 's-time-picker';
 export interface TimePickerJSXProps
   extends Pick<TimePickerProps, 'id' | 'value'> {
+  /**
+   * Callback when the user selects a time from the picker.
+   */
+  onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /**
+   * Callback when the user selects a time from the picker that is different to the current value.
+   */
+  onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /**
+   * Callback when the time picker is dismissed.
+   */
   onBlur?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /**
+   * Callback when the time picker is revealed.
+   */
   onFocus?: (event: CallbackEvent<typeof tagName>) => void | null;
-  onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
-  onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
 }
 declare global {
   interface HTMLElementTagNameMap {
@@ -52,8 +65,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: TimePickerJSXProps &
-        BaseElementPropsWithChildren<TimePickerJSXProps>;
+      [tagName]: IntrinsicElementProps<TimePickerJSXProps>;
     }
   }
 }

package/build/ts/surfaces/point-of-sale/components/components-shared.d.ts

@@ -1252,7 +1252,6 @@ export interface BaseBoxProps
 export interface BaseBoxPropsWithRole
   extends BaseBoxProps,
     AccessibilityRoleProps {}
-export interface BoxProps extends BaseBoxPropsWithRole, GlobalProps {}
 export interface ButtonBehaviorProps extends InteractionProps, FocusEventProps {
   /**
    * The behavior of the Button.
@@ -2281,6 +2280,45 @@ export interface BaseTypographyProps {
    */
   dir?: 'ltr' | 'rtl' | 'auto' | '';
 }
+export interface BlockTypographyProps {
+  /**
+   * Truncates the text content to the specified number of lines.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
+   *
+   * @default Infinity - no truncation is applied
+   */
+  lineClamp?: number;
+}
+export interface HeadingProps
+  extends GlobalProps,
+    AccessibilityVisibilityProps,
+    BlockTypographyProps {
+  /**
+   * The content of the Heading.
+   */
+  children?: ComponentChildren;
+  /**
+   * Sets the semantic meaning of the component’s content. When set,
+   * the role will be used by assistive technologies to help users
+   * navigate the page.
+   *
+   * - `heading`: defines the element as a heading to a page or section.
+   * - `presentation`: the heading level will be stripped,
+   * and will prevent the element’s implicit ARIA semantics from
+   * being exposed to the accessibility tree.
+   * - `none`: a synonym for the `presentation` role.
+   *
+   * @default 'heading'
+   *
+   * @implementation The `heading` role doesn't need to be applied if
+   * the host applies it for you; for example, an HTML host rendering
+   * an `<h2>` element should not apply the `heading` role.
+   */
+  accessibilityRole?:
+    | 'heading'
+    | ExtractStrict<AccessibilityRole, 'presentation' | 'none'>;
+}
 export interface IconProps
   extends GlobalProps,
     Pick<InteractionProps, 'interestFor'> {
@@ -2521,6 +2559,69 @@ export interface PageProps extends GlobalProps, ActionSlots {
    */
   inlineSize?: SizeKeyword;
 }
+export interface POSBlockProps
+  extends GlobalProps,
+    Pick<ActionSlots, 'secondaryActions'> {
+  /**
+   * The heading to display within the POSBlock.
+   *
+   * If not provided, the description of the extension will be used when a heading is appropriate.
+   */
+  heading?: string;
+  /**
+   * The content to display within the POSBlock.
+   */
+  children?: ComponentChildren;
+  /**
+   * The secondary actions to perform, provided as button or link type elements.
+   */
+  secondaryActions?: ComponentChildren;
+}
+export interface QRCodeProps extends GlobalProps {
+  /**
+   * Set the border of the QR code.
+   *
+   * `base`: applies border that is appropriate for the element.
+   * `none`: removes the border from the element.
+   *
+   * @default 'base'
+   */
+  border?: 'base' | 'none';
+  /**
+   * The content to be encoded in the QR code, which can be any string such as a URL, email address, plain text, etc.
+   * Specific string formatting can trigger actions on the user's device when scanned, like opening geolocation
+   * coordinates on a map, opening a preferred app or app store entry, preparing an email, text message, and more.
+   */
+  content?: string;
+  /**
+   * The displayed size of the QR code.
+   *
+   * `fill`: the QR code will takes up 100% of the available inline-size and maintain a 1:1 aspect ratio.
+   * `base`: the QR code will be displayed at its default size.
+   *
+   * @default 'base'
+   */
+  size?: 'base' | 'fill';
+  /**
+   * A label that describes the purpose or contents of the QR code. When set,
+   * it will be announced to users using assistive technologies and will
+   * provide more context about what the QR code may do when scanned.
+   *
+   * @default 'QR code' (translated to the user's locale)
+   */
+  accessibilityLabel?: string;
+  /**
+   * Invoked when the conversion of `content` to a QR code fails.
+   * If an error occurs, the QR code and its child elements will not be displayed.
+   */
+  onError?: (event: Event) => void;
+  /**
+   * URL of an image to be displayed in the center of the QR code.
+   * This is useful for branding or to indicate to the user what scanning the QR code will do.
+   * By default, no image is displayed.
+   */
+  logo?: string;
+}
 export interface ScrollEventProps {
   /**
    * Callback when the scroll position reaches any edge.