form-craft-package 1.8.0 → 1.8.1-dev.1

package/package.json

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

package/src/components/common/currency-field.tsx

@@ -1,7 +1,7 @@
 import { InputNumber } from 'antd'
 import { useMemo, useRef } from 'react'
 import { CountryEnum } from '../../enums'
-import { INTERNATIONALIZATION_DATA } from '../../constants'
+import { ELEMENTS_DEFAULT_CLASS, INTERNATIONALIZATION_DATA } from '../../constants'
 
 export default function CurrencyField({
   country = CountryEnum.US,
@@ -61,7 +61,7 @@ export default function CurrencyField({
           : `${currencySymbol}${parseInt('0').toFixed(decimalPoint)}`
       }}
       parser={(value) => (value ? parseFloat(value.replace(/\p{Sc}\s?|(,*)/gu, '')) : 0)}
-      className="w-full right-align"
+      className={`${ELEMENTS_DEFAULT_CLASS.Currency} w-full right-align`}
     />
   )
 }

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

@@ -0,0 +1,64 @@
+import { useEffect, useCallback } 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 {
+  IDndLayoutElement,
+  IDndLayoutRow,
+  IDndLayoutStructure_Responsive,
+  IFormLayoutElementConditions,
+} from '../../../../types'
+
+export function useSetDisabledElements(
+  layoutConfig?: IDndLayoutStructure_Responsive,
+  formValues?: { [key: string]: any },
+  formDataId?: string,
+): void {
+  const currentBreakpoint = useGetCurrentBreakpoint()
+  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 : {}
+
+  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(dataValues).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, {
+        currentBreakpoint,
+        formDataId,
+      })
+
+      if (!shouldEnable) disabledSet.add(key)
+    })
+
+    return disabledSet
+  }, [elementsMap, dataValues, configsPerElement, currentBreakpoint, formDataId, allInputsLoaded])
+
+  const individuallyDisabled = computeIndividuallyDisabled()
+
+  useEffect(() => {
+    if (allInputsLoaded) disabledStore.setIds([...individuallyDisabled])
+  }, [allInputsLoaded, individuallyDisabled])
+}

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

@@ -0,0 +1,111 @@
+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 {
+  IDndLayoutCol,
+  IDndLayoutElement,
+  IDndLayoutRow,
+  IDndLayoutStructure_Responsive,
+  IFormLayoutElementConditions,
+} from '../../../../types'
+
+function computeHiddenIdsRecursive(layout: IDndLayoutRow[], individuallyHidden: Set<string>): string[] {
+  const hiddenCols = new Set<string>()
+  const hiddenRows = new Set<string>()
+  const rowHiddenCache = new Map<string, boolean>()
+
+  function isRowHidden(row: IDndLayoutRow): boolean {
+    if (rowHiddenCache.has(row.id)) return rowHiddenCache.get(row.id)!
+
+    const hiddenCols = row.children.map((col) => isColHidden(col as IDndLayoutCol))
+    const allColsHidden = hiddenCols.every((hidden) => hidden)
+
+    rowHiddenCache.set(row.id, allColsHidden)
+    return allColsHidden
+  }
+
+  function isColHidden(col: IDndLayoutCol): boolean {
+    const allChildrenHidden = col.children.every((child) => {
+      if (typeof child === 'string') return individuallyHidden.has(child)
+      else return isRowHidden(child)
+    })
+
+    if (allChildrenHidden) hiddenCols.add(col.id)
+
+    return allChildrenHidden
+  }
+
+  function traverseRows(rows: IDndLayoutRow[]) {
+    for (const row of rows) {
+      row.children.forEach((col) => {
+        col.children.forEach((child) => {
+          if (typeof child !== 'string') traverseRows([child])
+        })
+      })
+
+      if (isRowHidden(row)) hiddenRows.add(row.id)
+    }
+  }
+
+  traverseRows(layout)
+
+  return [...individuallyHidden, ...Array.from(hiddenCols), ...Array.from(hiddenRows)]
+}
+
+export function useSetHiddenNodes(
+  layoutConfig?: IDndLayoutStructure_Responsive,
+  formValues?: { [key: string]: any },
+  formDataId?: string,
+): void {
+  const currentBreakpoint = useGetCurrentBreakpoint() || DeviceBreakpointEnum.Default
+  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 : {}
+  const configsPerElement: Record<string, IFormLayoutElementConditions> = Object.values(elementsMap).reduce(
+    (curr, el) => {
+      const elConditions = el.conditions?.[FormElementConditionalKeyEnum.ShowIf]
+
+      if (Array.isArray(elConditions) && elConditions.length > 0) return { ...curr, [el.key]: el.conditions }
+
+      return curr
+    },
+    {},
+  )
+
+  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 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)
+    })
+
+    return hiddenSet
+  }, [elementsMap, dataValues, configsPerElement, currentBreakpoint, formDataId, allInputsLoaded])
+
+  const allHiddenArray = useMemo(() => {
+    const individuallyHidden = computeIndividuallyHidden()
+
+    return computeHiddenIdsRecursive(layout, individuallyHidden)
+  }, [layout, computeIndividuallyHidden])
+
+  useEffect(() => {
+    if (allInputsLoaded) hiddenStore.setIds(allHiddenArray)
+  }, [allHiddenArray, allInputsLoaded])
+}

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

