@pega/react-sdk-overrides 0.23.12 → 0.23.13

package/lib/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -0,0 +1,202 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import isDeepEqual from 'fast-deep-equal/react';
+
+import Grid from '@material-ui/core/Grid';
+import TextField from '@material-ui/core/TextField';
+import Operator from '@pega/react-sdk-components/lib/components/designSystemExtension/Operator';
+
+import './CaseSummaryFields.css';
+
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
+
+export default function CaseSummaryFields(props) {
+  const { status, showStatus, theFields } = props;
+
+  const [theFieldsToRender, setFieldsToRender] = useState([]);
+  const [theFieldsAsGridItems, setFieldsAsGridItems] = useState<Array<any>>([]);
+
+  function getFieldValue(field: any): any {
+    const fieldTypeLower = field.type.toLowerCase();
+
+    if (field.config.value === null || field.config.value === '') {
+      // Special handling for missing value
+      // eslint-disable-next-line sonarjs/no-small-switch
+      switch (fieldTypeLower) {
+        case 'caseoperator':
+          return <Operator caseOpConfig={field.config} />;
+          break;
+
+        default:
+          return (
+            <TextField
+              value='---'
+              label={field.config.label}
+              InputProps={{
+                readOnly: true,
+                disableUnderline: true
+              }}
+            />
+          );
+      }
+    }
+
+    switch (fieldTypeLower) {
+      case 'textinput':
+      case 'decimal':
+      case 'integer':
+      case 'dropdown':
+        return (
+          <TextField
+            value={field.config.value}
+            label={field.config.label}
+            InputProps={{
+              readOnly: true,
+              disableUnderline: true
+            }}
+          />
+        );
+
+      case 'checkbox': {
+        const { caption, label, value, trueLabel, falseLabel } = field.config;
+        const fieldLabel = label || caption;
+        const fieldValue = value ? trueLabel : falseLabel;
+
+        return (
+          <TextField
+            value={fieldValue}
+            label={fieldLabel}
+            InputProps={{
+              readOnly: true,
+              disableUnderline: true
+            }}
+          />
+        );
+      }
+
+      case 'status':
+        return (
+          <TextField
+            className='psdk-csf-status-style'
+            value={field.config.value}
+            label={field.config.label}
+            InputProps={{
+              readOnly: true,
+              disableUnderline: true
+            }}
+          />
+        );
+
+      case 'phone': {
+        const displayPhone = field.config.value !== '' ? field.config.value : '---';
+        return (
+          <a href={`tel:${displayPhone}`}>
+            <TextField
+              value={field.config.value}
+              label={field.config.label}
+              InputProps={{
+                readOnly: true,
+                inputProps: { style: { cursor: 'pointer' }, disableUnderline: true }
+              }}
+            />
+          </a>
+        );
+      }
+
+      case 'email': {
+        const displayEmail = format(field.config.value, field.type);
+        return (
+          <a href={`mailto:${displayEmail}`}>
+            <TextField
+              value={field.config.value}
+              label={field.config.label}
+              InputProps={{
+                readOnly: true,
+                disableUnderline: true,
+                inputProps: { style: { cursor: 'pointer' } }
+              }}
+            />
+          </a>
+        );
+      }
+
+      case 'date':
+      case 'datetime':
+      case 'currency':
+      case 'boolean':
+        return (
+          <TextField
+            value={format(field.config.value, field.type)}
+            label={field.config.label}
+            InputProps={{
+              readOnly: true,
+              disableUnderline: true
+            }}
+          />
+        );
+
+      case 'caseoperator':
+        return <Operator caseOpConfig={field.config} />;
+        break;
+
+      default:
+        return (
+          <span>
+            {field.type.toLowerCase()} {field.config.value}
+          </span>
+        );
+    }
+  }
+
+  // Whenever theFieldsToRender changes, update theFieldsAsGridItems that's used during render
+  useEffect(() => {
+    const arGridItems = theFieldsToRender.map((field: any) => {
+      // display the field when either visibility property doesn't exist or is true(if exists)
+      if (field.config.visibility === undefined || field.config.visibility === true) {
+        return (
+          <Grid item xs={6} key={field.config.label}>
+            {getFieldValue(field)}
+          </Grid>
+        );
+      }
+
+      return null;
+    });
+    setFieldsAsGridItems(arGridItems);
+  }, [theFieldsToRender]);
+
+  const theFieldsModifiable = theFields;
+
+  // Special Case: if showStatus is true, splice the status value to be 2nd in theFields
+  //  if it's not already there
+  if (showStatus && theFields?.[1].type !== 'status') {
+    const oStatus = { type: 'status', config: { value: status, label: 'Status' } };
+
+    const count = theFieldsModifiable.length;
+    if (count < 2) {
+      theFieldsModifiable.push(oStatus);
+    } else {
+      theFieldsModifiable.splice(1, 0, oStatus);
+    }
+  }
+
+  // At this point, we know what fields we want to render...
+  //  So, update our state if it's changed
+  if (!isDeepEqual(theFieldsToRender, theFieldsModifiable)) {
+    setFieldsToRender(theFieldsModifiable);
+  }
+
+  return (
+    <React.Fragment>
+      <Grid container className='psdk-case-summary-fields'>
+        {theFieldsAsGridItems}
+      </Grid>
+    </React.Fragment>
+  );
+}
+
+CaseSummaryFields.propTypes = {
+  status: PropTypes.string,
+  showStatus: PropTypes.bool,
+  theFields: PropTypes.arrayOf(PropTypes.object)
+};

