@vectara/vectara-ui 19.4.0 → 19.6.0

package/lib/components/accountButton/AccountButton.d.ts

@@ -5,6 +5,10 @@ type Props = {
     email: string;
     info?: InfoListType;
     options?: OptionListItem<string>[];
+    after?: React.ReactNode;
 };
-export declare const VuiAccountButton: ({ userName, email, info, options, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export type AccountButtonHandle = {
+    closeMenu: () => void;
+};
+export declare const VuiAccountButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<AccountButtonHandle>>;
 export {};

package/lib/components/accountButton/AccountButton.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { BiExpandVertical } from "react-icons/bi";
 import classNames from "classnames";
 import { VuiIcon } from "../icon/Icon";
@@ -23,14 +23,17 @@ const Button = forwardRef((_a, ref) => {
     });
     return (_jsx("button", Object.assign({ className: classes, type: "button" }, rest, { ref: ref, "aria-expanded": isSelected, "aria-haspopup": "menu" }, { children: children })));
 });
-export const VuiAccountButton = (_a) => {
-    var { userName, email, info, options } = _a, rest = __rest(_a, ["userName", "email", "info", "options"]);
+export const VuiAccountButton = forwardRef((_a, ref) => {
+    var { userName, email, info, options, after } = _a, rest = __rest(_a, ["userName", "email", "info", "options", "after"]);
     const [isOpen, setIsOpen] = useState(false);
+    useImperativeHandle(ref, () => ({
+        closeMenu: () => setIsOpen(false)
+    }));
     const areUnique = userName && email && userName !== email;
     const primaryLabel = areUnique ? userName : email;
     const secondaryLabel = areUnique ? email : null;
     const button = (_jsxs(Button, Object.assign({ isSelected: isOpen }, rest, { children: [_jsxs("div", Object.assign({ className: "vuiAccountButton__labels" }, { children: [_jsx("div", Object.assign({ className: "vuiAccountButton__primaryLabel" }, { children: primaryLabel })), secondaryLabel && _jsx("div", Object.assign({ className: "vuiAccountButton__secondaryLabel" }, { children: secondaryLabel }))] })), _jsx(VuiIcon, Object.assign({ size: "s", color: "neutral", className: "vuiAccountButton__icon" }, { children: _jsx(BiExpandVertical, {}) }))] })));
-    return (_jsx(VuiInfoMenu, Object.assign({ isOpen: isOpen, setIsOpen: setIsOpen, button: button, info: info, anchorSide: "rightUp" }, { children: options && (_jsx(VuiOptionsList, { size: "l", onSelectOption: () => {
+    return (_jsx(VuiInfoMenu, Object.assign({ isOpen: isOpen, setIsOpen: setIsOpen, button: button, info: info, infoAfter: after, anchorSide: "rightUp" }, { children: options && (_jsx(VuiOptionsList, { size: "l", onSelectOption: () => {
                 setIsOpen(false);
             }, options: options })) })));
-};
+});

package/lib/components/index.d.ts

@@ -1,5 +1,5 @@
 import { VuiAccordion } from "./accordion/Accordion";
-import { VuiAccountButton } from "./accountButton/AccountButton";
+import { VuiAccountButton, AccountButtonHandle } from "./accountButton/AccountButton";
 import { VuiAppContent } from "./app/AppContent";
 import { VuiAppHeader } from "./app/AppHeader";
 import { VuiAppLayout } from "./app/AppLayout";
@@ -116,5 +116,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, BarChartSeries, ComposedSeries, LineChartSeries, LineChartVariant, ScatterSeries, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, ComposerFileError, ComposerShortcutApi, ComposerShortcutHandler, ComposerSubmission, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, PatchColor, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabNavigatorRoute, TabSize, Tree, TreeItem };
+export type { AnchorSide, AppContentPadding, BarChartSeries, ComposedSeries, LineChartSeries, LineChartVariant, ScatterSeries, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, ComposerFileError, ComposerShortcutApi, ComposerShortcutHandler, ComposerSubmission, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, PatchColor, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabNavigatorRoute, TabSize, Tree, TreeItem, AccountButtonHandle };
 export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CHART_PALETTE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, 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, VuiBarChart, VuiComposedChart, VuiLineChart, VuiPieChart, VuiScatterChart, VuiSparkline, VuiTreeMap, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, 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, VuiPatch, 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/infoMenu/InfoMenu.d.ts

@@ -2,6 +2,7 @@ import { InfoListType } from "../infoList/InfoList";
 import { Props as PopoverProps } from "../popover/Popover";
 type Props = PopoverProps & {
     info?: InfoListType;
+    infoAfter?: React.ReactNode;
 };
-export declare const VuiInfoMenu: ({ isOpen, setIsOpen, button, info, children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiInfoMenu: ({ isOpen, setIsOpen, button, info, infoAfter, children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/infoMenu/InfoMenu.js

@@ -9,11 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { VuiInfoList } from "../infoList/InfoList";
 import { VuiPopover } from "../popover/Popover";
 export const VuiInfoMenu = (_a) => {
-    var { isOpen, setIsOpen, button, info, children } = _a, rest = __rest(_a, ["isOpen", "setIsOpen", "button", "info", "children"]);
+    var { isOpen, setIsOpen, button, info, infoAfter, children } = _a, rest = __rest(_a, ["isOpen", "setIsOpen", "button", "info", "infoAfter", "children"]);
     return (_jsx(VuiPopover, Object.assign({ className: "vuiInfoMenu", isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), button: button, header: info &&
-            info.length > 0 && (_jsx("div", Object.assign({ className: "vuiInfoMenuHeader" }, { children: _jsx(VuiInfoList, { info: info }) }))) }, rest, { children: children })));
+            info.length > 0 && (_jsxs("div", Object.assign({ className: "vuiInfoMenuHeader" }, { children: [_jsx(VuiInfoList, { info: info }), infoAfter] }))) }, rest, { children: children })));
 };

package/package.json

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

package/src/docs/pages/accountButton/AccountButton.tsx

@@ -1,16 +1,28 @@
-import { BiLogOut, BiUser } from "react-icons/bi";
-import { OptionListItem, VuiAccountButton, VuiCopyButton, VuiFlexContainer, VuiFlexItem, VuiIcon } from "../../../lib";
+import { useRef } from "react";
+import { BiLogOut, BiTransferAlt, BiUser } from "react-icons/bi";
+import {
+  OptionListItem,
+  VuiAccountButton,
+  AccountButtonHandle,
+  VuiButtonSecondary,
+  VuiCopyButton,
+  VuiFlexContainer,
+  VuiFlexItem,
+  VuiIcon
+} from "../../../lib";
 
 export const AccountButton = () => {
+  const accountButtonRef = useRef<AccountButtonHandle>(null);
+
   const options: OptionListItem<string>[] = [
     {
-      value: "edit",
-      label: "Manage account",
+      value: "switch",
+      label: "Switch accounts",
       color: "primary",
-      testId: "profileOption",
+      testId: "switchOption",
       icon: (
         <VuiIcon>
-          <BiUser />
+          <BiTransferAlt />
         </VuiIcon>
       )
     },
@@ -42,5 +54,30 @@ export const AccountButton = () => {
     }
   ];
 
-  return <VuiAccountButton userName="Falcor" email="falcor@neverendingstory.com" options={options} info={info} />;
+  return (
+    <VuiAccountButton
+      ref={accountButtonRef}
+      userName="Falcor"
+      email="falcor@neverendingstory.com"
+      options={options}
+      info={info}
+      after={
+        <div style={{ paddingTop: "12px" }}>
+          <VuiButtonSecondary
+            fullWidth
+            size="s"
+            color="neutral"
+            onClick={() => accountButtonRef.current?.closeMenu()}
+            icon={
+              <VuiIcon>
+                <BiUser />
+              </VuiIcon>
+            }
+          >
+            Manage account
+          </VuiButtonSecondary>
+        </div>
+      }
+    />
+  );
 };