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

package/src/surfaces/checkout/components/PasswordField.d.ts

@@ -1,84 +0,0 @@
-/** VERSION: 0.0.0 **/
-/* eslint-disable import-x/extensions */
-/* eslint-disable @typescript-eslint/no-namespace */
-/* eslint-disable @typescript-eslint/member-ordering */
-/* eslint-disable line-comment-position */
-/* eslint-disable @typescript-eslint/unified-signatures */
-/* eslint-disable no-var */
-/* eslint-disable import-x/namespace */
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
-/// <reference lib="DOM" />
-import type {PasswordFieldProps$1} from './components-shared.d.ts';
-
-/**
- * Used when an element does not have children.
- */
-export interface BaseElementProps<TClass = HTMLElement> {
-    key?: preact.Key;
-    ref?: preact.Ref<TClass>;
-    slot?: Lowercase<string>;
-}
-export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
-    currentTarget: HTMLElementTagNameMap[TTagName];
-};
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
-}) | null;
-
-declare const tagName = "s-password-field";
-export interface PasswordFieldElementProps extends Pick<PasswordFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'maxLength'
-/** @todo: implement `minLength` */
- | 'name'
-/** @todo: implement `placeholder` */
- | 'readOnly' | 'required' | 'value'> {
-}
-export interface PasswordFieldEvents extends Pick<PasswordFieldProps$1, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'> {
-}
-export interface PasswordFieldElementEvents {
-    /**
-     * Callback when the element loses focus.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
-     */
-    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
-    /**
-     * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
-     */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
-    /**
-     * Callback when the element receives focus.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
-     */
-    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
-    /**
-     * Callback when the user makes any changes in the field.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
-     */
-    input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
-}
-export interface PasswordFieldElement extends PasswordFieldProps, Omit<HTMLElement, 'id' | 'inputMode' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
-    onblur: PasswordFieldEvents['onBlur'];
-    onchange: PasswordFieldEvents['onChange'];
-    onfocus: PasswordFieldEvents['onFocus'];
-    oninput: PasswordFieldEvents['onInput'];
-}
-export interface PasswordFieldProps extends PasswordFieldElementProps, PasswordFieldEvents {
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        [tagName]: PasswordFieldElement;
-    }
-}
-declare module 'preact' {
-    namespace createElement.JSX {
-        interface IntrinsicElements {
-            [tagName]: PasswordFieldProps & BaseElementProps<PasswordFieldElement>;
-        }
-    }
-}
-
-export type { PasswordFieldElement, PasswordFieldElementEvents, PasswordFieldElementProps, PasswordFieldEvents, PasswordFieldProps };

package/src/surfaces/checkout/components/PhoneField/examples/basic-phonefield.example.html

@@ -1,2 +0,0 @@
-<s-phone-field label="Phone number" placeholder="Enter your phone number">
-</s-phone-field>

package/src/surfaces/checkout/components/ProductThumbnail/examples/basic-productthumbnail.example.html

@@ -1,4 +0,0 @@
-<s-product-thumbnail
-  src="https://cdn.shopify.com/YOUR_IMAGE_HERE"
-  totalitems="1"
-></s-product-thumbnail>

package/src/surfaces/checkout/components/TextArea/examples/basic-textarea.example.html

@@ -1,5 +0,0 @@
-<s-text-area
-  label="Gift message"
-  value="Hope you enjoy this gift!"
-  rows="3"
-></s-text-area>

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

@@ -1,10 +0,0 @@
-import '@shopify/ui-extensions/preact';
-import {render} from 'preact';
-
-export default async () => {
-  render(<Extension />, document.body);
-};
-
-function Extension() {
-  return <s-avatar initials="EW" alt="Evan White" size="base" />;
-}

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

