@gravity-ui/date-components 1.6.0 → 2.1.0

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

@@ -3,67 +3,76 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDatePickerState = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const DateField_1 = require("../../DateField");
-const utils_1 = require("../../DateField/utils");
-const useControlledState_1 = require("../../hooks/useControlledState");
 const dates_1 = require("../../utils/dates");
+const useDefaultTimeZone_1 = require("../../utils/useDefaultTimeZone");
 function useDatePickerState(props) {
+    var _a;
     const { disabled, readOnly } = props;
     const [isOpen, setOpen] = react_1.default.useState(false);
-    const [value, setValue] = (0, useControlledState_1.useControlledState)(props.value, props.defaultValue, props.onUpdate);
+    const [value, setValue] = (0, uikit_1.useControlledState)(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
     const [selectedDateInner, setSelectedDate] = react_1.default.useState(null);
     const [selectedTimeInner, setSelectedTime] = react_1.default.useState(null);
+    const inputTimeZone = (0, useDefaultTimeZone_1.useDefaultTimeZone)(props.value || props.defaultValue || props.placeholderValue);
+    const timeZone = props.timeZone || inputTimeZone;
     let selectedDate = selectedDateInner;
     let selectedTime = selectedTimeInner;
     const format = props.format || 'L';
-    const { hasDate, hasTime, timeFormat } = react_1.default.useMemo(() => {
-        const sections = (0, utils_1.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((0, dates_1.mergeDateTime)(date, time));
+        setValue((0, dates_1.mergeDateTime)(date, time).timeZone(inputTimeZone));
         setSelectedDate(null);
         setSelectedTime(null);
     };
+    const dateFieldState = (0, DateField_1.useDateFieldState)({
+        value,
+        onUpdate(date) {
+            if (date) {
+                commitValue(date, date);
+            }
+            else {
+                setValue(null);
+            }
+        },
+        disabled,
+        readOnly,
+        validationState: props.validationState,
+        minValue: props.minValue,
+        maxValue: props.maxValue,
+        isDateUnavailable: props.isDateUnavailable,
+        format,
+        placeholderValue: props.placeholderValue,
+        timeZone,
+    });
+    const timeFormat = react_1.default.useMemo(() => {
+        const hasSeconds = dateFieldState.sections.some((s) => s.type === 'second');
+        return hasSeconds ? 'LTS' : 'LT';
+    }, [dateFieldState.sections]);
+    if (value) {
+        selectedDate = value.timeZone(timeZone);
+        if (dateFieldState.hasTime) {
+            selectedTime = value.timeZone(timeZone);
+        }
+    }
     // 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) {
+        const shouldClose = !dateFieldState.hasTime;
+        if (dateFieldState.hasTime) {
             if (selectedTime || shouldClose) {
-                commitValue(newValue, selectedTime || getPlaceholderTime(props.placeholderValue, props.timeZone));
+                commitValue(newValue, selectedTime || newValue);
             }
             else {
                 setSelectedDate(newValue);
             }
         }
         else {
-            setValue(newValue);
+            commitValue(newValue, newValue);
         }
         if (shouldClose) {
             setOpen(false);
@@ -73,29 +82,33 @@ function useDatePickerState(props) {
         if (disabled || readOnly) {
             return;
         }
+        const newTime = newValue !== null && newValue !== void 0 ? newValue : (0, dates_1.createPlaceholderValue)({
+            placeholderValue: props.placeholderValue,
+            timeZone,
+        });
         if (selectedDate) {
-            commitValue(selectedDate, newValue);
+            commitValue(selectedDate, newTime);
         }
         else {
-            setSelectedTime(newValue);
+            setSelectedTime(newTime);
         }
     };
-    const dateFieldState = (0, DateField_1.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,
-    });
+    if (dateFieldState.hasTime && !selectedTime) {
+        selectedTime = dateFieldState.displayValue;
+    }
     return {
-        value: value !== null && value !== void 0 ? value : null,
-        setValue,
+        value,
+        setValue(newDate) {
+            if (props.readOnly || props.disabled) {
+                return;
+            }
+            if (newDate) {
+                setValue(newDate.timeZone(inputTimeZone));
+            }
+            else {
+                setValue(null);
+            }
+        },
         dateValue: selectedDate,
         timeValue: selectedTime,
         setDateValue: selectDate,
@@ -103,13 +116,18 @@ function useDatePickerState(props) {
         disabled,
         readOnly,
         format,
-        hasDate,
-        hasTime,
+        hasDate: dateFieldState.hasDate,
+        hasTime: dateFieldState.hasTime,
         timeFormat,
+        timeZone,
         isOpen,
         setOpen(newIsOpen) {
-            if (!newIsOpen && !value && selectedDate && hasTime) {
-                commitValue(selectedDate, selectedTime || getPlaceholderTime(props.placeholderValue, props.timeZone));
+            if (!newIsOpen && !value && selectedDate && dateFieldState.hasTime) {
+                commitValue(selectedDate, selectedTime ||
+                    (0, dates_1.createPlaceholderValue)({
+                        placeholderValue: props.placeholderValue,
+                        timeZone: inputTimeZone,
+                    }));
             }
             setOpen(newIsOpen);
         },
@@ -117,6 +135,3 @@ function useDatePickerState(props) {
     };
 }
 exports.useDatePickerState = useDatePickerState;
-function getPlaceholderTime(placeholderValue, timeZone) {
-    return (0, dates_1.createPlaceholderValue)({ placeholderValue, timeZone });
-}

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { CalendarInstance, CalendarSize } from '../CalendarBase/CalendarBase';
-import type { RangeCalendarStateOptions } from '../CalendarBase/hooks/useRangeCalendarState';
+import type { CalendarInstance, CalendarSize } from '../CalendarView/CalendarView';
+import type { RangeCalendarStateOptions } from '../CalendarView/hooks/useRangeCalendarState';
 import type { AccessibilityProps, DomProps, FocusEvents, StyleProps } from '../types';
-import '../CalendarBase/Calendar.css';
+import '../CalendarView/Calendar.css';
 export interface RangeCalendarProps extends RangeCalendarStateOptions, DomProps, StyleProps, FocusEvents, AccessibilityProps {
     /**
      * The size of the element.

package/dist/cjs/components/RangeCalendar/RangeCalendar.js

@@ -4,9 +4,9 @@ exports.RangeCalendar = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
-const CalendarBase_1 = require("../CalendarBase/CalendarBase");
-const useRangeCalendarState_1 = require("../CalendarBase/hooks/useRangeCalendarState");
-require("../CalendarBase/Calendar.css");
+const CalendarView_1 = require("../CalendarView/CalendarView");
+const useRangeCalendarState_1 = require("../CalendarView/hooks/useRangeCalendarState");
+require("../CalendarView/Calendar.css");
 exports.RangeCalendar = react_1.default.forwardRef(function Calendar(props, ref) {
     const state = (0, useRangeCalendarState_1.useRangeCalendarState)(props);
     const handleBlur = (e) => {
@@ -16,5 +16,5 @@ exports.RangeCalendar = react_1.default.forwardRef(function Calendar(props, ref)
         }
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
-    return (0, jsx_runtime_1.jsx)(CalendarBase_1.CalendarBase, Object.assign({ ref: ref }, props, { state: state, onBlur: handleBlur }));
+    return (0, jsx_runtime_1.jsx)(CalendarView_1.CalendarView, Object.assign({ ref: ref }, props, { state: state, onBlur: handleBlur }));
 });

package/dist/cjs/components/RangeDateField/RangeDateField.css

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

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

@@ -0,0 +1,12 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DateFieldProps } from '../DateField/hooks/useDateFieldProps';
+import type { RangeValue } from '../types';
+import './RangeDateField.css';
+export type RangeDateFieldProps = DateFieldProps<RangeValue<DateTime>> & {
+    /**
+     * Delimiter separating the start and end parts of the range.
+     * @default ' — '
+     * */
+    delimiter?: string;
+};
+export declare function RangeDateField({ className, ...props }: RangeDateFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/RangeDateField/RangeDateField.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeDateField = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../utils/cn");
+const useDateFieldProps_1 = require("../DateField/hooks/useDateFieldProps");
+const useRangeDateFieldState_1 = require("./hooks/useRangeDateFieldState");
+require("./RangeDateField.css");
+const b = (0, cn_1.block)('range-date-field');
+function RangeDateField(_a) {
+    var { className } = _a, props = tslib_1.__rest(_a, ["className"]);
+    const state = (0, useRangeDateFieldState_1.useRangeDateFieldState)(props);
+    const { inputProps } = (0, useDateFieldProps_1.useDateFieldProps)(state, props);
+    const [isActive, setActive] = react_1.default.useState(false);
+    const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
+        onFocusWithinChange(isFocusWithin) {
+            setActive(isFocusWithin);
+        },
+    });
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })) })));
+}
+exports.RangeDateField = RangeDateField;

