@gravity-ui/date-components 1.0.0 → 1.1.0

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeDateTime = exports.isInvalid = exports.createPlaceholderValue = exports.splitFormatIntoSections = exports.expandFormat = exports.CtrlCmd = exports.isMac = void 0;
+exports.splitFormatIntoSections = exports.expandFormat = exports.CtrlCmd = exports.isMac = void 0;
 const date_utils_1 = require("@gravity-ui/date-utils");
 const i18n_1 = require("./i18n");
 exports.isMac = window.navigator.userAgent.indexOf('Macintosh') >= 0;
@@ -250,27 +250,3 @@ function getSectionOptions(section, token) {
     }
     return undefined;
 }
-function createPlaceholderValue({ placeholderValue, timeZone }) {
-    return (placeholderValue !== null && placeholderValue !== void 0 ? placeholderValue : (0, date_utils_1.dateTime)({ timeZone }).set('hour', 0).set('minute', 0).set('second', 0));
-}
-exports.createPlaceholderValue = createPlaceholderValue;
-function isInvalid(value, minValue, maxValue) {
-    if (!value) {
-        return false;
-    }
-    if (minValue && value.isBefore(minValue)) {
-        return true;
-    }
-    if (maxValue && maxValue.isBefore(value)) {
-        return true;
-    }
-    return false;
-}
-exports.isInvalid = isInvalid;
-function mergeDateTime(date, time) {
-    return date
-        .set('hours', time.hour())
-        .set('minutes', time.minute())
-        .set('seconds', time.second());
-}
-exports.mergeDateTime = mergeDateTime;

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

@@ -1,5 +1,8 @@
+import React from 'react';
+import type { CalendarProps } from '../Calendar';
 import type { AccessibilityProps, DateFieldBase, DomProps, FocusableProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
 import './DatePicker.css';
 export interface DatePickerProps extends DateFieldBase, TextInputProps, FocusableProps, KeyboardEvents, DomProps, StyleProps, AccessibilityProps {
+    children?: (props: CalendarProps) => React.ReactNode;
 }
-export declare function DatePicker({ value, defaultValue, onUpdate, className, onFocus, onBlur, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker({ value, defaultValue, onUpdate, className, onFocus, onBlur, children, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -25,7 +25,7 @@ const useDatePickerState_1 = require("./hooks/useDatePickerState");
 const utils_1 = require("./utils");
 require("./DatePicker.css");
 function DatePicker(_a) {
-    var { value, defaultValue, onUpdate, className, onFocus, onBlur } = _a, props = __rest(_a, ["value", "defaultValue", "onUpdate", "className", "onFocus", "onBlur"]);
+    var { value, defaultValue, onUpdate, className, onFocus, onBlur, children } = _a, props = __rest(_a, ["value", "defaultValue", "onUpdate", "className", "onFocus", "onBlur", "children"]);
     const anchorRef = react_1.default.useRef(null);
     const state = (0, useDatePickerState_1.useDatePickerState)(Object.assign(Object.assign({}, props), { value,
         defaultValue,
@@ -61,6 +61,6 @@ function DatePicker(_a) {
                 e.stopPropagation();
                 state.setOpen(true);
             }
-        }, children: [isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)(DesktopCalendar_1.DesktopCalendar, { anchorRef: anchorRef, props: props, state: state })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { value: fieldState.isEmpty && !isActive && props.placeholder ? '' : inputProps.value, className: (0, utils_1.b)('field', { mobile: isMobile }), hasClear: !isMobile && inputProps.hasClear, rightContent: isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendarIcon, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)(DesktopCalendar_1.DesktopCalendarButton, { props: props, state: state })) }))] })));
+        }, children: [isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)(DesktopCalendar_1.DesktopCalendar, { anchorRef: anchorRef, props: props, state: state, renderCalendar: children })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { value: fieldState.isEmpty && !isActive && props.placeholder ? '' : inputProps.value, className: (0, utils_1.b)('field', { mobile: isMobile }), hasClear: !isMobile && inputProps.hasClear, rightContent: isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendarIcon, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)(DesktopCalendar_1.DesktopCalendarButton, { props: props, state: state })) }))] })));
 }
 exports.DatePicker = DatePicker;

