@pega/dx-component-builder-sdk 24.2.11 → 24.2.12

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 (234) hide show
  1. package/README.md +3 -3
  2. package/package.json +1 -1
  3. package/src/constants.js +39 -6
  4. package/src/tasks/create/templates/Constellation/field/Date/demo.stories.tsx.mustache +0 -16
  5. package/src/tasks/create/templates/Constellation/field/DateTime/demo.stories.tsx.mustache +0 -17
  6. package/src/tasks/create/templates/Constellation/field/Decimal/demo.stories.tsx.mustache +0 -1
  7. package/src/tasks/create/templates/Constellation/field/Decimal-Currency/demo.stories.tsx.mustache +0 -1
  8. package/src/tasks/create/templates/Constellation/field/Decimal-Percentage/demo.stories.tsx.mustache +0 -1
  9. package/src/tasks/create/templates/Constellation/field/Decimal-Percentage/mock.ts.mustache +1 -0
  10. package/src/tasks/create/templates/Constellation/field/Icon-Button-URL/demo.stories.tsx.mustache +9 -20
  11. package/src/tasks/create/templates/Constellation/field/Picklist/demo.stories.tsx.mustache +0 -1
  12. package/src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/demo.stories.tsx.mustache +0 -1
  13. package/src/tasks/create/templates/Constellation/field/Picklist-RadioButtons/demo.stories.tsx.mustache +0 -1
  14. package/src/tasks/create/templates/Constellation/field/Picklist-RadioButtons/index.tsx.mustache +3 -5
  15. package/src/tasks/create/templates/Constellation/field/Text/demo.stories.tsx.mustache +0 -1
  16. package/src/tasks/create/templates/Constellation/field/Text-Email/demo.stories.tsx.mustache +0 -1
  17. package/src/tasks/create/templates/Constellation/field/Text-Email/mock.ts.mustache +1 -0
  18. package/src/tasks/create/templates/Constellation/field/Text-Input/demo.stories.tsx.mustache +0 -1
  19. package/src/tasks/create/templates/Constellation/field/Text-Paragraph/demo.stories.tsx.mustache +0 -1
  20. package/src/tasks/create/templates/Constellation/field/Text-Phone/demo.stories.tsx.mustache +1 -2
  21. package/src/tasks/create/templates/Constellation/field/Text-URL/demo.stories.tsx.mustache +0 -1
  22. package/src/tasks/create/templates/Constellation/field/TimeOfDay/demo.stories.tsx.mustache +0 -1
  23. package/src/tasks/create/templates/Constellation/template/DETAILS/demo.stories.tsx.mustache +10 -0
  24. package/src/tasks/create/templates/Constellation/template/PAGE/demo.stories.tsx.mustache +1 -13
  25. package/src/tasks/create/templates/Constellation/widget/CASE/demo.stories.tsx.mustache +10 -32
  26. package/src/tasks/create/templates/Constellation/widget/CASE/index.tsx.mustache +2 -2
  27. package/src/tasks/create/templates/Constellation/widget/PAGE/demo.stories.tsx.mustache +10 -21
  28. package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/demo.stories.tsx.mustache +10 -22
  29. package/src/tasks/create/templates/SDK-Angular/field/Boolean/demo.stories.tsx.mustache +1 -1
  30. package/src/tasks/create/templates/SDK-Angular/field/Date/date.component.spec.ts.mustache +1 -1
  31. package/src/tasks/create/templates/SDK-Angular/field/Date/demo.stories.tsx.mustache +1 -11
  32. package/src/tasks/create/templates/SDK-Angular/field/DateTime/demo.stories.tsx.mustache +1 -12
  33. package/src/tasks/create/templates/SDK-Angular/field/Decimal/decimal.component.spec.ts.mustache +1 -1
  34. package/src/tasks/create/templates/SDK-Angular/field/Decimal/demo.stories.tsx.mustache +1 -1
  35. package/src/tasks/create/templates/SDK-Angular/field/Decimal-Currency/demo.stories.tsx.mustache +1 -15
  36. package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/decimal-percentage.component.spec.ts.mustache +1 -1
  37. package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/demo.stories.tsx.mustache +1 -1
  38. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/demo.stories.tsx.mustache +10 -21
  39. package/src/tasks/create/templates/SDK-Angular/field/Integer/demo.stories.tsx.mustache +1 -1
  40. package/src/tasks/create/templates/SDK-Angular/field/Picklist/demo.stories.tsx.mustache +1 -1
  41. package/src/tasks/create/templates/SDK-Angular/field/Picklist-Autocomplete/demo.stories.tsx.mustache +1 -1
  42. package/src/tasks/create/templates/SDK-Angular/field/Picklist-RadioButtons/demo.stories.tsx.mustache +1 -1
  43. package/src/tasks/create/templates/SDK-Angular/field/Text/demo.stories.tsx.mustache +1 -1
  44. package/src/tasks/create/templates/SDK-Angular/field/Text-Email/demo.stories.tsx.mustache +1 -1
  45. package/src/tasks/create/templates/SDK-Angular/field/Text-Input/demo.stories.tsx.mustache +1 -1
  46. package/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/demo.stories.tsx.mustache +1 -1
  47. package/src/tasks/create/templates/SDK-Angular/field/Text-Phone/demo.stories.tsx.mustache +1 -1
  48. package/src/tasks/create/templates/SDK-Angular/field/Text-URL/demo.stories.tsx.mustache +1 -1
  49. package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/demo.stories.tsx.mustache +1 -1
  50. package/src/tasks/create/templates/SDK-Angular/template/DETAILS/demo.stories.tsx.mustache +1 -1
  51. package/src/tasks/create/templates/SDK-Angular/template/DETAILS-region/demo.stories.tsx.mustache +1 -1
  52. package/src/tasks/create/templates/SDK-Angular/template/FORM/demo.stories.tsx.mustache +9 -17
  53. package/src/tasks/create/templates/SDK-Angular/template/FORM/mock.ts.mustache +19 -1
  54. package/src/tasks/create/templates/SDK-Angular/template/FORM-region/demo.stories.tsx.mustache +7 -16
  55. package/src/tasks/create/templates/SDK-Angular/template/FORM-region/mock.ts.mustache +19 -1
  56. package/src/tasks/create/templates/SDK-Angular/template/PAGE/demo.stories.tsx.mustache +35 -47
  57. package/src/tasks/create/templates/SDK-Angular/widget/CASE/demo.stories.tsx.mustache +7 -17
  58. package/src/tasks/create/templates/SDK-Angular/widget/PAGE/demo.stories.tsx.mustache +7 -10
  59. package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/demo.stories.tsx.mustache +9 -17
  60. package/src/tasks/create/templates/SDK-React/field/Date/demo.stories.tsx.mustache +0 -21
  61. package/src/tasks/create/templates/SDK-React/field/Date/index.tsx.mustache +5 -1
  62. package/src/tasks/create/templates/SDK-React/field/DateTime/demo.stories.tsx.mustache +0 -21
  63. package/src/tasks/create/templates/SDK-React/field/DateTime/index.tsx.mustache +13 -5
  64. package/src/tasks/create/templates/SDK-React/field/Decimal/demo.stories.tsx.mustache +0 -14
  65. package/src/tasks/create/templates/SDK-React/field/Decimal/index.tsx.mustache +6 -1
  66. package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/demo.stories.tsx.mustache +0 -14
  67. package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/index.tsx.mustache +6 -1
  68. package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/demo.stories.tsx.mustache +0 -14
  69. package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/index.tsx.mustache +5 -1
  70. package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/demo.stories.tsx.mustache +2 -6
  71. package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/index.tsx.mustache +1 -1
  72. package/src/tasks/create/templates/SDK-React/field/Integer/demo.stories.tsx.mustache +3 -0
  73. package/src/tasks/create/templates/SDK-React/field/Picklist/index.tsx.mustache +25 -20
  74. package/src/tasks/create/templates/SDK-React/field/Picklist-RadioButtons/index.tsx.mustache +1 -4
  75. package/src/tasks/create/templates/SDK-React/field/Text/demo.stories.tsx.mustache +3 -0
  76. package/src/tasks/create/templates/SDK-React/field/Text-Email/demo.stories.tsx.mustache +3 -0
  77. package/src/tasks/create/templates/SDK-React/field/Text-Input/demo.stories.tsx.mustache +3 -0
  78. package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/demo.stories.tsx.mustache +3 -0
  79. package/src/tasks/create/templates/SDK-React/field/Text-Phone/demo.stories.tsx.mustache +3 -0
  80. package/src/tasks/create/templates/SDK-React/field/Text-URL/demo.stories.tsx.mustache +3 -0
  81. package/src/tasks/create/templates/SDK-React/field/TimeOfDay/index.tsx.mustache +1 -1
  82. package/src/tasks/create/templates/SDK-React/template/DETAILS/demo.stories.tsx.mustache +8 -28
  83. package/src/tasks/create/templates/SDK-React/template/DETAILS/index.tsx.mustache +7 -2
  84. package/src/tasks/create/templates/SDK-React/template/DETAILS-region/demo.stories.tsx.mustache +8 -28
  85. package/src/tasks/create/templates/SDK-React/template/DETAILS-region/index.tsx.mustache +7 -2
  86. package/src/tasks/create/templates/SDK-React/template/FORM/demo.stories.tsx.mustache +10 -16
  87. package/src/tasks/create/templates/SDK-React/template/FORM-region/index.tsx.mustache +5 -5
  88. package/src/tasks/create/templates/SDK-React/widget/CASE/demo.stories.tsx.mustache +10 -20
  89. package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache +2 -1
  90. package/src/tasks/create/templates/SDK-React/widget/PAGE/demo.stories.tsx.mustache +9 -19
  91. package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/demo.stories.tsx.mustache +10 -20
  92. package/tests/assets/sdk-a/components/create/custom-constellation/field/Pega_DXIL_MyTestText/demo.stories.tsx +0 -1
  93. package/tests/assets/sdk-a/components/create/custom-sdk/field/pega-dxil-my-test-text/demo.stories.tsx +1 -1
  94. package/tests/assets/sdk-a/components/create/override-sdk/field/user-reference/user-reference.component.html +2 -10
  95. package/tests/assets/sdk-a/components/create/override-sdk/field/user-reference/user-reference.component.ts +34 -12
  96. package/tests/assets/sdk-a/components/create/override-sdk/infra/view/view.component.ts +15 -1
  97. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyCurrency/demo.stories.tsx +0 -1
  98. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyDate/demo.stories.tsx +0 -16
  99. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyDateTime/demo.stories.tsx +0 -17
  100. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyDecimal/demo.stories.tsx +0 -1
  101. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyEmail/demo.stories.tsx +0 -1
  102. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyEmail/mock.ts +1 -0
  103. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyIconButtonURL/demo.stories.tsx +9 -20
  104. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyParagraph/demo.stories.tsx +0 -1
  105. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyPercentage/demo.stories.tsx +0 -1
  106. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyPercentage/mock.ts +1 -0
  107. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyPhone/demo.stories.tsx +1 -2
  108. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyPicklist/demo.stories.tsx +0 -1
  109. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyRadioButtons/demo.stories.tsx +0 -1
  110. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyRadioButtons/index.tsx +3 -5
  111. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/demo.stories.tsx +0 -1
  112. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyText/demo.stories.tsx +0 -1
  113. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyTextInput/demo.stories.tsx +0 -1
  114. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyTimeOfDay/demo.stories.tsx +0 -1
  115. package/tests/assets/sdk-a/components/createAll/custom-constellation/field/Pega_DXIL_MyURL/demo.stories.tsx +0 -1
  116. package/tests/assets/sdk-a/components/createAll/custom-constellation/template/Pega_DXIL_MyDetails/demo.stories.tsx +10 -0
  117. package/tests/assets/sdk-a/components/createAll/custom-constellation/template/Pega_DXIL_MyPage/demo.stories.tsx +1 -13
  118. package/tests/assets/sdk-a/components/createAll/custom-constellation/widget/Pega_DXIL_MyCaseWidget/demo.stories.tsx +10 -32
  119. package/tests/assets/sdk-a/components/createAll/custom-constellation/widget/Pega_DXIL_MyCaseWidget/index.tsx +2 -2
  120. package/tests/assets/sdk-a/components/createAll/custom-constellation/widget/Pega_DXIL_MyPageCaseWidget/demo.stories.tsx +10 -22
  121. package/tests/assets/sdk-a/components/createAll/custom-constellation/widget/Pega_DXIL_MyPageWidget/demo.stories.tsx +10 -21
  122. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-boolean/demo.stories.tsx +1 -1
  123. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-currency/demo.stories.tsx +1 -15
  124. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date/demo.stories.tsx +1 -11
  125. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date/pega-dxil-my-date.component.spec.ts +1 -1
  126. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date-time/demo.stories.tsx +1 -12
  127. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-decimal/demo.stories.tsx +1 -1
  128. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-decimal/pega-dxil-my-decimal.component.spec.ts +1 -1
  129. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-email/demo.stories.tsx +1 -1
  130. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-icon-button-url/demo.stories.tsx +10 -21
  131. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-integer/demo.stories.tsx +1 -1
  132. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-paragraph/demo.stories.tsx +1 -1
  133. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-percentage/demo.stories.tsx +1 -1
  134. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-percentage/pega-dxil-my-percentage.component.spec.ts +1 -1
  135. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-phone/demo.stories.tsx +1 -1
  136. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-picklist/demo.stories.tsx +1 -1
  137. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-radiobuttons/demo.stories.tsx +1 -1
  138. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-searchbox/demo.stories.tsx +1 -1
  139. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-text/demo.stories.tsx +1 -1
  140. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-text-input/demo.stories.tsx +1 -1
  141. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-time-of-day/demo.stories.tsx +1 -1
  142. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-url/demo.stories.tsx +1 -1
  143. package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-details/demo.stories.tsx +1 -1
  144. package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-form/demo.stories.tsx +9 -17
  145. package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-form/mock.ts +19 -1
  146. package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-page/demo.stories.tsx +35 -47
  147. package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-details/demo.stories.tsx +1 -1
  148. package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-form/demo.stories.tsx +7 -16
  149. package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-form/mock.ts +19 -1
  150. package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-case-widget/demo.stories.tsx +7 -17
  151. package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/demo.stories.tsx +9 -17
  152. package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-widget/demo.stories.tsx +7 -10
  153. package/tests/assets/sdk-a/components/createAll/override-sdk/field/user-reference/user-reference.component.html +2 -10
  154. package/tests/assets/sdk-a/components/createAll/override-sdk/field/user-reference/user-reference.component.ts +34 -12
  155. package/tests/assets/sdk-a/components/createAll/override-sdk/infra/view/view.component.ts +15 -1
  156. package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/demo.stories.tsx +3 -0
  157. package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx +2 -2
  158. package/tests/assets/sdk-r/components/create/override-sdk/field/Phone/Phone.tsx +5 -5
  159. package/tests/assets/sdk-r/components/create/override-sdk/infra/FlowContainer/FlowContainer.tsx +360 -0
  160. package/tests/assets/sdk-r/components/create/override-sdk/infra/FlowContainer/helpers.ts +138 -0
  161. package/tests/assets/sdk-r/components/create/override-sdk/infra/FlowContainer/index.tsx +1 -0
  162. package/tests/assets/sdk-r/components/create/override-sdk/infra/ModalViewContainer/ListViewActionButtons/ListViewActionButtons.tsx +68 -0
  163. package/tests/assets/sdk-r/components/create/override-sdk/infra/ModalViewContainer/ListViewActionButtons/index.tsx +1 -0
  164. package/tests/assets/sdk-r/components/create/override-sdk/infra/ModalViewContainer/ModalViewContainer.tsx +345 -0
  165. package/tests/assets/sdk-r/components/create/override-sdk/infra/ModalViewContainer/index.tsx +1 -0
  166. package/tests/assets/sdk-r/components/create/override-sdk/infra/NavBar/NavBar.css +1 -0
  167. package/tests/assets/sdk-r/components/create/override-sdk/infra/Reference/Reference.tsx +52 -0
  168. package/tests/assets/sdk-r/components/create/override-sdk/infra/Reference/index.tsx +1 -0
  169. package/tests/assets/sdk-r/components/create/override-sdk/infra/Region/Region.tsx +17 -0
  170. package/tests/assets/sdk-r/components/create/override-sdk/infra/Region/index.tsx +1 -0
  171. package/tests/assets/sdk-r/components/create/override-sdk/infra/RootContainer/RootContainer.tsx +240 -0
  172. package/tests/assets/sdk-r/components/create/override-sdk/infra/RootContainer/index.tsx +1 -0
  173. package/tests/assets/sdk-r/components/create/override-sdk/infra/SimpleView/SimpleView.tsx +48 -0
  174. package/tests/assets/sdk-r/components/create/override-sdk/infra/SimpleView/helper.ts +125 -0
  175. package/tests/assets/sdk-r/components/create/override-sdk/infra/SimpleView/index.tsx +1 -0
  176. package/tests/assets/sdk-r/components/create/override-sdk/infra/ViewContainer/ViewContainer.tsx +201 -0
  177. package/tests/assets/sdk-r/components/create/override-sdk/infra/ViewContainer/index.tsx +1 -0
  178. package/tests/assets/sdk-r/components/create/override-sdk/template/DynamicTabs/DynamicTabs.tsx +80 -0
  179. package/tests/assets/sdk-r/components/create/override-sdk/template/DynamicTabs/config.json +36 -0
  180. package/tests/assets/sdk-r/components/create/override-sdk/template/DynamicTabs/index.tsx +1 -0
  181. package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/ListView.tsx +29 -28
  182. package/tests/assets/sdk-r/components/create/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx +13 -5
  183. package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyRadiobuttons/index.tsx +3 -5
  184. package/tests/assets/sdk-r/components/createAll/custom-constellation/widget/Pega_DXIL_MyCaseWidget/index.tsx +2 -2
  185. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyCurrency/index.tsx +6 -1
  186. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDate/demo.stories.tsx +3 -0
  187. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDate/index.tsx +5 -1
  188. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDateTime/demo.stories.tsx +3 -0
  189. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDateTime/index.tsx +13 -5
  190. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDecimal/index.tsx +6 -1
  191. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyEmail/demo.stories.tsx +3 -0
  192. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyIconButtonURL/index.tsx +1 -1
  193. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyInteger/demo.stories.tsx +3 -0
  194. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyParagraph/demo.stories.tsx +3 -0
  195. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPercentage/index.tsx +5 -1
  196. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPhone/demo.stories.tsx +3 -0
  197. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPhone/index.tsx +5 -5
  198. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPicklist/index.tsx +25 -20
  199. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyRadiobuttons/index.tsx +1 -4
  200. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyText/demo.stories.tsx +3 -0
  201. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTextInput/demo.stories.tsx +3 -0
  202. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTimeOfDay/index.tsx +1 -1
  203. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyURL/demo.stories.tsx +3 -0
  204. package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyDetails/index.tsx +7 -2
  205. package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnDetails/index.tsx +7 -2
  206. package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/demo.stories.tsx +28 -13
  207. package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/index.tsx +5 -5
  208. package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyCaseWidget/index.tsx +2 -1
  209. package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx +2 -2
  210. package/tests/assets/sdk-r/components/createAll/override-sdk/field/Phone/Phone.tsx +5 -5
  211. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/FlowContainer/FlowContainer.tsx +360 -0
  212. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/FlowContainer/helpers.ts +138 -0
  213. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/FlowContainer/index.tsx +1 -0
  214. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/ModalViewContainer/ListViewActionButtons/ListViewActionButtons.tsx +68 -0
  215. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/ModalViewContainer/ListViewActionButtons/index.tsx +1 -0
  216. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/ModalViewContainer/ModalViewContainer.tsx +345 -0
  217. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/ModalViewContainer/index.tsx +1 -0
  218. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/NavBar/NavBar.css +1 -0
  219. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/Reference/Reference.tsx +52 -0
  220. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/Reference/index.tsx +1 -0
  221. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/Region/Region.tsx +17 -0
  222. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/Region/index.tsx +1 -0
  223. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/RootContainer/RootContainer.tsx +240 -0
  224. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/RootContainer/index.tsx +1 -0
  225. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/SimpleView/SimpleView.tsx +48 -0
  226. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/SimpleView/helper.ts +125 -0
  227. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/SimpleView/index.tsx +1 -0
  228. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/ViewContainer/ViewContainer.tsx +201 -0
  229. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/ViewContainer/index.tsx +1 -0
  230. package/tests/assets/sdk-r/components/createAll/override-sdk/template/DynamicTabs/DynamicTabs.tsx +80 -0
  231. package/tests/assets/sdk-r/components/createAll/override-sdk/template/DynamicTabs/config.json +36 -0
  232. package/tests/assets/sdk-r/components/createAll/override-sdk/template/DynamicTabs/index.tsx +1 -0
  233. package/tests/assets/sdk-r/components/createAll/override-sdk/template/ListView/ListView.tsx +29 -28
  234. package/tests/assets/sdk-r/components/createAll/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx +13 -5
