@alfalab/core-components 19.11.1 → 20.0.0

package/calendar-input/cssm/Component.js

@@ -1,161 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var cn = require('classnames');
-var mergeRefs = require('react-merge-refs');
-var coreComponentsPopover = require('../../popover/cssm');
-var coreComponentsDateInput = require('../../date-input/cssm');
-var coreComponentsCalendar = require('../../calendar/cssm');
-var styles = require('./index.module.css');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-function __rest(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 CalendarInput = React.forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.block, block = _c === void 0 ? false : _c, className = _a.className, inputClassName = _a.inputClassName, _d = _a.defaultOpen, defaultOpen = _d === void 0 ? false : _d, defaultMonth = _a.defaultMonth, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, _f = _a.calendarPosition, calendarPosition = _f === void 0 ? 'popover' : _f, value = _a.value, dataTestId = _a.dataTestId, _g = _a.calendarProps, calendarProps = _g === void 0 ? {} : _g, _h = _a.minDate, minDate = _h === void 0 ? calendarProps.minDate : _h, _j = _a.maxDate, maxDate = _j === void 0 ? calendarProps.maxDate : _j, _k = _a.offDays, offDays = _k === void 0 ? calendarProps.offDays || [] : _k, preventFlip = _a.preventFlip, _l = _a.mobileMode, mobileMode = _l === void 0 ? 'popover' : _l, _m = _a.wrapperRef, wrapperRef = _m === void 0 ? null : _m, disabled = _a.disabled, onChange = _a.onChange, onInputChange = _a.onInputChange, onCalendarChange = _a.onCalendarChange, readOnly = _a.readOnly, _o = _a.Calendar, Calendar = _o === void 0 ? coreComponentsCalendar.Calendar : _o, _p = _a.popoverPosition, popoverPosition = _p === void 0 ? 'bottom-start' : _p, restProps = __rest(_a, ["block", "className", "inputClassName", "defaultOpen", "defaultMonth", "defaultValue", "calendarPosition", "value", "dataTestId", "calendarProps", "minDate", "maxDate", "offDays", "preventFlip", "mobileMode", "wrapperRef", "disabled", "onChange", "onInputChange", "onCalendarChange", "readOnly", "Calendar", "popoverPosition"]);
-    var uncontrolled = value === undefined;
-    var shouldRenderNative = coreComponentsDateInput.SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
-    var shouldRenderOnlyInput = mobileMode === 'input';
-    var shouldRenderStatic = calendarPosition === 'static' && !shouldRenderOnlyInput;
-    var shouldRenderPopover = calendarPosition === 'popover' && !shouldRenderNative && !shouldRenderOnlyInput;
-    var _q = React.useState(false), open = _q[0], setOpen = _q[1];
-    var _r = React.useState(defaultValue), stateValue = _r[0], setStateValue = _r[1];
-    var inputValue = uncontrolled ? stateValue : value;
-    var calendarValue = inputValue ? coreComponentsDateInput.parseDateString(inputValue).getTime() : undefined;
-    var isCalendarValueValid = calendarValue &&
-        coreComponentsCalendar.dateInLimits(calendarValue, minDate, maxDate) &&
-        !offDays.includes(calendarValue);
-    var inputDisabled = disabled || readOnly;
-    var inputWrapperRef = React.useRef(null);
-    var calendarRef = React.useRef(null);
-    var handleKeyDown = React.useCallback(function (event) {
-        if (event.target.tagName === 'INPUT' && event.key === 'Enter') {
-            setOpen(!open);
-        }
-        if (event.key === 'Escape') {
-            setOpen(false);
-        }
-    }, [open]);
-    var handleClick = React.useCallback(function () {
-        if (!open)
-            setOpen(true);
-    }, [open]);
-    var handleFocus = React.useCallback(function (event) {
-        setOpen(true);
-        if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
-            calendarRef.current.focus();
-        }
-    }, [open]);
-    var handleBlur = React.useCallback(function (event) {
-        var target = (event.relatedTarget || document.activeElement);
-        if (calendarRef.current && calendarRef.current.contains(target) === false) {
-            setOpen(false);
-        }
-    }, []);
-    var handleInputKeyDown = React.useCallback(function (event) {
-        if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
-            event.preventDefault();
-            calendarRef.current.focus();
-        }
-    }, []);
-    var changeHandler = React.useCallback(function (event, newValue, newDate, initiator, shouldChange) {
-        if (initiator === void 0) { initiator = 'input'; }
-        if (shouldChange === void 0) { shouldChange = true; }
-        if (initiator === 'input' && event && onInputChange) {
-            onInputChange(event, { value: newValue, date: newDate });
-        }
-        if (initiator === 'calendar' && onCalendarChange) {
-            onCalendarChange(newDate.getTime());
-        }
-        if (shouldChange) {
-            if (uncontrolled) {
-                setStateValue(newValue);
-            }
-            if (onChange) {
-                onChange(event, { date: newDate, value: newValue });
-            }
-        }
-    }, [onCalendarChange, onChange, onInputChange, uncontrolled]);
-    var handleInputChange = React.useCallback(function (event, payload) {
-        changeHandler(event, payload.value, payload.date, 'input', !payload.value || coreComponentsDateInput.isCompleteDateInput(payload.value));
-    }, [changeHandler]);
-    var handleCalendarChange = React.useCallback(function (date) {
-        changeHandler(null, coreComponentsDateInput.formatDate(date), new Date(date), 'calendar');
-        setOpen(false);
-    }, [changeHandler]);
-    var handleCalendarWrapperMouseDown = React.useCallback(function (event) {
-        // Не дает инпуту терять фокус при выборе даты
-        event.preventDefault();
-    }, []);
-    React.useEffect(function () {
-        setOpen(defaultOpen);
-    }, [defaultOpen]);
-    var renderCalendar = React.useCallback(function () { return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React__default['default'].createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
-        React__default['default'].createElement(Calendar, __assign({}, calendarProps, { ref: calendarRef, defaultMonth: defaultMonth, value: isCalendarValueValid ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays })))); }, [
-        calendarProps,
-        calendarValue,
-        defaultMonth,
-        handleCalendarChange,
-        handleCalendarWrapperMouseDown,
-        isCalendarValueValid,
-        maxDate,
-        minDate,
-        offDays,
-    ]);
-    return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, className, (_b = {},
-            _b[styles__default['default'].block] = block,
-            _b)), tabIndex: -1, onKeyDown: inputDisabled ? undefined : handleKeyDown, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : handleFocus, onBlur: handleBlur, "data-test-id": dataTestId },
-        React__default['default'].createElement(coreComponentsDateInput.DateInput, __assign({}, restProps, { ref: ref, wrapperRef: mergeRefs__default['default']([wrapperRef, inputWrapperRef]), className: inputClassName, value: inputValue, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', rightAddons: React__default['default'].createElement("span", { className: styles__default['default'].calendarIcon }), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true })),
-        shouldRenderStatic && renderCalendar(),
-        shouldRenderPopover && (React__default['default'].createElement(coreComponentsPopover.Popover, { open: open, anchorElement: inputWrapperRef.current, popperClassName: styles__default['default'].calendarContainer, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip }, renderCalendar()))));
-});
-
-exports.CalendarInput = CalendarInput;

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

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

