@pega/react-sdk-overrides 8.23.11 → 23.1.11

package/lib/template/SingleReferenceReadOnly/SingleReferenceReadOnly.tsx

@@ -1,19 +1,33 @@
-import PropTypes from "prop-types";
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-export default function SingleReferenceReadOnly(props) {
+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;
+}
+
+export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyProps) {
   const {
     getPConnect,
-    displayAs,
-    ruleClass,
-    label,
-    type,
-    displayMode,
-    referenceType,
-    hideLabel,
-    dataRelationshipContext,
+    displayAs = '',
+    ruleClass = '',
+    label = '',
+    type = '',
+    displayMode = '',
+    referenceType = '',
+    hideLabel = false,
+    dataRelationshipContext = null,
     config
   } = props;
-  const editableComponents = ["AutoComplete", "SimpleTableSelect", "Dropdown"];
+
+  const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown'];
 
   if (editableComponents.includes(type)) {
     config.caseClass = ruleClass;
@@ -21,46 +35,29 @@ export default function SingleReferenceReadOnly(props) {
     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
     };
   }
 
-  return getPConnect().createComponent({
-    type: 'SemanticLink',
-    config: {
-      ...config,
-      label,
-      displayMode,
-      referenceType,
-      hideLabel,
-      dataRelationshipContext
-    }
-  });
-}
-
-SingleReferenceReadOnly.defaultProps = {
-  displayAs: "",
-  ruleClass: "",
-  label: "",
-  displayMode: "",
-  type: "",
-  referenceType: "",
-  hideLabel: false,
-  dataRelationshipContext: null
-};
+  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
 
-SingleReferenceReadOnly.propTypes = {
-  config: PropTypes.object,
-  getPConnect: PropTypes.func.isRequired,
-  displayAs: PropTypes.string,
-  ruleClass: PropTypes.string,
-  label: PropTypes.string,
-  displayMode: PropTypes.string,
-  type: PropTypes.string,
-  referenceType: PropTypes.string,
-  hideLabel: PropTypes.bool,
-  dataRelationshipContext: PropTypes.string
-};
+  return <>{component}</>;
+}

package/lib/template/SubTabs/SubTabs.tsx

@@ -1,65 +1,46 @@
-import React, { Fragment, useEffect, useState } from "react";
-import PropTypes from "prop-types";
-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';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface SubTabsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
 
-export default function SubTabs(props) {
-  const { children } = props;
+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>
   );
 }
-
-SubTabs.defaultProps = {
-   children: []
-}
-
-SubTabs.propTypes = {
-   children: PropTypes.arrayOf(PropTypes.node)
-};

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,8 +1,3 @@
-import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
-
-declare const PCore: typeof PCoreType;
-
-
 export const getDeferFriendlyTabs = allTabs => {
   return allTabs.map(tab => {
     const theTabCompConfig = tab.getPConnect().getConfigProps();
@@ -42,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;
       };
@@ -69,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,25 +1,31 @@
-import React from "react";
-import PropTypes from "prop-types";
-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';
+
+interface TwoColumnProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  templateCol?: string;
+}
 
 const useStyles = makeStyles(() => ({
   colStyles: {
-    display: "grid",
-    gap: "1rem",
-    alignContent: "baseline",
-  },
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  }
 }));
 
-export default function TwoColumn(props) {
+export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {
   const classes = useStyles();
 
- const {children, templateCol} = 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
@@ -27,32 +33,23 @@ export default function TwoColumn(props) {
   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>
+  );
 }
-
-TwoColumn.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  // title: PropTypes.string,
-  templateCol: PropTypes.string,
-  // icon: PropTypes.string
-};
-
-TwoColumn.defaultProps = {
-  templateCol: "1fr 1fr",
-  // icon: ""
-};

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,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 TwoColumn from '@pega/react-sdk-components/lib/components/template/TwoColumn/TwoColumn';
+interface TwoColumnPageProps 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 TwoColumnPage(props) {
+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} />;
 }
-
-TwoColumnPage.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
-
-TwoColumnPage.defaultProps = {
-};

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,25 +1,31 @@
-import React from "react";
-import PropTypes from "prop-types";
-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';
+
+interface TwoColumnTabProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  templateCol?: string;
+}
 
 const useStyles = makeStyles(() => ({
   colStyles: {
-    display: "grid",
-    gap: "1rem",
-    alignContent: "baseline",
-  },
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  }
 }));
 
-export default function TwoColumnTab(props) {
+export default function TwoColumnTab(props: PropsWithChildren<TwoColumnTabProps>) {
   const classes = useStyles();
 
- const {children, templateCol} = 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
@@ -27,29 +33,23 @@ export default function TwoColumnTab(props) {
   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>
+  );
 }
-
-TwoColumnTab.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  templateCol: PropTypes.string,
-};
-
-TwoColumnTab.defaultProps = {
-  templateCol: "1fr 1fr",
-};

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,35 +1,37 @@
-import React from "react";
-
+import { PropsWithChildren, ReactElement } from 'react';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WideNarrow.css';
 
-export default function WideNarrow(props) {
+interface WideNarrowProps 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 WideNarrow(props: PropsWithChildren<WideNarrowProps>) {
   // 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-wide-narrow-column">
-        <div className="psdk-wide-column-column">
-          {children[0]}
-        </div>
-        <div className="psdk-narrow-column-column">
-          {children[1]}
+    <>
+      {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>
-    }
-    {a && b &&
-      <div className="psdk-wide-narrow-column">
-        <div className="psdk-wide-column-column">
-          {a}
+      )}
+      {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 className="psdk-narrow-column-column">
-          {b}
-        </div>
-      </div>
-    }
-    </React.Fragment>
-
-  )
-
+      )}
+    </>
+  );
 }