@gravity-ui/date-components 1.0.0

package/dist/esm/components/Calendar/hooks/useCalendarCellProps.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { dateTime } from '@gravity-ui/date-utils';
+export function useCalendarCellProps(date, state) {
+    const ref = React.useRef(null);
+    const isFocused = state.isCellFocused(date);
+    React.useEffect(() => {
+        var _a;
+        if (isFocused) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+        }
+    }, [isFocused]);
+    const tabIndex = state.focusedDate.isSame(date, state.mode) ? 0 : -1;
+    const isDisabled = state.isCellDisabled(date);
+    const isSelected = state.isSelected(date);
+    const highlightedRange = 'highlightedRange' in state && state.highlightedRange;
+    const isRangeSelection = Boolean(highlightedRange && isSelected);
+    const isSelectionStart = isSelected && highlightedRange && date.isSame(highlightedRange.start, state.mode);
+    const isSelectionEnd = isSelected && highlightedRange && date.isSame(highlightedRange.end, state.mode);
+    const isOutsideCurrentRange = state.mode === 'days' ? !state.focusedDate.isSame(date, 'month') : false;
+    const isUnavailable = state.isCellUnavailable(date);
+    const isSelectable = !isDisabled && !isUnavailable;
+    const isCurrent = dateTime().isSame(date, state.mode);
+    const isWeekend = state.isWeekend(date);
+    let label = '';
+    if (state.mode === 'days') {
+        label = `${date.format('dddd')}, ${date.format('LL')}`;
+    }
+    else if (state.mode === 'months') {
+        label = `${date.format('MMMM YYYY')}`;
+    }
+    else if (state.mode === 'years') {
+        label = `${date.format('YYYY')}`;
+    }
+    const cellProps = {
+        role: 'gridcell',
+        'aria-selected': isSelected ? 'true' : undefined,
+        'aria-disabled': isDisabled ? 'true' : undefined,
+    };
+    const buttonProps = {
+        ref,
+        role: 'button',
+        tabIndex: isDisabled ? undefined : tabIndex,
+        'aria-disabled': isSelectable ? undefined : 'true',
+        'aria-label': label,
+        onClick: isSelectable
+            ? () => {
+                state.setFocusedDate(date);
+                if (state.mode === 'days') {
+                    state.selectDate(date);
+                }
+                else {
+                    state.zoomIn();
+                }
+            }
+            : undefined,
+        onPointerEnter() {
+            if ('highlightDate' in state && isSelectable) {
+                if (isOutsideCurrentRange) {
+                    const newDate = date.isBefore(state.focusedDate)
+                        ? state.focusedDate.startOf('month')
+                        : state.focusedDate.endOf('month').startOf('date');
+                    state.highlightDate(newDate);
+                }
+                else {
+                    state.highlightDate(date);
+                }
+            }
+        },
+    };
+    let formattedDate = date.format('D');
+    if (state.mode === 'months') {
+        formattedDate = date.format('MMM');
+    }
+    else if (state.mode === 'years') {
+        formattedDate = date.format('YYYY');
+    }
+    return {
+        cellProps,
+        buttonProps,
+        formattedDate,
+        isDisabled,
+        isSelected,
+        isRangeSelection,
+        isSelectionStart,
+        isSelectionEnd,
+        isOutsideCurrentRange,
+        isUnavailable,
+        isCurrent,
+        isWeekend,
+    };
+}

package/dist/esm/components/Calendar/hooks/useCalendarGridProps.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { CalendarState, RangeCalendarState } from './types';
+export declare function useCalendarGridProps(state: CalendarState | RangeCalendarState): {
+    gridProps: React.HTMLAttributes<HTMLElement>;
+};