@@ -0,0 +1,18 @@
+import { useSyncExternalStore } from 'react'
+import { disabledStore, hiddenStore } from './visibility-store'
+
+export const useIsNodeHidden = (id: string): boolean =>
+  useSyncExternalStore(
+    (callback) => hiddenStore.subscribe(callback),
+    () => hiddenStore.getSnapshot().includes(id),
+    () => hiddenStore.getSnapshot().includes(id),
+  )
+
+export const checkIsNodeHidden = (id: string): boolean => hiddenStore.getSnapshot().includes(id)
+
+export const useIsNodeDisabled = (id: string): boolean =>
+  useSyncExternalStore(
+    (callback) => disabledStore.subscribe(callback),
+    () => disabledStore.getSnapshot().includes(id),
+    () => disabledStore.getSnapshot().includes(id),
+  )

package/src/components/common/custom-hooks/use-node-condition.hook/visibility-store.ts

@@ -0,0 +1,103 @@
+import { LOCAL_STORAGE_KEYS_ENUM } from '../../../../enums'
+
+type Subscriber = () => void
+
+/**
+ * Factory: create a LocalStorage-backed store for a list of string IDs.
+ * Internally holds:
+ *   • key: the localStorage key (enum value)
+ *   • ids: in-memory array of strings
+ *   • subscribers: a Set of callbacks to notify whenever ids changes
+ *
+ * Exposes methods:
+ *   - subscribe(callback): register for change notifications → returns unsubscribe()
+ *   - getSnapshot(): return current array of IDs (shallow copy)
+ *   - setIds(newIds): write new array to memory + localStorage + notify subscribers
+ */
+function createIdListStore(storageKey: LOCAL_STORAGE_KEYS_ENUM) {
+  // 1) Initialize in-memory array from localStorage (or empty array).
+  let ids: string[] = []
+  try {
+    const raw = localStorage.getItem(storageKey)
+    if (raw) {
+      const parsed = JSON.parse(raw)
+      if (Array.isArray(parsed)) {
+        ids = parsed
+      }
+    }
+  } catch {
+    ids = []
+  }
+
+  // 2) Keep track of subscribers (callbacks)
+  const subscribers = new Set<Subscriber>()
+
+  // 3) Storage-event listener (to pick up changes from other tabs/windows).
+  window.addEventListener('storage', (e) => {
+    if (e.key === storageKey) {
+      try {
+        const newArr = e.newValue ? JSON.parse(e.newValue) : []
+        if (Array.isArray(newArr)) {
+          ids = newArr
+          // Notify all subscribers that our in-memory copy changed
+          subscribers.forEach((cb) => cb())
+        }
+      } catch {
+        // ignore JSON errors
+      }
+    }
+  })
+
+  return {
+    /**
+     * Subscribe to changes. Callback is called whenever setIds or a storage-event modifies this store.
+     * Returns an unsubscribe function.
+     */
+    subscribe(callback: Subscriber): () => void {
+      subscribers.add(callback)
+      return () => {
+        subscribers.delete(callback)
+      }
+    },
+
+    /** Return a shallow copy of the current IDs array. */
+    getSnapshot(): string[] {
+      return [...ids]
+    },
+
+    /**
+     * Overwrite the list of IDs (in memory + localStorage), then notify subscribers.
+     * If the new array is identical (same length & same items in order), do nothing.
+     */
+    setIds(newIds: string[]) {
+      // Quick check: length mismatch → definitely changed
+      if (newIds.length !== ids.length) {
+        updateAndNotify(newIds)
+        return
+      }
+      // If same length, compare each item
+      for (let i = 0; i < newIds.length; i++) {
+        if (newIds[i] !== ids[i]) {
+          updateAndNotify(newIds)
+          return
+        }
+      }
+      // Otherwise, identical content → no update
+    },
+  }
+
+  /** Internal helper: write to memory + localStorage + notify subscribers */
+  function updateAndNotify(newIdsArr: string[]) {
+    ids = [...newIdsArr]
+    try {
+      localStorage.setItem(storageKey, JSON.stringify(ids))
+    } catch {
+      // localStorage quota exceeded? we ignore for now.
+    }
+    subscribers.forEach((cb) => cb())
+  }
+}
+
+// Instantiate two separate stores:
+export const hiddenStore = createIdListStore(LOCAL_STORAGE_KEYS_ENUM.HiddenElements)
+export const disabledStore = createIdListStore(LOCAL_STORAGE_KEYS_ENUM.DisabledElements)

