Skip to content

Commit ba2e865

Browse files
authored
update deps | styled | react (#1195)
1 parent 24d6120 commit ba2e865

27 files changed

+17534
-19665
lines changed

.babelrc.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"sourceType": "unambiguous",
3+
"presets": [
4+
[
5+
"@babel/preset-env",
6+
{
7+
"targets": {
8+
"chrome": 100,
9+
"safari": 15,
10+
"firefox": 91
11+
}
12+
}
13+
],
14+
"@babel/preset-typescript",
15+
"@babel/preset-react"
16+
],
17+
"plugins": []
18+
}

.nvmrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
v14
1+
v20.10.0

.storybook/main.ts

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ const prettierConfig = require('../.prettierrc.js');
22

33
module.exports = {
44
stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
5+
56
typescript: {
67
check: false,
78
checkOptions: {},
@@ -11,6 +12,7 @@ module.exports = {
1112
propFilter: prop => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
1213
},
1314
},
15+
1416
addons: [
1517
{
1618
name: '@storybook/addon-storysource',
@@ -21,14 +23,6 @@ module.exports = {
2123
},
2224
},
2325
},
24-
{
25-
name: '@storybook/addon-docs',
26-
options: {
27-
sourceLoaderOptions: {
28-
injectStoryParameters: false,
29-
},
30-
},
31-
},
3226
{
3327
name: '@storybook/addon-essentials',
3428
options: {},
@@ -42,5 +36,15 @@ module.exports = {
4236
},
4337
},
4438
},
39+
'@storybook/addon-mdx-gfm',
4540
],
41+
42+
docs: {
43+
autodocs: true,
44+
},
45+
46+
framework: {
47+
name: '@storybook/react-webpack5',
48+
options: {},
49+
},
4650
};

.stylelintrc

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
{
2-
"processors": ["stylelint-processor-styled-components"],
2+
"plugins": ["stylelint-prettier"],
33
"extends": [
4-
"stylelint-config-recommended",
5-
"stylelint-config-styled-components"
4+
"stylelint-config-standard"
65
],
7-
"rules": {
8-
"declaration-colon-newline-after": null,
9-
"value-list-max-empty-lines": null,
10-
"value-keyword-case": null,
11-
"indentation": "tab"
12-
}
6+
"rules": {
7+
"prettier/prettier": true
8+
},
9+
"customSyntax": "postcss-styled-syntax"
1310
}

