@gravity-ui/date-components 1.0.0 → 1.1.0

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,8 +26,8 @@ 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;
+        ? makeRange(anchorDate, calendar.focusedDate, calendar.mode)
+        : (_b = (value && makeRange(value.start, value.end, calendar.mode))) !== null && _b !== void 0 ? _b : undefined;
     const selectDate = (date) => {
         if (props.disabled || props.readOnly) {
             return;
@@ -37,7 +37,7 @@ function useRangeCalendarState(props) {
             return;
         }
         if (anchorDate) {
-            const range = makeRange(anchorDate, date);
+            const range = makeRange(anchorDate, date, calendar.mode);
             setValue(range);
             setAnchorDateState(undefined);
         }
@@ -68,15 +68,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

@@ -121,11 +121,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();

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. */

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

@@ -7,6 +7,7 @@ exports.useDateFieldState = 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 EDITABLE_SEGMENTS = {
     year: true,
@@ -36,7 +37,7 @@ function useDateFieldState(props) {
     var _a;
     const [value, setDate] = (0, useControlledState_1.useControlledState)(props.value, props.defaultValue, props.onUpdate);
     const [placeholderDate, setPlaceholderDate] = react_1.default.useState(() => {
-        return (0, utils_1.createPlaceholderValue)({
+        return (0, dates_1.createPlaceholderValue)({
             placeholderValue: props.placeholderValue,
             timeZone: props.timeZone,
         });
@@ -60,7 +61,7 @@ function useDateFieldState(props) {
         Object.keys(validSegments).length === Object.keys(allSegments).length) {
         validSegments = {};
         setValidSegments(validSegments);
-        setPlaceholderDate((0, utils_1.createPlaceholderValue)({ timeZone: props.timeZone }));
+        setPlaceholderDate((0, dates_1.createPlaceholderValue)({ timeZone: props.timeZone }));
     }
     const displayValue = value &&
         (0, date_utils_1.isValid)(value) &&
@@ -130,7 +131,7 @@ function useDateFieldState(props) {
     }
     const enteredKeys = react_1.default.useRef('');
     const validationState = props.validationState ||
-        ((0, utils_1.isInvalid)(value, props.minValue, props.maxValue) ? 'invalid' : undefined) ||
+        ((0, dates_1.isInvalid)(value, props.minValue, props.maxValue) ? 'invalid' : undefined) ||
         (value && ((_a = props.isDateUnavailable) === null || _a === void 0 ? void 0 : _a.call(props, value)) ? 'invalid' : undefined);
     return {
         value: value !== null && value !== void 0 ? value : null,
@@ -225,6 +226,32 @@ function useDateFieldState(props) {
                 adjustSection(sectionIndex, -(PAGE_STEP[this.sections[sectionIndex].type] || 1));
             }
         },
+        incrementToMax() {
+            if (this.readOnly || this.disabled) {
+                return;
+            }
+            enteredKeys.current = '';
+            const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
+            if (sectionIndex !== -1) {
+                const section = this.sections[sectionIndex];
+                if (typeof section.maxValue === 'number') {
+                    setSection(section, section.maxValue);
+                }
+            }
+        },
+        decrementToMin() {
+            if (this.readOnly || this.disabled) {
+                return;
+            }
+            enteredKeys.current = '';
+            const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
+            if (sectionIndex !== -1) {
+                const section = this.sections[sectionIndex];
+                if (typeof section.minValue === 'number') {
+                    setSection(section, section.minValue);
+                }
+            }
+        },
         clearSection() {
             if (this.readOnly || this.disabled) {
                 return;
@@ -241,7 +268,7 @@ function useDateFieldState(props) {
             const section = this.sections[sectionIndex];
             delete validSegments[section.type];
             setValidSegments(Object.assign({}, validSegments));
-            const placeholder = (0, utils_1.createPlaceholderValue)({
+            const placeholder = (0, dates_1.createPlaceholderValue)({
                 placeholderValue: props.placeholderValue,
                 timeZone: props.timeZone,
             });
@@ -276,7 +303,7 @@ function useDateFieldState(props) {
             if (value !== null) {
                 setDate(null);
             }
-            setValue((0, utils_1.createPlaceholderValue)({
+            setValue((0, dates_1.createPlaceholderValue)({
                 placeholderValue: props.placeholderValue,
                 timeZone: props.timeZone,
             }));
@@ -394,7 +421,7 @@ function useDateFieldState(props) {
             if ((0, date_utils_1.isValid)(date)) {
                 if (props.timeZone && !isDateStringWithTimeZone(str)) {
                     const time = parseDate({ input: str, format });
-                    date = (0, utils_1.mergeDateTime)(date, time);
+                    date = (0, dates_1.mergeDateTime)(date, time);
                 }
                 setDate(date);
                 return true;

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

@@ -1,4 +1,4 @@
-export type DateFieldSectionType = Exclude<Intl.DateTimeFormatPartTypes, 'era'>;
+export type DateFieldSectionType = Extract<Intl.DateTimeFormatPartTypes, 'day' | 'dayPeriod' | 'hour' | 'literal' | 'minute' | 'month' | 'second' | 'timeZoneName' | 'weekday' | 'year' | 'unknown'>;
 export type DateFormatTokenMap = {
     [formatToken: string]: DateFieldSectionType | {
         sectionType: DateFieldSectionType;

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

@@ -1,14 +1,5 @@
-import type { DateTime } from '@gravity-ui/date-utils';
 import type { DateFieldSectionWithoutPosition } from './types';
 export declare const isMac: boolean;
 export declare const CtrlCmd: string;
 export declare function expandFormat(format: string): string;
 export declare function splitFormatIntoSections(format: string): DateFieldSectionWithoutPosition[];
-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 {};