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

package/src/controls/MaterialInputControl.tsx

@@ -29,7 +29,7 @@ import {
   isDescriptionHidden,
 } from '@jsonforms/core';
 
-import { Hidden, InputLabel, FormControl, FormHelperText } from '@mui/material';
+import { InputLabel, FormControl, FormHelperText } from '@mui/material';
 import merge from 'lodash/merge';
 import { useFocus, useInputVariant } from '../util';
 
@@ -69,36 +69,38 @@ export const MaterialInputControl = (props: ControlProps & WithInput) => {
   const secondFormHelperText = showDescription && !isValid ? errors : null;
   const InnerComponent = input;
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
-      <FormControl
-        fullWidth={!appliedUiSchemaOptions.trim}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        variant={variant}
-        id={id}
+    <FormControl
+      fullWidth={!appliedUiSchemaOptions.trim}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      variant={variant}
+      id={id}
+    >
+      <InputLabel
+        htmlFor={id + '-input'}
+        error={!isValid}
+        required={showAsRequired(
+          required,
+          appliedUiSchemaOptions.hideRequiredAsterisk
+        )}
       >
-        <InputLabel
-          htmlFor={id + '-input'}
-          error={!isValid}
-          required={showAsRequired(
-            required,
-            appliedUiSchemaOptions.hideRequiredAsterisk
-          )}
-        >
-          {label}
-        </InputLabel>
-        <InnerComponent
-          {...props}
-          id={id + '-input'}
-          isValid={isValid}
-          visible={visible}
-        />
-        <FormHelperText error={!isValid && !showDescription}>
-          {firstFormHelperText}
-        </FormHelperText>
-        <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
-      </FormControl>
-    </Hidden>
+        {label}
+      </InputLabel>
+      <InnerComponent
+        {...props}
+        id={id + '-input'}
+        isValid={isValid}
+        visible={visible}
+      />
+      <FormHelperText error={!isValid && !showDescription}>
+        {firstFormHelperText}
+      </FormHelperText>
+      <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
+    </FormControl>
   );
 };

package/src/controls/MaterialNativeControl.tsx

@@ -33,7 +33,7 @@ import {
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import { Hidden, TextField } from '@mui/material';
+import { TextField } from '@mui/material';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import merge from 'lodash/merge';
 import { useDebouncedChange, useFocus } from '../util';
@@ -70,27 +70,29 @@ export const MaterialNativeControl = (props: ControlProps) => {
     appliedUiSchemaOptions.showUnfocusedDescription
   );
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
-      <TextField
-        required={showAsRequired(
-          required,
-          appliedUiSchemaOptions.hideRequiredAsterisk
-        )}
-        id={id + '-input'}
-        label={label}
-        type={fieldType}
-        error={!isValid}
-        disabled={!enabled}
-        fullWidth={!appliedUiSchemaOptions.trim}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        helperText={!isValid ? errors : showDescription ? description : null}
-        InputLabelProps={{ shrink: true }}
-        value={inputValue}
-        onChange={onChange}
-      />
-    </Hidden>
+    <TextField
+      required={showAsRequired(
+        required,
+        appliedUiSchemaOptions.hideRequiredAsterisk
+      )}
+      id={id + '-input'}
+      label={label}
+      type={fieldType}
+      error={!isValid}
+      disabled={!enabled}
+      fullWidth={!appliedUiSchemaOptions.trim}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      helperText={!isValid ? errors : showDescription ? description : null}
+      InputLabelProps={{ shrink: true }}
+      value={inputValue}
+      onChange={onChange}
+    />
   );
 };
 

package/src/controls/MaterialRadioGroup.tsx

@@ -35,7 +35,6 @@ import {
   FormControlLabel,
   FormHelperText,
   FormLabel,
-  Hidden,
   Radio,
   RadioGroup,
 } from '@mui/material';
@@ -65,45 +64,47 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
     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>
+        {label}
+      </FormLabel>
 
