@deviceinsight/ng-ui-basic-components 3.13.0-SNAPSHOT

package/lib/cjs/components/popup/Popup.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Modifier } from 'react-popper';
+export declare type PopupDirection = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
+export declare type Props = {
+    /** Element to toggle the Popup */
+    handler: React.ReactNode;
+    /** Content to be displayed */
+    children: React.ReactNode;
+    /** If true, displays the Popup's content */
+    active: boolean;
+    /** Function, executed when the Popup gets closed */
+    onHide: (event: MouseEvent) => void;
+    ignoredElements?: HTMLElement[];
+    /** (Optional) if set, sets the direction in which the content should be displayed */
+    direction?: PopupDirection;
+    /** (Optional) function, executed if the handler gets clicked */
+    onHandlerClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => any;
+    /** @ignore */
+    className?: string;
+    /** (Optional) https://popper.js.org/popper-documentation.html#modifiers..preventOverflow */
+    modifiers?: Modifier<any>[];
+    /** (Optional) If set to true, the content is hidden via styles, but still exists in the DOM tree */
+    preventDestroyContentOnHide?: boolean;
+    /** (Optional) Class name of the handler wrapping element */
+    handlerWrapperClassName?: string;
+};
+/**
+ * Popup displays content within a small modal.
+ * Its usage is highly flexible and used in several other components.
+ */
+export default class Popup extends React.Component<Props> {
+    container: HTMLDivElement | undefined;
+    referenceHandler: React.RefObject<HTMLSpanElement>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=Popup.d.ts.map

package/lib/cjs/components/popup/Popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../src/components/popup/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAU,QAAQ,EAAoB,MAAM,cAAc,CAAC;AAGlE,oBAAY,cAAc,GACvB,YAAY,GACZ,MAAM,GACN,UAAU,GACV,WAAW,GACX,KAAK,GACL,SAAS,GACT,aAAa,GACb,OAAO,GACP,WAAW,GACX,YAAY,GACZ,QAAQ,GACR,cAAc,GACd,UAAU,GACV,MAAM,GACN,YAAY,CAAC;AAEhB,oBAAY,KAAK,GAAG;IACnB,kCAAkC;IAClC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,8BAA8B;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4CAA4C;IAC5C,MAAM,EAAE,OAAO,CAAC;IAEhB,oDAAoD;IACpD,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAEpC,eAAe,CAAC,EAAE,WAAW,EAAE,CAAC;IAEhC,qFAAqF;IACrF,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,gEAAgE;IAChE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,KAAK,GAAG,CAAC;IAEvE,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;IAE5B,oGAAoG;IACpG,2BAA2B,CAAC,EAAE,OAAO,CAAC;IAEtC,4DAA4D;IAC5D,uBAAuB,CAAC,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACxD,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC;IACtC,gBAAgB,mCAAsC;IAEtD,iBAAiB;IASjB,oBAAoB;IAMpB,MAAM;CAwEN"}

package/lib/cjs/components/popup/Popup.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 });
+const React = __importStar(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const classnames_1 = __importDefault(require("classnames"));
+const react_popper_1 = require("react-popper");
+const PopupArea_1 = __importDefault(require("../popupComponents/PopupArea"));
+/**
+ * Popup displays content within a small modal.
+ * Its usage is highly flexible and used in several other components.
+ */
+class Popup extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.referenceHandler = React.createRef();
+    }
+    componentDidMount() {
+        const container = document.createElement('div');
+        if (document.body) {
+            document.body.appendChild(container);
+            this.container = container;
+        }
+    }
+    componentWillUnmount() {
+        if (document.body && this.container) {
+            document.body.removeChild(this.container);
+        }
+    }
+    render() {
+        const { handler, children, active, onHide, direction, className, onHandlerClick, modifiers, preventDestroyContentOnHide, handlerWrapperClassName, ...otherProps } = this.props;
+        const placement = direction ? direction : 'bottom';
+        return (React.createElement(react_popper_1.Manager, null,
+            React.createElement(react_popper_1.Reference, null, ({ ref }) => (React.createElement("span", { ref: ref, style: {
+                    display: 'inline-block'
+                }, className: handlerWrapperClassName },
+                React.createElement("span", { ref: this.referenceHandler, style: {
+                        display: 'inline-block',
+                        verticalAlign: 'bottom'
+                    }, onClick: onHandlerClick, className: handlerWrapperClassName }, handler)))),
+            (active || preventDestroyContentOnHide) &&
+                this.container &&
+                react_dom_1.default.createPortal(React.createElement(react_popper_1.Popper, { ...otherProps, placement: placement, modifiers: modifiers }, ({ ref, style, placement, arrowProps }) => {
+                    return (React.createElement("span", { className: (0, classnames_1.default)('di popup-wrapper', {
+                            hidden: preventDestroyContentOnHide && !active
+                        }) },
+                        React.createElement(PopupArea_1.default, { ...(this.props.ignoredElements
+                                ? { ignoredElements: this.props.ignoredElements }
+                                : {}), referenceHandler: this.referenceHandler.current, popupAreaHandler: ref, placement: placement, style: style, onHide: onHide, visible: active, arrowProps: arrowProps, className: className }, children)));
+                }), this.container)));
+    }
+}
+exports.default = Popup;

