@vectara/vectara-ui 15.9.0 → 15.9.2

package/lib/components/drawer/Drawer.js

@@ -46,19 +46,17 @@ export const VuiDrawer = (_a) => {
             (_a = returnFocusElRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             returnFocusElRef.current = null;
             setShowTransition(false);
+            // Wait for the transition to complete before unmounting.
+            // This duration should match the CSS transition speed.
+            window.setTimeout(() => {
+                setIsContentVisible(false);
+            }, 200);
         }
     }, [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.

package/lib/components/modal/Modal.js

@@ -46,19 +46,17 @@ export const VuiModal = (_a) => {
             (_a = returnFocusElRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             returnFocusElRef.current = null;
             setShowTransition(false);
+            // Wait for the transition to complete before unmounting.
+            // This duration should match the CSS transition speed.
+            window.setTimeout(() => {
+                setIsContentVisible(false);
+            }, 200);
         }
     }, [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", {

package/lib/components/popover/Popover.js

@@ -133,6 +133,11 @@ export const VuiPopover = (_a) => {
             (_a = returnFocusElRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             returnFocusElRef.current = null;
             setShowTransition(false);
+            // Wait for the transition to complete before unmounting.
+            // This duration should match the CSS transition speed.
+            window.setTimeout(() => {
+                setIsContentVisible(false);
+            }, 200);
         }
     }, [isOpen]);
     // Allow contents to respond to blur events before unmounting, and also
@@ -140,14 +145,7 @@ export const VuiPopover = (_a) => {
     // outside of the popover.
     const onCloseDelayed = () => {
         window.setTimeout(() => {
-            // 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

package/lib/components/tabs/TabNavigator.js

@@ -9,7 +9,7 @@ export const VuiTabsNavigator = ({ routes, popover }) => {
     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) => {
+    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", vertical: true }, { 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);

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

@@ -7,6 +7,7 @@ type Props = {
     size?: TabSize;
     fullWidth?: boolean;
     tabStyle?: TabStyle;
+    vertical?: boolean;
 };
-export declare const VuiTabs: ({ children, className, append, size, fullWidth, tabStyle }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiTabs: ({ children, className, append, size, fullWidth, tabStyle, vertical }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/tabs/Tabs.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-export const VuiTabs = ({ children, className, append, size = "s", fullWidth, tabStyle = "open" }) => {
+export const VuiTabs = ({ children, className, append, size = "s", fullWidth, tabStyle = "open", vertical }) => {
     const classes = classNames(className, "vuiTabs", `vuiTabs--${size}`, `vuiTabs--${tabStyle}`, {
-        "vuiTabs--fullWidth": fullWidth
+        "vuiTabs--fullWidth": fullWidth,
+        "vuiTabs--vertical": vertical
     });
     return (_jsxs("div", Object.assign({ className: classes }, { children: [_jsx("div", Object.assign({ className: "vuiTabs__tabs" }, { children: children })), append && _jsx("div", Object.assign({ className: "vuiTabs__appendedContent" }, { children: append }))] })));
 };

package/lib/components/tabs/_index.scss

@@ -7,6 +7,23 @@
   column-gap: $sizeXxs;
 }
 
+.vuiTabs--vertical {
+  .vuiTabs__tabs {
+    flex-direction: column;
+    align-items: stretch;
+
+    .vuiTab {
+      &:first-child {
+        padding-left: $sizeXxs;
+      }
+
+      &:last-child {
+        padding-right: $sizeXxs;
+      }
+    }
+  }
+}
+
 .vuiTabs--fullWidth {
   .vuiTabs__tabs {
     flex-grow: 1;

package/lib/styles/index.css

@@ -5433,6 +5433,17 @@ h2.react-datepicker__current-month {
   column-gap: 4px;
 }
 
+.vuiTabs--vertical .vuiTabs__tabs {
+  flex-direction: column;
+  align-items: stretch;
+}
+.vuiTabs--vertical .vuiTabs__tabs .vuiTab:first-child {
+  padding-left: 4px;
+}
+.vuiTabs--vertical .vuiTabs__tabs .vuiTab:last-child {
+  padding-right: 4px;
+}
+
 .vuiTabs--fullWidth .vuiTabs__tabs {
   flex-grow: 1;
 }

package/package.json

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