[typescript] Type portability for components extended with react-redux

[cgatian]

Repro: https://stackblitz.com/edit/bf5bx4pd-epzkeps4?file=src%2Fbutton.tsx

Ask a question

Note

Appologies in advance, I'm sure the topic of TypeScript portable types is messy, but I was hoping since I've seen the team address this in other issues they might have ideas what could be going wrong.

I created a CustomButton component that extends the Base UI Button.

import { Button as BaseButton } from '@base-ui/react';

export const CustomButton: React.FC<CustomButton.Props> = (props) => {
    return <BaseButton {...props}/>
}

export declare namespace CustomButton {
   export interface Props extends BaseButton.Props;
}

When consumers of CustomButton attempt to extend with their own implementation they receive a portablity issue.

interface ProductButtonProps extends Omit<CustomButton.Props, 'onClick'> {
  product: string;
  onClick: (product: string) => void;
}

const ProductButton = ({ product, onClick, ...props }: ProductButtonProps) => {
  const handleOnClick = () => {
    onClick(product);
  };

  return (
      <CustomButton onClick={handleOnClick} {...props}>
        {product}
      </CustomButton>
  );
};

const mapDispatchToProps = {
  onClick: (product: string) => actions.toggleProductTracking({ product }),
};

// ⚠️ TS Error here
export default connect(null, mapDispatchToProps)(TrackingButtonWithLabel);

The inferred type of 'default' cannot be named without a reference to '../../../../../../../node_modules/@base-ui/react/esm/utils/types'. This is likely not portable. A type annotation is necessary.ts(2742)

Any ideas would be welcomed. Thank you 😄

Edit

I think because onClick and other event handlers use WithPreventBaseUIHandler this augments the type of event handlers. Which makes them not portable for consumers not directly importing Base UI. I think my options are to:

1. Undo the Base UI wrapped event handlers using only the Native React event handler types
2. Explicitly type the component with React.ComponentPropsWithoutRef<'button'> and only expose Base UI props I want consumers to know about.

[CiscoFran10]

@cgatian Could you share a minimal reproducible demo (e.g., StackBlitz or CodeSandbox)? It would really help to investigate the issue.

[cgatian]

@CiscoFran10 yeah I'll try. It would need to be a monorepo setup which takes some time.

The problem is the wrapping type helpers base UI uses are not exported. If they were, I could re export them from my library to make it portable.

[mj12albert]

It seems this is more about the events/event handler types and not just the Button component? 🤔

[cgatian]

@mj12albert you're right. This is for any base UI component event. Sorry about that.

[mj12albert]

@cgatian No worries, as I suspected, it was redux 😅

Repro: https://stackblitz.com/edit/bf5bx4pd-epzkeps4?file=src%2Fbutton.tsx

It seems when generating the declaration files, connect()'s type inference expands everything (notably every single event handler in existence) which references types/paths that I think aren't public (@base-ui/react/utils/types), can you check your .d.ts files to confirm? (I had to set moduleResolution: 'node' in tsconfig to get past the error and build successfully)

I think you're right that if we export those types then it should solve it, try:

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@3946

[cgatian]

@mj12albert when you have a second, how were you able to output the dist shown in stackbliz repo? When I run npm run build Im getting the vite build for the app. Not the tsbuild output.

[mj12albert]

@cgatian I used npx tsc --declaration --emitDeclarationOnly --outDir dist, also had to remove "noEmit": true from the tsconfig