[bug]: dropdownMenu 属性类型不匹配

[bytegolang]

Describe the bug

代码行数

错误描述：Type '{ id?: string | undefined; ref?: HTMLElement | ((el: HTMLElement) => void) | undefined; as: "div"; class: string; }' is not assignable to type 'IntrinsicAttributes & Omit<HTMLAttributes, "as" | keyof MenuItemLabelCommonProps<ElementOf>> & MenuItemLabelOptions & Partial<...> & PolymorphicAttributes<...>'. Type '{ id?: string | undefined; ref?: HTMLElement | ((el: HTMLElement) => void) | undefined; as: "div"; class: string; }' is not assignable to type 'Partial<MenuItemLabelCommonProps>'. Types of property 'ref' are incompatible. Type 'HTMLElement | ((el: HTMLElement) => void) | undefined' is not assignable to type 'HTMLDivElement | ((el: HTMLDivElement) => void) | undefined'. Type 'HTMLElement' is not assignable to type 'HTMLDivElement | ((el: HTMLDivElement) => void) | undefined'. Property 'align' is missing in type 'HTMLElement' but required in type 'HTMLDivElement'.ts(2322) lib.dom.d.ts(10066, 5): 'align' is declared here.

Affected component/components

dropdownMenu

How to reproduce

代码行数

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

window 10
chrome

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[hngngn]

This is because of kobaltedev/kobalte#420 and will be fixed when #86 is merge

For now, you can do this

type DropdownMenuItemLabelProps<T extends ValidComponent = "div"> =
  DropdownMenuPrimitive.DropdownMenuItemLabelProps<T> & {
    class?: string;
  };

export const DropdownMenuItemLabel = <T extends ValidComponent = "div">(
  props: PolymorphicProps<T, DropdownMenuItemLabelProps<T>>,
) => {
  const [local, rest] = splitProps(props as DropdownMenuItemLabelProps, [
    "class",
  ]);

  return (
    <DropdownMenuPrimitive.ItemLabel
      as="div"
      class={cn("px-2 py-1.5 text-sm font-semibold", local.class)}
      {...rest}
    />
  );
};