@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cssm/components/CalendarRange/CalendarRange.js

@@ -1,7 +1,3 @@
-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", "className", "listenDayChangesForUpdate"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useCalendar } from '../../hooks/useCalendar';
@@ -9,186 +5,182 @@ import { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/cal
 import { addMonths, endOfDay, isAfter, isBefore, isSameDay, isSameMonth, isWithinInterval, startOfDay } from '../../lib/date';
 import { CalendarDays } from '../CalendarDays/CalendarDays';
 import { CalendarHeader } from '../CalendarHeader/CalendarHeader';
-import "./CalendarRange.module.css";
-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])));
+import styles from './CalendarRange.module.css';
+const getIsDaySelected = (day, value)=>{
+    if (!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,
-    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;
-  var _React$useState = React.useState(),
-    _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)) {
-      return [setTimeEqual(date, start), end];
-    } else if (start && isAfter(date, start)) {
-      return [start, setTimeEqual(date, end)];
-    }
-    return value;
-  }, [value]);
-  var onDayChange = React.useCallback(function (date) {
-    onChange === null || onChange === void 0 ? void 0 : onChange(getNewValue(date));
-    setHintedDate(undefined);
-  }, [onChange, getNewValue]);
-  var isDaySelected = React.useCallback(function (day) {
-    return getIsDaySelected(day, value);
-  }, [value]);
-  var isDayActive = React.useCallback(function (day) {
-    return Boolean((value === null || value === void 0 ? void 0 : value[0]) && isSameDay(day, value[0]) || (value === null || value === void 0 ? void 0 : value[1]) && isSameDay(day, value[1]));
-  }, [value]);
-  var isDaySelectionEnd = React.useCallback(function (day, dayOfWeek) {
-    return Boolean(isLastDay(day, dayOfWeek) || (value === null || value === void 0 ? void 0 : value[1]) && isSameDay(day, value[1]));
-  }, [value]);
-  var isHintedDaySelectionEnd = React.useCallback(function (day, dayOfWeek) {
-    return Boolean(isLastDay(day, dayOfWeek) || (hintedDate === null || hintedDate === void 0 ? void 0 : hintedDate[1]) && isSameDay(day, hintedDate[1]));
-  }, [hintedDate]);
-  var isDaySelectionStart = React.useCallback(function (day, dayOfWeek) {
-    return Boolean(isFirstDay(day, dayOfWeek) || (value === null || value === void 0 ? void 0 : value[0]) && isSameDay(day, value[0]));
-  }, [value]);
-  var isHintedDaySelectionStart = React.useCallback(function (day, dayOfWeek) {
-    return Boolean(isFirstDay(day, dayOfWeek) || (hintedDate === null || hintedDate === void 0 ? void 0 : hintedDate[0]) && isSameDay(day, hintedDate[0]));
-  }, [hintedDate]);
-  var onDayEnter = React.useCallback(function (date) {
-    return setHintedDate(getNewValue(date));
-  }, [setHintedDate, getNewValue]);
-  var onDayLeave = React.useCallback(function () {
-    return setHintedDate(undefined);
-  }, [setHintedDate]);
-  var isDayHinted = React.useCallback(function (day) {
-    return getIsDaySelected(day, hintedDate);
-  }, [hintedDate]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    ref: getRootRef,
-    className: classNames("vkuiCalendarRange", className)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiCalendarRange__inner"
-  }, /*#__PURE__*/React.createElement(CalendarHeader, {
-    viewDate: viewDate,
-    onChange: setViewDate,
-    nextMonth: false,
-    onPrevMonth: setPrevMonth,
-    disablePickers: disablePickers,
-    className: "vkuiCalendarRange__header",
-    prevMonthAriaLabel: prevMonthAriaLabel,
-    nextMonthAriaLabel: nextMonthAriaLabel,
-    changeMonthAriaLabel: changeMonthAriaLabel,
-    changeYearAriaLabel: changeYearAriaLabel,
-    prevMonthIcon: prevMonthIcon
-  }), /*#__PURE__*/React.createElement(CalendarDays, {
-    viewDate: viewDate,
-    value: value,
-    weekStartsOn: weekStartsOn,
-    onKeyDown: handleKeyDown,
-    isDayFocused: isDayFocused,
-    onDayChange: onDayChange,
-    isDaySelected: isDaySelected,
-    isDayActive: isDayActive,
-    isDaySelectionEnd: isDaySelectionEnd,
-    isDaySelectionStart: isDaySelectionStart,
-    isDayHinted: isDayHinted,
-    onDayEnter: onDayEnter,
-    onDayLeave: onDayLeave,
-    isHintedDaySelectionEnd: isHintedDaySelectionEnd,
-    isHintedDaySelectionStart: isHintedDaySelectionStart,
-    isDayDisabled: isDayDisabled,
-    listenDayChangesForUpdate: listenDayChangesForUpdate,
-    "aria-label": changeDayAriaLabel
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiCalendarRange__inner"
-  }, /*#__PURE__*/React.createElement(CalendarHeader, {
-    viewDate: secondViewDate,
-    onChange: setViewDate,
-    prevMonth: false,
-    onNextMonth: setNextMonth,
-    disablePickers: disablePickers,
-    className: "vkuiCalendarRange__header",
-    prevMonthAriaLabel: prevMonthAriaLabel,
-    nextMonthAriaLabel: nextMonthAriaLabel,
-    changeMonthAriaLabel: changeMonthAriaLabel,
-    changeYearAriaLabel: changeYearAriaLabel,
-    nextMonthIcon: nextMonthIcon
-  }), /*#__PURE__*/React.createElement(CalendarDays, {
-    viewDate: secondViewDate,
-    value: value,
-    weekStartsOn: weekStartsOn,
-    "aria-label": changeDayAriaLabel,
-    onKeyDown: handleKeyDown,
-    isDayFocused: isDayFocused,
-    onDayChange: onDayChange,
-    isDaySelected: isDaySelected,
-    isDayActive: isDayActive,
-    isDaySelectionEnd: isDaySelectionEnd,
-    isDaySelectionStart: isDaySelectionStart,
-    isDayHinted: isDayHinted,
-    onDayEnter: onDayEnter,
-    onDayLeave: onDayLeave,
-    isHintedDaySelectionEnd: isHintedDaySelectionEnd,
-    isHintedDaySelectionStart: isHintedDaySelectionStart,
-    isDayDisabled: isDayDisabled,
-    listenDayChangesForUpdate: listenDayChangesForUpdate,
-    tabIndex: 0,
-    onBlur: resetSelectedDay
-  })));
+ */ export const CalendarRange = ({ value , onChange , disablePast , disableFuture , shouldDisableDate , onClose , weekStartsOn =1 , getRootRef , disablePickers , prevMonthAriaLabel , nextMonthAriaLabel , changeMonthAriaLabel , changeYearAriaLabel , changeDayAriaLabel ='Изменить день' , prevMonthIcon , nextMonthIcon , className , listenDayChangesForUpdate , ...props })=>{
+    const { viewDate , setViewDate , setPrevMonth , setNextMonth , focusedDay , setFocusedDay , isDayFocused , isDayDisabled , resetSelectedDay  } = useCalendar({
+        value,
+        disableFuture,
+        disablePast,
+        shouldDisableDate
+    });
+    const [hintedDate, setHintedDate] = React.useState();
+    const secondViewDate = addMonths(viewDate, 1);
+    const handleKeyDown = React.useCallback((event)=>{
+        if ([
+            'ArrowUp',
+            'ArrowDown',
+            'ArrowLeft',
+            'ArrowRight'
+        ].includes(event.key)) {
+            event.preventDefault();
+        }
+        const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);
+        if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate) && !isSameMonth(newFocusedDay, addMonths(viewDate, 1))) {
+            setViewDate(newFocusedDay);
+        }
+        setFocusedDay(newFocusedDay);
+    }, [
+        focusedDay,
+        setFocusedDay,
+        setViewDate,
+        value,
+        viewDate
+    ]);
+    const getNewValue = React.useCallback((date)=>{
+        if (!value) {
+            return [
+                date,
+                null
+            ];
+        }
+        const start = value[0];
+        const 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)) {
+            return [
+                setTimeEqual(date, start),
+                end
+            ];
+        } else if (start && isAfter(date, start)) {
+            return [
+                start,
+                setTimeEqual(date, end)
+            ];
+        }
+        return value;
+    }, [
+        value
+    ]);
+    const onDayChange = React.useCallback((date)=>{
+        onChange?.(getNewValue(date));
+        setHintedDate(undefined);
+    }, [
+        onChange,
+        getNewValue
+    ]);
+    const isDaySelected = React.useCallback((day)=>getIsDaySelected(day, value), [
+        value
+    ]);
+    const isDayActive = React.useCallback((day)=>Boolean(value?.[0] && isSameDay(day, value[0]) || value?.[1] && isSameDay(day, value[1])), [
+        value
+    ]);
+    const isDaySelectionEnd = React.useCallback((day, dayOfWeek)=>Boolean(isLastDay(day, dayOfWeek) || value?.[1] && isSameDay(day, value[1])), [
+        value
+    ]);
+    const isHintedDaySelectionEnd = React.useCallback((day, dayOfWeek)=>Boolean(isLastDay(day, dayOfWeek) || hintedDate?.[1] && isSameDay(day, hintedDate[1])), [
+        hintedDate
+    ]);
+    const isDaySelectionStart = React.useCallback((day, dayOfWeek)=>Boolean(isFirstDay(day, dayOfWeek) || value?.[0] && isSameDay(day, value[0])), [
+        value
+    ]);
+    const isHintedDaySelectionStart = React.useCallback((day, dayOfWeek)=>Boolean(isFirstDay(day, dayOfWeek) || hintedDate?.[0] && isSameDay(day, hintedDate[0])), [
+        hintedDate
+    ]);
+    const onDayEnter = React.useCallback((date)=>setHintedDate(getNewValue(date)), [
+        setHintedDate,
+        getNewValue
+    ]);
+    const onDayLeave = React.useCallback(()=>setHintedDate(undefined), [
+        setHintedDate
+    ]);
+    const isDayHinted = React.useCallback((day)=>getIsDaySelected(day, hintedDate), [
+        hintedDate
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        ...props,
+        ref: getRootRef,
+        className: classNames(styles['CalendarRange'], className)
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['CalendarRange__inner']
+    }, /*#__PURE__*/ React.createElement(CalendarHeader, {
+        viewDate: viewDate,
+        onChange: setViewDate,
+        nextMonth: false,
+        onPrevMonth: setPrevMonth,
+        disablePickers: disablePickers,
+        className: styles['CalendarRange__header'],
+        prevMonthAriaLabel: prevMonthAriaLabel,
+        nextMonthAriaLabel: nextMonthAriaLabel,
+        changeMonthAriaLabel: changeMonthAriaLabel,
+        changeYearAriaLabel: changeYearAriaLabel,
+        prevMonthIcon: prevMonthIcon
+    }), /*#__PURE__*/ React.createElement(CalendarDays, {
+        viewDate: viewDate,
+        value: value,
+        weekStartsOn: weekStartsOn,
+        onKeyDown: handleKeyDown,
+        isDayFocused: isDayFocused,
+        onDayChange: onDayChange,
+        isDaySelected: isDaySelected,
+        isDayActive: isDayActive,
+        isDaySelectionEnd: isDaySelectionEnd,
+        isDaySelectionStart: isDaySelectionStart,
+        isDayHinted: isDayHinted,
+        onDayEnter: onDayEnter,
+        onDayLeave: onDayLeave,
+        isHintedDaySelectionEnd: isHintedDaySelectionEnd,
+        isHintedDaySelectionStart: isHintedDaySelectionStart,
+        isDayDisabled: isDayDisabled,
+        listenDayChangesForUpdate: listenDayChangesForUpdate,
+        "aria-label": changeDayAriaLabel
+    })), /*#__PURE__*/ React.createElement("div", {
+        className: styles['CalendarRange__inner']
+    }, /*#__PURE__*/ React.createElement(CalendarHeader, {
+        viewDate: secondViewDate,
+        onChange: setViewDate,
+        prevMonth: false,
+        onNextMonth: setNextMonth,
+        disablePickers: disablePickers,
+        className: styles['CalendarRange__header'],
+        prevMonthAriaLabel: prevMonthAriaLabel,
+        nextMonthAriaLabel: nextMonthAriaLabel,
+        changeMonthAriaLabel: changeMonthAriaLabel,
+        changeYearAriaLabel: changeYearAriaLabel,
+        nextMonthIcon: nextMonthIcon
+    }), /*#__PURE__*/ React.createElement(CalendarDays, {
+        viewDate: secondViewDate,
+        value: value,
+        weekStartsOn: weekStartsOn,
+        "aria-label": changeDayAriaLabel,
+        onKeyDown: handleKeyDown,
+        isDayFocused: isDayFocused,
+        onDayChange: onDayChange,
+        isDaySelected: isDaySelected,
+        isDayActive: isDayActive,
+        isDaySelectionEnd: isDaySelectionEnd,
+        isDaySelectionStart: isDaySelectionStart,
+        isDayHinted: isDayHinted,
+        onDayEnter: onDayEnter,
+        onDayLeave: onDayLeave,
+        isHintedDaySelectionEnd: isHintedDaySelectionEnd,
+        isHintedDaySelectionStart: isHintedDaySelectionStart,
+        isDayDisabled: isDayDisabled,
+        listenDayChangesForUpdate: listenDayChangesForUpdate,
+        tabIndex: 0,
+        onBlur: resetSelectedDay
+    })));
 };
