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

package/package.json

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

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

@@ -3,3 +3,4 @@ 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'

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/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/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,
@@ -50,10 +56,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
@@ -176,6 +181,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/index.tsx

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

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

@@ -1,49 +1,90 @@
-import { IButtonElementProps, IRepeatingSectionConfig } from '../../../../types'
-import { Form } from 'antd'
+import { IButtonPropsBase, IRepeatingSectionConfig } from '../../../../types'
+import { Form, FormInstance, Tabs } from 'antd'
 import { Button_FillerPortal } from '../../../common/button'
 import { FaTimes } from 'react-icons/fa'
 import { FaPlus } from 'react-icons/fa6'
 import { getButtonRenderProps } from '../../../../functions/forms/get-element-props'
+import { useNotification } from '../../../common/custom-hooks'
+import { RepeatingSectionTabTitleTypeEnum } from '../../../../enums'
 
 /** This component return its children as function to feed the children with dynamic base path */
 export const LayoutRowRepeatableRenderer = ({
   children,
+  formRef,
   basePath,
   repeatingSection,
 }: {
   children: (props?: { updatedBasePath: (string | number)[]; removeButton: JSX.Element }) => JSX.Element
+  formRef?: FormInstance
   basePath: (string | number)[]
   repeatingSection: IRepeatingSectionConfig | undefined
 }) => {
+  const { confirmModal } = useNotification()
+
   if (!!repeatingSection?.name) {
     return (
       <Form.List name={[...basePath, repeatingSection.name]} initialValue={[{}]}>
-        {(fields, { add, remove }) => (
-          <div className="flex flex-col gap-2 items-end">
-            {fields.map(({ name: fieldName }) => (
-              <div className="w-full" key={fieldName}>
-                {children({
-                  updatedBasePath: [...basePath, repeatingSection.name, fieldName],
-                  removeButton:
-                    (repeatingSection.min ?? 0) < fields.length ? (
-                      <Button_FillerPortal
-                        {...getButtonRenderProps(repeatingSection.removeButton ?? ({} as IButtonElementProps))}
-                        onClick={() => remove(fieldName)}
-                      >
-                        {repeatingSection.removeButton?.label || <FaTimes className="text-danger" />}
-                      </Button_FillerPortal>
-                    ) : (
-                      <></>
-                    ),
-                })}
-              </div>
-            ))}
-            {(repeatingSection.max ?? 1000) > fields.length && (
-              <Button_FillerPortal {...getButtonRenderProps(repeatingSection.addButton ?? {} as IButtonElementProps)} onClick={() => add()}>
-                {repeatingSection.addButton?.label ?? <FaPlus className="text-primary" />}
-              </Button_FillerPortal>
-            )}
-          </div>
+        {(repeatItems, { add, remove }) => (
+          <Tabs
+            size="small"
+            defaultActiveKey="0"
+            tabBarStyle={{ paddingLeft: 20 }}
+            more={{ trigger: 'hover' }}
+            tabBarExtraContent={{
+              right: (repeatingSection.max ?? 1000) > repeatItems.length && (
+                <Button_FillerPortal
+                  {...getButtonRenderProps(repeatingSection.addButton ?? ({} as IButtonPropsBase))}
+                  onClick={() => add()}
+                >
+                  {repeatingSection.addButton?.label ?? <FaPlus className="text-primary" />}
+                </Button_FillerPortal>
+              ),
+            }}
+            items={repeatItems.map(({ name: itemName }) => {
+              const defaultTitle = `Group ${itemName + 1}`
+              const tabTitle =
+                !repeatingSection?.titleField?.type || !repeatingSection.titleField.value
+                  ? defaultTitle
+                  : repeatingSection.titleField.type === RepeatingSectionTabTitleTypeEnum.Field
+                  ? formRef?.getFieldValue([
+                      ...basePath,
+                      repeatingSection.name,
+                      itemName,
+                      repeatingSection.titleField.value,
+                    ]) ?? defaultTitle
+                  : `${repeatingSection.titleField.value} ${itemName + 1}`
+
+              return {
+                key: String(itemName),
+                label: tabTitle,
+                children: (
+                  <div className="w-full" key={itemName}>
+                    {children({
+                      updatedBasePath: [...basePath, repeatingSection.name, itemName],
+                      removeButton:
+                        (repeatingSection.min ?? 0) < repeatItems.length ? (
+                          <div className="flex justify-end">
+                            <Button_FillerPortal
+                              {...getButtonRenderProps(repeatingSection.removeButton ?? ({} as IButtonPropsBase))}
+                              onClick={() =>
+                                confirmModal({
+                                  content: 'Are you sure to remove this item?',
+                                  onOk: () => remove(itemName),
+                                })
+                              }
+                            >
+                              {repeatingSection.removeButton?.label || <FaTimes className="text-danger" />}
+                            </Button_FillerPortal>
+                          </div>
+                        ) : (
+                          <></>
+                        ),
+                    })}
+                  </div>
+                ),
+              }
+            })}
+          />
         )}
       </Form.List>
     )

package/src/components/form/layout-renderer/3-element/10-currency.tsx

@@ -4,10 +4,10 @@ import { ICurrencyInputElement } from '../../../../types'
 import { IElementBaseProps } from '.'
 import { getElementGeneralizedProps } from '../../../../functions/forms/get-element-props'
 import { Form } from 'antd'
-import { useEffect, useMemo } from 'react'
+import { memo, useEffect, useMemo } from 'react'
 import { evaluateValue } from '../../../../functions/forms/evaluate-value'
 
-export default function LayoutRenderer_CurrencyField({
+function LayoutRenderer_CurrencyField({
   formContext,
   formItem,
   elementData,
@@ -43,6 +43,8 @@ export default function LayoutRenderer_CurrencyField({
   )
 }
 
+export default memo(LayoutRenderer_CurrencyField)
+
 type ILayoutRenderer_CurrencyField = {
   formContext: IFormContext
   elementData: ICurrencyInputElement

package/src/components/form/layout-renderer/3-element/11-breadcrumb.tsx

@@ -2,12 +2,12 @@ import { useBreadcrumb } from '../../../common/custom-hooks/use-breadcrumb.hook'
 import { Button_FillerPortal } from '../../../common/button'
 import { useNavigate } from 'react-router-dom'
 import { FaChevronRight } from 'react-icons/fa6'
-import React from 'react'
+import React, { memo } from 'react'
 import { PageViewTypEnum } from '../../../../enums'
 import { IBreadcrumbElementProps } from '../../../../types'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
 
-export default function LayoutRenderer_Breadcrumb({ elementProps }: { elementProps: IBreadcrumbElementProps }) {
+function LayoutRenderer_Breadcrumb({ elementProps }: { elementProps: IBreadcrumbElementProps }) {
   const navigate = useNavigate()
   const { breadcrumbs, sliceAt } = useBreadcrumb()
 
@@ -39,3 +39,5 @@ export default function LayoutRenderer_Breadcrumb({ elementProps }: { elementPro
     </div>
   )
 }
+
+export default memo(LayoutRenderer_Breadcrumb)

package/src/components/form/layout-renderer/3-element/12-picker-field.tsx

@@ -4,17 +4,12 @@ import { IPickerElement } from '../../../../types'
 import { IElementBaseProps } from '.'
 import { getElementGeneralizedProps } from '../../../../functions/forms/get-element-props'
 import { ElementTypeEnum } from '../../../../enums'
-import { useMemo } from 'react'
+import { memo, useMemo } from 'react'
 import { findMaxAndMinValues } from '../../../../functions'
 import { VALIDATION_CURRENT_DATE_IDENTIFIER } from '../../../../constants'
 import dayjs from 'dayjs'
 
-export default function LayoutRenderer_PickerField({
-  formContext,
-  formItem,
-  elementData,
-  isDisabled,
-}: ILayoutRenderer_PickerField) {
+function LayoutRenderer_PickerField({ formContext, formItem, elementData, isDisabled }: ILayoutRenderer_PickerField) {
   const props = getElementGeneralizedProps(elementData.props)
 
   const placeholder =
@@ -47,6 +42,8 @@ export default function LayoutRenderer_PickerField({
   )
 }
 
+export default memo(LayoutRenderer_PickerField)
+
 type ILayoutRenderer_PickerField = {
   formContext: IFormContext
   elementData: IPickerElement