@epam/uui 5.3.0 → 5.4.0

package/components/inputs/Checkbox.tsx

@@ -1,30 +0,0 @@
-import { withMods } from '@epam/uui-core';
-import * as uuiComponents from '@epam/uui-components';
-import { ReactComponent as Check_12 } from '../../icons/check-12.svg';
-import { ReactComponent as Check_18 } from '../../icons/check-18.svg';
-import { ReactComponent as PartlySelect_12 } from '../../icons/partly-select-12.svg';
-import { ReactComponent as PartlySelect_18 } from '../../icons/partly-select-18.svg';
-import css from './Checkbox.module.scss';
-
-export interface CheckboxMods {
-    size?: '12' | '18';
-    mode?: 'form' | 'cell';
-}
-
-export type CheckboxProps = CheckboxMods & uuiComponents.CheckboxProps;
-
-export function applyCheckboxMods(mods: CheckboxMods) {
-    return [
-        css.root,
-        css['size-' + (mods.size || '18')],
-        css['mode-' + (mods.mode || 'form')],
-        'uui-color-primary',
-    ];
-}
-
-const applyUUICheckboxProps = (props: CheckboxMods) => ({
-    icon: props.size === '12' ? Check_12 : Check_18,
-    indeterminateIcon: props.size === '12' ? PartlySelect_12 : PartlySelect_18,
-});
-
-export const Checkbox = withMods<uuiComponents.CheckboxProps, CheckboxMods>(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);

package/components/inputs/InputAddon.module.scss

@@ -1,11 +0,0 @@
-@use '~@epam/assets/scss/index' as *;
-
-.root {
-    color: var(--uui-text-tertiary);
-    background-color: var(--uui-surface-sunken);
-    font-size: 14px;
-    font-family: var(--uui-font);
-    font-weight: 400;
-    border: 1px solid var(--uui-control-border);
-    padding: 6px;
-}

package/components/inputs/InputAddon.tsx

@@ -1,11 +0,0 @@
-import { withMods } from '@epam/uui-core';
-import { InputAddon as uuiInputAddon, InputAddonProps as UuiInputAddonProps } from '@epam/uui-components';
-import css from './InputAddon.module.scss';
-
-export function applyInputAddonMods() {
-    return [
-        css.root,
-    ];
-}
-
-export const InputAddon = withMods<UuiInputAddonProps>(uuiInputAddon, applyInputAddonMods);

package/components/inputs/MultiSwitch.tsx

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import { IEditable, IHasRawProps } from '@epam/uui-core';
-import { ButtonProps } from '@epam/uui-components';
-import { ControlGroup } from '../layout/ControlGroup';
-import { Button, ButtonMods } from '../buttons';
-import { SizeMod } from '../types';
-
-interface MultiSwitchItem<TValue> extends ButtonProps, ButtonMods {
-    id: TValue;
-}
-
-export type UuiMultiSwitchColor = 'primary' | 'secondary';
-
-export interface MultiSwitchProps<TValue> extends IEditable<TValue>, SizeMod, IHasRawProps<React.HTMLAttributes<HTMLDivElement>> {
-    items: MultiSwitchItem<TValue>[];
-    color?: UuiMultiSwitchColor;
-}
-
-function MultiSwitchComponent<TValue>(props: MultiSwitchProps<TValue>, ref: React.ForwardedRef<HTMLDivElement>) {
-    return (
-        <ControlGroup ref={ ref } rawProps={ { ...props.rawProps, role: 'tablist' } }>
-            {props.items.map((item, index) => (
-                <Button
-                    { ...props }
-                    { ...item }
-                    isDisabled={ props.isDisabled }
-                    key={ index + '-' + item.id }
-                    onClick={ () => props.onValueChange(item.id) }
-                    fill={ props.value === item.id ? 'solid' : 'outline' }
-                    color={ props.color }
-                    size={ props.size }
-                    rawProps={ { 'aria-current': props.value === item.id, role: 'tab' } }
-                />
-            ))}
-        </ControlGroup>
-    );
-}
-
-export const MultiSwitch = React.forwardRef(MultiSwitchComponent);

