JetBrains/kotlin-wrappers

Need non-sealed ForwardRefExoticComponent.

leerenbo opened this issue · 1 comments

Is your feature request related to a problem? Please describe.
When writing the wrapper for antd's radio component, there is a ForwardRefExoticComponent that contains other react components define and interface inheritance is required. It is impossible to inherit sealed ForwardRefExoticComponent.

Describe the solution you'd like

"module": "es/index.js", in package.json.

Module only have default export from ./radio as Radio, so I can't wrap separately.

index.js

...
export { default as Radio } from './radio';
export type { RadioChangeEvent, RadioGroupProps, RadioProps } from './radio';
...

Default export extends from CompoundedComponent, which has Intersection Types InternalRadio & { Group: typeof Group; Button: typeof Button; };
InternalRadio is a React.ForwardRefExoticComponent.

/radio/index.d.ts

import Group from './group';
import InternalRadio from './radio';
import Button from './radioButton';
export type { RadioChangeEvent, RadioChangeEventTarget, RadioGroupButtonStyle, RadioGroupContextProps, RadioGroupOptionType, RadioGroupProps, RadioProps, RadioRef, } from './interface';
export { Button, Group };
type CompoundedComponent = typeof InternalRadio & {
    Group: typeof Group;
    Button: typeof Button;
};
declare const Radio: CompoundedComponent;
export default Radio;

/radio/radio.d.ts

import * as React from 'react';
import type { RadioProps, RadioRef } from './interface';
declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<RadioRef>>;
export default Radio;

TS use example

import React from 'react';
import { Flex, Radio } from 'antd';

const App: React.FC = () => (
  <Flex vertical gap="middle">
    <Radio.Group defaultValue="a" buttonStyle="solid">
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b">Shanghai</Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
    <Radio.Group defaultValue="c" buttonStyle="solid">
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b" disabled>
        Shanghai
      </Radio.Button>
      <Radio.Button value="c">Beijing</Radio.Button>
      <Radio.Button value="d">Chengdu</Radio.Button>
    </Radio.Group>
  </Flex>
);

export default App;

Describe alternatives you've considered
I need define Group and Button in Radio.
Extension properties are not allowed to be used in external interfaces.
So non-sealed ForwardRefExoticComponent is need for this antd ui-lib.

Additional context
https://ant-design.antgroup.com/components/radio
https://github.com/ant-design/ant-design/blob/master/components/radio/index.tsx

React 19 is coming.
ForwardRefExoticComponent will be removed as redundant.
Please use FC in external declarations instead .