@vkontakte/vkui 5.0.0 → 5.0.1

package/dist/components/CalendarDays/CalendarDays.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarDays.js","names":["React","isSameDay","isSameMonth","CalendarDay","getDaysNames","getWeeks","LocaleProviderContext","classNames","Footnote","CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","props","locale","useContext","ref","useRef","useState","Date","now","weeks","useMemo","daysNames","handleDayChange","useCallback","date","current","focus","map","dayName","week","i","day","sameMonth","toISOString"],"sources":["../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { isSameDay, isSameMonth } from \"../../lib/date\";\nimport {\n  CalendarDay,\n  CalendarDayElementProps,\n} from \"../CalendarDay/CalendarDay\";\nimport { getDaysNames, getWeeks } from \"../../lib/calendar\";\nimport { LocaleProviderContext } from \"../LocaleProviderContext/LocaleProviderContext\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport \"./CalendarDays.css\";\n\nexport interface CalendarDaysProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  value?: Date | Array<Date | null>;\n  viewDate: Date;\n  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: \"s\" | \"m\";\n  dayProps?: CalendarDayElementProps;\n  onDayChange(value: Date): void;\n  isDayDisabled(value: Date): boolean;\n  isDaySelectionStart(value: Date, dayOfWeek: number): boolean;\n  isDaySelectionEnd(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionStart?(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionEnd?(value: Date, dayOfWeek: number): boolean;\n  isDayActive(value: Date): boolean;\n  isDayHinted?(value: Date): boolean;\n  isDaySelected?(value: Date): boolean;\n  isDayFocused(value: Date): boolean;\n  onDayEnter?(value: Date): void;\n  onDayLeave?(value: Date): void;\n}\n\nexport const CalendarDays = ({\n  viewDate,\n  value,\n  weekStartsOn,\n  onDayChange,\n  isDaySelected,\n  isDayActive,\n  isDaySelectionEnd,\n  isDaySelectionStart,\n  onDayEnter,\n  onDayLeave,\n  isDayHinted,\n  isHintedDaySelectionStart,\n  isHintedDaySelectionEnd,\n  isDayFocused,\n  isDayDisabled,\n  size,\n  showNeighboringMonth = false,\n  dayProps,\n  ...props\n}: CalendarDaysProps) => {\n  const locale = React.useContext(LocaleProviderContext);\n  const ref = React.useRef<HTMLDivElement>(null);\n  const [now] = React.useState(new Date());\n\n  const weeks = React.useMemo(\n    () => getWeeks(viewDate, weekStartsOn),\n    [weekStartsOn, viewDate]\n  );\n\n  const daysNames = React.useMemo(\n    () => getDaysNames(now, weekStartsOn, locale),\n    [locale, now, weekStartsOn]\n  );\n\n  const handleDayChange = React.useCallback(\n    (date: Date) => {\n      onDayChange(date);\n\n      ref.current?.focus();\n    },\n    [onDayChange]\n  );\n\n  return (\n    <div {...props} vkuiClass=\"CalendarDays\" ref={ref}>\n      <div\n        vkuiClass={classNames(\n          \"CalendarDays__row\",\n          `CalendarDays__row--size-${size}`\n        )}\n      >\n        {daysNames.map((dayName) => (\n          <Footnote key={dayName} vkuiClass=\"CalendarDays__weekday\">\n            {dayName}\n          </Footnote>\n        ))}\n      </div>\n\n      {weeks.map((week, i) => (\n        <div\n          vkuiClass={classNames(\n            \"CalendarDays__row\",\n            `CalendarDays__row--size-${size}`\n          )}\n          key={i}\n        >\n          {week.map((day, i) => {\n            const sameMonth = isSameMonth(day, viewDate);\n            return (\n              <CalendarDay\n                key={day.toISOString()}\n                day={day}\n                today={isSameDay(day, now)}\n                active={isDayActive(day)}\n                onChange={handleDayChange}\n                hidden={!showNeighboringMonth && !sameMonth}\n                disabled={isDayDisabled(day)}\n                selectionStart={isDaySelectionStart(day, i)}\n                selectionEnd={isDaySelectionEnd(day, i)}\n                hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}\n                hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}\n                selected={isDaySelected?.(day)}\n                focused={isDayFocused(day)}\n                onEnter={onDayEnter}\n                onLeave={onDayLeave}\n                hinted={isDayHinted?.(day)}\n                sameMonth={sameMonth}\n                size={size}\n                {...dayProps}\n              />\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,SAAT,EAAoBC,WAApB;AACA,SACEC,WADF;AAIA,SAASC,YAAT,EAAuBC,QAAvB;AACA,SAASC,qBAAT;AACA,SAASC,UAAT;AACA,SAASC,QAAT;AAyBA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAoBH;EAAA,IAnBvBC,QAmBuB,QAnBvBA,QAmBuB;EAAA,IAlBvBC,KAkBuB,QAlBvBA,KAkBuB;EAAA,IAjBvBC,YAiBuB,QAjBvBA,YAiBuB;EAAA,IAhBvBC,WAgBuB,QAhBvBA,WAgBuB;EAAA,IAfvBC,aAeuB,QAfvBA,aAeuB;EAAA,IAdvBC,WAcuB,QAdvBA,WAcuB;EAAA,IAbvBC,iBAauB,QAbvBA,iBAauB;EAAA,IAZvBC,mBAYuB,QAZvBA,mBAYuB;EAAA,IAXvBC,UAWuB,QAXvBA,UAWuB;EAAA,IAVvBC,UAUuB,QAVvBA,UAUuB;EAAA,IATvBC,WASuB,QATvBA,WASuB;EAAA,IARvBC,yBAQuB,QARvBA,yBAQuB;EAAA,IAPvBC,uBAOuB,QAPvBA,uBAOuB;EAAA,IANvBC,YAMuB,QANvBA,YAMuB;EAAA,IALvBC,aAKuB,QALvBA,aAKuB;EAAA,IAJvBC,IAIuB,QAJvBA,IAIuB;EAAA,iCAHvBC,oBAGuB;EAAA,IAHvBA,oBAGuB,sCAHA,KAGA;EAAA,IAFvBC,QAEuB,QAFvBA,QAEuB;EAAA,IADpBC,KACoB;;EACvB,IAAMC,MAAM,GAAG7B,KAAK,CAAC8B,UAAN,CAAiBxB,qBAAjB,CAAf;EACA,IAAMyB,GAAG,GAAG/B,KAAK,CAACgC,MAAN,CAA6B,IAA7B,CAAZ;;EACA,sBAAchC,KAAK,CAACiC,QAAN,CAAe,IAAIC,IAAJ,EAAf,CAAd;EAAA;EAAA,IAAOC,GAAP;;EAEA,IAAMC,KAAK,GAAGpC,KAAK,CAACqC,OAAN,CACZ;IAAA,OAAMhC,QAAQ,CAACK,QAAD,EAAWE,YAAX,CAAd;EAAA,CADY,EAEZ,CAACA,YAAD,EAAeF,QAAf,CAFY,CAAd;EAKA,IAAM4B,SAAS,GAAGtC,KAAK,CAACqC,OAAN,CAChB;IAAA,OAAMjC,YAAY,CAAC+B,GAAD,EAAMvB,YAAN,EAAoBiB,MAApB,CAAlB;EAAA,CADgB,EAEhB,CAACA,MAAD,EAASM,GAAT,EAAcvB,YAAd,CAFgB,CAAlB;EAKA,IAAM2B,eAAe,GAAGvC,KAAK,CAACwC,WAAN,CACtB,UAACC,IAAD,EAAgB;IAAA;;IACd5B,WAAW,CAAC4B,IAAD,CAAX;IAEA,gBAAAV,GAAG,CAACW,OAAJ,8DAAaC,KAAb;EACD,CALqB,EAMtB,CAAC9B,WAAD,CANsB,CAAxB;EASA,OACE,wCAASe,KAAT;IAAgB,SAAS,EAAC,cAA1B;IAAyC,GAAG,EAAEG;EAA9C,IACE;IACE,SAAS,EAAExB,UAAU,CACnB,mBADmB,oCAEQkB,IAFR;EADvB,GAMGa,SAAS,CAACM,GAAV,CAAc,UAACC,OAAD;IAAA,OACb,oBAAC,QAAD;MAAU,GAAG,EAAEA,OAAf;MAAwB,SAAS,EAAC;IAAlC,GACGA,OADH,CADa;EAAA,CAAd,CANH,CADF,EAcGT,KAAK,CAACQ,GAAN,CAAU,UAACE,IAAD,EAAOC,CAAP;IAAA,OACT;MACE,SAAS,EAAExC,UAAU,CACnB,mBADmB,oCAEQkB,IAFR,EADvB;MAKE,GAAG,EAAEsB;IALP,GAOGD,IAAI,CAACF,GAAL,CAAS,UAACI,GAAD,EAAMD,CAAN,EAAY;MACpB,IAAME,SAAS,GAAG/C,WAAW,CAAC8C,GAAD,EAAMtC,QAAN,CAA7B;MACA,OACE,oBAAC,WAAD;QACE,GAAG,EAAEsC,GAAG,CAACE,WAAJ,EADP;QAEE,GAAG,EAAEF,GAFP;QAGE,KAAK,EAAE/C,SAAS,CAAC+C,GAAD,EAAMb,GAAN,CAHlB;QAIE,MAAM,EAAEpB,WAAW,CAACiC,GAAD,CAJrB;QAKE,QAAQ,EAAET,eALZ;QAME,MAAM,EAAE,CAACb,oBAAD,IAAyB,CAACuB,SANpC;QAOE,QAAQ,EAAEzB,aAAa,CAACwB,GAAD,CAPzB;QAQE,cAAc,EAAE/B,mBAAmB,CAAC+B,GAAD,EAAMD,CAAN,CARrC;QASE,YAAY,EAAE/B,iBAAiB,CAACgC,GAAD,EAAMD,CAAN,CATjC;QAUE,oBAAoB,EAAE1B,yBAAF,aAAEA,yBAAF,uBAAEA,yBAAyB,CAAG2B,GAAH,EAAQD,CAAR,CAVjD;QAWE,kBAAkB,EAAEzB,uBAAF,aAAEA,uBAAF,uBAAEA,uBAAuB,CAAG0B,GAAH,EAAQD,CAAR,CAX7C;QAYE,QAAQ,EAAEjC,aAAF,aAAEA,aAAF,uBAAEA,aAAa,CAAGkC,GAAH,CAZzB;QAaE,OAAO,EAAEzB,YAAY,CAACyB,GAAD,CAbvB;QAcE,OAAO,EAAE9B,UAdX;QAeE,OAAO,EAAEC,UAfX;QAgBE,MAAM,EAAEC,WAAF,aAAEA,WAAF,uBAAEA,WAAW,CAAG4B,GAAH,CAhBrB;QAiBE,SAAS,EAAEC,SAjBb;QAkBE,IAAI,EAAExB;MAlBR,GAmBME,QAnBN,EADF;IAuBD,CAzBA,CAPH,CADS;EAAA,CAAV,CAdH,CADF;AAqDD,CAjGM"}
+{"version":3,"file":"CalendarDays.js","names":["React","isSameDay","isSameMonth","CalendarDay","getDaysNames","getWeeks","useConfigProvider","classNamesString","Footnote","useTodayDate","CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","className","listenDayChangesForUpdate","props","locale","ref","useRef","now","weeks","useMemo","daysNames","handleDayChange","useCallback","date","current","focus","styles","map","dayName","week","i","day","sameMonth","toISOString"],"sources":["../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { isSameDay, isSameMonth } from \"../../lib/date\";\nimport {\n  CalendarDay,\n  CalendarDayElementProps,\n} from \"../CalendarDay/CalendarDay\";\nimport { getDaysNames, getWeeks } from \"../../lib/calendar\";\nimport { useConfigProvider } from \"../ConfigProvider/ConfigProviderContext\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { useTodayDate } from \"../../hooks/useTodayDate\";\nimport styles from \"./CalendarDays.module.css\";\n\nexport interface CalendarDaysProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  value?: Date | Array<Date | null>;\n  viewDate: Date;\n  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: \"s\" | \"m\";\n  dayProps?: CalendarDayElementProps;\n  listenDayChangesForUpdate?: boolean;\n  onDayChange(value: Date): void;\n  isDayDisabled(value: Date): boolean;\n  isDaySelectionStart(value: Date, dayOfWeek: number): boolean;\n  isDaySelectionEnd(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionStart?(value: Date, dayOfWeek: number): boolean;\n  isHintedDaySelectionEnd?(value: Date, dayOfWeek: number): boolean;\n  isDayActive(value: Date): boolean;\n  isDayHinted?(value: Date): boolean;\n  isDaySelected?(value: Date): boolean;\n  isDayFocused(value: Date): boolean;\n  onDayEnter?(value: Date): void;\n  onDayLeave?(value: Date): void;\n}\n\nexport const CalendarDays = ({\n  viewDate,\n  value,\n  weekStartsOn,\n  onDayChange,\n  isDaySelected,\n  isDayActive,\n  isDaySelectionEnd,\n  isDaySelectionStart,\n  onDayEnter,\n  onDayLeave,\n  isDayHinted,\n  isHintedDaySelectionStart,\n  isHintedDaySelectionEnd,\n  isDayFocused,\n  isDayDisabled,\n  size,\n  showNeighboringMonth = false,\n  dayProps,\n  className,\n  listenDayChangesForUpdate = false,\n  ...props\n}: CalendarDaysProps) => {\n  const { locale } = useConfigProvider();\n  const ref = React.useRef<HTMLDivElement>(null);\n  const now = useTodayDate(listenDayChangesForUpdate);\n\n  const weeks = React.useMemo(\n    () => getWeeks(viewDate, weekStartsOn),\n    [weekStartsOn, viewDate]\n  );\n\n  const daysNames = React.useMemo(\n    () => getDaysNames(now, weekStartsOn, locale),\n    [locale, now, weekStartsOn]\n  );\n\n  const handleDayChange = React.useCallback(\n    (date: Date) => {\n      onDayChange(date);\n\n      ref.current?.focus();\n    },\n    [onDayChange]\n  );\n\n  return (\n    <div\n      {...props}\n      className={classNamesString(styles[\"CalendarDays\"], className)}\n      ref={ref}\n    >\n      <div\n        className={classNamesString(\n          styles[\"CalendarDays__row\"],\n          size && styles[`CalendarDays__row--size-${size}`]\n        )}\n      >\n        {daysNames.map((dayName) => (\n          <Footnote key={dayName} className={styles[\"CalendarDays__weekday\"]}>\n            {dayName}\n          </Footnote>\n        ))}\n      </div>\n\n      {weeks.map((week, i) => (\n        <div\n          className={classNamesString(\n            styles[\"CalendarDays__row\"],\n            size && styles[`CalendarDays__row--size-${size}`]\n          )}\n          key={i}\n        >\n          {week.map((day, i) => {\n            const sameMonth = isSameMonth(day, viewDate);\n            return (\n              <CalendarDay\n                key={day.toISOString()}\n                day={day}\n                today={isSameDay(day, now)}\n                active={isDayActive(day)}\n                onChange={handleDayChange}\n                hidden={!showNeighboringMonth && !sameMonth}\n                disabled={isDayDisabled(day)}\n                selectionStart={isDaySelectionStart(day, i)}\n                selectionEnd={isDaySelectionEnd(day, i)}\n                hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}\n                hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}\n                selected={isDaySelected?.(day)}\n                focused={isDayFocused(day)}\n                onEnter={onDayEnter}\n                onLeave={onDayLeave}\n                hinted={isDayHinted?.(day)}\n                sameMonth={sameMonth}\n                size={size}\n                {...dayProps}\n              />\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/CalendarHeader/CalendarHeader.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { TappableElementProps } from "../Tappable/Tappable";
-import "./CalendarHeader.css";
 declare type ArrowMonthProps = Omit<TappableElementProps, "onClick" | "aria-label">;
 export interface CalendarHeaderProps extends Pick<React.HTMLAttributes<HTMLDivElement>, "className"> {
     viewDate: Date;

package/dist/components/CalendarHeader/CalendarHeader.js

@@ -1,51 +1,56 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { createScopedElement } from "../../lib/jsxRuntime";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className"],
+  _excluded2 = ["className"];
 import * as React from "react";
 import { setMonth, setYear, subMonths, addMonths } from "../../lib/date";
 import { Icon20ChevronLeftOutline, Icon20ChevronRightOutline, Icon12Dropdown } from "@vkontakte/icons";
 import { Tappable } from "../Tappable/Tappable";
-import { classNames } from "../../lib/classNames";
+import { classNamesString } from "../../lib/classNames";
 import { CustomSelect } from "../CustomSelect/CustomSelect";
 import { SizeType } from "../../lib/adaptivity";
 import { getMonths, getYears } from "../../lib/calendar";
-import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
 import { Paragraph } from "../Typography/Paragraph/Paragraph";
 import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider";
 export var CalendarHeader = function CalendarHeader(_ref) {
   var viewDate = _ref.viewDate,
-      onChange = _ref.onChange,
-      _ref$prevMonth = _ref.prevMonth,
-      prevMonth = _ref$prevMonth === void 0 ? true : _ref$prevMonth,
-      _ref$nextMonth = _ref.nextMonth,
-      nextMonth = _ref$nextMonth === void 0 ? true : _ref$nextMonth,
-      _ref$disablePickers = _ref.disablePickers,
-      disablePickers = _ref$disablePickers === void 0 ? false : _ref$disablePickers,
-      onNextMonth = _ref.onNextMonth,
-      onPrevMonth = _ref.onPrevMonth,
-      className = _ref.className,
-      prevMonthProps = _ref.prevMonthProps,
-      nextMonthProps = _ref.nextMonthProps,
-      _ref$prevMonthAriaLab = _ref.prevMonthAriaLabel,
-      prevMonthAriaLabel = _ref$prevMonthAriaLab === void 0 ? "Предыдущий месяц" : _ref$prevMonthAriaLab,
-      _ref$nextMonthAriaLab = _ref.nextMonthAriaLabel,
-      nextMonthAriaLabel = _ref$nextMonthAriaLab === void 0 ? "Следующий месяц" : _ref$nextMonthAriaLab,
-      _ref$changeMonthAriaL = _ref.changeMonthAriaLabel,
-      changeMonthAriaLabel = _ref$changeMonthAriaL === void 0 ? "Изменить месяц" : _ref$changeMonthAriaL,
-      _ref$changeYearAriaLa = _ref.changeYearAriaLabel,
-      changeYearAriaLabel = _ref$changeYearAriaLa === void 0 ? "Изменить год" : _ref$changeYearAriaLa,
-      _ref$prevMonthIcon = _ref.prevMonthIcon,
-      prevMonthIcon = _ref$prevMonthIcon === void 0 ? createScopedElement(Icon20ChevronLeftOutline, {
-    vkuiClass: "CalendarHeader__nav-icon--accent",
-    width: 30,
-    height: 30
-  }) : _ref$prevMonthIcon,
-      _ref$nextMonthIcon = _ref.nextMonthIcon,
-      nextMonthIcon = _ref$nextMonthIcon === void 0 ? createScopedElement(Icon20ChevronRightOutline, {
-    vkuiClass: "CalendarHeader__nav-icon--accent",
-    width: 30,
-    height: 30
-  }) : _ref$nextMonthIcon;
-  var locale = React.useContext(LocaleProviderContext);
+    onChange = _ref.onChange,
+    _ref$prevMonth = _ref.prevMonth,
+    prevMonth = _ref$prevMonth === void 0 ? true : _ref$prevMonth,
+    _ref$nextMonth = _ref.nextMonth,
+    nextMonth = _ref$nextMonth === void 0 ? true : _ref$nextMonth,
+    _ref$disablePickers = _ref.disablePickers,
+    disablePickers = _ref$disablePickers === void 0 ? false : _ref$disablePickers,
+    onNextMonth = _ref.onNextMonth,
+    onPrevMonth = _ref.onPrevMonth,
+    className = _ref.className,
+    _ref$prevMonthProps = _ref.prevMonthProps,
+    prevMonthProps = _ref$prevMonthProps === void 0 ? {} : _ref$prevMonthProps,
+    _ref$nextMonthProps = _ref.nextMonthProps,
+    nextMonthProps = _ref$nextMonthProps === void 0 ? {} : _ref$nextMonthProps,
+    _ref$prevMonthAriaLab = _ref.prevMonthAriaLabel,
+    prevMonthAriaLabel = _ref$prevMonthAriaLab === void 0 ? "Предыдущий месяц" : _ref$prevMonthAriaLab,
+    _ref$nextMonthAriaLab = _ref.nextMonthAriaLabel,
+    nextMonthAriaLabel = _ref$nextMonthAriaLab === void 0 ? "Следующий месяц" : _ref$nextMonthAriaLab,
+    _ref$changeMonthAriaL = _ref.changeMonthAriaLabel,
+    changeMonthAriaLabel = _ref$changeMonthAriaL === void 0 ? "Изменить месяц" : _ref$changeMonthAriaL,
+    _ref$changeYearAriaLa = _ref.changeYearAriaLabel,
+    changeYearAriaLabel = _ref$changeYearAriaLa === void 0 ? "Изменить год" : _ref$changeYearAriaLa,
+    _ref$prevMonthIcon = _ref.prevMonthIcon,
+    prevMonthIcon = _ref$prevMonthIcon === void 0 ? /*#__PURE__*/React.createElement(Icon20ChevronLeftOutline, {
+      className: "vkuiCalendarHeader__nav-icon--accent",
+      width: 30,
+      height: 30
+    }) : _ref$prevMonthIcon,
+    _ref$nextMonthIcon = _ref.nextMonthIcon,
+    nextMonthIcon = _ref$nextMonthIcon === void 0 ? /*#__PURE__*/React.createElement(Icon20ChevronRightOutline, {
+      className: "vkuiCalendarHeader__nav-icon--accent",
+      width: 30,
+      height: 30
+    }) : _ref$nextMonthIcon;
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
   var onMonthsChange = React.useCallback(function (event) {
     return onChange(setMonth(viewDate, Number(event.target.value)));
   }, [onChange, viewDate]);
@@ -55,11 +60,11 @@ export var CalendarHeader = function CalendarHeader(_ref) {
   var months = React.useMemo(function () {
     return getMonths(locale).map(function (_ref2) {
       var value = _ref2.value,
-          label = _ref2.label;
+        label = _ref2.label;
       return {
         value: value,
-        label: createScopedElement("span", {
-          vkuiClass: "CalendarHeader__month"
+        label: /*#__PURE__*/React.createElement("span", {
+          className: "vkuiCalendarHeader__month"
         }, label)
       };
     });
@@ -72,56 +77,59 @@ export var CalendarHeader = function CalendarHeader(_ref) {
     year: "numeric",
     month: "long"
   });
-  return createScopedElement("div", {
-    vkuiClass: "CalendarHeader",
-    className: className
-  }, prevMonth && createScopedElement(AdaptivityProvider, {
+  var prevMonthClassName = prevMonthProps.className,
+    restPrevMonthProps = _objectWithoutProperties(prevMonthProps, _excluded);
+  var nextMonthClassName = nextMonthProps.className,
+    restNextMonthProps = _objectWithoutProperties(nextMonthProps, _excluded2);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNamesString("vkuiCalendarHeader", className)
+  }, prevMonth && /*#__PURE__*/React.createElement(AdaptivityProvider, {
     sizeX: SizeType.REGULAR
-  }, createScopedElement(Tappable, _extends({
-    vkuiClass: classNames("CalendarHeader__nav-icon", "CalendarHeader__nav-icon-prev"),
+  }, /*#__PURE__*/React.createElement(Tappable, _extends({
+    className: classNamesString("vkuiCalendarHeader__nav-icon", "vkuiCalendarHeader__nav-icon-prev", prevMonthClassName),
     onClick: onPrevMonth,
     "aria-label": "".concat(prevMonthAriaLabel, ", ").concat(formatter.format(subMonths(viewDate, 1)))
-  }, prevMonthProps), prevMonthIcon)), disablePickers ? createScopedElement(Paragraph, {
-    vkuiClass: "CalendarHeader__pickers",
+  }, restPrevMonthProps), prevMonthIcon)), disablePickers ? /*#__PURE__*/React.createElement(Paragraph, {
+    className: "vkuiCalendarHeader__pickers",
     weight: "2"
-  }, createScopedElement("span", {
-    vkuiClass: "CalendarHeader__month"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "vkuiCalendarHeader__month"
   }, new Intl.DateTimeFormat(locale, {
     month: "long"
   }).format(viewDate)), "\xA0", new Intl.DateTimeFormat(locale, {
     year: "numeric"
-  }).format(viewDate)) : createScopedElement(AdaptivityProvider, {
+  }).format(viewDate)) : /*#__PURE__*/React.createElement(AdaptivityProvider, {
     sizeY: SizeType.COMPACT
-  }, createScopedElement("div", {
-    vkuiClass: "CalendarHeader__pickers"
-  }, createScopedElement(CustomSelect, {
-    vkuiClass: "CalendarHeader__picker",
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vkuiCalendarHeader__pickers"
+  }, /*#__PURE__*/React.createElement(CustomSelect, {
+    className: "vkuiCalendarHeader__picker",
     value: viewDate.getMonth(),
     options: months,
     dropdownOffsetDistance: 4,
     fixDropdownWidth: false,
-    icon: createScopedElement(Icon12Dropdown, null),
+    icon: /*#__PURE__*/React.createElement(Icon12Dropdown, null),
     onChange: onMonthsChange,
     forceDropdownPortal: false,
     selectType: "accent",
     "aria-label": changeMonthAriaLabel
-  }), createScopedElement(CustomSelect, {
-    vkuiClass: "CalendarHeader__picker",
+  }), /*#__PURE__*/React.createElement(CustomSelect, {
+    className: "vkuiCalendarHeader__picker",
     value: viewDate.getFullYear(),
     options: years,
     dropdownOffsetDistance: 4,
     fixDropdownWidth: false,
-    icon: createScopedElement(Icon12Dropdown, null),
+    icon: /*#__PURE__*/React.createElement(Icon12Dropdown, null),
     onChange: onYearChange,
     forceDropdownPortal: false,
     selectType: "accent",
     "aria-label": changeYearAriaLabel
-  }))), nextMonth && createScopedElement(AdaptivityProvider, {
+  }))), nextMonth && /*#__PURE__*/React.createElement(AdaptivityProvider, {
     sizeX: SizeType.REGULAR
-  }, createScopedElement(Tappable, _extends({
-    vkuiClass: classNames("CalendarHeader__nav-icon", "CalendarHeader__nav-icon-next"),
+  }, /*#__PURE__*/React.createElement(Tappable, _extends({
+    className: classNamesString("vkuiCalendarHeader__nav-icon", "vkuiCalendarHeader__nav-icon-next", nextMonthClassName),
     onClick: onNextMonth,
     "aria-label": "".concat(nextMonthAriaLabel, ", ").concat(formatter.format(addMonths(viewDate, 1)))
-  }, nextMonthProps), nextMonthIcon)));
+  }, restNextMonthProps), nextMonthIcon)));
 };
 //# sourceMappingURL=CalendarHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.js","names":["React","setMonth","setYear","subMonths","addMonths","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","Icon12Dropdown","Tappable","classNames","CustomSelect","SizeType","getMonths","getYears","LocaleProviderContext","Paragraph","AdaptivityProvider","CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","nextMonthIcon","locale","useContext","onMonthsChange","useCallback","event","Number","target","value","onYearChange","months","useMemo","map","label","currentYear","getFullYear","years","formatter","Intl","DateTimeFormat","year","month","REGULAR","format","COMPACT","getMonth"],"sources":["../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { setMonth, setYear, subMonths, addMonths } from \"../../lib/date\";\nimport {\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n  Icon12Dropdown,\n} from \"@vkontakte/icons\";\nimport { Tappable, TappableElementProps } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { CustomSelect } from \"../CustomSelect/CustomSelect\";\nimport { SizeType } from \"../../lib/adaptivity\";\nimport { getMonths, getYears } from \"../../lib/calendar\";\nimport { LocaleProviderContext } from \"../LocaleProviderContext/LocaleProviderContext\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { AdaptivityProvider } from \"../AdaptivityProvider/AdaptivityProvider\";\nimport \"./CalendarHeader.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      vkuiClass=\"CalendarHeader__nav-icon--accent\"\n      width={30}\n      height={30}\n    />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline\n      vkuiClass=\"CalendarHeader__nav-icon--accent\"\n      width={30}\n      height={30}\n    />\n  ),\n}: CalendarHeaderProps) => {\n  const locale = React.useContext(LocaleProviderContext);\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 vkuiClass=\"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  return (\n    <div vkuiClass=\"CalendarHeader\" className={className}>\n      {prevMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            vkuiClass={classNames(\n              \"CalendarHeader__nav-icon\",\n              \"CalendarHeader__nav-icon-prev\"\n            )}\n            onClick={onPrevMonth}\n            aria-label={`${prevMonthAriaLabel}, ${formatter.format(\n              subMonths(viewDate, 1)\n            )}`}\n            {...prevMonthProps}\n          >\n            {prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph vkuiClass=\"CalendarHeader__pickers\" weight=\"2\">\n          <span vkuiClass=\"CalendarHeader__month\">\n            {new Intl.DateTimeFormat(locale, {\n              month: \"long\",\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: \"numeric\",\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <div vkuiClass=\"CalendarHeader__pickers\">\n            <CustomSelect\n              vkuiClass=\"CalendarHeader__picker\"\n              value={viewDate.getMonth()}\n              options={months}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthAriaLabel}\n            />\n            <CustomSelect\n              vkuiClass=\"CalendarHeader__picker\"\n              value={viewDate.getFullYear()}\n              options={years}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearAriaLabel}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {nextMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            vkuiClass={classNames(\n              \"CalendarHeader__nav-icon\",\n              \"CalendarHeader__nav-icon-next\"\n            )}\n            onClick={onNextMonth}\n            aria-label={`${nextMonthAriaLabel}, ${formatter.format(\n              addMonths(viewDate, 1)\n            )}`}\n            {...nextMonthProps}\n          >\n            {nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CalendarHeader.js","names":["React","setMonth","setYear","subMonths","addMonths","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","Icon12Dropdown","Tappable","classNamesString","CustomSelect","SizeType","getMonths","getYears","useConfigProvider","Paragraph","AdaptivityProvider","CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthProps","nextMonthProps","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","prevMonthIcon","nextMonthIcon","locale","onMonthsChange","useCallback","event","Number","target","value","onYearChange","months","useMemo","map","label","currentYear","getFullYear","years","formatter","Intl","DateTimeFormat","year","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","REGULAR","format","COMPACT","getMonth"],"sources":["../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { setMonth, setYear, subMonths, addMonths } from \"../../lib/date\";\nimport {\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n  Icon12Dropdown,\n} from \"@vkontakte/icons\";\nimport { Tappable, TappableElementProps } from \"../Tappable/Tappable\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { CustomSelect } from \"../CustomSelect/CustomSelect\";\nimport { SizeType } from \"../../lib/adaptivity\";\nimport { getMonths, getYears } from \"../../lib/calendar\";\nimport { useConfigProvider } from \"../ConfigProvider/ConfigProviderContext\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { AdaptivityProvider } from \"../AdaptivityProvider/AdaptivityProvider\";\nimport styles from \"./CalendarHeader.module.css\";\n\ntype ArrowMonthProps = Omit<TappableElementProps, \"onClick\" | \"aria-label\">;\n\nexport interface CalendarHeaderProps\n  extends Pick<React.HTMLAttributes<HTMLDivElement>, \"className\"> {\n  viewDate: Date;\n  prevMonth?: boolean;\n  nextMonth?: boolean;\n  disablePickers?: boolean;\n  prevMonthAriaLabel?: string;\n  nextMonthAriaLabel?: string;\n  changeMonthAriaLabel?: string;\n  changeYearAriaLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  onChange(viewDate: Date): void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?(): void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?(): void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonth = true,\n  nextMonth = true,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  className,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthAriaLabel = \"Предыдущий месяц\",\n  nextMonthAriaLabel = \"Следующий месяц\",\n  changeMonthAriaLabel = \"Изменить месяц\",\n  changeYearAriaLabel = \"Изменить год\",\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline\n      className={styles[\"CalendarHeader__nav-icon--accent\"]}\n      width={30}\n      height={30}\n    />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline\n      className={styles[\"CalendarHeader__nav-icon--accent\"]}\n      width={30}\n      height={30}\n    />\n  ),\n}: CalendarHeaderProps) => {\n  const { locale } = useConfigProvider();\n  const onMonthsChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setMonth(viewDate, Number(event.target.value))),\n    [onChange, viewDate]\n  );\n  const onYearChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange(setYear(viewDate, Number(event.target.value))),\n    [onChange, viewDate]\n  );\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles[\"CalendarHeader__month\"]}>{label}</span>,\n      })),\n    [locale]\n  );\n\n  const currentYear = viewDate.getFullYear();\n\n  const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"long\",\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } =\n    prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } =\n    nextMonthProps;\n\n  return (\n    <div className={classNamesString(styles[\"CalendarHeader\"], className)}>\n      {prevMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNamesString(\n              styles[\"CalendarHeader__nav-icon\"],\n              styles[\"CalendarHeader__nav-icon-prev\"],\n              prevMonthClassName\n            )}\n            onClick={onPrevMonth}\n            aria-label={`${prevMonthAriaLabel}, ${formatter.format(\n              subMonths(viewDate, 1)\n            )}`}\n            {...restPrevMonthProps}\n          >\n            {prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph className={styles[\"CalendarHeader__pickers\"]} weight=\"2\">\n          <span className={styles[\"CalendarHeader__month\"]}>\n            {new Intl.DateTimeFormat(locale, {\n              month: \"long\",\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: \"numeric\",\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <div className={styles[\"CalendarHeader__pickers\"]}>\n            <CustomSelect\n              className={styles[\"CalendarHeader__picker\"]}\n              value={viewDate.getMonth()}\n              options={months}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthAriaLabel}\n            />\n            <CustomSelect\n              className={styles[\"CalendarHeader__picker\"]}\n              value={viewDate.getFullYear()}\n              options={years}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearAriaLabel}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {nextMonth && (\n        <AdaptivityProvider sizeX={SizeType.REGULAR}>\n          <Tappable\n            className={classNamesString(\n              styles[\"CalendarHeader__nav-icon\"],\n              styles[\"CalendarHeader__nav-icon-next\"],\n              nextMonthClassName\n            )}\n            onClick={onNextMonth}\n            aria-label={`${nextMonthAriaLabel}, ${formatter.format(\n              addMonths(viewDate, 1)\n            )}`}\n            {...restNextMonthProps}\n          >\n            {nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { CalendarHeaderProps } from "../CalendarHeader/CalendarHeader";
+import { CalendarDaysProps } from "../CalendarDays/CalendarDays";
 import { HasRootRef } from "../../types";
-import "./CalendarRange.css";
-export interface CalendarRangeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, Pick<CalendarHeaderProps, "prevMonthAriaLabel" | "nextMonthAriaLabel" | "changeMonthAriaLabel" | "changeYearAriaLabel" | "prevMonthIcon" | "nextMonthIcon">, HasRootRef<HTMLDivElement> {
+export interface CalendarRangeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, Pick<CalendarHeaderProps, "prevMonthAriaLabel" | "nextMonthAriaLabel" | "changeMonthAriaLabel" | "changeYearAriaLabel" | "prevMonthIcon" | "nextMonthIcon">, Pick<CalendarDaysProps, "listenDayChangesForUpdate">, HasRootRef<HTMLDivElement> {
     value?: Array<Date | null>;
     disablePast?: boolean;
     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, ...props }: CalendarRangeProps) => JSX.Element;
+export declare const CalendarRange: ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn, getRootRef, disablePickers, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, changeDayAriaLabel, prevMonthIcon, nextMonthIcon, className, listenDayChangesForUpdate, ...props }: CalendarRangeProps) => JSX.Element;

package/dist/components/CalendarRange/CalendarRange.js

@@ -1,91 +1,82 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["value", "onChange", "disablePast", "disableFuture", "shouldDisableDate", "onClose", "weekStartsOn", "getRootRef", "disablePickers", "prevMonthAriaLabel", "nextMonthAriaLabel", "changeMonthAriaLabel", "changeYearAriaLabel", "changeDayAriaLabel", "prevMonthIcon", "nextMonthIcon"];
-import { createScopedElement } from "../../lib/jsxRuntime";
+var _excluded = ["value", "onChange", "disablePast", "disableFuture", "shouldDisableDate", "onClose", "weekStartsOn", "getRootRef", "disablePickers", "prevMonthAriaLabel", "nextMonthAriaLabel", "changeMonthAriaLabel", "changeYearAriaLabel", "changeDayAriaLabel", "prevMonthIcon", "nextMonthIcon", "className", "listenDayChangesForUpdate"];
 import * as React from "react";
+import { classNamesString } from "../../lib/classNames";
 import { addMonths, isSameMonth, isSameDay, isBefore, isAfter, startOfDay, endOfDay, isWithinInterval } from "../../lib/date";
 import { CalendarHeader } from "../CalendarHeader/CalendarHeader";
 import { CalendarDays } from "../CalendarDays/CalendarDays";
 import { navigateDate, setTimeEqual, isLastDay, isFirstDay } from "../../lib/calendar";
 import { useCalendar } from "../../hooks/useCalendar";
-
 var getIsDaySelected = function getIsDaySelected(day, value) {
   if (!(value !== null && value !== void 0 && value[0]) || !value[1]) {
     return false;
   }
-
   return Boolean(isWithinInterval(day, startOfDay(value[0]), endOfDay(value[1])));
 };
+
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
  */
-
-
 export var CalendarRange = function CalendarRange(_ref) {
   var value = _ref.value,
-      onChange = _ref.onChange,
-      disablePast = _ref.disablePast,
-      disableFuture = _ref.disableFuture,
-      shouldDisableDate = _ref.shouldDisableDate,
-      onClose = _ref.onClose,
-      _ref$weekStartsOn = _ref.weekStartsOn,
-      weekStartsOn = _ref$weekStartsOn === void 0 ? 1 : _ref$weekStartsOn,
-      getRootRef = _ref.getRootRef,
-      disablePickers = _ref.disablePickers,
-      prevMonthAriaLabel = _ref.prevMonthAriaLabel,
-      nextMonthAriaLabel = _ref.nextMonthAriaLabel,
-      changeMonthAriaLabel = _ref.changeMonthAriaLabel,
-      changeYearAriaLabel = _ref.changeYearAriaLabel,
-      _ref$changeDayAriaLab = _ref.changeDayAriaLabel,
-      changeDayAriaLabel = _ref$changeDayAriaLab === void 0 ? "Изменить день" : _ref$changeDayAriaLab,
-      prevMonthIcon = _ref.prevMonthIcon,
-      nextMonthIcon = _ref.nextMonthIcon,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    onChange = _ref.onChange,
+    disablePast = _ref.disablePast,
+    disableFuture = _ref.disableFuture,
+    shouldDisableDate = _ref.shouldDisableDate,
+    onClose = _ref.onClose,
+    _ref$weekStartsOn = _ref.weekStartsOn,
+    weekStartsOn = _ref$weekStartsOn === void 0 ? 1 : _ref$weekStartsOn,
+    getRootRef = _ref.getRootRef,
+    disablePickers = _ref.disablePickers,
+    prevMonthAriaLabel = _ref.prevMonthAriaLabel,
+    nextMonthAriaLabel = _ref.nextMonthAriaLabel,
+    changeMonthAriaLabel = _ref.changeMonthAriaLabel,
+    changeYearAriaLabel = _ref.changeYearAriaLabel,
+    _ref$changeDayAriaLab = _ref.changeDayAriaLabel,
+    changeDayAriaLabel = _ref$changeDayAriaLab === void 0 ? "Изменить день" : _ref$changeDayAriaLab,
+    prevMonthIcon = _ref.prevMonthIcon,
+    nextMonthIcon = _ref.nextMonthIcon,
+    className = _ref.className,
+    listenDayChangesForUpdate = _ref.listenDayChangesForUpdate,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useCalendar = useCalendar({
-    value: value,
-    disableFuture: disableFuture,
-    disablePast: disablePast,
-    shouldDisableDate: shouldDisableDate
-  }),
-      viewDate = _useCalendar.viewDate,
-      setViewDate = _useCalendar.setViewDate,
-      setPrevMonth = _useCalendar.setPrevMonth,
-      setNextMonth = _useCalendar.setNextMonth,
-      focusedDay = _useCalendar.focusedDay,
-      setFocusedDay = _useCalendar.setFocusedDay,
-      isDayFocused = _useCalendar.isDayFocused,
-      isDayDisabled = _useCalendar.isDayDisabled,
-      resetSelectedDay = _useCalendar.resetSelectedDay;
-
+      value: value,
+      disableFuture: disableFuture,
+      disablePast: disablePast,
+      shouldDisableDate: shouldDisableDate
+    }),
+    viewDate = _useCalendar.viewDate,
+    setViewDate = _useCalendar.setViewDate,
+    setPrevMonth = _useCalendar.setPrevMonth,
+    setNextMonth = _useCalendar.setNextMonth,
+    focusedDay = _useCalendar.focusedDay,
+    setFocusedDay = _useCalendar.setFocusedDay,
+    isDayFocused = _useCalendar.isDayFocused,
+    isDayDisabled = _useCalendar.isDayDisabled,
+    resetSelectedDay = _useCalendar.resetSelectedDay;
   var _React$useState = React.useState(),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      hintedDate = _React$useState2[0],