package/dist/esm/components/Calendar/hooks/useCalendarGridProps.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useFocusWithin } from '@gravity-ui/uikit';
+export function useCalendarGridProps(state) {
+    const { focusWithinProps } = useFocusWithin({
+        onFocusWithinChange: (isFocused) => {
+            state.setFocused(isFocused);
+        },
+    });
+    const gridProps = Object.assign(Object.assign({ role: 'grid', 'aria-label': state.mode === 'years'
+            ? `${state.startDate.year()} — ${state.endDate.year()}`
+            : state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY'), 'aria-disabled': state.disabled ? 'true' : undefined, 'aria-readonly': state.readOnly ? 'true' : undefined }, focusWithinProps), { onKeyDown: (e) => {
+            if (e.key === 'ArrowRight') {
+                state.focusNextCell();
+            }
+            else if (e.key === 'ArrowLeft') {
+                state.focusPreviousCell();
+            }
+            else if (e.key === 'ArrowDown') {
+                state.focusNextRow();
+            }
+            else if (e.key === 'ArrowUp') {
+                state.focusPreviousRow();
+            }
+            else if (e.key === 'PageDown') {
+                state.focusNextPage(e.shiftKey);
+            }
+            else if (e.key === 'PageUp') {
+                state.focusPreviousPage(e.shiftKey);
+            }
+            else if (e.key === 'End') {
+                state.focusSectionEnd();
+            }
+            else if (e.key === 'Home') {
+                state.focusSectionStart();
+            }
+            else if (e.code === 'Minus') {
+                state.zoomOut();
+            }
+            else if (e.code === 'Equal') {
+                state.zoomIn();
+            }
+            else if (e.key === 'Enter' || e.key === ' ') {
+                if (state.mode === 'days') {
+                    state.selectFocusedDate();
+                }
+                else {
+                    state.setMode(state.mode === 'months' ? 'days' : 'months');
+                }
+            }
+        } });
+    return {
+        gridProps,
+    };
+}

package/dist/esm/components/Calendar/hooks/useCalendarProps.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ButtonProps } from '@gravity-ui/uikit';
+import type { CalendarProps } from '../Calendar';
+import type { CalendarState, RangeCalendarState } from './types';
+export declare function useCalendarProps(props: CalendarProps, state: CalendarState | RangeCalendarState): {
+    calendarProps: React.HTMLAttributes<HTMLElement>;
+    modeButtonProps: ButtonProps;
+    nextButtonProps: ButtonProps;
+    previousButtonProps: ButtonProps;
+};

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import { useFocusWithin } from '@gravity-ui/uikit';
+import { i18n } from '../i18n';
+const buttonDisabledClassName = 'yc-button_disabled g-button_disabled';
+// eslint-disable-next-line complexity
+export function useCalendarProps(props, state) {
+    const title = state.mode === 'years'
+        ? `${state.startDate.year()} — ${state.endDate.year()}`
+        : state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY');
+    const { focusWithinProps } = useFocusWithin({
+        onFocusWithin: props.onFocus,
+        onBlurWithin: props.onBlur,
+    });
+    const calendarProps = Object.assign({ role: 'group', id: props.id, 'aria-label': [props['aria-label'], title].filter(Boolean).join(', '), 'aria-labelledby': props['aria-labelledby'] || undefined, 'aria-describedby': props['aria-describedby'] || undefined, 'aria-details': props['aria-details'] || undefined, 'aria-disabled': state.disabled || undefined }, focusWithinProps);
+    const modeDisabled = state.disabled || state.mode === 'years';
+    const modeButtonProps = {
+        disabled: state.disabled,
+        // FIXME: do not use button class name
+        className: modeDisabled ? buttonDisabledClassName : undefined,
+        onClick: modeDisabled
+            ? undefined
+            : () => {
+                state.zoomOut();
+                if (state.mode === 'months') {
+                    state.setFocused(true);
+                }
+            },
+        extraProps: {
+            'aria-disabled': modeDisabled ? 'true' : undefined,
+        },
+        children: title,
+    };
+    const previousFocused = React.useRef(false);
+    const previousDisabled = state.disabled || state.isPreviousPageInvalid();
+    React.useLayoutEffect(() => {
+        if (previousDisabled && previousFocused.current) {
+            previousFocused.current = false;
+            state.setFocused(true);
+        }
+    });
+    const previousButtonProps = {
+        disabled: state.disabled,
+        // FIXME: do not use button class name
+        className: previousDisabled ? buttonDisabledClassName : undefined,
+        onClick: previousDisabled
+            ? undefined
+            : () => {
+                state.focusPreviousPage();
+            },
+        onFocus: previousDisabled
+            ? undefined
+            : () => {
+                previousFocused.current = true;
+            },
+        onBlur: previousDisabled
+            ? undefined
+            : () => {
+                previousFocused.current = false;
+            },
+        extraProps: {
+            'aria-label': i18n('Previous'),
+            'aria-disabled': previousDisabled ? 'true' : undefined,
+        },
+    };
+    const nextFocused = React.useRef(false);
+    const nextDisabled = state.disabled || state.isNextPageInvalid();
+    React.useLayoutEffect(() => {
+        if (nextDisabled && nextFocused.current) {
+            nextFocused.current = false;
+            state.setFocused(true);
+        }
+    });
+    const nextButtonProps = {
+        disabled: state.disabled,
+        // FIXME: do not use button class name
+        className: nextDisabled ? buttonDisabledClassName : undefined,
+        onClick: nextDisabled
+            ? undefined
+            : () => {
+                state.focusNextPage();
+            },
+        onFocus: nextDisabled
+            ? undefined
+            : () => {
+                nextFocused.current = true;
+            },
+        onBlur: nextDisabled
+            ? undefined
+            : () => {
+                nextFocused.current = false;
+            },
+        extraProps: {
+            'aria-label': i18n('Next'),
+            'aria-disabled': previousDisabled ? 'true' : undefined,
+        },
+    };
+    return {
+        calendarProps,
+        modeButtonProps,
+        nextButtonProps,
+        previousButtonProps,
+    };
+}