+
 //# sourceMappingURL=CalendarRange.js.map

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

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

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

@@ -4,70 +4,64 @@ import { setHours, setMinutes } from '../../lib/date';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { Button } from '../Button/Button';
 import { CustomSelect } from '../CustomSelect/CustomSelect';
-import "./CalendarTime.module.css";
-var hours = [];
-for (var i = 0; i < 24; i += 1) {
-  hours.push({
-    value: i,
-    label: String(i).padStart(2, '0')
-  });
+import styles from './CalendarTime.module.css';
+const hours = [];
+for(let i = 0; i < 24; i += 1){
+    hours.push({
+        value: i,
+        label: String(i).padStart(2, '0')
+    });
 }
-var minutes = [];
-for (var _i = 0; _i < 60; _i += 1) {
-  minutes.push({
-    value: _i,
-    label: String(_i).padStart(2, '0')
-  });
+const minutes = [];
+for(let i = 0; i < 60; i += 1){
+    minutes.push({
+        value: i,
+        label: String(i).padStart(2, '0')
+    });
 }
-export var CalendarTime = function CalendarTime(_ref) {
-  var value = _ref.value,
-    _ref$doneButtonText = _ref.doneButtonText,
-    doneButtonText = _ref$doneButtonText === void 0 ? 'Готово' : _ref$doneButtonText,
-    onChange = _ref.onChange,
-    onClose = _ref.onClose,
-    _ref$changeHoursAriaL = _ref.changeHoursAriaLabel,
-    changeHoursAriaLabel = _ref$changeHoursAriaL === void 0 ? 'Изменить час' : _ref$changeHoursAriaL,
-    _ref$changeMinutesAri = _ref.changeMinutesAriaLabel,
-    changeMinutesAriaLabel = _ref$changeMinutesAri === void 0 ? 'Изменить минуту' : _ref$changeMinutesAri;
-  var onHoursChange = React.useCallback(function (event) {
-    return onChange === null || onChange === void 0 ? void 0 : onChange(setHours(value, Number(event.target.value)));
-  }, [onChange, value]);
-  var onMinutesChange = React.useCallback(function (event) {
-    return onChange === null || onChange === void 0 ? void 0 : onChange(setMinutes(value, Number(event.target.value)));
-  }, [onChange, value]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "vkuiCalendarTime"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiCalendarTime__picker"
-  }, /*#__PURE__*/React.createElement(AdaptivityProvider, {
-    sizeY: SizeType.COMPACT
-  }, /*#__PURE__*/React.createElement(CustomSelect, {
-    value: value.getHours(),
-    options: hours,
-    onChange: onHoursChange,
-    forceDropdownPortal: false,
-    "aria-label": changeHoursAriaLabel
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiCalendarTime__divider"
-  }, ":"), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiCalendarTime__picker"
-  }, /*#__PURE__*/React.createElement(AdaptivityProvider, {
-    sizeY: SizeType.COMPACT
-  }, /*#__PURE__*/React.createElement(CustomSelect, {
-    value: value.getMinutes(),
-    options: minutes,
-    onChange: onMinutesChange,
-    forceDropdownPortal: false,
-    "aria-label": changeMinutesAriaLabel
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiCalendarTime__button"
-  }, /*#__PURE__*/React.createElement(AdaptivityProvider, {
-    sizeY: SizeType.COMPACT
-  }, /*#__PURE__*/React.createElement(Button, {
-    mode: "secondary",
-    onClick: onClose,
-    size: "l",
-    "aria-label": doneButtonText
-  }, doneButtonText))));
+export const CalendarTime = ({ value , doneButtonText ='Готово' , onChange , onClose , changeHoursAriaLabel ='Изменить час' , changeMinutesAriaLabel ='Изменить минуту'  })=>{
+    const onHoursChange = React.useCallback((event)=>onChange?.(setHours(value, Number(event.target.value))), [
+        onChange,
+        value
+    ]);
+    const onMinutesChange = React.useCallback((event)=>onChange?.(setMinutes(value, Number(event.target.value))), [
+        onChange,
+        value
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: styles['CalendarTime']
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['CalendarTime__picker']
+    }, /*#__PURE__*/ React.createElement(AdaptivityProvider, {
+        sizeY: SizeType.COMPACT
+    }, /*#__PURE__*/ React.createElement(CustomSelect, {
+        value: value.getHours(),
+        options: hours,
+        onChange: onHoursChange,
+        forceDropdownPortal: false,
+        "aria-label": changeHoursAriaLabel
+    }))), /*#__PURE__*/ React.createElement("div", {
+        className: styles['CalendarTime__divider']
+    }, ":"), /*#__PURE__*/ React.createElement("div", {
+        className: styles['CalendarTime__picker']
+    }, /*#__PURE__*/ React.createElement(AdaptivityProvider, {
+        sizeY: SizeType.COMPACT
+    }, /*#__PURE__*/ React.createElement(CustomSelect, {
+        value: value.getMinutes(),
+        options: minutes,
+        onChange: onMinutesChange,
+        forceDropdownPortal: false,
+        "aria-label": changeMinutesAriaLabel
+    }))), /*#__PURE__*/ React.createElement("div", {
+        className: styles['CalendarTime__button']
+    }, /*#__PURE__*/ React.createElement(AdaptivityProvider, {
+        sizeY: SizeType.COMPACT
+    }, /*#__PURE__*/ React.createElement(Button, {
+        mode: "secondary",
+        onClick: onClose,
+        size: "l",
+        "aria-label": doneButtonText
+    }, doneButtonText))));
 };
+
 //# sourceMappingURL=CalendarTime.js.map