@gravity-ui/date-components 3.4.2 → 4.1.0

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

@@ -1,18 +1,21 @@
 import React from 'react';
+import { useFocusWithin } from '@gravity-ui/uikit';
+import { CtrlCmd } from "../../utils/constants.js";
+import { filterDOMProps } from "../../utils/filterDOMProps.js";
 import { cleanString } from "../utils.js";
+import { useFocusManager } from "./useFocusManager.js";
 export function useDateFieldProps(state, props) {
     const inputRef = React.useRef(null);
     const [, setInnerState] = React.useState({});
-    function setSelectedSections(section) {
-        state.setSelectedSections(section);
-        setInnerState({});
-    }
+    const enteredKeys = React.useRef('');
+    const focusManager = useFocusManager({ sections: state.sections });
+    const { text, positions } = React.useMemo(() => prepareState(state.sections), [state.sections]);
     React.useLayoutEffect(() => {
         const inputElement = inputRef.current;
         if (!inputElement) {
             return;
         }
-        if (state.selectedSectionIndexes === null) {
+        if (focusManager.selectedSectionIndexes === null) {
             if (inputElement.scrollLeft) {
                 // Ensure that input content is not marked as selected.
                 // setting selection range to 0 causes issues in Safari.
@@ -21,8 +24,8 @@ export function useDateFieldProps(state, props) {
             }
             return;
         }
-        const firstSelectedSection = state.sections[state.selectedSectionIndexes.startIndex];
-        const lastSelectedSection = state.sections[state.selectedSectionIndexes.endIndex];
+        const firstSelectedSection = positions[focusManager.selectedSectionIndexes.startIndex];
+        const lastSelectedSection = positions[focusManager.selectedSectionIndexes.endIndex];
         if (firstSelectedSection && lastSelectedSection) {
             const selectionStart = firstSelectedSection.start;
             const selectionEnd = lastSelectedSection.end;
@@ -33,23 +36,189 @@ export function useDateFieldProps(state, props) {
         }
     });
     function syncSelectionFromDOM() {
-        var _a, _b;
-        state.focusSectionInPosition((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0);
+        enteredKeys.current = '';
+        const position = inputRef.current?.selectionStart ?? 0;
+        const index = positions.findIndex((s) => s.end >= position);
+        focusManager.focusSection(index === -1 ? 0 : index);
         setInnerState({});
     }
     const inputMode = React.useMemo(() => {
-        if (!state.selectedSectionIndexes) {
+        if (!focusManager.selectedSectionIndexes) {
             return 'text';
         }
-        const activeSection = state.sections[state.selectedSectionIndexes.startIndex];
+        const activeSection = state.sections[focusManager.selectedSectionIndexes.startIndex];
         if (!activeSection || activeSection.contentType === 'letter') {
             return 'text';
         }
         return 'tel';
-    }, [state.selectedSectionIndexes, state.sections]);
+    }, [focusManager.selectedSectionIndexes, state.sections]);
+    function onInput(key) {
+        if (state.readOnly || state.disabled) {
+            return;
+        }
+        const sectionIndex = focusManager.activeSectionIndex;
+        if (sectionIndex === -1) {
+            return;
+        }
+        const section = state.sections[sectionIndex];
+        const isLastSection = focusManager.isLastSection(sectionIndex);
+        let newValue = enteredKeys.current + key;
+        const onInputNumber = (numberValue) => {
+            let sectionValue = numberValue;
+            const sectionMaxValue = section.maxValue ?? 0;
+            const allowsZero = section.minValue === 0;
+            let shouldResetUserInput;
+            if (
+            // 12-hour clock format with AM/PM
+            section.type === 'hour' &&
+                (sectionMaxValue === 11 || section.minValue === 12)) {
+                if (sectionValue > 12) {
+                    sectionValue = Number(key);
+                    newValue = key;
+                }
+                if (sectionValue === 0) {
+                    sectionValue = -Infinity;
+                }
+                if (sectionValue === 12) {
+                    sectionValue = 0;
+                }
+                if (section.minValue === 12) {
+                    sectionValue += 12;
+                }
+                shouldResetUserInput = Number(newValue + '0') > 12;
+            }
+            else if (sectionValue > sectionMaxValue) {
+                sectionValue = Number(key);
+                newValue = key;
+                if (sectionValue > sectionMaxValue) {
+                    enteredKeys.current = '';
+                    return;
+                }
+            }
+            const shouldSetValue = sectionValue > 0 || (sectionValue === 0 && allowsZero);
+            if (shouldSetValue) {
+                state.setSection(sectionIndex, sectionValue);
+            }
+            if (shouldResetUserInput === undefined) {
+                shouldResetUserInput = Number(newValue + '0') > sectionMaxValue;
+            }
+            const isMaxLength = newValue.length >= String(sectionMaxValue).length;
+            if (shouldResetUserInput) {
+                enteredKeys.current = '';
+                if (shouldSetValue) {
+                    focusManager.focusNextSection();
+                }
+            }
+            else if (isMaxLength && shouldSetValue && !isLastSection) {
+                focusManager.focusNextSection();
+            }
+            else {
+                enteredKeys.current = newValue;
+            }
+        };
+        const onInputString = (stringValue) => {
+            const options = section.options ?? [];
+            let sectionValue = stringValue.toLocaleUpperCase();
+            let foundOptions = options.filter((v) => v.startsWith(sectionValue));
+            if (foundOptions.length === 0) {
+                if (stringValue !== key) {
+                    sectionValue = key.toLocaleUpperCase();
+                    foundOptions = options.filter((v) => v.startsWith(sectionValue));
+                }
+                if (foundOptions.length === 0) {
+                    enteredKeys.current = '';
+                    return;
+                }
+            }
+            const foundValue = foundOptions[0];
+            const index = options.indexOf(foundValue);
+            if (section.type === 'month') {
+                state.setSection(sectionIndex, index + 1);
+            }
+            else {
+                state.setSection(sectionIndex, index);
+            }
+            if (foundOptions.length > 1) {
+                enteredKeys.current = newValue;
+            }
+            else {
+                enteredKeys.current = '';
+                focusManager.focusNextSection();
+            }
+        };
+        switch (section.type) {
+            case 'day':
+            case 'hour':
+            case 'minute':
+            case 'second':
+            case 'quarter':
+            case 'year': {
+                if (!Number.isInteger(Number(newValue))) {
+                    return;
+                }
+                const numberValue = Number(newValue);
+                onInputNumber(numberValue);
+                break;
+            }
+            case 'dayPeriod': {
+                onInputString(newValue);
+                break;
+            }
+            case 'weekday':
+            case 'month': {
+                if (Number.isInteger(Number(newValue))) {
+                    const numberValue = Number(newValue);
+                    onInputNumber(numberValue);
+                }
+                else {
+                    onInputString(newValue);
+                }
+                break;
+            }
+        }
+    }
+    function backspace() {
+        if (focusManager.selectedSectionIndexes === null) {
+            return;
+        }
+        if (focusManager.selectedSectionIndexes.startIndex ===
+            focusManager.selectedSectionIndexes.endIndex) {
+            const activeSection = state.sections[focusManager.activeSectionIndex];
+            if (activeSection.value === null) {
+                focusManager.focusPreviousSection();
+                return;
+            }
+            else if (activeSection.contentType === 'digit') {
+                const newValue = Math.floor(activeSection.value / 10);
+                if (newValue !== 0) {
+                    state.setSection(focusManager.activeSectionIndex, newValue);
+                    enteredKeys.current = `${newValue}`;
+                    return;
+                }
+            }
+            state.clearSection(focusManager.activeSectionIndex);
+        }
+        else {
+            state.clearAll();
+        }
+    }
+    const { focusWithinProps } = useFocusWithin({
+        onBlurWithin: () => {
+            state.confirmPlaceholder();
+        },
+        onFocusWithinChange(isFocusWithin) {
+            state.setActive(isFocusWithin);
+        },
+    });
+    const DOMProps = filterDOMProps(props);
+    delete DOMProps.id;
     return {
+        groupProps: {
+            ...DOMProps,
+            ...focusWithinProps,
+        },
         inputProps: {
-            value: state.text,
+            value: state.isEmpty && !state.isActive && props.placeholder ? '' : text,
             view: props.view,
             size: props.size,
             disabled: state.disabled,
@@ -73,79 +242,75 @@ export function useDateFieldProps(state, props) {
                 }
             },
             onFocus(e) {
-                var _a;
-                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                if (state.selectedSectionIndexes !== null) {
+                props.onFocus?.(e);
+                if (focusManager.selectedSectionIndexes !== null) {
+                    setInnerState({});
                     return;
                 }
                 const input = e.target;
-                const isAutofocus = !inputRef.current;
                 setTimeout(() => {
                     if (!input || input !== inputRef.current) {
                         return;
                     }
-                    if (isAutofocus) {
-                        state.focusSectionInPosition(0);
-                    }
-                    else if (
-                    // avoid selecting all sections when focusing empty field without value
-                    input.value.length &&
-                        Number(input.selectionEnd) - Number(input.selectionStart) ===
-                            input.value.length) {
-                        setSelectedSections('all');
-                    }
-                    else {
-                        syncSelectionFromDOM();
-                    }
+                    syncSelectionFromDOM();
                 });
             },
             onBlur(e) {
-                var _a;
-                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                setSelectedSections(-1);
+                enteredKeys.current = '';
+                props.onBlur?.(e);
+                focusManager.focusSection(-1);
             },
             onKeyDown(e) {
-                var _a;
-                (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                props.onKeyDown?.(e);
                 if (e.key === 'ArrowLeft') {
                     e.preventDefault();
-                    state.focusPreviousSection();
+                    enteredKeys.current = '';
+                    focusManager.focusPreviousSection();
                 }
                 else if (e.key === 'ArrowRight') {
                     e.preventDefault();
-                    state.focusNextSection();
+                    enteredKeys.current = '';
+                    focusManager.focusNextSection();
                 }
                 else if (e.key === 'Home') {
                     e.preventDefault();
-                    state.decrementToMin();
+                    enteredKeys.current = '';
+                    state.decrementToMin(focusManager.activeSectionIndex);
                 }
                 else if (e.key === 'End') {
                     e.preventDefault();
-                    state.incrementToMax();
+                    enteredKeys.current = '';
+                    state.incrementToMax(focusManager.activeSectionIndex);
                 }
                 else if (e.key === 'ArrowUp' && !e.altKey) {
                     e.preventDefault();
-                    state.increment();
+                    enteredKeys.current = '';
+                    state.increment(focusManager.activeSectionIndex);
                 }
                 else if (e.key === 'ArrowDown' && !e.altKey) {
                     e.preventDefault();
-                    state.decrement();
+                    enteredKeys.current = '';
+                    state.decrement(focusManager.activeSectionIndex);
                 }
                 else if (e.key === 'PageUp') {
                     e.preventDefault();
-                    state.incrementPage();
+                    enteredKeys.current = '';
+                    state.incrementPage(focusManager.activeSectionIndex);
                 }
                 else if (e.key === 'PageDown') {
                     e.preventDefault();
-                    state.decrementPage();
+                    enteredKeys.current = '';
+                    state.decrementPage(focusManager.activeSectionIndex);
                 }
                 else if (e.key === 'Backspace' || e.key === 'Delete') {
                     e.preventDefault();
-                    state.clearSection();
+                    enteredKeys.current = '';
+                    backspace();
                 }
-                else if (e.key === 'a' && (e['ctrlKey'] || e['metaKey'])) {
+                else if (e.key === 'a' && e[CtrlCmd]) {
                     e.preventDefault();
-                    setSelectedSections('all');
+                    enteredKeys.current = '';
+                    focusManager.focusSection('all');
                 }
             },
             onKeyUp: props.onKeyUp,
@@ -165,9 +330,19 @@ export function useDateFieldProps(state, props) {
                 },
                 onBeforeInput(e) {
                     e.preventDefault();
-                    const key = e.data;
-                    if (key !== undefined && key !== null) {
-                        state.onInput(key);
+                    switch (e.nativeEvent.inputType) {
+                        case 'deleteContentBackward':
+                        case 'deleteContentForward': {
+                            enteredKeys.current = '';
+                            backspace();
+                            break;
+                        }
+                        default: {
+                            const key = e.data;
+                            if (key !== undefined && key !== null) {
+                                onInput(key);
+                            }
+                        }
                     }
                 },
                 onPaste(e) {
@@ -175,18 +350,19 @@ export function useDateFieldProps(state, props) {
                     if (state.readOnly) {
                         return;
                     }
+                    enteredKeys.current = '';
                     const pastedValue = cleanString(e.clipboardData.getData('text'));
-                    if (state.selectedSectionIndexes &&
-                        state.selectedSectionIndexes.startIndex ===
-                            state.selectedSectionIndexes.endIndex) {
-                        const activeSection = state.sections[state.selectedSectionIndexes.startIndex];
+                    if (focusManager.selectedSectionIndexes &&
+                        focusManager.selectedSectionIndexes.startIndex ===
+                            focusManager.selectedSectionIndexes.endIndex) {
+                        const activeSection = state.sections[focusManager.activeSectionIndex];
                         const digitsOnly = /^\d+$/.test(pastedValue);
                         const lettersOnly = /^[a-zA-Z]+$/.test(pastedValue);
                         const isValidValue = Boolean(activeSection &&
                             ((activeSection.contentType === 'digit' && digitsOnly) ||
                                 (activeSection.contentType === 'letter' && lettersOnly)));
                         if (isValidValue) {
-                            state.onInput(pastedValue);
+                            onInput(pastedValue);
                             return;
                         }
                         if (digitsOnly || lettersOnly) {
@@ -199,4 +375,24 @@ export function useDateFieldProps(state, props) {
         },
     };
 }
+function prepareState(sections) {
+    let position = 1;
+    let text = '';
+    const positions = new Array(sections.length);
+    for (let i = 0; i < sections.length; i++) {
+        const section = sections[i];
+        if (!section) {
+            throw new Error('Section must be defined');
+        }
+        // use bidirectional context to allow the browser autodetect text direction
+        const textValue = '\u2068' + section.textValue + '\u2069';
+        text += textValue;
+        const pos = { start: position, end: position + textValue.length };
+        position += textValue.length;
+        positions[i] = pos;
+    }
+    // use ltr direction context to get predictable navigation inside input
+    text = '\u2066' + text + '\u2069';
+    return { text, positions };
+}
 //# sourceMappingURL=useDateFieldProps.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useDateFieldProps.js","sourceRoot":"../../../../../src","sources":["components/DateField/hooks/useDateFieldProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport type {TextInputProps} from '@gravity-ui/uikit';\n\nimport type {\n    AccessibilityProps,\n    DateFieldBase,\n    TextInputProps as DateFieldTextInputProps,\n    DomProps,\n    FocusableProps,\n    InputDOMProps,\n    KeyboardEvents,\n    StyleProps,\n    TextInputExtendProps,\n} from '../../types';\nimport {cleanString} from '../utils';\n\nimport type {DateFieldState} from './useBaseDateFieldState';\n\nexport interface DateFieldProps<T = DateTime>\n    extends\n        DateFieldBase<T>,\n        DateFieldTextInputProps,\n        TextInputExtendProps,\n        DomProps,\n        InputDOMProps,\n        FocusableProps,\n        KeyboardEvents,\n        StyleProps,\n        AccessibilityProps {}\n\nexport function useDateFieldProps<T = DateTime>(\n    state: DateFieldState<T>,\n    props: DateFieldProps<T>,\n): {inputProps: TextInputProps} {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    const [, setInnerState] = React.useState({});\n\n    function setSelectedSections(section: 'all' | number) {\n        state.setSelectedSections(section);\n        setInnerState({});\n    }\n\n    React.useLayoutEffect(() => {\n        const inputElement = inputRef.current;\n        if (!inputElement) {\n            return;\n        }\n\n        if (state.selectedSectionIndexes === null) {\n            if (inputElement.scrollLeft) {\n                // Ensure that input content is not marked as selected.\n                // setting selection range to 0 causes issues in Safari.\n                // https://bugs.webkit.org/show_bug.cgi?id=224425\n                inputElement.scrollLeft = 0;\n            }\n            return;\n        }\n\n        const firstSelectedSection = state.sections[state.selectedSectionIndexes.startIndex];\n        const lastSelectedSection = state.sections[state.selectedSectionIndexes.endIndex];\n        if (firstSelectedSection && lastSelectedSection) {\n            const selectionStart = firstSelectedSection.start;\n            const selectionEnd = lastSelectedSection.end;\n\n            if (\n                selectionStart !== inputElement.selectionStart ||\n                selectionEnd !== inputElement.selectionEnd\n            ) {\n                inputElement.setSelectionRange(selectionStart, selectionEnd);\n            }\n        }\n    });\n\n    function syncSelectionFromDOM() {\n        state.focusSectionInPosition(inputRef.current?.selectionStart ?? 0);\n        setInnerState({});\n    }\n\n    const inputMode = React.useMemo(() => {\n        if (!state.selectedSectionIndexes) {\n            return 'text';\n        }\n\n        const activeSection = state.sections[state.selectedSectionIndexes.startIndex];\n        if (!activeSection || activeSection.contentType === 'letter') {\n            return 'text';\n        }\n\n        return 'tel';\n    }, [state.selectedSectionIndexes, state.sections]);\n\n    return {\n        inputProps: {\n            value: state.text,\n            view: props.view,\n            size: props.size,\n            disabled: state.disabled,\n            hasClear: !state.readOnly && !state.isEmpty && props.hasClear,\n            placeholder: props.placeholder,\n            id: props.id,\n            label: props.label,\n            startContent: props.startContent,\n            endContent: props.endContent,\n            pin: props.pin,\n            autoFocus: props.autoFocus,\n            controlRef: inputRef,\n            autoComplete: 'off',\n            type: 'text',\n            validationState: state.validationState,\n            errorMessage: props.errorMessage,\n            errorPlacement: props.errorPlacement,\n            onUpdate(value) {\n                if (!value) {\n                    state.clearAll();\n                }\n            },\n            onFocus(e) {\n                props.onFocus?.(e);\n\n                if (state.selectedSectionIndexes !== null) {\n                    return;\n                }\n                const input = e.target;\n                const isAutofocus = !inputRef.current;\n                setTimeout(() => {\n                    if (!input || input !== inputRef.current) {\n                        return;\n                    }\n                    if (isAutofocus) {\n                        state.focusSectionInPosition(0);\n                    } else if (\n                        // avoid selecting all sections when focusing empty field without value\n                        input.value.length &&\n                        Number(input.selectionEnd) - Number(input.selectionStart) ===\n                            input.value.length\n                    ) {\n                        setSelectedSections('all');\n                    } else {\n                        syncSelectionFromDOM();\n                    }\n                });\n            },\n            onBlur(e) {\n                props.onBlur?.(e);\n                setSelectedSections(-1);\n            },\n            onKeyDown(e) {\n                props.onKeyDown?.(e);\n\n                if (e.key === 'ArrowLeft') {\n                    e.preventDefault();\n                    state.focusPreviousSection();\n                } else if (e.key === 'ArrowRight') {\n                    e.preventDefault();\n                    state.focusNextSection();\n                } else if (e.key === 'Home') {\n                    e.preventDefault();\n                    state.decrementToMin();\n                } else if (e.key === 'End') {\n                    e.preventDefault();\n                    state.incrementToMax();\n                } else if (e.key === 'ArrowUp' && !e.altKey) {\n                    e.preventDefault();\n                    state.increment();\n                } else if (e.key === 'ArrowDown' && !e.altKey) {\n                    e.preventDefault();\n                    state.decrement();\n                } else if (e.key === 'PageUp') {\n                    e.preventDefault();\n                    state.incrementPage();\n                } else if (e.key === 'PageDown') {\n                    e.preventDefault();\n                    state.decrementPage();\n                } else if (e.key === 'Backspace' || e.key === 'Delete') {\n                    e.preventDefault();\n                    state.clearSection();\n                } else if (e.key === 'a' && (e['ctrlKey'] || e['metaKey'])) {\n                    e.preventDefault();\n                    setSelectedSections('all');\n                }\n            },\n            onKeyUp: props.onKeyUp,\n            controlProps: {\n                'aria-label': props['aria-label'] || undefined,\n                'aria-labelledby': props['aria-labelledby'] || undefined,\n                'aria-describedby': props['aria-describedby'] || undefined,\n                'aria-details': props['aria-details'] || undefined,\n                'aria-disabled': state.disabled || undefined,\n                readOnly: state.readOnly,\n                inputMode,\n                onClick() {\n                    syncSelectionFromDOM();\n                },\n                onMouseUp(e: React.MouseEvent) {\n                    e.preventDefault();\n                },\n                onBeforeInput(e) {\n                    e.preventDefault();\n                    const key = e.data;\n                    if (key !== undefined && key !== null) {\n                        state.onInput(key);\n                    }\n                },\n                onPaste(e: React.ClipboardEvent) {\n                    e.preventDefault();\n                    if (state.readOnly) {\n                        return;\n                    }\n\n                    const pastedValue = cleanString(e.clipboardData.getData('text'));\n                    if (\n                        state.selectedSectionIndexes &&\n                        state.selectedSectionIndexes.startIndex ===\n                            state.selectedSectionIndexes.endIndex\n                    ) {\n                        const activeSection =\n                            state.sections[state.selectedSectionIndexes.startIndex];\n\n                        const digitsOnly = /^\\d+$/.test(pastedValue);\n                        const lettersOnly = /^[a-zA-Z]+$/.test(pastedValue);\n\n                        const isValidValue = Boolean(\n                            activeSection &&\n                            ((activeSection.contentType === 'digit' && digitsOnly) ||\n                                (activeSection.contentType === 'letter' && lettersOnly)),\n                        );\n                        if (isValidValue) {\n                            state.onInput(pastedValue);\n                            return;\n                        }\n                        if (digitsOnly || lettersOnly) {\n                            return;\n                        }\n                    }\n\n                    state.setValueFromString(pastedValue);\n                },\n            },\n        },\n    };\n}\n"]}
+{"version":3,"file":"useDateFieldProps.js","sourceRoot":"../../../../../src","sources":["components/DateField/hooks/useDateFieldProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useFocusWithin} from '@gravity-ui/uikit';\nimport type {TextInputProps} from '@gravity-ui/uikit';\n\nimport type {\n    AccessibilityProps,\n    DateFieldBase,\n    TextInputProps as DateFieldTextInputProps,\n    DomProps,\n    FocusableProps,\n    InputDOMProps,\n    KeyboardEvents,\n    StyleProps,\n    TextInputExtendProps,\n} from '../../types';\nimport {CtrlCmd} from '../../utils/constants.js';\nimport {filterDOMProps} from '../../utils/filterDOMProps.js';\nimport type {DateFieldSection} from '../types';\nimport {cleanString} from '../utils';\n\nimport type {DateFieldState} from './useBaseDateFieldState';\nimport {useFocusManager} from './useFocusManager';\n\nexport interface DateFieldProps<T = DateTime>\n    extends\n        DateFieldBase<T>,\n        DateFieldTextInputProps,\n        TextInputExtendProps,\n        DomProps,\n        InputDOMProps,\n        FocusableProps,\n        KeyboardEvents,\n        StyleProps,\n        AccessibilityProps {}\n\nexport function useDateFieldProps<T = DateTime>(\n    state: DateFieldState<T>,\n    props: DateFieldProps<T>,\n): {groupProps: React.HTMLAttributes<unknown>; inputProps: TextInputProps} {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    const [, setInnerState] = React.useState({});\n\n    const enteredKeys = React.useRef('');\n\n    const focusManager = useFocusManager({sections: state.sections});\n\n    const {text, positions} = React.useMemo(() => prepareState(state.sections), [state.sections]);\n\n    React.useLayoutEffect(() => {\n        const inputElement = inputRef.current;\n        if (!inputElement) {\n            return;\n        }\n\n        if (focusManager.selectedSectionIndexes === null) {\n            if (inputElement.scrollLeft) {\n                // Ensure that input content is not marked as selected.\n                // setting selection range to 0 causes issues in Safari.\n                // https://bugs.webkit.org/show_bug.cgi?id=224425\n                inputElement.scrollLeft = 0;\n            }\n            return;\n        }\n\n        const firstSelectedSection = positions[focusManager.selectedSectionIndexes.startIndex];\n        const lastSelectedSection = positions[focusManager.selectedSectionIndexes.endIndex];\n        if (firstSelectedSection && lastSelectedSection) {\n            const selectionStart = firstSelectedSection.start;\n            const selectionEnd = lastSelectedSection.end;\n\n            if (\n                selectionStart !== inputElement.selectionStart ||\n                selectionEnd !== inputElement.selectionEnd\n            ) {\n                inputElement.setSelectionRange(selectionStart, selectionEnd);\n            }\n        }\n    });\n\n    function syncSelectionFromDOM() {\n        enteredKeys.current = '';\n        const position = inputRef.current?.selectionStart ?? 0;\n        const index = positions.findIndex((s) => s.end >= position);\n        focusManager.focusSection(index === -1 ? 0 : index);\n        setInnerState({});\n    }\n\n    const inputMode = React.useMemo(() => {\n        if (!focusManager.selectedSectionIndexes) {\n            return 'text';\n        }\n\n        const activeSection = state.sections[focusManager.selectedSectionIndexes.startIndex];\n        if (!activeSection || activeSection.contentType === 'letter') {\n            return 'text';\n        }\n\n        return 'tel';\n    }, [focusManager.selectedSectionIndexes, state.sections]);\n\n    function onInput(key: string) {\n        if (state.readOnly || state.disabled) {\n            return;\n        }\n\n        const sectionIndex = focusManager.activeSectionIndex;\n        if (sectionIndex === -1) {\n            return;\n        }\n\n        const section = state.sections[sectionIndex];\n        const isLastSection = focusManager.isLastSection(sectionIndex);\n        let newValue = enteredKeys.current + key;\n\n        const onInputNumber = (numberValue: number) => {\n            let sectionValue = numberValue;\n            const sectionMaxValue = section.maxValue ?? 0;\n            const allowsZero = section.minValue === 0;\n            let shouldResetUserInput;\n            if (\n                // 12-hour clock format with AM/PM\n                section.type === 'hour' &&\n                (sectionMaxValue === 11 || section.minValue === 12)\n            ) {\n                if (sectionValue > 12) {\n                    sectionValue = Number(key);\n                    newValue = key;\n                }\n                if (sectionValue === 0) {\n                    sectionValue = -Infinity;\n                }\n                if (sectionValue === 12) {\n                    sectionValue = 0;\n                }\n                if (section.minValue === 12) {\n                    sectionValue += 12;\n                }\n                shouldResetUserInput = Number(newValue + '0') > 12;\n            } else if (sectionValue > sectionMaxValue) {\n                sectionValue = Number(key);\n                newValue = key;\n                if (sectionValue > sectionMaxValue) {\n                    enteredKeys.current = '';\n                    return;\n                }\n            }\n\n            const shouldSetValue = sectionValue > 0 || (sectionValue === 0 && allowsZero);\n            if (shouldSetValue) {\n                state.setSection(sectionIndex, sectionValue);\n            }\n\n            if (shouldResetUserInput === undefined) {\n                shouldResetUserInput = Number(newValue + '0') > sectionMaxValue;\n            }\n            const isMaxLength = newValue.length >= String(sectionMaxValue).length;\n            if (shouldResetUserInput) {\n                enteredKeys.current = '';\n                if (shouldSetValue) {\n                    focusManager.focusNextSection();\n                }\n            } else if (isMaxLength && shouldSetValue && !isLastSection) {\n                focusManager.focusNextSection();\n            } else {\n                enteredKeys.current = newValue;\n            }\n        };\n\n        const onInputString = (stringValue: string) => {\n            const options = section.options ?? [];\n            let sectionValue = stringValue.toLocaleUpperCase();\n            let foundOptions = options.filter((v) => v.startsWith(sectionValue));\n            if (foundOptions.length === 0) {\n                if (stringValue !== key) {\n                    sectionValue = key.toLocaleUpperCase();\n                    foundOptions = options.filter((v) => v.startsWith(sectionValue));\n                }\n                if (foundOptions.length === 0) {\n                    enteredKeys.current = '';\n                    return;\n                }\n            }\n            const foundValue = foundOptions[0];\n            const index = options.indexOf(foundValue);\n\n            if (section.type === 'month') {\n                state.setSection(sectionIndex, index + 1);\n            } else {\n                state.setSection(sectionIndex, index);\n            }\n\n            if (foundOptions.length > 1) {\n                enteredKeys.current = newValue;\n            } else {\n                enteredKeys.current = '';\n                focusManager.focusNextSection();\n            }\n        };\n\n        switch (section.type) {\n            case 'day':\n            case 'hour':\n            case 'minute':\n            case 'second':\n            case 'quarter':\n            case 'year': {\n                if (!Number.isInteger(Number(newValue))) {\n                    return;\n                }\n                const numberValue = Number(newValue);\n                onInputNumber(numberValue);\n                break;\n            }\n            case 'dayPeriod': {\n                onInputString(newValue);\n                break;\n            }\n            case 'weekday':\n            case 'month': {\n                if (Number.isInteger(Number(newValue))) {\n                    const numberValue = Number(newValue);\n                    onInputNumber(numberValue);\n                } else {\n                    onInputString(newValue);\n                }\n                break;\n            }\n        }\n    }\n\n    function backspace() {\n        if (focusManager.selectedSectionIndexes === null) {\n            return;\n        }\n        if (\n            focusManager.selectedSectionIndexes.startIndex ===\n            focusManager.selectedSectionIndexes.endIndex\n        ) {\n            const activeSection = state.sections[focusManager.activeSectionIndex];\n            if (activeSection.value === null) {\n                focusManager.focusPreviousSection();\n                return;\n            } else if (activeSection.contentType === 'digit') {\n                const newValue = Math.floor(activeSection.value / 10);\n                if (newValue !== 0) {\n                    state.setSection(focusManager.activeSectionIndex, newValue);\n                    enteredKeys.current = `${newValue}`;\n                    return;\n                }\n            }\n            state.clearSection(focusManager.activeSectionIndex);\n        } else {\n            state.clearAll();\n        }\n    }\n\n    const {focusWithinProps} = useFocusWithin({\n        onBlurWithin: () => {\n            state.confirmPlaceholder();\n        },\n        onFocusWithinChange(isFocusWithin) {\n            state.setActive(isFocusWithin);\n        },\n    });\n\n    const DOMProps = filterDOMProps(props);\n    delete DOMProps.id;\n\n    return {\n        groupProps: {\n            ...DOMProps,\n            ...focusWithinProps,\n        },\n        inputProps: {\n            value: state.isEmpty && !state.isActive && props.placeholder ? '' : text,\n            view: props.view,\n            size: props.size,\n            disabled: state.disabled,\n            hasClear: !state.readOnly && !state.isEmpty && props.hasClear,\n            placeholder: props.placeholder,\n            id: props.id,\n            label: props.label,\n            startContent: props.startContent,\n            endContent: props.endContent,\n            pin: props.pin,\n            autoFocus: props.autoFocus,\n            controlRef: inputRef,\n            autoComplete: 'off',\n            type: 'text',\n            validationState: state.validationState,\n            errorMessage: props.errorMessage,\n            errorPlacement: props.errorPlacement,\n            onUpdate(value) {\n                if (!value) {\n                    state.clearAll();\n                }\n            },\n            onFocus(e) {\n                props.onFocus?.(e);\n\n                if (focusManager.selectedSectionIndexes !== null) {\n                    setInnerState({});\n                    return;\n                }\n                const input = e.target;\n                setTimeout(() => {\n                    if (!input || input !== inputRef.current) {\n                        return;\n                    }\n                    syncSelectionFromDOM();\n                });\n            },\n            onBlur(e) {\n                enteredKeys.current = '';\n                props.onBlur?.(e);\n                focusManager.focusSection(-1);\n            },\n            onKeyDown(e) {\n                props.onKeyDown?.(e);\n\n                if (e.key === 'ArrowLeft') {\n                    e.preventDefault();\n                    enteredKeys.current = '';\n                    focusManager.focusPreviousSection();\n                } else if (e.key === 'ArrowRight') {\n                    e.preventDefault();\n                    enteredKeys.current = '';\n                    focusManager.focusNextSection();\n                } else if (e.key === 'Home') {\n                    e.preventDefault();\n                    enteredKeys.current = '';\n                    state.decrementToMin(focusManager.activeSectionIndex);\n                } else if (e.key === 'End') {\n                    e.preventDefault();\n                    enteredKeys.current = '';\n                    state.incrementToMax(focusManager.activeSectionIndex);\n                } else if (e.key === 'ArrowUp' && !e.altKey) {\n                    e.preventDefault();\n                    enteredKeys.current = '';\n                    state.increment(focusManager.activeSectionIndex);\n                } else if (e.key === 'ArrowDown' && !e.altKey) {\n                    e.preventDefault();\n                    enteredKeys.current = '';\n                    state.decrement(focusManager.activeSectionIndex);\n                } else if (e.key === 'PageUp') {\n                    e.preventDefault();\n                    enteredKeys.current = '';\n                    state.incrementPage(focusManager.activeSectionIndex);\n                } else if (e.key === 'PageDown') {\n                    e.preventDefault();\n                    enteredKeys.current = '';\n                    state.decrementPage(focusManager.activeSectionIndex);\n                } else if (e.key === 'Backspace' || e.key === 'Delete') {\n                    e.preventDefault();\n                    enteredKeys.current = '';\n                    backspace();\n                } else if (e.key === 'a' && e[CtrlCmd]) {\n                    e.preventDefault();\n                    enteredKeys.current = '';\n                    focusManager.focusSection('all');\n                }\n            },\n            onKeyUp: props.onKeyUp,\n            controlProps: {\n                'aria-label': props['aria-label'] || undefined,\n                'aria-labelledby': props['aria-labelledby'] || undefined,\n                'aria-describedby': props['aria-describedby'] || undefined,\n                'aria-details': props['aria-details'] || undefined,\n                'aria-disabled': state.disabled || undefined,\n                readOnly: state.readOnly,\n                inputMode,\n                onClick() {\n                    syncSelectionFromDOM();\n                },\n                onMouseUp(e: React.MouseEvent) {\n                    e.preventDefault();\n                },\n                onBeforeInput(e) {\n                    e.preventDefault();\n                    switch (e.nativeEvent.inputType) {\n                        case 'deleteContentBackward':\n                        case 'deleteContentForward': {\n                            enteredKeys.current = '';\n                            backspace();\n                            break;\n                        }\n                        default: {\n                            const key = e.data;\n                            if (key !== undefined && key !== null) {\n                                onInput(key);\n                            }\n                        }\n                    }\n                },\n                onPaste(e: React.ClipboardEvent) {\n                    e.preventDefault();\n                    if (state.readOnly) {\n                        return;\n                    }\n\n                    enteredKeys.current = '';\n                    const pastedValue = cleanString(e.clipboardData.getData('text'));\n                    if (\n                        focusManager.selectedSectionIndexes &&\n                        focusManager.selectedSectionIndexes.startIndex ===\n                            focusManager.selectedSectionIndexes.endIndex\n                    ) {\n                        const activeSection = state.sections[focusManager.activeSectionIndex];\n\n                        const digitsOnly = /^\\d+$/.test(pastedValue);\n                        const lettersOnly = /^[a-zA-Z]+$/.test(pastedValue);\n\n                        const isValidValue = Boolean(\n                            activeSection &&\n                            ((activeSection.contentType === 'digit' && digitsOnly) ||\n                                (activeSection.contentType === 'letter' && lettersOnly)),\n                        );\n                        if (isValidValue) {\n                            onInput(pastedValue);\n                            return;\n                        }\n                        if (digitsOnly || lettersOnly) {\n                            return;\n                        }\n                    }\n\n                    state.setValueFromString(pastedValue);\n                },\n            },\n        },\n    };\n}\n\nfunction prepareState(sections: DateFieldSection[]) {\n    let position = 1;\n    let text = '';\n    const positions: {start: number; end: number}[] = new Array(sections.length);\n    for (let i = 0; i < sections.length; i++) {\n        const section = sections[i];\n        if (!section) {\n            throw new Error('Section must be defined');\n        }\n\n        // use bidirectional context to allow the browser autodetect text direction\n        const textValue = '\\u2068' + section.textValue + '\\u2069';\n        text += textValue;\n        const pos = {start: position, end: position + textValue.length};\n        position += textValue.length;\n        positions[i] = pos;\n    }\n    // use ltr direction context to get predictable navigation inside input\n    text = '\\u2066' + text + '\\u2069';\n    return {text, positions};\n}\n"]}

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

@@ -1,5 +1,23 @@
-import type { DateFieldBase } from "../../types/datePicker.js";
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { InputBase, Validation, ValueBase } from "../../types/index.js";
 import type { DateFieldState } from "./useBaseDateFieldState.js";
-export interface DateFieldStateOptions extends DateFieldBase {
+export interface DateFieldStateOptions extends ValueBase<DateTime | null>, InputBase, Validation {
+    /** The minimum allowed date that a user may select. */
+    minValue?: DateTime;
+    /** The maximum allowed date that a user may select. */
+    maxValue?: DateTime;
+    /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
+    isDateUnavailable?: (date: DateTime) => boolean;
+    /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
+    format?: string;
+    /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */
+    placeholderValue?: DateTime;
+    /**
+     * Which timezone use to show values. Example: 'default', 'system', 'Europe/Amsterdam'.
+     * @default The timezone of the `value` or `defaultValue` or `placeholderValue`, 'default' otherwise.
+     */
+    timeZone?: string;
+    /** Custom parser function for parsing pasted date strings. If not provided, the default parser will be used. */
+    parseDateFromString?: (dateStr: string, format: string, timeZone?: string) => DateTime;
 }
 export declare function useDateFieldState(props: DateFieldStateOptions): DateFieldState;