@gravity-ui/date-components 2.10.3 → 2.11.0

package/dist/esm/components/RangeDateSelection/hooks/useRangeDateSelectionState.d.ts

@@ -0,0 +1,60 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { RangeValue, ValueBase } from '../../types';
+export interface RangeDateSelectionState {
+    viewportInterval: RangeValue<DateTime>;
+    value: RangeValue<DateTime>;
+    setValue: (value: RangeValue<DateTime>) => void;
+    timeZone: string;
+    setDraggingValue: (value: RangeValue<DateTime> | null) => void;
+    canResize: boolean;
+    startDragging: () => void;
+    move: (delta: number, options?: {
+        visualMinDuration?: number;
+    }) => void;
+    scale: (scale: number, options?: {
+        visualMinDuration?: number;
+        fixedPoint?: number;
+    }) => void;
+    moveStart: (delta: number, options?: {
+        visualMinDuration?: number;
+    }) => void;
+    moveEnd: (delta: number, options?: {
+        visualMinDuration?: number;
+    }) => void;
+    endDragging: () => void;
+    align: number;
+    isDragging: boolean;
+}
+export interface RangeDateSelectionOptions extends ValueBase<RangeValue<DateTime>> {
+    /** The minimum allowed date that a user may select. */
+    minValue?: DateTime;
+    /** The maximum allowed date that a user may select. */
+    maxValue?: DateTime;
+    /** Minimum duration of the selection in milliseconds. Defaults to 1 second. */
+    minDuration?: number;
+    /** Maximum duration of the selection in milliseconds. Defaults to 15 years. */
+    maxDuration?: number;
+    /** Alignment of the selection in milliseconds. Defaults to 1 second. */
+    align?: number;
+    /** 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;
+    /**
+     * The number of selection intervals that fit into the underlying ruler.
+     *
+     * @default 4
+     */
+    numberOfIntervals?: number;
+    /**
+     * Place of the selection on the underlying ruler.
+     * Value must be between 0 and 1, where 0 is the start of the ruler and 1 is the end.
+     *
+     * @default 0.5 - center of the ruler
+     */
+    placeOnRuler?: number;
+}
+export declare function useRangeDateSelectionState(props: RangeDateSelectionOptions): RangeDateSelectionState;

