@vkontakte/vkui 5.7.2 → 5.8.0

package/dist/cjs/components/CalendarHeader/CalendarHeader.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { TappableElementProps } from '../Tappable/Tappable';
 type ArrowMonthProps = Omit<TappableElementProps, 'onClick' | 'aria-label'>;
-export interface CalendarHeaderProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {
+export interface CalendarHeaderProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {
     viewDate: Date;
     prevMonth?: boolean;
     nextMonth?: boolean;
@@ -24,5 +25,5 @@ export interface CalendarHeaderProps extends Pick<React.HTMLAttributes<HTMLDivEl
      */
     onPrevMonth?(): void;
 }
-export declare const CalendarHeader: ({ viewDate, onChange, prevMonth, nextMonth, disablePickers, onNextMonth, onPrevMonth, className, prevMonthProps, nextMonthProps, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, prevMonthIcon, nextMonthIcon, }: CalendarHeaderProps) => React.JSX.Element;
+export declare const CalendarHeader: ({ viewDate, onChange, prevMonth, nextMonth, disablePickers, onNextMonth, onPrevMonth, prevMonthProps, nextMonthProps, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, prevMonthIcon, nextMonthIcon, ...restProps }: CalendarHeaderProps) => React.JSX.Element;
 export {};

package/dist/cjs/components/CalendarHeader/CalendarHeader.js

@@ -20,18 +20,35 @@ var _date = require("../../lib/date");
 var _AdaptivityProvider = require("../AdaptivityProvider/AdaptivityProvider");
 var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
 var _CustomSelect = require("../CustomSelect/CustomSelect");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _Tappable = require("../Tappable/Tappable");
 var _Paragraph = require("../Typography/Paragraph/Paragraph");
-var CalendarHeader = function(param) {
-    var viewDate = param.viewDate, onChange = param.onChange, _param_prevMonth = param.prevMonth, prevMonth = _param_prevMonth === void 0 ? true : _param_prevMonth, _param_nextMonth = param.nextMonth, nextMonth = _param_nextMonth === void 0 ? true : _param_nextMonth, _param_disablePickers = param.disablePickers, disablePickers = _param_disablePickers === void 0 ? false : _param_disablePickers, onNextMonth = param.onNextMonth, onPrevMonth = param.onPrevMonth, className = param.className, _param_prevMonthProps = param.prevMonthProps, prevMonthProps = _param_prevMonthProps === void 0 ? {} : _param_prevMonthProps, _param_nextMonthProps = param.nextMonthProps, nextMonthProps = _param_nextMonthProps === void 0 ? {} : _param_nextMonthProps, _param_prevMonthAriaLabel = param.prevMonthAriaLabel, prevMonthAriaLabel = _param_prevMonthAriaLabel === void 0 ? "Предыдущий месяц" : _param_prevMonthAriaLabel, _param_nextMonthAriaLabel = param.nextMonthAriaLabel, nextMonthAriaLabel = _param_nextMonthAriaLabel === void 0 ? "Следующий месяц" : _param_nextMonthAriaLabel, _param_changeMonthAriaLabel = param.changeMonthAriaLabel, changeMonthAriaLabel = _param_changeMonthAriaLabel === void 0 ? "Изменить месяц" : _param_changeMonthAriaLabel, _param_changeYearAriaLabel = param.changeYearAriaLabel, changeYearAriaLabel = _param_changeYearAriaLabel === void 0 ? "Изменить год" : _param_changeYearAriaLabel, _param_prevMonthIcon = param.prevMonthIcon, prevMonthIcon = _param_prevMonthIcon === void 0 ? /*#__PURE__*/ _react.createElement(_icons.Icon20ChevronLeftOutline, {
+var CalendarHeader = function(_param) {
+    var viewDate = _param.viewDate, onChange = _param.onChange, _param_prevMonth = _param.prevMonth, prevMonth = _param_prevMonth === void 0 ? true : _param_prevMonth, _param_nextMonth = _param.nextMonth, nextMonth = _param_nextMonth === void 0 ? true : _param_nextMonth, _param_disablePickers = _param.disablePickers, disablePickers = _param_disablePickers === void 0 ? false : _param_disablePickers, onNextMonth = _param.onNextMonth, onPrevMonth = _param.onPrevMonth, _param_prevMonthProps = _param.prevMonthProps, prevMonthProps = _param_prevMonthProps === void 0 ? {} : _param_prevMonthProps, _param_nextMonthProps = _param.nextMonthProps, nextMonthProps = _param_nextMonthProps === void 0 ? {} : _param_nextMonthProps, _param_prevMonthAriaLabel = _param.prevMonthAriaLabel, prevMonthAriaLabel = _param_prevMonthAriaLabel === void 0 ? "Предыдущий месяц" : _param_prevMonthAriaLabel, _param_nextMonthAriaLabel = _param.nextMonthAriaLabel, nextMonthAriaLabel = _param_nextMonthAriaLabel === void 0 ? "Следующий месяц" : _param_nextMonthAriaLabel, _param_changeMonthAriaLabel = _param.changeMonthAriaLabel, changeMonthAriaLabel = _param_changeMonthAriaLabel === void 0 ? "Изменить месяц" : _param_changeMonthAriaLabel, _param_changeYearAriaLabel = _param.changeYearAriaLabel, changeYearAriaLabel = _param_changeYearAriaLabel === void 0 ? "Изменить год" : _param_changeYearAriaLabel, _param_prevMonthIcon = _param.prevMonthIcon, prevMonthIcon = _param_prevMonthIcon === void 0 ? /*#__PURE__*/ _react.createElement(_icons.Icon20ChevronLeftOutline, {
         className: "vkuiCalendarHeader__nav-icon--accent",
         width: 30,
         height: 30
-    }) : _param_prevMonthIcon, _param_nextMonthIcon = param.nextMonthIcon, nextMonthIcon = _param_nextMonthIcon === void 0 ? /*#__PURE__*/ _react.createElement(_icons.Icon20ChevronRightOutline, {
+    }) : _param_prevMonthIcon, _param_nextMonthIcon = _param.nextMonthIcon, nextMonthIcon = _param_nextMonthIcon === void 0 ? /*#__PURE__*/ _react.createElement(_icons.Icon20ChevronRightOutline, {
         className: "vkuiCalendarHeader__nav-icon--accent",
         width: 30,
         height: 30
-    }) : _param_nextMonthIcon;
+    }) : _param_nextMonthIcon, restProps = _object_without_properties._(_param, [
+        "viewDate",
+        "onChange",
+        "prevMonth",
+        "nextMonth",
+        "disablePickers",
+        "onNextMonth",
+        "onPrevMonth",
+        "prevMonthProps",
+        "nextMonthProps",
+        "prevMonthAriaLabel",
+        "nextMonthAriaLabel",
+        "changeMonthAriaLabel",
+        "changeYearAriaLabel",
+        "prevMonthIcon",
+        "nextMonthIcon"
+    ]);
     var locale = (0, _ConfigProviderContext.useConfigProvider)().locale;
     var onMonthsChange = _react.useCallback(function(event) {
         return onChange((0, _date.setMonth)(viewDate, Number(event.target.value)));
@@ -74,9 +91,9 @@ var CalendarHeader = function(param) {
     var nextMonthClassName = nextMonthProps.className, restNextMonthProps = _object_without_properties._(nextMonthProps, [
         "className"
     ]);
-    return /*#__PURE__*/ _react.createElement("div", {
-        className: (0, _vkjs.classNames)("vkuiCalendarHeader", className)
-    }, prevMonth && /*#__PURE__*/ _react.createElement(_AdaptivityProvider.AdaptivityProvider, {
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        baseClassName: "vkuiCalendarHeader"
+    }, restProps), prevMonth && /*#__PURE__*/ _react.createElement(_AdaptivityProvider.AdaptivityProvider, {
         sizeX: _adaptivity.SizeType.REGULAR
     }, /*#__PURE__*/ _react.createElement(_Tappable.Tappable, _object_spread._({
         className: (0, _vkjs.classNames)("vkuiCalendarHeader__nav-icon", "vkuiCalendarHeader__nav-icon-prev", prevMonthClassName),

package/dist/cjs/components/CalendarHeader/CalendarHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon12Dropdown,\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getMonths, getYears } from '../../lib/calendar';\nimport { addMonths, setMonth, setYear, subMonths } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<TappableElementProps, 'onClick' | 'aria-label'>;\n\nexport interface CalendarHeaderProps\n  extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n  viewDate: Date;\n  prevMonth?: boolean;\n  nextMonth?: boolean;\n  disablePickers?: boolean;\n  prevMonthAriaLabel?: string;\n  nextMonthAriaLabel?: string;\n  changeMonthAriaLabel?: string;\n  changeYearAriaLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  onChange(viewDate: Date): void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?(): void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?(): void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonth = true,\n  nextMonth = true,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  className,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthAriaLabel = 'Предыдущий месяц',\n  nextMonthAriaLabel = 'Следующий месяц',\n  changeMonthAriaLabel = 'Изменить месяц',\n  changeYearAriaLabel = 'Изменить год',\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n}: CalendarHeaderProps) => {\n  const { locale } = useConfigProvider();\n  const onMonthsChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setMonth(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n  const onYearChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setYear(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles['CalendarHeader__month']}>{label}</span>,\n      })),\n    [locale],\n  );\n\n  const currentYear = viewDate.getFullYear();\n\n  const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  return (\n    <div className={classNames(styles['CalendarHeader'], className)}>\n      {prevMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-prev'],\n              prevMonthClassName,\n            )}\n            onClick={onPrevMonth}\n            aria-label={`${prevMonthAriaLabel}, ${formatter.format(subMonths(viewDate, 1))}`}\n            {...restPrevMonthProps}\n          >\n            {prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph\n          className={classNames(\n            styles['CalendarHeader__pickers'],\n            'vkuiInternalCalendarHeader__pickers',\n          )}\n          weight=\"2\"\n        >\n          <span className={styles['CalendarHeader__month']}>\n            {new Intl.DateTimeFormat(locale, {\n              month: 'long',\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: 'numeric',\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <div\n            className={classNames(\n              styles['CalendarHeader__pickers'],\n              'vkuiInternalCalendarHeader__pickers',\n            )}\n          >\n            <CustomSelect\n              className={classNames(\n                styles['CalendarHeader__picker'],\n                'vkuiInternalCalendarHeader__picker',\n              )}\n              value={viewDate.getMonth()}\n              options={months}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthAriaLabel}\n            />\n            <CustomSelect\n              className={classNames(\n                styles['CalendarHeader__picker'],\n                'vkuiInternalCalendarHeader__picker',\n              )}\n              value={viewDate.getFullYear()}\n              options={years}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearAriaLabel}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {nextMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-next'],\n              nextMonthClassName,\n            )}\n            onClick={onNextMonth}\n            aria-label={`${nextMonthAriaLabel}, ${formatter.format(addMonths(viewDate, 1))}`}\n            {...restNextMonthProps}\n          >\n            {nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </div>\n  );\n};\n"],"names":["CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","Icon20ChevronLeftOutline","width","height","nextMonthIcon","Icon20ChevronRightOutline","locale","useConfigProvider","onMonthsChange","React","useCallback","event","setMonth","Number","target","value","onYearChange","setYear","months","useMemo","getMonths","map","label","span","currentYear","getFullYear","years","getYears","formatter","Intl","DateTimeFormat","year","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","div","classNames","AdaptivityProvider","sizeX","SizeType","REGULAR","Tappable","onClick","aria-label","format","subMonths","Paragraph","weight","sizeY","COMPACT","CustomSelect","getMonth","options","dropdownOffsetDistance","fixDropdownWidth","icon","Icon12Dropdown","forceDropdownPortal","selectType","addMonths"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon12Dropdown,\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getMonths, getYears } from '../../lib/calendar';\nimport { addMonths, setMonth, setYear, subMonths } from '../../lib/date';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<TappableElementProps, 'onClick' | 'aria-label'>;\n\nexport interface CalendarHeaderProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n  viewDate: Date;\n  prevMonth?: boolean;\n  nextMonth?: boolean;\n  disablePickers?: boolean;\n  prevMonthAriaLabel?: string;\n  nextMonthAriaLabel?: string;\n  changeMonthAriaLabel?: string;\n  changeYearAriaLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  onChange(viewDate: Date): void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?(): void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?(): void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonth = true,\n  nextMonth = true,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthAriaLabel = 'Предыдущий месяц',\n  nextMonthAriaLabel = 'Следующий месяц',\n  changeMonthAriaLabel = 'Изменить месяц',\n  changeYearAriaLabel = 'Изменить год',\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline\n      className={styles['CalendarHeader__nav-icon--accent']}\n      width={30}\n      height={30}\n    />\n  ),\n  ...restProps\n}: CalendarHeaderProps) => {\n  const { locale } = useConfigProvider();\n  const onMonthsChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setMonth(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n  const onYearChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setYear(viewDate, Number(event.target.value))),\n    [onChange, viewDate],\n  );\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles['CalendarHeader__month']}>{label}</span>,\n      })),\n    [locale],\n  );\n\n  const currentYear = viewDate.getFullYear();\n\n  const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  return (\n    <RootComponent baseClassName={styles['CalendarHeader']} {...restProps}>\n      {prevMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-prev'],\n              prevMonthClassName,\n            )}\n            onClick={onPrevMonth}\n            aria-label={`${prevMonthAriaLabel}, ${formatter.format(subMonths(viewDate, 1))}`}\n            {...restPrevMonthProps}\n          >\n            {prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph\n          className={classNames(\n            styles['CalendarHeader__pickers'],\n            'vkuiInternalCalendarHeader__pickers',\n          )}\n          weight=\"2\"\n        >\n          <span className={styles['CalendarHeader__month']}>\n            {new Intl.DateTimeFormat(locale, {\n              month: 'long',\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: 'numeric',\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <div\n            className={classNames(\n              styles['CalendarHeader__pickers'],\n              'vkuiInternalCalendarHeader__pickers',\n            )}\n          >\n            <CustomSelect\n              className={classNames(\n                styles['CalendarHeader__picker'],\n                'vkuiInternalCalendarHeader__picker',\n              )}\n              value={viewDate.getMonth()}\n              options={months}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthAriaLabel}\n            />\n            <CustomSelect\n              className={classNames(\n                styles['CalendarHeader__picker'],\n                'vkuiInternalCalendarHeader__picker',\n              )}\n              value={viewDate.getFullYear()}\n              options={years}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearAriaLabel}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {nextMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNames(\n              styles['CalendarHeader__nav-icon'],\n              styles['CalendarHeader__nav-icon-next'],\n              nextMonthClassName,\n            )}\n            onClick={onNextMonth}\n            aria-label={`${nextMonthAriaLabel}, ${formatter.format(addMonths(viewDate, 1))}`}\n            {...restNextMonthProps}\n          >\n            {nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","Icon20ChevronLeftOutline","className","width","height","nextMonthIcon","Icon20ChevronRightOutline","restProps","locale","useConfigProvider","onMonthsChange","React","useCallback","event","setMonth","Number","target","value","onYearChange","setYear","months","useMemo","getMonths","map","label","span","currentYear","getFullYear","years","getYears","formatter","Intl","DateTimeFormat","year","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","RootComponent","baseClassName","AdaptivityProvider","sizeX","SizeType","REGULAR","Tappable","classNames","onClick","aria-label","format","subMonths","Paragraph","weight","sizeY","COMPACT","div","CustomSelect","getMonth","options","dropdownOffsetDistance","fixDropdownWidth","icon","Icon12Dropdown","forceDropdownPortal","selectType","addMonths"],"mappings":"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"}

package/dist/cjs/components/CalendarRange/CalendarRange.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { CalendarDaysProps } from '../CalendarDays/CalendarDays';
 import { CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';
-export interface CalendarRangeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, Pick<CalendarHeaderProps, 'prevMonthAriaLabel' | 'nextMonthAriaLabel' | 'changeMonthAriaLabel' | 'changeYearAriaLabel' | 'prevMonthIcon' | 'nextMonthIcon'>, Pick<CalendarDaysProps, 'listenDayChangesForUpdate'>, HasRootRef<HTMLDivElement> {
+export interface CalendarRangeProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>, Pick<CalendarHeaderProps, 'prevMonthAriaLabel' | 'nextMonthAriaLabel' | 'changeMonthAriaLabel' | 'changeYearAriaLabel' | 'prevMonthIcon' | 'nextMonthIcon'>, Pick<CalendarDaysProps, 'listenDayChangesForUpdate'> {
     value?: Array<Date | null>;
     disablePast?: boolean;
     disableFuture?: boolean;
@@ -16,4 +16,4 @@ export interface CalendarRangeProps extends Omit<React.HTMLAttributes<HTMLDivEle
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
  */
-export declare const CalendarRange: ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn, getRootRef, disablePickers, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, changeDayAriaLabel, prevMonthIcon, nextMonthIcon, className, listenDayChangesForUpdate, ...props }: CalendarRangeProps) => React.JSX.Element;
+export declare const CalendarRange: ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn, getRootRef, disablePickers, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, changeDayAriaLabel, prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, ...props }: CalendarRangeProps) => React.JSX.Element;

package/dist/cjs/components/CalendarRange/CalendarRange.js

@@ -14,12 +14,12 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _vkjs = require("@vkontakte/vkjs");
 var _useCalendar = require("../../hooks/useCalendar");
 var _calendar = require("../../lib/calendar");
 var _date = require("../../lib/date");
 var _CalendarDays = require("../CalendarDays/CalendarDays");
 var _CalendarHeader = require("../CalendarHeader/CalendarHeader");
+var _RootComponent = require("../RootComponent/RootComponent");
 var getIsDaySelected = function(day, value) {
     var _value;
     if (!((_value = value) === null || _value === void 0 ? void 0 : _value[0]) || !value[1]) {
@@ -28,7 +28,7 @@ var getIsDaySelected = function(day, value) {
     return Boolean((0, _date.isWithinInterval)(day, (0, _date.startOfDay)(value[0]), (0, _date.endOfDay)(value[1])));
 };
 var CalendarRange = function(_param) {
-    var value = _param.value, onChange = _param.onChange, disablePast = _param.disablePast, disableFuture = _param.disableFuture, shouldDisableDate = _param.shouldDisableDate, onClose = _param.onClose, _param_weekStartsOn = _param.weekStartsOn, weekStartsOn = _param_weekStartsOn === void 0 ? 1 : _param_weekStartsOn, getRootRef = _param.getRootRef, disablePickers = _param.disablePickers, prevMonthAriaLabel = _param.prevMonthAriaLabel, nextMonthAriaLabel = _param.nextMonthAriaLabel, changeMonthAriaLabel = _param.changeMonthAriaLabel, changeYearAriaLabel = _param.changeYearAriaLabel, _param_changeDayAriaLabel = _param.changeDayAriaLabel, changeDayAriaLabel = _param_changeDayAriaLabel === void 0 ? "Изменить день" : _param_changeDayAriaLabel, prevMonthIcon = _param.prevMonthIcon, nextMonthIcon = _param.nextMonthIcon, className = _param.className, listenDayChangesForUpdate = _param.listenDayChangesForUpdate, props = _object_without_properties._(_param, [
+    var value = _param.value, onChange = _param.onChange, disablePast = _param.disablePast, disableFuture = _param.disableFuture, shouldDisableDate = _param.shouldDisableDate, onClose = _param.onClose, _param_weekStartsOn = _param.weekStartsOn, weekStartsOn = _param_weekStartsOn === void 0 ? 1 : _param_weekStartsOn, getRootRef = _param.getRootRef, disablePickers = _param.disablePickers, prevMonthAriaLabel = _param.prevMonthAriaLabel, nextMonthAriaLabel = _param.nextMonthAriaLabel, changeMonthAriaLabel = _param.changeMonthAriaLabel, changeYearAriaLabel = _param.changeYearAriaLabel, _param_changeDayAriaLabel = _param.changeDayAriaLabel, changeDayAriaLabel = _param_changeDayAriaLabel === void 0 ? "Изменить день" : _param_changeDayAriaLabel, prevMonthIcon = _param.prevMonthIcon, nextMonthIcon = _param.nextMonthIcon, listenDayChangesForUpdate = _param.listenDayChangesForUpdate, props = _object_without_properties._(_param, [
         "value",
         "onChange",
         "disablePast",
@@ -45,7 +45,6 @@ var CalendarRange = function(_param) {
         "changeDayAriaLabel",
         "prevMonthIcon",
         "nextMonthIcon",
-        "className",
         "listenDayChangesForUpdate"
     ]);
     var _useCalendar1 = (0, _useCalendar.useCalendar)({
@@ -166,9 +165,8 @@ var CalendarRange = function(_param) {
     }, [
         hintedDate
     ]);
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, props), {
-        ref: getRootRef,
-        className: (0, _vkjs.classNames)("vkuiCalendarRange", className)
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, props), {
+        baseClassName: "vkuiCalendarRange"
     }), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiCalendarRange__inner"
     }, /*#__PURE__*/ _react.createElement(_CalendarHeader.CalendarHeader, {

package/dist/cjs/components/CalendarRange/CalendarRange.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport {\n  addMonths,\n  endOfDay,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isSameMonth,\n  isWithinInterval,\n  startOfDay,\n} from '../../lib/date';\nimport { HasRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport styles from './CalendarRange.module.css';\n\nexport interface CalendarRangeProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    Pick<CalendarDaysProps, 'listenDayChangesForUpdate'>,\n    HasRootRef<HTMLDivElement> {\n  value?: Array<Date | null>;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  disablePickers?: boolean;\n  changeDayAriaLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  onChange?(value?: Array<Date | null>): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n}\n\nconst getIsDaySelected = (day: Date, value?: Array<Date | null>) => {\n  if (!value?.[0] || !value[1]) {\n    return false;\n  }\n\n  return Boolean(isWithinInterval(day, startOfDay(value[0]), endOfDay(value[1])));\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CalendarRange\n */\nexport const CalendarRange = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  weekStartsOn = 1,\n  getRootRef,\n  disablePickers,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  changeDayAriaLabel = 'Изменить день',\n  prevMonthIcon,\n  nextMonthIcon,\n  className,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarRangeProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n  const [hintedDate, setHintedDate] = React.useState<Array<Date | null>>();\n  const secondViewDate = addMonths(viewDate, 1);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);\n\n      if (\n        newFocusedDay &&\n        !isSameMonth(newFocusedDay, viewDate) &&\n        !isSameMonth(newFocusedDay, addMonths(viewDate, 1))\n      ) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const getNewValue = React.useCallback(\n    (date: Date) => {\n      if (!value) {\n        return [date, null];\n      }\n\n      const start = value[0];\n      const end = value[1];\n      if ((start && isSameDay(date, start)) || (end && isSameDay(date, end))) {\n        return [setTimeEqual(date, start), setTimeEqual(date, end)];\n      } else if (start && isBefore(date, start)) {\n        return [setTimeEqual(date, start), end];\n      } else if (start && isAfter(date, start)) {\n        return [start, setTimeEqual(date, end)];\n      }\n\n      return value;\n    },\n    [value],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(getNewValue(date));\n      setHintedDate(undefined);\n    },\n    [onChange, getNewValue],\n  );\n\n  const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n  const isDayActive = React.useCallback(\n    (day: Date) =>\n      Boolean((value?.[0] && isSameDay(day, value[0])) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isHintedDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n    [hintedDate],\n  );\n\n  const isDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (value?.[0] && isSameDay(day, value[0]))),\n    [value],\n  );\n\n  const isHintedDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n    [hintedDate],\n  );\n\n  const onDayEnter = React.useCallback(\n    (date: Date) => setHintedDate(getNewValue(date)),\n    [setHintedDate, getNewValue],\n  );\n\n  const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n  const isDayHinted = React.useCallback(\n    (day: Date) => getIsDaySelected(day, hintedDate),\n    [hintedDate],\n  );\n\n  return (\n    <div {...props} ref={getRootRef} className={classNames(styles['CalendarRange'], className)}>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={viewDate}\n          onChange={setViewDate}\n          nextMonth={false}\n          onPrevMonth={setPrevMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthAriaLabel={prevMonthAriaLabel}\n          nextMonthAriaLabel={nextMonthAriaLabel}\n          changeMonthAriaLabel={changeMonthAriaLabel}\n          changeYearAriaLabel={changeYearAriaLabel}\n          prevMonthIcon={prevMonthIcon}\n        />\n        <CalendarDays\n          viewDate={viewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          onKeyDown={handleKeyDown}\n          isDayFocused={isDayFocused}\n          onDayChange={onDayChange}\n          isDaySelected={isDaySelected}\n          isDayActive={isDayActive}\n          isDaySelectionEnd={isDaySelectionEnd}\n          isDaySelectionStart={isDaySelectionStart}\n          isDayHinted={isDayHinted}\n          onDayEnter={onDayEnter}\n          onDayLeave={onDayLeave}\n          isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n          isHintedDaySelectionStart={isHintedDaySelectionStart}\n          isDayDisabled={isDayDisabled}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          aria-label={changeDayAriaLabel}\n        />\n      </div>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={secondViewDate}\n          onChange={setViewDate}\n          prevMonth={false}\n          onNextMonth={setNextMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthAriaLabel={prevMonthAriaLabel}\n          nextMonthAriaLabel={nextMonthAriaLabel}\n          changeMonthAriaLabel={changeMonthAriaLabel}\n          changeYearAriaLabel={changeYearAriaLabel}\n          nextMonthIcon={nextMonthIcon}\n        />\n        <CalendarDays\n          viewDate={secondViewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          aria-label={changeDayAriaLabel}\n          onKeyDown={handleKeyDown}\n          isDayFocused={isDayFocused}\n          onDayChange={onDayChange}\n          isDaySelected={isDaySelected}\n          isDayActive={isDayActive}\n          isDaySelectionEnd={isDaySelectionEnd}\n          isDaySelectionStart={isDaySelectionStart}\n          isDayHinted={isDayHinted}\n          onDayEnter={onDayEnter}\n          onDayLeave={onDayLeave}\n          isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n          isHintedDaySelectionStart={isHintedDaySelectionStart}\n          isDayDisabled={isDayDisabled}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          tabIndex={0}\n          onBlur={resetSelectedDay}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["CalendarRange","getIsDaySelected","day","value","Boolean","isWithinInterval","startOfDay","endOfDay","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","getRootRef","disablePickers","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","prevMonthIcon","nextMonthIcon","className","listenDayChangesForUpdate","props","useCalendar","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","React","useState","hintedDate","setHintedDate","secondViewDate","addMonths","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","getNewValue","date","start","end","isSameDay","setTimeEqual","isBefore","isAfter","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isLastDay","isHintedDaySelectionEnd","isDaySelectionStart","isFirstDay","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","div","ref","classNames","CalendarHeader","nextMonth","onPrevMonth","CalendarDays","onKeyDown","aria-label","prevMonth","onNextMonth","tabIndex","onBlur"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport {\n  addMonths,\n  endOfDay,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isSameMonth,\n  isWithinInterval,\n  startOfDay,\n} from '../../lib/date';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CalendarRange.module.css';\n\nexport interface CalendarRangeProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    Pick<CalendarDaysProps, 'listenDayChangesForUpdate'> {\n  value?: Array<Date | null>;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  disablePickers?: boolean;\n  changeDayAriaLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  onChange?(value?: Array<Date | null>): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n}\n\nconst getIsDaySelected = (day: Date, value?: Array<Date | null>) => {\n  if (!value?.[0] || !value[1]) {\n    return false;\n  }\n\n  return Boolean(isWithinInterval(day, startOfDay(value[0]), endOfDay(value[1])));\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CalendarRange\n */\nexport const CalendarRange = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  weekStartsOn = 1,\n  getRootRef,\n  disablePickers,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  changeDayAriaLabel = 'Изменить день',\n  prevMonthIcon,\n  nextMonthIcon,\n  listenDayChangesForUpdate,\n  ...props\n}: CalendarRangeProps) => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n  const [hintedDate, setHintedDate] = React.useState<Array<Date | null>>();\n  const secondViewDate = addMonths(viewDate, 1);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);\n\n      if (\n        newFocusedDay &&\n        !isSameMonth(newFocusedDay, viewDate) &&\n        !isSameMonth(newFocusedDay, addMonths(viewDate, 1))\n      ) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const getNewValue = React.useCallback(\n    (date: Date) => {\n      if (!value) {\n        return [date, null];\n      }\n\n      const start = value[0];\n      const end = value[1];\n      if ((start && isSameDay(date, start)) || (end && isSameDay(date, end))) {\n        return [setTimeEqual(date, start), setTimeEqual(date, end)];\n      } else if (start && isBefore(date, start)) {\n        return [setTimeEqual(date, start), end];\n      } else if (start && isAfter(date, start)) {\n        return [start, setTimeEqual(date, end)];\n      }\n\n      return value;\n    },\n    [value],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(getNewValue(date));\n      setHintedDate(undefined);\n    },\n    [onChange, getNewValue],\n  );\n\n  const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n  const isDayActive = React.useCallback(\n    (day: Date) =>\n      Boolean((value?.[0] && isSameDay(day, value[0])) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isHintedDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n    [hintedDate],\n  );\n\n  const isDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (value?.[0] && isSameDay(day, value[0]))),\n    [value],\n  );\n\n  const isHintedDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n    [hintedDate],\n  );\n\n  const onDayEnter = React.useCallback(\n    (date: Date) => setHintedDate(getNewValue(date)),\n    [setHintedDate, getNewValue],\n  );\n\n  const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n  const isDayHinted = React.useCallback(\n    (day: Date) => getIsDaySelected(day, hintedDate),\n    [hintedDate],\n  );\n\n  return (\n    <RootComponent {...props} baseClassName={styles['CalendarRange']}>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={viewDate}\n          onChange={setViewDate}\n          nextMonth={false}\n          onPrevMonth={setPrevMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthAriaLabel={prevMonthAriaLabel}\n          nextMonthAriaLabel={nextMonthAriaLabel}\n          changeMonthAriaLabel={changeMonthAriaLabel}\n          changeYearAriaLabel={changeYearAriaLabel}\n          prevMonthIcon={prevMonthIcon}\n        />\n        <CalendarDays\n          viewDate={viewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          onKeyDown={handleKeyDown}\n          isDayFocused={isDayFocused}\n          onDayChange={onDayChange}\n          isDaySelected={isDaySelected}\n          isDayActive={isDayActive}\n          isDaySelectionEnd={isDaySelectionEnd}\n          isDaySelectionStart={isDaySelectionStart}\n          isDayHinted={isDayHinted}\n          onDayEnter={onDayEnter}\n          onDayLeave={onDayLeave}\n          isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n          isHintedDaySelectionStart={isHintedDaySelectionStart}\n          isDayDisabled={isDayDisabled}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          aria-label={changeDayAriaLabel}\n        />\n      </div>\n      <div className={styles['CalendarRange__inner']}>\n        <CalendarHeader\n          viewDate={secondViewDate}\n          onChange={setViewDate}\n          prevMonth={false}\n          onNextMonth={setNextMonth}\n          disablePickers={disablePickers}\n          className={styles['CalendarRange__header']}\n          prevMonthAriaLabel={prevMonthAriaLabel}\n          nextMonthAriaLabel={nextMonthAriaLabel}\n          changeMonthAriaLabel={changeMonthAriaLabel}\n          changeYearAriaLabel={changeYearAriaLabel}\n          nextMonthIcon={nextMonthIcon}\n        />\n        <CalendarDays\n          viewDate={secondViewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          aria-label={changeDayAriaLabel}\n          onKeyDown={handleKeyDown}\n          isDayFocused={isDayFocused}\n          onDayChange={onDayChange}\n          isDaySelected={isDaySelected}\n          isDayActive={isDayActive}\n          isDaySelectionEnd={isDaySelectionEnd}\n          isDaySelectionStart={isDaySelectionStart}\n          isDayHinted={isDayHinted}\n          onDayEnter={onDayEnter}\n          onDayLeave={onDayLeave}\n          isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n          isHintedDaySelectionStart={isHintedDaySelectionStart}\n          isDayDisabled={isDayDisabled}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          tabIndex={0}\n          onBlur={resetSelectedDay}\n        />\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["CalendarRange","getIsDaySelected","day","value","Boolean","isWithinInterval","startOfDay","endOfDay","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","getRootRef","disablePickers","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","props","useCalendar","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","React","useState","hintedDate","setHintedDate","secondViewDate","addMonths","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","getNewValue","date","start","end","isSameDay","setTimeEqual","isBefore","isAfter","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isLastDay","isHintedDaySelectionEnd","isDaySelectionStart","isFirstDay","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","RootComponent","baseClassName","div","className","CalendarHeader","nextMonth","onPrevMonth","CalendarDays","onKeyDown","aria-label","prevMonth","onNextMonth","tabIndex","onBlur"],"mappings":"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"}

package/dist/cjs/components/Card/Card.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
-    mode?: 'tint' | 'shadow' | 'outline';
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface CardProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+    mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Card
  */
-export declare const Card: ({ mode, children, getRootRef, className, ...restProps }: CardProps) => React.JSX.Element;
+export declare const Card: ({ mode, ...restProps }: CardProps) => React.JSX.Element;

package/dist/cjs/components/Card/Card.js

@@ -14,17 +14,15 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _RootComponent = require("../RootComponent/RootComponent");
 var Card = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "tint" : _param_mode, children = _param.children, getRootRef = _param.getRootRef, className = _param.className, restProps = _object_without_properties._(_param, [
-        "mode",
-        "children",
-        "getRootRef",
-        "className"
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "tint" : _param_mode, restProps = _object_without_properties._(_param, [
+        "mode"
     ]);
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        ref: getRootRef,
-        className: (0, _vkjs.classNames)("vkuiCard", mode === "outline" && "vkuiCard--mode-outline", mode === "shadow" && "vkuiCard--mode-shadow", className)
-    }), children);
+    var withBorder = mode === "outline" || mode === "outline-tint";
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiCard", mode === "outline" && "vkuiCard--mode-outline", mode === "shadow" && "vkuiCard--mode-shadow", withBorder && "vkuiCard--withBorder")
+    }));
 };
 
 //# sourceMappingURL=Card.js.map

package/dist/cjs/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Card.module.css';\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'tint' | 'shadow' | 'outline';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({\n  mode = 'tint',\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: CardProps) => {\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Card'],\n        mode === 'outline' && styles['Card--mode-outline'],\n        mode === 'shadow' && styles['Card--mode-shadow'],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["Card","mode","children","getRootRef","className","restProps","div","ref","classNames"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;+DAdU;oBACI;AAapB,IAAMA,OAAO;6BAClBC,MAAAA,gCAAO,sBACPC,kBAAAA,UACAC,oBAAAA,YACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,mDACKD;QACJE,KAAKJ;QACLC,WAAWI,IAAAA,gBAAU,cAEnBP,SAAS,uCACTA,SAAS,qCACTG;QAGDF;AAGP"}
+{"version":3,"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Card.module.css';\n\nexport interface CardProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({ mode = 'tint', ...restProps }: CardProps) => {\n  const withBorder = mode === 'outline' || mode === 'outline-tint';\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Card'],\n        mode === 'outline' && styles['Card--mode-outline'],\n        mode === 'shadow' && styles['Card--mode-shadow'],\n        withBorder && styles['Card--withBorder'],\n      )}\n    />\n  );\n};\n"],"names":["Card","mode","restProps","withBorder","RootComponent","baseClassName","classNames"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;;;+DAbU;oBACI;6BAEG;AAUvB,IAAMA,OAAO;6BAAGC,MAAAA,gCAAO,sBAAWC;QAAlBD;;IACrB,IAAME,aAAaF,SAAS,aAAaA,SAAS;IAClD,qBACE,qBAACG,4BAAa,8CACRF;QACJG,eAAeC,IAAAA,gBAAU,cAEvBL,SAAS,uCACTA,SAAS,qCACTE;;AAIR"}

package/dist/cjs/components/CardGrid/CardGrid.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface CardGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     size?: 's' | 'm' | 'l';
     /**
      * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа
@@ -9,4 +10,4 @@ export interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/CardGrid
  */
-export declare const CardGrid: ({ children, size, spaced, className, ...restProps }: CardGridProps) => React.JSX.Element;
+export declare const CardGrid: ({ size, spaced, ...restProps }: CardGridProps) => React.JSX.Element;

package/dist/cjs/components/CardGrid/CardGrid.js

@@ -17,24 +17,24 @@ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _adaptivity = require("../../lib/adaptivity");
+var _RootComponent = require("../RootComponent/RootComponent");
 var sizeXClassNames = _define_property._({
     none: "vkuiCardGrid--sizeX-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiCardGrid--sizeX-compact");
+var stylesSize = {
+    s: "vkuiInternalCardGrid--size-s",
+    m: "vkuiInternalCardGrid--size-m",
+    l: "vkuiInternalCardGrid--size-l"
+};
 var CardGrid = function(_param) {
-    var children = _param.children, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, _param_spaced = _param.spaced, spaced = _param_spaced === void 0 ? false : _param_spaced, className = _param.className, restProps = _object_without_properties._(_param, [
-        "children",
+    var _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, _param_spaced = _param.spaced, spaced = _param_spaced === void 0 ? false : _param_spaced, restProps = _object_without_properties._(_param, [
         "size",
-        "spaced",
-        "className"
+        "spaced"
     ]);
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeX = _useAdaptivity1.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? "none" : _useAdaptivity_sizeX;
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiCardGrid", "vkuiInternalCardGrid", spaced && "vkuiCardGrid--spaced", {
-            s: "vkuiInternalCardGrid--size-s",
-            m: "vkuiInternalCardGrid--size-m",
-            l: "vkuiInternalCardGrid--size-l"
-        }[size], sizeX !== _adaptivity.SizeType.REGULAR && sizeXClassNames[sizeX], className)
-    }), children);
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiCardGrid", "vkuiInternalCardGrid", spaced && "vkuiCardGrid--spaced", stylesSize[size], sizeX !== _adaptivity.SizeType.REGULAR && sizeXClassNames[sizeX])
+    }));
 };
 
 //# sourceMappingURL=CardGrid.js.map

package/dist/cjs/components/CardGrid/CardGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n  none: styles['CardGrid--sizeX-none'],\n  [SizeType.COMPACT]: styles['CardGrid--sizeX-compact'],\n};\n\nexport interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n   */\n  spaced?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({\n  children,\n  size = 's',\n  spaced = false,\n  className,\n  ...restProps\n}: CardGridProps) => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['CardGrid'],\n        'vkuiInternalCardGrid',\n        spaced && styles['CardGrid--spaced'],\n        {\n          s: 'vkuiInternalCardGrid--size-s',\n          m: 'vkuiInternalCardGrid--size-m',\n          l: 'vkuiInternalCardGrid--size-l',\n        }[size],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["CardGrid","sizeXClassNames","none","SizeType","COMPACT","children","size","spaced","className","restProps","useAdaptivity","sizeX","div","classNames","s","m","l","REGULAR"],"mappings":";;;;+BAsBaA;;;eAAAA;;;;;;;;+DAtBU;oBACI;6BACG;0BACL;AAGzB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAcZ,IAAMJ,WAAW;QACtBK,kBAAAA,+BACAC,MAAAA,gCAAO,0CACPC,QAAAA,oCAAS,uBACTC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,mDACKH;QACJD,WAAWK,IAAAA,gBAAU,kBAEnB,wBACAN,kCACA;YACEO,GAAG;YACHC,GAAG;YACHC,GAAG;QACL,CAAC,CAACV,KAAK,EACPK,UAAUR,oBAAQ,CAACc,OAAO,IAAIhB,eAAe,CAACU,MAAM,EACpDH;QAGDH;AAGP"}
+{"version":3,"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n  none: styles['CardGrid--sizeX-none'],\n  [SizeType.COMPACT]: styles['CardGrid--sizeX-compact'],\n};\n\nconst stylesSize = {\n  s: 'vkuiInternalCardGrid--size-s',\n  m: 'vkuiInternalCardGrid--size-m',\n  l: 'vkuiInternalCardGrid--size-l',\n};\n\nexport interface CardGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n   */\n  spaced?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({ size = 's', spaced = false, ...restProps }: CardGridProps) => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['CardGrid'],\n        'vkuiInternalCardGrid',\n        spaced && styles['CardGrid--spaced'],\n        stylesSize[size],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n      )}\n    />\n  );\n};\n"],"names":["CardGrid","sizeXClassNames","none","SizeType","COMPACT","stylesSize","s","m","l","size","spaced","restProps","useAdaptivity","sizeX","RootComponent","baseClassName","classNames","REGULAR"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;;+DA9BU;oBACI;6BACG;0BACL;6BAEK;AAG9B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAGnB,IAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAaO,IAAMR,WAAW;6BAAGS,MAAAA,gCAAO,0CAAKC,QAAAA,oCAAS,uBAAUC;QAA/BF;QAAYC;;IACrC,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,4BAAa,8CACRH;QACJI,eAAeC,IAAAA,gBAAU,kBAEvB,wBACAN,kCACAL,UAAU,CAACI,KAAK,EAChBI,UAAUV,oBAAQ,CAACc,OAAO,IAAIhB,eAAe,CAACY,MAAM;;AAI5D"}

package/dist/cjs/components/CardScroll/CardScroll.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';
-export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardScrollProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.
      */
@@ -11,4 +12,4 @@ export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
  */
-export declare const CardScroll: ({ children, size, showArrows, withSpaces, className, ...restProps }: CardScrollProps) => React.JSX.Element;
+export declare const CardScroll: ({ children, size, showArrows, withSpaces, ...restProps }: CardScrollProps) => React.JSX.Element;

package/dist/cjs/components/CardScroll/CardScroll.js

@@ -17,6 +17,12 @@ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _dom = require("../../lib/dom");
 var _HorizontalScroll = require("../HorizontalScroll/HorizontalScroll");
+var _RootComponent = require("../RootComponent/RootComponent");
+var stylesSize = {
+    s: "vkuiInternalCardScroll--size-s",
+    m: "vkuiInternalCardScroll--size-m",
+    l: "vkuiInternalCardScroll--size-l"
+};
 var CardScroll = function(_param) {
     var getScrollToLeft = function getScrollToLeft(offset) {
         if (!refContainer.current || !gapRef.current) {
@@ -52,22 +58,17 @@ var CardScroll = function(_param) {
         }
         return slide.offsetLeft - gapRef.current.offsetWidth;
     };
-    var children = _param.children, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_withSpaces = _param.withSpaces, withSpaces = _param_withSpaces === void 0 ? true : _param_withSpaces, className = _param.className, restProps = _object_without_properties._(_param, [
+    var children = _param.children, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_withSpaces = _param.withSpaces, withSpaces = _param_withSpaces === void 0 ? true : _param_withSpaces, restProps = _object_without_properties._(_param, [
         "children",
         "size",
         "showArrows",
-        "withSpaces",
-        "className"
+        "withSpaces"
     ]);
     var refContainer = _react.useRef(null);
     var gapRef = _react.useRef(null);
     var window = (0, _dom.useDOM)().window;
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiCardScroll", "vkuiInternalCardScroll", size !== false && ({
-            s: "vkuiInternalCardScroll--size-s",
-            m: "vkuiInternalCardScroll--size-m",
-            l: "vkuiInternalCardScroll--size-l"
-        })[size], withSpaces && "vkuiCardScroll--withSpaces", className)
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiCardScroll", "vkuiInternalCardScroll", size !== false && stylesSize[size], withSpaces && "vkuiCardScroll--withSpaces")
     }), /*#__PURE__*/ _react.createElement(_HorizontalScroll.HorizontalScroll, {
         getScrollToLeft: getScrollToLeft,
         getScrollToRight: getScrollToRight,

package/dist/cjs/components/CardScroll/CardScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useDOM } from '../../lib/dom';\nimport { HorizontalScroll, HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport styles from './CardScroll.module.css';\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: 's' | 'm' | 'l' | false;\n  showArrows?: HorizontalScrollProps['showArrows'];\n  withSpaces?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = 's',\n  showArrows = true,\n  withSpaces = true,\n  className,\n  ...restProps\n}: CardScrollProps) => {\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const gapRef = React.useRef<HTMLDivElement>(null);\n\n  const { window } = useDOM();\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n      (el: HTMLElement) =>\n        el.offsetLeft +\n          el.offsetWidth +\n          parseInt(window!.getComputedStyle(el).marginRight) -\n          offset >=\n        0,\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    if (slideIndex === 0) {\n      return 0;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n    const scrollTo =\n      slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n    if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(\n      refContainer.current.children,\n      (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,\n    ) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    return slide.offsetLeft - gapRef.current.offsetWidth;\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['CardScroll'],\n        'vkuiInternalCardScroll',\n        size !== false &&\n          {\n            s: 'vkuiInternalCardScroll--size-s',\n            m: 'vkuiInternalCardScroll--size-m',\n            l: 'vkuiInternalCardScroll--size-l',\n          }[size],\n        withSpaces && styles['CardScroll--withSpaces'],\n        className,\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n      >\n        <div className={styles['CardScroll__in']} ref={refContainer}>\n          <span className={styles['CardScroll__gap']} ref={gapRef} />\n          {children}\n          <span className={styles['CardScroll__gap']} />\n        </div>\n      </HorizontalScroll>\n    </div>\n  );\n};\n"],"names":["CardScroll","getScrollToLeft","offset","refContainer","current","gapRef","containerWidth","offsetWidth","slideIndex","children","findIndex","el","offsetLeft","parseInt","window","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","size","showArrows","withSpaces","className","restProps","React","useRef","useDOM","div","classNames","s","m","l","HorizontalScroll","ref","span"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;;;+DAlBU;oBACI;mBACJ;gCACiC;AAejD,IAAMA,aAAa;QAafC,kBAAT,SAASA,gBAAgBC,MAAc;QACrC,IAAI,CAACC,aAAaC,OAAO,IAAI,CAACC,OAAOD,OAAO,EAAE;YAC5C,OAAOF;QACT;QACA,IAAMI,iBAAiBH,aAAaC,OAAO,CAACG,WAAW;QACvD,IAAMC,aAAa,AAAE,uBAAGL,aAAaC,OAAO,CAACK,QAAQ,EAAoBC,SAAS,CAChF,SAACC;mBACCA,GAAGC,UAAU,GACXD,GAAGJ,WAAW,GACdM,SAASC,OAAQC,gBAAgB,CAACJ,IAAIK,WAAW,IACjDd,UACF;;QAGJ,IAAIM,eAAe,CAAC,GAAG;YACrB,OAAON;QACT;QAEA,IAAIM,eAAe,GAAG;YACpB,OAAO;QACT;QAEA,IAAMS,QAAQd,aAAaC,OAAO,CAACK,QAAQ,CAACD,WAAW;QAEvD,IAAMU,WACJD,MAAML,UAAU,GAAIN,CAAAA,iBAAiBW,MAAMV,WAAW,AAAD,IAAKF,OAAOD,OAAO,CAACG,WAAW;QAEtF,IAAIW,YAAY,IAAIb,OAAOD,OAAO,CAACG,WAAW,EAAE;YAC9C,OAAO;QACT;QAEA,OAAOW;IACT;QAESC,mBAAT,SAASA,iBAAiBjB,MAAc;QACtC,IAAI,CAACC,aAAaC,OAAO,IAAI,CAACC,OAAOD,OAAO,EAAE;YAC5C,OAAOF;QACT;QAEA,IAAMI,iBAAiBH,aAAaC,OAAO,CAACG,WAAW;QACvD,IAAMU,QAAQG,MAAMC,SAAS,CAACC,IAAI,CAACC,IAAI,CACrCpB,aAAaC,OAAO,CAACK,QAAQ,EAC7B,SAACE;mBAAoBA,GAAGC,UAAU,GAAGD,GAAGJ,WAAW,GAAGL,SAASI;;QAGjE,IAAI,CAACW,OAAO;YACV,OAAOf;QACT;QAEA,OAAOe,MAAML,UAAU,GAAGP,OAAOD,OAAO,CAACG,WAAW;IACtD;QA9DAE,kBAAAA,+BACAe,MAAAA,gCAAO,8CACPC,YAAAA,4CAAa,qDACbC,YAAAA,4CAAa,0BACbC,mBAAAA,WACGC;QALHnB;QACAe;QACAC;QACAC;QACAC;;IAGA,IAAMxB,eAAe0B,OAAMC,MAAM,CAAiB;IAClD,IAAMzB,SAASwB,OAAMC,MAAM,CAAiB;IAE5C,IAAM,AAAEhB,SAAWiB,IAAAA,WAAM,IAAjBjB;IAsDR,qBACE,qBAACkB,mDACKJ;QACJD,WAAWM,IAAAA,gBAAU,oBAEnB,0BACAT,SAAS,SACP,CAAA;YACEU,GAAG;YACHC,GAAG;YACHC,GAAG;QACL,CAAA,CAAC,CAACZ,KAAK,EACTE,4CACAC;sBAGF,qBAACU,kCAAgB;QACfpC,iBAAiBA;QACjBkB,kBAAkBA;QAClBM,YAAYA;qBAEZ,qBAACO;QAAIL,SAAS;QAA4BW,KAAKnC;qBAC7C,qBAACoC;QAAKZ,SAAS;QAA6BW,KAAKjC;QAChDI,wBACD,qBAAC8B;QAAKZ,SAAS;;AAKzB"}
+{"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { HorizontalScroll, HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardScroll.module.css';\n\nconst stylesSize = {\n  s: 'vkuiInternalCardScroll--size-s',\n  m: 'vkuiInternalCardScroll--size-m',\n  l: 'vkuiInternalCardScroll--size-l',\n};\n\nexport interface CardScrollProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: 's' | 'm' | 'l' | false;\n  showArrows?: HorizontalScrollProps['showArrows'];\n  withSpaces?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = 's',\n  showArrows = true,\n  withSpaces = true,\n  ...restProps\n}: CardScrollProps) => {\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const gapRef = React.useRef<HTMLDivElement>(null);\n\n  const { window } = useDOM();\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n      (el: HTMLElement) =>\n        el.offsetLeft +\n          el.offsetWidth +\n          parseInt(window!.getComputedStyle(el).marginRight) -\n          offset >=\n        0,\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    if (slideIndex === 0) {\n      return 0;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n    const scrollTo =\n      slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n    if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(\n      refContainer.current.children,\n      (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,\n    ) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    return slide.offsetLeft - gapRef.current.offsetWidth;\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['CardScroll'],\n        'vkuiInternalCardScroll',\n        size !== false && stylesSize[size],\n        withSpaces && styles['CardScroll--withSpaces'],\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n      >\n        <div className={styles['CardScroll__in']} ref={refContainer}>\n          <span className={styles['CardScroll__gap']} ref={gapRef} />\n          {children}\n          <span className={styles['CardScroll__gap']} />\n        </div>\n      </HorizontalScroll>\n    </RootComponent>\n  );\n};\n"],"names":["CardScroll","stylesSize","s","m","l","getScrollToLeft","offset","refContainer","current","gapRef","containerWidth","offsetWidth","slideIndex","children","findIndex","el","offsetLeft","parseInt","window","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","size","showArrows","withSpaces","restProps","React","useRef","useDOM","RootComponent","baseClassName","classNames","HorizontalScroll","div","className","ref","span"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;;+DA1BU;oBACI;mBACJ;gCAEiC;6BAC1B;AAG9B,IAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAcO,IAAMJ,aAAa;QAYfK,kBAAT,SAASA,gBAAgBC,MAAc;QACrC,IAAI,CAACC,aAAaC,OAAO,IAAI,CAACC,OAAOD,OAAO,EAAE;YAC5C,OAAOF;QACT;QACA,IAAMI,iBAAiBH,aAAaC,OAAO,CAACG,WAAW;QACvD,IAAMC,aAAa,AAAE,uBAAGL,aAAaC,OAAO,CAACK,QAAQ,EAAoBC,SAAS,CAChF,SAACC;mBACCA,GAAGC,UAAU,GACXD,GAAGJ,WAAW,GACdM,SAASC,OAAQC,gBAAgB,CAACJ,IAAIK,WAAW,IACjDd,UACF;;QAGJ,IAAIM,eAAe,CAAC,GAAG;YACrB,OAAON;QACT;QAEA,IAAIM,eAAe,GAAG;YACpB,OAAO;QACT;QAEA,IAAMS,QAAQd,aAAaC,OAAO,CAACK,QAAQ,CAACD,WAAW;QAEvD,IAAMU,WACJD,MAAML,UAAU,GAAIN,CAAAA,iBAAiBW,MAAMV,WAAW,AAAD,IAAKF,OAAOD,OAAO,CAACG,WAAW;QAEtF,IAAIW,YAAY,IAAIb,OAAOD,OAAO,CAACG,WAAW,EAAE;YAC9C,OAAO;QACT;QAEA,OAAOW;IACT;QAESC,mBAAT,SAASA,iBAAiBjB,MAAc;QACtC,IAAI,CAACC,aAAaC,OAAO,IAAI,CAACC,OAAOD,OAAO,EAAE;YAC5C,OAAOF;QACT;QAEA,IAAMI,iBAAiBH,aAAaC,OAAO,CAACG,WAAW;QACvD,IAAMU,QAAQG,MAAMC,SAAS,CAACC,IAAI,CAACC,IAAI,CACrCpB,aAAaC,OAAO,CAACK,QAAQ,EAC7B,SAACE;mBAAoBA,GAAGC,UAAU,GAAGD,GAAGJ,WAAW,GAAGL,SAASI;;QAGjE,IAAI,CAACW,OAAO;YACV,OAAOf;QACT;QAEA,OAAOe,MAAML,UAAU,GAAGP,OAAOD,OAAO,CAACG,WAAW;IACtD;QA7DAE,kBAAAA,+BACAe,MAAAA,gCAAO,8CACPC,YAAAA,4CAAa,qDACbC,YAAAA,4CAAa,0BACVC;QAJHlB;QACAe;QACAC;QACAC;;IAGA,IAAMvB,eAAeyB,OAAMC,MAAM,CAAiB;IAClD,IAAMxB,SAASuB,OAAMC,MAAM,CAAiB;IAE5C,IAAM,AAAEf,SAAWgB,IAAAA,WAAM,IAAjBhB;IAsDR,qBACE,qBAACiB,4BAAa,8CACRJ;QACJK,eAAeC,IAAAA,gBAAU,oBAEvB,0BACAT,SAAS,SAAS3B,UAAU,CAAC2B,KAAK,EAClCE;sBAGF,qBAACQ,kCAAgB;QACfjC,iBAAiBA;QACjBkB,kBAAkBA;QAClBM,YAAYA;qBAEZ,qBAACU;QAAIC,SAAS;QAA4BC,KAAKlC;qBAC7C,qBAACmC;QAAKF,SAAS;QAA6BC,KAAKhC;QAChDI,wBACD,qBAAC6B;QAAKF,SAAS;;AAKzB"}

package/dist/cjs/components/Cell/CellDragger/CellDragger.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../../types';
 import { DraggableProps } from '../useDraggable';
-type CellDraggerProps = DraggableProps & Omit<React.HTMLAttributes<HTMLElement>, keyof DraggableProps>;
+type CellDraggerProps = DraggableProps & Omit<HTMLAttributesWithRootRef<HTMLElement>, keyof DraggableProps>;
 export declare const CellDragger: ({ onDragStart, onDragMove, onDragEnd, onClick, className, ...restProps }: CellDraggerProps) => React.JSX.Element;
 export {};

package/dist/cjs/components/Cell/CellDragger/CellDragger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps &\n  Omit<React.HTMLAttributes<HTMLElement>, keyof DraggableProps>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  onClick,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    event.preventDefault();\n    if (onClick) {\n      onClick(event);\n    }\n  };\n\n  return (\n    <Touch\n      className={classNames(styles['CellDragger'], className)}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={handleClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"names":["CellDragger","onDragStart","onDragMove","onDragEnd","onClick","className","restProps","platform","usePlatform","handleClick","event","preventDefault","Touch","classNames","onStart","onMoveY","onEnd","Platform","IOS","Icon24ReorderIos","Icon24Reorder"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;+DAZU;qBACyB;oBACrB;2BACC;wBACH;qBACH;AAOf,IAAMA,cAAc;QACzBC,qBAAAA,aACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,cAAc,SAACC;QACnBA,MAAMC,cAAc;QACpB,IAAIP,SAAS;YACXA,QAAQM;QACV;IACF;IAEA,qBACE,qBAACE,YAAK;QACJP,WAAWQ,IAAAA,gBAAU,qBAAwBR;QAC7CS,SAASb;QACTc,SAASb;QACTc,OAAOb;QACPC,SAASK;OACLH,YAEHC,aAAaU,kBAAQ,CAACC,GAAG,iBAAG,qBAACC,uBAAgB,wBAAM,qBAACC,oBAAa;AAGxE"}
+{"version":3,"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { HTMLAttributesWithRootRef } from '../../../types';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps &\n  Omit<HTMLAttributesWithRootRef<HTMLElement>, keyof DraggableProps>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  onClick,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    event.preventDefault();\n    if (onClick) {\n      onClick(event);\n    }\n  };\n\n  return (\n    <Touch\n      className={classNames(styles['CellDragger'], className)}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={handleClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"names":["CellDragger","onDragStart","onDragMove","onDragEnd","onClick","className","restProps","platform","usePlatform","handleClick","event","preventDefault","Touch","classNames","onStart","onMoveY","onEnd","Platform","IOS","Icon24ReorderIos","Icon24Reorder"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;;+DAbU;qBACyB;oBACrB;2BACC;wBACH;qBAEH;AAOf,IAAMA,cAAc;QACzBC,qBAAAA,aACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,cAAc,SAACC;QACnBA,MAAMC,cAAc;QACpB,IAAIP,SAAS;YACXA,QAAQM;QACV;IACF;IAEA,qBACE,qBAACE,YAAK;QACJP,WAAWQ,IAAAA,gBAAU,qBAAwBR;QAC7CS,SAASb;QACTc,SAASb;QACTc,OAAOb;QACPC,SAASK;OACLH,YAEHC,aAAaU,kBAAQ,CAACC,GAAG,iBAAG,qBAACC,uBAAgB,wBAAM,qBAACC,oBAAa;AAGxE"}

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -27,10 +27,9 @@ var _Tappable = require("../Tappable/Tappable");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _Text = require("../Typography/Text/Text");
 var _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
-var _obj;
-var sizeYClassNames = (_obj = {
+var sizeYClassNames = _define_property._({
     none: "vkuiCheckbox--sizeY-none"
-}, _define_property._(_obj, _adaptivity.SizeType.COMPACT, "vkuiCheckbox--sizeY-compact"), _define_property._(_obj, _adaptivity.SizeType.REGULAR, "vkuiCheckbox--sizeY-regular"), _obj);
+}, _adaptivity.SizeType.COMPACT, "vkuiCheckbox--sizeY-compact");
 var warn = (0, _warnOnce.warnOnce)("Checkbox");
 var Checkbox = function(_param) {
     var children = _param.children, className = _param.className, style = _param.style, getRootRef = _param.getRootRef, getRef = _param.getRef, description = _param.description, indeterminate = _param.indeterminate, defaultIndeterminate = _param.defaultIndeterminate, hoverMode = _param.hoverMode, activeMode = _param.activeMode, hasHover = _param.hasHover, hasActive = _param.hasActive, focusVisibleMode = _param.focusVisibleMode, onChange = _param.onChange, titleAfter = _param.titleAfter, restProps = _object_without_properties._(_param, [
@@ -92,7 +91,7 @@ var Checkbox = function(_param) {
     }
     return /*#__PURE__*/ _react.createElement(_Tappable.Tappable, {
         Component: "label",
-        className: (0, _vkjs.classNames)("vkuiCheckbox", platform === _platform.Platform.VKCOM && "vkuiCheckbox--vkcom", sizeYClassNames[sizeY], !((0, _vkjs.hasReactNode)(children) || (0, _vkjs.hasReactNode)(description)) && "vkuiCheckbox--simple", className),
+        className: (0, _vkjs.classNames)("vkuiCheckbox", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], !((0, _vkjs.hasReactNode)(children) || (0, _vkjs.hasReactNode)(description)) && "vkuiCheckbox--simple", className),
         style: style,
         disabled: restProps.disabled,
         activeEffectDelay: platform === _platform.Platform.IOS ? 100 : _Tappable.ACTIVE_EFFECT_DELAY,