@canonical/react-components 2.2.3 → 2.3.0

package/dist/components/NotificationProvider/NotificationProvider.js

@@ -8,7 +8,8 @@ exports.useNotify = useNotify;
 var _react = _interopRequireWildcard(require("react"));
 var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal"));
 var _messageBuilder = require("./messageBuilder");
-var _Notification = _interopRequireWildcard(require("../Notification/Notification"));
+var _Notifications = _interopRequireDefault(require("../Notifications"));
+var _Notification = require("../Notifications/Notification/Notification");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -85,7 +86,7 @@ const NotificationConsumer = () => {
   } = notify.notification;
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref
-  }, /*#__PURE__*/_react.default.createElement(_Notification.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Notifications.default, {
     title: title !== null && title !== void 0 ? title : _Notification.DefaultTitles[type],
     actions: actions,
     severity: type,

package/dist/components/NotificationProvider/messageBuilder.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.success = exports.queue = exports.info = exports.failure = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Notification = require("../Notification");
+var _Notifications = require("../Notifications");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const queue = notification => {
   return {
@@ -19,7 +19,7 @@ const info = (message, title) => {
   return {
     message,
     title,
-    type: _Notification.NotificationSeverity.INFORMATION
+    type: _Notifications.NotificationSeverity.INFORMATION
   };
 };
 exports.info = info;
@@ -27,7 +27,7 @@ const success = (message, title) => {
   return {
     message,
     title,
-    type: _Notification.NotificationSeverity.POSITIVE
+    type: _Notifications.NotificationSeverity.POSITIVE
   };
 };
 exports.success = success;
@@ -36,7 +36,7 @@ const failure = (title, error, message, actions) => {
     actions,
     message: error && error instanceof Error ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message, " ", error.message) : message,
     title,
-    type: _Notification.NotificationSeverity.NEGATIVE
+    type: _Notifications.NotificationSeverity.NEGATIVE
   };
 };
 exports.failure = failure;

package/dist/components/NotificationProvider/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { ValueOf } from "../../types";
-import { NotificationSeverity } from "../Notification";
+import { NotificationSeverity } from "../Notifications";
 export interface NotifyProviderProps {
     state?: {
         queuedNotification: NotificationType | null;

package/dist/components/{Notification → Notifications/Notification}/Notification.d.ts

@@ -1,6 +1,6 @@
 import React, { ElementType } from "react";
 import type { HTMLProps, ReactNode } from "react";
-import type { ClassName, PropsWithSpread, ValueOf } from "../../types";
+import type { ClassName, PropsWithSpread, ValueOf } from "../../../types";
 export declare enum Label {
     Close = "Close notification"
 }

package/dist/components/{Notification → Notifications/Notification}/Notification.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.NotificationSeverity = exports.Label = exports.DefaultTitles = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
-var _Button = _interopRequireWildcard(require("../Button"));
-var _utils = require("../../utils");
+var _Button = _interopRequireWildcard(require("../../Button"));
+var _utils = require("../../../utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/Notifications/ToastNotification/Animate.d.ts

@@ -0,0 +1,11 @@
+import type { FC, PropsWithChildren } from "react";
+interface Props {
+    show: boolean;
+    from: Keyframe;
+    to: Keyframe;
+    exitAnimation?: Keyframe[];
+    options?: KeyframeAnimationOptions;
+    className?: string;
+}
+declare const Animate: FC<PropsWithChildren<Props>>;
+export default Animate;

package/dist/components/Notifications/ToastNotification/Animate.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../../../hooks");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Animate = _ref => {
+  let {
+    show,
+    children,
+    from,
+    to,
+    exitAnimation,
+    options = {
+      duration: 500,
+      fill: "forwards"
+    },
+    className
+  } = _ref;
+  const containerRef = (0, _react.useRef)(null);
+  const preferReducedMotion = (0, _hooks.usePrefersReducedMotion)();
+
+  // This state is used so that we trigger a extra render cycle
+  // to animate the child component when it is being unmounted
+  const [removeState, setRemove] = (0, _react.useState)(!show);
+  (0, _react.useLayoutEffect)(() => {
+    const element = containerRef.current;
+    if (show) {
+      setRemove(false);
+      if (!element || preferReducedMotion) return;
+      element.animate([from, to], options);
+    } else {
+      if (!element) return;
+      if (preferReducedMotion) {
+        setRemove(true);
+        return;
+      }
+      const animation = element.animate(exitAnimation || [to, from], options);
+      animation.onfinish = () => {
+        setRemove(true);
+        // This is important, else the next render cycle due to setRemove will cause flickering effect
+        element.style.display = "none";
+      };
+    }
+  }, [show, removeState]);
+  if (removeState) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    className: className
+  }, children);
+};
+var _default = exports.default = Animate;

package/dist/components/Notifications/ToastNotification/Toast.scss

@@ -0,0 +1,116 @@
+@import "vanilla-framework/scss/settings";
+@import "vanilla-framework/scss/build";
+
+.toast-animate {
+  position: relative;
+  z-index: 101;
+}
+
+.toast-notification,
+.toast-notification-list {
+  bottom: 3.5rem;
+  margin: 0 1.5rem;
+  position: absolute;
+  right: 0;
+
+  @media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
+    width: 500px;
+  }
+
+  @media screen and (min-width: $breakpoint-large) {
+    width: 600px;
+  }
+}
+
+.toast-notification {
+  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 15%);
+  overflow: hidden;
+  z-index: 101;
+
+  @media screen and (max-width: $breakpoint-small) {
+    left: 0;
+    margin: 1.5rem auto;
+    max-width: 400px;
+    width: 95vw;
+  }
+}
+
+.toast-notification-list {
+  background-color: white;
+  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 22%);
+  max-height: calc(100vh - 4.5rem);
+  overflow: auto;
+  padding: 0 0.5rem;
+  z-index: 102;
+
+  .individual-notification {
+    margin: 0.5rem 0;
+    overflow: hidden;
+  }
+
+  .dismiss {
+    align-items: center;
+    background-color: white;
+    bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    padding-left: 0.8rem;
+    position: sticky;
+    z-index: 10;
+
+    .dismiss-button {
+      align-items: center;
+      display: flex;
+
+      .dismiss-text {
+        align-items: center;
+        display: flex;
+        gap: $sph--x-small;
+      }
+    }
+
+    .filters {
+      display: flex;
+
+      .filter-button {
+        align-items: center;
+        border: none;
+        display: flex;
+        gap: $sph--x-small;
+        justify-content: center;
+        margin-right: $sph--small !important;
+        padding: calc(0.4rem - 1px);
+
+        /* stylelint-disable max-nesting-depth */
+        /* stylelint-disable-next-line selector-max-type */
+        span {
+          padding: 0;
+          text-align: center;
+        }
+
+        /* stylelint-disable-next-line selector-class-pattern */
+        .p-icon--info--notification {
+          @extend %icon;
+          @include vf-icon-info-coloured-themed;
+        }
+        /* stylelint-enable max-nesting-depth */
+      }
+    }
+
+    @media screen and (max-width: $breakpoint-small) {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  @media screen and (max-width: $breakpoint-small) {
+    bottom: 2rem;
+    left: 0;
+    margin: 1.5rem auto;
+    max-width: 400px;
+    width: 95vw;
+  }
+}

package/dist/components/Notifications/ToastNotification/ToastNotification.d.ts

@@ -0,0 +1,10 @@
+import type { ToastNotificationType } from "./ToastNotificationProvider";
+import type { FC } from "react";
+import "./Toast.scss";
+interface Props {
+    notification: ToastNotificationType;
+    onDismiss: (notification?: ToastNotificationType[]) => void;
+    show: boolean;
+}
+declare const ToastNotification: FC<Props>;
+export default ToastNotification;

package/dist/components/Notifications/ToastNotification/ToastNotification.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ = _interopRequireDefault(require("./.."));
+var _Notification = require("../Notification/Notification");
+var _reactDom = require("react-dom");
+var _Animate = _interopRequireDefault(require("./Animate"));
+var _react = _interopRequireDefault(require("react"));
+require("./Toast.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ToastNotification = _ref => {
+  var _notification$title;
+  let {
+    notification,
+    onDismiss,
+    show
+  } = _ref;
+  if (!notification) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_Animate.default, {
+    show: show,
+    from: {
+      opacity: 0
+    },
+    to: {
+      opacity: 1
+    },
+    exitAnimation: [{
+      opacity: 1,
+      transform: "translateY(0)"
+    }, {
+      opacity: 0,
+      transform: "translateY(50px)"
+    }],
+    options: {
+      duration: 200
+    },
+    className: "toast-animate"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "toast-notification"
+  }, /*#__PURE__*/_react.default.createElement(_.default, {
+    title: (_notification$title = notification.title) !== null && _notification$title !== void 0 ? _notification$title : _Notification.DefaultTitles[notification.type],
+    actions: notification.actions,
+    severity: notification.type,
+    onDismiss: () => {
+      onDismiss([notification]);
+    },
+    className: "u-no-margin--bottom",
+    timestamp: notification.timestamp,
+    titleElement: "div",
+    role: "alert"
+  }, notification.message))), document.body));
+};
+ToastNotification.propTypes = {
+  onDismiss: _propTypes.default.func.isRequired,
+  show: _propTypes.default.bool.isRequired
+};
+var _default = exports.default = ToastNotification;

