hrm_ui_lib 2.4.7 → 2.4.9

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

@@ -1,21 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { calcColumnWidth, CHECKBOX_DEFAULT_WIDTH, CHECKBOX_HEADER_ID } from './utils';
 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;
             const style = Object.assign(Object.assign(Object.assign({ width: isSelection
                     ? CHECKBOX_DEFAULT_WIDTH
                     : calcColumnWidth(widthInPercent, tableWidth), left: !isSelection && withSelect && fixed === 'left' ? CHECKBOX_DEFAULT_WIDTH : 0 }, (!isSelection && minWidth ? { minWidth } : {})), (!isSelection && maxWidth ? { maxWidth } : {})), (!isSelection && width ? { width } : {}));
-            return (_jsx("th", Object.assign({}, getHeaderProps((columnProps === null || columnProps === void 0 ? void 0 : columnProps.sortable) ? getSortByToggleProps() : undefined), { className: classNames({
+            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, { 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',
                     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

@@ -1,18 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 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) => {
+    const _a = row.getRowProps(), { key: keyRow } = _a, rowProps = __rest(_a, ["key"]);
+    return (_jsx("tr", Object.assign({}, rowProps, { 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;
             const isSelection = column.id === CHECKBOX_HEADER_ID;
-            return (_jsx("td", Object.assign({}, getCellProps(), { style: {
+            const _b = getCellProps(), { key: keycell } = _b, cellProps = __rest(_b, ["key"]);
+            return (_jsx("td", Object.assign({}, cellProps, { 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',
                     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.9",
   "description": "UI library for Dino",
   "main": "./index.js",
   "module": "./index.js",