@luomus/laji-form 15.1.55 → 15.1.56

package/lib/components/components/ErrorPanel.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+export declare type PanelError = {
+    label: string;
+    error: Error | string;
+    id?: string;
+    getId: () => string;
+    extra: React.ReactNode[] | null;
+    disabled?: boolean;
+};
+declare type Props = {
+    errors: PanelError[];
+    title: string;
+    clickHandler: (id?: string) => void;
+    poppedToggle: React.MouseEventHandler;
+    showToggle?: boolean;
+    classNames?: string;
+    footer?: React.ReactNode;
+};
+declare type State = {
+    expanded: boolean;
+};
+export declare class ErrorPanel extends React.Component<Props, State> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    constructor(props: Props);
+    expand: () => void;
+    collapseToggle: () => void;
+    render(): JSX.Element | null;
+}
+export {};

package/lib/components/components/ErrorPanel.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorPanel = void 0;
+const React = __importStar(require("react"));
+const ReactContext_1 = __importDefault(require("../../ReactContext"));
+const components_1 = require("../components");
+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(components_1.GlyphButton, { glyph: this.state.expanded ? "chevron-up" : "chevron-down", variant: "link" }),
+                            showToggle ? React.createElement(components_1.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));
+}

package/lib/components/components/FailedBackgroundJobsPanel.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { FormContext } from "../LajiForm";
+import { FieldProps } from "../../types";
+import { SubmitHook } from "../../services/submit-hook-service";
+declare type Props = {
+    schema: FieldProps["schema"];
+    uiSchema: FieldProps["schema"];
+    formContext: FormContext;
+    jobs?: SubmitHook[];
+    errorClickHandler: (id?: string | undefined) => void;
+};
+declare type State = {
+    popped: boolean;
+    poppedTouched?: boolean;
+};
+export declare class FailedBackgroundJobsPanel extends React.Component<Props, State> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    constructor(props: Props);
+    dismissFailedJob: ({ hook, running }: SubmitHook) => (e: React.MouseEvent) => void;
+    retryFailedJob: ({ hook, running }: SubmitHook) => (e: React.MouseEvent) => void;
+    poppedToggle: (e: React.MouseEvent) => void;
+    render(): JSX.Element | null;
+}
+export {};

