@vkontakte/vkui 4.27.2 → 4.28.0

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,133 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value", "onChange", "disablePast", "disableFuture", "shouldDisableDate", "onClose", "enableTime", "doneButtonText", "weekStartsOn", "getRootRef", "disablePickers", "changeHoursAriaLabel", "changeMinutesAriaLabel", "prevMonthAriaLabel", "nextMonthAriaLabel", "changeMonthAriaLabel", "changeYearAriaLabel", "showNeighboringMonth", "changeDayAriaLabel", "size"];
+import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from "react";
+import { isSameMonth, isSameDay } from "date-fns";
+import { CalendarHeader } from "../CalendarHeader/CalendarHeader";
+import { CalendarDays } from "../CalendarDays/CalendarDays";
+import { CalendarTime } from "../CalendarTime/CalendarTime";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { navigateDate, setTimeEqual, isFirstDay, isLastDay } from "../../lib/calendar";
+import { useCalendar } from "../../hooks/useCalendar";
+import { classNames } from "../../lib/classNames";
+import { warnOnce } from "../../lib/warnOnce";
+var warn = warnOnce("Calendar");
+export var Calendar = function Calendar(_ref) {
+  var value = _ref.value,
+      onChange = _ref.onChange,
+      disablePast = _ref.disablePast,
+      disableFuture = _ref.disableFuture,
+      shouldDisableDate = _ref.shouldDisableDate,
+      onClose = _ref.onClose,
+      _ref$enableTime = _ref.enableTime,
+      enableTime = _ref$enableTime === void 0 ? false : _ref$enableTime,
+      doneButtonText = _ref.doneButtonText,
+      _ref$weekStartsOn = _ref.weekStartsOn,
+      weekStartsOn = _ref$weekStartsOn === void 0 ? 1 : _ref$weekStartsOn,
+      getRootRef = _ref.getRootRef,
+      disablePickers = _ref.disablePickers,
+      changeHoursAriaLabel = _ref.changeHoursAriaLabel,
+      changeMinutesAriaLabel = _ref.changeMinutesAriaLabel,
+      prevMonthAriaLabel = _ref.prevMonthAriaLabel,
+      nextMonthAriaLabel = _ref.nextMonthAriaLabel,
+      changeMonthAriaLabel = _ref.changeMonthAriaLabel,
+      changeYearAriaLabel = _ref.changeYearAriaLabel,
+      showNeighboringMonth = _ref.showNeighboringMonth,
+      _ref$changeDayAriaLab = _ref.changeDayAriaLabel,
+      changeDayAriaLabel = _ref$changeDayAriaLab === void 0 ? "Изменить день" : _ref$changeDayAriaLab,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "m" : _ref$size,
+      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;
+
+  useIsomorphicLayoutEffect(function () {
+    if (value) {
+      setViewDate(value);
+    }
+  }, [value]);
+
+  if (process.env.NODE_ENV === "development" && !disablePickers && size === "s") {
+    warn("Нельзя включить селекты выбора месяца/года если размер календаря 's'");
+  }
+
+  if (process.env.NODE_ENV === "development" && enableTime && size === "s") {
+    warn("Нельзя включить выбор времени если размер календаря 's'");
+  }
+
+  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, event.key);
+
+    if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {
+      setViewDate(newFocusedDay);
+    }
+
+    setFocusedDay(newFocusedDay);
+  }, [focusedDay, setFocusedDay, setViewDate, value, viewDate]);
+  var onDayChange = React.useCallback(function (date) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(setTimeEqual(date, value));
+  }, [value, onChange]);
+  var isDayActive = React.useCallback(function (day) {
+    return Boolean(value && isSameDay(day, value));
+  }, [value]);
+  return createScopedElement("div", _extends({}, props, {
+    ref: getRootRef,
+    vkuiClass: classNames("Calendar", "Calendar--size-".concat(size))
+  }), createScopedElement(CalendarHeader, {
+    viewDate: viewDate,
+    onChange: setViewDate,
+    onNextMonth: setNextMonth,
+    onPrevMonth: setPrevMonth,
+    disablePickers: disablePickers || size === "s",
+    vkuiClass: "Calendar__header",
+    prevMonthAriaLabel: prevMonthAriaLabel,
+    nextMonthAriaLabel: nextMonthAriaLabel,
+    changeMonthAriaLabel: changeMonthAriaLabel,
+    changeYearAriaLabel: changeYearAriaLabel
+  }), createScopedElement(CalendarDays, {
+    viewDate: viewDate,
+    value: value,
+    weekStartsOn: weekStartsOn,
+    isDayFocused: isDayFocused,
+    tabIndex: 0,
+    "aria-label": changeDayAriaLabel,
+    onKeyDown: handleKeyDown,
+    onDayChange: onDayChange,
+    isDayActive: isDayActive,
+    isDaySelectionStart: isFirstDay,
+    isDaySelectionEnd: isLastDay,
+    isDayDisabled: isDayDisabled,
+    onBlur: resetSelectedDay,
+    showNeighboringMonth: showNeighboringMonth,
+    size: size
+  }), enableTime && value && size !== "s" && createScopedElement("div", {
+    vkuiClass: "Calendar__time"
+  }, createScopedElement(CalendarTime, {
+    value: value,
+    onChange: onChange,
+    onClose: onClose,
+    doneButtonText: doneButtonText,
+    changeHoursAriaLabel: changeHoursAriaLabel,
+    changeMinutesAriaLabel: changeMinutesAriaLabel
+  })));
+};
+//# sourceMappingURL=Calendar.js.map