package/dist/components/Notifications/ToastNotification/ToastNotification.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ToastNotificationProvider } from "./index";
+declare const meta: Meta<typeof ToastNotificationProvider>;
+export default meta;
+type Story = StoryObj<typeof ToastNotificationProvider>;
+export declare const Default: Story;

package/dist/components/Notifications/ToastNotification/ToastNotification.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("./index");
+var _Button = _interopRequireDefault(require("../../Button"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const meta = {
+  component: _index.ToastNotificationProvider,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  render: () => /*#__PURE__*/_react.default.createElement(ToastNotificationStoryWrapper, null)
+};
+const ToastNotificationStoryWrapper = () => {
+  (0, _react.useEffect)(() => {
+    const root = document.getElementById("storybook-root");
+    if (root) {
+      root.style.height = "90vh";
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_index.ToastNotificationProvider, null, /*#__PURE__*/_react.default.createElement(PreloadedList, null));
+};
+const PreloadedList = () => {
+  const toastNotify = (0, _index.useToastNotification)();
+  (0, _react.useEffect)(() => {
+    toastNotify.success("Settings saved successfully");
+    toastNotify.info("Your changes are syncing in the background");
+    toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
+    toastNotify.toggleListView();
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      margin: "2rem auto",
+      display: "flex",
+      flexDirection: "column",
+      flexWrap: "wrap",
+      alignContent: "flex-start",
+      gap: "0.75rem"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => toastNotify.success("Your changes have been saved.", [{
+      label: "Undo",
+      onClick: () => console.log("Undo clicked")
+    }])
+  }, "Add Success"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => toastNotify.info("Your changes are syncing in the background.", "Syncing")
+  }, "Add Info"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.", [{
+      label: "Retry",
+      onClick: () => console.log("Retry clicked")
+    }])
+  }, "Add Error"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: toastNotify.toggleListView
+  }, "Toggle List View"));
+};

package/dist/components/Notifications/ToastNotification/ToastNotificationList.d.ts

@@ -0,0 +1,21 @@
+import type { ValueOf } from "../../../types";
+import { GroupedNotificationCount, ToastNotificationType } from "./ToastNotificationProvider";
+import type { FC } from "react";
+import type { NotificationSeverity } from "../../Notifications/Notification";
+import "./Toast.scss";
+export type FilterTypes = ValueOf<typeof NotificationSeverity>;
+export declare const severityOrder: readonly ["positive", "caution", "negative", "information"];
+export declare const iconLookup: {
+    readonly positive: "success";
+    readonly information: "info--notification";
+    readonly caution: "warning";
+    readonly negative: "error";
+};
+interface Props {
+    notifications: ToastNotificationType[];
+    onDismiss: (notification?: ToastNotificationType[]) => void;
+    groupedCount: GroupedNotificationCount;
+    show: boolean;
+}
+declare const ToastNotificationList: FC<Props>;
+export default ToastNotificationList;

package/dist/components/Notifications/ToastNotification/ToastNotificationList.js

@@ -0,0 +1,215 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.severityOrder = exports.iconLookup = exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Button = _interopRequireDefault(require("../../Button"));
+var _Icon = _interopRequireWildcard(require("../../Icon"));
+var _Notification = _interopRequireDefault(require("../Notification"));
+var _Notification2 = require("../Notification/Notification");
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _Animate = _interopRequireDefault(require("./Animate"));
+var _hooks = require("../../../hooks");
+require("./Toast.scss");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const severityOrder = exports.severityOrder = ["positive", "caution", "negative", "information"];
+const iconLookup = exports.iconLookup = {
+  positive: _Icon.ICONS.success,
+  // custom name for info icon to override default color from vanilla
+  information: "info--notification",
+  caution: _Icon.ICONS.warning,
+  negative: _Icon.ICONS.error
+};
+const ToastNotificationList = _ref => {
+  let {
+    notifications,
+    onDismiss,
+    groupedCount = {},
+    show
+  } = _ref;
+  const [filters, setFilters] = (0, _react.useState)(new Set());
+  const prevNotificationsSize = (0, _react.useRef)(notifications.length);
+  const containerRef = (0, _react.useRef)(null);
+  const hasFilters = !!filters.size;
+  const preferReducedMotion = (0, _hooks.usePrefersReducedMotion)();
+  (0, _react.useLayoutEffect)(() => {
+    adjustScrollPosition();
+  }, [notifications]);
+
+  // this layout effect is used to maintain scroll position of the
+  // notification list when new notifications are added to the list
+  // for only when the scroll is at the top
+  const adjustScrollPosition = () => {
+    const notificationsRemoved = notifications.length < prevNotificationsSize.current;
+    prevNotificationsSize.current = notifications.length;
+    if (!notifications.length || notificationsRemoved) {
+      return;
+    }
+    const container = containerRef.current;
+    const lastNotification = notifications[notifications.length - 1];
+    const notificationEl = document.getElementById(lastNotification.id);
+    if (container && notificationEl) {
+      const currentScrollY = container.scrollTop;
+      const offsetHeight = notificationEl.getBoundingClientRect().height + parseFloat(window.getComputedStyle(notificationEl).marginTop) + parseFloat(window.getComputedStyle(notificationEl).marginBottom);
+      // only adjust the scroll height if the scroll is at the top
+      if (currentScrollY === 0) {
+        container.scrollTop = currentScrollY + offsetHeight;
+      }
+    }
+  };
+  const handleFilterSelect = filter => {
+    setFilters(prevFilters => {
+      const newFilters = new Set(prevFilters);
+      if (!newFilters.has(filter)) {
+        newFilters.add(filter);
+      } else {
+        newFilters.delete(filter);
+      }
+      return newFilters;
+    });
+  };
+  const handleGroupedDismiss = () => {
+    if (hasFilters) {
+      const notificationsToClear = notifications.filter(notification => filters.has(notification.type));
+      onDismiss(notificationsToClear);
+      setFilters(new Set());
+      return;
+    }
+    onDismiss();
+  };
+  const getSeverityFilters = () => {
+    const filterButtons = severityOrder.map(severity => {
+      if (groupedCount[severity]) {
+        return /*#__PURE__*/_react.default.createElement("button", {
+          "aria-label": "Filter ".concat(severity, " notifications"),
+          "aria-pressed": filters.has(severity),
+          key: severity,
+          className: "u-no-margin u-no-border filter-button",
+          onClick: () => {
+            handleFilterSelect(severity);
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          name: iconLookup[severity]
+        }), /*#__PURE__*/_react.default.createElement("span", null, groupedCount[severity]));
+      }
+      return null;
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "filters"
+    }, filterButtons, hasFilters && /*#__PURE__*/_react.default.createElement("button", {
+      className: "u-no-margin--bottom u-no-border",
+      onClick: () => {
+        setFilters(new Set());
+      }
+    }, "Clear filters"));
+  };
+  const getDismissText = () => {
+    if (hasFilters) {
+      const validFilters = Object.keys(groupedCount);
+      let totalCount = 0;
+      for (const filter of validFilters) {
+        if (filters.has(filter)) {
+          totalCount += groupedCount[filter] || 0;
+        }
+      }
+      const dismissText = /*#__PURE__*/_react.default.createElement("span", {
+        className: "dismiss-text"
+      }, "Dismiss ", totalCount);
+      return dismissText;
+    }
+    return /*#__PURE__*/_react.default.createElement("span", null, "Dismiss all");
+  };
+  const handleDismissNotification = notification => {
+    if (preferReducedMotion) {
+      onDismiss([notification]);
+      return;
+    }
+
+    // animate the notification dismissal before updating states to delay unmounting
+    const element = document.getElementById("li-".concat(notification.id));
+    if (element) {
+      element.style.transformOrigin = "center";
+      element.style.overflow = "hidden";
+      const animation = element.animate([{
+        height: "".concat(element.scrollHeight, "px"),
+        opacity: 1
+      }, {
+        height: "0px",
+        opacity: 0
+      }], {
+        duration: 200,
+        easing: "linear",
+        fill: "forwards"
+      });
+      animation.onfinish = () => {
+        element.style.display = "none";
+        onDismiss([notification]);
+      };
+    }
+  };
+
+  // Only filter input data if there are filters present
+  const filteredNotifications = hasFilters ? notifications.filter(notification => filters.has(notification.type)) : notifications;
+
+  // Don't assign alert role for notifications when expanded since we don't want
+  // screen readers to announce every existing notification
+  const notificationEls = filteredNotifications.map((_, index, array) => {
+    var _notification$title;
+    const lastNotificationIndex = array.length - 1;
+    // This will map notifications in reverse order
+    const notification = array[lastNotificationIndex - index];
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: notification.id,
+      id: "li-".concat(notification.id)
+    }, /*#__PURE__*/_react.default.createElement(_Notification.default, {
+      id: notification.id,
+      title: (_notification$title = notification.title) !== null && _notification$title !== void 0 ? _notification$title : _Notification2.DefaultTitles[notification.type],
+      actions: notification.actions,
+      severity: notification.type,
+      onDismiss: () => {
+        handleDismissNotification(notification);
+      },
+      className: "u-no-margin--bottom individual-notification",
+      timestamp: notification.timestamp,
+      titleElement: "div"
+    }, notification.message));
+  });
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_Animate.default, {
+    show: show,
+    from: {
+      opacity: 0,
+      transform: "translateY(5vh)"
+    },
+    to: {
+      opacity: 1,
+      transform: "translateY(0)"
+    },
+    options: {
+      duration: 100
+    },
+    className: "toast-animate"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "toast-notification-list",
+    "aria-label": "Notifications list",
+    ref: containerRef
+  }, notificationEls, /*#__PURE__*/_react.default.createElement("li", {
+    className: "dismiss"
+  }, getSeverityFilters(), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "u-no-margin--bottom dismiss-button",
+    onClick: handleGroupedDismiss,
+    hasIcon: true
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "tidy"
+  }), getDismissText())))), document.body);
+};
+ToastNotificationList.propTypes = {
+  notifications: _propTypes.default.array.isRequired,
+  onDismiss: _propTypes.default.func.isRequired,
+  show: _propTypes.default.bool.isRequired
+};
+var _default = exports.default = ToastNotificationList;