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

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

@@ -456,12 +456,17 @@ function useInputComponent() {
 }
 
 const eventToValue$3 = (ev) => ev.target.value;
-const useDebouncedChange = (handleChange, defaultValue, data, path, eventToValueFunction = eventToValue$3, timeout = 300) => {
+const useDebouncedChange = (handleChange, defaultValue, data, path, eventToValueFunction = eventToValue$3, timeout = 300, flushOnBlur = false, focused = false) => {
     const [input, setInput] = useState(data ?? defaultValue);
     useEffect(() => {
         setInput(data ?? defaultValue);
     }, [data]);
     const debouncedUpdate = useCallback(debounce((newValue) => handleChange(path, newValue), timeout), [handleChange, path, timeout]);
+    useEffect(() => {
+        if (!focused && flushOnBlur) {
+            debouncedUpdate.flush();
+        }
+    }, [focused, flushOnBlur, debouncedUpdate]);
     const onChange = useCallback((ev) => {
         const newValue = eventToValueFunction(ev);
         setInput(newValue ?? defaultValue);
@@ -481,26 +486,29 @@ const i18nDefaults = {
 const toNumber$1 = (value) => value === '' ? undefined : parseInt(value, 10);
 const eventToValue$2 = (ev) => toNumber$1(ev.target.value);
 const MuiInputInteger = React.memo(function MuiInputInteger(props) {
+    const [focused, onFocus, onBlur] = useFocus();
     const { data, className, id, enabled, uischema, isValid, path, handleChange, config, label, } = props;
     const InputComponent = useInputComponent();
     const inputProps = { step: '1' };
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue$2);
-    return (React.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 }));
+    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue$2, undefined, true, focused);
+    return (React.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 }));
 });
 
 const toNumber = (value) => value === '' ? undefined : parseFloat(value);
 const eventToValue$1 = (ev) => toNumber(ev.target.value);
 const MuiInputNumber = React.memo(function MuiInputNumber(props) {
+    const [focused, onFocus, onBlur] = useFocus();
     const { data, className, id, enabled, uischema, isValid, path, handleChange, config, label, } = props;
     const InputComponent = useInputComponent();
     const inputProps = { step: '0.1' };
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue$1);
-    return (React.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 }));
+    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue$1, undefined, true, focused);
+    return (React.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 }));
 });
 
 const MuiInputNumberFormat = React.memo(function MuiInputNumberFormat(props) {
+    const [focused, onFocus, onBlur] = useFocus();
     const { className, id, enabled, uischema, isValid, path, handleChange, schema, config, label, } = props;
     const InputComponent = useInputComponent();
     const maxLength = schema.maxLength;
@@ -514,12 +522,13 @@ const MuiInputNumberFormat = React.memo(function MuiInputNumberFormat(props) {
     }
     const formattedNumber = props.toFormatted(props.data);
     const validStringNumber = useCallback((ev) => props.fromFormatted(ev.currentTarget.value), [props.fromFormatted]);
-    const [inputValue, onChange] = useDebouncedChange(handleChange, '', formattedNumber, path, validStringNumber);
-    return (React.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 }));
+    const [inputValue, onChange] = useDebouncedChange(handleChange, '', formattedNumber, path, validStringNumber, undefined, true, focused);
+    return (React.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 }));
 });
 
 const eventToValue = (ev) => ev.target.value === '' ? undefined : ev.target.value;
 const MuiInputText = React.memo(function MuiInputText(props) {
+    const [focused, onFocus, onBlur] = useFocus();
     const [showAdornment, setShowAdornment] = useState(false);
     const { data, config, className, id, enabled, uischema, isValid, path, handleChange, schema, muiInputProps, label, inputComponent, } = props;
     const InputComponent = useInputComponent();
@@ -536,7 +545,7 @@ const MuiInputText = React.memo(function MuiInputText(props) {
     if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
         inputProps.size = maxLength;
     }
-    const [inputText, onChange, onClear] = useDebouncedChange(handleChange, '', data, path, eventToValue);
+    const [inputText, onChange, onClear] = useDebouncedChange(handleChange, '', data, path, eventToValue, undefined, true, focused);
     const onPointerEnter = () => setShowAdornment(true);
     const onPointerLeave = () => setShowAdornment(false);
     const theme = useTheme();
@@ -545,7 +554,7 @@ const MuiInputText = React.memo(function MuiInputText(props) {
             theme.palette.background.default,
         borderRadius: '50%',
     };
-    return (React.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.createElement(InputAdornment, { position: 'end', style: {
+    return (React.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.createElement(InputAdornment, { position: 'end', style: {
                 display: !showAdornment || !enabled || data === undefined
                     ? 'none'
                     : 'flex',
@@ -774,6 +783,7 @@ const MaterialInputControl = (props) => {
 const findEnumSchema = (schemas) => schemas.find((s) => s.enum !== undefined && (s.type === 'string' || s.type === undefined));
 const findTextSchema = (schemas) => schemas.find((s) => s.type === 'string' && s.enum === undefined);
 const MuiAutocompleteInputText = (props) => {
+    const [focused, onFocus, onBlur] = useFocus();
     const { data, config, className, id, enabled, uischema, isValid, path, handleChange, schema, label, } = props;
     const InputComponent = useInputComponent();
     const enumSchema = findEnumSchema(schema.anyOf);
@@ -791,9 +801,9 @@ const MuiAutocompleteInputText = (props) => {
         propMemo.list = props.id + 'datalist';
         return propMemo;
     }, [appliedUiSchemaOptions, props.id]);
-    const [inputText, onChange] = useDebouncedChange(handleChange, '', data, path);
+    const [inputText, onChange] = useDebouncedChange(handleChange, '', data, path, undefined, undefined, true, focused);
     const dataList = (React.createElement("datalist", { id: props.id + 'datalist' }, enumSchema.enum.map((optionValue) => (React.createElement("option", { value: optionValue, key: optionValue })))));
-    return (React.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.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 }));
 };
 class MaterialAnyOfStringOrEnumControl extends Control {
     render() {
@@ -1019,7 +1029,7 @@ const MaterialNativeControl = (props) => {
     const { id, errors, label, schema, description, enabled, visible, required, path, handleChange, data, config, } = props;
     const isValid = errors.length === 0;
     const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
-    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path);
+    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, undefined, undefined, true, focused);
     const fieldType = appliedUiSchemaOptions.format ?? schema.format;
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     if (!visible) {