update deps | styled | react (#1195)

.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.nvmrc

@@ -1 +1 @@
-v14
+v20.10.0

.storybook/main.ts

@@ -2,6 +2,7 @@ const prettierConfig = require('../.prettierrc.js');
 
 module.exports = {
 	stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
+
 	typescript: {
 		check: false,
 		checkOptions: {},
@@ -11,6 +12,7 @@ module.exports = {
 			propFilter: prop => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
 		},
 	},
+
 	addons: [
 		{
 			name: '@storybook/addon-storysource',
@@ -21,14 +23,6 @@ module.exports = {
 				},
 			},
 		},
-		{
-			name: '@storybook/addon-docs',
-			options: {
-				sourceLoaderOptions: {
-					injectStoryParameters: false,
-				},
-			},
-		},
 		{
 			name: '@storybook/addon-essentials',
 			options: {},
@@ -42,5 +36,15 @@ module.exports = {
 				},
 			},
 		},
+		'@storybook/addon-mdx-gfm',
 	],
+
+	docs: {
+		autodocs: true,
+	},
+
+	framework: {
+		name: '@storybook/react-webpack5',
+		options: {},
+	},
 };

.stylelintrc

@@ -1,13 +1,10 @@
 {
-  "processors": ["stylelint-processor-styled-components"],
+	"plugins": ["stylelint-prettier"],
   "extends": [
-    "stylelint-config-recommended",
-    "stylelint-config-styled-components"
+    "stylelint-config-standard"
   ],
-  "rules": {
-    "declaration-colon-newline-after": null,
-    "value-list-max-empty-lines": null,
-    "value-keyword-case": null,
-		"indentation": "tab"
-  }
+	"rules": {
+    "prettier/prettier": true
+  },
+  "customSyntax": "postcss-styled-syntax"
 }

.vscode/settings.json

@@ -22,14 +22,14 @@
 	// "editor.minimap.enabled": true,
 	"extensions.autoUpdate": true,
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true
+		"source.fixAll.eslint": "explicit"
 	},
 	"[javascript]": {
 		"editor.formatOnSave": true,
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[typescript]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
+		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
 	},
 	"[typescriptreact]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

netlify.toml

@@ -2,11 +2,11 @@
   publish = "storybook-static"
   command = "yarn lint && yarn test && yarn build && yarn build-storybook"
 [build.environment]
-  NODE_VERSION = "14"
-  YARN_VERSION = "1.22.10"
+  NODE_VERSION = "20.11.0"
+  YARN_VERSION = "4.0.2"
   DOTENV_DISPLAY_WARNING = "none"
   STORYBOOK_EXAMPLE_APP ="true"
 [[headers]]
   for = "/*"
   [headers.values]
-    Access-Control-Allow-Origin = "*"
+    Access-Control-Allow-Origin = "*"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "7.5.4",
+  "version": "7.6.0",
   "description": "A simple to use declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -28,83 +28,91 @@
     "build:umd": "rollup -c rollup/rollup.config.umd.js",
     "build:cjs": "rollup -c rollup/rollup.config.cjs.js",
     "build:es": "rollup -c rollup/rollup.config.es.js",
-    "build": "rimraf dist/* && npm run build:dev && npm run build:cjs && npm run build:umd && npm run build:es",
+    "build": "rimraf dist && npm run build:dev && npm run build:cjs && npm run build:umd && npm run build:es",
     "start": "npm run build:dev -- -w",
     "test": "jest --passWithNoTests --verbose --coverage",
     "test:tdd": "jest --watch",
     "test:tdd-coverage": "jest --watch --coverage",
     "test:coverage": "jest --coverage",
     "lint": "eslint . --ext .ts,.tsx && eslint . --ext .js --config eslintrc-js.js",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "deploy-storybook": "gh-pages -d storybook-static"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/eslint-parser": "^7.16.5",
