@alfalab/core-components 1.18.0 → 2.0.0-beta.3

package/calendar-input/modern/Component.d.ts

@@ -0,0 +1,201 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, MouseEvent, ElementType } from "react";
+import { PopoverProps } from "../../popover";
+import { DateInputProps } from "../../date-input";
+import { CalendarProps } from "../../calendar";
+type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: CalendarProps & Record<string, unknown>;
+    /**
+     * Значение инпута (используется и для календаря)
+     */
+    value?: string;
+    /**
+     * Начальное значение инпута
+     */
+    defaultValue?: string;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean;
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Определяет, как рендерить календарь — в поповере или снизу инпута
+     */
+    calendarPosition?: 'static' | 'popover';
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean;
+    /**
+     * Управление нативным режимом на мобильных устройствах
+     */
+    mobileMode?: 'native' | 'popover' | 'input';
+    /**
+     * Компонент календаря
+     */
+    Calendar?: ElementType<CalendarProps>;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement> | null, payload: {
+        date: Date;
+        value: string;
+    }) => void;
+    /**
+     * Обработчик ввода в инпут
+     */
+    onInputChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        value: string;
+        date: Date;
+    }) => void;
+    /**
+     * Обработчик изменения календаря
+     */
+    onCalendarChange?: CalendarProps['onChange'];
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: PopoverProps['position'];
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: PopoverProps['zIndex'];
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean;
+};
+declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps, "children" | "value" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "dir" | "className" | "dataTestId" | "height" | "name" | "width" | "hidden" | "color" | "size" | "block" | "clear" | "multiple" | "disabled" | "leftAddons" | "rightAddons" | "colors" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "fieldClassName" | "labelClassName" | "addonsClassName" | "error" | "hint" | "bottomAddons" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "max" | "maxLength" | "min" | "minLength" | "readOnly" | "required" | "src" | "success" | "inputClassName" | "focusedClassName" | "filledClassName" | "onClear" | "wrapperRef" | "onComplete"> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string | undefined;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string | undefined;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: (CalendarProps & Record<string, unknown>) | undefined;
+    /**
+     * Значение инпута (используется и для календаря)
+     */
+    value?: string | undefined;
+    /**
+     * Начальное значение инпута
+     */
+    defaultValue?: string | undefined;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number | undefined;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number | undefined;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number | undefined;
+    /**
+     * Список событий
+     */
+    events?: (number | Date)[] | undefined;
+    /**
+     * Список выходных
+     */
+    offDays?: (number | Date)[] | undefined;
+    /**
+     * Определяет, как рендерить календарь — в поповере или снизу инпута
+     */
+    calendarPosition?: "static" | "popover" | undefined;
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean | undefined;
+    /**
+     * Управление нативным режимом на мобильных устройствах
+     */
+    mobileMode?: "input" | "native" | "popover" | undefined;
+    /**
+     * Компонент календаря
+     */
+    Calendar?: React.ComponentClass<CalendarProps, any> | React.FunctionComponent<CalendarProps> | undefined;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | null, payload: {
+        date: Date;
+        value: string;
+    }) => void) | undefined;
+    /**
+     * Обработчик ввода в инпут
+     */
+    onInputChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
+        value: string;
+        date: Date;
+    }) => void) | undefined;
+    /**
+     * Обработчик изменения календаря
+     */
+    onCalendarChange?: ((date: number) => void) | undefined;
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: number | undefined;
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { CalendarInputProps, CalendarInput };

package/calendar-input/modern/Component.js

