@gravity-ui/date-components 2.0.1 → 2.2.0

package/dist/cjs/components/DatePicker/hooks/useDatePickerState.js

@@ -1,137 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDatePickerState = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const uikit_1 = require("@gravity-ui/uikit");
 const DateField_1 = require("../../DateField");
 const dates_1 = require("../../utils/dates");
-const useDefaultTimeZone_1 = require("../../utils/useDefaultTimeZone");
-function useDatePickerState(props) {
-    var _a;
-    const { disabled, readOnly } = props;
-    const [isOpen, setOpen] = react_1.default.useState(false);
-    const [value, setValue] = (0, uikit_1.useControlledState)(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
-    const [selectedDateInner, setSelectedDate] = react_1.default.useState(null);
-    const [selectedTimeInner, setSelectedTime] = react_1.default.useState(null);
-    const inputTimeZone = (0, useDefaultTimeZone_1.useDefaultTimeZone)(props.value || props.defaultValue || props.placeholderValue);
-    const timeZone = props.timeZone || inputTimeZone;
-    let selectedDate = selectedDateInner;
-    let selectedTime = selectedTimeInner;
-    const format = props.format || 'L';
-    const commitValue = (date, time) => {
-        if (disabled || readOnly) {
-            return;
-        }
-        setValue((0, dates_1.mergeDateTime)(date, time).timeZone(inputTimeZone));
-        setSelectedDate(null);
-        setSelectedTime(null);
-    };
-    const dateFieldState = (0, DateField_1.useDateFieldState)({
-        value,
-        onUpdate(date) {
-            if (date) {
-                commitValue(date, date);
-            }
-            else {
-                setValue(null);
-            }
-        },
-        disabled,
-        readOnly,
-        validationState: props.validationState,
-        minValue: props.minValue,
-        maxValue: props.maxValue,
-        isDateUnavailable: props.isDateUnavailable,
-        format,
-        placeholderValue: props.placeholderValue,
-        timeZone,
-    });
-    const timeFormat = react_1.default.useMemo(() => {
-        const hasSeconds = dateFieldState.sections.some((s) => s.type === 'second');
-        return hasSeconds ? 'LTS' : 'LT';
-    }, [dateFieldState.sections]);
-    if (value) {
-        selectedDate = value.timeZone(timeZone);
-        if (dateFieldState.hasTime) {
-            selectedTime = value.timeZone(timeZone);
-        }
-    }
-    // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
-    const selectDate = (newValue) => {
-        if (disabled || readOnly) {
-            return;
-        }
-        const shouldClose = !dateFieldState.hasTime;
-        if (dateFieldState.hasTime) {
-            if (selectedTime || shouldClose) {
-                commitValue(newValue, selectedTime || newValue);
-            }
-            else {
-                setSelectedDate(newValue);
-            }
-        }
-        else {
-            commitValue(newValue, newValue);
-        }
-        if (shouldClose) {
-            setOpen(false);
-        }
-    };
-    const selectTime = (newValue) => {
-        if (disabled || readOnly) {
-            return;
-        }
-        const newTime = newValue !== null && newValue !== void 0 ? newValue : (0, dates_1.createPlaceholderValue)({
-            placeholderValue: props.placeholderValue,
-            timeZone,
-        });
-        if (selectedDate) {
-            commitValue(selectedDate, newTime);
-        }
-        else {
-            setSelectedTime(newTime);
-        }
-    };
-    if (dateFieldState.hasTime && !selectedTime) {
-        selectedTime = dateFieldState.displayValue;
-    }
-    return {
-        value,
-        setValue(newDate) {
-            if (props.readOnly || props.disabled) {
-                return;
-            }
-            if (newDate) {
-                setValue(newDate.timeZone(inputTimeZone));
-            }
-            else {
-                setValue(null);
-            }
-        },
-        dateValue: selectedDate,
-        timeValue: selectedTime,
-        setDateValue: selectDate,
-        setTimeValue: selectTime,
-        disabled,
-        readOnly,
-        format,
-        hasDate: dateFieldState.hasDate,
-        hasTime: dateFieldState.hasTime,
-        timeFormat,
-        timeZone,
-        isOpen,
-        setOpen(newIsOpen) {
-            if (!newIsOpen && !value && selectedDate && dateFieldState.hasTime) {
-                commitValue(selectedDate, selectedTime ||
-                    (0, dates_1.createPlaceholderValue)({
-                        placeholderValue: props.placeholderValue,
-                        timeZone: inputTimeZone,
-                    }));
-            }
-            setOpen(newIsOpen);
-        },
-        dateFieldState,
-    };
+const utils_1 = require("../utils");
+const datePickerStateFactory_1 = require("./datePickerStateFactory");
+exports.useDatePickerState = (0, datePickerStateFactory_1.datePickerStateFactory)({
+    getPlaceholderTime,
+    mergeDateTime: dates_1.mergeDateTime,
+    setTimezone: (date, timeZone) => date.timeZone(timeZone),
+    getDateTime: utils_1.getDateTimeValue,
+    useDateFieldState: DateField_1.useDateFieldState,
+});
+function getPlaceholderTime(placeholderValue, timeZone) {
+    return (0, dates_1.createPlaceholderValue)({ placeholderValue, timeZone });
 }
-exports.useDatePickerState = useDatePickerState;

package/dist/cjs/components/DatePicker/{utils.js → utils/cn.js}

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.b = void 0;
-const cn_1 = require("../../utils/cn");
+const cn_1 = require("../../../utils/cn");
 exports.b = (0, cn_1.block)('date-picker');

package/dist/cjs/components/DatePicker/utils/getDateTimeValue.d.ts

@@ -0,0 +1,3 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { RangeValue } from '../../types';
+export declare function getDateTimeValue(value: DateTime | RangeValue<DateTime> | null | undefined): DateTime | undefined;

package/dist/cjs/components/DatePicker/utils/getDateTimeValue.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDateTimeValue = void 0;
+function getDateTimeValue(value) {
+    if (!value) {
+        return undefined;
+    }
+    return 'start' in value && 'end' in value ? value.start : value;
+}
+exports.getDateTimeValue = getDateTimeValue;

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

@@ -0,0 +1,2 @@
+export * from './cn';
+export * from './getDateTimeValue';

package/dist/cjs/components/DatePicker/utils/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./cn"), exports);
+tslib_1.__exportStar(require("./getDateTimeValue"), exports);

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

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

package/dist/cjs/components/RangeDateField/hooks/useRangeDateFieldState.d.ts

@@ -1,9 +1,9 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { BaseDateFieldState } from '../../DateField';
+import type { DateFieldState } from '../../DateField';
 import type { DateFieldBase } from '../../types/datePicker';
 import type { RangeValue } from '../../types/inputs';
 export interface RangeDateFieldStateOptions extends DateFieldBase<RangeValue<DateTime>> {
     delimiter?: string;
 }
-export type RangeDateFieldState = BaseDateFieldState<RangeValue<DateTime>>;
+export type RangeDateFieldState = DateFieldState<RangeValue<DateTime>>;
 export declare function useRangeDateFieldState(props: RangeDateFieldStateOptions): RangeDateFieldState;

package/dist/cjs/components/RangeDatePicker/RangeDatePicker.css

@@ -0,0 +1,22 @@
+.g-date-range-date-picker {
+  position: relative;
+  display: inline-block;
+  outline: none;
+}
+.g-date-range-date-picker__field {
+  width: 100%;
+}
+.g-date-range-date-picker__popup-anchor {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+}
+.g-date-range-date-picker__popup-content {
+  outline: none;
+}
+.g-date-range-date-picker__time-field {
+  width: 100%;
+}
+.g-date-range-date-picker__time-field-wrapper {
+  padding: 10px;
+}

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

@@ -0,0 +1,6 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DatePickerProps } from '../DatePicker';
+import type { RangeValue } from '../types';
+import './RangeDatePicker.css';
+export type RangeDatePickerProps = DatePickerProps<RangeValue<DateTime>>;
+export declare function RangeDatePicker({ className, ...props }: RangeDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/RangeDatePicker/RangeDatePicker.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeDatePicker = 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 Calendar_1 = require("../Calendar");
+const DatePicker_1 = require("../DatePicker");
+const StubButton_1 = require("../DatePicker/StubButton");
+const RangeDateField_1 = require("../RangeDateField");
+const useRangeDatePickerState_1 = require("./hooks/useRangeDatePickerState");
+require("./RangeDatePicker.css");
+const b = (0, cn_1.block)('range-date-picker');
+function RangeDatePicker(_a) {
+    var { className } = _a, props = tslib_1.__rest(_a, ["className"]);
+    const anchorRef = react_1.default.useRef(null);
+    const state = (0, useRangeDatePickerState_1.useRangeDatePickerState)(props);
+    const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = (0, DatePicker_1.useDatePickerProps)(state, props);
+    const isOnlyTime = state.hasTime && !state.hasDate;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: b('popup-anchor'), children: (0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : ((0, jsx_runtime_1.jsx)(Calendar_1.RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(RangeDateField_1.RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: b('field'), hasClear: fieldProps.hasClear, endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock }))] }) }))] })));
+}
+exports.RangeDatePicker = RangeDatePicker;

