@vectara/vectara-ui 19.3.1 → 19.5.0

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

@@ -5,6 +5,7 @@ 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 declare const VuiAccountButton: ({ userName, email, info, options, after, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/accountButton/AccountButton.js

@@ -24,13 +24,13 @@ 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"]);
+    var { userName, email, info, options, after } = _a, rest = __rest(_a, ["userName", "email", "info", "options", "after"]);
     const [isOpen, setIsOpen] = useState(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/app/appSideNav/AppSideNavLink.d.ts

@@ -2,4 +2,5 @@ import { TreeItem } from "../types";
 export declare const VuiAppSideNavLink: import("react").ForwardRefExoticComponent<Pick<TreeItem, "className" | "path" | "name" | "isSelected" | "iconBefore" | "iconAfter"> & {
     onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
     iconAfterAlignEnd?: boolean | undefined;
+    after?: React.ReactNode;
 } & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/lib/components/app/appSideNav/AppSideNavLink.js

@@ -17,12 +17,12 @@ import { VuiIcon } from "../../icon/Icon";
 import { useVuiContext } from "../../context/Context";
 import { forwardRef } from "react";
 export const VuiAppSideNavLink = forwardRef((_a, ref) => {
-    var { path, onClick, name, iconBefore, iconAfter, isSelected, className, iconAfterAlignEnd } = _a, rest = __rest(_a, ["path", "onClick", "name", "iconBefore", "iconAfter", "isSelected", "className", "iconAfterAlignEnd"]);
+    var { path, onClick, name, iconBefore, iconAfter, after, isSelected, className, iconAfterAlignEnd } = _a, rest = __rest(_a, ["path", "onClick", "name", "iconBefore", "iconAfter", "after", "isSelected", "className", "iconAfterAlignEnd"]);
     const { createLink, getPath } = useVuiContext();
     const classes = classNames("vuiAppSideNavLink", {
         "vuiAppSideNavLink--active": isSelected !== null && isSelected !== void 0 ? isSelected : path === getPath()
     }, className);
-    const content = iconBefore || iconAfter ? (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [iconBefore && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: iconBefore })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: name })), iconAfter && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false, className: iconAfterAlignEnd ? "vuiAppSideNavLink__iconAfter--alignEnd" : undefined }, { children: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: iconAfter })) })))] }))) : (name);
+    const content = iconBefore || iconAfter ? (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [iconBefore && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: iconBefore })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: name })), (iconAfter || after) && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false, className: iconAfterAlignEnd ? "vuiAppSideNavLink__iconAfter--alignEnd" : undefined }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [after, iconAfter && _jsx(VuiIcon, Object.assign({ size: "s" }, { children: iconAfter }))] })) })))] }))) : (name);
     if (!path) {
         return (_jsx("button", Object.assign({ className: classes, onClick: onClick, type: "button", ref: ref }, rest, { children: content })));
     }

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.3.1",
+  "version": "19.5.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,24 @@
-import { BiLogOut, BiUser } from "react-icons/bi";
-import { OptionListItem, VuiAccountButton, VuiCopyButton, VuiFlexContainer, VuiFlexItem, VuiIcon } from "../../../lib";
+import { BiLogOut, BiTransferAlt, BiUser } from "react-icons/bi";
+import {
+  OptionListItem,
+  VuiAccountButton,
+  VuiButtonSecondary,
+  VuiCopyButton,
+  VuiFlexContainer,
+  VuiFlexItem,
+  VuiIcon
+} from "../../../lib";
 
 export const AccountButton = () => {
   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 +50,29 @@ export const AccountButton = () => {
     }
   ];
 
-  return <VuiAccountButton userName="Falcor" email="falcor@neverendingstory.com" options={options} info={info} />;
+  return (
+    <VuiAccountButton
+      userName="Falcor"
+      email="falcor@neverendingstory.com"
+      options={options}
+      info={info}
+      after={
+        <div style={{ paddingTop: "12px" }}>
+          <VuiButtonSecondary
+            fullWidth
+            size="s"
+            color="neutral"
+            onClick={() => console.log("Clicked")}
+            icon={
+              <VuiIcon>
+                <BiUser />
+              </VuiIcon>
+            }
+          >
+            Manage account
+          </VuiButtonSecondary>
+        </div>
+      }
+    />
+  );
 };