From dc15766cc0c5248fccc3a4404ee9f0c933d963db Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Mon, 31 Aug 2026 23:42:15 -0400 Subject: [PATCH 1/8] Add POS List web component types Assisted-By: devx/46b3a0a9-3b3c-4c53-a0c1-759bfb326ea8 --- .changeset/pos-list-component.md | 5 + .../surfaces/point-of-sale/components.d.ts | 202 ++++++++++++++++++ .../point-of-sale/components/POSList.d.ts | 194 +++++++++++++++++ .../components/POSList/examples/default.jsx | 28 +++ .../POSList/examples/incremental-loading.jsx | 5 + .../components/targets/StandardComponents.ts | 1 + 6 files changed, 435 insertions(+) create mode 100644 .changeset/pos-list-component.md create mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts create mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx create mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/incremental-loading.jsx diff --git a/.changeset/pos-list-component.md b/.changeset/pos-list-component.md new file mode 100644 index 0000000000..bfdb88388b --- /dev/null +++ b/.changeset/pos-list-component.md @@ -0,0 +1,5 @@ +--- +'@shopify/ui-extensions': minor +--- + +Add the `s-pos-list` web component for structured, incrementally loaded POS lists. diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts index 3b0afd29bc..26e20c5cf4 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts @@ -5416,6 +5416,140 @@ declare module 'preact' { } } +declare const posListTagName = 's-pos-list'; +type POSListImageDisplayStrategy = 'auto' | 'always' | 'never'; +type POSListRowSubtitleColor = + | 'neutral' + | 'subdued' + | 'disabled' + | 'warning' + | 'critical' + | 'success' + | 'interactive' + | 'highlight'; +type POSListRowSubtitle = + | string + | { + /** The subtitle text. */ + content: string; + /** The semantic color applied to the subtitle. */ + color?: POSListRowSubtitleColor; + }; +type POSListBadge = { + /** The badge text. */ + text: string; + /** + * The semantic appearance of the badge. + * + * @default 'neutral' + */ + tone?: 'neutral' | 'critical' | 'warning' | 'success' | 'highlight'; +}; +type POSListRowImage = { + /** The URL of the image displayed at the start of the row. */ + src?: string; + /** A numeric badge displayed over the image. */ + badge?: number; +}; +type POSListToggleSwitch = { + /** + * The current state of the toggle switch. + * + * @default false + */ + checked?: boolean; + /** + * Whether the toggle switch prevents interaction. + * + * @default false + */ + disabled?: boolean; +}; +type POSListRowStart = { + /** The primary text for the row. */ + label: string; + /** Up to three lines of supporting text displayed below the label. */ + subtitles?: [POSListRowSubtitle, POSListRowSubtitle?, POSListRowSubtitle?]; + /** Status or category badges displayed with the row content. */ + badges?: POSListBadge[]; + /** The image displayed at the start of the row. */ + image?: POSListRowImage; +}; +type POSListRowEnd = { + /** Supporting text displayed at the end of the row. */ + label?: string; + /** Whether to display a chevron at the end of the row. */ + showChevron?: boolean; + /** A toggle switch displayed at the end of the row. */ + toggleSwitch?: POSListToggleSwitch; +}; +type POSListRow = { + /** A unique identifier for the row. */ + id: string; + /** The primary content displayed at the start of the row. */ + start: POSListRowStart; + /** Optional content displayed at the end of the row. */ + end?: POSListRowEnd; +}; +type POSListClickEvent = CallbackEvent & { + /** The unique identifier of the activated row. */ + rowId: string; +}; +/** + * Displays structured rows with text, badges, images, and optional trailing content. + * + * @publicDocs + */ +interface POSListJSXProps { + /** A unique identifier for the element. */ + id?: string; + /** + * The rows displayed in the list. + * + * @default [] + */ + rows?: POSListRow[]; + /** + * Event handler invoked when a row is activated. + * + * When provided, every row is interactive. The activated row is identified by `event.rowId`. + */ + onClick?: ((event: POSListClickEvent) => void) | null; + /** + * Controls whether rows reserve space for images. + * + * - `auto`: Displays images or placeholders when a row includes an image source. + * - `always`: Displays images or placeholders for every row. + * - `never`: Displays rows without images or image placeholders. + * + * @default 'auto' + */ + imageDisplayStrategy?: POSListImageDisplayStrategy; + /** + * Whether additional rows are being loaded. + * + * @default false + */ + loadingMore?: boolean; + /** Callback when more rows should be loaded. */ + onLoadMore?: ((event: CallbackEvent) => void) | null; + /** Content displayed before the rows as part of the list's scrollable content. */ + header?: ComponentChild; +} +type POSListElementProps = Omit; +declare global { + interface HTMLElementTagNameMap { + [posListTagName]: HtmlElementTagNameProps; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [posListTagName]: IntrinsicElementProps; + } + } +} + export type { BadgeJSXProps, BannerJSXProps, @@ -5438,6 +5572,7 @@ export type { ModalJSXProps, NumberFieldJSXProps, PageJSXProps, + POSListJSXProps, PosBlockJSXProps, QrCodeJSXProps, ScrollBoxJSXProps, @@ -5458,6 +5593,58 @@ export type { TimePickerJSXProps, }; +/** + * Events emitted by the POS list. + * @publicDocs + */ +interface POSListEvents { + /** + * Fired when a row is activated. + * + * The activated row is identified by `event.rowId`. + */ + click?: (event: POSListClickEvent) => void; + /** Fired when more rows should be loaded. */ + loadmore?: (event: CallbackEvent) => void; +} + +/** + * Content slots for the POS list. + * @publicDocs + */ +interface POSListSlots { + /** Content displayed before the rows as part of the list's scrollable content. */ + header?: HTMLElement; +} + +/** + * Displays structured rows with text, badges, images, and optional trailing content. + * @publicDocs + */ +interface POSList { + /** A unique identifier for the element. */ + id?: string; + /** + * The rows displayed in the list. + * @default [] + */ + rows?: POSListRow[]; + /** + * Controls whether rows reserve space for images. + * + * - `auto`: Displays images or placeholders when a row includes an image source. + * - `always`: Displays images or placeholders for every row. + * - `never`: Displays rows without images or image placeholders. + * @default 'auto' + */ + imageDisplayStrategy?: POSListImageDisplayStrategy; + /** + * Whether additional rows are being loaded. + * @default false + */ + loadingMore?: boolean; +} + /** * The link component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events). * @publicDocs @@ -7771,3 +7958,18 @@ declare global { } } } + +declare module 'react' { + namespace JSX { + interface IntrinsicElements { + [posListTagName]: IntrinsicElementProps; + } + } +} +declare global { + namespace JSX { + interface IntrinsicElements { + [posListTagName]: IntrinsicElementProps; + } + } +} diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts new file mode 100644 index 0000000000..7c43bdec7f --- /dev/null +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts @@ -0,0 +1,194 @@ +/** 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 +/// +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 { + key?: Key; + ref?: Ref; + slot?: Lowercase; +} +/** + * Used when an element has children. + */ +export interface BaseElementPropsWithChildren + extends BaseElementProps { + children?: ComponentChildren; +} +export type IntrinsicElementProps = T & + BaseElementPropsWithChildren; +export type HtmlElementTagNameProps = T & HTMLElement; +export type ElementForTag = + T extends keyof HTMLElementTagNameMap + ? HTMLElementTagNameMap[T] + : HTMLElement; +export interface CallbackEvent { + currentTarget: ElementForTag; + bubbles?: boolean; + cancelable?: boolean; + composed?: boolean; + detail?: any; + eventPhase: number; + target: ElementForTag | null; +} + +declare const tagName = 's-pos-list'; +export type POSListImageDisplayStrategy = 'auto' | 'always' | 'never'; +export type POSListRowSubtitleColor = + | 'neutral' + | 'subdued' + | 'disabled' + | 'warning' + | 'critical' + | 'success' + | 'interactive' + | 'highlight'; +export type POSListRowSubtitle = + | string + | { + /** The subtitle text. */ + content: string; + /** The semantic color applied to the subtitle. */ + color?: POSListRowSubtitleColor; + }; +export type POSListBadge = { + /** The badge text. */ + text: string; + /** + * The semantic appearance of the badge. + * + * @default 'neutral' + */ + tone?: 'neutral' | 'critical' | 'warning' | 'success' | 'highlight'; +}; +export type POSListRowImage = { + /** The URL of the image displayed at the start of the row. */ + src?: string; + /** A numeric badge displayed over the image. */ + badge?: number; +}; +export type POSListToggleSwitch = { + /** + * The current state of the toggle switch. + * + * @default false + */ + checked?: boolean; + /** + * Whether the toggle switch prevents interaction. + * + * @default false + */ + disabled?: boolean; +}; +export type POSListRowStart = { + /** The primary text for the row. */ + label: string; + /** Up to three lines of supporting text displayed below the label. */ + subtitles?: [POSListRowSubtitle, POSListRowSubtitle?, POSListRowSubtitle?]; + /** Status or category badges displayed with the row content. */ + badges?: POSListBadge[]; + /** The image displayed at the start of the row. */ + image?: POSListRowImage; +}; +export type POSListRowEnd = { + /** Supporting text displayed at the end of the row. */ + label?: string; + /** Whether to display a chevron at the end of the row. */ + showChevron?: boolean; + /** A toggle switch displayed at the end of the row. */ + toggleSwitch?: POSListToggleSwitch; +}; +export type POSListRow = { + /** A unique identifier for the row. */ + id: string; + /** The primary content displayed at the start of the row. */ + start: POSListRowStart; + /** Optional content displayed at the end of the row. */ + end?: POSListRowEnd; +}; +export type POSListClickEvent = CallbackEvent & { + /** The unique identifier of the activated row. */ + rowId: string; +}; +/** + * Displays structured rows with text, badges, images, and optional trailing content. + * + * @publicDocs + */ +export interface POSListJSXProps { + /** A unique identifier for the element. */ + id?: string; + /** + * The rows displayed in the list. + * + * @default [] + */ + rows?: POSListRow[]; + /** + * Event handler invoked when a row is activated. + * + * When provided, every row is interactive. The activated row is identified by `event.rowId`. + */ + onClick?: ((event: POSListClickEvent) => void) | null; + /** + * Controls whether rows reserve space for images. + * + * - `auto`: Displays images or placeholders when a row includes an image source. + * - `always`: Displays images or placeholders for every row. + * - `never`: Displays rows without images or image placeholders. + * + * @default 'auto' + */ + imageDisplayStrategy?: POSListImageDisplayStrategy; + /** + * Whether additional rows are being loaded. + * + * @default false + */ + loadingMore?: boolean; + /** Callback when more rows should be loaded. */ + onLoadMore?: ((event: CallbackEvent) => void) | null; + /** Content displayed before the rows as part of the list's scrollable content. */ + header?: ComponentChild; +} +export type ElementProps = Omit; +declare global { + interface HTMLElementTagNameMap { + [tagName]: HtmlElementTagNameProps; + } +} +declare module 'preact' { + namespace createElement.JSX { + interface IntrinsicElements { + [tagName]: IntrinsicElementProps; + } + } +} + +export {tagName}; +export type { + ElementProps, + POSListBadge, + POSListClickEvent, + POSListImageDisplayStrategy, + POSListJSXProps, + POSListRow, + POSListRowEnd, + POSListRowImage, + POSListRowStart, + POSListRowSubtitle, + POSListRowSubtitleColor, + POSListToggleSwitch, +}; diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx new file mode 100644 index 0000000000..5cc089c2bd --- /dev/null +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx @@ -0,0 +1,28 @@ + console.log('Selected row:', event.rowId)} +> + Products +; diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/incremental-loading.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/incremental-loading.jsx new file mode 100644 index 0000000000..bb7649c0d9 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/incremental-loading.jsx @@ -0,0 +1,5 @@ + loadMoreProducts()} +/>; diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/targets/StandardComponents.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/targets/StandardComponents.ts index 71a74c8f59..722f51f88a 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/targets/StandardComponents.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/targets/StandardComponents.ts @@ -25,6 +25,7 @@ export type StandardComponents = | 'Page' | 'POSBlock' | 'PosBlock' // Case is important in 2025-10 + | 'POSList' | 'Route' | 'Router' | 'ScrollBox' From 67ca32ca0d2497084b6bd6b2fd5a863b3f5a704f Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Mon, 31 Aug 2026 23:58:20 -0400 Subject: [PATCH 2/8] Add POS List generated docs data Assisted-By: devx/46b3a0a9-3b3c-4c53-a0c1-759bfb326ea8 --- .../2026-10/generated_docs_data_v2.json | 862 +++++++++++++++++- .../pos_ui_extensions/2026-10/targets.json | 20 + 2 files changed, 835 insertions(+), 47 deletions(-) diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json index a8efafa3a2..7570b4e3fb 100644 --- a/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json @@ -4572,86 +4572,776 @@ "value": "interface TabListJSXProps extends Pick {\n children?: ComponentChildren;\n}" } }, - "LinkEvents": { + "POSListJSXProps": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "name": "POSListJSXProps", + "description": "Displays structured rows with text, badges, images, and optional trailing content.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "header", + "value": "ComponentChild", + "description": "Content displayed before the rows as part of the list's scrollable content.", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "imageDisplayStrategy", + "value": "POSListImageDisplayStrategy", + "description": "Controls whether rows reserve space for images.\n\n- `auto`: Displays images or placeholders when a row includes an image source.\n- `always`: Displays images or placeholders for every row.\n- `never`: Displays rows without images or image placeholders.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "loadingMore", + "value": "boolean", + "description": "Whether additional rows are being loaded.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "onClick", + "value": "((event: POSListClickEvent) => void) | null", + "description": "Event handler invoked when a row is activated.\n\nWhen provided, every row is interactive. The activated row is identified by `event.rowId`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "onLoadMore", + "value": "((event: CallbackEvent) => void) | null", + "description": "Callback when more rows should be loaded.", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "rows", + "value": "POSListRow[]", + "description": "The rows displayed in the list.", + "isOptional": true, + "defaultValue": "[]" + } + ], + "value": "interface POSListJSXProps {\n /** A unique identifier for the element. */\n id?: string;\n /**\n * The rows displayed in the list.\n *\n * @default []\n */\n rows?: POSListRow[];\n /**\n * Event handler invoked when a row is activated.\n *\n * When provided, every row is interactive. The activated row is identified by `event.rowId`.\n */\n onClick?: ((event: POSListClickEvent) => void) | null;\n /**\n * Controls whether rows reserve space for images.\n *\n * - `auto`: Displays images or placeholders when a row includes an image source.\n * - `always`: Displays images or placeholders for every row.\n * - `never`: Displays rows without images or image placeholders.\n *\n * @default 'auto'\n */\n imageDisplayStrategy?: POSListImageDisplayStrategy;\n /**\n * Whether additional rows are being loaded.\n *\n * @default false\n */\n loadingMore?: boolean;\n /** Callback when more rows should be loaded. */\n onLoadMore?: ((event: CallbackEvent) => void) | null;\n /** Content displayed before the rows as part of the list's scrollable content. */\n header?: ComponentChild;\n}" + } + }, + "ComponentChild": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ComponentChild", + "value": "VNode | object | string | number | bigint | boolean | null | undefined", + "description": "" + } + }, + "VNode": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "name": "VNode", + "description": "", + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "endTime", + "value": "number", + "description": "The time that the rendering of this `vnode` was completed. Will only be set when the devtools are attached. Default value: `-1`", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "key", + "value": "Key", + "description": "" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "props", + "value": "P & { children: ComponentChildren$1; }", + "description": "" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "ref", + "value": "Ref | null", + "description": "ref is not guaranteed by React.ReactElement, for compatibility reasons with popular react libs we define it as optional too", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "startTime", + "value": "number", + "description": "The time this `vnode` started rendering. Will only be set when the devtools are attached. Default value: `0`", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "ComponentType

