hrm_ui_lib 3.2.3 → 3.4.0

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 }: TTableProps): ReactElement;
+export declare function Table({ columns, data, onChange, fixedHeader, withSelect, handleRowClick, className, language, containerRefHandler, submitButtons, dataId }: 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 }) {
+export function Table({ columns, data, onChange, fixedHeader, withSelect = false, handleRowClick, className, language = 'en', containerRefHandler, submitButtons, dataId = '' }) {
     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));
+    }, useSortBy, useRowSelect, (hooks) => setSelectedRows(hooks, withSelect, dataId));
     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, 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 } }), submitButtons === null || submitButtons === void 0 ? void 0 : submitButtons.map(({ buttonText, isLoading, onClick, iconProps }) => (_jsx(Button, { iconProps: iconProps || { alignment: 'left', Component: IconCheckmark }, onClick: (event) => {
+    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) => {
                             onClick(event, state, onClearSelectedRows);
-                        }, buttonText: buttonText || 'Submit', type: "secondary", size: "medium", className: "mr-8", isLoading: isLoading })))] })), _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 }, `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, 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) => {
                                 prepareRow(row);
-                                return (_jsx(Row, { handleRowClick: handleRowClick, withSelect: withSelect, selectedFlatRows: selectedFlatRows, row: row, uniqueKey: uniqueKey }, `table_row_${uniqueKey}_${row.id}`));
+                                return (_jsx(Row, { handleRowClick: handleRowClick, withSelect: withSelect, selectedFlatRows: selectedFlatRows, row: row, uniqueKey: uniqueKey, dataId: dataId }, `table_row_${uniqueKey}_${row.id}`));
                             }) }))] })) })] }));
 }

package/components/Table/types.d.ts

@@ -15,7 +15,7 @@ export type TColumn = Column & TColumnFields;
 export interface IButtonPropTypes extends Omit<TButtonPropTypes, 'onClick'> {
     onClick: (event: TClickEventType, data: any, clearRowSelection?: () => void) => void;
 }
-export type TTableProps = {
+export type TTableProps = IBaseProps & {
     className?: string;
     columns: TColumn[];
     data: any[];

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): void;
+export declare function setSelectedRows(hooks: Hooks, withSelect: boolean, dataId?: 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) {
+export function setSelectedRows(hooks, withSelect, dataId = '') {
     if (withSelect) {
         hooks.visibleColumns.push((columns) => [
             {
@@ -15,7 +15,7 @@ export function setSelectedRows(hooks, withSelect) {
                         checked: allSelected,
                         indeterminate: !allSelected && someSelected,
                         disabled: allEnabledRows.length === 0
-                    }), { onChange: (e) => {
+                    }), { dataId: dataId ? `${dataId}-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) {
                     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` : '' })));
                 }
             },
             ...columns

package/components/TableV2/AdvancedPagination.d.ts

@@ -1,8 +1,8 @@
 import type { Table } from '@tanstack/react-table';
-interface PaginationProps<T> {
+interface PaginationProps<T> extends IBaseProps {
     table: Table<T>;
     totalCount: number;
     buttonText?: string;
 }
-export declare function AdvancedPagination<TData>({ table, totalCount, buttonText }: PaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function AdvancedPagination<TData>({ table, totalCount, buttonText, dataId }: 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 }) {
+export function AdvancedPagination({ table, totalCount, buttonText, dataId = '' }) {
     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 }) {
             setNavigatePage('1');
         }
     }, [table.getPageCount(), table.getState().pagination]);
-    return (_jsxs("div", { className: "advanced-table__pagination", children: [_jsx(Select, { setSelectedItem: (value) => onRowCountChange(value), selectedItem: `${pageSize}`, className: 'no-border', options: OPTIONS }), _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" }), _jsx(Button, { onClick: onGoToPage, type: "secondary", size: "medium", buttonText: buttonText !== null && buttonText !== void 0 ? buttonText : 'Go to page' })] }), _jsxs("ul", { className: "pagination", children: [_jsx("li", { className: `previous ${!table.getCanPreviousPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'prev', role: 'button', onClick: () => table.firstPage(), children: _jsx(IconChevronDoubleLeft, { size: 'small' }) }) }), _jsx("li", { className: `previous ${!table.getCanPreviousPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'prev', role: 'button', onClick: () => table.previousPage(), 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), children: _jsx(IconMore, { size: 'small' }) }) }, `ellipsis-${index}`)) : pageNumber === '+++' ? (_jsx("li", { className: 'pagination__more', children: _jsx("a", { role: 'button', onClick: () => table.setPageIndex(+pageIndex + 3), children: _jsx(IconMore, { size: 'small' }) }) }, `ellipsis-${index}`)) : (_jsx("li", { className: classnames({
+    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({
                                     ['active']: pageNumber === pageIndex + 1
-                                }), children: _jsx("a", { role: 'button', onClick: () => table.setPageIndex(+pageNumber - 1), children: pageNumber }) }, pageNumber))), _jsx("li", { className: `next ${!table.getCanNextPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'next', role: 'button', onClick: () => table.nextPage(), children: _jsx(IconChevronRight, { size: 'small' }) }) }), _jsx("li", { className: `next ${!table.getCanNextPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'next', role: 'button', onClick: () => table.lastPage(), children: _jsx(IconChevronDoubleRight, { size: 'small' }) }) })] })] })] }));
+                                }), 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' }) }) })] })] })] }));
 }

package/components/TableV2/ColumnHeader.d.ts

@@ -1,9 +1,9 @@
 import type { CSSProperties } from 'react';
 import type { Header } from '@tanstack/react-table';
-interface DraggableColumnHeaderProps<TData> {
+interface DraggableColumnHeaderProps<TData> extends IBaseProps {
     header: Header<TData, unknown>;
     isPinned?: boolean;
     pinnedStyles: CSSProperties;
 }
-export declare function ColumnHeader<TData>({ header, pinnedStyles }: DraggableColumnHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function ColumnHeader<TData>({ header, pinnedStyles, dataId }: 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 }) {
+export function ColumnHeader({ header, pinnedStyles, dataId = '' }) {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
         id: header.id
     });
@@ -23,10 +23,10 @@ export function ColumnHeader({ header, pinnedStyles }) {
             position: 'relative',
             zIndex: isDragging ? 1 : 0
         };
-    return (_jsxs("th", Object.assign({ ref: setNodeRef, style: Object.assign(Object.assign({}, style), pinnedStyles), className: classnames('select-none', {
+    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', {
             ['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(), 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-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() &&
                             (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,5 +1,5 @@
 import React from 'react';
-type IndeterminateCheckboxProps = {
+export declare const IndeterminateCheckbox: React.ForwardRefExoticComponent<IBaseProps & {
     indeterminate: boolean;
     checked: boolean;
     onChange: (e: {
@@ -8,6 +8,4 @@ type IndeterminateCheckboxProps = {
         };
     }) => void;
     disabled?: boolean;
-};
-export declare const IndeterminateCheckbox: React.ForwardRefExoticComponent<IndeterminateCheckboxProps & React.RefAttributes<HTMLInputElement>>;
-export {};
+} & React.RefAttributes<HTMLInputElement>>;

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 }, ref) => {
+export const IndeterminateCheckbox = forwardRef(({ indeterminate, checked, onChange, disabled, dataId = '' }, 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 }) }));
+    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 }) }));
 });
 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, 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, 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;

package/components/TableV2/Table.js

@@ -19,19 +19,19 @@ var ColumnId;
     ColumnId["Actions"] = "actions";
     ColumnId["Expand"] = "expand";
 })(ColumnId || (ColumnId = {}));
-const ExpandColumn = ({ row, expandedRows, onToggle }) => {
+const ExpandColumn = ({ row, expandedRows, onToggle, dataId = '' }) => {
     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
-        }, onClick: (e) => {
+        }, dataId: dataId ? `${dataId}-expand-${row.index}` : '', onClick: (e) => {
             e.stopPropagation();
             onToggle(row.id);
         } }));
 };
-export function Table({ data, 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, 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 }) {
     const [expandedRows, setExpandedRows] = useState(new Set());
     const handleToggleRow = useCallback((rowId) => {
         setExpandedRows((prev) => {
@@ -52,7 +52,7 @@ export function Table({ data, columns, isLoading, hasError, isActionsVisible = f
         size: 50,
         minSize: 50,
         maxSize: 50,
-        cell: ({ row }) => (_jsx(ExpandColumn, { row: row, expandedRows: expandedRows, onToggle: handleToggleRow })),
+        cell: ({ row }) => (_jsx(ExpandColumn, { row: row, expandedRows: expandedRows, onToggle: handleToggleRow, dataId: dataId })),
         meta: {
             enableHiding: false,
             enableColumnDragging: false,
@@ -61,9 +61,10 @@ export function Table({ data, columns, isLoading, hasError, isActionsVisible = f
             headerVisible: false,
             enableSorting: false
         }
-    }), [expandedRows, handleToggleRow]);
+    }), [expandedRows, handleToggleRow, dataId]);
     const { table, sensors, handleDragStart, handleDragEnd, handleDragCancel, activeHeader } = useTableControl({
         data,
+        dataId,
         tableSettings,
         columns: collapsibleRows ? [expandColumn, ...columns] : columns,
         withSelect,
@@ -100,24 +101,26 @@ export function Table({ data, columns, isLoading, hasError, isActionsVisible = f
     const skeletonRowSize = useMemo(() => {
         return Array.from({ length: table.getState().pagination.pageSize });
     }, [table.getState().pagination.pageSize]);
-    return (_jsxs("div", { className: classnames('advanced-table', {
+    return (_jsxs("div", { "data-id": dataId, 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 })) : (_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, 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) => {
                                                         if (header.id === ColumnId.Actions && !isActionsVisible)
                                                             return null;
-                                                        return (_jsx(ColumnHeader, { pinnedStyles: Object.assign({}, getCommonPinningStyles(header.column)), header: header }, header.id));
+                                                        return (_jsx(ColumnHeader, { pinnedStyles: Object.assign({}, getCommonPinningStyles(header.column)), header: header, dataId: dataId }, header.id));
                                                     }) }) }, headerGroup.id))) }), _jsx("tbody", { children: isLoading
-                                                ? skeletonRowSize.map((_, i) => (_jsx("tr", { children: table.getVisibleFlatColumns().map((column) => (_jsx("td", { className: classnames({
+                                                ? skeletonRowSize.map((_, i) => (_jsx("tr", { "data-id": dataId ? `${dataId}-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() }), 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-id": dataId ? `${dataId}-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, 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 &&
+                                                                }), id: cell.id, "data-id": dataId
+                                                                    ? `${dataId}-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'), 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-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] }));
 }

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, tableSettings, totalCount, defaultPageSize, defaultPageIndex, defaultHiddenColumns, onSortChange, onRowSelection, onColumnSizing, onPaginationChange }: TTableProps<TData>): {
+export declare function useTableControl<TData>({ withSelect, columns, data, dataId, 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, tableSettings, totalCount = 0, defaultPageSize = 10, defaultPageIndex = 0, defaultHiddenColumns = [], onSortChange, onRowSelection, onColumnSizing, onPaginationChange }) {
+export function useTableControl({ withSelect, columns, data, dataId = '', 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, tableSettings, tota
                 enableHiding: false,
                 enableColumnDragging: false,
                 enablePinning: true,
-                header: ({ table }) => (_jsx(IndeterminateCheckbox, { checked: table.getIsAllRowsSelected(), indeterminate: table.getIsSomeRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler() })),
-                cell: ({ row }) => (_jsx(IndeterminateCheckbox, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), indeterminate: row.getIsSomeSelected(), onChange: row.getToggleSelectedHandler() }))
+                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` : '' }))
             });
         }
         return columnsList;
