Extending React Aria Types

[dbani-dev]

What is the best way to extend an react-aria type?

import type { AriaButtonProps } from '@react-types/button';

export interface ButtonProps extends AriaButtonProps<'button'> {
  variant?: 'primary' | 'secondary';
}

export function Button(props: ButtonProps) {
  const ref = useRef<HTMLButtonElement>(null);
  const { buttonProps } = useButton(props, ref);
  return (
    <button {...buttonProps} ref={ref}>{props.children}</button>
   )
}

Seems to throw type error:
Argument of type 'ButtonProps' is not assignable to parameter of type 'AriaButtonProps<ElementType<any>>'. Types of property ''aria-expanded'' are incompatible.

Any ideas?

[LFDanLu]

Seems to work ok in this sandbox: https://codesandbox.io/s/upbeat-matsumoto-vh8iuv?file=/src/App.tsx, maybe something with the config? Also strange that it is complaining about 'AriaButtonProps<ElementType<any>>', feels like that should be ElementType inside since that is the generic you've provided in your interface

[dbani-dev]

@LFDanLu Now I see the issue, for some reason importing from import { useButton } from '@react-aria/button'; has the issue. But importing from import { useButton } from 'react-aria'; is fine. Which package should we be importing from? I probably need to choose either monopackage or package.

[LFDanLu]

I updated the above sandbox to use @react-aria/button, seems to still work for me. What version of the package are you using?

IMO you should import from react-aria since you'll have an easier time of grabbing our other aria packages that way. Tree shaking should automatically handle only bringing in the stuff you need from react-aria so you don't need to worry about bundle size bloat.