package/lib/{designSystemExtensions → designSystemExtension}/DetailsFields/DetailsFields.tsx

@@ -42,7 +42,7 @@ export default function DetailsFields(props) {
     const theCompType = thePConn.getComponentName().toLowerCase();
     const { label } = thePConn.getConfigProps();
     const configObj = thePConn?.getReferencedView();
-    configObj.config.readOnly = theCompType === 'reference';
+    configObj.config.readOnly = true;
     configObj.config.displayMode = 'LABELS_LEFT';
     const propToUse = { ...thePConn.getInheritedProps() };
     configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;

package/lib/{designSystemExtensions → designSystemExtension}/Operator/Operator.tsx

@@ -166,6 +166,7 @@ export default function Operator(props) {
         onClick={showOperatorDetails}
         InputProps={{
           readOnly: true,
+          disableUnderline: true,
           inputProps: {style: {cursor: 'pointer'}}
         }}
       />

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

@@ -2,10 +2,11 @@ import React, { useEffect, useState } from 'react';
 import { TextField } from '@material-ui/core';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
 import isDeepEqual from 'fast-deep-equal/react';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 interface IOption {
   key: string;
@@ -64,7 +65,6 @@ export default function AutoComplete(props) {
   const actionsApi = thePConn.getActionsApi();
   const propName = thePConn.getStateProps().value;
 
-
   if (!isDeepEqual(datasource, theDatasource)) {
     // inbound datasource is different, so update theDatasource (to trigger useEffect)
     setDatasource(datasource);
@@ -72,7 +72,7 @@ export default function AutoComplete(props) {
 
   const flattenParameters = (params = {}) => {
     const flatParams = {};
-    Object.keys(params).forEach((key) => {
+    Object.keys(params).forEach(key => {
       const { name, value: theVal } = params[key];
       flatParams[name] = theVal;
     });
@@ -132,6 +132,13 @@ export default function AutoComplete(props) {
     }
   }, []);
 
+  if (displayMode === 'LABELS_LEFT') {
+    const field = {
+      [label]: value
+    };
+    return <FieldValueList item={field} />;
+  }
+
   if (value) {
     const index = options?.findIndex(element => element.key === value);
     if (index > -1) {
@@ -142,7 +149,7 @@ export default function AutoComplete(props) {
   }
 
   const handleChange = (event: object, newValue) => {
-    const val = newValue ? newValue.key : '' ;
+    const val = newValue ? newValue.key : '';
     handleEvent(actionsApi, 'changeNblur', propName, val);
   };
 

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

@@ -7,17 +7,20 @@ import {
   FormHelperText
 } from '@material-ui/core';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function CheckboxComponent(props) {
   const {
     getPConnect,
+    label,
     value = false,
     readOnly,
     testId,
     required,
     status,
     helperText,
-    validatemessage
+    validatemessage,
+    displayMode
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -33,6 +36,13 @@ export default function CheckboxComponent(props) {
     setChecked(value);
   }, [value]);
 
+  if (displayMode === 'LABELS_LEFT') {
+    const field = {
+      [label]: value
+    };
+    return <FieldValueList item={field} />;
+  }
+
   const handleChange = event => {
     handleEvent(actionsApi, 'changeNblur', propName, event.target.checked);
   };

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 // import { TextField } from "@material-ui/core";
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 // Using control from: https://github.com/unicef/material-ui-currency-textfield
 

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { KeyboardDatePicker } from '@material-ui/pickers';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function Date(props) {
   const {

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { KeyboardDateTimePicker } from '@material-ui/pickers';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function DateTime(props) {
   const {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function Decimal(props) {
   const {

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

@@ -3,6 +3,7 @@ import { TextField } from '@material-ui/core';
 import MenuItem from '@material-ui/core/MenuItem';
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 interface IOption {
   key: string;
@@ -22,7 +23,8 @@ export default function Dropdown(props) {
     status,
     readOnly,
     testId,
-    helperText
+    helperText,
+    displayMode
   } = props;
   const [options, setOptions] = useState<Array<IOption>>([]);
   const helperTextToDisplay = validatemessage || helperText;
@@ -39,6 +41,13 @@ export default function Dropdown(props) {
 
   let readOnlyProp = {};
 
+  if (displayMode === 'LABELS_LEFT') {
+    const field = {
+      [label]: value
+    };
+    return <FieldValueList item={field} />;
+  }
+
   if (readOnly) {
     readOnlyProp = { readOnly: true };
   }

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { TextField, InputAdornment } from '@material-ui/core';
 import MailOutlineIcon from '@material-ui/icons/MailOutline';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function Email(props) {
   const {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function Integer(props) {
   const {

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { TextField } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 // Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview
 const useStyles = makeStyles((/* theme */) => ({

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import MuiPhoneNumber from 'material-ui-phone-number';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function Phone(props) {
   const {

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

@@ -10,6 +10,7 @@ import {
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function RadioButtons(props) {
   const {
@@ -21,7 +22,8 @@ export default function RadioButtons(props) {
     helperText,
     status,
     required,
-    inline
+    inline,
+    displayMode
   } = props;
   const [theSelectedButton, setSelectedButton] = useState(value);
 
@@ -40,6 +42,13 @@ export default function RadioButtons(props) {
     setSelectedButton(value);
   }, [value]);
 
+  if (displayMode === 'LABELS_LEFT') {
+    const field = {
+      [label]: value
+    };
+    return <FieldValueList item={field} />;
+  }
+
   const handleChange = event => {
     handleEvent(actionsApi, 'changeNblur', propName, event.target.value);
   };
@@ -51,11 +60,12 @@ export default function RadioButtons(props) {
   return (
     <FormControl error={status === 'error'} required={required}>
       <FormLabel component='legend'>{label}</FormLabel>
-      <RadioGroup 
-        value={theSelectedButton} 
-        onChange={handleChange} 
-        onBlur={!readOnly ? handleBlur : undefined} 
-        row={inline}>
+      <RadioGroup
+        value={theSelectedButton}
+        onChange={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
+        row={inline}
+      >
         {theOptions.map(theOption => {
           return (
             <FormControlLabel

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function TextArea(props) {
   const {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function TextInput(props) {
   const {

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { KeyboardTimePicker } from '@material-ui/pickers';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
 import dayjs from 'dayjs';
 import AccessTimeIcon from '@material-ui/icons/AccessTime';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function Time(props) {
   const {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 // NOTE: that we had to change the name from URL to URLComponent
 //  Otherwise, we were getting all kinds of weird errors when we

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/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/widgets/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/{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/{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/{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/{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/{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;