@luomus/laji-form 15.1.70 → 15.1.72

package/dist/styles.css

@@ -2149,7 +2149,7 @@ body .laji-form {
 	margin-bottom: 6px;
 }
 
-.laji-form button {
+.laji-form button, .laji-form .page-link {
 	line-height: 14px;
 	white-space: normal;
 }
@@ -2685,7 +2685,7 @@ body .laji-form {
 	padding: 10px 15px;
 	color: rgb(51, 51, 51);
 }
-.laji-form .laji-form-panel .panel-heading, .laji-form .pager {
+.laji-form .laji-form-panel .panel-heading, .laji-form .pager, .laji-form .pagination {
 	padding: 0;
 	margin: 0;
 }

package/lib/components/LajiForm.d.ts

@@ -5,7 +5,7 @@ import { ReactUtilsType } from "../utils";
 import { Theme } from "../themes/theme";
 import { ContextProps } from "../ReactContext";
 import Form from "@rjsf/core";
-import { Field, Widget, TemplatesType } from "@rjsf/utils";
+import { Field, Widget, TemplatesType, ErrorSchema } from "@rjsf/utils";
 import ApiClient, { ApiClientImplementation } from "../ApiClient";
 import KeyHandlerService, { ShortcutKeys } from "../services/key-handler-service";
 import SettingsService, { Settings } from "../services/settings-service";
@@ -28,7 +28,7 @@ export interface LajiFormProps extends HasMaybeChildren {
     topOffset?: number;
     bottomOffset?: number;
     formContext?: any;
-    uiSchemaContext?: any;
+    uiSchemaContext?: UiSchemaContext;
     settings?: any;
     id?: string;
     googleApiKey?: string;
@@ -53,24 +53,26 @@ export interface LajiFormProps extends HasMaybeChildren {
     onSubmit?: (data: {
         formData: any;
     }) => void;
-    onValidationError?: (extraErrors: any) => void;
+    onValidationError?: (extraErrors: ErrorSchema) => void;
     validators?: any;
     warnings?: any;
     onSettingsChange?: (settings: any, global: boolean) => void;
     mediaMetadata?: MediaMetadata;
     theme?: Theme;
     lajiGeoServerAddress?: string;
+    extraErrors: ErrorSchema;
 }
 export interface LajiFormState {
     submitHooks?: SubmitHook[];
     formContext: FormContext;
     formData?: any;
-    extraErrors?: any;
+    extraErrors?: ErrorSchema;
+    externalErrors?: ErrorSchema;
     error?: boolean;
     runningSubmitHooks?: boolean;
 }
 export interface MediaMetadata {
-    capturerVerbatim: string;
+    capturerVerbatim?: string | string[];
     intellectualOwner: string;
     intellectualRights: string;
 }
@@ -118,6 +120,14 @@ export interface FormContext {
         multiActiveArray: MultiActiveArrayService;
     };
 }
+export interface UiSchemaContext {
+    isAdmin?: boolean;
+    isEdit?: boolean;
+    creator?: string;
+    confirmDelete?: boolean;
+    additionalClassNames?: Record<string, string>;
+    [key: string]: any;
+}
 export type NotifyMessager = (msg: string) => void;
 export interface Notifier {
     success: NotifyMessager;

package/lib/components/LajiForm.js

@@ -282,7 +282,8 @@ class LajiForm extends React.Component {
         this.validateAndSubmit = (warnings = true, onlySchema = false) => {
             const { formData } = this.state;
             const { onValidationError, onSubmit } = this.props;
-            return this.validate(warnings, true, onlySchema).then((valid) => {
+            this.setState({ externalErrors: undefined });
+            return this.validate(warnings, true, onlySchema).then(valid => {
                 if (formData !== this.state.formData) {
                     this.validateAndSubmit(warnings, onlySchema);
                 }
@@ -329,12 +330,15 @@ class LajiForm extends React.Component {
                     this.cachedNonliveValidations = (0, deepmerge_1.default)(schemaErrors, _validations);
                     block && this.memoizedFormContext.services.blocker.pop();
                 }
-                const merged = (0, deepmerge_1.default)(_liveValidations, !nonlive
+                const mergedInternalErrors = (0, deepmerge_1.default)(_liveValidations, !nonlive
                     ? (this.cachedNonliveValidations || {})
                     : (0, deepmerge_1.default)(_validations, schemaErrors));
+                const mergedAll = (0, deepmerge_1.default)(this.state.externalErrors || {}, mergedInternalErrors);
                 this.validating = false;
-                resolve(!Object.keys(merged).length);
-                !equals((this.state.extraErrors || {}), merged) && this.setState({ extraErrors: merged }, this.popErrorListIfNeeded);
+                resolve(!Object.keys(mergedAll).length);
+                if (!equals((this.state.extraErrors || {}), mergedAll)) {
+                    this.setState({ extraErrors: mergedAll }, this.popErrorListIfNeeded);
+                }
             }).catch((e) => {
                 block && this.memoizedFormContext.services.blocker.pop();
                 throw e;
@@ -516,11 +520,16 @@ class LajiForm extends React.Component {
         if (this.apiClient && "lang" in props && this.props.lang !== props.lang) {
             this.apiClient.setLang(props.lang);
         }
-        this.setState(this.getStateFromProps(props));
+        this.setState(this.getStateFromProps(props), this.popErrorListIfNeeded);
     }
     getStateFromProps(props) {
+        var _a;
         const state = {
-            formContext: this.getMemoizedFormContext(props)
+            formContext: this.getMemoizedFormContext(props),
+            externalErrors: props.extraErrors,
+            extraErrors: ((_a = this.state) === null || _a === void 0 ? void 0 : _a.extraErrors)
+                ? (0, deepmerge_1.default)(this.state.extraErrors, props.extraErrors || {})
+                : props.extraErrors
         };
         if (((!this.state && props.schema && Object.keys(props.schema).length) || (this.state && !("formData" in this.state))) || ("formData" in props && props.formData !== this.props.formData)) {
             state.formData = state.formContext.services.ids.addLajiFormIds((0, utils_1.getDefaultFormState)(props.schema, props.formData, props.schema))[0];
@@ -632,7 +641,7 @@ class LajiForm extends React.Component {
                 showShortcutsButton && this.props.showShortcutButton !== false && shortcuts && (React.createElement(components_1.TooltipComponent, { tooltip: this.getShorcutButtonTooltip() },
                     React.createElement(components_1.Button, { variant: undefined, onClick: this.toggleHelp }, translations.Shortcuts))),
                 React.createElement(components_1.FailedBackgroundJobsPanel, { jobs: this.state.submitHooks, schema: this.props.schema, uiSchema: uiSchema, formContext: this.state.formContext, errorClickHandler: this.memoizedFormContext.services.focus.focus, ref: this.bgJobRef }),
-                React.createElement(core_1.default, Object.assign({}, this.props, { formData: this.state.formData, uiSchema: uiSchema, ref: this.formRef, onChange: this.onChange, onSubmit: this.onSubmit, fields: this.getFields(this.props.fields), widgets: this.getWidgets(this.props.widgets), templates: this.getTemplates(this.props.templates), formContext: this.state.formContext, validator: validator_ajv6_1.default, noValidate: true, extraErrors: this.state.extraErrors, noHtml5Validate: true, liveValidate: true, autoComplete: "off", tagName: "div", readonly: readonly, disabled: disabled }), this.props.children),
+                React.createElement(core_1.default, Object.assign({}, this.props, { formData: this.state.formData, uiSchema: uiSchema, ref: this.formRef, onChange: this.onChange, onSubmit: this.onSubmit, fields: this.getFields(this.props.fields), widgets: this.getWidgets(this.props.widgets), templates: this.getTemplates(this.props.templates), formContext: this.state.formContext, validator: validator_ajv6_1.default, noValidate: true, extraErrors: this.state.extraErrors || {}, noHtml5Validate: true, liveValidate: true, autoComplete: "off", tagName: "div", readonly: readonly, disabled: disabled }), this.props.children),
                 (!this.props.children && this.props.renderSubmit !== false) ? (React.createElement(components_1.Button, { id: "submit", onClick: this.submit, disabled: readonly || disabled }, this.props.submitText || translations.Submit)) : null,
                 shortcuts &&
                     React.createElement(Panel, { ref: this.shortcutHelpRef, className: "shortcut-help laji-form-popped z-depth-3 hidden", style: { top: (this.props.topOffset || 0) + 5, bottom: (this.props.bottomOffset || 0) + 5 }, variant: "info" },

package/lib/components/fields/CondensedObjectField.js

@@ -134,10 +134,9 @@ class CondensedObjectField extends React.Component {
         return Math.max(...oldIndexes, -1) + 1;
     }
     render() {
-        var _a;
         const SchemaField = this.props.registry.fields.SchemaField;
-        const { schema, uiSchema, idSchema, errorSchema, formData = {}, required, formContext: { Label, translations } } = this.props;
-        const uiOptions = (0, utils_1.getUiOptions)(uiSchema);
+        const { schema, uiSchema, idSchema, errorSchema, formData = {}, required, disabled, readonly, formContext: { Label, translations, uiSchemaContext } } = this.props;
+        const { addFieldPlaceholder = `${translations.AddField}`, confirmDelete = uiSchemaContext.confirmDelete } = (0, utils_1.getUiOptions)(uiSchema);
         const childProps = this.state.selectedFields.map(field => {
             let childSchema = schema.properties[field.name];
             let childUiSchema = uiSchema[field.name] || {};
@@ -162,14 +161,13 @@ class CondensedObjectField extends React.Component {
             value: prop,
             label: schema.properties[prop].title || prop,
         }));
-        const addFieldPlaceholder = (_a = uiOptions.addFieldPlaceholder) !== null && _a !== void 0 ? _a : `${translations.AddField}`;
         return (React.createElement(React.Fragment, null,
             React.createElement(Label, { label: this.props.schema.title, required: required || uiSchema["ui:required"], id: this.props.idSchema.$id, uiSchema: this.props.uiSchema }),
             childProps.map((props, idx) => React.createElement("div", { key: idx, className: "laji-form-field-template-item condensed-object-field-item" },
                 React.createElement("div", { className: "laji-form-field-template-schema" },
                     React.createElement(SchemaField, Object.assign({}, this.props, props, { key: idx, onChange: this.onFieldChange(idx) }))),
                 React.createElement("div", { className: "laji-form-field-template-buttons" },
-                    React.createElement(components_1.DeleteButton, { id: props.idSchema.$id, onClick: this.onFieldDelete(idx), translations: translations })))),
+                    React.createElement(components_1.DeleteButton, { id: props.idSchema.$id, onClick: this.onFieldDelete(idx), translations: translations, confirm: confirmDelete, disabled: disabled || readonly })))),
             React.createElement(SelectWidget_1.default, { key: childProps.length, options: { enumOptions: selectableFieldEnums, placeholder: addFieldPlaceholder }, onChange: this.onSelectFieldChange, includeEmpty: true, schema: {}, id: `${idSchema.$id}_field_select`, formContext: this.props.formContext, disabled: this.props.disabled, readonly: this.props.readonly })));
     }
 }

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

@@ -16,6 +16,10 @@ interface MediaMetadataSchema {
     intellectualOwner?: string;
     intellectualRights?: string;
 }
+interface ProcessedExifData {
+    formData?: any;
+    defaultMediaMetadata?: any;
+}
 export default class ImageArrayField extends React.Component<FieldProps<any, JSONSchemaArray<JSONSchemaObject>>, ImageArrayFieldState> {
     ALLOWED_FILE_TYPES: string[];
     ACCEPT_FILE_TYPES: string[];
@@ -89,18 +93,18 @@ export declare function MediaArrayField<LFC extends Constructor<React.Component<
         onHideMediaAddModal: () => void;
         renderMediaAddModal: () => JSX.Element | null;
         onAlertOk: () => void;
-        parseExif: (files: File[]) => undefined | Promise<any>;
+        parseExif: (files: File[]) => Promise<ProcessedExifData>;
         sideEffects: (formData: any) => void;
         onFileFormChange: (files: File[]) => void;
         getContainerId: () => number | "root";
-        saveMedias(files: File[]): Promise<any[] | undefined>;
+        saveMedias(files: File[], exifDataPromise: Promise<ProcessedExifData>): Promise<any[] | undefined>;
         addNameToDataURL: (dataURL: string, name: string) => string;
         processFiles: (files: File[]) => Promise<ProcessedFile[]>;
         processFile: (file: File) => Promise<ProcessedFile>;
         onMediaMetadataUpdate: ({ formData }: {
             formData: any;
         }) => Promise<void>;
-        getMetadataPromise: () => Promise<MediaMetadataSchema>;
+        getMetadataPromise: (exifDataPromise: Promise<ProcessedExifData>) => Promise<MediaMetadataSchema>;
         getMaxFileSizeAsString: () => string;
         getAllowedMediaFormatsTranslationKey: () => "AllowedFileFormat" | "AllowedFileFormats";
         getAllowedMediaFormatsAsString: () => string;

package/lib/components/fields/ImageArrayField.js

@@ -260,7 +260,7 @@ function MediaArrayField(ComposedComponent) {
             this.parseExif = (files) => {
                 const { exifParsers = [] } = (0, utils_1.getUiOptions)(this.props.uiSchema);
                 if (!exifParsers)
-                    return;
+                    return Promise.resolve({});
                 const found = exifParsers.reduce((found, { parse }) => {
                     found[parse] = false;
                     return found;
@@ -326,15 +326,19 @@ function MediaArrayField(ComposedComponent) {
                     const lajiFormInstance = this.props.formContext.services.rootInstance;
                     const schema = lajiFormInstance.getSchema();
                     let formData = lajiFormInstance.getFormData();
+                    let defaultMediaMetadata = {};
                     exifParsers.filter((f) => f.type === "event" || found[f.parse]).forEach(({ field, parse, type, eventName }) => {
                         if (type === "mutate") {
                             formData = (0, utils_1.updateFormDataWithJSONPointer)({ formData, schema, registry }, found[parse], field);
                         }
+                        if (type === "mutateMetadata") {
+                            defaultMediaMetadata = (0, utils_1.updateSafelyWithJSONPointer)(defaultMediaMetadata, found[parse], field);
+                        }
                         if (type === "event") {
                             this.props.formContext.services.customEvents.send(`root_${(0, utils_1.JSONPointerToId)(field)}`, eventName, found[parse], undefined, { bubble: false });
                         }
                     });
-                    return formData;
+                    return { formData, defaultMediaMetadata };
                 });
             };
             this.sideEffects = (formData) => {
@@ -364,14 +368,18 @@ function MediaArrayField(ComposedComponent) {
                 }
             };
             this.onFileFormChange = (files) => {
-                var _a;
                 if (this.state.addModal) {
                     this.setState({ addModal: undefined });
                 }
-                (_a = this.parseExif(files)) === null || _a === void 0 ? void 0 : _a.then(this.sideEffects);
+                const exifDataPromise = this.parseExif(files);
+                exifDataPromise.then(data => {
+                    if (data.formData) {
+                        this.sideEffects(data.formData);
+                    }
+                });
                 const id = this.getContainerId();
                 const lajiFormInstance = this.props.formContext.services.rootInstance;
-                const saveAndOnChange = () => this.saveMedias(files).then(mediaIds => {
+                const saveAndOnChange = () => this.saveMedias(files, exifDataPromise).then(mediaIds => {
                     if (!lajiFormInstance.isMounted() || !mediaIds) {
                         return;
                     }
@@ -450,15 +458,18 @@ function MediaArrayField(ComposedComponent) {
                     this.mounted && this.setState({ metadataSaveSuccess: false });
                 }
             });
-            this.getMetadataPromise = () => {
+            this.getMetadataPromise = (exifDataPromise) => {
                 let mediaMetadata = this.props.formContext.mediaMetadata
                     || { intellectualRights: "MZ.intellectualRightsARR" };
                 const MACode = this.props.formContext.uiSchemaContext.creator;
-                return ("capturerVerbatim" in mediaMetadata)
-                    ? Promise.resolve(Object.assign(Object.assign({}, mediaMetadata), { capturerVerbatim: [mediaMetadata.capturerVerbatim] }))
+                const metadataPromise = ("capturerVerbatim" in mediaMetadata)
+                    ? Promise.resolve(Object.assign(Object.assign({}, mediaMetadata), { capturerVerbatim: Array.isArray(mediaMetadata.capturerVerbatim) ? mediaMetadata.capturerVerbatim : [mediaMetadata.capturerVerbatim] }))
                     : MACode
                         ? this.apiClient.get("/person/by-id/{personId}", { path: { personId: MACode } }).then(({ fullName = MACode }) => (Object.assign(Object.assign({ capturerVerbatim: Array.isArray(fullName) ? fullName : [fullName] }, mediaMetadata), { intellectualOwner: fullName }))).catch(() => Promise.resolve(mediaMetadata))
-                        : mediaMetadata;
+                        : Promise.resolve(mediaMetadata);
+                return Promise.all([exifDataPromise, metadataPromise]).then(([exifData, metadata]) => {
+                    return Object.assign(Object.assign({}, exifData.defaultMediaMetadata), metadata);
+                });
             };
             this.getMaxFileSizeAsString = () => {
                 let maxSize = this.MAX_FILE_SIZE.toString().substring(0, this.MAX_FILE_SIZE.toString().length - 6);
@@ -571,7 +582,7 @@ function MediaArrayField(ComposedComponent) {
                         this.renderMetadataModal(),
                         this.renderMediaAddModal()))));
         }
-        saveMedias(files) {
+        saveMedias(files, exifDataPromise) {
             return __awaiter(this, void 0, void 0, function* () {
                 const containerId = this.getContainerId();
                 let tmpMedias = [];
@@ -617,7 +628,7 @@ function MediaArrayField(ComposedComponent) {
                         return;
                     }
                     const tmpMediaEntities = yield this.apiClient.post(`/${this.ENDPOINT}`, undefined, formData);
-                    const mediaMetadata = yield this.getMetadataPromise();
+                    const mediaMetadata = yield this.getMetadataPromise(exifDataPromise);
                     const mediaEntities = yield Promise.all(tmpMediaEntities.map((item) => this.apiClient.post(`/${this.ENDPOINT}/{id}`, { path: { id: item.id } }, mediaMetadata)));
                     const ids = mediaEntities.map((item) => item ? item.id : undefined).filter(item => item !== undefined);
                     tmpMedias.forEach(id => {

package/lib/components/fields/PrefixArrayField.js

@@ -89,8 +89,8 @@ let PrefixArrayField = class PrefixArrayField extends React.Component {
     }
     render() {
         const SchemaField = this.props.registry.fields.SchemaField;
-        const { schema, uiSchema, idSchema, errorSchema, required, formContext: { Label, translations } } = this.props;
-        const { prefixValues = [], addFieldPlaceholder } = (0, utils_1.getUiOptions)(uiSchema);
+        const { schema, uiSchema, idSchema, errorSchema, required, disabled, readonly, formContext: { Label, translations, uiSchemaContext } } = this.props;
+        const { prefixValues = [], addFieldPlaceholder, confirmDelete = uiSchemaContext.confirmDelete } = (0, utils_1.getUiOptions)(uiSchema);
         const childProps = this.state.fieldValues.map((value, idx) => {
             return {
                 schema: schema.items,
@@ -114,7 +114,7 @@ let PrefixArrayField = class PrefixArrayField extends React.Component {
                 React.createElement("div", { className: "laji-form-field-template-schema" },
                     React.createElement(SchemaField, Object.assign({}, this.props, props, { key: idx, onChange: this.onFieldChange(idx) }))),
                 React.createElement("div", { className: "laji-form-field-template-buttons" },
-                    React.createElement(components_1.DeleteButton, { id: props.idSchema.$id, onClick: this.onFieldDelete(idx), translations: translations })))),
+                    React.createElement(components_1.DeleteButton, { id: props.idSchema.$id, onClick: this.onFieldDelete(idx), translations: translations, confirm: confirmDelete, disabled: disabled || readonly })))),
             React.createElement(SelectWidget_1.default, { key: childProps.length, options: { enumOptions: selectableFieldEnums, placeholder: addFieldPlaceholder !== null && addFieldPlaceholder !== void 0 ? addFieldPlaceholder : `${translations.AddField}` }, onChange: this.onSelectFieldChange, includeEmpty: true, schema: {}, id: `${idSchema.$id}_field_select`, formContext: this.props.formContext, disabled: this.props.disabled, readonly: this.props.readonly })));
     }
 };

package/lib/components/fields/SectionArrayField.js

@@ -357,7 +357,7 @@ let SectionArrayFieldTemplate = class SectionArrayFieldTemplate extends React.Co
                 return null;
             }
             const { children, hasRemove, index, disabled, readonly, onDropIndexClick } = this.props.items[idx];
-            const del = hasRemove && (React.createElement(components_1.DeleteButton, { id: `${this.props.idSchema.$id}_${index}`, disabled: disabled || readonly, translations: this.props.formContext.translations, onClick: onDropIndexClick(index), className: "horizontally-centered" }));
+            const del = hasRemove && (React.createElement(components_1.DeleteButton, { id: `${this.props.idSchema.$id}_${index}`, disabled: disabled || readonly, translations: this.props.formContext.translations, confirm: this.props.formContext.uiSchemaContext.confirmDelete, onClick: onDropIndexClick(index), className: "horizontally-centered" }));
             const sectionLabel = (React.createElement(components_1.Affix, { className: index % 2 ? "background" : " darker", containerRef: this.containerRef, topOffset: this.props.formContext.topOffset, bottomOffset: this.props.formContext.bottomOffset },
                 React.createElement("legend", { className: "horizontally-centered" }, (0, utils_1.parseJSONPointer)(this.props.formData[index], sectionField))));
             const [arr, field] = rowValueField.split("/%{row}");

package/lib/components/fields/SingleActiveArrayField.js

@@ -471,8 +471,8 @@ let AccordionArrayFieldTemplate = class AccordionArrayFieldTemplate extends Reac
         const that = this.props.formContext.this;
         const arrayFieldTemplateProps = this.props;
         const activeIdx = that.state.activeIdx;
-        const { confirmDelete, closeButton, affixed } = (0, utils_1.getUiOptions)(arrayFieldTemplateProps.uiSchema);
-        const { translations } = this.props.formContext;
+        const { translations, uiSchemaContext } = this.props.formContext;
+        const { confirmDelete = uiSchemaContext.confirmDelete, closeButton, affixed } = (0, utils_1.getUiOptions)(arrayFieldTemplateProps.uiSchema);
         const { disabled, readonly } = arrayFieldTemplateProps;
         const containerRefs = {};
         (0, utils_1.asArray)(activeIdx).forEach(idx => {
@@ -526,8 +526,8 @@ let PagerArrayFieldTemplate = class PagerArrayFieldTemplate extends React.Compon
     render() {
         const that = this.props.formContext.this;
         const arrayTemplateFieldProps = this.props;
-        const { translations } = that.props.formContext;
-        const { buttons, affixed, headerClassName, confirmDelete } = (0, utils_1.getUiOptions)(arrayTemplateFieldProps.uiSchema);
+        const { translations, uiSchemaContext } = that.props.formContext;
+        const { buttons, affixed, headerClassName, confirmDelete = uiSchemaContext.confirmDelete } = (0, utils_1.getUiOptions)(arrayTemplateFieldProps.uiSchema);
         const activeIdx = that.state.activeIdx;
         const { Pager } = this.context.theme;
         let header = (React.createElement("div", { className: `laji-form-panel-header laji-form-accordion-header${headerClassName ? ` ${headerClassName}` : ""}`, ref: this.setHeaderRef },
@@ -800,7 +800,7 @@ let TableArrayFieldTemplate = class TableArrayFieldTemplate extends React.Compon
         const that = this.props.formContext.this;
         const { errorSchema } = that.props;
         const activeIdx = that.state.activeIdx;
-        const { confirmDelete } = (0, utils_1.getUiOptions)(uiSchema);
+        const { confirmDelete = this.props.formContext.uiSchemaContext.confirmDelete } = (0, utils_1.getUiOptions)(uiSchema);
         const getDeleteButtonFor = (idx, item) => {
             return removable && React.createElement(components_1.DeleteButton, { id: `${that.props.idSchema.$id}_${idx}`, disabled: disabled || readonly, ref: this.getDeleteButtonRef(idx), key: (0, utils_1.getUUID)(this.props.formData[item.index]) || item.key, confirm: confirmDelete, translations: this.props.formContext.translations, onClick: that.onDelete(item) });
         };

package/lib/components/fields/TableField.js

@@ -135,7 +135,7 @@ exports.default = TableField;
 let TableArrayFieldTemplate = class TableArrayFieldTemplate extends React.Component {
     render() {
         const { props } = this;
-        const { schema, uiSchema, formContext: { cols, wrapperCols, schemaPropsArray }, idSchema, readonly, disabled } = props;
+        const { schema, uiSchema, formContext: { cols, wrapperCols, schemaPropsArray, uiSchemaContext }, idSchema, readonly, disabled } = props;
         const schemaProps = schema.additionalItems ? schema.additionalItems.properties : schema.items.properties;
         const { Label } = this.props.formContext;
         const { Row, Col } = this.context.theme;
@@ -146,7 +146,7 @@ let TableArrayFieldTemplate = class TableArrayFieldTemplate extends React.Compon
                         || propUiSchema["ui:required"], uiSchema: propUiSchema })));
         });
         const options = (0, utils_1.getUiOptions)(props.uiSchema);
-        const { confirmDelete, deleteCorner, removable = true, nonRemovables = [], buttons, "ui:deleteHelp": deleteHelp } = options;
+        const { confirmDelete = uiSchemaContext.confirmDelete, deleteCorner, removable = true, nonRemovables = [], buttons, "ui:deleteHelp": deleteHelp } = options;
         if (!this.deleteButtonRefs)
             this.deleteButtonRefs = [];
         const getRefFor = i => elem => { this.deleteButtonRefs[i] = elem; };

package/lib/components/templates/ArrayFieldTemplate.js

@@ -301,9 +301,9 @@ class ArrayFieldTemplateWithoutKeyHandling extends React.Component {
     }
     render() {
         const { props } = this;
-        const { confirmDelete, renderTitleAsLabel, deleteCorner, removable = true, orderable, nonRemovables = [], nonOrderables = [], "ui:deleteHelp": deleteHelp, buttons = [] } = (0, utils_1.getUiOptions)(props.uiSchema);
         const { readonly, disabled } = this.props;
-        const { Label } = this.props.formContext;
+        const { Label, uiSchemaContext } = this.props.formContext;
+        const { confirmDelete = uiSchemaContext.confirmDelete, renderTitleAsLabel, deleteCorner, removable = true, orderable, nonRemovables = [], nonOrderables = [], "ui:deleteHelp": deleteHelp, buttons = [] } = (0, utils_1.getUiOptions)(props.uiSchema);
         const Title = renderTitleAsLabel ? Label : (0, utils_2.getTemplate)("TitleFieldTemplate", props.registry, (0, utils_1.getUiOptions)(props.uiSchema));
         const Description = (0, utils_2.getTemplate)("DescriptionFieldTemplate", this.props.registry, (0, utils_1.getUiOptions)(props.uiSchema));
         if (!this.deleteButtonRefs)

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/package.json

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