@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.20

package/components/collapse/Collapse.js

@@ -1,148 +1,148 @@
-import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import css from 'dom-helpers/css';
-import classNames from 'classnames';
-import Transition, { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
-const collapseStyles = {
-    [EXITED]: 'collapse',
-    [EXITING]: 'collapsing',
-    [ENTERING]: 'collapsing',
-    [ENTERED]: 'collapse in',
-};
-const MARGINS = {
-    height: ['marginTop', 'marginBottom'],
-};
-const INITIAL_HEIGHT = '0';
-export default class Collapse extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {};
-        this.handleEnter = this.handleEnter.bind(this);
-        this.handleEntering = this.handleEntering.bind(this);
-        this.handleEntered = this.handleEntered.bind(this);
-        this.handleExit = this.handleExit.bind(this);
-        this.handleExiting = this.handleExiting.bind(this);
-        this.handleExited = this.handleExited.bind(this);
-    }
-    componentDidMount() {
-        if (!this.props.in) {
-            // When the component is collapsed on mount, set initial height to 0
-            this.setState(() => ({
-                transitionState: EXITED,
-                height: INITIAL_HEIGHT,
-            }));
-        }
-        else {
-            // When the component is expanded on mount, set initial height to 'auto'
-            this.setState(() => ({
-                transitionState: ENTERED,
-                height: 'auto',
-            }));
-        }
-    }
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        // As the height is set to "auto" in the final opening step, we need to
-        // set the height before we start the closing animation as "height: auto" cannot be animated
-        if (this.props.in && !nextProps.in) {
-            this.setState({
-                height: this.getFullHeight(ReactDOM.findDOMNode(this)),
-            });
-        }
-    }
-    getFullHeight(element) {
-        const value = element.offsetHeight;
-        const margins = MARGINS['height'];
-        if (!value) {
-            return INITIAL_HEIGHT;
-        }
-        const fullHeight = value + parseInt(css(element, margins[0]), 10) + parseInt(css(element, margins[1]), 10);
-        return fullHeight;
-    }
-    /* -- Expanding -- */
-    handleEnter() {
-        this.setState(() => ({
-            transitionState: ENTERED,
-            height: INITIAL_HEIGHT,
-        }), this.props.onEnter());
-    }
-    handleEntering(element) {
-        this.setState(() => ({
-            transitionState: ENTERING,
-            height: element.scrollHeight,
-        }), this.props.onEntering());
-    }
-    handleEntered() {
-        this.setState(() => ({
-            transitionState: ENTERED,
-            height: 'auto',
-        }), this.props.onEntered());
-    }
-    /* -- Collapsing -- */
-    handleExit(element) {
-        this.setState(() => ({
-            transitionState: EXITING,
-            height: this.getFullHeight(element),
-        }), this.props.onExit());
-    }
-    handleExiting() {
-        this.setState(() => ({
-            transitionState: EXITING,
-            height: INITIAL_HEIGHT,
-        }), this.props.onExiting());
-    }
-    handleExited() {
-        this.setState(() => ({
-            transitionState: EXITED,
-            height: INITIAL_HEIGHT,
-        }), this.props.onExited());
-    }
-    render() {
-        const _a = this.props, { children } = _a, props = __rest(_a, ["children"]);
-        return (_jsx(Transition, Object.assign({ ref: node => (this.refTransition = node) }, props, { onEnter: this.handleEnter, onEntering: this.handleEntering, onEntered: this.handleEntered, onExit: this.handleExit, onExiting: this.handleExiting, onExited: this.handleExited }, { children: React.cloneElement(children, {
-                style: { height: this.state.height },
-                className: classNames(children.props.className, collapseStyles[this.state.transitionState]),
-            }) })));
-    }
-}
-Collapse.defaultProps = {
-    in: false,
-    timeout: 300,
-    mountOnEnter: false,
-    unmountOnExit: false,
-    appear: false,
-    onEnter: () => { },
-    onEntering: () => { },
-    onEntered: () => { },
-    onExit: () => { },
-    onExiting: () => { },
-    onExited: () => { },
-};
-Collapse.propTypes = {
-    // Show the component; triggers the expand or collapse animation
-    in: PropTypes.bool.isRequired,
-    // Wait until the first "enter" transition to mount the component (add it to the DOM)
-    mountOnEnter: PropTypes.bool,
-    // Unmount the component (remove it from the DOM) when it is collapsed
-    unmountOnExit: PropTypes.bool,
-    // Run the expand animation when the component mounts, if it is initially shown
-    appear: PropTypes.bool,
-    // Duration of the collapse animation in milliseconds, to ensure that finishing callbacks
-    // are fired even if the original browser transition end events are canceled
-    timeout: PropTypes.number,
-    // Callback fired before the component expands
-    onEnter: PropTypes.func,
-    // Callback fired after the component starts to expand
-    onEntering: PropTypes.func,
-    // Callback fired after the component has expanded
-    onEntered: PropTypes.func,
-    // Callback fired before the component collapses
-    onExit: PropTypes.func,
-    // Callback fired after the component starts to collapse
-    onExiting: PropTypes.func,
-    // Callback fired after the component has collapsed
-    onExited: PropTypes.func,
-};
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import css from 'dom-helpers/css';
+import classNames from 'classnames';
+import Transition, { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
+const collapseStyles = {
+    [EXITED]: 'collapse',
+    [EXITING]: 'collapsing',
+    [ENTERING]: 'collapsing',
+    [ENTERED]: 'collapse in',
+};
+const MARGINS = {
+    height: ['marginTop', 'marginBottom'],
+};
+const INITIAL_HEIGHT = '0';
+export default class Collapse extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {};
+        this.handleEnter = this.handleEnter.bind(this);
+        this.handleEntering = this.handleEntering.bind(this);
+        this.handleEntered = this.handleEntered.bind(this);
+        this.handleExit = this.handleExit.bind(this);
+        this.handleExiting = this.handleExiting.bind(this);
+        this.handleExited = this.handleExited.bind(this);
+    }
+    componentDidMount() {
+        if (!this.props.in) {
+            // When the component is collapsed on mount, set initial height to 0
+            this.setState(() => ({
+                transitionState: EXITED,
+                height: INITIAL_HEIGHT,
+            }));
+        }
+        else {
+            // When the component is expanded on mount, set initial height to 'auto'
+            this.setState(() => ({
+                transitionState: ENTERED,
+                height: 'auto',
+            }));
+        }
+    }
+    // eslint-disable-next-line camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        // As the height is set to "auto" in the final opening step, we need to
+        // set the height before we start the closing animation as "height: auto" cannot be animated
+        if (this.props.in && !nextProps.in) {
+            this.setState({
+                height: this.getFullHeight(ReactDOM.findDOMNode(this)),
+            });
+        }
+    }
+    getFullHeight(element) {
+        const value = element.offsetHeight;
+        const margins = MARGINS['height'];
+        if (!value) {
+            return INITIAL_HEIGHT;
+        }
+        const fullHeight = value + parseInt(css(element, margins[0]), 10) + parseInt(css(element, margins[1]), 10);
+        return fullHeight;
+    }
+    /* -- Expanding -- */
+    handleEnter() {
+        this.setState(() => ({
+            transitionState: ENTERED,
+            height: INITIAL_HEIGHT,
+        }), this.props.onEnter());
+    }
+    handleEntering(element) {
+        this.setState(() => ({
+            transitionState: ENTERING,
+            height: element.scrollHeight,
+        }), this.props.onEntering());
+    }
+    handleEntered() {
+        this.setState(() => ({
+            transitionState: ENTERED,
+            height: 'auto',
+        }), this.props.onEntered());
+    }
+    /* -- Collapsing -- */
+    handleExit(element) {
+        this.setState(() => ({
+            transitionState: EXITING,
+            height: this.getFullHeight(element),
+        }), this.props.onExit());
+    }
+    handleExiting() {
+        this.setState(() => ({
+            transitionState: EXITING,
+            height: INITIAL_HEIGHT,
+        }), this.props.onExiting());
+    }
+    handleExited() {
+        this.setState(() => ({
+            transitionState: EXITED,
+            height: INITIAL_HEIGHT,
+        }), this.props.onExited());
+    }
+    render() {
+        const _a = this.props, { children } = _a, props = __rest(_a, ["children"]);
+        return (_jsx(Transition, Object.assign({ ref: node => (this.refTransition = node) }, props, { onEnter: this.handleEnter, onEntering: this.handleEntering, onEntered: this.handleEntered, onExit: this.handleExit, onExiting: this.handleExiting, onExited: this.handleExited }, { children: React.cloneElement(children, {
+                style: { height: this.state.height },
+                className: classNames(children.props.className, collapseStyles[this.state.transitionState]),
+            }) })));
+    }
+}
+Collapse.defaultProps = {
+    in: false,
+    timeout: 300,
+    mountOnEnter: false,
+    unmountOnExit: false,
+    appear: false,
+    onEnter: () => { },
+    onEntering: () => { },
+    onEntered: () => { },
+    onExit: () => { },
+    onExiting: () => { },
+    onExited: () => { },
+};
+Collapse.propTypes = {
+    // Show the component; triggers the expand or collapse animation
+    in: PropTypes.bool.isRequired,
+    // Wait until the first "enter" transition to mount the component (add it to the DOM)
+    mountOnEnter: PropTypes.bool,
+    // Unmount the component (remove it from the DOM) when it is collapsed
+    unmountOnExit: PropTypes.bool,
+    // Run the expand animation when the component mounts, if it is initially shown
+    appear: PropTypes.bool,
+    // Duration of the collapse animation in milliseconds, to ensure that finishing callbacks
+    // are fired even if the original browser transition end events are canceled
+    timeout: PropTypes.number,
+    // Callback fired before the component expands
+    onEnter: PropTypes.func,
+    // Callback fired after the component starts to expand
+    onEntering: PropTypes.func,
+    // Callback fired after the component has expanded
+    onEntered: PropTypes.func,
+    // Callback fired before the component collapses
+    onExit: PropTypes.func,
+    // Callback fired after the component starts to collapse
+    onExiting: PropTypes.func,
+    // Callback fired after the component has collapsed
+    onExited: PropTypes.func,
+};