package/src/components/common/custom-hooks/use-node-condition.hook/visibility-utils.ts

@@ -0,0 +1,138 @@
+import { NEW_FORM_DATA_IDENTIFIER, REGEX_PATTERNS } from '../../../../constants'
+import { IFormContext } from '../../../form/layout-renderer/1-row'
+import { isNewFormDataPage } from '../../../../functions'
+import {
+  ConditionDependencyTypeEnum,
+  DeviceBreakpointEnum,
+  FieldValidationEnum,
+  FormElementConditionalKeyEnum,
+  FormStateEnum,
+} from '../../../../enums'
+import {
+  IConditionalValidation,
+  IConditionalValidation_AuthUser,
+  IConditionalValidation_Field,
+  IConditionalValidation_FormState,
+  IFormLayoutElementConditions,
+} from '../../../../types'
+
+const getValidationConfigs = (validationConfigs: IConditionalValidation[]) =>
+  validationConfigs.reduce<{
+    fieldValidations: IConditionalValidation_Field[]
+    authUserValidations: IConditionalValidation_AuthUser[]
+    hasDataIdValidation: IConditionalValidation_FormState | undefined
+    alwaysDisabled: boolean
+    hideScreens: DeviceBreakpointEnum[]
+  }>(
+    (curr, v) => {
+      if (v.dependentType === ConditionDependencyTypeEnum.Field)
+        return { ...curr, fieldValidations: [...curr.fieldValidations, v] }
+      else if (v.dependentType === ConditionDependencyTypeEnum.AuthUser)
+        return { ...curr, authUserValidations: [...curr.authUserValidations, v] }
+      else if (v.dependentType === ConditionDependencyTypeEnum.FormState) return { ...curr, hasDataIdValidation: v }
+      else if (v.dependentType === ConditionDependencyTypeEnum.AlwaysFalse) return { ...curr, alwaysDisabled: true }
+      else if (v.dependentType === ConditionDependencyTypeEnum.Screen) return { ...curr, hideScreens: v.hideScreens }
+
+      return curr
+    },
+    {
+      fieldValidations: [],
+      authUserValidations: [],
+      hasDataIdValidation: undefined,
+      alwaysDisabled: false,
+      hideScreens: [],
+    },
+  )
+
+/** If any of the validations fails, the function returns false */
+const validateConditions = (validations: IConditionalValidation_Field[], data: Record<string, any>): boolean => {
+  return validations.every((validation) => {
+    const { field, rule, value: configuredValue } = validation
+    const formValue = data[field]
+
+    switch (rule) {
+      case FieldValidationEnum.Required:
+        if (!!formValue) return true
+        return false
+
+      case FieldValidationEnum.DataLength:
+        return (
+          typeof formValue === 'string' && typeof configuredValue === 'number' && formValue.length === configuredValue
+        )
+
+      case FieldValidationEnum.MaxDataLength:
+        return (
+          typeof formValue === 'string' && typeof configuredValue === 'number' && formValue.length <= configuredValue
+        )
+
+      case FieldValidationEnum.MinDataLength:
+        return (
+          typeof formValue === 'string' && typeof configuredValue === 'number' && formValue.length >= configuredValue
+        )
+
+      case FieldValidationEnum.MinValue:
+        return typeof formValue === 'number' && typeof configuredValue === 'number' && formValue >= configuredValue
+
+      case FieldValidationEnum.MaxValue:
+        return typeof formValue === 'number' && typeof configuredValue === 'number' && formValue <= configuredValue
+
+      case FieldValidationEnum.Regex:
+        return (
+          typeof formValue === 'string' &&
+          typeof configuredValue === 'string' &&
+          new RegExp(configuredValue).test(formValue)
+        )
+
+      case FieldValidationEnum.Email:
+        return typeof formValue === 'string' && REGEX_PATTERNS.Email.test(formValue)
+
+      case FieldValidationEnum.StrictlyEquals:
+        if (!configuredValue) return !formValue || [null, undefined, ''].includes(formValue)
+        // equals no value
+
+        return formValue === configuredValue
+
+      default:
+        return false
+    }
+  })
+}
+
+export const isValidationsMet = (
+  type: FormElementConditionalKeyEnum,
+  dataValues: { [key: string]: any },
+  configs?: IFormLayoutElementConditions,
+  contextValues: { currentBreakpoint?: DeviceBreakpointEnum } & IFormContext = {},
+) => {
+  const validations = configs?.[type] ?? []
+
+  if (validations.length === 0) return true
+
+  const { fieldValidations, authUserValidations, hasDataIdValidation, alwaysDisabled, hideScreens } =
+    getValidationConfigs(validations)
+
+  if (alwaysDisabled) return false
+
+  // Dependent on other fields
+  const isFieldsConditionsMet =
+    dataValues && typeof dataValues === 'object' && fieldValidations.length > 0
+      ? validateConditions(fieldValidations as IConditionalValidation_Field[], dataValues)
+      : true
+
+  // Dependent on auth user
+  const isAuthUserConditionsMet = authUserValidations.length > 0 ? false : true
+
+  // Dependent on data id
+  const isDataIdConditionsMet = hasDataIdValidation
+    ? hasDataIdValidation.state === FormStateEnum.New
+      ? isNewFormDataPage(contextValues.formDataId)
+      : contextValues.formDataId !== NEW_FORM_DATA_IDENTIFIER
+    : true
+
+  // Dependent on screen
+  const isScreenConditionsMet = contextValues?.currentBreakpoint
+    ? !hideScreens.includes(contextValues.currentBreakpoint)
+    : true
+
+  return isFieldsConditionsMet && isAuthUserConditionsMet && isDataIdConditionsMet && isScreenConditionsMet
+}

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

