@jsonforms/material-renderers 3.0.0-alpha.1 → 3.0.0-alpha.2

package/lib/util/focus.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocus = void 0;
+/*
+  The MIT License
+  
+  Copyright (c) 2021 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
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+var react_1 = require("react");
+var useFocus = function () {
+    var _a = react_1.useState(false), focused = _a[0], setFocused = _a[1];
+    var onFocus = react_1.useCallback(function () { return setFocused(true); }, []);
+    var onBlur = react_1.useCallback(function () { return setFocused(false); }, []);
+    return [focused, onFocus, onBlur];
+};
+exports.useFocus = useFocus;
+//# sourceMappingURL=focus.js.map

package/lib/util/focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.js","sourceRoot":"","sources":["../../src/util/focus.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBE;AACF,+BAA4C;AAErC,IAAM,QAAQ,GAAG;IACd,IAAA,KAAwB,gBAAQ,CAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IAC9C,IAAM,OAAO,GAAG,mBAAW,CAAC,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,EAAE,EAAE,CAAC,CAAC;IACxD,IAAM,MAAM,GAAG,mBAAW,CAAC,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EAAE,EAAE,CAAC,CAAC;IACxD,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;AACtC,CAAC,CAAC;AALW,QAAA,QAAQ,YAKnB"}

package/lib/util/index.d.ts

@@ -1,3 +1,5 @@
 export * from './datejs';
 export * from './layout';
 export * from './theme';
+export * from './debounce';
+export * from './focus';

package/lib/util/index.js

@@ -27,4 +27,7 @@ var tslib_1 = require("tslib");
 */
 tslib_1.__exportStar(require("./datejs"), exports);
 tslib_1.__exportStar(require("./layout"), exports);
+tslib_1.__exportStar(require("./theme"), exports);
+tslib_1.__exportStar(require("./debounce"), exports);
+tslib_1.__exportStar(require("./focus"), exports);
 //# sourceMappingURL=index.js.map

package/lib/util/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBE;AACF,mDAAyB;AACzB,mDAAyB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBE;AACF,mDAAyB;AACzB,mDAAyB;AACzB,kDAAwB;AACxB,qDAA2B;AAC3B,kDAAwB"}