-      setHintedDate = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    hintedDate = _React$useState2[0],
+    setHintedDate = _React$useState2[1];
   var secondViewDate = addMonths(viewDate, 1);
   var handleKeyDown = React.useCallback(function (event) {
     if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
       event.preventDefault();
     }
-
     var newFocusedDay = navigateDate(focusedDay !== null && focusedDay !== void 0 ? focusedDay : value === null || value === void 0 ? void 0 : value[1], event.key);
-
     if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate) && !isSameMonth(newFocusedDay, addMonths(viewDate, 1))) {
       setViewDate(newFocusedDay);
     }
-
     setFocusedDay(newFocusedDay);
   }, [focusedDay, setFocusedDay, setViewDate, value, viewDate]);
   var getNewValue = React.useCallback(function (date) {
     if (!value) {
       return [date, null];
     }
-
     var start = value[0];
     var end = value[1];
-
     if (start && isSameDay(date, start) || end && isSameDay(date, end)) {
       return [setTimeEqual(date, start), setTimeEqual(date, end)];
     } else if (start && isBefore(date, start)) {
@@ -93,7 +84,6 @@ export var CalendarRange = function CalendarRange(_ref) {
     } else if (start && isAfter(date, start)) {
       return [start, setTimeEqual(date, end)];
     }
-
     return value;
   }, [value]);
   var onDayChange = React.useCallback(function (date) {
@@ -127,24 +117,24 @@ export var CalendarRange = function CalendarRange(_ref) {
   var isDayHinted = React.useCallback(function (day) {
     return getIsDaySelected(day, hintedDate);
   }, [hintedDate]);
-  return createScopedElement("div", _extends({}, props, {
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     ref: getRootRef,
-    vkuiClass: "CalendarRange"
-  }), createScopedElement("div", {
-    vkuiClass: "CalendarRange__inner"
-  }, createScopedElement(CalendarHeader, {
+    className: classNamesString("vkuiCalendarRange", className)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "vkuiCalendarRange__inner"
+  }, /*#__PURE__*/React.createElement(CalendarHeader, {
     viewDate: viewDate,
     onChange: setViewDate,
     nextMonth: false,
     onPrevMonth: setPrevMonth,
     disablePickers: disablePickers,
-    vkuiClass: "CalendarRange__header",
+    className: "vkuiCalendarRange__header",
     prevMonthAriaLabel: prevMonthAriaLabel,
     nextMonthAriaLabel: nextMonthAriaLabel,
     changeMonthAriaLabel: changeMonthAriaLabel,
     changeYearAriaLabel: changeYearAriaLabel,
     prevMonthIcon: prevMonthIcon
-  }), createScopedElement(CalendarDays, {
+  }), /*#__PURE__*/React.createElement(CalendarDays, {
     viewDate: viewDate,
     value: value,
     weekStartsOn: weekStartsOn,
@@ -161,22 +151,23 @@ export var CalendarRange = function CalendarRange(_ref) {
     isHintedDaySelectionEnd: isHintedDaySelectionEnd,
     isHintedDaySelectionStart: isHintedDaySelectionStart,
     isDayDisabled: isDayDisabled,
+    listenDayChangesForUpdate: listenDayChangesForUpdate,
     "aria-label": changeDayAriaLabel
-  })), createScopedElement("div", {
-    vkuiClass: "CalendarRange__inner"
-  }, createScopedElement(CalendarHeader, {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "vkuiCalendarRange__inner"
+  }, /*#__PURE__*/React.createElement(CalendarHeader, {
     viewDate: secondViewDate,
     onChange: setViewDate,
     prevMonth: false,
     onNextMonth: setNextMonth,
     disablePickers: disablePickers,
-    vkuiClass: "CalendarRange__header",
+    className: "vkuiCalendarRange__header",
     prevMonthAriaLabel: prevMonthAriaLabel,
     nextMonthAriaLabel: nextMonthAriaLabel,
     changeMonthAriaLabel: changeMonthAriaLabel,
     changeYearAriaLabel: changeYearAriaLabel,
     nextMonthIcon: nextMonthIcon
-  }), createScopedElement(CalendarDays, {
+  }), /*#__PURE__*/React.createElement(CalendarDays, {
     viewDate: secondViewDate,
     value: value,
     weekStartsOn: weekStartsOn,
@@ -194,6 +185,7 @@ export var CalendarRange = function CalendarRange(_ref) {
     isHintedDaySelectionEnd: isHintedDaySelectionEnd,
     isHintedDaySelectionStart: isHintedDaySelectionStart,
     isDayDisabled: isDayDisabled,
+    listenDayChangesForUpdate: listenDayChangesForUpdate,
     tabIndex: 0,
     onBlur: resetSelectedDay
   })));