@@ -8,16 +8,19 @@ const useGetCurrentBreakpoint = (): DeviceBreakpointEnum => {
   )
 
   useEffect(() => {
-    const handleResize = () => setWidth(width)
+    const handleResize = () => {
+      const current = window.visualViewport?.width || window.innerWidth
+      setWidth(current)
+    }
 
     window.addEventListener('resize', handleResize)
     window.addEventListener('orientationchange', handleResize)
-    window.visualViewport?.addEventListener('resize', handleResize)
+    if (window.visualViewport) window.visualViewport.addEventListener('resize', handleResize)
 
     return () => {
       window.removeEventListener('resize', handleResize)
       window.removeEventListener('orientationchange', handleResize)
-      window.visualViewport?.removeEventListener('resize', handleResize)
+      if (window.visualViewport) window.visualViewport.removeEventListener('resize', handleResize)
     }
   }, [])
 

package/src/components/form/1-list/table-header.tsx

@@ -4,14 +4,18 @@ import dayjs from 'dayjs'
 import { extractFiltersFromLayout } from '../../../functions/forms'
 import { DeviceBreakpointEnum, FilterConfigTypeEnum, FormPreservedItemKeys } from '../../../enums'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
+import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
+import { IDataListHeaderLayoutContext } from './table'
 import {
   BSON_DATA_IDENTIFIER_PREFIXES,
+  ELEMENTS_DEFAULT_CLASS,
   VALUE_REPLACEMENT_PLACEHOLDER,
   VALUE_REPLACEMENT_PLACEHOLDER2,
 } from '../../../constants'
