npm - @vkontakte/vkui - Versions diffs - 5.8.0-beta.0 → 5.8.1-alpha.0 - Mend

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

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 (1104) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon12Dropdown,\n Icon20ChevronLeftOutline,\n Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getMonths, getYears } from '../../lib/calendar';\nimport { addMonths, setMonth, setYear, subMonths } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<TappableElementProps, 'onClick' \| 'aria-label'>;\n\nexport interface CalendarHeaderProps\n extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n viewDate: Date;\n prevMonth?: boolean;\n nextMonth?: boolean;\n disablePickers?: boolean;\n prevMonthAriaLabel?: string;\n nextMonthAriaLabel?: string;\n changeMonthAriaLabel?: string;\n changeYearAriaLabel?: string;\n prevMonthIcon?: React.ReactNode;\n nextMonthIcon?: React.ReactNode;\n prevMonthProps?: ArrowMonthProps;\n nextMonthProps?: ArrowMonthProps;\n onChange(viewDate: Date): void;\n /*\n Нажатие на кнопку переключения на следующий месяц.\n /\n onNextMonth?(): void;\n /\n Нажатие на кнопку переключения на предыдущий месяц.\n */\n onPrevMonth?(): void;\n}\n\nexport const CalendarHeader = ({\n viewDate,\n onChange,\n prevMonth = true,\n nextMonth = true,\n disablePickers = false,\n onNextMonth,\n onPrevMonth,\n className,\n prevMonthProps = {},\n nextMonthProps = {},\n prevMonthAriaLabel = 'Предыдущий месяц',\n nextMonthAriaLabel = 'Следующий месяц',\n changeMonthAriaLabel = 'Изменить месяц',\n changeYearAriaLabel = 'Изменить год',\n prevMonthIcon = (\n <Icon20ChevronLeftOutline\n className={styles['CalendarHeader__nav-icon--accent']}\n width={30}\n height={30}\n />\n ),\n nextMonthIcon = (\n <Icon20ChevronRightOutline\n className={styles['CalendarHeader__nav-icon--accent']}\n width={30}\n height={30}\n />\n ),\n}: CalendarHeaderProps) => {\n const { locale } = useConfigProvider();\n const onMonthsChange = React.useCallback(\n (event: React.ChangeEvent<HTMLSelectElement>) =>\n onChange(setMonth(viewDate, Number(event.target.value))),\n [onChange, viewDate],\n );\n const onYearChange = React.useCallback(\n (event: React.ChangeEvent<HTMLSelectElement>) =>\n onChange(setYear(viewDate, Number(event.target.value))),\n [onChange, viewDate],\n );\n\n const months = React.useMemo(\n () =>\n getMonths(locale).map(({ value, label }) => ({\n value,\n label: <span className={styles['CalendarHeader__month']}>{label}</span>,\n })),\n [locale],\n );\n\n const currentYear = viewDate.getFullYear();\n\n const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);\n\n const formatter = new Intl.DateTimeFormat(locale, {\n year: 'numeric',\n month: 'long',\n });\n\n const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n return (\n <div className={classNames(styles['CalendarHeader'], className)}>\n {prevMonth && (\n <AdaptivityProvider sizeX={SizeType.REGULAR}>\n <Tappable\n className={classNames(\n styles['CalendarHeader__nav-icon'],\n styles['CalendarHeader__nav-icon-prev'],\n prevMonthClassName,\n )}\n onClick={onPrevMonth}\n aria-label={`${prevMonthAriaLabel}, ${formatter.format(subMonths(viewDate, 1))}`}\n {...restPrevMonthProps}\n >\n {prevMonthIcon}\n </Tappable>\n </AdaptivityProvider>\n )}\n {disablePickers ? (\n <Paragraph\n className={classNames(\n styles['CalendarHeader__pickers'],\n 'vkuiInternalCalendarHeader__pickers',\n )}\n weight=\"2\"\n >\n <span className={styles['CalendarHeader__month']}>\n {new Intl.DateTimeFormat(locale, {\n month: 'long',\n }).format(viewDate)}\n </span>\n  \n {new Intl.DateTimeFormat(locale, {\n year: 'numeric',\n }).format(viewDate)}\n </Paragraph>\n ) : (\n <AdaptivityProvider sizeY={SizeType.COMPACT}>\n <div\n className={classNames(\n styles['CalendarHeader__pickers'],\n 'vkuiInternalCalendarHeader__pickers',\n )}\n >\n <CustomSelect\n className={classNames(\n styles['CalendarHeader__picker'],\n 'vkuiInternalCalendarHeader__picker',\n )}\n value={viewDate.getMonth()}\n options={months}\n dropdownOffsetDistance={4}\n fixDropdownWidth={false}\n icon={<Icon12Dropdown />}\n onChange={onMonthsChange}\n forceDropdownPortal={false}\n selectType=\"accent\"\n aria-label={changeMonthAriaLabel}\n />\n <CustomSelect\n className={classNames(\n styles['CalendarHeader__picker'],\n 'vkuiInternalCalendarHeader__picker',\n )}\n value={viewDate.getFullYear()}\n options={years}\n dropdownOffsetDistance={4}\n fixDropdownWidth={false}\n icon={<Icon12Dropdown />}\n onChange={onYearChange}\n forceDropdownPortal={false}\n selectType=\"accent\"\n aria-label={changeYearAriaLabel}\n />\n </div>\n </AdaptivityProvider>\n )}\n {nextMonth && (\n <AdaptivityProvider sizeX={SizeType.REGULAR}>\n <Tappable\n className={classNames(\n styles['CalendarHeader__nav-icon'],\n styles['CalendarHeader__nav-icon-next'],\n nextMonthClassName,\n )}\n onClick={onNextMonth}\n aria-label={`${nextMonthAriaLabel}, ${formatter.format(addMonths(viewDate, 1))}`}\n {...restNextMonthProps}\n >\n {nextMonthIcon}\n </Tappable>\n </AdaptivityProvider>\n )}\n </div>\n );\n};\n"],"names":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","SizeType","getMonths","getYears","addMonths","setMonth","setYear","subMonths","AdaptivityProvider","useConfigProvider","CustomSelect","Tappable","Paragraph","CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","width","height","nextMonthIcon","locale","onMonthsChange","useCallback","event","Number","target","value","onYearChange","months","useMemo","map","label","span","currentYear","getFullYear","years","formatter","Intl","DateTimeFormat","year","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","div","sizeX","REGULAR","onClick","aria-label","format","weight","sizeY","COMPACT","getMonth","options","dropdownOffsetDistance","fixDropdownWidth","icon","forceDropdownPortal","selectType"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,yBAAyB,QACpB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,SAAS,EAAEC,QAAQ,QAAQ,qBAAqB;AACzD,SAASC,SAAS,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,QAAQ,iBAAiB;AACzE,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,QAAQ,QAA8B,uBAAuB;AACtE,SAASC,SAAS,QAAQ,oCAAoC;AA8B9D,OAAO,IAAMC,iBAAiB;QAC5BC,iBAAAA,UACAC,iBAAAA,mCACAC,WAAAA,0CAAY,kDACZC,WAAAA,0CAAY,uDACZC,gBAAAA,oDAAiB,+BACjBC,oBAAAA,aACAC,oBAAAA,aACAC,kBAAAA,yCACAC,gBAAAA,oDAAiB,CAAC,yDAClBC,gBAAAA,oDAAiB,CAAC,6DAClBC,oBAAAA,4DAAqB,kFACrBC,oBAAAA,4DAAqB,mFACrBC,sBAAAA,gEAAuB,mFACvBC,qBAAAA,8DAAsB,0EACtBC,eAAAA,gEACE,oBAAC9B;QACCuB,SAAS;QACTQ,OAAO;QACPC,QAAQ;4DAGZC,eAAAA,gEACE,oBAAChC;QACCsB,SAAS;QACTQ,OAAO;QACPC,QAAQ;;IAIZ,IAAM,AAAEE,SAAWvB,oBAAXuB;IACR,IAAMC,iBAAiBrC,MAAMsC,WAAW,CACtC,SAACC;eACCpB,SAASV,SAASS,UAAUsB,OAAOD,MAAME,MAAM,CAACC,KAAK;OACvD;QAACvB;QAAUD;KAAS;IAEtB,IAAMyB,eAAe3C,MAAMsC,WAAW,CACpC,SAACC;eACCpB,SAAST,QAAQQ,UAAUsB,OAAOD,MAAME,MAAM,CAACC,KAAK;OACtD;QAACvB;QAAUD;KAAS;IAGtB,IAAM0B,SAAS5C,MAAM6C,OAAO,CAC1B;eACEvC,UAAU8B,QAAQU,GAAG,CAAC;gBAAGJ,cAAAA,OAAOK,cAAAA;mBAAa;gBAC3CL,OAAAA;gBACAK,qBAAO,oBAACC;oBAAKvB,SAAS;mBAAoCsB;YAC5D;;OACF;QAACX;KAAO;IAGV,IAAMa,cAAc/B,SAASgC,WAAW;IAExC,IAAMC,QAAQnD,MAAM6C,OAAO,CAAC;eAAMtC,SAAS0C,aAAa;OAAM;QAACA;KAAY;IAE3E,IAAMG,YAAY,IAAIC,KAAKC,cAAc,CAAClB,QAAQ;QAChDmB,MAAM;QACNC,OAAO;IACT;IAEA,IAAQ/B,AAAWgC,qBAA8C/B,eAAzDD,WAAkCiC,gDAAuBhC;QAAzDD;;IACR,IAAQA,AAAWkC,qBAA8ChC,eAAzDF,WAAkCmC,gDAAuBjC;QAAzDF;;IAER,qBACE,oBAACoC;QAAIpC,WAAWrB,iCAAqCqB;OAClDL,2BACC,oBAACR;QAAmBkD,OAAOzD,SAAS0D,OAAO;qBACzC,oBAAChD;QACCU,WAAWrB,gFAGTqD;QAEFO,SAASxC;QACTyC,cAAY,AAAC,GAAyBb,OAAvBxB,oBAAmB,MAA6C,OAAzCwB,UAAUc,MAAM,CAACvD,UAAUO,UAAU;OACvEwC,qBAEH1B,iBAINV,+BACC,oBAACN;QACCS,WAAWrB,0CAET;QAEF+D,QAAO;qBAEP,oBAACnB;QAAKvB,SAAS;OACZ,IAAI4B,KAAKC,cAAc,CAAClB,QAAQ;QAC/BoB,OAAO;IACT,GAAGU,MAAM,CAAChD,YACL,QAEN,IAAImC,KAAKC,cAAc,CAAClB,QAAQ;QAC/BmB,MAAM;IACR,GAAGW,MAAM,CAAChD,2BAGZ,oBAACN;QAAmBwD,OAAO/D,SAASgE,OAAO;qBACzC,oBAACR;QACCpC,WAAWrB,0CAET;qBAGF,oBAACU;QACCW,WAAWrB,yCAET;QAEFsC,OAAOxB,SAASoD,QAAQ;QACxBC,SAAS3B;QACT4B,wBAAwB;QACxBC,kBAAkB;QAClBC,oBAAM,oBAACzE;QACPkB,UAAUkB;QACVsC,qBAAqB;QACrBC,YAAW;QACXX,cAAYnC;sBAEd,oBAAChB;QACCW,WAAWrB,yCAET;QAEFsC,OAAOxB,SAASgC,WAAW;QAC3BqB,SAASpB;QACTqB,wBAAwB;QACxBC,kBAAkB;QAClBC,oBAAM,oBAACzE;QACPkB,UAAUwB;QACVgC,qBAAqB;QACrBC,YAAW;QACXX,cAAYlC;UAKnBV,2BACC,oBAACT;QAAmBkD,OAAOzD,SAAS0D,OAAO;qBACzC,oBAAChD;QACCU,WAAWrB,gFAGTuD;QAEFK,SAASzC;QACT0C,cAAY,AAAC,GAAyBb,OAAvBvB,oBAAmB,MAA6C,OAAzCuB,UAAUc,MAAM,CAAC1D,UAAUU,UAAU;OACvE0C,qBAEHzB;AAMb,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon12Dropdown,\n Icon20ChevronLeftOutline,\n Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getMonths, getYears } from '../../lib/calendar';\nimport { addMonths, setMonth, setYear, subMonths } from '../../lib/date';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable, TappableElementProps } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<TappableElementProps, 'onClick' \| 'aria-label'>;\n\nexport interface CalendarHeaderProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n viewDate: Date;\n prevMonth?: boolean;\n nextMonth?: boolean;\n disablePickers?: boolean;\n prevMonthAriaLabel?: string;\n nextMonthAriaLabel?: string;\n changeMonthAriaLabel?: string;\n changeYearAriaLabel?: string;\n prevMonthIcon?: React.ReactNode;\n nextMonthIcon?: React.ReactNode;\n prevMonthProps?: ArrowMonthProps;\n nextMonthProps?: ArrowMonthProps;\n onChange(viewDate: Date): void;\n /*\n Нажатие на кнопку переключения на следующий месяц.\n /\n onNextMonth?(): void;\n /\n Нажатие на кнопку переключения на предыдущий месяц.\n */\n onPrevMonth?(): void;\n}\n\nexport const CalendarHeader = ({\n viewDate,\n onChange,\n prevMonth = true,\n nextMonth = true,\n disablePickers = false,\n onNextMonth,\n onPrevMonth,\n prevMonthProps = {},\n nextMonthProps = {},\n prevMonthAriaLabel = 'Предыдущий месяц',\n nextMonthAriaLabel = 'Следующий месяц',\n changeMonthAriaLabel = 'Изменить месяц',\n changeYearAriaLabel = 'Изменить год',\n prevMonthIcon = (\n <Icon20ChevronLeftOutline\n className={styles['CalendarHeader__nav-icon--accent']}\n width={30}\n height={30}\n />\n ),\n nextMonthIcon = (\n <Icon20ChevronRightOutline\n className={styles['CalendarHeader__nav-icon--accent']}\n width={30}\n height={30}\n />\n ),\n ...restProps\n}: CalendarHeaderProps) => {\n const { locale } = useConfigProvider();\n const onMonthsChange = React.useCallback(\n (event: React.ChangeEvent<HTMLSelectElement>) =>\n onChange(setMonth(viewDate, Number(event.target.value))),\n [onChange, viewDate],\n );\n const onYearChange = React.useCallback(\n (event: React.ChangeEvent<HTMLSelectElement>) =>\n onChange(setYear(viewDate, Number(event.target.value))),\n [onChange, viewDate],\n );\n\n const months = React.useMemo(\n () =>\n getMonths(locale).map(({ value, label }) => ({\n value,\n label: <span className={styles['CalendarHeader__month']}>{label}</span>,\n })),\n [locale],\n );\n\n const currentYear = viewDate.getFullYear();\n\n const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);\n\n const formatter = new Intl.DateTimeFormat(locale, {\n year: 'numeric',\n month: 'long',\n });\n\n const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n return (\n <RootComponent baseClassName={styles['CalendarHeader']} {...restProps}>\n {prevMonth && (\n <AdaptivityProvider sizeX={SizeType.REGULAR}>\n <Tappable\n className={classNames(\n styles['CalendarHeader__nav-icon'],\n styles['CalendarHeader__nav-icon-prev'],\n prevMonthClassName,\n )}\n onClick={onPrevMonth}\n aria-label={`${prevMonthAriaLabel}, ${formatter.format(subMonths(viewDate, 1))}`}\n {...restPrevMonthProps}\n >\n {prevMonthIcon}\n </Tappable>\n </AdaptivityProvider>\n )}\n {disablePickers ? (\n <Paragraph\n className={classNames(\n styles['CalendarHeader__pickers'],\n 'vkuiInternalCalendarHeader__pickers',\n )}\n weight=\"2\"\n >\n <span className={styles['CalendarHeader__month']}>\n {new Intl.DateTimeFormat(locale, {\n month: 'long',\n }).format(viewDate)}\n </span>\n  \n {new Intl.DateTimeFormat(locale, {\n year: 'numeric',\n }).format(viewDate)}\n </Paragraph>\n ) : (\n <AdaptivityProvider sizeY={SizeType.COMPACT}>\n <div\n className={classNames(\n styles['CalendarHeader__pickers'],\n 'vkuiInternalCalendarHeader__pickers',\n )}\n >\n <CustomSelect\n className={classNames(\n styles['CalendarHeader__picker'],\n 'vkuiInternalCalendarHeader__picker',\n )}\n value={viewDate.getMonth()}\n options={months}\n dropdownOffsetDistance={4}\n fixDropdownWidth={false}\n icon={<Icon12Dropdown />}\n onChange={onMonthsChange}\n forceDropdownPortal={false}\n selectType=\"accent\"\n aria-label={changeMonthAriaLabel}\n />\n <CustomSelect\n className={classNames(\n styles['CalendarHeader__picker'],\n 'vkuiInternalCalendarHeader__picker',\n )}\n value={viewDate.getFullYear()}\n options={years}\n dropdownOffsetDistance={4}\n fixDropdownWidth={false}\n icon={<Icon12Dropdown />}\n onChange={onYearChange}\n forceDropdownPortal={false}\n selectType=\"accent\"\n aria-label={changeYearAriaLabel}\n />\n </div>\n </AdaptivityProvider>\n )}\n {nextMonth && (\n <AdaptivityProvider sizeX={SizeType.REGULAR}>\n <Tappable\n className={classNames(\n styles['CalendarHeader__nav-icon'],\n styles['CalendarHeader__nav-icon-next'],\n nextMonthClassName,\n )}\n onClick={onNextMonth}\n aria-label={`${nextMonthAriaLabel}, ${formatter.format(addMonths(viewDate, 1))}`}\n {...restNextMonthProps}\n >\n {nextMonthIcon}\n </Tappable>\n </AdaptivityProvider>\n )}\n </RootComponent>\n );\n};\n"],"names":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","SizeType","getMonths","getYears","addMonths","setMonth","setYear","subMonths","AdaptivityProvider","useConfigProvider","CustomSelect","RootComponent","Tappable","Paragraph","CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","className","width","height","nextMonthIcon","restProps","locale","onMonthsChange","useCallback","event","Number","target","value","onYearChange","months","useMemo","map","label","span","currentYear","getFullYear","years","formatter","Intl","DateTimeFormat","year","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","baseClassName","sizeX","REGULAR","onClick","aria-label","format","weight","sizeY","COMPACT","div","getMonth","options","dropdownOffsetDistance","fixDropdownWidth","icon","forceDropdownPortal","selectType"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,yBAAyB,QACpB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,SAAS,EAAEC,QAAQ,QAAQ,qBAAqB;AACzD,SAASC,SAAS,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,QAAQ,iBAAiB;AAEzE,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAA8B,uBAAuB;AACtE,SAASC,SAAS,QAAQ,oCAAoC;AA8B9D,OAAO,IAAMC,iBAAiB;QAC5BC,kBAAAA,UACAC,kBAAAA,oCACAC,WAAAA,0CAAY,mDACZC,WAAAA,0CAAY,wDACZC,gBAAAA,oDAAiB,+BACjBC,qBAAAA,aACAC,qBAAAA,4CACAC,gBAAAA,oDAAiB,CAAC,0DAClBC,gBAAAA,oDAAiB,CAAC,8DAClBC,oBAAAA,4DAAqB,mFACrBC,oBAAAA,4DAAqB,oFACrBC,sBAAAA,gEAAuB,oFACvBC,qBAAAA,8DAAsB,2EACtBC,eAAAA,gEACE,oBAAC9B;QACC+B,SAAS;QACTC,OAAO;QACPC,QAAQ;6DAGZC,eAAAA,gEACE,oBAACjC;QACC8B,SAAS;QACTC,OAAO;QACPC,QAAQ;+BAGTE;QA3BHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QAOAI;;IASA,IAAM,AAAEE,SAAWzB,oBAAXyB;IACR,IAAMC,iBAAiBvC,MAAMwC,WAAW,CACtC,SAACC;eACCrB,SAASX,SAASU,UAAUuB,OAAOD,MAAME,MAAM,CAACC,KAAK;OACvD;QAACxB;QAAUD;KAAS;IAEtB,IAAM0B,eAAe7C,MAAMwC,WAAW,CACpC,SAACC;eACCrB,SAASV,QAAQS,UAAUuB,OAAOD,MAAME,MAAM,CAACC,KAAK;OACtD;QAACxB;QAAUD;KAAS;IAGtB,IAAM2B,SAAS9C,MAAM+C,OAAO,CAC1B;eACEzC,UAAUgC,QAAQU,GAAG,CAAC;gBAAGJ,cAAAA,OAAOK,cAAAA;mBAAa;gBAC3CL,OAAAA;gBACAK,qBAAO,oBAACC;oBAAKjB,SAAS;mBAAoCgB;YAC5D;;OACF;QAACX;KAAO;IAGV,IAAMa,cAAchC,SAASiC,WAAW;IAExC,IAAMC,QAAQrD,MAAM+C,OAAO,CAAC;eAAMxC,SAAS4C,aAAa;OAAM;QAACA;KAAY;IAE3E,IAAMG,YAAY,IAAIC,KAAKC,cAAc,CAAClB,QAAQ;QAChDmB,MAAM;QACNC,OAAO;IACT;IAEA,IAAQzB,AAAW0B,qBAA8CjC,eAAzDO,WAAkC2B,gDAAuBlC;QAAzDO;;IACR,IAAQA,AAAW4B,qBAA8ClC,eAAzDM,WAAkC6B,gDAAuBnC;QAAzDM;;IAER,qBACE,oBAAClB;QAAcgD,aAAa;OAAgC1B,YACzDhB,2BACC,oBAACT;QAAmBoD,OAAO3D,SAAS4D,OAAO;qBACzC,oBAACjD;QACCiB,WAAW7B,gFAGTuD;QAEFO,SAASzC;QACT0C,cAAY,AAAC,GAAyBb,OAAvB1B,oBAAmB,MAA6C,OAAzC0B,UAAUc,MAAM,CAACzD,UAAUQ,UAAU;OACvEyC,qBAEH5B,iBAINT,+BACC,oBAACN;QACCgB,WAAW7B,0CAET;QAEFiE,QAAO;qBAEP,oBAACnB;QAAKjB,SAAS;OACZ,IAAIsB,KAAKC,cAAc,CAAClB,QAAQ;QAC/BoB,OAAO;IACT,GAAGU,MAAM,CAACjD,YACL,QAEN,IAAIoC,KAAKC,cAAc,CAAClB,QAAQ;QAC/BmB,MAAM;IACR,GAAGW,MAAM,CAACjD,2BAGZ,oBAACP;QAAmB0D,OAAOjE,SAASkE,OAAO;qBACzC,oBAACC;QACCvC,WAAW7B,0CAET;qBAGF,oBAACU;QACCmB,WAAW7B,yCAET;QAEFwC,OAAOzB,SAASsD,QAAQ;QACxBC,SAAS5B;QACT6B,wBAAwB;QACxBC,kBAAkB;QAClBC,oBAAM,oBAAC5E;QACPmB,UAAUmB;QACVuC,qBAAqB;QACrBC,YAAW;QACXZ,cAAYrC;sBAEd,oBAAChB;QACCmB,WAAW7B,yCAET;QAEFwC,OAAOzB,SAASiC,WAAW;QAC3BsB,SAASrB;QACTsB,wBAAwB;QACxBC,kBAAkB;QAClBC,oBAAM,oBAAC5E;QACPmB,UAAUyB;QACViC,qBAAqB;QACrBC,YAAW;QACXZ,cAAYpC;UAKnBT,2BACC,oBAACV;QAAmBoD,OAAO3D,SAAS4D,OAAO;qBACzC,oBAACjD;QACCiB,WAAW7B,gFAGTyD;QAEFK,SAAS1C;QACT2C,cAAY,AAAC,GAAyBb,OAAvBzB,oBAAmB,MAA6C,OAAzCyB,UAAUc,MAAM,CAAC5D,UAAUW,UAAU;OACvE2C,qBAEH1B;AAMb,EAAE"}

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { CalendarDaysProps } from '../CalendarDays/CalendarDays';
 import { CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';
-export interface CalendarRangeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, Pick<CalendarHeaderProps, 'prevMonthAriaLabel' | 'nextMonthAriaLabel' | 'changeMonthAriaLabel' | 'changeYearAriaLabel' | 'prevMonthIcon' | 'nextMonthIcon'>, Pick<CalendarDaysProps, 'listenDayChangesForUpdate'>, HasRootRef<HTMLDivElement> {
+export interface CalendarRangeProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>, Pick<CalendarHeaderProps, 'prevMonthAriaLabel' | 'nextMonthAriaLabel' | 'changeMonthAriaLabel' | 'changeYearAriaLabel' | 'prevMonthIcon' | 'nextMonthIcon'>, Pick<CalendarDaysProps, 'listenDayChangesForUpdate'> {
     value?: Array<Date | null>;
     disablePast?: boolean;
     disableFuture?: boolean;
@@ -16,4 +16,4 @@ export interface CalendarRangeProps extends Omit<React.HTMLAttributes<HTMLDivEle
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
  */
-export declare const CalendarRange: ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn, getRootRef, disablePickers, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, changeDayAriaLabel, prevMonthIcon, nextMonthIcon, className, listenDayChangesForUpdate, ...props }: CalendarRangeProps) => React.JSX.Element;
+export declare const CalendarRange: ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn, getRootRef, disablePickers, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, changeDayAriaLabel, prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, ...props }: CalendarRangeProps) => React.JSX.Element;

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

