@luomus/laji-form 15.1.88 → 15.1.90

package/dist/styles.css

@@ -2389,8 +2389,10 @@ body .laji-form {
 	margin-bottom: 0px;
 }
 .laji-form .autosuggest-wrapper .rw-list-option img {
-	border: 1px solid;
 	float: right;
+}
+.laji-form .autosuggest-wrapper .rw-list-option img.flag-img {
+	border: 1px solid;
 	margin-top: 4px;
 }
 

package/lib/components/LajiForm.js

@@ -146,6 +146,7 @@ const fields = importLocalComponents("fields", [
     "MultiActiveArrayField",
     "PrefixArrayField",
     "FillDateRangeField",
+    "ScientificNameTaxonAutosuggestField",
     { "InputTransformerField": "ConditionalOnChangeField" }, // Alias for backward compatibility.
     { "ConditionalField": "ConditionalUiSchemaField" }, // Alias for backward compatibility.
     { "UnitRapidField": "UnitShorthandField" }, // Alias for backward compatibility.

package/lib/components/fields/EnumRangeArrayField.js

@@ -60,7 +60,7 @@ function EnumRangeArrayField(props) {
         propsOnChange(value);
     }, [propsOnChange]);
     const getEnumOptionsAsync = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
-        const enums = yield props.formContext.apiClient.get(`/metadata/ranges/${range}`);
+        const enums = (yield props.formContext.apiClient.get("/metadata/alts/{alt}", { path: { alt: range } })).results;
         return enums.map(({ value }) => ({ value, label: value }));
     }), [props.formContext.apiClient, range]);
     const { Label } = props.formContext;

package/lib/components/fields/ImageArrayField.js

