@gravity-ui/date-components 2.0.1 → 2.1.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/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/useDatePickerProps.js

@@ -33,9 +33,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);

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

@@ -10,6 +10,7 @@ const cn_1 = require("../../utils/cn");
 const Calendar_1 = require("../Calendar");
 const DateField_1 = require("../DateField");
 const MobileCalendar_1 = require("../DatePicker/MobileCalendar");
+const StubButton_1 = require("../DatePicker/StubButton");
 const useRelativeDatePickerProps_1 = require("./hooks/useRelativeDatePickerProps");
 const useRelativeDatePickerState_1 = require("./hooks/useRelativeDatePickerState");
 require("./RelativeDatePicker.css");
@@ -19,15 +20,16 @@ function RelativeDatePicker(props) {
     const { groupProps, fieldProps, modeSwitcherProps, calendarButtonProps, popupProps, calendarProps, timeInputProps, } = (0, useRelativeDatePickerProps_1.useRelativeDatePickerProps)(state, props);
     const anchorRef = react_1.default.useRef(null);
     const isMobile = (0, uikit_1.useMobile)();
+    const isOnlyTime = state.datePickerState.hasTime && !state.datePickerState.hasDate;
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef, className: b(null, props.className) }, groupProps, { children: [isMobile && state.mode === 'absolute' && ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { state: state.datePickerState, props: {
                     id: props.id,
                     disabled: props.disabled,
                     readOnly: props.readOnly,
                     placeholderValue: props.placeholderValue,
                     timeZone: props.timeZone,
-                } })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { controlProps: Object.assign(Object.assign({}, fieldProps.controlProps), { disabled: isMobile && state.mode === 'absolute', className: b('input', { mobile: isMobile && state.mode === 'absolute' }) }), hasClear: props.hasClear && !(isMobile && state.mode === 'absolute'), startContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, modeSwitcherProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Function }) })), endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), isMobile && state.mode === 'absolute' && ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendarIcon, { state: state.datePickerState, props: { size: props.size } }))] }) })), (0, jsx_runtime_1.jsx)("input", { type: "text", hidden: true, name: props.name, value: getNativeValue(state.value), 
+                } })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { controlProps: Object.assign(Object.assign({}, fieldProps.controlProps), { disabled: isMobile && state.mode === 'absolute', className: b('input', { mobile: isMobile && state.mode === 'absolute' }) }), hasClear: props.hasClear && !(isMobile && state.mode === 'absolute'), startContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, modeSwitcherProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Function }) })), 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 && state.mode === 'absolute' && ((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: getNativeValue(state.value), 
                 // Ignore React warning
-                onChange: () => { } }), !isMobile && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({}, popupProps, { anchorRef: anchorRef, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : ((0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps))), state.datePickerState.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, timeInputProps)) }))] }) })))] })));
+                onChange: () => { } }), !isMobile && !isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({}, popupProps, { anchorRef: anchorRef, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : ((0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps))), state.datePickerState.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, timeInputProps)) }))] }) })))] })));
 }
 exports.RelativeDatePicker = RelativeDatePicker;
 function getNativeValue(value) {

package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.js

@@ -36,7 +36,7 @@ const data = [
         get title() {
             return (0, i18n_1.i18n)('Last 5 minutes');
         },
-        from: 'now — 5m',
+        from: 'now - 5m',
         to: 'now',
     },
     {
@@ -64,8 +64,8 @@ const data = [
         get title() {
             return (0, i18n_1.i18n)('Previous month');
         },
-        from: 'now — 1M/M',
-        to: 'now — 1M/M',
+        from: 'now - 1M/M',
+        to: 'now - 1M/M',
     },
 ];
 function PresetsExamples({ size }) {

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

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

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

@@ -1,11 +1,12 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Calendar as CalendarIcon } from '@gravity-ui/icons';
+import { Calendar as CalendarIcon, Clock as ClockIcon } from '@gravity-ui/icons';
 import { Button, Icon, Popup, TextInput, useMobile } from '@gravity-ui/uikit';
 import { Calendar } from '../Calendar';
 import { DateField } from '../DateField';
-import { MobileCalendar, MobileCalendarIcon } from './MobileCalendar';
+import { MobileCalendar } from './MobileCalendar';
+import { StubButton } from './StubButton';
 import { useDatePickerProps } from './hooks/useDatePickerProps';
 import { useDatePickerState } from './hooks/useDatePickerState';
 import { b } from './utils';
@@ -16,7 +17,8 @@ export function DatePicker(_a) {
     const state = useDatePickerState(props);
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = useDatePickerProps(state, props);
     const isMobile = useMobile();
-    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [isMobile ? (_jsx(MobileCalendar, { props: props, state: state })) : (_jsx("div", { ref: anchorRef, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })) })), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, endContent: isMobile ? (_jsx(MobileCalendarIcon, { props: props, state: state })) : (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))) })), _jsx("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
+    const isOnlyTime = state.hasTime && !state.hasDate;
+    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [isMobile ? (_jsx(MobileCalendar, { props: props, state: state })) : (!isOnlyTime && (_jsx("div", { ref: anchorRef, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })) }))), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, endContent: _jsxs(React.Fragment, { children: [!isMobile && !isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), !isMobile && isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon })), isMobile && (_jsx(StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? ClockIcon : CalendarIcon }))] }) })), _jsx("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
                 // Ignore React warning
                 onChange: () => { } })] })));
 }

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

