diff --git a/docs/examples/auto-adjust-dropdown.tsx b/docs/examples/auto-adjust-dropdown.tsx index 544d47a98..11e79aaef 100644 --- a/docs/examples/auto-adjust-dropdown.tsx +++ b/docs/examples/auto-adjust-dropdown.tsx @@ -34,14 +34,14 @@ class Test extends React.Component { >
-
- {' '} @@ -50,7 +50,7 @@ class Test extends React.Component {
- @@ -64,14 +64,14 @@ class Test extends React.Component { }} >
-
- diff --git a/docs/examples/controlled.tsx b/docs/examples/controlled.tsx index 539399317..c08872380 100644 --- a/docs/examples/controlled.tsx +++ b/docs/examples/controlled.tsx @@ -43,7 +43,7 @@ class Controlled extends React.Component<{}, ControlledState> { console.log('onFocus'); }; - onDropdownVisibleChange = (open) => { + onPopupVisibleChange = (open) => { this.setState({ open }); }; @@ -68,7 +68,7 @@ class Controlled extends React.Component<{}, ControlledState> { optionLabelProp="children" optionFilterProp="text" onChange={this.onChange} - onDropdownVisibleChange={this.onDropdownVisibleChange} + onPopupVisibleChange={this.onPopupVisibleChange} >
); diff --git a/docs/examples/single-animation.tsx b/docs/examples/single-animation.tsx index b4a70b94c..e1ebc748c 100644 --- a/docs/examples/single-animation.tsx +++ b/docs/examples/single-animation.tsx @@ -21,7 +21,7 @@ const Test = () => ( animation="slide-up" showSearch onChange={onChange} - dropdownStyle={{ + popupStyle={{ width: 'auto', }} > diff --git a/docs/examples/single.tsx b/docs/examples/single.tsx index f305a804a..2ac0fd277 100644 --- a/docs/examples/single.tsx +++ b/docs/examples/single.tsx @@ -130,8 +130,8 @@ class Test extends React.Component { id="my-select-rtl" placeholder="rtl" direction="rtl" - dropdownMatchSelectWidth={300} - dropdownStyle={{ minWidth: 300 }} + popupMatchSelectWidth={300} + popupStyle={{ minWidth: 300 }} style={{ width: 500 }} > diff --git a/src/BaseSelect/index.tsx b/src/BaseSelect/index.tsx index 4660bde92..dc8ddb8f7 100644 --- a/src/BaseSelect/index.tsx +++ b/src/BaseSelect/index.tsx @@ -156,7 +156,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri // >>> Open open?: boolean; defaultOpen?: boolean; - onDropdownVisibleChange?: (open: boolean) => void; + onPopupVisibleChange?: (open: boolean) => void; // >>> Customize Input /** @private Internal usage. Do not use in your production. */ @@ -184,14 +184,16 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri /** Selector remove icon */ removeIcon?: RenderNode; - // >>> Dropdown + // >>> Dropdown/Popup animation?: string; transitionName?: string; - dropdownStyle?: React.CSSProperties; - dropdownClassName?: string; - dropdownMatchSelectWidth?: boolean | number; - dropdownRender?: (menu: React.ReactElement) => React.ReactElement; - dropdownAlign?: AlignType; + + popupStyle?: React.CSSProperties; + popupClassName?: string; + popupMatchSelectWidth?: boolean | number; + popupRender?: (menu: React.ReactElement) => React.ReactElement; + popupAlign?: AlignType; + placement?: Placement; builtinPlacements?: BuildInPlacements; getPopupContainer?: RenderDOMFunc; @@ -245,7 +247,7 @@ const BaseSelect = React.forwardRef((props, ref) // Open open, defaultOpen, - onDropdownVisibleChange, + onPopupVisibleChange, // Active activeValue, @@ -269,11 +271,11 @@ const BaseSelect = React.forwardRef((props, ref) OptionList, animation, transitionName, - dropdownStyle, - dropdownClassName, - dropdownMatchSelectWidth, - dropdownRender, - dropdownAlign, + popupStyle, + popupClassName, + popupMatchSelectWidth, + popupRender, + popupAlign, placement, builtinPlacements, getPopupContainer, @@ -389,11 +391,11 @@ const BaseSelect = React.forwardRef((props, ref) setInnerOpen(nextOpen); if (mergedOpen !== nextOpen) { - onDropdownVisibleChange?.(nextOpen); + onPopupVisibleChange?.(nextOpen); } } }, - [disabled, mergedOpen, setInnerOpen, onDropdownVisibleChange], + [disabled, mergedOpen, setInnerOpen, onPopupVisibleChange], ); // ============================= Search ============================= @@ -767,12 +769,12 @@ const BaseSelect = React.forwardRef((props, ref) popupElement={optionList} animation={animation} transitionName={transitionName} - dropdownStyle={dropdownStyle} - dropdownClassName={dropdownClassName} + popupStyle={popupStyle} + popupClassName={popupClassName} direction={direction} - dropdownMatchSelectWidth={dropdownMatchSelectWidth} - dropdownRender={dropdownRender} - dropdownAlign={dropdownAlign} + popupMatchSelectWidth={popupMatchSelectWidth} + popupRender={popupRender} + popupAlign={popupAlign} placement={placement} builtinPlacements={builtinPlacements} getPopupContainer={getPopupContainer} diff --git a/src/Select.tsx b/src/Select.tsx index 3233b5a21..748f457ce 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -180,7 +180,7 @@ const Select = React.forwardRef(() => { - const realVirtual = virtual !== false && dropdownMatchSelectWidth !== false; + const realVirtual = virtual !== false && popupMatchSelectWidth !== false; return { ...parsedOptions, flattenOptions: displayOptions, @@ -638,7 +638,7 @@ const Select = React.forwardRef>> OptionList OptionList={OptionList} emptyOptions={!displayOptions.length} diff --git a/src/SelectTrigger.tsx b/src/SelectTrigger.tsx index 960febf4b..e392260cc 100644 --- a/src/SelectTrigger.tsx +++ b/src/SelectTrigger.tsx @@ -5,10 +5,10 @@ import * as React from 'react'; import type { Placement, RenderDOMFunc } from './BaseSelect'; const getBuiltInPlacements = ( - dropdownMatchSelectWidth: number | boolean, + popupMatchSelectWidth: number | boolean, ): Record => { // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided - const adjustX = dropdownMatchSelectWidth === true ? 0 : 1; + const adjustX = popupMatchSelectWidth === true ? 0 : 1; return { bottomLeft: { points: ['tl', 'bl'], @@ -64,13 +64,13 @@ export interface SelectTriggerProps { transitionName?: string; placement?: Placement; builtinPlacements?: BuildInPlacements; - dropdownStyle: React.CSSProperties; - dropdownClassName: string; + popupStyle: React.CSSProperties; + popupClassName: string; direction: string; - dropdownMatchSelectWidth?: boolean | number; - dropdownRender?: (menu: React.ReactElement) => React.ReactElement; + popupMatchSelectWidth?: boolean | number; + popupRender?: (menu: React.ReactElement) => React.ReactElement; getPopupContainer?: RenderDOMFunc; - dropdownAlign: AlignType; + popupAlign: AlignType; empty: boolean; getTriggerDOMNode: (node: HTMLElement) => HTMLElement; @@ -91,14 +91,14 @@ const SelectTrigger: React.ForwardRefRenderFunction builtinPlacements || getBuiltInPlacements(dropdownMatchSelectWidth), - [builtinPlacements, dropdownMatchSelectWidth], + () => builtinPlacements || getBuiltInPlacements(popupMatchSelectWidth), + [builtinPlacements, popupMatchSelectWidth], ); // ===================== Motion ====================== - const mergedTransitionName = animation ? `${dropdownPrefixCls}-${animation}` : transitionName; + const mergedTransitionName = animation ? `${popupPrefixCls}-${animation}` : transitionName; // =================== Popup Width =================== - const isNumberPopupWidth = typeof dropdownMatchSelectWidth === 'number'; + const isNumberPopupWidth = typeof popupMatchSelectWidth === 'number'; const stretch = React.useMemo(() => { if (isNumberPopupWidth) { return null; } - return dropdownMatchSelectWidth === false ? 'minWidth' : 'width'; - }, [dropdownMatchSelectWidth, isNumberPopupWidth]); + return popupMatchSelectWidth === false ? 'minWidth' : 'width'; + }, [popupMatchSelectWidth, isNumberPopupWidth]); - let popupStyle = dropdownStyle; + let mergedPopupStyle = popupStyle; if (isNumberPopupWidth) { - popupStyle = { + mergedPopupStyle = { ...popupStyle, - width: dropdownMatchSelectWidth, + width: popupMatchSelectWidth, }; } @@ -156,18 +162,18 @@ const SelectTrigger: React.ForwardRefRenderFunction{popupNode}
} ref={triggerPopupRef} stretch={stretch} - popupAlign={dropdownAlign} + popupAlign={popupAlign} popupVisible={visible} getPopupContainer={getPopupContainer} - popupClassName={classNames(dropdownClassName, { - [`${dropdownPrefixCls}-empty`]: empty, + popupClassName={classNames(popupClassName, { + [`${popupPrefixCls}-empty`]: empty, })} - popupStyle={popupStyle} + popupStyle={mergedPopupStyle} getTriggerDOMNode={getTriggerDOMNode} onPopupVisibleChange={onPopupVisibleChange} > diff --git a/tests/Combobox.test.tsx b/tests/Combobox.test.tsx index 8a8a74737..76601b388 100644 --- a/tests/Combobox.test.tsx +++ b/tests/Combobox.test.tsx @@ -455,16 +455,16 @@ describe('Select.Combobox', () => { // https://github.com/ant-design/ant-design/issues/16572 it('close when enter press without active option', () => { jest.useFakeTimers(); - const onDropdownVisibleChange = jest.fn(); + const onPopupVisibleChange = jest.fn(); const { container } = render( - , ); keyDown(container.querySelector('input')!, KeyCode.ENTER); jest.runAllTimers(); - expect(onDropdownVisibleChange).toHaveBeenCalledWith(false); + expect(onPopupVisibleChange).toHaveBeenCalledWith(false); jest.useRealTimers(); }); diff --git a/tests/Custom.test.tsx b/tests/Custom.test.tsx index 26d3cc14f..eb781adaf 100644 --- a/tests/Custom.test.tsx +++ b/tests/Custom.test.tsx @@ -15,15 +15,15 @@ describe('Select.Custom', () => { }); it('getRawInputElement', () => { - const onDropdownVisibleChange = jest.fn(); + const onPopupVisibleChange = jest.fn(); const { container } = render( document.body} />, ); fireEvent.mouseDown(document.querySelector('.rc-select-dropdown')); - expect(onDropdownVisibleChange).not.toHaveBeenCalled(); + expect(onPopupVisibleChange).not.toHaveBeenCalled(); }); }); diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 47d430e1d..6f49bff38 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -315,7 +315,7 @@ describe('Select.Basic', () => { const { container } = render( + ); @@ -1323,7 +1323,7 @@ describe('Select.Basic', () => { const { container } = testingRender( ( + popupRender={(menu) => (