package/lib/cjs/components/popupComponents/PopupArea.d.ts

@@ -0,0 +1,18 @@
+import { PropsWithChildren, ReactNode, Ref } from 'react';
+import { PopperArrowProps } from 'react-popper';
+import { PopupDirection } from '../popup/Popup';
+declare type Props = {
+    referenceHandler: HTMLElement | null;
+    popupAreaHandler: Ref<any>;
+    ignoredElements?: HTMLElement[];
+    style: Record<string, any>;
+    children: ReactNode;
+    placement: PopupDirection;
+    onHide: (event: MouseEvent) => void;
+    visible: boolean;
+    arrowProps: PopperArrowProps;
+    className?: string;
+};
+export default function PopupArea({ popupAreaHandler, ignoredElements, style, placement, className, arrowProps, children, visible, onHide }: PropsWithChildren<Props>): JSX.Element;
+export {};
+//# sourceMappingURL=PopupArea.d.ts.map

package/lib/cjs/components/popupComponents/PopupArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupArea.d.ts","sourceRoot":"","sources":["../../../../src/components/popupComponents/PopupArea.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAW,MAAM,OAAO,CAAC;AACzE,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAG9C,aAAK,KAAK,GAAG;IACZ,gBAAgB,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,gBAAgB,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IAC3B,eAAe,CAAC,EAAE,WAAW,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,cAAc,CAAC;IAC1B,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EACjC,gBAAgB,EAChB,eAAoB,EACpB,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,OAAO,EACP,MAAM,EACN,EAAE,iBAAiB,CAAC,KAAK,CAAC,eAqB1B"}

package/lib/cjs/components/popupComponents/PopupArea.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 });
+const react_1 = __importStar(require("react"));
+const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
+function PopupArea({ popupAreaHandler, ignoredElements = [], style, placement, className, arrowProps, children, visible, onHide }) {
+    const [rootElement, setRootElement] = (0, react_1.useState)(null);
+    (0, useOutsideClick_1.default)([rootElement, ...ignoredElements], (event) => {
+        if (visible) {
+            onHide(event);
+        }
+    });
+    return (react_1.default.createElement("div", { ref: (div) => {
+            setRootElement(div);
+            if (typeof popupAreaHandler === 'function')
+                popupAreaHandler(div);
+        }, style: style, className: `di popup ${placement} ${className ? className : ''}` },
+        react_1.default.createElement("div", { className: `popup-arrow ${placement}`, ref: arrowProps.ref, style: arrowProps.style }),
+        react_1.default.createElement("div", { className: "popup-content" }, children)));
+}
+exports.default = PopupArea;

package/lib/cjs/components/spinner/Spinner.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare type Props = {
+    /** the size of the Spinner in px */
+    size?: number;
+    /** @ignore */
+    center?: boolean;
+    /** @ignore */
+    'data-testid'?: string;
+};
+/**
+ * Spinners usually show a loading indication.
+ */
+export default class Spinner extends React.Component<Props> {
+    static defaultProps: {
+        size: number;
+        center: boolean;
+    };
+    render(): JSX.Element;
+}
+//# sourceMappingURL=Spinner.d.ts.map

