@engie-group/fluid-design-system-react/lib/components/menu/root/NJMenuRoot.js

Fluid Design System React

import { jsx } from 'react/jsx-runtime';
import React__default from 'react';
import '../../popover/anchor/NJPopoverAnchor.js';
import { usePopoverContext } from '../../popover/NJPopoverContext.js';
import '../../popover/NJPopoverInteractionContext.js';
import { NJPopoverInteractions } from '../../popover/interactions/NJPopoverInteractions.js';
import { NJPopoverRoot } from '../../popover/root/NJPopoverRoot.js';
import { NJMenuContext } from '../NJMenuContext.js';
import { flip, offset, size } from '../../../node_modules/.pnpm/@floating-ui_react-dom@2.1.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';

const NJMenuRoot = (props) => {
    const { children, floatingRole, ...popoverProps } = props;
    const floatingOptions = {
        placement: 'bottom-start',
        middleware: [
            flip(),
            offset(8),
            size({
                apply({ rects, elements }) {
                    Object.assign(elements.floating.style, {
                        minWidth: `${rects.reference.width}px`
                    });
                },
                padding: 10
            })
        ]
    };
    return (jsx(NJPopoverRoot, { ...popoverProps, useFloatingOptions: floatingOptions, children: jsx(MenuInteractions, { floatingRole: floatingRole, children: children }) }));
};
const MenuInteractions = (props) => {
    const { floatingRole, children } = props;
    const [activeIndex, setActiveIndex] = React__default.useState(null);
    const elementsRef = React__default.useRef([]);
    const labelsRef = React__default.useRef([]);
    const listNavigation = {
        listRef: elementsRef,
        activeIndex,
        onNavigate: setActiveIndex,
        loop: true
    };
    const { isOpen } = usePopoverContext();
    const typeahead = {
        listRef: labelsRef,
        onMatch: isOpen ? setActiveIndex : undefined,
        activeIndex
    };
    return (jsx(NJPopoverInteractions, { click: true, dismiss: true, role: { role: floatingRole ?? 'menu' }, listNavigation: listNavigation, typeahead: typeahead, children: jsx(NJMenuContext.Provider, { value: {
                listElementsRef: elementsRef,
                listLabelsRef: labelsRef,
                listActiveIndex: activeIndex
            }, children: children }) }));
};

export { NJMenuRoot };