Bug: PixiComponent type issue with Container

[rnike]

Current Behavior

Type error when using PixiComponent with Container in typescript after upgrade the package version to below

• @pixi/react version: 7.1.1
• pixi.js version: 7.3.1
• @pixi/display version: 7.3.1

import { Container as PixiContainer } from '@pixi/display';
import { Container, PixiComponent, applyDefaultProps } from '@pixi/react';
import { ComponentProps } from 'react';

// Type 'Container<DisplayObject>' does not satisfy the constraint 'DisplayObject'.
export default PixiComponent<ComponentProps<typeof Container>, PixiContainer>(
  'CustomContainer',
  {
    create: () => new PixiContainer(),
    applyProps: applyDefaultProps,
  }
);

Type 'Container<DisplayObject>' does not satisfy the constraint 'DisplayObject'.
  Types of property 'children' are incompatible.
    Type 'DisplayObject[]' is not assignable to type 'readonly FederatedEventTarget[]'.
      Type 'DisplayObject' is not assignable to type 'FederatedEventTarget'.
        The types returned by 'parent.eventNames()' are incompatible between these types.
          Type '(keyof DisplayObjectEvents)[]' is not assignable to type '(string | symbol)[]'.
            Type 'keyof DisplayObjectEvents' is not assignable to type 'string | symbol'.
              Type 'number' is not assignable to type 'string | symbol'.ts(2344)

No type error before upgrade, packages version below

• @pixi/react version: 7.0.3
• pixi.js version: 7.2.4
• @pixi/display version: 7.2.4

Expected Behavior

Don't have any type error after upgrade pixi packages

Steps to Reproduce

1. Install the package version in a typescript react project

• @pixi/react version: 7.0.3
• pixi.js version: 7.2.4
• @pixi/display version: 7.2.4

2. Create a component below

import { Container as PixiContainer } from '@pixi/display';
import { Container, PixiComponent, applyDefaultProps } from '@pixi/react';
import { ComponentProps } from 'react';

// Type 'Container<DisplayObject>' does not satisfy the constraint 'DisplayObject'.
export default PixiComponent<ComponentProps<typeof Container>, PixiContainer>(
  'CustomContainer',
  {
    create: () => new PixiContainer(),
    applyProps: applyDefaultProps,
  }
);

3. Upgrade packages to the following version

• @pixi/react version: 7.1.1
• pixi.js version: 7.3.1
• @pixi/display version: 7.3.1

4. Component created in step 2 has type error

Environment

• @pixi/react version: 7.1.1
• pixi.js version: 7.3.1
• @pixi/display version: 7.3.1
• ReactDOM version: 18.2.0
• react version: 18.2.0
• typescript version: 5.0.4

Possible Solution

No response

Additional Information

No response

[rnike]

Follow up:

Found out it might be an issue related to Container's type declaration, simply new a Graphics and add into Container, it shows type error below

[ArthurTimofey]

Same problem here, work around for me is the following:

import P from 'pixi.js';
import { PixiComponent } from '@pixi/react';

type FloorPlanGeneratorDataItem = {
	path: string;
};

type FloorPlanGeneratorProps = {
	data: FloorPlanGeneratorDataItem[];
};

export const FloorPlanGenerator = PixiComponent<
	FloorPlanGeneratorProps,
	P.DisplayObject
>('FloorPlanGenerator', {
	create: ({}) => {
		return new P.Graphics() as P.DisplayObject; // cast it back to DisplayObject for now
	},
});