hrm_ui_lib 3.4.2 → 4.0.0

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;

package/components/TableV2/Table.js

@@ -19,19 +19,19 @@ var ColumnId;
     ColumnId["Actions"] = "actions";
     ColumnId["Expand"] = "expand";
 })(ColumnId || (ColumnId = {}));
-const ExpandColumn = ({ row, expandedRows, onToggle, dataId = '' }) => {
+const ExpandColumn = ({ row, expandedRows, onToggle, dataTestId = '' }) => {
     var _a, _b, _c;
     const hasSubRows = ((_a = row.original) === null || _a === void 0 ? void 0 : _a.subRows) && ((_c = (_b = row.original) === null || _b === void 0 ? void 0 : _b.subRows) === null || _c === void 0 ? void 0 : _c.length) > 0;
     if (!hasSubRows)
         return null;
     return (_jsx(Button, { type: "tertiary", size: "medium", className: classnames('advanced-table__expand-button'), iconProps: {
             Component: expandedRows.has(row.id) ? IconChevronUp : IconChevronDown
-        }, dataId: dataId ? `${dataId}-expand-${row.index}` : '', onClick: (e) => {
+        }, dataTestId: dataTestId ? `${dataTestId}-expand-${row.index}` : '', onClick: (e) => {
             e.stopPropagation();
             onToggle(row.id);
         } }));
 };
-export function Table({ data, dataId = '', columns, isLoading, hasError, isActionsVisible = false, totalCount = 0, emptyTitle, emptySubTitle, emptyIllustration, withSelect = false, withBorder = true, defaultPageIndex, defaultPageSize, defaultHiddenColumns, collapsibleRows = false, renderExpandedContent, renderHeader, renderFooter, onSortChange, onRowClick, tableSettings, onRowSelection, onColumnSizing, onPaginationChange }) {
+export function Table({ data, dataTestId = '', columns, isLoading, hasError, isActionsVisible = false, totalCount = 0, emptyTitle, emptySubTitle, emptyIllustration, withSelect = false, withBorder = true, defaultPageIndex, defaultPageSize, defaultHiddenColumns, collapsibleRows = false, renderExpandedContent, renderHeader, renderFooter, onSortChange, onRowClick, tableSettings, onRowSelection, onColumnSizing, onPaginationChange }) {
     const [expandedRows, setExpandedRows] = useState(new Set());
     const handleToggleRow = useCallback((rowId) => {
         setExpandedRows((prev) => {
@@ -52,7 +52,7 @@ export function Table({ data, dataId = '', columns, isLoading, hasError, isActio
         size: 50,
         minSize: 50,
         maxSize: 50,
-        cell: ({ row }) => (_jsx(ExpandColumn, { row: row, expandedRows: expandedRows, onToggle: handleToggleRow, dataId: dataId })),
+        cell: ({ row }) => (_jsx(ExpandColumn, { row: row, expandedRows: expandedRows, onToggle: handleToggleRow, dataTestId: dataTestId })),
         meta: {
             enableHiding: false,
             enableColumnDragging: false,
@@ -61,10 +61,10 @@ export function Table({ data, dataId = '', columns, isLoading, hasError, isActio
             headerVisible: false,
             enableSorting: false
         }
-    }), [expandedRows, handleToggleRow, dataId]);
+    }), [expandedRows, handleToggleRow, dataTestId]);
     const { table, sensors, handleDragStart, handleDragEnd, handleDragCancel, activeHeader } = useTableControl({
         data,
-        dataId,
+        dataTestId,
         tableSettings,
         columns: collapsibleRows ? [expandColumn, ...columns] : columns,
         withSelect,
@@ -101,26 +101,26 @@ export function Table({ data, dataId = '', columns, isLoading, hasError, isActio
     const skeletonRowSize = useMemo(() => {
         return Array.from({ length: table.getState().pagination.pageSize });
     }, [table.getState().pagination.pageSize]);
-    return (_jsxs("div", { "data-id": dataId, className: classnames('advanced-table', {
+    return (_jsxs("div", { "data-test-id": dataTestId, className: classnames('advanced-table', {
             'with-border': withBorder
-        }), children: [header, _jsx("div", { className: classnames('advanced-table__inner scrollbar scrollbar--horizontal scrollbar--vertical'), children: _jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsx("div", { children: _jsx("table", { style: tableStyle, children: !isLoading && (!(data === null || data === void 0 ? void 0 : data.length) || hasError) ? (_jsx(Empty, { mainMessage: emptyTitle, paragraphMessage: emptySubTitle, illustration: emptyIllustration, dataId: dataId ? `${dataId}-empty` : '' })) : (_jsxs(_Fragment, { children: [_jsx("thead", { className: classnames('advanced-table__thead'), children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: _jsx(SortableContext, { items: headerGroup.headers.map((header) => header.id), strategy: horizontalListSortingStrategy, children: headerGroup.headers.map((header) => {
+        }), children: [header, _jsx("div", { className: classnames('advanced-table__inner scrollbar scrollbar--horizontal scrollbar--vertical'), children: _jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsx("div", { children: _jsx("table", { style: tableStyle, children: !isLoading && (!(data === null || data === void 0 ? void 0 : data.length) || hasError) ? (_jsx(Empty, { mainMessage: emptyTitle, paragraphMessage: emptySubTitle, illustration: emptyIllustration, dataTestId: dataTestId ? `${dataTestId}-empty` : '' })) : (_jsxs(_Fragment, { children: [_jsx("thead", { className: classnames('advanced-table__thead'), children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: _jsx(SortableContext, { items: headerGroup.headers.map((header) => header.id), strategy: horizontalListSortingStrategy, children: headerGroup.headers.map((header) => {
                                                         if (header.id === ColumnId.Actions && !isActionsVisible)
                                                             return null;
-                                                        return (_jsx(ColumnHeader, { pinnedStyles: Object.assign({}, getCommonPinningStyles(header.column)), header: header, dataId: dataId }, header.id));
+                                                        return (_jsx(ColumnHeader, { pinnedStyles: Object.assign({}, getCommonPinningStyles(header.column)), header: header, dataTestId: dataTestId }, header.id));
                                                     }) }) }, headerGroup.id))) }), _jsx("tbody", { children: isLoading
-                                                ? skeletonRowSize.map((_, i) => (_jsx("tr", { "data-id": dataId ? `${dataId}-loader-row-${i}` : '', children: table.getVisibleFlatColumns().map((column) => (_jsx("td", { className: classnames({
+                                                ? skeletonRowSize.map((_, i) => (_jsx("tr", { "data-test-id": dataTestId ? `${dataTestId}-loader-row-${i}` : '', children: table.getVisibleFlatColumns().map((column) => (_jsx("td", { className: classnames({
                                                             'with-checkbox': column.id === ColumnId.Select,
                                                             'pinned-cell': column.getIsPinned(),
                                                             'action-column': column.id === ColumnId.Actions && !isActionsVisible
                                                         }), style: Object.assign({}, getCommonPinningStyles(column)), children: _jsx(Skeleton, {}) }, column.id))) }, `skeleton-row-${i}`)))
-                                                : table.getRowModel().rows.map((row) => (_jsxs(React.Fragment, { children: [_jsx("tr", { className: classnames({ selected: row.getIsSelected() }), "data-id": dataId ? `${dataId}-row-${row.index}` : '', children: row.getVisibleCells().map((cell) => (_jsx("td", { className: classnames({
+                                                : table.getRowModel().rows.map((row) => (_jsxs(React.Fragment, { children: [_jsx("tr", { className: classnames({ selected: row.getIsSelected() }), "data-test-id": dataTestId ? `${dataTestId}-row-${row.index}` : '', children: row.getVisibleCells().map((cell) => (_jsx("td", { className: classnames({
                                                                     'with-checkbox': cell.column.id === ColumnId.Select,
                                                                     'pinned-cell': cell.column.getIsPinned(),
                                                                     'action-column': cell.column.id === ColumnId.Actions && !isActionsVisible,
                                                                     'expand-column': cell.column.id === ColumnId.Expand
-                                                                }), id: cell.id, "data-id": dataId
-                                                                    ? `${dataId}-row-${row.index}-cell-${cell.column.id}`
+                                                                }), id: cell.id, "data-test-id": dataTestId
+                                                                    ? `${dataTestId}-row-${row.index}-cell-${cell.column.id}`
                                                                     : '', onClick: () => handleRowClick(cell.column, row), style: Object.assign({}, getCommonPinningStyles(cell.column)), children: cell.column.id === ColumnId.Actions && !isActionsVisible ? (_jsx("div", { className: classnames('actions-list__right'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) })) : (flexRender(cell.column.columnDef.cell, cell.getContext())) }, cell.id))) }), collapsibleRows &&
                                                             expandedRows.has(row.id) &&
-                                                            renderExpandedContent && (_jsx("tr", { className: classnames('advanced-table__expanded-row'), "data-id": dataId ? `${dataId}-row-${row.index}-expanded` : '', children: _jsx("td", { colSpan: row.getVisibleCells().length, children: renderExpandedContent(row) }) }))] }, row.id))) })] })) }) }), _jsx(DragOverlay, { dropAnimation: null, children: activeHeader && (_jsx("table", { style: { width: activeHeader.getSize() }, children: _jsx("thead", { children: _jsx("tr", { children: _jsx("th", { className: classnames('draggable-col'), style: { width: activeHeader.getSize() }, children: _jsx(Text, { weight: 'bold', children: flexRender(activeHeader.column.columnDef.header, activeHeader.getContext()) }) }) }) }) })) })] }) }), !!data.length && !hasError && footer] }));
+                                                            renderExpandedContent && (_jsx("tr", { className: classnames('advanced-table__expanded-row'), "data-test-id": dataTestId ? `${dataTestId}-row-${row.index}-expanded` : '', children: _jsx("td", { colSpan: row.getVisibleCells().length, children: renderExpandedContent(row) }) }))] }, row.id))) })] })) }) }), _jsx(DragOverlay, { dropAnimation: null, children: activeHeader && (_jsx("table", { style: { width: activeHeader.getSize() }, children: _jsx("thead", { children: _jsx("tr", { children: _jsx("th", { className: classnames('draggable-col'), style: { width: activeHeader.getSize() }, children: _jsx(Text, { weight: 'bold', children: flexRender(activeHeader.column.columnDef.header, activeHeader.getContext()) }) }) }) }) })) })] }) }), !!data.length && !hasError && footer] }));
 }

package/components/TableV2/hooks/useTableControl.d.ts

@@ -1,6 +1,6 @@
 import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
 import type { Column, TTableProps } from '../types';
-export declare function useTableControl<TData>({ withSelect, columns, data, dataId, tableSettings, totalCount, defaultPageSize, defaultPageIndex, defaultHiddenColumns, onSortChange, onRowSelection, onColumnSizing, onPaginationChange }: TTableProps<TData>): {
+export declare function useTableControl<TData>({ withSelect, columns, data, dataTestId, tableSettings, totalCount, defaultPageSize, defaultPageIndex, defaultHiddenColumns, onSortChange, onRowSelection, onColumnSizing, onPaginationChange }: TTableProps<TData>): {
     table: import("@tanstack/react-table").Table<TData>;
     activeHeader: import("@tanstack/react-table").Header<TData, unknown> | null | undefined;
     sensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];

package/components/TableV2/hooks/useTableControl.js

@@ -7,7 +7,7 @@ import { arrayMove } from '@dnd-kit/sortable';
 import { loadTableSettings } from '../loadTableSettings';
 import { useTableColumnSettings } from './useTableColumnSettings';
 import { STORAGE_TYPE, TABLE_NAME_PREFIX } from '../constants';
-export function useTableControl({ withSelect, columns, data, dataId = '', tableSettings, totalCount = 0, defaultPageSize = 10, defaultPageIndex = 0, defaultHiddenColumns = [], onSortChange, onRowSelection, onColumnSizing, onPaginationChange }) {
+export function useTableControl({ withSelect, columns, data, dataTestId = '', tableSettings, totalCount = 0, defaultPageSize = 10, defaultPageIndex = 0, defaultHiddenColumns = [], onSortChange, onRowSelection, onColumnSizing, onPaginationChange }) {
     var _a, _b;
     const shouldPersistToStorage = (tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.persistColumnSettings) === STORAGE_TYPE.LOCAL;
     const shouldEmitExternal = (tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.persistColumnSettings) === STORAGE_TYPE.EXTERNAL;
@@ -40,12 +40,12 @@ export function useTableControl({ withSelect, columns, data, dataId = '', tableS
                 enableHiding: false,
                 enableColumnDragging: false,
                 enablePinning: true,
-                header: ({ table }) => (_jsx(IndeterminateCheckbox, { checked: table.getIsAllRowsSelected(), indeterminate: table.getIsSomeRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), dataId: dataId ? `${dataId}-select-all` : '' })),
-                cell: ({ row }) => (_jsx(IndeterminateCheckbox, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), indeterminate: row.getIsSomeSelected(), onChange: row.getToggleSelectedHandler(), dataId: dataId ? `${dataId}-row-${row.index}-select` : '' }))
+                header: ({ table }) => (_jsx(IndeterminateCheckbox, { checked: table.getIsAllRowsSelected(), indeterminate: table.getIsSomeRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), dataTestId: dataTestId ? `${dataTestId}-select-all` : '' })),
+                cell: ({ row }) => (_jsx(IndeterminateCheckbox, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), indeterminate: row.getIsSomeSelected(), onChange: row.getToggleSelectedHandler(), dataTestId: dataTestId ? `${dataTestId}-row-${row.index}-select` : '' }))
             });
         }
         return columnsList;
-    }, [columns, dataId]);
+    }, [columns, dataTestId]);
     const [columnOrder, setColumnOrder] = useState(((_b = savedSettings.columnOrder) === null || _b === void 0 ? void 0 : _b.length) && savedSettings.columnOrder.length === memoizedColumns.length
         ? savedSettings.columnOrder
         : memoizedColumns.map((column) => column.id));

package/components/TableV2/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import type { ColumnDef, ColumnSizingState, PaginationState, RowSelectionState, Table, Row } from '@tanstack/react-table';
 import type { ReactNode } from 'react';
 export type TTable<TData> = Table<TData>;

package/components/Text/Text.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { noop } from '../../utils/helpers';
 export const Text = (props) => {
-    const { children, className = '', type = 'primary', size = 'standard', weight = 'regular', lineHeight = 'medium', as: As = 'p', dataId = '', onClick = noop, id = '', title } = props;
-    return (_jsx(As, { id: id, title: title, "data-id": dataId, onClick: onClick, className: classNames('body', size && `body-${size}`, type && `color-${type}`, weight, lineHeight && `lh-${lineHeight}`, className), children: children }));
+    const { children, className = '', type = 'primary', size = 'standard', weight = 'regular', lineHeight = 'medium', as: As = 'p', dataTestId = '', onClick = noop, id = '', title } = props;
+    return (_jsx(As, { id: id, title: title, "data-test-id": dataTestId, onClick: onClick, className: classNames('body', size && `body-${size}`, type && `color-${type}`, weight, lineHeight && `lh-${lineHeight}`, className), children: children }));
 };

package/components/Text/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { ElementType, MouseEvent, ReactNode } from 'react';
 type TTextTypes = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'inverse' | 'selected' | 'brand' | 'danger' | 'warning' | 'success' | 'information' | 'discovery';
 export type TTextSize = 'xxsmall' | 'xsmall' | 'small' | 'standard' | 'medium' | 'large' | 'xlarge';