@pega/dx-component-builder-sdk 0.242.4 → 0.242.6

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 (49) hide show
  1. package/package.json +1 -1
  2. package/src/tasks/create/templates/Constellation/field/Decimal/index.tsx.mustache +6 -3
  3. package/src/tasks/create/templates/Constellation/field/Decimal-Currency/index.tsx.mustache +3 -1
  4. package/src/tasks/create/templates/Constellation/field/Decimal-Percentage/index.tsx.mustache +5 -2
  5. package/src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/index.tsx.mustache +52 -10
  6. package/src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/utils.ts.mustache +1 -1
  7. package/src/tasks/create/templates/Constellation/template/DETAILS/Avatar.tsx.mustache +7 -5
  8. package/src/tasks/create/templates/Constellation/template/DETAILS-region/Avatar.tsx.mustache +7 -5
  9. package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/Avatar.tsx.mustache +7 -5
  10. package/src/tasks/create/templates/SDK-React/field/Decimal/index.tsx.mustache +1 -1
  11. package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/index.tsx.mustache +1 -1
  12. package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/index.tsx.mustache +1 -1
  13. package/src/tasks/create/templates/SDK-React/template/FORM-region/demo.stories.tsx.mustache +27 -12
  14. package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx +2 -2
  15. package/tests/assets/sdk-r/components/create/override-sdk/field/Phone/Phone.tsx +5 -5
  16. package/tests/assets/sdk-r/components/create/override-sdk/infra/NavBar/NavBar.css +1 -0
  17. package/tests/assets/sdk-r/components/create/override-sdk/template/ListView/ListView.tsx +29 -28
  18. package/tests/assets/sdk-r/components/create/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx +10 -5
  19. package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyCurrency/index.tsx +3 -1
  20. package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyDecimal/index.tsx +6 -3
  21. package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyPercentage/index.tsx +5 -2
  22. package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/index.tsx +52 -10
  23. package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/utils.ts +1 -1
  24. package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyDetails/Avatar.tsx +7 -5
  25. package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnDetails/Avatar.tsx +7 -5
  26. package/tests/assets/sdk-r/components/createAll/custom-constellation/widget/Pega_DXIL_MyPageCaseWidget/Avatar.tsx +7 -5
  27. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyCurrency/index.tsx +1 -1
  28. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDecimal/index.tsx +1 -1
  29. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPercentage/index.tsx +1 -1
  30. package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPhone/index.tsx +5 -5
  31. package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/demo.stories.tsx +28 -13
  32. package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx +2 -2
  33. package/tests/assets/sdk-r/components/createAll/override-sdk/field/Phone/Phone.tsx +5 -5
  34. package/tests/assets/sdk-r/components/createAll/override-sdk/infra/NavBar/NavBar.css +1 -0
  35. package/tests/assets/sdk-r/components/createAll/override-sdk/template/ListView/ListView.tsx +29 -28
  36. package/tests/assets/sdk-r/components/createAll/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx +10 -5
  37. package/tests/functional/sdk-r/localCreateAllListDeleteAllCustom.test.js +1 -1
  38. package/tests/functional/sdk-r/localCreateAllListDeleteAllOverride.test.js +1 -1
  39. package/tests/functional/sdk-r/localCreateBuildAllDeleteAllCustom.test.js +2 -2
  40. package/tests/functional/sdk-r/localCreateBuildDeleteCustom.test.js +1 -1
  41. package/tests/functional/sdk-r/localCreateBuildDeleteOverride.test.js +2 -2
  42. package/tests/functional/sdk-r/localCreateListDeleteCustom.test.js +1 -1
  43. package/tests/functional/sdk-r/localCreateListDeleteOverride.test.js +1 -1
  44. package/tests/functional/sdk-r/localCreateMapAllClearMap.test.js +1 -1
  45. package/tests/functional/sdk-r/localCreatePublishAllDeleteAllCustom.test.js +2 -2
  46. package/tests/functional/sdk-r/localCreatePublishAllDeleteAllOverride.test.js +1 -1
  47. package/tests/functional/sdk-r/localCreatePublishDeleteCustom.test.js +1 -1
  48. package/tests/functional/sdk-r/localCreatePublishDeleteOverride.test.js +2 -2
  49. package/tests/functional/sdk-r/localCreateRenameDeleteCustom.test.js +1 -1
