hrm_ui_lib 3.4.2 → 4.0.1

package/components/SideSheet/SideSheet.js

@@ -11,7 +11,7 @@ import { Footer } from './Footer/Footer';
 import IconCaretUp from '../SVGIcons/IconCaretUp';
 import IconDismissFilled from '../SVGIcons/IconDismissFilled';
 export const SideSheet = (props) => {
-    const { size = 'small', isLoading, isOpen, onClose, onSubmit, title, position = 'right', shouldRemoveCallback, className = '', headerButtons, footerButtons, scrollToTopOptions, children, closeOnOutsideClick = true, checkboxInfo, dataId = '' } = props;
+    const { size = 'small', isLoading, isOpen, onClose, onSubmit, title, position = 'right', shouldRemoveCallback, className = '', headerButtons, footerButtons, scrollToTopOptions, children, closeOnOutsideClick = true, checkboxInfo, dataTestId = '' } = props;
     const [containerRef, setContainerRef] = useState(null);
     const [isShownScrollIcon, setIsShownScrollIcon] = useState(false);
     const scrollbarContainerRef = useRef(null);
@@ -42,7 +42,7 @@ export const SideSheet = (props) => {
         });
     }, []);
     const isFromLeft = position === 'left';
-    return (_jsx(AnimatePresenceWrapper, { children: isOpen ? (_jsx(motion.div, { className: "side-sheet", "data-id": dataId, initial: {
+    return (_jsx(AnimatePresenceWrapper, { children: isOpen ? (_jsx(motion.div, { className: "side-sheet", "data-test-id": dataTestId, initial: {
                 opacity: 0
             }, animate: {
                 opacity: 1
@@ -54,5 +54,5 @@ export const SideSheet = (props) => {
                 }
             }, transition: { duration: 0.2 }, children: _jsxs(motion.div, { initial: isFromLeft ? { left: '-100%' } : { right: '-100%' }, animate: isFromLeft ? { left: 0 } : { right: 0 }, exit: Object.assign(Object.assign({}, (isFromLeft ? { left: '-100%' } : { right: '-100%' })), { transition: {
                         duration: 0.5
-                    } }), transition: { duration: 0.5 }, className: classnames('side-sheet__container', `side-sheet__${position}`, `side-sheet__container--${size}`, className), "data-id": dataId ? `${dataId}-container` : '', ref: setContainerRef, children: [_jsxs("div", { className: "side-sheet__header", children: [_jsxs("div", { className: "side-sheet__header__left pr-16", children: [(headerButtons === null || headerButtons === void 0 ? void 0 : headerButtons.back) ? (_jsx(Button, Object.assign({ size: "small", type: "tertiary" }, headerButtons.back, { className: "mr-8", dataId: dataId ? `${dataId}-back` : '' }))) : null, _jsx(Text, { className: "side-sheet__title", weight: "bolder", lineHeight: "large", size: "medium", dataId: dataId ? `${dataId}-title` : '', children: title })] }), _jsxs("div", { className: "side-sheet__header__right", children: [(headerButtons === null || headerButtons === void 0 ? void 0 : headerButtons.pin) ? (_jsx(Button, Object.assign({ size: "small", type: "tertiary" }, headerButtons.pin, { className: "mr-8", dataId: dataId ? `${dataId}-pin` : '' }))) : null, (headerButtons === null || headerButtons === void 0 ? void 0 : headerButtons.close) ? (_jsx(Button, Object.assign({ size: "small", type: "tertiary" }, headerButtons.close, { onClick: onClose, dataId: dataId ? `${dataId}-close` : '' }))) : (_jsx(Button, { size: "small", type: "tertiary", iconProps: { Component: IconDismissFilled }, onClick: onClose, dataId: dataId ? `${dataId}-close` : '' }))] }), isShownScrollIcon && (_jsx(Button, { size: "large", type: "secondary", iconProps: { Component: IconCaretUp }, className: `side-sheet__header__scroll-top side-sheet__header__scroll-top__${size}`, dataId: dataId ? `${dataId}-scroll-top` : '', onClick: handleScrollToTop }))] }), _jsx("div", { className: "side-sheet__content scrollbar scrollbar--vertical", "data-id": dataId ? `${dataId}-content` : '', ref: scrollbarContainerRef, children: children }), _jsx(Footer, { footerButtons: footerButtons, isLoading: isLoading, onClose: onClose, onSubmit: onSubmit, checkboxInfo: checkboxInfo, dataId: dataId })] }) })) : null }));
+                    } }), transition: { duration: 0.5 }, className: classnames('side-sheet__container', `side-sheet__${position}`, `side-sheet__container--${size}`, className), "data-test-id": dataTestId ? `${dataTestId}-container` : '', ref: setContainerRef, children: [_jsxs("div", { className: "side-sheet__header", children: [_jsxs("div", { className: "side-sheet__header__left pr-16", children: [(headerButtons === null || headerButtons === void 0 ? void 0 : headerButtons.back) ? (_jsx(Button, Object.assign({ size: "small", type: "tertiary" }, headerButtons.back, { className: "mr-8", dataTestId: dataTestId ? `${dataTestId}-back` : '' }))) : null, _jsx(Text, { className: "side-sheet__title", weight: "bolder", lineHeight: "large", size: "medium", dataTestId: dataTestId ? `${dataTestId}-title` : '', children: title })] }), _jsxs("div", { className: "side-sheet__header__right", children: [(headerButtons === null || headerButtons === void 0 ? void 0 : headerButtons.pin) ? (_jsx(Button, Object.assign({ size: "small", type: "tertiary" }, headerButtons.pin, { className: "mr-8", dataTestId: dataTestId ? `${dataTestId}-pin` : '' }))) : null, (headerButtons === null || headerButtons === void 0 ? void 0 : headerButtons.close) ? (_jsx(Button, Object.assign({ size: "small", type: "tertiary" }, headerButtons.close, { onClick: onClose, dataTestId: dataTestId ? `${dataTestId}-close` : '' }))) : (_jsx(Button, { size: "small", type: "tertiary", iconProps: { Component: IconDismissFilled }, onClick: onClose, dataTestId: dataTestId ? `${dataTestId}-close` : '' }))] }), isShownScrollIcon && (_jsx(Button, { size: "large", type: "secondary", iconProps: { Component: IconCaretUp }, className: `side-sheet__header__scroll-top side-sheet__header__scroll-top__${size}`, dataTestId: dataTestId ? `${dataTestId}-scroll-top` : '', onClick: handleScrollToTop }))] }), _jsx("div", { className: "side-sheet__content scrollbar scrollbar--vertical", "data-test-id": dataTestId ? `${dataTestId}-content` : '', ref: scrollbarContainerRef, children: children }), _jsx(Footer, { footerButtons: footerButtons, isLoading: isLoading, onClose: onClose, onSubmit: onSubmit, checkboxInfo: checkboxInfo, dataTestId: dataTestId })] }) })) : null }));
 };