@@ -0,0 +1,345 @@
1
+ import { createElement, useEffect, useRef, useState } from 'react';
2
+ import Dialog from '@mui/material/Dialog';
3
+ import DialogContent from '@mui/material/DialogContent';
4
+ import DialogTitle from '@mui/material/DialogTitle';
5
+ import makeStyles from '@mui/styles/makeStyles';
6
+ import { LocalizationProvider } from '@mui/x-date-pickers';
7
+ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
8
+ import difference from 'lodash.difference';
9
+
10
+ import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
11
+ // Need to get correct implementation from component map for Assignment and CancelAlert
12
+ import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
13
+ import { getBanners } from '@pega/react-sdk-components/lib/components/helpers/case-utils';
14
+ import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
15
+
16
+ interface ModalViewContainerProps extends PConnProps {
17
+ // If any, enter additional props that only exist on this component
18
+ loadingInfo?: string;
19
+ routingInfo?: any;
20
+ pageMessages?: string[];
21
+ }
22
+
23
+ function isOpenModalAction(prevModalCollection, currentModalList) {
24
+ return prevModalCollection && currentModalList ? Object.keys(prevModalCollection).length < currentModalList.length : false;
25
+ }
26
+
27
+ function isUpdateModalAction(prevModalCollection, currentModalList) {
28
+ return prevModalCollection && currentModalList ? Object.keys(prevModalCollection).length === currentModalList.length : false;
29
+ }
30
+
31
+ function isCloseModalAction(prevModalCollection, currentModalList) {
32
+ return prevModalCollection && currentModalList ? Object.keys(prevModalCollection).length > currentModalList.length : false;
33
+ }
34
+
35
+ function buildName(pConnect, name = '') {
36
+ const context = pConnect.getContextName();
37
+ return `${context}/${name}`;
38
+ }
39
+
40
+ function getKeyAndLatestItem(routinginfo, pConn, options) {
41
+ const containerName = pConn.getContainerName();
42
+ const { acTertiary = false } = options || {};
43
+ if (PCore.getContainerUtils().hasContainerItems(buildName(pConn, containerName))) {
44
+ const { accessedOrder, items } = routinginfo;
45
+ let key;
46
+ // eslint-disable-next-line no-plusplus
47
+ for (let i = accessedOrder.length - 1; i >= 0; i--) {
48
+ const tempkey = accessedOrder[i];
49
+ if ((acTertiary && items[tempkey].acTertiary) || (!acTertiary && !items[tempkey].acTertiary)) {
50
+ key = tempkey;
51
+ break;
52
+ }
53
+ }
54
+ const latestItem = items[key];
55
+ return { key, latestItem };
56
+ }
57
+ return {};
58
+ }
59
+
60
+ function getConfigObject(item, pConnect, isReverseCoexistence = false) {
61
+ let config;
62
+ if (isReverseCoexistence) {
63
+ config = {
64
+ options: {
65
+ pageReference: pConnect?.getPageReference(),
66
+ hasForm: true,
67
+ containerName: pConnect?.getContainerName() || PCore.getConstants().MODAL
68
+ }
69
+ };
70
+ return PCore.createPConnect(config);
71
+ }
72
+ if (item) {
73
+ const { context, view, isBulkAction } = item;
74
+ const target = PCore.getContainerUtils().getTargetFromContainerItemID(context);
75
+ config = {
76
+ meta: view,
77
+ options: {
78
+ context,
79
+ pageReference: view.config.context || pConnect.getPageReference(),
80
+ hasForm: true,
81
+ ...(isBulkAction && { isBulkAction }),
82
+ containerName: pConnect?.getContainerName() || PCore.getConstants().MODAL,
83
+ target
84
+ }
85
+ };
86
+ return PCore.createPConnect(config);
87
+ }
88
+ return null;
89
+ }
90
+
91
+ const useStyles = makeStyles(theme => ({
92
+ dlgTitle: {
93
+ marginLeft: theme.spacing(2),
94
+ marginRight: theme.spacing(2),
95
+ marginTop: theme.spacing(2),
96
+ marginBottom: theme.spacing(0)
97
+ },
98
+ dlgContent: {
99
+ marginLeft: theme.spacing(2),
100
+ marginRight: theme.spacing(2),
101
+ marginTop: theme.spacing(0),
102
+ marginBottom: theme.spacing(2)
103
+ }
104
+ }));
105
+
106
+ export default function ModalViewContainer(props: ModalViewContainerProps) {
107
+ // Get the proper implementation (local or Pega-provided) for these components that are emitted below
108
+ const Assignment = getComponentFromMap('Assignment');
109
+ const CancelAlert = getComponentFromMap('CancelAlert');
110
+ const ListViewActionButtons = getComponentFromMap('ListViewActionButtons');
111
+
112
+ const classes = useStyles();
113
+
114
+ const modalCollection = useRef({});
115
+ const routingInfoRef = useRef({});
116
+ const { getPConnect, routingInfo = null, pageMessages = [] } = props;
117
+ const pConn = getPConnect();
118
+ const { acTertiary } = pConn.getConfigProps() as any;
119
+ const {
120
+ CONTAINER_TYPE: { MULTIPLE },
121
+ PUB_SUB_EVENTS: { EVENT_SHOW_CANCEL_ALERT }
122
+ } = PCore.getConstants();
123
+ const { subscribe, unsubscribe } = PCore.getPubSubUtils();
124
+ const [bShowModal, setShowModal] = useState(false);
125
+ const [bShowCancelAlert, setShowCancelAlert] = useState(false);
126
+ const [createdView, setCreatedView] = useState<any>(null);
127
+ const [title, setTitle] = useState('');
128
+ const [arNewChildrenAsReact, setArNewChildrenAsReact] = useState<any[]>([]);
129
+ const [itemKey, setItemKey] = useState('');
130
+ const [cancelAlertProps, setCancelAlertProps] = useState({});
131
+ const [isMultiRecordData, setMultiRecordData] = useState(false);
132
+ const localizedVal = PCore.getLocaleUtils().getLocaleValue;
133
+ const localeCategory = 'Data Object';
134
+
135
+ const ERROR_WHILE_RENDERING = 'ERROR_WHILE_RENDERING';
136
+
137
+ function showAlert(payload) {
138
+ const { latestItem } = getKeyAndLatestItem(routingInfoRef.current, pConn, { acTertiary });
139
+ const isReverseCoexistence = (PCore.getCoexistenceManager().getBroadcastUtils() as any).isReverseCoexistenceCaseLoaded();
140
+ const { isModalAction, hideDelete, isDataObject, skipReleaseLockRequest } = payload;
141
+
142
+ /*
143
+ If we are in create stage full page mode, created a new case and trying to click on cancel button
144
+ it will show two alert dialogs which is not expected. Hence isModalAction flag to avoid that.
145
+ */
146
+ if (latestItem && isModalAction) {
147
+ const configObject = getConfigObject(latestItem, pConn, isReverseCoexistence);
148
+ const contextName = configObject?.getPConnect().getContextName();
149
+ setCancelAlertProps({
150
+ heading: 'Discard unsaved changes?',
151
+ content: 'You have unsaved changes. You can discard them or go back to keep working.',
152
+ getPConnect: configObject?.getPConnect,
153
+ itemKey: contextName,
154
+ hideDelete,
155
+ isDataObject,
156
+ skipReleaseLockRequest
157
+ });
158
+ setShowCancelAlert(true);
159
+ }
160
+ }
161
+
162
+ function handleModalOpen(key) {
163
+ modalCollection.current = {
164
+ ...modalCollection.current,
165
+ [key]: {}
166
+ };
167
+ }
168
+
169
+ function handleModalClose(accessedOrder) {
170
+ const tempModalCollection = modalCollection.current;
171
+ const [closedModalKey] = difference(Object.keys(tempModalCollection), accessedOrder);
172
+
173
+ if (closedModalKey && tempModalCollection[closedModalKey]) {
174
+ const modifiedModalCollection = { ...tempModalCollection };
175
+ delete modifiedModalCollection[closedModalKey];
176
+ modalCollection.current = modifiedModalCollection;
177
+ setShowModal(false);
178
+ }
179
+ }
180
+
181
+ const dismissCancelAlert = dismissAllModals => {
182
+ setShowCancelAlert(false);
183
+
184
+ if (dismissAllModals) {
185
+ setShowModal(false);
186
+ }
187
+ };
188
+
189
+ function getModalHeading(dataObjectAction) {
190
+ return dataObjectAction === PCore.getConstants().RESOURCE_STATUS.CREATE
191
+ ? localizedVal('Add Record', localeCategory)
192
+ : localizedVal('Edit Record', localeCategory);
193
+ }
194
+
195
+ function determineModalHeaderByAction(actionName, caseTypeName, ID, caseLocaleRef) {
196
+ if (actionName) {
197
+ return localizedVal(actionName, localeCategory);
198
+ }
199
+ return `${localizedVal('Create', localeCategory)} ${localizedVal(caseTypeName, undefined, caseLocaleRef)} (${ID})`;
200
+ }
201
+
202
+ useEffect(() => {
203
+ // Establish the necessary containers
204
+ const containerMgr = pConn.getContainerManager();
205
+ containerMgr.initializeContainers({ type: MULTIPLE });
206
+ }, [MULTIPLE, pConn]);
207
+
208
+ useEffect(() => {
209
+ // Persisting routing information between the renders in showAlert
210
+ routingInfoRef.current = routingInfo;
211
+ });
212
+
213
+ useEffect(() => {
214
+ subscribe(EVENT_SHOW_CANCEL_ALERT, showAlert, EVENT_SHOW_CANCEL_ALERT /* Unique string for subscription */);
215
+ subscribe(
216
+ ERROR_WHILE_RENDERING,
217
+ error => {
218
+ // setError(true);
219
+ // eslint-disable-next-line no-console
220
+ console.error(error);
221
+ },
222
+ `${ERROR_WHILE_RENDERING}-mc-${getPConnect().getContextName()}`,
223
+ false,
224
+ getPConnect().getContextName()
225
+ );
226
+
227
+ // Unsubscribe on component unmount
228
+ return () => {
229
+ unsubscribe(EVENT_SHOW_CANCEL_ALERT, EVENT_SHOW_CANCEL_ALERT /* Should be same unique string passed during subscription */);
230
+ };
231
+ });
232
+
233
+ useEffect(() => {
234
+ if (routingInfo) {
235
+ const { accessedOrder, type } = routingInfo;
236
+ const { key, latestItem } = getKeyAndLatestItem(routingInfo, pConn, { acTertiary });
237
+
238
+ if (
239
+ latestItem &&
240
+ type === MULTIPLE &&
241
+ (isOpenModalAction(modalCollection.current, accessedOrder) || isUpdateModalAction(modalCollection.current, accessedOrder))
242
+ ) {
243
+ const { actionName } = latestItem;
244
+ // const { isDockable = false } = latestItem?.modalOptions || {};
245
+ const configObject: any = getConfigObject(latestItem, null, false);
246
+ const pConnect = configObject.getPConnect();
247
+ const caseInfo: any = pConnect.getCaseInfo();
248
+ const caseName = caseInfo.getName();
249
+ const caseTypeName = caseInfo.getCaseTypeName();
250
+ const ID = caseInfo.getBusinessID() || caseInfo.getID();
251
+ const isDataObject = routingInfo.items[latestItem.context].resourceType === PCore.getConstants().RESOURCE_TYPES.DATA;
252
+ const dataObjectAction = routingInfo.items[latestItem.context].resourceStatus;
253
+ const isMultiRecord = routingInfo.items[latestItem.context].isMultiRecordData;
254
+ const headingValue =
255
+ isDataObject || isMultiRecord
256
+ ? getModalHeading(dataObjectAction)
257
+ : determineModalHeaderByAction(actionName, caseTypeName, ID, `${caseInfo?.getClassName()}!CASE!${caseInfo.getName()}`.toUpperCase());
258
+
259
+ let arChildrenAsReact: any[] = [];
260
+
261
+ if (pConnect.getComponentName() === 'reference') {
262
+ // Reference component doesn't have children. It can build the View we want.
263
+ // The Reference component getPConnect is in configObject
264
+
265
+ arChildrenAsReact.push(
266
+ createElement(createPConnectComponent(), {
267
+ ...configObject,
268
+ key: `${caseName}-${ID}`
269
+ })
270
+ );
271
+ } else {
272
+ // This is the 8.6 implementation. Leaving it in for reference for now.
273
+ // And create a similar array of the children as React components
274
+ // passed to Assignment component when rendered
275
+ arChildrenAsReact = (pConnect.getChildren() as []).map((child: any) => {
276
+ // Use Case Summary ID as the React element's key
277
+ const caseSummaryID = child.getPConnect().getCaseSummary().ID;
278
+ return createElement(createPConnectComponent(), {
279
+ ...child,
280
+ key: caseSummaryID
281
+ });
282
+ });
283
+ }
284
+
285
+ if (arChildrenAsReact.length > 0) setArNewChildrenAsReact(arChildrenAsReact);
286
+ setMultiRecordData(isMultiRecord);
287
+ setTitle(headingValue);
288
+ setCreatedView({ configObject, latestItem });
289
+ setItemKey(key);
290
+ setShowModal(true);
291
+
292
+ // Update modal use case which happens when assignment in submitted in modal.
293
+ if (isUpdateModalAction(modalCollection.current, accessedOrder)) {
294
+ // handleModalUpdate(key);
295
+ } else if (isOpenModalAction(modalCollection.current, accessedOrder)) {
296
+ // New modal open scenario
297
+ handleModalOpen(key);
298
+ }
299
+ } else if (isCloseModalAction(modalCollection.current, accessedOrder)) {
300
+ handleModalClose(accessedOrder);
301
+ }
302
+ }
303
+ }, [routingInfo]);
304
+
305
+ function closeActionsDialog() {
306
+ // actionsDialog.current = true;
307
+ setShowModal(false);
308
+ }
309
+
310
+ return (
311
+ <>
312
+ <Dialog open={bShowModal} aria-labelledby='form-dialog-title'>
313
+ <DialogTitle id='form-dialog-title' className={`${classes.dlgTitle} psdk-dialog-title`}>
314
+ {title}
315
+ </DialogTitle>
316
+ <DialogContent className={`${classes.dlgContent} psdk-dialog-content`}>
317
+ {bShowModal ? (
318
+ <LocalizationProvider dateAdapter={AdapterDayjs}>
319
+ <Assignment
320
+ getPConnect={createdView.configObject.getPConnect}
321
+ itemKey={itemKey}
322
+ isInModal
323
+ banners={getBanners({
324
+ target: itemKey,
325
+ pageMessages
326
+ })}
327
+ >
328
+ {arNewChildrenAsReact}
329
+ </Assignment>
330
+ </LocalizationProvider>
331
+ ) : null}
332
+ </DialogContent>
333
+
334
+ {isMultiRecordData && (
335
+ <ListViewActionButtons
336
+ getPConnect={createdView.configObject.getPConnect}
337
+ context={createdView.latestItem.context}
338
+ closeActionsDialog={closeActionsDialog}
339
+ />
340
+ )}
341
+ </Dialog>
342
+ {bShowCancelAlert && <CancelAlert {...cancelAlertProps} dismiss={dismissCancelAlert} />}
343
+ </>
344
+ );
345
+ }
@@ -0,0 +1 @@
1
+ export { default } from './ModalViewContainer';
@@ -165,4 +165,5 @@
165
165
 
