@pega/sdk 0.0.2 → 0.0.4

package/templates/react-sdk-reference/.github/skills/field-skills/SemanticLink.md

@@ -18,29 +18,31 @@ Renders a clickable link (`<a>` or button-style link) that navigates to a Pega c
 
 ## Props (component-specific)
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `text` | `string` | — | The visible link text; renders `'--'` if empty |
-| `resourcePayload` | `any` | `{}` | Resource payload containing `caseClassName`, `resourceType`, etc. |
-| `resourceParams` | `any` | `{}` | Resource parameters containing `workID` for case navigation |
-| `previewKey` | `string \| null` | — | Case preview key for opening work item by handle |
-| `onClick` | `(event) => void` | — | External click handler (received but not directly used — link has its own handler) |
-| `testId` | `string` | `''` | Test identifier |
-| `referenceType` | `string \| null` | — | `'DATA'` or case reference type |
-| `dataRelationshipContext` | `string \| null` | `null` | Context for data relationship resolution |
-| `contextPage` | `any` | — | Context page with `classID` |
+| Prop                      | Type              | Default | Description                                                                        |
+| ------------------------- | ----------------- | ------- | ---------------------------------------------------------------------------------- |
+| `text`                    | `string`          | —       | The visible link text; renders `'--'` if empty                                     |
+| `resourcePayload`         | `any`             | `{}`    | Resource payload containing `caseClassName`, `resourceType`, etc.                  |
+| `resourceParams`          | `any`             | `{}`    | Resource parameters containing `workID` for case navigation                        |
+| `previewKey`              | `string \| null`  | —       | Case preview key for opening work item by handle                                   |
+| `onClick`                 | `(event) => void` | —       | External click handler (received but not directly used — link has its own handler) |
+| `testId`                  | `string`          | `''`    | Test identifier                                                                    |
+| `referenceType`           | `string \| null`  | —       | `'DATA'` or case reference type                                                    |
+| `dataRelationshipContext` | `string \| null`  | `null`  | Context for data relationship resolution                                           |
+| `contextPage`             | `any`             | —       | Context page with `classID`                                                        |
 
 ## Behavioral Contract
 
 ### URL Resolution
 
 **Step 1: Determine if this is a data reference:**
+
 - `isData = false`
 - `shouldTreatAsDataReference = !previewKey && resourcePayload.caseClassName` (non-preview, has class)
 - If `contextPage?.classID`: override `resourcePayload.caseClassName = contextPage.classID`
 - If `resourcePayload.caseClassName === WORKCLASS`: override with actual case class from `pConnect.getValue(CASE_INFO_CLASSID)`
 
 **Step 2a: Data reference (`referenceType === 'DATA'` or `shouldTreatAsDataReference`):**
+
 ```
 const dataRefContext = semanticUtils.getDataReferenceInfo(pConnect, dataRelationshipContext, contextPage)
 dataViewName = dataRefContext.dataContext
@@ -49,12 +51,14 @@ isData = true
 ```
 
 **Step 2b: Resource type DATA (`resourcePayload.resourceType === 'DATA'`):**
+
 - Look up data page: `dataViewName = PCore.getDataTypeUtils().getLookUpDataPage(resourcePayload.className)`
 - Look up page info and parameters
 - Build `payload` from parameters by resolving property annotations
 - `isData = true`
 
 **Step 3: Build `linkURL`:**
+
 - If `isData && dataViewName && payload`: `linkURL = PCore.getSemanticUrlUtils().getResolvedSemanticURL(ACTION_SHOWDATA, { pageName: 'pyDetails', dataViewName }, payload)`
 - Else (case): fix `resourceParams.objectID` for empty workID edge case, then `linkURL = PCore.getSemanticUrlUtils().getResolvedSemanticURL(ACTION_OPENWORKBYHANDLE, resourcePayload, resourceParams)`
 
@@ -87,18 +91,19 @@ No explicit `displayMode` handling — `SemanticLink` is always rendered as a li
 
 Derived from `makeStyles` and MUI `Link` props:
 