-        <RadioGroup value={props.data ?? ''} row={true}>
-          {options.map((option) => (
-            <FormControlLabel
-              value={option.value}
-              key={option.label}
-              control={
-                <Radio
-                  checked={data === option.value}
-                  onChange={() => handleChange(path, option.value)}
-                />
-              }
-              label={option.label}
-              disabled={!enabled}
-            />
-          ))}
-        </RadioGroup>
-        <FormHelperText error={!isValid}>
-          {!isValid ? errors : showDescription ? description : null}
-        </FormHelperText>
-      </FormControl>
-    </Hidden>
+      <RadioGroup value={props.data ?? ''} row={true}>
+        {options.map((option) => (
+          <FormControlLabel
+            value={option.value}
+            key={option.label}
+            control={
+              <Radio
+                checked={data === option.value}
+                onChange={() => handleChange(path, option.value)}
+              />
+            }
+            label={option.label}
+            disabled={!enabled}
+          />
+        ))}
+      </RadioGroup>
+      <FormHelperText error={!isValid}>
+        {!isValid ? errors : showDescription ? description : null}
+      </FormHelperText>
+    </FormControl>
   );
 };

package/src/controls/MaterialSliderControl.tsx

@@ -37,7 +37,6 @@ import {
   FormControl,
   FormHelperText,
   FormLabel,
-  Hidden,
   Slider,
   Typography,
 } from '@mui/material';
@@ -90,50 +89,52 @@ export const MaterialSliderControl = (props: ControlProps) => {
     [path, handleChange]
   );
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
-      <FormControl
-        fullWidth={!appliedUiSchemaOptions.trim}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        id={id}
+    <FormControl
+      fullWidth={!appliedUiSchemaOptions.trim}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      id={id}
+    >
+      <FormLabel
+        htmlFor={id}
+        error={!isValid}
+        component='legend'
+        required={showAsRequired(
+          required,
+          appliedUiSchemaOptions.hideRequiredAsterisk
+        )}
       >
