@pega/react-sdk-components 24.2.10 → 25.1.10

package/lib/components/field/ObjectReference/ObjectReference.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import Grid2 from '@mui/material/Grid2';
+import { SELECTION_MODE, generateColumns, getDataRelationshipContextFromKey } from './utils';
+import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
+export default function ObjectReference(props) {
+    const { getPConnect, displayMode, allowAndPersistChangesInReviewMode: editableInReview = false, targetObjectType, mode = '', parameters, hideLabel = false, inline = false, showPromotedFilters = false, additionalFields } = props;
+    const SingleReferenceReadonly = getComponentFromMap('SingleReferenceReadOnly');
+    // Configs
+    const pConn = getPConnect();
+    const referenceType = targetObjectType === 'case' ? 'Case' : 'Data';
+    const rawViewMetadata = pConn.getRawMetadata();
+    const refFieldMetadata = pConn.getFieldMetadata(rawViewMetadata?.config?.value?.split('.', 2)[1]);
+    // Destructured properties
+    const propsToUse = { ...pConn.getInheritedProps(), ...props };
+    // Computed variables
+    const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
+    const canBeChangedInReviewMode = editableInReview && ['Autocomplete', 'Dropdown'].includes(rawViewMetadata.config.componentType);
+    // Editable first child on change handler
+    const onRecordChange = event => {
+        const caseKey = pConn.getCaseInfo().getKey();
+        const refreshOptions = { autoDetectRefresh: true, propertyName: '' };
+        refreshOptions.propertyName = rawViewMetadata.config?.value;
+        if (!canBeChangedInReviewMode || !pConn.getValue('__currentPageTabViewName')) {
+            const pgRef = pConn.getPageReference().replace('caseInfo.content', '');
+            const viewName = rawViewMetadata.name;
+            if (viewName && viewName.length > 0) {
+                getPConnect().getActionsApi().refreshCaseView(caseKey, viewName, pgRef, refreshOptions);
+            }
+        }
+        // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value if event.id is unset
+        // When value is empty propValue will be undefined here and no value will be set for the reference
+        const propValue = event?.id || event?.target?.value;
+        const propName = rawViewMetadata.type === 'SimpleTableSelect' && mode === SELECTION_MODE.MULTI
+            ? PCore.getAnnotationUtils().getPropertyName(rawViewMetadata.config.selectionList)
+            : PCore.getAnnotationUtils().getPropertyName(rawViewMetadata.config?.value);
+        if (propValue && canBeChangedInReviewMode && isDisplayModeEnabled) {
+            PCore.getCaseUtils()
+                .getCaseEditLock(caseKey, '')
+                .then(caseResponse => {
+                const pageTokens = pConn.getPageReference().replace('caseInfo.content', '').split('.');
+                let curr = {};
+                const commitData = curr;
+                pageTokens.forEach(el => {
+                    if (el !== '') {
+                        curr[el] = {};
+                        curr = curr[el];
+                    }
+                });
+                // expecting format like {Customer: {pyID:"C-100"}}
+                const propArr = propName.split('.');
+                propArr.forEach((element, idx) => {
+                    if (idx + 1 === propArr.length) {
+                        curr[element] = propValue;
+                    }
+                    else {
+                        curr[element] = {};
+                        curr = curr[element];
+                    }
+                });
+                PCore.getCaseUtils()
+                    .updateCaseEditFieldsData(caseKey, { [caseKey]: commitData }, caseResponse.headers.etag, pConn.getContextName())
+                    .then(response => {
+                    PCore.getContainerUtils().updateParentLastUpdateTime(pConn.getContextName(), response.data.data.caseInfo.lastUpdateTime);
+                    PCore.getContainerUtils().updateRelatedContextEtag(pConn.getContextName(), response.headers.etag);
+                });
+            });
+        }
+    };
+    // Prepare first child
+    const recreatedFirstChild = useMemo(() => {
+        const type = rawViewMetadata.config.componentType;
+        /* Read-only variants */
+        if (type === 'SemanticLink' && !canBeChangedInReviewMode) {
+            const config = {
+                ...rawViewMetadata.config,
+                primaryField: rawViewMetadata.config.displayField
+            };
+            config.caseClass = rawViewMetadata.config.targetObjectClass;
+            config.text = config.primaryField;
+            config.caseID = config.value;
+            config.contextPage = `@P .${rawViewMetadata.config?.displayField ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField) : null}`;
+            config.resourceParams = {
+                workID: config.value
+            };
+            config.resourcePayload = {
+                caseClassName: config.caseClass
+            };
+            return getPConnect().createComponent({
+                type: 'SemanticLink',
+                config: {
+                    ...config,
+                    displayMode,
+                    referenceType,
+                    hideLabel,
+                    dataRelationshipContext: rawViewMetadata.config?.displayField
+                        ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField)
+                        : null
+                }
+            });
+        }
+        if (isDisplayModeEnabled && !canBeChangedInReviewMode) {
+            return (_jsx(SingleReferenceReadonly, { config: {
+                    ...rawViewMetadata.config,
+                    primaryField: rawViewMetadata.config.displayField
+                }, getPConnect: getPConnect, label: propsToUse.label, type: type, displayAs: 'readonly', displayMode: displayMode, activeViewRuleClass: rawViewMetadata.config.targetObjectClass, referenceType: referenceType, hideLabel: hideLabel, dataRelationshipContext: rawViewMetadata.config?.displayField ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField) : null, additionalFields: additionalFields }));
+        }
+        // 1) Set datasource
+        generateColumns(rawViewMetadata.config, pConn, referenceType);
+        rawViewMetadata.config.deferDatasource = true;
+        rawViewMetadata.config.listType = 'datapage';
+        if (['Dropdown', 'AutoComplete'].includes(type) && !rawViewMetadata.config.placeholder) {
+            rawViewMetadata.config.placeholder = '@L Select...';
+        }
+        // 2) Pass through configs
+        rawViewMetadata.config.showPromotedFilters = showPromotedFilters;
+        if (!canBeChangedInReviewMode) {
+            rawViewMetadata.config.displayMode = displayMode;
+        }
+        // 3) Define field meta
+        let fieldMetaData = null;
+        fieldMetaData = {
+            datasourceMetadata: {
+                datasource: {
+                    parameters: {}
+                }
+            }
+        };
+        if (rawViewMetadata.config?.parameters) {
+            fieldMetaData.datasourceMetadata.datasource.parameters = parameters;
+        }
+        fieldMetaData.datasourceMetadata.datasource.propertyForDisplayText = rawViewMetadata?.config?.datasource?.fields?.text.startsWith('@P')
+            ? rawViewMetadata?.config?.datasource?.fields?.text?.substring(3)
+            : rawViewMetadata?.config?.datasource?.fields?.text;
+        fieldMetaData.datasourceMetadata.datasource.propertyForValue = rawViewMetadata?.config?.datasource?.fields?.value.startsWith('@P')
+            ? rawViewMetadata?.config?.datasource?.fields?.value?.substring(3)
+            : rawViewMetadata?.config?.datasource?.fields?.value;
+        fieldMetaData.datasourceMetadata.datasource.name = rawViewMetadata.config?.referenceList;
+        return getPConnect().createComponent({
+            type,
+            config: {
+                ...rawViewMetadata.config,
+                descriptors: mode === SELECTION_MODE.SINGLE ? refFieldMetadata?.descriptors : null,
+                datasourceMetadata: fieldMetaData?.datasourceMetadata,
+                required: propsToUse.required,
+                visibility: propsToUse.visibility,
+                disabled: propsToUse.disabled,
+                label: propsToUse.label,
+                parameters: rawViewMetadata.config.parameters,
+                readOnly: false,
+                localeReference: rawViewMetadata.config.localeReference,
+                ...(mode === SELECTION_MODE.SINGLE ? { referenceType } : ''),
+                contextClass: rawViewMetadata.config.targetObjectClass,
+                primaryField: rawViewMetadata.config?.displayField,
+                dataRelationshipContext: rawViewMetadata.config?.displayField ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField) : null,
+                hideLabel,
+                onRecordChange,
+                inline
+            }
+        });
+    }, [rawViewMetadata.config?.datasource?.source, parameters, propsToUse.required, propsToUse.disabled, getPConnect().getPageReference()]);
+    // Prepare children to render
+    return (_jsx(Grid2, { container: true, children: _jsx(Grid2, { children: recreatedFirstChild }) }));
+}
+//# sourceMappingURL=ObjectReference.js.map

