@gravity-ui/date-components 1.0.0 → 1.1.0

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

@@ -1,12 +1,20 @@
 import React from 'react';
-import { dateTime } from '@gravity-ui/date-utils';
 import { useControlledState } from '../../hooks/useControlledState';
-import { constrainValue } from '../utils';
+import { createPlaceholderValue } from '../../utils/dates';
+import { calendarLayouts, constrainValue } from '../utils';
+const defaultModes = {
+    days: true,
+    months: true,
+    quarters: false,
+    years: true,
+};
 export function useCalendarState(props) {
-    const { disabled, readOnly, minValue, maxValue, timeZone } = props;
+    const { disabled, readOnly, minValue, maxValue, timeZone, modes = defaultModes } = props;
     const [value, setValue] = useControlledState(props.value, props.defaultValue, props.onUpdate);
     const [mode, setMode] = useControlledState(props.mode, props.defaultMode, props.onUpdateMode);
-    const currentMode = mode || 'days';
+    const availableModes = calendarLayouts.filter((l) => modes[l]);
+    const minMode = availableModes[0] || 'days';
+    const currentMode = mode && availableModes.includes(mode) ? mode : minMode;
     const focusedValue = React.useMemo(() => {
         if (!props.focusedValue) {
             return props.focusedValue;
@@ -14,17 +22,18 @@ export function useCalendarState(props) {
         return constrainValue(props.focusedValue, minValue, maxValue);
     }, [props.focusedValue, minValue, maxValue]);
     const defaultFocusedValue = React.useMemo(() => {
-        const defaultValue = (props.defaultFocusedValue ? props.defaultFocusedValue : value) || dateTime({ timeZone });
+        const defaultValue = (props.defaultFocusedValue ? props.defaultFocusedValue : value) ||
+            createPlaceholderValue({ timeZone }).startOf(minMode);
         return constrainValue(defaultValue, minValue, maxValue);
-    }, [maxValue, minValue, props.defaultFocusedValue, timeZone, value]);
+    }, [maxValue, minValue, props.defaultFocusedValue, timeZone, value, minMode]);
     const [focusedDateInner, setFocusedDate] = useControlledState(focusedValue, defaultFocusedValue, props.onFocusUpdate);
-    const focusedDate = focusedDateInner !== null && focusedDateInner !== void 0 ? focusedDateInner : constrainValue(dateTime({ timeZone }), minValue, maxValue);
+    const focusedDate = focusedDateInner !== null && focusedDateInner !== void 0 ? focusedDateInner : constrainValue(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(constrainValue(focusedDate, minValue, maxValue));
     }
     function focusCell(date) {
-        setFocusedDate(constrainValue(date, minValue, maxValue));
+        setFocusedDate(constrainValue(date.startOf(currentMode), minValue, maxValue));
     }
     const [isFocused, setFocused] = React.useState(props.autoFocus || false);
     const startDate = getStartDate(focusedDate, currentMode);
@@ -35,13 +44,21 @@ export function useCalendarState(props) {
         value,
         setValue,
         timeZone,
-        selectDate(date) {
-            if (!disabled && !readOnly) {
-                const newValue = constrainValue(date, minValue, maxValue);
-                if (this.isCellUnavailable(newValue)) {
-                    return;
+        selectDate(date, force = false) {
+            if (!disabled) {
+                if (!readOnly && (force || this.mode === minMode)) {
+                    const newValue = constrainValue(date, minValue, maxValue);
+                    if (this.isCellUnavailable(newValue)) {
+                        return;
+                    }
+                    setValue(newValue);
+                    if (force && currentMode !== minMode) {
+                        setMode(minMode);
+                    }
+                }
+                else {
+                    this.zoomIn();
                 }
-                setValue(constrainValue(newValue, minValue, maxValue));
             }
         },
         minValue,
@@ -54,41 +71,53 @@ export 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() {
@@ -98,13 +127,19 @@ export 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,
@@ -112,11 +147,11 @@ export 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) {
@@ -125,7 +160,7 @@ export function useCalendarState(props) {
                 !this.isCellDisabled(date));
         },
         isCellUnavailable(date) {
-            if (this.mode === 'days') {
+            if (this.mode === minMode) {
                 return Boolean(props.isDateUnavailable && props.isDateUnavailable(date));
             }
             else {
@@ -143,6 +178,7 @@ export function useCalendarState(props) {
         },
         mode: currentMode,
         setMode,
+        availableModes,
     };
 }
 function getStartDate(date, mode) {
@@ -152,6 +188,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);
 }
@@ -160,9 +200,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/esm/components/Calendar/hooks/useRangeCalendarState.js

@@ -20,8 +20,8 @@ export function useRangeCalendarState(props) {
     const [anchorDate, setAnchorDateState] = React.useState();
     const calendar = 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;
@@ -31,7 +31,7 @@ export function useRangeCalendarState(props) {
             return;
         }
         if (anchorDate) {
-            const range = makeRange(anchorDate, date);
+            const range = makeRange(anchorDate, date, calendar.mode);
             setValue(range);
             setAnchorDateState(undefined);
         }
@@ -61,15 +61,15 @@ export function useRangeCalendarState(props) {
             }
         } });
 }
-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/esm/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/esm/components/Calendar/utils.js

@@ -16,6 +16,11 @@ export 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 }));
@@ -32,3 +37,4 @@ export function getWeekDays() {
     }
     return weekDays;
 }
