@vectara/vectara-ui 18.2.1 → 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/components/topicButton/TopicButton.d.ts

@@ -21,6 +21,7 @@ type Props = {
     buttonStyle?: TopicButtonStyle;
     badges?: TopicButtonBadge[];
     icon?: React.ReactNode;
+    isDisabled?: boolean;
 };
-export declare const VuiTopicButton: ({ children, className, href, onClick, title, fullWidth, color, buttonStyle, badges, icon, target, track, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiTopicButton: ({ children, className, href, onClick, title, fullWidth, color, buttonStyle, badges, icon, isDisabled, target, track, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/topicButton/TopicButton.js

@@ -22,11 +22,12 @@ import { VuiFlexItem } from "../flex/FlexItem";
 export const TOPIC_BUTTON_COLOR = ["primary", "accent"];
 export const TOPIC_BUTTON_STYLE = ["compactRow", "compactGrid"];
 export const VuiTopicButton = (_a) => {
-    var { children, className, href, onClick, title, fullWidth, color = "primary", buttonStyle, badges, icon, target, track } = _a, rest = __rest(_a, ["children", "className", "href", "onClick", "title", "fullWidth", "color", "buttonStyle", "badges", "icon", "target", "track"]);
+    var { children, className, href, onClick, title, fullWidth, color = "primary", buttonStyle, badges, icon, isDisabled, target, track } = _a, rest = __rest(_a, ["children", "className", "href", "onClick", "title", "fullWidth", "color", "buttonStyle", "badges", "icon", "isDisabled", "target", "track"]);
     const { createLink } = useVuiContext();
     const classes = classNames("vuiTopicButton", `vuiTopicButton--${color}`, className, {
         [`vuiTopicButton--${buttonStyle}`]: buttonStyle,
-        "vuiTopicButton--fullWidth": fullWidth
+        "vuiTopicButton--fullWidth": fullWidth,
+        "vuiTopicButton--isDisabled": isDisabled
     });
     const titleNode = title && (_jsx(VuiTitle, Object.assign({ size: buttonStyle ? "xs" : "s" }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: title })) }) })));
     const badgeNodes = badges === null || badges === void 0 ? void 0 : badges.map((badge, index) => (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiBadge, Object.assign({ color: badge.color, size: "s" }, { children: badge.label })) }), index)));
@@ -42,9 +43,10 @@ export const VuiTopicButton = (_a) => {
     else {
         content = (_jsx(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "m" }, { children: _jsxs(VuiFlexItem, Object.assign({ grow: true }, { children: [title && (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "s" }, { children: [icon, _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: titleNode })), badgeNodes] })), children && _jsx(VuiSpacer, { size: "xxs" })] })), children] })) })));
     }
-    if (href) {
+    // Anchor tags can't be disabled, so we render a disabled button instead.
+    if (href && !isDisabled) {
         return createLink(Object.assign(Object.assign({ className: classes, href,
             onClick, children: content, target }, rest), getTrackingProps(track)));
     }
-    return (_jsx("button", Object.assign({ className: classes, onClick: onClick, type: "button" }, rest, { children: content })));
+    return (_jsx("button", Object.assign({ className: classes, onClick: onClick, type: "button", disabled: isDisabled }, rest, { children: content })));
 };

package/lib/components/topicButton/_index.scss

@@ -19,6 +19,11 @@
   width: 100%;
 }
 
+.vuiTopicButton--isDisabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .vuiTopicButton--primary:hover {
   box-shadow: $shadowLargeEnd, var(--vui-color-primary-shade) 0 0 1px 1px;
 }

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 {
@@ -6007,6 +6015,11 @@ h2.react-datepicker__current-month {
   width: 100%;
 }
 
+.vuiTopicButton--isDisabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .vuiTopicButton--primary:hover {
   box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px, var(--vui-color-primary-shade) 0 0 1px 1px;
 }

package/package.json

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