-    }, [columns]);
+    }, [columns, dataId]);
     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

@@ -5,7 +5,7 @@ export type TRowSelectionState = RowSelectionState;
 export type TColumnSizingState = ColumnSizingState;
 export type TPaginationState = PaginationState;
 export type TPersistColumnSettings = 'localStorage' | 'external';
-export type TTableProps<TData> = {
+export type TTableProps<TData> = IBaseProps & {
     data: (TData & {
         subRows?: TData[];
     })[];
@@ -58,7 +58,7 @@ export interface TableData {
     subRows: TableData[];
     [key: string]: unknown;
 }
-export interface ExpandColumnProps<TData> {
+export interface ExpandColumnProps<TData> extends IBaseProps {
     row: Row<TData>;
     expandedRows: Set<string>;
     onToggle: (rowId: string) => void;

package/components/Text/types.d.ts

@@ -3,7 +3,7 @@ type TTextTypes = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'inverse'
 export type TTextSize = 'xxsmall' | 'xsmall' | 'small' | 'standard' | 'medium' | 'large' | 'xlarge';
 type TTextWeight = 'regular' | 'semibold' | 'bold' | 'bolder';
 type TTextLineHeight = 'xsmall' | 'small' | 'medium' | 'large';
-export interface TextPropTypes {
+export interface TextPropTypes extends IBaseProps {
     id?: string;
     as?: ElementType;
     title?: string;
@@ -13,7 +13,6 @@ export interface TextPropTypes {
     weight?: TTextWeight;
     lineHeight?: TTextLineHeight;
     className?: string;
-    dataId?: string;
     onClick?: (event: MouseEvent<HTMLElement>) => void;
 }
 export {};

package/components/UnderConstruction/UnderConstruction.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import noResultImage from '../../assets/images/under-construction.webp';
 import { SELECT_TRANSLATIONS } from './localization';
 export const UnderConstruction = (props) => {
-    const { size = 'large', mainMessage, paragraphMessage, className, illustration = noResultImage, language = 'en' } = props;
+    const { size = 'large', mainMessage, paragraphMessage, className, illustration = noResultImage, language = 'en', dataId = '' } = props;
     const localizations = SELECT_TRANSLATIONS[language];
-    return (_jsxs("div", { className: classNames(`under-construction ${size === 'large' ? 'under-construction--large' : 'under-construction--small'}`, className), children: [_jsx("div", { className: "under-construction__icon", children: _jsx(Image, { imagePath: illustration }) }), _jsxs("div", { className: "under-construction__content", children: [_jsx(Text, { size: size == 'large' ? 'large' : 'medium', weight: "bold", children: mainMessage !== null && mainMessage !== void 0 ? mainMessage : localizations.mainMessage }), _jsx(Text, { size: size == 'large' ? 'standard' : 'small', children: paragraphMessage !== null && paragraphMessage !== void 0 ? paragraphMessage : localizations.paragraphMessage })] })] }));
+    return (_jsxs("div", { className: classNames(`under-construction ${size === 'large' ? 'under-construction--large' : 'under-construction--small'}`, className), "data-id": dataId, children: [_jsx("div", { className: "under-construction__icon", children: _jsx(Image, { imagePath: illustration, dataId: dataId ? `${dataId}-image` : '' }) }), _jsxs("div", { className: "under-construction__content", children: [_jsx(Text, { size: size == 'large' ? 'large' : 'medium', weight: "bold", dataId: dataId ? `${dataId}-text` : '', children: mainMessage !== null && mainMessage !== void 0 ? mainMessage : localizations.mainMessage }), _jsx(Text, { size: size == 'large' ? 'standard' : 'small', dataId: dataId ? `${dataId}-subtext` : '', children: paragraphMessage !== null && paragraphMessage !== void 0 ? paragraphMessage : localizations.paragraphMessage })] })] }));
 };

package/components/UnderConstruction/types.d.ts

@@ -1,4 +1,4 @@
-export interface TUnderConstructionProps {
+export interface TUnderConstructionProps extends IBaseProps {
     size?: string;
     className?: string;
     mainMessage?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hrm_ui_lib",
-  "version": "3.2.3",
+  "version": "3.4.0",
   "description": "UI library for Dino",
   "main": "./index.cjs",
   "module": "./index.js",