@gravity-ui/date-components 1.6.0 → 2.0.1

package/dist/{cjs/components/CalendarBase → esm/components/CalendarView}/hooks/types.d.ts

@@ -8,7 +8,10 @@ export interface CalendarStateOptionsBase extends InputBase {
     maxValue?: DateTime;
     /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
     isDateUnavailable?: (date: DateTime) => boolean;
-    /** */
+    /**
+     * Which timezone use to show values. Example: 'default', 'system', 'Europe/Amsterdam'.
+     * @default The timezone of the `value` or `defaultValue` or `focusedValue` or `defaultFocusedValue`, 'default' otherwise.
+     */
     timeZone?: string;
     /**
      * Whether to automatically focus the calendar when it mounts.
@@ -35,7 +38,8 @@ interface CalendarStateBase {
     readonly disabled?: boolean;
     /** Whether the calendar is in a read only state. */
     readonly readOnly?: boolean;
-    readonly timeZone?: string;
+    /** Which timezone use to show values. */
+    readonly timeZone: string;
     /** The minimum allowed date that a user may select. */
     readonly minValue?: DateTime;
     /** The maximum allowed date that a user may select. */
@@ -43,85 +47,87 @@ interface CalendarStateBase {
     /** The currently focused date. */
     readonly focusedDate: DateTime;
     /** Sets the focused date. */
-    setFocusedDate(date: DateTime): void;
+    setFocusedDate: (date: DateTime) => void;
     /** Selects the currently focused date. */
-    selectFocusedDate(): void;
+    selectFocusedDate: () => void;
     /** Selects the given date. */
-    selectDate(date: DateTime, force?: boolean): void;
+    selectDate: (date: DateTime, force?: boolean) => void;
     /** Moves focus to the next calendar date. */
-    focusNextCell(): void;
+    focusNextCell: () => void;
     /** Moves focus to the previous calendar date. */
-    focusPreviousCell(): void;
+    focusPreviousCell: () => void;
     /** Moves focus to the next row of dates, e.g. the next week. */
-    focusNextRow(): void;
+    focusNextRow: () => void;
     /** Moves focus to the previous row of dates, e.g. the previous work. */
-    focusPreviousRow(): void;
+    focusPreviousRow: () => void;
     /**
      * Moves focus to the next page of dates, e.g. the next month.
      * If the `larger` option is `true`, the focus is moved by the next larger unit.
      * For example, if days are displayed, then focus moves to the next year.
      */
-    focusNextPage(larger?: boolean): void;
+    focusNextPage: (larger?: boolean) => void;
     /**
      * Moves focus to the previous page of dates, e.g. the previous month.
      * If the `larger` option is `true`, the focus is moved by the next larger unit.
      * For example, if days are displayed, then focus moves to the previous year.
      */
-    focusPreviousPage(larger?: boolean): void;
+    focusPreviousPage: (larger?: boolean) => void;
     /** Moves focus to the start of the current section of dates, e.g. the start of the current month. */
-    focusSectionStart(): void;
+    focusSectionStart: () => void;
     /** Moves focus to the end of the current section of dates, e.g. the end of the current month month. */
-    focusSectionEnd(): void;
+    focusSectionEnd: () => void;
     /** Switches to more detailed layout. */
-    zoomIn(): void;
+    zoomIn: () => void;
     /** Switches to less detailed layout. */
-    zoomOut(): void;
+    zoomOut: () => void;
     /** Whether focus is currently within the calendar. */
     readonly isFocused: boolean;
     /** Sets whether focus is currently within the calendar. */
-    setFocused(isFocused: boolean): void;
+    setFocused: (isFocused: boolean) => void;
     /** Returns whether the given date is invalid according to the `minValue` and `maxValue` props. */
-    isInvalid(date: DateTime): boolean;
+    isInvalid: (date: DateTime) => boolean;
     /** Returns whether the previous page is allowed to be selected according to the `minValue` prop. */
-    isPreviousPageInvalid(): boolean;
+    isPreviousPageInvalid: () => boolean;
     /** Returns whether the next page is allowed to be selected according to the `maxValue` prop. */
-    isNextPageInvalid(): boolean;
+    isNextPageInvalid: () => boolean;
     /** Returns whether the given date is currently selected. */
-    isSelected(date: DateTime): boolean;
+    isSelected: (date: DateTime) => boolean;
     /** Returns whether the given date is unavailable according to the `isDateUnavailable` prop. */
-    isCellUnavailable(date: DateTime): boolean;
+    isCellUnavailable: (date: DateTime) => boolean;
     /** Returns whether the given date is currently focused. */
-    isCellFocused(date: DateTime): boolean;
+    isCellFocused: (date: DateTime) => boolean;
     /** Returns whether the given date is disabled according to the `minValue, `maxValue`, and `isDisabled` props. */
-    isCellDisabled(date: DateTime): boolean;
+    isCellDisabled: (date: DateTime) => boolean;
     /** Returns whether the given date is weekend */
-    isWeekend(date: DateTime): boolean;
+    isWeekend: (date: DateTime) => boolean;
+    /** Returns whether the given date is in current period */
+    isCurrent: (date: DateTime) => boolean;
     /** Current calendar layout */
     readonly mode: CalendarLayout;
     /** Sets calendar layout */
-    setMode(mode: CalendarLayout): void;
+    setMode: (mode: CalendarLayout) => void;
     readonly availableModes: CalendarLayout[];
     readonly startDate: DateTime;
     readonly endDate: DateTime;
 }
 export interface CalendarState extends CalendarStateBase {
     /** The currently selected date. */
-    readonly value?: DateTime | null;
+    readonly value: DateTime | null;
     /** Sets the currently selected date. */
-    setValue(value: DateTime): void;
+    setValue: (value: DateTime) => void;
 }
 export interface RangeCalendarState extends CalendarStateBase {
     /** The currently selected range. */
-    readonly value?: RangeValue<DateTime> | null;
+    readonly value: RangeValue<DateTime> | null;
     /** Sets the currently selected range. */
-    setValue(value: RangeValue<DateTime>): void;
+    setValue: (value: RangeValue<DateTime>) => void;
     /** The current anchor date that the user clicked on to begin range selection. */
     readonly anchorDate: DateTime | undefined;
     /** Sets the anchor date that the user clicked on to begin range selection. */
-    setAnchorDate(date: DateTime | undefined): void;
+    setAnchorDate: (date: DateTime | undefined) => void;
     /** The currently highlighted date range. */
     readonly highlightedRange: RangeValue<DateTime> | undefined;
     /** Highlights the given date during selection, e.g. by hovering. */
-    highlightDate(date: DateTime): void;
+    highlightDate: (date: DateTime) => void;
 }
 export {};

package/dist/esm/components/{CalendarBase → CalendarView}/hooks/useCalendarCellProps.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { dateTime } from '@gravity-ui/date-utils';
 export function useCalendarCellProps(date, state) {
     const ref = React.useRef(null);
     const isFocused = state.isCellFocused(date);
@@ -19,7 +18,7 @@ export function useCalendarCellProps(date, state) {
     const isOutsideCurrentRange = state.mode === 'days' ? !state.focusedDate.isSame(date, 'month') : false;
     const isUnavailable = state.isCellUnavailable(date);
     const isSelectable = !isDisabled && !isUnavailable;
-    const isCurrent = dateTime().isSame(date, state.mode);
+    const isCurrent = state.isCurrent(date);
     const isWeekend = state.isWeekend(date);
     const label = getDateLabel(date, state.mode);
     const cellProps = {

package/dist/esm/components/{CalendarBase → CalendarView}/hooks/useCalendarGridProps.d.ts

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

package/dist/esm/components/{CalendarBase → CalendarView}/hooks/useCalendarGridProps.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useFocusWithin } from '@gravity-ui/uikit';
 export function useCalendarGridProps(state) {
     const { focusWithinProps } = useFocusWithin({

package/dist/{cjs/components/CalendarBase → esm/components/CalendarView}/hooks/useCalendarState.d.ts

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

package/dist/esm/components/{CalendarBase → CalendarView}/hooks/useCalendarState.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import { useControlledState } from '../../hooks/useControlledState';
-import { createPlaceholderValue } from '../../utils/dates';
+import { dateTime } from '@gravity-ui/date-utils';
+import { useControlledState } from '@gravity-ui/uikit';
+import { createPlaceholderValue, mergeDateTime } from '../../utils/dates';
+import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
 import { calendarLayouts, constrainValue } from '../utils';
 const defaultModes = {
     days: true,
@@ -9,25 +11,34 @@ const defaultModes = {
     years: true,
 };
 export function useCalendarState(props) {
-    const { disabled, readOnly, minValue, maxValue, timeZone, modes = defaultModes } = props;
-    const [value, setValue] = useControlledState(props.value, props.defaultValue, props.onUpdate);
-    const [mode, setMode] = useControlledState(props.mode, props.defaultMode, props.onUpdateMode);
+    var _a, _b, _c;
+    const { disabled, readOnly, modes = defaultModes } = props;
+    const [value, setValue] = useControlledState(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
     const availableModes = calendarLayouts.filter((l) => modes[l]);
     const minMode = availableModes[0] || 'days';
+    const [mode, setMode] = useControlledState(props.mode, (_b = props.defaultMode) !== null && _b !== void 0 ? _b : minMode, props.onUpdateMode);
     const currentMode = mode && availableModes.includes(mode) ? mode : minMode;
+    const inputTimeZone = useDefaultTimeZone(props.value || props.defaultValue || props.focusedValue || props.defaultFocusedValue);
+    const timeZone = props.timeZone || inputTimeZone;
+    const minValue = React.useMemo(() => (props.minValue ? props.minValue.timeZone(timeZone) : undefined), [timeZone, props.minValue]);
+    const maxValue = React.useMemo(() => (props.maxValue ? props.maxValue.timeZone(timeZone) : undefined), [timeZone, props.maxValue]);
     const focusedValue = React.useMemo(() => {
         if (!props.focusedValue) {
             return props.focusedValue;
         }
-        return constrainValue(props.focusedValue, minValue, maxValue);
-    }, [props.focusedValue, minValue, maxValue]);
+        return constrainValue(props.focusedValue.timeZone(timeZone), minValue, maxValue);
+    }, [props.focusedValue, minValue, maxValue, timeZone]);
     const defaultFocusedValue = React.useMemo(() => {
-        const defaultValue = (props.defaultFocusedValue ? props.defaultFocusedValue : value) ||
+        var _a;
+        const defaultValue = ((_a = (props.defaultFocusedValue ? props.defaultFocusedValue : value)) === null || _a === void 0 ? void 0 : _a.timeZone(timeZone)) ||
             createPlaceholderValue({ timeZone }).startOf(minMode);
         return constrainValue(defaultValue, minValue, maxValue);
     }, [maxValue, minValue, props.defaultFocusedValue, timeZone, value, minMode]);
-    const [focusedDateInner, setFocusedDate] = useControlledState(focusedValue, defaultFocusedValue, props.onFocusUpdate);
-    const focusedDate = focusedDateInner !== null && focusedDateInner !== void 0 ? focusedDateInner : constrainValue(createPlaceholderValue({ timeZone }).startOf(minMode), minValue, maxValue);
+    const [focusedDateInner, setFocusedDate] = useControlledState(focusedValue, defaultFocusedValue, (date) => {
+        var _a;
+        (_a = props.onFocusUpdate) === null || _a === void 0 ? void 0 : _a.call(props, date.timeZone(inputTimeZone));
+    });
+    const focusedDate = (_c = focusedDateInner === null || focusedDateInner === void 0 ? void 0 : focusedDateInner.timeZone(timeZone)) !== null && _c !== void 0 ? _c : constrainValue(createPlaceholderValue({ timeZone }), minValue, maxValue);
     if (isInvalid(focusedDate, minValue, maxValue)) {
         // If the focused date was moved to an invalid value, it can't be focused, so constrain it.
         setFocusedDate(constrainValue(focusedDate, minValue, maxValue));
@@ -42,16 +53,24 @@ export function useCalendarState(props) {
         disabled,
         readOnly,
         value,
-        setValue,
+        setValue(date) {
+            if (!disabled && !readOnly) {
+                let newValue = constrainValue(date, minValue, maxValue);
+                if (this.isCellUnavailable(newValue)) {
+                    return;
+                }
+                if (value) {
+                    // If there is a date already selected, then we want to keep its time
+                    newValue = mergeDateTime(newValue, value.timeZone(timeZone));
+                }
+                setValue(newValue.timeZone(inputTimeZone));
+            }
+        },
         timeZone,
         selectDate(date, force = false) {
             if (!disabled) {
                 if (!readOnly && (force || this.mode === minMode)) {
-                    const newValue = constrainValue(date, minValue, maxValue);
-                    if (this.isCellUnavailable(newValue)) {
-                        return;
-                    }
-                    setValue(newValue);
+                    this.setValue(date.startOf(minMode));
                     if (force && currentMode !== minMode) {
                         setMode(minMode);
                     }
@@ -127,15 +146,15 @@ export function useCalendarState(props) {
             focusCell(getEndDate(focusedDate, this.mode));
         },
         zoomIn() {
-            const index = availableModes.indexOf(this.mode) - 1;
-            if (index >= 0) {
-                this.setMode(availableModes[index]);
+            const nextMode = availableModes[availableModes.indexOf(this.mode) - 1];
+            if (nextMode) {
+                this.setMode(nextMode);
             }
         },
         zoomOut() {
-            const index = availableModes.indexOf(this.mode) + 1;
-            if (index < availableModes.length) {
-                this.setMode(availableModes[index]);
+            const nextMode = availableModes[availableModes.indexOf(this.mode) + 1];
+            if (nextMode) {
+                this.setMode(nextMode);
             }
         },
         selectFocusedDate() {
@@ -155,8 +174,8 @@ export function useCalendarState(props) {
             return this.isInvalid(next);
         },
         isSelected(date) {
-            return (Boolean(value) &&
-                date.isSame(value !== null && value !== void 0 ? value : undefined, currentMode) &&
+            return Boolean(value &&
+                date.isSame(value.timeZone(timeZone), currentMode) &&
                 !this.isCellDisabled(date));
         },
         isCellUnavailable(date) {
@@ -176,6 +195,9 @@ export function useCalendarState(props) {
         isWeekend(date) {
             return this.mode === 'days' && [0, 6].includes(date.day());
         },
+        isCurrent(date) {
+            return dateTime({ timeZone }).isSame(date, this.mode);
+        },
         mode: currentMode,
         setMode,
         availableModes,

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

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

package/dist/esm/components/{CalendarBase → CalendarView}/hooks/useRangeCalendarState.js

@@ -1,18 +1,31 @@
 import { __rest } from "tslib";
 import React from 'react';
-import { useControlledState } from '../../hooks/useControlledState';
+import { useControlledState } from '@gravity-ui/uikit';
+import { mergeDateTime } from '../../utils/dates';
+import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
 import { constrainValue } from '../utils';
 import { useCalendarState } from './useCalendarState';
 export function useRangeCalendarState(props) {
-    var _a, _b;
-    const { value: valueProp, defaultValue, onUpdate } = props, calendarProps = __rest(props, ["value", "defaultValue", "onUpdate"]);
+    var _a;
+    const { value: valueProp, defaultValue = null, onUpdate } = props, calendarProps = __rest(props, ["value", "defaultValue", "onUpdate"]);
     const [value, setValue] = useControlledState(valueProp, defaultValue, onUpdate);
     const [anchorDate, setAnchorDateState] = React.useState();
-    const calendar = useCalendarState(Object.assign(Object.assign({}, calendarProps), { value: (_a = value === null || value === void 0 ? void 0 : value.start) !== null && _a !== void 0 ? _a : null }));
+    const inputTimeZone = useDefaultTimeZone((valueProp === null || valueProp === void 0 ? void 0 : valueProp.start) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.start) || props.focusedValue || props.defaultFocusedValue);
+    const timeZone = props.timeZone || inputTimeZone;
+    const calendar = useCalendarState(Object.assign(Object.assign({}, calendarProps), { value: null, timeZone }));
     const highlightedRange = anchorDate
         ? makeRange(anchorDate, calendar.focusedDate, calendar.mode)
-        : (_b = (value && makeRange(value.start, value.end, calendar.mode))) !== null && _b !== void 0 ? _b : undefined;
+        : (_a = (value &&
+            makeRange(value.start.timeZone(timeZone), value.end.timeZone(timeZone), calendar.mode))) !== null && _a !== void 0 ? _a : undefined;
     const minMode = calendar.availableModes[0];
+    const handleSetValue = (v) => {
+        let { start, end } = v;
+        if (value) {
+            start = mergeDateTime(start, value.start.timeZone(timeZone));
+            end = mergeDateTime(end, value.end.timeZone(timeZone));
+        }
+        setValue({ start: start.timeZone(inputTimeZone), end: end.timeZone(inputTimeZone) });
+    };
     const selectDate = (date, force = false) => {
         if (props.disabled) {
             return;
@@ -24,22 +37,20 @@ export function useRangeCalendarState(props) {
         if (props.readOnly) {
             return;
         }
-        date = constrainValue(date, props.minValue, props.maxValue);
-        if (calendar.isCellUnavailable(date)) {
+        const newDate = constrainValue(date, calendar.minValue, calendar.maxValue);
+        if (calendar.isCellUnavailable(newDate)) {
             return;
         }
         if (anchorDate) {
-            const range = makeRange(anchorDate, date, calendar.mode);
-            setValue(range);
+            const range = makeRange(anchorDate, newDate, calendar.mode);
+            handleSetValue(range);
             setAnchorDateState(undefined);
         }
         else {
-            setAnchorDateState(date);
+            setAnchorDateState(newDate);
         }
     };
-    return Object.assign(Object.assign({}, calendar), { value,
-        setValue,
-        selectDate,
+    return Object.assign(Object.assign({}, calendar), { value, setValue: handleSetValue, selectDate,
         anchorDate, setAnchorDate: setAnchorDateState, highlightedRange,
         isSelected(date) {
             if (!highlightedRange) {

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

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

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

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { TextInput, useFocusWithin } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
@@ -17,5 +17,7 @@ export function DateField(_a) {
             setActive(isFocusWithin);
         },
     });
-    return (_jsx("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: _jsx(TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })) })));
+    return (_jsxs("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: [_jsx(TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })), _jsx("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
+                // Ignore React warning
+                onChange: () => { } })] })));
 }

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

@@ -0,0 +1,97 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { ValidationState } from '../../types';
+import type { DateFieldSection } from '../types';
+export type BaseDateFieldStateOptions<T = DateTime> = {
+    value: T | null;
+    displayValue: T;
+    placeholderValue?: DateTime;
+    timeZone: string;
+    validationState?: ValidationState;
+    editableSections: DateFieldSection[];
+    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;
+    adjustSection: (sectionIndex: number, amount: number) => void;
+    setSection: (sectionIndex: number, amount: number) => void;
+    getSectionValue: (sectionIndex: number) => DateTime;
+    setSectionValue: (sectionIndex: number, currentValue: DateTime) => void;
+    createPlaceholder: () => T;
+    setValueFromString: (str: string) => boolean;
+};
+export type BaseDateFieldState<T = DateTime> = {
+    /** The current field value. */
+    value: T | null;
+    /** Is no part of value is filled. */
+    isEmpty: boolean;
+    /** The current used value. value or placeholderValue */
+    displayValue: T;
+    /** Sets the field's value. */
+    setValue: (value: T) => void;
+    /** Formatted value */
+    text: string;
+    /** Whether the field is read only. */
+    readOnly?: boolean;
+    /** Whether the field is disabled. */
+    disabled?: boolean;
+    /** A list of segments for the current value. */
+    sections: DateFieldSection[];
+    /** Whether the the format is containing date parts */
+    hasDate: boolean;
+    /** 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 segment 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;
+    /**
+     * Decrements the currently selected segment 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. */
+    clearAll: () => void;
+    /** Handles input key in the currently selected segment */
+    onInput: (key: string) => void;
+    setValueFromString: (str: string) => boolean;
+};
+export declare function useBaseDateFieldState<T = DateTime>(props: BaseDateFieldStateOptions<T>): BaseDateFieldState<T>;