@gravity-ui/date-components 1.1.0 → 1.2.0

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

@@ -1,7 +1,5 @@
 import { dateTime, settings } from '@gravity-ui/date-utils';
 import { i18n } from './i18n';
-export const isMac = window.navigator.userAgent.indexOf('Macintosh') >= 0;
-export const CtrlCmd = isMac ? 'metaKey' : 'ctrlKey';
 export function expandFormat(format) {
     const localeFormats = settings.getLocaleData().formats;
     const getShortLocalizedFormatFromLongLocalizedFormat = (formatBis) => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, escapeSequence, localizedFormat) => escapeSequence || localizedFormat.slice(1));
@@ -77,6 +75,168 @@ function getDateSectionConfigFromFormatToken(formatToken) {
 function isFourDigitYearFormat(format) {
     return dateTime().format(format).length === 4;
 }
+function isHour12(format) {
+    return dateTime().set('hour', 15).format(format) !== '15';
+}
+export 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 {};
+}
+export 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;
+}
+const TYPE_MAPPING = {
+    weekday: 'day',
+    day: 'date',
+    dayPeriod: 'hour',
+};
+export 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;
+}
+export 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 = dateTime({ input: `${val}`.padStart(2, '0'), format: section.format }).year();
+    }
+    const type = getDurationUnitFromSectionType(section.type);
+    return date.set(type, val);
+}
+export function setSegment(section, date, amount) {
+    const type = section.type;
+    switch (type) {
+        case 'year': {
+            return date.set('year', isFourDigitYearFormat(section.format)
+                ? amount
+                : 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;
+}
 function doesSectionHaveLeadingZeros(contentType, sectionType, format) {
     if (contentType !== 'digit') {
         return false;
@@ -245,3 +405,6 @@ function getSectionOptions(section, token) {
     }
     return undefined;
 }
+export function cleanString(dirtyString) {
+    return dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
+}

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

@@ -1,59 +1,22 @@
-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;
-};
+import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { TextInput, useFocusWithin, useMobile } from '@gravity-ui/uikit';
-import { useDateFieldProps, useDateFieldState } from '../DateField';
-import { DesktopCalendar, DesktopCalendarButton } from './DesktopCalendar';
+import { Calendar as CalendarIcon } 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 { useDatePickerProps } from './hooks/useDatePickerProps';
 import { useDatePickerState } from './hooks/useDatePickerState';
 import { b } from './utils';
 import './DatePicker.css';
 export 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 = __rest(_a, ["value", "defaultValue", "onUpdate", "className"]);
     const anchorRef = React.useRef(null);
     const state = useDatePickerState(Object.assign(Object.assign({}, props), { value,
         defaultValue,
         onUpdate }));
+    const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = useDatePickerProps(state, props);
     const [isMobile] = useMobile();
-    const [isActive, setActive] = React.useState(false);
-    const { focusWithinProps } = useFocusWithin({
-        onFocusWithin: onFocus,
-        onBlurWithin: onBlur,
-        onFocusWithinChange(isFocusWithin) {
-            setActive(isFocusWithin);
-        },
-    });
-    const fieldState = 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 } = useDateFieldProps(fieldState, props);
-    return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    _jsxs("div", Object.assign({ ref: anchorRef, className: 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 ? (_jsx(MobileCalendar, { props: props, state: state })) : (_jsx(DesktopCalendar, { anchorRef: anchorRef, props: props, state: state, renderCalendar: children })), _jsx(TextInput, Object.assign({}, inputProps, { value: fieldState.isEmpty && !isActive && props.placeholder ? '' : inputProps.value, className: b('field', { mobile: isMobile }), hasClear: !isMobile && inputProps.hasClear, rightContent: isMobile ? (_jsx(MobileCalendarIcon, { props: props, state: state })) : (_jsx(DesktopCalendarButton, { props: props, state: state })) }))] })));
+    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, rightContent: isMobile ? (_jsx(MobileCalendarIcon, { props: props, state: state })) : (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))) }))] })));
 }

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

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

