@gravity-ui/date-components 3.4.2 → 4.0.0

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

@@ -1,29 +1,17 @@
 'use client';
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { TextInput, useFocusWithin } from '@gravity-ui/uikit';
+import { TextInput } from '@gravity-ui/uikit';
 import { block } from "../../utils/cn.js";
 import { HiddenInput } from "../HiddenInput/HiddenInput.js";
-import { filterDOMProps } from "../utils/filterDOMProps.js";
 import { useDateFieldProps } from "./hooks/useDateFieldProps.js";
 import { useDateFieldState } from "./hooks/useDateFieldState.js";
 import "./DateField.css";
 const b = block('date-field');
-export function DateField(_a) {
-    var { className } = _a, props = __rest(_a, ["className"]);
+export function DateField({ className, ...props }) {
     const state = useDateFieldState(props);
-    const { inputProps } = useDateFieldProps(state, props);
-    const [isActive, setActive] = React.useState(false);
-    const { focusWithinProps } = useFocusWithin({
-        onFocusWithinChange(isFocusWithin) {
-            setActive(isFocusWithin);
-        },
-    });
-    const DOMProps = filterDOMProps(props);
-    delete DOMProps.id;
-    return (_jsxs("div", Object.assign({}, DOMProps, { className: b(null, className), style: props.style }, focusWithinProps, { children: [_jsx(TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })), _jsx(HiddenInput, { name: props.name, value: state.value, toStringValue: (value) => { var _a; return (_a = value === null || value === void 0 ? void 0 : value.toISOString()) !== null && _a !== void 0 ? _a : ''; }, onReset: (value) => {
-                    state.setDate(value);
-                }, disabled: state.disabled, form: props.form })] })));
+    const { groupProps, inputProps } = useDateFieldProps(state, props);
+    return (_jsxs("div", { ...groupProps, className: b(null, className), style: props.style, children: [_jsx(TextInput, { ...inputProps }), _jsx(HiddenInput, { name: props.name, value: state.value, toStringValue: (value) => value?.toISOString() ?? '', onReset: (value) => {
+                    state.setValue(value);
+                }, disabled: state.disabled, form: props.form })] }));
 }
 //# sourceMappingURL=DateField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","sourceRoot":"../../../../src","sources":["components/DateField/DateField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAC,KAAK,EAAC,0BAAuB;AACrC,OAAO,EAAC,WAAW,EAAC,sCAAmC;AACvD,OAAO,EAAC,cAAc,EAAC,mCAAgC;AAEvD,OAAO,EAAC,iBAAiB,EAAC,qCAAkC;AAE5D,OAAO,EAAC,iBAAiB,EAAC,qCAAkC;AAE5D,yBAA0B;AAE1B,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,UAAU,SAAS,CAAC,EAAqC;QAArC,EAAC,SAAS,OAA2B,EAAtB,KAAK,cAApB,aAAqB,CAAD;IAC1C,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAEvC,MAAM,EAAC,UAAU,EAAC,GAAG,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAErD,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,EAAC,gBAAgB,EAAC,GAAG,cAAc,CAAC;QACtC,mBAAmB,CAAC,aAAa;YAC7B,SAAS,CAAC,aAAa,CAAC,CAAC;QAC7B,CAAC;KACJ,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACvC,OAAO,QAAQ,CAAC,EAAE,CAAC;IAEnB,OAAO,CACH,+BAAS,QAAQ,IAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAM,gBAAgB,eACtF,KAAC,SAAS,oBACF,UAAU,IACd,KAAK,EAAE,KAAK,CAAC,OAAO,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,IAChF,EACF,KAAC,WAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,EAAE,mCAAI,EAAE,CAAA,EAAA,EACpD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACf,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;gBACzB,CAAC,EACD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,GAClB,KACA,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {TextInput, useFocusWithin} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport {filterDOMProps} from '../utils/filterDOMProps';\n\nimport {useDateFieldProps} from './hooks/useDateFieldProps';\nimport type {DateFieldProps} from './hooks/useDateFieldProps';\nimport {useDateFieldState} from './hooks/useDateFieldState';\n\nimport './DateField.scss';\n\nconst b = block('date-field');\n\nexport function DateField({className, ...props}: DateFieldProps) {\n    const state = useDateFieldState(props);\n\n    const {inputProps} = useDateFieldProps(state, props);\n\n    const [isActive, setActive] = React.useState(false);\n    const {focusWithinProps} = useFocusWithin({\n        onFocusWithinChange(isFocusWithin) {\n            setActive(isFocusWithin);\n        },\n    });\n\n    const DOMProps = filterDOMProps(props);\n    delete DOMProps.id;\n\n    return (\n        <div {...DOMProps} className={b(null, className)} style={props.style} {...focusWithinProps}>\n            <TextInput\n                {...inputProps}\n                value={state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value}\n            />\n            <HiddenInput\n                name={props.name}\n                value={state.value}\n                toStringValue={(value) => value?.toISOString() ?? ''}\n                onReset={(value) => {\n                    state.setDate(value);\n                }}\n                disabled={state.disabled}\n                form={props.form}\n            />\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"DateField.js","sourceRoot":"../../../../src","sources":["components/DateField/DateField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAE5C,OAAO,EAAC,KAAK,EAAC,0BAAuB;AACrC,OAAO,EAAC,WAAW,EAAC,sCAAmC;AAEvD,OAAO,EAAC,iBAAiB,EAAC,qCAAkC;AAE5D,OAAO,EAAC,iBAAiB,EAAC,qCAAkC;AAE5D,yBAA0B;AAE1B,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,UAAU,SAAS,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAiB;IAC3D,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAEvC,MAAM,EAAC,UAAU,EAAE,UAAU,EAAC,GAAG,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAEjE,OAAO,CACH,kBAAS,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aAClE,KAAC,SAAS,OAAK,UAAU,GAAI,EAC7B,KAAC,WAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,EACpD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACf,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAC1B,CAAC,EACD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,GAClB,IACA,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport {TextInput} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\n\nimport {useDateFieldProps} from './hooks/useDateFieldProps';\nimport type {DateFieldProps} from './hooks/useDateFieldProps';\nimport {useDateFieldState} from './hooks/useDateFieldState';\n\nimport './DateField.scss';\n\nconst b = block('date-field');\n\nexport function DateField({className, ...props}: DateFieldProps) {\n    const state = useDateFieldState(props);\n\n    const {groupProps, inputProps} = useDateFieldProps(state, props);\n\n    return (\n        <div {...groupProps} className={b(null, className)} style={props.style}>\n            <TextInput {...inputProps} />\n            <HiddenInput\n                name={props.name}\n                value={state.value}\n                toStringValue={(value) => value?.toISOString() ?? ''}\n                onReset={(value) => {\n                    state.setValue(value);\n                }}\n                disabled={state.disabled}\n                form={props.form}\n            />\n        </div>\n    );\n}\n"]}

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

