@epam/uui 5.3.0 → 5.4.0

package/components/navigation/MainMenu/__tests__/__snapshots__/MainMenuSearch.test.tsx.snap

@@ -1,53 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MainMenuSearch should be rendered correctly 1`] = `
-<div
-  className="container uui-input-box -clickable searchInput"
-  onBlur={[Function]}
-  onFocus={[Function]}
-  tabIndex={-1}
->
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-  <input
-    className="uui-input"
-    onChange={[Function]}
-    onKeyDown={[Function]}
-    tabIndex={0}
-    type="text"
-    value=""
-  />
-</div>
-`;
-
-exports[`MainMenuSearch should be rendered correctly 2`] = `
-<div
-  className="container uui-input-box -clickable searchInput"
-  onBlur={[Function]}
-  onFocus={[Function]}
-  tabIndex={-1}
->
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-  <input
-    className="uui-input"
-    onChange={[Function]}
-    onKeyDown={[Function]}
-    tabIndex={0}
-    type="primary"
-    value="test"
-  />
-</div>
-`;

package/components/navigation/MainMenu/index.ts

@@ -1,8 +0,0 @@
-export * from './MainMenu';
-export * from './GlobalMenu';
-export * from './Burger';
-export * from './MainMenuAvatar';
-export * from './MainMenuSearch';
-export * from './MainMenuIcon';
-export * from './MainMenuDropdown';
-export * from './MainMenuButton';

package/components/navigation/__tests__/Anchor.test.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { renderer } from '@epam/uui-test-utils';
-import { Anchor } from '../Anchor';
-
-describe('Anchor', () => {
-    it('should rendered correctly', () => {
-        const tree = renderer.create(<Anchor>Test Anchor</Anchor>).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should rendered with props correctly', () => {
-        const tree = renderer
-            .create(
-                <Anchor href="https://uui.epam.com" isDisabled={ true }>
-                    Test Anchor
-                </Anchor>,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/navigation/__tests__/__snapshots__/Anchor.test.tsx.snap

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Anchor should rendered correctly 1`] = `
-<a
-  className="container uui-anchor uui-enabled -clickable root"
-  href={null}
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  role="link"
-  tabIndex={0}
->
-  Test Anchor
-</a>
-`;
-
-exports[`Anchor should rendered with props correctly 1`] = `
-<a
-  aria-disabled={true}
-  className="container uui-anchor uui-disabled -clickable root"
-  disabled={true}
-  href="https://uui.epam.com"
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  role="link"
-  tabIndex={-1}
->
-  Test Anchor
-</a>
-`;

package/components/navigation/index.ts

@@ -1,2 +0,0 @@
-export * from './MainMenu';
-export * from './Anchor';

package/components/overlays/Alert.module.scss

@@ -1,77 +0,0 @@
-.root {
-    --uui-alert-text: var(--uui-text-primary);
-    --uui-alert-bg: var(--uui-color-10);
-    --uui-alert-border: var(--uui-color-50);
-    --uui-alert-icon: var(--uui-color-50);
-    --uui-alert-border-radius: var(--uui-border-radius);
-    //
-    background-color: var(--uui-alert-bg);
-    border-left: 6px solid var(--uui-alert-border);
-
-    :global(.uui-text) {
-        color: var(--uui-alert-text);
-    }
-
-    .icon-wrapper {
-        :global(.uui-icon) {
-            fill: var(--uui-alert-icon);
-        }
-    }
-}
-
-.alert-wrapper {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    min-width: 170px;
-    border-radius: var(--uui-alert-border-radius);
-}
-
-.size-48 {
-    padding: 9px 18px 9px 12px;
-    min-height: 48px;
-}
-
-.size-36 {
-    padding: 3px 9px;
-    min-height: 36px;
-    border-left-width: 3px;
-}
-
-.icon-wrapper {
-    height: 100%;
-    margin-right: 12px;
-}
-
-.action-wrapper {
-    display: flex;
-    align-items: center;
-}
-
-.action-icon {
-    min-height: 30px;
-}
-
-.action-link:not(:last-child) {
-    margin-right: 12px;
-}
-
-.close-icon {
-    margin-left: 17px;
-    min-height: 30px;
-    min-width: fit-content;
-    align-self: flex-start;
-}
-
-.main-path {
-    width: 100%;
-    display: flex;
-}
-
-.content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    width: 100%;
-}

