feat: Boolean props to false values

packages/vkui/src/components/ActionSheet/ActionSheet.tsx

@@ -145,7 +145,6 @@ export const ActionSheet = ({
       className={className}
       style={style}
       onClick={onClose}
-      hasMask
       fixed
     >
       {actionSheet}

packages/vkui/src/components/Avatar/Avatar.e2e-playground.tsx

@@ -35,7 +35,7 @@ export const AvatarPlayground = (props: ComponentPlaygroundProps) => {
           fallbackIcon: [<IconExampleForFallbackBasedOnImageBaseSize key="icon-fallback" />],
         },
         {
-          withBorder: [undefined, false],
+          noBorder: [undefined, true],
         },
         {
           gradientColor: [1, 2, 3, 5, 6, 'blue'],

packages/vkui/src/components/BaseGallery/BaseGallery.tsx

@@ -42,7 +42,7 @@
   children,
   slideWidth = '100%',
   slideIndex = 0,
-  isDraggable: isDraggableProp = true,
+  dragDisabled = false,
   onDragStart,
   onDragEnd,
   onChange,
@@ -236,14 +236,18 @@
     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 @@
   };
 
   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<ShiftingState> = {
-      animation: true,
-      dragging: false,
-      deltaX: 0,
-    };
+      const nextShiftState: Partial<ShiftingState> = {
+        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 @@
       // 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 (
     <RootComponent
       {...restProps}

packages/vkui/src/components/BaseGallery/CarouselBase/CarouselBase.tsx

@@ -29,7 +29,7 @@
   children,
   slideWidth = '100%',
   slideIndex = 0,
-  isDraggable: isDraggableProp = true,
+  dragDisabled = false,
   onDragStart,
   onDragEnd,
   onChange,
@@ -159,7 +159,7 @@
     setControlElementsState({
       canSlideLeft: !slidesManager.current.isFullyVisible,
       canSlideRight: !slidesManager.current.isFullyVisible,
-      isDraggable: isDraggableProp && !slidesManager.current.isFullyVisible,
+      isDraggable: !(dragDisabled || slidesManager.current.isFullyVisible),
     });
 
     shiftXCurrentRef.current = snaps[slideIndex];
@@ -266,13 +266,15 @@
 
   const onStart = (e: TouchEvent) => {
     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 @@
   };
 
   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);
+      }
     }
   };
 

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'];

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(
-      <CalendarHeader viewDate={viewDate} onChange={onChange} prevMonth />,
-    );
+    const { container } = render(<CalendarHeader viewDate={viewDate} onChange={onChange} />);
+
+    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(<CalendarHeader viewDate={viewDate} onChange={onChange} />);
 
-    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(
-      <CalendarHeader viewDate={viewDate} onChange={onChange} nextMonth />,
+      <CalendarHeader viewDate={viewDate} onChange={onChange} prevMonthHidden nextMonthHidden />,
     );
 
-    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();
   });
 });

packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx

@@ -22,8 +22,14 @@ type ArrowMonthProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onClick' | 'a
 export interface CalendarHeaderProps
   extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, '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 (
     <RootComponent baseClassName={styles['CalendarHeader']} {...restProps}>
-      {prevMonth && (
+      {!prevMonthHidden && (
         <AdaptivityProvider sizeX="regular">
           <Tappable
             className={classNames(
@@ -161,7 +167,7 @@ export const CalendarHeader = ({
               value={viewDate.getMonth()}
               options={months}
               dropdownOffsetDistance={4}
-              fixDropdownWidth={false}
+              dropdownAutoWidth
               icon={<Icon12Dropdown />}
               onChange={onMonthsChange}
               forceDropdownPortal={false}
@@ -176,7 +182,7 @@ export const CalendarHeader = ({
               value={viewDate.getFullYear()}
               options={years}
               dropdownOffsetDistance={4}
-              fixDropdownWidth={false}
+              dropdownAutoWidth
               icon={<Icon12Dropdown />}
               onChange={onYearChange}
               forceDropdownPortal={false}
@@ -186,7 +192,7 @@ export const CalendarHeader = ({
           </div>
         </AdaptivityProvider>
       )}
-      {nextMonth && (
+      {!nextMonthHidden && (
         <AdaptivityProvider sizeX="regular">
           <Tappable
             className={classNames(

packages/vkui/src/components/CalendarRange/CalendarRange.tsx

@@ -186,7 +186,7 @@ export const CalendarRange = ({
         <CalendarHeader
           viewDate={viewDate}
           onChange={setViewDate}
-          nextMonth={false}
+          nextMonthHidden
           onPrevMonth={setPrevMonth}
           disablePickers={disablePickers}
           className={styles['CalendarRange__header']}
@@ -221,7 +221,7 @@ export const CalendarRange = ({
         <CalendarHeader
           viewDate={secondViewDate}
           onChange={setViewDate}
-          prevMonth={false}
+          prevMonthHidden
           onNextMonth={setNextMonth}
           disablePickers={disablePickers}
           className={styles['CalendarRange__header']}

packages/vkui/src/components/CardScroll/CardScroll.e2e-playground.tsx

@@ -21,7 +21,7 @@ export const CardScrollPlayground = (props: ComponentPlaygroundProps) => {
           showArrows: [true, false, 'always'],
         },
         {
-          withSpaces: [true, false],
+          noSpaces: [false, true],
         },
       ]}
     >