package/lib/components/field/ObjectReference/ObjectReference.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectReference.js","sourceRoot":"","sources":["../../../../src/components/field/ObjectReference/ObjectReference.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\n\nimport Grid2 from '@mui/material/Grid2';\n\nimport { SELECTION_MODE, generateColumns, getDataRelationshipContextFromKey } from './utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport type { PConnFieldProps } from '../../../types/PConnProps';\n\ninterface ObjectReferenceProps extends Omit<PConnFieldProps, 'value'> {\n  // If any, enter additional props that only exist on ObjectReference here\n  getPConnect: any;\n  displayMode;\n  allowAndPersistChangesInReviewMode: any;\n  targetObjectType: any;\n  mode: string;\n  parameters: object;\n  hideLabel: boolean;\n  inline: boolean;\n  showPromotedFilters: boolean;\n  additionalFields: any;\n}\n\nexport default function ObjectReference(props: ObjectReferenceProps) {\n  const {\n    getPConnect,\n    displayMode,\n    allowAndPersistChangesInReviewMode: editableInReview = false,\n    targetObjectType,\n    mode = '',\n    parameters,\n    hideLabel = false,\n    inline = false,\n    showPromotedFilters = false,\n    additionalFields\n  } = props;\n\n  const SingleReferenceReadonly = getComponentFromMap('SingleReferenceReadOnly');\n\n  // Configs\n  const pConn = getPConnect();\n  const referenceType = targetObjectType === 'case' ? 'Case' : 'Data';\n  const rawViewMetadata = pConn.getRawMetadata();\n  const refFieldMetadata = pConn.getFieldMetadata(rawViewMetadata?.config?.value?.split('.', 2)[1]);\n\n  // Destructured properties\n  const propsToUse = { ...pConn.getInheritedProps(), ...props };\n\n  // Computed variables\n  const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';\n  const canBeChangedInReviewMode = editableInReview && ['Autocomplete', 'Dropdown'].includes(rawViewMetadata.config.componentType);\n\n  // Editable first child on change handler\n  const onRecordChange = event => {\n    const caseKey = pConn.getCaseInfo().getKey();\n    const refreshOptions = { autoDetectRefresh: true, propertyName: '' };\n    refreshOptions.propertyName = rawViewMetadata.config?.value;\n\n    if (!canBeChangedInReviewMode || !pConn.getValue('__currentPageTabViewName')) {\n      const pgRef = pConn.getPageReference().replace('caseInfo.content', '');\n      const viewName = rawViewMetadata.name;\n      if (viewName && viewName.length > 0) {\n        getPConnect().getActionsApi().refreshCaseView(caseKey, viewName, pgRef, refreshOptions);\n      }\n    }\n\n    // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value if event.id is unset\n    // When value is empty propValue will be undefined here and no value will be set for the reference\n    const propValue = event?.id || event?.target?.value;\n    const propName =\n      rawViewMetadata.type === 'SimpleTableSelect' && mode === SELECTION_MODE.MULTI\n        ? PCore.getAnnotationUtils().getPropertyName(rawViewMetadata.config.selectionList)\n        : PCore.getAnnotationUtils().getPropertyName(rawViewMetadata.config?.value);\n\n    if (propValue && canBeChangedInReviewMode && isDisplayModeEnabled) {\n      PCore.getCaseUtils()\n        .getCaseEditLock(caseKey, '')\n        .then(caseResponse => {\n          const pageTokens = pConn.getPageReference().replace('caseInfo.content', '').split('.');\n          let curr = {};\n          const commitData = curr;\n\n          pageTokens.forEach(el => {\n            if (el !== '') {\n              curr[el] = {};\n              curr = curr[el];\n            }\n          });\n\n          // expecting format like {Customer: {pyID:\"C-100\"}}\n          const propArr = propName.split('.');\n          propArr.forEach((element, idx) => {\n            if (idx + 1 === propArr.length) {\n              curr[element] = propValue;\n            } else {\n              curr[element] = {};\n              curr = curr[element];\n            }\n          });\n\n          PCore.getCaseUtils()\n            .updateCaseEditFieldsData(caseKey, { [caseKey]: commitData }, caseResponse.headers.etag, pConn.getContextName())\n            .then(response => {\n              PCore.getContainerUtils().updateParentLastUpdateTime(pConn.getContextName(), (response.data as any).data.caseInfo.lastUpdateTime);\n              PCore.getContainerUtils().updateRelatedContextEtag(pConn.getContextName(), response.headers.etag);\n            });\n        });\n    }\n  };\n\n  // Prepare first child\n  const recreatedFirstChild = useMemo(() => {\n    const type = rawViewMetadata.config.componentType;\n\n    /* Read-only variants */\n    if (type === 'SemanticLink' && !canBeChangedInReviewMode) {\n      const config = {\n        ...rawViewMetadata.config,\n        primaryField: rawViewMetadata.config.displayField\n      };\n      config.caseClass = rawViewMetadata.config.targetObjectClass;\n      config.text = config.primaryField;\n      config.caseID = config.value;\n      config.contextPage = `@P .${\n        rawViewMetadata.config?.displayField ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField) : null\n      }`;\n      config.resourceParams = {\n        workID: config.value\n      };\n      config.resourcePayload = {\n        caseClassName: config.caseClass\n      };\n\n      return getPConnect().createComponent({\n        type: 'SemanticLink',\n        config: {\n          ...config,\n          displayMode,\n          referenceType,\n          hideLabel,\n          dataRelationshipContext: rawViewMetadata.config?.displayField\n            ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField)\n            : null\n        }\n      });\n    }\n    if (isDisplayModeEnabled && !canBeChangedInReviewMode) {\n      return (\n        <SingleReferenceReadonly\n          config={{\n            ...rawViewMetadata.config,\n            primaryField: rawViewMetadata.config.displayField\n          }}\n          getPConnect={getPConnect}\n          label={propsToUse.label}\n          type={type}\n          displayAs='readonly'\n          displayMode={displayMode}\n          activeViewRuleClass={rawViewMetadata.config.targetObjectClass} // for older views which may not have context class set, fall back to previous behavior\n          referenceType={referenceType}\n          hideLabel={hideLabel}\n          dataRelationshipContext={\n            rawViewMetadata.config?.displayField ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField) : null\n          }\n          additionalFields={additionalFields}\n        />\n      );\n    }\n\n    // 1) Set datasource\n    generateColumns(rawViewMetadata.config, pConn, referenceType);\n    rawViewMetadata.config.deferDatasource = true;\n    rawViewMetadata.config.listType = 'datapage';\n    if (['Dropdown', 'AutoComplete'].includes(type) && !rawViewMetadata.config.placeholder) {\n      rawViewMetadata.config.placeholder = '@L Select...';\n    }\n\n    // 2) Pass through configs\n    rawViewMetadata.config.showPromotedFilters = showPromotedFilters;\n\n    if (!canBeChangedInReviewMode) {\n      rawViewMetadata.config.displayMode = displayMode;\n    }\n\n    // 3) Define field meta\n    let fieldMetaData: any = null;\n\n    fieldMetaData = {\n      datasourceMetadata: {\n        datasource: {\n          parameters: {}\n        }\n      }\n    };\n    if (rawViewMetadata.config?.parameters) {\n      fieldMetaData.datasourceMetadata.datasource.parameters = parameters;\n    }\n    fieldMetaData.datasourceMetadata.datasource.propertyForDisplayText = rawViewMetadata?.config?.datasource?.fields?.text.startsWith('@P')\n      ? rawViewMetadata?.config?.datasource?.fields?.text?.substring(3)\n      : rawViewMetadata?.config?.datasource?.fields?.text;\n    fieldMetaData.datasourceMetadata.datasource.propertyForValue = rawViewMetadata?.config?.datasource?.fields?.value.startsWith('@P')\n      ? rawViewMetadata?.config?.datasource?.fields?.value?.substring(3)\n      : rawViewMetadata?.config?.datasource?.fields?.value;\n    fieldMetaData.datasourceMetadata.datasource.name = rawViewMetadata.config?.referenceList;\n\n    return getPConnect().createComponent({\n      type,\n      config: {\n        ...rawViewMetadata.config,\n        descriptors: mode === SELECTION_MODE.SINGLE ? refFieldMetadata?.descriptors : null,\n        datasourceMetadata: fieldMetaData?.datasourceMetadata,\n        required: propsToUse.required,\n        visibility: propsToUse.visibility,\n        disabled: propsToUse.disabled,\n        label: propsToUse.label,\n        parameters: rawViewMetadata.config.parameters,\n        readOnly: false,\n        localeReference: rawViewMetadata.config.localeReference,\n        ...(mode === SELECTION_MODE.SINGLE ? { referenceType } : ''),\n        contextClass: rawViewMetadata.config.targetObjectClass,\n        primaryField: rawViewMetadata.config?.displayField,\n        dataRelationshipContext: rawViewMetadata.config?.displayField ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField) : null,\n        hideLabel,\n        onRecordChange,\n        inline\n      }\n    });\n  }, [rawViewMetadata.config?.datasource?.source, parameters, propsToUse.required, propsToUse.disabled, getPConnect().getPageReference()]);\n\n  // Prepare children to render\n  return (\n    <Grid2 container>\n      <Grid2>{recreatedFirstChild}</Grid2>\n    </Grid2>\n  );\n}\n"]}