package/components/SideSheet/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { ReactNode } from 'react';
 import { TButtonPropTypes } from '../Button/types';
 export type TSideSheetSize = 'small' | 'large' | 'mobile';

package/components/Skeleton/Skeleton.js

@@ -8,7 +8,7 @@ const toCSSSize = (value) => {
     return typeof value === 'number' ? `${value}px` : value;
 };
 export const Skeleton = (props) => {
-    const { variant = DEFAULT_VARIANT, animation = DEFAULT_ANIMATION, width, height, count = 1, children, style, className = '', dataId = '' } = props;
+    const { variant = DEFAULT_VARIANT, animation = DEFAULT_ANIMATION, width, height, count = 1, children, style, className = '', dataTestId = '' } = props;
     const hasChildren = children !== undefined && children !== null;
     const safeCount = count > 1 ? count : 1;
     const inlineStyle = Object.assign(Object.assign(Object.assign({}, (width !== undefined ? { width: toCSSSize(width) } : null)), (height !== undefined ? { height: toCSSSize(height) } : null)), style);
@@ -18,14 +18,14 @@ export const Skeleton = (props) => {
         'skeleton--auto-width': hasChildren && width === undefined
     }, className);
     if (hasChildren) {
-        return (_jsx("span", { className: rootClassName, style: inlineStyle, "data-id": dataId, children: _jsx("span", { className: "skeleton__children", "aria-hidden": "true", children: children }) }));
+        return (_jsx("span", { className: rootClassName, style: inlineStyle, "data-test-id": dataTestId, children: _jsx("span", { className: "skeleton__children", "aria-hidden": "true", children: children }) }));
     }
     if (safeCount === 1) {
-        return (_jsx("span", { className: rootClassName, style: inlineStyle, "data-id": dataId, role: "status", "aria-label": "Loading" }));
+        return (_jsx("span", { className: rootClassName, style: inlineStyle, "data-test-id": dataTestId, role: "status", "aria-label": "Loading" }));
     }
     const items = [];
     for (let i = 0; i < safeCount; i += 1) {
-        items.push(_jsx("span", { className: rootClassName, style: inlineStyle, "data-id": dataId ? `${dataId}-${i}` : '', "aria-hidden": i === 0 ? undefined : true, role: i === 0 ? 'status' : undefined, "aria-label": i === 0 ? 'Loading' : undefined }, i));
+        items.push(_jsx("span", { className: rootClassName, style: inlineStyle, "data-test-id": dataTestId ? `${dataTestId}-${i}` : '', "aria-hidden": i === 0 ? undefined : true, role: i === 0 ? 'status' : undefined, "aria-label": i === 0 ? 'Loading' : undefined }, i));
     }
     return _jsx("span", { className: "skeleton-group", children: items });
 };

package/components/Skeleton/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { CSSProperties, ReactNode } from 'react';
 export type TSkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
 export type TSkeletonAnimation = 'pulse' | 'wave' | 'none';

package/components/Snackbar/Snackbar.js

