npm - @vkontakte/vkui - Versions diffs - 5.4.3 → 5.5.1 - Mend

@vkontakte/vkui 5.4.3 → 5.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1975) hide show

package/dist/cssm/components/CalendarRange/CalendarRange.js.map CHANGED Viewed

	@@ -1 +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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"}
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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,QAAQ,qBAAqB;AACvF,SACEC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,WAAW,EACXC,gBAAgB,EAChBC,UAAU,QACL,iBAAiB;AAExB,SAASC,YAAY,QAA2B,+BAA+B;AAC/E,SAASC,cAAc,QAA6B,mCAAmC;AACvF,OAAOC,YAAY,6BAA6B;AA0BhD,MAAMC,mBAAmB,CAACC,KAAWC;IACnC,IAAI,CAACA,OAAO,CAAC,EAAE,IAAI,CAACA,KAAK,CAAC,EAAE,EAAE;QAC5B,OAAO;IACT;IAEA,OAAOC,QAAQR,iBAAiBM,KAAKL,WAAWM,KAAK,CAAC,EAAE,GAAGZ,SAASY,KAAK,CAAC,EAAE;AAC9E;AAEA;;CAEC,GACD,OAAO,MAAME,gBAAgB,CAAC,EAC5BF,MAAK,EACLG,SAAQ,EACRC,YAAW,EACXC,cAAa,EACbC,kBAAiB,EACjBC,QAAO,EACPC,cAAe,EAAC,EAChBC,WAAU,EACVC,eAAc,EACdC,mBAAkB,EAClBC,mBAAkB,EAClBC,qBAAoB,EACpBC,oBAAmB,EACnBC,oBAAqB,gBAAe,EACpCC,cAAa,EACbC,cAAa,EACbC,UAAS,EACTC,0BAAyB,EACzB,GAAGC,OACgB;IACnB,MAAM,EACJC,SAAQ,EACRC,YAAW,EACXC,aAAY,EACZC,aAAY,EACZC,WAAU,EACVC,cAAa,EACbC,aAAY,EACZC,cAAa,EACbC,iBAAgB,EACjB,GAAG/C,YAAY;QAAEkB;QAAOK;QAAeD;QAAaE;IAAkB;IACvE,MAAM,CAACwB,YAAYC,cAAc,GAAGnD,MAAMoD;IAC1C,MAAMC,iBAAiB9C,UAAUkC,UAAU;IAE3C,MAAMa,gBAAgBtD,MAAMuD,YAC1B,CAACC;QACC,IAAI;YAAC;YAAW;YAAa;YAAa;SAAa,CAACC,SAASD,MAAME,MAAM;YAC3EF,MAAMG;QACR;QAEA,MAAMC,gBAAgBvD,aAAawC,cAAczB,OAAO,CAAC,EAAE,EAAEoC,MAAME;QAEnE,IACEE,iBACA,CAAChD,YAAYgD,eAAenB,aAC5B,CAAC7B,YAAYgD,eAAerD,UAAUkC,UAAU,KAChD;YACAC,YAAYkB;QACd;QACAd,cAAcc;IAChB,GACA;QAACf;QAAYC;QAAeJ;QAAatB;QAAOqB;KAAS;IAG3D,MAAMoB,cAAc7D,MAAMuD,YACxB,CAACO;QACC,IAAI,CAAC1C,OAAO;YACV,OAAO;gBAAC0C;gBAAM;aAAK;QACrB;QAEA,MAAMC,QAAQ3C,KAAK,CAAC,EAAE;QACtB,MAAM4C,MAAM5C,KAAK,CAAC,EAAE;QACpB,IAAI,AAAC2C,SAASpD,UAAUmD,MAAMC,UAAYC,OAAOrD,UAAUmD,MAAME,MAAO;YACtE,OAAO;gBAAC1D,aAAawD,MAAMC;gBAAQzD,aAAawD,MAAME;aAAK;QAC7D,OAAO,IAAID,SAASrD,SAASoD,MAAMC,QAAQ;YACzC,OAAO;gBAACzD,aAAawD,MAAMC;gBAAQC;aAAI;QACzC,OAAO,IAAID,SAAStD,QAAQqD,MAAMC,QAAQ;YACxC,OAAO;gBAACA;gBAAOzD,aAAawD,MAAME;aAAK;QACzC;QAEA,OAAO5C;IACT,GACA;QAACA;KAAM;IAGT,MAAM6C,cAAcjE,MAAMuD,YACxB,CAACO;QACCvC,WAAWsC,YAAYC;QACvBX,cAAce;IAChB,GACA;QAAC3C;QAAUsC;KAAY;IAGzB,MAAMM,gBAAgBnE,MAAMuD,YAAY,CAACpC,MAAcD,iBAAiBC,KAAKC,QAAQ;QAACA;KAAM;IAE5F,MAAMgD,cAAcpE,MAAMuD,YACxB,CAACpC,MACCE,QAAQ,AAACD,OAAO,CAAC,EAAE,IAAIT,UAAUQ,KAAKC,KAAK,CAAC,EAAE,KAAOA,OAAO,CAAC,EAAE,IAAIT,UAAUQ,KAAKC,KAAK,CAAC,EAAE,IAC5F;QAACA;KAAM;IAGT,MAAMiD,oBAAoBrE,MAAMuD,YAC9B,CAACpC,KAAWmD,YACVjD,QAAQjB,UAAUe,KAAKmD,cAAelD,OAAO,CAAC,EAAE,IAAIT,UAAUQ,KAAKC,KAAK,CAAC,EAAE,IAC7E;QAACA;KAAM;IAGT,MAAMmD,0BAA0BvE,MAAMuD,YACpC,CAACpC,KAAWmD,YACVjD,QAAQjB,UAAUe,KAAKmD,cAAepB,YAAY,CAAC,EAAE,IAAIvC,UAAUQ,KAAK+B,UAAU,CAAC,EAAE,IACvF;QAACA;KAAW;IAGd,MAAMsB,sBAAsBxE,MAAMuD,YAChC,CAACpC,KAAWmD,YACVjD,QAAQlB,WAAWgB,KAAKmD,cAAelD,OAAO,CAAC,EAAE,IAAIT,UAAUQ,KAAKC,KAAK,CAAC,EAAE,IAC9E;QAACA;KAAM;IAGT,MAAMqD,4BAA4BzE,MAAMuD,YACtC,CAACpC,KAAWmD,YACVjD,QAAQlB,WAAWgB,KAAKmD,cAAepB,YAAY,CAAC,EAAE,IAAIvC,UAAUQ,KAAK+B,UAAU,CAAC,EAAE,IACxF;QAACA;KAAW;IAGd,MAAMwB,aAAa1E,MAAMuD,YACvB,CAACO,OAAeX,cAAcU,YAAYC,QAC1C;QAACX;QAAeU;KAAY;IAG9B,MAAMc,aAAa3E,MAAMuD,YAAY,IAAMJ,cAAce,YAAY;QAACf;KAAc;IAEpF,MAAMyB,cAAc5E,MAAMuD,YACxB,CAACpC,MAAcD,iBAAiBC,KAAK+B,aACrC;QAACA;KAAW;IAGd,qBACE,oBAAC2B;QAAK,GAAGrC,KAAK;QAAEsC,KAAKjD;QAAYS,WAAWrC,WAAWgB,MAAM,CAAC,gBAAgB,EAAEqB;qBAC9E,oBAACuC;QAAIvC,WAAWrB,MAAM,CAAC,uBAAuB;qBAC5C,oBAACD;QACCyB,UAAUA;QACVlB,UAAUmB;QACVqC,WAAW;QACXC,aAAarC;QACbb,gBAAgBA;QAChBQ,WAAWrB,MAAM,CAAC,wBAAwB;QAC1Cc,oBAAoBA;QACpBC,oBAAoBA;QACpBC,sBAAsBA;QACtBC,qBAAqBA;QACrBE,eAAeA;sBAEjB,oBAACrB;QACC0B,UAAUA;QACVrB,OAAOA;QACPQ,cAAcA;QACdqD,WAAW3B;QACXP,cAAcA;QACdkB,aAAaA;QACbE,eAAeA;QACfC,aAAaA;QACbC,mBAAmBA;QACnBG,qBAAqBA;QACrBI,aAAaA;QACbF,YAAYA;QACZC,YAAYA;QACZJ,yBAAyBA;QACzBE,2BAA2BA;QAC3BzB,eAAeA;QACfT,2BAA2BA;QAC3B2C,cAAY/C;uBAGhB,oBAAC0C;QAAIvC,WAAWrB,MAAM,CAAC,uBAAuB;qBAC5C,oBAACD;QACCyB,UAAUY;QACV9B,UAAUmB;QACVyC,WAAW;QACXC,aAAaxC;QACbd,gBAAgBA;QAChBQ,WAAWrB,MAAM,CAAC,wBAAwB;QAC1Cc,oBAAoBA;QACpBC,oBAAoBA;QACpBC,sBAAsBA;QACtBC,qBAAqBA;QACrBG,eAAeA;sBAEjB,oBAACtB;QACC0B,UAAUY;QACVjC,OAAOA;QACPQ,cAAcA;QACdsD,cAAY/C;QACZ8C,WAAW3B;QACXP,cAAcA;QACdkB,aAAaA;QACbE,eAAeA;QACfC,aAAaA;QACbC,mBAAmBA;QACnBG,qBAAqBA;QACrBI,aAAaA;QACbF,YAAYA;QACZC,YAAYA;QACZJ,yBAAyBA;QACzBE,2BAA2BA;QAC3BzB,eAAeA;QACfT,2BAA2BA;QAC3B8C,UAAU;QACVC,QAAQrC;;AAKlB,EAAE"}