package/lib/components/field/ObjectReference/index.d.ts

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

package/lib/components/field/ObjectReference/index.d.ts.map

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

package/lib/components/field/ObjectReference/index.js

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

package/lib/components/field/ObjectReference/index.js.map

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

package/lib/components/field/ObjectReference/utils.d.ts

@@ -0,0 +1,17 @@
+export declare const SELECTION_MODE: {
+    SINGLE: string;
+    MULTI: string;
+};
+export declare const AT_FILTEREDLIST = "@FILTERED_LIST";
+export declare const AT_PROPERTY = "@P";
+export declare const SQUARE_BRACKET_START = "[";
+export declare const SQUARE_BRACKET_END = "]";
+export declare const SIMPLE_TABLE_MANUAL_READONLY = "SimpleTableManualReadOnly";
+export declare const PAGE = "!P!";
+export declare const PAGELIST = "!PL!";
+export declare const PERIOD = ".";
+export declare function updatePageListPropertyValue(value: any): any;
+export declare function getPropertyValue(value: any): any;
+export declare const generateColumns: (config: any, pConn: any, referenceType: any) => void;
+export declare const getDataRelationshipContextFromKey: (key: any) => any;
+//# sourceMappingURL=utils.d.ts.map

package/lib/components/field/ObjectReference/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/field/ObjectReference/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;CAAuC,CAAC;AAMnE,eAAO,MAAM,eAAe,mBAAmB,CAAC;AAChD,eAAO,MAAM,WAAW,OAAO,CAAC;AAChC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,eAAO,MAAM,4BAA4B,8BAA8B,CAAC;AACxE,eAAO,MAAM,IAAI,QAAQ,CAAC;AAC1B,eAAO,MAAM,QAAQ,SAAS,CAAC;AAC/B,eAAO,MAAM,MAAM,MAAM,CAAC;AAG1B,wBAAgB,2BAA2B,CAAC,KAAK,KAAA,OAGhD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,KAAA,OASrC;AAcD,eAAO,MAAM,eAAe,GAAI,WAAM,EAAE,UAAK,EAAE,kBAAa,SA6D3D,CAAC;AAEF,eAAO,MAAM,iCAAiC,GAAG,QAAG,QAAwB,CAAC"}

