@pega/react-sdk-components 0.24.4 → 0.25.1

package/lib/components/template/DataReference/SearchForm.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Tab, Tabs, Typography, RadioGroup, FormControlLabel, Radio, Select, MenuItem, Grid, Box } from '@mui/material';
+import { TabContext, TabPanel } from '@mui/lab';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
+import useGetTabsCount from '../../../hooks/useGetTabsCount';
+import { searchtabsClick, getActiveTabId, getFirstVisibleTabId } from '../../template/SubTabs/tabUtils';
+import { getFieldMeta } from './utils';
+const publishEvent = ({ clearSelections, viewName }) => {
+    const payload = {};
+    if (clearSelections) {
+        payload.clearSelections = clearSelections;
+    }
+    if (viewName) {
+        payload.viewName = viewName;
+    }
+    PCore.getPubSubUtils().publish('update-advanced-search-selections', payload);
+};
+const checkIfSelectionsExist = getPConnect => {
+    const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+    const { selectionMode, readonlyContextList, contextPage, contextClass, name } = getPConnect().getConfigProps();
+    const isMultiSelectMode = selectionMode === MULTI;
+    const dataRelationshipContext = contextClass && name ? name : null;
+    const { compositeKeys } = getFieldMeta(getPConnect, dataRelationshipContext);
+    let selectionsExist = false;
+    if (isMultiSelectMode) {
+        selectionsExist = readonlyContextList?.length > 0;
+    }
+    else if (contextPage) {
+        selectionsExist = compositeKeys?.filter(key => !['', null, undefined].includes(contextPage[key]))?.length > 0;
+    }
+    return selectionsExist;
+};
+const SearchForm = props => {
+    const { children, getPConnect, searchSelectCacheKey } = props;
+    const deferLoadedTabs = children[2];
+    const cache = PCore.getNavigationUtils().getComponentCache(searchSelectCacheKey) ?? {};
+    const { selectedCategory } = cache;
+    const firstTabId = getFirstVisibleTabId(deferLoadedTabs, selectedCategory);
+    const [open, setOpen] = useState(false);
+    const [currentTabId, setCurrentTabId] = useState(getActiveTabId(deferLoadedTabs.props.getPConnect().getChildren(), firstTabId));
+    const [nextTabId, setNextTabId] = useState(null); // State to store the next tab ID
+    const { getLocaleValue } = PCore.getLocaleUtils();
+    // @ts-ignore
+    const { data: tabData } = useGetTabsCount(deferLoadedTabs, 'searchForm', currentTabId);
+    const handleTabClick = event => {
+        const tabId = event.target.value;
+        const viewName = tabData
+            .find(tab => tab.id === currentTabId)
+            .getPConnect()
+            .getConfigProps().name;
+        if (checkIfSelectionsExist(getPConnect)) {
+            setNextTabId(tabId); // Store the next tab ID
+            setOpen(true); // Open the dialog
+        }
+        else {
+            // @ts-ignore
+            publishEvent({ viewName, tabId });
+            searchtabsClick(tabId, tabData, currentTabId, setCurrentTabId);
+        }
+    };
+    const clearSelectionAndSwitchTab = () => {
+        const viewName = tabData
+            .find(tab => tab.id === currentTabId)
+            .getPConnect()
+            .getConfigProps().name;
+        publishEvent({ clearSelections: true, viewName });
+        searchtabsClick(nextTabId, tabData, currentTabId, setCurrentTabId);
+        setOpen(false);
+    };
+    const onDialogClose = () => {
+        setOpen(false); // Close the dialog
+    };
+    const tabItems = tabData?.filter(tab => tab.visibility()) || [];
+    const propsToUse = { ...getPConnect().getInheritedProps() };
+    let searchCategoriesComp;
+    if (tabItems.length > 3) {
+        searchCategoriesComp = (_jsx(Grid, { container: true, spacing: 2, children: _jsx(Select, { value: currentTabId, onChange: handleTabClick, fullWidth: true, children: tabItems.map(tab => (_jsx(MenuItem, { value: tab.id, children: tab.name }, tab.id))) }) }));
+    }
+    else if (tabItems.length > 1) {
+        searchCategoriesComp = (_jsx(RadioGroup, { row: true, value: currentTabId, onChange: handleTabClick, children: tabItems.map(tab => (_jsx(FormControlLabel, { value: tab.id, control: _jsx(Radio, {}), label: tab.name }, tab.id))) }));
+    }
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 2, children: [_jsx(Typography, { variant: 'h5', children: propsToUse.label }), searchCategoriesComp, _jsxs(TabContext, { value: currentTabId, children: [_jsx(Tabs, { style: { display: 'none' }, value: currentTabId, onChange: (e, newValue) => setCurrentTabId(newValue), children: tabItems.map(tab => (_jsx(Tab, { label: tab.name, value: tab.id }, tab.id))) }), tabItems.map(tab => (_jsx(TabPanel, { style: { padding: '0px' }, value: tab.id, children: _jsx("div", { className: 'search-form', children: tab.content }) }, tab.id)))] }), _jsxs(Dialog, { open: open, onClose: onDialogClose, children: [_jsx(DialogTitle, { children: getLocaleValue('Discard selections?', 'DataReference') }), _jsx(DialogContent, { children: _jsx("div", { children: getLocaleValue('When changing search categories, any previous selections will be lost.', 'DataReference') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: onDialogClose, variant: 'outlined', color: 'primary', children: getLocaleValue('Go back', 'ModalContainer') }), _jsx(Button, { onClick: clearSelectionAndSwitchTab, variant: 'contained', color: 'primary', children: getLocaleValue('Discard', 'ModalContainer') })] })] })] }));
+};
+export default SearchForm;
+//# sourceMappingURL=SearchForm.js.map

