@gravity-ui/date-components 1.6.0 → 2.1.0

package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/utils.d.ts

@@ -0,0 +1,16 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { Preset } from './defaultPresets';
+export declare function getPresetTitle(start: string, end: string, presets?: Preset[]): string;
+export declare function filterPresets(presets: Preset[], minValue?: DateTime): Preset[];
+export interface PresetTab {
+    id: string;
+    title: string;
+    presets: Preset[];
+}
+export declare function getDefaultPresetTabs({ withTime, minValue, }: {
+    minValue?: DateTime;
+    withTime?: boolean;
+}): PresetTab[];
+export declare function filterPresetTabs(tabs: PresetTab[], { minValue }?: {
+    minValue?: DateTime;
+}): PresetTab[];

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

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterPresetTabs = exports.getDefaultPresetTabs = exports.filterPresets = exports.getPresetTitle = void 0;
+const date_utils_1 = require("@gravity-ui/date-utils");
+const defaultPresets_1 = require("./defaultPresets");
+const i18n_1 = require("./i18n");
+function getPresetTitle(start, end, presets = defaultPresets_1.allPresets) {
+    const startText = start.replace(/\s+/g, '');
+    const endText = end.replace(/\s+/g, '');
+    for (const preset of presets) {
+        if (preset.from === startText && preset.to === endText) {
+            return preset.title;
+        }
+    }
+    if (end === 'now') {
+        const match = /^now-(\d+)([m|h|d|w|M|y])$/.exec(start);
+        if (match) {
+            const [, count, unit] = match;
+            if (isDateUnit(unit)) {
+                return (0, i18n_1.i18n)('Last {count} {unit}', {
+                    count,
+                    unit: (0, i18n_1.i18n)(unit, { count: Number(count) }),
+                });
+            }
+        }
+    }
+    return startText + ' — ' + endText;
+}
+exports.getPresetTitle = getPresetTitle;
+function isDateUnit(value) {
+    return ['m', 'h', 'd', 'w', 'M', 'y'].includes(value);
+}
+function filterPresets(presets, minValue) {
+    return presets.filter((preset) => {
+        const from = (0, date_utils_1.dateTimeParse)(preset.from);
+        const to = (0, date_utils_1.dateTimeParse)(preset.to, { roundUp: true });
+        if (!from || !to) {
+            return false;
+        }
+        if (to.isBefore(from)) {
+            return false;
+        }
+        if (minValue && from.isBefore(minValue)) {
+            return false;
+        }
+        return true;
+    });
+}
+exports.filterPresets = filterPresets;
+function getDefaultPresetTabs({ withTime, minValue, }) {
+    const tabs = [];
+    const mainTab = {
+        id: 'main',
+        title: (0, i18n_1.i18n)('Main'),
+        presets: [],
+    };
+    const mainPresets = defaultPresets_1.DEFAULT_DATE_PRESETS;
+    if (withTime) {
+        mainPresets.unshift(...defaultPresets_1.DEFAULT_TIME_PRESETS);
+    }
+    mainTab.presets = filterPresets(mainPresets, minValue);
+    if (mainTab.presets.length > 0) {
+        tabs.push(mainTab);
+    }
+    const otherTab = {
+        id: 'other',
+        title: (0, i18n_1.i18n)('Other'),
+        presets: filterPresets(defaultPresets_1.DEFAULT_OTHERS_PRESETS, minValue),
+    };
+    if (otherTab.presets.length > 0) {
+        tabs.push(otherTab);
+    }
+    return tabs;
+}
+exports.getDefaultPresetTabs = getDefaultPresetTabs;
+function filterPresetTabs(tabs, { minValue } = {}) {
+    return tabs.reduce((acc, tab) => {
+        const presets = filterPresets(tab.presets, minValue);
+        if (presets.length) {
+            acc.push(Object.assign(Object.assign({}, tab), { presets }));
+        }
+        return acc;
+    }, []);
+}
+exports.filterPresetTabs = filterPresetTabs;

