@epam/uui 5.3.0 → 5.4.1

package/components/datePickers/RangeDatePickerBody.tsx

@@ -1,252 +0,0 @@
-import * as React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
-import isoWeek from 'dayjs/plugin/isoWeek.js';
-import { arrayToMatrix, cx, IEditable, RangeDatePickerPresets } from '@epam/uui-core';
-import {
-    DatePickerBodyBaseOptions, uuiDatePickerBodyBase, PickerBodyValue, valueFormat, ViewType, uuiDaySelection,
-} from '@epam/uui-components';
-import { FlexCell, FlexRow } from '../layout';
-import { DatePickerBody } from './DatePickerBody';
-import { CalendarPresets } from './CalendarPresets';
-import css from './RangeDatePickerBody.module.scss';
-
-dayjs.extend(isoWeek);
-
-export function weekCount(displayedDate: Dayjs) {
-    let days: Dayjs[] = [];
-    const dayOfLastWeekInPrevMonth = displayedDate.subtract(1, 'month').endOf('month').day();
-    days = days.concat(new Array(dayOfLastWeekInPrevMonth).fill(undefined));
-    // get days of current month
-    days = days.concat(new Array(displayedDate.endOf('month').date()).fill(undefined));
-    return arrayToMatrix(days, 7).length;
-}
-
-const uuiRangeDatePickerBody = {
-    inRange: 'uui-range-datepicker-in-range',
-    firstDayInRangeWrapper: 'uui-range-datepicker-first-day-in-range-wrapper',
-    lastDayInRangeWrapper: 'uui-range-datepicker-last-day-in-range-wrapper',
-    separator: 'uui-range-datepicker-separator',
-};
-
-export type pickerPart = 'from' | 'to';
-
-export const rangeDatePickerPresets: RangeDatePickerPresets = {
-    today: {
-        name: 'Today',
-        getRange: () => ({ from: dayjs().toString(), to: undefined, order: 1 }),
-    },
-    thisWeek: {
-        name: 'This Week',
-        getRange: () => ({ from: dayjs().startOf('isoWeek').toString(), to: dayjs().endOf('isoWeek').toString(), order: 2 }),
-    },
-    lastWeek: {
-        name: 'Last Week',
-        getRange: () => ({ from: dayjs().startOf('isoWeek').subtract(1, 'week').toString(), to: dayjs().endOf('isoWeek').subtract(1, 'week').toString(), order: 3 }),
-    },
-    thisMonth: {
-        name: 'This Month',
-        getRange: () => ({ from: dayjs().startOf('month').toString(), to: dayjs().endOf('month').toString(), order: 4 }),
-    },
-    lastMonth: {
-        name: 'Last Month',
-        getRange: () => ({ from: dayjs().startOf('month').subtract(1, 'month').toString(), to: dayjs().subtract(1, 'month').endOf('month').toString(), order: 5 }),
-    },
-    last3Month: {
-        name: 'Last 3 Months',
-        getRange: () => ({ from: dayjs().startOf('month').subtract(3, 'month').toString(), to: dayjs().subtract(1, 'month').endOf('month').toString(), order: 5 }),
-    },
-    thisYear: {
-        name: 'This Year',
-        getRange: () => ({ from: dayjs().startOf('year').toString(), to: dayjs().endOf('year').toString(), order: 7 }),
-    },
-    lastYear: {
-        name: 'Last Year',
-        getRange: () => ({ from: dayjs().startOf('year').subtract(1, 'year').toString(), to: dayjs().subtract(1, 'year').endOf('year').toString(), order: 8 }),
-    },
-};
-
-export interface RangeDatePickerValue {
-    from: string | null;
-    to: string | null;
-}
-
-interface RangeDatePickerBodyState {
-    activePart: pickerPart;
-}
-
-type InputType = 'from' | 'to';
-
-export interface RangeDatePickerBodyProps<T> extends DatePickerBodyBaseOptions, IEditable<PickerBodyValue<T>> {
-    focusPart: InputType;
-    renderFooter?(): React.ReactNode;
-    isHoliday?: (day: Dayjs) => boolean;
-    renderHeader?: (props: IEditable<PickerBodyValue<string>>) => React.ReactNode;
-}
-
-export class RangeDatePickerBody extends React.Component<RangeDatePickerBodyProps<RangeDatePickerValue>, RangeDatePickerBodyState> {
-    state: RangeDatePickerBodyState = {
-        activePart: null,
-    };
-
-    getDayCX = (day: Dayjs) => {
-        const dayValue = day.valueOf();
-        const fromValue = this.props.value?.selectedDate.from ? dayjs(this.props.value.selectedDate.from).valueOf() : null;
-        const toValue = this.props.value?.selectedDate.to ? dayjs(this.props.value.selectedDate.to).valueOf() : null;
-
-        const inRange = dayValue >= fromValue && dayValue <= toValue && fromValue !== toValue && fromValue && toValue;
-        const isFirst = dayValue === fromValue;
-        const isLast = dayValue === toValue;
-
-        return [
-            inRange && uuiRangeDatePickerBody.inRange,
-            isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper,
-            !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper,
-            isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper,
-            !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper,
-            (dayValue === fromValue || dayValue === toValue) && uuiDaySelection.selectedDay,
-        ];
-    };
-
-    getRange(selectedDate: string) {
-        const newRange: RangeDatePickerValue = { from: null, to: null };
-        const currentRange = this.props.value.selectedDate;
-        if (!this.props.filter || this.props.filter(dayjs(selectedDate))) {
-            if (this.props.focusPart === 'from') {
-                if (dayjs(selectedDate).valueOf() <= dayjs(currentRange.to).valueOf()) {
-                    newRange.from = selectedDate;
-                    newRange.to = currentRange.to;
-                } else {
-                    newRange.from = selectedDate;
-                    newRange.to = null;
-                }
-            }
-
-            if (this.props.focusPart === 'to') {
-                if (!currentRange.from) {
-                    newRange.to = selectedDate;
-                } else if (dayjs(selectedDate).valueOf() >= dayjs(currentRange.from).valueOf()) {
-                    newRange.from = currentRange.from;
-                    newRange.to = selectedDate;
-                } else {
-                    newRange.from = selectedDate;
-                    newRange.to = null;
-                }
-            }
-        }
-
-        return newRange;
-    }
-
-    setSelectedDate(selectedDate: string) {
-        const range = this.getRange(selectedDate);
-
-        this.props.onValueChange({
-            ...this.props.value,
-            selectedDate: range,
-        });
-
-        if (range.from && range.to && this.props.focusPart === 'to') {
-            this.props.changeIsOpen(false);
-        }
-    }
-
-    setDisplayedDateAndView(displayedDate: Dayjs, view: ViewType, part: pickerPart) {
-        this.setState({ activePart: part });
-
-        this.props.onValueChange({
-            selectedDate: this.props.value.selectedDate,
-            displayedDate: part === 'from' ? displayedDate : displayedDate.subtract(1, 'month'),
-            view: view,
-        });
-    }
-
-    getFromValue = (): PickerBodyValue<string> => {
-        return {
-            ...this.props.value,
-            view: this.state.activePart === 'from' ? this.props.value.view : 'DAY_SELECTION',
-            selectedDate: this.props.value?.selectedDate.from,
-        };
-    };
-
-    getToValue = (): PickerBodyValue<string> => {
-        if (!this.props.value) return;
-        return {
-            ...this.props.value,
-            view: this.state.activePart === 'to' ? this.props.value.view : 'DAY_SELECTION',
-            displayedDate: this.props.value.displayedDate.add(1, 'month'),
-            selectedDate: this.props.value.selectedDate.to,
-        };
-    };
-
-    renderPresets = () => {
-        return (
-            <>
-                <div className={ uuiRangeDatePickerBody.separator } />
-                <CalendarPresets
-                    forwardedRef={ this.props.forwardedRef }
-                    onPresetSet={ (presetVal) => {
-                        this.props.onValueChange({
-                            view: 'DAY_SELECTION',
-                            selectedDate: { from: dayjs(presetVal.from).format(valueFormat), to: dayjs(presetVal.to).format(valueFormat) },
-                            displayedDate: dayjs(presetVal.from),
-                        });
-                        this.props.changeIsOpen(false);
-                    } }
-                    presets={ this.props.presets }
-                />
-            </>
-        );
-    };
-
-    renderDatePicker = () => {
-        return (
-            <FlexRow cx={ [this.props.value?.view === 'DAY_SELECTION' && css.daySelection, css.container] } alignItems="top">
-                <FlexCell width="auto">
-                    <FlexRow>
-                        <FlexRow cx={ css.bodesWrapper } alignItems="top">
-                            <DatePickerBody
-                                cx={ cx(css.fromPicker) }
-                                setSelectedDate={ (nv) => this.setSelectedDate(nv) }
-                                value={ this.getFromValue() }
-                                setDisplayedDateAndView={ (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'from') }
-                                getDayCX={ this.getDayCX }
-                                filter={ this.props.filter }
-                                renderDay={ this.props.renderDay }
-                                isHoliday={ this.props.isHoliday }
-                            />
-                            <DatePickerBody
-                                cx={ cx(css.toPicker) }
-                                setSelectedDate={ (nv) => this.setSelectedDate(nv) }
-                                value={ this.getToValue() }
-                                setDisplayedDateAndView={ (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'to') }
-                                getDayCX={ this.getDayCX }
-                                filter={ this.props.filter }
-                                renderDay={ this.props.renderDay }
-                                isHoliday={ this.props.isHoliday }
-                            />
-                            {this.props.value?.view !== 'DAY_SELECTION' && (
-                                <div
-                                    style={ {
-                                        left: this.state.activePart === 'from' && '50%',
-                                        right: this.state.activePart === 'to' && '50%',
-                                    } }
-                                    className={ css.blocker }
-                                />
-                            )}
-                        </FlexRow>
-                        {this.props.presets && this.renderPresets()}
-                    </FlexRow>
-                    {this.props.renderFooter && this.props.renderFooter()}
-                </FlexCell>
-            </FlexRow>
-        );
-    };
-
-    render() {
-        return (
-            <div className={ cx(css.root, uuiDatePickerBodyBase.container, this.props.cx) } { ...this.props.rawProps }>
-                {this.renderDatePicker()}
-            </div>
-        );
-    }
-}

