@epam/uui 5.3.0 → 5.4.0

package/components/tables/columnsConfigurationModal/index.ts

@@ -1 +0,0 @@
-export * from './ColumnsConfigurationModal';

package/components/tables/index.ts

@@ -1,9 +0,0 @@
-export * from './DataTableCell';
-export * from './DataTableRow';
-export * from './DataTableHeaderRow';
-export * from './DataTableHeaderCell';
-export * from './DataTable';
-export * from './DataRowsContainer';
-export * from './columnsConfigurationModal';
-export * from './ColumnHeaderDropdown';
-export * from './types';

package/components/tables/types.ts

@@ -1,33 +0,0 @@
-import { ControlSize } from '../types';
-
-interface BaseRowMods {
-    size?: ControlSize | '60';
-}
-
-export interface DataTableMods {
-    size?: ControlSize;
-    border?: boolean;
-    headerTextCase?: 'upper' | 'normal';
-}
-
-interface TableSizesAndPositionMods {
-    size?: ControlSize | '60';
-    padding?: '0' | '12' | '24';
-    alignActions?: 'top' | 'center';
-}
-
-export interface DataTableRowMods extends TableSizesAndPositionMods {
-    borderBottom?: any;
-}
-
-export interface DataTableCellMods extends TableSizesAndPositionMods {
-    border?: boolean;
-}
-
-export interface DataTableHeaderCellMods extends BaseRowMods {
-    textCase?: 'upper' | 'normal';
-}
-
-export interface DataTableHeaderRowMods extends BaseRowMods {
-    textCase?: 'upper' | 'normal';
-}

package/components/tables/variables.scss

