Function CollapsibleReleaseSection

components/release-notes/GHESReleaseNotes.tsx:120–177

({
  release,
  releaseLink,
  focusedPatch,
}: {
  release: GHESReleaseNotesContextT['releases'][0]
  releaseLink: string
  focusedPatch: string
})

}

const CollapsibleReleaseSection = ({
  release,
  releaseLink,
  focusedPatch,
}: {
  release: GHESReleaseNotesContextT['releases'][0]
  releaseLink: string
  focusedPatch: string
}) => {
  const defaultIsOpen = true
  const [isOpen, setIsOpen] = useState(defaultIsOpen)

  const onToggle = (e: SyntheticEvent) => {
    const newIsOpen = (e.target as HTMLDetailsElement).open
    setIsOpen(newIsOpen)
  }
  return (
    <li key={release.version} className="border-bottom">
      <details
        className="my-0 details-reset release-notes-version-picker"
        aria-current="page"
        open={defaultIsOpen}
        onToggle={onToggle}
      >
        <summary className="px-3 py-4 my-0 d-flex flex-items-center flex-justify-between outline-none">
          {release.version}
          <div className="d-flex">
            <span className="color-fg-muted text-small text-normal mr-1">
              {release.patches.length} {release.patches.length === 1 ? 'release' : 'releases'}
            </span>
            <ChevronDownIcon className={isOpen ? 'rotate-180' : ''} />
          </div>
        </summary>
        <ul className="color-bg-subtle border-top list-style-none py-4 px-0 my-0">
          {release.patches.map((patch) => {
            const isActive = patch.version === focusedPatch
            return (
              <li
                key={patch.version}
                className={cx('px-3 my-0 py-1', isActive && 'color-bg-accent')}
              >
                <Link
                  href={`${releaseLink}#${patch.version}`}
                  className="d-flex flex-items-center flex-justify-between"
                >
                  {patch.version}
                  <span className="color-fg-muted text-mono text-small text-normal">
                    {dayjs(patch.date).format('MMMM DD, YYYY')}
                  </span>
                </Link>
              </li>
            )
          })}
        </ul>
      </details>
    </li>
  )
}