@epam/uui 5.5.2 → 5.5.3

package/components/buttons/helper.ts

@@ -1,22 +0,0 @@
-import { ButtonProps } from '@epam/uui-components';
-
-export function getIconClass(props: ButtonProps) {
-    const classList = {
-        'has-left-icon': false,
-        'has-right-icon': false,
-    };
-
-    if (props.onClear) {
-        classList['has-right-icon'] = true;
-    }
-
-    if (props.isDropdown) {
-        classList[props.dropdownIconPosition === 'left' ? 'has-left-icon' : 'has-right-icon'] = true;
-    }
-
-    if (props.icon) {
-        classList[props.iconPosition !== 'right' ? 'has-left-icon' : 'has-right-icon'] = true;
-    }
-
-    return [classList['has-left-icon'] ? 'uui-has-left-icon' : 'uui-no-left-icon', classList['has-right-icon'] ? 'uui-has-right-icon' : 'uui-no-right-icon'];
-}

package/components/buttons/index.ts

@@ -1,5 +0,0 @@
-export * from './Button';
-export * from './IconButton';
-export * from './LinkButton';
-export * from './TabButton';
-export * from './VerticalTabButton';

package/components/datePickers/Calendar.module.scss

@@ -1,143 +0,0 @@
-@use  '../../assets/styles/index' as *;
-
-.root {
-    --uui-calendar-selected_range-hover: var(--uui-primary-60);
-    --uui-calendar-selected_range: var(--uui-primary-50);
-    --uui-calendar-weekday-caption: var(--uui-text-tertiary);
-    --uui-calendar-holiday-caption: var(--uui-text-tertiary);
-    --uui-calendar-day-text: var(--uui-control-text);
-    --uui-calendar-day-text-disabled: var(--uui-text-disabled);
-    --uui-calendar-selected_day-text: var(--uui-neutral-0);
-    --uui-calendar-selected_day-hover: var(--uui-control-bg);
-
-    --uui-calendar-font: var(--uui-font);
-    --uui-calendar-font-weight: 400;
-    --uui-calendar-weekday-font: var(--uui-font);
-    --uui-calendar-weekday-font-weight: 400;
-    --uui-calendar-selected_day-font: var(--uui-font);
-    --uui-calendar-selected_day-font-weight: 600;
-
-    :global(.uui-calendar-content) {
-        font-family: var(--uui-calendar-font);
-        font-weight: var(--uui-calendar-font-weight, normal);
-    }
-
-    :global(.uui-calendar-weekday) {
-        font-family: var(--uui-calendar-weekday-font);
-        font-weight: var(--uui-calendar-weekday-font-weight, normal);
-        color: var(--uui-calendar-weekday-caption);
-        width: 34px;
-        font-size: 12px;
-        line-height: 24px;
-        text-align: center;
-    }
-
-    :global(.uui-calendar-day-cell) {
-        color: var(--uui-calendar-day-text);
-        text-align: center;
-        padding: 0;
-        height: 36px;
-        width: 36px;
-        display: flex;
-        position: relative;
-
-        &:focus {
-            outline: none;
-        }
-    }
-
-    :global(.uui-calendar-day-wrapper) {
-        height: 30px;
-        width: 30px;
-        font-size: 14px;
-        line-height: 30px;
-        margin: auto;
-        cursor: default;
-    }
-
-    :global(.uui-calendar-day) {
-        border-radius: 50%;
-        height: 36px;
-        width: 36px;
-        position: absolute;
-        left: 0;
-        top: 0;
-        line-height: 34px;
-        border: 1px solid transparent;
-        box-sizing: border-box;
-    }
-
-    :global(.uui-calendar-clickable-day) {
-        &:hover {
-            &:not(:global(.uui-calendar-filtered-day)) {
-                cursor: pointer;
-
-                :global(.uui-calendar-day) {
-                    border: 1px solid var(--uui-calendar-selected_range);
-                    background-color: var(--uui-calendar-selected_day-hover);
-                    z-index: 1;
-                }
-
-                &:global(.uui-calendar-selected-day) {
-                    :global(.uui-calendar-day) {
-                        border: 1px solid var(--uui-calendar-selected_range-hover);
-                        background-color: var(--uui-calendar-selected_range-hover);
-                    }
-                }
-            }
-        }
-    }
-
-    :global(.uui-calendar-current-day) {
-        &:global(.uui-calendar-day-wrapper) {
-            color: var(--uui-calendar-selected_range);
-            font-family: var(--uui-calendar-selected_day-font);
-            font-weight: var(--uui-calendar-selected_day-font-weight, normal);
-
-            :global(.uui-calendar-day)::after {
-                position: absolute;
-                content: '';
-                height: 4px;
-                width: 4px;
-                border-radius: 50%;
-                background-color: var(--uui-calendar-selected_range);
-                bottom: 3px;
-                left: calc(50% - 2px);
-            }
-        }
-    }
-
-    :global(.uui-calendar-selected-day) {
-        &:global(.uui-calendar-day-wrapper) {
-            :global(.uui-calendar-day) {
-                background-color: var(--uui-calendar-selected_range);
-                color: var(--uui-calendar-selected_day-text);
-
-                &::after {
-                    background-color: var(--uui-calendar-selected_day);
-                }
-            }
-        }
-
-        &:global(.uui-calendar-clickable-day) {
-            &:hover {
-                cursor: pointer;
-            }
-        }
-    }
-
-    :global(.uui-calendar-day-holiday) {
-        color: var(--uui-calendar-holiday-caption);
-    }
-
-    :global(.uui-calendar-filtered-day) {
-        &:global(.uui-calendar-day-wrapper) {
-            color: var(--uui-calendar-day-text-disabled);
-
-            &:hover {
-                cursor: default;
-                background-color: transparent;
-            }
-        }
-    }
-}

