@pega/react-sdk-overrides 0.23.11 → 0.23.13

package/lib/{forms → field}/UserReference/UserReference.tsx

@@ -1,8 +1,8 @@
 import React, { Fragment, memo, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Typography } from '@material-ui/core';
-import AutoComplete from '@pega/react-sdk-components/lib/components/forms/AutoComplete';
-import Dropdown from '@pega/react-sdk-components/lib/components/forms/Dropdown';
+import AutoComplete from '@pega/react-sdk-components/lib/components/field/AutoComplete';
+import Dropdown from '@pega/react-sdk-components/lib/components/field/Dropdown';
 import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
 
 declare const PCore: any;

package/lib/field/UserReference/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "UserReference",
+  "description": "User reference",
+  "type": "Field",
+  "subtype": "DATA_CAPTURE",
+  "properties": [
+  ]
+}

package/lib/infra/Containers/FlowContainer/FlowContainer.tsx

@@ -8,7 +8,7 @@ import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { Alert } from '@material-ui/lab';
 
 import Assignment from '@pega/react-sdk-components/lib/components/infra/Assignment';
-import ToDo from "@pega/react-sdk-components/lib/components/infra/ToDo";
+import ToDo from "@pega/react-sdk-components/lib/components/widget/ToDo";
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import StoreContext from "@pega/react-sdk-components/lib/bridge/Context/StoreContext";

package/lib/infra/Containers/ModalViewContainer/ModalViewContainer.tsx

@@ -7,7 +7,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import { makeStyles } from '@material-ui/core/styles';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import Assignment from '@pega/react-sdk-components/lib/components/infra/Assignment';
-import CancelAlert from '@pega/react-sdk-components/lib/components/forms/CancelAlert';
+import CancelAlert from '@pega/react-sdk-components/lib/components/field/CancelAlert';
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 
 declare const PCore;

