@epam/uui 5.5.1 → 5.5.2

package/components/inputs/TextArea.module.scss

@@ -0,0 +1,210 @@
+@use  '../../assets/styles/index' as *;
+
+@mixin control-inline-mode() {
+    background-color: transparent;
+    border-color: transparent;
+    border-style: solid;
+    border-radius: var(--uui-text_area-border-radius);
+
+    &:hover {
+        border-color: var(--uui-text_area-border-hover);
+    }
+
+    &:global(.uui-focus) {
+        border-color: var(--uui-text_area-border-active);
+    }
+}
+
+.root {
+    --uui-text_area-bg: var(--uui-control-bg);
+    --uui-text_area-bg-disabled: var(--uui-control-bg-disabled);
+    --uui-text_area-border: var(--uui-control-border);
+    --uui-text_area-border-hover: var(--uui-control-border-hover);
+    --uui-text_area-border-active: var(--uui-control-border-focus);
+    --uui-text_area-border-error: var(--uui-error-50);
+    --uui-text_area-border-disabled: var(--uui-control-border-disabled);
+    --uui-text_area-placeholder: var(--uui-control-placeholder);
+    --uui-text_area-placeholder-disabled: var(--uui-control-placeholder-disabled);
+    --uui-text_area-placeholder-readonly: var(--uui-control-placeholder-disabled);
+    --uui-text_area-text: var(--uui-control-text);
+    --uui-text_area-text-disabled: var(--uui-control-text-disabled);
+
+    --uui-text_area-border-radius: var(--uui-border-radius);
+
+    --uui-text_area-font: var(--uui-font);
+    --uui-text_area-font-weight: 400;
+    //
+    :global(.uui-input) {
+        color: var(--uui-text_area-text);
+        border-style: solid;
+        border-radius: var(--uui-text_area-border-radius);
+        font-family: var(--uui-text_area-font);
+        font-weight: var(--uui-text_area-font-weight);
+        box-sizing: border-box;
+        padding-right: 18px;
+        padding-left: 12px;
+        overflow-x: hidden;  // Firefox add an extra row in textarea when overflow-x is not hidden
+
+        &::placeholder {
+            color: var(--uui-text_area-placeholder);
+        }
+
+        &:placeholder-shown {
+            text-overflow: ellipsis;
+        }
+
+        &::-moz-placeholder {
+            opacity: 1;
+        }
+
+        &:global(.uui-readonly) {
+            color: var(--uui-text_area-text);
+            pointer-events: none;
+
+            &::placeholder {
+                color: var(--uui-text_area-placeholder-readonly);
+            }
+        }
+
+        &:global(.uui-disabled) {
+            color: var(--uui-text_area-text-disabled);
+            pointer-events: none;
+
+            &::placeholder {
+                color: var(--uui-text_area-placeholder-disabled);
+            }
+        }
+    }
+
+    &.mode-form {
+        :global(.uui-input) {
+            background-color: var(--uui-text_area-bg);
+            border-color: var(--uui-text_area-border);
+
+            &:hover {
+                border-color: var(--uui-text_area-border-hover);
+            }
+
+            &:global(.uui-focus) {
+                border-color: var(--uui-text_area-border-active);
+            }
+
+            &:global(.uui-invalid) {
+                border-color: var(--uui-text_area-border-error);
+            }
+
+            &:global(.uui-readonly) {
+                background-color: var(--uui-text_area-bg-disabled);
+                border-color: var(--uui-text_area-border-disabled);
+            }
+
+            &:global(.uui-disabled) {
+                background-color: var(--uui-text_area-bg-disabled);
+                border-color: var(--uui-text_area-border-disabled);
+            }
+        }
+    }
+
+    &.mode-cell {
+        :global(.uui-input) {
+            background-color: transparent;
+            border-color: transparent;
+
+            &:global(.uui-readonly) {
+                background-color: transparent;
+                border-color: transparent;
+            }
+
+            &:global(.uui-disabled) {
+                background-color: transparent;
+                border-color: transparent;
+            }
+        }
+    }
+
+    &.mode-inline {
+        :global(.uui-input) {
+            @include control-inline-mode();
+            padding-left: 5px;
+            padding-right: 5px;
+
+            &:global(.uui-readonly) {
+                &:hover {
+                    border-color: transparent;
+                }
+
+                &:global(.uui-focus) {
+                    border-color: transparent;
+                    box-shadow: none;
+                }
+
+                &::placeholder {
+                    color: var(--uui-text_area-placeholder-readonly);
+                }
+            }
+
+            &:global(.uui-disabled) {
+                background-color: transparent;
+                color: var(--uui-text_area-text-disabled);
+                border-color: transparent;
+
+                &:hover, &:active, &:focus {
+                    background-color: transparent;
+                    color: var(--uui-text_area-text-disabled);
+                    border-color: transparent;
+                    box-shadow: none;
+                }
+
+                &::placeholder {
+                    color: var(--uui-text_area-placeholder-disabled);
+                }
+            }
+        }
+    }
+
+    //Sizes
+    &.size-24 {
+        min-width: 24px;
+        min-height: 24px;
+
+        :global(.uui-input) {
+            @include text-size(24px, 1px);
+        }
+    }
+
+    &.size-30 {
+        min-width: 30px;
+        min-height: 30px;
+
+        :global(.uui-input) {
+            @include text-size(30px, 1px);
+        }
+    }
+
+    &.size-36 {
+        min-width: 36px;
+        min-height: 36px;
+
+        :global(.uui-input) {
+            @include text-size(36px, 1px);
+        }
+    }
+
+    &.size-42 {
+        min-width: 42px;
+        min-height: 42px;
+
+        :global(.uui-input) {
+            @include text-size(42px, 1px);
+        }
+    }
+
+    &.size-48 {
+        min-width: 48px;
+        min-height: 48px;
+
+        :global(.uui-input) {
+            @include text-size(48px, 1px);
+        }
+    }
+}

