@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/components/clearableInput/ClearableInput.d.ts

@@ -0,0 +1,211 @@
+/** biome-ignore-all lint/complexity/noBannedTypes: <explanation> */
+import React from 'react';
+export declare const DEFAULT_TYPE = "text";
+export declare const SUPPORTED_TYPES: string[];
+export type MaskVisibility = 'always' | 'onFocus' | 'never';
+export type MaskDefinition = {
+    mask: string;
+    definitions?: Record<string, string | RegExp>;
+    startsWith?: string;
+    [key: string]: any;
+};
+export type ClearableInputProps = {
+    /**
+     * Gives the input element the id.
+     */
+    id?: string;
+    /**
+     * Gives the input element a name.
+     */
+    name?: string;
+    /**
+     * The translated text that shall be shown when the input is empty.
+     */
+    placeholder?: string | React.ReactNode;
+    /**
+     * Defines the type of the input itself.
+     *
+     * There are three types supported:
+     * `text`, `email`, `password`.
+     */
+    type?: 'text' | 'password' | 'email';
+    /**
+     * Initial value of the ClearableInput. Pass this prop if you want to use this
+     * component as an uncontrolled component.
+     */
+    defaultValue?: string;
+    /**
+     * Value of the ClearableInput. Pass this prop if you want to use this
+     * component as a controlled component.
+     */
+    value?: string;
+    /**
+     * Defines the maximum amount of characters that can be entered.
+     */
+    maxLength?: number;
+    /**
+     * Defines the tab index to be added to the input element.
+     */
+    tabIndex?: number;
+    /**
+     * Defined whether or not the input has the error styling.
+     */
+    hasError?: boolean;
+    /**
+     * The callback ref for the underlying input. Alternatively, use can use a forward ref.
+     */
+    inputRef?: React.RefObject<HTMLInputElement>;
+    /**
+     * Sets autocomplete value for autosuggest forms.
+     */
+    autoComplete?: string;
+    /**
+     * Callback function for when the value changes. Receives new value as an argument.
+     * @param newValue
+     * @param event
+     * @returns
+     */
+    onChange?: (newValue: string, event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Callback function which gets triggered when the input looses the focus.
+     * @param event
+     * @returns
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function which gets triggered when the input gains the focus.
+     * @param event
+     * @returns
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function for when the value is cleared via the clear button.
+     * @param event
+     * @returns
+     */
+    onClear?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Callback function for every key pressed including `Enter` key.
+     * @param event
+     * @returns
+     */
+    onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Callback triggered when clicked into the input to react on it like when using an auto suggest dropdown
+     * @param event
+     * @returns
+     */
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * The mask prop will allow to use the component with an input mask.
+     * It defines the pattern that should be followed.
+     *
+     * For more details on masking, checkout the third party documentation for the
+     * input mask here: {@link https://imask.js.org/guide.html}
+     *
+     * Simple masks can be defined as strings.
+     *
+     * The following characters will define mask format:
+     *
+     * "0" = allowed input: "0-9" (digit)
+     *
+     * "a" = allowed input: "a-z, A-Z" (letter)
+     *
+     * "*" = allowed input: any character
+     *
+     * "#" = allowed input: "0-9, a-z, A-Z" (digit or letter)
+     *
+     * Other chars which is not in custom definitions supposed to be fixed:
+     *
+     * [] - make input optional
+     *
+     * {} - include fixed part in unmasked value
+     *
+     * ` - prevent symbols shift back
+     *
+     * If definition character should be treated as fixed it should be escaped by \\ (E.g. \\0).
+     *
+     * Additionally you can provide custom definitions.
+     *
+     * @example
+     * '-- ### ### ###' or '+49 00 000 00'
+     */
+    mask?: string | (string | RegExp)[] | RegExp | DateConstructor | number | Function | MaskDefinition[];
+    /**
+     * Placeholder to cover unfilled parts of the mask.
+     *
+     * @default '_'
+     */
+    maskPlaceholder?: string | null;
+    /**
+     * Enable characters overwriting
+     *
+     * @default true
+     */
+    maskOverwrite?: boolean | 'shift' | undefined;
+    /**
+     * Chooses the mask for dynamic masking depending on input value.
+     * Note, this function may not be an empty function, otherwise the mask selection won't work
+     */
+    maskDispatch?: (appended: string, dynamicMasked: any) => any;
+    /**
+     * Controls when the mask pattern is visible.
+     * - 'always': Mask is always visible
+     * - 'onFocus': Mask is hidden but shown when input is focused (default)
+     * - 'never': Mask is never shown
+     *
+     * @default 'always'
+     */
+    maskVisibility?: MaskVisibility;
+    /**
+     * Custom definitions to have more control over your mask. The defined character will be replaced in your mask.
+     *
+     * @example
+     * mask='AAA AAA.AA'
+     * maskDefinitions={{ A: /[A-Z0-9]/ }}
+     */
+    maskDefinitions?: Record<string, string | RegExp>;
+    /**
+     * Minimum value to be entered. This prop is extended to accept a Date
+     * when used with an input mask.
+     */
+    min?: string | number | undefined | Date;
+    /**
+     * Maximum value to be entered. This prop is extended to accept a Date
+     * when used with an input mask.
+     */
+    max?: string | number | undefined | Date;
+    /**
+     * Whether mask prefix and placeholder should be displayed when input is empty and
+     * has no focus.
+     *
+     * @default false
+     * @deprecated please use maskVisibility='always' instead
+     */
+    alwaysShowMask?: boolean;
+    /**
+     * Disabled the input component.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional classes to be set on the input element.
+     */
+    inputClassName?: string;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+type ChildrenProp = {
+    /**
+     * Providing a function enables the render props approach. The function gets the input props
+     * passed and is responsible for rendering the custom `input` component.
+     * @param props
+     * @returns
+     */
+    children?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;
+};
+declare const ClearableInput: React.ForwardRefExoticComponent<ClearableInputProps & ChildrenProp & React.RefAttributes<HTMLInputElement>>;
+export default ClearableInput;

package/src/components/clearableInput/ClearableInput.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** biome-ignore-all lint/complexity/noBannedTypes: <explanation> */
+import { useState, forwardRef, useRef } from 'react';
+import omit from 'lodash/fp/omit';
+import isNil from 'lodash/fp/isNil';
+import isEmpty from 'lodash/fp/isEmpty';
+import classNames from 'classnames';
+import isFunction from 'lodash/fp/isFunction';
+import noop from 'lodash/fp/noop';
+import { IMaskInput } from 'react-imask';
+import usePrevious from '../../hooks/usePrevious';
+import useMergeRefs from '../../hooks/useMergeRefs';
+export const DEFAULT_TYPE = 'text';
+export const SUPPORTED_TYPES = ['text', 'password', 'email'];
+const hasValue = (value) => !isEmpty(`${value}`);
+const ClearableInput = forwardRef((props, ref) => {
+    const { type = DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop, onBlur = noop, onFocus = noop, onClear = noop, onKeyPress = noop, onClick = noop, mask, maskPlaceholder = '_', maskVisibility = 'always', maskOverwrite = true, maskDefinitions, maskDispatch, alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children, ...remainingProps } = props;
+    const initialValue = value || defaultValue || '';
+    const [inputValue, setInputValue] = useState(initialValue);
+    const [showClear, setShowClear] = useState(hasValue(initialValue));
+    const [isFocused, setIsFocused] = useState(false);
+    const isControlled = !isNil(value);
+    const internalMaskRef = useRef(null);
+    const mergedInternalMaskRef = useMergeRefs(internalMaskRef, inputRef, ref);
+    const hasMask = !!mask;
+    // Calculate if mask should be visible (lazy=false means visible, lazy=true means hidden)
+    const shouldShowMask = () => {
+        // For backward compatibility
+        if (alwaysShowMask) {
+            return true;
+        }
+        switch (maskVisibility) {
+            case 'always':
+                return true;
+            case 'onFocus':
+                return isFocused;
+            case 'never':
+                return false;
+            default:
+                return isFocused;
+        }
+    };
+    // Handles new input value and saves it in the local state.
+    // The value stored in the state is used for rendering.
+    const changeInternalValue = (newValue = '') => {
+        // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time
+        if (inputValue === newValue) {
+            return;
+        }
+        setInputValue(newValue);
+        setShowClear(hasValue(newValue));
+    };
+    // important for when used as a controlled component and value changes from the outside.
+    const previousValue = usePrevious(value);
+    if (previousValue !== value) {
+        changeInternalValue(value);
+    }
+    // only gets triggered on user interaction.
+    const handleChange = (event) => {
+        const newValue = event.target.value;
+        if (isControlled) {
+            onChange(newValue, event);
+        }
+        else {
+            changeInternalValue(newValue);
+            onChange(newValue, event);
+        }
+    };
+    const handleAccept = (newValue, maskRef, event) => {
+        if (!internalMaskRef.current) {
+            return;
+        }
+        // Simulate a ChangeEvent for backwards compatibility since react-imask does not return a change event itself
+        const syntheticEvent = {
+            target: internalMaskRef.current,
+            currentTarget: internalMaskRef.current,
+            // Standard synthetic event props
+            bubbles: true,
+            cancelable: true,
+            defaultPrevented: false,
+            isTrusted: true,
+            preventDefault: () => { },
+            stopPropagation: () => { },
+            persist: () => { },
+            nativeEvent: {},
+            type: 'change',
+            timeStamp: Date.now(),
+        };
+        // Set unmasked value manually if needed
+        // (you can use data-attributes or attach it directly)
+        syntheticEvent.target.unmaskedValue = maskRef.unmaskedValue;
+        if (isControlled) {
+            onChange(newValue, syntheticEvent);
+        }
+        else {
+            changeInternalValue(newValue);
+            onChange(newValue, syntheticEvent);
+        }
+    };
+    const handleInputFocus = (event) => {
+        setIsFocused(true);
+        onFocus(event);
+    };
+    const handleInputBlur = (event) => {
+        setIsFocused(false);
+        onBlur(event);
+    };
+    // Will be triggered on every key press but also when pressing 'Enter' for example
+    const handleKeyPress = (event) => {
+        onKeyPress(event);
+    };
+    const clearInputValue = (event) => {
+        changeInternalValue('');
+        onChange('', event);
+        if (onClear) {
+            onClear(event);
+        }
+    };
+    const classes = classNames('ClearableInput', 'input-group', hasError && 'has-error', disabled && 'pointer-events-none', className && className);
+    const inputClassNames = classNames('form-control', inputClassName, showClear && 'withClearButton', hasMask && 'withInputMask', disabled && 'disabled');
+    const clearButtonClassNames = classNames('clearButton', !showClear && 'hide');
+    const convertedType = type?.toLowerCase();
+    const inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;
+    const inputProps = {
+        ...omit(['value', 'defaultValue', 'onClear'])(remainingProps),
+        className: inputClassNames,
+        autoComplete,
+        type: inputType,
+        value: inputValue,
+        onKeyPress: handleKeyPress,
+        onBlur: handleInputBlur,
+        onFocus: handleInputFocus,
+        onChange: hasMask ? undefined : handleChange, // In case of masked input, the onAccept callback is used
+        onClick,
+        disabled,
+        maxLength: hasMask ? undefined : maxLength,
+        tabIndex,
+    };
+    // The dispatch function may not be an empty function. Specify it when
+    // using dynamic masking and need more control over which mask gets selected
+    const maskDispatchObj = {};
+    if (maskDispatch) {
+        maskDispatchObj.dispatch = maskDispatch;
+    }
+    const input = hasMask ? (_jsx(IMaskInput, { ...inputProps, inputRef: mergedInternalMaskRef, mask: mask, definitions: maskDefinitions, ...maskDispatchObj, placeholderChar: maskPlaceholder, onAccept: handleAccept, lazy: !shouldShowMask(), overwrite: maskOverwrite })) : (_jsx("input", { ...inputProps, ref: inputRef || ref }));
+    return (_jsxs("div", { className: classes, children: [children && isFunction(children) ? children(inputProps) : input, _jsx("span", { className: clearButtonClassNames, onClick: clearInputValue, children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })] }));
+});
+export default ClearableInput;

package/src/components/collapse/Collapse.d.ts

@@ -0,0 +1,40 @@
+import { type PropsWithChildren } from 'react';
+type CollapseProps = {
+    /**
+     * Show the component and triggers the expand or collapse animation.
+     * @default false
+     */
+    open: boolean | undefined;
+    /** Deprecated, please use `open` instead. @deprecated */
+    in?: boolean;
+    /**
+     * Unmount the component (remove it from the DOM) when it is collapsed.
+     */
+    unmountOnExit?: boolean;
+    /**
+     * Run the expand animation when the component mounts, if it is initially shown.
+     * @default false
+     */
+    appear?: boolean;
+    /**
+     * Duration of the collapse animation in milliseconds.
+     * @default 270
+     */
+    timeout?: number;
+    /**
+     * Callback fired after the component has expanded.
+     * @returns
+     */
+    onEntered?: () => void;
+    /**
+     * Callback fired after the component has collapsed.
+     * @returns
+     */
+    onExited?: () => void;
+    /**
+     * Callback fired when the animation starts for either expand or collapse.
+     */
+    onAnimationStart?: () => void;
+};
+declare const Collapse: (props: PropsWithChildren<CollapseProps>) => import("react/jsx-runtime").JSX.Element;
+export default Collapse;

package/src/components/collapse/Collapse.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { motion, AnimatePresence } from 'framer-motion';
+import noop from 'lodash/fp/noop';
+const DEFAULT_ANIMATION_TIME_IN_MS = 200;
+const Collapse = (props) => {
+    const { open = false, unmountOnExit = false, appear = false, timeout = DEFAULT_ANIMATION_TIME_IN_MS, onEntered = noop, onExited = noop, onAnimationStart = noop, children, } = props;
+    const shouldKeepContentInDom = !unmountOnExit;
+    const handleAnimationStart = () => onAnimationStart();
+    const handleAnimationComplete = (definition) => {
+        if (definition === 'open') {
+            onEntered();
+        }
+        if (definition === 'collapsed') {
+            onExited();
+        }
+    };
+    const variants = {
+        open: { opacity: 1, height: 'auto' },
+        collapsed: { opacity: 0, height: 0 },
+    };
+    return (_jsx(_Fragment, { children: _jsx(AnimatePresence, { initial: appear, exitBeforeEnter: true, children: (open || shouldKeepContentInDom) && (_jsx(motion.div, { initial: 'collapsed', animate: open ? 'open' : 'collapsed', exit: 'collapsed', className: 'collapse display-block width-100pct', variants: variants, transition: { duration: timeout / 1000, ease: 'easeIn' }, onAnimationComplete: handleAnimationComplete, onAnimationStart: handleAnimationStart, children: children }, 'content')) }) }));
+};
+//
+export default Collapse;

package/src/components/contentLoader/ContentLoader.d.ts

@@ -0,0 +1,55 @@
+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/src/components/contentLoader/ContentLoader.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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, ...remainingProps } = props;
+    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, { 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/src/components/dataTabs/DataTab.d.ts

@@ -0,0 +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;

package/src/components/dataTabs/DataTab.js

@@ -0,0 +1,20 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from 'framer-motion';
+const DataTab = (props) => {
+    const { active = false, title, // exclude from remainingProps to avoid being set to the div element
+    tabKey, disableTransition = false, className = '', children, ...remainingProps } = props;
+    if (disableTransition) {
+        return _jsx("div", { children: active && children });
+    }
+    if (!active) {
+        return null;
+    }
+    return (
+    // @ts-ignore
+    _createElement(motion.div, { ...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/src/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/src/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", { 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;