@pega/sdk 0.0.3 → 0.0.5

package/templates/react-sdk-reference/.cursor/rules/skills/design-system-extension-skills/RichTextEditor.mdrules

@@ -1,211 +0,0 @@
----
-description: DSE component skill: RichTextEditor
-alwaysApply: false
----
-
-# Skill: RichTextEditor
-
-WYSIWYG rich text editor field backed by TinyMCE. Supports editable and read-only modes, optional label, helper text, error/required states, and a file picker for image uploads.
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a rich text editing area (WYSIWYG) for Pega case properties that store HTML content. In **edit mode**, uses TinyMCE with a bottom toolbar. In **read-only mode**, renders the HTML content as a read-only `<div>`. Wraps the editor in a `FormControl` with an optional floating label and helper text, consistent with other field components.
-
-The editor is a `forwardRef` component — the ref is connected to the underlying TinyMCE editor instance.
-
-> **Note:** TinyMCE is the reference editor library. In non-MUI or non-TinyMCE implementations, this component can be replaced with an alternative rich text library (Quill, ProseMirror, Slate.js, etc.). The behavioral contract below remains the same regardless of library.
-
-## Pega Metadata
-
-- **Pega Name:** `RichTextEditor`
-- **Registration key:** `RichTextEditor` (in `component-map.ts`)
-- **Does NOT extend PConnProps** — receives all data as explicit field-like props
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `id` | `string` | No | DOM id for the editor element. Defaults to a generated UID |
-| `defaultValue` | `string` | Yes | Initial HTML content of the editor |
-| `label` | `string` | Yes | Field label displayed above the editor |
-| `labelHidden` | `boolean` | Yes | If `true`, hide the label |
-| `info` | `string` | No | Helper text displayed below the editor |
-| `testId` | `string` | No | Value for `data-test-id` attribute on the FormControl wrapper |
-| `placeholder` | `string` | No | Placeholder text shown in empty editor |
-| `disabled` | `boolean` | Yes | If `true`, editor is in read-only/disabled mode with no toolbar |
-| `required` | `boolean` | Yes | If `true`, marks the field as required |
-| `readOnly` | `boolean` | Yes | If `true`, render as static HTML display (not interactive editor) |
-| `error` | `boolean` | Yes | If `true`, applies error styling to the FormControl |
-| `onBlur` | `React.EventHandler<any>` | Yes | Called when the editor loses focus |
-| `onChange` | `React.EventHandler<any>` | Yes | Called when the editor content changes |
-
-## Behavioral Contract
-
-### 1. Ref Forwarding
-
-The component uses `forwardRef`. Internally, use `useConsolidatedRef(ref)` from `@pega/sdk-react` to create `editorRef` — the TinyMCE editor instance is stored here after initialization.
-
-### 2. UID for id
-
-If `id` is not provided, generate one using `useUID()` from `@pega/sdk-react`.
-
-### 3. Read-Only Mode
-
-If `readOnly` is `true`, render:
-```
-<div
-  key={id}
-  id={id}
-  className='readonly-richtext-editor'
-  dangerouslySetInnerHTML={{ __html: defaultValue || '--' }}
-/>
-```
-Skip the TinyMCE Editor entirely in this case.
-
-### 4. Edit Mode (TinyMCE)
-
-When `readOnly` is `false`, render `<Editor>` from `@tinymce/tinymce-react` with:
-
-| Config | Value |
-|--------|-------|
-| `tinymceScriptSrc` | `'tinymce/tinymce.min.js'` (local script) |
-| `id` | The resolved `id` |
-| `initialValue` | `defaultValue` |
-| `disabled` | `disabled` prop |
-| `onBlur` | `onBlur` prop |
-| `onEditorChange` | `onChange` prop |
-| `onInit` | Store editor in `editorRef.current` |
-
-### 5. TinyMCE `init` Configuration
-
-| Option | Value |
-|--------|-------|
-| `skin` | `'oxide-dark'` (dark mode) / `'oxide'` (light mode) — detect from theme |
-| `menubar` | `false` |
-| `statusbar` | `false` |
-| `branding` | `false` |
-| `min_height` | `130` |
-| `toolbar_location` | `'bottom'` |
-| `plugins` | `['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize']` |
-| `autoresize_bottom_margin` | `0` |
-| `toolbar` | `'blocks \| bold italic strikethrough \| bullist numlist outdent indent \| link image'` (or `false` when `disabled`) |
-| `paste_data_images` | `true` |
-| `file_picker_types` | `'image'` |
-| `file_picker_callback` | See file picker section below |
-| `content_style` | Theme-aware CSS string (see below) |
-| `placeholder` | `placeholder` prop |
-
-### 6. Theme-Aware Content Style
-
-Inject a `content_style` string that uses theme values for the editor body:
-```css
-body {
-  font-family: <theme.typography.fontFamily>;
-  font-size: <theme.typography.fontSize>px;
-  color: <theme.palette.text.primary>;
-  background: <theme.palette.background.paper>;
-}
-a { color: <theme.palette.primary.main>; }
-h1-h6 { color: <theme.palette.text.primary>; font-family: <theme.typography.fontFamily>; }
-blockquote { color: <theme.palette.text.secondary>; border-left: 4px solid <theme.palette.primary.light>; padding-left: 8px; }
-ul, ol { color: <theme.palette.text.primary>; }
-input, textarea, select {
-  background: <theme.palette.background.paper>;
-  color: <theme.palette.text.primary>;
-  border: 1px solid <theme.palette.divider>;
-  border-radius: 4px; padding: 6px 10px; font-size: 1em; font-family: inherit;
-}
-.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
-  color: <theme.palette.text.secondary>; opacity: 0.7;
-}
-```
-
-### 7. File Picker Callback
-
-When a user clicks the image upload in the toolbar:
-1. Create a hidden `<input type='file' accept='image/*'>`.
-2. On file selected: read as DataURL using `FileReader`.
-3. On `FileReader.load`: create a blob in TinyMCE's blob cache (`editorRef.current.editorUpload.blobCache`), then call `cb(blobInfo.blobUri(), { title: file.name })`.
-4. Programmatically click the input to open the file dialog.
-
-### 8. readOnly/disabled Transition (after initial mount)
-
-Use `useAfterInitialEffect([readOnly, disabled])` from `@pega/sdk-react`:
-```
-editorRef?.current.mode.set(readOnly || disabled ? 'readonly' : 'design')
-```
-This switches the TinyMCE mode without re-mounting the editor.
-
-### 9. Wrapper Structure
-
-```
-<FormControl variant='standard' data-test-id={testId} error={error} required={required}>
-  {!labelHidden && <InputLabel className='fieldLabel'>{label}</InputLabel>}
-  {richTextComponent}   ← either readOnly div or <Editor>
-  {info && <FormHelperText>{info}</FormHelperText>}
-</FormControl>
-```
-
-## Visual Specifications
-
-Derived from `RichTextEditor.tsx` makeStyles:
-
-### Label
-
-| Property | Value |
-|----------|-------|
-| Position | relative |
-| Transform | `translate(0, 0px) scale(1)` (non-floating — stays at top) |
-| Margin bottom | 5px |
-| Color | `theme.palette.text.secondary` |
-
-**CSS-only implementation notes:**
-- Label: `display: block; font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 5px`.
-- Editor container: `min-height: 130px; border: 1px solid var(--divider); border-radius: 4px`.
-- Toolbar (if CSS-only): render buttons at bottom of the editor area.
-- Read-only display: `div.readonly-richtext-editor { padding: 8px; min-height: 130px; background: var(--bg-paper); color: var(--text-primary) }`.
-- Error state: `border-color: var(--error-color)`.
-- Helper text: `font-size: 0.75rem; color: var(--text-secondary); margin-top: 4px`.
-- Error helper text: `color: var(--error-color)`.
-
-## Edge Cases & Special Logic
-
-- `defaultValue` in read-only mode falls back to `'--'` if empty.
-- `readOnly` and `disabled` are both handled — `readOnly` suppresses the editor entirely; `disabled` keeps the editor mounted but in TinyMCE's `readonly` mode with no toolbar.
-- Mode transitions (readOnly/disabled changing after mount) use `useAfterInitialEffect` — this hook fires on updates but NOT on the initial render, preventing a double-set on mount.
-- The file picker creates a transient `<input type='file'>` element that is never appended to the DOM — it is clicked programmatically.
-- `id` must be stable across renders — use `useUID()` only as a fallback when `id` prop is absent.
-
-## Dependencies
-
-- `Editor` from `@tinymce/tinymce-react` — TinyMCE React wrapper (can be swapped for Quill, ProseMirror, Slate.js, etc.)
-- `useAfterInitialEffect`, `useConsolidatedRef`, `useUID` from `@pega/sdk-react` — SDK hooks
-- `useTheme` from `@mui/material` — for theme-aware content styles
-- `FormControl`, `FormHelperText`, `InputLabel` from `@mui/material` — wrapper structure
-
-## Design System Mapping
-
-**UI control type:** Rich text / WYSIWYG editor field with label, helper text, and error state.
-
-Listed design systems are examples only.
-
-| Design System | Rich Text Library |
-|---|---|
-| Default (CSS only) | `contenteditable` div with custom toolbar, or `<textarea>` |
-| MUI | TinyMCE (`@tinymce/tinymce-react`) wrapped in `<FormControl>` |
-| Ant Design | Quill (`react-quill`) or TinyMCE inside an `<AntForm.Item>` |
-| Chakra UI | Quill or Slate.js inside a `<FormControl>` |
-| Shadcn/ui | Tiptap (`@tiptap/react`) inside a field wrapper |
-
-When implementing in a specific design system, map the following:
-- `defaultValue` → initial HTML content
-- `readOnly={true}` → always render as static HTML `<div>` (no editor instance)
-- `disabled={true}` → editor mounted but read-only (toolbar hidden)
-- `onBlur` / `onChange` → editor's blur and content-change callbacks
-- `error` + `info` → FormControl error state + helper/description text below
-- `labelHidden` → conditionally render the label element
-- File picker → `<input type='file' accept='image/*'>` triggered programmatically