package/components/inputs/TextArea.tsx

@@ -0,0 +1,47 @@
+import { devLogger, withMods } from '@epam/uui-core';
+import { TextArea as uuiTextArea, TextAreaProps as uuiTextAreaProps } from '@epam/uui-components';
+import * as types from '../types';
+import css from './TextArea.module.scss';
+
+const DEFAULT_SIZE = '36';
+const DEFAULT_MODE = types.EditMode.FORM;
+
+type TextAreaMods = types.IHasEditMode & {
+    /**
+     * Defines component size.
+     * @default '36'
+     * Size '48' is deprecated, and will be removed in future release
+     */
+    size?: types.ControlSize;
+};
+
+function applyTextAreaMods(mods: TextAreaMods) {
+    return [
+        css.root,
+        css['size-' + (mods.size || DEFAULT_SIZE)],
+        css['mode-' + (mods.mode || DEFAULT_MODE)],
+    ];
+}
+
+/** Represents the properties of a TextArea component. */
+export type TextAreaProps = uuiTextAreaProps & TextAreaMods;
+
+export const TextArea = withMods<uuiTextAreaProps, TextAreaMods>(
+    uuiTextArea,
+    applyTextAreaMods,
+    (props) => {
+        if (__DEV__) {
+            devLogger.warnAboutDeprecatedPropValue<TextAreaProps, 'size'>({
+                component: 'TextArea',
+                propName: 'size',
+                propValue: '48',
+                propValueUseInstead: '42',
+                condition: () => props.size === '48',
+            });
+        }
+        return {
+            autoSize: props.mode === types.EditMode.CELL ? true : props.autoSize,
+            maxLength: props.mode === types.EditMode.CELL ? undefined : props.maxLength,
+        };
+    },
+);

package/components/inputs/TextInput.module.scss

