@vkontakte/vkui 5.5.4 → 5.6.0

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 { 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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"}

package/dist/cssm/components/CalendarTime/CalendarTime.js

@@ -19,7 +19,7 @@ for(let i = 0; i < 60; i += 1){
         label: String(i).padStart(2, '0')
     });
 }
-export const CalendarTime = ({ value , doneButtonText ='Готово' , onChange , onClose , changeHoursAriaLabel ='Изменить час' , changeMinutesAriaLabel ='Изменить минуту'  })=>{
+export const CalendarTime = ({ value, doneButtonText = 'Готово', onChange, onClose, changeHoursAriaLabel = 'Изменить час', changeMinutesAriaLabel = 'Изменить минуту' })=>{
     const onHoursChange = React.useCallback((event)=>onChange?.(setHours(value, Number(event.target.value))), [
         onChange,
         value

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["React","SizeType","setHours","setMinutes","AdaptivityProvider","Button","CustomSelect","styles","hours","i","push","value","label","String","padStart","minutes","CalendarTime","doneButtonText","onChange","onClose","changeHoursAriaLabel","changeMinutesAriaLabel","onHoursChange","useCallback","event","Number","target","onMinutesChange","div","className","sizeY","COMPACT","getHours","options","forceDropdownPortal","aria-label","getMinutes","mode","onClick","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,EAAEC,UAAU,QAAQ,iBAAiB;AACtD,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,OAAOC,YAAY,4BAA4B;AAW/C,MAAMC,QAGD,EAAE;AACP,IAAK,IAAIC,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BD,MAAME,KAAK;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,SAAS,GAAG;IAAK;AAC3D;AAEA,MAAMC,UAGD,EAAE;AACP,IAAK,IAAIN,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BM,QAAQL,KAAK;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,SAAS,GAAG;IAAK;AAC7D;AAEA,OAAO,MAAME,eAAe,CAAC,EAC3BL,MAAK,EACLM,gBAAiB,SAAQ,EACzBC,SAAQ,EACRC,QAAO,EACPC,sBAAuB,eAAc,EACrCC,wBAAyB,kBAAiB,EACxB;IAClB,MAAMC,gBAAgBtB,MAAMuB,YAC1B,CAACC,QACCN,WAAWhB,SAASS,OAAOc,OAAOD,MAAME,OAAOf,UACjD;QAACO;QAAUP;KAAM;IAEnB,MAAMgB,kBAAkB3B,MAAMuB,YAC5B,CAACC,QACCN,WAAWf,WAAWQ,OAAOc,OAAOD,MAAME,OAAOf,UACnD;QAACO;QAAUP;KAAM;IAGnB,qBACE,oBAACiB;QAAIC,WAAWtB,MAAM,CAAC,eAAe;qBACpC,oBAACqB;QAAIC,WAAWtB,MAAM,CAAC,uBAAuB;qBAC5C,oBAACH;QAAmB0B,OAAO7B,SAAS8B;qBAClC,oBAACzB;QACCK,OAAOA,MAAMqB;QACbC,SAASzB;QACTU,UAAUI;QACVY,qBAAqB;QACrBC,cAAYf;wBAIlB,oBAACQ;QAAIC,WAAWtB,MAAM,CAAC,wBAAwB;OAAE,oBACjD,oBAACqB;QAAIC,WAAWtB,MAAM,CAAC,uBAAuB;qBAC5C,oBAACH;QAAmB0B,OAAO7B,SAAS8B;qBAClC,oBAACzB;QACCK,OAAOA,MAAMyB;QACbH,SAASlB;QACTG,UAAUS;QACVO,qBAAqB;QACrBC,cAAYd;wBAIlB,oBAACO;QAAIC,WAAWtB,MAAM,CAAC,uBAAuB;qBAC5C,oBAACH;QAAmB0B,OAAO7B,SAAS8B;qBAClC,oBAAC1B;QAAOgC,MAAK;QAAYC,SAASnB;QAASoB,MAAK;QAAIJ,cAAYlB;OAC7DA;AAMb,EAAE"}
+{"version":3,"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"],"names":["React","SizeType","setHours","setMinutes","AdaptivityProvider","Button","CustomSelect","styles","hours","i","push","value","label","String","padStart","minutes","CalendarTime","doneButtonText","onChange","onClose","changeHoursAriaLabel","changeMinutesAriaLabel","onHoursChange","useCallback","event","Number","target","onMinutesChange","div","className","sizeY","COMPACT","getHours","options","forceDropdownPortal","aria-label","getMinutes","mode","onClick","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,EAAEC,UAAU,QAAQ,iBAAiB;AACtD,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,OAAOC,YAAY,4BAA4B;AAW/C,MAAMC,QAGD,EAAE;AACP,IAAK,IAAIC,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BD,MAAME,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC3D;AAEA,MAAMC,UAGD,EAAE;AACP,IAAK,IAAIN,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BM,QAAQL,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC7D;AAEA,OAAO,MAAME,eAAe,CAAC,EAC3BL,KAAK,EACLM,iBAAiB,QAAQ,EACzBC,QAAQ,EACRC,OAAO,EACPC,uBAAuB,cAAc,EACrCC,yBAAyB,iBAAiB,EACxB;IAClB,MAAMC,gBAAgBtB,MAAMuB,WAAW,CACrC,CAACC,QACCN,WAAWhB,SAASS,OAAOc,OAAOD,MAAME,MAAM,CAACf,KAAK,KACtD;QAACO;QAAUP;KAAM;IAEnB,MAAMgB,kBAAkB3B,MAAMuB,WAAW,CACvC,CAACC,QACCN,WAAWf,WAAWQ,OAAOc,OAAOD,MAAME,MAAM,CAACf,KAAK,KACxD;QAACO;QAAUP;KAAM;IAGnB,qBACE,oBAACiB;QAAIC,WAAWtB,MAAM,CAAC,eAAe;qBACpC,oBAACqB;QAAIC,WAAWtB,MAAM,CAAC,uBAAuB;qBAC5C,oBAACH;QAAmB0B,OAAO7B,SAAS8B,OAAO;qBACzC,oBAACzB;QACCK,OAAOA,MAAMqB,QAAQ;QACrBC,SAASzB;QACTU,UAAUI;QACVY,qBAAqB;QACrBC,cAAYf;wBAIlB,oBAACQ;QAAIC,WAAWtB,MAAM,CAAC,wBAAwB;OAAE,oBACjD,oBAACqB;QAAIC,WAAWtB,MAAM,CAAC,uBAAuB;qBAC5C,oBAACH;QAAmB0B,OAAO7B,SAAS8B,OAAO;qBACzC,oBAACzB;QACCK,OAAOA,MAAMyB,UAAU;QACvBH,SAASlB;QACTG,UAAUS;QACVO,qBAAqB;QACrBC,cAAYd;wBAIlB,oBAACO;QAAIC,WAAWtB,MAAM,CAAC,uBAAuB;qBAC5C,oBAACH;QAAmB0B,OAAO7B,SAAS8B,OAAO;qBACzC,oBAAC1B;QAAOgC,MAAK;QAAYC,SAASnB;QAASoB,MAAK;QAAIJ,cAAYlB;OAC7DA;AAMb,EAAE"}

package/dist/cssm/components/Card/Card.js

@@ -3,7 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import styles from './Card.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Card
- */ export const Card = ({ mode ='tint' , children , getRootRef , className , ...restProps })=>{
+ */ export const Card = ({ mode = 'tint', children, getRootRef, className, ...restProps })=>{
     return /*#__PURE__*/ React.createElement("div", {
         ...restProps,
         ref: getRootRef,

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,MAAO,OAAM,EACbC,SAAQ,EACRC,WAAU,EACVC,UAAS,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 { 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"}

package/dist/cssm/components/CardGrid/CardGrid.js

@@ -9,8 +9,8 @@ const sizeXClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/CardGrid
- */ export const CardGrid = ({ children , size ='s' , spaced =false , className , ...restProps })=>{
-    const { sizeX ='none'  } = useAdaptivity();
+ */ export const CardGrid = ({ children, size = 's', spaced = false, className, ...restProps })=>{
+    const { sizeX = 'none' } = useAdaptivity();
     return /*#__PURE__*/ React.createElement("div", {
         ...restProps,
         className: classNames(styles['CardGrid'], 'vkuiInternalCardGrid', spaced && styles['CardGrid--spaced'], {

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,QAAQ,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAUA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,SAAQ,EACRC,MAAO,IAAG,EACVC,QAAS,MAAK,EACdC,UAAS,EACT,GAAGC,WACW;IACd,MAAM,EAAEC,OAAQ,OAAM,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,WAAWd,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 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"}

package/dist/cssm/components/CardScroll/CardScroll.js

@@ -5,10 +5,10 @@ import { HorizontalScroll } from '../HorizontalScroll/HorizontalScroll';
 import styles from './CardScroll.module.css';
 /**
  * @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, className, ...restProps })=>{
     const refContainer = React.useRef(null);
     const gapRef = React.useRef(null);
-    const { window  } = useDOM();
+    const { window } = useDOM();
     function getScrollToLeft(offset) {
         if (!refContainer.current || !gapRef.current) {
             return offset;

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,SAAQ,EACRC,MAAO,IAAG,EACVC,YAAa,KAAI,EACjBC,YAAa,KAAI,EACjBC,UAAS,EACT,GAAGC,WACa;IAChB,MAAMC,eAAeZ,MAAMa,OAAuB;IAClD,MAAMC,SAASd,MAAMa,OAAuB;IAE5C,MAAM,EAAEE,OAAM,EAAE,GAAGb;IAEnB,SAASc,gBAAgBC,MAAc;QACrC,IAAI,CAACL,aAAaM,WAAW,CAACJ,OAAOI,SAAS;YAC5C,OAAOD;QACT;QACA,MAAME,iBAAiBP,aAAaM,QAAQE;QAC5C,MAAMC,aAAa,AAAC;eAAIT,aAAaM,QAAQZ;SAAS,CAAmBgB,UACvE,CAACC,KACCA,GAAGC,aACDD,GAAGH,cACHK,SAASV,OAAQW,iBAAiBH,IAAII,eACtCV,UACF;QAGJ,IAAII,eAAe,CAAC,GAAG;YACrB,OAAOJ;QACT;QAEA,IAAII,eAAe,GAAG;YACpB,OAAO;QACT;QAEA,MAAMO,QAAQhB,aAAaM,QAAQZ,QAAQ,CAACe,WAAW;QAEvD,MAAMQ,WACJD,MAAMJ,aAAcL,CAAAA,iBAAiBS,MAAMR,WAAU,IAAKN,OAAOI,QAAQE;QAE3E,IAAIS,YAAY,IAAIf,OAAOI,QAAQE,aAAa;YAC9C,OAAO;QACT;QAEA,OAAOS;IACT;IAEA,SAASC,iBAAiBb,MAAc;QACtC,IAAI,CAACL,aAAaM,WAAW,CAACJ,OAAOI,SAAS;YAC5C,OAAOD;QACT;QAEA,MAAME,iBAAiBP,aAAaM,QAAQE;QAC5C,MAAMQ,QAAQG,MAAMC,UAAUC,KAAKC,KACjCtB,aAAaM,QAAQZ,UACrB,CAACiB,KAAoBA,GAAGC,aAAaD,GAAGH,cAAcH,SAASE;QAGjE,IAAI,CAACS,OAAO;YACV,OAAOX;QACT;QAEA,OAAOW,MAAMJ,aAAaV,OAAOI,QAAQE;IAC3C;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 { 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"}

package/dist/cssm/components/Cell/Cell.js

@@ -12,17 +12,17 @@ import { useDraggable } from './useDraggable';
 import styles from './Cell.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Cell
- */ export const Cell = ({ mode , onRemove =noop , removePlaceholder ='Удалить' , onDragFinish , before , after , disabled , draggable , Component: ComponentProps , onChange , name , value , checked , defaultChecked , getRootRef , draggerLabel ='Перенести ячейку' , className , style , ...restProps })=>{
+ */ export const Cell = ({ mode, onRemove = noop, removePlaceholder = 'Удалить', onDragFinish, before, after, disabled, draggable, Component: ComponentProps, onChange, name, value, checked, defaultChecked, getRootRef, draggerLabel = 'Перенести ячейку', className, style, ...restProps })=>{
     const selectable = mode === 'selectable';
     const removable = mode === 'removable';
     const Component = selectable ? 'label' : ComponentProps;
     const platform = usePlatform();
     const rootElRef = useExternRef(getRootRef);
-    const { dragging , ...draggableProps } = useDraggable({
+    const { dragging, ...draggableProps } = useDraggable({
         rootElRef,
         onDragFinish
     });
-    const { toggleDrag  } = React.useContext(ListContext);
+    const { toggleDrag } = React.useContext(ListContext);
     React.useEffect(()=>{
         if (dragging) {
             toggleDrag(true);

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

@@ -1 +1 @@
-{"version":3,"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: ComponentProps,\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  const Component = selectable ? 'label' : ComponentProps;\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    Component === 'label' && 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={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\nCell.Checkbox = CellCheckbox;\n"],"names":["React","classNames","noop","useExternRef","usePlatform","Platform","ListContext","Removable","SimpleCell","CellCheckbox","CellDragger","useDraggable","styles","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","rootElRef","dragging","draggableProps","toggleDrag","useContext","useEffect","undefined","dragger","aria-label","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","IOS","simpleCell","hasHover","Fragment","e","current","div","ref","Checkbox"],"mappings":"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"}
+{"version":3,"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: ComponentProps,\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  const Component = selectable ? 'label' : ComponentProps;\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    Component === 'label' && 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={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\nCell.Checkbox = CellCheckbox;\n"],"names":["React","classNames","noop","useExternRef","usePlatform","Platform","ListContext","Removable","SimpleCell","CellCheckbox","CellDragger","useDraggable","styles","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","rootElRef","dragging","draggableProps","toggleDrag","useContext","useEffect","undefined","dragger","aria-label","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","IOS","simpleCell","hasHover","Fragment","e","current","div","ref","Checkbox"],"mappings":"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"}

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

@@ -24,7 +24,7 @@ function useTypeIcon(type) {
     }
     return 'square';
 }
-export const CellCheckbox = ({ getRootRef , getRef , className , style , type ='auto' , ...restProps })=>{
+export const CellCheckbox = ({ getRootRef, getRef, className, style, type = 'auto', ...restProps })=>{
     const typeIcon = useTypeIcon(type);
     const IconOff = typeIcon === 'circle' ? Icon24CheckCircleOff : CheckBoxOff;
     const IconOn = typeIcon === 'circle' ? Icon24CheckCircleOn : CheckBoxOn;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { AdaptiveIconRenderer } from '../../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nconst CheckBoxOn = () => (\n  <AdaptiveIconRenderer IconCompact={Icon20CheckBoxOn} IconRegular={Icon24CheckBoxOn} />\n);\n\nconst CheckBoxOff = () => (\n  <AdaptiveIconRenderer IconCompact={Icon20CheckBoxOff} IconRegular={Icon24CheckBoxOff} />\n);\n\nfunction useTypeIcon(type: NonNullable<CellCheckboxProps['type']>) {\n  const platform = usePlatform();\n\n  if (type !== 'auto') {\n    return type;\n  }\n\n  if (platform === Platform.IOS || platform === Platform.VKCOM) {\n    return 'circle';\n  }\n\n  return 'square';\n}\n\nexport interface CellCheckboxProps\n  extends Pick<CellProps, 'defaultChecked' | 'checked'>,\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLSpanElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * Вид чекбокса. Если auto, то зависит от платформы.\n   */\n  type?: 'auto' | 'circle' | 'square';\n}\n\nexport const CellCheckbox = ({\n  getRootRef,\n  getRef,\n  className,\n  style,\n  type = 'auto',\n  ...restProps\n}: CellCheckboxProps) => {\n  const typeIcon = useTypeIcon(type);\n\n  const IconOff = typeIcon === 'circle' ? Icon24CheckCircleOff : CheckBoxOff;\n  const IconOn = typeIcon === 'circle' ? Icon24CheckCircleOn : CheckBoxOn;\n\n  return (\n    <span className={classNames(styles['CellCheckbox'], className)} style={style} ref={getRootRef}>\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        className={styles['CellCheckbox__input']}\n        getRootRef={getRef}\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"],"names":["React","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","classNames","usePlatform","Platform","AdaptiveIconRenderer","VisuallyHidden","styles","CheckBoxOn","IconCompact","IconRegular","CheckBoxOff","useTypeIcon","type","platform","IOS","VKCOM","CellCheckbox","getRootRef","getRef","className","style","restProps","typeIcon","IconOff","IconOn","span","ref","Component","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,oBAAoB,QAAQ,kDAAkD;AACvF,SAASC,cAAc,QAAQ,sCAAsC;AAErE,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,aAAa,kBACjB,oBAACH;QAAqBI,aAAaZ;QAAkBa,aAAaX;;AAGpE,MAAMY,cAAc,kBAClB,oBAACN;QAAqBI,aAAab;QAAmBc,aAAaZ;;AAGrE,SAASc,YAAYC,IAA4C;IAC/D,MAAMC,WAAWX;IAEjB,IAAIU,SAAS,QAAQ;QACnB,OAAOA;IACT;IAEA,IAAIC,aAAaV,SAASW,OAAOD,aAAaV,SAASY,OAAO;QAC5D,OAAO;IACT;IAEA,OAAO;AACT;AAaA,OAAO,MAAMC,eAAe,CAAC,EAC3BC,WAAU,EACVC,OAAM,EACNC,UAAS,EACTC,MAAK,EACLR,MAAO,OAAM,EACb,GAAGS,WACe;IAClB,MAAMC,WAAWX,YAAYC;IAE7B,MAAMW,UAAUD,aAAa,WAAWvB,uBAAuBW;IAC/D,MAAMc,SAASF,aAAa,WAAWtB,sBAAsBO;IAE7D,qBACE,oBAACkB;QAAKN,WAAWlB,WAAWK,MAAM,CAAC,eAAe,EAAEa;QAAYC,OAAOA;QAAOM,KAAKT;qBACjF,oBAACZ;QACE,GAAGgB,SAAS;QACbM,WAAU;QACVf,MAAK;QACLO,WAAWb,MAAM,CAAC,sBAAsB;QACxCW,YAAYC;sBAEd,oBAACO;QACCN,WAAWlB,WAAWK,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,0BAA0B;QACrFsB,eAAAA;qBAEA,oBAACL,+BAEH,oBAACE;QACCN,WAAWlB,WAAWK,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,yBAAyB;QACpFsB,eAAAA;qBAEA,oBAACJ;AAIT,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { AdaptiveIconRenderer } from '../../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nconst CheckBoxOn = () => (\n  <AdaptiveIconRenderer IconCompact={Icon20CheckBoxOn} IconRegular={Icon24CheckBoxOn} />\n);\n\nconst CheckBoxOff = () => (\n  <AdaptiveIconRenderer IconCompact={Icon20CheckBoxOff} IconRegular={Icon24CheckBoxOff} />\n);\n\nfunction useTypeIcon(type: NonNullable<CellCheckboxProps['type']>) {\n  const platform = usePlatform();\n\n  if (type !== 'auto') {\n    return type;\n  }\n\n  if (platform === Platform.IOS || platform === Platform.VKCOM) {\n    return 'circle';\n  }\n\n  return 'square';\n}\n\nexport interface CellCheckboxProps\n  extends Pick<CellProps, 'defaultChecked' | 'checked'>,\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLSpanElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * Вид чекбокса. Если auto, то зависит от платформы.\n   */\n  type?: 'auto' | 'circle' | 'square';\n}\n\nexport const CellCheckbox = ({\n  getRootRef,\n  getRef,\n  className,\n  style,\n  type = 'auto',\n  ...restProps\n}: CellCheckboxProps) => {\n  const typeIcon = useTypeIcon(type);\n\n  const IconOff = typeIcon === 'circle' ? Icon24CheckCircleOff : CheckBoxOff;\n  const IconOn = typeIcon === 'circle' ? Icon24CheckCircleOn : CheckBoxOn;\n\n  return (\n    <span className={classNames(styles['CellCheckbox'], className)} style={style} ref={getRootRef}>\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        className={styles['CellCheckbox__input']}\n        getRootRef={getRef}\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"],"names":["React","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","classNames","usePlatform","Platform","AdaptiveIconRenderer","VisuallyHidden","styles","CheckBoxOn","IconCompact","IconRegular","CheckBoxOff","useTypeIcon","type","platform","IOS","VKCOM","CellCheckbox","getRootRef","getRef","className","style","restProps","typeIcon","IconOff","IconOn","span","ref","Component","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,oBAAoB,QAAQ,kDAAkD;AACvF,SAASC,cAAc,QAAQ,sCAAsC;AAErE,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,aAAa,kBACjB,oBAACH;QAAqBI,aAAaZ;QAAkBa,aAAaX;;AAGpE,MAAMY,cAAc,kBAClB,oBAACN;QAAqBI,aAAab;QAAmBc,aAAaZ;;AAGrE,SAASc,YAAYC,IAA4C;IAC/D,MAAMC,WAAWX;IAEjB,IAAIU,SAAS,QAAQ;QACnB,OAAOA;IACT;IAEA,IAAIC,aAAaV,SAASW,GAAG,IAAID,aAAaV,SAASY,KAAK,EAAE;QAC5D,OAAO;IACT;IAEA,OAAO;AACT;AAaA,OAAO,MAAMC,eAAe,CAAC,EAC3BC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,KAAK,EACLR,OAAO,MAAM,EACb,GAAGS,WACe;IAClB,MAAMC,WAAWX,YAAYC;IAE7B,MAAMW,UAAUD,aAAa,WAAWvB,uBAAuBW;IAC/D,MAAMc,SAASF,aAAa,WAAWtB,sBAAsBO;IAE7D,qBACE,oBAACkB;QAAKN,WAAWlB,WAAWK,MAAM,CAAC,eAAe,EAAEa;QAAYC,OAAOA;QAAOM,KAAKT;qBACjF,oBAACZ;QACE,GAAGgB,SAAS;QACbM,WAAU;QACVf,MAAK;QACLO,WAAWb,MAAM,CAAC,sBAAsB;QACxCW,YAAYC;sBAEd,oBAACO;QACCN,WAAWlB,WAAWK,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,0BAA0B;QACrFsB,eAAAA;qBAEA,oBAACL,+BAEH,oBAACE;QACCN,WAAWlB,WAAWK,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,yBAAyB;QACpFsB,eAAAA;qBAEA,oBAACJ;AAIT,EAAE"}

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

@@ -5,7 +5,7 @@ import { usePlatform } from '../../../hooks/usePlatform';
 import { Platform } from '../../../lib/platform';
 import { Touch } from '../../Touch/Touch';
 import styles from './CellDragger.module.css';
-export const CellDragger = ({ onDragStart , onDragMove , onDragEnd , onClick , className , ...restProps })=>{
+export const CellDragger = ({ onDragStart, onDragMove, onDragEnd, onClick, className, ...restProps })=>{
     const platform = usePlatform();
     const handleClick = (event)=>{
         event.preventDefault();

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,YAAW,EACXC,WAAU,EACVC,UAAS,EACTC,QAAO,EACPC,UAAS,EACT,GAAGC,WACc;IACjB,MAAMC,WAAWX;IAEjB,MAAMY,cAAc,CAACC;QACnBA,MAAMC;QACN,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,oBAAM,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 { 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"}

package/dist/cssm/components/Cell/useDraggable.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export const useDraggable = ({ rootElRef , onDragFinish  })=>{
+export const useDraggable = ({ rootElRef, onDragFinish })=>{
     const [dragging, setDragging] = React.useState(false);
     const [siblings, setSiblings] = React.useState([]);
     const [dragStartIndex, setDragStartIndex] = React.useState(0);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Cell/useDraggable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TouchEvent } from '../Touch/Touch';\nimport { CellProps } from './Cell';\n\nexport interface DraggableProps {\n  onDragStart(event: TouchEvent): void;\n  onDragEnd(event: TouchEvent): void;\n  onDragMove(event: TouchEvent): void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n  dragging: boolean;\n}\n\nexport const useDraggable = <T extends HTMLElement>({\n  rootElRef,\n  onDragFinish,\n}: Pick<CellProps, 'onDragFinish'> & {\n  rootElRef: React.MutableRefObject<T | null>;\n}) => {\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);\n  const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);\n  const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);\n  const [dragShift, setDragShift] = React.useState<number>(0);\n  const [dragDirection, setDragDirection] = React.useState<'down' | 'up' | undefined>(undefined);\n\n  const onDragStart = (event: TouchEvent) => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    setDragging(true);\n\n    let _siblings: HTMLElement[] = [];\n    if (rootEl.parentElement?.childNodes) {\n      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n    }\n    const idx = _siblings.indexOf(rootEl);\n\n    setDragStartIndex(idx);\n    setDragEndIndex(idx);\n    setSiblings(_siblings);\n    setDragShift(0);\n  };\n\n  const onDragMove = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${event.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - event.shiftY < 0 ? 'down' : 'up');\n      setDragShift(event.shiftY);\n      setDragEndIndex(dragStartIndex);\n\n      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n        const siblingGesture = sibling.getBoundingClientRect();\n        const siblingHalfHeight = siblingGesture.height / 2;\n\n        const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n        const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n        if (dragStartIndex < siblingIndex) {\n          if (rootOverSibling) {\n            if (dragDirection === 'down') {\n              sibling.style.transform = 'translateY(-100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n          }\n          if (rootUnderSibling && dragDirection === 'up') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        } else if (dragStartIndex > siblingIndex) {\n          if (rootUnderSibling) {\n            if (dragDirection === 'up') {\n              sibling.style.transform = 'translateY(100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n          }\n          if (rootOverSibling && dragDirection === 'down') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        }\n      });\n    }\n  };\n\n  const onDragEnd = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = '';\n    });\n\n    setSiblings([]);\n    setDragEndIndex(0);\n    setDragStartIndex(0);\n    setDragDirection(undefined);\n    setDragShift(0);\n\n    setDragging(false);\n\n    onDragFinish && onDragFinish({ from, to });\n  };\n\n  const useDraggableProps: UseDraggableProps = {\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    dragging,\n  };\n\n  return useDraggableProps;\n};\n"],"names":["React","useDraggable","rootElRef","onDragFinish","dragging","setDragging","useState","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","dragDirection","setDragDirection","undefined","onDragStart","event","rootEl","current","originalEvent","stopPropagation","preventDefault","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","to","useDraggableProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAc/B,OAAO,MAAMC,eAAe,CAAwB,EAClDC,UAAS,EACTC,aAAY,EAGb;IACC,MAAM,CAACC,UAAUC,YAAY,GAAGL,MAAMM,SAAkB;IAExD,MAAM,CAACC,UAAUC,YAAY,GAAGR,MAAMM,SAAwB,EAAE;IAChE,MAAM,CAACG,gBAAgBC,kBAAkB,GAAGV,MAAMM,SAAiB;IACnE,MAAM,CAACK,cAAcC,gBAAgB,GAAGZ,MAAMM,SAAiB;IAC/D,MAAM,CAACO,WAAWC,aAAa,GAAGd,MAAMM,SAAiB;IACzD,MAAM,CAACS,eAAeC,iBAAiB,GAAGhB,MAAMM,SAAoCW;IAEpF,MAAMC,cAAc,CAACC;QACnB,MAAMC,SAASlB,UAAUmB;QACzB,IAAI,CAACD,QAAQ;YACX;QACF;QACAD,MAAMG,cAAcC;QACpBJ,MAAMG,cAAcE;QAEpBnB,YAAY;QAEZ,IAAIoB,YAA2B,EAAE;QACjC,IAAIL,OAAOM,eAAeC,YAAY;YACpCF,YAAYG,MAAMC,KAAKT,OAAOM,cAAcI;QAC9C;QACA,MAAMC,MAAMN,UAAUO,QAAQZ;QAE9BV,kBAAkBqB;QAClBnB,gBAAgBmB;QAChBvB,YAAYiB;QACZX,aAAa;IACf;IAEA,MAAMmB,aAAa,CAACd;QAClBA,MAAMG,cAAcC;QACpBJ,MAAMG,cAAcE;QAEpB,MAAMJ,SAASlB,UAAUmB;QAEzB,IAAID,QAAQ;YACVA,OAAOc,MAAMC,YAAY,CAAC,WAAW,EAAEhB,MAAMiB,OAAO,GAAG,CAAC;YACxD,MAAMC,cAAcjB,OAAOkB;YAE3BtB,iBAAiBH,YAAYM,MAAMiB,SAAS,IAAI,SAAS;YACzDtB,aAAaK,MAAMiB;YACnBxB,gBAAgBH;YAEhBF,SAASgC,QAAQ,CAACC,SAAsBC;gBACtC,MAAMC,iBAAiBF,QAAQF;gBAC/B,MAAMK,oBAAoBD,eAAeE,SAAS;gBAElD,MAAMC,kBAAkBR,YAAYS,SAASJ,eAAeK,MAAMJ;gBAClE,MAAMK,mBAAmBX,YAAYU,MAAML,eAAeI,SAASH;gBAEnE,IAAIlC,iBAAiBgC,cAAc;oBACjC,IAAII,iBAAiB;wBACnB,IAAI9B,kBAAkB,QAAQ;4BAC5ByB,QAAQN,MAAMC,YAAY;wBAC5B;wBAEAvB,gBAAgB,CAACD,eAAiBA,eAAe;oBACnD;oBACA,IAAIqC,oBAAoBjC,kBAAkB,MAAM;wBAC9CyB,QAAQN,MAAMC,YAAY;oBAC5B;gBACF,OAAO,IAAI1B,iBAAiBgC,cAAc;oBACxC,IAAIO,kBAAkB;wBACpB,IAAIjC,kBAAkB,MAAM;4BAC1ByB,QAAQN,MAAMC,YAAY;wBAC5B;wBAEAvB,gBAAgB,CAACD,eAAiBA,eAAe;oBACnD;oBACA,IAAIkC,mBAAmB9B,kBAAkB,QAAQ;wBAC/CyB,QAAQN,MAAMC,YAAY;oBAC5B;gBACF;YACF;QACF;IACF;IAEA,MAAMc,YAAY,CAAC9B;QACjBA,MAAMG,cAAcC;QACpBJ,MAAMG,cAAcE;QAEpB,MAAM,CAACK,MAAMqB,GAAG,GAAG;YAACzC;YAAgBE;SAAa;QAEjDJ,SAASgC,QAAQ,CAACC;YAChBA,QAAQN,MAAMC,YAAY;QAC5B;QAEA3B,YAAY,EAAE;QACdI,gBAAgB;QAChBF,kBAAkB;QAClBM,iBAAiBC;QACjBH,aAAa;QAEbT,YAAY;QAEZF,gBAAgBA,aAAa;YAAE0B;YAAMqB;QAAG;IAC1C;IAEA,MAAMC,oBAAuC;QAC3CjC;QACAe;QACAgB;QACA7C;IACF;IAEA,OAAO+C;AACT,EAAE"}
+{"version":3,"sources":["../../../../src/components/Cell/useDraggable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TouchEvent } from '../Touch/Touch';\nimport { CellProps } from './Cell';\n\nexport interface DraggableProps {\n  onDragStart(event: TouchEvent): void;\n  onDragEnd(event: TouchEvent): void;\n  onDragMove(event: TouchEvent): void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n  dragging: boolean;\n}\n\nexport const useDraggable = <T extends HTMLElement>({\n  rootElRef,\n  onDragFinish,\n}: Pick<CellProps, 'onDragFinish'> & {\n  rootElRef: React.MutableRefObject<T | null>;\n}) => {\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);\n  const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);\n  const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);\n  const [dragShift, setDragShift] = React.useState<number>(0);\n  const [dragDirection, setDragDirection] = React.useState<'down' | 'up' | undefined>(undefined);\n\n  const onDragStart = (event: TouchEvent) => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    setDragging(true);\n\n    let _siblings: HTMLElement[] = [];\n    if (rootEl.parentElement?.childNodes) {\n      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n    }\n    const idx = _siblings.indexOf(rootEl);\n\n    setDragStartIndex(idx);\n    setDragEndIndex(idx);\n    setSiblings(_siblings);\n    setDragShift(0);\n  };\n\n  const onDragMove = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${event.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - event.shiftY < 0 ? 'down' : 'up');\n      setDragShift(event.shiftY);\n      setDragEndIndex(dragStartIndex);\n\n      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n        const siblingGesture = sibling.getBoundingClientRect();\n        const siblingHalfHeight = siblingGesture.height / 2;\n\n        const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n        const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n        if (dragStartIndex < siblingIndex) {\n          if (rootOverSibling) {\n            if (dragDirection === 'down') {\n              sibling.style.transform = 'translateY(-100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n          }\n          if (rootUnderSibling && dragDirection === 'up') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        } else if (dragStartIndex > siblingIndex) {\n          if (rootUnderSibling) {\n            if (dragDirection === 'up') {\n              sibling.style.transform = 'translateY(100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n          }\n          if (rootOverSibling && dragDirection === 'down') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        }\n      });\n    }\n  };\n\n  const onDragEnd = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = '';\n    });\n\n    setSiblings([]);\n    setDragEndIndex(0);\n    setDragStartIndex(0);\n    setDragDirection(undefined);\n    setDragShift(0);\n\n    setDragging(false);\n\n    onDragFinish && onDragFinish({ from, to });\n  };\n\n  const useDraggableProps: UseDraggableProps = {\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    dragging,\n  };\n\n  return useDraggableProps;\n};\n"],"names":["React","useDraggable","rootElRef","onDragFinish","dragging","setDragging","useState","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","dragDirection","setDragDirection","undefined","onDragStart","event","rootEl","current","originalEvent","stopPropagation","preventDefault","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","to","useDraggableProps"],"mappings":"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"}

package/dist/cssm/components/CellButton/CellButton.js

@@ -4,7 +4,7 @@ import { SimpleCell } from '../SimpleCell/SimpleCell';
 import styles from './CellButton.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/CellButton
- */ export const CellButton = ({ centered =false , mode ='primary' , className , ...restProps })=>{
+ */ export const CellButton = ({ centered = false, mode = 'primary', className, ...restProps })=>{
     return /*#__PURE__*/ React.createElement(SimpleCell, {
         stopPropagation: true,
         ...restProps,

package/dist/cssm/components/CellButton/CellButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CellButton/CellButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport styles from './CellButton.module.css';\n\nexport interface CellButtonProps extends SimpleCellProps {\n  mode?: 'primary' | 'danger';\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CellButton\n */\nexport const CellButton = ({\n  centered = false,\n  mode = 'primary',\n  className,\n  ...restProps\n}: CellButtonProps) => {\n  return (\n    <SimpleCell\n      stopPropagation={true}\n      {...restProps}\n      className={classNames(\n        styles['CellButton'],\n        'vkuiInternalCellButton',\n        mode === 'danger' &&\n          classNames(styles['CellButton--mode-danger'], 'vkuiInternalCellButton--mode-danger'),\n        centered && styles['CellButton--centered'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","SimpleCell","styles","CellButton","centered","mode","className","restProps","stopPropagation"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAyB,2BAA2B;AACvE,OAAOC,YAAY,0BAA0B;AAO7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,UAAW,MAAK,EAChBC,MAAO,UAAS,EAChBC,UAAS,EACT,GAAGC,WACa;IAChB,qBACE,oBAACN;QACCO,iBAAiB;QAChB,GAAGD,SAAS;QACbD,WAAWN,WACTE,MAAM,CAAC,aAAa,EACpB,0BACAG,SAAS,YACPL,WAAWE,MAAM,CAAC,0BAA0B,EAAE,wCAChDE,YAAYF,MAAM,CAAC,uBAAuB,EAC1CI;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/CellButton/CellButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport styles from './CellButton.module.css';\n\nexport interface CellButtonProps extends SimpleCellProps {\n  mode?: 'primary' | 'danger';\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CellButton\n */\nexport const CellButton = ({\n  centered = false,\n  mode = 'primary',\n  className,\n  ...restProps\n}: CellButtonProps) => {\n  return (\n    <SimpleCell\n      stopPropagation={true}\n      {...restProps}\n      className={classNames(\n        styles['CellButton'],\n        'vkuiInternalCellButton',\n        mode === 'danger' &&\n          classNames(styles['CellButton--mode-danger'], 'vkuiInternalCellButton--mode-danger'),\n        centered && styles['CellButton--centered'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","SimpleCell","styles","CellButton","centered","mode","className","restProps","stopPropagation"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAyB,2BAA2B;AACvE,OAAOC,YAAY,0BAA0B;AAO7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,WAAW,KAAK,EAChBC,OAAO,SAAS,EAChBC,SAAS,EACT,GAAGC,WACa;IAChB,qBACE,oBAACN;QACCO,iBAAiB;QAChB,GAAGD,SAAS;QACbD,WAAWN,WACTE,MAAM,CAAC,aAAa,EACpB,0BACAG,SAAS,YACPL,WAAWE,MAAM,CAAC,0BAA0B,EAAE,wCAChDE,YAAYF,MAAM,CAAC,uBAAuB,EAC1CI;;AAIR,EAAE"}

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

@@ -20,11 +20,11 @@ const sizeYClassNames = {
 const warn = warnOnce('Checkbox');
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
- */ export const Checkbox = ({ children , className , style , getRootRef , getRef , description , indeterminate , defaultIndeterminate , hoverMode , activeMode , hasHover , hasActive , focusVisibleMode , onChange , titleAfter , ...restProps })=>{
+ */ export const Checkbox = ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, onChange, titleAfter, ...restProps })=>{
     const inputRef = useExternRef(getRef);
     const platform = usePlatform();
-    const { sizeY ='none'  } = useAdaptivity();
-    const { sizeY: adaptiveSizeY  } = useAdaptivityConditionalRender();
+    const { sizeY = 'none' } = useAdaptivity();
+    const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();
     React.useEffect(()=>{
         const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;
         if (inputRef.current) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Checkbox--sizeY-regular'],\n};\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n  titleAfter?: React.ReactNode;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  titleAfter,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n        sizeYClassNames[sizeY],\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__title']}>\n          <span>{children}</span>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","hasReactNode","useAdaptivity","useAdaptivityConditionalRender","useExternRef","usePlatform","SizeType","Platform","warnOnce","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","REGULAR","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Component","VKCOM","disabled","activeEffectDelay","IOS","type","div","Fragment","compact","regular","width","height","span"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Checkbox--sizeY-regular'],\n};\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n  titleAfter?: React.ReactNode;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  titleAfter,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n        sizeYClassNames[sizeY],\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__title']}>\n          <span>{children}</span>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","hasReactNode","useAdaptivity","useAdaptivityConditionalRender","useExternRef","usePlatform","SizeType","Platform","warnOnce","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","REGULAR","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Component","VKCOM","disabled","activeEffectDelay","IOS","type","div","Fragment","compact","regular","width","height","span"],"mappings":"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"}

package/dist/cssm/components/Chip/Chip.js

@@ -13,8 +13,8 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Chip
- */ export const Chip = ({ value ='' , option , removable =true , onRemove =noop , removeAriaLabel ='Удалить' , before =null , after , children , className , ...restProps })=>{
-    const { sizeY ='none'  } = useAdaptivity();
+ */ export const Chip = ({ value = '', option, removable = true, onRemove = noop, removeAriaLabel = 'Удалить', before = null, after, children, className, ...restProps })=>{
+    const { sizeY = 'none' } = useAdaptivity();
     const onRemoveWrapper = React.useCallback((event)=>{
         onRemove(event, value);
     }, [

package/dist/cssm/components/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Chip--sizeY-none'],\n  [SizeType.COMPACT]: styles['Chip--sizeY-compact'],\n};\n\nexport type ChipValue = string | number;\n\nexport interface ChipOption {\n  value?: ChipValue;\n  label?: string;\n  [otherProp: string]: any;\n}\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: ChipValue;\n  option?: ChipOption;\n  onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n  removable?: boolean;\n  removeAriaLabel?: string;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n}\n\nexport interface RenderChip<T extends ChipOption> extends ChipProps {\n  label: string;\n  option: T;\n  disabled: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  value = '',\n  option,\n  removable = true,\n  onRemove = noop,\n  removeAriaLabel = 'Удалить',\n  before = null,\n  after,\n  children,\n  className,\n  ...restProps\n}: ChipProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove(event, value);\n    },\n    [onRemove, value],\n  );\n  const title = getTitleFromChildren(children);\n\n  return (\n    <div\n      className={classNames(\n        styles['Chip'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        removable && styles['Chip--removable'],\n        className,\n      )}\n      role=\"option\"\n      aria-label={title}\n      {...restProps}\n    >\n      <div className={styles['Chip__in']} role=\"presentation\">\n        {hasReactNode(before) && <div className={styles['Chip__before']}>{before}</div>}\n        <Footnote className={styles['Chip__content']} title={title} aria-hidden>\n          {children}\n        </Footnote>\n        {hasReactNode(after) && <div className={styles['Chip__after']}>{after}</div>}\n\n        {removable && (\n          <Tappable\n            Component=\"button\"\n            className={styles['Chip__remove']}\n            onClick={onRemoveWrapper}\n            hasHover={false}\n            hasActive={false}\n            aria-label={`${removeAriaLabel} ${title}`}\n          >\n            <Icon16Cancel />\n          </Tappable>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","noop","useAdaptivity","SizeType","getTitleFromChildren","Tappable","Footnote","styles","sizeYClassNames","none","COMPACT","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","className","restProps","sizeY","onRemoveWrapper","useCallback","event","title","div","REGULAR","role","aria-label","aria-hidden","Component","onClick","hasHover","hasActive"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,oBAAoB;AAEvC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,mBAAmB;IAChC,CAACJ,SAASO,QAAQ,EAAEH,MAAM,CAAC,sBAAsB;AACnD;AA0BA;;CAEC,GACD,OAAO,MAAMI,OAAO,CAAC,EACnBC,OAAQ,GAAE,EACVC,OAAM,EACNC,WAAY,KAAI,EAChBC,UAAWd,KAAI,EACfe,iBAAkB,UAAS,EAC3BC,QAAS,KAAI,EACbC,MAAK,EACLC,SAAQ,EACRC,UAAS,EACT,GAAGC,WACO;IACV,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGpB;IAC3B,MAAMqB,kBAAkB1B,MAAM2B,YAC5B,CAACC;QACCV,SAASU,OAAOb;IAClB,GACA;QAACG;QAAUH;KAAM;IAEnB,MAAMc,QAAQtB,qBAAqBe;IAEnC,qBACE,oBAACQ;QACCP,WAAWrB,WACTQ,MAAM,CAAC,OAAO,EACde,UAAUnB,SAASyB,WAAWpB,eAAe,CAACc,MAAM,EACpDR,aAAaP,MAAM,CAAC,kBAAkB,EACtCa;QAEFS,MAAK;QACLC,cAAYJ;QACX,GAAGL,SAAS;qBAEb,oBAACM;QAAIP,WAAWb,MAAM,CAAC,WAAW;QAAEsB,MAAK;OACtC7B,aAAaiB,yBAAW,oBAACU;QAAIP,WAAWb,MAAM,CAAC,eAAe;OAAGU,uBAClE,oBAACX;QAASc,WAAWb,MAAM,CAAC,gBAAgB;QAAEmB,OAAOA;QAAOK,eAAAA;OACzDZ,WAEFnB,aAAakB,wBAAU,oBAACS;QAAIP,WAAWb,MAAM,CAAC,cAAc;OAAGW,QAE/DJ,2BACC,oBAACT;QACC2B,WAAU;QACVZ,WAAWb,MAAM,CAAC,eAAe;QACjC0B,SAASV;QACTW,UAAU;QACVC,WAAW;QACXL,cAAY,CAAC,EAAEd,gBAAgB,CAAC,EAAEU,MAAM,CAAC;qBAEzC,oBAAC5B;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Chip--sizeY-none'],\n  [SizeType.COMPACT]: styles['Chip--sizeY-compact'],\n};\n\nexport type ChipValue = string | number;\n\nexport interface ChipOption {\n  value?: ChipValue;\n  label?: string;\n  [otherProp: string]: any;\n}\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: ChipValue;\n  option?: ChipOption;\n  onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n  removable?: boolean;\n  removeAriaLabel?: string;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n}\n\nexport interface RenderChip<T extends ChipOption> extends ChipProps {\n  label: string;\n  option: T;\n  disabled: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  value = '',\n  option,\n  removable = true,\n  onRemove = noop,\n  removeAriaLabel = 'Удалить',\n  before = null,\n  after,\n  children,\n  className,\n  ...restProps\n}: ChipProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove(event, value);\n    },\n    [onRemove, value],\n  );\n  const title = getTitleFromChildren(children);\n\n  return (\n    <div\n      className={classNames(\n        styles['Chip'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        removable && styles['Chip--removable'],\n        className,\n      )}\n      role=\"option\"\n      aria-label={title}\n      {...restProps}\n    >\n      <div className={styles['Chip__in']} role=\"presentation\">\n        {hasReactNode(before) && <div className={styles['Chip__before']}>{before}</div>}\n        <Footnote className={styles['Chip__content']} title={title} aria-hidden>\n          {children}\n        </Footnote>\n        {hasReactNode(after) && <div className={styles['Chip__after']}>{after}</div>}\n\n        {removable && (\n          <Tappable\n            Component=\"button\"\n            className={styles['Chip__remove']}\n            onClick={onRemoveWrapper}\n            hasHover={false}\n            hasActive={false}\n            aria-label={`${removeAriaLabel} ${title}`}\n          >\n            <Icon16Cancel />\n          </Tappable>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","noop","useAdaptivity","SizeType","getTitleFromChildren","Tappable","Footnote","styles","sizeYClassNames","none","COMPACT","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","className","restProps","sizeY","onRemoveWrapper","useCallback","event","title","div","REGULAR","role","aria-label","aria-hidden","Component","onClick","hasHover","hasActive"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,oBAAoB;AAEvC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,mBAAmB;IAChC,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,sBAAsB;AACnD;AA0BA;;CAEC,GACD,OAAO,MAAMI,OAAO,CAAC,EACnBC,QAAQ,EAAE,EACVC,MAAM,EACNC,YAAY,IAAI,EAChBC,WAAWd,IAAI,EACfe,kBAAkB,SAAS,EAC3BC,SAAS,IAAI,EACbC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACO;IACV,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGpB;IAC3B,MAAMqB,kBAAkB1B,MAAM2B,WAAW,CACvC,CAACC;QACCV,SAASU,OAAOb;IAClB,GACA;QAACG;QAAUH;KAAM;IAEnB,MAAMc,QAAQtB,qBAAqBe;IAEnC,qBACE,oBAACQ;QACCP,WAAWrB,WACTQ,MAAM,CAAC,OAAO,EACde,UAAUnB,SAASyB,OAAO,IAAIpB,eAAe,CAACc,MAAM,EACpDR,aAAaP,MAAM,CAAC,kBAAkB,EACtCa;QAEFS,MAAK;QACLC,cAAYJ;QACX,GAAGL,SAAS;qBAEb,oBAACM;QAAIP,WAAWb,MAAM,CAAC,WAAW;QAAEsB,MAAK;OACtC7B,aAAaiB,yBAAW,oBAACU;QAAIP,WAAWb,MAAM,CAAC,eAAe;OAAGU,uBAClE,oBAACX;QAASc,WAAWb,MAAM,CAAC,gBAAgB;QAAEmB,OAAOA;QAAOK,eAAAA;OACzDZ,WAEFnB,aAAakB,wBAAU,oBAACS;QAAIP,WAAWb,MAAM,CAAC,cAAc;OAAGW,QAE/DJ,2BACC,oBAACT;QACC2B,WAAU;QACVZ,WAAWb,MAAM,CAAC,eAAe;QACjC0B,SAASV;QACTW,UAAU;QACVC,WAAW;QACXL,cAAY,CAAC,EAAEd,gBAAgB,CAAC,EAAEU,MAAM,CAAC;qBAEzC,oBAAC5B;AAMb,EAAE"}

package/dist/cssm/components/ChipsInput/ChipsInput.js

@@ -5,7 +5,7 @@ import { FormField } from '../FormField/FormField';
 import styles from './ChipsInput.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsInput
- */ export const ChipsInput = ({ style , className , getRootRef , before , after , status , mode , ...restProps })=>{
+ */ export const ChipsInput = ({ style, className, getRootRef, before, after, status, mode, ...restProps })=>{
     return /*#__PURE__*/ React.createElement(FormField, {
         getRootRef: getRootRef,
         className: classNames(styles['ChipsInput'], 'vkuiInternalChipsInput', className),

package/dist/cssm/components/ChipsInput/ChipsInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ChipOption } from '../Chip/Chip';\nimport { ChipsInputBase, ChipsInputBaseProps } from '../ChipsInputBase/ChipsInputBase';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport styles from './ChipsInput.module.css';\n\nexport interface ChipsInputProps<Option extends ChipOption>\n  extends ChipsInputBaseProps<Option>,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsInput\n */\nexport const ChipsInput = <Option extends ChipOption>({\n  style,\n  className,\n  getRootRef,\n  before,\n  after,\n  status,\n  mode,\n  ...restProps\n}: ChipsInputProps<Option>) => {\n  return (\n    <FormField\n      getRootRef={getRootRef}\n      className={classNames(styles['ChipsInput'], 'vkuiInternalChipsInput', className)}\n      style={style}\n      disabled={restProps.disabled}\n      before={before}\n      after={after}\n      role=\"application\"\n      aria-disabled={restProps.disabled}\n      aria-readonly={restProps.readOnly}\n      status={status}\n      mode={mode}\n    >\n      <ChipsInputBase {...restProps} />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","ChipsInputBase","FormField","styles","ChipsInput","style","className","getRootRef","before","after","status","mode","restProps","disabled","role","aria-disabled","aria-readonly","readOnly"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,cAAc,QAA6B,mCAAmC;AACvF,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,0BAA0B;AAM7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAA4B,EACpDC,MAAK,EACLC,UAAS,EACTC,WAAU,EACVC,OAAM,EACNC,MAAK,EACLC,OAAM,EACNC,KAAI,EACJ,GAAGC,WACqB;IACxB,qBACE,oBAACV;QACCK,YAAYA;QACZD,WAAWN,WAAWG,MAAM,CAAC,aAAa,EAAE,0BAA0BG;QACtED,OAAOA;QACPQ,UAAUD,UAAUC;QACpBL,QAAQA;QACRC,OAAOA;QACPK,MAAK;QACLC,iBAAeH,UAAUC;QACzBG,iBAAeJ,UAAUK;QACzBP,QAAQA;QACRC,MAAMA;qBAEN,oBAACV,gBAAmBW;AAG1B,EAAE"}
+{"version":3,"sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ChipOption } from '../Chip/Chip';\nimport { ChipsInputBase, ChipsInputBaseProps } from '../ChipsInputBase/ChipsInputBase';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport styles from './ChipsInput.module.css';\n\nexport interface ChipsInputProps<Option extends ChipOption>\n  extends ChipsInputBaseProps<Option>,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsInput\n */\nexport const ChipsInput = <Option extends ChipOption>({\n  style,\n  className,\n  getRootRef,\n  before,\n  after,\n  status,\n  mode,\n  ...restProps\n}: ChipsInputProps<Option>) => {\n  return (\n    <FormField\n      getRootRef={getRootRef}\n      className={classNames(styles['ChipsInput'], 'vkuiInternalChipsInput', className)}\n      style={style}\n      disabled={restProps.disabled}\n      before={before}\n      after={after}\n      role=\"application\"\n      aria-disabled={restProps.disabled}\n      aria-readonly={restProps.readOnly}\n      status={status}\n      mode={mode}\n    >\n      <ChipsInputBase {...restProps} />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","ChipsInputBase","FormField","styles","ChipsInput","style","className","getRootRef","before","after","status","mode","restProps","disabled","role","aria-disabled","aria-readonly","readOnly"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,cAAc,QAA6B,mCAAmC;AACvF,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,0BAA0B;AAM7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAA4B,EACpDC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJ,GAAGC,WACqB;IACxB,qBACE,oBAACV;QACCK,YAAYA;QACZD,WAAWN,WAAWG,MAAM,CAAC,aAAa,EAAE,0BAA0BG;QACtED,OAAOA;QACPQ,UAAUD,UAAUC,QAAQ;QAC5BL,QAAQA;QACRC,OAAOA;QACPK,MAAK;QACLC,iBAAeH,UAAUC,QAAQ;QACjCG,iBAAeJ,UAAUK,QAAQ;QACjCP,QAAQA;QACRC,MAAMA;qBAEN,oBAACV,gBAAmBW;AAG1B,EAAE"}