@jsonforms/material-renderers 3.0.0-alpha.0 → 3.0.0-beta.0

package/test/renderers/MaterialAllOfRenderer.test.tsx

@@ -26,7 +26,7 @@ import './MatchMediaMock';
 import React from 'react';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { ControlElement } from '@jsonforms/core';
 import { MaterialAllOfRenderer, materialRenderers } from '../../src';
 import { JsonForms, JsonFormsStateProvider } from '@jsonforms/react';

package/test/renderers/MaterialAnyOfRenderer.test.tsx

@@ -26,7 +26,7 @@ import './MatchMediaMock';
 import React from 'react';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import {
   ControlElement
 } from '@jsonforms/core';
@@ -62,7 +62,7 @@ describe('Material anyOf renderer', () => {
 
   afterEach(() => wrapper.unmount());
 
-  it('should add an item at correct path', () => {
+  it('should add an item at correct path', (done) => {
     const schema = {
       type: 'object',
       properties: {
@@ -103,9 +103,12 @@ describe('Material anyOf renderer', () => {
     const input = wrapper.find('input').first();
     input.simulate('change', { target: { value: 'test' } });
     wrapper.update();
-    expect(onChangeData.data).toEqual({
-      value: 'test'
-    });
+    setTimeout(() => {
+      expect(onChangeData.data).toEqual({
+        value: 'test'
+      });
+      done();
+    }, 1000);
   });
 
   it('should add a "mything"', async () => {
@@ -179,7 +182,7 @@ describe('Material anyOf renderer', () => {
     expect(nrOfRowsAfterAdd.length).toBe(4);
   });
 
-  it('should switch to "yourThing" edit, then switch back, then edit', async () => {
+  it('should switch to "yourThing" edit, then switch back, then edit', async (done) => {
     const schema = {
       type: 'object',
       properties: {
@@ -260,9 +263,12 @@ describe('Material anyOf renderer', () => {
     input.simulate('change', { target: { value: 'test' } });
     wrapper.update();
 
-    expect(onChangeData.data).toEqual({
-      myThingsAndOrYourThings: [{ age: 5, name: 'test' }]
-    });
+    setTimeout(() => {
+      expect(onChangeData.data).toEqual({
+        myThingsAndOrYourThings: [{ age: 5, name: 'test' }]
+      });
+      done();
+    }, 1000);
   });
 
   it('should be hideable', () => {

package/test/renderers/MaterialAnyOfStringOrEnumControl.test.tsx

@@ -26,7 +26,7 @@ import './MatchMediaMock';
 import React from 'react';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import {
   ControlElement,
   JsonSchema

package/test/renderers/MaterialArrayControl.test.tsx

@@ -33,7 +33,7 @@ import * as React from 'react';
 import MaterialArrayControlRenderer from '../../src/complex/MaterialArrayControlRenderer';
 import { materialCells, materialRenderers } from '../../src';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider, StatelessRenderer } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
 

package/test/renderers/MaterialArrayLayout.test.tsx

@@ -34,9 +34,9 @@ import {
   materialArrayLayoutTester
 } from '../../src/layouts';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonForms, JsonFormsStateProvider } from '@jsonforms/react';
-import { ExpansionPanel } from '@material-ui/core';
+import { Accordion } from '@mui/material';
 import { initCore } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -292,7 +292,7 @@ describe('Material array layout', () => {
     // up button
     expect(
       wrapper
-        .find('ExpandPanelRenderer')
+        .find('Memo(ExpandPanelRendererComponent)')
         .at(0)
         .find('button')
         .find({ 'aria-label': 'Move up' }).length
@@ -300,7 +300,7 @@ describe('Material array layout', () => {
     // down button
     expect(
       wrapper
-        .find('ExpandPanelRenderer')
+        .find('Memo(ExpandPanelRendererComponent)')
         .at(0)
         .find('button')
         .find({ 'aria-label': 'Move down' }).length
@@ -326,7 +326,7 @@ describe('Material array layout', () => {
 
     // getting up button of second item in expension panel;
     const upButton = wrapper
-      .find('ExpandPanelRenderer')
+      .find('Memo(ExpandPanelRendererComponent)')
       .at(1)
       .find('button')
       .find({ 'aria-label': 'Move up' });
@@ -363,7 +363,7 @@ describe('Material array layout', () => {
 
     // getting up button of second item in expension panel;
     const upButton = wrapper
-      .find('ExpandPanelRenderer')
+      .find('Memo(ExpandPanelRendererComponent)')
       .at(0)
       .find('button')
       .find({ 'aria-label': 'Move down' });
@@ -394,7 +394,7 @@ describe('Material array layout', () => {
 
     // getting up button of second item in expension panel;
     const upButton = wrapper
-      .find('ExpandPanelRenderer')
+      .find('Memo(ExpandPanelRendererComponent)')
       .at(0)
       .find('button')
       .find({ 'aria-label': 'Move up' });
@@ -414,7 +414,7 @@ describe('Material array layout', () => {
 
     // getting up button of second item in expension panel;
     const downButton = wrapper
-      .find('ExpandPanelRenderer')
+      .find('Memo(ExpandPanelRendererComponent)')
       .at(1)
       .find('button')
       .find({ 'aria-label': 'Move down' });
@@ -426,7 +426,7 @@ describe('Material array layout', () => {
       .find(
         `#${
         wrapper
-          .find(ExpansionPanel)
+          .find(Accordion)
           .at(index)
           .props()['aria-labelledby']
         }`

package/test/renderers/MaterialBooleanCell.test.tsx

@@ -35,7 +35,7 @@ import * as ReactDOM from 'react-dom';
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
 

package/test/renderers/MaterialBooleanToggleCell.test.tsx

@@ -36,9 +36,10 @@ import * as ReactDOM from 'react-dom';
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
+import { Switch } from '@mui/material';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -236,7 +237,7 @@ describe('Material boolean toggle cell', () => {
     );
 
     // Make sure a toggle is rendered by checking for the thumb element
-    expect(wrapper.find('.MuiSwitch-thumb')).toHaveLength(1);
+    expect(wrapper.find(Switch)).toHaveLength(1);
 
     const input = wrapper.find('input').first();
     expect(input.props().type).toBe('checkbox');

package/test/renderers/MaterialBooleanToggleControl.test.tsx

@@ -36,9 +36,10 @@ import * as ReactDOM from 'react-dom';
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
+import { Switch } from '@mui/material';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -241,7 +242,7 @@ describe('Material boolean toggle control', () => {
     );
 
     // Make sure a toggle is rendered by checking for the thumb element
-    expect(wrapper.find('.MuiSwitch-thumb')).toHaveLength(1);
+    expect(wrapper.find(Switch)).toHaveLength(1);
 
     const input = wrapper.find('input').first();    
     expect(input.props().type).toBe('checkbox');

package/test/renderers/MaterialCategorizationLayout.test.tsx

@@ -39,8 +39,8 @@ import MaterialCategorizationLayoutRenderer, {
   materialCategorizationTester
 } from '../../src/layouts/MaterialCategorizationLayout';
 import { MaterialLayoutRenderer, materialRenderers } from '../../src';
-import { Tab, Tabs } from '@material-ui/core';
-import Adapter from 'enzyme-adapter-react-16';
+import { Tab, Tabs } from '@mui/material';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { initCore } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -270,7 +270,7 @@ describe('Material categorization layout', () => {
 
     const beforeClick = wrapper.find(Tabs).props().value;
     wrapper
-      .find(Tab)
+      .find('button[role="tab"]')
       .at(1)
       .simulate('click');
     const afterClick = wrapper.find(Tabs).props().value;
@@ -372,4 +372,77 @@ describe('Material categorization layout', () => {
     const materialArrayLayout = wrapper.find(MaterialLayoutRenderer);
     expect(materialArrayLayout.props().renderers).toHaveLength(0);
   });
+
+  it('display correct content when hiding a tab', () => {
+    const data = { name : 'fo' };
+    const condition: SchemaBasedCondition = {
+      scope: '#/properties/name',
+      schema: { maxLength: 3 }
+    };
+    const nameControl: ControlElement = {
+      type: 'Control',
+      scope: '#/properties/name'
+    };
+    const uischema: Categorization = {
+      type: 'Categorization',
+      label: '',
+      options: {
+          showNavButtons: true
+      },
+      elements: [
+        {
+          type: 'Category',
+          label: 'A',
+          elements: undefined
+        },
+        {
+          type: 'Category',
+          label: 'B',
+          elements: undefined,
+          rule: {
+            effect: RuleEffect.SHOW,
+            condition: condition
+          }
+        },
+        {
+          type: 'Category',
+          label: 'C',
+          elements: [nameControl],
+          rule: {
+            effect: RuleEffect.HIDE,
+            condition: condition
+          }
+        }
+      ]
+    };
+
+    const core = initCore(fixture.schema, uischema, data);
+
+    const wrapper = mount(
+      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+        <MaterialCategorizationLayoutRenderer
+            {...layoutDefaultProps}
+            schema={fixture.schema}
+            uischema={uischema}
+        />
+      </JsonFormsStateProvider>
+    );
+    
+    wrapper
+      .find('button[role="tab"]')
+      .at(1)
+      .simulate('click');
+
+    let isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
+    expect(isCategoryCshown).toBe(false);
+
+    core.data = { ...core.data, name: 'Barr' };
+    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.update();
+
+    isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
+    expect(isCategoryCshown).toBe(true);
+    
+    wrapper.unmount();
+  });
 });

package/test/renderers/MaterialCategorizationStepperLayout.test.tsx

@@ -39,8 +39,8 @@ import MaterialCategorizationStepperLayoutRenderer, {
   materialCategorizationStepperTester
 } from '../../src/layouts/MaterialCategorizationStepperLayout';
 import { MaterialLayoutRenderer, materialRenderers } from '../../src';
-import { Button, Step, StepButton, Stepper } from '@material-ui/core';
-import Adapter from 'enzyme-adapter-react-16';
+import { Button, Step, Stepper } from '@mui/material';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { initCore } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -281,7 +281,7 @@ describe('Material categorization stepper layout', () => {
     );
     const beforeClick = wrapper.find(Stepper).props().activeStep;
     wrapper
-      .find(StepButton)
+      .find('button')
       .at(1)
       .simulate('click');
     const afterClick = wrapper.find(Stepper).props().activeStep;
@@ -422,7 +422,7 @@ describe('Material categorization stepper layout', () => {
     const isPrevButtonEnabledBeforeClick = !wrapper.find(Button).at(1).props().disabled;
     const isNextButtonEnabledBeforeClick = !wrapper.find(Button).at(0).props().disabled;
     wrapper
-      .find(StepButton)
+      .find('button')
       .at(1)
       .simulate('click');
     const isPrevButtonEnabledAfterClick = !wrapper.find(Button).at(1).props().disabled;
@@ -489,8 +489,8 @@ describe('Material categorization stepper layout', () => {
     );
     const activeStepBeforeClick = wrapper.find(Stepper).props().activeStep;
     wrapper
-      .find(Button)
-      .at(0)
+      .find('button')
+      .at(4)
       .simulate('click');
     const activeStepAfterClick = wrapper.find(Stepper).props().activeStep;
 
@@ -561,4 +561,77 @@ describe('Material categorization stepper layout', () => {
 
     wrapper.unmount();
   });
+
+  it('display correct content when hiding a step', () => {
+    const data = { name : 'fo' };
+    const condition: SchemaBasedCondition = {
+      scope: '#/properties/name',
+      schema: { maxLength: 3 }
+    };
+    const nameControl: ControlElement = {
+      type: 'Control',
+      scope: '#/properties/name'
+    };
+    const uischema: Categorization = {
+      type: 'Categorization',
+      label: '',
+      options: {
+          showNavButtons: true
+      },
+      elements: [
+        {
+          type: 'Category',
+          label: 'A',
+          elements: undefined
+        },
+        {
+          type: 'Category',
+          label: 'B',
+          elements: undefined,
+          rule: {
+            effect: RuleEffect.SHOW,
+            condition: condition
+          }
+        },
+        {
+          type: 'Category',
+          label: 'C',
+          elements: [nameControl],
+          rule: {
+            effect: RuleEffect.HIDE,
+            condition: condition
+          }
+        }
+      ]
+    };
+
+    const core = initCore(fixture.schema, uischema, data);
+
+    const wrapper = mount(
+      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+        <MaterialCategorizationStepperLayoutRenderer
+            {...layoutDefaultProps}
+            schema={fixture.schema}
+            uischema={uischema}
+        />
+      </JsonFormsStateProvider>
+    );
+    
+    wrapper
+      .find('button')
+      .at(1)
+      .simulate('click');
+
+    let isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
+    expect(isCategoryCshown).toBe(false);
+
+    core.data = { ...core.data, name: 'Barr' };
+    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.update();
+
+    isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
+    expect(isCategoryCshown).toBe(true);
+    
+    wrapper.unmount();
+  });
 });

package/test/renderers/MaterialDateCell.test.tsx

@@ -35,7 +35,7 @@ import MaterialDateCell, {
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { initCore, TestEmitter } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });

package/test/renderers/MaterialDateControl.test.tsx

@@ -34,7 +34,7 @@ import * as React from 'react';
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
 
@@ -101,6 +101,19 @@ describe('Material date control tester', () => {
         }
       })
     ).toBe(4);
+    expect(
+      materialDateControlTester(
+        { ...uischema, options: { format: 'date' } },
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string'
+            }
+          }
+        }
+      )
+    ).toBe(4);
   });
 });
 
@@ -189,7 +202,8 @@ describe('Material date control', () => {
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
-    input.simulate('change', { target: { value: '1961-04-12' } });
+    (input.getDOMNode() as HTMLInputElement).value = '1961-04-12';
+    input.simulate('change', input);
     expect(onChangeData.data.foo).toBe('1961-04-12');
   });
 
@@ -333,4 +347,34 @@ describe('Material date control', () => {
     const inputs = wrapper.find('input');
     expect(inputs.length).toBe(0);
   });
+
+  it('should support format customizations', () => {
+    const core = initCore(schema, uischema, {foo: '06---1980'});
+    const onChangeData: any = {
+      data: undefined
+    };
+    wrapper = mount(
+      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+        <TestEmitter
+          onChange={({ data }) => {
+            onChangeData.data = data;
+          }}
+        />
+        <MaterialDateControl
+          schema={schema}
+          uischema={{...uischema, options: {
+            dateFormat: 'YYYY/MM',
+            dateSaveFormat: 'MM---YYYY'
+          }}}
+        />
+      </JsonFormsStateProvider>
+    );
+
+    const input = wrapper.find('input').first();
+    expect(input.props().value).toBe('1980/06');
+
+    (input.getDOMNode() as HTMLInputElement).value = '1961/04';
+    input.simulate('change', input);
+    expect(onChangeData.data.foo).toBe('04---1961');
+  });
 });

package/test/renderers/MaterialDateTimeControl.test.tsx

@@ -31,17 +31,17 @@ import {
 import MaterialDateTimeControl, {
   materialDateTimeControlTester
 } from '../../src/controls/MaterialDateTimeControl';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });
 
-const data = { foo: moment('1980-04-04 13:37').format() };
+const data = { foo: dayjs('1980-04-04 13:37').format() };
 const schema = {
   type: 'object',
   properties: {
@@ -102,6 +102,19 @@ describe('Material date time control tester', () => {
         }
       })
     ).toBe(2);
+    expect(
+      materialDateTimeControlTester(
+        { ...uischema, options: { format: 'date-time' } },
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string'
+            }
+          }
+        }
+      )
+    ).toBe(2);
   });
 });
 
@@ -173,7 +186,7 @@ describe('Material date time control', () => {
 
     const input = wrapper.find('input').first();
     expect(input.props().type).toBe('text');
-    expect(input.props().value).toBe('04/04/1980 1:37 pm');
+    expect(input.props().value).toBe('1980-04-04 13:37');
   });
 
   it('should update via event', () => {
@@ -192,9 +205,10 @@ describe('Material date time control', () => {
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
-    input.simulate('change', { target: { value: '04/12/1961 8:15 pm' } });
+    (input.getDOMNode() as HTMLInputElement).value ='1961-12-94 20:15'; 
+    input.simulate('change', input);
     expect(onChangeData.data.foo).toBe(
-      moment('1961-04-12 20:15').format()
+      dayjs('1961-12-94 20:15').format()
     );
   });
 
@@ -205,11 +219,11 @@ describe('Material date time control', () => {
         <MaterialDateTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
-    core.data = { ...core.data, foo: moment('1961-04-12 20:15').format() };
+    core.data = { ...core.data, foo: dayjs('1961-12-04 20:15').format() };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
     const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('04/12/1961 8:15 pm');
+    expect(input.props().value).toBe('1961-12-04 20:15');
   });
 
   it('should update with null value', () => {
@@ -251,7 +265,7 @@ describe('Material date time control', () => {
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
     const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('04/04/1980 1:37 pm');
+    expect(input.props().value).toBe('1980-04-04 13:37');
   });
 
   it('should not update with null ref', () => {
@@ -265,7 +279,7 @@ describe('Material date time control', () => {
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
     const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('04/04/1980 1:37 pm');
+    expect(input.props().value).toBe('1980-04-04 13:37');
   });
 
   it('should not update with undefined ref', () => {
@@ -279,7 +293,7 @@ describe('Material date time control', () => {
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
     const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('04/04/1980 1:37 pm');
+    expect(input.props().value).toBe('1980-04-04 13:37');
   });
 
   it('can be disabled', () => {
@@ -320,7 +334,7 @@ describe('Material date time control', () => {
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
-    // there is only input id at the moment
+    // there is only input id at the dayjs
     expect(input.props().id).toBe('#/properties/foo-input');
   });
 
@@ -338,4 +352,35 @@ describe('Material date time control', () => {
     const inputs = wrapper.find('input');
     expect(inputs.length).toBe(0);
   });
+
+  it('should support format customizations', () => {
+    const core = initCore(schema, uischema, {foo: dayjs('1980-04-23 13:37').format('YYYY/MM/DD h:mm a')});
+    const onChangeData: any = {
+      data: undefined
+    };
+    wrapper = mount(
+      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+        <TestEmitter
+          onChange={({ data }) => {
+            onChangeData.data = data;
+          }}
+        />
+        <MaterialDateTimeControl
+          schema={schema}
+          uischema={{...uischema, options: {
+            dateTimeFormat: 'DD-MM-YY hh:mm:a',
+            dateTimeSaveFormat: 'YYYY/MM/DD h:mm a',
+            ampm: true
+          }}}
+        />
+      </JsonFormsStateProvider>
+    );
+
+    const input = wrapper.find('input').first();
+    expect(input.props().value).toBe('23-04-80 01:37:pm');
+
+    (input.getDOMNode() as HTMLInputElement).value = '10-12-05 11:22:am'; 
+    input.simulate('change', input);
+    expect(onChangeData.data.foo).toBe('2005/12/10 11:22 am');
+  });
 });

package/test/renderers/MaterialEnumArrayRenderer.test.tsx

@@ -2,7 +2,7 @@ import './MatchMediaMock';
 import { ControlElement, NOT_APPLICABLE } from '@jsonforms/core';
 import { JsonForms } from '@jsonforms/react';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import React from 'react';
 import {
   materialEnumArrayRendererTester,