@gravity-ui/date-components 1.6.0 → 2.0.1

package/dist/cjs/components/RelativeRangeDatePicker/hooks/useRelativeRangeDatePickerState.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRelativeRangeDatePickerState = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const date_utils_1 = require("@gravity-ui/date-utils");
+const uikit_1 = require("@gravity-ui/uikit");
+const datePicker_1 = require("../../utils/validation/datePicker");
+const i18n_1 = require("../i18n");
+function useRelativeRangeDatePickerState(props) {
+    var _a, _b;
+    const [value, setValue] = (0, uikit_1.useControlledState)(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null);
+    const [timeZone, setTimeZone] = (0, uikit_1.useControlledState)(props.timeZone, (_b = props.defaultTimeZone) !== null && _b !== void 0 ? _b : 'default', props.onUpdateTimeZone);
+    const validation = react_1.default.useMemo(() => getRangeValidationResult(value, props.allowNullableValues, props.minValue, props.maxValue, props.isDateUnavailable, timeZone), [
+        value,
+        props.allowNullableValues,
+        props.isDateUnavailable,
+        props.maxValue,
+        props.minValue,
+        timeZone,
+    ]);
+    return Object.assign({ value,
+        timeZone,
+        setValue(v, tz) {
+            var _a;
+            setValue(v);
+            setTimeZone(tz);
+            if (value !== v || (value && timeZone !== tz)) {
+                (_a = props.onUpdate) === null || _a === void 0 ? void 0 : _a.call(props, v, tz);
+            }
+        } }, validation);
+}
+exports.useRelativeRangeDatePickerState = useRelativeRangeDatePickerState;
+function getRangeValidationResult(value, allowNullableValues, minValue, maxValue, isDateUnavailable, timeZone) {
+    if (!value) {
+        return { isInvalid: false, errors: [] };
+    }
+    const startDate = value.start ? (0, date_utils_1.dateTimeParse)(value.start.value, { timeZone }) : null;
+    const endDate = value.end ? (0, date_utils_1.dateTimeParse)(value.end.value, { timeZone, roundUp: true }) : null;
+    const startValidationResult = (0, datePicker_1.getValidationResult)(startDate, minValue, maxValue, isDateUnavailable, timeZone, (0, i18n_1.i18n)('"From"'));
+    if (!startDate && !allowNullableValues) {
+        startValidationResult.isInvalid = true;
+        startValidationResult.errors.push((0, i18n_1.i18n)('"From" is required.'));
+    }
+    const endValidationResult = (0, datePicker_1.getValidationResult)(endDate, minValue, maxValue, isDateUnavailable, timeZone, (0, i18n_1.i18n)('"To"'));
+    if (!endDate && !allowNullableValues) {
+        endValidationResult.isInvalid = true;
+        endValidationResult.errors.push((0, i18n_1.i18n)('"To" is required.'));
+    }
+    if (startDate && endDate && endDate.isBefore(startDate)) {
+        startValidationResult.isInvalid = true;
+        startValidationResult.errors.push((0, i18n_1.i18n)(`"From" can't be after "To".`));
+    }
+    return {
+        isInvalid: startValidationResult.isInvalid || endValidationResult.isInvalid,
+        errors: startValidationResult.errors.concat(endValidationResult.errors),
+    };
+}

package/dist/cjs/components/RelativeRangeDatePicker/i18n/en.json

@@ -0,0 +1,8 @@
+{
+  "\"From\"": "\"From\"",
+  "\"From\" is required.": "\"From\" is required.",
+  "\"To\"": "\"To\"",
+  "\"To\" is required.": "\"To\" is required.",
+  "\"From\" can't be after \"To\".": "\"From\" can't be after \"To\".",
+  "to": "to"
+}