+    "@babel/core": "^7.23.7",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/plugin-transform-class-properties": "^7.23.3",
+    "@faker-js/faker": "^8.3.1",
     "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.1.1",
-    "@storybook/addon-a11y": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-storysource": "^6.4.22",
-    "@storybook/addons": "^6.4.22",
-    "@storybook/react": "^6.4.22",
-    "@storybook/theming": "^6.4.22",
-    "@testing-library/react": "^12.1.2",
-    "@types/faker": "^5.5.9",
-    "@types/jest": "^27.0.3",
-    "@types/lodash-es": "^4.17.5",
-    "@types/lodash.orderby": "^4.6.6",
-    "@types/node": "^17.0.0",
-    "@types/react": "^17.0.37",
-    "@types/react-dom": "^17.0.11",
-    "@types/styled-components": "^5.1.18",
-    "@typescript-eslint/eslint-plugin": "^5.7.0",
-    "@typescript-eslint/parser": "^5.7.0",
-    "axios": "^0.24.0",
+    "@material-ui/icons": "^4.11.3",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-mdx-gfm": "^7.6.7",
+    "@storybook/addon-storysource": "^7.6.7",
+    "@storybook/addons": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
+    "@storybook/theming": "^7.6.7",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.11",
+    "@types/lodash-es": "^4.17.12",
+    "@types/lodash.orderby": "^4.6.9",
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
+    "axios": "^1.6.5",
     "codecov": "^3.8.3",
-    "eslint": "^8.5.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^7.0.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jest": "^25.3.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.5.11",
-    "faker": "^5.5.3",
-    "gh-pages": "^3.2.3",
-    "jest": "^27.4.5",
-    "jest-styled-components": "^7.0.8",
-    "jest-watch-typeahead": "^1.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^27.6.2",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "gh-pages": "^6.1.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-styled-components": "^7.2.0",
+    "jest-watch-typeahead": "^2.2.2",
     "lodash-es": "^4.17.21",
     "memoize-one": "^6.0.0",
-    "moment": "^2.29.1",
-    "prettier": "^2.5.1",
-    "react": "^17.0.2",
+    "moment": "^2.30.1",
+    "postcss-styled-syntax": "^0.6.4",
+    "prettier": "^3.1.1",
+    "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
-    "react-dom": "^17.0.2",
-    "rimraf": "^3.0.2",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.5",
     "rollup": "^2.61.1",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.31.1",
+    "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-visualizer": "^5.5.2",
-    "styled-components": "^5.3.3",
-    "stylelint": "^14.1.0",
-    "stylelint-config-recommended": "^6.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.10.0",
-    "ts-jest": "^27.1.2",
-    "typescript": "^4.6.4"
+    "storybook": "^7.6.7",
+    "styled-components": "^6.1.8",
+    "stylelint": "^16.1.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-prettier": "^5.0.0",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.3.3"
   },
   "dependencies": {
-    "deepmerge": "^4.2.2"
+    "deepmerge": "^4.3.1"
   },
   "peerDependencies": {
     "react": ">= 16.8.3",
-    "styled-components": ">= 4"
-  }
+    "styled-components": ">= 5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "styled-components": {
+      "optional": false
+    }
+  },
+  "packageManager": "yarn@4.0.2"
 }

src/DataTable/DataTable.tsx

@@ -203,13 +203,25 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 		dispatch(action);
 	}, []);
 
-	const handleRowClicked = React.useCallback((row, e) => onRowClicked(row, e), [onRowClicked]);
+	const handleRowClicked = React.useCallback(
+		(row: T, e: React.MouseEvent<Element, MouseEvent>) => onRowClicked(row, e),
+		[onRowClicked],
+	);
 
-	const handleRowDoubleClicked = React.useCallback((row, e) => onRowDoubleClicked(row, e), [onRowDoubleClicked]);
+	const handleRowDoubleClicked = React.useCallback(
+		(row: T, e: React.MouseEvent<Element, MouseEvent>) => onRowDoubleClicked(row, e),
+		[onRowDoubleClicked],
+	);
 
