@pega/react-sdk-overrides 23.1.10 → 23.1.12

package/lib/template/SingleReferenceReadOnly/SingleReferenceReadOnly.tsx

@@ -1,20 +1,18 @@
-import React from "react";
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface SingleReferenceReadOnlyProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  config: any,
-  displayAs?: string,
-  ruleClass?: string,
-  label?: string,
-  displayMode?: string,
-  type: string,
-  referenceType?: string,
-  hideLabel?: boolean,
-  dataRelationshipContext?: string
+  config: any;
+  displayAs?: string;
+  ruleClass?: string;
+  label?: string;
+  displayMode?: string;
+  type: string;
+  referenceType?: string;
+  hideLabel?: boolean;
+  dataRelationshipContext?: string;
 }
 
-
 export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyProps) {
   const {
     getPConnect,
@@ -29,7 +27,7 @@ export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyPr
     config
   } = props;
 
-  const editableComponents = ["AutoComplete", "SimpleTableSelect", "Dropdown"];
+  const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown'];
 
   if (editableComponents.includes(type)) {
     config.caseClass = ruleClass;
@@ -37,27 +35,29 @@ export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyPr
     config.caseID = config.value;
     config.contextPage = `@P .${dataRelationshipContext}`;
     config.resourceParams = {
-      "workID": displayAs === "table" ? config.selectionKey : config.value
+      workID: displayAs === 'table' ? config.selectionKey : config.value
     };
     config.resourcePayload = {
-      "caseClassName": ruleClass
+      caseClassName: ruleClass
     };
   }
 
-  const component = getPConnect().createComponent({
-    type: 'SemanticLink',
-    config: {
-      ...config,
-      label,
-      displayMode,
-      referenceType,
-      hideLabel,
-      dataRelationshipContext
-    }
-  },
-  '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+  const component = getPConnect().createComponent(
+    {
+      type: 'SemanticLink',
+      config: {
+        ...config,
+        label,
+        displayMode,
+        referenceType,
+        hideLabel,
+        dataRelationshipContext
+      }
+    },
+    '',
+    '',
+    {}
+  ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
 
-  return (
-    <React.Fragment>{component}</React.Fragment>
-  )
+  return <>{component}</>;
 }

package/lib/template/SubTabs/SubTabs.tsx

@@ -1,64 +1,46 @@
-import React, { Fragment, useEffect, useState } from "react";
-import { Tab, Tabs } from "@material-ui/core";
+import { Children, PropsWithChildren, useEffect, useState } from 'react';
+import { Tab, Tabs } from '@material-ui/core';
 import { TabContext, TabPanel } from '@material-ui/lab';
-import { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';
 
-// SubTabs does NOT have getPConnect. So, no need to extend from PConnProps
+import { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-interface SubTabsProps {
+interface SubTabsProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>
 }
 
-
-export default function SubTabs(props: SubTabsProps) {
+export default function SubTabs(props: PropsWithChildren<SubTabsProps>) {
   const { children = [] } = props;
 
   const defaultTabIndex = 0;
-  const deferLoadedTabs = children[0];
-  const availableTabs = getVisibleTabs(deferLoadedTabs, "tabsSubs");
+  const deferLoadedTabs = Children.toArray(children)[0];
+  const availableTabs = getVisibleTabs(deferLoadedTabs, 'tabsSubs');
   const [currentTabId, setCurrentTabId] = useState(defaultTabIndex.toString());
 
-  const [tabItems, setTabitem] = useState<Array<any>>([]);
+  const [tabItems, setTabitem] = useState<any[]>([]);
   useEffect(() => {
-    const tempTabItems = getTransientTabs(
-      availableTabs,
-      currentTabId,
-      tabItems
-    );
+    const tempTabItems = getTransientTabs(availableTabs, currentTabId, tabItems);
     setTabitem(tempTabItems);
   }, [currentTabId]);
 
-
   const handleTabClick = (id, index: string) => {
     setCurrentTabId(index);
     tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);
   };
 
   return (
-    <Fragment>
-      <TabContext value={currentTabId.toString()}>
-      <Tabs
-        onChange={handleTabClick}
-        value={currentTabId}
-        variant="scrollable"
-        >
-      {tabItems.map((tab:any) =>
-        <Tab
-        key={tab.id}
-        label={tab.name}
-        value={tab.id}
-        />
-  )}
-    </Tabs>
-
-      {
-        tabItems.map((tab:any) => (
-          <TabPanel key={tab.id} value={tab.id} tabIndex={+tab.id}>
-            <div>{tab.content ? tab.content : "No content exists"}</div>
-          </TabPanel>
+    <TabContext value={currentTabId.toString()}>
+      <Tabs onChange={handleTabClick} value={currentTabId} variant='scrollable'>
+        {tabItems.map((tab: any) => (
+          <Tab key={tab.id} label={tab.name} value={tab.id} />
         ))}
-      </TabContext>
-    </Fragment>
+      </Tabs>
+
+      {tabItems.map((tab: any) => (
+        <TabPanel key={tab.id} value={tab.id} tabIndex={+tab.id}>
+          <div>{tab.content ? tab.content : 'No content exists'}</div>
+        </TabPanel>
+      ))}
+    </TabContext>
   );
 }

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

@@ -4,6 +4,5 @@
   "description": "Sub tabs view",
   "type": "Template",
   "subtype": "TAB",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/template/SubTabs/tabUtils.ts

@@ -1,4 +1,3 @@
-
 export const getDeferFriendlyTabs = allTabs => {
   return allTabs.map(tab => {
     const theTabCompConfig = tab.getPConnect().getConfigProps();
@@ -38,9 +37,7 @@ export const getTransientTabs = (availableTabs, currentTabId, tabItems) => {
         PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
       const tabContent = () => {
         if (i.toString() === currentTabId) {
-          return tabItems?.[i.toString()]?.content
-            ? tabItems?.[i.toString()]?.content
-            : child.getPConnect().getComponent();
+          return tabItems?.[i.toString()]?.content ? tabItems?.[i.toString()]?.content : child.getPConnect().getComponent();
         }
         return tabItems?.[i.toString()]?.content;
       };
@@ -65,7 +62,7 @@ export const tabClick = (id, availableTabs, currentTabId, setCurrentTabId, tabIt
   }
 
   const nextPConn = availableTabs[id].getPConnect();
-  const { deferLoadId: activeId } = nextPConn?.getConfigProps();
+  const { deferLoadId: activeId } = nextPConn?.getConfigProps() || {};
   PCore.getDeferLoadManager().activate(activeId, nextPConn?.getContextName());
   PCore.getDeferLoadManager().refreshComponent(activeId, nextPConn?.getContextName());
 };

package/lib/template/TwoColumn/TwoColumn/TwoColumn.css

@@ -9,5 +9,4 @@
   float: left;
   padding: 0rem 0.3125rem;
   height: 100%;
-
 }

package/lib/template/TwoColumn/TwoColumn/TwoColumn.tsx

@@ -1,32 +1,31 @@
-import React from "react";
-import { Grid, GridSize } from "@material-ui/core";
+import { PropsWithChildren, ReactElement } from 'react';
+import { Grid, GridSize } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// TwoColumn does NOT have getPConnect. So, no need to extend from PConnProps
-interface TwoColumnProps {
+interface TwoColumnProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>,
-  templateCol?: string
+  templateCol?: string;
 }
 
-
 const useStyles = makeStyles(() => ({
   colStyles: {
-    display: "grid",
-    gap: "1rem",
-    alignContent: "baseline",
-  },
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  }
 }));
 
-export default function TwoColumn(props: TwoColumnProps) {
+export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {
   const classes = useStyles();
 
- const {children, templateCol = '1fr 1fr' } = props;
+  const { children, templateCol = '1fr 1fr' } = props;
+  const childrenToRender = children as ReactElement[];
 
- if (children.length !== 2) {
-  // eslint-disable-next-line no-console
-  console.error( `TwoColumn template sees more than 2 columns: ${children.length}`);
- }
+  if (childrenToRender.length !== 2) {
+    // eslint-disable-next-line no-console
+    console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
+  }
 
   // Calculate the size
   //  Default to assume the 2 columns are evenly split. However, override if templateCol
@@ -34,20 +33,23 @@ export default function TwoColumn(props: TwoColumnProps) {
   let aSize: GridSize = 6;
   let bSize: GridSize = 6;
 
-  const colAArray = templateCol.replaceAll(/[a-z]+/g, "").split(/\s/).map(itm => Number(itm));
+  const colAArray = templateCol
+    .replaceAll(/[a-z]+/g, '')
+    .split(/\s/)
+    .map(itm => Number(itm));
   const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
   const ratio = 12 / totalCols;
   aSize = (ratio * colAArray[0]) as GridSize;
   bSize = (ratio * colAArray[1]) as GridSize;
 
- return (
-   <Grid container spacing={1}>
-     <Grid item xs={12} md={aSize} className={classes.colStyles}>
-       {children[0]}
-     </Grid>
-     <Grid item xs={12} md={bSize} className={classes.colStyles}>
-       {children[1]}
-     </Grid>
-   </Grid>
- )
+  return (
+    <Grid container spacing={1}>
+      <Grid item xs={12} md={aSize} className={classes.colStyles}>
+        {childrenToRender[0]}
+      </Grid>
+      <Grid item xs={12} md={bSize} className={classes.colStyles}>
+        {childrenToRender[1]}
+      </Grid>
+    </Grid>
+  );
 }

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

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

package/lib/template/TwoColumn/TwoColumnPage/TwoColumnPage.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';
 
-// TwoColumnPage does NOT have getPConnect. So, no need to extend from PConnProps
-interface TwoColumnPageProps{
+interface TwoColumnPageProps 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 TwoColumnPage(props: TwoColumnPageProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const TwoColumn = getComponentFromMap('TwoColumn');
 
-  return (
-    <TwoColumn
-      {...props}
-    />
-  );
+  return <TwoColumn {...props} />;
 }

package/lib/template/TwoColumn/TwoColumnPage/config-ext.json

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

package/lib/template/TwoColumn/TwoColumnTab/TwoColumnTab.tsx

@@ -1,32 +1,31 @@
-import React from "react";
-import { Grid, GridSize } from "@material-ui/core";
+import { PropsWithChildren, ReactElement } from 'react';
+import { Grid, GridSize } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// TwoColumnTab does NOT have getPConnect. So, no need to extend from PConnProps
-interface TwoColumnTabProps {
+interface TwoColumnTabProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>,
-  templateCol?: string
+  templateCol?: string;
 }
 
-
 const useStyles = makeStyles(() => ({
   colStyles: {
-    display: "grid",
-    gap: "1rem",
-    alignContent: "baseline",
-  },
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  }
 }));
 
-export default function TwoColumnTab(props:TwoColumnTabProps) {
+export default function TwoColumnTab(props: PropsWithChildren<TwoColumnTabProps>) {
   const classes = useStyles();
 
- const {children, templateCol = '1fr 1fr'} = props;
+  const { children, templateCol = '1fr 1fr' } = props;
+  const childrenToRender = children as ReactElement[];
 
- if (children.length !== 2) {
-  // eslint-disable-next-line no-console
-  console.error( `TwoColumn template sees more than 2 columns: ${children.length}`);
- }
+  if (childrenToRender.length !== 2) {
+    // eslint-disable-next-line no-console
+    console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
+  }
 
   // Calculate the size
   //  Default to assume the 2 columns are evenly split. However, override if templateCol
@@ -34,20 +33,23 @@ export default function TwoColumnTab(props:TwoColumnTabProps) {
   let aSize: GridSize = 6;
   let bSize: GridSize = 6;
 
-  const colAArray = templateCol.replaceAll(/[a-z]+/g, "").split(/\s/).map(itm => Number(itm));
+  const colAArray = templateCol
+    .replaceAll(/[a-z]+/g, '')
+    .split(/\s/)
+    .map(itm => Number(itm));
   const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
   const ratio = 12 / totalCols;
   aSize = (ratio * colAArray[0]) as GridSize;
   bSize = (ratio * colAArray[1]) as GridSize;
 
- return (
-   <Grid container spacing={1}>
-     <Grid item xs={12} md={aSize} className={classes.colStyles}>
-       {children[0]}
-     </Grid>
-     <Grid item xs={12} md={bSize} className={classes.colStyles}>
-       {children[1]}
-     </Grid>
-   </Grid>
- )
+  return (
+    <Grid container spacing={1}>
+      <Grid item xs={12} md={aSize} className={classes.colStyles}>
+        {childrenToRender[0]}
+      </Grid>
+      <Grid item xs={12} md={bSize} className={classes.colStyles}>
+        {childrenToRender[1]}
+      </Grid>
+    </Grid>
+  );
 }

package/lib/template/TwoColumn/TwoColumnTab/config-ext.json

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

package/lib/template/WideNarrow/WideNarrow/WideNarrow.css

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

package/lib/template/WideNarrow/WideNarrow/WideNarrow.tsx

@@ -1,49 +1,37 @@
-import React from "react";
+import { PropsWithChildren, ReactElement } from 'react';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WideNarrow.css';
 
-// WideNarrow does NOT have getPConnect. So, no need to extend from PConnProps
-interface WideNarrowProps {
+interface WideNarrowProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  a: any,
-  b: any,
-  children?: Array<any>,
+  a: any;
+  b: any;
   // eslint-disable-next-line react/no-unused-prop-types
-  title?: string,
+  title?: string;
   // eslint-disable-next-line react/no-unused-prop-types
-  cols?: string,
+  cols?: string;
   // eslint-disable-next-line react/no-unused-prop-types
-  icon?: string
+  icon?: string;
 }
 
-
-export default function WideNarrow(props: WideNarrowProps) {
+export default function WideNarrow(props: PropsWithChildren<WideNarrowProps>) {
   // const {a, b /*, cols, icon, title */ } = props;
   const { a, b, children = [] } = props;
 
   return (
-    <React.Fragment>
-    {children && children.length === 2 &&
-      <div className="psdk-wide-narrow-column">
-        <div className="psdk-wide-column-column">
-          {children[0]}
-        </div>
-        <div className="psdk-narrow-column-column">
-          {children[1]}
-        </div>
-      </div>
-    }
-    {a && b &&
-      <div className="psdk-wide-narrow-column">
-        <div className="psdk-wide-column-column">
-          {a}
+    <>
+      {children && (children as ReactElement[]).length === 2 && (
+        <div className='psdk-wide-narrow-column'>
+          <div className='psdk-wide-column-column'>{children[0]}</div>
+          <div className='psdk-narrow-column-column'>{children[1]}</div>
         </div>
-        <div className="psdk-narrow-column-column">
-          {b}
+      )}
+      {a && b && (
+        <div className='psdk-wide-narrow-column'>
+          <div className='psdk-wide-column-column'>{a}</div>
+          <div className='psdk-narrow-column-column'>{b}</div>
         </div>
-      </div>
-    }
-    </React.Fragment>
-
-  )
-
+      )}
+    </>
+  );
 }

package/lib/template/WideNarrow/WideNarrowDetails/WideNarrowDetails.tsx

@@ -1,22 +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';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// Can't use PConnProps until PConnect.getChildren() type is ok
-// interface WideNarrowDetailsProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   showLabel?: boolean,
-//   label?: string,
-//   showHighlightedData?: boolean
-// }
+interface WideNarrowDetailsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel?: boolean;
+  label?: string;
+  showHighlightedData?: boolean;
+}
 
 const COLUMN_WIDTHS = [8, 4];
 
-export default function WideNarrowDetails(props /* : WideNarrowDetailsProps */) {
+export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromMap('FieldGroup');
 
@@ -29,25 +28,23 @@ export default function WideNarrowDetails(props /* : WideNarrowDetailsProps */)
   // 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) => {
-      let theConfigObject: object = configObject;
-      if (!theConfigObject) {
-        theConfigObject = {}
-      }
+  const children = (getPConnect().getChildren() as any[])?.map((configObject, index) => {
+    let theConfigObject: object = configObject;
+    if (!theConfigObject) {
+      theConfigObject = {};
+    }
 
-      return createElement(createPConnectComponent(), {
-        ...theConfigObject,
-        // eslint-disable-next-line react/no-array-index-key
-        key: index.toString()
-      });
+    return createElement(createPConnectComponent(), {
+      ...theConfigObject,
+      // 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';
 
@@ -57,13 +54,12 @@ export default function WideNarrowDetails(props /* : WideNarrowDetailsProps */)
         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
     });
   }
 
   let theName = '';
-  if (propsToUse?.showLabel && propsToUse.label ) {
+  if (propsToUse?.showLabel && propsToUse.label) {
     theName = propsToUse.label;
   }
 

package/lib/template/WideNarrow/WideNarrowDetails/config-ext.json

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

package/lib/template/WideNarrow/WideNarrowForm/WideNarrowForm.css

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