package/dist/cjs/components/RelativeRangeDatePicker/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "\"From\"" | "\"From\" is required." | "\"To\"" | "\"To\" is required." | "\"From\" can't be after \"To\"." | "to", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/cjs/components/RelativeRangeDatePicker/i18n/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const tslib_1 = require("tslib");
+const i18n_1 = require("@gravity-ui/uikit/i18n");
+const cn_1 = require("../../../utils/cn");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}relative-range-date-picker`);

package/dist/cjs/components/RelativeRangeDatePicker/i18n/ru.json

@@ -0,0 +1,8 @@
+{
+  "\"From\"": "«От»",
+  "\"From\" is required.": "«От» обязательно.",
+  "\"To\"": "«До»",
+  "\"To\" is required.": "«До» обязательно.",
+  "\"From\" can't be after \"To\".": "«От» не может быть позже чем «До».",
+  "to": "до"
+}

package/dist/cjs/components/RelativeRangeDatePicker/index.d.ts

@@ -0,0 +1,4 @@
+export * from './RelativeRangeDatePicker';
+export { PickerDialog as RelativeRangeDatePickerDialog } from './components/PickerDialog/PickerDialog';
+export type { PickerDialogProps as RelativeRangeDatePickerDialogProps } from './components/PickerDialog/PickerDialog';
+export * from './hooks/useRelativeRangeDatePickerState';

package/dist/cjs/components/RelativeRangeDatePicker/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RelativeRangeDatePickerDialog = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./RelativeRangeDatePicker"), exports);
+var PickerDialog_1 = require("./components/PickerDialog/PickerDialog");
+Object.defineProperty(exports, "RelativeRangeDatePickerDialog", { enumerable: true, get: function () { return PickerDialog_1.PickerDialog; } });
+tslib_1.__exportStar(require("./hooks/useRelativeRangeDatePickerState"), exports);

package/dist/cjs/components/RelativeRangeDatePicker/utils.d.ts

@@ -0,0 +1,15 @@
+import type { Value } from '../RelativeDatePicker';
+import type { RangeValue } from '../types';
+import type { Preset } from './components/Presets/defaultPresets';
+export declare function resolveTimeZone(timeZone: string): string;
+export declare function normalizeTimeZone(timeZone: string): string;
+export declare function getTimeZoneOffset(timeZone: string): string;
+interface GetDefaultTitleArgs {
+    value: RangeValue<Value | null> | null;
+    timeZone: string;
+    alwaysShowAsAbsolute?: boolean;
+    format?: string;
+    presets?: Preset[];
+}
+export declare function getDefaultTitle({ value, timeZone, alwaysShowAsAbsolute, format, presets, }: GetDefaultTitleArgs): string;
+export {};

package/dist/cjs/components/RelativeRangeDatePicker/utils.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultTitle = exports.getTimeZoneOffset = exports.normalizeTimeZone = exports.resolveTimeZone = void 0;
+const date_utils_1 = require("@gravity-ui/date-utils");
+const utils_1 = require("./components/Presets/utils");
+function resolveTimeZone(timeZone) {
+    if (timeZone === 'default' || timeZone === 'system') {
+        return (0, date_utils_1.dateTime)({ timeZone }).timeZone();
+    }
+    return timeZone;
+}
+exports.resolveTimeZone = resolveTimeZone;
+function normalizeTimeZone(timeZone) {
+    const lowered = timeZone.toLowerCase();
+    if (lowered === 'default' || lowered === 'system') {
+        return lowered;
+    }
+    return resolveTimeZone(timeZone);
+}
+exports.normalizeTimeZone = normalizeTimeZone;
+function getTimeZoneOffset(timeZone) {
+    return `UTC ${(0, date_utils_1.dateTime)({ timeZone }).format('Z')}`;
+}
+exports.getTimeZoneOffset = getTimeZoneOffset;
+function getDefaultTitle({ value, timeZone, alwaysShowAsAbsolute, format = 'L', presets, }) {
+    var _a, _b, _c, _d, _e, _f;
+    if (!value) {
+        return '';
+    }
+    const tz = timeZone === 'system' ? '' : ` (${getTimeZoneOffset(timeZone)})`;
+    let from = '';
+    if (value.start) {
+        from =
+            value.start.type === 'relative' && !alwaysShowAsAbsolute
+                ? value.start.value
+                : (_b = (_a = (0, date_utils_1.dateTimeParse)(value.start.value, { timeZone })) === null || _a === void 0 ? void 0 : _a.format(format)) !== null && _b !== void 0 ? _b : '';
+    }
+    let to = '';
+    if (value.end) {
+        to =
+            value.end.type === 'relative' && !alwaysShowAsAbsolute
+                ? value.end.value
+                : (_d = (_c = (0, date_utils_1.dateTimeParse)(value.end.value, { timeZone, roundUp: true })) === null || _c === void 0 ? void 0 : _c.format(format)) !== null && _d !== void 0 ? _d : '';
+    }
+    if (!alwaysShowAsAbsolute &&
+        ((_e = value.start) === null || _e === void 0 ? void 0 : _e.type) === 'relative' &&
+        ((_f = value.end) === null || _f === void 0 ? void 0 : _f.type) === 'relative') {
+        return `${(0, utils_1.getPresetTitle)(value.start.value, value.end.value, presets)}${tz}`;
+    }
+    const delimiter = ' — ';
+    return `${from}${delimiter}${to}${tz}`;
+}
+exports.getDefaultTitle = getDefaultTitle;

package/dist/cjs/components/index.d.ts

@@ -4,3 +4,6 @@ export * from './DateField';
 export * from './DatePicker';
 export * from './RelativeDateField';
 export * from './RelativeDatePicker';
+export * from './RangeDateField';
+export * from './RelativeRangeDatePicker';
+export type { RangeValue } from './types';

package/dist/cjs/components/index.js

@@ -7,3 +7,5 @@ tslib_1.__exportStar(require("./DateField"), exports);
 tslib_1.__exportStar(require("./DatePicker"), exports);
 tslib_1.__exportStar(require("./RelativeDateField"), exports);
 tslib_1.__exportStar(require("./RelativeDatePicker"), exports);
+tslib_1.__exportStar(require("./RangeDateField"), exports);
+tslib_1.__exportStar(require("./RelativeRangeDatePicker"), exports);

package/dist/cjs/components/types/datePicker.d.ts

@@ -1,6 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { InputBase, Validation, ValueBase } from './inputs';
-export interface DateFieldBase<T = DateTime> extends ValueBase<T, T | null>, InputBase, Validation {
+export interface DateFieldBase<T = DateTime> extends ValueBase<T | null>, InputBase, Validation {
     /** The minimum allowed date that a user may select. */
     minValue?: DateTime;
     /** The maximum allowed date that a user may select. */
@@ -11,6 +11,9 @@ export interface DateFieldBase<T = DateTime> extends ValueBase<T, T | null>, Inp
     format?: string;
     /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */
     placeholderValue?: DateTime;
-    /** */
+    /**
+     * Which timezone use to show values. Example: 'default', 'system', 'Europe/Amsterdam'.
+     * @default The timezone of the `value` or `defaultValue` or `placeholderValue`, 'default' otherwise.
+     */
     timeZone?: string;
 }

package/dist/cjs/components/types/events.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="react" />
 export interface KeyboardEvents {
     /** Handler that is called when a key is pressed. */
-    onKeyDown?: (e: React.KeyboardEvent) => void;
+    onKeyDown?(e: React.KeyboardEvent): void;
     /** Handler that is called when a key is released. */
-    onKeyUp?: (e: React.KeyboardEvent) => void;
+    onKeyUp?(e: React.KeyboardEvent): void;
 }
 export interface FocusEvents<Target = Element> {
     /** Handler that is called when the element receives focus. */
-    onFocus?: (e: React.FocusEvent<Target>) => void;
+    onFocus?(e: React.FocusEvent<Target>): void;
     /** Handler that is called when the element loses focus. */
-    onBlur?: (e: React.FocusEvent<Target>) => void;
+    onBlur?(e: React.FocusEvent<Target>): void;
 }
 export interface FocusableProps<Target = Element> extends FocusEvents<Target> {
     /** Whether the element should receive focus on render. */

package/dist/cjs/components/types/inputs.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TextInputProps as TextInputBaseProps, TextInputPin, TextInputSize, TextInputView } from '@gravity-ui/uikit';
 export type ValidationState = 'invalid';
 export interface AccessibilityProps {
@@ -13,22 +12,24 @@ export interface AccessibilityProps {
 }
 export interface ValueBase<T, C = T> {
     /** The current value (controlled). */
-    value?: T | null;
+    value?: T;
     /** The default value (uncontrolled). */
     defaultValue?: T;
     /** Handler that is called when the value changes. */
     onUpdate?: (value: C) => void;
 }
-export interface Validation {
-    /** Whether the input should display its "invalid" visual styling */
-    validationState?: ValidationState;
-    /** An error message for the field */
-    errorMessage?: React.ReactNode;
+export interface Validation extends Pick<TextInputBaseProps, 'validationState' | 'errorMessage' | 'errorPlacement'> {
 }
 export interface DomProps {
     /** The element's unique identifier. */
     id?: string;
 }
+export interface InputDOMProps {
+    /**
+     * The name of the input element, used when submitting an HTML form.
+     */
+    name?: string;
+}
 export interface InputBase {
     /**
      * Whether the field is disabled.
@@ -65,11 +66,11 @@ export interface TextInputExtendProps {
     /**
      * User`s node rendered before label and input
      */
