@gravity-ui/uikit
Version:
Gravity UI base styling and components
45 lines (44 loc) • 2.37 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useClick, useDismiss, useFloatingRootContext, useInteractions, useListNavigation, useRole, } from '@floating-ui/react';
import { Button } from "../Button/index.js";
import { Popup } from "../Popup/index.js";
import i18n from "./i18n/index.js";
import { b } from "./utils.js";
const menuContext = React.createContext({
isMenu: false,
activeIndex: null,
getItemProps: (props = {}) => props,
listItemsRef: { current: [] },
popupStyle: undefined,
});
export 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 = useFloatingRootContext({
open,
onOpenChange: setOpen,
elements: { reference, floating },
});
const listItemsRef = React.useRef([]);
const listNavigation = useListNavigation(context, {
enabled: !disabled,
listRef: listItemsRef,
activeIndex,
onNavigate: setActiveIndex,
loop: true,
});
const dismiss = useDismiss(context, { enabled: !disabled });
const click = useClick(context, { enabled: !disabled });
const role = useRole(context, { role: 'menu' });
const interactions = [click, dismiss, listNavigation, role];
const { getReferenceProps, getItemProps } = useInteractions(interactions);
return (_jsxs("div", { className: b('menu'), children: [_jsx(Button, { ref: setReference, ...getReferenceProps(), title: i18n('label_more'), "aria-label": i18n('label_more'), className: b('more-button'), size: "s", view: "flat", disabled: disabled, children: _jsx(Button.Icon, { children: "..." }) }), _jsx(Popup, { floatingContext: context, floatingRef: setFloating, floatingInteractions: interactions, placement: popupPlacement, className: b('menu-popup'), children: _jsx(menuContext.Provider, { value: { isMenu: true, getItemProps, listItemsRef, activeIndex, popupStyle }, children: children }) })] }));
}
export function useMenuContext() {
return React.useContext(menuContext);
}
//# sourceMappingURL=BreadcrumbsDropdownMenu.js.map