@vectara/vectara-ui 16.12.0 → 17.0.0

package/lib/components/index.d.ts

@@ -87,7 +87,7 @@ import { SpansRow } from "./spans/types";
 import { VuiTab } from "./tabs/Tab";
 import { VuiTabbedRoutes } from "./tabs/TabbedRoutes";
 import { VuiTabs } from "./tabs/Tabs";
-import { VuiTabsNavigator } from "./tabs/TabsNavigator";
+import { TabNavigatorRoute, VuiTabsNavigator } from "./tabs/TabsNavigator";
 import { TAB_SIZE, TabSize } from "./tabs/types";
 import { VuiText } from "./typography/Text";
 import { VuiTextColor } from "./typography/TextColor";
@@ -100,5 +100,5 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 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, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabSize, Tree, TreeItem };
+export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabNavigatorRoute, TabSize, Tree, TreeItem };
 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, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, 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, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

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

@@ -1,7 +1,10 @@
 import { Props as PopoverProps } from "../popover/Popover";
 import { TabRoute } from "./types";
+export type TabNavigatorRoute = Omit<TabRoute, "render"> & {
+    append?: React.ReactNode;
+};
 type Props = {
-    routes: TabRoute[];
+    routes: TabNavigatorRoute[];
     popover?: Omit<PopoverProps, "header" | "isOpen" | "setIsOpen" | "button" | "children" | "padding">;
     "data-testid"?: string;
 };

package/lib/components/tabs/TabsNavigator.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { VuiPopover } from "../popover/Popover";
 import { VuiTab } from "./Tab";
@@ -17,6 +17,7 @@ import { VuiTabs } from "./Tabs";
 import { useVuiContext } from "../context/Context";
 import { VuiIcon } from "../icon/Icon";
 import { BiDotsVertical } from "react-icons/bi";
+import { VuiFlexContainer } from "../flex/FlexContainer";
 export const VuiTabsNavigator = (_a) => {
     var _b;
     var { routes, popover } = _a, rest = __rest(_a, ["routes", "popover"]);
@@ -28,13 +29,10 @@ export const VuiTabsNavigator = (_a) => {
     };
     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" }, rest, { children: _jsxs("div", Object.assign({ className: "vuiTabsNavigatorButton__inner" }, { children: [_jsx(VuiIcon, Object.assign({ size: "xs" }, { children: _jsx(BiDotsVertical, {}) })), _jsx("div", { children: (_b = activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.title) !== null && _b !== void 0 ? _b : "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: () => {
+                const { href, onClick, title, testId, append } = route;
+                return (_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;
+                    } }, { children: _jsxs(VuiFlexContainer, Object.assign({ spacing: "s" }, { children: [title, append] })) }), index));
             }) })) })));
 };

package/package.json

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

package/src/docs/pages/datePicker/DateRangePickerCustomInput.tsx

@@ -56,7 +56,6 @@ export const DateRangePickerCustomInput = () => {
         input={
           <VuiTextInput
             size="s"
-            className="vuiDateRangePickerInput"
             value={!startDate && !endDate ? "Select date range" : `${humanizedStartDate} to ${humanizedEndDate}`}
           />
         }

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

@@ -1,5 +1,5 @@
 import { useLocation } from "react-router-dom";
-import { VuiTabsNavigator } from "../../../lib";
+import { VuiBadge, VuiTabsNavigator } from "../../../lib";
 
 export const TabsNavigator = () => {
   const { hash } = useLocation();
@@ -10,7 +10,12 @@ export const TabsNavigator = () => {
       title: "Home",
       testId: "home-tab",
       isActive: hash.endsWith("#home"),
-      onClick: () => console.log("Home tab clicked")
+      onClick: () => console.log("Home tab clicked"),
+      append: (
+        <VuiBadge color="danger" size="s">
+          3
+        </VuiBadge>
+      )
     },
     {
       href: "#profile",