package/dist/cjs/components/RelativeRangeDatePicker/components/Zones/Zones.css

@@ -0,0 +1,3 @@
+.g-date-relative-range-date-picker-zones__control {
+  --g-button-background-color-hover: transparent;
+}

package/dist/cjs/components/RelativeRangeDatePicker/components/Zones/Zones.d.ts

@@ -0,0 +1,9 @@
+import './Zones.css';
+export interface ZonesProps {
+    value: string;
+    onUpdate: (timeZone: string) => void;
+    size?: 's' | 'm' | 'l' | 'xl';
+    isMobile?: boolean;
+    disabled?: boolean;
+}
+export declare function Zones(props: ZonesProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/RelativeRangeDatePicker/components/Zones/Zones.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Zones = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const date_utils_1 = require("@gravity-ui/date-utils");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn");
+const utils_1 = require("../../utils");
+const i18n_1 = require("./i18n");
+require("./Zones.css");
+const groups = {};
+const zones = (0, date_utils_1.getTimeZonesList)().reduce((opts, value) => {
+    const [groupName] = value.split('/');
+    if (groupName) {
+        let group = groups[groupName];
+        if (!group) {
+            group = { label: groupName, options: [] };
+            groups[groupName] = group;
+            opts.push(group);
+        }
+        group.options.push({ value });
+    }
+    return opts;
+}, []);
+zones.unshift({
+    value: 'UTC',
+});
+zones.unshift({
+    value: 'system',
+    get content() {
+        return (0, i18n_1.i18n)('system');
+    },
+});
+zones.unshift({
+    value: 'default',
+    get content() {
+        return (0, i18n_1.i18n)('default');
+    },
+});
+const b = (0, cn_1.block)('relative-range-date-picker-zones');
+function Zones(props) {
+    const timeZone = (0, utils_1.normalizeTimeZone)(props.value);
+    const size = props.isMobile ? 'xl' : props.size;
+    return ((0, jsx_runtime_1.jsx)(uikit_1.Select, { value: [timeZone], options: zones, size: size, onUpdate: (v) => {
+            const tz = v[0];
+            if (tz) {
+                props.onUpdate(tz);
+            }
+        }, width: "max", renderControl: (controlProps) => {
+            const value = timeZone === 'system' || timeZone === 'default' ? (0, i18n_1.i18n)(timeZone) : timeZone;
+            return ((0, jsx_runtime_1.jsxs)(uikit_1.Button, { onClick: controlProps.onClick, ref: controlProps.ref, view: "flat-secondary", width: "max", pin: "clear-clear", size: size, extraProps: {
+                    'aria-haspopup': 'listbox',
+                    'aria-expanded': controlProps.open,
+                    onKeyDown: controlProps.onKeyDown,
+                }, className: b('control'), children: [`${value} (${(0, utils_1.getTimeZoneOffset)(timeZone)})`, (0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('control-icon'), data: icons_1.ChevronRight, size: props.isMobile ? 20 : 16 })] }));
+        }, renderOption: ({ value, content }) => {
+            const v = content !== null && content !== void 0 ? content : value;
+            return ((0, jsx_runtime_1.jsxs)("span", { className: b('item'), children: [(0, jsx_runtime_1.jsxs)("span", { className: b('item-title'), title: value, children: [v, "\u00A0"] }), (0, jsx_runtime_1.jsx)(uikit_1.Text, { color: "secondary", children: (0, utils_1.getTimeZoneOffset)(value) })] }));
+        }, filterable: true }));
+}
+exports.Zones = Zones;

package/dist/cjs/components/RelativeRangeDatePicker/components/Zones/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "default": "Default",
+  "system": "Browser time"
+}

package/dist/cjs/components/RelativeRangeDatePicker/components/Zones/i18n/index.d.ts

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

