@pega/react-sdk-overrides 8.23.11 → 23.1.11

package/lib/template/MultiReferenceReadOnly/MultiReferenceReadOnly.tsx

@@ -1,46 +1,37 @@
-import PropTypes from "prop-types";
-import React from "react";
-
-import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
-
-declare const PCore: typeof PCoreType;
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+interface MultiReferenceReadOnlyProps extends PConnProps {
+  config: { referenceList: any; readonlyContextList: any };
+  label: string;
+  hideLabel: boolean;
+}
 
-export default function MultiReferenceReadOnly(props) {
-  const { getPConnect, label, hideLabel, config } = props;
+export default function MultiReferenceReadOnly(props: MultiReferenceReadOnlyProps) {
+  const { getPConnect, label = '', hideLabel = false, config } = props;
   const { referenceList, readonlyContextList } = config;
 
   // When referenceList does not contain selected values, it should be replaced with readonlyContextList while calling SimpleTableManual
   let readonlyContextObject;
-  if ( !PCore.getAnnotationUtils().isProperty(referenceList)) {
+  if (!PCore.getAnnotationUtils().isProperty(referenceList)) {
     readonlyContextObject = {
       referenceList: readonlyContextList
     };
   }
 
-  const component =  getPConnect().createComponent({
-    type: "SimpleTable",
-    config: {
-      ...config,
-      ...readonlyContextObject,
-      label,
-      hideLabel
-    }
-  });
-
-   return (
-    <React.Fragment>{component}</React.Fragment>
-  )
+  const component = getPConnect().createComponent(
+    {
+      type: 'SimpleTable',
+      config: {
+        ...config,
+        ...readonlyContextObject,
+        label,
+        hideLabel
+      }
+    },
+    '',
+    '',
+    {}
+  ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+
+  return <>{component}</>;
 }
-
-MultiReferenceReadOnly.defaultProps = {
-  label: "",
-  hideLabel: false
-};
-
-MultiReferenceReadOnly.propTypes = {
-  config: PropTypes.object.isRequired,
-  getPConnect: PropTypes.func.isRequired,
-  label: PropTypes.string,
-  hideLabel: PropTypes.bool
-};

package/lib/template/NarrowWide/NarrowWide/NarrowWide.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/NarrowWide/NarrowWide.tsx

@@ -1,35 +1,37 @@
-import React from "react";
-
+import { PropsWithChildren, ReactElement } from 'react';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './NarrowWide.css';
 
-export default function NarrowWide(props) {
+interface NarrowWideProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  a: any;
+  b: any;
+  // eslint-disable-next-line react/no-unused-prop-types
+  title?: string;
+  // eslint-disable-next-line react/no-unused-prop-types
+  cols?: string;
+  // eslint-disable-next-line react/no-unused-prop-types
+  icon?: string;
+}
+
+export default function NarrowWide(props: PropsWithChildren<NarrowWideProps>) {
   // const {a, b /*, cols, icon, title */ } = props;
-  const {a, b, children} = props;
+  const { a, b, 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>
-    }
-    {a && b &&
-      <div className="psdk-narrow-wide-column">
-      <div className="psdk-narrow-column-column">
-        {a}
-      </div>
-      <div className="psdk-wide-column-column">
-        {b}
-      </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>
+      )}
+      {a && b && (
+        <div className='psdk-narrow-wide-column'>
+          <div className='psdk-narrow-column-column'>{a}</div>
+          <div className='psdk-wide-column-column'>{b}</div>
+        </div>
+      )}
+    </>
+  );
 }

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

@@ -1,14 +1,25 @@
-import React, { createElement } from 'react';
-import PropTypes from 'prop-types';
-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 FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+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) {
-  const { label, showLabel, getPConnect, showHighlightedData } = props;
+export default function NarrowWideDetails(props: NarrowWideDetailsProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
+
+  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
 
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
@@ -17,20 +28,18 @@ export default function NarrowWideDetails(props) {
   // 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';
 
@@ -40,7 +49,7 @@ export default function NarrowWideDetails(props) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field);
+      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 
@@ -65,16 +74,3 @@ export default function NarrowWideDetails(props) {
     </FieldGroup>
   );
 }
-
-NarrowWideDetails.defaultProps = {
-  label: undefined,
-  showLabel: true,
-  showHighlightedData: false
-};
-
-NarrowWideDetails.propTypes = {
-  showLabel: PropTypes.bool,
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  showHighlightedData: PropTypes.bool
-};

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,24 +1,22 @@
-import React from "react";
-
+import { PropsWithChildren, ReactElement } from 'react';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './NarrowWideForm.css';
 
-export default function NarrowWideForm(props) {
-  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>
+interface NarrowWideFormProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
 
-  )
+export default function NarrowWideForm(props: PropsWithChildren<NarrowWideFormProps>) {
+  const { children } = props;
 
+  return (
+    <>
+      {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 PropTypes from "prop-types";
+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';
 
-// import { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
-import NarrowWide from '@pega/react-sdk-components/lib/components/template/NarrowWide/NarrowWide';
+interface NarrowWidePageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  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) {
-  const { children, title, templateCol, icon } = props;
-  const childArray = Children.toArray(children);
+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 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>
   );
 }
-
-NarrowWidePage.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  title: PropTypes.string.isRequired,
-  templateCol: PropTypes.string,
-  icon: PropTypes.string
-};
-
-NarrowWidePage.defaultProps = {
-  templateCol: "1fr 1fr",
-  icon: ""
-};

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,32 +1,32 @@
-import React from "react";
-import PropTypes from "prop-types";
-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';
+
+interface OneColumnProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
 
 const useStyles = makeStyles((/* theme */) => ({
   colStyles: {
-    display: "grid",
-    gap: "1rem",
-    alignContent: "baseline",
-  },
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  }
 }));
 