package/dist/components/Calendar/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Calendar/Calendar.tsx"],"names":["React","isSameMonth","isSameDay","CalendarHeader","CalendarDays","CalendarTime","useIsomorphicLayoutEffect","navigateDate","setTimeEqual","isFirstDay","isLastDay","useCalendar","classNames","warnOnce","warn","Calendar","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","weekStartsOn","getRootRef","disablePickers","changeHoursAriaLabel","changeMinutesAriaLabel","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","showNeighboringMonth","changeDayAriaLabel","size","props","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","process","env","NODE_ENV","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","onDayChange","date","isDayActive","day","Boolean"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { isSameMonth, isSameDay } from \"date-fns\";\nimport {\n  CalendarHeader,\n  CalendarHeaderProps,\n} from \"../CalendarHeader/CalendarHeader\";\nimport { CalendarDays } from \"../CalendarDays/CalendarDays\";\nimport { CalendarTime, CalendarTimeProps } from \"../CalendarTime/CalendarTime\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport {\n  navigateDate,\n  setTimeEqual,\n  isFirstDay,\n  isLastDay,\n} from \"../../lib/calendar\";\nimport { useCalendar } from \"../../hooks/useCalendar\";\nimport { HasRootRef } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./Calendar.css\";\n\nexport interface CalendarProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\">,\n    Pick<CalendarTimeProps, \"changeHoursAriaLabel\" | \"changeMinutesAriaLabel\">,\n    Pick<\n      CalendarHeaderProps,\n      | \"prevMonthAriaLabel\"\n      | \"nextMonthAriaLabel\"\n      | \"changeMonthAriaLabel\"\n      | \"changeYearAriaLabel\"\n    >,\n    HasRootRef<HTMLDivElement> {\n  value?: Date;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  doneButtonText?: string;\n  changeDayAriaLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: \"s\" | \"m\";\n  onChange?(value?: Date): void;\n  shouldDisableDate?(value: Date): boolean;\n  onClose?(): void;\n}\n\nconst warn = warnOnce(\"Calendar\");\n\nexport const Calendar: React.FC<CalendarProps> = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  enableTime = false,\n  doneButtonText,\n  weekStartsOn = 1,\n  getRootRef,\n  disablePickers,\n  changeHoursAriaLabel,\n  changeMinutesAriaLabel,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  showNeighboringMonth,\n  changeDayAriaLabel = \"Изменить день\",\n  size = \"m\",\n  ...props\n}) => {\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\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      setViewDate(value);\n    }\n  }, [value]);\n\n  if (\n    process.env.NODE_ENV === \"development\" &&\n    !disablePickers &&\n    size === \"s\"\n  ) {\n    warn(\n      \"Нельзя включить селекты выбора месяца/года если размер календаря 's'\"\n    );\n  }\n\n  if (process.env.NODE_ENV === \"development\" && enableTime && size === \"s\") {\n    warn(\"Нельзя включить выбор времени если размер календаря 's'\");\n  }\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (\n        [\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\"].includes(event.key)\n      ) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate]\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(setTimeEqual(date, value as Date | undefined | null));\n    },\n    [value, onChange]\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(value && isSameDay(day, value)),\n    [value]\n  );\n\n  return (\n    <div\n      {...props}\n      ref={getRootRef}\n      vkuiClass={classNames(\"Calendar\", `Calendar--size-${size}`)}\n    >\n      <CalendarHeader\n        viewDate={viewDate}\n        onChange={setViewDate}\n        onNextMonth={setNextMonth}\n        onPrevMonth={setPrevMonth}\n        disablePickers={disablePickers || size === \"s\"}\n        vkuiClass=\"Calendar__header\"\n        prevMonthAriaLabel={prevMonthAriaLabel}\n        nextMonthAriaLabel={nextMonthAriaLabel}\n        changeMonthAriaLabel={changeMonthAriaLabel}\n        changeYearAriaLabel={changeYearAriaLabel}\n      />\n      <CalendarDays\n        viewDate={viewDate}\n        value={value}\n        weekStartsOn={weekStartsOn}\n        isDayFocused={isDayFocused}\n        tabIndex={0}\n        aria-label={changeDayAriaLabel}\n        onKeyDown={handleKeyDown}\n        onDayChange={onDayChange}\n        isDayActive={isDayActive}\n        isDaySelectionStart={isFirstDay}\n        isDaySelectionEnd={isLastDay}\n        isDayDisabled={isDayDisabled}\n        onBlur={resetSelectedDay}\n        showNeighboringMonth={showNeighboringMonth}\n        size={size}\n      />\n      {enableTime && value && size !== \"s\" && (\n        <div vkuiClass=\"Calendar__time\">\n          <CalendarTime\n            value={value}\n            onChange={onChange}\n            onClose={onClose}\n            doneButtonText={doneButtonText}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"file":"Calendar.js"}

