@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
85 lines (84 loc) • 3.62 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useEffect, useState } from "react";
import classNames from "classnames";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
import SlideDown from "../SlideDown/SlideDown.js";
import Icon from "../Icon/Icon.js";
import useAccordionContext from "./hooks/useAccordionContext.js";
/**
* A single pane for `<Accordion>` container
* @visibleName Accordion.Item
*/ const AccordionItem = /*#__PURE__*/ forwardRef(({ className, title, actions, children, active, onClick, disabled = false, noPadding = false, icon, htmlTitle, defaultActive = false, ["aria-label"]: ariaLabel, buttonProps, ...props }, ref)=>{
const [open, setOpen] = useState(defaultActive);
const { subscribe, announceOpening } = useAccordionContext();
const isActive = active ?? open;
// close this item when others are opened
useEffect(()=>subscribe(()=>setOpen(false)), []);
const handleOnClick = (event)=>{
// call onClick prop if any
onClick?.(event);
if (!open) {
// allows closing other accordion items when this is opened
announceOpening();
}
setOpen(!open);
};
return /*#__PURE__*/ _jsxs("div", {
className: classNames(className, "bf-accordion-item", {
"bf-accordion-item-active": isActive,
"bf-accordion-item-disabled": disabled
}),
ref: ref,
...props,
children: [
/*#__PURE__*/ _jsxs("div", {
className: "bf-accordion-item-title",
children: [
/*#__PURE__*/ _jsxs("button", {
onClick: handleOnClick,
title: htmlTitle,
"aria-label": ariaLabel,
disabled: disabled,
type: "button",
...buttonProps,
children: [
/*#__PURE__*/ _jsx("span", {
className: "bf-accordion-item-angle-circle",
children: /*#__PURE__*/ _jsx(Icon, {
icon: faAngleRight,
className: "bf-accordion-item-angle"
})
}),
/*#__PURE__*/ _jsxs("span", {
children: [
icon && /*#__PURE__*/ _jsx(Icon, {
icon: icon,
fixedWidth: true,
className: "bf-accordion-item-icon"
}),
title
]
})
]
}),
actions && /*#__PURE__*/ _jsx("div", {
className: "bf-accordion-item-actions",
children: actions
})
]
}),
/*#__PURE__*/ _jsx(SlideDown, {
open: isActive,
children: /*#__PURE__*/ _jsx("div", {
className: classNames("bf-accordion-item-content", {
"bfl-nopadding": noPadding
}),
children: children
})
})
]
});
});
AccordionItem.displayName = "Accordion.Item";
export default AccordionItem;