.vscode/settings.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@
2222
// "editor.minimap.enabled": true,
2323
"extensions.autoUpdate": true,
2424
"editor.codeActionsOnSave": {
25-
"source.fixAll.eslint": true
25+
"source.fixAll.eslint": "explicit"
2626
},
2727
"[javascript]": {
2828
"editor.formatOnSave": true,
2929
"editor.defaultFormatter": "esbenp.prettier-vscode"
3030
},
3131
"[typescript]": {
32-
"editor.defaultFormatter": "esbenp.prettier-vscode"
32+
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
3333
},
3434
"[typescriptreact]": {
3535
"editor.defaultFormatter": "esbenp.prettier-vscode"

.yarn/install-state.gz

1.58 MB
Binary file not shown.

.yarn/releases/yarn-4.0.2.cjs

Lines changed: 893 additions & 0 deletions
Large diffs are not rendered by default.

.yarnrc.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
nodeLinker: node-modules
2+
3+
yarnPath: .yarn/releases/yarn-4.0.2.cjs

netlify.toml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
publish = "storybook-static"
33
command = "yarn lint && yarn test && yarn build && yarn build-storybook"
44
[build.environment]
5-
NODE_VERSION = "14"
6-
YARN_VERSION = "1.22.10"
5+
NODE_VERSION = "20.11.0"
6+
YARN_VERSION = "4.0.2"
77
DOTENV_DISPLAY_WARNING = "none"
88
STORYBOOK_EXAMPLE_APP ="true"
99
[[headers]]
1010
for = "/*"
1111
[headers.values]
12-
Access-Control-Allow-Origin = "*"
12+
Access-Control-Allow-Origin = "*"

package.json

Lines changed: 66 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-data-table-component",
3-
"version": "7.5.4",
3+
"version": "7.6.0",
44
"description": "A simple to use declarative react based data table",
55
"main": "dist/index.cjs.js",
66
"module": "dist/index.es.js",
@@ -28,83 +28,91 @@
2828
"build:umd": "rollup -c rollup/rollup.config.umd.js",
2929
"build:cjs": "rollup -c rollup/rollup.config.cjs.js",
3030
"build:es": "rollup -c rollup/rollup.config.es.js",
31-
"build": "rimraf dist/* && npm run build:dev && npm run build:cjs && npm run build:umd && npm run build:es",
31+
"build": "rimraf dist && npm run build:dev && npm run build:cjs && npm run build:umd && npm run build:es",
3232
"start": "npm run build:dev -- -w",
3333
"test": "jest --passWithNoTests --verbose --coverage",
3434
"test:tdd": "jest --watch",
3535
"test:tdd-coverage": "jest --watch --coverage",
3636
"test:coverage": "jest --coverage",
3737
"lint": "eslint . --ext .ts,.tsx && eslint . --ext .js --config eslintrc-js.js",
38-
"storybook": "start-storybook -p 6006",
39-
"build-storybook": "build-storybook",
38+
"storybook": "storybook dev -p 6006",
39+
"build-storybook": "storybook build",
4040
"deploy-storybook": "gh-pages -d storybook-static"
4141
},
4242
"devDependencies": {
43-
"@babel/core": "^7.16.5",
44-
"@babel/eslint-parser": "^7.16.5",
43+
"@babel/core": "^7.23.7",
44+
"@babel/eslint-parser": "^7.23.3",
45+
"@babel/plugin-transform-class-properties": "^7.23.3",
46+
"@faker-js/faker": "^8.3.1",
4547
"@material-ui/core": "^4.12.3",
46-
"@material-ui/icons": "^4.11.2",
47-
"@rollup/plugin-commonjs": "^21.0.1",
48-
"@rollup/plugin-node-resolve": "^13.1.1",
49-
"@storybook/addon-a11y": "^6.4.22",
50-
"@storybook/addon-essentials": "^6.4.22",
51-
"@storybook/addon-storysource": "^6.4.22",
52-
"@storybook/addons": "^6.4.22",
53-
"@storybook/react": "^6.4.22",
54-
"@storybook/theming": "^6.4.22",
55-
"@testing-library/react": "^12.1.2",
56-
"@types/faker": "^5.5.9",
57-
"@types/jest": "^27.0.3",
58-
"@types/lodash-es": "^4.17.5",
59-
"@types/lodash.orderby": "^4.6.6",
60-
"@types/node": "^17.0.0",
61-
"@types/react": "^17.0.37",
62-
"@types/react-dom": "^17.0.11",
63-
"@types/styled-components": "^5.1.18",
64-
"@typescript-eslint/eslint-plugin": "^5.7.0",
65-
"@typescript-eslint/parser": "^5.7.0",
66-
"axios": "^0.24.0",
48+
"@material-ui/icons": "^4.11.3",
49+
"@rollup/plugin-commonjs": "^25.0.7",
50+
"@rollup/plugin-node-resolve": "^15.2.3",
51+
"@storybook/addon-a11y": "^7.6.7",
52+
"@storybook/addon-essentials": "^7.6.7",
53+
"@storybook/addon-mdx-gfm": "^7.6.7",
54+
"@storybook/addon-storysource": "^7.6.7",
55+
"@storybook/addons": "^7.6.7",
56+
"@storybook/react": "^7.6.7",
57+
"@storybook/react-webpack5": "^7.6.7",
58+
"@storybook/theming": "^7.6.7",
59+
"@testing-library/react": "^14.1.2",
60+
"@types/jest": "^29.5.11",
61+
"@types/lodash-es": "^4.17.12",
62+
"@types/lodash.orderby": "^4.6.9",
63+
"@types/node": "^20.11.0",
64+
"@types/react": "^18.2.47",
65+
"@types/react-dom": "^18.2.18",
66+
"@typescript-eslint/eslint-plugin": "^6.18.1",
67+
"@typescript-eslint/parser": "^6.18.1",
68+
"axios": "^1.6.5",
6769
"codecov": "^3.8.3",
68-
"eslint": "^8.5.0",
69-
"eslint-config-prettier": "^8.3.0",
70-
"eslint-config-react-app": "^7.0.0",
71-
"eslint-plugin-import": "^2.25.3",
72-
"eslint-plugin-jest": "^25.3.0",
73-
"eslint-plugin-jsx-a11y": "^6.5.1",
74-
"eslint-plugin-prettier": "^4.0.0",
75-
"eslint-plugin-react": "^7.27.1",
76-
"eslint-plugin-react-hooks": "^4.3.0",
77-
"eslint-plugin-storybook": "^0.5.11",
78-
"faker": "^5.5.3",
79-
"gh-pages": "^3.2.3",
80-
"jest": "^27.4.5",
81-
"jest-styled-components": "^7.0.8",
82-
"jest-watch-typeahead": "^1.0.0",
70+
"eslint": "^8.56.0",
71+
"eslint-config-prettier": "^9.1.0",
72+
"eslint-plugin-import": "^2.29.1",
73+
"eslint-plugin-jest": "^27.6.2",
74+
"eslint-plugin-jsx-a11y": "^6.8.0",
75+
"eslint-plugin-prettier": "^5.1.3",
76+
"eslint-plugin-react": "^7.33.2",
77+
"eslint-plugin-react-hooks": "^4.6.0",
78+
"eslint-plugin-storybook": "^0.6.15",
79+
"gh-pages": "^6.1.1",
80+
"jest": "^29.7.0",
81+
"jest-environment-jsdom": "^29.7.0",
82+
"jest-styled-components": "^7.2.0",
83+
"jest-watch-typeahead": "^2.2.2",
8384
"lodash-es": "^4.17.21",
8485
"memoize-one": "^6.0.0",
85-
"moment": "^2.29.1",
86-
"prettier": "^2.5.1",
87-
"react": "^17.0.2",
86+
"moment": "^2.30.1",
87+
"postcss-styled-syntax": "^0.6.4",
88+
"prettier": "^3.1.1",
89+
"react": "^18.2.0",
8890
"react-app-polyfill": "^3.0.0",
89-
"react-dom": "^17.0.2",
90-
"rimraf": "^3.0.2",
91+
"react-dom": "^18.2.0",
92+
"rimraf": "^5.0.5",
9193
"rollup": "^2.61.1",
9294
"rollup-plugin-terser": "^7.0.2",
93-
"rollup-plugin-typescript2": "^0.31.1",
95+
"rollup-plugin-typescript2": "^0.36.0",
9496
"rollup-plugin-visualizer": "^5.5.2",
95-
"styled-components": "^5.3.3",
96-
"stylelint": "^14.1.0",
97-
"stylelint-config-recommended": "^6.0.0",
98-
"stylelint-config-styled-components": "^0.1.1",
99-
"stylelint-processor-styled-components": "^1.10.0",
100-
"ts-jest": "^27.1.2",
101-
"typescript": "^4.6.4"
97+
"storybook": "^7.6.7",
98+
"styled-components": "^6.1.8",
99+
"stylelint": "^16.1.0",
100+
"stylelint-config-standard": "^36.0.0",
101+
"stylelint-prettier": "^5.0.0",
102+
"ts-jest": "^29.1.1",
103+
"typescript": "^5.3.3"
102104
},
103105
"dependencies": {
104-
"deepmerge": "^4.2.2"
106+
"deepmerge": "^4.3.1"
105107
},
106108
"peerDependencies": {
107109
"react": ">= 16.8.3",
108-
"styled-components": ">= 4"
109-
}
110+
"styled-components": ">= 5.0.0"
111+
},
112+
"peerDependenciesMeta": {
113+
"styled-components": {
114+
"optional": false
115+
}
116+
},
117+
"packageManager": "[email protected]"
110118
}