package/dist/cjs/components/RangeDateField/hooks/useRangeDateFieldState.d.ts

@@ -0,0 +1,9 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { BaseDateFieldState } from '../../DateField';
+import type { DateFieldBase } from '../../types/datePicker';
+import type { RangeValue } from '../../types/inputs';
+export interface RangeDateFieldStateOptions extends DateFieldBase<RangeValue<DateTime>> {
+    delimiter?: string;
+}
+export type RangeDateFieldState = BaseDateFieldState<RangeValue<DateTime>>;
+export declare function useRangeDateFieldState(props: RangeDateFieldStateOptions): RangeDateFieldState;

package/dist/cjs/components/RangeDateField/hooks/useRangeDateFieldState.js

@@ -0,0 +1,227 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRangeDateFieldState = void 0;
+const tslib_1 = require("tslib");
+/* eslint-disable complexity */
+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 DateField_1 = require("../../DateField");
+const utils_1 = require("../../DateField/utils");
+const dates_1 = require("../../utils/dates");
+const useDefaultTimeZone_1 = require("../../utils/useDefaultTimeZone");
+const utils_2 = require("../utils");
+const RANGE_FORMAT_DELIMITER = ' — ';
+function useRangeDateFieldState(props) {
+    var _a, _b, _c, _d, _e;
+    const [value, setRange] = (0, uikit_1.useControlledState)(props.value, props.defaultValue || null, props.onUpdate);
+    const inputTimeZone = (0, useDefaultTimeZone_1.useDefaultTimeZone)(((_a = props.value) === null || _a === void 0 ? void 0 : _a.start) || ((_b = props.defaultValue) === null || _b === void 0 ? void 0 : _b.start) || props.placeholderValue);
+    const timeZone = props.timeZone || inputTimeZone;
+    const handleUpdateRange = (v) => {
+        setRange(v ? { start: v.start.timeZone(inputTimeZone), end: v.end.timeZone(inputTimeZone) } : v);
+    };
+    const [placeholderDate, setPlaceholderDate] = react_1.default.useState(() => {
+        return (0, utils_2.createPlaceholderRangeValue)({
+            placeholderValue: props.placeholderValue,
+            timeZone,
+        });
+    });
+    const format = props.format || 'L';
+    const delimiter = (_c = props.delimiter) !== null && _c !== void 0 ? _c : RANGE_FORMAT_DELIMITER;
+    const sections = (0, utils_1.useFormatSections)(format);
+    const allSegments = react_1.default.useMemo(() => {
+        return sections
+            .filter((seg) => utils_1.EDITABLE_SEGMENTS[seg.type])
+            .reduce((p, seg) => (Object.assign(Object.assign({}, p), { [seg.type]: true })), {});
+    }, [sections]);
+    // eslint-disable-next-line prefer-const
+    let [validSegments, setValidSegments] = react_1.default.useState(() => (value ? { start: Object.assign({}, allSegments), end: Object.assign({}, allSegments) } : { start: {}, end: {} }));
+    if (value &&
+        (!(0, utils_1.isAllSegmentsValid)(allSegments, validSegments.start) ||
+            !(0, utils_1.isAllSegmentsValid)(allSegments, validSegments.end))) {
+        setValidSegments({ start: Object.assign({}, allSegments), end: Object.assign({}, allSegments) });
+    }
+    if (!value &&
+        (0, utils_1.isAllSegmentsValid)(allSegments, validSegments.start) &&
+        Object.keys(validSegments.start).length === Object.keys(allSegments).length &&
+        (0, utils_1.isAllSegmentsValid)(allSegments, validSegments.end) &&
+        Object.keys(validSegments.end).length === Object.keys(allSegments).length) {
+        validSegments = { start: {}, end: {} };
+        setValidSegments(validSegments);
+        setPlaceholderDate((0, utils_2.createPlaceholderRangeValue)({
+            placeholderValue: props.placeholderValue,
+            timeZone,
+        }));
+    }
+    const displayValue = value &&
+        (0, date_utils_1.isValid)(value.start) &&
+        (0, date_utils_1.isValid)(value.end) &&
+        Object.keys(validSegments.start).length >= Object.keys(allSegments).length &&
+        Object.keys(validSegments.end).length >= Object.keys(allSegments).length
+        ? { start: value.start.timeZone(timeZone), end: value.end.timeZone(timeZone) }
+        : {
+            start: placeholderDate.start.timeZone(timeZone),
+            end: placeholderDate.end.timeZone(timeZone),
+        };
+    const sectionsState = useSectionsState(sections, displayValue, validSegments, delimiter);
+    const [selectedSections, setSelectedSections] = react_1.default.useState(-1);
+    const selectedSectionIndexes = react_1.default.useMemo(() => {
+        if (selectedSections === -1) {
+            return null;
+        }
+        if (selectedSections === 'all') {
+            return {
+                startIndex: 0,
+                endIndex: sectionsState.editableSections.length - 1,
+            };
+        }
+        if (typeof selectedSections === 'number') {
+            return { startIndex: selectedSections, endIndex: selectedSections };
+        }
+        if (typeof selectedSections === 'string') {
+            const selectedSectionIndex = sectionsState.editableSections.findIndex((section) => section.type === selectedSections);
+            return { startIndex: selectedSectionIndex, endIndex: selectedSectionIndex };
+        }
+        return selectedSections;
+    }, [selectedSections, sectionsState.editableSections]);
+    function setValue(newValue) {
+        if (props.disabled || props.readOnly) {
+            return;
+        }
+        if ((0, utils_1.isAllSegmentsValid)(allSegments, validSegments.start) &&
+            (0, utils_1.isAllSegmentsValid)(allSegments, validSegments.end)) {
+            if (!value || !(newValue.start.isSame(value.start) && newValue.end.isSame(value.end))) {
+                handleUpdateRange(newValue);
+            }
+        }
+        else {
+            if (value) {
+                handleUpdateRange(null);
+            }
+            setPlaceholderDate(newValue);
+        }
+    }
+    function markValid(portion, part) {
+        validSegments[portion][part] = true;
+        if (validSegments[portion].day &&
+            validSegments[portion].month &&
+            validSegments[portion].year &&
+            allSegments.weekday) {
+            validSegments[portion].weekday = true;
+        }
+        if (validSegments[portion].hour && allSegments.dayPeriod) {
+            validSegments[portion].dayPeriod = true;
+        }
+        setValidSegments(Object.assign(Object.assign({}, validSegments), { [portion]: Object.assign({}, validSegments[portion]) }));
+    }
+    function setSection(sectionIndex, amount) {
+        const portion = sectionIndex <= sections.length ? 'start' : 'end';
+        const section = sectionsState.editableSections[sectionIndex];
+        markValid(portion, section.type);
+        setValue(Object.assign(Object.assign({}, displayValue), { [portion]: (0, utils_1.setSegment)(section, displayValue[portion], amount) }));
+    }
+    function adjustSection(sectionIndex, amount) {
+        const section = sectionsState.editableSections[sectionIndex];
+        const portion = sectionIndex <= sections.length ? 'start' : 'end';
+        if (validSegments[portion][section.type]) {
+            setValue(Object.assign(Object.assign({}, displayValue), { [portion]: (0, utils_1.addSegment)(section, displayValue[portion], amount) }));
+        }
+        else {
+            markValid(portion, section.type);
+            if (Object.keys(validSegments[portion]).length >= Object.keys(allSegments).length) {
+                setValue(displayValue);
+            }
+        }
+    }
+    function flushValidSection(sectionIndex) {
+        const portion = sectionIndex <= sections.length ? 'start' : 'end';
+        delete validSegments[portion][sectionsState.editableSections[sectionIndex].type];
+        setValidSegments(Object.assign(Object.assign({}, validSegments), { [portion]: Object.assign({}, validSegments[portion]) }));
+    }
+    function flushAllValidSections() {
+        validSegments = { start: {}, end: {} };
+        setValidSegments({ start: {}, end: {} });
+    }
+    function getSectionValue(sectionIndex) {
+        const portion = sectionIndex <= sections.length ? 'start' : 'end';
+        return displayValue[portion];
+    }
+    function setSectionValue(sectionIndex, currentValue) {
+        const portion = sectionIndex <= sections.length ? 'start' : 'end';
+        setValue(Object.assign(Object.assign({}, displayValue), { [portion]: currentValue }));
+    }
+    function createPlaceholder() {
+        return (0, utils_2.createPlaceholderRangeValue)({
+            placeholderValue: props.placeholderValue,
+            timeZone,
+        });
+    }
+    function setValueFromString(str) {
+        var _a, _b;
+        const list = str.split(delimiter);
+        const start = (0, utils_1.parseDateFromString)((_a = list === null || list === void 0 ? void 0 : list[0]) === null || _a === void 0 ? void 0 : _a.trim(), format, timeZone);
+        const end = (0, utils_1.parseDateFromString)((_b = list === null || list === void 0 ? void 0 : list[1]) === null || _b === void 0 ? void 0 : _b.trim(), format, timeZone);
+        const range = { start, end };
+        if ((0, date_utils_1.isValid)(range.start) && (0, date_utils_1.isValid)(range.end)) {
+            handleUpdateRange(range);
+            return true;
+        }
+        return false;
+    }
+    const validationState = props.validationState ||
+        ((0, dates_1.isInvalid)(value === null || value === void 0 ? void 0 : value.start, props.minValue, props.maxValue) ? 'invalid' : undefined) ||
+        ((0, dates_1.isInvalid)(value === null || value === void 0 ? void 0 : value.end, props.minValue, props.maxValue) ? 'invalid' : undefined) ||
+        (value && !(0, utils_2.isValidRange)(value) ? 'invalid' : undefined) ||
+        (value && ((_d = props.isDateUnavailable) === null || _d === void 0 ? void 0 : _d.call(props, value.start)) ? 'invalid' : undefined) ||
+        (value && ((_e = props.isDateUnavailable) === null || _e === void 0 ? void 0 : _e.call(props, value.end)) ? 'invalid' : undefined);
+    return (0, DateField_1.useBaseDateFieldState)({
+        value,
+        displayValue,
+        placeholderValue: props.placeholderValue,
+        timeZone,
+        validationState,
+        editableSections: sectionsState.editableSections,
+        readOnly: props.readOnly,
+        disabled: props.disabled,
+        selectedSectionIndexes,
+        selectedSections,
+        isEmpty: Object.keys(validSegments.start).length === 0 &&
+            Object.keys(validSegments.end).length === 0,
+        flushAllValidSections,
+        flushValidSection,
+        setSelectedSections,
+        setValue,
+        setDate: handleUpdateRange,
+        adjustSection,
+        setSection,
+        getSectionValue,
+        setSectionValue,
+        createPlaceholder,
+        setValueFromString,
+    });
+}
+exports.useRangeDateFieldState = useRangeDateFieldState;
+function useSectionsState(sections, value, validSegments, delimiter) {
+    const [state, setState] = react_1.default.useState(() => {
+        return {
+            value,
+            sections,
+            validSegments,
+            delimiter,
+            editableSections: (0, utils_2.getRangeEditableSections)(sections, value, validSegments, delimiter),
+        };
+    });
+    if (sections !== state.sections ||
+        validSegments !== state.validSegments ||
+        !(value.start.isSame(state.value.start) && value.end.isSame(state.value.end)) ||
+        delimiter !== state.delimiter) {
+        setState({
+            value,
+            sections,
+            validSegments,
+            delimiter,
+            editableSections: (0, utils_2.getRangeEditableSections)(sections, value, validSegments, delimiter),
+        });
+    }
+    return state;
+}

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

