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

package/lib/additional/ListWithDetailMasterItem.d.ts

@@ -1,5 +1,5 @@
 import type { StatePropsOfMasterItem } from '@jsonforms/core';
 import React from 'react';
-export declare const ListWithDetailMasterItem: ({ index, childLabel, selected, enabled, handleSelect, removeItem, path, translations, }: StatePropsOfMasterItem) => React.JSX.Element;
+export declare const ListWithDetailMasterItem: ({ index, childLabel, selected, enabled, handleSelect, removeItem, path, translations, disableRemove, }: StatePropsOfMasterItem) => React.JSX.Element;
 declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfMasterListItem>;
 export default _default;

package/lib/additional/MaterialListWithDetailRenderer.d.ts

@@ -1,6 +1,6 @@
 import { ArrayLayoutProps, RankedTester } from '@jsonforms/core';
 import React from 'react';
-export declare const MaterialListWithDetailRenderer: ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, description, }: ArrayLayoutProps) => React.JSX.Element;
+export declare const MaterialListWithDetailRenderer: ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, description, disableAdd, disableRemove, }: ArrayLayoutProps) => React.JSX.Element;
 export declare const materialListWithDetailTester: RankedTester;
 declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
 export default _default;

package/lib/additional/unwrapped.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const UnwrappedAdditional: {
     MaterialLabelRenderer: ({ text, visible }: import("@jsonforms/core").LabelProps) => import("react").JSX.Element;
-    MaterialListWithDetailRenderer: ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, description, }: import("@jsonforms/core").ArrayLayoutProps) => import("react").JSX.Element;
+    MaterialListWithDetailRenderer: ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, description, disableAdd, disableRemove, }: import("@jsonforms/core").ArrayLayoutProps) => import("react").JSX.Element;
 };

package/lib/complex/MaterialTableControl.d.ts

@@ -18,8 +18,9 @@ interface NonEmptyRowProps {
     cells?: JsonFormsCellRendererRegistryEntry[];
     path: string;
     translations: ArrayTranslations;
+    disableRemove?: boolean;
 }
-export declare const NonEmptyRow: React.MemoExoticComponent<({ childPath, schema, rowIndex, openDeleteDialog, moveUpCreator, moveDownCreator, enableUp, enableDown, showSortButtons, enabled, cells, path, translations, }: NonEmptyRowProps & WithDeleteDialogSupport) => React.JSX.Element>;
+export declare const NonEmptyRow: React.MemoExoticComponent<({ childPath, schema, rowIndex, openDeleteDialog, moveUpCreator, moveDownCreator, enableUp, enableDown, showSortButtons, enabled, cells, path, translations, disableRemove, }: NonEmptyRowProps & WithDeleteDialogSupport) => React.JSX.Element>;
 export declare class MaterialTableControl extends React.Component<ArrayLayoutProps & WithDeleteDialogSupport, any> {
     addItem: (path: string, value: any) => () => void;
     render(): React.JSX.Element;

package/lib/complex/TableToolbar.d.ts

@@ -12,6 +12,7 @@ export interface MaterialTableToolbarProps {
     enabled: boolean;
     translations: ArrayTranslations;
     addItem(path: string, value: any): () => void;
+    disableAdd?: boolean;
 }
 declare const TableToolbar: React.NamedExoticComponent<MaterialTableToolbarProps>;
 export default TableToolbar;

package/lib/index.d.ts

@@ -38,5 +38,5 @@ export declare const Unwrapped: {
     MaterialObjectRenderer: ({ renderers, cells, uischemas, schema, label, path, visible, enabled, uischema, rootSchema, }: import("@jsonforms/core").StatePropsOfControlWithDetail) => import("react").JSX.Element;
     MaterialOneOfRenderer: ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data, }: import("@jsonforms/core").CombinatorRendererProps) => import("react").JSX.Element;
     MaterialLabelRenderer: ({ text, visible }: import("@jsonforms/core").LabelProps) => import("react").JSX.Element;
-    MaterialListWithDetailRenderer: ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, description, }: import("@jsonforms/core").ArrayLayoutProps) => import("react").JSX.Element;
+    MaterialListWithDetailRenderer: ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, description, disableAdd, disableRemove, }: import("@jsonforms/core").ArrayLayoutProps) => import("react").JSX.Element;
 };

package/lib/jsonforms-react-material.cjs.js

