feat(Virtualizer): custom sizes management

.eslintrc.js

@@ -43,6 +43,7 @@ module.exports = {
     "react/jsx-fragments": 0,
     "react/require-default-props": 0,
     "react/display-name": 1,
+    "@typescript-eslint/default-param-last": 0,
     "@typescript-eslint/naming-convention": 0,
     "@typescript-eslint/no-redeclare": 0,
     "@typescript-eslint/ban-types": 0,

.storybook/main.js

@@ -1,6 +1,3 @@
-const path = require("path");
-const toPath = (filePath) => path.join(process.cwd(), filePath);
-
 module.exports = {
   stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [

.storybook/preview-head.html

@@ -1 +1,16 @@
-<style id="stories-style"></style>
+<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+
+<style id="stories-style">
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+  }
+
+  * {
+    box-sizing: border-box;
+    outline: none;
+  }
+</style>

jest.config.js

@@ -11,4 +11,8 @@ module.exports = {
   moduleDirectories: ["node_modules", "src"],
   globalSetup: "./test/global-test-setup.js",
   setupFilesAfterEnv: ["./test/polyfill/array.find.polyfill.js", "./test/tests.entry.js"],
+  moduleNameMapper: {
+    "^react-dom((\\/.*)?)$": "react-dom-17$1",
+    "^react((\\/.*)?)$": "react-17$1",
+  },
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decathlon/react-table",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "description": "React components for efficiently rendering large tabular data",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,88 +16,92 @@
     "dist"
   ],
   "dependencies": {
-    "classnames": "^2.3.1",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "classnames": "^2.3.2",
+    "html-webpack-plugin": "^5.5.0",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
-    "memoize-one": "^5.2.1",
-    "react-number-format": "^4.7.3",
-    "react-resize-detector": "^6.7.7"
+    "memoize-one": "^6.0.0",
+    "react-number-format": "4.7.3",
+    "react-resize-detector": "^7.1.2"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
-    "@mui/icons-material": "^5.0.3",
-    "@mui/material": "^5.0.3",
-    "@mui/styles": "^5.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.9",
+    "@mui/material": "^5.10.10",
+    "@mui/styles": "^5.10.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
-    "@mui/icons-material": "^5.0.3",
-    "@mui/material": "^5.0.3",
-    "@mui/styles": "^5.0.1",
-    "@storybook/addon-a11y": "~6.3.10",
-    "@storybook/addon-actions": "~6.3.10",
-    "@storybook/addon-jest": "~6.3.10",
+    "@babel/core": "^7.19.6",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.9",
+    "@mui/material": "^5.10.10",
+    "@mui/styles": "^5.10.10",
+    "@storybook/addon-a11y": "~6.5.12",
+    "@storybook/addon-actions": "~6.5.12",
+    "@storybook/addon-jest": "~6.5.12",
     "@storybook/addon-knobs": "~6.3.1",
-    "@storybook/addon-storysource": "~6.3.10",
-    "@storybook/addon-viewport": "~6.3.10",
-    "@storybook/addons": "~6.3.10",
-    "@storybook/react": "~6.3.10",
-    "@testing-library/react": "^12.1.2",
+    "@storybook/addon-storysource": "~6.5.12",
+    "@storybook/addon-viewport": "~6.5.12",
+    "@storybook/addons": "~6.5.12",
+    "@storybook/react": "~6.5.12",
+    "@testing-library/react": "12.1.2",
     "@types/classnames": "^2.3.1",
-    "@types/enzyme": "^3.10.9",
-    "@types/jest": "^27.0.2",
-    "@types/lodash": "^4.14.175",
-    "@types/node": "^16.10.3",
-    "@types/react": "^17.0.27",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-test-renderer": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
-    "babel-loader": "^8.2.2",
-    "css-loader": "^6.3.0",
+    "@types/enzyme": "^3.10.12",
+    "@types/jest": "^29.2.0",
+    "@types/lodash": "^4.14.186",
+    "@types/node": "^18.11.3",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.40.1",
+    "@typescript-eslint/parser": "^5.40.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+    "babel-loader": "^8.2.5",
+    "css-loader": "^6.7.1",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-airbnb-typescript": "^14.0.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-formatter-json": "^0.1.0",
+    "eslint": "^8.25.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-formatter-json": "^8.3.0",
     "eslint-formatter-pretty": "^4.1.0",
-    "eslint-import-resolver-typescript": "^2.4.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.5.2",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "~3.1.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^27.1.3",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "~8.0.1",
     "isomorphic-fetch": "^3.0.0",
-    "jest": "^27.2.5",
-    "markdown-loader": "^6.0.0",
-    "node-sass": "^6.0.1",
+    "jest": "^29.2.1",
+    "jest-environment-jsdom": "^29.2.1",
+    "markdown-loader": "^8.0.0",
+    "node-sass": "^7.0.3",
     "path": "~0.12.7",
-    "prettier": "^2.4.1",
+    "prettier": "^2.7.1",
     "prettier-check": "~2.0.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
+    "react-17": "npm:[email protected]",
     "react-docgen-typescript-loader": "^3.7.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
+    "react-dom": "^18.2.0",
+    "react-dom-17": "npm:[email protected]",
+    "react-test-renderer": "^18.2.0",
     "rimraf": "^3.0.2",
     "sass-lint": "~1.13.1",
-    "sass-loader": "^12.1.0",
-    "ts-jest": "^27.0.5",
-    "ts-loader": "^9.2.6",
-    "typescript": "^4.4.3"
+    "sass-loader": "^13.1.0",
+    "ts-jest": "^29.0.3",
+    "ts-loader": "^9.4.1",
+    "typescript": "^4.8.4"
   },
   "scripts": {
-    "build": "rimraf dist && tsc && npm run build:scss",
-    "build:scss": "node-sass src/style/index.scss -o dist/style && cp -r src/style/fonts dist/style",
+    "build": "rimraf dist && tsc --project tsconfig.build.json && npm run build:scss",
+    "build:scss": "node-sass src/style/index.scss -o dist/style",
     "prepublish": "npm run build",
     "test": "npm run test:unit",
     "test:unit": "jest",

src/components/scroller.tsx

@@ -104,17 +104,18 @@ class Scroller extends React.Component<IScrollerProps> {
     if (this.scrollerContainer.current && horizontalPartWidth) {
       const { scrollLeft } = this.scrollerContainer.current;
       if (prevProps.virtualWidth !== virtualWidth && scrollLeft) {
+        const diff = prevProps.virtualWidth - virtualWidth;
+        const percentageDiff = (100 * diff) / prevProps.virtualWidth;
+        const newRelativeDiff = (virtualWidth * percentageDiff) / 100;
         const nbIgnoredHorizontalParts = ignoredHorizontalParts?.length || 0;
         const nbPrevIgnoredHorizontalParts = this.prevIgnoredHorizontalParts?.length || 0;
         const nbRemovedParts = nbPrevIgnoredHorizontalParts - nbIgnoredHorizontalParts;
-        const scrollablePartsAreChanged =
-          this.prevIgnoredHorizontalParts && ignoredHorizontalParts !== this.prevIgnoredHorizontalParts;
-        // 1 if added or 0 if scrollable parts are changed ;
-        const changeKind = scrollablePartsAreChanged ? 1 : 0;
-        const oldPartScrollIndex = Math.floor(scrollLeft / horizontalPartWidth);
-        // 1 nb changed parts
-        const newLeft = (oldPartScrollIndex + changeKind * nbRemovedParts) * horizontalPartWidth;
-        this.scrollToLeft(newLeft);
+        // 1 if added or -1 if scrollable parts are removed ;
+        const changeDirection = diff >= 0 ? -1 : 1;
+        if (nbRemovedParts !== 0) {
+          const newLeft = scrollLeft - newRelativeDiff + (changeDirection * newRelativeDiff) / nbRemovedParts;
+          this.scrollToLeft(newLeft);
+        }
       }
     }
   };

src/components/table-selection/table-selection-menu.tsx

@@ -19,13 +19,14 @@ export interface IActionMenuComponent {
 export interface IMenuItemProps {
   onClick: () => void;
   selectedCells: ISelectedCells;
+  children: React.ReactNode;
 }
 
 export interface IMenuAction {
   id: string;
   title: string;
   component: React.ComponentType<any>;
-  menuItem?: React.ComponentType<any>;
+  menuItem?: React.ComponentType<{ children: React.ReactNode }>;
 }
 
 export interface ITableSelectionMenuProps extends IMenuProps {

src/components/table/elementary-table.tsx

@@ -55,6 +55,8 @@ export interface IElementaryTable<IDataCoordinates = any> {
   elevatedRowIndexes?: IElevateds;
   /** Options to customize any columns, such as size or align */
   columns?: IColumns;
+  /** Options to customize any rows, such as size */
+  rowsProps?: Record<number, IRowOptions>;
   /** Options to customize any row, such as size */
   globalRowProps?: IRowOptions;
   /** Options to customize any column, such as size */
@@ -78,10 +80,11 @@ export interface IElementaryTableProps<IDataCoordinates = any> extends IElementa
 
 class ElementaryTable extends React.Component<IElementaryTableProps> {
   static defaultProps = {
-    elevatedColumnIndexes: {},
-    elevatedRowIndexes: {},
+    elevatedColumnIndexes: { elevations: {}, absoluteEndPositions: {} },
+    elevatedRowIndexes: { elevations: {}, absoluteEndPositions: {} },
     openedTrees: {},
     selectedCells: {},
+    rowsProps: {},
   };
 
   /** An utility of the table that return the length of the visible sub-rows
@@ -112,6 +115,7 @@ class ElementaryTable extends React.Component<IElementaryTableProps> {
       isSpan,
       rows,
       columns,
+      rowsProps,
       globalRowProps,
       globalColumnProps,
       visibleColumnIndexes,
@@ -137,13 +141,14 @@ class ElementaryTable extends React.Component<IElementaryTableProps> {
           return result;
         }
         const rowIndex = relativeIndexes ? relativeIndexes[index] : index;
+        const rowProps = rowsProps ? rowsProps[rowIndex] : {};
         const { subItems, index: rowAbsoluteIndex } = indexesMapping.relative[rowIndex];
         const isVisible = !visibleRowIndexes || visibleRowIndexes.includes(rowAbsoluteIndex);
         // @ts-ignore we have a default value for openedTrees
         const rowOpenedTree = openedTrees[rowIndex];
 
         // @ts-ignore we have a default value for openedTrees
-        const elevation = elevatedRowIndexes[rowAbsoluteIndex];
+        const elevation = elevatedRowIndexes?.elevations[rowAbsoluteIndex];
         let rowSelectedCells = (subItems || selectedCells[rowAbsoluteIndex]) && selectedCells;
         if (rowSelectedCells) {
           const nextRowMap = indexesMapping.relative && indexesMapping.relative[rowIndex + 1];
@@ -152,20 +157,25 @@ class ElementaryTable extends React.Component<IElementaryTableProps> {
             ? filterIndexes(rowSelectedCells, rowAbsoluteIndex, nextRowAbsoluteIndex)
             : rowSelectedCells;
         }
+        const absolutePosition = elevatedRowIndexes?.absoluteEndPositions[rowAbsoluteIndex];
+        const rowStyle = absolutePosition != null ? { bottom: absolutePosition } : undefined;
         const renderedRow = (
           <Row
             key={`row-${id}-${row.id}`}
             {...globalRowProps}
             {...row}
+            {...rowProps}
             className={classnames(row.className, {
               [`elevated-${elevation}`]: elevation,
             })}
+            style={rowStyle}
             absoluteIndex={rowAbsoluteIndex}
             index={rowIndex}
             isVisible={isVisible}
             isSpan={isSpan}
             columns={columns}
             elevatedColumnIndexes={elevatedColumnIndexes}
+            elevatedRowIndexes={elevatedRowIndexes}
             globalColumnProps={globalColumnProps}
             visibleColumnIndexes={visibleColumnIndexes}
             visibleRowIndexes={visibleRowIndexes}