@vectara/vectara-ui 16.4.0 → 16.4.1

package/lib/components/modal/Modal.js

@@ -59,11 +59,20 @@ export const VuiModal = (_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 containerClasses = classNames("vuiModalContainer", {
         "vuiModalContainer-isLoaded": showTransition
     });
     const classes = classNames("vuiModal", `vuiModal--${color}`, `vuiModal--${size}`, className);
-    return (_jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && (_jsx(VuiScreenBlock, Object.assign({ type: "modal", isHidden: !isOpen }, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: canClickOutsideToClose ? onCloseDelayed : undefined, 
+    return (_jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && (_jsx(VuiScreenBlock, Object.assign({ type: "modal", isHidden: !isOpen }, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: canClickOutsideToClose ? handleClickOutside : undefined, 
                 // Enable manual focus return to work.
                 returnFocus: false, 
                 // Enable focus on contents when it's open,

package/package.json

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

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

@@ -218,6 +218,20 @@ export const PrimaryDrawer = () => {
             that the focus management and scroll locking still work as expected.
           </p>
         </VuiText>
+
+        <VuiSpacer size="m" />
+
+        <VuiButtonSecondary
+          color="primary"
+          onClick={() => {
+            addNotification({
+              color: "primary",
+              message: "Just some information, FYI"
+            });
+          }}
+        >
+          Add notification
+        </VuiButtonSecondary>
       </VuiModal>
 
       <VuiNotifications />