Update dependency react-toastify to v9 (!43) · Merge requests · IT Common Platform / platform-support / apps / dashboard

This MR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
react-toastify	`^8.0.2` -> `^9.0.0`

Release Notes

fkhadra/react-toastify

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

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

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 💖

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

Release note

Bugfix

fix missing generic in useNotificationCenter typing #796

Release note

🕷 Bugfix

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

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

Release notes

🕷 Bugfix

Fix icon not updating after calling toast.update #770

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

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 👇

https://user-images.githubusercontent.com/5574267/166549174-48422a61-ff7b-4eeb-b53f-d903db3d1595.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 - At any time (no schedule defined).

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

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

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

If you want to rebase/retry this MR, check this box

This MR has been generated by Renovate Bot.

Edited Mar 21, 2023 by Ghost User

Update dependency react-toastify to v9

Release Notes

Release notes

🕷Bugfixes

Release notes

🚀 Features

🕷 Bugfixes

🚨 Deprecated API

⚙️ Chore

Release notes

🐞Bugfixes

Chore

Release note

Bugfix

Chore

Release note

Bugfix

Release note

🕷 Bugfix

Release note

Bugfix

Release notes

🕷 Bugfix

Release notes

🕷 Bug fixes

Release note

🚀 What is new in v9

useNotificationCenter

Stacked toasts

💥 Breaking changes

toast.onChange

toast.configure removal

🕷 Bug fixes

Configuration

Merge request reports

`toast.onChange`

`toast.configure` removal