@vectara/vectara-ui 15.7.1 → 15.7.2

package/lib/components/drawer/Drawer.js

@@ -44,8 +44,17 @@ export const VuiDrawer = (_a) => {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }, 0);
     };
+    // Handle outside clicks, but ignore clicks on notifications.
+    const handleClickOutside = (event) => {
+        const target = event.target;
+        // Check if the click is within a notification.
+        if (target.closest("[data-awareness='notification']")) {
+            return;
+        }
+        onCloseDelayed();
+    };
     const classes = classNames("vuiDrawer", `vuiDrawer--${color}`, className);
-    return (_jsx(VuiPortal, { children: isOpen && (_jsx(VuiScreenBlock, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: onCloseDelayed, 
+    return (_jsx(VuiPortal, { children: isOpen && (_jsx(VuiScreenBlock, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: handleClickOutside, 
                 // Enable manual focus return to work.
                 returnFocus: false, 
                 // Enable focus on contents when it's open,

package/lib/components/notification/Notification.js

@@ -37,5 +37,7 @@ export const VuiNotification = ({ color, message, onDismiss, children, hasCopyBu
             icon = null;
     }
     const copyValue = code ? `${message}\n\n${code.content}` : message;
-    return (_jsx("div", Object.assign({ className: classes, "data-testid": `notification-${color}` }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "xs" }, { children: [icon, _jsxs("div", { children: [_jsx(VuiText, Object.assign({ preserveWhiteSpace: true }, { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: message })) })), code && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiCode, Object.assign({ language: code.language }, { children: code.content }))] })), hasCopyButton && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiCopyButton, { value: copyValue, size: "s", label: "Copy notification" })] })), children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), children] })), link && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiLink, Object.assign({}, link))] }))] })] })) })), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIconButton, { "aria-label": "Dismiss message", size: "xs", color: "neutral", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: () => onDismiss(), "data-testid": `dismissNotificationButton-${color}` }) }))] })) })));
+    // data-awareness="notification" enables notifications to be closed when a drawer is open,
+    // without triggering the drawer to close.
+    return (_jsx("div", Object.assign({ className: classes, "data-testid": `notification-${color}`, "data-awareness": "notification" }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "xs" }, { children: [icon, _jsxs("div", { children: [_jsx(VuiText, Object.assign({ preserveWhiteSpace: true }, { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: message })) })), code && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiCode, Object.assign({ language: code.language }, { children: code.content }))] })), hasCopyButton && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiCopyButton, { value: copyValue, size: "s", label: "Copy notification" })] })), children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), children] })), link && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiLink, Object.assign({}, link))] }))] })] })) })), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIconButton, { "aria-label": "Dismiss message", size: "xs", color: "neutral", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: () => onDismiss(), "data-testid": `dismissNotificationButton-${color}` }) }))] })) })));
 };

package/lib/components/notification/Notifications.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Toaster } from "sonner";
+import { VuiPortal } from "../portal/Portal";
 export const VuiNotifications = (props) => {
     const finalProps = Object.assign({ position: "top-right" }, props);
-    return _jsx(Toaster, Object.assign({}, finalProps));
+    // Render inside portal so notifications can appear above everything else, including drawers.
+    return (_jsx(VuiPortal, { children: _jsx(Toaster, Object.assign({}, finalProps)) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "15.7.1",
+  "version": "15.7.2",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/pages/drawer/PrimaryDrawer.tsx

@@ -1,9 +1,11 @@
 import { useState } from "react";
 import {
+  addNotification,
   VuiButtonPrimary,
   VuiButtonSecondary,
   VuiDrawer,
   VuiFlexContainer,
+  VuiNotifications,
   VuiSpacer,
   VuiText,
   VuiToggle
@@ -51,6 +53,20 @@ export const PrimaryDrawer = () => {
           )
         }
       >
+        <VuiButtonSecondary
+          color="primary"
+          onClick={() => {
+            addNotification({
+              color: "primary",
+              message: "Just some information, FYI"
+            });
+          }}
+        >
+          Add notification
+        </VuiButtonSecondary>
+
+        <VuiSpacer size="m" />
+
         <VuiText>
           <p>I just thought you should know that your drawer is showing.</p>
         </VuiText>
@@ -186,6 +202,8 @@ export const PrimaryDrawer = () => {
         <FormGroup />
         <VuiSpacer size="l" />
       </VuiDrawer>
+
+      <VuiNotifications />
     </>
   );
 };