@jsonforms/material-renderers 3.3.0 → 3.4.0-alpha.1

package/lib/layouts/ArrayToolbar.d.ts

@@ -9,5 +9,6 @@ export interface ArrayLayoutToolbarProps {
     addItem(path: string, data: any): () => void;
     createDefault(): any;
     translations: ArrayTranslations;
+    disableAdd?: boolean;
 }
 export declare const ArrayLayoutToolbar: React.NamedExoticComponent<ArrayLayoutToolbarProps>;

package/lib/layouts/ExpandPanelRenderer.d.ts

@@ -18,6 +18,7 @@ interface OwnPropsOfExpandPanel {
     childLabelProp?: string;
     handleExpansion(panel: string): (event: any, expanded: boolean) => void;
     translations: ArrayTranslations;
+    disableRemove?: boolean;
 }
 interface StatePropsOfExpandPanel extends OwnPropsOfExpandPanel {
     childLabel: string;

package/lib/mui-controls/MuiSelect.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { EnumCellProps, WithClassname } from '@jsonforms/core';
 import { TranslateProps } from '@jsonforms/react';
-import { WithInputProps } from '../util';
-export declare const MuiSelect: React.NamedExoticComponent<EnumCellProps & WithClassname & TranslateProps & WithInputProps>;
+import { WithInputProps, WithSelectProps } from '../util';
+export declare const MuiSelect: React.NamedExoticComponent<EnumCellProps & WithClassname & TranslateProps & WithInputProps & WithSelectProps>;

package/lib/util/theme.d.ts

@@ -12,6 +12,9 @@ export interface JsonFormsTheme extends Theme {
 export interface WithInputProps {
     label?: string;
 }
+export interface WithSelectProps {
+    multiple?: boolean;
+}
 export declare const defaultInputVariant: TextFieldProps['variant'];
 export declare function useInputVariant(): TextFieldProps['variant'];
 export declare function useInputComponent(): React.JSXElementConstructor<InputBaseProps & WithInputProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/material-renderers",
-  "version": "3.3.0",
+  "version": "3.4.0-alpha.1",
   "description": "Material Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -73,11 +73,11 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "3.3.0",
-    "@jsonforms/react": "3.3.0",
+    "@jsonforms/core": "3.4.0-alpha.1",
+    "@jsonforms/react": "3.4.0-alpha.1",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.0",
-    "@mui/x-date-pickers": "^6.0.0",
+    "@mui/x-date-pickers": "^6.0.0 || ^7.0.0",
     "react": "^16.12.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
@@ -85,7 +85,7 @@
     "@emotion/styled": "^11.3.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "~5.13.0",
-    "@mui/x-date-pickers": "^6.5.0",
+    "@mui/x-date-pickers": "^7.7.1",
     "@rollup/plugin-commonjs": "^23.0.3",
     "@rollup/plugin-json": "^5.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
@@ -126,8 +126,8 @@
     "webpack": "^5.78.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
-    "@jsonforms/core": "3.3.0",
-    "@jsonforms/react": "3.3.0"
+    "@jsonforms/react": "3.4.0-alpha.1",
+    "@jsonforms/core": "3.4.0-alpha.1"
   },
   "scripts": {
     "build": "rollup -c rollup.config.js",

package/src/additional/ListWithDetailMasterItem.tsx

@@ -33,7 +33,7 @@ import {
   ListItemText,
   Tooltip,
 } from '@mui/material';
-import { Delete as DeleteIcon } from '@mui/icons-material';
+import DeleteIcon from '@mui/icons-material/Delete';
 import React from 'react';
 
 export const ListWithDetailMasterItem = ({
@@ -45,6 +45,7 @@ export const ListWithDetailMasterItem = ({
   removeItem,
   path,
   translations,
+  disableRemove,
 }: StatePropsOfMasterItem) => {
   return (
     <ListItem button selected={selected} onClick={handleSelect(index)}>
@@ -52,7 +53,7 @@ export const ListWithDetailMasterItem = ({
         <Avatar aria-label='Index'>{index + 1}</Avatar>
       </ListItemAvatar>
       <ListItemText primary={childLabel} />
-      {enabled && (
+      {enabled && !disableRemove && (
         <ListItemSecondaryAction>
           <Tooltip
             id='tooltip-remove'

package/src/additional/MaterialListWithDetailRenderer.tsx

@@ -65,6 +65,8 @@ export const MaterialListWithDetailRenderer = ({
   rootSchema,
   translations,
   description,
+  disableAdd,
+  disableRemove,
 }: ArrayLayoutProps) => {
   const [selectedIndex, setSelectedIndex] = useState(undefined);
   const handleRemoveItem = useCallback(
@@ -100,6 +102,8 @@ export const MaterialListWithDetailRenderer = ({
     [uischemas, schema, uischema.scope, path, uischema, rootSchema]
   );
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const doDisableAdd = disableAdd || appliedUiSchemaOptions.disableAdd;
+  const doDisableRemove = disableRemove || appliedUiSchemaOptions.disableRemove;
 
   React.useEffect(() => {
     setSelectedIndex(undefined);
@@ -124,6 +128,7 @@ export const MaterialListWithDetailRenderer = ({
         enabled={enabled}
         addItem={addItem}
         createDefault={handleCreateDefaultValue}
+        disableAdd={doDisableAdd}
       />
       <Grid container direction='row' spacing={2}>
         <Grid item xs={3}>
@@ -142,6 +147,7 @@ export const MaterialListWithDetailRenderer = ({
                   uischema={foundUISchema}
                   childLabelProp={appliedUiSchemaOptions.elementLabelProp}
                   translations={translations}
+                  disableRemove={doDisableRemove}
                 />
               ))
             ) : (

package/src/complex/MaterialTableControl.tsx

@@ -57,11 +57,9 @@ import {
   encode,
   ArrayTranslations,
 } from '@jsonforms/core';
-import {
-  Delete as DeleteIcon,
-  ArrowDownward,
-  ArrowUpward,
-} from '@mui/icons-material';
+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';
@@ -278,6 +276,7 @@ interface NonEmptyRowProps {
   cells?: JsonFormsCellRendererRegistryEntry[];
   path: string;
   translations: ArrayTranslations;
+  disableRemove?: boolean;
 }
 
 const NonEmptyRowComponent = ({
@@ -294,6 +293,7 @@ const NonEmptyRowComponent = ({
   cells,
   path,
   translations,
+  disableRemove,
 }: NonEmptyRowProps & WithDeleteDialogSupport) => {
   const moveUp = useMemo(
     () => moveUpCreator(path, rowIndex),
@@ -354,21 +354,23 @@ const NonEmptyRowComponent = ({
                 </Grid>
               </Fragment>
             ) : null}
-            <Grid item>
-              <Tooltip
-                id='tooltip-remove'
-                title={translations.removeTooltip}
-                placement='bottom'
-              >
-                <IconButton
-                  aria-label={translations.removeAriaLabel}
-                  onClick={() => openDeleteDialog(childPath, rowIndex)}
-                  size='large'
+            {!disableRemove ? (
+              <Grid item>
+                <Tooltip
+                  id='tooltip-remove'
+                  title={translations.removeTooltip}
+                  placement='bottom'
                 >
-                  <DeleteIcon />
-                </IconButton>
-              </Tooltip>
-            </Grid>
+                  <IconButton
+                    aria-label={translations.removeAriaLabel}
+                    onClick={() => openDeleteDialog(childPath, rowIndex)}
+                    size='large'
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                </Tooltip>
+              </Grid>
+            ) : null}
           </Grid>
         </NoBorderTableCell>
       ) : null}
@@ -387,6 +389,7 @@ interface TableRowsProp {
   moveUp?(path: string, toMove: number): () => void;
   moveDown?(path: string, toMove: number): () => void;
   translations: ArrayTranslations;
+  disableRemove?: boolean;
 }
 const TableRows = ({
   data,
@@ -400,6 +403,7 @@ const TableRows = ({
   enabled,
   cells,
   translations,
+  disableRemove,
 }: TableRowsProp & WithDeleteDialogSupport) => {
   const isEmptyTable = data === 0;
 
@@ -438,6 +442,7 @@ const TableRows = ({
             cells={cells}
             path={path}
             translations={translations}
+            disableRemove={disableRemove}
           />
         );
       })}
@@ -464,8 +469,16 @@ export class MaterialTableControl extends React.Component<
       enabled,
       cells,
       translations,
+      disableAdd,
+      disableRemove,
+      config,
     } = this.props;
 
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const doDisableAdd = disableAdd || appliedUiSchemaOptions.disableAdd;
+    const doDisableRemove =
+      disableRemove || appliedUiSchemaOptions.disableRemove;
+
     const controlElement = uischema as ControlElement;
     const isObjectSchema = schema.type === 'object';
     const headerCells: any = isObjectSchema
@@ -491,6 +504,7 @@ export class MaterialTableControl extends React.Component<
             rootSchema={rootSchema}
             enabled={enabled}
             translations={translations}
+            disableAdd={doDisableAdd}
           />
           {isObjectSchema && (
             <TableRow>
@@ -504,6 +518,7 @@ export class MaterialTableControl extends React.Component<
             openDeleteDialog={openDeleteDialog}
             translations={translations}
             {...this.props}
+            disableRemove={doDisableRemove}
           />
         </TableBody>
       </Table>

package/src/complex/TableToolbar.tsx

@@ -38,7 +38,7 @@ import {
   FormHelperText,
   Stack,
 } from '@mui/material';
-import { Add as AddIcon } from '@mui/icons-material';
+import AddIcon from '@mui/icons-material/Add';
 import ValidationIcon from './ValidationIcon';
 import NoBorderTableCell from './NoBorderTableCell';
 
@@ -54,6 +54,7 @@ export interface MaterialTableToolbarProps {
   enabled: boolean;
   translations: ArrayTranslations;
   addItem(path: string, value: any): () => void;
+  disableAdd?: boolean;
 }
 
 const fixedCellSmall = {
@@ -72,6 +73,7 @@ const TableToolbar = React.memo(function TableToolbar({
   enabled,
   translations,
   rootSchema,
+  disableAdd,
 }: MaterialTableToolbarProps) {
   return (
     <TableRow>
@@ -100,7 +102,7 @@ const TableToolbar = React.memo(function TableToolbar({
           {description && <FormHelperText>{description}</FormHelperText>}
         </Stack>
       </NoBorderTableCell>
-      {enabled ? (
+      {enabled && !disableAdd ? (
         <NoBorderTableCell align='right' style={fixedCellSmall}>
           <Tooltip
             id='tooltip-add'

package/src/complex/ValidationIcon.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 
-import { ErrorOutline as ErrorOutlineIcon } from '@mui/icons-material';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import { Badge, Tooltip, styled } from '@mui/material';
 
 const StyledBadge = styled(Badge)(({ theme }: any) => ({

package/src/layouts/ArrayToolbar.tsx

@@ -20,6 +20,7 @@ export interface ArrayLayoutToolbarProps {
   addItem(path: string, data: any): () => void;
   createDefault(): any;
   translations: ArrayTranslations;
+  disableAdd?: boolean;
 }
 export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
   label,
@@ -30,6 +31,7 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
   enabled,
   createDefault,
   translations,
+  disableAdd,
 }: ArrayLayoutToolbarProps) {
   return (
     <Toolbar disableGutters={true}>
@@ -57,7 +59,7 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
               </Grid>
             </Grid>
           </Grid>
-          {enabled && (
+          {enabled && !disableAdd && (
             <Grid item>
               <Grid container>
                 <Grid item>

package/src/layouts/ExpandPanelRenderer.tsx

@@ -29,6 +29,7 @@ import {
   removeId,
   ArrayTranslations,
   computeChildLabel,
+  UpdateArrayContext,
 } from '@jsonforms/core';
 import {
   Accordion,
@@ -39,12 +40,10 @@ import {
   IconButton,
   Tooltip,
 } from '@mui/material';
-import {
-  ExpandMore as ExpandMoreIcon,
-  Delete as DeleteIcon,
-  ArrowUpward,
-  ArrowDownward,
-} from '@mui/icons-material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ArrowUpward from '@mui/icons-material/ArrowUpward';
+import ArrowDownward from '@mui/icons-material/ArrowDownward';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 const iconStyle: any = { float: 'right' };
 
@@ -65,6 +64,7 @@ interface OwnPropsOfExpandPanel {
   childLabelProp?: string;
   handleExpansion(panel: string): (event: any, expanded: boolean) => void;
   translations: ArrayTranslations;
+  disableRemove?: boolean;
 }
 
 interface StatePropsOfExpandPanel extends OwnPropsOfExpandPanel {
@@ -117,6 +117,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
     cells,
     config,
     translations,
+    disableRemove,
   } = props;
 
   const foundUISchema = useMemo(
@@ -207,7 +208,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                   ) : (
                     ''
                   )}
-                  {enabled && (
+                  {enabled && !disableRemove && (
                     <Grid item>
                       <Tooltip
                         id='tooltip-remove'
@@ -262,13 +263,17 @@ export const ctxDispatchToExpandPanelProps: (
       (event: any): void => {
         event.stopPropagation();
         dispatch(
-          update(path, (array) => {
-            toDelete
-              .sort()
-              .reverse()
-              .forEach((s) => array.splice(s, 1));
-            return array;
-          })
+          update(
+            path,
+            (array) => {
+              toDelete
+                .sort()
+                .reverse()
+                .forEach((s) => array.splice(s, 1));
+              return array;
+            },
+            { type: 'REMOVE', indices: toDelete } as UpdateArrayContext
+          )
         );
       },
     [dispatch]
@@ -278,10 +283,17 @@ export const ctxDispatchToExpandPanelProps: (
       (event: any): void => {
         event.stopPropagation();
         dispatch(
-          update(path, (array) => {
-            moveUp(array, toMove);
-            return array;
-          })
+          update(
+            path,
+            (array) => {
+              moveUp(array, toMove);
+              return array;
+            },
+            {
+              type: 'MOVE',
+              moves: [{ from: toMove, to: toMove - 1 }],
+            } as UpdateArrayContext
+          )
         );
       },
     [dispatch]
@@ -291,10 +303,17 @@ export const ctxDispatchToExpandPanelProps: (
       (event: any): void => {
         event.stopPropagation();
         dispatch(
-          update(path, (array) => {
-            moveDown(array, toMove);
-            return array;
-          })
+          update(
+            path,
+            (array) => {
+              moveDown(array, toMove);
+              return array;
+            },
+            {
+              type: 'MOVE',
+              moves: [{ from: toMove, to: toMove + 1 }],
+            } as UpdateArrayContext
+          )
         );
       },
     [dispatch]

package/src/layouts/MaterialArrayLayout.tsx

@@ -67,8 +67,12 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => {
     uischemas,
     translations,
     description,
+    disableAdd,
+    disableRemove,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
+  const doDisableAdd = disableAdd || appliedUiSchemaOptions.disableAdd;
+  const doDisableRemove = disableRemove || appliedUiSchemaOptions.disableRemove;
 
   return (
     <div>
@@ -85,6 +89,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => {
         enabled={enabled}
         addItem={addItem}
         createDefault={innerCreateDefaultValue}
+        disableAdd={doDisableAdd}
       />
       <div>
         {data > 0 ? (
@@ -108,6 +113,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => {
                 childLabelProp={appliedUiSchemaOptions.elementLabelProp}
                 uischemas={uischemas}
                 translations={translations}
+                disableRemove={doDisableRemove}
               />
             );
           })

package/src/mui-controls/MuiInputText.tsx

@@ -32,7 +32,7 @@ import {
   useTheme,
 } from '@mui/material';
 import merge from 'lodash/merge';
-import { Close } from '@mui/icons-material';
+import Close from '@mui/icons-material/Close';
 import {
   JsonFormsTheme,
   WithInputProps,

package/src/mui-controls/MuiSelect.tsx

@@ -28,10 +28,14 @@ import { EnumCellProps, WithClassname } from '@jsonforms/core';
 import { MenuItem, Select } from '@mui/material';
 import merge from 'lodash/merge';
 import { TranslateProps } from '@jsonforms/react';
-import { i18nDefaults, WithInputProps } from '../util';
+import { i18nDefaults, WithInputProps, WithSelectProps } from '../util';
 
 export const MuiSelect = React.memo(function MuiSelect(
-  props: EnumCellProps & WithClassname & TranslateProps & WithInputProps
+  props: EnumCellProps &
+    WithClassname &
+    TranslateProps &
+    WithInputProps &
+    WithSelectProps
 ) {
   const {
     data,
@@ -46,6 +50,7 @@ export const MuiSelect = React.memo(function MuiSelect(
     config,
     label,
     t,
+    multiple,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const noneOptionLabel = useMemo(
@@ -63,6 +68,7 @@ export const MuiSelect = React.memo(function MuiSelect(
       value={data !== undefined ? data : ''}
       onChange={(ev) => handleChange(path, ev.target.value || undefined)}
       fullWidth={true}
+      multiple={multiple || false}
     >
       {[
         <MenuItem value={''} key='jsonforms.enum.none'>

package/src/util/theme.ts

@@ -46,6 +46,10 @@ export interface WithInputProps {
   label?: string;
 }
 
+export interface WithSelectProps {
+  multiple?: boolean;
+}
+
 const variantToInput = {
   standard: Input,
   filled: FilledInput,