package/components/datePickers/__tests__/Calendar.test.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Calendar } from '../Calendar';
-import { renderer } from '@epam/uui-test-utils';
-import dayjs from 'dayjs';
-
-describe('Calendar', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<Calendar value={ dayjs('2020-09-03') } onValueChange={ jest.fn } displayedDate={ dayjs('2020-09-03') } />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/datePickers/__tests__/CalendarPresets.test.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { CalendarPresets } from '../CalendarPresets';
-import { renderer } from '@epam/uui-test-utils';
-import { rangeDatePickerPresets } from '../RangeDatePickerBody';
-
-describe('CalendarPresets', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<CalendarPresets presets={ rangeDatePickerPresets } onPresetSet={ jest.fn } />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/datePickers/__tests__/DatePicker.test.tsx

@@ -1,119 +0,0 @@
-import * as React from 'react';
-import {
-    renderSnapshotWithContextAsync, fireEvent, setupComponentForTest, screen,
-} from '@epam/uui-test-utils';
-import { DatePicker, DatePickerProps } from '../DatePicker';
-
-jest.mock('react-popper', () => ({
-    ...jest.requireActual('react-popper'),
-    Popper: function PopperMock({ children }: any) {
-        return children({
-            ref: jest.fn,
-            update: jest.fn(),
-            style: {},
-            arrowProps: { ref: jest.fn },
-            placement: 'bottom-start',
-            isReferenceHidden: false,
-        });
-    },
-}));
-
-async function setupDatePicker(params: Partial<DatePickerProps>) {
-    const { format, value } = params;
-
-    const { mocks, setProps } = await setupComponentForTest<DatePickerProps>(
-        (context) => ({
-            value,
-            format,
-            onValueChange: jest.fn().mockImplementation((newValue) => {
-                context.current.setProperty('value', newValue);
-            }),
-        }),
-        (props) => <DatePicker { ...props } />,
-    );
-
-    const input = screen.queryByRole('textbox') as HTMLInputElement;
-    const clear = screen.queryByRole('button');
-    const dom = { input, clear };
-
-    return {
-        setProps,
-        mocks,
-        dom,
-    };
-}
-
-const DATE_FORMAT_DEFAULT = 'MMM D, YYYY';
-const DATE_FORMAT_CUSTOM = 'DD-MM-YYYY';
-
-describe('DatePicker', () => {
-    it('should render with minimum props defined', async () => {
-        const tree = await renderSnapshotWithContextAsync(<DatePicker format={ DATE_FORMAT_DEFAULT } value={ null } onValueChange={ jest.fn } />);
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should render with maximum props defined', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <DatePicker
-                format={ DATE_FORMAT_DEFAULT }
-                value={ null }
-                onValueChange={ jest.fn }
-                placeholder="Test"
-                disableClear={ false }
-                renderFooter={ () => <div>Test footer</div> }
-            />,
-        );
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should open picker on field focus', async () => {
-        const { dom } = await setupDatePicker({ value: null, format: DATE_FORMAT_DEFAULT });
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-        fireEvent.focus(dom.input);
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-    });
-
-    it('should close picker on field blur', async () => {
-        const { dom } = await setupDatePicker({ value: null, format: DATE_FORMAT_DEFAULT });
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-        fireEvent.focus(dom.input);
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-        fireEvent.blur(dom.input);
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    });
-
-    it('should change input value after change props', async () => {
-        const { dom, mocks, setProps } = await setupDatePicker({ value: null, format: DATE_FORMAT_DEFAULT });
-        expect(dom.input.value).toEqual('');
-        setProps({ value: '2017-01-22' });
-        expect(dom.input.value).toEqual('Jan 22, 2017');
-        expect(mocks.onValueChange).not.toHaveBeenCalled();
-    });
-
-    it('should clear input when clear button is clicked', async () => {
-        const { dom, mocks } = await setupDatePicker({ value: '2017-01-22', format: DATE_FORMAT_DEFAULT });
-        expect(dom.input.value).toEqual('Jan 22, 2017');
-        fireEvent.click(dom.clear);
-        expect(dom.input.value).toEqual('');
-        expect(mocks.onValueChange).toHaveBeenCalledWith(null);
-    });
-
-    it('should reset invalid value onBlur', async () => {
-        const { dom, mocks } = await setupDatePicker({ value: null, format: DATE_FORMAT_DEFAULT });
-        expect(dom.input.value).toEqual('');
-        fireEvent.change(dom.input, { target: { value: '2019-10-47' } });
-        expect(dom.input.value).toEqual('2019-10-47');
-        expect(mocks.onValueChange).not.toHaveBeenCalled();
-        fireEvent.blur(dom.input);
-        expect(dom.input.value).toEqual('');
-        expect(mocks.onValueChange).toHaveBeenCalledWith(null);
-    });
-
-    it('should set new value with custom format', async () => {
-        const { dom, mocks } = await setupDatePicker({ value: null, format: DATE_FORMAT_CUSTOM });
-        expect(dom.input.value).toEqual('');
-        fireEvent.change(dom.input, { target: { value: '31-01-2017' } });
-        expect(mocks.onValueChange).toHaveBeenCalledWith('2017-01-31');
-        expect(dom.input.value).toEqual('31-01-2017');
-    });
-});

package/components/datePickers/__tests__/DatePickerBody.test.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { renderSnapshotWithContextAsync, renderWithContextAsync, fireEvent, screen } from '@epam/uui-test-utils';
-import { DatePickerBody } from '../DatePickerBody';
-import dayjs from 'dayjs';
-
-describe('DataPicker', () => {
-    it('should be rendered correctly', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <DatePickerBody
-                value={ null }
-                setDisplayedDateAndView={ jest.fn }
-                setSelectedDate={ jest.fn }
-            />,
-        );
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should change selectedDate on day click', async () => {
-        const handleChange = jest.fn();
-        await renderWithContextAsync(
-            <DatePickerBody
-                value={ {
-                    view: 'DAY_SELECTION',
-                    selectedDate: '',
-                    displayedDate: dayjs('2017-01-22').startOf('day'),
-                } }
-                setSelectedDate={ handleChange }
-                setDisplayedDateAndView={ jest.fn() }
-            />,
-        );
-
-        const nextDayElement = screen.queryByText('23');
-        fireEvent.click(nextDayElement);
-        expect(handleChange).toBeCalledWith('2017-01-23');
-    });
-});

