@rio-cloud/rio-uikit 0.16.4-beta.5 → 0.16.4-beta.7

package/Button.d.ts

@@ -1,27 +1,2 @@
-declare module '@rio-cloud/rio-uikit/Button' {
-    import React from 'react';
-    import { ButtonProps } from './types';
-    export default class Button extends React.Component<ButtonProps> {
-        // Button styles
-        static DEFAULT = 'default';
-        static PRIMARY = 'primary';
-        static SECONDARY = 'secondary';
-        static INFO = 'info';
-        static WARNING = 'warning';
-        static DANGER = 'danger';
-        static SUCCESS = 'success';
-        static MUTED = 'muted';
-
-        // Button Type
-        static VARIANT_LINK = 'link';
-        static VARIANT_LINK_INLINE = 'link-inline';
-        static VARIANT_OUTLINE = 'outline';
-        static VARIANT_ACTION = 'action';
-
-        // Button Size
-        static XS = 'xs';
-        static SM = 'sm';
-        static MD = 'md';
-        static LG = 'lg';
-    }
-}
+export { default } from './components/button/Button';
+export * from './components/button/Button';

package/Button.js

@@ -1,2 +1,2 @@
-import { default as _Button } from './components/button/Button';
-export { _Button as default };
+export { default } from './components/button/Button';
+export * from './components/button/Button';

package/DataTab.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/DataTab' {
-    import React from 'react';
-    import { DataTabProps } from './types';
-    export default class DataTab extends React.Component<DataTabProps> {}
-}
+export { default } from './components/dataTabs/DataTab';
+export * from './components/dataTabs/DataTab';

package/DataTab.js

@@ -1,2 +1,2 @@
-import { default as _DataTab } from './components/dataTabs/DataTab';
-export { _DataTab as default };
+export { default } from './components/dataTabs/DataTab';
+export * from './components/dataTabs/DataTab';

package/DataTabs.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/DataTabs' {
-    import React from 'react';
-    import { DataTabsProps } from './types';
-    export default class DataTabs extends React.Component<DataTabsProps> {}
-}
+export { default } from './components/dataTabs/DataTabs';
+export * from './components/dataTabs/DataTabs';

package/DataTabs.js

@@ -1,2 +1,2 @@
-import { default as _DataTabs } from './components/dataTabs/DataTabs';
-export { _DataTabs as default };
+export { default } from './components/dataTabs/DataTabs';
+export * from './components/dataTabs/DataTabs';

package/ToggleButton.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/ToggleButton' {
-    import React from 'react';
-    import { ToggleButtonProps } from './types';
-    export default class ToggleButton extends React.Component<ToggleButtonProps> {}
-}
+export { default } from './components/button/ToggleButton';
+export * from './components/button/ToggleButton';

package/ToggleButton.js

@@ -1,2 +1,2 @@
-import { default as _ToggleButton } from './components/button/ToggleButton';
-export { _ToggleButton as default };
+export { default } from './components/button/ToggleButton';
+export * from './components/button/ToggleButton';

package/components/assetTree/TreeLeaf.d.ts

@@ -1,3 +1,12 @@
+import React from 'react';
+import type { TreeItem } from '../../types';
+export type TreeLeafProps = {
+    item: TreeItem;
+    hasMultiselect: boolean;
+    showRadioButtons: boolean;
+    isSelected: boolean;
+    onSelectItem: VoidFunction;
+    onActiveItem: VoidFunction;
+};
+declare const TreeLeaf: React.MemoExoticComponent<(props: TreeLeafProps) => import("react/jsx-runtime").JSX.Element>;
 export default TreeLeaf;
-declare const TreeLeaf: React.NamedExoticComponent<object>;
-import React from "react";

package/components/assetTree/TreeLeaf.js

@@ -1,23 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import isObject from 'lodash/fp/isObject';
 import Checkbox from '../checkbox/Checkbox';
 import RadioButton from '../radiobutton/RadioButton';
