form-craft-package 1.8.2-dev.1 → 1.8.2-dev.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.8.2-dev.1",
+  "version": "1.8.2-dev.3",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/common/custom-hooks/index.ts

@@ -3,3 +3,5 @@ export * from './use-notification.hook'
 export * from './use-lazy-modal-opener.hook'
 export * from './use-breadcrumb.hook'
 export * from './use-dayjs-extender.hook'
+export * from './use-set-persistent-domain.hook'
+export * from './use-translation.hook/hook'

package/src/components/common/custom-hooks/use-login-handler.ts

@@ -1,12 +1,12 @@
 import { useReducer, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import client, { auth } from '../../../api/client'
-import { LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 import { cookieHandler } from '../../../functions/cookie-handler'
 import { message } from 'antd'
+import { getLocalStorageDomain } from '../../../functions'
 export function useLoginHandler() {
   const navigate = useNavigate()
-  const domain = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.Domain) || ''
+  const domain = getLocalStorageDomain()
   const [loading, updateLoading] = useReducer((currState: any, updated: any) => ({ ...currState, ...updated }), {
     login: false,
   })
@@ -27,7 +27,7 @@ export function useLoginHandler() {
     const { authRes, initialPath } = await auth(
       values.email,
       values.password,
-      localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.Domain) ?? '',
+      getLocalStorageDomain(),
       values.type || 'password',
     )
     if (authRes.status === 200) {

package/src/components/common/custom-hooks/use-node-condition.hook/use-disabled-elements.hook.ts

@@ -1,8 +1,9 @@
-import { useEffect, useCallback } from 'react'
+import { useEffect } from 'react'
 import useGetCurrentBreakpoint from '../use-window-width.hook'
 import { DeviceBreakpointEnum, FormElementConditionalKeyEnum } from '../../../../enums'
 import { disabledStore } from './visibility-store'
 import { isValidationsMet } from './visibility-utils'
+import { FormInstance } from 'antd'
 import {
   IDndLayoutElement,
   IDndLayoutRow,
@@ -12,16 +13,64 @@ import {
 
 export function useSetDisabledElements(
   layoutConfig?: IDndLayoutStructure_Responsive,
-  formValues?: { [key: string]: any },
+  formDataRef?: FormInstance,
   formDataId?: string,
 ): void {
   const currentBreakpoint = useGetCurrentBreakpoint()
+
+  useEffect(() => {
+    // during the initial renders, handle the initially disabled fields
+    if (!formDataRef) return
+
+    const allValues = formDataRef.getFieldsValue()
+
+    const layout: IDndLayoutRow[] =
+      layoutConfig?.layouts?.[currentBreakpoint] || layoutConfig?.layouts?.[DeviceBreakpointEnum.Default] || []
+    const elementsMap: Record<string, IDndLayoutElement> = layoutConfig?.elements || {}
+    const configsPerElement: Record<string, IFormLayoutElementConditions> = Object.values(elementsMap).reduce(
+      (acc, el) => {
+        const elConditions = el.conditions?.[FormElementConditionalKeyEnum.EnableIf]
+        if (elConditions && Array.isArray(elConditions) && elConditions.length > 0) acc[el.key] = el.conditions!
+
+        return acc
+      },
+      {} as Record<string, IFormLayoutElementConditions>,
+    )
+
+    const allInputsLoaded =
+      layout.length > 0 &&
+      Object.keys(elementsMap).length > 0 &&
+      Object.keys(configsPerElement).length > 0 &&
+      Object.values(allValues).filter(Boolean).length > 0
+
+    if (!allInputsLoaded) return
+
+    handleDisabledSet(allValues, currentBreakpoint, layoutConfig, formDataId)
+  }, [formDataRef, layoutConfig, currentBreakpoint, formDataId])
+}
+
+export function handleDisabledSet(
+  allValues: Record<string, any>,
+  currentBreakpoint: DeviceBreakpointEnum,
+  layoutConfig?: IDndLayoutStructure_Responsive,
+  formDataId?: string,
+) {
+  const disabledSet = computeDisabledSet(allValues, currentBreakpoint, layoutConfig, formDataId)
+  disabledStore.setIds([...disabledSet])
+}
+
+function computeDisabledSet(
+  allValues: Record<string, any>,
+  currentBreakpoint: DeviceBreakpointEnum,
+  layoutConfig?: IDndLayoutStructure_Responsive,
+  formDataId?: string,
+): Set<string> {
   const layout: IDndLayoutRow[] =
     layoutConfig?.layouts?.[currentBreakpoint] || layoutConfig?.layouts?.[DeviceBreakpointEnum.Default] || []
 
   const elementsMap: Record<string, IDndLayoutElement> = layoutConfig?.elements || {}
-  const dataValues: { [key: string]: any } = formValues && typeof formValues === 'object' ? formValues : {}
 
+  // Pull out only those elements which have EnableIf conditions
   const configsPerElement: Record<string, IFormLayoutElementConditions> = Object.values(elementsMap).reduce(
     (acc, el) => {
       const elConditions = el.conditions?.[FormElementConditionalKeyEnum.EnableIf]
@@ -36,29 +85,20 @@ export function useSetDisabledElements(
     layout.length > 0 &&
     Object.keys(elementsMap).length > 0 &&
     Object.keys(configsPerElement).length > 0 &&
-    Object.values(dataValues).length > 0 &&
+    Object.values(allValues).length > 0 &&
     !!formDataId
 
-  const computeIndividuallyDisabled = useCallback((): Set<string> => {
-    if (!allInputsLoaded) return new Set()
-
-    const disabledSet = new Set<string>()
-    Object.values(elementsMap).forEach(({ key }) => {
-      const elementConfigs = configsPerElement[key]
-      const shouldEnable = isValidationsMet(FormElementConditionalKeyEnum.EnableIf, dataValues, elementConfigs, {
+  const disabled = new Set<string>()
+  if (allInputsLoaded) {
+    for (const el of Object.values(elementsMap)) {
+      const conds = configsPerElement[el.key]
+      const shouldEnable = isValidationsMet(FormElementConditionalKeyEnum.EnableIf, allValues, conds, {
         currentBreakpoint,
         formDataId,
       })
+      if (!shouldEnable) disabled.add(el.key)
+    }
+  }
 
-      if (!shouldEnable) disabledSet.add(key)
-    })
-
-    return disabledSet
-  }, [elementsMap, dataValues, configsPerElement, currentBreakpoint, formDataId, allInputsLoaded])
-
-  const individuallyDisabled = computeIndividuallyDisabled()
-
-  useEffect(() => {
-    if (allInputsLoaded) disabledStore.setIds([...individuallyDisabled])
-  }, [allInputsLoaded, individuallyDisabled])
+  return disabled
 }

package/src/components/common/custom-hooks/use-node-condition.hook/use-hidden-elements.hook.ts

@@ -1,16 +1,49 @@
-import { useEffect, useMemo, useCallback } from 'react'
-import useGetCurrentBreakpoint from '../use-window-width.hook'
 import { DeviceBreakpointEnum, FormElementConditionalKeyEnum } from '../../../../enums'
-import { hiddenStore } from './visibility-store'
 import { isValidationsMet } from './visibility-utils'
-import {
+import { useEffect } from 'react'
+import useGetCurrentBreakpoint from '../use-window-width.hook'
+import { FormInstance } from 'antd'
+import { hiddenStore } from './visibility-store'
+import type {
   IDndLayoutCol,
-  IDndLayoutElement,
   IDndLayoutRow,
   IDndLayoutStructure_Responsive,
   IFormLayoutElementConditions,
 } from '../../../../types'
 
+export function useSetHiddenNodes(
+  layoutConfig?: IDndLayoutStructure_Responsive,
+  formDataRef?: FormInstance,
+  formDataId?: string,
+): void {
+  const currentBreakpoint = useGetCurrentBreakpoint()
+
+  useEffect(() => {
+    // during the initial renders, handle the initially hidden nodes
+    if (!formDataRef) return
+
+    const allValues = formDataRef.getFieldsValue() || {}
+    const layout =
+      layoutConfig?.layouts?.[currentBreakpoint] || layoutConfig?.layouts?.[DeviceBreakpointEnum.Default] || []
+
+    const allInputsLoaded = layout.length > 0 && Object.values(allValues).filter(Boolean).length > 0 && !!formDataId
+
+    if (!allInputsLoaded) return
+
+    handleHiddenSet(allValues, currentBreakpoint, layoutConfig, formDataId)
+  }, [formDataRef, layoutConfig, currentBreakpoint, formDataId])
+}
+
+export function handleHiddenSet(
+  allValues: Record<string, any>,
+  currentBreakpoint: DeviceBreakpointEnum,
+  layoutConfig?: IDndLayoutStructure_Responsive,
+  formDataId?: string,
+) {
+  const hiddenIds = computeHiddenIds(allValues, currentBreakpoint, layoutConfig, formDataId)
+  hiddenStore.setIds(hiddenIds)
+}
+
 function computeHiddenIdsRecursive(layout: IDndLayoutRow[], individuallyHidden: Set<string>): string[] {
   const hiddenCols = new Set<string>()
   const hiddenRows = new Set<string>()
@@ -54,16 +87,15 @@ function computeHiddenIdsRecursive(layout: IDndLayoutRow[], individuallyHidden:
   return [...individuallyHidden, ...Array.from(hiddenCols), ...Array.from(hiddenRows)]
 }
 
-export function useSetHiddenNodes(
+function computeHiddenIds(
+  allValues: Record<string, any>,
+  currentBreakpoint: DeviceBreakpointEnum,
   layoutConfig?: IDndLayoutStructure_Responsive,
-  formValues?: { [key: string]: any },
   formDataId?: string,
-): void {
-  const currentBreakpoint = useGetCurrentBreakpoint() || DeviceBreakpointEnum.Default
-  const layout: IDndLayoutRow[] =
+): string[] {
+  const layout =
     layoutConfig?.layouts?.[currentBreakpoint] || layoutConfig?.layouts?.[DeviceBreakpointEnum.Default] || []
-  const elementsMap: Record<string, IDndLayoutElement> = layoutConfig?.elements || {}
-  const dataValues: { [key: string]: any } = formValues && typeof formValues === 'object' ? formValues : {}
+  const elementsMap = layoutConfig?.elements || {}
   const configsPerElement: Record<string, IFormLayoutElementConditions> = Object.values(elementsMap).reduce(
     (curr, el) => {
       const elConditions = el.conditions?.[FormElementConditionalKeyEnum.ShowIf]
@@ -72,40 +104,20 @@ export function useSetHiddenNodes(
 
       return curr
     },
-    {},
+    {} as any,
   )
 
-  const allInputsLoaded =
-    layout.length > 0 &&
-    Object.keys(elementsMap).length > 0 &&
-    Object.keys(configsPerElement).length > 0 &&
-    !!formDataId
-
-  const computeIndividuallyHidden = useCallback((): Set<string> => {
-    if (!allInputsLoaded) return new Set()
+  const individuallyHidden = new Set<string>()
+  for (const el of Object.values(elementsMap)) {
+    const elementConfigs = configsPerElement[el.key]
 
-    const hiddenSet = new Set<string>()
-
-    Object.values(elementsMap).forEach(({ key }) => {
-      const elementConfigs = configsPerElement[key]
-
-      const shouldShow = isValidationsMet(FormElementConditionalKeyEnum.ShowIf, dataValues, elementConfigs, {
-        currentBreakpoint,
-        formDataId,
-      })
-      if (!shouldShow) hiddenSet.add(key)
+    const shouldShow = isValidationsMet(FormElementConditionalKeyEnum.ShowIf, allValues, elementConfigs, {
+      currentBreakpoint,
+      formDataId,
     })
 
-    return hiddenSet
-  }, [elementsMap, dataValues, configsPerElement, currentBreakpoint, formDataId, allInputsLoaded])
-
-  const allHiddenArray = useMemo(() => {
-    const individuallyHidden = computeIndividuallyHidden()
-
-    return computeHiddenIdsRecursive(layout, individuallyHidden)
-  }, [layout, computeIndividuallyHidden])
+    if (!shouldShow) individuallyHidden.add(el.key)
+  }
 
-  useEffect(() => {
-    if (allInputsLoaded) hiddenStore.setIds(allHiddenArray)
-  }, [allHiddenArray, allInputsLoaded])
+  return computeHiddenIdsRecursive(layout, individuallyHidden)
 }

package/src/components/common/custom-hooks/use-set-persistent-domain.hook.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
+
+export const useSetPeristentDomain = (domain: string) => {
+  const location = useLocation()
+  const isLogin = location.pathname === '/login'
+
+  useEffect(() => {
+    if (!isLogin) return
+
+    if (typeof window === 'undefined') return
+
+    const current = window.localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.PersistDomain)
+    if (current !== domain) {
+      window.localStorage.setItem(LOCAL_STORAGE_KEYS_ENUM.PersistDomain, domain)
+      console.info(`[useSetCompanyDomain] "${LOCAL_STORAGE_KEYS_ENUM.PersistDomain}" set to "${domain}"`)
+    }
+  }, [isLogin])
+}

package/src/components/common/custom-hooks/use-translation.hook/hook.ts

@@ -0,0 +1,28 @@
+import { useCallback } from 'react'
+import { useSyncExternalStore } from 'react'
+import { translationStore } from './store'
+import { TranslationTextTypeEnum } from '../../../../enums'
+
+export interface ITranslateFuncParam {
+  key?: string
+  type: TranslationTextTypeEnum
+  subType?: string
+}
+
+export function useTranslation(formId?: number) {
+  const { selectedLanguage, translations } = useSyncExternalStore(
+    translationStore.subscribe.bind(translationStore),
+    translationStore.getSnapshot.bind(translationStore),
+  )
+
+  const t = useCallback(
+    (params: ITranslateFuncParam | ITranslateFuncParam[]) => {
+      if (Array.isArray(params)) return params.map((p) => (p.key ? translationStore.translate(p, formId) : ''))
+
+      return params.key ? translationStore.translate(params, formId) : ''
+    },
+    [selectedLanguage, translations, formId],
+  )
+
+  return { t, selectedLanguage }
+}

package/src/components/common/custom-hooks/use-translation.hook/store.ts

@@ -0,0 +1,130 @@
+import { CountryEnum, LOCAL_STORAGE_KEYS_ENUM } from '../../../../enums'
+import { ITranslations } from '../../../../types'
+import { ITranslateFuncParam } from './hook'
+
+interface Snapshot {
+  selectedLanguage: string
+  translations: ITranslations
+}
+
+type Listener = () => void
+const listeners = new Set<Listener>()
+
+// —— Monkey-patch localStorage.setItem to fire translationUpdate & storage events ——
+;(function () {
+  const originalSetItem = localStorage.setItem
+  localStorage.setItem = function (key: string, value: string) {
+    const oldValue = localStorage.getItem(key)
+    originalSetItem.call(this, key, value)
+    if (key === LOCAL_STORAGE_KEYS_ENUM.SelectedLanguage || key === LOCAL_STORAGE_KEYS_ENUM.FormTranslations) {
+      // fire native StorageEvent for useSyncExternalStore cross-tab compatibility
+      window.dispatchEvent(
+        new StorageEvent('storage', {
+          key,
+          oldValue,
+          newValue: value,
+          storageArea: localStorage,
+          url: window.location.href,
+        }),
+      )
+      // fire custom update for same-tab subscribers
+      window.dispatchEvent(new Event('translationUpdate'))
+    }
+  }
+})()
+
+// —— Internal cache for memoized snapshots ——
+let lastLanguage = ''
+let lastRaw = ''
+let lastTranslations: ITranslations = {}
+let lastSnapshot: Snapshot = { selectedLanguage: '', translations: {} }
+
+function readLanguage(): string {
+  return localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.SelectedLanguage) ?? ''
+}
+
+function readRawTranslations(): string {
+  return localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.FormTranslations) ?? ''
+}
+
+function parseTranslations(raw: string): ITranslations {
+  try {
+    return raw ? JSON.parse(raw) : {}
+  } catch {
+    console.error('[translationStore] invalid JSON in FormTranslations')
+    return {}
+  }
+}
+
+function notifyAll() {
+  listeners.forEach((fn) => fn())
+}
+
+// Cross-tab storage events
+window.addEventListener('storage', (e) => {
+  if (
+    e.storageArea === localStorage &&
+    (e.key === LOCAL_STORAGE_KEYS_ENUM.SelectedLanguage || e.key === LOCAL_STORAGE_KEYS_ENUM.FormTranslations)
+  ) {
+    notifyAll()
+  }
+})
+// Same-tab custom events
+window.addEventListener('translationUpdate', notifyAll)
+
+export const translationStore = {
+  getSnapshot(): Snapshot {
+    const currentLanguage = readLanguage()
+    const currentRaw = readRawTranslations()
+
+    if (currentLanguage !== lastLanguage || currentRaw !== lastRaw) {
+      lastLanguage = currentLanguage
+      lastRaw = currentRaw
+      lastTranslations = parseTranslations(currentRaw)
+      lastSnapshot = { selectedLanguage: lastLanguage, translations: lastTranslations }
+    }
+
+    return lastSnapshot
+  },
+
+  subscribe(fn: Listener): () => void {
+    listeners.add(fn)
+    return () => {
+      listeners.delete(fn)
+    }
+  },
+
+  translate({ key = '', type, subType }: ITranslateFuncParam, formId?: number): string {
+    const { selectedLanguage, translations } = this.getSnapshot()
+    const formTranslations = formId ? (translations[formId] as ITranslations) : undefined
+    const lookup = `${key}__${type}${subType ? `__${subType}` : ''}`
+
+    if (formTranslations && selectedLanguage) {
+      const lookupTranslation = formTranslations[lookup]
+      const inSelected = lookupTranslation?.[selectedLanguage as CountryEnum]
+      if (inSelected) return inSelected
+
+      // fallback to default language
+      const defaultLang = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.DefaultLanguage)
+      return lookupTranslation?.[defaultLang as CountryEnum] ?? ''
+    }
+    return ''
+  },
+
+  getLanguages() {
+    const languages = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.Languages)
+
+    if (languages) return JSON.parse(languages)
+    return []
+  },
+
+  setTranslations(formId: number, obj: ITranslations) {
+    const raw = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.FormTranslations) || ''
+    const parsed = raw ? JSON.parse(raw) : {}
+    localStorage.setItem(LOCAL_STORAGE_KEYS_ENUM.FormTranslations, JSON.stringify({ ...parsed, [formId]: obj }))
+  },
+
+  setLanguage(lang: CountryEnum) {
+    localStorage.setItem(LOCAL_STORAGE_KEYS_ENUM.SelectedLanguage, lang)
+  },
+}

package/src/components/companies/3-config-provider/index.tsx

@@ -3,14 +3,39 @@ import { ConfigProvider } from 'antd'
 import { ConfigContext } from '../context'
 import useSiteMetadata from '../../common/custom-hooks/use-site-meta-data'
 import { ReactNode } from 'react'
+import { Button_FillerPortal } from '../../common/button'
+import { LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 export function ConfigProviderLayout({ children }: { children: ReactNode }): JSX.Element {
-  const { config, theme } = useCompanyConfig()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { config, theme, canSwitchDomain } = useCompanyConfig()
   useSiteMetadata(config?.siteIdentity)
 
+  const showSwitchCompany =
+    canSwitchDomain &&
+    !localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.PersistDomain) &&
+    location.pathname.startsWith('/login')
+
   return (
     <ConfigContext.Provider value={{ config }}>
-      <ConfigProvider theme={theme}>{children}</ConfigProvider>
+      <ConfigProvider theme={theme}>
+        {showSwitchCompany && (
+          <div className="absolute top-2 right-2 z-20">
+            <Button_FillerPortal
+              outline
+              onClick={() => {
+                localStorage.removeItem(LOCAL_STORAGE_KEYS_ENUM.Domain)
+                navigate(0)
+              }}
+            >
+              Switch Project
+            </Button_FillerPortal>
+          </div>
+        )}
+        {children}
+      </ConfigProvider>
     </ConfigContext.Provider>
   )
 }

package/src/components/form/1-list/index.tsx

@@ -7,6 +7,7 @@ import { IFormJoin, IFormDataListData, IFormDataListConfig } from '../../../type
 import { getProjectionKey, mergeJoins } from '../../../functions'
 import { useCacheFormLayoutConfig } from '../../common/custom-hooks/use-cache-form-layout-config.hook'
 import { useNotification } from '../../common/custom-hooks'
+import { translationStore } from '../../common/custom-hooks/use-translation.hook/store'
 
 export function FormDataListComponent({
   formId,
@@ -41,6 +42,12 @@ export function FormDataListComponent({
     defaultFilterReqDataRef.current = undefined
   }, [location.pathname])
 
+  useEffect(() => {
+    if (!cachedConfig?.id || !cachedConfig?.translations) return
+
+    translationStore.setTranslations(cachedConfig.id, cachedConfig.translations)
+  }, [cachedConfig])
+
   useEffect(() => {
     if (!formId || !cachedConfig) return
 

package/src/components/form/2-details/index.tsx

@@ -12,8 +12,14 @@ import { useManyToManyConnector } from '../../common/custom-hooks/use-many-to-ma
 import { PageViewTypEnum, DeviceBreakpointEnum, FormPreservedItemKeys, LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 import { UserAuth } from '../../../api/user'
 import { useCacheFormLayoutConfig } from '../../common/custom-hooks/use-cache-form-layout-config.hook'
-import { useSetHiddenNodes } from '../../common/custom-hooks/use-node-condition.hook/use-hidden-elements.hook'
-import { useSetDisabledElements } from '../../common/custom-hooks/use-node-condition.hook/use-disabled-elements.hook'
+import {
+  handleHiddenSet,
+  useSetHiddenNodes,
+} from '../../common/custom-hooks/use-node-condition.hook/use-hidden-elements.hook'
+import {
+  handleDisabledSet,
+  useSetDisabledElements,
+} from '../../common/custom-hooks/use-node-condition.hook/use-disabled-elements.hook'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../constants'
 import {
   DynamicFormButtonRender,
@@ -27,6 +33,7 @@ import {
   isValidMongoDbId,
   queryParamsToObject,
 } from '../../../functions/forms'
+import { translationStore } from '../../common/custom-hooks/use-translation.hook/store'
 
 export default function FormDataDetailsComponent({
   isPublic,
@@ -50,10 +57,9 @@ export default function FormDataDetailsComponent({
   const currentBreakpoint = useGetCurrentBreakpoint()
 
   const { cachedConfig, isConfigLoading } = useCacheFormLayoutConfig(formId, formKey)
-  const detailsData = Form.useWatch([], formDataRef)
 
-  useSetHiddenNodes(cachedConfig?.detailsConfig, detailsData, formDataId)
-  useSetDisabledElements(cachedConfig?.detailsConfig, detailsData, formDataId)
+  useSetHiddenNodes(cachedConfig?.detailsConfig, formDataRef, formDataId)
+  useSetDisabledElements(cachedConfig?.detailsConfig, formDataRef, formDataId)
 
   useEffect(() => {
     // for public forms, setting the details form into localStorage, so that buttons work correctly
@@ -128,6 +134,12 @@ export default function FormDataDetailsComponent({
     [formDataId, formDataRef],
   )
 
+  useEffect(() => {
+    if (!cachedConfig?.id || !cachedConfig?.translations) return
+
+    translationStore.setTranslations(cachedConfig.id, cachedConfig.translations)
+  }, [cachedConfig])
+
   useEffect(() => {
     if (!cachedConfig?.detailsConfig) return
 
@@ -176,6 +188,10 @@ export default function FormDataDetailsComponent({
         name="dynamic_form_data_form"
         form={formDataRef}
         className={ELEMENTS_DEFAULT_CLASS.DataDetailsForm}
+        onValuesChange={(_changed, allValues) => {
+          handleDisabledSet(allValues, currentBreakpoint, cachedConfig?.detailsConfig, formDataId)
+          handleHiddenSet(allValues, currentBreakpoint, cachedConfig?.detailsConfig, formDataId)
+        }}
       >
         {layout.map((row, rowIdx) => (
           <LayoutRendererRow

package/src/components/form/layout-renderer/1-row/header-render.tsx

@@ -2,17 +2,26 @@ import { ReactNode, useState, useTransition } from 'react'
 import { IFormDndLayoutRowHeader } from '../../../../types'
 import { Collapse, Spin } from 'antd'
 import RowHeader from './header'
+import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
+import { TranslationTextTypeEnum } from '../../../../enums'
 
 export const LayoutRowConditionalHeaderRenderer = ({
+  formId,
   children,
   header,
+  rowId,
 }: {
+  formId?: number
   children: ReactNode
   header: IFormDndLayoutRowHeader | undefined
+  rowId: string
 }) => {
+  const { t } = useTranslation(formId)
   const [isCollapsed, setIsCollapsed] = useState(false)
   const [isPendingTransition, startTransition] = useTransition()
 
+  const headerTitle = t({ key: rowId, type: TranslationTextTypeEnum.Label })
+
   if (header?.isCollapsible)
     return (
       <Spin spinning={isPendingTransition}>
@@ -26,6 +35,7 @@ export const LayoutRowConditionalHeaderRenderer = ({
               label: (
                 <RowHeader
                   {...header}
+                  name={headerTitle as string}
                   isCollapsed={isCollapsed}
                   setIsCollapsed={() => startTransition(() => setIsCollapsed((c) => !c))}
                 />
@@ -37,10 +47,10 @@ export const LayoutRowConditionalHeaderRenderer = ({
       </Spin>
     )
 
-  if (header?.name)
+  if (headerTitle)
     return (
       <>
-        <RowHeader {...header} />
+        <RowHeader {...header} name={headerTitle as string} />
         {children}
       </>
     )

package/src/components/form/layout-renderer/1-row/header.tsx

@@ -35,6 +35,7 @@ export default function RowHeader({
 }
 
 interface IRowHeader extends IFormDndLayoutRowHeader {
+  name: string
   isCollapsed?: boolean
   setIsCollapsed?: () => void
 }

package/src/components/form/layout-renderer/1-row/index.tsx

@@ -27,8 +27,18 @@ export const LayoutRendererRow = memo(
         id={rowData.id}
         className={ELEMENTS_DEFAULT_CLASS.LayoutRowContainer}
       >
-        <LayoutRowConditionalHeaderRenderer header={rowData.props?.header}>
-          <LayoutRowRepeatableRenderer basePath={basePath} repeatingSection={rowData.props?.repeatingSection}>
+        <LayoutRowConditionalHeaderRenderer
+          formId={formContext.formId}
+          rowId={rowData.id}
+          header={rowData.props?.header}
+        >
+          <LayoutRowRepeatableRenderer
+            formId={formContext.formId}
+            rowId={rowData.id}
+            basePath={basePath}
+            formRef={formContext.formRef}
+            repeatingSection={rowData.props?.repeatingSection}
+          >
             {(formListItemProps) => {
               const style: { [key: string]: any } = { ...styleConfig, ...getGridContainerStyle(rowData.display) }
               const hiddenColsIndices = rowData.children.reduce(