package/dist/esm/components/Calendar/hooks/useCalendarState.d.ts

@@ -0,0 +1,7 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { ValueBase } from '../../types';
+import type { CalendarState, CalendarStateOptionsBase } from './types';
+export interface CalendarStateOptions extends ValueBase<DateTime>, CalendarStateOptionsBase {
+}
+export type { CalendarState } from './types';
+export declare function useCalendarState(props: CalendarStateOptions): CalendarState;

package/dist/esm/components/Calendar/hooks/useCalendarState.js

@@ -0,0 +1,171 @@
+import React from 'react';
+import { dateTime } from '@gravity-ui/date-utils';
+import { useControlledState } from '../../hooks/useControlledState';
+import { constrainValue } from '../utils';
+export function useCalendarState(props) {
+    const { disabled, readOnly, minValue, maxValue, timeZone } = props;
+    const [value, setValue] = useControlledState(props.value, props.defaultValue, props.onUpdate);
+    const [mode, setMode] = useControlledState(props.mode, props.defaultMode, props.onUpdateMode);
+    const currentMode = mode || 'days';
+    const focusedValue = React.useMemo(() => {
+        if (!props.focusedValue) {
+            return props.focusedValue;
+        }
+        return constrainValue(props.focusedValue, minValue, maxValue);
+    }, [props.focusedValue, minValue, maxValue]);
+    const defaultFocusedValue = React.useMemo(() => {
+        const defaultValue = (props.defaultFocusedValue ? props.defaultFocusedValue : value) || dateTime({ timeZone });
+        return constrainValue(defaultValue, minValue, maxValue);
+    }, [maxValue, minValue, props.defaultFocusedValue, timeZone, value]);
+    const [focusedDateInner, setFocusedDate] = useControlledState(focusedValue, defaultFocusedValue, props.onFocusUpdate);
+    const focusedDate = focusedDateInner !== null && focusedDateInner !== void 0 ? focusedDateInner : constrainValue(dateTime({ timeZone }), minValue, maxValue);
+    if (isInvalid(focusedDate, minValue, maxValue)) {
+        // If the focused date was moved to an invalid value, it can't be focused, so constrain it.
+        setFocusedDate(constrainValue(focusedDate, minValue, maxValue));
+    }
+    function focusCell(date) {
+        setFocusedDate(constrainValue(date, minValue, maxValue));
+    }
+    const [isFocused, setFocused] = React.useState(props.autoFocus || false);
+    const startDate = getStartDate(focusedDate, currentMode);
+    const endDate = getEndDate(focusedDate, currentMode);
+    return {
+        disabled,
+        readOnly,
+        value,
+        setValue,
+        timeZone,
+        selectDate(date) {
+            if (!disabled && !readOnly) {
+                const newValue = constrainValue(date, minValue, maxValue);
+                if (this.isCellUnavailable(newValue)) {
+                    return;
+                }
+                setValue(constrainValue(newValue, minValue, maxValue));
+            }
+        },
+        minValue,
+        maxValue,
+        focusedDate,
+        startDate,
+        endDate,
+        setFocusedDate(date) {
+            focusCell(date);
+            setFocused(true);
+        },
+        focusNextCell() {
+            focusCell(focusedDate.add({ [this.mode]: 1 }));
+        },
+        focusPreviousCell() {
+            focusCell(focusedDate.subtract({ [this.mode]: 1 }));
+        },
+        focusNextRow() {
+            if (this.mode === 'days') {
+                focusCell(focusedDate.add(1, 'week'));
+            }
+            else {
+                focusCell(focusedDate.add({ [this.mode]: 3 }));
+            }
+        },
+        focusPreviousRow() {
+            if (this.mode === 'days') {
+                focusCell(focusedDate.subtract(1, 'week'));
+            }
+            else {
+                focusCell(focusedDate.subtract({ [this.mode]: 3 }));
+            }
+        },
+        focusNextPage(larger) {
+            if (this.mode === 'days') {
+                focusCell(focusedDate.add({ months: larger ? 12 : 1 }));
+            }
+            else {
+                focusCell(focusedDate.add({ [this.mode]: 12 }));
+            }
+        },
+        focusPreviousPage(larger) {
+            if (this.mode === 'days') {
+                focusCell(focusedDate.subtract({ months: larger ? 12 : 1 }));
+            }
+            else {
+                focusCell(focusedDate.subtract({ [this.mode]: 12 }));
+            }
+        },
+        focusSectionStart() {
+            focusCell(getStartDate(focusedDate, this.mode));
+        },
+        focusSectionEnd() {
+            focusCell(getEndDate(focusedDate, this.mode));
+        },
+        zoomIn() {
+            this.setMode(this.mode === 'years' ? 'months' : 'days');
+        },
+        zoomOut() {
+            this.setMode(this.mode === 'days' ? 'months' : 'years');
+        },
+        selectFocusedDate() {
+            this.selectDate(focusedDate);
+        },
+        isFocused,
+        setFocused,
+        isInvalid(date) {
+            return isInvalid(date, this.minValue, this.maxValue, this.mode);
+        },
+        isPreviousPageInvalid() {
+            const prev = this.startDate.add({ days: -1 });
+            return this.isInvalid(prev);
+        },
+        isNextPageInvalid() {
+            const next = this.endDate.add({ days: 1 });
+            return this.isInvalid(next);
+        },
+        isSelected(date) {
+            return (Boolean(value) &&
+                date.isSame(value !== null && value !== void 0 ? value : undefined, currentMode) &&
+                !this.isCellDisabled(date));
+        },
+        isCellUnavailable(date) {
+            if (this.mode === 'days') {
+                return Boolean(props.isDateUnavailable && props.isDateUnavailable(date));
+            }
+            else {
+                return false;
+            }
+        },
+        isCellFocused(date) {
+            return this.isFocused && focusedDate && date.isSame(focusedDate, currentMode);
+        },
+        isCellDisabled(date) {
+            return this.disabled || this.isInvalid(date);
+        },
+        isWeekend(date) {
+            return this.mode === 'days' && [0, 6].includes(date.day());
+        },
+        mode: currentMode,
+        setMode,
+    };
+}
+function getStartDate(date, mode) {
+    if (mode === 'days') {
+        return date.startOf('month');
+    }
+    if (mode === 'months') {
+        return date.startOf('year');
+    }
+    const year = Math.floor(date.year() / 12) * 12;
+    return date.startOf('year').set('year', year);
+}
+function getEndDate(date, mode) {
+    if (mode === 'days') {
+        return date.endOf('month').startOf('day');
+    }
+    if (mode === 'months') {
+        return date.endOf('month').startOf('day');
+    }
+    const startDate = getStartDate(date, mode);
+    return startDate.add({ [mode]: 11 });
+}
+function isInvalid(date, minValue, maxValue, mode = 'days') {
+    const constrainedDate = constrainValue(date, minValue, maxValue);
+    return !constrainedDate.isSame(date, mode);
+}