package/lib/infra/View/View.tsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { SdkComponentMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import ErrorBoundary from '@pega/react-sdk-components/lib/components/infra/ErrorBoundary';
 
-import { getAllFields } from '@pega/react-sdk-components/lib/components/templates/utils';
+import { getAllFields } from '@pega/react-sdk-components/lib/components/template/utils';
 
 // Need to import any templates that we might render
 
@@ -73,7 +73,7 @@ export default function View(props) {
 
       // eslint-disable-next-line no-console
       console.error(`View: Trying to render an unknown template: ${template}`);
-  
+
     }
 
     // for debugging/investigation

package/lib/{templates → template}/CaseSummary/CaseSummary.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import CaseSummaryFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/CaseSummaryFields';
+import CaseSummaryFields from '@pega/react-sdk-components/lib/components/designSystemExtension/CaseSummaryFields';
 
 export default function CaseSummary(props) {
   const { getPConnect, children } = props;

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

@@ -0,0 +1,9 @@
+{
+  "name": "CaseSummary",
+  "label": "Summary data",
+  "description": "Case summary template",
+  "type": "Template",
+  "subtype": "SUMMARY",
+  "properties": [
+  ]
+}

package/lib/{templates → template}/CaseView/CaseView.tsx

@@ -10,7 +10,7 @@ import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 
 import StoreContext from "@pega/react-sdk-components/lib/bridge/Context/StoreContext";
-import CaseViewActionsMenu from "@pega/react-sdk-components/lib/components/templates/CaseViewActionsMenu";
+import CaseViewActionsMenu from "@pega/react-sdk-components/lib/components/template/CaseViewActionsMenu";
 import VerticalTabs from '@pega/react-sdk-components/lib/components/infra/VerticalTabs/VerticalTabs';
 import DeferLoad from '@pega/react-sdk-components/lib/components/infra/DeferLoad';
 

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

@@ -0,0 +1,9 @@
+{
+  "name": "CaseView",
+  "label": "Object page",
+  "description": "Standard case page",
+  "type": "Template",
+  "subtype": "CASEVIEW",
+  "properties": [
+  ]
+}

package/lib/{templates → template}/DataReference/DataReference.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import SingleReferenceReadonly from '@pega/react-sdk-components/lib/components/templates/SingleReferenceReadOnly';
-import MultiReferenceReadonly from '@pega/react-sdk-components/lib/components/templates/MultiReferenceReadOnly';
+import SingleReferenceReadonly from '@pega/react-sdk-components/lib/components/template/SingleReferenceReadOnly';
+import MultiReferenceReadonly from '@pega/react-sdk-components/lib/components/template/MultiReferenceReadOnly';
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 

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

@@ -0,0 +1,9 @@
+{
+  "name": "DataReference",
+  "description": "Data Reference Template",
+  "type": "Template",
+  "icon": "DataReference.svg",
+  "subtype": "DATAVIEW",
+  "properties": [
+  ]
+}

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

@@ -0,0 +1,9 @@
+{
+  "name": "DefaultForm",
+  "label": "Default form",
+  "description": "DefaultForm Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": [
+  ]
+}

package/lib/{templates → template}/Details/Details/Details.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 // import PropTypes from "prop-types";
 import Grid from '@material-ui/core/Grid';
-import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/DetailsFields';
+import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtension/DetailsFields';
 
 export default function Details(props) {
   const { children } = props;

package/lib/{templates → template}/Details/DetailsSubTabs/DetailsSubTabs.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { getTransientTabs, getVisibleTabs, tabClick } from '@pega/react-sdk-components/lib/components/templates/SubTabs/tabUtils';
+import { getTransientTabs, getVisibleTabs, tabClick } from '@pega/react-sdk-components/lib/components/template/SubTabs/tabUtils';
 import React from 'react';
 import { Tab, Tabs, TextField } from '@material-ui/core';
 import { TabContext, TabPanel } from '@material-ui/lab';

package/lib/template/Details/DetailsSubTabs/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "DetailsSubTabs",
+  "label": "Details (Sub tabs)",
+  "description": "Details (Sub tabs)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": [
+  ]
+}

package/lib/{templates → template}/Details/DetailsThreeColumn/DetailsThreeColumn.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 // import PropTypes from "prop-types";
 import Grid from '@material-ui/core/Grid';
-import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/DetailsFields';
+import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtension/DetailsFields';
 
 export default function DetailsThreeColumn(props) {
   const { children } = props;

package/lib/template/Details/DetailsThreeColumn/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "DetailsThreeColumn",
+  "label": "Details (Three column)",
+  "description": "Details (Three column)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": [
+  ]
+}

package/lib/{templates → template}/Details/DetailsTwoColumn/DetailsTwoColumn.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 // import PropTypes from "prop-types";
 import Grid from '@material-ui/core/Grid';
-import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/DetailsFields';
+import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtension/DetailsFields';
 
 export default function DetailsTwoColumn(props) {
   const { children } = props;

package/lib/template/Details/DetailsTwoColumn/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "DetailsTwoColumn",
+  "label": "Details (Two column)",
+  "description": "Details (Two column)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": [
+  ]
+}

package/lib/{templates → template}/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -2,8 +2,8 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldGroup';
-import FieldGroupList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldGroupList';
+import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import FieldGroupList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroupList';
 import { getReferenceList, buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
 
 declare const PCore: any;

package/lib/{templates → template}/InlineDashboardPage/InlineDashboardPage.tsx

@@ -3,7 +3,7 @@ import { useMemo, Children, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { buildFilterComponents } from '@pega/react-sdk-components/lib/components/infra/DashboardFilter/filterUtils';
-import InlineDashboard from '@pega/react-sdk-components/lib/components/templates/InlineDashboard';
+import InlineDashboard from '@pega/react-sdk-components/lib/components/template/InlineDashboard';
 
 export default function InlineDashboardPage(props) {
   const { children, getPConnect } = props;

package/lib/{templates → template}/ListPage/ListPage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import ListView from '@pega/react-sdk-components/lib/components/templates/ListView';
+import ListView from '@pega/react-sdk-components/lib/components/template/ListView';
 
 export default function ListPage(props) {
 

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

@@ -0,0 +1,8 @@
+{
+  "name": "ListPage",
+  "type": "Template",
+  "subtype": "PAGE",
+  "label": "List page",
+  "properties": [
+  ]
+}

package/lib/{templates → template}/ListView/ListView.tsx

@@ -35,7 +35,7 @@ import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import { Radio } from '@material-ui/core';
 import Checkbox from '@material-ui/core/Checkbox';
-import { filterData } from '@pega/react-sdk-components/lib/components/templates/SimpleTable/simpleTableHelpers';
+import { filterData } from '@pega/react-sdk-components/lib/components/template/SimpleTable/SimpleTable/simpleTableHelpers';
 import './ListView.css';
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
@@ -69,11 +69,11 @@ export default function ListView(props) {
   const defRowID = referenceType === 'Case' ? 'pyID' : 'pyGUID';
 
   /** If compositeKeys is defined, use dynamic value, else fallback to pyID or pyGUID. */
-  const rowID = compositeKeys && compositeKeys[0] ? compositeKeys[0] : defRowID;
+  const rowID = compositeKeys && compositeKeys?.length === 1 ? compositeKeys[0] : defRowID;
 
   const [arRows, setRows] = useState<Array<any>>([]);
   const [arColumns, setColumns] = useState<Array<any>>([]);
-
+  const [response, setResponse] = useState<Array<any>>([]);
   const [order, setOrder] = useState<Order>('asc');
   const [orderBy, setOrderBy] = useState<keyof any>('');
 
@@ -527,6 +527,8 @@ export default function ListView(props) {
 
     fields = updateFields(fields, myColumns);
 
+    setResponse(tableDataResults);
+
     const usingDataResults = getUsingData(tableDataResults, myColumns);
 
     // store globally, so can be searched, filtered, etc.
@@ -888,18 +890,40 @@ export default function ListView(props) {
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
+    const reqObj = {};
+    if (compositeKeys?.length > 1) {
+      const index = response.findIndex(element => element[rowID] === value);
+      const selectedRow = response[index];
+      compositeKeys.forEach(element => {
+        reqObj[element] = selectedRow[element]
+      });
+    } else {
+      reqObj[rowID] = value;
+    }
     getPConnect()
       ?.getListActions?.()
-      ?.setSelectedRows([{ [rowID]: value }]);
+      ?.setSelectedRows([reqObj]);
     setSelectedValue(value);
   };
 
   const onCheckboxClick = event => {
     const value = event?.target?.value;
     const checked = event?.target?.checked;
+    const reqObj = {};
+    if (compositeKeys?.length > 1) {
+      const index = response.findIndex(element => element[rowID] === value);
+      const selectedRow = response[index];
+      compositeKeys.forEach(element => {
+        reqObj[element] = selectedRow[element]
+      });
+      reqObj['$selected'] = checked;
+    } else {
+      reqObj[rowID] = value;
+      reqObj['$selected'] = checked;
+    }
     getPConnect()
       ?.getListActions()
-      ?.setSelectedRows([{ [rowID]: value, $selected: checked }]);
+      ?.setSelectedRows([reqObj]);
   };
 
   return (

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

@@ -0,0 +1,9 @@
+{
+  "name": "ListView",
+  "label": "Table",
+  "description": "Table Template",
+  "type": "Template",
+  "subtype": "LIST",
+  "properties": [
+  ]
+}

package/lib/{templates → template}/NarrowWide/NarrowWideDetails/NarrowWideDetails.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 // import PropTypes from "prop-types";
 // import Grid from '@material-ui/core/Grid';
-import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/DetailsFields';
+import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtension/DetailsFields';
 
 export default function NarrowWideDetails(props) {
   const { a, b, children } = props;

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

@@ -0,0 +1,9 @@
+{
+  "name": "NarrowWideDetails",
+  "label": "Details (Narrow-wide)",
+  "description": "Details (Narrow-wide) template",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": [
+  ]
+}

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

@@ -0,0 +1,9 @@
+{
+  "name": "NarrowWideForm",
+  "label": "Narrow-wide",
+  "description": "NarrowWide Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": [
+  ]
+}

package/lib/{templates → template}/NarrowWide/NarrowWidePage/NarrowWidePage.tsx

@@ -2,7 +2,7 @@ import React, { Children } from "react";
 import PropTypes from "prop-types";
 
 // import { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
-import NarrowWide from '@pega/react-sdk-components/lib/components/templates/NarrowWide/NarrowWide';
+import NarrowWide from '@pega/react-sdk-components/lib/components/template/NarrowWide/NarrowWide';
 
 /*
  * The wrapper handles knowing how to take in just children and mapping

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

@@ -0,0 +1,9 @@
+{
+  "name": "NarrowWidePage",
+  "label": "Narrow-wide",
+  "description": "Narrow-wide Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": [
+  ]
+}

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

@@ -0,0 +1,9 @@
+{
+  "name": "OneColumn",
+  "label": "One column",
+  "description": "OneColumn Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": [
+  ]
+}

package/lib/{templates → template}/OneColumn/OneColumnPage/OneColumnPage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import OneColumn from '@pega/react-sdk-components/lib/components/templates/OneColumn/OneColumn';
+import OneColumn from '@pega/react-sdk-components/lib/components/template/OneColumn/OneColumn';
 
 /*
  * The wrapper handles knowing how to take in just children

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

@@ -0,0 +1,9 @@
+{
+  "name": "OneColumnPage",
+  "label": "One column",
+  "description": "OneColumn Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": [
+  ]
+}

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

@@ -0,0 +1,9 @@
+{
+  "name": "OneColumnTab",
+  "label": "One column",
+  "description": "One column",
+  "type": "Template",
+  "subtype": "TAB",
+  "properties": [
+  ]
+}

package/lib/{templates → template}/PromotedFilters/PromotedFilters.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 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/templates/ListView';
+import ListView from '@pega/react-sdk-components/lib/components/template/ListView';
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import './PromotedFilters.css';
 
@@ -57,7 +57,7 @@ function isValidInput(input) {
 
 export default function PromotedFilters(props) {
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
-  const { getPConnect, viewName, filters, listViewProps, pageClass } = props;
+  const { getPConnect, viewName, filters, listViewProps, pageClass, parameters } = props;
   const [initTable, setInitTable] = useState(false);
   const [payload, setPayload] = useState({});
   const filtersProperties = {};
@@ -109,7 +109,7 @@ export default function PromotedFilters(props) {
       if (PCore.getFormUtils().isFormValid(transientItemID) && isValidInput(formValues)) {
         setInitTable(true);
         const Query: any = {
-          dataViewParameters: {}
+          dataViewParameters: parameters
         };
 
         if (!Utils.isEmptyObject(promotedFilters)) {
@@ -156,5 +156,6 @@ PromotedFilters.propTypes = {
   viewName: PropTypes.string.isRequired,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   listViewProps: PropTypes.objectOf(PropTypes.any).isRequired,
-  pageClass: PropTypes.string.isRequired
+  pageClass: PropTypes.string.isRequired,
+  parameters: PropTypes.object
 };

package/lib/{templates → template}/SimpleTable/SimpleTable/SimpleTable.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import FieldGroupTemplate from '@pega/react-sdk-components/lib/components/templates/FieldGroupTemplate/';
-import SimpleTableManual from '@pega/react-sdk-components/lib/components/templates/SimpleTable/SimpleTableManual';
+import FieldGroupTemplate from '@pega/react-sdk-components/lib/components/template/FieldGroupTemplate';
+import SimpleTableManual from '@pega/react-sdk-components/lib/components/template/SimpleTable/SimpleTableManual';
 
 declare const PCore: any;
 

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

@@ -0,0 +1,8 @@
+{
+  "name": "SimpleTable",
+  "description": "Datatype List Template",
+  "type": "Template",
+  "subtype": "DATAVIEW",
+  "properties": [
+  ]
+}

package/lib/{templates → template}/SimpleTable/SimpleTableManual/SimpleTableManual.tsx

@@ -8,7 +8,7 @@ import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core/styles';
-import { buildFieldsForTable, filterData } from '@pega/react-sdk-components/lib/components/templates/SimpleTable/simpleTableHelpers';
+import { buildFieldsForTable, filterData } from '@pega/react-sdk-components/lib/components/template/SimpleTable/simpleTableHelpers';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import Link from '@material-ui/core/Link';
 import { getReferenceList } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';

package/lib/{templates → template}/SimpleTable/SimpleTableSelect/SimpleTableSelect.tsx

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from "react";
-import ListView from '@pega/react-sdk-components/lib/components/templates/ListView';
-import SimpleTable from '@pega/react-sdk-components/lib/components/templates/SimpleTable/SimpleTable';
+import ListView from '@pega/react-sdk-components/lib/components/template/ListView';
+import SimpleTable from '@pega/react-sdk-components/lib/components/template/SimpleTable/SimpleTable';
 
-import PromotedFilters from '@pega/react-sdk-components/lib/components/templates/PromotedFilters';
+import PromotedFilters from '@pega/react-sdk-components/lib/components/template/PromotedFilters';
 
 const isSelfReferencedProperty = (param, referenceProp) => {
   const [, parentPropName] = param.split('.');
@@ -98,6 +98,7 @@ export default function SimpleTableSelect(props) {
         filters={filters}
         listViewProps={listViewProps}
         pageClass={pageClass}
+        parameters={parameters}
       />
     );
   }

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

@@ -0,0 +1,9 @@
+{
+  "name": "SubTabs",
+  "label": "Sub tabs",
+  "description": "Sub tabs view",
+  "type": "Template",
+  "subtype": "TAB",
+  "properties": [
+  ]
+}

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

@@ -0,0 +1,9 @@
+{
+  "name": "TwoColumn",
+  "label": "Two column",
+  "description": "TwoColumn Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": [
+  ]
+}

package/lib/{templates → template}/TwoColumn/TwoColumnPage/TwoColumnPage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import TwoColumn from '@pega/react-sdk-components/lib/components/templates/TwoColumn/TwoColumn';
+import TwoColumn from '@pega/react-sdk-components/lib/components/template/TwoColumn/TwoColumn';
 
 /*
  * The wrapper handles knowing how to take in just children

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

@@ -0,0 +1,9 @@
+{
+  "name": "TwoColumnPage",
+  "label": "Two column",
+  "description": "TwoColumn Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": [
+  ]
+}

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

@@ -0,0 +1,9 @@
+{
+  "name": "TwoColumnTab",
+  "label": "Two column",
+  "description": "Two column",
+  "type": "Template",
+  "subtype": "TAB",
+  "properties": [
+  ]
+}

package/lib/{templates → template}/WideNarrow/WideNarrowDetails/WideNarrowDetails.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 // import PropTypes from "prop-types";
 // import Grid from '@material-ui/core/Grid';
-import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/DetailsFields';
+import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtension/DetailsFields';
 
 export default function WideNarrowDetails(props) {
   const { a, b, children } = props;

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

@@ -0,0 +1,9 @@
+{
+  "name": "WideNarrowDetails",
+  "label": "Details (Wide-narrow)",
+  "description": "Details (Wide-narrow) template",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": [
+  ]
+}

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

@@ -0,0 +1,9 @@
+{
+  "name": "WideNarrowForm",
+  "label": "Wide-narrow",
+  "description": "WideNarrow Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": [
+  ]
+}

package/lib/{templates → template}/WideNarrow/WideNarrowPage/WideNarrowPage.tsx

@@ -2,7 +2,7 @@ import React, { Children } from "react";
 import PropTypes from "prop-types";
 
 // import { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
-import WideNarrow from '@pega/react-sdk-components/lib/components/templates/WideNarrow/WideNarrow';
+import WideNarrow from '@pega/react-sdk-components/lib/components/template/WideNarrow/WideNarrow';
 
 /*
  * The wrapper handles knowing how to take in just children and mapping

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

@@ -0,0 +1,9 @@
+{
+  "name": "WideNarrowPage",
+  "label": "Wide-narrow",
+  "description": "Wide-narrow Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": [
+  ]
+}