@vectara/vectara-ui 17.4.0 → 18.0.1

package/lib/components/index.d.ts

@@ -51,6 +51,8 @@ import { LinkProps } from "./link/types";
 import { VuiList } from "./list/List";
 import { VuiMenu } from "./menu/Menu";
 import { VuiMenuItem, MenuItem } from "./menu/MenuItem";
+import { VuiMenuList } from "./menuList/VuiMenuList";
+import { VuiMenuListButton } from "./menuList/VuiMenuListButton";
 import { VuiModal } from "./modal/Modal";
 import { addNotification } from "./notification/Notification";
 import { VuiNotifications } from "./notification/Notifications";
@@ -70,6 +72,8 @@ import { SearchSuggestion } from "./searchInput/types";
 import { SearchResult, VuiSearchResult } from "./searchResult/SearchResult";
 import { VuiSearchSelect } from "./searchSelect/SearchSelect";
 import { VuiSetting } from "./setting/Setting";
+import { VuiSideList } from "./sideList/VuiSideList";
+import { VuiSideListButton } from "./sideList/VuiSideListButton";
 import { VuiSpacer } from "./spacer/Spacer";
 import { SPACER_SIZE } from "./spacer/types";
 import { VuiSpinner } from "./spinner/Spinner";
@@ -101,4 +105,4 @@ 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, TabNavigatorRoute, TabSize, Tree, TreeItem };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, 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 };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, 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, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, 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/index.js

@@ -45,6 +45,8 @@ import { VuiLink, VuiLinkInternal } from "./link/Link";
 import { VuiList } from "./list/List";
 import { VuiMenu } from "./menu/Menu";
 import { VuiMenuItem } from "./menu/MenuItem";
+import { VuiMenuList } from "./menuList/VuiMenuList";
+import { VuiMenuListButton } from "./menuList/VuiMenuListButton";
 import { VuiModal } from "./modal/Modal";
 import { addNotification } from "./notification/Notification";
 import { VuiNotifications } from "./notification/Notifications";
@@ -62,6 +64,8 @@ import { VuiSearchInput } from "./searchInput/SearchInput";
 import { VuiSearchResult } from "./searchResult/SearchResult";
 import { VuiSearchSelect } from "./searchSelect/SearchSelect";
 import { VuiSetting } from "./setting/Setting";
+import { VuiSideList } from "./sideList/VuiSideList";
+import { VuiSideListButton } from "./sideList/VuiSideListButton";
 import { VuiSpacer } from "./spacer/Spacer";
 import { SPACER_SIZE } from "./spacer/types";
 import { VuiSpinner } from "./spinner/Spinner";
