@luomus/laji-form 15.1.53 → 15.1.55

package/dist/styles.css

@@ -2091,7 +2091,7 @@ body .laji-form {
 .laji-form .form-control, .laji-form .rw-widget, .laji-form .rw-widget-container, .laji-form-multiselect-input-wrapper {
 	border-radius: 2px !important;
 }
-.laji-form label[type="button"] {
+.laji-form label.btn {
 	border-radius: 2px;
 	line-height: 12.5px;
 }
@@ -2142,6 +2142,9 @@ body .laji-form {
 .laji-form .form-group {
 	margin-bottom: 5px;
 }
+.laji-form .condensed-object-field-item .form-group {
+	margin-bottom: 0;
+}
 .laji-form .form-group-padding-bottom {
 	margin-bottom: 6px;
 }
@@ -3795,6 +3798,9 @@ body .laji-form {
 .laji-form .input-group.multi-lang-input-group .input-group-text {
 	width: 40px;
 }
+.laji-form .input-group.condensed-object-field-input-group .input-group-text {
+	min-width: 150px;
+}
 
 .laji-form-multi-tag-array-field-buttons .btn-group-vertical {
 	margin-right: 17px;

package/lib/components/LajiForm.d.ts

@@ -87,6 +87,8 @@ export interface FormContext {
     Label: React.ComponentType<{
         label?: string;
         id: string;
+        uiSchema?: any;
+        required?: boolean;
     }>;
     formDataTransformers?: any[];
     _parentLajiFormId?: number;

package/lib/components/LajiForm.js

@@ -59,6 +59,7 @@ const fields = importLocalComponents("fields", [
     "AutoArrayField",
     "AutosuggestField",
     "HiddenField",
+    "HiddenWithTextField",
     "InitiallyHiddenField",
     "ContextInjectionField",
     "ImageArrayField",
@@ -104,6 +105,7 @@ const fields = importLocalComponents("fields", [
     "MultiTagArrayField",
     "PdfArrayField",
     "AsArrayField",
+    "CondensedObjectField",
     { "InputTransformerField": "ConditionalOnChangeField" },
     { "ConditionalField": "ConditionalUiSchemaField" },
     { "UnitRapidField": "UnitShorthandField" },

package/lib/components/fields/CondensedObjectField.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { FieldProps, JSONSchemaObject } from "../../types";
+import * as memoize from "memoizee";
+interface ArrayPropField {
+    type: "array";
+    name: string;
+    value?: string | number | boolean;
+    idx: number;
+}
+interface BasicPropField {
+    type: "string" | "number" | "boolean" | "object" | "integer";
+    name: string;
+    value?: string | number | boolean;
+}
+declare type SelectedField = ArrayPropField | BasicPropField;
+interface State {
+    selectedFields: SelectedField[];
+    formData: any;
+}
+export default class CondensedObjectField extends React.Component<FieldProps<JSONSchemaObject>, State> {
+    static propTypes: {
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Requireable<object>;
+    };
+    static getName(): string;
+    constructor(props: FieldProps<JSONSchemaObject>);
+    componentDidUpdate(): void;
+    getSelectedFieldsFromProps(props: FieldProps<JSONSchemaObject>): SelectedField[];
+    onSelectFieldChange: (name: string) => void;
+    onFieldChange: ((idx: number) => (formData: any) => void) & memoize.Memoized<(idx: number) => (formData: any) => void>;
+    onFieldDelete: ((idx: number) => () => void) & memoize.Memoized<(idx: number) => () => void>;
+    getArrayFieldNextIdx(fields: SelectedField[], name: string): number;
+    render(): JSX.Element;
+}
+export {};

package/lib/components/fields/CondensedObjectField.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const PropTypes = require("prop-types");
+const SelectWidget_1 = require("../widgets/SelectWidget");
+const utils_1 = require("../../utils");
+const components_1 = require("../components");
+const immutability_helper_1 = require("immutability-helper");
+const memoize = require("memoizee");
+const equals = require("deep-equal");
+class CondensedObjectField extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onSelectFieldChange = (name) => {
+            var _a;
+            if (!name) {
+                return;
+            }
+            const selectedFields = this.state.selectedFields;
+            const type = this.props.schema.properties[name].type;
+            let field;
+            let fieldFormData;
+            if (type !== "array") {
+                field = { type, name, value: undefined };
+                fieldFormData = undefined;
+            }
+            else {
+                field = { type, name, idx: this.getArrayFieldNextIdx(selectedFields, name), value: undefined };
+                fieldFormData = [...(((_a = this.props.formData) === null || _a === void 0 ? void 0 : _a[name]) || []), undefined];
+            }
+            const newSelectedFields = [...selectedFields, field];
+            const newFormData = Object.assign(Object.assign({}, (this.props.formData || {})), { [name]: fieldFormData });
+            this.setState({ selectedFields: newSelectedFields, formData: newFormData });
+            this.props.onChange(newFormData);
+        };
+        this.onFieldChange = memoize((idx) => (formData) => {
+            const selectedFields = this.state.selectedFields;
+            const field = selectedFields[idx];
+            let newSelectedFields = immutability_helper_1.default(selectedFields, { [idx]: { ["value"]: { $set: formData } } });
+            let newFormData;
+            if (field.type !== "array") {
+                newFormData = Object.assign(Object.assign({}, this.props.formData), { [field.name]: formData });
+            }
+            else {
+                newFormData = immutability_helper_1.default(this.props.formData, { [field.name]: { [field.idx]: { $set: formData } } });
+            }
+            this.setState({ selectedFields: newSelectedFields, formData: newFormData });
+            this.props.onChange(newFormData);
+        });
+        this.onFieldDelete = memoize((idx) => () => {
+            const selectedFields = this.state.selectedFields;
+            const field = selectedFields[idx];
+            let newSelectedFields = immutability_helper_1.default(selectedFields, { $splice: [[idx, 1]] });
+            let newFormData;
+            if (field.type !== "array" || this.props.formData[field.name].length === 1) {
+                newFormData = immutability_helper_1.default(this.props.formData, { $unset: [field.name] });
+            }
+            else {
+                newSelectedFields.forEach((f, idx) => {
+                    if (f.type === "array" && f.name === field.name && f.idx > field.idx) {
+                        newSelectedFields = immutability_helper_1.default(newSelectedFields, { [idx]: { ["idx"]: { $set: f.idx - 1 } } });
+                    }
+                });
+                newFormData = immutability_helper_1.default(this.props.formData, { [field.name]: { $splice: [[field.idx, 1]] } });
+            }
+            if (Object.keys(newFormData).length === 0) {
+                newFormData = undefined;
+            }
+            this.setState({ selectedFields: newSelectedFields, formData: newFormData });
+            this.props.onChange(newFormData);
+        });
+        this.state = { selectedFields: this.getSelectedFieldsFromProps(props), formData: props.formData };
+    }
+    static getName() { return "CondensedObjectField"; }
+    componentDidUpdate() {
+        if (!equals(this.props.formData, this.state.formData)) {
+            this.setState({ selectedFields: this.getSelectedFieldsFromProps(this.props), formData: this.props.formData });
+        }
+    }
+    getSelectedFieldsFromProps(props) {
+        const { formData, schema } = props;
+        const selectedFields = [];
+        Object.keys(formData || {}).forEach(key => {
+            const type = schema.properties[key].type;
+            if (type !== "array") {
+                selectedFields.push({ type, name: key, value: formData[key] });
+            }
+            else {
+                formData[key].forEach((data, idx) => {
+                    selectedFields.push({ type, name: key, idx, value: data });
+                });
+            }
+        });
+        return selectedFields;
+    }
+    getArrayFieldNextIdx(fields, name) {
+        const oldIndexes = fields.filter(f => f.name === name).map(f => (f.type === "array" ? f.idx : -1));
+        return Math.max(...oldIndexes, -1) + 1;
+    }
+    render() {
+        var _a;
+        const SchemaField = this.props.registry.fields.SchemaField;
+        const { schema, uiSchema, idSchema, errorSchema, formData = {}, required, formContext: { Label, translations } } = this.props;
+        const uiOptions = utils_1.getUiOptions(uiSchema);
+        const childProps = this.state.selectedFields.map(field => {
+            let childSchema = schema.properties[field.name];
+            let childUiSchema = uiSchema[field.name] || {};
+            let childIdSchema = idSchema[field.name] || { $id: `${idSchema.$id}_${field.name}` };
+            let childErrorSchema = errorSchema[field.name] || {};
+            let childFormData = formData[field.name];
+            if (field.type === "array" && childSchema.type === "array") {
+                childSchema = childSchema.items;
+                childIdSchema = Object.assign(Object.assign({}, childIdSchema), { $id: `${childIdSchema.$id}_${field.idx}` });
+                childErrorSchema = childErrorSchema[field.idx] || {};
+                childFormData = childFormData === null || childFormData === void 0 ? void 0 : childFormData[field.idx];
+            }
+            return {
+                schema: childSchema,
+                uiSchema: Object.assign(Object.assign({}, childUiSchema), { "ui:title": "", "ui:widget": "InputGroupWidget", "ui:options": Object.assign({ "inputGroupText": schema.properties[field.name].title || field.name, "className": "condensed-object-field-input-group" }, (childUiSchema["ui:options"] || {})) }),
+                idSchema: childIdSchema,
+                errorSchema: childErrorSchema,
+                formData: childFormData
+            };
+        });
+        const selectableFieldEnums = Object.keys(schema.properties).filter(prop => schema.properties[prop].type === "array" || !this.state.selectedFields.some(field => field.name === prop)).map(prop => ({
+            value: prop,
+            label: schema.properties[prop].title || prop,
+        }));
+        const addFieldPlaceholder = (_a = uiOptions.addFieldPlaceholder) !== null && _a !== void 0 ? _a : `${translations.AddField}`;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Label, { label: this.props.schema.title, required: required || uiSchema["ui:required"], id: this.props.idSchema.$id, uiSchema: this.props.uiSchema }),
+            childProps.map((props, idx) => React.createElement("div", { key: idx, className: "laji-form-field-template-item condensed-object-field-item" },
+                React.createElement("div", { className: "laji-form-field-template-schema" },
+                    React.createElement(SchemaField, Object.assign({}, this.props, props, { key: idx, onChange: this.onFieldChange(idx) }))),
+                React.createElement("div", { className: "laji-form-field-template-buttons" },
+                    React.createElement(components_1.DeleteButton, { id: props.idSchema.$id, onClick: this.onFieldDelete(idx), translations: translations })))),
+            React.createElement(SelectWidget_1.default, { key: childProps.length, options: { enumOptions: selectableFieldEnums, placeholder: addFieldPlaceholder }, onChange: this.onSelectFieldChange, includeEmpty: true, schema: {}, id: `${idSchema.$id}_field_select`, formContext: this.props.formContext })));
+    }
+}
+exports.default = CondensedObjectField;
+CondensedObjectField.propTypes = {
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["object"])
+    }).isRequired,
+    formData: PropTypes.object
+};

package/lib/components/fields/ConditionalUiSchemaField.js

@@ -22,10 +22,10 @@ exports.rulePropType = PropTypes.oneOfType([
         complement: PropTypes.bool
     }),
     PropTypes.shape({
-        rule: PropTypes.oneOf(["isAdmin", "isEdit", "isReadonly"]),
+        rule: PropTypes.oneOf(["isAdmin", "isLoggedIn", "isEdit", "isReadonly"]),
         complement: PropTypes.bool
     }),
-    PropTypes.oneOf(["isAdmin", "isEdit", "isReadonly"]),
+    PropTypes.oneOf(["isAdmin", "isLoggedIn", "isEdit", "isReadonly"]),
 ]);
 exports.operationPropType = PropTypes.shape({
     type: PropTypes.oneOf(["merge", "wrap"]),

package/lib/components/fields/HiddenWithTextField.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import * as PropTypes from "prop-types";
+import { FieldProps, JSONSchemaArray, JSONSchemaString } from "../../types";
+declare const HiddenWithTextField: {
+    (props: FieldProps<JSONSchemaArray<JSONSchemaString>>): JSX.Element;
+    propTypes: {
+        uiSchema: PropTypes.Validator<PropTypes.InferProps<{
+            "ui:options": PropTypes.Validator<PropTypes.InferProps<{
+                altText: PropTypes.Validator<string>;
+            }>>;
+            uiSchema: PropTypes.Requireable<object>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+    };
+};
+export default HiddenWithTextField;

package/lib/components/fields/HiddenWithTextField.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const PropTypes = require("prop-types");
+const HiddenWithTextField = (props) => {
+    var _a;
+    return (React.createElement("div", null, (_a = props.uiSchema["ui:options"]) === null || _a === void 0 ? void 0 : _a.altText));
+};
+HiddenWithTextField.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            "altText": PropTypes.string.isRequired
+        }).isRequired,
+        uiSchema: PropTypes.object
+    }).isRequired,
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["object", "array", "string", "number", "boolean", "integer"])
+    }).isRequired
+};
+exports.default = HiddenWithTextField;