package/components/datePickers/__tests__/DatePickerHeader.test.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import dayjs from 'dayjs';
-import { fireEvent, setupComponentForTest, screen, within } from '@epam/uui-test-utils';
-import { DatePickerHeader, DatePickerHeaderProps } from '../DatePickerHeader';
-
-async function setupDatePickerHeader(params: { initialDate: string }) {
-    const value = {
-        view: 'DAY_SELECTION' as any,
-        selectedDate: '',
-        displayedDate: dayjs(params.initialDate).startOf('day'),
-    };
-
-    const { result } = await setupComponentForTest<DatePickerHeaderProps>(
-        (context) => ({
-            value,
-            onValueChange: jest.fn().mockImplementation((newValue) => {
-                context.current.setProperty('value', newValue);
-            }),
-        }),
-        (props) => <DatePickerHeader { ...props } />,
-    );
-
-    const [left, title, right] = within(screen.queryByRole('banner')).queryAllByRole('button');
-
-    return {
-        result,
-        dom: { left, right, title },
-    };
-}
-
-describe('DatePickerHeader', () => {
-    it('should change date on arrow click', async () => {
-        const { dom } = await setupDatePickerHeader({ initialDate: '2017-01-22' });
-
-        expect(screen.getByText('January 2017')).toBeInTheDocument();
-
-        fireEvent.click(dom.left);
-        expect(screen.getByText('December 2016')).toBeInTheDocument();
-
-        fireEvent.click(dom.right);
-        expect(screen.getByText('January 2017')).toBeInTheDocument();
-
-        fireEvent.click(dom.right);
-        expect(screen.getByText('February 2017')).toBeInTheDocument();
-    });
-
-    it('should change view on header caption click', async () => {
-        const { dom } = await setupDatePickerHeader({ initialDate: '2017-01-22' });
-        expect(screen.getByText('January 2017')).toBeInTheDocument();
-
-        fireEvent.click(dom.title);
-        expect(screen.getByText('2017')).toBeInTheDocument();
-
-        fireEvent.click(dom.title);
-        expect(screen.getByText('January 2017')).toBeInTheDocument();
-    });
-});

