Remove React Material extended renderer set

As '@mui/lab' is now a core dependency we no longer need to
maintain two different renderer sets. The autocomplete
renderers are now part of the normal renderer set.

Author: sdirix

MIGRATION.md

@@ -2,6 +2,15 @@
 
 ## Migrating to JSON Forms 3.0 for React users
 
+### Removal of React Material extended renderer set
+
+Previously we maintained a separate 'extended' renderer set to not force all consumers of JSON Forms to consume the Material UI lab dependency.
+With the update to Material UI v5 the lab dependency became more important as it also contains all date and time pickers.
+Therefore we now require the lab dependency and removed the no longer needed extended renderer set.
+
+If you consumed the extended renderer set then just revert to the normal renderer set.
+There should not be any behavior changes.
+
 ### Removal of Class Components in React Material
 
 With Version 3.0 of JSON Forms we removed all React Material class components.

packages/material/example/index.ts

@@ -23,10 +23,9 @@
   THE SOFTWARE.
 */
 import { renderExample } from '../../example/src/index';
-import { materialCells } from '../src';
-import { extendedMaterialRenderers } from '../src/extended';
+import { materialRenderers, materialCells } from '../src';
 
 renderExample(
-  extendedMaterialRenderers,
+  materialRenderers,
   materialCells
 );

packages/material/src/controls/MaterialEnumControl.tsx

@@ -32,11 +32,20 @@ import {
 } from '@jsonforms/core';
 import { withJsonFormsEnumProps } from '@jsonforms/react';
 import { MuiSelect } from '../mui-controls/MuiSelect';
+import merge from 'lodash/merge';
 import { MaterialInputControl } from './MaterialInputControl';
+import { MuiAutocomplete, WithOptionLabel } from '../mui-controls/MuiAutocomplete';
 
-export const MaterialEnumControl = (props: ControlProps & OwnPropsOfEnum) => (
-  <MaterialInputControl {...props} input={MuiSelect} />
-);
+export const MaterialEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel) => {
+  const {config, uischema} = props;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  return (
+    <MaterialInputControl
+      {...props}
+      input={appliedUiSchemaOptions.autocomplete === false ? MuiSelect : MuiAutocomplete}
+    />
+  );
+};
 
 export const materialEnumControlTester: RankedTester = rankWith(
   2,

packages/material/src/controls/MaterialOneOfEnumControl.tsx

@@ -31,12 +31,21 @@ import {
   rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsOneOfEnumProps } from '@jsonforms/react';
+import { MuiAutocomplete, WithOptionLabel } from '../mui-controls/MuiAutocomplete';
 import { MuiSelect } from '../mui-controls/MuiSelect';
-import { MaterialInputControl } from './MaterialInputControl';
+import { MaterialInputControl } from '../controls/MaterialInputControl';
+import merge from 'lodash/merge';
 
-export const MaterialOneOfEnumControl = (props: ControlProps & OwnPropsOfEnum) => (
-  <MaterialInputControl {...props} input={MuiSelect} />
-);
+export const MaterialOneOfEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel) => {
+  const {config, uischema} = props;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  return (
+    <MaterialInputControl
+      {...props}
+      input={appliedUiSchemaOptions.autocomplete === false ? MuiSelect : MuiAutocomplete}
+    />
+  );
+};
 
 export const materialOneOfEnumControlTester: RankedTester = rankWith(
   5,

packages/material/src/extended/MaterialAutocompleteEnumControl.tsx

@@ -8,7 +8,6 @@
     "node_modules"
   ],
   "files": [
-    "./src/index.ts",
-    "./src/extended/index.ts"
+    "./src/index.ts"
   ]
 }