AccordionSection = props => {
    const {
        style,
        disabled,
        children,
        label,
        icon,
        assistiveText,
        className,
        variant,
        name,
    } = props;
    const {
        activeNames,
        multiple,
        privateOnToggleSection,
        privateOnFocusSection,
        privateRegisterAccordionSection,
        privateUnregisterAccordionSection,
        privateOnKeyPressed,
    } = useContext(AccordionContext) ?? contextDefault;

    const containerRef = useRef();
    const buttonRef = useRef();
    const uniqueName = useUniqueIdentifier('accordion-section');
    const accordionDetailsId = useUniqueIdentifier('accordion-section-details');

    const currentName = name || uniqueName;

    useEffect(() => {
        if (!disabled) {
            privateRegisterAccordionSection({
                id: currentName,
                ref: containerRef.current,
                focusButton: () => buttonRef.current.focus(),
            });
        }
        return () => {
            if (!disabled) {
                privateUnregisterAccordionSection(currentName);
            }
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const isExpanded = getIsExpanded({ multiple, activeNames, currentName });

    const resolveActiveNamesWhenMultiple = () => {
        if (activeNames === undefined) {
            return [currentName];
        }
        if (isInArray(activeNames, currentName)) {
            return activeNames.filter(element => element !== currentName);
        }
        return [...activeNames, currentName];
    };

    const resolveActiveNames = () => {
        if (multiple) {
            return resolveActiveNamesWhenMultiple();
        }
        if (currentName === activeNames) {
            return '';
        }
        return currentName;
    };

    const handleToggleSection = event => {
        if (!disabled) {
            privateOnToggleSection(event, resolveActiveNames());
        }
    };

    const handleFocusSection = () => {
        if (!disabled) {
            privateOnFocusSection(currentName);
        }
    };

    const handleKeyPressed = event => {
        if (!disabled) {
            privateOnKeyPressed(event);
        }
    };

    return (
        <StyledLi
            data-id="accordion-section-li"
            className={className}
            style={style}
            disabled={disabled}
            variant={variant}
            isExpanded={isExpanded}
            ref={containerRef}
        >
            <StyledSummary
                data-id="accordion-section-summary"
                isExpanded={isExpanded}
                variant={variant}
                disabled={disabled}
                onClick={handleToggleSection}
                onFocus={handleFocusSection}
                onKeyDown={handleKeyPressed}
                aria-controls={accordionDetailsId}
                aria-expanded={isExpanded}
                type="button"
                ref={buttonRef}
            >
                <RightArrow isExpanded={isExpanded} disabled={disabled} />
                <AssistiveText text={assistiveText} />
                <StyledHeading disabled={disabled}>
                    <RenderIf isTrue={icon}>
                        <StyledIcon>{icon}</StyledIcon>
                    </RenderIf>
                    <RenderIf isTrue={label}>
                        <StyledSpan data-id="accordion-section-label">{label}</StyledSpan>
                    </RenderIf>
                </StyledHeading>
            </StyledSummary>
            <StyledContent
                data-id="accordion-section-content"
                aria-hidden={!isExpanded}
                isCollapsed={!isExpanded}
                id={accordionDetailsId}
            >
                {children}
            </StyledContent>
        </StyledLi>
    );
}
An AccordionSection is single section that is nested in the Accordion component.
@category Layout