@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/.github/skills/widget-skills/QuickCreate.md

@@ -18,12 +18,12 @@ Provides a shortcut panel for creating new cases. Case types are sourced from th
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `heading` | `string` | Yes | Widget title (e.g., `"Create"`) |
-| `showCaseIcons` | `boolean` | No | Whether to show case type icons alongside labels. Default `false` |
-| `classFilter` | `any[]` | No | Array of class names to filter available case types. Empty array = show all |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop            | Type       | Required | Description                                                                 |
+| --------------- | ---------- | -------- | --------------------------------------------------------------------------- |
+| `heading`       | `string`   | Yes      | Widget title (e.g., `"Create"`)                                             |
+| `showCaseIcons` | `boolean`  | No       | Whether to show case type icons alongside labels. Default `false`           |
+| `classFilter`   | `any[]`    | No       | Array of class names to filter available case types. Empty array = show all |
+| `getPConnect`   | `function` | Yes      | PConnect getter                                                             |
 
 ## Behavioral Contract
 
@@ -39,6 +39,7 @@ Provides a shortcut panel for creating new cases. Case types are sourced from th
 ### Case Type Object Mapping
 
 For each case type, build:
+
 ```typescript
 {
   classname: caseType.pyClassName,
@@ -54,6 +55,7 @@ For each case type, build:
 ### Rendering Delegation
 
 Pass the mapped case type array to `WssQuickCreate` (retrieved via `getComponentFromRegistry('WssQuickCreate')`):
+
 ```tsx
 const WssQuickCreate = getComponentFromRegistry('WssQuickCreate');
 return <WssQuickCreate heading={heading} caseTypes={caseTypeObjects} />;
@@ -65,12 +67,13 @@ This component handles all button rendering — `QuickCreate` is purely a data-p
 
 Visual rendering is owned by `WssQuickCreate` (a design system extension component). Typical layout:
 
-| Element | Description |
-|---------|-------------|
-| Heading | Widget title at the top |
+| Element           | Description                                       |
+| ----------------- | ------------------------------------------------- |
+| Heading           | Widget title at the top                           |
 | Case type buttons | One button per case type; icon (optional) + label |
 
 **CSS-only implementation notes (if implementing without `WssQuickCreate`):**
+
 - Container: `display: flex; flex-direction: column; gap: 0.5rem`.
 - Heading: `font-weight: 600; margin-bottom: 0.5rem`.
 - Case type button: `display: flex; align-items: center; gap: 0.5rem; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer; background: white`.
@@ -100,15 +103,16 @@ Rendering is delegated to `WssQuickCreate` — implement that DSE component for
 
 If implementing without `WssQuickCreate`:
 
-| Design System | Button List |
-|---|---|
-| Default (CSS only) | `<button>` list with optional `<img>` icon |
-| MUI | `<List>` + `<ListItemButton>` or `<Button>` stack |
-| Ant Design | `<Space direction='vertical'>` + `<Button>` per case type |
-| Chakra UI | `<VStack>` + `<Button>` per case type |
-| Shadcn/ui | `<div>` stack + `<Button variant='outline'>` |
+| Design System      | Button List                                               |
+| ------------------ | --------------------------------------------------------- |
+| Default (CSS only) | `<button>` list with optional `<img>` icon                |
+| MUI                | `<List>` + `<ListItemButton>` or `<Button>` stack         |
+| Ant Design         | `<Space direction='vertical'>` + `<Button>` per case type |
+| Chakra UI          | `<VStack>` + `<Button>` per case type                     |
+| Shadcn/ui          | `<div>` stack + `<Button variant='outline'>`              |
 
 When implementing in a specific design system:
+
 - `classFilter` empty array = show ALL case types (not zero) — this is a common gotcha
 - `createWork` must be called with the correct `containerName` constant (`APP.APP`)
 - `showCaseIcons` is optional — only fetch/render icons when this prop is `true`

package/templates/react-sdk-reference/.github/skills/widget-skills/SummaryItem.md

@@ -26,12 +26,12 @@ Individual item card for displaying an attachment, file, or link with an icon, n
 
 ### Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `arItems$` | `object` | Yes | A single item object (see Item Structure below) |