package/templates/react-sdk-reference/.cursor/rules/skills/design-system-extension-skills/WssQuickCreate.mdrules

@@ -1,140 +0,0 @@
----
-description: DSE component skill: WssQuickCreate
-alwaysApply: false
----
-
-# Skill: WssQuickCreate
-
-Quick-launch action grid that displays a heading and a set of labeled buttons, each optionally with an icon, for creating WSS cases.
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a titled section of clickable action cards arranged in a responsive CSS grid. Each card contains an optional icon image and a label. Used in workspace/portal contexts to provide quick access to case creation actions.
-
-## Pega Metadata
-
-- **Pega Name:** `WssQuickCreate`
-- **Registration key:** `WssQuickCreate` (in `component-map.ts`)
-- **Does NOT use `getPConnect`** — receives all data as direct props
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `heading` | `string` | Yes | Section title rendered as an `<h1>` |
-| `actions` | `Array<{ label: string; onClick: () => void; icon?: string }>` | No | List of action items; each has a label, click handler, and optional icon URL |
-
-## Behavioral Contract
-
-1. Render the `heading` in an `<h1>` element with `id='quick-links-heading'` and class `quick-links-heading`.
-2. Render a `<ul>` with `id='quick-links'` and class `quick-link-ul-list`.
-3. If `actions` is provided, iterate and render one `<li>` per action.
-4. Each `<li>` has the `quickLinkList` style class (styled card with border, rounded corners, and background color).
-5. Inside each `<li>`, render a `<button>` with class `quick-link-button` and the action's `onClick` handler.
-6. Button content is a `<span class='quick-link-button-span'>` (column flex layout) containing:
-   - If `action.icon` is provided: `<img class='quick-link-icon' src={action.icon} />`
-   - `<span>{action.label}</span>`
-7. If `actions` is not provided or is empty, render only the heading with an empty list.
-
-## Visual Specifications
-
-Derived from `WssQuickCreate.css` and component makeStyles:
-
-### Section Heading
-
-| Property | Value |
-|----------|-------|
-| Tag | `<h1>` |
-| Margin top | 8px |
-
-### Action List
-
-| Property | Value |
-|----------|-------|
-| List style | none |
-| Padding | 0 |
-| Display | grid |
-| Grid template columns | `repeat(auto-fit, minmax(min(20ch, 100%), 1fr))` (responsive columns) |
-| Gap | 1rem |
-
-### Action Card (`<li>`)
-
-| Property | Value |
-|----------|-------|
-| Background (light mode) | `var(--link-button-color)` |
-| Background (dark mode) | `var(--app-background-color)` |
-| Text color | `var(--app-text-color)` |
-| Border radius | 16px |
-| Border | `1px solid var(--app-primary-color)` |
-
-### Action Button
-
-| Property | Value |
-|----------|-------|
-| Text transform | capitalize |
-| Font size | 16px |
-| Color | `var(--app-text-color)` |
-| Height | 10rem |
-| Width | 100% |
-| Background | transparent (inherits card) |
-
-### Button Inner Span
-
-| Property | Value |
-|----------|-------|
-| Display | flex |
-| Flex direction | column |
-| Align items | center |
-| Gap | 0.5rem |
-
-### Icon
-
-| Property | Value |
-|----------|-------|
-| Flex shrink | 0 |
-| Object fit | contain |
-| Width | 3rem |
-| Height | 3rem |
-
-**CSS-only implementation notes:**
-- Action list: `list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr)); gap: 1rem`.
-- Action card: `background: var(--link-button-color); border-radius: 16px; border: 1px solid var(--app-primary-color); color: var(--app-text-color)`.
-- Button: `width: 100%; height: 10rem; background: transparent; border: none; cursor: pointer; text-transform: capitalize; font-size: 16px; color: inherit`.
-- Button content: `display: flex; flex-direction: column; align-items: center; gap: 0.5rem`.
-- Icon: `width: 3rem; height: 3rem; object-fit: contain; flex-shrink: 0`.
-
-## Edge Cases & Special Logic
-
-- If `actions` is `undefined` or empty, render the heading and empty `<ul>` without errors.
-- If `action.icon` is `undefined` or an empty string, render only the label span (no `<img>` element).
-- Labels are displayed as-is (no truncation); the grid layout handles responsive sizing naturally.
-
-## Dependencies
-
-- No Pega SDK imports required (no `getPConnect`)
-- No helper utilities required
-- Icon images are passed as URLs (strings) via `action.icon` — no internal icon system used
-
-## Design System Mapping
-
-**UI control type:** Responsive grid of action cards / quick-launch buttons.
-
-Listed design systems are examples only.
-
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | CSS grid `<ul>` + `<button>` cards with flex icon/label layout |
-| MUI | `<Button>` inside Grid items; use `makeStyles` or `sx` for card styling |
-| Ant Design | `<List>` with `<Card>` items or `<Button>` blocks inside a CSS grid |
-| Chakra UI | `<SimpleGrid>` with `<Button>` children; `flexDir='column'` |
-| Shadcn/ui | Grid of custom `<Button variant='outline'>` cards |
-
-When implementing in a specific design system, map the following:
-- Card border/background → design system's card or outlined button variant
-- Button `onClick` → standard click handler prop
-- Icon + label stacked layout → `flexDirection: 'column'` button content
-- Responsive grid → design system's grid or `SimpleGrid` equivalent

