From 0676276f5423dbb4e0cad738ac3784937dc7504b Mon Sep 17 00:00:00 2001
From: Clauderic Demers <clauderic.d@gmail.com>
Date: Sat, 19 Oct 2024 10:01:58 -0400
Subject: [PATCH] Handle visibility of children in a closed details element

---
 .changeset/details-element.md                       |  5 +++++
 .../bounding-rectangle/isOverflowVisible.ts         | 13 +++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/details-element.md

diff --git a/.changeset/details-element.md b/.changeset/details-element.md
new file mode 100644
index 00000000..f5b41276
--- /dev/null
+++ b/.changeset/details-element.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/dom': patch
+---
+
+Children contained in a closed `details ` element are no longer treated as visible.
diff --git a/packages/dom/src/utilities/bounding-rectangle/isOverflowVisible.ts b/packages/dom/src/utilities/bounding-rectangle/isOverflowVisible.ts
index f57c2eb8..e14a694f 100644
--- a/packages/dom/src/utilities/bounding-rectangle/isOverflowVisible.ts
+++ b/packages/dom/src/utilities/bounding-rectangle/isOverflowVisible.ts
@@ -1,3 +1,5 @@
+import {getWindow} from '../execution-context/getWindow.ts';
+
 /*
  * Check if an element has visible overflow.
  * @param element
@@ -6,9 +8,16 @@
  */
 export function isOverflowVisible(
   element: Element,
-  style = getComputedStyle(element)
+  style?: CSSStyleDeclaration
 ) {
-  const {overflow, overflowX, overflowY} = style;
+  if (
+    element instanceof getWindow(element).HTMLDetailsElement &&
+    element.open === false
+  ) {
+    return false;
+  }
+
+  const {overflow, overflowX, overflowY} = style ?? getComputedStyle(element);
 
   return (
     overflow === 'visible' && overflowX === 'visible' && overflowY === 'visible'