@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';
// @ts-expect-error -- mui doesn't support ESM
import muiClickAwayListenerPkg from '@mui/material/node/ClickAwayListener/index.js';
// @ts-expect-error -- mui doesn't support ESM
import muiMenuListPkg from '@mui/material/node/MenuList/index.js';
// @ts-expect-error -- mui doesn't support ESM
import muiPaperPkg from '@mui/material/node/Paper/index.js';
// @ts-expect-error -- mui doesn't support ESM
import muiPopperPkg from '@mui/material/node/Popper/index.js';
import { Button } from './button.js';
import { interopDefault } from '@navinc/utils';
const ClickAwayListener = interopDefault(muiClickAwayListenerPkg);
const MenuList = interopDefault(muiMenuListPkg);
const Paper = interopDefault(muiPaperPkg);
const Popper = interopDefault(muiPopperPkg);
const StyledButton = styled(Button).withConfig({ displayName: "brc-sc-StyledButton", componentId: "brc-sc-5u2bhg" }) `
  display: block;
  width: 100%;
  margin: 0;
`;
// Default styling
const StyledPopper = styled(Popper).withConfig({ displayName: "brc-sc-StyledPopper", componentId: "brc-sc-mu7tui" }) `
  .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;
  }
`;
/** @deprecated use the wayfinder dropdown from @navinc/base-react-components/wayfinder instead */
export const MenuItem = (props) => {
    return _jsx(StyledButton, Object.assign({ variation: "noOutline", role: "menuitem" }, props));
};
const UnstyledMenu = (_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) {
            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- not sure if it is safe to remove the optional chaining
            anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.focus();
        }
        prevOpen.current = open;
    }, [anchorEl, open]);
    const handleClose = (event) => {
        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- not sure if it is safe to remove the optional chaining
        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 }) }) }) })));
};
/**
 * @deprecated use the wayfinder dropdown from @navinc/base-react-components/wayfinder instead
A basic menu opens _below_ the anchor element by default. When close to a screen edge, a basic menu vertically realigns to make sure that all menu items are completely visible.

The `onClose` callback is called when pressing <kbd>Esc</kbd>, <kbd>Tab</kbd>, or clicking outside the menu.

### Basic usage

<ol style="list-style: decimal;">
  <li>Define a <code>anchorEl</code> to set the position of the menu. The anchor element (ie. button) is <em>NOT</em> part of this component.</li>
  <li>Bind <code>open</code> and <code>onClose</code> props.</li>
  <li>Use <code>MenuItem</code> as children for default button styling. Set a <code>tabIndex</code> for each item to enable keyboard navigation. Children accepts anything for more customized usage. If <code>MenuItem</code> or button is not the first child element, then apply <code>autoFocus</code> prop on the child element you would like to first focus on when menu is opened.</li>
  <li>The menu aligns to the <em>bottom right</em> of the <code>anchorEl</code> by default. This can be customized using the <code>placement</code> prop.</li>
</ol>

 **/
export const Menu = styled(UnstyledMenu).withConfig({ displayName: "brc-sc-Menu", componentId: "brc-sc-1dhafdf" }) ``;
//# sourceMappingURL=menu.js.map