@vkontakte/vkui 6.5.3 → 6.7.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.5.3",
+  "version": "6.7.0",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "main": "dist/cjs/index.js",
@@ -13,6 +13,7 @@
     "!./src/**/*.*.ts",
     "!./src/**/*.*.tsx",
     "!./src/vkui.js",
+    "!./src/styles/missedThemeTokens.css",
     "!./src/testing/",
     "!./src/storybook/"
   ],
@@ -66,14 +67,16 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@swc/helpers": "^0.5.12",
+    "@swc/helpers": "^0.5.13",
     "@vkontakte/icons": "^2.115.0",
     "@vkontakte/vkjs": "^1.3.0",
     "@vkontakte/vkui-floating-ui": "^0.2.1",
     "date-fns": "^3.6.0"
   },
   "devDependencies": {
-    "storybook": "8.2.7"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "8.2.9"
   },
   "size-limit": [
     {

package/src/components/Accordion/Accordion.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useObjectMemo } from '../../hooks/useObjectMemo';
-import { HasChildren } from '../../types';
+import type { HasChildren } from '../../types';
 import { AccordionContent } from './AccordionContent';
 import { AccordionContext } from './AccordionContext';
 import { AccordionSummary } from './AccordionSummary';

package/src/components/Accordion/AccordionContent.tsx

@@ -3,7 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useCSSKeyframesAnimationController } from '../../lib/animation';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { HasRef, HasRootRef } from '../../types';
+import type { HasRef, HasRootRef } from '../../types';
 import { AccordionContext } from './AccordionContext';
 import styles from './Accordion.module.css';
 

package/src/components/Accordion/AccordionSummary.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Icon24ChevronDown, Icon24ChevronUp } from '@vkontakte/icons';
 import { callMultiple } from '../../lib/callMultiple';