package/dist/esm/components/Calendar/hooks/useRangeCalendarState.d.ts

@@ -0,0 +1,7 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { RangeValue, ValueBase } from '../../types';
+import type { CalendarStateOptionsBase, RangeCalendarState } from './types';
+export interface RangeCalendarStateOptions extends ValueBase<RangeValue<DateTime>>, CalendarStateOptionsBase {
+}
+export type { RangeCalendarState } from './types';
+export declare function useRangeCalendarState(props: RangeCalendarStateOptions): RangeCalendarState;

package/dist/esm/components/Calendar/hooks/useRangeCalendarState.js

@@ -0,0 +1,75 @@
+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 { useControlledState } from '../../hooks/useControlledState';
+import { constrainValue } from '../utils';
+import { useCalendarState } from './useCalendarState';
+export function useRangeCalendarState(props) {
+    var _a, _b;
+    const { value: valueProp, defaultValue, onUpdate } = props, calendarProps = __rest(props, ["value", "defaultValue", "onUpdate"]);
+    const [value, setValue] = useControlledState(valueProp, defaultValue, onUpdate);
+    const [anchorDate, setAnchorDateState] = React.useState();
+    const calendar = useCalendarState(Object.assign(Object.assign({}, calendarProps), { value: (_a = value === null || value === void 0 ? void 0 : value.start) !== null && _a !== void 0 ? _a : null }));
+    const highlightedRange = anchorDate
+        ? makeRange(anchorDate, calendar.focusedDate)
+        : (_b = (value && makeRange(value.start, value.end))) !== null && _b !== void 0 ? _b : undefined;
+    const selectDate = (date) => {
+        if (props.disabled || props.readOnly) {
+            return;
+        }
+        date = constrainValue(date, props.minValue, props.maxValue);
+        if (calendar.isCellUnavailable(date)) {
+            return;
+        }
+        if (anchorDate) {
+            const range = makeRange(anchorDate, date);
+            setValue(range);
+            setAnchorDateState(undefined);
+        }
+        else {
+            setAnchorDateState(date);
+        }
+    };
+    return Object.assign(Object.assign({}, calendar), { value,
+        setValue,
+        selectDate,
+        anchorDate, setAnchorDate: setAnchorDateState, highlightedRange,
+        selectFocusedDate() {
+            selectDate(calendar.focusedDate);
+        },
+        isSelected(date) {
+            if (!highlightedRange) {
+                return false;
+            }
+            return ((date.isSame(highlightedRange.start, this.mode) ||
+                date.isAfter(highlightedRange.start)) &&
+                (date.isSame(highlightedRange.end, this.mode) ||
+                    date.isBefore(highlightedRange.end)));
+        },
+        highlightDate(date) {
+            if (anchorDate) {
+                this.setFocusedDate(date);
+            }
+        } });
+}
+function makeRange(start, end) {
+    if (start.isBefore(end)) {
+        return {
+            start,
+            end,
+        };
+    }
+    return {
+        start: end,
+        end: start,
+    };
+}

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

