@engie-group/fluid-design-system-react/lib/components/menu/item/NJMenuItem.js

Fluid Design System React

import { jsx } from 'react/jsx-runtime';
import { useListItem, useMergeRefs } from '../../../node_modules/.pnpm/@floating-ui_react@0.27.3_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react/dist/floating-ui.react.js';
import React__default from 'react';
import { labelFromChildren } from '../../../utils/label-from-children.js';
import { isDefaultComponent } from '../../../utils/typeHelpers.js';
import { NJListItem } from '../../list/item/NJListItem.js';
import '../../list/root/NJListRoot.js';
import '../../popover/anchor/NJPopoverAnchor.js';
import { usePopoverContext } from '../../popover/NJPopoverContext.js';
import { usePopoverInteractionContext } from '../../popover/NJPopoverInteractionContext.js';
import { useMenuContext } from '../NJMenuContext.js';
import { NJMenuItemContext } from '../NJMenuItemContext.js';
import { useMenuSelectionContext } from '../NJMenuSelectionContext.js';

const NJMenuItem = React__default.forwardRef((props, forwardedRef) => {
    // Fixme: what happens to unused extracted props ?
    const { children: baseChildren, disabled, selected, leading, trailing, leadingIcon, label: baseLabel, asChild, ...htmlProps } = props;
    const menuContext = useMenuContext();
    const label = baseLabel ?? labelFromChildren(baseChildren);
    const { index, ref } = useListItem({ label: disabled ? null : label });
    const isActive = menuContext.listActiveIndex === index;
    const { onOpen: changeOpen } = usePopoverContext();
    const popoverInteractionContext = usePopoverInteractionContext();
    const selectionContext = useMenuSelectionContext();
    const isSelected = selectionContext?.selectedIndexes.includes(index) ?? false;
    const handleClick = () => {
        selectionContext?.selectItem(index);
        if (selectionContext?.closeOnSelect) {
            changeOpen(false);
        }
    };
    let children = baseChildren;
    if (isDefaultComponent(asChild)) {
        children = (jsx("button", { type: "button", ref: useMergeRefs([forwardedRef, ref]), tabIndex: isActive ? 0 : -1, ...htmlProps, onClick: (e) => {
                htmlProps.onClick?.(e);
                handleClick();
            }, children: baseChildren }));
    }
    else {
        const child = React__default.Children.only(baseChildren);
        const childRef = 'ref' in child ? child.ref : undefined;
        const childTabIndex = 'tabIndex' in child ? child.tabIndex : undefined;
        children = React__default.cloneElement(child, {
            ref: useMergeRefs([childRef, ref]),
            tabIndex: childTabIndex ?? (isActive ? 0 : -1),
            ...popoverInteractionContext?.getItemProps({
                onClick: (e) => {
                    child.props.onClick?.(e);
                    handleClick();
                }
            })
        });
    }
    return (jsx(NJMenuItemContext.Provider, { value: { index }, children: jsx(NJListItem, { role: "option", disabled: disabled, selected: selected ?? isSelected, leadingIcon: leadingIcon, leading: leading, trailing: trailing, ...popoverInteractionContext?.getItemProps(), wrapperAsChild: true, children: children }) }));
});
NJMenuItem.displayName = 'NJMenuItem';

export { NJMenuItem };