@canonical/react-components 2.2.4 → 2.3.1

package/dist/esm/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/esm/components/Notifications/ToastNotification/ToastNotification.stories.js

@@ -0,0 +1,55 @@
+import React, { useEffect } from "react";
+import { ToastNotificationProvider, useToastNotification } from "./index";
+import Button from "../../Button";
+var meta = {
+  component: ToastNotificationProvider,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  render: () => /*#__PURE__*/React.createElement(ToastNotificationStoryWrapper, null)
+};
+var ToastNotificationStoryWrapper = () => {
+  useEffect(() => {
+    var root = document.getElementById("storybook-root");
+    if (root) {
+      root.style.height = "90vh";
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(ToastNotificationProvider, null, /*#__PURE__*/React.createElement(PreloadedList, null));
+};
+var PreloadedList = () => {
+  var toastNotify = useToastNotification();
+  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();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      margin: "2rem auto",
+      display: "flex",
+      flexDirection: "column",
+      flexWrap: "wrap",
+      alignContent: "flex-start",
+      gap: "0.75rem"
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => toastNotify.success("Your changes have been saved.", [{
+      label: "Undo",
+      onClick: () => console.log("Undo clicked")
+    }])
+  }, "Add Success"), /*#__PURE__*/React.createElement(Button, {
+    onClick: () => toastNotify.info("Your changes are syncing in the background.", "Syncing")
+  }, "Add Info"), /*#__PURE__*/React.createElement(Button, {
+    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.createElement(Button, {
+    onClick: toastNotify.toggleListView
+  }, "Toggle List View"));
+};

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

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

package/dist/esm/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: "information";
+    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/esm/components/Notifications/ToastNotification/ToastNotificationList.js

@@ -0,0 +1,208 @@
+import _pt from "prop-types";
+import Button from "../../Button";
+import Icon from "../../Icon";
+import Notification from "../Notification";
+import { DefaultTitles } from "../Notification/Notification";
+import { useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import Animate from "./Animate";
+import { usePrefersReducedMotion } from "../../../hooks";
+import React from "react";
+import { ICONS } from "../../Icon";
+import "./Toast.scss";
+export var severityOrder = ["positive", "caution", "negative", "information"];
+export var iconLookup = {
+  positive: ICONS.success,
+  information: ICONS.information,
+  caution: ICONS.warning,
+  negative: ICONS.error
+};
+var ToastNotificationList = _ref => {
+  var {
+    notifications,
+    onDismiss,
+    groupedCount = {},
+    show
+  } = _ref;
+  var [filters, setFilters] = useState(new Set());
+  var prevNotificationsSize = useRef(notifications.length);
+  var containerRef = useRef(null);
+  var hasFilters = !!filters.size;
+  var preferReducedMotion = usePrefersReducedMotion();
+  useLayoutEffect(() => {
+    adjustScrollPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [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
+  var adjustScrollPosition = () => {
+    var notificationsRemoved = notifications.length < prevNotificationsSize.current;
+    prevNotificationsSize.current = notifications.length;
+    if (!notifications.length || notificationsRemoved) {
+      return;
+    }
+    var container = containerRef.current;
+    var lastNotification = notifications[notifications.length - 1];
+    var notificationEl = document.getElementById(lastNotification.id);
+    if (container && notificationEl) {
+      var currentScrollY = container.scrollTop;
+      var 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;
+      }
+    }
+  };
+  var handleFilterSelect = filter => {
+    setFilters(prevFilters => {
+      var newFilters = new Set(prevFilters);
+      if (!newFilters.has(filter)) {
+        newFilters.add(filter);
+      } else {
+        newFilters.delete(filter);
+      }
+      return newFilters;
+    });
+  };
+  var handleGroupedDismiss = () => {
+    if (hasFilters) {
+      var notificationsToClear = notifications.filter(notification => filters.has(notification.type));
+      onDismiss(notificationsToClear);
+      setFilters(new Set());
+      return;
+    }
+    onDismiss();
+  };
+  var getSeverityFilters = () => {
+    var filterButtons = severityOrder.map(severity => {
+      if (groupedCount[severity]) {
+        return /*#__PURE__*/React.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.createElement(Icon, {
+          name: iconLookup[severity]
+        }), /*#__PURE__*/React.createElement("span", null, groupedCount[severity]));
+      }
+      return null;
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: "filters"
+    }, filterButtons, hasFilters && /*#__PURE__*/React.createElement("button", {
+      className: "u-no-margin--bottom u-no-border",
+      onClick: () => {
+        setFilters(new Set());
+      }
+    }, "Clear filters"));
+  };
+  var getDismissText = () => {
+    if (hasFilters) {
+      var validFilters = Object.keys(groupedCount);
+      var totalCount = 0;
+      for (var filter of validFilters) {
+        if (filters.has(filter)) {
+          totalCount += groupedCount[filter] || 0;
+        }
+      }
+      var dismissText = /*#__PURE__*/React.createElement("span", {
+        className: "dismiss-text"
+      }, "Dismiss ", totalCount);
+      return dismissText;
+    }
+    return /*#__PURE__*/React.createElement("span", null, "Dismiss all");
+  };
+  var handleDismissNotification = notification => {
+    if (preferReducedMotion) {
+      onDismiss([notification]);
+      return;
+    }
+
+    // animate the notification dismissal before updating states to delay unmounting
+    var element = document.getElementById("li-".concat(notification.id));
+    if (element) {
+      element.style.transformOrigin = "center";
+      element.style.overflow = "hidden";
+      var 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
+  var 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
+  var notificationEls = filteredNotifications.map((_, index, array) => {
+    var _notification$title;
+    var lastNotificationIndex = array.length - 1;
+    // This will map notifications in reverse order
+    var notification = array[lastNotificationIndex - index];
+    return /*#__PURE__*/React.createElement("li", {
+      key: notification.id,
+      id: "li-".concat(notification.id)
+    }, /*#__PURE__*/React.createElement(Notification, {
+      id: notification.id,
+      title: (_notification$title = notification.title) !== null && _notification$title !== void 0 ? _notification$title : 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__*/createPortal( /*#__PURE__*/React.createElement(Animate, {
+    show: show,
+    from: {
+      opacity: 0,
+      transform: "translateY(5vh)"
+    },
+    to: {
+      opacity: 1,
+      transform: "translateY(0)"
+    },
+    options: {
+      duration: 100
+    },
+    className: "toast-animate"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "toast-notification-list",
+    "aria-label": "Notifications list",
+    ref: containerRef
+  }, notificationEls, /*#__PURE__*/React.createElement("li", {
+    className: "dismiss"
+  }, getSeverityFilters(), /*#__PURE__*/React.createElement(Button, {
+    className: "u-no-margin--bottom dismiss-button",
+    onClick: handleGroupedDismiss,
+    hasIcon: true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "tidy"
+  }), getDismissText())))), document.body);
+};
+ToastNotificationList.propTypes = {
+  notifications: _pt.array.isRequired,
+  onDismiss: _pt.func.isRequired,
+  show: _pt.bool.isRequired
+};
+export default ToastNotificationList;

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

@@ -0,0 +1,74 @@
+import type { NotificationAction, NotificationType } from "../../NotificationProvider";
+import type { ValueOf } from "../../../types";
+import { NotificationSeverity } from "../../Notifications";
+import type { FC, PropsWithChildren, ReactNode } from "react";
+export type ToastNotificationType = NotificationType & {
+    timestamp?: ReactNode;
+    id: string;
+};
+interface ToastNotificationHelper {
+    notifications: ToastNotificationType[];
+    success: (message: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
+    info: (message: ReactNode, title?: string) => ToastNotificationType;
+    failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
+    clear: (notification?: ToastNotificationType[]) => void;
+    toggleListView: () => void;
+    isListView: boolean;
+    countBySeverity: GroupedNotificationCount;
+}
+export type GroupedNotificationCount = {
+    [key in ValueOf<typeof NotificationSeverity>]?: number;
+};
+/**
+ * The `ToastNotificationProvider` can be used to manage toast notifications.
+
+Wrap your application with this provider, and in any child component you can get the helper with `const toastNotify = useToastNotification()` to trigger notifications.
+Notifications automatically dismiss after a delay unless manually dismissed or expanded.
+
+| **Values**                        | **Description**                                                                 |
+|----------------------------------|---------------------------------------------------------------------------------|
+| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions.                          |
+| `toastNotify.info()`             | Displays an info toast. Optionally accepts a custom title.                     |
+| `toastNotify.failure()`          | Displays a failure toast with an error and optional message or actions.        |
+| `toastNotify.clear()`            | Clears specific toasts, or all toasts if none are specified.                   |
+| `toastNotify.toggleListView()`   | Toggles the notification list view open or closed.                             |
+| `toastNotify.countBySeverity`    | Returns the count of notifications grouped by severity (e.g., success, info).  |
+
+Some example usages:
+
+1. **Show a success toast:**
+```
+toastNotify.success("Your changes have been saved.");
+toastNotify.success("Your changes have been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
+```
+2. **Show an info toast:**
+```
+toastNotify.info("Your changes are syncing in the background.");
+toastNotify.info("Your changes are syncing in the background.", "Syncing");
+```
+
+3. **Show a failure toast:**
+```
+toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
+toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.", [{label: "Retry", onClick: () => console.log("Retry clicked")}]);
+```
+4. **Clear notifications:**
+```
+toastNotify.clear(); // clears all toast notifications
+toastNotify.clear([notificationId]); // clears specific toast notifications
+```
+5. **Toggle the notification list view:**
+```
+toastNotify.toggleListView();
+```
+6. **Get the count of notifications by severity:**
+```
+const count = toastNotify.countBySeverity;
+console.log(count.positive);
+```
+
+Alternatively, you can use the `ToastNotification` and `ToastNotificationList` components directly, without using the provider.
+*/
+declare const ToastNotificationProvider: FC<PropsWithChildren>;
+export default ToastNotificationProvider;
+export declare const useToastNotification: () => ToastNotificationHelper;

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

@@ -0,0 +1,202 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { failure as _failure, info as _info } from "../../NotificationProvider";
+import { NotificationSeverity } from "./..";
+import ToastNotification from "./ToastNotification";
+import ToastNotificationList from "./ToastNotificationList";
+import { createContext, useContext, useEffect, useState } from "react";
+import React from "react";
+var HIDE_NOTIFICATION_DELAY = 5000;
+var initialNotification = {
+  id: "",
+  message: "",
+  type: "positive"
+};
+var ToastNotificationContext = /*#__PURE__*/createContext({
+  /** List of all active toast notifications */
+  notifications: [],
+  /** Show a success toast. Optionally pass actions. */
+  success: () => initialNotification,
+  /** Show an info toast. Optionally pass a custom title. */
+  info: () => initialNotification,
+  /** Show a failure toast with an error and optional message/actions. */
+  failure: () => initialNotification,
+  /** Clear one or more specific toasts, or all if none provided. */
+  clear: () => null,
+  /** Toggle between single toast view and list view. */
+  toggleListView: () => null,
+  /** Whether the notification list view is currently open. */
+  isListView: false,
+  /** Grouped count of notifications by severity (positive, info, etc.). */
+  countBySeverity: {}
+});
+
+/**
+ * The `ToastNotificationProvider` can be used to manage toast notifications.
+
+Wrap your application with this provider, and in any child component you can get the helper with `const toastNotify = useToastNotification()` to trigger notifications.
+Notifications automatically dismiss after a delay unless manually dismissed or expanded.
+
+| **Values**                        | **Description**                                                                 |
+|----------------------------------|---------------------------------------------------------------------------------|
+| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions.                          |
+| `toastNotify.info()`             | Displays an info toast. Optionally accepts a custom title.                     |
+| `toastNotify.failure()`          | Displays a failure toast with an error and optional message or actions.        |
+| `toastNotify.clear()`            | Clears specific toasts, or all toasts if none are specified.                   |
+| `toastNotify.toggleListView()`   | Toggles the notification list view open or closed.                             |
+| `toastNotify.countBySeverity`    | Returns the count of notifications grouped by severity (e.g., success, info).  |
+
+Some example usages:
+
+1. **Show a success toast:**
+```
+toastNotify.success("Your changes have been saved.");
+toastNotify.success("Your changes have been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
+```
+2. **Show an info toast:**
+```
+toastNotify.info("Your changes are syncing in the background.");
+toastNotify.info("Your changes are syncing in the background.", "Syncing");
+```
+
+3. **Show a failure toast:**
+```
+toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
+toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.", [{label: "Retry", onClick: () => console.log("Retry clicked")}]);
+```
+4. **Clear notifications:**
+```
+toastNotify.clear(); // clears all toast notifications
+toastNotify.clear([notificationId]); // clears specific toast notifications
+```
+5. **Toggle the notification list view:**
+```
+toastNotify.toggleListView();
+```
+6. **Get the count of notifications by severity:**
+```
+const count = toastNotify.countBySeverity;
+console.log(count.positive);
+```
+
+Alternatively, you can use the `ToastNotification` and `ToastNotificationList` components directly, without using the provider.
+*/
+
+var ToastNotificationProvider = _ref => {
+  var {
+    children
+  } = _ref;
+  var [notifications, setNotifications] = useState([]);
+  var [showList, setShowList] = useState(false);
+  var [notificationTimer, setNotificationTimer] = useState(null);
+
+  // cleanup on timer if unmounted
+  useEffect(() => {
+    return () => {
+      if (notificationTimer) {
+        clearTimeout(notificationTimer);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var showNotificationWithDelay = () => {
+    setNotificationTimer(prevTimer => {
+      if (prevTimer) {
+        clearTimeout(prevTimer);
+      }
+      if (!showList) {
+        return setTimeout(() => {
+          setNotificationTimer(null);
+        }, HIDE_NOTIFICATION_DELAY);
+      }
+      return null;
+    });
+  };
+  var clearNotificationTimer = () => {
+    setNotificationTimer(prevTimer => {
+      if (prevTimer) {
+        clearTimeout(prevTimer);
+      }
+      return null;
+    });
+  };
+  var addNotification = notification => {
+    var notificationToAdd = _objectSpread(_objectSpread({}, notification), {}, {
+      timestamp: new Date().toLocaleString(),
+      id: Date.now().toString() + (Math.random() + 1).toString(36).substring(7)
+    });
+    setNotifications(prev => {
+      return [...prev, notificationToAdd];
+    });
+    showNotificationWithDelay();
+    return notificationToAdd;
+  };
+  var clear = notifications => {
+    if (!notifications) {
+      setNotifications([]);
+      setShowList(false);
+      clearNotificationTimer();
+      return;
+    }
+    setNotifications(prev => {
+      var removeIdLookup = new Set(notifications);
+      var newNotifications = prev.filter(item => !removeIdLookup.has(item));
+
+      // if we are clearing the last notification from an expanded list,
+      // then we want to collapse the list as well if all notifications has been cleared
+      if (!newNotifications.length) {
+        setShowList(false);
+      }
+      return newNotifications;
+    });
+    clearNotificationTimer();
+  };
+  var toggleListView = () => {
+    clearNotificationTimer();
+    setShowList(prev => !prev);
+  };
+  var countBySeverity = {
+    positive: 0,
+    negative: 0,
+    caution: 0,
+    information: 0
+  };
+  notifications.forEach(notification => {
+    countBySeverity[notification.type] += 1;
+  });
+  var helper = {
+    notifications,
+    failure: (title, error, message, actions) => addNotification(_failure(title, error, message, actions)),
+    info: (message, title) => addNotification(_info(message, title)),
+    success: (message, actions) => addNotification({
+      message,
+      actions,
+      type: NotificationSeverity.POSITIVE
+    }),
+    clear,
+    toggleListView,
+    isListView: showList,
+    countBySeverity
+  };
+  var latestNotification = notifications[notifications.length - 1];
+  var hasNotifications = !!notifications.length;
+  var showNotification = hasNotifications && !showList && notificationTimer;
+  var showNotificationList = hasNotifications && showList;
+  return /*#__PURE__*/React.createElement(ToastNotificationContext.Provider, {
+    value: helper
+  }, children, /*#__PURE__*/React.createElement(ToastNotification, {
+    notification: latestNotification,
+    onDismiss: clear,
+    show: !!showNotification
+  }), /*#__PURE__*/React.createElement(ToastNotificationList, {
+    notifications: notifications,
+    groupedCount: countBySeverity,
+    show: showNotificationList,
+    onDismiss: clear
+  }));
+};
+export default ToastNotificationProvider;
+export var useToastNotification = () => useContext(ToastNotificationContext);

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

@@ -0,0 +1,5 @@
+export { default as ToastNotificationProvider } from "./ToastNotificationProvider";
+export { useToastNotification } from "./ToastNotificationProvider";
+export type { ToastNotificationType } from "./ToastNotificationProvider";
+export { default as ToastNotification } from "./ToastNotification";
+export { default as ToastNotificationList } from "./ToastNotificationList";

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

@@ -0,0 +1,4 @@
+export { default as ToastNotificationProvider } from "./ToastNotificationProvider";
+export { useToastNotification } from "./ToastNotificationProvider";
+export { default as ToastNotification } from "./ToastNotification";
+export { default as ToastNotificationList } from "./ToastNotificationList";

package/dist/esm/components/Notifications/index.d.ts

@@ -0,0 +1,4 @@
+export { default, NotificationSeverity } from "./Notification";
+export type { NotificationProps } from "./Notification";
+export type { ToastNotificationType } from "./ToastNotification";
+export { ToastNotification, ToastNotificationList, useToastNotification, ToastNotificationProvider, } from "./ToastNotification";

package/dist/esm/components/Notifications/index.js

@@ -0,0 +1,2 @@
+export { default, NotificationSeverity } from "./Notification";
+export { ToastNotification, ToastNotificationList, useToastNotification, ToastNotificationProvider } from "./ToastNotification";

package/dist/esm/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/esm/hooks/index.js

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

package/dist/esm/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/esm/hooks/usePrefersReducedMotion.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+var QUERY = "(prefers-reduced-motion: reduce)";
+var 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.
+ */
+export var usePrefersReducedMotion = () => {
+  var [prefersReducedMotion, setPrefersReducedMotion] = useState(getInitialState);
+  useEffect(() => {
+    var mediaQuery = window.matchMedia(QUERY);
+    var listener = event => {
+      setPrefersReducedMotion(event.matches);
+    };
+    mediaQuery.addEventListener("change", listener);
+    return () => {
+      mediaQuery.removeEventListener("change", listener);
+    };
+  }, []);
+  return prefersReducedMotion;
+};

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

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