Merge remote-tracking branch 'origin/next' into refactor-date

# Conflicts:
#	v2-doc

CHANGELOG.en-US.md

@@ -10,6 +10,22 @@
 
 ---
 
+## 2.2.5
+
+`2021-08-11`
+
+- 🌟 `Select` supports customizing nodes through option slots [68c1f4](https://github.com/vueComponent/ant-design-vue/commit/68c1f4550108a3a6bbe4f1b2c5c168523fd6c84a)
+- 🐞 Fix the problem that the pop-up window component in the development environment does not display in the lower version of chrome, and avoid the pop-up window flashing [#4409](https://github.com/vueComponent/ant-design-vue/issues/4409)
+- 🐞 Fix the problem of not scrolling to the active position when `Select` is opened [ccb240](https://github.com/vueComponent/ant-design-vue/commit/ccb24016c07632f49550646c971060c402586c67)
+
+## 2.2.4
+
+`2021-08-10`
+
+- 🌟 Support Vue@3.2 [#4490](https://github.com/vueComponent/ant-design-vue/issues/4490)
+- 🌟 Automatically hide the horizontal scroll bar of `Table` [#4484](https://github.com/vueComponent/ant-design-vue/issues/4484)
+- 🐞 Fix the issue of `Progress` trailColor not taking effect [#4483](https://github.com/vueComponent/ant-design-vue/issues/4483)
+
 ## 2.2.3
 
 `2021-08-07`

CHANGELOG.zh-CN.md

@@ -10,6 +10,22 @@
 
 ---
 
+## 2.2.5
+
+`2021-08-11`
+
+- 🌟 `Select` 支持通过 option 插槽定制化节点 [68c1f4](https://github.com/vueComponent/ant-design-vue/commit/68c1f4550108a3a6bbe4f1b2c5c168523fd6c84a)
+- 🐞 修复开发环境下弹窗类组件在低版本 chrome 下，不显示问题，并避免弹窗闪动 [#4409](https://github.com/vueComponent/ant-design-vue/issues/4409)
+- 🐞 修复 `Select` 打开时没有滚动到激活位置问题 [ccb240](https://github.com/vueComponent/ant-design-vue/commit/ccb24016c07632f49550646c971060c402586c67)
+
+## 2.2.4
+
+`2021-08-10`
+
+- 🌟 支持 Vue@3.2 [#4490](https://github.com/vueComponent/ant-design-vue/issues/4490)
+- 🌟 自动隐藏 `Table` 横向滚动条 [#4484](https://github.com/vueComponent/ant-design-vue/issues/4484)
+- 🐞 修复 `Progress` trailColor 不生效问题 [#4483](https://github.com/vueComponent/ant-design-vue/issues/4483)
+
 ## 2.2.3
 
 `2021-08-07`

components/_util/transition.tsx

@@ -1,5 +1,6 @@
 import type { BaseTransitionProps, CSSProperties, Ref } from 'vue';
-import { getCurrentInstance, onUpdated } from 'vue';
+import { onBeforeUpdate } from 'vue';
+import { getCurrentInstance } from 'vue';
 import { defineComponent, nextTick, Transition as T, TransitionGroup as TG } from 'vue';
 
 export const getTransitionProps = (transitionName: string, opt: object = {}) => {
@@ -9,7 +10,7 @@ export const getTransitionProps = (transitionName: string, opt: object = {}) =>
   const transitionProps = transitionName
     ? {
         appear: true,
-        appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
+        // appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
         // appearActiveClass: `antdv-base-transtion`,
         appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
         enterFromClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
@@ -28,7 +29,7 @@ export const getTransitionGroupProps = (transitionName: string, opt: object = {}
   const transitionProps = transitionName
     ? {
         appear: true,
-        appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
+        // appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
         appearActiveClass: `${transitionName}`,
         appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
         enterFromClass: `${transitionName}-appear ${transitionName}-enter ${transitionName}-appear-prepare ${transitionName}-enter-prepare`,
@@ -51,7 +52,7 @@ if (process.env.NODE_ENV === 'test') {
     inheritAttrs: false,
     setup(_props, { slots, attrs }) {
       const instance = getCurrentInstance();
-      onUpdated(() => {
+      onBeforeUpdate(() => {
         const child = instance.subTree.children[0];
         if (child && child.dirs && child.dirs[0]) {
           const value = child.dirs[0].value;

components/auto-complete/InputElement.tsx

@@ -1,9 +0,0 @@
-import { cloneElement } from '../_util/vnode';
-import { flattenChildren } from '../_util/props-util';
-
-const InputElement = (_: any, { attrs, slots }) => {
-  const children = flattenChildren(slots.default?.())[0];
-  return cloneElement(children, { ...attrs });
-};
-InputElement.inheritAttrs = false;
-export default InputElement;

components/auto-complete/index.tsx

@@ -2,7 +2,6 @@ import type { App, Plugin, VNode, ExtractPropTypes } from 'vue';
 import { defineComponent, inject, provide } from 'vue';
 import Select, { SelectProps } from '../select';
 import Input from '../input';
-import InputElement from './InputElement';
 import PropTypes from '../_util/vue-types';
 import { defaultConfigProvider } from '../config-provider';
 import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
@@ -72,7 +71,7 @@ const AutoComplete = defineComponent({
     getInputElement() {
       const children = getSlot(this);
       const element = children.length ? children[0] : <Input lazy={false} />;
-      return <InputElement {...element.props}>{element}</InputElement>;
+      return element;
     },
 
     focus() {

components/cascader/__tests__/__snapshots__/index.test.js.snap

@@ -113,4 +113,4 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
 </div>
 `;
 
-exports[`Cascader support controlled mode 1`] = `<!----><span class="ant-cascader-picker" tabindex="0"><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><input type="text" readonly="" autocomplete="off" class="ant-input ant-cascader-input "><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>`;
+exports[`Cascader support controlled mode 1`] = `<!----><span class="ant-cascader-picker" tabindex="0"><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><input type="text" readonly="" autocomplete="off" class="ant-input ant-cascader-input"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>`;

components/descriptions/Row.tsx

@@ -50,7 +50,7 @@ const Row: FunctionalComponent<RowProps> = props => {
       if (typeof component === 'string') {
         return (
           <Cell
-            key={`${type}-${key || index}`}
+            key={`${type}-${String(key) || index}`}
             class={className}
             style={style}
             labelStyle={{ ...rootLabelStyle.value, ...labelStyle }}
@@ -68,7 +68,7 @@ const Row: FunctionalComponent<RowProps> = props => {
 
       return [
         <Cell
-          key={`label-${key || index}`}
+          key={`label-${String(key) || index}`}
           class={className}
           style={{ ...rootLabelStyle.value, ...style, ...labelStyle }}
           span={1}
@@ -79,7 +79,7 @@ const Row: FunctionalComponent<RowProps> = props => {
           label={label}
         />,
         <Cell
-          key={`content-${key || index}`}
+          key={`content-${String(key) || index}`}
           class={className}
           style={{ ...rootContentStyle.value, ...style, ...contentStyle }}
           span={span * 2 - 1}

components/drawer/index.tsx

@@ -123,7 +123,7 @@ const Drawer = defineComponent({
       }
       if (!this.visible) {
         this.destroyClose = true;
-        this.$forceUpdate();
+        (this as any).$forceUpdate();
       }
     },
 

components/input/Input.tsx

@@ -128,7 +128,7 @@ export default defineComponent({
       if (!hasProp(this, 'value')) {
         this.stateValue = value;
       } else {
-        this.$forceUpdate();
+        (this as any).$forceUpdate();
       }
       nextTick(() => {
         callback && callback();

components/input/TextArea.tsx

@@ -55,7 +55,7 @@ export default defineComponent({
       if (!hasProp(this, 'value')) {
         this.stateValue = value;
       } else {
-        this.$forceUpdate();
+        (this as any).$forceUpdate();
       }
       nextTick(() => {
         callback && callback();

components/menu/src/MenuItem.tsx

@@ -10,6 +10,7 @@ import type { MenuInfo } from './interface';
 import KeyCode from '../../_util/KeyCode';
 import useDirectionStyle from './hooks/useDirectionStyle';
 import Overflow from '../../vc-overflow';
+import devWarning from '../../vc-util/devWarning';
 
 let indexGuid = 0;
 const menuItemProps = {
@@ -30,7 +31,15 @@ export default defineComponent({
   slots: ['icon', 'title'],
   setup(props, { slots, emit, attrs }) {
     const instance = getCurrentInstance();
-    const key = instance.vnode.key;
+
+    const key =
+      typeof instance.vnode.key === 'symbol' ? String(instance.vnode.key) : instance.vnode.key;
+    devWarning(
+      typeof instance.vnode.key !== 'symbol',
+      'MenuItem',
+      `MenuItem \`:key="${String(key)}"\` not support Symbol type`,
+    );
+
     const eventKey = `menu_item_${++indexGuid}_$$_${key}`;
     const { parentEventKeys, parentKeys } = useInjectKeyPath();
     const {

components/menu/src/SubMenu.tsx

@@ -12,6 +12,8 @@ import InlineSubMenuList from './InlineSubMenuList';
 import Transition, { getTransitionProps } from '../../_util/transition';
 import { cloneElement } from '../../_util/vnode';
 import Overflow from '../../vc-overflow';
+import devWarning from '../../vc-util/devWarning';
+import isValid from '../../_util/isValid';
 
 let indexGuid = 0;
 
@@ -39,14 +41,17 @@ export default defineComponent({
     useProvideFirstLevel(false);
 
     const instance = getCurrentInstance();
-    const key =
+    const vnodeKey =
-      instance.vnode.key !== null ? instance.vnode.key : `sub_menu_${++indexGuid}_$$_not_set_key`;
+      typeof instance.vnode.key === 'symbol' ? String(instance.vnode.key) : instance.vnode.key;
-
+    devWarning(
+      typeof instance.vnode.key !== 'symbol',
+      'SubMenu',
+      `SubMenu \`:key="${String(vnodeKey)}"\` not support Symbol type`,
+    );
+    const key = isValid(vnodeKey) ? vnodeKey : `sub_menu_${++indexGuid}_$$_not_set_key`;
     const eventKey =
       props.eventKey ??
-      (instance.vnode.key !== null
+      (isValid(vnodeKey) ? `sub_menu_${++indexGuid}_$$_${vnodeKey}` : (key as string));
-        ? `sub_menu_${++indexGuid}_$$_${instance.vnode.key}`
-        : (key as string));
     const { parentEventKeys, parentInfo, parentKeys } = useInjectKeyPath();
     const keysPath = computed(() => [...parentKeys.value, key]);
     const eventKeysPath = computed(() => [...parentEventKeys.value, eventKey]);

components/select/index.tsx

@@ -76,7 +76,15 @@ const Select = defineComponent({
   props: SelectProps(),
   SECRET_COMBOBOX_MODE_DO_NOT_USE: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
   emits: ['change', 'update:value'],
-  slots: ['notFoundContent', 'suffixIcon', 'itemIcon', 'removeIcon', 'clearIcon', 'dropdownRender'],
+  slots: [
+    'notFoundContent',
+    'suffixIcon',
+    'itemIcon',
+    'removeIcon',
+    'clearIcon',
+    'dropdownRender',
+    'option',
+  ],
   setup(props, { attrs, emit, slots, expose }) {
     const selectRef = ref(null);
 
@@ -194,6 +202,7 @@ const Select = defineComponent({
           dropdownClassName={rcSelectRtlDropDownClassName}
           onChange={triggerChange}
           dropdownRender={selectProps.dropdownRender || slots.dropdownRender}
+          v-slots={{ option: slots.option }}
         >
           {slots.default?.()}
         </RcSelect>

components/table/filterDropdown.tsx

@@ -98,7 +98,7 @@ export default defineComponent({
       this.setVisible(false);
       // Call `setSelectedKeys` & `confirm` in the same time will make filter data not up to date
       // https://github.com/ant-design/ant-design/issues/12284
-      this.$forceUpdate();
+      (this as any).$forceUpdate();
       nextTick(this.confirmFilter2);
     },
 

components/upload/UploadList.tsx

@@ -64,7 +64,7 @@ export default defineComponent({
           previewFile(file.originFileObj).then(previewDataUrl => {
             // Need append '' to avoid dead loop
             file.thumbUrl = previewDataUrl || '';
-            this.$forceUpdate();
+            (this as any).$forceUpdate();
           });
         }
       });

components/vc-select/OptionList.tsx

@@ -5,7 +5,7 @@ import classNames from '../_util/classNames';
 import pickAttrs from '../_util/pickAttrs';
 import { isValidElement } from '../_util/props-util';
 import createRef from '../_util/createRef';
-import type { VNodeChild } from 'vue';
+import type { PropType, VNodeChild } from 'vue';
 import { computed, defineComponent, nextTick, reactive, watch } from 'vue';
 import List from '../vc-virtual-list/List';
 import type {
@@ -61,7 +61,7 @@ const OptionListProps = {
   virtual: PropTypes.looseBool,
 
   onSelect: PropTypes.func,
-  onToggleOpen: PropTypes.func,
+  onToggleOpen: { type: Function as PropType<(open?: boolean) => void> },
   /** Tell Select that some value is now active to make accessibility work */
   onActiveValue: PropTypes.func,
   onScroll: PropTypes.func,
@@ -77,6 +77,7 @@ const OptionListProps = {
 const OptionList = defineComponent<OptionListProps, { state?: any }>({
   name: 'OptionList',
   inheritAttrs: false,
+  slots: ['option'],
   setup(props) {
     const itemPrefixCls = computed(() => `${props.prefixCls}-item`);
 
@@ -150,7 +151,9 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
           const value = Array.from(props.values)[0];
           const index = memoFlattenOptions.value.findIndex(({ data }) => data.value === value);
           setActive(index);
-          scrollIntoView(index);
+          nextTick(() => {
+            scrollIntoView(index);
+          });
         }
         // Force trigger scrollbar visible when open
         if (props.open) {
@@ -268,6 +271,7 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
       setActive,
       onSelectValue,
       memoFlattenOptions,
+      $slots,
     } = this as any;
     const {
       id,
@@ -281,6 +285,7 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
       onScroll,
       onMouseenter,
     } = this.$props as OptionListProps;
+    const renderOption = $slots.option;
     const { activeIndex } = this.state;
     // ========================== Render ==========================
     if (memoFlattenOptions.length === 0) {
@@ -315,12 +320,11 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
           onMouseenter={onMouseenter}
           children={({ group, groupOption, data }, itemIndex) => {
             const { label, key } = data;
-
             // Group
             if (group) {
               return (
                 <div class={classNames(itemPrefixCls, `${itemPrefixCls}-group`)}>
-                  {label !== undefined ? label : key}
+                  {renderOption ? renderOption(data) : label !== undefined ? label : key}
                 </div>
               );
             }
@@ -387,7 +391,9 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
                 }}
                 style={style}
               >
-                <div class={`${optionPrefixCls}-content`}>{content}</div>
+                <div class={`${optionPrefixCls}-content`}>
+                  {renderOption ? renderOption(data) : content}
+                </div>
                 {isValidElement(menuItemSelectedIcon) || selected}
                 {iconVisible && (
                   <TransBtn

components/vc-select/Select.tsx

@@ -84,6 +84,7 @@ const Select = defineComponent<Omit<ExportedSelectProps, 'children'>>({
           ref={selectRef}
           {...(props as any)}
           {...attrs}
+          v-slots={slots}
           children={slots.default?.() || []}
         />
       );

components/vc-select/Selector/Input.tsx

@@ -74,7 +74,7 @@ const Input = defineComponent<InputProps, { VCSelectContainerEvent: any; blurTim
       inputRef,
       attrs,
     } = this.$props as InputProps;
-    let inputNode: any = withDirectives((inputElement || <input />) as VNode, [[antInput]]);
+    let inputNode: any = inputElement || withDirectives((<input />) as VNode, [[antInput]]);
 
     const inputProps = inputNode.props || {};
     const {

components/vc-select/Selector/MultipleSelector.tsx

@@ -7,9 +7,9 @@ import type {
   DisplayLabelValueType,
 } from '../interface/generator';
 import type { RenderNode } from '../interface';
-import type { InnerSelectorProps } from '.';
+import type { InnerSelectorProps } from './interface';
 import Input from './Input';
-import type { VNodeChild, Ref } from 'vue';
+import type { VNodeChild, Ref, PropType } from 'vue';
 import { computed, defineComponent, onMounted, ref, watch } from 'vue';
 import classNames from '../../_util/classNames';
 import pickAttrs from '../../_util/pickAttrs';
@@ -17,24 +17,24 @@ import PropTypes from '../../_util/vue-types';
 import type { VueNode } from '../../_util/type';
 import Overflow from '../../vc-overflow';
 
-interface SelectorProps extends InnerSelectorProps {
+type SelectorProps = InnerSelectorProps & {
   // Icon
   removeIcon?: RenderNode;
 
   // Tags
   maxTagCount?: number | 'responsive';
   maxTagTextLength?: number;
-  maxTagPlaceholder?: VNodeChild;
+  maxTagPlaceholder?: VNodeChild | ((omittedValues: LabelValueType[]) => VNodeChild);
   tokenSeparators?: string[];
   tagRender?: (props: CustomTagProps) => VNodeChild;
-  onToggleOpen: (open?: boolean) => void;
+  onToggleOpen: any;
 
   // Motion
   choiceTransitionName?: string;
 
   // Event
   onSelect: (value: RawValueType, option: { selected: boolean }) => void;
-}
+};
 
 const props = {
   id: PropTypes.string,
@@ -62,6 +62,7 @@ const props = {
   ),
   tagRender: PropTypes.func,
 
+  onToggleOpen: { type: Function as PropType<(open?: boolean) => void> },
   onSelect: PropTypes.func,
   onInputChange: PropTypes.func,
   onInputPaste: PropTypes.func,
@@ -78,6 +79,8 @@ const onPreventMouseDown = (event: MouseEvent) => {
 
 const SelectSelector = defineComponent<SelectorProps>({
   name: 'MultipleSelectSelector',
+  inheritAttrs: false,
+  props: props as any,
   setup(props) {
     const measureRef = ref();
     const inputWidth = ref(0);
@@ -278,6 +281,5 @@ const SelectSelector = defineComponent<SelectorProps>({
     };
   },
 });
-SelectSelector.inheritAttrs = false;
+
-SelectSelector.props = props;
 export default SelectSelector;

components/vc-select/Selector/SingleSelector.tsx

@@ -1,6 +1,6 @@
 import pickAttrs from '../../_util/pickAttrs';
 import Input from './Input';
-import type { InnerSelectorProps } from '.';
+import type { InnerSelectorProps } from './interface';
 import type { VNodeChild } from 'vue';
 import { computed, defineComponent, Fragment, ref, watch } from 'vue';
 import PropTypes from '../../_util/vue-types';

components/vc-select/Selector/index.tsx

@@ -14,36 +14,12 @@ import SingleSelector from './SingleSelector';
 import type { LabelValueType, RawValueType, CustomTagProps } from '../interface/generator';
 import type { RenderNode, Mode } from '../interface';
 import useLock from '../hooks/useLock';
-import type { VNodeChild } from 'vue';
+import type { VNodeChild, PropType } from 'vue';
 import { defineComponent } from 'vue';
-import type { RefObject } from '../../_util/createRef';
 import createRef from '../../_util/createRef';
 import PropTypes from '../../_util/vue-types';
 import type { VueNode } from '../../_util/type';
 
-export interface InnerSelectorProps {
-  prefixCls: string;
-  id: string;
-  mode: Mode;
-  inputRef: RefObject;
-  placeholder?: VNodeChild;
-  disabled?: boolean;
-  autofocus?: boolean;
-  autocomplete?: string;
-  values: LabelValueType[];
-  showSearch?: boolean;
-  searchValue: string;
-  accessibilityIndex: number;
-  open: boolean;
-  tabindex?: number | string;
-  onInputKeyDown: EventHandlerNonNull;
-  onInputMouseDown: EventHandlerNonNull;
-  onInputChange: EventHandlerNonNull;
-  onInputPaste: EventHandlerNonNull;
-  onInputCompositionStart: EventHandlerNonNull;
-  onInputCompositionEnd: EventHandlerNonNull;
-}
-
 export interface SelectorProps {
   id: string;
   prefixCls: string;
@@ -67,7 +43,7 @@ export interface SelectorProps {
   // Tags
   maxTagCount?: number | 'responsive';
   maxTagTextLength?: number;
-  maxTagPlaceholder?: VNodeChild;
+  maxTagPlaceholder?: VNodeChild | ((omittedValues: LabelValueType[]) => VNodeChild);
   tagRender?: (props: CustomTagProps) => VNodeChild;
 
   /** Check if `tokenSeparators` contains `\n` or `\r\n` */
@@ -92,6 +68,52 @@ export interface SelectorProps {
 
 const Selector = defineComponent<SelectorProps>({
   name: 'Selector',
+  inheritAttrs: false,
+  props: {
+    id: PropTypes.string,
+    prefixCls: PropTypes.string,
+    showSearch: PropTypes.looseBool,
+    open: PropTypes.looseBool,
+    /** Display in the Selector value, it's not same as `value` prop */
+    values: PropTypes.array,
+    multiple: PropTypes.looseBool,
+    mode: PropTypes.string,
+    searchValue: PropTypes.string,
+    activeValue: PropTypes.string,
+    inputElement: PropTypes.any,
+
+    autofocus: PropTypes.looseBool,
+    accessibilityIndex: PropTypes.number,
+    tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    disabled: PropTypes.looseBool,
+    placeholder: PropTypes.any,
+    removeIcon: PropTypes.any,
+
+    // Tags
+    maxTagCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    maxTagTextLength: PropTypes.number,
+    maxTagPlaceholder: PropTypes.any,
+    tagRender: PropTypes.func,
+
+    /** Check if `tokenSeparators` contains `\n` or `\r\n` */
+    tokenWithEnter: PropTypes.looseBool,
+
+    // Motion
+    choiceTransitionName: PropTypes.string,
+
+    onToggleOpen: { type: Function as PropType<(open?: boolean) => void> },
+    /** `onSearch` returns go next step boolean to check if need do toggle open */
+    onSearch: PropTypes.func,
+    onSearchSubmit: PropTypes.func,
+    onSelect: PropTypes.func,
+    onInputKeyDown: PropTypes.func,
+
+    /**
+     * @private get real dom for trigger align.
+     * This may be removed after React provides replacement of `findDOMNode`
+     */
+    domRef: PropTypes.func,
+  } as any,
   setup(props) {
     const inputRef = createRef();
     let compositionStatus = false;
@@ -258,51 +280,4 @@ const Selector = defineComponent<SelectorProps>({
   },
 });
 
-Selector.inheritAttrs = false;
-Selector.props = {
-  id: PropTypes.string,
-  prefixCls: PropTypes.string,
-  showSearch: PropTypes.looseBool,
-  open: PropTypes.looseBool,
-  /** Display in the Selector value, it's not same as `value` prop */
-  values: PropTypes.array,
-  multiple: PropTypes.looseBool,
-  mode: PropTypes.string,
-  searchValue: PropTypes.string,
-  activeValue: PropTypes.string,
-  inputElement: PropTypes.any,
-
-  autofocus: PropTypes.looseBool,
-  accessibilityIndex: PropTypes.number,
-  tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  disabled: PropTypes.looseBool,
-  placeholder: PropTypes.any,
-  removeIcon: PropTypes.any,
-
-  // Tags
-  maxTagCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  maxTagTextLength: PropTypes.number,
-  maxTagPlaceholder: PropTypes.any,
-  tagRender: PropTypes.func,
-
-  /** Check if `tokenSeparators` contains `\n` or `\r\n` */
-  tokenWithEnter: PropTypes.looseBool,
-
-  // Motion
-  choiceTransitionName: PropTypes.string,
-
-  onToggleOpen: PropTypes.func,
-  /** `onSearch` returns go next step boolean to check if need do toggle open */
-  onSearch: PropTypes.func,
-  onSearchSubmit: PropTypes.func,
-  onSelect: PropTypes.func,
-  onInputKeyDown: PropTypes.func,
-
-  /**
-   * @private get real dom for trigger align.
-   * This may be removed after React provides replacement of `findDOMNode`
-   */
-  domRef: PropTypes.func,
-};
-
 export default Selector;

components/vc-select/Selector/interface.ts

@@ -0,0 +1,27 @@
+import type { RefObject } from '../../_util/createRef';
+import type { VNodeChild } from 'vue';
+import type { Mode } from '../interface';
+import type { LabelValueType } from '../interface/generator';
+
+export interface InnerSelectorProps {
+  prefixCls: string;
+  id: string;
+  mode: Mode;
+  inputRef: RefObject;
+  placeholder?: VNodeChild;
+  disabled?: boolean;
+  autofocus?: boolean;
+  autocomplete?: string;
+  values: LabelValueType[];
+  showSearch?: boolean;
+  searchValue: string;
+  accessibilityIndex: number;
+  open: boolean;
+  tabindex?: number | string;
+  onInputKeyDown: EventHandlerNonNull;
+  onInputMouseDown: EventHandlerNonNull;
+  onInputChange: EventHandlerNonNull;
+  onInputPaste: EventHandlerNonNull;
+  onInputCompositionStart: EventHandlerNonNull;
+  onInputCompositionEnd: EventHandlerNonNull;
+}

components/vc-select/generate.tsx

@@ -340,6 +340,7 @@ export default function generateSelector<
   } = config as any;
   const Select = defineComponent<SelectProps<OptionsType, ValueType>>({
     name: 'Select',
+    slots: ['option'],
     setup(props: SelectProps<OptionsType, ValueType>) {
       const useInternalProps = computed(
         () => props.internalProps && props.internalProps.mark === INTERNAL_PROPS_MARK,
@@ -1057,7 +1058,7 @@ export default function generateSelector<
     methods: {
       // We need force update here since popup dom is render async
       onPopupMouseEnter() {
-        this.$forceUpdate();
+        (this as any).$forceUpdate();
       },
     },
     render() {
@@ -1093,6 +1094,7 @@ export default function generateSelector<
         displayValues,
         activeValue,
         onSearchSubmit,
+        $slots: slots,
       } = this as any;
       const {
         prefixCls = defaultPrefixCls,
@@ -1204,6 +1206,7 @@ export default function generateSelector<
           menuItemSelectedIcon={menuItemSelectedIcon}
           virtual={virtual !== false && dropdownMatchSelectWidth !== false}
           onMouseenter={onPopupMouseEnter}
+          v-slots={{ option: slots.option }}
         />
       );
 

components/vc-select/utils/legacyUtil.ts

@@ -7,8 +7,9 @@ function convertNodeToOption(node: VNode): OptionData {
     key,
     children,
     props: { value, disabled, ...restProps },
-  } = node as VNode & {
+  } = node as Omit<VNode, 'key'> & {
     children: { default?: () => any };
+    key: string | number;
   };
   const child = children && children.default ? children.default() : undefined;
   return {
@@ -16,7 +17,7 @@ function convertNodeToOption(node: VNode): OptionData {
     value: value !== undefined ? value : key,
     children: child,
     disabled: disabled || disabled === '', // support <a-select-option disabled />
-    ...restProps,
+    ...(restProps as Omit<typeof restProps, 'key'>),
   };
 }
 
@@ -46,7 +47,7 @@ export function convertChildrenToData(
       const child = children && children.default ? children.default() : undefined;
       const label = props?.label || children.label?.() || key;
       return {
-        key: `__RC_SELECT_GRP__${key === null ? index : key}__`,
+        key: `__RC_SELECT_GRP__${key === null ? index : String(key)}__`,
         ...props,
         label,
         options: convertChildrenToData(child || []),

components/vc-table/src/BaseTable.jsx

@@ -132,16 +132,13 @@ const BaseTable = {
 
   render() {
     const { sComponents: components, prefixCls, scroll, data } = this.table;
-    const { expander, tableClassName, hasHead, hasBody, fixed, isAnyColumnsFixed } = this.$props;
+    const { expander, tableClassName, hasHead, hasBody, fixed } = this.$props;
     const columns = this.getColumns();
     const tableStyle = {};
 
     if (!fixed && scroll.x) {
-      // 当有固定列时，width auto 会导致 body table 的宽度撑不开，从而固定列无法对齐
-      // 详情见：https://github.com/ant-design/ant-design/issues/22160
-      const tableWidthScrollX = isAnyColumnsFixed ? 'max-content' : 'auto';
       // not set width, then use content fixed width
-      tableStyle.width = scroll.x === true ? tableWidthScrollX : scroll.x;
+      tableStyle.width = scroll.x === true ? 'auto' : scroll.x;
       tableStyle.width =
         typeof tableStyle.width === 'number' ? `${tableStyle.width}px` : tableStyle.width;
     }

components/vc-table/src/BodyTable.jsx

@@ -1,13 +1,11 @@
 import { inject } from 'vue';
-import PropTypes, { withUndefined } from '../../_util/vue-types';
+import PropTypes from '../../_util/vue-types';
-import { measureScrollbar } from './utils';
 import BaseTable from './BaseTable';
 
 export default {
   name: 'BodyTable',
   inheritAttrs: false,
   props: {
-    fixed: withUndefined(PropTypes.oneOfType([PropTypes.string, PropTypes.looseBool])),
     columns: PropTypes.array.isRequired,
     tableClassName: PropTypes.string.isRequired,
     handleBodyScroll: PropTypes.func.isRequired,
@@ -25,7 +23,6 @@ export default {
     const { prefixCls, scroll } = this.table;
     const {
       columns,
-      fixed,
       tableClassName,
       getRowKey,
       handleBodyScroll,
@@ -35,34 +32,26 @@ export default {
     } = this;
     let { useFixedHeader, saveRef } = this.table;
     const bodyStyle = { ...this.table.bodyStyle };
-    const innerBodyStyle = {};
-
-    if (scroll.x || fixed) {
-      bodyStyle.overflowX = bodyStyle.overflowX || 'scroll';
-      // Fix weired webkit render bug
-      // https://github.com/ant-design/ant-design/issues/7783
-      bodyStyle.WebkitTransform = 'translate3d (0, 0, 0)';
-    }
 
     if (scroll.y) {
       // maxHeight will make fixed-Table scrolling not working
       // so we only set maxHeight to body-Table here
       let maxHeight = bodyStyle.maxHeight || scroll.y;
       maxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
-      if (fixed) {
+
-        innerBodyStyle.maxHeight = maxHeight;
+      bodyStyle.maxHeight = maxHeight;
-        innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
-      } else {
-        bodyStyle.maxHeight = maxHeight;
-      }
       bodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
       useFixedHeader = true;
+    }
 
-      // Add negative margin bottom for scroll bar overflow bug
+    if (scroll.x) {
-      const scrollbarWidth = measureScrollbar({ direction: 'vertical' });
+      bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
-      if (scrollbarWidth > 0 && fixed) {
+      // Fix weired webkit render bug
-        bodyStyle.marginBottom = `-${scrollbarWidth}px`;
+      // https://github.com/ant-design/ant-design/issues/7783
-        bodyStyle.paddingBottom = '0px';
+      bodyStyle.WebkitTransform = 'translate3d (0, 0, 0)';
+
+      if (!scroll.y) {
+        bodyStyle.overflowY = 'hidden';
       }
     }
 
@@ -71,7 +60,6 @@ export default {
         tableClassName={tableClassName}
         hasHead={!useFixedHeader}
         hasBody
-        fixed={fixed}
         columns={columns}
         expander={expander}
         getRowKey={getRowKey}
@@ -79,29 +67,6 @@ export default {
       />
     );
 
-    if (fixed && columns.length) {
-      let refName;
-      if (columns[0].fixed === 'left' || columns[0].fixed === true) {
-        refName = 'fixedColumnsBodyLeft';
-      } else if (columns[0].fixed === 'right') {
-        refName = 'fixedColumnsBodyRight';
-      }
-      delete bodyStyle.overflowX;
-      delete bodyStyle.overflowY;
-      return (
-        <div key="bodyTable" class={`${prefixCls}-body-outer`} style={{ ...bodyStyle }}>
-          <div
-            class={`${prefixCls}-body-inner`}
-            style={innerBodyStyle}
-            ref={saveRef(refName)}
-            onWheel={handleWheel}
-            onScroll={handleBodyScroll}
-          >
-            {baseTable}
-          </div>
-        </div>
-      );
-    }
     // Should provides `tabindex` if use scroll to enable keyboard scroll
     const useTabIndex = scroll && (scroll.x || scroll.y);
 

components/vc-table/src/Table.jsx

@@ -501,41 +501,15 @@ export default defineComponent({
       );
     },
 
-    renderLeftFixedTable() {
-      const { prefixCls } = this;
-
-      return (
-        <div key="left" class={`${prefixCls}-fixed-left`}>
-          {this.renderTable({
-            columns: this.columnManager.leftColumns.value,
-            fixed: 'left',
-          })}
-        </div>
-      );
-    },
-    renderRightFixedTable() {
-      const { prefixCls } = this;
-
-      return (
-        <div class={`${prefixCls}-fixed-right`}>
-          {this.renderTable({
-            columns: this.columnManager.rightColumns.value,
-            fixed: 'right',
-          })}
-        </div>
-      );
-    },
-
     renderTable(options) {
-      const { columns, fixed, isAnyColumnsFixed } = options;
+      const { columns, isAnyColumnsFixed } = options;
       const { prefixCls, scroll = {} } = this;
-      const tableClassName = scroll.x || fixed ? `${prefixCls}-fixed` : '';
+      const tableClassName = scroll.x ? `${prefixCls}-fixed` : '';
 
       const headTable = (
         <HeadTable
           key="head"
           columns={columns}
-          fixed={fixed}
           tableClassName={tableClassName}
           handleBodyScrollLeft={this.handleBodyScrollLeft}
           expander={this.expander}
@@ -546,7 +520,6 @@ export default defineComponent({
         <BodyTable
           key="body"
           columns={columns}
-          fixed={fixed}
           tableClassName={tableClassName}
           getRowKey={this.getRowKey}
           handleWheel={this.handleWheel}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ant-design-vue",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "title": "Ant Design Vue",
   "description": "An enterprise-class UI design language and Vue-based implementation",
   "keywords": [

v2-doc

@@ -1 +1 @@
-Subproject commit 6b53258cc2b3709e070d340714e992760e660e67
+Subproject commit 2924233b60d3645d3df5e86e8bec912d3a13496d