@pega/react-sdk-components 0.23.0

package/lib/bridge/react_pconnect.js

@@ -0,0 +1,334 @@
+import React, { Children, Component, createElement } from "react";
+// import { render, unmountComponentAtNode } from "react-dom";
+import PropTypes from "prop-types";
+import { connect, shallowEqual } from "react-redux";
+import ComponentMap, { LazyMap as LazyComponentMap } from '../components_map'; // was '../../../../../src/components_map';
+import StoreContext from "./Context/StoreContext";
+// const pathToComponents = "../../../../../src/components";  /* When bridge was local, it was "../components" */
+// For now, NOT doing lazy loading - needs some work on the loader to work with TypeScript
+// As we add components, we'll need to import them here and add to the switch statement
+//    below in getComponent!
+import ErrorBoundary from '../components/infra/ErrorBoundary';
+import { SdkComponentMap } from "./helpers/sdk_component_map";
+const connectRedux = (component, c11nEnv) => {
+    // console.log(`in connectRedux: ${component.name}`);
+    return connect((state, ownProps) => {
+        let addProps = {};
+        const obj = {};
+        // JA - testing
+        // const theCompName = c11nEnv.getComponentName();
+        // console.log(`in connect mapStateToProps callback for: ${theCompName}`);
+        // if ( theCompName === "ViewContainer" || theCompName === "View") {
+        //   debugger;
+        // }
+        if (typeof component.additionalProps === "object") {
+            addProps = c11nEnv.resolveConfigProps(component.additionalProps);
+        }
+        else if (typeof component.additionalProps === "function") {
+            addProps = c11nEnv.resolveConfigProps(component.additionalProps(state, ownProps.getPConnect));
+        }
+        // const obj = c11nEnv.getConfigProps();
+        c11nEnv.getConfigProps(obj);
+        // console.log(`connectRedux: connect callback: ${c11nEnv.getComponentName()}`);
+        // debugging/investigation help
+        // if (obj.routingInfo) {
+        //   console.log( `${theCompName}: BEFORE populateAdditionalProps: obj.routingInfo: ${JSON.stringify(obj.routingInfo)}`);
+        // }
+        // populate additional props which are component specific and not present in configurations
+        // This block can be removed once all these props will be added as part of configs
+        c11nEnv.populateAdditionalProps(obj);
+        // debugging/investigation help
+        // if (obj.routingInfo) {
+        //   console.log( `${theCompName}: AFTER populateAdditionalProps: obj.routingInfo: ${JSON.stringify(obj.routingInfo)}`);
+        //   // if (theCompName === "ViewContainer") {
+        //   //   debugger;
+        //   // }
+        // }
+        return {
+            ...obj,
+            ...addProps
+        };
+    }, null, null, {
+        context: StoreContext,
+        areStatePropsEqual: (next, prev) => {
+            const allStateProps = c11nEnv.getStateProps();
+            for (const key in allStateProps) {
+                // eslint-disable-next-line no-undef
+                if (!shallowEqual(next[key], prev[key]) || (next.routingInfo && !PCore.isDeepEqual(next.routingInfo, prev.routingInfo))) {
+                    return false;
+                }
+            }
+            /* TODO For some rawConfig we are not getting routingInfo under allStateProps */
+            // eslint-disable-next-line no-undef
+            if ('routingInfo' in next && (!shallowEqual(next.routingInfo, prev.routingInfo) || !PCore.isDeepEqual(next.routingInfo, prev.routingInfo))) {
+                return false;
+            }
+            // For CaseSummary (when status === ".pyStatusWork"), we need to compare changes in
+            //  primaryFields and secondary Fields
+            if (allStateProps.status === ".pyStatusWork") {
+                for (const key in prev) {
+                    // eslint-disable-next-line no-undef
+                    if (!PCore.isDeepEqual(next[key], prev[key])) {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        }
+    })(component);
+};
+const getComponent = (c11nEnv, declarative) => {
+    // PCore is defined in pxBootstrapShell - eventually will be exported in place of constellationCore
+    // eslint-disable-next-line no-undef
+    const ComponentsRegistry = PCore.getComponentsRegistry();
+    const type = c11nEnv.getComponentName();
+    const componentObj = ComponentsRegistry.getComponent(type);
+    const componentType = (componentObj && componentObj.component) || type;
+    // JEA - modifying logic before bailing to RootContainer logic to work around async loading problem
+    let component = LazyComponentMap[componentType] /* || window[componentType] */;
+    // NOTE: Until we get lazy loading working, maintain this for each component we add
+    if (component === undefined) {
+        if (SdkComponentMap) {
+            // This is the node_modules version of react_pconnect!
+            const theLocalComponent = SdkComponentMap.getLocalComponentMap()[componentType];
+            if (theLocalComponent !== undefined) {
+                // eslint-disable-next-line no-console
+                console.log(`react_pconnect getComponent found ${componentType}: Local`);
+                component = theLocalComponent;
+            }
+            else {
+                const thePegaProvidedComponent = SdkComponentMap.getPegaProvidedComponentMap()[componentType];
+                if (thePegaProvidedComponent !== undefined) {
+                    // console.log(`react_pconnect getComponent found ${componentType}: Pega-provided`);
+                    component = thePegaProvidedComponent;
+                }
+                else {
+                    // eslint-disable-next-line no-console
+                    console.error(`react_pconnect: getComponent doesn't have an entry for type ${type}`);
+                    component = ErrorBoundary;
+                }
+            }
+        }
+        else {
+            // We no longer handle the "old" switch statement that was here in the original packaging.
+            //  All components seen here need to be in the SdkComponentMap
+            // eslint-disable-next-line no-console
+            console.error(`SdkComponentMap not defined! Unable to process component: ${componentType}`);
+        }
+    }
+    else {
+        // eslint-disable-next-line no-console
+        console.log(`getComponent doesn't have an entry for component ${component}`);
+        component = ErrorBoundary;
+    }
+    // Declarative components already connected to redux so return without connect.
+    if (declarative) {
+        return component;
+    }
+    if (c11nEnv.isConditionExist()) {
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        component = connectRedux(createPConnectComponent(true), c11nEnv);
+    }
+    else {
+        component = connectRedux(component, c11nEnv);
+    }
+    return component;
+};
+/**
+ *
+ * @param {*} declarative
+ * @returns {React.Components<Props, State>}
+
+ */
+const createPConnectComponent = (declarative = false) => {
+    /**
+     * JEA - add Type info via JSdoc syntax...
+     * @extends {React.Components<Props, State>}
+     * createPConnectComponent - Class to create/initialize a PConnect (c11nEnv) object
+     * to pre-process meta data of each componnet.
+     * - Wraps each child in a component with PConnect
+     * - Process all actions and make them avaiable in props
+     * - Filters all properties in metadata and keeps them
+     * __internal for re-render process through connect
+     */
+    class PConnect extends Component {
+        constructor(props) {
+            super(props);
+            this.children = [];
+            this.c11nEnv = this.props.getPConnect();
+            this.initialize();
+            this.state = { hasError: false };
+            this.Control = getComponent(this.c11nEnv, declarative);
+            this.actionsAPI = this.c11nEnv.getActionsApi();
+            let theDisplayName = this.Control.displayName;
+            if (theDisplayName === undefined) {
+                // In some case (ex: RadioButtons), displayName isn't defined. So,
+                //  When this happens, use getComponentName() instead
+                theDisplayName = this.c11nEnv.getComponentName();
+            }
+            // console.log( `PConnect constructor: ${theDisplayName}`);
+        }
+        static getDerivedStateFromError(error) {
+            // Update state so the next render will show the fallback UI.
+            return {
+                hasError: true,
+                error
+            };
+        }
+        componentDidMount() {
+            this.c11nEnv.addFormField();
+        }
+        componentDidCatch(error, info) {
+            // eslint-disable-next-line no-console
+            console.error(`Error while Rendering the component ${this.componentName} : `, error, info.componentStack);
+        }
+        componentWillUnmount() {
+            if (this.c11nEnv.removeFormField) {
+                this.c11nEnv.removeFormField();
+            }
+        }
+        /*
+         *  processActions to see all actions in meta and adds event in props.
+         *  Attaches common handler (eventHandler) for all actions.
+         */
+        processActions() {
+            if (this.c11nEnv.isEditable()) {
+                this.c11nEnv.setAction("onChange", this.changeHandler);
+                this.c11nEnv.setAction("onBlur", this.eventHandler);
+            }
+        }
+        // Using separate handle for change as in case of dropdown, native click is mapped to react change
+        changeHandler(event) {
+            this.actionsAPI.changeHandler(this.c11nEnv, event);
+            //      getActionProcessor().changeHandler(this.c11nEnv, event);
+        }
+        eventHandler(event) {
+            this.actionsAPI.eventHandler(this.c11nEnv, event);
+            //      getActionProcessor().eventHandler(this.c11nEnv, event);
+        }
+        addChildren(child) {
+            this.configProps.children.push(createElement(createPConnectComponent(), child));
+        }
+        /* This should be called only once per component instance
+         *  this.props.__internal is to have info like propertiesMap, isExpressionExist, isWhenExist
+         *  which would be used to call redux connect for re-render purpose on state change
+         */
+        initialize() {
+            const { getPConnect } = this.props;
+            this.c11nEnv = getPConnect();
+            this.configProps = {};
+            this.eventHandler = this.eventHandler.bind(this);
+            this.changeHandler = this.changeHandler.bind(this);
+            this.processActions(this.c11nEnv);
+            this.propsToChild = {};
+            this.configProps.children = [];
+            if (this.c11nEnv.hasChildren()) {
+                const children = this.c11nEnv.getChildren() || [];
+                children.forEach((child) => this.addChildren(child));
+                this.configProps.children = Children.toArray(this.configProps.children);
+            }
+        }
+        render() {
+            const { hasError } = this.state;
+            const { getPConnect, visibility, additionalProps, ...otherProps } = this.props;
+            if (visibility === false) {
+                return null;
+            }
+            if (hasError) {
+                // You can render any custom fallback UI
+                // console.log(`react_pconnect error: used to return: <ErrorBoundary getPConnect={() => this.c11nEnv} isInternalError />`);
+                return React.createElement(ErrorBoundary, { getPConnect: () => this.c11nEnv, isInternalError: true });
+            }
+            const props = this.c11nEnv.getConfigProps();
+            const actions = this.c11nEnv.getActions();
+            const finalProps = {
+                ...props,
+                getPConnect,
+                ...this.configProps,
+                ...actions,
+                additionalProps,
+                ...otherProps
+            };
+            // console.log(`react_pconnect: used to return: <this.Control {...finalProps} />`);
+            return React.createElement(this.Control, { ...finalProps });
+        }
+    }
+    // eslint-disable-next-line react/static-property-placement
+    PConnect.propTypes = {
+        // __internal: PropTypes.object.isRequired,
+        // meta: PropTypes.object.isRequired,
+        // configObject: PropTypes.object.isRequired,
+        getPConnect: PropTypes.func.isRequired,
+        visibility: PropTypes.bool /* .isRequired */,
+        additionalProps: PropTypes.shape({
+            noLabel: PropTypes.bool,
+            readOnly: PropTypes.bool
+        }),
+        validatemessage: PropTypes.string
+    };
+    // eslint-disable-next-line react/static-property-placement
+    PConnect.defaultProps = {
+        additionalProps: {},
+        validatemessage: ""
+    };
+    return PConnect;
+};
+// Move these into SdkConstellationReady so PCore is available
+document.addEventListener("SdkConstellationReady", () => {
+    // eslint-disable-next-line no-undef
+    PCore.registerComponentCreator((c11nEnv, additionalProps = {}) => {
+        const PConnectComp = createPConnectComponent();
+        return (React.createElement(PConnectComp, { ...{
+                ...c11nEnv,
+                ...c11nEnv.getPConnect().getConfigProps(),
+                ...c11nEnv.getPConnect().getActions(),
+                additionalProps
+            } }));
+    });
+    // eslint-disable-next-line no-undef
+    PCore.getAssetLoader().register("component-loader", async (componentNames = []) => {
+        const promises = [];
+        componentNames.forEach((comp) => {
+            if (/^[A-Z]/.test(comp) && !LazyComponentMap[comp]) {
+                if (!ComponentMap[comp]) {
+                    // eslint-disable-next-line no-undef
+                    const srcUrl = `${PCore.getAssetLoader().getConstellationServiceUrl()}/v860/${PCore.getAssetLoader().getAppAlias()}/component/${comp}.js`;
+                    // eslint-disable-next-line no-undef
+                    promises.push(PCore.getAssetLoader().getLoader()(srcUrl, "script"));
+                }
+                else {
+                    if (ComponentMap[comp].modules && ComponentMap[comp].modules.length) {
+                        ComponentMap[comp].modules.forEach((module) => {
+                            LazyComponentMap[comp] = module;
+                        });
+                    }
+                    if (ComponentMap[comp].scripts && ComponentMap[comp].scripts.length) {
+                        ComponentMap[comp].scripts.forEach((script) => {
+                            promises.push(
+                            // eslint-disable-next-line no-undef
+                            PCore.getAssetLoader().getLoader()(script, "script"));
+                        });
+                    }
+                }
+            }
+        });
+        /* Promise.all rejects or accepts all or none. This causes entire component loader to fail
+        in case there is a single failure.
+        Using allSettled to allow Promise to be resolved even if there are failed components
+        Note : This is a liberty taken at component loader and unwise to be used at
+        asset loader which will still use Promise.all
+        */
+        await Promise.allSettled(promises);
+    });
+});
+export default createPConnectComponent;
+/* These APIs need to be exposed for authoring bridge
+Will be removed when pxbootstrap and constellation_bridge is cleaned up
+to use single bootstrap file from constellation  */
+// window.authoringUtils = {
+//   createElement,
+//   render,
+//   unmountComponentAtNode,
+//   LazyComponentMap
+// };
+//# sourceMappingURL=react_pconnect.js.map

package/lib/bridge/react_pconnect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react_pconnect.js","sourceRoot":"","sources":["../../src/bridge/react_pconnect.jsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Children, Component, createElement } from \"react\";\n// import { render, unmountComponentAtNode } from \"react-dom\";\nimport PropTypes from \"prop-types\";\nimport { connect, shallowEqual } from \"react-redux\";\n\nimport ComponentMap, { LazyMap as LazyComponentMap } from '../components_map'; // was '../../../../../src/components_map';\nimport StoreContext from \"./Context/StoreContext\";\n\n// const pathToComponents = \"../../../../../src/components\";  /* When bridge was local, it was \"../components\" */\n\n// For now, NOT doing lazy loading - needs some work on the loader to work with TypeScript\n// As we add components, we'll need to import them here and add to the switch statement\n//    below in getComponent!\n\nimport ErrorBoundary from '../components/infra/ErrorBoundary';\n\nimport { SdkComponentMap } from \"./helpers/sdk_component_map\";\n\nconst connectRedux = (component, c11nEnv) => {\n\n  // console.log(`in connectRedux: ${component.name}`);\n\n  return connect(\n    (state, ownProps) => {\n      let addProps = {};\n      const obj = {};\n\n\n      // JA - testing\n      // const theCompName = c11nEnv.getComponentName();\n      // console.log(`in connect mapStateToProps callback for: ${theCompName}`);\n      // if ( theCompName === \"ViewContainer\" || theCompName === \"View\") {\n      //   debugger;\n      // }\n\n      if (typeof component.additionalProps === \"object\") {\n        addProps = c11nEnv.resolveConfigProps(component.additionalProps);\n      } else if (typeof component.additionalProps === \"function\") {\n        addProps = c11nEnv.resolveConfigProps(\n          component.additionalProps(state, ownProps.getPConnect)\n        );\n      }\n\n      // const obj = c11nEnv.getConfigProps();\n      c11nEnv.getConfigProps(obj);\n\n      // console.log(`connectRedux: connect callback: ${c11nEnv.getComponentName()}`);\n\n      // debugging/investigation help\n      // if (obj.routingInfo) {\n      //   console.log( `${theCompName}: BEFORE populateAdditionalProps: obj.routingInfo: ${JSON.stringify(obj.routingInfo)}`);\n      // }\n\n      // populate additional props which are component specific and not present in configurations\n      // This block can be removed once all these props will be added as part of configs\n      c11nEnv.populateAdditionalProps(obj);\n\n      // debugging/investigation help\n      // if (obj.routingInfo) {\n      //   console.log( `${theCompName}: AFTER populateAdditionalProps: obj.routingInfo: ${JSON.stringify(obj.routingInfo)}`);\n      //   // if (theCompName === \"ViewContainer\") {\n      //   //   debugger;\n      //   // }\n      // }\n\n      return {\n        ...obj,\n        ...addProps\n      };\n    },\n    null,\n    null,\n    {\n      context: StoreContext,\n      areStatePropsEqual: (next,prev) => {\n        const allStateProps = c11nEnv.getStateProps();\n        for(const key in allStateProps){\n          // eslint-disable-next-line no-undef\n          if(!shallowEqual(next[key], prev[key]) || (next.routingInfo && !PCore.isDeepEqual(next.routingInfo, prev.routingInfo))){\n            return false;\n          }\n        }\n        /* TODO For some rawConfig we are not getting routingInfo under allStateProps */\n        // eslint-disable-next-line no-undef\n        if('routingInfo' in next && (!shallowEqual(next.routingInfo, prev.routingInfo) || !PCore.isDeepEqual(next.routingInfo, prev.routingInfo))){\n          return false;\n        }\n\n        // For CaseSummary (when status === \".pyStatusWork\"), we need to compare changes in\n        //  primaryFields and secondary Fields\n        if (allStateProps.status === \".pyStatusWork\") {\n          for(const key in prev){\n            // eslint-disable-next-line no-undef\n            if (!PCore.isDeepEqual(next[key], prev[key])) {\n              return false;\n            }\n          }\n        }\n\n        return true;\n      }\n    }\n  )(component);\n};\n\n\nconst getComponent = (c11nEnv, declarative) => {\n  // PCore is defined in pxBootstrapShell - eventually will be exported in place of constellationCore\n  // eslint-disable-next-line no-undef\n  const ComponentsRegistry = PCore.getComponentsRegistry();\n  const type = c11nEnv.getComponentName();\n\n  const componentObj = ComponentsRegistry.getComponent(type);\n  const componentType = (componentObj && componentObj.component) || type;\n\n  // JEA - modifying logic before bailing to RootContainer logic to work around async loading problem\n  let component =\n    LazyComponentMap[componentType] /* || window[componentType] */;\n\n  // NOTE: Until we get lazy loading working, maintain this for each component we add\n  if (component === undefined) {\n    if (SdkComponentMap) {\n      // This is the node_modules version of react_pconnect!\n      const theLocalComponent = SdkComponentMap.getLocalComponentMap()[componentType];\n      if ( theLocalComponent !== undefined) {\n          // eslint-disable-next-line no-console\n          console.log(`react_pconnect getComponent found ${componentType}: Local`);\n          component = theLocalComponent\n      } else {\n          const thePegaProvidedComponent = SdkComponentMap.getPegaProvidedComponentMap()[componentType];\n          if ( thePegaProvidedComponent !== undefined) {\n            // console.log(`react_pconnect getComponent found ${componentType}: Pega-provided`);\n            component = thePegaProvidedComponent;\n          } else {\n              // eslint-disable-next-line no-console\n              console.error(`react_pconnect: getComponent doesn't have an entry for type ${type}`);\n              component = ErrorBoundary;\n          }\n      }\n    } else {\n      // We no longer handle the \"old\" switch statement that was here in the original packaging.\n      //  All components seen here need to be in the SdkComponentMap\n      // eslint-disable-next-line no-console\n      console.error(`SdkComponentMap not defined! Unable to process component: ${componentType}`);\n      \n    }\n  } else {\n    // eslint-disable-next-line no-console\n    console.log( `getComponent doesn't have an entry for component ${component}`);\n    component = ErrorBoundary;\n  }\n\n  // Declarative components already connected to redux so return without connect.\n  if (declarative) {\n    return component;\n  }\n\n  if (c11nEnv.isConditionExist()) {\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    component = connectRedux(createPConnectComponent(true), c11nEnv);\n  } else {\n    component = connectRedux(component, c11nEnv);\n  }\n  return component;\n};\n\n/**\n * \n * @param {*} declarative \n * @returns {React.Components<Props, State>}\n\n */\nconst createPConnectComponent = (declarative=false) => {\n  /**\n   * JEA - add Type info via JSdoc syntax...\n   * @extends {React.Components<Props, State>}\n   * createPConnectComponent - Class to create/initialize a PConnect (c11nEnv) object\n   * to pre-process meta data of each componnet.\n   * - Wraps each child in a component with PConnect\n   * - Process all actions and make them avaiable in props\n   * - Filters all properties in metadata and keeps them\n   * __internal for re-render process through connect\n   */\n  class PConnect extends Component {\n    constructor(props) {\n      super(props);\n      this.children = [];\n      this.c11nEnv = this.props.getPConnect();\n      this.initialize();\n      this.state = { hasError: false };\n      this.Control = getComponent(this.c11nEnv, declarative);\n      this.actionsAPI = this.c11nEnv.getActionsApi();\n\n      let theDisplayName = this.Control.displayName;\n      if (theDisplayName === undefined) {\n        // In some case (ex: RadioButtons), displayName isn't defined. So,\n        //  When this happens, use getComponentName() instead\n        theDisplayName = this.c11nEnv.getComponentName();\n      }\n\n      // console.log( `PConnect constructor: ${theDisplayName}`);\n    }\n\n    static getDerivedStateFromError(error) {\n      // Update state so the next render will show the fallback UI.\n      return {\n        hasError: true,\n        error\n      };\n    }\n\n    componentDidMount() {\n      this.c11nEnv.addFormField();\n    }\n\n    componentDidCatch(error, info) {\n      // eslint-disable-next-line no-console\n      console.error(\n        `Error while Rendering the component ${this.componentName} : `,\n        error,\n        info.componentStack\n      );\n    }\n\n    componentWillUnmount() {\n      if (this.c11nEnv.removeFormField) {\n        this.c11nEnv.removeFormField();\n      }\n    }\n\n    /*\n     *  processActions to see all actions in meta and adds event in props.\n     *  Attaches common handler (eventHandler) for all actions.\n     */\n    processActions() {\n      if (this.c11nEnv.isEditable()) {\n        this.c11nEnv.setAction(\"onChange\", this.changeHandler);\n        this.c11nEnv.setAction(\"onBlur\", this.eventHandler);\n      }\n    }\n\n    // Using separate handle for change as in case of dropdown, native click is mapped to react change\n    changeHandler(event) {\n      this.actionsAPI.changeHandler(this.c11nEnv, event);\n      //      getActionProcessor().changeHandler(this.c11nEnv, event);\n    }\n\n    eventHandler(event) {\n      this.actionsAPI.eventHandler(this.c11nEnv, event);\n      //      getActionProcessor().eventHandler(this.c11nEnv, event);\n    }\n\n    addChildren(child) {\n      this.configProps.children.push(createElement(createPConnectComponent(), child));\n    }\n\n    /* This should be called only once per component instance\n     *  this.props.__internal is to have info like propertiesMap, isExpressionExist, isWhenExist\n     *  which would be used to call redux connect for re-render purpose on state change\n     */\n    initialize() {\n      const { getPConnect } = this.props;\n      this.c11nEnv = getPConnect();\n      this.configProps = {};\n      this.eventHandler = this.eventHandler.bind(this);\n      this.changeHandler = this.changeHandler.bind(this);\n      this.processActions(this.c11nEnv);\n      this.propsToChild = {};\n\n      this.configProps.children = [];\n\n      if (this.c11nEnv.hasChildren()) {\n        const children = this.c11nEnv.getChildren() || [];\n        children.forEach((child) => this.addChildren(child));\n        this.configProps.children = Children.toArray(\n          this.configProps.children\n        );\n      }\n    }\n\n    render() {\n      const { hasError } = this.state;\n      const {\n        getPConnect,\n        visibility,\n        additionalProps,\n        ...otherProps\n      } = this.props;\n\n      if (visibility === false) {\n        return null;\n      }\n      if (hasError) {\n        // You can render any custom fallback UI\n        // console.log(`react_pconnect error: used to return: <ErrorBoundary getPConnect={() => this.c11nEnv} isInternalError />`);\n        return <ErrorBoundary getPConnect={() => this.c11nEnv} isInternalError />;\n      }\n\n      const props = this.c11nEnv.getConfigProps();\n      const actions = this.c11nEnv.getActions();\n      const finalProps = {\n        ...props,\n        getPConnect,\n        ...this.configProps,\n        ...actions,\n        additionalProps,\n        ...otherProps\n      };\n\n      // console.log(`react_pconnect: used to return: <this.Control {...finalProps} />`);\n\n      return <this.Control {...finalProps} />;\n    }\n  }\n\n  // eslint-disable-next-line react/static-property-placement\n  PConnect.propTypes = {\n    // __internal: PropTypes.object.isRequired,\n    // meta: PropTypes.object.isRequired,\n    // configObject: PropTypes.object.isRequired,\n    getPConnect: PropTypes.func.isRequired,\n    visibility: PropTypes.bool/* .isRequired */,\n    additionalProps: PropTypes.shape({\n      noLabel: PropTypes.bool,\n      readOnly: PropTypes.bool\n    }),\n    validatemessage: PropTypes.string\n  };\n\n  // eslint-disable-next-line react/static-property-placement\n  PConnect.defaultProps = {\n    additionalProps: {},\n    validatemessage: \"\"\n  };\n\n  return PConnect;\n};\n\n\n// Move these into SdkConstellationReady so PCore is available\ndocument.addEventListener(\"SdkConstellationReady\", () => {\n\n  // eslint-disable-next-line no-undef\n  PCore.registerComponentCreator((c11nEnv, additionalProps = {}) => {\n    const PConnectComp = createPConnectComponent();\n    return (\n        <PConnectComp {\n          ...{\n            ...c11nEnv,\n            ...c11nEnv.getPConnect().getConfigProps(),\n            ...c11nEnv.getPConnect().getActions(),\n            additionalProps\n          }}\n        />\n      );\n  });\n\n  // eslint-disable-next-line no-undef\n  PCore.getAssetLoader().register(\n    \"component-loader\",\n    async (componentNames = []) => {\n      const promises = [];\n      componentNames.forEach((comp) => {\n        if (/^[A-Z]/.test(comp) && !LazyComponentMap[comp]) {\n          if (!ComponentMap[comp]) {\n            // eslint-disable-next-line no-undef\n            const srcUrl = `${PCore.getAssetLoader().getConstellationServiceUrl()}/v860/${PCore.getAssetLoader().getAppAlias()}/component/${comp}.js`;\n            // eslint-disable-next-line no-undef\n            promises.push(PCore.getAssetLoader().getLoader()(srcUrl, \"script\"));\n          } else {\n            if (ComponentMap[comp].modules && ComponentMap[comp].modules.length) {\n              ComponentMap[comp].modules.forEach((module) => {\n                LazyComponentMap[comp] = module;\n              });\n            }\n            if (ComponentMap[comp].scripts && ComponentMap[comp].scripts.length) {\n              ComponentMap[comp].scripts.forEach((script) => {\n                promises.push(\n                  // eslint-disable-next-line no-undef\n                  PCore.getAssetLoader().getLoader()(script, \"script\")\n                );\n              });\n            }\n          }\n        }\n      });\n      /* Promise.all rejects or accepts all or none. This causes entire component loader to fail\n      in case there is a single failure.\n      Using allSettled to allow Promise to be resolved even if there are failed components\n      Note : This is a liberty taken at component loader and unwise to be used at\n      asset loader which will still use Promise.all\n      */\n      await Promise.allSettled(promises);\n    }\n  );\n});\n\nexport default createPConnectComponent;\n\n\n/* These APIs need to be exposed for authoring bridge\nWill be removed when pxbootstrap and constellation_bridge is cleaned up\nto use single bootstrap file from constellation  */\n// window.authoringUtils = {\n//   createElement,\n//   render,\n//   unmountComponentAtNode,\n//   LazyComponentMap\n// };\n"]}

