@jsonforms/material-renderers 2.5.2 → 3.0.0-alpha.3

package/src/complex/MaterialAllOfRenderer.tsx

@@ -23,7 +23,7 @@
   THE SOFTWARE.
 */
 import React from 'react';
-import { Hidden } from '@material-ui/core';
+import { Hidden } from '@mui/material';
 
 import {
   createCombinatorRenderInfos,
@@ -35,9 +35,9 @@ import {
   resolveSubSchemas,
   StatePropsOfCombinator
 } from '@jsonforms/core';
-import { ResolvedJsonFormsDispatch, withJsonFormsAllOfProps } from '@jsonforms/react';
+import { JsonFormsDispatch, withJsonFormsAllOfProps } from '@jsonforms/react';
 
-const MaterialAllOfRenderer = ({
+export const MaterialAllOfRenderer = ({
   schema,
   rootSchema,
   visible,
@@ -56,7 +56,7 @@ const MaterialAllOfRenderer = ({
   if (delegateUISchema) {
     return (
       <Hidden xsUp={!visible}>
-        <ResolvedJsonFormsDispatch
+        <JsonFormsDispatch
           schema={_schema}
           uischema={delegateUISchema}
           path={path}
@@ -78,7 +78,7 @@ const MaterialAllOfRenderer = ({
   return (
     <Hidden xsUp={!visible}>
       {allOfRenderInfos.map((allOfRenderInfo, allOfIndex) => (
-        <ResolvedJsonFormsDispatch
+        <JsonFormsDispatch
           key={allOfIndex}
           schema={allOfRenderInfo.schema}
           uischema={allOfRenderInfo.uischema}
@@ -95,4 +95,5 @@ export const materialAllOfControlTester: RankedTester = rankWith(
   3,
   isAllOfControl
 );
+
 export default withJsonFormsAllOfProps(MaterialAllOfRenderer);

package/src/complex/MaterialAnyOfRenderer.tsx

@@ -33,11 +33,11 @@ import {
   resolveSubSchemas,
   StatePropsOfCombinator
 } from '@jsonforms/core';
-import { ResolvedJsonFormsDispatch, withJsonFormsAnyOfProps } from '@jsonforms/react';
-import { Hidden, Tab, Tabs } from '@material-ui/core';
+import { JsonFormsDispatch, withJsonFormsAnyOfProps } from '@jsonforms/react';
+import { Hidden, Tab, Tabs } from '@mui/material';
 import CombinatorProperties from './CombinatorProperties';
 
-const MaterialAnyOfRenderer = ({
+export const MaterialAnyOfRenderer = ({
   schema,
   rootSchema,
   indexOfFittingSchema,
@@ -79,7 +79,7 @@ const MaterialAnyOfRenderer = ({
       {anyOfRenderInfos.map(
         (anyOfRenderInfo, anyOfIndex) =>
           selectedAnyOf === anyOfIndex && (
-            <ResolvedJsonFormsDispatch
+            <JsonFormsDispatch
               key={anyOfIndex}
               schema={anyOfRenderInfo.schema}
               uischema={anyOfRenderInfo.uischema}
@@ -97,4 +97,5 @@ export const materialAnyOfControlTester: RankedTester = rankWith(
   3,
   isAnyOfControl
 );
+
 export default withJsonFormsAnyOfProps(MaterialAnyOfRenderer);

package/src/complex/MaterialArrayControlRenderer.tsx

@@ -26,7 +26,7 @@ import React, { useCallback, useState } from 'react';
 import { ArrayLayoutProps } from '@jsonforms/core';
 import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
 import { MaterialTableControl } from './MaterialTableControl';
-import { Hidden } from '@material-ui/core';
+import { Hidden } from '@mui/material';
 import { DeleteDialog } from './DeleteDialog';
 
 export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {

package/src/complex/MaterialEnumArrayRenderer.tsx

@@ -21,7 +21,7 @@ import {
   FormGroup,
   FormHelperText,
   Hidden
-} from '@material-ui/core';
+} from '@mui/material';
 import { startCase } from 'lodash';
 import { isEmpty } from 'lodash';
 import React from 'react';
@@ -35,6 +35,7 @@ export const MaterialEnumArrayRenderer = ({
   data,
   addItem,
   removeItem,
+  handleChange,
   ...otherProps
 }: ControlProps & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl) => {
   return (

package/src/complex/MaterialObjectRenderer.tsx

@@ -27,16 +27,15 @@ import {
   findUISchema,
   GroupLayout,
   isObjectControl,
-  isPlainLabel,
   RankedTester,
   rankWith,
   StatePropsOfControlWithDetail
 } from '@jsonforms/core';
-import { ResolvedJsonFormsDispatch, withJsonFormsDetailProps } from '@jsonforms/react';
-import { Hidden } from '@material-ui/core';
+import { JsonFormsDispatch, withJsonFormsDetailProps } from '@jsonforms/react';
+import { Hidden } from '@mui/material';
 import React, { useMemo } from 'react';
 
-const MaterialObjectRenderer = ({
+export const MaterialObjectRenderer = ({
   renderers,
   cells,
   uischemas,
@@ -64,11 +63,11 @@ const MaterialObjectRenderer = ({
   if (isEmpty(path)) {
     detailUiSchema.type = 'VerticalLayout';
   } else {
-    (detailUiSchema as GroupLayout).label = isPlainLabel(label) ? label : label.default;
+    (detailUiSchema as GroupLayout).label = label;
   }
   return (
     <Hidden xsUp={!visible}>
-      <ResolvedJsonFormsDispatch
+      <JsonFormsDispatch
         visible={visible}
         enabled={enabled}
         schema={schema}
@@ -85,4 +84,5 @@ export const materialObjectControlTester: RankedTester = rankWith(
   2,
   isObjectControl
 );
+
 export default withJsonFormsDetailProps(MaterialObjectRenderer);

package/src/complex/MaterialOneOfRenderer.tsx

@@ -26,7 +26,7 @@ import React, { useCallback, useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 
 import {
-  CombinatorProps,
+  CombinatorRendererProps,
   createCombinatorRenderInfos,
   createDefaultValue,
   isOneOfControl,
@@ -46,9 +46,9 @@ import {
   Hidden,
   Tab,
   Tabs
-} from '@material-ui/core';
+} from '@mui/material';
 import {
-  ResolvedJsonFormsDispatch,
+  JsonFormsDispatch,
   withJsonFormsOneOfProps
 } from '@jsonforms/react';
 import CombinatorProperties from './CombinatorProperties';
@@ -57,9 +57,8 @@ export interface OwnOneOfProps extends OwnPropsOfControl {
   indexOfFittingSchema?: number;
 }
 
-const oneOf = 'oneOf';
-const MaterialOneOfRenderer =
-  ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data }: CombinatorProps) => {
+export const MaterialOneOfRenderer =
+  ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data }: CombinatorRendererProps) => {
     const [open, setOpen] = useState(false);
     const [selectedIndex, setSelectedIndex] = useState(indexOfFittingSchema || 0);
     const [newSelectedIndex, setNewSelectedIndex] = useState(0);
@@ -67,11 +66,11 @@ const MaterialOneOfRenderer =
     const cancel = useCallback(() => {
       setOpen(false);
     }, [setOpen]);
-    const _schema = resolveSubSchemas(schema, rootSchema, oneOf);
+    const _schema = resolveSubSchemas(schema, rootSchema, 'oneOf');
     const oneOfRenderInfos = createCombinatorRenderInfos(
       (_schema as JsonSchema).oneOf,
       rootSchema,
-      oneOf,
+      'oneOf',
       uischema,
       path,
       uischemas
@@ -112,7 +111,7 @@ const MaterialOneOfRenderer =
         {
           oneOfRenderInfos.map((oneOfRenderInfo, oneOfIndex) => (
             selectedIndex === oneOfIndex && (
-              <ResolvedJsonFormsDispatch
+              <JsonFormsDispatch
                 key={oneOfIndex}
                 schema={oneOfRenderInfo.schema}
                 uischema={oneOfRenderInfo.uischema}
@@ -150,4 +149,5 @@ const MaterialOneOfRenderer =
   };
 
 export const materialOneOfControlTester: RankedTester = rankWith(3, isOneOfControl);
+
 export default withJsonFormsOneOfProps(MaterialOneOfRenderer);

package/src/complex/MaterialTableControl.tsx

@@ -31,18 +31,19 @@ import {
 } from '@jsonforms/react';
 import startCase from 'lodash/startCase';
 import range from 'lodash/range';
-import React, { Fragment } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import {
   FormHelperText,
   Grid,
   Hidden,
+  IconButton,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableRow,
   Typography
-} from '@material-ui/core';
+} from '@mui/material';
 import {
   ArrayLayoutProps,
   ControlElement,
@@ -54,10 +55,9 @@ import {
   JsonFormsRendererRegistryEntry,
   JsonFormsCellRendererRegistryEntry
 } from '@jsonforms/core';
-import IconButton from '@material-ui/core/IconButton';
-import DeleteIcon from '@material-ui/icons/Delete';
-import ArrowDownward from '@material-ui/icons/ArrowDownward';
-import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ArrowDownward from '@mui/icons-material/ArrowDownward';
+import ArrowUpward from '@mui/icons-material/ArrowUpward';
 
 import { WithDeleteDialogSupport } from './DeleteDialog';
 import NoBorderTableCell from './NoBorderTableCell';
@@ -195,20 +195,19 @@ const controlWithoutLabel = (scope: string): ControlElement => ({
   label: false
 });
 
-const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
-  const ctx = useJsonForms();
-  const {
-    path,
-    propName,
-    schema,
-    rootSchema,
-    errors,
-    enabled,
-    renderers,
-    cells
-  } = ctxToNonEmptyCellProps(ctx, ownProps);
+interface NonEmptyCellComponentProps {
+  path: string,
+  propName?: string,
+  schema: JsonSchema,
+  rootSchema: JsonSchema,
+  errors: string,
+  enabled: boolean,
+  renderers?: JsonFormsRendererRegistryEntry[],
+  cells?: JsonFormsCellRendererRegistryEntry[],
+  isValid: boolean
+}
+const NonEmptyCellComponent = React.memo(({path, propName, schema,rootSchema, errors, enabled, renderers, cells, isValid}:NonEmptyCellComponentProps) => {
 
-  const isValid = isEmpty(errors);
   return (
     <NoBorderTableCell>
       {schema.properties ? (
@@ -237,35 +236,47 @@ const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
       <FormHelperText error={!isValid}>{!isValid && errors}</FormHelperText>
     </NoBorderTableCell>
   );
+});
+
+const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
+  const ctx = useJsonForms();
+  const emptyCellProps = ctxToNonEmptyCellProps(ctx, ownProps);
+
+  const isValid = isEmpty(emptyCellProps.errors);
+  return <NonEmptyCellComponent {...emptyCellProps} isValid={isValid}/>
 };
 
 interface NonEmptyRowProps {
   childPath: string;
   schema: JsonSchema;
   rowIndex: number;
-  moveUp: () => void;
-  moveDown: () => void;
+  moveUpCreator: (path:string, position: number)=> ()=> void;
+  moveDownCreator: (path:string, position: number)=> ()=> void;
   enableUp: boolean;
   enableDown: boolean;
   showSortButtons: boolean;
   enabled: boolean;
   cells?: JsonFormsCellRendererRegistryEntry[];
+  path: string;
 }
 
-const NonEmptyRow = React.memo(
+const NonEmptyRowComponent = 
   ({
     childPath,
     schema,
     rowIndex,
     openDeleteDialog,
-    moveUp,
-    moveDown,
+    moveUpCreator,
+    moveDownCreator,
     enableUp,
     enableDown,
     showSortButtons,
     enabled,
-    cells
+    cells,
+    path
   }: NonEmptyRowProps & WithDeleteDialogSupport) => {
+    const moveUp = useMemo(() => moveUpCreator(path, rowIndex),[moveUpCreator, path, rowIndex]);
+    const moveDown = useMemo(() => moveDownCreator(path, rowIndex),[moveDownCreator, path, rowIndex]);
     return (
       <TableRow key={childPath} hover>
         {generateCells(NonEmptyCell, schema, childPath, enabled, cells)}
@@ -276,17 +287,13 @@ const NonEmptyRow = React.memo(
             <Grid
               container
               direction='row'
-              justify='flex-end'
+              justifyContent='flex-end'
               alignItems='center'
             >
               {showSortButtons ? (
                 <Fragment>
                   <Grid item>
-                    <IconButton
-                      aria-label={`Move up`}
-                      onClick={moveUp}
-                      disabled={!enableUp}
-                    >
+                    <IconButton aria-label={`Move up`} onClick={moveUp} disabled={!enableUp} size='large'>
                       <ArrowUpward />
                     </IconButton>
                   </Grid>
@@ -295,7 +302,7 @@ const NonEmptyRow = React.memo(
                       aria-label={`Move down`}
                       onClick={moveDown}
                       disabled={!enableDown}
-                    >
+                      size='large'>
                       <ArrowDownward />
                     </IconButton>
                   </Grid>
@@ -305,7 +312,7 @@ const NonEmptyRow = React.memo(
                 <IconButton
                   aria-label={`Delete`}
                   onClick={() => openDeleteDialog(childPath, rowIndex)}
-                >
+                  size='large'>
                   <DeleteIcon />
                 </IconButton>
               </Grid>
@@ -314,8 +321,8 @@ const NonEmptyRow = React.memo(
         ) : null}
       </TableRow>
     );
-  }
-);
+  };
+export const NonEmptyRow = React.memo(NonEmptyRowComponent);
 interface TableRowsProp {
   data: number;
   path: string;
@@ -359,13 +366,14 @@ const TableRows = ({
             rowIndex={index}
             schema={schema}
             openDeleteDialog={openDeleteDialog}
-            moveUp={moveUp(path, index)}
-            moveDown={moveDown(path, index)}
+            moveUpCreator={moveUp}
+            moveDownCreator={moveDown}
             enableUp={index !== 0}
             enableDown={index !== data - 1}
             showSortButtons={appliedUiSchemaOptions.showSortButtons}
             enabled={enabled}
             cells={cells}
+            path={path}
           />
         );
       })}

package/src/complex/NoBorderTableCell.tsx

@@ -22,20 +22,18 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { withStyles } from '@material-ui/core/styles';
-import { TableCell } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
+import { TableCell } from '@mui/material';
 import React from 'react';
 
-const styles = {
-    noBottomBorder: {
-        borderBottom: 'none'
-    }
-};
+const StyledTableCell = styled(TableCell)({
+  borderBottom: 'none'
+});
 
-const NoBorderTableCell = ({ classes, children, ...otherProps }: any) => (
-    <TableCell className={classes.noBottomBorder} {...otherProps}>
-        {children}
-    </TableCell>
+const NoBorderTableCell = ({ children, ...otherProps }: any) => (
+  <StyledTableCell {...otherProps}>
+    {children}
+  </StyledTableCell>
 );
 
-export default withStyles(styles)(NoBorderTableCell);
+export default (NoBorderTableCell);

package/src/complex/TableToolbar.tsx

@@ -27,20 +27,21 @@ import {
   ControlElement,
   createDefaultValue,
   JsonSchema,
-  Labels
 } from '@jsonforms/core';
-import IconButton from '@material-ui/core/IconButton';
-import { Grid, Hidden, Typography } from '@material-ui/core';
-import TableRow from '@material-ui/core/TableRow';
-import Tooltip from '@material-ui/core/Tooltip';
-import AddIcon from '@material-ui/icons/Add';
+import {
+  IconButton,
+  TableRow,
+  Tooltip
+} from '@mui/material';
+import { Grid, Hidden, Typography } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
 import ValidationIcon from './ValidationIcon';
 import NoBorderTableCell from './NoBorderTableCell';
 
 export interface MaterialTableToolbarProps {
   numColumns: number;
   errors: string;
-  label: string | Labels;
+  label: string;
   path: string;
   uischema: ControlElement;
   schema: JsonSchema;
@@ -68,7 +69,7 @@ const TableToolbar = React.memo(
       <NoBorderTableCell colSpan={numColumns}>
         <Grid
           container
-          justify={'flex-start'}
+          justifyContent={'flex-start'}
           alignItems={'center'}
           spacing={2}
         >
@@ -97,7 +98,7 @@ const TableToolbar = React.memo(
             <IconButton
               aria-label={`Add to ${label}`}
               onClick={addItem(path, createDefaultValue(schema))}
-            >
+              size='large'>
               <AddIcon />
             </IconButton>
           </Tooltip>

package/src/complex/ValidationIcon.tsx

@@ -24,22 +24,15 @@
 */
 import React from 'react';
 
-import Badge from '@material-ui/core/Badge';
-import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
-import Tooltip from '@material-ui/core/Tooltip';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import {
-  StyledComponentProps,
-  withStyles,
-  WithStyles,
-  createStyles,
-  Theme
-} from '@material-ui/core/styles';
+  Badge,
+  Tooltip,
+  styled
+} from '@mui/material';
 
-export { StyledComponentProps };
-const styles = createStyles(({ palette }: Theme) => ({
-  badge: {
-    color: palette.error.main
-  }
+const StyledBadge = styled(Badge)(({ theme }: any) => ({
+  color: theme.palette.error.main
 }));
 
 export interface ValidationProps {
@@ -47,18 +40,18 @@ export interface ValidationProps {
   id: string;
 }
 
-const ValidationIcon: React.FC<ValidationProps & WithStyles<'badge'>> =
-  ({ classes, errorMessages, id }) => {
+const ValidationIcon: React.FC<ValidationProps> =
+  ({ errorMessages, id }) => {
     return (
       <Tooltip
         id={id}
         title={errorMessages}
       >
-        <Badge className={classes.badge} badgeContent={errorMessages.split('\n').length}>
+        <StyledBadge badgeContent={errorMessages.split('\n').length}>
           <ErrorOutlineIcon color='inherit'/>
-        </Badge>
+        </StyledBadge>
       </Tooltip>
     );
 };
 
-export default withStyles(styles, { name: 'ValidationIcon' })(ValidationIcon);
+export default ValidationIcon;

package/src/controls/MaterialAnyOfStringOrEnumControl.tsx

@@ -35,10 +35,10 @@ import {
   WithClassname
 } from '@jsonforms/core';
 import { Control, withJsonFormsControlProps } from '@jsonforms/react';
-import { Input } from '@material-ui/core';
-import { InputBaseComponentProps } from '@material-ui/core/InputBase';
+import { Input, InputBaseComponentProps } from '@mui/material';
 import merge from 'lodash/merge';
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useDebouncedChange } from '../util';
 import { MaterialInputControl } from './MaterialInputControl';
 
 const findEnumSchema = (schemas: JsonSchema[]) =>
@@ -64,17 +64,20 @@ const MuiAutocompleteInputText = (props: EnumCellProps & WithClassname) => {
   const enumSchema = findEnumSchema(schema.anyOf);
   const stringSchema = findTextSchema(schema.anyOf);
   const maxLength = stringSchema.maxLength;
-  const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  let inputProps: InputBaseComponentProps = {};
-  if (appliedUiSchemaOptions.restrict) {
-    inputProps = { maxLength: maxLength };
-  }
-  if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
-    inputProps.size = maxLength;
-  }
-  const onChange = (ev: any) => handleChange(path, ev.target.value);
+  const appliedUiSchemaOptions = useMemo(() => merge({}, config, uischema.options),[config, uischema.options]);
+  const inputProps: InputBaseComponentProps = useMemo(() => {
+    let propMemo: InputBaseComponentProps = {};
+    if (appliedUiSchemaOptions.restrict) {
+      propMemo = { maxLength: maxLength };
+    }
+    if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
+      propMemo.size = maxLength;
+    }
+    propMemo.list = props.id + 'datalist';
+    return propMemo;
+  },[appliedUiSchemaOptions,props.id]);
+  const [inputText, onChange] = useDebouncedChange(handleChange, '', data, path);
 
-  inputProps.list = props.id + 'datalist';
   const dataList = (
     <datalist id={props.id + 'datalist'}>
       {enumSchema.enum.map(optionValue => (
@@ -85,7 +88,7 @@ const MuiAutocompleteInputText = (props: EnumCellProps & WithClassname) => {
   return (
     <Input
       type='text'
-      value={data || ''}
+      value={inputText}
       onChange={onChange}
       className={className}
       id={id}

package/src/controls/MaterialBooleanControl.tsx

@@ -31,7 +31,7 @@ import {
   ControlProps
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormControlLabel, Hidden } from '@material-ui/core';
+import { FormControlLabel, Hidden } from '@mui/material';
 import { MuiCheckbox } from '../mui-controls/MuiCheckbox';
 
 export const MaterialBooleanControl = ({

package/src/controls/MaterialBooleanToggleControl.tsx

@@ -33,7 +33,7 @@ import {
   and
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormControlLabel, Hidden } from '@material-ui/core';
+import { FormControlLabel, Hidden } from '@mui/material';
 import { MuiToggle } from '../mui-controls/MuiToggle';
 
 export const MaterialBooleanToggleControl = ({