@luomus/laji-form 15.1.4 → 15.1.6

package/lib/components/components.js

@@ -0,0 +1,606 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FailedBackgroundJobsPanel = exports.Fullscreen = exports.OverlayTrigger = exports.FetcherInput = exports.TooltipComponent = exports.ErrorPanel = exports.Label = exports.Help = exports.Stretch = exports.Affix = exports.GlyphButton = exports.AddButton = exports.DeleteButton = exports.Button = void 0;
+const React = require("react");
+const PropTypes = require("prop-types");
+const react_dom_1 = require("react-dom");
+const Spinner = require("react-spinner");
+const utils_1 = require("../utils");
+const ReactContext_1 = require("../ReactContext");
+class Button extends React.Component {
+    render() {
+        const _a = this.props, { tooltip, tooltipPlacement, tooltipTrigger, tooltipClass } = _a, _props = __rest(_a, ["tooltip", "tooltipPlacement", "tooltipTrigger", "tooltipClass"]);
+        const { Button: _Button } = this.context.theme;
+        return (React.createElement(TooltipComponent, { tooltip: tooltip, placement: tooltipPlacement, trigger: tooltipTrigger, className: tooltipClass },
+            React.createElement(_Button, Object.assign({}, _props), _props.children)));
+    }
+}
+exports.Button = Button;
+Button.contextType = ReactContext_1.default;
+class DeleteButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onButtonKeyDown = ({ key }) => {
+            if (key === "Enter")
+                this.onConfirmedClick();
+            else if (key === "Escape")
+                this.setState({ show: false });
+        };
+        this.onHideConfirm = () => {
+            this.setState({ show: false }, () => {
+                if (this.callback) {
+                    this.callback(this.deleted);
+                    this.callbackCalled = true;
+                }
+            });
+        };
+        this.onShowConfirm = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.setState({ show: true }, () => {
+                if (this.props.confirmStyle === "browser") {
+                    this.browserConfirm();
+                }
+            });
+        };
+        this.onConfirmedClick = (e) => {
+            e && e.preventDefault();
+            e && e.stopPropagation();
+            this.props.onClick();
+            this.onHideConfirm();
+            this.deleted = true;
+        };
+        this.onClick = (e, callback) => {
+            this.callback = callback;
+            this.props.confirm ? this.onShowConfirm(e) : this.onConfirmedClick(e);
+        };
+        this.componentWillUnmount = () => {
+            if (this.callback && !this.callbackCalled) {
+                this.callback(this.deleted);
+            }
+        };
+        this.setConfirmAutofocus = (elem) => {
+            setTimeout(() => {
+                const domElem = react_dom_1.findDOMNode(elem);
+                domElem && domElem.focus();
+            });
+        };
+        this.renderConfirm = () => {
+            const { show } = this.state;
+            if (!show) {
+                return null;
+            }
+            const { confirmStyle = "popup" } = this.props;
+            if (confirmStyle === "popup") {
+                return this.renderConfirmPopup();
+            }
+            return null;
+        };
+        this.getOverlayTarget = () => react_dom_1.findDOMNode(this.refs.del);
+        this.state = { show: false };
+    }
+    render() {
+        const { props } = this;
+        const { corner, tooltip, disabled, readonly, glyphButton = true, confirm, confirmPlacement, confirmStyle } = props, maybeProps = __rest(props, ["corner", "tooltip", "disabled", "readonly", "glyphButton", "confirm", "confirmPlacement", "confirmStyle"]); // eslint-disable-line @typescript-eslint/no-unused-vars
+        let buttonClassName = glyphButton ? "glyph-button" : "";
+        buttonClassName += corner ? " button-corner" : "";
+        if (props.className) {
+            buttonClassName = `${buttonClassName} ${props.className}`;
+        }
+        if (props.id !== undefined) {
+            maybeProps.id = `${props.id}-delete`;
+        }
+        const button = (React.createElement(React.Fragment, null,
+            React.createElement(Button, Object.assign({}, maybeProps, { disabled: disabled || readonly, variant: "danger", className: buttonClassName, style: this.props.style, ref: "del", onKeyDown: this.onButtonKeyDown, onClick: this.onClick }),
+                this.props.children,
+                " ",
+                "✖"),
+            this.renderConfirm()));
+        return tooltip ? React.createElement(TooltipComponent, { tooltip: tooltip }, button) : button;
+    }
+    renderConfirmPopup() {
+        const { translations, confirmPlacement = "left" } = this.props;
+        const { Overlay, Popover, ButtonGroup } = this.context.theme;
+        return (React.createElement(Overlay, { show: true, placement: confirmPlacement, rootClose: true, onHide: this.onHideConfirm, target: this.getOverlayTarget },
+            React.createElement(Popover, { id: `${this.props.id}-button-confirm` },
+                React.createElement("span", null, translations.ConfirmRemove),
+                React.createElement(ButtonGroup, null,
+                    React.createElement(Button, { variant: "danger", onClick: this.onConfirmedClick, ref: this.setConfirmAutofocus, id: `${this.props.id}-delete-confirm-yes` }, translations.Remove),
+                    React.createElement(Button, { variant: "default", onClick: this.onHideConfirm, id: `${this.props.id}-delete-confirm-no` }, translations.Cancel)))));
+    }
+    browserConfirm() {
+        const choice = confirm(this.props.translations.ConfirmRemove);
+        if (choice) {
+            this.onConfirmedClick();
+        }
+        else {
+            this.onHideConfirm();
+        }
+    }
+}
+exports.DeleteButton = DeleteButton;
+DeleteButton.contextType = ReactContext_1.default;
+DeleteButton.propTypes = {
+    confirm: PropTypes.bool,
+    onClick: PropTypes.func.isRequired,
+    translations: PropTypes.object.isRequired,
+    confirmStyle: PropTypes.oneOf(["popup", "browser"])
+};
+function AddButton({ onClick }) {
+    const { Row, Col } = React.useContext(ReactContext_1.default).theme;
+    return React.createElement(Row, null,
+        React.createElement(Col, { xs: 2 },
+            React.createElement(Button, { onClick: onClick }, "\u2795")));
+}
+exports.AddButton = AddButton;
+exports.GlyphButton = React.forwardRef((props, ref) => {
+    const { glyph } = props, buttonProps = __rest(props, ["glyph"]);
+    const { Glyphicon } = React.useContext(ReactContext_1.default).theme;
+    return (React.createElement(Button, Object.assign({}, buttonProps, { ref: ref, className: `glyph-button${props.className ? ` ${props.className}` : ""}`, tooltipPlacement: props.tooltipPlacement || "left" }),
+        React.createElement(Glyphicon, { glyph: glyph }),
+        props.children));
+});
+const TOP = "TOP", AFFIXED = "AFFIXED", BOTTOM = "BOTTOM";
+class Affix extends React.Component {
+    constructor(props) {
+        super(props);
+        this.getState = (props) => {
+            const { topOffset = 0, bottomOffset = 0, getContainer } = props;
+            const container = getContainer ? getContainer() : this.refs.container;
+            const wrapperElem = react_dom_1.findDOMNode(this.refs.wrapper);
+            if (!container || !document.body.contains(container) || !wrapperElem)
+                return;
+            const containerTop = container.getBoundingClientRect().top;
+            const containerHeight = container.offsetHeight;
+            const containerVisibleHeight = containerHeight + containerTop;
+            const wrapperHeight = wrapperElem.offsetHeight;
+            const wrapperScrollHeight = wrapperElem.scrollHeight;
+            const scrolled = this.refs.container.getBoundingClientRect().top < topOffset;
+            const viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+            const bottomDist = viewportHeight - container.getBoundingClientRect().top - containerHeight;
+            const bottomInvisibleHeight = Math.min(bottomDist, 0);
+            let affixState = TOP;
+            if (scrolled && containerVisibleHeight < wrapperScrollHeight + topOffset)
+                affixState = BOTTOM;
+            else if (scrolled)
+                affixState = AFFIXED;
+            const width = wrapperElem ? wrapperElem.offsetWidth : undefined;
+            const top = topOffset;
+            const affixHeight = affixState === BOTTOM
+                ? Math.max(containerVisibleHeight
+                    - topOffset
+                    + Math.min(bottomInvisibleHeight, 0)
+                    - (bottomDist < bottomOffset ? Math.min(bottomOffset - bottomDist, bottomOffset) : 0), 0)
+                : undefined;
+            const wrapperCutHeight = wrapperHeight - (affixHeight || 0);
+            let change;
+            if (affixState === BOTTOM) {
+                if (!this.state) {
+                    change = wrapperCutHeight;
+                }
+                else {
+                    if (this.state.affixState === BOTTOM) {
+                        const lastChange = this.state.change;
+                        const changeNow = wrapperCutHeight;
+                        change = lastChange + changeNow;
+                    }
+                    else {
+                        change = wrapperCutHeight;
+                    }
+                }
+            }
+            const fixerHeight = affixState === AFFIXED
+                ? wrapperHeight - (affixHeight || 0)
+                : affixState === BOTTOM
+                    ? affixHeight + change
+                    : 0;
+            return { affixState, width, top, affixHeight, fixerHeight, change };
+        };
+        this._onScroll = () => {
+            this.setState(this.getState(this.props));
+        };
+        this.onScroll = () => {
+            requestAnimationFrame(this._onScroll);
+        };
+        this._onResize = () => {
+            const positioner = react_dom_1.findDOMNode(this.refs.positioner);
+            const width = positioner.getBoundingClientRect().width;
+            const state = { width };
+            const _state = this.getState(this.props);
+            if (_state.affixState !== TOP)
+                state.top = _state.top;
+            this.setState(state);
+        };
+        this.onResize = () => {
+            requestAnimationFrame(this._onResize);
+        };
+        this.state = this.getState(props);
+    }
+    componentDidMount() {
+        window.addEventListener("scroll", this.onScroll);
+        window.addEventListener("resize", this.onResize);
+    }
+    componentWillUnmount() {
+        window.removeEventListener("scroll", this.onScroll);
+        window.removeEventListener("resize", this.onResize);
+    }
+    componentDidUpdate(prevProps, prevState) {
+        if (!this.props.onAffixChange || !prevState || !this.state)
+            return;
+        if (prevState.affixState !== AFFIXED && this.state.affixState === AFFIXED) {
+            this.props.onAffixChange(true);
+        }
+        else if (prevState.affixState === AFFIXED && this.state.affixState !== AFFIXED) {
+            this.props.onAffixChange(false);
+        }
+    }
+    render() {
+        const { children, style: containerStyle } = this.props;
+        const { top, width, affixState, affixHeight, fixerHeight } = this.state || {};
+        const style = {};
+        const fixerStyle = { position: "relative", zIndex: -1, height: fixerHeight };
+        style.position = "relative";
+        if (affixState === BOTTOM || affixState === AFFIXED) {
+            style.position = "fixed";
+            style.width = width;
+            style.top = top;
+            style.zIndex = 1000;
+            style.height = affixHeight;
+            if (affixState === BOTTOM) {
+                style.overflow = "hidden";
+            }
+        }
+        return (React.createElement("div", { style: containerStyle, ref: "container" },
+            React.createElement("div", { ref: "positioner" }),
+            React.createElement("div", { ref: "wrapper", style: style, className: this.props.className }, children),
+            React.createElement("div", { style: fixerStyle })));
+    }
+}
+exports.Affix = Affix;
+class Stretch extends React.Component {
+    constructor(props) {
+        super(props);
+        this._onScroll = () => {
+            let callback = undefined;
+            const state = this.getState();
+            if (!this.cameToViewFirstTime && state.height > this.props.enterViewPortTreshold || 0) {
+                this.cameToViewFirstTime = true;
+                if (this.props.onEnterViewPort)
+                    callback = () => this.props.onEnterViewPort();
+            }
+            this.update(state, callback);
+        };
+        this.onScroll = () => {
+            requestAnimationFrame(this._onScroll);
+        };
+        this.update = (state, callback) => {
+            const afterStateChange = () => {
+                if (this.props.onResize)
+                    this.props.onResize();
+                callback && callback();
+            };
+            state ? this.setState(state, () => {
+                afterStateChange();
+            }) : afterStateChange;
+        };
+        this.getState = () => {
+            const { getContainer, topOffset = 0, bottomOffset = 0, minHeight } = this.props;
+            let container = getContainer();
+            if (this.refs.wrapper &&
+                this.props.getContainer().getBoundingClientRect().top !== react_dom_1.findDOMNode(this.refs.wrapper).getBoundingClientRect().top) {
+                return {
+                    horizontallyAligned: false
+                };
+            }
+            let containerHeight = container.offsetHeight;
+            if (minHeight && containerHeight < minHeight) {
+                containerHeight = minHeight;
+                container = this.refs.wrapper;
+            }
+            const viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+            const bottomDist = viewportHeight - container.getBoundingClientRect().top - containerHeight;
+            const bottomInvisibleHeight = Math.min(bottomDist, 0);
+            return {
+                horizontallyAligned: true,
+                containerHeight,
+                height: Math.max(containerHeight
+                    + Math.min(container.getBoundingClientRect().top, 0)
+                    + Math.min(bottomInvisibleHeight, 0)
+                    - (container.getBoundingClientRect().top < topOffset ? Math.min(topOffset - container.getBoundingClientRect().top, topOffset) : 0)
+                    - (bottomDist < bottomOffset ? Math.min(bottomOffset - bottomDist, bottomOffset) : 0), 0),
+                top: Math.max(-container.getBoundingClientRect().top + topOffset, 0)
+            };
+        };
+        this.state = {};
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        if (props.mounted && !this.initialized) {
+            const state = this.getState();
+            this.update(state);
+            this.cameToViewFirstTime = state.height > this.props.enterViewPortTreshold || 0;
+            this.initialized = true;
+        }
+    }
+    componentDidMount() {
+        window.addEventListener("scroll", this.onScroll);
+        window.addEventListener("resize", this.onScroll);
+    }
+    componentWillUnmount() {
+        window.removeEventListener("scroll", this.onScroll);
+        window.removeEventListener("resize", this.onScroll);
+    }
+    render() {
+        const { children } = this.props;
+        const wrapperStyle = {
+            height: this.state.horizontallyAligned ? this.state.containerHeight : this.props.minHeight,
+        };
+        const style = {
+            position: "relative",
+            top: this.state.horizontallyAligned ? this.state.top : undefined,
+            height: this.state.horizontallyAligned ? this.state.height : "100%",
+        };
+        return (React.createElement("div", { ref: "wrapper", style: wrapperStyle, className: this.props.className },
+            React.createElement("div", { style: style }, children)));
+    }
+}
+exports.Stretch = Stretch;
+function Help({ help, id }) {
+    const helpGlyph = React.createElement("span", { className: "laji-form-help-glyph text-muted" });
+    const { Tooltip } = React.useContext(ReactContext_1.default).theme;
+    return help ? (React.createElement(OverlayTrigger, { placement: "right", overlay: React.createElement(Tooltip, { id: id },
+            React.createElement("span", { dangerouslySetInnerHTML: { __html: help } })) }, helpGlyph)) : helpGlyph;
+}
+exports.Help = Help;
+function Label({ label, children, id, required, registry = {}, uiSchema = {} }) {
+    const { "ui:help": help, "ui:helpHoverable": helpHoverable, "ui:helpPlacement": helpPlacement } = uiSchema;
+    const showHelp = label && help;
+    const { Tooltip } = React.useContext(ReactContext_1.default).theme;
+    const tooltipElem = (React.createElement(Tooltip, { id: id + "-tooltip" }, help ? (React.createElement("span", null,
+        React.createElement("strong", { dangerouslySetInnerHTML: { __html: label } }),
+        React.createElement("br", null),
+        React.createElement("span", { dangerouslySetInnerHTML: { __html: help } }))) : label));
+    const requiredHtml = required ? "<span class='text-danger'>*</span>" : "";
+    const labelElem = (React.createElement("label", { htmlFor: id },
+        React.createElement("div", null,
+            React.createElement("strong", { dangerouslySetInnerHTML: { __html: label + requiredHtml } }),
+            showHelp ? React.createElement(Help, null) : null),
+        children));
+    return (label || help) ? (React.createElement(OverlayTrigger, { placement: helpPlacement || "right", overlay: tooltipElem, hoverable: helpHoverable, formContext: registry.formContext }, labelElem)) : labelElem;
+}
+exports.Label = Label;
+class ErrorPanel extends React.Component {
+    constructor(props) {
+        super(props);
+        this.expand = () => {
+            if (!this.state.expanded)
+                this.setState({ expanded: true });
+        };
+        this.collapseToggle = () => this.setState({ expanded: !this.state.expanded });
+        this.state = { expanded: true };
+    }
+    render() {
+        const { errors, title, clickHandler, poppedToggle, showToggle, classNames, footer } = this.props;
+        if (errors.length === 0)
+            return null;
+        const { Panel, ListGroup } = this.context.theme;
+        return (React.createElement(Panel, { collapsible: "true", onToggle: this.collapseToggle, className: classNames },
+            React.createElement(Panel.Heading, null,
+                React.createElement("div", { className: "laji-form-clickable-panel-header", onClick: this.collapseToggle },
+                    React.createElement("div", { className: "panel-title" },
+                        title,
+                        React.createElement("span", { className: "pull-right" },
+                            React.createElement(exports.GlyphButton, { glyph: this.state.expanded ? "chevron-up" : "chevron-down", variant: "link" }),
+                            showToggle ? React.createElement(exports.GlyphButton, { glyph: "new-window", variant: "link", onClick: poppedToggle }) : null)))),
+            React.createElement(Panel.Collapse, { in: this.state.expanded },
+                React.createElement(ListGroup, null, errors.map((props, i) => React.createElement(ErrorPanelError, Object.assign({ key: i, clickHandler: clickHandler }, props))))),
+            footer
+                ? (React.createElement(Panel.Footer, null, footer))
+                : null));
+    }
+}
+exports.ErrorPanel = ErrorPanel;
+ErrorPanel.contextType = ReactContext_1.default;
+function ErrorPanelError({ label, error, id, getId, extra = null, disabled, clickHandler }) {
+    const message = error && error.message ? error.message : error;
+    const _clickHandler = React.useCallback(() => {
+        clickHandler(id || (getId ? getId() : undefined));
+    }, [clickHandler, id, getId]);
+    const { ListGroupItem } = React.useContext(ReactContext_1.default).theme;
+    return (React.createElement(ListGroupItem, { onClick: _clickHandler, disabled: disabled },
+        label ? React.createElement("b", null,
+            label,
+            ":") : null,
+        " ",
+        message,
+        " ",
+        extra));
+}
+// Tooltip component that doesn't show tooltip for empty/undefined tooltip.
+class TooltipComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onMouseOver = () => {
+            this.setState({ show: true });
+        };
+        this.onMouseOut = () => {
+            this.setState({ show: false });
+        };
+        this.state = { show: false };
+    }
+    render() {
+        const { tooltip, children, id, placement, trigger, className } = this.props;
+        const { OverlayTrigger, Tooltip } = this.context.theme;
+        const overlay = (tooltip ? (React.createElement(OverlayTrigger, { show: this.state.show, placement: placement, trigger: trigger === "hover" ? [] : trigger, key: `${id}-overlay`, overlay: React.createElement(Tooltip, { id: `${id}-tooltip`, className: `${className}` }, React.isValidElement(tooltip) ? tooltip : React.createElement("span", { dangerouslySetInnerHTML: { __html: tooltip } })) }, children)) : React.createElement(React.Fragment, null, children));
+        return (trigger === "hover") ? (React.createElement("div", { onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut }, overlay)) : overlay;
+    }
+}
+exports.TooltipComponent = TooltipComponent;
+TooltipComponent.contextType = ReactContext_1.default;
+exports.FetcherInput = React.forwardRef((props, ref) => {
+    const { loading, validationState, glyph, extra, onMouseOver, onMouseOut, className = "", InputComponent } = props, inputProps = __rest(props, ["loading", "validationState", "glyph", "extra", "onMouseOver", "onMouseOut", "className", "InputComponent"]); // eslint-disable-line @typescript-eslint/no-unused-vars
+    const { InputGroup, FormGroup } = React.useContext(ReactContext_1.default).theme;
+    const Input = InputComponent ? InputComponent : FetcherInputDefaultInput;
+    const _extra = (!Array.isArray(extra)) ? [extra] : extra;
+    const hasExtras = _extra.some(item => item !== null && item !== undefined);
+    const inputContent = React.createElement(React.Fragment, null,
+        hasExtras && React.createElement(InputGroup.Button, null, _extra),
+        React.createElement(Input, Object.assign({}, inputProps, { ref: ref })),
+        glyph,
+        loading && React.createElement(Spinner, null));
+    const content = hasExtras
+        ? (React.createElement(InputGroup, null, inputContent))
+        : inputContent;
+    return (React.createElement(FormGroup, { onMouseOver: onMouseOver, onMouseOut: onMouseOut, validationState: validationState, className: utils_1.classNames(className, "fetcher-input") }, content));
+});
+const FetcherInputDefaultInput = React.forwardRef((props, ref) => {
+    const { readonly } = props, inputProps = __rest(props, ["readonly"]);
+    const { FormControl } = React.useContext(ReactContext_1.default).theme;
+    return React.createElement(FormControl, Object.assign({ type: "text" }, inputProps, { readOnly: readonly, ref: ref }));
+});
+// OverlayTrigger that is hoverable if hoverable === true
+class OverlayTrigger extends React.Component {
+    constructor(props) {
+        super(props);
+        this.overlayTriggerMouseOver = () => {
+            this.overlayTriggerMouseIn = true;
+            this.setState({ show: true });
+        };
+        this.overlayTriggerMouseOut = () => {
+            this.overlayTriggerMouseIn = false;
+            if (this.overlayTimeout) {
+                clearTimeout(this.overlayTimeout);
+            }
+            this.overlayTimeout = this.props.formContext.setTimeout(() => {
+                if (!this.popoverMouseIn && !this.overlayTriggerMouseIn) {
+                    this.setState({ show: false });
+                }
+            }, 200);
+        };
+        this.overlayMouseOver = () => {
+            this.overlayMouseIn = true;
+        };
+        this.overlayMouseOut = () => {
+            this.overlayMouseIn = false;
+            if (this.overlayTimeout) {
+                clearTimeout(this.overlayTimeout);
+            }
+            this.overlayTimeout = this.props.formContext.setTimeout(() => {
+                if (!this.overlayMouseIn && !this.overlayTriggerMouseIn) {
+                    this.setState({ show: false });
+                }
+            }, 200);
+        };
+        this.state = { show: false };
+    }
+    componentWillUnmount() {
+        if (this.overlayTimeout) {
+            clearTimeout(this.overlayTimeout);
+        }
+    }
+    render() {
+        const _a = this.props, { children, overlay, contextId } = _a, //eslint-disable-line @typescript-eslint/no-unused-vars
+        props = __rest(_a, ["children", "overlay", "contextId"]);
+        const { OverlayTrigger } = this.context.theme;
+        if (!this.props.hoverable)
+            return (React.createElement(OverlayTrigger, Object.assign({}, props, { overlay: overlay }), children));
+        let _overlay = React.cloneElement(overlay, { onMouseOver: this.overlayMouseOver, onMouseOut: this.overlayMouseOut });
+        return (React.createElement("div", { onMouseOver: this.overlayTriggerMouseOver, onMouseOut: this.overlayTriggerMouseOut },
+            React.createElement(OverlayTrigger, Object.assign({}, props, { delay: 1, trigger: [], placement: this.props.placement || "top", overlay: _overlay, show: this.state.show }), children)));
+    }
+}
+exports.OverlayTrigger = OverlayTrigger;
+OverlayTrigger.contextType = ReactContext_1.default;
+class Fullscreen extends React.Component {
+    componentDidMount() {
+        this.bodyOverFlow = document.body.style.overflow;
+        if (this.props.onKeyDown) {
+            this._onKeyDown = true;
+            this.props.formContext.services.keyHandler.addGlobalEventHandler("keydown", this.props.onKeyDown);
+        }
+    }
+    componentWillUnmount() {
+        document.body.style.overflow = this.bodyOverFlow;
+        if (this._onKeyDown) {
+            this.props.formContext.services.keyHandler.removeGlobalEventHandler("keydown", this.props.onKeyDown);
+        }
+    }
+    render() {
+        return react_dom_1.createPortal((React.createElement("div", { className: "laji-form fullscreen" }, this.props.children)), document.body);
+    }
+}
+exports.Fullscreen = Fullscreen;
+class FailedBackgroundJobsPanel extends React.Component {
+    constructor(props) {
+        super(props);
+        this.dismissFailedJob = ({ id, hook, running }) => (e) => {
+            e.stopPropagation();
+            if (running)
+                return;
+            this.props.formContext.services.submitHooks.remove(id, hook);
+        };
+        this.retryFailedJob = ({ hook, running }) => (e) => {
+            e.stopPropagation();
+            if (running)
+                return;
+            hook();
+        };
+        this.poppedToggle = (e) => {
+            e.stopPropagation();
+            this.setState({ popped: !this.state.popped, poppedTouched: true });
+        };
+        this.state = { popped: true };
+    }
+    render() {
+        const { jobs = [], schema, uiSchema = {}, formContext: { translations } } = this.props;
+        if (!jobs.length)
+            return null;
+        const { Glyphicon } = this.context.theme;
+        const errors = jobs.reduce((_errors, error) => {
+            const { lajiFormId, relativePointer, e, running } = error;
+            if (!e) {
+                return _errors;
+            }
+            const getJsonPointer = () => this.props.formContext.services.ids.getJSONPointerFromLajiFormIdAndRelativePointer(lajiFormId, relativePointer);
+            const jsonPointer = getJsonPointer();
+            const label = utils_1.parseJSONPointer(uiSchema, `${utils_1.uiSchemaJSONPointer(uiSchema, jsonPointer)}/ui:title`, "safely")
+                || utils_1.parseJSONPointer(schema, `${utils_1.schemaJSONPointer(schema, jsonPointer)}/title`, "safely");
+            const retryButton = React.createElement("a", { key: "rety", className: "pull-right", disabled: running, onClick: this.retryFailedJob(error) },
+                React.createElement(Glyphicon, { className: running ? "rotating" : "", glyph: "refresh" }),
+                " ",
+                translations.Retry);
+            const dismissButton = React.createElement("a", { key: "dismiss", className: "pull-right", onClick: this.dismissFailedJob(error) },
+                React.createElement(Glyphicon, { glyph: "ok" }),
+                " ",
+                translations.Dismiss);
+            const getId = () => {
+                const jsonPointer = getJsonPointer();
+                return `root_${utils_1.JSONPointerToId(jsonPointer)}`;
+            };
+            const _error = { getId, error: e, extra: [dismissButton, retryButton], disabled: running };
+            if (label)
+                _error.label = label;
+            return [..._errors, _error];
+        }, []);
+        if (!errors.length)
+            return null;
+        const footer = (React.createElement(Button, { onClick: this.props.formContext.services.submitHooks.removeAll },
+            React.createElement(Glyphicon, { glyph: "ok" }),
+            " ",
+            `${translations.Dismiss} ${translations.all}`));
+        return (React.createElement("div", { className: `laji-form-error-list laji-form-failed-jobs-list${this.state.popped ? " laji-form-popped" : ""}`, style: this.state.popped ? { top: (this.props.formContext.topOffset || 0) + 5 } : null },
+            React.createElement(ErrorPanel, { title: translations.FailedBackgroundJobs, errors: errors, showToggle: true, poppedToggle: this.poppedToggle, clickHandler: this.props.errorClickHandler, classNames: "error-panel", footer: footer })));
+    }
+}
+exports.FailedBackgroundJobsPanel = FailedBackgroundJobsPanel;
+FailedBackgroundJobsPanel.contextType = ReactContext_1.default;

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

@@ -0,0 +1,34 @@
+export default class AnnotationField extends React.Component<any, any, any> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    static propTypes: {
+        uiSchema: PropTypes.Validator<PropTypes.InferProps<{
+            "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
+                adminOnly: PropTypes.Requireable<boolean>;
+                container: PropTypes.Requireable<string>;
+                add: PropTypes.Requireable<object>;
+                filter: PropTypes.Requireable<object>;
+                uiSchema: PropTypes.Requireable<object>;
+                buttonsPath: PropTypes.Requireable<string>;
+                formId: PropTypes.Requireable<string>;
+            }>>;
+            uiSchema: PropTypes.Requireable<object>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Validator<object>;
+    };
+    constructor(props: any);
+    getButton: () => {
+        glyph: string;
+        tooltip: any;
+        tooltipPlacement: string;
+        fn: () => () => void;
+        variant: string;
+    };
+    onClick: () => () => void;
+    onHide: () => void;
+    getAnnotations: () => any;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";