-const TreeLeaf = React.memo(props => {
+const TreeLeaf = React.memo((props) => {
     const { item, hasMultiselect, showRadioButtons, isSelected, onSelectItem, onActiveItem } = props;
     const treeNodeClassNames = classNames('TreeLeaf', 'form-group margin-bottom-0', isSelected && 'active', item.className && item.className);
     return (_jsxs("div", Object.assign({ className: treeNodeClassNames, "data-key": item.id }, { children: [hasMultiselect && _jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && (_jsx(RadioButton, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), _jsx("span", Object.assign({ className: 'TreeLabel', onClick: onActiveItem }, { children: _jsxs("span", Object.assign({ className: 'TreeLabelName' }, { children: [_jsx("span", { className: `rioglyph rioglyph-${item.type} margin-top--1` }), _jsxs("span", Object.assign({ className: 'TreeLabelNameText' }, { children: [_jsx("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: isObject(item.name) ? (_jsxs(React.Fragment, { children: [_jsx("span", Object.assign({ className: 'text-light margin-right-3' }, { children: item.name.firstName })), _jsx("span", { children: item.name.lastName })] })) : (_jsx(React.Fragment, { children: item.name })) })), item.info && _jsx("span", Object.assign({ className: 'TreeLabelNameTextSubline' }, { children: item.info }))] }))] })) }))] })));
 });
 TreeLeaf.displayName = 'TreeLeaf';
-TreeLeaf.defaultProps = {};
-TreeLeaf.propTypes = {
-    item: PropTypes.object,
-    hasMultiselect: PropTypes.bool,
-    showRadioButtons: PropTypes.bool,
-    isSelected: PropTypes.bool,
-    onSelectItem: PropTypes.func,
-    onActiveItem: PropTypes.func,
-};
 export default TreeLeaf;

package/components/autosuggest/AutoSuggest.d.ts

@@ -5,7 +5,6 @@ export type AutoSuggestSuggestion = {
     [name: string]: string | React.ReactNode;
 };
 export type SelectedSuggestion = {
-    highlightedItemIndex: -1;
     suggestionValue: string | React.ReactElement;
     suggestion: AutoSuggestSuggestion;
 };

package/components/autosuggest/AutoSuggest.js

@@ -163,7 +163,6 @@ export const AutoSuggest = (props) => {
         onSuggestionSelected(event, {
             suggestion,
             suggestionValue: getSuggestionValue(suggestion),
-            highlightedItemIndex: -1,
         });
     };
     const onMouseEnter = (event) => {

package/components/button/Button.d.ts

@@ -1,57 +1,122 @@
+import { type PropsWithChildren, type SyntheticEvent } from 'react';
+import type { ObjectValues } from '../../utils/ObjectValues';
+declare const STYLES_MAP: {
+    readonly DEFAULT: "default";
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly INFO: "info";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly SUCCESS: "success";
+    readonly MUTED: "muted";
+};
+type STYLE = ObjectValues<typeof STYLES_MAP>;
+declare const VARIANTS_MAP: {
+    readonly VARIANT_LINK: "link";
+    readonly VARIANT_LINK_INLINE: "link-inline";
+    readonly VARIANT_OUTLINE: "outline";
+    readonly VARIANT_ACTION: "action";
+};
+type VARIANT = ObjectValues<typeof VARIANTS_MAP>;
+declare const SIZES_MAP: {
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+type SIZE = ObjectValues<typeof SIZES_MAP>;
+type RegularButtonProps = {
+    /**
+     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.
+     * @default false
+     */
+    asToggle?: false;
+    /**
+     * Callback function triggered when clicking the button.
+     * @param event The MouseEvent that triggered the click.
+     */
+    onClick?: (event: SyntheticEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+type ToggleButtonProps = {
+    /**
+     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.
+     * @default false
+     */
+    asToggle: true;
+    /**
+     * Callback function triggered when clicking the button.
+     * @param value The new value of the toggle button.
+     */
+    onClick?: (value: boolean) => void;
+};
+export type ButtonProps = {
+    /**
+     * Set the button toggled. Should be used in combination with "asToggle" prop.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Whether the button should be disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Use when the content of the button is an icon only to adapt the button spacing accordingly.
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Defines whether the button text break into multiple lines when the button space exceeds.
+     *
+     * Multiline buttons should be used as exception only.
+     * @default false
+     */
+    multiline?: boolean;
+    /**
+     * Defines whether the button takes up the full width of the parent element.
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Sets the button style.
+     * @default "default"
+     */
+    bsStyle?: STYLE;
+    /**
+     * Sets the button size.
+     */
+    bsSize?: SIZE;
+    /**
+     * Sets the button variant.
+     */
+    variant?: VARIANT;
+    /**
+     * Whether the "ripple" effect should be suppressed on this button.
+     */
+    noRippleEffect?: boolean;
+    /**
+     * Additional classes to be set on the button element.
+     */
+    className?: string;
+} & (RegularButtonProps | ToggleButtonProps);
+declare const Button: {
+    (props: PropsWithChildren<ButtonProps>): import("react/jsx-runtime").JSX.Element;
+    DEFAULT: "default";
+    PRIMARY: "primary";
+    SECONDARY: "secondary";
+    INFO: "info";
+    WARNING: "warning";
+    DANGER: "danger";
+    SUCCESS: "success";
+    MUTED: "muted";
+    VARIANT_LINK: "link";
+    VARIANT_LINK_INLINE: "link-inline";
+    VARIANT_OUTLINE: "outline";
+    VARIANT_ACTION: "action";
+    XS: "xs";
+    SM: "sm";
+    MD: "md";
+    LG: "lg";
+};
 export default Button;
-declare function Button(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace Button {
-    const DEFAULT: string;
-    const PRIMARY: string;
-    const SECONDARY: string;
-    const INFO: string;
-    const WARNING: string;
-    const DANGER: string;
-    const SUCCESS: string;
-    const MUTED: string;
-    const VARIANT_LINK: string;
-    const VARIANT_LINK_INLINE: string;
-    const VARIANT_OUTLINE: string;
-    const VARIANT_ACTION: string;
-    const XS: string;
-    const SM: string;
-    const MD: string;
-    const LG: string;
-    namespace defaultProps {
-        const active: boolean;
-        const disabled: boolean;
-        const asToggle: boolean;
-        const iconOnly: boolean;
-        const multiline: boolean;
-        const block: boolean;
-        const noRippleEffect: boolean;
-        function onClick(): void;
-        const className: string;
-        const bsStyle: string;
-    }
-    namespace propTypes {
-        const active_1: PropTypes.Requireable<boolean>;
-        export { active_1 as active };
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        const asToggle_1: PropTypes.Requireable<boolean>;
-        export { asToggle_1 as asToggle };
-        const iconOnly_1: PropTypes.Requireable<boolean>;
-        export { iconOnly_1 as iconOnly };
-        const multiline_1: PropTypes.Requireable<boolean>;
-        export { multiline_1 as multiline };
-        const block_1: PropTypes.Requireable<boolean>;
-        export { block_1 as block };
-        const onClick_1: PropTypes.Validator<(...args: any[]) => any>;
-        export { onClick_1 as onClick };
-        const bsStyle_1: PropTypes.Requireable<string>;
-        export { bsStyle_1 as bsStyle };
-        export const bsSize: PropTypes.Requireable<string>;
-        export const variant: PropTypes.Requireable<string>;
-        const noRippleEffect_1: PropTypes.Requireable<boolean>;
-        export { noRippleEffect_1 as noRippleEffect };
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-    }
-}
-import PropTypes from "prop-types";

package/components/button/Button.js

@@ -1,97 +1,79 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { useRef, useState } from 'react';
 import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
 import { createButtonRipple } from '../../utils/buttonEffect';
-const Button = props => {
-    const { active, disabled, asToggle, onClick, bsStyle, bsSize, variant, iconOnly, multiline, block, className, noRippleEffect, children } = props, remainingProps = __rest(props, ["active", "disabled", "asToggle", "onClick", "bsStyle", "bsSize", "variant", "iconOnly", "multiline", "block", "className", "noRippleEffect", "children"]);
+const STYLES_MAP = {
+    DEFAULT: 'default',
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    INFO: 'info',
+    WARNING: 'warning',
+    DANGER: 'danger',
+    SUCCESS: 'success',
+    MUTED: 'muted',
+};
+const VARIANTS_MAP = {
+    VARIANT_LINK: 'link',
+    VARIANT_LINK_INLINE: 'link-inline',
+    VARIANT_OUTLINE: 'outline',
+    VARIANT_ACTION: 'action',
+};
+const SIZES_MAP = {
+    XS: 'xs',
+    SM: 'sm',
+    MD: 'md',
+    LG: 'lg',
+};
+const Button = (props) => {
+    const { active = false, disabled = false, asToggle = false, onClick = noop, bsStyle = 'default', bsSize, variant, iconOnly = false, multiline = false, block = false, className = '', noRippleEffect = false, children } = props, remainingProps = __rest(props, ["active", "disabled", "asToggle", "onClick", "bsStyle", "bsSize", "variant", "iconOnly", "multiline", "block", "className", "noRippleEffect", "children"]);
     const [isToggled, setIsToggled] = useState(active);
-    const btnRef = useRef();
-    // Update internal toggle state when used as controlled component
-    // and outside toggle state changes
-    useEffect(() => setIsToggled(active), [active]);
-    // Register a dedicated click event on the button to interrupt
-    // the actual 'onClick' callback passed into the component from outside
-    useEffect(() => {
-        if (noRippleEffect || !btnRef.current) {
-            return;
+    const btnRef = useRef(null);
+    // Update internal toggle state when used as controlled component and outside toggle state changes
+    const [previousActive, setPreviousActive] = useState(active);
+    if (active !== previousActive) {
+        setIsToggled(active);
+        setPreviousActive(active);
+    }
+    const handleClick = (event) => {
+        var _a;
+        if (!noRippleEffect) {
+            createButtonRipple(event.nativeEvent, event.currentTarget);
+        }
+        if (asToggle) {
+            // Intercept click handler only for toggle button to update internal state and blur after click
+            const newIsToggled = !isToggled;
+            setIsToggled(newIsToggled);
+            if (newIsToggled) {
+                (_a = btnRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            }
+            onClick(newIsToggled);
+        }
+        else {
+            onClick(event);
         }
-        const mouseListener = btnRef.current.addEventListener('mousedown', createButtonRipple, false);
-        const touchListener = btnRef.current.addEventListener('touchstart', createButtonRipple, false);
-        return () => {
-            mouseListener && btnRef.current.removeEventListener('mousedown', createButtonRipple, false);
-            touchListener && btnRef.current.removeEventListener('touchstart', createButtonRipple, false);
-        };
-    }, [btnRef.current, noRippleEffect]);
-    // Intercept click handler only for toggle button to update
-    // internal state and blur after click
-    const handleClick = () => {
-        const newIsToggled = !isToggled;
-        setIsToggled(newIsToggled);
-        btnRef.current && newIsToggled && btnRef.current.blur();
-        onClick(isToggled);
     };
     const buttonClassNames = classNames('btn', `btn-${bsStyle}`, variant === Button.VARIANT_LINK && 'btn-link', variant === Button.VARIANT_LINK_INLINE && 'btn-link btn-link-inline', variant === Button.VARIANT_OUTLINE && 'btn-outline', variant === Button.VARIANT_ACTION && 'btn-action', bsSize && `btn-${bsSize}`, asToggle && 'btn-toggle', isToggled && 'active', iconOnly && 'btn-icon-only', disabled && 'disabled', multiline && 'btn-multiline', block && 'btn-block', 'btn-component', className);
-    return (_jsx("button", Object.assign({ ref: btnRef, type: 'button' }, remainingProps, { className: buttonClassNames, onClick: asToggle ? handleClick : onClick }, { children: children })));
+    return (_jsx("button", Object.assign({ ref: btnRef, type: 'button' }, remainingProps, { className: buttonClassNames, onClick: handleClick }, { children: children })));
 };
 // Button styles
-Button.DEFAULT = 'default';
-Button.PRIMARY = 'primary';
-Button.SECONDARY = 'secondary';
-Button.INFO = 'info';
-Button.WARNING = 'warning';
-Button.DANGER = 'danger';
-Button.SUCCESS = 'success';
-Button.MUTED = 'muted';
+Button.DEFAULT = STYLES_MAP.DEFAULT;
+Button.PRIMARY = STYLES_MAP.PRIMARY;
+Button.SECONDARY = STYLES_MAP.SECONDARY;
+Button.INFO = STYLES_MAP.INFO;
+Button.WARNING = STYLES_MAP.WARNING;
+Button.DANGER = STYLES_MAP.DANGER;
+Button.SUCCESS = STYLES_MAP.SUCCESS;
+Button.MUTED = STYLES_MAP.MUTED;
 // Button Type
-Button.VARIANT_LINK = 'link';
-Button.VARIANT_LINK_INLINE = 'link-inline';
-Button.VARIANT_OUTLINE = 'outline';
-Button.VARIANT_ACTION = 'action';
+Button.VARIANT_LINK = VARIANTS_MAP.VARIANT_LINK;
+Button.VARIANT_LINK_INLINE = VARIANTS_MAP.VARIANT_LINK_INLINE;
+Button.VARIANT_OUTLINE = VARIANTS_MAP.VARIANT_OUTLINE;
+Button.VARIANT_ACTION = VARIANTS_MAP.VARIANT_ACTION;
 // Button Size
-Button.XS = 'xs';
-Button.SM = 'sm';
-Button.MD = 'md';
-Button.LG = 'lg';
-Button.defaultProps = {
-    active: false,
-    disabled: false,
-    asToggle: false,
-    iconOnly: false,
-    multiline: false,
-    block: false,
-    noRippleEffect: false,
-    onClick: () => { },
-    className: '',
-    bsStyle: 'default',
-};
-Button.propTypes = {
-    active: PropTypes.bool,
-    disabled: PropTypes.bool,
-    asToggle: PropTypes.bool,
-    iconOnly: PropTypes.bool,
-    multiline: PropTypes.bool,
-    block: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    bsStyle: PropTypes.oneOf([
-        Button.DEFAULT,
-        Button.PRIMARY,
-        Button.SECONDARY,
-        Button.INFO,
-        Button.WARNING,
-        Button.DANGER,
-        Button.SUCCESS,
-        Button.MUTED,
-    ]),
-    bsSize: PropTypes.oneOf([Button.XS, Button.SM, Button.MD, Button.LG]),
-    variant: PropTypes.oneOf([
-        Button.VARIANT_LINK,
-        Button.VARIANT_LINK_INLINE,
-        Button.VARIANT_OUTLINE,
-        Button.VARIANT_ACTION,
-    ]),
-    noRippleEffect: PropTypes.bool,
-    className: PropTypes.string,
-};
+Button.XS = SIZES_MAP.XS;
+Button.SM = SIZES_MAP.SM;
+Button.MD = SIZES_MAP.MD;
+Button.LG = SIZES_MAP.LG;
 export default Button;

package/components/button/ToggleButton.d.ts

@@ -1,30 +1,7 @@
+import { type PropsWithChildren } from 'react';
+import { type ButtonProps } from './Button';
+export type ToggleButtonProps = Omit<ButtonProps, 'asToggle' | 'onClick'> & {
+    onClick?: (value: boolean) => void;
+};
+declare const ToggleButton: (props: PropsWithChildren<ToggleButtonProps>) => import("react/jsx-runtime").JSX.Element;
 export default ToggleButton;
-declare function ToggleButton(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace ToggleButton {
-    const defaultProps: {
-        active: boolean;
-        disabled: boolean;
-        asToggle: boolean;
-        iconOnly: boolean;
-        multiline: boolean;
-        block: boolean;
-        noRippleEffect: boolean;
-        onClick: () => void;
-        className: string;
-        bsStyle: string;
-    };
-    const propTypes: {
-        active: import("prop-types").Requireable<boolean>;
-        disabled: import("prop-types").Requireable<boolean>;
-        asToggle: import("prop-types").Requireable<boolean>;
-        iconOnly: import("prop-types").Requireable<boolean>;
-        multiline: import("prop-types").Requireable<boolean>;
-        block: import("prop-types").Requireable<boolean>;
-        onClick: import("prop-types").Validator<(...args: any[]) => any>;
-        bsStyle: import("prop-types").Requireable<string>;
-        bsSize: import("prop-types").Requireable<string>;
-        variant: import("prop-types").Requireable<string>;
-        noRippleEffect: import("prop-types").Requireable<boolean>;
-        className: import("prop-types").Requireable<string>;
-    };
-}

package/components/button/ToggleButton.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import Button from './Button';
-const ToggleButton = props => _jsx(Button, Object.assign({}, props, { asToggle: true }));
-ToggleButton.defaultProps = Button.defaultProps;
-ToggleButton.propTypes = Button.propTypes;
+const ToggleButton = (props) => _jsx(Button, Object.assign({}, props, { asToggle: true }));
 export default ToggleButton;

package/components/dataTabs/DataTab.d.ts

@@ -1,20 +1,29 @@
+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;
-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";

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';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import { motion } from 'framer-motion';
-const DataTab = props => {
-    const { active, tabKey, disableTransition, children, title } = props, remainingProps = __rest(props, ["active", "tabKey", "disableTransition", "children", "title"]);
+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 });
     }
-    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 }, 
+    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)));
-};
-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]),
+        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;