package/lib/cjs/components/spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,oBAAY,KAAK,GAAG;IACnB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,cAAc;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,cAAc;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IAC1D,MAAM,CAAC,YAAY;;;MAGjB;IAEF,MAAM;CAoBN"}

package/lib/cjs/components/spinner/Spinner.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+/**
+ * Spinners usually show a loading indication.
+ */
+class Spinner extends react_1.default.Component {
+    render() {
+        const { size = 56, center, ...dataAttrs } = this.props;
+        let style = {
+            width: size,
+            height: size
+        };
+        if (center) {
+            style = {
+                ...style,
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                marginTop: -size / 2,
+                marginLeft: -size / 2
+            };
+        }
+        return react_1.default.createElement("div", { className: "di spinner", style: style, ...dataAttrs });
+    }
+}
+exports.default = Spinner;
+Spinner.defaultProps = {
+    size: 56,
+    center: false
+};

package/lib/cjs/components/spinner/SpinnerContainer.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export declare type Props = {
+    /** controls the display of the Spinner */
+    show: boolean;
+    /** the size of the Spinner in px */
+    size?: number;
+    /** content to be rendered once the loading is done */
+    children?: React.ReactNode;
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    'data-testid'?: string;
+};
+/**
+ * SpinnerContainer wraps the entire content and displays a loading indicator until the loading is done.
+ */
+export default class SpinnerContainer extends React.Component<Props> {
+    static defaultProps: {
+        size: number;
+    };
+    render(): JSX.Element;
+}
+//# sourceMappingURL=SpinnerContainer.d.ts.map

package/lib/cjs/components/spinner/SpinnerContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/spinner/SpinnerContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,oBAAY,KAAK,GAAG;IACnB,0CAA0C;IAC1C,IAAI,EAAE,OAAO,CAAC;IAEd,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,sDAAsD;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,cAAc;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACnE,MAAM,CAAC,YAAY,EAAE;QACpB,IAAI,EAAE,MAAM,CAAC;KACb,CAEC;IAEF,MAAM;CAcN"}

package/lib/cjs/components/spinner/SpinnerContainer.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Spinner_1 = __importDefault(require("./Spinner"));
+/**
+ * SpinnerContainer wraps the entire content and displays a loading indicator until the loading is done.
+ */
+class SpinnerContainer extends react_1.default.Component {
+    render() {
+        const { show, size, children, className } = this.props;
+        const classNames = `di spinner-wrapper ${className ? className : ''}`;
+        return (react_1.default.createElement("div", { className: classNames },
+            react_1.default.createElement("div", { className: `di spinner-container ${show ? 'visible' : ''}`, "data-testid": this.props['data-testid'] },
+                react_1.default.createElement(Spinner_1.default, { size: size, center: true })),
+            children));
+    }
+}
+exports.default = SpinnerContainer;
+SpinnerContainer.defaultProps = {
+    size: 56
+};