@@ -0,0 +1,2 @@
+export * from './RangeDateField';
+export * from './hooks/useRangeDateFieldState';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./RangeDateField"), exports);
+tslib_1.__exportStar(require("./hooks/useRangeDateFieldState"), exports);

package/dist/cjs/components/RangeDateField/utils/createPlaceholderRangeValue.d.ts

@@ -0,0 +1,5 @@
+import type { PlaceholderValueOptions } from '../../utils/dates';
+export declare function createPlaceholderRangeValue({ placeholderValue, timeZone }: PlaceholderValueOptions): {
+    start: import("@gravity-ui/date-utils").DateTime;
+    end: import("@gravity-ui/date-utils").DateTime;
+};

package/dist/cjs/components/RangeDateField/utils/createPlaceholderRangeValue.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPlaceholderRangeValue = void 0;
+const dates_1 = require("../../utils/dates");
+function createPlaceholderRangeValue({ placeholderValue, timeZone }) {
+    const date = (0, dates_1.createPlaceholderValue)({ placeholderValue, timeZone });
+    return { start: date, end: date };
+}
+exports.createPlaceholderRangeValue = createPlaceholderRangeValue;

package/dist/cjs/components/RangeDateField/utils/getRangeEditableSections.d.ts

@@ -0,0 +1,5 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DateFieldSectionWithoutPosition } from '../../DateField/types';
+import type { EDITABLE_SEGMENTS } from '../../DateField/utils';
+import type { RangeValue } from '../../types';
+export declare function getRangeEditableSections(sections: DateFieldSectionWithoutPosition[], value: RangeValue<DateTime>, validSegments: RangeValue<typeof EDITABLE_SEGMENTS>, delimiter: string): import("../../DateField/types").DateFieldSection[];