@@ -1,22 +0,0 @@
-import '@shopify/ui-extensions/preact';
-import {render} from 'preact';
-
-export default async () => {
-  render(<Extension />, document.body);
-};
-
-function Extension() {
-  return (
-    <s-button-group accessibilityLabel="Order actions">
-      <s-button slot="primary-action" variant="primary">
-        Pay now
-      </s-button>
-      <s-button slot="secondary-actions" variant="secondary">
-        Edit order
-      </s-button>
-      <s-button slot="secondary-actions" variant="secondary">
-        Cancel order
-      </s-button>
-    </s-button-group>
-  );
-}

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

@@ -1,17 +0,0 @@
-import '@shopify/ui-extensions/preact';
-import {render} from 'preact';
-
-export default async () => {
-  render(<Extension />, document.body);
-};
-
-function Extension() {
-  return (
-    <s-customer-account-action heading="Edit order">
-      Extension content
-      <s-button slot="primary-action" onClick={() => shopify.close()}>
-        Close
-      </s-button>
-    </s-customer-account-action>
-  );
-}

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

@@ -1,17 +0,0 @@
-import '@shopify/ui-extensions/preact';
-import {render} from 'preact';
-
-export default async () => {
-  render(<Extension />, document.body);
-};
-
-function Extension() {
-  return (
-    <s-image-group>
-      <s-image src="../assets/flower.jpg" />
-      <s-image src="../assets/flower.jpg" />
-      <s-image src="../assets/flower.jpg" />
-      <s-image src="../assets/flower.jpg" />
-    </s-image-group>
-  );
-}

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

@@ -1,24 +0,0 @@
-import '@shopify/ui-extensions/preact';
-import {render} from 'preact';
-
-export default async () => {
-  render(<Extension />, document.body);
-};
-
-function Extension() {
-  return (
-    <>
-      <s-button commandFor="order-actions-menu">Manage</s-button>
-      <s-menu
-        id="order-actions-menu"
-        accessibilityLabel="List of order actions"
-      >
-        <s-button onClick={() => console.log('Submit problem')}>
-          Submit problem
-        </s-button>
-        <s-button href="https://shopify.com">Request return</s-button>
-        <s-button tone="critical">Cancel order</s-button>
-      </s-menu>
-    </>
-  );
-}

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

@@ -1,37 +0,0 @@
-import '@shopify/ui-extensions/preact';
-import {render} from 'preact';
-
-export default async () => {
-  render(<Extension />, document.body);
-};
-
-function Extension() {
-  return (
-    <s-page heading="Order #1411" subheading="Confirmed Oct 5">
-      <s-button
-        slot="primary-action"
-        onClick={() => console.log('Primary action')}
-      >
-        Buy again
-      </s-button>
-      <s-button
-        slot="secondary-actions"
-        onClick={() => console.log('Secondary action 1')}
-      >
-        Secondary action 1
-      </s-button>
-      <s-button
-        slot="secondary-actions"
-        onClick={() => console.log('Secondary action 2')}
-      >
-        Secondary action 2
-      </s-button>
-      <s-button
-        slot="breadcrumb-actions"
-        accessibilitylabel="Button"
-        href="shopify://customer-account/orders"
-      />
-      Content
-    </s-page>
-  );
-}

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

@@ -1,23 +0,0 @@
-import '@shopify/ui-extensions/preact';
-import {render} from 'preact';
-
-export default async () => {
-  render(<Extension />, document.body);
-};
-
-function Extension() {
-  return (
-    <s-section heading="Rewards">
-      <s-button slot="primary-action" variant="primary">
-        Redeem
-      </s-button>
-      <s-button slot="secondary-action" variant="secondary">
-        My rewards
-      </s-button>
-      <s-paragraph>
-        Earn 10 points for every $1 spent. Redeem 100 points for $10 off your
-        next purchase.
-      </s-paragraph>
-    </s-section>
-  );
-}

package/src/surfaces/point-of-sale/components/Screen.d.ts

