@epam/uui 5.3.0 → 5.4.0

package/components/inputs/Switch.module.scss

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

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

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

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

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

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