-import { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';
+import { SimpleCell, type SimpleCellProps } from '../SimpleCell/SimpleCell';
 import { AccordionContext } from './AccordionContext';
 import styles from './Accordion.module.css';
 

package/src/components/ActionSheet/ActionSheet.tsx

@@ -7,11 +7,11 @@ import { useCSSKeyframesAnimationController } from '../../lib/animation';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
 import { Footnote } from '../Typography/Footnote/Footnote';
-import { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';
+import { ActionSheetContext, type ItemClickHandler } from './ActionSheetContext';
 import { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';
 import { ActionSheetDropdownMenu } from './ActionSheetDropdownMenu';
 import { ActionSheetDropdownSheet } from './ActionSheetDropdownSheet';
-import { SharedDropdownProps } from './types';
+import type { SharedDropdownProps } from './types';
 import styles from './ActionSheet.module.css';
 
 type CloseInitiators = 'action-item' | 'cancel-item' | 'other';
@@ -20,8 +20,11 @@ export interface ActionSheetOnCloseOptions {
 }
 
 export interface ActionSheetProps
-  extends Pick<SharedDropdownProps, 'toggleRef' | 'popupOffsetDistance' | 'placement'>,
-    React.HTMLAttributes<HTMLDivElement> {
+  extends Pick<
+      SharedDropdownProps,
+      'toggleRef' | 'popupOffsetDistance' | 'placement' | 'autoFocus'
+    >,
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus'> {
   header?: React.ReactNode;
   text?: React.ReactNode;
   /**

package/src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx

@@ -1,4 +1,4 @@
-import { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';
+import { ActionSheetItem, type ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';
 
 export const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps): React.ReactNode => {
   return (

package/src/components/ActionSheet/ActionSheetDropdownMenu.tsx

@@ -9,7 +9,7 @@ import { isRefObject } from '../../lib/isRefObject';
 import { warnOnce } from '../../lib/warnOnce';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { Popper } from '../Popper/Popper';
-import { SharedDropdownProps } from './types';
+import type { SharedDropdownProps } from './types';
 import styles from './ActionSheet.module.css';
 
 const warn = warnOnce('ActionSheet');

package/src/components/ActionSheet/ActionSheetDropdownSheet.tsx

@@ -3,7 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
-import { SharedDropdownProps } from './types';
+import type { SharedDropdownProps } from './types';
 import styles from './ActionSheet.module.css';
 
 const stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();

package/src/components/ActionSheet/types.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { PlacementWithAuto } from '../../lib/floating/types/common';
-import { FocusTrapProps } from '../FocusTrap/FocusTrap';
+import { type FocusTrapProps } from '../FocusTrap/FocusTrap';
 
 export type ToggleRef = Element | null | undefined | React.RefObject<Element>;
 

package/src/components/ActionSheetItem/subcomponents/Radio/Radio.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Icon20CheckCircleOn, Icon24CheckCircleOn } from '@vkontakte/icons';
-import { HasRef, HasRootRef } from '../../../../types';
+import type { HasRef, HasRootRef } from '../../../../types';
 import { AdaptiveIconRenderer } from '../../../AdaptiveIconRenderer/AdaptiveIconRenderer';
 import { RootComponent } from '../../../RootComponent/RootComponent';
 import { VisuallyHidden } from '../../../VisuallyHidden/VisuallyHidden';

package/src/components/AdaptivityProvider/AdaptivityContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SizeTypeValues, ViewHeightType, ViewWidthType } from '../../lib/adaptivity';
+import type { SizeTypeValues, ViewHeightType, ViewWidthType } from '../../lib/adaptivity';
 
 export interface SizeProps {
   sizeX?: SizeTypeValues;

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getSizeX, isCompactByViewHeight, isCompactByViewWidth } from '../../lib/adaptivity';
-import { HasChildren } from '../../types';
+import type { HasChildren } from '../../types';
 import { AdaptivityContext, type AdaptivityProps } from './AdaptivityContext';
 
 export interface AdaptivityProviderProps extends AdaptivityProps, HasChildren {}

package/src/components/Alert/Alert.tsx

@@ -5,14 +5,19 @@ import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJS
 import { usePlatform } from '../../hooks/usePlatform';
 import { useCSSKeyframesAnimationController } from '../../lib/animation';
 import { stopPropagation } from '../../lib/utils';
-import { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute, HasRootRef } from '../../types';
+import type {
+  AlignType,
+  AnchorHTMLAttributesOnly,
+  HasDataAttribute,
+  HasRootRef,
+} from '../../types';
 import { useScrollLock } from '../AppRoot/ScrollContext';
-import { ButtonProps } from '../Button/Button';
+import type { ButtonProps } from '../Button/Button';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { IconButton } from '../IconButton/IconButton';
 import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
-import { AlertActionProps } from './AlertAction';
+import type { AlertActionProps } from './AlertAction';
 import { AlertActions } from './AlertActions';
 import { AlertHeader, AlertText } from './AlertTypography';
 import styles from './Alert.module.css';
@@ -95,9 +100,9 @@ export const Alert = ({
     closing ? 'exit' : 'enter',
     {
       onExited() {
-        onClose();
         itemActionCallbackRef.current();
         itemActionCallbackRef.current = noop;
+        onClose();
       },
     },
   );

package/src/components/Alert/AlertAction.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
-import { AnchorHTMLAttributesOnly } from '../../types';
-import { Button, ButtonProps } from '../Button/Button';
+import type { AnchorHTMLAttributesOnly } from '../../types';
+import { Button, type ButtonProps } from '../Button/Button';
 import { Tappable } from '../Tappable/Tappable';
-import { AlertActionInterface } from './Alert';
+import type { AlertActionInterface } from './Alert';
 import styles from './Alert.module.css';
 
 export interface AlertActionProps

package/src/components/Alert/AlertActions.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
-import { AlertActionInterface, AlertProps } from './Alert';
+import type { AlertActionInterface, AlertProps } from './Alert';
 import { AlertAction } from './AlertAction';
 import styles from './Alert.module.css';
 

package/src/components/Alert/AlertTypography.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { usePlatform } from '../../hooks/usePlatform';
-import { HasChildren } from '../../types';
+import type { HasChildren } from '../../types';
 import { Caption } from '../Typography/Caption/Caption';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Text } from '../Typography/Text/Text';

package/src/components/AppRoot/AppRootPortal.tsx

@@ -3,7 +3,7 @@ import { useAppearance } from '../../hooks/useAppearance';
 import { useIsClient } from '../../hooks/useIsClient';
 import { createPortal } from '../../lib/createPortal';
 import { isRefObject } from '../../lib/isRefObject';
-import { HasChildren } from '../../types';
+import type { HasChildren } from '../../types';
 import { AppearanceProvider } from '../AppearanceProvider/AppearanceProvider';
 import { AppRootContext, type AppRootContextInterface } from './AppRootContext';
 

package/src/components/AppRoot/ScrollContext.tsx

@@ -3,7 +3,7 @@ import { noop } from '@vkontakte/vkjs';
 import { clamp } from '../../helpers/math';
 import { useDOM } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { HasChildren } from '../../types';
+import type { HasChildren } from '../../types';
 
 const clearDisableScrollStyle = (node: HTMLElement) => {
   Object.assign(node.style, {
@@ -204,47 +204,6 @@ export const ElementScrollController = ({
   return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;
 };
 
-/**
- * Вызывает функцию effect, до блокировки прокрутки
- * @param effect функция, которая может возвращать функцию очистки
- * @param deps effect обновится только при изменении значений в списке.
- */
-export const useScrollLockEffect = (
-  effect: React.EffectCallback,
-  deps: React.DependencyList,
-): void => {
-  const destructorRef = React.useRef<ReturnType<React.EffectCallback>>(noop);
-  const { isScrollLock, beforeScrollLockFnSetRef } = useScroll();
-
-  // Изменяем effectCallback только при изменении deps
-  const effectCallback = React.useCallback(() => {
-    destructorRef.current = effect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
-
-  // Добавляем effectCallback в список функций, которые необходимо вызвать
-  // до блокировки
-  React.useEffect(() => {
-    const beforeSet = beforeScrollLockFnSetRef?.current;
-    if (!beforeSet) {
-      return noop;
-    }
-
-    beforeSet.add(effectCallback);
-
-    return () => {
-      beforeSet.delete(effectCallback);
-    };
-  }, [beforeScrollLockFnSetRef, effectCallback]);
-
-  // Вызываем сбрасывающую функцию, после отключения блокировки
-  React.useEffect(() => {
-    if (!isScrollLock && destructorRef.current) {
-      destructorRef.current();
-    }
-  }, [isScrollLock]);
-};
-
 export const useScrollLock = (enabled = true): void => {
   const { enableScrollLock, disableScrollLock, isScrollLock } = useScroll();
   useIsomorphicLayoutEffect(() => {

package/src/components/AspectRatio/AspectRatio.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { CSSCustomProperties } from '../../types';
-import { RootComponent, RootComponentProps } from '../RootComponent/RootComponent';
+import type { CSSCustomProperties } from '../../types';
+import { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';
 import styles from './AspectRatio.module.css';
 
 export interface AspectRatioProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {
@@ -30,7 +30,7 @@ export function AspectRatio({
   ...props
 }: AspectRatioProps): JSX.Element {
   const style: React.CSSProperties & CSSCustomProperties = {
-    ['--vkui_internal--aspect_ratio']: String(ratio),
+    '--vkui_internal--aspect_ratio': String(ratio),
   };
 
   return (

package/src/components/Badge/Badge.tsx

@@ -1,5 +1,5 @@
 import { classNames } from '@vkontakte/vkjs';
-import { RootComponent, RootComponentProps } from '../RootComponent/RootComponent';
+import { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Badge.module.css';
 
@@ -20,7 +20,7 @@ export interface BadgeProps extends RootComponentProps<HTMLSpanElement> {
 export const Badge = ({ mode = 'new', children, ...restProps }: BadgeProps): React.ReactNode => (
   <RootComponent
     Component="span"
-    baseClassName={classNames(styles['Badge'], stylesMode[mode])}
+    baseClassName={classNames(styles['Badge'], 'vkuiInternalBadge', stylesMode[mode])}
     {...restProps}
   >
     {children && <VisuallyHidden>{children}</VisuallyHidden>}

package/src/components/Banner/Banner.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';
 import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 import { IconButton } from '../IconButton/IconButton';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Tappable } from '../Tappable/Tappable';

package/src/components/BaseGallery/BaseGallery.tsx

@@ -7,9 +7,9 @@ import { useDOM } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { ScrollArrow } from '../ScrollArrow/ScrollArrow';
-import { Touch, TouchEvent } from '../Touch/Touch';
+import { type CustomTouchEvent, Touch } from '../Touch/Touch';
 import { calcMax, calcMin } from './helpers';
-import { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';
+import type { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';
 import styles from './BaseGallery.module.css';
 
 const ANIMATION_DURATION = 0.24;
@@ -101,7 +101,6 @@ export const BaseGallery = ({
 
       return validateIndent(-1 * coordX);
     }
-
     return 0;
   };
 
@@ -206,7 +205,7 @@ export const BaseGallery = ({
   /*
    * Получает индекс слайда, к которому будет осуществлен переход
    */
-  const getTarget = (e: TouchEvent) => {
+  const getTarget = (e: CustomTouchEvent) => {
     const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;
     const shift =
       shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);
@@ -238,7 +237,7 @@ export const BaseGallery = ({
 
   const isDraggable = !dragDisabled && !layoutState.current.isFullyVisible;
 
-  const onStart = (e: TouchEvent) => {
+  const onStart = (e: CustomTouchEvent) => {
     e.originalEvent.stopPropagation();
     if (isDraggable) {
       onDragStart?.(e);
@@ -246,7 +245,7 @@ export const BaseGallery = ({
     }
   };
 
-  const onMoveX = (e: TouchEvent) => {
+  const onMoveX = (e: CustomTouchEvent) => {
     if (isDraggable) {
       e.originalEvent.preventDefault();
 
@@ -262,7 +261,7 @@ export const BaseGallery = ({
     }
   };
 
-  const onEnd = (e: TouchEvent) => {
+  const onEnd = (e: CustomTouchEvent) => {
     if (isDraggable) {
       const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;
       onDragEnd?.(e, targetIndex);

package/src/components/BaseGallery/CarouselBase/CarouselBase.tsx

@@ -3,17 +3,18 @@ import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';
 import { useExternRef } from '../../../hooks/useExternRef';
 import { useGlobalEventListener } from '../../../hooks/useGlobalEventListener';
+import { useMutationObserver } from '../../../hooks/useMutationObserver';
 import { useDOM } from '../../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../../lib/warnOnce';
 import { RootComponent } from '../../RootComponent/RootComponent';
 import { ScrollArrow } from '../../ScrollArrow/ScrollArrow';
-import { Touch, TouchEvent } from '../../Touch/Touch';
-import { BaseGalleryProps, GallerySlidesState } from '../types';
+import { type CustomTouchEvent, Touch } from '../../Touch/Touch';
+import { type BaseGalleryProps, type GallerySlidesState } from '../types';
 import { ANIMATION_DURATION, CONTROL_ELEMENTS_STATE, SLIDES_MANAGER_STATE } from './constants';
 import { calculateIndent, getLoopPoints, getTargetIndex } from './helpers';
 import { useSlideAnimation } from './hooks';
-import { ControlElementsState, SlidesManagerState } from './types';
+import type { ControlElementsState, SlidesManagerState } from './types';
 import styles from '../BaseGallery.module.css';
 
 const stylesBullets = {
@@ -248,9 +249,9 @@ export const CarouselBase = ({
     [slideIndex],
   );
 
-  useIsomorphicLayoutEffect(() => {
-    initializeSlides();
-  }, [children, align, slideWidth]);
+  useMutationObserver(layerRef, initializeSlides);
+
+  useIsomorphicLayoutEffect(initializeSlides, [align, slideWidth]);
 
   const slideLeft = (event: React.MouseEvent) => {
     onChange?.(
@@ -264,7 +265,7 @@ export const CarouselBase = ({
     onNextClick?.(event);
   };
 
-  const onStart = (e: TouchEvent) => {
+  const onStart = (e: CustomTouchEvent) => {
     e.originalEvent.stopPropagation();
     if (controlElementsState.isDraggable) {
       onDragStart?.(e);
@@ -273,7 +274,7 @@ export const CarouselBase = ({
     }
   };
 
-  const onMoveX = (e: TouchEvent) => {
+  const onMoveX = (e: CustomTouchEvent) => {
     if (controlElementsState.isDraggable) {
       e.originalEvent.preventDefault();
 
@@ -286,7 +287,7 @@ export const CarouselBase = ({
     }
   };
 
-  const onEnd = (e: TouchEvent) => {
+  const onEnd = (e: CustomTouchEvent) => {
     if (controlElementsState.isDraggable) {
       let targetIndex = slideIndex;
       if (e.isSlide) {

package/src/components/BaseGallery/CarouselBase/constants.ts

@@ -1,4 +1,4 @@
-import { ControlElementsState, SlidesManagerState } from './types';
+import type { ControlElementsState, SlidesManagerState } from './types';
 
 export const ANIMATION_DURATION = 240;
 

package/src/components/BaseGallery/CarouselBase/helpers.ts

@@ -1,6 +1,6 @@
-import { GallerySlidesState } from '../types';
+import type { GallerySlidesState } from '../types';
 import { SLIDE_THRESHOLD } from './constants';
-import { LoopPoint, SlidesManagerState } from './types';
+import type { LoopPoint, SlidesManagerState } from './types';
 
 /*
  * Считает отступ слоя галереи
@@ -58,7 +58,7 @@ export function getShiftedIndexes(
   return shiftedSlideIndexes;
 }
 
-export function calculateLoopPoints(
+function calculateLoopPoints(
   indexes: number[],
   edge: 'start' | 'end',
   slidesManager: SlidesManagerState,

package/src/components/BaseGallery/CarouselBase/hooks.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { animate, DrawInterface } from '../../../lib/animate';
+import { animate, type DrawInterface } from '../../../lib/animate';
 import { cubicBezier } from '../../../lib/fx';
 import { ANIMATION_DURATION } from './constants';
 

package/src/components/BaseGallery/CarouselBase/types.ts

@@ -1,4 +1,4 @@
-import { GallerySlidesState } from '../types';
+import type { GallerySlidesState } from '../types';
 
 export interface LoopPoint {
   /**

package/src/components/BaseGallery/helpers.ts

@@ -1,9 +1,9 @@
-import { HasAlign } from '../../types';
-import { LayoutState } from './types';
+import type { AlignType } from '../../types';
+import type { LayoutState } from './types';
 
 interface CalcMin extends Partial<LayoutState> {
   isCenterWithCustomWidth: boolean;
-  align: HasAlign['align'];
+  align: AlignType;
 }
 
 export const calcMin = ({
@@ -27,7 +27,6 @@ export const calcMin = ({
         return viewportOffsetWidth - (containerWidth - viewportOffsetWidth) / 2 - layerWidth;
       }
   }
-  return undefined;
 };
 
 interface CalcMax extends Partial<LayoutState> {

package/src/components/BaseGallery/types.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { HasAlign, HasRef, HTMLAttributesWithRootRef } from '../../types';
-import { ScrollArrowProps } from '../ScrollArrow/ScrollArrow';
-import { TouchEvent, TouchEventHandler } from '../Touch/Touch';
+import type * as React from 'react';
+import type { HasAlign, HasRef, HTMLAttributesWithRootRef } from '../../types';
+import type { ScrollArrowProps } from '../ScrollArrow/ScrollArrow';
+import type { CustomTouchEvent, CustomTouchEventHandler } from '../Touch/Touch';
 
 export interface GallerySlidesState {
   coordX: number;
@@ -31,8 +31,8 @@ export interface BaseGalleryProps
     HasRef<HTMLElement> {
   slideWidth?: string | number;
   slideIndex?: number;
-  onDragStart?: TouchEventHandler;
-  onDragEnd?: (e: TouchEvent, targetIndex: number) => void;
+  onDragStart?: CustomTouchEventHandler;
+  onDragEnd?: (e: CustomTouchEvent, targetIndex: number) => void;
   onChange?: (current: number) => void;
   /**
    * Будет вызвано при клике на кнопку-стрелку влево

package/src/components/Button/Button.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { usePlatform } from '../../hooks/usePlatform';
-import { HasAlign } from '../../types';
+import type { HasAlign } from '../../types';
 import { Spinner } from '../Spinner/Spinner';
-import { Tappable, TappableProps } from '../Tappable/Tappable';
+import { Tappable, type TappableProps } from '../Tappable/Tappable';
 import '../Spinner/Spinner.module.css';
 import styles from './Button.module.css';
 
@@ -39,7 +39,7 @@ const stylesAlign = {
 
 const sizeYClassNames = {
   none: styles['Button--sizeY-none'],
-  ['regular']: styles['Button--sizeY-regular'],
+  regular: styles['Button--sizeY-regular'],
 };
 
 export interface VKUIButtonProps extends HasAlign {

package/src/components/Calendar/Calendar.tsx

@@ -5,10 +5,10 @@ import { useCalendar } from '../../hooks/useCalendar';
 import { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
-import { HTMLAttributesWithRootRef } from '../../types';
-import { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';
-import { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';
-import { CalendarTime, CalendarTimeProps } from '../CalendarTime/CalendarTime';
+import type { HTMLAttributesWithRootRef } from '../../types';
+import { CalendarDays, type CalendarDaysProps } from '../CalendarDays/CalendarDays';
+import { CalendarHeader, type CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';
+import { CalendarTime, type CalendarTimeProps } from '../CalendarTime/CalendarTime';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Calendar.module.css';
 
@@ -28,7 +28,7 @@ export interface CalendarProps
       | 'prevMonthProps'
       | 'nextMonthProps'
     >,
-    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'> {
+    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate' | 'renderDayContent'> {
   value?: Date;
   /**
    * Запрещает выбор даты в прошлом.
@@ -109,6 +109,7 @@ export const Calendar = ({
   nextMonthProps,
   dayProps,
   listenDayChangesForUpdate,
+  renderDayContent,
   minDateTime,
   maxDateTime,
   ...props
@@ -224,6 +225,7 @@ export const Calendar = ({
         size={size}
         dayProps={dayProps}
         listenDayChangesForUpdate={listenDayChangesForUpdate}
+        renderDayContent={renderDayContent}
       />
       {enableTime && value && size !== 's' && (
         <div className={styles['Calendar__time']}>