@@ -0,0 +1,199 @@
+@use  '../../assets/styles/index.scss' as *;
+
+.root {
+    --uui-text_input-bg: var(--uui-control-bg);
+    --uui-text_input-bg-disabled: var(--uui-control-bg-disabled);
+    --uui-text_input-bg-readonly: var(--uui-control-bg-disabled);
+    --uui-text_input-border: var(--uui-control-border);
+    --uui-text_input-border-hover: var(--uui-control-border-hover);
+    --uui-text_input-border-active: var(--uui-control-border-focus);
+    --uui-text_input-border-error: var(--uui-error-50);
+    --uui-text_input-border-disabled: var(--uui-control-border-disabled);
+    --uui-text_input-border-readonly: var(--uui-control-border-disabled);
+    --uui-text_input-placeholder: var(--uui-control-placeholder);
+    --uui-text_input-placeholder-disabled: var(--uui-control-placeholder-disabled);
+    --uui-text_input-placeholder-readonly: var(--uui-control-placeholder-disabled);
+    --uui-text_input-text: var(--uui-control-text);
+    --uui-text_input-text-disabled: var(--uui-control-text-disabled);
+    --uui-text_input-icon: var(--uui-control-icon);
+    --uui-text_input-icon-disabled: var(--uui-control-icon-disabled);
+    --uui-text_input-icon-clickable: var(--uui-icon);
+    --uui-text_input-icon-clickable-hover: var(--uui-icon-hover);
+
+    --uui-text_input-border-radius: var(--uui-border-radius);
+
+    --uui-text_input-font: var(--uui-font);
+    --uui-text_input-font-weight: 400;
+    //
+    fill: var(--uui-text_input-icon);
+    border-style: solid;
+    box-sizing: border-box;
+    padding-left: 5px;
+    padding-right: 5px;
+    border-radius: var(--uui-text_input-border-radius);
+
+    :global(.uui-input) {
+        color: var(--uui-text_input-text);
+        font-family: var(--uui-text_input-font);
+        font-weight: var(--uui-text_input-font-weight);
+        padding-left: 6px;
+        padding-right: 6px;
+
+        &::placeholder {
+            color: var(--uui-text_input-placeholder);
+        }
+
+        &:placeholder-shown {
+            text-overflow: ellipsis;
+        }
+
+        &::-moz-placeholder {
+            opacity: 1;
+        }
+    }
+
+    &.mode-form {
+        background-color: var(--uui-text_input-bg);
+        border-color: var(--uui-text_input-border);
+
+        :global(.-clickable) {
+            fill: var(--uui-text_input-icon-clickable);
+
+            &:hover {
+                fill: var(--uui-text_input-icon-clickable-hover);
+            }
+        }
+
+        &:hover {
+            border-color: var(--uui-text_input-border-hover);
+        }
+
+        &:global(.uui-focus) {
+            border-color: var(--uui-text_input-border-active);
+        }
+    }
+
+    &.mode-inline {
+        background-color: transparent;
+        border-color: transparent;
+
+        :global(.-clickable) {
+            fill: var(--uui-text_input-icon-clickable);
+
+            &:hover {
+                fill: var(--uui-text_input-icon-clickable-hover);
+            }
+        }
+
+        &:hover {
+            border-color: var(--uui-text_input-border-hover);
+        }
+
+        &:global(.uui-focus) {
+            border-color: var(--uui-text_input-border-active);
+        }
+    }
+
+    &.mode-cell {
+        background-color: transparent;
+        border-color: transparent;
+
+        :global(.-clickable) {
+            fill: transparent;
+        }
+
+        &:hover {
+            :global(.-clickable) {
+                fill: var(--uui-text_input-icon-clickable);
+
+                &:hover {
+                    fill: var(--uui-text_input-icon-clickable-hover);
+                }
+            }
+        }
+    }
+
+    &:global(.uui-invalid) {
+        &.mode-form {
+            background-color: var(--uui-text_input-bg);
+            border-color: var(--uui-text_input-border-error);
+        }
+    }
+
+    &:global(.uui-readonly) {
+        color: var(--uui-text_input-text);
+        fill: var(--uui-text_input-icon);
+        pointer-events: none;
+
+        :global(.uui-input) {
+            &::placeholder {
+                -webkit-text-fill-color: var(--uui-text_input-placeholder-readonly); // to avoid color inheritance from input component
+                color: var(--uui-text_input-placeholder-readonly);
+            }
+        }
+
+        &.mode-form {
+            background-color: var(--uui-text_input-bg-readonly);
+            border-color: var(--uui-text_input-border-readonly);
+        }
+    }
+
+    &:global(.uui-disabled) {
+        color: var(--uui-text_input-text-disabled);
+        fill: var(--uui-text_input-icon-disabled);
+        pointer-events: none;
+
+        :global(.uui-input) {
+            -webkit-text-fill-color: var(--uui-text_input-text-disabled); // safari bugfix, more: https://stackoverflow.com/questions/43483363/safari-color-with-background-transparency-on-disabled-input
+            color: var(--uui-text_input-text-disabled);
+
+            &::placeholder {
+                -webkit-text-fill-color: var(--uui-text_input-placeholder-disabled); // to avoid color inheritance from input component
+                color: var(--uui-text_input-placeholder-disabled);
+            }
+        }
+
+        &.mode-form {
+            background-color: var(--uui-text_input-bg-disabled);
+            border-color: var(--uui-text_input-border-disabled);
+        }
+    }
+
+    //Sizes
+    &.size-24 {
+        @include control-vertical-layout(24px, 1px);
+        min-width: 24px;
+    }
+
+    &.size-30 {
+        @include control-vertical-layout(30px, 1px);
+        min-width: 30px;
+    }
+
+    &.size-36 {
+        @include control-vertical-layout(36px, 1px);
+        min-width: 36px;
+    }
+
+    &.size-42 {
+        @include control-vertical-layout(42px, 1px);
+        min-width: 42px;
+    }
+
+    &.size-48 {
+        @include control-vertical-layout(48px, 1px);
+        min-width: 48px;
+    }
+
+    &.size-60 {
+        @include control-vertical-layout(60px, 1px);
+        min-width: 60px;
+        padding-left: 11px;
+        padding-right: 11px;
+
+        :global(.uui-input) {
+            padding-left: 6px;
+            padding-right: 0;
+        }
+    }
+}