@@ -0,0 +1,4 @@
+{
+  "Previous": "Previous",
+  "Next": "Next"
+}

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

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

package/dist/esm/components/Calendar/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}calendar`);

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

@@ -0,0 +1,4 @@
+{
+  "Previous": "Назад",
+  "Next": "Вперёд"
+}

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

@@ -0,0 +1,8 @@
+export * from './Calendar';
+export * from './RangeCalendar';
+export type { CalendarInstance } from './CalendarBase';
+export * from './hooks/useCalendarState';
+export * from './hooks/useRangeCalendarState';
+export * from './hooks/useCalendarProps';
+export * from './hooks/useCalendarGridProps';
+export * from './hooks/useCalendarCellProps';

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

@@ -0,0 +1,7 @@
+export * from './Calendar';
+export * from './RangeCalendar';
+export * from './hooks/useCalendarState';
+export * from './hooks/useRangeCalendarState';
+export * from './hooks/useCalendarProps';
+export * from './hooks/useCalendarGridProps';
+export * from './hooks/useCalendarCellProps';

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

@@ -0,0 +1,4 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+export declare function constrainValue(value: DateTime, minValue: DateTime | undefined, maxValue: DateTime | undefined): DateTime;
+export declare function getDaysInPeriod(startDate: DateTime, _endDate: DateTime, mode: 'days' | 'months' | 'years'): DateTime[];
+export declare function getWeekDays(): DateTime[];

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

@@ -0,0 +1,34 @@
+import { dateTime } from '@gravity-ui/date-utils';
+export function constrainValue(value, minValue, maxValue) {
+    if (minValue && value.isBefore(minValue)) {
+        return minValue;
+    }
+    if (maxValue && maxValue.isBefore(value)) {
+        return maxValue;
+    }
+    return value;
+}
+export function getDaysInPeriod(startDate, _endDate, mode) {
+    const days = [];
+    if (mode === 'days') {
+        const currentDate = startDate.startOf('week');
+        for (let i = 0; i < 42; i++) {
+            days.push(currentDate.add({ days: i }));
+        }
+    }
+    else {
+        for (let i = 0; i < 12; i++) {
+            days.push(startDate.add({ [mode]: i }));
+        }
+    }
+    return days;
+}
+export function getWeekDays() {
+    const weekDays = [];
+    const weekStart = dateTime().startOf('week');
+    for (let i = 0; i < 7; i++) {
+        const date = weekStart.add({ days: i });
+        weekDays.push(date);
+    }
+    return weekDays;
+}

package/dist/esm/components/DateField/DateField.css

@@ -0,0 +1,4 @@
+.g-date-date-field {
+  display: inline-block;
+  width: auto;
+}

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

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

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

@@ -0,0 +1,31 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { TextInput, useFocusWithin } from '@gravity-ui/uikit';
+import { block } from '../../utils/cn';
+import { useDateFieldProps } from './hooks/useDateFieldProps';
+import { useDateFieldState } from './hooks/useDateFieldState';
+import './DateField.css';
+const b = block('date-field');
+export function DateField(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const state = useDateFieldState(props);
+    const { inputProps } = useDateFieldProps(state, props);
+    const [isActive, setActive] = React.useState(false);
+    const { focusWithinProps } = useFocusWithin({
+        onFocusWithinChange(isFocusWithin) {
+            setActive(isFocusWithin);
+        },
+    });
+    return (_jsx("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: _jsx(TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })) })));
+}

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

@@ -0,0 +1,6 @@
+import type { TextInputProps } from '@gravity-ui/uikit';
+import type { DateFieldProps } from '../DateField';
+import type { DateFieldState } from './useDateFieldState';
+export declare function useDateFieldProps(state: DateFieldState, props: DateFieldProps): {
+    inputProps: TextInputProps;
+};