@@ -11,16 +11,21 @@ var isEmpty = require('lodash/isEmpty');
 var union = require('lodash/union');
 var startCase = require('lodash/startCase');
 var range = require('lodash/range');
-var iconsMaterial = require('@mui/icons-material');
+var DeleteIcon = require('@mui/icons-material/Delete');
+var ArrowDownward = require('@mui/icons-material/ArrowDownward');
+var ArrowUpward = require('@mui/icons-material/ArrowUpward');
 var styles$1 = require('@mui/material/styles');
+var AddIcon = require('@mui/icons-material/Add');
+var ErrorOutlineIcon = require('@mui/icons-material/ErrorOutline');
 var merge = require('lodash/merge');
 var dayjs = require('dayjs');
 var customParsing = require('dayjs/plugin/customParseFormat');
 var debounce = require('lodash/debounce');
+var Close = require('@mui/icons-material/Close');
 var map = require('lodash/map');
-var AddIcon = require('@mui/icons-material/Add');
 var xDatePickers = require('@mui/x-date-pickers');
 var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
+var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,12 +35,18 @@ var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var union__default = /*#__PURE__*/_interopDefaultLegacy(union);
 var startCase__default = /*#__PURE__*/_interopDefaultLegacy(startCase);
 var range__default = /*#__PURE__*/_interopDefaultLegacy(range);
+var DeleteIcon__default = /*#__PURE__*/_interopDefaultLegacy(DeleteIcon);
+var ArrowDownward__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownward);
+var ArrowUpward__default = /*#__PURE__*/_interopDefaultLegacy(ArrowUpward);
+var AddIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddIcon);
+var ErrorOutlineIcon__default = /*#__PURE__*/_interopDefaultLegacy(ErrorOutlineIcon);
 var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 var customParsing__default = /*#__PURE__*/_interopDefaultLegacy(customParsing);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
 var map__default = /*#__PURE__*/_interopDefaultLegacy(map);