@@ -5,7 +5,7 @@ import { Button } from '../Button';
 import { DEFAULT_DURATION, ICONS_MAPPING, TYPE_MAPPING } from './consts';
 import { IconDynamicComponent } from '../../helperComponents/IconDynamicComponent';
 const CustomToast = ({ actionProps, toastId, type = 'information', text }) => {
-    return (_jsxs("div", { "data-id": `${type}-toast-message`, className: "snackbar", children: [_jsxs("div", { className: "snackbar__content", children: [_jsx(IconDynamicComponent, { Component: ICONS_MAPPING[type], type: TYPE_MAPPING[type], size: "medium" }), _jsx(Text, { className: "snackbar__text pl-16 pr-8", type: "primary", size: "standard", weight: "regular", lineHeight: "large", children: text })] }), actionProps ? (_jsx(Button, Object.assign({ size: "small", type: "tertiary" }, actionProps, { onClick: (e) => {
+    return (_jsxs("div", { "data-test-id": `${type}-toast-message`, className: "snackbar", children: [_jsxs("div", { className: "snackbar__content", children: [_jsx(IconDynamicComponent, { Component: ICONS_MAPPING[type], type: TYPE_MAPPING[type], size: "medium" }), _jsx(Text, { className: "snackbar__text pl-16 pr-8", type: "primary", size: "standard", weight: "regular", lineHeight: "large", children: text })] }), actionProps ? (_jsx(Button, Object.assign({ size: "small", type: "tertiary" }, actionProps, { onClick: (e) => {
                     var _a;
                     toast.dismiss(toastId);
                     (_a = actionProps === null || actionProps === void 0 ? void 0 : actionProps.onClick) === null || _a === void 0 ? void 0 : _a.call(actionProps, e);

package/components/Snackbar/types.d.ts

@@ -1,3 +1,4 @@
+import { IFormCompProps } from '../../type';
 import { TButtonPropTypes } from '../Button/types';
 export type TSnackbarTypes = 'success' | 'error' | 'warning' | 'information';
 export interface TToastProps {

package/components/Status/Status.js

@@ -8,11 +8,11 @@ var StatusTextSize;
     StatusTextSize["small"] = "xsmall";
 })(StatusTextSize || (StatusTextSize = {}));
 export const Status = (props) => {
-    const { type = 'primary', size = 'large', text = '', children, className = '', leftIconProps, rightIconProps, withCircle = true, withBackground = false, dataId = '' } = props;
-    return (_jsxs("div", { "data-id": dataId, className: classNames(`status status--${size}`, className, {
+    const { type = 'primary', size = 'large', text = '', children, className = '', leftIconProps, rightIconProps, withCircle = true, withBackground = false, dataTestId = '' } = props;
+    return (_jsxs("div", { "data-test-id": dataTestId, className: classNames(`status status--${size}`, className, {
             status__withBackground: withBackground,
             [`status__withBackground--${type}`]: withBackground
         }), children: [withCircle ? (_jsx("span", { className: classNames('status__circle', 'mr-6', {
                     [`status__circle--${type}`]: true
-                }) })) : null, (leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.Component) ? (_jsx(leftIconProps.Component, Object.assign({ size: "xsmall", type: type, className: "mr-6" }, leftIconProps))) : null, _jsxs("div", { className: "status__label", children: [_jsx(Text, { className: "status__label-text", dataId: dataId ? `${dataId}-text` : '', weight: withBackground ? 'semibold' : 'regular', type: !withCircle || withBackground ? type : 'primary', size: StatusTextSize[size], children: text }), children] }), rightIconProps] }));
+                }) })) : null, (leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.Component) ? (_jsx(leftIconProps.Component, Object.assign({ size: "xsmall", type: type, className: "mr-6" }, leftIconProps))) : null, _jsxs("div", { className: "status__label", children: [_jsx(Text, { className: "status__label-text", dataTestId: dataTestId ? `${dataTestId}-text` : '', weight: withBackground ? 'semibold' : 'regular', type: !withCircle || withBackground ? type : 'primary', size: StatusTextSize[size], children: text }), children] }), rightIconProps] }));
 };

package/components/Status/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
-import { ISVGIconProps } from '../../type';
+import { ISVGIconProps, IFormCompProps } from '../../type';
 export type TStatusTypes = 'primary' | 'disabled' | 'brand' | 'danger' | 'warning' | 'success' | 'information' | 'discovery';
 export interface TStatusProps extends IFormCompProps {
     text?: string;

package/components/Stepper/Stepper.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 export const Stepper = (props) => {
-    const { list, activeStep = 0, setActiveStep, dataId = '' } = props;
+    const { list, activeStep = 0, setActiveStep, dataTestId = '' } = props;
     const [activeStepIndex, setActiveStepIndex] = useState(activeStep);
     const decreaseStepIndex = () => {
         let newIndex = activeStepIndex;
@@ -25,5 +25,5 @@ export const Stepper = (props) => {
         }
     }, [activeStep, activeStepIndex]);
     const Content = list[activeStepIndex];
-    return (_jsx(Content, { activeStepIndex: activeStepIndex, isNextDisabled: activeStepIndex === list.length - 1, isPrevDisabled: activeStepIndex === 0, prevHandler: decreaseStepIndex, nextHandler: increaseStepIndex, stepCount: list.length, dataId: dataId ? `${dataId}-step-${activeStepIndex}` : '' }));
+    return (_jsx(Content, { activeStepIndex: activeStepIndex, isNextDisabled: activeStepIndex === list.length - 1, isPrevDisabled: activeStepIndex === 0, prevHandler: decreaseStepIndex, nextHandler: increaseStepIndex, stepCount: list.length, dataTestId: dataTestId ? `${dataTestId}-step-${activeStepIndex}` : '' }));
 };

package/components/Stepper/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 export interface TStepperContentWrapperProps extends IBaseProps {
     isPrevDisabled: boolean;
     isNextDisabled: boolean;

package/components/Switcher/Switcher.js

@@ -3,7 +3,7 @@ import { forwardRef, useMemo } from 'react';
 import classnames from 'classnames';
 import { Label } from '../../helperComponents/Label';
 export const Switcher = forwardRef((props, ref) => {
-    const { onClick, id = '', name, value, disabled, label, inlineType = false, dataId, size = 'large', setFieldValue, selectedValue, className = '', labelAddons, orientation = 'right', hasSpaceBetween = true } = props;
+    const { onClick, id = '', name, value, disabled, label, inlineType = false, dataTestId, size = 'large', setFieldValue, selectedValue, className = '', labelAddons, orientation = 'right', hasSpaceBetween = true } = props;
     const isChecked = !!value || !!selectedValue;
     const changeHandler = () => {
         if (name && setFieldValue) {
@@ -17,6 +17,6 @@ export const Switcher = forwardRef((props, ref) => {
     return (_jsxs("div", { className: classnames('switcher', {
             'switcher--inline': inlineType,
             'switcher--space-between': hasSpaceBetween
-        }), children: [label && orientation === 'right' && labelComponent, _jsxs("label", { id: id, className: classnames('controller', 'controller--switch', `controller--switch-${size}`, className, { 'controller--disabled': disabled }), children: [_jsx("input", { "data-id": dataId, type: "checkbox", tabIndex: 0, onChange: changeHandler, checked: isChecked, disabled: disabled }), _jsx("span", { className: "controller__icon", children: _jsx("span", { className: "controller__icon__inner", children: _jsx("span", { className: "controller__mark" }) }) })] }), label && orientation === 'left' && labelComponent] }));
+        }), children: [label && orientation === 'right' && labelComponent, _jsxs("label", { id: id, className: classnames('controller', 'controller--switch', `controller--switch-${size}`, className, { 'controller--disabled': disabled }), children: [_jsx("input", { "data-test-id": dataTestId, type: "checkbox", tabIndex: 0, onChange: changeHandler, checked: isChecked, disabled: disabled }), _jsx("span", { className: "controller__icon", children: _jsx("span", { className: "controller__icon__inner", children: _jsx("span", { className: "controller__mark" }) }) })] }), label && orientation === 'left' && labelComponent] }));
 });
 Switcher.displayName = 'Switcher';

package/components/Switcher/types.d.ts

@@ -1,3 +1,4 @@
+import { IFormCompProps } from '../../type';
 export interface TSwitcherProps extends IFormCompProps {
     onClick?: (isChecked: boolean) => void;
     className?: string;

package/components/Tab/Tab.js

@@ -13,8 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TabItem } from './TabItem';
 import classNames from 'classnames';
 export const Tab = (props) => {
-    const { selectedValue, tabItems, onSelect, className, dataId = '' } = props, rest = __rest(props, ["selectedValue", "tabItems", "onSelect", "className", "dataId"]);
-    return (_jsx("div", { className: "tabs-container", "data-id": dataId, children: _jsx("div", { className: classNames('tabs-header-container', className), children: tabItems.map((tabInfo, index) => {
-                return (_jsx(TabItem, Object.assign({ label: tabInfo.label, badgeProps: tabInfo.badgeProps, onClick: () => onSelect(tabInfo.value), val: tabInfo.value, isSelected: selectedValue === tabInfo.value, dataId: (tabInfo === null || tabInfo === void 0 ? void 0 : tabInfo.dataId) || (dataId ? `${dataId}-item-${index}` : ''), disabled: tabInfo.disabled }, rest), tabInfo.value));
+    const { selectedValue, tabItems, onSelect, className, dataTestId = '' } = props, rest = __rest(props, ["selectedValue", "tabItems", "onSelect", "className", "dataTestId"]);
+    return (_jsx("div", { className: "tabs-container", "data-test-id": dataTestId, children: _jsx("div", { className: classNames('tabs-header-container', className), children: tabItems.map((tabInfo, index) => {
+                return (_jsx(TabItem, Object.assign({ label: tabInfo.label, badgeProps: tabInfo.badgeProps, onClick: () => onSelect(tabInfo.value), val: tabInfo.value, isSelected: selectedValue === tabInfo.value, dataTestId: (tabInfo === null || tabInfo === void 0 ? void 0 : tabInfo.dataTestId) || (dataTestId ? `${dataTestId}-item-${index}` : ''), disabled: tabInfo.disabled }, rest), tabInfo.value));
             }) }) }));
 };

package/components/Tab/TabItem.js

@@ -3,8 +3,8 @@ import { Badge } from '../Badge';
 import { noop } from '../../utils/helpers';
 import classNames from 'classnames';
 export const TabItem = (props) => {
-    const { size = 'large', iconProps, badgeProps, label, className = '', disabled = false, isSelected, rightIconProps, val, onClick, dataId } = props;
-    return (_jsxs("div", { "data-id": dataId, onClick: disabled ? noop : onClick, className: classNames('tab', { [`tab--${size}`]: size }, { 'tab--disabled': disabled }, { 'tab--selected': isSelected }, className), children: [(iconProps === null || iconProps === void 0 ? void 0 : iconProps.Component) ? (_jsx(iconProps.Component, Object.assign({ className: "tab__icon mr-8", size: `${size == 'small' ? 'xsmall' : 'small'}` }, iconProps))) : null, _jsx("span", { className: "tab__label", "data-id": dataId ? `${dataId}-label` : '', children: label }), (rightIconProps === null || rightIconProps === void 0 ? void 0 : rightIconProps.Component) ? (_jsx(rightIconProps.Component, Object.assign({ onClick: (e) => {
+    const { size = 'large', iconProps, badgeProps, label, className = '', disabled = false, isSelected, rightIconProps, val, onClick, dataTestId } = props;
+    return (_jsxs("div", { "data-test-id": dataTestId, onClick: disabled ? noop : onClick, className: classNames('tab', { [`tab--${size}`]: size }, { 'tab--disabled': disabled }, { 'tab--selected': isSelected }, className), children: [(iconProps === null || iconProps === void 0 ? void 0 : iconProps.Component) ? (_jsx(iconProps.Component, Object.assign({ className: "tab__icon mr-8", size: `${size == 'small' ? 'xsmall' : 'small'}` }, iconProps))) : null, _jsx("span", { className: "tab__label", "data-test-id": dataTestId ? `${dataTestId}-label` : '', children: label }), (rightIconProps === null || rightIconProps === void 0 ? void 0 : rightIconProps.Component) ? (_jsx(rightIconProps.Component, Object.assign({ onClick: (e) => {
                     if (rightIconProps === null || rightIconProps === void 0 ? void 0 : rightIconProps.action) {
                         e.stopPropagation();
                         rightIconProps === null || rightIconProps === void 0 ? void 0 : rightIconProps.action(val);

package/components/Tab/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps, IFormCompProps } from '../../type';
 import { TBadgeProps } from '../Badge/types';
 export type TTabItem = IBaseProps & {
     value: number | string;

package/components/Table/Header.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { ReactElement } from 'react';
 import { HeaderGroup } from 'react-table';
 type Props = IBaseProps & {
@@ -7,5 +8,5 @@ type Props = IBaseProps & {
     headerGroup: HeaderGroup;
     uniqueKey: string;
 };
-export declare function Header({ headerGroup, tableWidth, withSelect, uniqueKey, fixedHeader, dataId }: Props): ReactElement;
+export declare function Header({ headerGroup, tableWidth, withSelect, uniqueKey, fixedHeader, dataTestId }: Props): ReactElement;
 export {};

package/components/Table/Header.js

@@ -15,7 +15,7 @@ import { calcColumnWidth, CHECKBOX_DEFAULT_WIDTH, CHECKBOX_HEADER_ID } from './u
 import { Text } from '../Text';
 import IconArrowDown from '../SVGIcons/IconArrowDown';
 import IconArrowUp from '../SVGIcons/IconArrowUp';
-export function Header({ headerGroup, tableWidth, withSelect, uniqueKey, fixedHeader = false, dataId = '' }) {
+export function Header({ headerGroup, tableWidth, withSelect, uniqueKey, fixedHeader = false, dataTestId = '' }) {
     const _a = headerGroup.getHeaderGroupProps(), { key: keyheaderGroup } = _a, headerGroupProps = __rest(_a, ["key"]);
     return (_jsx("tr", Object.assign({}, headerGroupProps, { className: classNames({ fixed_header: fixedHeader }), children: headerGroup.headers.map(({ id, minWidth, maxWidth, width, widthInPercent, getHeaderProps, fixed, columnProps, render, isSorted, isSortedDesc, getSortByToggleProps }, i, arr) => {
             var _a;
@@ -24,7 +24,7 @@ export function Header({ headerGroup, tableWidth, withSelect, uniqueKey, fixedHe
                     ? CHECKBOX_DEFAULT_WIDTH
                     : calcColumnWidth(widthInPercent, tableWidth), left: !isSelection && withSelect && fixed === 'left' ? CHECKBOX_DEFAULT_WIDTH : 0 }, (!isSelection && minWidth ? { minWidth } : {})), (!isSelection && maxWidth ? { maxWidth } : {})), (!isSelection && width ? { width } : {}));
             const _b = getHeaderProps((columnProps === null || columnProps === void 0 ? void 0 : columnProps.sortable) ? getSortByToggleProps() : undefined), { key: keyHead } = _b, headProps = __rest(_b, ["key"]);
-            return (_jsx("th", Object.assign({}, headProps, { "data-id": dataId ? `${dataId}-header-${id !== null && id !== void 0 ? id : i}` : '', className: classNames({
+            return (_jsx("th", Object.assign({}, headProps, { "data-test-id": dataTestId ? `${dataTestId}-header-${id !== null && id !== void 0 ? id : i}` : '', className: classNames({
                     fixed_column_left: fixed === 'left',
                     fixed_column_right: fixed === 'right',
                     fixed_checkbox: isSelection && ((_a = arr[i + 1]) === null || _a === void 0 ? void 0 : _a.fixed) === 'left',

package/components/Table/IndeterminateCheckbox.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import React from 'react';
 export declare const IndeterminateCheckbox: React.ForwardRefExoticComponent<IBaseProps & {
     indeterminate: boolean;

package/components/Table/IndeterminateCheckbox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef } from 'react';
 import { Checkbox } from '../Checkbox';
-export const IndeterminateCheckbox = forwardRef(({ indeterminate, checked, onChange, disabled = false, dataId = '' }, ref) => {
+export const IndeterminateCheckbox = forwardRef(({ indeterminate, checked, onChange, disabled = false, dataTestId = '' }, ref) => {
     const defaultRef = useRef(null);
     const resolvedRef = ref || defaultRef;
     useEffect(() => {
@@ -10,6 +10,6 @@ export const IndeterminateCheckbox = forwardRef(({ indeterminate, checked, onCha
     const handleChange = (v) => {
         onChange({ target: { checked: v } });
     };
-    return (_jsx(Checkbox, { disabled: disabled, value: checked, onClick: handleChange, ref: resolvedRef, dataId: dataId, stopPropagation: true }));
+    return (_jsx(Checkbox, { disabled: disabled, value: checked, onClick: handleChange, ref: resolvedRef, dataTestId: dataTestId, stopPropagation: true }));
 });
 IndeterminateCheckbox.displayName = 'IndeterminateCheckbox';

package/components/Table/Row.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { ReactElement } from 'react';
 import { Row as RowType } from 'react-table';
 type Props = IBaseProps & {
@@ -7,5 +8,5 @@ type Props = IBaseProps & {
     selectedFlatRows: RowType[];
     uniqueKey: string;
 };
-export declare function Row({ row, selectedFlatRows, withSelect, uniqueKey, handleRowClick, dataId }: Props): ReactElement;
+export declare function Row({ row, selectedFlatRows, withSelect, uniqueKey, handleRowClick, dataTestId }: Props): ReactElement;
 export {};

package/components/Table/Row.js

@@ -13,14 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import classNames from 'classnames';
 import { CHECKBOX_DEFAULT_WIDTH, CHECKBOX_HEADER_ID } from './utils';
-export function Row({ row, selectedFlatRows, withSelect, uniqueKey, handleRowClick, dataId = '' }) {
+export function Row({ row, selectedFlatRows, withSelect, uniqueKey, handleRowClick, dataTestId = '' }) {
     const isRowSelected = useMemo(() => selectedFlatRows.find((r) => r.id === row.id), [selectedFlatRows]);
     const _a = row.getRowProps(), { key: keyRow } = _a, rowProps = __rest(_a, ["key"]);
-    return (_jsx("tr", Object.assign({}, rowProps, { "data-id": dataId ? `${dataId}-row-${row.index}` : '', className: classNames({ selected: Boolean(isRowSelected) }), onClick: () => handleRowClick === null || handleRowClick === void 0 ? void 0 : handleRowClick(row.original), children: row.cells.map(({ getCellProps, column, render }, i, arr) => {
+    return (_jsx("tr", Object.assign({}, rowProps, { "data-test-id": dataTestId ? `${dataTestId}-row-${row.index}` : '', className: classNames({ selected: Boolean(isRowSelected) }), onClick: () => handleRowClick === null || handleRowClick === void 0 ? void 0 : handleRowClick(row.original), children: row.cells.map(({ getCellProps, column, render }, i, arr) => {
             var _a, _b;
             const isSelection = column.id === CHECKBOX_HEADER_ID;
             const _c = getCellProps(), { key: keycell } = _c, cellProps = __rest(_c, ["key"]);
-            return (_jsx("td", Object.assign({}, cellProps, { "data-id": dataId ? `${dataId}-row-${row.index}-cell-${(_a = column.id) !== null && _a !== void 0 ? _a : i}` : '', style: {
+            return (_jsx("td", Object.assign({}, cellProps, { "data-test-id": dataTestId ? `${dataTestId}-row-${row.index}-cell-${(_a = column.id) !== null && _a !== void 0 ? _a : i}` : '', style: {
                     left: !isSelection && withSelect && (column === null || column === void 0 ? void 0 : column.fixed) === 'left' ? CHECKBOX_DEFAULT_WIDTH : 0
                 }, className: classNames({
                     fixed_column_left: (column === null || column === void 0 ? void 0 : column.fixed) === 'left',

package/components/Table/Table.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { TTableProps } from './types';
-export declare function Table({ columns, data, onChange, fixedHeader, withSelect, handleRowClick, className, language, containerRefHandler, submitButtons, dataId }: TTableProps): ReactElement;
+export declare function Table({ columns, data, onChange, fixedHeader, withSelect, handleRowClick, className, language, containerRefHandler, submitButtons, dataTestId }: TTableProps): ReactElement;

package/components/Table/Table.js

@@ -11,7 +11,7 @@ import { TABLE_LOCALIZATION } from './localization';
 import { setTranslationValue } from '../../utils/helpers';
 import IconCheckmark from '../SVGIcons/IconCheckmark';
 import IconDismiss from '../SVGIcons/IconDismiss';
-export function Table({ columns, data, onChange, fixedHeader, withSelect = false, handleRowClick, className, language = 'en', containerRefHandler, submitButtons, dataId = '' }) {
+export function Table({ columns, data, onChange, fixedHeader, withSelect = false, handleRowClick, className, language = 'en', containerRefHandler, submitButtons, dataTestId = '' }) {
     const tableRef = useRef(null);
     const [tableWidth, setTableWidth] = useState(400);
     const uniqueKey = useId();
@@ -42,7 +42,7 @@ export function Table({ columns, data, onChange, fixedHeader, withSelect = false
     const { getTableProps, getTableBodyProps, selectedFlatRows, headerGroups, rows, prepareRow, toggleAllRowsSelected, state } = useTable({
         columns: sortedColumns,
         data
-    }, useSortBy, useRowSelect, (hooks) => setSelectedRows(hooks, withSelect, dataId));
+    }, useSortBy, useRowSelect, (hooks) => setSelectedRows(hooks, withSelect, dataTestId));
     const handleResize = useCallback(() => {
         var _a;
         if (tableRef.current) {
@@ -65,10 +65,10 @@ export function Table({ columns, data, onChange, fixedHeader, withSelect = false
     const onClearSelectedRows = useCallback(() => {
         toggleAllRowsSelected(false);
     }, []);
-    return (_jsxs("div", { ref: containerRefHandler, "data-id": dataId, children: [withSelect && selectedFlatRows.length > 0 && (_jsxs("div", { className: "table-wrapper__selected-rows", children: [_jsx(Button, { buttonText: setTranslationValue(TABLE_LOCALIZATION[language].n_selected || '', selectedFlatRows.length), onClick: onClearSelectedRows, type: "tertiary", size: "medium", iconProps: { alignment: 'left', Component: IconDismiss }, dataId: dataId ? `${dataId}-clear-selected` : '' }), submitButtons === null || submitButtons === void 0 ? void 0 : submitButtons.map(({ buttonText, isLoading, onClick, iconProps }, i) => (_jsx(Button, { iconProps: iconProps || { alignment: 'left', Component: IconCheckmark }, onClick: (event) => {
+    return (_jsxs("div", { ref: containerRefHandler, "data-test-id": dataTestId, children: [withSelect && selectedFlatRows.length > 0 && (_jsxs("div", { className: "table-wrapper__selected-rows", children: [_jsx(Button, { buttonText: setTranslationValue(TABLE_LOCALIZATION[language].n_selected || '', selectedFlatRows.length), onClick: onClearSelectedRows, type: "tertiary", size: "medium", iconProps: { alignment: 'left', Component: IconDismiss }, dataTestId: dataTestId ? `${dataTestId}-clear-selected` : '' }), submitButtons === null || submitButtons === void 0 ? void 0 : submitButtons.map(({ buttonText, isLoading, onClick, iconProps }, i) => (_jsx(Button, { iconProps: iconProps || { alignment: 'left', Component: IconCheckmark }, onClick: (event) => {
                             onClick(event, state, onClearSelectedRows);
-                        }, buttonText: buttonText || 'Submit', type: "secondary", size: "medium", className: "mr-8", isLoading: isLoading, dataId: dataId ? `${dataId}-submit-${i}` : '' })))] })), _jsx("div", { onScroll: dispatchScrollEvent, className: classNames('table-wrapper scrollbar scrollbar--horizontal scrollbar--vertical', className, { 'table-row-clickable': !!handleRowClick }), style: { maxHeight: fixedHeader === null || fixedHeader === void 0 ? void 0 : fixedHeader.y }, children: _jsxs("table", Object.assign({}, getTableProps(), { ref: tableRef, children: [_jsx("thead", { children: headerGroups.map((headerGroup, i) => (_jsx(Header, { withSelect: withSelect, fixedHeader: Boolean(fixedHeader), headerGroup: headerGroup, tableWidth: tableWidth, uniqueKey: uniqueKey, dataId: dataId }, `table_head_${uniqueKey}_${i}`))) }), _jsx("tbody", Object.assign({}, getTableBodyProps(), { children: rows.map((row) => {
+                        }, buttonText: buttonText || 'Submit', type: "secondary", size: "medium", className: "mr-8", isLoading: isLoading, dataTestId: dataTestId ? `${dataTestId}-submit-${i}` : '' })))] })), _jsx("div", { onScroll: dispatchScrollEvent, className: classNames('table-wrapper scrollbar scrollbar--horizontal scrollbar--vertical', className, { 'table-row-clickable': !!handleRowClick }), style: { maxHeight: fixedHeader === null || fixedHeader === void 0 ? void 0 : fixedHeader.y }, children: _jsxs("table", Object.assign({}, getTableProps(), { ref: tableRef, children: [_jsx("thead", { children: headerGroups.map((headerGroup, i) => (_jsx(Header, { withSelect: withSelect, fixedHeader: Boolean(fixedHeader), headerGroup: headerGroup, tableWidth: tableWidth, uniqueKey: uniqueKey, dataTestId: dataTestId }, `table_head_${uniqueKey}_${i}`))) }), _jsx("tbody", Object.assign({}, getTableBodyProps(), { children: rows.map((row) => {
                                 prepareRow(row);
-                                return (_jsx(Row, { handleRowClick: handleRowClick, withSelect: withSelect, selectedFlatRows: selectedFlatRows, row: row, uniqueKey: uniqueKey, dataId: dataId }, `table_row_${uniqueKey}_${row.id}`));
+                                return (_jsx(Row, { handleRowClick: handleRowClick, withSelect: withSelect, selectedFlatRows: selectedFlatRows, row: row, uniqueKey: uniqueKey, dataTestId: dataTestId }, `table_row_${uniqueKey}_${row.id}`));
                             }) }))] })) })] }));
 }

package/components/Table/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { Column, TableState } from 'react-table';
 import { TButtonPropTypes } from '../Button/types';
 type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;

package/components/Table/utils.d.ts

@@ -1,5 +1,5 @@
 import { Hooks } from 'react-table';
 export declare const CHECKBOX_HEADER_ID = "selection";
 export declare const CHECKBOX_DEFAULT_WIDTH = 48;
-export declare function setSelectedRows(hooks: Hooks, withSelect: boolean, dataId?: string): void;
+export declare function setSelectedRows(hooks: Hooks, withSelect: boolean, dataTestId?: string): void;
 export declare function calcColumnWidth(percent: number, tableWidth: number): number;

package/components/Table/utils.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { IndeterminateCheckbox } from './IndeterminateCheckbox';
 export const CHECKBOX_HEADER_ID = 'selection';
 export const CHECKBOX_DEFAULT_WIDTH = 48;
-export function setSelectedRows(hooks, withSelect, dataId = '') {
+export function setSelectedRows(hooks, withSelect, dataTestId = '') {
     if (withSelect) {
         hooks.visibleColumns.push((columns) => [
             {
@@ -15,7 +15,7 @@ export function setSelectedRows(hooks, withSelect, dataId = '') {
                         checked: allSelected,
                         indeterminate: !allSelected && someSelected,
                         disabled: allEnabledRows.length === 0
-                    }), { dataId: dataId ? `${dataId}-select-all` : '', onChange: (e) => {
+                    }), { dataTestId: dataTestId ? `${dataTestId}-select-all` : '', onChange: (e) => {
                             const checked = e.target.checked;
                             allEnabledRows.forEach((row) => {
                                 toggleRowSelected(row.id, checked);
@@ -26,7 +26,7 @@ export function setSelectedRows(hooks, withSelect, dataId = '') {
                     const disabled = 'enableSelection' in row.original ? !row.original.enableSelection : false;
                     return (_jsx(IndeterminateCheckbox, Object.assign({}, row.getToggleRowSelectedProps({
                         disabled
-                    }), { dataId: dataId ? `${dataId}-row-${row.index}-select` : '' })));
+                    }), { dataTestId: dataTestId ? `${dataTestId}-row-${row.index}-select` : '' })));
                 }
             },
             ...columns

package/components/TableV2/AdvancedPagination.d.ts

@@ -1,8 +1,9 @@
+import { IBaseProps } from '../../type';
 import type { Table } from '@tanstack/react-table';
 interface PaginationProps<T> extends IBaseProps {
     table: Table<T>;
     totalCount: number;
     buttonText?: string;
 }
-export declare function AdvancedPagination<TData>({ table, totalCount, buttonText, dataId }: PaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function AdvancedPagination<TData>({ table, totalCount, buttonText, dataTestId }: PaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/TableV2/AdvancedPagination.js

@@ -11,7 +11,7 @@ import IconChevronRight from '../SVGIcons/IconChevronRight';
 import IconChevronDoubleLeft from '../SVGIcons/IconChevronDoubleLeft';
 import IconChevronDoubleRight from '../SVGIcons/IconChevronDoubleRight';
 import IconMore from '../SVGIcons/IconMore';
-export function AdvancedPagination({ table, totalCount, buttonText, dataId = '' }) {
+export function AdvancedPagination({ table, totalCount, buttonText, dataTestId = '' }) {
     const [navigatePage, setNavigatePage] = useState('1');
     const pageIndex = table.getState().pagination.pageIndex;
     const pageSize = table.getState().pagination.pageSize;
@@ -56,7 +56,7 @@ export function AdvancedPagination({ table, totalCount, buttonText, dataId = ''
             setNavigatePage('1');
         }
     }, [table.getPageCount(), table.getState().pagination]);
-    return (_jsxs("div", { className: "advanced-table__pagination", "data-id": dataId, children: [_jsx(Select, { setSelectedItem: (value) => onRowCountChange(value), selectedItem: `${pageSize}`, className: 'no-border', options: OPTIONS, dataId: dataId ? `${dataId}-page-size` : '' }), _jsxs("div", { className: 'advanced-table__pagination__right', children: [_jsxs(Text, { type: 'tertiary', children: [pageIndex * pageSize + 1, " - ", (pageIndex + 1) * pageSize, " / ", totalCount] }), _jsxs("div", { className: "flexbox align-items--center", children: [_jsx(Input, { currentValue: navigatePage, size: "small", onChange: (e) => onNavigateToPage(e.target.value), className: "advanced-table__pagination__right__input mr-8", dataId: dataId ? `${dataId}-page-input` : '' }), _jsx(Button, { onClick: onGoToPage, type: "secondary", size: "medium", buttonText: buttonText !== null && buttonText !== void 0 ? buttonText : 'Go to page', dataId: dataId ? `${dataId}-goto` : '' })] }), _jsxs("ul", { className: "pagination", "data-id": dataId ? `${dataId}-pagination` : '', children: [_jsx("li", { className: `previous ${!table.getCanPreviousPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'prev', role: 'button', onClick: () => table.firstPage(), "data-id": dataId ? `${dataId}-first` : '', children: _jsx(IconChevronDoubleLeft, { size: 'small' }) }) }), _jsx("li", { className: `previous ${!table.getCanPreviousPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'prev', role: 'button', onClick: () => table.previousPage(), "data-id": dataId ? `${dataId}-prev` : '', children: _jsx(IconChevronLeft, { size: 'small' }) }) }), getVisiblePageNumbers().map((pageNumber, index) => pageNumber === '---' ? (_jsx("li", { className: 'pagination__more', children: _jsx("a", { role: 'button', onClick: () => table.setPageIndex(+pageIndex - 3), "data-id": dataId ? `${dataId}-ellipsis-prev` : '', children: _jsx(IconMore, { size: 'small' }) }) }, `ellipsis-${index}`)) : pageNumber === '+++' ? (_jsx("li", { className: 'pagination__more', children: _jsx("a", { role: 'button', onClick: () => table.setPageIndex(+pageIndex + 3), "data-id": dataId ? `${dataId}-ellipsis-next` : '', children: _jsx(IconMore, { size: 'small' }) }) }, `ellipsis-${index}`)) : (_jsx("li", { className: classnames({
+    return (_jsxs("div", { className: "advanced-table__pagination", "data-test-id": dataTestId, children: [_jsx(Select, { setSelectedItem: (value) => onRowCountChange(value), selectedItem: `${pageSize}`, className: 'no-border', options: OPTIONS, dataTestId: dataTestId ? `${dataTestId}-page-size` : '' }), _jsxs("div", { className: 'advanced-table__pagination__right', children: [_jsxs(Text, { type: 'tertiary', children: [pageIndex * pageSize + 1, " - ", (pageIndex + 1) * pageSize, " / ", totalCount] }), _jsxs("div", { className: "flexbox align-items--center", children: [_jsx(Input, { currentValue: navigatePage, size: "small", onChange: (e) => onNavigateToPage(e.target.value), className: "advanced-table__pagination__right__input mr-8", dataTestId: dataTestId ? `${dataTestId}-page-input` : '' }), _jsx(Button, { onClick: onGoToPage, type: "secondary", size: "medium", buttonText: buttonText !== null && buttonText !== void 0 ? buttonText : 'Go to page', dataTestId: dataTestId ? `${dataTestId}-goto` : '' })] }), _jsxs("ul", { className: "pagination", "data-test-id": dataTestId ? `${dataTestId}-pagination` : '', children: [_jsx("li", { className: `previous ${!table.getCanPreviousPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'prev', role: 'button', onClick: () => table.firstPage(), "data-test-id": dataTestId ? `${dataTestId}-first` : '', children: _jsx(IconChevronDoubleLeft, { size: 'small' }) }) }), _jsx("li", { className: `previous ${!table.getCanPreviousPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'prev', role: 'button', onClick: () => table.previousPage(), "data-test-id": dataTestId ? `${dataTestId}-prev` : '', children: _jsx(IconChevronLeft, { size: 'small' }) }) }), getVisiblePageNumbers().map((pageNumber, index) => pageNumber === '---' ? (_jsx("li", { className: 'pagination__more', children: _jsx("a", { role: 'button', onClick: () => table.setPageIndex(+pageIndex - 3), "data-test-id": dataTestId ? `${dataTestId}-ellipsis-prev` : '', children: _jsx(IconMore, { size: 'small' }) }) }, `ellipsis-${index}`)) : pageNumber === '+++' ? (_jsx("li", { className: 'pagination__more', children: _jsx("a", { role: 'button', onClick: () => table.setPageIndex(+pageIndex + 3), "data-test-id": dataTestId ? `${dataTestId}-ellipsis-next` : '', children: _jsx(IconMore, { size: 'small' }) }) }, `ellipsis-${index}`)) : (_jsx("li", { className: classnames({
                                     ['active']: pageNumber === pageIndex + 1
-                                }), children: _jsx("a", { role: 'button', onClick: () => table.setPageIndex(+pageNumber - 1), "data-id": dataId ? `${dataId}-page-${pageNumber}` : '', children: pageNumber }) }, pageNumber))), _jsx("li", { className: `next ${!table.getCanNextPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'next', role: 'button', onClick: () => table.nextPage(), "data-id": dataId ? `${dataId}-next` : '', children: _jsx(IconChevronRight, { size: 'small' }) }) }), _jsx("li", { className: `next ${!table.getCanNextPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'next', role: 'button', onClick: () => table.lastPage(), "data-id": dataId ? `${dataId}-last` : '', children: _jsx(IconChevronDoubleRight, { size: 'small' }) }) })] })] })] }));
+                                }), children: _jsx("a", { role: 'button', onClick: () => table.setPageIndex(+pageNumber - 1), "data-test-id": dataTestId ? `${dataTestId}-page-${pageNumber}` : '', children: pageNumber }) }, pageNumber))), _jsx("li", { className: `next ${!table.getCanNextPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'next', role: 'button', onClick: () => table.nextPage(), "data-test-id": dataTestId ? `${dataTestId}-next` : '', children: _jsx(IconChevronRight, { size: 'small' }) }) }), _jsx("li", { className: `next ${!table.getCanNextPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'next', role: 'button', onClick: () => table.lastPage(), "data-test-id": dataTestId ? `${dataTestId}-last` : '', children: _jsx(IconChevronDoubleRight, { size: 'small' }) }) })] })] })] }));
 }

package/components/TableV2/ColumnHeader.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import type { CSSProperties } from 'react';
 import type { Header } from '@tanstack/react-table';
 interface DraggableColumnHeaderProps<TData> extends IBaseProps {
@@ -5,5 +6,5 @@ interface DraggableColumnHeaderProps<TData> extends IBaseProps {
     isPinned?: boolean;
     pinnedStyles: CSSProperties;
 }
-export declare function ColumnHeader<TData>({ header, pinnedStyles, dataId }: DraggableColumnHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function ColumnHeader<TData>({ header, pinnedStyles, dataTestId }: DraggableColumnHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/TableV2/ColumnHeader.js

@@ -6,7 +6,7 @@ import IconArrowSort from '../SVGIcons/IconArrowSort';
 import IconArrowUp from '../SVGIcons/IconArrowUp';
 import { Text } from '../Text';
 import classnames from 'classnames';
-export function ColumnHeader({ header, pinnedStyles, dataId = '' }) {
+export function ColumnHeader({ header, pinnedStyles, dataTestId = '' }) {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
         id: header.id
     });
@@ -23,10 +23,10 @@ export function ColumnHeader({ header, pinnedStyles, dataId = '' }) {
             position: 'relative',
             zIndex: isDragging ? 1 : 0
         };
-    return (_jsxs("th", Object.assign({ ref: setNodeRef, "data-id": dataId ? `${dataId}-header-${header.column.id}` : '', style: Object.assign(Object.assign({}, style), pinnedStyles), className: classnames('select-none', {
+    return (_jsxs("th", Object.assign({ ref: setNodeRef, "data-test-id": dataTestId ? `${dataTestId}-header-${header.column.id}` : '', style: Object.assign(Object.assign({}, style), pinnedStyles), className: classnames('select-none', {
             ['with-checkbox']: header.column.id === 'select',
             ['actions-header']: header.column.id === 'actions',
             ['cursor-pointer']: header.column.getCanSort()
-        }) }, attributes, { children: [_jsxs("div", { onClick: header.column.getToggleSortingHandler(), "data-id": dataId ? `${dataId}-sort-${header.column.id}` : '', className: "flexbox align-items--center", children: [_jsx("div", Object.assign({}, listeners, { children: _jsx(Text, { className: "text-left", weight: 'bold', children: flexRender(header.column.columnDef.header, header.getContext()) }) })), _jsx("span", { className: "ml-4", children: header.column.getCanSort() &&
+        }) }, attributes, { children: [_jsxs("div", { onClick: header.column.getToggleSortingHandler(), "data-test-id": dataTestId ? `${dataTestId}-sort-${header.column.id}` : '', className: "flexbox align-items--center", children: [_jsx("div", Object.assign({}, listeners, { children: _jsx(Text, { className: "text-left", weight: 'bold', children: flexRender(header.column.columnDef.header, header.getContext()) }) })), _jsx("span", { className: "ml-4", children: header.column.getCanSort() &&
                             (header.column.getIsSorted() === 'asc' ? (_jsx(IconArrowUp, { size: "xsmall" })) : header.column.getIsSorted() === 'desc' ? (_jsx(IconArrowDown, { size: "xsmall" })) : (_jsx(IconArrowSort, { size: "xsmall" }))) })] }), _jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: "resize-icon select-none touch-none" })] })));
 }

package/components/TableV2/IndeterminateCheckbox.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import React from 'react';
 export declare const IndeterminateCheckbox: React.ForwardRefExoticComponent<IBaseProps & {
     indeterminate: boolean;

package/components/TableV2/IndeterminateCheckbox.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef } from 'react';
 import { Checkbox } from '../Checkbox';
 import classNames from 'classnames';
-export const IndeterminateCheckbox = forwardRef(({ indeterminate, checked, onChange, disabled, dataId = '' }, ref) => {
+export const IndeterminateCheckbox = forwardRef(({ indeterminate, checked, onChange, disabled, dataTestId = '' }, ref) => {
     const defaultRef = useRef(null);
     const resolvedRef = ref !== null && ref !== void 0 ? ref : defaultRef;
     useEffect(() => {
@@ -11,6 +11,6 @@ export const IndeterminateCheckbox = forwardRef(({ indeterminate, checked, onCha
     const handleChange = (v) => {
         onChange({ target: { checked: v } });
     };
-    return (_jsx("div", { className: 'actions-list', children: _jsx(Checkbox, { className: classNames('actions-list__checkbox', { 'active-checkbox': checked }), value: checked, disabled: disabled, onClick: handleChange, ref: resolvedRef, dataId: dataId }) }));
+    return (_jsx("div", { className: 'actions-list', children: _jsx(Checkbox, { className: classNames('actions-list__checkbox', { 'active-checkbox': checked }), value: checked, disabled: disabled, onClick: handleChange, ref: resolvedRef, dataTestId: dataTestId }) }));
 });
 IndeterminateCheckbox.displayName = 'IndeterminateCheckbox';

package/components/TableV2/Table.d.ts

@@ -1,3 +1,3 @@
 import type { TTableProps } from './types';
 import 'react-loading-skeleton/dist/skeleton.css';
-export declare function Table<TData>({ data, dataId, columns, isLoading, hasError, isActionsVisible, totalCount, emptyTitle, emptySubTitle, emptyIllustration, withSelect, withBorder, defaultPageIndex, defaultPageSize, defaultHiddenColumns, collapsibleRows, renderExpandedContent, renderHeader, renderFooter, onSortChange, onRowClick, tableSettings, onRowSelection, onColumnSizing, onPaginationChange }: TTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData>({ data, dataTestId, columns, isLoading, hasError, isActionsVisible, totalCount, emptyTitle, emptySubTitle, emptyIllustration, withSelect, withBorder, defaultPageIndex, defaultPageSize, defaultHiddenColumns, collapsibleRows, renderExpandedContent, renderHeader, renderFooter, onSortChange, onRowClick, tableSettings, onRowSelection, onColumnSizing, onPaginationChange }: TTableProps<TData>): import("react/jsx-runtime").JSX.Element;