package/dist/cjs/components/RangeDatePicker/hooks/useRangeDatePickerState.d.ts

@@ -0,0 +1,7 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DatePickerState } from '../../DatePicker';
+import type { RangeDateFieldStateOptions } from '../../RangeDateField';
+import type { RangeValue } from '../../types';
+export type RangeDatePickerState = DatePickerState<RangeValue<DateTime>>;
+export type RangeDatePickerStateOptions = RangeDateFieldStateOptions;
+export declare const useRangeDatePickerState: (props: RangeDateFieldStateOptions) => DatePickerState<RangeValue<DateTime>>;

package/dist/cjs/components/RangeDatePicker/hooks/useRangeDatePickerState.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRangeDatePickerState = void 0;
+const datePickerStateFactory_1 = require("../../DatePicker/hooks/datePickerStateFactory");
+const utils_1 = require("../../DatePicker/utils");
+const RangeDateField_1 = require("../../RangeDateField");
+const dates_1 = require("../../utils/dates");
+exports.useRangeDatePickerState = (0, datePickerStateFactory_1.datePickerStateFactory)({
+    getPlaceholderTime,
+    mergeDateTime: mergeRangeDateTime,
+    setTimezone,
+    getDateTime: utils_1.getDateTimeValue,
+    useDateFieldState: RangeDateField_1.useRangeDateFieldState,
+});
+function getPlaceholderTime(placeholderValue, timeZone) {
+    const date = (0, dates_1.createPlaceholderValue)({ placeholderValue, timeZone });
+    return { start: date, end: date };
+}
+function mergeRangeDateTime(date, time) {
+    const start = (0, dates_1.mergeDateTime)(date.start, time.start);
+    const end = (0, dates_1.mergeDateTime)(date.end, time.end);
+    return { start, end };
+}
+function setTimezone(date, timeZone) {
+    const start = date.start.timeZone(timeZone);
+    const end = date.end.timeZone(timeZone);
+    return { start, end };
+}

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

