@pega/dx-component-builder-sdk 8.23.17 → 23.1.10

package/tests/assets/components/SDK-React/create/override-sdk/field/Currency/Currency.tsx

@@ -36,7 +36,7 @@ export default function Currency(props: CurrrencyProps) {
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
-  const propName = pConn.getStateProps().value;
+  const propName = pConn.getStateProps()["value"];
   const helperTextToDisplay = validatemessage || helperText;
 
   // console.log(`Currency: label: ${label} value: ${value}`);

package/tests/assets/components/SDK-React/create/override-sdk/field/Date/Date.tsx

@@ -39,7 +39,7 @@ export default function Date(props: DateProps) {
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
-  const propName = pConn.getStateProps().value;
+  const propName = pConn.getStateProps()["value"];
   const helperTextToDisplay = validatemessage || helperText;
 
   // Start with default dateFormatInfo

package/tests/assets/components/SDK-React/create/override-sdk/field/DateTime/DateTime.tsx

@@ -33,7 +33,7 @@ export default function DateTime(props: DateTimeProps) {
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
-  const propName = pConn.getStateProps().value;
+  const propName = pConn.getStateProps()["value"];
   const helperTextToDisplay = validatemessage || helperText;
 
   // Start with default dateFormatInfo

package/tests/assets/components/SDK-React/create/override-sdk/field/Decimal/Decimal.tsx

@@ -40,7 +40,7 @@ export default function Decimal(props: DecimalProps) {
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
-  const propName = pConn.getStateProps().value;
+  const propName = pConn.getStateProps()["value"];
   const helperTextToDisplay = validatemessage || helperText;
 
   const [decValue, setDecimalvalue] = useState('');

package/tests/assets/components/SDK-React/create/override-sdk/field/Dropdown/Dropdown.tsx

@@ -4,25 +4,27 @@ import MenuItem from '@material-ui/core/MenuItem';
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+// import type { PConnFieldProps } from '../../../types/PConnProps';
 
 interface IOption {
   key: string;
   value: string;
 }
 
-interface DropdownProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on Dropdown here
-  datasource?: Array<any>;
-  onRecordChange?: any;
-  fieldMetadata?: any;
-  // eslint-disable-next-line react/no-unused-prop-types
-  listType: string;
-  // eslint-disable-next-line react/no-unused-prop-types
-  additionalProps?: object;
-}
+// Can't use DropdownProps with 8.23 until getLocaleRuleNameFromKeys is NOT private
+// interface DropdownProps extends PConnFieldProps {
+//   // If any, enter additional props that only exist on Dropdown here
+//   datasource?: Array<any>,
+//   onRecordChange?: any,
+//   fieldMetadata?: any,
+//   // eslint-disable-next-line react/no-unused-prop-types
+//   listType: string,
+//   // eslint-disable-next-line react/no-unused-prop-types
+//   additionalProps?: object
+// }
+
 
-export default function Dropdown(props: DropdownProps) {
+export default function Dropdown(props /* : DropdownProps */) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
 
@@ -43,19 +45,19 @@ export default function Dropdown(props: DropdownProps) {
     onRecordChange,
     fieldMetadata
   } = props;
-  let { placeholder } = props;
+  let { placeholder = "" } = props;
   placeholder = placeholder || 'Select...';
   const [options, setOptions] = useState<Array<IOption>>([]);
   const helperTextToDisplay = validatemessage || helperText;
 
   const thePConn = getPConnect();
   const actionsApi = thePConn.getActionsApi();
-  const propName = thePConn.getStateProps().value;
+  const propName = thePConn.getStateProps()["value"];
   const className = thePConn.getCaseInfo().getClassName();
   const refName = propName?.slice(propName.lastIndexOf('.') + 1);
 
   useEffect(() => {
-    const list = Utils.getOptionList(props, getPConnect().getDataObject(thePConn.getContextName()));
+    const list = Utils.getOptionList(props, getPConnect().getDataObject('')); // 1st arg empty string until typedef marked correctly
     const optionsList = [...list];
     optionsList.unshift({
       key: placeholder,

package/tests/assets/components/SDK-React/create/override-sdk/field/RadioButtons/RadioButtons.tsx

@@ -4,15 +4,17 @@ import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelper
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+// import type { PConnFieldProps } from '../../../types/PConnProps';
+
+// Can't use RadioButtonProps until getLocaleRuleNameFromKeys is NOT private
+// interface RadioButtonsProps extends PConnFieldProps {
+//   // If any, enter additional props that only exist on RadioButtons here
+//   inline: boolean,
+//   fieldMetadata?: any
+// }
 
-interface RadioButtonsProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on RadioButtons here
-  inline: boolean;
-  fieldMetadata?: any;
-}
 
-export default function RadioButtons(props: RadioButtonsProps) {
+export default function RadioButtons(props /* : RadioButtonsProps */ ) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
 
@@ -35,7 +37,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
   const thePConn = getPConnect();
   const theConfigProps = thePConn.getConfigProps();
   const actionsApi = thePConn.getActionsApi();
-  const propName = thePConn.getStateProps().value;
+  const propName = thePConn.getStateProps()["value"];
   const helperTextToDisplay = validatemessage || helperText;
   const className = thePConn.getCaseInfo().getClassName();
 
@@ -53,7 +55,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
 
   // theOptions will be an array of JSON objects that are literally key/value pairs.
   //  Ex: [ {key: "Basic", value: "Basic"} ]
-  const theOptions = Utils.getOptionList(theConfigProps, thePConn.getDataObject(thePConn.getContextName()));
+  const theOptions = Utils.getOptionList(theConfigProps, thePConn.getDataObject(''));
 
   useEffect(() => {
     // This update theSelectedButton which will update the UI to show the selected button correctly

package/tests/assets/components/SDK-React/create/override-sdk/field/RichText/RichText.tsx

@@ -55,9 +55,11 @@ export default function RichText(props: RichTextProps) {
     }
     const handleChange = () => {
       if (status === 'error') {
-        const property = pConn.getStateProps().value;
+        const property = pConn.getStateProps()["value"];
         pConn.clearErrorMessages({
-          property
+          property,
+          category: '',
+          context: ''
         });
       }
     };
@@ -65,7 +67,7 @@ export default function RichText(props: RichTextProps) {
     const handleBlur = () => {
       if (editorRef.current) {
         const editorValue = editorRef.current.getContent({ format: 'html' });
-        const property = pConn.getStateProps().value;
+        const property = pConn.getStateProps()["value"];
         handleEvent(actionsApi, 'changeNblur', property, editorValue);
       }
     };

package/tests/assets/components/SDK-React/create/override-sdk/field/ScalarList/ScalarList.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // ScalarListProps can't extend PConnFieldProps because its 'value' has a different type
 interface ScalarListProps extends PConnProps {
@@ -29,9 +29,18 @@ function CommaSeparatedList(props) {
 export default function ScalarList(props: ScalarListProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
-  const { label, getPConnect, componentType, value: scalarValues, displayMode, hideLabel, ...restProps } = props;
 
-  const items = scalarValues?.map((scalarValue) => {
+  const {
+    label,
+    getPConnect,
+    componentType,
+    value: scalarValues,
+    displayMode,
+    hideLabel,
+    ...restProps
+  } = props;
+
+  const items = scalarValues?.map(scalarValue => {
     return getPConnect().createComponent(
       {
         type: componentType,
@@ -43,8 +52,8 @@ export default function ScalarList(props: ScalarListProps) {
           readOnly: 'true'
         }
       },
-      null,
-      null,
+      '',
+      '',
       {}
     ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
   });
@@ -60,5 +69,5 @@ export default function ScalarList(props: ScalarListProps) {
 
   const displayComp = <CommaSeparatedList items={items} />;
 
-  return <FieldValueList name={hideLabel ? '' : label} value={displayComp} variant="stacked" />;
+  return <FieldValueList name={hideLabel ? '' : label} value={displayComp} variant='stacked' />;
 }

package/tests/assets/components/SDK-React/create/override-sdk/field/TextInput/TextInput.tsx

@@ -32,7 +32,7 @@ export default function TextInput(props: TextInputProps) {
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
-  const propName = pConn.getStateProps().value;
+  const propName = pConn.getStateProps()["value"];
 
   const helperTextToDisplay = validatemessage || helperText;
 

package/tests/assets/components/SDK-React/create/override-sdk/infra/Assignment/Assignment.tsx

@@ -4,20 +4,23 @@ import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
-interface AssignmentProps extends PConnProps {
-  // If any, enter additional props that only exist on this component
-  children: Array<any>,
-  itemKey: string,
-  isInModal: boolean,
-  banners: Array<any>
-  // eslint-disable-next-line react/no-unused-prop-types
-  actionButtons: Array<any>,
-}
-
-
-export default function Assignment(props: AssignmentProps) {
+// import type { PConnProps } from '../../../types/PConnProps';
+
+// Can't use AssignmentProps until the following are NOT private
+//  getCaseInfo().isAssignmentInCreateStage()
+//  getCaseInfo().isLocalAction()
+// interface AssignmentProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   children: Array<any>,
+//   itemKey: string,
+//   isInModal: boolean,
+//   banners: Array<any>
+//   // eslint-disable-next-line react/no-unused-prop-types
+//   actionButtons: Array<any>,
+// }
+
+
+export default function Assignment(props /* : AssignmentProps */) {
   // Get emitted components from map (so we can get any override that may exist)
   const AssignmentCard = getComponentFromMap("AssignmentCard");
   const MultiStep = getComponentFromMap("MultiStep");
@@ -81,10 +84,10 @@ export default function Assignment(props: AssignmentProps) {
 
       const oWorkItem = children[0].props.getPConnect();
       const oWorkData = oWorkItem.getDataObject();
-      const oData = thePConn.getDataObject(thePConn.getContextName());
+      const oData = thePConn.getDataObject('');  // 1st arg empty string until typedefs allow it to be optional
 
       if (oWorkData?.caseInfo && oWorkData.caseInfo.assignments !== null) {
-        const oCaseInfo = oData.caseInfo;
+        const oCaseInfo = oData["caseInfo"];
 
         if (oCaseInfo && oCaseInfo.actionButtons) {
           setActionButtons(oCaseInfo.actionButtons);

package/tests/assets/components/SDK-React/create/override-sdk/infra/DashboardFilter/DashboardFilter.tsx

@@ -109,7 +109,7 @@ export default function DashboardFilter(props: DashboardFilterProps) {
       fireFilterChange(e.id);
     };
     return getPConnect().createComponent(metadata,
-      null, null, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
+      '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
   };
 
   const onChange = dates => {

package/tests/assets/components/SDK-React/create/override-sdk/infra/DashboardFilter/filterUtils.tsx

@@ -91,7 +91,8 @@ export const createFilterComponent = (getPConnect, filterMeta, index) => {
       metadata={filterMeta}
       type={filterMeta.type}
     >
-      {getPConnect().createComponent(filterMeta, '','', {})}
+      {getPConnect().createComponent(filterMeta,
+        '', '', {})}
     </DashboardFilter>
   );
 };

package/tests/assets/components/SDK-React/create/override-sdk/infra/DeferLoad/DeferLoad.tsx

@@ -70,7 +70,7 @@ export default function DeferLoad(props /* : DeferLoadProps */) {
 
   const getViewOptions = () => ({
     viewContext: resourceType,
-    pageClass: loadViewCaseID ? '' : pConnect.getDataObject(pConnect.getContextName()).pyPortal.classID,
+    pageClass: loadViewCaseID ? '' : pConnect.getDataObject('').pyPortal.classID,  // 2nd arg empty string until typedef allows optional
     container: isContainerPreview ? 'preview' : null,
     containerName: isContainerPreview ? 'preview' : null,
     updateData: isContainerPreview

package/tests/assets/components/SDK-React/create/override-sdk/infra/ErrorBoundary/ErrorBoundary.tsx

@@ -38,7 +38,7 @@ export default function ErrorBoundary(props: ErrorBoundaryProps) {
     Raw meta data for the component:`, localeCategory)} ${JSON.stringify(pConn.getRawMetadata())}`);
   }
 
-  if (pConn.getConfigProps().type === "page") {
+  if (pConn.getConfigProps()["type"] === "page") {
     return (
       theErrorDiv
     );

package/tests/assets/components/SDK-React/create/override-sdk/template/AppShell/AppShell.tsx

@@ -95,7 +95,7 @@ export default function AppShell(props:AppShellProps) {
   useEffect(() => {
     setAppName(PCore.getEnvironmentInfo().getApplicationName());
 
-    const tempMap: any = pConn.getChildren()?.map((child: any, index) => {
+    const tempMap: any = pConn.getChildren()?.["map"]((child: any, index) => {
       const theChildComp = child.getPConnect().getComponentName();
       const theKey = `.${index}`;
       return (

package/tests/assets/components/SDK-React/create/override-sdk/template/DataReference/DataReference.tsx

@@ -1,23 +1,23 @@
 import React, { useMemo, useState, useEffect } from 'react';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-// import type { PConnProps } from '../../../types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // ReferenceProps can't be used until getComponentConfig() is NOT private
-// interface DataReferenceProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   children: Array<any>,
-//   label: string,
-//   showLabel: any,
-//   displayMode: string,
-//   allowAndPersistChangesInReviewMode: boolean,
-//   referenceType: string,
-//   selectionMode: string,
-//   displayAs: string,
-//   ruleClass: string,
-//   parameters: Array<string>, // need to fix
-//   hideLabel: boolean
-// }
+interface DataReferenceProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  label: string,
+  showLabel: any,
+  displayMode: string,
+  allowAndPersistChangesInReviewMode: boolean,
+  referenceType: string,
+  selectionMode: string,
+  displayAs: string,
+  ruleClass: string,
+  parameters: Array<string>, // need to fix
+  hideLabel: boolean
+}
 
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
@@ -26,7 +26,7 @@ const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 declare const PCore: any;
 
 
-export default function DataReference(props /*: DataReferenceProps */) {
+export default function DataReference(props: DataReferenceProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const SingleReferenceReadonly = getComponentFromMap('SingleReferenceReadOnly');
   const MultiReferenceReadonly = getComponentFromMap('MultiReferenceReadOnly');

package/tests/assets/components/SDK-React/create/override-sdk/template/InlineDashboardPage/InlineDashboardPage.tsx

@@ -27,7 +27,7 @@ export default function InlineDashboardPage(props: InlineDashboardPageProps) {
     return Children.toArray(children);
   }, [children]);
 
-  const allFilters = getPConnect().getRawMetadata().children[1];
+  const allFilters = getPConnect().getRawMetadata()["children"][1];
 
   useEffect(() => {
     setFilterComponents(buildFilterComponents(getPConnect, allFilters));

package/tests/assets/components/SDK-React/create/override-sdk/template/MultiReferenceReadOnly/MultiReferenceReadOnly.tsx

@@ -29,7 +29,7 @@ export default function MultiReferenceReadOnly(props: MultiReferenceReadOnlyProp
       hideLabel
     }
   },
-  null, null, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
+  '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
 
    return (
     <React.Fragment>{component}</React.Fragment>

package/tests/assets/components/SDK-React/create/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx

@@ -150,7 +150,7 @@ export default function SimpleTableManual(props: SimpleTableManualProps) {
   //    config.datasource (ex: "@ASSOCIATED .DeclarantChoice")
   //  Neither of these appear in the resolved props
 
-  const rawConfig = rawMetadata?.config;
+  const rawConfig = rawMetadata?.["config"];
   const rawFields =
     rawConfig?.children?.[0]?.children || rawConfig?.presets?.[0].children?.[0]?.children;
 

package/tests/assets/components/SDK-React/create/override-sdk/template/SingleReferenceReadOnly/SingleReferenceReadOnly.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// Need to fix an error noted in comment below before typedefs will work correctly
 interface SingleReferenceReadOnlyProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   config: any,
@@ -56,7 +55,7 @@ export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyPr
       dataRelationshipContext
     }
   },
-  null, null, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
+  '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
 
   return (
     <React.Fragment>{component}</React.Fragment>

package/tests/assets/components/SDK-React/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/index.jsx

@@ -29,12 +29,21 @@ const PegaDxilMyBoolean = props => {
     displayMode,
     variant,
     trueLabel,
-    falseLabel
+    falseLabel,
+    fieldMetadata
   } = props;
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = pConn.getStateProps().value;
 
+  const fieldAdditionalInfo = fieldMetadata?.additionalInformation;
+  const additionalInfo = fieldAdditionalInfo
+    ? {
+        heading: caption,
+        content: fieldAdditionalInfo
+      }
+    : undefined;
+
   let { readOnly, required, disabled } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
     (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
@@ -62,6 +71,7 @@ const PegaDxilMyBoolean = props => {
         pConn.getValidationApi().validate(event.target.checked);
       }}
       data-testid={testId}
+      additionalInfo={additionalInfo}
     />
   );
 
@@ -144,7 +154,8 @@ PegaDxilMyBoolean.defaultProps = {
   variant: 'inline',
   displayValue: 'Yes/No',
   trueLabel: '',
-  falseLabel: ''
+  falseLabel: '',
+  fieldMetadata: {}
 };
 
 PegaDxilMyBoolean.propTypes = {
@@ -164,7 +175,8 @@ PegaDxilMyBoolean.propTypes = {
   variant: PropTypes.string,
   displayValue: PropTypes.string,
   trueLabel: PropTypes.string,
-  falseLabel: PropTypes.string
+  falseLabel: PropTypes.string,
+  fieldMetadata: PropTypes.objectOf(PropTypes.any)
 };
 
 export default PegaDxilMyBoolean;

package/tests/assets/components/SDK-React/createAll/custom-constellation/field/Pega_DXIL_MyCurrency/index.jsx

@@ -46,13 +46,23 @@ const PegaDxilMyCurrency = props => {
     negative,
     notation,
     isTableFormatter,
-    hasSuggestions
+    hasSuggestions,
+    fieldMetadata,
+    enableAdditionalInformation
   } = props;
   let { currencyDisplay } = props;
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = pConn.getStateProps().value;
   const [currencyValue, setCurrencyValue] = useState(() => formatValue(value));
+  const fieldDescription = fieldMetadata?.description;
+  const additionalInfo =
+    enableAdditionalInformation && fieldDescription
+      ? {
+          heading: label,
+          content: fieldDescription
+        }
+      : undefined;
 
   let { readOnly, required, disabled } = props;
 
@@ -211,6 +221,7 @@ const PegaDxilMyCurrency = props => {
       readOnly={readOnly}
       required={required}
       data-testid={testId}
+      additionalInfo={additionalInfo}
       onChange={(enteredValue) => {
         if (hasSuggestions) {
           setStatus(undefined);
@@ -248,7 +259,7 @@ PegaDxilMyCurrency.defaultProps = {
   allowDecimals: true,
   currencyISOCode: 'USD',
   isoCodeSelection: 'constant',
-  testId: '',
+  testId: "",
   displayMode: null,
   additionalProps: {},
   variant: 'inline',
@@ -260,7 +271,9 @@ PegaDxilMyCurrency.defaultProps = {
   currencyDecimalPrecision: 'auto',
   isTableFormatter: false,
   alwaysShowISOCode: false,
-  hasSuggestions: false
+  hasSuggestions: false,
+  fieldMetadata: {},
+  enableAdditionalInformation: false
 };
 
 PegaDxilMyCurrency.propTypes = {
@@ -290,7 +303,9 @@ PegaDxilMyCurrency.propTypes = {
   currencyDecimalPrecision: PropTypes.string,
   isTableFormatter: PropTypes.bool,
   alwaysShowISOCode: PropTypes.bool,
-  hasSuggestions: PropTypes.bool
+  hasSuggestions: PropTypes.bool,
+  fieldMetadata: PropTypes.objectOf(PropTypes.any),
+  enableAdditionalInformation: PropTypes.bool
 };
 
 export default PegaDxilMyCurrency;

package/tests/assets/components/SDK-React/createAll/custom-constellation/field/Pega_DXIL_MyDate/index.jsx

@@ -37,7 +37,9 @@ const PegaDxilMyDate = props => {
     additionalProps,
     displayMode,
     variant,
-    hasSuggestions
+    hasSuggestions,
+    fieldMetadata,
+    enableAdditionalInformation
    } = props;
 
   let {formatter} = props;
@@ -181,6 +183,15 @@ const PegaDxilMyDate = props => {
       </StyledPegaDxilMyDateWrapper>
     );
   } else {
+    const fieldDescription = fieldMetadata?.description;
+    const additionalInfo =
+      enableAdditionalInformation && fieldDescription
+        ? {
+            heading: label,
+            content: fieldDescription
+          }
+        : undefined;
+
     dateComponent = (
       <StyledPegaDxilMyDateWrapper>
       <DateInput
@@ -188,6 +199,7 @@ const PegaDxilMyDate = props => {
         label={label}
         labelHidden={hideLabel}
         info={validatemessage || helperText}
+        additionalInfo={additionalInfo}
         status={status}
         value={value || undefined}
         disabled={disabled}
@@ -221,13 +233,15 @@ PegaDxilMyDate.defaultProps = {
   showWeekNumber: false,
   nextYearRange: "",
   previousYearRange: "",
-  testId: '',
+  testId: "",
   showAsFormattedText: false,
   additionalProps: {},
   displayMode: null,
   variant: "inline",
   formatter: "defaultDate",
-  hasSuggestions: false
+  hasSuggestions: false,
+  fieldMetadata: {},
+  enableAdditionalInformation: false
 };
 
 PegaDxilMyDate.propTypes = {
@@ -249,7 +263,9 @@ PegaDxilMyDate.propTypes = {
   displayMode: PropTypes.string,
   variant: PropTypes.string,
   formatter: PropTypes.string,
-  hasSuggestions: PropTypes.bool
+  hasSuggestions: PropTypes.bool,
+  fieldMetadata: PropTypes.objectOf(PropTypes.any),
+  enableAdditionalInformation: PropTypes.bool
 };
 
 export default PegaDxilMyDate;