@gravity-ui/date-components 1.0.0 → 1.1.1

package/dist/cjs/components/Calendar/Calendar.css

@@ -82,6 +82,11 @@
 .g-date-calendar__content_animation_zoom-out.g-date-calendar__previous-state {
   animation: calendar-zoom-out-hiding 0.25s ease forwards;
 }
+@media screen and (prefers-reduced-motion: reduce), (update: slow) {
+  .g-date-calendar__content[class] {
+    animation-duration: 0.001ms;
+  }
+}
 @keyframes calendar-forward {
   from {
     transform: translateX(0);
@@ -142,10 +147,13 @@
   display: grid;
   gap: var(--_--calendar-days-gap);
 }
-.g-date-calendar__grid-rowgroup_mode_months, .g-date-calendar__grid-rowgroup_mode_years {
+.g-date-calendar__grid-rowgroup_mode_months, .g-date-calendar__grid-rowgroup_mode_quarters, .g-date-calendar__grid-rowgroup_mode_years {
   grid-row: 1/-1;
   padding: 12px 0 0;
 }
+.g-date-calendar__grid-rowgroup-header {
+  align-self: center;
+}
 .g-date-calendar__grid-row {
   display: grid;
   grid-auto-columns: 1fr;

package/dist/cjs/components/Calendar/CalendarBase.js

@@ -22,7 +22,8 @@ exports.CalendarBase = react_1.default.forwardRef(function Calendar(props, ref)
             state.setFocused(true);
         },
     }));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, calendarProps, { className: b({ size: props.size }), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('header'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, modeButtonProps, { view: "flat", size: props.size, children: state.mode === 'years' ? ((0, jsx_runtime_1.jsx)("span", { className: b('mode-label', b(`years-label`)), children: modeButtonProps.children }, "label")) : ([
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, calendarProps, { className: b({ size: props.size }), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('header'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, modeButtonProps, { view: "flat", size: props.size, children: state.availableModes.indexOf(state.mode) + 1 ===
+                            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 })] })));
@@ -33,8 +34,7 @@ function CalendarGrid({ state }) {
     const startDateChanged = !state.startDate.isSame(prevState.startDate, 'days');
     let animation;
     if (modeChanged) {
-        if ((state.mode === 'days' && prevState.mode === 'months') ||
-            (state.mode === 'months' && prevState.mode === 'years')) {
+        if (utils_1.calendarLayouts.indexOf(prevState.mode) > utils_1.calendarLayouts.indexOf(state.mode)) {
             animation = 'zoom-out';
         }
         else {
@@ -65,13 +65,13 @@ function Weekdays({ state }) {
 }
 function CalendarGridCells({ state }) {
     const rowsInPeriod = state.mode === 'days' ? 6 : 4;
-    const columnsInRow = state.mode === 'days' ? 7 : 3;
+    const columnsInRow = state.mode === 'days' ? 7 : 3 + (state.mode === 'quarters' ? 1 : 0);
     const days = (0, utils_1.getDaysInPeriod)(state.startDate, state.endDate, state.mode);
-    return ((0, jsx_runtime_1.jsx)("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => ((0, jsx_runtime_1.jsx)("div", { className: b('grid-row'), role: "row", children: days
-                .slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)
-                .map((date) => {
-                return (0, jsx_runtime_1.jsx)(CalendarCell, { date: date, state: state }, date.unix());
-            }) }, rowIndex))) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? ((0, jsx_runtime_1.jsx)("span", { role: "rowheader", className: b('grid-rowgroup-header'), children: days[rowIndex * columnsInRow].format('YYYY') })) : null, days
+                    .slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)
+                    .map((date) => {
+                    return (0, jsx_runtime_1.jsx)(CalendarCell, { date: date, state: state }, date.unix());
+                })] }, rowIndex))) }));
 }
 function CalendarCell({ date, state }) {
     const { cellProps, buttonProps, formattedDate, isDisabled, isSelected, isRangeSelection, isSelectionStart, isSelectionEnd, isOutsideCurrentRange, isUnavailable, isCurrent, isWeekend, } = (0, useCalendarCellProps_1.useCalendarCellProps)(date, state);

package/dist/cjs/components/Calendar/hooks/types.d.ts

@@ -1,6 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { InputBase, RangeValue } from '../../types';
-export type CalendarLayout = 'days' | 'months' | 'years';
+export type CalendarLayout = 'days' | 'months' | 'quarters' | 'years';
 export interface CalendarStateOptionsBase extends InputBase {
     /** The minimum allowed date that a user may select. */
     minValue?: DateTime;
@@ -27,6 +27,8 @@ export interface CalendarStateOptionsBase extends InputBase {
     defaultMode?: CalendarLayout;
     /** Handler that is called when the mode changes */
     onUpdateMode?: (mode: CalendarLayout) => void;
+    /** Controls which modes to use */
+    modes?: Partial<Record<CalendarLayout, boolean>>;
 }
 interface CalendarStateBase {
     /** Whether the calendar is disabled. */
@@ -45,7 +47,7 @@ interface CalendarStateBase {
     /** Selects the currently focused date. */
     selectFocusedDate(): void;
     /** Selects the given date. */
-    selectDate(date: DateTime): void;
+    selectDate(date: DateTime, force?: boolean): void;
     /** Moves focus to the next calendar date. */
     focusNextCell(): void;
     /** Moves focus to the previous calendar date. */
@@ -98,6 +100,7 @@ interface CalendarStateBase {
     readonly mode: CalendarLayout;
     /** Sets calendar layout */
     setMode(mode: CalendarLayout): void;
+    readonly availableModes: CalendarLayout[];
     readonly startDate: DateTime;
     readonly endDate: DateTime;
 }

package/dist/cjs/components/Calendar/hooks/useCalendarCellProps.js

@@ -27,16 +27,7 @@ function useCalendarCellProps(date, state) {
     const isSelectable = !isDisabled && !isUnavailable;
     const isCurrent = (0, date_utils_1.dateTime)().isSame(date, state.mode);
     const isWeekend = state.isWeekend(date);
-    let label = '';
-    if (state.mode === 'days') {
-        label = `${date.format('dddd')}, ${date.format('LL')}`;
-    }
-    else if (state.mode === 'months') {
-        label = `${date.format('MMMM YYYY')}`;
-    }
-    else if (state.mode === 'years') {
-        label = `${date.format('YYYY')}`;
-    }
+    const label = getDateLabel(date, state.mode);
     const cellProps = {
         role: 'gridcell',
         'aria-selected': isSelected ? 'true' : undefined,
@@ -51,12 +42,7 @@ function useCalendarCellProps(date, state) {
         onClick: isSelectable
             ? () => {
                 state.setFocusedDate(date);
-                if (state.mode === 'days') {
-                    state.selectDate(date);
-                }
-                else {
-                    state.zoomIn();
-                }
+                state.selectDate(date);
             }
             : undefined,
         onPointerEnter() {
@@ -77,6 +63,9 @@ function useCalendarCellProps(date, state) {
     if (state.mode === 'months') {
         formattedDate = date.format('MMM');
     }
+    else if (state.mode === 'quarters') {
+        formattedDate = date.format('[Q]Q');
+    }
     else if (state.mode === 'years') {
         formattedDate = date.format('YYYY');
     }
@@ -96,3 +85,19 @@ function useCalendarCellProps(date, state) {
     };
 }
 exports.useCalendarCellProps = useCalendarCellProps;
+function getDateLabel(date, mode) {
+    let label = '';
+    if (mode === 'days') {
+        label = `${date.format('dddd')}, ${date.format('LL')}`;
+    }
+    else if (mode === 'months') {
+        label = `${date.format('MMMM YYYY')}`;
+    }
+    else if (mode === 'quarters') {
+        label = `${date.format('[Q]Q YYYY')}`;
+    }
+    else if (mode === 'years') {
+        label = `${date.format('YYYY')}`;
+    }
+    return label;
+}

package/dist/cjs/components/Calendar/hooks/useCalendarGridProps.js

@@ -8,7 +8,7 @@ function useCalendarGridProps(state) {
             state.setFocused(isFocused);
         },
     });
-    const gridProps = Object.assign(Object.assign({ role: 'grid', 'aria-label': state.mode === 'years'
+    const gridProps = Object.assign(Object.assign({ role: 'grid', 'aria-label': state.mode === 'years' || state.mode === 'quarters'
             ? `${state.startDate.year()} — ${state.endDate.year()}`
             : state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY'), 'aria-disabled': state.disabled ? 'true' : undefined, 'aria-readonly': state.readOnly ? 'true' : undefined }, focusWithinProps), { onKeyDown: (e) => {
             if (e.key === 'ArrowRight') {
@@ -42,12 +42,7 @@ function useCalendarGridProps(state) {
                 state.zoomIn();
             }
             else if (e.key === 'Enter' || e.key === ' ') {
-                if (state.mode === 'days') {
-                    state.selectFocusedDate();
-                }
-                else {
-                    state.setMode(state.mode === 'months' ? 'days' : 'months');
-                }
+                state.selectDate(state.focusedDate);
             }
         } });
     return {

package/dist/cjs/components/Calendar/hooks/useCalendarProps.js

@@ -10,7 +10,7 @@ const i18n_1 = require("../i18n");
 const buttonDisabledClassName = 'yc-button_disabled g-button_disabled';
 // eslint-disable-next-line complexity
 function useCalendarProps(props, state) {
-    const title = state.mode === 'years'
+    const title = state.mode === 'years' || state.mode === 'quarters'
         ? `${state.startDate.year()} — ${state.endDate.year()}`
         : state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY');
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
@@ -18,7 +18,10 @@ function useCalendarProps(props, state) {
         onBlurWithin: props.onBlur,
     });
     const calendarProps = Object.assign({ role: 'group', id: props.id, 'aria-label': [props['aria-label'], title].filter(Boolean).join(', '), 'aria-labelledby': props['aria-labelledby'] || undefined, 'aria-describedby': props['aria-describedby'] || undefined, 'aria-details': props['aria-details'] || undefined, 'aria-disabled': state.disabled || undefined }, focusWithinProps);
-    const modeDisabled = state.disabled || state.mode === 'years';
+    const modeIndex = state.availableModes.indexOf(state.mode);
+    const isModeLast = modeIndex + 1 === state.availableModes.length;
+    const isNextModeLast = modeIndex + 2 === state.availableModes.length;
+    const modeDisabled = state.disabled || isModeLast;
     const modeButtonProps = {
         disabled: state.disabled,
         // FIXME: do not use button class name
@@ -27,7 +30,7 @@ function useCalendarProps(props, state) {
             ? undefined
             : () => {
                 state.zoomOut();
-                if (state.mode === 'months') {
+                if (isNextModeLast) {
                     state.setFocused(true);
                 }
             },

package/dist/cjs/components/Calendar/hooks/useCalendarState.js

@@ -5,14 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendarState = void 0;
 const react_1 = __importDefault(require("react"));
-const date_utils_1 = require("@gravity-ui/date-utils");
 const useControlledState_1 = require("../../hooks/useControlledState");
+const dates_1 = require("../../utils/dates");
 const utils_1 = require("../utils");
+const defaultModes = {
+    days: true,
+    months: true,
+    quarters: false,
+    years: true,
+};
 function useCalendarState(props) {
-    const { disabled, readOnly, minValue, maxValue, timeZone } = 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);
-    const currentMode = mode || 'days';
+    const availableModes = utils_1.calendarLayouts.filter((l) => modes[l]);
+    const minMode = availableModes[0] || 'days';
+    const currentMode = mode && availableModes.includes(mode) ? mode : minMode;
     const focusedValue = react_1.default.useMemo(() => {
         if (!props.focusedValue) {
             return props.focusedValue;
@@ -20,17 +28,18 @@ function useCalendarState(props) {
         return (0, utils_1.constrainValue)(props.focusedValue, minValue, maxValue);
     }, [props.focusedValue, minValue, maxValue]);
     const defaultFocusedValue = react_1.default.useMemo(() => {
-        const defaultValue = (props.defaultFocusedValue ? props.defaultFocusedValue : value) || (0, date_utils_1.dateTime)({ timeZone });
+        const defaultValue = (props.defaultFocusedValue ? props.defaultFocusedValue : value) ||
+            (0, dates_1.createPlaceholderValue)({ timeZone }).startOf(minMode);
         return (0, utils_1.constrainValue)(defaultValue, minValue, maxValue);
-    }, [maxValue, minValue, props.defaultFocusedValue, timeZone, value]);
+    }, [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, date_utils_1.dateTime)({ timeZone }), minValue, maxValue);
+    const focusedDate = focusedDateInner !== null && focusedDateInner !== void 0 ? focusedDateInner : (0, utils_1.constrainValue)((0, dates_1.createPlaceholderValue)({ timeZone }).startOf(minMode), 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));
     }
     function focusCell(date) {
-        setFocusedDate((0, utils_1.constrainValue)(date, minValue, maxValue));
+        setFocusedDate((0, utils_1.constrainValue)(date.startOf(currentMode), minValue, maxValue));
     }
     const [isFocused, setFocused] = react_1.default.useState(props.autoFocus || false);
     const startDate = getStartDate(focusedDate, currentMode);
@@ -41,13 +50,21 @@ function useCalendarState(props) {
         value,
         setValue,
         timeZone,
-        selectDate(date) {
-            if (!disabled && !readOnly) {
-                const newValue = (0, utils_1.constrainValue)(date, minValue, maxValue);
-                if (this.isCellUnavailable(newValue)) {
-                    return;
+        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);
+                    if (force && currentMode !== minMode) {
+                        setMode(minMode);
+                    }
+                }
+                else {
+                    this.zoomIn();
                 }
-                setValue((0, utils_1.constrainValue)(newValue, minValue, maxValue));
             }
         },
         minValue,
@@ -60,41 +77,53 @@ function useCalendarState(props) {
             setFocused(true);
         },
         focusNextCell() {
-            focusCell(focusedDate.add({ [this.mode]: 1 }));
+            focusCell(focusedDate.add(1, this.mode));
         },
         focusPreviousCell() {
-            focusCell(focusedDate.subtract({ [this.mode]: 1 }));
+            focusCell(focusedDate.subtract(1, this.mode));
         },
         focusNextRow() {
             if (this.mode === 'days') {
                 focusCell(focusedDate.add(1, 'week'));
             }
+            else if (this.mode === 'quarters') {
+                focusCell(focusedDate.add(1, 'years'));
+            }
             else {
-                focusCell(focusedDate.add({ [this.mode]: 3 }));
+                focusCell(focusedDate.add(3, this.mode));
             }
         },
         focusPreviousRow() {
             if (this.mode === 'days') {
                 focusCell(focusedDate.subtract(1, 'week'));
             }
+            else if (this.mode === 'quarters') {
+                focusCell(focusedDate.subtract(1, 'years'));
+            }
             else {
-                focusCell(focusedDate.subtract({ [this.mode]: 3 }));
+                focusCell(focusedDate.subtract(3, this.mode));
             }
         },
         focusNextPage(larger) {
             if (this.mode === 'days') {
                 focusCell(focusedDate.add({ months: larger ? 12 : 1 }));
             }
+            else if (this.mode === 'quarters') {
+                focusCell(focusedDate.add(4, 'years'));
+            }
             else {
-                focusCell(focusedDate.add({ [this.mode]: 12 }));
+                focusCell(focusedDate.add(12, this.mode));
             }
         },
         focusPreviousPage(larger) {
             if (this.mode === 'days') {
                 focusCell(focusedDate.subtract({ months: larger ? 12 : 1 }));
             }
+            else if (this.mode === 'quarters') {
+                focusCell(focusedDate.subtract(4, 'years'));
+            }
             else {
-                focusCell(focusedDate.subtract({ [this.mode]: 12 }));
+                focusCell(focusedDate.subtract(12, this.mode));
             }
         },
         focusSectionStart() {
@@ -104,13 +133,19 @@ function useCalendarState(props) {
             focusCell(getEndDate(focusedDate, this.mode));
         },
         zoomIn() {
-            this.setMode(this.mode === 'years' ? 'months' : 'days');
+            const index = availableModes.indexOf(this.mode) - 1;
+            if (index >= 0) {
+                this.setMode(availableModes[index]);
+            }
         },
         zoomOut() {
-            this.setMode(this.mode === 'days' ? 'months' : 'years');
+            const index = availableModes.indexOf(this.mode) + 1;
+            if (index < availableModes.length) {
+                this.setMode(availableModes[index]);
+            }
         },
         selectFocusedDate() {
-            this.selectDate(focusedDate);
+            this.selectDate(focusedDate, true);
         },
         isFocused,
         setFocused,
@@ -118,11 +153,11 @@ function useCalendarState(props) {
             return isInvalid(date, this.minValue, this.maxValue, this.mode);
         },
         isPreviousPageInvalid() {
-            const prev = this.startDate.add({ days: -1 });
+            const prev = this.startDate.subtract(1, 'day');
             return this.isInvalid(prev);
         },
         isNextPageInvalid() {
-            const next = this.endDate.add({ days: 1 });
+            const next = this.endDate.endOf(this.mode).add(1, 'day');
             return this.isInvalid(next);
         },
         isSelected(date) {
@@ -131,7 +166,7 @@ function useCalendarState(props) {
                 !this.isCellDisabled(date));
         },
         isCellUnavailable(date) {
-            if (this.mode === 'days') {
+            if (this.mode === minMode) {
                 return Boolean(props.isDateUnavailable && props.isDateUnavailable(date));
             }
             else {
@@ -149,6 +184,7 @@ function useCalendarState(props) {
         },
         mode: currentMode,
         setMode,
+        availableModes,
     };
 }
 exports.useCalendarState = useCalendarState;
@@ -159,6 +195,10 @@ function getStartDate(date, mode) {
     if (mode === 'months') {
         return date.startOf('year');
     }
+    if (mode === 'quarters') {
+        const year = Math.floor(date.year() / 4) * 4;
+        return date.startOf('year').set('year', year);
+    }
     const year = Math.floor(date.year() / 12) * 12;
     return date.startOf('year').set('year', year);
 }
@@ -167,9 +207,12 @@ function getEndDate(date, mode) {
         return date.endOf('month').startOf('day');
     }
     if (mode === 'months') {
-        return date.endOf('month').startOf('day');
+        return date.endOf('year').startOf('month');
     }
     const startDate = getStartDate(date, mode);
+    if (mode === 'quarters') {
+        return startDate.add(15, 'quarters');
+    }
     return startDate.add({ [mode]: 11 });
 }
 function isInvalid(date, minValue, maxValue, mode = 'days') {

package/dist/cjs/components/Calendar/hooks/useRangeCalendarState.js

@@ -26,10 +26,18 @@ function useRangeCalendarState(props) {
     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 highlightedRange = anchorDate
-        ? makeRange(anchorDate, calendar.focusedDate)
-        : (_b = (value && makeRange(value.start, value.end))) !== null && _b !== void 0 ? _b : undefined;
-    const selectDate = (date) => {
-        if (props.disabled || props.readOnly) {
+        ? makeRange(anchorDate, calendar.focusedDate, calendar.mode)
+        : (_b = (value && makeRange(value.start, value.end, calendar.mode))) !== null && _b !== void 0 ? _b : undefined;
+    const minMode = calendar.availableModes[0];
+    const selectDate = (date, force = false) => {
+        if (props.disabled) {
+            return;
+        }
+        if (!force && calendar.mode !== minMode) {
+            calendar.zoomIn();
+            return;
+        }
+        if (props.readOnly) {
             return;
         }
         date = (0, utils_1.constrainValue)(date, props.minValue, props.maxValue);
@@ -37,7 +45,7 @@ function useRangeCalendarState(props) {
             return;
         }
         if (anchorDate) {
-            const range = makeRange(anchorDate, date);
+            const range = makeRange(anchorDate, date, calendar.mode);
             setValue(range);
             setAnchorDateState(undefined);
         }
@@ -49,9 +57,6 @@ function useRangeCalendarState(props) {
         setValue,
         selectDate,
         anchorDate, setAnchorDate: setAnchorDateState, highlightedRange,
-        selectFocusedDate() {
-            selectDate(calendar.focusedDate);
-        },
         isSelected(date) {
             if (!highlightedRange) {
                 return false;
@@ -68,15 +73,15 @@ function useRangeCalendarState(props) {
         } });
 }
 exports.useRangeCalendarState = useRangeCalendarState;
-function makeRange(start, end) {
+function makeRange(start, end, mode) {
     if (start.isBefore(end)) {
         return {
             start,
-            end,
+            end: end.endOf(mode),
         };
     }
     return {
         start: end,
-        end: start,
+        end: start.endOf(mode),
     };
 }

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

@@ -1,4 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
+import type { CalendarLayout } from './hooks/types';
 export declare function constrainValue(value: DateTime, minValue: DateTime | undefined, maxValue: DateTime | undefined): DateTime;
-export declare function getDaysInPeriod(startDate: DateTime, _endDate: DateTime, mode: 'days' | 'months' | 'years'): DateTime[];
+export declare function getDaysInPeriod(startDate: DateTime, _endDate: DateTime, mode: CalendarLayout): DateTime[];
 export declare function getWeekDays(): DateTime[];
+export declare const calendarLayouts: CalendarLayout[];

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getWeekDays = exports.getDaysInPeriod = exports.constrainValue = void 0;
+exports.calendarLayouts = exports.getWeekDays = exports.getDaysInPeriod = exports.constrainValue = void 0;
 const date_utils_1 = require("@gravity-ui/date-utils");
 function constrainValue(value, minValue, maxValue) {
     if (minValue && value.isBefore(minValue)) {
@@ -20,6 +20,11 @@ function getDaysInPeriod(startDate, _endDate, mode) {
             days.push(currentDate.add({ days: i }));
         }
     }
+    else if (mode === 'quarters') {
+        for (let i = 0; i < 16; i++) {
+            days.push(startDate.add(i, 'quarters'));
+        }
+    }
     else {
         for (let i = 0; i < 12; i++) {
             days.push(startDate.add({ [mode]: i }));
@@ -38,3 +43,4 @@ function getWeekDays() {
     return weekDays;
 }
 exports.getWeekDays = getWeekDays;
+exports.calendarLayouts = ['days', 'months', 'quarters', 'years'];

package/dist/cjs/components/DateField/hooks/useDateFieldProps.js

@@ -86,12 +86,16 @@ function useDateFieldProps(state, props) {
                 if (state.selectedSectionIndexes !== null) {
                     return;
                 }
-                const input = inputRef.current;
+                const input = e.target;
+                const isAutofocus = !inputRef.current;
                 setTimeout(() => {
                     if (!input || input !== inputRef.current) {
                         return;
                     }
-                    if (
+                    if (isAutofocus) {
+                        state.focusSectionInPosition(0);
+                    }
+                    else if (
                     // avoid selecting all sections when focusing empty field without value
                     input.value.length &&
                         Number(input.selectionEnd) - Number(input.selectionStart) ===
@@ -121,11 +125,11 @@ function useDateFieldProps(state, props) {
                 }
                 else if (e.key === 'Home') {
                     e.preventDefault();
-                    state.focusFirstSection();
+                    state.decrementToMin();
                 }
                 else if (e.key === 'End') {
                     e.preventDefault();
-                    state.focusLastSection();
+                    state.incrementToMax();
                 }
                 else if (e.key === 'ArrowUp' && !e.altKey) {
                     e.preventDefault();
@@ -169,32 +173,35 @@ function useDateFieldProps(state, props) {
                 onBeforeInput(e) {
                     e.preventDefault();
                     // @ts-expect-error
-                    const key = e.nativeEvent.data;
-                    // eslint-disable-next-line no-eq-null, eqeqeq
-                    if (key != null) {
+                    const key = e.data;
+                    if (key !== undefined && key !== null) {
                         state.onInput(key);
                     }
                 },
                 onPaste(e) {
+                    e.preventDefault();
                     if (state.readOnly) {
-                        e.preventDefault();
                         return;
                     }
                     const pastedValue = e.clipboardData.getData('text');
-                    if (state.setValueFromString(pastedValue)) {
-                        e.preventDefault();
-                    }
-                    else if (state.selectedSectionIndexes &&
+                    if (state.selectedSectionIndexes &&
                         state.selectedSectionIndexes.startIndex ===
                             state.selectedSectionIndexes.endIndex) {
                         const activeSection = state.sections[state.selectedSectionIndexes.startIndex];
+                        const digitsOnly = /^\d+$/.test(pastedValue);
+                        const lettersOnly = /^[a-zA-Z]+$/.test(pastedValue);
                         const isValidValue = Boolean(activeSection) &&
-                            ((activeSection.contentType === 'digit' && /^\d+$/.test(pastedValue)) ||
-                                activeSection.contentType === 'letter');
-                        if (!isValidValue) {
-                            e.preventDefault();
+                            ((activeSection.contentType === 'digit' && digitsOnly) ||
+                                (activeSection.contentType === 'letter' && lettersOnly));
+                        if (isValidValue) {
+                            state.onInput(pastedValue);
+                            return;
+                        }
+                        if (digitsOnly || lettersOnly) {
+                            return;
                         }
                     }
+                    state.setValueFromString(pastedValue);
                 },
             },
         },

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

@@ -56,6 +56,8 @@ export type DateFieldState = {
      * Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
      */
     decrementPage: () => void;
+    incrementToMax: () => void;
+    decrementToMin: () => void;
     /** Clears the value of the currently selected segment, reverting it to the placeholder. */
     clearSection: () => void;
     /** Clears all segments, reverting them to the placeholder. */