package/lib/components/designSystemExtensions/CaseSummaryFields/CaseSummaryFields.css

@@ -0,0 +1,19 @@
+
+.psdk-csf-status-style {
+  /* background-color: #e9eef3;
+  border-radius: calc(0.25 * 0.5rem);
+  color: #4c5a67; */
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: calc(0.5rem * 2.5);
+  height: calc(0.5rem * 2.5);
+  padding: 0 0.5rem;
+  text-transform: uppercase;
+}
+
+.psdk-case-summary-fields {
+  padding: calc(2 * 0.5rem);
+  display: grid;
+  grid-row-gap: calc(2 * 0.5rem);
+}

package/lib/components/designSystemExtensions/CaseSummaryFields/CaseSummaryFields.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import PropTypes from "prop-types";
+import './CaseSummaryFields.css';
+declare function CaseSummaryFields(props: any): JSX.Element;
+declare namespace CaseSummaryFields {
+    var propTypes: {
+        status: PropTypes.Requireable<string>;
+        showStatus: PropTypes.Requireable<boolean>;
+        theFields: PropTypes.Requireable<(object | null | undefined)[]>;
+    };
+}
+export default CaseSummaryFields;
+//# sourceMappingURL=CaseSummaryFields.d.ts.map

package/lib/components/designSystemExtensions/CaseSummaryFields/CaseSummaryFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseSummaryFields.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/CaseSummaryFields/CaseSummaryFields.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAOnC,OAAO,yBAAyB,CAAC;AAIjC,iBAAwB,iBAAiB,CAAC,KAAK,KAAA,eAyI9C;kBAzIuB,iBAAiB;;;;;;;eAAjB,iBAAiB"}

