@epam/uui 5.5.2 → 5.5.4

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,89 +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 { 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';
-
-interface AlertNotificationAction {
-    /*
-    * Defines notification action name.
-    */
-    name: string;
-    /*
-    * Called when action is clicked
-    */
-    action: () => void;
-}
-
-interface AlertMods {
-    /** Alert color */
-    color: 'info' | 'success' | 'warning' | 'error';
-}
-
-export interface AlertCoreProps extends IHasChildren, IHasCX, IHasRawProps<React.HTMLAttributes<HTMLDivElement>> {
-    /** List of actions to display in the alert. Each action has name and 'action' callback */
-    actions?: AlertNotificationAction[];
-    /** 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.
-     * @default '48'
-     */
-    size?: '36' | '48';
-}
-
-/** Represents the properties of the Alert component. */
-export interface AlertProps extends AlertCoreProps, AlertMods {}
-
-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,41 +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> {
-    /** Confirmation modal title */
-    caption: any;
-    /** Confirmation modal content */
-    bodyContent?: any;
-    /** Pass true, to hide cancel button */
-    hideCancelButton?: boolean;
-}
-
-export class ConfirmationModal extends React.Component<ConfirmationModalWindowProps> {
-    render() {
-        let bodyContent;
-
-        if (this.props.bodyContent) {
-            bodyContent = <Panel background="surface-main" 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,4 +0,0 @@
-import { Dropdown as uuiDropdown } from '@epam/uui-components';
-import { DropdownProps, withMods } from '@epam/uui-core';
-
-export const Dropdown = withMods<DropdownProps>(uuiDropdown);

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,27 +0,0 @@
-import { withMods } from '@epam/uui-core';
-import * as uuiComponents from '@epam/uui-components';
-import css from './DropdownContainer.module.scss';
-
-interface DropdownContainerMods {
-    /**
-     * Defines vertical padding.
-     */
-    vPadding?: '6' | '12' | '18' | '24' | '30' | '48';
-    /**
-     * Defines horizontal padding.
-     */
-    padding?: '6' | '12' | '18' | '24' | '30';
-}
-
-/** Represents the properties of a DropdownContainer component. */
-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;
-}