src/DataTable/DataTable.tsx

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -203,13 +203,25 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
203203
dispatch(action);
204204
}, []);
205205

206-
const handleRowClicked = React.useCallback((row, e) => onRowClicked(row, e), [onRowClicked]);
206+
const handleRowClicked = React.useCallback(
207+
(row: T, e: React.MouseEvent<Element, MouseEvent>) => onRowClicked(row, e),
208+
[onRowClicked],
209+
);
207210

208-
const handleRowDoubleClicked = React.useCallback((row, e) => onRowDoubleClicked(row, e), [onRowDoubleClicked]);
211+
const handleRowDoubleClicked = React.useCallback(
212+
(row: T, e: React.MouseEvent<Element, MouseEvent>) => onRowDoubleClicked(row, e),
213+
[onRowDoubleClicked],
214+
);
209215

210-
const handleRowMouseEnter = React.useCallback((row, e) => onRowMouseEnter(row, e), [onRowMouseEnter]);
216+
const handleRowMouseEnter = React.useCallback(
217+
(row: T, e: React.MouseEvent<Element, MouseEvent>) => onRowMouseEnter(row, e),
218+
[onRowMouseEnter],
219+
);
211220

212-
const handleRowMouseLeave = React.useCallback((row, e) => onRowMouseLeave(row, e), [onRowMouseLeave]);
221+
const handleRowMouseLeave = React.useCallback(
222+
(row: T, e: React.MouseEvent<Element, MouseEvent>) => onRowMouseLeave(row, e),
223+
[onRowMouseLeave],
224+
);
213225