package/components/datePickers/Calendar.tsx

@@ -1,10 +0,0 @@
-import css from './Calendar.module.scss';
-import { Calendar as uuiCalendar, CalendarProps } from '@epam/uui-components';
-import { withMods } from '@epam/uui-core';
-import { Dayjs } from 'dayjs';
-
-export function applyDateSelectionMods() {
-    return [css.root];
-}
-
-export const Calendar = withMods<CalendarProps<Dayjs>>(uuiCalendar, applyDateSelectionMods);

package/components/datePickers/CalendarPresets.module.scss

@@ -1,30 +0,0 @@
-@use  '../../assets/styles/index' as *;
-
-.root {
-    &:global(.uui-presets-container) {
-        padding: 24px 24px 12px;
-    }
-
-    :global(.uui-presets-header) {
-        font-family: var(--uui-font);
-        font-weight: 600;
-        font-size: 14px;
-        line-height: 24px;
-        padding-bottom: 12px;
-        color: var(--uui-text-primary);
-    }
-
-    :global(.uui-presets-item) {
-        font-family: var(--uui-font);
-        font-weight: 600;
-        font-size: 12px;
-        line-height: 18px;
-        color: var(--uui-link);
-        padding-bottom: 6px;
-
-        &:hover {
-            color: var(--uui-link-hover);
-            cursor: pointer;
-        }
-    }
-}

package/components/datePickers/CalendarPresets.tsx

@@ -1,9 +0,0 @@
-import css from './CalendarPresets.module.scss';
-import { CalendarPresets as uuiCalendarPresets, CalendarPresetsProps } from '@epam/uui-components'; // TODO: rework presets to use LinkButton
-import { withMods } from '@epam/uui-core';
-
-export function applyCalendarPresetsMods() {
-    return [css.root];
-}
-
-export const CalendarPresets = withMods<CalendarPresetsProps>(uuiCalendarPresets, applyCalendarPresetsMods, () => ({}));

package/components/datePickers/DatePicker.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { cx, DatePickerCoreProps, IDropdownToggler, uuiMod, DropdownBodyProps, devLogger, withMods } from '@epam/uui-core';
-import { BaseDatePicker } from '@epam/uui-components';
-import { EditMode, SizeMod, IHasEditMode } from '../types';
-import { TextInput } from '../inputs';
-import { DatePickerBody } from './DatePickerBody';
-import { systemIcons } from '../../icons/icons';
-import { DropdownContainer } from '../overlays';
-
-const defaultMode = EditMode.FORM;
-
-/** Represents the properties of the DatePicker component. */
-export interface DatePickerProps extends DatePickerCoreProps, SizeMod, IHasEditMode {
-    /**
-    * HTML ID attribute for the toggler input
-    */
-    id?: string;
-}
-
-class DatePickerComponent extends BaseDatePicker<DatePickerProps> {
-    renderInput = (props: IDropdownToggler & { cx: any }) => {
-        if (__DEV__) {
-            if (this.props.size === '48') {
-                devLogger.warnAboutDeprecatedPropValue<DatePickerProps, 'size'>({
-                    component: 'DatePicker',
-                    propName: 'size',
-                    propValue: this.props.size,
-                    propValueUseInstead: '42',
-                    condition: () => ['48'].indexOf(this.props.size) !== -1,
-                });
-            }
-        }
-        return (
-            <TextInput
-                { ...props }
-                onClick={ null }
-                isDropdown={ false }
-                cx={ cx(this.props.inputCx, this.state.isOpen && uuiMod.focus) }
-                icon={ this.props.mode !== EditMode.CELL && systemIcons[this.props.size || '36'].calendar }
-                iconPosition={ this.props.iconPosition || 'left' }
-                placeholder={ this.props.placeholder ? this.props.placeholder : this.getFormat() }
-                size={ this.props.size || '36' }
-                value={ this.state.inputValue }
-                onValueChange={ this.handleInputChange }
-                onCancel={ this.props.disableClear || !this.state.inputValue ? undefined : this.handleCancel }
-                isInvalid={ this.props.isInvalid }
-                isDisabled={ this.props.isDisabled }
-                isReadonly={ this.props.isReadonly }
-                tabIndex={ this.props.isReadonly || this.props.isDisabled ? -1 : 0 }
-                onFocus={ this.handleFocus }
-                onBlur={ this.handleBlur }
-                mode={ this.props.mode || defaultMode }
-                rawProps={ this.props.rawProps?.input }
-                id={ this.props.id }
-            />
-        );
-    };
-
-    renderBody(props: DropdownBodyProps) {
-        return (
-            <DropdownContainer { ...props } focusLock={ false }>
-                <DatePickerBody
-                    cx={ cx(this.props.bodyCx) }
-                    filter={ this.props.filter }
-                    value={ this.getValue() }
-                    setSelectedDate={ this.setSelectedDate }
-                    setDisplayedDateAndView={ this.setDisplayedDateAndView }
-                    changeIsOpen={ this.onToggle }
-                    renderDay={ this.props.renderDay }
-                    isHoliday={ this.props.isHoliday }
-                    rawProps={ this.props.rawProps?.body }
-                />
-                {this.props.renderFooter?.()}
-            </DropdownContainer>
-        );
-    }
-}
-
-export const DatePicker = withMods(DatePickerComponent);

