tremorlabs / tremor-raw

Copy & Paste React components to build modern web applications.
https://raw.tremor.so
Apache License 2.0
380 stars 8 forks source link

[Bug]: DropdownMenuItem asChild do not work because of invalid wrapping #51

Open Muchaszewski opened 5 days ago

Muchaszewski commented 5 days ago

Tremor Raw Component Version

// Tremor Raw Dropdown Menu [v0.0.0]

Link to minimal reproduction

code below

Steps to reproduce

Write a simple menu

<DropdownMenu>
    <DropdownMenuItem asChild>
       // anything here will result in an exception
    </DropdownMenuItem>
</DropdownMenu>

Error: React.Children.only expected to receive a single React element child.

What is expected?

Working component

What is actually happening?

Wrap whole body of DropdownMenuPrimitives.Item in <></>

<DropdownMenuPrimitives.Item
    ref={forwardedRef}
    className={cx(
      // base
      "group/DropdownMenuItem relative flex cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-1 outline-none transition-colors data-[state=checked]:font-semibold sm:text-sm",
      // text color
      "text-gray-900 dark:text-gray-50",
      // disabled
      "data-[disabled]:pointer-events-none data-[disabled]:text-gray-400 data-[disabled]:hover:bg-none dark:data-[disabled]:text-gray-600",
      // focus
      "focus-visible:bg-gray-100 focus-visible:dark:bg-gray-900",
      // hover
      "hover:bg-gray-100 hover:dark:bg-gray-900",
      className,
    )}
    {...props}
  >
    <> <--------- new
      {children}
      {hint && (
        <span
          className={cx("ml-auto pl-2 text-sm text-gray-400 dark:text-gray-600")}
        >
          {hint}
        </span>
      )}
      {shortcut && (
        <span
          className={cx("ml-auto pl-2 text-sm text-gray-400 dark:text-gray-600")}
        >
          {shortcut}
        </span>
      )}
    </> <--------- new
  </DropdownMenuPrimitives.Item>

What browsers are you seeing the problem on?

No response

Any additional comments?

Honestly, I expected that asChild would use the whole component as input while retaining style, but it just ignores the parent style. But this might be my misunderstanding on how this works. I wanted to put next.js <Link> inside the <DropdownMenuItem> while retaining style, but this proved more difficult than expected

severinlandolt commented 5 days ago

Noted, will see what I can do :)