-| Property | Value |
-|----------|-------|
-| Display | Inline link (button role) |
-| Padding | `8px` all sides |
-| Margin | `8px` all sides |
-| Color | Primary link color (blue, default theme) |
-| Font weight | 400 |
-| Underline | Default link underline on hover |
-| Cursor | Pointer |
-| Text | `text` prop value, or `'--'` if empty |
+| Property    | Value                                    |
+| ----------- | ---------------------------------------- |
+| Display     | Inline link (button role)                |
+| Padding     | `8px` all sides                          |
+| Margin      | `8px` all sides                          |
+| Color       | Primary link color (blue, default theme) |
+| Font weight | 400                                      |
+| Underline   | Default link underline on hover          |
+| Cursor      | Pointer                                  |
+| Text        | `text` prop value, or `'--'` if empty    |
 
 **CSS-only implementation:**
+
 ```css
 .semantic-link {
   display: inline-block;
@@ -112,7 +117,9 @@ Derived from `makeStyles` and MUI `Link` props:
   border: none;
   font-size: inherit;
 }
-.semantic-link:hover { text-decoration: underline; }
+.semantic-link:hover {
+  text-decoration: underline;
+}
 ```
 
 ## Edge Cases & Special Logic
@@ -140,9 +147,9 @@ Derived from `makeStyles` and MUI `Link` props:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                                |
+| ------------------ | ---------------------------------------------------- |
 | Default (CSS only) | `<button class="semantic-link">` with anchor styling |
-| MUI | `<Link component='button'>` |
-| Ant Design | `<Typography.Link>` or `<Button type="link">` |
-| Chakra UI | `<Link as="button">` |
+| MUI                | `<Link component='button'>`                          |
+| Ant Design         | `<Typography.Link>` or `<Button type="link">`        |
+| Chakra UI          | `<Link as="button">`                                 |

package/templates/react-sdk-reference/.github/skills/field-skills/TextArea.md

@@ -18,11 +18,12 @@ Renders an editable multi-line text area. Used for long-form text input such as
 
 ## Props (component-specific)
 
-| Prop | Type | Description |
-|------|------|-------------|
+| Prop            | Type             | Description                                                |
+| --------------- | ---------------- | ---------------------------------------------------------- |
 | `fieldMetadata` | `any` (optional) | Metadata object; used to read `maxLength` for the textarea |
 
 All other props come from `PConnFieldProps`. Import type as:
+
 ```typescript
 import type { PConnFieldProps } from '@pega/sdk-react';
 ```