package/components/datePickers/__tests__/RangeDatePicker.test.tsx

@@ -1,181 +0,0 @@
-import * as React from 'react';
-import { RangeDatePicker, RangeDatePickerProps } from '../RangeDatePicker';
-import {
-    renderSnapshotWithContextAsync, setupComponentForTest, fireEvent, screen, within,
-} from '@epam/uui-test-utils';
-
-jest.mock('react-popper', () => ({
-    ...jest.requireActual('react-popper'),
-    Popper: function PopperMock({ children }: any) {
-        return children({
-            ref: jest.fn,
-            update: jest.fn(),
-            style: {},
-            arrowProps: { ref: jest.fn },
-            placement: 'bottom-start',
-            isReferenceHidden: false,
-        });
-    },
-}));
-
-async function setupRangeDatePicker(params: { value: { from: string; to: string } | null; format?: string }) {
-    const { value, format } = params;
-
-    const { result, mocks } = await setupComponentForTest<RangeDatePickerProps>(
-        (context) => ({
-            rawProps: { from: { 'data-testid': 'from' }, to: { 'data-testid': 'to' } },
-            value: value ?? { from: null, to: null },
-            format,
-            onValueChange: jest.fn().mockImplementation((newValue) => {
-                context.current.setProperty('value', newValue);
-            }),
-            onOpenChange: jest.fn(),
-        }),
-        (props) => <RangeDatePicker { ...props } />,
-    );
-
-    const from = within(screen.getByTestId('from')).getByRole('textbox') as HTMLInputElement;
-    const to = within(screen.getByTestId('to')).getByRole('textbox') as HTMLInputElement;
-    const clear = result.container.querySelector('.uui-icon-cancel');
-
-    return {
-        result,
-        dom: { from, to, clear },
-        mocks: { onValueChange: mocks.onValueChange, onOpenChange: mocks.onOpenChange },
-    };
-}
-
-describe('RangeDataPicker', () => {
-    it('should be rendered if minimum params and custom format defined', async () => {
-        const tree = await renderSnapshotWithContextAsync(<RangeDatePicker format="MMM D, YYYY" value={ { from: null, to: null } } onValueChange={ jest.fn } />);
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered if many params defined', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <RangeDatePicker
-                format="MMM D, YYYY"
-                value={ { from: null, to: null } }
-                onValueChange={ jest.fn }
-                renderFooter={ ((value: any) => jest.fn(value)) as any }
-                disableClear={ false }
-                getPlaceholder={ () => '' }
-                isDisabled
-                isReadonly
-                isInvalid
-            />,
-        );
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should change input value after change props', async () => {
-        const value = { from: '2017-01-22', to: '2017-01-28' };
-        const { dom } = await setupRangeDatePicker({ value });
-        expect(dom.from.value).toBe('Jan 22, 2017');
-        expect(dom.to.value).toBe('Jan 28, 2017');
-    });
-
-    it('should render with default props', async () => {
-        const { result } = await setupRangeDatePicker({ value: null });
-        expect(result.container).not.toBeFalsy();
-    });
-
-    it('should change state on picker clear', async () => {
-        const value = { from: '2017-01-22', to: '2017-01-28' };
-        const { dom, mocks } = await setupRangeDatePicker({ value });
-        fireEvent.click(dom.clear);
-        expect(mocks.onValueChange).toBeCalledWith({ from: null, to: null });
-    });
-
-    it("should open picker on 'from' field focus and close it on blur", async () => {
-        const { dom } = await setupRangeDatePicker({ value: null });
-        fireEvent.focus(dom.from);
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-        fireEvent.blur(dom.from);
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    });
-
-    it('should open picker on "To" field focus and close it on blur', async () => {
-        const { dom } = await setupRangeDatePicker({ value: null });
-        fireEvent.focus(dom.to);
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-        fireEvent.blur(dom.to);
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    });
-
-    it('should reset invalid "From" value onBlur', async () => {
-        const value = { from: '2019-10-47', to: '2019-10-07' };
-        const { dom, mocks } = await setupRangeDatePicker({ value });
-        fireEvent.blur(dom.from);
-        expect(mocks.onValueChange).toHaveBeenLastCalledWith({
-            from: null,
-            to: value.to,
-        });
-    });
-
-    it('should set new value when new value typed in input', async () => {
-        const newValueManualTyping = { from: 'Sep 11, 2019', to: 'Sep 20, 2019' };
-        const value = { from: '2019-09-14', to: '2019-09-15' };
-        const { dom, mocks } = await setupRangeDatePicker({ value });
-
-        fireEvent.change(dom.from, { target: { value: newValueManualTyping.from } });
-        fireEvent.blur(dom.from);
-        expect(mocks.onValueChange).toHaveBeenLastCalledWith({
-            from: '2019-09-11',
-            to: '2019-09-15',
-        });
-    });
-
-    it('should change range on picker body value change', async () => {
-        const newValueManualSel = { from: '2019-09-11' };
-        const value = { from: '2019-09-10', to: '2019-09-12' };
-        const { dom, mocks } = await setupRangeDatePicker({ value });
-
-        fireEvent.focus(dom.from);
-        const dialog = screen.queryByRole('dialog');
-        const [sept11] = await within(dialog).findAllByText('11');
-        fireEvent.click(sept11);
-        expect(mocks.onValueChange).toHaveBeenLastCalledWith({
-            from: newValueManualSel.from,
-            to: '2019-09-12',
-        });
-    });
-
-    it('should format value onBlur', async () => {
-        const value = { from: '2019-09-10', to: '2019-10-10' };
-        const newValueInIsoFormat = { from: '2019-09-11', to: '2019-10-11' };
-
-        const { dom } = await setupRangeDatePicker({ value });
-        expect(dom.from.value).toBe('Sep 10, 2019');
-        fireEvent.change(dom.from, { target: { value: newValueInIsoFormat.from } });
-        fireEvent.blur(dom.from);
-        expect(dom.from.value).toBe('Sep 11, 2019');
-
-        fireEvent.change(dom.to, { target: { value: newValueInIsoFormat.to } });
-        fireEvent.blur(dom.to);
-        expect(dom.to.value).toBe('Oct 11, 2019');
-    });
-
-    it('should return format', async () => {
-        const value = { from: '2019-09-10', to: '2019-10-10' };
-        const { dom } = await setupRangeDatePicker({ value, format: 'DD-MM-YYYY' });
-        expect(dom.from.value).toBe('10-09-2019');
-        expect(dom.to.value).toBe('10-10-2019');
-    });
-
-    it('should set the same value on from: & to: input', async () => {
-        const value = { from: '2019-09-10', to: '2019-09-10' };
-        const { dom } = await setupRangeDatePicker({ value });
-        expect(dom.from.value).toBe('Sep 10, 2019');
-        expect(dom.to.value).toBe('Sep 10, 2019');
-    });
-
-    it('should fire onOpenChange event on open state change', async () => {
-        const value = { from: '2017-01-22', to: '2017-01-28' };
-        const { dom, mocks } = await setupRangeDatePicker({ value });
-        fireEvent.focus(dom.from);
-        expect(mocks.onOpenChange).toBeCalledWith(true);
-        fireEvent.blur(dom.from);
-        expect(mocks.onOpenChange).toBeCalledWith(false);
-    });
-});