@vectara/vectara-ui/lib/components/accountButton/AccountButton.js

Vectara's design system, codified as a React and Sass component library

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 { forwardRef, useState } from "react";
import { BiExpandVertical } from "react-icons/bi";
import classNames from "classnames";
import { VuiIcon } from "../icon/Icon";
import { VuiInfoMenu } from "../infoMenu/InfoMenu";
import { VuiOptionsList } from "../optionsList/OptionsList";
const Button = forwardRef((_a, ref) => {
    var { children, isSelected } = _a, rest = __rest(_a, ["children", "isSelected"]);
    const classes = classNames("vuiAccountButton", {
        "vuiAccountButton-isActive": isSelected
    });
    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"]);
    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: () => {
                setIsOpen(false);
            }, options: options })) })));
};