package/dist/cjs/components/RelativeRangeDatePicker/components/Zones/i18n/index.js

@@ -0,0 +1,9 @@
+"use strict";
+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 = 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}relative-range-date-picker-zones`);

package/dist/cjs/components/RelativeRangeDatePicker/components/Zones/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "default": "Дефолтная",
+  "system": "Браузерное время"
+}

package/dist/cjs/components/RelativeRangeDatePicker/hooks/useRelativeRangeDatePickerState.d.ts

@@ -0,0 +1,26 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { Value } from '../../RelativeDatePicker';
+import type { RangeValue } from '../../types';
+export interface RelativeRangeDatePickerState {
+    value: RangeValue<Value | null> | null;
+    timeZone: string;
+    setValue: (value: RangeValue<Value | null> | null, timeZone: string) => void;
+    isInvalid: boolean;
+    errors: string[];
+}
+export interface RelativeRangeDatePickerStateOptions {
+    value?: RangeValue<Value | null> | null;
+    defaultValue?: RangeValue<Value | null>;
+    onUpdate?: (value: RangeValue<Value | null> | null, timeZone: string) => void;
+    timeZone?: string;
+    defaultTimeZone?: string;
+    onUpdateTimeZone?: (timeZone: string) => void;
+    /** The minimum allowed date that a user may select. */
+    minValue?: DateTime;
+    /** The maximum allowed date that a user may select. */
+    maxValue?: DateTime;
+    /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
+    isDateUnavailable?: (date: DateTime) => boolean;
+    allowNullableValues?: boolean;
+}
+export declare function useRelativeRangeDatePickerState(props: RelativeRangeDatePickerStateOptions): RelativeRangeDatePickerState;

package/dist/cjs/components/RelativeRangeDatePicker/hooks/useRelativeRangeDatePickerState.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRelativeRangeDatePickerState = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const date_utils_1 = require("@gravity-ui/date-utils");
+const uikit_1 = require("@gravity-ui/uikit");
+const datePicker_1 = require("../../utils/validation/datePicker");
+const i18n_1 = require("../i18n");
+function useRelativeRangeDatePickerState(props) {
+    var _a, _b;
+    const [value, setValue] = (0, uikit_1.useControlledState)(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null);
+    const [timeZone, setTimeZone] = (0, uikit_1.useControlledState)(props.timeZone, (_b = props.defaultTimeZone) !== null && _b !== void 0 ? _b : 'default', props.onUpdateTimeZone);
+    const validation = react_1.default.useMemo(() => getRangeValidationResult(value, props.allowNullableValues, props.minValue, props.maxValue, props.isDateUnavailable, timeZone), [
+        value,
+        props.allowNullableValues,
+        props.isDateUnavailable,
+        props.maxValue,
+        props.minValue,
+        timeZone,
+    ]);
+    return Object.assign({ value,
+        timeZone,
+        setValue(v, tz) {
+            var _a;
+            setValue(v);
+            setTimeZone(tz);
+            if (value !== v || (value && timeZone !== tz)) {
+                (_a = props.onUpdate) === null || _a === void 0 ? void 0 : _a.call(props, v, tz);
+            }
+        } }, validation);
+}
+exports.useRelativeRangeDatePickerState = useRelativeRangeDatePickerState;
+function getRangeValidationResult(value, allowNullableValues, minValue, maxValue, isDateUnavailable, timeZone) {
+    if (!value) {
+        return { isInvalid: false, errors: [] };
+    }
+    const startDate = value.start ? (0, date_utils_1.dateTimeParse)(value.start.value, { timeZone }) : null;
+    const endDate = value.end ? (0, date_utils_1.dateTimeParse)(value.end.value, { timeZone, roundUp: true }) : null;
+    const startValidationResult = (0, datePicker_1.getValidationResult)(startDate, minValue, maxValue, isDateUnavailable, timeZone, (0, i18n_1.i18n)('"From"'));
+    if (!startDate && !allowNullableValues) {
+        startValidationResult.isInvalid = true;
+        startValidationResult.errors.push((0, i18n_1.i18n)('"From" is required.'));
+    }
+    const endValidationResult = (0, datePicker_1.getValidationResult)(endDate, minValue, maxValue, isDateUnavailable, timeZone, (0, i18n_1.i18n)('"To"'));
+    if (!endDate && !allowNullableValues) {
+        endValidationResult.isInvalid = true;
+        endValidationResult.errors.push((0, i18n_1.i18n)('"To" is required.'));
+    }
+    if (startDate && endDate && endDate.isBefore(startDate)) {
+        startValidationResult.isInvalid = true;
+        startValidationResult.errors.push((0, i18n_1.i18n)(`"From" can't be after "To".`));
+    }
+    return {
+        isInvalid: startValidationResult.isInvalid || endValidationResult.isInvalid,
+        errors: startValidationResult.errors.concat(endValidationResult.errors),
+    };
+}