package/components/overlays/Alert.tsx

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { IHasChildren, IHasCX, Icon, IHasRawProps } from '@epam/uui-core';
-import { IconContainer } from '@epam/uui-components';
-import { IconButton, LinkButton } from '../buttons';
-import { SemanticColor } from '../types';
-import { ReactComponent as SuccessIcon } from '../../icons/notification-check_circle-fill-24.svg';
-import { ReactComponent as WarningIcon } from '../../icons/notification-warning-fill-24.svg';
-import { ReactComponent as ErrorIcon } from '../../icons/notification-error-fill-24.svg';
-import { ReactComponent as HintIcon } from '../../icons/notification-help-fill-24.svg';
-import { ReactComponent as CrossIcon } from '../../icons/navigation-close-24.svg';
-import css from './Alert.module.scss';
-
-type notificationAction = {
-    name: string;
-    action: () => void;
-};
-
-export interface AlertProps extends IHasChildren, IHasCX, IHasRawProps<React.HTMLAttributes<HTMLDivElement>> {
-    /** List of actions to display in the alert. Each action has name and 'action' callback */
-    actions?: notificationAction[];
-    /** Alert color */
-    color: SemanticColor;
-    /** When specified, a close icon is rendered. onClose callback will be called on clicking the close icon */
-    onClose?(): void;
-    /** An optional icon to show on the left of the alert */
-    icon?: Icon;
-    /** Component size. If omitted, 48 size will be used. */
-    size?: '36' | '48';
-}
-
-export const Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, ref) => (
-    <div
-        role="alert"
-        ref={ ref }
-        className={
-            cx(
-                'uui-alert',
-                css.root,
-                css.alertWrapper,
-                props.color && `uui-color-${props.color}`,
-                props.cx,
-                (props.size === '36' ? css.size36 : css.size48),
-            )
-        }
-        { ...props.rawProps }
-    >
-        <div className={ css.mainPath }>
-            {props.icon && (
-                <div className={ css.iconWrapper }>
-                    <IconContainer icon={ props.icon } cx={ css.actionIcon } />
-                </div>
-            )}
-            <div className={ css.content }>
-                {props.children}
-                {props.actions && (
-                    <div className={ css.actionWrapper }>
-                        {props.actions.map((action) => (
-                            <LinkButton caption={ action.name } onClick={ action.action } key={ action.name } cx={ css.actionLink } size={ props?.size === '36' ? '24' : '30' } />
-                        ))}
-                    </div>
-                )}
-            </div>
-            {props.onClose && <IconButton icon={ CrossIcon } color="neutral" onClick={ props.onClose } cx={ css.closeIcon } />}
-        </div>
-    </div>
-));
-
-export const WarningAlert = React.forwardRef<HTMLDivElement, Omit<AlertProps, 'color'>>((props, ref) => <Alert icon={ WarningIcon } color="warning" ref={ ref } { ...props } />);
-
-export const SuccessAlert = React.forwardRef<HTMLDivElement, Omit<AlertProps, 'color'>>((props, ref) => <Alert icon={ SuccessIcon } color="success" ref={ ref } { ...props } />);
-
-export const HintAlert = React.forwardRef<HTMLDivElement, Omit<AlertProps, 'color'>>((props, ref) => <Alert icon={ HintIcon } color="info" ref={ ref } { ...props } />);
-
-export const ErrorAlert = React.forwardRef<HTMLDivElement, Omit<AlertProps, 'color'>>((props, ref) => <Alert icon={ ErrorIcon } color="error" ref={ ref } { ...props } />);

package/components/overlays/ConfirmationModal.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { IModal } from '@epam/uui-core';
-import { Button } from '../buttons';
-import { FlexSpacer, Panel, ScrollBars } from '../layout';
-import { ModalBlocker, ModalWindow, ModalHeader, ModalFooter } from './Modals';
-import { i18n } from '../../i18n';
-
-export interface ConfirmationModalWindowProps extends IModal<any> {
-    caption: any;
-    bodyContent?: any;
-    hideCancelButton?: boolean;
-}
-
-export class ConfirmationModal extends React.Component<ConfirmationModalWindowProps> {
-    render() {
-        let bodyContent;
-
-        if (this.props.bodyContent) {
-            bodyContent = <Panel background="surface" margin="24">{this.props.bodyContent}</Panel>;
-        }
-
-        return (
-            <ModalBlocker { ...this.props }>
-                <ModalWindow width={ 420 }>
-                    <ModalHeader borderBottom title={ this.props.caption } onClose={ () => this.props.abort() } />
-                    <ScrollBars>{bodyContent}</ScrollBars>
-                    <ModalFooter>
-                        <FlexSpacer />
-                        {this.props.hideCancelButton || (
-                            <Button caption={ i18n.form.modals.discardButton } onClick={ () => this.props.success(false) } fill="outline" color="secondary" />
-                        )}
-                        <Button caption={ i18n.form.modals.saveButton } onClick={ () => this.props.success(true) } color="accent" />
-                    </ModalFooter>
-                </ModalWindow>
-            </ModalBlocker>
-        );
-    }
-}

