@gravity-ui/date-components 1.6.0 → 2.0.1

package/dist/cjs/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/cjs/components/Calendar/Calendar.js

@@ -4,10 +4,10 @@ exports.Calendar = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
-const CalendarBase_1 = require("../CalendarBase/CalendarBase");
-const useCalendarState_1 = require("../CalendarBase/hooks/useCalendarState");
-require("../CalendarBase/Calendar.css");
+const CalendarView_1 = require("../CalendarView/CalendarView");
+const useCalendarState_1 = require("../CalendarView/hooks/useCalendarState");
+require("../CalendarView/Calendar.css");
 exports.Calendar = react_1.default.forwardRef(function Calendar(props, ref) {
     const state = (0, useCalendarState_1.useCalendarState)(props);
-    return (0, jsx_runtime_1.jsx)(CalendarBase_1.CalendarBase, Object.assign({ ref: ref }, props, { state: state }));
+    return (0, jsx_runtime_1.jsx)(CalendarView_1.CalendarView, Object.assign({ ref: ref }, props, { state: state }));
 });

package/dist/cjs/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/cjs/components/Calendar/index.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Calendar"), exports);
 tslib_1.__exportStar(require("../RangeCalendar/RangeCalendar"), exports);
-tslib_1.__exportStar(require("../CalendarBase/hooks/useCalendarState"), exports);
-tslib_1.__exportStar(require("../CalendarBase/hooks/useRangeCalendarState"), exports);
-tslib_1.__exportStar(require("../CalendarBase/hooks/useCalendarProps"), exports);
-tslib_1.__exportStar(require("../CalendarBase/hooks/useCalendarGridProps"), exports);
-tslib_1.__exportStar(require("../CalendarBase/hooks/useCalendarCellProps"), exports);
+tslib_1.__exportStar(require("../CalendarView/hooks/useCalendarState"), exports);
+tslib_1.__exportStar(require("../CalendarView/hooks/useRangeCalendarState"), exports);
+tslib_1.__exportStar(require("../CalendarView/hooks/useCalendarProps"), exports);
+tslib_1.__exportStar(require("../CalendarView/hooks/useCalendarGridProps"), exports);
+tslib_1.__exportStar(require("../CalendarView/hooks/useCalendarCellProps"), exports);

package/dist/cjs/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/cjs/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/cjs/components/{CalendarBase/CalendarBase.js → CalendarView/CalendarView.js}

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CalendarBase = void 0;
+exports.CalendarView = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn");
 const useCalendarCellProps_1 = require("./hooks/useCalendarCellProps");
@@ -12,7 +13,7 @@ const useCalendarProps_1 = require("./hooks/useCalendarProps");
 const utils_1 = require("./utils");
 require("./Calendar.css");
 const b = (0, cn_1.block)('calendar');
