@epam/uui 5.3.0-rc.0 → 5.3.0

package/components/inputs/Switch.module.scss

@@ -0,0 +1,172 @@
+@use  '../../assets/styles/effects' as *;
+
+@mixin control-switch-size($size) {
+    :global(.uui-switch-body) {
+        height: $size;
+        width: $size * 2;
+    }
+
+    :global(.uui-switch-toggler) {
+        height: $size;
+        width: $size;
+    }
+
+    :global(.uui-input-label) {
+        @if ($size == 12px) {
+            font-size: 12px;
+            letter-spacing: 0.2px;
+        } @else if ($size == 18px or $size == 24px) {
+            font-size: 14px;
+            letter-spacing: 0.1px;
+        }
+    }
+
+    :global(.uui-checked) {
+        :global(.uui-switch-toggler) {
+            transform: translateX($size);
+        }
+    }
+}
+
+.root {
+    --uui-switch-bg: var(--uui-neutral-40);
+    --uui-switch-bg-checked: var(--uui-color-50);
+    --uui-switch-bg-hover: var(--uui-control-bg-hover);
+    --uui-switch-bg-checked-hover: var(--uui-color-60);
+    --uui-switch-bg-checked-disabled: var(--uui-color-20);
+    --uui-switch-bg-disabled: var(--uui-control-bg-disabled);
+    --uui-switch-border: var(--uui-control-border);
+    --uui-switch-border-hover: var(--uui-control-bg-hover);
+    --uui-switch-border-checked: var(--uui-color-50);
+    --uui-switch-border-checked-hover: var(--uui-color-60);
+    --uui-switch-border-checked-disabled: var(--uui-color-20);
+    --uui-switch-border-disabled: var(--uui-control-border-disabled);
+    --uui-switch-toggler-bg: var(--uui-neutral-0);
+    --uui-switch-toggler-bg-disabled: var(--uui-control-bg-disabled);
+    --uui-switch-toggler-border-checked: var(--uui-color-50);
+    --uui-switch-toggler-border-hover: var(--uui-control-bg-hover);
+    --uui-switch-toggler-border-disabled: var(--uui-control-border-disabled);
+    --uui-switch-toggler-border-checked-hover: var(--uui-color-60);
+    --uui-switch-toggler-border-checked-disabled: var(--uui-color-20);
+    --uui-switch-label: var(--uui-text-primary);
+    --uui-switch-label-disabled: var(--uui-text-disabled);
+
+    --uui-switch-font: var(--uui-font);
+    --uui-switch-font-weight: 400;
+    //
+    //Sizes
+    &.size-12 {
+        @include control-switch-size(12px);
+    }
+
+    &.size-18 {
+        @include control-switch-size(18px);
+    }
+
+    &.size-24 {
+        @include control-switch-size(24px);
+    }
+
+    :global(.uui-switch-body) {
+        background-color: var(--uui-switch-bg);
+        border: 1px solid var(--uui-switch-border);
+        width: 36px;
+        border-radius: 18px;
+        box-sizing: border-box;
+
+        :global(input[type='checkbox']):focus-visible {
+            @include focus-visible-effect(2px, inherit);
+            width: inherit;
+            height: inherit;
+            position: absolute;
+            left: 0;
+        }
+    }
+
+    :global(.uui-switch-toggler) {
+        left: -1px;
+        border-radius: 50%;
+        box-sizing: border-box;
+        background-color: var(--uui-switch-toggler-bg);
+        border: 1px solid var(--uui-switch-border);
+        transition: 0.1s transform cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    :global(.uui-input-label) {
+        font-family: var(--uui-switch-font);
+        font-weight: var(--uui-switch-font-weight, normal);
+        color: var(--uui-switch-label);
+        margin-left: 11px;
+    }
+
+    //Colors
+    &:hover, &:focus-within {
+        :global(.uui-switch-body) {
+            background-color: var(--uui-switch-bg-hover);
+            border-color: var(--uui-switch-border-hover);
+        }
+
+        :global(.uui-switch-toggler) {
+            border-color: var(--uui-switch-toggler-border-hover);
+        }
+
+        :global(.uui-checked) {
+            &:global(.uui-switch-body) {
+                background-color: var(--uui-switch-bg-checked-hover);
+                border-color: var(--uui-switch-border-checked-hover);
+            }
+
+            :global(.uui-switch-toggler) {
+                border-color: var(--uui-switch-toggler-border-checked-hover);
+            }
+        }
+    }
+
+    :global(.uui-checked) {
+        &:global(.uui-switch-body) {
+            background-color: var(--uui-switch-bg-checked);
+            border: 1px solid var(--uui-switch-border-checked);
+        }
+
+        :global(.uui-switch-toggler) {
+            border: 1px solid var(--uui-switch-toggler-border-checked);
+        }
+    }
+
+    &:global(.uui-disabled) {
+        :global(.uui-input-label) {
+            color: var(--uui-switch-label-disabled);
+        }
+
+        &,
+        :global(.uui-switch-toggler),
+        :global(.uui-switch-body),
+        :global(.uui-input-label) {
+            cursor: default;
+        }
+
+        :global(.uui-switch-body) {
+            background-color: var(--uui-switch-bg-disabled);
+            border: 1px solid var(--uui-switch-border-disabled);
+        }
+
+        & :global(.uui-switch-toggler),
+        &:hover :global(.uui-switch-toggler),
+        &:focus-within :global(.uui-switch-toggler) {
+            background-color: var(--uui-switch-toggler-bg-disabled);
+            border-color: var(--uui-switch-toggler-border-disabled);
+        }
+
+        :global(.uui-checked) {
+            &:global(.uui-switch-body) {
+                background-color: var(--uui-switch-bg-checked-disabled);
+                border: 1px solid var(--uui-switch-border-checked-disabled);
+            }
+
+            :global(.uui-switch-toggler) {
+                background-color: var(--uui-switch-toggler-bg-disabled);
+                border-color: var(--uui-switch-toggler-border-checked-disabled);
+            }
+        }
+    }
+}

package/components/inputs/Switch.tsx

@@ -0,0 +1,17 @@
+import { withMods } from '@epam/uui-core';
+import * as uuiComponents from '@epam/uui-components';
+import css from './Switch.module.scss';
+
+export interface SwitchMods {
+    size?: '12' | '18' | '24';
+}
+
+export type SwitchProps = uuiComponents.SwitchProps & SwitchMods;
+
+export function applySwitchMods(mods: SwitchProps) {
+    return [
+        css.root, css['size-' + (mods.size || '18')], 'uui-color-primary',
+    ];
+}
+
+export const Switch = withMods<uuiComponents.SwitchProps, SwitchMods>(uuiComponents.Switch, applySwitchMods);

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,24 @@
+import { 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 defaultSize = '36';
+const defaultMode = types.EditMode.FORM;
+
+export interface TextAreaMods extends types.IHasEditMode {
+    size?: types.ControlSize;
+}
+
+export function applyTextAreaMods(mods: TextAreaMods) {
+    return [
+        css.root, css['size-' + (mods.size || defaultSize)], css['mode-' + (mods.mode || defaultMode)],
+    ];
+}
+
+export type TextAreaProps = UuiTextAreaProps & TextAreaMods;
+
+export const TextArea = withMods<UuiTextAreaProps, TextAreaMods>(uuiTextArea, applyTextAreaMods, (props) => ({
+    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,187 @@
+@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;
+    }
+}

package/components/inputs/TextInput.tsx

@@ -0,0 +1,59 @@
+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 defaultSize = '36';
+const defaultMode = EditMode.FORM;
+
+export interface TextInputMods extends IHasEditMode {
+    size?: ControlSize;
+}
+
+export function applyTextInputMods(mods: TextInputMods) {
+    return [
+        css.root,
+        css['size-' + (mods.size || defaultSize)],
+        css['mode-' + (mods.mode || defaultMode)],
+    ];
+}
+
+export interface TextInputProps extends CoreTextInputProps, TextInputMods {}
+export interface SearchInputProps extends TextInputProps, IEditableDebouncerOptions {}
+
+export const TextInput = withMods<CoreTextInputProps, TextInputMods>(uuiTextInput, applyTextInputMods, (props) => ({
+    acceptIcon: systemIcons[props.size || defaultSize].accept,
+    cancelIcon: systemIcons[props.size || defaultSize].clear,
+    dropdownIcon: systemIcons[props.size || defaultSize].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 || defaultSize].search }
+                    onCancel={ !!props.value
+                        // In a lot of places, it is required to check if a clicked element is a part of some other element.
+                        // Usually, those are global click event handlers. To allow that logic to work correctly, it is necessary
+                        // to execute the `disappearing` of the cross (setState execution) after the event will pass through all the handlers.
+                        // Related issue: https://github.com/epam/UUI/issues/1045.
+                        ? (() => setTimeout(() => iEditable.onValueChange(''), 0))
+                        : undefined }
+                    type="search"
+                    inputMode="search"
+                    ref={ ref }
+                    { ...textInputProps }
+                    { ...iEditable }
+                />
+            ) }
+        />
+    );
+});