@@ -0,0 +1,28 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { AvailableSections } from "./types.js";
+declare const dateFields: readonly ["year", "quarter", "month", "day", "weekday", "hour", "minute", "second", "dayPeriod"];
+type Field = (typeof dateFields)[number];
+export declare class IncompleteDate {
+    year: number | null;
+    month: number | null;
+    day: number | null;
+    weekday: number | null;
+    dayPeriod: number | null;
+    hour: number | null;
+    minute: number | null;
+    second: number | null;
+    constructor(date?: DateTime | null);
+    get quarter(): number | null;
+    set quarter(v: number | null);
+    copy(): IncompleteDate;
+    isComplete(availableUnits: AvailableSections): boolean;
+    validate(date: DateTime, availableUnits: AvailableSections): boolean;
+    isCleared(availableUnits: AvailableSections): boolean;
+    set(field: Field, value: number): IncompleteDate;
+    clear(field: Field): IncompleteDate;
+    toDateTime(baseValue: DateTime, { setDate, setTime }: {
+        setDate: boolean;
+        setTime: boolean;
+    }): DateTime;
+}
+export {};

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

@@ -0,0 +1,112 @@
+import { getDurationUnitFromSectionType } from "./utils.js";
+const dateFields = [
+    'year',
+    'quarter',
+    'month',
+    'day',
+    'weekday',
+    'hour',
+    'minute',
+    'second',
+    'dayPeriod',
+];
+export class IncompleteDate {
+    year;
+    month;
+    day;
+    weekday;
+    dayPeriod;
+    hour;
+    minute;
+    second;
+    constructor(date) {
+        this.year = date?.year() ?? null;
+        this.month = date ? date.month() + 1 : null;
+        this.day = date?.date() ?? null;
+        this.weekday = date?.day() ?? null;
+        this.hour = date?.hour() ?? null;
+        this.minute = date?.minute() ?? null;
+        this.second = date?.second() ?? null;
+        if (date) {
+            this.dayPeriod = date.hour() >= 12 ? 1 : 0;
+        }
+        else {
+            this.dayPeriod = null;
+        }
+    }
+    get quarter() {
+        return this.month === null ? null : Math.ceil(this.month / 3);
+    }
+    set quarter(v) {
+        this.month =
+            v === null
+                ? null
+                : (v - 1) * 3 + (this.month === null ? 1 : ((this.month - 1) % 3) + 13);
+    }
+    copy() {
+        const copy = new IncompleteDate();
+        for (const field of dateFields) {
+            copy[field] = this[field];
+        }
+        return copy;
+    }
+    isComplete(availableUnits) {
+        return dateFields.every((field) => !availableUnits[field] || this[field] !== null);
+    }
+    validate(date, availableUnits) {
+        return dateFields.every((field) => {
+            if (!availableUnits[field]) {
+                return true;
+            }
+            if (field === 'dayPeriod') {
+                return this.dayPeriod === (date.hour() >= 12 ? 1 : 0);
+            }
+            if (field === 'month') {
+                return date.month() + 1 === this.month;
+            }
+            return date[getDurationUnitFromSectionType(field)]() === this[field];
+        });
+    }
+    isCleared(availableUnits) {
+        return dateFields.every((field) => !availableUnits[field] || this[field] === null);
+    }
+    set(field, value) {
+        const copy = this.copy();
+        copy[field] = value;
+        if (field === 'hour') {
+            copy.dayPeriod = (copy.hour ?? 0) >= 12 ? 1 : 0;
+        }
+        return copy;
+    }
+    clear(field) {
+        const copy = this.copy();
+        copy[field] = null;
+        return copy;
+    }
+    toDateTime(baseValue, { setDate, setTime }) {
+        let nextValue = baseValue;
+        if (setDate) {
+            nextValue = nextValue
+                .set({
+                year: this.year ?? baseValue.year(),
+                month: 0, // set January to not overflow day value
+                date: this.day ?? baseValue.date(),
+            })
+                .set({ month: this.month === null ? baseValue.month() : this.month - 1 });
+            if (this.day === null && this.weekday !== null) {
+                nextValue = nextValue.set({ day: this.weekday });
+            }
+        }
+        if (setTime) {
+            nextValue = nextValue
+                .set({
+                hour: this.hour ?? baseValue.hour(),
+                minute: this.minute ?? baseValue.minute(),
+                second: this.second ?? baseValue.second(),
+            })
+                .timeZone(nextValue.timeZone());
+        }
+        return nextValue;
+    }
+}
+//# sourceMappingURL=IncompleteDate.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IncompleteDate.js","sourceRoot":"../../../../src","sources":["components/DateField/IncompleteDate.ts"],"names":[],"mappings":"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","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {AvailableSections} from './types';\nimport {getDurationUnitFromSectionType} from './utils';\n\nconst dateFields = [\n    'year',\n    'quarter',\n    'month',\n    'day',\n    'weekday',\n    'hour',\n    'minute',\n    'second',\n    'dayPeriod',\n] as const;\n\ntype Field = (typeof dateFields)[number];\n\nexport class IncompleteDate {\n    year: number | null;\n    month: number | null;\n    day: number | null;\n    weekday: number | null;\n    dayPeriod: number | null;\n    hour: number | null;\n    minute: number | null;\n    second: number | null;\n\n    constructor(date?: DateTime | null) {\n        this.year = date?.year() ?? null;\n        this.month = date ? date.month() + 1 : null;\n        this.day = date?.date() ?? null;\n        this.weekday = date?.day() ?? null;\n        this.hour = date?.hour() ?? null;\n        this.minute = date?.minute() ?? null;\n        this.second = date?.second() ?? null;\n        if (date) {\n            this.dayPeriod = date.hour() >= 12 ? 1 : 0;\n        } else {\n            this.dayPeriod = null;\n        }\n    }\n\n    get quarter() {\n        return this.month === null ? null : Math.ceil(this.month / 3);\n    }\n\n    set quarter(v: number | null) {\n        this.month =\n            v === null\n                ? null\n                : (v - 1) * 3 + (this.month === null ? 1 : ((this.month - 1) % 3) + 13);\n    }\n\n    copy() {\n        const copy = new IncompleteDate();\n        for (const field of dateFields) {\n            copy[field] = this[field];\n        }\n        return copy;\n    }\n\n    isComplete(availableUnits: AvailableSections): boolean {\n        return dateFields.every((field) => !availableUnits[field] || this[field] !== null);\n    }\n\n    validate(date: DateTime, availableUnits: AvailableSections): boolean {\n        return dateFields.every((field) => {\n            if (!availableUnits[field]) {\n                return true;\n            }\n\n            if (field === 'dayPeriod') {\n                return this.dayPeriod === (date.hour() >= 12 ? 1 : 0);\n            }\n\n            if (field === 'month') {\n                return date.month() + 1 === this.month;\n            }\n\n            return date[getDurationUnitFromSectionType(field)]() === this[field];\n        });\n    }\n\n    isCleared(availableUnits: AvailableSections): boolean {\n        return dateFields.every((field) => !availableUnits[field] || this[field] === null);\n    }\n\n    set(field: Field, value: number): IncompleteDate {\n        const copy = this.copy();\n        copy[field] = value;\n        if (field === 'hour') {\n            copy.dayPeriod = (copy.hour ?? 0) >= 12 ? 1 : 0;\n        }\n\n        return copy;\n    }\n\n    clear(field: Field): IncompleteDate {\n        const copy = this.copy();\n        copy[field] = null;\n        return copy;\n    }\n\n    toDateTime(\n        baseValue: DateTime,\n        {setDate, setTime}: {setDate: boolean; setTime: boolean},\n    ): DateTime {\n        let nextValue = baseValue;\n        if (setDate) {\n            nextValue = nextValue\n                .set({\n                    year: this.year ?? baseValue.year(),\n                    month: 0, // set January to not overflow day value\n                    date: this.day ?? baseValue.date(),\n                })\n                .set({month: this.month === null ? baseValue.month() : this.month - 1});\n            if (this.day === null && this.weekday !== null) {\n                nextValue = nextValue.set({day: this.weekday});\n            }\n        }\n        if (setTime) {\n            nextValue = nextValue\n                .set({\n                    hour: this.hour ?? baseValue.hour(),\n                    minute: this.minute ?? baseValue.minute(),\n                    second: this.second ?? baseValue.second(),\n                })\n                .timeZone(nextValue.timeZone());\n        }\n\n        return nextValue;\n    }\n}\n"]}

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