| string", + "description": "" + } + ], + "value": "export interface VNode

{\n type: ComponentType

| string;\n props: P & {\n children: ComponentChildren$1;\n };\n key: Key;\n /**\n * ref is not guaranteed by React.ReactElement, for compatibility reasons\n * with popular react libs we define it as optional too\n */\n ref?: Ref | null;\n /**\n * The time this `vnode` started rendering. Will only be set when\n * the devtools are attached.\n * Default value: `0`\n */\n startTime?: number;\n /**\n * The time that the rendering of this `vnode` was completed. Will only be\n * set when the devtools are attached.\n * Default value: `-1`\n */\n endTime?: number;\n}" + } + }, + "Key": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "Key", + "value": "string | number | any", + "description": "" + } + }, + "Ref": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "Ref", + "value": "RefObject | RefCallback | null", + "description": "" + } + }, + "RefObject": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "RefObject", + "value": "{\n current: T | null;\n}", + "description": "", + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "current", + "value": "T | null", + "description": "" + } + ] + } + }, + "RefCallback": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "name": "RefCallback", + "description": "", + "params": [ + { + "name": "instance", + "description": "", + "value": "T", + "filePath": "src/surfaces/point-of-sale/components.ts" + } + ], + "returns": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "description": "", + "name": "void | (() => void)", + "value": "void | (() => void)" + }, + "value": "(instance: T | null) => void | (() => void)" + } + }, + "ComponentType": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ComponentType", + "value": "ComponentClass

| FunctionComponent

", + "description": "" + } + }, + "ComponentClass": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "name": "ComponentClass", + "description": "", + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "contextType", + "value": "Context", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "defaultProps", + "value": "Partial

", + "description": "Make all properties in T optional", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "displayName", + "value": "string", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "MethodSignature", + "name": "getDerivedStateFromError", + "value": "(error: any) => Partial", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "MethodSignature", + "name": "getDerivedStateFromProps", + "value": "(props: Readonly

, state: Readonly) => Partial", + "description": "", + "isOptional": true + } + ], + "value": "export interface ComponentClass

