diff --git a/www/packages/docs-ui/src/components/Prerequisites/index.tsx b/www/packages/docs-ui/src/components/Prerequisites/index.tsx index 2275b63b60..092861e94b 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(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) => { {getCollapsibleElms( -
+
{items.map((item, index) => ( void unmountOnExit?: boolean childrenRef?: React.RefObject + 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