@gravity-ui/date-components 1.1.0 → 1.2.0

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

@@ -1,10 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDateFieldState = void 0;
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const date_utils_1 = require("@gravity-ui/date-utils");
 const useControlledState_1 = require("../../hooks/useControlledState");
 const dates_1 = require("../../utils/dates");
@@ -19,11 +17,6 @@ const EDITABLE_SEGMENTS = {
     dayPeriod: true,
     weekday: true,
 };
-const TYPE_MAPPING = {
-    weekday: 'day',
-    day: 'date',
-    dayPeriod: 'hour',
-};
 const PAGE_STEP = {
     year: 5,
     month: 2,
@@ -69,10 +62,7 @@ function useDateFieldState(props) {
         ? value
         : placeholderDate;
     const sectionsState = useSectionsState(sections, displayValue, validSegments);
-    const [selectedSections, setSelectedSections] = react_1.default.useState(() => {
-        var _a, _b;
-        return (_b = (_a = sectionsState.editableSections[0]) === null || _a === void 0 ? void 0 : _a.previousEditableSection) !== null && _b !== void 0 ? _b : -1;
-    });
+    const [selectedSections, setSelectedSections] = react_1.default.useState(-1);
     const selectedSectionIndexes = react_1.default.useMemo(() => {
         if (selectedSections === -1) {
             return null;
@@ -97,9 +87,14 @@ function useDateFieldState(props) {
             return;
         }
         if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
-            setDate(newValue);
+            if (!value || !newValue.isSame(value)) {
+                setDate(newValue);
+            }
         }
         else {
+            if (value) {
+                setDate(null);
+            }
             setPlaceholderDate(newValue);
         }
     }
@@ -115,12 +110,12 @@ function useDateFieldState(props) {
     }
     function setSection(section, amount) {
         markValid(section.type);
-        setValue(setSegment(section, displayValue, amount));
+        setValue((0, utils_1.setSegment)(section, displayValue, amount));
     }
     function adjustSection(sectionIndex, amount) {
         const section = sectionsState.editableSections[sectionIndex];
         if (validSegments[section.type]) {
-            setValue(addSegment(section, displayValue, amount));
+            setValue((0, utils_1.addSegment)(section, displayValue, amount));
         }
         else {
             markValid(section.type);
@@ -138,7 +133,8 @@ function useDateFieldState(props) {
         isEmpty: Object.keys(validSegments).length === 0,
         displayValue,
         setValue,
-        text: sectionsState.editableSections.map((s) => s.textValue).join(''),
+        // use ltr direction context to get predictable navigation inside input
+        text: '\u2066' + sectionsState.editableSections.map((s) => s.textValue).join('') + '\u2069',
         readOnly: props.readOnly,
         disabled: props.disabled,
         sections: sectionsState.editableSections,
@@ -285,12 +281,9 @@ function useDateFieldState(props) {
                 }
             }
             else {
-                const type = getDurationUnitFromSectionType(section.type);
+                const type = (0, utils_1.getDurationUnitFromSectionType)(section.type);
                 currentValue = displayValue.set(type, placeholder[type]());
             }
-            if (value) {
-                setDate(null);
-            }
             setValue(currentValue);
         },
         clearAll() {
@@ -308,7 +301,6 @@ function useDateFieldState(props) {
                 timeZone: props.timeZone,
             }));
         },
-        // eslint-disable-next-line complexity
         onInput(key) {
             if (this.readOnly || this.disabled) {
                 return;
@@ -417,6 +409,7 @@ function useDateFieldState(props) {
             }
         },
         setValueFromString(str) {
+            enteredKeys.current = '';
             let date = parseDate({ input: str, format, timeZone: props.timeZone });
             if ((0, date_utils_1.isValid)(date)) {
                 if (props.timeZone && !isDateStringWithTimeZone(str)) {
@@ -441,64 +434,6 @@ function parseDate(options) {
 function isDateStringWithTimeZone(str) {
     return /z$/i.test(str) || /[+-]\d\d:\d\d$/.test(str);
 }
-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);
-    }
-    else {
-        val = val + amount;
-        const min = section.minValue;
-        const max = section.maxValue;
-        if (typeof min === 'number' && typeof max === 'number') {
-            const length = max - min + 1;
-            val = ((val - min + length) % length) + min;
-        }
-    }
-    const type = getDurationUnitFromSectionType(section.type);
-    return date.set(type, val);
-}
-function setSegment(section, date, amount) {
-    const type = section.type;
-    switch (type) {
-        case 'day':
-        case 'weekday':
-        case 'month':
-        case 'year': {
-            return date.set(getDurationUnitFromSectionType(type), amount);
-        }
-        case 'dayPeriod': {
-            const hours = date.hour();
-            const wasPM = hours >= 12;
-            const isPM = amount >= 12;
-            if (isPM === wasPM) {
-                return date;
-            }
-            return date.set('hour', wasPM ? hours - 12 : hours + 12);
-        }
-        case 'hour': {
-            // In 12 hour time, ensure that AM/PM does not change
-            let sectionAmount = amount;
-            if (section.minValue === 12 || section.maxValue === 11) {
-                const hours = date.hour();
-                const wasPM = hours >= 12;
-                if (!wasPM && sectionAmount === 12) {
-                    sectionAmount = 0;
-                }
-                if (wasPM && sectionAmount < 12) {
-                    sectionAmount += 12;
-                }
-            }
-            return date.set('hour', sectionAmount);
-        }
-        case 'minute':
-        case 'second': {
-            return date.set(type, amount);
-        }
-    }
-    return date;
-}
 function getCurrentEditableSectionIndex(sections, selectedSections) {
     const currentIndex = selectedSections === 'all' || selectedSections === -1 ? 0 : selectedSections;
     const section = sections[currentIndex];
@@ -539,7 +474,7 @@ function useSectionsState(sections, value, validSegments) {
     return state;
 }
 function getEditableSections(sections, value, validSegments) {
-    let position = 0;
+    let position = 1;
     const newSections = [];
     let previousEditableSection = -1;
     for (let i = 0; i < sections.length; i++) {
@@ -548,9 +483,15 @@ function getEditableSections(sections, value, validSegments) {
         let renderedValue = section.placeholder;
         if ((isEditable && validSegments[section.type]) || section.type === 'timeZoneName') {
             renderedValue = value.format(section.format);
+            if (section.contentType === 'digit' &&
+                renderedValue.length < section.placeholder.length) {
+                renderedValue = renderedValue.padStart(section.placeholder.length, '0');
+            }
         }
+        // use bidirectional context to allow the browser autodetect text direction
+        renderedValue = '\u2068' + renderedValue + '\u2069';
         const sectionLength = renderedValue.length;
-        const newSection = Object.assign(Object.assign(Object.assign({}, section), { value: getValue(value, section.type), textValue: renderedValue, start: position, end: position + sectionLength, modified: false, previousEditableSection, nextEditableSection: previousEditableSection }), getSectionLimits(value, section.type, { hour12: isHour12(section) }));
+        const newSection = Object.assign(Object.assign(Object.assign({}, section), { value: (0, utils_1.getSectionValue)(section, value), textValue: renderedValue, start: position, end: position + sectionLength, modified: false, previousEditableSection, nextEditableSection: previousEditableSection }), (0, utils_1.getSectionLimits)(section, value));
         newSections.push(newSection);
         if (isEditable) {
             for (let j = Math.max(0, previousEditableSection); j <= i; j++) {
@@ -568,88 +509,3 @@ function getEditableSections(sections, value, validSegments) {
     }
     return newSections;
 }
-function getValue(date, type) {
-    switch (type) {
-        case 'year':
-        case 'month':
-        case 'hour':
-        case 'minute':
-        case 'second': {
-            return date[type]();
-        }
-        case 'day': {
-            return date.date();
-        }
-        case 'weekday': {
-            return date.day();
-        }
-        case 'dayPeriod': {
-            return date.hour() >= 12 ? 12 : 0;
-        }
-    }
-    return undefined;
-}
-function isHour12(section) {
-    if (section.type === 'hour') {
-        return (0, date_utils_1.dateTime)().set('hour', 15).format(section.format) !== '15';
-    }
-    return false;
-}
-function getSectionLimits(date, type, options) {
-    switch (type) {
-        case 'year': {
-            return {
-                minValue: 1,
-                maxValue: 9999,
-            };
-        }
-        case 'month': {
-            return {
-                minValue: 0,
-                maxValue: 11,
-            };
-        }
-        case 'weekday': {
-            return {
-                minValue: 0,
-                maxValue: 6,
-            };
-        }
-        case 'day': {
-            return {
-                minValue: 1,
-                maxValue: date ? date.daysInMonth() : 31,
-            };
-        }
-        case 'hour': {
-            if (options.hour12) {
-                const isPM = date.hour() >= 12;
-                return {
-                    minValue: isPM ? 12 : 0,
-                    maxValue: isPM ? 23 : 11,
-                };
-            }
-            return {
-                minValue: 0,
-                maxValue: 23,
-            };
-        }
-        case 'minute':
-        case 'second': {
-            return {
-                minValue: 0,
-                maxValue: 59,
-            };
-        }
-    }
-    return {};
-}
-function getDurationUnitFromSectionType(type) {
-    if (type === 'literal' || type === 'timeZoneName' || type === 'unknown') {
-        throw new Error(`${type} section does not have duration unit.`);
-    }
-    if (type in TYPE_MAPPING) {
-        return TYPE_MAPPING[type];
-    }
-    return type;
-}

package/dist/cjs/components/DateField/i18n/index.js

@@ -1,11 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.i18n = void 0;
+const tslib_1 = require("tslib");
 const i18n_1 = require("@gravity-ui/uikit/i18n");
 const cn_1 = require("../../../utils/cn");
-const en_json_1 = __importDefault(require("./en.json"));
-const ru_json_1 = __importDefault(require("./ru.json"));
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
 exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}date-field`);

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

@@ -1,19 +1,6 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./DateField"), exports);
-__exportStar(require("./hooks/useDateFieldState"), exports);
-__exportStar(require("./hooks/useDateFieldProps"), exports);
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DateField"), exports);
+tslib_1.__exportStar(require("./hooks/useDateFieldState"), exports);
+tslib_1.__exportStar(require("./hooks/useDateFieldProps"), exports);

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

@@ -1,5 +1,16 @@
-import type { DateFieldSectionWithoutPosition } from './types';
-export declare const isMac: boolean;
-export declare const CtrlCmd: string;
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DateFieldSection, DateFieldSectionType, DateFieldSectionWithoutPosition } from './types';
 export declare function expandFormat(format: string): string;
+export declare function getSectionLimits(section: DateFieldSectionWithoutPosition, date: DateTime): {
+    minValue: number;
+    maxValue: number;
+} | {
+    minValue?: undefined;
+    maxValue?: undefined;
+};
+export declare function getSectionValue(sections: DateFieldSectionWithoutPosition, date: DateTime): number | undefined;
+export declare function getDurationUnitFromSectionType(type: DateFieldSectionType): "year" | "month" | "day" | "date" | "hour" | "minute" | "second";
+export declare function addSegment(section: DateFieldSection, date: DateTime, amount: number): DateTime;
+export declare function setSegment(section: DateFieldSection, date: DateTime, amount: number): DateTime;
 export declare function splitFormatIntoSections(format: string): DateFieldSectionWithoutPosition[];
+export declare function cleanString(dirtyString: string): string;

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

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.splitFormatIntoSections = exports.expandFormat = exports.CtrlCmd = exports.isMac = void 0;
+exports.cleanString = exports.splitFormatIntoSections = exports.setSegment = exports.addSegment = exports.getDurationUnitFromSectionType = exports.getSectionValue = exports.getSectionLimits = exports.expandFormat = void 0;
 const date_utils_1 = require("@gravity-ui/date-utils");
 const i18n_1 = require("./i18n");
-exports.isMac = window.navigator.userAgent.indexOf('Macintosh') >= 0;
-exports.CtrlCmd = exports.isMac ? 'metaKey' : 'ctrlKey';
 function expandFormat(format) {
     const localeFormats = date_utils_1.settings.getLocaleData().formats;
     const getShortLocalizedFormatFromLongLocalizedFormat = (formatBis) => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, escapeSequence, localizedFormat) => escapeSequence || localizedFormat.slice(1));
@@ -81,6 +79,173 @@ function getDateSectionConfigFromFormatToken(formatToken) {
 function isFourDigitYearFormat(format) {
     return (0, date_utils_1.dateTime)().format(format).length === 4;
 }
+function isHour12(format) {
+    return (0, date_utils_1.dateTime)().set('hour', 15).format(format) !== '15';
+}
+function getSectionLimits(section, date) {
+    const { type, format } = section;
+    switch (type) {
+        case 'year': {
+            const isFourDigit = isFourDigitYearFormat(format);
+            return {
+                minValue: isFourDigit ? 1 : 0,
+                maxValue: isFourDigit ? 9999 : 99,
+            };
+        }
+        case 'month': {
+            return {
+                minValue: 0,
+                maxValue: 11,
+            };
+        }
+        case 'weekday': {
+            return {
+                minValue: 0,
+                maxValue: 6,
+            };
+        }
+        case 'day': {
+            return {
+                minValue: 1,
+                maxValue: date ? date.daysInMonth() : 31,
+            };
+        }
+        case 'hour': {
+            if (isHour12(format)) {
+                const isPM = date.hour() >= 12;
+                return {
+                    minValue: isPM ? 12 : 0,
+                    maxValue: isPM ? 23 : 11,
+                };
+            }
+            return {
+                minValue: 0,
+                maxValue: 23,
+            };
+        }
+        case 'minute':
+        case 'second': {
+            return {
+                minValue: 0,
+                maxValue: 59,
+            };
+        }
+    }
+    return {};
+}
+exports.getSectionLimits = getSectionLimits;
+function getSectionValue(sections, date) {
+    const type = sections.type;
+    switch (type) {
+        case 'year': {
+            return isFourDigitYearFormat(sections.format)
+                ? date.year()
+                : Number(date.format(sections.format));
+        }
+        case 'month':
+        case 'hour':
+        case 'minute':
+        case 'second': {
+            return date[type]();
+        }
+        case 'day': {
+            return date.date();
+        }
+        case 'weekday': {
+            return date.day();
+        }
+        case 'dayPeriod': {
+            return date.hour() >= 12 ? 12 : 0;
+        }
+    }
+    return undefined;
+}
+exports.getSectionValue = getSectionValue;
+const TYPE_MAPPING = {
+    weekday: 'day',
+    day: 'date',
+    dayPeriod: 'hour',
+};
+function getDurationUnitFromSectionType(type) {
+    if (type === 'literal' || type === 'timeZoneName' || type === 'unknown') {
+        throw new Error(`${type} section does not have duration unit.`);
+    }
+    if (type in TYPE_MAPPING) {
+        return TYPE_MAPPING[type];
+    }
+    return type;
+}
+exports.getDurationUnitFromSectionType = getDurationUnitFromSectionType;
+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);
+    }
+    else {
+        val = val + amount;
+        const min = section.minValue;
+        const max = section.maxValue;
+        if (typeof min === 'number' && typeof max === 'number') {
+            const length = max - min + 1;
+            val = ((val - min + length) % length) + min;
+        }
+    }
+    if (section.type === 'year' && !isFourDigitYearFormat(section.format)) {
+        val = (0, date_utils_1.dateTime)({ input: `${val}`.padStart(2, '0'), format: section.format }).year();
+    }
+    const type = getDurationUnitFromSectionType(section.type);
+    return date.set(type, val);
+}
+exports.addSegment = addSegment;
+function setSegment(section, date, amount) {
+    const type = section.type;
+    switch (type) {
+        case 'year': {
+            return date.set('year', isFourDigitYearFormat(section.format)
+                ? amount
+                : (0, date_utils_1.dateTime)({
+                    input: `${amount}`.padStart(2, '0'),
+                    format: section.format,
+                }).year());
+        }
+        case 'day':
+        case 'weekday':
+        case 'month': {
+            return date.set(getDurationUnitFromSectionType(type), amount);
+        }
+        case 'dayPeriod': {
+            const hours = date.hour();
+            const wasPM = hours >= 12;
+            const isPM = amount >= 12;
+            if (isPM === wasPM) {
+                return date;
+            }
+            return date.set('hour', wasPM ? hours - 12 : hours + 12);
+        }
+        case 'hour': {
+            // In 12 hour time, ensure that AM/PM does not change
+            let sectionAmount = amount;
+            if (section.minValue === 12 || section.maxValue === 11) {
+                const hours = date.hour();
+                const wasPM = hours >= 12;
+                if (!wasPM && sectionAmount === 12) {
+                    sectionAmount = 0;
+                }
+                if (wasPM && sectionAmount < 12) {
+                    sectionAmount += 12;
+                }
+            }
+            return date.set('hour', sectionAmount);
+        }
+        case 'minute':
+        case 'second': {
+            return date.set(type, amount);
+        }
+    }
+    return date;
+}
+exports.setSegment = setSegment;
 function doesSectionHaveLeadingZeros(contentType, sectionType, format) {
     if (contentType !== 'digit') {
         return false;
@@ -250,3 +415,7 @@ function getSectionOptions(section, token) {
     }
     return undefined;
 }
+function cleanString(dirtyString) {
+    return dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
+}
+exports.cleanString = cleanString;

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

@@ -1,6 +1,7 @@
 .g-date-date-picker {
   position: relative;
   display: inline-block;
+  outline: none;
 }
 .g-date-date-picker__field {
   width: 100%;
@@ -8,6 +9,11 @@
 .g-date-date-picker__field_mobile {
   pointer-events: none;
 }
+.g-date-date-picker__popup-anchor {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+}
 .g-date-date-picker__popup-content {
   outline: none;
 }

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { CalendarProps } from '../Calendar';
+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, children, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker({ value, defaultValue, onUpdate, className, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,66 +1,26 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = void 0;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
+const Calendar_1 = require("../Calendar");
 const DateField_1 = require("../DateField");
-const DesktopCalendar_1 = require("./DesktopCalendar");
 const MobileCalendar_1 = require("./MobileCalendar");
+const useDatePickerProps_1 = require("./hooks/useDatePickerProps");
 const useDatePickerState_1 = require("./hooks/useDatePickerState");
 const utils_1 = require("./utils");
 require("./DatePicker.css");
 function DatePicker(_a) {
-    var { value, defaultValue, onUpdate, className, onFocus, onBlur, children } = _a, props = __rest(_a, ["value", "defaultValue", "onUpdate", "className", "onFocus", "onBlur", "children"]);
+    var { value, defaultValue, onUpdate, className } = _a, props = tslib_1.__rest(_a, ["value", "defaultValue", "onUpdate", "className"]);
     const anchorRef = react_1.default.useRef(null);
     const state = (0, useDatePickerState_1.useDatePickerState)(Object.assign(Object.assign({}, props), { value,
         defaultValue,
         onUpdate }));
+    const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = (0, useDatePickerProps_1.useDatePickerProps)(state, props);
     const [isMobile] = (0, uikit_1.useMobile)();
-    const [isActive, setActive] = react_1.default.useState(false);
-    const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
-        onFocusWithin: onFocus,
-        onBlurWithin: onBlur,
-        onFocusWithinChange(isFocusWithin) {
-            setActive(isFocusWithin);
-        },
-    });
-    const fieldState = (0, DateField_1.useDateFieldState)({
-        value: state.value,
-        onUpdate: state.setValue,
-        disabled: state.disabled,
-        readOnly: state.readOnly,
-        validationState: props.validationState,
-        minValue: props.minValue,
-        maxValue: props.maxValue,
-        isDateUnavailable: props.isDateUnavailable,
-        format: state.format,
-        placeholderValue: props.placeholderValue,
-        timeZone: props.timeZone,
-    });
-    const { inputProps } = (0, DateField_1.useDateFieldProps)(fieldState, props);
-    return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef, className: (0, utils_1.b)(null, className), style: props.style }, focusWithinProps, { role: "group", "aria-disabled": state.disabled || undefined, onKeyDown: (e) => {
-            if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
-                e.preventDefault();
-                e.stopPropagation();
-                state.setOpen(true);
-            }
-        }, children: [isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)(DesktopCalendar_1.DesktopCalendar, { anchorRef: anchorRef, props: props, state: state, renderCalendar: children })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { value: fieldState.isEmpty && !isActive && props.placeholder ? '' : inputProps.value, className: (0, utils_1.b)('field', { mobile: isMobile }), hasClear: !isMobile && inputProps.hasClear, rightContent: isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendarIcon, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)(DesktopCalendar_1.DesktopCalendarButton, { props: props, state: state })) }))] })));
+    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, rightContent: 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 }) }))) }))] })));
 }
 exports.DatePicker = DatePicker;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ButtonProps, PopupProps, TextInputProps } from '@gravity-ui/uikit';
+import type { Calendar } from '../../Calendar';
+import type { DateFieldProps } from '../../DateField';
+import type { DatePickerProps } from '../DatePicker';
+import type { DatePickerState } from './useDatePickerState';
+interface InnerRelativeDatePickerProps {
+    groupProps: React.HTMLAttributes<unknown> & {
+        ref: React.Ref<any>;
+    };
+    fieldProps: TextInputProps;
+    calendarButtonProps: ButtonProps & {
+        ref: React.Ref<HTMLButtonElement>;
+    };
+    popupProps: PopupProps;
+    calendarProps: React.ComponentProps<typeof Calendar>;
+    timeInputProps: DateFieldProps;
+}
+export declare function useDatePickerProps(state: DatePickerState, { onFocus, onBlur, ...props }: DatePickerProps): InnerRelativeDatePickerProps;
+export {};