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

package/lib/layouts/ExpandPanelRenderer.d.ts

@@ -1,4 +1,5 @@
 import React, { ComponentType, Dispatch, ReducerAction } from 'react';
+import { JsonFormsStateContext } from '@jsonforms/react';
 import { ControlElement, JsonFormsRendererRegistryEntry, JsonSchema, JsonFormsCellRendererRegistryEntry, JsonFormsUISchemaRegistryEntry, ArrayTranslations } from '@jsonforms/core';
 interface OwnPropsOfExpandPanel {
     enabled: boolean;
@@ -48,7 +49,10 @@ export declare const ctxDispatchToExpandPanelProps: (dispatch: Dispatch<ReducerA
  * @param ownProps any own props
  * @returns {StatePropsOfControl} state props for a control
  */
-export declare const withContextToExpandPanelProps: (Component: ComponentType<ExpandPanelProps>) => ComponentType<OwnPropsOfExpandPanel>;
+export declare const withContextToExpandPanelProps: (Component: ComponentType<ExpandPanelProps>) => ComponentType<{
+    ctx: JsonFormsStateContext;
+    props: OwnPropsOfExpandPanel;
+}>;
 export declare const withJsonFormsExpandPanelProps: (Component: ComponentType<ExpandPanelProps>) => ComponentType<OwnPropsOfExpandPanel>;
 declare const _default: React.ComponentType<OwnPropsOfExpandPanel>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/material-renderers",
-  "version": "3.3.0-alpha.0",
+  "version": "3.3.0-beta.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.3.0-alpha.0",
-    "@jsonforms/react": "3.3.0-alpha.0",
+    "@jsonforms/core": "3.3.0-beta.0",
+    "@jsonforms/react": "3.3.0-beta.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.0",
     "@mui/x-date-pickers": "^6.0.0",
@@ -126,8 +126,8 @@
     "webpack": "^5.78.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
-    "@jsonforms/core": "3.3.0-alpha.0",
-    "@jsonforms/react": "3.3.0-alpha.0"
+    "@jsonforms/core": "3.3.0-beta.0",
+    "@jsonforms/react": "3.3.0-beta.0"
   },
   "scripts": {
     "build": "rollup -c rollup.config.js",

package/src/additional/ListWithDetailMasterItem.tsx

@@ -31,6 +31,7 @@ import {
   ListItemAvatar,
   ListItemSecondaryAction,
   ListItemText,
+  Tooltip,
 } from '@mui/material';
 import { Delete as DeleteIcon } from '@mui/icons-material';
 import React from 'react';
@@ -53,13 +54,19 @@ export const ListWithDetailMasterItem = ({
       <ListItemText primary={childLabel} />
       {enabled && (
         <ListItemSecondaryAction>
-          <IconButton
-            aria-label={translations.removeAriaLabel}
-            onClick={removeItem(path, index)}
-            size='large'
+          <Tooltip
+            id='tooltip-remove'
+            title={translations.removeTooltip}
+            placement='bottom'
           >
-            <DeleteIcon />
-          </IconButton>
+            <IconButton
+              aria-label={translations.removeAriaLabel}
+              onClick={removeItem(path, index)}
+              size='large'
+            >
+              <DeleteIcon />
+            </IconButton>
+          </Tooltip>
         </ListItemSecondaryAction>
       )}
     </ListItem>

package/src/additional/MaterialLabelRenderer.tsx

@@ -25,7 +25,7 @@
 import React from 'react';
 import { LabelProps, RankedTester, rankWith, uiTypeIs } from '@jsonforms/core';
 import { withJsonFormsLabelProps } from '@jsonforms/react';
-import { Hidden, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 
 /**
  * Default tester for a label.
@@ -40,11 +40,10 @@ export const materialLabelRendererTester: RankedTester = rankWith(
  * Default renderer for a label.
  */
 export const MaterialLabelRenderer = ({ text, visible }: LabelProps) => {
-  return (
-    <Hidden xsUp={!visible}>
-      <Typography variant='h6'>{text}</Typography>
-    </Hidden>
-  );
+  if (!visible) {
+    return null;
+  }
+  return <Typography variant='h6'>{text}</Typography>;
 };
 
 export default withJsonFormsLabelProps(MaterialLabelRenderer);

package/src/additional/MaterialListWithDetailRenderer.tsx

@@ -38,7 +38,7 @@ import {
   JsonFormsDispatch,
   withJsonFormsArrayLayoutProps,
 } from '@jsonforms/react';
-import { Grid, Hidden, List, Typography } from '@mui/material';
+import { Grid, List, Typography } from '@mui/material';
 import map from 'lodash/map';
 import range from 'lodash/range';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -105,8 +105,12 @@ export const MaterialListWithDetailRenderer = ({
     setSelectedIndex(undefined);
   }, [schema]);
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
+    <>
       <ArrayLayoutToolbar
         translations={translations}
         label={computeLabel(
@@ -135,11 +139,13 @@ export const MaterialListWithDetailRenderer = ({
                   removeItem={handleRemoveItem}
                   selected={selectedIndex === index}
                   key={index}
+                  uischema={foundUISchema}
+                  childLabelProp={appliedUiSchemaOptions.elementLabelProp}
                   translations={translations}
                 />
               ))
             ) : (
-              <p>No data</p>
+              <p>{translations.noDataMessage}</p>
             )}
           </List>
         </Grid>
@@ -158,7 +164,7 @@ export const MaterialListWithDetailRenderer = ({
           )}
         </Grid>
       </Grid>
-    </Hidden>
+    </>
   );
 };
 

package/src/complex/MaterialAllOfRenderer.tsx

@@ -23,7 +23,6 @@
   THE SOFTWARE.
 */
 import React from 'react';
-import { Hidden } from '@mui/material';
 
 import {
   createCombinatorRenderInfos,
@@ -51,17 +50,20 @@ export const MaterialAllOfRenderer = ({
     uischema.scope,
     path
   );
+
+  if (!visible) {
+    return null;
+  }
+
   if (delegateUISchema) {
     return (
-      <Hidden xsUp={!visible}>
-        <JsonFormsDispatch
-          schema={schema}
-          uischema={delegateUISchema}
-          path={path}
-          renderers={renderers}
-          cells={cells}
-        />
-      </Hidden>
+      <JsonFormsDispatch
+        schema={schema}
+        uischema={delegateUISchema}
+        path={path}
+        renderers={renderers}
+        cells={cells}
+      />
     );
   }
   const allOfRenderInfos = createCombinatorRenderInfos(
@@ -74,7 +76,7 @@ export const MaterialAllOfRenderer = ({
   );
 
   return (
-    <Hidden xsUp={!visible}>
+    <>
       {allOfRenderInfos.map((allOfRenderInfo, allOfIndex) => (
         <JsonFormsDispatch
           key={allOfIndex}
@@ -85,7 +87,7 @@ export const MaterialAllOfRenderer = ({
           cells={cells}
         />
       ))}
-    </Hidden>
+    </>
   );
 };
 

package/src/complex/MaterialAnyOfRenderer.tsx

@@ -34,7 +34,7 @@ import {
   rankWith,
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAnyOfProps } from '@jsonforms/react';
-import { Hidden, Tab, Tabs } from '@mui/material';
+import { Tab, Tabs } from '@mui/material';
 import CombinatorProperties from './CombinatorProperties';
 import isEmpty from 'lodash/isEmpty';
 import { TabSwitchConfirmDialog } from './TabSwitchConfirmDialog';
@@ -104,8 +104,12 @@ export const MaterialAnyOfRenderer = ({
     uischemas
   );
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
+    <>
       <CombinatorProperties
         schema={schema}
         combinatorKeyword={anyOf}
@@ -137,7 +141,7 @@ export const MaterialAnyOfRenderer = ({
         open={confirmDialogOpen}
         handleClose={handleClose}
       />
-    </Hidden>
+    </>
   );
 };
 

package/src/complex/MaterialArrayControlRenderer.tsx

@@ -33,7 +33,6 @@ import {
 } from '@jsonforms/core';
 import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
 import { MaterialTableControl } from './MaterialTableControl';
-import { Hidden } from '@mui/material';
 import { DeleteDialog } from './DeleteDialog';
 
 export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
@@ -58,8 +57,12 @@ export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
   }, [setOpen, path, rowData]);
   const deleteClose = useCallback(() => setOpen(false), [setOpen]);
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
+    <>
       <MaterialTableControl {...props} openDeleteDialog={openDeleteDialog} />
       <DeleteDialog
         open={open}
@@ -71,7 +74,7 @@ export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
         title={props.translations.deleteDialogTitle}
         message={props.translations.deleteDialogMessage}
       />
-    </Hidden>
+    </>
   );
 };
 

package/src/complex/MaterialEnumArrayRenderer.tsx

@@ -24,7 +24,6 @@ import {
   FormGroup,
   FormHelperText,
   FormLabel,
-  Hidden,
 } from '@mui/material';
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
@@ -58,62 +57,64 @@ export const MaterialEnumArrayRenderer = ({
     appliedUiSchemaOptions.showUnfocusedDescription
   );
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
-      <FormControl
-        component='fieldset'
-        fullWidth={!appliedUiSchemaOptions.trim}
-        onFocus={onFocus}
-        onBlur={onBlur}
+    <FormControl
+      component='fieldset'
+      fullWidth={!appliedUiSchemaOptions.trim}
+      onFocus={onFocus}
+      onBlur={onBlur}
+    >
+      <FormLabel
+        error={!isValid}
+        component='legend'
+        required={showAsRequired(
+          required,
+          appliedUiSchemaOptions.hideRequiredAsterisk
+        )}
       >
-        <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}`);
-            const checkboxValue = data?.includes(option.value)
-              ? option.value
-              : undefined;
-            return (
-              <FormControlLabel
-                id={id + '-label-' + option.value}
-                key={option.value}
-                control={
-                  <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}
-              />
-            );
-          })}
-        </FormGroup>
-        <FormHelperText error={!isValid}>
-          {!isValid ? errors : showDescription ? description : null}
-        </FormHelperText>
-      </FormControl>
-    </Hidden>
+        {label}
+      </FormLabel>
+      <FormGroup row>
+        {options.map((option: any, index: number) => {
+          const optionPath = Paths.compose(path, `${index}`);
+          const checkboxValue = data?.includes(option.value)
+            ? option.value
+            : undefined;
+          return (
+            <FormControlLabel
+              id={id + '-label-' + option.value}
+              key={option.value}
+              control={
+                <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}
+            />
+          );
+        })}
+      </FormGroup>
+      <FormHelperText error={!isValid}>
+        {!isValid ? errors : showDescription ? description : null}
+      </FormHelperText>
+    </FormControl>
   );
 };
 

package/src/complex/MaterialObjectRenderer.tsx

@@ -32,7 +32,6 @@ import {
   StatePropsOfControlWithDetail,
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsDetailProps } from '@jsonforms/react';
-import { Hidden } from '@mui/material';
 import React, { useMemo } from 'react';
 
 export const MaterialObjectRenderer = ({
@@ -66,18 +65,21 @@ export const MaterialObjectRenderer = ({
       ),
     [uischemas, schema, uischema.scope, path, label, uischema, rootSchema]
   );
+
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
-      <JsonFormsDispatch
-        visible={visible}
-        enabled={enabled}
-        schema={schema}
-        uischema={detailUiSchema}
-        path={path}
-        renderers={renderers}
-        cells={cells}
-      />
-    </Hidden>
+    <JsonFormsDispatch
+      visible={visible}
+      enabled={enabled}
+      schema={schema}
+      uischema={detailUiSchema}
+      path={path}
+      renderers={renderers}
+      cells={cells}
+    />
   );
 };
 

package/src/complex/MaterialOneOfRenderer.tsx

@@ -37,7 +37,7 @@ import {
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import { Hidden, Tab, Tabs } from '@mui/material';
+import { Tab, Tabs } from '@mui/material';
 import { JsonFormsDispatch, withJsonFormsOneOfProps } from '@jsonforms/react';
 import CombinatorProperties from './CombinatorProperties';
 
@@ -103,8 +103,12 @@ export const MaterialOneOfRenderer = ({
     [setConfirmDialogOpen, setSelectedIndex, data]
   );
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
+    <>
       <CombinatorProperties
         schema={schema}
         combinatorKeyword={'oneOf'}
@@ -136,7 +140,7 @@ export const MaterialOneOfRenderer = ({
         open={confirmDialogOpen}
         handleClose={handleClose}
       />
-    </Hidden>
+    </>
   );
 };
 

package/src/complex/MaterialTableControl.tsx

@@ -35,7 +35,6 @@ import React, { Fragment, useMemo } from 'react';
 import {
   FormHelperText,
   Grid,
-  Hidden,
   IconButton,
   Table,
   TableBody,
@@ -473,39 +472,41 @@ export class MaterialTableControl extends React.Component<
       ? generateCells(TableHeaderCell, schema, path, enabled, cells)
       : undefined;
 
+    if (!visible) {
+      return null;
+    }
+
     return (
-      <Hidden xsUp={!visible}>
-        <Table>
-          <TableHead>
-            <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}
-            />
-            {isObjectSchema && (
-              <TableRow>
-                {headerCells}
-                {enabled ? <TableCell /> : null}
-              </TableRow>
-            )}
-          </TableHead>
-          <TableBody>
-            <TableRows
-              openDeleteDialog={openDeleteDialog}
-              translations={translations}
-              {...this.props}
-            />
-          </TableBody>
-        </Table>
-      </Hidden>
+      <Table>
+        <TableHead>
+          <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}
+          />
+          {isObjectSchema && (
+            <TableRow>
+              {headerCells}
+              {enabled ? <TableCell /> : null}
+            </TableRow>
+          )}
+        </TableHead>
+        <TableBody>
+          <TableRows
+            openDeleteDialog={openDeleteDialog}
+            translations={translations}
+            {...this.props}
+          />
+        </TableBody>
+      </Table>
     );
   }
 }

package/src/controls/MaterialBooleanControl.tsx

@@ -33,12 +33,7 @@ import {
   isDescriptionHidden,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import {
-  FormControlLabel,
-  FormHelperText,
-  Tooltip,
-  Hidden,
-} from '@mui/material';
+import { FormControlLabel, FormHelperText, Tooltip } from '@mui/material';
 import { MuiCheckbox } from '../mui-controls/MuiCheckbox';
 
 export const MaterialBooleanControl = ({
@@ -104,8 +99,12 @@ export const MaterialBooleanControl = ({
   }
   const ariaDescribedBy = descriptionIds.join(' ');
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
+    <>
       <Tooltip id={tooltipId} title={showTooltip ? description : ''}>
         <FormControlLabel
           label={label}
@@ -137,7 +136,7 @@ export const MaterialBooleanControl = ({
       <FormHelperText id={helpId2} error={!isValid}>
         {secondFormHelperText}
       </FormHelperText>
-    </Hidden>
+    </>
   );
 };
 

package/src/controls/MaterialBooleanToggleControl.tsx

@@ -35,12 +35,7 @@ import {
   isDescriptionHidden,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import {
-  FormControlLabel,
-  FormHelperText,
-  Tooltip,
-  Hidden,
-} from '@mui/material';
+import { FormControlLabel, FormHelperText, Tooltip } from '@mui/material';
 import { MuiToggle } from '../mui-controls/MuiToggle';
 
 export const MaterialBooleanToggleControl = ({
@@ -106,8 +101,12 @@ export const MaterialBooleanToggleControl = ({
   }
   const ariaDescribedBy = descriptionIds.join(' ');
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
+    <>
       <Tooltip id={tooltipId} title={showTooltip ? description : ''}>
         <FormControlLabel
           label={label}
@@ -139,7 +138,7 @@ export const MaterialBooleanToggleControl = ({
       <FormHelperText id={helpId2} error={!isValid}>
         {secondFormHelperText}
       </FormHelperText>
-    </Hidden>
+    </>
   );
 };