@vectara/vectara-ui 19.5.0 → 19.6.0

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

@@ -7,5 +7,8 @@ type Props = {
     options?: OptionListItem<string>[];
     after?: React.ReactNode;
 };
-export declare const VuiAccountButton: ({ userName, email, info, options, after, ...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,9 +23,12 @@ 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) => {
+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;
@@ -33,4 +36,4 @@ export const VuiAccountButton = (_a) => {
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "19.5.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,7 +1,9 @@
+import { useRef } from "react";
 import { BiLogOut, BiTransferAlt, BiUser } from "react-icons/bi";
 import {
   OptionListItem,
   VuiAccountButton,
+  AccountButtonHandle,
   VuiButtonSecondary,
   VuiCopyButton,
   VuiFlexContainer,
@@ -10,6 +12,8 @@ import {
 } from "../../../lib";
 
 export const AccountButton = () => {
+  const accountButtonRef = useRef<AccountButtonHandle>(null);
+
   const options: OptionListItem<string>[] = [
     {
       value: "switch",
@@ -52,6 +56,7 @@ export const AccountButton = () => {
 
   return (
     <VuiAccountButton
+      ref={accountButtonRef}
       userName="Falcor"
       email="falcor@neverendingstory.com"
       options={options}
@@ -62,7 +67,7 @@ export const AccountButton = () => {
             fullWidth
             size="s"
             color="neutral"
-            onClick={() => console.log("Clicked")}
+            onClick={() => accountButtonRef.current?.closeMenu()}
             icon={
               <VuiIcon>
                 <BiUser />