chore(deps): update docs-deps-major (major) - autoclosed

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
react (source)	^18.2.0 -> ^19.0.0
react-dom (source)	^18.2.0 -> ^19.0.0
react-toastify	^10.0.5 -> ^11.0.0
wait-on	^7.2.0 -> ^8.0.0

---

Warning

Some dependencies could not be looked up. Check the Dependency Dashboard for more information.

---

Release Notes

facebook/react (react)

v19.0.0

Compare Source

facebook/react (react-dom)

v19.0.0

Compare Source

fkhadra/react-toastify (react-toastify)

v11.0.0: v11

Compare Source

What is new in v11

I’m super excited about this release! The main focus was on customization, and my goal was to empower you (and myself) so you can fully personalize the look and feel for the notifications.

In short, react-toastify should be able to blend into any design system.

No need to import the css file anymore

The stylesheet is now injected automatically, so you no longer need to import it. The CSS file is still exported by the library.

  import { ToastContainer, toast } from 'react-toastify';

  function App(){
    const notify = () => toast("Wow so easy !");

    return (
      <div>
        <button onClick={notify}>Notify !</button>
        <ToastContainer />
      </div>
    );
  }

Easy customization!

One of the top requests has been how to customize notifications. To be fair, until this release, it was quite challenging because it required users to override numerous CSS classes.

I’ve simplified the DOM structure of the notification by removing extraneous div elements, nested elements, etc... It’s a significant breaking change, but it’s truly worth the effort. I can confidently say that the library can now seamlessly integrate into any design system.

Below, I’ve implemented a couple of different designs using only Tailwind. I didn’t override a single CSS class from react-toastify 🤯!

[!NOTE]
Head to stackblitz to check the code.

How does it work in practice? On the left side, we have the old DOM structure vs the new one on the right side.

• Toastify__toast-body and its child are now completely gone.
• The CloseButton now uses an absolute position.

Thanks to those changes, nothing will interfere with your content.

Toastify__toast has some sensible default values(e.g., border-radius, shadow, etc...) that can be customized using css or by updating the associated css variables:

width: var(--toastify-toast-width);
min-height: var(--toastify-toast-min-height);
padding: var(--toastify-toast-padding);
border-radius: var(--toastify-toast-bd-radius);
box-shadow: var(--toastify-toast-shadow);
max-height: var(--toastify-toast-max-height);
font-family: var(--toastify-font-family);

Custom progress bar

Allowing a custom progress bar wasn’t on my to-do list at all while working on this release. But seeing how easy it is to customize notifications now, I couldn’t resist 😆.

The best part is that you don’t have to compromise on features like autoClose, pauseOnHover, pauseOnFocusLoss, or even a controlled progress bar—it just works seamlessly for you.

Here is a small gist.

function App() {
  const notify = () => {
    toast(CustomComponent, {
      autoClose: 8000,
      // removes the built-in progress bar
      customProgressBar: true
    });
  };

  return (
    <div>
      <button onClick={notify}>notify</button>
      <ToastContainer />
    </div>
  );
}

// isPaused is now available in your component
// it tells you when to pause the animation: pauseOnHover, pauseOnFocusLoss etc...
function CustomComponent({ isPaused, closeToast }: ToastContentProps) {
  return (
    <div>
      <span>Hello</span>
      <MyCustomProgressBar isPaused={isPaused} onAnimationEnd={() => closeToast()} />
    </div>
  );
}

[!NOTE]
Head to stackblitz for a live example.

Accessibility and keyboard navigation

ToastContainer and toast accept an ariaLabel prop(finally...). This is quite helpful for screen readers and also for testing.
For example, in cypress you could do cy.findByRole("alert", {name: "the aria label you specified"}).

toast("hello", {
  ariaLabel: "something"
})

If a notification is visible and the user presses alt+t it will focus on the first notification allowing the user to use Tab to navigate through the different elements within the notification.

The hotKeys can be changed of course.

// focus when user presses ⌘ + F
const matchShortcut = (e: KeyboardEvent) => e.metaKey && e.key === 'f'

<ToastContainer hotKeys={matchShortcut} ariaLabel="Notifications ⌘ + F" />

Notification removal reason with onClose callback