package/dist/cjs/components/RelativeRangeDatePicker/i18n/en.json

@@ -0,0 +1,8 @@
+{
+  "\"From\"": "\"From\"",
+  "\"From\" is required.": "\"From\" is required.",
+  "\"To\"": "\"To\"",
+  "\"To\" is required.": "\"To\" is required.",
+  "\"From\" can't be after \"To\".": "\"From\" can't be after \"To\".",
+  "to": "to"
+}

package/dist/cjs/components/RelativeRangeDatePicker/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "\"From\"" | "\"From\" is required." | "\"To\"" | "\"To\" is required." | "\"From\" can't be after \"To\"." | "to", params?: import("@gravity-ui/i18n").Params | undefined) => string;

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

@@ -0,0 +1,9 @@
+"use strict";
+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 = 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}relative-range-date-picker`);

package/dist/cjs/components/RelativeRangeDatePicker/i18n/ru.json

@@ -0,0 +1,8 @@
+{
+  "\"From\"": "«От»",
+  "\"From\" is required.": "«От» обязательно.",
+  "\"To\"": "«До»",
+  "\"To\" is required.": "«До» обязательно.",
+  "\"From\" can't be after \"To\".": "«От» не может быть позже чем «До».",
+  "to": "до"
+}

package/dist/cjs/components/RelativeRangeDatePicker/index.d.ts

@@ -0,0 +1,4 @@
+export * from './RelativeRangeDatePicker';
+export { PickerDialog as RelativeRangeDatePickerDialog } from './components/PickerDialog/PickerDialog';
+export type { PickerDialogProps as RelativeRangeDatePickerDialogProps } from './components/PickerDialog/PickerDialog';
+export * from './hooks/useRelativeRangeDatePickerState';

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RelativeRangeDatePickerDialog = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./RelativeRangeDatePicker"), exports);
+var PickerDialog_1 = require("./components/PickerDialog/PickerDialog");
+Object.defineProperty(exports, "RelativeRangeDatePickerDialog", { enumerable: true, get: function () { return PickerDialog_1.PickerDialog; } });
+tslib_1.__exportStar(require("./hooks/useRelativeRangeDatePickerState"), exports);

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

@@ -0,0 +1,15 @@
+import type { Value } from '../RelativeDatePicker';
+import type { RangeValue } from '../types';
+import type { Preset } from './components/Presets/defaultPresets';
+export declare function resolveTimeZone(timeZone: string): string;
+export declare function normalizeTimeZone(timeZone: string): string;
+export declare function getTimeZoneOffset(timeZone: string): string;
+interface GetDefaultTitleArgs {
+    value: RangeValue<Value | null> | null;
+    timeZone: string;
+    alwaysShowAsAbsolute?: boolean;
+    format?: string;
+    presets?: Preset[];
+}
+export declare function getDefaultTitle({ value, timeZone, alwaysShowAsAbsolute, format, presets, }: GetDefaultTitleArgs): string;
+export {};

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultTitle = exports.getTimeZoneOffset = exports.normalizeTimeZone = exports.resolveTimeZone = void 0;
+const date_utils_1 = require("@gravity-ui/date-utils");
+const utils_1 = require("./components/Presets/utils");
+function resolveTimeZone(timeZone) {
+    if (timeZone === 'default' || timeZone === 'system') {
+        return (0, date_utils_1.dateTime)({ timeZone }).timeZone();
+    }
+    return timeZone;
+}
+exports.resolveTimeZone = resolveTimeZone;
+function normalizeTimeZone(timeZone) {
+    const lowered = timeZone.toLowerCase();
+    if (lowered === 'default' || lowered === 'system') {
+        return lowered;
+    }
+    return resolveTimeZone(timeZone);
+}
+exports.normalizeTimeZone = normalizeTimeZone;
+function getTimeZoneOffset(timeZone) {
+    return `UTC ${(0, date_utils_1.dateTime)({ timeZone }).format('Z')}`;
+}
+exports.getTimeZoneOffset = getTimeZoneOffset;
+function getDefaultTitle({ value, timeZone, alwaysShowAsAbsolute, format = 'L', presets, }) {
+    var _a, _b, _c, _d, _e, _f;
+    if (!value) {
+        return '';
+    }
+    const tz = timeZone === 'system' ? '' : ` (${getTimeZoneOffset(timeZone)})`;
+    let from = '';
+    if (value.start) {
+        from =
+            value.start.type === 'relative' && !alwaysShowAsAbsolute
+                ? value.start.value
+                : (_b = (_a = (0, date_utils_1.dateTimeParse)(value.start.value, { timeZone })) === null || _a === void 0 ? void 0 : _a.format(format)) !== null && _b !== void 0 ? _b : '';
+    }
+    let to = '';
+    if (value.end) {
+        to =
+            value.end.type === 'relative' && !alwaysShowAsAbsolute
+                ? value.end.value
+                : (_d = (_c = (0, date_utils_1.dateTimeParse)(value.end.value, { timeZone, roundUp: true })) === null || _c === void 0 ? void 0 : _c.format(format)) !== null && _d !== void 0 ? _d : '';
+    }
+    if (!alwaysShowAsAbsolute &&
+        ((_e = value.start) === null || _e === void 0 ? void 0 : _e.type) === 'relative' &&
+        ((_f = value.end) === null || _f === void 0 ? void 0 : _f.type) === 'relative') {
+        return `${(0, utils_1.getPresetTitle)(value.start.value, value.end.value, presets)}${tz}`;
+    }
+    const delimiter = ' — ';
+    return `${from}${delimiter}${to}${tz}`;
+}
+exports.getDefaultTitle = getDefaultTitle;

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

@@ -4,3 +4,6 @@ export * from './DateField';
 export * from './DatePicker';
 export * from './RelativeDateField';
 export * from './RelativeDatePicker';
+export * from './RangeDateField';
+export * from './RelativeRangeDatePicker';
+export type { RangeValue } from './types';

package/dist/cjs/components/index.js

@@ -7,3 +7,5 @@ tslib_1.__exportStar(require("./DateField"), exports);
 tslib_1.__exportStar(require("./DatePicker"), exports);
 tslib_1.__exportStar(require("./RelativeDateField"), exports);
 tslib_1.__exportStar(require("./RelativeDatePicker"), exports);
+tslib_1.__exportStar(require("./RangeDateField"), exports);
+tslib_1.__exportStar(require("./RelativeRangeDatePicker"), exports);

package/dist/cjs/components/types/datePicker.d.ts

@@ -1,6 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { InputBase, Validation, ValueBase } from './inputs';
-export interface DateFieldBase<T = DateTime> extends ValueBase<T, T | null>, InputBase, Validation {
+export interface DateFieldBase<T = DateTime> extends ValueBase<T | null>, InputBase, Validation {
     /** The minimum allowed date that a user may select. */
     minValue?: DateTime;
     /** The maximum allowed date that a user may select. */
@@ -11,6 +11,9 @@ export interface DateFieldBase<T = DateTime> extends ValueBase<T, T | null>, Inp
     format?: string;
     /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */
     placeholderValue?: DateTime;
-    /** */
+    /**
+     * Which timezone use to show values. Example: 'default', 'system', 'Europe/Amsterdam'.
+     * @default The timezone of the `value` or `defaultValue` or `placeholderValue`, 'default' otherwise.
+     */
     timeZone?: string;
 }

package/dist/cjs/components/types/events.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="react" />
 export interface KeyboardEvents {
     /** Handler that is called when a key is pressed. */
-    onKeyDown?: (e: React.KeyboardEvent) => void;
+    onKeyDown?(e: React.KeyboardEvent): void;
     /** Handler that is called when a key is released. */
-    onKeyUp?: (e: React.KeyboardEvent) => void;
+    onKeyUp?(e: React.KeyboardEvent): void;
 }
 export interface FocusEvents<Target = Element> {
     /** Handler that is called when the element receives focus. */
-    onFocus?: (e: React.FocusEvent<Target>) => void;
+    onFocus?(e: React.FocusEvent<Target>): void;
     /** Handler that is called when the element loses focus. */
-    onBlur?: (e: React.FocusEvent<Target>) => void;
+    onBlur?(e: React.FocusEvent<Target>): void;
 }
 export interface FocusableProps<Target = Element> extends FocusEvents<Target> {
     /** Whether the element should receive focus on render. */

package/dist/cjs/components/types/inputs.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TextInputProps as TextInputBaseProps, TextInputPin, TextInputSize, TextInputView } from '@gravity-ui/uikit';
 export type ValidationState = 'invalid';
 export interface AccessibilityProps {
@@ -13,22 +12,24 @@ export interface AccessibilityProps {
 }
 export interface ValueBase<T, C = T> {
     /** The current value (controlled). */
-    value?: T | null;
+    value?: T;
     /** The default value (uncontrolled). */
     defaultValue?: T;
     /** Handler that is called when the value changes. */
     onUpdate?: (value: C) => void;
 }
-export interface Validation {
-    /** Whether the input should display its "invalid" visual styling */
-    validationState?: ValidationState;
-    /** An error message for the field */
-    errorMessage?: React.ReactNode;
+export interface Validation extends Pick<TextInputBaseProps, 'validationState' | 'errorMessage' | 'errorPlacement'> {
 }
 export interface DomProps {
     /** The element's unique identifier. */
     id?: string;
 }
+export interface InputDOMProps {
+    /**
+     * The name of the input element, used when submitting an HTML form.
+     */
+    name?: string;
+}
 export interface InputBase {
     /**
      * Whether the field is disabled.
@@ -65,11 +66,11 @@ export interface TextInputExtendProps {
     /**
      * User`s node rendered before label and input
      */