package/dist/cssm/components/CalendarTime/CalendarTime.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 export interface CalendarTimeProps {
     value: Date;
     doneButtonText?: string;
@@ -7,4 +7,4 @@ export interface CalendarTimeProps {
     onChange?(value: Date): void;
     onClose?(): void;
 }
-export declare const CalendarTime: ({ value, doneButtonText, onChange, onClose, changeHoursAriaLabel, changeMinutesAriaLabel, }: CalendarTimeProps) => JSX.Element;
+export declare const CalendarTime: ({ value, doneButtonText, onChange, onClose, changeHoursAriaLabel, changeMinutesAriaLabel, }: CalendarTimeProps) => React.JSX.Element;

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

	@@ -1 +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,~~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,MAAK,EACLM,gBAAiB,SAAQ,EACzBC,SAAQ,EACRC,QAAO,EACPC,sBAAuB,eAAc,EACrCC,wBAAyB,kBAAiB,EACxB~~,GAAK~~;~~IACvB~~,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~~,KAAK~~;~~QAC1BC~~,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~~,KAAK~~;~~QAC1BC~~,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"}
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"}

package/dist/cssm/components/Card/Card.d.ts CHANGED Viewed

@@ -6,4 +6,4 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, HasRoot
 /**
  * @see https://vkcom.github.io/VKUI/#/Card
  */
-export declare const Card: ({ mode, children, getRootRef, className, ...restProps }: CardProps) => JSX.Element;
+export declare const Card: ({ mode, children, getRootRef, className, ...restProps }: CardProps) => React.JSX.Element;

package/dist/cssm/components/Card/Card.js.map CHANGED Viewed

	@@ -1 +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~~,GAAK~~;~~IACf~~,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"}
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"}

package/dist/cssm/components/CardGrid/CardGrid.d.ts CHANGED Viewed

@@ -9,4 +9,4 @@ export interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/CardGrid
  */
-export declare const CardGrid: ({ children, size, spaced, className, ...restProps }: CardGridProps) => JSX.Element;
+export declare const CardGrid: ({ children, size, spaced, className, ...restProps }: CardGridProps) => React.JSX.Element;

package/dist/cssm/components/CardGrid/CardGrid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n none: styles['CardGrid--sizeX-none'],\n [SizeType.COMPACT]: styles['CardGrid--sizeX-compact'],\n};\n\nexport interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {\n size?: 's' \| 'm' \| 'l';\n /*\n Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n /\n spaced?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({\n children,\n size = 's',\n spaced = false,\n className,\n ...restProps\n}: CardGridProps) => {\n const { sizeX = 'none' } = useAdaptivity();\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['CardGrid'],\n 'vkuiInternalCardGrid',\n spaced && styles['CardGrid--spaced'],\n {\n s: 'vkuiInternalCardGrid--size-s',\n m: 'vkuiInternalCardGrid--size-m',\n l: 'vkuiInternalCardGrid--size-l',\n }[size],\n sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n className,\n )}\n >\n {children}\n </div>\n );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","styles","sizeXClassNames","none","COMPACT","CardGrid","children","size","spaced","className","restProps","sizeX","div","s","m","l","REGULAR"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACD,SAASI,~~OAAO~~,~~CAAC,~~EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAUA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,SAAQ,EACRC,MAAO,IAAG,EACVC,QAAS,~~KAAK~~,~~CAAA,~~EACdC,UAAS,EACT,GAAGC,WACW~~,GAAK~~;~~IACnB~~,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,~~OAAO~~,~~IAAId,~~eAAe,CAACS,MAAM,EACpDF;OAGDH;AAGP,EAAE"}
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"}

package/dist/cssm/components/CardScroll/CardScroll.d.ts CHANGED Viewed

@@ -11,4 +11,4 @@ export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
  */
-export declare const CardScroll: ({ children, size, showArrows, withSpaces, className, ...restProps }: CardScrollProps) => JSX.Element;
+export declare const CardScroll: ({ children, size, showArrows, withSpaces, className, ...restProps }: CardScrollProps) => React.JSX.Element;

package/dist/cssm/components/CardScroll/CardScroll.js.map CHANGED Viewed

	@@ -1 +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,~~IAAI~~,~~CAAA,~~EACjBC,YAAa,~~IAAI~~,~~CAAA,~~EACjBC,UAAS,EACT,GAAGC,WACa~~,GAAK~~;~~IACrB~~,MAAMC,eAAeZ,MAAMa,~~MAAM,CAAiB,IAAI~~;~~IACtD~~,MAAMC,SAASd,MAAMa,~~MAAM,CAAiB,IAAI~~;~~IAEhD~~,MAAM,EAAEE,OAAM,EAAE,GAAGb;IAEnB,SAASc,gBAAgBC,MAAc~~,EAAU~~;~~QAC/C~~,IAAI,CAACL,aAAaM,~~OAAO~~,~~IAAI,~~CAACJ,OAAOI,~~OAAO,EAAE~~;YAC5C,OAAOD;QACT~~,CAAC~~;~~QACD~~,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~~,CAAC~~;~~QAED~~,IAAII,eAAe,GAAG;YACpB,OAAO;QACT~~,CAAC~~;~~QAED~~,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~~,CAAC~~;~~QAED~~,OAAOS;IACT;IAEA,SAASC,iBAAiBb,MAAc~~,EAAU~~;~~QAChD~~,IAAI,CAACL,aAAaM,~~OAAO~~,~~IAAI,~~CAACJ,OAAOI,~~OAAO,EAAE~~;YAC5C,OAAOD;QACT~~,CAAC~~;~~QAED~~,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~~,CAAC~~;~~QAED~~,OAAOW,MAAMJ,~~UAAU~~,~~GAAGV,~~OAAOI,~~OAAO,CAACE,WAAW~~;~~IACtD~~;IAEA,qBACE,oBAACe;QACE,GAAGxB,SAAS;QACbD,WAAWT,WACTG,MAAM,CAAC,aAAa,EACpB,0BACAG,SAAS,~~KAAK~~,~~IACZ,~~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"}
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"}

package/dist/cssm/components/Cell/Cell.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { HasRootRef } from '../../types';
 import { RemovableProps } from '../Removable/Removable';
 import { SimpleCellProps } from '../SimpleCell/SimpleCell';
+import { CellCheckboxProps } from './CellCheckbox/CellCheckbox';
 export interface CellProps extends Omit<SimpleCellProps, 'getRootRef'>, RemovableProps, HasRootRef<HTMLDivElement> {
     mode?: 'removable' | 'selectable';
     /**
@@ -38,4 +39,7 @@ export interface CellProps extends Omit<SimpleCellProps, 'getRootRef'>, Removabl
 /**
  * @see https://vkcom.github.io/VKUI/#/Cell
  */
-export declare const Cell: ({ mode, onRemove, removePlaceholder, onDragFinish, before, after, disabled, draggable, Component, onChange, name, value, checked, defaultChecked, getRootRef, draggerLabel, className, style, ...restProps }: CellProps) => JSX.Element;
+export declare const Cell: {
+    ({ mode, onRemove, removePlaceholder, onDragFinish, before, after, disabled, draggable, Component: ComponentProps, onChange, name, value, checked, defaultChecked, getRootRef, draggerLabel, className, style, ...restProps }: CellProps): React.JSX.Element;
+    Checkbox: ({ getRootRef, getRef, className, style, type, ...restProps }: CellCheckboxProps) => React.JSX.Element;
+};

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

@@ -12,9 +12,10 @@ 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 , 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({
@@ -57,14 +58,14 @@ import styles from './Cell.module.css';
     }
     const simpleCellDisabled = draggable && !selectable || removable || disabled;
     const hasActive = !simpleCellDisabled && !dragging;
-    const cellClasses = classNames(styles['Cell'], platform === Platform.IOS && styles['Cell--ios'], dragging && styles['Cell--dragging'], removable && styles['Cell--removable'], selectable && styles['Cell--selectable'], disabled && styles['Cell--disabled']);
+    const cellClasses = classNames(styles['Cell'], platform === Platform.IOS && styles['Cell--ios'], dragging && styles['Cell--dragging'], removable && styles['Cell--removable'], Component === 'label' && styles['Cell--selectable'], disabled && styles['Cell--disabled']);
     const simpleCell = /*#__PURE__*/ React.createElement(SimpleCell, {
         hasActive: hasActive,
         hasHover: hasActive,
         ...restProps,
         className: styles['Cell__content'],
         disabled: simpleCellDisabled,
-        Component: selectable ? 'label' : Component,
+        Component: Component,
         before: /*#__PURE__*/ React.createElement(React.Fragment, null, draggable && platform !== Platform.IOS && dragger, selectable && checkbox, before),
         after: /*#__PURE__*/ React.createElement(React.Fragment, null, draggable && platform === Platform.IOS && dragger, after)
     });
@@ -83,5 +84,6 @@ import styles from './Cell.module.css';
         ref: rootElRef
     }, simpleCell);
 };