@@ -91,4 +95,4 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, 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 };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, 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, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, 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/menuList/VuiMenuList.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    className?: string;
+    children?: React.ReactNode;
+    "data-testid"?: string;
+};
+export declare const VuiMenuList: ({ className, children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/menuList/VuiMenuList.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+export const VuiMenuList = (_a) => {
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    const classes = classNames("vuiMenuList", className);
+    return (_jsx("ul", Object.assign({ className: classes }, rest, { children: children })));
+};

package/lib/components/menuList/VuiMenuListButton.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    className?: string;
+    children?: React.ReactNode;
+    "data-testid"?: string;
+    isActive?: boolean;
+    onClick?: () => void;
+    href?: string;
+    icon?: React.ReactNode;
+    append?: React.ReactNode;
+    disabled?: boolean;
+};
+export declare const VuiMenuListButton: ({ className, isActive, onClick, href, icon, children, append, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/menuList/VuiMenuListButton.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { VuiIcon } from "../icon/Icon";
+import { useVuiContext } from "../context/Context";
+export const VuiMenuListButton = (_a) => {
+    var { className, isActive, onClick, href, icon, children, append } = _a, rest = __rest(_a, ["className", "isActive", "onClick", "href", "icon", "children", "append"]);
+    const { createLink } = useVuiContext();
+    const classes = classNames("vuiMenuListButton", className, {
+        "vuiMenuListButton-isActive": isActive
+    });
+    const content = (_jsxs(_Fragment, { children: [icon && _jsx(VuiIcon, Object.assign({ size: "s" }, { children: icon })), children && _jsx("span", Object.assign({ className: "vuiMenuListButton__label" }, { children: children })), append] }));
+    let button;
+    if (href && !rest.disabled) {
+        button = createLink(Object.assign({ href,
+            onClick, children: (
+            //* Wrap a button otherwise the flex layout breaks */}
+            _jsx("button", Object.assign({ className: classes, tabIndex: -1 }, { children: content }))) }, rest));
+    }
+    else {
+        button = (_jsx("button", Object.assign({ type: "button", className: classes, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick() }, rest, { children: content })));
+    }
+    return button;
+};

package/lib/components/menuList/_index.scss

@@ -0,0 +1,53 @@
+// TODO: Migrate to using VUI vars.
+
+.vuiMenuList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.vuiMenuListButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: #4b5563;
+  font: inherit;
+  font-size: 13px;
+  // Ensure button height doesn't shift when icons are added and removed.
+  line-height: 1.3;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f3f4f6;
+    color: #111827;
+  }
+
+  &:disabled {
+    color: #9ca3af;
+    cursor: not-allowed;
+    background-color: transparent;
+  }
+}
+
+.vuiMenuListButton-isActive {
+  background-color: rgba(37, 99, 235, 0.08);
+  color: #1d4ed8;
+
+  &:hover {
+    background-color: rgba(37, 99, 235, 0.12);
+    color: #1d4ed8;
+  }
+}
+
+.vuiMenuListButton__label {
+  flex: 1 1 auto;
+}

package/lib/components/sideList/VuiSideList.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    className?: string;
+    children?: React.ReactNode;
+    "data-testid"?: string;
+};
+export declare const VuiSideList: ({ className, children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/sideList/VuiSideList.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+export const VuiSideList = (_a) => {
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    const classes = classNames("vuiSideList", className);
+    return (_jsx("ul", Object.assign({ className: classes }, rest, { children: children })));
+};

package/lib/components/sideList/VuiSideListButton.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    className?: string;
+    children?: React.ReactNode;
+    "data-testid"?: string;
+    isActive?: boolean;
+    onClick?: () => void;
+    href?: string;
+    icon?: React.ReactNode;
+    append?: React.ReactNode;
+};
+export declare const VuiSideListButton: ({ className, isActive, onClick, href, icon, children, append, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/sideList/VuiSideListButton.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { VuiIcon } from "../icon/Icon";
+import { useVuiContext } from "../context/Context";
+export const VuiSideListButton = (_a) => {
+    var { className, isActive, onClick, href, icon, children, append } = _a, rest = __rest(_a, ["className", "isActive", "onClick", "href", "icon", "children", "append"]);
+    const { createLink } = useVuiContext();
+    const classes = classNames("vuiSideListButton", className, {
+        "vuiSideListButton-isActive": isActive
+    });
+    const content = (_jsxs(_Fragment, { children: [icon && _jsx(VuiIcon, Object.assign({ size: "s" }, { children: icon })), children && _jsx("span", Object.assign({ className: "vuiSideListButton__label" }, { children: children })), append] }));
+    let button;
+    if (href) {
+        button = createLink(Object.assign({ href,
+            onClick, children: (
+            //* Wrap a button otherwise the flex layout breaks */}
+            _jsx("button", Object.assign({ className: classes, tabIndex: -1 }, { children: content }))) }, rest));
+    }
+    else {
+        button = (_jsx("button", Object.assign({ type: "button", className: classes, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick() }, rest, { children: content })));
+    }
+    return button;
+};

package/lib/components/sideList/_index.scss

@@ -0,0 +1,47 @@
+// TODO: Migrate to using VUI vars.
+
+.vuiSideList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.vuiSideListButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: #4b5563;
+  font: inherit;
+  font-size: 13px;
+  // Ensure button height doesn't shift when icons are added and removed.
+  line-height: 1.3;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f3f4f6;
+    color: #111827;
+  }
+}
+
+.vuiSideListButton-isActive {
+  background-color: rgba(37, 99, 235, 0.08);
+  color: #1d4ed8;
+
+  &:hover {
+    background-color: rgba(37, 99, 235, 0.12);
+    color: #1d4ed8;
+  }
+}
+
+.vuiSideListButton__label {
+  flex: 1 1 auto;
+}

package/lib/components/stepsVertical/StepsVertical.d.ts

@@ -1,6 +1,13 @@
-import { Props as StepVerticalProps } from "./StepVertical";
 export type { StepVerticalStatus } from "./types";
-export type StepsVertical = Omit<StepVerticalProps, "index" | "icon">[];
+export type StepsVertical = {
+    id: string;
+    title: string;
+    isActive?: boolean;
+    hasErrors?: boolean;
+    icon: React.ReactNode;
+    onSelect: () => void;
+    "data-testid"?: string;
+}[];
 type Props = {
     steps: StepsVertical;
     className?: string;

package/lib/components/stepsVertical/StepsVertical.js

@@ -10,18 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import { VuiStepVertical } from "./StepVertical";
-import { BiCheck, BiError, BiSolidHand } from "react-icons/bi";
+import { BiError } from "react-icons/bi";
+import { VuiIcon } from "../icon/Icon";
+import { VuiMenuList } from "../menuList/VuiMenuList";
+import { VuiMenuListButton } from "../menuList/VuiMenuListButton";
 export const VuiStepsVertical = (_a) => {
     var { steps, className, "data-testid": dataTestId } = _a, rest = __rest(_a, ["steps", "className", "data-testid"]);
-    const classes = classNames("vuiStepsVertical", className);
-    return (_jsx("div", Object.assign({ className: classes, "data-testid": dataTestId }, rest, { children: steps.map((step, index) => {
+    return (_jsx(VuiMenuList, Object.assign({ className: className, "data-testid": dataTestId }, rest, { children: steps.map((step) => {
             var _a;
-            const icon = step.status === "complete" ? (_jsx(BiCheck, {})) : step.status === "danger" ? (_jsx(BiError, {})) : step.status === "warning" ? (_jsx(BiSolidHand, {})) : null;
-            const stepContainerClasses = classNames("vuiStepVerticalContainer", {
-                "vuiStepVerticalContainer-isActive": step.isActive
-            });
-            return (_jsx("div", Object.assign({ className: stepContainerClasses }, { children: _jsx(VuiStepVertical, { title: step.title, status: step.status, isActive: step.isActive, onClick: step.onClick, "data-testid": (_a = step["data-testid"]) !== null && _a !== void 0 ? _a : `${dataTestId}-step-${index}`, index: index + 1, icon: icon }) }), index));
+            const { id, title, isActive, hasErrors, icon, onSelect } = step;
+            const stepTestId = (_a = step["data-testid"]) !== null && _a !== void 0 ? _a : `${dataTestId}-step-${id}`;
+            return (_jsx(VuiMenuListButton, Object.assign({ isActive: isActive, onClick: () => onSelect(), "data-testid": stepTestId, icon: icon, append: hasErrors && (_jsx(VuiIcon, Object.assign({ size: "s", color: "danger", "data-testid": `${stepTestId}-error` }, { children: _jsx(BiError, {}) }))) }, { children: title }), id));
         }) })));
 };

package/lib/styles/index.css

@@ -4135,6 +4135,54 @@ h2.react-datepicker__current-month {
   line-height: 1.4;
 }
 
+.vuiMenuList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.vuiMenuListButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: #4b5563;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.3;
+  text-align: left;
+  cursor: pointer;
+}
+.vuiMenuListButton:hover {
+  background-color: #f3f4f6;
+  color: #111827;
+}
+.vuiMenuListButton:disabled {
+  color: #9ca3af;
+  cursor: not-allowed;
+  background-color: transparent;
+}
+
+.vuiMenuListButton-isActive {
+  background-color: rgba(37, 99, 235, 0.08);
+  color: #1d4ed8;
+}
+.vuiMenuListButton-isActive:hover {
+  background-color: rgba(37, 99, 235, 0.12);
+  color: #1d4ed8;
+}
+
+.vuiMenuListButton__label {
+  flex: 1 1 auto;
+}
+
 .vuiModalContainer {
   position: fixed;
   top: 0;
@@ -4913,6 +4961,49 @@ h2.react-datepicker__current-month {
   padding: 4px 8px;
 }
 
+.vuiSideList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.vuiSideListButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: #4b5563;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.3;
+  text-align: left;
+  cursor: pointer;
+}
+.vuiSideListButton:hover {
+  background-color: #f3f4f6;
+  color: #111827;
+}
+
+.vuiSideListButton-isActive {
+  background-color: rgba(37, 99, 235, 0.08);
+  color: #1d4ed8;
+}
+.vuiSideListButton-isActive:hover {
+  background-color: rgba(37, 99, 235, 0.12);
+  color: #1d4ed8;
+}
+
+.vuiSideListButton__label {
+  flex: 1 1 auto;
+}
+
 .vuiSpacer {
   flex-shrink: 0;
 }
@@ -5352,79 +5443,6 @@ h2.react-datepicker__current-month {
   color: var(--vui-color-medium-shade);
 }
 
-.vuiStepsVertical {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  max-width: 280px;
-}
-
-.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-width: 2px;
-  border-left-color: var(--vui-color-primary-shade);
-}
-
-.vuiStepVerticalContainer {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.vuiStepVertical {
-  flex-grow: 1;
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  padding: 8px 12px 8px 16px;
-  font-size: 14px;
-  color: var(--vui-color-text);
-  background-color: var(--vui-color-empty-shade);
-  border-radius: 4px;
-  width: 100%;
-}
-.vuiStepVertical:focus {
-  z-index: 2;
-}
-.vuiStepVertical:hover, .vuiStepVertical.vuiStepVertical-isActive {
-  background-color: var(--vui-color-light-shade);
-}
-.vuiStepVertical:hover .vuiStepVerticalContainer__icon .vuiIcon--token, .vuiStepVertical.vuiStepVertical-isActive .vuiStepVerticalContainer__icon .vuiIcon--token {
-  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
-}
-
-.vuiStepVertical__index {
-  flex-shrink: 0;
-  flex-grow: 0;
-  width: 26px;
-  text-align: left;
-}
-
-.vuiStepVertical__content {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.vuiStepVerticalContainer__icon {
-  height: 20px;
-  flex-shrink: 0;
-  flex-grow: 0;
-}
-.vuiStepVerticalContainer__icon .vuiIcon--token {
-  box-shadow: rgba(60, 64, 67, 0.3) 0px 0px 0px 0px, rgba(60, 64, 67, 0.15) 0px 0px 0px 0px;
-  transition: box-shadow 0.2s;
-}
-
 .vuiSummary {
   font-size: 16px;
 }

package/package.json

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

package/src/docs/pages/menuList/MenuList.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { BiAlarm, BiError } from "react-icons/bi";
+import { VuiIcon, VuiMenuList, VuiMenuListButton } from "../../../lib";
+
+export const MenuList = () => {
+  const [isSelected, setIsSelected] = useState(false);
+  const [hasIcon, setHasIcon] = useState(true);
+  const [hasAppend, setHasAppend] = useState(true);
+
+  return (
+    <div style={{ maxWidth: "300px" }}>
+      <VuiMenuList>
+        <VuiMenuListButton onClick={() => setIsSelected((prev) => !prev)} isActive={isSelected}>
+          Click me to toggle active state
+        </VuiMenuListButton>
+
+        <VuiMenuListButton href="http://www.vectara.com">I'm a link</VuiMenuListButton>
+
+        <VuiMenuListButton onClick={() => setHasIcon((prev) => !prev)} icon={hasIcon && <BiAlarm />}>
+          Set notification time
+        </VuiMenuListButton>
+
+        <VuiMenuListButton
+          onClick={() => setHasAppend((prev) => !prev)}
+          append={
+            hasAppend && (
+              <VuiIcon color="danger" size="s">
+                <BiError />
+              </VuiIcon>
+            )
+          }
+        >
+          Appended content
+        </VuiMenuListButton>
+
+        <VuiMenuListButton href="http://www.vectara.com" disabled>
+          I'm a disabled link
+        </VuiMenuListButton>
+
+        <VuiMenuListButton onClick={() => alert("You shouldn't be able to see this")} disabled>
+          I'm a disabled button
+        </VuiMenuListButton>
+      </VuiMenuList>
+    </div>
+  );
+};

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

@@ -0,0 +1,15 @@
+import { MenuList } from "./MenuList";
+
+const MenuListSource = require("!!raw-loader!./MenuList");
+
+export const menuList = {
+  name: "Menu List",
+  path: "/menuList",
+  examples: [
+    {
+      name: "Menu List",
+      component: <MenuList />,
+      source: MenuListSource.default.toString()
+    }
+  ]
+};

package/src/docs/pages/sideList/SideList.tsx

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { BiAlarm, BiError } from "react-icons/bi";
+import { VuiIcon, VuiSideList, VuiSideListButton } from "../../../lib";
+
+export const SideList = () => {
+  const [isSelected, setIsSelected] = useState(false);
+  const [hasIcon, setHasIcon] = useState(true);
+  const [hasAppend, setHasAppend] = useState(true);
+
+  return (
+    <div style={{ maxWidth: "300px" }}>
+      <VuiSideList>
+        <VuiSideListButton onClick={() => setIsSelected((prev) => !prev)} isActive={isSelected}>
+          Click me to toggle active state
+        </VuiSideListButton>
+
+        <VuiSideListButton href="http://www.vectara.com">I'm a link</VuiSideListButton>
+
+        <VuiSideListButton onClick={() => setHasIcon((prev) => !prev)} icon={hasIcon && <BiAlarm />}>
+          Set notification time
+        </VuiSideListButton>
+
+        <VuiSideListButton
+          onClick={() => setHasAppend((prev) => !prev)}
+          append={
+            hasAppend && (
+              <VuiIcon color="danger" size="s">
+                <BiError />
+              </VuiIcon>
+            )
+          }
+        >
+          Appended content
+        </VuiSideListButton>
+      </VuiSideList>
+    </div>
+  );
+};

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

@@ -0,0 +1,15 @@
+import { SideList } from "./SideList";
+
+const SideListSource = require("!!raw-loader!./SideList");
+
+export const sideList = {
+  name: "Side List",
+  path: "/sideList",
+  examples: [
+    {
+      name: "Side List",
+      component: <SideList />,
+      source: SideListSource.default.toString()
+    }
+  ]
+};

package/src/docs/pages/stepsVertical/VerticalSteps.tsx

@@ -1,41 +1,52 @@
 import { useState } from "react";
 import { VuiStepsVertical, StepsVertical } from "../../../lib";
+import { BiChat, BiChip, BiCog, BiInfoCircle, BiWrench } from "react-icons/bi";
 
 export const VerticalSteps = () => {
   const [currentStep, setCurrentStep] = useState(1);
 
   const steps: StepsVertical = [
     {
+      id: "general",
+      icon: <BiInfoCircle />,
       title: "General",
-      status: "danger",
+      hasErrors: true,
       isActive: currentStep === 0,
-      onClick: () => setCurrentStep(0)
+      onSelect: () => setCurrentStep(0)
     },
     {
+      id: "model",
+      icon: <BiChip />,
       title: "Model",
-      status: "complete",
       isActive: currentStep === 1,
-      onClick: () => setCurrentStep(1)
+      onSelect: () => setCurrentStep(1)
     },
     {
+      id: "abilities",
+      icon: <BiWrench />,
       title: "Abilities",
-      status: "incomplete",
       isActive: currentStep === 2,
-      onClick: () => setCurrentStep(2)
+      onSelect: () => setCurrentStep(2)
     },
     {
+      id: "instructions",
+      icon: <BiChat />,
       title: "Instructions",
-      status: "incomplete",
       isActive: currentStep === 3,
-      onClick: () => setCurrentStep(3)
+      onSelect: () => setCurrentStep(3)
     },
     {
+      id: "advanced",
+      icon: <BiCog />,
       title: "Advanced",
-      status: "warning",
       isActive: currentStep === 4,
-      onClick: () => setCurrentStep(4)
+      onSelect: () => setCurrentStep(4)
     }
   ];
 
-  return <VuiStepsVertical steps={steps} />;
+  return (
+    <div style={{ maxWidth: "300px" }}>
+      <VuiStepsVertical steps={steps} />
+    </div>
+  );
 };

package/src/docs/pages.tsx

@@ -48,6 +48,7 @@ import { searchResult } from "./pages/searchResult";
 import { searchSelect } from "./pages/searchSelect";
 import { select } from "./pages/select";
 import { setting } from "./pages/setting";
+import { menuList } from "./pages/menuList";
 import { spacer } from "./pages/spacer";
 import { spinner } from "./pages/spinner";
 import { stat } from "./pages/stat";
@@ -94,25 +95,30 @@ export const categories: Category[] = [
   },
   {
     name: "Layout",
-    pages: [
-      tabs,
-      timeline,
-      accordion,
-      stepsVertical,
-      steps,
-      popover,
-      infoMenu,
-      flex,
-      grid,
-      spacer,
-      card,
-      panel,
-      horizontalRule
-    ]
+    pages: [timeline, accordion, popover, infoMenu, flex, grid, spacer, card, panel, horizontalRule]
+  },
+  {
+    name: "Navigation",
+    pages: [tabs, stepsVertical, steps]
   },
   {
     name: "Content",
-    pages: [badge, status, callout, code, durationBar, icon, image, inProgress, progressBar, spinner, skeleton, stat, text, tooltip]
+    pages: [
+      badge,
+      status,
+      callout,
+      code,
+      durationBar,
+      icon,
+      image,
+      inProgress,
+      progressBar,
+      spinner,
+      skeleton,
+      stat,
+      text,
+      tooltip
+    ]
   },
   {
     name: "Form",
@@ -142,6 +148,7 @@ export const categories: Category[] = [
       copyButton,
       link,
       topicButton,
+      menuList,
       menu,
       optionsButton,
       optionsList,

package/lib/components/stepsVertical/StepVertical.d.ts

@@ -1,11 +0,0 @@
-import { StepVerticalStatus } from "./types";
-export type Props = {
-    title: React.ReactNode;
-    status: StepVerticalStatus;
-    isActive?: boolean;
-    onClick: () => void;
-    index: number;
-    icon?: React.ReactNode;
-    ["data-testid"]?: string;
-};
-export declare const VuiStepVertical: ({ title, status, isActive, onClick, index, icon, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/stepsVertical/StepVertical.js

@@ -1,35 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from "classnames";
-import { VuiIcon } from "../icon/Icon";
-const statusToColor = {
-    complete: "success",
-    current: "primary",
-    incomplete: "subdued",
-    warning: "warning",
-    danger: "danger"
-};
-const statusToClassMap = {
-    complete: "complete",
-    incomplete: "incomplete",
-    warning: "warning",
-    danger: "danger"
-};
-export const VuiStepVertical = (_a) => {
-    var { title, status, isActive, onClick, index, icon } = _a, rest = __rest(_a, ["title", "status", "isActive", "onClick", "index", "icon"]);
-    const classes = classNames("vuiStepVertical", `vuiStepVertical--${statusToClassMap[status]}`, {
-        "vuiStepVertical-isActive": isActive
-    });
-    const finalIcon = (_jsx("div", Object.assign({ className: "vuiStepVerticalContainer__icon" }, { children: icon && (_jsx(VuiIcon, Object.assign({ size: "s", type: "token", color: statusToColor[status !== null && status !== void 0 ? status : "incomplete"] }, { children: icon }))) })));
-    return (_jsxs("button", Object.assign({ className: classes, onClick: onClick }, rest, { children: [_jsxs("div", Object.assign({ className: "vuiStepVertical__index" }, { children: [index, "."] })), _jsx("div", Object.assign({ className: "vuiStepVertical__content" }, { children: _jsx("div", { children: title }) })), finalIcon] })));
-};

package/lib/components/stepsVertical/_index.scss

@@ -1,82 +0,0 @@
-.vuiStepsVertical {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  max-width: 280px;
-}
-
-.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-width: 2px;
-  border-left-color: var(--vui-color-primary-shade);
-}
-
-.vuiStepVerticalContainer {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  gap: $sizeS;
-}
-
-.vuiStepVertical {
-  flex-grow: 1;
-  display: flex;
-  gap: $sizeS;
-  align-items: center;
-  padding: $sizeXs $sizeS $sizeXs $sizeM;
-  font-size: $fontSizeStandard;
-  color: var(--vui-color-text);
-  background-color: var(--vui-color-empty-shade);
-  border-radius: $sizeXxs;
-  width: 100%;
-
-  &:focus {
-    // Ensures focus ring is visible.
-    z-index: 2;
-  }
-
-  &:hover,
-  &.vuiStepVertical-isActive {
-    background-color: var(--vui-color-light-shade);
-
-    .vuiStepVerticalContainer__icon {
-      .vuiIcon--token {
-        box-shadow: $shadowSmallEnd;
-      }
-    }
-  }
-}
-
-.vuiStepVertical__index {
-  flex-shrink: 0;
-  flex-grow: 0;
-  width: 26px;
-  text-align: left;
-}
-
-.vuiStepVertical__content {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: $sizeXs;
-}
-
-.vuiStepVerticalContainer__icon {
-  // Set consistent size so that empty icons still take up space
-  // and the button height doesn't change when there's no icon.
-  height: 20px;
-  flex-shrink: 0;
-  flex-grow: 0;
-
-  .vuiIcon--token {
-    box-shadow: $shadowSmallStart;
-    transition: box-shadow $transitionSpeed;
-  }
-}