From e14cf39adf362b74ea02e62151f87e01a6aa58cd Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Tue, 3 Sep 2024 16:15:16 +0800
Subject: [PATCH] Provide Collapsible content width css var

---
 .../mui-base/src/Collapsible/Content/CollapsibleContent.tsx | 3 ++-
 .../src/Collapsible/Content/useCollapsibleContent.ts        | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx
index a6006f8178..d29cefe253 100644
--- a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx
+++ b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx
@@ -17,7 +17,7 @@ export const CollapsibleContent = React.forwardRef(function CollapsibleContent(
   const { animated, mounted, open, contentId, setContentId, setMounted, setOpen, ownerState } =
     useCollapsibleContext();
 
-  const { getRootProps, height } = useCollapsibleContent({
+  const { getRootProps, height, width } = useCollapsibleContent({
     animated,
     htmlHidden,
     id: contentId,
@@ -38,6 +38,7 @@ export const CollapsibleContent = React.forwardRef(function CollapsibleContent(
       ...otherProps,
       style: {
         '--collapsible-content-height': height ? `${height}px` : undefined,
+        '--collapsible-content-width': width ? `${width}px` : undefined,
       },
     },
     customStyleHookMapping: collapsibleStyleHookMapping,
diff --git a/packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts b/packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts
index 5a6312d38b..c3de348a45 100644
--- a/packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts
+++ b/packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts
@@ -62,6 +62,7 @@ export function useCollapsibleContent(
   const contentRef = React.useRef<HTMLElement | null>(null);
 
   const [height, setHeight] = React.useState(0);
+  const [width, setWidth] = React.useState(0);
 
   const latestAnimationNameRef = React.useRef<string | undefined>('none');
   const originalTransitionDurationStyleRef = React.useRef<string | undefined>();
@@ -124,6 +125,7 @@ export function useCollapsibleContent(
 
       if (!isTransitioning || !(open || contextMounted)) {
         setHeight(rect.height);
+        setWidth(rect.width);
       }
 
       element.style.animationName = shouldCancelAnimation ? 'none' : originalAnimationName;
@@ -274,8 +276,9 @@ export function useCollapsibleContent(
     () => ({
       getRootProps,
       height,
+      width,
     }),
-    [getRootProps, height],
+    [getRootProps, height, width],
   );
 }
 
@@ -308,5 +311,6 @@ export namespace useCollapsibleContent {
       externalProps?: React.ComponentPropsWithRef<'button'>,
     ) => React.ComponentPropsWithRef<'button'>;
     height: number;
+    width: number;
   }
 }