@jsonforms/material-renderers 3.0.0-beta.2 → 3.0.0-beta.5

package/lib/layouts/MaterialArrayLayoutRenderer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ArrayLayoutProps, RankedTester } from '@jsonforms/core';
-export declare const MaterialArrayLayoutRenderer: ({ visible, enabled, id, uischema, schema, label, rootSchema, renderers, cells, data, path, errors, uischemas, addItem }: ArrayLayoutProps) => JSX.Element;
+export declare const MaterialArrayLayoutRenderer: ({ visible, addItem, ...props }: ArrayLayoutProps) => JSX.Element;
 export declare const materialArrayLayoutTester: RankedTester;
 declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
 export default _default;

package/lib/util/datejs.d.ts

@@ -1,3 +1,19 @@
+import { TextFieldProps } from '@mui/material';
 import dayjs from 'dayjs';
-export declare const createOnChangeHandler: (path: string, handleChange: (path: string, value: any) => void, saveFormat: string | undefined) => (time: dayjs.Dayjs) => void;
+import React from 'react';
+export declare const createOnChangeHandler: (path: string, handleChange: (path: string, value: any) => void, saveFormat: string | undefined) => (time: dayjs.Dayjs, textInputValue: string) => void;
 export declare const getData: (data: any, saveFormat: string | undefined) => dayjs.Dayjs | null;
+declare type ResettableTextFieldProps = TextFieldProps & {
+    rawValue: any;
+    dayjsValueIsValid: boolean;
+    valueInInputFormat: string;
+    focused: boolean;
+};
+/**
+ * The dayjs formatter/parser is very lenient and for example ignores additional digits and/or characters.
+ * In these cases the input text can look vastly different than the actual value stored in the data.
+ * The 'ResettableTextField' component adjusts the text field to reflect the actual value stored in the data
+ * once it's no longer 'focused', i.e. when the user stops editing.
+ */
+export declare const ResettableTextField: React.FC<ResettableTextFieldProps>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/material-renderers",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.5",
   "description": "Material Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -74,10 +74,10 @@
     "dayjs": "1.10.6"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.5.0",
+    "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "3.0.0-beta.2",
-    "@jsonforms/react": "3.0.0-beta.2",
+    "@jsonforms/core": "3.0.0-beta.5",
+    "@jsonforms/react": "3.0.0-beta.5",
     "@mui/icons-material": "^5.0.0",
     "@mui/lab": "^5.0.0-alpha.54",
     "@mui/material": "^5.0.0"
@@ -85,8 +85,8 @@
   "devDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "^3.0.0-beta.2",
-    "@jsonforms/react": "^3.0.0-beta.2",
+    "@jsonforms/core": "^3.0.0-beta.5",
+    "@jsonforms/react": "^3.0.0-beta.5",
     "@mui/icons-material": "^5.2.0",
     "@mui/lab": "^5.0.0-alpha.58",
     "@mui/material": "^5.2.2",
@@ -114,5 +114,5 @@
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.9.0"
   },
-  "gitHead": "8e9c14dcf049ee4b31baf9c40a86b394cba33139"
+  "gitHead": "b66023cf081e56baa3194ac3d6658e23fd267bf9"
 }

package/src/additional/MaterialListWithDetailRenderer.tsx

