@canonical/react-components 3.4.3 → 3.5.1

package/dist/components/ContextualMenu/ContextualMenu.js

@@ -151,11 +151,18 @@ const ContextualMenu = _ref => {
       // becomes smaller.
       closePortal();
     } else {
-      // Update the coordinates so that the menu stays relative to the
-      // toggle button.
-      updatePositionCoords();
+      // Only update if the coordinates have changed.
+      // The check fixes a bug with chrome, where an input receiving focus and
+      // opening the keyboard causes a resize and the keyboard closes right after
+      // opening.
+      const coords = parent.getBoundingClientRect();
+      if (JSON.stringify(coords) !== JSON.stringify(positionCoords)) {
+        // Update the coordinates so that the menu stays relative to the
+        // toggle button.
+        updatePositionCoords();
+      }
     }
-  }, [closePortal, positionNode, updatePositionCoords]);
+  }, [closePortal, positionNode, positionCoords, updatePositionCoords]);
   const onScroll = (0, _react.useCallback)(e => {
     const parent = getPositionNode(wrapper.current, positionNode);
     // update position if the scroll event is triggered by the parent of the menu

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

@@ -12,21 +12,46 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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"]
+  tags: ["autodocs"],
+  argTypes: {
+    autoDismissDelay: {
+      control: {
+        type: "select"
+      },
+      options: [1000, 2000, 3000, 5000, 10000, 0],
+      labels: {
+        1000: "1 second",
+        2000: "2 seconds",
+        3000: "3 seconds",
+        5000: "5 seconds (default)",
+        10000: "10 seconds",
+        0: "Persistent (no auto-hide)"
+      },
+      description: "Delay in milliseconds before hiding notification, or 0 for persistent notifications"
+    }
+  },
+  args: {
+    autoDismissDelay: 5000
+  }
 };
 var _default = exports.default = meta;
 const Default = exports.Default = {
   name: "Default",
-  render: () => /*#__PURE__*/_react.default.createElement(ToastNotificationStoryWrapper, null)
+  render: args => /*#__PURE__*/_react.default.createElement(ToastNotificationStoryWrapper, args)
 };
-const ToastNotificationStoryWrapper = () => {
+const ToastNotificationStoryWrapper = _ref => {
+  let {
+    autoDismissDelay
+  } = _ref;
   (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));
+  return /*#__PURE__*/_react.default.createElement(_index.ToastNotificationProvider, {
+    autoDismissDelay: autoDismissDelay
+  }, /*#__PURE__*/_react.default.createElement(PreloadedList, null));
 };
 const PreloadedList = () => {
   const toastNotify = (0, _index.useToastNotification)();

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

@@ -8,6 +8,7 @@ export type ToastNotificationType = NotificationType & {
 };
 interface Props {
     onDismiss?: (notifications?: ToastNotificationType[]) => void;
+    autoDismissDelay?: number;
 }
 interface ToastNotificationHelper {
     notifications: ToastNotificationType[];
@@ -29,6 +30,8 @@ export type GroupedNotificationCount = {
 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.
 
+To make the notification persistent (i.e., not auto-dismiss), set the `autoDismissDelay` prop to `0` when using the provider: `<ToastNotificationProvider autoDismissDelay={0}>`
+
 | **Values**                       | **Description**                                                                |
 |----------------------------------|--------------------------------------------------------------------------------|
 | `toastNotify.success()`          | Displays a success toast. Optionally accepts actions and a title.              |

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

@@ -44,6 +44,8 @@ const ToastNotificationContext = /*#__PURE__*/(0, _react.createContext)({
 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.
 
+To make the notification persistent (i.e., not auto-dismiss), set the `autoDismissDelay` prop to `0` when using the provider: `<ToastNotificationProvider autoDismissDelay={0}>`
+
 | **Values**                       | **Description**                                                                |
 |----------------------------------|--------------------------------------------------------------------------------|
 | `toastNotify.success()`          | Displays a success toast. Optionally accepts actions and a title.              |
@@ -103,7 +105,8 @@ Alternatively, you can use the `ToastNotification` and `ToastNotificationList` c
 const ToastNotificationProvider = _ref => {
   let {
     children,
-    onDismiss
+    onDismiss,
+    autoDismissDelay = HIDE_NOTIFICATION_DELAY
   } = _ref;
   const [notifications, setNotifications] = (0, _react.useState)([]);
   const [showList, setShowList] = (0, _react.useState)(false);
@@ -112,7 +115,7 @@ const ToastNotificationProvider = _ref => {
   // cleanup on timer if unmounted
   (0, _react.useEffect)(() => {
     return () => {
-      if (notificationTimer) {
+      if (notificationTimer && typeof notificationTimer !== "boolean") {
         clearTimeout(notificationTimer);
       }
     };
@@ -120,20 +123,24 @@ const ToastNotificationProvider = _ref => {
   }, []);
   const showNotificationWithDelay = () => {
     setNotificationTimer(prevTimer => {
-      if (prevTimer) {
+      if (prevTimer && typeof prevTimer !== "boolean") {
         clearTimeout(prevTimer);
       }
       if (!showList) {
+        // If autoDismissDelay is 0, make notification persistent (no auto-hide)
+        if (!autoDismissDelay) {
+          return true; // Set a truthy value to indicate notification should show
+        }
         return setTimeout(() => {
           setNotificationTimer(null);
-        }, HIDE_NOTIFICATION_DELAY);
+        }, autoDismissDelay);
       }
       return null;
     });
   };
   const clearNotificationTimer = () => {
     setNotificationTimer(prevTimer => {
-      if (prevTimer) {
+      if (prevTimer && typeof prevTimer !== "boolean") {
         clearTimeout(prevTimer);
       }
       return null;

package/dist/esm/components/ContextualMenu/ContextualMenu.js

@@ -147,11 +147,18 @@ var ContextualMenu = _ref => {
       // becomes smaller.
       closePortal();
     } else {
-      // Update the coordinates so that the menu stays relative to the
-      // toggle button.
-      updatePositionCoords();
+      // Only update if the coordinates have changed.
+      // The check fixes a bug with chrome, where an input receiving focus and
+      // opening the keyboard causes a resize and the keyboard closes right after
+      // opening.
+      var coords = parent.getBoundingClientRect();
+      if (JSON.stringify(coords) !== JSON.stringify(positionCoords)) {
+        // Update the coordinates so that the menu stays relative to the
+        // toggle button.
+        updatePositionCoords();
+      }
     }
-  }, [closePortal, positionNode, updatePositionCoords]);
+  }, [closePortal, positionNode, positionCoords, updatePositionCoords]);
   var onScroll = useCallback(e => {
     var parent = getPositionNode(wrapper.current, positionNode);
     // update position if the scroll event is triggered by the parent of the menu

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

@@ -3,21 +3,46 @@ import { ToastNotificationProvider, useToastNotification } from "./index";
 import Button from "../../Button";
 var meta = {
   component: ToastNotificationProvider,
-  tags: ["autodocs"]
+  tags: ["autodocs"],
+  argTypes: {
+    autoDismissDelay: {
+      control: {
+        type: "select"
+      },
+      options: [1000, 2000, 3000, 5000, 10000, 0],
+      labels: {
+        1000: "1 second",
+        2000: "2 seconds",
+        3000: "3 seconds",
+        5000: "5 seconds (default)",
+        10000: "10 seconds",
+        0: "Persistent (no auto-hide)"
+      },
+      description: "Delay in milliseconds before hiding notification, or 0 for persistent notifications"
+    }
+  },
+  args: {
+    autoDismissDelay: 5000
+  }
 };
 export default meta;
 export var Default = {
   name: "Default",
-  render: () => /*#__PURE__*/React.createElement(ToastNotificationStoryWrapper, null)
+  render: args => /*#__PURE__*/React.createElement(ToastNotificationStoryWrapper, args)
 };
-var ToastNotificationStoryWrapper = () => {
+var ToastNotificationStoryWrapper = _ref => {
+  var {
+    autoDismissDelay
+  } = _ref;
   useEffect(() => {
     var root = document.getElementById("storybook-root");
     if (root) {
       root.style.height = "90vh";
     }
   }, []);
-  return /*#__PURE__*/React.createElement(ToastNotificationProvider, null, /*#__PURE__*/React.createElement(PreloadedList, null));
+  return /*#__PURE__*/React.createElement(ToastNotificationProvider, {
+    autoDismissDelay: autoDismissDelay
+  }, /*#__PURE__*/React.createElement(PreloadedList, null));
 };
 var PreloadedList = () => {
   var toastNotify = useToastNotification();

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

@@ -8,6 +8,7 @@ export type ToastNotificationType = NotificationType & {
 };
 interface Props {
     onDismiss?: (notifications?: ToastNotificationType[]) => void;
+    autoDismissDelay?: number;
 }
 interface ToastNotificationHelper {
     notifications: ToastNotificationType[];
@@ -29,6 +30,8 @@ export type GroupedNotificationCount = {
 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.
 
+To make the notification persistent (i.e., not auto-dismiss), set the `autoDismissDelay` prop to `0` when using the provider: `<ToastNotificationProvider autoDismissDelay={0}>`
+
 | **Values**                       | **Description**                                                                |
 |----------------------------------|--------------------------------------------------------------------------------|
 | `toastNotify.success()`          | Displays a success toast. Optionally accepts actions and a title.              |

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

@@ -41,6 +41,8 @@ var ToastNotificationContext = /*#__PURE__*/createContext({
 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.
 
+To make the notification persistent (i.e., not auto-dismiss), set the `autoDismissDelay` prop to `0` when using the provider: `<ToastNotificationProvider autoDismissDelay={0}>`
+
 | **Values**                       | **Description**                                                                |
 |----------------------------------|--------------------------------------------------------------------------------|
 | `toastNotify.success()`          | Displays a success toast. Optionally accepts actions and a title.              |
@@ -100,7 +102,8 @@ Alternatively, you can use the `ToastNotification` and `ToastNotificationList` c
 var ToastNotificationProvider = _ref => {
   var {
     children,
-    onDismiss
+    onDismiss,
+    autoDismissDelay = HIDE_NOTIFICATION_DELAY
   } = _ref;
   var [notifications, setNotifications] = useState([]);
   var [showList, setShowList] = useState(false);
@@ -109,7 +112,7 @@ var ToastNotificationProvider = _ref => {
   // cleanup on timer if unmounted
   useEffect(() => {
     return () => {
-      if (notificationTimer) {
+      if (notificationTimer && typeof notificationTimer !== "boolean") {
         clearTimeout(notificationTimer);
       }
     };
@@ -117,20 +120,24 @@ var ToastNotificationProvider = _ref => {
   }, []);
   var showNotificationWithDelay = () => {
     setNotificationTimer(prevTimer => {
-      if (prevTimer) {
+      if (prevTimer && typeof prevTimer !== "boolean") {
         clearTimeout(prevTimer);
       }
       if (!showList) {
+        // If autoDismissDelay is 0, make notification persistent (no auto-hide)
+        if (!autoDismissDelay) {
+          return true; // Set a truthy value to indicate notification should show
+        }
         return setTimeout(() => {
           setNotificationTimer(null);
-        }, HIDE_NOTIFICATION_DELAY);
+        }, autoDismissDelay);
       }
       return null;
     });
   };
   var clearNotificationTimer = () => {
     setNotificationTimer(prevTimer => {
-      if (prevTimer) {
+      if (prevTimer && typeof prevTimer !== "boolean") {
         clearTimeout(prevTimer);
       }
       return null;

package/package.json

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