diff --git a/packages/vkui/src/components/ActionSheet/ActionSheet.tsx b/packages/vkui/src/components/ActionSheet/ActionSheet.tsx
index 48b494eb7a..d4fd01a7f8 100644
--- a/packages/vkui/src/components/ActionSheet/ActionSheet.tsx
+++ b/packages/vkui/src/components/ActionSheet/ActionSheet.tsx
@@ -145,7 +145,6 @@ export const ActionSheet = ({
className={className}
style={style}
onClick={onClose}
- hasMask
fixed
>
{actionSheet}
diff --git a/packages/vkui/src/components/Avatar/Avatar.e2e-playground.tsx b/packages/vkui/src/components/Avatar/Avatar.e2e-playground.tsx
index 53f08e5ebe..4412878748 100644
--- a/packages/vkui/src/components/Avatar/Avatar.e2e-playground.tsx
+++ b/packages/vkui/src/components/Avatar/Avatar.e2e-playground.tsx
@@ -35,7 +35,7 @@ export const AvatarPlayground = (props: ComponentPlaygroundProps) => {
fallbackIcon: [],
},
{
- withBorder: [undefined, false],
+ noBorder: [undefined, true],
},
{
gradientColor: [1, 2, 3, 5, 6, 'blue'],
diff --git a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-android-chromium-dark-1-snap.png
index 4d1f2dcedc..4f1462dedf 100644
--- a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:e209263bdf2475ad5ce368d1abc98c697aa3c606b5e6c0aa0b252079d1e4922e
-size 173097
+oid sha256:bf144bc120bf3b29428dc98dce541409d8e4e03459ef72c7b376b6a8df88ce98
+size 171136
diff --git a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-android-chromium-light-1-snap.png b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-android-chromium-light-1-snap.png
index 96b87c5eef..ea3fa2fd1b 100644
--- a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:9bc5c238d60eab2547b57a9339d02368552bc4e6d25fef39abeab587f250161c
-size 168899
+oid sha256:4351a6ba60997a9fffa611da9292dcda20da2515aca74d582e8b7cebb122681b
+size 166775
diff --git a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-ios-webkit-dark-1-snap.png
index b89232f52f..3f93b2ad34 100644
--- a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:c873c6bc6fbfec2d73eb1b0e62c04c9440956c171539127fedc0d07943d4efbb
-size 152903
+oid sha256:dd1e7adff04ef457431fe07cec75ef8395b8384eaaf57f917bdb9e39eb3d85d1
+size 151495
diff --git a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-ios-webkit-light-1-snap.png
index ea8267269b..eb499f399c 100644
--- a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:82a90f4a48eab788abf780d69f9806e9a2e858088c7469ca67f319606fcb09cd
-size 150541
+oid sha256:3b0b1b5639c8290228a5e4d8eddc36e6219ea4191f5a66b98f6fc01837b54e5e
+size 149128
diff --git a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-chromium-dark-1-snap.png
index e817f5276d..86056f0620 100644
--- a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:181654918c6dfcc30b0e551f4cec2a2359bf44a105a8989c415927040ca30565
-size 177597
+oid sha256:71765028463344f051884497af016a3794fdc7629b3bf90824bb04e5562e3466
+size 175560
diff --git a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-chromium-light-1-snap.png
index 8609b78061..f77c52a73f 100644
--- a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:fa9ae4805e8fc3376daf0a8a2e87748a8367a15d7391e8ba45090c13292adf8b
-size 176303
+oid sha256:048fdd555cf6c2ad540da3730a452bc1aa7bb218399d87d83d4ea644a2df75e1
+size 174055
diff --git a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-firefox-dark-1-snap.png
index a6c070c84f..58b17b076b 100644
--- a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-firefox-dark-1-snap.png
+++ b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-firefox-dark-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:3460c53228f1c1f7c59a14dcf2288da4d03ed54ac6ad8019751d3c99dfcc4ea1
-size 202439
+oid sha256:69e6710fbe8f0422913f237937d7595d746b07ecf350cb42c3dc2b97645493d0
+size 201559
diff --git a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-firefox-light-1-snap.png
index 8b5958897a..031fec5a2c 100644
--- a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-firefox-light-1-snap.png
+++ b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-firefox-light-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:8347b4f944f5c24bb5365c807a3f4556e4e7c7f7b17d2d2b3d05f1aa25dd13f5
-size 205718
+oid sha256:4ccb4139929ec389ee8523deb2c4bbf358a16aa8c9c5d19d30a7eaf2cf218d25
+size 204909
diff --git a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-webkit-dark-1-snap.png
index 58c9f9e5f5..f5c0fc29f8 100644
--- a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:d72cdd51dffd2452cabea7f76ab569c9ddaa80ac18762195e04eaffad558c15f
-size 156671
+oid sha256:086d74bf4ebbee80ad94934546f31d679e61c88466a55f849f12866fdbb88806
+size 155199
diff --git a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-webkit-light-1-snap.png
index 1c5c12c950..249d0a8720 100644
--- a/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Avatar/__image_snapshots__/avatar-vkcom-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:7e36e147df5c7a65959c7111b1d8b196f81814e7e8716c5660440f94820bd1e2
-size 156533
+oid sha256:a05f706f6fce2a917bbacabc473d5584528f3154d641a43c3fd96a0e40f16fc7
+size 155105
diff --git a/packages/vkui/src/components/BaseGallery/BaseGallery.tsx b/packages/vkui/src/components/BaseGallery/BaseGallery.tsx
index 61a8293cba..ff3fe0b728 100644
--- a/packages/vkui/src/components/BaseGallery/BaseGallery.tsx
+++ b/packages/vkui/src/components/BaseGallery/BaseGallery.tsx
@@ -42,7 +42,7 @@ export const BaseGallery = ({
children,
slideWidth = '100%',
slideIndex = 0,
- isDraggable: isDraggableProp = true,
+ dragDisabled = false,
onDragStart,
onDragEnd,
onChange,
@@ -236,14 +236,18 @@ export const BaseGallery = ({
return targetIndex;
};
+ const isDraggable = !dragDisabled && !layoutState.current.isFullyVisible;
+
const onStart = (e: TouchEvent) => {
e.originalEvent.stopPropagation();
- onDragStart?.(e);
- setShiftState((prevState) => ({ ...prevState, animation: false }));
+ if (isDraggable) {
+ onDragStart?.(e);
+ setShiftState((prevState) => ({ ...prevState, animation: false }));
+ }
};
const onMoveX = (e: TouchEvent) => {
- if (isDraggableProp && !layoutState.current.isFullyVisible) {
+ if (isDraggable) {
e.originalEvent.preventDefault();
if (e.isSlideX) {
@@ -259,24 +263,26 @@ export const BaseGallery = ({
};
const onEnd = (e: TouchEvent) => {
- const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;
- onDragEnd?.(e, targetIndex);
+ if (isDraggable) {
+ const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;
+ onDragEnd?.(e, targetIndex);
- const nextShiftState: Partial = {
- animation: true,
- dragging: false,
- deltaX: 0,
- };
+ const nextShiftState: Partial = {
+ animation: true,
+ dragging: false,
+ deltaX: 0,
+ };
- const shiftXStick = calculateDragIndent();
- if (targetIndex !== slideIndex) {
- // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)
- nextShiftState.shiftX = shiftXStick;
- }
+ const shiftXStick = calculateDragIndent();
+ if (targetIndex !== slideIndex) {
+ // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)
+ nextShiftState.shiftX = shiftXStick;
+ }
- setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));
- if (targetIndex !== slideIndex) {
- onChange?.(targetIndex);
+ setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));
+ if (targetIndex !== slideIndex) {
+ onChange?.(targetIndex);
+ }
}
};
@@ -309,8 +315,6 @@ export const BaseGallery = ({
// otherwise we need to check current slide index (align = right or align = center)
(align !== 'left' && slideIndex < layoutState.current.slides.length - 1));
- const isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;
-
return (
{
e.originalEvent.stopPropagation();
- onDragStart?.(e);
- shiftXCurrentRef.current = slidesManager.current.snaps[slideIndex];
- shiftXDeltaRef.current = 0;
+ if (controlElementsState.isDraggable) {
+ onDragStart?.(e);
+ shiftXCurrentRef.current = slidesManager.current.snaps[slideIndex];
+ shiftXDeltaRef.current = 0;
+ }
};
const onMoveX = (e: TouchEvent) => {
- if (isDraggableProp && !slidesManager.current.isFullyVisible) {
+ if (controlElementsState.isDraggable) {
e.originalEvent.preventDefault();
if (e.isSlideX) {
@@ -285,23 +287,25 @@ export const CarouselBase = ({
};
const onEnd = (e: TouchEvent) => {
- let targetIndex = slideIndex;
- if (e.isSlide) {
- targetIndex = getTargetIndex(
- slidesManager.current.slides,
- slideIndex,
- shiftXCurrentRef.current,
- shiftXDeltaRef.current,
- );
- }
- onDragEnd?.(e, targetIndex);
-
- if (targetIndex !== slideIndex) {
- shiftXCurrentRef.current = shiftXCurrentRef.current + shiftXDeltaRef.current;
- onChange?.(targetIndex);
- } else {
- const initialShiftX = slidesManager.current.snaps[targetIndex];
- requestTransform(initialShiftX, true);
+ if (controlElementsState.isDraggable) {
+ let targetIndex = slideIndex;
+ if (e.isSlide) {
+ targetIndex = getTargetIndex(
+ slidesManager.current.slides,
+ slideIndex,
+ shiftXCurrentRef.current,
+ shiftXDeltaRef.current,
+ );
+ }
+ onDragEnd?.(e, targetIndex);
+
+ if (targetIndex !== slideIndex) {
+ shiftXCurrentRef.current = shiftXCurrentRef.current + shiftXDeltaRef.current;
+ onChange?.(targetIndex);
+ } else {
+ const initialShiftX = slidesManager.current.snaps[targetIndex];
+ requestTransform(initialShiftX, true);
+ }
}
};
diff --git a/packages/vkui/src/components/BaseGallery/types.ts b/packages/vkui/src/components/BaseGallery/types.ts
index 332ceae926..26368b99ac 100644
--- a/packages/vkui/src/components/BaseGallery/types.ts
+++ b/packages/vkui/src/components/BaseGallery/types.ts
@@ -43,7 +43,10 @@ export interface BaseGalleryProps
*/
onNextClick?(event: React.MouseEvent): void;
bullets?: 'dark' | 'light' | false;
- isDraggable?: boolean;
+ /**
+ * Позволяет отключить реагирование на тач-события
+ */
+ dragDisabled?: boolean;
showArrows?: boolean;
hasPointer?: boolean;
arrowSize?: ScrollArrowProps['size'];
diff --git a/packages/vkui/src/components/CalendarHeader/CalendarHeader.test.tsx b/packages/vkui/src/components/CalendarHeader/CalendarHeader.test.tsx
index c1957dda52..48c3222b73 100644
--- a/packages/vkui/src/components/CalendarHeader/CalendarHeader.test.tsx
+++ b/packages/vkui/src/components/CalendarHeader/CalendarHeader.test.tsx
@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
import { noop } from '@vkontakte/vkjs';
import { baselineComponent } from '../../testing/utils';
import { CalendarHeader } from './CalendarHeader';
+import styles from './CalendarHeader.module.css';
describe('CalendarHeader', () => {
baselineComponent((props) => (
@@ -15,22 +16,36 @@ describe('CalendarHeader', () => {
/>
));
- it('displays prev month button', () => {
+ it('displays prev month button by default', () => {
const viewDate = new Date('1970-01-01');
const onChange = jest.fn();
- const { container } = render(
- ,
- );
+ const { container } = render();
+
+ expect(
+ container.getElementsByClassName(styles['CalendarHeader__nav-icon-prev'])[0],
+ ).toBeTruthy();
+ });
+ it('displays next month button by default', () => {
+ const viewDate = new Date('1970-01-01');
+ const onChange = jest.fn();
+ const { container } = render();
- expect(container.getElementsByClassName('vkuiCalendarHeader__nav-icon-prev')[0]).toBeTruthy();
+ expect(
+ container.getElementsByClassName(styles['CalendarHeader__nav-icon-next'])[0],
+ ).toBeTruthy();
});
- it('displays next month button', () => {
+ it('do not display prev month and next month buttons if they hidden', () => {
const viewDate = new Date('1970-01-01');
const onChange = jest.fn();
const { container } = render(
- ,
+ ,
);
- expect(container.getElementsByClassName('vkuiCalendarHeader__nav-icon-next')[0]).toBeTruthy();
+ expect(
+ container.getElementsByClassName(styles['CalendarHeader__nav-icon-prev'])[0],
+ ).not.toBeTruthy();
+ expect(
+ container.getElementsByClassName(styles['CalendarHeader__nav-icon-next'])[0],
+ ).not.toBeTruthy();
});
});
diff --git a/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx b/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx
index 61cdc053c1..af099a2410 100644
--- a/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx
+++ b/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx
@@ -22,8 +22,14 @@ type ArrowMonthProps = Omit, 'onClick' | 'a
export interface CalendarHeaderProps
extends Omit, 'onChange'> {
viewDate: Date;
- prevMonth?: boolean;
- nextMonth?: boolean;
+ /**
+ * Скрывает иконку для переключения на предыдущий месяц
+ */
+ prevMonthHidden?: boolean;
+ /**
+ * Скрывает иконку для переключения на следующий месяц
+ */
+ nextMonthHidden?: boolean;
disablePickers?: boolean;
prevMonthLabel?: string;
nextMonthLabel?: string;
@@ -47,8 +53,8 @@ export interface CalendarHeaderProps
export const CalendarHeader = ({
viewDate,
onChange,
- prevMonth = true,
- nextMonth = true,
+ prevMonthHidden = false,
+ nextMonthHidden = false,
disablePickers = false,
onNextMonth,
onPrevMonth,
@@ -109,7 +115,7 @@ export const CalendarHeader = ({
return (
- {prevMonth && (
+ {!prevMonthHidden && (
}
onChange={onMonthsChange}
forceDropdownPortal={false}
@@ -176,7 +182,7 @@ export const CalendarHeader = ({
value={viewDate.getFullYear()}
options={years}
dropdownOffsetDistance={4}
- fixDropdownWidth={false}
+ dropdownAutoWidth
icon={}
onChange={onYearChange}
forceDropdownPortal={false}
@@ -186,7 +192,7 @@ export const CalendarHeader = ({
)}
- {nextMonth && (
+ {!nextMonthHidden && (
{
showArrows: [true, false, 'always'],
},
{
- withSpaces: [true, false],
+ noSpaces: [false, true],
},
]}
>
diff --git a/packages/vkui/src/components/CardScroll/CardScroll.tsx b/packages/vkui/src/components/CardScroll/CardScroll.tsx
index 30ebb54c74..fbafa1c8af 100644
--- a/packages/vkui/src/components/CardScroll/CardScroll.tsx
+++ b/packages/vkui/src/components/CardScroll/CardScroll.tsx
@@ -18,7 +18,7 @@ export interface CardScrollProps extends HTMLAttributesWithRootRef {
const refContainer = React.useRef(null);
@@ -95,7 +95,7 @@ export const CardScroll = ({
styles['CardScroll'],
'vkuiInternalCardScroll',
size !== false && stylesSize[size],
- withSpaces && styles['CardScroll--withSpaces'],
+ !noSpaces && styles['CardScroll--withSpaces'],
)}
>
*/
closeAfterSelect?: boolean;
/**
- * Изменение ширины по умолчанию.
+ * Ширина раскрывающегося списка зависит от контента
*/
- fixDropdownWidth?: boolean;
+ dropdownAutoWidth?: boolean;
/**
* Принудительно использовать портал.
*/
@@ -113,7 +113,7 @@ export const ChipsSelect =