@gravity-ui/date-components 1.0.0

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

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

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { createPlaceholderValue, splitFormatIntoSections } from '../../DateField/utils';
+import { useControlledState } from '../../hooks/useControlledState';
+export function useDatePickerState(props) {
+    const { disabled, readOnly } = props;
+    const [isOpen, setOpen] = React.useState(false);
+    const [value, setValue] = useControlledState(props.value, props.defaultValue, props.onUpdate);
+    const [selectedDateInner, setSelectedDate] = React.useState(null);
+    const [selectedTimeInner, setSelectedTime] = React.useState(null);
+    let selectedDate = selectedDateInner;
+    let selectedTime = selectedTimeInner;
+    const format = props.format || 'L';
+    const { hasDate, hasTime, timeFormat } = React.useMemo(() => {
+        const sections = splitFormatIntoSections(format);
+        let hasDate = false;
+        let hasHours = false;
+        let hasMinutes = false;
+        let hasSeconds = false;
+        for (const s of sections) {
+            hasHours || (hasHours = s.type === 'hour');
+            hasMinutes || (hasMinutes = s.type === 'minute');
+            hasSeconds || (hasSeconds = s.type === 'second');
+            hasDate || (hasDate = ['day', 'month', 'year'].includes(s.type));
+        }
+        return {
+            hasTime: hasHours || hasMinutes || hasSeconds,
+            timeFormat: hasSeconds ? 'LTS' : 'LT',
+            hasDate,
+        };
+    }, [format]);
+    if (value) {
+        selectedDate = value;
+        if (hasTime) {
+            selectedTime = value;
+        }
+    }
+    const commitValue = (date, time) => {
+        if (disabled || readOnly) {
+            return;
+        }
+        setValue(mergeDateTime(date, time));
+        setSelectedDate(null);
+        setSelectedTime(null);
+    };
+    // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
+    const selectDate = (newValue) => {
+        if (disabled || readOnly) {
+            return;
+        }
+        const shouldClose = !hasTime;
+        if (hasTime) {
+            if (selectedTime || shouldClose) {
+                commitValue(newValue, selectedTime || getPlaceholderTime(props.placeholderValue, props.timeZone));
+            }
+            else {
+                setSelectedDate(newValue);
+            }
+        }
+        else {
+            setValue(newValue);
+        }
+        if (shouldClose) {
+            setOpen(false);
+        }
+    };
+    const selectTime = (newValue) => {
+        if (disabled || readOnly) {
+            return;
+        }
+        if (selectedDate) {
+            commitValue(selectedDate, newValue);
+        }
+        else {
+            setSelectedTime(newValue);
+        }
+    };
+    return {
+        value: value !== null && value !== void 0 ? value : null,
+        setValue,
+        dateValue: selectedDate,
+        timeValue: selectedTime,
+        setDateValue: selectDate,
+        setTimeValue: selectTime,
+        disabled,
+        readOnly,
+        format,
+        hasDate,
+        hasTime,
+        timeFormat,
+        isOpen,
+        setOpen(newIsOpen) {
+            if (!newIsOpen && !value && selectedDate && hasTime) {
+                commitValue(selectedDate, selectedTime || getPlaceholderTime(props.placeholderValue, props.timeZone));
+            }
+            setOpen(newIsOpen);
+        },
+    };
+}
+function mergeDateTime(date, time) {
+    return date
+        .set('hours', time.hour())
+        .set('minutes', time.minute())
+        .set('seconds', time.second());
+}
+function getPlaceholderTime(placeholderValue, timeZone) {
+    return createPlaceholderValue({ placeholderValue, timeZone });
+}

package/dist/esm/components/DatePicker/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "Calendar": "Calendar"
+}

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

