@jsonforms/material-renderers 3.6.0-alpha.1 → 3.6.0-beta.0

package/lib/jsonforms-react-material.cjs.js

@@ -579,14 +579,21 @@ function useInputComponent() {
 }
 
 var eventToValue$3 = function (ev) { return ev.target.value; };
-var useDebouncedChange = function (handleChange, defaultValue, data, path, eventToValueFunction, timeout) {
+var useDebouncedChange = function (handleChange, defaultValue, data, path, eventToValueFunction, timeout, flushOnBlur, focused) {
     if (eventToValueFunction === void 0) { eventToValueFunction = eventToValue$3; }
     if (timeout === void 0) { timeout = 300; }
+    if (flushOnBlur === void 0) { flushOnBlur = false; }
+    if (focused === void 0) { focused = false; }
     var _a = React.useState(data !== null && data !== void 0 ? data : defaultValue), input = _a[0], setInput = _a[1];
     React.useEffect(function () {
         setInput(data !== null && data !== void 0 ? data : defaultValue);
     }, [data]);
     var debouncedUpdate = React.useCallback(debounce__default["default"](function (newValue) { return handleChange(path, newValue); }, timeout), [handleChange, path, timeout]);
+    React.useEffect(function () {
+        if (!focused && flushOnBlur) {
+            debouncedUpdate.flush();
+        }
+    }, [focused, flushOnBlur, debouncedUpdate]);
     var onChange = React.useCallback(function (ev) {
         var newValue = eventToValueFunction(ev);
         setInput(newValue !== null && newValue !== void 0 ? newValue : defaultValue);
@@ -608,12 +615,13 @@ var toNumber$1 = function (value) {
 };
 var eventToValue$2 = function (ev) { return toNumber$1(ev.target.value); };
 var MuiInputInteger = React__default["default"].memo(function MuiInputInteger(props) {
+    var _a = useFocus(), focused = _a[0], onFocus = _a[1], onBlur = _a[2];
     var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, config = props.config, label = props.label;
     var InputComponent = useInputComponent();
     var inputProps = { step: '1' };
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
-    var _a = useDebouncedChange(handleChange, '', data, path, eventToValue$2), inputValue = _a[0], onChange = _a[1];
-    return (React__default["default"].createElement(InputComponent, { label: label, type: 'number', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true, error: !isValid }));
+    var _b = useDebouncedChange(handleChange, '', data, path, eventToValue$2, undefined, true, focused), inputValue = _b[0], onChange = _b[1];
+    return (React__default["default"].createElement(InputComponent, { label: label, type: 'number', value: inputValue, onFocus: onFocus, onBlur: onBlur, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true, error: !isValid }));
 });
 
 var toNumber = function (value) {
@@ -621,15 +629,17 @@ var toNumber = function (value) {
 };
 var eventToValue$1 = function (ev) { return toNumber(ev.target.value); };
 var MuiInputNumber = React__default["default"].memo(function MuiInputNumber(props) {
+    var _a = useFocus(), focused = _a[0], onFocus = _a[1], onBlur = _a[2];
     var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, config = props.config, label = props.label;
     var InputComponent = useInputComponent();
     var inputProps = { step: '0.1' };
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
-    var _a = useDebouncedChange(handleChange, '', data, path, eventToValue$1), inputValue = _a[0], onChange = _a[1];
-    return (React__default["default"].createElement(InputComponent, { type: 'number', label: label, value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true, error: !isValid }));
+    var _b = useDebouncedChange(handleChange, '', data, path, eventToValue$1, undefined, true, focused), inputValue = _b[0], onChange = _b[1];
+    return (React__default["default"].createElement(InputComponent, { type: 'number', label: label, value: inputValue, onChange: onChange, onFocus: onFocus, onBlur: onBlur, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true, error: !isValid }));
 });
 
 var MuiInputNumberFormat = React__default["default"].memo(function MuiInputNumberFormat(props) {
+    var _a = useFocus(), focused = _a[0], onFocus = _a[1], onBlur = _a[2];
     var className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, schema = props.schema, config = props.config, label = props.label;
     var InputComponent = useInputComponent();
     var maxLength = schema.maxLength;
@@ -643,8 +653,8 @@ var MuiInputNumberFormat = React__default["default"].memo(function MuiInputNumbe
     }
     var formattedNumber = props.toFormatted(props.data);
     var validStringNumber = React.useCallback(function (ev) { return props.fromFormatted(ev.currentTarget.value); }, [props.fromFormatted]);
-    var _a = useDebouncedChange(handleChange, '', formattedNumber, path, validStringNumber), inputValue = _a[0], onChange = _a[1];
-    return (React__default["default"].createElement(InputComponent, { type: 'text', value: inputValue, onChange: onChange, className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, multiline: appliedUiSchemaOptions.multi, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid }));
+    var _b = useDebouncedChange(handleChange, '', formattedNumber, path, validStringNumber, undefined, true, focused), inputValue = _b[0], onChange = _b[1];
+    return (React__default["default"].createElement(InputComponent, { type: 'text', value: inputValue, onChange: onChange, onFocus: onFocus, onBlur: onBlur, className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, multiline: appliedUiSchemaOptions.multi, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid }));
 });
 
 var eventToValue = function (ev) {
@@ -652,7 +662,8 @@ var eventToValue = function (ev) {
 };
 var MuiInputText = React__default["default"].memo(function MuiInputText(props) {
     var _a, _b, _c;
-    var _d = React.useState(false), showAdornment = _d[0], setShowAdornment = _d[1];
+    var _d = useFocus(), focused = _d[0], onFocus = _d[1], onBlur = _d[2];
+    var _e = React.useState(false), showAdornment = _e[0], setShowAdornment = _e[1];
     var data = props.data, config = props.config, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, schema = props.schema, muiInputProps = props.muiInputProps, label = props.label, inputComponent = props.inputComponent;
     var InputComponent = useInputComponent();
     var maxLength = schema.maxLength;
@@ -668,7 +679,7 @@ var MuiInputText = React__default["default"].memo(function MuiInputText(props) {
     if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
         inputProps.size = maxLength;
     }
-    var _e = useDebouncedChange(handleChange, '', data, path, eventToValue), inputText = _e[0], onChange = _e[1], onClear = _e[2];
+    var _f = useDebouncedChange(handleChange, '', data, path, eventToValue, undefined, true, focused), inputText = _f[0], onChange = _f[1], onClear = _f[2];
     var onPointerEnter = function () { return setShowAdornment(true); };
     var onPointerLeave = function () { return setShowAdornment(false); };
     var theme = material.useTheme();
@@ -677,7 +688,7 @@ var MuiInputText = React__default["default"].memo(function MuiInputText(props) {
             theme.palette.background.default,
         borderRadius: '50%',
     };
-    return (React__default["default"].createElement(InputComponent, { label: label, type: appliedUiSchemaOptions.format === 'password' ? 'password' : 'text', value: inputText, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, multiline: appliedUiSchemaOptions.multi, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, endAdornment: React__default["default"].createElement(material.InputAdornment, { position: 'end', style: {
+    return (React__default["default"].createElement(InputComponent, { label: label, type: appliedUiSchemaOptions.format === 'password' ? 'password' : 'text', value: inputText, onChange: onChange, className: className, onBlur: onBlur, onFocus: onFocus, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, multiline: appliedUiSchemaOptions.multi, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, endAdornment: React__default["default"].createElement(material.InputAdornment, { position: 'end', style: {
                 display: !showAdornment || !enabled || data === undefined
                     ? 'none'
                     : 'flex',
@@ -932,6 +943,7 @@ var findTextSchema = function (schemas) {
     return schemas.find(function (s) { return s.type === 'string' && s.enum === undefined; });
 };
 var MuiAutocompleteInputText = function (props) {
+    var _a = useFocus(), focused = _a[0], onFocus = _a[1], onBlur = _a[2];
     var data = props.data, config = props.config, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, schema = props.schema, label = props.label;
     var InputComponent = useInputComponent();
     var enumSchema = findEnumSchema(schema.anyOf);
@@ -949,9 +961,9 @@ var MuiAutocompleteInputText = function (props) {
         propMemo.list = props.id + 'datalist';
         return propMemo;
     }, [appliedUiSchemaOptions, props.id]);
-    var _a = useDebouncedChange(handleChange, '', data, path), inputText = _a[0], onChange = _a[1];
+    var _b = useDebouncedChange(handleChange, '', data, path, undefined, undefined, true, focused), inputText = _b[0], onChange = _b[1];
     var dataList = (React__default["default"].createElement("datalist", { id: props.id + 'datalist' }, enumSchema.enum.map(function (optionValue) { return (React__default["default"].createElement("option", { value: optionValue, key: optionValue })); })));
-    return (React__default["default"].createElement(InputComponent, { type: 'text', value: inputText, onChange: onChange, className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid, endAdornment: dataList }));
+    return (React__default["default"].createElement(InputComponent, { type: 'text', value: inputText, onChange: onChange, onFocus: onFocus, onBlur: onBlur, className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid, endAdornment: dataList }));
 };
 var MaterialAnyOfStringOrEnumControl =  (function (_super) {
     __extends(MaterialAnyOfStringOrEnumControl, _super);
@@ -1199,7 +1211,7 @@ var MaterialNativeControl = function (props) {
     var id = props.id, errors = props.errors, label = props.label, schema = props.schema, description = props.description, enabled = props.enabled, visible = props.visible, required = props.required, path = props.path, handleChange = props.handleChange, data = props.data, config = props.config;
     var isValid = errors.length === 0;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, props.uischema.options);
-    var _c = useDebouncedChange(handleChange, '', data, path), inputValue = _c[0], onChange = _c[1];
+    var _c = useDebouncedChange(handleChange, '', data, path, undefined, undefined, true, focused), inputValue = _c[0], onChange = _c[1];
     var fieldType = (_a = appliedUiSchemaOptions.format) !== null && _a !== void 0 ? _a : schema.format;
     var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     if (!visible) {