package/lib/util/layout.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Ajv } from 'ajv';
+import { ComponentType } from 'react';
+import Ajv from 'ajv';
 import { JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry, JsonSchema, OwnPropsOfRenderer, UISchemaElement } from '@jsonforms/core';
 export declare const renderLayoutElements: (elements: UISchemaElement[], schema: JsonSchema, path: string, enabled: boolean, renderers?: JsonFormsRendererRegistryEntry[], cells?: JsonFormsCellRendererRegistryEntry[]) => JSX.Element[];
 export interface MaterialLayoutRendererProps extends OwnPropsOfRenderer {

package/lib/util/layout.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.withAjvProps = exports.MaterialLayoutRenderer = exports.renderLayoutElements = void 0;
 var tslib_1 = require("tslib");
 /*
   The MIT License
@@ -30,11 +31,12 @@ var react_1 = tslib_1.__importDefault(require("react"));
 var core_1 = require("@jsonforms/core");
 var react_2 = require("@jsonforms/react");
 var core_2 = require("@material-ui/core");
-exports.renderLayoutElements = function (elements, schema, path, enabled, renderers, cells) {
+var renderLayoutElements = function (elements, schema, path, enabled, renderers, cells) {
     return elements.map(function (child, index) { return (react_1.default.createElement(core_2.Grid, { item: true, key: path + "-" + index, xs: true },
         react_1.default.createElement(react_2.JsonFormsDispatch, { uischema: child, schema: schema, path: path, enabled: enabled, renderers: renderers, cells: cells }))); });
 };
-exports.MaterialLayoutRenderer = react_1.default.memo(function (_a) {
+exports.renderLayoutElements = renderLayoutElements;
+var MaterialLayoutRendererComponent = function (_a) {
     var visible = _a.visible, elements = _a.elements, schema = _a.schema, path = _a.path, enabled = _a.enabled, direction = _a.direction, renderers = _a.renderers, cells = _a.cells;
     if (isEmpty_1.default(elements)) {
         return null;
@@ -43,12 +45,14 @@ exports.MaterialLayoutRenderer = react_1.default.memo(function (_a) {
         return (react_1.default.createElement(core_2.Hidden, { xsUp: !visible },
             react_1.default.createElement(core_2.Grid, { container: true, direction: direction, spacing: direction === 'row' ? 2 : 0 }, exports.renderLayoutElements(elements, schema, path, enabled, renderers, cells))));
     }
-}, react_2.areEqual);
-exports.withAjvProps = function (Component) {
+};
+exports.MaterialLayoutRenderer = react_1.default.memo(MaterialLayoutRendererComponent);
+var withAjvProps = function (Component) {
     return function (props) {
         var ctx = react_2.useJsonForms();
         var ajv = core_1.getAjv({ jsonforms: tslib_1.__assign({}, ctx) });
         return (react_1.default.createElement(Component, tslib_1.__assign({}, props, { ajv: ajv })));
     };
 };
+exports.withAjvProps = withAjvProps;
 //# sourceMappingURL=layout.js.map

package/lib/util/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/util/layout.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBE;AACF,mEAAqC;AACrC,wDAA0B;AAG1B,wCAOyB;AACzB,0CAA6E;AAC7E,0CAAiD;AAEpC,QAAA,oBAAoB,GAAG,UAClC,QAA2B,EAC3B,MAAkB,EAClB,IAAY,EACZ,OAAgB,EAChB,SAA4C,EAC5C,KAA4C;IAE5C,OAAO,QAAQ,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,OAAA,CACpC,8BAAC,WAAI,IAAC,IAAI,QAAC,GAAG,EAAK,IAAI,SAAI,KAAO,EAAE,EAAE;QACpC,8BAAC,yBAAiB,IAChB,QAAQ,EAAE,KAAK,EACf,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,GACZ,CACG,CACR,EAXqC,CAWrC,CAAC,CAAC;AACL,CAAC,CAAC;AAMW,QAAA,sBAAsB,GAAG,eAAK,CAAC,IAAI,CAC9C,UAAC,EAS6B;QAR5B,oBAAO,EACP,sBAAQ,EACR,kBAAM,EACN,cAAI,EACJ,oBAAO,EACP,wBAAS,EACT,wBAAS,EACT,gBAAK;IAEL,IAAI,iBAAO,CAAC,QAAQ,CAAC,EAAE;QACrB,OAAO,IAAI,CAAC;KACb;SAAM;QACL,OAAO,CACL,8BAAC,aAAM,IAAC,IAAI,EAAE,CAAC,OAAO;YACpB,8BAAC,WAAI,IACH,SAAS,QACT,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAEnC,4BAAoB,CACnB,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,OAAO,EACP,SAAS,EACT,KAAK,CACN,CACI,CACA,CACV,CAAC;KACH;AACH,CAAC,EACD,gBAAQ,CACT,CAAC;AAMW,QAAA,YAAY,GAAG,UAAe,SAAsC;IAC/E,OAAA,UAAC,KAAQ;QACP,IAAM,GAAG,GAAG,oBAAY,EAAE,CAAC;QAC3B,IAAM,GAAG,GAAG,aAAM,CAAC,EAAC,SAAS,uBAAM,GAAG,CAAC,EAAC,CAAC,CAAC;QAE1C,OAAO,CAAC,8BAAC,SAAS,uBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC;IAC9C,CAAC;AALD,CAKC,CAAC"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/util/layout.tsx"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBE;AACF,mEAAqC;AACrC,wDAA0B;AAG1B,wCAOyB;AACzB,0CAAmE;AACnE,0CAAiD;AAE1C,IAAM,oBAAoB,GAAG,UAClC,QAA2B,EAC3B,MAAkB,EAClB,IAAY,EACZ,OAAgB,EAChB,SAA4C,EAC5C,KAA4C;IAE5C,OAAO,QAAQ,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,OAAA,CACpC,8BAAC,WAAI,IAAC,IAAI,QAAC,GAAG,EAAK,IAAI,SAAI,KAAO,EAAE,EAAE;QACpC,8BAAC,yBAAiB,IAChB,QAAQ,EAAE,KAAK,EACf,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,GACZ,CACG,CACR,EAXqC,CAWrC,CAAC,CAAC;AACL,CAAC,CAAC;AApBW,QAAA,oBAAoB,wBAoB/B;AAMF,IAAM,+BAA+B,GACnC,UAAC,EAS6B;QAR5B,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,SAAS,eAAA,EACT,SAAS,eAAA,EACT,KAAK,WAAA;IAEL,IAAI,iBAAO,CAAC,QAAQ,CAAC,EAAE;QACrB,OAAO,IAAI,CAAC;KACb;SAAM;QACL,OAAO,CACL,8BAAC,aAAM,IAAC,IAAI,EAAE,CAAC,OAAO;YACpB,8BAAC,WAAI,IACH,SAAS,QACT,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAEnC,4BAAoB,CACnB,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,OAAO,EACP,SAAS,EACT,KAAK,CACN,CACI,CACA,CACV,CAAC;KACH;AACH,CAAC,CAAC;AACS,QAAA,sBAAsB,GAAG,eAAK,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;AAM3E,IAAM,YAAY,GAAG,UAAe,SAAsC;IAC/E,OAAA,UAAC,KAAQ;QACP,IAAM,GAAG,GAAG,oBAAY,EAAE,CAAC;QAC3B,IAAM,GAAG,GAAG,aAAM,CAAC,EAAC,SAAS,uBAAM,GAAG,CAAC,EAAC,CAAC,CAAC;QAE1C,OAAO,CAAC,8BAAC,SAAS,uBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC;IAC9C,CAAC;AALD,CAKC,CAAC;AANS,QAAA,YAAY,gBAMrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/material-renderers",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "Material Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -79,8 +79,8 @@
     "@material-ui/lab": "^4.0.0-alpha.56"
   },
   "devDependencies": {
-    "@jsonforms/core": "^3.0.0-alpha.1",
-    "@jsonforms/react": "^3.0.0-alpha.1",
+    "@jsonforms/core": "^3.0.0-alpha.2",
+    "@jsonforms/react": "^3.0.0-alpha.2",
     "@material-ui/core": "^4.7.0",
     "@material-ui/icons": "^4.5.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
@@ -101,10 +101,10 @@
     "tslint": "^5.20.1",
     "tslint-loader": "^3.5.4",
     "typedoc": "^0.19.2",
-    "typescript": "3.8.3",
+    "typescript": "4.2.3",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.9.0"
   },
-  "gitHead": "2f74339c76b9f1456342ed0df851d199d37cc61e"
+  "gitHead": "7532a3e16558d9f0934bd5c602ccbe3a35ed9dab"
 }

package/src/cells/MaterialTimeCell.tsx

@@ -37,4 +37,5 @@ export const MaterialTimeCell = (props: CellProps & WithClassname) => (
   <MuiInputTime {...props} />
 );
 export const materialTimeCellTester: RankedTester = rankWith(2, isTimeControl);
+
 export default withJsonFormsCellProps(MaterialTimeCell);

package/src/complex/MaterialAllOfRenderer.tsx

@@ -37,7 +37,7 @@ import {
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAllOfProps } from '@jsonforms/react';
 
-const MaterialAllOfRenderer = ({
+export const MaterialAllOfRenderer = ({
   schema,
   rootSchema,
   visible,
@@ -95,4 +95,5 @@ export const materialAllOfControlTester: RankedTester = rankWith(
   3,
   isAllOfControl
 );
+
 export default withJsonFormsAllOfProps(MaterialAllOfRenderer);

package/src/complex/MaterialAnyOfRenderer.tsx

@@ -37,7 +37,7 @@ import { JsonFormsDispatch, withJsonFormsAnyOfProps } from '@jsonforms/react';
 import { Hidden, Tab, Tabs } from '@material-ui/core';
 import CombinatorProperties from './CombinatorProperties';
 
-const MaterialAnyOfRenderer = ({
+export const MaterialAnyOfRenderer = ({
   schema,
   rootSchema,
   indexOfFittingSchema,
@@ -97,4 +97,5 @@ export const materialAnyOfControlTester: RankedTester = rankWith(
   3,
   isAnyOfControl
 );
+
 export default withJsonFormsAnyOfProps(MaterialAnyOfRenderer);

package/src/complex/MaterialEnumArrayRenderer.tsx

@@ -35,6 +35,7 @@ export const MaterialEnumArrayRenderer = ({
   data,
   addItem,
   removeItem,
+  handleChange,
   ...otherProps
 }: ControlProps & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl) => {
   return (

package/src/complex/MaterialObjectRenderer.tsx

@@ -35,7 +35,7 @@ import { JsonFormsDispatch, withJsonFormsDetailProps } from '@jsonforms/react';
 import { Hidden } from '@material-ui/core';
 import React, { useMemo } from 'react';
 
-const MaterialObjectRenderer = ({
+export const MaterialObjectRenderer = ({
   renderers,
   cells,
   uischemas,
@@ -84,4 +84,5 @@ export const materialObjectControlTester: RankedTester = rankWith(
   2,
   isObjectControl
 );
+
 export default withJsonFormsDetailProps(MaterialObjectRenderer);

package/src/complex/MaterialOneOfRenderer.tsx

@@ -26,7 +26,7 @@ import React, { useCallback, useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 
 import {
-  CombinatorProps,
+  CombinatorRendererProps,
   createCombinatorRenderInfos,
   createDefaultValue,
   isOneOfControl,
@@ -57,9 +57,8 @@ export interface OwnOneOfProps extends OwnPropsOfControl {
   indexOfFittingSchema?: number;
 }
 
-const oneOf = 'oneOf';
-const MaterialOneOfRenderer =
-  ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data }: CombinatorProps) => {
+export const MaterialOneOfRenderer =
+  ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data }: CombinatorRendererProps) => {
     const [open, setOpen] = useState(false);
     const [selectedIndex, setSelectedIndex] = useState(indexOfFittingSchema || 0);
     const [newSelectedIndex, setNewSelectedIndex] = useState(0);
@@ -67,11 +66,11 @@ const MaterialOneOfRenderer =
     const cancel = useCallback(() => {
       setOpen(false);
     }, [setOpen]);
-    const _schema = resolveSubSchemas(schema, rootSchema, oneOf);
+    const _schema = resolveSubSchemas(schema, rootSchema, 'oneOf');
     const oneOfRenderInfos = createCombinatorRenderInfos(
       (_schema as JsonSchema).oneOf,
       rootSchema,
-      oneOf,
+      'oneOf',
       uischema,
       path,
       uischemas
@@ -150,4 +149,5 @@ const MaterialOneOfRenderer =
   };
 
 export const materialOneOfControlTester: RankedTester = rankWith(3, isOneOfControl);
+
 export default withJsonFormsOneOfProps(MaterialOneOfRenderer);

package/src/complex/MaterialTableControl.tsx

@@ -31,7 +31,7 @@ import {
 } from '@jsonforms/react';
 import startCase from 'lodash/startCase';
 import range from 'lodash/range';
-import React, { Fragment } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import {
   FormHelperText,
   Grid,
@@ -195,20 +195,19 @@ const controlWithoutLabel = (scope: string): ControlElement => ({
   label: false
 });
 
-const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
-  const ctx = useJsonForms();
-  const {
-    path,
-    propName,
-    schema,
-    rootSchema,
-    errors,
-    enabled,
-    renderers,
-    cells
-  } = ctxToNonEmptyCellProps(ctx, ownProps);
+interface NonEmptyCellComponentProps {
+  path: string,
+  propName?: string,
+  schema: JsonSchema,
+  rootSchema: JsonSchema,
+  errors: string,
+  enabled: boolean,
+  renderers?: JsonFormsRendererRegistryEntry[],
+  cells?: JsonFormsCellRendererRegistryEntry[],
+  isValid: boolean
+}
+const NonEmptyCellComponent = React.memo(({path, propName, schema,rootSchema, errors, enabled, renderers, cells, isValid}:NonEmptyCellComponentProps) => {
 
-  const isValid = isEmpty(errors);
   return (
     <NoBorderTableCell>
       {schema.properties ? (
@@ -237,35 +236,47 @@ const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
       <FormHelperText error={!isValid}>{!isValid && errors}</FormHelperText>
     </NoBorderTableCell>
   );
+});
+
+const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
+  const ctx = useJsonForms();
+  const emptyCellProps = ctxToNonEmptyCellProps(ctx, ownProps);
+
+  const isValid = isEmpty(emptyCellProps.errors);
+  return <NonEmptyCellComponent {...emptyCellProps} isValid={isValid}/>
 };
 
 interface NonEmptyRowProps {
   childPath: string;
   schema: JsonSchema;
   rowIndex: number;
-  moveUp: () => void;
-  moveDown: () => void;
+  moveUpCreator: (path:string, position: number)=> ()=> void;
+  moveDownCreator: (path:string, position: number)=> ()=> void;
   enableUp: boolean;
   enableDown: boolean;
   showSortButtons: boolean;
   enabled: boolean;
   cells?: JsonFormsCellRendererRegistryEntry[];
+  path: string;
 }
 
-const NonEmptyRow = React.memo(
+const NonEmptyRowComponent = 
   ({
     childPath,
     schema,
     rowIndex,
     openDeleteDialog,
-    moveUp,
-    moveDown,
+    moveUpCreator,
+    moveDownCreator,
     enableUp,
     enableDown,
     showSortButtons,
     enabled,
-    cells
+    cells,
+    path
   }: NonEmptyRowProps & WithDeleteDialogSupport) => {
+    const moveUp = useMemo(() => moveUpCreator(path, rowIndex),[moveUpCreator, path, rowIndex]);
+    const moveDown = useMemo(() => moveDownCreator(path, rowIndex),[moveDownCreator, path, rowIndex]);
     return (
       <TableRow key={childPath} hover>
         {generateCells(NonEmptyCell, schema, childPath, enabled, cells)}
@@ -314,8 +325,8 @@ const NonEmptyRow = React.memo(
         ) : null}
       </TableRow>
     );
-  }
-);
+  };
+export const NonEmptyRow = React.memo(NonEmptyRowComponent);
 interface TableRowsProp {
   data: number;
   path: string;
@@ -359,13 +370,14 @@ const TableRows = ({
             rowIndex={index}
             schema={schema}
             openDeleteDialog={openDeleteDialog}
-            moveUp={moveUp(path, index)}
-            moveDown={moveDown(path, index)}
+            moveUpCreator={moveUp}
+            moveDownCreator={moveDown}
             enableUp={index !== 0}
             enableDown={index !== data - 1}
             showSortButtons={appliedUiSchemaOptions.showSortButtons}
             enabled={enabled}
             cells={cells}
+            path={path}
           />
         );
       })}

package/src/controls/MaterialAnyOfStringOrEnumControl.tsx

@@ -38,7 +38,8 @@ import { Control, withJsonFormsControlProps } from '@jsonforms/react';
 import { Input } from '@material-ui/core';
 import { InputBaseComponentProps } from '@material-ui/core/InputBase';
 import merge from 'lodash/merge';
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useDebouncedChange } from '../util';
 import { MaterialInputControl } from './MaterialInputControl';
 
 const findEnumSchema = (schemas: JsonSchema[]) =>
@@ -64,17 +65,20 @@ const MuiAutocompleteInputText = (props: EnumCellProps & WithClassname) => {
   const enumSchema = findEnumSchema(schema.anyOf);
   const stringSchema = findTextSchema(schema.anyOf);
   const maxLength = stringSchema.maxLength;
-  const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  let inputProps: InputBaseComponentProps = {};
-  if (appliedUiSchemaOptions.restrict) {
-    inputProps = { maxLength: maxLength };
-  }
-  if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
-    inputProps.size = maxLength;
-  }
-  const onChange = (ev: any) => handleChange(path, ev.target.value);
+  const appliedUiSchemaOptions = useMemo(() => merge({}, config, uischema.options),[config, uischema.options]);
+  const inputProps: InputBaseComponentProps = useMemo(() => {
+    let propMemo: InputBaseComponentProps = {};
+    if (appliedUiSchemaOptions.restrict) {
+      propMemo = { maxLength: maxLength };
+    }
+    if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
+      propMemo.size = maxLength;
+    }
+    propMemo.list = props.id + 'datalist';
+    return propMemo;
+  },[appliedUiSchemaOptions,props.id]);
+  const [inputText, onChange] = useDebouncedChange(handleChange, '', data, path);
 
-  inputProps.list = props.id + 'datalist';
   const dataList = (
     <datalist id={props.id + 'datalist'}>
       {enumSchema.enum.map(optionValue => (
@@ -85,7 +89,7 @@ const MuiAutocompleteInputText = (props: EnumCellProps & WithClassname) => {
   return (
     <Input
       type='text'
-      value={data || ''}
+      value={inputText}
       onChange={onChange}
       className={className}
       id={id}

package/src/controls/MaterialDateControl.tsx

@@ -23,17 +23,15 @@
   THE SOFTWARE.
 */
 import merge from 'lodash/merge';
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
-  ControlState,
-  DispatchPropsOfControl,
+  ControlProps,
   isDateControl,
   isDescriptionHidden,
   RankedTester,
   rankWith,
-  StatePropsOfControl
 } from '@jsonforms/core';