-
-export default function OneColumn(props) {
+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>
-  )
+  );
 }
-
-OneColumn.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  // template: PropTypes.string.isRequired
-};

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,24 +1,17 @@
-import React from "react";
-import PropTypes from "prop-types";
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-import OneColumn from '@pega/react-sdk-components/lib/components/template/OneColumn/OneColumn';
+interface OneColumnPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
 
 /*
  * The wrapper handles knowing how to take in just children
  *  and mapping to the TwoColumn template.
  */
-export default function OneColumnPage(props) {
+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} />;
 }
-
-OneColumnPage.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
-
-OneColumnPage.defaultProps = {
-};

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,17 +1,11 @@
-import React from "react";
-import PropTypes from "prop-types";
+import { PropsWithChildren } from 'react';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-export default function OneColumnTab(props) {
-  const { children} = props;
-
-  return (
-    <div id="OneColumnTab">
-      {children}
-    </div>
-  )
+interface OneColumnTabProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
 }
+export default function OneColumnTab(props: PropsWithChildren<OneColumnTabProps>) {
+  const { children } = props;
 
-OneColumnTab.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  // template: PropTypes.string.isRequired
-};
+  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,16 +1,23 @@
-import React, { useCallback, useMemo, useState, createElement, Fragment } from 'react';
-import PropTypes from 'prop-types';
+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';
-import ListView from '@pega/react-sdk-components/lib/components/template/ListView';
 import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import './PromotedFilters.css';
 
-import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
-
-declare const PCore: typeof PCoreType;
-
+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: any[];
+  listViewProps: any;
+  pageClass: string;
+  parameters?: object;
+}
 
 const localeCategory = 'SimpleTable';
 const SUPPORTED_TYPES_IN_PROMOTED_FILTERS = [
@@ -56,17 +63,20 @@ 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) {
+export default function PromotedFilters(props: PromotedFilterProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ListView = getComponentFromMap('ListView');
+
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const { getPConnect, viewName, filters, listViewProps, pageClass, parameters } = props;
   const [initTable, setInitTable] = useState(false);
   const [payload, setPayload] = useState({});
   const filtersProperties = {};
 
-  filters.forEach((filter) => {
+  filters.forEach(filter => {
     filtersProperties[PCore.getAnnotationUtils().getPropertyName(filter.config.value)] = '';
   });
 
@@ -88,7 +98,7 @@ export default function PromotedFilters(props) {
           lhs: {
             field
           },
-          comparator: "EQ",
+          comparator: 'EQ',
           rhs: {
             value
           }
@@ -99,12 +109,12 @@ export default function PromotedFilters(props) {
   }
 
   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];
         }
@@ -132,34 +142,30 @@ export default function PromotedFilters(props) {
   }, [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
+          }}
+        />
+      )}
+    </>
   );
 }
-
-PromotedFilters.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  viewName: PropTypes.string.isRequired,
-  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
-  listViewProps: PropTypes.objectOf(PropTypes.any).isRequired,
-  pageClass: PropTypes.string.isRequired,
-  parameters: PropTypes.object
-};