@vectara/vectara-ui 15.8.0 → 15.9.0

package/lib/components/drawer/Drawer.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { FocusOn } from "react-focus-on";
 import { BiX } from "react-icons/bi";
@@ -27,21 +27,38 @@ export const VuiDrawer = (_a) => {
     var { className, color = "primary", title, icon, children, isOpen, onClose, footer } = _a, rest = __rest(_a, ["className", "color", "title", "icon", "children", "isOpen", "onClose", "footer"]);
     const { DrawerTitle } = useVuiContext();
     const returnFocusElRef = useRef(null);
+    // Uncouple open state from visibile state so that when the popover is closed,
+    // we can set the button to be unselected immediately while the popover content
+    // is still transitioning out.
+    const [showTransition, setShowTransition] = useState(false);
+    const [isContentVisible, setIsContentVisible] = useState(false);
     // Return focus on unmount.
     useEffect(() => {
         var _a;
         if (isOpen) {
             returnFocusElRef.current = document.activeElement;
+            setIsContentVisible(true);
+            requestAnimationFrame(() => {
+                setShowTransition(true);
+            });
         }
         else {
             (_a = returnFocusElRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             returnFocusElRef.current = null;
+            setShowTransition(false);
         }
     }, [isOpen]);
     // Allow contents to respond to blur events before unmounting.
     const onCloseDelayed = () => {
         window.setTimeout(() => {
+            // First remove the transition class to trigger the exit animation.
+            setShowTransition(false);
             onClose === null || onClose === void 0 ? void 0 : onClose();
+            // Wait for the transition to complete before unmounting.
+            // This duration should match the CSS transition speed.
+            window.setTimeout(() => {
+                setIsContentVisible(false);
+            }, 200);
         }, 0);
     };
     // Handle outside clicks, but ignore clicks on notifications.
@@ -53,11 +70,13 @@ export const VuiDrawer = (_a) => {
         }
         onCloseDelayed();
     };
-    const classes = classNames("vuiDrawer", `vuiDrawer--${color}`, className);
-    return (_jsx(VuiPortal, { children: isOpen && (_jsx(VuiScreenBlock, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: handleClickOutside, 
+    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, 
                 // Enable manual focus return to work.
                 returnFocus: false, 
                 // Enable focus on contents when it's open,
                 // but enable manual focus return to work when it's closed.
-                autoFocus: isOpen }, { children: _jsxs("div", Object.assign({ className: classes }, rest, getOverlayProps("drawerTitle"), { children: [_jsx("div", Object.assign({ className: "vuiDrawerHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiDrawerHeader__title", "data-testid": "drawerTitle" }, { children: _jsx(DrawerTitle, Object.assign({ id: "drawerTitle" }, { children: title })) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close", "data-testid": "drawerCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiDrawerContent" }, { children: _jsx("div", Object.assign({ className: "vuiDrawerContent__inner" }, { children: children })) })), footer && _jsx("div", Object.assign({ className: "vuiDrawerFooter" }, { children: footer }))] })) })) })) }));
+                autoFocus: isOpen }, { children: _jsxs("div", Object.assign({ className: classes }, rest, getOverlayProps("drawerTitle"), { children: [_jsx("div", Object.assign({ className: "vuiDrawerHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiDrawerHeader__title", "data-testid": "drawerTitle" }, { children: _jsx(DrawerTitle, Object.assign({ id: "drawerTitle" }, { children: title })) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close", "data-testid": "drawerCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiDrawerContent" }, { children: _jsx("div", Object.assign({ className: "vuiDrawerContent__inner" }, { children: children })) })), footer && _jsx("div", Object.assign({ className: "vuiDrawerFooter" }, { children: footer }))] })) })) }))) }));
 };

package/lib/components/drawer/_index.scss

@@ -2,16 +2,6 @@
 
 $drawerWidth: 680px;
 
-@keyframes drawerIn {
-  0% {
-    right: -$drawerWidth;
-  }
-
-  100% {
-    right: 0;
-  }
-}
-
 .vuiDrawer {
   display: flex;
   flex-direction: column;
@@ -24,13 +14,18 @@ $drawerWidth: 680px;
   background-color: var(--vui-color-empty-shade);
   border-left: 1px solid var(--vui-color-border-medium);
   z-index: $drawerZIndex;
-  animation: drawerIn $transitionSpeed cubic-bezier(0, 1, 0, 1);
+  right: -$drawerWidth;
+  transition: right $transitionSpeed cubic-bezier(0, 1, 0, 1);
 
-  @media screen and (max-width: $drawerWidth + $sizeM) {
+  @media screen and (max-width: ($drawerWidth + $sizeM)) {
     max-width: calc(100% - $sizeM);
   }
 }
 
+.vuiDrawer-isLoaded {
+  right: 0;
+}
+
 .vuiDrawerHeader {
   padding: $sizeS $sizeL;
 }

package/lib/components/index.d.ts

@@ -80,6 +80,7 @@ import { VuiTable } from "./table/Table";
 import { VuiTab } from "./tabs/Tab";
 import { VuiTabbedRoutes } from "./tabs/TabbedRoutes";
 import { VuiTabs } from "./tabs/Tabs";
+import { VuiTabsNavigator } from "./tabs/TabNavigator";
 import { TAB_SIZE, TabSize } from "./tabs/types";
 import { VuiText } from "./typography/Text";
 import { VuiTextColor } from "./typography/TextColor";
@@ -93,4 +94,4 @@ import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
 export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, Stat, StepStatus, StepSize, TabSize, Tree, TreeItem, VuiStepProps };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/index.js

@@ -73,6 +73,7 @@ import { VuiTable } from "./table/Table";
 import { VuiTab } from "./tabs/Tab";
 import { VuiTabbedRoutes } from "./tabs/TabbedRoutes";
 import { VuiTabs } from "./tabs/Tabs";
+import { VuiTabsNavigator } from "./tabs/TabNavigator";
 import { TAB_SIZE } from "./tabs/types";
 import { VuiText } from "./typography/Text";
 import { VuiTextColor } from "./typography/TextColor";
@@ -85,4 +86,4 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/modal/Modal.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { FocusOn } from "react-focus-on";
 import { BiX } from "react-icons/bi";
@@ -27,28 +27,48 @@ export const VuiModal = (_a) => {
     var { className, color = "primary", title, icon, children, isOpen, onClose, key, canClickOutsideToClose = true, size = "s" } = _a, rest = __rest(_a, ["className", "color", "title", "icon", "children", "isOpen", "onClose", "key", "canClickOutsideToClose", "size"]);
     const { DrawerTitle } = useVuiContext();
     const returnFocusElRef = useRef(null);
+    // Uncouple open state from visibile state so that when the popover is closed,
+    // we can set the button to be unselected immediately while the popover content
+    // is still transitioning out.
+    const [showTransition, setShowTransition] = useState(false);
+    const [isContentVisible, setIsContentVisible] = useState(false);
     // Return focus on unmount.
     useEffect(() => {
         var _a;
         if (isOpen) {
             returnFocusElRef.current = document.activeElement;
+            setIsContentVisible(true);
+            requestAnimationFrame(() => {
+                setShowTransition(true);
+            });
         }
         else {
             (_a = returnFocusElRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             returnFocusElRef.current = null;
+            setShowTransition(false);
         }
     }, [isOpen]);
     // Allow contents to respond to blur events before unmounting.
     const onCloseDelayed = () => {
         window.setTimeout(() => {
+            // First remove the transition class to trigger the exit animation.
+            setShowTransition(false);
             onClose === null || onClose === void 0 ? void 0 : onClose();
+            // Wait for the transition to complete before unmounting.
+            // This duration should match the CSS transition speed.
+            window.setTimeout(() => {
+                setIsContentVisible(false);
+            }, 200);
         }, 0);
     };
+    const containerClasses = classNames("vuiModalContainer", {
+        "vuiModalContainer-isLoaded": showTransition
+    });
     const classes = classNames("vuiModal", `vuiModal--${color}`, `vuiModal--${size}`, className);
-    return (_jsx(VuiPortal, { children: isOpen && (_jsx(VuiScreenBlock, Object.assign({ type: "modal" }, { 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 ? onCloseDelayed : undefined, 
                 // Enable manual focus return to work.
                 returnFocus: false, 
                 // Enable focus on contents when it's open,
                 // but enable manual focus return to work when it's closed.
-                autoFocus: isOpen }, { children: _jsx("div", Object.assign({ className: "vuiModalContainer" }, getOverlayProps("modalTitle"), { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiModalHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiModalHeader__title" }, { children: _jsx(DrawerTitle, Object.assign({ id: "modalTitle" }, { children: title })) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close", "data-testid": "modalCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiModalContent" }, { children: _jsx("div", Object.assign({ className: "vuiModalContent__inner" }, { children: children })) }))] })) })) })) }), key)) }));
+                autoFocus: isOpen }, { children: _jsx("div", Object.assign({ className: containerClasses }, getOverlayProps("modalTitle"), { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiModalHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiModalHeader__title" }, { children: _jsx(DrawerTitle, Object.assign({ id: "modalTitle" }, { children: title })) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close", "data-testid": "modalCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiModalContent" }, { children: _jsx("div", Object.assign({ className: "vuiModalContent__inner" }, { children: children })) }))] })) })) })) }), key)) }));
 };

