From 950fd38e01e66096606f240b031570820746252e Mon Sep 17 00:00:00 2001
From: Nathan Walston <walston@users.noreply.github.com>
Date: Thu, 2 Mar 2023 12:47:50 -0800
Subject: [PATCH] Remove uses of Hidden

---
 .../src/layouts/MaterialArrayLayoutRenderer.tsx     | 13 +++----------
 .../src/layouts/MaterialCategorizationLayout.tsx    | 10 +++++-----
 .../layouts/MaterialCategorizationStepperLayout.tsx | 11 ++++++-----
 .../src/layouts/MaterialGroupLayout.tsx             | 10 +++++-----
 4 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/packages/material-renderers/src/layouts/MaterialArrayLayoutRenderer.tsx b/packages/material-renderers/src/layouts/MaterialArrayLayoutRenderer.tsx
index 70f4e2e416..9f3ab37b15 100644
--- a/packages/material-renderers/src/layouts/MaterialArrayLayoutRenderer.tsx
+++ b/packages/material-renderers/src/layouts/MaterialArrayLayoutRenderer.tsx
@@ -30,7 +30,6 @@ import {
   RankedTester,
   rankWith
 } from '@jsonforms/core';
-import { Hidden } from '@mui/material';
 import { MaterialArrayLayout } from './MaterialArrayLayout';
 import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
 
@@ -42,15 +41,9 @@ export const MaterialArrayLayoutRenderer = ({
   const addItemCb = useCallback((p: string, value: any) => addItem(p, value), [
     addItem
   ]);
-  return (
-    <Hidden xsUp={!visible}>
-      <MaterialArrayLayout
-        visible={visible}
-        addItem={addItemCb}
-        {...props}
-      />
-    </Hidden>
-  );
+  return visible
+    ? <MaterialArrayLayout visible={visible} addItem={addItemCb} {...props} />
+    : null
 };
 
 export const materialArrayLayoutTester: RankedTester = rankWith(
diff --git a/packages/material-renderers/src/layouts/MaterialCategorizationLayout.tsx b/packages/material-renderers/src/layouts/MaterialCategorizationLayout.tsx
index 38c956944f..699a43bc57 100644
--- a/packages/material-renderers/src/layouts/MaterialCategorizationLayout.tsx
+++ b/packages/material-renderers/src/layouts/MaterialCategorizationLayout.tsx
@@ -23,7 +23,7 @@
   THE SOFTWARE.
 */
 import React, {useState, useMemo} from 'react';
-import { AppBar, Hidden, Tab, Tabs } from '@mui/material';
+import { AppBar, Tab, Tabs } from '@mui/material';
 import {
   and,
   Categorization,
@@ -119,8 +119,8 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
     )
   }, [categories, t])
 
-  return (
-    <Hidden xsUp={!visible}>
+  return visible ? (
+    <>
       <AppBar position='static'>
         <Tabs value={activeCategory} onChange={onTabChange} textColor='inherit' indicatorColor='secondary' variant='scrollable'>
           {categories.map((_, idx: number) => (
@@ -131,8 +131,8 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
       <div style={{ marginTop: '0.5em' }}>
         <MaterialLayoutRenderer {...childProps} />
       </div>
-    </Hidden>
-  );
+    </>
+  ) : null;
 };
 
 export default withAjvProps(withTranslateProps(withJsonFormsLayoutProps(MaterialCategorizationLayoutRenderer)));
diff --git a/packages/material-renderers/src/layouts/MaterialCategorizationStepperLayout.tsx b/packages/material-renderers/src/layouts/MaterialCategorizationStepperLayout.tsx
index 56511f6c5b..5c7e068e59 100644
--- a/packages/material-renderers/src/layouts/MaterialCategorizationStepperLayout.tsx
+++ b/packages/material-renderers/src/layouts/MaterialCategorizationStepperLayout.tsx
@@ -24,7 +24,7 @@
 */
 import React, {useState, useMemo} from 'react';
 import merge from 'lodash/merge';
-import { Button, Hidden, Step, StepButton, Stepper } from '@mui/material';
+import { Button, Step, StepButton, Stepper } from '@mui/material';
 import {
   and,
   Categorization,
@@ -113,8 +113,8 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
       deriveLabelForUISchemaElement(e, t)
     )
   }, [categories, t])
-  return (
-    <Hidden xsUp={!visible}>
+  return visible ? (
+    <>
       <Stepper activeStep={activeCategory} nonLinear>
         {categories.map((_: Category, idx: number) => (
           <Step key={tabLabels[idx]}>
@@ -147,8 +147,9 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
           Previous
         </Button>
       </div>) : (<></>)}
-    </Hidden>
-  );
+    </>
+  )
+  : null;
 };
 
 export default withAjvProps(withTranslateProps(
diff --git a/packages/material-renderers/src/layouts/MaterialGroupLayout.tsx b/packages/material-renderers/src/layouts/MaterialGroupLayout.tsx
index e9d283c043..fafde24673 100644
--- a/packages/material-renderers/src/layouts/MaterialGroupLayout.tsx
+++ b/packages/material-renderers/src/layouts/MaterialGroupLayout.tsx
@@ -24,7 +24,7 @@
 */
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
-import { Card, CardContent, CardHeader, Hidden } from '@mui/material';
+import { Card, CardContent, CardHeader } from '@mui/material';
 import {
   GroupLayout,
   LayoutProps,
@@ -44,8 +44,8 @@ const style: { [x: string]: any } = { marginBottom: '10px' };
 
 const GroupComponent = React.memo(({ visible, enabled, uischema, label, ...props }: MaterialLabelableLayoutRendererProps) => {
   const groupLayout = uischema as GroupLayout;
-  return (
-    <Hidden xsUp={!visible}>
+  return visible ? (
+    <>
       <Card style={style}>
         {!isEmpty(label) && (
           <CardHeader title={label} />
@@ -54,8 +54,8 @@ const GroupComponent = React.memo(({ visible, enabled, uischema, label, ...props
           <MaterialLayoutRenderer {...props} visible={visible} enabled={enabled} elements={groupLayout.elements} />
         </CardContent>
       </Card>
-    </Hidden>
-  );
+    </>
+  ) : null;
 });
 
 export const MaterializedGroupLayoutRenderer = ({ uischema, schema, path, visible, enabled, renderers, cells, direction, label }: LayoutProps) => {