@@ -0,0 +1,117 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { useFocusWithin, useForkRef } from '@gravity-ui/uikit';
+import { useDateFieldProps } from '../../DateField';
+import { getButtonSizeForInput } from '../../utils/getButtonSizeForInput';
+import { mergeProps } from '../../utils/mergeProps';
+import { i18n } from '../i18n';
+export function useDatePickerProps(state, _a) {
+    var _b;
+    var { onFocus, onBlur } = _a, props = __rest(_a, ["onFocus", "onBlur"]);
+    const [isActive, setActive] = React.useState(false);
+    const { focusWithinProps } = useFocusWithin({
+        onFocusWithin: onFocus,
+        onBlurWithin: onBlur,
+        onFocusWithinChange(isFocusWithin) {
+            setActive(isFocusWithin);
+            if (!isFocusWithin) {
+                state.setOpen(false);
+            }
+        },
+    });
+    const { inputProps } = useDateFieldProps(state.dateFieldState, props);
+    let error;
+    let validationState = props.validationState;
+    if (validationState) {
+        error = validationState === 'invalid' ? props.errorMessage || true : undefined;
+    }
+    else {
+        validationState = state.dateFieldState.validationState;
+        error = validationState === 'invalid';
+    }
+    const inputRef = React.useRef(null);
+    const handleRef = useForkRef(inputRef, inputProps.controlRef);
+    const calendarRef = React.useRef(null);
+    const calendarButtonRef = React.useRef(null);
+    const groupRef = React.useRef(null);
+    function focusInput() {
+        setTimeout(() => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }
+    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')) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    state.setOpen(true);
+                }
+            } }),
+        fieldProps: mergeProps(inputProps, state.dateFieldState.isEmpty && !isActive && props.placeholder
+            ? { value: '' }
+            : undefined, { controlRef: handleRef, error }),
+        calendarButtonProps: {
+            ref: calendarButtonRef,
+            size: getButtonSizeForInput(props.size),
+            disabled: state.disabled,
+            extraProps: {
+                'aria-label': i18n('Calendar'),
+                'aria-haspopup': 'dialog',
+                'aria-expanded': state.isOpen,
+            },
+            view: 'flat-secondary',
+            onClick: () => {
+                setActive(true);
+                state.setOpen(!state.isOpen);
+            },
+        },
+        popupProps: {
+            open: state.isOpen,
+            onEscapeKeyDown: () => {
+                state.setOpen(false);
+                focusInput();
+            },
+            onOutsideClick: (e) => {
+                var _a;
+                if (e.target !== calendarButtonRef.current) {
+                    state.setOpen(false);
+                }
+                if (e.target && ((_a = groupRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                    focusInput();
+                }
+            },
+            // @ts-expect-error focusTrap in popup was introduced in a newer version of uikit
+            focusTrap: true,
+        },
+        calendarProps: {
+            ref: calendarRef,
+            autoFocus: true,
+            size: props.size === 's' ? 'm' : props.size,
+            disabled: props.disabled,
+            readOnly: props.readOnly,
+            onUpdate: (d) => {
+                state.setDateValue(d);
+                if (!state.hasTime) {
+                    focusInput();
+                }
+            },
+            defaultFocusedValue: (_b = state.dateValue) !== null && _b !== void 0 ? _b : undefined,
+            value: state.dateValue,
+            minValue: props.minValue,
+            maxValue: props.maxValue,
+            isDateUnavailable: props.isDateUnavailable,
+            timeZone: props.timeZone,
+        },
+        timeInputProps: {
+            value: state.timeValue,
+            onUpdate: state.setTimeValue,
+            format: state.timeFormat,
+            readOnly: state.readOnly,
+            disabled: state.disabled,
+            timeZone: props.timeZone,
+            hasClear: props.hasClear,
+            size: props.size,
+        },
+    };
+}

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

@@ -1,5 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { InputBase, ValueBase } from '../../types';
+import type { DateFieldState } from '../../DateField';
+import type { DateFieldBase } from '../../types';
 export type Granularity = 'day' | 'hour' | 'minute' | 'second';
 export interface DatePickerState {
     /** The currently selected date. */
@@ -36,10 +37,8 @@ export interface DatePickerState {
     isOpen: boolean;
     /** Sets whether the calendar popover is open. */
     setOpen(isOpen: boolean): void;
+    dateFieldState: DateFieldState;
 }
-export interface DatePickerStateOptions extends ValueBase<DateTime>, InputBase {
-    placeholderValue?: DateTime;
-    timeZone?: string;
-    format?: string;
+export interface DatePickerStateOptions extends DateFieldBase {
 }
 export declare function useDatePickerState(props: DatePickerStateOptions): DatePickerState;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useDateFieldState } from '../../DateField';
 import { splitFormatIntoSections } from '../../DateField/utils';
 import { useControlledState } from '../../hooks/useControlledState';
 import { createPlaceholderValue, mergeDateTime } from '../../utils/dates';
@@ -75,6 +76,19 @@ export function useDatePickerState(props) {
             setSelectedTime(newValue);
         }
     };
+    const dateFieldState = useDateFieldState({
+        value: value !== null && value !== void 0 ? value : null,
+        onUpdate: setValue,
+        disabled,
+        readOnly,
+        validationState: props.validationState,
+        minValue: props.minValue,
+        maxValue: props.maxValue,
+        isDateUnavailable: props.isDateUnavailable,
+        format,
+        placeholderValue: props.placeholderValue,
+        timeZone: props.timeZone,
+    });
     return {
         value: value !== null && value !== void 0 ? value : null,
         setValue,
@@ -95,6 +109,7 @@ export function useDatePickerState(props) {
             }
             setOpen(newIsOpen);
         },