package/lib/components/field/ObjectReference/utils.js

@@ -0,0 +1,99 @@
+import { Utils } from '../../helpers/utils';
+export const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
+const getLeafNameFromPropertyName = property => property?.substr(property.lastIndexOf('.'));
+const isSelfReferencedProperty = (param, referenceProp) => param === referenceProp?.split('.', 2)[1];
+export const AT_FILTEREDLIST = '@FILTERED_LIST';
+export const AT_PROPERTY = '@P';
+export const SQUARE_BRACKET_START = '[';
+export const SQUARE_BRACKET_END = ']';
+export const SIMPLE_TABLE_MANUAL_READONLY = 'SimpleTableManualReadOnly';
+export const PAGE = '!P!';
+export const PAGELIST = '!PL!';
+export const PERIOD = '.';
+const AT = '@';
+export function updatePageListPropertyValue(value) {
+    value = value.substring(0, value.indexOf(SQUARE_BRACKET_START)) + value.substring(value.indexOf(SQUARE_BRACKET_END) + 1);
+    return value;
+}
+export function getPropertyValue(value) {
+    if (value.startsWith(AT)) {
+        value = value.substring(value.indexOf(' ') + 1);
+        if (value.startsWith(PERIOD))
+            value = value.substring(1);
+    }
+    if (value.includes(SQUARE_BRACKET_START)) {
+        value = updatePageListPropertyValue(value);
+    }
+    return value;
+}
+const getCompositeKeys = (c11nEnv, property) => {
+    const { datasource: { parameters = {} } = {} } = c11nEnv.getFieldMetadata(property) || {};
+    return Object.values(parameters).reduce((compositeKeys, param) => {
+        if (isSelfReferencedProperty(property, param)) {
+            let propName = getPropertyValue(param);
+            propName = propName.substring(propName.indexOf('.'));
+            compositeKeys.push(propName);
+        }
+        return compositeKeys;
+    }, []);
+};
+export const generateColumns = (config, pConn, referenceType) => {
+    const displayField = getLeafNameFromPropertyName(config.displayField);
+    const referenceProp = config.value.split('.', 2)[1];
+    const compositeKeys = getCompositeKeys(pConn, referenceProp);
+    let value = getLeafNameFromPropertyName(config.value);
+    const columns = [];
+    if (displayField) {
+        columns.push({
+            value: displayField,
+            display: 'true',
+            useForSearch: true,
+            primary: 'true'
+        });
+    }
+    if (value && compositeKeys.indexOf(value) !== -1) {
+        columns.push({
+            value,
+            setProperty: 'Associated property',
+            key: 'true'
+        });
+    }
+    else {
+        const actualValue = compositeKeys.length > 0 ? compositeKeys[0] : value;
+        config.value = `@P .${referenceProp}${actualValue}`;
+        value = actualValue;
+        columns.push({
+            value: actualValue,
+            setProperty: 'Associated property',
+            key: 'true'
+        });
+    }
+    config.datasource = {
+        fields: {
+            key: getLeafNameFromPropertyName(config.value),
+            text: getLeafNameFromPropertyName(config.displayField),
+            value: getLeafNameFromPropertyName(config.value)
+        }
+    };
+    if (referenceType === 'Case') {
+        columns.push({
+            secondary: 'true',
+            display: 'true',
+            value: Utils.getMappedKey('pyID'),
+            useForSearch: true
+        });
+    }
+    compositeKeys.forEach(key => {
+        if (value !== key)
+            columns.push({
+                value: key,
+                display: 'false',
+                secondary: 'true',
+                useForSearch: false,
+                setProperty: `.${referenceProp}${key}`
+            });
+    });
+    config.columns = columns;
+};
+export const getDataRelationshipContextFromKey = key => key.split('.', 2)[1];
+//# sourceMappingURL=utils.js.map