package/calendar-input/cssm/index.js

@@ -1,25 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component = require('./Component.js');
-require('react');
-require('classnames');
-require('react-merge-refs');
-require('../../popover/cssm');
-require('../../date-input/cssm');
-require('../../calendar/cssm');
-require('./index.module.css');
-require('date-fns');
-var utils = require('./utils.js');
-
-
-
-exports.CalendarInput = Component.CalendarInput;
-exports.DATE_FORMAT = utils.DATE_FORMAT;
-exports.DATE_MASK = utils.DATE_MASK;
-exports.IS_BROWSER = utils.IS_BROWSER;
-exports.NATIVE_DATE_FORMAT = utils.NATIVE_DATE_FORMAT;
-exports.SUPPORTS_INPUT_TYPE_DATE = utils.SUPPORTS_INPUT_TYPE_DATE;
-exports.formatDate = utils.formatDate;
-exports.isCompleteDateInput = utils.isCompleteDateInput;
-exports.isInputDateSupported = utils.isInputDateSupported;
-exports.parseDateString = utils.parseDateString;

package/calendar-input/cssm/index.module.css

@@ -1,87 +0,0 @@
-:root {
-    --color-light-border-primary: #dbdee1;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
-:root {
-    --shadow-s: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    --gap-2xs: 4px;
-}
-:root {
-    --border-radius-m: 8px;
-}
-:root {
-
-    /* Кнопки выбора месяцев и годов */
-
-    /* Шапка */
-
-    /* День */
-
-    /* today */
-
-    /* highlighted */
-
-    /* range */
-
-    /* selected */
-
-    /* disabled */
-
-    /* marker */
-}
-:root {
-    --calendar-input-calendar-icon: url('https://alfabank.st/icons/glyph_calendar_m_primary.svg');
-}
-.component {
-    display: inline-block;
-    outline: none;
-    position: relative;
-}
-.block {
-    width: 100%;
-}
-.calendarContainer {
-    display: inline-block;
-    box-sizing: border-box;
-    box-shadow: var(--shadow-s);
-    border: 1px solid var(--color-light-border-primary);
-    border-radius: var(--border-radius-m);
-}
-.calendarIcon {
-    width: 24px;
-    height: 24px;
-    display: block;
-    background: var(--calendar-input-calendar-icon);
-    background-size: cover;
-    background-position: center
-}
-.calendarIcon:not(:only-child) {
-        margin-right: var(--gap-2xs);
-    }
-.nativeInput {
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    -webkit-appearance: none;
-            appearance: none;
-    z-index: 1
-}
-.nativeInput::-webkit-calendar-picker-indicator {
-        display: none;
-    }
-.nativeInput::-webkit-inner-spin-button {
-        display: none;
-    }

package/calendar-input/cssm/stories.module.css

@@ -1,33 +0,0 @@
-:root {
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-
-    /* Кнопки выбора месяцев и годов */
-
-    /* Шапка */
-
-    /* День */
-
-    /* today */
-
-    /* highlighted */
-
-    /* range */
-
-    /* selected */
-
-    /* disabled */
-
-    /* marker */
-}

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

@@ -1,13 +0,0 @@
-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 isCompleteDateInput: (input: string) => 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;
-export { DATE_FORMAT, NATIVE_DATE_FORMAT, DATE_MASK, IS_BROWSER, SUPPORTS_INPUT_TYPE_DATE, isCompleteDateInput, formatDate, parseDateString, isInputDateSupported };

package/calendar-input/cssm/utils.js

@@ -1,38 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var dateFns = require('date-fns');
-
-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 isCompleteDateInput = function (input) { return input.length === DATE_MASK.length; };
-var formatDate = function (date, dateFormat) {
-    if (dateFormat === void 0) { dateFormat = DATE_FORMAT; }
-    return dateFns.format(date, dateFormat);
-};
-var parseDateString = function (value, dateFormat) {
-    if (dateFormat === void 0) { dateFormat = DATE_FORMAT; }
-    return dateFns.parse(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;
-}
-
-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.isCompleteDateInput = isCompleteDateInput;
-exports.isInputDateSupported = isInputDateSupported;
-exports.parseDateString = parseDateString;

package/calendar-range/cssm/Component.d.ts

@@ -1,55 +0,0 @@
-import { FC } from 'react';
-import { CalendarInputProps } from "../../calendar-input";
-import { ValueState } from "./utils";
-type CalendarRangeProps = {
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Значение инпута (используется и для календаря)
-     */
-    valueFrom?: string;
-    /**
-     * Значение инпута (используется и для календаря)
-     */
-    valueTo?: string;
-    /**
-     * Месяц в календаре по умолчанию
-     */
-    defaultMonth?: number;
-    /**
-     * Минимальная дата, доступная для выбора (timestamp)
-     */
-    minDate?: number;
-    /**
-     * Максимальная дата, доступная для выбора (timestamp)
-     */
-    maxDate?: number;
-    /**
-     * Обработчик изменения даты от
-     */
-    onDateFromChange?: (payload: ValueState) => void;
-    /**
-     * Обработчик изменения даты до
-     */
-    onDateToChange?: (payload: ValueState) => void;
-    /**
-     * Пропсы для инпута даты от
-     */
-    inputFromProps?: CalendarInputProps;
-    /**
-     * Пропсы для инпута даты до
-     */
-    inputToProps?: CalendarInputProps;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Определяет, как рендерить календарь — в поповере или снизу инпута
-     */
-    calendarPosition?: 'static' | 'popover';
-};
-declare const CalendarRange: FC<CalendarRangeProps>;
-export { CalendarRangeProps, CalendarRange };

package/calendar-range/cssm/Component.js

@@ -1,196 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var cn = require('classnames');
-var dateFns = require('date-fns');
-var coreComponentsCalendar = require('../../calendar/cssm');
-var coreComponentsCalendarInput = require('../../calendar-input/cssm');
-var utils = require('./utils.js');
-var useCalendarMonthes = require('./useCalendarMonthes.js');
-var useCalendarMaxMinDates = require('./useCalendarMaxMinDates.js');
-var styles = require('./index.module.css');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-var CalendarRange = function (_a) {
-    var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? dateFns.startOfMonth(new Date()).getTime() : _b, minDate = _a.minDate, maxDate = _a.maxDate, valueFrom = _a.valueFrom, valueTo = _a.valueTo, onDateFromChange = _a.onDateFromChange, onDateToChange = _a.onDateToChange, _c = _a.inputFromProps, inputFromProps = _c === void 0 ? {} : _c, _d = _a.inputToProps, inputToProps = _d === void 0 ? {} : _d, _e = _a.calendarPosition, calendarPosition = _e === void 0 ? 'static' : _e, dataTestId = _a.dataTestId;
-    var uncontrolled = valueFrom === undefined && valueTo === undefined;
-    var isPopover = calendarPosition === 'popover';
-    var period = coreComponentsCalendar.usePeriod({
-        initialSelectedFrom: valueFrom ? coreComponentsCalendarInput.parseDateString(valueFrom).getTime() : undefined,
-        initialSelectedTo: valueTo ? coreComponentsCalendarInput.parseDateString(valueTo).getTime() : undefined,
-    });
-    var setStart = period.setStart, setEnd = period.setEnd, resetPeriod = period.resetPeriod;
-    var selectedFrom = period.selectedFrom, selectedTo = period.selectedTo;
-    if (!coreComponentsCalendar.dateInLimits(selectedFrom, minDate, maxDate))
-        selectedFrom = undefined;
-    if (!coreComponentsCalendar.dateInLimits(selectedTo, minDate, maxDate))
-        selectedTo = undefined;
-    var _f = React.useState(utils.initialValueState), stateFrom = _f[0], setStateFrom = _f[1];
-    var _g = React.useState(utils.initialValueState), stateTo = _g[0], setStateTo = _g[1];
-    var inputValueFrom = utils.getCorrectValueState(stateFrom, valueFrom, minDate, maxDate);
-    var inputValueTo = utils.getCorrectValueState(stateTo, valueTo, minDate, maxDate);
-    var handleStateFromChange = React.useCallback(function (newFromState) {
-        if (uncontrolled)
-            setStateFrom(newFromState);
-        if (onDateFromChange)
-            onDateFromChange(newFromState);
-    }, [onDateFromChange, uncontrolled]);
-    var handleStateToChange = React.useCallback(function (newToState) {
-        if (uncontrolled)
-            setStateTo(newToState);
-        if (onDateToChange)
-            onDateToChange(newToState);
-    }, [onDateToChange, uncontrolled]);
-    var _h = useCalendarMonthes.useCalendarMonthes({
-        inputValueFrom: inputValueFrom,
-        inputValueTo: inputValueTo,
-        defaultMonth: defaultMonth,
-        isPopover: isPopover,
-    }), monthFrom = _h.monthFrom, monthTo = _h.monthTo, handleMonthFromChange = _h.handleMonthFromChange, handleMonthToChange = _h.handleMonthToChange;
-    var handleInputFromChange = React.useCallback(function (_, _a) {
-        var value = _a.value, date = _a.date;
-        if (value === '') {
-            setStart(undefined);
-            handleStateFromChange(utils.initialValueState);
-        }
-        if (!coreComponentsCalendarInput.isCompleteDateInput(value)) {
-            return;
-        }
-        if (coreComponentsCalendar.dateInLimits(date, minDate, maxDate)) {
-            setStart(date.getTime());
-            handleMonthFromChange(dateFns.startOfMonth(date).getTime());
-            handleStateFromChange({ date: date.getTime(), value: value });
-        }
-        else {
-            setStart(undefined);
-            handleStateFromChange({ date: null, value: value });
-        }
-    }, [handleMonthFromChange, handleStateFromChange, maxDate, minDate, setStart]);
-    var handleInputToChange = React.useCallback(function (_, _a) {
-        var value = _a.value, date = _a.date;
-        if (value === '') {
-            setEnd(undefined);
-            handleStateToChange(utils.initialValueState);
-        }
-        if (!coreComponentsCalendarInput.isCompleteDateInput(value)) {
-            return;
-        }
-        if (coreComponentsCalendar.dateInLimits(date, minDate, maxDate)) {
-            setEnd(date.getTime());
-            handleMonthToChange(dateFns.subMonths(dateFns.startOfMonth(date), 1).getTime());
-            handleStateToChange({ date: date.getTime(), value: value });
-        }
-        else {
-            setEnd(undefined);
-            handleStateToChange({ date: null, value: value });
-        }
-    }, [handleMonthToChange, handleStateToChange, maxDate, minDate, setEnd]);
-    var handleCalendarChange = React.useCallback(function (date) {
-        if (!inputValueFrom.date) {
-            setStart(date);
-            handleStateFromChange({ date: date, value: coreComponentsCalendarInput.formatDate(date) });
-            return;
-        }
-        if (date < inputValueFrom.date) {
-            resetPeriod();
-            setStart(date);
-            handleStateToChange(utils.initialValueState);
-            handleStateFromChange({ date: date, value: coreComponentsCalendarInput.formatDate(date) });
-            return;
-        }
-        if (date === inputValueFrom.date && date === inputValueTo.date) {
-            resetPeriod();
-            handleStateFromChange(utils.initialValueState);
-            handleStateToChange(utils.initialValueState);
-            return;
-        }
-        handleStateToChange({ date: date, value: coreComponentsCalendarInput.formatDate(date) });
-        setEnd(date);
-    }, [
-        inputValueFrom.date,
-        inputValueTo.date,
-        handleStateToChange,
-        setEnd,
-        setStart,
-        handleStateFromChange,
-        resetPeriod,
-    ]);
-    var handleFromCalendarChange = React.useCallback(function (date) {
-        if (!isPopover) {
-            handleCalendarChange(date);
-            return;
-        }
-        setStart(date);
-        handleStateFromChange({ date: date, value: coreComponentsCalendarInput.formatDate(date) });
-    }, [handleCalendarChange, handleStateFromChange, isPopover, setStart]);
-    var handleToCalendarChange = React.useCallback(function (date) {
-        if (!isPopover) {
-            handleCalendarChange(date);
-            return;
-        }
-        handleStateToChange({ date: date, value: coreComponentsCalendarInput.formatDate(date) });
-        setEnd(date);
-    }, [handleCalendarChange, handleStateToChange, isPopover, setEnd]);
-    var _j = React.useState(false), nextMonthHighlighted = _j[0], setNextMonthHighlighted = _j[1];
-    var handleCalendarToMouseOver = React.useCallback(function (event) {
-        var target = event.target;
-        var dayHighlighted = utils.isDayButton(target) || utils.isDayButton(target.parentElement);
-        if (nextMonthHighlighted && !dayHighlighted)
-            setNextMonthHighlighted(false);
-        if (!nextMonthHighlighted && dayHighlighted)
-            setNextMonthHighlighted(true);
-    }, [nextMonthHighlighted]);
-    var selectorView = isPopover ? 'full' : 'month-only';
-    var calendarSelectedTo = selectedTo || (nextMonthHighlighted ? monthTo : undefined);
-    var maxMinDates = useCalendarMaxMinDates.useCalendarMaxMinDates({
-        isPopover: isPopover,
-        monthTo: monthTo,
-        monthFrom: monthFrom,
-        selectedFrom: selectedFrom,
-        selectedTo: calendarSelectedTo,
-        maxDate: maxDate,
-        minDate: minDate,
-    });
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, className), "data-test-id": dataTestId },
-        React__default['default'].createElement(coreComponentsCalendarInput.CalendarInput, __assign({}, inputFromProps, { calendarPosition: calendarPosition, onInputChange: handleInputFromChange, onCalendarChange: handleFromCalendarChange, value: inputValueFrom.value, minDate: maxMinDates.fromMinDate, maxDate: maxMinDates.fromMaxDate, calendarProps: __assign(__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: selectorView,
-                selectedFrom: selectedFrom, selectedTo: calendarSelectedTo }) })),
-        React__default['default'].createElement("span", { className: styles__default['default'].divider }),
-        React__default['default'].createElement("div", { onMouseOver: handleCalendarToMouseOver },
-            React__default['default'].createElement(coreComponentsCalendarInput.CalendarInput, __assign({}, inputToProps, { calendarPosition: calendarPosition, popoverPosition: 'bottom-end', onInputChange: handleInputToChange, onCalendarChange: handleToCalendarChange, value: inputValueTo.value, minDate: maxMinDates.toMinDate, maxDate: maxMinDates.toMaxDate, calendarProps: __assign(__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: selectorView,
-                    selectedFrom: selectedFrom,
-                    selectedTo: selectedTo }) })))));
-};
-
-exports.CalendarRange = CalendarRange;