@luomus/laji-form 15.1.69 → 15.1.71

package/lib/components/widgets/AutosuggestWidget.js

@@ -38,6 +38,15 @@ var __importStar = (this && this.__importStar) || (function () {
         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 __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)
@@ -63,7 +72,7 @@ const components_1 = require("../components");
 const ReactContext_1 = __importDefault(require("../../ReactContext"));
 const InformalTaxonGroupChooserWidget_1 = require("./InformalTaxonGroupChooserWidget");
 function renderFlag(suggestion, prepend) {
-    return (suggestion && suggestion.payload || {}).finnish
+    return (suggestion || {}).finnish
         ? React.createElement(React.Fragment, null,
             prepend || null,
             React.createElement("img", { src: "https://cdn.laji.fi/images/icons/flag_fi_small.png", width: "16" }))
@@ -73,10 +82,11 @@ class _AutosuggestWidget extends React.Component {
     render() {
         if (this.props.options) {
             switch (this.props.options.autosuggestField) {
+                case "taxa":
                 case "taxon":
-                    return React.createElement(TaxonAutosuggestWidget, Object.assign({}, this.props));
+                    return React.createElement(TaxonAutosuggestWidget, Object.assign({}, this.props, { options: Object.assign(Object.assign({}, this.props.options), { autosuggestField: "taxa" }) }));
                 case "unit":
-                    return React.createElement(UnitAutosuggestWidget, Object.assign({}, this.props));
+                    return React.createElement(UnitAutosuggestWidget, Object.assign({}, this.props, { basePath: "/shorthand/unit/trip-report" }));
                 case "friends":
                 case "person":
                     return React.createElement(FriendsAutosuggestWidget, Object.assign({}, this.props));
@@ -97,6 +107,7 @@ class _AutosuggestWidget extends React.Component {
             let component = undefined;
             switch (options.autosuggestField) {
                 case "taxon":
+                case "taxa":
                     component = TaxonAutosuggestWidget;
                     break;
                 case "unit":
@@ -176,11 +187,7 @@ function TaxonAutosuggest(ComposedComponent) {
                                 orWriteSpeciesNameLabel || this.props.formContext.translations.orWriteSpeciesName))));
                 };
                 this.onTaxonImgSelected = (taxonID, taxon) => {
-                    this.autosuggestRef.selectSuggestion({
-                        key: taxonID,
-                        value: taxon.vernacularName,
-                        payload: taxon
-                    });
+                    this.autosuggestRef.selectSuggestion(Object.assign({ key: taxonID, value: taxon.vernacularName }, taxon));
                 };
                 this.setAutosuggestRef = (elem) => {
                     this.autosuggestRef = elem;
@@ -212,19 +219,20 @@ function TaxonAutosuggest(ComposedComponent) {
                 }
             }
             getSuggestionFromValue(value) {
-                if (this.isValueSuggested(value)) {
-                    return this.props.formContext.apiClient.fetchCached(`/taxa/${value}`).then(({ vernacularName, scientificName }) => {
+                return __awaiter(this, void 0, void 0, function* () {
+                    if (this.isValueSuggested(value)) {
+                        const { vernacularName, scientificName } = yield this.props.formContext.apiClient.get(`/taxa/${id}`);
                         if (vernacularName !== undefined) {
                             return { value: vernacularName, key: value };
                         }
                         if (scientificName !== undefined) {
                             return { value: scientificName, key: value };
                         }
-                    });
-                }
-                else {
-                    return Promise.reject();
-                }
+                    }
+                    else {
+                        throw new Error("Unknown taxon");
+                    }
+                });
             }
             isValueSuggested(value) {
                 return !(0, utils_1.isEmptyString)(value) && !!value.match(/MX\.\d+/);
@@ -272,10 +280,10 @@ let UnitAutosuggestWidget = class UnitAutosuggestWidget extends React.Component
         this.renderSuggestion = this.renderSuggestion.bind(this);
     }
     renderSuggestion(suggestion) {
-        const { count, maleIndividualCount, femaleIndividualCount } = suggestion.payload.interpretedFrom;
+        const { count, maleIndividualCount, femaleIndividualCount } = suggestion.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
+        const taxonName = suggestion.unit.identifications[0].taxon;
+        const name = suggestion.isNonMatching
             ? React.createElement("span", { className: "text-muted" },
                 taxonName,
                 " ",
@@ -318,10 +326,11 @@ class FriendsAutosuggestWidget extends React.Component {
         this.isValueSuggested = this.isValueSuggested.bind(this);
     }
     getSuggestionFromValue(value) {
-        const { showID } = (0, 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 }) => {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { showID } = (0, utils_1.getUiOptions)(this.props);
+            const { isAdmin } = this.props.formContext.uiSchemaContext;
+            if (this.isValueSuggested(value)) {
+                const { fullName, group, id } = yield this.props.formContext.apiClient.get(`/person/by-id/${value}`);
                 if (fullName) {
                     const addGroup = str => group ? `${str} (${group})` : str;
                     const addID = str => isAdmin && showID ? `${str} (${id})` : str;
@@ -330,11 +339,11 @@ class FriendsAutosuggestWidget extends React.Component {
                         key: value
                     };
                 }
-            });
-        }
-        else {
-            return Promise.reject();
-        }
+            }
+            else {
+                throw new Error("Unknown friend");
+            }
+        });
     }
     isValueSuggested(value) {
         return !(0, utils_1.isEmptyString)(value) && value.match(/MA\.\d+/);
@@ -382,22 +391,21 @@ class BasicAutosuggestWidget extends React.Component {
         this.isValueSuggested = this.isValueSuggested.bind(this);
     }
     getSuggestionFromValue(value) {
-        const { autosuggestField, nameField } = this.props;
-        if (this.isValueSuggested(value)) {
-            const apiClient = this.props.formContext.apiClient;
-            const fetch = (this.props.cache ? apiClient.fetchCached : apiClient.fetch).bind(apiClient);
-            return fetch(`/${autosuggestField}/by-id/${value}`).then(result => {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { autosuggestField, nameField } = this.props;
+            if (this.isValueSuggested(value)) {
+                const result = yield this.props.formContext.apiClient.get(`/${autosuggestField}/by-id/${value}`, undefined, this.props.cache);
                 if (result[nameField]) {
                     return {
                         value: result[nameField],
                         key: value
                     };
                 }
-            });
-        }
-        else {
-            return Promise.reject();
-        }
+            }
+            else {
+                throw new Error("Not autosuggested value");
+            }
+        });
     }
     isValueSuggested(value) {
         const regexp = new RegExp(this.props.validValueRegexp);
@@ -536,12 +544,12 @@ class Autosuggest extends React.Component {
             const { findExactMatch } = this.props;
             return findExactMatch
                 ? findExactMatch(suggestions, inputValue)
-                : suggestions.find(suggestion => (suggestion && suggestion.value.toLowerCase() === inputValue.trim().toLowerCase() && (!suggestion.payload || !suggestion.payload.isNonMatching)));
+                : suggestions.find(suggestion => (suggestion && suggestion.value.toLowerCase() === inputValue.trim().toLowerCase() && !suggestion.isNonMatching));
         };
         this.findTheOnlyOneMatch = (suggestions) => {
             if (!Array.isArray(suggestions))
                 suggestions = [suggestions];
-            const filtered = suggestions.filter(suggestion => !suggestion || !suggestion.payload || !suggestion.payload.isNonMatching);
+            const filtered = suggestions.filter(suggestion => !suggestion || !suggestion.isNonMatching);
             if (filtered.length === 1) {
                 return filtered[0];
             }
@@ -549,7 +557,7 @@ class Autosuggest extends React.Component {
         this.findNonMatching = (suggestions) => {
             if (!Array.isArray(suggestions))
                 suggestions = [suggestions];
-            const filtered = suggestions.filter(suggestion => suggestion && suggestion.payload && suggestion.payload.isNonMatching);
+            const filtered = suggestions.filter(suggestion => suggestion && suggestion.isNonMatching);
             if (filtered.length === 1) {
                 return filtered[0];
             }
@@ -572,11 +580,13 @@ class Autosuggest extends React.Component {
             }
             const { autosuggestField, query = {} } = this.props;
             this.setState({ isLoading: true });
-            const request = () => {
+            const request = () => __awaiter(this, void 0, void 0, function* () {
                 let timestamp = Date.now();
                 this.promiseTimestamp = timestamp;
-                const fetch = (this.props.cache ? this.apiClient.fetchCached : this.apiClient.fetch).bind(this.apiClient);
-                fetch("/autocomplete/" + autosuggestField, Object.assign({ q: value, includePayload: true, matchType: "exact,partial", includeHidden: false }, query)).then(suggestions => {
+                try {
+                    let suggestionsResponse = yield this.apiClient.get(this.props.basePath || "/autocomplete" + "/" + autosuggestField, { query: Object.assign({ query: value, matchType: "exact,partial", includeHidden: false }, query) }, this.props.cache);
+                    // Hack for laji-form in Kotka, since it uses API that isn't laji-api and might have different response signature.
+                    let suggestions = Array.isArray(suggestionsResponse) ? suggestionsResponse : suggestionsResponse.results;
                     if (this.props.prepareSuggestion) {
                         suggestions = suggestions.map(s => this.props.prepareSuggestion(s));
                     }
@@ -586,12 +596,13 @@ class Autosuggest extends React.Component {
                     this.mounted
                         ? this.setState({ isLoading: false, suggestions }, () => this.afterBlurAndFetch(suggestions))
                         : this.afterBlurAndFetch(suggestions);
-                }).catch(() => {
+                }
+                catch (e) {
                     this.mounted
                         ? this.setState({ isLoading: false }, this.afterBlurAndFetch)
                         : this.afterBlurAndFetch();
-                });
-            };
+                }
+            });
             if (this.timeout) {
                 clearTimeout(this.timeout);
             }
@@ -802,10 +813,10 @@ class Autosuggest extends React.Component {
             ? this.props.highlightFirstSuggestion
             : !this.props.allowNonsuggestedValue;
         const { renderExtra } = props;
-        return (React.createElement(React.Fragment, null,
+        return React.createElement(React.Fragment, null,
             renderExtra && renderExtra(),
             React.createElement("div", { className: (0, 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 }))));
+                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;
@@ -842,21 +853,22 @@ class _TaxonWrapper extends React.Component {
         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 } });
-                (0, InformalTaxonGroupChooserWidget_1.getInformalGroups)(this.props.formContext.apiClient).then(({ informalTaxonGroupsById }) => {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!value) {
+                this.setState({ scientificName: "", cursiveName: false });
+            }
+            else {
+                this.props.formContext.apiClient.get(`/taxa/${value}`).then(({ scientificName, cursiveName, vernacularName, taxonRank, informalGroups, finnish }) => {
                     if (!this.mounted)
                         return;
-                    this.setState({ informalTaxonGroupsById });
+                    this.setState({ value, taxonRank, informalTaxonGroups: informalGroups, taxon: { scientificName, vernacularName, cursiveName, finnish } });
+                    (0, 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 => {
+                const parents = (yield this.props.formContext.apiClient.get(`/taxa/${value}/parents`)).results;
                 if (!this.mounted)
                     return;
                 const state = { order: undefined, family: undefined };
@@ -874,13 +886,12 @@ class _TaxonWrapper extends React.Component {
                     }
                 }
                 this.setState(Object.assign(Object.assign({}, state), { higherThanOrder: !state.order && !state.family }));
-            });
-            this.props.formContext.apiClient.fetchCached("/metadata/ranges/MX.taxonRankEnum").then(taxonRanks => {
+                const taxonRanks = yield this.props.formContext.apiClient.get("/metadata/ranges/MX.taxonRankEnum");
                 if (!this.mounted)
                     return;
                 this.setState({ taxonRanks: (0, 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;
@@ -995,7 +1006,7 @@ class TaxonImgChooser extends React.Component {
     }
     componentDidMount() {
         this.mounted = true;
-        this.props.formContext.apiClient.fetchCached(`/taxa/${this.props.id}`, { includeMedia: true }).then(taxon => {
+        this.props.formContext.apiClient.get(`/taxa/${this.props.id}`, { query: { includeMedia: true } }).then(taxon => {
             if (!this.mounted)
                 return;
             if (taxon.multimedia && taxon.multimedia.length) {
@@ -1042,7 +1053,7 @@ const TaxonName = ({ scientificName, vernacularName = "", cursiveName, finnish }
     return (React.createElement(React.Fragment, null,
         `${vernacularName}${vernacularName ? " " : ""}`,
         cursiveName ? React.createElement("i", null, _scientificName) : _scientificName,
-        renderFlag({ payload: { finnish } }, " ")));
+        renderFlag({ finnish }, " ")));
 };
 class ReactAutosuggest extends React.Component {
     constructor(props) {

package/lib/components/widgets/InformalTaxonGroupChooserWidget.js

@@ -161,7 +161,7 @@ function getInformalGroups(apiClient) {
     if (informalTaxonGroups) {
         return Promise.resolve({ informalTaxonGroups, informalTaxonGroupsById });
     }
-    return apiClient.fetchCached("/informal-taxon-groups/tree").then(response => {
+    return apiClient.get("/informal-taxon-groups/tree").then(response => {
         // Contains the current taxon group.
         const informalTaxonGroups = mapGroupsById(response.results);
         // Contains all groups in flat object.

package/lib/components/widgets/InputWithDefaultValueButtonWidget.js

@@ -54,9 +54,8 @@ class InputWithDefaultValueButtonWidget extends React.Component {
             else if (apiQueryForDefaultValue) {
                 const { path, query = {}, resultKey, cache = false } = apiQueryForDefaultValue;
                 const apiClient = this.props.formContext.apiClient;
-                const fetch = (cache ? apiClient.fetchCached : apiClient.fetch).bind(apiClient);
                 this.setState({ fetching: true });
-                return fetch(path, query).then(result => {
+                return apiClient.get(path, { query }, cache).then(result => {
                     if (result[resultKey]) {
                         this.props.onChange(result[resultKey]);
                     }

package/lib/themes/bs5.js

@@ -67,7 +67,10 @@ const mapValidationStateToClass = (validationState) => {
     }
     return "text-" + (validationState === "error" ? "danger" : validationState);
 };
-const _Card = React.forwardRef((props, ref) => (React.createElement(react_bootstrap_5_1.Card, Object.assign({}, props, { ref: ref }))));
+const _Card = React.forwardRef((_a, ref) => {
+    var { eventKey } = _a, props = __rest(_a, ["eventKey"]);
+    return (React.createElement(react_bootstrap_5_1.Card, Object.assign({}, props, { ref: ref })));
+});
 let Panel = _Card;
 Panel.Body = react_bootstrap_5_1.Card.Body;
 Panel.Heading = React.forwardRef((props, ref) => (React.createElement(react_bootstrap_5_1.Card.Header, Object.assign({ className: "panel-heading" }, props, { ref: ref }))));
@@ -98,6 +101,11 @@ const _Popover = React.forwardRef((_a, ref) => {
         props.title ? React.createElement(react_bootstrap_5_1.Popover.Header, null, props.title) : null,
         React.createElement(react_bootstrap_5_1.Popover.Body, null, children)));
 });
+const _Pager = react_bootstrap_5_1.Pagination;
+_Pager.Item = React.forwardRef((_a, ref) => {
+    var { previous, next } = _a, props = __rest(_a, ["previous", "next"]);
+    return (React.createElement(react_bootstrap_5_1.PageItem, Object.assign({}, props, { ref: ref })));
+});
 const theme = {
     Panel,
     Table: react_bootstrap_5_1.Table,
@@ -134,7 +142,7 @@ const theme = {
         var { variant } = _a, props = __rest(_a, ["variant"]);
         return React.createElement(react_bootstrap_5_1.Alert, Object.assign({ variant: mapVariant(variant) }, props, { ref: ref }));
     }),
-    Pager: react_bootstrap_5_1.Pagination,
+    Pager: _Pager,
     Accordion: React.forwardRef((props, ref) => React.createElement(react_bootstrap_5_1.Accordion, Object.assign({}, props, { ref: ref }))),
     Collapse: react_bootstrap_5_1.Collapse,
     Dropdown: _Dropdown,

package/lib/validation.js

@@ -39,7 +39,7 @@ exports.toErrorSchema = toErrorSchema;
 const lajiValidate = __importStar(require("@luomus/laji-validate"));
 function initializeValidation(apiClient) {
     lajiValidate.extend(lajiValidate.validators.remote, {
-        fetch: (...params) => apiClient.fetchRaw(...params)
+        fetch: (...params) => apiClient.apiClient.fetch(...params)
     });
 }
 exports.default = ({ errors: error, warnings: warning }, data) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luomus/laji-form",
-  "version": "15.1.69",
+  "version": "15.1.71",
   "description": "React module capable of building dynamic forms from Laji form json schemas",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -28,7 +28,8 @@
     "test:docker": "npm run test:docker:build && npm run test:docker:run --",
     "test:lightweight": "npx playwright test --project chromium",
     "test:docker:build": "docker build -t laji-form-test -f test.Dockerfile .",
-    "test:docker:run": "docker run laji-form-test"
+    "test:docker:run": "docker run laji-form-test",
+    "generate:api-client": "openapi-typescript https://apitest.laji.fi/explorer-json -o ./generated/api.d.ts --properties-required-by-default"
   },
   "keywords": [
     "react-jsonschema-form",
@@ -71,7 +72,7 @@
     "@playwright/test": "^1.40.1",
     "@stylistic/eslint-plugin": "^5.4.0",
     "@types/jasmine": "^3.7.7",
-    "@types/node": "^20.17.0",
+    "@types/node": "^24.5.2",
     "@typescript-eslint/eslint-plugin": "^8.44.1",
     "@typescript-eslint/parser": "^8.44.1",
     "copy-webpack-plugin": "^9.0.1",
@@ -82,6 +83,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "mini-css-extract-plugin": "^2.1.0",
     "notus": "^0.3.2",
+    "openapi-typescript": "^7.9.1",
     "querystring": "^0.2.1",
     "rimraf": "^2.5.4",
     "style-loader": "^3.0.0",