@@ -1,35 +1,24 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { ValidationState } from "../../types/index.js";
+import type { IncompleteDate } from "../IncompleteDate.js";
 import type { DateFieldSection, FormatInfo } from "../types.js";
-export type BaseDateFieldStateOptions<T = DateTime> = {
+interface BaseDateFieldStateOptions<T = DateTime, V = IncompleteDate> {
     value: T | null;
     displayValue: T;
-    placeholderValue?: DateTime;
-    timeZone: string;
     validationState?: ValidationState;
     editableSections: DateFieldSection[];
     formatInfo: FormatInfo;
     readOnly?: boolean;
     disabled?: boolean;
-    selectedSectionIndexes: {
-        startIndex: number;
-        endIndex: number;
-    } | null;
-    selectedSections: number | 'all';
     isEmpty: boolean;
-    flushAllValidSections: () => void;
-    flushValidSection: (sectionIndex: number) => void;
-    setSelectedSections: (position: number | 'all') => void;
-    setValue: (value: T) => void;
-    setDate: (value: T | null) => void;
+    setValue: (value: T | V | null) => void;
     adjustSection: (sectionIndex: number, amount: number) => void;
     setSection: (sectionIndex: number, amount: number) => void;
-    getSectionValue: (sectionIndex: number) => DateTime;
-    setSectionValue: (sectionIndex: number, currentValue: DateTime) => void;
-    createPlaceholder: () => T;
+    clearSection: (sectionIndex: number) => void;
     setValueFromString: (str: string) => boolean;
-};
-export type DateFieldState<T = DateTime> = {
+    confirmPlaceholder: () => void;
+}
+export interface DateFieldState<T = DateTime> {
     /** The current field value. */
     value: T | null;
     /** Is no part of value is filled. */
@@ -37,72 +26,49 @@ export type DateFieldState<T = DateTime> = {
     /** The current used value. value or placeholderValue */
     displayValue: T;
     /** Sets the field's value. */
-    setValue: (value: T) => void;
-    /** Sets the date value. */
-    setDate: (value: T | null) => void;
-    /** Formatted value */
-    text: string;
+    setValue: (value: T | null) => void;
+    /** Updates the remaining unfilled sections with the placeholder value. */
+    confirmPlaceholder: () => void;
     /** Whether the field is read only. */
     readOnly?: boolean;
     /** Whether the field is disabled. */
     disabled?: boolean;
-    /** A list of segments for the current value. */
+    /** A list of sections for the current value. */
     sections: DateFieldSection[];
     /** Some info about available sections */
     formatInfo: FormatInfo;
-    /**
-     * @deprecated use formatInfo.hasDate instead.
-     * Whether the the format is containing date parts
-     */
-    hasDate: boolean;
-    /**
-     * @deprecated use formatInfo.hasTime instead.
-     * Whether the the format is containing time parts
-     */
-    hasTime: boolean;
-    /** Selected sections */
-    selectedSectionIndexes: {
-        startIndex: number;
-        endIndex: number;
-    } | null;
     /** The current validation state of the date field, based on the `validationState`, `minValue`, and `maxValue` props. */
     validationState?: ValidationState;
-    /** Sets selection for segment in position. */
-    setSelectedSections: (position: number | 'all') => void;
-    /** Focuses segment in position */
-    focusSectionInPosition: (position: number) => void;
-    /** Focuses the next segment if present */
-    focusNextSection: () => void;
-    /** Focuses the previous segment if present */
-    focusPreviousSection: () => void;
-    /** Focuses the first segment */
-    focusFirstSection: () => void;
-    /** Focuses the last segment */
-    focusLastSection: () => void;
-    /** Increments the currently selected segment. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit. */
-    increment: () => void;
-    /** Decrements the currently selected segment. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit. */
-    decrement: () => void;
+    /** Increments the currently selected section. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit. */
+    increment: (sectionIndex: number) => void;
+    /** Decrements the currently selected section. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit. */
+    decrement: (sectionIndex: number) => void;
     /**
-     * Increments the currently selected segment by a larger amount, rounding it to the nearest increment.
+     * Increments the currently selected section by a larger amount, rounding it to the nearest increment.
      * The amount to increment by depends on the field, for example 15 minutes, 7 days, and 5 years.
      * Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
      */
-    incrementPage: () => void;
+    incrementPage: (sectionIndex: number) => void;
     /**
-     * Decrements the currently selected segment by a larger amount, rounding it to the nearest decrement.
+     * Decrements the currently selected section by a larger amount, rounding it to the nearest decrement.
      * The amount to increment by depends on the field, for example 15 minutes, 7 days, and 5 years.
      * Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
      */
-    decrementPage: () => void;
-    incrementToMax: () => void;
-    decrementToMin: () => void;
-    /** Clears the value of the currently selected segment, reverting it to the placeholder. */
-    clearSection: () => void;
-    /** Clears all segments, reverting them to the placeholder. */
+    decrementPage: (sectionIndex: number) => void;
+    incrementToMax: (sectionIndex: number) => void;
+    decrementToMin: (sectionIndex: number) => void;
+    /** Clears the value of the currently selected section, reverting it to the placeholder. */
+    clearSection: (sectionIndex: number) => void;
+    /** Clears all sections, reverting them to the placeholder. */
     clearAll: () => void;
-    /** Handles input key in the currently selected segment */
-    onInput: (key: string) => void;
+    /** Sets the value of the given section. */
+    setSection: (sectionIndex: number, amount: number) => void;
+    /** Tries to set value from str. Supports date in input format or ISO */
     setValueFromString: (str: string) => boolean;
-};
-export declare function useBaseDateFieldState<T = DateTime>(props: BaseDateFieldStateOptions<T>): DateFieldState<T>;
+    /** Is date filed active now */
+    isActive: boolean;
+    /** Sets active state of the date field */
+    setActive: (isActive: boolean) => void;
+}
+export declare function useBaseDateFieldState<T = DateTime, V = IncompleteDate>(props: BaseDateFieldStateOptions<T, V>): DateFieldState<T>;
+export {};