+export const calendarLayouts = ['days', 'months', 'quarters', 'years'];

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

@@ -115,11 +115,11 @@ export 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/esm/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/esm/components/DateField/hooks/useDateFieldState.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { dateTime, isValid } from '@gravity-ui/date-utils';
 import { useControlledState } from '../../hooks/useControlledState';
-import { createPlaceholderValue, isInvalid, mergeDateTime, splitFormatIntoSections } from '../utils';
+import { createPlaceholderValue, isInvalid, mergeDateTime } from '../../utils/dates';
+import { splitFormatIntoSections } from '../utils';
 const EDITABLE_SEGMENTS = {
     year: true,
     month: true,
@@ -219,6 +220,32 @@ export 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;

package/dist/esm/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/esm/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 {};

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

@@ -245,24 +245,3 @@ function getSectionOptions(section, token) {
     }
     return undefined;
 }
-export function createPlaceholderValue({ placeholderValue, timeZone }) {
-    return (placeholderValue !== null && placeholderValue !== void 0 ? placeholderValue : dateTime({ timeZone }).set('hour', 0).set('minute', 0).set('second', 0));
-}
-export 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;
-}
-export function mergeDateTime(date, time) {
-    return date
-        .set('hours', time.hour())
-        .set('minutes', time.minute())
-        .set('seconds', time.second());
-}

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

@@ -19,7 +19,7 @@ import { useDatePickerState } from './hooks/useDatePickerState';
 import { b } from './utils';
 import './DatePicker.css';
 export 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.useRef(null);
     const state = useDatePickerState(Object.assign(Object.assign({}, props), { value,
         defaultValue,
@@ -55,5 +55,5 @@ export function DatePicker(_a) {
                 e.stopPropagation();
                 state.setOpen(true);
             }
-        }, children: [isMobile ? (_jsx(MobileCalendar, { props: props, state: state })) : (_jsx(DesktopCalendar, { anchorRef: anchorRef, props: props, state: state })), _jsx(TextInput, Object.assign({}, inputProps, { value: fieldState.isEmpty && !isActive && props.placeholder ? '' : inputProps.value, className: b('field', { mobile: isMobile }), hasClear: !isMobile && inputProps.hasClear, rightContent: isMobile ? (_jsx(MobileCalendarIcon, { props: props, state: state })) : (_jsx(DesktopCalendarButton, { props: props, state: state })) }))] })));
+        }, children: [isMobile ? (_jsx(MobileCalendar, { props: props, state: state })) : (_jsx(DesktopCalendar, { anchorRef: anchorRef, props: props, state: state, renderCalendar: children })), _jsx(TextInput, Object.assign({}, inputProps, { value: fieldState.isEmpty && !isActive && props.placeholder ? '' : inputProps.value, className: b('field', { mobile: isMobile }), hasClear: !isMobile && inputProps.hasClear, rightContent: isMobile ? (_jsx(MobileCalendarIcon, { props: props, state: state })) : (_jsx(DesktopCalendarButton, { props: props, state: state })) }))] })));
 }

package/dist/esm/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/esm/components/DatePicker/DesktopCalendar.js

@@ -7,7 +7,7 @@ import { DateField } from '../DateField';
 import { getButtonSizeForInput } from '../utils/getButtonSizeForInput';
 import { i18n } from './i18n';
 import { b } from './utils';
