@axinom/mosaic-ui 0.56.0-rc.5 → 0.56.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.56.0-rc.5",
+  "version": "0.56.0-rc.6",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.29-rc.5",
+    "@axinom/mosaic-core": "^0.4.29-rc.6",
     "@faker-js/faker": "^7.4.0",
     "@geoffcox/react-splitter": "^2.1.2",
     "@mui/base": "5.0.0-beta.40",
@@ -107,5 +107,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "02b282719a41213749fe017cb2b2a18bd950a8b6"
+  "gitHead": "deae548d43a743e376cfb53bc291fc95fea13946"
 }

package/src/components/DynamicDataList/DynamicListDataEntry/DynamicListDataEntry.spec.tsx

@@ -261,7 +261,7 @@ describe('DynamicListDataEntry', () => {
     expect(input.prop('disabled')).toBe(true);
   });
 
-  it('accepts default values and sets them', () => {
+  it('accepts default values and sets them', async () => {
     const defaultData: Partial<TestData> = {
       desc: 'Description',
     };
@@ -280,15 +280,15 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).toHaveBeenCalledWith(defaultData);
   });
 
-  it(`does not emit onActionClicked if data is invalid`, () => {
+  it(`does not emit onActionClicked if data is invalid`, async () => {
     const spy = jest.fn();
     const mockEvent = {
       e: 'event',
@@ -307,15 +307,15 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).not.toHaveBeenCalled();
   });
 
-  it(`emits onActionClicked with property name and new value if there is data to send`, () => {
+  it(`emits onActionClicked with property name and new value if there is data to send`, async () => {
     const spy = jest.fn();
     const mockNewValue = 'test-value';
     const mockEvent = {
@@ -341,16 +341,16 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith({ [propertyName]: mockNewValue });
   });
 
-  it(`emits row data and new position when 'allowReordering' is true, 'newDataPosition' is defined, and is 'positionKey' is defined`, () => {
+  it(`emits row data and new position when 'allowReordering' is true, 'newDataPosition' is defined, and is 'positionKey' is defined`, async () => {
     const spy = jest.fn();
     const mockEvent = {
       e: 'event',
@@ -381,9 +381,9 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).toHaveBeenCalledTimes(1);
@@ -393,7 +393,7 @@ describe('DynamicListDataEntry', () => {
     });
   });
 
-  it(`emits only row data when 'allowReordering' is false, 'newDataPosition' is defined, and is 'positionKey' is defined`, () => {
+  it(`emits only row data when 'allowReordering' is false, 'newDataPosition' is defined, and is 'positionKey' is defined`, async () => {
     const spy = jest.fn();
     const mockEvent = {
       e: 'event',
@@ -423,9 +423,9 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).toHaveBeenCalledTimes(1);
@@ -434,7 +434,7 @@ describe('DynamicListDataEntry', () => {
     });
   });
 
-  it(`emits only row data when 'allowReordering' is true, 'newDataPosition' is undefined, and is 'positionKey' is defined`, () => {
+  it(`emits only row data when 'allowReordering' is true, 'newDataPosition' is undefined, and is 'positionKey' is defined`, async () => {
     const spy = jest.fn();
     const mockEvent = {
       e: 'event',
@@ -464,9 +464,9 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).toHaveBeenCalledTimes(1);
@@ -475,7 +475,7 @@ describe('DynamicListDataEntry', () => {
     });
   });
 
-  it(`emits only row data when 'allowReordering' is true, 'newDataPosition' is defined, and is 'positionKey' is undefined`, () => {
+  it(`emits only row data when 'allowReordering' is true, 'newDataPosition' is defined, and is 'positionKey' is undefined`, async () => {
     const spy = jest.fn();
     const mockEvent = {
       e: 'event',
@@ -504,9 +504,9 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).toHaveBeenCalledTimes(1);
@@ -515,7 +515,7 @@ describe('DynamicListDataEntry', () => {
     });
   });
 
-  it(`transform property if 'onAddTransformer' is set as a column option`, () => {
+  it(`transform property if 'onAddTransformer' is set as a column option`, async () => {
     const spy = jest.fn();
     const mockNewValue = 'test-value1';
     const mockEvent = {
@@ -550,9 +550,9 @@ describe('DynamicListDataEntry', () => {
 
     const button = wrapper.find(Button);
 
-    act(() => {
+    await act(async () => {
       // @ts-expect-error not full event args object
-      button.prop('onButtonClicked')?.(mockEvent);
+      await button.prop('onButtonClicked')?.(mockEvent);
     });
 
     expect(spy).toHaveBeenCalledTimes(1);

package/src/components/DynamicDataList/DynamicListDataEntry/DynamicListDataEntry.tsx

@@ -1,10 +1,5 @@
 import clsx from 'clsx';
-import React, {
-  PropsWithChildren,
-  ReactElement,
-  useEffect,
-  useState,
-} from 'react';
+import React, { PropsWithChildren, ReactElement, useState } from 'react';
 import { ValidationError } from 'yup';
 import { OptionalObjectSchema } from 'yup/lib/object';
 import { noop } from '../../../helpers/utils';
@@ -110,27 +105,29 @@ export const DynamicListDataEntry = <T extends Data>({
   const [isDirty, setIsDirty] = useState<boolean>(false);
   const [error, setError] = useState<Record<string, string>>({});
 
-  useEffect(() => {
-    if (rowValidationSchema && isDirty) {
-      rowValidationSchema
-        ?.validate(state, { abortEarly: false })
-        .then(() => {
-          setError({});
-        })
-        .catch((e: ValidationError) => {
-          const newErrors: Record<string, string> = {};
-          e.inner.forEach((validationError) => {
-            if (validationError.path !== undefined) {
-              const path = validationError.path;
-              if (newErrors?.[path] === undefined) {
-                newErrors[path] = validationError.message;
-              }
-            }
-          });
-          setError(newErrors);
-        });
+  const validateSchema = async (data: T): Promise<boolean> => {
+    if (!rowValidationSchema) {
+      return true;
     }
-  }, [isDirty, rowValidationSchema, state]);
+
+    try {
+      await rowValidationSchema.validate(data, { abortEarly: false });
+      setError({});
+
+      return true;
+    } catch (e) {
+      const newErrors: Record<string, string> = {};
+      (e as ValidationError).inner.forEach((validationError) => {
+        const path = validationError.path;
+        if (path !== undefined && newErrors?.[path] === undefined) {
+          newErrors[path] = validationError.message;
+        }
+      });
+      setError(newErrors);
+
+      return false;
+    }
+  };
 
   /**
    * Updates new data object with supplied key/value pair
@@ -138,10 +135,12 @@ export const DynamicListDataEntry = <T extends Data>({
    * @param value new value
    */
   const valueChangedHandler = (property: keyof T, value: unknown): void => {
+    const newState = { ...state, [property]: value };
+
     setIsDirty(true);
-    setState((prevState) => {
-      return { ...prevState, [property]: value };
-    });
+    setState(newState);
+
+    validateSchema(newState);
   };
 
   /**
@@ -149,11 +148,11 @@ export const DynamicListDataEntry = <T extends Data>({
    * @param data T
    */
   const onAddItemHandler = async (): Promise<void> => {
-    // TODO: Display a warning if no data was entered?
-    if (rowValidationSchema && !(await rowValidationSchema?.isValid(state))) {
+    const isValid = await validateSchema(state);
+
+    if (!isValid) {
       setIsDirty(true);
-      // eslint-disable-next-line no-console
-      return console.warn('Data not valid');
+      return;
     }
 
     let transformedState: T = state;