@@ -1034,34 +1034,35 @@ export default function ListView(props: ListViewProps) {
1034
1034
  </TableRow>
1035
1035
  </TableHead>
1036
1036
  <TableBody>
1037
- {stableSort(arRows, getComparator(order, orderBy))
1038
- .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
1039
- .map(row => {
1040
- return (
1041
- <TableRow key={row.pxRefObjectInsName || row.pyID}>
1042
- {arColumns.map(column => {
1043
- const value = row[column.id];
1044
- return (
1045
- <TableCell key={column.id} align={column.align} className={classes.cell}>
1046
- {_showButton(column.id, row) || column.displayAsLink ? (
1047
- <Link
1048
- component='button'
1049
- onClick={() => {
1050
- _listViewClick(row, column);
1051
- }}
1052
- underline='hover'
1053
- >
1054
- {column.format && typeof value === 'number' ? column.format(value) : value}
1055
- </Link>
1056
- ) : (
1057
- <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
1058
- )}
1059
- </TableCell>
1060
- );
1061
- })}
1062
- </TableRow>
1063
- );
1064
- })}
1037
+ {arRows &&
1038
+ stableSort(arRows, getComparator(order, orderBy))
1039
+ .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
1040
+ .map(row => {
1041
+ return (
1042
+ <TableRow key={row.pxRefObjectInsName || row.pyID}>
1043
+ {arColumns.map(column => {
1044
+ const value = row[column.id];
1045
+ return (
1046
+ <TableCell key={column.id} align={column.align} className={classes.cell}>
1047
+ {_showButton(column.id, row) || column.displayAsLink ? (
1048
+ <Link
1049
+ component='button'
1050
+ onClick={() => {
1051
+ _listViewClick(row, column);
1052
+ }}
1053
+ underline='hover'
1054
+ >
1055
+ {column.format && typeof value === 'number' ? column.format(value) : value}
1056
+ </Link>
1057
+ ) : (
1058
+ <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
1059
+ )}
1060
+ </TableCell>
1061
+ );
1062
+ })}
1063
+ </TableRow>
1064
+ );
1065
+ })}
1065
1066
  </TableBody>
1066
1067
  </Table>
1067
1068
  </TableContainer>
@@ -258,11 +258,16 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
258
258
  function generateRowsData() {
259
259
  // if referenceList is empty and dataPageName property value exists then make a datapage fetch call and get the list of data.
260
260
  if (!referenceList.length && dataPageName) {
261
- getDataPage(dataPageName, parameters, context).then(listData => {
262
- const data = formatRowsData(listData);
263
- myRows = data;
264
- setRowData(data);
265
- });
261
+ getDataPage(dataPageName, parameters, context)
262
+ .then(listData => {
263
+ const data = formatRowsData(listData);
264
+ myRows = data;
265
+ setRowData(data);
266
+ })
267
+ .catch(e => {
268
+ // eslint-disable-next-line no-console
269
+ console.log(e);
270
+ });
266
271
  } else {
267
272
  // The referenceList prop has the JSON data for each row to be displayed
268
273
  // in the table. So, iterate over referenceList to create the dataRows that
@@ -1,3 +1,4 @@
1
+
1
2
  import { useState, useEffect } from 'react';
2
3
  import {
3
4
  CurrencyInput as CosmosCurrency,
@@ -261,8 +262,9 @@ function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
261
262
  });
262
263
  }}