@@ -1,25 +0,0 @@
-.uui-dt-vars {
-    --uui-dt-border: var(--uui-divider-light);
-
-    --uui-dt-cell-bg: transparent;
-    --uui-dt-cell-bg-resize: #EF55331F;
-    --uui-dt-cell-bg-invalid: var(--uui-error-10);
-    --uui-dt-cell-border-hover: var(--uui-control-border-hover);
-    --uui-dt-cell-border-focus: var(--uui-control-border-focus);
-
-    --uui-dt-row-bg: var(--uui-surface-main);
-    --uui-dt-row-bg-hover: var(--uui-surface-higher);
-    --uui-dt-row-bg-invalid: var(--uui-error-5);
-    --uui-dt-row-bg-selected: var(--uui-info-5);
-
-    --uui-dt-header-row-bg: var(--uui-surface-sunken);
-    --uui-dt-header-row-bg-hover: var(--uui-surface-highest);
-    --uui-dt-header-drop_marker: var(--uui-primary-50);
-
-    --uui-dt-top-shadow: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
-    --uui-dt-left-shadow: linear-gradient(to left, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
-    --uui-dt-right-shadow: linear-gradient(to right, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
-
-    --uui-dt-header-cell-font: var(--uui-font);
-    --uui-dt-header-cell-font-weight: 600;
-}

package/components/types.ts

@@ -1,73 +0,0 @@
-export type ButtonFill = 'solid' | 'outline' | 'ghost' | 'none';
-export const allButtonFills: ButtonFill[] = [
-    'solid', 'outline', 'ghost', 'none',
-];
-
-export type FillStyle = ButtonFill;
-export const allFillStyles: FillStyle[] = allButtonFills;
-
-export type ControlSize = 'none' | '24' | '30' | '36' | '42' | '48';
-export const allSizes: ControlSize[] = [
-    '24', '30', '36', '42', '48',
-];
-
-export type RowSize = null | '24' | '30' | '36' | '42' | '48';
-export const allRowSizes: RowSize[] = [
-    null, '24', '30', '36', '42', '48',
-];
-
-export type SemanticColor = 'info' | 'success' | 'warning' | 'error';
-export const allSemanticColors: SemanticColor[] = [
-    'info', 'success', 'warning', 'error',
-];
-
-export type EpamBadgeSemanticColor = 'info' | 'success' | 'warning' | 'critical' | 'neutral';
-export const allEpamBadgeSemanticColors: EpamBadgeSemanticColor[] = [
-    'info', 'success', 'warning', 'critical', 'neutral',
-];
-
-export type TextSize = 'none' | '18' | '24' | '30' | '36' | '48';
-export const allTextSizes: TextSize[] = [
-    '18', '24', '30', '36', '48',
-];
-
-export type FontStyle = 'normal' | 'italic';
-export const allFontStyles: FontStyle[] = [
-    'normal', 'italic',
-];
-
-export type FontWeight = '200' | '300' | '400' | '600' | '700' | '900';
-export const allFontWeights: FontWeight[] = [
-    '200', '300', '400', '600', '700', '900',
-];
-
-export interface ColorMod {
-    // TODO remove
-    /** Component color */
-    color?: SemanticColor;
-}
-
-export interface RowSizeMod {
-    size?: RowSize;
-}
-
-export interface SizeMod {
-    size?: ControlSize;
-}
-
-/** Component can adjust visuals for different contexts: forms, tables cells, on in WYSIWYG UX */
-export interface IHasEditMode {
-    /**
-     * Visual mode for component:
-     * - form: default visuals, to use in forms.
-     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)
-     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover.
-     */
-    mode?: 'form' | 'cell' | 'inline';
-}
-
-export enum EditMode {
-    FORM = 'form',
-    CELL = 'cell',
-    INLINE = 'inline'
-}

package/components/typography/RichTextView.tsx

@@ -1,13 +0,0 @@
-import * as uuiComponents from '@epam/uui-components';
-import { withMods } from '@epam/uui-core';
-
-export interface RichTextViewMods {
-    size?: '12' | '14' | '16';
-}
-
-export type RichTextViewProps = uuiComponents.RichTextViewProps & RichTextViewMods;
-
-export const RichTextView = withMods<uuiComponents.RichTextViewProps, RichTextViewMods>(
-    uuiComponents.RichTextView,
-    (mods: RichTextViewMods) => ['uui-typography', `uui-typography-size-${mods.size || '14'}`],
-);

package/components/typography/Text.module.scss

@@ -1,50 +0,0 @@
-@mixin text-color($color) {
-    &.uui-text.uui-color-#{$color} {
-        --uui-text: var(--uui-text-#{$color});
-    }
-}
-
-@mixin font-weight($weight) {
-    &.uui-font-weight-#{$weight} {
-        --uui-text-font-weight: #{$weight};
-    }
-}
-
-@mixin font-style($style) {
-    &.uui-font-style-#{$style} {
-        --uui-text-font-style: #{$style};
-    }
-}
-
-.root {
-    --uui-text: var(--uui-color-70);
-    --uui-text-font: var(--uui-font);
-    --uui-text-font-weight: 400;
-    --uui-text-font-style: normal;
-    //
-    font-family: var(--uui-text-font);
-    font-weight: var(--uui-text-font-weight);
-    font-style: var(--uui-text-font-style);
-    color: var(--uui-text);
-
-    &:global {
-        &.uui-text.uui-color-white {
-            --uui-text: var(--uui-neutral-0);
-        }
-
-        @include text-color('brand');
-        @include text-color('primary');
-        @include text-color('secondary');
-        @include text-color('disabled');
-
-        @include font-weight(200);
-        @include font-weight(300);
-        @include font-weight(400);
-        @include font-weight(600);
-        @include font-weight(700);
-        @include font-weight(900);
-
-        @include font-style('normal');
-        @include font-style('italic');
-    }
-}

package/components/typography/Text.tsx

