@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
52 lines (51 loc) • 1.93 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useRef } from "react";
import classNames from "classnames";
import { AccordionContext } from "./hooks/useAccordionContext.js";
const accordionRadii = {
none: `0px`,
xs: `4px`,
s: `8px`,
m: `12px`,
l: `16px`,
xl: `24px`
};
/**
* Accordion component - vertical menu with collapsible sections
*/ const Accordion = /*#__PURE__*/ forwardRef(({ children, className, style, noBorder = false, variant = "default", mode = "default", multiple = false, radius, ...props }, ref)=>{
const subscribers = useRef(new Set());
return /*#__PURE__*/ _jsx(AccordionContext.Provider, {
value: {
subscribe: (callback)=>{
subscribers.current.add(callback);
return ()=>subscribers.current.delete(callback);
},
// When an item opens, it calls this function
announceOpening: ()=>{
// No need to announce if multiple is allowed open
if (!multiple) {
// Calling the registered item callback function closes the item
subscribers.current.forEach((subscriber)=>subscriber());
}
}
},
children: /*#__PURE__*/ _jsx("div", {
ref: ref,
className: classNames(className, "bf-accordion", {
"bf-accordion-noborder": noBorder,
"bf-accordion-styled": variant === "styled",
"bf-accordion-compact": mode === "compact",
"bf-accordion-responsive": mode === "responsive"
}),
style: {
["--bf-accordion-radius"]: radius && accordionRadii[radius],
...style
},
...props,
children: children
})
});
});
Accordion.displayName = "Accordion";
export default Accordion;