214226
const handleChangePage = React.useCallback(
215227
(page: number) =>

src/DataTable/ExpanderRow.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function ExpanderRow<T>({
3131
const classNames = ['rdt_ExpanderRow', ...classNamesSplit].join(' ');
3232

3333
return (
34-
<ExpanderRowStyle className={classNames} $extendedRowStyle={extendedRowStyle}>
34+
<ExpanderRowStyle className={classNames} $extendedRowStyle={extendedRowStyle as CSSObject}>
3535
<ExpanderComponent data={data} {...expanderComponentProps} />
3636
</ExpanderRowStyle>
3737
);

src/DataTable/TableCell.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ function Cell<T>({
5555
onDragEnter,
5656
onDragLeave,
5757
}: CellProps<T>): JSX.Element {
58-
const { style, classNames } = getConditionalStyle(row, column.conditionalCellStyles, ['rdt_TableCell']);
58+
const { conditionalStyle, classNames } = getConditionalStyle(row, column.conditionalCellStyles, ['rdt_TableCell']);
5959

6060
return (
6161
<CellStyle
@@ -77,7 +77,7 @@ function Cell<T>({
7777
right={column.right}
7878
width={column.width}
7979
$wrapCell={column.wrap}
80-
style={style}
80+
style={conditionalStyle as React.CSSProperties}
8181
$isDragging={isDragging}
8282
onDragStart={onDragStart}
8383
onDragOver={onDragOver}

src/DataTable/TableCol.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const ColumnStyled = styled(CellExtended)<ColumnStyleProps>`
2121

2222
interface ColumnSortableProps {
2323
disabled: boolean;
24-
sortActive: boolean;
24+
$sortActive: boolean;
2525
}
2626

2727
const sortableCSS = css<ColumnSortableProps>`
@@ -30,7 +30,7 @@ const sortableCSS = css<ColumnSortableProps>`
3030
i,
3131
svg {
3232
transform: 'translate3d(0, 0, 0)';
33-
${({ sortActive }) => (sortActive ? 'opacity: 1' : 'opacity: 0')};
33+
${({ $sortActive }) => ($sortActive ? 'opacity: 1' : 'opacity: 0')};
3434
color: inherit;
3535
font-size: 18px;
3636
height: 18px;
@@ -47,8 +47,8 @@ const sortableCSS = css<ColumnSortableProps>`
4747
}
4848
}
4949
50-
${({ sortActive }) =>
51-
!sortActive &&
50+
${({ $sortActive }) =>
51+
!$sortActive &&
5252
css`
5353
&:hover,
5454
&:focus {
@@ -214,7 +214,7 @@ function TableCol<T>({
214214
className="rdt_TableCol_Sortable"
215215
onClick={!disableSort ? handleSortChange : undefined}
216216
onKeyPress={!disableSort ? handleKeyPress : undefined}
217-
sortActive={!disableSort && sortActive}
217+
$sortActive={!disableSort && sortActive}
218218
disabled={disableSort}
219219
>
220220
{!disableSort && customSortIconRight && renderCustomSortIcon()}

0 commit comments

Comments
 (0)