@pega/react-sdk-overrides 23.1.10 → 23.1.12

package/lib/template/NarrowWide/NarrowWideDetails/NarrowWideDetails.tsx

@@ -1,23 +1,21 @@
-import React, { createElement } from 'react';
-import Grid from '@material-ui/core/Grid';
-import { GridSize } from '@material-ui/core/Grid';
+import { createElement } from 'react';
+import Grid, { GridSize } from '@material-ui/core/Grid';
+
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-// import type { PConnProps } from '../../../../types/PConnProps';
-
-// Can't use PConnProps until getPConnect().getChildren() type is ok
-// interface NarrowWideDetailsProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   showLabel?: boolean,
-//   label: string,
-//   showHighlightedData?: boolean
-// }
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+interface NarrowWideDetailsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel?: boolean;
+  label: string;
+  showHighlightedData?: boolean;
+}
 
 const COLUMN_WIDTHS = [4, 8];
 
-export default function NarrowWideDetails(props /* : NarrowWideDetailsProps */) {
+export default function NarrowWideDetails(props: NarrowWideDetailsProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromMap('FieldGroup');
 
@@ -30,20 +28,18 @@ export default function NarrowWideDetails(props /* : NarrowWideDetailsProps */)
   // in a readonly (display) mode instead of a editable
   getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
   getPConnect().setInheritedProp('readOnly', true);
-  const children = getPConnect()
-    .getChildren()
-    .map((configObject, index) =>
-      createElement(createPConnectComponent(), {
-        ...configObject,
-        // eslint-disable-next-line react/no-array-index-key
-        key: index.toString()
-      })
-    );
+  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
+    createElement(createPConnectComponent(), {
+      ...configObject,
+      // eslint-disable-next-line react/no-array-index-key
+      key: index.toString()
+    })
+  );
 
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
   if (showHighlightedData) {
-    const { highlightedData = [] } = getPConnect().getRawMetadata().config;
+    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;
     highlightedDataArr = highlightedData.map(field => {
       field.config.displayMode = 'STACKED_LARGE_VAL';
 
@@ -53,8 +49,7 @@ export default function NarrowWideDetails(props /* : NarrowWideDetailsProps */)
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field,
-        '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 

package/lib/template/NarrowWide/NarrowWideDetails/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Details (Narrow-wide) template",
   "type": "Template",
   "subtype": "DETAILS",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/NarrowWide/NarrowWideForm/NarrowWideForm.css

@@ -9,7 +9,6 @@
   float: left;
   padding: 0rem 0.3125rem 0rem 0rem;
   height: 100%;
-
 }
 
 .psdk-narrow-wide-column .psdk-wide-column-column {
@@ -17,5 +16,4 @@
   float: left;
   padding: 0rem 0rem 0rem 0.3125rem;
   height: 100%;
-
 }

package/lib/template/NarrowWide/NarrowWideForm/NarrowWideForm.tsx

@@ -1,32 +1,22 @@
-import React from "react";
-
+import { PropsWithChildren, ReactElement } from 'react';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './NarrowWideForm.css';
 
-// NarrowWideForm does NOT have getPConnect. So, no need to extend from PConnProps
-
-interface NarrowWideFormProps {
+interface NarrowWideFormProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>
 }
 
-
-export default function NarrowWideForm(props: NarrowWideFormProps) {
-  const {children} = props;
+export default function NarrowWideForm(props: PropsWithChildren<NarrowWideFormProps>) {
+  const { children } = props;
 
   return (
-    <React.Fragment>
-    {children && children.length === 2 &&
-      <div className="psdk-narrow-wide-column">
-      <div className="psdk-narrow-column-column">
-        {children[0]}
-      </div>
-      <div className="psdk-wide-column-column">
-        {children[1]}
-      </div>
-    </div>
-    }
-    </React.Fragment>
-
-  )
-
+    <>
+      {children && (children as ReactElement[]).length === 2 && (
+        <div className='psdk-narrow-wide-column'>
+          <div className='psdk-narrow-column-column'>{children[0]}</div>
+          <div className='psdk-wide-column-column'>{children[1]}</div>
+        </div>
+      )}
+    </>
+  );
 }

package/lib/template/NarrowWide/NarrowWideForm/config-ext.json

@@ -4,6 +4,5 @@
   "description": "NarrowWide Template",
   "type": "Template",
   "subtype": "FORM",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/NarrowWide/NarrowWidePage/NarrowWidePage.tsx

@@ -1,38 +1,28 @@
-import React, { Children } from "react";
-// import { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
+import { PropsWithChildren, ReactElement } from 'react';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-
-// NarrowWidePage does NOT have getPConnect. So, no need to extend from PConnProps
-interface NarrowWidePageProps {
+interface NarrowWidePageProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>,
-  title: string,
-  templateCol: string,
-  icon: string
+  title: string;
+  templateCol: string;
+  icon: string;
 }
 
-
 /*
  * The wrapper handles knowing how to take in just children and mapping
  * to the Cosmos template.
  */
-export default function NarrowWidePage(props: NarrowWidePageProps) {
+export default function NarrowWidePage(props: PropsWithChildren<NarrowWidePageProps>) {
   // Get emitted components from map (so we can get any override that may exist)
   const NarrowWide = getComponentFromMap('NarrowWide');
 
   const { children, title, templateCol = '1fr 1fr', icon = '' } = props;
-  const childArray = Children.toArray(children);
+  const childrenToRender = children as ReactElement[];
 
   return (
     <div>
-    <NarrowWide
-        a={childArray[0]}
-        b={childArray[1]}
-        title={title}
-        cols={templateCol}
-        icon={icon?.replace("pi pi-", "")}
-      />
+      <NarrowWide a={childrenToRender[0]} b={childrenToRender[1]} title={title} cols={templateCol} icon={icon?.replace('pi pi-', '')} />
     </div>
   );
 }

package/lib/template/NarrowWide/NarrowWidePage/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Narrow-wide Page Template",
   "type": "Template",
   "subtype": "PAGE",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/OneColumn/OneColumn/OneColumn.tsx

@@ -1,33 +1,32 @@
-import React from "react";
-import { Grid } from "@material-ui/core";
+import { PropsWithChildren, ReactElement } from 'react';
+import { Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// OneColumn does NOT have getPConnect. So, no need to extend from PConnProps
-interface OneColumnProps{
+interface OneColumnProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>
 }
 
-
 const useStyles = makeStyles((/* theme */) => ({
   colStyles: {
-    display: "grid",
-    gap: "1rem",
-    alignContent: "baseline",
-  },
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  }
 }));
 
-
-export default function OneColumn(props: OneColumnProps) {
+export default function OneColumn(props: PropsWithChildren<OneColumnProps>) {
   const classes = useStyles();
 
-  const { children} = props;
+  const { children } = props;
 
   return (
     <Grid container spacing={2}>
       <Grid item xs={12} className={classes.colStyles}>
-        {children.map(child => { return child; } )}
+        {(children as ReactElement[]).map(child => {
+          return child;
+        })}
       </Grid>
     </Grid>
-  )
+  );
 }

package/lib/template/OneColumn/OneColumn/config-ext.json

@@ -4,6 +4,5 @@
   "description": "OneColumn Template",
   "type": "Template",
   "subtype": "FORM",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/OneColumn/OneColumnPage/OneColumnPage.tsx

@@ -1,13 +1,10 @@
-import React from "react";
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// OneColumnPage does NOT have getPConnect. So, no need to extend from PConnProps
-interface OneColumnPageProps{
+interface OneColumnPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>
 }
 
-
 /*
  * The wrapper handles knowing how to take in just children
  *  and mapping to the TwoColumn template.
@@ -16,9 +13,5 @@ export default function OneColumnPage(props: OneColumnPageProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const OneColumn = getComponentFromMap('OneColumn');
 
-  return (
-    <OneColumn
-       {...props}
-    />
-  );
+  return <OneColumn {...props} />;
 }

package/lib/template/OneColumn/OneColumnPage/config-ext.json

@@ -4,6 +4,5 @@
   "description": "OneColumn Page Template",
   "type": "Template",
   "subtype": "PAGE",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/OneColumn/OneColumnTab/OneColumnTab.tsx

@@ -1,15 +1,11 @@
-import React from "react";
+import { PropsWithChildren } from 'react';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-interface OneColumnTabProps{
+interface OneColumnTabProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>
 }
-export default function OneColumnTab(props: OneColumnTabProps) {
-  const { children} = props;
+export default function OneColumnTab(props: PropsWithChildren<OneColumnTabProps>) {
+  const { children } = props;
 
-  return (
-    <div id="OneColumnTab">
-      {children}
-    </div>
-  )
+  return <div id='OneColumnTab'>{children}</div>;
 }

package/lib/template/OneColumn/OneColumnTab/config-ext.json

@@ -4,6 +4,5 @@
   "description": "One column",
   "type": "Template",
   "subtype": "TAB",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/PromotedFilters/PromotedFilters.css

@@ -1,6 +1,6 @@
 .psdk-grid-filter {
   display: grid;
-  grid-template-columns: repeat(2,minmax(0,1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;

package/lib/template/PromotedFilters/PromotedFilters.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState, createElement, Fragment } from 'react';
+import React, { useCallback, useMemo, useState, createElement } from 'react';
 import Button from '@material-ui/core/Button';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
@@ -6,19 +6,18 @@ import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import './PromotedFilters.css';
 
-// import type { PConnProps } from '../../../types/PConnProps';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Can't use PromotedFilterProps until getContainerManager() knows about addTransientItem
 //  Currently just expects "object"
-// interface PromotedFilterProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   viewName: string,
-//   filters: Array<any>,
-//   listViewProps: any,
-//   pageClass: string,
-//   parameters?: object
-// }
-
+interface PromotedFilterProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  viewName: string;
+  filters: any[];
+  listViewProps: any;
+  pageClass: string;
+  parameters?: object;
+}
 
 const localeCategory = 'SimpleTable';
 const SUPPORTED_TYPES_IN_PROMOTED_FILTERS = [
@@ -64,10 +63,10 @@ function Filters({ filters, transientItemID, localeReference }) {
 }
 
 function isValidInput(input) {
-  return Object.values(input).findIndex((v) => v) >= 0;
+  return Object.values(input).findIndex(v => v) >= 0;
 }
 
-export default function PromotedFilters(props /* : PromotedFilterProps */) {
+export default function PromotedFilters(props: PromotedFilterProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const ListView = getComponentFromMap('ListView');
 
@@ -77,7 +76,7 @@ export default function PromotedFilters(props /* : PromotedFilterProps */) {
   const [payload, setPayload] = useState({});
   const filtersProperties = {};
 
-  filters.forEach((filter) => {
+  filters.forEach(filter => {
     filtersProperties[PCore.getAnnotationUtils().getPropertyName(filter.config.value)] = '';
   });
 
@@ -99,7 +98,7 @@ export default function PromotedFilters(props /* : PromotedFilterProps */) {
           lhs: {
             field
           },
-          comparator: "EQ",
+          comparator: 'EQ',
           rhs: {
             value
           }
@@ -110,12 +109,12 @@ export default function PromotedFilters(props /* : PromotedFilterProps */) {
   }
 
   const getFilterData = useCallback(
-    (e) => {
+    e => {
       e.preventDefault(); // to prevent un-intended forms submission.
 
       const changes = PCore.getFormUtils().getChanges(transientItemID);
       const formValues = {};
-      Object.keys(changes).forEach((key) => {
+      Object.keys(changes).forEach(key => {
         if (!['context_data', 'pageInstructions'].includes(key)) {
           formValues[key] = changes[key];
         }
@@ -143,25 +142,30 @@ export default function PromotedFilters(props /* : PromotedFilterProps */) {
   }, [transientItemID]);
 
   return (
-    <Fragment>
+    <>
       <div>{listViewProps.title}</div>
-      <div className="psdk-grid-filter">
-        <Filters filters={filters} transientItemID={transientItemID} localeReference={listViewProps.localeReference}/>
+      <div className='psdk-grid-filter'>
+        <Filters filters={filters} transientItemID={transientItemID} localeReference={listViewProps.localeReference} />
       </div>
       <div>
         <Button key='1' type='button' onClick={clearFilterData} data-testid='clear' variant='contained' color='primary'>
           {localizedVal('Clear', localeCategory)}
         </Button>
-        <Button style={{float: 'right'}} key='2' type='submit' onClick={getFilterData} data-testid='search' variant='contained' color='primary'>
+        <Button style={{ float: 'right' }} key='2' type='submit' onClick={getFilterData} data-testid='search' variant='contained' color='primary'>
           {localizedVal('Search', localeCategory)}
         </Button>
       </div>
-      {initTable && <ListView {...listViewProps} title='' payload={payload}
-         isSearchable
-         tableDisplay={{
-           show: initTable
-         }}
-       />}
-    </Fragment>
+      {initTable && (
+        <ListView
+          {...listViewProps}
+          title=''
+          payload={payload}
+          isSearchable
+          tableDisplay={{
+            show: initTable
+          }}
+        />
+      )}
+    </>
   );
 }

package/lib/template/SimpleTable/SimpleTable/SimpleTable.tsx

@@ -1,21 +1,31 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React from 'react';
-import { buildMetaForListView, getContext } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
 import { useRef } from 'react';
+
+import { buildMetaForListView, getContext } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-// import type { PConnProps } from '../../../../types/PConnProps';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Can't use SimpleTableProps until getComponentConfig() and getFieldMetadata() are NOT private
-// interface SimpleTableProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   multiRecordDisplayAs: string,
-//   allowTableEdit: boolean,
-//   contextClass: any
-// }
-declare const PCore: any;
+interface SimpleTableProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  multiRecordDisplayAs: string;
+  allowTableEdit: boolean;
+  contextClass: any;
+  label: string;
+  propertyLabel?: string;
+  displayMode?: string;
+  fieldMetadata?: any;
+  hideLabel?: boolean;
+  parameters?: any;
+  isDataObject?: boolean;
+  type?: string;
+  ruleClass?: string;
+  authorContext?: string;
+  name?: string;
+}
 
-export default function SimpleTable(props /* : SimpleTableProps */) {
+export default function SimpleTable(props: SimpleTableProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const ListView = getComponentFromMap('ListView');
   const FieldGroupTemplate = getComponentFromMap('FieldGroupTemplate');
@@ -40,12 +50,14 @@ export default function SimpleTable(props /* : SimpleTableProps */) {
 
   let { contextClass } = props;
   if (!contextClass) {
+    // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
     let listName = getPConnect().getComponentConfig().referenceList;
     listName = PCore.getAnnotationUtils().getPropertyName(listName);
     // was... contextClass = getPConnect().getFieldMetadata(listName)?.pageClass;
+    // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'.
     const theFieldMetadata = getPConnect().getFieldMetadata(listName);
     if (theFieldMetadata) {
-      contextClass = theFieldMetadata['pageClass'];
+      contextClass = theFieldMetadata.pageClass;
     } else {
       contextClass = undefined;
     }
@@ -59,15 +71,11 @@ export default function SimpleTable(props /* : SimpleTableProps */) {
   const propsToUse = { label, ...getPConnect().getInheritedProps() };
   const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
 
-  if (
-    fieldMetadata &&
-    fieldMetadata.type === 'Page List' &&
-    fieldMetadata.dataRetrievalType === 'refer'
-  ) {
+  if (fieldMetadata && fieldMetadata.type === 'Page List' && fieldMetadata.dataRetrievalType === 'refer') {
     const {
       children: [{ children: rawFields }],
       parameters: rawParams
-    } = getPConnect().getRawMetadata().config;
+    } = (getPConnect().getRawMetadata() as any).config;
     if (isDisplayModeEnabled && hideLabel) {
       propsToUse.label = '';
     }
@@ -84,8 +92,8 @@ export default function SimpleTable(props /* : SimpleTableProps */) {
     );
 
     const metaForPConnect = JSON.parse(JSON.stringify(metaForListView));
-    metaForPConnect.config.parameters =
-      rawParams ?? PCore.getMetadataUtils().getPropertyMetadata(name)?.datasource?.parameters;
+    // @ts-ignore - PCore.getMetadataUtils().getPropertyMetadata - An argument for 'currentClassID' was not provided.
+    metaForPConnect.config.parameters = rawParams ?? PCore.getMetadataUtils().getPropertyMetadata(name)?.datasource?.parameters;
 
     const { referenceListStr: referenceList } = getContext(getPConnect());
     let requiredContextForQueryInDisplayMode = {};
@@ -100,9 +108,7 @@ export default function SimpleTable(props /* : SimpleTableProps */) {
       ...requiredContextForQueryInDisplayMode
     };
 
-    const refToPConnect = useRef(
-      PCore.createPConnect({ meta: metaForPConnect, options }).getPConnect
-    ).current; // getPConnect should be created only once.
+    const refToPConnect = useRef(PCore.createPConnect({ meta: metaForPConnect, options }).getPConnect).current; // getPConnect should be created only once.
     /* BUG-637178 : need to send context */
     const listViewProps = {
       ...metaForListView.config,
@@ -111,15 +117,13 @@ export default function SimpleTable(props /* : SimpleTableProps */) {
       fieldName: authorContext,
       bInForm: true
     };
-    const listViewComponent = <ListView {...listViewProps} />;
-    return listViewComponent;
-  } else {
-    const simpleTableManualProps = { ...props, contextClass };
-    if (allowTableEdit === false) {
-      simpleTableManualProps.hideAddRow = true;
-      simpleTableManualProps.hideDeleteRow = true;
-      simpleTableManualProps.disableDragDrop = true;
-    }
-    return <SimpleTableManual {...simpleTableManualProps} />;
+    return <ListView {...listViewProps} />;
+  }
+  const simpleTableManualProps: any = { ...props, contextClass };
+  if (allowTableEdit === false) {
+    simpleTableManualProps.hideAddRow = true;
+    simpleTableManualProps.hideDeleteRow = true;
+    simpleTableManualProps.disableDragDrop = true;
   }
+  return <SimpleTableManual {...simpleTableManualProps} />;
 }

package/lib/template/SimpleTable/SimpleTable/config-ext.json

@@ -3,6 +3,5 @@
   "description": "Datatype List Template",
   "type": "Template",
   "subtype": "DATAVIEW",
-  "properties": [
-  ]
+  "properties": []
 }