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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/material-renderers",
-  "version": "3.2.1",
+  "version": "3.3.0-alpha.0",
   "description": "Material Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -73,8 +73,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "3.2.1",
-    "@jsonforms/react": "3.2.1",
+    "@jsonforms/core": "3.3.0-alpha.0",
+    "@jsonforms/react": "3.3.0-alpha.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.0",
     "@mui/x-date-pickers": "^6.0.0",
@@ -98,7 +98,7 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "copy-webpack-plugin": "^5.0.5",
     "enzyme": "^3.11.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
@@ -126,8 +126,8 @@
     "webpack": "^5.78.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
-    "@jsonforms/react": "3.2.1",
-    "@jsonforms/core": "3.2.1"
+    "@jsonforms/core": "3.3.0-alpha.0",
+    "@jsonforms/react": "3.3.0-alpha.0"
   },
   "scripts": {
     "build": "rollup -c rollup.config.js",

package/src/complex/MaterialEnumArrayRenderer.tsx

@@ -3,6 +3,7 @@ import {
   ControlProps,
   DispatchPropsOfMultiEnumControl,
   hasType,
+  isDescriptionHidden,
   JsonSchema,
   OwnPropsOfEnum,
   Paths,
@@ -11,6 +12,7 @@ import {
   resolveSchema,
   schemaMatches,
   schemaSubPathMatches,
+  showAsRequired,
   uiTypeIs,
 } from '@jsonforms/core';
 
@@ -21,15 +23,23 @@ import {
   FormControlLabel,
   FormGroup,
   FormHelperText,
+  FormLabel,
   Hidden,
 } from '@mui/material';
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
+import merge from 'lodash/merge';
+import { useFocus } from '../util';
 
 export const MaterialEnumArrayRenderer = ({
+  config,
+  id,
   schema,
   visible,
   errors,
+  description,
+  label,
+  required,
   path,
   options,
   data,
@@ -38,9 +48,34 @@ export const MaterialEnumArrayRenderer = ({
   handleChange: _handleChange,
   ...otherProps
 }: ControlProps & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl) => {
+  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 (
     <Hidden xsUp={!visible}>
-      <FormControl component='fieldset'>
+      <FormControl
+        component='fieldset'
+        fullWidth={!appliedUiSchemaOptions.trim}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      >
+        <FormLabel
+          error={!isValid}
+          component='legend'
+          required={showAsRequired(
+            required,
+            appliedUiSchemaOptions.hideRequiredAsterisk
+          )}
+        >
+          {label}
+        </FormLabel>
         <FormGroup row>
           {options.map((option: any, index: number) => {
             const optionPath = Paths.compose(path, `${index}`);
@@ -49,10 +84,11 @@ export const MaterialEnumArrayRenderer = ({
               : undefined;
             return (
               <FormControlLabel
-                id={option.value}
+                id={id + '-label-' + option.value}
                 key={option.value}
                 control={
                   <MuiCheckbox
+                    id={id + '-' + option.value}
                     key={'checkbox-' + option.value}
                     isValid={isEmpty(errors)}
                     path={optionPath}
@@ -73,7 +109,9 @@ export const MaterialEnumArrayRenderer = ({
             );
           })}
         </FormGroup>
-        <FormHelperText error>{errors}</FormHelperText>
+        <FormHelperText error={!isValid}>
+          {!isValid ? errors : showDescription ? description : null}
+        </FormHelperText>
       </FormControl>
     </Hidden>
   );

package/src/complex/MaterialTableControl.tsx

@@ -42,6 +42,7 @@ import {
   TableCell,
   TableHead,
   TableRow,
+  Tooltip,
   Typography,
 } from '@mui/material';
 import {
@@ -319,35 +320,55 @@ const NonEmptyRowComponent = ({
             {showSortButtons ? (
               <Fragment>
                 <Grid item>
-                  <IconButton
-                    aria-label={translations.upAriaLabel}
-                    onClick={moveUp}
-                    disabled={!enableUp}
-                    size='large'
+                  <Tooltip
+                    id='tooltip-up'
+                    title={translations.up}
+                    placement='bottom'
+                    open={enableUp ? undefined : false}
                   >
-                    <ArrowUpward />
-                  </IconButton>
+                    <IconButton
+                      aria-label={translations.upAriaLabel}
+                      onClick={moveUp}
+                      disabled={!enableUp}
+                      size='large'
+                    >
+                      <ArrowUpward />
+                    </IconButton>
+                  </Tooltip>
                 </Grid>
                 <Grid item>
-                  <IconButton
-                    aria-label={translations.downAriaLabel}
-                    onClick={moveDown}
-                    disabled={!enableDown}
-                    size='large'
+                  <Tooltip
+                    id='tooltip-down'
+                    title={translations.down}
+                    placement='bottom'
+                    open={enableDown ? undefined : false}
                   >
-                    <ArrowDownward />
-                  </IconButton>
+                    <IconButton
+                      aria-label={translations.downAriaLabel}
+                      onClick={moveDown}
+                      disabled={!enableDown}
+                      size='large'
+                    >
+                      <ArrowDownward />
+                    </IconButton>
+                  </Tooltip>
                 </Grid>
               </Fragment>
             ) : null}
             <Grid item>
-              <IconButton
-                aria-label={translations.removeAriaLabel}
-                onClick={() => openDeleteDialog(childPath, rowIndex)}
-                size='large'
+              <Tooltip
+                id='tooltip-remove'
+                title={translations.removeTooltip}
+                placement='bottom'
               >
-                <DeleteIcon />
-              </IconButton>
+                <IconButton
+                  aria-label={translations.removeAriaLabel}
+                  onClick={() => openDeleteDialog(childPath, rowIndex)}
+                  size='large'
+                >
+                  <DeleteIcon />
+                </IconButton>
+              </Tooltip>
             </Grid>
           </Grid>
         </NoBorderTableCell>

package/src/controls/MaterialDateControl.tsx

@@ -33,7 +33,7 @@ import {
   rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden } from '@mui/material';
+import { FormHelperText } from '@mui/material';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import {
@@ -69,6 +69,7 @@ export const MaterialDateControl = (props: ControlProps) => {
   );
 
   const [key, setKey] = useState<number>(0);
+  const [open, setOpen] = useState<boolean>(false);
 
   const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
   const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? defaultDateFormat;
@@ -103,46 +104,48 @@ export const MaterialDateControl = (props: ControlProps) => {
   );
   const value = getData(data, saveFormat);
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <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,
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <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',
             },
-          }}
-        />
-        <FormHelperText error={!isValid && !showDescription}>
-          {firstFormHelperText}
-        </FormHelperText>
-        <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
-      </LocalizationProvider>
-    </Hidden>
+            InputLabelProps: data ? { shrink: true } : undefined,
+            onFocus: onFocus,
+            onBlur: onBlurHandler,
+          },
+        }}
+      />
+      <FormHelperText error={!isValid && !showDescription}>
+        {firstFormHelperText}
+      </FormHelperText>
+      <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
+    </LocalizationProvider>
   );
 };
 

package/src/controls/MaterialDateTimeControl.tsx

@@ -33,7 +33,7 @@ import {
   rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden } from '@mui/material';
+import { FormHelperText } from '@mui/material';
 import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import {
@@ -74,6 +74,7 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
     appliedUiSchemaOptions.dateTimeSaveFormat ?? defaultDateTimeFormat;
 
   const [key, setKey] = useState<number>(0);
+  const [open, setOpen] = useState<boolean>(false);
 
   const views = appliedUiSchemaOptions.views ?? [
     'year',
@@ -110,47 +111,48 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
   );
   const value = getData(data, saveFormat);
 
+  if (!visible) {
+    return null;
+  }
   return (
-    <Hidden xsUp={!visible}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <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,
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <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',
             },
-          }}
-        />
-        <FormHelperText error={!isValid && !showDescription}>
-          {firstFormHelperText}
-        </FormHelperText>
-        <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
-      </LocalizationProvider>
-    </Hidden>
+            InputLabelProps: data ? { shrink: true } : undefined,
+            onFocus: onFocus,
+            onBlur: onBlurHandler,
+          },
+        }}
+      />
+      <FormHelperText error={!isValid && !showDescription}>
+        {firstFormHelperText}
+      </FormHelperText>
+      <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
+    </LocalizationProvider>
   );
 };
 

