Allow to use global form config in field functions (#79)

* Allow to use global form config in field functions

* Prepare components release 4.2.0

* Fix lint errors

Author: asimonok

Diff for: packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 4.2.0 (2025-02-20)
+
+### Features / Enhancements
+
+- Allow to use global form config in field functions (#79)
+
 ## 4.1.0 (2025-01-17)
 
 ### Features / Enhancements

Diff for: packages/components/package.json

@@ -89,5 +89,5 @@
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "types": "dist/index.d.ts",
-  "version": "4.1.0"
+  "version": "4.2.0"
 }

Diff for: packages/components/src/components/Form/Form.test.tsx

@@ -753,6 +753,9 @@ describe('Form', () => {
         getComponent<{
           field: string;
           field2: string;
+          group: {
+            field: string;
+          };
         }>({
           getForm: (builder) =>
             builder
@@ -764,14 +767,27 @@ describe('Form', () => {
                 path: 'field2',
                 defaultValue: '',
                 showIf: (config) => config.field !== '',
-              }),
+              })
+              .addGroup(
+                {
+                  path: 'group',
+                  label: '',
+                },
+                (builder) =>
+                  builder.addInput({
+                    path: 'field',
+                    defaultValue: '',
+                    showIf: (config, formConfig) => formConfig.field !== '',
+                  })
+              ),
         })
       );
 
       /**
        * Should be hidden
        */
       expect(selectors.fieldInput(true, 'field2')).not.toBeInTheDocument();
+      expect(selectors.fieldInput(true, 'group.field')).not.toBeInTheDocument();
 
       /**
        * Update dependent field
@@ -782,6 +798,7 @@ describe('Form', () => {
        * Should be visible now
        */
       expect(selectors.fieldInput(false, 'field2')).toBeInTheDocument();
+      expect(selectors.fieldInput(false, 'group.field')).toBeInTheDocument();
     });
 
     it('Should disable field', () => {

Diff for: packages/components/src/components/Form/Form.tsx

@@ -51,7 +51,7 @@ interface Props<TValue extends object> {
   /**
    * Fields
    */
-  fields: Array<RenderFormField<TValue>>;
+  fields: Array<RenderFormField<TValue, TValue>>;
 
   /**
    * Variant
@@ -81,14 +81,14 @@ const FormControl = ({ className, children }: { className: string; children: Rea
 /**
  * Form
  */
-export const Form = <TValue extends object>({
+export const Form = <TFormValue extends object>({
   name,
   expanded = {},
   onToggleExpanded = () => null,
   fields,
   variant = 'default',
   readonly = false,
-}: Props<TValue>) => {
+}: Props<TFormValue>) => {
   /**
    * Styles
    */
@@ -98,7 +98,7 @@ export const Form = <TValue extends object>({
    * Group Fields In Rows
    * @param fields
    */
-  const groupFieldsInRows = <TObject extends object>(fields: RenderFormField<TObject>[]) => {
+  const groupFieldsInRows = <TGroupValue extends object>(fields: RenderFormField<TFormValue, TGroupValue>[]) => {
     const rowsMap = fields.reduce(
       (acc, field, index) => {
         const rowKey = 'view' in field && field.view?.row ? `row_${field.view.row}` : index.toString();
@@ -111,12 +111,12 @@ export const Form = <TValue extends object>({
         /**
          * Add field to row
          */
-        rowValue.push(field as RenderFormField<TObject>);
+        rowValue.push(field as RenderFormField<TFormValue, TGroupValue>);
         acc.set(rowKey, rowValue);
 
         return acc;
       },
-      new Map() as Map<string, RenderFormField<TObject>[]>
+      new Map() as Map<string, RenderFormField<TFormValue, TGroupValue>[]>
     );
 
     return Array.from(rowsMap.values());
@@ -126,7 +126,7 @@ export const Form = <TValue extends object>({
    * Render Field
    * @param field
    */
-  const renderField = <TObject extends object>(field: RenderFormField<TObject>) => {
+  const renderField = <TGroupValue extends object>(field: RenderFormField<TFormValue, TGroupValue>) => {
     if (!field.showIf()) {
       return null;
     }