package/dist/cjs/components/RangeDateField/utils/getRangeEditableSections.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRangeEditableSections = void 0;
+const utils_1 = require("../../DateField/utils");
+function getRangeEditableSections(sections, value, validSegments, delimiter) {
+    const start = (0, utils_1.getEditableSections)(sections, value.start, validSegments.start);
+    const end = (0, utils_1.getEditableSections)(sections, value.end, validSegments.end);
+    const last = start[start.length - 1];
+    let position = last.end;
+    const previousEditableSection = last.nextEditableSection;
+    const sectionsCount = start.length + 1;
+    const delimiterSection = (0, utils_1.toEditableSection)({
+        type: 'literal',
+        contentType: 'letter',
+        format: delimiter,
+        placeholder: delimiter,
+        hasLeadingZeros: false,
+    }, value.start, validSegments.start, position, previousEditableSection);
+    position += delimiterSection.textValue.length - 1;
+    let nextEditableSection;
+    for (let index = 0; index < end.length; index++) {
+        const section = end[index];
+        section.start += position;
+        section.end += position;
+        if (section.previousEditableSection === 0 && nextEditableSection === undefined) {
+            section.previousEditableSection = previousEditableSection;
+        }
+        else {
+            section.previousEditableSection += sectionsCount;
+        }
+        section.nextEditableSection += sectionsCount;
+        if ((0, utils_1.isEditableSection)(section) && nextEditableSection === undefined) {
+            nextEditableSection = index + sectionsCount;
+        }
+    }
+    if (nextEditableSection !== undefined) {
+        delimiterSection.nextEditableSection = nextEditableSection;
+        start[previousEditableSection].nextEditableSection = nextEditableSection;
+    }
+    return [...start, delimiterSection, ...end];
+}
+exports.getRangeEditableSections = getRangeEditableSections;

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

