@jsonforms/material-renderers 3.2.0-alpha.4 → 3.2.0-beta.1

package/lib/layouts/ArrayToolbar.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { ArrayTranslations } from '@jsonforms/core';
 export interface ArrayLayoutToolbarProps {
     label: string;
+    description: string;
     errors: string;
     path: string;
     enabled: boolean;

package/lib/util/datejs.d.ts

@@ -1,3 +1,5 @@
 import dayjs from 'dayjs';
-export declare const createOnChangeHandler: (path: string, handleChange: (path: string, value: any) => void, saveFormat: string | undefined) => (time: dayjs.Dayjs) => void;
+export declare const createOnChangeHandler: (path: string, handleChange: (path: string, value: any) => void, saveFormat: string) => (value: dayjs.Dayjs) => void;
+export declare const createOnBlurHandler: (path: string, handleChange: (path: string, value: any) => void, format: string, saveFormat: string, rerenderChild: () => void, onBlur: () => void) => (e: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement, Element>) => void;
+export declare const formatDate: (date: dayjs.Dayjs, saveFormat: string) => string;
 export declare const getData: (data: any, saveFormat: string | undefined) => dayjs.Dayjs | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/material-renderers",
-  "version": "3.2.0-alpha.4",
+  "version": "3.2.0-beta.1",
   "description": "Material Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -35,19 +35,6 @@
   "main": "lib/jsonforms-react-material.cjs.js",
   "module": "lib/jsonforms-react-material.esm.js",
   "typings": "lib/index.d.ts",
-  "scripts": {
-    "build": "rollup -c rollup.config.js",
-    "build:examples-app": "rollup -c rollup.example.config.js",
-    "dev": "webpack --config webpack/webpack.dev.js && webpack-dev-server --config webpack/webpack.dev.js --env=dev --inline",
-    "clean": "rimraf lib coverage dist .nyc_output example/dist 2> /dev/null",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
-    "test": "jest --no-cache",
-    "test-cov": "jest --no-cache --coverage",
-    "report": "nyc report --reporter=html",
-    "doc": "typedoc --name 'JSON Forms React Material Renderers' --excludeExternals --theme ../../typedoc-jsonforms --out docs src",
-    "tsc": "tsc --build tsconfig.json"
-  },
   "jest": {
     "moduleFileExtensions": [
       "ts",
@@ -59,7 +46,8 @@
     },
     "testEnvironment": "jsdom",
     "testMatch": [
-      "**/test/**/*.test.tsx"
+      "**/test/**/*.test.tsx",
+      "**/test/**.test.ts"
     ],
     "testPathIgnorePatterns": [
       "/node_modules/",
@@ -85,8 +73,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "3.2.0-alpha.4",
-    "@jsonforms/react": "3.2.0-alpha.4",
+    "@jsonforms/core": "3.2.0-beta.1",
+    "@jsonforms/react": "3.2.0-beta.1",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.0",
     "@mui/x-date-pickers": "^6.0.0",
@@ -95,8 +83,6 @@
   "devDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "3.2.0-alpha.4",
-    "@jsonforms/react": "3.2.0-alpha.4",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "~5.13.0",
     "@mui/x-date-pickers": "^6.5.0",
@@ -135,11 +121,25 @@
     "ts-jest": "^27.1.4",
     "ts-loader": "^6.2.1",
     "tslib": "^2.5.0",
-    "typedoc": "~0.21.9",
-    "typescript": "4.2.3",
+    "typedoc": "~0.25.3",
+    "typescript": "~4.9.5",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.2.1",
-    "webpack-dev-server": "^3.9.0"
+    "webpack-dev-server": "^3.9.0",
+    "@jsonforms/core": "3.2.0-beta.1",
+    "@jsonforms/react": "3.2.0-beta.1"
   },
-  "gitHead": "288f0dc97d0e861583f5a3c3f8a65ffb5eab8568"
-}
+  "scripts": {
+    "build": "rollup -c rollup.config.js",
+    "build:examples-app": "rollup -c rollup.example.config.js",
+    "dev": "webpack --config webpack/webpack.dev.js && webpack-dev-server --config webpack/webpack.dev.js --env=dev --inline",
+    "clean": "rimraf lib coverage dist .nyc_output example/dist 2> /dev/null",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "test": "jest --no-cache",
+    "test-cov": "jest --no-cache --coverage",
+    "report": "nyc report --reporter=html",
+    "doc": "typedoc --name 'JSON Forms React Material Renderers' --excludeExternals --out docs src",
+    "tsc": "tsc --build tsconfig.json"
+  }
+}

