@gravity-ui/date-components 3.4.2 → 4.1.0

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

@@ -0,0 +1,232 @@
+import React from 'react';
+import { useControlledState, useLang } from '@gravity-ui/uikit';
+import { createPlaceholderRangeValue, isInvalid } from "../../utils/dates.js";
+import { useDefaultTimeZone } from "../../utils/useDefaultTimeZone.js";
+import { IncompleteDate } from "../IncompleteDate.js";
+import { addSegment, adjustDateToFormat, getEditableSections, getFormatInfo, isEditableSectionType, parseDateFromString, setSegment, toEditableSection, useFormatSections, } from "../utils.js";
+import { useBaseDateFieldState } from "./useBaseDateFieldState.js";
+const RANGE_FORMAT_DELIMITER = ' — ';
+export function useRangeDateFieldState(props) {
+    const [value, setRange] = useControlledState(props.value, props.defaultValue || null, props.onUpdate);
+    const inputTimeZone = useDefaultTimeZone(props.value?.start || props.defaultValue?.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 placeholder = React.useMemo(() => {
+        return createPlaceholderRangeValue({
+            placeholderValue: props.placeholderValue,
+            timeZone,
+        });
+    }, [props.placeholderValue, timeZone]);
+    const format = props.format || 'L';
+    const delimiter = props.delimiter ?? RANGE_FORMAT_DELIMITER;
+    const sections = useFormatSections(format);
+    const formatInfo = React.useMemo(() => getFormatInfo(sections), [sections]);
+    const allSegments = formatInfo.availableUnits;
+    const [displayValue, setDisplayValue] = React.useState(() => {
+        return {
+            start: new IncompleteDate(value ? value.start.timeZone(timeZone) : null),
+            end: new IncompleteDate(value ? value.end.timeZone(timeZone) : null),
+        };
+    });
+    const [lastValue, setLastValue] = React.useState(value);
+    const [lastTimezone, setLastTimezone] = React.useState(timeZone);
+    if ((value &&
+        (!lastValue ||
+            !(value.start.isSame(lastValue.start) && value.end.isSame(lastValue.end)))) ||
+        (value && lastTimezone !== timeZone) ||
+        (value === null && lastValue !== null)) {
+        setLastValue(value);
+        setLastTimezone(timeZone);
+        setDisplayValue({
+            start: new IncompleteDate(value ? value.start.timeZone(timeZone) : null),
+            end: new IncompleteDate(value ? value.end.timeZone(timeZone) : null),
+        });
+    }
+    const { lang } = useLang();
+    const rangeValue = React.useMemo(() => {
+        return {
+            start: displayValue.start
+                .toDateTime(value?.start.timeZone(timeZone) ?? placeholder.start, {
+                setDate: formatInfo.hasDate,
+                setTime: formatInfo.hasTime,
+            })
+                .locale(lang),
+            end: displayValue.end
+                .toDateTime(value?.end.timeZone(timeZone) ?? placeholder.end, {
+                setDate: formatInfo.hasDate,
+                setTime: formatInfo.hasTime,
+            })
+                .locale(lang),
+        };
+    }, [displayValue, value, placeholder, formatInfo, timeZone, lang]);
+    const sectionsState = useSectionsState(sections, displayValue, rangeValue, delimiter);
+    function setValue(newValue) {
+        if (props.disabled || props.readOnly) {
+            return;
+        }
+        if (newValue === null ||
+            (newValue.start instanceof IncompleteDate &&
+                newValue.start.isCleared(allSegments) &&
+                newValue.end instanceof IncompleteDate &&
+                newValue.end.isCleared(allSegments))) {
+            setRange(null);
+            setDisplayValue({ start: new IncompleteDate(), end: new IncompleteDate() });
+        }
+        else if (newValue.start instanceof IncompleteDate &&
+            newValue.end instanceof IncompleteDate) {
+            if (newValue.start.isComplete(allSegments) && newValue.end.isComplete(allSegments)) {
+                const newRange = {
+                    start: newValue.start.toDateTime(rangeValue.start, {
+                        setDate: formatInfo.hasDate,
+                        setTime: formatInfo.hasTime,
+                    }),
+                    end: newValue.end.toDateTime(rangeValue.end, {
+                        setDate: formatInfo.hasDate,
+                        setTime: formatInfo.hasTime,
+                    }),
+                };
+                if (newValue.start.validate(newRange.start, allSegments) &&
+                    newValue.end.validate(newRange.end, allSegments)) {
+                    if (!value ||
+                        !(newRange.start.isSame(value.start) && newRange.end.isSame(value.end))) {
+                        handleUpdateRange({
+                            start: adjustDateToFormat(newRange.start, formatInfo, 'startOf'),
+                            end: adjustDateToFormat(newRange.end, formatInfo, 'endOf'),
+                        });
+                    }
+                }
+            }
+            setDisplayValue({ start: newValue.start, end: newValue.end });
+        }
+        else if (!(newValue.start instanceof IncompleteDate) &&
+            !(newValue.end instanceof IncompleteDate) &&
+            (!value || !(value.start.isSame(newValue.start) && value.end.isSame(newValue.end)))) {
+            handleUpdateRange({ start: newValue.start, end: newValue.end });
+        }
+    }
+    function setSection(sectionIndex, amount) {
+        const portion = sectionIndex <= sections.length ? 'start' : 'end';
+        const section = sectionsState.editableSections[sectionIndex];
+        setValue({
+            ...displayValue,
+            [portion]: setSegment(section, displayValue[portion], amount, rangeValue[portion]),
+        });
+    }
+    function adjustSection(sectionIndex, amount) {
+        const section = sectionsState.editableSections[sectionIndex];
+        const portion = sectionIndex <= sections.length ? 'start' : 'end';
+        if (section) {
+            setValue({
+                ...displayValue,
+                [portion]: addSegment(section, displayValue[portion], amount, rangeValue[portion]),
+            });
+        }
+    }
+    function clearSection(sectionIndex) {
+        const section = sectionsState.editableSections[sectionIndex];
+        const portion = sectionIndex <= sections.length ? 'start' : 'end';
+        if (section && isEditableSectionType(section.type)) {
+            setValue({
+                ...displayValue,
+                [portion]: displayValue[portion].clear(section.type),
+            });
+        }
+    }
+    function setValueFromString(str) {
+        const [startDate = '', endDate = ''] = str.split(delimiter);
+        const parseDate = props.parseDateFromString ?? parseDateFromString;
+        const start = parseDate(startDate, format, timeZone);
+        const end = parseDate(endDate, format, timeZone);
+        if (start.isValid() && end.isValid()) {
+            handleUpdateRange({ start, end });
+            return true;
+        }
+        return false;
+    }
+    function confirmPlaceholder() {
+        if (props.disabled || props.readOnly) {
+            return;
+        }
+        // If the display value is complete but invalid, we need to constrain it and emit onChange on blur.
+        if (displayValue.start.isComplete(allSegments) &&
+            displayValue.end.isComplete(allSegments)) {
+            const newValue = {
+                start: adjustDateToFormat(displayValue.start.toDateTime(rangeValue.start, {
+                    setDate: formatInfo.hasDate,
+                    setTime: formatInfo.hasTime,
+                }), formatInfo, 'startOf'),
+                end: adjustDateToFormat(displayValue.end.toDateTime(rangeValue.end, {
+                    setDate: formatInfo.hasDate,
+                    setTime: formatInfo.hasTime,
+                }), formatInfo, 'endOf'),
+            };
+            setValue(newValue);
+        }
+    }
+    const validationState = props.validationState ||
+        (isInvalid(value?.start, props.minValue, props.maxValue) ? 'invalid' : undefined) ||
+        (isInvalid(value?.end, props.minValue, props.maxValue) ? 'invalid' : undefined) ||
+        (value && !isValidRange(value) ? 'invalid' : undefined) ||
+        (value && props.isDateUnavailable?.(value.start) ? 'invalid' : undefined) ||
+        (value && props.isDateUnavailable?.(value.end) ? 'invalid' : undefined);
+    return useBaseDateFieldState({
+        value,
+        displayValue: rangeValue,
+        validationState,
+        editableSections: sectionsState.editableSections,
+        formatInfo,
+        readOnly: props.readOnly,
+        disabled: props.disabled,
+        isEmpty: displayValue.start.isCleared(allSegments) && displayValue.end.isCleared(allSegments),
+        setValue,
+        adjustSection,
+        setSection,
+        clearSection,
+        setValueFromString,
+        confirmPlaceholder,
+    });
+}
+function useSectionsState(sections, value, placeholder, delimiter) {
+    const [state, setState] = React.useState(() => {
+        return {
+            value,
+            sections,
+            placeholder,
+            delimiter,
+            editableSections: getRangeEditableSections(sections, value, placeholder, delimiter),
+        };
+    });
+    if (sections !== state.sections ||
+        value !== state.value ||
+        !(placeholder.start.isSame(state.placeholder.start) &&
+            placeholder.end.isSame(state.placeholder.end)) ||
+        delimiter !== state.delimiter) {
+        setState({
+            value,
+            sections,
+            placeholder,
+            delimiter,
+            editableSections: getRangeEditableSections(sections, value, placeholder, delimiter),
+        });
+    }
+    return state;
+}
+function getRangeEditableSections(sections, value, placeholder, delimiter) {
+    const start = getEditableSections(sections, value.start, placeholder.start);
+    const end = getEditableSections(sections, value.end, placeholder.end);
+    const delimiterSection = toEditableSection({
+        type: 'literal',
+        contentType: 'letter',
+        format: delimiter,
+        placeholder: delimiter,
+        hasLeadingZeros: false,
+    }, value.start, placeholder.start);
+    const editableSections = [...start, delimiterSection, ...end];
+    return editableSections;
+}
+function isValidRange({ start, end }) {
+    return start.isValid() && end.isValid() && (start.isSame(end) || start.isBefore(end));
+}
+//# sourceMappingURL=useRangeDateFieldState.js.map

package/dist/esm/components/DateField/hooks/useRangeDateFieldState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRangeDateFieldState.js","sourceRoot":"../../../../../src","sources":["components/DateField/hooks/useRangeDateFieldState.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useControlledState, useLang} from '@gravity-ui/uikit';\n\nimport type {DateFieldBase} from '../../types/datePicker';\nimport type {RangeValue} from '../../types/inputs';\nimport {createPlaceholderRangeValue, isInvalid} from '../../utils/dates';\nimport {useDefaultTimeZone} from '../../utils/useDefaultTimeZone';\nimport {IncompleteDate} from '../IncompleteDate.js';\nimport type {FormatSection} from '../types';\nimport {\n    addSegment,\n    adjustDateToFormat,\n    getEditableSections,\n    getFormatInfo,\n    isEditableSectionType,\n    parseDateFromString,\n    setSegment,\n    toEditableSection,\n    useFormatSections,\n} from '../utils';\n\nimport type {DateFieldState} from './useBaseDateFieldState';\nimport {useBaseDateFieldState} from './useBaseDateFieldState';\n\nexport interface RangeDateFieldStateOptions extends DateFieldBase<RangeValue<DateTime>> {\n    delimiter?: string;\n}\n\nconst RANGE_FORMAT_DELIMITER = ' — ';\n\nexport type RangeDateFieldState = DateFieldState<RangeValue<DateTime>>;\n\nexport function useRangeDateFieldState(props: RangeDateFieldStateOptions): RangeDateFieldState {\n    const [value, setRange] = useControlledState(\n        props.value,\n        props.defaultValue || null,\n        props.onUpdate,\n    );\n\n    const inputTimeZone = useDefaultTimeZone(\n        props.value?.start || props.defaultValue?.start || props.placeholderValue,\n    );\n    const timeZone = props.timeZone || inputTimeZone;\n\n    const handleUpdateRange = (v: RangeValue<DateTime> | null) => {\n        setRange(\n            v ? {start: v.start.timeZone(inputTimeZone), end: v.end.timeZone(inputTimeZone)} : v,\n        );\n    };\n\n    const placeholder = React.useMemo(() => {\n        return createPlaceholderRangeValue({\n            placeholderValue: props.placeholderValue,\n            timeZone,\n        });\n    }, [props.placeholderValue, timeZone]);\n\n    const format = props.format || 'L';\n    const delimiter = props.delimiter ?? RANGE_FORMAT_DELIMITER;\n    const sections = useFormatSections(format);\n    const formatInfo = React.useMemo(() => getFormatInfo(sections), [sections]);\n    const allSegments = formatInfo.availableUnits;\n\n    const [displayValue, setDisplayValue] = React.useState(() => {\n        return {\n            start: new IncompleteDate(value ? value.start.timeZone(timeZone) : null),\n            end: new IncompleteDate(value ? value.end.timeZone(timeZone) : null),\n        };\n    });\n\n    const [lastValue, setLastValue] = React.useState(value);\n    const [lastTimezone, setLastTimezone] = React.useState(timeZone);\n    if (\n        (value &&\n            (!lastValue ||\n                !(value.start.isSame(lastValue.start) && value.end.isSame(lastValue.end)))) ||\n        (value && lastTimezone !== timeZone) ||\n        (value === null && lastValue !== null)\n    ) {\n        setLastValue(value);\n        setLastTimezone(timeZone);\n        setDisplayValue({\n            start: new IncompleteDate(value ? value.start.timeZone(timeZone) : null),\n            end: new IncompleteDate(value ? value.end.timeZone(timeZone) : null),\n        });\n    }\n\n    const {lang} = useLang();\n    const rangeValue = React.useMemo(() => {\n        return {\n            start: displayValue.start\n                .toDateTime(value?.start.timeZone(timeZone) ?? placeholder.start, {\n                    setDate: formatInfo.hasDate,\n                    setTime: formatInfo.hasTime,\n                })\n                .locale(lang),\n            end: displayValue.end\n                .toDateTime(value?.end.timeZone(timeZone) ?? placeholder.end, {\n                    setDate: formatInfo.hasDate,\n                    setTime: formatInfo.hasTime,\n                })\n                .locale(lang),\n        };\n    }, [displayValue, value, placeholder, formatInfo, timeZone, lang]);\n\n    const sectionsState = useSectionsState(sections, displayValue, rangeValue, delimiter);\n\n    function setValue(newValue: RangeValue<DateTime> | RangeValue<IncompleteDate> | null) {\n        if (props.disabled || props.readOnly) {\n            return;\n        }\n\n        if (\n            newValue === null ||\n            (newValue.start instanceof IncompleteDate &&\n                newValue.start.isCleared(allSegments) &&\n                newValue.end instanceof IncompleteDate &&\n                newValue.end.isCleared(allSegments))\n        ) {\n            setRange(null);\n            setDisplayValue({start: new IncompleteDate(), end: new IncompleteDate()});\n        } else if (\n            newValue.start instanceof IncompleteDate &&\n            newValue.end instanceof IncompleteDate\n        ) {\n            if (newValue.start.isComplete(allSegments) && newValue.end.isComplete(allSegments)) {\n                const newRange = {\n                    start: newValue.start.toDateTime(rangeValue.start, {\n                        setDate: formatInfo.hasDate,\n                        setTime: formatInfo.hasTime,\n                    }),\n                    end: newValue.end.toDateTime(rangeValue.end, {\n                        setDate: formatInfo.hasDate,\n                        setTime: formatInfo.hasTime,\n                    }),\n                };\n                if (\n                    newValue.start.validate(newRange.start, allSegments) &&\n                    newValue.end.validate(newRange.end, allSegments)\n                ) {\n                    if (\n                        !value ||\n                        !(newRange.start.isSame(value.start) && newRange.end.isSame(value.end))\n                    ) {\n                        handleUpdateRange({\n                            start: adjustDateToFormat(newRange.start, formatInfo, 'startOf'),\n                            end: adjustDateToFormat(newRange.end, formatInfo, 'endOf'),\n                        });\n                    }\n                }\n            }\n            setDisplayValue({start: newValue.start, end: newValue.end});\n        } else if (\n            !(newValue.start instanceof IncompleteDate) &&\n            !(newValue.end instanceof IncompleteDate) &&\n            (!value || !(value.start.isSame(newValue.start) && value.end.isSame(newValue.end)))\n        ) {\n            handleUpdateRange({start: newValue.start, end: newValue.end});\n        }\n    }\n\n    function setSection(sectionIndex: number, amount: number) {\n        const portion = sectionIndex <= sections.length ? 'start' : 'end';\n        const section = sectionsState.editableSections[sectionIndex];\n        setValue({\n            ...displayValue,\n            [portion]: setSegment(section, displayValue[portion], amount, rangeValue[portion]),\n        });\n    }\n\n    function adjustSection(sectionIndex: number, amount: number) {\n        const section = sectionsState.editableSections[sectionIndex];\n        const portion = sectionIndex <= sections.length ? 'start' : 'end';\n        if (section) {\n            setValue({\n                ...displayValue,\n                [portion]: addSegment(section, displayValue[portion], amount, rangeValue[portion]),\n            });\n        }\n    }\n\n    function clearSection(sectionIndex: number) {\n        const section = sectionsState.editableSections[sectionIndex];\n        const portion = sectionIndex <= sections.length ? 'start' : 'end';\n        if (section && isEditableSectionType(section.type)) {\n            setValue({\n                ...displayValue,\n                [portion]: displayValue[portion].clear(section.type),\n            });\n        }\n    }\n\n    function setValueFromString(str: string) {\n        const [startDate = '', endDate = ''] = str.split(delimiter);\n        const parseDate = props.parseDateFromString ?? parseDateFromString;\n        const start = parseDate(startDate, format, timeZone);\n        const end = parseDate(endDate, format, timeZone);\n        if (start.isValid() && end.isValid()) {\n            handleUpdateRange({start, end});\n            return true;\n        }\n        return false;\n    }\n\n    function confirmPlaceholder() {\n        if (props.disabled || props.readOnly) {\n            return;\n        }\n\n        // If the display value is complete but invalid, we need to constrain it and emit onChange on blur.\n        if (\n            displayValue.start.isComplete(allSegments) &&\n            displayValue.end.isComplete(allSegments)\n        ) {\n            const newValue = {\n                start: adjustDateToFormat(\n                    displayValue.start.toDateTime(rangeValue.start, {\n                        setDate: formatInfo.hasDate,\n                        setTime: formatInfo.hasTime,\n                    }),\n                    formatInfo,\n                    'startOf',\n                ),\n                end: adjustDateToFormat(\n                    displayValue.end.toDateTime(rangeValue.end, {\n                        setDate: formatInfo.hasDate,\n                        setTime: formatInfo.hasTime,\n                    }),\n                    formatInfo,\n                    'endOf',\n                ),\n            };\n            setValue(newValue);\n        }\n    }\n\n    const validationState =\n        props.validationState ||\n        (isInvalid(value?.start, props.minValue, props.maxValue) ? 'invalid' : undefined) ||\n        (isInvalid(value?.end, props.minValue, props.maxValue) ? 'invalid' : undefined) ||\n        (value && !isValidRange(value) ? 'invalid' : undefined) ||\n        (value && props.isDateUnavailable?.(value.start) ? 'invalid' : undefined) ||\n        (value && props.isDateUnavailable?.(value.end) ? 'invalid' : undefined);\n\n    return useBaseDateFieldState<RangeValue<DateTime>, RangeValue<IncompleteDate>>({\n        value,\n        displayValue: rangeValue,\n        validationState,\n        editableSections: sectionsState.editableSections,\n        formatInfo,\n        readOnly: props.readOnly,\n        disabled: props.disabled,\n        isEmpty:\n            displayValue.start.isCleared(allSegments) && displayValue.end.isCleared(allSegments),\n        setValue,\n        adjustSection,\n        setSection,\n        clearSection,\n        setValueFromString,\n        confirmPlaceholder,\n    });\n}\n\nfunction useSectionsState(\n    sections: FormatSection[],\n    value: RangeValue<IncompleteDate>,\n    placeholder: RangeValue<DateTime>,\n    delimiter: string,\n) {\n    const [state, setState] = React.useState(() => {\n        return {\n            value,\n            sections,\n            placeholder,\n            delimiter,\n            editableSections: getRangeEditableSections(sections, value, placeholder, delimiter),\n        };\n    });\n\n    if (\n        sections !== state.sections ||\n        value !== state.value ||\n        !(\n            placeholder.start.isSame(state.placeholder.start) &&\n            placeholder.end.isSame(state.placeholder.end)\n        ) ||\n        delimiter !== state.delimiter\n    ) {\n        setState({\n            value,\n            sections,\n            placeholder,\n            delimiter,\n            editableSections: getRangeEditableSections(sections, value, placeholder, delimiter),\n        });\n    }\n\n    return state;\n}\n\nfunction getRangeEditableSections(\n    sections: FormatSection[],\n    value: RangeValue<IncompleteDate>,\n    placeholder: RangeValue<DateTime>,\n    delimiter: string,\n) {\n    const start = getEditableSections(sections, value.start, placeholder.start);\n    const end = getEditableSections(sections, value.end, placeholder.end);\n\n    const delimiterSection = toEditableSection(\n        {\n            type: 'literal',\n            contentType: 'letter',\n            format: delimiter,\n            placeholder: delimiter,\n            hasLeadingZeros: false,\n        },\n        value.start,\n        placeholder.start,\n    );\n\n    const editableSections = [...start, delimiterSection, ...end];\n\n    return editableSections;\n}\n\nfunction isValidRange({start, end}: RangeValue<DateTime>): boolean {\n    return start.isValid() && end.isValid() && (start.isSame(end) || start.isBefore(end));\n}\n"]}

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

@@ -2,7 +2,7 @@
   "year_placeholder": "Г",
   "quarter_placeholder": "K",
   "month_placeholder": "М",
-  "weekday_placeholder": "ДН",
+  "weekday_placeholder": "д",
   "day_placeholder": "Д",
   "hour_placeholder": "ч",
   "minute_placeholder": "м",

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

@@ -1,4 +1,5 @@
 export * from "./DateField.js";
 export * from "./hooks/useDateFieldState.js";
+export * from "./hooks/useRangeDateFieldState.js";
 export * from "./hooks/useDateFieldProps.js";
-export * from "./hooks/useBaseDateFieldState.js";
+export type { DateFieldState } from "./hooks/useBaseDateFieldState.js";

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

@@ -1,5 +1,5 @@
 export * from "./DateField.js";
 export * from "./hooks/useDateFieldState.js";
+export * from "./hooks/useRangeDateFieldState.js";
 export * from "./hooks/useDateFieldProps.js";
-export * from "./hooks/useBaseDateFieldState.js";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["components/DateField/index.ts"],"names":[],"mappings":"AAAA,+BAA4B;AAE5B,6CAA0C;AAC1C,6CAA0C;AAC1C,iDAA8C","sourcesContent":["export * from './DateField';\n\nexport * from './hooks/useDateFieldState';\nexport * from './hooks/useDateFieldProps';\nexport * from './hooks/useBaseDateFieldState';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["components/DateField/index.ts"],"names":[],"mappings":"AAAA,+BAA4B;AAE5B,6CAA0C;AAC1C,kDAA+C;AAC/C,6CAA0C","sourcesContent":["export * from './DateField';\n\nexport * from './hooks/useDateFieldState';\nexport * from './hooks/useRangeDateFieldState';\nexport * from './hooks/useDateFieldProps';\n\nexport type {DateFieldState} from './hooks/useBaseDateFieldState';\n"]}

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

@@ -6,7 +6,7 @@ export type DateFormatTokenMap = {
     };
 };
 export interface DateFieldSection {
-    value: number | undefined;
+    value: number | null;
     /**
      * Value of the section, as rendered inside the input.
      * For example, in the date `May 25, 1995`, the value of the month section is "May".
@@ -43,28 +43,8 @@ export interface DateFieldSection {
      * For example, the value `1` should be rendered as "01" instead of "1".
      */
     hasLeadingZeros: boolean;
-    /**
-     * If `true`, the section value has been modified since the last time the sections were generated from a valid date.
-     * When we can generate a valid date from the section, we don't directly pass it to `onChange`,
-     * Otherwise, we would lose all the information contained in the original date, things like:
-     * - time if the format does not contain it
-     * - timezone / UTC
-     *
-     * To avoid losing that information, we transfer the values of the modified sections from the newly generated date to the original date.
-     */
-    modified: boolean;
-    /**
-     * Start index of the section in the format
-     */
-    start: number;
-    /**
-     * End index of the section in the format
-     */
-    end: number;
-    previousEditableSection: number;
-    nextEditableSection: number;
 }
-export type DateFieldSectionWithoutPosition<TSection extends DateFieldSection = DateFieldSection> = Omit<TSection, 'start' | 'end' | 'value' | 'textValue' | 'modified' | 'previousEditableSection' | 'nextEditableSection'>;
+export type FormatSection<TSection extends DateFieldSection = DateFieldSection> = Omit<TSection, 'value' | 'textValue'>;
 export type AvailableSections = Partial<Record<DateFieldSectionType, boolean>>;
 export interface FormatInfo {
     hasTime: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../../../../src","sources":["components/DateField/types.ts"],"names":[],"mappings":"","sourcesContent":["export type DateFieldSectionType =\n    | Extract<\n          Intl.DateTimeFormatPartTypes,\n          | 'day'\n          | 'dayPeriod'\n          | 'hour'\n          | 'literal'\n          | 'minute'\n          | 'month'\n          | 'second'\n          | 'timeZoneName'\n          | 'weekday'\n          | 'year'\n          | 'unknown'\n      >\n    | 'quarter';\n\nexport type DateFormatTokenMap = {\n    [formatToken: string]:\n        | DateFieldSectionType\n        | {sectionType: DateFieldSectionType; contentType: 'digit' | 'letter'};\n};\n\nexport interface DateFieldSection {\n    value: number | undefined;\n    /**\n     * Value of the section, as rendered inside the input.\n     * For example, in the date `May 25, 1995`, the value of the month section is \"May\".\n     */\n    textValue: string;\n    /**\n     * Format token used to parse the value of this section from the date object.\n     * For example, in the format `MMMM D, YYYY`, the format of the month section is \"MMMM\".\n     */\n    format: string;\n    /**\n     * Placeholder rendered when the value of this section is empty.\n     */\n    placeholder: string;\n    /**\n     * Type of the section.\n     */\n    type: DateFieldSectionType;\n    /**\n     * Type of content of the section.\n     * Will determine if we should apply a digit-based editing or a letter-based editing.\n     */\n    contentType: 'digit' | 'letter';\n    /**\n     * Available values\n     */\n    options?: string[];\n    /** The minimum numeric value for the segment, if applicable. */\n    minValue?: number;\n    /** The maximum numeric value for the segment, if applicable. */\n    maxValue?: number;\n    /**\n     * If `true`, the value of this section is supposed to have leading zeroes.\n     * For example, the value `1` should be rendered as \"01\" instead of \"1\".\n     */\n    hasLeadingZeros: boolean;\n    /**\n     * If `true`, the section value has been modified since the last time the sections were generated from a valid date.\n     * When we can generate a valid date from the section, we don't directly pass it to `onChange`,\n     * Otherwise, we would lose all the information contained in the original date, things like:\n     * - time if the format does not contain it\n     * - timezone / UTC\n     *\n     * To avoid losing that information, we transfer the values of the modified sections from the newly generated date to the original date.\n     */\n    modified: boolean;\n    /**\n     * Start index of the section in the format\n     */\n    start: number;\n    /**\n     * End index of the section in the format\n     */\n    end: number;\n\n    previousEditableSection: number;\n    nextEditableSection: number;\n}\n\nexport type DateFieldSectionWithoutPosition<TSection extends DateFieldSection = DateFieldSection> =\n    Omit<\n        TSection,\n        | 'start'\n        | 'end'\n        | 'value'\n        | 'textValue'\n        | 'modified'\n        | 'previousEditableSection'\n        | 'nextEditableSection'\n    >;\n\nexport type AvailableSections = Partial<Record<DateFieldSectionType, boolean>>;\n\nexport interface FormatInfo {\n    hasTime: boolean;\n    hasDate: boolean;\n    availableUnits: AvailableSections;\n    minDateUnit: 'day' | 'month' | 'quarter' | 'year';\n    minTimeUnit: 'second' | 'minute' | 'hour';\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"../../../../src","sources":["components/DateField/types.ts"],"names":[],"mappings":"","sourcesContent":["export type DateFieldSectionType =\n    | Extract<\n          Intl.DateTimeFormatPartTypes,\n          | 'day'\n          | 'dayPeriod'\n          | 'hour'\n          | 'literal'\n          | 'minute'\n          | 'month'\n          | 'second'\n          | 'timeZoneName'\n          | 'weekday'\n          | 'year'\n          | 'unknown'\n      >\n    | 'quarter';\n\nexport type DateFormatTokenMap = {\n    [formatToken: string]:\n        DateFieldSectionType | {sectionType: DateFieldSectionType; contentType: 'digit' | 'letter'};\n};\n\nexport interface DateFieldSection {\n    value: number | null;\n    /**\n     * Value of the section, as rendered inside the input.\n     * For example, in the date `May 25, 1995`, the value of the month section is \"May\".\n     */\n    textValue: string;\n    /**\n     * Format token used to parse the value of this section from the date object.\n     * For example, in the format `MMMM D, YYYY`, the format of the month section is \"MMMM\".\n     */\n    format: string;\n    /**\n     * Placeholder rendered when the value of this section is empty.\n     */\n    placeholder: string;\n    /**\n     * Type of the section.\n     */\n    type: DateFieldSectionType;\n    /**\n     * Type of content of the section.\n     * Will determine if we should apply a digit-based editing or a letter-based editing.\n     */\n    contentType: 'digit' | 'letter';\n    /**\n     * Available values\n     */\n    options?: string[];\n    /** The minimum numeric value for the segment, if applicable. */\n    minValue?: number;\n    /** The maximum numeric value for the segment, if applicable. */\n    maxValue?: number;\n    /**\n     * If `true`, the value of this section is supposed to have leading zeroes.\n     * For example, the value `1` should be rendered as \"01\" instead of \"1\".\n     */\n    hasLeadingZeros: boolean;\n}\n\nexport type FormatSection<TSection extends DateFieldSection = DateFieldSection> = Omit<\n    TSection,\n    'value' | 'textValue'\n>;\n\nexport type AvailableSections = Partial<Record<DateFieldSectionType, boolean>>;\n\nexport interface FormatInfo {\n    hasTime: boolean;\n    hasDate: boolean;\n    availableUnits: AvailableSections;\n    minDateUnit: 'day' | 'month' | 'quarter' | 'year';\n    minTimeUnit: 'second' | 'minute' | 'hour';\n}\n"]}

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

@@ -1,44 +1,31 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { ExtractFunctionType } from "../types/index.js";
+import type { IncompleteDate } from "./IncompleteDate.js";
 import { i18n } from "./i18n/index.js";
-import type { AvailableSections, DateFieldSection, DateFieldSectionType, DateFieldSectionWithoutPosition, FormatInfo } from "./types.js";
-export declare const EDITABLE_SEGMENTS: AvailableSections;
-export declare function getSectionLimits(section: DateFieldSectionWithoutPosition, date: DateTime): {
-    minValue: number;
-    maxValue: number;
-} | {
-    minValue?: undefined;
-    maxValue?: undefined;
+import type { DateFieldSection, DateFieldSectionType, FormatInfo, FormatSection } from "./types.js";
+declare const EDITABLE_SEGMENTS: {
+    year: true;
+    quarter: true;
+    month: true;
+    day: true;
+    weekday: true;
+    hour: true;
+    minute: true;
+    second: true;
+    dayPeriod: true;
 };
-export declare function getSectionValue(section: DateFieldSectionWithoutPosition, date: DateTime): number | undefined;
+export declare const PAGE_STEP: Partial<Record<DateFieldSectionType, number>>;
 export declare function getDurationUnitFromSectionType(type: DateFieldSectionType): "year" | "month" | "day" | "hour" | "minute" | "second" | "quarter" | "date";
-export declare function addSegment(section: DateFieldSection, date: DateTime, amount: number): DateTime;
-export declare function setSegment(section: DateFieldSection, date: DateTime, amount: number): DateTime;
+export declare function addSegment(section: DateFieldSection, date: IncompleteDate, amount: number, placeholder: DateTime): IncompleteDate;
+export declare function setSegment(section: FormatSection, date: IncompleteDate, amount: number, placeholder: DateTime): IncompleteDate;
 type TranslateFunction = ExtractFunctionType<typeof i18n>;
-export declare function splitFormatIntoSections(format: string, t?: TranslateFunction, lang?: string): DateFieldSectionWithoutPosition[];
+export declare function splitFormatIntoSections(format: string, t?: TranslateFunction, lang?: string): FormatSection[];
 export declare function cleanString(dirtyString: string): string;
-export declare function getEditableSections(sections: DateFieldSectionWithoutPosition[], value: DateTime, validSegments: AvailableSections): DateFieldSection[];
-export declare function isEditableSection(section: DateFieldSectionWithoutPosition): boolean;
-export declare function toEditableSection(section: DateFieldSectionWithoutPosition, value: DateTime, validSegments: AvailableSections, position: number, previousEditableSection: number): DateFieldSection;
-export declare function getCurrentEditableSectionIndex(sections: DateFieldSection[], selectedSections: 'all' | number): number;
-export declare function formatSections(sections: DateFieldSection[]): string;
+export declare function getEditableSections(sections: FormatSection[], value: IncompleteDate, placeholder: DateTime): DateFieldSection[];
+export declare function isEditableSectionType(type: DateFieldSectionType): type is keyof typeof EDITABLE_SEGMENTS;
+export declare function toEditableSection(section: FormatSection, value: IncompleteDate, placeholder: DateTime): DateFieldSection;
 export declare function parseDateFromString(str: string, format: string, timeZone?: string): DateTime;
-export declare function isAllSegmentsValid(allSegments: AvailableSections, validSegments: AvailableSections): boolean;
-export declare function useFormatSections(format: string): DateFieldSectionWithoutPosition[];
-export declare function getFormatInfo(sections: DateFieldSectionWithoutPosition[]): FormatInfo;
+export declare function useFormatSections(format: string): FormatSection[];
+export declare function getFormatInfo(sections: FormatSection[]): FormatInfo;
 export declare function adjustDateToFormat(date: DateTime, formatInfo: FormatInfo, method?: 'startOf' | 'endOf'): DateTime;
-export declare function markValidSection(allSections: AvailableSections, editableSections: AvailableSections, unit: DateFieldSectionType): {
-    year?: boolean | undefined;
-    month?: boolean | undefined;
-    day?: boolean | undefined;
-    hour?: boolean | undefined;
-    minute?: boolean | undefined;
-    second?: boolean | undefined;
-    quarter?: boolean | undefined;
-    weekday?: boolean | undefined;
-    dayPeriod?: boolean | undefined;
-    literal?: boolean | undefined;
-    timeZoneName?: boolean | undefined;
-    unknown?: boolean | undefined;
-};
 export {};