Update react dependencies (major)

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@testing-library/react	13.4.0 -> 16.0.1
eslint-plugin-react-hooks (source)	4.6.0 -> 5.0.0
qrcode.react (source)	3.1.0 -> 4.1.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.1

Compare Source

v16.0.0

Compare Source

Features

• Move @testing-library/dom and @types/react-dom to peer dependencies (#​1305) (a4744fa)

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.

v15.0.7

Compare Source

v15.0.6

Compare Source

v15.0.5

Compare Source

v15.0.4

Compare Source

v15.0.3

Compare Source

Bug Fixes

• Don't raise TypeScript errors when hydating document (#​1304) (067d0c6)

v15.0.2

Compare Source

v15.0.1

Compare Source

v15.0.0

Compare Source

v14.3.1

Compare Source

Bug Fixes

• Stop using nullish coalescing (#​1300) (8434a24)

v14.3.0

Compare Source

v14.2.2

Compare Source

v14.2.1

Compare Source

Bug Fixes

• Update types to support all possible react component return values (#​1272) (55e79c2)

v14.2.0

Compare Source

Features

• add reactStrictMode option to enable strict mode render (#​1241) (0880eba)

v14.1.2

Compare Source

Bug Fixes

• revert missing hooks warnings (#​1255) (1c67477)

v14.1.1

Compare Source

Bug Fixes

• log globals warning only once (#​1252) (fd52a59), closes #​1249

v14.1.0

Compare Source

Features

• add warnings when globals are missing (#​1244) (d80319f)

v14.0.0

Compare Source

Bug Fixes

• Prevent "missing act" warning for queued microtasks (#​1137) (f78839b)

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

facebook/react (eslint-plugin-react-hooks)

v5.0.0

Compare Source

• New Violations: Component names now need to start with an uppercase letter instead of a non-lowercase letter. This means _Button or _component are no longer valid. (@​kassens) in #​25162

• Consider dispatch from useActionState stable. (@​eps1lon in #​29665)
• Add support for ESLint v9. (@​eps1lon in #​28773)
• Accept as expression in callback. (@​StyleShit in #​28202)
• Accept as expressions in deps array. (@​StyleShit in #​28189)
• Treat React.use() the same as use(). (@​kassens in #​27769)
• Move use() lint to non-experimental. (@​kassens in #​27768)
• Support Flow as expressions. (@​cpojer in #​27590)
• Allow useEffect(fn, undefined). (@​kassens in #​27525)
• Disallow hooks in async functions. (@​acdlite in #​27045)
• Rename experimental useEvent to useEffectEvent. (@​sebmarkbage in #​25881)
• Lint for presence of useEvent functions in dependency lists. (@​poteto in #​25512)
• Check useEvent references instead. (@​poteto in #​25319)
• Update RulesOfHooks with useEvent rules. (@​poteto in #​25285)

v4.6.2

Compare Source

v4.6.1

Compare Source

zpao/qrcode.react (qrcode.react)

v4.1.0

Compare Source

Added

• Added support for new boostLevel prop, allowing the disabling of the underlying encoder's default of automatically boosting the ECL. (#​374)
• Added support for accepting an array of strings for value, which enables encoding of each part into independent segments. (#​374)

v4.0.1

Compare Source

Fixed

• Corrected issue with loading types in Typescript when configured with "moduleResolution": "Bundler" or "module": "ESNext". (#​368)

v4.0.0

Compare Source

Added

• Added proper support for ref, enabling direct access for underlying canvas or svg nodes. This also resulted in much more accurate type defitions. (#​202)
• Added support for marginSize prop, replacing the now deprecated includeMargin. This enables margins of any value, not just 0 or 4. (#​281)
• Added Support for Setting Image Opacity via imageSettings.opacity (#​292)
• Added minVersion prop to give better control over QR Code generated (#​323)
• Added support for specifying cross-origin for embedded images via imageSettings.crossOrigin. (#​324)

Changed

• Improved accessibility for QRCodeSVG by rendering a <title> node instead of setting a title attribute. (#​284)
• Improved accessibility with explicit role set on rendered SVG and Canvas. (#​321)
• Improved documentation (#​358)
• Used better types in TypeScript for ErrorCorrectionLevel, resulting in better developer experience. (#​291)

Deprecated

• The includeMargin prop has been deprecated in favor of marginSize. (#​281)

Removed

• Removed default export which was deprecated in v3. (#​208)
• Remove explicit style prop. This still works identically as it was passed through and the type definitions are unaffected as they were improved via the ref changes (#​357)

Fixed

• Improved support for dual publishing of ESM/CJS modules for better compatibility with tools. (#​301)
• Set explicit display names for improved debugging experience. (#​304)
• Improved SVG compatibility by using href in place of xlink:href for embedded images. (#​336)
• Mitigated warnings when using QRCodeSVG in server components (#​352)

v3.2.0

Compare Source

Fixed

• Improved support for dual publishing of ESM/CJS modules for better compatibility with tools. (#​301, #​368)
• Mitigated warnings when using QRCodeSVG in server components (#​352)

Changed

• Added @deprecated JSDoc to default export for additional visibility in editors to TypeScript users.

jbetancur/react-data-table-component (react-data-table-component)

v7.6.2

Compare Source

What's Changed

• Fix declarations by @​jbetancur in https://github.com/jbetancur/react-data-table-component/pull/1199

Full Changelog: jbetancur/react-data-table-component@v7.6.1...v7.6.2

v7.6.1

Compare Source

What's Changed

• fix broken stories by @​jbetancur in https://github.com/jbetancur/react-data-table-component/pull/1197

Full Changelog: jbetancur/react-data-table-component@v7.6.0...v7.6.1

v7.6.0

Compare Source

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: jbetancur/react-data-table-component@v7.5.4...v7.6.0

v7.5.4

Compare Source

Fixes #​1154 - thank you @​HendrikPetertje !

v7.5.3

Compare Source

Fixes

• #​1076 className should now pass to responsiveWrapper

v7.5.2

Compare Source

Fixes

• fixes infinite re-render when using setState or useState hooks within onSort

v7.5.1

Compare Source

Features

• #​1047 adds sorted columns as a 3rd prop for onSort

v7.5.0

Compare Source

Features

• #​1027 adds row event handlers for mouse. thank you @​gsimko !

v7.4.7

Compare Source

• fixes #​988

v7.4.6

Compare Source

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

Compare Source

🥃 Features 🥃

• #​945 selectableRowsSingle should now work with selectableRowSelected, however if you have more than one match only the first match will be selected.

v7.4.4

Compare Source

🥃 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

Compare Source

🐞 Fixes 🐞

• #​937 fixes TypeError: Attempting to change configurable attribute of unconfigurable on the data prop for certain use cases

v7.4.2

Compare Source

🐞 Fixes 🐞

• #​930 when using onSelectedRowsChange no longer causes infinite loop when updating table data within onSelectedRowsChange
• #​934 fixed expandableRowsComponent types

v7.4.1

Compare Source

🐞 Fixes 🐞

• createTheme no longer requires an inherited theme

v7.4.0

Compare Source

🥃 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 the lodash.orderBy sorting behavior you can install lodash yourself and use sortFunction to re-implement orderBy.

🐞 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

Compare Source

🐞 Fixes 🐞

• #​922 context menu should now be visible when selecting rows

v7.3.0

Compare Source

🥃 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

Compare Source

🐞 Fixes 🐞

• #​919 No longer apply css styles when column.name is a component

v7.2.0

Compare Source

🐞 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

Compare Source

🥃 New Features 🥃

• #​901 #​909 - conditional styles for both rows and cells now accepts classNames

v7.0.2

Compare Source

🐞 Fixes 🐞

• #​906 fixes "Could not find a declaration file for module 'react-data-table-component'"

v7.0.1

Compare Source

🐞 Bug Fixes 🐞

• setting defaultSortFieldId now works properly
• added back alias for IDataTableRow (which is now TableRow 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

Compare Source

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 now defaultSortFieldId where you use a column ID instead of a name.
  If you do not assign an id to each of your column definitions RDT will add a number based id starting with 1,2,3,...
• overflowY and overflowYOffset have been removed from the API as they were problematic when using fixedHeader. 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 pass selectableRowsComponentProps={{ type: 'radio' }} or pass in your own custom/ui library Radio button using both selectableRowsComponent and selectableRowsComponentProps
• Added a new prop: expandableRowsComponentProps now allows you to pass extra props to your custom expandableRowsComponent.

🐞 🐞 Fixes 🐞 🐞

• fixedHeader scroll bar no longer offsets table columns. Note that fixedHeader 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 and conditionalRows
• 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

staylor/react-helmet-async (react-helmet-async)

v2.0.5

Compare Source

v2.0.4

Compare Source

v2.0.3

Compare Source

v2.0.2

Compare Source

v2.0.1

Compare Source

v2.0.0

Compare Source

---

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 is behind base branch, 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 was generated by Mend Renovate. View the repository job log.

[github-actions]

🦙 MegaLinter status: ✅ SUCCESS

Descriptor	Linter	Files	Fixed	Errors	Elapsed time
✅ EDITORCONFIG	editorconfig-checker	2		0	0.01s
✅ JSON	eslint-plugin-jsonc	1	0	0	0.92s
✅ JSON	jsonlint	1		0	0.26s
✅ JSON	npm-package-json-lint	yes		no	0.65s
✅ JSON	prettier	1	0	0	0.34s
✅ JSON	v8r	1		0	5.37s
✅ REPOSITORY	checkov	yes		no	40.62s
✅ REPOSITORY	git_diff	yes		no	0.02s
✅ REPOSITORY	grype	yes		no	12.51s
✅ REPOSITORY	trivy-sbom	yes		no	3.12s
✅ REPOSITORY	trufflehog	yes		no	134.58s

See detailed report in MegaLinter reports
Set VALIDATE_ALL_CODEBASE: true in mega-linter.yml to validate all sources, not only the diff

MegaLinter is graciously provided by

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@babel/[email protected]	None	0	65 kB	nicolo-ribaudo
npm/@babel/[email protected]	None	0	4.76 kB	nicolo-ribaudo
npm/@babel/[email protected]	None	0	20 kB	nicolo-ribaudo
npm/@babel/[email protected]	None	0	4.79 kB	nicolo-ribaudo
npm/@babel/[email protected]	None	0	6.57 kB	nicolo-ribaudo
npm/@babel/[email protected]	None	0	4.35 kB	nicolo-ribaudo
npm/@babel/[email protected]	None	0	7.18 kB	nicolo-ribaudo
npm/@babel/[email protected]	None	0	21.3 kB	nicolo-ribaudo
npm/@babel/[email protected]	None	0	4.71 kB	nicolo-ribaudo
npm/@babel/[email protected]	None	0	15.9 kB	nicolo-ribaudo
npm/@testing-library/[email protected]	environment	0	329 kB	testing-library-bot
npm/[email protected]	None	0	31.2 kB	tehshrike
npm/[email protected]	None	0	115 kB	zpao
npm/[email protected]	None	0	629 kB	jbetancur
npm/[email protected]	None	0	16.2 kB	formidablelabs
npm/[email protected]	None	0	86.3 kB	wonderboymusic

🚮 Removed packages: npm/@testing-library/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