@vkontakte/vkui 5.1.2 → 5.2.1

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.js","names":["React","setMonth","setYear","subMonths","addMonths","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","Icon12Dropdown","Tappable","classNames","CustomSelect","SizeType","getMonths","getYears","useConfigProvider","Paragraph","AdaptivityProvider","CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","nextMonthIcon","locale","onMonthsChange","useCallback","event","Number","target","value","onYearChange","months","useMemo","map","label","currentYear","getFullYear","years","formatter","Intl","DateTimeFormat","year","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","REGULAR","format","COMPACT","getMonth"],"sources":["../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { setMonth, setYear, subMonths, addMonths } from '../../lib/date';\nimport {\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n  Icon12Dropdown,\n} from '@vkontakte/icons';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport { classNames } from '@vkontakte/vkjs';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getMonths, getYears } from '../../lib/calendar';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\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 className={styles['CalendarHeader__pickers']} weight=\"2\">\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 className={styles['CalendarHeader__pickers']}>\n            <CustomSelect\n              className={styles['CalendarHeader__picker']}\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={styles['CalendarHeader__picker']}\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"],"mappings":"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"}
+{"version":3,"file":"CalendarHeader.js","names":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","SizeType","getMonths","getYears","addMonths","setMonth","setYear","subMonths","AdaptivityProvider","useConfigProvider","CustomSelect","Tappable","Paragraph","CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","nextMonthIcon","locale","onMonthsChange","useCallback","event","Number","target","value","onYearChange","months","useMemo","map","label","currentYear","getFullYear","years","formatter","Intl","DateTimeFormat","year","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","REGULAR","format","COMPACT","getMonth"],"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 className={styles['CalendarHeader__pickers']} weight=\"2\">\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 className={styles['CalendarHeader__pickers']}>\n            <CustomSelect\n              className={styles['CalendarHeader__picker']}\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={styles['CalendarHeader__picker']}\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"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';
-import { CalendarDaysProps } from '../CalendarDays/CalendarDays';
 import { HasRootRef } 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> {
     value?: Array<Date | null>;
     disablePast?: boolean;

package/dist/components/CalendarRange/CalendarRange.js

@@ -4,11 +4,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["value", "onChange", "disablePast", "disableFuture", "shouldDisableDate", "onClose", "weekStartsOn", "getRootRef", "disablePickers", "prevMonthAriaLabel", "nextMonthAriaLabel", "changeMonthAriaLabel", "changeYearAriaLabel", "changeDayAriaLabel", "prevMonthIcon", "nextMonthIcon", "className", "listenDayChangesForUpdate"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { addMonths, isSameMonth, isSameDay, isBefore, isAfter, startOfDay, endOfDay, isWithinInterval } from '../../lib/date';
-import { CalendarHeader } from '../CalendarHeader/CalendarHeader';
-import { CalendarDays } from '../CalendarDays/CalendarDays';
-import { navigateDate, setTimeEqual, isLastDay, isFirstDay } from '../../lib/calendar';
 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';
 var getIsDaySelected = function getIsDaySelected(day, value) {
   if (!(value !== null && value !== void 0 && value[0]) || !value[1]) {
     return false;

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarRange.js","names":["React","classNames","addMonths","isSameMonth","isSameDay","isBefore","isAfter","startOfDay","endOfDay","isWithinInterval","CalendarHeader","CalendarDays","navigateDate","setTimeEqual","isLastDay","isFirstDay","useCalendar","getIsDaySelected","day","value","Boolean","CalendarRange","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","getRootRef","disablePickers","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","prevMonthIcon","nextMonthIcon","className","listenDayChangesForUpdate","props","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","useState","hintedDate","setHintedDate","secondViewDate","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","getNewValue","date","start","end","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted"],"sources":["../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  addMonths,\n  isSameMonth,\n  isSameDay,\n  isBefore,\n  isAfter,\n  startOfDay,\n  endOfDay,\n  isWithinInterval,\n} from '../../lib/date';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { navigateDate, setTimeEqual, isLastDay, isFirstDay } from '../../lib/calendar';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { HasRootRef } from '../../types';\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"],"mappings":"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"}
+{"version":3,"file":"CalendarRange.js","names":["React","classNames","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","addMonths","endOfDay","isAfter","isBefore","isSameDay","isSameMonth","isWithinInterval","startOfDay","CalendarDays","CalendarHeader","getIsDaySelected","day","value","Boolean","CalendarRange","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","getRootRef","disablePickers","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","prevMonthIcon","nextMonthIcon","className","listenDayChangesForUpdate","props","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","useState","hintedDate","setHintedDate","secondViewDate","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","getNewValue","date","start","end","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted"],"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"],"mappings":"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"}

package/dist/components/CalendarTime/CalendarTime.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { setHours, setMinutes } from '../../lib/date';
-import { CustomSelect } from '../CustomSelect/CustomSelect';
-import { Button } from '../Button/Button';
 import { SizeType } from '../../lib/adaptivity';
+import { setHours, setMinutes } from '../../lib/date';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
+import { Button } from '../Button/Button';
+import { CustomSelect } from '../CustomSelect/CustomSelect';
 var hours = [];
 for (var i = 0; i < 24; i += 1) {
   hours.push({

package/dist/components/CalendarTime/CalendarTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarTime.js","names":["React","setHours","setMinutes","CustomSelect","Button","SizeType","AdaptivityProvider","hours","i","push","value","label","String","padStart","minutes","CalendarTime","doneButtonText","onChange","onClose","changeHoursAriaLabel","changeMinutesAriaLabel","onHoursChange","useCallback","event","Number","target","onMinutesChange","COMPACT","getHours","getMinutes"],"sources":["../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["import * as React from 'react';\nimport { setHours, setMinutes } from '../../lib/date';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Button } from '../Button/Button';\nimport { SizeType } from '../../lib/adaptivity';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport styles from './CalendarTime.module.css';\n\nexport interface CalendarTimeProps {\n  value: Date;\n  doneButtonText?: string;\n  changeHoursAriaLabel?: string;\n  changeMinutesAriaLabel?: string;\n  onChange?(value: Date): void;\n  onClose?(): void;\n}\n\nconst hours: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 24; i += 1) {\n  hours.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nconst minutes: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 60; i += 1) {\n  minutes.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nexport const CalendarTime = ({\n  value,\n  doneButtonText = 'Готово',\n  onChange,\n  onClose,\n  changeHoursAriaLabel = 'Изменить час',\n  changeMinutesAriaLabel = 'Изменить минуту',\n}: CalendarTimeProps) => {\n  const onHoursChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setHours(value, Number(event.target.value))),\n    [onChange, value],\n  );\n  const onMinutesChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setMinutes(value, Number(event.target.value))),\n    [onChange, value],\n  );\n\n  return (\n    <div className={styles['CalendarTime']}>\n      <div className={styles['CalendarTime__picker']}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <CustomSelect\n            value={value.getHours()}\n            options={hours}\n            onChange={onHoursChange}\n            forceDropdownPortal={false}\n            aria-label={changeHoursAriaLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles['CalendarTime__divider']}>:</div>\n      <div className={styles['CalendarTime__picker']}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <CustomSelect\n            value={value.getMinutes()}\n            options={minutes}\n            onChange={onMinutesChange}\n            forceDropdownPortal={false}\n            aria-label={changeMinutesAriaLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles['CalendarTime__button']}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <Button mode=\"secondary\" onClick={onClose} size=\"l\" aria-label={doneButtonText}>\n            {doneButtonText}\n          </Button>\n        </AdaptivityProvider>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CalendarTime.js","names":["React","SizeType","setHours","setMinutes","AdaptivityProvider","Button","CustomSelect","hours","i","push","value","label","String","padStart","minutes","CalendarTime","doneButtonText","onChange","onClose","changeHoursAriaLabel","changeMinutesAriaLabel","onHoursChange","useCallback","event","Number","target","onMinutesChange","COMPACT","getHours","getMinutes"],"sources":["../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SizeType } from '../../lib/adaptivity';\nimport { setHours, setMinutes } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { Button } from '../Button/Button';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport styles from './CalendarTime.module.css';\n\nexport interface CalendarTimeProps {\n  value: Date;\n  doneButtonText?: string;\n  changeHoursAriaLabel?: string;\n  changeMinutesAriaLabel?: string;\n  onChange?(value: Date): void;\n  onClose?(): void;\n}\n\nconst hours: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 24; i += 1) {\n  hours.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nconst minutes: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 60; i += 1) {\n  minutes.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nexport const CalendarTime = ({\n  value,\n  doneButtonText = 'Готово',\n  onChange,\n  onClose,\n  changeHoursAriaLabel = 'Изменить час',\n  changeMinutesAriaLabel = 'Изменить минуту',\n}: CalendarTimeProps) => {\n  const onHoursChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setHours(value, Number(event.target.value))),\n    [onChange, value],\n  );\n  const onMinutesChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setMinutes(value, Number(event.target.value))),\n    [onChange, value],\n  );\n\n  return (\n    <div className={styles['CalendarTime']}>\n      <div className={styles['CalendarTime__picker']}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <CustomSelect\n            value={value.getHours()}\n            options={hours}\n            onChange={onHoursChange}\n            forceDropdownPortal={false}\n            aria-label={changeHoursAriaLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles['CalendarTime__divider']}>:</div>\n      <div className={styles['CalendarTime__picker']}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <CustomSelect\n            value={value.getMinutes()}\n            options={minutes}\n            onChange={onMinutesChange}\n            forceDropdownPortal={false}\n            aria-label={changeMinutesAriaLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles['CalendarTime__button']}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <Button mode=\"secondary\" onClick={onClose} size=\"l\" aria-label={doneButtonText}>\n            {doneButtonText}\n          </Button>\n        </AdaptivityProvider>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/CardGrid/CardGrid.js

@@ -1,10 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children", "size", "spaced", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { getSizeXClassName } from '../../helpers/getSizeXClassName';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { SizeType } from '../../lib/adaptivity';
+var sizeXClassNames = _defineProperty({
+  none: "vkuiCardGrid--sizeX-none"
+}, SizeType.COMPACT, "vkuiCardGrid--sizeX-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/CardGrid
  */
@@ -17,9 +21,10 @@ export var CardGrid = function CardGrid(_ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useAdaptivity = useAdaptivity(),
-    sizeX = _useAdaptivity.sizeX;
+    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
+    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNames("vkuiCardGrid", spaced && "vkuiCardGrid--spaced", styles["CardGrid--size-".concat(size)], getSizeXClassName("vkuiCardGrid", sizeX), className)
+    className: classNames("vkuiCardGrid", spaced && "vkuiCardGrid--spaced", styles["CardGrid--size-".concat(size)], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], className)
   }), children);
 };
 var styles = {

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

@@ -1 +1 @@
-{"version":3,"file":"CardGrid.js","names":["React","classNames","getSizeXClassName","useAdaptivity","CardGrid","children","size","spaced","className","restProps","sizeX","styles"],"sources":["../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './CardGrid.module.css';\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 } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['CardGrid'],\n        spaced && styles['CardGrid--spaced'],\n        styles[`CardGrid--size-${size}`],\n        getSizeXClassName(styles['CardGrid'], sizeX),\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,aAAa,QAAQ,2BAA2B;AAWzD;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAMA;EAAA,IALnBC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IAAA,mBACVC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACdC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkBN,aAAa,EAAE;IAAzBO,KAAK,kBAALA,KAAK;EAEb,oBACE,wCACMD,SAAS;IACb,SAAS,EAAER,UAAU,iBAEnBM,MAAM,0BAA8B,EACpCI,MAAM,0BAAmBL,IAAI,EAAG,EAChCJ,iBAAiB,iBAAqBQ,KAAK,CAAC,EAC5CF,SAAS;EACT,IAEDH,QAAQ,CACL;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"CardGrid.js","names":["React","classNames","useAdaptivity","SizeType","sizeXClassNames","none","COMPACT","CardGrid","children","size","spaced","className","restProps","sizeX","styles","REGULAR"],"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        spaced && styles['CardGrid--spaced'],\n        styles[`CardGrid--size-${size}`],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAG/C,IAAMC,eAAe;EACnBC,IAAI;AAAgC,GACnCF,QAAQ,CAACG,OAAO,gCAClB;AAUD;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAMA;EAAA,IALnBC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IAAA,mBACVC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACdC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAA2BV,aAAa,EAAE;IAAA,sCAAlCW,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,wCACMD,SAAS;IACb,SAAS,EAAEX,UAAU,iBAEnBS,MAAM,0BAA8B,EACpCI,MAAM,0BAAmBL,IAAI,EAAG,EAChCI,KAAK,KAAKV,QAAQ,CAACY,OAAO,IAAIX,eAAe,CAACS,KAAK,CAAC,EACpDF,SAAS;EACT,IAEDH,QAAQ,CACL;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}

package/dist/components/CardScroll/CardScroll.js

@@ -4,10 +4,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "size", "showArrows", "withSpaces", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { getSizeXClassName } from '../../helpers/getSizeXClassName';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { HorizontalScroll } from '../HorizontalScroll/HorizontalScroll';
 import { useDOM } from '../../lib/dom';
+import { HorizontalScroll } from '../HorizontalScroll/HorizontalScroll';
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
  */
@@ -21,8 +19,6 @@ export var CardScroll = function CardScroll(_ref) {
     withSpaces = _ref$withSpaces === void 0 ? true : _ref$withSpaces,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  var _useAdaptivity = useAdaptivity(),
-    sizeX = _useAdaptivity.sizeX;
   var refContainer = React.useRef(null);
   var gapRef = React.useRef(null);
   var _useDOM = useDOM(),
@@ -62,7 +58,7 @@ export var CardScroll = function CardScroll(_ref) {
     return slide.offsetLeft - gapRef.current.offsetWidth;
   }
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNames("vkuiCardScroll", getSizeXClassName("vkuiCardScroll", sizeX), styles["CardScroll--size-".concat(size)], withSpaces && "vkuiCardScroll--withSpaces", className)
+    className: classNames("vkuiCardScroll", styles["CardScroll--size-".concat(size)], withSpaces && "vkuiCardScroll--withSpaces", className)
   }), /*#__PURE__*/React.createElement(HorizontalScroll, {
     getScrollToLeft: getScrollToLeft,
     getScrollToRight: getScrollToRight,

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

@@ -1 +1 @@
-{"version":3,"file":"CardScroll.js","names":["React","classNames","getSizeXClassName","useAdaptivity","HorizontalScroll","useDOM","CardScroll","children","size","showArrows","withSpaces","className","restProps","sizeX","refContainer","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","styles"],"sources":["../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HorizontalScroll, HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport { useDOM } from '../../lib/dom';\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 { sizeX } = useAdaptivity();\n\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        getSizeXClassName(styles['CardScroll'], sizeX),\n        styles[`CardScroll--size-${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"],"mappings":"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"}
+{"version":3,"file":"CardScroll.js","names":["React","classNames","useDOM","HorizontalScroll","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","styles"],"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        styles[`CardScroll--size-${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"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { SimpleCellProps } from '../SimpleCell/SimpleCell';
 import { HasRootRef } from '../../types';
 import { RemovableProps } from '../Removable/Removable';
+import { SimpleCellProps } from '../SimpleCell/SimpleCell';
 export interface CellProps extends Omit<SimpleCellProps, 'getRootRef'>, RemovableProps, HasRootRef<HTMLDivElement> {
     mode?: 'removable' | 'selectable';
     /**

package/dist/components/Cell/Cell.js

@@ -4,15 +4,15 @@ var _excluded = ["mode", "onRemove", "removePlaceholder", "onDragFinish", "befor
   _excluded2 = ["dragging"];
 import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
-import { Platform } from '../../lib/platform';
-import { SimpleCell } from '../SimpleCell/SimpleCell';
-import { Removable } from '../Removable/Removable';
-import { usePlatform } from '../../hooks/usePlatform';
 import { useExternRef } from '../../hooks/useExternRef';
-import { useDraggable } from './useDraggable';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
 import { ListContext } from '../List/ListContext';
-import { CellDragger } from './CellDragger/CellDragger';
+import { Removable } from '../Removable/Removable';
+import { SimpleCell } from '../SimpleCell/SimpleCell';
 import { CellCheckbox } from './CellCheckbox/CellCheckbox';
+import { CellDragger } from './CellDragger/CellDragger';
+import { useDraggable } from './useDraggable';
 /**
  * @see https://vkcom.github.io/VKUI/#/Cell
  */

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

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","names":["React","classNames","noop","Platform","SimpleCell","Removable","usePlatform","useExternRef","useDraggable","ListContext","CellDragger","CellCheckbox","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","rootElRef","dragging","draggableProps","useContext","toggleDrag","useEffect","undefined","dragger","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","IOS","simpleCell","e","current"],"sources":["../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDraggable } from './useDraggable';\nimport { ListContext } from '../List/ListContext';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, 'getRootRef'>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'removable' | 'selectable';\n  /**\n   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n   */\n  draggable?: boolean;\n  /**\n   * Имя для input в режиме selectable\n   */\n  name?: string;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n   */\n  checked?: boolean;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n   */\n  defaultChecked?: boolean;\n  /**\n   * Коллбэк срабатывает при завершении перетаскивания.\n   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n   */\n  onDragFinish?: ({ from, to }: { from: number; to: number }) => void;\n  /**\n   * aria-label для кнопки перетаскивания ячейки\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell = ({\n  mode,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  draggable,\n  Component,\n  onChange,\n  name,\n  value,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = 'Перенести ячейку',\n  className,\n  style,\n  ...restProps\n}: CellProps) => {\n  const selectable = mode === 'selectable';\n  const removable = mode === 'removable';\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const { dragging, ...draggableProps } = useDraggable({\n    rootElRef,\n    onDragFinish,\n  });\n\n  const { toggleDrag } = React.useContext(ListContext);\n  React.useEffect(() => {\n    if (dragging) {\n      toggleDrag(true);\n      return () => toggleDrag(false);\n    }\n    return undefined;\n  }, [dragging, toggleDrag]);\n\n  let dragger;\n  if (draggable) {\n    dragger = (\n      <CellDragger\n        className={styles['Cell__dragger']}\n        aria-label={draggerLabel}\n        {...draggableProps}\n      />\n    );\n  }\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      onChange,\n      defaultChecked,\n      checked,\n      disabled,\n    };\n    checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n  }\n\n  const simpleCellDisabled = (draggable && !selectable) || removable || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  const cellClasses = classNames(\n    styles['Cell'],\n    platform === Platform.IOS && styles['Cell--ios'],\n    dragging && styles['Cell--dragging'],\n    removable && styles['Cell--removable'],\n    selectable && styles['Cell--selectable'],\n    disabled && styles['Cell--disabled'],\n  );\n\n  const simpleCell = (\n    <SimpleCell\n      hasActive={hasActive}\n      hasHover={hasActive}\n      {...restProps}\n      className={styles['Cell__content']}\n      disabled={simpleCellDisabled}\n      Component={selectable ? 'label' : Component}\n      before={\n        <React.Fragment>\n          {draggable && platform !== Platform.IOS && dragger}\n          {selectable && checkbox}\n          {before}\n        </React.Fragment>\n      }\n      after={\n        <React.Fragment>\n          {draggable && platform === Platform.IOS && dragger}\n          {after}\n        </React.Fragment>\n      }\n    />\n  );\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNames(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove(e, rootElRef.current)}\n      >\n        {simpleCell}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      {simpleCell}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Cell.js","names":["React","classNames","noop","useExternRef","usePlatform","Platform","ListContext","Removable","SimpleCell","CellCheckbox","CellDragger","useDraggable","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","rootElRef","dragging","draggableProps","useContext","toggleDrag","useEffect","undefined","dragger","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","IOS","simpleCell","e","current"],"sources":["../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { ListContext } from '../List/ListContext';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { useDraggable } from './useDraggable';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, 'getRootRef'>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'removable' | 'selectable';\n  /**\n   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n   */\n  draggable?: boolean;\n  /**\n   * Имя для input в режиме selectable\n   */\n  name?: string;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n   */\n  checked?: boolean;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n   */\n  defaultChecked?: boolean;\n  /**\n   * Коллбэк срабатывает при завершении перетаскивания.\n   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n   */\n  onDragFinish?: ({ from, to }: { from: number; to: number }) => void;\n  /**\n   * aria-label для кнопки перетаскивания ячейки\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell = ({\n  mode,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  draggable,\n  Component,\n  onChange,\n  name,\n  value,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = 'Перенести ячейку',\n  className,\n  style,\n  ...restProps\n}: CellProps) => {\n  const selectable = mode === 'selectable';\n  const removable = mode === 'removable';\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const { dragging, ...draggableProps } = useDraggable({\n    rootElRef,\n    onDragFinish,\n  });\n\n  const { toggleDrag } = React.useContext(ListContext);\n  React.useEffect(() => {\n    if (dragging) {\n      toggleDrag(true);\n      return () => toggleDrag(false);\n    }\n    return undefined;\n  }, [dragging, toggleDrag]);\n\n  let dragger;\n  if (draggable) {\n    dragger = (\n      <CellDragger\n        className={styles['Cell__dragger']}\n        aria-label={draggerLabel}\n        {...draggableProps}\n      />\n    );\n  }\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      onChange,\n      defaultChecked,\n      checked,\n      disabled,\n    };\n    checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n  }\n\n  const simpleCellDisabled = (draggable && !selectable) || removable || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  const cellClasses = classNames(\n    styles['Cell'],\n    platform === Platform.IOS && styles['Cell--ios'],\n    dragging && styles['Cell--dragging'],\n    removable && styles['Cell--removable'],\n    selectable && styles['Cell--selectable'],\n    disabled && styles['Cell--disabled'],\n  );\n\n  const simpleCell = (\n    <SimpleCell\n      hasActive={hasActive}\n      hasHover={hasActive}\n      {...restProps}\n      className={styles['Cell__content']}\n      disabled={simpleCellDisabled}\n      Component={selectable ? 'label' : Component}\n      before={\n        <React.Fragment>\n          {draggable && platform !== Platform.IOS && dragger}\n          {selectable && checkbox}\n          {before}\n        </React.Fragment>\n      }\n      after={\n        <React.Fragment>\n          {draggable && platform === Platform.IOS && dragger}\n          {after}\n        </React.Fragment>\n      }\n    />\n  );\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNames(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove(e, rootElRef.current)}\n      >\n        {simpleCell}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      {simpleCell}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Cell/CellCheckbox/CellCheckbox.js

@@ -3,10 +3,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["className", "style"];
 import * as React from 'react';
 import { Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckCircleOn } from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
 import { getPlatformClassName } from '../../../helpers/getPlatformClassName';
 import { usePlatform } from '../../../hooks/usePlatform';
-import { classNames } from '@vkontakte/vkjs';
 import { Platform } from '../../../lib/platform';
+import { VisuallyHiddenInput } from '../../VisuallyHiddenInput/VisuallyHiddenInput';
 export var CellCheckbox = function CellCheckbox(_ref) {
   var className = _ref.className,
     style = _ref.style,
@@ -14,16 +15,18 @@ export var CellCheckbox = function CellCheckbox(_ref) {
   var platform = usePlatform();
   var IconOff = platform === Platform.IOS || platform === Platform.VKCOM ? Icon24CheckCircleOff : Icon24CheckBoxOff;
   var IconOn = platform === Platform.IOS || platform === Platform.VKCOM ? Icon24CheckCircleOn : Icon24CheckBoxOn;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("span", {
     className: classNames("vkuiCellCheckbox", getPlatformClassName("vkuiCellCheckbox", platform), className),
     style: style
-  }, /*#__PURE__*/React.createElement("input", _extends({
+  }, /*#__PURE__*/React.createElement(VisuallyHiddenInput, _extends({
     className: "vkuiCellCheckbox__input",
     type: "checkbox"
   }, restProps)), /*#__PURE__*/React.createElement("span", {
-    className: classNames("vkuiCellCheckbox__icon", "vkuiCellCheckbox__icon--off")
+    className: classNames("vkuiCellCheckbox__icon", "vkuiCellCheckbox__icon--off"),
+    "aria-hidden": true
   }, /*#__PURE__*/React.createElement(IconOff, null)), /*#__PURE__*/React.createElement("span", {
-    className: classNames("vkuiCellCheckbox__icon", "vkuiCellCheckbox__icon--on")
+    className: classNames("vkuiCellCheckbox__icon", "vkuiCellCheckbox__icon--on"),
+    "aria-hidden": true
   }, /*#__PURE__*/React.createElement(IconOn, null)));
 };
 //# sourceMappingURL=CellCheckbox.js.map

package/dist/components/Cell/CellCheckbox/CellCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellCheckbox.js","names":["React","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","getPlatformClassName","usePlatform","classNames","Platform","CellCheckbox","className","style","restProps","platform","IconOff","IOS","VKCOM","IconOn"],"sources":["../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { getPlatformClassName } from '../../../helpers/getPlatformClassName';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../../lib/platform';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nexport type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> &\n  React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox = ({ className, style, ...restProps }: CellCheckboxProps) => {\n  const platform = usePlatform();\n\n  const IconOff =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOff\n      : Icon24CheckBoxOff;\n\n  const IconOn =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOn\n      : Icon24CheckBoxOn;\n\n  return (\n    <div\n      className={classNames(\n        styles['CellCheckbox'],\n        getPlatformClassName(styles['CellCheckbox'], platform),\n        className,\n      )}\n      style={style}\n    >\n      <input className={styles['CellCheckbox__input']} type=\"checkbox\" {...restProps} />\n      <span className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off'])}>\n        <IconOff />\n      </span>\n      <span className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--on'])}>\n        <IconOn />\n      </span>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,kBAAkB;AACzB,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,uBAAuB;AAOhD,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA8D;EAAA,IAAxDC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAKC,SAAS;EAC3D,IAAMC,QAAQ,GAAGP,WAAW,EAAE;EAE9B,IAAMQ,OAAO,GACXD,QAAQ,KAAKL,QAAQ,CAACO,GAAG,IAAIF,QAAQ,KAAKL,QAAQ,CAACQ,KAAK,GACpDb,oBAAoB,GACpBF,iBAAiB;EAEvB,IAAMgB,MAAM,GACVJ,QAAQ,KAAKL,QAAQ,CAACO,GAAG,IAAIF,QAAQ,KAAKL,QAAQ,CAACQ,KAAK,GACpDZ,mBAAmB,GACnBF,gBAAgB;EAEtB,oBACE;IACE,SAAS,EAAEK,UAAU,qBAEnBF,oBAAoB,qBAAyBQ,QAAQ,CAAC,EACtDH,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb;IAAO,SAAS,2BAAgC;IAAC,IAAI,EAAC;EAAU,GAAKC,SAAS,EAAI,eAClF;IAAM,SAAS,EAAEL,UAAU;EAAkE,gBAC3F,oBAAC,OAAO,OAAG,CACN,eACP;IAAM,SAAS,EAAEA,UAAU;EAAiE,gBAC1F,oBAAC,MAAM,OAAG,CACL,CACH;AAEV,CAAC"}
+{"version":3,"file":"CellCheckbox.js","names":["React","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","classNames","getPlatformClassName","usePlatform","Platform","VisuallyHiddenInput","CellCheckbox","className","style","restProps","platform","IconOff","IOS","VKCOM","IconOn"],"sources":["../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../../helpers/getPlatformClassName';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { VisuallyHiddenInput } from '../../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nexport type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> &\n  React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox = ({ className, style, ...restProps }: CellCheckboxProps) => {\n  const platform = usePlatform();\n\n  const IconOff =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOff\n      : Icon24CheckBoxOff;\n\n  const IconOn =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOn\n      : Icon24CheckBoxOn;\n\n  return (\n    <span\n      className={classNames(\n        styles['CellCheckbox'],\n        getPlatformClassName(styles['CellCheckbox'], platform),\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHiddenInput\n        className={styles['CellCheckbox__input']}\n        type=\"checkbox\"\n        {...restProps}\n      />\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off'])}\n        aria-hidden\n      >\n        <IconOff />\n      </span>\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--on'])}\n        aria-hidden\n      >\n        <IconOn />\n      </span>\n    </span>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,kBAAkB;AACzB,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,mBAAmB,QAAQ,+CAA+C;AAOnF,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA8D;EAAA,IAAxDC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAKC,SAAS;EAC3D,IAAMC,QAAQ,GAAGP,WAAW,EAAE;EAE9B,IAAMQ,OAAO,GACXD,QAAQ,KAAKN,QAAQ,CAACQ,GAAG,IAAIF,QAAQ,KAAKN,QAAQ,CAACS,KAAK,GACpDd,oBAAoB,GACpBF,iBAAiB;EAEvB,IAAMiB,MAAM,GACVJ,QAAQ,KAAKN,QAAQ,CAACQ,GAAG,IAAIF,QAAQ,KAAKN,QAAQ,CAACS,KAAK,GACpDb,mBAAmB,GACnBF,gBAAgB;EAEtB,oBACE;IACE,SAAS,EAAEG,UAAU,qBAEnBC,oBAAoB,qBAAyBQ,QAAQ,CAAC,EACtDH,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb,oBAAC,mBAAmB;IAClB,SAAS,2BAAgC;IACzC,IAAI,EAAC;EAAU,GACXC,SAAS,EACb,eACF;IACE,SAAS,EAAER,UAAU,yDAAkE;IACvF;EAAW,gBAEX,oBAAC,OAAO,OAAG,CACN,eACP;IACE,SAAS,EAAEA,UAAU,wDAAiE;IACtF;EAAW,gBAEX,oBAAC,MAAM,OAAG,CACL,CACF;AAEX,CAAC"}

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

@@ -3,9 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["onDragStart", "onDragMove", "onDragEnd", "className"];
 import * as React from 'react';
 import { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
 import { getPlatformClassName } from '../../../helpers/getPlatformClassName';
 import { usePlatform } from '../../../hooks/usePlatform';
-import { classNames } from '@vkontakte/vkjs';
 import { Platform } from '../../../lib/platform';
 import { Touch } from '../../Touch/Touch';
 export var CellDragger = function CellDragger(_ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"CellDragger.js","names":["React","Icon24Reorder","Icon24ReorderIos","getPlatformClassName","usePlatform","classNames","Platform","Touch","CellDragger","onDragStart","onDragMove","onDragEnd","className","restProps","platform","onClick","useCallback","e","preventDefault","IOS"],"sources":["../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { getPlatformClassName } from '../../../helpers/getPlatformClassName';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const onClick = React.useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <Touch\n      className={classNames(\n        styles['CellDragger'],\n        getPlatformClassName(styles['CellDragger'], platform),\n        className,\n      )}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={onClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,kBAAkB;AAClE,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,KAAK,QAAQ,mBAAmB;AAMzC,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,IALtBC,WAAW,QAAXA,WAAW;IACXC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGV,WAAW,EAAE;EAE9B,IAAMW,OAAO,GAAGf,KAAK,CAACgB,WAAW,CAAC,UAACC,CAAmB,EAAK;IACzDA,CAAC,CAACC,cAAc,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,KAAK;IACJ,SAAS,EAAEb,UAAU,oBAEnBF,oBAAoB,oBAAwBW,QAAQ,CAAC,EACrDF,SAAS,CACT;IACF,OAAO,EAAEH,WAAY;IACrB,OAAO,EAAEC,UAAW;IACpB,KAAK,EAAEC,SAAU;IACjB,OAAO,EAAEI;EAAQ,GACbF,SAAS,GAEZC,QAAQ,KAAKR,QAAQ,CAACa,GAAG,gBAAG,oBAAC,gBAAgB,OAAG,gBAAG,oBAAC,aAAa,OAAG,CAC/D;AAEZ,CAAC"}
+{"version":3,"file":"CellDragger.js","names":["React","Icon24Reorder","Icon24ReorderIos","classNames","getPlatformClassName","usePlatform","Platform","Touch","CellDragger","onDragStart","onDragMove","onDragEnd","className","restProps","platform","onClick","useCallback","e","preventDefault","IOS"],"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 { getPlatformClassName } from '../../../helpers/getPlatformClassName';\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 & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const onClick = React.useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <Touch\n      className={classNames(\n        styles['CellDragger'],\n        getPlatformClassName(styles['CellDragger'], platform),\n        className,\n      )}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={onClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,kBAAkB;AAClE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,KAAK,QAAQ,mBAAmB;AAMzC,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,IALtBC,WAAW,QAAXA,WAAW;IACXC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,WAAW,EAAE;EAE9B,IAAMU,OAAO,GAAGf,KAAK,CAACgB,WAAW,CAAC,UAACC,CAAmB,EAAK;IACzDA,CAAC,CAACC,cAAc,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,KAAK;IACJ,SAAS,EAAEf,UAAU,oBAEnBC,oBAAoB,oBAAwBU,QAAQ,CAAC,EACrDF,SAAS,CACT;IACF,OAAO,EAAEH,WAAY;IACrB,OAAO,EAAEC,UAAW;IACpB,KAAK,EAAEC,SAAU;IACjB,OAAO,EAAEI;EAAQ,GACbF,SAAS,GAEZC,QAAQ,KAAKR,QAAQ,CAACa,GAAG,gBAAG,oBAAC,gBAAgB,OAAG,gBAAG,oBAAC,aAAa,OAAG,CAC/D;AAEZ,CAAC"}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type TappableProps } from '../Tappable/Tappable';
 import { HasRef, HasRootRef } from '../../types';
+import { type TappableProps } from '../Tappable/Tappable';
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement>, Pick<TappableProps, 'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'> {
     description?: React.ReactNode;
     indeterminate?: boolean;

package/dist/components/Checkbox/Checkbox.js

@@ -1,19 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children", "className", "style", "getRootRef", "getRef", "description", "indeterminate", "defaultIndeterminate", "hoverMode", "activeMode", "hasHover", "hasActive", "focusVisibleMode", "onChange"];
+var _sizeYClassNames;
 import * as React from 'react';
-import { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';
+import { Icon20CheckBoxIndetermanate, Icon20CheckBoxOff, Icon20CheckBoxOn, Icon24CheckBoxOff, Icon24CheckBoxOn } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { Platform } from '../../lib/platform';
-import { Icon20CheckBoxOn, Icon24CheckBoxOn, Icon20CheckBoxOff, Icon24CheckBoxOff, Icon20CheckBoxIndetermanate } from '@vkontakte/icons';
-import { usePlatform } from '../../hooks/usePlatform';
-import { Footnote } from '../Typography/Footnote/Footnote';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useExternRef } from '../../hooks/useExternRef';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
-import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
+import { useExternRef } from '../../hooks/useExternRef';
+import { usePlatform } from '../../hooks/usePlatform';
+import { SizeType } from '../../lib/adaptivity';
+import { Platform } from '../../lib/platform';
 import { warnOnce } from '../../lib/warnOnce';
+import { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
+var sizeYClassNames = (_sizeYClassNames = {
+  none: "vkuiCheckbox--sizeY-none"
+}, _defineProperty(_sizeYClassNames, SizeType.COMPACT, "vkuiCheckbox--sizeY-compact"), _defineProperty(_sizeYClassNames, SizeType.REGULAR, "vkuiCheckbox--sizeY-regular"), _sizeYClassNames);
 var warn = warnOnce('Checkbox');
 
 /**
@@ -38,7 +43,8 @@ export var Checkbox = function Checkbox(_ref) {
   var inputRef = useExternRef(getRef);
   var platform = usePlatform();
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var _useAdaptivityConditi = useAdaptivityConditionalRender(),
     adaptiveSizeY = _useAdaptivityConditi.sizeY;
   React.useEffect(function () {
@@ -69,7 +75,7 @@ export var Checkbox = function Checkbox(_ref) {
   }
   return /*#__PURE__*/React.createElement(Tappable, {
     Component: "label",
-    className: classNames("vkuiCheckbox", platform === Platform.VKCOM && "vkuiCheckbox--vkcom", getSizeYClassName("vkuiCheckbox", sizeY), !(hasReactNode(children) || hasReactNode(description)) && "vkuiCheckbox--simple", className),
+    className: classNames("vkuiCheckbox", platform === Platform.VKCOM && "vkuiCheckbox--vkcom", sizeYClassNames[sizeY], !(hasReactNode(children) || hasReactNode(description)) && "vkuiCheckbox--simple", className),
     style: style,
     disabled: restProps.disabled,
     activeEffectDelay: platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY,