From cc75a431ba620dca86e988a5c38495d06bbd5b8e Mon Sep 17 00:00:00 2001 From: muxin Date: Tue, 28 Feb 2023 17:19:44 +0800 Subject: [PATCH 01/58] feat(select): force scroll bar visible when list is changed (#916) --- src/OptionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OptionList.tsx b/src/OptionList.tsx index 6fc3a1d51..7208a88fc 100644 --- a/src/OptionList.tsx +++ b/src/OptionList.tsx @@ -145,7 +145,7 @@ const OptionList: React.ForwardRefRenderFunction = (_, r } return () => clearTimeout(timeoutId); - }, [open, searchValue]); + }, [open, searchValue, flattenOptions.length]); // ========================== Values ========================== const onSelectValue = (value: RawValueType) => { From 2df31313dc90e814e832809b2c14aeec9910746a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 28 Feb 2023 17:20:28 +0800 Subject: [PATCH 02/58] 14.2.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5af5ea991..40b99d397 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.2.0", + "version": "14.2.1", "description": "React Select", "engines": { "node": ">=8.x" From b0ad83d8192dbefac6655e8708a577fb07cf29b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 28 Feb 2023 17:22:45 +0800 Subject: [PATCH 03/58] 14.2.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 40b99d397..dee31e187 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.2.1", + "version": "14.2.2", "description": "React Select", "engines": { "node": ">=8.x" From 5f4259b5e8ff4c01f3a302aeccd7af3399f24e32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Wed, 1 Mar 2023 15:05:00 +0800 Subject: [PATCH 04/58] refactor: Use `@rc-component/trigger` (#928) * chore: init * test: update snapshot * test: update snapshot * test: update snapshot * chore: bump trigger support window scroll --- package.json | 2 +- src/BaseSelect.tsx | 2 +- src/SelectTrigger.tsx | 14 +- tests/Select.test.tsx | 22 +- tests/Tags.test.tsx | 6 +- tests/__mocks__/@rc-component/trigger.tsx | 3 + tests/__mocks__/rc-trigger.tsx | 3 - tests/__snapshots__/Select.test.tsx.snap | 818 ++++++---------------- tests/__snapshots__/Tags.test.tsx.snap | 257 ++++--- 9 files changed, 386 insertions(+), 741 deletions(-) create mode 100644 tests/__mocks__/@rc-component/trigger.tsx delete mode 100644 tests/__mocks__/rc-trigger.tsx diff --git a/package.json b/package.json index dee31e187..ca00eedbc 100644 --- a/package.json +++ b/package.json @@ -45,10 +45,10 @@ }, "dependencies": { "@babel/runtime": "^7.10.1", + "@rc-component/trigger": "^1.4.0", "classnames": "2.x", "rc-motion": "^2.0.1", "rc-overflow": "^1.0.0", - "rc-trigger": "^5.0.4", "rc-util": "^5.16.1", "rc-virtual-list": "^3.4.13" }, diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx index 715530e7e..a8171c609 100644 --- a/src/BaseSelect.tsx +++ b/src/BaseSelect.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import type { AlignType } from 'rc-trigger/lib/interface'; +import type { AlignType } from '@rc-component/trigger/lib/interface'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; import isMobile from 'rc-util/lib/isMobile'; diff --git a/src/SelectTrigger.tsx b/src/SelectTrigger.tsx index 530be5ec0..67cd890d9 100644 --- a/src/SelectTrigger.tsx +++ b/src/SelectTrigger.tsx @@ -1,10 +1,12 @@ -import * as React from 'react'; -import Trigger from 'rc-trigger'; -import type { AlignType } from 'rc-trigger/lib/interface'; +import Trigger from '@rc-component/trigger'; +import type { AlignType } from '@rc-component/trigger/lib/interface'; import classNames from 'classnames'; +import * as React from 'react'; import type { Placement, RenderDOMFunc } from './BaseSelect'; -const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => { +const getBuiltInPlacements = ( + dropdownMatchSelectWidth: number | boolean, +): Record => { // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided const adjustX = dropdownMatchSelectWidth === true ? 0 : 1; return { @@ -15,6 +17,7 @@ const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => { adjustX, adjustY: 1, }, + htmlRegion: 'scroll', }, bottomRight: { points: ['tr', 'br'], @@ -23,6 +26,7 @@ const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => { adjustX, adjustY: 1, }, + htmlRegion: 'scroll', }, topLeft: { points: ['bl', 'tl'], @@ -31,6 +35,7 @@ const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => { adjustX, adjustY: 1, }, + htmlRegion: 'scroll', }, topRight: { points: ['br', 'tr'], @@ -39,6 +44,7 @@ const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => { adjustX, adjustY: 1, }, + htmlRegion: 'scroll', }, }; }; diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 44f4f848e..3097787c5 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -1,5 +1,5 @@ +import { fireEvent, render as testingRender } from '@testing-library/react'; import { mount, render } from 'enzyme'; -import { render as testingRender, fireEvent } from '@testing-library/react'; import KeyCode from 'rc-util/lib/KeyCode'; import { spyElementPrototype } from 'rc-util/lib/test/domHook'; import { resetWarned } from 'rc-util/lib/warning'; @@ -66,8 +66,8 @@ describe('Select.Basic', () => { }); it('renders dropdown correctly', () => { - const wrapper = render(genSelect({ open: true })); - expect(wrapper).toMatchSnapshot(); + const { container } = testingRender(genSelect({ open: true })); + expect(container.querySelector('.rc-select-dropdown')).toMatchSnapshot(); }); it('renders disabled select correctly', () => { @@ -353,7 +353,7 @@ describe('Select.Basic', () => { }); it('should contain falsy children', () => { - const wrapper = render( + const { container } = testingRender( , ); - expect(wrapper).toMatchSnapshot(); + expect(container.querySelector('.rc-select-dropdown')).toMatchSnapshot(); }); it('open dropdown on down key press', () => { @@ -1038,25 +1038,25 @@ describe('Select.Basic', () => { }); it('filterOption could be true as described in default value', () => { - const wrapper = mount( + const { container } = testingRender( , ); - expect(wrapper.render()).toMatchSnapshot(); + expect(container.querySelector('.rc-select-dropdown')).toMatchSnapshot(); }); it('does not filter when filterOption value is false', () => { - const wrapper = render( + const { container } = testingRender( , ); - expect(wrapper).toMatchSnapshot(); + expect(container.querySelector('.rc-select-dropdown')).toMatchSnapshot(); }); it('backfill', () => { @@ -1130,7 +1130,7 @@ describe('Select.Basic', () => { }); it('should render custom dropdown correctly', () => { - const wrapper = mount( + const { container } = testingRender( , ); - expect(wrapper.render()).toMatchSnapshot(); + expect(container.querySelector('.rc-select-dropdown')).toMatchSnapshot(); }); it('should trigger click event in custom node', () => { diff --git a/tests/Tags.test.tsx b/tests/Tags.test.tsx index 8b5a4d26a..f8bb05df1 100644 --- a/tests/Tags.test.tsx +++ b/tests/Tags.test.tsx @@ -1,4 +1,5 @@ import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import KeyCode from 'rc-util/lib/KeyCode'; import classNames from 'classnames'; import * as React from 'react'; @@ -406,9 +407,8 @@ describe('Select.Tags', () => { ); it('renders correctly', () => { - const wrapper = mount(createSelect({ value: ['jack', 'foo'] })); - toggleOpen(wrapper); - expect(wrapper.render()).toMatchSnapshot(); + const { container } = render(createSelect({ value: ['jack', 'foo'], open: true })); + expect(container.firstChild).toMatchSnapshot(); }); it('renders inputValue correctly', () => { diff --git a/tests/__mocks__/@rc-component/trigger.tsx b/tests/__mocks__/@rc-component/trigger.tsx new file mode 100644 index 000000000..887c966db --- /dev/null +++ b/tests/__mocks__/@rc-component/trigger.tsx @@ -0,0 +1,3 @@ +import Trigger from '@rc-component/trigger/lib/mock'; + +export default Trigger; diff --git a/tests/__mocks__/rc-trigger.tsx b/tests/__mocks__/rc-trigger.tsx deleted file mode 100644 index 323030759..000000000 --- a/tests/__mocks__/rc-trigger.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Trigger from 'rc-trigger/lib/mock'; - -export default Trigger; diff --git a/tests/__snapshots__/Select.test.tsx.snap b/tests/__snapshots__/Select.test.tsx.snap index 5e585330f..963e7ca90 100644 --- a/tests/__snapshots__/Select.test.tsx.snap +++ b/tests/__snapshots__/Select.test.tsx.snap @@ -2,195 +2,109 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
-
- - - -
-
-
-
- 1 -
-
- 2 -
-
-
+
+ 1 +
+
+ 2 +
+
+
+
+
-
+
-
-
- 1 -
-
-
-
- 2 -
-
+ 1 +
+
+
+
+ 2
+
-
`; exports[`Select.Basic filterOption could be true as described in default value 1`] = `
-
- - - -
-
-
- Not Found -
-
+ Not Found
-
`; @@ -456,191 +370,7 @@ exports[`Select.Basic render renders disabled select correctly 1`] = `
`; -exports[`Select.Basic render renders dropdown correctly 1`] = ` -
-
- - - - - 2 - -
-
-
-
-
- -
-
-
-
-
- manager -
-
-
- - jack - -
-
-
-
- lucy -
-
-
- engineer -
-
-
- yiminghe -
-
-
-
-
-
-
-
-
-
-`; +exports[`Select.Basic render renders dropdown correctly 1`] = `null`; exports[`Select.Basic render renders role prop correctly 1`] = `
-
- - - - - 1 - -
-
-
-
- 1 -
-
- 2 -
-
-
+
+ 1 +
+
+ 2 +
+
+
+
+
-
+
-
-
- 1 -
- -
-
+
+ ✓ + + +
+
+
+ 2
+
-
`; exports[`Select.Basic should render custom dropdown correctly 1`] = `
-
- - - - -
-
-
-
-
- CUSTOM NODE -
-
-
- 1 -
-
- 2 -
-
-
+
+
+ CUSTOM NODE +
+
+
+ 1 +
+
+ 2 +
+
+
+
+
-
+
-
-
- 1 -
-
-
-
- 2 -
-
+ 1
+
+
+
+ 2 +
+
@@ -966,15 +616,5 @@ exports[`Select.Basic should render custom dropdown correctly 1`] = `
-
`; diff --git a/tests/__snapshots__/Tags.test.tsx.snap b/tests/__snapshots__/Tags.test.tsx.snap index 8233b7e9b..aaa7d903c 100644 --- a/tests/__snapshots__/Tags.test.tsx.snap +++ b/tests/__snapshots__/Tags.test.tsx.snap @@ -5,6 +5,133 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
+
+
+
+ +
@@ -91,141 +218,13 @@ exports[`Select.Tags OptGroup renders correctly 1`] = ` aria-hidden="true" class="rc-select-selection-search-mirror" > +  
-
-
-
-
- -
-
`; From c3cb35780c8b636b3770659dea1cb0535d904366 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 1 Mar 2023 15:06:16 +0800 Subject: [PATCH 05/58] 14.3.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ca00eedbc..25ecf427b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.2.2", + "version": "14.3.0", "description": "React Select", "engines": { "node": ">=8.x" From 24d4972b3b93dcdf212dabc4398764900cae96f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 2 Mar 2023 16:57:59 +0800 Subject: [PATCH 06/58] chore: bump trigger for snapshot --- package.json | 2 +- tests/__snapshots__/Tags.test.tsx.snap | 186 ++++++++++++------------- 2 files changed, 94 insertions(+), 94 deletions(-) diff --git a/package.json b/package.json index 25ecf427b..411bdf113 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ }, "dependencies": { "@babel/runtime": "^7.10.1", - "@rc-component/trigger": "^1.4.0", + "@rc-component/trigger": "^1.5.0", "classnames": "2.x", "rc-motion": "^2.0.1", "rc-overflow": "^1.0.0", diff --git a/tests/__snapshots__/Tags.test.tsx.snap b/tests/__snapshots__/Tags.test.tsx.snap index aaa7d903c..f57a65124 100644 --- a/tests/__snapshots__/Tags.test.tsx.snap +++ b/tests/__snapshots__/Tags.test.tsx.snap @@ -5,6 +5,99 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
+
+
+
+ + + Jack + + + +
+
+ + + foo + + + +
+
+
+ + +
+
+
+
-
-
-
- - - Jack - - - -
-
- - - foo - - - -
-
-
- - -
-
-
-
`; From e63d96e1b136280cd52169dc28630c06795c5203 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 16 Mar 2023 20:08:40 +0800 Subject: [PATCH 07/58] feat: support title (#931) --- src/BaseSelect.tsx | 2 +- src/Selector/SingleSelector.tsx | 7 ++++--- src/Selector/index.tsx | 1 + tests/Select.test.tsx | 29 +++++++++++++++++++++++++++++ 4 files changed, 35 insertions(+), 4 deletions(-) diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx index a8171c609..db6acf33a 100644 --- a/src/BaseSelect.tsx +++ b/src/BaseSelect.tsx @@ -126,6 +126,7 @@ export type BaseSelectPropsWithoutPrivate = Omit React.ReactElement; direction?: 'ltr' | 'rtl'; @@ -830,7 +831,6 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref )} {selectorNode} - {arrowNode} {clearNode}
diff --git a/src/Selector/SingleSelector.tsx b/src/Selector/SingleSelector.tsx index d45805e6c..69cd6ffff 100644 --- a/src/Selector/SingleSelector.tsx +++ b/src/Selector/SingleSelector.tsx @@ -36,6 +36,7 @@ const SingleSelector: React.FC = (props) => { onInputPaste, onInputCompositionStart, onInputCompositionEnd, + title, } = props; const [inputChanged, setInputChanged] = React.useState(false); @@ -58,8 +59,8 @@ const SingleSelector: React.FC = (props) => { // Not show text when closed expect combobox mode const hasTextInput = mode !== 'combobox' && !open && !showSearch ? false : !!inputValue; - // Get title - const title = getTitle(item); + // Get title of selection item + const selectionTitle = title === undefined ? getTitle(item) : title; const renderPlaceholder = () => { if (item) { @@ -105,7 +106,7 @@ const SingleSelector: React.FC = (props) => { {/* Display value */} {!combobox && item && !hasTextInput && ( - + {item.label} )} diff --git a/src/Selector/index.tsx b/src/Selector/index.tsx index 20b18cd53..3f80b1581 100644 --- a/src/Selector/index.tsx +++ b/src/Selector/index.tsx @@ -22,6 +22,7 @@ export interface InnerSelectorProps { prefixCls: string; id: string; mode: Mode; + title?: string; inputRef: React.Ref; placeholder?: React.ReactNode; diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 3097787c5..0fbaec62d 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -1974,4 +1974,33 @@ describe('Select.Basic', () => { expect(wrapper.find('.rc-select').getDOMNode().className).toContain('-focused'); jest.useRealTimers(); }); + + it('should support title', () => { + const wrapper1 = mount( + , + ); + expect(wrapper2.find('.rc-select').prop('title')).toBe(''); + expect(wrapper2.find('.rc-select-selection-item').prop('title')).toBe(''); + const wrapper3 = mount( +
"`; diff --git a/tests/ssr.test.tsx b/tests/ssr.test.tsx new file mode 100644 index 000000000..062ff74c1 --- /dev/null +++ b/tests/ssr.test.tsx @@ -0,0 +1,41 @@ +import { render } from '@testing-library/react'; +import { renderToString } from 'react-dom/server'; +import Select from '../src'; +import { injectRunAllTimers } from './utils/common'; + +// Mock rc-util `canUseDom` +jest.mock('rc-util/lib/Dom/canUseDom', () => { + return () => global.canUseDom; +}); + +jest.mock('@rc-component/trigger', () => { + return jest.requireActual('@rc-component/trigger'); +}); + +describe('Select.SSR', () => { + injectRunAllTimers(jest); + + beforeEach(() => { + global.canUseDom = true; + }); + + it('should work', () => { + const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + + global.canUseDom = false; + + const Demo = () => = (props) => { if (item) { return null; } - const hiddenStyle = hasTextInput ? { visibility: 'hidden' as const } : undefined; + const hiddenStyle = hasTextInput ? { visibility: 'hidden' } as React.CSSProperties : undefined; return ( - + {placeholder} ); @@ -105,11 +108,18 @@ const SingleSelector: React.FC = (props) => { {/* Display value */} - {!combobox && item && !hasTextInput && ( - + {(!combobox && item) ? ( + {item.label} - )} + ) : null} {/* Display placeholder */} {renderPlaceholder()} diff --git a/tests/Combobox.test.tsx b/tests/Combobox.test.tsx index b382befce..cfb3840d9 100644 --- a/tests/Combobox.test.tsx +++ b/tests/Combobox.test.tsx @@ -74,7 +74,7 @@ describe('Select.Combobox', () => { expect(wrapper.find('input').props().value).toBe(''); expect(wrapper.find('.rc-select-selection-placeholder').text()).toEqual('placeholder'); wrapper.find('input').simulate('change', { target: { value: '1' } }); - expect(wrapper.find('.rc-select-selection-placeholder').length).toBeFalsy(); + expect(wrapper.find('.rc-select-selection-placeholder').length).toBe(0); expect(wrapper.find('input').props().value).toBe('1'); }); diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 0fbaec62d..8dd12c3fb 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -595,18 +595,16 @@ describe('Select.Basic', () => { expect(wrapper.find('.rc-select').getDOMNode().className).toContain('-focus'); }); - it('click placeholder should trigger onFocus', () => { - const wrapper2 = mount( + it('focus input when placeholder is clicked', () => { + const wrapper = mount( , ); - - const inputSpy = jest.spyOn(wrapper2.find('input').instance(), 'focus' as any); - - wrapper2.find('.rc-select-selection-placeholder').simulate('mousedown'); - wrapper2.find('.rc-select-selection-placeholder').simulate('click'); + const inputSpy = jest.spyOn(wrapper.find('input').instance(), 'focus' as any); + wrapper.find('.rc-select-selection-placeholder').simulate('mousedown'); + wrapper.find('.rc-select-selection-placeholder').simulate('click'); expect(inputSpy).toHaveBeenCalled(); }); }); @@ -816,19 +814,6 @@ describe('Select.Basic', () => { expectOpen(wrapper, false); }); - it('focus input when placeholder is clicked', () => { - const wrapper = mount( - , - ); - - const focusSpy = jest.spyOn(wrapper.find('input').instance(), 'focus' as any); - wrapper.find('.rc-select-selection-placeholder').simulate('mousedown'); - wrapper.find('.rc-select-selection-placeholder').simulate('click'); - expect(focusSpy).toHaveBeenCalled(); - }); - describe('combobox could customize input element', () => { it('work', () => { const onKeyDown = jest.fn(); @@ -1736,32 +1721,6 @@ describe('Select.Basic', () => { }); }); - describe('show placeholder', () => { - it('when searchValue is controlled', () => { - const wrapper = mount(); - expect(wrapper.find('.rc-select-selection-placeholder').length).toBeTruthy(); - }); - - it('not when value is null but it is an Option', () => { - const wrapper = mount( - ); expect(findSelection(wrapper).text()).toEqual('Bamboo'); @@ -1894,16 +1853,6 @@ describe('Select.Basic', () => { expect(onClick).toHaveBeenCalled(); }); - it('should hide placeholder if force closed and showSearch with searchValue', () => { - const wrapper = mount( - diff --git a/tests/placeholder.test.tsx b/tests/placeholder.test.tsx new file mode 100644 index 000000000..840882d29 --- /dev/null +++ b/tests/placeholder.test.tsx @@ -0,0 +1,45 @@ +import { mount } from 'enzyme'; +import React from 'react'; +import Select from '../src'; +import { toggleOpen } from './utils/common'; + +describe('Select placeholder', () => { + it('when searchValue is controlled', () => { + const wrapper = mount(); + expect(wrapper.find('.rc-select-selection-placeholder').length).toBe(1); + expect(wrapper.find('.rc-select-selection-placeholder').text()).toBe('bamboo'); + }); + + it('not when value is null but it is an Option', () => { + const wrapper = mount( + , + ); + expect( + (wrapper.find('.rc-select-selection-placeholder').getDOMNode() as HTMLSpanElement).style + .visibility, + ).toBe('hidden'); + expect(wrapper.find('.rc-select-selection-placeholder').text()).toBe('placeholder'); + }); +}); \ No newline at end of file From bbf259871eb5f628a6a605493a21f3dcbba24d5f Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 10 Apr 2023 11:15:07 +0800 Subject: [PATCH 15/58] 14.4.3-0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 205c50833..ad911527d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.4.2", + "version": "14.4.3-0", "description": "React Select", "engines": { "node": ">=8.x" From 0c8db0c7132c0c8b72cddde31fb314c51e3fb75b Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 10 Apr 2023 11:35:58 +0800 Subject: [PATCH 16/58] 14.4.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ad911527d..dcca9d421 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.4.3-0", + "version": "14.4.3", "description": "React Select", "engines": { "node": ">=8.x" From 9eed16b948e55c6293bcb4f27e517e2f28a35bf7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B4=8B?= <94534613+BoyYangzai@users.noreply.github.com> Date: Wed, 17 May 2023 16:33:58 +0800 Subject: [PATCH 17/58] feat: add groupLabel FieldName (#941) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: OptGroup label not display when set fieldNames * feat: groupLabel fieldName * chore: add test case * chore: put groupLabel api in fileName * chore: separate label and groupLabel * chore: coding style * fix: coding style again * fix: style --------- Co-authored-by: 洋 --- src/Select.tsx | 6 +- src/utils/valueUtil.ts | 10 +- tests/Select.test.tsx | 68 ++++++++--- tests/__snapshots__/Select.test.tsx.snap | 149 ++++++++++++++++++++++- tests/__snapshots__/Tags.test.tsx.snap | 2 +- 5 files changed, 206 insertions(+), 29 deletions(-) diff --git a/src/Select.tsx b/src/Select.tsx index 51e36359d..8ec4b05ab 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -83,6 +83,7 @@ export type FilterFunc = (inputValue: string, option?: OptionType) = export interface FieldNames { value?: string; label?: string; + groupLabel?: string; options?: string; } @@ -410,7 +411,10 @@ const Select = React.forwardRef( const displayOptions = React.useMemo( () => - flattenOptions(orderedFilteredOptions, { fieldNames: mergedFieldNames, childrenAsData }), + flattenOptions(orderedFilteredOptions, { + fieldNames: mergedFieldNames, + childrenAsData, + }), [orderedFilteredOptions, mergedFieldNames, childrenAsData], ); diff --git a/src/utils/valueUtil.ts b/src/utils/valueUtil.ts index ca18015f5..afafbf63d 100644 --- a/src/utils/valueUtil.ts +++ b/src/utils/valueUtil.ts @@ -21,12 +21,14 @@ function getKey(data: BaseOptionType, index: number) { } export function fillFieldNames(fieldNames: FieldNames | undefined, childrenAsData: boolean) { - const { label, value, options } = fieldNames || {}; + const { label, value, options, groupLabel } = fieldNames || {}; + const mergedLabel = label || (childrenAsData ? 'children' : 'label'); return { - label: label || (childrenAsData ? 'children' : 'label'), + label: mergedLabel, value: value || 'value', options: options || 'options', + groupLabel: groupLabel || mergedLabel, }; } @@ -45,11 +47,13 @@ export function flattenOptions { - const label = data[fieldLabel]; + + const label = data[isGroupOption ? groupLabel : fieldLabel]; if (isGroupOption || !(fieldOptions in data)) { const value = data[fieldValue]; diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 8dd12c3fb..8c23d3661 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -104,6 +104,51 @@ describe('Select.Basic', () => { ); expect(wrapper).toMatchSnapshot(); }); + + it('should support fieldName', () => { + // groupLabel > fieldNames > self-label + function genOpts(OptLabelName) { + return [ + { + groupLabel: 'Manager', + options: [ + { + data: 'value', + [OptLabelName]: 'label', + }, + ], + }, + ]; + } + + const { container: containerFirst } = testingRender( + , + ); + const { container: containerThird } = testingRender( + , - ); + const wrapper1 = mount(, - ); + const wrapper2 = mount(, - ); + const wrapper3 = mount( + + +
+
+
+`; + +exports[`Select.Basic render should support fieldName 2`] = ` +
+
+
+ + + + +
+
+
+`; + +exports[`Select.Basic render should support fieldName 3`] = ` +
+
+
+ + + + +
+
+
+`; + exports[`Select.Basic should contain falsy children 1`] = `
diff --git a/tests/__snapshots__/Tags.test.tsx.snap b/tests/__snapshots__/Tags.test.tsx.snap index 0bef74b2c..64abc8eeb 100644 --- a/tests/__snapshots__/Tags.test.tsx.snap +++ b/tests/__snapshots__/Tags.test.tsx.snap @@ -100,7 +100,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
Date: Thu, 18 May 2023 17:15:42 +0800 Subject: [PATCH 18/58] feat: add List ScrollBar direction (#940) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add List ScrollBar direction * chore: update snapshots * chore: empty test * test: update test case --------- Co-authored-by: 洋 Co-authored-by: 二货机器人 --- package.json | 2 +- src/OptionList.tsx | 2 ++ src/Select.tsx | 5 +++++ src/SelectContext.ts | 1 + tests/Select.test.tsx | 7 +++++++ 5 files changed, 16 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index dcca9d421..4a35f4ab9 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "rc-motion": "^2.0.1", "rc-overflow": "^1.0.0", "rc-util": "^5.16.1", - "rc-virtual-list": "^3.4.13" + "rc-virtual-list": "^3.5.2" }, "devDependencies": { "@testing-library/jest-dom": "^5.16.5", diff --git a/src/OptionList.tsx b/src/OptionList.tsx index 7208a88fc..dd4f034d1 100644 --- a/src/OptionList.tsx +++ b/src/OptionList.tsx @@ -53,6 +53,7 @@ const OptionList: React.ForwardRefRenderFunction = (_, r rawValues, fieldNames, virtual, + direction, listHeight, listItemHeight, } = React.useContext(SelectContext); @@ -297,6 +298,7 @@ const OptionList: React.ForwardRefRenderFunction = (_, r onMouseDown={onListMouseDown} onScroll={onPopupScroll} virtual={virtual} + direction={direction} innerProps={virtual ? null : a11yProps} > {(item, itemIndex) => { diff --git a/src/Select.tsx b/src/Select.tsx index 8ec4b05ab..7d5f17040 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -140,6 +140,7 @@ export interface SelectProps>> Values displayValues={displayValues} onDisplayValuesChange={onDisplayValuesChange} + // >>> Trigger + direction={direction} // >>> Search searchValue={mergedSearchValue} onSearch={onInternalSearch} diff --git a/src/SelectContext.ts b/src/SelectContext.ts index ed9ffea25..d6cf9372d 100644 --- a/src/SelectContext.ts +++ b/src/SelectContext.ts @@ -14,6 +14,7 @@ export interface SelectContextProps { rawValues: Set; fieldNames?: FieldNames; virtual?: boolean; + direction?: "ltr" | "rtl"; listHeight?: number; listItemHeight?: number; childrenAsData?: boolean; diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 8c23d3661..0be3d3304 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -1980,4 +1980,11 @@ describe('Select.Basic', () => { expect(wrapper3.find('.rc-select').prop('title')).toBe('title'); expect(wrapper3.find('.rc-select-selection-item').prop('title')).toBe('title'); }); + + it('scrollbar should be left position with rtl direction', () => { + const options = new Array(10).fill(null).map((_, value) => ({ value })); + + const { container } = testingRender(, ); const { container: containerSecond } = testingRender( , + , + ); + expect(container.querySelector('.rc-select-item-option-content').innerHTML).toBe('itemLabel'); + }); + it('convert value to array', () => { const wrapper = mount( - - +
+ groupLabel +
+
+
+ label +
+
+
-
`; exports[`Select.Basic render should support fieldName 2`] = ` -
+
-
- +
- - - +
+ groupLabel +
+
+
+ label +
+
+
-
`; exports[`Select.Basic render should support fieldName 3`] = ` -
+
-
- +
- - - +
+ groupLabel +
+
+
+ label +
+
+
-
`; From 53daa2736ff381de25972fdb4feb8fd6dcc7be1a Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 24 May 2023 17:59:19 +0800 Subject: [PATCH 21/58] v14.5.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 739dafaee..3a9031301 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.5.0", + "version": "14.5.1", "description": "React Select", "engines": { "node": ">=8.x" From 4510b80649e75a514e348f30105082fbdfe06788 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 24 May 2023 20:10:53 +0800 Subject: [PATCH 22/58] Update README.md --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index baa4e3ece..fd64fb66b 100644 --- a/README.md +++ b/README.md @@ -7,8 +7,9 @@ React Select [![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] -[![Test coverage][codecov-image]][codecov-url] +[![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] +[![dumi][dumi-image]][dumi-url] [npm-image]: http://img.shields.io/npm/v/rc-select.svg?style=flat-square [npm-url]: http://npmjs.org/package/rc-select @@ -26,6 +27,8 @@ React Select [download-url]: https://npmjs.org/package/rc-select [bundlephobia-url]: https://bundlephobia.com/package/rc-select [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-select +[dumi-url]: https://github.com/umijs/dumi +[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square ## Screenshots From a5d4b7540e3953dbb3454bc00f1415bada9b0924 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B4=8B?= <94534613+BoyYangzai@users.noreply.github.com> Date: Tue, 6 Jun 2023 10:30:01 +0800 Subject: [PATCH 23/58] fix: Select label React Node warning some case (#946) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: Select label React Node warning some case * test: test driven * fix: warning of label when update * chore: clean up * chore: back of raw --------- Co-authored-by: 洋 Co-authored-by: 二货机器人 --- src/Select.tsx | 9 +++++-- tests/Select.test.tsx | 60 +++++++++++++++++++++++++++++++++++-------- 2 files changed, 56 insertions(+), 13 deletions(-) diff --git a/src/Select.tsx b/src/Select.tsx index 7d5f17040..c5b5ad1b4 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -140,7 +140,7 @@ export interface SelectProps { expect(onKeyUp).toHaveBeenCalled(); }); - it('warning if label not same as option', () => { - const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); - mount( - , - ); - expect(errorSpy).toHaveBeenCalledWith( - 'Warning: `label` of `value` is not same as `label` in Select options.', - ); - errorSpy.mockRestore(); + describe('warning if label not same as option', () => { + it('should work', () => { + resetWarned(); + + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + mount( + , + ); + expect(errorSpy).toHaveBeenCalledWith( + 'Warning: `label` of `value` is not same as `label` in Select options.', + ); + errorSpy.mockRestore(); + }); + + it('not warning for react node', () => { + resetWarned(); + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + + const Demo = () => { + const [, setVal] = React.useState(0); + + return ( + +

@@ -93,7 +93,7 @@ class Test extends React.Component { style={{ width: 500 }} mode="multiple" loading={loading} - showArrow={showArrow} + suffixIcon={suffixIcon} allowClear optionFilterProp="children" optionLabelProp="children" diff --git a/docs/examples/suggest.tsx b/docs/examples/suggest.tsx index 91b44f619..7e28e75b8 100644 --- a/docs/examples/suggest.tsx +++ b/docs/examples/suggest.tsx @@ -1,6 +1,6 @@ /* eslint-disable no-console */ -import React from 'react'; import Select, { Option } from 'rc-select'; +import React from 'react'; import '../../assets/index.less'; import { fetch } from './common/tbFetchSuggest'; @@ -59,7 +59,7 @@ class Test extends React.Component { placeholder="placeholder" defaultActiveFirstOption={false} getInputElement={() => } - showArrow={false} + suffixIcon={null} notFoundContent="" onChange={this.fetchData} onSelect={this.onSelect} diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx index adc8613a8..edfb107fd 100644 --- a/src/BaseSelect.tsx +++ b/src/BaseSelect.tsx @@ -169,8 +169,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri // >>> Icons allowClear?: boolean; - showArrow?: boolean; - inputIcon?: RenderNode; + suffixIcon?: RenderNode; /** Clear all icon */ clearIcon?: RenderNode; /** Selector remove icon */ @@ -255,8 +254,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref { , ); - expect(wrapper.find('.rc-select-arrow-icon').length).toBeFalsy(); + expect(wrapper.find('.rc-select-arrow').length).toBeFalsy(); wrapper.setProps({ - showArrow: true, + suffixIcon:

arrow
, }); - expect(wrapper.find('.rc-select-arrow-icon').length).toBeTruthy(); + expect(wrapper.find('.rc-select-arrow').length).toBeTruthy(); }); it('block input when fast backspace', () => { diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 787a511e2..68ac537e0 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -42,7 +42,6 @@ describe('Select.Basic', () => { className="select-test" value="2" placeholder="Select a number" - showArrow allowClear showSearch {...props} diff --git a/tests/__snapshots__/Select.test.tsx.snap b/tests/__snapshots__/Select.test.tsx.snap index a11de50ae..eafb0cd71 100644 --- a/tests/__snapshots__/Select.test.tsx.snap +++ b/tests/__snapshots__/Select.test.tsx.snap @@ -110,7 +110,7 @@ exports[`Select.Basic filterOption could be true as described in default value 1 exports[`Select.Basic no search 1`] = `
-
`; @@ -159,7 +149,7 @@ exports[`Select.Basic render renders aria-attributes correctly 1`] = `
-
-
`; @@ -378,7 +328,7 @@ exports[`Select.Basic render renders dropdown correctly 1`] = `null`; exports[`Select.Basic render renders role prop correctly 1`] = `
-
"`; +exports[`Select.SSR should work 1`] = `"
"`; From 10b96018a5c7fe6590d17100e1e3d0e221ac5c5a Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 13 Jul 2023 17:43:16 +0800 Subject: [PATCH 28/58] v14.6.0-alpha.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5800ebbd0..59058d772 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.5.2", + "version": "14.6.0-alpha.0", "description": "React Select", "engines": { "node": ">=8.x" From 0587b3590fed674f81850aeb250dedc6635887f9 Mon Sep 17 00:00:00 2001 From: xulingling0 <107020065+xulingling0@users.noreply.github.com> Date: Wed, 19 Jul 2023 16:01:57 +0800 Subject: [PATCH 29/58] fix: use getBoundingClientRect to solve the width precision problem (#959) * fix: use getBoundingClientRect to solve the width precision problem * chore: change test case --- src/BaseSelect.tsx | 3 ++- tests/Select.test.tsx | 8 +++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx index edfb107fd..7beee3faa 100644 --- a/src/BaseSelect.tsx +++ b/src/BaseSelect.tsx @@ -631,7 +631,8 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref { if (triggerOpen) { - const newWidth = Math.ceil(containerRef.current?.offsetWidth); + // Guaranteed width accuracy + const newWidth = Math.ceil(containerRef.current?.getBoundingClientRect().width); if (containerWidth !== newWidth && !Number.isNaN(newWidth)) { setContainerWidth(newWidth); } diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 68ac537e0..c7c2b79f8 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -1,7 +1,7 @@ import { fireEvent, render as testingRender } from '@testing-library/react'; import { mount, render } from 'enzyme'; import KeyCode from 'rc-util/lib/KeyCode'; -import { spyElementPrototype } from 'rc-util/lib/test/domHook'; +import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import { resetWarned } from 'rc-util/lib/warning'; import VirtualList from 'rc-virtual-list'; import type { ScrollConfig } from 'rc-virtual-list/lib/List'; @@ -1323,8 +1323,10 @@ describe('Select.Basic', () => { let domHook; beforeAll(() => { - domHook = spyElementPrototype(HTMLElement, 'offsetWidth', { - get: () => 1000, + domHook = spyElementPrototypes(HTMLElement, { + getBoundingClientRect: () => ({ + width: 1000 + }), }); }); From 7d140b75c91853a7347e3492c6c612b3e5b745ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 19 Jul 2023 16:04:07 +0800 Subject: [PATCH 30/58] 14.6.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 59058d772..ef1022965 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.6.0-alpha.0", + "version": "14.6.0", "description": "React Select", "engines": { "node": ">=8.x" From cc98b33b3984e0d992e70073ade9ac68e771ef33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Mon, 24 Jul 2023 10:29:04 +0800 Subject: [PATCH 31/58] feat: refactor allowClear (#965) * feat: refactor allowClear * feat: refactor allowClear * docs: update docs * feat: optimize code * feat: test case --- README.md | 34 ++++++++-------- package.json | 1 + src/BaseSelect.tsx | 81 +++++++++++++++++-------------------- src/hooks/useAllowClear.tsx | 48 ++++++++++++++++++++++ src/interface.ts | 21 +++++++++- tests/Select.test.tsx | 40 ++++++++++++++++++ 6 files changed, 162 insertions(+), 63 deletions(-) create mode 100644 src/hooks/useAllowClear.tsx diff --git a/README.md b/README.md index 11aced2ba..71d69aea4 100644 --- a/README.md +++ b/README.md @@ -76,34 +76,34 @@ export default () => ( | animation | dropdown animation name. only support slide-up now | String | '' | | transitionName | dropdown css animation name | String | '' | | choiceTransitionName | css animation name for selected items at multiple mode | String | '' | -| dropdownMatchSelectWidth | whether dropdown's width is same with select | bool | true | +| dropdownMatchSelectWidth | whether dropdown's width is same with select | boolean | true | | dropdownClassName | additional className applied to dropdown | String | - | | dropdownStyle | additional style applied to dropdown | React.CSSProperties | {} | | dropdownAlign | additional align applied to dropdown | [AlignType](https://github.com/react-component/trigger/blob/728d7e92394aa4b3214650f743fc47e1382dfa68/src/interface.ts#L25-L80) | {} | | dropdownMenuStyle | additional style applied to dropdown menu | Object | React.CSSProperties | | notFoundContent | specify content to show when no result matches. | ReactNode | 'Not Found' | | tokenSeparators | separator used to tokenize on tag/multiple mode | string[]? | | -| open | control select open | bool | | -| defaultOpen | control select default open | bool | | +| open | control select open | boolean | | +| defaultOpen | control select default open | boolean | | | placeholder | select placeholder | React Node | | -| showSearch | whether show search input in single mode | bool | true | -| allowClear | whether allowClear | bool | false | -| tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | bool | false | +| showSearch | whether show search input in single mode | boolean | true | +| allowClear | whether allowClear | boolean | { clearIcon?: ReactNode } | false | +| tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | boolean | false | | tagRender | render custom tags. | (props: CustomTagProps) => ReactNode | - | | maxTagTextLength | max tag text length to show | number | - | | maxTagCount | max tag count to show | number | - | | maxTagPlaceholder | placeholder for omitted values | ReactNode/function(omittedValues) | - | -| combobox | enable combobox mode(can not set multiple at the same time) | bool | false | -| multiple | whether multiple select | bool | false | -| disabled | whether disabled select | bool | false | -| filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | bool | true/Function(inputValue:string, option:Option) | +| combobox | enable combobox mode(can not set multiple at the same time) | boolean | false | +| multiple | whether multiple select | boolean | false | +| disabled | whether disabled select | boolean | false | +| filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | boolean | true/Function(inputValue:string, option:Option) | | optionFilterProp | which prop value of option will be used for filter if filterOption is true | String | 'value' | | filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. | Function(optionA:Option, optionB: Option) | - | | optionLabelProp | render option value or option children as content of select | String: 'value'/'children' | 'value' | | defaultValue | initial selected option(s) | String \| String[] | - | | value | current selected option(s) | String \| String[] \| {key:String, label:React.Node} \| {key:String, label:React.Node}[] | - | -| labelInValue | whether to embed label in value, see above value type. Not support `combobox` mode | Bool | false | -| backfill | whether backfill select option to search input (Only works in single and combobox mode) | Bool | false | +| labelInValue | whether to embed label in value, see above value type. Not support `combobox` mode | boolean | false | +| backfill | whether backfill select option to search input (Only works in single and combobox mode) | boolean | false | | onChange | called when select an option or input value change(combobox) | function(value, option:Option \| Option[]) | - | | onSearch | called when input changed | function | - | | onBlur | called when blur | function | - | @@ -112,19 +112,19 @@ export default () => ( | onSelect | called when a option is selected. param is option's value and option instance | Function(value, option:Option) | - | | onDeselect | called when a option is deselected. param is option's value. only called for multiple or tags | Function(value, option:Option) | - | | onInputKeyDown | called when key down on input | Function(event) | - | -| defaultActiveFirstOption | whether active first option by default | bool | true | +| defaultActiveFirstOption | whether active first option by default | boolean | true | | getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} | | getInputElement | customize input element | function(): Element | - | | showAction | actions trigger the dropdown to show | String[]? | - | -| autoFocus | focus select after mount | Bool | - | +| autoFocus | focus select after mount | boolean | - | | autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true | | suffixIcon | specify the select arrow icon | ReactNode | - | | clearIcon | specify the clear icon | ReactNode | - | | removeIcon | specify the remove icon | ReactNode | - | | menuItemSelectedIcon | specify the item selected icon | ReactNode \| (props: MenuItemProps) => ReactNode | - | | dropdownRender | render custom dropdown menu | (menu: React.Node, props: MenuProps) => ReactNode | - | -| loading | show loading icon in arrow | Boolean | false | -| virtual | Disable virtual scroll | Boolean | true | +| loading | show loading icon in arrow | boolean | false | +| virtual | Disable virtual scroll | boolean | true | | direction | direction of dropdown | 'ltr' \| 'rtl' | 'ltr' | ### Methods @@ -139,7 +139,7 @@ export default () => ( | name | description | type | default | | --- | --- | --- | --- | | className | additional class to option | String | '' | -| disabled | no effect for click or keydown for this item | bool | false | +| disabled | no effect for click or keydown for this item | boolean | false | | key | if react want you to set key, then key is same as value, you can omit value | String/number | - | | value | default filter by this attribute. if react want you to set key, then key is same as value, you can omit value | String/number | - | | title | if you are not satisfied with auto-generated `title` which is show while hovering on selected value, you can customize it with this property | String | - | diff --git a/package.json b/package.json index ef1022965..4c669377f 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "@types/jest": "^26.0.24", "@types/react": "^17.0.15", "@types/react-dom": "^17.0.3", + "babel-jest": "^29.6.1", "cross-env": "^7.0.0", "dumi": "^1.1.32", "enzyme": "^3.3.0", diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx index 7beee3faa..dda27a7cb 100644 --- a/src/BaseSelect.tsx +++ b/src/BaseSelect.tsx @@ -17,6 +17,11 @@ import type { RefTriggerProps } from './SelectTrigger'; import SelectTrigger from './SelectTrigger'; import TransBtn from './TransBtn'; import { getSeparatedContent } from './utils/valueUtil'; +import type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType } from './interface'; +import { useAllowClear } from './hooks/useAllowClear'; +import { warning } from 'rc-util'; + +export type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType }; const DEFAULT_OMIT_PROPS = [ 'value', @@ -32,19 +37,6 @@ const DEFAULT_OMIT_PROPS = [ 'onPopupScroll', 'tabIndex', ] as const; - -export type RenderNode = React.ReactNode | ((props: any) => React.ReactNode); - -export type RenderDOMFunc = (props: any) => HTMLElement; - -export type Mode = 'multiple' | 'tags' | 'combobox'; - -export type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'; - -export type RawValueType = string | number; - -export type DisplayInfoType = 'add' | 'remove' | 'clear'; - export interface RefOptionListProps { onKeyDown: React.KeyboardEventHandler; onKeyUp: React.KeyboardEventHandler; @@ -59,14 +51,6 @@ export type CustomTagProps = { closable: boolean; }; -export interface DisplayValueType { - key?: React.Key; - value?: RawValueType; - label?: React.ReactNode; - title?: string | number; - disabled?: boolean; -} - export interface BaseSelectRef { focus: () => void; blur: () => void; @@ -104,10 +88,10 @@ export interface BaseSelectPrivateProps { searchValue: string, info: { source: - | 'typing' //User typing - | 'effect' // Code logic trigger - | 'submit' // tag mode only - | 'blur'; // Not trigger event + | 'typing' //User typing + | 'effect' // Code logic trigger + | 'submit' // tag mode only + | 'blur'; // Not trigger event }, ) => void; /** Trigger when search text match the `tokenSeparators`. Will provide split content */ @@ -168,9 +152,12 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri tokenSeparators?: string[]; // >>> Icons - allowClear?: boolean; + allowClear?: boolean | { clearIcon?: RenderNode }; suffixIcon?: RenderNode; - /** Clear all icon */ + /** + * Clear all icon + * @deprecated Please use `allowClear` instead + **/ clearIcon?: RenderNode; /** Selector remove icon */ removeIcon?: RenderNode; @@ -697,7 +684,12 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref = () => { onClear?.(); @@ -710,22 +702,21 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref - × - - ); - } + const { + allowClear: mergedAllowClear, + clearIcon: clearNode + } = useAllowClear( + prefixCls, + onClearMouseDown, + displayValues, + allowClear, + clearIcon, + disabled, + + mergedSearchValue, + mode, + ); + // =========================== OptionList =========================== const optionList = ; @@ -839,7 +830,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref ); } diff --git a/src/hooks/useAllowClear.tsx b/src/hooks/useAllowClear.tsx new file mode 100644 index 000000000..cc81e5e8d --- /dev/null +++ b/src/hooks/useAllowClear.tsx @@ -0,0 +1,48 @@ +import TransBtn from '../TransBtn'; +import type { DisplayValueType, Mode } from '../interface'; +import type { ReactNode } from 'react'; +import React from 'react'; + +export function useAllowClear( + prefixCls, + onClearMouseDown, + displayValues: DisplayValueType[], + allowClear?: boolean | { clearIcon?: ReactNode }, + clearIcon?: ReactNode, + disabled = false, + mergedSearchValue?: string, + mode?: Mode +) { + const mergedClearIcon = React.useMemo(() => { + if (typeof allowClear === "object") { + return allowClear.clearIcon; + } + if (!!clearIcon) return clearIcon; + }, [allowClear, clearIcon]); + + + const mergedAllowClear = React.useMemo(() => { + if ( + !disabled && + !!allowClear && + (displayValues.length || mergedSearchValue) && + !(mode === 'combobox' && mergedSearchValue === '') + ) { + return true; + } + return false; + }, [allowClear, disabled, displayValues.length, mergedSearchValue, mode]); + + return { + allowClear: mergedAllowClear, + clearIcon: ( + + × + + ) + }; +} diff --git a/src/interface.ts b/src/interface.ts index a24aa372d..938ea604a 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -1,6 +1,6 @@ import type * as React from 'react'; -import type { RawValueType } from './BaseSelect'; +export type RawValueType = string | number; export interface FlattenOptionData { label?: React.ReactNode; data: OptionType; @@ -9,3 +9,22 @@ export interface FlattenOptionData { groupOption?: boolean; group?: boolean; } + +export interface DisplayValueType { + key?: React.Key; + value?: RawValueType; + label?: React.ReactNode; + title?: string | number; + disabled?: boolean; +} + +export type RenderNode = React.ReactNode | ((props: any) => React.ReactNode); + +export type RenderDOMFunc = (props: any) => HTMLElement; + +export type Mode = 'multiple' | 'tags' | 'combobox'; + +export type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'; + +export type DisplayInfoType = 'add' | 'remove' | 'clear'; + diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index c7c2b79f8..8eb6ef1ce 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -266,6 +266,46 @@ describe('Select.Basic', () => { , ); expect(wrapper2.find('.rc-select-clear-icon').length).toBeFalsy(); + + const wrapper3 = mount( + , + ); + expect(wrapper3.find('.custom-clear-icon').length).toBeTruthy(); + expect(wrapper3.find('.custom-clear-icon').text()).toBe('x'); + + const wrapper4 = mount( + , + ); + expect(wrapper4.find('.custom-clear-icon').length).toBeFalsy(); + + + resetWarned(); + const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const wrapper5 = mount( + , + ); + expect(wrapper5.find('.custom-clear-icon').length).toBeTruthy(); + expect(wrapper5.find('.custom-clear-icon').text()).toBe('x'); + expect(errSpy).toHaveBeenCalledWith( + 'Warning: `clearIcon` will be removed in future. Please use `allowClear` instead.' + ); + + const wrapper6 = mount( + , + ); + expect(wrapper6.find('.custom-clear-icon').length).toBeFalsy(); }); it('should direction rtl', () => { From 3118cbcfd631aff9c8aeca899fe797542c515592 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 24 Jul 2023 10:32:05 +0800 Subject: [PATCH 32/58] 14.7.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4c669377f..f5e028182 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.6.0", + "version": "14.7.0", "description": "React Select", "engines": { "node": ">=8.x" From b18e4660353e72b103deaaaf7056a86a46187d22 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 25 Jul 2023 18:54:44 +0800 Subject: [PATCH 33/58] fix: aria-activedescendant ARIA attributes must conform to valid values (#966) --- package.json | 1 + src/Selector/Input.tsx | 2 +- tests/__snapshots__/Combobox.test.tsx.snap | 2 -- tests/__snapshots__/Multiple.test.tsx.snap | 4 ---- tests/__snapshots__/Select.test.tsx.snap | 6 ------ tests/__snapshots__/Tags.test.tsx.snap | 4 ---- tests/__snapshots__/ssr.test.tsx.snap | 2 +- 7 files changed, 3 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index f5e028182..ffa6eb0f2 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "jsonp": "^0.2.1", "np": "^7.5.0", "prettier": "^2.7.1", + "querystring": "^0.2.1", "rc-dialog": "^9.0.0", "rc-test": "^7.0.9", "typescript": "^4.2.3" diff --git a/src/Selector/Input.tsx b/src/Selector/Input.tsx index 498608c84..d006dc71d 100644 --- a/src/Selector/Input.tsx +++ b/src/Selector/Input.tsx @@ -95,7 +95,7 @@ const Input: React.RefForwardingComponent = ( 'aria-owns': `${id}_list`, 'aria-autocomplete': 'list', 'aria-controls': `${id}_list`, - 'aria-activedescendant': activeDescendantId, + 'aria-activedescendant': open ? activeDescendantId : undefined, ...attrs, value: editable ? value : '', maxLength, diff --git a/tests/__snapshots__/Combobox.test.tsx.snap b/tests/__snapshots__/Combobox.test.tsx.snap index 53efd881d..43deee073 100644 --- a/tests/__snapshots__/Combobox.test.tsx.snap +++ b/tests/__snapshots__/Combobox.test.tsx.snap @@ -11,7 +11,6 @@ exports[`Select.Combobox renders controlled correctly 1`] = ` class="rc-select-selection-search" >
"`; +exports[`Select.SSR should work 1`] = `"
"`; From 8932c566936b869b1f712e3b5f58d515c5a01515 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 25 Jul 2023 19:00:22 +0800 Subject: [PATCH 34/58] 14.7.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ffa6eb0f2..b0a17c0d3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.7.0", + "version": "14.7.1", "description": "React Select", "engines": { "node": ">=8.x" From 7d0cd6cbdc066874ae6f47661f6df92e8b01f7e7 Mon Sep 17 00:00:00 2001 From: kang Date: Wed, 2 Aug 2023 00:35:54 +0800 Subject: [PATCH 35/58] fix: fixed combobox mode not show 0 value (#968) * fix: fixed combobox mode not show 0 value * fix: combo mode no value just fixed 0 value * fix: format * fix: take review suggestion and add comment --- src/Select.tsx | 6 +++--- src/utils/commonUtil.ts | 5 +++++ tests/Combobox.test.tsx | 6 ++++++ 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/Select.tsx b/src/Select.tsx index c5b5ad1b4..6d99d80ce 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -50,7 +50,7 @@ import OptGroup from './OptGroup'; import Option from './Option'; import OptionList from './OptionList'; import SelectContext from './SelectContext'; -import { hasValue, toArray } from './utils/commonUtil'; +import { hasValue, isComboNoValue, toArray } from './utils/commonUtil'; import { fillFieldNames, flattenOptions, injectPropsWithOption } from './utils/valueUtil'; import warningProps, { warningNullOptions } from './utils/warningPropsUtil'; @@ -307,8 +307,8 @@ const Select = React.forwardRef( const rawLabeledValues = React.useMemo(() => { const values = convert2LabelValues(internalValue); - // combobox no need save value when it's no value - if (mode === 'combobox' && !values[0]?.value) { + // combobox no need save value when it's no value (exclude value equal 0) + if (mode === 'combobox' && isComboNoValue(values[0]?.value)) { return []; } diff --git a/src/utils/commonUtil.ts b/src/utils/commonUtil.ts index a1bb59a8f..ac948e3e1 100644 --- a/src/utils/commonUtil.ts +++ b/src/utils/commonUtil.ts @@ -17,6 +17,11 @@ export function hasValue(value) { return value !== undefined && value !== null; } +/** combo mode no value judgment function */ +export function isComboNoValue(value) { + return !value && value !== 0; +} + function isTitleType(title: any) { return ['string', 'number'].includes(typeof title); } diff --git a/tests/Combobox.test.tsx b/tests/Combobox.test.tsx index cfb3840d9..c063f8faa 100644 --- a/tests/Combobox.test.tsx +++ b/tests/Combobox.test.tsx @@ -600,4 +600,10 @@ describe('Select.Combobox', () => { jest.useRealTimers(); }); + + // https://github.com/ant-design/ant-design/issues/43936 + it('combobox mode not show 0 value', () => { + const wrapper = mount(, + ); + toggleOpen(wrapper); + expect(wrapper.find('.rc-select-item-option').length).toBe(2); + wrapper.find('input').simulate('change', { target: { value: 'US' } }); + + expect(wrapper.find('.rc-select-item-option').length).toBe(1); + expect(errSpy).not.toHaveBeenCalled(); + }); }); From b11dbeaab5178a244299bbb592f6592f15840ac4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Wed, 2 Aug 2023 19:09:30 +0800 Subject: [PATCH 38/58] fix: remove deprecated warning of clearIcon (#970) --- src/BaseSelect.tsx | 7 ------- tests/Select.test.tsx | 4 ---- 2 files changed, 11 deletions(-) diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx index dda27a7cb..a24d333a9 100644 --- a/src/BaseSelect.tsx +++ b/src/BaseSelect.tsx @@ -19,7 +19,6 @@ import TransBtn from './TransBtn'; import { getSeparatedContent } from './utils/valueUtil'; import type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType } from './interface'; import { useAllowClear } from './hooks/useAllowClear'; -import { warning } from 'rc-util'; export type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType }; @@ -684,12 +683,6 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref = () => { onClear?.(); diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 8eb6ef1ce..1a0634b21 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -286,7 +286,6 @@ describe('Select.Basic', () => { resetWarned(); - const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); const wrapper5 = mount( x
}> From ca60d431362ad44cf69720b9f3afe5f7ec3aa85a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 2 Aug 2023 19:18:23 +0800 Subject: [PATCH 39/58] 14.7.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bef0f14f0..a93e94efa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.7.2", + "version": "14.7.3", "description": "React Select", "engines": { "node": ">=8.x" From b2d241fc6a7fcea66bd2b744f017c7d3c5e75881 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Aug 2023 14:50:31 +0800 Subject: [PATCH 40/58] fix: search input a11y issues (#971) --- src/Selector/Input.tsx | 1 + tests/__snapshots__/Combobox.test.tsx.snap | 2 ++ tests/__snapshots__/Multiple.test.tsx.snap | 4 ++++ tests/__snapshots__/Select.test.tsx.snap | 5 +++++ tests/__snapshots__/Tags.test.tsx.snap | 5 +++++ tests/__snapshots__/ssr.test.tsx.snap | 2 +- 6 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/Selector/Input.tsx b/src/Selector/Input.tsx index d006dc71d..5cda09e7f 100644 --- a/src/Selector/Input.tsx +++ b/src/Selector/Input.tsx @@ -90,6 +90,7 @@ const Input: React.RefForwardingComponent = ( className: classNames(`${prefixCls}-selection-search-input`, inputNode?.props?.className), role: 'combobox', + 'aria-label': 'Search', 'aria-expanded': open, 'aria-haspopup': 'listbox', 'aria-owns': `${id}_list`, diff --git a/tests/__snapshots__/Combobox.test.tsx.snap b/tests/__snapshots__/Combobox.test.tsx.snap index 43deee073..60dba33ca 100644 --- a/tests/__snapshots__/Combobox.test.tsx.snap +++ b/tests/__snapshots__/Combobox.test.tsx.snap @@ -15,6 +15,7 @@ exports[`Select.Combobox renders controlled correctly 1`] = ` aria-controls="rc_select_TEST_OR_SSR_list" aria-expanded="false" aria-haspopup="listbox" + aria-label="Search" aria-owns="rc_select_TEST_OR_SSR_list" autocomplete="off" class="rc-select-selection-search-input" @@ -48,6 +49,7 @@ exports[`Select.Combobox renders correctly 1`] = ` aria-controls="rc_select_TEST_OR_SSR_list" aria-expanded="false" aria-haspopup="listbox" + aria-label="Search" aria-owns="rc_select_TEST_OR_SSR_list" autocomplete="off" class="rc-select-selection-search-input" diff --git a/tests/__snapshots__/Multiple.test.tsx.snap b/tests/__snapshots__/Multiple.test.tsx.snap index f17631fab..60645adc0 100644 --- a/tests/__snapshots__/Multiple.test.tsx.snap +++ b/tests/__snapshots__/Multiple.test.tsx.snap @@ -23,6 +23,7 @@ exports[`Select.Multiple render not display maxTagPlaceholder if maxTagCount not aria-controls="rc_select_TEST_OR_SSR_list" aria-expanded="false" aria-haspopup="listbox" + aria-label="Search" aria-owns="rc_select_TEST_OR_SSR_list" autocomplete="off" class="rc-select-selection-search-input" @@ -143,6 +144,7 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla aria-controls="rc_select_TEST_OR_SSR_list" aria-expanded="false" aria-haspopup="listbox" + aria-label="Search" aria-owns="rc_select_TEST_OR_SSR_list" autocomplete="off" class="rc-select-selection-search-input" @@ -260,6 +262,7 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla aria-controls="rc_select_TEST_OR_SSR_list" aria-expanded="false" aria-haspopup="listbox" + aria-label="Search" aria-owns="rc_select_TEST_OR_SSR_list" autocomplete="off" class="rc-select-selection-search-input" @@ -361,6 +364,7 @@ exports[`Select.Multiple render truncates values by maxTagTextLength 1`] = ` aria-controls="rc_select_TEST_OR_SSR_list" aria-expanded="false" aria-haspopup="listbox" + aria-label="Search" aria-owns="rc_select_TEST_OR_SSR_list" autocomplete="off" class="rc-select-selection-search-input" diff --git a/tests/__snapshots__/Select.test.tsx.snap b/tests/__snapshots__/Select.test.tsx.snap index 81b12000a..6b44de060 100644 --- a/tests/__snapshots__/Select.test.tsx.snap +++ b/tests/__snapshots__/Select.test.tsx.snap @@ -123,6 +123,7 @@ exports[`Select.Basic no search 1`] = ` aria-controls="undefined_list" aria-expanded="false" aria-haspopup="listbox" + aria-label="Search" aria-owns="undefined_list" autocomplete="off" class="rc-select-selection-search-input" @@ -208,6 +209,7 @@ exports[`Select.Basic render renders correctly 1`] = ` aria-controls="undefined_list" aria-expanded="false" aria-haspopup="listbox" + aria-label="Search" aria-owns="undefined_list" autocomplete="off" class="antd-selection-search-input" @@ -255,6 +257,7 @@ exports[`Select.Basic render renders data-attributes correctly 1`] = ` aria-controls="undefined_list" aria-expanded="false" aria-haspopup="listbox" + aria-label="Search" aria-owns="undefined_list" autocomplete="off" class="antd-selection-search-input" @@ -300,6 +303,7 @@ exports[`Select.Basic render renders disabled select correctly 1`] = ` aria-controls="undefined_list" aria-expanded="false" aria-haspopup="listbox" + aria-label="Search" aria-owns="undefined_list" autocomplete="off" class="antd-selection-search-input" @@ -337,6 +341,7 @@ exports[`Select.Basic render renders role prop correctly 1`] = ` aria-controls="undefined_list" aria-expanded="false" aria-haspopup="listbox" + aria-label="Search" aria-owns="undefined_list" autocomplete="off" class="antd-selection-search-input" diff --git a/tests/__snapshots__/Tags.test.tsx.snap b/tests/__snapshots__/Tags.test.tsx.snap index ba9c0fb6d..97c80cbdd 100644 --- a/tests/__snapshots__/Tags.test.tsx.snap +++ b/tests/__snapshots__/Tags.test.tsx.snap @@ -79,6 +79,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = ` aria-controls="rc_select_TEST_OR_SSR_list" aria-expanded="true" aria-haspopup="listbox" + aria-label="Search" aria-owns="rc_select_TEST_OR_SSR_list" autocomplete="off" class="rc-select-selection-search-input" @@ -252,6 +253,7 @@ exports[`Select.Tags render not display maxTagPlaceholder if maxTagCount not rea aria-controls="rc_select_TEST_OR_SSR_list" aria-expanded="false" aria-haspopup="listbox" + aria-label="Search" aria-owns="rc_select_TEST_OR_SSR_list" autocomplete="off" class="rc-select-selection-search-input" @@ -369,6 +371,7 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho aria-controls="rc_select_TEST_OR_SSR_list" aria-expanded="false" aria-haspopup="listbox" + aria-label="Search" aria-owns="rc_select_TEST_OR_SSR_list" autocomplete="off" class="rc-select-selection-search-input" @@ -483,6 +486,7 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho aria-controls="rc_select_TEST_OR_SSR_list" aria-expanded="false" aria-haspopup="listbox" + aria-label="Search" aria-owns="rc_select_TEST_OR_SSR_list" autocomplete="off" class="rc-select-selection-search-input" @@ -581,6 +585,7 @@ exports[`Select.Tags render truncates values by maxTagTextLength 1`] = ` aria-controls="rc_select_TEST_OR_SSR_list" aria-expanded="false" aria-haspopup="listbox" + aria-label="Search" aria-owns="rc_select_TEST_OR_SSR_list" autocomplete="off" class="rc-select-selection-search-input" diff --git a/tests/__snapshots__/ssr.test.tsx.snap b/tests/__snapshots__/ssr.test.tsx.snap index 41628b240..9bf053f4c 100644 --- a/tests/__snapshots__/ssr.test.tsx.snap +++ b/tests/__snapshots__/ssr.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Select.SSR should work 1`] = `"
"`; +exports[`Select.SSR should work 1`] = `"
"`; From 2decf052c3f93c1b9d33651c411b16dc81311987 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Aug 2023 20:11:56 +0800 Subject: [PATCH 41/58] 14.7.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a93e94efa..fbb9beda7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.7.3", + "version": "14.7.4", "description": "React Select", "engines": { "node": ">=8.x" From a64b6baca73ec84551c7eb65fdddb6d178107352 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Wed, 23 Aug 2023 17:33:10 +0800 Subject: [PATCH 42/58] refactor: Select use `@rc-component/trigger` align logic instead of self measure (#976) * chore: use trigger stretch * test: update snapshot --- docs/examples/getPopupContainer.tsx | 47 ++++++++++++++------ src/BaseSelect.tsx | 55 ++++++++++++------------ src/SelectTrigger.tsx | 34 +++++++++------ tests/__snapshots__/Select.test.tsx.snap | 8 ++-- tests/__snapshots__/Tags.test.tsx.snap | 2 +- 5 files changed, 86 insertions(+), 60 deletions(-) diff --git a/docs/examples/getPopupContainer.tsx b/docs/examples/getPopupContainer.tsx index ddb29efc0..9fb1e59a3 100644 --- a/docs/examples/getPopupContainer.tsx +++ b/docs/examples/getPopupContainer.tsx @@ -1,9 +1,22 @@ -import '../../assets/index.less'; import 'rc-dialog/assets/index.css'; +import '../../assets/index.less'; import Dialog from 'rc-dialog'; +import Select, { type SelectProps } from 'rc-select'; import React from 'react'; -import Select, { Option } from 'rc-select'; + +const MySelect = (props: Partial) => ( + - - - - +
+
+

Transform: 150%

+ + + + +
); } diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx index a24d333a9..85ae8bc59 100644 --- a/src/BaseSelect.tsx +++ b/src/BaseSelect.tsx @@ -7,20 +7,36 @@ import KeyCode from 'rc-util/lib/KeyCode'; import { useComposeRef } from 'rc-util/lib/ref'; import type { ScrollConfig, ScrollTo } from 'rc-virtual-list/lib/List'; import * as React from 'react'; +import { useAllowClear } from './hooks/useAllowClear'; import { BaseSelectContext } from './hooks/useBaseProps'; import useDelayReset from './hooks/useDelayReset'; import useLock from './hooks/useLock'; import useSelectTriggerControl from './hooks/useSelectTriggerControl'; +import type { + DisplayInfoType, + DisplayValueType, + Mode, + Placement, + RawValueType, + RenderDOMFunc, + RenderNode, +} from './interface'; import type { RefSelectorProps } from './Selector'; import Selector from './Selector'; import type { RefTriggerProps } from './SelectTrigger'; import SelectTrigger from './SelectTrigger'; import TransBtn from './TransBtn'; import { getSeparatedContent } from './utils/valueUtil'; -import type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType } from './interface'; -import { useAllowClear } from './hooks/useAllowClear'; -export type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType }; +export type { + DisplayInfoType, + DisplayValueType, + Mode, + Placement, + RenderDOMFunc, + RenderNode, + RawValueType, +}; const DEFAULT_OMIT_PROPS = [ 'value', @@ -87,10 +103,10 @@ export interface BaseSelectPrivateProps { searchValue: string, info: { source: - | 'typing' //User typing - | 'effect' // Code logic trigger - | 'submit' // tag mode only - | 'blur'; // Not trigger event + | 'typing' //User typing + | 'effect' // Code logic trigger + | 'submit' // tag mode only + | 'blur'; // Not trigger event }, ) => void; /** Trigger when search text match the `tokenSeparators`. Will provide split content */ @@ -153,8 +169,8 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri // >>> Icons allowClear?: boolean | { clearIcon?: RenderNode }; suffixIcon?: RenderNode; - /** - * Clear all icon + /** + * Clear all icon * @deprecated Please use `allowClear` instead **/ clearIcon?: RenderNode; @@ -607,24 +623,12 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref { - if (triggerOpen) { - // Guaranteed width accuracy - const newWidth = Math.ceil(containerRef.current?.getBoundingClientRect().width); - if (containerWidth !== newWidth && !Number.isNaN(newWidth)) { - setContainerWidth(newWidth); - } - } - }, [triggerOpen]); - // Used for raw custom input trigger let onTriggerVisibleChange: null | ((newOpen: boolean) => void); if (customizeRawInputElement) { @@ -695,22 +699,18 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref; @@ -736,7 +736,6 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref { + if (isNumberPopupWidth) { + return null; + } + + return dropdownMatchSelectWidth === false ? 'minWidth' : 'width'; + }, [dropdownMatchSelectWidth, isNumberPopupWidth]); + + let popupStyle = dropdownStyle; + + if (isNumberPopupWidth) { + popupStyle = { + ...popupStyle, + width: dropdownMatchSelectWidth, + }; + } + // ======================= Ref ======================= const popupRef = React.useRef(null); @@ -131,17 +149,6 @@ const SelectTrigger: React.RefForwardingComponent popupRef.current, })); - const popupStyle: React.CSSProperties = { - minWidth: containerWidth, - ...dropdownStyle, - }; - - if (typeof dropdownMatchSelectWidth === 'number') { - popupStyle.width = dropdownMatchSelectWidth; - } else if (dropdownMatchSelectWidth) { - popupStyle.width = containerWidth; - } - return ( } + stretch={stretch} popupAlign={dropdownAlign} popupVisible={visible} getPopupContainer={getPopupContainer} diff --git a/tests/__snapshots__/Select.test.tsx.snap b/tests/__snapshots__/Select.test.tsx.snap index 6b44de060..28c71a8c8 100644 --- a/tests/__snapshots__/Select.test.tsx.snap +++ b/tests/__snapshots__/Select.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
diff --git a/tests/__snapshots__/Tags.test.tsx.snap b/tests/__snapshots__/Tags.test.tsx.snap index 97c80cbdd..78cefee4c 100644 --- a/tests/__snapshots__/Tags.test.tsx.snap +++ b/tests/__snapshots__/Tags.test.tsx.snap @@ -101,7 +101,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
Date: Wed, 23 Aug 2023 17:35:25 +0800 Subject: [PATCH 43/58] 14.8.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fbb9beda7..27f644d12 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.7.4", + "version": "14.8.0", "description": "React Select", "engines": { "node": ">=8.x" From 526ba82a4bb90bd89b63fdf600a70467e8264fa4 Mon Sep 17 00:00:00 2001 From: Flavius Dolca <33321455+flaviusdolca@users.noreply.github.com> Date: Fri, 1 Sep 2023 18:12:48 +0200 Subject: [PATCH 44/58] #978 fix: initialise aria-expanded (#979) --- src/Selector/Input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Selector/Input.tsx b/src/Selector/Input.tsx index 5cda09e7f..6544f3520 100644 --- a/src/Selector/Input.tsx +++ b/src/Selector/Input.tsx @@ -91,7 +91,7 @@ const Input: React.RefForwardingComponent = ( role: 'combobox', 'aria-label': 'Search', - 'aria-expanded': open, + 'aria-expanded': open || false, 'aria-haspopup': 'listbox', 'aria-owns': `${id}_list`, 'aria-autocomplete': 'list', From 28a3dabb15b7842d2902c66da6fde05c6eb02229 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 2 Sep 2023 18:32:26 +0800 Subject: [PATCH 45/58] 14.8.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 27f644d12..19368b694 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.8.0", + "version": "14.8.1", "description": "React Select", "engines": { "node": ">=8.x" From b5fccbda6c03ada9aee36aa46cd135d0a696df2e Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Thu, 14 Sep 2023 14:47:07 +0800 Subject: [PATCH 46/58] fix: trigger onBlur does not require reset focused (#980) * fix: trigger onBlur does not require reset focused * chore: add test case * chore: update test case * Update tests/focus.test.tsx * Update tests/focus.test.tsx --------- Co-authored-by: dujiaqi Co-authored-by: MadCcc <1075746765@qq.com> --- src/BaseSelect.tsx | 7 ++++++- tests/focus.test.tsx | 42 +++++++++++++++++++++++++++++++++++++++++- 2 files changed, 47 insertions(+), 2 deletions(-) diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx index 85ae8bc59..21375ab1c 100644 --- a/src/BaseSelect.tsx +++ b/src/BaseSelect.tsx @@ -316,6 +316,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref(null); const selectorRef = React.useRef(null); const listRef = React.useRef(null); + const blurRef = React.useRef(false); /** Used for component focused management */ const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset(); @@ -451,7 +452,8 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref = (...args) => { + blurRef.current = true; + setMockFocused(false, () => { focusRef.current = false; + blurRef.current = false; onToggleOpen(false); }); diff --git a/tests/focus.test.tsx b/tests/focus.test.tsx index 931bfce33..80b6aaf01 100644 --- a/tests/focus.test.tsx +++ b/tests/focus.test.tsx @@ -1,7 +1,8 @@ import { mount } from 'enzyme'; -import React from 'react'; +import React, { useState } from 'react'; import { act } from 'react-dom/test-utils'; import Select from '../src'; +import { fireEvent, render } from '@testing-library/react'; describe('Select.Focus', () => { it('disabled should reset focused', () => { @@ -31,6 +32,45 @@ describe('Select.Focus', () => { jest.useRealTimers(); }); + it('after onBlur is triggered the focused does not need to be reset', () => { + jest.useFakeTimers(); + + const onFocus = jest.fn(); + + const Demo: React.FC = () => { + const [disabled, setDisabled] = useState(false); + return ( + <> + { menuItemSelectedIcon={menuItemSelectedIcon} />, ); + expect(menuItemSelectedIcon).toHaveBeenCalledWith({ + value: '1', + disabled: undefined, + isSelected: true, + }); - expect(menuItemSelectedIcon).toHaveBeenCalledWith({ isSelected: true }); + mount( +
"`; +exports[`Select.SSR should work 1`] = `"
"`; From 83d5af3ceeef49349b8e767175b0f4450f5cfb97 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 13 Oct 2023 19:23:46 +0800 Subject: [PATCH 50/58] 14.9.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ddc439de3..76adc1dbf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.9.0", + "version": "14.9.1", "description": "React Select", "engines": { "node": ">=8.x" From 2e763f6f1520100e77ef2d28cc89d25c51848a3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Tue, 17 Oct 2023 15:55:48 +0800 Subject: [PATCH 51/58] chore: rm option len match (#986) * chore: rm option len match * chore: clean up --- docs/demo/scroll-loading.md | 2 ++ docs/examples/scroll-loading.tsx | 41 ++++++++++++++++++++++++++++++++ src/OptionList.tsx | 2 +- 3 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 docs/demo/scroll-loading.md create mode 100644 docs/examples/scroll-loading.tsx diff --git a/docs/demo/scroll-loading.md b/docs/demo/scroll-loading.md new file mode 100644 index 000000000..0358bd371 --- /dev/null +++ b/docs/demo/scroll-loading.md @@ -0,0 +1,2 @@ +## scroll loading + diff --git a/docs/examples/scroll-loading.tsx b/docs/examples/scroll-loading.tsx new file mode 100644 index 000000000..987810e33 --- /dev/null +++ b/docs/examples/scroll-loading.tsx @@ -0,0 +1,41 @@ +import Select from 'rc-select'; +import React from 'react'; +import '../../assets/index.less'; + +function genData(len: number) { + return new Array(len).fill(0).map((_, index) => ({ + label: `label ${index}`, + value: index, + })); +} + +const Loading = ({ onLoad }) => { + React.useEffect(() => { + setTimeout(onLoad, 1000); + }, []); + + return
Loading...
; +}; + +export default () => { + const [options, setOptions] = React.useState(() => genData(10)); + + return ( + { + return `${option.label} - ${index}`; + }} + /> + ); +}; diff --git a/src/OptionList.tsx b/src/OptionList.tsx index a28dc86bf..a9eee236b 100644 --- a/src/OptionList.tsx +++ b/src/OptionList.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; -import useMemo from 'rc-util/lib/hooks/useMemo'; import KeyCode from 'rc-util/lib/KeyCode'; +import useMemo from 'rc-util/lib/hooks/useMemo'; import omit from 'rc-util/lib/omit'; import pickAttrs from 'rc-util/lib/pickAttrs'; import type { ListRef } from 'rc-virtual-list'; @@ -8,11 +8,11 @@ import List from 'rc-virtual-list'; import type { ScrollConfig } from 'rc-virtual-list/lib/List'; import * as React from 'react'; import { useEffect } from 'react'; -import useBaseProps from './hooks/useBaseProps'; -import type { FlattenOptionData } from './interface'; import type { BaseOptionType, RawValueType } from './Select'; import SelectContext from './SelectContext'; import TransBtn from './TransBtn'; +import useBaseProps from './hooks/useBaseProps'; +import type { FlattenOptionData } from './interface'; import { isPlatformMac } from './utils/platformUtil'; // export interface OptionListProps { @@ -56,6 +56,7 @@ const OptionList: React.ForwardRefRenderFunction = (_, r direction, listHeight, listItemHeight, + optionRender, } = React.useContext(SelectContext); const itemPrefixCls = `${prefixCls}-item`; @@ -366,7 +367,11 @@ const OptionList: React.ForwardRefRenderFunction = (_, r }} style={style} > -
{content}
+
+ {typeof optionRender === 'function' + ? optionRender(item, { index: itemIndex }) + : content} +
{React.isValidElement(menuItemSelectedIcon) || selected} {iconVisible && ( , + info: { index: number }, + ) => React.ReactNode; defaultActiveFirstOption?: boolean; virtual?: boolean; direction?: 'ltr' | 'rtl'; @@ -184,6 +189,7 @@ const Select = React.forwardRef( optionFilterProp, optionLabelProp, options, + optionRender, children, defaultActiveFirstOption, menuItemSelectedIcon, @@ -605,6 +611,7 @@ const Select = React.forwardRef( listHeight, listItemHeight, childrenAsData, + optionRender, }; }, [ parsedOptions, @@ -620,6 +627,7 @@ const Select = React.forwardRef( listHeight, listItemHeight, childrenAsData, + optionRender, ]); // ========================== Warning =========================== diff --git a/src/SelectContext.ts b/src/SelectContext.ts index d6cf9372d..cd7d5f720 100644 --- a/src/SelectContext.ts +++ b/src/SelectContext.ts @@ -1,11 +1,18 @@ import * as React from 'react'; import type { RawValueType, RenderNode } from './BaseSelect'; +import type { + BaseOptionType, + FieldNames, + OnActiveValue, + OnInternalSelect, + SelectProps, +} from './Select'; import type { FlattenOptionData } from './interface'; -import type { BaseOptionType, FieldNames, OnActiveValue, OnInternalSelect } from './Select'; // Use any here since we do not get the type during compilation export interface SelectContextProps { options: BaseOptionType[]; + optionRender?: SelectProps['optionRender']; flattenOptions: FlattenOptionData[]; onActiveValue: OnActiveValue; defaultActiveFirstOption?: boolean; @@ -14,7 +21,7 @@ export interface SelectContextProps { rawValues: Set; fieldNames?: FieldNames; virtual?: boolean; - direction?: "ltr" | "rtl"; + direction?: 'ltr' | 'rtl'; listHeight?: number; listItemHeight?: number; childrenAsData?: boolean; diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 2825097f1..3ff82ec77 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -268,7 +268,7 @@ describe('Select.Basic', () => { expect(wrapper2.find('.rc-select-clear-icon').length).toBeFalsy(); const wrapper3 = mount( - x
}} value="1"> , @@ -277,17 +277,16 @@ describe('Select.Basic', () => { expect(wrapper3.find('.custom-clear-icon').text()).toBe('x'); const wrapper4 = mount( - x
}}> , ); expect(wrapper4.find('.custom-clear-icon').length).toBeFalsy(); - resetWarned(); const wrapper5 = mount( - x
} value="1"> , @@ -296,7 +295,7 @@ describe('Select.Basic', () => { expect(wrapper5.find('.custom-clear-icon').text()).toBe('x'); const wrapper6 = mount( - x
}> , @@ -1361,7 +1360,7 @@ describe('Select.Basic', () => { beforeAll(() => { domHook = spyElementPrototypes(HTMLElement, { getBoundingClientRect: () => ({ - width: 1000 + width: 1000, }), }); }); @@ -2095,4 +2094,24 @@ describe('Select.Basic', () => { const { container } = testingRender( { + return `${option.label} - ${index}`; + }} + />, + ); + expect(container.querySelector('.rc-select-item-option-content').innerHTML).toEqual( + 'test1 - 0', + ); + }); }); From 4e21ee1cf00916e29a5c7c1171d87efeaf8427d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 25 Oct 2023 15:25:53 +0800 Subject: [PATCH 55/58] 14.10.0 --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 06279073b..e1d26406d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-select", - "version": "14.9.2", + "version": "14.10.0", "description": "React Select", "engines": { "node": ">=8.x" @@ -76,4 +76,4 @@ "rc-test": "^7.0.9", "typescript": "^5.2.2" } -} \ No newline at end of file +} From 59bdbf7c99b877cb30848615e1aed5f2eba38f08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?k=C3=A2ichi?= Date: Tue, 7 Nov 2023 11:40:19 +0800 Subject: [PATCH 56/58] Update README.md (#990) Update Doc https://github.com/react-component/select/issues/845 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4e318b24b..fa4013411 100644 --- a/README.md +++ b/README.md @@ -124,7 +124,7 @@ export default () => ( | clearIcon | specify the clear icon | ReactNode | - | | removeIcon | specify the remove icon | ReactNode | - | | menuItemSelectedIcon | specify the item selected icon | ReactNode \| (props: MenuItemProps) => ReactNode | - | -| dropdownRender | render custom dropdown menu | (menu: React.Node, props: MenuProps) => ReactNode | - | +| dropdownRender | render custom dropdown menu | (menu: React.Node) => ReactNode | - | | loading | show loading icon in arrow | boolean | false | | virtual | Disable virtual scroll | boolean | true | | direction | direction of dropdown | 'ltr' \| 'rtl' | 'ltr' | From ec0c6c748a24aa500ede15f1d2aacd0dacf4f63b Mon Sep 17 00:00:00 2001 From: Amumu Date: Tue, 7 Nov 2023 11:45:00 +0800 Subject: [PATCH 57/58] fix: less compile (#992) --- README.md | 1 + package.json | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index fa4013411..7a9c56f9d 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,7 @@ React Select ```jsx | pure import Select, { Option } from 'rc-select'; +import 'rc-select/assets/index.css'; export default () => (