@pega/lists-react 10.0.0-build.4.2 → 10.0.0-build.4.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/README.md +284 -83
  2. package/lib/Core/Components/Card/CardFieldValue.d.ts +8 -0
  3. package/lib/Core/Components/Card/CardFieldValue.d.ts.map +1 -0
  4. package/lib/Core/Components/Card/CardFieldValue.js +8 -0
  5. package/lib/Core/Components/Card/CardFieldValue.js.map +1 -0
  6. package/lib/Core/Components/Card/CardHeader.d.ts +9 -0
  7. package/lib/Core/Components/Card/CardHeader.d.ts.map +1 -0
  8. package/lib/Core/{Views/Gallery/Components/GalleryHeader.js → Components/Card/CardHeader.js} +5 -4
  9. package/lib/Core/Components/Card/CardHeader.js.map +1 -0
  10. package/lib/Core/Components/Card/CardSubHeading.d.ts +10 -0
  11. package/lib/Core/Components/Card/CardSubHeading.d.ts.map +1 -0
  12. package/lib/Core/Components/Card/CardSubHeading.js +9 -0
  13. package/lib/Core/Components/Card/CardSubHeading.js.map +1 -0
  14. package/lib/Core/Components/Card/cardData.d.ts +48 -0
  15. package/lib/Core/Components/Card/cardData.d.ts.map +1 -0
  16. package/lib/Core/{Views/Gallery/utils.js → Components/Card/cardData.js} +55 -52
  17. package/lib/Core/Components/Card/cardData.js.map +1 -0
  18. package/lib/Core/Components/Card/hooks/useRowActions.d.ts.map +1 -0
  19. package/lib/Core/Components/Card/hooks/useRowActions.js.map +1 -0
  20. package/lib/Core/Components/Card/index.d.ts +5 -0
  21. package/lib/Core/Components/Card/index.d.ts.map +1 -0
  22. package/lib/Core/Components/Card/index.js +5 -0
  23. package/lib/Core/Components/Card/index.js.map +1 -0
  24. package/lib/Core/Components/DefaultComponents/EmptyContainer.d.ts +2 -1
  25. package/lib/Core/Components/DefaultComponents/EmptyContainer.d.ts.map +1 -1
  26. package/lib/Core/Components/DefaultComponents/EmptyContainer.js +3 -3
  27. package/lib/Core/Components/DefaultComponents/EmptyContainer.js.map +1 -1
  28. package/lib/Core/Components/DefaultComponents/PersonalizationCreateEdit.d.ts.map +1 -1
  29. package/lib/Core/Components/DefaultComponents/PersonalizationCreateEdit.js +2 -1
  30. package/lib/Core/Components/DefaultComponents/PersonalizationCreateEdit.js.map +1 -1
  31. package/lib/Core/Components/DefaultComponents/index.d.ts +2 -1
  32. package/lib/Core/Components/DefaultComponents/index.d.ts.map +1 -1
  33. package/lib/Core/Components/GroupRenderer/index.d.ts.map +1 -1
  34. package/lib/Core/Components/GroupRenderer/index.js +7 -2
  35. package/lib/Core/Components/GroupRenderer/index.js.map +1 -1
  36. package/lib/Core/Components/RSWrapper/index.d.ts.map +1 -1
  37. package/lib/Core/Components/RSWrapper/index.js +4 -0
  38. package/lib/Core/Components/RSWrapper/index.js.map +1 -1
  39. package/lib/Core/Components/Toolbar/AdvanceToolbar.d.ts.map +1 -1
  40. package/lib/Core/Components/Toolbar/AdvanceToolbar.js +5 -2
  41. package/lib/Core/Components/Toolbar/AdvanceToolbar.js.map +1 -1
  42. package/lib/Core/Components/Toolbar/RefreshBanner.d.ts +5 -1
  43. package/lib/Core/Components/Toolbar/RefreshBanner.d.ts.map +1 -1
  44. package/lib/Core/Components/Toolbar/RefreshBanner.js +22 -6
  45. package/lib/Core/Components/Toolbar/RefreshBanner.js.map +1 -1
  46. package/lib/Core/Components/Toolbar/SimpleToolbar.d.ts.map +1 -1
  47. package/lib/Core/Components/Toolbar/SimpleToolbar.js +2 -2
  48. package/lib/Core/Components/Toolbar/SimpleToolbar.js.map +1 -1
  49. package/lib/Core/Components/Toolbar/utils/utils.d.ts.map +1 -1
  50. package/lib/Core/Components/Toolbar/utils/utils.js +10 -4
  51. package/lib/Core/Components/Toolbar/utils/utils.js.map +1 -1
  52. package/lib/Core/Views/Gallery/Components/GalleryCard.d.ts +1 -1
  53. package/lib/Core/Views/Gallery/Components/GalleryCard.d.ts.map +1 -1
  54. package/lib/Core/Views/Gallery/Components/GalleryCard.js +8 -7
  55. package/lib/Core/Views/Gallery/Components/GalleryCard.js.map +1 -1
  56. package/lib/Core/Views/Gallery/Components/GalleryCheckboxCard.d.ts.map +1 -1
  57. package/lib/Core/Views/Gallery/Components/GalleryCheckboxCard.js +3 -3
  58. package/lib/Core/Views/Gallery/Components/GalleryCheckboxCard.js.map +1 -1
  59. package/lib/Core/Views/Gallery/Gallery.types.d.ts +1 -0
  60. package/lib/Core/Views/Gallery/Gallery.types.d.ts.map +1 -1
  61. package/lib/Core/Views/Gallery/Gallery.types.js.map +1 -1
  62. package/lib/Core/Views/Gallery/GalleryContainer.d.ts.map +1 -1
  63. package/lib/Core/Views/Gallery/GalleryContainer.js +1 -1
  64. package/lib/Core/Views/Gallery/GalleryContainer.js.map +1 -1
  65. package/lib/Core/Views/Gallery/index.d.ts +1 -1
  66. package/lib/Core/Views/Gallery/index.d.ts.map +1 -1
  67. package/lib/Core/Views/Gallery/index.js +6 -9
  68. package/lib/Core/Views/Gallery/index.js.map +1 -1
  69. package/lib/Core/Views/Kanban/Kanban.styles.d.ts +13 -0
  70. package/lib/Core/Views/Kanban/Kanban.styles.d.ts.map +1 -0
  71. package/lib/Core/Views/Kanban/Kanban.styles.js +53 -0
  72. package/lib/Core/Views/Kanban/Kanban.styles.js.map +1 -0
  73. package/lib/Core/Views/Kanban/Kanban.types.d.ts +10 -0
  74. package/lib/Core/Views/Kanban/Kanban.types.d.ts.map +1 -0
  75. package/lib/Core/Views/Kanban/Kanban.types.js +2 -0
  76. package/lib/Core/Views/Kanban/Kanban.types.js.map +1 -0
  77. package/lib/Core/Views/Kanban/KanbanCard.d.ts +7 -0
  78. package/lib/Core/Views/Kanban/KanbanCard.d.ts.map +1 -0
  79. package/lib/Core/Views/Kanban/KanbanCard.js +20 -0
  80. package/lib/Core/Views/Kanban/KanbanCard.js.map +1 -0
  81. package/lib/Core/Views/Kanban/KanbanLane.d.ts +23 -0
  82. package/lib/Core/Views/Kanban/KanbanLane.d.ts.map +1 -0
  83. package/lib/Core/Views/Kanban/KanbanLane.js +21 -0
  84. package/lib/Core/Views/Kanban/KanbanLane.js.map +1 -0
  85. package/lib/Core/Views/Kanban/KanbanLaneHeader.d.ts +12 -0
  86. package/lib/Core/Views/Kanban/KanbanLaneHeader.d.ts.map +1 -0
  87. package/lib/Core/Views/Kanban/KanbanLaneHeader.js +16 -0
  88. package/lib/Core/Views/Kanban/KanbanLaneHeader.js.map +1 -0
  89. package/lib/Core/Views/Kanban/KanbanLaneVirtualizer.d.ts +20 -0
  90. package/lib/Core/Views/Kanban/KanbanLaneVirtualizer.d.ts.map +1 -0
  91. package/lib/Core/Views/Kanban/KanbanLaneVirtualizer.js +37 -0
  92. package/lib/Core/Views/Kanban/KanbanLaneVirtualizer.js.map +1 -0
  93. package/lib/Core/Views/Kanban/hooks/useKanbanLanesVirtualization.d.ts +19 -0
  94. package/lib/Core/Views/Kanban/hooks/useKanbanLanesVirtualization.d.ts.map +1 -0
  95. package/lib/Core/Views/Kanban/hooks/useKanbanLanesVirtualization.js +32 -0
  96. package/lib/Core/Views/Kanban/hooks/useKanbanLanesVirtualization.js.map +1 -0
  97. package/lib/Core/Views/Kanban/index.d.ts +9 -0
  98. package/lib/Core/Views/Kanban/index.d.ts.map +1 -0
  99. package/lib/Core/Views/Kanban/index.js +63 -0
  100. package/lib/Core/Views/Kanban/index.js.map +1 -0
  101. package/lib/Core/Views/Timeline/Timeline.styles.d.ts +2 -2
  102. package/lib/Core/templateFeatureSupport.js +2 -2
  103. package/lib/Core/templateFeatureSupport.js.map +1 -1
  104. package/package.json +7 -7
  105. package/lib/Core/Views/Gallery/Components/GalleryFieldValue.d.ts +0 -8
  106. package/lib/Core/Views/Gallery/Components/GalleryFieldValue.d.ts.map +0 -1
  107. package/lib/Core/Views/Gallery/Components/GalleryFieldValue.js +0 -8
  108. package/lib/Core/Views/Gallery/Components/GalleryFieldValue.js.map +0 -1
  109. package/lib/Core/Views/Gallery/Components/GalleryHeader.d.ts +0 -8
  110. package/lib/Core/Views/Gallery/Components/GalleryHeader.d.ts.map +0 -1
  111. package/lib/Core/Views/Gallery/Components/GalleryHeader.js.map +0 -1
  112. package/lib/Core/Views/Gallery/hooks/useRowActions.d.ts.map +0 -1
  113. package/lib/Core/Views/Gallery/hooks/useRowActions.js.map +0 -1
  114. package/lib/Core/Views/Gallery/utils.d.ts +0 -36
  115. package/lib/Core/Views/Gallery/utils.d.ts.map +0 -1
  116. package/lib/Core/Views/Gallery/utils.js.map +0 -1
  117. /package/lib/Core/{Views/Gallery → Components/Card}/hooks/useRowActions.d.ts +0 -0
  118. /package/lib/Core/{Views/Gallery → Components/Card}/hooks/useRowActions.js +0 -0