package/lib/components/designSystemExtensions/CaseSummaryFields/CaseSummaryFields.js

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

package/lib/components/designSystemExtensions/CaseSummaryFields/CaseSummaryFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseSummaryFields.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/CaseSummaryFields/CaseSummaryFields.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport isDeepEqual from 'fast-deep-equal/react';\n\nimport Grid from '@material-ui/core/Grid';\nimport TextField from '@material-ui/core/TextField';\nimport Operator from '../Operator/Operator';\n\nimport './CaseSummaryFields.css';\n\nimport { format } from '../../helpers/formatters';\n\nexport default function CaseSummaryFields(props) {\n  const { status, showStatus, theFields } = props;\n\n  const [theFieldsToRender, setFieldsToRender] = useState([]);\n  const [theFieldsAsGridItems, setFieldsAsGridItems] = useState<Array<any>>([]);\n\n\n  function getFieldValue(field: any): any {\n    const fieldTypeLower = field.type.toLowerCase();\n\n    if (field.config.value === null || field.config.value === \"\") {\n      // Special handling for missing value\n      // eslint-disable-next-line sonarjs/no-small-switch\n      switch(fieldTypeLower) {\n        case \"caseoperator\" :\n          return <Operator caseOpConfig={field.config} />;\n          break;\n\n        default:\n          return <TextField\n            value=\"---\"\n            label={field.config.label}\n            InputProps={{\n              readOnly: true\n            }} />;\n      }\n    }\n\n    switch(fieldTypeLower) {\n      case \"textinput\" :\n        return <TextField\n          value={field.config.value}\n          label={field.config.label}\n          InputProps={{\n            readOnly: true\n          }} />;\n\n      case \"status\" :\n        return <TextField\n        className=\"psdk-csf-status-style\"\n        value={field.config.value}\n        label={field.config.label}\n        InputProps={{\n          readOnly: true\n          }} />;\n\n      case \"phone\":\n        {\n          const displayPhone = (field.config.value !== \"\") ? field.config.value : \"---\";\n          return <a href={`tel:${displayPhone}`}>\n            <TextField\n                  value={field.config.value}\n                  label={field.config.label}\n                  InputProps={{\n                    readOnly: true,\n                    inputProps: {style: {cursor: 'pointer'}}\n                  }}\n              />\n          </a>;\n        }\n\n      case \"email\":\n        {\n          const displayEmail = format(field.config.value, field.type);\n          return <a href={`mailto:${displayEmail}`}>\n            <TextField\n                  value={field.config.value}\n                  label={field.config.label}\n                  InputProps={{\n                    readOnly: true,\n                    inputProps: {style: {cursor: 'pointer'}}\n                  }}\n              />\n          </a>;\n\n        }\n\n      case \"date\":\n        return <TextField\n              value={format(field.config.value, field.type)}\n              label={field.config.label}\n              InputProps={{\n                readOnly: true\n              }} />;\n\n      case \"caseoperator\":\n        return <Operator caseOpConfig={field.config} />;\n        break;\n\n        default:\n        return (\n        <span>{field.type.toLowerCase()} {field.config.value}</span>\n        );\n\n    }\n\n  }\n\n\n  // Whenever theFieldsToRender changes, update theFieldsAsGridItems that's used during render\n  useEffect(() => {\n      const arGridItems = theFieldsToRender.map((field: any) => {\n        return ( <Grid item xs={6} key={field.config.label}>{getFieldValue(field)}</Grid> );\n      });\n      setFieldsAsGridItems(arGridItems);\n    },\n    [theFieldsToRender]);\n\n\n  const theFieldsModifiable = theFields;\n\n  // Special Case: if showStatus is true, splice the status value to be 2nd in theFields\n  //  if it's not already there\n  if (showStatus && theFields?.[1].type !== \"status\") {\n    const oStatus = { type: \"status\", config: { value: status, label: \"Status\" }};\n\n    const count = theFieldsModifiable.length;\n    if (count < 2) {\n      theFieldsModifiable.push(oStatus);\n    }\n    else {\n      theFieldsModifiable.splice(1, 0, oStatus);\n    }\n  }\n\n  // At this point, we know what fields we want to render...\n  //  So, update our state if it's changed\n  if (!isDeepEqual(theFieldsToRender, theFieldsModifiable)) {\n    setFieldsToRender(theFieldsModifiable);\n  }\n\n\n  return <React.Fragment>\n    <Grid container className=\"psdk-case-summary-fields\">\n      {theFieldsAsGridItems}\n    </Grid>\n  </React.Fragment>;\n}\n\nCaseSummaryFields.propTypes = {\n  status: PropTypes.string,\n  showStatus: PropTypes.bool,\n  theFields: PropTypes.arrayOf(PropTypes.object)\n};\n"]}

package/lib/components/designSystemExtensions/CaseSummaryFields/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './CaseSummaryFields';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/designSystemExtensions/CaseSummaryFields/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/CaseSummaryFields/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/components/designSystemExtensions/CaseSummaryFields/index.js

@@ -0,0 +1,2 @@
+export { default } from './CaseSummaryFields';
+//# sourceMappingURL=index.js.map

package/lib/components/designSystemExtensions/CaseSummaryFields/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/CaseSummaryFields/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default } from './CaseSummaryFields';\n"]}

package/lib/components/designSystemExtensions/DetailsFields/DetailsFields.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+declare function DetailsFields(props: any): JSX.Element;
+declare namespace DetailsFields {
+    var defaultProps: {
+        fields: never[];
+    };
+    var propTypes: {
+        fields: PropTypes.Requireable<any[]>;
+    };
+}
+export default DetailsFields;
+//# sourceMappingURL=DetailsFields.d.ts.map

package/lib/components/designSystemExtensions/DetailsFields/DetailsFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsFields.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/DetailsFields/DetailsFields.tsx"],"names":[],"mappings":";AAEA,OAAO,SAAS,MAAM,YAAY,CAAC;AA+BnC,iBAAwB,aAAa,CAAC,KAAK,KAAA,eAgH1C;kBAhHuB,aAAa;;;;;;;;eAAb,aAAa"}