package/components/contentLoader/ContentLoader.d.ts

@@ -1,33 +1,55 @@
-export default ContentLoader;
-declare function ContentLoader(props: any): JSX.Element;
-declare namespace ContentLoader {
-    const RECT: string;
-    const CIRCLE: string;
-    namespace defaultProps {
-        const speed: number;
-        const height: number;
-        const width: string;
-        const radius: number;
-        const type: string;
-        const className: string;
-        const title: string;
-    }
-    namespace propTypes {
-        const speed_1: PropTypes.Requireable<number>;
-        export { speed_1 as speed };
-        const height_1: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        export { height_1 as height };
-        const width_1: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        export { width_1 as width };
-        const type_1: PropTypes.Requireable<string>;
-        export { type_1 as type };
-        const radius_1: PropTypes.Requireable<number>;
-        export { radius_1 as radius };
-        const title_1: PropTypes.Requireable<string>;
-        export { title_1 as title };
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        export const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    }
-}
-import PropTypes from "prop-types";
+import { type PropsWithChildren } from 'react';
+declare const RECT = "rect";
+declare const CIRCLE = "circle";
+export type ContentLoaderProps = {
+    /**
+     * Sets the animation speed.
+     * @default 2
+     */
+    speed?: number;
+    /**
+     * Sets the height of the svg element.
+     * @default 14
+     */
+    height?: string | number;
+    /**
+     * Sets the width of the svg element.
+     * @default 100%
+     */
+    width?: string | number;
+    /**
+     * Sets the radius of the svg element. Only relevant for circle elements.
+     * @default 16
+     */
+    radius?: number;
+    /**
+     * Renders either a rectangle or circle.
+     *
+     * Possible values are:
+     * `ContentLoader.RECT`, `ContentLoader.CIRCLE` or `rect`, `circle`
+     */
+    type?: typeof RECT | typeof CIRCLE;
+    /**
+     * Additional class names to ab added to the wrapping svg element.
+     */
+    className?: string;
+    /** Rect object prop. Used internally. */
+    rx?: number;
+    /** Rect object prop. Used internally. */
+    ry?: number;
+};
+type ContentLoaderPropsWithChildren = PropsWithChildren<ContentLoaderProps>;
+/**
+ * This UIKIT component is simple wrapper to make it easier to use with a predefined look and feel. It still
+ * allows for more complex configurations as all additional props are passed down to the third-party
+ * ContentLoader component. For individual customization, it allows passing svg components as rect or circle
+ * directly as children.
+ * @param props
+ * @returns
+ */
+declare const ContentLoader: {
+    (props: ContentLoaderPropsWithChildren): import("react/jsx-runtime").JSX.Element;
+    RECT: "rect";
+    CIRCLE: "circle";
+};
+export default ContentLoader;

