@epam/uui 5.3.0 → 5.4.1

package/components/datePickers/index.ts

@@ -1,5 +0,0 @@
-export * from './DatePicker';
-export * from './DatePickerBody';
-export * from './Calendar';
-export * from './RangeDatePicker';
-export * from './RangeDatePickerBody';

package/components/dnd/DropMarker.module.scss

@@ -1,62 +0,0 @@
-.root {
-    --uui-drop_marker: var(--uui-primary-50);
-
-    --uui-drop_marker-offset: -1px;
-    --uui-drop_marker-width: 2px;
-}
-
-.blocker {
-    opacity: 0.1;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.marker {
-    position: absolute;
-    pointer-events: none;
-    z-index: 10;
-}
-
-.top {
-    top: var(--uui-drop_marker-offset);
-    left: 0;
-    right: 0;
-    height: var(--uui-drop_marker-width);
-    background-color: var(--uui-drop_marker);
-}
-
-.bottom {
-    bottom: var(--uui-drop_marker-offset);
-    left: 0;
-    right: 0;
-    height: var(--uui-drop_marker-width);
-    background-color: var(--uui-drop_marker);
-}
-
-.left {
-    top: 0;
-    bottom: 0;
-    left: var(--uui-drop_marker-offset);
-    width: var(--uui-drop_marker-width);
-    background-color: var(--uui-drop_marker);
-}
-
-.right {
-    top: 0;
-    bottom: 0;
-    right: var(--uui-drop_marker-offset);
-    width: var(--uui-drop_marker-width);
-    background-color: var(--uui-drop_marker);
-}
-
-.inside {
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border: var(--uui-drop_marker-width) solid var(--uui-drop_marker);
-    background-color: color-mix(in srgb, var(--uui-surface-highest) 50%, transparent);;
-}

package/components/dnd/DropMarker.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { DndActorRenderParams, IHasCX } from '@epam/uui-core';
-import css from './DropMarker.module.scss';
-
-export interface DropMarkerProps extends DndActorRenderParams, IHasCX {
-    enableBlocker?: boolean;
-}
-
-export function DropMarker(props: DropMarkerProps) {
-    return props.isDndInProgress
-        ? (
-            <>
-                { props.enableBlocker && <div className={ css.blocker } /> }
-                <div className={ cx([
-                    css.root,
-                    css.marker,
-                    css[props.position],
-                    props?.cx,
-                ]) }
-                />
-            </>
-        )
-        : null;
-}

package/components/dnd/__tests__/DropMarker.test.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { DropMarker } from '../DropMarker';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('DropMarker', () => {
-    it('should be rendered correctly', () => {
-        const mockEventHandlers: any = {};
-        mockEventHandlers.onMouseDown = jest.fn();
-        mockEventHandlers.onMouseEnter = jest.fn();
-        mockEventHandlers.onMouseMove = jest.fn();
-        mockEventHandlers.onMouseLeave = jest.fn();
-        mockEventHandlers.onMouseUp = jest.fn();
-
-        const tree = renderer
-            .create(
-                <DropMarker
-                    classNames={ ['test-class'] }
-                    eventHandlers={ mockEventHandlers }
-                    isDndInProgress
-                    isDraggable
-                    isDraggedOut
-                    isDraggedOver
-                    isDragGhost
-                    isDropAccepted
-                    position="top"
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/dnd/__tests__/__snapshots__/DropMarker.test.tsx.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DropMarker should be rendered correctly 1`] = `
-<div
-  className="root marker top"
-/>
-`;

package/components/dnd/index.tsx

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

package/components/fileUpload/DropSpot.module.scss

@@ -1,47 +0,0 @@
-.root {
-    --uui-dropspot-border: var(--uui-control-border);
-    --uui-dropspot-border-dropstart: var(--uui-primary-50);
-    --uui-dropspot-background-dropstart: var(--uui-primary-10);
-    --uui-dropspot-icon: var(--uui-primary-50);
-    //
-    position: relative;
-    min-height: 104px;
-    border: 2px dashed var(--uui-dropspot-border);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    white-space: pre;
-
-    &.drop-start {
-        border: 2px dashed var(--uui-dropspot-border-dropstart);
-    }
-
-    &.drop-over {
-        background-color: var(--uui-dropspot-background-dropstart);
-    }
-
-    .link {
-        color: var(--uui-link);
-
-        &:hover {
-            color: var(--uui-link-hover);
-        }
-    }
-
-    .drop-area {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .icon-blue {
-        fill: var(--uui-dropspot-icon);
-        margin-right: 6px;
-    }
-}

package/components/fileUpload/DropSpot.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import { cx, IHasRawProps } from '@epam/uui-core';
-import { DropSpot as UuiDropSpot, DropSpotRenderParams, UploadFileToggler } from '@epam/uui-components';
-import { FlexRow, IconContainer } from '../layout';
-import { Anchor } from '../navigation';
-import { RichTextView, Text } from '../typography';
-import { ReactComponent as ShapeIcon } from '../../icons/fileUpload/shape.svg';
-import { i18n } from '../../i18n';
-import css from './DropSpot.module.scss';
-
-export interface DropSpotProps extends IHasRawProps<React.HTMLAttributes<HTMLDivElement>> {
-    cx?: string;
-    infoText?: string;
-    onUploadFiles(files: File[]): any;
-    accept?: string;
-    single?: boolean;
-}
-
-export class DropSpot extends React.Component<DropSpotProps> {
-    renderAttachmentArea = (props: DropSpotRenderParams) => {
-        return (
-            <div className={ cx(css.root, this.props.cx, props.isDragStart && css.dropStart, props.isDraggingOver && css.dropOver) } { ...this.props.rawProps }>
-                <div { ...props.eventHandlers } className={ css.dropArea }>
-                    <FlexRow size="24">
-                        <IconContainer icon={ ShapeIcon } cx={ css.iconBlue } />
-                        <Text lineHeight="24" size="24" fontSize="14">
-                            {' '}
-                            {i18n.fileUpload.labelStart}
-                            {' '}
-                        </Text>
-                        <UploadFileToggler
-                            onFilesAdded={ this.props.onUploadFiles }
-                            render={ (props) => (
-                                <RichTextView>
-                                    <Anchor { ...props } cx={ css.link }>
-                                        {i18n.fileUpload.browse}
-                                    </Anchor>
-                                </RichTextView>
-                            ) }
-                            accept={ this.props.accept }
-                            single={ this.props.single }
-                        />
-                    </FlexRow>
-                    {this.props.infoText && (
-                        <Text lineHeight="24" size="24" fontSize="14" color="secondary">
-                            {this.props.infoText}
-                        </Text>
-                    )}
-                </div>
-            </div>
-        );
-    };
-
-    render() {
-        return <UuiDropSpot render={ this.renderAttachmentArea } onFilesDropped={ this.props.onUploadFiles } />;
-    }
-}

package/components/fileUpload/FileCard.module.scss

@@ -1,88 +0,0 @@
-.root {
-    --uui-file_card-border: var(--uui-control-border);
-    --uui-file_card-border-error: var(--uui-error-50);
-    --uui-file_card-text-error: var(--uui-error-70);
-    --uui-file_card-icon-default: var(--uui-icon);
-    --uui-file_card-icon-error: var(--uui-error-50);
-    --uui-file_card-icon-doc: #2B579A;
-    --uui-file_card-icon-xls: #217346;
-    --uui-file_card-icon-pdf: #FA0F01;
-    --uui-file_card-icon-mov: #5214CC;
-    --uui-file_card-icon-img: #E67E17;
-
-    --uui-file_card-border-radius: var(--uui-border-radius);
-
-    --uui-file_card-font-error: var(--uui-font);
-
-    &:global(.uui-file_card) {
-        box-sizing: border-box;
-        min-height: 48px;
-        padding: 5px;
-        border: 1px solid var(--uui-file_card-border);
-        border-radius: var(--uui-file_card-border-radius);
-
-        .file-name {
-            white-space: nowrap;
-        }
-    }
-
-    &:global(.uui-loading) {
-        .default-color,
-        .doc-color,
-        .xls-color,
-        .pdf-color,
-        .movie-color,
-        .img-color {
-            fill: var(--uui-icon-disabled);
-        }
-    }
-
-    &:global(.uui-error) {
-        border: 1px solid var(--uui-file_card-border-error);
-    }
-
-    .default-color {
-        fill: var(--uui-file_card-icon-default);
-    }
-
-    .doc-color {
-        fill: var(--uui-file_card-icon-doc);
-    }
-
-    .xls-color {
-        fill: var(--uui-file_card-icon-xls);
-    }
-
-    .pdf-color {
-        fill: var(--uui-file_card-icon-pdf);
-    }
-
-    .mov-color {
-        fill: var(--uui-file_card-icon-mov);
-    }
-
-    .img-color {
-        fill: var(--uui-file_card-icon-img);
-    }
-
-    .error-block {
-        font-family: var(--uui-file_card-font-error);
-        font-weight: 400;
-        font-size: 12px;
-        color: var(--uui-file_card-text-error);
-        display: inline-flex;
-        align-items: center;
-        padding: 0;
-        cursor: pointer;
-
-        svg {
-            margin-right: 4px;
-            fill: var(--uui-file_card-icon-error);
-        }
-    }
-
-    .icons-block {
-        min-width: 18px;
-        flex-basis: 0;
-    }
-}

package/components/fileUpload/FileCard.tsx

@@ -1,134 +0,0 @@
-import * as React from 'react';
-import css from './FileCard.module.scss';
-import { i18n } from '../../i18n';
-import { cx, FileUploadResponse, formatBytes, IClickable, IHasCX, uuiMod } from '@epam/uui-core';
-import { SvgCircleProgress } from './SvgCircleProgress';
-import { IconContainer } from '@epam/uui-components';
-import { FlexCell, FlexRow } from '../../components/layout';
-import { IconButton } from '../../components/buttons';
-import { Text } from '../../components/typography';
-import { Tooltip } from '../../components/overlays';
-import { fileIcons } from '../../icons/icons';
-import { ReactComponent as RemoveIcon } from '@epam/assets/icons/common/navigation-close-18.svg';
-import { ReactComponent as ErrorIcon } from '../../icons/notification-error-fill-10.svg';
-
-export interface FileCardItem extends Partial<File & FileUploadResponse> {
-    progress?: number;
-    abortXHR?: () => void;
-}
-
-export interface FileCardProps extends IClickable, IHasCX {
-    file: FileCardItem;
-    width?: number;
-}
-
-export const FileCard = React.forwardRef<HTMLDivElement, FileCardProps>((props, ref) => {
-    const [isLoadingShow, setIsLoadingShow] = React.useState<boolean>(true);
-
-    const { file } = props;
-
-    const getIcon = (extension: string) => {
-        switch (extension) {
-            case 'doc':
-            case 'docx':
-                return <IconContainer size={ 24 } icon={ fileIcons.docIcon } cx={ css.docColor } />;
-            case 'xls':
-            case 'xlsx':
-                return <IconContainer size={ 24 } icon={ fileIcons.exelIcon } cx={ css.xlsColor } />;
-            case 'pdf':
-                return <IconContainer size={ 24 } icon={ fileIcons.pdfIcon } cx={ css.pdfColor } />;
-            case 'gif':
-            case 'jpg':
-            case 'jpeg':
-            case 'svg':
-            case 'png':
-            case 'webp':
-                return <IconContainer size={ 24 } icon={ fileIcons.imgIcon } cx={ css.imgColor } />;
-            case 'avi':
-            case 'mov':
-            case 'mp4':
-            case 'wmw':
-            case 'mkv':
-                return <IconContainer size={ 24 } icon={ fileIcons.videoIcon } cx={ css.movColor } />;
-            case 'csv':
-            case 'xml':
-                return <IconContainer size={ 24 } icon={ fileIcons.tableIcon } cx={ css.defaultColor } />;
-            case 'rtf':
-            case 'txt':
-                return <IconContainer size={ 24 } icon={ fileIcons.textIcon } cx={ css.defaultColor } />;
-            case 'eml':
-            case 'emlx':
-                return <IconContainer size={ 24 } icon={ fileIcons.mailIcon } cx={ css.defaultColor } />;
-            default:
-                return <IconContainer size={ 24 } icon={ fileIcons.fileIcon } cx={ css.defaultColor } />;
-        }
-    };
-
-    const {
-        cx: componentCx,
-        width,
-        file: {
-            progress, size, name, extension, error, abortXHR,
-        },
-        onClick,
-    } = props;
-    const fileExtension = extension || name?.split('.').pop();
-    const fileName = name?.split('.').slice(0, -1).join('');
-    const isLoading = progress < 100;
-    const isCrossShow = ((!isLoadingShow && isLoading) || !isLoading) && onClick;
-
-    const mouseLeaveHandler = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        setIsLoadingShow(() => true);
-    };
-
-    const mouseEnterHandler = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        setIsLoadingShow(() => false);
-    };
-
-    const renderErrorContent = () => (
-        <Tooltip content={ file.error.message } placement="bottom-start">
-            <div className={ css.errorBlock }>
-                <ErrorIcon />
-                Upload failed
-            </div>
-        </Tooltip>
-    );
-
-    const renderSuccessfulContent = () => (
-        <Text size="18" fontSize="14" lineHeight="18" color="secondary">
-            {fileExtension && `${fileExtension.toUpperCase()}, `}
-            {isLoading && formatBytes((size / 100) * progress, 2, false) + i18n.fileCard.fileSizeProgress}
-            {formatBytes(size)}
-        </Text>
-    );
-
-    const removeHandler = () => {
-        progress && progress < 100 && abortXHR();
-        onClick();
-    };
-
-    return (
-        <FlexCell
-            ref={ ref }
-            cx={ cx(css.root, 'uui-file_card', (isLoading || error?.isError) && uuiMod.loading, componentCx, error?.isError && uuiMod.error) }
-            minWidth={ width }
-            width={ !width ? '100%' : undefined }
-        >
-            <FlexRow size="36" alignItems="top" spacing="6">
-                {fileExtension && getIcon(fileExtension)}
-                <FlexCell width="100%">
-                    <Text size="18" fontSize="14" lineHeight="18" color={ progress < 100 ? 'secondary' : 'primary' } cx={ css.fileName }>
-                        {fileName}
-                    </Text>
-                    {error?.isError ? renderErrorContent() : renderSuccessfulContent()}
-                </FlexCell>
-                <div className={ cx(css.iconsBlock) } onMouseEnter={ mouseEnterHandler } onMouseLeave={ mouseLeaveHandler }>
-                    {isLoadingShow && isLoading && <SvgCircleProgress progress={ progress } size={ 18 } />}
-                    {isCrossShow && <IconButton icon={ RemoveIcon } onClick={ removeHandler } />}
-                </div>
-            </FlexRow>
-        </FlexCell>
-    );
-});

package/components/fileUpload/SvgCircleProgress.module.scss

@@ -1,8 +0,0 @@
-.root {
-    circle {
-        transition: stroke-dashoffset 0.35s;
-        transform: rotate(-90deg);
-        transform-origin: 50% 50%;
-        stroke: var(--uui-icon-disabled);
-    }
-}

package/components/fileUpload/SvgCircleProgress.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { IHasCX, IHasRawProps } from '@epam/uui-core';
-import css from './SvgCircleProgress.module.scss';
-
-interface SvgCircleProgressProps extends IHasCX, IHasRawProps<React.SVGAttributes<SVGSVGElement>> {
-    size: number;
-    progress: number;
-}
-
-export const SvgCircleProgress = React.forwardRef<SVGSVGElement, SvgCircleProgressProps>((props, ref) => {
-    const outsetRadius = props.size / 2 - 1;
-    const insetRadius = props.size / 2 - 3;
-    const circumference = insetRadius * Math.PI;
-
-    return (
-        <svg className={ css.root } width={ props.size } height={ props.size } ref={ ref } { ...props.rawProps }>
-            <circle
-                strokeDasharray={ circumference }
-                strokeDashoffset={ circumference - (props.progress / 100) * circumference }
-                strokeWidth={ insetRadius }
-                fill="transparent"
-                r={ insetRadius / 2 }
-                cx={ props.size / 2 }
-                cy={ props.size / 2 }
-            />
-            <circle
-                strokeWidth={ 1 }
-                fill="transparent"
-                r={ outsetRadius }
-                cx={ props.size / 2 }
-                cy={ props.size / 2 }
-            />
-        </svg>
-    );
-});

package/components/fileUpload/__tests__/DropSpot.test.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { DropSpot } from '../DropSpot';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('DropSpot', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<DropSpot onUploadFiles={ jest.fn } />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly with props', () => {
-        const tree = renderer.create(<DropSpot onUploadFiles={ jest.fn } infoText="Test info" />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/fileUpload/__tests__/FileCard.test.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { FileCard } from '../FileCard';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('FileCard', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <FileCard
-                    file={ {
-                        id: 1,
-                        name: 'Test.xls',
-                        size: 12546,
-                        progress: 0,
-                    } }
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <FileCard
-                    file={ {
-                        id: 1,
-                        name: 'Test.doc',
-                        size: 12546,
-                        progress: 0,
-                    } }
-                    width={ 140 }
-                    onClick={ jest.fn }
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <FileCard
-                    file={ {
-                        id: 1,
-                        name: 'Test.gif',
-                        size: 12546,
-                        progress: 100,
-                    } }
-                    width={ 140 }
-                    onClick={ jest.fn }
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/fileUpload/__tests__/SvgCircleProgress.test.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { SvgCircleProgress } from '../SvgCircleProgress';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('SvgCircleProgress', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<SvgCircleProgress progress={ 35 } size={ 30 } />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});