Classic Accordion

import { memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
import styles from "./classic-accordion.module.css";

const AccordionItem = (props) => {
  const {
    accordionGroupId,
    item,
    onToggle,
    open,
  } = props;

  const panelRef = useRef(null);

  const accordionHeaderId = useMemo(() => (
    `${accordionGroupId}-header-${item.id}`
  ), [accordionGroupId, item.id]);

  const accordionPanelId = useMemo(() => (
    `${accordionGroupId}-panel-${item.id}`
  ), [accordionGroupId, item.id]);

  useLayoutEffect(() => {
    const height = open ? panelRef.current.scrollHeight : 0;
    panelRef.current?.style.setProperty("--panel-height", `${height}px`);
  }, [open]);

  return (
    <div className={styles["accordion-item"]}>
      <div className={styles["header"]}>
        <button
          aria-controls={accordionPanelId}
          aria-expanded={open}
          id={accordionHeaderId}
          onClick={() => onToggle(item.id)}
        >
          <span
            className={styles["title"]}
            title={item.title}
          >
            {item.title}
          </span>
          <span className={styles["icon"]}>
          </span>
        </button>
      </div>
      <div
        aria-labelledby={accordionHeaderId}
        className={styles["panel"]}
        id={accordionPanelId}
        ref={panelRef}
        role="region"
      >
        <div className={styles["panel-content-wrapper"]}>
          {item.content}
        </div>
      </div>
    </div>
  );
};

const ClassicAccordion = (props) => {
  const {
    items = [],
    multiple = false,
    defaultOpen,
  } = props;

  const [openAccordionIds, setOpenAccordionIds] = useState(() => {
    if (multiple) {
      if(Array.isArray(defaultOpen)) {
        return [...defaultOpen];
      }
    } else if(
      typeof defaultOpen === "string" &&
      items.some(item => item.id === defaultOpen)
    ) {
      return [defaultOpen];
    }
    return [];
  });

  const accordionGroupId = useMemo(() => (
    `accordion-group-${Math.random().toString(36).substring(2)}`
  ), []);

  const handleAccordionToggle = useCallback((accordionId) => {
    setOpenAccordionIds((prev) => {
      const isOpen = prev.includes(accordionId);
      if (isOpen) { 
        return prev.filter(item => item !== accordionId);
      } else if (multiple) {
        return [...prev, accordionId];
      } else {
        return [accordionId];
      }
    });
  }, []);

  if(
    !Array.isArray(items) || 
    items.length === 0
  ) {
    return null;
  }

  return (
    <div className={styles["accordion-group"]}>
      {items.map((item, index) => (
        <AccordionItem
          key={item.id ?? index}
          accordionGroupId={accordionGroupId}
          item={item}
          open={openAccordionIds.includes(item.id)}
          onToggle={handleAccordionToggle}
        />
      ))}
    </div>
  );
};

export default memo(ClassicAccordion);

.accordion-group {
  --accordion-border-color: #bbb;
  --accordion-header-text-color: #111;
  --accordion-padding: 16px;
  --accordion_open-background-color: #eee;
  --transition-duration: 250ms;

  @media (prefers-color-scheme: dark) {
    --accordion-header-text-color: #f5f5f5;
    --accordion-border-color: #222;
    --accordion_open-background-color: #111;
  }

  border: 1px solid var(--accordion-border-color);
  border-radius: 16px;
  overflow: hidden;

  >.accordion-item {
    border-bottom: 1px solid var(--accordion-border-color);

    &:last-child {
      border-bottom: none;
    }

    >.header {
      button {
        padding: var(--accordion-padding);
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        align-items: center;
        background: transparent;
        border: none;
        font: inherit;
        cursor: pointer;

        .title {
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: var(--accordion-header-text-color);
        }

        .icon {
          position: relative;
          width: 12px;
          height: 12px;
          flex-shrink: 0;

          &:before,
          &:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 1px;
            background: var(--accordion-header-text-color);
          }

          &:before {
            transform: translate(-50%, -50%) rotate(90deg);
          }
        }
      }
    }

    >.panel {
      --panel-height: 0px;
      overflow: hidden;
      height: var(--panel-height) !important;
      border-top: 1px solid transparent;
      transition:
        height var(--transition-duration) ease-in-out,
        border 0ms linear var(--transition-duration);

      .panel-content-wrapper {
        padding: var(--accordion-padding);
      }
    }

    &:has([aria-expanded="true"]) {
      >.header {
        background: var(--accordion_open-background-color);

        >button {
          .icon {
            &:before {
              display: none;
            }
          }
        }
      }

      >.panel {
        border-top-color: var(--accordion-border-color);
        transition:
          height var(--transition-duration) ease-in-out,
          border 0ms linear 0ms;
      }
    }
  }
}