@epam/uui 5.5.1 → 5.5.2

package/components/datePickers/DatePickerBody.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import updateLocale from 'dayjs/plugin/updateLocale.js';
+import { cx } from '@epam/uui-core';
+import { MonthSelection, YearSelection, DatePickerBodyBase, DatePickerBodyBaseProps, valueFormat, i18n } from '@epam/uui-components';
+import { DatePickerHeader } from './DatePickerHeader';
+import { Calendar } from './Calendar';
+import css from './DatePickerBody.module.scss';
+
+dayjs.extend(updateLocale);
+
+export interface DatePickerBodyProps extends DatePickerBodyBaseProps<string> {
+    /*
+    * A pure function that gets array of classes for styling a day for each day.
+    */
+    getDayCX?(day: Dayjs): string[];
+    /**
+     * A pure function that gets whether day is holiday for each day.
+     */
+    isHoliday?: (day: Dayjs) => boolean;
+}
+
+export const uuiDatePickerBody = {
+    wrapper: 'uui-datepickerBody-wrapper',
+    separator: 'uui-datepickerBody-separator',
+} as const;
+
+export class DatePickerBody extends DatePickerBodyBase<string, DatePickerBodyProps> {
+    constructor(props: DatePickerBodyProps) {
+        super(props);
+        dayjs.locale('en');
+        dayjs.updateLocale(i18n.datePicker.locale, { weekStart: 1 });
+    }
+
+    onDayClick = (day: Dayjs) => {
+        if (!this.props.filter || this.props.filter(day)) {
+            this.props.setSelectedDate(day.format(valueFormat));
+        }
+        this.props.changeIsOpen && this.props.changeIsOpen(false);
+    };
+
+    getView = () => {
+        switch (this.props.value?.view) {
+            case 'MONTH_SELECTION':
+                return (
+                    <MonthSelection selectedDate={ dayjs(this.props.value.selectedDate) } value={ this.props.value.displayedDate } onValueChange={ this.onMonthClick } />
+                );
+            case 'YEAR_SELECTION':
+                return (
+                    <YearSelection selectedDate={ dayjs(this.props.value.selectedDate) } value={ this.props.value.displayedDate } onValueChange={ this.onYearClick } />
+                );
+            case 'DAY_SELECTION':
+                return (
+                    <Calendar
+                        value={ dayjs(this.props.value.selectedDate) }
+                        onValueChange={ this.onDayClick }
+                        displayedDate={ this.props.value.displayedDate }
+                        filter={ this.props.filter }
+                        getDayCX={ this.props.getDayCX }
+                        renderDay={ this.props.renderDay }
+                        isHoliday={ this.props.isHoliday }
+                    />
+                );
+        }
+    };
+
+    renderBody = () => {
+        return (
+            <div className={ cx(css.root, uuiDatePickerBody.wrapper, this.props.cx) }>
+                <DatePickerHeader
+                    value={ this.props.value }
+                    onValueChange={ (newValue) => this.props.setDisplayedDateAndView(newValue.displayedDate, newValue.view) }
+                />
+                {this.getView()}
+            </div>
+        );
+    };
+}

package/components/datePickers/DatePickerHeader.module.scss

