feat: merge

docs/demo/Cascader.md

@@ -0,0 +1,4 @@
+## Cascader
+
+
+<code src="../examples/Cascader.tsx" />

docs/demo/Mentions.md

@@ -0,0 +1,4 @@
+## Mentions
+
+
+<code src="../examples/Mentions.tsx" />

docs/demo/Select.md

@@ -0,0 +1,4 @@
+## Select
+
+
+<code src="../examples/Select.tsx" />

docs/examples/Cascader.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Cascader } from '../../src';
+
+export default () => {
+  const options = [
+    {
+      value: 'zhejiang',
+      label: 'Zhejiang',
+      children: [
+        {
+          value: 'hangzhou',
+          label: 'Hangzhou',
+          children: [
+            {
+              value: 'xihu',
+              label: 'West Lake',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      value: 'jiangsu',
+      label: 'Jiangsu',
+      children: [
+        {
+          value: 'nanjing',
+          label: 'Nanjing',
+          children: [
+            {
+              value: 'zhonghuamen',
+              label: 'Zhong Hua Men',
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  function onChange(value) {
+    console.log(value);
+  }
+
+  return (
+    <Cascader options={options} onChange={onChange} placeholder="Please select" />
+  );
+};

docs/examples/Mentions.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Mentions } from '../../src';
+import type { OptionProps } from 'antd/es/mentions';
+
+const { Option } = Mentions;
+
+const onChange = (value: string) => {
+  console.log('Change:', value);
+};
+
+const onSelect = (option: OptionProps) => {
+  console.log('select', option);
+};
+
+export default () => {
+  return (
+    <Mentions
+      style={{ width: '100%' }}
+      onChange={onChange}
+      onSelect={onSelect}
+      defaultValue="@afc163"
+    >
+      <Option value="afc163">afc163</Option>
+      <Option value="zombieJ">zombieJ</Option>
+      <Option value="yesmeck">yesmeck</Option>
+    </Mentions>
+  );
+};

docs/examples/Select.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Select } from '../../src';
+const { Option } = Select;
+console.log('Select',Select)
+export default () => {
+  const handleChange = (value: string) => {
+    console.log(`selected ${value}`);
+  };
+  return (
+      <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
+        <Option value="jack">Jack</Option>
+        <Option value="lucy">Lucy</Option>
+        <Option value="disabled" disabled>
+          Disabled
+        </Option>
+        <Option value="Yiminghe">yiminghe</Option>
+      </Select>
+  );
+};

package.json

@@ -57,7 +57,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@umijs/fabric": "^2.5.2",
-    "antd": "^5.0.0-experimental.16",
+    "antd": "^5.0.0-experimental.18",
     "dumi": "^1.1.0",
     "eslint": "^7.18.0",
     "father": "^4.0.0-rc.8",

src/Cascader.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Cascader } from 'antd';
+import warning from 'rc-util/lib/warning';
+
+type CascaderProps = Parameters<typeof Cascader>[0];
+type CascaderRef = CascaderProps['ref'];
+
+type CompatibleCascaderProps = CascaderProps & {
+  /** @deprecated Please use `popupClassName` instead. */
+  dropdownClassName?: string;
+};
+
+const CompatibleCascader = React.forwardRef(
+  (
+    { dropdownClassName, popupClassName, ...restProps }: CompatibleCascaderProps,
+    ref: CascaderRef,
+  ) => {
+    warning(
+      !dropdownClassName,
+      "[antd: Cascader] `dropdownClassName` is removed in v5, please use `popupClassName` instead.",
+    );
+    return (
+      <Cascader {...restProps} popupClassName={popupClassName || dropdownClassName} ref={ref} />
+    );
+  },
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  CompatibleCascader.displayName = 'CompatibleCascader';
+}
+
+export default CompatibleCascader;

src/Mentions.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Mentions } from 'antd';
+import warning from 'rc-util/lib/warning';
+
+type MentionsProps = Parameters<typeof Mentions>[0];
+type MentionsRef = MentionsProps['ref'];
+
+type CompatibleMentionsProps = MentionsProps & {
+  /** @deprecated Please use `popupClassName` instead. */
+  dropdownClassName?: string;
+};
+
+const CompatibleMentions = React.forwardRef(
+  (
+    { dropdownClassName, popupClassName, ...restProps }: CompatibleMentionsProps,
+    ref: MentionsRef,
+  ) => {
+    warning(
+      !dropdownClassName,
+      "[antd: Mentions] `dropdownClassName` is removed in v5, please use `popupClassName` instead.",
+    );
+
+    return (
+      <Mentions {...restProps} popupClassName={popupClassName || dropdownClassName} ref={ref} />
+    );
+  },
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  CompatibleMentions.displayName = 'CompatibleMentions';
+}
+
+export default CompatibleMentions;

src/Select.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Select } from 'antd';
+import warning from 'rc-util/lib/warning';
+import  type { Option } from 'rc-select';
+type SelectProps = Parameters<typeof Select>[0];
+type SelectRef = SelectProps['ref'];
+
+type CompatibleSelectProps = SelectProps& {
+  /** @deprecated Please use `popupClassName` instead. */
+  dropdownClassName?: string;
+};
+
+const CompatibleSelect = React.forwardRef(
+  (
+    { dropdownClassName, popupClassName, ...restProps }: CompatibleSelectProps,
+    ref: SelectRef,
+  ) => {
+    warning(
+      !dropdownClassName,
+      "[antd: Select] `dropdownClassName` is removed in v5, please use `popupClassName` instead.",
+    );
+
+    return (
+      <Select {...restProps} popupClassName={popupClassName || dropdownClassName} ref={ref} />
+    );
+  },
+)  as unknown as ((
+  props: React.PropsWithChildren<SelectProps>,
+) => React.ReactElement) & {
+  displayName: string;
+  Option: typeof Option;
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  CompatibleSelect.displayName = 'CompatibleSelect';
+}
+
+export default CompatibleSelect;

src/index.tsx

@@ -1,5 +1,6 @@
 export * from 'antd';
-import AutoComplete from './AutoComplete';
-import TreeSelect from './TreeSelect';
-
-export { AutoComplete,TreeSelect};
+export { default as AutoComplete } from './AutoComplete';
+export { default as Cascader } from './Cascader';
+export { default as Mentions } from './Mentions';
+export { default as Select } from './Select';
+export { default as TreeSelect } from './TreeSelect';

tests/Cascader.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Cascader } from '../src';
+import { render } from '@testing-library/react';
+
+describe('Cascader', () => {
+
+  const options = [
+    {
+      value: 'zhejiang',
+      label: 'Zhejiang',
+      children: [
+        {
+          value: 'hangzhou',
+          label: 'Hangzhou',
+          children: [
+            {
+              value: 'xihu',
+              label: 'West Lake',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      value: 'jiangsu',
+      label: 'Jiangsu',
+      children: [
+        {
+          value: 'nanjing',
+          label: 'Nanjing',
+          children: [
+            {
+              value: 'zhonghuamen',
+              label: 'Zhong Hua Men',
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  it('dropdownClassName', async () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { container } = render(
+      <Cascader options={options} dropdownClassName="test" />
+    );
+
+    expect(errSpy).toHaveBeenCalledWith(
+      "Warning: [antd: Cascader] `dropdownClassName` is removed in v5, please use `popupClassName` instead.",
+    );
+
+    // TODO: Remove this when antd release version
+    // expect(container.querySelector('.test')).toBeTruthy();
+
+    errSpy.mockRestore();
+  });
+});

tests/Mentions.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Mentions } from '../src';
+import { render } from '@testing-library/react';
+
+describe('Mentions', () => {
+  it('dropdownClassName', async () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { container } = render(
+      <Mentions
+        dropdownClassName="test"
+      />,
+    );
+
+    expect(errSpy).toHaveBeenCalledWith(
+      "Warning: [antd: Mentions] `dropdownClassName` is removed in v5, please use `popupClassName` instead.",
+    );
+    // TODO: Remove this when antd release version
+    // expect(container.querySelector('.test')).toBeTruthy();
+
+    errSpy.mockRestore();
+  });
+});

tests/Select.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Select } from '../src';
+import { render } from '@testing-library/react';
+
+describe('Select', () => {
+  it('dropdownClassName', async () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { container } = render(
+      <Select
+        open
+        dropdownClassName="test"
+        value="1"
+      >
+        <Select.Option value="1">1</Select.Option>
+        <Select.Option value="2">2</Select.Option>
+      </Select>,
+    );
+
+    expect(errSpy).toHaveBeenCalledWith(
+      "Warning: [antd: Select] `dropdownClassName` is removed in v5, please use `popupClassName` instead.",
+    );
+
+    // TODO: Remove this when antd release version
+    // expect(container.querySelector('.test')).toBeTruthy();
+
+    errSpy.mockRestore();
+  });
+});