@jsonforms/material-renderers 3.0.0-alpha.3 → 3.0.0-beta.2

package/src/complex/CombinatorProperties.tsx

@@ -23,9 +23,9 @@
   THE SOFTWARE.
 */
 import React from 'react';
-import _ from 'lodash';
 import { Generate, JsonSchema, Layout, UISchemaElement } from '@jsonforms/core';
 import { JsonFormsDispatch } from '@jsonforms/react';
+import omit from 'lodash/omit';
 
 interface CombinatorPropertiesProps {
   schema: JsonSchema;
@@ -42,7 +42,7 @@ export class CombinatorProperties extends React.Component<CombinatorPropertiesPr
 
     const { schema, combinatorKeyword, path } = this.props;
 
-    const otherProps: JsonSchema = _.omit(schema, combinatorKeyword) as JsonSchema;
+    const otherProps: JsonSchema = omit(schema, combinatorKeyword) as JsonSchema;
     const foundUISchema: UISchemaElement = Generate.uiSchema(otherProps, 'VerticalLayout');
     let isLayoutWithElements = false;
     if (foundUISchema !== null && isLayout(foundUISchema)) {

package/src/complex/MaterialAllOfRenderer.tsx

@@ -32,7 +32,6 @@ import {
   JsonSchema,
   RankedTester,
   rankWith,
-  resolveSubSchemas,
   StatePropsOfCombinator
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAllOfProps } from '@jsonforms/react';
@@ -47,9 +46,8 @@ export const MaterialAllOfRenderer = ({
   uischemas,
   uischema
 }: StatePropsOfCombinator) => {
-  const _schema = resolveSubSchemas(schema, rootSchema, 'allOf');
   const delegateUISchema = findMatchingUISchema(uischemas)(
-    _schema,
+    schema,
     uischema.scope,
     path
   );
@@ -57,7 +55,7 @@ export const MaterialAllOfRenderer = ({
     return (
       <Hidden xsUp={!visible}>
         <JsonFormsDispatch
-          schema={_schema}
+          schema={schema}
           uischema={delegateUISchema}
           path={path}
           renderers={renderers}
@@ -67,7 +65,7 @@ export const MaterialAllOfRenderer = ({
     );
   }
   const allOfRenderInfos = createCombinatorRenderInfos(
-    (_schema as JsonSchema).allOf,
+    (schema as JsonSchema).allOf,
     rootSchema,
     'allOf',
     uischema,

package/src/complex/MaterialAnyOfRenderer.tsx

@@ -30,7 +30,6 @@ import {
   JsonSchema,
   RankedTester,
   rankWith,
-  resolveSubSchemas,
   StatePropsOfCombinator
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAnyOfProps } from '@jsonforms/react';
@@ -54,9 +53,8 @@ export const MaterialAnyOfRenderer = ({
     [setSelectedAnyOf]
   );
   const anyOf = 'anyOf';
-  const _schema = resolveSubSchemas(schema, rootSchema, anyOf);
   const anyOfRenderInfos = createCombinatorRenderInfos(
-    (_schema as JsonSchema).anyOf,
+    (schema as JsonSchema).anyOf,
     rootSchema,
     anyOf,
     uischema,
@@ -67,8 +65,8 @@ export const MaterialAnyOfRenderer = ({
   return (
     <Hidden xsUp={!visible}>
       <CombinatorProperties
-        schema={_schema}
-        combinatorKeyword={'anyOf'}
+        schema={schema}
+        combinatorKeyword={anyOf}
         path={path}
       />
       <Tabs value={selectedAnyOf} onChange={handleChange}>

package/src/complex/MaterialEnumArrayRenderer.tsx

@@ -22,8 +22,7 @@ import {
   FormHelperText,
   Hidden
 } from '@mui/material';
-import { startCase } from 'lodash';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import React from 'react';
 
 export const MaterialEnumArrayRenderer = ({
@@ -68,7 +67,7 @@ export const MaterialEnumArrayRenderer = ({
                     {...otherProps}
                   />
                 }
-                label={startCase(option.label)}
+                label={option.label}
               />
             );
           })}

package/src/complex/MaterialObjectRenderer.tsx

@@ -25,7 +25,7 @@
 import isEmpty from 'lodash/isEmpty';
 import {
   findUISchema,
-  GroupLayout,
+  Generate,
   isObjectControl,
   RankedTester,
   rankWith,
@@ -54,17 +54,12 @@ export const MaterialObjectRenderer = ({
         schema,
         uischema.scope,
         path,
-        'Group',
+        () => isEmpty(path) ? Generate.uiSchema(schema, 'VerticalLayout') : {...Generate.uiSchema(schema, 'Group'), label},
         uischema,
         rootSchema
       ),
-    [uischemas, schema, uischema.scope, path, uischema, rootSchema]
+    [uischemas, schema, uischema.scope, path, label, uischema, rootSchema]
   );
-  if (isEmpty(path)) {
-    detailUiSchema.type = 'VerticalLayout';
-  } else {
-    (detailUiSchema as GroupLayout).label = label;
-  }
   return (
     <Hidden xsUp={!visible}>
       <JsonFormsDispatch

package/src/complex/MaterialOneOfRenderer.tsx

@@ -34,7 +34,6 @@ import {
   OwnPropsOfControl,
   RankedTester,
   rankWith,
-  resolveSubSchemas
 } from '@jsonforms/core';
 import {
   Button,
@@ -66,9 +65,8 @@ export const MaterialOneOfRenderer =
     const cancel = useCallback(() => {
       setOpen(false);
     }, [setOpen]);
-    const _schema = resolveSubSchemas(schema, rootSchema, 'oneOf');
     const oneOfRenderInfos = createCombinatorRenderInfos(
-      (_schema as JsonSchema).oneOf,
+      (schema as JsonSchema).oneOf,
       rootSchema,
       'oneOf',
       uischema,
@@ -79,7 +77,7 @@ export const MaterialOneOfRenderer =
     const openNewTab = (newIndex: number) => {
       handleChange(
         path,
-        createDefaultValue(schema.oneOf[newIndex])
+        createDefaultValue(oneOfRenderInfos[newIndex].schema)
       );
       setSelectedIndex(newIndex);
     }
@@ -101,7 +99,7 @@ export const MaterialOneOfRenderer =
     return (
       <Hidden xsUp={!visible}>
         <CombinatorProperties
-          schema={_schema}
+          schema={schema}
           combinatorKeyword={'oneOf'}
           path={path}
         />

package/src/complex/MaterialTableControl.tsx

@@ -53,7 +53,8 @@ import {
   Paths,
   Resolve,
   JsonFormsRendererRegistryEntry,
-  JsonFormsCellRendererRegistryEntry
+  JsonFormsCellRendererRegistryEntry,
+  encode
 } from '@jsonforms/core';
 import DeleteIcon from '@mui/icons-material/Delete';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
@@ -206,18 +207,17 @@ interface NonEmptyCellComponentProps {
   cells?: JsonFormsCellRendererRegistryEntry[],
   isValid: boolean
 }
-const NonEmptyCellComponent = React.memo(({path, propName, schema,rootSchema, errors, enabled, renderers, cells, isValid}:NonEmptyCellComponentProps) => {
-
+const NonEmptyCellComponent = React.memo(({path, propName, schema, rootSchema, errors, enabled, renderers, cells, isValid}:NonEmptyCellComponentProps) => {
   return (
     <NoBorderTableCell>
       {schema.properties ? (
         <DispatchCell
           schema={Resolve.schema(
             schema,
-            `#/properties/${propName}`,
+            `#/properties/${encode(propName)}`,
             rootSchema
           )}
-          uischema={controlWithoutLabel(`#/properties/${propName}`)}
+          uischema={controlWithoutLabel(`#/properties/${encode(propName)}`)}
           path={path}
           enabled={enabled}
           renderers={renderers}

package/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,

package/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,

package/src/util/debounce.ts

@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import { useState, useCallback, useEffect } from 'react'
 
 

package/src/util/layout.tsx

@@ -26,13 +26,13 @@ import isEmpty from 'lodash/isEmpty';
 import React from 'react';
 import { ComponentType } from 'react';
 import Ajv from 'ajv';
+import type { UISchemaElement } from '@jsonforms/core';
 import {
   getAjv,
   JsonFormsCellRendererRegistryEntry,
   JsonFormsRendererRegistryEntry,
   JsonSchema,
   OwnPropsOfRenderer,
-  UISchemaElement
 } from '@jsonforms/core';
 import { JsonFormsDispatch, useJsonForms } from '@jsonforms/react';
 import { Grid, Hidden } from '@mui/material';