package/components/inputs/NumericInput.module.scss

@@ -1,97 +0,0 @@
-@use  '../../assets/styles/index.scss' as *;
-
-.root {
-    --uui-numeric_input-icon-clickable: var(--uui-icon);
-    --uui-numeric_input-icon-clickable-hover: var(--uui-icon-hover);
-
-    //
-    &:global(.uui-input-box) {
-        padding-right: 0;
-        min-width: 40px;
-
-        &:global(.uui-numeric-input-without-arrows) {
-            padding-right: 5px;
-        }
-
-        :global(.uui-numeric-input-up-button) {
-            transform: rotate(180deg);
-
-            &:hover {
-                svg {
-                    fill: var(--uui-numeric_input-icon-clickable-hover);
-                }
-            }
-        }
-
-        :global(.uui-numeric-input-down-button) {
-            &:hover {
-                svg {
-                    fill: var(--uui-numeric_input-icon-clickable-hover);
-                }
-            }
-        }
-
-        :global(.uui-input.uui-value-in-placeholder) {
-            &::placeholder {
-                color: inherit;
-            }
-        }
-
-        :global(.uui-icon) svg {
-            margin-top: -2px;
-        }
-
-        &.size-24 {
-            :global(.uui-numeric-input-button-group) {
-                > * {
-                    height: 12px;
-                }
-            }
-        }
-
-        &.size-30 {
-            :global(.uui-numeric-input-button-group) {
-                > * {
-                    height: 15px;
-                }
-            }
-        }
-
-        &.size-36 {
-            :global(.uui-numeric-input-button-group) {
-                > * {
-                    height: 17px;
-                }
-            }
-        }
-
-        &.size-42 {
-            :global(.uui-numeric-input-button-group) {
-                > * {
-                    height: 21px;
-                }
-            }
-        }
-
-        &.size-48 {
-            :global(.uui-numeric-input-button-group) {
-                > * {
-                    height: 23px;
-                }
-            }
-        }
-    }
-
-    &:global(.uui-disabled) {
-        :global(.uui-numeric-input-button-group) {
-            > *:hover, > *:focus {
-                cursor: default;
-                background-color: transparent;
-            }
-        }
-    }
-
-    &:global(.uui-readonly) {
-        @include readonly-input();
-    }
-}

package/components/inputs/NumericInput.tsx

@@ -1,27 +0,0 @@
-import * as types from '../types';
-import { withMods } from '@epam/uui-core';
-import { NumericInput as uuiNumericInput, NumericInputProps as uuiNumericInputProps } from '@epam/uui-components';
-import { EditMode, IHasEditMode } from '../types';
-import { systemIcons } from '../../icons/icons';
-import textInputCss from './TextInput.module.scss';
-import css from './NumericInput.module.scss';
-
-const defaultSize = '36';
-const defaultMode = EditMode.FORM;
-
-export interface NumericInputMods extends types.SizeMod, IHasEditMode {}
-
-export function applyNumericInputMods(mods: NumericInputMods) {
-    return [
-        textInputCss.root, css.root, css['size-' + (mods.size || defaultSize)], textInputCss['size-' + (mods.size || defaultSize)], textInputCss['mode-' + (mods.mode || defaultMode)],
-    ];
-}
-
-export type NumericInputProps = uuiNumericInputProps & NumericInputMods;
-
-export const NumericInput = withMods<uuiNumericInputProps, NumericInputMods>(uuiNumericInput, applyNumericInputMods, (props) => ({
-    upIcon: systemIcons[props.size || defaultSize].foldingArrow,
-    downIcon: systemIcons[props.size || defaultSize].foldingArrow,
-    align: props.align ?? (props.mode === 'cell' ? 'right' : 'left'),
-    disableArrows: props.disableArrows ?? props.mode === 'cell',
-}));

package/components/inputs/RadioInput.module.scss

@@ -1,200 +0,0 @@
-@use 'sass:math';
-@use '../../assets/styles/index.scss' as *;
-
-
-@mixin radio-sizes($size, $font-size, $bullet-size, $line-height) {
-    $vpadding: math.div(($line-height - $size), 2);
-
-    :global(.uui-radioinput) {
-        width: $size;
-        height: $size;
-        border-radius: math.div($size, 2);
-        margin: $vpadding 0;
-    }
-
-    :global(.uui-icon) {
-        margin: $vpadding 0;
-
-        svg {
-            height: $bullet-size;
-            width: $bullet-size;
-        }
-    }
-
-    :global(.uui-input-label) {
-        font-size: $font-size;
-        line-height: $line-height;
-    }
-}
-
-.root {
-    --uui-radio_input-bg: var(--uui-control-bg);
-    --uui-radio_input-bg-disabled: var(--uui-control-bg-disabled);
-    --uui-radio_input-border: var(--uui-control-border);
-    --uui-radio_input-border-hover: var(--uui-color-60);
-    --uui-radio_input-border-checked: var(--uui-color-50);
-    --uui-radio_input-border-checked-disabled: var(--uui-color-20);
-    --uui-radio_input-border-disabled: var(--uui-control-border-disabled);
-    --uui-radio_input-label: var(--uui-text-primary);
-    --uui-radio_input-label-disabled: var(--uui-text-disabled);
-    --uui-radio_input-fill-hover: var(--uui-color-60);
-    --uui-radio_input-fill-checked: var(--uui-color-50);
-    --uui-radio_input-fill-checked-disabled: var(--uui-color-20);
-    --uui-radio_input-error: var(--uui-error-50);
-
-    --uui-radio_input-font: var(--uui-font);
-    --uui-radio_input-font-weight: 400;
-    //
-    &:hover, &:focus-within {
-        :global(.uui-radioinput) {
-            border-color: var(--uui-radio_input-border-hover);
-
-            &:global(.uui-checked) {
-                border-color: var(--uui-radio_input-border-hover);
-
-                :global(.uui-icon) {
-                    fill: var(--uui-radio_input-fill-hover);
-                }
-            }
-        }
-
-        &:global(.uui-disabled),
-        &:global(.uui-readonly) {
-            :global(.uui-radioinput) {
-                background-color: var(--uui-radio_input-bg-disabled);
-                border-color: var(--uui-radio_input-border-disabled);
-
-                :global(.uui-icon) {
-                    fill: var(--uui-radio_input-fill-checked-disabled);
-                }
-            }
-        }
-    }
-
-    :global(.uui-radioinput) {
-        background-color: var(--uui-radio_input-bg);
-        border: 1px solid var(--uui-radio_input-border);
-        align-self: baseline;
-        flex-shrink: 0;
-        box-sizing: border-box;
-
-        :global(input[type='radio']):focus-visible {
-            @include focus-visible-effect(2px, inherit);
-            width: inherit;
-            height: inherit;
-            position: absolute;
-        }
-
-        &:global(.uui-checked) {
-            border-color: var(--uui-radio_input-border-checked);
-
-            :global(.uui-icon) {
-                fill: var(--uui-radio_input-fill-checked);
-            }
-        }
-    }
-
-    :global(.uui-input-label) {
-        //@include typography-inline(); TODO: ???
-        color: var(--uui-radio_input-label);
-        flex-grow: 1;
-        font-family: var(--uui-radio_input-font);
-        font-weight: var(--uui-radio_input-font-weight);
-        margin-left: 12px;
-        display: flex;
-        align-items: center;
-    }
-
-    &:global(.uui-invalid) {
-        :global(.uui-icon) {
-            fill: var(--uui-radio_input-error);
-        }
-
-        :global(.uui-input-label) {
-            color: var(--uui-radio_input-error);
-        }
-
-        :global(.uui-radioinput) {
-            border-color: var(--uui-radio_input-error);
-        }
-
-        :global(.uui-checked) {
-            &:global(.uui-radioinput) {
-                :global(.uui-icon) {
-                    fill: var(--uui-radio_input-error);
-                }
-            }
-        }
-
-        &:hover, &:focus-within {
-            :global(.uui-radioinput) {
-                border-color: var(--uui-radio_input-error);
-            }
-
-            :global(.uui-icon) {
-                fill: var(--uui-radio_input-error);
-            }
-        }
-    }
-
-    &:global(.uui-disabled),
-    &:global(.uui-readonly) {
-        cursor: default;
-
-        :global(.uui-radioinput) {
-            cursor: default;
-            background-color: var(--uui-radio_input-bg-disabled);
-            border-color: var(--uui-radio_input-border-disabled);
-
-            :global(.uui-icon) {
-                fill: var(--uui-radio_input-fill-checked-disabled);
-            }
-
-
-            &:global(.uui-checked) {
-                border-color: var(--uui-radio_input-border-checked-disabled);
-
-                :global(.uui-icon) {
-                    fill: var(--uui-radio_input-fill-checked-disabled);
-                }
-            }
-        }
-
-        &:global(.uui-invalid) {
-            :global(.uui-radioinput) {
-                cursor: default;
-                background-color: var(--uui-radio_input-bg-disabled);
-                border-color: var(--uui-radio_input-border-disabled);
-
-                :global(.uui-icon) {
-                    fill: var(--uui-radio_input-fill-checked-disabled);
-                }
-            }
-        }
-    }
-
-    &:global(.uui-readonly) {
-        :global(.uui-input-label) {
-            color: var(--uui-radio_input-label);
-        }
-    }
-
-    &:global(.uui-disabled) {
-        :global(.uui-input-label) {
-            color: var(--uui-radio_input-label-disabled);
-        }
-    }
-
-    //Sizes
-    &.size-18 {
-        @include radio-sizes(18px, 14px, 18px, 18px);
-    }
-
-    &.size-12 {
-        @include radio-sizes(12px, 12px, 12px, 14px);
-
-        :global(.uui-input-label) {
-            margin-left: 6px;
-        }
-    }
-}

