@gravity-ui/uikit
Version:
Gravity UI base styling and components
50 lines (49 loc) • 2.8 kB
JavaScript
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BreadcrumbsDropdownMenu = BreadcrumbsDropdownMenu;
exports.useMenuContext = useMenuContext;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("@floating-ui/react");
const Button_1 = require("../Button/index.js");
const Popup_1 = require("../Popup/index.js");
const i18n_1 = tslib_1.__importDefault(require("./i18n/index.js"));
const utils_1 = require("./utils.js");
const menuContext = React.createContext({
isMenu: false,
activeIndex: null,
getItemProps: (props = {}) => props,
listItemsRef: { current: [] },
popupStyle: undefined,
});
function BreadcrumbsDropdownMenu({ children, disabled, popupPlacement, popupStyle, }) {
const [reference, setReference] = React.useState(null);
const [floating, setFloating] = React.useState(null);
const [activeIndex, setActiveIndex] = React.useState(null);
const [open, setOpen] = React.useState(false);
const context = (0, react_1.useFloatingRootContext)({
open,
onOpenChange: setOpen,
elements: { reference, floating },
});
const listItemsRef = React.useRef([]);
const listNavigation = (0, react_1.useListNavigation)(context, {
enabled: !disabled,
listRef: listItemsRef,
activeIndex,
onNavigate: setActiveIndex,
loop: true,
});
const dismiss = (0, react_1.useDismiss)(context, { enabled: !disabled });
const click = (0, react_1.useClick)(context, { enabled: !disabled });
const role = (0, react_1.useRole)(context, { role: 'menu' });
const interactions = [click, dismiss, listNavigation, role];
const { getReferenceProps, getItemProps } = (0, react_1.useInteractions)(interactions);
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.b)('menu'), children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { ref: setReference, ...getReferenceProps(), title: (0, i18n_1.default)('label_more'), "aria-label": (0, i18n_1.default)('label_more'), className: (0, utils_1.b)('more-button'), size: "s", view: "flat", disabled: disabled, children: (0, jsx_runtime_1.jsx)(Button_1.Button.Icon, { children: "..." }) }), (0, jsx_runtime_1.jsx)(Popup_1.Popup, { floatingContext: context, floatingRef: setFloating, floatingInteractions: interactions, placement: popupPlacement, className: (0, utils_1.b)('menu-popup'), children: (0, jsx_runtime_1.jsx)(menuContext.Provider, { value: { isMenu: true, getItemProps, listItemsRef, activeIndex, popupStyle }, children: children }) })] }));
}
function useMenuContext() {
return React.useContext(menuContext);
}
//# sourceMappingURL=BreadcrumbsDropdownMenu.js.map