@gravity-ui/date-components 1.0.0

package/dist/cjs/components/DateField/DateField.css

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

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

@@ -0,0 +1,6 @@
+import type { AccessibilityProps, DomProps, FocusableProps, KeyboardEvents, StyleProps, TextInputExtendProps, TextInputProps } from '../types';
+import type { DateFieldStateOptions } from './hooks/useDateFieldState';
+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/cjs/components/DateField/DateField.js

@@ -0,0 +1,38 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../utils/cn");
+const useDateFieldProps_1 = require("./hooks/useDateFieldProps");
+const useDateFieldState_1 = require("./hooks/useDateFieldState");
+require("./DateField.css");
+const b = (0, cn_1.block)('date-field');
+function DateField(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const state = (0, useDateFieldState_1.useDateFieldState)(props);
+    const { inputProps } = (0, useDateFieldProps_1.useDateFieldProps)(state, props);
+    const [isActive, setActive] = react_1.default.useState(false);
+    const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
+        onFocusWithinChange(isFocusWithin) {
+            setActive(isFocusWithin);
+        },
+    });
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })) })));
+}
+exports.DateField = DateField;

package/dist/cjs/components/DateField/hooks/useDateFieldProps.d.ts

@@ -0,0 +1,6 @@
+import type { TextInputProps } from '@gravity-ui/uikit';
+import type { DateFieldProps } from '../DateField';
+import type { DateFieldState } from './useDateFieldState';
+export declare function useDateFieldProps(state: DateFieldState, props: DateFieldProps): {
+    inputProps: TextInputProps;
+};

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

