@engie-group/fluid-design-system-react/lib/components/fab/NJFabMenu.js

Fluid Design System React

import { jsx, jsxs } from 'react/jsx-runtime';
import { safePolygon } 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, { useEffect, useCallback } from 'react';
import { useStateControl } from '../../utils/hook.js';
import { Utils } from '../../utils/util.js';
import { NJPopoverAnchor } from '../popover/anchor/NJPopoverAnchor.js';
import { NJPopoverContent } from '../popover/content/NJPopoverContent.js';
import { NJPopoverInteractions } from '../popover/interactions/NJPopoverInteractions.js';
import { NJPopoverRoot } from '../popover/root/NJPopoverRoot.js';
import '../popover/NJPopoverContext.js';
import '../popover/NJPopoverInteractionContext.js';
import { NJFab } from './NJFab.js';

const NJFabMenu = React__default.forwardRef(({ icon = 'add', scale, disabled, noRotate, variant, title, label, onClick, children, dataPlacement, className, opened, initialOpened, onOpen, openOnHover, buttonRef: customButtonRef, listRef, ...htmlProps }, forwardedRef) => {
    const [isOpened, setIsOpened] = useStateControl(initialOpened, opened);
    const fabMenuClass = Utils.classNames('nj-fab-menu', className);
    const fabActionClass = Utils.classNames('nj-fab__actions', {
        ['nj-fab__actions--sm']: scale === 'sm',
        [`nj-fab__actions--${dataPlacement}`]: !!dataPlacement
    });
    const buttonRef = React__default.useRef(null);
    useEffect(() => {
        if (isOpened) {
            buttonRef.current?.classList.add('active');
        }
        else {
            buttonRef.current?.classList.remove('active');
        }
    }, [isOpened]);
    const handleOpenChange = useCallback((isOpen) => {
        setIsOpened(isOpen);
        onOpen?.(isOpen);
    }, [onOpen]);
    const onMenuClick = useCallback((e) => {
        onClick?.(e);
        setIsOpened(!isOpened);
    }, [onClick, isOpened]);
    const FabMenuItems = React__default.Children.map(children, (child, index) => {
        return (jsx("li", { className: "nj-fab__item", children: React__default.cloneElement(child) }, index));
    });
    return (jsx(NJPopoverRoot, { useFloatingOptions: { placement: dataPlacement }, onOpen: handleOpenChange, opened: isOpened, children: jsx(NJPopoverInteractions, { click: true, dismiss: true, hover: openOnHover ? { handleClose: safePolygon(), move: false } : undefined, children: jsxs("div", { ref: forwardedRef, className: fabMenuClass, ...htmlProps, children: [jsx(NJPopoverAnchor, { children: jsx(NJFab, { icon: icon, variant: variant, title: title, onClick: onMenuClick, scale: scale, noRotate: noRotate, disabled: disabled, label: label, ref: Utils.mergeRefs([buttonRef, customButtonRef].filter((ref) => !!ref)) }) }), jsx(NJPopoverContent, { inline: true, children: jsx("ul", { ref: listRef, className: fabActionClass, children: children && FabMenuItems }) })] }) }) }));
});
NJFabMenu.displayName = 'NJFabMenu';

export { NJFabMenu };