package/components/datePickers/DatePickerBody.module.scss

@@ -1,107 +0,0 @@
-@use  '../../assets/styles/index.scss' as *;
-
-.root {
-    --uui-dtp_body-title-bg: var(--uui-control-bg);
-    --uui-dtp_body-item-bg-selected: var(--uui-primary-50);
-    --uui-dtp_body-item-border-hover: var(--uui-primary-50);
-    --uui-dtp_body-text: var(--uui-control-text);
-    --uui-dtp_body-text-selected: var(--uui-neutral-0);
-
-    --uui-dtp_body-content-font: var(--uui-font);
-    --uui-dtp_body-content-font-weight: 400;
-}
-
-:global(.uui-datepickerBody-wrapper) {
-    min-height: 300px;
-    padding: 0 18px 12px;
-
-    // DatePickerBase style
-    :global(.uui-datepicker-container) {
-        background-color: var(--uui-dtp_body-title-bg);
-    }
-
-    // Header styles
-    :global(.uui-datepickerheader-header) {
-        padding-top: 18px;
-        padding-bottom: 6px;
-    }
-
-    // Month and Year selection styles
-    :global(.uui-monthselection-content), :global(.uui-yearselection-content) {
-        font-family: var(--uui-dtp_body-content-font);
-        font-weight: var(--uui-dtp_body-content-font-weight, normal);
-    }
-
-    :global(.uui-monthselection-month-container) {
-        margin: 0 0 12px;
-        display: flex;
-        flex-direction: column;
-
-        & > * {
-            display: flex;
-        }
-    }
-
-    :global(.uui-yearselection-year-container) {
-        display: flex;
-        flex-direction: column;
-        margin: 0 0 12px;
-
-        & > * {
-            display: flex;
-        }
-    }
-
-    :global(.uui-yearselection-year-row) {
-        display: flex;
-        justify-content: space-between;
-        width: 252px;
-    }
-
-    :global(.uui-monthselection-month) {
-        width: 72px;
-        height: 36px;
-        border-radius: 20px;
-        margin: 6px;
-        color: var(--uui-dtp_body-text);
-
-        &:hover {
-            width: 70px;
-            height: 34px;
-            border: 1px solid var(--uui-dtp_body-item-border-hover);
-            cursor: pointer;
-        }
-    }
-
-    :global(.uui-yearselection-year) {
-        width: 63px;
-        height: 36px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 20px;
-        margin: 6px 0;
-        color: var(--uui-dtp_body-text);
-
-        &:hover {
-            width: 61px;
-            height: 34px;
-            border: 1px solid var(--uui-dtp_body-item-border-hover);
-            cursor: pointer;
-        }
-    }
-
-    :global(.uui-monthselection-current-month) {
-        &:global(.uui-monthselection-month) {
-            background-color: var(--uui-dtp_body-item-bg-selected);
-            color: var(--uui-dtp_body-text-selected);
-        }
-    }
-
-    :global(.uui-yearselection-current-year) {
-        &:global(.uui-yearselection-year) {
-            background-color: var(--uui-dtp_body-item-bg-selected);
-            color: var(--uui-dtp_body-text-selected);
-        }
-    }
-}

package/components/datePickers/DatePickerBody.tsx

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

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

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