@@ -0,0 +1,203 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDateFieldProps = void 0;
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
+function useDateFieldProps(state, props) {
+    const inputRef = react_1.default.useRef(null);
+    const [, setInnerState] = react_1.default.useState({});
+    function setSelectedSections(section) {
+        state.setSelectedSections(section);
+        setInnerState({});
+    }
+    react_1.default.useLayoutEffect(() => {
+        const inputElement = inputRef.current;
+        if (!inputElement) {
+            return;
+        }
+        if (state.selectedSectionIndexes === null) {
+            if (inputElement.scrollLeft) {
+                // Ensure that input content is not marked as selected.
+                // setting selection range to 0 causes issues in Safari.
+                // https://bugs.webkit.org/show_bug.cgi?id=224425
+                inputElement.scrollLeft = 0;
+            }
+            return;
+        }
+        const firstSelectedSection = state.sections[state.selectedSectionIndexes.startIndex];
+        const lastSelectedSection = state.sections[state.selectedSectionIndexes.endIndex];
+        const selectionStart = firstSelectedSection.start;
+        const selectionEnd = lastSelectedSection.end;
+        if (selectionStart !== inputElement.selectionStart ||
+            selectionEnd !== inputElement.selectionEnd) {
+            inputElement.setSelectionRange(selectionStart, selectionEnd);
+        }
+    });
+    function syncSelectionFromDOM() {
+        var _a, _b;
+        if (state.readOnly) {
+            setSelectedSections(-1);
+            return;
+        }
+        state.focusSectionInPosition((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0);
+        setInnerState({});
+    }
+    const inputMode = react_1.default.useMemo(() => {
+        if (!state.selectedSectionIndexes) {
+            return 'text';
+        }
+        const activeSection = state.sections[state.selectedSectionIndexes.startIndex];
+        if (!activeSection || activeSection.contentType === 'letter') {
+            return 'text';
+        }
+        return 'tel';
+    }, [state.selectedSectionIndexes, state.sections]);
+    return {
+        inputProps: {
+            value: state.text,
+            view: props.view,
+            size: props.size,
+            disabled: state.disabled,
+            hasClear: !state.readOnly && !state.isEmpty && props.hasClear,
+            placeholder: props.placeholder,
+            id: props.id,
+            label: props.label,
+            leftContent: props.leftContent,
+            rightContent: props.rightContent,
+            pin: props.pin,
+            autoFocus: props.autoFocus,
+            controlRef: inputRef,
+            autoComplete: 'off',
+            type: 'text',
+            // @ts-expect-error
+            error: (state.validationState === 'invalid' && props.errorMessage) ||
+                state.validationState === 'invalid',
+            onUpdate(value) {
+                if (!value) {
+                    state.clearAll();
+                }
+            },
+            onFocus(e) {
+                var _a;
+                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                if (state.selectedSectionIndexes !== null) {
+                    return;
+                }
+                const input = inputRef.current;
+                setTimeout(() => {
+                    if (!input || input !== inputRef.current) {
+                        return;
+                    }
+                    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();
+                    }
+                });
+            },
+            onBlur(e) {
+                var _a;
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                setSelectedSections(-1);
+            },
+            onKeyDown(e) {
+                var _a;
+                (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                if (e.key === 'ArrowLeft') {
+                    e.preventDefault();
+                    state.focusPreviousSection();
+                }
+                else if (e.key === 'ArrowRight') {
+                    e.preventDefault();
+                    state.focusNextSection();
+                }
+                else if (e.key === 'Home') {
+                    e.preventDefault();
+                    state.focusFirstSection();
+                }
+                else if (e.key === 'End') {
+                    e.preventDefault();
+                    state.focusLastSection();
+                }
+                else if (e.key === 'ArrowUp' && !e.altKey) {
+                    e.preventDefault();
+                    state.increment();
+                }
+                else if (e.key === 'ArrowDown' && !e.altKey) {
+                    e.preventDefault();
+                    state.decrement();
+                }
+                else if (e.key === 'PageUp') {
+                    e.preventDefault();
+                    state.incrementPage();
+                }
+                else if (e.key === 'PageDown') {
+                    e.preventDefault();
+                    state.decrementPage();
+                }
+                else if (e.key === 'Backspace' || e.key === 'Delete') {
+                    e.preventDefault();
+                    state.clearSection();
+                }
+                else if (e.key === 'a' && e[utils_1.CtrlCmd]) {
+                    e.preventDefault();
+                    setSelectedSections('all');
+                }
+            },
+            onKeyUp: props.onKeyUp,
+            controlProps: {
+                'aria-label': props['aria-label'] || undefined,
+                'aria-labelledby': props['aria-labelledby'] || undefined,
+                'aria-describedby': props['aria-describedby'] || undefined,
+                'aria-details': props['aria-details'] || undefined,
+                'aria-disabled': state.disabled || undefined,
+                inputMode,
+                onClick() {
+                    syncSelectionFromDOM();
+                },
+                onMouseUp(e) {
+                    e.preventDefault();
+                },
+                onBeforeInput(e) {
+                    e.preventDefault();
+                    // @ts-expect-error
+                    const key = e.nativeEvent.data;
+                    // eslint-disable-next-line no-eq-null, eqeqeq
+                    if (key != null) {
+                        state.onInput(key);
+                    }
+                },
+                onPaste(e) {
+                    if (state.readOnly) {
+                        e.preventDefault();
+                        return;
+                    }
+                    const pastedValue = e.clipboardData.getData('text');
+                    if (state.setValueFromString(pastedValue)) {
+                        e.preventDefault();
+                    }
+                    else if (state.selectedSectionIndexes &&
+                        state.selectedSectionIndexes.startIndex ===
+                            state.selectedSectionIndexes.endIndex) {
+                        const activeSection = state.sections[state.selectedSectionIndexes.startIndex];
+                        const isValidValue = Boolean(activeSection) &&
+                            ((activeSection.contentType === 'digit' && /^\d+$/.test(pastedValue)) ||
+                                activeSection.contentType === 'letter');
+                        if (!isValidValue) {
+                            e.preventDefault();
+                        }
+                    }
+                },
+            },
+        },
+    };
+}
+exports.useDateFieldProps = useDateFieldProps;

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

@@ -0,0 +1,67 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DateFieldBase } from '../../types/datePicker';
+import type { ValidationState } from '../../types/inputs';
+import type { DateFieldSection } from '../types';
+export interface DateFieldStateOptions extends DateFieldBase {
+}
+export type DateFieldState = {
+    /** The current field value. */
+    value: DateTime | null;
+    /** Is no part of value is filled. */
+    isEmpty: boolean;
+    /** The current used value. value or placeholderValue */
+    displayValue: DateTime;
+    /** Sets the field's value. */
+    setValue: (value: DateTime) => 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[];
+    /** 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;
+    /** 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 useDateFieldState(props: DateFieldStateOptions): DateFieldState;