-	const handleRowMouseEnter = React.useCallback((row, e) => onRowMouseEnter(row, e), [onRowMouseEnter]);
+	const handleRowMouseEnter = React.useCallback(
+		(row: T, e: React.MouseEvent<Element, MouseEvent>) => onRowMouseEnter(row, e),
+		[onRowMouseEnter],
+	);
 
-	const handleRowMouseLeave = React.useCallback((row, e) => onRowMouseLeave(row, e), [onRowMouseLeave]);
+	const handleRowMouseLeave = React.useCallback(
+		(row: T, e: React.MouseEvent<Element, MouseEvent>) => onRowMouseLeave(row, e),
+		[onRowMouseLeave],
+	);
 
 	const handleChangePage = React.useCallback(
 		(page: number) =>

src/DataTable/ExpanderRow.tsx

@@ -31,7 +31,7 @@ function ExpanderRow<T>({
 	const classNames = ['rdt_ExpanderRow', ...classNamesSplit].join(' ');
 
 	return (
-		<ExpanderRowStyle className={classNames} $extendedRowStyle={extendedRowStyle}>
+		<ExpanderRowStyle className={classNames} $extendedRowStyle={extendedRowStyle as CSSObject}>
 			<ExpanderComponent data={data} {...expanderComponentProps} />
 		</ExpanderRowStyle>
 	);

src/DataTable/TableCell.tsx

@@ -55,7 +55,7 @@ function Cell<T>({
 	onDragEnter,
 	onDragLeave,
 }: CellProps<T>): JSX.Element {
-	const { style, classNames } = getConditionalStyle(row, column.conditionalCellStyles, ['rdt_TableCell']);
+	const { conditionalStyle, classNames } = getConditionalStyle(row, column.conditionalCellStyles, ['rdt_TableCell']);
 
 	return (
 		<CellStyle
@@ -77,7 +77,7 @@ function Cell<T>({
 			right={column.right}
 			width={column.width}
 			$wrapCell={column.wrap}
-			style={style}
+			style={conditionalStyle as React.CSSProperties}
 			$isDragging={isDragging}
 			onDragStart={onDragStart}
 			onDragOver={onDragOver}

src/DataTable/TableCol.tsx

@@ -21,7 +21,7 @@ const ColumnStyled = styled(CellExtended)<ColumnStyleProps>`
 
 interface ColumnSortableProps {
 	disabled: boolean;
-	sortActive: boolean;
+	$sortActive: boolean;
 }
 
 const sortableCSS = css<ColumnSortableProps>`
@@ -30,7 +30,7 @@ const sortableCSS = css<ColumnSortableProps>`
 		i,
 		svg {
 			transform: 'translate3d(0, 0, 0)';
-			${({ sortActive }) => (sortActive ? 'opacity: 1' : 'opacity: 0')};
+			${({ $sortActive }) => ($sortActive ? 'opacity: 1' : 'opacity: 0')};
 			color: inherit;
 			font-size: 18px;
 			height: 18px;
@@ -47,8 +47,8 @@ const sortableCSS = css<ColumnSortableProps>`
 		}
 	}
 
-	${({ sortActive }) =>
-		!sortActive &&
+	${({ $sortActive }) =>
+		!$sortActive &&
 		css`
 			&:hover,
 			&:focus {
@@ -214,7 +214,7 @@ function TableCol<T>({
 					className="rdt_TableCol_Sortable"
 					onClick={!disableSort ? handleSortChange : undefined}
 					onKeyPress={!disableSort ? handleKeyPress : undefined}
-					sortActive={!disableSort && sortActive}
+					$sortActive={!disableSort && sortActive}
 					disabled={disableSort}
 				>
 					{!disableSort && customSortIconRight && renderCustomSortIcon()}