package/src/controls/MaterialRadioGroup.tsx

@@ -45,7 +45,6 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
   const [focused, onFocus, onBlur] = useFocus();
   const {
     config,
-    id,
     label,
     required,
     description,
@@ -69,15 +68,14 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
   return (
     <Hidden xsUp={!visible}>
       <FormControl
-        component={'fieldset' as 'div'}
+        component='fieldset'
         fullWidth={!appliedUiSchemaOptions.trim}
         onFocus={onFocus}
         onBlur={onBlur}
       >
         <FormLabel
-          htmlFor={id}
           error={!isValid}
-          component={'legend' as 'label'}
+          component='legend'
           required={showAsRequired(
             required,
             appliedUiSchemaOptions.hideRequiredAsterisk

package/src/controls/MaterialSliderControl.tsx

@@ -101,7 +101,7 @@ export const MaterialSliderControl = (props: ControlProps) => {
         <FormLabel
           htmlFor={id}
           error={!isValid}
-          component={'legend' as 'label'}
+          component='legend'
           required={showAsRequired(
             required,
             appliedUiSchemaOptions.hideRequiredAsterisk

package/src/controls/MaterialTimeControl.tsx

@@ -33,7 +33,7 @@ import {
   defaultTimeFormat,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden } from '@mui/material';
+import { FormHelperText } from '@mui/material';
 import { TimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import {
@@ -63,6 +63,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
   const isValid = errors.length === 0;
 
   const [key, setKey] = useState<number>(0);
+  const [open, setOpen] = useState<boolean>(false);
 
   const showDescription = !isDescriptionHidden(
     visible,
@@ -104,47 +105,48 @@ export const MaterialTimeControl = (props: ControlProps) => {
   );
   const value = getData(data, saveFormat);
 
+  if (!visible) {
+    return null;
+  }
   return (
-    <Hidden xsUp={!visible}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <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,
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <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',
             },
-          }}
-        />
-        <FormHelperText error={!isValid && !showDescription}>
-          {firstFormHelperText}
-        </FormHelperText>
-        <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
-      </LocalizationProvider>
-    </Hidden>
+            InputLabelProps: data ? { shrink: true } : undefined,
+            onFocus: onFocus,
+            onBlur: onBlurHandler,
+          },
+        }}
+      />
+      <FormHelperText error={!isValid && !showDescription}>
+        {firstFormHelperText}
+      </FormHelperText>
+      <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
+    </LocalizationProvider>
   );
 };
 

package/src/layouts/ExpandPanelRenderer.tsx

@@ -39,6 +39,7 @@ import {
   Avatar,
   Grid,
   IconButton,
+  Tooltip,
 } from '@mui/material';
 import {
   ExpandMore as ExpandMoreIcon,
@@ -169,26 +170,40 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                   {showSortButtons && enabled ? (
                     <Fragment>
                       <Grid item>
-                        <IconButton
-                          onClick={moveUp(path, index)}
-                          style={iconStyle}
-                          disabled={!enableMoveUp}
-                          aria-label={translations.upAriaLabel}
-                          size='large'
+                        <Tooltip
+                          id='tooltip-up'
+                          title={translations.up}
+                          placement='bottom'
+                          open={enableMoveUp ? undefined : false}
                         >
-                          <ArrowUpward />
-                        </IconButton>
+                          <IconButton
+                            onClick={moveUp(path, index)}
+                            style={iconStyle}
+                            disabled={!enableMoveUp}
+                            aria-label={translations.upAriaLabel}
+                            size='large'
+                          >
+                            <ArrowUpward />
+                          </IconButton>
+                        </Tooltip>
                       </Grid>
                       <Grid item>
-                        <IconButton
-                          onClick={moveDown(path, index)}
-                          style={iconStyle}
-                          disabled={!enableMoveDown}
-                          aria-label={translations.downAriaLabel}
-                          size='large'
+                        <Tooltip
+                          id='tooltip-down'
+                          title={translations.down}
+                          placement='bottom'
+                          open={enableMoveDown ? undefined : false}
                         >
-                          <ArrowDownward />
-                        </IconButton>
+                          <IconButton
+                            onClick={moveDown(path, index)}
+                            style={iconStyle}
+                            disabled={!enableMoveDown}
+                            aria-label={translations.downAriaLabel}
+                            size='large'
+                          >
+                            <ArrowDownward />
+                          </IconButton>
+                        </Tooltip>
                       </Grid>
                     </Fragment>
                   ) : (
@@ -196,14 +211,20 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                   )}
                   {enabled && (
                     <Grid item>
-                      <IconButton
-                        onClick={removeItems(path, [index])}
-                        style={iconStyle}
-                        aria-label={translations.removeAriaLabel}
-                        size='large'
+                      <Tooltip
+                        id='tooltip-remove'
+                        title={translations.removeTooltip}
+                        placement='bottom'
                       >
-                        <DeleteIcon />
-                      </IconButton>
+                        <IconButton
+                          onClick={removeItems(path, [index])}
+                          style={iconStyle}
+                          aria-label={translations.removeAriaLabel}
+                          size='large'
+                        >
+                          <DeleteIcon />
+                        </IconButton>
+                      </Tooltip>
                     </Grid>
                   )}
                 </Grid>