package/lib/components/template/DataReference/SearchForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchForm.js","sourceRoot":"","sources":["../../../../src/components/template/DataReference/SearchForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { Tab, Tabs, Typography, RadioGroup, FormControlLabel, Radio, Select, MenuItem, Grid, Box } from '@mui/material';\nimport { TabContext, TabPanel } from '@mui/lab';\nimport { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\n\nimport useGetTabsCount from '../../../hooks/useGetTabsCount';\nimport { searchtabsClick, getActiveTabId, getFirstVisibleTabId } from '../../template/SubTabs/tabUtils';\nimport { getFieldMeta } from './utils';\n\nconst publishEvent = ({ clearSelections, viewName }) => {\n  const payload: any = {};\n\n  if (clearSelections) {\n    payload.clearSelections = clearSelections;\n  }\n\n  if (viewName) {\n    payload.viewName = viewName;\n  }\n\n  PCore.getPubSubUtils().publish('update-advanced-search-selections', payload);\n};\n\nconst checkIfSelectionsExist = getPConnect => {\n  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;\n  const { selectionMode, readonlyContextList, contextPage, contextClass, name } = getPConnect().getConfigProps();\n  const isMultiSelectMode = selectionMode === MULTI;\n\n  const dataRelationshipContext = contextClass && name ? name : null;\n\n  const { compositeKeys } = getFieldMeta(getPConnect, dataRelationshipContext);\n\n  let selectionsExist = false;\n  if (isMultiSelectMode) {\n    selectionsExist = readonlyContextList?.length > 0;\n  } else if (contextPage) {\n    selectionsExist = compositeKeys?.filter(key => !['', null, undefined].includes(contextPage[key]))?.length > 0;\n  }\n  return selectionsExist;\n};\n\nconst SearchForm = props => {\n  const { children, getPConnect, searchSelectCacheKey } = props;\n\n  const deferLoadedTabs = children[2];\n  const cache: any = PCore.getNavigationUtils().getComponentCache(searchSelectCacheKey) ?? {};\n  const { selectedCategory } = cache;\n  const firstTabId = getFirstVisibleTabId(deferLoadedTabs, selectedCategory);\n  const [open, setOpen] = useState(false);\n  const [currentTabId, setCurrentTabId] = useState(getActiveTabId(deferLoadedTabs.props.getPConnect().getChildren(), firstTabId));\n  const [nextTabId, setNextTabId] = useState(null); // State to store the next tab ID\n  const { getLocaleValue } = PCore.getLocaleUtils();\n\n  // @ts-ignore\n  const { data: tabData } = useGetTabsCount(deferLoadedTabs, 'searchForm', currentTabId);\n\n  const handleTabClick = event => {\n    const tabId: any = event.target.value;\n    const viewName = tabData\n      .find(tab => tab.id === currentTabId)\n      .getPConnect()\n      .getConfigProps().name;\n\n    if (checkIfSelectionsExist(getPConnect)) {\n      setNextTabId(tabId); // Store the next tab ID\n      setOpen(true); // Open the dialog\n    } else {\n      // @ts-ignore\n      publishEvent({ viewName, tabId });\n      searchtabsClick(tabId, tabData, currentTabId, setCurrentTabId);\n    }\n  };\n\n  const clearSelectionAndSwitchTab = () => {\n    const viewName = tabData\n      .find(tab => tab.id === currentTabId)\n      .getPConnect()\n      .getConfigProps().name;\n    publishEvent({ clearSelections: true, viewName });\n    searchtabsClick(nextTabId, tabData, currentTabId, setCurrentTabId);\n    setOpen(false);\n  };\n\n  const onDialogClose = () => {\n    setOpen(false); // Close the dialog\n  };\n\n  const tabItems = tabData?.filter(tab => tab.visibility()) || [];\n  const propsToUse = { ...getPConnect().getInheritedProps() };\n\n  let searchCategoriesComp;\n  if (tabItems.length > 3) {\n    searchCategoriesComp = (\n      <Grid container spacing={2}>\n        <Select value={currentTabId} onChange={handleTabClick} fullWidth>\n          {tabItems.map(tab => (\n            <MenuItem key={tab.id} value={tab.id}>\n              {tab.name}\n            </MenuItem>\n          ))}\n        </Select>\n      </Grid>\n    );\n  } else if (tabItems.length > 1) {\n    searchCategoriesComp = (\n      <RadioGroup row value={currentTabId} onChange={handleTabClick}>\n        {tabItems.map(tab => (\n          <FormControlLabel key={tab.id} value={tab.id} control={<Radio />} label={tab.name} />\n        ))}\n      </RadioGroup>\n    );\n  }\n\n  return (\n    <Box display='flex' flexDirection='column' gap={2}>\n      <Typography variant='h5'>{propsToUse.label}</Typography>\n      {searchCategoriesComp}\n      <TabContext value={currentTabId}>\n        <Tabs style={{ display: 'none' }} value={currentTabId} onChange={(e, newValue) => setCurrentTabId(newValue)}>\n          {tabItems.map(tab => (\n            <Tab key={tab.id} label={tab.name} value={tab.id} />\n          ))}\n        </Tabs>\n        {tabItems.map(tab => (\n          <TabPanel style={{ padding: '0px' }} key={tab.id} value={tab.id}>\n            <div className='search-form'>{tab.content}</div>\n          </TabPanel>\n        ))}\n      </TabContext>\n      <Dialog open={open} onClose={onDialogClose}>\n        <DialogTitle>{getLocaleValue('Discard selections?', 'DataReference')}</DialogTitle>\n        <DialogContent>\n          <div>{getLocaleValue('When changing search categories, any previous selections will be lost.', 'DataReference')}</div>\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={onDialogClose} variant='outlined' color='primary'>\n            {getLocaleValue('Go back', 'ModalContainer')}\n          </Button>\n          <Button onClick={clearSelectionAndSwitchTab} variant='contained' color='primary'>\n            {getLocaleValue('Discard', 'ModalContainer')}\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </Box>\n  );\n};\n\nexport default SearchForm;\n"]}

package/lib/components/template/DataReference/utils.d.ts

@@ -0,0 +1,15 @@
+export function getFieldMeta(getPConnect: any, dataRelationshipContext: any): {
+    compositeKeys: any[];
+    fieldMetadata: any;
+};
+export function getFirstChildConfig({ firstChildMeta, getPConnect, rawViewMetadata, contextClass, dataReferenceConfigToChild, isCreateNewReferenceEnabled, disableStartingFieldsForReference, pyID }: {
+    firstChildMeta: any;
+    getPConnect: any;
+    rawViewMetadata: any;
+    contextClass: any;
+    dataReferenceConfigToChild: any;
+    isCreateNewReferenceEnabled: any;
+    disableStartingFieldsForReference: any;
+    pyID: any;
+}): any;
+//# sourceMappingURL=utils.d.ts.map

package/lib/components/template/DataReference/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/template/DataReference/utils.js"],"names":[],"mappings":"AAMA;;;EAyBC;AAkBM;;;;;;;;;QAwCN"}

package/lib/components/template/DataReference/utils.js

@@ -0,0 +1,75 @@
+const isSelfReferencedProperty = (param, referenceProp) => {
+    const [, parentPropName] = param.split('.');
+    const referencePropParent = referenceProp?.split('.').pop();
+    return parentPropName === referencePropParent;
+};
+export function getFieldMeta(getPConnect, dataRelationshipContext) {
+    const pConn = getPConnect();
+    const { selectionMode, selectionList } = pConn.getConfigProps();
+    const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+    const isMultiSelectMode = selectionMode === MULTI;
+    const pageReference = pConn.getPageReference();
+    let referenceProp = isMultiSelectMode ? selectionList.substring(1) : pageReference.substring(pageReference.lastIndexOf('.') + 1);
+    // Replace here to use the context name instead
+    let contextPageReference = null;
+    if (dataRelationshipContext !== null && selectionMode === 'single') {
+        referenceProp = dataRelationshipContext;
+        contextPageReference = pageReference.concat('.').concat(referenceProp);
+    }
+    const fieldMetadata = (isMultiSelectMode ? pConn.getFieldMetadata(`${referenceProp}`) : pConn.getCurrentPageFieldMetadata(contextPageReference)) ?? {};
+    const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+    const compositeKeys = [];
+    Object.values(fieldParameters).forEach(param => {
+        if (isSelfReferencedProperty(param, referenceProp))
+            compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+    });
+    return { compositeKeys, fieldMetadata };
+}
+/**
+ * returns array of self-referenced properties of the datasource
+ * Ex: returns ["@P .DataRef.pyGUID", "@P .DataRef.customerID"]
+ */
+const getCompositeKeys = (pConnect, property) => {
+    const fieldMetadata = pConnect.getFieldMetadata(property) || {};
+    const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+    const compositeKeys = [];
+    Object.values(fieldParameters).forEach(param => {
+        if (isSelfReferencedProperty(param, property)) {
+            compositeKeys.push(param);
+        }
+    });
+    return compositeKeys;
+};
+export const getFirstChildConfig = ({ firstChildMeta, getPConnect, rawViewMetadata, contextClass, dataReferenceConfigToChild, isCreateNewReferenceEnabled, disableStartingFieldsForReference, pyID }) => {
+    const config = {
+        ...firstChildMeta.config,
+        ...dataReferenceConfigToChild
+    };
+    const compositeKeys = getCompositeKeys(getPConnect(), dataReferenceConfigToChild?.dataRelationshipContext);
+    return {
+        ...config,
+        viewName: getPConnect().getCurrentView(),
+        referenceList: config.referenceList ?? rawViewMetadata.config.referenceList,
+        parameters: rawViewMetadata.config.parameters,
+        localeReference: rawViewMetadata.config.localeReference,
+        contextClass: config.contextClass || rawViewMetadata?.config?.contextClass || rawViewMetadata?.config?.targetObjectClass,
+        allowAddingNewRecords: firstChildMeta.type === 'SimpleTableSelect' && isCreateNewReferenceEnabled ? true : undefined,
+        actions: firstChildMeta.type === 'SimpleTableSelect' &&
+            isCreateNewReferenceEnabled && [
+            {
+                action: 'ADD_CASE',
+                config: {
+                    label: '@L Add',
+                    caseType: contextClass,
+                    inputFields: disableStartingFieldsForReference
+                        ? {}
+                        : {
+                            [`.pyAddCaseContextPage.${pyID}`]: `@P .${pyID}`
+                        }
+                }
+            }
+        ],
+        compositeKeys
+    };
+};
+//# sourceMappingURL=utils.js.map

package/lib/components/template/DataReference/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/template/DataReference/utils.js"],"names":[],"mappings":"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","sourcesContent":["const isSelfReferencedProperty = (param, referenceProp) => {\n  const [, parentPropName] = param.split('.');\n  const referencePropParent = referenceProp?.split('.').pop();\n  return parentPropName === referencePropParent;\n};\n\nexport function getFieldMeta(getPConnect, dataRelationshipContext) {\n  const pConn = getPConnect();\n  const { selectionMode, selectionList } = pConn.getConfigProps();\n  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;\n\n  const isMultiSelectMode = selectionMode === MULTI;\n\n  const pageReference = pConn.getPageReference();\n  let referenceProp = isMultiSelectMode ? selectionList.substring(1) : pageReference.substring(pageReference.lastIndexOf('.') + 1);\n  // Replace here to use the context name instead\n  let contextPageReference = null;\n  if (dataRelationshipContext !== null && selectionMode === 'single') {\n    referenceProp = dataRelationshipContext;\n    contextPageReference = pageReference.concat('.').concat(referenceProp);\n  }\n\n  const fieldMetadata =\n    (isMultiSelectMode ? pConn.getFieldMetadata(`${referenceProp}`) : pConn.getCurrentPageFieldMetadata(contextPageReference)) ?? {};\n  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;\n  const compositeKeys = [];\n  Object.values(fieldParameters).forEach(param => {\n    if (isSelfReferencedProperty(param, referenceProp)) compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));\n  });\n\n  return { compositeKeys, fieldMetadata };\n}\n\n/**\n * returns array of self-referenced properties of the datasource\n * Ex: returns [\"@P .DataRef.pyGUID\", \"@P .DataRef.customerID\"]\n */\nconst getCompositeKeys = (pConnect, property) => {\n  const fieldMetadata = pConnect.getFieldMetadata(property) || {};\n  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;\n  const compositeKeys = [];\n  Object.values(fieldParameters).forEach(param => {\n    if (isSelfReferencedProperty(param, property)) {\n      compositeKeys.push(param);\n    }\n  });\n  return compositeKeys;\n};\n\nexport const getFirstChildConfig = ({\n  firstChildMeta,\n  getPConnect,\n  rawViewMetadata,\n  contextClass,\n  dataReferenceConfigToChild,\n  isCreateNewReferenceEnabled,\n  disableStartingFieldsForReference,\n  pyID\n}) => {\n  const config = {\n    ...firstChildMeta.config,\n    ...dataReferenceConfigToChild\n  };\n  const compositeKeys = getCompositeKeys(getPConnect(), dataReferenceConfigToChild?.dataRelationshipContext);\n  return {\n    ...config,\n    viewName: getPConnect().getCurrentView(),\n    referenceList: config.referenceList ?? rawViewMetadata.config.referenceList,\n    parameters: rawViewMetadata.config.parameters,\n    localeReference: rawViewMetadata.config.localeReference,\n    contextClass: config.contextClass || rawViewMetadata?.config?.contextClass || rawViewMetadata?.config?.targetObjectClass,\n    allowAddingNewRecords: firstChildMeta.type === 'SimpleTableSelect' && isCreateNewReferenceEnabled ? true : undefined,\n    actions: firstChildMeta.type === 'SimpleTableSelect' &&\n      isCreateNewReferenceEnabled && [\n        {\n          action: 'ADD_CASE',\n          config: {\n            label: '@L Add',\n            caseType: contextClass,\n            inputFields: disableStartingFieldsForReference\n              ? {}\n              : {\n                  [`.pyAddCaseContextPage.${pyID}`]: `@P .${pyID}`\n                }\n          }\n        }\n      ],\n    compositeKeys\n  };\n};\n"]}

package/lib/components/template/DefaultForm/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/DefaultForm/utils/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,EAAE,GAO7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,qBAgBhC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/DefaultForm/utils/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,EAAE,GAO7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,qBAgBhC,CAAC"}

package/lib/components/template/DefaultForm/utils/index.js

@@ -1,4 +1,3 @@
-import { v4 as uuidv4 } from 'uuid';
 export const mapStateToProps = (_, ownProps) => {
     const { getPConnect } = ownProps;
     return {
@@ -18,6 +17,6 @@ export const getKeyForMappedField = field => {
     if (pConnect?.meta) {
         return JSON.stringify(pConnect.meta);
     }
-    return uuidv4();
+    return crypto.randomUUID();
 };
 //# sourceMappingURL=index.js.map

package/lib/components/template/DefaultForm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/template/DefaultForm/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAEpC,MAAM,CAAC,MAAM,eAAe,GAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE;IAClD,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,CAAC;IAEjC,OAAO;QACL,UAAU,EAAE,WAAW,EAAE,CAAC,qBAAqB,EAAE;QACjD,WAAW;KACZ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC,EAAE;IAC1C,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,OAAO,KAAK;aACT,GAAG,CAAC,IAAI,CAAC,EAAE;YACV,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC,CAAC;KACf;IAED,MAAM,QAAQ,GAAG,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC;IAExC,IAAI,QAAQ,EAAE,IAAI,EAAE;QAClB,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;KACtC;IAED,OAAO,MAAM,EAAE,CAAC;AAClB,CAAC,CAAC","sourcesContent":["import { v4 as uuidv4 } from 'uuid';\n\nexport const mapStateToProps: any = (_, ownProps) => {\n  const { getPConnect } = ownProps;\n\n  return {\n    visibility: getPConnect().getComputedVisibility(),\n    getPConnect\n  };\n};\n\nexport const getKeyForMappedField = field => {\n  if (Array.isArray(field)) {\n    return field\n      .map(item => {\n        return getKeyForMappedField(item);\n      })\n      .join('__');\n  }\n\n  const pConnect = field?.getPConnect?.();\n\n  if (pConnect?.meta) {\n    return JSON.stringify(pConnect.meta);\n  }\n\n  return uuidv4();\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/template/DefaultForm/utils/index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE;IAClD,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,CAAC;IAEjC,OAAO;QACL,UAAU,EAAE,WAAW,EAAE,CAAC,qBAAqB,EAAE;QACjD,WAAW;KACZ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC,EAAE;IAC1C,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,OAAO,KAAK;aACT,GAAG,CAAC,IAAI,CAAC,EAAE;YACV,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC,CAAC;KACf;IAED,MAAM,QAAQ,GAAG,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC;IAExC,IAAI,QAAQ,EAAE,IAAI,EAAE;QAClB,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;KACtC;IAED,OAAO,MAAM,CAAC,UAAU,EAAE,CAAC;AAC7B,CAAC,CAAC","sourcesContent":["export const mapStateToProps: any = (_, ownProps) => {\n  const { getPConnect } = ownProps;\n\n  return {\n    visibility: getPConnect().getComputedVisibility(),\n    getPConnect\n  };\n};\n\nexport const getKeyForMappedField = field => {\n  if (Array.isArray(field)) {\n    return field\n      .map(item => {\n        return getKeyForMappedField(item);\n      })\n      .join('__');\n  }\n\n  const pConnect = field?.getPConnect?.();\n\n  if (pConnect?.meta) {\n    return JSON.stringify(pConnect.meta);\n  }\n\n  return crypto.randomUUID();\n};\n"]}

package/lib/components/template/Details/Details/Details.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 import createPConnectComponent from '../../../../bridge/react_pconnect';
 import { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';
 export default function Details(props) {
@@ -11,7 +11,7 @@ export default function Details(props) {
     const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
     // Set display mode prop and re-create the children so this part of the dom tree renders
     // in a readonly (display) mode instead of a editable
-    getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+    getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
     getPConnect().setInheritedProp('readOnly', true);
     const children = getPConnect().getChildren().map((configObject, index) => createElement(createPConnectComponent(), {
         ...configObject,

package/lib/components/template/Details/Details/Details.js.map

@@ -1 +1 @@
-{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../../../src/components/template/Details/Details/Details.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAE1C,OAAO,uBAAuB,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AAUnF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAmB;IACjD,8EAA8E;IAC9E,MAAM,UAAU,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAErD,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC;IAErE,sEAAsE;IACtE,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAE9E,wFAAwF;IACxF,qDAAqD;IACrD,WAAW,EAAE,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;IAC7D,WAAW,EAAE,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAI,WAAW,EAAE,CAAC,WAAW,EAAY,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,CAClF,aAAa,CAAC,uBAAuB,EAAE,EAAE;QACvC,GAAG,YAAY;QACf,oDAAoD;QACpD,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE;KACtB,CAAC,CACH,CAAC;IAEF,4GAA4G;IAC5G,IAAI,kBAAkB,GAAG,EAAE,CAAC;IAC5B,IAAI,mBAAmB,EAAE;QACvB,MAAM,EAAE,eAAe,GAAG,EAAE,EAAE,GAAI,WAAW,EAAE,CAAC,cAAc,EAAU,CAAC,MAAM,CAAC;QAChF,kBAAkB,GAAG,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YAC/C,KAAK,CAAC,MAAM,CAAC,WAAW,GAAG,mBAAmB,CAAC;YAE/C,iDAAiD;YACjD,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,KAAK,kBAAkB,EAAE;gBAC7C,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC;gBACzB,KAAK,CAAC,MAAM,CAAC,eAAe,GAAG,IAAI,CAAC;aACrC;YAED,OAAO,WAAW,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,6FAA6F;QACvJ,CAAC,CAAC,CAAC;KACJ;IAED,OAAO,CACL,MAAC,UAAU,IAAC,IAAI,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,aAC3D,mBAAmB,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,CACvD,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,YACtD,kBAAkB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACpC,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,YACd,KAAK,IADgB,MAAM,CAAC,GAAG,CAAC,EAAE,CAE9B,CACR,CAAC,GACG,CACR,EACD,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,YACvB,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAC1B,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,YACd,KAAK,IADgB,KAAK,CAAC,GAAG,CAAC,EAAE,CAE7B,CACR,CAAC,GACG,IACI,CACd,CAAC;AACJ,CAAC","sourcesContent":["import { createElement } from 'react';\nimport Grid from '@material-ui/core/Grid';\n\nimport createPConnectComponent from '../../../../bridge/react_pconnect';\nimport { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';\nimport { PConnProps } from '../../../../types/PConnProps';\n\ninterface DetailsProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  label: string;\n  showLabel: boolean;\n  showHighlightedData: boolean;\n}\n\nexport default function Details(props: DetailsProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldGroup = getComponentFromMap('FieldGroup');\n\n  const { label, showLabel, getPConnect, showHighlightedData } = props;\n\n  // Get the inherited props from the parent to determine label settings\n  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };\n\n  // Set display mode prop and re-create the children so this part of the dom tree renders\n  // in a readonly (display) mode instead of a editable\n  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');\n  getPConnect().setInheritedProp('readOnly', true);\n  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>\n    createElement(createPConnectComponent(), {\n      ...configObject,\n      // eslint-disable-next-line react/no-array-index-key\n      key: index.toString()\n    })\n  );\n\n  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent\n  let highlightedDataArr = [];\n  if (showHighlightedData) {\n    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;\n    highlightedDataArr = highlightedData.map(field => {\n      field.config.displayMode = 'STACKED_LARGE_VAL';\n\n      // Mark as status display when using pyStatusWork\n      if (field.config.value === '@P .pyStatusWork') {\n        field.type = 'TextInput';\n        field.config.displayAsStatus = true;\n      }\n\n      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional\n    });\n  }\n\n  return (\n    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>\n      {showHighlightedData && highlightedDataArr.length > 0 && (\n        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>\n          {highlightedDataArr.map((child, i) => (\n            <Grid item xs={12} key={`hf-${i + 1}`}>\n              {child}\n            </Grid>\n          ))}\n        </Grid>\n      )}\n      <Grid container spacing={1}>\n        {children.map((child, i) => (\n          <Grid item xs={12} key={`r-${i + 1}`}>\n            {child}\n          </Grid>\n        ))}\n      </Grid>\n    </FieldGroup>\n  );\n}\n"]}
+{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../../../src/components/template/Details/Details/Details.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,OAAO,uBAAuB,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AAUnF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAmB;IACjD,8EAA8E;IAC9E,MAAM,UAAU,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAErD,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC;IAErE,sEAAsE;IACtE,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAE9E,wFAAwF;IACxF,qDAAqD;IACrD,WAAW,EAAE,CAAC,gBAAgB,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;IAC9D,WAAW,EAAE,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAI,WAAW,EAAE,CAAC,WAAW,EAAY,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,CAClF,aAAa,CAAC,uBAAuB,EAAE,EAAE;QACvC,GAAG,YAAY;QACf,oDAAoD;QACpD,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE;KACtB,CAAC,CACH,CAAC;IAEF,4GAA4G;IAC5G,IAAI,kBAAkB,GAAG,EAAE,CAAC;IAC5B,IAAI,mBAAmB,EAAE;QACvB,MAAM,EAAE,eAAe,GAAG,EAAE,EAAE,GAAI,WAAW,EAAE,CAAC,cAAc,EAAU,CAAC,MAAM,CAAC;QAChF,kBAAkB,GAAG,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YAC/C,KAAK,CAAC,MAAM,CAAC,WAAW,GAAG,mBAAmB,CAAC;YAE/C,iDAAiD;YACjD,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,KAAK,kBAAkB,EAAE;gBAC7C,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC;gBACzB,KAAK,CAAC,MAAM,CAAC,eAAe,GAAG,IAAI,CAAC;aACrC;YAED,OAAO,WAAW,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,6FAA6F;QACvJ,CAAC,CAAC,CAAC;KACJ;IAED,OAAO,CACL,MAAC,UAAU,IAAC,IAAI,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,aAC3D,mBAAmB,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,CACvD,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,YACtD,kBAAkB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACpC,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,YACd,KAAK,IADgB,MAAM,CAAC,GAAG,CAAC,EAAE,CAE9B,CACR,CAAC,GACG,CACR,EACD,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,YACvB,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAC1B,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,YACd,KAAK,IADgB,KAAK,CAAC,GAAG,CAAC,EAAE,CAE7B,CACR,CAAC,GACG,IACI,CACd,CAAC;AACJ,CAAC","sourcesContent":["import { createElement } from 'react';\nimport Grid from '@mui/material/Grid';\n\nimport createPConnectComponent from '../../../../bridge/react_pconnect';\nimport { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';\nimport { PConnProps } from '../../../../types/PConnProps';\n\ninterface DetailsProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  label: string;\n  showLabel: boolean;\n  showHighlightedData: boolean;\n}\n\nexport default function Details(props: DetailsProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldGroup = getComponentFromMap('FieldGroup');\n\n  const { label, showLabel, getPConnect, showHighlightedData } = props;\n\n  // Get the inherited props from the parent to determine label settings\n  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };\n\n  // Set display mode prop and re-create the children so this part of the dom tree renders\n  // in a readonly (display) mode instead of a editable\n  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');\n  getPConnect().setInheritedProp('readOnly', true);\n  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>\n    createElement(createPConnectComponent(), {\n      ...configObject,\n      // eslint-disable-next-line react/no-array-index-key\n      key: index.toString()\n    })\n  );\n\n  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent\n  let highlightedDataArr = [];\n  if (showHighlightedData) {\n    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;\n    highlightedDataArr = highlightedData.map(field => {\n      field.config.displayMode = 'STACKED_LARGE_VAL';\n\n      // Mark as status display when using pyStatusWork\n      if (field.config.value === '@P .pyStatusWork') {\n        field.type = 'TextInput';\n        field.config.displayAsStatus = true;\n      }\n\n      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional\n    });\n  }\n\n  return (\n    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>\n      {showHighlightedData && highlightedDataArr.length > 0 && (\n        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>\n          {highlightedDataArr.map((child, i) => (\n            <Grid item xs={12} key={`hf-${i + 1}`}>\n              {child}\n            </Grid>\n          ))}\n        </Grid>\n      )}\n      <Grid container spacing={1}>\n        {children.map((child, i) => (\n          <Grid item xs={12} key={`r-${i + 1}`}>\n            {child}\n          </Grid>\n        ))}\n      </Grid>\n    </FieldGroup>\n  );\n}\n"]}

package/lib/components/template/Details/DetailsSubTabs/DetailsSubTabs.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Children, useEffect, useState } from 'react';
-import { Tab, Tabs, TextField } from '@material-ui/core';
-import { TabContext, TabPanel } from '@material-ui/lab';
+import { Tab, Tabs } from '@mui/material';
+import { TabContext, TabPanel } from '@mui/lab';
 import { getTransientTabs, getVisibleTabs, tabClick } from '../../SubTabs/tabUtils';
 export default function DetailsSubTabs(props) {
     const { children = [], label, showLabel = true, getPConnect } = props;
@@ -23,6 +23,6 @@ export default function DetailsSubTabs(props) {
         setCurrentTabId(index);
         tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);
     };
-    return (_jsxs(_Fragment, { children: [propsToUse.showLabel && _jsx(TextField, { children: propsToUse.label }), _jsxs(TabContext, { value: currentTabId.toString(), children: [_jsx(Tabs, { onChange: handleTabClick, value: currentTabId, children: tabItems.map((tab) => (_jsx(Tab, { label: tab.name, value: tab.id }, tab.id))) }), tabItems.map((tab) => (_jsx(TabPanel, { value: tab.id, tabIndex: +tab.id, children: _jsx("div", { children: tab.content ? tab.content : 'No content exists' }) }, tab.id)))] })] }));
+    return (_jsxs(_Fragment, { children: [propsToUse.showLabel && _jsx("h3", { children: propsToUse.label }), _jsxs(TabContext, { value: currentTabId.toString(), children: [_jsx(Tabs, { onChange: handleTabClick, value: currentTabId, children: tabItems.map((tab) => (_jsx(Tab, { label: tab.name, value: tab.id }, tab.id))) }), tabItems.map((tab) => (_jsx(TabPanel, { value: tab.id, tabIndex: +tab.id, children: _jsx("div", { children: tab.content ? tab.content : 'No content exists' }) }, tab.id)))] })] }));
 }
 //# sourceMappingURL=DetailsSubTabs.js.map

package/lib/components/template/Details/DetailsSubTabs/DetailsSubTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsSubTabs.js","sourceRoot":"","sources":["../../../../../src/components/template/Details/DetailsSubTabs/DetailsSubTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAqB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AASpF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAA6C;IAClF,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IACtE,sEAAsE;IACtE,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAE9E,MAAM,eAAe,GAAG,CAAC,CAAC;IAC1B,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD,IAAI,aAAa,GAAG,EAAE,CAAC;IAEvB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,GAAG,cAAc,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,QAAQ,EAAE,CAAC,CAAC;IAE7E,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC5C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,gBAAgB,CAAC,aAAa,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;QAC7E,UAAU,CAAC,YAAY,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,cAAc,GAAG,CAAC,EAAE,EAAE,KAAa,EAAE,EAAE;QAC3C,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,QAAQ,CAAC,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC;IAC1E,CAAC,CAAC;IAEF,OAAO,CACL,8BACG,UAAU,CAAC,SAAS,IAAI,KAAC,SAAS,cAAE,UAAU,CAAC,KAAK,GAAa,EAClE,MAAC,UAAU,IAAC,KAAK,EAAE,YAAY,CAAC,QAAQ,EAAE,aACxC,KAAC,IAAI,IAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,YAAY,YAChD,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAQ,EAAE,EAAE,CAAC,CAC1B,KAAC,GAAG,IAAc,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE,IAAtC,GAAG,CAAC,EAAE,CAAoC,CACrD,CAAC,GACG,EAEN,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAQ,EAAE,EAAE,CAAC,CAC1B,KAAC,QAAQ,IAAc,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,YACrD,wBAAM,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,GAAO,IAD/C,GAAG,CAAC,EAAE,CAEV,CACZ,CAAC,IACS,IACZ,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { Children, PropsWithChildren, useEffect, useState } from 'react';\nimport { Tab, Tabs, TextField } from '@material-ui/core';\nimport { TabContext, TabPanel } from '@material-ui/lab';\n\nimport { getTransientTabs, getVisibleTabs, tabClick } from '../../SubTabs/tabUtils';\nimport { PConnProps } from '../../../../types/PConnProps';\n\ninterface DetailsSubTabsProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  showLabel: boolean;\n  label: string;\n}\n\nexport default function DetailsSubTabs(props: PropsWithChildren<DetailsSubTabsProps>) {\n  const { children = [], label, showLabel = true, getPConnect } = props;\n  // Get the inherited props from the parent to determine label settings\n  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };\n\n  const defaultTabIndex = 0;\n  const deferLoadedTabs = Children.toArray(children)[0];\n  let availableTabs = [];\n\n  useEffect(() => {\n    availableTabs = getVisibleTabs(deferLoadedTabs, 'detailsSubTabs');\n  }, [availableTabs]);\n\n  const [currentTabId, setCurrentTabId] = useState(defaultTabIndex.toString());\n\n  const [tabItems, setTabitem] = useState([]);\n  useEffect(() => {\n    const tempTabItems = getTransientTabs(availableTabs, currentTabId, tabItems);\n    setTabitem(tempTabItems);\n  }, [currentTabId]);\n\n  const handleTabClick = (id, index: string) => {\n    setCurrentTabId(index);\n    tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);\n  };\n\n  return (\n    <>\n      {propsToUse.showLabel && <TextField>{propsToUse.label}</TextField>}\n      <TabContext value={currentTabId.toString()}>\n        <Tabs onChange={handleTabClick} value={currentTabId}>\n          {tabItems.map((tab: any) => (\n            <Tab key={tab.id} label={tab.name} value={tab.id} />\n          ))}\n        </Tabs>\n\n        {tabItems.map((tab: any) => (\n          <TabPanel key={tab.id} value={tab.id} tabIndex={+tab.id}>\n            <div>{tab.content ? tab.content : 'No content exists'}</div>\n          </TabPanel>\n        ))}\n      </TabContext>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"DetailsSubTabs.js","sourceRoot":"","sources":["../../../../../src/components/template/Details/DetailsSubTabs/DetailsSubTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAqB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AASpF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAA6C;IAClF,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IACtE,sEAAsE;IACtE,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAE9E,MAAM,eAAe,GAAG,CAAC,CAAC;IAC1B,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD,IAAI,aAAa,GAAG,EAAE,CAAC;IAEvB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,GAAG,cAAc,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,QAAQ,EAAE,CAAC,CAAC;IAE7E,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC5C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,gBAAgB,CAAC,aAAa,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;QAC7E,UAAU,CAAC,YAAY,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,cAAc,GAAG,CAAC,EAAE,EAAE,KAAa,EAAE,EAAE;QAC3C,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,QAAQ,CAAC,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC;IAC1E,CAAC,CAAC;IAEF,OAAO,CACL,8BACG,UAAU,CAAC,SAAS,IAAI,uBAAK,UAAU,CAAC,KAAK,GAAM,EACpD,MAAC,UAAU,IAAC,KAAK,EAAE,YAAY,CAAC,QAAQ,EAAE,aACxC,KAAC,IAAI,IAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,YAAY,YAChD,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAQ,EAAE,EAAE,CAAC,CAC1B,KAAC,GAAG,IAAc,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE,IAAtC,GAAG,CAAC,EAAE,CAAoC,CACrD,CAAC,GACG,EAEN,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAQ,EAAE,EAAE,CAAC,CAC1B,KAAC,QAAQ,IAAc,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,YACrD,wBAAM,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,GAAO,IAD/C,GAAG,CAAC,EAAE,CAEV,CACZ,CAAC,IACS,IACZ,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { Children, PropsWithChildren, useEffect, useState } from 'react';\nimport { Tab, Tabs } from '@mui/material';\nimport { TabContext, TabPanel } from '@mui/lab';\n\nimport { getTransientTabs, getVisibleTabs, tabClick } from '../../SubTabs/tabUtils';\nimport { PConnProps } from '../../../../types/PConnProps';\n\ninterface DetailsSubTabsProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  showLabel: boolean;\n  label: string;\n}\n\nexport default function DetailsSubTabs(props: PropsWithChildren<DetailsSubTabsProps>) {\n  const { children = [], label, showLabel = true, getPConnect } = props;\n  // Get the inherited props from the parent to determine label settings\n  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };\n\n  const defaultTabIndex = 0;\n  const deferLoadedTabs = Children.toArray(children)[0];\n  let availableTabs = [];\n\n  useEffect(() => {\n    availableTabs = getVisibleTabs(deferLoadedTabs, 'detailsSubTabs');\n  }, [availableTabs]);\n\n  const [currentTabId, setCurrentTabId] = useState(defaultTabIndex.toString());\n\n  const [tabItems, setTabitem] = useState([]);\n  useEffect(() => {\n    const tempTabItems = getTransientTabs(availableTabs, currentTabId, tabItems);\n    setTabitem(tempTabItems);\n  }, [currentTabId]);\n\n  const handleTabClick = (id, index: string) => {\n    setCurrentTabId(index);\n    tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);\n  };\n\n  return (\n    <>\n      {propsToUse.showLabel && <h3>{propsToUse.label}</h3>}\n      <TabContext value={currentTabId.toString()}>\n        <Tabs onChange={handleTabClick} value={currentTabId}>\n          {tabItems.map((tab: any) => (\n            <Tab key={tab.id} label={tab.name} value={tab.id} />\n          ))}\n        </Tabs>\n\n        {tabItems.map((tab: any) => (\n          <TabPanel key={tab.id} value={tab.id} tabIndex={+tab.id}>\n            <div>{tab.content ? tab.content : 'No content exists'}</div>\n          </TabPanel>\n        ))}\n      </TabContext>\n    </>\n  );\n}\n"]}

package/lib/components/template/Details/DetailsThreeColumn/DetailsThreeColumn.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 import createPConnectComponent from '../../../../bridge/react_pconnect';
 import { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';
 export default function DetailsThreeColumn(props) {
@@ -11,7 +11,7 @@ export default function DetailsThreeColumn(props) {
     const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
     // Set display mode prop and re-create the children so this part of the dom tree renders
     // in a readonly (display) mode instead of a editable
-    getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+    getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
     getPConnect().setInheritedProp('readOnly', true);
     const children = getPConnect().getChildren().map((configObject, index) => createElement(createPConnectComponent(), {
         ...configObject,

package/lib/components/template/Details/DetailsThreeColumn/DetailsThreeColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsThreeColumn.js","sourceRoot":"","sources":["../../../../../src/components/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAE1C,OAAO,uBAAuB,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AAUnF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAA8B;IACvE,8EAA8E;IAC9E,MAAM,UAAU,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAErD,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,WAAW,EAAE,mBAAmB,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEpF,sEAAsE;IACtE,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAE9E,wFAAwF;IACxF,qDAAqD;IACrD,WAAW,EAAE,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;IAC7D,WAAW,EAAE,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAI,WAAW,EAAE,CAAC,WAAW,EAAY,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,CAClF,aAAa,CAAC,uBAAuB,EAAE,EAAE;QACvC,GAAG,YAAY;QACf,oDAAoD;QACpD,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE;KACtB,CAAC,CACH,CAAC;IAEF,4GAA4G;IAC5G,IAAI,kBAAkB,GAAG,EAAE,CAAC;IAC5B,IAAI,mBAAmB,EAAE;QACvB,MAAM,EAAE,eAAe,GAAG,EAAE,EAAE,GAAI,WAAW,EAAE,CAAC,cAAc,EAAU,CAAC,MAAM,CAAC;QAChF,kBAAkB,GAAG,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YAC/C,KAAK,CAAC,MAAM,CAAC,WAAW,GAAG,mBAAmB,CAAC;YAE/C,iDAAiD;YACjD,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,KAAK,kBAAkB,EAAE;gBAC7C,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC;gBACzB,KAAK,CAAC,MAAM,CAAC,eAAe,GAAG,IAAI,CAAC;aACrC;YAED,OAAO,WAAW,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,+FAA+F;QACzJ,CAAC,CAAC,CAAC;KACJ;IAED,OAAO,CACL,MAAC,UAAU,IAAC,IAAI,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,aAC3D,mBAAmB,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,CACvD,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,YACtD,kBAAkB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACpC,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC,YACb,KAAK,IADe,MAAM,CAAC,GAAG,CAAC,EAAE,CAE7B,CACR,CAAC,GACG,CACR,EACD,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,YACvB,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAC1B,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC,YACb,KAAK,IADe,KAAK,CAAC,GAAG,CAAC,EAAE,CAE5B,CACR,CAAC,GACG,IACI,CACd,CAAC;AACJ,CAAC","sourcesContent":["import { createElement } from 'react';\nimport Grid from '@material-ui/core/Grid';\n\nimport createPConnectComponent from '../../../../bridge/react_pconnect';\nimport { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';\nimport { PConnProps } from '../../../../types/PConnProps';\n\ninterface DetailsThreeColumnProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  showLabel: boolean;\n  label: string;\n  showHighlightedData: boolean;\n}\n\nexport default function DetailsThreeColumn(props: DetailsThreeColumnProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldGroup = getComponentFromMap('FieldGroup');\n\n  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;\n\n  // Get the inherited props from the parent to determine label settings\n  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };\n\n  // Set display mode prop and re-create the children so this part of the dom tree renders\n  // in a readonly (display) mode instead of a editable\n  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');\n  getPConnect().setInheritedProp('readOnly', true);\n  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>\n    createElement(createPConnectComponent(), {\n      ...configObject,\n      // eslint-disable-next-line react/no-array-index-key\n      key: index.toString()\n    })\n  );\n\n  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent\n  let highlightedDataArr = [];\n  if (showHighlightedData) {\n    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;\n    highlightedDataArr = highlightedData.map(field => {\n      field.config.displayMode = 'STACKED_LARGE_VAL';\n\n      // Mark as status display when using pyStatusWork\n      if (field.config.value === '@P .pyStatusWork') {\n        field.type = 'TextInput';\n        field.config.displayAsStatus = true;\n      }\n\n      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);\n    });\n  }\n\n  return (\n    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>\n      {showHighlightedData && highlightedDataArr.length > 0 && (\n        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>\n          {highlightedDataArr.map((child, i) => (\n            <Grid item xs={4} key={`hf-${i + 1}`}>\n              {child}\n            </Grid>\n          ))}\n        </Grid>\n      )}\n      <Grid container spacing={1}>\n        {children.map((child, i) => (\n          <Grid item xs={4} key={`r-${i + 1}`}>\n            {child}\n          </Grid>\n        ))}\n      </Grid>\n    </FieldGroup>\n  );\n}\n"]}
+{"version":3,"file":"DetailsThreeColumn.js","sourceRoot":"","sources":["../../../../../src/components/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,OAAO,uBAAuB,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AAUnF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAA8B;IACvE,8EAA8E;IAC9E,MAAM,UAAU,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAErD,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,WAAW,EAAE,mBAAmB,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEpF,sEAAsE;IACtE,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAE9E,wFAAwF;IACxF,qDAAqD;IACrD,WAAW,EAAE,CAAC,gBAAgB,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;IAC9D,WAAW,EAAE,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAI,WAAW,EAAE,CAAC,WAAW,EAAY,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,CAClF,aAAa,CAAC,uBAAuB,EAAE,EAAE;QACvC,GAAG,YAAY;QACf,oDAAoD;QACpD,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE;KACtB,CAAC,CACH,CAAC;IAEF,4GAA4G;IAC5G,IAAI,kBAAkB,GAAG,EAAE,CAAC;IAC5B,IAAI,mBAAmB,EAAE;QACvB,MAAM,EAAE,eAAe,GAAG,EAAE,EAAE,GAAI,WAAW,EAAE,CAAC,cAAc,EAAU,CAAC,MAAM,CAAC;QAChF,kBAAkB,GAAG,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YAC/C,KAAK,CAAC,MAAM,CAAC,WAAW,GAAG,mBAAmB,CAAC;YAE/C,iDAAiD;YACjD,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,KAAK,kBAAkB,EAAE;gBAC7C,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC;gBACzB,KAAK,CAAC,MAAM,CAAC,eAAe,GAAG,IAAI,CAAC;aACrC;YAED,OAAO,WAAW,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,+FAA+F;QACzJ,CAAC,CAAC,CAAC;KACJ;IAED,OAAO,CACL,MAAC,UAAU,IAAC,IAAI,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,aAC3D,mBAAmB,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,CACvD,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,YACtD,kBAAkB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACpC,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC,YACb,KAAK,IADe,MAAM,CAAC,GAAG,CAAC,EAAE,CAE7B,CACR,CAAC,GACG,CACR,EACD,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,YACvB,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAC1B,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC,YACb,KAAK,IADe,KAAK,CAAC,GAAG,CAAC,EAAE,CAE5B,CACR,CAAC,GACG,IACI,CACd,CAAC;AACJ,CAAC","sourcesContent":["import { createElement } from 'react';\nimport Grid from '@mui/material/Grid';\n\nimport createPConnectComponent from '../../../../bridge/react_pconnect';\nimport { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';\nimport { PConnProps } from '../../../../types/PConnProps';\n\ninterface DetailsThreeColumnProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  showLabel: boolean;\n  label: string;\n  showHighlightedData: boolean;\n}\n\nexport default function DetailsThreeColumn(props: DetailsThreeColumnProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldGroup = getComponentFromMap('FieldGroup');\n\n  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;\n\n  // Get the inherited props from the parent to determine label settings\n  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };\n\n  // Set display mode prop and re-create the children so this part of the dom tree renders\n  // in a readonly (display) mode instead of a editable\n  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');\n  getPConnect().setInheritedProp('readOnly', true);\n  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>\n    createElement(createPConnectComponent(), {\n      ...configObject,\n      // eslint-disable-next-line react/no-array-index-key\n      key: index.toString()\n    })\n  );\n\n  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent\n  let highlightedDataArr = [];\n  if (showHighlightedData) {\n    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;\n    highlightedDataArr = highlightedData.map(field => {\n      field.config.displayMode = 'STACKED_LARGE_VAL';\n\n      // Mark as status display when using pyStatusWork\n      if (field.config.value === '@P .pyStatusWork') {\n        field.type = 'TextInput';\n        field.config.displayAsStatus = true;\n      }\n\n      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);\n    });\n  }\n\n  return (\n    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>\n      {showHighlightedData && highlightedDataArr.length > 0 && (\n        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>\n          {highlightedDataArr.map((child, i) => (\n            <Grid item xs={4} key={`hf-${i + 1}`}>\n              {child}\n            </Grid>\n          ))}\n        </Grid>\n      )}\n      <Grid container spacing={1}>\n        {children.map((child, i) => (\n          <Grid item xs={4} key={`r-${i + 1}`}>\n            {child}\n          </Grid>\n        ))}\n      </Grid>\n    </FieldGroup>\n  );\n}\n"]}

package/lib/components/template/Details/DetailsTwoColumn/DetailsTwoColumn.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 import createPConnectComponent from '../../../../bridge/react_pconnect';
 import { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';
 export default function DetailsTwoColumn(props) {
@@ -11,7 +11,7 @@ export default function DetailsTwoColumn(props) {
     const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
     // Set display mode prop and re-create the children so this part of the dom tree renders
     // in a readonly (display) mode instead of a editable
-    getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+    getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
     getPConnect().setInheritedProp('readOnly', true);
     const children = getPConnect().getChildren().map((configObject, index) => createElement(createPConnectComponent(), {
         ...configObject,

package/lib/components/template/Details/DetailsTwoColumn/DetailsTwoColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsTwoColumn.js","sourceRoot":"","sources":["../../../../../src/components/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAE1C,OAAO,uBAAuB,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AAUnF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAA4B;IACnE,8EAA8E;IAC9E,MAAM,UAAU,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAErD,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,WAAW,EAAE,mBAAmB,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEpF,sEAAsE;IACtE,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAE9E,wFAAwF;IACxF,qDAAqD;IACrD,WAAW,EAAE,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;IAC7D,WAAW,EAAE,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAI,WAAW,EAAE,CAAC,WAAW,EAAY,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,CAClF,aAAa,CAAC,uBAAuB,EAAE,EAAE;QACvC,GAAG,YAAY;QACf,oDAAoD;QACpD,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE;KACtB,CAAC,CACH,CAAC;IAEF,4GAA4G;IAC5G,IAAI,kBAAkB,GAAG,EAAE,CAAC;IAC5B,IAAI,mBAAmB,EAAE;QACvB,MAAM,EAAE,eAAe,GAAG,EAAE,EAAE,GAAI,WAAW,EAAE,CAAC,cAAc,EAAU,CAAC,MAAM,CAAC;QAChF,kBAAkB,GAAG,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YAC/C,KAAK,CAAC,MAAM,CAAC,WAAW,GAAG,mBAAmB,CAAC;YAE/C,iDAAiD;YACjD,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,KAAK,kBAAkB,EAAE;gBAC7C,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC;gBACzB,KAAK,CAAC,MAAM,CAAC,eAAe,GAAG,IAAI,CAAC;aACrC;YAED,OAAO,WAAW,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,6FAA6F;QACvJ,CAAC,CAAC,CAAC;KACJ;IAED,OAAO,CACL,MAAC,UAAU,IAAC,IAAI,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,aAC3D,mBAAmB,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,CACvD,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,YACtD,kBAAkB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACpC,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC,YACb,KAAK,IADe,MAAM,CAAC,GAAG,CAAC,EAAE,CAE7B,CACR,CAAC,GACG,CACR,EACD,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,YACvB,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAC1B,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC,YACb,KAAK,IADe,KAAK,CAAC,GAAG,CAAC,EAAE,CAE5B,CACR,CAAC,GACG,IACI,CACd,CAAC;AACJ,CAAC","sourcesContent":["import { createElement } from 'react';\nimport Grid from '@material-ui/core/Grid';\n\nimport createPConnectComponent from '../../../../bridge/react_pconnect';\nimport { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';\nimport { PConnProps } from '../../../../types/PConnProps';\n\ninterface DetailsTwoColumnProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  showLabel: boolean;\n  label: string;\n  showHighlightedData: boolean;\n}\n\nexport default function DetailsTwoColumn(props: DetailsTwoColumnProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldGroup = getComponentFromMap('FieldGroup');\n\n  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;\n\n  // Get the inherited props from the parent to determine label settings\n  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };\n\n  // Set display mode prop and re-create the children so this part of the dom tree renders\n  // in a readonly (display) mode instead of a editable\n  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');\n  getPConnect().setInheritedProp('readOnly', true);\n  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>\n    createElement(createPConnectComponent(), {\n      ...configObject,\n      // eslint-disable-next-line react/no-array-index-key\n      key: index.toString()\n    })\n  );\n\n  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent\n  let highlightedDataArr = [];\n  if (showHighlightedData) {\n    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;\n    highlightedDataArr = highlightedData.map(field => {\n      field.config.displayMode = 'STACKED_LARGE_VAL';\n\n      // Mark as status display when using pyStatusWork\n      if (field.config.value === '@P .pyStatusWork') {\n        field.type = 'TextInput';\n        field.config.displayAsStatus = true;\n      }\n\n      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional\n    });\n  }\n\n  return (\n    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>\n      {showHighlightedData && highlightedDataArr.length > 0 && (\n        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>\n          {highlightedDataArr.map((child, i) => (\n            <Grid item xs={6} key={`hf-${i + 1}`}>\n              {child}\n            </Grid>\n          ))}\n        </Grid>\n      )}\n      <Grid container spacing={1}>\n        {children.map((child, i) => (\n          <Grid item xs={6} key={`r-${i + 1}`}>\n            {child}\n          </Grid>\n        ))}\n      </Grid>\n    </FieldGroup>\n  );\n}\n"]}
+{"version":3,"file":"DetailsTwoColumn.js","sourceRoot":"","sources":["../../../../../src/components/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,OAAO,uBAAuB,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AAUnF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAA4B;IACnE,8EAA8E;IAC9E,MAAM,UAAU,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAErD,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,WAAW,EAAE,mBAAmB,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEpF,sEAAsE;IACtE,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAE9E,wFAAwF;IACxF,qDAAqD;IACrD,WAAW,EAAE,CAAC,gBAAgB,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;IAC9D,WAAW,EAAE,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAI,WAAW,EAAE,CAAC,WAAW,EAAY,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,CAClF,aAAa,CAAC,uBAAuB,EAAE,EAAE;QACvC,GAAG,YAAY;QACf,oDAAoD;QACpD,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE;KACtB,CAAC,CACH,CAAC;IAEF,4GAA4G;IAC5G,IAAI,kBAAkB,GAAG,EAAE,CAAC;IAC5B,IAAI,mBAAmB,EAAE;QACvB,MAAM,EAAE,eAAe,GAAG,EAAE,EAAE,GAAI,WAAW,EAAE,CAAC,cAAc,EAAU,CAAC,MAAM,CAAC;QAChF,kBAAkB,GAAG,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YAC/C,KAAK,CAAC,MAAM,CAAC,WAAW,GAAG,mBAAmB,CAAC;YAE/C,iDAAiD;YACjD,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,KAAK,kBAAkB,EAAE;gBAC7C,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC;gBACzB,KAAK,CAAC,MAAM,CAAC,eAAe,GAAG,IAAI,CAAC;aACrC;YAED,OAAO,WAAW,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,6FAA6F;QACvJ,CAAC,CAAC,CAAC;KACJ;IAED,OAAO,CACL,MAAC,UAAU,IAAC,IAAI,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,aAC3D,mBAAmB,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,CACvD,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,YACtD,kBAAkB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACpC,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC,YACb,KAAK,IADe,MAAM,CAAC,GAAG,CAAC,EAAE,CAE7B,CACR,CAAC,GACG,CACR,EACD,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,YACvB,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAC1B,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC,YACb,KAAK,IADe,KAAK,CAAC,GAAG,CAAC,EAAE,CAE5B,CACR,CAAC,GACG,IACI,CACd,CAAC;AACJ,CAAC","sourcesContent":["import { createElement } from 'react';\nimport Grid from '@mui/material/Grid';\n\nimport createPConnectComponent from '../../../../bridge/react_pconnect';\nimport { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';\nimport { PConnProps } from '../../../../types/PConnProps';\n\ninterface DetailsTwoColumnProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  showLabel: boolean;\n  label: string;\n  showHighlightedData: boolean;\n}\n\nexport default function DetailsTwoColumn(props: DetailsTwoColumnProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldGroup = getComponentFromMap('FieldGroup');\n\n  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;\n\n  // Get the inherited props from the parent to determine label settings\n  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };\n\n  // Set display mode prop and re-create the children so this part of the dom tree renders\n  // in a readonly (display) mode instead of a editable\n  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');\n  getPConnect().setInheritedProp('readOnly', true);\n  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>\n    createElement(createPConnectComponent(), {\n      ...configObject,\n      // eslint-disable-next-line react/no-array-index-key\n      key: index.toString()\n    })\n  );\n\n  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent\n  let highlightedDataArr = [];\n  if (showHighlightedData) {\n    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;\n    highlightedDataArr = highlightedData.map(field => {\n      field.config.displayMode = 'STACKED_LARGE_VAL';\n\n      // Mark as status display when using pyStatusWork\n      if (field.config.value === '@P .pyStatusWork') {\n        field.type = 'TextInput';\n        field.config.displayAsStatus = true;\n      }\n\n      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional\n    });\n  }\n\n  return (\n    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>\n      {showHighlightedData && highlightedDataArr.length > 0 && (\n        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>\n          {highlightedDataArr.map((child, i) => (\n            <Grid item xs={6} key={`hf-${i + 1}`}>\n              {child}\n            </Grid>\n          ))}\n        </Grid>\n      )}\n      <Grid container spacing={1}>\n        {children.map((child, i) => (\n          <Grid item xs={6} key={`r-${i + 1}`}>\n            {child}\n          </Grid>\n        ))}\n      </Grid>\n    </FieldGroup>\n  );\n}\n"]}

package/lib/components/template/Details/DynamicTabs/DynamicTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicTabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/Details/DynamicTabs/DynamicTabs.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAQ1D,UAAU,gBAAiB,SAAQ,UAAU;IAE3C,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;CACvB;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAwD3C;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"DynamicTabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/Details/DynamicTabs/DynamicTabs.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAQ1D,UAAU,gBAAiB,SAAQ,UAAU;IAE3C,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;CACvB;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAuD3C;AAED,eAAe,WAAW,CAAC"}

package/lib/components/template/Details/DynamicTabs/DynamicTabs.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { Children, useMemo, useState } from 'react';
-import { makeStyles, Tab, Tabs } from '@material-ui/core';
-import { TabContext, TabPanel } from '@material-ui/lab';
+import { Tab, Tabs } from '@mui/material';
+import { TabContext, TabPanel } from '@mui/lab';
+import makeStyles from '@mui/styles/makeStyles';
 import { buildView } from '../../../helpers/field-group-utils';
 const useStyles = makeStyles(() => ({
     tab: {
@@ -15,12 +16,11 @@ function DynamicTabs(props) {
     // Get the inherited props from the parent to determine label settings
     const propsToUse = { label, showLabel, ...pConnect.getInheritedProps() };
     const defaultTabIndex = 0;
-    // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
     const { tablabel } = pConnect.getComponentConfig();
     const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
     const referenceListData = pConnect.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
     const memoisedTabViews = useMemo(() => {
-        pConnect.setInheritedProp('displayMode', 'LABELS_LEFT');
+        pConnect.setInheritedProp('displayMode', 'DISPLAY_ONLY');
         pConnect.setInheritedProp('readOnly', true);
         return (referenceListData &&
             Children.toArray(referenceListData.map((item, index) => {

package/lib/components/template/Details/DynamicTabs/DynamicTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicTabs.js","sourceRoot":"","sources":["../../../../../src/components/template/Details/DynamicTabs/DynamicTabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Children, useMemo, useState } from 'react';\nimport { makeStyles, Tab, Tabs } from '@material-ui/core';\nimport { TabContext, TabPanel } from '@material-ui/lab';\n\nimport { buildView } from '../../../helpers/field-group-utils';\nimport { PConnProps } from '../../../../types/PConnProps';\n\nconst useStyles = makeStyles(() => ({\n  tab: {\n    minWidth: '72px'\n  }\n}));\n\ninterface DynamicTabsProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  showLabel: boolean;\n  label: string;\n  referenceList?: any[];\n}\n\nfunction DynamicTabs(props: DynamicTabsProps) {\n  const classes = useStyles();\n  const { referenceList, showLabel, label, getPConnect } = props;\n  const pConnect = getPConnect();\n  // Get the inherited props from the parent to determine label settings\n  const propsToUse = { label, showLabel, ...pConnect.getInheritedProps() };\n  const defaultTabIndex = 0;\n  // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.\n  const { tablabel } = pConnect.getComponentConfig();\n  const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);\n  const referenceListData: any = pConnect.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional\n  const memoisedTabViews = useMemo(() => {\n    pConnect.setInheritedProp('displayMode', 'LABELS_LEFT');\n    pConnect.setInheritedProp('readOnly', true);\n\n    return (\n      referenceListData &&\n      Children.toArray(\n        referenceListData.map((item, index) => {\n          return <React.Fragment key={item[tablabelProp]}>{buildView(pConnect, index, '')}</React.Fragment>;\n        })\n      )\n    );\n  }, [referenceListData]);\n  const [panelShown, changePanel] = useState(defaultTabIndex);\n  const handleTabClick = (e, id) => {\n    changePanel(parseInt(id, 10));\n  };\n  // Loop over the tab contents and and pull out the labels for the navigation\n  const tabItems =\n    referenceListData?.map((item, i) => {\n      const currentTabLabel = item[tablabelProp] || PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');\n      return {\n        name: currentTabLabel,\n        id: i\n      };\n    }) || [];\n\n  return (\n    <>\n      {propsToUse.label && <h3 id='dynamic-tabs-title'>{propsToUse.label}</h3>}\n      <TabContext value={panelShown.toString()}>\n        <Tabs onChange={handleTabClick} value={panelShown} variant='scrollable' scrollButtons='auto' indicatorColor='primary' id='dynamic-tabs'>\n          {tabItems.map((tab: any) => (\n            <Tab key={tab.id} label={tab.name} value={tab.id} className={classes.tab} />\n          ))}\n        </Tabs>\n\n        {tabItems.map((tab: any) => (\n          <TabPanel key={tab.id} value={tab.id.toString()} tabIndex={+tab.id} id='dynamic-tabpanel'>\n            <div>{memoisedTabViews[parseInt(tab.id, 10)] || 'No content exists'}</div>\n          </TabPanel>\n        ))}\n      </TabContext>\n    </>\n  );\n}\n\nexport default DynamicTabs;\n"]}
+{"version":3,"file":"DynamicTabs.js","sourceRoot":"","sources":["../../../../../src/components/template/Details/DynamicTabs/DynamicTabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Children, useMemo, useState } from 'react';\nimport { Tab, Tabs } from '@mui/material';\nimport { TabContext, TabPanel } from '@mui/lab';\nimport makeStyles from '@mui/styles/makeStyles';\n\nimport { buildView } from '../../../helpers/field-group-utils';\nimport { PConnProps } from '../../../../types/PConnProps';\n\nconst useStyles = makeStyles(() => ({\n  tab: {\n    minWidth: '72px'\n  }\n}));\n\ninterface DynamicTabsProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  showLabel: boolean;\n  label: string;\n  referenceList?: any[];\n}\n\nfunction DynamicTabs(props: DynamicTabsProps) {\n  const classes = useStyles();\n  const { referenceList, showLabel, label, getPConnect } = props;\n  const pConnect = getPConnect();\n  // Get the inherited props from the parent to determine label settings\n  const propsToUse = { label, showLabel, ...pConnect.getInheritedProps() };\n  const defaultTabIndex = 0;\n  const { tablabel } = pConnect.getComponentConfig();\n  const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);\n  const referenceListData: any = pConnect.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional\n  const memoisedTabViews = useMemo(() => {\n    pConnect.setInheritedProp('displayMode', 'DISPLAY_ONLY');\n    pConnect.setInheritedProp('readOnly', true);\n\n    return (\n      referenceListData &&\n      Children.toArray(\n        referenceListData.map((item, index) => {\n          return <React.Fragment key={item[tablabelProp]}>{buildView(pConnect, index, '')}</React.Fragment>;\n        })\n      )\n    );\n  }, [referenceListData]);\n  const [panelShown, changePanel] = useState(defaultTabIndex);\n  const handleTabClick = (e, id) => {\n    changePanel(parseInt(id, 10));\n  };\n  // Loop over the tab contents and and pull out the labels for the navigation\n  const tabItems =\n    referenceListData?.map((item, i) => {\n      const currentTabLabel = item[tablabelProp] || PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');\n      return {\n        name: currentTabLabel,\n        id: i\n      };\n    }) || [];\n\n  return (\n    <>\n      {propsToUse.label && <h3 id='dynamic-tabs-title'>{propsToUse.label}</h3>}\n      <TabContext value={panelShown.toString()}>\n        <Tabs onChange={handleTabClick} value={panelShown} variant='scrollable' scrollButtons='auto' indicatorColor='primary' id='dynamic-tabs'>\n          {tabItems.map((tab: any) => (\n            <Tab key={tab.id} label={tab.name} value={tab.id} className={classes.tab} />\n          ))}\n        </Tabs>\n\n        {tabItems.map((tab: any) => (\n          <TabPanel key={tab.id} value={tab.id.toString()} tabIndex={+tab.id} id='dynamic-tabpanel'>\n            <div>{memoisedTabViews[parseInt(tab.id, 10)] || 'No content exists'}</div>\n          </TabPanel>\n        ))}\n      </TabContext>\n    </>\n  );\n}\n\nexport default DynamicTabs;\n"]}

package/lib/components/template/FieldGroupTemplate/FieldGroupTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/template/FieldGroupTemplate/FieldGroupTemplate.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,UAAU,uBAAwB,SAAQ,UAAU;IAElD,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAqFxE"}
+{"version":3,"file":"FieldGroupTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/template/FieldGroupTemplate/FieldGroupTemplate.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,UAAU,uBAAwB,SAAQ,UAAU;IAElD,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CA0FxE"}

package/lib/components/template/FieldGroupTemplate/FieldGroupTemplate.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable react-hooks/rules-of-hooks */
-import { useMemo } from 'react';
+import { useLayoutEffect, useMemo } from 'react';
 import { getReferenceList, buildView } from '../../helpers/field-group-utils';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 export default function FieldGroupTemplate(props) {
@@ -12,8 +12,14 @@ export default function FieldGroupTemplate(props) {
     const resolvedList = getReferenceList(pConn);
     pConn.setReferenceList(resolvedList);
     const pageReference = `${pConn.getPageReference()}${resolvedList}`;
-    const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'LABELS_LEFT';
+    const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';
     const HEADING = heading ?? 'Row';
+    useLayoutEffect(() => {
+        if (!isReadonlyMode) {
+            // @ts-ignore - Expected 3 arguments, but got 1
+            pConn.getListActions().initDefaultPageInstructions(resolvedList);
+        }
+    }, [referenceList?.length]);
     const getDynamicHeaderProp = (item, index) => {
         if (fieldHeader === 'propertyRef' && heading && item[heading.substring(1)]) {
             return item[heading.substring(1)];
@@ -25,7 +31,6 @@ export default function FieldGroupTemplate(props) {
             pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
         }
         else {
-            // @ts-ignore - An argument for 'pageRef' was not provided.
             pConn.getListActions().insert({}, referenceList.length);
         }
     };
@@ -38,7 +43,6 @@ export default function FieldGroupTemplate(props) {
                 pConn.getListActions().deleteEntry(index, pageReference);
             }
             else {
-                // @ts-ignore - An argument for 'pageRef' was not provided.
                 pConn.getListActions().deleteEntry(index);
             }
         };
@@ -54,7 +58,7 @@ export default function FieldGroupTemplate(props) {
         }, [referenceList?.length]);
         return (_jsx(FieldGroupList, { items: MemoisedChildren, onAdd: allowAddEdit !== false ? addFieldGroupItem : undefined, onDelete: allowAddEdit !== false ? deleteFieldGroupItem : undefined }));
     }
-    pConn.setInheritedProp('displayMode', 'LABELS_LEFT');
+    pConn.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     const memoisedReadOnlyList = useMemo(() => {
         return referenceList.map((item, index) => {
             const key = item[heading] || `field-group-row-${index}`;

package/lib/components/template/FieldGroupTemplate/FieldGroupTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupTemplate.js","sourceRoot":"","sources":["../../../../src/components/template/FieldGroupTemplate/FieldGroupTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport { useMemo } from 'react';\n\nimport { getReferenceList, buildView } from '../../helpers/field-group-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { PConnProps } from '../../../types/PConnProps';\n\ninterface FieldGroupTemplateProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  referenceList?: any[];\n  contextClass: string;\n  renderMode?: string;\n  heading?: string;\n  lookForChildInConfig?: boolean;\n  displayMode?: string;\n  fieldHeader?: string;\n  allowTableEdit: boolean;\n}\n\nexport default function FieldGroupTemplate(props: FieldGroupTemplateProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldGroup = getComponentFromMap('FieldGroup');\n  const FieldGroupList = getComponentFromMap('FieldGroupList');\n\n  const {\n    referenceList = [],\n    renderMode,\n    contextClass,\n    getPConnect,\n    lookForChildInConfig,\n    heading = '',\n    displayMode,\n    fieldHeader,\n    allowTableEdit: allowAddEdit\n  } = props;\n  const pConn = getPConnect();\n  const resolvedList = getReferenceList(pConn);\n  pConn.setReferenceList(resolvedList);\n  const pageReference = `${pConn.getPageReference()}${resolvedList}`;\n  const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'LABELS_LEFT';\n  const HEADING = heading ?? 'Row';\n\n  const getDynamicHeaderProp = (item, index) => {\n    if (fieldHeader === 'propertyRef' && heading && item[heading.substring(1)]) {\n      return item[heading.substring(1)];\n    }\n    return `Row ${index + 1}`;\n  };\n\n  const addRecord = () => {\n    if (PCore.getPCoreVersion()?.includes('8.7')) {\n      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);\n    } else {\n      // @ts-ignore - An argument for 'pageRef' was not provided.\n      pConn.getListActions().insert({}, referenceList.length);\n    }\n  };\n\n  if (!isReadonlyMode) {\n    const addFieldGroupItem = () => {\n      addRecord();\n    };\n    const deleteFieldGroupItem = index => {\n      if (PCore.getPCoreVersion()?.includes('8.7')) {\n        pConn.getListActions().deleteEntry(index, pageReference);\n      } else {\n        // @ts-ignore - An argument for 'pageRef' was not provided.\n        pConn.getListActions().deleteEntry(index);\n      }\n    };\n    if (referenceList.length === 0 && allowAddEdit !== false) {\n      addFieldGroupItem();\n    }\n\n    const MemoisedChildren = useMemo(() => {\n      return referenceList.map((item, index) => ({\n        id: index,\n        name: fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`,\n        children: buildView(pConn, index, lookForChildInConfig)\n      }));\n    }, [referenceList?.length]);\n\n    return (\n      <FieldGroupList\n        items={MemoisedChildren}\n        onAdd={allowAddEdit !== false ? addFieldGroupItem : undefined}\n        onDelete={allowAddEdit !== false ? deleteFieldGroupItem : undefined}\n      />\n    );\n  }\n\n  pConn.setInheritedProp('displayMode', 'LABELS_LEFT');\n  const memoisedReadOnlyList = useMemo(() => {\n    return referenceList.map((item, index) => {\n      const key = item[heading] || `field-group-row-${index}`;\n      return (\n        <FieldGroup key={key} name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}>\n          {buildView(pConn, index, lookForChildInConfig)}\n        </FieldGroup>\n      );\n    });\n  }, []);\n\n  return <div>{memoisedReadOnlyList}</div>;\n}\n"]}
+{"version":3,"file":"FieldGroupTemplate.js","sourceRoot":"","sources":["../../../../src/components/template/FieldGroupTemplate/FieldGroupTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport { useLayoutEffect, useMemo } from 'react';\n\nimport { getReferenceList, buildView } from '../../helpers/field-group-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { PConnProps } from '../../../types/PConnProps';\n\ninterface FieldGroupTemplateProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  referenceList?: any[];\n  contextClass: string;\n  renderMode?: string;\n  heading?: string;\n  lookForChildInConfig?: boolean;\n  displayMode?: string;\n  fieldHeader?: string;\n  allowTableEdit: boolean;\n}\n\nexport default function FieldGroupTemplate(props: FieldGroupTemplateProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldGroup = getComponentFromMap('FieldGroup');\n  const FieldGroupList = getComponentFromMap('FieldGroupList');\n\n  const {\n    referenceList = [],\n    renderMode,\n    contextClass,\n    getPConnect,\n    lookForChildInConfig,\n    heading = '',\n    displayMode,\n    fieldHeader,\n    allowTableEdit: allowAddEdit\n  } = props;\n  const pConn = getPConnect();\n  const resolvedList = getReferenceList(pConn);\n  pConn.setReferenceList(resolvedList);\n  const pageReference = `${pConn.getPageReference()}${resolvedList}`;\n  const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';\n  const HEADING = heading ?? 'Row';\n\n  useLayoutEffect(() => {\n    if (!isReadonlyMode) {\n      // @ts-ignore - Expected 3 arguments, but got 1\n      pConn.getListActions().initDefaultPageInstructions(resolvedList);\n    }\n  }, [referenceList?.length]);\n\n  const getDynamicHeaderProp = (item, index) => {\n    if (fieldHeader === 'propertyRef' && heading && item[heading.substring(1)]) {\n      return item[heading.substring(1)];\n    }\n    return `Row ${index + 1}`;\n  };\n\n  const addRecord = () => {\n    if (PCore.getPCoreVersion()?.includes('8.7')) {\n      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);\n    } else {\n      pConn.getListActions().insert({}, referenceList.length);\n    }\n  };\n\n  if (!isReadonlyMode) {\n    const addFieldGroupItem = () => {\n      addRecord();\n    };\n    const deleteFieldGroupItem = index => {\n      if (PCore.getPCoreVersion()?.includes('8.7')) {\n        pConn.getListActions().deleteEntry(index, pageReference);\n      } else {\n        pConn.getListActions().deleteEntry(index);\n      }\n    };\n    if (referenceList.length === 0 && allowAddEdit !== false) {\n      addFieldGroupItem();\n    }\n\n    const MemoisedChildren = useMemo(() => {\n      return referenceList.map((item, index) => ({\n        id: index,\n        name: fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`,\n        children: buildView(pConn, index, lookForChildInConfig)\n      }));\n    }, [referenceList?.length]);\n\n    return (\n      <FieldGroupList\n        items={MemoisedChildren}\n        onAdd={allowAddEdit !== false ? addFieldGroupItem : undefined}\n        onDelete={allowAddEdit !== false ? deleteFieldGroupItem : undefined}\n      />\n    );\n  }\n\n  pConn.setInheritedProp('displayMode', 'DISPLAY_ONLY');\n  const memoisedReadOnlyList = useMemo(() => {\n    return referenceList.map((item, index) => {\n      const key = item[heading] || `field-group-row-${index}`;\n      return (\n        <FieldGroup key={key} name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}>\n          {buildView(pConn, index, lookForChildInConfig)}\n        </FieldGroup>\n      );\n    });\n  }, []);\n\n  return <div>{memoisedReadOnlyList}</div>;\n}\n"]}