@intility/bifrost-react/dist/components/Accordion/Accordion.Item.js

React library for Intility's design system, Bifrost.

"use client";

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";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const AccordionItem = /*#__PURE__*/forwardRef(({
  className,
  title,
  actions,
  children,
  active,
  onClick,
  disabled = false,
  noPadding = false,
  icon,
  htmlTitle,
  defaultActive = false,
  ["aria-label"]: ariaLabel,
  buttonProps,
  eager = false,
  ...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)), [subscribe]);
  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,
            className: "bf-accordion-item-icon"
          }), title]
        })]
      }), actions && /*#__PURE__*/_jsx("div", {
        className: "bf-accordion-item-actions",
        children: actions
      })]
    }), /*#__PURE__*/_jsx(SlideDown, {
      open: isActive,
      eager: eager,
      children: /*#__PURE__*/_jsx("div", {
        className: classNames("bf-accordion-item-content", {
          "bfl-nopadding": noPadding
        }),
        children: children
      })
    })]
  });
});
AccordionItem.displayName = "Accordion.Item";
export default AccordionItem;