package/lib/components/field/ObjectReference/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/field/ObjectReference/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { Utils } from '../../helpers/utils';\n\nexport const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };\n\nconst getLeafNameFromPropertyName = property => property?.substr(property.lastIndexOf('.'));\n\nconst isSelfReferencedProperty = (param, referenceProp) => param === referenceProp?.split('.', 2)[1];\n\nexport const AT_FILTEREDLIST = '@FILTERED_LIST';\nexport const AT_PROPERTY = '@P';\nexport const SQUARE_BRACKET_START = '[';\nexport const SQUARE_BRACKET_END = ']';\n\nexport const SIMPLE_TABLE_MANUAL_READONLY = 'SimpleTableManualReadOnly';\nexport const PAGE = '!P!';\nexport const PAGELIST = '!PL!';\nexport const PERIOD = '.';\nconst AT = '@';\n\nexport function updatePageListPropertyValue(value) {\n  value = value.substring(0, value.indexOf(SQUARE_BRACKET_START)) + value.substring(value.indexOf(SQUARE_BRACKET_END) + 1);\n  return value;\n}\n\nexport function getPropertyValue(value) {\n  if (value.startsWith(AT)) {\n    value = value.substring(value.indexOf(' ') + 1);\n    if (value.startsWith(PERIOD)) value = value.substring(1);\n  }\n  if (value.includes(SQUARE_BRACKET_START)) {\n    value = updatePageListPropertyValue(value);\n  }\n  return value;\n}\n\nconst getCompositeKeys = (c11nEnv, property) => {\n  const { datasource: { parameters = {} } = {} } = c11nEnv.getFieldMetadata(property) || {};\n  return Object.values(parameters).reduce((compositeKeys: any, param) => {\n    if (isSelfReferencedProperty(property, param)) {\n      let propName = getPropertyValue(param);\n      propName = propName.substring(propName.indexOf('.'));\n      compositeKeys.push(propName);\n    }\n    return compositeKeys;\n  }, []);\n};\n\nexport const generateColumns = (config, pConn, referenceType) => {\n  const displayField = getLeafNameFromPropertyName(config.displayField);\n  const referenceProp = config.value.split('.', 2)[1];\n  const compositeKeys: any = getCompositeKeys(pConn, referenceProp);\n  let value = getLeafNameFromPropertyName(config.value);\n\n  const columns: any = [];\n  if (displayField) {\n    columns.push({\n      value: displayField,\n      display: 'true',\n      useForSearch: true,\n      primary: 'true'\n    });\n  }\n  if (value && compositeKeys.indexOf(value) !== -1) {\n    columns.push({\n      value,\n      setProperty: 'Associated property',\n      key: 'true'\n    });\n  } else {\n    const actualValue = compositeKeys.length > 0 ? compositeKeys[0] : value;\n    config.value = `@P .${referenceProp}${actualValue}`;\n    value = actualValue;\n    columns.push({\n      value: actualValue,\n      setProperty: 'Associated property',\n      key: 'true'\n    });\n  }\n\n  config.datasource = {\n    fields: {\n      key: getLeafNameFromPropertyName(config.value),\n      text: getLeafNameFromPropertyName(config.displayField),\n      value: getLeafNameFromPropertyName(config.value)\n    }\n  };\n\n  if (referenceType === 'Case') {\n    columns.push({\n      secondary: 'true',\n      display: 'true',\n      value: Utils.getMappedKey('pyID'),\n      useForSearch: true\n    });\n  }\n\n  compositeKeys.forEach(key => {\n    if (value !== key)\n      columns.push({\n        value: key,\n        display: 'false',\n        secondary: 'true',\n        useForSearch: false,\n        setProperty: `.${referenceProp}${key}`\n      });\n  });\n\n  config.columns = columns;\n};\n\nexport const getDataRelationshipContextFromKey = key => key.split('.', 2)[1];\n"]}

package/lib/components/field/Percentage/Percentage.d.ts

@@ -1,4 +1,4 @@
-import { PConnFieldProps } from '../../../types/PConnProps';
+import type { PConnFieldProps } from '../../../types/PConnProps';
 interface PercentageProps extends PConnFieldProps {
     currencyISOCode?: string;
     showGroupSeparators?: string;

package/lib/components/field/Percentage/Percentage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Percentage.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Percentage/Percentage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAQ5D,UAAU,eAAgB,SAAQ,eAAe;IAE/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,eAAe,2CA4FxD"}
+{"version":3,"file":"Percentage.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Percentage/Percentage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAQjE,UAAU,eAAgB,SAAQ,eAAe;IAE/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,eAAe,2CA4FxD"}

package/lib/components/field/Percentage/Percentage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import { TextField } from '@mui/material';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
@@ -19,7 +19,10 @@ export default function Percentage(props) {
     const propName = pConn.getStateProps().value;
     const helperTextToDisplay = validatemessage || helperText;
     const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-    const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+    const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
+    useEffect(() => {
+        setValues(value.toString());
+    }, [value]);
     let readOnlyProp = {}; // Note: empty if NOT ReadOnly
     if (readOnly) {
         readOnlyProp = { readOnly: true };
@@ -30,10 +33,7 @@ export default function Percentage(props) {
     if (displayMode === 'STACKED_LARGE_VAL') {
         return _jsx(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue, variant: 'stacked' });
     }
-    let testProp = {};
-    testProp = {
-        'data-test-id': testId
-    };
+    const testProps = { 'data-test-id': testId };
     const theSymbols = getCurrencyCharacters(currencyISOCode);
     const theCurrDec = theSymbols.theDecimalIndicator;
     const theCurrSep = theSymbols.theDigitGroupSeparator;
@@ -45,6 +45,6 @@ export default function Percentage(props) {
     };
     return (_jsx(NumericFormat, { valueIsNumericString: true, fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: placeholder ?? '', size: 'small', required: required, disabled: disabled, error: status === 'error', label: label, value: values, onValueChange: val => {
             handleChange(val);
-        }, onBlur: !readOnly ? PercentageOnBlur : undefined, decimalSeparator: theCurrDec, thousandSeparator: showGroupSeparators ? theCurrSep : '', decimalScale: decimalPrecision, suffix: '%', InputProps: { ...readOnlyProp, inputProps: { ...testProp } }, customInput: TextField }));
+        }, onBlur: !readOnly ? PercentageOnBlur : undefined, decimalSeparator: theCurrDec, thousandSeparator: showGroupSeparators ? theCurrSep : '', decimalScale: decimalPrecision, suffix: '%', slotProps: { input: { ...readOnlyProp, inputProps: { ...testProps } } }, customInput: TextField }));
 }
 //# sourceMappingURL=Percentage.js.map

