Skip to content

Commit

Permalink
Provide Collapsible content width css var
Browse files Browse the repository at this point in the history
  • Loading branch information
mj12albert committed Sep 3, 2024
1 parent 83ed1f6 commit e14cf39
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>();
Expand Down Expand Up @@ -124,6 +125,7 @@ export function useCollapsibleContent(

if (!isTransitioning || !(open || contextMounted)) {
setHeight(rect.height);
setWidth(rect.width);
}

element.style.animationName = shouldCancelAnimation ? 'none' : originalAnimationName;
Expand Down Expand Up @@ -274,8 +276,9 @@ export function useCollapsibleContent(
() => ({
getRootProps,
height,
width,
}),
[getRootProps, height],
[getRootProps, height, width],
);
}

Expand Down Expand Up @@ -308,5 +311,6 @@ export namespace useCollapsibleContent {
externalProps?: React.ComponentPropsWithRef<'button'>,
) => React.ComponentPropsWithRef<'button'>;
height: number;
width: number;
}
}

0 comments on commit e14cf39

Please sign in to comment.