Bug: BarList takes data with JSX Elements, but shows type error

[jschuur]

Tremor Version

3.13.4

Link to minimal reproduction

n/a

Steps to reproduce

I'm setting the name property of the data array passed into a BarList to a JSX Element and this renders fine, but I get a TypeScript error because the type for data doesn't allow for Elements.

  const listData = data
    ? orderBy(
        data.map((d) => ({
          name: <Badge color={resourceColor(d.resource_type)}>{d.resource}</Badge>,
          value: d.total_cost,
        })),
        'value',
        'desc'
      )
    : [];

What is expected?

Should not show TypeScript error if it can render JSX Elements in the data.

What is actually happening?

TypeScript error.

[severinlandolt]

Hi @jschuur has this issue been resolved with v3.14?

[BenJenkinson]

Hi @severinlandolt, I can confirm it is React.JSXElementConstructor<any> in v3.14.0

Types of property 'icon' are incompatible.
Type 'Element' is not assignable to type 'JSXElementConstructor<any> | undefined'

// It's happy with this
✅ icon: Star
✅ icon: () => <Star />

// But not this:
❌ icon: <Star />

I'm assuming that it doesn't accept icon: <Star /> since it wants to apply CSS classes.

tremor/src/components/vis-elements/BarList/BarList.tsx

Lines 101 to 113 in bd6566b

	{Icon ? (
	<Icon
	className={tremorTwMerge(
	makeBarListClassName("barIcon"),
	// common
	"flex-none h-5 w-5 mr-2",
	// light
	"text-tremor-content",
	// dark
	"dark:text-dark-tremor-content",
	)}
	/>
	) : null}

[severinlandolt]

Hey there! This is a use-case I haven't thought of. Thanks @BenJenkinson for investigating. Since we apply our own className, I am not keen on changing this logic at the moment.

However: We recently launched Tremor Raw, a copy & paste library for React components. Here we have a new version of the BarList, where you have full control over this :)

[BenJenkinson]

Hi @severinlandolt & @jschuur,

My apologies, but I just realised that I misread @jschuur's question.

He wasn't asking about the icon, but the name property.

The name property is rendered as children, so it could easily be typed as a name: ReactNode instead.

tremor/src/components/vis-elements/BarList/BarList.tsx

Lines 132 to 134 in bd6566b

	>
	{item.name}
	</a>

It's currently typed as name: string

tremor/src/components/vis-elements/BarList/BarList.tsx

Line 17 in bd6566b

name: string;

The only thing that would need to change is the two places where the name is used as a fallback for the key prop; can't do that if it is a ReactNode

tremor/src/components/vis-elements/BarList/BarList.tsx

Line 75 in bd6566b

key={item.key ?? item.name}

[severinlandolt]

Just published an overhauled version of the BarList, happy to review a PR for this :)

[github-actions]

🎉 This issue has been resolved in version 3.17.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