@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

package/dist/cssm/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","styles","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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,EAAEC,QAAQ,QAAQ,qBAAqB;AAC5D,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,WAAW,QAAiC,6BAA6B;AAClF,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,4BAA4B;AAwB/C,OAAO,MAAMC,eAAe,CAAC,EAC3BC,QAAQ,EACRC,KAAK,EACLC,YAAY,EACZC,WAAW,EACXC,aAAa,EACbC,WAAW,EACXC,iBAAiB,EACjBC,mBAAmB,EACnBC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,yBAAyB,EACzBC,uBAAuB,EACvBC,YAAY,EACZC,aAAa,EACbC,IAAI,EACJC,uBAAuB,KAAK,EAC5BC,QAAQ,EACRC,SAAS,EACTC,4BAA4B,KAAK,EACjC,GAAGC,OACe;IAClB,MAAM,EAAEC,MAAM,EAAE,GAAGzB;IACnB,MAAM0B,MAAMlC,MAAMmC,MAAM,CAAiB;IACzC,MAAMC,MAAMlC,aAAa6B;IAEzB,MAAMM,QAAQrC,MAAMsC,OAAO,CAAC,IAAMlC,SAASQ,UAAUE,eAAe;QAACA;QAAcF;KAAS;IAE5F,MAAM2B,YAAYvC,MAAMsC,OAAO,CAC7B,IAAMnC,aAAaiC,KAAKtB,cAAcmB,SACtC;QAACA;QAAQG;QAAKtB;KAAa;IAG7B,MAAM0B,kBAAkBxC,MAAMyC,WAAW,CACvC,CAACC;QACC3B,YAAY2B;QAEZR,IAAIS,OAAO,EAAEC;IACf,GACA;QAAC7B;KAAY;IAGf,qBACE,oBAAC8B;QAAK,GAAGb,KAAK;QAAEF,WAAW7B,WAAWS,MAAM,CAAC,eAAe,EAAEoB;QAAYI,KAAKA;qBAC7E,oBAACW;QACCf,WAAW7B,WACTS,MAAM,CAAC,oBAAoB,EAC3BiB,SAAS,OAAOjB,MAAM,CAAC,4BAA4B;OAGpD6B,UAAUO,GAAG,CAAC,CAACC,wBACd,oBAACtC;YAASuC,KAAKD;YAASjB,WAAWpB,MAAM,CAAC,wBAAwB;WAC/DqC,YAKNV,MAAMS,GAAG,CAAC,CAACG,MAAMC,kBAChB,oBAACL;YACCf,WAAW7B,WACTS,MAAM,CAAC,oBAAoB,EAC3BiB,SAAS,OAAOjB,MAAM,CAAC,4BAA4B;YAErDsC,KAAKE;WAEJD,KAAKH,GAAG,CAAC,CAACK,KAAKD;YACd,MAAME,YAAY9C,YAAY6C,KAAKvC;YACnC,qBACE,oBAACL;gBACCyC,KAAKG,IAAIE,WAAW;gBACpBF,KAAKA;gBACLG,OAAOjD,UAAU8C,KAAKf;gBACtBmB,QAAQtC,YAAYkC;gBACpBK,UAAUhB;gBACViB,QAAQ,CAAC7B,wBAAwB,CAACwB;gBAClCM,UAAUhC,cAAcyB;gBACxBQ,gBAAgBxC,oBAAoBgC,KAAKD;gBACzCU,cAAc1C,kBAAkBiC,KAAKD;gBACrCW,sBAAsBtC,4BAA4B4B,KAAKD;gBACvDY,oBAAoBtC,0BAA0B2B,KAAKD;gBACnDa,UAAU/C,gBAAgBmC;gBAC1Ba,SAASvC,aAAa0B;gBACtBc,SAAS7C;gBACT8C,SAAS7C;gBACT8C,QAAQ7C,cAAc6B;gBACtBC,WAAWA;gBACXzB,MAAMA;gBACL,GAAGE,QAAQ;;QAGlB;AAKV,EAAE"}
+{"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","styles","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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,EAAEC,QAAQ,QAAQ,qBAAqB;AAC5D,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AAExD,SAASC,WAAW,QAAiC,6BAA6B;AAClF,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,4BAA4B;AAyB/C,OAAO,MAAMC,eAAe,CAAC,EAC3BC,QAAQ,EACRC,KAAK,EACLC,YAAY,EACZC,WAAW,EACXC,aAAa,EACbC,WAAW,EACXC,iBAAiB,EACjBC,mBAAmB,EACnBC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,yBAAyB,EACzBC,uBAAuB,EACvBC,YAAY,EACZC,aAAa,EACbC,IAAI,EACJC,uBAAuB,KAAK,EAC5BC,QAAQ,EACRC,4BAA4B,KAAK,EACjCC,UAAU,EACV,GAAGC,OACe;IAClB,MAAM,EAAEC,MAAM,EAAE,GAAG1B;IACnB,MAAM2B,MAAMlC,aAAa+B;IACzB,MAAMI,MAAMlC,aAAa6B;IAEzB,MAAMM,QAAQtC,MAAMuC,OAAO,CAAC,IAAMlC,SAASS,UAAUE,eAAe;QAACA;QAAcF;KAAS;IAE5F,MAAM0B,YAAYxC,MAAMuC,OAAO,CAC7B,IAAMnC,aAAaiC,KAAKrB,cAAcmB,SACtC;QAACA;QAAQE;QAAKrB;KAAa;IAG7B,MAAMyB,kBAAkBzC,MAAM0C,WAAW,CACvC,CAACC;QACC1B,YAAY0B;QAEZP,IAAIQ,OAAO,EAAEC;IACf,GACA;QAAC5B;QAAamB;KAAI;IAGpB,qBACE,oBAAC1B;QAAe,GAAGwB,KAAK;QAAEY,eAAelC,MAAM,CAAC,eAAe;QAAEqB,YAAYG;qBAC3E,oBAACW;QACCC,WAAW/C,WACTW,MAAM,CAAC,oBAAoB,EAC3BiB,SAAS,OAAOjB,MAAM,CAAC,4BAA4B;OAGpD4B,UAAUS,GAAG,CAAC,CAACC,wBACd,oBAACvC;YAASwC,KAAKD;YAASF,WAAWpC,MAAM,CAAC,wBAAwB;WAC/DsC,YAKNZ,MAAMW,GAAG,CAAC,CAACG,MAAMC,kBAChB,oBAACN;YACCC,WAAW/C,WACTW,MAAM,CAAC,oBAAoB,EAC3BiB,SAAS,OAAOjB,MAAM,CAAC,4BAA4B;YAErDuC,KAAKE;WAEJD,KAAKH,GAAG,CAAC,CAACK,KAAKD;YACd,MAAME,YAAYhD,YAAY+C,KAAKxC;YACnC,qBACE,oBAACN;gBACC2C,KAAKG,IAAIE,WAAW;gBACpBF,KAAKA;gBACLG,OAAOnD,UAAUgD,KAAKjB;gBACtBqB,QAAQvC,YAAYmC;gBACpBK,UAAUlB;gBACVmB,QAAQ,CAAC9B,wBAAwB,CAACyB;gBAClCM,UAAUjC,cAAc0B;gBACxBQ,gBAAgBzC,oBAAoBiC,KAAKD;gBACzCU,cAAc3C,kBAAkBkC,KAAKD;gBACrCW,sBAAsBvC,4BAA4B6B,KAAKD;gBACvDY,oBAAoBvC,0BAA0B4B,KAAKD;gBACnDa,UAAUhD,gBAAgBoC;gBAC1Ba,SAASxC,aAAa2B;gBACtBc,SAAS9C;gBACT+C,SAAS9C;gBACT+C,QAAQ9C,cAAc8B;gBACtBC,WAAWA;gBACX1B,MAAMA;gBACL,GAAGE,QAAQ;;QAGlB;AAKV,EAAE"}

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

