@epam/uui 5.3.0 → 5.4.0

package/build/assets/styles/buttonLayout.scss

@@ -1,67 +0,0 @@
-@use './text-size' as *;
-
-@mixin button-layout($size, $borderWidth) {
-    @include button-horizontal-layout($size, $borderWidth);
-    @include button-vertical-layout($size, $borderWidth);
-}
-
-@mixin link-button-layout($size) {
-    @include link-button-horizontal-layout($size);
-    @include button-vertical-layout($size, 0);
-}
-
-@mixin button-vertical-layout($size, $borderWidth) {
-    &:global(.uui-button-box) {
-        min-height: $size;
-        border-width: $borderWidth;
-    }
-
-    :global(.uui-caption) {
-        @include text-size($size, $borderWidth);
-
-        @if ($size == 42px or $size == 48px) {
-            font-size: 16px;
-        }
-    }
-}
-
-@mixin button-horizontal-layout($size, $borderWidth) {
-    min-width: $size;
-
-    @if ($size == 18px) {
-        @include button-padding(3px, 3px, $borderWidth);
-    } @else if ($size == 24px) {
-        @include button-padding(6px, 6px, $borderWidth);
-    } @else if ($size == 30px) {
-        @include button-padding(6px, 6px, $borderWidth);
-    } @else if ($size == 36px) {
-        @include button-padding(6px, 6px, $borderWidth);
-    } @else if ($size == 42px) {
-        @include button-padding(12px, 6px, $borderWidth);
-    } @else if ($size == 48px) {
-        @include button-padding(12px, 6px, $borderWidth);
-    } @else {
-        @include button-padding(6px, 6px, $borderWidth); }
-}
-
-@mixin button-padding($controlPadding, $captionPadding, $borderWidth) {
-    padding-left: $controlPadding - $borderWidth;
-    padding-right: $controlPadding - $borderWidth;
-
-    :global(.uui-caption) {
-        padding-left: $captionPadding;
-        padding-right: $captionPadding;
-    }
-}
-
-@mixin link-button-horizontal-layout($size) {
-    min-width: $size;
-
-    &:global(.uui-has-left-icon) :global(.uui-caption) {
-        padding-left: 6px;
-    }
-
-    &:global(.uui-has-right-icon) :global(.uui-caption) {
-        padding-right: 6px;
-    }
-}

package/build/assets/styles/controlLayout.scss

@@ -1,28 +0,0 @@
-@use 'text-size' as *;
-
-@mixin control-vertical-layout($size, $borderWidth) {
-    :global(.uui-caption), :global(.uui-input) {
-        @include text-size($size, $borderWidth);
-    }
-
-    &:global(.uui-button-box), &:global(.uui-input-box) {
-        min-height: $size;
-        border-width: $borderWidth;
-    }
-}
-
-@mixin control-box-layout($size, $borderWidth) {
-    min-width: $size;
-    padding-left: 5px;
-    padding-right: 5px;
-
-    :global(.uui-caption), :global(.uui-input) {
-        padding-left: 6px;
-        padding-right: 6px;
-    }
-
-    &:global(.uui-button-box), &:global(.uui-input-box) {
-        min-height: $size;
-        border-width: $borderWidth;
-    }
-}

package/build/assets/styles/dnd.scss

@@ -1,9 +0,0 @@
-@mixin dnd-cursor-style {
-    &:hover {
-        cursor: grab;
-    }
-
-    &:active {
-        cursor: grabbing;
-    }
-}

package/build/assets/styles/effects.scss

@@ -1,7 +0,0 @@
-@mixin dnd-ghost-shadow() { box-shadow: 0 6px 18px 0 rgba(29, 30, 38, 0.05), 0 3px 12px 0 rgba(29, 30, 38, 0.05); }
-
-@mixin focus-visible-effect($offset: 2px, $radius: 2px) {
-    outline: 2px solid var(--uui-outline-focus);
-    outline-offset: $offset;
-    border-radius: $radius;
-}

package/build/assets/styles/icons.scss

