@epam/uui 5.3.0-rc.0 → 5.3.0

package/components/inputs/Checkbox.tsx

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+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);