package/lib/cjs/components/tabs/Tabs.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+declare type Page = {
+    name: string;
+    renderHeading: () => React.ReactNode;
+    renderBody?: () => React.ReactNode;
+    tabDescription?: string;
+};
+declare type State = {
+    currentTab: string | null | undefined;
+};
+export declare type Props = {
+    /** Array of pages to be displayed */
+    pages: Array<Page>;
+    /** (Optional) if set, disables tab */
+    disabled?: boolean;
+    /** (Optional) function, executed if tabs change */
+    onChange?: (tab: string) => void;
+    /** (Optional) sets the current tab */
+    currentTab?: string | null | undefined;
+};
+/**
+ * Tabs add the possibility to unite several homogeneous pages into one.
+ * Unlike RouteTabs, Tabs cannot be accessed directly via the browser's history
+ */
+export default class Tabs extends React.Component<Props, State> {
+    state: State;
+    handleClick: (tab: string) => void;
+    currentTabPage: () => Page | null | undefined;
+    isCurrentTab: (tab: string) => boolean;
+    renderBody: () => React.ReactNode;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

package/lib/cjs/components/tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,aAAK,IAAI,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACtC,CAAC;AAEF,oBAAY,KAAK,GAAG;IACnB,qCAAqC;IACrC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IAEnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACvC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAC9D,KAAK,EAAE,KAAK,CAEV;IAEF,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAQhC;IAEF,cAAc,EAAE,MAAM,IAAI,GAAG,IAAI,GAAG,SAAS,CAG3C;IAEF,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAGpC;IAEF,UAAU,wBAQR;IAEF,MAAM;CAkCN"}

package/lib/cjs/components/tabs/Tabs.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 });
+const React = __importStar(require("react"));
+const Bubble_1 = __importDefault(require("../bubble/Bubble"));
+/**
+ * Tabs add the possibility to unite several homogeneous pages into one.
+ * Unlike RouteTabs, Tabs cannot be accessed directly via the browser's history
+ */
+class Tabs extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            currentTab: this.props.pages.length ? this.props.pages[0].name : null
+        };
+        this.handleClick = (tab) => {
+            if (this.props.onChange) {
+                this.props.onChange(tab);
+            }
+            else if (typeof this.props.currentTab === 'undefined') {
+                this.setState({
+                    currentTab: tab
+                });
+            }
+        };
+        this.currentTabPage = () => {
+            const currentTab = typeof this.props.currentTab === 'string' ? this.props.currentTab : this.state.currentTab;
+            return this.props.pages.find(({ name }) => currentTab === name);
+        };
+        this.isCurrentTab = (tab) => {
+            const currentTab = typeof this.props.currentTab === 'string' ? this.props.currentTab : this.state.currentTab;
+            return currentTab === tab;
+        };
+        this.renderBody = () => {
+            const page = this.currentTabPage();
+            if (page && typeof page.renderBody === 'function') {
+                return page.renderBody();
+            }
+            return null;
+        };
+    }
+    render() {
+        const { pages, disabled } = this.props;
+        return (React.createElement("div", null,
+            React.createElement("div", { className: "di tabs" }, pages.map(({ name, renderHeading, tabDescription }) => tabDescription ? (React.createElement(Bubble_1.default, { inverted: true, key: name, content: tabDescription, className: "bubble-tab-description" },
+                React.createElement("button", { "data-testid": "tab-button", className: `item ${disabled ? 'disabled' : ''} ${this.isCurrentTab(name) ? 'active' : ''}`, onClick: () => !disabled && this.handleClick(name) }, renderHeading()))) : (React.createElement("button", { "data-testid": "tab-button", key: name, className: `item ${disabled ? 'disabled' : ''} ${this.isCurrentTab(name) ? 'active' : ''}`, onClick: () => !disabled && this.handleClick(name) }, renderHeading())))),
+            this.renderBody()));
+    }
+}
+exports.default = Tabs;

package/lib/cjs/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { PopupDirection } from '../popup/Popup';
+export declare type Props = {
+    /** Content of the Tooltip */
+    content: React.ReactNode;
+    /** Enabler of the Tooltip */
+    children: React.ReactNode;
+    /** @ignore */
+    className?: string;
+    /** (Optional) if set, disables the <Tooltip/> from opening */
+    disabled?: boolean;
+    /** (Optional) if set, opens <Tooltip/> in given direction, defaults to 'right' */
+    direction?: PopupDirection;
+};
+declare type State = {
+    active: boolean;
+};
+/**
+ * Tooltip is best used to display some short additional information or description
+ */
+export default class Tooltip extends React.Component<Props, State> {
+    state: State;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=Tooltip.d.ts.map

package/lib/cjs/components/tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAc,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAErD,oBAAY,KAAK,GAAG;IACnB,6BAA6B;IAC7B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,6BAA6B;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wFAAwF;IACxF,SAAS,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,aAAK,KAAK,GAAG;IACZ,MAAM,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACjE,KAAK,EAAE,KAAK,CAEV;IAEF,gBAAgB,EAAE,MAAM,IAAI,CAQ1B;IAEF,gBAAgB,EAAE,MAAM,IAAI,CAI1B;IAEF,MAAM;CAmBN"}

package/lib/cjs/components/tooltip/Tooltip.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Popup_1 = __importDefault(require("../popup/Popup"));
+/**
+ * Tooltip is best used to display some short additional information or description
+ */
+class Tooltip extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            active: false
+        };
+        this.handleMouseEnter = () => {
+            const { disabled } = this.props;
+            if (!disabled) {
+                this.setState({
+                    active: true
+                });
+            }
+        };
+        this.handleMouseLeave = () => {
+            this.setState({
+                active: false
+            });
+        };
+    }
+    render() {
+        const { content, children, className, direction, ...otherProps } = this.props;
+        const { active } = this.state;
+        return (react_1.default.createElement("span", { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave },
+            react_1.default.createElement(Popup_1.default, { ...otherProps, active: active, onHide: () => { }, handler: children, direction: direction ? direction : 'right', onHandlerClick: () => { }, className: `tooltip inverted ${className ? className : ''}` },
+                react_1.default.createElement("span", { className: "tooltip-content" }, content))));
+    }
+}
+exports.default = Tooltip;