-exports.CalendarBase = react_1.default.forwardRef(function Calendar(props, ref) {
+exports.CalendarView = react_1.default.forwardRef(function Calendar(props, ref) {
     const { state } = props;
     const { calendarProps, modeButtonProps, nextButtonProps, previousButtonProps } = (0, useCalendarProps_1.useCalendarProps)(props, state);
     react_1.default.useImperativeHandle(ref, () => ({
@@ -24,7 +25,7 @@ exports.CalendarBase = react_1.default.forwardRef(function Calendar(props, ref)
                             state.availableModes.length ? ((0, jsx_runtime_1.jsx)("span", { className: b('mode-label', b(`years-label`)), children: modeButtonProps.children }, "label")) : ([
                             (0, jsx_runtime_1.jsx)("span", { className: b('mode-label'), children: modeButtonProps.children }, "label"),
                             (0, jsx_runtime_1.jsx)(uikit_1.Button.Icon, { children: (0, jsx_runtime_1.jsx)(uikit_1.ArrowToggle, { direction: "bottom" }) }, "icon"),
-                        ]) })), (0, jsx_runtime_1.jsxs)("div", { className: b('controls'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, previousButtonProps, { view: "flat", size: props.size, children: (0, jsx_runtime_1.jsx)(uikit_1.Button.Icon, { children: (0, jsx_runtime_1.jsx)(uikit_1.ArrowToggle, { direction: "left" }) }) })), (0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, nextButtonProps, { view: "flat", size: props.size, children: (0, jsx_runtime_1.jsx)(uikit_1.Button.Icon, { children: (0, jsx_runtime_1.jsx)(uikit_1.ArrowToggle, { direction: "right" }) }) }))] })] }), (0, jsx_runtime_1.jsx)(CalendarGrid, { state: state })] })));
+                        ]) })), (0, jsx_runtime_1.jsxs)("div", { className: b('controls'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, previousButtonProps, { view: "flat", size: props.size, children: (0, jsx_runtime_1.jsx)(uikit_1.Button.Icon, { children: (0, jsx_runtime_1.jsx)(icons_1.ChevronLeft, { className: b('control-icon') }) }) })), (0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, nextButtonProps, { view: "flat", size: props.size, children: (0, jsx_runtime_1.jsx)(uikit_1.Button.Icon, { children: (0, jsx_runtime_1.jsx)(icons_1.ChevronRight, { className: b('control-icon') }) }) }))] })] }), (0, jsx_runtime_1.jsx)(CalendarGrid, { state: state })] })));
 });
 function CalendarGrid({ state }) {
     const [prevState, setPrevState] = react_1.default.useState(() => (Object.assign(Object.assign({}, state), { isFocused: false })));

package/dist/{esm/components/CalendarBase → cjs/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/cjs/components/{CalendarBase → CalendarView}/hooks/useCalendarCellProps.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendarCellProps = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const date_utils_1 = require("@gravity-ui/date-utils");
 function useCalendarCellProps(date, state) {
     const ref = react_1.default.useRef(null);
     const isFocused = state.isCellFocused(date);
@@ -23,7 +22,7 @@ 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 = (0, date_utils_1.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/cjs/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 → cjs/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/cjs/components/{CalendarBase → CalendarView}/hooks/useCalendarState.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendarState = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const useControlledState_1 = require("../../hooks/useControlledState");
+const date_utils_1 = require("@gravity-ui/date-utils");
+const uikit_1 = require("@gravity-ui/uikit");
 const dates_1 = require("../../utils/dates");
+const useDefaultTimeZone_1 = require("../../utils/useDefaultTimeZone");
 const utils_1 = require("../utils");
 const defaultModes = {
     days: true,
@@ -13,25 +15,34 @@ const defaultModes = {
     years: true,
 };
 function useCalendarState(props) {
-    const { disabled, readOnly, minValue, maxValue, timeZone, modes = defaultModes } = props;
-    const [value, setValue] = (0, useControlledState_1.useControlledState)(props.value, props.defaultValue, props.onUpdate);
-    const [mode, setMode] = (0, useControlledState_1.useControlledState)(props.mode, props.defaultMode, props.onUpdateMode);
+    var _a, _b, _c;
+    const { disabled, readOnly, modes = defaultModes } = props;
+    const [value, setValue] = (0, uikit_1.useControlledState)(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
     const availableModes = utils_1.calendarLayouts.filter((l) => modes[l]);
     const minMode = availableModes[0] || 'days';
+    const [mode, setMode] = (0, uikit_1.useControlledState)(props.mode, (_b = props.defaultMode) !== null && _b !== void 0 ? _b : minMode, props.onUpdateMode);
     const currentMode = mode && availableModes.includes(mode) ? mode : minMode;
+    const inputTimeZone = (0, useDefaultTimeZone_1.useDefaultTimeZone)(props.value || props.defaultValue || props.focusedValue || props.defaultFocusedValue);
+    const timeZone = props.timeZone || inputTimeZone;
+    const minValue = react_1.default.useMemo(() => (props.minValue ? props.minValue.timeZone(timeZone) : undefined), [timeZone, props.minValue]);
+    const maxValue = react_1.default.useMemo(() => (props.maxValue ? props.maxValue.timeZone(timeZone) : undefined), [timeZone, props.maxValue]);
     const focusedValue = react_1.default.useMemo(() => {
         if (!props.focusedValue) {
             return props.focusedValue;
         }
-        return (0, utils_1.constrainValue)(props.focusedValue, minValue, maxValue);
-    }, [props.focusedValue, minValue, maxValue]);
+        return (0, utils_1.constrainValue)(props.focusedValue.timeZone(timeZone), minValue, maxValue);
+    }, [props.focusedValue, minValue, maxValue, timeZone]);
     const defaultFocusedValue = react_1.default.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)) ||
             (0, dates_1.createPlaceholderValue)({ timeZone }).startOf(minMode);
         return (0, utils_1.constrainValue)(defaultValue, minValue, maxValue);
     }, [maxValue, minValue, props.defaultFocusedValue, timeZone, value, minMode]);
-    const [focusedDateInner, setFocusedDate] = (0, useControlledState_1.useControlledState)(focusedValue, defaultFocusedValue, props.onFocusUpdate);
-    const focusedDate = focusedDateInner !== null && focusedDateInner !== void 0 ? focusedDateInner : (0, utils_1.constrainValue)((0, dates_1.createPlaceholderValue)({ timeZone }).startOf(minMode), minValue, maxValue);
+    const [focusedDateInner, setFocusedDate] = (0, uikit_1.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 : (0, utils_1.constrainValue)((0, dates_1.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((0, utils_1.constrainValue)(focusedDate, minValue, maxValue));
@@ -46,16 +57,24 @@ function useCalendarState(props) {
         disabled,
         readOnly,
         value,
-        setValue,
+        setValue(date) {
+            if (!disabled && !readOnly) {
+                let newValue = (0, utils_1.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 = (0, dates_1.mergeDateTime)(newValue, value.timeZone(timeZone));
+                }
+                setValue(newValue.timeZone(inputTimeZone));
+            }
+        },
         timeZone,
         selectDate(date, force = false) {
             if (!disabled) {
                 if (!readOnly && (force || this.mode === minMode)) {
-                    const newValue = (0, utils_1.constrainValue)(date, minValue, maxValue);
-                    if (this.isCellUnavailable(newValue)) {
-                        return;
-                    }
-                    setValue(newValue);
+                    this.setValue(date.startOf(minMode));
                     if (force && currentMode !== minMode) {
                         setMode(minMode);
                     }
@@ -131,15 +150,15 @@ 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() {
@@ -159,8 +178,8 @@ 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) {
@@ -180,6 +199,9 @@ function useCalendarState(props) {
         isWeekend(date) {
             return this.mode === 'days' && [0, 6].includes(date.day());
         },
+        isCurrent(date) {
+            return (0, date_utils_1.dateTime)({ timeZone }).isSame(date, this.mode);
+        },
         mode: currentMode,
         setMode,
         availableModes,

package/dist/cjs/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/cjs/components/{CalendarBase → CalendarView}/hooks/useRangeCalendarState.js

@@ -3,19 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRangeCalendarState = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const useControlledState_1 = require("../../hooks/useControlledState");
+const uikit_1 = require("@gravity-ui/uikit");
+const dates_1 = require("../../utils/dates");
+const useDefaultTimeZone_1 = require("../../utils/useDefaultTimeZone");
 const utils_1 = require("../utils");
 const useCalendarState_1 = require("./useCalendarState");
 function useRangeCalendarState(props) {
-    var _a, _b;
-    const { value: valueProp, defaultValue, onUpdate } = props, calendarProps = tslib_1.__rest(props, ["value", "defaultValue", "onUpdate"]);
-    const [value, setValue] = (0, useControlledState_1.useControlledState)(valueProp, defaultValue, onUpdate);
+    var _a;
+    const { value: valueProp, defaultValue = null, onUpdate } = props, calendarProps = tslib_1.__rest(props, ["value", "defaultValue", "onUpdate"]);
+    const [value, setValue] = (0, uikit_1.useControlledState)(valueProp, defaultValue, onUpdate);
     const [anchorDate, setAnchorDateState] = react_1.default.useState();
-    const calendar = (0, useCalendarState_1.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 = (0, useDefaultTimeZone_1.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 = (0, useCalendarState_1.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 = (0, dates_1.mergeDateTime)(start, value.start.timeZone(timeZone));
+            end = (0, dates_1.mergeDateTime)(end, value.end.timeZone(timeZone));
+        }
+        setValue({ start: start.timeZone(inputTimeZone), end: end.timeZone(inputTimeZone) });
+    };
     const selectDate = (date, force = false) => {
         if (props.disabled) {
             return;
@@ -27,22 +40,20 @@ function useRangeCalendarState(props) {
         if (props.readOnly) {
             return;
         }
-        date = (0, utils_1.constrainValue)(date, props.minValue, props.maxValue);
-        if (calendar.isCellUnavailable(date)) {
+        const newDate = (0, utils_1.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/cjs/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/cjs/components/DateField/DateField.js

@@ -20,6 +20,8 @@ function DateField(_a) {
             setActive(isFocusWithin);
         },
     });
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })) })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })), (0, jsx_runtime_1.jsx)("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
+                // Ignore React warning
+                onChange: () => { } })] })));
 }
 exports.DateField = DateField;