@vectara/vectara-ui 18.2.2 → 18.2.3

package/lib/components/drawer/Drawer.js

@@ -71,7 +71,13 @@ export const VuiDrawer = (_a) => {
     const classes = classNames("vuiDrawer", `vuiDrawer--${color}`, className, {
         "vuiDrawer-isLoaded": showTransition
     });
-    return (_jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && (_jsx(VuiScreenBlock, Object.assign({ isHidden: !isOpen }, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: handleClickOutside, 
+    return (_jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && (_jsx(VuiScreenBlock, Object.assign({ isHidden: !isOpen }, { children: _jsx(FocusOn
+            // Disable the focus guard as soon as the drawer begins closing
+            // so it doesn't intercept clicks while transitioning out.
+            , Object.assign({ 
+                // Disable the focus guard as soon as the drawer begins closing
+                // so it doesn't intercept clicks while transitioning out.
+                enabled: isOpen, onEscapeKey: onCloseDelayed, onClickOutside: handleClickOutside, 
                 // Enable manual focus return to work.
                 returnFocus: false, 
                 // Enable focus on contents when it's open,

package/lib/components/drawer/_index.scss

@@ -16,6 +16,7 @@ $drawerWidth: 680px;
   z-index: $drawerZIndex;
   right: -$drawerWidth;
   transition: right $transitionSpeed cubic-bezier(0, 1, 0, 1);
+  pointer-events: none;
 
   @media screen and (max-width: ($drawerWidth + $sizeM)) {
     max-width: calc(100% - $sizeM);
@@ -24,6 +25,7 @@ $drawerWidth: 680px;
 
 .vuiDrawer-isLoaded {
   right: 0;
+  pointer-events: auto;
 }
 
 .vuiDrawerHeader {

package/lib/components/modal/Modal.js

@@ -72,7 +72,13 @@ export const VuiModal = (_a) => {
         "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 ? handleClickOutside : undefined, 
+    return (_jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && (_jsx(VuiScreenBlock, Object.assign({ type: "modal", isHidden: !isOpen }, { children: _jsx(FocusOn
+            // Disable the focus guard as soon as the modal begins closing
+            // so it doesn't intercept clicks while transitioning out.
+            , Object.assign({ 
+                // Disable the focus guard as soon as the modal begins closing
+                // so it doesn't intercept clicks while transitioning out.
+                enabled: isOpen, onEscapeKey: onCloseDelayed, onClickOutside: canClickOutsideToClose ? handleClickOutside : undefined, 
                 // Enable manual focus return to work.
                 returnFocus: false, 
                 // Enable focus on contents when it's open,

package/lib/components/modal/_index.scss

@@ -28,11 +28,15 @@
   background-color: var(--vui-color-empty-shade);
   border-radius: $sizeXxs;
   z-index: $modalZIndex;
-  pointer-events: all;
+  pointer-events: none;
   box-shadow: rgba(57, 57, 75, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
   transition: height $transitionSpeed, max-width $transitionSpeed, max-height $transitionSpeed;
 }
 
+.vuiModalContainer-isLoaded .vuiModal {
+  pointer-events: all;
+}
+
 $size: (
   s: 500px,
   m: 900px,

package/lib/components/popover/Popover.js

@@ -167,7 +167,13 @@ export const VuiPopover = (_a) => {
         "vuiPopoverContent--padding": padding === true,
         "vuiPopoverContent--paddingNone": padding === "none"
     });
-    return (_jsxs(_Fragment, { children: [button, _jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && position && (_jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: onCloseDelayed, 
+    return (_jsxs(_Fragment, { children: [button, _jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && position && (_jsx(FocusOn
+                // Disable the focus guard as soon as the popover begins closing
+                // so it doesn't intercept clicks while transitioning out.
+                , Object.assign({ 
+                    // Disable the focus guard as soon as the popover begins closing
+                    // so it doesn't intercept clicks while transitioning out.
+                    enabled: isOpen, onEscapeKey: onCloseDelayed, onClickOutside: onCloseDelayed, 
                     // Enable manual focus return to work.
                     returnFocus: false, 
                     // Enable focus on contents when it's open,

package/lib/components/popover/_index.scss

@@ -9,11 +9,13 @@
   opacity: 0;
   transform: translateY(-$sizeXs);
   transition: opacity $transitionSpeed, transform $transitionSpeed;
+  pointer-events: none;
 }
 
 .vuiPopover-isLoaded {
   opacity: 1;
   transform: translateY(0);
+  pointer-events: auto;
 }
 
 .vuiPopover--allowOverflow {

package/lib/styles/index.css

@@ -2477,6 +2477,7 @@ h2.react-datepicker__current-month {
   z-index: 11;
   right: -680px;
   transition: right 0.2s cubic-bezier(0, 1, 0, 1);
+  pointer-events: none;
 }
 @media screen and (max-width: 696px) {
   .vuiDrawer {
@@ -2486,6 +2487,7 @@ h2.react-datepicker__current-month {
 
 .vuiDrawer-isLoaded {
   right: 0;
+  pointer-events: auto;
 }
 
 .vuiDrawerHeader {
@@ -4211,11 +4213,15 @@ h2.react-datepicker__current-month {
   background-color: var(--vui-color-empty-shade);
   border-radius: 4px;
   z-index: 12;
-  pointer-events: all;
+  pointer-events: none;
   box-shadow: rgba(57, 57, 75, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
   transition: height 0.2s, max-width 0.2s, max-height 0.2s;
 }
 
+.vuiModalContainer-isLoaded .vuiModal {
+  pointer-events: all;
+}
+
 .vuiModal--s {
   max-width: 500px;
 }
@@ -4538,11 +4544,13 @@ h2.react-datepicker__current-month {
   opacity: 0;
   transform: translateY(-8px);
   transition: opacity 0.2s, transform 0.2s;
+  pointer-events: none;
 }
 
 .vuiPopover-isLoaded {
   opacity: 1;
   transform: translateY(0);
+  pointer-events: auto;
 }
 
 .vuiPopover--allowOverflow {

package/package.json

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