@@ -1,39 +0,0 @@
-import * as types from '../types';
-import { withMods } from '@epam/uui-core';
-import { getTextClasses, TextSettings } from '../../helpers';
-import { Text as uuiText, TextProps as UuiTextProps } from '@epam/uui-components';
-import css from './Text.module.scss';
-
-export type TextColor = 'info' | 'warning' | 'error' | 'success' | 'brand' | 'primary' | 'secondary' | 'disabled' | 'white';
-export const allTextColors: TextColor[] = ['info', 'warning', 'error', 'success', 'brand', 'primary', 'secondary', 'disabled', 'white'];
-
-export interface TextMods extends TextSettings {
-    color?: TextColor;
-    fontWeight?: types.FontWeight;
-    fontStyle?: types.FontStyle;
-    size?: types.TextSize | '42';
-}
-
-export type TextProps = UuiTextProps & TextMods;
-
-function applyTextMods(mods: TextMods) {
-    const textClasses = getTextClasses(
-        {
-            size: mods.size || '36',
-            lineHeight: mods.lineHeight,
-            fontSize: mods.fontSize,
-        },
-        false,
-    );
-
-    return [
-        css.root,
-        'uui-text',
-        `uui-color-${mods.color || 'primary'}`,
-        `uui-font-weight-${mods.fontWeight || '400'}`,
-        `uui-font-style-${mods.fontStyle || 'normal'}`,
-        'uui-typography',
-    ].concat(textClasses);
-}
-
-export const Text = withMods<UuiTextProps, TextMods>(uuiText, applyTextMods);

package/components/typography/TextPlaceholder.module.scss