@@ -0,0 +1,2 @@
+export * from './RangeDatePicker';
+export * from './hooks/useRangeDatePickerState';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./RangeDatePicker"), exports);
+tslib_1.__exportStar(require("./hooks/useRangeDatePickerState"), exports);

package/dist/cjs/components/RelativeDatePicker/RelativeDatePicker.js

@@ -10,6 +10,7 @@ const cn_1 = require("../../utils/cn");
 const Calendar_1 = require("../Calendar");
 const DateField_1 = require("../DateField");
 const MobileCalendar_1 = require("../DatePicker/MobileCalendar");
+const StubButton_1 = require("../DatePicker/StubButton");
 const useRelativeDatePickerProps_1 = require("./hooks/useRelativeDatePickerProps");
 const useRelativeDatePickerState_1 = require("./hooks/useRelativeDatePickerState");
 require("./RelativeDatePicker.css");
@@ -19,15 +20,16 @@ function RelativeDatePicker(props) {
     const { groupProps, fieldProps, modeSwitcherProps, calendarButtonProps, popupProps, calendarProps, timeInputProps, } = (0, useRelativeDatePickerProps_1.useRelativeDatePickerProps)(state, props);
     const anchorRef = react_1.default.useRef(null);
     const isMobile = (0, uikit_1.useMobile)();
+    const isOnlyTime = state.datePickerState.hasTime && !state.datePickerState.hasDate;
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef, className: b(null, props.className) }, groupProps, { children: [isMobile && state.mode === 'absolute' && ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { state: state.datePickerState, props: {
                     id: props.id,
                     disabled: props.disabled,
                     readOnly: props.readOnly,
                     placeholderValue: props.placeholderValue,
                     timeZone: props.timeZone,
-                } })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { controlProps: Object.assign(Object.assign({}, fieldProps.controlProps), { disabled: isMobile && state.mode === 'absolute', className: b('input', { mobile: isMobile && state.mode === 'absolute' }) }), hasClear: props.hasClear && !(isMobile && state.mode === 'absolute'), startContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, modeSwitcherProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Function }) })), endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), isMobile && state.mode === 'absolute' && ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendarIcon, { state: state.datePickerState, props: { size: props.size } }))] }) })), (0, jsx_runtime_1.jsx)("input", { type: "text", hidden: true, name: props.name, value: getNativeValue(state.value), 
+                } })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { controlProps: Object.assign(Object.assign({}, fieldProps.controlProps), { disabled: isMobile && state.mode === 'absolute', className: b('input', { mobile: isMobile && state.mode === 'absolute' }) }), hasClear: props.hasClear && !(isMobile && state.mode === 'absolute'), startContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, modeSwitcherProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Function }) })), endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isMobile && !isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), !isMobile && isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock })), isMobile && state.mode === 'absolute' && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? icons_1.Clock : icons_1.Calendar }))] }) })), (0, jsx_runtime_1.jsx)("input", { type: "text", hidden: true, name: props.name, value: getNativeValue(state.value), 
                 // Ignore React warning
-                onChange: () => { } }), !isMobile && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({}, popupProps, { anchorRef: anchorRef, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : ((0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps))), state.datePickerState.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, timeInputProps)) }))] }) })))] })));
+                onChange: () => { } }), !isMobile && !isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({}, popupProps, { anchorRef: anchorRef, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : ((0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps))), state.datePickerState.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, timeInputProps)) }))] }) })))] })));
 }
 exports.RelativeDatePicker = RelativeDatePicker;
 function getNativeValue(value) {

package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.js

@@ -36,7 +36,7 @@ const data = [
         get title() {
             return (0, i18n_1.i18n)('Last 5 minutes');
         },
-        from: 'now — 5m',
+        from: 'now - 5m',
         to: 'now',
     },
     {
@@ -64,8 +64,8 @@ const data = [
         get title() {
             return (0, i18n_1.i18n)('Previous month');
         },
-        from: 'now — 1M/M',
-        to: 'now — 1M/M',
+        from: 'now - 1M/M',
+        to: 'now - 1M/M',
     },
 ];
 function PresetsExamples({ size }) {

package/dist/esm/components/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/esm/components/CalendarView/i18n/en.json

@@ -1,4 +1,7 @@
 {
   "Previous": "Previous",
-  "Next": "Next"
+  "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

@@ -1 +1 @@
-export declare const i18n: (key: "Previous" | "Next", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+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

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

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

@@ -28,7 +28,7 @@ export type BaseDateFieldStateOptions<T = DateTime> = {
     createPlaceholder: () => T;
     setValueFromString: (str: string) => boolean;
 };
-export type BaseDateFieldState<T = DateTime> = {
+export type DateFieldState<T = DateTime> = {
     /** The current field value. */
     value: T | null;
     /** Is no part of value is filled. */
@@ -94,4 +94,4 @@ export type BaseDateFieldState<T = DateTime> = {
     onInput: (key: string) => void;
     setValueFromString: (str: string) => boolean;
 };
-export declare function useBaseDateFieldState<T = DateTime>(props: BaseDateFieldStateOptions<T>): BaseDateFieldState<T>;
+export declare function useBaseDateFieldState<T = DateTime>(props: BaseDateFieldStateOptions<T>): DateFieldState<T>;

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

@@ -1,9 +1,9 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { TextInputProps } from '@gravity-ui/uikit';
 import type { AccessibilityProps, DateFieldBase, TextInputProps as DateFieldTextInputProps, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputExtendProps } from '../../types';
-import type { BaseDateFieldState } from './useBaseDateFieldState';
+import type { DateFieldState } from './useBaseDateFieldState';
 export interface DateFieldProps<T = DateTime> extends DateFieldBase<T>, DateFieldTextInputProps, TextInputExtendProps, DomProps, InputDOMProps, FocusableProps, KeyboardEvents, StyleProps, AccessibilityProps {
 }
-export declare function useDateFieldProps<T = DateTime>(state: BaseDateFieldState<T>, props: DateFieldProps<T>): {
+export declare function useDateFieldProps<T = DateTime>(state: DateFieldState<T>, props: DateFieldProps<T>): {
     inputProps: TextInputProps;
 };

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

@@ -1,6 +1,5 @@
 import type { DateFieldBase } from '../../types/datePicker';
-import type { BaseDateFieldState } from './useBaseDateFieldState';
+import type { DateFieldState } from './useBaseDateFieldState';
 export interface DateFieldStateOptions extends DateFieldBase {
 }
-export type DateFieldState = BaseDateFieldState;
 export declare function useDateFieldState(props: DateFieldStateOptions): DateFieldState;

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

@@ -64,6 +64,7 @@ const formatTokenMap = {
 function getDateSectionConfigFromFormatToken(formatToken) {
     const config = formatTokenMap[formatToken];
     if (!config) {
+        // eslint-disable-next-line no-console
         console.error([
             `The token "${formatToken}" is not supported by the Date field.`,
             'Please try using another token.',
@@ -185,7 +186,7 @@ export function addSegment(section, date, amount) {
     var _a;
     let val = (_a = section.value) !== null && _a !== void 0 ? _a : 0;
     if (section.type === 'dayPeriod') {
-        val = date.hour() + (date.hour() > 12 ? -12 : 12);
+        val = date.hour() + (date.hour() >= 12 ? -12 : 12);
     }
     else {
         val = val + amount;

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import type { DateTime } from '@gravity-ui/date-utils';
 import type { CalendarProps } from '../Calendar';
 import type { AccessibilityProps, DateFieldBase, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
 import './DatePicker.css';
-export interface DatePickerProps extends DateFieldBase, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
-    children?: (props: CalendarProps) => React.ReactNode;
+export interface DatePickerProps<T = DateTime> extends DateFieldBase<T>, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
+    children?: (props: CalendarProps<T>) => React.ReactNode;
 }
 export declare function DatePicker({ className, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/DatePicker/DatePicker.js

@@ -1,11 +1,12 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Calendar as CalendarIcon } from '@gravity-ui/icons';
+import { Calendar as CalendarIcon, Clock as ClockIcon } from '@gravity-ui/icons';
 import { Button, Icon, Popup, TextInput, useMobile } from '@gravity-ui/uikit';
 import { Calendar } from '../Calendar';
 import { DateField } from '../DateField';
-import { MobileCalendar, MobileCalendarIcon } from './MobileCalendar';
+import { MobileCalendar } from './MobileCalendar';
+import { StubButton } from './StubButton';
 import { useDatePickerProps } from './hooks/useDatePickerProps';
 import { useDatePickerState } from './hooks/useDatePickerState';
 import { b } from './utils';
@@ -16,7 +17,8 @@ export function DatePicker(_a) {
     const state = useDatePickerState(props);
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = useDatePickerProps(state, props);
     const isMobile = useMobile();
-    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [isMobile ? (_jsx(MobileCalendar, { props: props, state: state })) : (_jsx("div", { ref: anchorRef, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })) })), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, endContent: isMobile ? (_jsx(MobileCalendarIcon, { props: props, state: state })) : (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))) })), _jsx("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
+    const isOnlyTime = state.hasTime && !state.hasDate;
+    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [isMobile ? (_jsx(MobileCalendar, { props: props, state: state })) : (!isOnlyTime && (_jsx("div", { ref: anchorRef, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })) }))), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, endContent: _jsxs(React.Fragment, { children: [!isMobile && !isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), !isMobile && isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon })), isMobile && (_jsx(StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? ClockIcon : CalendarIcon }))] }) })), _jsx("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
                 // Ignore React warning
                 onChange: () => { } })] })));
 }