-export function DesktopCalendar({ anchorRef, props, state }) {
+export function DesktopCalendar({ anchorRef, props, state, renderCalendar }) {
     var _a;
     const { focusWithinProps } = useFocusWithin({
         isDisabled: !state.isOpen,
@@ -18,15 +18,24 @@ export 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 (_jsx(Popup, { open: state.isOpen, anchorRef: anchorRef, onClose: () => {
             state.setOpen(false);
-        }, restoreFocus: true, children: _jsxs("div", Object.assign({}, focusWithinProps, { className: b('popup-content'), children: [_jsx(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 && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, { className: 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: _jsxs("div", Object.assign({}, focusWithinProps, { className: b('popup-content'), tabIndex: -1, children: [typeof renderCalendar === 'function' ? (renderCalendar(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, { className: 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 }) }))] })) }));
 }
 export function DesktopCalendarButton({ props, state }) {
     const wasOpenBeforeClickRef = React.useRef(false);

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

@@ -3,7 +3,7 @@ import { dateTime } from '@gravity-ui/date-utils';
 import { Calendar as CalendarIcon } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
-import { createPlaceholderValue, mergeDateTime } from '../DateField/utils';
+import { createPlaceholderValue, mergeDateTime } from '../utils/dates';
 import { getButtonSizeForInput } from '../utils/getButtonSizeForInput';
 import './MobileCalendar.css';
 const b = block('mobile-calendar');

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { createPlaceholderValue, splitFormatIntoSections } from '../../DateField/utils';
+import { splitFormatIntoSections } from '../../DateField/utils';
 import { useControlledState } from '../../hooks/useControlledState';
+import { createPlaceholderValue, mergeDateTime } from '../../utils/dates';
 export function useDatePickerState(props) {
     const { disabled, readOnly } = props;
     const [isOpen, setOpen] = React.useState(false);
@@ -96,12 +97,6 @@ export function useDatePickerState(props) {
         },
     };
 }
-function mergeDateTime(date, time) {
-    return date
-        .set('hours', time.hour())
-        .set('minutes', time.minute())
-        .set('seconds', time.second());
-}
 function getPlaceholderTime(placeholderValue, timeZone) {
     return createPlaceholderValue({ placeholderValue, timeZone });
 }

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

@@ -21,5 +21,5 @@ export function RelativeDatePicker(props) {
                     readOnly: props.readOnly,
                     placeholderValue: props.placeholderValue,
                     timeZone: props.timeZone,
-                } })), _jsx(TextInput, Object.assign({}, fieldProps, { leftContent: _jsx(Button, Object.assign({}, modeSwitcherProps, { children: _jsx(Icon, { data: FunctionIcon }) })), rightContent: _jsxs(React.Fragment, { children: [!isMobile && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isMobile && state.mode === 'absolute' && (_jsx(MobileCalendarIcon, { state: state.datePickerState, props: { size: props.size } }))] }) })), !isMobile && (_jsx(Popup, Object.assign({}, popupProps, { anchorRef: anchorRef, children: _jsxs("div", { className: b('popup-content'), children: [_jsx(Calendar, Object.assign({}, calendarProps)), state.datePickerState.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })))] })));
+                } })), _jsx(TextInput, Object.assign({}, fieldProps, { leftContent: _jsx(Button, Object.assign({}, modeSwitcherProps, { children: _jsx(Icon, { data: FunctionIcon }) })), rightContent: _jsxs(React.Fragment, { children: [!isMobile && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isMobile && state.mode === 'absolute' && (_jsx(MobileCalendarIcon, { state: state.datePickerState, props: { size: props.size } }))] }) })), !isMobile && (_jsx(Popup, Object.assign({}, popupProps, { anchorRef: anchorRef, children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.datePickerState.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })))] })));
 }

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

@@ -81,7 +81,13 @@ export function useRelativeDatePickerProps(state, _a) {
     const handleRef = useForkRef(inputRef, mode === 'relative' ? relativeDateProps.controlRef : inputProps.controlRef);
     const calendarRef = React.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: mergeProps(commonInputProps, mode === 'relative' ? relativeDateProps : inputProps, { controlRef: handleRef, error }),
         modeSwitcherProps: {
             size: getButtonSizeForInput(props.size),

package/dist/esm/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/esm/components/utils/dates.js

@@ -0,0 +1,22 @@
+import { dateTime } from '@gravity-ui/date-utils';
+export function createPlaceholderValue({ placeholderValue, timeZone }) {
+    return (placeholderValue !== null && placeholderValue !== void 0 ? placeholderValue : dateTime({ timeZone }).set('hour', 0).set('minute', 0).set('second', 0));
+}
+export 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;
+}
+export function mergeDateTime(date, time) {
+    return date
+        .set('hours', time.hour())
+        .set('minutes', time.minute())
+        .set('seconds', time.second());
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "license": "MIT",
   "main": "dist/cjs/index.js",