Add a new type to @clayui/nav in Vertical interface

[kevenleone]

What is your proposal?

Hi everyone, I'm using this @clayui/nav to build a sidebar menu, and I'm facing a Type Error that i want to propose the change.

In this interface

interface IItem extends React.ComponentProps<typeof Nav.Item> {
    active?: boolean;
    onClick?: () => void;
    href?: string;
    label?: string;
}

The label only accepts a string as value, but in the real scenario, you can pass React Component as well.
I had this particular use case to need to use a React Component in the label spot

{
      items: [
        {
          label: i18n.get("scheduled"),
          onClick: () => router.push("/session"),
        },
      ],
      label: (
        <>
          <ClayIcon symbol="home-full" className="mr-2" />
          {i18n.get("sessions")}
        </>
      ),
    },

So my suggestion is just to add React.ReactElement along with String type.

interface IItem extends React.ComponentProps<typeof Nav.Item> {
    active?: boolean;
    onClick?: () => void;
    href?: string;
    label?: string | React.ReactNode;
}

Why would adopting this proposal be beneficial?

This change can avoid type error, since is already possible to pass a React Component to the label

What are the alternatives to this proposal?

I don't see any

[github-actions]

This issue has been merged and will be released in DXP at https://issues.liferay.com/browse/LPS-130566