package/components/overlays/Dropdown.tsx

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { Dropdown as UuiDropdown } from '@epam/uui-components';
-import { DropdownProps } from '@epam/uui-core';
-
-export function Dropdown(props: DropdownProps) {
-    return <UuiDropdown { ...props } />;
-}

package/components/overlays/DropdownContainer.module.scss

@@ -1,93 +0,0 @@
-.root {
-    --uui-dropdown_container-bg: var(--uui-surface-main);
-    --uui-dropdown_container-shadow: var(--uui-shadow-level-2);
-
-    --uui-dropdown_container-border-radius: 6px;
-
-    &:global(.uui-dropdown-body) {
-        display: flex;
-        flex-direction: column;
-        min-width: 150px;
-        box-sizing: border-box;
-        box-shadow: var(--uui-dropdown_container-shadow);
-        background-color: var(--uui-dropdown_container-bg);
-        border: 0;
-        border-radius: var(--uui-dropdown_container-border-radius);
-        overflow: hidden;
-
-        &:focus-visible {
-            outline: none;
-        }
-    }
-
-    :global(.uui-popover-arrow) {
-        position: absolute;
-        width: 12px;
-        height: 12px;
-        overflow: hidden;
-    }
-
-    :global(.uui-popover-arrow)::after {
-        content: '';
-        position: absolute;
-        background: var(--uui-dropdown_container-bg);
-        width: 8px;
-        height: 8px;
-        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
-    }
-
-    &:global(.padding-6) {
-        padding-left: 6px;
-        padding-right: 6px;
-    }
-
-    &:global(.padding-12) {
-        padding-left: 12px;
-        padding-right: 12px;
-    }
-
-    &:global(.padding-18) {
-        padding-left: 18px;
-        padding-right: 18px;
-    }
-
-    &:global(.padding-24) {
-        padding-left: 24px;
-        padding-right: 24px;
-    }
-
-    &:global(.padding-30) {
-        padding-left: 30px;
-        padding-right: 30px;
-    }
-
-    &:global(.vPadding-6) {
-        padding-top: 3px;
-        padding-bottom: 3px;
-    }
-
-    &:global(.vPadding-12) {
-        padding-top: 6px;
-        padding-bottom: 6px;
-    }
-
-    &:global(.vPadding-18) {
-        padding-top: 9px;
-        padding-bottom: 9px;
-    }
-
-    &:global(.vPadding-24) {
-        padding-top: 12px;
-        padding-bottom: 12px;
-    }
-
-    &:global(.vPadding-30) {
-        padding-top: 15px;
-        padding-bottom: 15px;
-    }
-
-    &:global(.vPadding-48) {
-        padding-top: 24px;
-        padding-bottom: 24px;
-    }
-}

package/components/overlays/DropdownContainer.tsx

@@ -1,20 +0,0 @@
-import { withMods } from '@epam/uui-core';
-import * as uuiComponents from '@epam/uui-components';
-import css from './DropdownContainer.module.scss';
-
-export interface DropdownContainerMods {
-    vPadding?: '6' | '12' | '18' | '24' | '30' | '48';
-    padding?: '6' | '12' | '18' | '24' | '30';
-}
-
-export interface DropdownContainerProps extends uuiComponents.DropdownContainerProps, DropdownContainerMods {}
-
-function applyDropdownContainerMods(mods: DropdownContainerMods) {
-    return [
-        css.root,
-        mods.vPadding && `vPadding-${mods.vPadding}`,
-        mods.padding && `padding-${mods.padding}`,
-    ];
-}
-
-export const DropdownContainer = withMods<uuiComponents.DropdownContainerProps, DropdownContainerMods>(uuiComponents.DropdownContainer, applyDropdownContainerMods);

package/components/overlays/DropdownMenu.module.scss

