@vkontakte/vkui 5.7.2 → 5.8.0

package/dist/components/CalendarDays/CalendarDays.js

@@ -3,14 +3,16 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useExternRef } from "../../hooks/useExternRef";
 import { useTodayDate } from "../../hooks/useTodayDate";
 import { getDaysNames, getWeeks } from "../../lib/calendar";
 import { isSameDay, isSameMonth } from "../../lib/date";
 import { CalendarDay } from "../CalendarDay/CalendarDay";
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Footnote } from "../Typography/Footnote/Footnote";
 export var CalendarDays = function(_param) {
-    var viewDate = _param.viewDate, value = _param.value, weekStartsOn = _param.weekStartsOn, onDayChange = _param.onDayChange, isDaySelected = _param.isDaySelected, isDayActive = _param.isDayActive, isDaySelectionEnd = _param.isDaySelectionEnd, isDaySelectionStart = _param.isDaySelectionStart, onDayEnter = _param.onDayEnter, onDayLeave = _param.onDayLeave, isDayHinted = _param.isDayHinted, isHintedDaySelectionStart = _param.isHintedDaySelectionStart, isHintedDaySelectionEnd = _param.isHintedDaySelectionEnd, isDayFocused = _param.isDayFocused, isDayDisabled = _param.isDayDisabled, size = _param.size, _param_showNeighboringMonth = _param.showNeighboringMonth, showNeighboringMonth = _param_showNeighboringMonth === void 0 ? false : _param_showNeighboringMonth, dayProps = _param.dayProps, className = _param.className, _param_listenDayChangesForUpdate = _param.listenDayChangesForUpdate, listenDayChangesForUpdate = _param_listenDayChangesForUpdate === void 0 ? false : _param_listenDayChangesForUpdate, props = _object_without_properties(_param, [
+    var viewDate = _param.viewDate, value = _param.value, weekStartsOn = _param.weekStartsOn, onDayChange = _param.onDayChange, isDaySelected = _param.isDaySelected, isDayActive = _param.isDayActive, isDaySelectionEnd = _param.isDaySelectionEnd, isDaySelectionStart = _param.isDaySelectionStart, onDayEnter = _param.onDayEnter, onDayLeave = _param.onDayLeave, isDayHinted = _param.isDayHinted, isHintedDaySelectionStart = _param.isHintedDaySelectionStart, isHintedDaySelectionEnd = _param.isHintedDaySelectionEnd, isDayFocused = _param.isDayFocused, isDayDisabled = _param.isDayDisabled, size = _param.size, _param_showNeighboringMonth = _param.showNeighboringMonth, showNeighboringMonth = _param_showNeighboringMonth === void 0 ? false : _param_showNeighboringMonth, dayProps = _param.dayProps, _param_listenDayChangesForUpdate = _param.listenDayChangesForUpdate, listenDayChangesForUpdate = _param_listenDayChangesForUpdate === void 0 ? false : _param_listenDayChangesForUpdate, getRootRef = _param.getRootRef, props = _object_without_properties(_param, [
         "viewDate",
         "value",
         "weekStartsOn",
@@ -29,11 +31,11 @@ export var CalendarDays = function(_param) {
         "size",
         "showNeighboringMonth",
         "dayProps",
-        "className",
-        "listenDayChangesForUpdate"
+        "listenDayChangesForUpdate",
+        "getRootRef"
     ]);
     var locale = useConfigProvider().locale;
-    var ref = React.useRef(null);
+    var ref = useExternRef(getRootRef);
     var now = useTodayDate(listenDayChangesForUpdate);
     var weeks = React.useMemo(function() {
         return getWeeks(viewDate, weekStartsOn);
@@ -53,11 +55,12 @@ export var CalendarDays = function(_param) {
         onDayChange(date);
         (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
     }, [
-        onDayChange
+        onDayChange,
+        ref
     ]);
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, props), {
-        className: classNames("vkuiCalendarDays", className),
-        ref: ref
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, props), {
+        baseClassName: "vkuiCalendarDays",
+        getRootRef: ref
     }), /*#__PURE__*/ React.createElement("div", {
         className: classNames("vkuiCalendarDays__row", size === "s" && "vkuiCalendarDays__row--size-s")
     }, daysNames.map(function(dayName) {

package/dist/components/CalendarDays/CalendarDays.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useTodayDate } from '../../hooks/useTodayDate';\nimport { getDaysNames, getWeeks } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { CalendarDay, CalendarDayElementProps } from '../CalendarDay/CalendarDay';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './CalendarDays.module.css';\n\nexport interface CalendarDaysProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  value?: Date | Array<Date | null>;\n  viewDate: Date;\n  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  dayProps?: CalendarDayElementProps;\n  listenDayChangesForUpdate?: boolean;\n  onDayChange(value: Date): void;\n  isDayDisabled(value: Date): boolean;\n  isDaySelectionStart(value: Date, dayOfWeek: number): boolean;\n  isDaySelectionEnd(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionStart?(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionEnd?(value: Date, dayOfWeek: number): boolean;\n  isDayActive(value: Date): boolean;\n  isDayHinted?(value: Date): boolean;\n  isDaySelected?(value: Date): boolean;\n  isDayFocused(value: Date): boolean;\n  onDayEnter?(value: Date): void;\n  onDayLeave?(value: Date): void;\n}\n\nexport const CalendarDays = ({\n  viewDate,\n  value,\n  weekStartsOn,\n  onDayChange,\n  isDaySelected,\n  isDayActive,\n  isDaySelectionEnd,\n  isDaySelectionStart,\n  onDayEnter,\n  onDayLeave,\n  isDayHinted,\n  isHintedDaySelectionStart,\n  isHintedDaySelectionEnd,\n  isDayFocused,\n  isDayDisabled,\n  size,\n  showNeighboringMonth = false,\n  dayProps,\n  className,\n  listenDayChangesForUpdate = false,\n  ...props\n}: CalendarDaysProps) => {\n  const { locale } = useConfigProvider();\n  const ref = React.useRef<HTMLDivElement>(null);\n  const now = useTodayDate(listenDayChangesForUpdate);\n\n  const weeks = React.useMemo(() => getWeeks(viewDate, weekStartsOn), [weekStartsOn, viewDate]);\n\n  const daysNames = React.useMemo(\n    () => getDaysNames(now, weekStartsOn, locale),\n    [locale, now, weekStartsOn],\n  );\n\n  const handleDayChange = React.useCallback(\n    (date: Date) => {\n      onDayChange(date);\n\n      ref.current?.focus();\n    },\n    [onDayChange],\n  );\n\n  return (\n    <div {...props} className={classNames(styles['CalendarDays'], className)} ref={ref}>\n      <div\n        className={classNames(\n          styles['CalendarDays__row'],\n          size === 's' && styles['CalendarDays__row--size-s'],\n        )}\n      >\n        {daysNames.map((dayName) => (\n          <Footnote key={dayName} className={styles['CalendarDays__weekday']}>\n            {dayName}\n          </Footnote>\n        ))}\n      </div>\n\n      {weeks.map((week, i) => (\n        <div\n          className={classNames(\n            styles['CalendarDays__row'],\n            size === 's' && styles['CalendarDays__row--size-s'],\n          )}\n          key={i}\n        >\n          {week.map((day, i) => {\n            const sameMonth = isSameMonth(day, viewDate);\n            return (\n              <CalendarDay\n                key={day.toISOString()}\n                day={day}\n                today={isSameDay(day, now)}\n                active={isDayActive(day)}\n                onChange={handleDayChange}\n                hidden={!showNeighboringMonth && !sameMonth}\n                disabled={isDayDisabled(day)}\n                selectionStart={isDaySelectionStart(day, i)}\n                selectionEnd={isDaySelectionEnd(day, i)}\n                hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}\n                hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}\n                selected={isDaySelected?.(day)}\n                focused={isDayFocused(day)}\n                onEnter={onDayEnter}\n                onLeave={onDayLeave}\n                hinted={isDayHinted?.(day)}\n                sameMonth={sameMonth}\n                size={size}\n                {...dayProps}\n              />\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["React","classNames","useTodayDate","getDaysNames","getWeeks","isSameDay","isSameMonth","CalendarDay","useConfigProvider","Footnote","CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","className","listenDayChangesForUpdate","props","locale","ref","useRef","now","weeks","useMemo","daysNames","handleDayChange","useCallback","date","current","focus","div","map","dayName","key","week","i","day","sameMonth","toISOString","today","active","onChange","hidden","disabled","selectionStart","selectionEnd","hintedSelectionStart","hintedSelectionEnd","selected","focused","onEnter","onLeave","hinted"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useTodayDate } from '../../hooks/useTodayDate';\nimport { getDaysNames, getWeeks } from '../../lib/calendar';\nimport { isSameDay, isSameMonth } from '../../lib/date';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDay, CalendarDayElementProps } from '../CalendarDay/CalendarDay';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './CalendarDays.module.css';\n\nexport interface CalendarDaysProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n  value?: Date | Array<Date | null>;\n  viewDate: Date;\n  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  dayProps?: CalendarDayElementProps;\n  listenDayChangesForUpdate?: boolean;\n  onDayChange(value: Date): void;\n  isDayDisabled(value: Date): boolean;\n  isDaySelectionStart(value: Date, dayOfWeek: number): boolean;\n  isDaySelectionEnd(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionStart?(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionEnd?(value: Date, dayOfWeek: number): boolean;\n  isDayActive(value: Date): boolean;\n  isDayHinted?(value: Date): boolean;\n  isDaySelected?(value: Date): boolean;\n  isDayFocused(value: Date): boolean;\n  onDayEnter?(value: Date): void;\n  onDayLeave?(value: Date): void;\n}\n\nexport const CalendarDays = ({\n  viewDate,\n  value,\n  weekStartsOn,\n  onDayChange,\n  isDaySelected,\n  isDayActive,\n  isDaySelectionEnd,\n  isDaySelectionStart,\n  onDayEnter,\n  onDayLeave,\n  isDayHinted,\n  isHintedDaySelectionStart,\n  isHintedDaySelectionEnd,\n  isDayFocused,\n  isDayDisabled,\n  size,\n  showNeighboringMonth = false,\n  dayProps,\n  listenDayChangesForUpdate = false,\n  getRootRef,\n  ...props\n}: CalendarDaysProps) => {\n  const { locale } = useConfigProvider();\n  const ref = useExternRef(getRootRef);\n  const now = useTodayDate(listenDayChangesForUpdate);\n\n  const weeks = React.useMemo(() => getWeeks(viewDate, weekStartsOn), [weekStartsOn, viewDate]);\n\n  const daysNames = React.useMemo(\n    () => getDaysNames(now, weekStartsOn, locale),\n    [locale, now, weekStartsOn],\n  );\n\n  const handleDayChange = React.useCallback(\n    (date: Date) => {\n      onDayChange(date);\n\n      ref.current?.focus();\n    },\n    [onDayChange, ref],\n  );\n\n  return (\n    <RootComponent {...props} baseClassName={styles['CalendarDays']} getRootRef={ref}>\n      <div\n        className={classNames(\n          styles['CalendarDays__row'],\n          size === 's' && styles['CalendarDays__row--size-s'],\n        )}\n      >\n        {daysNames.map((dayName) => (\n          <Footnote key={dayName} className={styles['CalendarDays__weekday']}>\n            {dayName}\n          </Footnote>\n        ))}\n      </div>\n\n      {weeks.map((week, i) => (\n        <div\n          className={classNames(\n            styles['CalendarDays__row'],\n            size === 's' && styles['CalendarDays__row--size-s'],\n          )}\n          key={i}\n        >\n          {week.map((day, i) => {\n            const sameMonth = isSameMonth(day, viewDate);\n            return (\n              <CalendarDay\n                key={day.toISOString()}\n                day={day}\n                today={isSameDay(day, now)}\n                active={isDayActive(day)}\n                onChange={handleDayChange}\n                hidden={!showNeighboringMonth && !sameMonth}\n                disabled={isDayDisabled(day)}\n                selectionStart={isDaySelectionStart(day, i)}\n                selectionEnd={isDaySelectionEnd(day, i)}\n                hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}\n                hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}\n                selected={isDaySelected?.(day)}\n                focused={isDayFocused(day)}\n                onEnter={onDayEnter}\n                onLeave={onDayLeave}\n                hinted={isDayHinted?.(day)}\n                sameMonth={sameMonth}\n                size={size}\n                {...dayProps}\n              />\n            );\n          })}\n        </div>\n      ))}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useExternRef","useTodayDate","getDaysNames","getWeeks","isSameDay","isSameMonth","CalendarDay","useConfigProvider","RootComponent","Footnote","CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","listenDayChangesForUpdate","getRootRef","props","locale","ref","now","weeks","useMemo","daysNames","handleDayChange","useCallback","date","current","focus","baseClassName","div","className","map","dayName","key","week","i","day","sameMonth","toISOString","today","active","onChange","hidden","disabled","selectionStart","selectionEnd","hintedSelectionStart","hintedSelectionEnd","selected","focused","onEnter","onLeave","hinted"],"mappings":"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"}

package/dist/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/components/CalendarHeader/CalendarHeader.js

@@ -9,18 +9,35 @@ import { addMonths, setMonth, setYear, subMonths } from "../../lib/date";
 import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider";
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
 import { CustomSelect } from "../CustomSelect/CustomSelect";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Tappable } from "../Tappable/Tappable";
 import { Paragraph } from "../Typography/Paragraph/Paragraph";
-export 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(Icon20ChevronLeftOutline, {
+export 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(Icon20ChevronLeftOutline, {
         className: "vkuiCalendarHeader__nav-icon--accent",
         width: 30,
         height: 30
-    }) : _param_prevMonthIcon, _param_nextMonthIcon = param.nextMonthIcon, nextMonthIcon = _param_nextMonthIcon === void 0 ? /*#__PURE__*/ React.createElement(Icon20ChevronRightOutline, {
+    }) : _param_prevMonthIcon, _param_nextMonthIcon = _param.nextMonthIcon, nextMonthIcon = _param_nextMonthIcon === void 0 ? /*#__PURE__*/ React.createElement(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 = useConfigProvider().locale;
     var onMonthsChange = React.useCallback(function(event) {
         return onChange(setMonth(viewDate, Number(event.target.value)));
@@ -63,9 +80,9 @@ export var CalendarHeader = function(param) {
     var nextMonthClassName = nextMonthProps.className, restNextMonthProps = _object_without_properties(nextMonthProps, [
         "className"
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames("vkuiCalendarHeader", className)
-    }, prevMonth && /*#__PURE__*/ React.createElement(AdaptivityProvider, {
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+        baseClassName: "vkuiCalendarHeader"
+    }, restProps), prevMonth && /*#__PURE__*/ React.createElement(AdaptivityProvider, {
         sizeX: SizeType.REGULAR
     }, /*#__PURE__*/ React.createElement(Tappable, _object_spread({
         className: classNames("vkuiCalendarHeader__nav-icon", "vkuiCalendarHeader__nav-icon-prev", prevMonthClassName),

package/dist/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":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","SizeType","getMonths","getYears","addMonths","setMonth","setYear","subMonths","AdaptivityProvider","useConfigProvider","CustomSelect","Tappable","Paragraph","CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","width","height","nextMonthIcon","locale","onMonthsChange","useCallback","event","Number","target","value","onYearChange","months","useMemo","map","label","span","currentYear","getFullYear","years","formatter","Intl","DateTimeFormat","year","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","div","sizeX","REGULAR","onClick","aria-label","format","weight","sizeY","COMPACT","getMonth","options","dropdownOffsetDistance","fixDropdownWidth","icon","forceDropdownPortal","selectType"],"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":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","SizeType","getMonths","getYears","addMonths","setMonth","setYear","subMonths","AdaptivityProvider","useConfigProvider","CustomSelect","RootComponent","Tappable","Paragraph","CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","className","width","height","nextMonthIcon","restProps","locale","onMonthsChange","useCallback","event","Number","target","value","onYearChange","months","useMemo","map","label","span","currentYear","getFullYear","years","formatter","Intl","DateTimeFormat","year","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","baseClassName","sizeX","REGULAR","onClick","aria-label","format","weight","sizeY","COMPACT","div","getMonth","options","dropdownOffsetDistance","fixDropdownWidth","icon","forceDropdownPortal","selectType"],"mappings":"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"}

package/dist/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/components/CalendarRange/CalendarRange.js

@@ -3,12 +3,12 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
 import { useCalendar } from "../../hooks/useCalendar";
 import { isFirstDay, isLastDay, navigateDate, setTimeEqual } from "../../lib/calendar";
 import { addMonths, endOfDay, isAfter, isBefore, isSameDay, isSameMonth, isWithinInterval, startOfDay } from "../../lib/date";
 import { CalendarDays } from "../CalendarDays/CalendarDays";
 import { CalendarHeader } from "../CalendarHeader/CalendarHeader";
+import { RootComponent } from "../RootComponent/RootComponent";
 var getIsDaySelected = function(day, value) {
     var _value;
     if (!((_value = value) === null || _value === void 0 ? void 0 : _value[0]) || !value[1]) {
@@ -19,7 +19,7 @@ var getIsDaySelected = function(day, value) {
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
  */ export 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",
@@ -36,7 +36,6 @@ var getIsDaySelected = function(day, value) {
         "changeDayAriaLabel",
         "prevMonthIcon",
         "nextMonthIcon",
-        "className",
         "listenDayChangesForUpdate"
     ]);
     var _useCalendar = useCalendar({
@@ -157,9 +156,8 @@ var getIsDaySelected = function(day, value) {
     }, [
         hintedDate
     ]);
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, props), {
-        ref: getRootRef,
-        className: classNames("vkuiCalendarRange", className)
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, props), {
+        baseClassName: "vkuiCalendarRange"
     }), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiCalendarRange__inner"
     }, /*#__PURE__*/ React.createElement(CalendarHeader, {

package/dist/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":["React","classNames","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","addMonths","endOfDay","isAfter","isBefore","isSameDay","isSameMonth","isWithinInterval","startOfDay","CalendarDays","CalendarHeader","getIsDaySelected","day","value","Boolean","CalendarRange","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","getRootRef","disablePickers","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","prevMonthIcon","nextMonthIcon","className","listenDayChangesForUpdate","props","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","useState","hintedDate","setHintedDate","secondViewDate","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","getNewValue","date","start","end","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","div","ref","nextMonth","onPrevMonth","onKeyDown","aria-label","prevMonth","onNextMonth","tabIndex","onBlur"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,QAAQ,qBAAqB;AACvF,SACEC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,WAAW,EACXC,gBAAgB,EAChBC,UAAU,QACL,iBAAiB;AAExB,SAASC,YAAY,QAA2B,+BAA+B;AAC/E,SAASC,cAAc,QAA6B,mCAAmC;AA2BvF,IAAMC,mBAAmB,SAACC,KAAWC;QAC9BA;IAAL,IAAI,GAACA,SAAAA,mBAAAA,6BAAAA,MAAO,CAAC,EAAE,KAAI,CAACA,KAAK,CAAC,EAAE,EAAE;QAC5B,OAAO;IACT;IAEA,OAAOC,QAAQP,iBAAiBK,KAAKJ,WAAWK,KAAK,CAAC,EAAE,GAAGX,SAASW,KAAK,CAAC,EAAE;AAC9E;AAEA;;CAEC,GACD,OAAO,IAAME,gBAAgB;QAC3BF,eAAAA,OACAG,kBAAAA,UACAC,qBAAAA,aACAC,uBAAAA,eACAC,2BAAAA,mBACAC,iBAAAA,sCACAC,cAAAA,gDAAe,yBACfC,oBAAAA,YACAC,wBAAAA,gBACAC,4BAAAA,oBACAC,4BAAAA,oBACAC,8BAAAA,sBACAC,6BAAAA,wDACAC,oBAAAA,4DAAqB,6CACrBC,uBAAAA,eACAC,uBAAAA,eACAC,mBAAAA,WACAC,mCAAAA,2BACGC;QAlBHpB;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAUIpC,eAAAA,YAAY;QAAEiB,OAAAA;QAAOK,eAAAA;QAAeD,aAAAA;QAAaE,mBAAAA;IAAkB,IATrEe,WASEtC,aATFsC,UACAC,cAQEvC,aARFuC,aACAC,eAOExC,aAPFwC,cACAC,eAMEzC,aANFyC,cACAC,aAKE1C,aALF0C,YACAC,gBAIE3C,aAJF2C,eACAC,eAGE5C,aAHF4C,cACAC,gBAEE7C,aAFF6C,eACAC,mBACE9C,aADF8C;IAEF,IAAoChD,mCAAAA,MAAMiD,QAAQ,QAA3CC,aAA6BlD,oBAAjBmD,gBAAiBnD;IACpC,IAAMoD,iBAAiB7C,UAAUiC,UAAU;IAE3C,IAAMa,gBAAgBrD,MAAMsD,WAAW,CACrC,SAACC;YAKkDpC;QAJjD,IAAI;YAAC;YAAW;YAAa;YAAa;SAAa,CAACqC,QAAQ,CAACD,MAAME,GAAG,GAAG;YAC3EF,MAAMG,cAAc;QACtB;QAEA,IAAMC,gBAAgBtD,aAAauC,uBAAAA,wBAAAA,cAAczB,SAAAA,mBAAAA,6BAAAA,MAAO,CAAC,EAAE,EAAEoC,MAAME,GAAG;QAEtE,IACEE,iBACA,CAAC/C,YAAY+C,eAAenB,aAC5B,CAAC5B,YAAY+C,eAAepD,UAAUiC,UAAU,KAChD;YACAC,YAAYkB;QACd;QACAd,cAAcc;IAChB,GACA;QAACf;QAAYC;QAAeJ;QAAatB;QAAOqB;KAAS;IAG3D,IAAMoB,cAAc5D,MAAMsD,WAAW,CACnC,SAACO;QACC,IAAI,CAAC1C,OAAO;YACV,OAAO;gBAAC0C;gBAAM;aAAK;QACrB;QAEA,IAAMC,QAAQ3C,KAAK,CAAC,EAAE;QACtB,IAAM4C,MAAM5C,KAAK,CAAC,EAAE;QACpB,IAAI,AAAC2C,SAASnD,UAAUkD,MAAMC,UAAYC,OAAOpD,UAAUkD,MAAME,MAAO;YACtE,OAAO;gBAACzD,aAAauD,MAAMC;gBAAQxD,aAAauD,MAAME;aAAK;QAC7D,OAAO,IAAID,SAASpD,SAASmD,MAAMC,QAAQ;YACzC,OAAO;gBAACxD,aAAauD,MAAMC;gBAAQC;aAAI;QACzC,OAAO,IAAID,SAASrD,QAAQoD,MAAMC,QAAQ;YACxC,OAAO;gBAACA;gBAAOxD,aAAauD,MAAME;aAAK;QACzC;QAEA,OAAO5C;IACT,GACA;QAACA;KAAM;IAGT,IAAM6C,cAAchE,MAAMsD,WAAW,CACnC,SAACO;YACCvC;SAAAA,YAAAA,sBAAAA,gCAAAA,UAAWsC,YAAYC;QACvBV,cAAcc;IAChB,GACA;QAAC3C;QAAUsC;KAAY;IAGzB,IAAMM,gBAAgBlE,MAAMsD,WAAW,CAAC,SAACpC;eAAcD,iBAAiBC,KAAKC;OAAQ;QAACA;KAAM;IAE5F,IAAMgD,cAAcnE,MAAMsD,WAAW,CACnC,SAACpC;YACUC,QAA4CA;eAArDC,QAAQ,EAACD,SAAAA,mBAAAA,6BAAAA,MAAO,CAAC,EAAE,KAAIR,UAAUO,KAAKC,KAAK,CAAC,EAAE,KAAOA,EAAAA,UAAAA,mBAAAA,8BAAAA,OAAO,CAAC,EAAE,KAAIR,UAAUO,KAAKC,KAAK,CAAC,EAAE;OAC5F;QAACA;KAAM;IAGT,IAAMiD,oBAAoBpE,MAAMsD,WAAW,CACzC,SAACpC,KAAWmD;YAC4BlD;eAAtCC,QAAQhB,UAAUc,KAAKmD,cAAelD,EAAAA,SAAAA,mBAAAA,6BAAAA,MAAO,CAAC,EAAE,KAAIR,UAAUO,KAAKC,KAAK,CAAC,EAAE;OAC7E;QAACA;KAAM;IAGT,IAAMmD,0BAA0BtE,MAAMsD,WAAW,CAC/C,SAACpC,KAAWmD;YAC4BnB;eAAtC9B,QAAQhB,UAAUc,KAAKmD,cAAenB,EAAAA,cAAAA,wBAAAA,kCAAAA,WAAY,CAAC,EAAE,KAAIvC,UAAUO,KAAKgC,UAAU,CAAC,EAAE;OACvF;QAACA;KAAW;IAGd,IAAMqB,sBAAsBvE,MAAMsD,WAAW,CAC3C,SAACpC,KAAWmD;YAC6BlD;eAAvCC,QAAQjB,WAAWe,KAAKmD,cAAelD,EAAAA,SAAAA,mBAAAA,6BAAAA,MAAO,CAAC,EAAE,KAAIR,UAAUO,KAAKC,KAAK,CAAC,EAAE;OAC9E;QAACA;KAAM;IAGT,IAAMqD,4BAA4BxE,MAAMsD,WAAW,CACjD,SAACpC,KAAWmD;YAC6BnB;eAAvC9B,QAAQjB,WAAWe,KAAKmD,cAAenB,EAAAA,cAAAA,wBAAAA,kCAAAA,WAAY,CAAC,EAAE,KAAIvC,UAAUO,KAAKgC,UAAU,CAAC,EAAE;OACxF;QAACA;KAAW;IAGd,IAAMuB,aAAazE,MAAMsD,WAAW,CAClC,SAACO;eAAeV,cAAcS,YAAYC;OAC1C;QAACV;QAAeS;KAAY;IAG9B,IAAMc,aAAa1E,MAAMsD,WAAW,CAAC;eAAMH,cAAcc;OAAY;QAACd;KAAc;IAEpF,IAAMwB,cAAc3E,MAAMsD,WAAW,CACnC,SAACpC;eAAcD,iBAAiBC,KAAKgC;OACrC;QAACA;KAAW;IAGd,qBACE,oBAAC0B,+CAAQrC;QAAOsC,KAAKjD;QAAYS,WAAWpC,gCAAoCoC;sBAC9E,oBAACuC;QAAIvC,SAAS;qBACZ,oBAACrB;QACCwB,UAAUA;QACVlB,UAAUmB;QACVqC,WAAW;QACXC,aAAarC;QACbb,gBAAgBA;QAChBQ,SAAS;QACTP,oBAAoBA;QACpBC,oBAAoBA;QACpBC,sBAAsBA;QACtBC,qBAAqBA;QACrBE,eAAeA;sBAEjB,oBAACpB;QACCyB,UAAUA;QACVrB,OAAOA;QACPQ,cAAcA;QACdqD,WAAW3B;QACXP,cAAcA;QACdkB,aAAaA;QACbE,eAAeA;QACfC,aAAaA;QACbC,mBAAmBA;QACnBG,qBAAqBA;QACrBI,aAAaA;QACbF,YAAYA;QACZC,YAAYA;QACZJ,yBAAyBA;QACzBE,2BAA2BA;QAC3BzB,eAAeA;QACfT,2BAA2BA;QAC3B2C,cAAY/C;uBAGhB,oBAAC0C;QAAIvC,SAAS;qBACZ,oBAACrB;QACCwB,UAAUY;QACV9B,UAAUmB;QACVyC,WAAW;QACXC,aAAaxC;QACbd,gBAAgBA;QAChBQ,SAAS;QACTP,oBAAoBA;QACpBC,oBAAoBA;QACpBC,sBAAsBA;QACtBC,qBAAqBA;QACrBG,eAAeA;sBAEjB,oBAACrB;QACCyB,UAAUY;QACVjC,OAAOA;QACPQ,cAAcA;QACdsD,cAAY/C;QACZ8C,WAAW3B;QACXP,cAAcA;QACdkB,aAAaA;QACbE,eAAeA;QACfC,aAAaA;QACbC,mBAAmBA;QACnBG,qBAAqBA;QACrBI,aAAaA;QACbF,YAAYA;QACZC,YAAYA;QACZJ,yBAAyBA;QACzBE,2BAA2BA;QAC3BzB,eAAeA;QACfT,2BAA2BA;QAC3B8C,UAAU;QACVC,QAAQrC;;AAKlB,EAAE"}
+{"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":["React","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","addMonths","endOfDay","isAfter","isBefore","isSameDay","isSameMonth","isWithinInterval","startOfDay","CalendarDays","CalendarHeader","RootComponent","getIsDaySelected","day","value","Boolean","CalendarRange","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","getRootRef","disablePickers","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","props","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","useState","hintedDate","setHintedDate","secondViewDate","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","getNewValue","date","start","end","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","baseClassName","div","className","nextMonth","onPrevMonth","onKeyDown","aria-label","prevMonth","onNextMonth","tabIndex","onBlur"],"mappings":"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"}

package/dist/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/components/Card/Card.js

@@ -3,19 +3,17 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent";
 /**
  * @see https://vkcom.github.io/VKUI/#/Card
  */ export 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: 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, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiCard", mode === "outline" && "vkuiCard--mode-outline", mode === "shadow" && "vkuiCard--mode-shadow", withBorder && "vkuiCard--withBorder")
+    }));
 };
 
 //# sourceMappingURL=Card.js.map

package/dist/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":["React","classNames","Card","mode","children","getRootRef","className","restProps","div","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAU7C;;CAEC,GACD,OAAO,IAAMC,OAAO;6BAClBC,MAAAA,gCAAO,sBACPC,kBAAAA,UACAC,oBAAAA,YACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACE,+CACKD;QACJE,KAAKJ;QACLC,WAAWL,uBAETE,SAAS,uCACTA,SAAS,qCACTG;QAGDF;AAGP,EAAE"}
+{"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":["React","classNames","RootComponent","Card","mode","restProps","withBorder","baseClassName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAO/D;;CAEC,GACD,OAAO,IAAMC,OAAO;6BAAGC,MAAAA,gCAAO,sBAAWC;QAAlBD;;IACrB,IAAME,aAAaF,SAAS,aAAaA,SAAS;IAClD,qBACE,oBAACF,uDACKG;QACJE,eAAeN,uBAEbG,SAAS,uCACTA,SAAS,qCACTE;;AAIR,EAAE"}

package/dist/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/components/CardGrid/CardGrid.js

@@ -6,26 +6,26 @@ import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { SizeType } from "../../lib/adaptivity";
+import { RootComponent } from "../RootComponent/RootComponent";
 var sizeXClassNames = _define_property({
     none: "vkuiCardGrid--sizeX-none"
 }, SizeType.COMPACT, "vkuiCardGrid--sizeX-compact");
+var stylesSize = {
+    s: "vkuiInternalCardGrid--size-s",
+    m: "vkuiInternalCardGrid--size-m",
+    l: "vkuiInternalCardGrid--size-l"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/CardGrid
  */ export 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 _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeX = _useAdaptivity.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? "none" : _useAdaptivity_sizeX;
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiCardGrid", "vkuiInternalCardGrid", spaced && "vkuiCardGrid--spaced", {
-            s: "vkuiInternalCardGrid--size-s",
-            m: "vkuiInternalCardGrid--size-m",
-            l: "vkuiInternalCardGrid--size-l"
-        }[size], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], className)
-    }), children);
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiCardGrid", "vkuiInternalCardGrid", spaced && "vkuiCardGrid--spaced", stylesSize[size], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX])
+    }));
 };
 
 //# sourceMappingURL=CardGrid.js.map

package/dist/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":["React","classNames","useAdaptivity","SizeType","sizeXClassNames","none","COMPACT","CardGrid","children","size","spaced","className","restProps","sizeX","div","s","m","l","REGULAR"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAGhD,IAAMC;IACJC,IAAI;GACHF,SAASG,OAAO;AAWnB;;CAEC,GACD,OAAO,IAAMC,WAAW;QACtBC,kBAAAA,+BACAC,MAAAA,gCAAO,0CACPC,QAAAA,oCAAS,uBACTC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA2BT,iBAAAA,wCAAAA,eAAnBW,OAAAA,0CAAQ;IAEhB,qBACE,oBAACC,+CACKF;QACJD,WAAWV,2BAET,wBACAS,kCACA;YACEK,GAAG;YACHC,GAAG;YACHC,GAAG;QACL,CAAC,CAACR,KAAK,EACPI,UAAUV,SAASe,OAAO,IAAId,eAAe,CAACS,MAAM,EACpDF;QAGDH;AAGP,EAAE"}
+{"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":["React","classNames","useAdaptivity","SizeType","RootComponent","sizeXClassNames","none","COMPACT","stylesSize","s","m","l","CardGrid","size","spaced","restProps","sizeX","baseClassName","REGULAR"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,IAAMC;IACJC,IAAI;GACHH,SAASI,OAAO;AAGnB,IAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAUA;;CAEC,GACD,OAAO,IAAMC,WAAW;6BAAGC,MAAAA,gCAAO,0CAAKC,QAAAA,oCAAS,uBAAUC;QAA/BF;QAAYC;;IACrC,IAA2BZ,iBAAAA,wCAAAA,eAAnBc,OAAAA,0CAAQ;IAEhB,qBACE,oBAACZ,uDACKW;QACJE,eAAehB,2BAEb,wBACAa,kCACAN,UAAU,CAACK,KAAK,EAChBG,UAAUb,SAASe,OAAO,IAAIb,eAAe,CAACW,MAAM;;AAI5D,EAAE"}

package/dist/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/components/CardScroll/CardScroll.js

@@ -6,6 +6,12 @@ import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useDOM } from "../../lib/dom";
 import { HorizontalScroll } from "../HorizontalScroll/HorizontalScroll";
+import { RootComponent } from "../RootComponent/RootComponent";
+var stylesSize = {
+    s: "vkuiInternalCardScroll--size-s",
+    m: "vkuiInternalCardScroll--size-m",
+    l: "vkuiInternalCardScroll--size-l"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
  */ export var CardScroll = function(_param) {
@@ -43,22 +49,17 @@ import { HorizontalScroll } from "../HorizontalScroll/HorizontalScroll";
         }
         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 = useDOM().window;
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: 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, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiCardScroll", "vkuiInternalCardScroll", size !== false && stylesSize[size], withSpaces && "vkuiCardScroll--withSpaces")
     }), /*#__PURE__*/ React.createElement(HorizontalScroll, {
         getScrollToLeft: getScrollToLeft,
         getScrollToRight: getScrollToRight,