package/lib/components/fields/MapField.d.ts

@@ -14,6 +14,10 @@ export default class MapField extends React.Component<any, any, any> {
                 height: PropTypes.Requireable<number>;
                 emptyHelp: PropTypes.Requireable<string>;
                 geometryCollection: PropTypes.Requireable<boolean>;
+                coordinateFields: PropTypes.Requireable<PropTypes.InferProps<{
+                    latitude: PropTypes.Validator<string>;
+                    longitude: PropTypes.Validator<string>;
+                }>>;
             }>>;
         }>>;
         schema: PropTypes.Validator<PropTypes.InferProps<{
@@ -33,12 +37,13 @@ export default class MapField extends React.Component<any, any, any> {
     getDrawOptions: (props: any) => any;
     getGeometry: (props: any) => any;
     getMobileGeometry: () => any;
+    getFormDataFromGeometry: (geometry: any) => any;
     setMoved: (moved: any) => void;
     onOptionsChanged: (options: any) => void;
     onChange: (events: any) => void;
     onMobileEditorChange: (point: any) => void;
     onHideMobileEditorMap: (options: any) => void;
-    onLocate: (latlng: any, forceShow: any) => void;
+    onLocate: (latlng: any, radius: any, forceShow: any) => void;
     onLocateError: () => void;
     renderBlocker(): JSX.Element | undefined;
 }

package/lib/components/fields/MapField.js

@@ -108,25 +108,35 @@ class MapField extends React.Component {
         this.getDrawOptions = (props) => {
             const { uiSchema, disabled, readonly } = props;
             const options = utils_1.getUiOptions(uiSchema);
-            const { mapOptions = {} } = options;
+            const { mapOptions = {}, coordinateFields } = options;
             const drawOptions = Object.assign(Object.assign({}, (mapOptions.draw || {})), { geoData: this.getGeometry(props), onChange: this.onChange, editable: !disabled && !readonly && !options.mobileEditor });
+            if (coordinateFields) {
+                ["rectangle", "polygon", "polyline", "circle"].forEach(drawType => {
+                    drawOptions[drawType] = false;
+                });
+            }
             return drawOptions;
         };
         this.getGeometry = (props) => {
             const { formData } = props;
+            const { coordinateFields } = utils_1.getUiOptions(this.props.uiSchema);
+            if (coordinateFields) {
+                if ((formData === null || formData === void 0 ? void 0 : formData[coordinateFields.longitude]) !== undefined && (formData === null || formData === void 0 ? void 0 : formData[coordinateFields.latitude]) !== undefined) {
+                    return {
+                        type: "Point",
+                        coordinates: [formData[coordinateFields.longitude], formData[coordinateFields.latitude]]
+                    };
+                }
+                else {
+                    return undefined;
+                }
+            }
             return formData && Object.keys(formData).length ? formData : undefined;
         };
         this.getMobileGeometry = () => {
-            var _a;
             if (this.props.formData) {
                 return this.props.formData;
             }
-            else if ((_a = this.map) === null || _a === void 0 ? void 0 : _a.userLocation) {
-                return {
-                    type: "Point",
-                    coordinates: [this.map.userLocation.latlng.lng, this.map.userLocation.latlng.lat]
-                };
-            }
             else {
                 return {
                     type: "Point",
@@ -134,6 +144,23 @@ class MapField extends React.Component {
                 };
             }
         };
+        this.getFormDataFromGeometry = (geometry) => {
+            const { geometryCollection = true, coordinateFields } = utils_1.getUiOptions(this.props.uiSchema);
+            let formData;
+            if (coordinateFields) {
+                formData = geometry ? {
+                    [coordinateFields.longitude]: geometry.coordinates[0],
+                    [coordinateFields.latitude]: geometry.coordinates[1]
+                } : undefined;
+            }
+            else {
+                formData = geometryCollection ? {
+                    type: "GeometryCollection",
+                    geometries: geometry ? [geometry] : []
+                } : geometry || {};
+            }
+            return formData;
+        };
         this.setMoved = (moved) => {
             this.setState({ moved });
         };
@@ -141,27 +168,17 @@ class MapField extends React.Component {
             this.setState({ mapOptions: Object.assign(Object.assign({}, this.state.mapOptions), options) });
         };
         this.onChange = (events) => {
-            const { geometryCollection = true } = utils_1.getUiOptions(this.props.uiSchema);
             let formData;
             events.forEach(e => {
                 switch (e.type) {
                     case "create":
-                        formData = geometryCollection ? {
-                            type: "GeometryCollection",
-                            geometries: [e.feature.geometry]
-                        } : e.feature.geometry;
+                        formData = this.getFormDataFromGeometry(e.feature.geometry);
                         break;
                     case "edit":
-                        formData = geometryCollection ? {
-                            type: "GeometryCollection",
-                            geometries: [e.features[0].geometry]
-                        } : e.features[0].geometry;
+                        formData = this.getFormDataFromGeometry(e.features[0].geometry);
                         break;
                     case "delete":
-                        formData = geometryCollection ? {
-                            type: "GeometryCollection",
-                            geometries: []
-                        } : {};
+                        formData = this.getFormDataFromGeometry(undefined);
                 }
             });
             this._zoomToDataOnNextTick = true;
@@ -183,8 +200,8 @@ class MapField extends React.Component {
         this.onHideMobileEditorMap = (options) => {
             this.setState({ mobileEditor: { visible: false, options } });
         };
-        this.onLocate = (latlng, forceShow) => {
-            const { geometryCollection = true, mobileEditor, createOnLocate } = utils_1.getUiOptions(this.props.uiSchema);
+        this.onLocate = (latlng, radius, forceShow) => {
+            const { mobileEditor, createOnLocate } = utils_1.getUiOptions(this.props.uiSchema);
             const isEmpty = !this.getGeometry(this.props);
             if (!latlng || !isEmpty) {
                 this.setState({ located: true });
@@ -205,7 +222,7 @@ class MapField extends React.Component {
             this.setState({ located: true });
             if (createOnLocate) {
                 const geometry = { type: "Point", coordinates: [latlng.lng, latlng.lat] };
-                this.props.onChange(geometryCollection ? { type: "GeometryCollection", geometries: [geometry] } : geometry);
+                this.props.onChange(this.getFormDataFromGeometry(geometry));
             }
         };
         this.onLocateError = () => {
@@ -233,6 +250,10 @@ class MapField extends React.Component {
         }
         this.geocode(this.props);
         this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "locate", this.onLocateEventHandler);
+        const { mobileEditor } = utils_1.getUiOptions(uiSchema);
+        if (mobileEditor) {
+            this.showMobileEditorMap();
+        }
     }
     componentWillUnmount() {
         this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "locate", this.onLocateEventHandler);
@@ -267,7 +288,7 @@ class MapField extends React.Component {
                 singletonHasLocate = map.getOptions().locate;
             }
         }
-        if (mapOptions.createOnLocate && !this.state.mapOptions && (!singletonRendered || singletonHasLocate)) {
+        if (mapOptions.createOnLocate && !this.state.mapOptions && (!singletonRendered || singletonHasLocate) && !_mobileEditor) {
             _mapOptions.locate.on = true;
         }
         if (_mobileEditor) {
@@ -317,6 +338,10 @@ MapField.propTypes = {
             height: PropTypes.number,
             emptyHelp: PropTypes.string,
             geometryCollection: PropTypes.bool,
+            coordinateFields: PropTypes.shape({
+                latitude: PropTypes.string.isRequired,
+                longitude: PropTypes.string.isRequired
+            })
         })
     }),
     schema: PropTypes.shape({
@@ -374,12 +399,26 @@ class MobileEditorMap extends React.Component {
                 this.onClose();
             }
         };
+        this.onLocate = (latlng) => {
+            if (!latlng || this.state.located) {
+                return;
+            }
+            this.map.map.setView({ lng: latlng.lng, lat: latlng.lat }, 12);
+            this.setMarkerLatLng(latlng);
+            if (!this.state.located) {
+                this.setState({ located: true });
+            }
+            if (!this.props.moved) {
+                this.props.setMoved(true);
+            }
+        };
         this.onClose = () => {
             this.props.onClose(this.map.getOptions());
         };
         const { geometry } = this.props;
         this.state = {
-            geometry: [{ geoData: geometry }]
+            geometry: [{ geoData: geometry }],
+            located: false
         };
     }
     componentDidMount() {
@@ -415,15 +454,16 @@ class MobileEditorMap extends React.Component {
         const { userLocation } = this.props;
         const { translations } = this.props.formContext;
         const mapComponentProps = Object.assign(Object.assign(Object.assign({}, options), (this.props.options || {})), { locate: {
-                on: true,
+                on: false,
                 userLocation,
-                panOnFound: false,
+                onLocationFound: this.onLocate,
+                panOnFound: false
             }, singleton: true, clickBeforeZoomAndPan: false, viewLocked: false, controls: { draw: false }, ref: this.setMobileEditorMapRef, formContext: this.props.formContext, panel: {
                 panelTextContent: this.props.formContext.translations.MobileMapInstructions
             } });
         return (React.createElement(components_2.Fullscreen, { onKeyDown: this.onKeyDown, tabIndex: -1, ref: this.setContainerRef, formContext: this.props.formContext },
             React.createElement(MapArrayField_1.MapComponent, Object.assign({}, mapComponentProps)),
             React.createElement("div", { className: "floating-buttons-container" },
-                React.createElement(components_2.Button, { block: true, onClick: this.onChange, variant: "primary", ref: this.setOkButtonRef, disabled: !this.props.moved }, translations.ChooseThisLocation))));
+                React.createElement(components_2.Button, { block: true, onClick: this.onChange, className: "choose-location-button", variant: "primary", ref: this.setOkButtonRef, disabled: !this.props.moved }, translations.ChooseThisLocation))));
     }
 }

package/lib/components/widgets/AutosuggestWidget.js

@@ -1026,7 +1026,8 @@ class ReactAutosuggest extends React.Component {
             this.onBlur(e);
         };
         this.onInputKeyDown = (e) => {
-            let state, suggestion;
+            var _a, _b;
+            let state;
             switch (e.key) {
                 case "ArrowDown":
                     e.preventDefault();
@@ -1056,10 +1057,7 @@ class ReactAutosuggest extends React.Component {
                     break;
                 case "Enter":
                     e.preventDefault();
-                    suggestion = (this.props.suggestions || [])[this.state.focusedIdx];
-                    if (suggestion) {
-                        this.onSuggestionSelected(suggestion);
-                    }
+                    this.inputElem.blur();
                     break;
                 case "Control":
                 case "Meta":
@@ -1070,7 +1068,7 @@ class ReactAutosuggest extends React.Component {
                 default:
                     this.setState({ touched: true });
             }
-            this.props.inputProps && this.props.inputProps.onKeyDown && this.props.inputProps.onKeyDown(e);
+            (_b = (_a = this.props.inputProps) === null || _a === void 0 ? void 0 : _a.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
         };
         this.onInputChange = (e) => {
             this._onInputChange(e.target.value, "keystroke");
@@ -1121,13 +1119,14 @@ class ReactAutosuggest extends React.Component {
             this.renderSuggestions()));
     }
     onBlur(e) {
+        var _a, _b;
         if (e.relatedTarget && e.relatedTarget === react_dom_1.findDOMNode(this.listRef.current)) {
             return;
         }
         const suggestion = (this.props.suggestions || [])[this.state.focusedIdx];
         suggestion && this.onSuggestionSelected(this.props.suggestions[this.state.focusedIdx]);
         this.setState({ focused: false, focusedIdx: undefined, touched: false });
-        this.props.inputProps && this.props.inputProps.onBlur && this.props.inputProps.onBlur(e);
+        (_b = (_a = this.props.inputProps) === null || _a === void 0 ? void 0 : _a.onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e);
     }
     renderInput() {
         const { inputProps, renderInputComponent = this.renderDefaultInputComponent } = this.props;

package/lib/components/widgets/InputGroupWidget.d.ts

@@ -11,7 +11,7 @@ export default class InputGroupWidget extends React.Component<any, any, any> {
         schema: PropTypes.Validator<PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
         }>>;
-        value: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string | number>;
         required: PropTypes.Requireable<boolean>;
     };
     constructor(props: any);

package/lib/components/widgets/InputGroupWidget.js

@@ -31,6 +31,6 @@ InputGroupWidget.propTypes = {
     schema: PropTypes.shape({
         type: PropTypes.oneOf(["string", "number", "integer"]),
     }).isRequired,
-    value: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     required: PropTypes.bool
 };