Rename `className` param used in the callback function within `composeRenderProps`

[nik-rev]

Everywhere in the library we are shadowing the className variable in the callback function (2nd argument to composeRenderProps):

      className={composeRenderProps(className, (className) =>
        cn("group flex flex-col gap-2", className),
      )}

It's problematic because a lot of projects use ESLint no-shadow rule. Which generates many errors for each of these files

Same with this:

      {composeRenderProps(children, (children) => (
        <>
          {children}
          <ChevronDown aria-hidden="true" className="size-4 opacity-50" />
        </>
      ))}

children is being shadowed, changing it to something like renderChildren won't trigger ESLint errors

examples are taken from Select component

[musjj]

The composeRenderProps isn't actually necessary at all in most cases and you can just do className={cn(...)}.

[jolbol1]

The composeRenderProps isn't actually necessary at all in most cases and you can just do className={cn(...)}.

Its used so that we users can use renderProps for styling if they choose.

If you dont include it these styles will not work. A small demo of what I mean.

"use client"

import { Button, ButtonProps, composeRenderProps } from "react-aria-components"

import { cn } from "@/lib/utils"

export function MyButton({ className, ...props }: ButtonProps) {
  console.log(className)
  return <Button className={cn(className)}>Hello</Button>
}

export default function Page() {
  return (
    <div className="flex h-screen flex-col items-center justify-center">
      <MyButton
        className={(renderProps) =>
          renderProps.isHovered ? "bg-red-500" : "bg-blue-500"
        }
      />
    </div>
  )
}

Since I am not using composeRenderProps, it cant handle a function being used as a className, and just doesnt apply it.

Everywhere in the library we are shadowing the className variable in the callback function (2nd argument to composeRenderProps):

  className={composeRenderProps(className, (className) =>
    cn("group flex flex-col gap-2", className),
  )}

It's problematic because a lot of projects use ESLint no-shadow rule. Which generates many errors for each of these files

Same with this:

  {composeRenderProps(children, (children) => (
    <>
      {children}
      <ChevronDown aria-hidden="true" className="size-4 opacity-50" />
    </>
  ))}

children is being shadowed, changing it to something like renderChildren won't trigger ESLint errors

examples are taken from Select component

I'll have a think about this, I think something like composedChildren and composedClassName would be clear.