@gravity-ui/date-components 1.6.0 → 2.1.0

package/dist/esm/components/Calendar/Calendar.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
-import type { CalendarInstance, CalendarSize } from '../CalendarBase/CalendarBase';
-import type { CalendarStateOptions } from '../CalendarBase/hooks/useCalendarState';
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { CalendarInstance, CalendarSize } from '../CalendarView/CalendarView';
+import type { CalendarStateOptions } from '../CalendarView/hooks/useCalendarState';
 import type { AccessibilityProps, DomProps, FocusEvents, StyleProps } from '../types';
-import '../CalendarBase/Calendar.css';
-export interface CalendarProps extends CalendarStateOptions, DomProps, StyleProps, FocusEvents, AccessibilityProps {
+import '../CalendarView/Calendar.css';
+export interface CalendarProps<T = DateTime> extends CalendarStateOptions<T>, DomProps, StyleProps, FocusEvents, AccessibilityProps {
     /**
      * The size of the element.
      * @default m
      */
     size?: CalendarSize;
 }
-export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalendarInstance>>;
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps<DateTime> & React.RefAttributes<CalendarInstance>>;

package/dist/esm/components/Calendar/Calendar.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { CalendarBase } from '../CalendarBase/CalendarBase';
-import { useCalendarState } from '../CalendarBase/hooks/useCalendarState';
-import '../CalendarBase/Calendar.css';
+import { CalendarView } from '../CalendarView/CalendarView';
+import { useCalendarState } from '../CalendarView/hooks/useCalendarState';
+import '../CalendarView/Calendar.css';
 export const Calendar = React.forwardRef(function Calendar(props, ref) {
     const state = useCalendarState(props);
-    return _jsx(CalendarBase, Object.assign({ ref: ref }, props, { state: state }));
+    return _jsx(CalendarView, Object.assign({ ref: ref }, props, { state: state }));
 });

package/dist/esm/components/Calendar/index.d.ts

@@ -1,8 +1,8 @@
 export * from './Calendar';
 export * from '../RangeCalendar/RangeCalendar';
-export type { CalendarInstance } from '../CalendarBase/CalendarBase';
-export * from '../CalendarBase/hooks/useCalendarState';
-export * from '../CalendarBase/hooks/useRangeCalendarState';
-export * from '../CalendarBase/hooks/useCalendarProps';
-export * from '../CalendarBase/hooks/useCalendarGridProps';
-export * from '../CalendarBase/hooks/useCalendarCellProps';
+export type { CalendarInstance } from '../CalendarView/CalendarView';
+export * from '../CalendarView/hooks/useCalendarState';
+export * from '../CalendarView/hooks/useRangeCalendarState';
+export * from '../CalendarView/hooks/useCalendarProps';
+export * from '../CalendarView/hooks/useCalendarGridProps';
+export * from '../CalendarView/hooks/useCalendarCellProps';

package/dist/esm/components/Calendar/index.js

@@ -1,7 +1,7 @@
 export * from './Calendar';
 export * from '../RangeCalendar/RangeCalendar';
-export * from '../CalendarBase/hooks/useCalendarState';
-export * from '../CalendarBase/hooks/useRangeCalendarState';
-export * from '../CalendarBase/hooks/useCalendarProps';
-export * from '../CalendarBase/hooks/useCalendarGridProps';
-export * from '../CalendarBase/hooks/useCalendarCellProps';
+export * from '../CalendarView/hooks/useCalendarState';
+export * from '../CalendarView/hooks/useRangeCalendarState';
+export * from '../CalendarView/hooks/useCalendarProps';
+export * from '../CalendarView/hooks/useCalendarGridProps';
+export * from '../CalendarView/hooks/useCalendarCellProps';

package/dist/esm/components/{CalendarBase → CalendarView}/Calendar.css

@@ -30,7 +30,10 @@
   color: var(--g-color-text-secondary);
 }
 .g-date-calendar__controls {
-  margin-left: auto;
+  margin-inline-start: auto;
+}
+.g-date-calendar__control-icon {
+  transform: scaleX(var(--g-flow-direction));
 }
 .g-date-calendar__grid {
   position: relative;
@@ -41,8 +44,8 @@
 }
 .g-date-calendar__content {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   display: grid;
   grid-template-rows: var(--_--calendar-day-size) 1fr;
   box-sizing: border-box;
@@ -111,14 +114,14 @@
   animation: calendar-forward 0.25s ease forwards;
 }
 .g-date-calendar__content_animation_forward.g-date-calendar__current-state {
-  left: -100%;
+  inset-inline-start: calc(var(--g-flow-direction) * -100%);
 }
 .g-date-calendar__content_animation_backward {
   transform: translateX(0);
   animation: calendar-backward 0.25s ease forwards;
 }
 .g-date-calendar__content_animation_backward.g-date-calendar__current-state {
-  left: 100%;
+  inset-inline-start: calc(var(--g-flow-direction) * 100%);
 }
 .g-date-calendar__content_animation_zoom-in {
   transform: scale();
@@ -206,7 +209,7 @@
 }
 .g-date-calendar__button_current::before {
   position: absolute;
-  top: 50%;
+  inset-block-start: 50%;
   display: block;
   width: 4px;
   height: 4px;

package/dist/esm/components/{CalendarBase/CalendarBase.d.ts → CalendarView/CalendarView.d.ts}

@@ -7,7 +7,7 @@ export type CalendarSize = 'm' | 'l' | 'xl';
 export interface CalendarInstance {
     focus: () => void;
 }
-export interface CalendarBaseProps extends DomProps, StyleProps, FocusEvents, AccessibilityProps {
+export interface CalendarViewProps extends DomProps, StyleProps, FocusEvents, AccessibilityProps {
     state: CalendarState | RangeCalendarState;
     /**
      * The size of the element.
@@ -15,4 +15,4 @@ export interface CalendarBaseProps extends DomProps, StyleProps, FocusEvents, Ac
      */
     size?: CalendarSize;
 }
-export declare const CalendarBase: React.ForwardRefExoticComponent<CalendarBaseProps & React.RefAttributes<CalendarInstance>>;
+export declare const CalendarView: React.ForwardRefExoticComponent<CalendarViewProps & React.RefAttributes<CalendarInstance>>;

package/dist/esm/components/{CalendarBase/CalendarBase.js → CalendarView/CalendarView.js}

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { ChevronLeft, ChevronRight } from '@gravity-ui/icons';
 import { ArrowToggle, Button } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
 import { useCalendarCellProps } from './hooks/useCalendarCellProps';
@@ -8,7 +9,7 @@ import { useCalendarProps } from './hooks/useCalendarProps';
 import { calendarLayouts, getDaysInPeriod, getWeekDays } from './utils';
 import './Calendar.css';
 const b = block('calendar');
-export const CalendarBase = React.forwardRef(function Calendar(props, ref) {
+export const CalendarView = React.forwardRef(function Calendar(props, ref) {
     const { state } = props;
     const { calendarProps, modeButtonProps, nextButtonProps, previousButtonProps } = useCalendarProps(props, state);
     React.useImperativeHandle(ref, () => ({
@@ -20,7 +21,7 @@ export const CalendarBase = React.forwardRef(function Calendar(props, ref) {
                             state.availableModes.length ? (_jsx("span", { className: b('mode-label', b(`years-label`)), children: modeButtonProps.children }, "label")) : ([
                             _jsx("span", { className: b('mode-label'), children: modeButtonProps.children }, "label"),
                             _jsx(Button.Icon, { children: _jsx(ArrowToggle, { direction: "bottom" }) }, "icon"),
-                        ]) })), _jsxs("div", { className: b('controls'), children: [_jsx(Button, Object.assign({}, previousButtonProps, { view: "flat", size: props.size, children: _jsx(Button.Icon, { children: _jsx(ArrowToggle, { direction: "left" }) }) })), _jsx(Button, Object.assign({}, nextButtonProps, { view: "flat", size: props.size, children: _jsx(Button.Icon, { children: _jsx(ArrowToggle, { direction: "right" }) }) }))] })] }), _jsx(CalendarGrid, { state: state })] })));
+                        ]) })), _jsxs("div", { className: b('controls'), children: [_jsx(Button, Object.assign({}, previousButtonProps, { view: "flat", size: props.size, children: _jsx(Button.Icon, { children: _jsx(ChevronLeft, { className: b('control-icon') }) }) })), _jsx(Button, Object.assign({}, nextButtonProps, { view: "flat", size: props.size, children: _jsx(Button.Icon, { children: _jsx(ChevronRight, { className: b('control-icon') }) }) }))] })] }), _jsx(CalendarGrid, { state: state })] })));
 });
 function CalendarGrid({ state }) {
     const [prevState, setPrevState] = React.useState(() => (Object.assign(Object.assign({}, state), { isFocused: false })));

package/dist/{cjs/components/CalendarBase → esm/components/CalendarView}/hooks/types.d.ts

@@ -8,7 +8,10 @@ export interface CalendarStateOptionsBase extends InputBase {
     maxValue?: DateTime;
     /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
     isDateUnavailable?: (date: DateTime) => boolean;
-    /** */
+    /**
+     * Which timezone use to show values. Example: 'default', 'system', 'Europe/Amsterdam'.
+     * @default The timezone of the `value` or `defaultValue` or `focusedValue` or `defaultFocusedValue`, 'default' otherwise.
+     */
     timeZone?: string;
     /**
      * Whether to automatically focus the calendar when it mounts.
@@ -35,7 +38,8 @@ interface CalendarStateBase {
     readonly disabled?: boolean;
     /** Whether the calendar is in a read only state. */
     readonly readOnly?: boolean;
-    readonly timeZone?: string;
+    /** Which timezone use to show values. */
+    readonly timeZone: string;
     /** The minimum allowed date that a user may select. */
     readonly minValue?: DateTime;
     /** The maximum allowed date that a user may select. */
@@ -43,85 +47,87 @@ interface CalendarStateBase {
     /** The currently focused date. */
     readonly focusedDate: DateTime;
     /** Sets the focused date. */
-    setFocusedDate(date: DateTime): void;
+    setFocusedDate: (date: DateTime) => void;
     /** Selects the currently focused date. */
-    selectFocusedDate(): void;
+    selectFocusedDate: () => void;
     /** Selects the given date. */
-    selectDate(date: DateTime, force?: boolean): void;
+    selectDate: (date: DateTime, force?: boolean) => void;
     /** Moves focus to the next calendar date. */
-    focusNextCell(): void;
+    focusNextCell: () => void;
     /** Moves focus to the previous calendar date. */
-    focusPreviousCell(): void;
+    focusPreviousCell: () => void;
     /** Moves focus to the next row of dates, e.g. the next week. */
-    focusNextRow(): void;
+    focusNextRow: () => void;
     /** Moves focus to the previous row of dates, e.g. the previous work. */
-    focusPreviousRow(): void;
+    focusPreviousRow: () => void;
     /**
      * Moves focus to the next page of dates, e.g. the next month.
      * If the `larger` option is `true`, the focus is moved by the next larger unit.
      * For example, if days are displayed, then focus moves to the next year.
      */
-    focusNextPage(larger?: boolean): void;
+    focusNextPage: (larger?: boolean) => void;
     /**
      * Moves focus to the previous page of dates, e.g. the previous month.
      * If the `larger` option is `true`, the focus is moved by the next larger unit.
      * For example, if days are displayed, then focus moves to the previous year.
      */
-    focusPreviousPage(larger?: boolean): void;
+    focusPreviousPage: (larger?: boolean) => void;
     /** Moves focus to the start of the current section of dates, e.g. the start of the current month. */
-    focusSectionStart(): void;
+    focusSectionStart: () => void;
     /** Moves focus to the end of the current section of dates, e.g. the end of the current month month. */
-    focusSectionEnd(): void;
+    focusSectionEnd: () => void;
     /** Switches to more detailed layout. */
-    zoomIn(): void;
+    zoomIn: () => void;
     /** Switches to less detailed layout. */
-    zoomOut(): void;
+    zoomOut: () => void;
     /** Whether focus is currently within the calendar. */
     readonly isFocused: boolean;
     /** Sets whether focus is currently within the calendar. */
-    setFocused(isFocused: boolean): void;
+    setFocused: (isFocused: boolean) => void;
     /** Returns whether the given date is invalid according to the `minValue` and `maxValue` props. */
-    isInvalid(date: DateTime): boolean;
+    isInvalid: (date: DateTime) => boolean;
     /** Returns whether the previous page is allowed to be selected according to the `minValue` prop. */
-    isPreviousPageInvalid(): boolean;
+    isPreviousPageInvalid: () => boolean;
     /** Returns whether the next page is allowed to be selected according to the `maxValue` prop. */
-    isNextPageInvalid(): boolean;
+    isNextPageInvalid: () => boolean;
     /** Returns whether the given date is currently selected. */
-    isSelected(date: DateTime): boolean;
+    isSelected: (date: DateTime) => boolean;
     /** Returns whether the given date is unavailable according to the `isDateUnavailable` prop. */
-    isCellUnavailable(date: DateTime): boolean;
+    isCellUnavailable: (date: DateTime) => boolean;
     /** Returns whether the given date is currently focused. */
-    isCellFocused(date: DateTime): boolean;
+    isCellFocused: (date: DateTime) => boolean;
     /** Returns whether the given date is disabled according to the `minValue, `maxValue`, and `isDisabled` props. */
-    isCellDisabled(date: DateTime): boolean;
+    isCellDisabled: (date: DateTime) => boolean;
     /** Returns whether the given date is weekend */
-    isWeekend(date: DateTime): boolean;
+    isWeekend: (date: DateTime) => boolean;
+    /** Returns whether the given date is in current period */
+    isCurrent: (date: DateTime) => boolean;
     /** Current calendar layout */
     readonly mode: CalendarLayout;
     /** Sets calendar layout */
-    setMode(mode: CalendarLayout): void;
+    setMode: (mode: CalendarLayout) => void;
     readonly availableModes: CalendarLayout[];
     readonly startDate: DateTime;
     readonly endDate: DateTime;
 }
 export interface CalendarState extends CalendarStateBase {
     /** The currently selected date. */
-    readonly value?: DateTime | null;
+    readonly value: DateTime | null;
     /** Sets the currently selected date. */
-    setValue(value: DateTime): void;
+    setValue: (value: DateTime) => void;
 }
 export interface RangeCalendarState extends CalendarStateBase {
     /** The currently selected range. */
-    readonly value?: RangeValue<DateTime> | null;
+    readonly value: RangeValue<DateTime> | null;
     /** Sets the currently selected range. */
-    setValue(value: RangeValue<DateTime>): void;
+    setValue: (value: RangeValue<DateTime>) => void;
     /** The current anchor date that the user clicked on to begin range selection. */
     readonly anchorDate: DateTime | undefined;
     /** Sets the anchor date that the user clicked on to begin range selection. */
-    setAnchorDate(date: DateTime | undefined): void;
+    setAnchorDate: (date: DateTime | undefined) => void;
     /** The currently highlighted date range. */
     readonly highlightedRange: RangeValue<DateTime> | undefined;
     /** Highlights the given date during selection, e.g. by hovering. */
-    highlightDate(date: DateTime): void;
+    highlightDate: (date: DateTime) => void;
 }
 export {};

package/dist/esm/components/{CalendarBase → CalendarView}/hooks/useCalendarCellProps.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { dateTime } from '@gravity-ui/date-utils';
 export function useCalendarCellProps(date, state) {
     const ref = React.useRef(null);
     const isFocused = state.isCellFocused(date);
@@ -19,7 +18,7 @@ export function useCalendarCellProps(date, state) {
     const isOutsideCurrentRange = state.mode === 'days' ? !state.focusedDate.isSame(date, 'month') : false;
     const isUnavailable = state.isCellUnavailable(date);
     const isSelectable = !isDisabled && !isUnavailable;
-    const isCurrent = dateTime().isSame(date, state.mode);
+    const isCurrent = state.isCurrent(date);
     const isWeekend = state.isWeekend(date);
     const label = getDateLabel(date, state.mode);
     const cellProps = {

package/dist/esm/components/{CalendarBase → CalendarView}/hooks/useCalendarGridProps.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
+/// <reference types="react" />
 import type { CalendarState, RangeCalendarState } from './types';
 export declare function useCalendarGridProps(state: CalendarState | RangeCalendarState): {
-    gridProps: React.HTMLAttributes<HTMLElement>;
+    gridProps: import("react").HTMLAttributes<HTMLElement>;
 };

package/dist/esm/components/{CalendarBase → CalendarView}/hooks/useCalendarGridProps.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useFocusWithin } from '@gravity-ui/uikit';
 export function useCalendarGridProps(state) {
     const { focusWithinProps } = useFocusWithin({

package/dist/esm/components/{CalendarBase → CalendarView}/hooks/useCalendarProps.js

@@ -30,6 +30,8 @@ export function useCalendarProps(props, state) {
             },
         extraProps: {
             'aria-disabled': modeDisabled ? 'true' : undefined,
+            'aria-description': getAriaDescriptionForModeButton(state.mode, state.availableModes),
+            'aria-live': 'polite',
         },
         children: title,
     };
@@ -104,3 +106,18 @@ export function useCalendarProps(props, state) {
         previousButtonProps,
     };
 }
+function getAriaDescriptionForModeButton(mode, availableModes) {
+    const nextModeIndex = availableModes.indexOf(mode) + 1;
+    const isModeLast = nextModeIndex === availableModes.length;
+    if (isModeLast) {
+        return undefined;
+    }
+    const ariaLabelMap = {
+        days: '',
+        months: i18n('Switch to months view'),
+        quarters: i18n('Switch to quarters view'),
+        years: i18n('Switch to years view'),
+    };
+    const nextMode = availableModes[nextModeIndex];
+    return ariaLabelMap[nextMode];
+}

package/dist/{cjs/components/CalendarBase → esm/components/CalendarView}/hooks/useCalendarState.d.ts

@@ -1,7 +1,7 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { ValueBase } from '../../types';
 import type { CalendarState, CalendarStateOptionsBase } from './types';
-export interface CalendarStateOptions extends ValueBase<DateTime>, CalendarStateOptionsBase {
+export interface CalendarStateOptions<T = DateTime> extends ValueBase<T | null, T>, CalendarStateOptionsBase {
 }
 export type { CalendarState } from './types';
 export declare function useCalendarState(props: CalendarStateOptions): CalendarState;

package/dist/esm/components/{CalendarBase → CalendarView}/hooks/useCalendarState.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import { useControlledState } from '../../hooks/useControlledState';
-import { createPlaceholderValue } from '../../utils/dates';
+import { dateTime } from '@gravity-ui/date-utils';
+import { useControlledState } from '@gravity-ui/uikit';
+import { createPlaceholderValue, mergeDateTime } from '../../utils/dates';
+import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
 import { calendarLayouts, constrainValue } from '../utils';
 const defaultModes = {
     days: true,
@@ -9,25 +11,34 @@ const defaultModes = {
     years: true,
 };
 export function useCalendarState(props) {
-    const { disabled, readOnly, minValue, maxValue, timeZone, modes = defaultModes } = props;
-    const [value, setValue] = useControlledState(props.value, props.defaultValue, props.onUpdate);
-    const [mode, setMode] = useControlledState(props.mode, props.defaultMode, props.onUpdateMode);
+    var _a, _b, _c;
+    const { disabled, readOnly, modes = defaultModes } = props;
+    const [value, setValue] = useControlledState(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
     const availableModes = calendarLayouts.filter((l) => modes[l]);
     const minMode = availableModes[0] || 'days';
+    const [mode, setMode] = useControlledState(props.mode, (_b = props.defaultMode) !== null && _b !== void 0 ? _b : minMode, props.onUpdateMode);
     const currentMode = mode && availableModes.includes(mode) ? mode : minMode;
+    const inputTimeZone = useDefaultTimeZone(props.value || props.defaultValue || props.focusedValue || props.defaultFocusedValue);
+    const timeZone = props.timeZone || inputTimeZone;
+    const minValue = React.useMemo(() => (props.minValue ? props.minValue.timeZone(timeZone) : undefined), [timeZone, props.minValue]);
+    const maxValue = React.useMemo(() => (props.maxValue ? props.maxValue.timeZone(timeZone) : undefined), [timeZone, props.maxValue]);
     const focusedValue = React.useMemo(() => {
         if (!props.focusedValue) {
             return props.focusedValue;
         }
-        return constrainValue(props.focusedValue, minValue, maxValue);
-    }, [props.focusedValue, minValue, maxValue]);
+        return constrainValue(props.focusedValue.timeZone(timeZone), minValue, maxValue);
+    }, [props.focusedValue, minValue, maxValue, timeZone]);
     const defaultFocusedValue = React.useMemo(() => {
-        const defaultValue = (props.defaultFocusedValue ? props.defaultFocusedValue : value) ||
+        var _a;
+        const defaultValue = ((_a = (props.defaultFocusedValue ? props.defaultFocusedValue : value)) === null || _a === void 0 ? void 0 : _a.timeZone(timeZone)) ||
             createPlaceholderValue({ timeZone }).startOf(minMode);
         return constrainValue(defaultValue, minValue, maxValue);
     }, [maxValue, minValue, props.defaultFocusedValue, timeZone, value, minMode]);
-    const [focusedDateInner, setFocusedDate] = useControlledState(focusedValue, defaultFocusedValue, props.onFocusUpdate);
-    const focusedDate = focusedDateInner !== null && focusedDateInner !== void 0 ? focusedDateInner : constrainValue(createPlaceholderValue({ timeZone }).startOf(minMode), minValue, maxValue);
+    const [focusedDateInner, setFocusedDate] = useControlledState(focusedValue, defaultFocusedValue, (date) => {
+        var _a;
+        (_a = props.onFocusUpdate) === null || _a === void 0 ? void 0 : _a.call(props, date.timeZone(inputTimeZone));
+    });
+    const focusedDate = (_c = focusedDateInner === null || focusedDateInner === void 0 ? void 0 : focusedDateInner.timeZone(timeZone)) !== null && _c !== void 0 ? _c : constrainValue(createPlaceholderValue({ timeZone }), minValue, maxValue);
     if (isInvalid(focusedDate, minValue, maxValue)) {
         // If the focused date was moved to an invalid value, it can't be focused, so constrain it.
         setFocusedDate(constrainValue(focusedDate, minValue, maxValue));
@@ -42,16 +53,24 @@ export function useCalendarState(props) {
         disabled,
         readOnly,
         value,
-        setValue,
+        setValue(date) {
+            if (!disabled && !readOnly) {
+                let newValue = constrainValue(date, minValue, maxValue);
+                if (this.isCellUnavailable(newValue)) {
+                    return;
+                }
+                if (value) {
+                    // If there is a date already selected, then we want to keep its time
+                    newValue = mergeDateTime(newValue, value.timeZone(timeZone));
+                }
+                setValue(newValue.timeZone(inputTimeZone));
+            }
+        },
         timeZone,
         selectDate(date, force = false) {
             if (!disabled) {
                 if (!readOnly && (force || this.mode === minMode)) {
-                    const newValue = constrainValue(date, minValue, maxValue);
-                    if (this.isCellUnavailable(newValue)) {
-                        return;
-                    }
-                    setValue(newValue);
+                    this.setValue(date.startOf(minMode));
                     if (force && currentMode !== minMode) {
                         setMode(minMode);
                     }
@@ -127,15 +146,15 @@ export function useCalendarState(props) {
             focusCell(getEndDate(focusedDate, this.mode));
         },
         zoomIn() {
-            const index = availableModes.indexOf(this.mode) - 1;
-            if (index >= 0) {
-                this.setMode(availableModes[index]);
+            const nextMode = availableModes[availableModes.indexOf(this.mode) - 1];
+            if (nextMode) {
+                this.setMode(nextMode);
             }
         },
         zoomOut() {
-            const index = availableModes.indexOf(this.mode) + 1;
-            if (index < availableModes.length) {
-                this.setMode(availableModes[index]);
+            const nextMode = availableModes[availableModes.indexOf(this.mode) + 1];
+            if (nextMode) {
+                this.setMode(nextMode);
             }
         },
         selectFocusedDate() {
@@ -155,8 +174,8 @@ export function useCalendarState(props) {
             return this.isInvalid(next);
         },
         isSelected(date) {
-            return (Boolean(value) &&
-                date.isSame(value !== null && value !== void 0 ? value : undefined, currentMode) &&
+            return Boolean(value &&
+                date.isSame(value.timeZone(timeZone), currentMode) &&
                 !this.isCellDisabled(date));
         },
         isCellUnavailable(date) {
@@ -176,6 +195,9 @@ export function useCalendarState(props) {
         isWeekend(date) {
             return this.mode === 'days' && [0, 6].includes(date.day());
         },
+        isCurrent(date) {
+            return dateTime({ timeZone }).isSame(date, this.mode);
+        },
         mode: currentMode,
         setMode,
         availableModes,

package/dist/esm/components/CalendarView/hooks/useRangeCalendarState.d.ts

@@ -0,0 +1,8 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { RangeValue } from '../../types';
+import type { RangeCalendarState } from './types';
+import type { CalendarStateOptions } from './useCalendarState';
+export interface RangeCalendarStateOptions extends CalendarStateOptions<RangeValue<DateTime>> {
+}
+export type { RangeCalendarState } from './types';
+export declare function useRangeCalendarState(props: RangeCalendarStateOptions): RangeCalendarState;

package/dist/esm/components/{CalendarBase → CalendarView}/hooks/useRangeCalendarState.js

@@ -1,18 +1,31 @@
 import { __rest } from "tslib";
 import React from 'react';
-import { useControlledState } from '../../hooks/useControlledState';
+import { useControlledState } from '@gravity-ui/uikit';
+import { mergeDateTime } from '../../utils/dates';
+import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
 import { constrainValue } from '../utils';
 import { useCalendarState } from './useCalendarState';
 export function useRangeCalendarState(props) {
-    var _a, _b;
-    const { value: valueProp, defaultValue, onUpdate } = props, calendarProps = __rest(props, ["value", "defaultValue", "onUpdate"]);
+    var _a;
+    const { value: valueProp, defaultValue = null, onUpdate } = props, calendarProps = __rest(props, ["value", "defaultValue", "onUpdate"]);
     const [value, setValue] = useControlledState(valueProp, defaultValue, onUpdate);
     const [anchorDate, setAnchorDateState] = React.useState();
-    const calendar = useCalendarState(Object.assign(Object.assign({}, calendarProps), { value: (_a = value === null || value === void 0 ? void 0 : value.start) !== null && _a !== void 0 ? _a : null }));
+    const inputTimeZone = useDefaultTimeZone((valueProp === null || valueProp === void 0 ? void 0 : valueProp.start) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.start) || props.focusedValue || props.defaultFocusedValue);
+    const timeZone = props.timeZone || inputTimeZone;
+    const calendar = useCalendarState(Object.assign(Object.assign({}, calendarProps), { value: null, timeZone }));
     const highlightedRange = anchorDate
         ? makeRange(anchorDate, calendar.focusedDate, calendar.mode)
-        : (_b = (value && makeRange(value.start, value.end, calendar.mode))) !== null && _b !== void 0 ? _b : undefined;
+        : (_a = (value &&
+            makeRange(value.start.timeZone(timeZone), value.end.timeZone(timeZone), calendar.mode))) !== null && _a !== void 0 ? _a : undefined;
     const minMode = calendar.availableModes[0];
+    const handleSetValue = (v) => {
+        let { start, end } = v;
+        if (value) {
+            start = mergeDateTime(start, value.start.timeZone(timeZone));
+            end = mergeDateTime(end, value.end.timeZone(timeZone));
+        }
+        setValue({ start: start.timeZone(inputTimeZone), end: end.timeZone(inputTimeZone) });
+    };
     const selectDate = (date, force = false) => {
         if (props.disabled) {
             return;
@@ -24,22 +37,20 @@ export function useRangeCalendarState(props) {
         if (props.readOnly) {
             return;
         }
-        date = constrainValue(date, props.minValue, props.maxValue);
-        if (calendar.isCellUnavailable(date)) {
+        const newDate = constrainValue(date, calendar.minValue, calendar.maxValue);
+        if (calendar.isCellUnavailable(newDate)) {
             return;
         }
         if (anchorDate) {
-            const range = makeRange(anchorDate, date, calendar.mode);
-            setValue(range);
+            const range = makeRange(anchorDate, newDate, calendar.mode);
+            handleSetValue(range);
             setAnchorDateState(undefined);
         }
         else {
-            setAnchorDateState(date);
+            setAnchorDateState(newDate);
         }
     };
-    return Object.assign(Object.assign({}, calendar), { value,
-        setValue,
-        selectDate,
+    return Object.assign(Object.assign({}, calendar), { value, setValue: handleSetValue, selectDate,
         anchorDate, setAnchorDate: setAnchorDateState, highlightedRange,
         isSelected(date) {
             if (!highlightedRange) {

package/dist/esm/components/CalendarView/i18n/en.json

@@ -0,0 +1,7 @@
+{
+  "Previous": "Previous",
+  "Next": "Next",
+  "Switch to months view": "Switch to months view",
+  "Switch to quarters view": "Switch to quarters view",
+  "Switch to years view": "Switch to years view"
+}

package/dist/esm/components/CalendarView/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "Previous" | "Next" | "Switch to months view" | "Switch to quarters view" | "Switch to years view", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/esm/components/CalendarView/i18n/ru.json

@@ -0,0 +1,7 @@
+{
+  "Previous": "Назад",
+  "Next": "Вперёд",
+  "Switch to months view": "Переключиться на просмотр по месяцам",
+  "Switch to quarters view": "Переключиться на просмотр по кварталам",
+  "Switch to years view": "Переключиться на просмотр по годам"
+}

package/dist/esm/components/DateField/DateField.d.ts

@@ -1,6 +1,3 @@
-import type { AccessibilityProps, DomProps, FocusableProps, KeyboardEvents, StyleProps, TextInputExtendProps, TextInputProps } from '../types';
-import type { DateFieldStateOptions } from './hooks/useDateFieldState';
+import type { DateFieldProps } from './hooks/useDateFieldProps';
 import './DateField.css';
-export interface DateFieldProps extends DateFieldStateOptions, TextInputProps, TextInputExtendProps, DomProps, FocusableProps, KeyboardEvents, StyleProps, AccessibilityProps {
-}
 export declare function DateField({ className, ...props }: DateFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/DateField/DateField.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { TextInput, useFocusWithin } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
@@ -17,5 +17,7 @@ export function DateField(_a) {
             setActive(isFocusWithin);
         },
     });
-    return (_jsx("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: _jsx(TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })) })));
+    return (_jsxs("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: [_jsx(TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })), _jsx("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
+                // Ignore React warning
+                onChange: () => { } })] })));
 }