Type issue on Nav component

[ivan-dalmet]

[Junaid300]

Can you give little detail about this issue? You want us to add proper type for this instead of giving it type any?right? I think i can work on this issue.

[yoannfleurydev]

Can you give little detail about this issue? You want us to add proper type for this instead of giving it type any?right? I think i can work on this issue.

Yes, that's it. We try to avoid any in the codebase.

[Junaid300]

Yes, it is better to remove any type from our code base. I spend sometime on it and i think we may need to adjust our Item according to the Types Flex or MenuItem. I tried a quick trick

const Item: typeof Flex = Flex

I start getting errors on our Item element , it means we need to check the Item element according to our types.
Correct me if i did something wrong

[Junaid300]

@yoannfleurydev , i am stuck with this issue can you assist me what can i do ? Can you give me some pointers for this issue?

[yoannfleurydev]

@yoannfleurydev , i am stuck with this issue can you assist me what can i do ? Can you give me some pointers for this issue?

Hey sorry for the delay, I'm a bit busy at the moment, I'm probably gonna check that this week (maybe on Friday). I let you know what I'll find.

[Junaid300]

Hey, no worry. I explored the types little bit in depth and I got a clue. Flex is typed as ComponentWithAs<"div", FlexProps> and
MenuItem is typed as ComponentWithAs<"div",MenuItemProps>

According to me, this should work but it throw error

  const Item: ComponentWithAs<"div", FlexProps> | ComponentWithAs<"button", MenuItemProps> = isMenu ? MenuItem : Flex;

[yoannfleurydev]

@Junaid300 sorry, got a lot on my plate with a huge Start UI PR and some improvements. I'm checking that tomorrow.

[yoannfleurydev]

Hey, no worry. I explored the types little bit in depth and I got a clue. Flex is typed as ComponentWithAs<"div", FlexProps> and MenuItem is typed as ComponentWithAs<"div",MenuItemProps>

According to me, this should work but it throw error

  const Item: ComponentWithAs<"div", FlexProps> | ComponentWithAs<"button", MenuItemProps> = isMenu ? MenuItem : Flex;

I tried this solution too, but yeah, got Expression produces a union type that is too complex to represent. ts(2590). Because the union of those 2 types generates a type with too much attributes.

[Junaid300]

If we remove {...rest} from <Item>, it start working and when i consoled rest, it gives empty object. Weird..
I am not sure, may be we need to play with the Component props type too.

[Junaid300]

@yoannfleurydev , any update on this ?

[yoannfleurydev]

@yoannfleurydev , any update on this ?

Hi, no sorry, no solution at the moment on that issue. But in my head, I think about a rewrite of how we handle this part to avoid strange types. Mixing MenuItem and Flex to me isn't a good idea anymore.