@pega/react-sdk-components 0.23.17 → 0.23.18

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultForm.d.ts","sourceRoot":"","sources":["../../../../src/components/template/DefaultForm/DefaultForm.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,OAAO,mBAAmB,CAAC;AAE3B,iBAAwB,WAAW,CAAC,KAAK,KAAA,eAmCxC;kBAnCuB,WAAW;;;;;;;;eAAX,WAAW"}
+{"version":3,"file":"DefaultForm.d.ts","sourceRoot":"","sources":["../../../../src/components/template/DefaultForm/DefaultForm.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,mBAAmB,CAAC;AAE3B,iBAAwB,WAAW,CAAC,KAAK,KAAA,eAsCxC;kBAtCuB,WAAW;;;;;;;;eAAX,WAAW"}

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

@@ -1,9 +1,12 @@
 import React, { createElement } from "react";
 import PropTypes from "prop-types";
+import { getInstructions } from '../../helpers/template-utils';
 import createPConnectComponent from '../../../bridge/react_pconnect';
 import './DefaultForm.css';
 export default function DefaultForm(props) {
     const { getPConnect, NumCols } = props;
+    const instructions = getInstructions(getPConnect(), props.instructions);
+    const instructionText = instructions?.replace(/<\/?[^>]+(>|$)/g, '');
     let divClass;
     const numCols = NumCols || "1";
     switch (numCols) {
@@ -27,7 +30,9 @@ export default function DefaultForm(props) {
     const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
     // eslint-disable-next-line react/no-array-index-key
     const dfChildren = arChildren.map((kid, idx) => createElement(createPConnectComponent(), { ...kid, key: idx }));
-    return (React.createElement("div", { className: divClass }, dfChildren));
+    return (React.createElement("div", { className: divClass },
+        React.createElement("div", null, instructionText),
+        dfChildren));
 }
 DefaultForm.propTypes = {
     // children: PropTypes.arrayOf(PropTypes.node).isRequired,

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultForm.js","sourceRoot":"","sources":["../../../../src/components/template/DefaultForm/DefaultForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,uBAAuB,MAAM,gCAAgC,CAAC;AAErE,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK;IACvC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEvC,IAAI,QAAgB,CAAC;IAErB,MAAM,OAAO,GAAG,OAAO,IAAI,GAAG,CAAC;IAC/B,QAAQ,OAAO,EAAE;QACf,KAAK,GAAG;YACN,QAAQ,GAAG,8BAA8B,CAAC;YAC1C,MAAM;QACR,KAAK,GAAG;YACN,QAAQ,GAAG,8BAA8B,CAAC;YAC1C,MAAM;QACR,KAAK,GAAG;YACN,QAAQ,GAAG,gCAAgC,CAAC;YAC5C,MAAM;QACR;YACE,QAAQ,GAAG,8BAA8B,CAAC;YAC1C,MAAM;KACT;IAED,YAAY;IAEZ,yFAAyF;IACzF,uFAAuF;IACvF,mBAAmB;IACnB,MAAM,UAAU,GAAG,WAAW,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,WAAW,EAAE,CAAC;IAC9E,oDAAoD;IACpD,MAAM,UAAU,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,aAAa,CAAC,uBAAuB,EAAE,EAAE,EAAC,GAAG,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,CAAC,CAAC,CAAC;IAE9G,OAAO,CACL,6BAAK,SAAS,EAAE,QAAQ,IACrB,UAAU,CACP,CACP,CAAA;AACH,CAAC;AAED,WAAW,CAAC,SAAS,GAAG;IACtB,0DAA0D;IAC1D,OAAO,EAAE,SAAS,CAAC,MAAM;CAC1B,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG;IACzB,OAAO,EAAE,GAAG;CACb,CAAC","sourcesContent":["import React, { createElement } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport createPConnectComponent from '../../../bridge/react_pconnect';\n\nimport './DefaultForm.css';\n\nexport default function DefaultForm(props) {\n  const { getPConnect, NumCols } = props;\n\n  let divClass: string;\n\n  const numCols = NumCols || \"1\";\n  switch (numCols) {\n    case \"1\" :\n      divClass = \"psdk-default-form-one-column\";\n      break;\n    case \"2\" :\n      divClass = \"psdk-default-form-two-column\";\n      break;\n    case \"3\" :\n      divClass = \"psdk-default-form-three-column\";\n      break;\n    default :\n      divClass = \"psdk-default-form-one-column\";\n      break;\n  }\n\n  // debugger;\n\n  // repoint the children because they are in a region and we need to not render the region\n  // to take the children and create components for them, put in an array and pass as the\n  // defaultForm kids\n  const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();\n  // eslint-disable-next-line react/no-array-index-key\n  const dfChildren = arChildren.map((kid, idx) => createElement(createPConnectComponent(), {...kid, key: idx}));\n\n  return (\n    <div className={divClass}>\n      {dfChildren}\n    </div>\n  )\n}\n\nDefaultForm.propTypes = {\n  // children: PropTypes.arrayOf(PropTypes.node).isRequired,\n  NumCols: PropTypes.string\n};\n\nDefaultForm.defaultProps = {\n  NumCols: \"1\"\n};\n"]}
+{"version":3,"file":"DefaultForm.js","sourceRoot":"","sources":["../../../../src/components/template/DefaultForm/DefaultForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,uBAAuB,MAAM,gCAAgC,CAAC;AAErE,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK;IACvC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACvC,MAAM,YAAY,GAAG,eAAe,CAAC,WAAW,EAAE,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IACxE,MAAM,eAAe,GAAG,YAAY,EAAE,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;IAErE,IAAI,QAAgB,CAAC;IAErB,MAAM,OAAO,GAAG,OAAO,IAAI,GAAG,CAAC;IAC/B,QAAQ,OAAO,EAAE;QACf,KAAK,GAAG;YACN,QAAQ,GAAG,8BAA8B,CAAC;YAC1C,MAAM;QACR,KAAK,GAAG;YACN,QAAQ,GAAG,8BAA8B,CAAC;YAC1C,MAAM;QACR,KAAK,GAAG;YACN,QAAQ,GAAG,gCAAgC,CAAC;YAC5C,MAAM;QACR;YACE,QAAQ,GAAG,8BAA8B,CAAC;YAC1C,MAAM;KACT;IAED,YAAY;IAEZ,yFAAyF;IACzF,uFAAuF;IACvF,mBAAmB;IACnB,MAAM,UAAU,GAAG,WAAW,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,WAAW,EAAE,CAAC;IAC9E,oDAAoD;IACpD,MAAM,UAAU,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,aAAa,CAAC,uBAAuB,EAAE,EAAE,EAAC,GAAG,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,CAAC,CAAC,CAAC;IAE9G,OAAO,CACL,6BAAK,SAAS,EAAE,QAAQ;QACtB,iCAAM,eAAe,CAAO;QAC3B,UAAU,CACP,CACP,CAAA;AACH,CAAC;AAED,WAAW,CAAC,SAAS,GAAG;IACtB,0DAA0D;IAC1D,OAAO,EAAE,SAAS,CAAC,MAAM;CAC1B,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG;IACzB,OAAO,EAAE,GAAG;CACb,CAAC","sourcesContent":["import React, { createElement } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { getInstructions } from '../../helpers/template-utils';\nimport createPConnectComponent from '../../../bridge/react_pconnect';\n\nimport './DefaultForm.css';\n\nexport default function DefaultForm(props) {\n  const { getPConnect, NumCols } = props;\n  const instructions = getInstructions(getPConnect(), props.instructions);\n  const instructionText = instructions?.replace(/<\\/?[^>]+(>|$)/g, '');\n\n  let divClass: string;\n\n  const numCols = NumCols || \"1\";\n  switch (numCols) {\n    case \"1\" :\n      divClass = \"psdk-default-form-one-column\";\n      break;\n    case \"2\" :\n      divClass = \"psdk-default-form-two-column\";\n      break;\n    case \"3\" :\n      divClass = \"psdk-default-form-three-column\";\n      break;\n    default :\n      divClass = \"psdk-default-form-one-column\";\n      break;\n  }\n\n  // debugger;\n\n  // repoint the children because they are in a region and we need to not render the region\n  // to take the children and create components for them, put in an array and pass as the\n  // defaultForm kids\n  const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();\n  // eslint-disable-next-line react/no-array-index-key\n  const dfChildren = arChildren.map((kid, idx) => createElement(createPConnectComponent(), {...kid, key: idx}));\n\n  return (\n    <div className={divClass}>\n      <div>{instructionText}</div>\n      {dfChildren}\n    </div>\n  )\n}\n\nDefaultForm.propTypes = {\n  // children: PropTypes.arrayOf(PropTypes.node).isRequired,\n  NumCols: PropTypes.string\n};\n\nDefaultForm.defaultProps = {\n  NumCols: \"1\"\n};\n"]}

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

@@ -5,11 +5,13 @@ declare namespace Details {
     var defaultProps: {
         label: undefined;
         showLabel: boolean;
+        showHighlightedData: boolean;
     };
     var propTypes: {
         showLabel: PropTypes.Requireable<boolean>;
         label: PropTypes.Requireable<string>;
         getPConnect: PropTypes.Validator<(...args: any[]) => any>;
+        showHighlightedData: PropTypes.Requireable<boolean>;
     };
 }
 export default Details;

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

@@ -1 +1 @@
-{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/Details/Details/Details.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,iBAAwB,OAAO,CAAC,KAAK,KAAA,eA6BpC;kBA7BuB,OAAO;;;;;;;;;;;eAAP,OAAO"}
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/Details/Details/Details.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,iBAAwB,OAAO,CAAC,KAAK,KAAA,eAyDpC;kBAzDuB,OAAO;;;;;;;;;;;;;eAAP,OAAO"}

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

@@ -1,33 +1,50 @@
-import React from 'react';
+import React, { createElement } from 'react';
 import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
-import DetailsFields from '../../../designSystemExtension/DetailsFields';
+import createPConnectComponent from '../../../../bridge/react_pconnect';
+import FieldGroup from '../../../designSystemExtension/FieldGroup';
 export default function Details(props) {
-    const { children, label, showLabel, getPConnect } = props;
-    const arFields = [];
+    const { label, showLabel, getPConnect, showHighlightedData } = props;
     // Get the inherited props from the parent to determine label settings
     const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
-    for (const child of children) {
-        const theChildPConn = child.props.getPConnect();
-        theChildPConn.setInheritedProp('displayMode', 'LABELS_LEFT');
-        theChildPConn.setInheritedProp('readOnly', true);
-        const theChildrenOfChild = theChildPConn.getChildren();
-        arFields.push(theChildrenOfChild);
+    // 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('readOnly', true);
+    const children = getPConnect()
+        .getChildren()
+        .map((configObject, index) => createElement(createPConnectComponent(), {
+        ...configObject,
+        // eslint-disable-next-line react/no-array-index-key
+        key: index.toString()
+    }));
+    // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
+    let highlightedDataArr = [];
+    if (showHighlightedData) {
+        const { highlightedData = [] } = getPConnect().getRawMetadata().config;
+        highlightedDataArr = highlightedData.map(field => {
+            field.config.displayMode = 'STACKED_LARGE_VAL';
+            // Mark as status display when using pyStatusWork
+            if (field.config.value === '@P .pyStatusWork') {
+                field.type = 'TextInput';
+                field.config.displayAsStatus = true;
+            }
+            return getPConnect().createComponent(field);
+        });
     }
-    return (React.createElement("div", { id: 'DetailsOneColumn' },
-        propsToUse.showLabel && (React.createElement("div", { className: 'template-title-container' },
-            React.createElement("span", null, propsToUse.label))),
-        React.createElement(Grid, { container: true, spacing: 1 },
-            React.createElement(Grid, { item: true, xs: 12 },
-                React.createElement(DetailsFields, { fields: arFields[0] })))));
+    return (React.createElement(FieldGroup, { name: propsToUse.showLabel ? propsToUse.label : '' },
+        showHighlightedData && highlightedDataArr.length > 0 && (React.createElement(Grid, { container: true, spacing: 1, style: { padding: '0 0 1em' } }, highlightedDataArr.map((child, i) => (React.createElement(Grid, { item: true, xs: 12, key: `hf-${i + 1}` }, child))))),
+        React.createElement(Grid, { container: true, spacing: 1 }, children.map((child, i) => (React.createElement(Grid, { item: true, xs: 12, key: `r-${i + 1}` }, child))))));
 }
 Details.defaultProps = {
     label: undefined,
-    showLabel: true
+    showLabel: true,
+    showHighlightedData: false
 };
 Details.propTypes = {
     showLabel: PropTypes.bool,
     label: PropTypes.string,
-    getPConnect: PropTypes.func.isRequired
+    getPConnect: PropTypes.func.isRequired,
+    showHighlightedData: PropTypes.bool
 };
 //# sourceMappingURL=Details.js.map

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,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,aAAa,MAAM,8CAA8C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK;IACnC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,QAAQ,GAAe,EAAE,CAAC;IAEhC,sEAAsE;IACtE,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAE9E,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE;QAC5B,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QAChD,aAAa,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QAC7D,aAAa,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACjD,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC;QACvD,QAAQ,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACnC;IAED,OAAO,CACL,6BAAK,EAAE,EAAC,kBAAkB;QACvB,UAAU,CAAC,SAAS,IAAI,CACvB,6BAAK,SAAS,EAAC,0BAA0B;YACvC,kCAAO,UAAU,CAAC,KAAK,CAAQ,CAC3B,CACP;QACD,oBAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC;YACxB,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE;gBACf,oBAAC,aAAa,IAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAI,CACjC,CACF,CACH,CACP,CAAC;AACJ,CAAC;AAED,OAAO,CAAC,YAAY,GAAG;IACrB,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF,OAAO,CAAC,SAAS,GAAG;IAClB,SAAS,EAAE,SAAS,CAAC,IAAI;IACzB,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,WAAW,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CACvC,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Grid from '@material-ui/core/Grid';\nimport DetailsFields from '../../../designSystemExtension/DetailsFields';\n\nexport default function Details(props) {\n  const { children, label, showLabel, getPConnect } = props;\n  const arFields: Array<any> = [];\n\n  // Get the inherited props from the parent to determine label settings\n  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };\n\n  for (const child of children) {\n    const theChildPConn = child.props.getPConnect();\n    theChildPConn.setInheritedProp('displayMode', 'LABELS_LEFT');\n    theChildPConn.setInheritedProp('readOnly', true);\n    const theChildrenOfChild = theChildPConn.getChildren();\n    arFields.push(theChildrenOfChild);\n  }\n\n  return (\n    <div id='DetailsOneColumn'>\n      {propsToUse.showLabel && (\n        <div className='template-title-container'>\n          <span>{propsToUse.label}</span>\n        </div>\n      )}\n      <Grid container spacing={1}>\n        <Grid item xs={12}>\n          <DetailsFields fields={arFields[0]} />\n        </Grid>\n      </Grid>\n    </div>\n  );\n}\n\nDetails.defaultProps = {\n  label: undefined,\n  showLabel: true\n};\n\nDetails.propTypes = {\n  showLabel: PropTypes.bool,\n  label: PropTypes.string,\n  getPConnect: PropTypes.func.isRequired\n};\n"]}
+{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../../../src/components/template/Details/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createElement } from 'react';\nimport PropTypes from 'prop-types';\nimport Grid from '@material-ui/core/Grid';\nimport createPConnectComponent from '../../../../bridge/react_pconnect';\nimport FieldGroup from '../../../designSystemExtension/FieldGroup';\n\nexport default function Details(props) {\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()\n    .getChildren()\n    .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().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);\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\nDetails.defaultProps = {\n  label: undefined,\n  showLabel: true,\n  showHighlightedData: false\n};\n\nDetails.propTypes = {\n  showLabel: PropTypes.bool,\n  label: PropTypes.string,\n  getPConnect: PropTypes.func.isRequired,\n  showHighlightedData: PropTypes.bool\n};\n"]}

package/lib/components/template/Details/DetailsThreeColumn/DetailsThreeColumn.d.ts

@@ -1,7 +1,18 @@
 /// <reference types="react" />
+import PropTypes from 'prop-types';
 declare function DetailsThreeColumn(props: any): JSX.Element;
 declare namespace DetailsThreeColumn {
-    var propTypes: {};
+    var defaultProps: {
+        label: undefined;
+        showLabel: boolean;
+        showHighlightedData: boolean;
+    };
+    var propTypes: {
+        showLabel: PropTypes.Requireable<boolean>;
+        label: PropTypes.Requireable<string>;
+        getPConnect: PropTypes.Validator<(...args: any[]) => any>;
+        showHighlightedData: PropTypes.Requireable<boolean>;
+    };
 }
 export default DetailsThreeColumn;
 //# sourceMappingURL=DetailsThreeColumn.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DetailsThreeColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx"],"names":[],"mappings":";AAKA,iBAAwB,kBAAkB,CAAC,KAAK,KAAA,eAgC/C;kBAhCuB,kBAAkB;;;eAAlB,kBAAkB"}
+{"version":3,"file":"DetailsThreeColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,iBAAwB,kBAAkB,CAAC,KAAK,KAAA,eAyD/C;kBAzDuB,kBAAkB;;;;;;;;;;;;;eAAlB,kBAAkB"}

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

@@ -1,34 +1,50 @@
-import React from 'react';
-// import PropTypes from "prop-types";
+import React, { createElement } from 'react';
+import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
-import DetailsFields from '../../../designSystemExtension/DetailsFields';
+import createPConnectComponent from '../../../../bridge/react_pconnect';
+import FieldGroup from '../../../designSystemExtension/FieldGroup';
 export default function DetailsThreeColumn(props) {
-    const { children } = props;
-    const arFields = [];
-    for (const child of children) {
-        const theChildPConn = child.props.getPConnect();
-        theChildPConn.setInheritedProp('displayMode', 'LABELS_LEFT');
-        theChildPConn.setInheritedProp('readOnly', true);
-        const theChildrenOfChild = theChildPConn.getChildren();
-        arFields.push(theChildrenOfChild);
+    const { label, showLabel, getPConnect, showHighlightedData } = props;
+    // Get the inherited props from the parent to determine label settings
+    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('readOnly', true);
+    const children = getPConnect()
+        .getChildren()
+        .map((configObject, index) => createElement(createPConnectComponent(), {
+        ...configObject,
+        // eslint-disable-next-line react/no-array-index-key
+        key: index.toString()
+    }));
+    // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
+    let highlightedDataArr = [];
+    if (showHighlightedData) {
+        const { highlightedData = [] } = getPConnect().getRawMetadata().config;
+        highlightedDataArr = highlightedData.map(field => {
+            field.config.displayMode = 'STACKED_LARGE_VAL';
+            // Mark as status display when using pyStatusWork
+            if (field.config.value === '@P .pyStatusWork') {
+                field.type = 'TextInput';
+                field.config.displayAsStatus = true;
+            }
+            return getPConnect().createComponent(field);
+        });
     }
-    if (arFields.length !== 3) {
-        // eslint-disable-next-line no-console
-        console.error(`DetailsThreeColumn expects 3 children and received ${arFields.length}`);
-    }
-    return (React.createElement("div", { id: 'DetailsThreeColumn' },
-        React.createElement(Grid, { container: true, spacing: 1 },
-            React.createElement(Grid, { item: true, xs: 4 },
-                React.createElement(DetailsFields, { fields: arFields[0] })),
-            React.createElement(Grid, { item: true, xs: 4 },
-                React.createElement(DetailsFields, { fields: arFields[1] })),
-            React.createElement(Grid, { item: true, xs: 4 },
-                React.createElement(DetailsFields, { fields: arFields[2] })))));
+    return (React.createElement(FieldGroup, { name: propsToUse.showLabel ? propsToUse.label : '' },
+        showHighlightedData && highlightedDataArr.length > 0 && (React.createElement(Grid, { container: true, spacing: 1, style: { padding: '0 0 1em' } }, highlightedDataArr.map((child, i) => (React.createElement(Grid, { item: true, xs: 4, key: `hf-${i + 1}` }, child))))),
+        React.createElement(Grid, { container: true, spacing: 1 }, children.map((child, i) => (React.createElement(Grid, { item: true, xs: 4, key: `r-${i + 1}` }, child))))));
 }
+DetailsThreeColumn.defaultProps = {
+    label: undefined,
+    showLabel: true,
+    showHighlightedData: false
+};
 DetailsThreeColumn.propTypes = {
-// showLabel: PropTypes.bool,
-// label: PropTypes.string,
-// getPConnect: PropTypes.func.isRequired,
-// template: PropTypes.string.isRequired
+    showLabel: PropTypes.bool,
+    label: PropTypes.string,
+    getPConnect: PropTypes.func.isRequired,
+    showHighlightedData: PropTypes.bool
 };
 //# sourceMappingURL=DetailsThreeColumn.js.map

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,KAAK,MAAM,OAAO,CAAC;AAC1B,sCAAsC;AACtC,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,aAAa,MAAM,8CAA8C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK;IAC9C,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,MAAM,QAAQ,GAAe,EAAE,CAAC;IAEhC,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE;QAC5B,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QAChD,aAAa,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QAC7D,aAAa,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACjD,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC;QACvD,QAAQ,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACnC;IAED,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;QACzB,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,sDAAsD,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;KACxF;IAED,OAAO,CACL,6BAAK,EAAE,EAAC,oBAAoB;QAC1B,oBAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC;YACxB,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC;gBACd,oBAAC,aAAa,IAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAI,CACjC;YACP,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC;gBACd,oBAAC,aAAa,IAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAI,CACjC;YACP,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC;gBACd,oBAAC,aAAa,IAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAI,CACjC,CACF,CACH,CACP,CAAC;AACJ,CAAC;AAED,kBAAkB,CAAC,SAAS,GAAG;AAC7B,6BAA6B;AAC7B,2BAA2B;AAC3B,0CAA0C;AAC1C,wCAAwC;CACzC,CAAC","sourcesContent":["import React from 'react';\n// import PropTypes from \"prop-types\";\nimport Grid from '@material-ui/core/Grid';\nimport DetailsFields from '../../../designSystemExtension/DetailsFields';\n\nexport default function DetailsThreeColumn(props) {\n  const { children } = props;\n  const arFields: Array<any> = [];\n\n  for (const child of children) {\n    const theChildPConn = child.props.getPConnect();\n    theChildPConn.setInheritedProp('displayMode', 'LABELS_LEFT');\n    theChildPConn.setInheritedProp('readOnly', true);\n    const theChildrenOfChild = theChildPConn.getChildren();\n    arFields.push(theChildrenOfChild);\n  }\n\n  if (arFields.length !== 3) {\n    // eslint-disable-next-line no-console\n    console.error(`DetailsThreeColumn expects 3 children and received ${arFields.length}`);\n  }\n\n  return (\n    <div id='DetailsThreeColumn'>\n      <Grid container spacing={1}>\n        <Grid item xs={4}>\n          <DetailsFields fields={arFields[0]} />\n        </Grid>\n        <Grid item xs={4}>\n          <DetailsFields fields={arFields[1]} />\n        </Grid>\n        <Grid item xs={4}>\n          <DetailsFields fields={arFields[2]} />\n        </Grid>\n      </Grid>\n    </div>\n  );\n}\n\nDetailsThreeColumn.propTypes = {\n  // showLabel: PropTypes.bool,\n  // label: PropTypes.string,\n  // getPConnect: PropTypes.func.isRequired,\n  // template: PropTypes.string.isRequired\n};\n"]}
+{"version":3,"file":"DetailsThreeColumn.js","sourceRoot":"","sources":["../../../../../src/components/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createElement } from 'react';\nimport PropTypes from 'prop-types';\nimport Grid from '@material-ui/core/Grid';\nimport createPConnectComponent from '../../../../bridge/react_pconnect';\nimport FieldGroup from '../../../designSystemExtension/FieldGroup';\n\nexport default function DetailsThreeColumn(props) {\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()\n    .getChildren()\n    .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().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);\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\nDetailsThreeColumn.defaultProps = {\n  label: undefined,\n  showLabel: true,\n  showHighlightedData: false\n};\n\nDetailsThreeColumn.propTypes = {\n  showLabel: PropTypes.bool,\n  label: PropTypes.string,\n  getPConnect: PropTypes.func.isRequired,\n  showHighlightedData: PropTypes.bool\n};\n"]}

package/lib/components/template/Details/DetailsTwoColumn/DetailsTwoColumn.d.ts

@@ -1,7 +1,18 @@
 /// <reference types="react" />
+import PropTypes from 'prop-types';
 declare function DetailsTwoColumn(props: any): JSX.Element;
 declare namespace DetailsTwoColumn {
-    var propTypes: {};
+    var defaultProps: {
+        label: undefined;
+        showLabel: boolean;
+        showHighlightedData: boolean;
+    };
+    var propTypes: {
+        showLabel: PropTypes.Requireable<boolean>;
+        label: PropTypes.Requireable<string>;
+        getPConnect: PropTypes.Validator<(...args: any[]) => any>;
+        showHighlightedData: PropTypes.Requireable<boolean>;
+    };
 }
 export default DetailsTwoColumn;
 //# sourceMappingURL=DetailsTwoColumn.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DetailsTwoColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx"],"names":[],"mappings":";AAKA,iBAAwB,gBAAgB,CAAC,KAAK,KAAA,eA8B7C;kBA9BuB,gBAAgB;;;eAAhB,gBAAgB"}
+{"version":3,"file":"DetailsTwoColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,iBAAwB,gBAAgB,CAAC,KAAK,KAAA,eAyD7C;kBAzDuB,gBAAgB;;;;;;;;;;;;;eAAhB,gBAAgB"}

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

@@ -1,32 +1,50 @@
-import React from "react";
-// import PropTypes from "prop-types";
+import React, { createElement } from 'react';
+import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
-import DetailsFields from '../../../designSystemExtension/DetailsFields';
+import createPConnectComponent from '../../../../bridge/react_pconnect';
+import FieldGroup from '../../../designSystemExtension/FieldGroup';
 export default function DetailsTwoColumn(props) {
-    const { children } = props;
-    const arFields = [];
-    for (const child of children) {
-        const theChildPConn = child.props.getPConnect();
-        theChildPConn.setInheritedProp('displayMode', 'LABELS_LEFT');
-        theChildPConn.setInheritedProp('readOnly', true);
-        const theChildrenOfChild = theChildPConn.getChildren();
-        arFields.push(theChildrenOfChild);
+    const { label, showLabel, getPConnect, showHighlightedData } = props;
+    // Get the inherited props from the parent to determine label settings
+    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('readOnly', true);
+    const children = getPConnect()
+        .getChildren()
+        .map((configObject, index) => createElement(createPConnectComponent(), {
+        ...configObject,
+        // eslint-disable-next-line react/no-array-index-key
+        key: index.toString()
+    }));
+    // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
+    let highlightedDataArr = [];
+    if (showHighlightedData) {
+        const { highlightedData = [] } = getPConnect().getRawMetadata().config;
+        highlightedDataArr = highlightedData.map(field => {
+            field.config.displayMode = 'STACKED_LARGE_VAL';
+            // Mark as status display when using pyStatusWork
+            if (field.config.value === '@P .pyStatusWork') {
+                field.type = 'TextInput';
+                field.config.displayAsStatus = true;
+            }
+            return getPConnect().createComponent(field);
+        });
     }
-    if (arFields.length !== 2) {
-        // eslint-disable-next-line no-console
-        console.error(`DetailsTwoColumn expects 2 children and received ${arFields.length}`);
-    }
-    return (React.createElement("div", { id: "DetailsTwoColumn" },
-        React.createElement(Grid, { container: true, spacing: 1 },
-            React.createElement(Grid, { item: true, xs: 6 },
-                React.createElement(DetailsFields, { fields: arFields[0] })),
-            React.createElement(Grid, { item: true, xs: 6 },
-                React.createElement(DetailsFields, { fields: arFields[1] })))));
+    return (React.createElement(FieldGroup, { name: propsToUse.showLabel ? propsToUse.label : '' },
+        showHighlightedData && highlightedDataArr.length > 0 && (React.createElement(Grid, { container: true, spacing: 1, style: { padding: '0 0 1em' } }, highlightedDataArr.map((child, i) => (React.createElement(Grid, { item: true, xs: 6, key: `hf-${i + 1}` }, child))))),
+        React.createElement(Grid, { container: true, spacing: 1 }, children.map((child, i) => (React.createElement(Grid, { item: true, xs: 6, key: `r-${i + 1}` }, child))))));
 }
+DetailsTwoColumn.defaultProps = {
+    label: undefined,
+    showLabel: true,
+    showHighlightedData: false
+};
 DetailsTwoColumn.propTypes = {
-// showLabel: PropTypes.bool,
-// label: PropTypes.string,
-// getPConnect: PropTypes.func.isRequired,
-// template: PropTypes.string.isRequired
+    showLabel: PropTypes.bool,
+    label: PropTypes.string,
+    getPConnect: PropTypes.func.isRequired,
+    showHighlightedData: PropTypes.bool
 };
 //# sourceMappingURL=DetailsTwoColumn.js.map

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,KAAK,MAAM,OAAO,CAAC;AAC1B,sCAAsC;AACtC,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,aAAa,MAAM,8CAA8C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK;IAC5C,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,MAAM,QAAQ,GAAe,EAAE,CAAC;IAEhC,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE;QAC5B,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QAChD,aAAa,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QAC7D,aAAa,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACjD,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC;QACvD,QAAQ,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACnC;IAED,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;QACzB,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,oDAAoD,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;KACtF;IAGD,OAAO,CACL,6BAAK,EAAE,EAAC,kBAAkB;QACxB,oBAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC;YACxB,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC;gBACd,oBAAC,aAAa,IAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAI,CACjC;YACP,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC;gBACd,oBAAC,aAAa,IAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAI,CACjC,CACF,CACH,CACP,CAAA;AACH,CAAC;AAED,gBAAgB,CAAC,SAAS,GAAG;AAC3B,6BAA6B;AAC7B,2BAA2B;AAC3B,0CAA0C;AAC1C,wCAAwC;CACzC,CAAC","sourcesContent":["import React from \"react\";\n// import PropTypes from \"prop-types\";\nimport Grid from '@material-ui/core/Grid';\nimport DetailsFields from '../../../designSystemExtension/DetailsFields';\n\nexport default function DetailsTwoColumn(props) {\n  const { children } = props;\n  const arFields: Array<any> = [];\n\n  for (const child of children) {\n    const theChildPConn = child.props.getPConnect();\n    theChildPConn.setInheritedProp('displayMode', 'LABELS_LEFT');\n    theChildPConn.setInheritedProp('readOnly', true);\n    const theChildrenOfChild = theChildPConn.getChildren();\n    arFields.push(theChildrenOfChild);\n  }\n\n  if (arFields.length !== 2) {\n    // eslint-disable-next-line no-console\n    console.error(`DetailsTwoColumn expects 2 children and received ${arFields.length}`);\n  }\n\n\n  return (\n    <div id=\"DetailsTwoColumn\">\n      <Grid container spacing={1}>\n        <Grid item xs={6}>\n          <DetailsFields fields={arFields[0]} />\n        </Grid>\n        <Grid item xs={6}>\n          <DetailsFields fields={arFields[1]} />\n        </Grid>\n      </Grid>\n    </div>\n  )\n}\n\nDetailsTwoColumn.propTypes = {\n  // showLabel: PropTypes.bool,\n  // label: PropTypes.string,\n  // getPConnect: PropTypes.func.isRequired,\n  // template: PropTypes.string.isRequired\n};\n"]}
+{"version":3,"file":"DetailsTwoColumn.js","sourceRoot":"","sources":["../../../../../src/components/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createElement } from 'react';\nimport PropTypes from 'prop-types';\nimport Grid from '@material-ui/core/Grid';\nimport createPConnectComponent from '../../../../bridge/react_pconnect';\nimport FieldGroup from '../../../designSystemExtension/FieldGroup';\n\nexport default function DetailsTwoColumn(props) {\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()\n    .getChildren()\n    .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().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);\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\nDetailsTwoColumn.defaultProps = {\n  label: undefined,\n  showLabel: true,\n  showHighlightedData: false\n};\n\nDetailsTwoColumn.propTypes = {\n  showLabel: PropTypes.bool,\n  label: PropTypes.string,\n  getPConnect: PropTypes.func.isRequired,\n  showHighlightedData: PropTypes.bool\n};\n"]}

package/lib/components/template/ListView/DefaultViewMeta.d.ts

@@ -0,0 +1,91 @@
+export default function getDefaultViewMeta(fieldMeta: any, classID: any, showField: any): {
+    type: string;
+    config: {
+        trueLabel: string;
+        falseLabel: string;
+        caption: string;
+        label: undefined;
+        associationID: any;
+        associationLabel?: string | undefined;
+        value: string;
+        fieldType: any;
+        propertyType: any;
+        classID: any;
+        displayAs: any;
+        displayAsLink: any;
+        category: any;
+        show: any;
+    };
+} | {
+    type: string;
+    config: {
+        datasource: {
+            source: string;
+            fields: {
+                value: string;
+            };
+        };
+        associationID: any;
+        associationLabel?: string | undefined;
+        value: string;
+        label: string;
+        fieldType: any;
+        propertyType: any;
+        classID: any;
+        displayAs: any;
+        displayAsLink: any;
+        category: any;
+        show: any;
+    };
+} | {
+    type: string;
+    config: {
+        value: string;
+        placeholder: string;
+        displayAs: string;
+        associationID: any;
+        associationLabel: undefined;
+        label: string;
+        fieldType: any;
+        propertyType: any;
+        classID: any;
+        displayAsLink: any;
+        category: any;
+        show: any;
+    };
+} | {
+    type: string;
+    config: {
+        placeholder: string;
+        listType: string;
+        datasource: string;
+        deferDatasource: boolean;
+        associationID: any;
+        associationLabel?: string | undefined;
+        value: string;
+        label: string;
+        fieldType: any;
+        propertyType: any;
+        classID: any;
+        displayAs: any;
+        displayAsLink: any;
+        category: any;
+        show: any;
+    };
+} | {
+    type: any;
+    config: {
+        associationID: any;
+        associationLabel?: string | undefined;
+        value: string;
+        label: string;
+        fieldType: any;
+        propertyType: any;
+        classID: any;
+        displayAs: any;
+        displayAsLink: any;
+        category: any;
+        show: any;
+    };
+};
+//# sourceMappingURL=DefaultViewMeta.d.ts.map

package/lib/components/template/ListView/DefaultViewMeta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultViewMeta.d.ts","sourceRoot":"","sources":["../../../../src/components/template/ListView/DefaultViewMeta.js"],"names":[],"mappings":"AAqCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwLC"}