{\n new (props: P, context?: any): Component;\n displayName?: string;\n defaultProps?: Partial

;\n contextType?: Context;\n getDerivedStateFromProps?(\n props: Readonly

,\n state: Readonly,\n ): Partial | null;\n getDerivedStateFromError?(error: any): Partial | null;\n}" + } + }, + "Context": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "name": "Context", + "description": "", + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "Consumer", + "value": "Consumer", + "description": "" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "defaultProps", + "value": "Partial

| undefined", + "description": "Make all properties in T optional", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "displayName", + "value": "string", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "Provider", + "value": "Provider", + "description": "" + } + ], + "value": "export interface Context extends Provider {\n Consumer: Consumer;\n Provider: Provider;\n displayName?: string;\n}" + } + }, + "Consumer": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "name": "Consumer", + "description": "", + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "defaultProps", + "value": "Partial

| undefined", + "description": "Make all properties in T optional", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "displayName", + "value": "string", + "description": "", + "isOptional": true + } + ], + "value": "export interface Consumer\n extends FunctionComponent<{\n children: (value: T) => ComponentChildren$1;\n }> {}" + } + }, + "Provider": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "name": "Provider", + "description": "", + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "defaultProps", + "value": "Partial

| undefined", + "description": "Make all properties in T optional", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "displayName", + "value": "string", + "description": "", + "isOptional": true + } + ], + "value": "export interface Provider\n extends FunctionComponent<{\n value: T;\n children?: ComponentChildren$1;\n }> {}" + } + }, + "FunctionComponent": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "name": "FunctionComponent", + "description": "", + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "defaultProps", + "value": "Partial

| undefined", + "description": "Make all properties in T optional", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "displayName", + "value": "string", + "description": "", + "isOptional": true + } + ], + "value": "export interface FunctionComponent

