From 0bb7c661212630c993574d7f82392e7e9c3c1dad Mon Sep 17 00:00:00 2001 From: Denis Vershkov Date: Thu, 8 Feb 2024 15:50:50 +0300 Subject: [PATCH 1/3] fix(Select): do not call onFilterChange on mount (#1321) --- package-lock.json | 28 +++++++++++++++ package.json | 1 + src/components/Select/Select.tsx | 34 ++++++++++++------- .../Select/__tests__/Select.filter.test.tsx | 2 +- 4 files changed, 52 insertions(+), 13 deletions(-) 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 () => { From c9cdbd0bba86573d35ec03b1766af4e0c8f5253b Mon Sep 17 00:00:00 2001 From: Daniil Demchenko Date: Thu, 8 Feb 2024 16:58:44 +0100 Subject: [PATCH 2/3] fix(TextInput): unequal text alignment in textinput (#1306) --- .../controls/TextInput/TextInput.scss | 29 ++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss index 2b45943cc6..a3dd904de3 100644 --- a/src/components/controls/TextInput/TextInput.scss +++ b/src/components/controls/TextInput/TextInput.scss @@ -62,6 +62,27 @@ @include mixins.text-accent; } +// We use this mixin to correct the positioning of the text inside the input +// See https://github.com/gravity-ui/uikit/issues/975 + +@mixin input-control($size) { + @include control-mixins.input-control($size); + @if $size == 's' { + line-height: #{variables.$s-height - control-variables.$border-width * 2}; + } + + @if $size == 'm' { + line-height: #{variables.$m-height - control-variables.$border-width * 2}; + } + + @if $size == 'l' { + line-height: #{variables.$l-height - control-variables.$border-width * 2}; + } + + @if $size == 'xl' { + line-height: #{variables.$xl-height - control-variables.$border-width * 2}; + } +} $block: '.#{variables.$ns}text-input'; @@ -171,7 +192,7 @@ $block: '.#{variables.$ns}text-input'; &_size { &_s { #{$block}__control { - @include control-mixins.input-control(s); + @include input-control(s); } #{$block}__label { @@ -202,7 +223,7 @@ $block: '.#{variables.$ns}text-input'; &_m { #{$block}__control { - @include control-mixins.input-control(m); + @include input-control(m); } #{$block}__label { @@ -233,7 +254,7 @@ $block: '.#{variables.$ns}text-input'; &_l { #{$block}__control { - @include control-mixins.input-control(l); + @include input-control(l); } #{$block}__label { @@ -264,7 +285,7 @@ $block: '.#{variables.$ns}text-input'; &_xl { #{$block}__control { - @include control-mixins.input-control(xl); + @include input-control(xl); } #{$block}__label { From 73fe484cfdd6b0eff624e318cae5a4d2b8a1579d Mon Sep 17 00:00:00 2001 From: Denis Vershkov Date: Thu, 8 Feb 2024 19:29:05 +0300 Subject: [PATCH 3/3] chore: remove unnecessary deps (#1324) --- package-lock.json | 28 ---------------------------- package.json | 1 - 2 files changed, 29 deletions(-) diff --git a/package-lock.json b/package-lock.json index db1352ff22..3e9b2819e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,6 @@ "@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", @@ -3392,33 +3391,6 @@ "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 7be57cdd5b..093e2270e3 100644 --- a/package.json +++ b/package.json @@ -118,7 +118,6 @@ "@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",