@@ -3,12 +3,12 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
 import { useCalendar } from "../../hooks/useCalendar";
 import { isFirstDay, isLastDay, navigateDate, setTimeEqual } from "../../lib/calendar";
 import { addMonths, endOfDay, isAfter, isBefore, isSameDay, isSameMonth, isWithinInterval, startOfDay } from "../../lib/date";
 import { CalendarDays } from "../CalendarDays/CalendarDays";
 import { CalendarHeader } from "../CalendarHeader/CalendarHeader";
+import { RootComponent } from "../RootComponent/RootComponent";
 var getIsDaySelected = function(day, value) {
     var _value;
     if (!((_value = value) === null || _value === void 0 ? void 0 : _value[0]) || !value[1]) {
@@ -19,7 +19,7 @@ var getIsDaySelected = function(day, value) {
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
  */ export var CalendarRange = function(_param) {
-    var value = _param.value, onChange = _param.onChange, disablePast = _param.disablePast, disableFuture = _param.disableFuture, shouldDisableDate = _param.shouldDisableDate, onClose = _param.onClose, _param_weekStartsOn = _param.weekStartsOn, weekStartsOn = _param_weekStartsOn === void 0 ? 1 : _param_weekStartsOn, getRootRef = _param.getRootRef, disablePickers = _param.disablePickers, prevMonthAriaLabel = _param.prevMonthAriaLabel, nextMonthAriaLabel = _param.nextMonthAriaLabel, changeMonthAriaLabel = _param.changeMonthAriaLabel, changeYearAriaLabel = _param.changeYearAriaLabel, _param_changeDayAriaLabel = _param.changeDayAriaLabel, changeDayAriaLabel = _param_changeDayAriaLabel === void 0 ? "Изменить день" : _param_changeDayAriaLabel, prevMonthIcon = _param.prevMonthIcon, nextMonthIcon = _param.nextMonthIcon, className = _param.className, listenDayChangesForUpdate = _param.listenDayChangesForUpdate, props = _object_without_properties(_param, [
+    var value = _param.value, onChange = _param.onChange, disablePast = _param.disablePast, disableFuture = _param.disableFuture, shouldDisableDate = _param.shouldDisableDate, onClose = _param.onClose, _param_weekStartsOn = _param.weekStartsOn, weekStartsOn = _param_weekStartsOn === void 0 ? 1 : _param_weekStartsOn, getRootRef = _param.getRootRef, disablePickers = _param.disablePickers, prevMonthAriaLabel = _param.prevMonthAriaLabel, nextMonthAriaLabel = _param.nextMonthAriaLabel, changeMonthAriaLabel = _param.changeMonthAriaLabel, changeYearAriaLabel = _param.changeYearAriaLabel, _param_changeDayAriaLabel = _param.changeDayAriaLabel, changeDayAriaLabel = _param_changeDayAriaLabel === void 0 ? "Изменить день" : _param_changeDayAriaLabel, prevMonthIcon = _param.prevMonthIcon, nextMonthIcon = _param.nextMonthIcon, listenDayChangesForUpdate = _param.listenDayChangesForUpdate, props = _object_without_properties(_param, [
         "value",
         "onChange",
         "disablePast",
@@ -36,7 +36,6 @@ var getIsDaySelected = function(day, value) {
         "changeDayAriaLabel",
         "prevMonthIcon",
         "nextMonthIcon",
-        "className",
         "listenDayChangesForUpdate"
     ]);
     var _useCalendar = useCalendar({
@@ -157,9 +156,8 @@ var getIsDaySelected = function(day, value) {
     }, [
         hintedDate
     ]);
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, props), {
-        ref: getRootRef,
-        className: classNames("vkuiCalendarRange", className)
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, props), {
+        baseClassName: "vkuiCalendarRange"
     }), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiCalendarRange__inner"
     }, /*#__PURE__*/ React.createElement(CalendarHeader, {

package/dist/components/CalendarRange/CalendarRange.js.map 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","getIsDaySelected","day","value","Boolean","CalendarRange","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","getRootRef","disablePickers","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","prevMonthIcon","nextMonthIcon","className","listenDayChangesForUpdate","props","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","useState","hintedDate","setHintedDate","secondViewDate","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","getNewValue","date","start","end","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","div","ref","nextMonth","onPrevMonth","onKeyDown","aria-label","prevMonth","onNextMonth","tabIndex","onBlur"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport {\n addMonths,\n endOfDay,\n isAfter,\n isBefore,\n isSameDay,\n isSameMonth,\n isWithinInterval,\n startOfDay,\n} from '../../lib/date';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CalendarRange.module.css';\n\nexport interface CalendarRangeProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n Pick<\n CalendarHeaderProps,\n \| 'prevMonthAriaLabel'\n \| 'nextMonthAriaLabel'\n \| 'changeMonthAriaLabel'\n \| 'changeYearAriaLabel'\n \| 'prevMonthIcon'\n \| 'nextMonthIcon'\n >,\n Pick<CalendarDaysProps, 'listenDayChangesForUpdate'> {\n value?: Array<Date \| null>;\n disablePast?: boolean;\n disableFuture?: boolean;\n disablePickers?: boolean;\n changeDayAriaLabel?: string;\n weekStartsOn?: 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6;\n onChange?(value?: Array<Date \| null>): void;\n shouldDisableDate?(value: Date): boolean;\n onClose?(): void;\n}\n\nconst getIsDaySelected = (day: Date, value?: Array<Date \| null>) => {\n if (!value?.[0] \|\| !value[1]) {\n return false;\n }\n\n return Boolean(isWithinInterval(day, startOfDay(value[0]), endOfDay(value[1])));\n};\n\n/*\n @see https://vkcom.github.io/VKUI/#/CalendarRange\n */\nexport const CalendarRange = ({\n value,\n onChange,\n disablePast,\n disableFuture,\n shouldDisableDate,\n onClose,\n weekStartsOn = 1,\n getRootRef,\n disablePickers,\n prevMonthAriaLabel,\n nextMonthAriaLabel,\n changeMonthAriaLabel,\n changeYearAriaLabel,\n changeDayAriaLabel = 'Изменить день',\n prevMonthIcon,\n nextMonthIcon,\n listenDayChangesForUpdate,\n ...props\n}: CalendarRangeProps) => {\n const {\n viewDate,\n setViewDate,\n setPrevMonth,\n setNextMonth,\n focusedDay,\n setFocusedDay,\n isDayFocused,\n isDayDisabled,\n resetSelectedDay,\n } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n const [hintedDate, setHintedDate] = React.useState<Array<Date \| null>>();\n const secondViewDate = addMonths(viewDate, 1);\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n event.preventDefault();\n }\n\n const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);\n\n if (\n newFocusedDay &&\n !isSameMonth(newFocusedDay, viewDate) &&\n !isSameMonth(newFocusedDay, addMonths(viewDate, 1))\n ) {\n setViewDate(newFocusedDay);\n }\n setFocusedDay(newFocusedDay);\n },\n [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n );\n\n const getNewValue = React.useCallback(\n (date: Date) => {\n if (!value) {\n return [date, null];\n }\n\n const start = value[0];\n const end = value[1];\n if ((start && isSameDay(date, start)) \|\| (end && isSameDay(date, end))) {\n return [setTimeEqual(date, start), setTimeEqual(date, end)];\n } else if (start && isBefore(date, start)) {\n return [setTimeEqual(date, start), end];\n } else if (start && isAfter(date, start)) {\n return [start, setTimeEqual(date, end)];\n }\n\n return value;\n },\n [value],\n );\n\n const onDayChange = React.useCallback(\n (date: Date) => {\n onChange?.(getNewValue(date));\n setHintedDate(undefined);\n },\n [onChange, getNewValue],\n );\n\n const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n const isDayActive = React.useCallback(\n (day: Date) =>\n Boolean((value?.[0] && isSameDay(day, value[0])) \|\| (value?.[1] && isSameDay(day, value[1]))),\n [value],\n );\n\n const isDaySelectionEnd = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isLastDay(day, dayOfWeek) \|\| (value?.[1] && isSameDay(day, value[1]))),\n [value],\n );\n\n const isHintedDaySelectionEnd = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isLastDay(day, dayOfWeek) \|\| (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n [hintedDate],\n );\n\n const isDaySelectionStart = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isFirstDay(day, dayOfWeek) \|\| (value?.[0] && isSameDay(day, value[0]))),\n [value],\n );\n\n const isHintedDaySelectionStart = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isFirstDay(day, dayOfWeek) \|\| (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n [hintedDate],\n );\n\n const onDayEnter = React.useCallback(\n (date: Date) => setHintedDate(getNewValue(date)),\n [setHintedDate, getNewValue],\n );\n\n const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n const isDayHinted = React.useCallback(\n (day: Date) => getIsDaySelected(day, hintedDate),\n [hintedDate],\n );\n\n return (\n <RootComponent {...props} baseClassName={styles['CalendarRange']}>\n <div className={styles['CalendarRange__inner']}>\n <CalendarHeader\n viewDate={viewDate}\n onChange={setViewDate}\n nextMonth={false}\n onPrevMonth={setPrevMonth}\n disablePickers={disablePickers}\n className={styles['CalendarRange__header']}\n prevMonthAriaLabel={prevMonthAriaLabel}\n nextMonthAriaLabel={nextMonthAriaLabel}\n changeMonthAriaLabel={changeMonthAriaLabel}\n changeYearAriaLabel={changeYearAriaLabel}\n prevMonthIcon={prevMonthIcon}\n />\n <CalendarDays\n viewDate={viewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n onKeyDown={handleKeyDown}\n isDayFocused={isDayFocused}\n onDayChange={onDayChange}\n isDaySelected={isDaySelected}\n isDayActive={isDayActive}\n isDaySelectionEnd={isDaySelectionEnd}\n isDaySelectionStart={isDaySelectionStart}\n isDayHinted={isDayHinted}\n onDayEnter={onDayEnter}\n onDayLeave={onDayLeave}\n isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n isHintedDaySelectionStart={isHintedDaySelectionStart}\n isDayDisabled={isDayDisabled}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n aria-label={changeDayAriaLabel}\n />\n </div>\n <div className={styles['CalendarRange__inner']}>\n <CalendarHeader\n viewDate={secondViewDate}\n onChange={setViewDate}\n prevMonth={false}\n onNextMonth={setNextMonth}\n disablePickers={disablePickers}\n className={styles['CalendarRange__header']}\n prevMonthAriaLabel={prevMonthAriaLabel}\n nextMonthAriaLabel={nextMonthAriaLabel}\n changeMonthAriaLabel={changeMonthAriaLabel}\n changeYearAriaLabel={changeYearAriaLabel}\n nextMonthIcon={nextMonthIcon}\n />\n <CalendarDays\n viewDate={secondViewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n aria-label={changeDayAriaLabel}\n onKeyDown={handleKeyDown}\n isDayFocused={isDayFocused}\n onDayChange={onDayChange}\n isDaySelected={isDaySelected}\n isDayActive={isDayActive}\n isDaySelectionEnd={isDaySelectionEnd}\n isDaySelectionStart={isDaySelectionStart}\n isDayHinted={isDayHinted}\n onDayEnter={onDayEnter}\n onDayLeave={onDayLeave}\n isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n isHintedDaySelectionStart={isHintedDaySelectionStart}\n isDayDisabled={isDayDisabled}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n tabIndex={0}\n onBlur={resetSelectedDay}\n />\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","useCalendar","isFirstDay","isLastDay","navigateDate","setTimeEqual","addMonths","endOfDay","isAfter","isBefore","isSameDay","isSameMonth","isWithinInterval","startOfDay","CalendarDays","CalendarHeader","RootComponent","getIsDaySelected","day","value","Boolean","CalendarRange","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","getRootRef","disablePickers","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","props","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","useState","hintedDate","setHintedDate","secondViewDate","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","getNewValue","date","start","end","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","baseClassName","div","className","nextMonth","onPrevMonth","onKeyDown","aria-label","prevMonth","onNextMonth","tabIndex","onBlur"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
-    mode?: 'tint' | 'shadow' | 'outline';
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface CardProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+    mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Card
  */
-export declare const Card: ({ mode, children, getRootRef, className, ...restProps }: CardProps) => React.JSX.Element;
+export declare const Card: ({ mode, ...restProps }: CardProps) => React.JSX.Element;

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

@@ -3,19 +3,17 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent";
 /**
  * @see https://vkcom.github.io/VKUI/#/Card
  */ export var Card = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "tint" : _param_mode, children = _param.children, getRootRef = _param.getRootRef, className = _param.className, restProps = _object_without_properties(_param, [
-        "mode",
-        "children",
-        "getRootRef",
-        "className"
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "tint" : _param_mode, restProps = _object_without_properties(_param, [
+        "mode"
     ]);
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        ref: getRootRef,
-        className: classNames("vkuiCard", mode === "outline" && "vkuiCard--mode-outline", mode === "shadow" && "vkuiCard--mode-shadow", className)
-    }), children);
+    var withBorder = mode === "outline" || mode === "outline-tint";
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiCard", mode === "outline" && "vkuiCard--mode-outline", mode === "shadow" && "vkuiCard--mode-shadow", withBorder && "vkuiCard--withBorder")
+    }));
 };
 //# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map 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","~~Card~~","~~mode~~","~~children~~","~~getRootRef","className","~~restProps","~~div~~","~~ref~~"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;~~AAU7C~~;;CAEC,GACD,OAAO,IAAMC,OAAO;~~6BAClBC~~,MAAAA,gCAAO,~~sBACPC~~,~~kBAAAA~~,~~UACAC~~,~~oBAAAA~~,~~YACAC~~,~~mBAAAA,WACGC~~;~~QAJHJ;QACAC;QACAC;QACAC;;IAGA~~,qBACE,~~oBAACE,+CACKD~~;QACJE,~~KAAKJ;QACLC~~,~~WAAWL~~,~~uBAETE,~~SAAS,uCACTA,SAAS,~~qCACTG;QAGDF;AAGP~~,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Card.module.css';\n\nexport interface CardProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n mode?: 'tint' \| 'shadow' \| 'outline' \| 'outline-tint';\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({ mode = 'tint', ...restProps }: CardProps) => {\n const withBorder = mode === 'outline' \|\| mode === 'outline-tint';\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['Card'],\n mode === 'outline' && styles['Card--mode-outline'],\n mode === 'shadow' && styles['Card--mode-shadow'],\n withBorder && styles['Card--withBorder'],\n )}\n />\n );\n};\n"],"names":["React","classNames","RootComponent","Card","mode","restProps","withBorder","baseClassName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAO/D;;CAEC,GACD,OAAO,IAAMC,OAAO;6BAAGC,MAAAA,gCAAO,sBAAWC;QAAlBD;;IACrB,IAAME,aAAaF,SAAS,aAAaA,SAAS;IAClD,qBACE,oBAACF,uDACKG;QACJE,eAAeN,uBAEbG,SAAS,uCACTA,SAAS,qCACTE;;AAIR,EAAE"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface CardGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     size?: 's' | 'm' | 'l';
     /**
      * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа
@@ -9,4 +10,4 @@ export interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/CardGrid
  */
-export declare const CardGrid: ({ children, size, spaced, className, ...restProps }: CardGridProps) => React.JSX.Element;
+export declare const CardGrid: ({ size, spaced, ...restProps }: CardGridProps) => React.JSX.Element;

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

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

package/dist/components/CardGrid/CardGrid.js.map 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","sizeXClassNames","none","COMPACT","~~CardGrid~~","~~children~~","~~size~~","~~spaced~~","~~className~~","~~restProps~~","~~sizeX~~","~~div~~","s","m","~~l","~~REGULAR"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;~~AAGhD~~,IAAMC;IACJC,IAAI;~~GACHF~~,~~SAASG~~,OAAO;~~AAWnB~~;;CAEC,GACD,OAAO,IAAMC,WAAW;~~QACtBC~~,~~kBAAAA,+BACAC,~~MAAAA,gCAAO,~~0CACPC~~,QAAAA,oCAAS,~~uBACTC,mBAAAA,WACGC~~;~~QAJHJ~~;~~QACAC;QACAC;QACAC~~;;~~IAGA~~,~~IAA2BT~~,iBAAAA,wCAAAA,~~eAAnBW~~,OAAAA,0CAAQ;IAEhB,qBACE,~~oBAACC,+CACKF~~;~~QACJD~~,~~WAAWV~~,~~2BAET~~,~~wBACAS~~,~~kCACA;YACEK~~,~~GAAG;YACHC~~,~~GAAG;YACHC~~,~~GAAG;QACL,CAAC,CAACR,~~KAAK,~~EACPI~~,~~UAAUV~~,SAASe,OAAO,~~IAAId~~,eAAe,~~CAACS~~,MAAM,~~EACpDF;QAGDH;AAGP,~~EAAE"}
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 { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n none: styles['CardGrid--sizeX-none'],\n [SizeType.COMPACT]: styles['CardGrid--sizeX-compact'],\n};\n\nconst stylesSize = {\n s: 'vkuiInternalCardGrid--size-s',\n m: 'vkuiInternalCardGrid--size-m',\n l: 'vkuiInternalCardGrid--size-l',\n};\n\nexport interface CardGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n size?: 's' \| 'm' \| 'l';\n /*\n Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n /\n spaced?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({ size = 's', spaced = false, ...restProps }: CardGridProps) => {\n const { sizeX = 'none' } = useAdaptivity();\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['CardGrid'],\n 'vkuiInternalCardGrid',\n spaced && styles['CardGrid--spaced'],\n stylesSize[size],\n sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n )}\n />\n );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","RootComponent","sizeXClassNames","none","COMPACT","stylesSize","s","m","l","CardGrid","size","spaced","restProps","sizeX","baseClassName","REGULAR"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,IAAMC;IACJC,IAAI;GACHH,SAASI,OAAO;AAGnB,IAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAUA;;CAEC,GACD,OAAO,IAAMC,WAAW;6BAAGC,MAAAA,gCAAO,0CAAKC,QAAAA,oCAAS,uBAAUC;QAA/BF;QAAYC;;IACrC,IAA2BZ,iBAAAA,wCAAAA,eAAnBc,OAAAA,0CAAQ;IAEhB,qBACE,oBAACZ,uDACKW;QACJE,eAAehB,2BAEb,wBACAa,kCACAN,UAAU,CAACK,KAAK,EAChBG,UAAUb,SAASe,OAAO,IAAIb,eAAe,CAACW,MAAM;;AAI5D,EAAE"}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';
-export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardScrollProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.
      */
@@ -11,4 +12,4 @@ export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
  */
-export declare const CardScroll: ({ children, size, showArrows, withSpaces, className, ...restProps }: CardScrollProps) => React.JSX.Element;
+export declare const CardScroll: ({ children, size, showArrows, withSpaces, ...restProps }: CardScrollProps) => React.JSX.Element;

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

@@ -6,6 +6,12 @@ import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useDOM } from "../../lib/dom";
 import { HorizontalScroll } from "../HorizontalScroll/HorizontalScroll";