-var AddIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddIcon);
+var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -202,7 +213,7 @@ var ValidationIcon = function (_a) {
     var errorMessages = _a.errorMessages, id = _a.id;
     return (React__default["default"].createElement(material.Tooltip, { id: id, title: errorMessages },
         React__default["default"].createElement(StyledBadge, { badgeContent: errorMessages.split('\n').length },
-            React__default["default"].createElement(iconsMaterial.ErrorOutline, { color: 'inherit' }))));
+            React__default["default"].createElement(ErrorOutlineIcon__default["default"], { color: 'inherit' }))));
 };
 
 var fixedCellSmall = {
@@ -210,7 +221,7 @@ var fixedCellSmall = {
     paddingRight: 0,
 };
 var TableToolbar = React__default["default"].memo(function TableToolbar(_a) {
-    var numColumns = _a.numColumns, errors = _a.errors, label = _a.label, description = _a.description, path = _a.path, addItem = _a.addItem, schema = _a.schema, enabled = _a.enabled, translations = _a.translations, rootSchema = _a.rootSchema;
+    var numColumns = _a.numColumns, errors = _a.errors, label = _a.label, description = _a.description, path = _a.path, addItem = _a.addItem, schema = _a.schema, enabled = _a.enabled, translations = _a.translations, rootSchema = _a.rootSchema, disableAdd = _a.disableAdd;
     return (React__default["default"].createElement(material.TableRow, null,
         React__default["default"].createElement(NoBorderTableCell, { colSpan: numColumns },
             React__default["default"].createElement(material.Stack, null,
@@ -220,10 +231,10 @@ var TableToolbar = React__default["default"].memo(function TableToolbar(_a) {
                     React__default["default"].createElement(material.Grid, { item: true }, errors.length !== 0 && (React__default["default"].createElement(material.Grid, { item: true },
                         React__default["default"].createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors }))))),
                 description && React__default["default"].createElement(material.FormHelperText, null, description))),
-        enabled ? (React__default["default"].createElement(NoBorderTableCell, { align: 'right', style: fixedCellSmall },
+        enabled && !disableAdd ? (React__default["default"].createElement(NoBorderTableCell, { align: 'right', style: fixedCellSmall },
             React__default["default"].createElement(material.Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
                 React__default["default"].createElement(material.IconButton, { "aria-label": translations.addAriaLabel, onClick: addItem(path, core.createDefaultValue(schema, rootSchema)), size: 'large' },
-                    React__default["default"].createElement(iconsMaterial.Add, null))))) : null));
+                    React__default["default"].createElement(AddIcon__default["default"], null))))) : null));
 });
 
 var styles = {
@@ -320,7 +331,7 @@ var NonEmptyCell = function (ownProps) {
     return React__default["default"].createElement(NonEmptyCellComponent, __assign({}, emptyCellProps, { isValid: isValid }));
 };
 var NonEmptyRowComponent = function (_a) {
-    var childPath = _a.childPath, schema = _a.schema, rowIndex = _a.rowIndex, openDeleteDialog = _a.openDeleteDialog, moveUpCreator = _a.moveUpCreator, moveDownCreator = _a.moveDownCreator, enableUp = _a.enableUp, enableDown = _a.enableDown, showSortButtons = _a.showSortButtons, enabled = _a.enabled, cells = _a.cells, path = _a.path, translations = _a.translations;
+    var childPath = _a.childPath, schema = _a.schema, rowIndex = _a.rowIndex, openDeleteDialog = _a.openDeleteDialog, moveUpCreator = _a.moveUpCreator, moveDownCreator = _a.moveDownCreator, enableUp = _a.enableUp, enableDown = _a.enableDown, showSortButtons = _a.showSortButtons, enabled = _a.enabled, cells = _a.cells, path = _a.path, translations = _a.translations, disableRemove = _a.disableRemove;
     var moveUp = React.useMemo(function () { return moveUpCreator(path, rowIndex); }, [moveUpCreator, path, rowIndex]);
     var moveDown = React.useMemo(function () { return moveDownCreator(path, rowIndex); }, [moveDownCreator, path, rowIndex]);
     return (React__default["default"].createElement(material.TableRow, { key: childPath, hover: true },
@@ -331,19 +342,19 @@ var NonEmptyRowComponent = function (_a) {
                     React__default["default"].createElement(material.Grid, { item: true },
                         React__default["default"].createElement(material.Tooltip, { id: 'tooltip-up', title: translations.up, placement: 'bottom', open: enableUp ? undefined : false },
                             React__default["default"].createElement(material.IconButton, { "aria-label": translations.upAriaLabel, onClick: moveUp, disabled: !enableUp, size: 'large' },
-                                React__default["default"].createElement(iconsMaterial.ArrowUpward, null)))),
+                                React__default["default"].createElement(ArrowUpward__default["default"], null)))),
                     React__default["default"].createElement(material.Grid, { item: true },
                         React__default["default"].createElement(material.Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableDown ? undefined : false },
                             React__default["default"].createElement(material.IconButton, { "aria-label": translations.downAriaLabel, onClick: moveDown, disabled: !enableDown, size: 'large' },
-                                React__default["default"].createElement(iconsMaterial.ArrowDownward, null)))))) : null,
-                React__default["default"].createElement(material.Grid, { item: true },
+                                React__default["default"].createElement(ArrowDownward__default["default"], null)))))) : null,
+                !disableRemove ? (React__default["default"].createElement(material.Grid, { item: true },
                     React__default["default"].createElement(material.Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
                         React__default["default"].createElement(material.IconButton, { "aria-label": translations.removeAriaLabel, onClick: function () { return openDeleteDialog(childPath, rowIndex); }, size: 'large' },
-                            React__default["default"].createElement(iconsMaterial.Delete, null))))))) : null));
+                            React__default["default"].createElement(DeleteIcon__default["default"], null))))) : null))) : null));
 };
 var NonEmptyRow = React__default["default"].memo(NonEmptyRowComponent);
 var TableRows = function (_a) {
-    var data = _a.data, path = _a.path, schema = _a.schema, openDeleteDialog = _a.openDeleteDialog, moveUp = _a.moveUp, moveDown = _a.moveDown, uischema = _a.uischema, config = _a.config, enabled = _a.enabled, cells = _a.cells, translations = _a.translations;
+    var data = _a.data, path = _a.path, schema = _a.schema, openDeleteDialog = _a.openDeleteDialog, moveUp = _a.moveUp, moveDown = _a.moveDown, uischema = _a.uischema, config = _a.config, enabled = _a.enabled, cells = _a.cells, translations = _a.translations, disableRemove = _a.disableRemove;
     var isEmptyTable = data === 0;
     if (isEmptyTable) {
         return (React__default["default"].createElement(EmptyTable, { numColumns: getValidColumnProps(schema).length + 1, translations: translations }));
@@ -352,7 +363,7 @@ var TableRows = function (_a) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null, range__default["default"](data).map(function (index) {
         var childPath = core.Paths.compose(path, "".concat(index));
         return (React__default["default"].createElement(NonEmptyRow, { key: childPath, childPath: childPath, rowIndex: index, schema: schema, openDeleteDialog: openDeleteDialog, moveUpCreator: moveUp, moveDownCreator: moveDown, enableUp: index !== 0, enableDown: index !== data - 1, showSortButtons: appliedUiSchemaOptions.showSortButtons ||
-                appliedUiSchemaOptions.showArrayTableSortButtons, enabled: enabled, cells: cells, path: path, translations: translations }));
+                appliedUiSchemaOptions.showArrayTableSortButtons, enabled: enabled, cells: cells, path: path, translations: translations, disableRemove: disableRemove }));
     })));
 };
 var MaterialTableControl =  (function (_super) {
@@ -363,7 +374,10 @@ var MaterialTableControl =  (function (_super) {
         return _this;
     }
     MaterialTableControl.prototype.render = function () {
-        var _a = this.props, label = _a.label, description = _a.description, path = _a.path, schema = _a.schema, rootSchema = _a.rootSchema, uischema = _a.uischema, errors = _a.errors, openDeleteDialog = _a.openDeleteDialog, visible = _a.visible, enabled = _a.enabled, cells = _a.cells, translations = _a.translations;
+        var _a = this.props, label = _a.label, description = _a.description, path = _a.path, schema = _a.schema, rootSchema = _a.rootSchema, uischema = _a.uischema, errors = _a.errors, openDeleteDialog = _a.openDeleteDialog, visible = _a.visible, enabled = _a.enabled, cells = _a.cells, translations = _a.translations, disableAdd = _a.disableAdd, disableRemove = _a.disableRemove, config = _a.config;
+        var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
+        var doDisableAdd = disableAdd || appliedUiSchemaOptions.disableAdd;
+        var doDisableRemove = disableRemove || appliedUiSchemaOptions.disableRemove;
         var controlElement = uischema;
         var isObjectSchema = schema.type === 'object';
         var headerCells = isObjectSchema
@@ -374,12 +388,12 @@ var MaterialTableControl =  (function (_super) {
         }
         return (React__default["default"].createElement(material.Table, null,
             React__default["default"].createElement(material.TableHead, null,
-                React__default["default"].createElement(TableToolbar, { errors: errors, label: label, description: description, addItem: this.addItem, numColumns: isObjectSchema ? headerCells.length : 1, path: path, uischema: controlElement, schema: schema, rootSchema: rootSchema, enabled: enabled, translations: translations }),
+                React__default["default"].createElement(TableToolbar, { errors: errors, label: label, description: description, addItem: this.addItem, numColumns: isObjectSchema ? headerCells.length : 1, path: path, uischema: controlElement, schema: schema, rootSchema: rootSchema, enabled: enabled, translations: translations, disableAdd: doDisableAdd }),
                 isObjectSchema && (React__default["default"].createElement(material.TableRow, null,
                     headerCells,
                     enabled ? React__default["default"].createElement(material.TableCell, null) : null))),
             React__default["default"].createElement(material.TableBody, null,
-                React__default["default"].createElement(TableRows, __assign({ openDeleteDialog: openDeleteDialog, translations: translations }, this.props)))));
+                React__default["default"].createElement(TableRows, __assign({ openDeleteDialog: openDeleteDialog, translations: translations }, this.props, { disableRemove: doDisableRemove })))));
     };
     return MaterialTableControl;
 }(React__default["default"].Component));
