@vectara/vectara-ui 15.9.1 → 15.9.2

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.1",
+  "version": "15.9.2",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",