package/dist/components/CalendarDay/CalendarDay.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import "./CalendarDay.css";
+export interface CalendarDayProps {
+    day: Date;
+    today?: boolean;
+    selected?: boolean;
+    selectionStart?: boolean;
+    selectionEnd?: boolean;
+    hintedSelectionStart?: boolean;
+    hintedSelectionEnd?: boolean;
+    active?: boolean;
+    hidden?: boolean;
+    disabled?: boolean;
+    focused?: boolean;
+    hinted?: boolean;
+    sameMonth?: boolean;
+    size?: "s" | "m";
+    onChange(value: Date): void;
+    onEnter?(value: Date): void;
+    onLeave?(value: Date): void;
+}
+export declare const CalendarDay: React.FC<CalendarDayProps>;

package/dist/components/CalendarDay/CalendarDay.js

@@ -0,0 +1,91 @@
+import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import Tappable from "../Tappable/Tappable";
+import { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from "../../hooks/useKeyboardInputTracker";
+import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
+export var CalendarDay = /*#__PURE__*/React.memo(function (_ref) {
+  var day = _ref.day,
+      today = _ref.today,
+      selected = _ref.selected,
+      onChange = _ref.onChange,
+      hidden = _ref.hidden,
+      disabled = _ref.disabled,
+      active = _ref.active,
+      selectionStart = _ref.selectionStart,
+      selectionEnd = _ref.selectionEnd,
+      focused = _ref.focused,
+      onEnter = _ref.onEnter,
+      onLeave = _ref.onLeave,
+      hinted = _ref.hinted,
+      hintedSelectionStart = _ref.hintedSelectionStart,
+      hintedSelectionEnd = _ref.hintedSelectionEnd,
+      sameMonth = _ref.sameMonth,
+      size = _ref.size;
+  var locale = React.useContext(LocaleProviderContext);
+  var ref = React.useRef(null);
+  var onClick = React.useCallback(function () {
+    return onChange(day);
+  }, [day, onChange]);
+  var handleEnter = React.useCallback(function () {
+    return onEnter === null || onEnter === void 0 ? void 0 : onEnter(day);
+  }, [day, onEnter]);
+  var handleLeave = React.useCallback(function () {
+    return onLeave === null || onLeave === void 0 ? void 0 : onLeave(day);
+  }, [day, onLeave]);
+  React.useEffect(function () {
+    if (focused && ref.current) {
+      ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, {
+        bubbles: true
+      }));
+      ref.current.focus();
+    }
+  }, [focused]);
+
+  if (hidden) {
+    return createScopedElement("div", {
+      vkuiClass: "CalendarDay__hidden"
+    });
+  }
+
+  return createScopedElement(Tappable, {
+    vkuiClass: classNames("CalendarDay", "CalendarDay--size-".concat(size), {
+      "CalendarDay--today": today,
+      "CalendarDay--selected": selected && !disabled,
+      "CalendarDay--active": active && !disabled,
+      "CalendarDay--selection-start": selectionStart,
+      "CalendarDay--selection-end": selectionEnd,
+      "CalendarDay--disabled": disabled,
+      "CalendarDay--not-same-month": !sameMonth
+    }),
+    hoverMode: active ? "CalendarDay--active-hover" : "CalendarDay--hover",
+    hasActive: false,
+    onClick: onClick,
+    disabled: disabled,
+    "aria-label": new Intl.DateTimeFormat(locale, {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    }).format(day),
+    tabIndex: -1,
+    getRootRef: ref,
+    focusVisibleMode: active ? "outside" : "inside",
+    onEnter: handleEnter,
+    onLeave: handleLeave
+  }, createScopedElement("div", {
+    vkuiClass: classNames("CalendarDay__hinted", {
+      "CalendarDay__hinted--active": hinted,
+      "CalendarDay__hinted--selection-start": hintedSelectionStart,
+      "CalendarDay__hinted--selection-end": hintedSelectionEnd
+    })
+  }, createScopedElement("div", {
+    vkuiClass: classNames("CalendarDay__inner", {
+      "CalendarDay__inner--active": active && !disabled
+    })
+  }, createScopedElement("div", {
+    vkuiClass: "CalendarDay__day-number"
+  }, day.getDate()))));
+});
+CalendarDay.displayName = "CalendarDay";
+//# sourceMappingURL=CalendarDay.js.map

