@luomus/laji-form 15.1.55 → 15.1.56

package/lib/components/components.js

@@ -1,633 +0,0 @@
-"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;
-/**
- * @param standalone If provided, the help icon will handle **accessibility** itself.
- * If not provided, the parent element must take care of showing the tooltip.
- *
- * **accessibility** means that it handles showing the tooltip on focus & hover, and
- */
-function Help({ help, id, focusable = false, onFocus, onBlur, className, onClick, standalone }) {
-    const { Tooltip } = React.useContext(ReactContext_1.default).theme;
-    const [focused, setFocused] = React.useState(undefined);
-    const onHelpFocus = React.useCallback(() => {
-        setFocused(true);
-    }, []);
-    const onHelpBlur = React.useCallback(() => {
-        setFocused(false);
-    }, []);
-    const helpGlyph = React.createElement("span", { className: utils_1.classNames("laji-form-help-glyph", "text-muted", className), tabIndex: focusable ? 0 : -1, onFocus: standalone ? onHelpFocus : onFocus, onBlur: standalone ? onHelpBlur : onBlur, onClick: onClick });
-    const tooltip = React.createElement(Tooltip, { id: id },
-        React.createElement("span", { dangerouslySetInnerHTML: { __html: help } }));
-    return help ? (React.createElement(OverlayTrigger, { placement: "right", overlay: tooltip, show: standalone && focused || undefined },
-        React.createElement(React.Fragment, null,
-            helpGlyph,
-            standalone && React.createElement("div", { id: `${id}--help`, style: { display: "none" } }, help)))) : helpGlyph;
-}
-exports.Help = Help;
-function Label({ label, children, id, required, registry = {}, uiSchema = {} }) {
-    const { "ui:help": help, "ui:helpHoverable": helpHoverable, "ui:helpPlacement": helpPlacement, labelComponent } = 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 [focused, setFocused] = React.useState(undefined);
-    const onHelpFocus = React.useCallback(() => {
-        setFocused(true);
-    }, []);
-    const onHelpBlur = React.useCallback(() => {
-        setFocused(false);
-    }, []);
-    const onHelpClick = React.useCallback((e) => {
-        e.preventDefault();
-    }, []);
-    const LabelComponent = labelComponent || "label";
-    const labelElem = (React.createElement(LabelComponent, { htmlFor: id, "aria-describedby": `${id}--help` },
-        React.createElement("div", { style: { whiteSpace: "normal" } },
-            React.createElement("span", { dangerouslySetInnerHTML: { __html: label + requiredHtml } }),
-            showHelp ? React.createElement(Help, { focusable: true, onFocus: onHelpFocus, onBlur: onHelpBlur, onClick: onHelpClick, id: id }) : null),
-        children));
-    return help ? React.createElement(React.Fragment, null,
-        React.createElement(OverlayTrigger, { placement: helpPlacement || "right", overlay: tooltipElem, hoverable: helpHoverable, formContext: registry.formContext, show: focused || undefined, style: { display: "inline-block" } }, labelElem),
-        React.createElement("div", { id: `${id}--help`, style: { display: "none" } }, help)) : 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.setState({ hoveringElem: true });
-        };
-        this.overlayTriggerMouseOut = () => {
-            if (this.overlayTimeout) {
-                clearTimeout(this.overlayTimeout);
-            }
-            if (this.props.hoverable) {
-                this.overlayTimeout = this.props.formContext.setTimeout(() => {
-                    if (!this.popoverMouseIn && !this.overlayTriggerMouseIn) {
-                        this.setState({ hoveringElem: false });
-                    }
-                }, 200);
-            }
-            else {
-                this.setState({ hoveringElem: false });
-            }
-        };
-        this.overlayMouseOver = () => {
-            this.setState({ hoveringOverlay: true });
-        };
-        this.overlayMouseOut = () => {
-            this.setState({ hoveringOverlay: false, hoveringElem: false });
-        };
-        this.state = {};
-    }
-    componentWillUnmount() {
-        if (this.overlayTimeout) {
-            clearTimeout(this.overlayTimeout);
-        }
-    }
-    render() {
-        const _a = this.props, { children, overlay, contextId, //eslint-disable-line @typescript-eslint/no-unused-vars
-        style } = _a, props = __rest(_a, ["children", "overlay", "contextId", "style"]);
-        const { OverlayTrigger } = this.context.theme;
-        let _overlay = React.cloneElement(overlay, { onMouseOver: this.overlayMouseOver, onMouseOut: this.overlayMouseOut });
-        const show = this.props.show !== undefined
-            ? this.props.show
-            : this.state.hoveringElem || this.props.hoverable && this.state.hoveringOverlay;
-        return (React.createElement("div", { onMouseOver: this.overlayTriggerMouseOver, onMouseOut: this.overlayTriggerMouseOut, style: style },
-            React.createElement(OverlayTrigger, Object.assign({}, props, { delay: 1, trigger: [], placement: this.props.placement || "top", overlay: _overlay, show: 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;