@@ -1,19 +0,0 @@
-@use 'sass:math';
-
-@mixin icon-layout($size) {
-    :global(.uui-icon) {
-        svg {
-            height: math.div($size, 36) * 24;
-            max-width: math.div($size, 36) * 24;
-        }
-    }
-}
-
-@mixin icon-size($size) {
-    :global(.uui-icon) {
-        svg {
-            height: $size;
-            max-width: $size;
-        }
-    }
-}

package/build/assets/styles/index.scss

@@ -1,8 +0,0 @@
-@forward 'buttonLayout';
-@forward 'controlLayout';
-@forward 'effects';
-@forward 'icons';
-@forward 'inputs';
-@forward 'text-size';
-@forward 'typography';
-@forward 'dnd';

package/build/assets/styles/inputs.scss

@@ -1,74 +0,0 @@
-@mixin disabled-input() {
-    &.mode-form {
-        @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
-        cursor: default;
-        pointer-events: none;
-
-        &:hover, &:active, &:focus {
-            @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
-            box-shadow: none;
-        }
-    }
-
-    &.mode-cell {
-        @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
-        cursor: default;
-        pointer-events: none;
-
-        &:hover, &:active, &:focus {
-            @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
-            box-shadow: none;
-        }
-    }
-}
-
-@mixin readonly-input() {
-    &.mode-form {
-        background-color: var(--uui-control-bg-disabled);
-        border-color: var(--uui-control-border-disabled);
-        pointer-events: none;
-
-        &:hover {
-            border-color: var(--uui-control-border-disabled);
-        }
-
-        :global(.uui-input) {
-            &::placeholder {
-                color: var(--uui-control-placeholder-disabled);
-            }
-        }
-    }
-
-    &.mode-cell {
-        background-color: transparent;
-        border-color: transparent;
-        pointer-events: none;
-
-        &:hover {
-            background-color: transparent;
-            border-color: transparent;
-        }
-
-        :global(.uui-input) {
-            &::placeholder {
-                color: var(--uui-control-placeholder-disabled);
-            }
-        }
-    }
-}
-
-@mixin input-colors($bg, $color, $border, $placeholder) {
-    background-color: $bg;
-    color: $color;
-    fill: $color;
-    border-color: $border;
-
-    // override more selective selector on input tag in browsers stylesheets
-    :global(.uui-input) {
-        color: $color;
-
-        &::placeholder {
-            color: $placeholder;
-        }
-    }
-}

package/build/assets/styles/text-size.scss

@@ -1,37 +0,0 @@
-@function vpadding($size, $border-width) {
-    @if ($size == 18px or $size == 24px) {
-        @return (3px - $border-width);
-    } @else if ($size == 30px) {
-        @return (6px - $border-width);
-    } @else if ($size == 36px or $size == 42px) {
-        @return (9px - $border-width);
-    } @else if ($size == 48px) {
-        @return (12px - $border-width);
-    }
-
-    @return (null);
-}
-
-@mixin text-size($size, $border-width: 0) {
-    @if ($size == 18px) {
-        line-height: 12px;
-        font-size: 10px;
-    } @else if ($size == 24px) {
-        line-height: 18px;
-        font-size: 12px;
-    } @else if ($size == 30px) {
-        line-height: 18px;
-        font-size: 14px;
-    } @else if ($size == 36px) {
-        line-height: 18px;
-        font-size: 14px;
-    } @else if ($size == 42px) {
-        line-height: 24px;
-        font-size: 16px;
-    } @else if ($size == 48px) {
-        line-height: 24px;
-        font-size: 16px;
-    }
-    padding-top: vpadding($size, $border-width);
-    padding-bottom: vpadding($size, $border-width);
-}

package/build/assets/styles/typography.scss

