@epam/uui 5.5.2 → 5.5.3

package/components/datePickers/RangeDatePicker.module.scss

@@ -1,101 +0,0 @@
-@use  '../../assets/styles/index' as *;
-
-.dropdown-container {
-    align-items: normal;
-}
-
-.date-input {
-    min-width: 0;
-    padding: 0 5px;
-
-    &:global(.uui-focus) {
-        border: 1px solid var(--uui-control-border-focus);
-    }
-
-    &.size-24 {
-        @include control-box-layout(22px, 0);
-    }
-
-    &.size-30 {
-        @include control-box-layout(28px, 0);
-    }
-
-    &.size-36 {
-        @include control-box-layout(34px, 0);
-    }
-
-    &.size-42 {
-        @include control-box-layout(40px, 0);
-    }
-
-    &.size-48 {
-        @include control-box-layout(46px, 0);
-    }
-}
-
-.date-input-group {
-    display: flex;
-    min-width: 0;
-    background-color: var(--uui-control-bg);
-    border: 1px solid var(--uui-control-border);
-    border-radius: var(--uui-border-radius);
-
-    .separator {
-        display: flex;
-        flex-shrink: 0;
-        background: var(--uui-control-border);
-        width: 1px;
-    }
-
-    &:hover {
-        border-color: var(--uui-control-border-hover);
-
-        .separator {
-            background: var(--uui-control-border-hover);
-        }
-
-        &:global(.uui-disabled), &:global(.uui-readonly) {
-            border-color: var(--uui-control-border);
-
-            .separator {
-                background: var(--uui-control-border);
-            }
-        }
-    }
-
-    &:global(.uui-focus) {
-        border-color: var(--uui-control-border);
-
-        .separator {
-            background: var(--uui-control-border-focus);
-        }
-
-        .date-input {
-            &:hover {
-                outline: 1px solid var(--uui-control-border-hover);
-            }
-
-            &:global(.uui-focus) {
-                outline: 1px solid var(--uui-control-border-focus);
-            }
-        }
-    }
-
-    &:global(.uui-readonly) {
-        @include readonly-input();
-
-        .date-input {
-            &:global(.uui-focus) {
-                box-shadow: none;
-            }
-        }
-    }
-
-    &:global(.uui-invalid) {
-        border-color: var(--uui-error-50);
-
-        .separator {
-            background: var(--uui-error-50);
-        }
-    }
-}

package/components/datePickers/RangeDatePicker.tsx