@@ -0,0 +1 @@
+export declare const i18n: (key: "Calendar", params?: import("@gravity-ui/i18n").Params | undefined) => string;

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

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}date-picker`);

package/dist/esm/components/DatePicker/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "Calendar": "Календарь"
+}

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

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

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

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

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

@@ -0,0 +1 @@
+export declare const b: import("@bem-react/classname").ClassNameFormatter;

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

@@ -0,0 +1,2 @@
+import { block } from '../../utils/cn';
+export const b = block('date-picker');

package/dist/esm/components/RelativeDateField/RelativeDateField.css

@@ -0,0 +1,16 @@
+.g-date-relative-date-field {
+  position: relative;
+  display: inline-block;
+}
+.g-date-relative-date-field__field {
+  width: 100%;
+}
+.g-date-relative-date-field__popup-content {
+  outline: none;
+}
+.g-date-relative-date-field__time-field {
+  width: 100%;
+}
+.g-date-relative-date-field__time-field-wrapper {
+  padding: 10px;
+}

package/dist/esm/components/RelativeDateField/RelativeDateField.d.ts

@@ -0,0 +1,11 @@
+import type { AccessibilityProps, DomProps, FocusableProps, KeyboardEvents, StyleProps, TextInputExtendProps, TextInputProps } from '../types';
+import type { RelativeDateFieldOptions } from './hooks/useRelativeDateFieldState';
+import './RelativeDateField.css';
+export interface RelativeDateFieldProps extends RelativeDateFieldOptions, TextInputProps, TextInputExtendProps, DomProps, StyleProps, AccessibilityProps, FocusableProps, KeyboardEvents {
+    /**
+     * Show time field in popup
+     * @default false
+     */
+    hasTime?: boolean;
+}
+export declare function RelativeDateField(props: RelativeDateFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RelativeDateField/RelativeDateField.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Popup, TextInput, useFocusWithin, useMobile } from '@gravity-ui/uikit';
+import { block } from '../../utils/cn';
+import { Calendar } from '../Calendar';
+import { DateField } from '../DateField';
+import { useRelativeDateFieldProps } from './hooks/useRelativeDateFieldProps';
+import { useRelativeDateFieldState } from './hooks/useRelativeDateFieldState';
+import './RelativeDateField.css';
+const b = block('relative-date-field');
+export function RelativeDateField(props) {
+    const state = useRelativeDateFieldState(props);
+    const { inputProps, calendarProps, timeInputProps } = useRelativeDateFieldProps(state, props);
+    const [isMobile] = useMobile();
+    const anchorRef = React.useRef(null);
+    const [isOpen, setOpen] = React.useState(false);
+    const { focusWithinProps } = useFocusWithin({
+        onBlurWithin: () => {
+            setOpen(false);
+        },
+        isDisabled: isMobile,
+    });
+    return (_jsxs("div", Object.assign({ role: "group", className: b(null, props.className), style: props.style }, focusWithinProps, { children: [_jsx(TextInput, Object.assign({}, inputProps, { className: b('field'), ref: anchorRef, onFocus: (e) => {
+                    var _a;
+                    if (!isMobile) {
+                        setOpen(true);
+                    }
+                    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                }, onBlur: props.onBlur })), !isMobile && (_jsx(Popup, { anchorRef: anchorRef, open: isOpen, children: _jsxs("div", { className: b('popup-content'), children: [_jsx(Calendar, Object.assign({}, calendarProps)), props.hasTime ? (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({ className: b('time-field') }, timeInputProps)) })) : null] }) }))] })));
+}

package/dist/esm/components/RelativeDateField/hooks/useRelativeDateFieldProps.d.ts

@@ -0,0 +1,12 @@
+import type { TextInputProps } from '@gravity-ui/uikit';
+import type { CalendarProps } from '../../Calendar';
+import type { DateFieldProps } from '../../DateField';
+import type { RelativeDateFieldProps } from '../RelativeDateField';
+import type { RelativeDateFieldState } from './useRelativeDateFieldState';
+interface RelativeDateProps {
+    inputProps: TextInputProps;
+    calendarProps: CalendarProps;
+    timeInputProps: DateFieldProps;
+}
+export declare function useRelativeDateFieldProps(state: RelativeDateFieldState, props: RelativeDateFieldProps): RelativeDateProps;
+export {};

package/dist/esm/components/RelativeDateField/hooks/useRelativeDateFieldProps.js

@@ -0,0 +1,59 @@
+import React from 'react';
+export function useRelativeDateFieldProps(state, props) {
+    const [prevCorrectDate, setPrevCorrectDate] = React.useState(state.lastCorrectDate);
+    const [focusedDate, setFocusedDate] = React.useState(state.lastCorrectDate);
+    if (prevCorrectDate !== state.lastCorrectDate) {
+        setPrevCorrectDate(state.lastCorrectDate);
+        setFocusedDate(state.lastCorrectDate);
+    }
+    let error;
+    if (props.validationState === 'invalid') {
+        error = props.errorMessage || true;
+    }
+    else {
+        error = state.validationState === 'invalid';
+    }
+    return {
+        inputProps: {
+            size: props.size,
+            autoFocus: props.autoFocus,
+            value: state.text,
+            onUpdate: state.setText,
+            disabled: state.disabled,
+            hasClear: props.hasClear,
+            //@ts-expect-error TODO: use new TextInput API
+            error,
+            label: props.label,
+            id: props.id,
+            leftContent: props.leftContent,
+            rightContent: props.rightContent,
+            pin: props.pin,
+            view: props.view,
+            placeholder: props.placeholder,
+            onKeyDown: props.onKeyDown,
+            onKeyUp: props.onKeyUp,
+            onBlur: props.onBlur,
+            onFocus: props.onFocus,
+            controlProps: {
+                'aria-label': props['aria-label'] || undefined,
+                'aria-labelledby': props['aria-labelledby'] || undefined,
+                'aria-describedby': props['aria-describedby'] || undefined,
+                'aria-details': props['aria-details'] || undefined,
+                'aria-disabled': state.disabled || undefined,
+            },
+        },
+        calendarProps: {
+            size: props.size === 's' ? 'm' : props.size,
+            readOnly: true,
+            value: state.parsedDate,
+            focusedValue: focusedDate,
+            onFocusUpdate: setFocusedDate,
+        },
+        timeInputProps: {
+            size: props.size,
+            readOnly: true,
+            value: state.lastCorrectDate,
+            format: 'LTS',
+        },
+    };
+}

package/dist/esm/components/RelativeDateField/hooks/useRelativeDateFieldState.d.ts

@@ -0,0 +1,30 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { InputBase, Validation, ValueBase } from '../../types';
+export interface RelativeDateFieldState {
+    /** The current field value. */
+    value: string | null;
+    /** Sets the field value */
+    setValue: (v: string | null) => void;
+    /** Current user input */
+    text: string;
+    /** Sets text */
+    setText: (t: string) => void;
+    /** */
+    parsedDate: DateTime | null;
+    /** */
+    lastCorrectDate: DateTime | null;
+    /** */
+    validationState?: 'invalid';
+    /**
+     * Whether the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the value is immutable.
+     */
+    readOnly?: boolean;
+}
+export interface RelativeDateFieldOptions extends ValueBase<string, string | null>, InputBase, Validation {
+    timeZone?: string;
+}
+export declare function useRelativeDateFieldState(props: RelativeDateFieldOptions): RelativeDateFieldState;

package/dist/esm/components/RelativeDateField/hooks/useRelativeDateFieldState.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { dateTimeParse, isValid } from '@gravity-ui/date-utils';
+import { useControlledState } from '../../hooks/useControlledState';
+export function useRelativeDateFieldState(props) {
+    const [value, setValue] = useControlledState(props.value, props.defaultValue, props.onUpdate);
+    const [text, setText] = React.useState(value !== null && value !== void 0 ? value : '');
+    if (value && value !== text) {
+        setText(value);
+    }
+    const handleTextChange = (t) => {
+        if (props.disabled || props.readOnly) {
+            return;
+        }
+        setText(t);
+        if (isLikeRelativeDate(t)) {
+            const date = dateTimeParse(t);
+            if (date && isValid(date)) {
+                setValue(t);
+            }
+            else {
+                setValue(null);
+            }
+        }
+        else {
+            setValue(null);
+        }
+    };
+    const parsedDate = React.useMemo(() => {
+        var _a;
+        if (!value) {
+            return null;
+        }
+        return (_a = dateTimeParse(value, { timeZone: props.timeZone })) !== null && _a !== void 0 ? _a : null;
+    }, [value, props.timeZone]);
+    const [lastCorrectDate, setLastCorrectDate] = React.useState(parsedDate);
+    if (parsedDate && parsedDate !== lastCorrectDate) {
+        setLastCorrectDate(parsedDate);
+    }
+    const validationState = props.validationState || (text && !parsedDate) ? 'invalid' : undefined;
+    return {
+        value: value !== null && value !== void 0 ? value : null,
+        setValue(v) {
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+            setValue(v);
+        },
+        text,
+        setText: handleTextChange,
+        parsedDate,
+        lastCorrectDate,
+        validationState,
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+    };
+}
+function isLikeRelativeDate(text) {
+    return /^now/i.test(text);
+}

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

@@ -0,0 +1,3 @@
+export * from './RelativeDateField';
+export * from './hooks/useRelativeDateFieldProps';
+export * from './hooks/useRelativeDateFieldState';

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

@@ -0,0 +1,3 @@
+export * from './RelativeDateField';
+export * from './hooks/useRelativeDateFieldProps';
+export * from './hooks/useRelativeDateFieldState';

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

@@ -0,0 +1,16 @@
+.g-date-relative-date-picker {
+  position: relative;
+  display: inline-flex;
+}
+.g-date-relative-date-picker__field {
+  width: 100%;
+}
+.g-date-relative-date-picker__popup-content {
+  outline: none;
+}
+.g-date-relative-date-picker__time-field {
+  width: 100%;
+}
+.g-date-relative-date-picker__time-field-wrapper {
+  padding: 10px;
+}

package/dist/esm/components/RelativeDatePicker/RelativeDatePicker.d.ts

@@ -0,0 +1,6 @@
+import type { AccessibilityProps, DomProps, FocusableProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
+import type { RelativeDatePickerStateOptions } from './hooks/useRelativeDatePickerState';
+import './RelativeDatePicker.css';
+export interface RelativeDatePickerProps extends RelativeDatePickerStateOptions, TextInputProps, FocusableProps, KeyboardEvents, DomProps, StyleProps, AccessibilityProps {
+}
+export declare function RelativeDatePicker(props: RelativeDatePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+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 { 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 { useRelativeDatePickerProps } from './hooks/useRelativeDatePickerProps';
+import { useRelativeDatePickerState } from './hooks/useRelativeDatePickerState';
+import './RelativeDatePicker.css';
+const b = block('relative-date-picker');
+export function RelativeDatePicker(props) {
+    const state = useRelativeDatePickerState(props);
+    const { groupProps, fieldProps, modeSwitcherProps, calendarButtonProps, popupProps, calendarProps, timeInputProps, } = useRelativeDatePickerProps(state, props);
+    const anchorRef = React.useRef(null);
+    const [isMobile] = useMobile();
+    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, { leftContent: _jsx(Button, Object.assign({}, modeSwitcherProps, { children: _jsx(Icon, { data: FunctionIcon }) })), rightContent: _jsxs(React.Fragment, { children: [!isMobile && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isMobile && state.mode === 'absolute' && (_jsx(MobileCalendarIcon, { state: state.datePickerState, props: { size: props.size } }))] }) })), !isMobile && (_jsx(Popup, Object.assign({}, popupProps, { anchorRef: anchorRef, children: _jsxs("div", { className: b('popup-content'), children: [_jsx(Calendar, Object.assign({}, calendarProps)), state.datePickerState.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })))] })));
+}

package/dist/esm/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.d.ts

@@ -0,0 +1,17 @@
+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 { RelativeDatePickerProps } from '../RelativeDatePicker';
+import type { RelativeDatePickerState } from './useRelativeDatePickerState';
+interface InnerRelativeDatePickerProps {
+    groupProps: React.HTMLAttributes<unknown>;
+    fieldProps: TextInputProps;
+    modeSwitcherProps: ButtonProps;
+    calendarButtonProps: ButtonProps;
+    popupProps: PopupProps;
+    calendarProps: React.ComponentProps<typeof Calendar>;
+    timeInputProps: DateFieldProps;
+}
+export declare function useRelativeDatePickerProps(state: RelativeDatePickerState, { onFocus, onBlur, ...props }: RelativeDatePickerProps): InnerRelativeDatePickerProps;
+export {};

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

@@ -0,0 +1,168 @@
+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 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 useRelativeDatePickerProps(state, _a) {
+    var { onFocus, onBlur } = _a, props = __rest(_a, ["onFocus", "onBlur"]);
+    const { mode, setMode, datePickerState, dateFieldState, relativeDateState } = state;
+    const [focusedDate, setFocusedDate] = React.useState(relativeDateState.lastCorrectDate);
+    const [prevCorrectDate, setPrevCorrectDate] = React.useState(relativeDateState.lastCorrectDate);
+    if (prevCorrectDate !== relativeDateState.lastCorrectDate) {
+        setPrevCorrectDate(relativeDateState.lastCorrectDate);
+        setFocusedDate(relativeDateState.lastCorrectDate);
+    }
+    const [prevDateValue, setPrevDateValue] = React.useState(datePickerState.dateValue);
+    if (datePickerState.dateValue !== prevDateValue) {
+        setPrevDateValue(datePickerState.dateValue);
+        if (datePickerState.dateValue) {
+            setFocusedDate(datePickerState.dateValue);
+        }
+    }
+    const { focusWithinProps } = useFocusWithin({
+        onFocusWithin: onFocus,
+        onBlurWithin: onBlur,
+        onFocusWithinChange(isFocusWithin) {
+            if (!isFocusWithin) {
+                state.setActive(isFocusWithin);
+            }
+        },
+    });
+    const [isOpen, setOpen] = React.useState(false);
+    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);
+        },
+    };
+    const { inputProps } = useDateFieldProps(dateFieldState, Object.assign(Object.assign({}, props), { value: undefined, defaultValue: undefined, onUpdate: undefined }));
+    const relativeDateProps = {
+        disabled: relativeDateState.disabled,
+        value: relativeDateState.text,
+        onUpdate: relativeDateState.setText,
+        hasClear: props.hasClear && !relativeDateState.readOnly,
+        size: props.size,
+    };
+    let error;
+    let validationState = props.validationState;
+    if (validationState) {
+        error = validationState === 'invalid' ? props.errorMessage || true : undefined;
+    }
+    else {
+        validationState =
+            mode === 'relative'
+                ? relativeDateState.validationState
+                : 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);
+    return {
+        groupProps: Object.assign({ role: 'group' }, focusWithinProps),
+        fieldProps: mergeProps(commonInputProps, mode === 'relative' ? relativeDateProps : inputProps, { controlRef: handleRef, error }),
+        modeSwitcherProps: {
+            size: getButtonSizeForInput(props.size),
+            disabled: state.readOnly || state.disabled,
+            view: 'flat-secondary',
+            style: { zIndex: 2 },
+            selected: mode === 'relative',
+            extraProps: {
+                'aria-label': i18n('Formula input mode'),
+            },
+            onClick: () => {
+                setMode(mode === 'relative' ? 'absolute' : 'relative');
+                if (mode === 'relative') {
+                    const valueDate = datePickerState.value;
+                    if (valueDate) {
+                        setFocusedDate(valueDate);
+                    }
+                }
+                else if (relativeDateState.parsedDate) {
+                    setFocusedDate(relativeDateState.parsedDate);
+                }
+                setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+            },
+        },
+        calendarButtonProps: {
+            size: getButtonSizeForInput(props.size),
+            disabled: state.disabled,
+            extraProps: {
+                'aria-label': i18n('Calendar'),
+                'aria-haspopup': 'dialog',
+                '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();
+                        });
+                    }
+                }
+                wasActiveBeforeClickRef.current = state.isActive;
+            },
+        },
+        popupProps: {
+            open: isOpen,
+            onEscapeKeyDown: () => {
+                setOpen(false);
+            },
+            restoreFocus: true,
+        },
+        calendarProps: {
+            ref: calendarRef,
+            size: props.size === 's' ? 'm' : props.size,
+            readOnly: props.readOnly,
+            value: state.selectedDate,
+            onUpdate: (v) => {
+                datePickerState.setDateValue(v);
+                if (!state.datePickerState.hasTime) {
+                    setOpen(false);
+                    setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+                }
+            },
+            focusedValue: focusedDate,
+            onFocusUpdate: setFocusedDate,
+        },
+        timeInputProps: {
+            value: datePickerState.timeValue,
+            onUpdate: datePickerState.setTimeValue,
+            format: datePickerState.timeFormat,
+            readOnly: state.readOnly,
+            disabled: state.disabled,
+            timeZone: props.timeZone,
+            hasClear: props.hasClear,
+            size: props.size,
+        },
+    };
+}