package/dist/components/CalendarDay/CalendarDay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/CalendarDay/CalendarDay.tsx"],"names":["React","classNames","Tappable","ENABLE_KEYBOARD_INPUT_EVENT_NAME","LocaleProviderContext","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","locale","useContext","ref","useRef","onClick","useCallback","handleEnter","handleLeave","useEffect","current","dispatchEvent","Event","bubbles","focus","Intl","DateTimeFormat","weekday","year","month","format","getDate","displayName"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport Tappable from \"../Tappable/Tappable\";\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from \"../../hooks/useKeyboardInputTracker\";\nimport { LocaleProviderContext } from \"../LocaleProviderContext/LocaleProviderContext\";\nimport \"./CalendarDay.css\";\n\nexport interface CalendarDayProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: \"s\" | \"m\";\n  onChange(value: Date): void;\n  onEnter?(value: Date): void;\n  onLeave?(value: Date): void;\n}\n\nexport const CalendarDay: React.FC<CalendarDayProps> = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n  }) => {\n    const locale = React.useContext(LocaleProviderContext);\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(\n          new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true })\n        );\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    if (hidden) {\n      return <div vkuiClass=\"CalendarDay__hidden\"></div>;\n    }\n\n    return (\n      <Tappable\n        vkuiClass={classNames(\"CalendarDay\", `CalendarDay--size-${size}`, {\n          \"CalendarDay--today\": today,\n          \"CalendarDay--selected\": selected && !disabled,\n          \"CalendarDay--active\": active && !disabled,\n          \"CalendarDay--selection-start\": selectionStart,\n          \"CalendarDay--selection-end\": selectionEnd,\n          \"CalendarDay--disabled\": disabled,\n          \"CalendarDay--not-same-month\": !sameMonth,\n        })}\n        hoverMode={active ? \"CalendarDay--active-hover\" : \"CalendarDay--hover\"}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        aria-label={new Intl.DateTimeFormat(locale, {\n          weekday: \"long\",\n          year: \"numeric\",\n          month: \"long\",\n          day: \"numeric\",\n        }).format(day)}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? \"outside\" : \"inside\"}\n        onEnter={handleEnter}\n        onLeave={handleLeave}\n      >\n        <div\n          vkuiClass={classNames(\"CalendarDay__hinted\", {\n            \"CalendarDay__hinted--active\": hinted,\n            \"CalendarDay__hinted--selection-start\": hintedSelectionStart,\n            \"CalendarDay__hinted--selection-end\": hintedSelectionEnd,\n          })}\n        >\n          <div\n            vkuiClass={classNames(\"CalendarDay__inner\", {\n              \"CalendarDay__inner--active\": active && !disabled,\n            })}\n          >\n            <div vkuiClass=\"CalendarDay__day-number\">{day.getDate()}</div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  }\n);\n\nCalendarDay.displayName = \"CalendarDay\";\n"],"file":"CalendarDay.js"}