{\n (props: RenderableProps

, context?: any): ComponentChildren$1;\n displayName?: string;\n defaultProps?: Partial

| undefined;\n}" + } + }, + "POSListImageDisplayStrategy": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "POSListImageDisplayStrategy", + "value": "'auto' | 'always' | 'never'", + "description": "" + } + }, + "POSListClickEvent": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "POSListClickEvent", + "value": "CallbackEvent & {\n /** The unique identifier of the activated row. */\n rowId: string;\n}", + "description": "" + } + }, + "CallbackEvent": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "name": "CallbackEvent", + "description": "", + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "bubbles", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "cancelable", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "composed", + "value": "boolean", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "currentTarget", + "value": "HTMLElementTagNameMap[T]", + "description": "" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "detail", + "value": "any", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "eventPhase", + "value": "number", + "description": "" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "target", + "value": "HTMLElementTagNameMap[T] | null", + "description": "" + } + ], + "value": "interface CallbackEvent {\n currentTarget: HTMLElementTagNameMap[T];\n bubbles?: boolean;\n cancelable?: boolean;\n composed?: boolean;\n detail?: any;\n eventPhase: number;\n target: HTMLElementTagNameMap[T] | null;\n}" + } + }, + "POSListRow": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "POSListRow", + "value": "{\n /** A unique identifier for the row. */\n id: string;\n /** The primary content displayed at the start of the row. */\n start: POSListRowStart;\n /** Optional content displayed at the end of the row. */\n end?: POSListRowEnd;\n}", + "description": "", + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "end", + "value": "POSListRowEnd", + "description": "Optional content displayed at the end of the row.", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the row." + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "start", + "value": "POSListRowStart", + "description": "The primary content displayed at the start of the row." + } + ] + } + }, + "POSListRowEnd": { "src/surfaces/point-of-sale/components.ts": { "filePath": "src/surfaces/point-of-sale/components.ts", - "name": "LinkEvents", - "description": "The link component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, + "syntaxKind": "TypeAliasDeclaration", + "name": "POSListRowEnd", + "value": "{\n /** Supporting text displayed at the end of the row. */\n label?: string;\n /** Whether to display a chevron at the end of the row. */\n showChevron?: boolean;\n /** A toggle switch displayed at the end of the row. */\n toggleSwitch?: POSListToggleSwitch;\n}", + "description": "", "members": [ { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", - "name": "click", - "value": "(event: CallbackEvent<\"s-link\">) => void", - "description": "Called when the link is activated.", + "name": "label", + "value": "string", + "description": "Supporting text displayed at the end of the row.", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "showChevron", + "value": "boolean", + "description": "Whether to display a chevron at the end of the row.", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "toggleSwitch", + "value": "POSListToggleSwitch", + "description": "A toggle switch displayed at the end of the row.", "isOptional": true } - ], - "value": "interface LinkEvents {\n /** Called when the link is activated. */\n click?: (event: CallbackEvent) => void;\n}" + ] } }, - "CallbackEvent": { + "POSListToggleSwitch": { "src/surfaces/point-of-sale/components.ts": { "filePath": "src/surfaces/point-of-sale/components.ts", - "name": "CallbackEvent", + "syntaxKind": "TypeAliasDeclaration", + "name": "POSListToggleSwitch", + "value": "{\n /**\n * The current state of the toggle switch.\n *\n * @default false\n */\n checked?: boolean;\n /**\n * Whether the toggle switch prevents interaction.\n *\n * @default false\n */\n disabled?: boolean;\n}", "description": "", "members": [ { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", - "name": "bubbles", + "name": "checked", "value": "boolean", - "description": "", - "isOptional": true + "description": "The current state of the toggle switch.", + "isOptional": true, + "defaultValue": "false" }, { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", - "name": "cancelable", + "name": "disabled", "value": "boolean", - "description": "", + "description": "Whether the toggle switch prevents interaction.", + "isOptional": true, + "defaultValue": "false" + } + ] + } + }, + "POSListRowStart": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "POSListRowStart", + "value": "{\n /** The primary text for the row. */\n label: string;\n /** Up to three lines of supporting text displayed below the label. */\n subtitles?: [POSListRowSubtitle, POSListRowSubtitle?, POSListRowSubtitle?];\n /** Status or category badges displayed with the row content. */\n badges?: POSListBadge[];\n /** The image displayed at the start of the row. */\n image?: POSListRowImage;\n}", + "description": "", + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "badges", + "value": "POSListBadge[]", + "description": "Status or category badges displayed with the row content.", "isOptional": true }, { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", - "name": "composed", - "value": "boolean", - "description": "", + "name": "image", + "value": "POSListRowImage", + "description": "The image displayed at the start of the row.", "isOptional": true }, { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", - "name": "currentTarget", - "value": "HTMLElementTagNameMap[T]", - "description": "" + "name": "label", + "value": "string", + "description": "The primary text for the row." }, { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", - "name": "detail", - "value": "any", - "description": "", + "name": "subtitles", + "value": "[POSListRowSubtitle, POSListRowSubtitle?, POSListRowSubtitle?]", + "description": "Up to three lines of supporting text displayed below the label.", "isOptional": true + } + ] + } + }, + "POSListBadge": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "POSListBadge", + "value": "{\n /** The badge text. */\n text: string;\n /**\n * The semantic appearance of the badge.\n *\n * @default 'neutral'\n */\n tone?: 'neutral' | 'critical' | 'warning' | 'success' | 'highlight';\n}", + "description": "", + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "text", + "value": "string", + "description": "The badge text." }, { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", - "name": "eventPhase", + "name": "tone", + "value": "'neutral' | 'critical' | 'warning' | 'success' | 'highlight'", + "description": "The semantic appearance of the badge.", + "isOptional": true, + "defaultValue": "'neutral'" + } + ] + } + }, + "POSListRowImage": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "POSListRowImage", + "value": "{\n /** The URL of the image displayed at the start of the row. */\n src?: string;\n /** A numeric badge displayed over the image. */\n badge?: number;\n}", + "description": "", + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "badge", "value": "number", - "description": "" + "description": "A numeric badge displayed over the image.", + "isOptional": true }, { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", - "name": "target", - "value": "HTMLElementTagNameMap[T] | null", - "description": "" + "name": "src", + "value": "string", + "description": "The URL of the image displayed at the start of the row.", + "isOptional": true + } + ] + } + }, + "POSListRowSubtitle": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "POSListRowSubtitle", + "value": "string | {\n /** The subtitle text. */\n content: string;\n /** The semantic color applied to the subtitle. */\n color?: POSListRowSubtitleColor;\n }", + "description": "" + } + }, + "POSListRowSubtitleColor": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "POSListRowSubtitleColor", + "value": "'neutral' | 'subdued' | 'disabled' | 'warning' | 'critical' | 'success' | 'interactive' | 'highlight'", + "description": "" + } + }, + "POSListEvents": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "name": "POSListEvents", + "description": "Events emitted by the POS list.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "click", + "value": "(event: POSListClickEvent) => void", + "description": "Fired when a row is activated.\n\nThe activated row is identified by `event.rowId`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "loadmore", + "value": "(event: CallbackEvent<\"s-pos-list\">) => void", + "description": "Fired when more rows should be loaded.", + "isOptional": true } ], - "value": "interface CallbackEvent {\n currentTarget: HTMLElementTagNameMap[T];\n bubbles?: boolean;\n cancelable?: boolean;\n composed?: boolean;\n detail?: any;\n eventPhase: number;\n target: HTMLElementTagNameMap[T] | null;\n}" + "value": "interface POSListEvents {\n /**\n * Fired when a row is activated.\n *\n * The activated row is identified by `event.rowId`.\n */\n click?: (event: POSListClickEvent) => void;\n /** Fired when more rows should be loaded. */\n loadmore?: (event: CallbackEvent) => void;\n}" + } + }, + "POSListSlots": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "name": "POSListSlots", + "description": "Content slots for the POS list.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "header", + "value": "HTMLElement", + "description": "Content displayed before the rows as part of the list's scrollable content.", + "isOptional": true + } + ], + "value": "interface POSListSlots {\n /** Content displayed before the rows as part of the list's scrollable content. */\n header?: HTMLElement;\n}" + } + }, + "POSList": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "name": "POSList", + "description": "Displays structured rows with text, badges, images, and optional trailing content.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "imageDisplayStrategy", + "value": "POSListImageDisplayStrategy", + "description": "Controls whether rows reserve space for images.\n\n- `auto`: Displays images or placeholders when a row includes an image source.\n- `always`: Displays images or placeholders for every row.\n- `never`: Displays rows without images or image placeholders.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "loadingMore", + "value": "boolean", + "description": "Whether additional rows are being loaded.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "rows", + "value": "POSListRow[]", + "description": "The rows displayed in the list.", + "isOptional": true, + "defaultValue": "[]" + } + ], + "value": "interface POSList {\n /** A unique identifier for the element. */\n id?: string;\n /**\n * The rows displayed in the list.\n * @default []\n */\n rows?: POSListRow[];\n /**\n * Controls whether rows reserve space for images.\n *\n * - `auto`: Displays images or placeholders when a row includes an image source.\n * - `always`: Displays images or placeholders for every row.\n * - `never`: Displays rows without images or image placeholders.\n * @default 'auto'\n */\n imageDisplayStrategy?: POSListImageDisplayStrategy;\n /**\n * Whether additional rows are being loaded.\n * @default false\n */\n loadingMore?: boolean;\n}" + } + }, + "LinkEvents": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "name": "LinkEvents", + "description": "The link component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "click", + "value": "(event: CallbackEvent<\"s-link\">) => void", + "description": "Called when the link is activated.", + "isOptional": true + } + ], + "value": "interface LinkEvents {\n /** Called when the link is activated. */\n click?: (event: CallbackEvent) => void;\n}" } }, "Link": { @@ -7738,7 +8428,7 @@ "filePath": "src/surfaces/point-of-sale/components/targets/StandardComponents.ts", "syntaxKind": "TypeAliasDeclaration", "name": "StandardComponents", - "value": "'Badge' | 'Banner' | 'Box' | 'Button' | 'Choice' | 'ChoiceList' | 'Clickable' | 'DateField' | 'DatePicker' | 'DateSpinner' | 'Divider' | 'EmailField' | 'Embed' | 'EmptyState' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'Modal' | 'NumberField' | 'Page' | 'POSBlock' | 'PosBlock' | 'Route' | 'Router' | 'ScrollBox' | 'SearchField' | 'Section' | 'Spinner' | 'Stack' | 'Switch' | 'Tab' | 'TabList' | 'TabPanel' | 'Tabs' | 'Text' | 'TextArea' | 'TextField' | 'Tile' | 'TimeField' | 'TimePicker'", + "value": "'Badge' | 'Banner' | 'Box' | 'Button' | 'Choice' | 'ChoiceList' | 'Clickable' | 'DateField' | 'DatePicker' | 'DateSpinner' | 'Divider' | 'EmailField' | 'Embed' | 'EmptyState' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'Modal' | 'NumberField' | 'Page' | 'POSBlock' | 'PosBlock' | 'POSList' | 'Route' | 'Router' | 'ScrollBox' | 'SearchField' | 'Section' | 'Spinner' | 'Stack' | 'Switch' | 'Tab' | 'TabList' | 'TabPanel' | 'Tabs' | 'Text' | 'TextArea' | 'TextField' | 'Tile' | 'TimeField' | 'TimePicker'", "description": "", "isPublicDocs": true } @@ -7748,7 +8438,7 @@ "filePath": "src/surfaces/point-of-sale/components/targets/BasicComponents.ts", "syntaxKind": "TypeAliasDeclaration", "name": "BasicComponents", - "value": "'Badge' | 'Banner' | 'Box' | 'Button' | 'Choice' | 'ChoiceList' | 'Clickable' | 'DateField' | 'DatePicker' | 'DateSpinner' | 'Divider' | 'EmailField' | 'Embed' | 'EmptyState' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'Modal' | 'NumberField' | 'Page' | 'POSBlock' | 'PosBlock' | 'Route' | 'Router' | 'ScrollBox' | 'SearchField' | 'Section' | 'Spinner' | 'Stack' | 'Switch' | 'Tab' | 'TabList' | 'TabPanel' | 'Tabs' | 'Text' | 'TextArea' | 'TextField' | 'TimeField' | 'TimePicker'", + "value": "'Badge' | 'Banner' | 'Box' | 'Button' | 'Choice' | 'ChoiceList' | 'Clickable' | 'DateField' | 'DatePicker' | 'DateSpinner' | 'Divider' | 'EmailField' | 'Embed' | 'EmptyState' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'Modal' | 'NumberField' | 'Page' | 'POSBlock' | 'PosBlock' | 'POSList' | 'Route' | 'Router' | 'ScrollBox' | 'SearchField' | 'Section' | 'Spinner' | 'Stack' | 'Switch' | 'Tab' | 'TabList' | 'TabPanel' | 'Tabs' | 'Text' | 'TextArea' | 'TextField' | 'TimeField' | 'TimePicker'", "description": "", "isPublicDocs": true } @@ -9317,7 +10007,7 @@ "syntaxKind": "PropertySignature", "name": "paymentvalidations", "value": "PaymentValidationsEvent", - "description": "Dispatched when staff selects a payment method on the payments screen." + "description": "Dispatched when a tender is confirmed but not yet committed — after the amount is entered, before the payment is recorded. One event per tender attempt; split payments dispatch one event per tender, each carrying its own amount." } ], "value": "export interface ShopifyInterceptMap {\n [POS_INTERCEPT_NAMES.CART_VALIDATIONS]: CartValidationsEvent;\n [POS_INTERCEPT_NAMES.PAYMENT_VALIDATIONS]: PaymentValidationsEvent;\n}" @@ -9502,7 +10192,7 @@ "src/surfaces/point-of-sale/events.ts": { "filePath": "src/surfaces/point-of-sale/events.ts", "name": "PaymentValidationsEvent", - "description": "Dispatched when staff selects a payment method on the payments screen.", + "description": "Dispatched when a tender is confirmed but not yet committed — after the amount is entered, before the payment is recorded. One event per tender attempt; split payments dispatch one event per tender, each carrying its own amount.", "members": [ { "filePath": "src/surfaces/point-of-sale/events.ts", @@ -9730,10 +10420,10 @@ "returns": { "filePath": "src/surfaces/point-of-sale/events.ts", "description": "", - "name": "InterceptResult", - "value": "InterceptResult" + "name": "InterceptResult>", + "value": "InterceptResult>" }, - "value": "(\n event: TEvent,\n) => InterceptResult" + "value": "(\n event: TEvent,\n) => InterceptResult>" } }, "InterceptResult": { @@ -9746,11 +10436,11 @@ "filePath": "src/surfaces/point-of-sale/events.ts", "syntaxKind": "PropertySignature", "name": "operations", - "value": "Operation[]", + "value": "Operation[]", "description": "" } ], - "value": "export interface InterceptResult {\n operations: Operation[];\n}" + "value": "export interface InterceptResult<\n TTarget extends ValidationTarget = ValidationTarget,\n> {\n operations: Operation[];\n}" } }, "Operation": { @@ -9763,12 +10453,12 @@ "filePath": "src/surfaces/point-of-sale/events.ts", "syntaxKind": "PropertySignature", "name": "validationAdd", - "value": "ValidationAdd", - "description": "Adds a validation to the workflow being intercepted.", + "value": "ValidationAdd", + "description": "", "isOptional": true } ], - "value": "export interface Operation {\n validationAdd?: ValidationAdd;\n}" + "value": "export interface Operation<\n TTarget extends ValidationTarget = ValidationTarget,\n> {\n validationAdd?: ValidationAdd;\n}" } }, "ValidationAdd": { @@ -9782,7 +10472,7 @@ "syntaxKind": "PropertySignature", "name": "handle", "value": "string", - "description": "Stable identifier for this validation." + "description": "Stable identifier for this validation. Handles are namespaced per extension and may repeat across targets: the same handle on two line items is two validations." }, { "filePath": "src/surfaces/point-of-sale/events.ts", @@ -9795,12 +10485,12 @@ "filePath": "src/surfaces/point-of-sale/events.ts", "syntaxKind": "PropertySignature", "name": "target", - "value": "string", - "description": "JSON-path locator for where the validation applies.", + "value": "TTarget", + "description": "Locates the data the validation applies to; the host decides where it renders. Omitted or unrecognized targets fall back to the event's root scope (`$.cart` / `$.payment`) — the validation still applies, rendered less specifically.\n\nLine item uuids are only valid within the event that delivered them: use `lineItems[n].uuid` from this event's cart snapshot, don't cache uuids across events. Bundle components are not addressable; target their parent line.", "isOptional": true } ], - "value": "export interface ValidationAdd {\n /** `ERROR` blocks the workflow. `WARNING` does not. */\n level: ValidationLevel;\n\n /** Stable identifier for this validation. */\n handle: string;\n\n /** JSON-path locator for where the validation applies. */\n target?: string;\n}" + "value": "export interface ValidationAdd<\n TTarget extends ValidationTarget = ValidationTarget,\n> {\n /** `ERROR` blocks the workflow. `WARNING` does not. */\n level: ValidationLevel;\n\n /**\n * Stable identifier for this validation. Handles are namespaced per\n * extension and may repeat across targets: the same handle on two line\n * items is two validations.\n */\n handle: string;\n\n /**\n * Locates the data the validation applies to; the host decides where it\n * renders. Omitted or unrecognized targets fall back to the event's root\n * scope (`$.cart` / `$.payment`) — the validation still applies, rendered\n * less specifically.\n *\n * Line item uuids are only valid within the event that delivered them:\n * use `lineItems[n].uuid` from this event's cart snapshot, don't cache\n * uuids across events. Bundle components are not addressable; target\n * their parent line.\n */\n target?: TTarget;\n}" } }, "ValidationLevel": { @@ -9812,6 +10502,84 @@ "description": "" } }, + "ValidationTargetFor": { + "src/surfaces/point-of-sale/events.ts": { + "filePath": "src/surfaces/point-of-sale/events.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ValidationTargetFor", + "value": "TEvent['type'] extends keyof ValidationTargetMap\n ? ValidationTargetMap[TEvent['type']]\n : ValidationTarget", + "description": "The validation targets valid for a given intercepted event." + } + }, + "ValidationTargetMap": { + "src/surfaces/point-of-sale/events.ts": { + "filePath": "src/surfaces/point-of-sale/events.ts", + "name": "ValidationTargetMap", + "description": "Maps POS interceptable workflow names to their valid validation targets.", + "members": [ + { + "filePath": "src/surfaces/point-of-sale/events.ts", + "syntaxKind": "PropertySignature", + "name": "cartvalidations", + "value": "CartValidationTarget", + "description": "" + }, + { + "filePath": "src/surfaces/point-of-sale/events.ts", + "syntaxKind": "PropertySignature", + "name": "paymentvalidations", + "value": "PaymentValidationTarget", + "description": "" + } + ], + "value": "interface ValidationTargetMap {\n [POS_INTERCEPT_NAMES.CART_VALIDATIONS]: CartValidationTarget;\n [POS_INTERCEPT_NAMES.PAYMENT_VALIDATIONS]: PaymentValidationTarget;\n}" + } + }, + "CartValidationTarget": { + "src/surfaces/point-of-sale/events.ts": { + "filePath": "src/surfaces/point-of-sale/events.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CartValidationTarget", + "value": "CartTarget | CartLineItemTarget", + "description": "" + } + }, + "CartTarget": { + "src/surfaces/point-of-sale/events.ts": { + "filePath": "src/surfaces/point-of-sale/events.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CartTarget", + "value": "'$.cart'", + "description": "Targets the whole cart rather than a specific line item." + } + }, + "CartLineItemTarget": { + "src/surfaces/point-of-sale/events.ts": { + "filePath": "src/surfaces/point-of-sale/events.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CartLineItemTarget", + "value": "`$.cart.lineItems['${string}']`", + "description": "Targets one cart line item by its `uuid` from this event's `cart` snapshot, for example `$.cart.lineItems['adfd6b06-4a24-4f5f-9f4b-ea21f4432dd4']`." + } + }, + "PaymentValidationTarget": { + "src/surfaces/point-of-sale/events.ts": { + "filePath": "src/surfaces/point-of-sale/events.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "PaymentValidationTarget", + "value": "\"$.payment\"", + "description": "" + } + }, + "ValidationTarget": { + "src/surfaces/point-of-sale/events.ts": { + "filePath": "src/surfaces/point-of-sale/events.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ValidationTarget", + "value": "CartValidationTarget | PaymentValidationTarget", + "description": "Where a validation applies, as an enumerated token. Targets are matched as exact strings, never evaluated as JSON paths." + } + }, "Docs_AppBackgroundEventMethods": { "src/surfaces/point-of-sale/api/docs.ts": { "filePath": "src/surfaces/point-of-sale/api/docs.ts", diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/targets.json b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/targets.json index ff41d794c2..e0c6f399cb 100644 --- a/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/targets.json +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/targets.json @@ -56,6 +56,7 @@ "Modal", "NumberField", "POSBlock", + "POSList", "Page", "PosBlock", "Route", @@ -137,6 +138,7 @@ "Modal", "NumberField", "POSBlock", + "POSList", "Page", "PosBlock", "Route", @@ -257,6 +259,7 @@ "Modal", "NumberField", "POSBlock", + "POSList", "Page", "PosBlock", "Route", @@ -379,6 +382,7 @@ "Modal", "NumberField", "POSBlock", + "POSList", "Page", "PosBlock", "Route", @@ -501,6 +505,7 @@ "Modal", "NumberField", "POSBlock", + "POSList", "Page", "PosBlock", "Route", @@ -623,6 +628,7 @@ "Modal", "NumberField", "POSBlock", + "POSList", "Page", "PosBlock", "Route", @@ -745,6 +751,7 @@ "Modal", "NumberField", "POSBlock", + "POSList", "Page", "PosBlock", "Route", @@ -827,6 +834,7 @@ "Modal", "NumberField", "POSBlock", + "POSList", "Page", "PosBlock", "Route", @@ -1644,6 +1652,18 @@ "pos.register-details.block.render" ] }, + "POSList": { + "targets": [ + "pos.cart.line-item-details.action.render", + "pos.customer-details.action.render", + "pos.draft-order-details.action.render", + "pos.home.modal.render", + "pos.order-details.action.render", + "pos.product-details.action.render", + "pos.purchase.post.action.render", + "pos.register-details.action.render" + ] + }, "Page": { "targets": [ "pos.cart.line-item-details.action.render", From 40dddf1b6b359be6cf3b75148fa3d789c22ce0cb Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Tue, 1 Sep 2026 10:56:10 -0400 Subject: [PATCH 3/8] Use standard POS list click details Assisted-By: devx/46b3a0a9-3b3c-4c53-a0c1-759bfb326ea8 --- .../2026-10/generated_docs_data_v2.json | 10 +++++----- .../src/surfaces/point-of-sale/components.d.ts | 11 +++++++---- .../surfaces/point-of-sale/components/POSList.d.ts | 9 ++++++--- .../components/POSList/examples/default.jsx | 2 +- 4 files changed, 19 insertions(+), 13 deletions(-) diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json index 7570b4e3fb..3f5e6c3a4e 100644 --- a/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json @@ -4618,7 +4618,7 @@ "syntaxKind": "PropertySignature", "name": "onClick", "value": "((event: POSListClickEvent) => void) | null", - "description": "Event handler invoked when a row is activated.\n\nWhen provided, every row is interactive. The activated row is identified by `event.rowId`.", + "description": "Event handler invoked when a row is activated.\n\nWhen provided, every row is interactive. The activated row is identified by `event.detail.rowId`.", "isOptional": true }, { @@ -4639,7 +4639,7 @@ "defaultValue": "[]" } ], - "value": "interface POSListJSXProps {\n /** A unique identifier for the element. */\n id?: string;\n /**\n * The rows displayed in the list.\n *\n * @default []\n */\n rows?: POSListRow[];\n /**\n * Event handler invoked when a row is activated.\n *\n * When provided, every row is interactive. The activated row is identified by `event.rowId`.\n */\n onClick?: ((event: POSListClickEvent) => void) | null;\n /**\n * Controls whether rows reserve space for images.\n *\n * - `auto`: Displays images or placeholders when a row includes an image source.\n * - `always`: Displays images or placeholders for every row.\n * - `never`: Displays rows without images or image placeholders.\n *\n * @default 'auto'\n */\n imageDisplayStrategy?: POSListImageDisplayStrategy;\n /**\n * Whether additional rows are being loaded.\n *\n * @default false\n */\n loadingMore?: boolean;\n /** Callback when more rows should be loaded. */\n onLoadMore?: ((event: CallbackEvent) => void) | null;\n /** Content displayed before the rows as part of the list's scrollable content. */\n header?: ComponentChild;\n}" + "value": "interface POSListJSXProps {\n /** A unique identifier for the element. */\n id?: string;\n /**\n * The rows displayed in the list.\n *\n * @default []\n */\n rows?: POSListRow[];\n /**\n * Event handler invoked when a row is activated.\n *\n * When provided, every row is interactive. The activated row is identified by `event.detail.rowId`.\n */\n onClick?: ((event: POSListClickEvent) => void) | null;\n /**\n * Controls whether rows reserve space for images.\n *\n * - `auto`: Displays images or placeholders when a row includes an image source.\n * - `always`: Displays images or placeholders for every row.\n * - `never`: Displays rows without images or image placeholders.\n *\n * @default 'auto'\n */\n imageDisplayStrategy?: POSListImageDisplayStrategy;\n /**\n * Whether additional rows are being loaded.\n *\n * @default false\n */\n loadingMore?: boolean;\n /** Callback when more rows should be loaded. */\n onLoadMore?: ((event: CallbackEvent) => void) | null;\n /** Content displayed before the rows as part of the list's scrollable content. */\n header?: ComponentChild;\n}" } }, "ComponentChild": { @@ -4955,7 +4955,7 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "TypeAliasDeclaration", "name": "POSListClickEvent", - "value": "CallbackEvent & {\n /** The unique identifier of the activated row. */\n rowId: string;\n}", + "value": "CallbackEvent & {\n /** Details about the activated row. */\n detail: {\n /** The unique identifier of the activated row. */\n rowId: string;\n };\n}", "description": "" } }, @@ -5245,7 +5245,7 @@ "syntaxKind": "PropertySignature", "name": "click", "value": "(event: POSListClickEvent) => void", - "description": "Fired when a row is activated.\n\nThe activated row is identified by `event.rowId`.", + "description": "Fired when a row is activated.\n\nThe activated row is identified by `event.detail.rowId`.", "isOptional": true }, { @@ -5257,7 +5257,7 @@ "isOptional": true } ], - "value": "interface POSListEvents {\n /**\n * Fired when a row is activated.\n *\n * The activated row is identified by `event.rowId`.\n */\n click?: (event: POSListClickEvent) => void;\n /** Fired when more rows should be loaded. */\n loadmore?: (event: CallbackEvent) => void;\n}" + "value": "interface POSListEvents {\n /**\n * Fired when a row is activated.\n *\n * The activated row is identified by `event.detail.rowId`.\n */\n click?: (event: POSListClickEvent) => void;\n /** Fired when more rows should be loaded. */\n loadmore?: (event: CallbackEvent) => void;\n}" } }, "POSListSlots": { diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts index 26e20c5cf4..f88968b5fc 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts @@ -5492,8 +5492,11 @@ type POSListRow = { end?: POSListRowEnd; }; type POSListClickEvent = CallbackEvent & { - /** The unique identifier of the activated row. */ - rowId: string; + /** Details about the activated row. */ + detail: { + /** The unique identifier of the activated row. */ + rowId: string; + }; }; /** * Displays structured rows with text, badges, images, and optional trailing content. @@ -5512,7 +5515,7 @@ interface POSListJSXProps { /** * Event handler invoked when a row is activated. * - * When provided, every row is interactive. The activated row is identified by `event.rowId`. + * When provided, every row is interactive. The activated row is identified by `event.detail.rowId`. */ onClick?: ((event: POSListClickEvent) => void) | null; /** @@ -5601,7 +5604,7 @@ interface POSListEvents { /** * Fired when a row is activated. * - * The activated row is identified by `event.rowId`. + * The activated row is identified by `event.detail.rowId`. */ click?: (event: POSListClickEvent) => void; /** Fired when more rows should be loaded. */ diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts index 7c43bdec7f..1b710bcb61 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts @@ -119,8 +119,11 @@ export type POSListRow = { end?: POSListRowEnd; }; export type POSListClickEvent = CallbackEvent & { - /** The unique identifier of the activated row. */ - rowId: string; + /** Details about the activated row. */ + detail: { + /** The unique identifier of the activated row. */ + rowId: string; + }; }; /** * Displays structured rows with text, badges, images, and optional trailing content. @@ -139,7 +142,7 @@ export interface POSListJSXProps { /** * Event handler invoked when a row is activated. * - * When provided, every row is interactive. The activated row is identified by `event.rowId`. + * When provided, every row is interactive. The activated row is identified by `event.detail.rowId`. */ onClick?: ((event: POSListClickEvent) => void) | null; /** diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx index 5cc089c2bd..d79b55d66c 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx @@ -22,7 +22,7 @@ end: {label: '$18.00', showChevron: true}, }, ]} - onClick={(event) => console.log('Selected row:', event.rowId)} + onClick={(event) => console.log('Selected row:', event.detail.rowId)} > Products ; From 5c6633c31646394e31b3ef06c113920be37df270 Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Tue, 1 Sep 2026 15:41:40 -0400 Subject: [PATCH 4/8] Document POSList subtitle color and chevron defaults Assisted-By: devx/46b3a0a9-3b3c-4c53-a0c1-759bfb326ea8 --- .../2026-10/generated_docs_data_v2.json | 7 ++++--- .../src/surfaces/point-of-sale/components.d.ts | 12 ++++++++++-- .../surfaces/point-of-sale/components/POSList.d.ts | 12 ++++++++++-- 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json index 3f5e6c3a4e..f75ee3e99d 100644 --- a/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json @@ -5060,7 +5060,7 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "TypeAliasDeclaration", "name": "POSListRowEnd", - "value": "{\n /** Supporting text displayed at the end of the row. */\n label?: string;\n /** Whether to display a chevron at the end of the row. */\n showChevron?: boolean;\n /** A toggle switch displayed at the end of the row. */\n toggleSwitch?: POSListToggleSwitch;\n}", + "value": "{\n /** Supporting text displayed at the end of the row. */\n label?: string;\n /**\n * Whether to display a chevron at the end of the row.\n *\n * @default false\n */\n showChevron?: boolean;\n /** A toggle switch displayed at the end of the row. */\n toggleSwitch?: POSListToggleSwitch;\n}", "description": "", "members": [ { @@ -5077,7 +5077,8 @@ "name": "showChevron", "value": "boolean", "description": "Whether to display a chevron at the end of the row.", - "isOptional": true + "isOptional": true, + "defaultValue": "false" }, { "filePath": "src/surfaces/point-of-sale/components.ts", @@ -5220,7 +5221,7 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "TypeAliasDeclaration", "name": "POSListRowSubtitle", - "value": "string | {\n /** The subtitle text. */\n content: string;\n /** The semantic color applied to the subtitle. */\n color?: POSListRowSubtitleColor;\n }", + "value": "string | {\n /** The subtitle text. */\n content: string;\n /**\n * The semantic color applied to the subtitle.\n *\n * @default 'neutral'\n */\n color?: POSListRowSubtitleColor;\n }", "description": "" } }, diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts index f88968b5fc..d437562a9d 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts @@ -5432,7 +5432,11 @@ type POSListRowSubtitle = | { /** The subtitle text. */ content: string; - /** The semantic color applied to the subtitle. */ + /** + * The semantic color applied to the subtitle. + * + * @default 'neutral' + */ color?: POSListRowSubtitleColor; }; type POSListBadge = { @@ -5478,7 +5482,11 @@ type POSListRowStart = { type POSListRowEnd = { /** Supporting text displayed at the end of the row. */ label?: string; - /** Whether to display a chevron at the end of the row. */ + /** + * Whether to display a chevron at the end of the row. + * + * @default false + */ showChevron?: boolean; /** A toggle switch displayed at the end of the row. */ toggleSwitch?: POSListToggleSwitch; diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts index 1b710bcb61..61c2a5594e 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts @@ -59,7 +59,11 @@ export type POSListRowSubtitle = | { /** The subtitle text. */ content: string; - /** The semantic color applied to the subtitle. */ + /** + * The semantic color applied to the subtitle. + * + * @default 'neutral' + */ color?: POSListRowSubtitleColor; }; export type POSListBadge = { @@ -105,7 +109,11 @@ export type POSListRowStart = { export type POSListRowEnd = { /** Supporting text displayed at the end of the row. */ label?: string; - /** Whether to display a chevron at the end of the row. */ + /** + * Whether to display a chevron at the end of the row. + * + * @default false + */ showChevron?: boolean; /** A toggle switch displayed at the end of the row. */ toggleSwitch?: POSListToggleSwitch; From d145625548d0410fde86710075b8ed15ca09e690 Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Tue, 1 Sep 2026 21:17:38 -0400 Subject: [PATCH 5/8] Add per-row clickable control to POSList Assisted-By: devx/46b3a0a9-3b3c-4c53-a0c1-759bfb326ea8 --- .../2026-10/generated_docs_data_v2.json | 15 ++++++++++++--- .../src/surfaces/point-of-sale/components.d.ts | 8 +++++++- .../point-of-sale/components/POSList.d.ts | 8 +++++++- 3 files changed, 26 insertions(+), 5 deletions(-) diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json index f75ee3e99d..f2f1860d10 100644 --- a/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json @@ -4618,7 +4618,7 @@ "syntaxKind": "PropertySignature", "name": "onClick", "value": "((event: POSListClickEvent) => void) | null", - "description": "Event handler invoked when a row is activated.\n\nWhen provided, every row is interactive. The activated row is identified by `event.detail.rowId`.", + "description": "Event handler invoked when a row is activated.\n\nWhen provided, every row with `clickable` unset or `true` is interactive. The activated row is identified by `event.detail.rowId`.", "isOptional": true }, { @@ -4639,7 +4639,7 @@ "defaultValue": "[]" } ], - "value": "interface POSListJSXProps {\n /** A unique identifier for the element. */\n id?: string;\n /**\n * The rows displayed in the list.\n *\n * @default []\n */\n rows?: POSListRow[];\n /**\n * Event handler invoked when a row is activated.\n *\n * When provided, every row is interactive. The activated row is identified by `event.detail.rowId`.\n */\n onClick?: ((event: POSListClickEvent) => void) | null;\n /**\n * Controls whether rows reserve space for images.\n *\n * - `auto`: Displays images or placeholders when a row includes an image source.\n * - `always`: Displays images or placeholders for every row.\n * - `never`: Displays rows without images or image placeholders.\n *\n * @default 'auto'\n */\n imageDisplayStrategy?: POSListImageDisplayStrategy;\n /**\n * Whether additional rows are being loaded.\n *\n * @default false\n */\n loadingMore?: boolean;\n /** Callback when more rows should be loaded. */\n onLoadMore?: ((event: CallbackEvent) => void) | null;\n /** Content displayed before the rows as part of the list's scrollable content. */\n header?: ComponentChild;\n}" + "value": "interface POSListJSXProps {\n /** A unique identifier for the element. */\n id?: string;\n /**\n * The rows displayed in the list.\n *\n * @default []\n */\n rows?: POSListRow[];\n /**\n * Event handler invoked when a row is activated.\n *\n * When provided, every row with `clickable` unset or `true` is interactive. The activated row is identified by `event.detail.rowId`.\n */\n onClick?: ((event: POSListClickEvent) => void) | null;\n /**\n * Controls whether rows reserve space for images.\n *\n * - `auto`: Displays images or placeholders when a row includes an image source.\n * - `always`: Displays images or placeholders for every row.\n * - `never`: Displays rows without images or image placeholders.\n *\n * @default 'auto'\n */\n imageDisplayStrategy?: POSListImageDisplayStrategy;\n /**\n * Whether additional rows are being loaded.\n *\n * @default false\n */\n loadingMore?: boolean;\n /** Callback when more rows should be loaded. */\n onLoadMore?: ((event: CallbackEvent) => void) | null;\n /** Content displayed before the rows as part of the list's scrollable content. */\n header?: ComponentChild;\n}" } }, "ComponentChild": { @@ -5027,9 +5027,18 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "TypeAliasDeclaration", "name": "POSListRow", - "value": "{\n /** A unique identifier for the row. */\n id: string;\n /** The primary content displayed at the start of the row. */\n start: POSListRowStart;\n /** Optional content displayed at the end of the row. */\n end?: POSListRowEnd;\n}", + "value": "{\n /** A unique identifier for the row. */\n id: string;\n /** The primary content displayed at the start of the row. */\n start: POSListRowStart;\n /**\n * Whether the row responds to activation when the list provides `onClick`.\n *\n * @default true\n */\n clickable?: boolean;\n /** Optional content displayed at the end of the row. */\n end?: POSListRowEnd;\n}", "description": "", "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "clickable", + "value": "boolean", + "description": "Whether the row responds to activation when the list provides `onClick`.", + "isOptional": true, + "defaultValue": "true" + }, { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts index d437562a9d..5ef2517570 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts @@ -5496,6 +5496,12 @@ type POSListRow = { id: string; /** The primary content displayed at the start of the row. */ start: POSListRowStart; + /** + * Whether the row responds to activation when the list provides `onClick`. + * + * @default true + */ + clickable?: boolean; /** Optional content displayed at the end of the row. */ end?: POSListRowEnd; }; @@ -5523,7 +5529,7 @@ interface POSListJSXProps { /** * Event handler invoked when a row is activated. * - * When provided, every row is interactive. The activated row is identified by `event.detail.rowId`. + * When provided, every row with `clickable` unset or `true` is interactive. The activated row is identified by `event.detail.rowId`. */ onClick?: ((event: POSListClickEvent) => void) | null; /** diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts index 61c2a5594e..62875f16a8 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts @@ -123,6 +123,12 @@ export type POSListRow = { id: string; /** The primary content displayed at the start of the row. */ start: POSListRowStart; + /** + * Whether the row responds to activation when the list provides `onClick`. + * + * @default true + */ + clickable?: boolean; /** Optional content displayed at the end of the row. */ end?: POSListRowEnd; }; @@ -150,7 +156,7 @@ export interface POSListJSXProps { /** * Event handler invoked when a row is activated. * - * When provided, every row is interactive. The activated row is identified by `event.detail.rowId`. + * When provided, every row with `clickable` unset or `true` is interactive. The activated row is identified by `event.detail.rowId`. */ onClick?: ((event: POSListClickEvent) => void) | null; /** From afc255614ed0ed007903ba74dfc54a99add92e2a Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Tue, 1 Sep 2026 22:38:13 -0400 Subject: [PATCH 6/8] Switch POSList types to per-row onClick callbacks Assisted-By: devx/46b3a0a9-3b3c-4c53-a0c1-759bfb326ea8 --- .../2026-10/generated_docs_data_v2.json | 48 +++++-------------- .../surfaces/point-of-sale/components.d.ts | 25 ++-------- .../point-of-sale/components/POSList.d.ts | 20 ++------ .../components/POSList/examples/default.jsx | 3 +- 4 files changed, 19 insertions(+), 77 deletions(-) diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json index f2f1860d10..4546d898c7 100644 --- a/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json @@ -4613,14 +4613,6 @@ "isOptional": true, "defaultValue": "false" }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "onClick", - "value": "((event: POSListClickEvent) => void) | null", - "description": "Event handler invoked when a row is activated.\n\nWhen provided, every row with `clickable` unset or `true` is interactive. The activated row is identified by `event.detail.rowId`.", - "isOptional": true - }, { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", @@ -4639,7 +4631,7 @@ "defaultValue": "[]" } ], - "value": "interface POSListJSXProps {\n /** A unique identifier for the element. */\n id?: string;\n /**\n * The rows displayed in the list.\n *\n * @default []\n */\n rows?: POSListRow[];\n /**\n * Event handler invoked when a row is activated.\n *\n * When provided, every row with `clickable` unset or `true` is interactive. The activated row is identified by `event.detail.rowId`.\n */\n onClick?: ((event: POSListClickEvent) => void) | null;\n /**\n * Controls whether rows reserve space for images.\n *\n * - `auto`: Displays images or placeholders when a row includes an image source.\n * - `always`: Displays images or placeholders for every row.\n * - `never`: Displays rows without images or image placeholders.\n *\n * @default 'auto'\n */\n imageDisplayStrategy?: POSListImageDisplayStrategy;\n /**\n * Whether additional rows are being loaded.\n *\n * @default false\n */\n loadingMore?: boolean;\n /** Callback when more rows should be loaded. */\n onLoadMore?: ((event: CallbackEvent) => void) | null;\n /** Content displayed before the rows as part of the list's scrollable content. */\n header?: ComponentChild;\n}" + "value": "interface POSListJSXProps {\n /** A unique identifier for the element. */\n id?: string;\n /**\n * The rows displayed in the list.\n *\n * @default []\n */\n rows?: POSListRow[];\n /**\n * Controls whether rows reserve space for images.\n *\n * - `auto`: Displays images or placeholders when a row includes an image source.\n * - `always`: Displays images or placeholders for every row.\n * - `never`: Displays rows without images or image placeholders.\n *\n * @default 'auto'\n */\n imageDisplayStrategy?: POSListImageDisplayStrategy;\n /**\n * Whether additional rows are being loaded.\n *\n * @default false\n */\n loadingMore?: boolean;\n /** Callback when more rows should be loaded. */\n onLoadMore?: ((event: CallbackEvent) => void) | null;\n /** Content displayed before the rows as part of the list's scrollable content. */\n header?: ComponentChild;\n}" } }, "ComponentChild": { @@ -4950,15 +4942,6 @@ "description": "" } }, - "POSListClickEvent": { - "src/surfaces/point-of-sale/components.ts": { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "POSListClickEvent", - "value": "CallbackEvent & {\n /** Details about the activated row. */\n detail: {\n /** The unique identifier of the activated row. */\n rowId: string;\n };\n}", - "description": "" - } - }, "CallbackEvent": { "src/surfaces/point-of-sale/components.ts": { "filePath": "src/surfaces/point-of-sale/components.ts", @@ -5027,18 +5010,9 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "TypeAliasDeclaration", "name": "POSListRow", - "value": "{\n /** A unique identifier for the row. */\n id: string;\n /** The primary content displayed at the start of the row. */\n start: POSListRowStart;\n /**\n * Whether the row responds to activation when the list provides `onClick`.\n *\n * @default true\n */\n clickable?: boolean;\n /** Optional content displayed at the end of the row. */\n end?: POSListRowEnd;\n}", + "value": "{\n /** A unique identifier for the row. */\n id: string;\n /** The primary content displayed at the start of the row. */\n start: POSListRowStart;\n /**\n * Callback invoked when the row is activated.\n *\n * When provided, the row is interactive.\n */\n onClick?: () => void;\n /** Optional content displayed at the end of the row. */\n end?: POSListRowEnd;\n}", "description": "", "members": [ - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "clickable", - "value": "boolean", - "description": "Whether the row responds to activation when the list provides `onClick`.", - "isOptional": true, - "defaultValue": "true" - }, { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", @@ -5054,6 +5028,14 @@ "value": "string", "description": "A unique identifier for the row." }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "onClick", + "value": "() => void", + "description": "Callback invoked when the row is activated.\n\nWhen provided, the row is interactive.", + "isOptional": true + }, { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", @@ -5250,14 +5232,6 @@ "description": "Events emitted by the POS list.", "isPublicDocs": true, "members": [ - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "click", - "value": "(event: POSListClickEvent) => void", - "description": "Fired when a row is activated.\n\nThe activated row is identified by `event.detail.rowId`.", - "isOptional": true - }, { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", @@ -5267,7 +5241,7 @@ "isOptional": true } ], - "value": "interface POSListEvents {\n /**\n * Fired when a row is activated.\n *\n * The activated row is identified by `event.detail.rowId`.\n */\n click?: (event: POSListClickEvent) => void;\n /** Fired when more rows should be loaded. */\n loadmore?: (event: CallbackEvent) => void;\n}" + "value": "interface POSListEvents {\n /** Fired when more rows should be loaded. */\n loadmore?: (event: CallbackEvent) => void;\n}" } }, "POSListSlots": { diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts index 5ef2517570..bd966dbf75 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts @@ -5497,21 +5497,14 @@ type POSListRow = { /** The primary content displayed at the start of the row. */ start: POSListRowStart; /** - * Whether the row responds to activation when the list provides `onClick`. + * Callback invoked when the row is activated. * - * @default true + * When provided, the row is interactive. */ - clickable?: boolean; + onClick?: () => void; /** Optional content displayed at the end of the row. */ end?: POSListRowEnd; }; -type POSListClickEvent = CallbackEvent & { - /** Details about the activated row. */ - detail: { - /** The unique identifier of the activated row. */ - rowId: string; - }; -}; /** * Displays structured rows with text, badges, images, and optional trailing content. * @@ -5526,12 +5519,6 @@ interface POSListJSXProps { * @default [] */ rows?: POSListRow[]; - /** - * Event handler invoked when a row is activated. - * - * When provided, every row with `clickable` unset or `true` is interactive. The activated row is identified by `event.detail.rowId`. - */ - onClick?: ((event: POSListClickEvent) => void) | null; /** * Controls whether rows reserve space for images. * @@ -5615,12 +5602,6 @@ export type { * @publicDocs */ interface POSListEvents { - /** - * Fired when a row is activated. - * - * The activated row is identified by `event.detail.rowId`. - */ - click?: (event: POSListClickEvent) => void; /** Fired when more rows should be loaded. */ loadmore?: (event: CallbackEvent) => void; } diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts index 62875f16a8..894bc05f6f 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts @@ -124,21 +124,14 @@ export type POSListRow = { /** The primary content displayed at the start of the row. */ start: POSListRowStart; /** - * Whether the row responds to activation when the list provides `onClick`. + * Callback invoked when the row is activated. * - * @default true + * When provided, the row is interactive. */ - clickable?: boolean; + onClick?: () => void; /** Optional content displayed at the end of the row. */ end?: POSListRowEnd; }; -export type POSListClickEvent = CallbackEvent & { - /** Details about the activated row. */ - detail: { - /** The unique identifier of the activated row. */ - rowId: string; - }; -}; /** * Displays structured rows with text, badges, images, and optional trailing content. * @@ -153,12 +146,6 @@ export interface POSListJSXProps { * @default [] */ rows?: POSListRow[]; - /** - * Event handler invoked when a row is activated. - * - * When provided, every row with `clickable` unset or `true` is interactive. The activated row is identified by `event.detail.rowId`. - */ - onClick?: ((event: POSListClickEvent) => void) | null; /** * Controls whether rows reserve space for images. * @@ -198,7 +185,6 @@ export {tagName}; export type { ElementProps, POSListBadge, - POSListClickEvent, POSListImageDisplayStrategy, POSListJSXProps, POSListRow, diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx index d79b55d66c..e3d7bf195d 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx @@ -12,6 +12,7 @@ badges: [{text: 'Sale', tone: 'highlight'}], }, end: {label: '$29.00', showChevron: true}, + onClick: () => console.log('Selected row: graphic-tee'), }, { id: 'canvas-tote', @@ -20,9 +21,9 @@ subtitles: ['Natural'], }, end: {label: '$18.00', showChevron: true}, + onClick: () => console.log('Selected row: canvas-tote'), }, ]} - onClick={(event) => console.log('Selected row:', event.detail.rowId)} > Products ; From 5d1e677815517fb147f2807de6f8785ca3c61c58 Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Wed, 2 Sep 2026 06:04:03 -0400 Subject: [PATCH 7/8] Pass a click event to POSList row callbacks Assisted-By: devx/46b3a0a9-3b3c-4c53-a0c1-759bfb326ea8 --- .../pos_ui_extensions/2026-10/generated_docs_data_v2.json | 4 ++-- .../ui-extensions/src/surfaces/point-of-sale/components.d.ts | 2 +- .../src/surfaces/point-of-sale/components/POSList.d.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json index 4546d898c7..ddc60b2eb2 100644 --- a/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-10/generated_docs_data_v2.json @@ -5010,7 +5010,7 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "TypeAliasDeclaration", "name": "POSListRow", - "value": "{\n /** A unique identifier for the row. */\n id: string;\n /** The primary content displayed at the start of the row. */\n start: POSListRowStart;\n /**\n * Callback invoked when the row is activated.\n *\n * When provided, the row is interactive.\n */\n onClick?: () => void;\n /** Optional content displayed at the end of the row. */\n end?: POSListRowEnd;\n}", + "value": "{\n /** A unique identifier for the row. */\n id: string;\n /** The primary content displayed at the start of the row. */\n start: POSListRowStart;\n /**\n * Callback invoked when the row is activated.\n *\n * When provided, the row is interactive.\n */\n onClick?: (event: CallbackEvent) => void;\n /** Optional content displayed at the end of the row. */\n end?: POSListRowEnd;\n}", "description": "", "members": [ { @@ -5032,7 +5032,7 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", "name": "onClick", - "value": "() => void", + "value": "(event: CallbackEvent<\"s-pos-list\">) => void", "description": "Callback invoked when the row is activated.\n\nWhen provided, the row is interactive.", "isOptional": true }, diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts index bd966dbf75..02e31dc65e 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts @@ -5501,7 +5501,7 @@ type POSListRow = { * * When provided, the row is interactive. */ - onClick?: () => void; + onClick?: (event: CallbackEvent) => void; /** Optional content displayed at the end of the row. */ end?: POSListRowEnd; }; diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts index 894bc05f6f..1831b49b74 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList.d.ts @@ -128,7 +128,7 @@ export type POSListRow = { * * When provided, the row is interactive. */ - onClick?: () => void; + onClick?: (event: CallbackEvent) => void; /** Optional content displayed at the end of the row. */ end?: POSListRowEnd; }; From 88491b638a2547f02acc3de8a648dfc871f7ca69 Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Wed, 2 Sep 2026 10:43:57 -0400 Subject: [PATCH 8/8] Update POSList example callbacks to log events Assisted-By: devx/731c45d9-3be0-4043-899f-87200624d2b8 --- .../point-of-sale/components/POSList/examples/default.jsx | 8 ++++++-- .../components/POSList/examples/incremental-loading.jsx | 5 ++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx index e3d7bf195d..c710c3bbf8 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx @@ -12,7 +12,9 @@ badges: [{text: 'Sale', tone: 'highlight'}], }, end: {label: '$29.00', showChevron: true}, - onClick: () => console.log('Selected row: graphic-tee'), + onClick: (event) => { + console.log('Selected row: graphic-tee', event); + }, }, { id: 'canvas-tote', @@ -21,7 +23,9 @@ subtitles: ['Natural'], }, end: {label: '$18.00', showChevron: true}, - onClick: () => console.log('Selected row: canvas-tote'), + onClick: (event) => { + console.log('Selected row: canvas-tote', event); + }, }, ]} > diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/incremental-loading.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/incremental-loading.jsx index bb7649c0d9..fa6bde4032 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/incremental-loading.jsx +++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/incremental-loading.jsx @@ -1,5 +1,8 @@ loadMoreProducts()} + onLoadMore={(event) => { + console.log('Load more requested', event); + void loadMoreProducts(); + }} />;