@@ -60,7 +60,8 @@ export const MaterialListWithDetailRenderer = ({
   data,
   renderers,
   cells,
-  config
+  config,
+  rootSchema
 }: ArrayLayoutProps) => {
   const [selectedIndex, setSelectedIndex] = useState(undefined);
   const handleRemoveItem = useCallback(
@@ -90,9 +91,10 @@ export const MaterialListWithDetailRenderer = ({
         uischema.scope,
         path,
         undefined,
-        uischema
+        uischema,
+        rootSchema
       ),
-    [uischemas, schema, uischema.scope, path, uischema]
+    [uischemas, schema, uischema.scope, path, uischema, rootSchema]
   );
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
 

package/src/complex/MaterialTableControl.tsx

@@ -370,7 +370,7 @@ const TableRows = ({
             moveDownCreator={moveDown}
             enableUp={index !== 0}
             enableDown={index !== data - 1}
-            showSortButtons={appliedUiSchemaOptions.showSortButtons}
+            showSortButtons={appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons}
             enabled={enabled}
             cells={cells}
             path={path}

package/src/controls/MaterialDateControl.tsx

@@ -32,13 +32,18 @@ import {
   rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden, TextField } from '@mui/material';
+import { FormHelperText, Hidden } from '@mui/material';
 import {
   DatePicker,
   LocalizationProvider 
 } from '@mui/lab';
 import AdapterDayjs from '@mui/lab/AdapterDayjs';
-import { createOnChangeHandler, getData, useFocus } from '../util';
+import {
+  createOnChangeHandler,
+  getData,
+  ResettableTextField,
+  useFocus,
+} from '../util';
 
 export const MaterialDateControl = (props: ControlProps)=> {
   const [focused, onFocus, onBlur] = useFocus();
@@ -68,6 +73,8 @@ export const MaterialDateControl = (props: ControlProps)=> {
   const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
   const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? 'YYYY-MM-DD';
 
+  const views = appliedUiSchemaOptions.views ?? ['year', 'day'];
+
   const firstFormHelperText = showDescription
     ? description
     : !isValid
@@ -80,30 +87,40 @@ export const MaterialDateControl = (props: ControlProps)=> {
     saveFormat
   ),[path, handleChange, saveFormat]);
 
+  const value = getData(data, saveFormat);
+  const valueInInputFormat = value ? value.format(format) : '';
+
   return (
     <Hidden xsUp={!visible}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DatePicker
           label={label}
-          value={getData(data, saveFormat)}
+          value={value}
           clearable
           onChange={onChange}
           inputFormat={format}
           disableMaskedInput
-          views={appliedUiSchemaOptions.views}
+          views={views}
           disabled={!enabled}
           cancelText={appliedUiSchemaOptions.cancelLabel}
           clearText={appliedUiSchemaOptions.clearLabel}
           okText={appliedUiSchemaOptions.okLabel}
           renderInput={params => (
-            <TextField 
+            <ResettableTextField 
               {...params}
+              rawValue={data}
+              dayjsValueIsValid={value !== null}
+              valueInInputFormat={valueInInputFormat}
+              focused={focused}
               id={id + '-input'}
               required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
               autoFocus={appliedUiSchemaOptions.focus}
               error={!isValid}
               fullWidth={!appliedUiSchemaOptions.trim}
-              inputProps={{ ...params.inputProps, type: 'text' }}
+              inputProps={{
+                ...params.inputProps,
+                type: 'text',
+              }}
               InputLabelProps={data ? { shrink: true } : undefined}
               onFocus={onFocus}
               onBlur={onBlur}

package/src/controls/MaterialDateTimeControl.tsx

@@ -32,13 +32,18 @@ import {
   rankWith
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden, TextField } from '@mui/material';
+import { FormHelperText, Hidden } from '@mui/material';
 import {
   DateTimePicker,
   LocalizationProvider 
 } from '@mui/lab';
 import AdapterDayjs from '@mui/lab/AdapterDayjs';
-import { createOnChangeHandler, getData, useFocus } from '../util';
+import {
+  createOnChangeHandler,
+  getData,
+  ResettableTextField,
+  useFocus
+} from '../util';
 
 export const MaterialDateTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
@@ -69,6 +74,8 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
   const format = appliedUiSchemaOptions.dateTimeFormat ?? 'YYYY-MM-DD HH:mm';
   const saveFormat = appliedUiSchemaOptions.dateTimeSaveFormat ?? undefined;
 
+  const views = appliedUiSchemaOptions.views ?? ['year', 'day', 'hours', 'minutes'];
+
   const firstFormHelperText = showDescription
     ? description
     : !isValid
@@ -82,31 +89,41 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
     saveFormat
   ),[path, handleChange, saveFormat]);
 
+  const value = getData(data, saveFormat);
+  const valueInInputFormat = value ? value.format(format) : '';
+
   return (
     <Hidden xsUp={!visible}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DateTimePicker
           label={label}
-          value={getData(data, saveFormat)}
+          value={value}
           clearable
           onChange={onChange}
           inputFormat={format}
           disableMaskedInput
           ampm={!!appliedUiSchemaOptions.ampm}
-          views={appliedUiSchemaOptions.views}
+          views={views}
           disabled={!enabled}
           cancelText={appliedUiSchemaOptions.cancelLabel}
           clearText={appliedUiSchemaOptions.clearLabel}
           okText={appliedUiSchemaOptions.okLabel}
           renderInput={params => (
-            <TextField 
+            <ResettableTextField 
               {...params}
+              rawValue={data}
+              dayjsValueIsValid={value !== null}
+              valueInInputFormat={valueInInputFormat}
+              focused={focused}
               id={id + '-input'}
               required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
               autoFocus={appliedUiSchemaOptions.focus}
               error={!isValid}
               fullWidth={!appliedUiSchemaOptions.trim}
-              inputProps={{ ...params.inputProps, type: 'text' }}
+              inputProps={{
+                ...params.inputProps,
+                type: 'text',
+              }}
               InputLabelProps={data ? { shrink: true } : undefined}
               onFocus={onFocus}
               onBlur={onBlur}

package/src/controls/MaterialTimeControl.tsx

@@ -32,13 +32,18 @@ import {
   rankWith
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden, TextField } from '@mui/material';
+import { FormHelperText, Hidden } from '@mui/material';
 import {
   TimePicker,
   LocalizationProvider 
 } from '@mui/lab';
 import AdapterDayjs from '@mui/lab/AdapterDayjs';
-import { createOnChangeHandler, getData, useFocus } from '../util';
+import {
+  createOnChangeHandler,
+  getData,
+  ResettableTextField,
+  useFocus
+} from '../util';
 
 export const MaterialTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
@@ -67,7 +72,9 @@ export const MaterialTimeControl = (props: ControlProps) => {
   );
 
   const format = appliedUiSchemaOptions.timeFormat ?? 'HH:mm';
-    const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? 'HH:mm:ss';
+  const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? 'HH:mm:ss';
+
+  const views = appliedUiSchemaOptions.views ?? ['hours', 'minutes'];
 
   const firstFormHelperText = showDescription
     ? description
@@ -82,31 +89,41 @@ export const MaterialTimeControl = (props: ControlProps) => {
     saveFormat
   ),[path, handleChange, saveFormat]);
 
+  const value = getData(data, saveFormat);
+  const valueInInputFormat = value ? value.format(format) : '';
+
   return (
     <Hidden xsUp={!visible}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <TimePicker
           label={label}
-          value={getData(data, saveFormat)}
+          value={value}
           clearable
           onChange={onChange}
           inputFormat={format}
           disableMaskedInput
           ampm={!!appliedUiSchemaOptions.ampm}
-          views={appliedUiSchemaOptions.views}
+          views={views}
           disabled={!enabled}
           cancelText={appliedUiSchemaOptions.cancelLabel}
           clearText={appliedUiSchemaOptions.clearLabel}
           okText={appliedUiSchemaOptions.okLabel}
           renderInput={params => (
-            <TextField 
+            <ResettableTextField 
               {...params}
+              rawValue={data}
+              dayjsValueIsValid={value !== null}
+              valueInInputFormat={valueInInputFormat}
+              focused={focused}
               id={id + '-input'}
               required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
               autoFocus={appliedUiSchemaOptions.focus}
               error={!isValid}
               fullWidth={!appliedUiSchemaOptions.trim}
-              inputProps={{ ...params.inputProps, type: 'text' }}
+              inputProps={{
+                ...params.inputProps,
+                type: 'text'
+              }}
               InputLabelProps={data ? { shrink: true } : undefined}
               onFocus={onFocus}
               onBlur={onBlur}

package/src/layouts/ExpandPanelRenderer.tsx

@@ -119,6 +119,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
   );
 
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const showSortButtons = appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayLayoutSortButtons;
 
   return (
     <Accordion
@@ -147,7 +148,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                   justifyContent='center'
                   alignItems='center'
                 >
-                  {appliedUiSchemaOptions.showSortButtons ? (
+                  {showSortButtons ? (
                     <Fragment>
                       <Grid item>
                         <IconButton

package/src/layouts/MaterialArrayLayoutRenderer.tsx

@@ -36,19 +36,8 @@ import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
 
 export const MaterialArrayLayoutRenderer = ({
   visible,
-  enabled,
-  id,
-  uischema,
-  schema,
-  label,
-  rootSchema,
-  renderers,
-  cells,
-  data,
-  path,
-  errors,
-  uischemas,
-  addItem
+  addItem,
+  ...props
 }: ArrayLayoutProps) => {
   const addItemCb = useCallback((p: string, value: any) => addItem(p, value), [
     addItem
@@ -56,20 +45,9 @@ export const MaterialArrayLayoutRenderer = ({
   return (
     <Hidden xsUp={!visible}>
       <MaterialArrayLayout
-        label={label}
-        uischema={uischema}
-        schema={schema}
-        id={id}
-        rootSchema={rootSchema}
-        errors={errors}
-        enabled={enabled}
         visible={visible}
-        data={data}
-        path={path}
         addItem={addItemCb}
-        renderers={renderers}
-        cells={cells}
-        uischemas={uischemas}
+        {...props}
       />
     </Hidden>
   );

package/src/mui-controls/MuiAutocomplete.tsx

@@ -77,6 +77,7 @@ export const MuiAutocomplete = (props: EnumCellProps & WithClassname & WithOptio
       fullWidth
       options={options}
       getOptionLabel={getOptionLabel || (option => option?.label)}
+      freeSolo={false}
       style={{ marginTop: 16 }}
       renderInput={params => (
         <Input

package/src/util/datejs.tsx

@@ -0,0 +1,73 @@
+import { TextField, TextFieldProps } from '@mui/material';
+import dayjs from 'dayjs';
+import customParsing from 'dayjs/plugin/customParseFormat';
+import React, { useRef} from 'react';
+
+// required for the custom save formats in the date, time and date-time pickers
+dayjs.extend(customParsing);
+
+export const createOnChangeHandler = (
+  path: string,
+  handleChange: (path: string, value: any) => void,
+  saveFormat: string | undefined
+) => (time: dayjs.Dayjs, textInputValue: string) => {
+  if (!time) {
+    handleChange(path, undefined);
+    return;
+  }
+  const result = dayjs(time).format(saveFormat);
+  handleChange(path, result === 'Invalid Date' ? textInputValue : result);
+};
+
+export const getData = (
+  data: any,
+  saveFormat: string | undefined
+): dayjs.Dayjs | null => {
+  if (!data) {
+    return null;
+  }
+  const dayjsData = dayjs(data, saveFormat);
+  if (dayjsData.toString() === 'Invalid Date') {
+    return null;
+  }
+  return dayjsData;
+};
+
+
+interface InputRef {
+  lastInput: string;
+  toShow: string;
+}
+
+type ResettableTextFieldProps = TextFieldProps & {
+  rawValue: any;
+  dayjsValueIsValid: boolean;
+  valueInInputFormat: string;
+  focused: boolean;
+}
+
+/**
+ * The dayjs formatter/parser is very lenient and for example ignores additional digits and/or characters.
+ * In these cases the input text can look vastly different than the actual value stored in the data.
+ * The 'ResettableTextField' component adjusts the text field to reflect the actual value stored in the data
+ * once it's no longer 'focused', i.e. when the user stops editing.
+ */
+export const ResettableTextField: React.FC<ResettableTextFieldProps> = ({ rawValue, dayjsValueIsValid, valueInInputFormat, focused, inputProps, ...props }) => {
+  const value = useRef<InputRef>({ lastInput: inputProps?.value, toShow: inputProps?.value });
+  if (!focused) {
+    // The input text is not focused, therefore let's show the value actually stored in the data
+    if (!dayjsValueIsValid) {
+      // pass through the "raw" value in case it can't be formatted by dayjs
+      value.current.toShow = typeof rawValue === 'string' || rawValue === null || rawValue === undefined ? rawValue : JSON.stringify(rawValue)
+    } else {
+      // otherwise use the specified format
+      value.current.toShow = valueInInputFormat;
+    }
+  }
+  if (focused && inputProps?.value !== value.current.lastInput) {
+    // Show the current text the user is typing into the text input
+    value.current.lastInput = inputProps?.value;
+    value.current.toShow = inputProps?.value;
+  }
+  return <TextField {...props} inputProps={{ ...inputProps, value: value.current.toShow || '' }} />
+}