package/dist/components/CalendarDays/CalendarDays.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import "./CalendarDays.css";
+export interface CalendarDaysProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value?: Date | Array<Date | null>;
+    viewDate: Date;
+    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    showNeighboringMonth?: boolean;
+    size?: "s" | "m";
+    onDayChange(value: Date): void;
+    isDayDisabled(value: Date): boolean;
+    isDaySelectionStart(value: Date, dayOfWeek: number): boolean;
+    isDaySelectionEnd(value: Date, dayOfWeek: number): boolean;
+    isHintedDaySelectionStart?(value: Date, dayOfWeek: number): boolean;
+    isHintedDaySelectionEnd?(value: Date, dayOfWeek: number): boolean;
+    isDayActive(value: Date): boolean;
+    isDayHinted?(value: Date): boolean;
+    isDaySelected?(value: Date): boolean;
+    isDayFocused(value: Date): boolean;
+    onDayEnter?(value: Date): void;
+    onDayLeave?(value: Date): void;
+}
+export declare const CalendarDays: React.FC<CalendarDaysProps>;

package/dist/components/CalendarDays/CalendarDays.js

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["viewDate", "value", "weekStartsOn", "onDayChange", "isDaySelected", "isDayActive", "isDaySelectionEnd", "isDaySelectionStart", "onDayEnter", "onDayLeave", "isDayHinted", "isHintedDaySelectionStart", "isHintedDaySelectionEnd", "isDayFocused", "isDayDisabled", "size", "showNeighboringMonth"];
+import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from "react";
+import { isSameDay, isSameMonth } from "date-fns";
+import { CalendarDay } from "../CalendarDay/CalendarDay";
+import { getDaysNames, getWeeks } from "../../lib/calendar";
+import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
+import { classNames } from "../../lib/classNames";
+import Caption from "../Typography/Caption/Caption";
+export var CalendarDays = function CalendarDays(_ref) {
+  var viewDate = _ref.viewDate,
+      value = _ref.value,
+      weekStartsOn = _ref.weekStartsOn,
+      onDayChange = _ref.onDayChange,
+      isDaySelected = _ref.isDaySelected,
+      isDayActive = _ref.isDayActive,
+      isDaySelectionEnd = _ref.isDaySelectionEnd,
+      isDaySelectionStart = _ref.isDaySelectionStart,
+      onDayEnter = _ref.onDayEnter,
+      onDayLeave = _ref.onDayLeave,
+      isDayHinted = _ref.isDayHinted,
+      isHintedDaySelectionStart = _ref.isHintedDaySelectionStart,
+      isHintedDaySelectionEnd = _ref.isHintedDaySelectionEnd,
+      isDayFocused = _ref.isDayFocused,
+      isDayDisabled = _ref.isDayDisabled,
+      size = _ref.size,
+      _ref$showNeighboringM = _ref.showNeighboringMonth,
+      showNeighboringMonth = _ref$showNeighboringM === void 0 ? false : _ref$showNeighboringM,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var locale = React.useContext(LocaleProviderContext);
+  var ref = React.useRef(null);
+
+  var _React$useState = React.useState(new Date()),
+      _React$useState2 = _slicedToArray(_React$useState, 1),
+      now = _React$useState2[0];
+
+  var weeks = React.useMemo(function () {
+    return getWeeks(viewDate, weekStartsOn);
+  }, [weekStartsOn, viewDate]);
+  var daysNames = React.useMemo(function () {
+    return getDaysNames(now, weekStartsOn, locale);
+  }, [locale, now, weekStartsOn]);
+  var handleDayChange = React.useCallback(function (date) {
+    var _ref$current;
+
+    onDayChange(date);
+    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+  }, [onDayChange]);
+  return createScopedElement("div", _extends({}, props, {
+    vkuiClass: "CalendarDays",
+    ref: ref
+  }), createScopedElement("div", {
+    vkuiClass: classNames("CalendarDays__row", "CalendarDays__row--size-".concat(size))
+  }, daysNames.map(function (dayName) {
+    return createScopedElement(Caption, {
+      level: "1",
+      weight: "regular",
+      vkuiClass: "CalendarDays__weekday",
+      key: dayName
+    }, dayName);
+  })), weeks.map(function (week, i) {
+    return createScopedElement("div", {
+      vkuiClass: classNames("CalendarDays__row", "CalendarDays__row--size-".concat(size)),
+      key: i
+    }, week.map(function (day, i) {
+      var sameMonth = isSameMonth(day, viewDate);
+      return createScopedElement(CalendarDay, {
+        key: day.toISOString(),
+        day: day,
+        today: isSameDay(day, now),
+        active: isDayActive(day),
+        onChange: handleDayChange,
+        hidden: !showNeighboringMonth && !sameMonth,
+        disabled: isDayDisabled(day),
+        selectionStart: isDaySelectionStart(day, i),
+        selectionEnd: isDaySelectionEnd(day, i),
+        hintedSelectionStart: isHintedDaySelectionStart === null || isHintedDaySelectionStart === void 0 ? void 0 : isHintedDaySelectionStart(day, i),
+        hintedSelectionEnd: isHintedDaySelectionEnd === null || isHintedDaySelectionEnd === void 0 ? void 0 : isHintedDaySelectionEnd(day, i),
+        selected: isDaySelected === null || isDaySelected === void 0 ? void 0 : isDaySelected(day),
+        focused: isDayFocused(day),
+        onEnter: onDayEnter,
+        onLeave: onDayLeave,
+        hinted: isDayHinted === null || isDayHinted === void 0 ? void 0 : isDayHinted(day),
+        sameMonth: sameMonth,
+        size: size
+      });
+    }));
+  }));
+};
+//# sourceMappingURL=CalendarDays.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/CalendarDays/CalendarDays.tsx"],"names":["React","isSameDay","isSameMonth","CalendarDay","getDaysNames","getWeeks","LocaleProviderContext","classNames","Caption","CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","props","locale","useContext","ref","useRef","useState","Date","now","weeks","useMemo","daysNames","handleDayChange","useCallback","date","current","focus","map","dayName","week","i","day","sameMonth","toISOString"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { isSameDay, isSameMonth } from \"date-fns\";\nimport { CalendarDay } from \"../CalendarDay/CalendarDay\";\nimport { getDaysNames, getWeeks } from \"../../lib/calendar\";\nimport { LocaleProviderContext } from \"../LocaleProviderContext/LocaleProviderContext\";\nimport { classNames } from \"../../lib/classNames\";\nimport Caption from \"../Typography/Caption/Caption\";\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  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: React.FC<CalendarDaysProps> = ({\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  ...props\n}) => {\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          <Caption\n            level=\"1\"\n            weight=\"regular\"\n            vkuiClass=\"CalendarDays__weekday\"\n            key={dayName}\n          >\n            {dayName}\n          </Caption>\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              />\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"file":"CalendarDays.js"}

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import "./CalendarHeader.css";
+export interface CalendarHeaderProps extends Pick<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    viewDate: Date;
+    prevMonth?: boolean;
+    nextMonth?: boolean;
+    disablePickers?: boolean;
+    prevMonthAriaLabel?: string;
+    nextMonthAriaLabel?: string;
+    changeMonthAriaLabel?: string;
+    changeYearAriaLabel?: string;
+    onChange(viewDate: Date): void;
+    onNextMonth?(): void;
+    onPrevMonth?(): void;
+}
+export declare const CalendarHeader: React.FC<CalendarHeaderProps>;