@@ -1,174 +0,0 @@
-@mixin overflow-ellipsis() {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.uui-typography {
-    font-family: var(--uui-font);
-    color: var(--uui-text-primary);
-
-    .hero-header, h1, h2, h3, h4, h5, h6 {
-        margin: 0;
-    }
-
-    .hero-header {
-        font-family: var(--uui-font);
-        font-weight: 500;
-        margin: 30px 0;
-        font-size: 66px;
-        line-height: 72px;
-    }
-
-    .promo-header, h1, h2, h3 {
-        font-family: var(--uui-font);
-        font-weight: 700;
-    }
-
-    h4, h5, h6 {
-        font-family: var(--uui-font);
-        font-weight: 600;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-        margin-bottom: 0.5em;
-        margin-top: 1.2em;
-        line-height: 1.35em;
-    }
-
-    h1 {
-        font-size: 42px;
-    }
-
-    h2 {
-        font-size: 30px;
-        letter-spacing: 0.1px;
-
-        .promo-header {
-            letter-spacing: 2px;
-        }
-    }
-
-    h3 {
-        font-size: 24px;
-    }
-
-    h4 {
-        font-size: 18px;
-        letter-spacing: 0.1px;
-    }
-
-    h5 {
-        font-size: 16px;
-    }
-
-    h6 {
-        font-size: 14px;
-    }
-
-    b, strong {
-        font-family: var(--uui-font);
-        font-weight: 600;
-    }
-
-    i, em {
-        font-family: var(--uui-font);
-        font-weight: 400;
-        font-style: italic;
-    }
-
-    a {
-        display: inline-flex;
-        align-items: center;
-        color: var(--uui-link);
-        text-decoration: underline;
-
-        &:visited {
-            color: var(--uui-link-visited);
-
-            &:hover {
-                color: var(--uui-link-visited-hover);
-            }
-        }
-
-        &:hover {
-            color: var(--uui-link-hover);
-        }
-    }
-
-    code {
-        padding: 0.125em 0.25em;
-        color: var(--uui-text-primary);
-        background-color: var(--uui-neutral-30);
-        font-family: var(--uui-font-mono, 'monospace');
-        font-weight: 400;
-        white-space: pre-wrap;
-        word-wrap: normal;
-    }
-
-    ol, ul {
-        padding: 0;
-    }
-
-    li {
-        margin-left: 1.25em;
-        line-height: 1.5;
-    }
-
-    pre {
-        padding: 1.25em;
-        font-family: monospace;
-        white-space: pre-wrap;
-        word-wrap: normal;
-    }
-
-    img {
-        max-width: 100%;
-    }
-
-    figure {
-        margin: 0;
-
-        figcaption {
-            font-size: 0.9em;
-            opacity: 0.9;
-            text-align: center;
-        }
-    }
-
-    p {
-        margin: 0.5em 0;
-        line-height: 1.5;
-    }
-
-    .uui-critical {
-        color: var(--uui-text-critical);
-    }
-
-    .uui-info {
-        color: var(--uui-text-info);
-    }
-
-    .uui-success {
-        color: var(--uui-text-success);
-    }
-
-    .uui-warning {
-        color: var(--uui-text-warning);
-    }
-
-    .uui-highlight {
-        background-color: var(--uui-warning-10);
-    }
-}
-
-.uui-typography-size-12 {
-    font-size: 12px;
-}
-
-.uui-typography-size-14 {
-    font-size: 14px;
-}
-
-.uui-typography-size-16 {
-    font-size: 16px;
-}

package/build/package.json

@@ -1,37 +0,0 @@
-{
-  "name": "@epam/uui",
-  "version": "5.3.0",
-  "description": "EPAM UUI components set",
-  "author": "EPAM",
-  "license": "MIT",
-  "module": "index.esm.js",
-  "main": "index.js",
-  "typings": "index.d.ts",
-  "scripts": {
-    "build": "node ../uui-build/scripts/buildModule",
-    "prepublish": "yarn build"
-  },
-  "dependencies": {
-    "@epam/assets": "5.3.0",
-    "@epam/uui-components": "5.3.0",
-    "@epam/uui-core": "5.3.0",
-    "classnames": "2.2.6",
-    "dayjs": "1.10.7",
-    "lodash.sortby": "4.7.0",
-    "react-focus-lock": "2.9.2",
-    "react-popper": "2.3.0"
-  },
-  "peerDependencies": {
-    "prop-types": "*",
-    "react": ">=16.0.0",
-    "react-dom": ">=16.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/epam/UUI"
-  },
-  "gitHead": "e5bbda766f5bdfd7c42a3c62c34afd9c03fffedd",
-  "publishConfig": {
-    "directory": "build"
-  }
-}

package/build/readme.md

@@ -1,5 +0,0 @@
-# UUI package
-
-This package is a part of [EPAM UUI](https://github.com/epam/UUI) library.
-
-@epam/uui contains the 'UUI' (codename 'UUI') 'skin'. All components branded with this skin are contained in this package.

package/components/buttons/Button.module.scss

@@ -1,157 +0,0 @@
-@use '../../assets/styles/index' as *;
-
-@mixin button-disables-styles($bg-color, $border-color) {
-    background-color: $bg-color;
-    color: var(--uui-btn-caption-disabled);
-    fill: var(--uui-btn-caption-disabled);
-    border-color: $border-color;
-}
-
-.root {
-    --uui-btn-bg: var(--uui-color-50);
-    --uui-btn-bg-hover: var(--uui-color-60);
-    --uui-btn-bg-active: var(--uui-color-70);
-    --uui-btn-bg-disabled: var(--uui-neutral-30);
-    --uui-btn-border: var(--uui-color-50);
-    --uui-btn-border-hover: var(--uui-color-60);
-    --uui-btn-border-active: var(--uui-color-70);
-    --uui-btn-border-disabled: var(--uui-neutral-30);
-    --uui-btn-caption: var(--uui-color-contrast);
-    --uui-btn-caption-disabled: var(--uui-text-disabled);
-
-    --uui-btn-border-radius: var(--uui-border-radius);
-
-    --uui-btn-font: var(--uui-font);
-    --uui-btn-font-weight: var(--uui-font-weight, 600);
-    //
-    background-color: var(--uui-btn-bg);
-    color: var(--uui-btn-caption);
-    fill: var(--uui-btn-caption);
-    border-color: var(--uui-btn-border);
-
-    &:global(.-clickable) {
-        &:hover {
-            background-color: var(--uui-btn-bg-hover);
-            border-color: var(--uui-btn-border-hover);
-        }
-
-        &:active {
-            background-color: var(--uui-btn-bg-active);
-            border-color: var(--uui-btn-border-active);
-        }
-    }
-
-    &:global(.uui-button-box) {
-        border-style: solid;
-        justify-content: center;
-        border-radius: var(--uui-btn-border-radius);
-    }
-
-    &:focus-visible {
-        @include focus-visible-effect();
-    }
-
-    :global(.uui-caption) {
-        @include overflow-ellipsis();
-        min-width: 0;
-        text-align: center;
-        flex: 1 1 auto;
-        font-family: var(--uui-btn-font);
-        font-weight: var(--uui-btn-font-weight, normal);
-        user-select: none;
-    }
-
-    &:is(:global(.-clickable), :hover, :active, :focus):global(.uui-disabled),
-    &:global(.uui-disabled) {
-        &:global(.uui-fill-solid) {
-            @include button-disables-styles(var(--uui-btn-bg-disabled), var(--uui-btn-border-disabled));
-        }
-
-        &:global(.uui-fill-outline) {
-            @include button-disables-styles(var(--uui-surface-main), var(--uui-btn-border-disabled));
-        }
-
-        &:global(.uui-fill-none) {
-            @include button-disables-styles(transparent, var(--uui-btn-border-disabled));
-        }
-
-        &:global(.uui-fill-ghost) {
-            @include button-disables-styles(transparent, transparent);
-        }
-    }
-
-    &:global(.uui-fill-solid) {
-        --uui-btn-bg: var(--uui-color-50);
-        --uui-btn-bg-hover: var(--uui-color-60);
-        --uui-btn-bg-active: var(--uui-color-70);
-        --uui-btn-border: var(--uui-color-50);
-        --uui-btn-border-hover: var(--uui-color-60);
-        --uui-btn-border-active: var(--uui-color-70);
-        --uui-btn-caption: var(--uui-color-contrast);
-        --uui-btn-caption-disabled: var(--uui-text-disabled);
-    }
-
-    &:global(.uui-fill-outline) {
-        --uui-btn-bg: var(--uui-surface-main);
-        --uui-btn-bg-hover: var(--uui-color-10);
-        --uui-btn-bg-active: var(--uui-color-20);
-        --uui-btn-bg-disabled: transparent;
-        --uui-btn-border: var(--uui-color-50);
-        --uui-btn-border-hover: var(--uui-color-50);
-        --uui-btn-border-active: var(--uui-color-50);
-        --uui-btn-caption: var(--uui-color-50);
-        --uui-btn-caption-disabled: var(--uui-text-disabled);
-    }
-
-    &:global(.uui-fill-none) {
-        --uui-btn-bg: transparent;
-        --uui-btn-bg-hover: var(--uui-color-10);
-        --uui-btn-bg-active: var(--uui-color-20);
-        --uui-btn-bg-disabled: transparent;
-        --uui-btn-border: var(--uui-color-50);
-        --uui-btn-border-hover: var(--uui-color-50);
-        --uui-btn-border-active: var(--uui-color-50);
-        --uui-btn-caption: var(--uui-color-50);
-        --uui-btn-caption-disabled: var(--uui-text-disabled);
-    }
-
-    &:global(.uui-fill-ghost) {
-        --uui-btn-bg: transparent;
-        --uui-btn-bg-hover: var(--uui-color-10);
-        --uui-btn-bg-active: var(--uui-color-20);
-        --uui-btn-bg-disabled: transparent;
-        --uui-btn-border: transparent;
-        --uui-btn-border-hover: var(--uui-color-10);
-        --uui-btn-border-active: var(--uui-color-20);
-        --uui-btn-border-disabled: transparent;
-        --uui-btn-caption: var(--uui-color-50);
-        --uui-btn-caption-disabled: var(--uui-text-disabled);
-    }
-
-    &:global {
-        &.uui-size-18 {
-            @include button-layout(18px, 1px);
-        }
-
-        &.uui-size-24 {
-            @include button-layout(24px, 1px);
-        }
-
-        &.uui-size-30 {
-            @include button-layout(30px, 1px);
-        }
-
-        &.uui-size-36 {
-            @include button-layout(36px, 1px);
-        }
-
-        &.uui-size-42 {
-            @include button-layout(42px, 1px);
-        }
-
-        &.uui-size-48 {
-            @include button-layout(48px, 1px);
-        }
-    }
-}
-

package/components/buttons/Button.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { Button as uuiButton, ButtonProps as uuiButtonProps } from '@epam/uui-components';
-import { withMods } from '@epam/uui-core';
-import { ControlSize, ButtonFill } from '../types';
-import { systemIcons } from '../../icons/icons';
-import { CountIndicator } from '../widgets';
-import css from './Button.module.scss';
-
-export type ButtonColor = 'accent' | 'primary' | 'critical' | 'secondary' | 'neutral';
-export const allButtonColors: ButtonColor[] = [
-    'accent', 'primary', 'critical', 'secondary', 'neutral',
-];
-
-const defaultSize = '36';
-
-export interface ButtonMods {
-    size?: ControlSize | '18';
-    fill?: ButtonFill;
-    color?: ButtonColor;
-}
-
-export type ButtonProps = ButtonMods & Omit<uuiButtonProps, 'count' | 'indicator'>;
-
-export function applyButtonMods(mods: ButtonProps) {
-    return [
-        css.root,
-        'uui-button',
-        `uui-fill-${mods.fill || 'solid'}`,
-        `uui-color-${mods.color || 'primary'}`,
-        `uui-size-${mods.size || defaultSize}`,
-    ];
-}
-
-export const Button = withMods<Omit<uuiButtonProps, 'count' | 'indicator'>, ButtonMods>(
-    uuiButton,
-    applyButtonMods,
-    (props) => ({
-        dropdownIcon: systemIcons[props.size || defaultSize].foldingArrow,
-        clearIcon: systemIcons[props.size || defaultSize].clear,
-        countIndicator: (countIndicatorProps) => <CountIndicator { ...countIndicatorProps } color="white" />,
-    }),
-);