-import { Control, withJsonFormsControlProps } from '@jsonforms/react';
+import { withJsonFormsControlProps } from '@jsonforms/react';
 import { FormHelperText, Hidden } from '@material-ui/core';
 import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
@@ -43,90 +41,87 @@ import {
   MuiPickersUtilsProvider
 } from '@material-ui/pickers';
 import DayJsUtils from '@date-io/dayjs';
-import { createOnChangeHandler, getData } from '../util';
+import { createOnChangeHandler, getData, useFocus } from '../util';
 
-export class MaterialDateControl extends Control<
-  StatePropsOfControl & DispatchPropsOfControl,
-  ControlState
-> {
-  render() {
-    const {
-      description,
-      id,
-      errors,
-      label,
-      uischema,
-      visible,
-      enabled,
-      required,
-      path,
-      handleChange,
-      data,
-      config
-    } = this.props;
-    const isValid = errors.length === 0;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const showDescription = !isDescriptionHidden(
-      visible,
-      description,
-      this.state.isFocused,
-      appliedUiSchemaOptions.showUnfocusedDescription
-    );
+export const MaterialDateControl = (props: ControlProps)=> {
+  const [focused, onFocus, onBlur] = useFocus();
+  const {
+    description,
+    id,
+    errors,
+    label,
+    uischema,
+    visible,
+    enabled,
+    required,
+    path,
+    handleChange,
+    data,
+    config
+  } = props;
+  const isValid = errors.length === 0;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    focused,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
 
-    const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
-    const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? 'YYYY-MM-DD';
+  const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
+  const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? 'YYYY-MM-DD';
 
-    const firstFormHelperText = showDescription
-      ? description
-      : !isValid
-      ? errors
-      : null;
-    const secondFormHelperText = showDescription && !isValid ? errors : null;
+  const firstFormHelperText = showDescription
+    ? description
+    : !isValid
+    ? errors
+    : null;
+  const secondFormHelperText = showDescription && !isValid ? errors : null;
+  const onChange = useMemo(() => createOnChangeHandler(
+    path,
+    handleChange,
+    saveFormat
+  ),[path, handleChange, saveFormat]);
 
-    return (
-      <Hidden xsUp={!visible}>
-        <MuiPickersUtilsProvider utils={DayJsUtils}>
-          <KeyboardDatePicker
-            id={id + '-input'}
-            required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
-            label={label}
-            error={!isValid}
-            fullWidth={!appliedUiSchemaOptions.trim}
-            InputLabelProps={data ? { shrink: true } : undefined}
-            value={getData(data, saveFormat)}
-            clearable
-            onChange={createOnChangeHandler(
-              path,
-              handleChange,
-              saveFormat
-            )}
-            format={format}
-            views={appliedUiSchemaOptions.views}
-            disabled={!enabled}
-            autoFocus={appliedUiSchemaOptions.focus}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-            cancelLabel={appliedUiSchemaOptions.cancelLabel}
-            clearLabel={appliedUiSchemaOptions.clearLabel}
-            okLabel={appliedUiSchemaOptions.okLabel}
-            leftArrowIcon={<KeyboardArrowLeftIcon />}
-            rightArrowIcon={<KeyboardArrowRightIcon />}
-            keyboardIcon={<EventIcon />}
-            invalidDateMessage={null}
-            maxDateMessage={null}
-            minDateMessage={null}
-          />
-          <FormHelperText error={!isValid && !showDescription}>
-            {firstFormHelperText}
-          </FormHelperText>
-          <FormHelperText error={!isValid}>
-            {secondFormHelperText}
-          </FormHelperText>
-        </MuiPickersUtilsProvider>
-      </Hidden>
-    );
-  }
-}
+  return (
+    <Hidden xsUp={!visible}>
+      <MuiPickersUtilsProvider utils={DayJsUtils}>
+        <KeyboardDatePicker
+          id={id + '-input'}
+          required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
+          label={label}
+          error={!isValid}
+          fullWidth={!appliedUiSchemaOptions.trim}
+          InputLabelProps={data ? { shrink: true } : undefined}
+          value={getData(data, saveFormat)}
+          clearable
+          onChange={onChange}
+          format={format}
+          views={appliedUiSchemaOptions.views}
+          disabled={!enabled}
+          autoFocus={appliedUiSchemaOptions.focus}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          cancelLabel={appliedUiSchemaOptions.cancelLabel}
+          clearLabel={appliedUiSchemaOptions.clearLabel}
+          okLabel={appliedUiSchemaOptions.okLabel}
+          leftArrowIcon={<KeyboardArrowLeftIcon />}
+          rightArrowIcon={<KeyboardArrowRightIcon />}
+          keyboardIcon={<EventIcon />}
+          invalidDateMessage={null}
+          maxDateMessage={null}
+          minDateMessage={null}
+        />
+        <FormHelperText error={!isValid && !showDescription}>
+          {firstFormHelperText}
+        </FormHelperText>
+        <FormHelperText error={!isValid}>
+          {secondFormHelperText}
+        </FormHelperText>
+      </MuiPickersUtilsProvider>
+    </Hidden>
+  );
+};
 
 export const materialDateControlTester: RankedTester = rankWith(
   4,