@gravity-ui/date-components 2.0.1 → 2.2.0

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

@@ -34,6 +34,8 @@ function useCalendarProps(props, state) {
             },
         extraProps: {
             'aria-disabled': modeDisabled ? 'true' : undefined,
+            'aria-description': getAriaDescriptionForModeButton(state.mode, state.availableModes),
+            'aria-live': 'polite',
         },
         children: title,
     };
@@ -109,3 +111,18 @@ function useCalendarProps(props, state) {
     };
 }
 exports.useCalendarProps = useCalendarProps;
+function getAriaDescriptionForModeButton(mode, availableModes) {
+    const nextModeIndex = availableModes.indexOf(mode) + 1;
+    const isModeLast = nextModeIndex === availableModes.length;
+    if (isModeLast) {
+        return undefined;
+    }
+    const ariaLabelMap = {
+        days: '',
+        months: (0, i18n_1.i18n)('Switch to months view'),
+        quarters: (0, i18n_1.i18n)('Switch to quarters view'),
+        years: (0, i18n_1.i18n)('Switch to years view'),
+    };
+    const nextMode = availableModes[nextModeIndex];
+    return ariaLabelMap[nextMode];
+}

package/dist/cjs/components/CalendarView/i18n/en.json

@@ -1,4 +1,7 @@
 {
   "Previous": "Previous",
-  "Next": "Next"
+  "Next": "Next",
+  "Switch to months view": "Switch to months view",
+  "Switch to quarters view": "Switch to quarters view",
+  "Switch to years view": "Switch to years view"
 }

package/dist/cjs/components/CalendarView/i18n/index.d.ts

@@ -1 +1 @@
-export declare const i18n: (key: "Previous" | "Next", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: (key: "Previous" | "Next" | "Switch to months view" | "Switch to quarters view" | "Switch to years view", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/cjs/components/CalendarView/i18n/ru.json

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

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

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

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

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

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

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

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

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

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

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

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

@@ -9,6 +9,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const Calendar_1 = require("../Calendar");
 const DateField_1 = require("../DateField");
 const MobileCalendar_1 = require("./MobileCalendar");
+const StubButton_1 = require("./StubButton");
 const useDatePickerProps_1 = require("./hooks/useDatePickerProps");
 const useDatePickerState_1 = require("./hooks/useDatePickerState");
 const utils_1 = require("./utils");
@@ -19,7 +20,8 @@ function DatePicker(_a) {
     const state = (0, useDatePickerState_1.useDatePickerState)(props);
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = (0, useDatePickerProps_1.useDatePickerProps)(state, props);
     const isMobile = (0, uikit_1.useMobile)();
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, utils_1.b)(null, className) }, groupProps, { children: [isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: (0, utils_1.b)('popup-anchor'), children: (0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.b)('popup-content'), children: [typeof props.children === 'function' ? (props.children(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, Object.assign({}, timeInputProps)) }))] }) })) })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: (0, utils_1.b)('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, endContent: isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendarIcon, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))) })), (0, jsx_runtime_1.jsx)("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
+    const isOnlyTime = state.hasTime && !state.hasDate;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, utils_1.b)(null, className) }, groupProps, { children: [isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { props: props, state: state })) : (!isOnlyTime && ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: (0, utils_1.b)('popup-anchor'), children: (0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.b)('popup-content'), children: [typeof props.children === 'function' ? (props.children(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, Object.assign({}, timeInputProps)) }))] }) })) }))), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: (0, utils_1.b)('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isMobile && !isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), !isMobile && isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock })), isMobile && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? icons_1.Clock : icons_1.Calendar }))] }) })), (0, jsx_runtime_1.jsx)("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
                 // Ignore React warning
                 onChange: () => { } })] })));
 }

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

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

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

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

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