+Cell.Checkbox = CellCheckbox;
 //# sourceMappingURL=Cell.js.map

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

	@@ -1 +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,\n onChange,\n name,\n value,\n checked,\n defaultChecked,\n getRootRef,\n draggerLabel = 'Перенести ячейку',\n className,\n style,\n ...restProps\n}: CellProps) => {\n const selectable = mode === 'selectable';\n const removable = mode === 'removable';\n\n const platform = usePlatform();\n\n const rootElRef = useExternRef(getRootRef);\n\n const { dragging, ...draggableProps } = useDraggable({\n rootElRef,\n onDragFinish,\n });\n\n const { toggleDrag } = React.useContext(ListContext);\n React.useEffect(() => {\n if (dragging) {\n toggleDrag(true);\n return () => toggleDrag(false);\n }\n return undefined;\n }, [dragging, toggleDrag]);\n\n let dragger;\n if (draggable) {\n dragger = (\n <CellDragger\n className={styles['Cell__dragger']}\n aria-label={draggerLabel}\n {...draggableProps}\n />\n );\n }\n\n let checkbox;\n if (selectable) {\n const checkboxProps: CellCheckboxProps = {\n name,\n value,\n onChange,\n defaultChecked,\n checked,\n disabled,\n };\n checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n }\n\n const simpleCellDisabled = (draggable && !selectable) \|\| removable \|\| disabled;\n const hasActive = !simpleCellDisabled && !dragging;\n\n const cellClasses = classNames(\n styles['Cell'],\n platform === Platform.IOS && styles['Cell--ios'],\n dragging && styles['Cell--dragging'],\n removable && styles['Cell--removable'],\n ~~selectable~~ && styles['Cell--selectable'],\n disabled && styles['Cell--disabled'],\n );\n\n const simpleCell = (\n <SimpleCell\n hasActive={hasActive}\n hasHover={hasActive}\n {...restProps}\n className={styles['Cell__content']}\n disabled={simpleCellDisabled}\n Component={~~selectable ? 'label' :~~ Component}\n before={\n <React.Fragment>\n {draggable && platform !== Platform.IOS && dragger}\n {selectable && checkbox}\n {before}\n </React.Fragment>\n }\n after={\n <React.Fragment>\n {draggable && platform === Platform.IOS && dragger}\n {after}\n </React.Fragment>\n }\n />\n );\n\n if (removable) {\n return (\n <Removable\n className={classNames(cellClasses, className)}\n style={style}\n getRootRef={rootElRef}\n removePlaceholder={removePlaceholder}\n onRemove={(e) => onRemove(e, rootElRef.current)}\n >\n {simpleCell}\n </Removable>\n );\n }\n\n return (\n <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n {simpleCell}\n </div>\n );\n};\n"],"names":["React","classNames","noop","useExternRef","usePlatform","Platform","ListContext","Removable","SimpleCell","CellCheckbox","CellDragger","useDraggable","styles","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","rootElRef","dragging","draggableProps","toggleDrag","useContext","useEffect","undefined","dragger","aria-label","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","IOS","simpleCell","hasHover","Fragment","e","current","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,WAAW,QAAQ,sBAAsB;AAClD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,UAAU,QAAyB,2BAA2B;AACvE,SAASC,YAAY,QAA2B,8BAA8B;AAC9E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,OAAOC,YAAY,oBAAoB;AAoCvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,KAAI,EACJC,UAAWb,KAAI,EACfc,mBAAoB,UAAS,EAC7BC,aAAY,EACZC,OAAM,EACNC,MAAK,EACLC,SAAQ,EACRC,UAAS,EACTC,~~UAAS~~,~~EACTC~~,SAAQ,EACRC,KAAI,EACJC,MAAK,EACLC,QAAO,EACPC,eAAc,EACdC,WAAU,EACVC,cAAe,mBAAkB,EACjCC,UAAS,EACTC,MAAK,EACL,GAAGC,WACO~~,GAAK~~;~~IACf~~,MAAMC,~~aAAanB~~,SAAS;IAC5B,~~MAAMoB~~,~~YAAYpB~~,SAAS;~~IAE3B~~,~~MAAMqB~~,~~WAAW/B~~;IAEjB,~~MAAMgC~~,~~YAAYjC~~,~~aAAayB~~;IAE/B,MAAM,EAAES,SAAQ,EAAE,GAAGC,gBAAgB,~~GAAG3B~~,aAAa;~~QACnDyB~~;~~QACAnB~~;IACF;IAEA,MAAM,~~EAAEsB~~,WAAU,EAAE,~~GAAGvC~~,~~MAAMwC~~,~~UAAU,CAAClC~~;IACxCN,~~MAAMyC~~,~~SAAS,CAAC,IAAM~~;~~QACpB~~,IAAIJ,UAAU;YACZE,WAAW~~,IAAI~~;~~YACf~~,OAAO,IAAMA,WAAW~~,KAAK~~;~~QAC/B,CAAC~~;~~QACD~~,OAAOG;IACT,GAAG;QAACL;QAAUE;KAAW;IAEzB,IAAII;IACJ,~~IAAItB~~,WAAW;~~QACbsB~~,wBACE,~~oBAACjC~~;~~YACCoB~~,~~WAAWlB~~,MAAM,CAAC,gBAAgB;~~YAClCgC~~,cAAYf;YACX,GAAGS,cAAc;;IAGxB~~,CAAC~~;~~IAED~~,IAAIO;IACJ,IAAIZ,YAAY;QACd,MAAMa,gBAAmC;YACvCtB;YACAC;YACAF;YACAI;YACAD;~~YACAN~~;QACF;~~QACAyB~~,yBAAW,~~oBAACpC~~;~~YAAaqB~~,~~WAAWlB~~,MAAM,CAAC,iBAAiB;YAAG,~~GAAGkC~~,aAAa;;IACjF~~,CAAC~~;~~IAED~~,MAAMC,qBAAqB,~~AAAC1B~~,aAAa,~~CAACY~~,cAAeC,~~aAAad~~;IACtE,~~MAAM4B~~,YAAY,CAACD,sBAAsB,CAACV;IAE1C,MAAMY,~~cAAchD~~,WAClBW,MAAM,CAAC,OAAO,~~EACduB~~,~~aAAa9B~~,~~SAAS6C~~,~~GAAG~~,~~IAAItC,~~MAAM,CAAC,YAAY,~~EAChDyB~~,~~YAAYzB~~,MAAM,CAAC,iBAAiB,~~EACpCsB~~,~~aAAatB~~,MAAM,CAAC,kBAAkB,~~EACtCqB~~,~~cAAcrB~~,MAAM,CAAC,mBAAmB,~~EACxCQ~~,YAAYR,MAAM,CAAC,iBAAiB;IAGtC,~~MAAMuC~~,2BACJ,~~oBAAC3C~~;~~QACCwC~~,WAAWA;QACXI,UAAUJ;QACT,GAAGhB,SAAS;QACbF,~~WAAWlB~~,MAAM,CAAC,gBAAgB;QAClCQ,~~UAAU2B~~;~~QACVzB~~,~~WAAWW,aAAa,UAAUX,SAAS~~;~~QAC3CJ~~,sBACE,oBAAClB,~~MAAMqD~~,~~QAAQ~~,~~QACZhC~~,~~aAAac~~,~~aAAa9B~~,~~SAAS6C~~,~~GAAG,IAAIP,~~SAC1CV,cAAcY,~~UACd3B~~;QAGLC,qBACE,oBAACnB,~~MAAMqD~~,~~QAAQ~~,~~QACZhC~~,~~aAAac~~,~~aAAa9B~~,~~SAAS6C~~,~~GAAG,IAAIP,SAC1CxB~~;;IAMT,~~IAAIe~~,WAAW;QACb,qBACE,~~oBAAC3B~~;~~YACCuB~~,~~WAAW7B~~,~~WAAWgD~~,aAAanB;YACnCC,OAAOA;YACPH,YAAYQ;~~YACZpB~~,mBAAmBA;YACnBD,UAAU,~~CAACuC~~,~~IAAMvC~~,~~SAASuC~~,GAAGlB,UAAUmB~~,OAAO~~;~~WAE7CJ~~;IAGP~~,CAAC~~;~~IAED~~,qBACE,oBAACK;QAAI1B,~~WAAW7B~~,~~WAAWgD~~,aAAanB;QAAYC,OAAOA;QAAO0B,KAAKrB;OACpEe;AAGP,EAAE"}
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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"}

