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;