@jsonforms/material-renderers 3.0.0-beta.1 → 3.0.0-beta.4

package/lib/layouts/MaterialArrayLayoutRenderer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ArrayLayoutProps, RankedTester } from '@jsonforms/core';
-export declare const MaterialArrayLayoutRenderer: ({ visible, enabled, id, uischema, schema, label, rootSchema, renderers, cells, data, path, errors, uischemas, addItem }: ArrayLayoutProps) => JSX.Element;
+export declare const MaterialArrayLayoutRenderer: ({ visible, addItem, ...props }: ArrayLayoutProps) => JSX.Element;
 export declare const materialArrayLayoutTester: RankedTester;
 declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/material-renderers",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.4",
   "description": "Material Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -74,8 +74,10 @@
     "dayjs": "1.10.6"
   },
   "peerDependencies": {
-    "@jsonforms/core": "^3.0.0-beta.0",
-    "@jsonforms/react": "^3.0.0-beta.0",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@jsonforms/core": "3.0.0-beta.4",
+    "@jsonforms/react": "3.0.0-beta.4",
     "@mui/icons-material": "^5.0.0",
     "@mui/lab": "^5.0.0-alpha.54",
     "@mui/material": "^5.0.0"
@@ -83,8 +85,8 @@
   "devDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "^3.0.0-beta.1",
-    "@jsonforms/react": "^3.0.0-beta.1",
+    "@jsonforms/core": "^3.0.0-beta.4",
+    "@jsonforms/react": "^3.0.0-beta.4",
     "@mui/icons-material": "^5.2.0",
     "@mui/lab": "^5.0.0-alpha.58",
     "@mui/material": "^5.2.2",
@@ -112,5 +114,5 @@
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.9.0"
   },
-  "gitHead": "8c3b6263f360ca192c0a20a343a19c5ffb3a10f7"
+  "gitHead": "413b9767ea8e2c0b6adb3919f5e6b76263d4be31"
 }

package/src/additional/MaterialListWithDetailRenderer.tsx

@@ -60,7 +60,8 @@ export const MaterialListWithDetailRenderer = ({
   data,
   renderers,
   cells,
-  config
+  config,
+  rootSchema
 }: ArrayLayoutProps) => {
   const [selectedIndex, setSelectedIndex] = useState(undefined);
   const handleRemoveItem = useCallback(
@@ -90,9 +91,10 @@ export const MaterialListWithDetailRenderer = ({
         uischema.scope,
         path,
         undefined,
-        uischema
+        uischema,
+        rootSchema
       ),
-    [uischemas, schema, uischema.scope, path, uischema]
+    [uischemas, schema, uischema.scope, path, uischema, rootSchema]
   );
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
 

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,7 +22,6 @@ import {
   FormHelperText,
   Hidden
 } from '@mui/material';
-import startCase from 'lodash/startCase';
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
 
@@ -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}
@@ -370,7 +370,7 @@ const TableRows = ({
             moveDownCreator={moveDown}
             enableUp={index !== 0}
             enableDown={index !== data - 1}
-            showSortButtons={appliedUiSchemaOptions.showSortButtons}
+            showSortButtons={appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons}
             enabled={enabled}
             cells={cells}
             path={path}

package/src/layouts/ExpandPanelRenderer.tsx

@@ -119,6 +119,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
   );
 
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const showSortButtons = appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayLayoutSortButtons;
 
   return (
     <Accordion
@@ -147,7 +148,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                   justifyContent='center'
                   alignItems='center'
                 >
-                  {appliedUiSchemaOptions.showSortButtons ? (
+                  {showSortButtons ? (
                     <Fragment>
                       <Grid item>
                         <IconButton

package/src/layouts/MaterialArrayLayoutRenderer.tsx

@@ -36,19 +36,8 @@ import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
 
 export const MaterialArrayLayoutRenderer = ({
   visible,
-  enabled,
-  id,
-  uischema,
-  schema,
-  label,
-  rootSchema,
-  renderers,
-  cells,
-  data,
-  path,
-  errors,
-  uischemas,
-  addItem
+  addItem,
+  ...props
 }: ArrayLayoutProps) => {
   const addItemCb = useCallback((p: string, value: any) => addItem(p, value), [
     addItem
@@ -56,20 +45,9 @@ export const MaterialArrayLayoutRenderer = ({
   return (
     <Hidden xsUp={!visible}>
       <MaterialArrayLayout
-        label={label}
-        uischema={uischema}
-        schema={schema}
-        id={id}
-        rootSchema={rootSchema}
-        errors={errors}
-        enabled={enabled}
         visible={visible}
-        data={data}
-        path={path}
         addItem={addItemCb}
-        renderers={renderers}
-        cells={cells}
-        uischemas={uischemas}
+        {...props}
       />
     </Hidden>
   );