package/lib/components/components/FailedBackgroundJobsPanel.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FailedBackgroundJobsPanel = void 0;
+const React = __importStar(require("react"));
+const ReactContext_1 = __importDefault(require("../../ReactContext"));
+const components_1 = require("../components");
+const utils_1 = require("../../utils");
+class FailedBackgroundJobsPanel extends React.Component {
+    constructor(props) {
+        super(props);
+        this.dismissFailedJob = ({ hook, running }) => (e) => {
+            e.stopPropagation();
+            if (running)
+                return;
+            this.props.formContext.services.submitHooks.remove(undefined, 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`, true)
+                || utils_1.parseJSONPointer(schema, `${utils_1.schemaJSONPointer(schema, jsonPointer)}/title`, true);
+            const retryButton = React.createElement(components_1.Button, { key: "retry", className: "pull-right", variant: "link", small: true, disabled: running, onClick: this.retryFailedJob(error) },
+                React.createElement(Glyphicon, { className: running ? "rotating" : "", glyph: "refresh" }),
+                " ",
+                translations.Retry);
+            const dismissButton = React.createElement(components_1.Button, { key: "dismiss", className: "pull-right", variant: "link", small: true, 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,
+                label
+            };
+            return [..._errors, _error];
+        }, []);
+        if (!errors.length)
+            return null;
+        const footer = (React.createElement(components_1.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 } : undefined },
+            React.createElement(components_1.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/components/FetcherInput.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { ValidationState } from "../../themes/theme";
+declare type Props = {
+    loading?: boolean;
+    validationState?: ValidationState;
+    glyph?: React.ReactNode | null;
+    onMouseOver?: React.MouseEventHandler;
+    onMouseOut?: React.MouseEventHandler;
+    className?: string;
+    InputComponent?: React.ComponentType | null;
+    extra?: React.ReactNode | React.ReactNode[] | null;
+};
+export declare const FetcherInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+export {};

package/lib/components/components/FetcherInput.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FetcherInput = void 0;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const ReactContext_1 = __importDefault(require("../../ReactContext"));
+const utils_1 = require("../../utils");
+const react_spinner_1 = __importDefault(require("react-spinner"));
+exports.FetcherInput = react_1.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_1.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(react_spinner_1.default, 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_1.useContext(ReactContext_1.default).theme;
+    return React.createElement(FormControl, Object.assign({ type: "text" }, inputProps, { readOnly: readonly, ref: ref }));
+});

package/lib/components/components/Fullscreen.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { FormContext } from "../LajiForm";
+declare type Props = {
+    formContext: FormContext;
+    onKeyDown: React.KeyboardEventHandler;
+};
+export declare class Fullscreen extends React.Component<Props> {
+    bodyOverFlow: string;
+    _onKeyDown?: boolean;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.ReactPortal;
+}
+export {};

package/lib/components/components/Fullscreen.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fullscreen = void 0;
+const React = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+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;

package/lib/components/components/GlyphButton.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { Glyph } from "../../themes/theme";
+export declare const GlyphButton: React.ForwardRefExoticComponent<Pick<import("../../themes/theme").ButtonProps & {
+    tooltip?: string | undefined;
+    tooltipPlacement?: string | undefined;
+    tooltipTrigger?: string | undefined;
+    tooltipClass?: string | undefined;
+} & {
+    glyph: Glyph;
+}, "small" | "active" | "style" | "disabled" | "block" | "tooltip" | "children" | "key" | "id" | "className" | "onKeyDown" | "onClick" | "tooltipPlacement" | "tooltipTrigger" | "tooltipClass" | "variant" | "glyph"> & React.RefAttributes<unknown>>;

package/lib/components/components/GlyphButton.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlyphButton = void 0;
+const React = __importStar(require("react"));
+const ReactContext_1 = __importDefault(require("../../ReactContext"));
+const components_1 = require("../components");
+exports.GlyphButton = React.forwardRef((props, ref) => {
+    const { glyph } = props, buttonProps = __rest(props, ["glyph"]);
+    const { Glyphicon } = React.useContext(ReactContext_1.default).theme;
+    return (React.createElement(components_1.Button, Object.assign({}, buttonProps, { ref: ref, className: `glyph-button${props.className ? ` ${props.className}` : ""}`, tooltipPlacement: props.tooltipPlacement || "left" }),
+        React.createElement(Glyphicon, { glyph: glyph }),
+        props.children));
+});

package/lib/components/components/Help.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+declare type Props = {
+    help?: string;
+    id: string;
+    focusable?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    className?: string;
+    onClick?: React.MouseEventHandler;
+    standalone?: boolean;
+};
+/**
+ * @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
+ */
+export declare function Help({ help, id, focusable, onFocus, onBlur, className, onClick, standalone }: Props): JSX.Element;
+export {};

package/lib/components/components/Help.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Help = void 0;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const ReactContext_1 = __importDefault(require("../../ReactContext"));
+const utils_1 = require("../../utils");
+const components_1 = require("../components");
+/**
+ * @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_1.useContext(ReactContext_1.default).theme;
+    const [focused, setFocused] = React.useState(false);
+    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(components_1.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;

package/lib/components/components/Label.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { FieldProps } from "../../types";
+declare type Props = {
+    label: string;
+    children: React.ReactNode;
+    id: string;
+    required?: boolean;
+    registry?: FieldProps["registry"] | Record<string, never>;
+    uiSchema?: any;
+};
+export declare function Label({ label, children, id, required, registry, uiSchema }: Props): JSX.Element;
+export {};

package/lib/components/components/Label.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const ReactContext_1 = __importDefault(require("../../ReactContext"));
+const components_1 = require("../components");
+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_1.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(false);
+    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(components_1.Help, { focusable: true, onFocus: onHelpFocus, onBlur: onHelpBlur, onClick: onHelpClick, id: id }) : null),
+        children));
+    return help ? React.createElement(React.Fragment, null,
+        React.createElement(components_1.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;

package/lib/components/components/OverlayTrigger.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { OverlayTriggerProps } from "../../themes/theme";
+import { FormContext } from "../LajiForm";
+declare type IsHoverableProps = {
+    hoverable: true;
+    formContext: FormContext;
+};
+declare type IsNotHoverableProps = {
+    hoverable?: false;
+    formContext?: FormContext;
+};
+declare type Props = OverlayTriggerProps & (IsHoverableProps | IsNotHoverableProps) & {
+    style?: React.CSSProperties;
+};
+declare type State = {
+    hoveringElem?: boolean;
+    hoveringOverlay?: boolean;
+};
+/**
+ * OverlayTrigger that is hoverable if `hoverable: true`
+ *
+ * If you pass `hoverable: true`, you must also pass `formContext`.
+ */
+export declare class OverlayTrigger extends React.Component<Props, State> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    overlayTimeout?: ReturnType<FormContext["setTimeout"]>;
+    popoverMouseIn?: boolean;
+    constructor(props: Props);
+    componentWillUnmount(): void;
+    overlayTriggerMouseOver: () => void;
+    overlayTriggerMouseOut: () => void;
+    overlayMouseOver: () => void;
+    overlayMouseOut: () => void;
+    render(): JSX.Element;
+}
+export {};