@@ -1,181 +0,0 @@
-@use 'sass:math';
-@use '../../assets/styles/index' as *;
-
-.root {
-    --uui-dropdown_menu-bg: var(--uui-surface-main);
-    --uui-dropdown_menu-shadow: var(--uui-shadow-level-2);
-    --uui-dropdown_menu-splitter: var(--uui-divider);
-    --uui-dropdown_menu-item-hover: var(--uui-surface-highest);
-    --uui-dropdown_menu-item-active: var(--uui-surface-highest);
-    --uui-dropdown_menu-item-text: var(--uui-text-primary);
-
-    --uui-dropdown_menu-body-font: var(--uui-font);
-    --uui-dropdown_menu-body-font-weight: 400;
-    --uui-dropdown_menu-item-font: var(--uui-font);
-    --uui-dropdown_menu-item-font-weight: 400;
-}
-
-// TODO: need to revamp
-
-@mixin icon-sizes($size, $font-size, $line-height) {
-    $vpadding: math.div(($line-height - $size), 2);
-
-    :global(.uui-checkbox) {
-        width: $size;
-        height: $size;
-        margin: $vpadding 0;
-    }
-
-    :global(.uui-input-label) {
-        font-size: $font-size;
-        line-height: $line-height;
-    }
-
-    :global(.uui-icon) {
-        svg {
-            width: $size;
-        }
-    }
-}
-
-@mixin fillColor($fill, $color: null) {
-    @if ($color) {
-        color: $color;
-        fill: $fill;
-    } @else {
-        color: $fill;
-        fill: $fill;
-    }
-}
-
-@mixin withActive {
-    &:global(.uui-active) {
-        @include fillColor(var(--uui-primary-50));
-
-        &:hover,
-        &:focus {
-            @include fillColor(var(--uui-primary-50) !important);
-        }
-
-        .icon-check {
-            @include fillColor(var(--uui-primary-50));
-        }
-    }
-}
-
-@mixin itemRoot {
-    padding: 9px 12px;
-    line-height: 18px;
-    font-size: 14px;
-    box-sizing: border-box;
-    width: 100%;
-    height: 36px;
-    font-family: var(--uui-dropdown_menu-item-font);
-    font-weight: var(--uui-dropdown_menu-item-font-weight);
-
-    &:focus {
-        outline: none;
-    }
-}
-
-.body-root {
-    @include icon-layout(36px);
-    @include fillColor(var(--uui-icon), var(--uui-text-primary));
-    font-family: var(--uui-dropdown_menu-body-font);
-    font-weight: var(--uui-dropdown_menu-body-font-weight);
-    font-size: 14px;
-    padding: 6px 0;
-    background-color: var(--uui-dropdown_menu-bg);
-    box-shadow: var(--uui-shadow-level-1);
-    border-radius: var(--uui-dropdown_container-border-radius);
-}
-
-.submenu-root-item {
-    .icon-after {
-        transform: rotate(-90deg);
-    }
-}
-
-.icon-check {
-    @include fillColor(transparent);
-}
-
-.splitter-root {
-    display: flex;
-    width: 100%;
-
-    .splitter {
-        width: 100%;
-        border: 0;
-        border-top: 1px solid var(--uui-dropdown_menu-splitter);
-        height: 0;
-    }
-}
-
-.header-root {
-    @include fillColor(var(--uui-text-secondary));
-    @include itemRoot;
-    cursor: default;
-    height: auto;
-    font-size: 12px;
-    padding: 3px 12px;
-}
-
-.item-root {
-    @include icon-layout(36px);
-    @include withActive;
-    @include itemRoot;
-    @include fillColor(var(--uui-icon), var(--uui-text-primary));
-
-    .icon {
-        @include withActive;
-        justify-content: flex-start;
-        width: 18px;
-        height: 18px;
-    }
-
-    &.link {
-        @include withActive;
-        display: flex;
-        align-items: center;
-
-        &:focus {
-            outline: none;
-        }
-    }
-
-    &:global(.-clickable:not(.uui-disabled)) {
-        &:hover {
-            background-color: var(--uui-dropdown_menu-item-hover);
-            fill: var(--uui-icon-active);
-            cursor: pointer;
-        }
-
-        &:focus-visible {
-            @include focus-visible-effect(-2px, null);
-        }
-    }
-
-    &:global(.uui-disabled) {
-        @include fillColor(var(--uui-text-disabled)); // TODO: need possibility to override - in dark theme neutral 40
-
-        &:hover,
-        &:focus {
-            background-color: transparent;
-            cursor: default;
-        }
-    }
-
-    &:global(.uui-opened) {
-        background-color: var(--uui-dropdown_menu-item-active);
-        fill: var(--uui-text-primary);
-    }
-
-    & > *:not(:last-child) {
-        margin: 0 7px 0 0;
-    }
-}
-
-.indent {
-    padding-left: 24px;
-}