package/components/contentLoader/ContentLoader.js

@@ -1,47 +1,52 @@
-import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable no-use-before-define */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { default as _ContentLoader } from 'react-content-loader';
-import cond from 'lodash/fp/cond';
-import isNil from 'lodash/fp/isNil';
-const hasChildren = ({ children }) => !isNil(children);
-const renderChildren = ({ children }) => children;
-const isRect = ({ type }) => type === ContentLoader.RECT;
-const isCircle = ({ type }) => type === ContentLoader.CIRCLE;
-const renderRect = ({ rx = 3, ry = 3 }) => _jsx("rect", { width: '100%', height: '100%', rx: rx, ry: ry });
-const renderCircle = ({ radius }) => _jsx("circle", { cx: radius, cy: radius, r: radius });
-const ContentLoader = props => {
-    const { width, height, radius, className } = props, remainingProps = __rest(props, ["width", "height", "radius", "className"]);
-    const content = cond([
-        [hasChildren, renderChildren],
-        [isRect, renderRect],
-        [isCircle, renderCircle],
-    ])(props);
-    const wrapperHeight = isCircle(props) ? radius * 2 : height;
-    const wrapperWidth = isCircle(props) ? radius * 2 : width;
-    return (_jsx(_ContentLoader, Object.assign({ className: `ContentLoader ${className}`, height: wrapperHeight, width: wrapperWidth }, remainingProps, { children: content })));
-};
-ContentLoader.RECT = 'rect';
-ContentLoader.CIRCLE = 'circle';
-ContentLoader.defaultProps = {
-    speed: 2,
-    height: 14,
-    width: '100%',
-    radius: 16,
-    type: 'rect',
-    className: '',
-    title: '',
-};
-ContentLoader.propTypes = {
-    speed: PropTypes.number,
-    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    type: PropTypes.oneOf(['rect', 'circle', ContentLoader.RECT, ContentLoader.CIRCLE]),
-    radius: PropTypes.number,
-    title: PropTypes.string,
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
-export default ContentLoader;
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import { default as _ContentLoader } from 'react-content-loader';
+import cond from 'lodash/fp/cond';
+import isNil from 'lodash/fp/isNil';
+import useDarkMode from '../../hooks/useDarkMode';
+const RECT = 'rect';
+const CIRCLE = 'circle';
+const DEFAULT_SPEED = 2;
+const DEFAULT_HEIGHT = 14;
+const DEFAULT_WIDTH = '100%';
+const DEFAULT_RADIUS = 16;
+const DEFAULT_TYPE = RECT;
+const hasChildren = ({ children }) => !isNil(children);
+const renderChildren = ({ children }) => children;
+const isRect = ({ type }) => type === RECT;
+const isCircle = ({ type }) => type === CIRCLE;
+const renderRect = ({ rx = 3, ry = 3 }) => (_jsx("rect", { width: '100%', height: '100%', rx: rx, ry: ry }));
+const renderCircle = ({ radius }) => _jsx("circle", { cx: radius, cy: radius, r: radius });
+/**
+ * This UIKIT component is simple wrapper to make it easier to use with a predefined look and feel. It still
+ * allows for more complex configurations as all additional props are passed down to the third-party
+ * ContentLoader component. For individual customization, it allows passing svg components as rect or circle
+ * directly as children.
+ * @param props
+ * @returns
+ */
+const ContentLoader = (props) => {
+    const { speed = DEFAULT_SPEED, width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, radius = DEFAULT_RADIUS, type = DEFAULT_TYPE, className = '', children } = props, remainingProps = __rest(props, ["speed", "width", "height", "radius", "type", "className", "children"]);
+    const isDarkMode = useDarkMode();
+    // Since we define the default values while destructuring the props, we have to build up a new object
+    // with that defaults to be used in the conditional rendering, otherwise it would use only the props as
+    // passed into the component without the defined defaults.
+    const propsWithDefaults = {
+        type,
+        radius,
+        children,
+    };
+    const content = cond([
+        [hasChildren, renderChildren],
+        [isRect, renderRect],
+        [isCircle, renderCircle],
+    ])(propsWithDefaults);
+    const wrapperHeight = isCircle(propsWithDefaults) ? radius * 2 : height;
+    const wrapperWidth = isCircle(propsWithDefaults) ? wrapperHeight : width;
+    return (_jsx(_ContentLoader, Object.assign({ backgroundColor: '#f5f6f7', foregroundColor: isDarkMode ? '#aaaaaa' : '#eeeeee', speed: speed, height: wrapperHeight, width: wrapperWidth, className: `ContentLoader ${className} ${isDarkMode ? 'use-mix-blend-mode' : ''}` }, remainingProps, { children: content })));
+};
+ContentLoader.RECT = RECT;
+ContentLoader.CIRCLE = CIRCLE;
+export default ContentLoader;

package/components/dataTabs/DataTab.d.ts

@@ -1,20 +1,29 @@
-export default DataTab;
-declare function DataTab(props: any): any;
-declare namespace DataTab {
-    namespace defaultProps {
-        const active: boolean;
-        const disableTransition: boolean;
-        const className: string;
-    }
-    namespace propTypes {
-        const disableTransition_1: PropTypes.Requireable<boolean>;
-        export { disableTransition_1 as disableTransition };
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const active_1: PropTypes.Requireable<boolean>;
-        export { active_1 as active };
-        export const tabKey: PropTypes.Validator<string>;
-        export const children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    }
-}
-import PropTypes from "prop-types";
+import React, { type PropsWithChildren } from 'react';
+export type DataTabProps = {
+    /**
+     * Whether this tab is the one currently active.
+     *
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Used to identify the tab.
+     */
+    tabKey: string;
+    /**
+     * Whether the transition effect should be disabled.
+     *
+     * @default false
+     */
+    disableTransition?: boolean;
+    /**
+     * The content for the tab.
+     */
+    title: React.ReactNode;
+    /**
+     * Additional classes to be set on the element.
+     */
+    className?: string;
+};
+declare const DataTab: (props: PropsWithChildren<DataTabProps>) => import("react/jsx-runtime").JSX.Element | null;
+export default DataTab;

package/components/dataTabs/DataTab.js

@@ -1,30 +1,22 @@
-import { __rest } from "tslib";
-import { createElement as _createElement } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
-import { motion } from 'framer-motion';
-const DataTab = props => {
-    const { active, tabKey, disableTransition, children, title } = props, remainingProps = __rest(props, ["active", "tabKey", "disableTransition", "children", "title"]);
-    if (disableTransition) {
-        return _jsx("div", { children: active && children });
-    }
-    return (active && (_createElement(motion.div, Object.assign({}, remainingProps, { key: tabKey, initial: { x: 0, y: 0, opacity: 0 }, animate: { x: 0, y: 0, opacity: 1 }, exit: { x: 0, y: 0, opacity: 0 }, transition: { duration: 0.1 }, 
-        // TODO: added "fade in" for backwards compatibility for service tests
-        // To be removed for next major version
-        className: 'fade in' }), children)));
-};
-DataTab.defaultProps = {
-    active: false,
-    disableTransition: false,
-    className: '',
-};
-DataTab.propTypes = {
-    // Props are injected from the wrapping DataTabs component
-    disableTransition: PropTypes.bool,
-    className: PropTypes.string,
-    active: PropTypes.bool,
-    tabKey: PropTypes.string.isRequired,
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-};
-export default DataTab;
+import { __rest } from "tslib";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import { motion } from 'framer-motion';
+const DataTab = (props) => {
+    const { active = false, tabKey, disableTransition = false, className = '', children } = props, remainingProps = __rest(props, ["active", "tabKey", "disableTransition", "className", "children"]);
+    if (disableTransition) {
+        return _jsx("div", { children: active && children });
+    }
+    if (!active) {
+        return null;
+    }
+    return (
+    // @ts-ignore
+    _createElement(motion.div, Object.assign({}, remainingProps, { key: tabKey, initial: { x: 0, y: 0, opacity: 0 }, animate: { x: 0, y: 0, opacity: 1 }, exit: { x: 0, y: 0, opacity: 0 }, transition: { duration: 0.1 }, 
+        // TODO: added "fade in" for backwards compatibility for service tests
+        // To be removed for next major version
+        className: 'fade in' }), children));
+};
+export default DataTab;

package/components/dataTabs/DataTabHeader.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export type DataTabHeaderProps = {
+    isActive?: boolean;
+    tabKey: string;
+    title: React.ReactNode;
+    onSelectTab?: (event: React.MouseEvent<HTMLLIElement>) => void;
+    isFirstTab?: boolean;
+    isLastTab?: boolean;
+    tabFirstChildClassName?: string;
+    tabLastChildClassName?: string;
+    tabClassName?: string;
+    tabHoverClassName?: string;
+    tabActiveClassName?: string;
+    arrowClassName?: string;
+    className?: string;
+};
+declare const DataTabHeader: (props: DataTabHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default DataTabHeader;

package/components/dataTabs/DataTabHeader.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import classNames from 'classnames';
+const DataTabHeader = (props) => {
+    const { tabKey, title, isActive, isFirstTab, isLastTab, onSelectTab, tabFirstChildClassName, tabLastChildClassName, tabClassName, tabHoverClassName, tabActiveClassName, arrowClassName, className, } = props;
+    const [isHovering, setIsHovering] = useState(false);
+    const tabClassNames = classNames('DataTab', 'tab', isFirstTab && tabFirstChildClassName, isLastTab && tabLastChildClassName, !isHovering && !isActive && tabClassName, isHovering && !isActive && tabHoverClassName, isActive && `active ${tabActiveClassName}`, !isActive && 'cursor-pointer', className && className);
+    return (_jsxs("li", Object.assign({ className: tabClassNames, onClick: onSelectTab, "data-tabkey": tabKey, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false) }, { children: [title, _jsx("div", { className: `arrow ${arrowClassName} ${isActive ? 'in' : ''}` })] }), tabKey));
+};
+export default DataTabHeader;