@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/src/components/template/DataReference/utils.ts

@@ -12,7 +12,9 @@ export function getFieldMeta(getPConnect, dataRelationshipContext) {
   const isMultiSelectMode = selectionMode === MULTI;
 
   const pageReference = pConn.getPageReference();
-  let referenceProp = isMultiSelectMode ? selectionList.substring(1) : pageReference.substring(pageReference.lastIndexOf('.') + 1);
+  let referenceProp = isMultiSelectMode
+    ? selectionList.substring(1)
+    : pageReference.substring(pageReference.lastIndexOf('.') + 1);
   // Replace here to use the context name instead
   let contextPageReference = null;
   if (dataRelationshipContext !== null && selectionMode === 'single') {
@@ -21,7 +23,9 @@ export function getFieldMeta(getPConnect, dataRelationshipContext) {
   }
 
   const fieldMetadata =
-    (isMultiSelectMode ? pConn.getFieldMetadata(`${referenceProp}`) : pConn.getCurrentPageFieldMetadata(contextPageReference)) ?? {};
+    (isMultiSelectMode
+      ? pConn.getFieldMetadata(`${referenceProp}`)
+      : pConn.getCurrentPageFieldMetadata(contextPageReference)) ?? {};
   const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
   const compositeKeys: any = [];
   Object.values(fieldParameters).forEach((param: any) => {
@@ -39,7 +43,7 @@ const getCompositeKeys = (pConnect, property) => {
   const fieldMetadata = pConnect.getFieldMetadata(property) || {};
   const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
   const compositeKeys: any = [];
-  Object.values(fieldParameters).forEach(param => {
+  Object.values(fieldParameters).forEach((param) => {
     if (isSelfReferencedProperty(param, property)) {
       compositeKeys.push(param);
     }
@@ -55,11 +59,11 @@ export const getFirstChildConfig = ({
   dataReferenceConfigToChild,
   isCreateNewReferenceEnabled,
   disableStartingFieldsForReference,
-  pyID
+  pyID,
 }) => {
   const config = {
     ...firstChildMeta.config,
-    ...dataReferenceConfigToChild
+    ...dataReferenceConfigToChild,
   };
   const compositeKeys = getCompositeKeys(getPConnect(), dataReferenceConfigToChild?.dataRelationshipContext);
   return {
@@ -68,8 +72,10 @@ export const getFirstChildConfig = ({
     referenceList: config.referenceList ?? rawViewMetadata.config.referenceList,
     parameters: rawViewMetadata.config.parameters,
     localeReference: rawViewMetadata.config.localeReference,
-    contextClass: config.contextClass || rawViewMetadata?.config?.contextClass || rawViewMetadata?.config?.targetObjectClass,
-    allowAddingNewRecords: firstChildMeta.type === 'SimpleTableSelect' && isCreateNewReferenceEnabled ? true : undefined,
+    contextClass:
+      config.contextClass || rawViewMetadata?.config?.contextClass || rawViewMetadata?.config?.targetObjectClass,
+    allowAddingNewRecords:
+      firstChildMeta.type === 'SimpleTableSelect' && isCreateNewReferenceEnabled ? true : undefined,
     actions: firstChildMeta.type === 'SimpleTableSelect' &&
       isCreateNewReferenceEnabled && [
         {
@@ -80,11 +86,11 @@ export const getFirstChildConfig = ({
             inputFields: disableStartingFieldsForReference
               ? {}
               : {
-                  [`.pyAddCaseContextPage.${pyID}`]: `@P .${pyID}`
-                }
-          }
-        }
+                  [`.pyAddCaseContextPage.${pyID}`]: `@P .${pyID}`,
+                },
+          },
+        },
       ],
-    compositeKeys
+    compositeKeys,
   };
 };

package/templates/react-sdk-reference/src/components/template/DefaultForm/DefaultForm.tsx

@@ -21,9 +21,7 @@ const Child = connectToState(mapStateToProps)((props) => {
   return createElement(PConnectComponent, { ...rest, key, visibility });
 });
 
-export default function DefaultForm(
-  props: PropsWithChildren<DefaultFormProps>,
-) {
+export default function DefaultForm(props: PropsWithChildren<DefaultFormProps>) {
   const { getPConnect, NumCols = '1' } = props;
   const instructions = getInstructions(getPConnect(), props.instructions);
 
@@ -51,21 +49,15 @@ export default function DefaultForm(
   // to take the children and create components for them, put in an array and pass as the
   // defaultForm kids
   const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
-  const dfChildren = arChildren?.map((kid) => (
-    <Child key={getKeyForMappedField(kid)} {...kid} />
-  ));
+  const dfChildren = arChildren?.map((kid) => <Child key={getKeyForMappedField(kid)} {...kid} />);
 
   return (
     <>
       {instructions && (
-        <div className='psdk-default-form-instruction-text'>
+        <div className="psdk-default-form-instruction-text">
           {/* server performs sanitization method for instructions html content */}
           {}
-          <div
-            key='instructions'
-            id='instruction-text'
-            dangerouslySetInnerHTML={{ __html: instructions }}
-          />
+          <div key="instructions" id="instruction-text" dangerouslySetInnerHTML={{ __html: instructions }} />
         </div>
       )}
       <div className={divClass}>{dfChildren}</div>

package/templates/react-sdk-reference/src/components/template/DefaultForm/utils/index.ts

@@ -3,14 +3,14 @@ export const mapStateToProps: any = (_, ownProps) => {
 
   return {
     visibility: getPConnect().getComputedVisibility(),
-    getPConnect
+    getPConnect,
   };
 };
 
-export const getKeyForMappedField = field => {
+export const getKeyForMappedField = (field) => {
   if (Array.isArray(field)) {
     return field
-      .map(item => {
+      .map((item) => {
         return getKeyForMappedField(item);
       })
       .join('__');

package/templates/react-sdk-reference/src/components/template/DefaultPage/DefaultPage.tsx

@@ -58,7 +58,7 @@ const COLUMNS_WIDTHS = {
   'one-column': [12],
   'two-column': [6, 6],
   'narrow-wide': [4, 8],
-  'wide-narrow': [8, 4]
+  'wide-narrow': [8, 4],
 };
 
 export default function DefaultPage({
@@ -70,7 +70,7 @@ export default function DefaultPage({
   imageTheme,
   backgroundImage = '',
   backgroundColor = '',
-  tintImage
+  tintImage,
 }: DefaultPageProps) {
   const Banner = getComponentFromRegistry('Banner');
 
@@ -90,7 +90,7 @@ export default function DefaultPage({
           title: heading,
           message,
           backgroundImage,
-          tintImage
+          tintImage,
         }}
       />
     );

package/templates/react-sdk-reference/src/components/template/Details/Details/Details.tsx

@@ -24,20 +24,18 @@ export default function Details(props: DetailsProps) {
   // in a readonly (display) mode instead of a editable
   getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
-  const children = (getPConnect().getChildren() as any[]).map(
-    (configObject, index) =>
-      createElement(PConnectComponent, {
-        ...configObject,
+  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
+    createElement(PConnectComponent, {
+      ...configObject,
 
-        key: index.toString(),
-      }),
+      key: index.toString(),
+    }),
   );
 
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
   if (showHighlightedData) {
-    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any)
-      .config;
+    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;
     highlightedDataArr = highlightedData.map((field) => {
       field.config.displayMode = 'STACKED_LARGE_VAL';
 

package/templates/react-sdk-reference/src/components/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx

@@ -15,12 +15,7 @@ export default function DetailsThreeColumn(props: DetailsThreeColumnProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromRegistry('FieldGroup');
 
-  const {
-    label,
-    showLabel = true,
-    getPConnect,
-    showHighlightedData = false,
-  } = props;
+  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
 
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
@@ -29,20 +24,18 @@ export default function DetailsThreeColumn(props: DetailsThreeColumnProps) {
   // in a readonly (display) mode instead of a editable
   getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
-  const children = (getPConnect().getChildren() as any[]).map(
-    (configObject, index) =>
-      createElement(PConnectComponent, {
-        ...configObject,
+  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
+    createElement(PConnectComponent, {
+      ...configObject,
 
-        key: index.toString(),
-      }),
+      key: index.toString(),
+    }),
   );
 
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
   if (showHighlightedData) {
-    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any)
-      .config;
+    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;
     highlightedDataArr = highlightedData.map((field) => {
       field.config.displayMode = 'STACKED_LARGE_VAL';
 

package/templates/react-sdk-reference/src/components/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx

@@ -15,12 +15,7 @@ export default function DetailsTwoColumn(props: DetailsTwoColumnProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromRegistry('FieldGroup');
 
-  const {
-    label,
-    showLabel = true,
-    getPConnect,
-    showHighlightedData = false,
-  } = props;
+  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
 
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
@@ -29,20 +24,18 @@ export default function DetailsTwoColumn(props: DetailsTwoColumnProps) {
   // in a readonly (display) mode instead of a editable
   getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
-  const children = (getPConnect().getChildren() as any[]).map(
-    (configObject, index) =>
-      createElement(PConnectComponent, {
-        ...configObject,
+  const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
+    createElement(PConnectComponent, {
+      ...configObject,
 
-        key: index.toString(),
-      }),
+      key: index.toString(),
+    }),
   );
 
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
   if (showHighlightedData) {
-    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any)
-      .config;
+    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any).config;
     highlightedDataArr = highlightedData.map((field) => {
       field.config.displayMode = 'STACKED_LARGE_VAL';
 

package/templates/react-sdk-reference/src/components/template/Details/DynamicTabs/DynamicTabs.tsx

@@ -8,8 +8,8 @@ import type { PConnProps } from '@pega/sdk-react';
 
 const useStyles = makeStyles(() => ({
   tab: {
-    minWidth: '72px'
-  }
+    minWidth: '72px',
+  },
 }));
 
 interface DynamicTabsProps extends PConnProps {
@@ -38,7 +38,7 @@ function DynamicTabs(props: DynamicTabsProps) {
       Children.toArray(
         referenceListData.map((item, index) => {
           return <React.Fragment key={item[tablabelProp]}>{buildView(pConnect, index, '')}</React.Fragment>;
-        })
+        }),
       )
     );
   }, [referenceListData]);
@@ -49,25 +49,33 @@ function DynamicTabs(props: DynamicTabsProps) {
   // Loop over the tab contents and and pull out the labels for the navigation
   const tabItems =
     referenceListData?.map((item, i) => {
-      const currentTabLabel = item[tablabelProp] || PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
+      const currentTabLabel =
+        item[tablabelProp] || PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
       return {
         name: currentTabLabel,
-        id: i
+        id: i,
       };
     }) || [];
 
   return (
     <>
-      {propsToUse.label && <h3 id='dynamic-tabs-title'>{propsToUse.label}</h3>}
+      {propsToUse.label && <h3 id="dynamic-tabs-title">{propsToUse.label}</h3>}
       <TabContext value={panelShown.toString()}>
-        <Tabs onChange={handleTabClick} value={panelShown} variant='scrollable' scrollButtons='auto' indicatorColor='primary' id='dynamic-tabs'>
+        <Tabs
+          onChange={handleTabClick}
+          value={panelShown}
+          variant="scrollable"
+          scrollButtons="auto"
+          indicatorColor="primary"
+          id="dynamic-tabs"
+        >
           {tabItems.map((tab: any) => (
             <Tab key={tab.id} label={tab.name} value={tab.id} className={classes.tab} />
           ))}
         </Tabs>
 
         {tabItems.map((tab: any) => (
-          <TabPanel key={tab.id} value={tab.id.toString()} tabIndex={+tab.id} id='dynamic-tabpanel'>
+          <TabPanel key={tab.id} value={tab.id.toString()} tabIndex={+tab.id} id="dynamic-tabpanel">
             <div>{memoisedTabViews[parseInt(tab.id, 10)] || 'No content exists'}</div>
           </TabPanel>
         ))}

package/templates/react-sdk-reference/src/components/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -32,7 +32,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     displayMode,
     fieldHeader,
     allowActions,
-    allowTableEdit: allowAddEdit
+    allowTableEdit: allowAddEdit,
   } = props;
   const pConn = getPConnect();
   const resolvedList = getReferenceList(pConn);
@@ -72,7 +72,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     const addFieldGroupItem = () => {
       addRecord();
     };
-    const deleteFieldGroupItem = index => {
+    const deleteFieldGroupItem = (index) => {
       if (PCore.getPCoreVersion()?.includes('8.7')) {
         pConn.getListActions().deleteEntry(index, pageReference);
       } else {
@@ -87,7 +87,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
       return referenceList.map((item, index) => ({
         id: index,
         name: fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`,
-        children: buildView(pConn, index, lookForChildInConfig)
+        children: buildView(pConn, index, lookForChildInConfig),
       }));
     }, [referenceList?.length]);
 
@@ -105,7 +105,10 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     return referenceList.map((item, index) => {
       const key = item[heading] || `field-group-row-${index}`;
       return (
-        <FieldGroup key={key} name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}>
+        <FieldGroup
+          key={key}
+          name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}
+        >
           {buildView(pConn, index, lookForChildInConfig)}
         </FieldGroup>
       );

package/templates/react-sdk-reference/src/components/template/HierarchicalForm/HierarchicalForm.tsx

@@ -12,7 +12,7 @@ export default function HierarchicalForm(props: PropsWithChildren<HierarchicalFo
   }
 
   return (
-    <Box display='flex' flexDirection='column'>
+    <Box display="flex" flexDirection="column">
       {instructions && (
         <Box mb={2}>
           <div dangerouslySetInnerHTML={{ __html: instructions }} />
@@ -21,7 +21,7 @@ export default function HierarchicalForm(props: PropsWithChildren<HierarchicalFo
       <Box sx={{ flexGrow: 1 }}>
         <TabContext value={currentTabId.toString()}>
           <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-            <Tabs onChange={handleTabClick} value={currentTabId.toString()} variant='scrollable'>
+            <Tabs onChange={handleTabClick} value={currentTabId.toString()} variant="scrollable">
               {processedTabs.map((tab: any) => {
                 const tabLabel = tab.name || tab.label;
                 return (
@@ -30,10 +30,25 @@ export default function HierarchicalForm(props: PropsWithChildren<HierarchicalFo
                     sx={{ textTransform: 'none' }}
                     label={
                       tab.errors ? (
-                        <Tooltip title={`${tabLabel} has errors`} placement='top'>
-                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                        <Tooltip title={`${tabLabel} has errors`} placement="top">
+                          <Box
+                            sx={{
+                              display: 'flex',
+                              alignItems: 'center',
+                              gap: 1,
+                            }}
+                          >
                             <span>{tabLabel}</span>
-                            <Badge badgeContent={tab.errors} color='error' sx={{ '& .MuiBadge-badge': { position: 'static', transform: 'none' } }} />
+                            <Badge
+                              badgeContent={tab.errors}
+                              color="error"
+                              sx={{
+                                '& .MuiBadge-badge': {
+                                  position: 'static',
+                                  transform: 'none',
+                                },
+                              }}
+                            />
                           </Box>
                         </Tooltip>
                       ) : (

package/templates/react-sdk-reference/src/components/template/HierarchicalForm/hooks.ts

@@ -10,11 +10,7 @@ import {
 } from 'react';
 
 import { useGetTabsCount } from '@pega/sdk-react';
-import {
-  searchtabsClick as tabClick,
-  getActiveTabId,
-  getFirstVisibleTabId,
-} from '../SubTabs/tabUtils';
+import { searchtabsClick as tabClick, getActiveTabId, getFirstVisibleTabId } from '../SubTabs/tabUtils';
 import { getInstructions } from '../../helpers/template-utils';
 import type { PConnProps } from '@pega/sdk-react';
 
@@ -22,12 +18,8 @@ const ComponentName = 'HierarchicalForm';
 
 const getLandingPageViewName = (contextName: string) => {
   const target = contextName.substring(0, contextName.lastIndexOf('_'));
-  const activeContainerItemID =
-    PCore.getContainerUtils().getActiveContainerItemName(target);
-  const containerItemData = PCore.getContainerUtils().getContainerItemData(
-    target,
-    activeContainerItemID,
-  );
+  const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(target);
+  const containerItemData = PCore.getContainerUtils().getContainerItemData(target, activeContainerItemID);
   return containerItemData?.view?.config?.name;
 };
 
@@ -38,19 +30,13 @@ export interface HierarchicalFormProps extends PConnProps {
   lastUpdateCaseTime?: string | number;
 }
 
-export function useHierarchicalForm(
-  props: PropsWithChildren<HierarchicalFormProps>,
-) {
+export function useHierarchicalForm(props: PropsWithChildren<HierarchicalFormProps>) {
   const { children = [], getPConnect, tabsVisibility = {}, template } = props;
   const [tabErrors, setTabErrors] = useState<Record<string, any>>({});
   const tabErrorsRef = useRef<Record<string, any>>({});
   const submitAttemptedRef = useRef(false);
-  const {
-    lastUpdateCaseTime = getPConnect().getValue('caseInfo.lastUpdateTime'),
-  } = props;
-  const fullCaseId = getPConnect().getValue(
-    PCore.getConstants().CASE_INFO.CASE_INFO_ID,
-  );
+  const { lastUpdateCaseTime = getPConnect().getValue('caseInfo.lastUpdateTime') } = props;
+  const fullCaseId = getPConnect().getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
 
   const deferLoadedTabs: any = Children.toArray(children)[0];
   deferLoadedTabs.props.getPConnect().setInheritedProp('template', template);
@@ -65,24 +51,15 @@ export function useHierarchicalForm(
 
   const instructions = getInstructions(getPConnect(), props.instructions);
 
-  const storedTab = (
-    PCore.getNavigationUtils().getComponentState(navigationKey) as any
-  )?.activeTab;
+  const storedTab = (PCore.getNavigationUtils().getComponentState(navigationKey) as any)?.activeTab;
 
   const tabsFromChildren = deferLoadedTabs.props.getPConnect().getChildren();
 
   const firstTabId = getFirstVisibleTabId(deferLoadedTabs, undefined);
 
-  const [currentTabId, setCurrentTabId] = useState(
-    getActiveTabId(tabsFromChildren, storedTab || firstTabId),
-  );
+  const [currentTabId, setCurrentTabId] = useState(getActiveTabId(tabsFromChildren, storedTab || firstTabId));
   const [tabVisibilityStr, setTabVisibilityStr] = useState('');
-  const { data: tabData, refreshTabData } = useGetTabsCount(
-    deferLoadedTabs,
-    'hierarchical',
-    currentTabId,
-    template,
-  );
+  const { data: tabData, refreshTabData } = useGetTabsCount(deferLoadedTabs, 'hierarchical', currentTabId, template);
 
   const handleCaseRefresh = (message: any) => {
     if (message.subtype === 'tab') {
@@ -116,10 +93,7 @@ export function useHierarchicalForm(
     }
 
     return () => {
-      if (fullCaseId)
-        PCore.getMessagingServiceManager()
-          .getCaseSubscription(fullCaseId)
-          .unsubscribe(caseSubId);
+      if (fullCaseId) PCore.getMessagingServiceManager().getCaseSubscription(fullCaseId).unsubscribe(caseSubId);
     };
   }, []);
 
@@ -130,9 +104,7 @@ export function useHierarchicalForm(
   useEffect(() => {
     const isVisibilityAvailable =
       Object.values(tabsVisibility).length > 0 &&
-      Object.values(tabsVisibility).every(
-        (visibility) => typeof visibility === 'boolean',
-      );
+      Object.values(tabsVisibility).every((visibility) => typeof visibility === 'boolean');
     if (isVisibilityAvailable) {
       let str = '';
       Object.keys(tabsVisibility).forEach((key) => {
@@ -176,38 +148,31 @@ export function useHierarchicalForm(
     [tabData, currentTabId],
   );
 
-  const tabItems = useMemo(
-    () => tabData?.filter((tab: any) => tab.visibility()) ?? [],
-    [tabData, tabVisibilityStr],
-  );
+  const tabItems = useMemo(() => tabData?.filter((tab: any) => tab.visibility()) ?? [], [tabData, tabVisibilityStr]);
 
   const tabsRef = useRef(tabItems);
   tabsRef.current = tabItems;
 
-  const updateTabErrorsOnViewMutate = useCallback(
-    (messageObject: any, tab: any) => {
-      if (!messageObject.type) {
-        return;
-      }
-      const previousTabErrors = tabErrorsRef.current;
-      let currentTabState = previousTabErrors[tab.id] || {};
-      const { MESSAGES_TYPE_ERROR } = PCore.getConstants().MESSAGES;
-      if (messageObject.type !== MESSAGES_TYPE_ERROR) {
-        delete currentTabState[messageObject.fieldName];
-        currentTabState =
-          Object.keys(currentTabState).length > 0 ? currentTabState : undefined;
-      } else {
-        currentTabState = {
-          ...currentTabState,
-          [messageObject.fieldName]: messageObject.messages,
-        };
-      }
-      const newErrors = { ...previousTabErrors, [tab.id]: currentTabState };
-      tabErrorsRef.current = newErrors;
-      setTabErrors(newErrors);
-    },
-    [],
-  );
+  const updateTabErrorsOnViewMutate = useCallback((messageObject: any, tab: any) => {
+    if (!messageObject.type) {
+      return;
+    }
+    const previousTabErrors = tabErrorsRef.current;
+    let currentTabState = previousTabErrors[tab.id] || {};
+    const { MESSAGES_TYPE_ERROR } = PCore.getConstants().MESSAGES;
+    if (messageObject.type !== MESSAGES_TYPE_ERROR) {
+      delete currentTabState[messageObject.fieldName];
+      currentTabState = Object.keys(currentTabState).length > 0 ? currentTabState : undefined;
+    } else {
+      currentTabState = {
+        ...currentTabState,
+        [messageObject.fieldName]: messageObject.messages,
+      };
+    }
+    const newErrors = { ...previousTabErrors, [tab.id]: currentTabState };
+    tabErrorsRef.current = newErrors;
+    setTabErrors(newErrors);
+  }, []);
 
   useEffect(() => {
     const rawConfig = '_rawConfig';
@@ -239,8 +204,7 @@ export function useHierarchicalForm(
   }, [navigateToFirstErrorTab]);
 
   useEffect(() => {
-    const { CURRENT_ASSIGNMENT_UPDATED } =
-      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS;
+    const { CURRENT_ASSIGNMENT_UPDATED } = PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS;
     PCore.getPubSubUtils().subscribe(
       CURRENT_ASSIGNMENT_UPDATED,
       () => {
@@ -258,10 +222,7 @@ export function useHierarchicalForm(
     );
 
     return () => {
-      PCore.getPubSubUtils().unsubscribe(
-        CURRENT_ASSIGNMENT_UPDATED,
-        'CURRENT_ASSIGNMENT_UPDATED-HierarchicalForm',
-      );
+      PCore.getPubSubUtils().unsubscribe(CURRENT_ASSIGNMENT_UPDATED, 'CURRENT_ASSIGNMENT_UPDATED-HierarchicalForm');
       PCore.getPubSubUtils().unsubscribe(
         PCore.getConstants().PUB_SUB_EVENTS.ERROR_ON_FINISH_ASSIGNMENT,
         'ERROR_ON_FINISH_ASSIGNMENT-HierarchicalForm',
@@ -280,10 +241,7 @@ export function useHierarchicalForm(
       const errorKeys = Object.keys(tabErrors[tab.id] ?? {});
       const errors =
         errorKeys.length > 0
-          ? errorKeys.reduce(
-              (sum, fieldName) => sum + tabErrors[tab.id][fieldName].length,
-              0,
-            )
+          ? errorKeys.reduce((sum, fieldName) => sum + tabErrors[tab.id][fieldName].length, 0)
           : undefined;
       return { ...tab, errors };
     });