166
166
  .scrollable {
167
167
  overflow-y: scroll !important;
168
+ min-height: 200px !important;
168
169
  }
@@ -0,0 +1,52 @@
1
+ import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
2
+
3
+ interface ReferenceProps extends PConnProps {
4
+ // If any, enter additional props that only exist on this component
5
+ visibility?: boolean;
6
+ context?: string;
7
+ readOnly?: boolean;
8
+ displayMode?: string;
9
+ }
10
+
11
+ export default function Reference(props: ReferenceProps) {
12
+ const { visibility = true, context = '', getPConnect, readOnly = false, displayMode = '' } = props;
13
+
14
+ const pConnect = getPConnect();
15
+ // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
16
+ const referenceConfig = { ...pConnect.getComponentConfig() } || {};
17
+
18
+ delete referenceConfig?.name;
19
+ delete referenceConfig?.type;
20
+ delete referenceConfig?.visibility;
21
+
22
+ const viewMetadata: any = pConnect.getReferencedView();
23
+
24
+ if (!viewMetadata) {
25
+ // console.log("View not found ", pConnect.getComponentConfig());
26
+ return null;
27
+ }
28
+
29
+ const viewObject = {
30
+ ...viewMetadata,
31
+ config: {
32
+ ...viewMetadata.config,
33
+ ...referenceConfig
34
+ }
35
+ };
36
+
37
+ // @ts-ignore - Argument of type 'null' is not assignable to parameter of type 'string'.
38
+ const viewComponent: any = pConnect.createComponent(viewObject, null, null, {
39
+ pageReference: context && context.startsWith('@CLASS') ? '' : context
40
+ });
41
+
42
+ viewComponent.props.getPConnect().setInheritedConfig({
43
+ ...referenceConfig,
44
+ readOnly,
45
+ displayMode
46
+ });
47
+
48
+ if (visibility !== false) {
49
+ return <>{viewComponent}</>;
50
+ }
51
+ return null;
52
+ }
@@ -0,0 +1 @@
1
+ export { default } from './Reference';
@@ -0,0 +1,17 @@
1
+ import { PropsWithChildren } from 'react';
2
+
3
+ // Region does NOT have getPConnect. So, no need to extend from PConnProps
4
+ interface RegionProps {
5
+ // If any, enter additional props that only exist on this component
6
+ }
7
+
8
+ export default function Region(props: PropsWithChildren<RegionProps>) {
9
+ const { children } = props;
10
+
11
+ return (
12
+ <>
13
+ {/* <div>Region</div> */}
14
+ {children}
15
+ </>
16
+ );
17
+ }
@@ -0,0 +1 @@
1
+ export { default } from './Region';
@@ -0,0 +1,240 @@
1
+ import { Children, createElement, PropsWithChildren, useContext, useEffect, useMemo, useRef, useState } from 'react';
2
+ import { Box, CircularProgress } from '@mui/material';
3
+
4
+ import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
5
+ import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
6
+ import { LazyMap as LazyComponentMap } from '@pega/react-sdk-components/lib/components_map';
7
+ import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
8
+ import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
9
+
10
+ interface RootContainerProps extends PConnProps {
11
+ // If any, enter additional props that only exist on this component
12
+ renderingMode?: string;
13
+ routingInfo: { type: string; accessedOrder: any[]; items: any };
14
+ skeleton: any;
15
+ httpMessages: any[];
16
+ }
17
+
18
+ //
19
+ // WARNING: It is not expected that this file should be modified. It is part of infrastructure code that works with
20
+ // Redux and creation/update of Redux containers and PConnect. Modifying this code could have undesireable results and
21
+ // is totally at your own risk.
22
+ //
23
+
24
+ const renderingModes = ['portal', 'view'];
25
+
26
+ function usePrevious(value) {
27
+ const ref = useRef(null);
28
+ useEffect(() => {
29
+ ref.current = value;
30
+ });
31
+ return ref.current;
32
+ }
33
+
34
+ function getItemView(routingInfo, renderingMode) {
35
+ const viewConfigs: any = [];
36
+ if (routingInfo && renderingModes.includes(renderingMode)) {
37
+ const { accessedOrder, items }: { accessedOrder: any; items: any } = routingInfo;
38
+ if (accessedOrder && items) {
39
+ const key = accessedOrder[accessedOrder.length - 1];
40
+ if (items[key] && items[key].view && !isEmptyObject(items[key].view)) {
41
+ viewConfigs.push(items[key]);
42
+ }
43
+ }
44
+ }
45
+ return viewConfigs;
46
+ }
47
+
48
+ export default function RootContainer(props: PropsWithChildren<RootContainerProps>) {
49
+ const { getPConnect, renderingMode = '', children, skeleton, httpMessages = [], routingInfo } = props;
50
+
51
+ const { displayOnlyFA } = useContext<any>(StoreContext);
52
+
53
+ const pConn = getPConnect();
54
+
55
+ const options = { context: 'app' };
56
+ const rootView = useRef(null);
57
+
58
+ const [componentName, setComponentName] = useState('');
59
+
60
+ useEffect(() => {
61
+ // debugging/investigation help
62
+ // console.log(`componentName change: ${componentName} triggering a re-render`);
63
+ }, [componentName]);
64
+
65
+ // debugging/investigation help
66
+ // console.log(`RootContainer props.routingInfo: ${JSON.stringify(routingInfo)}`);
67
+
68
+ let hasBanner = false;
69
+ let banners: any = null;
70
+ const localizedVal = PCore.getLocaleUtils().getLocaleValue;
71
+ const localeCategory = 'Messages';
72
+
73
+ const messages = httpMessages ? httpMessages.map(msg => localizedVal(msg.message, localeCategory)) : httpMessages;
74
+
75
+ hasBanner = messages && messages.length > 0;
76
+ banners = hasBanner && <div>{localizedVal(`RootContainer: trying to emit Banner with ${messages}`, localeCategory)}</div>;
77
+
78
+ const MemoizedModalViewContainer = useMemo(() => {
79
+ return createElement(
80
+ createPConnectComponent(),
81
+ PCore.createPConnect({
82
+ meta: {
83
+ type: 'ModalViewContainer',
84
+ config: {
85
+ name: 'modal'
86
+ }
87
+ },
88
+ options
89
+ })
90
+ );
91
+ }, []);
92
+
93
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
94
+ const MemoizedPreviewViewContainer = useMemo(() => {
95
+ return createElement(
96
+ createPConnectComponent(),
97
+ PCore.createPConnect({
98
+ meta: {
99
+ type: 'PreviewViewContainer',
100
+ config: {
101
+ name: 'preview'
102
+ }
103
+ },
104
+ options
105
+ })
106
+ );
107
+ }, []);
108
+
109
+ //
110
+ function getNoPortalContent() {
111
+ let noPortalContent: any;
112
+
113
+ switch (componentName) {
114
+ case 'View':
115
+ noPortalContent = <div>{localizedVal('getNoPortalContent: RootContainer wants to render View in noPortal mode', localeCategory)}</div>;
116
+ break;
117
+
118
+ case 'ViewContainer': {
119
+ const configProps = pConn.getConfigProps();
120
+ const viewContConfig = {
121
+ meta: {
122
+ type: 'ViewContainer',
123
+ config: configProps
124
+ },
125
+ options
126
+ };
127
+ const theViewCont: any = PCore.createPConnect(viewContConfig);
128
+ // Add in displayOnlyFA if prop is on RootContainer
129
+ if (displayOnlyFA) {
130
+ theViewCont.displayOnlyFA = true;
131
+ }
132
+
133
+ const theViewContainerAsReact = createElement(createPConnectComponent(), theViewCont);
134
+
135
+ noPortalContent = theViewContainerAsReact;
136
+ break;
137
+ }
138
+
139
+ default:
140
+ noPortalContent = (
141
+ <div>{localizedVal('getNoPortalContent: RootContainer wants to render NO componentName in noPortal mode', localeCategory)}</div>
142
+ );
143
+ break;
144
+ }
145
+
146
+ return noPortalContent;
147
+ }
148
+
149
+ let rootViewConfig: any = null;
150
+
151
+ useEffect(() => {
152
+ const { containers } = PCore.getStore().getState();
153
+ const items = Object.keys(containers).filter(item => item.includes('root'));
154
+ (PCore.getContainerUtils().getContainerAPI() as any).addContainerItems(items);
155
+ }, [routingInfo]);
156
+
157
+ const items: any = getItemView(routingInfo, renderingMode);
158
+
159
+ if (items.length > 0) {
160
+ rootViewConfig = {
161
+ meta: items[0].view,
162
+ options: {
163
+ context: items[0].context
164
+ }
165
+ };
166
+ }
167
+ const prevRootConfig = usePrevious(rootViewConfig);
168
+
169
+ if (renderingModes.includes(renderingMode) && messages && routingInfo && routingInfo?.accessedOrder.length === 0) {
170
+ return <div id='root-container'>{banners}</div>;
171
+ }
172
+
173
+ if (items.length > 0) {
174
+ const itemView = items[0].view;
175
+ const currentRootConfig = {
176
+ meta: itemView,
177
+ options: {
178
+ context: items[0].context
179
+ }
180
+ };
181
+
182
+ if (!PCore.isDeepEqual(currentRootConfig, prevRootConfig)) {
183
+ rootView.current = createElement(createPConnectComponent(), PCore.createPConnect(currentRootConfig)) as any;
184
+ }
185
+
186
+ // debugging/investigation help
187
+ // console.log(`rootView.props.getPConnect().getComponentName(): ${rootView.props.getPConnect().getComponentName()}`);
188
+
189
+ return (
190
+ <div id='ModalManager'>
191
+ {rootView.current}
192
+ {MemoizedModalViewContainer}
193
+ <div id='MemoizedPreviewViewContainer' />
194
+ <div id='ReAuthMessageModal' />
195
+ </div>
196
+ );
197
+ }
198
+ if (renderingMode === 'noPortal') {
199
+ // eslint-disable-next-line no-console
200
+ console.log(`${localizedVal('RootContainer rendering in noPortal mode', localeCategory)}`);
201
+
202
+ const theChildren = pConn.getChildren() as any[];
203
+ if (theChildren && theChildren.length === 1) {
204
+ const localPConn = theChildren[0].getPConnect();
205
+ const localCompName = localPConn.getComponentName();
206
+ if (componentName !== localCompName) {
207
+ setComponentName(localCompName);
208
+ }
209
+ }
210
+
211
+ return getNoPortalContent();
212
+ }
213
+ if (children && Children.count(children) > 0) {
214
+ return (
215
+ <>
216
+ <div>{localizedVal('RootContainer: Has children. Trying to show ModalManager with children, etc.', localeCategory)}</div>
217
+ {children}
218
+ {MemoizedModalViewContainer}
219
+ </>
220
+ );
221
+ }
222
+ if (skeleton) {
223
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
224
+ const LoadingComponent = LazyComponentMap[skeleton];
225
+
226
+ return (
227
+ <div id='root-container'>
228
+ {/* <div>RootContainer: Trying to show skeleton</div> */}
229
+ <Box textAlign='center'>
230
+ <CircularProgress />
231
+ </Box>
232
+ </div>
233
+ );
234
+ }
235
+ return (
236
+ <div id='root-container'>
237
+ <div>{localizedVal('RootContainer: Should be ModalManager, etc.', localeCategory)}</div>
238
+ </div>
239
+ );
240
+ }
@@ -0,0 +1 @@
1
+ export { default } from './RootContainer';