@@ -7,10 +7,11 @@ 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';
 import styles from './CalendarHeader.module.css';
-export const CalendarHeader = ({ viewDate, onChange, prevMonth = true, nextMonth = true, disablePickers = false, onNextMonth, onPrevMonth, className, prevMonthProps = {}, nextMonthProps = {}, prevMonthAriaLabel = 'Предыдущий месяц', nextMonthAriaLabel = 'Следующий месяц', changeMonthAriaLabel = 'Изменить месяц', changeYearAriaLabel = 'Изменить год', prevMonthIcon = /*#__PURE__*/ React.createElement(Icon20ChevronLeftOutline, {
+export const CalendarHeader = ({ viewDate, onChange, prevMonth = true, nextMonth = true, disablePickers = false, onNextMonth, onPrevMonth, prevMonthProps = {}, nextMonthProps = {}, prevMonthAriaLabel = 'Предыдущий месяц', nextMonthAriaLabel = 'Следующий месяц', changeMonthAriaLabel = 'Изменить месяц', changeYearAriaLabel = 'Изменить год', prevMonthIcon = /*#__PURE__*/ React.createElement(Icon20ChevronLeftOutline, {
     className: styles['CalendarHeader__nav-icon--accent'],
     width: 30,
     height: 30
@@ -18,7 +19,7 @@ export const CalendarHeader = ({ viewDate, onChange, prevMonth = true, nextMonth
     className: styles['CalendarHeader__nav-icon--accent'],
     width: 30,
     height: 30
-}) })=>{
+}), ...restProps })=>{
     const { locale } = useConfigProvider();
     const onMonthsChange = React.useCallback((event)=>onChange(setMonth(viewDate, Number(event.target.value))), [
         onChange,
@@ -46,8 +47,9 @@ export const CalendarHeader = ({ viewDate, onChange, prevMonth = true, nextMonth
     });
     const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;
     const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['CalendarHeader'], className)
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: styles['CalendarHeader'],
+        ...restProps
     }, prevMonth && /*#__PURE__*/ React.createElement(AdaptivityProvider, {
         sizeX: SizeType.REGULAR
     }, /*#__PURE__*/ React.createElement(Tappable, {

package/dist/cssm/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","styles","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","styles","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/cssm/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/cssm/components/CalendarRange/CalendarRange.js

@@ -1,10 +1,10 @@
 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';
 import styles from './CalendarRange.module.css';
 const getIsDaySelected = (day, value)=>{
     if (!value?.[0] || !value[1]) {
@@ -14,7 +14,7 @@ const getIsDaySelected = (day, value)=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
- */ export const CalendarRange = ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn = 1, getRootRef, disablePickers, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, changeDayAriaLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, className, listenDayChangesForUpdate, ...props })=>{
+ */ export const CalendarRange = ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn = 1, getRootRef, disablePickers, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, changeDayAriaLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, ...props })=>{
     const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, isDayFocused, isDayDisabled, resetSelectedDay } = useCalendar({
         value,
         disableFuture,
@@ -108,10 +108,9 @@ const getIsDaySelected = (day, value)=>{
     const isDayHinted = React.useCallback((day)=>getIsDaySelected(day, hintedDate), [
         hintedDate
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...props,
-        ref: getRootRef,
-        className: classNames(styles['CalendarRange'], className)
+        baseClassName: styles['CalendarRange']
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['CalendarRange__inner']
     }, /*#__PURE__*/ React.createElement(CalendarHeader, {

package/dist/cssm/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","styles","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","hintedDate","setHintedDate","useState","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":"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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":["React","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","addMonths","endOfDay","isAfter","isBefore","isSameDay","isSameMonth","isWithinInterval","startOfDay","CalendarDays","CalendarHeader","RootComponent","styles","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","hintedDate","setHintedDate","useState","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/cssm/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/cssm/components/Card/Card.js

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Card.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Card
- */ export const Card = ({ mode = 'tint', children, getRootRef, className, ...restProps })=>{
-    return /*#__PURE__*/ React.createElement("div", {
+ */ export const Card = ({ mode = 'tint', ...restProps })=>{
+    const withBorder = mode === 'outline' || mode === 'outline-tint';
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        ref: getRootRef,
-        className: classNames(styles['Card'], mode === 'outline' && styles['Card--mode-outline'], mode === 'shadow' && styles['Card--mode-shadow'], className)
-    }, children);
+        baseClassName: classNames(styles['Card'], mode === 'outline' && styles['Card--mode-outline'], mode === 'shadow' && styles['Card--mode-shadow'], withBorder && styles['Card--withBorder'])
+    });
 };
 
 //# sourceMappingURL=Card.js.map

package/dist/cssm/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","styles","Card","mode","children","getRootRef","className","restProps","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,oBAAoB;AAQvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,OAAO,MAAM,EACbC,QAAQ,EACRC,UAAU,EACVC,SAAS,EACT,GAAGC,WACO;IACV,qBACE,oBAACC;QACE,GAAGD,SAAS;QACbE,KAAKJ;QACLC,WAAWN,WACTC,MAAM,CAAC,OAAO,EACdE,SAAS,aAAaF,MAAM,CAAC,qBAAqB,EAClDE,SAAS,YAAYF,MAAM,CAAC,oBAAoB,EAChDK;OAGDF;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","styles","Card","mode","restProps","withBorder","baseClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,oBAAoB;AAMvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EAAEC,OAAO,MAAM,EAAE,GAAGC,WAAsB;IAC7D,MAAMC,aAAaF,SAAS,aAAaA,SAAS;IAClD,qBACE,oBAACH;QACE,GAAGI,SAAS;QACbE,eAAeP,WACbE,MAAM,CAAC,OAAO,EACdE,SAAS,aAAaF,MAAM,CAAC,qBAAqB,EAClDE,SAAS,YAAYF,MAAM,CAAC,oBAAoB,EAChDI,cAAcJ,MAAM,CAAC,mBAAmB;;AAIhD,EAAE"}

package/dist/cssm/components/Card/Card.module.css

@@ -17,7 +17,7 @@
   background: var(--vkui--color_background_modal);
 }
 
-.Card--mode-outline::after {
+.Card--withBorder::after {
   position: absolute;
   left: 0;
   top: 0;

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

@@ -2,23 +2,25 @@ 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';
 import styles from './CardGrid.module.css';
 const sizeXClassNames = {
     none: styles['CardGrid--sizeX-none'],
     [SizeType.COMPACT]: styles['CardGrid--sizeX-compact']
 };
+const stylesSize = {
+    s: 'vkuiInternalCardGrid--size-s',
+    m: 'vkuiInternalCardGrid--size-m',
+    l: 'vkuiInternalCardGrid--size-l'
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/CardGrid
- */ export const CardGrid = ({ children, size = 's', spaced = false, className, ...restProps })=>{
+ */ export const CardGrid = ({ size = 's', spaced = false, ...restProps })=>{
     const { sizeX = 'none' } = useAdaptivity();
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        className: classNames(styles['CardGrid'], 'vkuiInternalCardGrid', spaced && styles['CardGrid--spaced'], {
-            s: 'vkuiInternalCardGrid--size-s',
-            m: 'vkuiInternalCardGrid--size-m',
-            l: 'vkuiInternalCardGrid--size-l'
-        }[size], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], className)
-    }, children);
+        baseClassName: classNames(styles['CardGrid'], 'vkuiInternalCardGrid', spaced && styles['CardGrid--spaced'], stylesSize[size], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX])
+    });
 };
 
 //# sourceMappingURL=CardGrid.js.map

package/dist/cssm/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","styles","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;AAChD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACD,SAASI,OAAO,CAAC,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAUA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,QAAQ,EACRC,OAAO,GAAG,EACVC,SAAS,KAAK,EACdC,SAAS,EACT,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGZ;IAE3B,qBACE,oBAACa;QACE,GAAGF,SAAS;QACbD,WAAWX,WACTG,MAAM,CAAC,WAAW,EAClB,wBACAO,UAAUP,MAAM,CAAC,mBAAmB,EACpC;YACEY,GAAG;YACHC,GAAG;YACHC,GAAG;QACL,CAAC,CAACR,KAAK,EACPI,UAAUX,SAASgB,OAAO,IAAId,eAAe,CAACS,MAAM,EACpDF;OAGDH;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","styles","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;AAC/D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACF,SAASK,OAAO,CAAC,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAEA,MAAMI,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAUA;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EAAEC,OAAO,GAAG,EAAEC,SAAS,KAAK,EAAE,GAAGC,WAA0B;IAClF,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGf;IAE3B,qBACE,oBAACE;QACE,GAAGY,SAAS;QACbE,eAAejB,WACbI,MAAM,CAAC,WAAW,EAClB,wBACAU,UAAUV,MAAM,CAAC,mBAAmB,EACpCI,UAAU,CAACK,KAAK,EAChBG,UAAUd,SAASgB,OAAO,IAAIb,eAAe,CAACW,MAAM;;AAI5D,EAAE"}

package/dist/cssm/components/CardGrid/CardGrid.module.css

@@ -26,13 +26,6 @@
   margin-top: calc(var(--vkui--size_cardgrid_padding_vertical--regular) * 2);
 }
 
-@media (max-width: 767.9px) {
-  .CardGrid--sizeX-none.CardGrid--android {
-    padding-left: 16px;
-    padding-right: 16px;
-  }
-}
-
 /**
  * CMP:
  * Group

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

@@ -2,10 +2,16 @@ 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';
 import styles from './CardScroll.module.css';
+const stylesSize = {
+    s: 'vkuiInternalCardScroll--size-s',
+    m: 'vkuiInternalCardScroll--size-m',
+    l: 'vkuiInternalCardScroll--size-l'
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
- */ export const CardScroll = ({ children, size = 's', showArrows = true, withSpaces = true, className, ...restProps })=>{
+ */ export const CardScroll = ({ children, size = 's', showArrows = true, withSpaces = true, ...restProps })=>{
     const refContainer = React.useRef(null);
     const gapRef = React.useRef(null);
     const { window } = useDOM();
@@ -41,13 +47,9 @@ import styles from './CardScroll.module.css';
         }
         return slide.offsetLeft - gapRef.current.offsetWidth;
     }
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        className: classNames(styles['CardScroll'], 'vkuiInternalCardScroll', size !== false && ({
-            s: 'vkuiInternalCardScroll--size-s',
-            m: 'vkuiInternalCardScroll--size-m',
-            l: 'vkuiInternalCardScroll--size-l'
-        })[size], withSpaces && styles['CardScroll--withSpaces'], className)
+        baseClassName: classNames(styles['CardScroll'], 'vkuiInternalCardScroll', size !== false && stylesSize[size], withSpaces && styles['CardScroll--withSpaces'])
     }, /*#__PURE__*/ React.createElement(HorizontalScroll, {
         getScrollToLeft: getScrollToLeft,
         getScrollToRight: getScrollToRight,

package/dist/cssm/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":["React","classNames","useDOM","HorizontalScroll","styles","CardScroll","children","size","showArrows","withSpaces","className","restProps","refContainer","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","div","s","m","l","ref","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,gBAAgB,QAA+B,uCAAuC;AAC/F,OAAOC,YAAY,0BAA0B;AAW7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,QAAQ,EACRC,OAAO,GAAG,EACVC,aAAa,IAAI,EACjBC,aAAa,IAAI,EACjBC,SAAS,EACT,GAAGC,WACa;IAChB,MAAMC,eAAeZ,MAAMa,MAAM,CAAiB;IAClD,MAAMC,SAASd,MAAMa,MAAM,CAAiB;IAE5C,MAAM,EAAEE,MAAM,EAAE,GAAGb;IAEnB,SAASc,gBAAgBC,MAAc;QACrC,IAAI,CAACL,aAAaM,OAAO,IAAI,CAACJ,OAAOI,OAAO,EAAE;YAC5C,OAAOD;QACT;QACA,MAAME,iBAAiBP,aAAaM,OAAO,CAACE,WAAW;QACvD,MAAMC,aAAa,AAAC;eAAIT,aAAaM,OAAO,CAACZ,QAAQ;SAAC,CAAmBgB,SAAS,CAChF,CAACC,KACCA,GAAGC,UAAU,GACXD,GAAGH,WAAW,GACdK,SAASV,OAAQW,gBAAgB,CAACH,IAAII,WAAW,IACjDV,UACF;QAGJ,IAAII,eAAe,CAAC,GAAG;YACrB,OAAOJ;QACT;QAEA,IAAII,eAAe,GAAG;YACpB,OAAO;QACT;QAEA,MAAMO,QAAQhB,aAAaM,OAAO,CAACZ,QAAQ,CAACe,WAAW;QAEvD,MAAMQ,WACJD,MAAMJ,UAAU,GAAIL,CAAAA,iBAAiBS,MAAMR,WAAW,AAAD,IAAKN,OAAOI,OAAO,CAACE,WAAW;QAEtF,IAAIS,YAAY,IAAIf,OAAOI,OAAO,CAACE,WAAW,EAAE;YAC9C,OAAO;QACT;QAEA,OAAOS;IACT;IAEA,SAASC,iBAAiBb,MAAc;QACtC,IAAI,CAACL,aAAaM,OAAO,IAAI,CAACJ,OAAOI,OAAO,EAAE;YAC5C,OAAOD;QACT;QAEA,MAAME,iBAAiBP,aAAaM,OAAO,CAACE,WAAW;QACvD,MAAMQ,QAAQG,MAAMC,SAAS,CAACC,IAAI,CAACC,IAAI,CACrCtB,aAAaM,OAAO,CAACZ,QAAQ,EAC7B,CAACiB,KAAoBA,GAAGC,UAAU,GAAGD,GAAGH,WAAW,GAAGH,SAASE;QAGjE,IAAI,CAACS,OAAO;YACV,OAAOX;QACT;QAEA,OAAOW,MAAMJ,UAAU,GAAGV,OAAOI,OAAO,CAACE,WAAW;IACtD;IAEA,qBACE,oBAACe;QACE,GAAGxB,SAAS;QACbD,WAAWT,WACTG,MAAM,CAAC,aAAa,EACpB,0BACAG,SAAS,SACP,CAAA;YACE6B,GAAG;YACHC,GAAG;YACHC,GAAG;QACL,CAAA,CAAC,CAAC/B,KAAK,EACTE,cAAcL,MAAM,CAAC,yBAAyB,EAC9CM;qBAGF,oBAACP;QACCa,iBAAiBA;QACjBc,kBAAkBA;QAClBtB,YAAYA;qBAEZ,oBAAC2B;QAAIzB,WAAWN,MAAM,CAAC,iBAAiB;QAAEmC,KAAK3B;qBAC7C,oBAAC4B;QAAK9B,WAAWN,MAAM,CAAC,kBAAkB;QAAEmC,KAAKzB;QAChDR,wBACD,oBAACkC;QAAK9B,WAAWN,MAAM,CAAC,kBAAkB;;AAKpD,EAAE"}
+{"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":["React","classNames","useDOM","HorizontalScroll","RootComponent","styles","stylesSize","s","m","l","CardScroll","children","size","showArrows","withSpaces","restProps","refContainer","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","baseClassName","div","className","ref","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,SAASC,gBAAgB,QAA+B,uCAAuC;AAC/F,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAWA;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,QAAQ,EACRC,OAAO,GAAG,EACVC,aAAa,IAAI,EACjBC,aAAa,IAAI,EACjB,GAAGC,WACa;IAChB,MAAMC,eAAehB,MAAMiB,MAAM,CAAiB;IAClD,MAAMC,SAASlB,MAAMiB,MAAM,CAAiB;IAE5C,MAAM,EAAEE,MAAM,EAAE,GAAGjB;IAEnB,SAASkB,gBAAgBC,MAAc;QACrC,IAAI,CAACL,aAAaM,OAAO,IAAI,CAACJ,OAAOI,OAAO,EAAE;YAC5C,OAAOD;QACT;QACA,MAAME,iBAAiBP,aAAaM,OAAO,CAACE,WAAW;QACvD,MAAMC,aAAa,AAAC;eAAIT,aAAaM,OAAO,CAACX,QAAQ;SAAC,CAAmBe,SAAS,CAChF,CAACC,KACCA,GAAGC,UAAU,GACXD,GAAGH,WAAW,GACdK,SAASV,OAAQW,gBAAgB,CAACH,IAAII,WAAW,IACjDV,UACF;QAGJ,IAAII,eAAe,CAAC,GAAG;YACrB,OAAOJ;QACT;QAEA,IAAII,eAAe,GAAG;YACpB,OAAO;QACT;QAEA,MAAMO,QAAQhB,aAAaM,OAAO,CAACX,QAAQ,CAACc,WAAW;QAEvD,MAAMQ,WACJD,MAAMJ,UAAU,GAAIL,CAAAA,iBAAiBS,MAAMR,WAAW,AAAD,IAAKN,OAAOI,OAAO,CAACE,WAAW;QAEtF,IAAIS,YAAY,IAAIf,OAAOI,OAAO,CAACE,WAAW,EAAE;YAC9C,OAAO;QACT;QAEA,OAAOS;IACT;IAEA,SAASC,iBAAiBb,MAAc;QACtC,IAAI,CAACL,aAAaM,OAAO,IAAI,CAACJ,OAAOI,OAAO,EAAE;YAC5C,OAAOD;QACT;QAEA,MAAME,iBAAiBP,aAAaM,OAAO,CAACE,WAAW;QACvD,MAAMQ,QAAQG,MAAMC,SAAS,CAACC,IAAI,CAACC,IAAI,CACrCtB,aAAaM,OAAO,CAACX,QAAQ,EAC7B,CAACgB,KAAoBA,GAAGC,UAAU,GAAGD,GAAGH,WAAW,GAAGH,SAASE;QAGjE,IAAI,CAACS,OAAO;YACV,OAAOX;QACT;QAEA,OAAOW,MAAMJ,UAAU,GAAGV,OAAOI,OAAO,CAACE,WAAW;IACtD;IAEA,qBACE,oBAACpB;QACE,GAAGW,SAAS;QACbwB,eAAetC,WACbI,MAAM,CAAC,aAAa,EACpB,0BACAO,SAAS,SAASN,UAAU,CAACM,KAAK,EAClCE,cAAcT,MAAM,CAAC,yBAAyB;qBAGhD,oBAACF;QACCiB,iBAAiBA;QACjBc,kBAAkBA;QAClBrB,YAAYA;qBAEZ,oBAAC2B;QAAIC,WAAWpC,MAAM,CAAC,iBAAiB;QAAEqC,KAAK1B;qBAC7C,oBAAC2B;QAAKF,WAAWpC,MAAM,CAAC,kBAAkB;QAAEqC,KAAKxB;QAChDP,wBACD,oBAACgC;QAAKF,WAAWpC,MAAM,CAAC,kBAAkB;;AAKpD,EAAE"}

package/dist/cssm/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/cssm/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":["React","Icon24Reorder","Icon24ReorderIos","classNames","usePlatform","Platform","Touch","styles","CellDragger","onDragStart","onDragMove","onDragEnd","onClick","className","restProps","platform","handleClick","event","preventDefault","onStart","onMoveY","onEnd","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,mBAAmB;AACnE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,KAAK,QAAQ,oBAAoB;AAE1C,OAAOC,YAAY,2BAA2B;AAK9C,OAAO,MAAMC,cAAc,CAAC,EAC1BC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,SAAS,EACT,GAAGC,WACc;IACjB,MAAMC,WAAWX;IAEjB,MAAMY,cAAc,CAACC;QACnBA,MAAMC,cAAc;QACpB,IAAIN,SAAS;YACXA,QAAQK;QACV;IACF;IAEA,qBACE,oBAACX;QACCO,WAAWV,WAAWI,MAAM,CAAC,cAAc,EAAEM;QAC7CM,SAASV;QACTW,SAASV;QACTW,OAAOV;QACPC,SAASI;QACR,GAAGF,SAAS;OAEZC,aAAaV,SAASiB,GAAG,iBAAG,oBAACpB,wCAAsB,oBAACD;AAG3D,EAAE"}
+{"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":["React","Icon24Reorder","Icon24ReorderIos","classNames","usePlatform","Platform","Touch","styles","CellDragger","onDragStart","onDragMove","onDragEnd","onClick","className","restProps","platform","handleClick","event","preventDefault","onStart","onMoveY","onEnd","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,mBAAmB;AACnE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,KAAK,QAAQ,oBAAoB;AAE1C,OAAOC,YAAY,2BAA2B;AAK9C,OAAO,MAAMC,cAAc,CAAC,EAC1BC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,SAAS,EACT,GAAGC,WACc;IACjB,MAAMC,WAAWX;IAEjB,MAAMY,cAAc,CAACC;QACnBA,MAAMC,cAAc;QACpB,IAAIN,SAAS;YACXA,QAAQK;QACV;IACF;IAEA,qBACE,oBAACX;QACCO,WAAWV,WAAWI,MAAM,CAAC,cAAc,EAAEM;QAC7CM,SAASV;QACTW,SAASV;QACTW,OAAOV;QACPC,SAASI;QACR,GAAGF,SAAS;OAEZC,aAAaV,SAASiB,GAAG,iBAAG,oBAACpB,wCAAsB,oBAACD;AAG3D,EAAE"}

package/dist/cssm/components/Checkbox/Checkbox.js

@@ -15,8 +15,7 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Checkbox.module.css';
 const sizeYClassNames = {
     none: styles['Checkbox--sizeY-none'],
-    [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],
-    [SizeType.REGULAR]: styles['Checkbox--sizeY-regular']
+    [SizeType.COMPACT]: styles['Checkbox--sizeY-compact']
 };
 const warn = warnOnce('Checkbox');
 /**
@@ -64,7 +63,7 @@ const warn = warnOnce('Checkbox');
     }
     return /*#__PURE__*/ React.createElement(Tappable, {
         Component: "label",
-        className: classNames(styles['Checkbox'], platform === Platform.VKCOM && styles['Checkbox--vkcom'], sizeYClassNames[sizeY], !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'], className),
+        className: classNames(styles['Checkbox'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'], className),
         style: style,
         disabled: restProps.disabled,
         activeEffectDelay: platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY,
@@ -110,7 +109,9 @@ const warn = warnOnce('Checkbox');
         className: styles['Checkbox__content']
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['Checkbox__title']
-    }, /*#__PURE__*/ React.createElement(Text, null, children), /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(Text, {
+        className: styles['Checkbox__titleBefore']
+    }, children), /*#__PURE__*/ React.createElement("div", {
         className: styles['Checkbox__titleAfter']
     }, titleAfter)), hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
         className: styles['Checkbox__description']