@@ -1,33 +0,0 @@
-@keyframes skeleton_loading {
-    0% { background-position: 200% 0; }
-    100% { background-position: 0 0; }
-}
-
-.root {
-    --uui-text_placeholder: var(--uui-skeleton);
-    --uui-text_placeholder-gradient: linear-gradient(90deg, var(--uui-neutral-40) 0%, var(--uui-neutral-10) 50%, var(--uui-neutral-40) 100%);
-    //
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.loading-word {
-    user-select: none;
-    font-family: 'Redacted', cursive; // https://fonts.google.com/specimen/Redacted
-    letter-spacing: -1px;
-    margin: 0 3px 3px 0;
-    color: var(--uui-text_placeholder);
-    vertical-align: 1px; // to fix vertical over-sizing of line
-    &:last-child {
-        margin-right: 0;
-    }
-
-    &.animated-loading {
-        color: transparent;
-        background: var(--uui-text_placeholder-gradient);
-        background-size: 200% 100%;
-        background-clip: border-box;
-        -webkit-background-clip: text;
-        animation: skeleton_loading 1s ease infinite;
-    }
-}

package/components/typography/TextPlaceholder.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { IHasCX, IHasRawProps } from '@epam/uui-core';
-import css from './TextPlaceholder.module.scss';
-import { PropsWithChildren } from 'react';
-
-export interface ITextPlaceholderProps extends IHasRawProps<React.HTMLAttributes<HTMLDivElement>>, IHasCX {
-    wordsCount?: number;
-    isNotAnimated?: boolean;
-}
-
-export type TextPlaceholderProps = PropsWithChildren<ITextPlaceholderProps>;
-
-export const TextPlaceholder: React.FunctionComponent<PropsWithChildren<ITextPlaceholderProps>> = (props) => {
-    const pattern = '&nbsp;';
-    const text = React.useMemo(() => {
-        const words = [];
-        for (let i = 0; i < (props.wordsCount || 1); i++) {
-            const lengthWord = Math.floor(Math.random() * 10 + 8);
-            words.push(pattern.repeat(lengthWord));
-        }
-        return words;
-    }, [props.wordsCount]);
-
-    return (
-        <div aria-busy={ true } className={ cx(css.root, 'uui-text-placeholder') } { ...props.rawProps }>
-            {text.map((it: string, index: number) => (
-                <span
-                    key={ index }
-                    className={ cx([
-                        props.cx, css.loadingWord, !props.isNotAnimated && css.animatedLoading,
-                    ]) }
-                    dangerouslySetInnerHTML={ { __html: it } }
-                />
-            ))}
-        </div>
-    );
-};

package/components/typography/__tests__/RichTextView.test.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { RichTextView } from '../RichTextView';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('RichTextView', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <RichTextView>
-                    <p>Test</p>
-                </RichTextView>,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <RichTextView size="16">
-                    <div>Test</div>
-                </RichTextView>,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/typography/__tests__/Text.test.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Text } from '../Text';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('Text', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<Text>Test</Text>).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <Text color="primary" size="48" fontSize="24" lineHeight="30" onClick={ jest.fn }>
-                    Test
-                </Text>,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/typography/__tests__/TextPlaceholder.test.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { TextPlaceholder } from '../TextPlaceholder';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('TextPlaceholder', () => {
-    beforeEach(() => {
-        jest.spyOn(global.Math, 'random').mockReturnValue(0.5);
-    });
-
-    afterEach(() => {
-        jest.spyOn(global.Math, 'random').mockRestore();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<TextPlaceholder />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<TextPlaceholder wordsCount={ 5 } isNotAnimated />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/typography/__tests__/__snapshots__/RichTextView.test.tsx.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RichTextView should be rendered correctly 1`] = `
-<div
-  className="uui-typography uui-typography-size-14"
->
-  <p>
-    Test
-  </p>
-</div>
-`;
-
-exports[`RichTextView should be rendered correctly 2`] = `
-<div
-  className="uui-typography uui-typography-size-16"
->
-  <div>
-    Test
-  </div>
-</div>
-`;

package/components/typography/__tests__/__snapshots__/Text.test.tsx.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Text should be rendered correctly 1`] = `
-<div
-  className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 container"
->
-  Test
-</div>
-`;
-
-exports[`Text should be rendered correctly 2`] = `
-<div
-  className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-30 font-size-24 v-padding-9 container"
-  onClick={[Function]}
->
-  Test
-</div>
-`;

package/components/typography/__tests__/__snapshots__/TextPlaceholder.test.tsx.snap

@@ -1,65 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TextPlaceholder should be rendered correctly 1`] = `
-<div
-  aria-busy={true}
-  className="root uui-text-placeholder"
->
-  <span
-    className="loadingWord animatedLoading"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
-      }
-    }
-  />
-</div>
-`;
-
-exports[`TextPlaceholder should be rendered correctly 2`] = `
-<div
-  aria-busy={true}
-  className="root uui-text-placeholder"
->
-  <span
-    className="loadingWord"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
-      }
-    }
-  />
-  <span
-    className="loadingWord"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
-      }
-    }
-  />
-  <span
-    className="loadingWord"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
-      }
-    }
-  />
-  <span
-    className="loadingWord"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
-      }
-    }
-  />
-  <span
-    className="loadingWord"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
-      }
-    }
-  />
-</div>
-`;

package/components/typography/index.ts

@@ -1,3 +0,0 @@
-export * from './Text';
-export * from './TextPlaceholder';
-export * from './RichTextView';

package/components/widgets/AvatarStack.module.scss

@@ -1,36 +0,0 @@
-@use  '../../assets/styles/effects' as *;
-
-.root {
-    --uui-avatar_stack-font: var(--uui-font);
-    --uui-avatar_stack-font-weight: 600;
-    //
-    :global(.avatars) {
-        padding-right: 12px;
-
-        &>* {
-            border-radius: 50%;
-            border: 1px solid white;
-        }
-
-        :global(.-clickable) {
-            &:focus-visible {
-                @include focus-visible-effect(2px, 50%);
-            }
-
-            &:focus-visible, &:hover {
-                position: relative;
-                z-index: 1;
-
-            }
-        }
-    }
-
-    :global(.avatarsCount) {
-        color: var(--uui-text-primary);
-        margin-left: 3px;
-        line-height: 1;
-        font-family: var(--uui-avatar_stack-font);
-        font-weight: var(--uui-avatar_stack-font-weight);
-        font-size: 14px;
-    }
-}

package/components/widgets/AvatarStack.tsx

@@ -1,5 +0,0 @@
-import { AvatarStack as uuiAvatarStack, AvatarStackProps } from '@epam/uui-components';
-import { withMods } from '@epam/uui-core';
-import css from './AvatarStack.module.scss';
-
-export const AvatarStack = withMods<AvatarStackProps>(uuiAvatarStack, () => [css.root]);