Replace the Docusaurus Details component with a HTML native solution (#564)

* Replace the Docusaurus Details component with  html native solution

* Adjust styles

* Fix the close animation not working

* Adjust the bottom padding of details-content

* Replicate the transition duration calculation logic from the Docusaurus Details component

* Apply the transitions only if interpolate-size is supported

* Clarify the comment about the source of getAutoHeightDuration

Author: aatuvai

src/theme/Details/index.tsx

@@ -0,0 +1,70 @@
+import React, { type ReactNode, useRef, useCallback, useEffect } from "react";
+import clsx from "clsx";
+import type { Props } from "@theme/Details";
+import { prefersReducedMotion } from "@docusaurus/theme-common";
+
+import styles from "./styles.module.css";
+
+const InfimaClasses = "alert alert--info";
+
+/*
+  Calculates a duration for the transition based on the content height. Adapted from Docusaurus's Collapsible component:
+  https://github.com/facebook/docusaurus/blob/d5509e329d090ca3ab1da94d41834ddd51f11937/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx#L74-L82
+*/
+function getAutoHeightDuration(height: number) {
+  if (prefersReducedMotion()) {
+    return 1;
+  }
+  const constant = height / 36;
+  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
+}
+
+export default function Details({ summary, ...props }: Props): ReactNode {
+  const summaryElement = React.isValidElement(summary) ? (
+    summary
+  ) : (
+    <summary>{summary ?? "Details"}</summary>
+  );
+
+  const detailsRef = useRef<HTMLDetailsElement>(null);
+
+  const applyTransitionVars = useCallback((el: HTMLDetailsElement) => {
+    let contentHeight = 0;
+    for (const child of Array.from(el.children)) {
+      if ((child as HTMLElement).tagName.toLowerCase() !== "summary") {
+        contentHeight += (child as HTMLElement).scrollHeight;
+      }
+    }
+    const durationMs = getAutoHeightDuration(contentHeight);
+    const durationS = durationMs / 1000;
+    const delayS = Math.max(0, (durationMs - 20) / 1000);
+    el.style.setProperty("--details-transition-duration", `${durationS}s`);
+    el.style.setProperty("--details-transition-delay", `${delayS}s`);
+  }, []);
+
+  // Apply the variables on mount so that elements with `open` by default are covered.
+  useEffect(() => {
+    if (detailsRef.current) {
+      applyTransitionVars(detailsRef.current);
+    }
+  }, [applyTransitionVars]);
+
+  const handleToggle = useCallback(
+    (e: React.SyntheticEvent<HTMLDetailsElement>) => {
+      applyTransitionVars(e.currentTarget);
+    },
+    [applyTransitionVars],
+  );
+
+  return (
+    <details
+      {...props}
+      ref={detailsRef}
+      onToggle={handleToggle}
+      className={clsx(styles.details, InfimaClasses, props.className)}
+    >
+      {summaryElement}
+      {props.children}
+    </details>
+  );
+}

src/theme/Details/styles.module.css

@@ -0,0 +1,88 @@
+.details {
+  --docusaurus-details-decoration-color: var(--ifm-alert-border-color);
+  --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
+  --docusaurus-details-summary-arrow-size: 0.38rem;
+  interpolate-size: allow-keywords;
+  margin: 0 0 var(--ifm-spacing-vertical);
+  border: 1px solid var(--ifm-alert-border-color);
+  overflow: hidden;
+  padding-bottom: 0;
+
+  > :global(summary) {
+    position: relative;
+    padding-left: 1rem;
+    list-style: none;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &::before {
+      content: "";
+      border-width: var(--docusaurus-details-summary-arrow-size);
+      border-style: solid;
+      border-color: transparent transparent transparent
+        var(--docusaurus-details-decoration-color);
+      transition: var(--docusaurus-details-transition);
+      transform-origin: calc(var(--docusaurus-details-summary-arrow-size) / 2)
+        50%;
+      position: absolute;
+      top: 0.45rem;
+      left: 0;
+      transform: rotate(0);
+    }
+  }
+
+  &[open] {
+    > :global(summary) {
+      &::before {
+        transform: rotate(90deg);
+      }
+    }
+  }
+}
+
+.details :global(summary)::after {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  transform: translateY(calc(var(--ifm-alert-padding-horizontal) + 1px));
+  height: 1px;
+  opacity: 0;
+  transition: opacity 0.1s var(--details-transition-delay, 0.38s);
+  background-color: var(--docusaurus-details-decoration-color);
+  transition-behavior: allow-discrete;
+}
+
+.details[open] :global(summary)::after {
+  opacity: 1;
+  transition: opacity 0s;
+}
+
+.details::details-content {
+  block-size: 0;
+  padding-top: 1rem;
+  margin-top: 0;
+  @supports (interpolate-size: allow-keywords) {
+    transition:
+      block-size var(--details-transition-duration, 0.4s) ease-in-out,
+      content-visibility var(--details-transition-duration, 0.4s) ease-in-out,
+      margin-top 0.1s var(--details-transition-delay, 0.38s);
+    transition-behavior: allow-discrete !important;
+  }
+}
+
+.details[open]::details-content {
+  margin-top: 1rem;
+  block-size: auto;
+  padding: 1rem 0;
+  @supports (interpolate-size: allow-keywords) {
+    transition:
+      block-size var(--details-transition-duration, 0.4s) ease-in-out,
+      content-visibility var(--details-transition-duration, 0.4s) ease-in-out,
+      margin-top 0s;
+  }
+}