@jsonforms/material-renderers 3.1.1-alpha.0 → 3.2.0-alpha.1

package/lib/mui-controls/MuiInputInteger.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-export declare const MuiInputInteger: React.NamedExoticComponent<CellProps & WithClassname>;
+import { WithInputProps } from '../util';
+export declare const MuiInputInteger: React.NamedExoticComponent<CellProps & WithClassname & WithInputProps>;

package/lib/mui-controls/MuiInputNumber.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-export declare const MuiInputNumber: React.NamedExoticComponent<CellProps & WithClassname>;
+import { WithInputProps } from '../util';
+export declare const MuiInputNumber: React.NamedExoticComponent<CellProps & WithClassname & WithInputProps>;

package/lib/mui-controls/MuiInputNumberFormat.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { CellProps, Formatted, WithClassname } from '@jsonforms/core';
-export declare const MuiInputNumberFormat: React.NamedExoticComponent<CellProps & WithClassname & Formatted<number>>;
+import { WithInputProps } from '../util';
+export declare const MuiInputNumberFormat: React.NamedExoticComponent<CellProps & WithClassname & Formatted<number> & WithInputProps>;

package/lib/mui-controls/MuiInputText.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
 import { InputProps } from '@mui/material';
+import { WithInputProps } from '../util';
 interface MuiTextInputProps {
     muiInputProps?: InputProps['inputProps'];
     inputComponent?: InputProps['inputComponent'];
 }
-export declare const MuiInputText: React.NamedExoticComponent<CellProps & WithClassname & MuiTextInputProps>;
+export declare const MuiInputText: React.NamedExoticComponent<CellProps & WithClassname & MuiTextInputProps & WithInputProps>;
 export {};

package/lib/mui-controls/MuiInputTime.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-export declare const MuiInputTime: React.NamedExoticComponent<CellProps & WithClassname>;
+import { WithInputProps } from '../util';
+export declare const MuiInputTime: React.NamedExoticComponent<CellProps & WithClassname & WithInputProps>;

package/lib/mui-controls/MuiSelect.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { EnumCellProps, WithClassname } from '@jsonforms/core';
 import { TranslateProps } from '@jsonforms/react';
-export declare const MuiSelect: React.NamedExoticComponent<EnumCellProps & WithClassname & TranslateProps>;
+import { WithInputProps } from '../util';
+export declare const MuiSelect: React.NamedExoticComponent<EnumCellProps & WithClassname & TranslateProps & WithInputProps>;

package/lib/util/theme.d.ts

@@ -1,4 +1,5 @@
-import { Theme } from '@mui/material';
+/// <reference types="react" />
+import { Theme, TextFieldProps, InputBaseProps } from '@mui/material';
 export interface JsonFormsTheme extends Theme {
     jsonforms?: {
         input?: {
@@ -8,3 +9,9 @@ export interface JsonFormsTheme extends Theme {
         };
     };
 }
+export interface WithInputProps {
+    label?: string;
+}
+export declare const defaultInputVariant: TextFieldProps['variant'];
+export declare function useInputVariant(): TextFieldProps['variant'];
+export declare function useInputComponent(): React.JSXElementConstructor<InputBaseProps & WithInputProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/material-renderers",
-  "version": "3.1.1-alpha.0",
+  "version": "3.2.0-alpha.1",
   "description": "Material Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -85,9 +85,9 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "3.1.1-alpha.0",
-    "@jsonforms/react": "3.1.1-alpha.0",
-    "@mui/icons-material": "~5.11.16",
+    "@jsonforms/core": "3.2.0-alpha.1",
+    "@jsonforms/react": "3.2.0-alpha.1",
+    "@mui/icons-material": "^5.11.16",
     "@mui/material": "~5.13.0",
     "@mui/x-date-pickers": "^6.0.0",
     "react": "^16.12.0 || ^17.0.0 || ^18.0.0"
@@ -95,8 +95,8 @@
   "devDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "3.1.1-alpha.0",
-    "@jsonforms/react": "3.1.1-alpha.0",
+    "@jsonforms/core": "3.2.0-alpha.1",
+    "@jsonforms/react": "3.2.0-alpha.1",
     "@mui/icons-material": "~5.11.16",
     "@mui/material": "~5.13.0",
     "@mui/x-date-pickers": "^6.5.0",
@@ -128,7 +128,7 @@
     "rollup": "^2.78.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-import-css": "^3.1.0",
+    "rollup-plugin-import-css": "^3.3.1",
     "rollup-plugin-typescript2": "^0.34.1",
     "rollup-plugin-visualizer": "^5.4.1",
     "source-map-loader": "^0.2.4",
@@ -141,5 +141,5 @@
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.9.0"
   },