package/lib/components/field/Percentage/Percentage.js.map

@@ -1 +1 @@
-{"version":3,"file":"Percentage.js","sourceRoot":"","sources":["../../../../src/components/field/Percentage/Percentage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { NumericFormat } from 'react-number-format';\nimport { TextField } from '@mui/material';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { PConnFieldProps } from '../../../types/PConnProps';\nimport { getCurrencyCharacters, getCurrencyOptions } from '../Currency/currency-utils';\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\n\n/* Using react-number-format component here, since it allows formatting decimal values,\nas per the locale.\n*/\ninterface PercentageProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Percentage here\n  currencyISOCode?: string;\n  showGroupSeparators?: string;\n  decimalPrecision?: number;\n}\n\nexport default function Percentage(props: PercentageProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    // onChange,\n    // onBlur,\n    readOnly,\n    currencyISOCode = 'USD',\n    testId,\n    helperText,\n    displayMode,\n    hideLabel,\n    placeholder,\n    showGroupSeparators,\n    decimalPrecision\n  } = props;\n\n  const [values, setValues] = useState(value.toString());\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = (pConn.getStateProps() as any).value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);\n  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);\n\n  let readOnlyProp = {}; // Note: empty if NOT ReadOnly\n\n  if (readOnly) {\n    readOnlyProp = { readOnly: true };\n  }\n\n  if (displayMode === 'DISPLAY_ONLY') {\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  const theSymbols = getCurrencyCharacters(currencyISOCode);\n  const theCurrDec = theSymbols.theDecimalIndicator;\n  const theCurrSep = theSymbols.theDigitGroupSeparator;\n\n  function PercentageOnBlur() {\n    handleEvent(actions, 'changeNblur', propName, values);\n  }\n\n  const handleChange = val => {\n    setValues(val.value);\n  };\n\n  return (\n    <NumericFormat\n      valueIsNumericString\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder={placeholder ?? ''}\n      size='small'\n      required={required}\n      disabled={disabled}\n      error={status === 'error'}\n      label={label}\n      value={values}\n      onValueChange={val => {\n        handleChange(val);\n      }}\n      onBlur={!readOnly ? PercentageOnBlur : undefined}\n      decimalSeparator={theCurrDec}\n      thousandSeparator={showGroupSeparators ? theCurrSep : ''}\n      decimalScale={decimalPrecision}\n      suffix='%'\n      InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}\n      customInput={TextField}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Percentage.js","sourceRoot":"","sources":["../../../../src/components/field/Percentage/Percentage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport { NumericFormat } from 'react-number-format';\nimport { TextField } from '@mui/material';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport type { PConnFieldProps } from '../../../types/PConnProps';\nimport { getCurrencyCharacters, getCurrencyOptions } from '../Currency/currency-utils';\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\n\n/* Using react-number-format component here, since it allows formatting decimal values,\nas per the locale.\n*/\ninterface PercentageProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Percentage here\n  currencyISOCode?: string;\n  showGroupSeparators?: string;\n  decimalPrecision?: number;\n}\n\nexport default function Percentage(props: PercentageProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    // onChange,\n    // onBlur,\n    readOnly,\n    currencyISOCode = 'USD',\n    testId,\n    helperText,\n    displayMode,\n    hideLabel,\n    placeholder,\n    showGroupSeparators,\n    decimalPrecision\n  } = props;\n\n  const [values, setValues] = useState(value.toString());\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = (pConn.getStateProps() as any).value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);\n  const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);\n\n  useEffect(() => {\n    setValues(value.toString());\n  }, [value]);\n\n  let readOnlyProp = {}; // Note: empty if NOT ReadOnly\n\n  if (readOnly) {\n    readOnlyProp = { readOnly: true };\n  }\n\n  if (displayMode === 'DISPLAY_ONLY') {\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;\n  }\n\n  const testProps: any = { 'data-test-id': testId };\n\n  const theSymbols = getCurrencyCharacters(currencyISOCode);\n  const theCurrDec = theSymbols.theDecimalIndicator;\n  const theCurrSep = theSymbols.theDigitGroupSeparator;\n\n  function PercentageOnBlur() {\n    handleEvent(actions, 'changeNblur', propName, values);\n  }\n\n  const handleChange = val => {\n    setValues(val.value);\n  };\n\n  return (\n    <NumericFormat\n      valueIsNumericString\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder={placeholder ?? ''}\n      size='small'\n      required={required}\n      disabled={disabled}\n      error={status === 'error'}\n      label={label}\n      value={values}\n      onValueChange={val => {\n        handleChange(val);\n      }}\n      onBlur={!readOnly ? PercentageOnBlur : undefined}\n      decimalSeparator={theCurrDec}\n      thousandSeparator={showGroupSeparators ? theCurrSep : ''}\n      decimalScale={decimalPrecision}\n      suffix='%'\n      slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}\n      customInput={TextField}\n    />\n  );\n}\n"]}

package/lib/components/field/Phone/Phone.d.ts

@@ -1,4 +1,4 @@
-import { PConnFieldProps } from '../../../types/PConnProps';
+import type { PConnFieldProps } from '../../../types/PConnProps';
 interface PhoneProps extends PConnFieldProps {
 }
 export default function Phone(props: PhoneProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/field/Phone/Phone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Phone.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Phone/Phone.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAG5D,UAAU,UAAW,SAAQ,eAAe;CAE3C;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,UAAU,2CAmG9C"}
+{"version":3,"file":"Phone.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Phone/Phone.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGjE,UAAU,UAAW,SAAQ,eAAe;CAE3C;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,UAAU,2CAqG9C"}

package/lib/components/field/Phone/Phone.js

@@ -25,9 +25,11 @@ export default function Phone(props) {
     }
     if (readOnly) {
         const disableDropdown = true;
-        return (_jsx("div", { children: _jsx(MuiTelInput, { fullWidth: true, helperText: helperTextToDisplay, placeholder: placeholder ?? '', size: 'small', defaultCountry: 'US', required: required, disabled: disabled, onChange: onChange, error: status === 'error', label: label, value: value, InputProps: {
-                    readOnly: true,
-                    inputProps: { ...testProp }
+        return (_jsx("div", { children: _jsx(MuiTelInput, { fullWidth: true, helperText: helperTextToDisplay, placeholder: placeholder ?? '', size: 'small', defaultCountry: 'US', required: required, disabled: disabled, onChange: onChange, error: status === 'error', label: label, value: value, slotProps: {
+                    input: {
+                        readOnly: true,
+                        ...testProp
+                    }
                 }, disableDropdown: disableDropdown }) }));
     }
     const handleChange = inputVal => {
@@ -39,6 +41,6 @@ export default function Phone(props) {
         phoneNumber = phoneNumber ? `+${phoneValue && phoneValue.replace(/\D+/g, '')}` : '';
         handleEvent(actions, 'changeNblur', propName, phoneNumber);
     };
-    return (_jsx(MuiTelInput, { fullWidth: true, variant: 'outlined', helperText: helperTextToDisplay, placeholder: placeholder ?? '', size: 'small', defaultCountry: 'US', required: required, disabled: disabled, onChange: handleChange, onBlur: !readOnly ? handleBlur : undefined, error: status === 'error', label: label, value: inputValue, InputProps: { ...testProp } }));
+    return (_jsx(MuiTelInput, { fullWidth: true, variant: 'outlined', helperText: helperTextToDisplay, placeholder: placeholder ?? '', size: 'small', defaultCountry: 'US', required: required, disabled: disabled, onChange: handleChange, onBlur: !readOnly ? handleBlur : undefined, error: status === 'error', label: label, value: inputValue, slotProps: { input: { ...testProp } } }));
 }
 //# sourceMappingURL=Phone.js.map

package/lib/components/field/Phone/Phone.js.map

@@ -1 +1 @@
-{"version":3,"file":"Phone.js","sourceRoot":"","sources":["../../../../src/components/field/Phone/Phone.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport { MuiTelInput } from 'mui-tel-input';\n\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { PConnFieldProps } from '../../../types/PConnProps';\nimport handleEvent from '../../helpers/event-utils';\n\ninterface PhoneProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Phone here\n}\n\nexport default function Phone(props: PhoneProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    readOnly,\n    testId,\n    helperText,\n    displayMode,\n    hideLabel,\n    placeholder\n  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = (pConn.getStateProps() as any).value;\n\n  const [inputValue, setInputValue] = useState(value);\n  useEffect(() => setInputValue(value), [value]);\n\n  const helperTextToDisplay = validatemessage || helperText;\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  if (displayMode === 'DISPLAY_ONLY') {\n    return <FieldValueList name={hideLabel ? '' : label} value={value} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;\n  }\n\n  if (readOnly) {\n    const disableDropdown = true;\n    return (\n      <div>\n        <MuiTelInput\n          fullWidth\n          helperText={helperTextToDisplay}\n          placeholder={placeholder ?? ''}\n          size='small'\n          defaultCountry='US'\n          required={required}\n          disabled={disabled}\n          onChange={onChange}\n          error={status === 'error'}\n          label={label}\n          value={value}\n          InputProps={{\n            readOnly: true,\n            inputProps: { ...testProp }\n          }}\n          disableDropdown={disableDropdown}\n        />\n      </div>\n    );\n  }\n\n  const handleChange = inputVal => {\n    setInputValue(inputVal);\n  };\n\n  const handleBlur = event => {\n    const phoneValue = event?.target?.value;\n    let phoneNumber = phoneValue.split(' ').slice(1).join();\n    phoneNumber = phoneNumber ? `+${phoneValue && phoneValue.replace(/\\D+/g, '')}` : '';\n    handleEvent(actions, 'changeNblur', propName, phoneNumber);\n  };\n\n  return (\n    <MuiTelInput\n      fullWidth\n      variant='outlined'\n      helperText={helperTextToDisplay}\n      placeholder={placeholder ?? ''}\n      size='small'\n      defaultCountry='US'\n      required={required}\n      disabled={disabled}\n      onChange={handleChange}\n      onBlur={!readOnly ? handleBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={inputValue}\n      InputProps={{ ...testProp }}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Phone.js","sourceRoot":"","sources":["../../../../src/components/field/Phone/Phone.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport { MuiTelInput } from 'mui-tel-input';\n\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport type { PConnFieldProps } from '../../../types/PConnProps';\nimport handleEvent from '../../helpers/event-utils';\n\ninterface PhoneProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Phone here\n}\n\nexport default function Phone(props: PhoneProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    readOnly,\n    testId,\n    helperText,\n    displayMode,\n    hideLabel,\n    placeholder\n  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = (pConn.getStateProps() as any).value;\n\n  const [inputValue, setInputValue] = useState(value);\n  useEffect(() => setInputValue(value), [value]);\n\n  const helperTextToDisplay = validatemessage || helperText;\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  if (displayMode === 'DISPLAY_ONLY') {\n    return <FieldValueList name={hideLabel ? '' : label} value={value} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;\n  }\n\n  if (readOnly) {\n    const disableDropdown = true;\n    return (\n      <div>\n        <MuiTelInput\n          fullWidth\n          helperText={helperTextToDisplay}\n          placeholder={placeholder ?? ''}\n          size='small'\n          defaultCountry='US'\n          required={required}\n          disabled={disabled}\n          onChange={onChange}\n          error={status === 'error'}\n          label={label}\n          value={value}\n          slotProps={{\n            input: {\n              readOnly: true,\n              ...testProp\n            }\n          }}\n          disableDropdown={disableDropdown}\n        />\n      </div>\n    );\n  }\n\n  const handleChange = inputVal => {\n    setInputValue(inputVal);\n  };\n\n  const handleBlur = event => {\n    const phoneValue = event?.target?.value;\n    let phoneNumber = phoneValue.split(' ').slice(1).join();\n    phoneNumber = phoneNumber ? `+${phoneValue && phoneValue.replace(/\\D+/g, '')}` : '';\n    handleEvent(actions, 'changeNblur', propName, phoneNumber);\n  };\n\n  return (\n    <MuiTelInput\n      fullWidth\n      variant='outlined'\n      helperText={helperTextToDisplay}\n      placeholder={placeholder ?? ''}\n      size='small'\n      defaultCountry='US'\n      required={required}\n      disabled={disabled}\n      onChange={handleChange}\n      onBlur={!readOnly ? handleBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={inputValue}\n      slotProps={{ input: { ...testProp } }}\n    />\n  );\n}\n"]}

package/lib/components/field/RadioButtons/RadioButtons.d.ts

@@ -1,7 +1,14 @@
-import { PConnFieldProps } from '../../../types/PConnProps';
+import type { PConnFieldProps } from '../../../types/PConnProps';
 interface RadioButtonsProps extends PConnFieldProps {
     inline: boolean;
     fieldMetadata?: any;
+    variant?: string;
+    hideFieldLabels?: boolean;
+    additionalProps?: any;
+    imagePosition?: string;
+    imageSize?: string;
+    showImageDescription?: boolean;
+    datasource?: any;
 }
 export default function RadioButtons(props: RadioButtonsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/field/RadioButtons/RadioButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/field/RadioButtons/RadioButtons.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAG5D,UAAU,iBAAkB,SAAQ,eAAe;IAEjD,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAoG5D"}
+{"version":3,"file":"RadioButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/field/RadioButtons/RadioButtons.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGjE,UAAU,iBAAkB,SAAQ,eAAe;IAEjD,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAuI5D"}

package/lib/components/field/RadioButtons/RadioButtons.js

@@ -7,7 +7,8 @@ import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 export default function RadioButtons(props) {
     // Get emitted components from map (so we can get any override that may exist)
     const FieldValueList = getComponentFromMap('FieldValueList');
-    const { getPConnect, label, value = '', readOnly, validatemessage, helperText, status, required, inline, displayMode, hideLabel, fieldMetadata } = props;
+    const SelectableCard = getComponentFromMap('SelectableCard');
+    const { getPConnect, label, value = '', readOnly, validatemessage, helperText, status, required, inline, displayMode, hideLabel, fieldMetadata, variant, hideFieldLabels, additionalProps, datasource, imagePosition, imageSize, showImageDescription } = props;
     const [theSelectedButton, setSelectedButton] = useState(value);
     const thePConn = getPConnect();
     const theConfigProps = thePConn.getConfigProps();
@@ -33,14 +34,10 @@ export default function RadioButtons(props) {
         setSelectedButton(value);
     }, [value]);
     if (displayMode === 'DISPLAY_ONLY') {
-        return (_jsx(FieldValueList, { name: hideLabel ? '' : label, 
-            // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
-            value: thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)) }));
+        return (_jsx(FieldValueList, { name: hideLabel ? '' : label, value: thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)) }));
     }
     if (displayMode === 'STACKED_LARGE_VAL') {
-        return (_jsx(FieldValueList, { name: hideLabel ? '' : label, 
-            // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
-            value: thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)), variant: 'stacked' }));
+        return (_jsx(FieldValueList, { name: hideLabel ? '' : label, value: thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)), variant: 'stacked' }));
     }
     const handleChange = event => {
         handleEvent(actionsApi, 'changeNblur', propName, event.target.value);
@@ -48,10 +45,18 @@ export default function RadioButtons(props) {
     const handleBlur = event => {
         thePConn.getValidationApi().validate(event.target.value, ''); // 2nd arg empty string until typedef marked correctly as optional
     };
+    if (variant === 'card') {
+        const stateProps = thePConn.getStateProps();
+        return (_jsxs("div", { children: [_jsx("h4", { style: { marginTop: 0, marginBottom: 0 }, children: label }), _jsx("div", { id: 'selectable-card', style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }, children: _jsx(SelectableCard, { hideFieldLabels: hideFieldLabels, additionalProps: additionalProps, getPConnect: getPConnect, dataSource: datasource, image: {
+                            imagePosition,
+                            imageSize,
+                            showImageDescription,
+                            imageField: stateProps.image?.split('.').pop(),
+                            imageDescription: stateProps.imageDescription?.split('.').pop()
+                        }, onChange: handleChange, recordKey: stateProps.value?.split('.').pop(), cardLabel: stateProps.primaryField?.split('.').pop(), radioBtnValue: value, type: 'radio', setIsRadioCardSelected: displayMode !== 'DISPLAY_ONLY' ? setSelectedButton : undefined }) })] }));
+    }
     return (_jsxs(FormControl, { variant: 'standard', error: status === 'error', required: required, children: [_jsx(FormLabel, { component: 'legend', children: label }), _jsx(RadioGroup, { value: theSelectedButton, onChange: handleChange, onBlur: !readOnly ? handleBlur : undefined, row: inline, children: theOptions.map(theOption => {
-                    return (_jsx(FormControlLabel, { value: theOption.key, label: thePConn.getLocalizedValue(theOption.value, localePath, 
-                        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
-                        thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)), control: _jsx(Radio, { color: 'primary', disabled: readOnly }, theOption.key) }, theOption.key));
+                    return (_jsx(FormControlLabel, { value: theOption.key, label: thePConn.getLocalizedValue(theOption.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)), control: _jsx(Radio, { color: 'primary', disabled: readOnly }, theOption.key) }, theOption.key));
                 }) }), _jsx(FormHelperText, { children: helperTextToDisplay })] }));
 }
 //# sourceMappingURL=RadioButtons.js.map