@@ -0,0 +1,15 @@
+.container {
+    &:global(.uui-datepickerheader-container) {
+        :global(.uui-datepickerheader-header) {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        :global(.uui-datepickerheader-nav-title) {
+            display: flex;
+            align-items: center;
+        }
+    }
+}
+
+

package/components/datePickers/DatePickerHeader.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { Icon, IEditable, IHasCX } from '@epam/uui-core';
+import cx from 'classnames';
+import css from './DatePickerHeader.module.scss';
+import dayjs, { Dayjs } from 'dayjs';
+import { PickerBodyValue, ViewType } from '@epam/uui-components';
+import { ReactComponent as LeftArrowIcon } from '@epam/assets/icons/common/navigation-chevron-left-18.svg';
+import { ReactComponent as RightArrowIcon } from '@epam/assets/icons/common/navigation-chevron-right-18.svg';
+import { Button } from '../buttons';
+import localeData from 'dayjs/plugin/localeData';
+
+dayjs.extend(localeData);
+
+export const uuiHeader = {
+    container: 'uui-datepickerheader-container',
+    header: 'uui-datepickerheader-header',
+    navTitle: 'uui-datepickerheader-nav-title',
+    navIconRight: 'uui-datepickerheader-nav-icon-right',
+    navIconLeft: 'uui-datepickerheader-nav-icon-left',
+};
+
+export interface DatePickerHeaderProps extends IEditable<PickerBodyValue<string>>, IHasCX {
+    /*
+     * Navigation icon for the left navigation icon in header.
+     * Usually it has a default implementation in skins, so providing this is only necessary if you want to replace the default icon.
+     */
+    navIconLeft?: Icon;
+    /*
+     * Navigation icon for the right navigation icon in header.
+     * Usually it has a default implementation in skins, so providing this is only necessary if you want to replace the default icon.
+     */
+    navIconRight?: Icon;
+}
+
+const getPrevMonthFromCurrent = (currentDate: Dayjs) => {
+    return currentDate.subtract(1, 'month');
+};
+
+export const getNextMonthFromCurrent = (currentDate: Dayjs) => {
+    return currentDate.add(1, 'month');
+};
+
+const getPrevYearFromCurrent = (currentDate: Dayjs) => {
+    return currentDate.subtract(1, 'year');
+};
+
+export const getNextYearFromCurrent = (currentDate: Dayjs) => {
+    return currentDate.add(1, 'year');
+};
+
+const getPrevListYearFromCurrent = (currentDate: Dayjs) => {
+    return currentDate.subtract(16, 'year');
+};
+
+export const getNextListYearFromCurrent = (currentDate: Dayjs) => {
+    return currentDate.add(16, 'year');
+};
+
+export function DatePickerHeader(props: DatePickerHeaderProps) {
+    const onLeftNavigationArrow = () => {
+        switch (props.value.view) {
+            case 'DAY_SELECTION':
+                props.onValueChange({ ...props.value, displayedDate: getPrevMonthFromCurrent(props.value.displayedDate) });
+                break;
+            case 'MONTH_SELECTION':
+                props.onValueChange({ ...props.value, displayedDate: getPrevYearFromCurrent(props.value.displayedDate) });
+                break;
+            case 'YEAR_SELECTION':
+                props.onValueChange({ ...props.value, displayedDate: getPrevListYearFromCurrent(props.value.displayedDate) });
+                break;
+        }
+    };
+
+    const onRightNavigationArrow = () => {
+        switch (props.value.view) {
+            case 'DAY_SELECTION':
+                props.onValueChange({ ...props.value, displayedDate: getNextMonthFromCurrent(props.value.displayedDate) });
+                break;
+            case 'MONTH_SELECTION':
+                props.onValueChange({ ...props.value, displayedDate: getNextYearFromCurrent(props.value.displayedDate) });
+                break;
+            case 'YEAR_SELECTION':
+                props.onValueChange({ ...props.value, displayedDate: getNextListYearFromCurrent(props.value.displayedDate) });
+                break;
+        }
+    };
+
+    const onCaptionClick = (view: ViewType) => {
+        let nextView: ViewType;
+        switch (view) {
+            case 'DAY_SELECTION':
+                nextView = 'MONTH_SELECTION';
+                break;
+            case 'MONTH_SELECTION':
+                nextView = 'YEAR_SELECTION';
+                break;
+            case 'YEAR_SELECTION':
+                nextView = 'DAY_SELECTION';
+                break;
+        }
+
+        props.onValueChange({
+            ...props.value,
+            view: nextView,
+        });
+    };
+
+    const title = React.useMemo(
+        () => `${
+            props.value?.view !== 'MONTH_SELECTION'
+                ? dayjs.months()[props.value?.displayedDate.month()]
+                : ''
+        } ${props.value?.displayedDate.year()}`,
+        [props.value?.view, props.value?.displayedDate],
+    );
+
+    return (
+        <div className={ cx(css.container, uuiHeader.container, props.cx) }>
+            <header className={ uuiHeader.header }>
+                <Button icon={ props.navIconLeft || LeftArrowIcon } color="secondary" fill="ghost" cx={ uuiHeader.navIconLeft } onClick={ () => onLeftNavigationArrow() } />
+                <Button caption={ title } fill="ghost" cx={ uuiHeader.navTitle } onClick={ () => onCaptionClick(props.value.view) } />
+                <Button icon={ props.navIconRight || RightArrowIcon } color="secondary" fill="ghost" cx={ uuiHeader.navIconRight } onClick={ () => onRightNavigationArrow() } />
+            </header>
+        </div>
+    );
+}

package/components/datePickers/RangeDatePicker.module.scss

@@ -0,0 +1,101 @@
+@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

@@ -0,0 +1,120 @@
+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

@@ -0,0 +1,128 @@
+@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;
+}
+
+