@@ -1,120 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import {
-    IDropdownToggler, uuiMod, BaseRangeDatePickerProps, DropdownBodyProps, devLogger, withMods,
-} from '@epam/uui-core';
-import { RangeDatePickerValue } from '@epam/uui-core';
-import { BaseRangeDatePicker } from '@epam/uui-components';
-import { DropdownContainer } from '../overlays';
-import { FlexRow } from '../layout';
-import { SizeMod } from '../types';
-import { RangeDatePickerBody } from './RangeDatePickerBody';
-import { TextInput } from '../inputs';
-import { systemIcons } from '../../icons/icons';
-import { i18n } from '../../i18n';
-import css from './RangeDatePicker.module.scss';
-
-export interface RangeDatePickerProps extends BaseRangeDatePickerProps, SizeMod {
-    /**
-     * A pure function that gets placeholder for 'from' or 'to' input.
-     */
-    getPlaceholder?(type: InputType): string;
-    /**
-    * HTML ID attribute for the first input into toggler
-    */
-    id?: string;
-}
-
-/*
-* Defines input type.
-*/
-export type InputType = 'from' | 'to';
-const defaultValue: RangeDatePickerValue = { from: null, to: null };
-
-class RangeDatePickerComponent extends BaseRangeDatePicker<RangeDatePickerProps> {
-    renderBody(props: DropdownBodyProps) {
-        return (
-            <DropdownContainer { ...props } cx={ cx(css.dropdownContainer) } focusLock={ false }>
-                <FlexRow>
-                    <RangeDatePickerBody
-                        cx={ cx(this.props.bodyCx) }
-                        value={ this.getValue() }
-                        onValueChange={ this.onRangeChange }
-                        filter={ this.props.filter }
-                        changeIsOpen={ this.toggleOpening }
-                        presets={ this.props.presets }
-                        focusPart={ this.state.inFocus }
-                        renderDay={ this.props.renderDay }
-                        renderFooter={ this.props.renderFooter && (() => this.props.renderFooter(this.props.value || defaultValue)) }
-                        isHoliday={ this.props.isHoliday }
-                        rawProps={ this.props.rawProps?.body }
-                    />
-                </FlexRow>
-            </DropdownContainer>
-        );
-    }
-
-    renderInput = (props: IDropdownToggler) => {
-        if (__DEV__) {
-            if (this.props.size === '48') {
-                devLogger.warnAboutDeprecatedPropValue<RangeDatePickerProps, 'size'>({
-                    component: 'RangeDatePicker',
-                    propName: 'size',
-                    propValue: this.props.size,
-                    propValueUseInstead: '42',
-                    condition: () => ['48'].indexOf(this.props.size) !== -1,
-                });
-            }
-        }
-        return (
-            <div
-                className={ cx(
-                    this.props.inputCx,
-                    css.dateInputGroup,
-                    this.props.isDisabled && uuiMod.disabled,
-                    this.props.isReadonly && uuiMod.readonly,
-                    this.props.isInvalid && uuiMod.invalid,
-                    this.state.inFocus && uuiMod.focus,
-                ) }
-                onClick={ !this.props.isDisabled && props.onClick }
-                onBlur={ this.handleWrapperBlur }
-                ref={ props.ref }
-            >
-                <TextInput
-                    icon={ systemIcons[this.props.size || '36'].calendar }
-                    cx={ cx(css.dateInput, css['size-' + (this.props.size || 36)], this.state.inFocus === 'from' && uuiMod.focus) }
-                    size={ this.props.size || '36' }
-                    placeholder={ this.props.getPlaceholder ? this.props.getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom }
-                    value={ this.state.inputValue.from }
-                    onValueChange={ this.getChangeHandler('from') }
-                    isInvalid={ this.props.isInvalid }
-                    isDisabled={ this.props.isDisabled }
-                    isReadonly={ this.props.isReadonly }
-                    onFocus={ (event) => this.handleFocus(event, 'from') }
-                    onBlur={ (event) => this.handleBlur(event, 'from') }
-                    isDropdown={ false }
-                    rawProps={ this.props.rawProps?.from }
-                    id={ this.props?.id }
-                />
-                <div className={ css.separator } />
-                <TextInput
-                    cx={ cx(css.dateInput, css['size-' + (this.props.size || 36)], this.state.inFocus === 'to' && uuiMod.focus) }
-                    placeholder={ this.props.getPlaceholder ? this.props.getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo }
-                    size={ this.props.size || '36' }
-                    value={ this.state.inputValue.to }
-                    onCancel={ this.props.disableClear ? null : this.state.inputValue.from && this.state.inputValue.to && this.handleCancel }
-                    onValueChange={ this.getChangeHandler('to') }
-                    isInvalid={ this.props.isInvalid }
-                    isDisabled={ this.props.isDisabled }
-                    isReadonly={ this.props.isReadonly }
-                    onFocus={ (e) => this.handleFocus(e, 'to') }
-                    onBlur={ (e) => this.handleBlur(e, 'to') }
-                    isDropdown={ false }
-                    rawProps={ this.props.rawProps?.to }
-                />
-            </div>
-        );
-    };
-}
-
-export const RangeDatePicker = withMods(RangeDatePickerComponent);

package/components/datePickers/RangeDatePickerBody.module.scss

