@navinc/base-react-components/dist/menu.js

Nav's Pattern 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 } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import styled from 'styled-components';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import MenuList from '@mui/material/MenuList';
import Paper from '@mui/material/Paper';
import Popper from '@mui/material/Popper';
import { Button } from './button';
const StyledButton = styled(Button).withConfig({ displayName: "brc-sc-StyledButton", componentId: "brc-sc-1otoko7" }) `
  display: block;
  width: 100%;
  margin: 0;
`;
// Default styling
const StyledPopper = styled(Popper).withConfig({ displayName: "brc-sc-StyledPopper", componentId: "brc-sc-1nt0xsl" }) `
  .menu {
    background-color: ${({ theme }) => theme.navNeutralLight};
    box-shadow: 0 2px 4px -2px rgb(0 0 0 / 25%);
    border: none;
    border-radius: 4px;
    padding: 8px;
    margin: 4px 0;
  }

  .menu-list {
    padding: 0;
  }
`;
export const MenuItem = (props) => {
    return _jsx(StyledButton, Object.assign({ variation: "noOutline", role: "menuitem" }, props));
};
const _Menu = (_a) => {
    var { children, onClose, placement = 'bottom-end', 'data-testid': dataTestId = 'menu-wrapper' } = _a, popperProps = __rest(_a, ["children", "onClose", "placement", 'data-testid']);
    const anchorEl = popperProps.anchorEl;
    const open = popperProps.open;
    const prevOpen = useRef(open);
    // return focus to the anchor element when we transitioned from !open -> open
    useEffect(() => {
        if (prevOpen.current === true && open === false) {
            anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.focus();
        }
        prevOpen.current = open;
    }, [anchorEl, open]);
    const handleClose = (event) => {
        if (anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.contains(event.target))
            return;
        onClose === null || onClose === void 0 ? void 0 : onClose(event);
    };
    const handleListKeyDown = (event) => {
        if (event.key === 'Tab') {
            event.preventDefault();
            handleClose(event);
        }
        else if (event.key === 'Escape') {
            handleClose(event);
        }
    };
    return (_jsx(StyledPopper, Object.assign({ placement: placement, "data-testid": dataTestId }, popperProps, { children: _jsx(ClickAwayListener, { onClickAway: handleClose, children: _jsx(Paper, { className: "menu", "data-testid": "menu", children: _jsx(MenuList, { autoFocusItem: open, onKeyDown: handleListKeyDown, className: "menu-list", "data-testid": "menu-list", children: children }) }) }) })));
};
export const Menu = styled(_Menu).withConfig({ displayName: "brc-sc-Menu", componentId: "brc-sc-ok3hj0" }) ``;
//# sourceMappingURL=menu.js.map