@@ -671,7 +685,7 @@ var MuiInputText = React__default["default"].memo(function MuiInputText(props) {
                 right: 0,
             } },
             React__default["default"].createElement(material.IconButton, { "aria-label": 'Clear input field', onClick: onClear, size: 'large' },
-                React__default["default"].createElement(iconsMaterial.Close, { style: closeStyle }))), inputComponent: inputComponent }));
+                React__default["default"].createElement(Close__default["default"], { style: closeStyle }))), inputComponent: inputComponent }));
 });
 
 var MuiInputTime = React__default["default"].memo(function MuiInputTime(props) {
@@ -683,10 +697,10 @@ var MuiInputTime = React__default["default"].memo(function MuiInputTime(props) {
 });
 
 var MuiSelect = React__default["default"].memo(function MuiSelect(props) {
-    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, schema = props.schema, uischema = props.uischema, path = props.path, handleChange = props.handleChange, options = props.options, config = props.config, label = props.label, t = props.t;
+    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, schema = props.schema, uischema = props.uischema, path = props.path, handleChange = props.handleChange, options = props.options, config = props.config, label = props.label, t = props.t, multiple = props.multiple;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
     var noneOptionLabel = React.useMemo(function () { return t('enum.none', i18nDefaults['enum.none'], { schema: schema, uischema: uischema, path: path }); }, [t, schema, uischema, path]);
-    return (React__default["default"].createElement(material.Select, { className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: function (ev) { return handleChange(path, ev.target.value || undefined); }, fullWidth: true }, [
+    return (React__default["default"].createElement(material.Select, { className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: function (ev) { return handleChange(path, ev.target.value || undefined); }, fullWidth: true, multiple: multiple || false }, [
         React__default["default"].createElement(material.MenuItem, { value: '', key: 'jsonforms.enum.none' },
             React__default["default"].createElement("em", null, noneOptionLabel)),
     ].concat(options.map(function (optionValue) { return (React__default["default"].createElement(material.MenuItem, { value: optionValue.value, key: optionValue.value }, optionValue.label)); }))));
@@ -817,7 +831,7 @@ var MaterialLabelRenderer = function (_a) {
 var MaterialLabelRenderer$1 = react.withJsonFormsLabelProps(MaterialLabelRenderer);
 
 var ArrayLayoutToolbar = React__default["default"].memo(function ArrayLayoutToolbar(_a) {
-    var label = _a.label, description = _a.description, errors = _a.errors, addItem = _a.addItem, path = _a.path, enabled = _a.enabled, createDefault = _a.createDefault, translations = _a.translations;
+    var label = _a.label, description = _a.description, errors = _a.errors, addItem = _a.addItem, path = _a.path, enabled = _a.enabled, createDefault = _a.createDefault, translations = _a.translations, disableAdd = _a.disableAdd;
     return (React__default["default"].createElement(material.Toolbar, { disableGutters: true },
         React__default["default"].createElement(material.Stack, null,
             React__default["default"].createElement(material.Grid, { container: true, alignItems: 'center', justifyContent: 'space-between' },
@@ -827,7 +841,7 @@ var ArrayLayoutToolbar = React__default["default"].memo(function ArrayLayoutTool
                             React__default["default"].createElement(material.Typography, { variant: 'h6' }, label)),
                         React__default["default"].createElement(material.Grid, { item: true }, errors.length !== 0 && (React__default["default"].createElement(material.Grid, { item: true },
                             React__default["default"].createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })))))),
-                enabled && (React__default["default"].createElement(material.Grid, { item: true },
+                enabled && !disableAdd && (React__default["default"].createElement(material.Grid, { item: true },
                     React__default["default"].createElement(material.Grid, { container: true },
                         React__default["default"].createElement(material.Grid, { item: true },
                             React__default["default"].createElement(material.Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
@@ -837,20 +851,20 @@ var ArrayLayoutToolbar = React__default["default"].memo(function ArrayLayoutTool
 });
 
 var ListWithDetailMasterItem = function (_a) {
-    var index = _a.index, childLabel = _a.childLabel, selected = _a.selected, enabled = _a.enabled, handleSelect = _a.handleSelect, removeItem = _a.removeItem, path = _a.path, translations = _a.translations;
+    var index = _a.index, childLabel = _a.childLabel, selected = _a.selected, enabled = _a.enabled, handleSelect = _a.handleSelect, removeItem = _a.removeItem, path = _a.path, translations = _a.translations, disableRemove = _a.disableRemove;
     return (React__default["default"].createElement(material.ListItem, { button: true, selected: selected, onClick: handleSelect(index) },
         React__default["default"].createElement(material.ListItemAvatar, null,
             React__default["default"].createElement(material.Avatar, { "aria-label": 'Index' }, index + 1)),
         React__default["default"].createElement(material.ListItemText, { primary: childLabel }),
-        enabled && (React__default["default"].createElement(material.ListItemSecondaryAction, null,
+        enabled && !disableRemove && (React__default["default"].createElement(material.ListItemSecondaryAction, null,
             React__default["default"].createElement(material.Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
                 React__default["default"].createElement(material.IconButton, { "aria-label": translations.removeAriaLabel, onClick: removeItem(path, index), size: 'large' },
-                    React__default["default"].createElement(iconsMaterial.Delete, null)))))));
+                    React__default["default"].createElement(DeleteIcon__default["default"], null)))))));
 };
 var ListWithDetailMasterItem$1 = react.withJsonFormsMasterListItemProps(ListWithDetailMasterItem);
 
 var MaterialListWithDetailRenderer = function (_a) {
-    var uischemas = _a.uischemas, schema = _a.schema, uischema = _a.uischema, path = _a.path, enabled = _a.enabled, errors = _a.errors, visible = _a.visible, label = _a.label, required = _a.required, removeItems = _a.removeItems, addItem = _a.addItem, data = _a.data, renderers = _a.renderers, cells = _a.cells, config = _a.config, rootSchema = _a.rootSchema, translations = _a.translations, description = _a.description;
+    var uischemas = _a.uischemas, schema = _a.schema, uischema = _a.uischema, path = _a.path, enabled = _a.enabled, errors = _a.errors, visible = _a.visible, label = _a.label, required = _a.required, removeItems = _a.removeItems, addItem = _a.addItem, data = _a.data, renderers = _a.renderers, cells = _a.cells, config = _a.config, rootSchema = _a.rootSchema, translations = _a.translations, description = _a.description, disableAdd = _a.disableAdd, disableRemove = _a.disableRemove;
     var _b = React.useState(undefined), selectedIndex = _b[0], setSelectedIndex = _b[1];
     var handleRemoveItem = React.useCallback(function (p, value) { return function () {
         removeItems(p, [value])();
@@ -867,6 +881,8 @@ var MaterialListWithDetailRenderer = function (_a) {
         return core.findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema);
     }, [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
+    var doDisableAdd = disableAdd || appliedUiSchemaOptions.disableAdd;
+    var doDisableRemove = disableRemove || appliedUiSchemaOptions.disableRemove;
     React__default["default"].useEffect(function () {
         setSelectedIndex(undefined);
     }, [schema]);
@@ -874,10 +890,10 @@ var MaterialListWithDetailRenderer = function (_a) {
         return null;
     }
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(ArrayLayoutToolbar, { translations: translations, label: core.computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: handleCreateDefaultValue }),
+        React__default["default"].createElement(ArrayLayoutToolbar, { translations: translations, label: core.computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: handleCreateDefaultValue, disableAdd: doDisableAdd }),
         React__default["default"].createElement(material.Grid, { container: true, direction: 'row', spacing: 2 },
             React__default["default"].createElement(material.Grid, { item: true, xs: 3 },
-                React__default["default"].createElement(material.List, null, data > 0 ? (map__default["default"](range__default["default"](data), function (index) { return (React__default["default"].createElement(ListWithDetailMasterItem$1, { index: index, path: path, schema: schema, enabled: enabled, handleSelect: handleListItemClick, removeItem: handleRemoveItem, selected: selectedIndex === index, key: index, uischema: foundUISchema, childLabelProp: appliedUiSchemaOptions.elementLabelProp, translations: translations })); })) : (React__default["default"].createElement("p", null, translations.noDataMessage)))),
+                React__default["default"].createElement(material.List, null, data > 0 ? (map__default["default"](range__default["default"](data), function (index) { return (React__default["default"].createElement(ListWithDetailMasterItem$1, { index: index, path: path, schema: schema, enabled: enabled, handleSelect: handleListItemClick, removeItem: handleRemoveItem, selected: selectedIndex === index, key: index, uischema: foundUISchema, childLabelProp: appliedUiSchemaOptions.elementLabelProp, translations: translations, disableRemove: doDisableRemove })); })) : (React__default["default"].createElement("p", null, translations.noDataMessage)))),
             React__default["default"].createElement(material.Grid, { item: true, xs: true }, selectedIndex !== undefined ? (React__default["default"].createElement(react.JsonFormsDispatch, { renderers: renderers, cells: cells, visible: visible, schema: schema, uischema: foundUISchema, path: core.composePaths(path, "".concat(selectedIndex)) })) : (React__default["default"].createElement(material.Typography, { variant: 'h6' }, translations.noSelection))))));
 };
 var materialListWithDetailTester = core.rankWith(4, core.and(core.uiTypeIs('ListWithDetail'), core.isObjectArray));
@@ -1337,7 +1353,7 @@ var ExpandPanelRendererComponent = function (props) {
             core.removeId(labelHtmlId);
         };
     }, [labelHtmlId]);
-    var enabled = props.enabled, childLabel = props.childLabel, childPath = props.childPath, index = props.index, expanded = props.expanded, moveDown = props.moveDown, moveUp = props.moveUp, enableMoveDown = props.enableMoveDown, enableMoveUp = props.enableMoveUp, handleExpansion = props.handleExpansion, removeItems = props.removeItems, path = props.path, rootSchema = props.rootSchema, schema = props.schema, uischema = props.uischema, uischemas = props.uischemas, renderers = props.renderers, cells = props.cells, config = props.config, translations = props.translations;
+    var enabled = props.enabled, childLabel = props.childLabel, childPath = props.childPath, index = props.index, expanded = props.expanded, moveDown = props.moveDown, moveUp = props.moveUp, enableMoveDown = props.enableMoveDown, enableMoveUp = props.enableMoveUp, handleExpansion = props.handleExpansion, removeItems = props.removeItems, path = props.path, rootSchema = props.rootSchema, schema = props.schema, uischema = props.uischema, uischemas = props.uischemas, renderers = props.renderers, cells = props.cells, config = props.config, translations = props.translations, disableRemove = props.disableRemove;
     var foundUISchema = React.useMemo(function () {
         return core.findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema);
     }, [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
@@ -1345,7 +1361,7 @@ var ExpandPanelRendererComponent = function (props) {
     var showSortButtons = appliedUiSchemaOptions.showSortButtons ||
         appliedUiSchemaOptions.showArrayLayoutSortButtons;
     return (React__default["default"].createElement(material.Accordion, { "aria-labelledby": labelHtmlId, expanded: expanded, onChange: handleExpansion(childPath) },
-        React__default["default"].createElement(material.AccordionSummary, { expandIcon: React__default["default"].createElement(iconsMaterial.ExpandMore, null) },
+        React__default["default"].createElement(material.AccordionSummary, { expandIcon: React__default["default"].createElement(ExpandMoreIcon__default["default"], null) },
             React__default["default"].createElement(material.Grid, { container: true, alignItems: 'center' },
                 React__default["default"].createElement(material.Grid, { item: true, xs: 7, md: 9 },
                     React__default["default"].createElement(material.Grid, { container: true, alignItems: 'center' },
@@ -1361,15 +1377,15 @@ var ExpandPanelRendererComponent = function (props) {
                                     React__default["default"].createElement(material.Grid, { item: true },
                                         React__default["default"].createElement(material.Tooltip, { id: 'tooltip-up', title: translations.up, placement: 'bottom', open: enableMoveUp ? undefined : false },
                                             React__default["default"].createElement(material.IconButton, { onClick: moveUp(path, index), style: iconStyle, disabled: !enableMoveUp, "aria-label": translations.upAriaLabel, size: 'large' },
-                                                React__default["default"].createElement(iconsMaterial.ArrowUpward, null)))),
+                                                React__default["default"].createElement(ArrowUpward__default["default"], null)))),
                                     React__default["default"].createElement(material.Grid, { item: true },
                                         React__default["default"].createElement(material.Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableMoveDown ? undefined : false },
                                             React__default["default"].createElement(material.IconButton, { onClick: moveDown(path, index), style: iconStyle, disabled: !enableMoveDown, "aria-label": translations.downAriaLabel, size: 'large' },
-                                                React__default["default"].createElement(iconsMaterial.ArrowDownward, null)))))) : (''),
-                                enabled && (React__default["default"].createElement(material.Grid, { item: true },
+                                                React__default["default"].createElement(ArrowDownward__default["default"], null)))))) : (''),
+                                enabled && !disableRemove && (React__default["default"].createElement(material.Grid, { item: true },
                                     React__default["default"].createElement(material.Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
                                         React__default["default"].createElement(material.IconButton, { onClick: removeItems(path, [index]), style: iconStyle, "aria-label": translations.removeAriaLabel, size: 'large' },
-                                            React__default["default"].createElement(iconsMaterial.Delete, null))))))))))),
+                                            React__default["default"].createElement(DeleteIcon__default["default"], null))))))))))),
         React__default["default"].createElement(material.AccordionDetails, null,
             React__default["default"].createElement(react.JsonFormsDispatch, { enabled: enabled, schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
 };
@@ -1384,7 +1400,7 @@ var ctxDispatchToExpandPanelProps = function (dispatch) { return ({
                     .reverse()
                     .forEach(function (s) { return array.splice(s, 1); });
                 return array;
-            }));
+            }, { type: 'REMOVE', indices: toDelete }));
         };
     }, [dispatch]),
     moveUp: React.useCallback(function (path, toMove) {
@@ -1393,6 +1409,9 @@ var ctxDispatchToExpandPanelProps = function (dispatch) { return ({
             dispatch(core.update(path, function (array) {
                 core.moveUp(array, toMove);
                 return array;
+            }, {
+                type: 'MOVE',
+                moves: [{ from: toMove, to: toMove - 1 }],
             }));
         };
     }, [dispatch]),
@@ -1402,6 +1421,9 @@ var ctxDispatchToExpandPanelProps = function (dispatch) { return ({
             dispatch(core.update(path, function (array) {
                 core.moveDown(array, toMove);
                 return array;
+            }, {
+                type: 'MOVE',
+                moves: [{ from: toMove, to: toMove + 1 }],
             }));
         };
     }, [dispatch]),
@@ -1551,12 +1573,14 @@ var MaterialArrayLayoutComponent = function (props) {
     var isExpanded = function (index) {
         return expanded === core.composePaths(props.path, "".concat(index));
     };
-    var enabled = props.enabled, data = props.data, path = props.path, schema = props.schema, uischema = props.uischema, errors = props.errors, addItem = props.addItem, renderers = props.renderers, cells = props.cells, label = props.label, required = props.required, rootSchema = props.rootSchema, config = props.config, uischemas = props.uischemas, translations = props.translations, description = props.description;
+    var enabled = props.enabled, data = props.data, path = props.path, schema = props.schema, uischema = props.uischema, errors = props.errors, addItem = props.addItem, renderers = props.renderers, cells = props.cells, label = props.label, required = props.required, rootSchema = props.rootSchema, config = props.config, uischemas = props.uischemas, translations = props.translations, description = props.description, disableAdd = props.disableAdd, disableRemove = props.disableRemove;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, props.uischema.options);
+    var doDisableAdd = disableAdd || appliedUiSchemaOptions.disableAdd;
+    var doDisableRemove = disableRemove || appliedUiSchemaOptions.disableRemove;
     return (React__default["default"].createElement("div", null,
-        React__default["default"].createElement(ArrayLayoutToolbar, { translations: translations, label: core.computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: innerCreateDefaultValue }),
+        React__default["default"].createElement(ArrayLayoutToolbar, { translations: translations, label: core.computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: innerCreateDefaultValue, disableAdd: doDisableAdd }),
         React__default["default"].createElement("div", null, data > 0 ? (map__default["default"](range__default["default"](data), function (index) {
-            return (React__default["default"].createElement(ExpandPanelRenderer$1, { enabled: enabled, index: index, expanded: isExpanded(index), schema: schema, path: path, handleExpansion: handleChange, uischema: uischema, renderers: renderers, cells: cells, key: index, rootSchema: rootSchema, enableMoveUp: index != 0, enableMoveDown: index < data - 1, config: config, childLabelProp: appliedUiSchemaOptions.elementLabelProp, uischemas: uischemas, translations: translations }));
+            return (React__default["default"].createElement(ExpandPanelRenderer$1, { enabled: enabled, index: index, expanded: isExpanded(index), schema: schema, path: path, handleExpansion: handleChange, uischema: uischema, renderers: renderers, cells: cells, key: index, rootSchema: rootSchema, enableMoveUp: index != 0, enableMoveDown: index < data - 1, config: config, childLabelProp: appliedUiSchemaOptions.elementLabelProp, uischemas: uischemas, translations: translations, disableRemove: doDisableRemove }));
         })) : (React__default["default"].createElement("p", null, translations.noDataMessage)))));
 };
 var MaterialArrayLayout$1 = React__default["default"].memo(MaterialArrayLayoutComponent);