package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.d.ts CHANGED Viewed

@@ -1,6 +1,10 @@
 import * as React from 'react';
-import { HasRef } from '../../../types';
+import { HasRef, HasRootRef } from '../../../types';
 import { CellProps } from '../Cell';
-export interface CellCheckboxProps extends Pick<CellProps, 'defaultChecked' | 'checked'>, React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement> {
+export interface CellCheckboxProps extends Pick<CellProps, 'defaultChecked' | 'checked'>, React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLSpanElement>, HasRef<HTMLInputElement> {
+    /**
+     * Вид чекбокса. Если auto, то зависит от платформы.
+     */
+    type?: 'auto' | 'circle' | 'square';
 }
-export declare const CellCheckbox: ({ className, style, getRef, ...restProps }: CellCheckboxProps) => JSX.Element;
+export declare const CellCheckbox: ({ getRootRef, getRef, className, style, type, ...restProps }: CellCheckboxProps) => React.JSX.Element;

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

@@ -1,17 +1,37 @@
 import * as React from 'react';
-import { Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckCircleOn } from '@vkontakte/icons';
+import { Icon20CheckBoxOff, Icon20CheckBoxOn, Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckCircleOn } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../../hooks/usePlatform';
 import { Platform } from '../../../lib/platform';
+import { AdaptiveIconRenderer } from '../../AdaptiveIconRenderer/AdaptiveIconRenderer';
 import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import styles from './CellCheckbox.module.css';
-export const CellCheckbox = ({ className , style , getRef , ...restProps })=>{
+const CheckBoxOn = ()=>/*#__PURE__*/ React.createElement(AdaptiveIconRenderer, {
+        IconCompact: Icon20CheckBoxOn,
+        IconRegular: Icon24CheckBoxOn
+    });
+const CheckBoxOff = ()=>/*#__PURE__*/ React.createElement(AdaptiveIconRenderer, {
+        IconCompact: Icon20CheckBoxOff,
+        IconRegular: Icon24CheckBoxOff
+    });
+function useTypeIcon(type) {
     const platform = usePlatform();
-    const IconOff = platform === Platform.IOS || platform === Platform.VKCOM ? Icon24CheckCircleOff : Icon24CheckBoxOff;
-    const IconOn = platform === Platform.IOS || platform === Platform.VKCOM ? Icon24CheckCircleOn : Icon24CheckBoxOn;
+    if (type !== 'auto') {
+        return type;
+    }
+    if (platform === Platform.IOS || platform === Platform.VKCOM) {
+        return 'circle';
+    }
+    return 'square';
+}
+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;
     return /*#__PURE__*/ React.createElement("span", {
-        className: className,
-        style: style
+        className: classNames(styles['CellCheckbox'], className),
+        style: style,
+        ref: getRootRef
     }, /*#__PURE__*/ React.createElement(VisuallyHidden, {
         ...restProps,
         Component: "input",

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon24CheckBoxOff,\n Icon24CheckBoxOn,\n Icon24CheckCircleOff,\n Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { HasRef } from '../../../types';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nexport interface CellCheckboxProps\n extends Pick<CellProps, 'defaultChecked' \| 'checked'>,\n React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement> {}\n\nexport const CellCheckbox = ({ className, style, ~~getRef,~~ ...restProps }: CellCheckboxProps) => {\n const ~~platform~~ = ~~usePlatform~~();\n\n const IconOff ~~=\n platform~~ === ~~Platform.IOS~~ ~~\|\| platform === Platform.VKCOM\n~~ ? Icon24CheckCircleOff\n : ~~Icon24CheckBoxOff~~;\n\n const IconOn ~~=\n platform~~ === ~~Platform.IOS~~ ~~\|\| platform === Platform.VKCOM\n~~ ? Icon24CheckCircleOn\n : ~~Icon24CheckBoxOn~~;\n\n return (\n <span className={className} style={style}>\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","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","classNames","usePlatform","Platform","VisuallyHidden","styles","~~CellCheckbox~~","~~className~~","~~style~~","~~getRef~~","~~restProps~~","~~platform~~","~~IconOff~~","IOS","VKCOM","~~IconOn~~","~~span~~","~~Component~~","~~type~~","~~getRootRef~~","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,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,cAAc,QAAQ,sCAAsC;AAErE,OAAOC,YAAY,4BAA4B;~~AAO~~/C,~~OAAO,~~MAAMC,~~eAAe~~,~~CAAC~~,~~EAAEC~~,~~UAAS~~,~~EAAEC~~,~~MAAK~~,~~EAAEC~~,~~OAAM~~,~~EAAE~~,~~GAAGC~~,~~WAA8B~~,~~GAAK~~;~~IAC7F~~,MAAMC,~~WAAWT~~;IAEjB,~~MAAMU~~,~~UACJD~~,~~aAAaR~~,~~SAASU~~,~~GAAG~~,~~IAAIF~~,~~aAAaR,~~SAASW,~~KAAK~~,~~GACpDf~~,~~uBACAF~~,~~iBAAiB~~;~~IAEvB~~,~~MAAMkB~~,~~SACJJ~~,~~aAAaR~~,~~SAASU~~,~~GAAG~~,~~IAAIF~~,~~aAAaR~~,~~SAASW~~,~~KAAK~~,~~GACpDd~~,~~sBACAF~~,~~gBAAgB~~;~~IAEtB~~,qBACE,oBAACkB;~~QAAKT~~,~~WAAWA~~;~~QAAWC~~,OAAOA;~~qBACjC~~,~~oBAACJ~~;QACE,~~GAAGM~~,SAAS;~~QACbO~~,WAAU;~~QACVC~~,MAAK;~~QACLX~~,~~WAAWF~~,MAAM,CAAC,sBAAsB;~~QACxCc~~,~~YAAYV~~;sBAEd,oBAACO;~~QACCT~~,~~WAAWN~~,~~WAAWI~~,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,0BAA0B;~~QACrFe~~,eAAAA~~,IAAW~~;~~qBAEX~~,~~oBAACR~~,+BAEH,~~oBAACI~~;~~QACCT~~,~~WAAWN~~,~~WAAWI~~,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,yBAAyB;~~QACpFe~~,eAAAA~~,IAAW~~;~~qBAEX~~,~~oBAACL~~;AAIT,EAAE"}
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"}

package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.module.css CHANGED Viewed

@@ -1,3 +1,9 @@
+.CellCheckbox {
+  display: flex;
+  justify-content: center;
+  width: 24px;
+}
 .CellCheckbox__icon {
   display: none;
   color: var(--vkui--color_icon_tertiary);

package/dist/cssm/components/Cell/CellDragger/CellDragger.d.ts CHANGED Viewed

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

package/dist/cssm/components/Cell/CellDragger/CellDragger.js.map CHANGED Viewed

	@@ -1 +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~~,GAAK~~;~~IACtB~~,MAAMC,WAAWX;IAEjB,MAAMY,cAAc,CAACC~~,QAAyC~~;~~QAC5DA~~,MAAMC~~,cAAc~~;~~QACpB~~,IAAIN,SAAS;YACXA,QAAQK;QACV~~,CAAC~~;~~IACH~~;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~~,oBAAgB~~;~~AAG3E~~,EAAE"}
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"}

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

	@@ -1 +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~~,GAAK~~;~~IACJ~~,MAAM,CAACC,UAAUC,YAAY,GAAGL,MAAMM,~~QAAQ,CAAU,KAAK~~;~~IAE7D~~,MAAM,CAACC,UAAUC,YAAY,GAAGR,MAAMM,~~QAAQ~~,~~CAAgB,~~EAAE;IAChE,MAAM,CAACG,gBAAgBC,kBAAkB,GAAGV,MAAMM,~~QAAQ,CAAS~~;IACnE,MAAM,CAACK,cAAcC,gBAAgB,GAAGZ,MAAMM,~~QAAQ,CAAS~~;IAC/D,MAAM,CAACO,WAAWC,aAAa,GAAGd,MAAMM,~~QAAQ,CAAS~~;IACzD,MAAM,CAACS,eAAeC,iBAAiB,GAAGhB,MAAMM,~~QAAQ,CAA4BW~~;IAEpF,MAAMC,cAAc,CAACC~~,QAAsB~~;~~QACzC~~,MAAMC,SAASlB,UAAUmB~~,OAAO~~;~~QAChC~~,IAAI,CAACD,QAAQ;YACX;QACF~~,CAAC~~;~~QACDD~~,MAAMG,~~aAAa,CAACC,eAAe~~;~~QACnCJ~~,MAAMG,~~aAAa,CAACE,cAAc~~;~~QAElCnB~~,YAAY~~,IAAI~~;~~QAEhB~~,IAAIoB,YAA2B,EAAE;QACjC,IAAIL,OAAOM,~~aAAa~~,~~EAAEC,~~YAAY;YACpCF,YAAYG,MAAMC,~~IAAI~~,~~CAACT,~~OAAOM,~~aAAa,CAACI,QAAQ~~;~~QACtD,CAAC~~;~~QACD~~,MAAMC,MAAMN,UAAUO,~~OAAO,CAACZ~~;QAE9BV,kBAAkBqB;QAClBnB,gBAAgBmB;QAChBvB,YAAYiB;QACZX,aAAa;IACf;IAEA,MAAMmB,aAAa,CAACd~~,QAAsB~~;~~QACxCA~~,MAAMG,~~aAAa,CAACC,eAAe~~;~~QACnCJ~~,MAAMG,~~aAAa,CAACE,cAAc~~;~~QAElC~~,MAAMJ,SAASlB,UAAUmB~~,OAAO~~;~~QAEhC~~,IAAID,QAAQ;YACVA,OAAOc,~~KAAK~~,~~CAACC~~,~~SAAS,GAAG,~~CAAC,WAAW,EAAEhB,MAAMiB,~~MAAM~~,~~CAAC,~~GAAG,CAAC;YACxD,MAAMC,cAAcjB,OAAOkB~~,qBAAqB~~;~~YAEhDtB~~,iBAAiBH,YAAYM,MAAMiB,~~MAAM~~,~~GAAG,~~IAAI,SAAS~~,IAAI~~;~~YAC7DtB~~,aAAaK,MAAMiB~~,MAAM~~;~~YACzBxB~~,gBAAgBH;YAEhBF,SAASgC,~~OAAO~~,~~CAAC,~~CAACC,SAAsBC~~,eAAyB~~;~~gBAC/D~~,MAAMC,iBAAiBF,QAAQF~~,qBAAqB~~;~~gBACpD~~,MAAMK,oBAAoBD,eAAeE,~~MAAM,GAAG~~;gBAElD,MAAMC,kBAAkBR,YAAYS,~~MAAM~~,~~GAAGJ,~~eAAeK,~~GAAG,GAAGJ~~;gBAClE,MAAMK,mBAAmBX,YAAYU,~~GAAG~~,~~GAAGL,~~eAAeI,~~MAAM,GAAGH~~;gBAEnE,IAAIlC,iBAAiBgC,cAAc;oBACjC,IAAII,iBAAiB;wBACnB,IAAI9B,kBAAkB,QAAQ;4BAC5ByB,QAAQN,~~KAAK~~,~~CAACC,SAAS,GAAG~~;wBAC5B~~,CAAC~~;~~wBAEDvB~~,gBAAgB,CAACD,eAAiBA,eAAe;oBACnD~~,CAAC~~;~~oBACD~~,IAAIqC,oBAAoBjC,kBAAkB,MAAM;wBAC9CyB,QAAQN,~~KAAK~~,~~CAACC,SAAS,GAAG~~;oBAC5B~~,CAAC~~;~~gBACH~~,OAAO,IAAI1B,iBAAiBgC,cAAc;oBACxC,IAAIO,kBAAkB;wBACpB,IAAIjC,kBAAkB,MAAM;4BAC1ByB,QAAQN,~~KAAK~~,~~CAACC,SAAS,GAAG~~;wBAC5B~~,CAAC~~;~~wBAEDvB~~,gBAAgB,CAACD,eAAiBA,eAAe;oBACnD~~,CAAC~~;~~oBACD~~,IAAIkC,mBAAmB9B,kBAAkB,QAAQ;wBAC/CyB,QAAQN,~~KAAK~~,~~CAACC,SAAS,GAAG~~;oBAC5B~~,CAAC~~;~~gBACH,CAAC~~;~~YACH~~;QACF~~,CAAC~~;~~IACH~~;IAEA,MAAMc,YAAY,CAAC9B~~,QAAsB~~;~~QACvCA~~,MAAMG,~~aAAa,CAACC,eAAe~~;~~QACnCJ~~,MAAMG,~~aAAa,CAACE,cAAc~~;~~QAElC~~,MAAM,CAACK,MAAMqB,GAAG,GAAG;YAACzC;YAAgBE;SAAa;QAEjDJ,SAASgC,~~OAAO~~,~~CAAC,~~CAACC~~,UAAyB~~;~~YACzCA~~,QAAQN,~~KAAK~~,~~CAACC,SAAS,GAAG~~;QAC5B;QAEA3B,YAAY,EAAE;QACdI,gBAAgB;QAChBF,kBAAkB;QAClBM,iBAAiBC;QACjBH,aAAa;QAEbT,YAAY~~,KAAK~~;~~QAEjBF~~,gBAAgBA,aAAa;YAAE0B;YAAMqB;QAAG;IAC1C;IAEA,MAAMC,oBAAuC;QAC3CjC;QACAe;QACAgB;QACA7C;IACF;IAEA,OAAO+C;AACT,EAAE"}
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"}

package/dist/cssm/components/CellButton/CellButton.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { SimpleCellProps } from '../SimpleCell/SimpleCell';
 export interface CellButtonProps extends SimpleCellProps {
     mode?: 'primary' | 'danger';
@@ -7,4 +7,4 @@ export interface CellButtonProps extends SimpleCellProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/CellButton
  */
-export declare const CellButton: ({ centered, mode, className, ...restProps }: CellButtonProps) => JSX.Element;
+export declare const CellButton: ({ centered, mode, className, ...restProps }: CellButtonProps) => React.JSX.Element;

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

	@@ -1 +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,~~KAAK~~,~~CAAA,~~EAChBC,MAAO,UAAS,EAChBC,UAAS,EACT,GAAGC,WACa~~,GAAK~~;~~IACrB~~,qBACE,oBAACN;QACCO,iBAAiB~~,IAAI~~;~~QACpB~~,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"}
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"}

package/dist/cssm/components/CellButton/CellButton.module.css CHANGED Viewed

@@ -2,7 +2,7 @@
   box-sizing: border-box;
   text-decoration: none;
   margin: 0;
-  border: none;
+  border: 0;
   cursor: pointer;
   width: 100%;
   background: transparent;

package/dist/cssm/components/Checkbox/Checkbox.d.ts CHANGED Viewed

@@ -10,4 +10,4 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
  */
-export declare const Checkbox: ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, onChange, titleAfter, ...restProps }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, onChange, titleAfter, ...restProps }: CheckboxProps) => React.JSX.Element;

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

	@@ -1 +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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"}
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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"}