From dc15766cc0c5248fccc3a4404ee9f0c933d963db Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Mon, 31 Aug 2026 23:42:15 -0400 Subject: [PATCH 01/19] 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 02/19] 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 03/19] 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 04/19] 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 05/19] 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 06/19] 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 07/19] 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 08/19] 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(); + }} />; From 706ce1d60350d20a15abddf1c471e51a106da5f4 Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Wed, 9 Sep 2026 23:37:13 -0400 Subject: [PATCH 09/19] Document toggle switch precedence over trailing label and chevron Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3 --- .../pos_ui_extensions/2026-10/generated_docs_data_v2.json | 4 ++-- .../src/surfaces/point-of-sale/components.d.ts | 6 +++++- .../src/surfaces/point-of-sale/components/POSList.d.ts | 6 +++++- 3 files changed, 12 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 ddc60b2eb2..1158e9cbce 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 @@ -5051,7 +5051,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 /**\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}", + "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 /**\n * A toggle switch displayed at the end of the row.\n *\n * When provided, the toggle switch replaces `label` and `showChevron`.\n */\n toggleSwitch?: POSListToggleSwitch;\n}", "description": "", "members": [ { @@ -5076,7 +5076,7 @@ "syntaxKind": "PropertySignature", "name": "toggleSwitch", "value": "POSListToggleSwitch", - "description": "A toggle switch displayed at the end of the row.", + "description": "A toggle switch displayed at the end of the row.\n\nWhen provided, the toggle switch replaces `label` and `showChevron`.", "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 02e31dc65e..1c9de32928 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 @@ -5488,7 +5488,11 @@ type POSListRowEnd = { * @default false */ showChevron?: boolean; - /** A toggle switch displayed at the end of the row. */ + /** + * A toggle switch displayed at the end of the row. + * + * When provided, the toggle switch replaces `label` and `showChevron`. + */ toggleSwitch?: POSListToggleSwitch; }; type POSListRow = { 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 1831b49b74..74bdbb7d4f 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 @@ -115,7 +115,11 @@ export type POSListRowEnd = { * @default false */ showChevron?: boolean; - /** A toggle switch displayed at the end of the row. */ + /** + * A toggle switch displayed at the end of the row. + * + * When provided, the toggle switch replaces `label` and `showChevron`. + */ toggleSwitch?: POSListToggleSwitch; }; export type POSListRow = { From 6b8fd341ec35827905e7f49746374d10535a5077 Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Wed, 9 Sep 2026 23:40:25 -0400 Subject: [PATCH 10/19] Type POSListRow.onClick with the plain click event the host sends Row callbacks are functions nested inside the `rows` data, so they cross the sandbox boundary as RPC callables and cannot receive a DOM Event. The host sends `{type: 'click'}`; describe exactly that instead of `CallbackEvent`. Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3 --- .../2026-10/generated_docs_data_v2.json | 22 +++++++++++++++++-- .../surfaces/point-of-sale/components.d.ts | 11 +++++++++- .../point-of-sale/components/POSList.d.ts | 12 +++++++++- 3 files changed, 41 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 1158e9cbce..d0feaa4d3f 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?: (event: CallbackEvent) => 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: POSListRowClickEvent) => 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": "(event: CallbackEvent<\"s-pos-list\">) => void", + "value": "(event: POSListRowClickEvent) => void", "description": "Callback invoked when the row is activated.\n\nWhen provided, the row is interactive.", "isOptional": true }, @@ -5111,6 +5111,24 @@ ] } }, + "POSListRowClickEvent": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "POSListRowClickEvent", + "value": "{\n type: 'click';\n}", + "description": "The event passed to a row's `onClick`.\n\nRows are data rather than elements, so this is a plain object and not a DOM `Event`: it carries no `currentTarget` element and has no `preventDefault()`.", + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'click'", + "description": "" + } + ] + } + }, "POSListRowStart": { "src/surfaces/point-of-sale/components.ts": { "filePath": "src/surfaces/point-of-sale/components.ts", 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 1c9de32928..7dd7e1b138 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 @@ -5495,6 +5495,15 @@ type POSListRowEnd = { */ toggleSwitch?: POSListToggleSwitch; }; +/** + * The event passed to a row's `onClick`. + * + * Rows are data rather than elements, so this is a plain object and not a DOM `Event`: + * it carries no `currentTarget` element and has no `preventDefault()`. + */ +type POSListRowClickEvent = { + type: 'click'; +}; type POSListRow = { /** A unique identifier for the row. */ id: string; @@ -5505,7 +5514,7 @@ type POSListRow = { * * When provided, the row is interactive. */ - onClick?: (event: CallbackEvent) => void; + onClick?: (event: POSListRowClickEvent) => 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 74bdbb7d4f..10a7129107 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 @@ -122,6 +122,15 @@ export type POSListRowEnd = { */ toggleSwitch?: POSListToggleSwitch; }; +/** + * The event passed to a row's `onClick`. + * + * Rows are data rather than elements, so this is a plain object and not a DOM `Event`: + * it carries no `currentTarget` element and has no `preventDefault()`. + */ +export type POSListRowClickEvent = { + type: 'click'; +}; export type POSListRow = { /** A unique identifier for the row. */ id: string; @@ -132,7 +141,7 @@ export type POSListRow = { * * When provided, the row is interactive. */ - onClick?: (event: CallbackEvent) => void; + onClick?: (event: POSListRowClickEvent) => void; /** Optional content displayed at the end of the row. */ end?: POSListRowEnd; }; @@ -192,6 +201,7 @@ export type { POSListImageDisplayStrategy, POSListJSXProps, POSListRow, + POSListRowClickEvent, POSListRowEnd, POSListRowImage, POSListRowStart, From 2501fd53fa92ff9e6619dd4536d66f69c2cf0c29 Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Thu, 10 Sep 2026 00:33:53 -0400 Subject: [PATCH 11/19] Document that a disabled POSList toggle switch blocks row activation Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3 --- .../pos_ui_extensions/2026-10/generated_docs_data_v2.json | 4 ++-- .../ui-extensions/src/surfaces/point-of-sale/components.d.ts | 4 +++- .../src/surfaces/point-of-sale/components/POSList.d.ts | 4 +++- 3 files changed, 8 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 d0feaa4d3f..27cc653cb3 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 @@ -5087,7 +5087,7 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "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}", + "value": "{\n /**\n * The current state of the toggle switch.\n *\n * @default false\n */\n checked?: boolean;\n /**\n * Whether the toggle switch is disabled.\n *\n * A disabled toggle switch also blocks activation of its row, so the row's `onClick` doesn't run.\n *\n * @default false\n */\n disabled?: boolean;\n}", "description": "", "members": [ { @@ -5104,7 +5104,7 @@ "syntaxKind": "PropertySignature", "name": "disabled", "value": "boolean", - "description": "Whether the toggle switch prevents interaction.", + "description": "Whether the toggle switch is disabled.\n\nA disabled toggle switch also blocks activation of its row, so the row's `onClick` doesn't run.", "isOptional": true, "defaultValue": "false" } 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 7dd7e1b138..cae8f5de7d 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 @@ -5463,7 +5463,9 @@ type POSListToggleSwitch = { */ checked?: boolean; /** - * Whether the toggle switch prevents interaction. + * Whether the toggle switch is disabled. + * + * A disabled toggle switch also blocks activation of its row, so the row's `onClick` doesn't run. * * @default false */ 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 10a7129107..071f38334c 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 @@ -90,7 +90,9 @@ export type POSListToggleSwitch = { */ checked?: boolean; /** - * Whether the toggle switch prevents interaction. + * Whether the toggle switch is disabled. + * + * A disabled toggle switch also blocks activation of its row, so the row's `onClick` doesn't run. * * @default false */ From cb567ea6cfd9a8421a26c3dfccb6d5fa0b1899f3 Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Thu, 10 Sep 2026 00:46:00 -0400 Subject: [PATCH 12/19] Document that POSList auto image display is decided per row Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3 --- .../pos_ui_extensions/2026-10/generated_docs_data_v2.json | 8 ++++---- .../src/surfaces/point-of-sale/components.d.ts | 4 ++-- .../src/surfaces/point-of-sale/components/POSList.d.ts | 2 +- 3 files changed, 7 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 27cc653cb3..a16efec30e 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 @@ -4600,7 +4600,7 @@ "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.", + "description": "Controls whether rows reserve space for images.\n\n- `auto`: Displays an image only on rows that include an image source; other rows reserve no space.\n- `always`: Displays images or placeholders for every row.\n- `never`: Displays rows without images or image placeholders.", "isOptional": true, "defaultValue": "'auto'" }, @@ -4631,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 * 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 an image only on rows that include an image source; other rows reserve no space.\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": { @@ -5301,7 +5301,7 @@ "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.", + "description": "Controls whether rows reserve space for images.\n\n- `auto`: Displays an image only on rows that include an image source; other rows reserve no space.\n- `always`: Displays images or placeholders for every row.\n- `never`: Displays rows without images or image placeholders.", "isOptional": true, "defaultValue": "'auto'" }, @@ -5324,7 +5324,7 @@ "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}" + "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 an image only on rows that include an image source; other rows reserve no space.\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": { 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 cae8f5de7d..3c10abf6f5 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 @@ -5537,7 +5537,7 @@ interface POSListJSXProps { /** * Controls whether rows reserve space for images. * - * - `auto`: Displays images or placeholders when a row includes an image source. + * - `auto`: Displays an image only on rows that include an image source; other rows reserve no space. * - `always`: Displays images or placeholders for every row. * - `never`: Displays rows without images or image placeholders. * @@ -5645,7 +5645,7 @@ interface POSList { /** * Controls whether rows reserve space for images. * - * - `auto`: Displays images or placeholders when a row includes an image source. + * - `auto`: Displays an image only on rows that include an image source; other rows reserve no space. * - `always`: Displays images or placeholders for every row. * - `never`: Displays rows without images or image placeholders. * @default 'auto' 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 071f38334c..e273cfeabf 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 @@ -164,7 +164,7 @@ export interface POSListJSXProps { /** * Controls whether rows reserve space for images. * - * - `auto`: Displays images or placeholders when a row includes an image source. + * - `auto`: Displays an image only on rows that include an image source; other rows reserve no space. * - `always`: Displays images or placeholders for every row. * - `never`: Displays rows without images or image placeholders. * From 438e7ff3736c9a05470176cfca17c743a0d20635 Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Thu, 10 Sep 2026 09:55:46 -0400 Subject: [PATCH 13/19] Use the s-text and s-badge vocabulary for POSList subtitles and badges Subtitles take tone and color as s-text does; badges take tone as s-badge does. Replaces the legacy List value sets that reused the shared prop names with incompatible values. Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3 --- .../2026-10/generated_docs_data_v2.json | 27 +++++++++----- .../surfaces/point-of-sale/components.d.ts | 32 ++++++++++------- .../point-of-sale/components/POSList.d.ts | 35 ++++++++++++------- .../components/POSList/examples/default.jsx | 7 ++-- 4 files changed, 62 insertions(+), 39 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 a16efec30e..6ddb27f563 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 @@ -5176,7 +5176,7 @@ "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}", + "value": "{\n /** The badge text. */\n text: string;\n /**\n * The semantic meaning of the badge.\n *\n * @default 'auto'\n */\n tone?: POSListTone;\n}", "description": "", "members": [ { @@ -5190,14 +5190,23 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", "name": "tone", - "value": "'neutral' | 'critical' | 'warning' | 'success' | 'highlight'", - "description": "The semantic appearance of the badge.", + "value": "POSListTone", + "description": "The semantic meaning of the badge.", "isOptional": true, - "defaultValue": "'neutral'" + "defaultValue": "'auto'" } ] } }, + "POSListTone": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "POSListTone", + "value": "'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'caution'", + "description": "The semantic meaning of row text or a badge, as on `s-text` and `s-badge`." + } + }, "POSListRowImage": { "src/surfaces/point-of-sale/components.ts": { "filePath": "src/surfaces/point-of-sale/components.ts", @@ -5230,17 +5239,17 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "TypeAliasDeclaration", "name": "POSListRowSubtitle", - "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 }", + "value": "string | {\n /** The subtitle text. */\n content: string;\n /**\n * The semantic meaning of the subtitle.\n *\n * @default 'auto'\n */\n tone?: POSListTone;\n /**\n * The emphasis of the subtitle. A value other than `base` overrides `tone`.\n *\n * @default 'base'\n */\n color?: POSListTextColor;\n }", "description": "" } }, - "POSListRowSubtitleColor": { + "POSListTextColor": { "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": "" + "name": "POSListTextColor", + "value": "'base' | 'strong' | 'subdued'", + "description": "The emphasis of row text, as on `s-text`." } }, "POSListEvents": { 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 3c10abf6f5..a700ec7f6b 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 @@ -5418,36 +5418,44 @@ declare module 'preact' { declare const posListTagName = 's-pos-list'; type POSListImageDisplayStrategy = 'auto' | 'always' | 'never'; -type POSListRowSubtitleColor = +/** The semantic meaning of row text or a badge, as on `s-text` and `s-badge`. */ +type POSListTone = + | 'auto' | 'neutral' - | 'subdued' - | 'disabled' + | 'info' + | 'success' | 'warning' | 'critical' - | 'success' - | 'interactive' - | 'highlight'; + | 'caution'; +/** The emphasis of row text, as on `s-text`. */ +type POSListTextColor = 'base' | 'strong' | 'subdued'; type POSListRowSubtitle = | string | { /** The subtitle text. */ content: string; /** - * The semantic color applied to the subtitle. + * The semantic meaning of the subtitle. * - * @default 'neutral' + * @default 'auto' */ - color?: POSListRowSubtitleColor; + tone?: POSListTone; + /** + * The emphasis of the subtitle. A value other than `base` overrides `tone`. + * + * @default 'base' + */ + color?: POSListTextColor; }; type POSListBadge = { /** The badge text. */ text: string; /** - * The semantic appearance of the badge. + * The semantic meaning of the badge. * - * @default 'neutral' + * @default 'auto' */ - tone?: 'neutral' | 'critical' | 'warning' | 'success' | 'highlight'; + tone?: POSListTone; }; type POSListRowImage = { /** The URL of the image displayed at the start of the row. */ 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 e273cfeabf..c3e8c3557c 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 @@ -45,36 +45,44 @@ export interface CallbackEvent { declare const tagName = 's-pos-list'; export type POSListImageDisplayStrategy = 'auto' | 'always' | 'never'; -export type POSListRowSubtitleColor = +/** The semantic meaning of row text or a badge, as on `s-text` and `s-badge`. */ +export type POSListTone = + | 'auto' | 'neutral' - | 'subdued' - | 'disabled' + | 'info' + | 'success' | 'warning' | 'critical' - | 'success' - | 'interactive' - | 'highlight'; + | 'caution'; +/** The emphasis of row text, as on `s-text`. */ +export type POSListTextColor = 'base' | 'strong' | 'subdued'; export type POSListRowSubtitle = | string | { /** The subtitle text. */ content: string; /** - * The semantic color applied to the subtitle. + * The semantic meaning of the subtitle. + * + * @default 'auto' + */ + tone?: POSListTone; + /** + * The emphasis of the subtitle. A value other than `base` overrides `tone`. * - * @default 'neutral' + * @default 'base' */ - color?: POSListRowSubtitleColor; + color?: POSListTextColor; }; export type POSListBadge = { /** The badge text. */ text: string; /** - * The semantic appearance of the badge. + * The semantic meaning of the badge. * - * @default 'neutral' + * @default 'auto' */ - tone?: 'neutral' | 'critical' | 'warning' | 'success' | 'highlight'; + tone?: POSListTone; }; export type POSListRowImage = { /** The URL of the image displayed at the start of the row. */ @@ -208,6 +216,7 @@ export type { POSListRowImage, POSListRowStart, POSListRowSubtitle, - POSListRowSubtitleColor, + POSListTextColor, POSListToggleSwitch, + POSListTone, }; 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 c710c3bbf8..ad51a0f027 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 @@ -5,11 +5,8 @@ id: 'graphic-tee', start: { label: 'Graphic tee', - subtitles: [ - 'Black / Medium', - {content: 'Low stock', color: 'critical'}, - ], - badges: [{text: 'Sale', tone: 'highlight'}], + subtitles: ['Black / Medium', {content: 'Low stock', tone: 'critical'}], + badges: [{text: 'Sale', tone: 'info'}], }, end: {label: '$29.00', showChevron: true}, onClick: (event) => { From 31619b218224c8c9e529f58a9f4c0a8e1974dc16 Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Thu, 10 Sep 2026 12:36:43 -0400 Subject: [PATCH 14/19] Narrow POSList tone and color off BadgeProps and TextProps Removes the POSListTone and POSListTextColor duplicates; the published types narrow the shared keywords exactly as Badge and Text do. Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3 --- .../2026-10/generated_docs_data_v2.json | 167 ++++++++++++++---- .../surfaces/point-of-sale/components.d.ts | 35 ++-- .../point-of-sale/components/POSList.d.ts | 45 ++--- 3 files changed, 175 insertions(+), 72 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 6ddb27f563..1da91e1f7c 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 @@ -5176,7 +5176,7 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "TypeAliasDeclaration", "name": "POSListBadge", - "value": "{\n /** The badge text. */\n text: string;\n /**\n * The semantic meaning of the badge.\n *\n * @default 'auto'\n */\n tone?: POSListTone;\n}", + "value": "{\n /** The badge text. */\n text: string;\n /**\n * The semantic meaning of the badge, as on `s-badge`.\n *\n * @default 'auto'\n */\n tone?: Extract<\n BadgeProps['tone'],\n 'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'caution'\n >;\n}", "description": "", "members": [ { @@ -5190,23 +5190,14 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", "name": "tone", - "value": "POSListTone", - "description": "The semantic meaning of the badge.", + "value": "'info' | 'auto' | 'neutral' | 'success' | 'caution' | 'warning' | 'critical'", + "description": "The semantic meaning of the badge, as on `s-badge`.", "isOptional": true, "defaultValue": "'auto'" } ] } }, - "POSListTone": { - "src/surfaces/point-of-sale/components.ts": { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "POSListTone", - "value": "'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'caution'", - "description": "The semantic meaning of row text or a badge, as on `s-text` and `s-badge`." - } - }, "POSListRowImage": { "src/surfaces/point-of-sale/components.ts": { "filePath": "src/surfaces/point-of-sale/components.ts", @@ -5239,17 +5230,141 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "TypeAliasDeclaration", "name": "POSListRowSubtitle", - "value": "string | {\n /** The subtitle text. */\n content: string;\n /**\n * The semantic meaning of the subtitle.\n *\n * @default 'auto'\n */\n tone?: POSListTone;\n /**\n * The emphasis of the subtitle. A value other than `base` overrides `tone`.\n *\n * @default 'base'\n */\n color?: POSListTextColor;\n }", + "value": "string | {\n /** The subtitle text. */\n content: string;\n /**\n * The semantic meaning of the subtitle, as on `s-text`.\n *\n * @default 'auto'\n */\n tone?: Extract<\n TextProps['tone'],\n | 'auto'\n | 'neutral'\n | 'info'\n | 'success'\n | 'warning'\n | 'critical'\n | 'caution'\n >;\n /**\n * The emphasis of the subtitle, as on `s-text`. A value other than `base` overrides `tone`.\n *\n * @default 'base'\n */\n color?: Extract;\n }", + "description": "" + } + }, + "TextProps": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "name": "TextProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityVisibility", + "value": "'visible' | 'hidden' | 'exclusive'", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "ComponentChildren", + "description": "The content of the Text.", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "color", + "value": "ColorKeyword", + "description": "Modify the color to be more or less intense.", + "isOptional": true, + "defaultValue": "'base'" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "dir", + "value": "'ltr' | 'rtl' | 'auto' | ''", + "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (e.g. English)\n- `rtl`: languages written from right to left (e.g. Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "display", + "value": "MaybeResponsive<'auto' | 'none'>", + "description": "Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "fontVariantNumeric", + "value": "'auto' | 'normal' | 'tabular-nums'", + "description": "Set the numeric properties of the font.", + "isOptional": true, + "defaultValue": "'auto' - inherit from the parent element" + }, + { + "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": "interestFor", + "value": "string", + "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component.", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "lang", + "value": "string", + "description": "Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) (\"subtag\" label)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", + "isOptional": true, + "defaultValue": "''" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "ToneKeyword", + "description": "Sets the tone of the component, based on the intention of the information being conveyed.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "TextType", + "description": "Provide semantic meaning and default styling to the text.\n\nOther presentation properties on Text override the default styling.", + "isOptional": true, + "defaultValue": "'generic'" + } + ], + "value": "export interface TextProps\n extends GlobalProps,\n AccessibilityVisibilityProps,\n BaseTypographyProps,\n DisplayProps,\n Pick {\n /**\n * The content of the Text.\n */\n children?: ComponentChildren;\n /**\n * Provide semantic meaning and default styling to the text.\n *\n * Other presentation properties on Text override the default styling.\n *\n * @default 'generic'\n */\n type?: TextType;\n}" + } + }, + "ColorKeyword": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ColorKeyword", + "value": "'subdued' | 'base' | 'strong'", "description": "" } }, - "POSListTextColor": { + "ToneKeyword": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ToneKeyword", + "value": "'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical' | 'accent' | 'custom'", + "description": "Tone is a property for defining the color treatment of a component.\n\nA tone can apply a grouping of colors to a component. For example, critical may have a specific text color and background color.\n\nIn some cases, like for Banner, the tone may also affect the semantic and accessibility treatment of the component." + } + }, + "TextType": { "src/surfaces/point-of-sale/components.ts": { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "TypeAliasDeclaration", - "name": "POSListTextColor", - "value": "'base' | 'strong' | 'subdued'", - "description": "The emphasis of row text, as on `s-text`." + "name": "TextType", + "value": "'address' | 'redundant' | 'mark' | 'emphasis' | 'offset' | 'strong' | 'small' | 'generic'", + "description": "" } }, "POSListEvents": { @@ -6224,15 +6339,6 @@ "value": "interface Text {\n /**\n * Modify the color to be more or less intense.\n * @default 'base'\n */\n color?: ColorKeyword;\n /**\n * Provide semantic meaning and default styling to the text.\n *\n * Other presentation properties on Text override the default styling.\n * @default 'generic'\n */\n type?: 'strong' | 'small' | 'generic';\n /**\n * Sets the tone of the component, based on the intention of the information being conveyed.\n * @default 'auto'\n */\n tone?:\n | 'auto'\n | 'neutral'\n | 'info'\n | 'success'\n | 'caution'\n | 'warning'\n | 'critical';\n /** A unique identifier for the element. */\n id?: string;\n}" } }, - "ColorKeyword": { - "src/surfaces/point-of-sale/components.ts": { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "" - } - }, "ScrollBox": { "src/surfaces/point-of-sale/components.ts": { "filePath": "src/surfaces/point-of-sale/components.ts", @@ -6725,15 +6831,6 @@ "value": "interface Icon {\n /**\n * The type of icon to display.\n * @default ''\n */\n type?: SupportedIconNames;\n /** A unique identifier for the element. */\n id?: string;\n /**\n * Sets the tone of the icon, based on the intention of the information being conveyed.\n * @default 'auto'\n */\n tone?: ToneKeyword;\n /**\n * Modify the color to be more or less intense.\n * @default 'base'\n */\n color?: ColorKeyword;\n /**\n * Adjusts the size of the icon.\n * @default 'base'\n */\n size?: SizeKeyword;\n}" } }, - "ToneKeyword": { - "src/surfaces/point-of-sale/components.ts": { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ToneKeyword", - "value": "'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical' | 'accent' | 'custom'", - "description": "Tone is a property for defining the color treatment of a component.\n\nA tone can apply a grouping of colors to a component. For example, critical may have a specific text color and background color.\n\nIn some cases, like for Banner, the tone may also affect the semantic and accessibility treatment of the component." - } - }, "SupportedIconNames": { "src/surfaces/point-of-sale/components.ts": { "filePath": "src/surfaces/point-of-sale/components.ts", 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 a700ec7f6b..11fb5afb20 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 @@ -5418,44 +5418,45 @@ declare module 'preact' { declare const posListTagName = 's-pos-list'; type POSListImageDisplayStrategy = 'auto' | 'always' | 'never'; -/** The semantic meaning of row text or a badge, as on `s-text` and `s-badge`. */ -type POSListTone = - | 'auto' - | 'neutral' - | 'info' - | 'success' - | 'warning' - | 'critical' - | 'caution'; -/** The emphasis of row text, as on `s-text`. */ -type POSListTextColor = 'base' | 'strong' | 'subdued'; type POSListRowSubtitle = | string | { /** The subtitle text. */ content: string; /** - * The semantic meaning of the subtitle. + * The semantic meaning of the subtitle, as on `s-text`. * * @default 'auto' */ - tone?: POSListTone; + tone?: Extract< + TextProps['tone'], + | 'auto' + | 'neutral' + | 'info' + | 'success' + | 'warning' + | 'critical' + | 'caution' + >; /** - * The emphasis of the subtitle. A value other than `base` overrides `tone`. + * The emphasis of the subtitle, as on `s-text`. A value other than `base` overrides `tone`. * * @default 'base' */ - color?: POSListTextColor; + color?: Extract; }; type POSListBadge = { /** The badge text. */ text: string; /** - * The semantic meaning of the badge. + * The semantic meaning of the badge, as on `s-badge`. * * @default 'auto' */ - tone?: POSListTone; + tone?: Extract< + BadgeProps['tone'], + 'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'caution' + >; }; type POSListRowImage = { /** The URL of the image displayed at the start of the row. */ 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 c3e8c3557c..d53903d594 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 @@ -8,7 +8,13 @@ /* 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'; +import type { + Key, + Ref, + ComponentChild, + BadgeProps, + TextProps, +} from './components-shared.d.ts'; export type ComponentChildren = any; /** @@ -45,44 +51,45 @@ export interface CallbackEvent { declare const tagName = 's-pos-list'; export type POSListImageDisplayStrategy = 'auto' | 'always' | 'never'; -/** The semantic meaning of row text or a badge, as on `s-text` and `s-badge`. */ -export type POSListTone = - | 'auto' - | 'neutral' - | 'info' - | 'success' - | 'warning' - | 'critical' - | 'caution'; -/** The emphasis of row text, as on `s-text`. */ -export type POSListTextColor = 'base' | 'strong' | 'subdued'; export type POSListRowSubtitle = | string | { /** The subtitle text. */ content: string; /** - * The semantic meaning of the subtitle. + * The semantic meaning of the subtitle, as on `s-text`. * * @default 'auto' */ - tone?: POSListTone; + tone?: Extract< + TextProps['tone'], + | 'auto' + | 'neutral' + | 'info' + | 'success' + | 'warning' + | 'critical' + | 'caution' + >; /** - * The emphasis of the subtitle. A value other than `base` overrides `tone`. + * The emphasis of the subtitle, as on `s-text`. A value other than `base` overrides `tone`. * * @default 'base' */ - color?: POSListTextColor; + color?: Extract; }; export type POSListBadge = { /** The badge text. */ text: string; /** - * The semantic meaning of the badge. + * The semantic meaning of the badge, as on `s-badge`. * * @default 'auto' */ - tone?: POSListTone; + tone?: Extract< + BadgeProps['tone'], + 'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'caution' + >; }; export type POSListRowImage = { /** The URL of the image displayed at the start of the row. */ @@ -216,7 +223,5 @@ export type { POSListRowImage, POSListRowStart, POSListRowSubtitle, - POSListTextColor, POSListToggleSwitch, - POSListTone, }; From dee1d8aa5842d3fb835235f8899580b61a4d52c8 Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Thu, 10 Sep 2026 20:23:05 -0400 Subject: [PATCH 15/19] Replace per-row onClick with a list-level rowclick event Rows gain type ('auto' | 'text' | 'button'); the list gains onRowClick, whose event carries the activated row's id in detail. Rows no longer hold functions, so they cross the sandbox boundary as pure data and the handler receives a real Event on the declared-event path, like loadmore. Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3 --- .../2026-10/generated_docs_data_v2.json | 68 +++++++++++-------- .../surfaces/point-of-sale/components.d.ts | 25 ++++--- .../point-of-sale/components/POSList.d.ts | 23 ++++--- .../components/POSList/examples/default.jsx | 15 ++-- 4 files changed, 75 insertions(+), 56 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 1da91e1f7c..074c5516a0 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 @@ -4621,6 +4621,14 @@ "description": "Callback when more rows should be loaded.", "isOptional": true }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "onRowClick", + "value": "((event: POSListRowClickEvent) => void) | null", + "description": "Callback when a row is activated. `event.detail.id` identifies the row.", + "isOptional": true + }, { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", @@ -4631,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 * Controls whether rows reserve space for images.\n *\n * - `auto`: Displays an image only on rows that include an image source; other rows reserve no space.\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 an image only on rows that include an image source; other rows reserve no space.\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 a row is activated. `event.detail.id` identifies the row. */\n onRowClick?: ((event: POSListRowClickEvent) => void) | null;\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": { @@ -5005,12 +5013,21 @@ "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}" } }, + "POSListRowClickEvent": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "POSListRowClickEvent", + "value": "CallbackEvent & {\n detail: {id: string};\n}", + "description": "The event fired when a row is activated. `detail.id` is the `id` of the activated row." + } + }, "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 /**\n * Callback invoked when the row is activated.\n *\n * When provided, the row is interactive.\n */\n onClick?: (event: POSListRowClickEvent) => 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 * What the row is.\n *\n * - `auto`: A button when the list handles `rowclick`, otherwise static text.\n * - `text`: Static content that can't be activated.\n * - `button`: Activating the row fires `rowclick`.\n *\n * @default 'auto'\n */\n type?: 'auto' | 'text' | 'button';\n /** Optional content displayed at the end of the row. */\n end?: POSListRowEnd;\n}", "description": "", "members": [ { @@ -5031,17 +5048,18 @@ { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", - "name": "onClick", - "value": "(event: POSListRowClickEvent) => void", - "description": "Callback invoked when the row is activated.\n\nWhen provided, the row is interactive.", - "isOptional": true + "name": "start", + "value": "POSListRowStart", + "description": "The primary content displayed at the start of 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." + "name": "type", + "value": "'auto' | 'text' | 'button'", + "description": "What the row is.\n\n- `auto`: A button when the list handles `rowclick`, otherwise static text.\n- `text`: Static content that can't be activated.\n- `button`: Activating the row fires `rowclick`.", + "isOptional": true, + "defaultValue": "'auto'" } ] } @@ -5087,7 +5105,7 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "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 is disabled.\n *\n * A disabled toggle switch also blocks activation of its row, so the row's `onClick` doesn't run.\n *\n * @default false\n */\n disabled?: boolean;\n}", + "value": "{\n /**\n * The current state of the toggle switch.\n *\n * @default false\n */\n checked?: boolean;\n /**\n * Whether the toggle switch is disabled.\n *\n * A disabled toggle switch also blocks activation of its row, so the row doesn't fire `rowclick`.\n *\n * @default false\n */\n disabled?: boolean;\n}", "description": "", "members": [ { @@ -5104,31 +5122,13 @@ "syntaxKind": "PropertySignature", "name": "disabled", "value": "boolean", - "description": "Whether the toggle switch is disabled.\n\nA disabled toggle switch also blocks activation of its row, so the row's `onClick` doesn't run.", + "description": "Whether the toggle switch is disabled.\n\nA disabled toggle switch also blocks activation of its row, so the row doesn't fire `rowclick`.", "isOptional": true, "defaultValue": "false" } ] } }, - "POSListRowClickEvent": { - "src/surfaces/point-of-sale/components.ts": { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "POSListRowClickEvent", - "value": "{\n type: 'click';\n}", - "description": "The event passed to a row's `onClick`.\n\nRows are data rather than elements, so this is a plain object and not a DOM `Event`: it carries no `currentTarget` element and has no `preventDefault()`.", - "members": [ - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'click'", - "description": "" - } - ] - } - }, "POSListRowStart": { "src/surfaces/point-of-sale/components.ts": { "filePath": "src/surfaces/point-of-sale/components.ts", @@ -5381,9 +5381,17 @@ "value": "(event: CallbackEvent<\"s-pos-list\">) => void", "description": "Fired when more rows should be loaded.", "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "rowclick", + "value": "(event: POSListRowClickEvent) => void", + "description": "Fired when a row is activated. `event.detail.id` identifies the row.", + "isOptional": true } ], - "value": "interface POSListEvents {\n /** Fired when more rows should be loaded. */\n loadmore?: (event: CallbackEvent) => void;\n}" + "value": "interface POSListEvents {\n /** Fired when a row is activated. `event.detail.id` identifies the row. */\n rowclick?: (event: POSListRowClickEvent) => 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 11fb5afb20..3a4204f39d 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 @@ -5474,7 +5474,7 @@ type POSListToggleSwitch = { /** * Whether the toggle switch is disabled. * - * A disabled toggle switch also blocks activation of its row, so the row's `onClick` doesn't run. + * A disabled toggle switch also blocks activation of its row, so the row doesn't fire `rowclick`. * * @default false */ @@ -5507,13 +5507,10 @@ type POSListRowEnd = { toggleSwitch?: POSListToggleSwitch; }; /** - * The event passed to a row's `onClick`. - * - * Rows are data rather than elements, so this is a plain object and not a DOM `Event`: - * it carries no `currentTarget` element and has no `preventDefault()`. + * The event fired when a row is activated. `detail.id` is the `id` of the activated row. */ -type POSListRowClickEvent = { - type: 'click'; +type POSListRowClickEvent = CallbackEvent & { + detail: {id: string}; }; type POSListRow = { /** A unique identifier for the row. */ @@ -5521,11 +5518,15 @@ type POSListRow = { /** The primary content displayed at the start of the row. */ start: POSListRowStart; /** - * Callback invoked when the row is activated. + * What the row is. + * + * - `auto`: A button when the list handles `rowclick`, otherwise static text. + * - `text`: Static content that can't be activated. + * - `button`: Activating the row fires `rowclick`. * - * When provided, the row is interactive. + * @default 'auto' */ - onClick?: (event: POSListRowClickEvent) => void; + type?: 'auto' | 'text' | 'button'; /** Optional content displayed at the end of the row. */ end?: POSListRowEnd; }; @@ -5559,6 +5560,8 @@ interface POSListJSXProps { * @default false */ loadingMore?: boolean; + /** Callback when a row is activated. `event.detail.id` identifies the row. */ + onRowClick?: ((event: POSListRowClickEvent) => void) | null; /** 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. */ @@ -5626,6 +5629,8 @@ export type { * @publicDocs */ interface POSListEvents { + /** Fired when a row is activated. `event.detail.id` identifies the row. */ + rowclick?: (event: POSListRowClickEvent) => 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 d53903d594..fa60bbc4b6 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 @@ -107,7 +107,7 @@ export type POSListToggleSwitch = { /** * Whether the toggle switch is disabled. * - * A disabled toggle switch also blocks activation of its row, so the row's `onClick` doesn't run. + * A disabled toggle switch also blocks activation of its row, so the row doesn't fire `rowclick`. * * @default false */ @@ -140,13 +140,10 @@ export type POSListRowEnd = { toggleSwitch?: POSListToggleSwitch; }; /** - * The event passed to a row's `onClick`. - * - * Rows are data rather than elements, so this is a plain object and not a DOM `Event`: - * it carries no `currentTarget` element and has no `preventDefault()`. + * The event fired when a row is activated. `detail.id` is the `id` of the activated row. */ -export type POSListRowClickEvent = { - type: 'click'; +export type POSListRowClickEvent = CallbackEvent & { + detail: {id: string}; }; export type POSListRow = { /** A unique identifier for the row. */ @@ -154,11 +151,15 @@ export type POSListRow = { /** The primary content displayed at the start of the row. */ start: POSListRowStart; /** - * Callback invoked when the row is activated. + * What the row is. + * + * - `auto`: A button when the list handles `rowclick`, otherwise static text. + * - `text`: Static content that can't be activated. + * - `button`: Activating the row fires `rowclick`. * - * When provided, the row is interactive. + * @default 'auto' */ - onClick?: (event: POSListRowClickEvent) => void; + type?: 'auto' | 'text' | 'button'; /** Optional content displayed at the end of the row. */ end?: POSListRowEnd; }; @@ -192,6 +193,8 @@ export interface POSListJSXProps { * @default false */ loadingMore?: boolean; + /** Callback when a row is activated. `event.detail.id` identifies the row. */ + onRowClick?: ((event: POSListRowClickEvent) => void) | null; /** 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. */ 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 ad51a0f027..e13768ff9e 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 @@ -9,9 +9,6 @@ badges: [{text: 'Sale', tone: 'info'}], }, end: {label: '$29.00', showChevron: true}, - onClick: (event) => { - console.log('Selected row: graphic-tee', event); - }, }, { id: 'canvas-tote', @@ -20,11 +17,17 @@ subtitles: ['Natural'], }, end: {label: '$18.00', showChevron: true}, - onClick: (event) => { - console.log('Selected row: canvas-tote', event); - }, + }, + { + id: 'total', + type: 'text', + start: {label: 'Total'}, + end: {label: '$47.00'}, }, ]} + onRowClick={(event) => { + console.log('Selected row', event.detail.id); + }} > Products ; From d3d8ac3b2ba9b2e8c873050e5f8c53c78f0d510e Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Fri, 11 Sep 2026 00:14:42 -0400 Subject: [PATCH 16/19] Document that POSList rowclick listener errors are not reported by POS Row activation is a declared element event; a rejection in the listener stays in the extension like any other element event. Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3 --- .../pos_ui_extensions/2026-10/generated_docs_data_v2.json | 2 +- .../ui-extensions/src/surfaces/point-of-sale/components.d.ts | 1 + .../src/surfaces/point-of-sale/components/POSList.d.ts | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) 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 074c5516a0..82d581e6da 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 @@ -5019,7 +5019,7 @@ "syntaxKind": "TypeAliasDeclaration", "name": "POSListRowClickEvent", "value": "CallbackEvent & {\n detail: {id: string};\n}", - "description": "The event fired when a row is activated. `detail.id` is the `id` of the activated row." + "description": "The event fired when a row is activated. `detail.id` is the `id` of the activated row. Errors thrown or promises rejected in the listener stay in the extension; POS does not report them." } }, "POSListRow": { 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 3a4204f39d..f584331e38 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 @@ -5508,6 +5508,7 @@ type POSListRowEnd = { }; /** * The event fired when a row is activated. `detail.id` is the `id` of the activated row. + * Errors thrown or promises rejected in the listener stay in the extension; POS does not report them. */ type POSListRowClickEvent = CallbackEvent & { detail: {id: string}; 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 fa60bbc4b6..5b5807c319 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 @@ -141,6 +141,7 @@ export type POSListRowEnd = { }; /** * The event fired when a row is activated. `detail.id` is the `id` of the activated row. + * Errors thrown or promises rejected in the listener stay in the extension; POS does not report them. */ export type POSListRowClickEvent = CallbackEvent & { detail: {id: string}; From 081f69a2dd14a6cd63ed90c095a71e2d3054d7a2 Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Fri, 11 Sep 2026 09:44:34 -0400 Subject: [PATCH 17/19] Publish POSList tone and color as literal unions The docs generator leaves Extract<...> inside object type aliases unresolved, so the reference page showed the raw expression. Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3 --- .../2026-10/generated_docs_data_v2.json | 157 +++--------------- .../surfaces/point-of-sale/components.d.ts | 20 ++- .../point-of-sale/components/POSList.d.ts | 28 ++-- 3 files changed, 44 insertions(+), 161 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 82d581e6da..280787aa4a 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 @@ -5176,7 +5176,7 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "TypeAliasDeclaration", "name": "POSListBadge", - "value": "{\n /** The badge text. */\n text: string;\n /**\n * The semantic meaning of the badge, as on `s-badge`.\n *\n * @default 'auto'\n */\n tone?: Extract<\n BadgeProps['tone'],\n 'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'caution'\n >;\n}", + "value": "{\n /** The badge text. */\n text: string;\n /**\n * The semantic meaning of the badge, as on `s-badge`.\n *\n * @default 'auto'\n */\n tone?:\n | 'auto'\n | 'neutral'\n | 'info'\n | 'success'\n | 'warning'\n | 'critical'\n | 'caution';\n}", "description": "", "members": [ { @@ -5190,7 +5190,7 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", "name": "tone", - "value": "'info' | 'auto' | 'neutral' | 'success' | 'caution' | 'warning' | 'critical'", + "value": "| 'auto'\n | 'neutral'\n | 'info'\n | 'success'\n | 'warning'\n | 'critical'\n | 'caution'", "description": "The semantic meaning of the badge, as on `s-badge`.", "isOptional": true, "defaultValue": "'auto'" @@ -5230,140 +5230,7 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "TypeAliasDeclaration", "name": "POSListRowSubtitle", - "value": "string | {\n /** The subtitle text. */\n content: string;\n /**\n * The semantic meaning of the subtitle, as on `s-text`.\n *\n * @default 'auto'\n */\n tone?: Extract<\n TextProps['tone'],\n | 'auto'\n | 'neutral'\n | 'info'\n | 'success'\n | 'warning'\n | 'critical'\n | 'caution'\n >;\n /**\n * The emphasis of the subtitle, as on `s-text`. A value other than `base` overrides `tone`.\n *\n * @default 'base'\n */\n color?: Extract;\n }", - "description": "" - } - }, - "TextProps": { - "src/surfaces/point-of-sale/components.ts": { - "filePath": "src/surfaces/point-of-sale/components.ts", - "name": "TextProps", - "description": "", - "members": [ - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "accessibilityVisibility", - "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", - "isOptional": true, - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "ComponentChildren", - "description": "The content of the Text.", - "isOptional": true - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "color", - "value": "ColorKeyword", - "description": "Modify the color to be more or less intense.", - "isOptional": true, - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "dir", - "value": "'ltr' | 'rtl' | 'auto' | ''", - "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (e.g. English)\n- `rtl`: languages written from right to left (e.g. Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", - "isOptional": true, - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "display", - "value": "MaybeResponsive<'auto' | 'none'>", - "description": "Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "isOptional": true, - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "fontVariantNumeric", - "value": "'auto' | 'normal' | 'tabular-nums'", - "description": "Set the numeric properties of the font.", - "isOptional": true, - "defaultValue": "'auto' - inherit from the parent element" - }, - { - "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": "interestFor", - "value": "string", - "description": "ID of a component that should respond to interest (e.g. hover and focus) on this component.", - "isOptional": true - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "lang", - "value": "string", - "description": "Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) (\"subtag\" label)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", - "isOptional": true, - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "tone", - "value": "ToneKeyword", - "description": "Sets the tone of the component, based on the intention of the information being conveyed.", - "isOptional": true, - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "TextType", - "description": "Provide semantic meaning and default styling to the text.\n\nOther presentation properties on Text override the default styling.", - "isOptional": true, - "defaultValue": "'generic'" - } - ], - "value": "export interface TextProps\n extends GlobalProps,\n AccessibilityVisibilityProps,\n BaseTypographyProps,\n DisplayProps,\n Pick {\n /**\n * The content of the Text.\n */\n children?: ComponentChildren;\n /**\n * Provide semantic meaning and default styling to the text.\n *\n * Other presentation properties on Text override the default styling.\n *\n * @default 'generic'\n */\n type?: TextType;\n}" - } - }, - "ColorKeyword": { - "src/surfaces/point-of-sale/components.ts": { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "" - } - }, - "ToneKeyword": { - "src/surfaces/point-of-sale/components.ts": { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ToneKeyword", - "value": "'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical' | 'accent' | 'custom'", - "description": "Tone is a property for defining the color treatment of a component.\n\nA tone can apply a grouping of colors to a component. For example, critical may have a specific text color and background color.\n\nIn some cases, like for Banner, the tone may also affect the semantic and accessibility treatment of the component." - } - }, - "TextType": { - "src/surfaces/point-of-sale/components.ts": { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextType", - "value": "'address' | 'redundant' | 'mark' | 'emphasis' | 'offset' | 'strong' | 'small' | 'generic'", + "value": "string | {\n /** The subtitle text. */\n content: string;\n /**\n * The semantic meaning of the subtitle, as on `s-text`.\n *\n * @default 'auto'\n */\n tone?:\n | 'auto'\n | 'neutral'\n | 'info'\n | 'success'\n | 'warning'\n | 'critical'\n | 'caution';\n /**\n * The emphasis of the subtitle, as on `s-text`. A value other than `base` overrides `tone`.\n *\n * @default 'base'\n */\n color?: 'base' | 'strong' | 'subdued';\n }", "description": "" } }, @@ -6347,6 +6214,15 @@ "value": "interface Text {\n /**\n * Modify the color to be more or less intense.\n * @default 'base'\n */\n color?: ColorKeyword;\n /**\n * Provide semantic meaning and default styling to the text.\n *\n * Other presentation properties on Text override the default styling.\n * @default 'generic'\n */\n type?: 'strong' | 'small' | 'generic';\n /**\n * Sets the tone of the component, based on the intention of the information being conveyed.\n * @default 'auto'\n */\n tone?:\n | 'auto'\n | 'neutral'\n | 'info'\n | 'success'\n | 'caution'\n | 'warning'\n | 'critical';\n /** A unique identifier for the element. */\n id?: string;\n}" } }, + "ColorKeyword": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ColorKeyword", + "value": "'subdued' | 'base' | 'strong'", + "description": "" + } + }, "ScrollBox": { "src/surfaces/point-of-sale/components.ts": { "filePath": "src/surfaces/point-of-sale/components.ts", @@ -6839,6 +6715,15 @@ "value": "interface Icon {\n /**\n * The type of icon to display.\n * @default ''\n */\n type?: SupportedIconNames;\n /** A unique identifier for the element. */\n id?: string;\n /**\n * Sets the tone of the icon, based on the intention of the information being conveyed.\n * @default 'auto'\n */\n tone?: ToneKeyword;\n /**\n * Modify the color to be more or less intense.\n * @default 'base'\n */\n color?: ColorKeyword;\n /**\n * Adjusts the size of the icon.\n * @default 'base'\n */\n size?: SizeKeyword;\n}" } }, + "ToneKeyword": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ToneKeyword", + "value": "'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical' | 'accent' | 'custom'", + "description": "Tone is a property for defining the color treatment of a component.\n\nA tone can apply a grouping of colors to a component. For example, critical may have a specific text color and background color.\n\nIn some cases, like for Banner, the tone may also affect the semantic and accessibility treatment of the component." + } + }, "SupportedIconNames": { "src/surfaces/point-of-sale/components.ts": { "filePath": "src/surfaces/point-of-sale/components.ts", 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 f584331e38..cf76ad2547 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 @@ -5428,22 +5428,20 @@ type POSListRowSubtitle = * * @default 'auto' */ - tone?: Extract< - TextProps['tone'], + tone?: | 'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' - | 'caution' - >; + | 'caution'; /** * The emphasis of the subtitle, as on `s-text`. A value other than `base` overrides `tone`. * * @default 'base' */ - color?: Extract; + color?: 'base' | 'strong' | 'subdued'; }; type POSListBadge = { /** The badge text. */ @@ -5453,10 +5451,14 @@ type POSListBadge = { * * @default 'auto' */ - tone?: Extract< - BadgeProps['tone'], - 'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'caution' - >; + tone?: + | 'auto' + | 'neutral' + | 'info' + | 'success' + | 'warning' + | 'critical' + | 'caution'; }; type POSListRowImage = { /** The URL of the image displayed at the start of the row. */ 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 5b5807c319..7441795bb8 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 @@ -8,13 +8,7 @@ /* eslint-disable import-x/namespace */ // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment /// -import type { - Key, - Ref, - ComponentChild, - BadgeProps, - TextProps, -} from './components-shared.d.ts'; +import type {Key, Ref, ComponentChild} from './components-shared.d.ts'; export type ComponentChildren = any; /** @@ -61,22 +55,20 @@ export type POSListRowSubtitle = * * @default 'auto' */ - tone?: Extract< - TextProps['tone'], + tone?: | 'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' - | 'caution' - >; + | 'caution'; /** * The emphasis of the subtitle, as on `s-text`. A value other than `base` overrides `tone`. * * @default 'base' */ - color?: Extract; + color?: 'base' | 'strong' | 'subdued'; }; export type POSListBadge = { /** The badge text. */ @@ -86,10 +78,14 @@ export type POSListBadge = { * * @default 'auto' */ - tone?: Extract< - BadgeProps['tone'], - 'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'caution' - >; + tone?: + | 'auto' + | 'neutral' + | 'info' + | 'success' + | 'warning' + | 'critical' + | 'caution'; }; export type POSListRowImage = { /** The URL of the image displayed at the start of the row. */ From 6e4011420d9ed8ddb1ce4b8163b4be76136917c8 Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Fri, 11 Sep 2026 10:50:41 -0400 Subject: [PATCH 18/19] Drop the auto POSList row type; rows are buttons by default Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3 --- .../pos_ui_extensions/2026-10/generated_docs_data_v2.json | 8 ++++---- .../src/surfaces/point-of-sale/components.d.ts | 7 +++---- .../src/surfaces/point-of-sale/components/POSList.d.ts | 7 +++---- 3 files changed, 10 insertions(+), 12 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 280787aa4a..65c3c3b193 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 @@ -5027,7 +5027,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 * What the row is.\n *\n * - `auto`: A button when the list handles `rowclick`, otherwise static text.\n * - `text`: Static content that can't be activated.\n * - `button`: Activating the row fires `rowclick`.\n *\n * @default 'auto'\n */\n type?: 'auto' | 'text' | 'button';\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 * What the row is.\n *\n * - `button`: Activating the row fires `rowclick`.\n * - `text`: Static content that can't be activated.\n *\n * @default 'button'\n */\n type?: 'text' | 'button';\n /** Optional content displayed at the end of the row. */\n end?: POSListRowEnd;\n}", "description": "", "members": [ { @@ -5056,10 +5056,10 @@ "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'auto' | 'text' | 'button'", - "description": "What the row is.\n\n- `auto`: A button when the list handles `rowclick`, otherwise static text.\n- `text`: Static content that can't be activated.\n- `button`: Activating the row fires `rowclick`.", + "value": "'text' | 'button'", + "description": "What the row is.\n\n- `button`: Activating the row fires `rowclick`.\n- `text`: Static content that can't be activated.", "isOptional": true, - "defaultValue": "'auto'" + "defaultValue": "'button'" } ] } 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 cf76ad2547..103cbfdad8 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 @@ -5523,13 +5523,12 @@ type POSListRow = { /** * What the row is. * - * - `auto`: A button when the list handles `rowclick`, otherwise static text. - * - `text`: Static content that can't be activated. * - `button`: Activating the row fires `rowclick`. + * - `text`: Static content that can't be activated. * - * @default 'auto' + * @default 'button' */ - type?: 'auto' | 'text' | 'button'; + type?: 'text' | 'button'; /** 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 7441795bb8..729d1c7037 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 @@ -150,13 +150,12 @@ export type POSListRow = { /** * What the row is. * - * - `auto`: A button when the list handles `rowclick`, otherwise static text. - * - `text`: Static content that can't be activated. * - `button`: Activating the row fires `rowclick`. + * - `text`: Static content that can't be activated. * - * @default 'auto' + * @default 'button' */ - type?: 'auto' | 'text' | 'button'; + type?: 'text' | 'button'; /** Optional content displayed at the end of the row. */ end?: POSListRowEnd; }; From 822fcbbd0edbcaebc31c78ad8ffe59feb87279c5 Mon Sep 17 00:00:00 2001 From: Ajanth Uthayan Date: Fri, 11 Sep 2026 11:08:26 -0400 Subject: [PATCH 19/19] Make a POSList row end either trailing text or a toggle switch Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3 --- .../2026-10/generated_docs_data_v2.json | 167 ++++++++---------- .../surfaces/point-of-sale/components.d.ts | 34 ++-- .../point-of-sale/components/POSList.d.ts | 34 ++-- 3 files changed, 106 insertions(+), 129 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 65c3c3b193..7752495fb3 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 @@ -5069,35 +5069,95 @@ "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 /**\n * Whether to display a chevron at the end of the row.\n *\n * @default false\n */\n showChevron?: boolean;\n /**\n * A toggle switch displayed at the end of the row.\n *\n * When provided, the toggle switch replaces `label` and `showChevron`.\n */\n toggleSwitch?: POSListToggleSwitch;\n}", - "description": "", + "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 toggleSwitch?: never;\n } | {\n label?: never;\n showChevron?: never;\n /** A toggle switch displayed at the end of the row, in place of trailing text and chevron. */\n toggleSwitch: POSListToggleSwitch;\n }", + "description": "" + } + }, + "Switch": { + "src/surfaces/point-of-sale/components.ts": { + "filePath": "src/surfaces/point-of-sale/components.ts", + "name": "Switch", + "description": "Allows merchants to toggle a setting on or off.", + "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", - "name": "label", + "name": "accessibilityLabel", + "value": "string", + "description": "A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers.", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "checked", + "value": "boolean", + "description": "Whether the control is active.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "defaultChecked", + "value": "boolean", + "description": "Whether the control is active by default.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "details", "value": "string", - "description": "Supporting text displayed at the end of the row.", + "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.\n\nThis will also be exposed to screen reader users.", "isOptional": true }, { "filePath": "src/surfaces/point-of-sale/components.ts", "syntaxKind": "PropertySignature", - "name": "showChevron", + "name": "disabled", "value": "boolean", - "description": "Whether to display a chevron at the end of the row.", + "description": "Disables the control, disallowing any interaction.", "isOptional": true, "defaultValue": "false" }, { "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.\n\nWhen provided, the toggle switch replaces `label` and `showChevron`.", + "name": "error", + "value": "string", + "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "Visual content to use as the control label.", + "isOptional": true + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "labelAccessibilityVisibility", + "value": "'visible' | 'exclusive'", + "description": "Changes the visibility of the component's label.\n\n- `visible`: the label is visible to all users.\n- `exclusive`: the label is visually hidden but remains in the accessibility tree.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/point-of-sale/components.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The value used in form data when the control is checked.", "isOptional": true } - ] + ], + "value": "interface Switch {\n /** The value used in form data when the control is checked. */\n value?: string;\n /**\n * Whether the control is active by default.\n * @implementation `defaultChecked` reflects to the `checked` attribute.\n * @default false\n */\n defaultChecked?: boolean;\n /**\n * Disables the control, disallowing any interaction.\n * @default false\n */\n disabled?: boolean;\n /**\n * A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced.\n * This can also be used to display a control without a visual label, while still providing context to users using screen readers.\n */\n accessibilityLabel?: string;\n /**\n * Whether the control is active.\n * @default false\n */\n checked?: boolean;\n /** Visual content to use as the control label. */\n label?: string;\n /**\n * Additional text to provide context or guidance for the field.\n * This text is displayed along with the field and its label\n * to offer more information or instructions to the user.\n *\n * This will also be exposed to screen reader users.\n */\n details?: string;\n /**\n * Indicate an error to the user. The field will be given a specific stylistic treatment\n * to communicate problems that have to be resolved immediately.\n */\n error?: string;\n /**\n * Changes the visibility of the component's label.\n *\n * - `visible`: the label is visible to all users.\n * - `exclusive`: the label is visually hidden but remains in the accessibility tree.\n * @default 'visible'\n */\n labelAccessibilityVisibility?: ExtractStrict<\n 'visible' | 'hidden' | 'exclusive',\n 'visible' | 'exclusive'\n >;\n}" } }, "POSListToggleSwitch": { @@ -5622,93 +5682,6 @@ "value": "interface SwitchEvents {\n input?: (event: CallbackEvent) => void;\n change?: (event: CallbackEvent) => void;\n}" } }, - "Switch": { - "src/surfaces/point-of-sale/components.ts": { - "filePath": "src/surfaces/point-of-sale/components.ts", - "name": "Switch", - "description": "Allows merchants to toggle a setting on or off.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "string", - "description": "A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "checked", - "value": "boolean", - "description": "Whether the control is active.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "defaultChecked", - "value": "boolean", - "description": "Whether the control is active by default.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "details", - "value": "string", - "description": "Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.\n\nThis will also be exposed to screen reader users.", - "isOptional": true - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Disables the control, disallowing any interaction.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "error", - "value": "string", - "description": "Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.", - "isOptional": true - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "label", - "value": "string", - "description": "Visual content to use as the control label.", - "isOptional": true - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "labelAccessibilityVisibility", - "value": "'visible' | 'exclusive'", - "description": "Changes the visibility of the component's label.\n\n- `visible`: the label is visible to all users.\n- `exclusive`: the label is visually hidden but remains in the accessibility tree.", - "isOptional": true, - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/point-of-sale/components.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The value used in form data when the control is checked.", - "isOptional": true - } - ], - "value": "interface Switch {\n /** The value used in form data when the control is checked. */\n value?: string;\n /**\n * Whether the control is active by default.\n * @implementation `defaultChecked` reflects to the `checked` attribute.\n * @default false\n */\n defaultChecked?: boolean;\n /**\n * Disables the control, disallowing any interaction.\n * @default false\n */\n disabled?: boolean;\n /**\n * A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced.\n * This can also be used to display a control without a visual label, while still providing context to users using screen readers.\n */\n accessibilityLabel?: string;\n /**\n * Whether the control is active.\n * @default false\n */\n checked?: boolean;\n /** Visual content to use as the control label. */\n label?: string;\n /**\n * Additional text to provide context or guidance for the field.\n * This text is displayed along with the field and its label\n * to offer more information or instructions to the user.\n *\n * This will also be exposed to screen reader users.\n */\n details?: string;\n /**\n * Indicate an error to the user. The field will be given a specific stylistic treatment\n * to communicate problems that have to be resolved immediately.\n */\n error?: string;\n /**\n * Changes the visibility of the component's label.\n *\n * - `visible`: the label is visible to all users.\n * - `exclusive`: the label is visually hidden but remains in the accessibility tree.\n * @default 'visible'\n */\n labelAccessibilityVisibility?: ExtractStrict<\n 'visible' | 'hidden' | 'exclusive',\n 'visible' | 'exclusive'\n >;\n}" - } - }, "TabsEvents": { "src/surfaces/point-of-sale/components.ts": { "filePath": "src/surfaces/point-of-sale/components.ts", 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 103cbfdad8..199c6bcabd 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,22 +5492,24 @@ type POSListRowStart = { /** 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. - * - * @default false - */ - showChevron?: boolean; - /** - * A toggle switch displayed at the end of the row. - * - * When provided, the toggle switch replaces `label` and `showChevron`. - */ - toggleSwitch?: POSListToggleSwitch; -}; +type POSListRowEnd = + | { + /** Supporting text displayed at the end of the row. */ + label?: string; + /** + * Whether to display a chevron at the end of the row. + * + * @default false + */ + showChevron?: boolean; + toggleSwitch?: never; + } + | { + label?: never; + showChevron?: never; + /** A toggle switch displayed at the end of the row, in place of trailing text and chevron. */ + toggleSwitch: POSListToggleSwitch; + }; /** * The event fired when a row is activated. `detail.id` is the `id` of the activated row. * Errors thrown or promises rejected in the listener stay in the extension; POS does not report them. 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 729d1c7037..87dee30a0b 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,22 +119,24 @@ export type POSListRowStart = { /** 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. - * - * @default false - */ - showChevron?: boolean; - /** - * A toggle switch displayed at the end of the row. - * - * When provided, the toggle switch replaces `label` and `showChevron`. - */ - toggleSwitch?: POSListToggleSwitch; -}; +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. + * + * @default false + */ + showChevron?: boolean; + toggleSwitch?: never; + } + | { + label?: never; + showChevron?: never; + /** A toggle switch displayed at the end of the row, in place of trailing text and chevron. */ + toggleSwitch: POSListToggleSwitch; + }; /** * The event fired when a row is activated. `detail.id` is the `id` of the activated row. * Errors thrown or promises rejected in the listener stay in the extension; POS does not report them.