@navinc/base-react-components
Version:
Nav's Pattern Library
79 lines (78 loc) • 3.86 kB
JavaScript
;
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Menu = exports.MenuItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const ClickAwayListener_1 = __importDefault(require("@mui/material/ClickAwayListener"));
const MenuList_1 = __importDefault(require("@mui/material/MenuList"));
const Paper_1 = __importDefault(require("@mui/material/Paper"));
const Popper_1 = __importDefault(require("@mui/material/Popper"));
const button_1 = require("./button");
const StyledButton = (0, styled_components_1.default)(button_1.Button).withConfig({ displayName: "brc-sc-StyledButton", componentId: "brc-sc-1otoko7" }) `
display: block;
width: 100%;
margin: 0;
`;
// Default styling
const StyledPopper = (0, styled_components_1.default)(Popper_1.default).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;
}
`;
const MenuItem = (props) => {
return (0, jsx_runtime_1.jsx)(StyledButton, Object.assign({ variation: "noOutline", role: "menuitem" }, props));
};
exports.MenuItem = MenuItem;
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 = (0, react_1.useRef)(open);
// return focus to the anchor element when we transitioned from !open -> open
(0, react_1.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 ((0, jsx_runtime_1.jsx)(StyledPopper, Object.assign({ placement: placement, "data-testid": dataTestId }, popperProps, { children: (0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, { onClickAway: handleClose, children: (0, jsx_runtime_1.jsx)(Paper_1.default, { className: "menu", "data-testid": "menu", children: (0, jsx_runtime_1.jsx)(MenuList_1.default, { autoFocusItem: open, onKeyDown: handleListKeyDown, className: "menu-list", "data-testid": "menu-list", children: children }) }) }) })));
};
exports.Menu = (0, styled_components_1.default)(_Menu).withConfig({ displayName: "brc-sc-Menu", componentId: "brc-sc-ok3hj0" }) ``;
//# sourceMappingURL=menu.js.map