Fix asChild API in Components by Adding Radix Slottable

[valentinpolitov]

Description

This PR fixes the broken asChild API in multiple components by wrapping children with Slottable from @radix-ui/react-slot. This ensures proper props forwarding and compatibility with custom components passed as children.

Affected Components

• Accordion
• ContextMenu
• Dialog
• Drawer
• DropdownMenu
• Menubar
• NavigationMenu
• Select
• Sheet

Changes

Before:

The asChild API was broken because children were directly rendered, preventing proper props forwarding.

{children}

After:

children is wrapped with Slottable to restore asChild functionality.

<Slottable>{children}</Slottable>

Why this change?

• Fixing asChild Support: Resolves a known issue where props were not forwarded to custom components passed via asChild.
• Alignment with Radix UI: Implements the recommended approach for components with multiple children using Slottable.
• Consistency: Ensures the asChild API works uniformly across all affected components.

Screenshots

Before

After

Reference

From Radix UI Documentation:
When working with components that have multiple children, Slottable ensures props are forwarded correctly.

// your-button.jsx
import React from "react";
import { Slot, Slottable } from "@radix-ui/react-slot";

function Button({ asChild, children, leftElement, rightElement, ...props }) {
  const Comp = asChild ? Slot : "button";
  return (
    <Comp {...props}>
      {leftElement}
      <Slottable>{children}</Slottable>
      {rightElement}
    </Comp>
  );
}

Checklist

• Fixed asChild support in all listed components.
• Verified props forwarding with Slottable.
• Backward compatibility ensured.

[vercel]

@valentinpolitov is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.