+        dateFieldState,
     };
 }
 function getPlaceholderTime(placeholderValue, timeZone) {

package/dist/esm/components/DatePicker/index.d.ts

@@ -1,2 +1,3 @@
 export * from './DatePicker';
 export * from './hooks/useDatePickerState';
+export * from './hooks/useDatePickerProps';

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

@@ -1,2 +1,3 @@
 export * from './DatePicker';
 export * from './hooks/useDatePickerState';
+export * from './hooks/useDatePickerProps';

package/dist/esm/components/RelativeDatePicker/RelativeDatePicker.css

@@ -1,6 +1,7 @@
 .g-date-relative-date-picker {
   position: relative;
   display: inline-flex;
+  outline: none;
 }
 .g-date-relative-date-picker__field {
   width: 100%;

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

@@ -1,14 +1,4 @@
-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;
-};
+import { __rest } from "tslib";
 import React from 'react';
 import { useFocusWithin, useForkRef } from '@gravity-ui/uikit';
 import { useDateFieldProps } from '../../DateField';
@@ -36,7 +26,7 @@ export function useRelativeDatePickerProps(state, _a) {
         onBlurWithin: onBlur,
         onFocusWithinChange(isFocusWithin) {
             if (!isFocusWithin) {
-                state.setActive(isFocusWithin);
+                state.setActive(false);
             }
         },
     });
@@ -44,16 +34,12 @@ export function useRelativeDatePickerProps(state, _a) {
     if (!state.isActive && isOpen) {
         setOpen(false);
     }
-    const [prevActive, setPrevActive] = React.useState(state.isActive);
-    if (prevActive !== state.isActive) {
-        setPrevActive(state.isActive);
-        if (state.isActive && !isOpen) {
-            setOpen(true);
-        }
-    }
     const commonInputProps = {
         onFocus: () => {
-            state.setActive(true);
+            if (!state.isActive) {
+                state.setActive(true);
+                setOpen(true);
+            }
         },
     };
     const { inputProps } = useDateFieldProps(dateFieldState, Object.assign(Object.assign({}, props), { value: undefined, defaultValue: undefined, onUpdate: undefined }));
@@ -62,6 +48,7 @@ export function useRelativeDatePickerProps(state, _a) {
         value: relativeDateState.text,
         onUpdate: relativeDateState.setText,
         hasClear: props.hasClear && !relativeDateState.readOnly,
+        placeholder: props.placeholder,
         size: props.size,
     };
     let error;
@@ -76,19 +63,33 @@ export function useRelativeDatePickerProps(state, _a) {
                 : dateFieldState.validationState;
         error = validationState === 'invalid';
     }
-    const wasActiveBeforeClickRef = React.useRef(state.isActive);
     const inputRef = React.useRef(null);
     const handleRef = useForkRef(inputRef, mode === 'relative' ? relativeDateProps.controlRef : inputProps.controlRef);
     const calendarRef = React.useRef(null);
+    function focusCalendar() {
+        setTimeout(() => {
+            var _a;
+            (_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }
+    function focusInput() {
+        setTimeout(() => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }
     return {
-        groupProps: Object.assign(Object.assign({ role: 'group' }, focusWithinProps), { onKeyDown: (e) => {
+        groupProps: Object.assign(Object.assign({ tabIndex: -1, role: 'group' }, focusWithinProps), { onKeyDown: (e) => {
                 if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
                     e.preventDefault();
                     e.stopPropagation();
                     setOpen(true);
+                    focusCalendar();
                 }
             } }),
-        fieldProps: mergeProps(commonInputProps, mode === 'relative' ? relativeDateProps : inputProps, { controlRef: handleRef, error }),
+        fieldProps: mergeProps(commonInputProps, mode === 'relative' ? relativeDateProps : inputProps, mode === 'absolute' && dateFieldState.isEmpty && !state.isActive && props.placeholder
+            ? { value: '' }
+            : undefined, { controlRef: handleRef, error }),
         modeSwitcherProps: {
             size: getButtonSizeForInput(props.size),
             disabled: state.readOnly || state.disabled,
@@ -109,7 +110,7 @@ export function useRelativeDatePickerProps(state, _a) {
                 else if (relativeDateState.parsedDate) {
                     setFocusedDate(relativeDateState.parsedDate);
                 }
-                setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+                focusInput();
             },
         },
         calendarButtonProps: {
@@ -121,29 +122,20 @@ export function useRelativeDatePickerProps(state, _a) {
                 'aria-expanded': isOpen,
             },
             view: 'flat-secondary',
-            onFocus: () => {
-                wasActiveBeforeClickRef.current = state.isActive;
-            },
             onClick: () => {
                 state.setActive(true);
-                if (wasActiveBeforeClickRef.current) {
-                    setOpen(!isOpen);
-                    if (!isOpen) {
-                        setTimeout(() => {
-                            var _a;
-                            (_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                        });
-                    }
+                setOpen(!isOpen);
+                if (!isOpen) {
+                    focusCalendar();
                 }
-                wasActiveBeforeClickRef.current = state.isActive;
             },
         },
         popupProps: {
             open: isOpen,
             onEscapeKeyDown: () => {
                 setOpen(false);
+                focusInput();
             },
-            restoreFocus: true,
         },
         calendarProps: {
             ref: calendarRef,
@@ -154,7 +146,7 @@ export function useRelativeDatePickerProps(state, _a) {
                 datePickerState.setDateValue(v);
                 if (!state.datePickerState.hasTime) {
                     setOpen(false);
-                    setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+                    focusInput();
                 }
             },
             focusedValue: focusedDate,