diff --git a/package-lock.json b/package-lock.json index 3e9b2819e4..db1352ff22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,7 @@ "@gravity-ui/prettier-config": "^1.1.0", "@gravity-ui/stylelint-config": "^4.0.1", "@gravity-ui/tsconfig": "^1.0.0", + "@gravity-ui/uikit": "^6.0.0", "@playwright/experimental-ct-react": "1.38.1", "@playwright/test": "1.38.1", "@storybook/addon-essentials": "^7.6.10", @@ -3391,6 +3392,33 @@ "integrity": "sha512-C7uWrCTD6g+rvSFYTPaOMMf4YUWyA5eRSXsJ1AsigGc7yQC/lhugGNqeUo5efz+zpmZ80oG/BIJPCx0nIZizDg==", "dev": true }, + "node_modules/@gravity-ui/uikit": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.0.0.tgz", + "integrity": "sha512-16xgkTI646tZoAT5pnw7Ge2Q4e9c8DWYZw0w11X8A9hyuYaNjd0isUxpD4Beywi4ELKeFv3t2IXCn/RTU7/qVw==", + "dev": true, + "dependencies": { + "@bem-react/classname": "^1.6.0", + "@gravity-ui/i18n": "^1.2.0", + "@gravity-ui/icons": "^2.8.1", + "@popperjs/core": "^2.11.8", + "blueimp-md5": "^2.19.0", + "focus-trap": "^7.5.4", + "lodash": "^4.17.21", + "react-beautiful-dnd": "^13.1.1", + "react-copy-to-clipboard": "^5.1.0", + "react-popper": "^2.3.0", + "react-transition-group": "^4.4.5", + "react-virtualized-auto-sizer": "^1.0.21", + "react-window": "^1.8.10", + "tabbable": "^6.2.0", + "tslib": "^2.6.2" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", diff --git a/package.json b/package.json index 093e2270e3..7be57cdd5b 100644 --- a/package.json +++ b/package.json @@ -118,6 +118,7 @@ "@gravity-ui/prettier-config": "^1.1.0", "@gravity-ui/stylelint-config": "^4.0.1", "@gravity-ui/tsconfig": "^1.0.0", + "@gravity-ui/uikit": "^6.0.0", "@playwright/experimental-ct-react": "1.38.1", "@playwright/test": "1.38.1", "@storybook/addon-essentials": "^7.6.10", diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index 143864e487..ec5ed97c51 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -98,6 +98,26 @@ export const Select = React.forwardRef(function const filterRef = React.useRef(null); const listRef = React.useRef>(null); const handleControlRef = useForkRef(ref, controlRef); + + const handleFilterChange = React.useCallback( + (nextFilter: string) => { + onFilterChange?.(nextFilter); + dispatch({type: 'SET_FILTER', payload: {filter: nextFilter}}); + }, + [onFilterChange], + ); + + const handleOpenChange = React.useCallback( + (open: boolean) => { + onOpenChange?.(open); + + if (!open && filterable) { + handleFilterChange(''); + } + }, + [filterable, onOpenChange, handleFilterChange], + ); + const { value, open, @@ -114,7 +134,7 @@ export const Select = React.forwardRef(function multiple, open: propsOpen, onClose, - onOpenChange, + onOpenChange: handleOpenChange, }); const uniqId = useUniqId(); const selectId = id ?? uniqId; @@ -197,14 +217,6 @@ export const Select = React.forwardRef(function listRef?.current?.onKeyDown(e); }, []); - const handleFilterChange = React.useCallback( - (nextFilter: string) => { - onFilterChange?.(nextFilter); - dispatch({type: 'SET_FILTER', payload: {filter: nextFilter}}); - }, - [onFilterChange], - ); - const handleQuickSearchChange = React.useCallback((search: string) => { if (search) { const itemIndex = findItemIndexByQuickSearch(search, getListItems(listRef)); @@ -228,10 +240,8 @@ export const Select = React.forwardRef(function if (filterable) { filterRef.current?.focus(); } - } else { - handleFilterChange(''); } - }, [open, filterable, handleFilterChange]); + }, [open, filterable]); const mods: CnMods = { ...(width === 'max' && {width}), diff --git a/src/components/Select/__tests__/Select.filter.test.tsx b/src/components/Select/__tests__/Select.filter.test.tsx index 3ea9bc6cbc..eedba44e5b 100644 --- a/src/components/Select/__tests__/Select.filter.test.tsx +++ b/src/components/Select/__tests__/Select.filter.test.tsx @@ -68,7 +68,7 @@ describe('Select filter', () => { await user.keyboard('1'); // empty expect(queryAllByRole('option').length).toBe(0); - expect(onFilterChange).toBeCalledTimes(4); + expect(onFilterChange).toBeCalledTimes(3); }); test('should render node with renderEmptyOptions', async () => {