@@ -0,0 +1,3 @@
+export * from './getRangeEditableSections';
+export * from './isValidRange';
+export * from './createPlaceholderRangeValue';

package/dist/cjs/components/RangeDateField/utils/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./getRangeEditableSections"), exports);
+tslib_1.__exportStar(require("./isValidRange"), exports);
+tslib_1.__exportStar(require("./createPlaceholderRangeValue"), exports);

package/dist/cjs/components/RangeDateField/utils/isValidRange.d.ts

@@ -0,0 +1,3 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { RangeValue } from '../../types';
+export declare function isValidRange({ start, end }: RangeValue<DateTime>): boolean;

package/dist/cjs/components/RangeDateField/utils/isValidRange.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidRange = void 0;
+const date_utils_1 = require("@gravity-ui/date-utils");
+function isValidRange({ start, end }) {
+    return (0, date_utils_1.isValid)(start) && (0, date_utils_1.isValid)(end) && (start.isSame(end) || start.isBefore(end));
+}
+exports.isValidRange = isValidRange;

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

@@ -1,7 +1,7 @@
-import type { AccessibilityProps, DomProps, FocusableProps, KeyboardEvents, StyleProps, TextInputExtendProps, TextInputProps } from '../types';
+import type { AccessibilityProps, DomProps, FocusableProps, InputDOMProps, 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 {
+export interface RelativeDateFieldProps extends RelativeDateFieldOptions, TextInputProps, TextInputExtendProps, DomProps, InputDOMProps, StyleProps, AccessibilityProps, FocusableProps, KeyboardEvents {
     /**
      * Show time field in popup
      * @default false

package/dist/cjs/components/RelativeDateField/RelativeDateField.js

@@ -13,9 +13,10 @@ const useRelativeDateFieldState_1 = require("./hooks/useRelativeDateFieldState")
 require("./RelativeDateField.css");
 const b = (0, cn_1.block)('relative-date-field');
 function RelativeDateField(props) {
+    var _a;
     const state = (0, useRelativeDateFieldState_1.useRelativeDateFieldState)(props);
     const { inputProps, calendarProps, timeInputProps } = (0, useRelativeDateFieldProps_1.useRelativeDateFieldProps)(state, props);
-    const [isMobile] = (0, uikit_1.useMobile)();
+    const isMobile = (0, uikit_1.useMobile)();
     const anchorRef = react_1.default.useRef(null);
     const [isOpen, setOpen] = react_1.default.useState(false);
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
@@ -30,6 +31,8 @@ function RelativeDateField(props) {
                         setOpen(true);
                     }
                     (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                }, onBlur: props.onBlur })), !isMobile && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { anchorRef: anchorRef, open: isOpen, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps)), props.hasTime ? ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({ className: b('time-field') }, timeInputProps)) })) : null] }) }))] })));
+                }, onBlur: props.onBlur })), (0, jsx_runtime_1.jsx)("input", { type: "text", hidden: true, name: props.name, value: (_a = state.value) !== null && _a !== void 0 ? _a : '', 
+                // Ignore React warning
+                onChange: () => { } }), !isMobile && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { anchorRef: anchorRef, open: isOpen, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps)), props.hasTime ? ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({ className: b('time-field') }, timeInputProps)) })) : null] }) }))] })));
 }
 exports.RelativeDateField = RelativeDateField;