@luomus/laji-form 15.1.0 → 15.1.1

package/lib/components/fields/SingleActiveArrayField.js

@@ -1,974 +0,0 @@
-"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 });
-const React = require("react");
-const react_dom_1 = require("react-dom");
-const PropTypes = require("prop-types");
-const merge = require("deepmerge");
-const utils_1 = require("../../utils");
-const utils_2 = require("@rjsf/utils");
-const components_1 = require("../components");
-const ArrayFieldTemplate_1 = require("../templates/ArrayFieldTemplate");
-const ArrayField_1 = require("./ArrayField");
-const Context_1 = require("../../Context");
-const ReactContext_1 = require("../../ReactContext");
-const BaseComponent_1 = require("../BaseComponent");
-const utils_3 = require("@luomus/laji-map/lib/utils");
-const utils_4 = require("@rjsf/utils");
-const memoize = require("memoizee");
-const ArrayField_2 = require("./ArrayField");
-const popupMappers = {
-    units: (schema, units, options) => {
-        const identifications = units.map(item => (item && item.identifications && item.identifications[0]) ?
-            item.identifications[0] :
-            undefined).filter(item => item);
-        return Promise.all(identifications.map(identification => Promise.resolve(identification.taxon))).then(result => {
-            return Promise.resolve({ [(schema.units ? schema.units.title : undefined) || options.label || options.field]: result });
-        });
-    }
-};
-let SingleActiveArrayField = class SingleActiveArrayField extends React.Component {
-    constructor(props) {
-        super(props);
-        this.getInitialActiveIdx = (props) => {
-            const { formData, uiSchema, schema } = props;
-            const formDataLength = (formData || []).length;
-            const options = utils_1.getUiOptions(uiSchema);
-            return (formDataLength === 1 || formDataLength === 0 && schema.minItems) ? 0 : options.initialActiveIdx;
-        };
-        this.updatePopups = (props) => {
-            const { popupFields } = utils_1.getUiOptions(this.props.uiSchema);
-            let { popups } = this.state;
-            let count = 0;
-            if (popupFields)
-                props.formData.forEach((item, idx) => {
-                    this.getPopupDataPromise(idx, props, item).then(popupData => {
-                        count++;
-                        popups = Object.assign(Object.assign({}, popups), { [idx]: popupData });
-                        if (this.mounted && count === props.formData.length)
-                            this.setState({ popups });
-                    }).catch(() => {
-                        count++;
-                    });
-                });
-        };
-        this.onHeaderAffixChange = (elem, value) => {
-            if (value) {
-                this.setState({ scrollHeightFixed: elem.scrollHeight }, () => {
-                    this.getLocalFormContext().utils.syncScroll(!!"force");
-                });
-            }
-            else {
-                this.setState({ scrollHeightFixed: 0 });
-            }
-        };
-        this.getLocalFormContext = () => {
-            if (this.localContextKey === this.state.scrollHeightFixed) {
-                return this.localContext;
-            }
-            this.localContextKey = this.state.scrollHeightFixed;
-            this.localContext = Object.assign(Object.assign({}, this.props.formContext), { topOffset: this.props.formContext.topOffset + this.state.scrollHeightFixed });
-            this.localContext.utils = utils_1.ReactUtils(this.localContext);
-            return this.localContext;
-        };
-        this.updateRenderingMode = (normalRendering, callback) => {
-            this.setState({ normalRendering }, () => callback && callback(normalRendering));
-        };
-        this.getPopupDataPromise = (idx, props, itemFormData) => {
-            const { popupFields } = utils_1.getUiOptions(props.uiSchema);
-            if (!this.props.formData)
-                return Promise.resolve({});
-            return Promise.all(popupFields.map(field => {
-                const fieldName = field.field;
-                let fieldData = itemFormData ? itemFormData[fieldName] : undefined;
-                let fieldSchema = props.schema.items.properties;
-                if (field.mapper && fieldData) {
-                    return popupMappers[field.mapper](fieldSchema, fieldData, field);
-                }
-                else if (fieldData) {
-                    return new Promise(resolve => resolve({ [fieldSchema && fieldSchema[fieldName] ? fieldSchema[fieldName].title : fieldName]: fieldData }));
-                }
-            })).then(fields => {
-                const popupData = fields.reduce((popup, item) => {
-                    if (item)
-                        Object.keys(item).forEach(label => {
-                            popup[label] = item[label];
-                        });
-                    return popup;
-                }, {});
-                return Promise.resolve(popupData);
-            });
-        };
-        this.onActiveChange = (idx, prop, callback) => {
-            if (idx !== undefined) {
-                idx = parseInt(idx);
-            }
-            if (this.state.activeIdx === idx) {
-                idx = undefined;
-            }
-            const { onActiveChange } = utils_1.getUiOptions(this.props.uiSchema);
-            onActiveChange ? onActiveChange(idx, prop, callback) : this.setState({ activeIdx: idx }, callback);
-        };
-        this.onDelete = (item) => (e) => {
-            const newLength = this.props.formData.length - 1;
-            if (!newLength) {
-                this.onActiveChange(undefined);
-            }
-            else if (this.state.activeIdx > newLength - 1) {
-                this.onActiveChange(newLength - 1);
-            }
-            item.onDropIndexClick(item.index)(e);
-        };
-        this.buttonDefinitions = {
-            add: {
-                callback: () => this.onActiveChange((this.props.formData || []).length)
-            },
-            addPredefined: {
-                callback: () => this.onActiveChange((this.props.formData || []).length)
-            },
-            copy: {
-                fn: () => (...params) => {
-                    const { formData = [] } = this.props;
-                    const idx = this.state.activeIdx !== undefined ?
-                        this.state.activeIdx :
-                        formData.length - 1;
-                    ArrayFieldTemplate_1.beforeAdd(this.props, idx + 1);
-                    this.props.onChange([
-                        ...formData.slice(0, idx + 1),
-                        ArrayField_1.copyItemFunction(this, formData[idx])(...params),
-                        ...formData.slice(idx + 1)
-                    ]);
-                },
-                callback: () => {
-                    const idx = this.state.activeIdx !== undefined ?
-                        this.state.activeIdx :
-                        (this.props.formData || []).length - 1;
-                    this.onActiveChange(idx + 1);
-                },
-                rules: {
-                    minLength: 1
-                }
-            }
-        };
-        this.deleteButtonRefs = {};
-        this.deleteButtonRefSetters = {};
-        this.state = Object.assign(Object.assign({ activeIdx: this.getInitialActiveIdx(props), scrollHeightFixed: 0 }, this.getStateFromProps(props)), { popups: {} });
-        const id = `${this.props.idSchema.$id}`;
-        this.props.formContext.globals[`${id}.activeIdx`] = this.state.activeIdx;
-    }
-    componentDidMount() {
-        this.mounted = true;
-        this.updatePopups(this.props);
-        if (utils_1.getUiOptions(this.props.uiSchema).receiveActiveIdxEvents !== false) {
-            this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "activeIdx", this.onActiveChange);
-        }
-    }
-    componentWillUnmount() {
-        this.mounted = false;
-        if (utils_1.getUiOptions(this.props.uiSchema).receiveActiveIdxEvents !== false) {
-            this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "activeIdx", this.onActiveChange);
-        }
-    }
-    UNSAFE_componentWillReceiveProps(props) {
-        this.prevActiveIdx = this.state.activeIdx;
-        this.setState(this.getStateFromProps(props));
-        this.updatePopups(props);
-    }
-    componentDidUpdate(prevProps, prevState) {
-        const options = utils_1.getUiOptions(this.props);
-        const prevOptions = utils_1.getUiOptions(prevProps);
-        this.props.formContext.globals[`${this.props.idSchema.$id}.activeIdx`] = this.state.activeIdx;
-        const { idToFocusAfterNavigate, idToScrollAfterNavigate, focusOnNavigate = true, renderer = "accordion", affixed } = utils_1.getUiOptions(this.props.uiSchema);
-        if (renderer === "uncontrolled")
-            return;
-        if ((prevProps.formData || []).length === (this.props.formData || []).length && ("activeIdx" in options && options.activeIdx !== prevOptions.activeIdx || (!("activeIdx" in options) && this.state.activeIdx !== prevState.activeIdx))) {
-            const id = `${this.props.idSchema.$id}_${utils_1.getFormDataIndex(this.state.activeIdx, this.props.uiSchema)}`;
-            const idToScroll = idToScrollAfterNavigate
-                ? idToScrollAfterNavigate
-                : !affixed && (renderer === "accordion" || renderer === "pager")
-                    ? `${id}-header`
-                    : `${this.props.idSchema.$id}-add`;
-            this.getLocalFormContext().utils.focusAndScroll(idToFocusAfterNavigate || id, idToScroll, focusOnNavigate);
-        }
-        if (prevProps.idSchema.$id !== this.props.idSchema.$id) {
-            this.props.formContext.services.customEvents.remove(prevProps.idSchema.$id, "activeIdx", this.onActiveChange);
-            this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "activeIdx", this.onActiveChange);
-        }
-    }
-    shouldComponentUpdate(prevProps, prevState) {
-        if ((this.state.scrollHeightFixed && !prevState.scrollHeightFixed)
-            || this.state.scrollHeightFixed && this.state.scrollHeightFixed !== prevState.scrollHeightFixed) {
-            return false;
-        }
-        return true;
-    }
-    getStateFromProps(props) {
-        const state = {};
-        const options = utils_1.getUiOptions(props.uiSchema);
-        if ("activeIdx" in options) {
-            state.activeIdx = options.activeIdx;
-        }
-        else if ((props.formData || []).length === 1 && (this.props.formData || []).length === 0) {
-            state.activeIdx = 0;
-        }
-        if (!state.activeIdx && this.props && props.idSchema.$id !== this.props.idSchema.$id) {
-            state.activeIdx = this.getInitialActiveIdx(props);
-        }
-        if (options.sortCols && options.sortCols !== utils_1.getUiOptions(this.props.uiSchema).sortCols) {
-            state.activeIdx = undefined;
-        }
-        return state;
-    }
-    render() {
-        const { renderer = "accordion", tableActiveItemClassNames } = utils_1.getUiOptions(this.props.uiSchema);
-        let ArrayFieldTemplate = undefined;
-        switch (renderer) {
-            case "accordion":
-                ArrayFieldTemplate = AccordionArrayFieldTemplate;
-                break;
-            case "pager":
-                ArrayFieldTemplate = PagerArrayFieldTemplate;
-                break;
-            case "uncontrolled":
-                ArrayFieldTemplate = UncontrolledArrayFieldTemplate;
-                break;
-            case "table":
-                ArrayFieldTemplate = TableArrayFieldTemplate;
-                break;
-            default:
-                throw new Error(`Unknown renderer '${renderer}' for SingleActiveArrayField`);
-        }
-        const formContext = Object.assign(Object.assign({}, this.getLocalFormContext()), { this: this, prevActiveIdx: this.prevActiveIdx, activeIdx: this.state.activeIdx });
-        const { registry: { fields: { ArrayField } } } = this.props;
-        const { buttons = [], buttonDefinitions } = utils_1.getUiOptions(this.props.uiSchema);
-        let uiSchema = Object.assign(Object.assign({}, this.props.uiSchema), { "ui:field": undefined, "ui:classNames": undefined, "ui:options": Object.assign(Object.assign({}, utils_1.getUiOptions(this.props.uiSchema)), { buttons, buttonDefinitions: buttonDefinitions
-                    ? merge(this.buttonDefinitions, buttonDefinitions)
-                    : this.buttonDefinitions }) });
-        if (renderer === "table" && tableActiveItemClassNames && !this.state.normalRendering) {
-            uiSchema = Object.assign(Object.assign({}, uiSchema), { items: Object.assign(Object.assign({}, uiSchema.items), { "ui:classNames": tableActiveItemClassNames }) });
-        }
-        uiSchema["ui:ArrayFieldTemplate"] = ArrayFieldTemplate;
-        return (React.createElement(ArrayField, Object.assign({}, this.props, { formContext: formContext, registry: Object.assign(Object.assign({}, this.props.registry), { formContext }), uiSchema: uiSchema })));
-    }
-};
-SingleActiveArrayField.propTypes = {
-    uiSchema: PropTypes.shape({
-        "ui:options": PropTypes.shape({
-            renderer: PropTypes.oneOf(["accordion", "pager", "uncontrolled", "table"]),
-            activeIdx: PropTypes.number
-        })
-    }),
-    schema: PropTypes.shape({
-        type: PropTypes.oneOf(["array"])
-    }).isRequired,
-    formData: PropTypes.array
-};
-SingleActiveArrayField = __decorate([
-    BaseComponent_1.default
-], SingleActiveArrayField);
-exports.default = SingleActiveArrayField;
-class Popup extends React.Component {
-    render() {
-        const { data } = this.props;
-        return (data && Object.keys(data).length) ? (React.createElement("ul", { className: "map-data-tooltip" }, data ? Object.keys(data).map(fieldName => {
-            const item = data[fieldName];
-            return React.createElement("li", { key: fieldName },
-                React.createElement("strong", null,
-                    fieldName,
-                    ":"),
-                " ",
-                Array.isArray(item) ? item.filter(utils_1.hasData).join(", ") : item);
-        }) : null)) : null;
-    }
-}
-function handlesButtonsAndFocus(ComposedComponent) {
-    let SingleActiveArrayTemplateField = class SingleActiveArrayTemplateField extends ComposedComponent {
-        constructor() {
-            super(...arguments);
-            this.getFocusHandlers = (props) => {
-                const that = props.formContext.this;
-                return props.items.map((_, i) => {
-                    const idx = utils_1.getFormDataIndex(i, that.props.uiSchema);
-                    return [`${that.props.idSchema.$id}_${idx}`, () => {
-                            if (that.state.activeIdx !== i)
-                                return new Promise(resolve => {
-                                    that.onActiveChange(i, undefined, () => resolve());
-                                });
-                        }];
-                });
-            };
-        }
-        getKeyHandlers(props) {
-            const { renderer = "accordion" } = utils_1.getUiOptions(props.uiSchema);
-            const that = props.formContext.this;
-            return [ArrayFieldTemplate_1.arrayKeyFunctions, {
-                    getProps: () => this.props,
-                    insertCallforward: callback => that.onActiveChange((that.props.formData || []).length, undefined, callback),
-                    getCurrentIdx: () => that.state.activeIdx,
-                    focusByIdx: (idx, prop, callback) => idx === that.state.activeIdx
-                        ? callback()
-                        : that.onActiveChange(idx, prop, callback),
-                    getIdToScrollAfterNavigate: renderer === "accordion" || renderer === "pager"
-                        ? () => `${props.idSchema.$id}_${that.state.activeIdx}-header`
-                        : undefined
-                }];
-        }
-        componentDidMount() {
-            this.addFocusHandlers();
-            if (super.componentDidMount)
-                super.componentDidMount();
-        }
-        componentDidUpdate(...params) {
-            this.removeFocusHandlers();
-            this.addFocusHandlers();
-            if (super.componentDidUpdate)
-                super.componentDidUpdate(...params);
-        }
-        componentWillUnmount() {
-            this.removeFocusHandlers();
-            if (super.componentWillUnmount)
-                super.componentWillUnmount();
-        }
-        addFocusHandlers() {
-            this.focusHandlers = this.getFocusHandlers(this.props);
-            this.focusHandlers.forEach(handler => {
-                this.props.formContext.services.focus.addFocusHandler(...handler);
-            });
-        }
-        removeFocusHandlers() {
-            this.focusHandlers.forEach(handler => {
-                this.props.formContext.services.focus.removeFocusHandler(...handler);
-            });
-        }
-        getChildKeyHandlers(props) {
-            const that = props.formContext.this;
-            const handlers = [];
-            if (that.state.activeIdx !== undefined) {
-                const id = `${props.idSchema.$id}_${that.state.activeIdx}`;
-                handlers.push([id, ArrayFieldTemplate_1.arrayItemKeyFunctions, { id, getProps: () => this.props, getDeleteButton: () => {
-                            return that.deleteButtonRefs[that.state.activeIdx];
-                        } }]);
-            }
-            return handlers;
-        }
-    };
-    SingleActiveArrayTemplateField.displayName = utils_1.getReactComponentName(ComposedComponent);
-    SingleActiveArrayTemplateField = __decorate([
-        ArrayFieldTemplate_1.handlesArrayKeys
-    ], SingleActiveArrayTemplateField);
-    return SingleActiveArrayTemplateField;
-}
-// Swallow unknown prop warnings.
-const ButtonsWrapper = ({ props }) => {
-    const buttons = utils_1.getUiOptions(props.uiSchema).buttons;
-    return React.createElement("div", null, ArrayFieldTemplate_1.getButtonElems(buttons, props));
-};
-const AccordionButtonsWrapper = ({ props, position }) => {
-    const buttons = ArrayFieldTemplate_1.getButtonsForPosition(props, ArrayFieldTemplate_1.getButtons(utils_1.getUiOptions(props.uiSchema).buttons, props), position);
-    const { Row, Col } = React.useContext(ReactContext_1.default).theme;
-    if (!buttons)
-        return null;
-    const cols = Object.keys(utils_1.getBootstrapCols()).reduce((cols, colType) => {
-        cols[colType] = (colType === "xs" || buttons.length > 3) ? 12 : 12 / buttons.length;
-        return cols;
-    }, {});
-    return (React.createElement(Row, { className: "laji-form-accordion-buttons" }, buttons.map((button, idx) => React.createElement(Col, Object.assign({}, cols, { key: idx }), button))));
-};
-let AccordionArrayFieldTemplate = class AccordionArrayFieldTemplate extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.setContainerRef = (elem) => {
-            this.containerRef = elem;
-        };
-        this.getContainerRef = () => react_dom_1.findDOMNode(this.containerRef);
-        this.setHeaderRef = (elem) => {
-            this.headerRef = elem;
-        };
-        this.onSelect = key => {
-            const that = this.props.formContext.this;
-            that.onActiveChange(key);
-        };
-        this.setDeleteButtonRef = idx => elem => { this.props.formContext.this.deleteButtonRefs[idx] = elem; };
-    }
-    render() {
-        const that = this.props.formContext.this;
-        const arrayFieldTemplateProps = this.props;
-        const activeIdx = that.state.activeIdx;
-        const { confirmDelete, closeButton, affixed } = utils_1.getUiOptions(arrayFieldTemplateProps.uiSchema);
-        const { translations } = this.props.formContext;
-        const { disabled, readonly } = arrayFieldTemplateProps;
-        const getHeader = (item, idx) => {
-            let header = React.createElement(AccordionHeader, { ref: this.setHeaderRef, that: that, idx: idx, wrapperClassName: "panel-title", className: "laji-form-panel-header laji-form-clickable-panel-header laji-form-accordion-header" }, item.hasRemove && React.createElement(components_1.DeleteButton, { id: `${that.props.idSchema.$id}_${utils_1.getFormDataIndex(idx, that.props.uiSchema)}`, disabled: disabled || readonly, ref: this.setDeleteButtonRef(idx), className: "pull-right", confirm: confirmDelete, translations: translations, onClick: that.onDelete(item) }));
-            if (affixed && activeIdx === idx) {
-                const offset = this.props.formContext.topOffset - (that.state.scrollHeightFixed);
-                header = (React.createElement(components_1.Affix, { getContainer: this.getContainerRef, topOffset: offset, onAffixChange: this.onHeaderAffixChange }, header));
-            }
-            return header;
-        };
-        const { Panel, Accordion, Glyphicon } = this.context.theme;
-        return (React.createElement("div", { className: "laji-form-single-active-array no-transition" },
-            React.createElement(AccordionButtonsWrapper, { props: arrayFieldTemplateProps, position: "top" }),
-            React.createElement(Accordion, { onSelect: this.onSelect, activeKey: activeIdx === undefined ? -1 : activeIdx, id: `${that.props.idSchema.$id}-accordion` },
-                arrayFieldTemplateProps.items.map((item, idx) => (React.createElement(Panel, { key: idx, ref: idx === activeIdx ? this.setContainerRef : undefined, id: `${this.props.idSchema.$id}_${utils_1.getFormDataIndex(idx, that.props.uiSchema)}-panel`, className: "laji-form-panel laji-form-clickable-panel", eventKey: idx, variant: utils_1.filteredErrors(that.props.errorSchema)[utils_1.getFormDataIndex(idx, that.props.uiSchema)] ? "danger" : "default" },
-                    React.createElement(Panel.Heading, null, getHeader(item, idx)),
-                    idx === activeIdx ? (React.createElement(Panel.Body, null,
-                        item.children,
-                        closeButton ? React.createElement(components_1.Button, { onClick: this.onSelect, small: true, className: "pull-right" },
-                            React.createElement(Glyphicon, { glyph: "chevron-up" }),
-                            " ",
-                            translations.Close) : null)) : null))),
-                React.createElement(AccordionButtonsWrapper, { props: arrayFieldTemplateProps, position: "bottom" }))));
-    }
-};
-AccordionArrayFieldTemplate.contextType = ReactContext_1.default;
-AccordionArrayFieldTemplate = __decorate([
-    handlesButtonsAndFocus
-], AccordionArrayFieldTemplate);
-let PagerArrayFieldTemplate = class PagerArrayFieldTemplate extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.setContainerRef = (elem) => {
-            this.containerRef = elem;
-        };
-        this.getContainerRef = () => this.containerRef;
-        this.setHeaderRef = (elem) => {
-            this.headerRef = elem;
-        };
-        this.onHeaderAffixChange = (value) => {
-            const elem = this.headerRef;
-            const that = this.props.formContext.this;
-            that.onHeaderAffixChange(elem, value);
-        };
-        this.navigatePrev = () => this.props.formContext.this.onActiveChange(this.props.formContext.this.state.activeIdx - 1);
-        this.navigateNext = () => this.props.formContext.this.onActiveChange(this.props.formContext.this.state.activeIdx + 1);
-        this.setDeleteButtonRef = idx => elem => { this.props.formContext.this.deleteButtonRefs[idx] = elem; };
-    }
-    render() {
-        const that = this.props.formContext.this;
-        const arrayTemplateFieldProps = this.props;
-        const { translations } = that.props.formContext;
-        const { buttons, affixed, headerClassName, confirmDelete } = 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 },
-            React.createElement(Pager, null,
-                React.createElement(Pager.Item, { previous: true, href: "#", disabled: activeIdx <= 0 || activeIdx === undefined, onClick: this.navigatePrev },
-                    "\u2190 ",
-                    translations.Previous),
-                activeIdx !== undefined
-                    ? (React.createElement(AccordionHeader, { that: that, idx: activeIdx, className: "panel-title", canHaveUndefinedIdx: false }))
-                    : null,
-                React.createElement(Pager.Item, { next: true, href: "#", disabled: activeIdx >= (that.props.formData || []).length - 1 || activeIdx === undefined, onClick: this.navigateNext },
-                    translations.Next,
-                    "  \u2192"))));
-        if (affixed) {
-            const offset = this.props.formContext.topOffset - (that.state.scrollHeightFixed);
-            header = (React.createElement(components_1.Affix, { getContainer: this.getContainerRef, topOffset: offset, onAffixChange: this.onHeaderAffixChange }, header));
-        }
-        const { Panel } = this.context.theme;
-        return (React.createElement("div", { className: "laji-form-single-active-array", ref: this.setContainerRef },
-            React.createElement("div", { className: "laji-form-field-template-item" },
-                React.createElement("div", { className: "laji-form-field-template-schema" },
-                    React.createElement(Panel, { className: "laji-form-panel" },
-                        React.createElement(Panel.Heading, null, header),
-                        React.createElement(Panel.Body, null,
-                            React.createElement("div", { key: utils_1.getUUID(this.props.formData[activeIdx]) || activeIdx }, activeIdx !== undefined && arrayTemplateFieldProps.items && arrayTemplateFieldProps.items[activeIdx] ? arrayTemplateFieldProps.items[activeIdx].children : null))),
-                    ArrayFieldTemplate_1.getButtonElems(buttons, arrayTemplateFieldProps)),
-                React.createElement("div", { className: "laji-form-field-template-buttons" }, activeIdx !== undefined && arrayTemplateFieldProps.items[activeIdx].hasRemove
-                    ? (React.createElement(components_1.DeleteButton, { id: `${that.props.idSchema.$id}_${utils_1.getFormDataIndex(activeIdx, that.props.uiSchema)}`, ref: this.setDeleteButtonRef(activeIdx), className: "pull-right", confirm: confirmDelete, translations: translations, onClick: that.onDelete(arrayTemplateFieldProps.items[activeIdx]) }))
-                    : null))));
-    }
-};
-PagerArrayFieldTemplate.contextType = ReactContext_1.default;
-PagerArrayFieldTemplate = __decorate([
-    handlesButtonsAndFocus
-], PagerArrayFieldTemplate);
-let UncontrolledArrayFieldTemplate = class UncontrolledArrayFieldTemplate extends React.Component {
-    render() {
-        const that = this.props.formContext.this;
-        const arrayTemplateFieldProps = this.props;
-        const activeIdx = that.state.activeIdx;
-        const TitleFieldTemplate = utils_4.getTemplate("TitleFieldTemplate", this.props.registry, utils_1.getUiOptions(this.props.uiSchema));
-        const DescriptionFieldTemplate = utils_4.getTemplate("DescriptionFieldTemplate", this.props.registry, utils_1.getUiOptions(this.props.uiSchema));
-        const { Label } = this.props.formContext;
-        const Title = utils_1.getUiOptions(that.props.uiSchema).renderTitleAsLabel ? Label : TitleFieldTemplate;
-        const title = utils_1.getTitle(this.props, activeIdx);
-        const titleUiSchema = Object.assign(Object.assign({}, arrayTemplateFieldProps.uiSchema), { "ui:options": Object.assign(Object.assign({}, utils_1.getUiOptions(arrayTemplateFieldProps.uiSchema)), { titleFormatters: that.props.uiSchema.titleFormatters }) });
-        return activeIdx !== undefined && arrayTemplateFieldProps.items && arrayTemplateFieldProps.items[activeIdx] ?
-            React.createElement("div", { key: utils_1.getUUID(this.props.formData[activeIdx]) || activeIdx },
-                React.createElement(Title, { title: title, label: title, schema: this.props.schema, uiSchema: titleUiSchema, formData: that.props.formData, registry: this.props.registry }),
-                React.createElement(DescriptionFieldTemplate, { description: this.props.uiSchema["ui:description"], schema: this.props.schema }),
-                arrayTemplateFieldProps.items[activeIdx].children)
-            : null;
-    }
-};
-UncontrolledArrayFieldTemplate = __decorate([
-    handlesButtonsAndFocus
-], UncontrolledArrayFieldTemplate);
-let TableArrayFieldTemplate = class TableArrayFieldTemplate extends React.Component {
-    constructor(props) {
-        super(props);
-        this.mouseCache = { enter: {}, leave: {}, keydown: {} };
-        this.onResize = () => {
-            this.updateLayout();
-        };
-        // Sets state.normalRendering on if screen is too small for table layout.
-        this.updateRenderingMode = (callback) => {
-            const _callback = (updateLayout = true) => {
-                if (updateLayout && this._lastWidth && utils_1.pixelsToBsSize(this._lastWidth) !== utils_1.pixelsToBsSize(window.innerWidth)) {
-                    this.updateLayout(null, callback);
-                }
-            };
-            const that = this.props.formContext.this;
-            const { normalRenderingTreshold } = utils_1.getUiOptions(this.props.uiSchema);
-            let initialized = false;
-            if (Object.keys(this.state).length === 0) {
-                initialized = true;
-                const state = this.getStyles();
-                if (state) {
-                    this.setState(state, _callback);
-                }
-            }
-            if (!normalRenderingTreshold) {
-                if (!initialized) {
-                    _callback();
-                }
-                return;
-            }
-            let treshold = utils_1.bsSizeToPixels(normalRenderingTreshold);
-            requestAnimationFrame(() => {
-                let normalRendering = undefined;
-                if (!this.state.normalRendering && window.innerWidth <= treshold) {
-                    normalRendering = true;
-                }
-                else if (this.state.normalRendering && window.innerWidth > treshold) {
-                    normalRendering = false;
-                }
-                if (normalRendering !== undefined) {
-                    that.updateRenderingMode(normalRendering, () => this.setState({ normalRendering }, () => this.updateLayout(null, () => _callback(false))));
-                }
-                else if (!this.state.normalRendering) {
-                    this.updateLayout(null, _callback);
-                }
-            });
-        };
-        this.setActiveRef = (elem) => {
-            this.activeElem = elem;
-            this.activeElem && this.resizeObserver.observe(this.activeElem);
-        };
-        this.setTHeadRef = (elem) => {
-            this.tHeadRef = elem;
-        };
-        this.updateLayout = (idx = null, callback) => {
-            requestAnimationFrame(() => {
-                this._lastWidth = window.innerWidth;
-                const scrollBack = this.props.formContext.utils.shouldSyncScroll();
-                const state = this.getStyles();
-                if (!state) {
-                    return;
-                }
-                if (idx !== null)
-                    state.activeIdx = idx;
-                const _callback = () => {
-                    if (scrollBack) {
-                        this.props.formContext.utils.syncScroll(!!"force");
-                    }
-                    if (callback)
-                        callback();
-                };
-                this.setState(state, _callback);
-            });
-        };
-        this.getStyles = () => {
-            const that = this.props.formContext.this;
-            const { activeIdx } = that.state;
-            const { activeHeightOffset = 0 } = utils_1.getUiOptions(this.props.uiSchema);
-            const rowElem = this.itemElems[activeIdx];
-            if (!rowElem || !this.activeElem)
-                return;
-            return {
-                activeStyle: activeIdx !== undefined ? {
-                    position: "absolute",
-                    top: rowElem.offsetTop,
-                    width: "100%",
-                    right: 0
-                } : {},
-                activeTrStyle: activeIdx !== undefined ? {
-                    height: this.activeElem.offsetHeight + activeHeightOffset
-                } : {}
-            };
-        };
-        this.getDeleteButtonRef = (idx) => {
-            const that = this.props.formContext.this;
-            that.deleteButtonRefSetters[idx] = that.deleteButtonRefSetters[idx]
-                || (elem => {
-                    that.deleteButtonRefs[idx] = elem;
-                });
-            return that.deleteButtonRefSetters[idx];
-        };
-        this.customEventSender = memoize((eventName) => memoize((idx) => () => {
-            const that = this.props.formContext.this;
-            that.props.formContext.services.customEvents.send(that.props.idSchema.$id, eventName, { idx });
-        }));
-        this.onKeyDownActivate = memoize((idx) => (e) => {
-            if (idx !== this.state.activeIdx && (e.key === " " || e.key === "Enter")) {
-                this.getOnChangeActive(idx)();
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        });
-        this.getOnChangeActive = memoize(idx => () => {
-            const that = this.props.formContext.this;
-            idx !== that.state.activeIdx && that.onActiveChange(idx, undefined, this.updateLayout);
-        });
-        this.getOnHeaderClick = memoize((col, onSortToggle) => () => onSortToggle(col));
-        this.state = {};
-        this.itemElems = [];
-        this.resizeObserver = new ResizeObserver(this.onResize);
-    }
-    componentDidMount() {
-        this._updateRenderingMode = () => this.updateRenderingMode();
-        window.addEventListener("resize", this._updateRenderingMode);
-        this.updateRenderingMode();
-        this._prevCheckedLength = this.props.items.length;
-    }
-    componentWillUnmount() {
-        window.removeEventListener("resize", this._updateRenderingMode);
-        this.resizeObserver.disconnect();
-    }
-    componentDidUpdate(prevProps, prevState) {
-        const that = this.props.formContext.this;
-        let updated = false;
-        if (this.props.items.length !== prevProps.items.length || this.state.activeIdx !== prevState.activeIdx) {
-            if (!this.state.normalRendering && this.props.items.length === 1 && this.state.activeIdx === 0) {
-                this.updateRenderingMode();
-                updated = true;
-            }
-            else if (this.state.normalRendering && this.props.items.length > 1 || this.state.activeIdx !== 0) {
-                this.updateRenderingMode();
-                updated = true;
-            }
-        }
-        if (!updated) {
-            const activeChanged = this.state.activeIdx !== that.state.activeIdx;
-            const itemsLengthChanged = this._prevCheckedLength !== this.props.items.length;
-            let tHeadHeight, tHeadHeightChanged;
-            if (this.tHeadRef) {
-                tHeadHeight = this.tHeadRef.scrollHeight;
-                tHeadHeightChanged = this.prevTHeadHeight && tHeadHeight !== this.prevTHeadHeight;
-            }
-            if (activeChanged || itemsLengthChanged || tHeadHeightChanged) {
-                this.updateLayout(this.props.formContext.this.state.activeIdx);
-            }
-            if (tHeadHeight)
-                this.prevTHeadHeight = tHeadHeight;
-            this._prevCheckedLength = this.props.items.length;
-        }
-    }
-    getSortableHeaderProps(col, props) {
-        const { onSortToggle, sortCols, ui, sortableColumns, sortColTooltips } = utils_1.getUiOptions(props.uiSchema);
-        if (!onSortToggle || sortableColumns && !sortableColumns.includes(col)) {
-            return {};
-        }
-        const sortCol = sortCols.find(({ name }) => name === col);
-        const className = utils_1.classNames((sortCol === null || sortCol === void 0 ? void 0 : sortCol.descending)
-            ? "laji-form-col-desc"
-            : (sortCol === null || sortCol === void 0 ? void 0 : sortCol.descending) === false
-                ? "laji-form-col-asc"
-                : undefined, "laji-form-col-sortable");
-        const tooltip = sortColTooltips[col] || props.formContext.translations["ClickToSort"];
-        return { onClick: this.getOnHeaderClick(col, onSortToggle), className, ui: ui[col], role: "button", tooltip };
-    }
-    render() {
-        if (this.state.normalRendering) {
-            return React.createElement(ArrayFieldTemplate_1.default, Object.assign({}, this.props));
-        }
-        const { schema, uiSchema = {}, formData = [], items, disabled, readonly } = this.props;
-        const TitleFieldTemplate = utils_4.getTemplate("TitleFieldTemplate", this.props.registry, utils_1.getUiOptions(uiSchema));
-        const DescriptionFieldTemplate = utils_4.getTemplate("DescriptionFieldTemplate", this.props.registry, utils_1.getUiOptions(uiSchema));
-        const { renderTitleAsLabel, formatters = {}, shownColumns = [], removable = true } = utils_1.getUiOptions(uiSchema);
-        const { Label } = this.props.formContext;
-        const Title = renderTitleAsLabel ? Label : TitleFieldTemplate;
-        const foundProps = {};
-        const shownColumnsDict = utils_1.dictionarify(shownColumns);
-        const { tmpImgs = {} } = Context_1.default("IMAGE_ARRAY_FIELD");
-        let cols = Object.keys(schema.items.properties).reduce((_cols, prop) => {
-            if (formData.some(item => {
-                const found = shownColumnsDict[prop]
-                    || foundProps[prop]
-                    || (prop in item
-                        && !utils_1.isEmptyString(item[prop])
-                        && (!Array.isArray(item[prop])
-                            || Array.isArray(item[prop]) && !item[prop].every(utils_1.isEmptyString))
-                        && !utils_1.isDefaultData(item[prop], schema.items.properties[prop])
-                        && !utils_1.isHidden(uiSchema.items || {}, prop)
-                        && !utils_1.isHidden(utils_1.getNestedTailUiSchema(uiSchema.items || {}), prop))
-                    || uiSchema.items && uiSchema.items[prop] && uiSchema.items[prop]["ui:field"] === "ImageArrayField" && utils_1.getUUID(item) && tmpImgs[utils_1.getUUID(item)];
-                if (found)
-                    foundProps[prop] = true;
-                return found;
-            })) {
-                _cols.push(prop);
-            }
-            return _cols;
-        }, []);
-        const { "ui:order": order } = (uiSchema.items || {});
-        if (order)
-            cols = utils_2.orderProperties(cols, order.filter(field => field === "*" || foundProps[field]));
-        const that = this.props.formContext.this;
-        const { errorSchema } = that.props;
-        const activeIdx = that.state.activeIdx;
-        const { confirmDelete } = 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: utils_1.getUUID(this.props.formData[item.index]) || item.key, confirm: confirmDelete, translations: this.props.formContext.translations, onClick: that.onDelete(item) });
-        };
-        const setItemRef = idx => elem => {
-            this.itemElems[idx] = elem;
-        };
-        const title = utils_1.getTitle(this.props, that.state.activeIdx);
-        const onMouseEnter = this.customEventSender("startHighlight");
-        const onMouseLeave = this.customEventSender("endHighlight");
-        const { Table } = this.context.theme;
-        return (React.createElement("div", { style: { position: "relative" }, className: "single-active-array-table-container" },
-            React.createElement(Title, { title: title, label: title, uiSchema: uiSchema, schema: schema, formData: formData, registry: this.props.registry }),
-            React.createElement(DescriptionFieldTemplate, { description: uiSchema["ui:description"], schema: this.props.schema }),
-            React.createElement("div", { className: "laji-form-field-template-item" },
-                React.createElement("div", { className: "table-responsive laji-form-field-template-schema" },
-                    React.createElement(Table, { hover: true, bordered: true, condensed: true, className: "single-active-array-table" },
-                        items.length > 1 || (that.state.activeIdx !== undefined && that.state.activeIdx !== 0) ? (React.createElement("thead", { ref: this.setTHeadRef },
-                            React.createElement("tr", null,
-                                cols.length ? cols.map(col => {
-                                    const sortableHeaderProps = this.getSortableHeaderProps(col, this.props);
-                                    const { ui, tooltip } = sortableHeaderProps, _sortableHeaderProps = __rest(sortableHeaderProps, ["ui", "tooltip"]);
-                                    const className = utils_1.classNames("darker", sortableHeaderProps.className);
-                                    return (React.createElement(components_1.TooltipComponent, { key: col, tooltip: tooltip, placement: "top" },
-                                        React.createElement("th", Object.assign({ key: col }, _sortableHeaderProps, { className: className }),
-                                            ((uiSchema.items || {})[col] || {})["ui:title"] || schema.items.properties[col].title,
-                                            ui || null)));
-                                }) : React.createElement("th", { className: "darker" }),
-                                React.createElement("th", { key: "_activeContent", className: "single-active-array-table-content-col" }),
-                                React.createElement("th", { key: "_delete", className: "single-active-array-table-delete" })))) : null,
-                        React.createElement("tbody", null, formData.map((_, idx) => {
-                            const item = items[idx];
-                            let className = "";
-                            if (utils_1.filteredErrors(errorSchema)[utils_1.getFormDataIndex(idx, uiSchema)])
-                                className = className ? `${className} bg-danger` : "bg-danger";
-                            return [
-                                React.createElement("tr", { key: utils_1.getUUID(this.props.formData[item.index]) || item.key, onClick: this.getOnChangeActive(idx), className: className, tabIndex: idx === activeIdx ? undefined : 0, id: idx !== activeIdx ? `_laji-form_${ArrayField_2.ArrayFieldPatched.prototype.getIdSchema(this.props, idx).$id}` : undefined, ref: setItemRef(idx), style: idx === activeIdx ? this.state.activeTrStyle : undefined, onMouseEnter: onMouseEnter(idx), onMouseLeave: onMouseLeave(idx), onKeyDown: this.onKeyDownActivate(idx) },
-                                    cols.length ? cols.map(col => React.createElement("td", { key: col }, utils_1.formatValue(Object.assign(Object.assign({}, that.props), { schema: schema.items.properties[col], uiSchema: (uiSchema.items || {})[col], formData: formData[idx][col] }), formatters[col], { formData: formData[idx] }))) : React.createElement("td", null),
-                                    (activeIdx !== undefined && items[activeIdx] && idx === activeIdx) ? (React.createElement("td", { key: utils_1.getUUID(formData[activeIdx]) || activeIdx, className: "single-active-array-table-content-col" },
-                                        React.createElement("div", { className: "laji-form-field-template-item keep-vertical", style: this.state.activeStyle, ref: this.setActiveRef },
-                                            React.createElement("div", { className: "laji-form-field-template-schema" }, items[activeIdx].children),
-                                            React.createElement("div", { className: "laji-form-field-template-buttons" })))) : React.createElement("td", { className: "single-active-array-table-content-col" }),
-                                    React.createElement("td", { key: "delete", className: "delete-button-container" }, getDeleteButtonFor(idx, item)))
-                            ];
-                        })))),
-                React.createElement("div", { className: "laji-form-field-template-buttons" })),
-            React.createElement(ButtonsWrapper, { props: this.props })));
-    }
-};
-TableArrayFieldTemplate.contextType = ReactContext_1.default;
-TableArrayFieldTemplate = __decorate([
-    handlesButtonsAndFocus
-], TableArrayFieldTemplate);
-const headerFormatters = {
-    units: {
-        component: (props) => {
-            const { that: { props: { formContext: { translations }, formData } }, idx } = props;
-            const item = formData[idx];
-            const unitsLength = (item && item.units && "length" in item.units) ?
-                item.units.filter(unit => unit &&
-                    unit.identifications &&
-                    unit.identifications[0] &&
-                    unit.identifications[0].taxon).length
-                : 0;
-            return (React.createElement("span", { className: "text-muted" }, ` (${unitsLength} ${translations.unitsPartitive})`));
-        },
-        onClick: (that, idx) => {
-            if (that.state.activeIdx === idx) {
-                headerFormatters.units.onMouseEnter(that, idx, !!"use the force");
-            }
-            else {
-                headerFormatters.units.onMouseLeave(that);
-            }
-        },
-        onMouseEnter: (that, idx, force) => {
-            const { props: { formData } } = that;
-            const item = formData[idx];
-            that.hoveredIdx = idx;
-            if (!force && idx === that.state.activeIdx)
-                return;
-            const map = Context_1.default(`${that.props.formContext.contextId}_MAP`).map;
-            const gatheringGeometries = (item && item.geometry && item.geometry.geometries) ? item.geometry.geometries : [];
-            const unitGeometries = [...(item && item.units ? item.units : [])]
-                .filter(unit => unit.unitGathering && utils_1.hasData(unit.unitGathering.geometry))
-                .map(unit => unit.unitGathering.geometry);
-            const geometries = [...gatheringGeometries, ...unitGeometries]
-                .map(geometry => {
-                return { type: "Feature", properties: {}, geometry };
-            });
-            map.addData({
-                featureCollection: { type: "featureCollection", features: geometries },
-                getFeatureStyle: () => ({ opacity: 0.6, color: "#888888" }),
-                temp: true
-            });
-        },
-        onMouseLeave: (that) => {
-            const map = Context_1.default(`${that.props.formContext.contextId}_MAP`).map;
-            const lastData = map.data[map.data.length - 1];
-            if (lastData && lastData.temp) {
-                map.removeData(map.data.length - 1);
-            }
-            that.hoveredIdx = undefined;
-        }
-    },
-    namedPlace: {
-        component: class NamedPlaceHeader extends React.Component {
-            constructor(props) {
-                super(props);
-                this.fetch = (props) => {
-                    const { namedPlaceID } = (props.that.props.formData || {})[props.idx] || {};
-                    if (namedPlaceID)
-                        props.that.props.formContext.apiClient.fetchCached(`/named-places/${namedPlaceID}`, undefined, { failSilently: true }).then(response => {
-                            if (this.mounted && response.name !== this.state.name)
-                                this.setState({
-                                    namedPlaceID,
-                                    name: response.name
-                                });
-                        });
-                };
-                this.state = {};
-            }
-            componentDidMount() {
-                this.mounted = true;
-                this.fetch(this.props);
-            }
-            componentWillUnmount() {
-                this.mounted = false;
-            }
-            UNSAFE_componentWillReceiveProps(props) {
-                this.fetch(props);
-            }
-            render() {
-                const { name } = this.state;
-                const { locality } = (this.props.that.props.formData || {})[this.props.idx] || {};
-                return React.createElement("span", { className: "text-muted" }, !utils_1.isEmptyString(name) ? name : locality);
-            }
-        }
-    },
-    lineTransect: {
-        component: (props) => {
-            let start, end;
-            const lineTransectFeature = Object.keys((props.that.props.formData || [])[0].geometry || {}).length
-                ? { type: "Feature", properties: {}, geometry: { type: "MultiLineString", coordinates: props.that.props.formData.map(item => item.geometry.coordinates) } }
-                : undefined;
-            if (lineTransectFeature)
-                [start, end] = utils_3.getLineTransectStartEndDistancesForIdx(lineTransectFeature, props.idx, 10);
-            return props.idx !== undefined && end ? React.createElement("span", { className: "text-muted" }, `${start}-${end}m`) : null;
-        }
-    },
-    number: {
-        component: (props) => {
-            return props.idx !== undefined ? (props.idx + 1) + "." : null;
-        }
-    },
-    lolife: {
-        onMouseEnter: (that, idx) => {
-            that.props.formContext.services.customEvents.send(that.props.idSchema.$id, "startHighlight", { id: utils_1.getUUID(that.props.formData[idx]) });
-        },
-        onMouseLeave: (that, idx) => {
-            that.props.formContext.services.customEvents.send(that.props.idSchema.$id, "endHighlight", { id: utils_1.getUUID(that.props.formData[idx]) });
-        }
-    }
-};
-class AccordionHeader extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.onHeaderClick = () => {
-            const { that, idx, canHaveUndefinedIdx = true } = this.props;
-            const formatters = this.getFormatters();
-            if (!canHaveUndefinedIdx) {
-                return;
-            }
-            that.onActiveChange(idx);
-            formatters.forEach(formatter => { formatter.onClick && formatter.onClick(that, idx); });
-        };
-        this.onMouseEnter = () => {
-            this.getFormatters().forEach(formatter => {
-                formatter.onMouseEnter && formatter.onMouseEnter(this.props.that, this.props.idx);
-            });
-        };
-        this.onMouseLeave = () => {
-            this.getFormatters().forEach(formatter => {
-                formatter.onMouseLeave && formatter.onMouseLeave(this.props.that, this.props.idx);
-            });
-        };
-        this.getFormatters = () => {
-            const { that } = this.props;
-            const { uiSchema, schema } = that.props;
-            const formData = (that.props.formData || {})[this.props.idx];
-            // try both headerFormatters & headerFormatter for backward compatibility. TODO: Remove in future.
-            const options = utils_1.getUiOptions(uiSchema);
-            let _headerFormatters = options.headerFormatters || options.headerFormatter || [];
-            if (_headerFormatters && !Array.isArray(_headerFormatters))
-                _headerFormatters = [_headerFormatters];
-            if (options.headerFormatter) {
-                console.warn("laji-form warning: 'headerFormatter' is deprecated. Use 'headerFormatters' instead.");
-            }
-            return _headerFormatters.map(formatter => {
-                if (headerFormatters[formatter])
-                    return headerFormatters[formatter];
-                else
-                    return {
-                        component: () => {
-                            const { field, default: _default } = utils_1.isObject(formatter) ? formatter : { field: formatter };
-                            const formattedValue = utils_1.formatValue(Object.assign(Object.assign({}, that.props), { schema: utils_1.parseSchemaFromFormDataPointer(schema.items, field), uiSchema: utils_1.parseUiSchemaFromFormDataPointer(uiSchema.items, field), formData: utils_1.parseJSONPointer(formData, field, !!"safely") }));
-                            const value = utils_1.isEmptyString(formattedValue) ? _default : formattedValue;
-                            return React.createElement("span", { className: "text-muted" }, value);
-                        }
-                    };
-            });
-        };
-    }
-    render() {
-        const { that, idx } = this.props;
-        const title = utils_1.getTitle(that.props, idx);
-        const popupData = that.state.popups[idx];
-        const { uiSchema } = that.props;
-        const hasHelp = uiSchema && uiSchema["ui:help"];
-        const headerText = (React.createElement("span", null,
-            title,
-            this.getFormatters().map((formatter, i) => {
-                const { component: Formatter } = formatter;
-                return Formatter && (React.createElement("span", { key: i },
-                    " ",
-                    React.createElement(Formatter, { that: that, idx: idx }))) || null;
-            }),
-            hasHelp ? React.createElement(components_1.Help, null) : null));
-        const headerTextComponent = hasHelp ? React.createElement(components_1.TooltipComponent, { tooltip: uiSchema["ui:help"] }, headerText) : headerText;
-        const header = (React.createElement("div", { className: this.props.className, role: "tab", id: `${that.props.idSchema.$id}_${utils_1.getFormDataIndex(idx, that.props.uiSchema)}-header`, onClick: this.onHeaderClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave },
-            React.createElement("div", { className: this.props.wrapperClassName },
-                headerTextComponent,
-                this.props.children)));
-        const { OverlayTrigger, Tooltip } = this.context.theme;
-        return utils_1.hasData(popupData) ? (React.createElement(OverlayTrigger, { placement: "left", overlay: React.createElement(Tooltip, { id: "nav-tooltip-" + idx },
-                React.createElement(Popup, { data: popupData })) }, header)) : (header);
-    }
-}
-AccordionHeader.contextType = ReactContext_1.default;