package/lib/components/modal/_index.scss

@@ -1,17 +1,5 @@
 @use "sass:map";
 
-@keyframes modalIn {
-  0% {
-    transform: translateY(12px);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
 .vuiModalContainer {
   position: fixed;
   top: 0;
@@ -21,10 +9,17 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  animation: modalIn $transitionSpeed cubic-bezier(0, 1, 1, 1);
+  transform: translateY(12px);
+  opacity: 0;
+  transition: transform $transitionSpeed cubic-bezier(0, 1, 1, 1), opacity $transitionSpeed;
   pointer-events: none;
 }
 
+.vuiModalContainer-isLoaded {
+  transform: translateY(0);
+  opacity: 1;
+}
+
 .vuiModal {
   display: flex;
   flex-direction: column;

package/lib/components/popover/Popover.d.ts

@@ -8,7 +8,7 @@ export type Props = {
     isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
     onClickButton?: (e: React.MouseEvent<HTMLElement>) => void;
-    padding?: boolean;
+    padding?: boolean | "none";
     anchorSide?: AnchorSide;
     anchorOffsetX?: number;
     anchorOffsetY?: number;

package/lib/components/popover/Popover.js

@@ -69,6 +69,10 @@ export const VuiPopover = (_a) => {
     const buttonRef = useRef(null);
     const [, setPositionMarker] = useState(0);
     const [showTransition, setShowTransition] = useState(false);
+    // Uncouple open state from visibile state so that when the popover is closed,
+    // we can set the button to be unselected immediately while the popover content
+    // is still transitioning out.
+    const [isContentVisible, setIsContentVisible] = useState(false);
     const buttonProps = {
         ref: (node) => {
             buttonRef.current = node;
@@ -120,6 +124,7 @@ export const VuiPopover = (_a) => {
         var _a;
         if (isOpen) {
             returnFocusElRef.current = document.activeElement;
+            setIsContentVisible(true);
             requestAnimationFrame(() => {
                 setShowTransition(true);
             });
@@ -127,6 +132,7 @@ export const VuiPopover = (_a) => {
         else {
             (_a = returnFocusElRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             returnFocusElRef.current = null;
+            setShowTransition(false);
         }
     }, [isOpen]);
     // Allow contents to respond to blur events before unmounting, and also
@@ -134,8 +140,14 @@ export const VuiPopover = (_a) => {
     // outside of the popover.
     const onCloseDelayed = () => {
         window.setTimeout(() => {
-            setIsOpen(false);
+            // First remove the transition class to trigger the exit animation.
             setShowTransition(false);
+            setIsOpen(false);
+            // Wait for the transition to complete before unmounting.
+            // This duration should match the CSS transition speed.
+            window.setTimeout(() => {
+                setIsContentVisible(false);
+            }, 200);
         }, 0);
     };
     // Always keep menu position up to date. If we tried to cache this inside
@@ -154,9 +166,10 @@ export const VuiPopover = (_a) => {
         "vuiPopover--upRight": anchorSide === "upRight"
     });
     const contentClasses = classNames("vuiPopoverContent", {
-        "vuiPopoverContent--padding": padding
+        "vuiPopoverContent--padding": padding === true,
+        "vuiPopoverContent--paddingNone": padding === "none"
     });
-    return (_jsxs(_Fragment, { children: [button, _jsx(VuiPortal, { children: isOpen && position && (_jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: onCloseDelayed, 
+    return (_jsxs(_Fragment, { children: [button, _jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && position && (_jsx(FocusOn, Object.assign({ 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,7 +9,11 @@
   opacity: 0;
   transform: translateY(-$sizeXs);
   transition: opacity $transitionSpeed, transform $transitionSpeed;
-  visibility: hidden;
+}
+
+.vuiPopover-isLoaded {
+  opacity: 1;
+  transform: translateY(0);
 }
 
 .vuiPopover--allowOverflow {
@@ -23,12 +27,6 @@
 
 .vuiPopover--upLeft,
 .vuiPopover--upRight {
-  transform: translateY($sizeXs);
-}
-
-.vuiPopover-isLoaded {
-  visibility: visible;
-  opacity: 1;
   transform: translateY(0);
 }
 
@@ -51,3 +49,7 @@
 .vuiPopoverContent--padding {
   padding: $sizeS;
 }
+
+.vuiPopoverContent--paddingNone {
+  padding: 0;
+}

package/lib/components/screenBlock/ScreenBlock.d.ts

@@ -3,6 +3,7 @@ type Props = {
     children: React.ReactNode;
     color?: "neutral" | "primary" | "danger" | "success";
     type?: "default" | "modal";
+    isHidden?: boolean;
 };
-export declare const VuiScreenBlock: ({ onClick, children, color, type }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiScreenBlock: ({ onClick, children, color, type, isHidden }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/screenBlock/ScreenBlock.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-export const VuiScreenBlock = ({ onClick, children, color = "neutral", type = "default" }) => {
-    const classes = classNames("vuiScreenBlock", `vuiScreenBlock--${color}`, `vuiScreenBlock--${type}`);
+export const VuiScreenBlock = ({ onClick, children, color = "neutral", type = "default", isHidden = false }) => {
+    const classes = classNames("vuiScreenBlock", `vuiScreenBlock--${color}`, `vuiScreenBlock--${type}`, isHidden && "vuiScreenBlock-isHidden");
     return (_jsxs("div", Object.assign({ className: classes }, { children: [children, _jsx("div", { className: "vuiScreenBlock__mask", onClick: onClick })] })));
 };

package/lib/components/screenBlock/_index.scss

@@ -7,6 +7,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  pointer-events: initial;
+  opacity: 1;
+  transition: opacity $transitionSpeed;
+}
+
+.vuiScreenBlock-isHidden {
+  pointer-events: none;
+  opacity: 0;
 }
 
 .vuiScreenBlock--default {

package/lib/components/tabs/TabNavigator.d.ts

@@ -0,0 +1,8 @@
+import { Props as PopoverProps } from "../popover/Popover";
+import { TabRoute } from "./types";
+type Props = {
+    routes: TabRoute[];
+    popover?: Omit<PopoverProps, "header" | "isOpen" | "setIsOpen" | "button" | "children" | "padding">;
+};
+export declare const VuiTabsNavigator: ({ routes, popover }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/tabs/TabNavigator.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { VuiPopover } from "../popover/Popover";
+import { VuiTab } from "./Tab";
+import { VuiTabs } from "./Tabs";
+import { useVuiContext } from "../context/Context";
+export const VuiTabsNavigator = ({ routes, popover }) => {
+    var _a;
+    const { getPath } = useVuiContext();
+    const [isOpen, setIsOpen] = useState(false);
+    const activeRoute = routes.find((route) => route.isActive || getPath().includes(route.href));
+    return (_jsx(VuiPopover, Object.assign({}, popover, { isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), button: _jsx("div", Object.assign({ className: "vuiTabs vuiTabs--s vuiTabs--enclosed" }, { children: _jsx(VuiTab, Object.assign({ isActive: true }, { children: (_a = activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.title) !== null && _a !== void 0 ? _a : "No selection" })) })), padding: "none" }, { children: _jsx(VuiTabs, Object.assign({ size: "s", tabStyle: "enclosed" }, { children: routes.map(({ href, title, render, testId, isActive }, index) => {
+                const tabLink = (_jsx(VuiTab, Object.assign({ href: href, isActive: isActive !== null && isActive !== void 0 ? isActive : getPath().includes(href), "data-testid": testId, onClick: () => setIsOpen(false) }, { children: title }), index));
+                if (render)
+                    return render(tabLink);
+                return tabLink;
+            }) })) })));
+};

package/lib/components/tabs/TabbedRoutes.d.ts

@@ -1,12 +1,6 @@
-import { TabSize } from "./types";
+import { TabRoute, TabSize } from "./types";
 type Props = {
-    tabs: Array<{
-        href: string;
-        title: string;
-        render?: (tabLink: React.ReactNode) => React.ReactNode;
-        component: React.ReactNode;
-        testId?: string;
-    }>;
+    tabs: TabRoute[];
     size?: TabSize;
     sideContent?: React.ReactNode;
     children?: React.ReactNode;

package/lib/components/tabs/TabbedRoutes.js

@@ -5,9 +5,8 @@ import { VuiSpacer } from "../spacer/Spacer";
 import { useVuiContext } from "../context/Context";
 export const VuiTabbedRoutes = ({ tabs, size, sideContent, children }) => {
     const { getPath } = useVuiContext();
-    return (_jsxs(_Fragment, { children: [_jsx(VuiTabs, Object.assign({ append: sideContent, size: size }, { children: tabs.map(({ href, title, render, testId }, index) => {
-                    const isActive = getPath().includes(href);
-                    const tabLink = (_jsx(VuiTab, Object.assign({ href: href, isActive: isActive, "data-testid": testId }, { children: title }), index));
+    return (_jsxs(_Fragment, { children: [_jsx(VuiTabs, Object.assign({ append: sideContent, size: size }, { children: tabs.map(({ href, title, render, testId, isActive }, index) => {
+                    const tabLink = (_jsx(VuiTab, Object.assign({ href: href, isActive: isActive !== null && isActive !== void 0 ? isActive : getPath().includes(href), "data-testid": testId }, { children: title }), index));
                     if (render)
                         return render(tabLink);
                     return tabLink;

package/lib/components/tabs/types.d.ts

@@ -1,2 +1,9 @@
 export declare const TAB_SIZE: readonly ["s", "m"];
 export type TabSize = (typeof TAB_SIZE)[number];
+export type TabRoute = {
+    href: string;
+    title: string;
+    render?: (tabLink: React.ReactNode) => React.ReactNode;
+    testId?: string;
+    isActive?: boolean;
+};

package/lib/styles/index.css

@@ -2423,14 +2423,6 @@ h2.react-datepicker__current-month {
   right: 4px;
 }
 
-@keyframes drawerIn {
-  0% {
-    right: -680px;
-  }
-  100% {
-    right: 0;
-  }
-}
 .vuiDrawer {
   display: flex;
   flex-direction: column;
@@ -2443,7 +2435,8 @@ h2.react-datepicker__current-month {
   background-color: var(--vui-color-empty-shade);
   border-left: 1px solid var(--vui-color-border-medium);
   z-index: 11;
-  animation: drawerIn 0.2s cubic-bezier(0, 1, 0, 1);
+  right: -680px;
+  transition: right 0.2s cubic-bezier(0, 1, 0, 1);
 }
 @media screen and (max-width: 696px) {
   .vuiDrawer {
@@ -2451,6 +2444,10 @@ h2.react-datepicker__current-month {
   }
 }
 
+.vuiDrawer-isLoaded {
+  right: 0;
+}
+
 .vuiDrawerHeader {
   padding: 12px 24px;
 }
@@ -3966,16 +3963,6 @@ h2.react-datepicker__current-month {
   line-height: 1.4;
 }
 
-@keyframes modalIn {
-  0% {
-    transform: translateY(12px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
 .vuiModalContainer {
   position: fixed;
   top: 0;
@@ -3985,10 +3972,17 @@ h2.react-datepicker__current-month {
   display: flex;
   justify-content: center;
   align-items: center;
-  animation: modalIn 0.2s cubic-bezier(0, 1, 1, 1);
+  transform: translateY(12px);
+  opacity: 0;
+  transition: transform 0.2s cubic-bezier(0, 1, 1, 1), opacity 0.2s;
   pointer-events: none;
 }
 
+.vuiModalContainer-isLoaded {
+  transform: translateY(0);
+  opacity: 1;
+}
+
 .vuiModal {
   display: flex;
   flex-direction: column;
@@ -4324,7 +4318,11 @@ h2.react-datepicker__current-month {
   opacity: 0;
   transform: translateY(-8px);
   transition: opacity 0.2s, transform 0.2s;
-  visibility: hidden;
+}
+
+.vuiPopover-isLoaded {
+  opacity: 1;
+  transform: translateY(0);
 }
 
 .vuiPopover--allowOverflow {
@@ -4338,12 +4336,6 @@ h2.react-datepicker__current-month {
 
 .vuiPopover--upLeft,
 .vuiPopover--upRight {
-  transform: translateY(8px);
-}
-
-.vuiPopover-isLoaded {
-  visibility: visible;
-  opacity: 1;
   transform: translateY(0);
 }
 
@@ -4367,6 +4359,10 @@ h2.react-datepicker__current-month {
   padding: 12px;
 }
 
+.vuiPopoverContent--paddingNone {
+  padding: 0;
+}
+
 .vuiProgressBar {
   position: relative;
   border-radius: 12px;
@@ -4496,6 +4492,14 @@ h2.react-datepicker__current-month {
   display: flex;
   align-items: center;
   justify-content: center;
+  pointer-events: initial;
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+
+.vuiScreenBlock-isHidden {
+  pointer-events: none;
+  opacity: 0;
 }
 
 .vuiScreenBlock--default {

package/package.json

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

package/src/docs/pages/tabs/TabsNavigator.tsx

@@ -0,0 +1,29 @@
+import { useLocation } from "react-router-dom";
+import { VuiTabsNavigator } from "../../../lib";
+
+export const TabsNavigator = () => {
+  const { hash } = useLocation();
+
+  const routes = [
+    {
+      href: "#home",
+      title: "Home",
+      testId: "home-tab",
+      isActive: hash.endsWith("#home")
+    },
+    {
+      href: "#profile",
+      title: "Profile",
+      testId: "profile-tab",
+      isActive: hash.endsWith("#profile")
+    },
+    {
+      href: "#settings",
+      title: "Settings",
+      testId: "settings-tab",
+      isActive: hash.endsWith("#settings")
+    }
+  ];
+
+  return <VuiTabsNavigator routes={routes} popover={{ anchorSide: "left" }} />;
+};

package/src/docs/pages/tabs/index.tsx

@@ -3,12 +3,14 @@ import { Medium } from "./Medium";
 import { FullWidth } from "./FullWidth";
 import { Links } from "./Links";
 import { Enclosed } from "./Enclosed";
+import { TabsNavigator } from "./TabsNavigator";
 
 const SmallSource = require("!!raw-loader!./Small");
 const MediumSource = require("!!raw-loader!./Medium");
 const FullWidthSource = require("!!raw-loader!./FullWidth");
 const LinksSource = require("!!raw-loader!./Links");
 const EnclosedSource = require("!!raw-loader!./Enclosed");
+const TabsNavigatorSource = require("!!raw-loader!./TabsNavigator");
 
 export const tabs = {
   name: "Tabs",
@@ -38,6 +40,11 @@ export const tabs = {
       name: "Enclosed",
       component: <Enclosed />,
       source: EnclosedSource.default.toString()
+    },
+    {
+      name: "Tabs Navigator",
+      component: <TabsNavigator />,
+      source: TabsNavigatorSource.default.toString()
     }
   ]
 };