package/dist/esm/components/RangeDateSelection/hooks/useRangeDateSelectionState.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import { useControlledState } from '@gravity-ui/uikit';
+import { SECOND, YEAR } from '../../utils/constants';
+import { constrainValue, createPlaceholderValue } from '../../utils/dates';
+import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
+import { alignDateTime } from '../utils/date';
+function getViewportIntervalFromDates(start, end, numberOfIntervals = 4, placeInViewport = 0.5) {
+    const diff = end.diff(start);
+    return {
+        start: start.subtract(diff * (numberOfIntervals - 1) * placeInViewport),
+        end: end.add(diff * (numberOfIntervals - 1) * (1 - placeInViewport)),
+    };
+}
+export function useRangeDateSelectionState(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const inputTimeZone = useDefaultTimeZone(((_a = props.value) === null || _a === void 0 ? void 0 : _a.start) || ((_b = props.defaultValue) === null || _b === void 0 ? void 0 : _b.start) || props.placeholderValue);
+    const timeZone = props.timeZone || inputTimeZone;
+    const placeholderValue = createPlaceholderValue({
+        placeholderValue: props.placeholderValue,
+        timeZone,
+    });
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [currentValue, setCurrentValue] = React.useState(null);
+    const [value, setValue] = useControlledState(props.value, (_c = props.defaultValue) !== null && _c !== void 0 ? _c : {
+        start: placeholderValue.startOf('day').timeZone(inputTimeZone),
+        end: placeholderValue.endOf('day').timeZone(inputTimeZone),
+    }, props.onUpdate);
+    const setInterval = (newValue) => {
+        setCurrentValue(null);
+        setValue({
+            start: alignDateTime(newValue.start, props.align).timeZone(inputTimeZone),
+            end: alignDateTime(newValue.end, props.align).timeZone(inputTimeZone),
+        });
+    };
+    const displayValue = {
+        start: value.start.timeZone(timeZone),
+        end: value.end.timeZone(timeZone),
+    };
+    const interval = isDragging ? displayValue : currentValue !== null && currentValue !== void 0 ? currentValue : displayValue;
+    const viewportInterval = getViewportIntervalFromDates(interval.start, interval.end, props.numberOfIntervals, props.placeOnRuler);
+    const minValue = ((_d = props.minValue) === null || _d === void 0 ? void 0 : _d.isAfter(viewportInterval.start))
+        ? props.minValue
+        : viewportInterval.start;
+    const maxValue = ((_e = props.maxValue) === null || _e === void 0 ? void 0 : _e.isBefore(viewportInterval.end))
+        ? props.maxValue
+        : viewportInterval.end;
+    const align = (_f = props.align) !== null && _f !== void 0 ? _f : SECOND;
+    const minDuration = Math.max((_g = props.minDuration) !== null && _g !== void 0 ? _g : SECOND, align);
+    const maxDuration = Math.max(Math.min((_h = props.maxDuration) !== null && _h !== void 0 ? _h : 15 * YEAR, maxValue.diff(minValue)), minDuration);
+    const canResize = minDuration < maxDuration;
+    const draggingState = React.useRef(null);
+    const setDraggingValue = (v) => {
+        draggingState.current = v;
+        setCurrentValue(v);
+    };
+    const startDragging = () => {
+        setIsDragging(true);
+        setDraggingValue(displayValue);
+    };
+    const endDragging = () => {
+        setIsDragging(false);
+        if (draggingState.current) {
+            setInterval(draggingState.current);
+        }
+    };
+    const moveInterval = (delta) => {
+        if (!draggingState.current) {
+            return;
+        }
+        const { start, end } = draggingState.current;
+        let newStart = start.add(delta, 'millisecond');
+        let newEnd = end.add(delta, 'millisecond');
+        const diff = newEnd.diff(newStart);
+        if (newStart.valueOf() < minValue.valueOf()) {
+            newStart = minValue;
+            newEnd = constrainValue(newStart.add(diff, 'millisecond'), newStart, maxValue);
+        }
+        else if (newEnd.valueOf() > maxValue.valueOf()) {
+            newEnd = maxValue;
+            newStart = constrainValue(newEnd.subtract(diff, 'millisecond'), minValue, newEnd);
+        }
+        setDraggingValue({ start: newStart, end: newEnd });
+    };
+    const moveStart = (delta, { visualMinDuration = minDuration } = {}) => {
+        if (!draggingState.current) {
+            return;
+        }
+        const { start, end } = draggingState.current;
+        let newStart = start.add(delta, 'millisecond');
+        const deltaMin = Math.max(visualMinDuration, minDuration);
+        const deltaMax = Math.min(maxDuration, end.diff(minValue));
+        newStart = constrainValue(newStart, end.subtract(deltaMax, 'millisecond'), end.subtract(deltaMin, 'millisecond'));
+        setDraggingValue({ start: newStart, end });
+    };
+    const moveEnd = (delta, { visualMinDuration = minDuration } = {}) => {
+        if (!draggingState.current) {
+            return;
+        }
+        const { start, end } = draggingState.current;
+        let newEnd = end.add(delta, 'millisecond');
+        const deltaMin = Math.max(visualMinDuration, minDuration);
+        const deltaMax = Math.min(maxDuration, maxValue.diff(start));
+        newEnd = constrainValue(end.add(delta, 'millisecond'), start.add(deltaMin, 'millisecond'), start.add(deltaMax, 'millisecond'));
+        setDraggingValue({ start, end: newEnd });
+    };
+    const zoomInterval = (scale, { visualMinDuration = minDuration, fixedPoint = 0.5, } = {}) => {
+        if (!draggingState.current) {
+            return;
+        }
+        const { start, end } = draggingState.current;
+        const len = end.diff(start);
+        let newDiff = len * scale;
+        newDiff = align * Math.round(newDiff / align);
+        newDiff = Math.min(Math.max(newDiff, Math.max(visualMinDuration, minDuration)), maxDuration);
+        let newStart = start.subtract(fixedPoint * (newDiff - len));
+        let newEnd = newStart.add(newDiff, 'millisecond');
+        const diff = newEnd.diff(newStart);
+        if (newStart.valueOf() < minValue.valueOf()) {
+            newStart = minValue;
+            newEnd = constrainValue(newStart.add(diff, 'millisecond'), newStart, maxValue);
+        }
+        else if (newEnd.valueOf() > maxValue.valueOf()) {
+            newEnd = maxValue;
+            newStart = constrainValue(newEnd.subtract(diff, 'millisecond'), minValue, newEnd);
+        }
+        setDraggingValue({ start: newStart, end: newEnd });
+    };
+    return {
+        viewportInterval,
+        value: currentValue !== null && currentValue !== void 0 ? currentValue : displayValue,
+        setValue: setInterval,
+        setDraggingValue,
+        canResize,
+        startDragging,
+        move: moveInterval,
+        scale: zoomInterval,
+        moveStart,
+        moveEnd,
+        endDragging,
+        timeZone,
+        align,
+        isDragging,
+    };
+}

package/dist/esm/components/RangeDateSelection/i18n/en.json

@@ -0,0 +1,7 @@
+{
+  "Range": "Range",
+  "Start of range": "Start of range",
+  "End of range": "End of range",
+  "Increase range": "Increase range",
+  "Decrease range": "Decrease range"
+}

package/dist/esm/components/RangeDateSelection/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "Range" | "Start of range" | "End of range" | "Increase range" | "Decrease range", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/esm/components/RangeDateSelection/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}range-date-selection`);

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

@@ -0,0 +1,7 @@
+{
+  "Range": "Интервал",
+  "Start of range": "Начало интервала",
+  "End of range": "Конец интервала",
+  "Increase range": "Увеличить интервал",
+  "Decrease range": "Уменьшить интервал"
+}

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

@@ -0,0 +1,3 @@
+export * from './RangeDateSelection';
+export * from './hooks/useRangeDateSelectionState';
+export type { ViewportDimensions, ViewportInterval } from './components/Ruler/Ruler';

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

@@ -0,0 +1,2 @@
+export * from './RangeDateSelection';
+export * from './hooks/useRangeDateSelectionState';

package/dist/esm/components/RangeDateSelection/utils/date.d.ts

@@ -0,0 +1,2 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+export declare function alignDateTime(date: DateTime, align?: number): DateTime;

package/dist/esm/components/RangeDateSelection/utils/date.js

@@ -0,0 +1,7 @@
+import { dateTimeUtc } from '@gravity-ui/date-utils';
+import { SECOND } from '../../utils/constants';
+export function alignDateTime(date, align = SECOND) {
+    return dateTimeUtc({
+        input: Math.round(date.utc(true).valueOf() / align) * align,
+    }).timeZone(date.timeZone(), true);
+}

package/dist/esm/components/RangeDateSelection/utils/span.d.ts

@@ -0,0 +1,23 @@
+export interface Span {
+    start: number;
+    end: number;
+}
+/**
+ * Implements linear interpolation (lerp).
+ *
+ * Calculates such a linear mapping `R -> R` that `from.start` will be mapped
+ * into `to.start`, and `from.end` will be mapped to `to.end`. Then applies
+ * this mapping to `value`.
+ * @param from Interpolation domain
+ * @param to Interpolation target
+ * @param value Value from domain
+ * @returns Value from target
+ */
+export declare function lerp(from: Span, to: Span, value: number): number;
+/**
+ * Calculates a lerp scale coefficient
+ * @param from Interpolation domain
+ * @param to Interpolation target
+ * @returns Scale coefficient
+ */
+export declare function getLerpCoeff(from: Span, to: Span): number;

package/dist/esm/components/RangeDateSelection/utils/span.js

@@ -0,0 +1,23 @@
+/**
+ * Implements linear interpolation (lerp).
+ *
+ * Calculates such a linear mapping `R -> R` that `from.start` will be mapped
+ * into `to.start`, and `from.end` will be mapped to `to.end`. Then applies
+ * this mapping to `value`.
+ * @param from Interpolation domain
+ * @param to Interpolation target
+ * @param value Value from domain
+ * @returns Value from target
+ */
+export function lerp(from, to, value) {
+    return to.start + ((value - from.start) * (to.end - to.start)) / (from.end - from.start);
+}
+/**
+ * Calculates a lerp scale coefficient
+ * @param from Interpolation domain
+ * @param to Interpolation target
+ * @returns Scale coefficient
+ */
+export function getLerpCoeff(from, to) {
+    return (to.end - to.start) / (from.end - from.start);
+}

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/i18n/index.d.ts

@@ -1 +1 @@
-export declare const i18n: (key: "Last 5 minutes" | "Last 15 minutes" | "Last 30 minutes" | "Last hour" | "Last 3 hours" | "Last 6 hours" | "Last 12 hours" | "Last day" | "Last 3 days" | "Last week" | "Last month" | "Last 3 months" | "Last 6 months" | "Last year" | "Last 3 years" | "Today" | "Yesterday" | "Day before yesterday" | "This week" | "This month" | "This year" | "From start of day" | "From start of week" | "From start of month" | "From start of year" | "Previous month" | "Last second" | "Last minute" | "Main" | "Other" | "Range" | "From" | "To" | "Last {count} second" | "Last {count} minute" | "Last {count} hour" | "Last {count} day" | "Last {count} week" | "Last {count} month" | "Last {count} year", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: (key: "Range" | "Last 5 minutes" | "Last 15 minutes" | "Last 30 minutes" | "Last hour" | "Last 3 hours" | "Last 6 hours" | "Last 12 hours" | "Last day" | "Last 3 days" | "Last week" | "Last month" | "Last 3 months" | "Last 6 months" | "Last year" | "Last 3 years" | "Today" | "Yesterday" | "Day before yesterday" | "This week" | "This month" | "This year" | "From start of day" | "From start of week" | "From start of month" | "From start of year" | "Previous month" | "Last second" | "Last minute" | "Main" | "Other" | "From" | "To" | "Last {count} second" | "Last {count} minute" | "Last {count} hour" | "Last {count} day" | "Last {count} week" | "Last {count} month" | "Last {count} year", params?: import("@gravity-ui/i18n").Params | undefined) => string;

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

@@ -3,6 +3,7 @@ export * from './RangeCalendar';
 export * from './DateField';
 export * from './DatePicker';
 export * from './RangeDatePicker';
+export * from './RangeDateSelection';
 export * from './RelativeDateField';
 export * from './RelativeDatePicker';
 export * from './RangeDateField';

package/dist/esm/components/index.js

@@ -3,6 +3,7 @@ export * from './RangeCalendar';
 export * from './DateField';
 export * from './DatePicker';
 export * from './RangeDatePicker';
+export * from './RangeDateSelection';
 export * from './RelativeDateField';
 export * from './RelativeDatePicker';
 export * from './RangeDateField';

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

@@ -0,0 +1,7 @@
+export declare const SECOND = 1000;
+export declare const MINUTE: number;
+export declare const HOUR: number;
+export declare const DAY: number;
+export declare const WEEK: number;
+export declare const MONTH: number;
+export declare const YEAR: number;

package/dist/esm/components/utils/constants.js

@@ -0,0 +1,7 @@
+export const SECOND = 1000;
+export const MINUTE = 60 * SECOND;
+export const HOUR = 60 * MINUTE;
+export const DAY = 24 * HOUR;
+export const WEEK = 7 * DAY;
+export const MONTH = 30 * DAY;
+export const YEAR = 365 * DAY;

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

@@ -0,0 +1,17 @@
+import type { AccessibilityProps } from '../types';
+interface Options {
+    /**
+     * If labelling associated aria properties should be included in the filter.
+     */
+    labelable?: boolean;
+    /**
+     * A Set of other property names that should be included in the filter.
+     */
+    propNames?: Set<string>;
+}
+export declare function filterDOMProps(props: {
+    id?: string;
+} & AccessibilityProps, options?: Options): {
+    id?: string;
+} & AccessibilityProps;
+export {};

package/dist/esm/components/utils/filterDOMProps.js

@@ -0,0 +1,24 @@
+const DOMPropNames = new Set(['id']);
+const labelablePropNames = new Set([
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'aria-details',
+]);
+const propRe = /^(data-.*)$/;
+/* FIXME: use the same function from @gravity-ui/uikit */
+export function filterDOMProps(props, options = {}) {
+    const { labelable, propNames } = options;
+    const filteredProps = {};
+    for (const prop in props) {
+        if (Object.prototype.hasOwnProperty.call(props, prop) &&
+            (DOMPropNames.has(prop) ||
+                (labelable && labelablePropNames.has(prop)) ||
+                (propNames === null || propNames === void 0 ? void 0 : propNames.has(prop)) ||
+                propRe.test(prop))) {
+            // @ts-expect-error
+            filteredProps[prop] = props[prop];
+        }
+    }
+    return filteredProps;
+}

package/dist/esm/hooks/useEventHandler.d.ts

@@ -0,0 +1 @@
+export declare function useEventHandler<T extends Function>(handler?: T): T;

package/dist/esm/hooks/useEventHandler.js

@@ -0,0 +1,18 @@
+import React from 'react';
+/*
+ * TODO: move to @gravity-ui/uikit
+ * The hook returns a stable function (an empty list of dependencies),
+ * but this function always calls the actual function associated with the last render.
+ * The returned function should be used as an event handler or inside a useEffect.
+ */
+export function useEventHandler(handler) {
+    const ref = React.useRef(handler);
+    React.useLayoutEffect(() => {
+        ref.current = handler;
+    }, [handler]);
+    // @ts-expect-error
+    return React.useCallback((...args) => {
+        var _a;
+        return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...args);
+    }, []);
+}

package/dist/esm/hooks/useMove.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export type PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard';
+interface EventBase {
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+}
+interface BaseMoveEvent extends EventBase {
+    pointerType: PointerType;
+}
+export interface MoveStartEvent extends BaseMoveEvent {
+    type: 'movestart';
+}
+export interface MoveMoveEvent extends BaseMoveEvent {
+    type: 'move';
+    deltaX: number;
+    deltaY: number;
+}
+export interface MoveEndEvent extends BaseMoveEvent {
+    type: 'moveend';
+}
+export interface MoveEvents {
+    onMoveStart?: (e: MoveStartEvent) => void;
+    onMove?: (e: MoveMoveEvent) => void;
+    onMoveEnd?: (e: MoveEndEvent) => void;
+}
+export declare function useMove(props: MoveEvents): {
+    moveProps: React.DOMAttributes<HTMLElement>;
+};
+export {};

package/dist/esm/hooks/useMove.js

@@ -0,0 +1,167 @@
+import React from 'react';
+import { useEventHandler } from './useEventHandler';
+export function useMove(props) {
+    const { onMoveStart, onMove, onMoveEnd } = props;
+    const state = React.useRef({
+        isMoving: false,
+        lastPosition: null,
+        id: null,
+    });
+    const move = useEventHandler((originalEvent, deltaX, deltaY, pointerType) => {
+        if (deltaX === 0 && deltaY === 0) {
+            return;
+        }
+        if (!state.current.isMoving) {
+            state.current.isMoving = true;
+            onMoveStart === null || onMoveStart === void 0 ? void 0 : onMoveStart({
+                type: 'movestart',
+                pointerType,
+                shiftKey: originalEvent.shiftKey,
+                ctrlKey: originalEvent.ctrlKey,
+                metaKey: originalEvent.metaKey,
+                altKey: originalEvent.altKey,
+            });
+        }
+        onMove === null || onMove === void 0 ? void 0 : onMove({
+            type: 'move',
+            pointerType,
+            deltaX,
+            deltaY,
+            shiftKey: originalEvent.shiftKey,
+            ctrlKey: originalEvent.ctrlKey,
+            metaKey: originalEvent.metaKey,
+            altKey: originalEvent.altKey,
+        });
+    });
+    const end = useEventHandler((originalEvent, pointerType) => {
+        if (state.current.isMoving) {
+            state.current.isMoving = false;
+            onMoveEnd === null || onMoveEnd === void 0 ? void 0 : onMoveEnd({
+                type: 'moveend',
+                pointerType,
+                shiftKey: originalEvent.shiftKey,
+                ctrlKey: originalEvent.ctrlKey,
+                metaKey: originalEvent.metaKey,
+                altKey: originalEvent.altKey,
+            });
+        }
+    });
+    return React.useMemo(() => {
+        const moveProps = {};
+        if (typeof PointerEvent === 'undefined') {
+            moveProps.onMouseDown = (e) => {
+                if (e.button === 0) {
+                    state.current.isMoving = false;
+                    e.preventDefault();
+                    state.current.lastPosition = { pageX: e.pageX, pageY: e.pageY };
+                    const handleMouseMove = (ev) => {
+                        var _a, _b;
+                        if (ev.buttons === 0) {
+                            move(ev, ev.pageX - (((_a = state.current.lastPosition) === null || _a === void 0 ? void 0 : _a.pageX) || 0), ev.pageY - (((_b = state.current.lastPosition) === null || _b === void 0 ? void 0 : _b.pageY) || 0), 'mouse');
+                            state.current.lastPosition = { pageX: ev.pageX, pageY: ev.pageY };
+                        }
+                    };
+                    const handleMouseUp = (ev) => {
+                        if (ev.button === 0) {
+                            end(ev, 'mouse');
+                            window.removeEventListener('mousemove', handleMouseMove);
+                            window.removeEventListener('mouseup', handleMouseUp);
+                        }
+                    };
+                    window.addEventListener('mousemove', handleMouseMove);
+                    window.addEventListener('mouseup', handleMouseUp);
+                }
+            };
+            moveProps.onTouchStart = (e) => {
+                if (e.touches.length === 0 || state.current.id !== null) {
+                    return;
+                }
+                const { pageX, pageY, identifier } = e.touches[0];
+                state.current.id = identifier;
+                state.current.lastPosition = { pageX, pageY };
+                e.preventDefault();
+                const handleTouchMove = (ev) => {
+                    var _a, _b;
+                    const touch = [...ev.changedTouches].findIndex((el) => el.identifier === state.current.id);
+                    if (touch !== -1) {
+                        const { pageX, pageY } = e.changedTouches[touch];
+                        move(ev, pageX - (((_a = state.current.lastPosition) === null || _a === void 0 ? void 0 : _a.pageX) || 0), pageY - (((_b = state.current.lastPosition) === null || _b === void 0 ? void 0 : _b.pageY) || 0), 'touch');
+                        state.current.lastPosition = { pageX, pageY };
+                    }
+                };
+                const handleTouchEnd = (ev) => {
+                    const touch = [...ev.changedTouches].findIndex((el) => el.identifier === state.current.id);
+                    if (touch !== -1) {
+                        end(ev, 'touch');
+                        state.current.id = null;
+                        window.removeEventListener('touchmove', handleTouchMove);
+                        window.removeEventListener('touchend', handleTouchEnd);
+                        window.removeEventListener('touchcancel', handleTouchEnd);
+                    }
+                };
+                window.addEventListener('touchmove', handleTouchMove);
+                window.addEventListener('touchend', handleTouchEnd);
+                window.addEventListener('touchcancel', handleTouchEnd);
+            };
+        }
+        else {
+            moveProps.onPointerDown = (e) => {
+                if (e.button === 0 && state.current.id === null) {
+                    e.preventDefault();
+                    state.current.isMoving = false;
+                    state.current.id = e.pointerId;
+                    state.current.lastPosition = { pageX: e.pageX, pageY: e.pageY };
+                    const handlePointerMove = (ev) => {
+                        var _a, _b;
+                        if (ev.pointerId === state.current.id) {
+                            move(ev, ev.pageX - (((_a = state.current.lastPosition) === null || _a === void 0 ? void 0 : _a.pageX) || 0), ev.pageY - (((_b = state.current.lastPosition) === null || _b === void 0 ? void 0 : _b.pageY) || 0), (ev.pointerType || 'mouse'));
+                            state.current.lastPosition = { pageX: ev.pageX, pageY: ev.pageY };
+                        }
+                    };
+                    const handlePointerUp = (ev) => {
+                        if (ev.pointerId === state.current.id) {
+                            end(ev, (ev.pointerType || 'mouse'));
+                            state.current.id = null;
+                            window.removeEventListener('pointermove', handlePointerMove);
+                            window.removeEventListener('pointerup', handlePointerUp);
+                            window.removeEventListener('pointercancel', handlePointerUp);
+                        }
+                    };
+                    window.addEventListener('pointermove', handlePointerMove);
+                    window.addEventListener('pointerup', handlePointerUp);
+                    window.addEventListener('pointercancel', handlePointerUp);
+                }
+            };
+        }
+        const handleKeyboardMove = (e, deltaX, deltaY) => {
+            state.current.isMoving = false;
+            move(e, deltaX, deltaY, 'keyboard');
+            end(e, 'keyboard');
+        };
+        moveProps.onKeyDown = (e) => {
+            switch (e.key) {
+                case 'ArrowLeft': {
+                    e.preventDefault();
+                    handleKeyboardMove(e, -1, 0);
+                    break;
+                }
+                case 'ArrowRight': {
+                    e.preventDefault();
+                    handleKeyboardMove(e, 1, 0);
+                    break;
+                }
+                case 'ArrowUp': {
+                    e.preventDefault();
+                    handleKeyboardMove(e, 0, -1);
+                    break;
+                }
+                case 'ArrowDown': {
+                    e.preventDefault();
+                    handleKeyboardMove(e, 0, 1);
+                    break;
+                }
+            }
+        };
+        return { moveProps };
+    }, [end, move]);
+}

package/dist/esm/hooks/useResizeObserver.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface UseResizeObserverProps<T> {
+    ref: React.RefObject<T | null | undefined> | undefined;
+    onResize: () => void;
+    box?: ResizeObserverBoxOptions;
+}
+export declare function useResizeObserver<T extends Element>({ ref, onResize, box, }: UseResizeObserverProps<T>): void;
+export {};

package/dist/esm/hooks/useResizeObserver.js

@@ -0,0 +1,26 @@
+import React from 'react';
+/* FIXME: use the same hook from @gravity-ui/uikit */
+export function useResizeObserver({ ref, onResize, box, }) {
+    React.useEffect(() => {
+        const element = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (!element) {
+            return undefined;
+        }
+        if (typeof window.ResizeObserver === 'undefined') {
+            window.addEventListener('resize', onResize, false);
+            return () => {
+                window.removeEventListener('resize', onResize, false);
+            };
+        }
+        const observer = new ResizeObserver((entries) => {
+            if (!entries.length) {
+                return;
+            }
+            onResize();
+        });
+        observer.observe(element, { box });
+        return () => {
+            observer.disconnect();
+        };
+    }, [ref, onResize, box]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "2.10.3",
+  "version": "2.11.0",
   "description": "",
   "license": "MIT",
   "main": "dist/cjs/index.js",