From 3b1463048a6337e641f3cfbc7b5d5411bbd0a008 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Tue, 19 Nov 2024 13:35:47 +0200
Subject: [PATCH] docs: fix error on collapsing prerequisites (#10153)

---
 .../docs-ui/src/components/Prerequisites/index.tsx         | 7 +++++--
 www/packages/docs-ui/src/hooks/use-collapsible/index.tsx   | 6 ++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/www/packages/docs-ui/src/components/Prerequisites/index.tsx b/www/packages/docs-ui/src/components/Prerequisites/index.tsx
index 2275b63b6054c..092861e94bd4a 100644
--- a/www/packages/docs-ui/src/components/Prerequisites/index.tsx
+++ b/www/packages/docs-ui/src/components/Prerequisites/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React from "react"
+import React, { useRef } from "react"
 import { Button, useCollapsible } from "../.."
 import clsx from "clsx"
 import { TriangleRightMini } from "@medusajs/icons"
@@ -15,9 +15,12 @@ type PrerequisitesProps = {
 }
 
 export const Prerequisites = ({ items }: PrerequisitesProps) => {
+  const itemsRef = useRef<HTMLDivElement>(null)
   const { collapsed, getCollapsibleElms, setCollapsed } = useCollapsible({
     initialValue: false,
     translateEnabled: false,
+    childrenRef: itemsRef,
+    useChild: false,
   })
 
   const getPosition = (index: number): PrerequisiteItemPosition => {
@@ -71,7 +74,7 @@ export const Prerequisites = ({ items }: PrerequisitesProps) => {
         </Button>
       </summary>
       {getCollapsibleElms(
-        <div className="flex gap-[6px] flex-col">
+        <div className="flex gap-[6px] flex-col" ref={itemsRef}>
           {items.map((item, index) => (
             <PrerequisiteItem
               item={{
diff --git a/www/packages/docs-ui/src/hooks/use-collapsible/index.tsx b/www/packages/docs-ui/src/hooks/use-collapsible/index.tsx
index d02dda0b26d9d..6f5eacf93c1c1 100644
--- a/www/packages/docs-ui/src/hooks/use-collapsible/index.tsx
+++ b/www/packages/docs-ui/src/hooks/use-collapsible/index.tsx
@@ -11,6 +11,7 @@ export type CollapsibleProps = {
   onClose?: () => void
   unmountOnExit?: boolean
   childrenRef?: React.RefObject<HTMLElement | null>
+  useChild?: boolean
 }
 
 export type CollapsibleReturn = {
@@ -26,10 +27,15 @@ export const useCollapsible = ({
   onClose,
   unmountOnExit = true,
   childrenRef,
+  useChild = true,
 }: CollapsibleProps): CollapsibleReturn => {
   const [collapsed, setCollapsed] = useState(initialValue)
 
   const getNodeFromChildrenRef = () => {
+    if (!useChild) {
+      return childrenRef?.current
+    }
+
     return (
       (childrenRef?.current?.firstElementChild as HTMLElement) ||
       childrenRef?.current