package/dist/components/CalendarHeader/CalendarHeader.js

@@ -0,0 +1,118 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["option", "children"];
+import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from "react";
+import { setMonth, setYear, subMonths, addMonths } from "date-fns";
+import { Icon20ChevronLeftOutline, Icon20ChevronRightOutline, Icon12Dropdown } from "@vkontakte/icons";
+import Tappable from "../Tappable/Tappable";
+import { classNames } from "../../lib/classNames";
+import CustomSelect, { SelectType } from "../CustomSelect/CustomSelect";
+import CustomSelectOption from "../CustomSelectOption/CustomSelectOption";
+import { SizeType } from "../../hoc/withAdaptivity";
+import { getMonths, getYears } from "../../lib/calendar";
+import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
+import Text from "../Typography/Text/Text";
+
+var renderOption = function renderOption(_ref) {
+  var option = _ref.option,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return createScopedElement(CustomSelectOption, props, createScopedElement("span", {
+    vkuiClass: "CalendarHeader__month_name"
+  }, children));
+};
+
+export var CalendarHeader = function CalendarHeader(_ref2) {
+  var viewDate = _ref2.viewDate,
+      onChange = _ref2.onChange,
+      _ref2$prevMonth = _ref2.prevMonth,
+      prevMonth = _ref2$prevMonth === void 0 ? true : _ref2$prevMonth,
+      _ref2$nextMonth = _ref2.nextMonth,
+      nextMonth = _ref2$nextMonth === void 0 ? true : _ref2$nextMonth,
+      _ref2$disablePickers = _ref2.disablePickers,
+      disablePickers = _ref2$disablePickers === void 0 ? false : _ref2$disablePickers,
+      onNextMonth = _ref2.onNextMonth,
+      onPrevMonth = _ref2.onPrevMonth,
+      className = _ref2.className,
+      _ref2$prevMonthAriaLa = _ref2.prevMonthAriaLabel,
+      prevMonthAriaLabel = _ref2$prevMonthAriaLa === void 0 ? "Предыдущий месяц" : _ref2$prevMonthAriaLa,
+      _ref2$nextMonthAriaLa = _ref2.nextMonthAriaLabel,
+      nextMonthAriaLabel = _ref2$nextMonthAriaLa === void 0 ? "Следующий месяц" : _ref2$nextMonthAriaLa,
+      _ref2$changeMonthAria = _ref2.changeMonthAriaLabel,
+      changeMonthAriaLabel = _ref2$changeMonthAria === void 0 ? "Изменить месяц" : _ref2$changeMonthAria,
+      _ref2$changeYearAriaL = _ref2.changeYearAriaLabel,
+      changeYearAriaLabel = _ref2$changeYearAriaL === void 0 ? "Изменить год" : _ref2$changeYearAriaL;
+  var locale = React.useContext(LocaleProviderContext);
+  var onMonthsChange = React.useCallback(function (event) {
+    return onChange(setMonth(viewDate, Number(event.target.value)));
+  }, [onChange, viewDate]);
+  var onYearChange = React.useCallback(function (event) {
+    return onChange(setYear(viewDate, Number(event.target.value)));
+  }, [onChange, viewDate]);
+  var months = React.useMemo(function () {
+    return getMonths(locale);
+  }, [locale]);
+  var currentYear = viewDate.getFullYear();
+  var years = React.useMemo(function () {
+    return getYears(currentYear, 100);
+  }, [currentYear]);
+  var formatter = new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "long"
+  });
+  return createScopedElement("div", {
+    vkuiClass: "CalendarHeader",
+    className: className
+  }, prevMonth && createScopedElement(Tappable, {
+    vkuiClass: classNames("CalendarHeader__nav-icon", "CalendarHeader__nav-icon-prev"),
+    onClick: onPrevMonth,
+    "aria-label": "".concat(prevMonthAriaLabel, ", ").concat(formatter.format(subMonths(viewDate, 1)))
+  }, createScopedElement(Icon20ChevronLeftOutline, {
+    width: 30,
+    height: 30
+  })), createScopedElement("div", {
+    vkuiClass: "CalendarHeader__pickers"
+  }, disablePickers ? createScopedElement(React.Fragment, null, createScopedElement(Text, {
+    weight: "medium",
+    vkuiClass: "CalendarHeader__pickers-placeholder"
+  }, new Intl.DateTimeFormat(locale, {
+    month: "long"
+  }).format(viewDate)), createScopedElement(Text, {
+    weight: "medium",
+    vkuiClass: "CalendarHeader__pickers-placeholder"
+  }, new Intl.DateTimeFormat(locale, {
+    year: "numeric"
+  }).format(viewDate))) : createScopedElement(React.Fragment, null, createScopedElement(CustomSelect, {
+    value: viewDate.getMonth(),
+    options: months,
+    renderOption: renderOption,
+    dropdownOffsetDistance: 4,
+    fixDropdownWidth: false,
+    sizeY: SizeType.COMPACT,
+    icon: createScopedElement(Icon12Dropdown, null),
+    onChange: onMonthsChange,
+    forceDropdownPortal: false,
+    selectType: SelectType.Plain,
+    "aria-label": changeMonthAriaLabel
+  }), createScopedElement(CustomSelect, {
+    value: viewDate.getFullYear(),
+    options: years,
+    dropdownOffsetDistance: 4,
+    fixDropdownWidth: false,
+    sizeY: SizeType.COMPACT,
+    icon: createScopedElement(Icon12Dropdown, null),
+    onChange: onYearChange,
+    forceDropdownPortal: false,
+    selectType: SelectType.Plain,
+    "aria-label": changeYearAriaLabel
+  }))), nextMonth && createScopedElement(Tappable, {
+    vkuiClass: classNames("CalendarHeader__nav-icon", "CalendarHeader__nav-icon-next"),
+    onClick: onNextMonth,
+    "aria-label": "".concat(nextMonthAriaLabel, ", ").concat(formatter.format(addMonths(viewDate, 1)))
+  }, createScopedElement(Icon20ChevronRightOutline, {
+    width: 30,
+    height: 30
+  })));
+};
+//# sourceMappingURL=CalendarHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/CalendarHeader/CalendarHeader.tsx"],"names":["React","setMonth","setYear","subMonths","addMonths","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","Icon12Dropdown","Tappable","classNames","CustomSelect","SelectType","CustomSelectOption","SizeType","getMonths","getYears","LocaleProviderContext","Text","renderOption","option","children","props","CalendarHeader","viewDate","onChange","prevMonth","nextMonth","disablePickers","onNextMonth","onPrevMonth","className","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","locale","useContext","onMonthsChange","useCallback","event","Number","target","value","onYearChange","months","useMemo","currentYear","getFullYear","years","formatter","Intl","DateTimeFormat","year","month","format","getMonth","COMPACT","Plain"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { setMonth, setYear, subMonths, addMonths } from \"date-fns\";\nimport {\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n  Icon12Dropdown,\n} from \"@vkontakte/icons\";\nimport Tappable from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport CustomSelect, {\n  CustomSelectProps,\n  SelectType,\n} from \"../CustomSelect/CustomSelect\";\nimport CustomSelectOption from \"../CustomSelectOption/CustomSelectOption\";\nimport { SizeType } from \"../../hoc/withAdaptivity\";\nimport { getMonths, getYears } from \"../../lib/calendar\";\nimport { LocaleProviderContext } from \"../LocaleProviderContext/LocaleProviderContext\";\nimport Text from \"../Typography/Text/Text\";\nimport \"./CalendarHeader.css\";\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  onChange(viewDate: Date): void;\n  onNextMonth?(): void;\n  onPrevMonth?(): void;\n}\n\nconst renderOption: CustomSelectProps[\"renderOption\"] = ({\n  option,\n  children,\n  ...props\n}) => {\n  return (\n    <CustomSelectOption {...props}>\n      <span vkuiClass=\"CalendarHeader__month_name\">{children}</span>\n    </CustomSelectOption>\n  );\n};\n\nexport const CalendarHeader: React.FC<CalendarHeaderProps> = ({\n  viewDate,\n  onChange,\n  prevMonth = true,\n  nextMonth = true,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  className,\n  prevMonthAriaLabel = \"Предыдущий месяц\",\n  nextMonthAriaLabel = \"Следующий месяц\",\n  changeMonthAriaLabel = \"Изменить месяц\",\n  changeYearAriaLabel = \"Изменить год\",\n}) => {\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(() => getMonths(locale), [locale]);\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        <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        >\n          <Icon20ChevronLeftOutline width={30} height={30} />\n        </Tappable>\n      )}\n      <div vkuiClass=\"CalendarHeader__pickers\">\n        {disablePickers ? (\n          <React.Fragment>\n            <Text\n              weight=\"medium\"\n              vkuiClass=\"CalendarHeader__pickers-placeholder\"\n            >\n              {new Intl.DateTimeFormat(locale, {\n                month: \"long\",\n              }).format(viewDate)}\n            </Text>\n            <Text\n              weight=\"medium\"\n              vkuiClass=\"CalendarHeader__pickers-placeholder\"\n            >\n              {new Intl.DateTimeFormat(locale, {\n                year: \"numeric\",\n              }).format(viewDate)}\n            </Text>\n          </React.Fragment>\n        ) : (\n          <React.Fragment>\n            <CustomSelect\n              value={viewDate.getMonth()}\n              options={months}\n              renderOption={renderOption}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              sizeY={SizeType.COMPACT}\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType={SelectType.Plain}\n              aria-label={changeMonthAriaLabel}\n            />\n            <CustomSelect\n              value={viewDate.getFullYear()}\n              options={years}\n              dropdownOffsetDistance={4}\n              fixDropdownWidth={false}\n              sizeY={SizeType.COMPACT}\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType={SelectType.Plain}\n              aria-label={changeYearAriaLabel}\n            />\n          </React.Fragment>\n        )}\n      </div>\n      {nextMonth && (\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        >\n          <Icon20ChevronRightOutline width={30} height={30} />\n        </Tappable>\n      )}\n    </div>\n  );\n};\n"],"file":"CalendarHeader.js"}

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { CalendarHeaderProps } from "../CalendarHeader/CalendarHeader";
+import { HasRootRef } from "../../types";
+import "./CalendarRange.css";
+export interface CalendarRangeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, Pick<CalendarHeaderProps, "prevMonthAriaLabel" | "nextMonthAriaLabel" | "changeMonthAriaLabel" | "changeYearAriaLabel">, HasRootRef<HTMLDivElement> {
+    value?: Array<Date | null>;
+    disablePast?: boolean;
+    disableFuture?: boolean;
+    disablePickers?: boolean;
+    changeDayAriaLabel?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    onChange?(value?: Array<Date | null>): void;
+    shouldDisableDate?(value: Date): boolean;
+    onClose?(): void;
+}
+export declare const CalendarRange: React.FC<CalendarRangeProps>;