@canonical/react-components 2.2.4 → 2.3.0

package/dist/esm/index.d.ts

@@ -35,7 +35,7 @@ export { default as ModularTable } from "./components/ModularTable";
 export { default as Navigation } from "./components/Navigation";
 export { default as Modal } from "./components/Modal";
 export * from "./components/MultiSelect";
-export { default as Notification, NotificationSeverity, } from "./components/Notification";
+export { default as Notification, NotificationSeverity, } from "./components/Notifications";
 export { NotificationConsumer, NotificationProvider, useNotify, info, success, failure, queue, } from "./components/NotificationProvider";
 export { default as LoginPageLayout } from "./components/LoginPageLayout";
 export { default as Pagination } from "./components/Pagination";
@@ -64,6 +64,7 @@ export { default as TableHeader } from "./components/TableHeader";
 export { default as TableRow } from "./components/TableRow";
 export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
+export { ToastNotification, ToastNotificationList, ToastNotificationProvider, useToastNotification, } from "./components/Notifications";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
 export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
@@ -103,7 +104,7 @@ export type { MainTableProps } from "./components/MainTable";
 export type { ModularTableProps } from "./components/ModularTable";
 export type { ModalProps } from "./components/Modal";
 export type { GenerateLink, LogoProps, NavigationProps, NavItem, NavLink, NavLinkAnchor, NavLinkBase, NavLinkButton, } from "./components/Navigation";
-export type { NotificationProps } from "./components/Notification";
+export type { NotificationProps } from "./components/Notifications";
 export type { NotificationAction, NotificationType, QueuedNotification, NotificationHelper, } from "./components/NotificationProvider";
 export type { LoginPageLayoutProps } from "./components/LoginPageLayout";
 export type { PaginationProps } from "./components/Pagination";
@@ -130,10 +131,11 @@ export type { TableHeaderProps } from "./components/TableHeader";
 export type { TableRowProps } from "./components/TableRow";
 export type { TabsProps } from "./components/Tabs";
 export type { TextareaProps } from "./components/Textarea";
+export type { ToastNotificationType } from "./components/Notifications";
 export type { TooltipProps } from "./components/Tooltip";
 export type { TablePaginationProps } from "./components/TablePagination";
 export type { CustomSelectProps, CustomSelectDropdownProps, CustomSelectOption, } from "./components/CustomSelect";
-export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, useThrottle, useWindowFitment, } from "./hooks";
+export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, usePrefersReducedMotion, useThrottle, useWindowFitment, } from "./hooks";
 export type { WindowFitment } from "./hooks";
 export { isNavigationAnchor, isNavigationButton } from "./utils";
 export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, TSFixMe, ValueOf, } from "./types";

package/dist/esm/index.js

@@ -35,7 +35,7 @@ export { default as ModularTable } from "./components/ModularTable";
 export { default as Navigation } from "./components/Navigation";
 export { default as Modal } from "./components/Modal";
 export * from "./components/MultiSelect";
-export { default as Notification, NotificationSeverity } from "./components/Notification";
+export { default as Notification, NotificationSeverity } from "./components/Notifications";
 export { NotificationConsumer, NotificationProvider, useNotify, info, success, failure, queue } from "./components/NotificationProvider";
 export { default as LoginPageLayout } from "./components/LoginPageLayout";
 export { default as Pagination } from "./components/Pagination";
@@ -64,11 +64,12 @@ export { default as TableHeader } from "./components/TableHeader";
 export { default as TableRow } from "./components/TableRow";
 export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
+export { ToastNotification, ToastNotificationList, ToastNotificationProvider, useToastNotification } from "./components/Notifications";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
 export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
 export { default as CustomSelect } from "./components/CustomSelect";
-export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, useThrottle, useWindowFitment } from "./hooks";
+export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, usePrefersReducedMotion, useThrottle, useWindowFitment } from "./hooks";
 export { isNavigationAnchor, isNavigationButton } from "./utils";
 export { Theme } from "./enums";
 export { usePortal } from "./external";

package/dist/hooks/index.d.ts

@@ -5,5 +5,6 @@ export { useOnEscapePressed } from "./useOnEscapePressed";
 export { usePrevious } from "./usePrevious";
 export { useThrottle } from "./useThrottle";
 export { usePagination } from "./usePagination";