263
264
  onBlur={(enteredValue) => {
264
- const parsedValue = enteredValue !== '' ? Number(enteredValue).toString() : enteredValue;
265
+ const parsedValue = enteredValue !== '' ? Number(enteredValue) : enteredValue;
265
266
  if (!readOnly && (!value || value !== parsedValue)) {
267
+ // @ts-ignore
266
268
  handleEvent(actions, 'changeNblur', propName, parsedValue);
267
269
  if (hasSuggestions) {
268
270
  pConn.ignoreSuggestion('');
@@ -88,8 +88,9 @@ function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
88
88
  }, [validatemessage, hasSuggestions, status]);
89
89
 
90
90
  const { decimalPrecision, currencyDecimalPrecision } = props;
91
- let numberOfDecimals: number | undefined = parseInt(decimalPrecision, 10);
91
+ let numberOfDecimals = parseInt(decimalPrecision, 10);
92
92
  if (Number.isNaN(numberOfDecimals)) {
93
+ // @ts-ignore
93
94
  numberOfDecimals = decimalPrecision === '' ? undefined : 2;
94
95
  }
95
96
  let noOfFractionDigits = currencyDecimalPrecision === 'auto' ? undefined : parseInt(currencyDecimalPrecision, 10);
@@ -222,13 +223,15 @@ function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
222
223
  }
223
224
  setDecimalValue(enteredValue);
224
225
  if (value !== (enteredValue !== '' ? Number(enteredValue) : '')) {
225
- handleEvent(actions, 'change', propName, enteredValue !== '' ? Number(enteredValue).toString() : '');
226
+ // @ts-ignore
227
+ handleEvent(actions, 'change', propName, enteredValue !== '' ? Number(enteredValue) : '');
226
228
  hasValueChange.current = true;
227
229
  }
228
230
  }}
229
231
  onBlur={() => {
230
232
  if (!value || hasValueChange.current) {
231
- handleEvent(actions, 'blur', propName, decimalValue !== '' ? Number(decimalValue).toString() : '');
233
+ // @ts-ignore
234
+ handleEvent(actions, 'blur', propName, decimalValue !== '' ? Number(decimalValue) : '');
232
235
  if (hasSuggestions) {
233
236
  pConn.ignoreSuggestion("");
234
237
  }
@@ -94,8 +94,9 @@ function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
94
94
  }
95
95
  }, [validatemessage, hasSuggestions, status]);
96
96
 
97
- let numberOfDecimals : number | undefined = parseInt(decimalPrecision, 10);
97
+ let numberOfDecimals = parseInt(decimalPrecision, 10);
98
98
  if (Number.isNaN(numberOfDecimals)) {
99
+ // @ts-ignore
99
100
  numberOfDecimals = decimalPrecision === '' ? undefined : 2;
100
101
  }
101
102
 
@@ -240,13 +241,15 @@ function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
240
241
  }
241
242
  setPercentageValue(enteredValue);
242
243
  if (value !== enteredValue) {
244
+ // @ts-ignore
243
245
  handleEvent(actions, 'change', propName, enteredValue);
244
246
  hasValueChange.current = true;
245
247
  }
246
248
  }}
247
249
  onBlur={() => {
248
- const parsedValue = percentageValue !== '' ? Number(percentageValue).toString() : '';
250
+ const parsedValue = percentageValue !== '' ? Number(percentageValue) : '';
249
251
  if (!value || hasValueChange.current) {
252
+ // @ts-ignore
250
253
  handleEvent(actions, 'blur', propName, parsedValue);
251
254
  if (hasSuggestions) {
252
255
  pConn.ignoreSuggestion("");
@@ -497,14 +497,14 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
497
497
  const pConn = getPConnect();
498
498
  const contextName = getPConnect().getContextName();
499
499
  const actions = pConn.getActionsApi();
500
- const [dataApiObj, setDataApiObj] = useState(() => ({} as any));
500
+ const [dataApiObj, setDataApiObj] = useState(() => ({}));
501
501
  const [filterValue, setFilterValue] = useState('');
502
502
  const [loading, setLoading] = useState(listType !== 'associated');
503
503
  // const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);
504
504
  const [selected, setSelected] = useState();
505
505
  const hasMoreResults = useRef(true);
506
506
  const inputValueRef = useRef('');
507
- const displayFieldMeta: any = useRef(null);
507
+ const displayFieldMeta = useRef(null);
508
508
  const [actualValue, setActualValue] = useState();
509
509
  const [newRecordCreated, setNewRecordCreated] = useState();
510
510
 
@@ -645,13 +645,15 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
645
645
  }
646
646
  PCore.getDataApi()
647
647
  .init(dataConfig, contextName)
648
- .then((dataObj: any) => {
648
+ .then(dataObj => {
649
+ // @ts-ignore
649
650
  setDataApiObj(dataObj);
650
651
  // To avoid calling doSearch if someone types/pastes value before the API call is made
651
652
  if (!filterValue)
652
653
  doSearch(
653
654
  '',
654
655
  getDisplayFieldsMetaData(dataConfig.columns),
656
+ // @ts-ignore
655
657
  dataObj,
656
658
  setItems as any,
657
659
  setLoading,
@@ -677,10 +679,12 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
677
679
  if (!dataRefMount && !displayMode && listType === 'datapage') {
678
680
  PCore.getDataApi()
679
681
  .init(dataConfig, contextName)
680
- .then((dataObj: any) => {
682
+ .then(dataObj => {
683
+ // @ts-ignore
681
684
  setDataApiObj(dataObj);
682
685
  // To avoid calling doSearch if someone types/pastes value before the API call is made
683
686
  if (!filterValue) {
687
+ // @ts-ignore
684
688
  if (displayFieldMeta?.current?.key === displayFieldMeta?.current?.primary) {
685
689
  const displayItem = {
686
690
  id: value,
@@ -692,6 +696,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
692
696
  doSearch(
693
697
  '',
694
698
  getDisplayFieldsMetaData(dataConfig.columns),
699
+ // @ts-ignore
695
700
  dataObj,
696
701
  setItems as any,
697
702
  setLoading,
@@ -711,6 +716,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
711
716
  doSearch(
712
717
  '',
713
718
  getDisplayFieldsMetaData(dataConfig.columns),
719
+ // @ts-ignore
714
720
  dataObj,
715
721
  setItems as any,
716
722
  setLoading,
@@ -769,16 +775,22 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
769
775
  ) {
770
776
  PCore.getDataApi()
771
777
  .init(dataConfig, contextName)
772
- .then((dataObj: any) => {
778
+ .then(dataObj => {
779
+ // @ts-ignore
773
780
  setDataApiObj(dataObj);
781
+ // @ts-ignore
774
782
  buildColumnForDisplayValue(dataObj);
775
783
  // SET matchPosition to EQUALS to return exact matching record
784
+ // @ts-ignore
776
785
  dataObj.matchPosition = 'equals';
786
+ // @ts-ignore
777
787
  dataObj
778
788
  .fetchData(value)
779
789
  .then((displayResponse: { data: Array<never> }) => {
780
790
  let columnsWithSetProperty: string | Array<any> = [];
791
+ // @ts-ignore
781
792
  if (dataApiObj.columns) {
793
+ // @ts-ignore
782
794
  columnsWithSetProperty = dataApiObj.columns
783
795
  .filter(
784
796
  (col: { setProperty: string }) =>
@@ -793,9 +805,12 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
793
805
  const searchedItem = displayResponseData.map((entry: { [x: string]: any }) => {
794
806
  const secondaryArr: Array<any> = [];
795
807
  const secondaryFieldValues: Array<any> = [];
808
+ // @ts-ignore
796
809
  displayFieldMeta.current.secondary.forEach((col: string) => {
810
+ // @ts-ignore
797
811
  if (!displayFieldMeta.hidden.includes(col)) secondaryArr.push(entry[col]);
798
812
  if (columnsWithSetProperty.includes(col)) {
813
+ // @ts-ignore
799
814
  if (dataApiObj.isQueryable) {
800
815
  secondaryFieldValues.push(entry[col]);
801
816
  } else {
@@ -804,7 +819,9 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
804
819
  }
805
820
  });
806
821
  return {
822
+ // @ts-ignore
807
823
  id: entry[displayFieldMeta.current.key],
824
+ // @ts-ignore
808
825
  primary: entry[displayFieldMeta.current.primary],
809
826
  secondary: secondaryArr,
810
827
  secondaryFieldValues
@@ -815,11 +832,13 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
815
832
  setSelected(searchedItem[0]);
816
833
  setActualValue(value);
817
834
  // RESET matchPosition
835
+ // @ts-ignore
818
836
  dataObj.matchPosition = dataConfig.matchPosition;
819
837
  })
820
838
  .catch(() => {
821
839
  setActualValue(value);
822
840
  // RESET matchPosition
841
+ // @ts-ignore
823
842
  dataObj.matchPosition = dataConfig.matchPosition;
824
843
  });
825
844
  });
@@ -837,17 +856,21 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
837
856
  };
838
857
  })
839
858
  );
840
- setSelected(undefined);
859
+ // @ts-ignore
860
+ setSelected(null);
841
861
  inputValueRef.current = '';
842
862
  };
843
863
 
844
864
  const onChangeHandler = (ev: { target: { value: any } }) => {
845
865
  if (hasSuggestions) {
846
- pConn.ignoreSuggestion('');
866
+ // @ts-ignore
867
+ pConn.ignoreSuggestion();
847
868
  setStatus(undefined);
848
869
  }
849
870
 
871
+ // @ts-ignore
850
872
  dataApiObj.columns = dataConfig.columns;
873
+ // @ts-ignore
851
874
  dataApiObj.matchPosition = dataConfig.matchPosition;
852
875
  const searchText = ev.target.value;
853
876
  inputValueRef.current = searchText;
@@ -856,14 +879,15 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
856
879
  clearSelections();
857
880
  }
858
881
  setFilterValue(searchText);
882
+ // @ts-ignore
859
883
  if (listType === 'datapage' && dataApiObj.isQueryable) {
860
884
  hasMoreResults.current = true;
861
885
  if (searchText.length < 5) {
862
886
  searchHandlerThrottled(
863
887
  searchText,
888
+ // @ts-ignore
864
889
  displayFieldMeta.current,
865
890
  dataApiObj,
866
- // @ts-ignore
867
891
  setItems,
868
892
  setLoading,
869
893
  hasMoreResults
@@ -871,9 +895,9 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
871
895
  } else {
872
896
  searchHandlerDebounced(
873
897
  searchText,
898
+ // @ts-ignore
874
899
  displayFieldMeta.current,
875
900
  dataApiObj,
876
- // @ts-ignore
877
901
  setItems,
878
902
  setLoading,
879
903
  hasMoreResults
@@ -881,12 +905,14 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
881
905
  }
882
906
  } else if (
883
907
  listType === 'associated' ||
908
+ // @ts-ignore
884
909
  (listType === 'datapage' && dataApiObj?.isQueryable === false)
885
910
  ) {
886
911
  paginateHelperApis.resetIndexes();
887
912
  const progressivePaginatedRecords = paginateHelperApis.fetchData(
888
913
  inputValueRef.current,
889
914
  false,
915
+ // @ts-ignore
890
916
  dataApiObj.columns
891
917
  );
892
918
  setItems(progressivePaginatedRecords);
@@ -913,19 +939,21 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
913
939
 
914
940
  setFilterValue('');
915
941
  if (!selected && inputValueRef.current !== '') {
942
+ // @ts-ignore
916
943
  if (listType === 'datapage' && dataApiObj.isQueryable) {
917
944
  hasMoreResults.current = true;
918
945
  searchHandlerThrottled(
919
946
  '',
947
+ // @ts-ignore
920
948
  displayFieldMeta.current,
921
949
  dataApiObj,
922
- // @ts-ignore
923
950
  setItems,
924
951
  setLoading,
925
952
  hasMoreResults
926
953
  );
927
954
  } else if (
928
955
  listType === 'associated' ||
956
+ // @ts-ignore
929
957
  (listType === 'datapage' && dataApiObj?.isQueryable === false)
930
958
  ) {
931
959
  paginateHelperApis.resetIndexes();
@@ -948,6 +976,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
948
976
  // @ts-ignore
949
977
  setSelected(menuHelpers.getSelected(updatedItems)[0]);
950
978
  // const { id: itemId } = menuHelpers.getSelected(updatedItems)[0];
979
+ // @ts-ignore
951
980
  const assocProp = pConn.getStateProps().value;
952
981
  const propValue = setValueToAssocProp(
953
982
  assocProp,
@@ -980,6 +1009,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
980
1009
  const loadMore = () => {
981
1010
  if (
982
1011
  (listType === 'associated' ||
1012
+ // @ts-ignore
983
1013
  (listType === 'datapage' && dataApiObj?.isQueryable === false)) &&
984
1014
  paginateHelperApis.hasMoreResults(inputValueRef.current)
985
1015
  ) {
@@ -989,18 +1019,23 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
989
1019
  progressivePaginatedRecords = removeDuplicates(previousItems, progressivePaginatedRecords);
990
1020
  return [...previousItems, ...progressivePaginatedRecords];
991
1021
  });
1022
+ // @ts-ignore
992
1023
  } else if (listType === 'datapage' && dataApiObj.isQueryable && hasMoreResults.current) {
993
1024
  setLoading(true);
994
1025
  dataApiObj
1026
+ // @ts-ignore
995
1027
  .fetchPaginatedData(inputValueRef.current)
996
1028
  .then((response: { pageSize: number; data: Array<never> }) => {
997
1029
  setLoading(false);
1030
+ // @ts-ignore
998
1031
  if (response.pageSize === 0 || response.pageSize < dataApiObj.pageSize) {
999
1032
  hasMoreResults.current = false;
1000
1033
  }
1001
1034
  const listObjData = response.data || [];
1002
1035
  let columnsWithSetProperty: string | Array<any> = [];
1036
+ // @ts-ignore
1003
1037
  if (dataApiObj.columns) {
1038
+ // @ts-ignore
1004
1039
  columnsWithSetProperty = dataApiObj.columns
1005
1040
  .filter(
1006
1041
  (col: { setProperty: string }) =>
@@ -1014,9 +1049,12 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
1014
1049
  const searchedItems = listObjData.map((entry: { [x: string]: any }) => {
1015
1050
  const secondaryArr: Array<any> = [];
1016
1051
  const secondaryFieldValues: Array<any> = [];
1052
+ // @ts-ignore
1017
1053
  displayFieldMeta.current.secondary.forEach((col: string) => {
1054
+ // @ts-ignore
1018
1055
  if (!displayFieldMeta.current.hidden.includes(col)) secondaryArr.push(entry[col]);
1019
1056
  if (columnsWithSetProperty.includes(col)) {
1057
+ // @ts-ignore
1020
1058
  if (dataApiObj.isQueryable) {
1021
1059
  secondaryFieldValues.push(entry[col]);
1022
1060
  } else {
@@ -1025,7 +1063,9 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
1025
1063
  }
1026
1064
  });
1027
1065
  return {
1066
+ // @ts-ignore
1028
1067
  id: entry[displayFieldMeta.current.key],
1068
+ // @ts-ignore
1029
1069
  primary: entry[displayFieldMeta.current.primary],
1030
1070
  secondary: secondaryArr,
1031
1071
  secondaryFieldValues
@@ -1036,6 +1076,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
1036
1076
  })
1037
1077
  .catch(() => {
1038
1078
  setLoading(false);
1079
+ // @ts-ignore
1039
1080
  dataApiObj.pageSize -= 1;
1040
1081
  });
1041
1082
  }
@@ -1119,6 +1160,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
1119
1160
  selected: item.items ? undefined : !!item.selected || item.id === selected?.id
1120
1161
  })),
1121
1162
  onItemClick: selectItem,
1163
+ // @ts-ignore
1122
1164
  emptyText: pConn.getLocalizedValue('No items'),
1123
1165
  loading,
1124
1166
  loadMore,
@@ -187,7 +187,7 @@ export const updatePropertiesForNewRecord = (
187
187
  dataObj
188
188
  .fetchData(newCaseId)
189
189
  // @ts-ignore
190
- .then((displayResponse: any) => {
190
+ .then(displayResponse => {
191
191
  let columnsWithSetProperty = [];
192
192
  if (dataApiObj.columns) {
193
193
  columnsWithSetProperty = dataApiObj.columns
@@ -22,8 +22,8 @@ function Avatar(props: PegaDxilMyDetailsAvatarProps) {
22
22
  // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
23
23
  // This is non CaseView case (Dashboard, MyWork etc)
24
24
  if (!metaObj) {
25
- userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
26
- userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
25
+ userName = PCore.getEnvironmentInfo().getOperatorName();
26
+ userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
27
27
  } else {
28
28
  userName = metaObj.name;
29
29
  userIdentifier = metaObj.ID;
@@ -46,20 +46,22 @@ function Avatar(props: PegaDxilMyDetailsAvatarProps) {
46
46
  const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
47
47
  const [userState, setUserState]: any = useState(currentState === 'online' ? 'active' : 'inactive');
48
48
 
49
- const handleUserStateChange = ({ state }: any) => {
49
+ // @ts-ignore
50
+ const handleUserStateChange = ({ state }) => {
50
51
  setUserState(state === 'online' ? 'active' : 'inactive');
51
52
  };
52
53
 
53
54
  useEffect(() => {
54
55
  const subId = PCore.getMessagingServiceManager()
55
56
  .getUserPresence()
56
- .subscribe(userIdentifier, handleUserStateChange, '');
57
+ // @ts-ignore
58
+ .subscribe(userIdentifier, handleUserStateChange);
57
59
 
58
60
  return function cleanup() {
59
61
  PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
60
62
  };
61
63
  }, [userIdentifier, handleUserStateChange]);
62
-
64
+ // @ts-ignore
63
65
  return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
64
66
  }
65
67
 
@@ -22,8 +22,8 @@ function Avatar(props: PegaDxilMyTwoColumnDetailsAvatarProps) {
22
22
  // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
23
23
  // This is non CaseView case (Dashboard, MyWork etc)
24
24
  if (!metaObj) {
25
- userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
26
- userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
25
+ userName = PCore.getEnvironmentInfo().getOperatorName();
26
+ userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
27
27
  } else {
28
28
  userName = metaObj.name;
29
29
  userIdentifier = metaObj.ID;
@@ -46,20 +46,22 @@ function Avatar(props: PegaDxilMyTwoColumnDetailsAvatarProps) {
46
46
  const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
47
47
  const [userState, setUserState]: any = useState(currentState === 'online' ? 'active' : 'inactive');
48
48
 
49
- const handleUserStateChange = ({ state }: any) => {
49
+ // @ts-ignore
50
+ const handleUserStateChange = ({ state }) => {
50
51
  setUserState(state === 'online' ? 'active' : 'inactive');
51
52
  };
52
53
 
53
54
  useEffect(() => {
54
55
  const subId = PCore.getMessagingServiceManager()
55
56
  .getUserPresence()
56
- .subscribe(userIdentifier, handleUserStateChange, '');
57
+ // @ts-ignore
58
+ .subscribe(userIdentifier, handleUserStateChange);
57
59
 
58
60
  return function cleanup() {
59
61
  PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
60
62
  };
61
63
  }, [userIdentifier, handleUserStateChange]);
62
-
64
+ // @ts-ignore
63
65
  return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
64
66
  }
65
67
 
@@ -22,8 +22,8 @@ function Avatar(props: PegaDxilMyPageCaseWidgetAvatarProps) {
22
22
  // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
23
23
  // This is non CaseView case (Dashboard, MyWork etc)
24
24
  if (!metaObj) {
25
- userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
26
- userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
25
+ userName = PCore.getEnvironmentInfo().getOperatorName();
26
+ userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
27
27
  } else {
28
28
  userName = metaObj.name;
29
29
  userIdentifier = metaObj.ID;
@@ -46,20 +46,22 @@ function Avatar(props: PegaDxilMyPageCaseWidgetAvatarProps) {
46
46
  const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
47
47
  const [userState, setUserState]: any = useState(currentState === 'online' ? 'active' : 'inactive');
48
48
 
49
- const handleUserStateChange = ({ state }: any) => {
49
+ // @ts-ignore
50
+ const handleUserStateChange = ({ state }) => {
50
51
  setUserState(state === 'online' ? 'active' : 'inactive');
51
52
  };
52
53
 
53
54
  useEffect(() => {
54
55
  const subId = PCore.getMessagingServiceManager()
55
56
  .getUserPresence()
56
- .subscribe(userIdentifier, handleUserStateChange, '');
57
+ // @ts-ignore
58
+ .subscribe(userIdentifier, handleUserStateChange);
57
59
 
58
60
  return function cleanup() {
59
61
  PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
60
62
  };
61
63
  }, [userIdentifier, handleUserStateChange]);
62
-
64
+ // @ts-ignore
63
65
  return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
64
66
  }
65
67
 
@@ -62,7 +62,7 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
62
62
  const theCurrSep = theSymbols.theDigitGroupSeparator;
63
63
 
64
64
  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
65
- const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
65
+ const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
66
66
 
67
67
  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
68
68
 
@@ -73,7 +73,7 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
73
73
  if (formatter === 'Currency') {
74
74
  formattedValue = format(value, formatter.toLowerCase(), theCurrencyOptions);
75
75
  } else {
76
- formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
76
+ formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
77
77
  }
78
78
 
79
79
  if (displayMode === 'DISPLAY_ONLY') {
@@ -54,7 +54,7 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
54
54
  const helperTextToDisplay = validatemessage || helperText;
55
55
 
56
56
  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
57
- const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
57
+ const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
58
58
 
59
59
  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
60
60
 
@@ -1,5 +1,5 @@
1
- import MuiPhoneNumber from 'material-ui-phone-number';
2
1
  import { useEffect, useState } from 'react';
2
+ import { MuiTelInput } from 'mui-tel-input';
3
3
 
4
4
  import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
5
5
  import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -63,12 +63,12 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
63
63
  return (
64
64
  <div>
65
65
  <StyledPegaDxilMyPhoneWrapper>
66
- <MuiPhoneNumber
66
+ <MuiTelInput
67
67
  fullWidth
68
68
  helperText={helperTextToDisplay}
69
69
  placeholder={placeholder ?? ''}
70
70
  size='small'
71
- defaultCountry='us'
71
+ defaultCountry='US'
72
72
  required={required}
73
73
  disabled={disabled}
74
74
  onChange={onChange}
@@ -99,13 +99,13 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
99
99
 
100
100
  return (
101
101
  <StyledPegaDxilMyPhoneWrapper>
102
- <MuiPhoneNumber
102
+ <MuiTelInput
103
103
  fullWidth
104
104
  variant='outlined'
105
105
  helperText={helperTextToDisplay}
106
106
  placeholder={placeholder ?? ''}
107
107
  size='small'
108
- defaultCountry='us'
108
+ defaultCountry='US'
109
109
  required={required}
110
110
  disabled={disabled}
111
111
  onChange={handleChange}