@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
95 lines (94 loc) • 4.61 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;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { cloneElement, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { VuiPortal } from "../portal/Portal";
import { FocusOn } from "react-focus-on";
const calculatePopoverPosition = (button, anchorSide) => {
if (!button)
return undefined;
const buttonRect = button.getBoundingClientRect();
const top = buttonRect.bottom + 2 + document.documentElement.scrollTop;
const left = buttonRect.left;
if (anchorSide === "left") {
return { top: `${top}px`, left: `${left}px` };
}
const right = window.innerWidth - buttonRect.right;
return { top: `${top}px`, right: `${right}px` };
};
export const VuiPopover = (_a) => {
var { button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide = "right" } = _a, rest = __rest(_a, ["button", "children", "className", "header", "isOpen", "setIsOpen", "padding", "anchorSide"]);
const returnFocusElRef = useRef(null);
const buttonRef = useRef(null);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [positionMarker, setPositionMarker] = useState(0);
const button = cloneElement(originalButton, {
isSelected: isOpen,
onClick: () => {
setIsOpen(!isOpen);
},
ref: (node) => {
buttonRef.current = node;
}
});
useEffect(() => {
const updatePosition = () => {
// Force a re-render when the window resizes.
setPositionMarker(Date.now());
};
window.removeEventListener("resize", updatePosition);
// Mostly defensive to prevent weird bugs where the popover ends
// up being rendered partially off-screen.
window.removeEventListener("scroll", updatePosition);
return () => {
window.removeEventListener("resize", updatePosition);
window.removeEventListener("scroll", updatePosition);
};
}, []);
useEffect(() => {
var _a;
if (isOpen) {
returnFocusElRef.current = document.activeElement;
}
else {
(_a = returnFocusElRef.current) === null || _a === void 0 ? void 0 : _a.focus();
returnFocusElRef.current = null;
}
}, [isOpen]);
// Allow contents to respond to blur events before unmounting, and also
// enable focus to properly return to the button when the user clicks
// outside of the popover.
const onCloseDelayed = () => {
window.setTimeout(() => {
setIsOpen(false);
}, 0);
};
// Always keep menu position up to date. If we tried to cache this inside
// a useEffect based on isOpen then there'd be a flicker if the width
// of the button changes.
const position = calculatePopoverPosition(buttonRef.current, anchorSide);
const classes = classNames("vuiPopover", className);
const contentClasses = classNames("vuiPopoverContent", {
"vuiPopoverContent--padding": padding
});
return (_jsxs(_Fragment, { children: [button, _jsx(VuiPortal, { children: isOpen && position && (_jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: onCloseDelayed,
// Enable manual focus return to work.
returnFocus: false,
// Enable focus on contents when it's open,
// but enable manual focus return to work when it's closed.
autoFocus: isOpen,
// Enable scrolling of the page.
scrollLock: false,
// Enable scrolling of the page.
preventScrollOnFocus: false }, { children: _jsxs("div", Object.assign({ className: classes, style: position }, rest, { children: [header && typeof header === "string" ? _jsx("div", Object.assign({ className: "vuiPopoverTitle" }, { children: header })) : header, children && _jsx("div", Object.assign({ className: contentClasses }, { children: children }))] })) }))) })] }));
};