package/README.md CHANGED
@@ -11,6 +11,7 @@ import { RepeatingStructures } from '@pega/lists-react';
11
11
  ```javascript
12
12
  <RepeatingStructures
13
13
  meta={meta}
14
+ persistedInfo={persistedInfo}
14
15
  ref={compRef}
15
16
  apiContext={{
16
17
  ...apiContext,
@@ -23,96 +24,80 @@ import { RepeatingStructures } from '@pega/lists-react';
23
24
  />
24
25
  ```
25
26
 
26
- **Table configuration (meta - prop)**
27
-
28
- | Property | Value type | Mandatory | Default value | Notes |
29
- | ------------------------------------------- | ---------------- | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
30
- | itemKey | String | Yes | | Name of a field to use as the key of the rendered item(s) in the view. This field need not necessarily be one of the fields configured for display as part of the field definitions array. This field is directly looked up in the item data. |
31
- | patchQueryFields | String array | No | | Array of fields(extra) to be included in a query |
32
- | sortOrder | String array | No | `['asc', 'desc', null]` | Array denoting sort operation order. Default is a tri-state sort |
33
- | displayDensity<a name='displayDensity'></a> | Array of options | No | `[{ name: 'Short', id: '1' }, { name: 'Medium', id: '2' },{ name: 'Tall', id: '3' },{ name: 'Full content', id: '4' }]` | A map of names(for display) and id(for persistence). The id values have specific behavior(s) associated with them |
34
- | height | Object | No | `height: { minHeight: 600 }` | Height of the view. Full set of options include `height: { minHeight: 600, /* Minimum height in pixels to the view */, height: 700, /* Explicit height in pixels - fitHeightToElement option is ignored */ fitHeightToElement: el, /* Fit view to a specific HTML element (or string query selector) in the DOM heightwise */ deltaAdjustment: 10 /* A height adjustment value in pixels */ autoSize: true /* Responsively Height will be adjusted on window resize only if you have given fitHeightToElement */, maxHeight: 800, /* Maximum height value in pixels to the view or a css variable (--view-height) */}` |
35
- | toggleFieldVisibility | Boolean | No | `true` | Allow show/hide of fields |
36
- | grouping | Boolean | No | `true` | Allow grouping on fields |
37
- | template | String | Yes | `Table` | Determines the view of a Repeating Structure, values:['Table','Gallery','Timeline'] |
38
- | basicMode | Boolean | No | `false` | Display views ['Table','Gallery','Timeline'] with full or condensed toolbar. Default shows full toolbar. |
39
- | editing | Boolean | No | `false` | Allow editing on fields |
40
- | deleting | Boolean | No | `false` | Allow deleting of rows |
41
- | personalization | Boolean | No | `true` | Allow personalization views |
42
- | enableAppDefault | Boolean | No | `false` | Enable app default personalization options |
43
- | nonPersonalizationViewName | String | No | `Initial view` | Name to be shown for non personalized view |
44
- | reorderFields | Boolean | No | `true` | Allow field reordering through a drag and drop action |
45
- | reorderItems (experimental) | Boolean | No | `false` | Allow row reordering through a drag and drop action |
46
- | dragHandle (experimental) | Boolean | No | `false` | Allow to add a column for drag handle |
47
- | globalSearch | Boolean | No | `true` | Brings in a search widget to allow searching across all text type fields |
48
- | toolbar | Boolean | No | `true` | Display toolbar on the view |
49
- | showCount | Boolean | No | `true` | Display count in toolbar |
50
- | defaultRowHeight | String | No | `undefined` | Row density id value from [displayDensity](#displayDensity) options |
51
- | allowBulkActions | boolean | No | `false` | Renders the 'Bulk actions' button in the table toolbar, which gets enabled on row selection |
52
- | dateFunctions | Object | No | `undefined` | Enables date-functions like MONTHS/WEEKS/... during Grouping and Filtering. ([Object structure](https://github.com/Pega-UXEngineering/constellation-frontend/blob/028ffa1642e12c61a3383b9babc0e0e83800d352/packages/cosmos-condition-builder/src/components/ConditionBuilder/ConditionBuilder.types.ts#L137)) |
53
- | relativeDates | Boolean | No | `false` | Enables Relative Dates, such as "Last 7 days" or "Current Year", in Filtering for DateTime or Date_Only values. |
54
- | footer | Boolean | No | `true` | Display footer on the view |
55
- | dynamicFieldTemplates | Object | No | `dynamicFieldTemplates: [{ name: 'Comma separated', value: 'comma',selected: true }, { name: 'Space separated', value: 'space' }, { name: 'Multi line', value: 'multiline' }, { name: 'Forward slash', value: 'forwardslash' }]` | Templates for dynamic fields. See section on Dynamic fields |
56
- | title | String | No | '\<label not set\>' | Repeating Structure Title |
57
- | icon | String | No | 'picture' | Repeating Structure Icon |
58
- | headerBar | Boolean | No | false | Display Header Bar |
59
- | showHeaderIcons | Boolean | No | true | Display Respective Header Icons at field labels based on type |
60
- | rowActions | `Array<object>` | No | [] | list of available static actions for an editable table with following properties`[{ text: 'Open in a new tab', id: 'row-new-tab', onClick: () => {} }]` |
61
- | selectionMode | String | No | [] | Decides type of row selection mode (radio for single/ checkbox for multi) possible values `single / multi / multi-on-hover` |
62
- | toolbarActions | `Array<Object>` | No | [] | List of available static actions at table level (shown in toolbar/ header bar) with following properties `[{ text: 'Add', tooltip: 'Add story', id: 'Add', onClick: () => {}}]` |
63
- | selectionCountThreshold | Number | No | | Displays select-all checkbox if selectionMode is multi-on-hover and the records count is not greater than threshold |
64
- | disableSelectionOnLoad | Boolean | No | false | To Disable/Enable selection of rows |
65
- | requiredOnLoad | Boolean | No | false | To show asterisk(\*) symbol on table header in case of Data Reference/Embedded views. (Note: This works perfectly if the personalization is off.) |
66
- | timezone | String | No | | Timezone which is passed to formatter |
67
- | locale | String | No | document.documentElement.lang | Locale which is passed to formatter function |
68
- | refreshAction | Object | No | | Action to support manual Refresh from consumer of Repeating structure. Whenever Repeating structure is notified with Refresh action It will show a banner by consuming this action info.<br> Structure : `{id: 'uniqueId for banner', message: To show specific message on banner related to refresh notification, action : { text: Action button text, onClick: Function to be executed on click of action that will perform refresh of data based on consumer apiContext logic}}` <br>Example: `{id: 'refreshBanner', message: 'New records have been added',action: { text: 'Click to refresh.', onClick }}` |
27
+ ## Meta Properties
28
+
29
+ | Property | Value type | Mandatory | Default value | Notes |
30
+ | ------------------------------------------- | ---------------- | :-------: | :---------------------------------------------------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
31
+ | itemKey | String | Yes | | Name of a field to use as the key of the rendered item(s) in the view. This field need not necessarily be one of the fields configured for display as part of the field definitions array. This field is directly looked up in the item data. |
32
+ | patchQueryFields | String array | No | | Array of fields(extra) to be included in a query |
33
+ | sortOrder | String array | No | `['asc', 'desc', null]` | Array denoting sort operation order. Default is a tri-state sort |
34
+ | displayDensity<a name='displayDensity'></a> | Array of options | No | `[{ name: 'Short', id: '1' }, { name: 'Medium', id: '2' },{ name: 'Tall', id: '3' },{ name: 'Full content', id: '4' }]` | A map of names(for display) and id(for persistence). The id values have specific behavior(s) associated with them |
35
+ | height | Object | No | `height: { minHeight: 600 }` | Height of the view. Full set of options include `height: { minHeight: 600, /* Minimum height in pixels to the view */, height: 700, /* Explicit height in pixels - fitHeightToElement option is ignored */ fitHeightToElement: el, /* Fit view to a specific HTML element (or string query selector) in the DOM heightwise */ deltaAdjustment: 10 /* A height adjustment value in pixels */ autoSize: true /* Responsively Height will be adjusted on window resize only if you have given fitHeightToElement */, maxHeight: 800, /* Maximum height value in pixels to the view or a css variable (--view-height) */}` |
36
+ | toggleFieldVisibility | Boolean | No | `true` | Allow show/hide of fields |
37
+ | grouping | Boolean | No | `true` | Allow grouping on fields |
38
+ | template | String | Yes | `Table` | Determines the view of a Repeating Structure, values:['Table','Gallery','Kanban','Timeline'] |
39
+ | basicMode | Boolean | No | `false` | Display views ['Table','Gallery','Timeline', 'Kanban'] with full or condensed toolbar. Default shows full toolbar. |
40
+ | editing | Boolean | No | `false` | Allow editing on fields |
41
+ | deleting | Boolean | No | `false` | Allow deleting of rows |
42
+ | personalization | Boolean | No | `true` | Allow personalization views |
43
+ | enableAppDefault | Boolean | No | `false` | Enable app default personalization options |
44
+ | nonPersonalizationViewName | String | No | `Initial view` | Name to be shown for non personalized view |
45
+ | reorderFields | Boolean | No | `true` | Allow field reordering through a drag and drop action |
46
+ | reorderItems (experimental) | Boolean | No | `false` | Allow row reordering through a drag and drop action |
47
+ | dragHandle (experimental) | Boolean | No | `false` | Allow to add a column for drag handle |
48
+ | allowBulkActions | boolean | No | `false` | Renders the 'Bulk actions' button in the table toolbar, which gets enabled on row selection |
49
+ | dateFunctions | Object | No | `undefined` | Enables date-functions like MONTHS/WEEKS/... during Grouping and Filtering. ([Object structure](https://github.com/Pega-UXEngineering/constellation-frontend/blob/028ffa1642e12c61a3383b9babc0e0e83800d352/packages/cosmos-condition-builder/src/components/ConditionBuilder/ConditionBuilder.types.ts#L137)) |
50
+ | relativeDates | Boolean | No | `false` | Enables Relative Dates, such as "Last 7 days" or "Current Year", in Filtering for DateTime or Date_Only values. |
51
+ | icon | String | No | 'picture' | Repeating Structure Icon |
52
+ | headerBar | Boolean | No | false | Display Header Bar |
53
+ | showHeaderIcons | Boolean | No | true | Display Respective Header Icons at field labels based on type |
54
+ | rowActions | `Array<object>` | No | [] | list of available static actions for an editable table with following properties`[{ text: 'Open in a new tab', id: 'row-new-tab', onClick: () => {} }]` |
55
+ | selectionMode | String | No | [] | Decides type of row selection mode (radio for single/ checkbox for multi) possible values `single / multi / multi-on-hover` |
56
+ | toolbarActions | `Array<Object>` | No | [] | List of available static actions at table level (shown in toolbar/ header bar) with following properties `[{ text: 'Add', tooltip: 'Add story', id: 'Add', onClick: () => {}}]` |
57
+ | selectionCountThreshold | Number | No | | Displays select-all checkbox if selectionMode is multi-on-hover and the records count is not greater than threshold |
58
+ | disableSelectionOnLoad | Boolean | No | false | To Disable/Enable selection of rows |
59
+ | requiredOnLoad | Boolean | No | false | To show asterisk(\*) symbol on table header in case of Data Reference/Embedded views. (Note: This works perfectly if the personalization is off.) |
60
+ | timezone | String | No | | Timezone which is passed to formatter |
61
+ | locale | String | No | document.documentElement.lang | Locale which is passed to formatter function |
62
+ | refreshAction | Object | No | | Action to support manual Refresh from consumer of Repeating structure. Whenever Repeating structure is notified with Refresh action It will show a banner by consuming this action info.<br> Structure : `{id: 'uniqueId for banner', message: To show specific message on banner related to refresh notification, action : { text: Action button text, onClick: Function to be executed on click of action that will perform refresh of data based on consumer apiContext logic}}` <br>Example: `{id: 'refreshBanner', message: 'New records have been added',action: { text: 'Click to refresh.', onClick }}` |
69
63
 
70
64
  | displayFeatures | Object | No | `displayFeatures:{filter:true, grouping:true, sort:true}` | Allow display of features-Group, Sort, Filter |
71
65
 
72
66
  **Field configuration**
73
67
 
74
- ```
75
68
  fieldDefs
76
- ```
77
-
78
- > A mandatory array of objects with the following keys
79
-
80
- | Property | Value type | Mandatory | Default value | Notes |
81
69
  | --------------------------------------- | --------------- | :-------: | :-----------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
82
- | type | String | Yes | | `number` or `text` or `date` or `datetime` |
83
- | name | String | Yes | | Actual field name in data |
84
- | id | String | Yes | | Persistent ID of the field, typically the same as the name |
85
- | label | String | Yes | | |
86
- | category | `Array<Object>` | No | | Category of the field which should of the format [{label:'categoryName'}] where index denotes the level of category. ClassName for regular fields and association name for associated fields. `Example: category:[{label:'Bugs class'}]` |
87
- | showCategoryInHeaderLabel | Boolean | No | `false` | Show category in header label. The header will be displayed in format {categoryName}.{label} where categoryName will be all the category's labels combined with .(dot) notation |
88
- | tooltip | String | No | Current Field's formatted value | Defines Field whose value needs to be shown as HelperText e.g tooltip: 'pzDescription' field value for pyID field |
89
- | showTooltip | Boolean | No | `true` | Enable/Disable tooltip on column |
90
- | width | Number | No | `150` | Pixel width of the field |
91
- | minWidth | Number | No | `90` | Minimum width in pixels, field width cannot be resized below this threshold |
92
- | filter | Boolean | No | `true` | Allow filtering on this field |
93
- | filterPickList | Boolean | No | `false` | Filter popup presents a pick list to choose values from |
94
- | sort | Boolean | No | `true` | Allow sorting |
95
- | sortDirection | String | No | | `asc` or `desc`. Allows sorting on load. If this property is present, then sortPriority is mandatory |
96
- | sortPriority | Number | No | | Sets the priority on filed for multi sorting(`1` takes highest precedence). Allows sorting on load. If this property is present, then sortDirection is mandatory |
97
- | grouping | Boolean | No | `true` | Enable grouping |
98
- | resize | Boolean | No | `true` | Enable resizing |
99
- | reorderFields | Boolean | No | `true` | Allows reordering of column. |
100
- | freeze | Boolean | No | `true` | Enable freezing |
101
- | fillAvailableSpace | Boolean | No | `false` | field will resize to available excess width. First field definition will be honoured if configured on multiple columns. |
102
- | required | Boolean | No | `false` | An asterisk will be added in the table header cell right after the label |
103
- | toggle | Boolean | No | `true` | Enable field show/hide |
104
- | show | Boolean | No | `true` | Field shows in the view by default. Can be set to false to toggle it in later |
105
- | showMenu | Boolean | No | `true` | Show/hide field level Header menu |
106
- | aggregation | Boolean | No | `true` | Allow aggregation on column |
107
- | combineColumn | Boolean | No | `true` | Allow combining columns |
108
- | customizeColumn | Boolean | No | `true` | Allow customizing column label and formatting |
109
- | noContextMenu | Boolean | No | `false` | Disable context menu at cells |
110
- | contextMenuOptions | `Array<Object>` | No | `[]` | This property extends options provided on right click in a cell context. Object structure: `{ id: <string(required)>, icon: <optional>, label: <required>, show: <bool(optional)>, disabled: <bool(optional)> onClick: <Func(target, field, rowContext)(optional)> }` |
111
- | cellRenderer<a name='cellRenderer'></a> | String | No | | Name of a custom component that is made available through the render factory. Check section on cellRenderer |
112
- | hierarchicalInfo | Object | No | | Enable 'Hierarchical' display mode on column if hierarchicalInfo exists. Object structure: `{parentId: string, materializedPathId: string, targetId: string, sortById:<string(optional)>}` |
113
- | cellAlign | String | No | | Align cell to left/right/center. Values accepted: 'left', 'right', 'center' |
114
- | hideGroupColumnNameLabel | boolean | No | false | Column name label in group header will be hidden when set to 'true' |
115
- | filterParams | Object | No | TODO | Filter options for various field |
70
+ | type | String | Yes | | `number` or `text` or `date` or `datetime` |
71
+ | name | String | Yes | | Actual field name in data |
72
+ | showCategoryInHeaderLabel | Boolean | No | `false` | Show category in header label. The header will be displayed in format {categoryName}.{label} where categoryName will be all the category's labels combined with .(dot) notation |
73
+ | tooltip | String | No | Current Field's formatted value | Defines Field whose value needs to be shown as HelperText e.g tooltip: 'pzDescription' field value for pyID field |
74
+ | showTooltip | Boolean | No | `true` | Enable/Disable tooltip on column |
75
+ | width | Number | No | `150` | Pixel width of the field |
76
+ | minWidth | Number | No | `90` | Minimum width in pixels, field width cannot be resized below this threshold |
77
+ | filter | Boolean | No | `true` | Allow filtering on this field |
78
+ | filterPickList | Boolean | No | `false` | Filter popup presents a pick list to choose values from |
79
+ | sort | Boolean | No | `true` | Allow sorting |
80
+ | sortDirection | String | No | | `asc` or `desc`. Allows sorting on load. If this property is present, then sortPriority is mandatory |
81
+ | sortPriority | Number | No | | Sets the priority on filed for multi sorting(`1` takes highest precedence). Allows sorting on load. If this property is present, then sortDirection is mandatory |
82
+ | grouping | Boolean | No | `true` | Enable grouping |
83
+ | resize | Boolean | No | `true` | Enable resizing |
84
+ | reorderFields | Boolean | No | `true` | Allows reordering of column. |
85
+ | freeze | Boolean | No | `true` | Enable freezing |
86
+ | fillAvailableSpace | Boolean | No | `false` | field will resize to available excess width. First field definition will be honoured if configured on multiple columns. |
87
+ | required | Boolean | No | `false` | An asterisk will be added in the table header cell right after the label |
88
+ | toggle | Boolean | No | `true` | Enable field show/hide |
89
+ | show | Boolean | No | `true` | Field shows in the view by default. Can be set to false to toggle it in later |
90
+ | showMenu | Boolean | No | `true` | Show/hide field level Header menu |
91
+ | aggregation | Boolean | No | `true` | Allow aggregation on column |
92
+ | combineColumn | Boolean | No | `true` | Allow combining columns |
93
+ | customizeColumn | Boolean | No | `true` | Allow customizing column label and formatting |
94
+ | noContextMenu | Boolean | No | `false` | Disable context menu at cells |
95
+ | contextMenuOptions | `Array<Object>` | No | `[]` | This property extends options provided on right click in a cell context. Object structure: `{ id: <string(required)>, icon: <optional>, label: <required>, show: <bool(optional)>, disabled: <bool(optional)> onClick: <Func(target, field, rowContext)(optional)> }` |
96
+ | cellRenderer<a name='cellRenderer'></a> | String | No | | Name of a custom component that is made available through the render factory. Check section on cellRenderer |
97
+ | hierarchicalInfo | Object | No | | Enable 'Hierarchical' display mode on column if hierarchicalInfo exists. Object structure: `{parentId: string, materializedPathId: string, targetId: string, sortById:<string(optional)>}` |
98
+ | cellAlign | String | No | | Align cell to left/right/center. Values accepted: 'left', 'right', 'center' |
99
+ | hideGroupColumnNameLabel | boolean | No | false | Column name label in group header will be hidden when set to 'true' |
100
+ | filterParams | Object | No | TODO | Filter options for various field |
116
101
 
117
102
  **API Context**
118
103
 
@@ -215,3 +200,219 @@ Note to this repo code owners / Dev's:
215
200
  - Every time a user facing / listening string is added in a component:
216
201
  - Make sure to add the new translation in the pyGenericFields localisation rule under the `cosmosFields.fields.lists` category.
217
202
  - Then raise a PR to Cosmos translations pack defintions file to update the same key string.
203
+
204
+ ## Initial State
205
+
206
+ Repeating Structures initializes state from the active view.
207
+
208
+ - An active personalization uses its saved personalization state.
209
+ - For an active preset, sources are evaluated in priority order:
210
+ 1. `persistedInfo`, used only when the active view is `presets[0]`.
211
+ 2. State returned by `apiContext.getComponentState()`.
212
+ 3. The preset's saved state, when present.
213
+ 4. State derived from the preset `meta`.
214
+
215
+ Use one initial-state source for a feature. For example, configure initial grouping, filtering, sorting, and visibility in `meta.fieldDefs`, or provide that state directly through `persistedInfo`.
216
+
217
+ ## Template Consumption
218
+
219
+ Set `meta.template` to one of `Table`, `Gallery`, `Kanban`, `Timeline`, or `Map`. `meta` always defines the view schema: fields, card configuration, and enabled capabilities.
220
+
221
+ Templates support standard Repeating Structures capabilities unless a template's **Not supported** list states otherwise.
222
+
223
+ ### Table
224
+
225
+ Set `meta.template` to `Table` for the standard tabular view. Configure displayed fields through `meta.fieldDefs`; the Meta Properties reference above describes the available options.
226
+
227
+ ```javascript
228
+ <RepeatingStructures
229
+ meta={{ ...baseMeta, template: 'Table' }}
230
+ apiContext={apiContext}
231
+ renderFactory={renderFactory}
232
+ formatters={repeatFormatters}
233
+ />
234
+ ```
235
+
236
+ **Supported**
237
+
238
+ - Multi-level and hierarchical grouping.
239
+ - Default grouping and compatible `TEXT_GROUPING`, `RANGE_GROUPING`, and `INTERVAL_GROUPING` custom grouping.
240
+ - Conditional style formats on fields.
241
+ - Table-specific toolbar controls for column visibility, freezing, density, header icons, autosize, reset widths, and wrapping.
242
+
243
+ ### Gallery
244
+
245
+ Set `meta.template` to `Gallery`, configure card content through `meta.cardConfig`, and include the displayed fields in `meta.fieldDefs`. Use `meta.galleryConfig` for Gallery-specific options such as layout and card activation. Legacy card-content properties in `meta.galleryConfig` remain supported; use `meta.cardConfig` for new integrations.
246
+
247
+ ```javascript
248
+ <RepeatingStructures
249
+ meta={{
250
+ ...baseMeta,
251
+ template: 'Gallery',
252
+ cardConfig: { header: { field: 'pyLabel' } },
253
+ galleryConfig: { layout: 'cardgrid', showLayoutToggle: true }
254
+ }}
255
+ apiContext={apiContext}
256
+ renderFactory={renderFactory}
257
+ formatters={repeatFormatters}
258
+ />
259
+ ```
260
+
261
+ **Supported**
262
+
263
+ - Card presentation through `meta.cardConfig`: header, hero image or tile, field labels, and card footer.
264
+ - Card fields using `fieldDefs`, including `layoutMode` (`stacked` or `inline`).
265
+ - `cardgrid` and `cardlist` layouts through `meta.galleryConfig.layout`.
266
+ - An optional layout toggle through `meta.galleryConfig.showLayoutToggle`.
267
+ - An optional card activation callback through `meta.galleryConfig.onCardClick`.
268
+
269
+ **Not Supported**
270
+
271
+ - Grouping.
272
+ - Conditional style formats.
273
+
274
+ ### Kanban
275
+
276
+ Set `meta.template` to `Kanban`, configure the card presentation through `meta.cardConfig`, and include the lane field in `meta.fieldDefs`.
277
+
278
+ ```javascript
279
+ const customGrouping = {
280
+ type: 'TEXT_GROUPING',
281
+ id: 'status-custom-grouping',
282
+ groups: [
283
+ {
284
+ label: 'Intake',
285
+ condition: {
286
+ lhs: { field: 'pxCurrentStageLabel' },
287
+ comparator: 'IN',
288
+ rhs: { values: ['New', 'Triaging'] }
289
+ }
290
+ },
291
+ {
292
+ label: 'Done',
293
+ condition: {
294
+ lhs: { field: 'pxCurrentStageLabel' },
295
+ comparator: 'EQ',
296
+ rhs: { value: 'Resolved-Completed' }
297
+ }
298
+ }
299
+ ],
300
+ ungrouped: { mode: 'aggregate', label: 'Other' }
301
+ };
302
+
303
+ const persistedInfo = {
304
+ groups: [
305
+ {
306
+ columnId: 'pxCurrentStageLabel',
307
+ level: 0,
308
+ order: 'custom',
309
+ customFunction: customGrouping
310
+ }
311
+ ]
312
+ };
313
+
314
+ <RepeatingStructures
315
+ meta={{
316
+ ...baseMeta,
317
+ template: 'Kanban',
318
+ cardConfig: { header: { field: 'pyLabel' } },
319
+ fieldDefs: baseMeta.fieldDefs.map(field =>
320
+ field.id === 'pxCurrentStageLabel' ? { ...field, show: true, customGrouping } : field
321
+ )
322
+ }}
323
+ persistedInfo={persistedInfo}
324
+ apiContext={apiContext}
325
+ renderFactory={renderFactory}
326
+ formatters={repeatFormatters}
327
+ />;
328
+ ```
329
+
330
+ Kanban derives its lanes from the first active group, `groups[0]`. Supply the initial group through one of the [Initial State](#initial-state) sources. A standard group uses the distinct values of its lane field. A text custom group defines named lanes and their order; retain the same `customGrouping` definition on the grouped field in `meta.fieldDefs`.
331
+
332
+ **Supported**
333
+
334
+ - One required level-0 group, `groups[0]`, used exclusively to build board lanes.
335
+ - A lane field configured either through default grouping or through `customGrouping` with `TEXT_GROUPING` on a text field.
336
+ - `apiContext.fetchGroupedInfo()` provides grouped card data and lane counts.
337
+ - Card presentation through `meta.cardConfig`: header, hero image or tile, field labels, and card footer.
338
+ - Card fields using `fieldDefs`, including `layoutMode` (`stacked` or `inline`).
339
+
340
+ **Not Supported**
341
+
342
+ - Grouping as a Kanban interaction or feature. The first group is a lane definition only.
343
+ - Any grouping level after `groups[0]`.
344
+ - `RANGE_GROUPING` and `INTERVAL_GROUPING`.
345
+ - Custom grouping on non-text fields.
346
+ - Grouped date functions.
347
+ - Group additional fields.
348
+ - Conditional style formats on card fields.
349
+ - Card drag and drop.
350
+
351
+ ### Map
352
+
353
+ Set `meta.template` to `Map` and configure `meta.mapFieldIds`. The location field must resolve to a comma-separated latitude and longitude value; it can use a dot-separated nested-field selector.
354
+
355
+ ```javascript
356
+ <RepeatingStructures
357
+ meta={{
358
+ ...baseMeta,
359
+ template: 'Map',
360
+ mapFieldIds: {
361
+ location: 'Location.pyLatLon',
362
+ label: 'pyLabel',
363
+ content: 'pyContent'
364
+ }
365
+ }}
366
+ apiContext={apiContext}
367
+ renderFactory={renderFactory}
368
+ formatters={repeatFormatters}
369
+ />
370
+ ```
371
+
372
+ **Supported**
373
+
374
+ - A map with a companion summary list of the loaded rows.
375
+ - Pins for rows with a location value. Rows without a location remain in the summary list but do not create a pin.
376
+ - Optional label and content fields for pin titles, summary-list labels, and pin content.
377
+ - A `View in Google Maps` action that creates a route from loaded locations.
378
+
379
+ **Not Supported**
380
+
381
+ - Grouping.
382
+ - The standard list toolbar controls, including search, filtering, sorting, and personalization.
383
+ - Row selection in the Map summary list.
384
+
385
+ ### Timeline
386
+
387
+ Set `meta.template` to `Timeline` and configure the event fields through `meta.timelineFields`. A row needs a value for the configured date field to render as a timeline activity.
388
+
389
+ ```javascript
390
+ <RepeatingStructures
391
+ meta={{
392
+ ...baseMeta,
393
+ template: 'Timeline',
394
+ timelineFields: {
395
+ title: { name: 'pyLabel' },
396
+ date: { name: 'pxCreateDateTime' },
397
+ status: { name: 'pyStatusWork' },
398
+ content: { name: 'pyDescription' }
399
+ }
400
+ }}
401
+ apiContext={apiContext}
402
+ renderFactory={renderFactory}
403
+ formatters={repeatFormatters}
404
+ />
405
+ ```
406
+
407
+ **Supported**
408
+
409
+ - Timeline entries with title and date, plus optional status, icon, and content fields.
410
+ - Visible fields as expandable entry details when `timelineFields.content` is not configured.
411
+ - One optional grouping level, rendered as expandable timeline sections.
412
+ - Date grouping by years, quarters, months, or days.
413
+
414
+ **Not Supported**
415
+
416
+ - More than one grouping level.
417
+ - Multi-row selection and bulk actions.
418
+ - Conditional style formats.
package/lib/Core/Components/Card/CardFieldValue.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import type { RsCoreTypes } from 'pega-repeating-structures-core';
2
+ interface CardFieldValueProps {
3
+ column: RsCoreTypes.Column;
4
+ row: RsCoreTypes.Row;
5
+ }
6
+ declare function CardFieldValue({ column, row }: CardFieldValueProps): import("react/jsx-runtime").JSX.Element;
7
+ export default CardFieldValue;
8
+ //# sourceMappingURL=CardFieldValue.d.ts.map
package/lib/Core/Components/Card/CardFieldValue.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CardFieldValue.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Card/CardFieldValue.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAIlE,UAAU,mBAAmB;IAC3B,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC;IAC3B,GAAG,EAAE,WAAW,CAAC,GAAG,CAAC;CACtB;AAED,iBAAS,cAAc,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,mBAAmB,2CAI3D;AAED,eAAe,cAAc,CAAC"}
package/lib/Core/Components/Card/CardFieldValue.js ADDED
@@ -0,0 +1,8 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import RenderingEngine from '../RenderingEngine/RenderCell';
3
+ function CardFieldValue({ column, row }) {
4
+ column.setExecutionContext(row);
5
+ return _jsx(RenderingEngine, { ...column.getRenderingEngineProps(), highlighter: true });
6
+ }
7
+ export default CardFieldValue;
8
+ //# sourceMappingURL=CardFieldValue.js.map
package/lib/Core/Components/Card/CardFieldValue.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CardFieldValue.js","sourceRoot":"","sources":["../../../../Core/Components/Card/CardFieldValue.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,MAAM,+BAA+B,CAAC;AAO5D,SAAS,cAAc,CAAC,EAAE,MAAM,EAAE,GAAG,EAAuB;IAC1D,MAAM,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;IAEhC,OAAO,KAAC,eAAe,OAAK,MAAM,CAAC,uBAAuB,EAAE,EAAE,WAAW,SAAG,CAAC;AAC/E,CAAC;AAED,eAAe,cAAc,CAAC","sourcesContent":["import type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nimport RenderingEngine from '../RenderingEngine/RenderCell';\n\ninterface CardFieldValueProps {\n column: RsCoreTypes.Column;\n row: RsCoreTypes.Row;\n}\n\nfunction CardFieldValue({ column, row }: CardFieldValueProps) {\n column.setExecutionContext(row);\n\n return <RenderingEngine {...column.getRenderingEngineProps()} highlighter />;\n}\n\nexport default CardFieldValue;\n"]}
package/lib/Core/Components/Card/CardHeader.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import type { RsCoreTypes } from 'pega-repeating-structures-core';
2
+ type CardHeaderProps = {
3
+ headerColumn?: RsCoreTypes.Column;
4
+ row: RsCoreTypes.Row;
5
+ };
6
+ declare function CardHeader({ headerColumn, row }: CardHeaderProps): import("react/jsx-runtime").JSX.Element | null;
7
+ declare const _default: import("react").MemoExoticComponent<typeof CardHeader>;
8
+ export default _default;
9
+ //# sourceMappingURL=CardHeader.d.ts.map
package/lib/Core/Components/Card/CardHeader.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Card/CardHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAIlE,KAAK,eAAe,GAAG;IACrB,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC;IAClC,GAAG,EAAE,WAAW,CAAC,GAAG,CAAC;CACtB,CAAC;AAMF,iBAAS,UAAU,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,EAAE,eAAe,kDAYzD;;AAED,wBAAgC"}