✏️ Editing: index.js Writable

import { createContext, memo, useContext, useRef, useState } from "@wordpress/element";

const AccordionContext = createContext();

const Accordion = ({
	children,
	transitionDuration = 600,
	multipleOpenAtATime = false,
	className = "",
	accordionMode = "vertical",
	defaultExpandItems = [],
	expandWidth = "",
	expandHeight = false,
	animationEffect = "none",
	activatorEvent = "click",
}) => {
	const [openItems, setOpenItems] = useState(defaultExpandItems);

const contextValue = {
		accordionMode,
		openItems,
		toggleItem,
		transitionDuration,
		expandWidth,
		expandHeight,
		animationEffect,
		activatorEvent,
	};

return (
		<AccordionContext.Provider value={contextValue}>
			<div
				className={`sp-eab-accordion sp-eab-mode-${accordionMode}${className ? ` ${className}` : ""} sp-d-flex`}
			>
				{children}
			</div>
		</AccordionContext.Provider>
	);
};

return (
		<AccordionContext.Provider value={{ ...useContext(AccordionContext), eventKey }}>
			<div {...updatedProps}>{children}</div>
		</AccordionContext.Provider>
	);
});

const AccordionHeading = memo(({ children, TagName = "h3", className = "" }) => {
	const { toggleItem, eventKey, activatorEvent } = useContext(AccordionContext);

const handlers = {};

if (activatorEvent !== "hover") {
		handlers.onClick = (e) => {
			e.stopPropagation();
			toggleItem(eventKey);
		};
	}

if (activatorEvent === "hover") {
		handlers.onMouseEnter = () => toggleItem(eventKey);
	}

return (
		<TagName
			className={`sp-eab-accordion-heading sp-d-flex sp-align-center${className ? ` ${className}` : ""}`}
			{...handlers}
		>
			{children}
		</TagName>
	);
});

return (
		<div className={`sp-eab-accordion-content${className !== "" ? ` ${className}` : ""}`} style={contentStyle}>
			<div
				className={`sp-eab-accordion-content-wrapper${isOpen ? ` animated ${animationEffect}` : ""}`}
				ref={contentRef}
			>
				{children}
			</div>
		</div>
	);
});

Accordion.Item = AccordionItem;
Accordion.Heading = AccordionHeading;
Accordion.Content = AccordionContent;

export default Accordion;

🔐 Sid Gifari File Manager Pro