@@ -1,128 +0,0 @@
-@use  '../../assets/styles/index' as *;
-
-.root {
-    --uui-rdtp_date-bg-selected: var(--uui-info-10);
-    --uui-rdtp_blocker-bg: color-mix(in srgb, var(--uui-surface-sunken) 80%, transparent);
-
-    :global(.uui-calendar-days) > div:last-child {
-        :global(.uui-calendar-day-cell):last-child > :global(.uui-range-datepicker-in-range) {
-            &:not(:global(.uui-range-datepicker-first-day-in-range-wrapper)) {
-                &:not(:global(.uui-range-datepicker-last-day-in-range-wrapper)) {
-                    position: relative;
-
-                    :global(.uui-calendar-day) {
-                        top: -3px;
-                    }
-
-                    &::after {
-                        background: linear-gradient(320deg, var(--uui-surface-main) 3px, transparent 0), linear-gradient(-135deg, var(--uui-surface-main) 3px, transparent 0);
-                        background-position: left-bottom;
-                        background-repeat: repeat-y;
-                        background-size: 6px 6px;
-                        content: ' ';
-                        display: block;
-                        position: absolute;
-                        bottom: 0;
-                        right: 0;
-                        width: 6px;
-                        height: 100%;
-                    }
-                }
-            }
-        }
-    }
-
-    :global(.uui-calendar-days) > div:first-child {
-        :global(.uui-calendar-day-cell):empty + :global(.uui-calendar-day-cell) :global(.uui-range-datepicker-in-range),
-        :global(.uui-calendar-day-cell):first-child :global(.uui-range-datepicker-in-range) {
-            &:not(:global(.uui-range-datepicker-first-day-in-range-wrapper)) {
-                &:not(:global(.uui-range-datepicker-last-day-in-range-wrapper)) {
-                    position: relative;
-
-                    :global(.uui-calendar-day) {
-                        top: -3px;
-                    }
-
-                    &::after {
-                        background: linear-gradient(45deg, var(--uui-surface-main) 3px, transparent 0), linear-gradient(135deg, var(--uui-surface-main) 3px, transparent 0);
-                        background-position: left-bottom;
-                        background-repeat: repeat-y;
-                        background-size: 6px 6px;
-                        content: ' ';
-                        display: block;
-                        position: absolute;
-                        bottom: 0;
-                        left: 0;
-                        width: 6px;
-                        height: 100%;
-                    }
-                }
-            }
-        }
-    }
-
-    :global(.uui-range-datepicker-in-range) {
-        &:global(.uui-calendar-day-wrapper) {
-            background-color: var(--uui-rdtp_date-bg-selected);
-            border-radius: 0;
-            width: 40px;
-        }
-    }
-
-    :global(.uui-range-datepicker-first-day-in-range-wrapper) {
-        &:global(.uui-calendar-selected-day) {
-            border-top-left-radius: 50%;
-            border-bottom-left-radius: 50%;
-        }
-    }
-
-    :global(.uui-range-datepicker-last-day-in-range-wrapper) {
-        &:global(.uui-calendar-selected-day) {
-            border-top-right-radius: 50%;
-            border-bottom-right-radius: 50%;
-            margin-right: 10px;
-        }
-    }
-
-    :global(.uui-range-datepicker-separator) {
-        display: flex;
-        flex: 0 0 auto;
-        border-left: 1px solid var(--uui-control-border);
-    }
-}
-
-.container {
-    &.day-selection {
-        .from-picker {
-            :global(.uui-datepickerheader-nav-icon-right) {
-                visibility: hidden;
-            }
-        }
-
-        .to-picker {
-            :global(.uui-datepickerheader-nav-icon-left) {
-                visibility: hidden;
-            }
-        }
-    }
-
-    .bodes-wrapper {
-        position: relative;
-        transition: height 0.3s ease-in-out;
-    }
-
-    .blocker {
-        background-color: var(--uui-rdtp_blocker-bg);
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-    }
-}
-
-:global(.uui-datepicker-container) {
-    transition: height 0.3s ease-in-out;
-}
-
-

package/components/datePickers/RangeDatePickerBody.tsx

@@ -1,263 +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' | null;
-
-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 {
-    /*
-    * Defines DatePicker value 'from'.
-    */
-    from: string | null;
-    /*
-    * Defines DatePicker value 'to'.
-    */
-    to: string | null;
-}
-
-interface RangeDatePickerBodyState {
-    /*
-    * Defines which part is active, 'from' or 'to'.
-    */
-    activePart: PickerPart;
-}
-
-/*
-* Defines DatePicker input type, 'from' or 'to'.
-*/
-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): string[] => {
-        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 = fromValue && toValue && dayValue >= fromValue && dayValue <= toValue && fromValue !== toValue;
-        const isFirst = dayValue === fromValue;
-        const isLast = dayValue === toValue;
-
-        return [cx(
-            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 || { from: null, to: null };
-
-        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 || null,
-        };
-    };
-
-    getToValue = (): PickerBodyValue<string> => {
-        return {
-            view: this.state.activePart === 'to' ? this.props.value.view : 'DAY_SELECTION',
-            displayedDate: this.props.value.displayedDate.add(1, 'month'),
-            selectedDate: this.props.value.selectedDate?.from || null,
-        };
-    };
-
-    renderPresets = (presets: RangeDatePickerPresets) => {
-        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={ 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%' : undefined,
-                                        right: this.state.activePart === 'to' ? '50%' : undefined,
-                                    } }
-                                    className={ css.blocker }
-                                />
-                            )}
-                        </FlexRow>
-                        {this.props.presets && this.renderPresets(this.props.presets)}
-                    </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();
-    });
-});