feat(ui-components): close ChangeHistory dropdown on outside click

packages/ui-components/src/Common/ChangeHistory/Details.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import {
+  useRef,
+  useEffect,
+  type FC,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
+
+type ChangeHistoryDetailsProps = ComponentProps<'details'> & {
+  children?: ReactNode;
+};
+
+export const ChangeHistoryDetails: FC<ChangeHistoryDetailsProps> = ({
+  children,
+  ...props
+}) => {
+  const detailsRef = useRef<HTMLDetailsElement | null>(null);
+
+  useEffect(() => {
+    const handlePointerDown = (e: PointerEvent) => {
+      const details = detailsRef.current;
+      if (details && details.open && !details.contains(e.target as Node)) {
+        details.removeAttribute('open');
+      }
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+    };
+  }, []);
+
+  return (
+    <details ref={detailsRef} {...props}>
+      {children}
+    </details>
+  );
+};

packages/ui-components/src/Common/ChangeHistory/__tests__/index.test.jsx

@@ -0,0 +1,72 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ChangeHistory from '../index';
+
+const sampleChanges = [
+  {
+    label: 'v18.0.0',
+    versions: ['v18.0.0'],
+    content: 'Initial implementation',
+    url: 'https://github.com/nodejs/node/pull/1',
+  },
+  {
+    label: 'v16.0.0',
+    versions: ['v16.0.0'],
+    content: 'Deprecated feature',
+  },
+];
+
+describe('ChangeHistory', () => {
+  it('renders summary label and changes properly', () => {
+    render(<ChangeHistory label="History" changes={sampleChanges} />);
+
+    assert.ok(screen.getByText('History'));
+    assert.ok(screen.getByText('Initial implementation'));
+    assert.ok(screen.getByText('Deprecated feature'));
+  });
+
+  it('closes dropdown when clicking outside', async () => {
+    const { container } = render(
+      <div>
+        <button type="button">Outside Button</button>
+        <ChangeHistory label="History" changes={sampleChanges} />
+      </div>
+    );
+
+    const details = container.querySelector('details');
+    assert.ok(details);
+
+    // Open details
+    details.setAttribute('open', '');
+    assert.equal(details.hasAttribute('open'), true);
+
+    // Click outside
+    const outsideButton = screen.getByRole('button', { name: 'Outside Button' });
+    fireEvent.pointerDown(outsideButton);
+
+    assert.equal(details.hasAttribute('open'), false);
+  });
+
+  it('does not close when clicking inside the details dropdown', async () => {
+    const { container } = render(
+      <ChangeHistory label="History" changes={sampleChanges} />
+    );
+
+    const details = container.querySelector('details');
+    assert.ok(details);
+
+    // Open details
+    details.setAttribute('open', '');
+    assert.equal(details.hasAttribute('open'), true);
+
+    // Click inside
+    const insideItem = screen.getByText('Initial implementation');
+    fireEvent.pointerDown(insideItem);
+
+    assert.equal(details.hasAttribute('open'), true);
+  });
+});

packages/ui-components/src/Common/ChangeHistory/index.tsx

@@ -4,6 +4,8 @@ import classNames from 'classnames';
 import type { LinkLike } from '#ui/types';
 import type { FC, ComponentProps, ReactNode } from 'react';
 
+import { ChangeHistoryDetails } from './Details';
+
 import styles from './index.module.css';
 
 export type HistoryChange = {
@@ -28,7 +30,7 @@ const ChangeHistory: FC<ChangeHistoryProps> = ({
   ...props
 }) => (
   <div className={classNames('relative', 'inline-block', className)} {...props}>
-    <details className="group">
+    <ChangeHistoryDetails className="group">
       <summary className={styles.summary} role="button" aria-haspopup="menu">
         <ClockIcon className="size-4" />
         <span>{label}</span>
@@ -63,7 +65,7 @@ const ChangeHistory: FC<ChangeHistoryProps> = ({
           })}
         </div>
       </div>
-    </details>
+    </ChangeHistoryDetails>
   </div>
 );