package/components/inputs/TextInput.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { withMods, IEditableDebouncer, IEditableDebouncerOptions } from '@epam/uui-core';
+import { TextInput as uuiTextInput, TextInputProps as CoreTextInputProps } from '@epam/uui-components';
+import { IHasEditMode, EditMode, ControlSize } from '../types';
+import { systemIcons } from '../../icons/icons';
+import css from './TextInput.module.scss';
+
+const DEFAULT_SIZE = '36';
+const DEFAULT_MODE = EditMode.FORM;
+
+type TextInputMods = IHasEditMode & {
+    /**
+     * Defines component size.
+     * @default '36'
+     */
+    size?: ControlSize | '60';
+};
+
+function applyTextInputMods(mods: TextInputMods) {
+    return [
+        css.root,
+        css['size-' + (mods.size || DEFAULT_SIZE)],
+        css['mode-' + (mods.mode || DEFAULT_MODE)],
+    ];
+}
+
+/** Represents the properties for a TextInput component. */
+export interface TextInputProps extends CoreTextInputProps, TextInputMods {}
+
+/** Represents the properties for a SearchInput component. */
+export interface SearchInputProps extends TextInputProps, IEditableDebouncerOptions {}
+
+export const TextInput = withMods<CoreTextInputProps, TextInputMods>(uuiTextInput, applyTextInputMods, (props) => ({
+    acceptIcon: systemIcons[props.size || DEFAULT_SIZE].accept,
+    cancelIcon: systemIcons[props.size || DEFAULT_SIZE].clear,
+    dropdownIcon: systemIcons[props.size || DEFAULT_SIZE].foldingArrow,
+}));
+
+export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>((props, ref) => {
+    // analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
+    const { ...textInputProps } = props;
+    delete textInputProps.getValueChangeAnalyticsEvent;
+
+    return (
+        <IEditableDebouncer
+            { ...props }
+            render={ (iEditable) => (
+                <TextInput
+                    icon={ systemIcons[props.size || DEFAULT_SIZE].search }
+                    onCancel={ !!props.value && (() => iEditable.onValueChange('')) }
+                    type="search"
+                    inputMode="search"
+                    ref={ ref }
+                    { ...textInputProps }
+                    { ...iEditable }
+                />
+            ) }
+        />
+    );
+});

package/components/inputs/TimePicker.module.scss

@@ -0,0 +1,68 @@
+.root {
+    --uui-time_picker-text: var(--uui-control-text);
+    --uui-time_picker-icon-clickable: var(--uui-icon);
+    --uui-time_picker-icon-clickable-hover: var(--uui-icon-hover);
+
+    &:global(.uui-timepicker-container) {
+        display: flex;
+        padding: 15px 12px;
+        justify-content: center;
+
+        :global(.uui-timepicker-input) {
+            &:global(.uui-input-box) {
+                margin: 6px 0;
+                width: 36px;
+                height: 36px;
+            }
+
+            > input {
+                text-align: center;
+                font-size: 24px;
+                line-height: 24px;
+                color: var(--uui-time_picker-text);
+                font-family: var(--uui-font);
+                font-weight: 400;
+
+                &::placeholder,
+                &::-webkit-input-placeholder {
+                    color: var(--uui-time_picker-text);
+                    opacity: 1; /* for Firefox */
+                }
+            }
+        }
+
+        :global(.uui-timepicker-item) {
+            position: relative;
+            padding: 9px 24px;
+        }
+
+        :global(.uui-timepicker-item:first-child) {
+            &::after {
+                content: ':';
+                position: absolute;
+                top: 35px;
+                left: 81px;
+                color: var(--uui-time_picker-text);
+                font-size: 24px;
+                line-height: 30px;
+            }
+        }
+
+        :global(.uui-timepicker-icon-up), :global(.uui-timepicker-icon-down) {
+            align-items: center;
+            fill: var(--uui-time_picker-icon-clickable);
+
+            &:hover {
+                fill: var(--uui-time_picker-icon-clickable-hover);
+            }
+        }
+
+        :global(.uui-timepicker-icon-up) {
+            transform: rotate(180deg);
+        }
+    }
+}
+
+.timepicker-input {
+    width: 100%;
+}