@@ -51,21 +52,22 @@ Set `readOnly` on the textarea element (NOT a read-only version via `TextInput`
 
 Derived from the reference component's MUI props:
 
-| Property | Standard (editable) | Read-only |
-|----------|---------------------|-----------|
-| Width | 100% | 100% |
-| Min rows | 5 | 5 |
-| Max rows | 5 (scrollable beyond) | 5 |
-| Border | 1px solid (outlined) | None (standard/flat) |
-| Border radius | 4px | — |
-| Label | Floating label | Floating label |
-| Helper text | Below textarea | Below textarea |
-| Error state | Red border + red helper text | — |
-| Resize | Vertical resize handle (browser default) | Same |
-| Font size | 0.875rem | 0.875rem |
-| Padding | 8px 14px | — |
+| Property      | Standard (editable)                      | Read-only            |
+| ------------- | ---------------------------------------- | -------------------- |
+| Width         | 100%                                     | 100%                 |
+| Min rows      | 5                                        | 5                    |
+| Max rows      | 5 (scrollable beyond)                    | 5                    |
+| Border        | 1px solid (outlined)                     | None (standard/flat) |
+| Border radius | 4px                                      | —                    |
+| Label         | Floating label                           | Floating label       |
+| Helper text   | Below textarea                           | Below textarea       |
+| Error state   | Red border + red helper text             | —                    |
+| Resize        | Vertical resize handle (browser default) | Same                 |
+| Font size     | 0.875rem                                 | 0.875rem             |
+| Padding       | 8px 14px                                 | —                    |
 
 **CSS-only implementation notes:**
+
 - `textarea { min-height: calc(5 * 1.4375em + 16px); max-height: calc(5 * 1.4375em + 16px); overflow-y: auto; resize: vertical; }`
 - Error: `border-color: #d32f2f`
 - Read-only: `border: none; background: transparent;`
@@ -87,10 +89,10 @@ Derived from the reference component's MUI props:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<textarea rows="5">` with floating label |
-| MUI | `<TextField multiline minRows={5} maxRows={5} />` |
-| Ant Design | `<Input.TextArea rows={5} />` |
-| Chakra UI | `<Textarea />` |
-| Shadcn/ui | `<Textarea />` |
+| Design System      | Recommended Component                             |
+| ------------------ | ------------------------------------------------- |
+| Default (CSS only) | `<textarea rows="5">` with floating label         |
+| MUI                | `<TextField multiline minRows={5} maxRows={5} />` |
+| Ant Design         | `<Input.TextArea rows={5} />`                     |
+| Chakra UI          | `<Textarea />`                                    |
+| Shadcn/ui          | `<Textarea />`                                    |

package/templates/react-sdk-reference/.github/skills/field-skills/TextContent.md

@@ -29,15 +29,15 @@ interface TextContentProps extends PConnProps {
 }
 ```
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `content` | `string` | The text string to render |
+| Prop        | Type                                                                      | Description                                       |
+| ----------- | ------------------------------------------------------------------------- | ------------------------------------------------- |
+| `content`   | `string`                                                                  | The text string to render                         |
 | `displayAs` | `'Paragraph' \| 'Heading 1' \| 'Heading 2' \| 'Heading 3' \| 'Heading 4'` | How to render the text — maps to typography level |
 
 ## Behavioral Contract
 
 1. **No state, no effects** — purely presentational. Render `content` using the appropriate typography element for `displayAs`.
-2. **Mapping:** 
+2. **Mapping:**
    - `'Paragraph'` → `<p>` / body text
    - `'Heading 1'` → `<h1>`
    - `'Heading 2'` → `<h2>`
@@ -57,23 +57,39 @@ Always read-only — there is no editable state.
 
 Derived from standard HTML typography:
 
-| `displayAs` | Element | Font size | Font weight |
-|-------------|---------|-----------|-------------|
-| `Paragraph` | `<p>` / `body1` | 1rem (16px) | 400 |
-| `Heading 1` | `<h1>` | 2.5rem | 300 |
-| `Heading 2` | `<h2>` | 2rem | 300 |
-| `Heading 3` | `<h3>` | 1.75rem | 400 |
-| `Heading 4` | `<h4>` | 1.5rem | 400 |
+| `displayAs` | Element         | Font size   | Font weight |
+| ----------- | --------------- | ----------- | ----------- |
+| `Paragraph` | `<p>` / `body1` | 1rem (16px) | 400         |
+| `Heading 1` | `<h1>`          | 2.5rem      | 300         |
+| `Heading 2` | `<h2>`          | 2rem        | 300         |
+| `Heading 3` | `<h3>`          | 1.75rem     | 400         |
+| `Heading 4` | `<h4>`          | 1.5rem      | 400         |
 
 Color inherits from the surrounding text color. No padding, margin, border, or background beyond what the browser/design-system applies to the heading element.
 
 **CSS-only implementation notes:**
+
 ```css
-.text-content-h1 { font-size: 2.5rem; font-weight: 300; }
-.text-content-h2 { font-size: 2rem; font-weight: 300; }
-.text-content-h3 { font-size: 1.75rem; font-weight: 400; }
-.text-content-h4 { font-size: 1.5rem; font-weight: 400; }
-.text-content-body { font-size: 1rem; font-weight: 400; }
+.text-content-h1 {
+  font-size: 2.5rem;
+  font-weight: 300;
+}
+.text-content-h2 {
+  font-size: 2rem;
+  font-weight: 300;
+}
+.text-content-h3 {
+  font-size: 1.75rem;
+  font-weight: 400;
+}
+.text-content-h4 {
+  font-size: 1.5rem;
+  font-weight: 400;
+}
+.text-content-body {
+  font-size: 1rem;
+  font-weight: 400;
+}
 ```
 
 ## Edge Cases & Special Logic
@@ -93,9 +109,9 @@ Color inherits from the surrounding text color. No padding, margin, border, or b
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | Native `<h1>`–`<h4>` or `<p>` |
-| MUI | `<Typography variant='h1' \| 'h2' \| 'h3' \| 'h4' \| 'body1'>` |
-| Ant Design | `<Typography.Title level={1-4}>` or `<Typography.Text>` |
-| Chakra UI | `<Heading as='h1'-'h4'>` or `<Text>` |
+| Design System      | Recommended Component                                          |
+| ------------------ | -------------------------------------------------------------- |
+| Default (CSS only) | Native `<h1>`–`<h4>` or `<p>`                                  |
+| MUI                | `<Typography variant='h1' \| 'h2' \| 'h3' \| 'h4' \| 'body1'>` |
+| Ant Design         | `<Typography.Title level={1-4}>` or `<Typography.Text>`        |
+| Chakra UI          | `<Heading as='h1'-'h4'>` or `<Text>`                           |

package/templates/react-sdk-reference/.github/skills/field-skills/TextInput.md

@@ -18,11 +18,12 @@ Renders a single-line editable text field. It is the simplest and most foundatio
 
 ## Props (component-specific)
 
-| Prop | Type | Description |
-|------|------|-------------|
+| Prop            | Type             | Description                                             |
+| --------------- | ---------------- | ------------------------------------------------------- |
 | `fieldMetadata` | `any` (optional) | Metadata object; used to read `maxLength` for the input |
 
 All other props come from `PConnFieldProps`. Import type as:
+
 ```typescript
 import type { PConnFieldProps } from '@pega/sdk-react';
 ```
@@ -52,20 +53,21 @@ Set the `readOnly` attribute on the underlying input element. Use a visually fla
 
 Derived from the reference component's MUI props and styles:
 
-| Property | Standard (editable) | Read-only |
-|----------|---------------------|-----------|
-| Width | 100% of container | 100% of container |
-| Height / size | Small (`height ~40px`) | Small |
-| Border | 1px solid (outlined) | None (standard variant) |
-| Border radius | 4px | — |
-| Label | Floating label (above input when focused/filled) | Floating label |
-| Helper text | Shown below input | Shown below input |
-| Error state | Red border + red helper text | — |
-| Disabled | Reduced opacity (~0.38), not-allowed cursor | — |
-| Padding (input) | 8px 14px | — |
-| Font size | 0.875rem (14px) | 0.875rem |
+| Property        | Standard (editable)                              | Read-only               |
+| --------------- | ------------------------------------------------ | ----------------------- |
+| Width           | 100% of container                                | 100% of container       |
+| Height / size   | Small (`height ~40px`)                           | Small                   |
+| Border          | 1px solid (outlined)                             | None (standard variant) |
+| Border radius   | 4px                                              | —                       |
+| Label           | Floating label (above input when focused/filled) | Floating label          |
+| Helper text     | Shown below input                                | Shown below input       |
+| Error state     | Red border + red helper text                     | —                       |
+| Disabled        | Reduced opacity (~0.38), not-allowed cursor      | —                       |
+| Padding (input) | 8px 14px                                         | —                       |
+| Font size       | 0.875rem (14px)                                  | 0.875rem                |
 
 **CSS-only implementation notes:**
+
 - Floating label: use `<label>` positioned absolutely, translate upward on `:focus-within` or when input has value.
 - Error state: add `.error` class → border-color: `#d32f2f`; helper text color: `#d32f2f`.
 - Outlined box shadow on focus: `0 0 0 2px rgba(25, 118, 210, 0.2)`.
@@ -88,15 +90,16 @@ Derived from the reference component's MUI props and styles:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<input type="text">` with floating label pattern |
-| MUI | `<TextField variant='outlined' size='small' fullWidth />` |
-| Ant Design | `<Input />` |
-| Chakra UI | `<Input />` |
-| Shadcn/ui | `<Input />` |
+| Design System      | Recommended Component                                     |
+| ------------------ | --------------------------------------------------------- |
+| Default (CSS only) | `<input type="text">` with floating label pattern         |
+| MUI                | `<TextField variant='outlined' size='small' fullWidth />` |
+| Ant Design         | `<Input />`                                               |
+| Chakra UI          | `<Input />`                                               |
+| Shadcn/ui          | `<Input />`                                               |
 
 When implementing in a specific design system, map the following behaviors:
+
 - `error={status === 'error'}` → error/danger variant
 - `helperText` → helper/description slot below the input
 - `label` → field label (floating or static depending on design system)

package/templates/react-sdk-reference/.github/skills/field-skills/Time.md

@@ -19,6 +19,7 @@ Renders a time-only picker. Stores time as `HH:mm:ss` string. Displays time in 1
 ## Props (component-specific)
 
 No props beyond `PConnFieldProps`. Import type as:
+
 ```typescript
 import type { PConnFieldProps } from '@pega/sdk-react';
 ```
@@ -47,15 +48,15 @@ Delegate to `TextInput`: `return <TextInput {...props} />`.
 
 ## Visual Specifications
 
-| Property | Value |
-|----------|-------|
-| Width | Auto (time picker natural width) |
-| Size | Small |
-| Variant | Outlined |
-| Format | `hh:mm a` (12-hour) |
-| Placeholder | `hh:mm am` |
-| Minutes step | 5 |
-| Error state | Red border + red helper text |
+| Property     | Value                            |
+| ------------ | -------------------------------- |
+| Width        | Auto (time picker natural width) |
+| Size         | Small                            |
+| Variant      | Outlined                         |
+| Format       | `hh:mm a` (12-hour)              |
+| Placeholder  | `hh:mm am`                       |
+| Minutes step | 5                                |
+| Error state  | Red border + red helper text     |
 
 **Note on known issue:** Keyboard input in the minute field may jump to the am/pm field after one digit — same as DateTime, this is a known date picker library quirk.
 
@@ -80,9 +81,9 @@ Delegate to `TextInput`: `return <TextInput {...props} />`.
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<input type="time">` (24h, no am/pm) |
-| MUI | `<TimePicker minutesStep={5} format='hh:mm a' />` |
-| Ant Design | `<TimePicker format="hh:mm a" minuteStep={5} />` |
-| Chakra UI | Third-party time picker |
+| Design System      | Recommended Component                             |
+| ------------------ | ------------------------------------------------- |
+| Default (CSS only) | `<input type="time">` (24h, no am/pm)             |
+| MUI                | `<TimePicker minutesStep={5} format='hh:mm a' />` |
+| Ant Design         | `<TimePicker format="hh:mm a" minuteStep={5} />`  |
+| Chakra UI          | Third-party time picker                           |

package/templates/react-sdk-reference/.github/skills/field-skills/URL.md

@@ -19,6 +19,7 @@ Renders a single-line text input of type `url`. Provides browser-native URL form
 ## Props (component-specific)
 
 No props beyond `PConnFieldProps`. Import type as:
+
 ```typescript
 import type { PConnFieldProps } from '@pega/sdk-react';
 ```
@@ -47,15 +48,15 @@ Delegate to `TextInput`: `return <TextInput {...props} />`.
 
 Identical to `TextInput` visually — no additional adornments.
 
-| Property | Value |
-|----------|-------|
-| Width | 100% |
-| Size | Small (~40px height) |
-| Variant | Outlined |
-| Border | 1px solid outlined |
-| Border radius | 4px |
-| Error state | Red border + red helper text |
-| Helper text | Below input |
+| Property      | Value                        |
+| ------------- | ---------------------------- |
+| Width         | 100%                         |
+| Size          | Small (~40px height)         |
+| Variant       | Outlined                     |
+| Border        | 1px solid outlined           |
+| Border radius | 4px                          |
+| Error state   | Red border + red helper text |
+| Helper text   | Below input                  |
 
 No special icon or adornment — the only difference from `TextInput` is `type='url'`.
 
@@ -77,9 +78,9 @@ No special icon or adornment — the only difference from `TextInput` is `type='
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<input type="url">` |
-| MUI | `<TextField type='url' />` |
-| Ant Design | `<Input type="url" />` |
-| Chakra UI | `<Input type="url" />` |
+| Design System      | Recommended Component      |
+| ------------------ | -------------------------- |
+| Default (CSS only) | `<input type="url">`       |
+| MUI                | `<TextField type='url' />` |
+| Ant Design         | `<Input type="url" />`     |
+| Chakra UI          | `<Input type="url" />`     |

package/templates/react-sdk-reference/.github/skills/field-skills/UserReference.md

@@ -24,24 +24,24 @@ Renders a user selection field. Can display as a typeahead search box or a dropd
 import type { PConnProps } from '@pega/sdk-react';
 ```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `displayAs` | `string` (optional) | `''` | `'Drop-down list'` or `'Search box'` — determines the input type |
-| `displayMode` | `string` (optional) | `''` | `'DISPLAY_ONLY'` or `'STACKED_LARGE_VAL'` |
-| `label` | `string` (optional) | `''` | Field label |
-| `value` | `any` (optional) | `''` | Raw value from Pega store (may be a user object or string ID) |
-| `testId` | `string` (optional) | `''` | Test identifier |
-| `placeholder` | `string` (optional) | `''` | Placeholder text |
-| `helperText` | `string` (optional) | `''` | Helper text |
-| `disabled` | `boolean` (optional) | `false` | |
-| `readOnly` | `boolean` (optional) | `false` | |
-| `required` | `boolean` (optional) | `false` | |
-| `validatemessage` | `string` (optional) | `''` | Validation error message |
-| `showAsFormattedText` | `boolean` (optional) | `false` | When `true` in read-only mode, show formatted user name text |
-| `additionalProps` | `object` (optional) | `{}` | Extra props forwarded to the child component |
-| `hideLabel` | `boolean` (optional) | `false` | |
-| `variant` | `string` (optional) | `'inline'` | Layout variant |
-| `onChange` | `any` (optional) | — | Change handler (passed through to child) |
+| Prop                  | Type                 | Default    | Description                                                      |
+| --------------------- | -------------------- | ---------- | ---------------------------------------------------------------- |
+| `displayAs`           | `string` (optional)  | `''`       | `'Drop-down list'` or `'Search box'` — determines the input type |
+| `displayMode`         | `string` (optional)  | `''`       | `'DISPLAY_ONLY'` or `'STACKED_LARGE_VAL'`                        |
+| `label`               | `string` (optional)  | `''`       | Field label                                                      |
+| `value`               | `any` (optional)     | `''`       | Raw value from Pega store (may be a user object or string ID)    |
+| `testId`              | `string` (optional)  | `''`       | Test identifier                                                  |
+| `placeholder`         | `string` (optional)  | `''`       | Placeholder text                                                 |
+| `helperText`          | `string` (optional)  | `''`       | Helper text                                                      |
+| `disabled`            | `boolean` (optional) | `false`    |                                                                  |
+| `readOnly`            | `boolean` (optional) | `false`    |                                                                  |
+| `required`            | `boolean` (optional) | `false`    |                                                                  |
+| `validatemessage`     | `string` (optional)  | `''`       | Validation error message                                         |
+| `showAsFormattedText` | `boolean` (optional) | `false`    | When `true` in read-only mode, show formatted user name text     |
+| `additionalProps`     | `object` (optional)  | `{}`       | Extra props forwarded to the child component                     |
+| `hideLabel`           | `boolean` (optional) | `false`    |                                                                  |
+| `variant`             | `string` (optional)  | `'inline'` | Layout variant                                                   |
+| `onChange`            | `any` (optional)     | —          | Change handler (passed through to child)                         |
 
 ## Behavioral Contract
 
@@ -57,10 +57,12 @@ import type { PConnProps } from '@pega/sdk-react';
 ### Mount effect: `useEffect([displayAs, readOnly, showAsFormattedText, value])`
 
 **Case 1: `userId && readOnly && showAsFormattedText`**
+
 - If `isUserNameAvailable(value)`: `setUserName(value.userName)` — username already in value object
 - Else: call `PCore.getUserApi().getOperatorDetails(userId)` and extract `pyUserName` from response
 
 **Case 2: `displayAs === 'Drop-down list'`**
+
 - Call `PCore.getRestClient().invokeRestApi('getListData', { queryPayload: { dataViewName: OPERATORS_DP } })`
 - Map results to `{key: pyUserIdentifier, value: pyUserName}` array
 - `setDropDownDataSource(mapped)`
@@ -80,17 +82,27 @@ else if displayAs === 'Drop-down list' → Dropdown component
 ### Subsection: Search box mode (`displayAs === 'Search box'`)
 
 Render `AutoComplete` with hardcoded columns for operator search:
+
 ```typescript
 columns = [
   { value: 'pyUserName', display: 'true', useForSearch: true, primary: 'true' },
-  { value: 'pyUserIdentifier', setProperty: 'Associated property', key: 'true', display: 'true', secondary: 'true', useForSearch: 'true' }
-]
+  {
+    value: 'pyUserIdentifier',
+    setProperty: 'Associated property',
+    key: 'true',
+    display: 'true',
+    secondary: 'true',
+    useForSearch: 'true',
+  },
+];
 ```
+
 Props: `datasource={OPERATORS_DP}`, `listType='datapage'`, `value={userId}`, plus label/placeholder/readOnly/disabled/required/helperText/validatemessage/hideLabel/onChange/additionalProps/testId.
 
 ### Subsection: Dropdown mode (`displayAs === 'Drop-down list'`)
 
 Render `Dropdown` with:
+
 - `datasource={dropDownDataSource}` (fetched user list)
 - `listType='associated'`
 - `value={userId}`
@@ -99,6 +111,7 @@ Render `Dropdown` with:
 ### Subsection: Formatted text read-only (`readOnly && showAsFormattedText && userId`)
 
 Render a label + name display:
+
 ```html
 <div>
   <caption-text>{label}</caption-text>
@@ -109,13 +122,14 @@ Render a label + name display:
 ### Re-render optimization
 
 Export with `memo` using custom comparison `comparisonFn`:
+
 ```typescript
 const comparisonFn = (prevProps, nextProps) =>
   getUserId(prevProps.value) === getUserId(nextProps.value) &&
   prevProps.validatemessage === nextProps.validatemessage &&
   prevProps.required === nextProps.required &&
   prevProps.disabled === nextProps.disabled &&
-  prevProps.readOnly === nextProps.readOnly
+  prevProps.readOnly === nextProps.readOnly;
 ```
 
 `export default memo(UserReference, comparisonFn)`
@@ -123,6 +137,7 @@ const comparisonFn = (prevProps, nextProps) =>
 ## Display Mode Rendering
 
 Uses resolved `userName` (not raw `value`):
+
 - **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={userName || ''} />`
 - **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={userName || ''} variant='stacked' />`
 
@@ -131,20 +146,28 @@ Uses resolved `userName` (not raw `value`):
 ## Visual Specifications
 
 The visual appearance is determined by the child component rendered:
+
 - **Search box**: Same as `AutoComplete` — combobox input with outlined border, floating label
 - **Dropdown**: Same as `Dropdown` — select field with outlined border, floating label
 - **Formatted text read-only**:
 
-| Property | Value |
-|----------|-------|
-| Label | Caption-size text (small, secondary color) above the name |
-| Name | Body text (normal size) |
-| Spacing | Standard form field spacing |
+| Property | Value                                                     |
+| -------- | --------------------------------------------------------- |
+| Label    | Caption-size text (small, secondary color) above the name |
+| Name     | Body text (normal size)                                   |
+| Spacing  | Standard form field spacing                               |
 
 **CSS-only for formatted text:**
+
 ```css
-.user-reference-label { font-size: 0.75rem; color: rgba(0,0,0,0.6); margin-bottom: 4px; }
-.user-reference-name { font-size: 1rem; }
+.user-reference-label {
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+  margin-bottom: 4px;
+}
+.user-reference-name {
+  font-size: 1rem;
+}
 ```
 
 ## Edge Cases & Special Logic
@@ -172,9 +195,9 @@ The visual appearance is determined by the child component rendered:
 
 Listed design systems are examples only.
 
-| Mode | Underlying control |
-|------|--------------------|
-| Search box | AutoComplete (combobox/typeahead) |
-| Drop-down list | Dropdown (select) |
-| Formatted text read-only | Label + text display |
-| Display mode | FieldValueList |
+| Mode                     | Underlying control                |
+| ------------------------ | --------------------------------- |
+| Search box               | AutoComplete (combobox/typeahead) |
+| Drop-down list           | Dropdown (select)                 |
+| Formatted text read-only | Label + text display              |
+| Display mode             | FieldValueList                    |