+import { RootComponent } from "../RootComponent/RootComponent";
+var stylesSize = {
+    s: "vkuiInternalCardScroll--size-s",
+    m: "vkuiInternalCardScroll--size-m",
+    l: "vkuiInternalCardScroll--size-l"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
  */ export var CardScroll = function(_param) {
@@ -43,22 +49,17 @@ import { HorizontalScroll } from "../HorizontalScroll/HorizontalScroll";
         }
         return slide.offsetLeft - gapRef.current.offsetWidth;
     };
-    var children = _param.children, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_withSpaces = _param.withSpaces, withSpaces = _param_withSpaces === void 0 ? true : _param_withSpaces, className = _param.className, restProps = _object_without_properties(_param, [
+    var children = _param.children, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_withSpaces = _param.withSpaces, withSpaces = _param_withSpaces === void 0 ? true : _param_withSpaces, restProps = _object_without_properties(_param, [
         "children",
         "size",
         "showArrows",
-        "withSpaces",
-        "className"
+        "withSpaces"
     ]);
     var refContainer = React.useRef(null);
     var gapRef = React.useRef(null);
     var window = useDOM().window;
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiCardScroll", "vkuiInternalCardScroll", size !== false && ({
-            s: "vkuiInternalCardScroll--size-s",
-            m: "vkuiInternalCardScroll--size-m",
-            l: "vkuiInternalCardScroll--size-l"
-        })[size], withSpaces && "vkuiCardScroll--withSpaces", className)
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiCardScroll", "vkuiInternalCardScroll", size !== false && stylesSize[size], withSpaces && "vkuiCardScroll--withSpaces")
     }), /*#__PURE__*/ React.createElement(HorizontalScroll, {
         getScrollToLeft: getScrollToLeft,
         getScrollToRight: getScrollToRight,

package/dist/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","CardScroll","getScrollToLeft","offset","refContainer","current","gapRef","containerWidth","offsetWidth","slideIndex","children","findIndex","el","offsetLeft","parseInt","window","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","size","showArrows","withSpaces","~~className","~~restProps","useRef","~~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;~~AAY~~/F;;CAEC,GACD,OAAO,IAAMC,aAAa;~~QAafC~~,kBAAT,SAASA,gBAAgBC,MAAc;QACrC,IAAI,CAACC,aAAaC,OAAO,IAAI,CAACC,OAAOD,OAAO,EAAE;YAC5C,OAAOF;QACT;QACA,IAAMI,iBAAiBH,aAAaC,OAAO,CAACG,WAAW;QACvD,IAAMC,aAAa,AAAE,qBAAGL,aAAaC,OAAO,CAACK,QAAQ,EAAoBC,SAAS,CAChF,SAACC;mBACCA,GAAGC,UAAU,GACXD,GAAGJ,WAAW,GACdM,SAASC,OAAQC,gBAAgB,CAACJ,IAAIK,WAAW,IACjDd,UACF;;QAGJ,IAAIM,eAAe,CAAC,GAAG;YACrB,OAAON;QACT;QAEA,IAAIM,eAAe,GAAG;YACpB,OAAO;QACT;QAEA,IAAMS,QAAQd,aAAaC,OAAO,CAACK,QAAQ,CAACD,WAAW;QAEvD,IAAMU,WACJD,MAAML,UAAU,GAAIN,CAAAA,iBAAiBW,MAAMV,WAAW,AAAD,IAAKF,OAAOD,OAAO,CAACG,WAAW;QAEtF,IAAIW,YAAY,IAAIb,OAAOD,OAAO,CAACG,WAAW,EAAE;YAC9C,OAAO;QACT;QAEA,OAAOW;IACT;QAESC,mBAAT,SAASA,iBAAiBjB,MAAc;QACtC,IAAI,CAACC,aAAaC,OAAO,IAAI,CAACC,OAAOD,OAAO,EAAE;YAC5C,OAAOF;QACT;QAEA,IAAMI,iBAAiBH,aAAaC,OAAO,CAACG,WAAW;QACvD,IAAMU,QAAQG,MAAMC,SAAS,CAACC,IAAI,CAACC,IAAI,CACrCpB,aAAaC,OAAO,CAACK,QAAQ,EAC7B,SAACE;mBAAoBA,GAAGC,UAAU,GAAGD,GAAGJ,WAAW,GAAGL,SAASI;;QAGjE,IAAI,CAACW,OAAO;YACV,OAAOf;QACT;QAEA,OAAOe,MAAML,UAAU,GAAGP,OAAOD,OAAO,CAACG,WAAW;IACtD;~~QA9DAE~~,kBAAAA,+BACAe,MAAAA,gCAAO,8CACPC,YAAAA,4CAAa,qDACbC,YAAAA,4CAAa,~~0BACbC,mBAAAA,WACGC~~;~~QALHnB~~;QACAe;QACAC;QACAC~~;QACAC~~;;IAGA,~~IAAMxB~~,~~eAAeP~~,~~MAAMiC~~,MAAM,CAAiB;IAClD,~~IAAMxB~~,~~SAAST~~,~~MAAMiC~~,MAAM,CAAiB;IAE5C,IAAM,~~AAAEf~~,~~SAAWhB~~,~~SAAXgB~~;IAsDR,qBACE,~~oBAACgB,+CACKF~~;~~QACJD~~,~~WAAW9B~~,~~6BAET~~,~~0BACA2B~~,SAAS,~~SACP~~,~~CAAA;YACEO~~,~~GAAG;YACHC~~,~~GAAG;YACHC,GAAG;QACL,CAAA,CAAC,CAACT,~~KAAK,~~EACTE,4CACAC~~;sBAGF,~~oBAAC5B~~;~~QACCE~~,iBAAiBA;QACjBkB,kBAAkBA;QAClBM,YAAYA;qBAEZ,oBAACK;~~QAAIH~~,SAAS;~~QAA4BO~~,~~KAAK/B~~;qBAC7C,~~oBAACgC~~;~~QAAKR~~,SAAS;~~QAA6BO~~,~~KAAK7B~~;QAChDI,wBACD,~~oBAAC0B~~;~~QAAKR~~,SAAS;;AAKzB,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 { HTMLAttributesWithRootRef } from '../../types';\nimport { HorizontalScroll, HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardScroll.module.css';\n\nconst stylesSize = {\n s: 'vkuiInternalCardScroll--size-s',\n m: 'vkuiInternalCardScroll--size-m',\n l: 'vkuiInternalCardScroll--size-l',\n};\n\nexport interface CardScrollProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n /\n size?: 's' \| 'm' \| 'l' \| false;\n showArrows?: HorizontalScrollProps['showArrows'];\n withSpaces?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/CardScroll\n /\nexport const CardScroll = ({\n children,\n size = 's',\n showArrows = true,\n withSpaces = true,\n ...restProps\n}: CardScrollProps) => {\n const refContainer = React.useRef<HTMLDivElement>(null);\n const gapRef = React.useRef<HTMLDivElement>(null);\n\n const { window } = useDOM();\n\n function getScrollToLeft(offset: number): number {\n if (!refContainer.current \|\| !gapRef.current) {\n return offset;\n }\n const containerWidth = refContainer.current.offsetWidth;\n const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n (el: HTMLElement) =>\n el.offsetLeft +\n el.offsetWidth +\n parseInt(window!.getComputedStyle(el).marginRight) -\n offset >=\n 0,\n );\n\n if (slideIndex === -1) {\n return offset;\n }\n\n if (slideIndex === 0) {\n return 0;\n }\n\n const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n const scrollTo =\n slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n if (scrollTo <= 2 gapRef.current.offsetWidth) {\n return 0;\n }\n\n return scrollTo;\n }\n\n function getScrollToRight(offset: number): number {\n if (!refContainer.current \|\| !gapRef.current) {\n return offset;\n }\n\n const containerWidth = refContainer.current.offsetWidth;\n const slide = Array.prototype.find.call(\n refContainer.current.children,\n (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,\n ) as HTMLElement;\n\n if (!slide) {\n return offset;\n }\n\n return slide.offsetLeft - gapRef.current.offsetWidth;\n }\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['CardScroll'],\n 'vkuiInternalCardScroll',\n size !== false && stylesSize[size],\n withSpaces && styles['CardScroll--withSpaces'],\n )}\n >\n <HorizontalScroll\n getScrollToLeft={getScrollToLeft}\n getScrollToRight={getScrollToRight}\n showArrows={showArrows}\n >\n <div className={styles['CardScroll__in']} ref={refContainer}>\n <span className={styles['CardScroll__gap']} ref={gapRef} />\n {children}\n <span className={styles['CardScroll__gap']} />\n </div>\n </HorizontalScroll>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","useDOM","HorizontalScroll","RootComponent","stylesSize","s","m","l","CardScroll","getScrollToLeft","offset","refContainer","current","gapRef","containerWidth","offsetWidth","slideIndex","children","findIndex","el","offsetLeft","parseInt","window","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","size","showArrows","withSpaces","restProps","useRef","baseClassName","div","className","ref","span"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,SAASC,gBAAgB,QAA+B,uCAAuC;AAC/F,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,IAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAWA;;CAEC,GACD,OAAO,IAAMC,aAAa;QAYfC,kBAAT,SAASA,gBAAgBC,MAAc;QACrC,IAAI,CAACC,aAAaC,OAAO,IAAI,CAACC,OAAOD,OAAO,EAAE;YAC5C,OAAOF;QACT;QACA,IAAMI,iBAAiBH,aAAaC,OAAO,CAACG,WAAW;QACvD,IAAMC,aAAa,AAAE,qBAAGL,aAAaC,OAAO,CAACK,QAAQ,EAAoBC,SAAS,CAChF,SAACC;mBACCA,GAAGC,UAAU,GACXD,GAAGJ,WAAW,GACdM,SAASC,OAAQC,gBAAgB,CAACJ,IAAIK,WAAW,IACjDd,UACF;;QAGJ,IAAIM,eAAe,CAAC,GAAG;YACrB,OAAON;QACT;QAEA,IAAIM,eAAe,GAAG;YACpB,OAAO;QACT;QAEA,IAAMS,QAAQd,aAAaC,OAAO,CAACK,QAAQ,CAACD,WAAW;QAEvD,IAAMU,WACJD,MAAML,UAAU,GAAIN,CAAAA,iBAAiBW,MAAMV,WAAW,AAAD,IAAKF,OAAOD,OAAO,CAACG,WAAW;QAEtF,IAAIW,YAAY,IAAIb,OAAOD,OAAO,CAACG,WAAW,EAAE;YAC9C,OAAO;QACT;QAEA,OAAOW;IACT;QAESC,mBAAT,SAASA,iBAAiBjB,MAAc;QACtC,IAAI,CAACC,aAAaC,OAAO,IAAI,CAACC,OAAOD,OAAO,EAAE;YAC5C,OAAOF;QACT;QAEA,IAAMI,iBAAiBH,aAAaC,OAAO,CAACG,WAAW;QACvD,IAAMU,QAAQG,MAAMC,SAAS,CAACC,IAAI,CAACC,IAAI,CACrCpB,aAAaC,OAAO,CAACK,QAAQ,EAC7B,SAACE;mBAAoBA,GAAGC,UAAU,GAAGD,GAAGJ,WAAW,GAAGL,SAASI;;QAGjE,IAAI,CAACW,OAAO;YACV,OAAOf;QACT;QAEA,OAAOe,MAAML,UAAU,GAAGP,OAAOD,OAAO,CAACG,WAAW;IACtD;QA7DAE,kBAAAA,+BACAe,MAAAA,gCAAO,8CACPC,YAAAA,4CAAa,qDACbC,YAAAA,4CAAa,0BACVC;QAJHlB;QACAe;QACAC;QACAC;;IAGA,IAAMvB,eAAeZ,MAAMqC,MAAM,CAAiB;IAClD,IAAMvB,SAASd,MAAMqC,MAAM,CAAiB;IAE5C,IAAM,AAAEd,SAAWrB,SAAXqB;IAsDR,qBACE,oBAACnB,uDACKgC;QACJE,eAAerC,6BAEb,0BACAgC,SAAS,SAAS5B,UAAU,CAAC4B,KAAK,EAClCE;sBAGF,oBAAChC;QACCO,iBAAiBA;QACjBkB,kBAAkBA;QAClBM,YAAYA;qBAEZ,oBAACK;QAAIC,SAAS;QAA4BC,KAAK7B;qBAC7C,oBAAC8B;QAAKF,SAAS;QAA6BC,KAAK3B;QAChDI,wBACD,oBAACwB;QAAKF,SAAS;;AAKzB,EAAE"}

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

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

package/dist/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","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;AAO1C,OAAO,IAAMC,cAAc;QACzBC,qBAAAA,aACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWV;IAEjB,IAAMW,cAAc,SAACC;QACnBA,MAAMC,cAAc;QACpB,IAAIN,SAAS;YACXA,QAAQK;QACV;IACF;IAEA,qBACE,oBAACV;QACCM,WAAWT,8BAAkCS;QAC7CM,SAASV;QACTW,SAASV;QACTW,OAAOV;QACPC,SAASI;OACLF,YAEHC,aAAaT,SAASgB,GAAG,iBAAG,oBAACnB,wCAAsB,oBAACD;AAG3D,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 { HTMLAttributesWithRootRef } from '../../../types';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps &\n Omit<HTMLAttributesWithRootRef<HTMLElement>, keyof DraggableProps>;\n\nexport const CellDragger = ({\n onDragStart,\n onDragMove,\n onDragEnd,\n onClick,\n className,\n ...restProps\n}: CellDraggerProps) => {\n const platform = usePlatform();\n\n const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n event.preventDefault();\n if (onClick) {\n onClick(event);\n }\n };\n\n return (\n <Touch\n className={classNames(styles['CellDragger'], className)}\n onStart={onDragStart}\n onMoveY={onDragMove}\n onEnd={onDragEnd}\n onClick={handleClick}\n {...restProps}\n >\n {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n </Touch>\n );\n};\n"],"names":["React","Icon24Reorder","Icon24ReorderIos","classNames","usePlatform","Platform","Touch","CellDragger","onDragStart","onDragMove","onDragEnd","onClick","className","restProps","platform","handleClick","event","preventDefault","onStart","onMoveY","onEnd","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,mBAAmB;AACnE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,KAAK,QAAQ,oBAAoB;AAO1C,OAAO,IAAMC,cAAc;QACzBC,qBAAAA,aACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWV;IAEjB,IAAMW,cAAc,SAACC;QACnBA,MAAMC,cAAc;QACpB,IAAIN,SAAS;YACXA,QAAQK;QACV;IACF;IAEA,qBACE,oBAACV;QACCM,WAAWT,8BAAkCS;QAC7CM,SAASV;QACTW,SAASV;QACTW,OAAOV;QACPC,SAASI;OACLF,YAEHC,aAAaT,SAASgB,GAAG,iBAAG,oBAACnB,wCAAsB,oBAACD;AAG3D,EAAE"}

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

@@ -16,10 +16,9 @@ import { ACTIVE_EFFECT_DELAY, Tappable } from "../Tappable/Tappable";
 import { Footnote } from "../Typography/Footnote/Footnote";
 import { Text } from "../Typography/Text/Text";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden";
-var _obj;
-var sizeYClassNames = (_obj = {
+var sizeYClassNames = _define_property({
     none: "vkuiCheckbox--sizeY-none"
-}, _define_property(_obj, SizeType.COMPACT, "vkuiCheckbox--sizeY-compact"), _define_property(_obj, SizeType.REGULAR, "vkuiCheckbox--sizeY-regular"), _obj);
+}, SizeType.COMPACT, "vkuiCheckbox--sizeY-compact");
 var warn = warnOnce("Checkbox");
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
@@ -83,7 +82,7 @@ var warn = warnOnce("Checkbox");
     }
     return /*#__PURE__*/ React.createElement(Tappable, {
         Component: "label",
-        className: classNames("vkuiCheckbox", platform === Platform.VKCOM && "vkuiCheckbox--vkcom", sizeYClassNames[sizeY], !(hasReactNode(children) || hasReactNode(description)) && "vkuiCheckbox--simple", className),
+        className: classNames("vkuiCheckbox", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], !(hasReactNode(children) || hasReactNode(description)) && "vkuiCheckbox--simple", className),
         style: style,
         disabled: restProps.disabled,
         activeEffectDelay: platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY,
@@ -128,7 +127,9 @@ var warn = warnOnce("Checkbox");
         className: "vkuiCheckbox__content"
     }, /*#__PURE__*/ React.createElement("div", {
         className: "vkuiCheckbox__title"
-    }, /*#__PURE__*/ React.createElement(Text, null, children), /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(Text, {
+        className: "vkuiCheckbox__titleBefore"
+    }, children), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiCheckbox__titleAfter"
     }, titleAfter)), hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
         className: "vkuiCheckbox__description"

