hrm_ui_lib 2.4.7 → 2.4.8

package/components/Table/Header.d.ts

@@ -5,6 +5,7 @@ type Props = {
     withSelect: boolean;
     tableWidth: number;
     headerGroup: HeaderGroup;
+    uniqueKey: string;
 };
-export declare function Header({ headerGroup, tableWidth, withSelect, fixedHeader }: Props): ReactElement;
+export declare function Header({ headerGroup, tableWidth, withSelect, uniqueKey, fixedHeader }: Props): ReactElement;
 export {};

package/components/Table/Header.js

@@ -4,7 +4,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, fixedHeader = false }) {
+export function Header({ headerGroup, tableWidth, withSelect, uniqueKey, fixedHeader = false }) {
     return (_jsx("tr", Object.assign({}, headerGroup.getHeaderGroupProps(), { 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;
             const isSelection = id === CHECKBOX_HEADER_ID;
@@ -16,6 +16,6 @@ export function Header({ headerGroup, tableWidth, withSelect, fixedHeader = fals
                     fixed_column_right: fixed === 'right',
                     fixed_checkbox: isSelection && ((_a = arr[i + 1]) === null || _a === void 0 ? void 0 : _a.fixed) === 'left',
                     pointer: columnProps === null || columnProps === void 0 ? void 0 : columnProps.sortable
-                }), style: style, children: _jsxs("div", { className: "flexbox align-items--center", children: [_jsx(Text, { weight: "bold", className: "table-header-title", children: render('Header') }), isSorted && isSortedDesc && _jsx(IconArrowDown, { size: "xsmall", className: "ml-4" }), isSorted && !isSortedDesc && _jsx(IconArrowUp, { size: "xsmall", className: "ml-4" }), !isSorted && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.sortable) && (_jsx(IconArrowDown, { size: "xsmall", className: "ml-4 unsorted__icon" }))] }) }), i));
+                }), style: style, children: _jsxs("div", { className: "flexbox align-items--center", children: [_jsx(Text, { weight: "bold", className: "table-header-title", children: render('Header') }), isSorted && isSortedDesc && _jsx(IconArrowDown, { size: "xsmall", className: "ml-4" }), isSorted && !isSortedDesc && _jsx(IconArrowUp, { size: "xsmall", className: "ml-4" }), !isSorted && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.sortable) && (_jsx(IconArrowDown, { size: "xsmall", className: "ml-4 unsorted__icon" }))] }) }), `table_head_${uniqueKey}_${i}`));
         }) })));
 }

package/components/Table/Row.d.ts

@@ -5,6 +5,7 @@ type Props = {
     handleRowClick?: (row: any) => void;
     withSelect: boolean;
     selectedFlatRows: RowType[];
+    uniqueKey: string;
 };
-export declare function Row({ row, selectedFlatRows, withSelect, handleRowClick }: Props): ReactElement;
+export declare function Row({ row, selectedFlatRows, withSelect, uniqueKey, handleRowClick }: Props): ReactElement;
 export {};

package/components/Table/Row.js

@@ -2,7 +2,7 @@ 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, handleRowClick }) {
+export function Row({ row, selectedFlatRows, withSelect, uniqueKey, handleRowClick }) {
     const isRowSelected = useMemo(() => selectedFlatRows.find((r) => r.id === row.id), [selectedFlatRows]);
     return (_jsx("tr", Object.assign({}, row.getRowProps(), { 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;
@@ -13,6 +13,6 @@ export function Row({ row, selectedFlatRows, withSelect, handleRowClick }) {
                     fixed_column_left: (column === null || column === void 0 ? void 0 : column.fixed) === 'left',
                     fixed_column_right: (column === null || column === void 0 ? void 0 : column.fixed) === 'right',
                     fixed_checkbox: isSelection && ((_a = arr[i + 1].column) === null || _a === void 0 ? void 0 : _a.fixed) === 'left'
-                }), children: render('Cell') }), i));
+                }), children: render('Cell') }), `table_cell_${uniqueKey}_${i}`));
         }) })));
 }

package/components/Table/Table.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, useId } from 'react';
 import { useSortBy, useTable, useRowSelect } from 'react-table';
 import { setSelectedRows } from './utils';
 import { Row } from './Row';
@@ -9,6 +9,7 @@ import { useDispatchEventOnScroll } from '../../hooks/useDispatchEventOnScroll';
 export function Table({ columns, data, onChange, fixedHeader, withSelect = false, handleRowClick, className, containerRefHandler }) {
     const tableRef = useRef(null);
     const [tableWidth, setTableWidth] = useState(400);
+    const uniqueKey = useId();
     const dispatchScrollEvent = useDispatchEventOnScroll();
     const sortedColumns = useMemo(() => {
         const condition1 = (item) => item.fixed === 'left'; // Move even numbers to the start
@@ -56,8 +57,8 @@ export function Table({ columns, data, onChange, fixedHeader, withSelect = false
             window.removeEventListener('resize', handleResize);
         };
     }, [tableRef.current]);
-    return (_jsx("div", { onScroll: dispatchScrollEvent, ref: containerRefHandler, className: classNames('table-wrapper scrollbar scrollbar--horizontal scrollbar--vertical', className), 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 }, i))) }), _jsx("tbody", Object.assign({}, getTableBodyProps(), { children: rows.map((row) => {
+    return (_jsx("div", { onScroll: dispatchScrollEvent, ref: containerRefHandler, className: classNames('table-wrapper scrollbar scrollbar--horizontal scrollbar--vertical', className), 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) => {
                         prepareRow(row);
-                        return (_jsx(Row, { handleRowClick: handleRowClick, withSelect: withSelect, selectedFlatRows: selectedFlatRows, row: row }, row.id));
+                        return (_jsx(Row, { handleRowClick: handleRowClick, withSelect: withSelect, selectedFlatRows: selectedFlatRows, row: row, uniqueKey: uniqueKey }, `table_row_${uniqueKey}_${row.id}`));
                     }) }))] })) }));
 }

package/package.json

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