-    leftContent?: TextInputBaseProps['leftContent'];
+    startContent?: TextInputBaseProps['startContent'];
     /**
      * User`s node rendered after input and clear button
      */
-    rightContent?: TextInputBaseProps['rightContent'];
+    endContent?: TextInputBaseProps['endContent'];
 }
 export interface RangeValue<T> {
     /** The start value of the range. */

package/dist/cjs/components/utils/dates.d.ts

@@ -1,9 +1,8 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-interface PlaceholderValueOptions {
+export interface PlaceholderValueOptions {
     placeholderValue?: DateTime;
     timeZone?: string;
 }
 export declare function createPlaceholderValue({ placeholderValue, timeZone }: PlaceholderValueOptions): DateTime;
 export declare function isInvalid(value: DateTime | null | undefined, minValue: DateTime | undefined, maxValue: DateTime | undefined): boolean;
 export declare function mergeDateTime(date: DateTime, time: DateTime): DateTime;
-export {};

package/dist/cjs/components/utils/useDefaultTimeZone.d.ts

@@ -0,0 +1,2 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+export declare function useDefaultTimeZone(date: DateTime | null | undefined): string;

package/dist/cjs/components/utils/useDefaultTimeZone.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDefaultTimeZone = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function useDefaultTimeZone(date) {
+    const defaultTimeZone = date ? date.timeZone() : 'default';
+    const [lastValue, setLastValue] = react_1.default.useState(defaultTimeZone);
+    if (date && defaultTimeZone !== lastValue) {
+        setLastValue(defaultTimeZone);
+    }
+    const timeZone = date ? defaultTimeZone : lastValue;
+    return timeZone;
+}
+exports.useDefaultTimeZone = useDefaultTimeZone;

package/dist/cjs/components/utils/validation/datePicker.d.ts

@@ -0,0 +1,6 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+export interface ValidationResult {
+    isInvalid: boolean;
+    errors: string[];
+}
+export declare function getValidationResult(value: DateTime | null | undefined, minValue: DateTime | undefined, maxValue: DateTime | undefined, isDateUnavailable: ((v: DateTime) => boolean) | undefined, timeZone: string, valueTitle?: string): ValidationResult;

package/dist/cjs/components/utils/validation/datePicker.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getValidationResult = void 0;
+const i18n_1 = require("./i18n");
+function getValidationResult(value, minValue, maxValue, isDateUnavailable, timeZone, valueTitle = 'Value') {
+    const rangeOverflow = value && maxValue && maxValue.isBefore(value);
+    const rangeUnderflow = value && minValue && value.isBefore(minValue);
+    const isUnavailable = (value && (isDateUnavailable === null || isDateUnavailable === void 0 ? void 0 : isDateUnavailable(value))) || false;
+    const isInvalid = rangeOverflow || rangeUnderflow || isUnavailable;
+    const errors = [];
+    if (isInvalid) {
+        if (rangeUnderflow) {
+            errors.push((0, i18n_1.i18n)('Value must be {minValue} or later.', {
+                minValue: minValue.timeZone(timeZone).format(),
+                value: valueTitle,
+            }));
+        }
+        if (rangeOverflow) {
+            errors.push((0, i18n_1.i18n)('Value must be {maxValue} or earlier.', {
+                maxValue: maxValue.timeZone(timeZone).format(),
+                value: valueTitle,
+            }));
+        }
+        if (isUnavailable) {
+            errors.push((0, i18n_1.i18n)('Selected date unavailable.'));
+        }
+    }
+    return { isInvalid, errors };
+}
+exports.getValidationResult = getValidationResult;

package/dist/cjs/components/utils/validation/i18n/en.json

@@ -0,0 +1,6 @@
+{
+  "Value must be {minValue} or later.": "{{value}} must be {{minValue}} or later.",
+  "Value must be {maxValue} or earlier.": "{{value}} must be {{maxValue}} or earlier.",
+  "Selected date unavailable.": "Selected date unavailable.",
+  "Value is required.": "{{value}} is required."
+}

package/dist/cjs/components/utils/validation/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "Selected date unavailable." | "Value must be {minValue} or later." | "Value must be {maxValue} or earlier." | "Value is required.", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/cjs/components/utils/validation/i18n/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const tslib_1 = require("tslib");
+const i18n_1 = require("@gravity-ui/uikit/i18n");
+const cn_1 = require("../../../../utils/cn");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}validation`);

package/dist/cjs/components/utils/validation/i18n/ru.json

@@ -0,0 +1,6 @@
+{
+  "Value must be {minValue} or later.": "{value} должно ровняться {minValue} или быть позже.",
+  "Value must be {maxValue} or earlier.": "{value} должно ровняться {maxValue} или быть раньше.",
+  "Selected date unavailable.": "Выбранная дата недоступна.",
+  "Value is required.": "{value} обязательно."
+}

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 })));