-| `menuIconOverride$` | `string` | No | If provided, replaces the standard actions menu with a single direct-action icon button |
-| `menuIconOverrideAction$` | `function` | No | Callback invoked when the override icon button is clicked |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                      | Type       | Required | Description                                                                             |
+| ------------------------- | ---------- | -------- | --------------------------------------------------------------------------------------- |
+| `arItems$`                | `object`   | Yes      | A single item object (see Item Structure below)                                         |
+| `menuIconOverride$`       | `string`   | No       | If provided, replaces the standard actions menu with a single direct-action icon button |
+| `menuIconOverrideAction$` | `function` | No       | Callback invoked when the override icon button is clicked                               |
+| `getPConnect`             | `function` | Yes      | PConnect getter                                                                         |
 
 ### Item Structure (`arItems$`)
 
@@ -82,14 +82,15 @@ Individual item card for displaying an attachment, file, or link with an icon, n
                                     [Actions button (⋮ or override)]
 ```
 
-| Element | Description |
-|---------|-------------|
-| File icon | Left side, fixed size (~36px square) |
-| Name | Bold, truncated with ellipsis if too long |
-| Metadata | Smaller, secondary-color text |
+| Element        | Description                                   |
+| -------------- | --------------------------------------------- |
+| File icon      | Left side, fixed size (~36px square)          |
+| Name           | Bold, truncated with ellipsis if too long     |
+| Metadata       | Smaller, secondary-color text                 |
 | Actions button | Right side, `<MoreVertIcon>` or override icon |
 
 **CSS-only implementation notes:**
+
 - Row: `display: flex; align-items: center; gap: 0.75rem; padding: 8px 0`.
 - File icon: `width: 36px; height: 36px; flex-shrink: 0`.
 - Content area: `flex: 1; min-width: 0` (prevents text overflow).
@@ -112,12 +113,12 @@ Individual item card for displaying an attachment, file, or link with an icon, n
 
 ### Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `arItems$` | `any[]` | Yes | Array of item objects (same shape as `SummaryItem`'s `arItems$`) |
-| `menuIconOverride$` | `string` | No | Passed to every `SummaryItem` |
-| `menuIconOverrideAction$` | `any` | No | Passed to every `SummaryItem` |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                      | Type       | Required | Description                                                      |
+| ------------------------- | ---------- | -------- | ---------------------------------------------------------------- |
+| `arItems$`                | `any[]`    | Yes      | Array of item objects (same shape as `SummaryItem`'s `arItems$`) |
+| `menuIconOverride$`       | `string`   | No       | Passed to every `SummaryItem`                                    |
+| `menuIconOverrideAction$` | `any`      | No       | Passed to every `SummaryItem`                                    |
+| `getPConnect`             | `function` | Yes      | PConnect getter                                                  |
 
 ### Behavioral Contract
 
@@ -152,15 +153,16 @@ No state, no data fetching — purely a mapping wrapper.
 
 Listed design systems are examples only.
 
-| Design System | Row Layout | Action Menu |
-|---|---|---|
-| Default (CSS only) | `<div>` flexbox row | `<button>` + custom dropdown |
-| MUI | `<ListItem>` or `<Box display='flex'>` | `<IconButton>` + `<Menu>/<MenuItem>` |
-| Ant Design | `<List.Item>` | `<Dropdown menu={{ items }}>` |
-| Chakra UI | `<HStack>` | `<Menu>/<MenuButton>/<MenuList>` |
-| Shadcn/ui | `<div>` flexbox | `<DropdownMenu>` |
+| Design System      | Row Layout                             | Action Menu                          |
+| ------------------ | -------------------------------------- | ------------------------------------ |
+| Default (CSS only) | `<div>` flexbox row                    | `<button>` + custom dropdown         |
+| MUI                | `<ListItem>` or `<Box display='flex'>` | `<IconButton>` + `<Menu>/<MenuItem>` |
+| Ant Design         | `<List.Item>`                          | `<Dropdown menu={{ items }}>`        |
+| Chakra UI          | `<HStack>`                             | `<Menu>/<MenuButton>/<MenuList>`     |
+| Shadcn/ui          | `<div>` flexbox                        | `<DropdownMenu>`                     |
 
 When implementing in a specific design system:
+
 - `menuIconOverride$` completely replaces the standard `⋮` menu — check for it before rendering the actions area
 - `type === 'URL'` must render the name as a clickable link (not plain text)
 - `secondary.error` is a boolean — apply error styling to the `secondary.text` when `true`

package/templates/react-sdk-reference/.github/skills/widget-skills/ToDo.md

@@ -18,28 +18,30 @@ Renders a compact to-do / worklist panel showing the user's pending assignments.
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `datasource` | `any` | No | Array of assignments passed directly (used in `todo` type). If provided, skips the data page fetch |
-| `myWorkList` | `any` | No | Work list config object `{ datapage: string, fields: [...] }` — for `worklist` type |
-| `caseInfoID` | `string` | No | Case ID to filter assignments (used in `todo` type) |
-| `headerText` | `string` | No | Widget title. Default: `"To do"` |
-| `itemKey` | `string` | No | Field key (reserved, currently unused) |
-| `showTodoList` | `boolean` | No | Whether to show the assignment list. Default `true` |
-| `type` | `string` | No | `'worklist'` (personal work) or `'todo'` (case-level). Default `'worklist'` |
-| `context` | `string` | No | Context name for API calls. Falls back to `pConn.getContextName()` |
-| `isConfirm` | `boolean` | No | Confirmation mode — adjusts rendering for post-submit confirmation view |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop           | Type       | Required | Description                                                                                        |
+| -------------- | ---------- | -------- | -------------------------------------------------------------------------------------------------- |
+| `datasource`   | `any`      | No       | Array of assignments passed directly (used in `todo` type). If provided, skips the data page fetch |
+| `myWorkList`   | `any`      | No       | Work list config object `{ datapage: string, fields: [...] }` — for `worklist` type                |
+| `caseInfoID`   | `string`   | No       | Case ID to filter assignments (used in `todo` type)                                                |
+| `headerText`   | `string`   | No       | Widget title. Default: `"To do"`                                                                   |
+| `itemKey`      | `string`   | No       | Field key (reserved, currently unused)                                                             |
+| `showTodoList` | `boolean`  | No       | Whether to show the assignment list. Default `true`                                                |
+| `type`         | `string`   | No       | `'worklist'` (personal work) or `'todo'` (case-level). Default `'worklist'`                        |
+| `context`      | `string`   | No       | Context name for API calls. Falls back to `pConn.getContextName()`                                 |
+| `isConfirm`    | `boolean`  | No       | Confirmation mode — adjusts rendering for post-submit confirmation view                            |
+| `getPConnect`  | `function` | Yes      | PConnect getter                                                                                    |
 
 ## Behavioral Contract
 
 ### Data Source Resolution
 
 **`type === 'todo'` (case-level):**
+
 - Use `datasource` prop directly (array of assignment objects).
 - `caseInfoID` is used to scope the assignments.
 
 **`type === 'worklist'` (personal work):**
+
 - Fetch from `myWorkList.datapage` (e.g., `D_WorkList`) via:
   ```
   PCore.getDataPageUtils().getDataAsync(
@@ -69,20 +71,22 @@ Renders a compact to-do / worklist panel showing the user's pending assignments.
 ### Open Assignment
 
 On item click:
+
 ```typescript
 pConn.getActionsApi().openAssignment(
-  assignment.pxRefObjectKey,   // case key
+  assignment.pxRefObjectKey, // case key
   assignment.pxRefObjectClass, // class name
   {
     containerName: pConn.getContainerName() || PCore.getConstants().APP.APP,
-    channelName: ''
-  }
+    channelName: '',
+  },
 );
 ```
 
 ### Assignment Item Rendering
 
 For each assignment, show:
+
 - **Avatar:** Circle with user initials (derived from `pConn.getContextObject?.().pyLabel` or operator name).
 - **Name/title:** `assignment.pyLabel` — the assignment task name.
 - **Status badge (worklist only):** `assignment.pyStatusWork` — colored status pill.
@@ -93,6 +97,7 @@ For each assignment, show:
 ### Responsive Layout
 
 Use `useMediaQuery(theme.breakpoints.down('sm'))` (MUI) to detect mobile:
+
 - **Desktop:** Show avatar, name, status, priority, and arrow in a horizontal row.
 - **Mobile:** Stack or truncate elements for narrow display.
 
@@ -109,10 +114,11 @@ If an assignment has `canPerform === false`, render it as non-clickable (greyed
 ### Operator Avatar Initials
 
 Extract initials from `PCore.getEnvironmentInfo().getOperatorName()`:
+
 ```typescript
 const initials = operatorName
   .split(' ')
-  .map(w => w[0])
+  .map((w) => w[0])
   .join('')
   .substring(0, 2)
   .toUpperCase();
@@ -122,23 +128,24 @@ const initials = operatorName
 
 ### Card Layout
 
-| Element | Description |
-|---------|-------------|
-| Card header | `headerText` (default `"To do"`) + badge with count |
-| Assignment rows | Up to `showCount` items |
-| Show more/less button | Below the last visible item |
+| Element               | Description                                         |
+| --------------------- | --------------------------------------------------- |
+| Card header           | `headerText` (default `"To do"`) + badge with count |
+| Assignment rows       | Up to `showCount` items                             |
+| Show more/less button | Below the last visible item                         |
 
 ### Assignment Row
 
-| Element | Desktop | Mobile |
-|---------|---------|--------|
-| Avatar circle | Shown | Shown |
-| Task name | Full text | Truncated |
-| Status badge | Shown | Hidden or small |
-| Priority indicator | Shown | Simplified |
-| Arrow icon | Shown | Shown |
+| Element            | Desktop   | Mobile          |
+| ------------------ | --------- | --------------- |
+| Avatar circle      | Shown     | Shown           |
+| Task name          | Full text | Truncated       |
+| Status badge       | Shown     | Hidden or small |
+| Priority indicator | Shown     | Simplified      |
+| Arrow icon         | Shown     | Shown           |
 
 **CSS-only implementation notes:**
+
 - Card: standard card layout.
 - Assignment row: `display: flex; align-items: center; gap: 0.75rem; padding: 10px 0; cursor: pointer; border-bottom: 1px solid var(--divider-color)`.
 - Avatar: `width: 36px; height: 36px; border-radius: 50%; background: var(--avatar-bg); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600`.
@@ -175,15 +182,16 @@ const initials = operatorName
 
 Listed design systems are examples only.
 
-| Design System | Card | List | Badge | Snackbar |
-|---|---|---|---|---|
-| Default (CSS only) | `<div>` card | `<ul>/<li>` | CSS counter badge | Custom toast overlay |
-| MUI | `<Card>` + `<CardHeader>` | `<List>/<ListItem>` | `<Badge>` | `<Snackbar>/<Alert>` |
-| Ant Design | `<Card>` | `<List>` | `<Badge count={N}>` | `message.error()` |
-| Chakra UI | `<Card>` | `<VStack>` | `<Badge>` | `useToast()` |
-| Shadcn/ui | `<Card>` | `<ul>/<li>` | Custom badge | `<Toaster>` + `toast.error()` |
+| Design System      | Card                      | List                | Badge               | Snackbar                      |
+| ------------------ | ------------------------- | ------------------- | ------------------- | ----------------------------- |
+| Default (CSS only) | `<div>` card              | `<ul>/<li>`         | CSS counter badge   | Custom toast overlay          |
+| MUI                | `<Card>` + `<CardHeader>` | `<List>/<ListItem>` | `<Badge>`           | `<Snackbar>/<Alert>`          |
+| Ant Design         | `<Card>`                  | `<List>`            | `<Badge count={N}>` | `message.error()`             |
+| Chakra UI          | `<Card>`                  | `<VStack>`          | `<Badge>`           | `useToast()`                  |
+| Shadcn/ui          | `<Card>`                  | `<ul>/<li>`         | Custom badge        | `<Toaster>` + `toast.error()` |
 
 When implementing in a specific design system:
+
 - Show top 3 items by default — `showCount` state controls slice; "Show more/less" toggles between 3 and full length
 - `canPerform === false` must make the row non-clickable — check this before calling `openAssignment`
 - `type === 'worklist'` fetches from a data page; `type === 'todo'` uses the `datasource` prop — both paths must be implemented

package/templates/react-sdk-reference/AGENTS.md

@@ -3,7 +3,6 @@
 > Claude Code instructions for the Pega React SDK reference application.
 > Skill files and workflow prompts are in `.claude/skills/` and `.claude/prompts/`. Read them when asked to generate or replace components.
 
-
 You are assisting developers in a React reference application that demonstrates the Pega Infinity SDK. Customers clone this repo and **replace the sample UI components with their own design system** (MUI, Chakra, Radix, Shadcn, Ant Design, or any other).
 
 ---

package/templates/react-sdk-reference/index.html

@@ -27,10 +27,7 @@
   </head>
   <body>
     <div id="outlet" style="width: 100%"></div>
-    <script
-      src="node_modules/@pega/constellationjs/dist/constellation-core-web.js"
-      type="text/javascript"
-    ></script>
+    <script src="node_modules/@pega/constellationjs/dist/constellation-core-web.js" type="text/javascript"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package/templates/react-sdk-reference/package.json

@@ -11,11 +11,11 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^9.0.0",
-    "@mui/lab": "^9.0.0-beta.3",
-    "@mui/material": "^9.0.0",
+    "@mui/icons-material": "^9.2.0",
+    "@mui/lab": "^9.0.0-beta.6",
+    "@mui/material": "^9.2.0",
     "@mui/styles": "^6.5.0",
-    "@mui/x-date-pickers": "^9.2.0",
+    "@mui/x-date-pickers": "^9.9.0",
     "@pega/auth": "file:pega-auth-0.2.42.tgz",
     "@pega/constellationjs": "file:pega-constellationjs-0.26.3-local.tgz",
     "@pega/sdk-react": "file:pega-sdk-react-0.1.0.tgz",
@@ -23,31 +23,31 @@
     "@react-google-maps/api": "^2.20.8",
     "@tinymce/tinymce-react": "^6.3.0",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.20",
+    "dayjs": "^1.11.21",
     "downloadjs": "^1.4.7",
     "fast-deep-equal": "^3.1.3",
     "lodash.clonedeep": "^4.5.0",
     "mui-tel-input": "^11.0.0",
-    "react": "^18.3.1",
+    "react": "^19.2.7",
     "react-datepicker": "^9.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.2.7",
     "react-number-format": "^5.4.5",
     "react-redux": "^9.3.0",
-    "react-router-dom": "^7.6.1",
+    "react-router-dom": "^7.18.1",
     "throttle-debounce": "^5.0.2"
   },
   "devDependencies": {
     "@pega/pcore-pconnect-typedefs": "^4.1.0",
     "@types/downloadjs": "^1.4.6",
     "@types/lodash.clonedeep": "^4.5.9",
-    "@types/react": "^18.3.18",
-    "@types/react-datepicker": "^6.2.0",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.2.17",
+    "@types/react-datepicker": "^7.0.0",
+    "@types/react-dom": "^19.2.3",
     "@types/react-redux": "^7.1.34",
     "@types/throttle-debounce": "^5.0.2",
-    "@vitejs/plugin-react": "^4.3.4",
-    "typescript": "~5.8.2",
-    "vite": "^6.3.5",
-    "vite-plugin-static-copy": "^2.3.0"
+    "@vitejs/plugin-react": "^6.0.3",
+    "typescript": "~6.0.3",
+    "vite": "^8.1.4",
+    "vite-plugin-static-copy": "^4.1.1"
   }
 }

package/templates/react-sdk-reference/src/AppSelector.tsx

@@ -5,12 +5,12 @@ import { PortalApp } from './PortalApp';
 function AppSelector() {
   return (
     <Routes>
-      <Route path='/portal' element={<PortalApp />} />
-      <Route path='/portal.html' element={<PortalApp />} />
-      <Route path='/embedded' element={<MashupApp />} />
-      <Route path='/embedded.html' element={<MashupApp />} />
-      <Route path='/' element={<MashupApp />} />
-      <Route path='*' element={<MashupApp />} />
+      <Route path="/portal" element={<PortalApp />} />
+      <Route path="/portal.html" element={<PortalApp />} />
+      <Route path="/embedded" element={<MashupApp />} />
+      <Route path="/embedded.html" element={<MashupApp />} />
+      <Route path="/" element={<MashupApp />} />
+      <Route path="*" element={<MashupApp />} />
     </Routes>
   );
 }

package/templates/react-sdk-reference/src/FallbackComponent.tsx

@@ -18,9 +18,7 @@ function FallbackComponent({
   const displayProps = Object.fromEntries(
     Object.entries(props).filter(
       ([k]) =>
-        !['getPConnect', 'pConnect', 'fallback', 'componentRegistry'].includes(
-          k,
-        ) && typeof props[k] !== 'function',
+        !['getPConnect', 'pConnect', 'fallback', 'componentRegistry'].includes(k) && typeof props[k] !== 'function',
     ),
   );
 
@@ -28,9 +26,7 @@ function FallbackComponent({
     <div style={styles.fallback.container}>
       <div style={styles.fallback.label}>{componentName ?? 'Unknown'}</div>
       {Object.keys(displayProps).length > 0 && (
-        <pre style={styles.fallback.props}>
-          {JSON.stringify(displayProps, null, 2)}
-        </pre>
+        <pre style={styles.fallback.props}>{JSON.stringify(displayProps, null, 2)}</pre>
       )}
       {children && <div style={styles.fallback.children}>{children}</div>}
     </div>