@jsonforms/material-renderers 3.2.0 → 3.3.0-alpha.0

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

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useMemo, Fragment, useEffect } from 'react';
-import { Hidden, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, TableCell, styled as styled$1, Badge, Tooltip, TableRow, Stack, Grid, Typography, FormHelperText, IconButton, Table, TableHead, TableBody, Autocomplete, TextField, Checkbox, useThemeProps, Input, FilledInput, OutlinedInput, useTheme, InputAdornment, Select, MenuItem, Switch, FormControl, FormGroup, FormControlLabel, Toolbar, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, FormLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
-import { rankWith, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, Generate, isLayout, isAnyOfControl, createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, or, isObjectArrayControl, isPrimitiveArrayControl, isDescriptionHidden, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, resolveSchema, isObjectControl, findUISchema, isOneOfControl, isObjectArray, computeLabel, composePaths, showAsRequired, isBooleanControl, optionIs, isDateControl, defaultDateFormat, isDateTimeControl, defaultDateTimeFormat, isEnumControl, isIntegerControl, isTimeControl, isNumberControl, isOneOfEnumControl, isRangeControl, isStringControl, defaultTimeFormat, createId, removeId, update, moveUp, moveDown, getFirstPrimitiveProp, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
+import { Hidden, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, TableCell, styled as styled$1, Badge, Tooltip, TableRow, Stack, Grid, Typography, FormHelperText, IconButton, Table, TableHead, TableBody, Autocomplete, TextField, Checkbox, useThemeProps, Input, FilledInput, OutlinedInput, useTheme, InputAdornment, Select, MenuItem, Switch, FormControl, FormLabel, FormGroup, FormControlLabel, Toolbar, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
+import { rankWith, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, Generate, isLayout, isAnyOfControl, createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, or, isObjectArrayControl, isPrimitiveArrayControl, isDescriptionHidden, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, resolveSchema, showAsRequired, isObjectControl, findUISchema, isOneOfControl, isObjectArray, computeLabel, composePaths, isBooleanControl, optionIs, isDateControl, defaultDateFormat, isDateTimeControl, defaultDateTimeFormat, isEnumControl, isIntegerControl, isTimeControl, isNumberControl, isOneOfEnumControl, isRangeControl, isStringControl, defaultTimeFormat, createId, removeId, update, moveUp, moveDown, getFirstPrimitiveProp, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
 import { withJsonFormsAllOfProps, JsonFormsDispatch, withJsonFormsAnyOfProps, DispatchCell, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsMultiEnumProps, withJsonFormsDetailProps, withJsonFormsOneOfProps, withJsonFormsLabelProps, withJsonFormsMasterListItemProps, withJsonFormsControlProps, Control, withJsonFormsEnumProps, withTranslateProps, withJsonFormsOneOfEnumProps, withJsonFormsContext, withJsonFormsLayoutProps, withJsonFormsCellProps, withJsonFormsEnumCellProps, withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
 import omit from 'lodash/omit';
 import isEmpty from 'lodash/isEmpty';
@@ -222,14 +222,17 @@ const NonEmptyRowComponent = ({ childPath, schema, rowIndex, openDeleteDialog, m
             React.createElement(Grid, { container: true, direction: 'row', justifyContent: 'flex-end', alignItems: 'center' },
                 showSortButtons ? (React.createElement(Fragment, null,
                     React.createElement(Grid, { item: true },
-                        React.createElement(IconButton, { "aria-label": translations.upAriaLabel, onClick: moveUp, disabled: !enableUp, size: 'large' },
-                            React.createElement(ArrowUpward, null))),
+                        React.createElement(Tooltip, { id: 'tooltip-up', title: translations.up, placement: 'bottom', open: enableUp ? undefined : false },
+                            React.createElement(IconButton, { "aria-label": translations.upAriaLabel, onClick: moveUp, disabled: !enableUp, size: 'large' },
+                                React.createElement(ArrowUpward, null)))),
                     React.createElement(Grid, { item: true },
-                        React.createElement(IconButton, { "aria-label": translations.downAriaLabel, onClick: moveDown, disabled: !enableDown, size: 'large' },
-                            React.createElement(ArrowDownward, null))))) : null,
+                        React.createElement(Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableDown ? undefined : false },
+                            React.createElement(IconButton, { "aria-label": translations.downAriaLabel, onClick: moveDown, disabled: !enableDown, size: 'large' },
+                                React.createElement(ArrowDownward, null)))))) : null,
                 React.createElement(Grid, { item: true },
-                    React.createElement(IconButton, { "aria-label": translations.removeAriaLabel, onClick: () => openDeleteDialog(childPath, rowIndex), size: 'large' },
-                        React.createElement(Delete, null)))))) : null));
+                    React.createElement(Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
+                        React.createElement(IconButton, { "aria-label": translations.removeAriaLabel, onClick: () => openDeleteDialog(childPath, rowIndex), size: 'large' },
+                            React.createElement(Delete, null))))))) : null));
 };
 const NonEmptyRow = React.memo(NonEmptyRowComponent);
 const TableRows = ({ data, path, schema, openDeleteDialog, moveUp, moveDown, uischema, config, enabled, cells, translations, }) => {
@@ -327,7 +330,7 @@ const MuiAutocomplete = (props) => {
                 handleChange(path, newValue?.value);
             }, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
                 setInputValue(newInputValue);
-            }, autoHighlight: true, autoSelect: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || ((option) => option?.label), freeSolo: false, renderInput: (params) => {
+            }, autoHighlight: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || ((option) => option?.label), freeSolo: false, renderInput: (params) => {
                 return (React.createElement(TextField, { label: label, type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled, ...params, id: id, required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, focused: focused }));
             }, renderOption: renderOption, filterOptions: filterOptions }),
         React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -420,7 +423,7 @@ const variantToInput = {
     filled: FilledInput,
     outlined: OutlinedInput,
 };
