hrm_ui_lib 2.0.0-alpha.5 → 2.0.0-alpha.7

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,5 +1,6 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React from 'react';
 import classNames from 'classnames';
 import { CHECKBOX_DEFAULT_WIDTH, calcColumnWidth, CHECKBOX_HEADER_ID } from './utils.js';
@@ -10,7 +11,6 @@ import '@babel/runtime/helpers/toConsumableArray';
 import './IndeterminateCheckbox.js';
 import '../../Alert-CMRDKdZp.js';
 import '../Alert/consts.js';
-import '@babel/runtime/helpers/objectWithoutProperties';
 import 'dayjs';
 import '../../helperComponents/Loader/Loader.js';
 import '@babel/runtime/helpers/slicedToArray';
@@ -55,15 +55,21 @@ import '../SVGIcons/IconArrowDownloadFilled.js';
 import '../../helpers/download-file.js';
 import '../Button/consts.js';
 
+var _excluded = ["key"],
+  _excluded2 = ["key"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function Header(_ref) {
   var headerGroup = _ref.headerGroup,
     tableWidth = _ref.tableWidth,
     withSelect = _ref.withSelect,
+    uniqueKey = _ref.uniqueKey,
     _ref$fixedHeader = _ref.fixedHeader,
     fixedHeader = _ref$fixedHeader === void 0 ? false : _ref$fixedHeader;
-  return /*#__PURE__*/React.createElement("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
+  var _headerGroup$getHeade = headerGroup.getHeaderGroupProps();
+    _headerGroup$getHeade.key;
+    var headerGroupProps = _objectWithoutProperties(_headerGroup$getHeade, _excluded);
+  return /*#__PURE__*/React.createElement("tr", _extends({}, headerGroupProps, {
     className: classNames({
       fixed_header: fixedHeader
     })
@@ -92,9 +98,12 @@ function Header(_ref) {
     } : {}), !isSelection && width ? {
       width: width
     } : {});
+    var _getHeaderProps = getHeaderProps(columnProps !== null && columnProps !== void 0 && columnProps.sortable ? getSortByToggleProps() : undefined);
+      _getHeaderProps.key;
+      var headProps = _objectWithoutProperties(_getHeaderProps, _excluded2);
     return /*#__PURE__*/React.createElement("th", _extends({
-      key: i
-    }, getHeaderProps(columnProps !== null && columnProps !== void 0 && columnProps.sortable ? getSortByToggleProps() : undefined), {
+      key: "table_head_".concat(uniqueKey, "_").concat(i)
+    }, headProps, {
       className: classNames({
         fixed_column_left: fixed === 'left',
         fixed_column_right: fixed === 'right',

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,4 +1,5 @@
 import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { CHECKBOX_HEADER_ID, CHECKBOX_DEFAULT_WIDTH } from './utils.js';
@@ -10,7 +11,6 @@ import '../Text/Text.js';
 import '../../utils/helpers.js';
 import 'dayjs';
 import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '../../helperComponents/Loader/Loader.js';
 import '@babel/runtime/helpers/slicedToArray';
 import '../../consts/index.js';
@@ -53,17 +53,23 @@ import '../SVGIcons/IconArrowDownloadFilled.js';
 import '../../helpers/download-file.js';
 import '../Button/consts.js';
 
+var _excluded = ["key"],
+  _excluded2 = ["key"];
 function Row(_ref) {
   var row = _ref.row,
     selectedFlatRows = _ref.selectedFlatRows,
     withSelect = _ref.withSelect,
+    uniqueKey = _ref.uniqueKey,
     handleRowClick = _ref.handleRowClick;
   var isRowSelected = useMemo(function () {
     return selectedFlatRows.find(function (r) {
       return r.id === row.id;
     });
   }, [selectedFlatRows]);
-  return /*#__PURE__*/React.createElement("tr", _extends({}, row.getRowProps(), {
+  var _row$getRowProps = row.getRowProps();
+    _row$getRowProps.key;
+    var rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
+  return /*#__PURE__*/React.createElement("tr", _extends({}, rowProps, {
     className: classNames({
       selected: Boolean(isRowSelected)
     }),
@@ -76,9 +82,12 @@ function Row(_ref) {
       column = _ref2.column,
       render = _ref2.render;
     var isSelection = column.id === CHECKBOX_HEADER_ID;
+    var _getCellProps = getCellProps();
+      _getCellProps.key;
+      var cellProps = _objectWithoutProperties(_getCellProps, _excluded2);
     return /*#__PURE__*/React.createElement("td", _extends({
-      key: i
-    }, getCellProps(), {
+      key: "table_cell_".concat(uniqueKey, "_").concat(i)
+    }, cellProps, {
       style: {
         left: !isSelection && withSelect && (column === null || column === void 0 ? void 0 : column.fixed) === 'left' ? CHECKBOX_DEFAULT_WIDTH : 0
       },

package/components/Table/Table.js

@@ -1,7 +1,7 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useRef, useState, useMemo, useEffect } from 'react';
+import React, { useRef, useState, useId, useMemo, useEffect } from 'react';
 import { useTable, useSortBy, useRowSelect } from 'react-table';
 import { setSelectedRows } from './utils.js';
 import { Row } from './Row.js';
@@ -74,6 +74,7 @@ function Table(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     tableWidth = _useState2[0],
     setTableWidth = _useState2[1];
+  var uniqueKey = useId();
   var dispatchScrollEvent = useDispatchEventOnScroll();
   var sortedColumns = useMemo(function () {
     var condition1 = function condition1(item) {
@@ -142,11 +143,12 @@ function Table(_ref) {
     ref: tableRef
   }), /*#__PURE__*/React.createElement("thead", null, headerGroups.map(function (headerGroup, i) {
     return /*#__PURE__*/React.createElement(Header, {
-      key: i,
+      key: "table_head_".concat(uniqueKey, "_").concat(i),
       withSelect: withSelect,
       fixedHeader: Boolean(fixedHeader),
       headerGroup: headerGroup,
-      tableWidth: tableWidth
+      tableWidth: tableWidth,
+      uniqueKey: uniqueKey
     });
   })), /*#__PURE__*/React.createElement("tbody", getTableBodyProps(), rows.map(function (row) {
     prepareRow(row);
@@ -155,7 +157,8 @@ function Table(_ref) {
       withSelect: withSelect,
       selectedFlatRows: selectedFlatRows,
       row: row,
-      key: row.id
+      key: "table_row_".concat(uniqueKey, "_").concat(row.id),
+      uniqueKey: uniqueKey
     });
   }))));
 }

package/package.json

@@ -1,21 +1,18 @@
 {
   "name": "hrm_ui_lib",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.7",
   "description": "UI library for Dino",
   "main": "./index.js",
   "module": "./index.js",
-  "author": "",
   "license": "ISC",
   "repository": {
     "type": "git",
     "url": "https://github.com/hrmuilibrary/hrm_ui_library.git"
   },
   "peerDependencies": {
-    "@emotion/is-prop-valid": "^1.3.1",
-    "date-fns": "^4.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "yup": "^1.2.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "yup": "1.7.0"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",