package/components/inputs/RadioInput.tsx

@@ -1,16 +0,0 @@
-import { withMods } from '@epam/uui-core';
-import { RadioInput as uuiRadioInput, RadioInputProps as UuiRadioInputProps } from '@epam/uui-components';
-import css from './RadioInput.module.scss';
-import { ReactComponent as RadioPoint } from '../../icons/radio-point.svg';
-
-export interface RadioInputMods {
-    size?: '12' | '18';
-}
-
-export type RadioInputProps = RadioInputMods & UuiRadioInputProps;
-
-function applyRadioInputMods(mods: RadioInputProps) {
-    return [css.root, css['size-' + (mods.size || '18')], 'uui-color-primary'];
-}
-
-export const RadioInput = withMods<UuiRadioInputProps, RadioInputMods>(uuiRadioInput, applyRadioInputMods, () => ({ icon: RadioPoint }));

package/components/inputs/Slider.module.scss

@@ -1,130 +0,0 @@
-.root {
-    --uui-slider-tooltip-bg: var(--uui-color-70);
-    --uui-slider-tooltip-bg-hover: var(--uui-primary-20);
-    --uui-slider-line-bg: var(--uui-neutral-30);
-    --uui-slider-line-filled-bg: var(--uui-primary-50);
-    --uui-slider-line-active-bg: var(--uui-primary-50);
-    --uui-slider-dot-bg: var(--uui-surface-main);
-    --uui-slider-dot-bg-hover: var(--uui-primary-20);
-    --uui-slider-handle-bg: var(--uui-primary-50);
-    --uui-slider-shadow: var(--uui-shadow-level-1);
-    --uui-slider-scale-text: var(--uui-text-primary);
-
-    --uui-slider-font: var(--uui-font);
-    --uui-slider-font-weight: 400;
-
-    :global(.uui-tooltip-body) {
-        background-color: var(--uui-slider-tooltip-bg);
-        padding: 0 10px;
-        color: white;
-        line-height: 24px;
-        font-size: 14px;
-        font-family: var(--uui-slider-font);
-        font-weight: var(--uui-slider-font-weight);
-        box-shadow: var(--uui-slider-shadow);
-    }
-
-    :global(.uui-tooltip-arrow) {
-        border: 5px solid transparent;
-    }
-
-    :global(.uui-slider-scale-number) {
-        font-size: 11px;
-        font-family: var(--uui-slider-font);
-        font-weight: var(--uui-slider-font-weight);
-        color: var(--uui-slider-scale-text);
-        margin-top: 10px;
-    }
-
-    :global(.uui-slider-scale-dot) {
-        width: 7px;
-        height: 7px;
-        border-radius: 50%;
-        top: -1px;
-    }
-
-    &:global(.uui-slider-container) {
-        height: 12px;
-
-        :global(.uui-slider) {
-            margin: 0 6px 0 6px;
-            width: 100%;
-            height: 3px;
-            border-radius: 10px;
-            background: var(--uui-slider-line-bg);
-            min-width: 100px;
-        }
-
-        :global(.uui-slider-scale) {
-            height: 6px;
-        }
-
-        :global(.uui-slider-handle) {
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background-color: var(--uui-slider-handle-bg);
-            cursor: pointer;
-        }
-
-        :global(.uui-slider-filled) {
-            margin: 0 6px;
-            height: 3px;
-            border-radius: 10px;
-            background-color: var(--uui-slider-line-filled-bg);
-        }
-
-        :global(.uui-slider-scale-dot) {
-            background-color: var(--uui-slider-dot-bg);
-            border: 1px var(--uui-neutral-30) solid;
-        }
-
-        &:hover {
-            :global(.uui-slider) {
-                background-color: var(--uui-slider-tooltip-bg-hover);
-            }
-
-            :global(.uui-slider-scale-dot):not(:global(.uui-slider-scale-filled-dot)) {
-                border-color: var(--uui-slider-dot-bg-hover);
-                background-color: var(--uui-slider-dot-bg-hover);
-            }
-        }
-
-        :global(.uui-slider-scale-filled-dot) {
-            background-color: var(--uui-primary-50);
-            border-color: var(--uui-slider-line-active-bg);
-        }
-
-        &:global(.uui-active) {
-            :global(.uui-slider) {
-                background-color: var(--uui-slider-line-active-bg);
-            }
-
-            :global(.uui-slider-scale-dot):not(:global(.uui-slider-scale-filled-dot)) {
-                border-color: var(--uui-slider-line-active-bg);
-                background-color: var(--uui-slider-line-active-bg);
-            }
-        }
-
-        &:global(.uui-disabled) {
-            pointer-events: none;
-
-            :global(.uui-slider-filled) {
-                background-color: var(--uui-control-bg-disabled);
-            }
-
-            :global(.uui-slider-handle) {
-                background-color: var(--uui-control-bg-disabled);
-            }
-
-            :global(.uui-slider) {
-                background-color: var(--uui-control-bg-disabled);
-            }
-
-            :global(.uui-slider-scale-filled-dot) {
-                background-color: var(--uui-control-bg-disabled);
-                border-color: var(--uui-control-bg-disabled);
-            }
-        }
-    }
-}

package/components/inputs/Slider.tsx

@@ -1,11 +0,0 @@
-import { Slider as UuiSlider, SliderBaseProps } from '@epam/uui-components';
-import css from './Slider.module.scss';
-import { withMods } from '@epam/uui-core';
-
-export interface SliderMods {}
-
-export function applySliderMods() {
-    return [css.root, 'uui-color-neutral'];
-}
-
-export const Slider = withMods<SliderBaseProps<number>, SliderMods>(UuiSlider, applySliderMods);