@@ -189,7 +189,7 @@ function MediaArrayField(ComposedComponent) {
                 const metadataForm = this.state.metadataForm || {};
                 if (typeof metadataModalOpen === "number" && !this.state.metadataForm) {
                     const { metadataFormId = this.METADATA_FORM_ID } = (0, utils_1.getUiOptions)(this.props.uiSchema);
-                    this.apiClient.get("/forms/{id}", { path: { id: metadataFormId }, query: { lang, format: "schema" } })
+                    this.apiClient.get("/forms/{id}", { path: { id: metadataFormId }, query: { format: "schema" } })
                         .then(metadataForm => {
                         if (this.mounted) {
                             this.setState({ metadataForm });

package/lib/components/fields/NamedPlaceChooserField/NamedPlaceChooser.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { ByLang, FormContext } from "../../LajiForm";
 import memoize from "memoizee";
 import type { components } from "generated/api.d";
-type NamedPlace = components["schemas"]["namedPlace"];
+type NamedPlace = components["schemas"]["store-namedPlace"];
 type Props = {
     places: NamedPlace[];
     failed?: boolean;

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { FieldProps, JSONSchemaArray, JSONSchemaObject } from "../../../types";
 import type { components } from "generated/api.d";
-type NamedPlace = components["schemas"]["namedPlace"];
+type NamedPlace = components["schemas"]["store-namedPlace"];
 type Props = FieldProps<NamedPlace, JSONSchemaObject | JSONSchemaArray<JSONSchemaObject>>;
 type State = {
     show?: boolean;

package/lib/components/fields/NamedPlaceChooserField/Popup.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { FormContext } from "src/components/LajiForm";
 import type { components } from "generated/api.d";
-type NamedPlace = components["schemas"]["namedPlace"];
+type NamedPlace = components["schemas"]["store-namedPlace"];
 type Props = {
     onPlaceSelected: (place: NamedPlace) => void;
     onPlaceDeleted: (place: NamedPlace) => void;

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

@@ -0,0 +1,39 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { FieldProps, JSONSchemaObject, JSONSchemaEnumOneOf } from "../../types";
+interface State extends Pick<FieldProps<JSONSchemaObject>, "schema" | "uiSchema"> {
+    suggestion?: any;
+}
+interface ValueContext {
+    taxonRank?: string;
+    author?: string;
+}
+export default class ScientificNameTaxonAutosuggestField extends React.Component<FieldProps<JSONSchemaObject>, State> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    static propTypes: {
+        uiSchema: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            "ui:options": PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                taxonField: PropTypes.Validator<string>;
+                taxonRankField: PropTypes.Validator<string>;
+                authorField: PropTypes.Validator<string>;
+                allowNonsuggestedValue: PropTypes.Requireable<boolean>;
+            }>>>;
+            uiSchema: PropTypes.Requireable<object>;
+        }>>>;
+        schema: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>>;
+        formData: PropTypes.Validator<object>;
+    };
+    getStateFromProps: (props: FieldProps<JSONSchemaObject>) => State;
+    getSuggestionValue: (suggestion: any) => string;
+    onSuggestionSelected: (suggestion: any, mounted: boolean) => void;
+    onUnsuggestionSelected: (value: any) => void;
+    isValueSuggested: (value?: string, valueContext?: ValueContext) => boolean | undefined;
+    getSuggestionFromValue: (value?: string, valueContext?: ValueContext) => Promise<any>;
+    suggestionMatchesData: (suggestion: any, value?: string, valueContext?: ValueContext) => boolean;
+    getTaxonRankOptions: () => JSONSchemaEnumOneOf[] | undefined;
+    renderSuggestion(suggestion: any, inputValue?: string): JSX.Element;
+    render(): JSX.Element;
+}
+export {};

package/lib/components/fields/ScientificNameTaxonAutosuggestField.js

@@ -0,0 +1,260 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const PropTypes = __importStar(require("prop-types"));
+const utils_1 = require("../../utils");
+const ReactContext_1 = __importDefault(require("../../ReactContext"));
+const AutosuggestWidget_1 = require("../widgets/AutosuggestWidget");
+const BaseComponent_1 = __importDefault(require("../BaseComponent"));
+const components_1 = require("../components");
+function addBold(original, substring) {
+    const newOriginal = original.toLowerCase();
+    const newString = substring.toLowerCase();
+    const index = newOriginal.indexOf(newString);
+    return index > -1 ?
+        React.createElement(React.Fragment, null,
+            original.slice(0, index),
+            React.createElement("b", null, original.slice(index, index + substring.length)),
+            original.slice(index + substring.length))
+        : original;
+}
+let ScientificNameTaxonAutosuggestField = class ScientificNameTaxonAutosuggestField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStateFromProps = (props) => {
+            var _a;
+            let { schema, uiSchema, formData = {} } = props;
+            const uiOptions = (0, utils_1.getUiOptions)(uiSchema);
+            const { taxonField, taxonRankField, authorField } = uiOptions;
+            const scientificName = (0, utils_1.parseJSONPointer)(formData, taxonField, true);
+            const taxonRank = (0, utils_1.parseJSONPointer)(formData, taxonRankField, true);
+            const author = (0, utils_1.parseJSONPointer)(formData, authorField, true);
+            let taxonRankLabel = undefined;
+            if (taxonRank) {
+                taxonRankLabel = (_a = (this.getTaxonRankOptions() || []).find(option => option.const === taxonRank)) === null || _a === void 0 ? void 0 : _a.title;
+            }
+            let options = Object.assign(Object.assign({}, uiOptions), { autosuggestField: "taxon", onSuggestionSelected: this.onSuggestionSelected, onUnsuggestedSelected: this.onUnsuggestionSelected, isValueSuggested: this.isValueSuggested, getSuggestionFromValue: this.getSuggestionFromValue, getSuggestionValue: this.getSuggestionValue, renderSuggestion: this.renderSuggestion, valueContext: { taxonRank, author }, taxonRankLabel, Wrapper: TaxonWrapper });
+            if (!(0, utils_1.isEmptyString)(scientificName)) {
+                options.value = scientificName;
+            }
+            const innerUiSchema = (0, utils_1.getInnerUiSchema)(uiSchema);
+            const _uiSchemaJSONPointer = (0, utils_1.uiSchemaJSONPointer)(schema, taxonField);
+            if (!_uiSchemaJSONPointer) {
+                throw new Error("Invalid taxon field");
+            }
+            const taxonExistingUiSchema = (0, utils_1.parseJSONPointer)(innerUiSchema, _uiSchemaJSONPointer);
+            let widgetProps = taxonExistingUiSchema || {};
+            let _uiSchema = (0, utils_1.updateSafelyWithJSONPointer)(innerUiSchema, Object.assign(Object.assign({ "ui:widget": "AutosuggestWidget" }, widgetProps), { "ui:options": Object.assign(Object.assign({}, (0, utils_1.getUiOptions)((taxonExistingUiSchema || {})[taxonField])), options) }), _uiSchemaJSONPointer);
+            return { schema, uiSchema: _uiSchema };
+        };
+        this.getSuggestionValue = (suggestion) => {
+            return suggestion.scientificName;
+        };
+        this.onSuggestionSelected = (suggestion, mounted) => {
+            if (suggestion === null)
+                suggestion = undefined;
+            let { formData, uiSchema, formContext, registry, schema } = this.props;
+            const { taxonField, taxonRankField, authorField } = (0, utils_1.getUiOptions)(uiSchema);
+            if (typeof suggestion === "object") {
+                this.setState({ suggestion });
+                const scientificName = suggestion.scientificName;
+                formData = (0, utils_1.updateFormDataWithJSONPointer)({ formData, registry, schema }, scientificName, taxonField);
+                let taxonRank = suggestion.taxonRank;
+                const taxonRankOptions = this.getTaxonRankOptions();
+                if (taxonRankOptions && !taxonRankOptions.some(option => option.const === taxonRank)) {
+                    taxonRank = undefined;
+                }
+                formData = (0, utils_1.updateFormDataWithJSONPointer)({ formData, registry, schema }, taxonRank, taxonRankField);
+                const author = suggestion.scientificNameAuthorship;
+                formData = (0, utils_1.updateFormDataWithJSONPointer)({ formData, registry, schema }, author, authorField);
+            }
+            if (mounted) {
+                this.props.onChange(formData);
+            }
+            else {
+                if (formContext.formDataTransformers) {
+                    formData = formContext.formDataTransformers.reduce((unit, { "ui:field": uiField, props: fieldProps }) => {
+                        let changed;
+                        const getChanged = (_changed) => {
+                            changed = _changed;
+                        };
+                        const field = new fieldProps.registry.fields[uiField](Object.assign(Object.assign({}, fieldProps), { formData: formData, onChange: getChanged }));
+                        field.onChange(field.state && field.state.formData ? field.state.formData : formData);
+                        return changed;
+                    }, formData);
+                }
+                const lajiFormInstance = formContext.services.rootInstance;
+                const pointer = this.props.formContext.services.ids.getJSONPointerFromLajiFormIdAndFormDataAndIdSchemaId(this.props.idSchema.$id, (0, utils_1.getFieldUUID)(this.props));
+                const newFormData = Object.assign(Object.assign({}, (0, utils_1.parseJSONPointer)(lajiFormInstance.getFormData(), pointer)), formData);
+                lajiFormInstance.onChange((0, utils_1.updateSafelyWithJSONPointer)(lajiFormInstance.getFormData(), newFormData, pointer));
+            }
+        };
+        this.onUnsuggestionSelected = (value) => {
+            this.setState({ suggestion: undefined });
+            let { formData, uiSchema, registry, schema } = this.props;
+            const { taxonField } = (0, utils_1.getUiOptions)(uiSchema);
+            formData = (0, utils_1.updateFormDataWithJSONPointer)({ formData, registry, schema }, value, taxonField);
+            this.props.onChange(formData);
+        };
+        this.isValueSuggested = (value, valueContext) => {
+            const { suggestion } = this.state;
+            if (!suggestion) {
+                return false;
+            }
+            return this.suggestionMatchesData(suggestion, value, valueContext);
+        };
+        this.getSuggestionFromValue = (value, valueContext) => __awaiter(this, void 0, void 0, function* () {
+            if (this.isValueSuggested(value, valueContext)) {
+                return this.state.suggestion;
+            }
+            if (!value) {
+                throw new Error("Missing scientific name");
+            }
+            if (!(valueContext === null || valueContext === void 0 ? void 0 : valueContext.taxonRank)) {
+                throw new Error("Missing taxon rank");
+            }
+            const query = { query: value, limit: 100, nameTypes: "MX.scientificName", matchType: "exact" };
+            const result = yield this.props.formContext.apiClient.get("/autocomplete/taxa", { query });
+            for (const suggestion of result.results) {
+                if (this.suggestionMatchesData(suggestion, value, valueContext)) {
+                    this.setState({ suggestion });
+                    return suggestion;
+                }
+            }
+            throw new Error("Unknown scientific name");
+        });
+        this.suggestionMatchesData = (suggestion, value, valueContext) => {
+            var _a, _b, _c;
+            const normalizedValue = value === null || value === void 0 ? void 0 : value.replace(/\s+/g, " ").trim().toLowerCase();
+            const normalizedAuthor = (_a = valueContext === null || valueContext === void 0 ? void 0 : valueContext.author) === null || _a === void 0 ? void 0 : _a.replace(/\s/g, "").trim().toLowerCase();
+            return normalizedValue === ((_b = suggestion.scientificName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) &&
+                (valueContext === null || valueContext === void 0 ? void 0 : valueContext.taxonRank) === suggestion.taxonRank &&
+                normalizedAuthor === ((_c = suggestion.scientificNameAuthorship) === null || _c === void 0 ? void 0 : _c.replace(/\s/g, "").toLowerCase());
+        };
+        this.getTaxonRankOptions = () => {
+            let { uiSchema } = this.props;
+            const { taxonRankField } = (0, utils_1.getUiOptions)(uiSchema);
+            const taxonRankSchemaPointer = (0, utils_1.schemaJSONPointer)(this.props.schema, taxonRankField);
+            if (taxonRankSchemaPointer === undefined) {
+                throw new Error("Invalid taxon rank field");
+            }
+            return (0, utils_1.parseJSONPointer)(this.props.schema, taxonRankSchemaPointer).oneOf;
+        };
+    }
+    renderSuggestion(suggestion, inputValue) {
+        let value = suggestion.scientificName;
+        if (suggestion.nameType === "MX.scientificName" && inputValue) {
+            value = addBold(value, inputValue);
+        }
+        return (React.createElement("span", { className: "simple-option" },
+            React.createElement(React.Fragment, null,
+                value,
+                (0, AutosuggestWidget_1.renderTaxonIcons)(suggestion))));
+    }
+    render() {
+        const { SchemaField } = this.props.registry.fields;
+        return React.createElement(SchemaField, Object.assign({}, this.props, { uiSchema: this.state.uiSchema }));
+    }
+};
+ScientificNameTaxonAutosuggestField.contextType = ReactContext_1.default;
+ScientificNameTaxonAutosuggestField.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            taxonField: PropTypes.string.isRequired,
+            taxonRankField: PropTypes.string.isRequired,
+            authorField: PropTypes.string.isRequired,
+            allowNonsuggestedValue: PropTypes.bool
+        }).isRequired,
+        uiSchema: PropTypes.object
+    }).isRequired,
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["object"])
+    }).isRequired,
+    formData: PropTypes.object.isRequired
+};
+ScientificNameTaxonAutosuggestField = __decorate([
+    BaseComponent_1.default
+], ScientificNameTaxonAutosuggestField);
+exports.default = ScientificNameTaxonAutosuggestField;
+class _TaxonWrapper extends React.Component {
+    render() {
+        const { id, formContext, suggestion, children, placement, inputValue, isSuggested, options } = this.props;
+        const { Popover, Tooltip } = this.context.theme;
+        const tooltipElem = (React.createElement(Tooltip, { id: `${id}-popover-tooltip` }, formContext.translations.OpenSpeciedCard));
+        const taxonLinkElem = (React.createElement(components_1.OverlayTrigger, { overlay: tooltipElem, style: { display: "inline" } },
+            React.createElement("a", { href: `http://tun.fi/${suggestion === null || suggestion === void 0 ? void 0 : suggestion.id}`, target: "_blank", rel: "noopener noreferrer" }, suggestion === null || suggestion === void 0 ? void 0 : suggestion.id)));
+        let popover;
+        if ((0, utils_1.isEmptyString)(inputValue)) {
+            popover = React.createElement(React.Fragment, null);
+        }
+        else {
+            popover = (React.createElement(Popover, { id: `${id}-popover` },
+                !isSuggested && this.props.formContext.translations.UnknownName,
+                isSuggested && (React.createElement("div", null, options === null || options === void 0 ? void 0 :
+                    options.taxonRankLabel,
+                    " ",
+                    suggestion.cursiveName ? React.createElement("i", null, suggestion.scientificName) : suggestion.scientificName,
+                    " ",
+                    suggestion.scientificNameAuthorship,
+                    " ",
+                    (0, AutosuggestWidget_1.renderTaxonIcons)(suggestion),
+                    " (",
+                    taxonLinkElem,
+                    ")"))));
+        }
+        return (React.createElement(components_1.OverlayTrigger, { hoverable: true, placement: placement, 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 })));

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

@@ -1,3 +1,4 @@
+export function renderTaxonIcons(suggestion: any, prepend: any): JSX.Element | null;
 export default class _AutosuggestWidget extends React.Component<any, any, any> {
     static propTypes: {
         schema: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
@@ -22,6 +23,7 @@ export class Autosuggest extends React.Component<any, any, any> {
         informalTaxonGroups: PropTypes.Requireable<string>;
         onInformalTaxonGroupSelected: PropTypes.Requireable<(...args: any[]) => any>;
         cache: PropTypes.Requireable<boolean>;
+        valueContext: PropTypes.Requireable<object>;
     };
     static defaultProps: {
         allowNonsuggestedValue: boolean;
@@ -43,12 +45,13 @@ export class Autosuggest extends React.Component<any, any, any> {
     mounted: boolean | undefined;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: any): void;
+    triggerConvertTimeout: any;
     keyFunctions: {
         autosuggestToggle: () => boolean;
     };
     triggerConvert: (props: any) => void;
     getSuggestionValue: (suggestion: any) => any;
-    renderSuggestion: (suggestion: any) => JSX.Element;
+    renderSuggestion: (suggestion: any, inputValue: any) => JSX.Element;
     selectSuggestion: (suggestion: any) => void;
     selectUnsuggested: (inputValue: any) => void;
     onSuggestionSelected: (suggestion: any) => void;

package/lib/components/widgets/AutosuggestWidget.js

@@ -63,6 +63,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Autosuggest = void 0;
+exports.renderTaxonIcons = renderTaxonIcons;
 const React = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
 const PropTypes = __importStar(require("prop-types"));
@@ -71,11 +72,16 @@ const utils_1 = require("../../utils");
 const components_1 = require("../components");
 const ReactContext_1 = __importDefault(require("../../ReactContext"));
 const InformalTaxonGroupChooserWidget_1 = require("./InformalTaxonGroupChooserWidget");
-function renderFlag(suggestion, prepend) {
-    return (suggestion || {}).finnish
+const utils_2 = require("@rjsf/utils");
+function renderTaxonIcons(suggestion, prepend) {
+    const { finnish, checklist } = suggestion || {};
+    const flagIcon = finnish ? React.createElement("img", { src: "https://cdn.laji.fi/images/icons/flag_fi_small.png", width: "16", className: "flag-img" }) : null;
+    const gbifIcon = checklist === "MR.2" ? React.createElement("img", { src: "https://cdn.laji.fi/images/icons/gbif.svg", width: "18" }) : null;
+    return flagIcon || gbifIcon
         ? React.createElement(React.Fragment, null,
             prepend || null,
-            React.createElement("img", { src: "https://cdn.laji.fi/images/icons/flag_fi_small.png", width: "16" }))
+            flagIcon,
+            gbifIcon)
         : null;
 }
 class _AutosuggestWidget extends React.Component {
@@ -248,7 +254,7 @@ function TaxonAutosuggest(ComposedComponent) {
                     && React.createElement("span", { dangerouslySetInnerHTML: { __html: suggestion.autocompleteDisplayName } })
                     || React.createElement(React.Fragment, null,
                         suggestion.value,
-                        renderFlag(suggestion));
+                        renderTaxonIcons(suggestion));
                 return React.createElement("span", { className: "simple-option" }, renderedSuggestion);
             }
             render() {
@@ -303,7 +309,7 @@ let UnitAutosuggestWidget = class UnitAutosuggestWidget extends React.Component
             maleElem,
             femaleElem && " ",
             femaleElem,
-            renderFlag(suggestion));
+            renderTaxonIcons(suggestion));
     }
 };
 UnitAutosuggestWidget = __decorate([
@@ -456,7 +462,7 @@ class Autosuggest extends React.Component {
             const { isValueSuggested, suggestionReceive, onSuggestionSelected } = props;
             if (!onSuggestionSelected && suggestionReceive !== "key")
                 return undefined;
-            return isValueSuggested ? isValueSuggested(props.value) : undefined;
+            return isValueSuggested ? isValueSuggested(props.value, props.valueContext) : undefined;
         };
         this.wrapperRef = React.createRef();
         this.keyFunctions = {
@@ -469,7 +475,7 @@ class Autosuggest extends React.Component {
             }
         };
         this.triggerConvert = (props) => {
-            const { value, getSuggestionFromValue } = props;
+            const { value, getSuggestionFromValue, valueContext } = props;
             if ((0, utils_1.isEmptyString)(value) || !getSuggestionFromValue) {
                 if (this.state.suggestion && Object.keys(this.state.suggestion).length > 0) {
                     this.setState({ suggestion: undefined, inputValue: value, suggestionForValue: value });
@@ -477,7 +483,7 @@ class Autosuggest extends React.Component {
                 return;
             }
             this.setState({ isLoading: true });
-            getSuggestionFromValue(value).then(suggestion => {
+            getSuggestionFromValue(value, valueContext).then(suggestion => {
                 if (!this.mounted)
                     return;
                 this.setState({ suggestion, inputValue: this.getSuggestionValue(suggestion), isLoading: false, suggestionForValue: value });
@@ -494,11 +500,11 @@ class Autosuggest extends React.Component {
                 ? getSuggestionValue(suggestion, def)
                 : def;
         };
-        this.renderSuggestion = (suggestion) => {
+        this.renderSuggestion = (suggestion, inputValue) => {
             let { renderSuggestion } = this.props;
             if (!renderSuggestion)
                 renderSuggestion = suggestion => suggestion.value;
-            return (React.createElement("span", null, renderSuggestion(suggestion)));
+            return (React.createElement("span", null, renderSuggestion(suggestion, inputValue)));
         };
         this.selectSuggestion = (suggestion) => {
             const { onSuggestionSelected, onChange, suggestionReceive } = this.props;
@@ -764,7 +770,7 @@ class Autosuggest extends React.Component {
             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: (0, utils_1.getUiOptions)(this.props), id: this.props.id, value: suggestion && suggestion.key, inputValue: value, ref: this.wrapperRef, formContext: this.props.formContext }, component));
+                component = (React.createElement(Wrapper, { isSuggested: isSuggested, suggestion: suggestion, options: (0, utils_1.getUiOptions)(this.props.uiSchema), 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,
@@ -793,13 +799,34 @@ class Autosuggest extends React.Component {
         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 => {
+        if (this.props.controlledValue) {
+            return;
+        }
+        const valueChanged = this.state.suggestion && this.props && prevProps.value !== this.props.value && this.props.value !== this.state.suggestionForValue;
+        const valueContextChanged = !(0, utils_2.deepEquals)(prevProps.valueContext, this.props.valueContext);
+        if (valueChanged) {
+            this.props.getSuggestionFromValue(this.props.value, this.props.valueContext).then(suggestion => {
                 this.setState({ inputValue: this.getSuggestionValue(suggestion), suggestion });
             }, () => {
-                this.setState({ inputValue: "", suggestion: undefined });
+                const state = { suggestion: undefined };
+                if (!this.props.allowNonsuggestedValue) {
+                    state.inputValue = "";
+                }
+                this.setState(state);
             });
         }
+        else if (valueContextChanged) {
+            this.setState({ isLoading: true });
+            if (this.triggerConvertTimeout) {
+                clearTimeout(this.triggerConvertTimeout);
+            }
+            // debounce trigger convert function so that it's not called too frequently
+            this.triggerConvertTimeout = this.props.formContext.setTimeout(() => {
+                if (!this.mounted)
+                    return;
+                this.triggerConvert(this.props);
+            }, 100);
+        }
     }
     render() {
         const { props } = this;
@@ -833,7 +860,8 @@ Autosuggest.propTypes = {
     uiSchema: PropTypes.object,
     informalTaxonGroups: PropTypes.string,
     onInformalTaxonGroupSelected: PropTypes.func,
-    cache: PropTypes.bool
+    cache: PropTypes.bool,
+    valueContext: PropTypes.object
 };
 Autosuggest.defaultProps = {
     allowNonsuggestedValue: true,
@@ -861,10 +889,10 @@ class _TaxonWrapper extends React.Component {
                 this.setState({ scientificName: "", cursiveName: false });
             }
             else {
-                this.props.formContext.apiClient.get(`/taxa/${value}`).then(({ scientificName, cursiveName, vernacularName, taxonRank, informalGroups, finnish }) => {
+                this.props.formContext.apiClient.get(`/taxa/${value}`).then(({ scientificName, cursiveName, vernacularName, taxonRank, informalGroups, finnish, checklist }) => {
                     if (!this.mounted)
                         return;
-                    this.setState({ value, taxonRank, informalTaxonGroups: informalGroups, taxon: { scientificName, vernacularName, cursiveName, finnish } });
+                    this.setState({ value, taxonRank, informalTaxonGroups: informalGroups, taxon: { scientificName, vernacularName, cursiveName, finnish, checklist } });
                     (0, InformalTaxonGroupChooserWidget_1.getInformalGroups)(this.props.formContext.apiClient).then(({ informalTaxonGroupsById }) => {
                         if (!this.mounted)
                             return;
@@ -889,7 +917,7 @@ class _TaxonWrapper extends React.Component {
                     }
                 }
                 this.setState(Object.assign(Object.assign({}, state), { higherThanOrder: !state.order && !state.family }));
-                const taxonRanks = yield this.props.formContext.apiClient.get("/metadata/ranges/MX.taxonRankEnum");
+                const taxonRanks = (yield this.props.formContext.apiClient.get("/metadata/properties/MX.taxonRank/alt")).results;
                 if (!this.mounted)
                     return;
                 this.setState({ taxonRanks: (0, utils_1.dictionarify)(taxonRanks, function getKey(rank) { return rank.id; }, function getValue(rank) { return rank.value; }) });
@@ -1049,14 +1077,14 @@ class TaxonImgChooser extends React.Component {
     }
 }
 TaxonImgChooser.contextType = ReactContext_1.default;
-const TaxonName = ({ scientificName, vernacularName = "", cursiveName, finnish }) => {
+const TaxonName = ({ scientificName, vernacularName = "", cursiveName, finnish, checklist }) => {
     const _scientificName = vernacularName && scientificName
         ? `(${scientificName})`
         : (scientificName || "");
     return (React.createElement(React.Fragment, null,
         `${vernacularName}${vernacularName ? " " : ""}`,
         cursiveName ? React.createElement("i", null, _scientificName) : _scientificName,
-        renderFlag({ finnish }, " ")));
+        renderTaxonIcons({ finnish, checklist }, " ")));
 };
 class ReactAutosuggest extends React.Component {
     constructor(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luomus/laji-form",
-  "version": "15.1.88",
+  "version": "15.1.90",
   "description": "React module capable of building dynamic forms from Laji form json schemas",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",