package/templates/react-sdk-reference/.cursor/rules/skills/field-skills/AutoComplete.mdrules

@@ -1,117 +0,0 @@
----
-description: Field component skill: AutoComplete
-alwaysApply: false
----
-
-# Skill: AutoComplete
-
-Typeahead / autocomplete search field that fetches options from a data page or associated list, binds to a Pega case property.
-
-> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, props interface, display modes, event handling, and registration patterns common to ALL field components.
-
----
-
-## Component Purpose
-
-Renders a typeahead input that shows a dropdown of matching options as the user types. Options are loaded from a Pega data page or associated list. The stored value is always the **key** of the selected option, while the displayed text is the resolved **value** (label). Delegates read-only to `TextInput` with the resolved label.
-
-## Pega Metadata
-
-- **Pega Name:** `AutoComplete`
-- **Type / Subtype:** `Field` / `Picklist`
-- **Registration key:** `AutoComplete` (in `component-map.ts`)
-
-## Props (component-specific)
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `listType` | `string` | `'associated'` or `'datapage'` |
-| `datasource` | `any` | Datasource (array for associated, string name for datapage) |
-| `columns` | `any[]` | Column config for extracting key/value from datasource records |
-| `parameters` | `any` (optional) | Query parameters for data page calls |
-| `deferDatasource` | `boolean` (optional) | If true, transform `datasourceMetadata` into datapage config |
-| `datasourceMetadata` | `any` (optional) | Metadata for deferred datasource |
-| `onRecordChange` | `any` (optional) | Callback fired on selection change |
-| `additionalProps` | `object` (optional) | Extra props passed through to the autocomplete |
-
-## Behavioral Contract
-
-1. **Options state:** Maintain `options` as `Array<{key: string, value: string}>`.
-2. **Input value state:** Maintain `inputValue` (string) — the typed text in the input box. Separate from `selectedValue` (the displayed label of the selected item).
-3. **Datasource change detection:** Use `isDeepEqual` to compare incoming `datasource` with cached `theDatasource`. If different, update `theDatasource` to trigger `useEffect`.
-4. **Deferred datasource transformation:** Same pattern as Dropdown — if `deferDatasource && datasourceMetadata?.datasource?.name`:
-   - Set `listType = 'datapage'`, `datasource = datasourceName`
-   - Flatten `parameters`
-   - Build `columns` from `propertyForDisplayText` / `propertyForValue`
-5. **Column preprocessing:** Strip leading `.` from column `value` fields.
-6. **Loading options (`associated`):** In `useEffect` watching `theDatasource`, call `Utils.getOptionList(props, pConn.getDataObject(''))`.
-7. **Loading options (`datapage`):** In mount-time `useEffect` (when NOT in display mode), call `getDataPage(datasource, parameters, context)`. Map results using `getDisplayFieldsMetaData(columns)`.
-8. **Selected value resolution:** On render, find `selectedValue` by matching `value` (stored key) against `options`:
-   ```
-   index = options.findIndex(el => el.key === value)
-   selectedValue = index > -1 ? options[index].value : value
-   ```
-9. **On selection change:**
-   - `val = newValue ? newValue.key : ''`
-   - Commit via `handleEvent(actionsApi, 'changeNblur', propName, val)`.
-   - If `onRecordChange`, call it with the event.
-10. **On input change:** Update `inputValue` state (typed text, does NOT commit to store).
-11. **Read-only:** Resolve the option label (`options.find(opt => opt.key === value)?.value`), delegate to `TextInput` with resolved label: `return <TextInput {...props} value={theValAsString} />`.
-
-## Display Mode Rendering
-
-- **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={value} />` — raw stored value (key string).
-- **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />`.
-
-## Read-Only Rendering
-
-Resolve the display label from options and delegate: `return <TextInput {...props} value={theValAsString} />`.
-
-## Visual Specifications
-
-| Property | Value |
-|----------|-------|
-| Width | 100% |
-| Size | Small |
-| Variant | Outlined |
-| Dropdown popup | Opens below input, shows filtered options |
-| Input | Combobox pattern — types to filter, click arrow to open all |
-| Error state | Red border + red helper text |
-| Label | Floating label |
-| Placeholder | From `placeholder` prop |
-
-**Autocomplete behavior:**
-- The controlled `value` is the selected option object (or `selectedValue` string).
-- The controlled `inputValue` is the typed text.
-- `getOptionLabel` returns `option.value` (the display label).
-- `isOptionEqualToValue` returns `option.value` (used for selection matching).
-
-## Edge Cases & Special Logic
-
-- `inputValue || selectedValue` — the input displays `inputValue` when typing, `selectedValue` when a selection has been made and nothing is typed.
-- When `value` is a key that does not yet exist in `options` (e.g., options still loading), display `value` directly as `selectedValue`.
-- Options array uses `{key, value}` — `key` = stored value, `value` = display label.
-- `context` is obtained from `pConn.getContextName()` and passed to `getDataPage`.
-
-## Dependencies
-
-- `isDeepEqual` from `fast-deep-equal/react`.
-- `Utils.getOptionList()` from `../../helpers/utils`.
-- `getDataPage()` from `../../helpers/data_page`.
-- `handleEvent` from `../../helpers/event-utils`.
-- `getComponentFromRegistry('TextInput')` for read-only.
-- `getComponentFromRegistry('FieldValueList')` for display modes.
-- Typeahead/autocomplete UI widget.
-
-## Design System Mapping
-
-**UI control type:** Combobox / typeahead autocomplete input.
-
-Listed design systems are examples only.
-
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<input>` + custom dropdown list with filtering |
-| MUI | `<Autocomplete>` with `renderInput` using `<TextField>` |
-| Ant Design | `<AutoComplete>` or `<Select showSearch>` |
-| Chakra UI | `<Combobox>` (Downshift) or third-party |

package/templates/react-sdk-reference/.cursor/rules/skills/field-skills/CancelAlert.mdrules

@@ -1,208 +0,0 @@
----
-description: Field component skill: CancelAlert
-alwaysApply: false
----
-
-# Skill: CancelAlert
-
-Cancel confirmation dialog that offers the user a choice between going back or discarding/deleting the current case/action.
-
-> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, props interface, display modes, event handling, and registration patterns common to ALL field components.
-
----
-
-## Component Purpose
-
-Renders a full-screen modal overlay with a confirmation dialog. Presents two actions: "Go back" (continue working) and "Discard" (cancel/delete). Handles different cancellation scenarios: standard case creation stage, local action, bulk action, data object, and reverse coexistence. Shows a snackbar notification on delete failure.
-
-## Pega Metadata
-
-- **Pega Name:** `CancelAlert`
-- **Type / Subtype:** Internal modal/alert
-- **Registration key:** `CancelAlert` (in `component-map.ts`)
-
-## Props (component-specific)
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `heading` | `string` | Modal dialog heading text |
-| `content` | `string` | Modal dialog body/description text |
-| `itemKey` | `string` | The container item ID for the case being cancelled (aliased as `containerItemID`) |
-| `hideDelete` | `boolean` | Whether to hide/disable the delete option |
-| `isDataObject` | `boolean` | Whether this is cancelling a data object (not a work item) |
-| `skipReleaseLockRequest` | `any` | Whether to skip lock release when removing container item |
-| `dismiss` | `Function` | Callback to close/dismiss this dialog (called with `true` to indicate confirmed dismiss) |
-
-## Behavioral Contract
-
-### Setup
-
-```typescript
-const actionsAPI = getPConnect().getActionsApi()
-const containerManagerAPI = getPConnect().getContainerManager()
-const isLocalAction = getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION)
-const isBulkAction = getPConnect()?.options?.isBulkAction
-const isReverseCoexistence = PCore.getCoexistenceManager().getBroadcastUtils().isReverseCoexistenceCaseLoaded()
-```
-
-### State
-
-- `buttonsState`: tracks disabled state per button: `{ saveAndClose: false, delete: false }`
-- `showSnackbar`: boolean — whether to show the failure snackbar
-- `snackbarMessage`: string — error message text
-
-### "Go back" button (`leftButton`)
-
-Always calls `dismiss()` (no argument = don't confirm). If `isReverseCoexistence`:
-```
-broadCastUtils.setCallBackFunction(null)
-broadCastUtils.setIsDirtyDialogActive(false)
-```
-
-### "Discard" button (`rightButton`) — `cancelHandler()`
-
-Decision tree (evaluated in order):
-
-1. **Reverse coexistence:**
-   ```
-   dismiss(true)
-   PCore.getPubSubUtils().publish(REVERSE_COEXISTENCE_EVENTS.HANDLE_DISCARD)
-   ```
-
-2. **Standard case in create stage** (`!isDataObject && !isLocalAction && !isBulkAction`):
-   - Disable delete button
-   - Call `actionsAPI.deleteCaseInCreateStage(containerItemID, hideDelete)`
-   - `.then()`: publish `EVENT_CANCEL`
-   - `.catch()`: show snackbar with `'Delete failed.'`
-   - `.finally()`: re-enable delete button, call `dismiss(true)`
-
-3. **Local action** (`isLocalAction`):
-   ```
-   dismiss(true)
-   actionsAPI.cancelAssignment(containerItemID, false)
-   ```
-
-4. **Bulk action** (`isBulkAction`):
-   ```
-   dismiss(true)
-   actionsAPI.cancelBulkAction(containerItemID)
-   ```
-
-5. **Data object or other** (default):
-   ```
-   dismiss(true)
-   containerManagerAPI.removeContainerItem({ containerItemID, skipReleaseLockRequest })
-   ```
-
-### Snackbar dismissal
-
-`handleSnackbarClose`: if `reason === 'clickaway'`, return (do not close). Otherwise `setShowSnackbar(false)`.
-
-### Localization
-
-All visible text is localized via `PCore.getLocaleUtils().getLocaleValue(key, 'ModalContainer')`:
-- `'Go back'`
-- `'Discard'`
-- `heading` prop value
-- `content` prop value
-- `'Delete failed.'`
-
-## Visual Specifications
-
-Derived from `CancelAlert.css`:
-
-### Full-screen overlay (`.cancel-alert-background`)
-```css
-.cancel-alert-background {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  background-color: var(--modal-background-color);
-  position: fixed;
-  z-index: 9999;
-  top: 0;
-  left: 0;
-}
-```
-
-### Dialog box (`.cancel-alert-top`)
-```css
-.cancel-alert-top {
-  display: table;
-  margin: auto;
-  min-width: 550px;
-  background-color: var(--modal-top-color);
-  border: 1px solid var(--modal-border-color);
-  border-radius: 10px;
-  padding: 20px;
-  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color);
-}
-```
-
-### Content layout
-
-```
-.cancel-alert-top
-  <h3>{heading}</h3>
-  <div>
-    <p>{content}</p>
-  </div>
-  <div class="action-controls">
-    Grid container spacing=4, justifyContent='space-between'
-      Grid → leftButton ("Go back", secondary/outlined)
-      Grid → rightButton ("Discard", primary/contained, can be disabled)
-```
-
-### Button styles
-
-| Button | Style | Color |
-|--------|-------|-------|
-| Go back | Contained | Secondary |
-| Discard | Contained | Primary |
-
-### Snackbar
-
-- `autoHideDuration: 3000ms`
-- Shows `snackbarMessage` (e.g., `'Delete failed.'`)
-- Close icon button to dismiss manually
-
-**CSS variables used:**
-- `--modal-background-color`: semi-transparent overlay (e.g., `rgba(0,0,0,0.5)`)
-- `--modal-top-color`: dialog background (e.g., white or app background)
-- `--modal-border-color`: dialog border
-- `--modal-box-shadow-color`: dialog shadow color
-
-**CSS companion file required:** Import `./CancelAlert.css`.
-
-## Edge Cases & Special Logic
-
-- **`buttonsState`** tracks loading state to prevent double-clicks during async delete.
-- `dismiss(true)` vs `dismiss()`: passing `true` signals confirmed cancellation; no arg means the user chose to continue.
-- `isBulkAction` is accessed via `getPConnect()?.options?.isBulkAction` — a private property, marked with `@ts-ignore`.
-- All action handling is async — the UI must show loading/disabled state during `deleteCaseInCreateStage`.
-
-## Dependencies
-
-- `PCore.getLocaleUtils().getLocaleValue()` — for text localization.
-- `PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION`, `PUB_SUB_EVENTS.EVENT_CANCEL`, etc.
-- `PCore.getPubSubUtils().publish()` — for pub/sub events.
-- `PCore.getCoexistenceManager().getBroadcastUtils()` — for reverse coexistence handling.
-- Button, Grid, IconButton, Snackbar components.
-- Close icon.
-- `./CancelAlert.css` — must be imported.
-
-## Design System Mapping
-
-**UI control type:** Full-screen modal confirmation dialog.
-
-Listed design systems are examples only.
-
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<div class="cancel-alert-background">` + `<div class="cancel-alert-top">` + CSS from above |
-| MUI | `<Button>`, `<Grid>`, `<Snackbar>`, `<IconButton>`, fixed overlay `<div>` |
-| Ant Design | `<Modal>` or custom overlay |
-| Chakra UI | `<Modal>` or `<AlertDialog>` |