@@ -1,91 +0,0 @@
-/** VERSION: undefined **/
-/* eslint-disable import-x/extensions */
-/* eslint-disable @typescript-eslint/no-namespace */
-/* eslint-disable @typescript-eslint/member-ordering */
-/* eslint-disable line-comment-position */
-/* eslint-disable @typescript-eslint/unified-signatures */
-/* eslint-disable no-var */
-/* eslint-disable import-x/namespace */
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
-/// <reference lib="DOM" />
-import type {Key, Ref, ComponentChild} from './components-shared.d.ts';
-
-export type ComponentChildren = any;
-/**
- * Used when an element does not have children.
- */
-export interface BaseElementProps<TClass = HTMLElement> {
-  key?: Key;
-  ref?: Ref<TClass>;
-  slot?: Lowercase<string>;
-}
-/**
- * Used when an element has children.
- */
-export interface BaseElementPropsWithChildren<TClass = HTMLElement>
-  extends BaseElementProps<TClass> {
-  children?: ComponentChildren;
-}
-
-declare const tagName = 's-screen';
-export interface ScreenJSXProps {
-  /**
-   * Used to identify this screen as a destination in the navigation stack.
-   */
-  name: string;
-  /**
-   * The title of the screen which will be displayed on the UI.
-   */
-  title: string;
-  /**
-   * Displays a loading indicator when `true`.
-   * Set this to `true` when performing an asynchronous task, and then to false when the data becomes available to the UI.
-   */
-  isLoading?: boolean;
-  /**
-   * Dictates how the `Screen` will be presented when navigated to.
-   */
-  presentation?: ScreenPresentationProps;
-  /**
-   * Displays a secondary action button on the screen.
-   */
-  secondaryActions?: ComponentChild;
-  /**
-   * Triggered when the screen is navigated to.
-   */
-  onNavigate?: () => void;
-  /**
-   * Triggered when the user navigates back from this screen. Runs after screen is unmounted.
-   */
-  onNavigateBack?: () => void;
-  /**
-   * A callback that gets triggered when the navigation event completes and the screen receives the parameters.
-   */
-  onReceiveParams?: (params: any) => void;
-  children?: React.ReactNode;
-}
-/** Represents the presentation of a screen in the navigation stack.
- * @property `sheet` displays the screen from the bottom on `navigate` when `true`.
- */
-export interface ScreenPresentationProps {
-  /**
-   * Displays the screen from the bottom on `navigate` when `true`.
-   */
-  sheet?: boolean;
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    [tagName]: ScreenJSXProps;
-  }
-}
-declare module 'preact' {
-  namespace createElement.JSX {
-    interface IntrinsicElements {
-      [tagName]: Omit<ScreenJSXProps, 'secondaryActions'> &
-        BaseElementPropsWithChildren<Omit<ScreenJSXProps, 'secondaryActions'>>;
-    }
-  }
-}
-
-export {tagName};
-export type {ScreenJSXProps, ScreenPresentationProps};

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

@@ -1,76 +0,0 @@
-/** VERSION: 0.0.0 **/
-
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
-/// <reference lib="DOM" />
-
-export type CallbackEvent<
-  TTagName extends keyof HTMLElementTagNameMap,
-  TEvent extends Event = Event,
-> = TEvent & {
-  currentTarget: HTMLElementTagNameMap[TTagName];
-};
-
-export type CallbackEventListener<
-  TTagName extends keyof HTMLElementTagNameMap,
-  TEvent extends Event = Event,
-> =
-  | (EventListener & {
-      (event: CallbackEvent<TTagName, TEvent>): 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 type Styles = string;
-export type RenderImpl = Omit<ShadowRootInit, 'mode'> & {
-  ShadowRoot: (element: any) => preact.ComponentChild;
-  styles?: Styles;
-};
-
-/**
- * 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: typeof globalThis.HTMLElement;
-export declare abstract class PreactCustomElement extends BaseClass {
-  /** @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;
-}