-        <FormLabel
-          htmlFor={id}
-          error={!isValid}
-          component='legend'
-          required={showAsRequired(
-            required,
-            appliedUiSchemaOptions.hideRequiredAsterisk
-          )}
-        >
-          <Typography id={id + '-typo'} style={labelStyle} variant='caption'>
-            {label}
-          </Typography>
-        </FormLabel>
-        <div style={rangeContainerStyle}>
-          <Typography style={rangeItemStyle} variant='caption' align='left'>
-            {schema.minimum}
-          </Typography>
-          <Typography style={rangeItemStyle} variant='caption' align='right'>
-            {schema.maximum}
-          </Typography>
-        </div>
-        <Slider
-          style={sliderStyle}
-          min={schema.minimum}
-          max={schema.maximum}
-          value={Number(data || schema.default)}
-          onChange={onChange}
-          id={id + '-input'}
-          disabled={!enabled}
-          step={schema.multipleOf || 1}
-        />
-        <FormHelperText error={!isValid}>
-          {!isValid ? errors : showDescription ? description : null}
-        </FormHelperText>
-      </FormControl>
-    </Hidden>
+        <Typography id={id + '-typo'} style={labelStyle} variant='caption'>
+          {label}
+        </Typography>
+      </FormLabel>
+      <div style={rangeContainerStyle}>
+        <Typography style={rangeItemStyle} variant='caption' align='left'>
+          {schema.minimum}
+        </Typography>
+        <Typography style={rangeItemStyle} variant='caption' align='right'>
+          {schema.maximum}
+        </Typography>
+      </div>
+      <Slider
+        style={sliderStyle}
+        min={schema.minimum}
+        max={schema.maximum}
+        value={Number(data || schema.default)}
+        onChange={onChange}
+        id={id + '-input'}
+        disabled={!enabled}
+        step={schema.multipleOf || 1}
+      />
+      <FormHelperText error={!isValid}>
+        {!isValid ? errors : showDescription ? description : null}
+      </FormHelperText>
+    </FormControl>
   );
 };
 export const materialSliderControlTester: RankedTester = rankWith(

package/src/layouts/ExpandPanelRenderer.tsx

@@ -1,5 +1,4 @@
 import merge from 'lodash/merge';
-import get from 'lodash/get';
 import React, {
   ComponentType,
   Dispatch,
@@ -23,14 +22,13 @@ import {
   JsonSchema,
   moveDown,
   moveUp,
-  Resolve,
   update,
   JsonFormsCellRendererRegistryEntry,
   JsonFormsUISchemaRegistryEntry,
-  getFirstPrimitiveProp,
   createId,
   removeId,
   ArrayTranslations,
+  computeChildLabel,
 } from '@jsonforms/core';
 import {
   Accordion,
@@ -311,18 +309,56 @@ export const ctxDispatchToExpandPanelProps: (
  */
 export const withContextToExpandPanelProps = (
   Component: ComponentType<ExpandPanelProps>
-): ComponentType<OwnPropsOfExpandPanel> =>
-  function WithContextToExpandPanelProps({
+): ComponentType<{
+  ctx: JsonFormsStateContext;
+  props: OwnPropsOfExpandPanel;
+}> => {
+  return function WithContextToExpandPanelProps({
     ctx,
     props,
-  }: JsonFormsStateContext & ExpandPanelProps) {
+  }: {
+    ctx: JsonFormsStateContext;
+    props: ExpandPanelProps;
+  }) {
     const dispatchProps = ctxDispatchToExpandPanelProps(ctx.dispatch);
-    const { childLabelProp, schema, path, index, uischemas } = props;
+    const {
+      // eslint is unable to detect that these props are "checked" via Typescript already
+      // eslint-disable-next-line react/prop-types
+      childLabelProp,
+      // eslint-disable-next-line react/prop-types
+      schema,
+      // eslint-disable-next-line react/prop-types
+      uischema,
+      // eslint-disable-next-line react/prop-types
+      rootSchema,
+      // eslint-disable-next-line react/prop-types
+      path,
+      // eslint-disable-next-line react/prop-types
+      index,
+      // eslint-disable-next-line react/prop-types
+      uischemas,
+    } = props;
     const childPath = composePaths(path, `${index}`);
-    const childData = Resolve.data(ctx.core.data, childPath);
-    const childLabel = childLabelProp
-      ? get(childData, childLabelProp, '')
-      : get(childData, getFirstPrimitiveProp(schema), '');
+
+    const childLabel = useMemo(() => {
+      return computeChildLabel(
+        ctx.core.data,
+        childPath,
+        childLabelProp,
+        schema,
+        rootSchema,
+        ctx.i18n.translate,
+        uischema
+      );
+    }, [
+      ctx.core.data,
+      childPath,
+      childLabelProp,
+      schema,
+      rootSchema,
+      ctx.i18n.translate,
+      uischema,
+    ]);
 
     return (
       <Component
@@ -334,6 +370,7 @@ export const withContextToExpandPanelProps = (
       />
     );
   };
+};
 
 export const withJsonFormsExpandPanelProps = (
   Component: ComponentType<ExpandPanelProps>

package/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';
 
@@ -43,10 +42,13 @@ export const MaterialArrayLayoutRenderer = ({
     (p: string, value: any) => addItem(p, value),
     [addItem]
   );
+
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
-      <MaterialArrayLayout visible={visible} addItem={addItemCb} {...props} />
-    </Hidden>
+    <MaterialArrayLayout visible={visible} addItem={addItemCb} {...props} />
   );
 };
 

package/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,
@@ -140,8 +140,12 @@ export const MaterialCategorizationLayoutRenderer = (
     return categories.map((e: Category) => deriveLabelForUISchemaElement(e, t));
   }, [categories, t]);
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
+    <>
       <AppBar position='static'>
         <Tabs
           value={safeCategory}
@@ -158,7 +162,7 @@ export const MaterialCategorizationLayoutRenderer = (
       <div style={{ marginTop: '0.5em' }}>
         <MaterialLayoutRenderer {...childProps} key={safeCategory} />
       </div>
-    </Hidden>
+    </>
   );
 };
 

package/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,
@@ -123,8 +123,13 @@ export const MaterialCategorizationStepperLayoutRenderer = (
   const tabLabels = useMemo(() => {
     return categories.map((e: Category) => deriveLabelForUISchemaElement(e, t));
   }, [categories, t]);
+
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
+    <>
       <Stepper activeStep={activeCategory} nonLinear>
         {categories.map((_: Category, idx: number) => (
           <Step key={tabLabels[idx]}>
@@ -161,7 +166,7 @@ export const MaterialCategorizationStepperLayoutRenderer = (
       ) : (
         <></>
       )}
-    </Hidden>
+    </>
   );
 };
 

package/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,
@@ -50,20 +50,23 @@ const GroupComponent = React.memo(function GroupComponent({
   ...props
 }: MaterialLabelableLayoutRendererProps) {
   const groupLayout = uischema as GroupLayout;
+
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
-      <Card style={style}>
-        {!isEmpty(label) && <CardHeader title={label} />}
-        <CardContent>
-          <MaterialLayoutRenderer
-            {...props}
-            visible={visible}
-            enabled={enabled}
-            elements={groupLayout.elements}
-          />
-        </CardContent>
-      </Card>
-    </Hidden>
+    <Card style={style}>
+      {!isEmpty(label) && <CardHeader title={label} />}
+      <CardContent>
+        <MaterialLayoutRenderer
+          {...props}
+          visible={visible}
+          enabled={enabled}
+          elements={groupLayout.elements}
+        />
+      </CardContent>
+    </Card>
   );
 });
 

package/src/mui-controls/MuiAutocomplete.tsx

@@ -36,7 +36,6 @@ import {
   AutocompleteRenderOptionState,
   FilterOptionsState,
   FormHelperText,
-  Hidden,
   TextField,
 } from '@mui/material';
 import merge from 'lodash/merge';
@@ -98,8 +97,12 @@ export const MuiAutocomplete = (
     : null;
   const secondFormHelperText = showDescription && !isValid ? errors : null;
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
+    <>
       <Autocomplete
         className={className}
         id={id}
@@ -148,6 +151,6 @@ export const MuiAutocomplete = (
         {firstFormHelperText}
       </FormHelperText>
       <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
-    </Hidden>
+    </>
   );
 };

package/src/util/layout.tsx

@@ -34,7 +34,7 @@ import {
   OwnPropsOfRenderer,
 } from '@jsonforms/core';
 import { JsonFormsDispatch, useJsonForms } from '@jsonforms/react';
-import { Grid, Hidden } from '@mui/material';
+import { Grid } from '@mui/material';
 
 export const renderLayoutElements = (
   elements: UISchemaElement[],
@@ -72,26 +72,24 @@ const MaterialLayoutRendererComponent = ({
   renderers,
   cells,
 }: MaterialLayoutRendererProps) => {
-  if (isEmpty(elements)) {
+  if (isEmpty(elements) || !visible) {
     return null;
   } else {
     return (
-      <Hidden xsUp={!visible}>
-        <Grid
-          container
-          direction={direction}
-          spacing={direction === 'row' ? 2 : 0}
-        >
-          {renderLayoutElements(
-            elements,
-            schema,
-            path,
-            enabled,
-            renderers,
-            cells
-          )}
-        </Grid>
-      </Hidden>
+      <Grid
+        container
+        direction={direction}
+        spacing={direction === 'row' ? 2 : 0}
+      >
+        {renderLayoutElements(
+          elements,
+          schema,
+          path,
+          enabled,
+          renderers,
+          cells
+        )}
+      </Grid>
     );
   }
 };