package/dist/esm/components/DatePicker/MobileCalendar.css

@@ -1,29 +1,4 @@
 .g-date-mobile-calendar {
-  position: relative;
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-}
-.g-date-mobile-calendar_size_xs {
-  width: 20px;
-  height: 20px;
-}
-.g-date-mobile-calendar_size_m {
-  width: 28px;
-  height: 28px;
-}
-.g-date-mobile-calendar_size_l {
-  width: 36px;
-  height: 36px;
-}
-.g-date-mobile-calendar__button {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.g-date-mobile-calendar__input {
   position: absolute;
   z-index: 1;
   inset-block-start: 0;
@@ -37,7 +12,7 @@
   opacity: 0;
   border: none;
 }
-.g-date-mobile-calendar__input::-webkit-calendar-picker-indicator {
+.g-date-mobile-calendar::-webkit-calendar-picker-indicator {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;

package/dist/esm/components/DatePicker/MobileCalendar.d.ts

@@ -6,9 +6,4 @@ interface MobileCalendarProps {
     state: DatePickerState;
 }
 export declare function MobileCalendar({ props, state }: MobileCalendarProps): import("react/jsx-runtime").JSX.Element;
-interface MobileCalendarIconProps {
-    props: DatePickerProps;
-    state: DatePickerState;
-}
-export declare function MobileCalendarIcon({ props }: MobileCalendarIconProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/DatePicker/MobileCalendar.js

@@ -1,10 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { dateTime } from '@gravity-ui/date-utils';
-import { Calendar as CalendarIcon } from '@gravity-ui/icons';
-import { Icon } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
 import { createPlaceholderValue, mergeDateTime } from '../utils/dates';
-import { getButtonSizeForInput } from '../utils/getButtonSizeForInput';
 import './MobileCalendar.css';
 const b = block('mobile-calendar');
 export function MobileCalendar({ props, state }) {
@@ -16,7 +13,7 @@ export function MobileCalendar({ props, state }) {
     else if (state.hasTime) {
         type = 'time';
     }
-    return (_jsx("input", { className: b('input'), disabled: props.disabled, type: type, value: formatNative(state.dateFieldState.displayValue, type), id: props.id, min: formatNative((_a = props.minValue) === null || _a === void 0 ? void 0 : _a.timeZone(state.timeZone), type), max: formatNative((_b = props.maxValue) === null || _b === void 0 ? void 0 : _b.timeZone(state.timeZone), type), tabIndex: -1, onChange: (e) => {
+    return (_jsx("input", { className: b(), disabled: props.disabled, type: type, value: formatNative(state.dateFieldState.displayValue, type), id: props.id, min: formatNative((_a = props.minValue) === null || _a === void 0 ? void 0 : _a.timeZone(state.timeZone), type), max: formatNative((_b = props.maxValue) === null || _b === void 0 ? void 0 : _b.timeZone(state.timeZone), type), tabIndex: -1, onChange: (e) => {
             var _a, _b;
             if (props.readOnly) {
                 return;
@@ -53,9 +50,6 @@ export function MobileCalendar({ props, state }) {
             }
         } }));
 }
-export function MobileCalendarIcon({ props }) {
-    return (_jsx("span", { className: b({ size: getButtonSizeForInput(props.size) }), children: _jsx("span", { className: b('button'), children: _jsx(Icon, { data: CalendarIcon }) }) }));
-}
 function getDateFormat(type) {
     switch (type) {
         case 'time': {