eclipsesource · lucas-koehler · Apr 15, 2024 · Apr 8, 2024
diff --git a/packages/material-renderers/src/additional/MaterialLabelRenderer.tsx b/packages/material-renderers/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);
diff --git a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material-renderers/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(
@@ -158,7 +162,7 @@ export const MaterialListWithDetailRenderer = ({
           )}
         </Grid>
       </Grid>
-    </Hidden>
+    </>
   );
 };
 

diff --git a/packages/material-renderers/src/complex/MaterialAllOfRenderer.tsx b/packages/material-renderers/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>
+    </>
   );
 };
 

diff --git a/packages/material-renderers/src/complex/MaterialAnyOfRenderer.tsx b/packages/material-renderers/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>
+    </>
   );
 };
 

diff --git a/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx b/packages/material-renderers/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>
+    </>
   );
 };
 

diff --git a/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx b/packages/material-renderers/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>
   );
 };
 

diff --git a/packages/material-renderers/src/complex/MaterialObjectRenderer.tsx b/packages/material-renderers/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}
+    />
   );
 };
 

diff --git a/packages/material-renderers/src/complex/MaterialOneOfRenderer.tsx b/packages/material-renderers/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>
+    </>
   );
 };