[collapsible] Remove render={null}

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": {},

packages/react/src/collapsible/root/CollapsibleRoot.test.tsx

@@ -165,20 +165,6 @@ describe('<Collapsible.Root />', () => {
     });
   });
 
-  describe('prop: render', () => {
-    it('does not render a root element when `null`', async () => {
-      const { container } = await render(
-        <Collapsible.Root defaultOpen render={null}>
-          <Collapsible.Trigger />
-          <Collapsible.Panel>This is panel content</Collapsible.Panel>
-        </Collapsible.Root>,
-      );
-
-      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 () => {

packages/react/src/collapsible/root/CollapsibleRoot.tsx

@@ -56,34 +56,24 @@ 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,
     props: elementProps,
     stateAttributesMapping: collapsibleStateAttributesMapping,
   });
 
-  if (componentProps.render !== null) {
-    return (
-      <CollapsibleRootContext.Provider value={contextValue}>
-        {element}
-      </CollapsibleRootContext.Provider>
-    );
-  }
-
   return (
     <CollapsibleRootContext.Provider value={contextValue}>
-      {elementProps.children}
+      {element}
     </CollapsibleRootContext.Provider>
   );
 });
 
 export interface CollapsibleRootState
   extends Pick<useCollapsibleRoot.ReturnValue, 'open' | 'disabled'> {}
 
-export interface CollapsibleRootProps
-  extends Omit<BaseUIComponentProps<'div', CollapsibleRoot.State>, '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;