@@ -1,10 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 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 '../utils/dates';
-import { getButtonSizeForInput } from '../utils/getButtonSizeForInput';
 import './MobileCalendar.css';
 const b = block('mobile-calendar');
 export function MobileCalendar({ props, state }) {
@@ -16,7 +13,7 @@ export function MobileCalendar({ props, state }) {
     else if (state.hasTime) {
         type = 'time';
     }
-    return (_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 (_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;
@@ -53,9 +50,6 @@ export function MobileCalendar({ props, state }) {
             }
         } }));
 }
-export function MobileCalendarIcon({ props }) {
-    return (_jsx("span", { className: b({ size: getButtonSizeForInput(props.size) }), children: _jsx("span", { className: b('button'), children: _jsx(Icon, { data: CalendarIcon }) }) }));
-}
 function getDateFormat(type) {
     switch (type) {
         case 'time': {

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '@gravity-ui/uikit';
+import { block } from '../../utils/cn';
+import './StubButton.css';
+const b = block('stub-button');
+export function StubButton({ size, icon }) {
+    return (_jsx("span", { className: b({ size }), children: _jsx("span", { className: b('icon'), children: _jsx(Icon, { data: icon }) }) }));
+}

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

@@ -30,9 +30,10 @@ export 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);

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Calendar as CalendarIcon, Function as FunctionIcon } from '@gravity-ui/icons';
+import { Calendar as CalendarIcon, Clock as ClockIcon, Function as FunctionIcon, } from '@gravity-ui/icons';
 import { Button, Icon, Popup, TextInput, useMobile } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
 import { Calendar } from '../Calendar';
 import { DateField } from '../DateField';
-import { MobileCalendar, MobileCalendarIcon } from '../DatePicker/MobileCalendar';
+import { MobileCalendar } from '../DatePicker/MobileCalendar';
+import { StubButton } from '../DatePicker/StubButton';
 import { useRelativeDatePickerProps } from './hooks/useRelativeDatePickerProps';
 import { useRelativeDatePickerState } from './hooks/useRelativeDatePickerState';
 import './RelativeDatePicker.css';
@@ -15,15 +16,16 @@ export function RelativeDatePicker(props) {
     const { groupProps, fieldProps, modeSwitcherProps, calendarButtonProps, popupProps, calendarProps, timeInputProps, } = useRelativeDatePickerProps(state, props);
     const anchorRef = React.useRef(null);
     const isMobile = useMobile();
+    const isOnlyTime = state.datePickerState.hasTime && !state.datePickerState.hasDate;
     return (_jsxs("div", Object.assign({ ref: anchorRef, className: b(null, props.className) }, groupProps, { children: [isMobile && state.mode === 'absolute' && (_jsx(MobileCalendar, { state: state.datePickerState, props: {
                     id: props.id,
                     disabled: props.disabled,
                     readOnly: props.readOnly,
                     placeholderValue: props.placeholderValue,
                     timeZone: props.timeZone,
-                } })), _jsx(TextInput, Object.assign({}, fieldProps, { controlProps: Object.assign(Object.assign({}, fieldProps.controlProps), { disabled: isMobile && state.mode === 'absolute', className: b('input', { mobile: isMobile && state.mode === 'absolute' }) }), hasClear: props.hasClear && !(isMobile && state.mode === 'absolute'), startContent: _jsx(Button, Object.assign({}, modeSwitcherProps, { children: _jsx(Icon, { data: FunctionIcon }) })), endContent: _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 } }))] }) })), _jsx("input", { type: "text", hidden: true, name: props.name, value: getNativeValue(state.value), 
+                } })), _jsx(TextInput, Object.assign({}, fieldProps, { controlProps: Object.assign(Object.assign({}, fieldProps.controlProps), { disabled: isMobile && state.mode === 'absolute', className: b('input', { mobile: isMobile && state.mode === 'absolute' }) }), hasClear: props.hasClear && !(isMobile && state.mode === 'absolute'), startContent: _jsx(Button, Object.assign({}, modeSwitcherProps, { children: _jsx(Icon, { data: FunctionIcon }) })), endContent: _jsxs(React.Fragment, { children: [!isMobile && !isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), !isMobile && isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon })), isMobile && state.mode === 'absolute' && (_jsx(StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? ClockIcon : CalendarIcon }))] }) })), _jsx("input", { type: "text", hidden: true, name: props.name, value: getNativeValue(state.value), 
                 // Ignore React warning
-                onChange: () => { } }), !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)) }))] }) })))] })));
+                onChange: () => { } }), !isMobile && !isOnlyTime && (_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)) }))] }) })))] })));
 }
 function getNativeValue(value) {
     if (!value) {

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.js

@@ -32,7 +32,7 @@ const data = [
         get title() {
             return i18n('Last 5 minutes');
         },
-        from: 'now — 5m',
+        from: 'now - 5m',
         to: 'now',
     },
     {
@@ -60,8 +60,8 @@ const data = [
         get title() {
             return i18n('Previous month');
         },
-        from: 'now — 1M/M',
-        to: 'now — 1M/M',
+        from: 'now - 1M/M',
+        to: 'now - 1M/M',
     },
 ];
 function PresetsExamples({ size }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -48,7 +48,7 @@
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/date-utils": "^2.0.1",
     "@gravity-ui/icons": "^2.2.0",
-    "tslib": "2.6.2"
+    "tslib": "^2.6.2"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.22.9",