@vectara/vectara-ui 16.0.1 → 16.1.1

package/lib/components/screenBlock/_index.scss

@@ -17,11 +17,11 @@
   opacity: 0;
 }
 
-.vuiScreenBlock--default {
+.vuiScreenBlock.vuiScreenBlock--default {
   z-index: $screenBlockZIndex;
 }
 
-.vuiScreenBlock--modal {
+.vuiScreenBlock.vuiScreenBlock--modal {
   z-index: $modalZIndex;
 }
 

package/lib/components/stepsVertical/_index.scss

@@ -8,11 +8,13 @@
 .vuiStepVerticalContainer {
   padding-left: $sizeS;
   border-left: 1px solid var(--vui-color-medium-shade);
+  transition: border-left-color $transitionSpeed;
 }
 
 .vuiStepVerticalContainer-isActive {
   padding-left: $sizeS - 1px;
-  border-left: 2px solid var(--vui-color-primary-shade);
+  border-left-width: 2px;
+  border-left-color: var(--vui-color-primary-shade);
 }
 
 .vuiStepVerticalContainer {
@@ -45,7 +47,6 @@
 
     .vuiStepVerticalContainer__icon {
       .vuiIcon--token {
-        // border-color: var(--vui-color-medium-shade);
         box-shadow: $shadowSmallEnd;
       }
     }

package/lib/components/tabs/TabNavigator.js

@@ -10,9 +10,17 @@ 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("button", Object.assign({ className: "vuiTabsNavigatorButton" }, { children: _jsxs("div", Object.assign({ className: "vuiTabsNavigatorButton__inner" }, { children: [_jsx(VuiIcon, Object.assign({ size: "xs" }, { children: _jsx(BiDotsVertical, {}) })), _jsx("div", { 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));
+    const isRouteActive = (route) => {
+        var _a;
+        return (_a = route.isActive) !== null && _a !== void 0 ? _a : (route.href ? getPath().includes(route.href) : false);
+    };
+    const activeRoute = routes.find((route) => isRouteActive(route));
+    return (_jsx(VuiPopover, Object.assign({}, popover, { isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), button: _jsx("button", Object.assign({ className: "vuiTabsNavigatorButton" }, { children: _jsxs("div", Object.assign({ className: "vuiTabsNavigatorButton__inner" }, { children: [_jsx(VuiIcon, Object.assign({ size: "xs" }, { children: _jsx(BiDotsVertical, {}) })), _jsx("div", { 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((route, index) => {
+                const { href, onClick, title, render, testId } = route;
+                const tabLink = (_jsx(VuiTab, Object.assign({ href: href, isActive: isRouteActive(route), "data-testid": testId, onClick: () => {
+                        onClick === null || onClick === void 0 ? void 0 : onClick();
+                        setIsOpen(false);
+                    } }, { children: title }), index));
                 if (render)
                     return render(tabLink);
                 return tabLink;

package/lib/components/tabs/TabbedRoutes.js

@@ -6,7 +6,7 @@ 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, 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));
+                    const tabLink = (_jsx(VuiTab, Object.assign({ href: href, isActive: isActive !== null && isActive !== void 0 ? isActive : (href ? getPath().includes(href) : false), "data-testid": testId }, { children: title }), index));
                     if (render)
                         return render(tabLink);
                     return tabLink;

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

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

package/lib/styles/index.css

@@ -4502,11 +4502,11 @@ h2.react-datepicker__current-month {
   opacity: 0;
 }
 
-.vuiScreenBlock--default {
+.vuiScreenBlock.vuiScreenBlock--default {
   z-index: 10;
 }
 
-.vuiScreenBlock--modal {
+.vuiScreenBlock.vuiScreenBlock--modal {
   z-index: 12;
 }
 
@@ -5084,11 +5084,13 @@ h2.react-datepicker__current-month {
 .vuiStepVerticalContainer {
   padding-left: 12px;
   border-left: 1px solid var(--vui-color-medium-shade);
+  transition: border-left-color 0.2s;
 }
 
 .vuiStepVerticalContainer-isActive {
   padding-left: 11px;
-  border-left: 2px solid var(--vui-color-primary-shade);
+  border-left-width: 2px;
+  border-left-color: var(--vui-color-primary-shade);
 }
 
 .vuiStepVerticalContainer {

package/package.json

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

package/src/docs/pages/drawer/PrimaryDrawer.tsx

@@ -5,6 +5,7 @@ import {
   VuiButtonSecondary,
   VuiDrawer,
   VuiFlexContainer,
+  VuiModal,
   VuiNotifications,
   VuiSpacer,
   VuiText,
@@ -16,6 +17,7 @@ import { FormGroup } from "../searchSelect/FormGroup";
 export const PrimaryDrawer = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [hasFooter, setHasFooter] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
     <>
@@ -67,6 +69,12 @@ export const PrimaryDrawer = () => {
 
         <VuiSpacer size="m" />
 
+        <VuiButtonSecondary color="primary" onClick={() => setIsModalOpen(true)}>
+          Open modal from drawer
+        </VuiButtonSecondary>
+
+        <VuiSpacer size="m" />
+
         <VuiText>
           <p>I just thought you should know that your drawer is showing.</p>
         </VuiText>
@@ -203,6 +211,15 @@ export const PrimaryDrawer = () => {
         <VuiSpacer size="l" />
       </VuiDrawer>
 
+      <VuiModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title="I'm a modal inside a drawer!">
+        <VuiText>
+          <p>
+            This modal is rendered inside the drawer. It demonstrates that you can have multiple layers of overlays and
+            that the focus management and scroll locking still work as expected.
+          </p>
+        </VuiText>
+      </VuiModal>
+
       <VuiNotifications />
     </>
   );

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

@@ -9,19 +9,22 @@ export const TabsNavigator = () => {
       href: "#home",
       title: "Home",
       testId: "home-tab",
-      isActive: hash.endsWith("#home")
+      isActive: hash.endsWith("#home"),
+      onClick: () => console.log("Home tab clicked")
     },
     {
       href: "#profile",
       title: "Profile",
       testId: "profile-tab",
-      isActive: hash.endsWith("#profile")
+      isActive: hash.endsWith("#profile"),
+      onClick: () => console.log("Profile tab clicked")
     },
     {
       href: "#settings",
       title: "Settings",
       testId: "settings-tab",
-      isActive: hash.endsWith("#settings")
+      isActive: hash.endsWith("#settings"),
+      onClick: () => console.log("Settings tab clicked")
     }
   ];