Do you want to know whether the user closed the notification or if it closed automatically? Rest assured, this is now possible!

The signature of the onClose callback is now onClose(reason?: boolean | string) => void.

When the user closes the notification, the reason argument is equal to true. In the example below, I've named my argument
removedByUser to make the intent clear.

toast("hello", {
  onClose(removedByUser){
    if(removedByUser) {
      // do something
      return
    }

    // auto close do something else
  }
})

If you are using a custom component for your notification, you might want more control over the reason, especially if it contains
multiple call to actions.

import { ToastContentProps } from "react-toastify";

function CustomNotification({closeToast}: ToastContentProps) {
  return <div>
      You received a new message
      <button onClick={() => closeToast("reply")}>Reply</button>
      <button onClick={() => closeToast("ignore")}>Ignore</button>
    </div>
}

toast(CustomNotification, {
  onClose(reason){
    switch (reason) {
      case "reply":
        // navigate to reply page for example or open a dialog
      case "ignore":
        // tell the other user that she/he was ghosted xD
      default:
        // 🤷‍♂️
    }
  }
})

💥 Breaking Changes

useToastContainer and useToast no longer exposed

Those hooks are unusable unless you deep dive in react-toastify source code to understand how to glue things together. This is not what I want for my users, it was a bad decision to expose them in the first place, I've learned a good lesson.

onClose and onOpen no longer receive children props

In hindsight, I should never have done this. The feature is practically not used. Below the new signature for each callback:

• onOpen: () => void
• onClose: (reason?: boolean | string) => void

Styling

• react-toastify/dist/ReactToastify.minimal.css has been removed.
• Scss is out of the picture now. The library uses good old css.
• bodyClassName and bodyStyle are no longer needed.
• progressBarStyle in order to reduce the api surface. They are now better way to customize everything without relying on inline style.
• injectStyle has been removed. This function is no longer needed.
• The css class Toastify__toast-body and its direct child have been removed.
  

🐞 Bug Fixes

• add support for react19 #​1177 #​1185
• reexport CloseButtonProps #​1165
• fix newestOnTop for real this time #​1176
• no longer throw this ugly error: Cannot set properties of undefined (setting 'toggle') #​1170
• onClose callback is no longer delayed until the exit animation completes #​1179

🔮What's next?

I'm gradually rewriting part of the documentation. I've created a collection on stackblitz, this way you can find all the examples in one place. I'll keep adding more examples as I go.

I've been maintaining react-toastify for more than 8 years. If your company depends on it, consider contributing to its continued development and maintenance. Open-source software thrives with community support, and funding helps ensure we(the maintainers) can keep improving and innovating.

Every contribution, big or small, makes a difference and is greatly appreciated.

• GitHub Sponsorship
• Open Collective

jeffbski/wait-on (wait-on)

v8.0.1

Compare Source

v8.0.0: - breaking change for http unix socket use

Compare Source

Updated for security vulnerabilities with [email protected] and braces.

Breaking change in using latest axios with a unix socket URL

As part of the axios update, the syntax for using a socket with an http URL in axios has changed so you must specify the protocol and server

For example:

http://unix:SOCKETPATH:http://server/foo/bar

instead of just using only the path (no protocol and no server)

http://unix:SOCKETPATH:/foo/bar

Due to this change, I have updated my tests, docs, bumped the major version.

---

Configuration

📅 Schedule: Branch creation - "on thursday" (UTC), 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]

Pull Request Test Coverage Report for Build 12175902846

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-0.01%) to 91.742%

---

Totals
Change from base Build 12175887740:	-0.01%
Covered Lines:	6813
Relevant Lines:	7294

---

💛 - Coveralls

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[renovate]

⚠️ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

• any of the package files in this branch needs updating, or
• the branch becomes conflicted, or
• you click the rebase/retry checkbox if found above, or
• you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: docs/package-lock.json

npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @docsearch/[email protected]
npm warn Found: [email protected]
npm warn node_modules/react
npm warn   react@"^19.0.0" from the root project
npm warn   10 more (@docusaurus/module-type-aliases, @iconify/react, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peerOptional react@">= 16.8.0 < 19.0.0" from @docsearch/[email protected]
npm warn node_modules/@docsearch/react
npm warn   @docsearch/react@"^3.5.2" from @docusaurus/[email protected]
npm warn   node_modules/@docusaurus/theme-search-algolia
npm warn
npm warn Conflicting peer dependency: [email protected]
npm warn node_modules/react
npm warn   peerOptional react@">= 16.8.0 < 19.0.0" from @docsearch/[email protected]
npm warn   node_modules/@docsearch/react
npm warn     @docsearch/react@"^3.5.2" from @docusaurus/[email protected]
npm warn     node_modules/@docusaurus/theme-search-algolia
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @docsearch/[email protected]
npm warn Found: [email protected]
npm warn node_modules/react-dom
npm warn   react-dom@"^19.0.0" from the root project
npm warn   2 more (@docusaurus/module-type-aliases, react-toastify)
npm warn
npm warn Could not resolve dependency:
npm warn peerOptional react-dom@">= 16.8.0 < 19.0.0" from @docsearch/[email protected]
npm warn node_modules/@docsearch/react
npm warn   @docsearch/react@"^3.5.2" from @docusaurus/[email protected]
npm warn   node_modules/@docusaurus/theme-search-algolia
npm warn
npm warn Conflicting peer dependency: [email protected]
npm warn node_modules/react-dom
npm warn   peerOptional react-dom@">= 16.8.0 < 19.0.0" from @docsearch/[email protected]
npm warn   node_modules/@docsearch/react
npm warn     @docsearch/react@"^3.5.2" from @docusaurus/[email protected]
npm warn     node_modules/@docusaurus/theme-search-algolia
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @docusaurus/[email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   react@"^19.0.0" from the root project
npm error   peer react@"*" from @docusaurus/[email protected]
npm error   node_modules/@docusaurus/module-type-aliases
npm error     dev @docusaurus/module-type-aliases@"3.6.3" from the root project
npm error     @docusaurus/module-type-aliases@"3.6.3" from @docusaurus/[email protected]
npm error     node_modules/@docusaurus/plugin-content-docs
npm error       peer @docusaurus/plugin-content-docs@"*" from @docusaurus/[email protected]
npm error       node_modules/@docusaurus/plugin-content-blog
npm error         @docusaurus/plugin-content-blog@"3.6.3" from @docusaurus/[email protected]
npm error         node_modules/@docusaurus/preset-classic
npm error         1 more (@docusaurus/theme-classic)
npm error       4 more (@docusaurus/preset-classic, ...)
npm error     2 more (@docusaurus/theme-classic, @docusaurus/theme-common)
npm error   9 more (@iconify/react, @mdx-js/react, prism-react-renderer, ...)
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from @docusaurus/[email protected]
npm error node_modules/@docusaurus/core
npm error   @docusaurus/core@"^3.2.1" from the root project
npm error   @docusaurus/core@"3.6.3" from @docusaurus/[email protected]
npm error   node_modules/@docusaurus/plugin-content-blog
npm error     @docusaurus/plugin-content-blog@"3.6.3" from @docusaurus/[email protected]
npm error     node_modules/@docusaurus/preset-classic
npm error       @docusaurus/preset-classic@"^3.2.1" from the root project
npm error     1 more (@docusaurus/theme-classic)
npm error   11 more (@docusaurus/plugin-content-docs, ...)
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/react
npm error   peer react@"^18.0.0" from @docusaurus/[email protected]
npm error   node_modules/@docusaurus/core
npm error     @docusaurus/core@"^3.2.1" from the root project
npm error     @docusaurus/core@"3.6.3" from @docusaurus/[email protected]
npm error     node_modules/@docusaurus/plugin-content-blog
npm error       @docusaurus/plugin-content-blog@"3.6.3" from @docusaurus/[email protected]
npm error       node_modules/@docusaurus/preset-classic
npm error         @docusaurus/preset-classic@"^3.2.1" from the root project
npm error       1 more (@docusaurus/theme-classic)
npm error     11 more (@docusaurus/plugin-content-docs, ...)
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /tmp/renovate/cache/others/npm/_logs/2024-12-26T10_39_38_795Z-eresolve-report.txt
npm error A complete log of this run can be found in: /tmp/renovate/cache/others/npm/_logs/2024-12-26T10_39_38_795Z-debug-0.log