package/dist/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 { Text } from '../Typography/Text/Text';\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 <Text>{children}</Text>\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","Text","VisuallyHidden","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"],"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 { Text } from '../Typography/Text/Text';\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};\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 sizeY !== SizeType.REGULAR && 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 <Text className={styles['Checkbox__titleBefore']}>{children}</Text>\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","Text","VisuallyHidden","sizeYClassNames","none","COMPACT","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","REGULAR","disabled","activeEffectDelay","IOS","type","div","VKCOM","Fragment","compact","regular","width","height"],"mappings":"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"}

package/dist/components/Chip/Chip.d.ts CHANGED Viewed

@@ -1,11 +1,12 @@
 import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
 export type ChipValue = string | number;
 export interface ChipOption {
     value?: ChipValue;
     label?: string;
     [otherProp: string]: any;
 }
-export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ChipProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     value: ChipValue;
     option?: ChipOption;
     onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;
@@ -22,4 +23,4 @@ export interface RenderChip<T extends ChipOption> extends ChipProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Chip
  */
-export declare const Chip: ({ value, option, removable, onRemove, removeAriaLabel, before, after, children, className, ...restProps }: ChipProps) => React.JSX.Element;
+export declare const Chip: ({ value, option, removable, onRemove, removeAriaLabel, before, after, children, ...restProps }: ChipProps) => React.JSX.Element;