-  "gitHead": "071b32056d62e9548fb2b300a3a173cdbcb5b69a"
+  "gitHead": "deb2c7cd71f6065cca7777420b1018f17e73052a"
 }

package/src/cells/MaterialDateCell.tsx

@@ -31,22 +31,37 @@ import {
   WithClassname,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
-import Input from '@mui/material/Input';
 import merge from 'lodash/merge';
+import { useInputComponent, WithInputProps } from '../util';
 
-export const MaterialDateCell = (props: CellProps & WithClassname) => {
-  const { data, className, id, enabled, uischema, path, handleChange, config } =
-    props;
+export const MaterialDateCell = (
+  props: CellProps & WithClassname & WithInputProps
+) => {
+  const {
+    data,
+    className,
+    id,
+    enabled,
+    uischema,
+    path,
+    handleChange,
+    config,
+    label,
+  } = props;
 
+  const InputComponent = useInputComponent();
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
 
   return (
-    <Input
+    <InputComponent
       type='date'
       value={data || ''}
-      onChange={(ev) => handleChange(path, ev.target.value)}
+      onChange={(ev: React.ChangeEvent<HTMLInputElement>) =>
+        handleChange(path, ev.target.value)
+      }
       className={className}
       id={id}
+      label={label}
       disabled={!enabled}
       autoFocus={appliedUiSchemaOptions.focus}
       fullWidth={true}

package/src/complex/MaterialAnyOfRenderer.tsx

@@ -25,18 +25,22 @@
 import React, { useCallback, useState } from 'react';
 
 import {
+  CombinatorRendererProps,
   createCombinatorRenderInfos,
+  createDefaultValue,
   isAnyOfControl,
   JsonSchema,
   RankedTester,
   rankWith,
-  StatePropsOfCombinator,
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAnyOfProps } from '@jsonforms/react';
 import { Hidden, Tab, Tabs } from '@mui/material';
 import CombinatorProperties from './CombinatorProperties';
+import isEmpty from 'lodash/isEmpty';
+import { TabSwitchConfirmDialog } from './TabSwitchConfirmDialog';
 
 export const MaterialAnyOfRenderer = ({
+  handleChange,
   schema,
   rootSchema,
   indexOfFittingSchema,
@@ -46,12 +50,44 @@ export const MaterialAnyOfRenderer = ({
   cells,
   uischema,
   uischemas,
-}: StatePropsOfCombinator) => {
+  id,
+  data,
+}: CombinatorRendererProps) => {
   const [selectedAnyOf, setSelectedAnyOf] = useState(indexOfFittingSchema || 0);
-  const handleChange = useCallback(
-    (_ev: any, value: number) => setSelectedAnyOf(value),
-    [setSelectedAnyOf]
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+  const [newSelectedIndex, setNewSelectedIndex] = useState(0);
+
+  const handleClose = useCallback(
+    () => setConfirmDialogOpen(false),
+    [setConfirmDialogOpen]
+  );
+
+  const handleTabChange = useCallback(
+    (_event: any, newIndex: number) => {
+      if (
+        isEmpty(data) ||
+        typeof data ===
+          typeof createDefaultValue(anyOfRenderInfos[newIndex].schema)
+      ) {
+        setSelectedAnyOf(newIndex);
+      } else {
+        setNewSelectedIndex(newIndex);
+        setConfirmDialogOpen(true);
+      }
+    },
+    [setConfirmDialogOpen, setSelectedAnyOf, data]
   );
+
+  const openNewTab = (newIndex: number) => {
+    handleChange(path, createDefaultValue(anyOfRenderInfos[newIndex].schema));
+    setSelectedAnyOf(newIndex);
+  };
+
+  const confirm = useCallback(() => {
+    openNewTab(newSelectedIndex);
+    setConfirmDialogOpen(false);
+  }, [handleChange, createDefaultValue, newSelectedIndex]);
+
   const anyOf = 'anyOf';
   const anyOfRenderInfos = createCombinatorRenderInfos(
     (schema as JsonSchema).anyOf,
@@ -69,7 +105,7 @@ export const MaterialAnyOfRenderer = ({
         combinatorKeyword={anyOf}
         path={path}
       />
-      <Tabs value={selectedAnyOf} onChange={handleChange}>
+      <Tabs value={selectedAnyOf} onChange={handleTabChange}>
         {anyOfRenderInfos.map((anyOfRenderInfo) => (
           <Tab key={anyOfRenderInfo.label} label={anyOfRenderInfo.label} />
         ))}
@@ -87,6 +123,13 @@ export const MaterialAnyOfRenderer = ({
             />
           )
       )}
+      <TabSwitchConfirmDialog
+        cancel={handleClose}
+        confirm={confirm}
+        id={'anyOf-' + id}
+        open={confirmDialogOpen}
+        handleClose={handleClose}
+      />
     </Hidden>
   );
 };

package/src/complex/MaterialOneOfRenderer.tsx

@@ -25,6 +25,8 @@
 import React, { useCallback, useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 
+import { TabSwitchConfirmDialog } from './TabSwitchConfirmDialog';
+
 import {
   CombinatorRendererProps,
   createCombinatorRenderInfos,
@@ -35,17 +37,7 @@ import {
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Hidden,
-  Tab,
-  Tabs,
-} from '@mui/material';
+import { Hidden, Tab, Tabs } from '@mui/material';
 import { JsonFormsDispatch, withJsonFormsOneOfProps } from '@jsonforms/react';
 import CombinatorProperties from './CombinatorProperties';
 
@@ -67,13 +59,16 @@ export const MaterialOneOfRenderer = ({
   uischemas,
   data,
 }: CombinatorRendererProps) => {
-  const [open, setOpen] = useState(false);
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(indexOfFittingSchema || 0);
   const [newSelectedIndex, setNewSelectedIndex] = useState(0);
-  const handleClose = useCallback(() => setOpen(false), [setOpen]);
+  const handleClose = useCallback(
+    () => setConfirmDialogOpen(false),
+    [setConfirmDialogOpen]
+  );
   const cancel = useCallback(() => {
-    setOpen(false);
-  }, [setOpen]);
+    setConfirmDialogOpen(false);
+  }, [setConfirmDialogOpen]);
   const oneOfRenderInfos = createCombinatorRenderInfos(
     (schema as JsonSchema).oneOf,
     rootSchema,
@@ -90,18 +85,19 @@ export const MaterialOneOfRenderer = ({
 
   const confirm = useCallback(() => {
     openNewTab(newSelectedIndex);
-    setOpen(false);
+    setConfirmDialogOpen(false);
   }, [handleChange, createDefaultValue, newSelectedIndex]);
+
   const handleTabChange = useCallback(
     (_event: any, newOneOfIndex: number) => {
       setNewSelectedIndex(newOneOfIndex);
       if (isEmpty(data)) {
         openNewTab(newOneOfIndex);
       } else {
-        setOpen(true);
+        setConfirmDialogOpen(true);
       }
     },
-    [setOpen, setSelectedIndex, data]
+    [setConfirmDialogOpen, setSelectedIndex, data]
   );
 
   return (
@@ -129,33 +125,13 @@ export const MaterialOneOfRenderer = ({
             />
           )
       )}
-      <Dialog
-        open={open}
-        onClose={handleClose}
-        aria-labelledby='alert-dialog-title'
-        aria-describedby='alert-dialog-description'
-      >
-        <DialogTitle id='alert-dialog-title'>{'Clear form?'}</DialogTitle>
-        <DialogContent>
-          <DialogContentText id='alert-dialog-description'>
-            Your data will be cleared if you navigate away from this tab. Do you
-            want to proceed?
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={cancel} color='primary'>
-            No
-          </Button>
-          <Button
-            onClick={confirm}
-            color='primary'
-            autoFocus
-            id={`oneOf-${id}-confirm-yes`}
-          >
-            Yes
-          </Button>
-        </DialogActions>
-      </Dialog>
+      <TabSwitchConfirmDialog
+        cancel={cancel}
+        confirm={confirm}
+        id={'oneOf-' + id}
+        open={confirmDialogOpen}
+        handleClose={handleClose}
+      />
     </Hidden>
   );
 };

package/src/complex/TabSwitchConfirmDialog.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from '@mui/material';
+
+export interface TabSwitchConfirmDialogProps {
+  open: boolean;
+  handleClose: () => void;
+  confirm: () => void;
+  cancel: () => void;
+  id: string;
+}
+
+export const TabSwitchConfirmDialog = ({
+  open,
+  handleClose,
+  confirm,
+  cancel,
+  id,
+}: TabSwitchConfirmDialogProps) => {
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      aria-labelledby='alert-dialog-title'
+      aria-describedby='alert-dialog-description'
+    >
+      <DialogTitle id='alert-dialog-title'>{'Clear form?'}</DialogTitle>
+      <DialogContent>
+        <DialogContentText id='alert-dialog-description'>
+          Your data will be cleared if you navigate away from this tab. Do you
+          want to proceed?
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={cancel} color='primary'>
+          No
+        </Button>
+        <Button
+          onClick={confirm}
+          color='primary'
+          autoFocus
+          id={`${id}-confirm-yes`}
+        >
+          Yes
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

package/src/controls/MaterialAnyOfStringOrEnumControl.tsx

@@ -35,10 +35,10 @@ import {
   WithClassname,
 } from '@jsonforms/core';
 import { Control, withJsonFormsControlProps } from '@jsonforms/react';
-import { Input, InputBaseComponentProps } from '@mui/material';
+import { InputBaseComponentProps } from '@mui/material';
 import merge from 'lodash/merge';
 import React, { useMemo } from 'react';
-import { useDebouncedChange } from '../util';
+import { useDebouncedChange, useInputComponent, WithInputProps } from '../util';
 import { MaterialInputControl } from './MaterialInputControl';
 
 const findEnumSchema = (schemas: JsonSchema[]) =>
@@ -48,7 +48,9 @@ const findEnumSchema = (schemas: JsonSchema[]) =>
 const findTextSchema = (schemas: JsonSchema[]) =>
   schemas.find((s) => s.type === 'string' && s.enum === undefined);
 
-const MuiAutocompleteInputText = (props: EnumCellProps & WithClassname) => {
+const MuiAutocompleteInputText = (
+  props: EnumCellProps & WithClassname & WithInputProps
+) => {
   const {
     data,
     config,
@@ -60,7 +62,9 @@ const MuiAutocompleteInputText = (props: EnumCellProps & WithClassname) => {
     path,
     handleChange,
     schema,
+    label,
   } = props;
+  const InputComponent = useInputComponent();
   const enumSchema = findEnumSchema(schema.anyOf);
   const stringSchema = findTextSchema(schema.anyOf);
   const maxLength = stringSchema.maxLength;
@@ -94,12 +98,13 @@ const MuiAutocompleteInputText = (props: EnumCellProps & WithClassname) => {
     </datalist>
   );
   return (
-    <Input
+    <InputComponent
       type='text'
       value={inputText}
       onChange={onChange}
       className={className}
       id={id}
+      label={label}
       disabled={!enabled}
       autoFocus={appliedUiSchemaOptions.focus}
       fullWidth={!appliedUiSchemaOptions.trim || maxLength === undefined}

package/src/controls/MaterialDateControl.tsx

@@ -110,7 +110,6 @@ export const MaterialDateControl = (props: ControlProps) => {
               InputLabelProps: data ? { shrink: true } : undefined,
               onFocus: onFocus,
               onBlur: onBlur,
-              variant: 'standard',
             },
           }}
         />

package/src/controls/MaterialDateTimeControl.tsx

@@ -118,7 +118,6 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
               InputLabelProps: data ? { shrink: true } : undefined,
               onFocus: onFocus,
               onBlur: onBlur,
-              variant: 'standard',
             },
           }}
         />

package/src/controls/MaterialInputControl.tsx

@@ -31,7 +31,7 @@ import {
 
 import { Hidden, InputLabel, FormControl, FormHelperText } from '@mui/material';
 import merge from 'lodash/merge';
-import { useFocus } from '../util';
+import { useFocus, useInputVariant } from '../util';
 
 export interface WithInput {
   input: any;
@@ -50,6 +50,7 @@ export const MaterialInputControl = (props: ControlProps & WithInput) => {
     config,
     input,
   } = props;
+  const variant = useInputVariant();
   const isValid = errors.length === 0;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
 
@@ -74,8 +75,8 @@ export const MaterialInputControl = (props: ControlProps & WithInput) => {
         fullWidth={!appliedUiSchemaOptions.trim}
         onFocus={onFocus}
         onBlur={onBlur}
+        variant={variant}
         id={id}
-        variant={'standard'}
       >
         <InputLabel
           htmlFor={id + '-input'}

package/src/controls/MaterialTimeControl.tsx

@@ -112,7 +112,6 @@ export const MaterialTimeControl = (props: ControlProps) => {
               InputLabelProps: data ? { shrink: true } : undefined,
               onFocus: onFocus,
               onBlur: onBlur,
-              variant: 'standard',
             },
           }}
         />

package/src/mui-controls/MuiAutocomplete.tsx

@@ -123,7 +123,6 @@ export const MuiAutocomplete = (
           return (
             <TextField
               label={label}
-              variant={'standard'}
               type='text'
               inputProps={params.inputProps}
               inputRef={params.InputProps.ref}

package/src/mui-controls/MuiInputInteger.tsx

@@ -24,19 +24,28 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import { Input } from '@mui/material';
 import merge from 'lodash/merge';
-import { useDebouncedChange } from '../util';
+import { useDebouncedChange, useInputComponent, WithInputProps } from '../util';
 
 const toNumber = (value: string) =>
   value === '' ? undefined : parseInt(value, 10);
 const eventToValue = (ev: any) => toNumber(ev.target.value);
 
 export const MuiInputInteger = React.memo(function MuiInputInteger(
-  props: CellProps & WithClassname
+  props: CellProps & WithClassname & WithInputProps
 ) {
-  const { data, className, id, enabled, uischema, path, handleChange, config } =
-    props;
+  const {
+    data,
+    className,
+    id,
+    enabled,
+    uischema,
+    path,
+    handleChange,
+    config,
+    label,
+  } = props;
+  const InputComponent = useInputComponent();
   const inputProps = { step: '1' };
 
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -50,7 +59,8 @@ export const MuiInputInteger = React.memo(function MuiInputInteger(
   );
 
   return (
-    <Input
+    <InputComponent
+      label={label}
       type='number'
       value={inputValue}
       onChange={onChange}

package/src/mui-controls/MuiInputNumber.tsx

@@ -1,19 +1,19 @@
 /*
   The MIT License
-  
+
   Copyright (c) 2017-2019 EclipseSource Munich
   https://github.com/eclipsesource/jsonforms
-  
+
   Permission is hereby granted, free of charge, to any person obtaining a copy
   of this software and associated documentation files (the "Software"), to deal
   in the Software without restriction, including without limitation the rights
   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
   copies of the Software, and to permit persons to whom the Software is
   furnished to do so, subject to the following conditions:
-  
+
   The above copyright notice and this permission notice shall be included in
   all copies or substantial portions of the Software.
-  
+
   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
@@ -24,18 +24,27 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import { Input } from '@mui/material';
 import merge from 'lodash/merge';
-import { useDebouncedChange } from '../util';
+import { useDebouncedChange, useInputComponent, WithInputProps } from '../util';
 
 const toNumber = (value: string) =>
   value === '' ? undefined : parseFloat(value);
 const eventToValue = (ev: any) => toNumber(ev.target.value);
 export const MuiInputNumber = React.memo(function MuiInputNumber(
-  props: CellProps & WithClassname
+  props: CellProps & WithClassname & WithInputProps
 ) {
-  const { data, className, id, enabled, uischema, path, handleChange, config } =
-    props;
+  const {
+    data,
+    className,
+    id,
+    enabled,
+    uischema,
+    path,
+    handleChange,
+    config,
+    label,
+  } = props;
+  const InputComponent = useInputComponent();
   const inputProps = { step: '0.1' };
 
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -48,8 +57,9 @@ export const MuiInputNumber = React.memo(function MuiInputNumber(
   );
 
   return (
-    <Input
+    <InputComponent
       type='number'
+      label={label}
       value={inputValue}
       onChange={onChange}
       className={className}