@vectara/vectara-ui 16.11.0 → 17.0.0

package/lib/components/datePicker/DateRangePicker.d.ts

@@ -1,5 +1,6 @@
 import { BasicProps as DatePickerProps } from "./DatePicker";
 import { Props as PopoverProps } from "../popover/Popover";
+import { JSXElementConstructor, ReactElement } from "react";
 type DateProps = Pick<DatePickerProps, "placeholder" | "data-testid">;
 type Props = Pick<PopoverProps, "isOpen" | "setIsOpen" | "anchorSide" | "header"> & {
     startDate?: Date;
@@ -8,7 +9,8 @@ type Props = Pick<PopoverProps, "isOpen" | "setIsOpen" | "anchorSide" | "header"
     dateRangeProps?: DateProps;
     fullWidth?: boolean;
     canClear?: boolean;
+    input?: ReactElement<any, string | JSXElementConstructor<any>>;
     "data-testid"?: string;
 };
-export declare const VuiDateRangePicker: ({ setIsOpen, startDate, endDate, onChange, dateRangeProps, fullWidth, canClear, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiDateRangePicker: ({ setIsOpen, startDate, endDate, onChange, dateRangeProps, fullWidth, canClear, input, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/datePicker/DateRangePicker.js

@@ -16,7 +16,7 @@ import { formatDate } from "../../utils";
 import { useEffect, useState } from "react";
 import { VuiCalendar } from "./Calendar";
 export const VuiDateRangePicker = (_a) => {
-    var { setIsOpen, startDate, endDate, onChange, dateRangeProps, fullWidth, canClear } = _a, rest = __rest(_a, ["setIsOpen", "startDate", "endDate", "onChange", "dateRangeProps", "fullWidth", "canClear"]);
+    var { setIsOpen, startDate, endDate, onChange, dateRangeProps, fullWidth, canClear, input } = _a, rest = __rest(_a, ["setIsOpen", "startDate", "endDate", "onChange", "dateRangeProps", "fullWidth", "canClear", "input"]);
     const [initialStartDate, setInitialStartDate] = useState();
     const [initialEndDate, setInitialEndDate] = useState();
     // When the startDate or endDate props change, update the internal state.
@@ -42,7 +42,7 @@ export const VuiDateRangePicker = (_a) => {
     const humanizedStartDate = initialStartDate ? formatDate(initialStartDate) : "Unselected start date";
     const humanizedEndDate = initialEndDate ? formatDate(initialEndDate) : "unselected end date";
     const { "data-testid": testId } = rest, restProps = __rest(rest, ["data-testid"]);
-    const input = (_jsx(VuiTextInput, { className: "vuiDateRangePickerInput", value: !initialStartDate && !initialEndDate ? "Select date range" : `${humanizedStartDate} to ${humanizedEndDate}`, fullWidth: fullWidth, "data-testid": testId }));
+    const inputEl = input !== null && input !== void 0 ? input : (_jsx(VuiTextInput, { className: "vuiDateRangePickerInput", value: !initialStartDate && !initialEndDate ? "Select date range" : `${humanizedStartDate} to ${humanizedEndDate}`, fullWidth: fullWidth, "data-testid": testId }));
     return (_jsx(VuiPopover, Object.assign({ setIsOpen: (isOpen) => {
             if (isOpen) {
                 // Set temporary internal state to the provided values when opening the popover.
@@ -54,5 +54,5 @@ export const VuiDateRangePicker = (_a) => {
                 onChange === null || onChange === void 0 ? void 0 : onChange(initialStartDate, initialEndDate);
             }
             setIsOpen(isOpen);
-        }, button: input }, restProps, { children: dateRangePicker })));
+        }, button: inputEl }, restProps, { children: dateRangePicker })));
 };

package/lib/components/form/input/BasicInput.d.ts

@@ -1,4 +1,4 @@
-declare const SIZE: readonly ["m", "l"];
+declare const SIZE: readonly ["s", "m", "l"];
 export type BasicInputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "size" | "autoComplete" | "ref"> & {
     isInvalid?: boolean;
     size?: (typeof SIZE)[number];
@@ -8,7 +8,7 @@ export type BasicInputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttrib
 };
 export declare const VuiBasicInput: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "size" | "autoComplete"> & {
     isInvalid?: boolean | undefined;
-    size?: "m" | "l" | undefined;
+    size?: "s" | "m" | "l" | undefined;
     fullWidth?: boolean | undefined;
     autoComplete?: string | boolean | undefined;
     isSelected?: boolean | undefined;

package/lib/components/form/input/BasicInput.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 import { forwardRef } from "react";
-const SIZE = ["m", "l"];
+const SIZE = ["s", "m", "l"];
 export const VuiBasicInput = forwardRef((_a, ref) => {
     var { className, id, name, placeholder, size = "m", fullWidth, onSubmit, isInvalid, autoFocus, autoComplete, isSelected, onChange = () => undefined } = _a, rest = __rest(_a, ["className", "id", "name", "placeholder", "size", "fullWidth", "onSubmit", "isInvalid", "autoFocus", "autoComplete", "isSelected", "onChange"]);
     const classes = classNames("vuiInput", `vuiInput--${size}`, {

package/lib/components/form/input/PasswordInput.d.ts

@@ -1,6 +1,6 @@
 export declare const VuiPasswordInput: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "size" | "autoComplete"> & {
     isInvalid?: boolean | undefined;
-    size?: "m" | "l" | undefined;
+    size?: "s" | "m" | "l" | undefined;
     fullWidth?: boolean | undefined;
     autoComplete?: string | boolean | undefined;
     isSelected?: boolean | undefined;

package/lib/components/form/input/TextInput.d.ts

@@ -6,7 +6,7 @@ export type Props = BasicInputProps & {
 };
 export declare const VuiTextInput: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "size" | "autoComplete"> & {
     isInvalid?: boolean | undefined;
-    size?: "m" | "l" | undefined;
+    size?: "s" | "m" | "l" | undefined;
     fullWidth?: boolean | undefined;
     autoComplete?: string | boolean | undefined;
     isSelected?: boolean | undefined;

package/lib/components/form/input/_index.scss

@@ -5,6 +5,11 @@
   background-color: var(--vui-color-empty-shade);
 }
 
+.vuiInput--s {
+  padding: $sizeXs * 0.75 $sizeS;
+  font-size: $fontSizeSmall;
+}
+
 .vuiInput--m {
   padding: $sizeXs $sizeM;
   font-size: $fontSizeStandard;

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/lib/styles/index.css

@@ -2848,6 +2848,11 @@ h2.react-datepicker__current-month {
   background-color: var(--vui-color-empty-shade);
 }
 
+.vuiInput--s {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
 .vuiInput--m {
   padding: 8px 16px;
   font-size: 14px;

package/package.json

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

package/src/docs/components/Subsection.tsx

@@ -8,7 +8,7 @@ type Props = {
 export const Subsection = ({ title, children }: Props) => {
   return (
     <>
-      <VuiTitle size="s">
+      <VuiTitle size="xs">
         <h4>{title}</h4>
       </VuiTitle>
 

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

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { VuiButtonSecondary, VuiDateRangePicker, VuiSpacer, VuiText, VuiTextInput } from "../../../lib";
+import { formatDate } from "../../../lib/utils";
+
+export const DateRangePickerCustomInput = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [startDate, setStartDate] = useState<Date | undefined>(
+    new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
+  );
+  const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+
+  const humanizedStartDate = startDate ? formatDate(startDate) : "Unselected start date";
+  const humanizedEndDate = endDate ? formatDate(endDate) : "unselected end date";
+
+  return (
+    <>
+      <VuiText>
+        <p>
+          From {startDate?.toUTCString() ?? "unknown"} to {endDate?.toUTCString() ?? "unknown"}
+        </p>
+      </VuiText>
+
+      <VuiSpacer size="s" />
+
+      <VuiButtonSecondary
+        color="neutral"
+        onClick={() => {
+          // Add one day to the end date.
+          setEndDate((prevEndDate) => {
+            if (!prevEndDate) return new Date();
+            const newEndDate = new Date(prevEndDate);
+            newEndDate.setDate(newEndDate.getDate() + 1);
+            return newEndDate;
+          });
+        }}
+      >
+        Add day to verify external control
+      </VuiButtonSecondary>
+
+      <VuiSpacer size="s" />
+
+      <VuiDateRangePicker
+        header="Date filter"
+        startDate={startDate}
+        endDate={endDate}
+        onChange={(startDate, endDate) => {
+          setStartDate(startDate);
+          setEndDate(endDate);
+        }}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        anchorSide="left"
+        data-testid="dateRangePickerButton"
+        dateRangeProps={{ "data-testid": "dateRangePicker" }}
+        canClear
+        input={
+          <VuiTextInput
+            size="s"
+            value={!startDate && !endDate ? "Select date range" : `${humanizedStartDate} to ${humanizedEndDate}`}
+          />
+        }
+      />
+    </>
+  );
+};

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

@@ -1,11 +1,13 @@
 import { DatePicker } from "./DatePicker";
 import { Inline } from "./Inline";
 import { DateRangePicker } from "./DateRangePicker";
+import { DateRangePickerCustomInput } from "./DateRangePickerCustomInput";
 import { WithTimeSelection } from "./WithTimeSelection";
 
 const DatePickerSource = require("!!raw-loader!./DatePicker");
 const InlineSource = require("!!raw-loader!./Inline");
 const DateRangePickerSource = require("!!raw-loader!./DateRangePicker");
+const DateRangePickerCustomInputSource = require("!!raw-loader!./DateRangePickerCustomInput");
 const WithTimeSelectionSource = require("!!raw-loader!./WithTimeSelection");
 
 export const datePicker = {
@@ -27,6 +29,11 @@ export const datePicker = {
       component: <DateRangePicker />,
       source: DateRangePickerSource.default.toString()
     },
+    {
+      name: "Date range with custom input",
+      component: <DateRangePickerCustomInput />,
+      source: DateRangePickerCustomInputSource.default.toString()
+    },
     {
       name: "With time selection",
       component: <WithTimeSelection />,

package/src/docs/pages/input/Sizes.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { VuiTextInput } from "../../../lib";
+import { Subsection } from "../../components/Subsection";
+
+export const Sizes = () => {
+  const [value, setValue] = useState<string | undefined>();
+
+  return (
+    <>
+      <Subsection title="Large">
+        <VuiTextInput
+          size="l"
+          id="textInput"
+          name="text"
+          placeholder="Type something…"
+          value={value}
+          onSubmit={() => alert("Submit")}
+          onChange={(event) => setValue(event.target.value)}
+        />
+      </Subsection>
+
+      <Subsection title="Medium">
+        <VuiTextInput
+          size="m"
+          id="textInput"
+          name="text"
+          placeholder="Type something…"
+          value={value}
+          onSubmit={() => alert("Submit")}
+          onChange={(event) => setValue(event.target.value)}
+        />
+      </Subsection>
+
+      <Subsection title="Small">
+        <VuiTextInput
+          size="s"
+          id="textInput"
+          name="text"
+          placeholder="Type something…"
+          value={value}
+          onSubmit={() => alert("Submit")}
+          onChange={(event) => setValue(event.target.value)}
+        />
+      </Subsection>
+    </>
+  );
+};

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

@@ -2,13 +2,13 @@ import { TextInput } from "./TextInput";
 import { NumberInput } from "./NumberInput";
 import { PasswordInput } from "./PasswordInput";
 import { FullWidth } from "./FullWidth";
-import { Large } from "./Large";
+import { Sizes } from "./Sizes";
 
 const TextInputSource = require("!!raw-loader!./TextInput");
 const NumberInputSource = require("!!raw-loader!./NumberInput");
 const PasswordInputSource = require("!!raw-loader!./PasswordInput");
 const FullWidthSource = require("!!raw-loader!./FullWidth");
-const LargeSource = require("!!raw-loader!./Large");
+const SizesSource = require("!!raw-loader!./Sizes");
 
 export const input = {
   name: "Input",
@@ -35,9 +35,9 @@ export const input = {
       source: FullWidthSource.default.toString()
     },
     {
-      name: "Large size",
-      component: <Large />,
-      source: LargeSource.default.toString()
+      name: "Sizes",
+      component: <Sizes />,
+      source: SizesSource.default.toString()
     }
   ]
 };

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

@@ -13,7 +13,7 @@ export const searchInput = {
   path: "/searchInput",
   examples: [
     {
-      name: "Medium size",
+      name: "Sizes",
       component: <SearchInput />,
       source: SearchInputSource.default.toString()
     },

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",

package/src/docs/pages/input/Large.tsx

@@ -1,18 +0,0 @@
-import { useState } from "react";
-import { VuiTextInput } from "../../../lib";
-
-export const Large = () => {
-  const [value, setValue] = useState<string | undefined>();
-
-  return (
-    <VuiTextInput
-      size="l"
-      id="textInput"
-      name="text"
-      placeholder="Type something…"
-      value={value}
-      onSubmit={() => alert("Submit")}
-      onChange={(event) => setValue(event.target.value)}
-    />
-  );
-};