@engie-group/fluid-design-system-react/lib/components/accordion/NJAccordionItem.js

Fluid Design System React

import { jsx } from 'react/jsx-runtime';
import React__default, { useContext, useEffect, useRef } from 'react';
import { Utils } from '../../utils/util.js';
import { NJAccordionContext } from './NJAccordionContext.js';

const NJAccordionItem = React__default.forwardRef(({ children, scale, hasLeadingToggleIcon, hasAlternativeToggleIcon, icon, className, ...props }, forwardedRef) => {
    const { setHasAlternativeToggleIcon, setCustomIcon } = useContext(NJAccordionContext);
    useEffect(() => {
        setHasAlternativeToggleIcon?.(hasAlternativeToggleIcon);
    }, [hasAlternativeToggleIcon]);
    useEffect(() => {
        setCustomIcon?.(icon);
    }, [icon]);
    const ref = useRef(null);
    const newRef = Utils.mergeRefs([forwardedRef, ref]);
    const onToggle = (e) => {
        if (e.nativeEvent.newState === 'open' || e.currentTarget.open) {
            const allItems = document.querySelectorAll(`details.nj-accordion-item[name=${props.name}]`);
            allItems.forEach((item) => {
                if (item !== ref.current) {
                    item.removeAttribute('open');
                }
            });
        }
        props.onToggle?.(e);
    };
    const classNames = Utils.classNames('nj-accordion-item', {
        [`nj-accordion-item--${scale}`]: !!scale && scale !== 'md',
        [`nj-accordion-item--leading-toggle`]: hasLeadingToggleIcon
    }, className);
    return (jsx("details", { ref: newRef, ...props, onToggle: onToggle, className: classNames, children: children }));
});
NJAccordionItem.displayName = 'NJAccordionItem';

export { NJAccordionItem };