@@ -1,13 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileCalendarIcon = exports.MobileCalendar = void 0;
+exports.MobileCalendar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 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 dates_1 = require("../utils/dates");
-const getButtonSizeForInput_1 = require("../utils/getButtonSizeForInput");
 require("./MobileCalendar.css");
 const b = (0, cn_1.block)('mobile-calendar');
 function MobileCalendar({ props, state }) {
@@ -19,7 +16,7 @@ function MobileCalendar({ props, state }) {
     else if (state.hasTime) {
         type = 'time';
     }
-    return ((0, jsx_runtime_1.jsx)("input", { className: b('input'), disabled: props.disabled, type: type, value: formatNative(state.dateFieldState.displayValue, type), id: props.id, min: formatNative((_a = props.minValue) === null || _a === void 0 ? void 0 : _a.timeZone(state.timeZone), type), max: formatNative((_b = props.maxValue) === null || _b === void 0 ? void 0 : _b.timeZone(state.timeZone), type), tabIndex: -1, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsx)("input", { className: b(), disabled: props.disabled, type: type, value: formatNative(state.dateFieldState.displayValue, type), id: props.id, min: formatNative((_a = props.minValue) === null || _a === void 0 ? void 0 : _a.timeZone(state.timeZone), type), max: formatNative((_b = props.maxValue) === null || _b === void 0 ? void 0 : _b.timeZone(state.timeZone), type), tabIndex: -1, onChange: (e) => {
             var _a, _b;
             if (props.readOnly) {
                 return;
@@ -57,10 +54,6 @@ function MobileCalendar({ props, state }) {
         } }));
 }
 exports.MobileCalendar = MobileCalendar;
-function MobileCalendarIcon({ props }) {
-    return ((0, jsx_runtime_1.jsx)("span", { className: b({ size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size) }), children: (0, jsx_runtime_1.jsx)("span", { className: b('button'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }) }));
-}
-exports.MobileCalendarIcon = MobileCalendarIcon;
 function getDateFormat(type) {
     switch (type) {
         case 'time': {

package/dist/cjs/components/DatePicker/StubButton.css

@@ -0,0 +1,26 @@
+.g-date-stub-button {
+  position: relative;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+}
+.g-date-stub-button_size_xs {
+  width: 20px;
+  height: 20px;
+}
+.g-date-stub-button_size_m {
+  width: 28px;
+  height: 28px;
+}
+.g-date-stub-button_size_l {
+  width: 36px;
+  height: 36px;
+}
+.g-date-stub-button__icon {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--g-color-text-secondary);
+}

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

@@ -0,0 +1,8 @@
+import type { ButtonSize, IconData } from '@gravity-ui/uikit';
+import './StubButton.css';
+interface StubButtonProps {
+    size?: ButtonSize;
+    icon: IconData;
+}
+export declare function StubButton({ size, icon }: StubButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StubButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../utils/cn");
+require("./StubButton.css");
+const b = (0, cn_1.block)('stub-button');
+function StubButton({ size, icon }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: b({ size }), children: (0, jsx_runtime_1.jsx)("span", { className: b('icon'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon }) }) }));
+}
+exports.StubButton = StubButton;

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

@@ -0,0 +1,49 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DateFieldState } from '../../DateField';
+import type { DateFieldBase } from '../../types';
+export interface DatePickerState<T = DateTime> {
+    /** The currently selected date. */
+    value: T | null;
+    /** Sets the selected date. */
+    setValue: (value: T | null) => void;
+    /**
+     * The date portion of the value. This may be set prior to `value` if the user has
+     * selected a date but has not yet selected a time.
+     */
+    dateValue: T | null;
+    /** Sets the date portion of the value. */
+    setDateValue: (value: T) => void;
+    /**
+     * The time portion of the value. This may be set prior to `value` if the user has
+     * selected a time but has not yet selected a date.
+     */
+    timeValue: T | null;
+    /** Sets the time portion of the value. */
+    setTimeValue: (value: T | null) => void;
+    /** Whether the field is read only. */
+    readOnly?: boolean;
+    /** Whether the field is disabled. */
+    disabled?: boolean;
+    /** Format of the date when rendered in the input. */
+    format: string;
+    /** Whether the date picker supports selecting a date. */
+    hasDate: boolean;
+    /** Whether the date picker supports selecting a time. */
+    hasTime: boolean;
+    /** Format of the time when rendered in the input. */
+    timeFormat?: string;
+    timeZone: string;
+    /** Whether the calendar popover is currently open. */
+    isOpen: boolean;
+    /** Sets whether the calendar popover is open. */
+    setOpen: (isOpen: boolean) => void;
+    dateFieldState: DateFieldState<T>;
+}
+export interface DatePickerStateFactoryOptions<T, O extends DateFieldBase<T>> {
+    getPlaceholderTime: (placeholderValue: DateTime | undefined, timeZone?: string) => T;
+    mergeDateTime: (date: T, time: T) => T;
+    setTimezone: (date: T, timeZone: string) => T;
+    getDateTime: (date: T | null | undefined) => DateTime | undefined;
+    useDateFieldState: (props: O) => DateFieldState<T>;
+}
+export declare function datePickerStateFactory<T, O extends DateFieldBase<T>>({ getPlaceholderTime, mergeDateTime, setTimezone, getDateTime, useDateFieldState, }: DatePickerStateFactoryOptions<T, O>): (props: O) => DatePickerState<T>;

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

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

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

@@ -1,10 +1,12 @@
 import React from 'react';
+import type { DateTime } from '@gravity-ui/date-utils';
 import type { ButtonProps, PopupProps, TextInputProps } from '@gravity-ui/uikit';
-import type { Calendar } from '../../Calendar';
+import type { CalendarInstance, CalendarProps } from '../../Calendar';
 import type { DateFieldProps } from '../../DateField';
+import type { RangeValue } from '../../types';
 import type { DatePickerProps } from '../DatePicker';
 import type { DatePickerState } from './useDatePickerState';
-interface InnerRelativeDatePickerProps {
+interface InnerDatePickerProps<T = DateTime> {
     groupProps: React.HTMLAttributes<unknown> & {
         ref: React.Ref<any>;
     };
@@ -13,8 +15,10 @@ interface InnerRelativeDatePickerProps {
         ref: React.Ref<HTMLButtonElement>;
     };
     popupProps: PopupProps;
-    calendarProps: React.ComponentProps<typeof Calendar>;
-    timeInputProps: DateFieldProps;
+    calendarProps: CalendarProps<T> & {
+        ref: React.Ref<CalendarInstance>;
+    };
+    timeInputProps: DateFieldProps<T>;
 }
-export declare function useDatePickerProps(state: DatePickerState, { onFocus, onBlur, ...props }: DatePickerProps): InnerRelativeDatePickerProps;
+export declare function useDatePickerProps<T extends DateTime | RangeValue<DateTime>>(state: DatePickerState<T>, { onFocus, onBlur, ...props }: DatePickerProps<T>): InnerDatePickerProps<T>;
 export {};

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

@@ -8,6 +8,7 @@ const DateField_1 = require("../../DateField");
 const getButtonSizeForInput_1 = require("../../utils/getButtonSizeForInput");
 const mergeProps_1 = require("../../utils/mergeProps");
 const i18n_1 = require("../i18n");
+const utils_1 = require("../utils");
 function useDatePickerProps(state, _a) {
     var { onFocus, onBlur } = _a, props = tslib_1.__rest(_a, ["onFocus", "onBlur"]);
     const [isActive, setActive] = react_1.default.useState(false);
@@ -33,9 +34,10 @@ function useDatePickerProps(state, _a) {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         });
     }
+    const onlyTime = state.hasTime && !state.hasDate;
     return {
         groupProps: Object.assign(Object.assign({ ref: groupRef, tabIndex: -1, role: 'group' }, focusWithinProps), { style: props.style, 'aria-disabled': state.disabled || undefined, onKeyDown: (e) => {
-                if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+                if (!onlyTime && e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
                     e.preventDefault();
                     e.stopPropagation();
                     state.setOpen(true);
@@ -96,7 +98,7 @@ function useDatePickerProps(state, _a) {
         },
         timeInputProps: {
             value: state.timeValue,
-            placeholderValue: state.dateFieldState.displayValue,
+            placeholderValue: (0, utils_1.getDateTimeValue)(state.dateFieldState.displayValue),
             onUpdate: state.setTimeValue,
             format: state.timeFormat,
             readOnly: state.readOnly,

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

@@ -1,45 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { DateFieldState } from '../../DateField';
 import type { DateFieldBase } from '../../types';
-export type Granularity = 'day' | 'hour' | 'minute' | 'second';
-export interface DatePickerState {
-    /** The currently selected date. */
-    value: DateTime | null;
-    /** Sets the selected date. */
-    setValue: (value: DateTime | null) => void;
-    /**
-     * The date portion of the value. This may be set prior to `value` if the user has
-     * selected a date but has not yet selected a time.
-     */
-    dateValue: DateTime | null;
-    /** Sets the date portion of the value. */
-    setDateValue: (value: DateTime) => void;
-    /**
-     * The time portion of the value. This may be set prior to `value` if the user has
-     * selected a time but has not yet selected a date.
-     */
-    timeValue: DateTime | null;
-    /** Sets the time portion of the value. */
-    setTimeValue: (value: DateTime | null) => void;
-    /** Whether the field is read only. */
-    readOnly?: boolean;
-    /** Whether the field is disabled. */
-    disabled?: boolean;
-    /** Format of the date when rendered in the input. */
-    format: string;
-    /** Whether the date picker supports selecting a date. */
-    hasDate: boolean;
-    /** Whether the date picker supports selecting a time. */
-    hasTime: boolean;
-    /** Format of the time when rendered in the input. */
-    timeFormat?: string;
-    timeZone: string;
-    /** Whether the calendar popover is currently open. */
-    isOpen: boolean;
-    /** Sets whether the calendar popover is open. */
-    setOpen: (isOpen: boolean) => void;
-    dateFieldState: DateFieldState;
-}
+export type { DatePickerState } from './datePickerStateFactory';
 export interface DatePickerStateOptions extends DateFieldBase {
 }
-export declare function useDatePickerState(props: DatePickerStateOptions): DatePickerState;
+export declare const useDatePickerState: (props: import("../../DateField").DateFieldStateOptions) => import("./datePickerStateFactory").DatePickerState<DateTime>;