package/dist/cjs/components/DatePicker/DesktopCalendar.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
+import { type CalendarProps } from '../Calendar';
 import type { DatePickerProps } from './DatePicker';
 import type { DatePickerState } from './hooks/useDatePickerState';
 interface DesktopCalendarProps {
     anchorRef: React.RefObject<HTMLElement>;
     props: DatePickerProps;
     state: DatePickerState;
+    renderCalendar?: (props: CalendarProps) => React.ReactNode;
 }
-export declare function DesktopCalendar({ anchorRef, props, state }: DesktopCalendarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function DesktopCalendar({ anchorRef, props, state, renderCalendar }: DesktopCalendarProps): import("react/jsx-runtime").JSX.Element | null;
 interface DesktopCalendarButtonProps {
     props: DatePickerProps;
     state: DatePickerState;

package/dist/cjs/components/DatePicker/DesktopCalendar.js

@@ -13,7 +13,7 @@ const DateField_1 = require("../DateField");
 const getButtonSizeForInput_1 = require("../utils/getButtonSizeForInput");
 const i18n_1 = require("./i18n");
 const utils_1 = require("./utils");
-function DesktopCalendar({ anchorRef, props, state }) {
+function DesktopCalendar({ anchorRef, props, state, renderCalendar }) {
     var _a;
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
         isDisabled: !state.isOpen,
@@ -24,15 +24,24 @@ function DesktopCalendar({ anchorRef, props, state }) {
     if (!state.hasDate) {
         return null;
     }
+    const calendarProps = {
+        autoFocus: true,
+        size: props.size === 's' ? 'm' : props.size,
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        onUpdate: (d) => {
+            state.setDateValue(d);
+        },
+        defaultFocusedValue: (_a = state.dateValue) !== null && _a !== void 0 ? _a : undefined,
+        value: state.dateValue,
+        minValue: props.minValue,
+        maxValue: props.maxValue,
+        isDateUnavailable: props.isDateUnavailable,
+        timeZone: props.timeZone,
+    };
     return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: state.isOpen, anchorRef: anchorRef, onClose: () => {
             state.setOpen(false);
-        }, restoreFocus: true, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, focusWithinProps, { className: (0, utils_1.b)('popup-content'), children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                , { 
-                    // eslint-disable-next-line jsx-a11y/no-autofocus
-                    autoFocus: true, size: props.size === 's' ? 'm' : props.size, disabled: props.disabled, readOnly: props.readOnly, onUpdate: (d) => {
-                        state.setDateValue(d);
-                    }, defaultFocusedValue: (_a = state.dateValue) !== null && _a !== void 0 ? _a : undefined, value: state.dateValue, minValue: props.minValue, maxValue: props.maxValue, isDateUnavailable: props.isDateUnavailable, timeZone: props.timeZone }), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.b)('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, { className: (0, utils_1.b)('time-field'), size: props.size, readOnly: props.readOnly, value: state.timeValue, onUpdate: state.setTimeValue, placeholderValue: props.placeholderValue, minValue: props.minValue, maxValue: props.maxValue, timeZone: props.timeZone, format: state.timeFormat }) }))] })) }));
+        }, restoreFocus: true, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, focusWithinProps, { className: (0, utils_1.b)('popup-content'), tabIndex: -1, children: [typeof renderCalendar === 'function' ? (renderCalendar(calendarProps)) : ((0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps))), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.b)('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, { className: (0, utils_1.b)('time-field'), size: props.size, readOnly: props.readOnly, value: state.timeValue, onUpdate: state.setTimeValue, placeholderValue: props.placeholderValue, minValue: props.minValue, maxValue: props.maxValue, timeZone: props.timeZone, format: state.timeFormat }) }))] })) }));
 }
 exports.DesktopCalendar = DesktopCalendar;
 function DesktopCalendarButton({ props, state }) {

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

@@ -6,7 +6,7 @@ const date_utils_1 = require("@gravity-ui/date-utils");
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn");
-const utils_1 = require("../DateField/utils");
+const dates_1 = require("../utils/dates");
 const getButtonSizeForInput_1 = require("../utils/getButtonSizeForInput");
 require("./MobileCalendar.css");
 const b = (0, cn_1.block)('mobile-calendar');
@@ -31,15 +31,15 @@ function MobileCalendar({ props, state }) {
                         format: getDateFormat(type),
                         timeZone: props.timeZone,
                     })
-                    : (0, utils_1.createPlaceholderValue)({
+                    : (0, dates_1.createPlaceholderValue)({
                         placeholderValue: props.placeholderValue,
                         timeZone: props.timeZone,
                     });
                 if (state.hasTime) {
-                    newDate = (0, utils_1.mergeDateTime)(newDate, localDate);
+                    newDate = (0, dates_1.mergeDateTime)(newDate, localDate);
                 }
                 else if (state.dateValue) {
-                    newDate = (0, utils_1.mergeDateTime)(newDate, state.dateValue);
+                    newDate = (0, dates_1.mergeDateTime)(newDate, state.dateValue);
                 }
                 else {
                     newDate = newDate.set('hours', 0).set('minutes', 0).set('seconds', 0);

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

@@ -7,6 +7,7 @@ exports.useDatePickerState = void 0;
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("../../DateField/utils");
 const useControlledState_1 = require("../../hooks/useControlledState");
+const dates_1 = require("../../utils/dates");
 function useDatePickerState(props) {
     const { disabled, readOnly } = props;
     const [isOpen, setOpen] = react_1.default.useState(false);
@@ -44,7 +45,7 @@ function useDatePickerState(props) {
         if (disabled || readOnly) {
             return;
         }
-        setValue(mergeDateTime(date, time));
+        setValue((0, dates_1.mergeDateTime)(date, time));
         setSelectedDate(null);
         setSelectedTime(null);
     };
@@ -103,12 +104,6 @@ function useDatePickerState(props) {
     };
 }
 exports.useDatePickerState = useDatePickerState;
-function mergeDateTime(date, time) {
-    return date
-        .set('hours', time.hour())
-        .set('minutes', time.minute())
-        .set('seconds', time.second());
-}
 function getPlaceholderTime(placeholderValue, timeZone) {
-    return (0, utils_1.createPlaceholderValue)({ placeholderValue, timeZone });
+    return (0, dates_1.createPlaceholderValue)({ placeholderValue, timeZone });
 }

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

@@ -1,6 +1,9 @@
+import React from 'react';
+import type { CalendarProps } from '../Calendar';
 import type { AccessibilityProps, DomProps, FocusableProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
 import type { RelativeDatePickerStateOptions } from './hooks/useRelativeDatePickerState';
 import './RelativeDatePicker.css';
 export interface RelativeDatePickerProps extends RelativeDatePickerStateOptions, TextInputProps, FocusableProps, KeyboardEvents, DomProps, StyleProps, AccessibilityProps {
+    children?: (props: CalendarProps) => React.ReactNode;
 }
 export declare function RelativeDatePicker(props: RelativeDatePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -27,6 +27,6 @@ function RelativeDatePicker(props) {
                     readOnly: props.readOnly,
                     placeholderValue: props.placeholderValue,
                     timeZone: props.timeZone,
-                } })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { leftContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, modeSwitcherProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Function }) })), rightContent: (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 } }))] }) })), !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: [(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)) }))] }) })))] })));
+                } })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { leftContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, modeSwitcherProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Function }) })), rightContent: (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 } }))] }) })), !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)) }))] }) })))] })));
 }
 exports.RelativeDatePicker = RelativeDatePicker;

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

