@luomus/laji-form 14.3.6

package/lib/components/widgets/AutosuggestWidget.js

@@ -0,0 +1,1127 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autosuggest = void 0;
+const React = require("react");
+const react_dom_1 = require("react-dom");
+const PropTypes = require("prop-types");
+const Spinner = require("react-spinner");
+const utils_1 = require("../../utils");
+const components_1 = require("../components");
+const ReactContext_1 = require("../../ReactContext");
+const InformalTaxonGroupChooserWidget_1 = require("./InformalTaxonGroupChooserWidget");
+function renderFlag(suggestion, prepend) {
+    return (suggestion && suggestion.payload || {}).finnish
+        ? React.createElement(React.Fragment, null,
+            prepend || null,
+            React.createElement("img", { src: "https://cdn.laji.fi/images/icons/flag_fi_small.png", width: "16" }))
+        : null;
+}
+class _AutosuggestWidget extends React.Component {
+    render() {
+        if (this.props.options) {
+            switch (this.props.options.autosuggestField) {
+                case "taxon":
+                    return React.createElement(TaxonAutosuggestWidget, Object.assign({}, this.props));
+                case "unit":
+                    return React.createElement(UnitAutosuggestWidget, Object.assign({}, this.props));
+                case "friends":
+                case "person":
+                    return React.createElement(FriendsAutosuggestWidget, Object.assign({}, this.props));
+                case "organization":
+                    return React.createElement(OrganizationAutosuggestWidget, Object.assign({}, this.props));
+                default:
+                    return React.createElement(RangeAutosuggestWidget, Object.assign({}, this.props));
+            }
+        }
+        return React.createElement(Autosuggest, Object.assign({}, this.props));
+    }
+    formatValue(value, options, parentProps) {
+        if (options) {
+            let component = undefined;
+            switch (options.autosuggestField) {
+                case "taxon":
+                    component = TaxonAutosuggestWidget;
+                    break;
+                case "unit":
+                    component = UnitAutosuggestWidget;
+                    break;
+                case "friends":
+                case "person":
+                    component = FriendsAutosuggestWidget;
+                    break;
+                case "organization":
+                    component = OrganizationAutosuggestWidget;
+                    break;
+                default:
+                    component = RangeAutosuggestWidget;
+            }
+            if (component) {
+                return React.createElement(SimpleValueRenderer, { component: component, value: value, formContext: parentProps.formContext });
+            }
+        }
+    }
+}
+exports.default = _AutosuggestWidget;
+_AutosuggestWidget.propTypes = {
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["string"])
+    }).isRequired,
+    value: PropTypes.string
+};
+class SimpleValueRenderer extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { inputValue: this.props.value, loading: true };
+    }
+    componentDidMount() {
+        const { getSuggestionFromValue, isValueSuggested } = this.props.component.prototype;
+        if (getSuggestionFromValue && isValueSuggested) {
+            this.isValueSuggested = isValueSuggested.bind(this);
+            getSuggestionFromValue.call(this, this.props.value).then((suggestion) => {
+                this.setState({ inputValue: suggestion.value, loading: false });
+            }).catch(() => this.setState({ loading: false }));
+        }
+    }
+    render() {
+        return this.state.loading ? React.createElement(Spinner, null) : React.createElement("span", null, this.state.inputValue);
+    }
+}
+function TaxonAutosuggest(ComposedComponent) {
+    var _a;
+    return _a = class TaxonAutosuggestWidget extends ComposedComponent {
+            constructor(props) {
+                super(props);
+                this.renderSuccessGlyph = () => {
+                    const { Glyphicon } = this.context.theme;
+                    return React.createElement(Glyphicon, { style: { pointerEvents: "none" }, glyph: "ok", className: "form-control-feedback" });
+                };
+                this.parseChooseImages = (chooseImages) => {
+                    return chooseImages.map(taxonIDOrObj => typeof taxonIDOrObj === "string" ? { id: taxonIDOrObj } : taxonIDOrObj);
+                };
+                this.renderChooseImages = () => {
+                    const chooseImages = this.state && this.state.chooseImages || this.props.options.chooseImages;
+                    const { orWriteSpeciesNameLabel } = utils_1.getUiOptions(this.props);
+                    const { or } = this.props.formContext.translations;
+                    const { Row, Col } = this.context.theme;
+                    return (React.createElement(Row, null,
+                        React.createElement(Col, { xs: 12 },
+                            React.createElement("div", { className: "laji-form-medias" }, this.parseChooseImages(chooseImages).map(taxonIDObj => React.createElement(TaxonImgChooser, { id: taxonIDObj.id, key: taxonIDObj.id, url: taxonIDObj.url, onSelect: this.onTaxonImgSelected, formContext: this.props.formContext })))),
+                        React.createElement(Col, { xs: 12 },
+                            React.createElement("label", null,
+                                or,
+                                " ",
+                                orWriteSpeciesNameLabel || this.props.formContext.translations.orWriteSpeciesName))));
+                };
+                this.onTaxonImgSelected = (taxonID, taxon) => {
+                    this.autosuggestRef.selectSuggestion({
+                        key: taxonID,
+                        value: taxon.vernacularName,
+                        payload: taxon
+                    });
+                };
+                this.setAutosuggestRef = (elem) => {
+                    this.autosuggestRef = elem;
+                };
+                this.getSuggestionFromValue = this.getSuggestionFromValue.bind(this);
+                this.isValueSuggested = this.isValueSuggested.bind(this);
+                if (super.renderSuggestion) {
+                    this.renderSuggestion = super.renderSuggestion.bind(this);
+                }
+                else {
+                    this.renderSuggestion = this.renderSuggestion.bind(this);
+                }
+            }
+            componentDidMount() {
+                this.mounted = true;
+            }
+            componentWillUnmount() {
+                this.mounted = false;
+            }
+            componentDidUpdate(prevProps) {
+                const { value, options = {} } = this.props;
+                if (value !== prevProps.value && options.getSuggestionFromValue && options.chooseImages) {
+                    options.getSuggestionFromValue(value).then(suggestion => {
+                        if (!this.mounted)
+                            return;
+                        const found = this.parseChooseImages(options.chooseImages).find(({ id }) => suggestion.key === id);
+                        this.setState({ chooseImages: found ? [found] : undefined });
+                    });
+                }
+            }
+            getSuggestionFromValue(value) {
+                if (this.isValueSuggested(value)) {
+                    return this.props.formContext.apiClient.fetchCached(`/taxa/${value}`).then(({ vernacularName, scientificName }) => {
+                        if (vernacularName !== undefined) {
+                            return { value: vernacularName, key: value };
+                        }
+                        if (scientificName !== undefined) {
+                            return { value: scientificName, key: value };
+                        }
+                    });
+                }
+                else {
+                    return Promise.reject();
+                }
+            }
+            isValueSuggested(value) {
+                return !utils_1.isEmptyString(value) && !!value.match(/MX\.\d+/);
+            }
+            parseInputValue(inputValue) {
+                return inputValue.replace(/ sp(\.|p)?\.?$/, "");
+            }
+            renderSuggestion(suggestion) {
+                const renderedSuggestion = "autocompleteDisplayName" in suggestion
+                    && React.createElement("span", { dangerouslySetInnerHTML: { __html: suggestion.autocompleteDisplayName } })
+                    || React.createElement(React.Fragment, null,
+                        suggestion.value,
+                        renderFlag(suggestion));
+                return React.createElement("span", { className: "simple-option" }, renderedSuggestion);
+            }
+            render() {
+                const { props } = this;
+                const { options: propsOptions } = props, propsWithoutOptions = __rest(props, ["options"]);
+                const options = {
+                    getSuggestionFromValue: this.getSuggestionFromValue,
+                    isValueSuggested: this.isValueSuggested,
+                    Wrapper: TaxonWrapper,
+                    renderSuccessGlyph: this.renderSuccessGlyph,
+                    renderSuggestion: this.renderSuggestion,
+                    parseInputValue: this.parseInputValue
+                };
+                const _options = Object.assign(Object.assign(Object.assign(Object.assign({}, options), propsWithoutOptions), (propsOptions || {})), { query: Object.assign(Object.assign(Object.assign({}, (options.query || {})), (propsWithoutOptions.query || {})), (propsOptions.query || {})) });
+                if (propsOptions.chooseImages && !(props.value && props.formContext.uiSchemaContext.isEdit)) {
+                    _options.renderExtra = this.renderChooseImages;
+                }
+                return React.createElement(Autosuggest, Object.assign({ ref: this.setAutosuggestRef }, _options));
+            }
+        },
+        _a.contextType = ReactContext_1.default,
+        _a;
+}
+let TaxonAutosuggestWidget = class TaxonAutosuggestWidget extends React.Component {
+};
+TaxonAutosuggestWidget = __decorate([
+    TaxonAutosuggest
+], TaxonAutosuggestWidget);
+let UnitAutosuggestWidget = class UnitAutosuggestWidget extends React.Component {
+    constructor(props) {
+        super(props);
+        this.renderSuggestion = this.renderSuggestion.bind(this);
+    }
+    renderSuggestion(suggestion) {
+        const { count, maleIndividualCount, femaleIndividualCount } = suggestion.payload.interpretedFrom;
+        const [countElem, maleElem, femaleElem] = [count, maleIndividualCount, femaleIndividualCount].map(val => val && React.createElement("span", { className: "text-muted" }, val));
+        const taxonName = suggestion.payload.unit.identifications[0].taxon;
+        const name = suggestion.payload.isNonMatching
+            ? React.createElement("span", { className: "text-muted" },
+                taxonName,
+                " ",
+                React.createElement("i", null,
+                    "(",
+                    this.props.formContext.translations.unknownSpeciesName,
+                    ")"))
+            : taxonName;
+        return React.createElement("span", null,
+            countElem,
+            countElem && " ",
+            name,
+            maleElem && " ",
+            maleElem,
+            femaleElem && " ",
+            femaleElem,
+            renderFlag(suggestion));
+    }
+};
+UnitAutosuggestWidget = __decorate([
+    TaxonAutosuggest
+], UnitAutosuggestWidget);
+class FriendsAutosuggestWidget extends React.Component {
+    constructor(props) {
+        super(props);
+        this.prepareSuggestion = (suggestion) => {
+            const { isAdmin } = this.props.formContext.uiSchemaContext;
+            const { showID } = utils_1.getUiOptions(this.props);
+            return isAdmin && showID
+                ? Object.assign(Object.assign({}, suggestion), { value: `${suggestion.value} (${suggestion.key})` }) : suggestion;
+        };
+        this.findExactMatch = (suggestions, inputValue) => {
+            return suggestions.find(suggestion => (suggestion && suggestion.value.toLowerCase() === inputValue.trim().toLowerCase()));
+        };
+        this.renderSuccessGlyph = () => {
+            const { Glyphicon } = this.context.theme;
+            return (React.createElement(Glyphicon, { style: { pointerEvents: "none" }, glyph: "user", className: "form-control-feedback" }));
+        };
+        this.getSuggestionFromValue = this.getSuggestionFromValue.bind(this);
+        this.isValueSuggested = this.isValueSuggested.bind(this);
+    }
+    getSuggestionFromValue(value) {
+        const { showID } = utils_1.getUiOptions(this.props);
+        const { isAdmin } = this.props.formContext.uiSchemaContext;
+        if (this.isValueSuggested(value)) {
+            return this.props.formContext.apiClient.fetchCached(`/person/by-id/${value}`).then(({ fullName, group, id }) => {
+                if (fullName) {
+                    const addGroup = str => group ? `${str} (${group})` : str;
+                    const addID = str => isAdmin && showID ? `${str} (${id})` : str;
+                    return {
+                        value: addID(addGroup(fullName)),
+                        key: value
+                    };
+                }
+            });
+        }
+        else {
+            return Promise.reject();
+        }
+    }
+    isValueSuggested(value) {
+        return !utils_1.isEmptyString(value) && value.match(/MA\.\d+/);
+    }
+    render() {
+        const _a = this.props, { options: propsOptions } = _a, propsWithoutOptions = __rest(_a, ["options"]);
+        const options = {
+            query: Object.assign({ includeSelf: true }, propsOptions.queryOptions),
+            getSuggestionFromValue: this.getSuggestionFromValue,
+            isValueSuggested: this.isValueSuggested,
+            Wrapper: FriendsWrapper,
+            renderSuccessGlyph: this.renderSuccessGlyph,
+            findExactMatch: this.findExactMatch,
+            prepareSuggestion: this.prepareSuggestion
+        };
+        return React.createElement(Autosuggest, Object.assign({}, options, propsWithoutOptions, propsOptions));
+    }
+}
+FriendsAutosuggestWidget.contextType = ReactContext_1.default;
+class OrganizationAutosuggestWidget extends React.Component {
+    constructor(props) {
+        super(props);
+        this.findExactMatch = (suggestions, inputValue) => {
+            return suggestions.find(suggestion => (suggestion && suggestion.value.toLowerCase() === inputValue.trim().toLowerCase()));
+        };
+        this.getSuggestionFromValue = this.getSuggestionFromValue.bind(this);
+        this.isValueSuggested = this.isValueSuggested.bind(this);
+    }
+    getSuggestionFromValue(value) {
+        if (this.isValueSuggested(value)) {
+            return this.props.formContext.apiClient.fetchCached(`/organization/by-id/${value}`).then(({ fullName }) => {
+                if (fullName) {
+                    return {
+                        value: fullName,
+                        key: value
+                    };
+                }
+            });
+        }
+        else {
+            return Promise.reject();
+        }
+    }
+    isValueSuggested(value) {
+        return !utils_1.isEmptyString(value) && value.match(/MOS\.\d+/);
+    }
+    render() {
+        const _a = this.props, { options: propsOptions } = _a, propsWithoutOptions = __rest(_a, ["options"]);
+        const options = {
+            query: Object.assign({ includeSelf: true }, propsOptions.queryOptions),
+            getSuggestionFromValue: this.getSuggestionFromValue,
+            isValueSuggested: this.isValueSuggested,
+            Wrapper: OrganizationWrapper,
+            findExactMatch: this.findExactMatch
+        };
+        return React.createElement(Autosuggest, Object.assign({}, options, propsWithoutOptions, propsOptions));
+    }
+}
+OrganizationAutosuggestWidget.contextType = ReactContext_1.default;
+class RangeAutosuggestWidget extends React.Component {
+    render() {
+        const _a = this.props, { options: propsOptions } = _a, propsWithoutOptions = __rest(_a, ["options"]);
+        return React.createElement(Autosuggest, Object.assign({ highlightFirstSuggestion: true }, propsWithoutOptions, propsOptions));
+    }
+}
+class Autosuggest extends React.Component {
+    constructor(props) {
+        super(props);
+        this.isValueSuggested = (props) => {
+            const { isValueSuggested, suggestionReceive, onSuggestionSelected } = props;
+            if (!onSuggestionSelected && suggestionReceive !== "key")
+                return undefined;
+            return isValueSuggested ? isValueSuggested(props.value) : undefined;
+        };
+        this.wrapperRef = React.createRef();
+        this.keyFunctions = {
+            autosuggestToggle: () => {
+                if (this.props.onToggle) {
+                    this.onToggle();
+                    return true;
+                }
+                return false;
+            }
+        };
+        this.triggerConvert = (props) => {
+            const { value, getSuggestionFromValue } = props;
+            if (utils_1.isEmptyString(value) || !getSuggestionFromValue) {
+                if (this.state.suggestion && Object.keys(this.state.suggestion).length > 0) {
+                    this.setState({ suggestion: undefined, inputValue: value, suggestionForValue: value });
+                }
+                return;
+            }
+            this.setState({ isLoading: true });
+            getSuggestionFromValue(value).then(suggestion => {
+                if (!this.mounted)
+                    return;
+                this.setState({ suggestion, inputValue: this.getSuggestionValue(suggestion), isLoading: false, suggestionForValue: value });
+            }).catch(() => {
+                if (!this.mounted)
+                    return;
+                this.setState({ isLoading: false });
+            });
+        };
+        this.getSuggestionValue = (suggestion) => {
+            const { getSuggestionValue } = this.props;
+            const def = suggestion.value;
+            return getSuggestionValue
+                ? getSuggestionValue(suggestion, def)
+                : def;
+        };
+        this.renderSuggestion = (suggestion) => {
+            let { renderSuggestion } = this.props;
+            if (!renderSuggestion)
+                renderSuggestion = suggestion => suggestion.value;
+            return (React.createElement("span", null, renderSuggestion(suggestion)));
+        };
+        this.selectSuggestion = (suggestion) => {
+            const { onSuggestionSelected, onChange, suggestionReceive } = this.props;
+            const afterStateChange = () => {
+                if (onSuggestionSelected) {
+                    onSuggestionSelected(suggestion, this.mounted);
+                }
+                else {
+                    if (this.mounted) {
+                        this.setState({ suggestionForValue: suggestion[suggestionReceive] }, () => onChange(suggestion[suggestionReceive]));
+                    }
+                    else {
+                        onChange(suggestion[suggestionReceive]);
+                    }
+                }
+            };
+            const state = { suggestion, inputValue: this.getSuggestionValue(suggestion) };
+            this.mounted
+                ? this.setState(state, afterStateChange)
+                : afterStateChange();
+        };
+        this.selectUnsuggested = (value) => {
+            if (utils_1.isEmptyString(value) && utils_1.isEmptyString(this.props.value))
+                return;
+            const { onUnsuggestedSelected, onChange } = this.props;
+            const afterStateChange = () => {
+                onUnsuggestedSelected ?
+                    onUnsuggestedSelected(value) :
+                    onChange(value);
+            };
+            const state = { inputValue: value, suggestion: undefined, suggestionForValue: value };
+            this.mounted
+                ? this.setState(state, afterStateChange)
+                : afterStateChange();
+        };
+        this.onSuggestionSelected = (suggestion) => {
+            this.selectSuggestion(suggestion);
+        };
+        this.onUnsuggestedSelected = (inputValue) => {
+            this.selectUnsuggested(inputValue);
+        };
+        this.findExactMatch = (suggestions, inputValue = "") => {
+            if (!Array.isArray(suggestions))
+                suggestions = [suggestions];
+            const { findExactMatch } = this.props;
+            return findExactMatch
+                ? findExactMatch(suggestions, inputValue)
+                : suggestions.find(suggestion => (suggestion && suggestion.value.toLowerCase() === inputValue.trim().toLowerCase() && (!suggestion.payload || !suggestion.payload.isNonMatching)));
+        };
+        this.findTheOnlyOneMatch = (suggestions) => {
+            if (!Array.isArray(suggestions))
+                suggestions = [suggestions];
+            const filtered = suggestions.filter(suggestion => !suggestion || !suggestion.payload || !suggestion.payload.isNonMatching);
+            if (filtered.length === 1) {
+                return filtered[0];
+            }
+        };
+        this.findNonMatching = (suggestions) => {
+            if (!Array.isArray(suggestions))
+                suggestions = [suggestions];
+            const filtered = suggestions.filter(suggestion => suggestion && suggestion.payload && suggestion.payload.isNonMatching);
+            if (filtered.length === 1) {
+                return filtered[0];
+            }
+        };
+        this.onInputChange = (e, reason, callback) => {
+            let { value } = e.target;
+            if (this.props.inputProps && this.props.inputProps.onChange) {
+                e.persist && e.persist();
+                value = this.props.inputProps.onChange(e, reason, callback);
+            }
+            this.setState({ inputValue: value }, callback);
+        };
+        this.onSuggestionsFetchRequested = ({ value }, debounce = true) => {
+            if (value === undefined || value === null)
+                value = "";
+            value = this.props.parseInputValue ? this.props.parseInputValue(value) : value;
+            if (value.length < (this.props.minFetchLength !== undefined ? this.props.minFetchLength : 2)) {
+                this.setState({ suggestions: [] });
+                return;
+            }
+            const { autosuggestField, query = {} } = this.props;
+            this.setState({ isLoading: true });
+            const request = () => {
+                let timestamp = Date.now();
+                this.promiseTimestamp = timestamp;
+                this.apiClient.fetchCached("/autocomplete/" + autosuggestField, Object.assign({ q: value, includePayload: true, matchType: "exact,partial", includeHidden: false }, query)).then(suggestions => {
+                    if (this.props.prepareSuggestion) {
+                        suggestions = suggestions.map(s => this.props.prepareSuggestion(s));
+                    }
+                    if (timestamp !== this.promiseTimestamp) {
+                        return;
+                    }
+                    this.mounted
+                        ? this.setState({ isLoading: false, suggestions }, () => this.afterBlurAndFetch(suggestions))
+                        : this.afterBlurAndFetch(suggestions);
+                }).catch(() => {
+                    this.mounted
+                        ? this.setState({ isLoading: false }, this.afterBlurAndFetch)
+                        : this.afterBlurAndFetch();
+                });
+            };
+            if (this.timeout) {
+                clearTimeout(this.timeout);
+            }
+            if (debounce) {
+                this.timeout = this.props.formContext.setTimeout(request, 100);
+            }
+            else {
+                request();
+            }
+        };
+        this.onFocus = (e) => {
+            this.setState({ focused: true });
+            utils_1.triggerParentComponent("onFocus", e, this.props.inputProps);
+        };
+        this.onBlur = (e) => {
+            this.setState({ focused: false }, () => {
+                this._valueForBlurAndFetch = this.state.inputValue;
+                this.afterBlurAndFetch(this.state.suggestions);
+                utils_1.triggerParentComponent("onBlur", e, this.props.inputProps);
+                const overlay = this.wrapperRef.current;
+                if (overlay && overlay.overlayTriggerRef && overlay.overlayTriggerRef.hide) {
+                    setTimeout(() => {
+                        overlay && overlay.overlayTriggerRef && overlay.overlayTriggerRef.hide();
+                    }, 1);
+                }
+            });
+        };
+        this.afterBlurAndFetch = (suggestions, callback) => {
+            const { inputValue = "" } = this.state;
+            const { _valueForBlurAndFetch = "" } = this;
+            if (this.mounted
+                && (this.state.focused || this._valueForBlurAndFetch === undefined || this.state.isLoading)
+                || (this.props.controlledValue && _valueForBlurAndFetch !== this.state.inputValue)) {
+                return;
+            }
+            const parsedInputValue = this.props.parseInputValue ? this.props.parseInputValue(inputValue) : inputValue;
+            const { selectOnlyOne, selectOnlyNonMatchingBeforeUnsuggested = true, informalTaxonGroups, informalTaxonGroupsValue, allowNonsuggestedValue } = this.props;
+            const exactMatch = this.findExactMatch(suggestions, parsedInputValue);
+            const onlyOneMatch = selectOnlyOne ? this.findTheOnlyOneMatch(suggestions) : undefined;
+            const nonMatching = selectOnlyNonMatchingBeforeUnsuggested ? this.findNonMatching(suggestions) : undefined;
+            const valueDidntChangeAndHasInformalTaxonGroup = this.props.value === inputValue && informalTaxonGroups && informalTaxonGroupsValue && informalTaxonGroupsValue.length;
+            if (this.highlightedSuggestionOnBlur) {
+                this.selectSuggestion(this.highlightedSuggestionOnBlur);
+            }
+            else if (onlyOneMatch) {
+                this.selectSuggestion(onlyOneMatch);
+            }
+            else if (exactMatch) {
+                this.selectSuggestion(Object.assign(Object.assign({}, exactMatch), { value: inputValue }));
+            }
+            else if (nonMatching && !valueDidntChangeAndHasInformalTaxonGroup) {
+                this.selectSuggestion(nonMatching);
+            }
+            else if (!valueDidntChangeAndHasInformalTaxonGroup && allowNonsuggestedValue) {
+                this.selectUnsuggested(parsedInputValue);
+            }
+            else if (!allowNonsuggestedValue) {
+                this.setState({ inputValue: "" }, () => this.props.onChange && this.props.onChange(""));
+            }
+            callback && callback();
+        };
+        this.setRef = (elem) => {
+            this.autosuggestRef = elem;
+        };
+        this.onInformalTaxonGroupsOpened = (open) => {
+            this.setState({ informalTaxonGroupsOpen: open });
+        };
+        this.onInformalTaxonGroupSelected = (id) => {
+            this.setState({ informalTaxonGroupsOpen: false });
+            this.props.onInformalTaxonGroupSelected && this.props.onInformalTaxonGroupSelected(id);
+        };
+        this.onInformalTaxonGroupHide = () => {
+            this.setState({ informalTaxonGroupsOpen: false });
+        };
+        this.onToggle = () => {
+            if (!this.mounted)
+                return;
+            this.props.onToggle(!this.props.toggled);
+            setTimeout(() => this.props.formContext.utils.focusById(this.props.id), 1); // Refocus input
+        };
+        this.isSuggested = () => {
+            const { suggestion } = this.state;
+            return !!suggestion && this.isValueSuggested(this.props);
+        };
+        this.renderInput = (inputProps) => {
+            let { value, renderSuccessGlyph, informalTaxonGroups, renderInformalTaxonGroupSelector = true, taxonGroupID, onToggle, displayValidationState = true, Wrapper } = this.props;
+            let validationState = null;
+            const { translations, lang } = this.props.formContext;
+            const { suggestion } = this.state;
+            const { Glyphicon } = this.context.theme;
+            const isSuggested = this.isSuggested();
+            if (displayValidationState && !utils_1.isEmptyString(value) && isSuggested !== undefined) {
+                validationState = isSuggested ? "success" : "warning";
+            }
+            const getGlyphNameFromState = (state) => {
+                switch (state) {
+                    case "success":
+                        return "ok";
+                    case "warning":
+                        return "warning-sign";
+                    case "error":
+                        return "remove";
+                    default:
+                        return "";
+                }
+            };
+            const getGlyph = (state) => {
+                if (!displayValidationState) {
+                    return null;
+                }
+                const glyph = getGlyphNameFromState(state);
+                return glyph ? (React.createElement(Glyphicon, { key: glyph, style: { pointerEvents: "none" }, glyph: glyph, className: "form-control-feedback" })) : null;
+            };
+            let glyph = undefined;
+            if (!this.state.focused && !this.state.isLoading && (!onToggle || !this.state.focused)) {
+                glyph = (validationState === "success" && renderSuccessGlyph) ?
+                    renderSuccessGlyph(value) : getGlyph(validationState);
+            }
+            const addon = informalTaxonGroups && renderInformalTaxonGroupSelector
+                ? React.createElement(InformalTaxonGroupsAddon, { key: "informal", taxonGroupID: taxonGroupID, onClear: this.onInformalTaxonGroupSelected, open: this.state.informalTaxonGroupsOpen, onOpen: this.onInformalTaxonGroupsOpened, onToggle: onToggle, formContext: this.props.formContext })
+                : null;
+            const getTogglerTooltip = () => {
+                const { toggleable } = utils_1.getUiOptions(this.props.uiSchema);
+                let tooltip = typeof toggleable.tooltip === "string"
+                    ? toggleable.tooltip
+                    : `${translations[this.props.toggled ? "StopShorthand" : "StartShorthand"]}. ${translations.ShorthandHelp}`;
+                if (tooltip === "") {
+                    return tooltip;
+                }
+                const { shortcuts } = this.props.formContext.services.keyHandler;
+                Object.keys(shortcuts).some(keyCombo => {
+                    if (shortcuts[keyCombo].fn == "autosuggestToggle") {
+                        tooltip = `[${utils_1.stringifyKeyCombo(keyCombo)}]: ${tooltip}`;
+                        return true;
+                    }
+                });
+                return tooltip;
+            };
+            const getToggleGlyph = () => {
+                const { toggleable } = utils_1.getUiOptions(this.props.uiSchema);
+                const props = {
+                    className: utils_1.classNames("autosuggest-input-addon", "power-user-addon", this.props.toggled && "active"),
+                    onMouseDown: this.onToggle,
+                    onKeyDown: this.onToggleByKeyboard
+                };
+                if (toggleable && toggleable.glyphClass) {
+                    return (React.createElement(components_1.Button, Object.assign({}, props),
+                        React.createElement("span", { className: toggleable.glyphClass })));
+                }
+                return React.createElement(components_1.GlyphButton, Object.assign({ glyph: "flash" }, props));
+            };
+            const toggler = onToggle
+                ? (React.createElement(components_1.TooltipComponent, { tooltip: getTogglerTooltip(), key: "toggler" }, getToggleGlyph())) : null;
+            const { inputValue = "" } = this.state;
+            const input = (React.createElement(components_1.FetcherInput, Object.assign({ value: inputValue, glyph: glyph, loading: this.state.isLoading, validationState: validationState, extra: [addon, toggler] }, inputProps)));
+            let component = input;
+            if (displayValidationState && Wrapper) {
+                component = (React.createElement(Wrapper, { isSuggested: isSuggested, suggestion: suggestion, options: utils_1.getUiOptions(this.props), id: this.props.id, value: suggestion && suggestion.key, inputValue: value, ref: this.wrapperRef, formContext: this.props.formContext }, component));
+            }
+            if (informalTaxonGroups) {
+                component = (React.createElement(React.Fragment, null,
+                    component,
+                    this.state.informalTaxonGroupsOpen && React.createElement(InformalTaxonGroupChooserWidget_1.InformalTaxonGroupChooser, { modal: true, onHide: this.onInformalTaxonGroupHide, onSelected: this.onInformalTaxonGroupSelected, formContext: this.props.formContext, lang: lang })));
+            }
+            return component;
+        };
+        const isSuggested = this.isValueSuggested(props);
+        this.state = {
+            isLoading: false,
+            suggestions: [],
+            focused: false,
+            inputValue: props.value !== undefined ? props.value : "",
+            suggestion: isSuggested ? {} : undefined,
+        };
+        this.apiClient = this.props.formContext.apiClient;
+    }
+    componentDidMount() {
+        this.mounted = true;
+        this.triggerConvert(this.props);
+        this.props.formContext.services.keyHandler.addKeyHandler(this.props.id, this.keyFunctions);
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+        this.props.formContext.services.keyHandler.removeKeyHandler(this.props.id, this.keyFunctions);
+    }
+    componentDidUpdate(prevProps) {
+        if (!this.props.controlledValue && this.state.suggestion && this.props && prevProps.value !== this.props.value && this.props.value !== this.state.suggestionForValue) {
+            this.props.getSuggestionFromValue(this.props.value).then(suggestion => {
+                this.setState({ inputValue: this.getSuggestionValue(suggestion), suggestion });
+            }, () => {
+                this.setState({ inputValue: "", suggestion: undefined });
+            });
+        }
+    }
+    render() {
+        const { props } = this;
+        let { suggestions, inputValue = "" } = this.state;
+        const inputProps = Object.assign(Object.assign({ id: this.props.id, value: inputValue, readonly: props.readonly, disabled: props.disabled, placeholder: props.placeholder }, (this.props.inputProps || {})), { onChange: this.onInputChange, onBlur: this.onBlur, onFocus: this.onFocus });
+        let cssClasses = {
+            suggestionsContainer: "rw-popup-container rw-popup-transition",
+            suggestionsContainerOpen: "rw-popup",
+            suggestionsList: "rw-list",
+            suggestion: "rw-list-option",
+            suggestionHighlighted: "rw-list-option rw-state-focus rw-state-selected"
+        };
+        const highlightFirstSuggestion = "highlightFirstSuggestion" in this.props
+            ? this.props.highlightFirstSuggestion
+            : !this.props.allowNonsuggestedValue;
+        const { renderExtra } = props;
+        return (React.createElement(React.Fragment, null,
+            renderExtra && renderExtra(),
+            React.createElement("div", { className: utils_1.classNames("autosuggest-wrapper", props.wrapperClassName) },
+                React.createElement(ReactAutosuggest, { id: `${this.props.id}-autosuggest`, inputProps: inputProps, renderInputComponent: this.renderInput, suggestions: suggestions, renderSuggestion: this.renderSuggestion, onSuggestionsFetchRequested: this.onSuggestionsFetchRequested, onSuggestionsClearRequested: this.onSuggestionsClearRequested, onSuggestionSelected: this.onSuggestionSelected, onUnsuggestedSelected: this.onUnsuggestedSelected, highlightFirstSuggestion: highlightFirstSuggestion, suggestionsOpenOnFocus: !this.isSuggested(), theme: cssClasses, formContext: this.props.formContext, ref: this.setRef }))));
+    }
+}
+exports.Autosuggest = Autosuggest;
+Autosuggest.contextType = ReactContext_1.default;
+Autosuggest.propTypes = {
+    autosuggestField: PropTypes.string,
+    allowNonsuggestedValue: PropTypes.bool,
+    onSuggestionSelected: PropTypes.func,
+    onUnsuggestedSelected: PropTypes.func,
+    onInputChange: PropTypes.func,
+    uiSchema: PropTypes.object,
+    informalTaxonGroups: PropTypes.string,
+    onInformalTaxonGroupSelected: PropTypes.func
+};
+Autosuggest.defaultProps = {
+    allowNonsuggestedValue: true,
+    suggestionReceive: "key"
+};
+class _TaxonWrapper extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { converted: false };
+    }
+    componentDidMount() {
+        this.mounted = true;
+        this.fetch(this.props.value);
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+    UNSAFE_componentWillReceiveProps({ value }) {
+        this.fetch(value);
+    }
+    fetch(value) {
+        if (!value) {
+            this.setState({ scientificName: "", cursiveName: false });
+        }
+        else {
+            this.props.formContext.apiClient.fetchCached(`/taxa/${value}`).then(({ scientificName, cursiveName, vernacularName, taxonRank, informalTaxonGroups, finnish }) => {
+                if (!this.mounted)
+                    return;
+                this.setState({ value, taxonRank, informalTaxonGroups, taxon: { scientificName, vernacularName, cursiveName, finnish } });
+                InformalTaxonGroupChooserWidget_1.getInformalGroups(this.props.formContext.apiClient).then(({ informalTaxonGroupsById }) => {
+                    if (!this.mounted)
+                        return;
+                    this.setState({ informalTaxonGroupsById });
+                });
+            });
+            this.props.formContext.apiClient.fetchCached(`/taxa/${value}/parents`).then(parents => {
+                if (!this.mounted)
+                    return;
+                const state = { order: undefined, family: undefined };
+                for (let parent of parents) {
+                    const { vernacularName, scientificName, cursiveName } = parent;
+                    if (parent.taxonRank === "MX.order") {
+                        state.order = { vernacularName, scientificName, cursiveName };
+                    }
+                    else if (parent.taxonRank === "MX.family") {
+                        state.family = { vernacularName, scientificName, cursiveName };
+                    }
+                    if (state.order && state.family) {
+                        this.setState(state);
+                        break;
+                    }
+                }
+                this.setState(Object.assign(Object.assign({}, state), { higherThanOrder: !state.order && !state.family }));
+            });
+            this.props.formContext.apiClient.fetchCached("/metadata/ranges/MX.taxonRankEnum").then(taxonRanks => {
+                if (!this.mounted)
+                    return;
+                this.setState({ taxonRanks: utils_1.dictionarify(taxonRanks, function getKey(rank) { return rank.id; }, function getValue(rank) { return rank.value; }) });
+            });
+        }
+    }
+    render() {
+        const { id, formContext, value, children, placement, inputValue, isSuggested } = this.props;
+        const { taxon = {}, taxonRanks, taxonRank, order, family, higherThanOrder, informalTaxonGroupsById = {}, informalTaxonGroups = [] } = this.state;
+        const { Popover, Tooltip } = this.context.theme;
+        const tooltipElem = (React.createElement(Tooltip, { id: `${id}-popover-tooltip` }, formContext.translations.OpenSpeciedCard));
+        let imageID = informalTaxonGroups[0];
+        if (informalTaxonGroupsById[imageID] && informalTaxonGroupsById[imageID].parent) {
+            imageID = informalTaxonGroupsById[imageID].parent.id;
+        }
+        const loading = !taxonRank || !(order || family || higherThanOrder) || !taxonRanks;
+        const popover = utils_1.isEmptyString(inputValue)
+            ? React.createElement(React.Fragment, null)
+            : inputValue && isSuggested === false
+                ? React.createElement(Tooltip, { id: `${this.props.id}-tooltip` }, this.props.formContext.translations.UnknownName)
+                : (React.createElement(Popover, { id: `${id}-popover` },
+                    React.createElement("div", { className: `laji-form taxon-popover informal-group-image ${imageID}` },
+                        React.createElement("div", null,
+                            React.createElement(ReactContext_1.default.Provider, { value: this.context },
+                                React.createElement(components_1.OverlayTrigger, { overlay: tooltipElem },
+                                    React.createElement("a", { href: `http://tun.fi/${value}`, target: "_blank", rel: "noopener noreferrer" },
+                                        React.createElement(TaxonName, Object.assign({}, taxon)),
+                                        React.createElement("br", null)))),
+                            React.createElement("strong", null,
+                                formContext.translations.taxonomicRank,
+                                ":"),
+                            " ",
+                            taxonRanks && taxonRank ? taxonRanks[taxonRank] : "",
+                            React.createElement("br", null),
+                            !higherThanOrder ? (React.createElement(React.Fragment, null,
+                                React.createElement("strong", null,
+                                    formContext.translations.taxonGroups,
+                                    ":"),
+                                React.createElement("ul", null,
+                                    order && React.createElement("li", null,
+                                        React.createElement(TaxonName, Object.assign({}, order))),
+                                    family && React.createElement("li", null,
+                                        React.createElement(TaxonName, Object.assign({}, family)))))) : React.createElement(React.Fragment, null,
+                                React.createElement("br", null),
+                                React.createElement("br", null))),
+                        loading && React.createElement(Spinner, null))));
+        return (React.createElement(components_1.OverlayTrigger, { hoverable: true, placement: placement, contextId: this.props.formContext.contextId, overlay: popover, ref: this.props.overlayRef, formContext: this.props.formContext }, children));
+    }
+}
+_TaxonWrapper.contextType = ReactContext_1.default;
+const TaxonWrapper = React.forwardRef((props, ref) => React.createElement(_TaxonWrapper, Object.assign({}, props, { overlayRef: ref })));
+class InformalTaxonGroupsAddon extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onClear = (e) => {
+            e.stopPropagation();
+            if (this.props.onClear)
+                this.props.onClear(undefined);
+        };
+        this.toggle = () => {
+            if (this.props.onOpen)
+                this.props.onOpen(!this.props.open);
+        };
+        this.onKeyDown = this.props.formContext.utils.keyboardClick(this.toggle);
+        this.renderGlyph = () => {
+            const { taxonGroupID } = this.props;
+            let imageID = taxonGroupID;
+            const { informalTaxonGroupsById = {} } = this.state;
+            if (informalTaxonGroupsById[taxonGroupID] && informalTaxonGroupsById[taxonGroupID].parent) {
+                imageID = informalTaxonGroupsById[taxonGroupID].parent.id;
+            }
+            const buttonProps = {
+                onClick: this.toggle,
+                onKeyDown: this.onKeyDown
+            };
+            return taxonGroupID
+                ? (React.createElement("span", { className: "btn btn-default informal-taxon-group-chooser-addon active" },
+                    React.createElement("div", null,
+                        React.createElement("span", Object.assign({}, buttonProps, { className: `informal-group-image ${imageID}` })),
+                        React.createElement("button", { className: "close", onClick: this.onClear }, "\u00D7")))) : (React.createElement(components_1.GlyphButton, Object.assign({}, buttonProps, { glyph: "menu-hamburger", className: "autosuggest-input-addon informal-taxon-group-chooser" })));
+        };
+        this.state = {};
+    }
+    componentDidMount() {
+        this.mounted = true;
+        InformalTaxonGroupChooserWidget_1.getInformalGroups(this.props.formContext.apiClient).then(({ informalTaxonGroupsById }) => {
+            if (!this.mounted)
+                return;
+            this.setState({ informalTaxonGroupsById });
+        });
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+    render() {
+        if (!this.onKeyDown) { // Context not available before first render, so we initialize the key handler here.
+            this.onKeyDown = this.context.utils.keyboardClick(this.toggle);
+        }
+        return (React.createElement(components_1.TooltipComponent, { tooltip: this.props.taxonGroupID && this.state.informalTaxonGroupsById ? this.state.informalTaxonGroupsById[this.props.taxonGroupID].name : this.props.formContext.translations.PickInformalTaxonGroup }, this.renderGlyph()));
+    }
+}
+InformalTaxonGroupsAddon.contextType = ReactContext_1.default;
+class TaxonImgChooser extends React.Component {
+    constructor(props) {
+        super(props);
+        this.showModal = () => {
+            this.setState({ modal: true });
+        };
+        this.hideModal = () => {
+            this.setState({ modal: false });
+        };
+        this.onSelected = () => {
+            this.props.onSelect(this.props.id, this.state.taxon);
+            this.hideModal();
+        };
+        this.state = {};
+    }
+    componentDidMount() {
+        this.mounted = true;
+        this.props.formContext.apiClient.fetchCached(`/taxa/${this.props.id}`, { includeMedia: true }).then(taxon => {
+            if (!this.mounted)
+                return;
+            if (taxon.multimedia && taxon.multimedia.length) {
+                const [media] = taxon.multimedia;
+                this.setState({
+                    taxon: taxon,
+                    thumbnail: this.props.url || media.squareThumbnailURL || media.thumbnailURL,
+                    large: this.props.url || media.largeURL
+                });
+            }
+            else {
+                this.setState({ taxon });
+            }
+        });
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+    render() {
+        const { thumbnail, taxon, modal } = this.state;
+        const { translations } = this.props.formContext;
+        const { Modal } = this.context.theme;
+        return (React.createElement("div", { className: "laji-form-medias" },
+            React.createElement("div", { className: "taxon-img media-container interactive", style: { backgroundImage: `url(${thumbnail})` }, onClick: this.showModal, tabIndex: 0 },
+                !taxon && React.createElement("div", { className: "media-loading" },
+                    React.createElement(Spinner, null)),
+                React.createElement("span", null, taxon && taxon.vernacularName || "")),
+            modal &&
+                React.createElement(Modal, { dialogClassName: "laji-form media-modal", show: true, onHide: this.hideModal },
+                    React.createElement(Modal.Body, null,
+                        React.createElement("img", { src: this.state.large }),
+                        React.createElement("div", null,
+                            React.createElement("h3", { className: "text-center" },
+                                React.createElement(TaxonName, Object.assign({}, this.state.taxon, { finnish: false }))),
+                            React.createElement(components_1.Button, { block: true, onClick: this.onSelected }, translations.Select),
+                            React.createElement(components_1.Button, { block: true, onClick: this.hideModal }, translations.Cancel))))));
+    }
+}
+TaxonImgChooser.contextType = ReactContext_1.default;
+const TaxonName = ({ scientificName, vernacularName = "", cursiveName, finnish }) => {
+    const _scientificName = vernacularName && scientificName
+        ? `(${scientificName})`
+        : (scientificName || "");
+    return (React.createElement(React.Fragment, null,
+        `${vernacularName}${vernacularName ? " " : ""}`,
+        cursiveName ? React.createElement("i", null, _scientificName) : _scientificName,
+        renderFlag({ payload: { finnish } }, " ")));
+};
+class ReactAutosuggest extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onInputFocus = (e) => {
+            this.setState({ focused: true, hideSuggestions: false });
+            this.requestFetch(this.state.inputValue);
+            this.props.inputProps && this.props.inputProps.onFocus && this.props.inputProps.onFocus(e);
+        };
+        this.onInputTryBlur = (e) => {
+            if (this.suggestionMouseDownFlag) {
+                return;
+            }
+            this.onBlur(e);
+        };
+        this.onListBlur = (e) => {
+            this.onBlur(e);
+        };
+        this.onInputKeyDown = (e) => {
+            let state, suggestion;
+            const { shortcuts } = this.props.formContext.services.keyHandler;
+            switch (e.key) {
+                case "ArrowDown":
+                    e.preventDefault();
+                    if (this.state.focusedIdx >= (this.props.suggestions || []).length - 1) {
+                        break;
+                    }
+                    state = {
+                        focusedIdx: typeof this.state.focusedIdx === "number"
+                            ? this.state.focusedIdx + 1
+                            : (this.props.suggestions || []).length
+                                ? 0
+                                : undefined,
+                        touched: true
+                    };
+                    if (state.focusedIdx !== undefined) {
+                        state.inputValue = this.props.suggestions[state.focusedIdx].value;
+                    }
+                    this.setState(state);
+                    break;
+                case "ArrowUp":
+                    e.preventDefault();
+                    state = { focusedIdx: this.state.focusedIdx > 0 ? this.state.focusedIdx - 1 : undefined, touched: true };
+                    if (state.focusedIdx !== undefined) {
+                        state.inputValue = this.props.suggestions[state.focusedIdx].value;
+                    }
+                    this.setState(state);
+                    break;
+                case "Enter":
+                    e.preventDefault();
+                    suggestion = (this.props.suggestions || [])[this.state.focusedIdx];
+                    if (shortcuts.Enter) {
+                        this.props.formContext.setTimeout(() => {
+                            suggestion && this.onSuggestionSelected(suggestion);
+                        }, 0);
+                    }
+                    else {
+                        this.inputElem.blur();
+                    }
+                    break;
+                case "Control":
+                case "Meta":
+                case "Alt":
+                case "Shift":
+                case "CapsLock":
+                    break;
+                default:
+                    this.setState({ touched: true });
+            }
+            this.props.inputProps && this.props.inputProps.onKeyDown && this.props.inputProps.onKeyDown(e);
+        };
+        this.onInputChange = (e) => {
+            this._onInputChange(e.target.value, "keystroke");
+        };
+        this._onInputChange = (value, reason) => {
+            const callback = reason === "click"
+                ? () => { }
+                : () => this.requestFetch(this.state.inputValue);
+            this.props.inputProps && this.props.inputProps.onChange
+                ? this.props.inputProps.onChange({ target: { value } }, reason, callback)
+                : this.setState({ inputValue: value }, callback);
+        };
+        this.setInputRef = (elem) => {
+            this.inputElem = react_dom_1.findDOMNode(elem);
+        };
+        this.onSuggestionMouseDown = () => {
+            this.suggestionMouseDownFlag = true;
+        };
+        this.onSuggestionMouseUp = (e) => {
+            this.suggestionMouseDownFlag = false;
+            const suggestion = this.getSuggestionFromClick(e);
+            this.setState({ inputValue: suggestion.value }, () => {
+                this._onInputChange(suggestion.value, "click");
+                this.onBlur(e);
+            });
+        };
+        this.getSuggestionFromClick = ({ target }) => {
+            let idx;
+            while (typeof idx !== "string") {
+                idx = target.getAttribute("data-idx");
+                target = target.parentElement;
+            }
+            return this.props.suggestions[idx];
+        };
+        this.listRef = React.createRef();
+        this.state = {
+            inputValue: props.inputProps.value
+        };
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        if ("value" in props.inputProps) {
+            this.setState({ inputValue: props.inputProps.value });
+        }
+    }
+    render() {
+        return (React.createElement("div", { onFocus: this.onContainerFocus, onBlur: this.onContainerBlur },
+            this.renderInput(),
+            this.renderSuggestions()));
+    }
+    onBlur(e) {
+        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);
+    }
+    renderInput() {
+        const { inputProps, renderInputComponent = this.renderDefaultInputComponent } = this.props;
+        return renderInputComponent(Object.assign(Object.assign({}, inputProps), { value: this.state.inputValue, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputTryBlur, onKeyDown: this.onInputKeyDown, ref: this.setInputRef }));
+    }
+    renderDefaultInputComponent(props) {
+        return React.createElement("input", Object.assign({}, props));
+    }
+    renderSuggestions() {
+        if ((!this.props.suggestionsOpenOnFocus && !this.state.touched)
+            || !this.state.focused
+            || this.state.hideSuggestions
+            || !(this.props.suggestions || []).length) {
+            return null;
+        }
+        const { suggestion, suggestionsList, suggestionsContainer, suggestionsContainerOpen, suggestionHighlighted } = this.props.theme || {};
+        return (React.createElement("div", { className: utils_1.classNames(suggestionsContainer, suggestionsContainerOpen) },
+            React.createElement("ul", { className: suggestionsList, tabIndex: -1, ref: this.listRef, onBlur: this.onListBlur }, this.props.suggestions.map((s, i) => React.createElement("li", { key: i, className: utils_1.classNames(suggestion, this.state.focusedIdx === i && suggestionHighlighted), onMouseDown: this.onSuggestionMouseDown, onMouseUp: this.onSuggestionMouseUp, "data-idx": i }, this.props.renderSuggestion(s))))));
+    }
+    onSuggestionSelected(suggestion) {
+        this.setState({ inputValue: suggestion.value, hideSuggestions: true });
+        this.props.onSuggestionSelected && this.props.onSuggestionSelected(suggestion);
+    }
+    requestFetch(value) {
+        this.props.onSuggestionsFetchRequested({ value });
+    }
+}
+ReactAutosuggest.contextType = ReactContext_1.default;
+const FriendsWrapper = React.forwardRef(({ formContext, children, id, inputValue, isSuggested }, ref) => {
+    const { Tooltip } = React.useContext(ReactContext_1.default).theme;
+    if (!inputValue || isSuggested) {
+        return children;
+    }
+    const tooltip = (React.createElement(Tooltip, { id: `${id}-tooltip` }, formContext.translations.UnknownName));
+    return (React.createElement(components_1.OverlayTrigger, { overlay: tooltip, placement: "top", ref: ref }, children));
+});
+const OrganizationWrapper = React.forwardRef(({ formContext, children, id, inputValue, isSuggested }, ref) => {
+    const { Tooltip } = React.useContext(ReactContext_1.default).theme;
+    if (!inputValue || isSuggested) {
+        return children;
+    }
+    const tooltip = (React.createElement(Tooltip, { id: `${id}-tooltip` }, formContext.translations.UnknownOrganization));
+    return (React.createElement(components_1.OverlayTrigger, { overlay: tooltip, placement: "top", ref: ref }, children));
+});