@@ -0,0 +1,127 @@
+import React, { forwardRef, useState, useCallback, useRef, useEffect } from 'react';
+import cn from 'classnames';
+import mergeRefs from 'react-merge-refs';
+import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import 'date-fns/parse';
+import 'date-fns/format';
+import 'date-fns/isSameDay';
+import { Popover } from '../../popover/modern';
+import { parseDateString, isCompleteDateInput, formatDate, DateInput } from '../../date-input/modern';
+import { Calendar, dateInLimits } from '../../calendar/modern';
+import { SUPPORTS_INPUT_TYPE_DATE } from './utils.js';
+
+var styles = {"component":"calendar-input__component_1ygrj","block":"calendar-input__block_1ygrj","calendarContainer":"calendar-input__calendarContainer_1ygrj","calendarIcon":"calendar-input__calendarIcon_1ygrj","nativeInput":"calendar-input__nativeInput_1ygrj"};
+require('./index.css');
+
+const CalendarInput = forwardRef(({ block = false, className, inputClassName, popoverClassName, defaultOpen = false, defaultMonth, defaultValue = '', calendarPosition = 'popover', value, dataTestId, calendarProps = {}, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], preventFlip, mobileMode = 'popover', wrapperRef = null, disabled, onChange = () => null, onInputChange, onCalendarChange, onKeyDown, readOnly, Calendar: Calendar$1 = Calendar, popoverPosition = 'bottom-start', zIndexPopover, useAnchorWidth, rightAddons, error, ...restProps }, ref) => {
+    const shouldRenderNative = SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
+    const shouldRenderOnlyInput = mobileMode === 'input';
+    const shouldRenderStatic = calendarPosition === 'static' && !shouldRenderOnlyInput;
+    const shouldRenderPopover = calendarPosition === 'popover' && !shouldRenderNative && !shouldRenderOnlyInput;
+    const [open, setOpen] = useState(false);
+    const [inputValue, setInputValue] = useState(value || defaultValue);
+    const calendarValue = inputValue ? parseDateString(inputValue).getTime() : undefined;
+    const checkInputValueIsValid = useCallback((newInputValue) => {
+        if (!newInputValue || error)
+            return false;
+        const dateValue = parseDateString(newInputValue).getTime();
+        return (dateValue &&
+            isCompleteDateInput(newInputValue) &&
+            dateInLimits(dateValue, minDate, maxDate) &&
+            !offDays.includes(dateValue));
+    }, [error, maxDate, minDate, offDays]);
+    const inputDisabled = disabled || readOnly;
+    const inputWrapperRef = useRef(null);
+    const calendarRef = useRef(null);
+    const handleKeyDown = useCallback((event) => {
+        if (event.target.tagName === 'INPUT' && event.key === 'Enter') {
+            setOpen(!open);
+        }
+        if (event.key === 'Escape') {
+            setOpen(false);
+        }
+    }, [open]);
+    const handleClick = useCallback(() => {
+        if (!open)
+            setOpen(true);
+    }, [open]);
+    const handleFocus = useCallback((event) => {
+        setOpen(true);
+        if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+            calendarRef.current.focus();
+        }
+    }, [open]);
+    const handleBlur = useCallback((event) => {
+        const target = (event.relatedTarget || document.activeElement);
+        if (calendarRef.current && calendarRef.current.contains(target) === false) {
+            setOpen(false);
+        }
+    }, []);
+    const handleInputKeyDown = useCallback((event) => {
+        if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
+            event.preventDefault();
+            calendarRef.current.focus();
+        }
+        if (onKeyDown)
+            onKeyDown(event);
+    }, [onKeyDown]);
+    const changeHandler = useCallback((event, newValue, newDate, initiator = 'input', shouldChange = true) => {
+        if (initiator === 'input' && event && onInputChange) {
+            onInputChange(event, { value: newValue, date: newDate });
+        }
+        if (initiator === 'calendar' && onCalendarChange) {
+            onCalendarChange(newDate.getTime());
+        }
+        setInputValue(newValue);
+        if (shouldChange) {
+            onChange(event, { date: newDate, value: newValue });
+        }
+    }, [onCalendarChange, onChange, onInputChange]);
+    const handleInputChange = useCallback((event, payload) => {
+        changeHandler(event, payload.value, payload.date, 'input', !payload.value || checkInputValueIsValid(payload.value));
+    }, [changeHandler, checkInputValueIsValid]);
+    const handleCalendarChange = useCallback(date => {
+        changeHandler(null, formatDate(date), new Date(date), 'calendar');
+        setOpen(false);
+    }, [changeHandler]);
+    const handleCalendarWrapperMouseDown = useCallback((event) => {
+        // Не дает инпуту терять фокус при выборе даты
+        event.preventDefault();
+    }, []);
+    useEffect(() => {
+        setOpen(defaultOpen);
+    }, [defaultOpen]);
+    useEffect(() => {
+        if (typeof value !== 'undefined') {
+            setInputValue(value);
+        }
+    }, [value]);
+    const renderCalendar = useCallback(() => (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
+        React.createElement(Calendar$1, Object.assign({}, calendarProps, { ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))), [
+        calendarProps,
+        calendarValue,
+        checkInputValueIsValid,
+        defaultMonth,
+        events,
+        handleCalendarChange,
+        handleCalendarWrapperMouseDown,
+        inputValue,
+        maxDate,
+        minDate,
+        offDays,
+    ]);
+    return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("div", { className: cn(styles.component, className, {
+            [styles.block]: block,
+        }), tabIndex: -1, onKeyDown: inputDisabled ? undefined : handleKeyDown, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : handleFocus, onBlur: handleBlur, "data-test-id": dataTestId },
+        React.createElement(DateInput, Object.assign({}, restProps, { ref: ref, wrapperRef: mergeRefs([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React.createElement(React.Fragment, null,
+                rightAddons,
+                shouldRenderPopover && (React.createElement(CalendarMIcon, { className: styles.calendarIcon }))), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true })),
+        shouldRenderStatic && renderCalendar(),
+        shouldRenderPopover && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputWrapperRef.current, popperClassName: styles.calendarContainer, className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+});
+
+export { CalendarInput };

package/calendar-input/modern/index.css

@@ -0,0 +1,86 @@
+/* hash: 19eoq */
+:root {
+    --color-light-graphic-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-2xs: 4px;
+}
+:root {
+    --border-radius-s: 4px;
+}
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+:root {
+    --calendar-input-icon-color: var(--color-light-graphic-primary);
+    --calendar-input-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
+}
+.calendar-input__component_1ygrj {
+    display: inline-block;
+    outline: none;
+    position: relative;
+}
+.calendar-input__block_1ygrj {
+    width: 100%;
+}
+.calendar-input__calendarContainer_1ygrj {
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: var(--calendar-input-popover-border-radius)
+}
+@media (max-width: 374px) {
+.calendar-input__calendarContainer_1ygrj {
+        width: 100%;
+        min-width: 288px
+}
+    }
+.calendar-input__calendarIcon_1ygrj {
+    width: 24px;
+    height: 24px;
+    display: block;
+    color: var(--calendar-input-icon-color)
+}
+.calendar-input__calendarIcon_1ygrj:not(:only-child) {
+        margin-right: var(--gap-2xs);
+    }
+.calendar-input__nativeInput_1ygrj {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    appearance: none;
+    z-index: 1
+}
+.calendar-input__nativeInput_1ygrj::-webkit-calendar-picker-indicator {
+        display: none;
+    }
+.calendar-input__nativeInput_1ygrj::-webkit-inner-spin-button {
+        display: none;
+    }

package/calendar-input/modern/index.d.ts

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

package/calendar-input/modern/index.js

@@ -0,0 +1,12 @@
+import 'react';
+import 'classnames';
+import 'react-merge-refs';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import 'date-fns/parse';
+import 'date-fns/format';
+import 'date-fns/isSameDay';
+import '../../popover/modern';
+import '../../date-input/modern';
+import '../../calendar/modern';
+export { DATE_FORMAT, DATE_MASK, IS_BROWSER, NATIVE_DATE_FORMAT, SUPPORTS_INPUT_TYPE_DATE, formatDate, isInputDateSupported, isValidInputValue, parseDateString } from './utils.js';
+export { CalendarInput } from './Component.js';

package/calendar-input/modern/utils.d.ts

@@ -0,0 +1,13 @@
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const NATIVE_DATE_FORMAT = "yyyy-MM-dd";
+declare const DATE_MASK: (string | RegExp)[];
+declare const IS_BROWSER: boolean;
+declare const SUPPORTS_INPUT_TYPE_DATE: boolean;
+declare const formatDate: (date: number | Date, dateFormat?: string) => string;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+/**
+ * Возвращает `true`, если поддерживается `input[type="date"]`
+ */
+declare function isInputDateSupported(): boolean;
+declare const isValidInputValue: (newInputValue: string | undefined, minDate: number | undefined, maxDate: number | undefined, offDays?: (number | Date)[]) => boolean;
+export { DATE_FORMAT, NATIVE_DATE_FORMAT, DATE_MASK, IS_BROWSER, SUPPORTS_INPUT_TYPE_DATE, formatDate, parseDateString, isInputDateSupported, isValidInputValue };

package/calendar-input/modern/utils.js

@@ -0,0 +1,34 @@
+import parse from 'date-fns/parse';
+import format from 'date-fns/format';
+import isSameDay from 'date-fns/isSameDay';
+import { isCompleteDateInput } from '../../date-input/modern';
+import { dateInLimits } from '../../calendar/modern';
+
+const DATE_FORMAT = 'dd.MM.yyyy';
+const NATIVE_DATE_FORMAT = 'yyyy-MM-dd';
+const DATE_MASK = [/\d/, /\d/, '.', /\d/, /\d/, '.', /\d/, /\d/, /\d/, /\d/];
+const IS_BROWSER = typeof window !== 'undefined';
+const SUPPORTS_INPUT_TYPE_DATE = IS_BROWSER && isInputDateSupported();
+const formatDate = (date, dateFormat = DATE_FORMAT) => format(date, dateFormat);
+const parseDateString = (value, dateFormat = DATE_FORMAT) => parse(value, dateFormat, new Date());
+/**
+ * Возвращает `true`, если поддерживается `input[type="date"]`
+ */
+function isInputDateSupported() {
+    const input = document.createElement('input');
+    const value = 'a';
+    input.setAttribute('type', 'date');
+    input.setAttribute('value', value);
+    return input.value !== value;
+}
+const isValidInputValue = (newInputValue, minDate, maxDate, offDays = []) => {
+    if (!newInputValue)
+        return false;
+    const dateValue = parseDateString(newInputValue).getTime();
+    return Boolean(dateValue &&
+        isCompleteDateInput(newInputValue) &&
+        dateInLimits(dateValue, minDate, maxDate) &&
+        !offDays.some(offDay => isSameDay(offDay, dateValue)));
+};
+
+export { DATE_FORMAT, DATE_MASK, IS_BROWSER, NATIVE_DATE_FORMAT, SUPPORTS_INPUT_TYPE_DATE, formatDate, isInputDateSupported, isValidInputValue, parseDateString };

package/calendar-input/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "./esm/index.js"
+}

package/calendar-input/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/calendar-input/utils.d.ts

@@ -0,0 +1,13 @@
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const NATIVE_DATE_FORMAT = "yyyy-MM-dd";
+declare const DATE_MASK: (string | RegExp)[];
+declare const IS_BROWSER: boolean;
+declare const SUPPORTS_INPUT_TYPE_DATE: boolean;
+declare const formatDate: (date: number | Date, dateFormat?: string) => string;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+/**
+ * Возвращает `true`, если поддерживается `input[type="date"]`
+ */
+declare function isInputDateSupported(): boolean;
+declare const isValidInputValue: (newInputValue: string | undefined, minDate: number | undefined, maxDate: number | undefined, offDays?: (number | Date)[]) => boolean;
+export { DATE_FORMAT, NATIVE_DATE_FORMAT, DATE_MASK, IS_BROWSER, SUPPORTS_INPUT_TYPE_DATE, formatDate, parseDateString, isInputDateSupported, isValidInputValue };

package/calendar-input/utils.js

@@ -0,0 +1,57 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsDateInput = require('../date-input');
+var coreComponentsCalendar = require('../calendar');
+var parse = require('date-fns/parse');
+var format = require('date-fns/format');
+var isSameDay = require('date-fns/isSameDay');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var parse__default = /*#__PURE__*/_interopDefaultLegacy(parse);
+var format__default = /*#__PURE__*/_interopDefaultLegacy(format);
+var isSameDay__default = /*#__PURE__*/_interopDefaultLegacy(isSameDay);
+
+var DATE_FORMAT = 'dd.MM.yyyy';
+var NATIVE_DATE_FORMAT = 'yyyy-MM-dd';
+var DATE_MASK = [/\d/, /\d/, '.', /\d/, /\d/, '.', /\d/, /\d/, /\d/, /\d/];
+var IS_BROWSER = typeof window !== 'undefined';
+var SUPPORTS_INPUT_TYPE_DATE = IS_BROWSER && isInputDateSupported();
+var formatDate = function (date, dateFormat) {
+    if (dateFormat === void 0) { dateFormat = DATE_FORMAT; }
+    return format__default['default'](date, dateFormat);
+};
+var parseDateString = function (value, dateFormat) {
+    if (dateFormat === void 0) { dateFormat = DATE_FORMAT; }
+    return parse__default['default'](value, dateFormat, new Date());
+};
+/**
+ * Возвращает `true`, если поддерживается `input[type="date"]`
+ */
+function isInputDateSupported() {
+    var input = document.createElement('input');
+    var value = 'a';
+    input.setAttribute('type', 'date');
+    input.setAttribute('value', value);
+    return input.value !== value;
+}
+var isValidInputValue = function (newInputValue, minDate, maxDate, offDays) {
+    if (offDays === void 0) { offDays = []; }
+    if (!newInputValue)
+        return false;
+    var dateValue = parseDateString(newInputValue).getTime();
+    return Boolean(dateValue &&
+        coreComponentsDateInput.isCompleteDateInput(newInputValue) &&
+        coreComponentsCalendar.dateInLimits(dateValue, minDate, maxDate) &&
+        !offDays.some(function (offDay) { return isSameDay__default['default'](offDay, dateValue); }));
+};
+
+exports.DATE_FORMAT = DATE_FORMAT;
+exports.DATE_MASK = DATE_MASK;
+exports.IS_BROWSER = IS_BROWSER;
+exports.NATIVE_DATE_FORMAT = NATIVE_DATE_FORMAT;
+exports.SUPPORTS_INPUT_TYPE_DATE = SUPPORTS_INPUT_TYPE_DATE;
+exports.formatDate = formatDate;
+exports.isInputDateSupported = isInputDateSupported;
+exports.isValidInputValue = isValidInputValue;
+exports.parseDateString = parseDateString;