@@ -87,7 +87,13 @@ function useRelativeDatePickerProps(state, _a) {
     const handleRef = (0, uikit_1.useForkRef)(inputRef, mode === 'relative' ? relativeDateProps.controlRef : inputProps.controlRef);
     const calendarRef = react_1.default.useRef(null);
     return {
-        groupProps: Object.assign({ role: 'group' }, focusWithinProps),
+        groupProps: Object.assign(Object.assign({ role: 'group' }, focusWithinProps), { onKeyDown: (e) => {
+                if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setOpen(true);
+                }
+            } }),
         fieldProps: (0, mergeProps_1.mergeProps)(commonInputProps, mode === 'relative' ? relativeDateProps : inputProps, { controlRef: handleRef, error }),
         modeSwitcherProps: {
             size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size),

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

@@ -0,0 +1,9 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+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/dates.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeDateTime = exports.isInvalid = exports.createPlaceholderValue = void 0;
+const date_utils_1 = require("@gravity-ui/date-utils");
+function createPlaceholderValue({ placeholderValue, timeZone }) {
+    return (placeholderValue !== null && placeholderValue !== void 0 ? placeholderValue : (0, date_utils_1.dateTime)({ timeZone }).set('hour', 0).set('minute', 0).set('second', 0));
+}
+exports.createPlaceholderValue = createPlaceholderValue;
+function isInvalid(value, minValue, maxValue) {
+    if (!value) {
+        return false;
+    }
+    if (minValue && value.isBefore(minValue)) {
+        return true;
+    }
+    if (maxValue && maxValue.isBefore(value)) {
+        return true;
+    }
+    return false;
+}
+exports.isInvalid = isInvalid;
+function mergeDateTime(date, time) {
+    return date
+        .set('hours', time.hour())
+        .set('minutes', time.minute())
+        .set('seconds', time.second());
+}
+exports.mergeDateTime = mergeDateTime;

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

@@ -5,7 +5,7 @@ import { block } from '../../utils/cn';
 import { useCalendarCellProps } from './hooks/useCalendarCellProps';
 import { useCalendarGridProps } from './hooks/useCalendarGridProps';
 import { useCalendarProps } from './hooks/useCalendarProps';
-import { getDaysInPeriod, getWeekDays } from './utils';
+import { calendarLayouts, getDaysInPeriod, getWeekDays } from './utils';
 import './Calendar.css';
 const b = block('calendar');
 export const CalendarBase = React.forwardRef(function Calendar(props, ref) {
@@ -16,7 +16,8 @@ export const CalendarBase = React.forwardRef(function Calendar(props, ref) {
             state.setFocused(true);
         },
     }));
-    return (_jsxs("div", Object.assign({}, calendarProps, { className: b({ size: props.size }), children: [_jsxs("div", { className: b('header'), children: [_jsx(Button, Object.assign({}, modeButtonProps, { view: "flat", size: props.size, children: state.mode === 'years' ? (_jsx("span", { className: b('mode-label', b(`years-label`)), children: modeButtonProps.children }, "label")) : ([
+    return (_jsxs("div", Object.assign({}, calendarProps, { className: b({ size: props.size }), children: [_jsxs("div", { className: b('header'), children: [_jsx(Button, Object.assign({}, modeButtonProps, { view: "flat", size: props.size, children: state.availableModes.indexOf(state.mode) + 1 ===
+                            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 })] })));
@@ -27,8 +28,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 (calendarLayouts.indexOf(prevState.mode) > calendarLayouts.indexOf(state.mode)) {
             animation = 'zoom-out';
         }
         else {
@@ -59,13 +59,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 = getDaysInPeriod(state.startDate, state.endDate, state.mode);
-    return (_jsx("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => (_jsx("div", { className: b('grid-row'), role: "row", children: days
-                .slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)
-                .map((date) => {
-                return _jsx(CalendarCell, { date: date, state: state }, date.unix());
-            }) }, rowIndex))) }));
+    return (_jsx("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => (_jsxs("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? (_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 _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, } = useCalendarCellProps(date, state);

package/dist/esm/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/esm/components/Calendar/hooks/useCalendarCellProps.js

@@ -21,16 +21,7 @@ export function useCalendarCellProps(date, state) {
     const isSelectable = !isDisabled && !isUnavailable;
     const isCurrent = 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,
@@ -45,12 +36,7 @@ export function useCalendarCellProps(date, state) {
         onClick: isSelectable
             ? () => {
                 state.setFocusedDate(date);
-                if (state.mode === 'days') {
-                    state.selectDate(date);
-                }
-                else {
-                    state.zoomIn();
-                }
+                state.selectDate(date);
             }
             : undefined,
         onPointerEnter() {
@@ -71,6 +57,9 @@ export 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');
     }
@@ -89,3 +78,19 @@ export function useCalendarCellProps(date, state) {
         isWeekend,
     };
 }
+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/esm/components/Calendar/hooks/useCalendarGridProps.js

@@ -6,7 +6,7 @@ export 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') {
@@ -40,12 +40,7 @@ export 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/esm/components/Calendar/hooks/useCalendarProps.js

@@ -4,7 +4,7 @@ import { i18n } from '../i18n';
 const buttonDisabledClassName = 'yc-button_disabled g-button_disabled';
 // eslint-disable-next-line complexity
 export 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 } = useFocusWithin({
@@ -12,7 +12,10 @@ export 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
@@ -21,7 +24,7 @@ export function useCalendarProps(props, state) {
             ? undefined
             : () => {
                 state.zoomOut();
-                if (state.mode === 'months') {
+                if (isNextModeLast) {
                     state.setFocused(true);
                 }
             },