package/lib/cjs/hooks/useOutsideClick.d.ts

@@ -0,0 +1,3 @@
+declare const useOutsideClick: (elements: Array<HTMLElement | null>, callback: (evt: MouseEvent | TouchEvent | undefined) => void) => void;
+export default useOutsideClick;
+//# sourceMappingURL=useOutsideClick.d.ts.map

package/lib/cjs/hooks/useOutsideClick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOutsideClick.d.ts","sourceRoot":"","sources":["../../../src/hooks/useOutsideClick.ts"],"names":[],"mappings":"AAqBA,QAAA,MAAM,eAAe,aACV,MAAM,WAAW,GAAG,IAAI,CAAC,kBACnB,UAAU,GAAG,UAAU,GAAG,SAAS,KAAK,IAAI,SA6B5D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/cjs/hooks/useOutsideClick.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const isTouchEvent = (event) => {
+    return !!event.touches;
+};
+const isInsideBoundingRect = (element, event) => {
+    const rect = element.getBoundingClientRect();
+    let x, y;
+    if (isTouchEvent(event)) {
+        x = event.touches[0].pageX;
+        y = event.touches[0].pageY;
+    }
+    else {
+        x = event.pageX;
+        y = event.pageY;
+    }
+    return rect.left <= x && rect.right >= x && rect.top <= y && rect.bottom >= y;
+};
+const useOutsideClick = (elements, callback) => {
+    const callbackRef = (0, react_1.useRef)(callback);
+    (0, react_1.useEffect)(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+    (0, react_1.useEffect)(() => {
+        const listener = (event) => {
+            const elementsNonNull = elements.filter((element) => element != null);
+            if (elementsNonNull.every((element) => element !== event.target &&
+                !element.contains(event.target) &&
+                !isInsideBoundingRect(element, event))) {
+                callbackRef.current(event);
+            }
+        };
+        document.addEventListener('mousedown', listener, true);
+        document.addEventListener('touchstart', listener, true);
+        return () => {
+            document.removeEventListener('mousedown', listener, true);
+            document.removeEventListener('touchstart', listener, true);
+        };
+    }, [elements]);
+};
+exports.default = useOutsideClick;

package/lib/cjs/index.d.ts

@@ -0,0 +1,22 @@
+import './assets/style.css';
+export { default as Accordion } from './components/accordion/Accordion';
+export { default as AccordionItem } from './components/accordionComponents/AccordionItem';
+export { default as Button } from './components/button/Button';
+export { default as ButtonRow } from './components/button/ButtonRow';
+export { default as Modal } from './components/modal/Modal';
+export { default as ModalContainer } from './components/modalComponents/ModalContainer';
+export { default as Spinner } from './components/spinner/Spinner';
+export { default as SpinnerContainer } from './components/spinner/SpinnerContainer';
+export { default as Checkbox } from './components/input/Checkbox';
+export { default as ConfirmProvider } from './components/confirm/ConfirmProvider';
+export { default as withConfirm } from './components/confirm/withConfirm';
+export { default as useConfirm } from './components/confirm/useConfirm';
+export { default as Icon } from './components/icon/Icon';
+export { default as Label } from './components/label/Label';
+export { default as Bubble } from './components/bubble/Bubble';
+export { default as Tooltip } from './components/tooltip/Tooltip';
+export { default as Tabs } from './components/tabs/Tabs';
+export { default as SearchBox } from './components/input/SearchBox';
+export { default as Popup } from './components/popup/Popup';
+export type { ConfirmProps } from './components/confirm/withConfirm';
+//# sourceMappingURL=index.d.ts.map

package/lib/cjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,gDAAgD,CAAC;AACxF,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,6CAA6C,CAAC;AACtF,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,uCAAuC,CAAC;AAClF,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAC,OAAO,IAAI,eAAe,EAAC,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAG1D,YAAY,EAAC,YAAY,EAAC,MAAM,kCAAkC,CAAC"}

package/lib/cjs/index.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popup = exports.SearchBox = exports.Tabs = exports.Tooltip = exports.Bubble = exports.Label = exports.Icon = exports.useConfirm = exports.withConfirm = exports.ConfirmProvider = exports.Checkbox = exports.SpinnerContainer = exports.Spinner = exports.ModalContainer = exports.Modal = exports.ButtonRow = exports.Button = exports.AccordionItem = exports.Accordion = void 0;
+require("./assets/style.css");
+// Components
+var Accordion_1 = require("./components/accordion/Accordion");
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return __importDefault(Accordion_1).default; } });
+var AccordionItem_1 = require("./components/accordionComponents/AccordionItem");
+Object.defineProperty(exports, "AccordionItem", { enumerable: true, get: function () { return __importDefault(AccordionItem_1).default; } });
+var Button_1 = require("./components/button/Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
+var ButtonRow_1 = require("./components/button/ButtonRow");
+Object.defineProperty(exports, "ButtonRow", { enumerable: true, get: function () { return __importDefault(ButtonRow_1).default; } });
+var Modal_1 = require("./components/modal/Modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(Modal_1).default; } });
+var ModalContainer_1 = require("./components/modalComponents/ModalContainer");
+Object.defineProperty(exports, "ModalContainer", { enumerable: true, get: function () { return __importDefault(ModalContainer_1).default; } });
+var Spinner_1 = require("./components/spinner/Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return __importDefault(Spinner_1).default; } });
+var SpinnerContainer_1 = require("./components/spinner/SpinnerContainer");
+Object.defineProperty(exports, "SpinnerContainer", { enumerable: true, get: function () { return __importDefault(SpinnerContainer_1).default; } });
+var Checkbox_1 = require("./components/input/Checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return __importDefault(Checkbox_1).default; } });
+var ConfirmProvider_1 = require("./components/confirm/ConfirmProvider");
+Object.defineProperty(exports, "ConfirmProvider", { enumerable: true, get: function () { return __importDefault(ConfirmProvider_1).default; } });
+var withConfirm_1 = require("./components/confirm/withConfirm");
+Object.defineProperty(exports, "withConfirm", { enumerable: true, get: function () { return __importDefault(withConfirm_1).default; } });
+var useConfirm_1 = require("./components/confirm/useConfirm");
+Object.defineProperty(exports, "useConfirm", { enumerable: true, get: function () { return __importDefault(useConfirm_1).default; } });
+var Icon_1 = require("./components/icon/Icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(Icon_1).default; } });
+var Label_1 = require("./components/label/Label");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return __importDefault(Label_1).default; } });
+var Bubble_1 = require("./components/bubble/Bubble");
+Object.defineProperty(exports, "Bubble", { enumerable: true, get: function () { return __importDefault(Bubble_1).default; } });
+var Tooltip_1 = require("./components/tooltip/Tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return __importDefault(Tooltip_1).default; } });
+var Tabs_1 = require("./components/tabs/Tabs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return __importDefault(Tabs_1).default; } });
+var SearchBox_1 = require("./components/input/SearchBox");
+Object.defineProperty(exports, "SearchBox", { enumerable: true, get: function () { return __importDefault(SearchBox_1).default; } });
+var Popup_1 = require("./components/popup/Popup");
+Object.defineProperty(exports, "Popup", { enumerable: true, get: function () { return __importDefault(Popup_1).default; } });

package/lib/cjs/types/i18n.d.ts

@@ -0,0 +1,5 @@
+export declare type TranslationDescriptor = {
+    id: string;
+    defaultValue: string;
+};
+//# sourceMappingURL=i18n.d.ts.map

package/lib/cjs/types/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/types/i18n.ts"],"names":[],"mappings":"AAAA,oBAAY,qBAAqB,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;CACrB,CAAC"}

package/lib/cjs/types/i18n.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });