@alfalab/core-components-date-range-input 1.1.0

package/modern/Component.d.ts

@@ -0,0 +1,190 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, ElementType } from "react";
+import { InputProps } from "@alfalab/core-components-input";
+import { CalendarProps, CalendarMobileProps } from "@alfalab/core-components-calendar";
+import { PopoverProps } from "@alfalab/core-components-popover";
+type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string;
+    /**
+     * Обработчик изменения значения
+     */
+    picker?: boolean;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (payload: {
+        dateFrom?: Date;
+        dateTo?: Date;
+        value: string;
+    }, event?: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (payload: {
+        dateFrom: Date;
+        dateTo: Date;
+        value: string;
+    }, event?: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Компонент календаря
+     */
+    Calendar?: ElementType<CalendarProps>;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean;
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: PopoverProps['position'];
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: PopoverProps['zIndex'];
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean;
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+};
+declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "className" | "dataTestId" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "leftAddons" | "rightAddons" | "size" | "block" | "colors" | "children" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "fieldClassName" | "labelClassName" | "addonsClassName" | "error" | "hint" | "labelView" | "bottomAddons" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "width" | "clear" | "success" | "inputClassName" | "focusedClassName" | "filledClassName" | "onClear" | "wrapperRef"> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string | undefined;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string | undefined;
+    /**
+     * Обработчик изменения значения
+     */
+    picker?: boolean | undefined;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: ((payload: {
+        dateFrom?: Date | undefined;
+        dateTo?: Date | undefined;
+        value: string;
+    }, event?: React.ChangeEvent<HTMLInputElement> | undefined) => void) | undefined;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: ((payload: {
+        dateFrom: Date;
+        dateTo: Date;
+        value: string;
+    }, event?: React.ChangeEvent<HTMLInputElement> | undefined) => void) | undefined;
+    /**
+     * Компонент календаря
+     */
+    Calendar?: React.ComponentClass<CalendarProps, any> | React.FunctionComponent<CalendarProps> | undefined;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
+        open: boolean;
+        title?: string | undefined;
+        onClose?: (() => void) | undefined;
+        yearsAmount?: number | undefined;
+        hasHeader?: boolean | undefined; /**
+         * Дополнительный класс
+         */
+        allowSelectionFromEmptyRange?: boolean | undefined;
+    } & Record<string, unknown>) | undefined;
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number | undefined;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number | undefined;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number | undefined;
+    /**
+     * Список событий
+     */
+    events?: (number | Date)[] | undefined;
+    /**
+     * Список выходных
+     */
+    offDays?: (number | Date)[] | undefined;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: "right" | "left" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: number | undefined;
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean | undefined;
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean | undefined;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { DateRangeInputProps, DateRangeInput };

package/modern/Component.js

@@ -0,0 +1,166 @@
+import React, { useRef, useState, useEffect } from 'react';
+import cn from 'classnames';
+import mergeRefs from 'react-merge-refs';
+import dateFnsIsValid from 'date-fns/isValid';
+import { useMedia } from '@alfalab/hooks';
+import { Input } from '@alfalab/core-components-input/modern';
+import { Calendar, usePeriod, CalendarMobile } from '@alfalab/core-components-calendar/modern';
+import { Popover } from '@alfalab/core-components-popover/modern';
+import { IconButton } from '@alfalab/core-components-icon-button/modern';
+import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import 'date-fns/parse';
+import { parseTimestampToDate, DATE_FORMAT, DATE_MASK, format, parseDateString, isCompleteDateInput, isValid } from './utils/format.js';
+
+var styles = {"component":"date-range-input__component_kztbp","calendarContainer":"date-range-input__calendarContainer_kztbp","calendarResponsive":"date-range-input__calendarResponsive_kztbp","block":"date-range-input__block_kztbp"};
+require('./index.css')
+
+/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
+const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, picker, defaultValue = '', value: propValue, onChange, onComplete, rightAddons, useAnchorWidth, block, popoverPosition = 'bottom-start', zIndexPopover, preventFlip, Calendar: Calendar$1 = Calendar, calendarProps = {}, defaultMonth, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], defaultOpen = false, ...restProps }, ref) => {
+    const [view] = useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop');
+    const inputRef = useRef(null);
+    const calendarRef = useRef(null);
+    const [value, setValue] = useState(propValue || defaultValue);
+    const [open, setOpen] = useState(false);
+    const inputDisabled = disabled || readOnly;
+    const CalendarComponent = view === 'desktop' ? Calendar$1 : CalendarMobile;
+    const calendarResponsive = calendarProps?.responsive ?? true;
+    useEffect(() => {
+        setOpen(defaultOpen);
+    }, [defaultOpen]);
+    const handlePeriodChange = (selectedFrom, selectedTo) => {
+        if (selectedFrom && !selectedTo && value.length === DATE_MASK.length) {
+            setValue(parseTimestampToDate(selectedFrom));
+        }
+        else if ((!selectedFrom && !selectedTo && value.length === DATE_FORMAT.length) ||
+            (selectedFrom === selectedTo && value.length === DATE_MASK.length)) {
+            setValue('');
+        }
+        if (onChange) {
+            onChange({
+                dateFrom: selectedFrom ? new Date(selectedFrom) : undefined,
+                dateTo: selectedTo ? new Date(selectedTo) : undefined,
+                value,
+            });
+        }
+        if (onComplete && selectedFrom && selectedTo) {
+            onComplete({
+                dateFrom: new Date(selectedFrom),
+                dateTo: new Date(selectedTo),
+                value,
+            });
+        }
+    };
+    const { selectedFrom, selectedTo, updatePeriod, resetPeriod, setStart, setEnd, } = usePeriod({ onPeriodChange: handlePeriodChange });
+    const handleInputWrapperFocus = (event) => {
+        if (view === 'desktop') {
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
+        }
+    };
+    const handleBlur = (event) => {
+        if (view === 'desktop') {
+            const target = (event.relatedTarget || document.activeElement);
+            if (calendarRef.current && calendarRef.current.contains(target) === false) {
+                setOpen(false);
+            }
+        }
+    };
+    const handleChange = (event) => {
+        const { value: newValue } = event.target;
+        if (newValue.length > DATE_MASK.length)
+            return;
+        // Позволяем вводить только цифры, точки, дефис и пробелы
+        if (/[^\d. \- \d.]/.test(newValue)) {
+            return;
+        }
+        const dots = newValue.match(/\./g);
+        const hyphen = newValue.match(/\-/g);
+        // Не даем вводить больше, чем 4 точки и 1 дефис
+        if ((dots && dots.length > 4) || (hyphen && hyphen.length > 1)) {
+            return;
+        }
+        const formattedValue = format(newValue);
+        const dateArr = formattedValue.split(' - ');
+        const dateFrom = parseDateString(dateArr[0]);
+        const dateTo = parseDateString(dateArr[1]);
+        if (selectedFrom && formattedValue.length < DATE_FORMAT.length) {
+            setStart();
+        }
+        else if (selectedFrom && selectedTo) {
+            setEnd();
+        }
+        else if (dateFnsIsValid(dateFrom) &&
+            dateArr[0]?.length === DATE_FORMAT.length &&
+            dateFrom.getTime() !== selectedFrom) {
+            setStart(dateFrom.getTime());
+        }
+        else if (dateFnsIsValid(dateTo) &&
+            dateArr[1]?.length === DATE_FORMAT.length &&
+            dateTo.getTime() !== selectedTo) {
+            setEnd(dateTo.getTime());
+        }
+        setValue(formattedValue);
+        if (onChange)
+            onChange({ dateFrom, dateTo, value: formattedValue }, event);
+        if (isCompleteDateInput(formattedValue)) {
+            const valid = isValid(formattedValue, dateArr[0], dateArr[1]);
+            if (!valid)
+                return;
+            if (onComplete) {
+                onComplete({ dateFrom, dateTo, value: formattedValue }, event);
+            }
+        }
+    };
+    const handleCalendarClose = () => {
+        setOpen(false);
+    };
+    const handleClear = () => {
+        setValue('');
+        resetPeriod();
+    };
+    const handleCalendarChange = (date) => {
+        if (date) {
+            updatePeriod(date);
+        }
+    };
+    useEffect(() => {
+        if (selectedFrom && selectedTo) {
+            setValue(`${parseTimestampToDate(selectedFrom)} - ${parseTimestampToDate(selectedTo)}`);
+        }
+        else if (selectedFrom && value.length < DATE_FORMAT.length) {
+            setValue(parseTimestampToDate(selectedFrom));
+        }
+    }, [selectedFrom, selectedTo, value]);
+    const handleCalendarWrapperMouseDown = (event) => {
+        // Не дает инпуту терять фокус при выборе даты
+        event.preventDefault();
+    };
+    const handleInputWrapperClick = () => {
+        if (view === 'desktop' && !open) {
+            setOpen(true);
+        }
+    };
+    const handleIconButtonClick = () => {
+        if (!open)
+            setOpen(true);
+    };
+    const renderCalendar = () => (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
+        React.createElement(CalendarComponent, Object.assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events }))));
+    return (React.createElement("div", { className: cn(styles.component, className, {
+            [styles.block]: block,
+        }), onClick: inputDisabled ? undefined : handleInputWrapperClick, onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
+        React.createElement(Input, Object.assign({}, restProps, { block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React.createElement(React.Fragment, null,
+                rightAddons,
+                picker && (React.createElement(IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) })),
+        picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
+                [styles.calendarResponsive]: calendarResponsive,
+            }), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+});
+
+export { DateRangeInput };

package/modern/index.css

@@ -0,0 +1,64 @@
+/* hash: in3xf */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-m: 16px;
+}
+:root {
+    --border-radius-s: 4px;
+}
+:root {
+    --calendar-width: 344px;
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* holidays */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+:root {
+    --calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
+}
+.date-range-input__component_kztbp {
+    display: inline-block;
+    outline: none;
+    position: relative;
+}
+.date-range-input__calendarContainer_kztbp {
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: var(--calendar-popover-border-radius)
+}
+@media (max-width: 374px) {
+.date-range-input__calendarContainer_kztbp {
+        width: 100%;
+        min-width: 288px
+}
+    }
+.date-range-input__calendarResponsive_kztbp {
+    width: var(--calendar-width);
+    padding: 0 var(--gap-m);
+}
+.date-range-input__block_kztbp {
+    width: 100%;
+}

package/modern/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/modern/index.js

@@ -0,0 +1,13 @@
+import 'react';
+import 'classnames';
+import 'react-merge-refs';
+import 'date-fns/isValid';
+import '@alfalab/hooks';
+import '@alfalab/core-components-input/modern';
+import '@alfalab/core-components-calendar/modern';
+import '@alfalab/core-components-popover/modern';
+import '@alfalab/core-components-icon-button/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import 'date-fns/parse';
+import './utils/format.js';
+export { DateRangeInput } from './Component.js';

package/modern/utils/format.d.ts

@@ -0,0 +1,8 @@
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const DATE_MASK: (string | RegExp)[];
+declare const isCompleteDateInput: (input: string) => boolean;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+declare const isValid: (inputValue: string, dateFrom: string, dateTo: string) => boolean;
+declare const format: (value: string) => string;
+declare const parseTimestampToDate: (timestamp: number) => string;
+export { DATE_FORMAT, DATE_MASK, isCompleteDateInput, parseDateString, isValid, format, parseTimestampToDate };

package/modern/utils/format.js

@@ -0,0 +1,76 @@
+import dateFnsIsValid from 'date-fns/isValid';
+import parse from 'date-fns/parse';
+
+/* eslint-disable no-useless-escape */
+const DATE_FORMAT = 'dd.MM.yyyy';
+const DATE_MASK = [
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    ' ',
+    '-',
+    ' ',
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+];
+const isCompleteDateInput = (input) => input.length === DATE_MASK.length;
+const parseDateString = (value, dateFormat = DATE_FORMAT) => parse(value, dateFormat, new Date());
+const isValid = (inputValue, dateFrom, dateTo) => !inputValue ||
+    (isCompleteDateInput(inputValue) &&
+        dateFnsIsValid(parseDateString(dateFrom)) &&
+        dateFnsIsValid(parseDateString(dateTo)));
+const format = (value) => value
+    .replace(/^(\d\d)(\d)$/, '$1.$2') // 121 => 12.1
+    .replace(/^(\d\d)\.(\d\d)(\d)$/, '$1.$2.$3') // 12.122 => 12.12.2
+    .replace(/^(\d\d)\d\.(.*)/, '$1.$2') // 123.12.2005 => 12.12.2005
+    .replace(/^(\d\d\.\d\d)\d\.(.*)/, '$1.$2') // 12.123.2005 => 12.12.2005
+    .replace(/\.$/, '') // 12. => 12
+    .replace(/\ $/, '') // 1 2 => 12
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d)(\d) - (\d.*)/, '$1 - $3') // 12.12.20051 - 12.12.200 => 12.12.2005 - 12.12.200
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) (\d)- (\d.*)/, '$1 - $3') // 12.12.2005 1- 12.12.200 => 12.12.2005 - 12.12.200
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) -(\d) (\d.*)/, '$1 - $3') // 12.12.2005 -1 12.12.200 => 12.12.2005 - 12.12.200
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d)(\d\d.\d\d.\d\d\d)/, '$1 - $3') // 12.12.2005 - 112.12.200 => 12.12.2005 - 12.12.200
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d)(\d\d.\d.\d\d\d\d)/, '$1 - $3') // 12.12.2005 - 112.1.2001 => 12.12.2005 - 12.1.2001
+    .replace(/^(\d\d\.\d\d)(\d\d\d\d)/, '$1.$2') // 12.122005 => 12.12.2005
+    .replace(/^(\d\d)(\d\d\.\d\d\d\d)/, '$1.$2') // 1212.2005 => 12.12.2005
+    .replace(/^(\d\d)(\d.*)/, '$1.$2') // 1212 => 12.12
+    .replace(/^(\d\d.\d\d)(\d.*)/, '$1.$2') // 12.122 => 12.12.2
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d)(\d)/, '$1 - $2') // 12.12.20056 => 12.12.2005 - 6
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d\d)(\d)/, '$1 - $2.$3') // 12.12.2005 - 123 => 12.12.2005 - 12.3
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d\d).(\d\d)(\d)/, '$1 - $2.$3.$4') // 12.12.2005 - 12.123 => 12.12.2005 - 12.12.3
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d)- (\d.*)/, '$1 - $2') // 12.12.2005- 12.12.2005 => 12.12.2005 - 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) -(\d.*)/, '$1 - $2') // 12.12.2005 -12.12.2005 => 12.12.2005 - 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) -/, '$1') // 12.12.2005 - => 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) (\d.*)/, '$1 - $2') // 12.12.2005 12.12.2005 => 12.12.2005 - 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d)  {2}(\d.*)/, '$1 - $2') // 12.12.2005  12.12.2005 => 12.12.2005 - 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d)-/, '$1'); // 12.12.2005- => 12.12.2005
+const parseTimestampToDate = (timestamp) => {
+    const date = new Date(timestamp);
+    const year = date.getFullYear();
+    let month = date.getMonth() + 1;
+    let day = date.getDate();
+    if (month < 10) {
+        month = `0${month}`;
+    }
+    if (day < 10) {
+        day = `0${day}`;
+    }
+    return `${day}.${month}.${year}`;
+};
+
+export { DATE_FORMAT, DATE_MASK, format, isCompleteDateInput, isValid, parseDateString, parseTimestampToDate };

package/modern/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./format";

package/modern/utils/index.js

@@ -0,0 +1,3 @@
+import 'date-fns/isValid';
+import 'date-fns/parse';
+export { DATE_FORMAT, DATE_MASK, format, isCompleteDateInput, isValid, parseDateString, parseTimestampToDate } from './format.js';

package/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "@alfalab/core-components-date-range-input",
+    "version": "1.1.0",
+    "description": "",
+    "keywords": [],
+    "license": "MIT",
+    "main": "index.js",
+    "module": "./esm/index.js",
+    "publishConfig": {
+        "access": "public",
+        "directory": "dist"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1 || ^18.0.0",
+        "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
+    },
+    "dependencies": {
+        "@alfalab/core-components-input": "^10.1.0",
+        "@alfalab/core-components-icon-button": "^5.0.3",
+        "@alfalab/core-components-calendar": "^6.1.4",
+        "@alfalab/core-components-popover": "^6.0.1",
+        "classnames": "^2.3.1"
+    }
+}

package/send-stats.js

@@ -0,0 +1,82 @@
+const http = require('http');
+const fs = require('fs');
+const { promisify } = require('util');
+const path = require('path');
+
+const readFile = promisify(fs.readFile);
+
+async function main() {
+    const remoteHost = process.env.NIS_HOST || 'digital';
+    const remotePort = process.env.NIS_PORT || 80;
+    const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
+
+    try {
+        const [_, node, os, arch] =
+            /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
+        const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+        const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+
+        let ownPackageJson, packageJson;
+
+        try {
+            const result = await Promise.all([
+                readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
+                readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
+            ]);
+
+            ownPackageJson = JSON.parse(result[0]);
+            packageJson = JSON.parse(result[1]);
+        } catch (err) {
+            ownPackageJson = '';
+            packageJson = '';
+        }
+
+        const data = {
+            node,
+            npm,
+            yarn,
+            os,
+            arch,
+            ownPackageJson: JSON.stringify(ownPackageJson),
+            packageJson: JSON.stringify(packageJson),
+        };
+
+        const body = JSON.stringify(data);
+
+        const options = {
+            host: remoteHost,
+            port: remotePort,
+            path: remotePath,
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Content-Length': body.length,
+            },
+        };
+
+        return new Promise((resolve, reject) => {
+            const req = http.request(options, res => {
+                res.on('end', () => {
+                    resolve();
+                });
+            });
+
+            req.on('error', () => {
+                reject();
+            });
+
+            req.write(body);
+            req.end();
+        });
+    } catch (error) {
+        throw error;
+    }
+}
+
+main()
+    .then(() => {
+        process.exit(0);
+    })
+    .catch(() => {
+        process.exit(0);
+    });

package/utils/format.d.ts

@@ -0,0 +1,8 @@
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const DATE_MASK: (string | RegExp)[];
+declare const isCompleteDateInput: (input: string) => boolean;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+declare const isValid: (inputValue: string, dateFrom: string, dateTo: string) => boolean;
+declare const format: (value: string) => string;
+declare const parseTimestampToDate: (timestamp: number) => string;
+export { DATE_FORMAT, DATE_MASK, isCompleteDateInput, parseDateString, isValid, format, parseTimestampToDate };