chore(hotfix): Ignore internal attributes from conditional attributes…

… removal (#58)

* chore(hotfix): Ignore 'Component' from conditional attributes removal

* Release 0.7.4-dev.20231107114922

* Add another internal attr calculateDynamicProperties

* Release 0.7.4-dev.20231107125305

* Revert back to 0.7.2-beta.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remoteoss/json-schema-form",
-  "version": "0.7.3-beta.0",
+  "version": "0.7.2-beta.0",
   "description": "Headless UI form powered by JSON Schemas",
   "author": "Remote.com <engineering@remote.com> (https://remote.com/)",
   "license": "MIT",

src/helpers.js

@@ -24,6 +24,10 @@ const dynamicInternalJsfAttrs = [
   'calculateConditionalProperties', // driven from conditionals
   'calculateCustomValidationProperties', // To be deprecated in favor of json-logic
   'scopedJsonSchema', // The respective JSON Schema
+
+  // HOTFIX/TODO Internal customizations, check test conditions.test.js for more info.
+  'Component',
+  'calculateDynamicProperties',
 ];
 const dynamicInternalJsfAttrsObj = Object.fromEntries(
   dynamicInternalJsfAttrs.map((k) => [k, true])

src/tests/conditions.test.js

@@ -358,4 +358,62 @@ describe('Conditional attributes updated', () => {
       ],
     });
   });
+
+  it('Keeps custom attribute Component (fieldAttrsFromJsf) (hotfix temporary)', () => {
+    // This is necessary as hotfix because we (Remote) use it internally.
+    // Not cool, we'll need a better solution asap.
+    const { fields, handleValidation } = createHeadlessForm(
+      {
+        properties: {
+          is_full_time: { type: 'string', oneOf: [{ const: 'yes' }, { const: 'no' }] },
+          salary_period: {
+            type: 'string',
+            title: 'Salary period',
+            oneOf: [
+              { title: 'Weekly', const: 'weekly' },
+              { title: 'Monthly', const: 'monthly' },
+            ],
+          },
+        },
+        allOf: [
+          {
+            if: {
+              properties: { is_full_time: { const: 'yes' } },
+              required: ['is_full_time'],
+            },
+            then: {
+              properties: {
+                salary_period: {
+                  description: 'We recommend montlhy.',
+                },
+              },
+            },
+          },
+        ],
+      },
+      {
+        strictInputType: false,
+        customProperties: {
+          salary_period: {
+            Component: '<A React Component>',
+            calculateDynamicProperties: () => true,
+          },
+        },
+      }
+    );
+
+    // It's there by default
+    expect(fields[1].Component).toBe('<A React Component>');
+    expect(fields[1].calculateDynamicProperties).toEqual(expect.any(Function));
+
+    // Given "Yes", it stays there too.
+    handleValidation({ is_full_time: 'yes' });
+    expect(fields[1].Component).toBe('<A React Component>');
+    expect(fields[1].calculateDynamicProperties).toEqual(expect.any(Function));
+
+    // Given "No", it stays there too.
+    handleValidation({ is_full_time: 'no' });
+    expect(fields[1].Component).toBe('<A React Component>');
+    expect(fields[1].calculateDynamicProperties).toEqual(expect.any(Function));
+  });
 });