@vkontakte/vkui 6.0.2 → 6.1.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.0.2",
+  "version": "6.1.0",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "main": "dist/cjs/index.js",
@@ -39,11 +39,11 @@
     "build:types": "yarn run -T concurrently 'yarn:tsc:*'",
     "build:no-types": "yarn run -T concurrently 'yarn:swc:*' 'yarn:postcss'",
     "clear": "yarn run -T shx rm -rf dist/*",
-    "docker:clear-playwright-cache": "docker compose rm -f && docker volume rm vkui_package_vkui_playwright_cache",
+    "docker:clear-playwright-cache": "./scripts/generate_env_docker.sh && docker compose --env-file=./.env.docker rm -f && docker volume rm vkui_package_vkui_playwright_cache",
     "postcss": "yarn run -T cross-env NODE_ENV=production concurrently 'yarn:postcss:*'",
     "postcss:bundle": "yarn run -T webpack --config webpack.styles.config.js",
     "postcss:modules": "yarn run -T postcss './src/**/*.css' --base ./src --dir ./dist/cssm --config ./cssm",
-    "swc-base": "yarn run -T cross-env NODE_ENV=production swc src/ --config-file package.swcrc --extensions .tsx,.jsx,.ts,.js",
+    "swc-base": "yarn run -T cross-env NODE_ENV=production swc src/ --config-file package.swcrc --extensions .tsx,.jsx,.ts,.js --strip-leading-paths",
     "swc:es6": "yarn swc-base -d dist -s",
     "swc:cjs": "yarn swc-base -d dist/cjs -s -C module.type=commonjs",
     "swc:cssm": "yarn swc-base -d dist/cssm -s --config-file ./cssm/cssm.swcrc",
@@ -52,8 +52,8 @@
     "tsc:cjs": "yarn run -T cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration --outDir dist/cjs/ -p tsconfig.dist.json",
     "test": "yarn run -T jest",
     "test:ci": "yarn test --ci --silent --outputFile ../../test-results.json --json --coverage --coverageReporters='json' --coverageDirectory='../../.nyc_output'",
-    "test:e2e": "docker compose up --abort-on-container-exit",
-    "test:e2e-update": "docker compose --env-file=./.env.docker up --abort-on-container-exit",
+    "test:e2e": "./scripts/generate_env_docker.sh && docker compose --env-file=./.env.docker up --abort-on-container-exit",
+    "test:e2e-update": "./scripts/generate_env_docker.sh -u && docker compose --env-file=./.env.docker up --abort-on-container-exit",
     "test:e2e:ci": "yarn run -T playwright test --config playwright-ct.config.ts",
     "test:e2e-update:ci": "yarn run test:e2e:ci --update-snapshots",
     "lint:generated-files": "yarn run generate:css-custom-medias && git diff --exit-code src/styles/customMedias.generated.css",
@@ -66,15 +66,15 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@swc/helpers": "^0.5.3",
-    "@vkontakte/icons": "^2.62.0",
-    "@vkontakte/vkjs": "^1.1.1",
-    "@vkontakte/vkui-floating-ui": "^0.1.2",
-    "dayjs": "^1.11.10",
+    "@swc/helpers": "^0.5.11",
+    "@vkontakte/icons": "^2.115.0",
+    "@vkontakte/vkjs": "^1.1.2",
+    "@vkontakte/vkui-floating-ui": "^0.2.1",
+    "dayjs": "^1.11.11",
     "mitt": "^3.0.1"
   },
   "devDependencies": {
-    "storybook": "7.6.8"
+    "storybook": "8.1.3"
   },
   "size-limit": [
     {
@@ -121,4 +121,4 @@
   "publishConfig": {
     "provenance": true
   }
-}
+}

package/src/components/Accordion/Accordion.tsx

@@ -27,7 +27,7 @@ export interface AccordionProps extends HasChildren {
   /**
    * Функция изменения
    */
-  onChange?(e: boolean): void;
+  onChange?: (e: boolean) => void;
   disabled?: boolean;
 }
 