+export { usePrefersReducedMotion } from "./usePrefersReducedMotion";
 export { useWindowFitment } from "./useWindowFitment";
 export type { WindowFitment } from "./useWindowFitment";

package/dist/hooks/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "usePagination", {
     return _usePagination.usePagination;
   }
 });
+Object.defineProperty(exports, "usePrefersReducedMotion", {
+  enumerable: true,
+  get: function () {
+    return _usePrefersReducedMotion.usePrefersReducedMotion;
+  }
+});
 Object.defineProperty(exports, "usePrevious", {
   enumerable: true,
   get: function () {
@@ -64,4 +70,5 @@ var _useOnEscapePressed = require("./useOnEscapePressed");
 var _usePrevious = require("./usePrevious");
 var _useThrottle = require("./useThrottle");
 var _usePagination = require("./usePagination");
+var _usePrefersReducedMotion = require("./usePrefersReducedMotion");
 var _useWindowFitment = require("./useWindowFitment");

package/dist/hooks/usePrefersReducedMotion.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns true if the user prefers reduced motion.
+ * It's useful for conditionally disabling animations for users who prefer reduced motion.
+ * @returns {boolean} - true if the user prefers reduced motion, false otherwise.
+ */
+export declare const usePrefersReducedMotion: () => boolean;

package/dist/hooks/usePrefersReducedMotion.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePrefersReducedMotion = void 0;
+var _react = require("react");
+const QUERY = "(prefers-reduced-motion: reduce)";
+const getInitialState = () => window.matchMedia(QUERY).matches;
+
+/**
+ * Returns true if the user prefers reduced motion.
+ * It's useful for conditionally disabling animations for users who prefer reduced motion.
+ * @returns {boolean} - true if the user prefers reduced motion, false otherwise.
+ */
+const usePrefersReducedMotion = () => {
+  const [prefersReducedMotion, setPrefersReducedMotion] = (0, _react.useState)(getInitialState);
+  (0, _react.useEffect)(() => {
+    const mediaQuery = window.matchMedia(QUERY);
+    const listener = event => {
+      setPrefersReducedMotion(event.matches);
+    };
+    mediaQuery.addEventListener("change", listener);
+    return () => {
+      mediaQuery.removeEventListener("change", listener);
+    };
+  }, []);
+  return prefersReducedMotion;
+};
+exports.usePrefersReducedMotion = usePrefersReducedMotion;

package/dist/hooks/usePrefersReducedMotion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -35,7 +35,7 @@ export { default as ModularTable } from "./components/ModularTable";
 export { default as Navigation } from "./components/Navigation";
 export { default as Modal } from "./components/Modal";
 export * from "./components/MultiSelect";
-export { default as Notification, NotificationSeverity, } from "./components/Notification";
+export { default as Notification, NotificationSeverity, } from "./components/Notifications";
 export { NotificationConsumer, NotificationProvider, useNotify, info, success, failure, queue, } from "./components/NotificationProvider";
 export { default as LoginPageLayout } from "./components/LoginPageLayout";
 export { default as Pagination } from "./components/Pagination";
@@ -64,6 +64,7 @@ export { default as TableHeader } from "./components/TableHeader";
 export { default as TableRow } from "./components/TableRow";
 export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
+export { ToastNotification, ToastNotificationList, ToastNotificationProvider, useToastNotification, } from "./components/Notifications";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
 export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
@@ -103,7 +104,7 @@ export type { MainTableProps } from "./components/MainTable";
 export type { ModularTableProps } from "./components/ModularTable";
 export type { ModalProps } from "./components/Modal";
 export type { GenerateLink, LogoProps, NavigationProps, NavItem, NavLink, NavLinkAnchor, NavLinkBase, NavLinkButton, } from "./components/Navigation";
-export type { NotificationProps } from "./components/Notification";
+export type { NotificationProps } from "./components/Notifications";
 export type { NotificationAction, NotificationType, QueuedNotification, NotificationHelper, } from "./components/NotificationProvider";
 export type { LoginPageLayoutProps } from "./components/LoginPageLayout";
 export type { PaginationProps } from "./components/Pagination";
@@ -130,10 +131,11 @@ export type { TableHeaderProps } from "./components/TableHeader";
 export type { TableRowProps } from "./components/TableRow";
 export type { TabsProps } from "./components/Tabs";
 export type { TextareaProps } from "./components/Textarea";
+export type { ToastNotificationType } from "./components/Notifications";
 export type { TooltipProps } from "./components/Tooltip";
 export type { TablePaginationProps } from "./components/TablePagination";
 export type { CustomSelectProps, CustomSelectDropdownProps, CustomSelectOption, } from "./components/CustomSelect";
-export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, useThrottle, useWindowFitment, } from "./hooks";
+export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, usePrefersReducedMotion, useThrottle, useWindowFitment, } from "./hooks";
 export type { WindowFitment } from "./hooks";
 export { isNavigationAnchor, isNavigationButton } from "./utils";
 export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, TSFixMe, ValueOf, } from "./types";