-import { DynamicFormButtonRender } from '../layout-renderer/3-element/1-dynamic-button'
-import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
-import { IDataListHeaderLayoutContext } from './table'
+import {
+  DynamicFormButtonRender,
+  IDynamicButton_DisplayStateProps,
+} from '../layout-renderer/3-element/1-dynamic-button'
 import {
   IDndLayoutStructure_Responsive,
   IFilterConfig,
@@ -107,7 +111,7 @@ export default function FormDataListHeaderComponent({
   )
 
   return (
-    <Form layout="vertical" form={filtersFormRef}>
+    <Form layout="vertical" form={filtersFormRef} className={ELEMENTS_DEFAULT_CLASS.DataListHeaderForm}>
       {dndLayout.map((row, rowIdx) => (
         <LayoutRendererRow
           key={rowIdx}
@@ -115,9 +119,9 @@ export default function FormDataListHeaderComponent({
           titleComponent={titleComponent}
           formContext={formContext}
           elements={layoutConfig?.elements ?? {}}
-          renderButton={(btnProps, conditions) => (
+          renderButton={(btnProps) => (
             <DynamicFormButtonRender
-              displayStateProps={{ btnProps, conditions }}
+              displayStateProps={btnProps as IDynamicButton_DisplayStateProps}
               formContext={formContext}
               onCustomFunctionCall={onCustomFunctionCall}
             />

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

@@ -13,6 +13,7 @@ import { IFormDataListConfig, IFormDataListData, IFormDataTableColumn } from '..
 import { processOptions } from '../../../functions/forms/get-data-list-option-value'
 import { IFormContext } from '../layout-renderer/1-row'
 import { useFindDynamiForm } from '../../common/custom-hooks'
+import { ELEMENTS_DEFAULT_CLASS } from '../../../constants'
 
 export default function FormDataListTableComponent({
   layoutsConfigs,
@@ -121,6 +122,7 @@ export default function FormDataListTableComponent({
       />
       {(!otherConfigs || otherConfigs.listType === FormDataListViewTypeEnum.Table) && (
         <Table<IFormDataListData>
+          className={ELEMENTS_DEFAULT_CLASS.DataTable}
           dataSource={dataList.data}
           columns={tableColumnsFiltered}
           rowKey={(record) => record._id}

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

@@ -2,7 +2,11 @@ import { Form, Spin } from 'antd'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { IDndLayoutStructure_Responsive } from '../../../types'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
-import { DynamicFormButtonRender, ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
+import {
+  DynamicFormButtonRender,
+  ICustomFunctionCall,
+  IDynamicButton_DisplayStateProps,
+} from '../layout-renderer/3-element/1-dynamic-button'
 import FormDataListSkeleton_Details from '../../common/loading-skeletons/details'
 import { useLocation } from 'react-router-dom'
 import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
@@ -13,6 +17,8 @@ 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 {
   fromMongoDbExtendedJSON,
   getPickerFieldsWithOriginalTz,
@@ -20,6 +26,7 @@ import {
   isValidMongoDbId,
   queryParamsToObject,
 } from '../../../functions/forms'
+import { ELEMENTS_DEFAULT_CLASS } from '../../../constants'
 
 export default function FormDataDetailsComponent({
   isPublic,
@@ -43,6 +50,10 @@ 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)
 
   useEffect(() => {
     // for public forms, setting the details form into localStorage, so that buttons work correctly
@@ -161,16 +172,21 @@ export default function FormDataDetailsComponent({
 
   return (
     <Spin spinning={loading}>
-      <Form layout="vertical" name="dynamic_form_data_form" form={formDataRef}>
+      <Form
+        layout="vertical"
+        name="dynamic_form_data_form"
+        form={formDataRef}
+        className={ELEMENTS_DEFAULT_CLASS.DataDetailsForm}
+      >
         {layout.map((row, rowIdx) => (
           <LayoutRendererRow
             key={rowIdx}
             rowData={row}
             formContext={formContext}
             elements={cachedConfig.detailsConfig.elements}
-            renderButton={(btnProps, conditions) => (
+            renderButton={(btnProps) => (
               <DynamicFormButtonRender
-                displayStateProps={{ btnProps, conditions, defaultDisabled: true }}
+                displayStateProps={btnProps as IDynamicButton_DisplayStateProps}
                 formContext={formContext}
                 onCustomFunctionCall={onCustomFunctionCall}
               />

package/src/components/form/3-preview/index.tsx

@@ -2,9 +2,13 @@ import { Form } from 'antd'
 import { IDndLayoutStructure } from '../../../types'
 import { FormPreservedItemKeys } from '../../../enums'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
-import { DynamicFormButtonRender } from '../layout-renderer/3-element/1-dynamic-button'
 import { useNotification } from '../../common/custom-hooks'
 import { ReactNode, useEffect, useMemo } from 'react'
+import {
+  DynamicFormButtonRender,
+  IDynamicButton_DisplayStateProps,
+} from '../layout-renderer/3-element/1-dynamic-button'
+import { ELEMENTS_DEFAULT_CLASS } from '../../../constants'
 
 export const FormPreviewComponent = ({
   layout,
@@ -21,7 +25,7 @@ export const FormPreviewComponent = ({
   const formContext = useMemo(() => ({ formRef: previewFormRef }), [previewFormRef])
 
   return (
-    <Form layout="vertical" form={previewFormRef}>
+    <Form layout="vertical" form={previewFormRef} className={ELEMENTS_DEFAULT_CLASS.PreviewForm}>
       {layout.map((row, rowIdx) => (
         <LayoutRendererRow
           key={rowIdx}
@@ -29,9 +33,9 @@ export const FormPreviewComponent = ({
           titleComponent={titleComponent}
           formContext={formContext}
           elements={elements}
-          renderButton={(btnProps, conditions) => (
+          renderButton={(btnProps) => (
             <DynamicFormButtonRender
-              displayStateProps={{ btnProps, conditions }}
+              displayStateProps={btnProps as IDynamicButton_DisplayStateProps}
               formContext={formContext}
               onCustomFunctionCall={() => infoModal({ content: 'Custom function call!' })}
             />