package/components/inputs/TimePicker.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import { devLogger, DropdownBodyProps, IDropdownToggler, withMods } from '@epam/uui-core';
+import { BaseTimePickerProps, BaseTimePicker } from '@epam/uui-components';
+import { IHasEditMode, SizeMod, EditMode } from '../types';
+import { DropdownContainer } from '../overlays/DropdownContainer';
+import { TextInput } from './TextInput';
+import { TimePickerBody } from './TimePickerBody';
+import css from './TimePicker.module.scss';
+import customParseFormat from 'dayjs/plugin/customParseFormat.js';
+
+dayjs.extend(customParseFormat);
+
+const DEFAULT_MODE = EditMode.FORM;
+
+export interface TimePickerProps extends BaseTimePickerProps, SizeMod, IHasEditMode {
+    /**
+     * @default 5
+     */
+    minutesStep?: number;
+    /**
+     * @default 12
+     */
+    format?: 12 | 24;
+}
+
+class TimePickerComponent extends BaseTimePicker<TimePickerProps> {
+    renderInput = (props: IDropdownToggler) => {
+        if (__DEV__) {
+            if (this.props.size === '48') {
+                devLogger.warnAboutDeprecatedPropValue<TimePickerProps, 'size'>({
+                    component: 'TimePicker',
+                    propName: 'size',
+                    propValue: this.props.size,
+                    propValueUseInstead: '42',
+                    condition: () => ['48'].indexOf(this.props.size) !== -1,
+                });
+            }
+        }
+        return (
+            <TextInput
+                { ...props }
+                onClick={ null }
+                size={ this.props.size || '36' }
+                isDisabled={ this.props.isDisabled }
+                isReadonly={ this.props.isReadonly }
+                isInvalid={ this.props.isInvalid }
+                cx={ [css.root, css.timepickerInput, this.props.inputCx] }
+                value={ this.state.value }
+                onValueChange={ this.handleInputChange }
+                onCancel={ this.onClear }
+                onFocus={ this.handleFocus }
+                onBlur={ this.handleBlur }
+                isDropdown={ false }
+                placeholder={ this.props.placeholder ? this.props.placeholder : this.getFormat() }
+                mode={ this.props.mode || DEFAULT_MODE }
+                rawProps={ this.props.rawProps?.input }
+            />
+        );
+    };
+
+    renderBody = (props: DropdownBodyProps) => {
+        const { forwardedRef, ...timePickerBodyProps } = this.props;
+        return (
+            !this.props.isDisabled && !this.props.isReadonly && (
+                <DropdownContainer { ...props } focusLock={ false }>
+                    <TimePickerBody
+                        { ...timePickerBodyProps }
+                        value={ this.props.value !== null ? this.props.value : { hours: null, minutes: null } }
+                        rawProps={ this.props.rawProps?.body }
+                        cx={ this.props.bodyCx }
+                    />
+                </DropdownContainer>
+            )
+        );
+    };
+}
+
+export const TimePicker = withMods(TimePickerComponent);

package/components/inputs/TimePickerBody.tsx

@@ -0,0 +1,10 @@
+import { TimePickerBody as uuiTimePickerBody, TimePickerBodyProps } from '@epam/uui-components';
+import { withMods } from '@epam/uui-core';
+import css from './TimePicker.module.scss';
+import { ReactComponent as ArrowIcon } from './../../icons/folding-arrow-18.svg';
+
+export const TimePickerBody = withMods<TimePickerBodyProps>(
+    uuiTimePickerBody,
+    () => [css.root],
+    () => ({ addIcon: ArrowIcon, subtractIcon: ArrowIcon }),
+);

package/components/inputs/__tests__/Checkbox.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Checkbox } from '../Checkbox';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('Checkbox', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<Checkbox value={ null } onValueChange={ jest.fn } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<Checkbox value={ null } onValueChange={ jest.fn } size="18" mode="cell" />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});