package/dist/index.js

@@ -45,6 +45,10 @@ var _exportNames = {
   Modal: true,
   Notification: true,
   NotificationSeverity: true,
+  ToastNotification: true,
+  ToastNotificationList: true,
+  ToastNotificationProvider: true,
+  useToastNotification: true,
   NotificationConsumer: true,
   NotificationProvider: true,
   useNotify: true,
@@ -92,6 +96,7 @@ var _exportNames = {
   useOnEscapePressed: true,
   usePagination: true,
   usePrevious: true,
+  usePrefersReducedMotion: true,
   useThrottle: true,
   useWindowFitment: true,
   isNavigationAnchor: true,
@@ -348,7 +353,7 @@ Object.defineProperty(exports, "Navigation", {
 Object.defineProperty(exports, "Notification", {
   enumerable: true,
   get: function () {
-    return _Notification.default;
+    return _Notifications.default;
   }
 });
 Object.defineProperty(exports, "NotificationConsumer", {
@@ -366,7 +371,7 @@ Object.defineProperty(exports, "NotificationProvider", {
 Object.defineProperty(exports, "NotificationSeverity", {
   enumerable: true,
   get: function () {
-    return _Notification.NotificationSeverity;
+    return _Notifications.NotificationSeverity;
   }
 });
 Object.defineProperty(exports, "Pagination", {
@@ -555,6 +560,24 @@ Object.defineProperty(exports, "Theme", {
     return _enums.Theme;
   }
 });
+Object.defineProperty(exports, "ToastNotification", {
+  enumerable: true,
+  get: function () {
+    return _Notifications.ToastNotification;
+  }
+});
+Object.defineProperty(exports, "ToastNotificationList", {
+  enumerable: true,
+  get: function () {
+    return _Notifications.ToastNotificationList;
+  }
+});
+Object.defineProperty(exports, "ToastNotificationProvider", {
+  enumerable: true,
+  get: function () {
+    return _Notifications.ToastNotificationProvider;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () {
@@ -645,6 +668,12 @@ Object.defineProperty(exports, "usePortal", {
     return _external.usePortal;
   }
 });
+Object.defineProperty(exports, "usePrefersReducedMotion", {
+  enumerable: true,
+  get: function () {
+    return _hooks.usePrefersReducedMotion;
+  }
+});
 Object.defineProperty(exports, "usePrevious", {
   enumerable: true,
   get: function () {
@@ -657,6 +686,12 @@ Object.defineProperty(exports, "useThrottle", {
     return _hooks.useThrottle;
   }
 });
+Object.defineProperty(exports, "useToastNotification", {
+  enumerable: true,
+  get: function () {
+    return _Notifications.useToastNotification;
+  }
+});
 Object.defineProperty(exports, "useWindowFitment", {
   enumerable: true,
   get: function () {
@@ -711,7 +746,7 @@ Object.keys(_MultiSelect).forEach(function (key) {
     }
   });
 });
-var _Notification = _interopRequireWildcard(require("./components/Notification"));
+var _Notifications = _interopRequireWildcard(require("./components/Notifications"));
 var _NotificationProvider = require("./components/NotificationProvider");
 var _LoginPageLayout = _interopRequireDefault(require("./components/LoginPageLayout"));
 var _Pagination = _interopRequireDefault(require("./components/Pagination"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {