diff --git a/docs/reference/generated/collapsible-root.json b/docs/reference/generated/collapsible-root.json
index 6d49f32495a..5fdb1376d98 100644
--- a/docs/reference/generated/collapsible-root.json
+++ b/docs/reference/generated/collapsible-root.json
@@ -34,8 +34,9 @@
"detailedType": "| React.CSSProperties\n| ((\n state: Collapsible.Root.State,\n ) => CSSProperties | undefined)\n| undefined"
},
"render": {
- "type": "ReactElement | ((props: HTMLProps, state: Collapsible.Root.State) => ReactElement) | null",
- "detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Collapsible.Root.State,\n ) => ReactElement)\n| null"
+ "type": "ReactElement | ((props: HTMLProps, state: Collapsible.Root.State) => ReactElement)",
+ "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
+ "detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Collapsible.Root.State,\n ) => ReactElement)"
}
},
"dataAttributes": {},
diff --git a/packages/react/src/collapsible/root/CollapsibleRoot.test.tsx b/packages/react/src/collapsible/root/CollapsibleRoot.test.tsx
index 6c929b09b44..b57221843b4 100644
--- a/packages/react/src/collapsible/root/CollapsibleRoot.test.tsx
+++ b/packages/react/src/collapsible/root/CollapsibleRoot.test.tsx
@@ -165,20 +165,6 @@ describe('', () => {
});
});
- describe('prop: render', () => {
- it('does not render a root element when `null`', async () => {
- const { container } = await render(
-
-
- This is panel content
- ,
- );
-
- const trigger = screen.getByRole('button');
- expect(container.firstElementChild as HTMLElement).to.equal(trigger);
- });
- });
-
describe.skipIf(isJSDOM)('keyboard interactions', () => {
['Enter', 'Space'].forEach((key) => {
it(`key: ${key} should toggle the Collapsible`, async () => {
diff --git a/packages/react/src/collapsible/root/CollapsibleRoot.tsx b/packages/react/src/collapsible/root/CollapsibleRoot.tsx
index ded5bada870..07d28c5bcce 100644
--- a/packages/react/src/collapsible/root/CollapsibleRoot.tsx
+++ b/packages/react/src/collapsible/root/CollapsibleRoot.tsx
@@ -56,7 +56,6 @@ export const CollapsibleRoot = React.forwardRef(function CollapsibleRoot(
[collapsible, onOpenChange, state],
);
- // @ts-expect-error Collapsible accepts `render={null}`
const element = useRenderElement('div', componentProps, {
state,
ref: forwardedRef,
@@ -64,17 +63,9 @@ export const CollapsibleRoot = React.forwardRef(function CollapsibleRoot(
stateAttributesMapping: collapsibleStateAttributesMapping,
});
- if (componentProps.render !== null) {
- return (
-
- {element}
-
- );
- }
-
return (
- {elementProps.children}
+ {element}
);
});
@@ -82,8 +73,7 @@ export const CollapsibleRoot = React.forwardRef(function CollapsibleRoot(
export interface CollapsibleRootState
extends Pick {}
-export interface CollapsibleRootProps
- extends Omit, 'render'> {
+export interface CollapsibleRootProps extends BaseUIComponentProps<'div', CollapsibleRoot.State> {
/**
* Whether the collapsible panel is currently open.
*
@@ -106,7 +96,6 @@ export interface CollapsibleRootProps
* @default false
*/
disabled?: boolean;
- render?: BaseUIComponentProps<'div', CollapsibleRootState>['render'] | null;
}
export type CollapsibleRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none;