package/src/additional/ListWithDetailMasterItem.tsx

@@ -32,7 +32,7 @@ import {
   ListItemSecondaryAction,
   ListItemText,
 } from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
+import { Delete as DeleteIcon } from '@mui/icons-material';
 import React from 'react';
 
 export const ListWithDetailMasterItem = ({

package/src/additional/MaterialListWithDetailRenderer.tsx

@@ -64,6 +64,7 @@ export const MaterialListWithDetailRenderer = ({
   config,
   rootSchema,
   translations,
+  description,
 }: ArrayLayoutProps) => {
   const [selectedIndex, setSelectedIndex] = useState(undefined);
   const handleRemoveItem = useCallback(
@@ -113,6 +114,7 @@ export const MaterialListWithDetailRenderer = ({
           required,
           appliedUiSchemaOptions.hideRequiredAsterisk
         )}
+        description={description}
         errors={errors}
         path={path}
         enabled={enabled}

package/src/complex/MaterialEnumArrayRenderer.tsx

@@ -39,7 +39,7 @@ export const MaterialEnumArrayRenderer = ({
   ...otherProps
 }: ControlProps & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl) => {
   return (
-    <Hidden xlUp={!visible}>
+    <Hidden xsUp={!visible}>
       <FormControl component='fieldset'>
         <FormGroup row>
           {options.map((option: any, index: number) => {

package/src/complex/MaterialTableControl.tsx

@@ -57,9 +57,11 @@ import {
   encode,
   ArrayTranslations,
 } from '@jsonforms/core';
-import DeleteIcon from '@mui/icons-material/Delete';
-import ArrowDownward from '@mui/icons-material/ArrowDownward';
-import ArrowUpward from '@mui/icons-material/ArrowUpward';
+import {
+  Delete as DeleteIcon,
+  ArrowDownward,
+  ArrowUpward,
+} from '@mui/icons-material';
 
 import { WithDeleteDialogSupport } from './DeleteDialog';
 import NoBorderTableCell from './NoBorderTableCell';
@@ -431,6 +433,7 @@ export class MaterialTableControl extends React.Component<
   render() {
     const {
       label,
+      description,
       path,
       schema,
       rootSchema,
@@ -456,6 +459,7 @@ export class MaterialTableControl extends React.Component<
             <TableToolbar
               errors={errors}
               label={label}
+              description={description}
               addItem={this.addItem}
               numColumns={isObjectSchema ? headerCells.length : 1}
               path={path}

package/src/complex/TableToolbar.tsx

@@ -29,8 +29,16 @@ import {
   JsonSchema,
   ArrayTranslations,
 } from '@jsonforms/core';
-import { IconButton, TableRow, Tooltip, Grid, Typography } from '@mui/material';
-import AddIcon from '@mui/icons-material/Add';
+import {
+  IconButton,
+  TableRow,
+  Tooltip,
+  Grid,
+  Typography,
+  FormHelperText,
+  Stack,
+} from '@mui/material';
+import { Add as AddIcon } from '@mui/icons-material';
 import ValidationIcon from './ValidationIcon';
 import NoBorderTableCell from './NoBorderTableCell';
 
@@ -38,6 +46,7 @@ export interface MaterialTableToolbarProps {
   numColumns: number;
   errors: string;
   label: string;
+  description: string;
   path: string;
   uischema: ControlElement;
   schema: JsonSchema;
@@ -56,6 +65,7 @@ const TableToolbar = React.memo(function TableToolbar({
   numColumns,
   errors,
   label,
+  description,
   path,
   addItem,
   schema,
@@ -66,26 +76,29 @@ const TableToolbar = React.memo(function TableToolbar({
   return (
     <TableRow>
       <NoBorderTableCell colSpan={numColumns}>
-        <Grid
-          container
-          justifyContent={'flex-start'}
-          alignItems={'center'}
-          spacing={2}
-        >
-          <Grid item>
-            <Typography variant={'h6'}>{label}</Typography>
-          </Grid>
-          <Grid item>
-            {errors.length !== 0 && (
-              <Grid item>
-                <ValidationIcon
-                  id='tooltip-validation'
-                  errorMessages={errors}
-                />
-              </Grid>
-            )}
+        <Stack>
+          <Grid
+            container
+            justifyContent={'flex-start'}
+            alignItems={'center'}
+            spacing={2}
+          >
+            <Grid item>
+              <Typography variant={'h6'}>{label}</Typography>
+            </Grid>
+            <Grid item>
+              {errors.length !== 0 && (
+                <Grid item>
+                  <ValidationIcon
+                    id='tooltip-validation'
+                    errorMessages={errors}
+                  />
+                </Grid>
+              )}
+            </Grid>
           </Grid>
-        </Grid>
+          {description && <FormHelperText>{description}</FormHelperText>}
+        </Stack>
       </NoBorderTableCell>
       {enabled ? (
         <NoBorderTableCell align='right' style={fixedCellSmall}>

package/src/complex/ValidationIcon.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import { ErrorOutline as ErrorOutlineIcon } from '@mui/icons-material';
 import { Badge, Tooltip, styled } from '@mui/material';
 
 const StyledBadge = styled(Badge)(({ theme }: any) => ({

package/src/controls/MaterialDateControl.tsx

@@ -23,9 +23,10 @@
   THE SOFTWARE.
 */
 import merge from 'lodash/merge';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   ControlProps,
+  defaultDateFormat,
   isDateControl,
   isDescriptionHidden,
   RankedTester,
@@ -35,7 +36,12 @@ import { withJsonFormsControlProps } from '@jsonforms/react';
 import { FormHelperText, Hidden } from '@mui/material';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { createOnChangeHandler, getData, useFocus } from '../util';
+import {
+  createOnBlurHandler,
+  createOnChangeHandler,
+  getData,
+  useFocus,
+} from '../util';
 
 export const MaterialDateControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
@@ -62,8 +68,10 @@ export const MaterialDateControl = (props: ControlProps) => {
     appliedUiSchemaOptions.showUnfocusedDescription
   );
 
+  const [key, setKey] = useState<number>(0);
+
   const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
-  const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? 'YYYY-MM-DD';
+  const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? defaultDateFormat;
 
   const views = appliedUiSchemaOptions.views ?? ['year', 'day'];
 
@@ -73,20 +81,36 @@ export const MaterialDateControl = (props: ControlProps) => {
     ? errors
     : null;
   const secondFormHelperText = showDescription && !isValid ? errors : null;
+
+  const updateChild = useCallback(() => setKey((key) => key + 1), []);
+
   const onChange = useMemo(
     () => createOnChangeHandler(path, handleChange, saveFormat),
     [path, handleChange, saveFormat]
   );
 
+  const onBlurHandler = useMemo(
+    () =>
+      createOnBlurHandler(
+        path,
+        handleChange,
+        format,
+        saveFormat,
+        updateChild,
+        onBlur
+      ),
+    [path, handleChange, format, saveFormat, updateChild]
+  );
   const value = getData(data, saveFormat);
 
   return (
     <Hidden xsUp={!visible}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DatePicker
+          key={key}
           label={label}
           value={value}
-          onChange={onChange}
+          onAccept={onChange}
           format={format}
           views={views}
           disabled={!enabled}
@@ -109,7 +133,7 @@ export const MaterialDateControl = (props: ControlProps) => {
               },
               InputLabelProps: data ? { shrink: true } : undefined,
               onFocus: onFocus,
-              onBlur: onBlur,
+              onBlur: onBlurHandler,
             },
           }}
         />

package/src/controls/MaterialDateTimeControl.tsx

@@ -22,10 +22,11 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import merge from 'lodash/merge';
 import {
   ControlProps,
+  defaultDateTimeFormat,
   isDateTimeControl,
   isDescriptionHidden,
   RankedTester,
@@ -35,7 +36,12 @@ import { withJsonFormsControlProps } from '@jsonforms/react';
 import { FormHelperText, Hidden } from '@mui/material';
 import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { createOnChangeHandler, getData, useFocus } from '../util';
+import {
+  createOnBlurHandler,
+  createOnChangeHandler,
+  getData,
+  useFocus,
+} from '../util';
 
 export const MaterialDateTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
@@ -64,7 +70,10 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
   );
 
   const format = appliedUiSchemaOptions.dateTimeFormat ?? 'YYYY-MM-DD HH:mm';
-  const saveFormat = appliedUiSchemaOptions.dateTimeSaveFormat ?? undefined;
+  const saveFormat =
+    appliedUiSchemaOptions.dateTimeSaveFormat ?? defaultDateTimeFormat;
+
+  const [key, setKey] = useState<number>(0);
 
   const views = appliedUiSchemaOptions.views ?? [
     'year',
@@ -80,20 +89,35 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
     : null;
   const secondFormHelperText = showDescription && !isValid ? errors : null;
 
+  const updateChild = useCallback(() => setKey((key) => key + 1), []);
+
   const onChange = useMemo(
     () => createOnChangeHandler(path, handleChange, saveFormat),
     [path, handleChange, saveFormat]
   );
 
+  const onBlurHandler = useMemo(
+    () =>
+      createOnBlurHandler(
+        path,
+        handleChange,
+        format,
+        saveFormat,
+        updateChild,
+        onBlur
+      ),
+    [path, handleChange, format, saveFormat, updateChild]
+  );
   const value = getData(data, saveFormat);
 
   return (
     <Hidden xsUp={!visible}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DateTimePicker
+          key={key}
           label={label}
           value={value}
-          onChange={onChange}
+          onAccept={onChange}
           format={format}
           ampm={!!appliedUiSchemaOptions.ampm}
           views={views}
@@ -117,7 +141,7 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
               },
               InputLabelProps: data ? { shrink: true } : undefined,
               onFocus: onFocus,
-              onBlur: onBlur,
+              onBlur: onBlurHandler,
             },
           }}
         />

package/src/controls/MaterialTimeControl.tsx

@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import merge from 'lodash/merge';
 import {
   ControlProps,
@@ -30,12 +30,18 @@ import {
   isDescriptionHidden,
   RankedTester,
   rankWith,
+  defaultTimeFormat,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { FormHelperText, Hidden } from '@mui/material';
 import { TimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { createOnChangeHandler, getData, useFocus } from '../util';
+import {
+  createOnBlurHandler,
+  createOnChangeHandler,
+  getData,
+  useFocus,
+} from '../util';
 
 export const MaterialTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
@@ -56,6 +62,8 @@ export const MaterialTimeControl = (props: ControlProps) => {
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const isValid = errors.length === 0;
 
+  const [key, setKey] = useState<number>(0);
+
   const showDescription = !isDescriptionHidden(
     visible,
     description,
@@ -64,7 +72,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
   );
 
   const format = appliedUiSchemaOptions.timeFormat ?? 'HH:mm';
-  const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? 'HH:mm:ss';
+  const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? defaultTimeFormat;
 
   const views = appliedUiSchemaOptions.views ?? ['hours', 'minutes'];
 
@@ -75,19 +83,35 @@ export const MaterialTimeControl = (props: ControlProps) => {
     : null;
   const secondFormHelperText = showDescription && !isValid ? errors : null;
 
+  const updateChild = useCallback(() => setKey((key) => key + 1), []);
+
   const onChange = useMemo(
     () => createOnChangeHandler(path, handleChange, saveFormat),
     [path, handleChange, saveFormat]
   );
 
+  const onBlurHandler = useMemo(
+    () =>
+      createOnBlurHandler(
+        path,
+        handleChange,
+        format,
+        saveFormat,
+        updateChild,
+        onBlur
+      ),
+    [path, handleChange, format, saveFormat, updateChild]
+  );
   const value = getData(data, saveFormat);
+
   return (
     <Hidden xsUp={!visible}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <TimePicker
+          key={key}
           label={label}
           value={value}
-          onChange={onChange}
+          onAccept={onChange}
           format={format}
           ampm={!!appliedUiSchemaOptions.ampm}
           views={views}
@@ -111,7 +135,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
               },
               InputLabelProps: data ? { shrink: true } : undefined,
               onFocus: onFocus,
-              onBlur: onBlur,
+              onBlur: onBlurHandler,
             },
           }}
         />

package/src/layouts/ArrayToolbar.tsx

@@ -1,10 +1,19 @@
-import { Grid, IconButton, Toolbar, Tooltip, Typography } from '@mui/material';
+import {
+  FormHelperText,
+  Grid,
+  IconButton,
+  Stack,
+  Toolbar,
+  Tooltip,
+  Typography,
+} from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import React from 'react';
 import ValidationIcon from '../complex/ValidationIcon';
 import { ArrayTranslations } from '@jsonforms/core';
 export interface ArrayLayoutToolbarProps {
   label: string;
+  description: string;
   errors: string;
   path: string;
   enabled: boolean;
@@ -14,6 +23,7 @@ export interface ArrayLayoutToolbarProps {
 }
 export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
   label,
+  description,
   errors,
   addItem,
   path,
@@ -23,51 +33,54 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
 }: ArrayLayoutToolbarProps) {
   return (
     <Toolbar disableGutters={true}>
-      <Grid container alignItems='center' justifyContent='space-between'>
-        <Grid item>
-          <Grid
-            container
-            justifyContent={'flex-start'}
-            alignItems={'center'}
-            spacing={2}
-          >
-            <Grid item>
-              <Typography variant={'h6'}>{label}</Typography>
+      <Stack>
+        <Grid container alignItems='center' justifyContent='space-between'>
+          <Grid item>
+            <Grid
+              container
+              justifyContent={'flex-start'}
+              alignItems={'center'}
+              spacing={2}
+            >
+              <Grid item>
+                <Typography variant={'h6'}>{label}</Typography>
+              </Grid>
+              <Grid item>
+                {errors.length !== 0 && (
+                  <Grid item>
+                    <ValidationIcon
+                      id='tooltip-validation'
+                      errorMessages={errors}
+                    />
+                  </Grid>
+                )}
+              </Grid>
             </Grid>
+          </Grid>
+          {enabled && (
             <Grid item>
-              {errors.length !== 0 && (
+              <Grid container>
                 <Grid item>
-                  <ValidationIcon
-                    id='tooltip-validation'
-                    errorMessages={errors}
-                  />
-                </Grid>
-              )}
-            </Grid>
-          </Grid>
-        </Grid>
-        {enabled && (
-          <Grid item>
-            <Grid container>
-              <Grid item>
-                <Tooltip
-                  id='tooltip-add'
-                  title={translations.addTooltip}
-                  placement='bottom'
-                >
-                  <IconButton
-                    aria-label={translations.addTooltip}
-                    onClick={addItem(path, createDefault())}
-                    size='large'
+                  <Tooltip
+                    id='tooltip-add'
+                    title={translations.addTooltip}
+                    placement='bottom'
                   >
-                    <AddIcon />
-                  </IconButton>
-                </Tooltip>
+                    <IconButton
+                      aria-label={translations.addTooltip}
+                      onClick={addItem(path, createDefault())}
+                      size='large'
+                    >
+                      <AddIcon />
+                    </IconButton>
+                  </Tooltip>
+                </Grid>
               </Grid>
             </Grid>
-          </Grid>
-        )}
-      </Grid>
+          )}
+        </Grid>
+        {description && <FormHelperText>{description}</FormHelperText>}
+      </Stack>
     </Toolbar>
   );
 });

package/src/layouts/ExpandPanelRenderer.tsx

@@ -40,10 +40,12 @@ import {
   Grid,
   IconButton,
 } from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import DeleteIcon from '@mui/icons-material/Delete';
-import ArrowUpward from '@mui/icons-material/ArrowUpward';
-import ArrowDownward from '@mui/icons-material/ArrowDownward';
+import {
+  ExpandMore as ExpandMoreIcon,
+  Delete as DeleteIcon,
+  ArrowUpward,
+  ArrowDownward,
+} from '@mui/icons-material';
 
 const iconStyle: any = { float: 'right' };