oasis-wallet-web
oasis-wallet-web copied to clipboard
Update react dependencies (major)
This PR contains the following updates:
Package | Change | Age | Adoption | Passing | Confidence |
---|---|---|---|---|---|
@testing-library/react | 13.4.0 -> 16.0.0 |
||||
react-data-table-component | 6.11.8 -> 7.6.2 |
||||
react-helmet-async | 1.3.0 -> 2.0.5 |
Release Notes
testing-library/react-testing-library (@testing-library/react)
v16.0.0
Features
BREAKING CHANGES
-
@testing-library/dom
was moved to a peer dependency and needs to be explicitly installed. This reduces the chance of having conflicting versions of@testing-library/dom
installed that frequently caused bugs when used with@testing-library/user-event
. We will also be able to allow new versions of@testing-library/dom
being used without a SemVer major release of@testing-library/react
by just widening the peer dependency.@types/react-dom
needs to be installed if you're typechecking files using@testing-library/react
.
Co-authored-by: Matan Borenkraout [email protected]
v15.0.7
v15.0.6
v15.0.5
v15.0.4
v15.0.3
Bug Fixes
v15.0.2
v15.0.1
v15.0.0
v14.3.1
Bug Fixes
v14.3.0
v14.2.2
v14.2.1
Bug Fixes
v14.2.0
Features
v14.1.2
Bug Fixes
v14.1.1
Bug Fixes
v14.1.0
Features
v14.0.0
Bug Fixes
Features
- Bump
@testing-library/dom
to 9.0.0 (#1177) (6653c23) - Drop support for Node.js 12.x (#1169) (9b7a1e2)
BREAKING CHANGES
- See https://github.com/testing-library/dom-testing-library/releases/tag/v9.0.0
- Minimum supported Node.js version is now 14.x
jbetancur/react-data-table-component (react-data-table-component)
v7.6.2
What's Changed
- Fix declarations by @jbetancur in https://github.com/jbetancur/react-data-table-component/pull/1199
Full Changelog: https://github.com/jbetancur/react-data-table-component/compare/v7.6.1...v7.6.2
v7.6.1
What's Changed
- fix broken stories by @jbetancur in https://github.com/jbetancur/react-data-table-component/pull/1197
Full Changelog: https://github.com/jbetancur/react-data-table-component/compare/v7.6.0...v7.6.1
v7.6.0
What's Changed
- update expandableRowsComponentProps name in docs by @rdubrock in https://github.com/jbetancur/react-data-table-component/pull/1189
- Fix typo in patterns story by @samrobbins85 in https://github.com/jbetancur/react-data-table-component/pull/1180
- update deps | styled | react by @jbetancur in https://github.com/jbetancur/react-data-table-component/pull/1195
- This is generally a maintenance release that should resolve various errors including but not limited to react 18 and styled-components 6
New Contributors
- @rdubrock made their first contribution in https://github.com/jbetancur/react-data-table-component/pull/1189
- @samrobbins85 made their first contribution in https://github.com/jbetancur/react-data-table-component/pull/1180
Full Changelog: https://github.com/jbetancur/react-data-table-component/compare/v7.5.4...v7.6.0
v7.5.4
Fixes #1154 - thank you @HendrikPetertje !
v7.5.3
Fixes
- #1076 className should now pass to responsiveWrapper
v7.5.2
Fixes
- fixes infinite re-render when using
setState
or useState hooks withinonSort
v7.5.1
Features
-
#1047 adds sorted columns as a 3rd prop for
onSort
v7.5.0
Features
v7.4.7
- fixes #988
v7.4.6
Bug Fixes
- #975 using custom a custom theme name should no longer cause TypeScript to complain
Maintenance
- Update deprecated deps
- Update deps
v7.4.5
🥃 Features 🥃
-
#945
selectableRowsSingle
should now work withselectableRowSelected
, however if you have more than one match only the first match will be selected.
v7.4.4
🥃 Features 🥃
- Expose
ExpanderComponentProps
TypeScript type. You can now:
type DataRow = {
....
};
const ExpandedComponent: React.FC<ExpanderComponentProps<DataRow>> = ({ data }) => {
return <pre>{JSON.stringify(data, null, 2)}</pre>;
};
// or
function ExpandedComponent({ data }: ExpanderComponentProps<DataRow>): JSX.Element {
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}
v7.4.3
🐞 Fixes 🐞
-
#937 fixes
TypeError: Attempting to change configurable attribute of unconfigurable
on thedata
prop for certain use cases
v7.4.2
🐞 Fixes 🐞
-
#930 when using
onSelectedRowsChange
no longer causes infinite loop when updating tabledata
withinonSelectedRowsChange
-
#934 fixed
expandableRowsComponent
types
v7.4.1
🐞 Fixes 🐞
-
createTheme
no longer requires an inherited theme
v7.4.0
🥃 Features 🥃
-
lodash.orderBy
has been removed and replaced with native sorting.lodash
was a bit heavy weight as a dependency (the bundle should be smaller now) and slower than native sort in some of our performance tests (basically negligible). If you want really miss thelodash.orderBy
sorting behavior you can installlodash
yourself and use sortFunction to re-implementorderBy
.
🐞 Fixes 🐞
-
#933 when using
createTheme
you may now specify one of the default themes to inherit from. This is useful if you only need to tweak a thing or 2 in each theme. See the custom theming for more details
v7.3.1
🐞 Fixes 🐞
- #922 context menu should now be visible when selecting rows
v7.3.0
🥃 New Features 🥃
- Column titles will now display a built in tooltip (using the title attribute) when a column is in a ellipses state
- This will be negated when you pass a component into a column name.
🐞 Fixes 🐞
- Fixes an issue where sort direction would default if
data
changes. Sort behavior should now be preserved - Fixes a spacing issue in columns titles
v7.2.1
🐞 Fixes 🐞
-
#919 No longer apply css styles when
column.name
is a component
v7.2.0
🐞 Fixes 🐞
- This releases fixes type inference where passing your Data type/interface was conflicting with an internal typing
TableRow
. This should no longer be the case.
v7.1.0
🥃 New Features 🥃
v7.0.2
🐞 Fixes 🐞
- #906 fixes "Could not find a declaration file for module 'react-data-table-component'"
v7.0.1
🐞 Bug Fixes 🐞
- setting
defaultSortFieldId
now works properly - added back alias for
IDataTableRow
(which is nowTableRow
to make migrating from v6 to v7 easier
🥃 New Features 🥃
- allow importing
TableRow
type
📜 Documentation 📜
- fixes some documentation issues
- adds typescript docs
- adds pattern docs
🏡 Housekeeping 🏡
- refactor to naming of components
- internal tweaks to types
- refactored sorting styles to be more customizable where possible
TypeScript Projects with React Data Table
React Data Table is built with TypeScript so typings are buit in. Let's implement React Data Table in a TypeScript project:
First, we'll need to define our data type (or interface):
import DataTable, { TableColumn } from 'react-data-table-component';
type DataRow {
title: string;
director: string;
year: string;
}
Alternatively, if you want to define DataRow
as an interface you will need to extend the built in TableRow
type:
import DataTable, { TableColumn, TableRow } from 'react-data-table-component';
interface DataRow extends TableRow {
title: string;
director: string;
year: string;
}
Next, we can create our columns. TableColumn
is an interface representing a column definition that takes a generic parameter. By passing TableColumn<DataRow>[]
we now have access to our dataRow
props on any property in our table columns
for any propery that accesses our data:
const columns: TableColumn<DataRow>[] = [
{
name: 'Title',
selector: row => row.title,
},
{
name: 'Director',
selector: row => row.director,
},
{
name: 'Year',
selector: row => row.year,
},
];
Finally, we can implement our TypeScript component that uses DataTable
:
function MyComponent(): JSX.Element {
return <DataTable columns={columns} data={data} />;
}
Alternatively, if you prefer using React.FC
:
const MyComponent: React.FC = () => {
return <DataTable columns={columns} data={data} />;
};
Putting it all together:
import DataTable, { TableColumn } from 'react-data-table-component';
type DataRow {
title: string;
director: string;
year: string;
}
const columns: TableColumn<DataRow>[] = [
{
name: 'Title',
selector: row => row.title,
},
{
name: 'Director',
selector: row => row.director,
},
{
name: 'Year',
selector: row => row.year,
},
];
function MyComponent(): JSX.Element {
return <DataTable columns={columns} data={data} />;
}
export default MyComponent;
v7.0.0
After several long months Version 7.0.0 is now available. The most notable change is that RDT 7 has been ported over to TypeScript which as it turns out resolved a number of bugs both unknown and long standing. This however, introduced some breaking changes to the API which are noted below. Also RDT v7 introduces several new features such as draggable columns, single row selection and the ability to pass props to expander components as well as vastly improved documentation.
Thank you all for your patience and to those that contributed PR's and/or feedback!
🔥 🔥 BREAKING CHANGES 🔥 🔥
-
expandableRowsComponent
no longer accepts JSX and must now be passed in as a function/class. e.g.: GOOD:expandableRowsComponent={MyExpander}
BAD:expandableRowsComponent={<MyExpander />}
-
sortFunction
prop signature has changed, This was necessary because RDT is moving to function only selectors which are more flexible and performant. Additionally, this allows the API user greater control over how they sort. See the README for details Custom Sort Function. -
defaultSortfField
is nowdefaultSortFieldId
where you use a column ID instead of a name. If you do not assign anid
to each of your column definitions RDT will add a number basedid
starting with 1,2,3,... -
overflowY
andoverflowYOffset
have been removed from the API as they were problematic when usingfixedHeader
. These were originally created to deal menu overlays that did not use dynamic positioning - causing a menu to be truncated at the bottom of the table. Most UI libraries should support dynamically positioned menus, but in any case this is no longer the responsibility of RDT to manage. - TypeScript targets have been upgraded to es6 from es5. This might cause issues with older browsers "possibly" IE 11. RDT has not supported IE11 in the past and will not in the future.
🥃 🥃 New Features 🥃 🥃
- Draggable column reordering is now available! See the Columns section in the Docs for details.
- Single row selection feature is now available via a new prop
selectableRowsSingle
. If you want to change the built in checkbox to a radio button you can passselectableRowsComponentProps={{ type: 'radio' }}
or pass in your own custom/ui library Radio button using bothselectableRowsComponent
andselectableRowsComponentProps
- Added a new prop:
expandableRowsComponentProps
now allows you to pass extra props to your customexpandableRowsComponent
.
🐞 🐞 Fixes 🐞 🐞
-
fixedHeader
scroll bar no longer offsets table columns. Note thatfixedHeader
relies on browsers that support sticky positioning. - Cleanup of stale sorting logic and CSS styles
- TableHeadRow is no longer disabled when in a loading state. Instead, each TableCol is disabled from sorting
- fixes a potential performance issue with large data sets and
conditionalCells
andconditionalRows
-
sortServer
should now disable internal sorting as it did in v6 - column centering show now work for both cells and cols
- update peerDependencies for React 17
- when using
fixedHeader
only show scroll bars when needed - fixes pagination select dropdown icon which was overlapping on larger numbers (e.g. 100, 1000 etc)
- fixes double horizontal bar in some browsers. Thanks @HoangNguyen17193
- you can now override
fontWeight
when using custom styles in headCells - fixes broken data table document not defined when using nextjs and pagination
- if the columns prop is changed it should now re-render DataTable.
- fixed an issue where using pre selected rows, unchecking a row and then and sorting would reset pre selects, this should no longer happen
- There was a bug when using
sortFunction
and pagination together would result in broken sorting. This is now fixed.
📜📜 Documentation 📜📜
- Documentation has been vastly improved. If you have ideas for additions or fixes please submit a PR!
- The original plan was to do a custom documentation site, however, given some time constraints it was decided stick with storybook and implement some of it's newer features.
👋 👋 Deprecations 👋 👋
- string selectors will display a console warning on non prod builds recommended you migrate to function selectors. This change is rather painless: selector: 'name' becomes selector:
row => row.name
. This not only allows for typing but also no longer requires an expensive regex/reduce function to loop through a row to "get' the prop
Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.
- [ ] If you want to rebase/retry this PR, check this box
This PR has been generated by Mend Renovate. View repository job log here.
🦙 MegaLinter status: ✅ SUCCESS
Descriptor | Linter | Files | Fixed | Errors | Elapsed time |
---|---|---|---|---|---|
✅ EDITORCONFIG | editorconfig-checker | 2 | 0 | 0.01s | |
✅ JSON | eslint-plugin-jsonc | 1 | 0 | 0 | 1.04s |
✅ JSON | jsonlint | 1 | 0 | 0.25s | |
✅ JSON | prettier | 1 | 0 | 0 | 0.95s |
✅ JSON | v8r | 1 | 0 | 6.0s | |
✅ REPOSITORY | checkov | yes | no | 15.92s | |
✅ REPOSITORY | git_diff | yes | no | 0.01s |
See errors details in artifact MegaLinter reports on CI Job page
Set VALIDATE_ALL_CODEBASE: true
in mega-linter.yml to validate all sources, not only the diff