-    leftContent?: TextInputBaseProps['leftContent'];
+    startContent?: TextInputBaseProps['startContent'];
     /**
      * User`s node rendered after input and clear button
      */
-    rightContent?: TextInputBaseProps['rightContent'];
+    endContent?: TextInputBaseProps['endContent'];
 }
 export interface RangeValue<T> {
     /** The start value of the range. */

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

@@ -1,9 +1,8 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-interface PlaceholderValueOptions {
+export interface PlaceholderValueOptions {
     placeholderValue?: DateTime;
     timeZone?: string;
 }
 export declare function createPlaceholderValue({ placeholderValue, timeZone }: PlaceholderValueOptions): DateTime;
 export declare function isInvalid(value: DateTime | null | undefined, minValue: DateTime | undefined, maxValue: DateTime | undefined): boolean;
 export declare function mergeDateTime(date: DateTime, time: DateTime): DateTime;
-export {};

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

@@ -0,0 +1,2 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+export declare function useDefaultTimeZone(date: DateTime | null | undefined): string;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDefaultTimeZone = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function useDefaultTimeZone(date) {
+    const defaultTimeZone = date ? date.timeZone() : 'default';
+    const [lastValue, setLastValue] = react_1.default.useState(defaultTimeZone);
+    if (date && defaultTimeZone !== lastValue) {
+        setLastValue(defaultTimeZone);
+    }
+    const timeZone = date ? defaultTimeZone : lastValue;
+    return timeZone;
+}
+exports.useDefaultTimeZone = useDefaultTimeZone;

package/dist/cjs/components/utils/validation/datePicker.d.ts

@@ -0,0 +1,6 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+export interface ValidationResult {
+    isInvalid: boolean;
+    errors: string[];
+}
+export declare function getValidationResult(value: DateTime | null | undefined, minValue: DateTime | undefined, maxValue: DateTime | undefined, isDateUnavailable: ((v: DateTime) => boolean) | undefined, timeZone: string, valueTitle?: string): ValidationResult;

package/dist/cjs/components/utils/validation/datePicker.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getValidationResult = void 0;
+const i18n_1 = require("./i18n");
+function getValidationResult(value, minValue, maxValue, isDateUnavailable, timeZone, valueTitle = 'Value') {
+    const rangeOverflow = value && maxValue && maxValue.isBefore(value);
+    const rangeUnderflow = value && minValue && value.isBefore(minValue);
+    const isUnavailable = (value && (isDateUnavailable === null || isDateUnavailable === void 0 ? void 0 : isDateUnavailable(value))) || false;
+    const isInvalid = rangeOverflow || rangeUnderflow || isUnavailable;
+    const errors = [];
+    if (isInvalid) {
+        if (rangeUnderflow) {
+            errors.push((0, i18n_1.i18n)('Value must be {minValue} or later.', {
+                minValue: minValue.timeZone(timeZone).format(),
+                value: valueTitle,
+            }));
+        }
+        if (rangeOverflow) {
+            errors.push((0, i18n_1.i18n)('Value must be {maxValue} or earlier.', {
+                maxValue: maxValue.timeZone(timeZone).format(),
+                value: valueTitle,
+            }));
+        }
+        if (isUnavailable) {
+            errors.push((0, i18n_1.i18n)('Selected date unavailable.'));
+        }
+    }
+    return { isInvalid, errors };
+}
+exports.getValidationResult = getValidationResult;

package/dist/cjs/components/utils/validation/i18n/en.json

@@ -0,0 +1,6 @@
+{
+  "Value must be {minValue} or later.": "{{value}} must be {{minValue}} or later.",
+  "Value must be {maxValue} or earlier.": "{{value}} must be {{maxValue}} or earlier.",
+  "Selected date unavailable.": "Selected date unavailable.",
+  "Value is required.": "{{value}} is required."
+}

package/dist/cjs/components/utils/validation/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "Selected date unavailable." | "Value must be {minValue} or later." | "Value must be {maxValue} or earlier." | "Value is required.", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/cjs/components/utils/validation/i18n/index.js

@@ -0,0 +1,9 @@
+"use strict";
+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 = 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}validation`);

package/dist/cjs/components/utils/validation/i18n/ru.json

@@ -0,0 +1,6 @@
+{
+  "Value must be {minValue} or later.": "{value} должно ровняться {minValue} или быть позже.",
+  "Value must be {maxValue} or earlier.": "{value} должно ровняться {maxValue} или быть раньше.",
+  "Selected date unavailable.": "Выбранная дата недоступна.",
+  "Value is required.": "{value} обязательно."
+}