@epam/uui 5.3.0-rc.1 → 5.3.0

package/components/buttons/__tests__/__snapshots__/Button.test.tsx.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button should render with maximum props 1`] = `
+<button
+  aria-disabled={false}
+  aria-expanded={true}
+  aria-haspopup={true}
+  className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-outline uui-color-accent uui-size-36"
+  onClick={[Function]}
+  tabIndex={0}
+  type="button"
+>
+  <div
+    className="uui-caption"
+  >
+    Click me
+  </div>
+  <div
+    className="root uui-count_indicator size-24 uui-color-white"
+  >
+    10
+  </div>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className="flipY"
+    />
+  </div>
+  <div
+    className="container uui-icon uui-enabled -clickable -clickable"
+    onClick={[Function]}
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</button>
+`;
+
+exports[`Button should render with minimum props 1`] = `
+<button
+  className="container uui-button-box uui-enabled root uui-button uui-fill-solid uui-color-primary uui-size-36"
+  onClick={[Function]}
+  tabIndex={-1}
+  type="button"
+/>
+`;

package/components/buttons/__tests__/__snapshots__/IconButton.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButton should be rendered correctly 1`] = `
+<button
+  className="container uui-button-box uui-enabled uui-icon_button uui-color-neutral root"
+  onClick={[Function]}
+  tabIndex={-1}
+  type="button"
+>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  />
+</button>
+`;
+
+exports[`IconButton should be rendered correctly with props 1`] = `
+<button
+  aria-disabled={false}
+  className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-info root"
+  onClick={[Function]}
+  tabIndex={0}
+  type="button"
+>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</button>
+`;

package/components/buttons/__tests__/__snapshots__/LinkButton.test.tsx.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LinkButton should be rendered correctly 1`] = `
+<button
+  className="container uui-button-box uui-enabled uui-link_button root uui-size-36 uui-no-left-icon uui-no-right-icon uui-color-primary"
+  onClick={[Function]}
+  tabIndex={-1}
+  type="button"
+/>
+`;
+
+exports[`LinkButton should be rendered correctly with props 1`] = `
+<button
+  aria-disabled={false}
+  aria-haspopup={true}
+  className="container uui-button-box uui-enabled -clickable uui-link_button root uui-size-30 uui-has-left-icon uui-has-right-icon uui-color-primary"
+  onClick={[Function]}
+  tabIndex={0}
+  type="button"
+>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+  <div
+    className="container uui-icon uui-enabled -clickable -clickable"
+    onClick={[Function]}
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</button>
+`;

package/components/buttons/__tests__/__snapshots__/TabButton.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabButton should be rendered correctly 1`] = `
+<button
+  className="container uui-button-box uui-enabled root uui-tab-button size-48 uui-no-left-icon uui-no-right-icon"
+  onClick={[Function]}
+  role="tab"
+  tabIndex={-1}
+  type="button"
+/>
+`;
+
+exports[`TabButton should be rendered correctly with props 1`] = `
+<button
+  aria-disabled={false}
+  className="container uui-button-box uui-enabled -clickable root uui-tab-button size-48 withNotify uui-has-left-icon uui-no-right-icon"
+  onClick={[Function]}
+  role="tab"
+  tabIndex={0}
+  type="button"
+>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</button>
+`;

package/components/buttons/__tests__/__snapshots__/VerticalTabButton.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VerticalTabButton should be rendered correctly 1`] = `
+<button
+  className="container uui-button-box uui-enabled root uui-tab-button size-48 uui-no-left-icon uui-no-right-icon root"
+  onClick={[Function]}
+  role="tab"
+  tabIndex={-1}
+  type="button"
+/>
+`;
+
+exports[`VerticalTabButton should be rendered correctly with props 1`] = `
+<button
+  aria-disabled={false}
+  className="container uui-button-box uui-enabled -clickable root uui-tab-button size-48 withNotify uui-has-left-icon uui-no-right-icon root"
+  onClick={[Function]}
+  role="tab"
+  tabIndex={0}
+  type="button"
+>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</button>
+`;

package/components/buttons/helper.ts

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

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

package/components/datePickers/Calendar.module.scss

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

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

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

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { cx, DatePickerCoreProps, IDropdownToggler, uuiMod, DropdownBodyProps, devLogger } 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;
+
+export interface DatePickerProps extends DatePickerCoreProps, SizeMod, IHasEditMode {}
+
+export class DatePicker 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 }
+            />
+        );
+    };
+
+    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>
+        );
+    }
+}

package/components/datePickers/DatePickerBody.module.scss

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

@@ -0,0 +1,74 @@
+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> {
+    getDayCX?(day: Dayjs): string[];
+    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>
+        );
+    };
+}