@@ -58,5 +58,10 @@ export const Accordion = ({
   return <AccordionContext.Provider value={context}>{children}</AccordionContext.Provider>;
 };
 
+Accordion.displayName = 'Accordion';
+
 Accordion.Summary = AccordionSummary;
+Accordion.Summary.displayName = 'Accordion.Summary';
+
 Accordion.Content = AccordionContent;
+Accordion.Content.displayName = 'Accordion.Content';

package/src/components/Accordion/AccordionContent.tsx

@@ -84,3 +84,5 @@ export const AccordionContent = ({
     </div>
   );
 };
+
+AccordionContent.displayName = 'AccordionContent';

package/src/components/Accordion/AccordionSummary.tsx

@@ -67,3 +67,5 @@ export const AccordionSummary = ({
     </SimpleCell>
   );
 };
+
+AccordionSummary.displayName = 'AccordionSummary';

package/src/components/ActionSheet/ActionSheet.module.css

@@ -18,7 +18,7 @@
 .ActionSheet__header {
   color: var(--vkui--color_text_subhead);
   padding-block: 16px;
-  padding-inline: 20px;
+  padding-inline: 16px;
 }
 
 .ActionSheet--closing {
@@ -86,7 +86,6 @@
 
 .ActionSheet--sizeY-compact .ActionSheet__header {
   padding-block: 12px;
-  padding-inline: 20px;
 }
 
 /**

package/src/components/ActionSheet/ActionSheet.tsx

@@ -27,7 +27,7 @@ export interface ActionSheetProps
   /**
    * Закрыть попап по клику снаружи.
    */
-  onClose(options: ActionSheetOnCloseOptions): void;
+  onClose: (options: ActionSheetOnCloseOptions) => void;
   /**
    * Только мобильный iOS.
    */

package/src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';
 
 export const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {

package/src/components/ActionSheetItem/ActionSheetItem.module.css

@@ -6,7 +6,7 @@
   text-decoration: none;
   color: var(--vkui--color_text_primary);
   padding-block: 0;
-  padding-inline: 20px;
+  padding-inline: 16px;
   min-block-size: 48px;
   box-sizing: border-box;
 }

package/src/components/Alert/Alert.tsx

@@ -24,7 +24,12 @@ export interface AlertActionInterface
     AnchorHTMLAttributesOnly,
     HasDataAttribute {
   title: string;
-  action?: VoidFunction;
+  /**
+   * Обработчик клика на опцию. Если свойство `autoCloseDisabled` включено,
+   * то в аргументы `action` передаётся объект с функцией close,
+   * вызвав которую можно закрыть `action` вручную.
+   */
+  action?: (args?: { close?: VoidFunction }) => void;
   /**
    * По умолчанию клик на опцию вызывает переданную в `Alert` функцию `onClose`, данное свойство
    * позволяет отключить такое поведение
@@ -122,10 +127,10 @@ export const Alert = ({
           timeout,
         );
       } else {
-        action && action();
+        action && action({ close });
       }
     },
-    [elementRef, waitTransitionFinish, onClose, timeout],
+    [elementRef, waitTransitionFinish, onClose, close, timeout],
   );
 
   useScrollLock();

package/src/components/Alert/AlertTypography.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { usePlatform } from '../../hooks/usePlatform';
 import { HasChildren } from '../../types';
 import { Caption } from '../Typography/Caption/Caption';

package/src/components/AppRoot/AppRoot.mdx

@@ -0,0 +1,8 @@
+import { Meta, Title, ArgTypes, Description } from '@storybook/blocks';
+import { AppRoot } from './AppRoot';
+
+<Meta title="Service/AppRoot" />
+
+<Title>AppRoot</Title>
+
+<ArgTypes of={AppRoot} />

package/src/components/AppRoot/ScrollContext.tsx

@@ -26,11 +26,11 @@ const getPageYOffsetWithoutKeyboardHeight = (window: Window) => {
 };
 
 export interface ScrollContextInterface {
-  getScroll(this: void): { x: number; y: number };
-  scrollTo(this: void, x?: number, y?: number): void;
+  getScroll: (this: void) => { x: number; y: number };
+  scrollTo: (this: void, x?: number, y?: number) => void;
   isScrollLock: boolean;
-  enableScrollLock(this: void): void;
-  disableScrollLock(this: void): void;
+  enableScrollLock: (this: void) => void;
+  disableScrollLock: (this: void) => void;
   beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;
 }
 

package/src/components/AppearanceProvider/AppearanceProvider.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { IconAppearanceProvider } from '@vkontakte/icons';
 import type { AppearanceType } from '../../lib/appearance';
 import { TokensClassProvider } from '../../lib/tokens';
 import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
@@ -14,7 +15,9 @@ export interface AppearanceProviderProps {
 export const AppearanceProvider = ({ value, children }: AppearanceProviderProps) => {
   return (
     <ConfigProviderOverride appearance={value}>
-      <TokensClassProvider>{children}</TokensClassProvider>
+      <IconAppearanceProvider value={value}>
+        <TokensClassProvider>{children}</TokensClassProvider>
+      </IconAppearanceProvider>
     </ConfigProviderOverride>
   );
 };

package/src/components/AspectRatio/AspectRatio.module.css

@@ -25,8 +25,9 @@
   block-size: 100%;
 }
 
-/* stylelint-disable-next-line selector-max-type */
+/* stylelint-disable selector-max-type */
 .AspectRatio--mode-stretch > img,
 .AspectRatio--mode-stretch > video {
   object-fit: cover;
 }
+/* stylelint-enable selector-max-type */

package/src/components/Avatar/Avatar.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
 import { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';
@@ -119,10 +118,15 @@ export const Avatar = ({
   );
 };
 
+Avatar.displayName = 'Avatar';
+
 Avatar.Badge = AvatarBadge;
+Avatar.Badge.displayName = 'Avatar.Badge';
 
 Avatar.BadgeWithPreset = AvatarBadgeWithPreset;
+Avatar.BadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';
 
 Avatar.Overlay = ImageBase.Overlay;
+Avatar.Overlay.displayName = 'Avatar.Overlay';
 
 Avatar.getInitialsFontSize = getInitialsFontSize;

package/src/components/Avatar/AvatarBadge/AvatarBadge.tsx

@@ -18,3 +18,5 @@ export const AvatarBadge = ({ className, ...restProps }: AvatarBadgeProps) => {
     />
   );
 };
+
+AvatarBadge.displayName = 'Avatar.Badge';

package/src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx

@@ -42,3 +42,5 @@ export const AvatarBadgeWithPreset = ({
     </ImageBase.Badge>
   );
 };
+
+AvatarBadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';

package/src/components/Badge/Badge.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { RootComponent, RootComponentProps } from '../RootComponent/RootComponent';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
@@ -10,11 +9,13 @@ const stylesMode = {
 };
 
 export interface BadgeProps extends RootComponentProps<HTMLSpanElement> {
-  mode: 'new' | 'prominent';
+  mode?: 'new' | 'prominent';
 }
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Badge
+ *
+ * TODO [>=7]: переименовать в Dot
  */
 export const Badge = ({ mode = 'new', children, ...restProps }: BadgeProps) => (
   <RootComponent

package/src/components/Banner/Banner.module.css

@@ -57,12 +57,13 @@
   z-index: var(--vkui_internal--z_index_banner_background);
 }
 
-/* stylelint-disable-next-line selector-max-universal */
+/* stylelint-disable selector-max-universal */
 .Banner__bg,
 .Banner__bg > * {
   inline-size: 100%;
   block-size: 100%;
 }
+/* stylelint-enable selector-max-universal */
 
 .Banner__aside {
   display: flex;

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

@@ -8,7 +8,7 @@ export interface LoopPoint {
   /**
    * Функция, которая по текущему сдвигу галереи определяет нужный сдвиг слайда
    */
-  target(this: void, location: number): void;
+  target: (this: void, location: number) => void;
 }
 
 export interface ControlElementsState {

package/src/components/BaseGallery/types.ts

@@ -32,16 +32,16 @@ export interface BaseGalleryProps
   slideWidth?: string | number;
   slideIndex?: number;
   onDragStart?: TouchEventHandler;
-  onDragEnd?(e: TouchEvent, targetIndex: number): void;
-  onChange?(current: number): void;
+  onDragEnd?: (e: TouchEvent, targetIndex: number) => void;
+  onChange?: (current: number) => void;
   /**
    * Будет вызвано при клике на кнопку-стрелку влево
    */
-  onPrevClick?(event: React.MouseEvent): void;
+  onPrevClick?: (event: React.MouseEvent) => void;
   /**
    * Будет вызвано при клике на кнопку-стрелку вправо
    */
-  onNextClick?(event: React.MouseEvent): void;
+  onNextClick?: (event: React.MouseEvent) => void;
   bullets?: 'dark' | 'light' | false;
   /**
    * Позволяет отключить реагирование на тач-события

package/src/components/Button/Button.module.css

@@ -2,17 +2,21 @@
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  text-decoration: none;
   border: 0;
   min-block-size: var(--vkui--size_button_small_height--compact);
   margin: 0;
   padding: 0;
-  user-select: none;
   border-radius: var(--vkui--size_border_radius--regular);
   max-inline-size: 100%;
   min-inline-size: var(--vkui--size_button_minimum_width--regular);
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .Button {
+    transition: background-color 0.15s ease-out, color 0.15s ease-out;
+  }
+}
+
 .Button--rounded {
   border-radius: var(--vkui--size_border_radius_rounded--regular);
 }

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import type { AlignType, HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';

package/src/components/Calendar/Calendar.tsx

@@ -30,7 +30,15 @@ export interface CalendarProps
     >,
     Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'> {
   value?: Date;
+  /**
+   * Запрещает выбор даты в прошлом.
+   * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.
+   */
   disablePast?: boolean;
+  /**
+   * Запрещает выбор даты в будущем.
+   * Применяется, если не задано `shouldDisableDate`.
+   */
   disableFuture?: boolean;
   enableTime?: boolean;
   disablePickers?: boolean;
@@ -39,9 +47,12 @@ export interface CalendarProps
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   showNeighboringMonth?: boolean;
   size?: 's' | 'm';
-  onChange?(value?: Date): void;
-  shouldDisableDate?(value: Date): boolean;
-  onClose?(): void;
+  onChange?: (value?: Date) => void;
+  /**
+   * Позволяет запретить выбор даты.
+   */
+  shouldDisableDate?: (value: Date) => boolean;
+  onClose?: () => void;
   /**
    * Дата отображаемого месяца.
    * При использовании обновление даты должно происходить вне компонента.
@@ -50,13 +61,15 @@ export interface CalendarProps
   /**
    * Изменение даты в шапке календаря.
    */
-  onHeaderChange?(value: Date): void;
+  onHeaderChange?: (value: Date) => void;
   /**
    * Минимальные дата и время, которые можно выбрать
+   * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.
    */
   minDateTime?: Date;
   /**
-   * Максимальные дата и время, которые можно выбрать
+   * Максимальные дата и время, которые можно выбрать.
+   * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.
    */
   maxDateTime?: Date;
 }

package/src/components/CalendarDay/CalendarDay.tsx

@@ -26,9 +26,9 @@ export interface CalendarDayProps extends CalendarDayElementProps {
   hinted?: boolean;
   sameMonth?: boolean;
   size?: 's' | 'm';
-  onChange(value: Date): void;
-  onEnter?(value: Date): void;
-  onLeave?(value: Date): void;
+  onChange: (value: Date) => void;
+  onEnter?: (value: Date) => void;
+  onLeave?: (value: Date) => void;
 }
 
 export const CalendarDay = React.memo(

package/src/components/CalendarDays/CalendarDays.tsx

@@ -20,18 +20,18 @@ export interface CalendarDaysProps
   size?: 's' | 'm';
   dayProps?: CalendarDayElementProps;
   listenDayChangesForUpdate?: boolean;
-  onDayChange(value: Date): void;
-  isDayDisabled(value: Date): boolean;
-  isDaySelectionStart(value: Date, dayOfWeek: number): boolean;
-  isDaySelectionEnd(value: Date, dayOfWeek: number): boolean;
-  isHintedDaySelectionStart?(value: Date, dayOfWeek: number): boolean;
-  isHintedDaySelectionEnd?(value: Date, dayOfWeek: number): boolean;
-  isDayActive(value: Date): boolean;
-  isDayHinted?(value: Date): boolean;
-  isDaySelected?(value: Date): boolean;
-  isDayFocused(value: Date): boolean;
-  onDayEnter?(value: Date): void;
-  onDayLeave?(value: Date): void;
+  onDayChange: (value: Date) => void;
+  isDayDisabled: (value: Date) => boolean;
+  isDaySelectionStart: (value: Date, dayOfWeek: number) => boolean;
+  isDaySelectionEnd: (value: Date, dayOfWeek: number) => boolean;
+  isHintedDaySelectionStart?: (value: Date, dayOfWeek: number) => boolean;
+  isHintedDaySelectionEnd?: (value: Date, dayOfWeek: number) => boolean;
+  isDayActive: (value: Date) => boolean;
+  isDayHinted?: (value: Date) => boolean;
+  isDaySelected?: (value: Date) => boolean;
+  isDayFocused: (value: Date) => boolean;
+  onDayEnter?: (value: Date) => void;
+  onDayLeave?: (value: Date) => void;
 }
 
 export const CalendarDays = ({

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -5,7 +5,7 @@ import {
   Icon20ChevronRightOutline,
 } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
-import { getMonths, getYears } from '../../lib/calendar';
+import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar';
 import { addMonths, setMonth, setYear, subMonths } from '../../lib/date';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
@@ -39,22 +39,22 @@ export interface CalendarHeaderProps
   nextMonthIcon?: React.ReactNode;
   prevMonthProps?: ArrowMonthProps;
   nextMonthProps?: ArrowMonthProps;
-  onChange(viewDate: Date): void;
+  onChange: (viewDate: Date) => void;
   /**
    * Нажатие на кнопку переключения на следующий месяц.
    */
-  onNextMonth?(): void;
+  onNextMonth?: () => void;
   /**
    * Нажатие на кнопку переключения на предыдущий месяц.
    */
-  onPrevMonth?(): void;
+  onPrevMonth?: () => void;
 }
 
 export const CalendarHeader = ({
   viewDate,
   onChange,
-  prevMonthHidden = false,
-  nextMonthHidden = false,
+  prevMonthHidden: prevMonthHiddenProp = false,
+  nextMonthHidden: nextMonthHiddenProp = false,
   disablePickers = false,
   onNextMonth,
   onPrevMonth,
@@ -102,6 +102,7 @@ export const CalendarHeader = ({
   );
 
   const currentYear = viewDate.getFullYear();
+  const currentMonth = viewDate.getMonth();
 
   const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);
 
@@ -113,6 +114,11 @@ export const CalendarHeader = ({
   const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;
   const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;
 
+  const nextMonthHidden =
+    nextMonthHiddenProp || (currentMonth === 11 && currentYear === DEFAULT_MAX_YEAR);
+  const prevMonthHidden =
+    prevMonthHiddenProp || (currentMonth === 0 && currentYear === DEFAULT_MIN_YEAR);
+
   return (
     <RootComponent baseClassName={styles['CalendarHeader']} {...restProps}>
       {!prevMonthHidden && (
@@ -164,7 +170,7 @@ export const CalendarHeader = ({
                 styles['CalendarHeader__picker'],
                 'vkuiInternalCalendarHeader__picker',
               )}
-              value={viewDate.getMonth()}
+              value={currentMonth}
               options={months}
               dropdownOffsetDistance={4}
               dropdownAutoWidth
@@ -179,7 +185,7 @@ export const CalendarHeader = ({
                 styles['CalendarHeader__picker'],
                 'vkuiInternalCalendarHeader__picker',
               )}
-              value={viewDate.getFullYear()}
+              value={currentYear}
               options={years}
               dropdownOffsetDistance={4}
               dropdownAutoWidth

package/src/components/CalendarRange/CalendarRange.tsx

@@ -38,8 +38,8 @@ export interface CalendarRangeProps
   changeDayLabel?: string;
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   onChange?: (value: DateRangeType | undefined) => void;
-  shouldDisableDate?(value: Date): boolean;
-  onClose?(): void;
+  shouldDisableDate?: (value: Date) => boolean;
+  onClose?: () => void;
 }
 
 const getIsDaySelected = (day: Date, value?: DateRangeType) => {

package/src/components/CalendarTime/CalendarTime.tsx

@@ -10,9 +10,9 @@ export interface CalendarTimeProps {
   doneButtonText?: string;
   changeHoursLabel?: string;
   changeMinutesLabel?: string;
-  onChange?(value: Date): void;
-  onClose?(): void;
-  isDayDisabled?(day: Date, withTime?: boolean): boolean;
+  onChange?: (value: Date) => void;
+  onClose?: () => void;
+  isDayDisabled?: (day: Date, withTime?: boolean) => boolean;
 }
 
 const hours: Array<{

package/src/components/Card/Card.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';

package/src/components/CardGrid/CardGrid.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { HTMLAttributesWithRootRef } from '../../types';

package/src/components/Cell/Cell.tsx

@@ -38,7 +38,7 @@ export interface CellProps
    * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице
    * есть рабочий пример с обработкой этих чисел и перерисовкой списка.
    */
-  onDragFinish?(swappedItemRange: SwappedItemRange): void;
+  onDragFinish?: (swappedItemRange: SwappedItemRange) => void;
   /**
    * Текст для кнопки перетаскивания ячейки
    */

package/src/components/Cell/CellCheckbox/CellCheckbox.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import {
   Icon20CheckBoxOff,
   Icon20CheckBoxOn,
+  Icon20CheckCircleOff,
+  Icon20CheckCircleOn,
   Icon24CheckBoxOff,
   Icon24CheckBoxOn,
   Icon24CheckCircleOff,
@@ -23,6 +25,14 @@ const CheckBoxOff = () => (
   <AdaptiveIconRenderer IconCompact={Icon20CheckBoxOff} IconRegular={Icon24CheckBoxOff} />
 );
 
+const CheckCircleOn = () => (
+  <AdaptiveIconRenderer IconCompact={Icon20CheckCircleOn} IconRegular={Icon24CheckCircleOn} />
+);
+
+const CheckCircleOff = () => (
+  <AdaptiveIconRenderer IconCompact={Icon20CheckCircleOff} IconRegular={Icon24CheckCircleOff} />
+);
+
 function useTypeIcon(type: NonNullable<CellCheckboxProps['type']>) {
   const platform = usePlatform();
 
@@ -58,8 +68,8 @@ export const CellCheckbox = ({
 }: CellCheckboxProps) => {
   const typeIcon = useTypeIcon(type);
 
-  const IconOff = typeIcon === 'circle' ? Icon24CheckCircleOff : CheckBoxOff;
-  const IconOn = typeIcon === 'circle' ? Icon24CheckCircleOn : CheckBoxOn;
+  const IconOff = typeIcon === 'circle' ? CheckCircleOff : CheckBoxOff;
+  const IconOn = typeIcon === 'circle' ? CheckCircleOn : CheckBoxOn;
 
   return (
     <span className={classNames(styles['CellCheckbox'], className)} style={style} ref={getRootRef}>

package/src/components/Cell/CellDragger/CellDragger.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import {
@@ -17,7 +16,7 @@ interface CellDraggerProps
   extends UseDraggableProps,
     Omit<HTMLAttributesWithRootRef<HTMLElement>, keyof DraggableProps> {
   disabled?: boolean;
-  onDragStateChange?(dragging: boolean): void;
+  onDragStateChange?: (dragging: boolean) => void;
 }
 
 export const CellDragger = ({

package/src/components/CellButton/CellButton.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';
 import styles from './CellButton.module.css';

package/src/components/ChipsInput/ChipsInput.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useExternRef } from '../../hooks/useExternRef';
 import { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';
 import {