fix(deps): update dependency react-toastify to v9

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
react-toastify	8.2.0 -> 9.1.3

---

Release Notes

fkhadra/react-toastify

v9.1.3

Compare Source

Release note

• Add support for RSC (next app router): #​951
• Partially address Toast is undefined || Uncaught TypeError: Cannot read properties of undefined (reading 'content') #​858 #​952
• Bump dependencies

v9.1.2

Compare Source

Release notes

Mainly bug fixes as I'm working on the next major release.

🕷Bugfixes

• fix resetting options #​921 #​920
• fix autoClose on update #​918
• fix invalid CSS translate #​925

v9.1.1

Compare Source

v9.1.0

Compare Source

Release notes

🚀 Features

• toast.promise let you type data for each state. This is useful when rendering something based on the response.

For example:

interface Success {
  username: string
}

interface Error {
  err: string
}

toast.promise<Success,Error>(myPromise, {
  success: {
    render({ data }) {
      return data.username;
    }
  },
  error: {
    render({ data }) {
      return data.err;
    }
  }
})

• toast.update accepts a generic as well to specify the data type

interface TData {
  username: string
}

toast.update<TData>(id, {
  data: payload,
  render({ data }) {
    return `hello ${data.username}`
  }
})

🕷 Bugfixes

• fix progress countdown stops on mobile #​580
• prevent clash with ios native gesture #​397
• fix toast when a word is too long #​864
• fix missing types declarations in exports #​843
• fix toast.done not dismissing toast #​853
• fix cursor when close on click is false #​839

🚨 Deprecated API

Added deprecation notice for the API below. They will be removed in the next major release

API	Why	Alternative
onClick	Not used that much, it's increasing the API surface for nothing	Can easily be implemented in userland. Just render a react component and attach the handler to it. toast(<div onClick={doSomething}>hello</div>)
onOpen	Does not play well with useEffect behavior in react18 (runs twice in dev mode) see #​741	A better approach is to use toast.onChange see https://fkhadra.github.io/react-toastify/listen-for-changes/
onClose	Does not play well with useEffect behavior in react18 (runs twice in dev mode) see #​741	A better approach is to use toast.onChange see https://fkhadra.github.io/react-toastify/listen-for-changes/
toast.POSITION	Reduce bundle size :)	Thanks to typescript, we now have autocomplete
toast.TYPE	Reduce bundle size :)	Thanks to typescript, we now have autocomplete

⚙️ Chore

• bump dependencies
• refactor internal

v9.0.8

Compare Source

Release notes

🐞Bugfixes

• fix draggable in strict mode #​752
• fix sass import #​771
• fix progress bar overflow for WebKit browser(safari, ios...) #​791
• fix dismissed toasts while the container is unmounted still appear when the container is mounted #​811
• fix AutoClose doesn't work on update #​810 #​782 #​720

Chore

• master branch renamed to main 💖

v9.0.7

Compare Source

Release note

Bugfix

• fix memory leak when multiple containers are used #​772, thanks to @​roblotter

Chore

• build artifacts are no longer minified. This was causing issues with some bundlers like vitejs #​797

v9.0.6

Compare Source

Release note

Bugfix

• fix missing generic in useNotificationCenter typing #​796

v9.0.5

Compare Source

Release note

🕷 Bugfix

• inject-style has now the correct file-name in bundle #​779

v9.0.4

Compare Source

Release note

This release does not work with CRA v4(2 years old) due to the lack of support for es modules. I strongly advise to upgrade to lastest CRA if possible.
Alternative solution:

• stick to v9.0.3
• update webpack config https://github.com/reactioncommerce/reaction-component-library/issues/399

Bugfix

• use mjs extensions for es modules #​767 thank to @​mikebarkmin

v9.0.3

Compare Source

Release notes

🕷 Bugfix

• Fix icon not updating after calling toast.update #​770

v9.0.2

Compare Source

Release notes

Thanks to @​Rambatino, @​grit96, @​Vl3oss, @​eolme for this release

🕷 Bug fixes

• typo #​764
• pass toast styles through #​763
• add function type in icon prop #​761
• closeButton/icon types/rendering #​758
• fix empty data object in NotificationCenter #​757

v9.0.1

Compare Source

v9.0.0

Compare Source

Release note

🚀 What is new in v9

Say hello to addons! What are addons? So, addons are like DLCs in video games but for react-toastify 😆. More seriously, you can think of it as utilities built around react-toastify. For example, custom theme, hooks, components etc...

useNotificationCenter

The first addon that I would like to introduce is the useNotificationCenter headless hook! As the name suggests, it let you build your notification center on top of react-toastify. See for yourself 👇

Screen.Recording.2022-05-03.at.21.24.02.mov

Another example using MUI.

Check the documentation for more details.

Stacked toasts

This second addon will be released later. There are a bunch of details that I need to cover and I don't want to release something too buggy. Nevertheless, I'm really excited about it and I think it's worth showcasing anyway.

I call it StackedContainer for now, it's an alternative to the ToastContainer component.

💥 Breaking changes

There are 2 breaking changes. The API change for toast.onChange and the removal of toast.configure.

toast.onChange

The previous API was returning the numberOfToastDisplayed and the containerId. Honestly, this API seems to be incomplete.

For example, with the old API, if I wanted to do some logging this would be very difficult because I don't have enough data to log.

toast.onChange((numberOfToastDisplayed, containerId) => {
  logger.info("nothing useful to log, ...")
})

The new API offers more possibilities. The callback will receive a ToastItem. The item provides a bunch of useful properties status, content, id, data, etc...

interface ToastItem<Data = {}> {
    id: Id;
    content: React.ReactNode;
    theme?: Theme;
    type?: TypeOptions;
    isLoading?: boolean;
    containerId?: Id;
    data: Data;
    icon?: React.ReactNode | false;
    status: "added" | "removed" | "updated" 
}

const unsubscribe = toast.onChange((payload: ToastItem) => {
  switch (payload.status) {
    case "added":
      // new toast added
      break;
    case "updated":
      // toast updated
      break;
    case "removed":
      // toast has been removed
      break;
  }
});

For example, if I want to log something every time there is a new error notification, with the new API it's trivial

toast.onChange(payload => {
  if(payload.status === "added" && payload.type === toast.TYPE.ERROR) {
    logger.error({
      createdAt: Date.now(),
      content: payload.content,
      data: payload.data
    })
  }
})

toast.configure removal

toast.configure works fine for most cases but the current implementation has one main issue. It does not work with react context because it creates a new react tree.
That being said, having 2 APIs to do the same thing is a bad thing.

🕷 Bug fixes

• #​725 the success toast on promise does not disappear when resolving too quickly
• #​711 updated toast sometimes has wrong styles
• #​700 generics are not used for toast.promise's result type if you use a custom render method

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - "after 10pm every weekday,before 5am every weekday,every weekend" (UTC).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR has been generated by Mend Renovate. View repository job log here.