-const defaultInputVariant = 'standard';
+const defaultInputVariant = 'outlined';
 function useInputVariant() {
     const { variant = defaultInputVariant } = useThemeProps({
         props: {},
@@ -562,19 +565,24 @@ const MuiToggle = React.memo(function MuiToggle(props) {
     return (React.createElement(Switch, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
 });
 
-const MaterialEnumArrayRenderer = ({ schema, visible, errors, path, options, data, addItem, removeItem, handleChange: _handleChange, ...otherProps }) => {
+const MaterialEnumArrayRenderer = ({ config, id, schema, visible, errors, description, label, required, path, options, data, addItem, removeItem, handleChange: _handleChange, ...otherProps }) => {
+    const [focused, onFocus, onBlur] = useFocus();
+    const isValid = errors.length === 0;
+    const appliedUiSchemaOptions = merge({}, config, otherProps.uischema.options);
+    const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(FormControl, { component: 'fieldset' },
+        React.createElement(FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
+            React.createElement(FormLabel, { error: !isValid, component: 'legend', required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
             React.createElement(FormGroup, { row: true }, options.map((option, index) => {
                 const optionPath = Paths.compose(path, `${index}`);
                 const checkboxValue = data?.includes(option.value)
                     ? option.value
                     : undefined;
-                return (React.createElement(FormControlLabel, { id: option.value, key: option.value, control: React.createElement(MuiCheckbox, { key: 'checkbox-' + option.value, isValid: isEmpty(errors), path: optionPath, handleChange: (_childPath, newValue) => newValue
+                return (React.createElement(FormControlLabel, { id: id + '-label-' + option.value, key: option.value, control: React.createElement(MuiCheckbox, { id: id + '-' + option.value, key: 'checkbox-' + option.value, isValid: isEmpty(errors), path: optionPath, handleChange: (_childPath, newValue) => newValue
                             ? addItem(path, option.value)
                             : removeItem(path, option.value), data: checkboxValue, errors: errors, schema: schema, visible: visible, ...otherProps }), label: option.label }));
             })),
-            React.createElement(FormHelperText, { error: true }, errors))));
+            React.createElement(FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
 };
 const hasOneOfItems = (schema) => schema.oneOf !== undefined &&
     schema.oneOf.length > 0 &&
@@ -855,6 +863,7 @@ const MaterialDateControl = (props) => {
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     const [key, setKey] = useState(0);
+    const [open, setOpen] = useState(false);
     const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
     const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? defaultDateFormat;
     const views = appliedUiSchemaOptions.views ?? ['year', 'day'];
@@ -868,30 +877,30 @@ const MaterialDateControl = (props) => {
     const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
     const onBlurHandler = useMemo(() => createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur), [path, handleChange, format, saveFormat, updateChild]);
     const value = getData(data, saveFormat);
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-            React.createElement(DatePicker, { key: key, label: label, value: value, onAccept: onChange, format: format, views: views, disabled: !enabled, slotProps: {
-                    actionBar: ({ wrapperVariant }) => ({
-                        actions: wrapperVariant === 'desktop'
-                            ? []
-                            : ['clear', 'cancel', 'accept'],
-                    }),
-                    textField: {
-                        id: id + '-input',
-                        required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-                        autoFocus: appliedUiSchemaOptions.focus,
-                        error: !isValid,
-                        fullWidth: !appliedUiSchemaOptions.trim,
-                        inputProps: {
-                            type: 'text',
-                        },
-                        InputLabelProps: data ? { shrink: true } : undefined,
-                        onFocus: onFocus,
-                        onBlur: onBlurHandler,
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
+        React.createElement(DatePicker, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), key: key, label: label, value: value, onAccept: onChange, format: format, views: views, disabled: !enabled, slotProps: {
+                actionBar: ({ wrapperVariant }) => ({
+                    actions: wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+                }),
+                textField: {
+                    id: id + '-input',
+                    required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
+                    autoFocus: appliedUiSchemaOptions.focus,
+                    error: !isValid,
+                    fullWidth: !appliedUiSchemaOptions.trim,
+                    inputProps: {
+                        type: 'text',
                     },
-                } }),
-            React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
-            React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
+                    InputLabelProps: data ? { shrink: true } : undefined,
+                    onFocus: onFocus,
+                    onBlur: onBlurHandler,
+                },
+            } }),
+        React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
+        React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText)));
 };
 const materialDateControlTester = rankWith(4, isDateControl);
 var MaterialDateControl$1 = withJsonFormsControlProps(MaterialDateControl);
@@ -905,6 +914,7 @@ const MaterialDateTimeControl = (props) => {
     const format = appliedUiSchemaOptions.dateTimeFormat ?? 'YYYY-MM-DD HH:mm';
     const saveFormat = appliedUiSchemaOptions.dateTimeSaveFormat ?? defaultDateTimeFormat;
     const [key, setKey] = useState(0);
+    const [open, setOpen] = useState(false);
     const views = appliedUiSchemaOptions.views ?? [
         'year',
         'day',
@@ -921,30 +931,30 @@ const MaterialDateTimeControl = (props) => {
     const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
     const onBlurHandler = useMemo(() => createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur), [path, handleChange, format, saveFormat, updateChild]);
     const value = getData(data, saveFormat);
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-            React.createElement(DateTimePicker, { key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
-                    actionBar: ({ wrapperVariant }) => ({
-                        actions: wrapperVariant === 'desktop'
-                            ? []
-                            : ['clear', 'cancel', 'accept'],
-                    }),
-                    textField: {
-                        id: id + '-input',
-                        required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-                        autoFocus: appliedUiSchemaOptions.focus,
-                        error: !isValid,
-                        fullWidth: !appliedUiSchemaOptions.trim,
-                        inputProps: {
-                            type: 'text',
-                        },
-                        InputLabelProps: data ? { shrink: true } : undefined,
-                        onFocus: onFocus,
-                        onBlur: onBlurHandler,
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
+        React.createElement(DateTimePicker, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
+                actionBar: ({ wrapperVariant }) => ({
+                    actions: wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+                }),
+                textField: {
+                    id: id + '-input',
+                    required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
+                    autoFocus: appliedUiSchemaOptions.focus,
+                    error: !isValid,
+                    fullWidth: !appliedUiSchemaOptions.trim,
+                    inputProps: {
+                        type: 'text',
                     },
-                } }),
-            React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
-            React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
+                    InputLabelProps: data ? { shrink: true } : undefined,
+                    onFocus: onFocus,
+                    onBlur: onBlurHandler,
+                },
+            } }),
+        React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
+        React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText)));
 };
 const materialDateTimeControlTester = rankWith(2, isDateTimeControl);
 var MaterialDateTimeControl$1 = withJsonFormsControlProps(MaterialDateTimeControl);
@@ -991,13 +1001,13 @@ var MaterialOneOfEnumControl$1 = withJsonFormsOneOfEnumProps(withTranslateProps(
 
 const MaterialRadioGroup = (props) => {
     const [focused, onFocus, onBlur] = useFocus();
-    const { config, id, label, required, description, errors, data, visible, options, handleChange, path, enabled, } = props;
+    const { config, label, required, description, errors, data, visible, options, handleChange, path, enabled, } = props;
     const isValid = errors.length === 0;
     const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
-            React.createElement(FormLabel, { htmlFor: id, error: !isValid, component: 'legend', required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
+            React.createElement(FormLabel, { error: !isValid, component: 'legend', required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
             React.createElement(RadioGroup, { value: props.data ?? '', row: true }, options.map((option) => (React.createElement(FormControlLabel, { value: option.value, key: option.label, control: React.createElement(Radio, { checked: data === option.value, onChange: () => handleChange(path, option.value) }), label: option.label, disabled: !enabled })))),
             React.createElement(FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
 };
@@ -1059,6 +1069,7 @@ const MaterialTimeControl = (props) => {
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const isValid = errors.length === 0;
     const [key, setKey] = useState(0);
+    const [open, setOpen] = useState(false);
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     const format = appliedUiSchemaOptions.timeFormat ?? 'HH:mm';
     const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? defaultTimeFormat;
@@ -1073,30 +1084,30 @@ const MaterialTimeControl = (props) => {
     const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
     const onBlurHandler = useMemo(() => createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur), [path, handleChange, format, saveFormat, updateChild]);
     const value = getData(data, saveFormat);
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-            React.createElement(TimePicker, { key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
-                    actionBar: ({ wrapperVariant }) => ({
-                        actions: wrapperVariant === 'desktop'
-                            ? []
-                            : ['clear', 'cancel', 'accept'],
-                    }),
-                    textField: {
-                        id: id + '-input',
-                        required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-                        autoFocus: appliedUiSchemaOptions.focus,
-                        error: !isValid,
-                        fullWidth: !appliedUiSchemaOptions.trim,
-                        inputProps: {
-                            type: 'text',
-                        },
-                        InputLabelProps: data ? { shrink: true } : undefined,
-                        onFocus: onFocus,
-                        onBlur: onBlurHandler,
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
+        React.createElement(TimePicker, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
+                actionBar: ({ wrapperVariant }) => ({
+                    actions: wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+                }),
+                textField: {
+                    id: id + '-input',
+                    required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
+                    autoFocus: appliedUiSchemaOptions.focus,
+                    error: !isValid,
+                    fullWidth: !appliedUiSchemaOptions.trim,
+                    inputProps: {
+                        type: 'text',
                     },
-                } }),
-            React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
-            React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
+                    InputLabelProps: data ? { shrink: true } : undefined,
+                    onFocus: onFocus,
+                    onBlur: onBlurHandler,
+                },
+            } }),
+        React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
+        React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText)));
 };
 const materialTimeControlTester = rankWith(4, isTimeControl);
 var MaterialTimeControl$1 = withJsonFormsControlProps(MaterialTimeControl);
@@ -1129,14 +1140,17 @@ const ExpandPanelRendererComponent = (props) => {
                             React.createElement(Grid, { container: true, direction: 'row', justifyContent: 'center', alignItems: 'center' },
                                 showSortButtons && enabled ? (React.createElement(Fragment, null,
                                     React.createElement(Grid, { item: true },
-                                        React.createElement(IconButton, { onClick: moveUp(path, index), style: iconStyle, disabled: !enableMoveUp, "aria-label": translations.upAriaLabel, size: 'large' },
-                                            React.createElement(ArrowUpward, null))),
+                                        React.createElement(Tooltip, { id: 'tooltip-up', title: translations.up, placement: 'bottom', open: enableMoveUp ? undefined : false },
+                                            React.createElement(IconButton, { onClick: moveUp(path, index), style: iconStyle, disabled: !enableMoveUp, "aria-label": translations.upAriaLabel, size: 'large' },
+                                                React.createElement(ArrowUpward, null)))),
                                     React.createElement(Grid, { item: true },
-                                        React.createElement(IconButton, { onClick: moveDown(path, index), style: iconStyle, disabled: !enableMoveDown, "aria-label": translations.downAriaLabel, size: 'large' },
-                                            React.createElement(ArrowDownward, null))))) : (''),
+                                        React.createElement(Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableMoveDown ? undefined : false },
+                                            React.createElement(IconButton, { onClick: moveDown(path, index), style: iconStyle, disabled: !enableMoveDown, "aria-label": translations.downAriaLabel, size: 'large' },
+                                                React.createElement(ArrowDownward, null)))))) : (''),
                                 enabled && (React.createElement(Grid, { item: true },
-                                    React.createElement(IconButton, { onClick: removeItems(path, [index]), style: iconStyle, "aria-label": translations.removeAriaLabel, size: 'large' },
-                                        React.createElement(Delete, null)))))))))),
+                                    React.createElement(Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
+                                        React.createElement(IconButton, { onClick: removeItems(path, [index]), style: iconStyle, "aria-label": translations.removeAriaLabel, size: 'large' },
+                                            React.createElement(Delete, null))))))))))),
         React.createElement(AccordionDetails, null,
             React.createElement(JsonFormsDispatch, { enabled: enabled, schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
 };
@@ -1284,7 +1298,7 @@ const MaterialArrayLayoutComponent = (props) => {
         React.createElement(ArrayLayoutToolbar, { translations: translations, label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: innerCreateDefaultValue }),
         React.createElement("div", null, data > 0 ? (map(range(data), (index) => {
             return (React.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 }));
-        })) : (React.createElement("p", null, "No data")))));
+        })) : (React.createElement("p", null, translations.noDataMessage)))));
 };
 const MaterialArrayLayout$1 = React.memo(MaterialArrayLayoutComponent);