@epam/uui 5.3.0 → 5.4.1

package/components/overlays/DropdownMenu.tsx

@@ -1,262 +0,0 @@
-import React, { useRef, useContext, useState } from 'react';
-import {
-    cx, IDropdownToggler, withMods, uuiMod, UuiContext, IHasChildren, VPanelProps, IHasIcon, ICanRedirect, IHasCaption, IDisableable,
-    IAnalyticableClick, IHasCX, IClickable, DropdownBodyProps,
-} from '@epam/uui-core';
-import { Text, FlexRow, Anchor, IconContainer, Dropdown, FlexSpacer, DropdownContainerProps } from '@epam/uui-components';
-import { DropdownContainer } from './DropdownContainer';
-import { Switch } from '../inputs';
-import { IconButton } from '../buttons';
-import { systemIcons } from '../../icons/icons';
-import css from './DropdownMenu.module.scss';
-
-const icons = systemIcons['36'];
-export interface IDropdownMenuItemProps extends IHasIcon, ICanRedirect, IHasCX, IDisableable, IAnalyticableClick, IDropdownToggler {
-    isSelected?: boolean;
-    isActive?: boolean;
-    indent?: boolean;
-}
-
-export interface DropdownMenuContainerProps extends VPanelProps, IHasChildren, DropdownBodyProps, Pick<DropdownContainerProps, 'focusLock'> {
-    closeOnKey?: React.KeyboardEvent<HTMLElement>['key'];
-    minWidth?: number;
-}
-
-export enum IDropdownControlKeys {
-    ENTER = 'Enter',
-    ESCAPE = 'Escape',
-    LEFT_ARROW = 'ArrowLeft',
-    RIGHT_ARROW = 'ArrowRight',
-    UP_ARROW = 'ArrowUp',
-    DOWN_ARROW = 'ArrowDown'
-}
-
-function DropdownMenuContainer(props: DropdownMenuContainerProps) {
-    const menuRef = useRef<HTMLMenuElement>(null);
-    const [currentlyFocused, setFocused] = useState<number>(0);
-    const menuItems: HTMLElement[] = menuRef.current ? Array.from(menuRef.current.querySelectorAll(`[role="menuitem"]:not(.${uuiMod.disabled})`)) : [];
-
-    const changeFocus = (nextFocusedIndex: number) => {
-        if (menuItems.length > 0) {
-            setFocused(nextFocusedIndex);
-            menuItems[nextFocusedIndex].focus();
-        }
-    };
-
-    const handleArrowKeys = (e: React.KeyboardEvent<HTMLMenuElement>) => {
-        const lastMenuItemsIndex = menuItems.length - 1;
-
-        if (e.key === IDropdownControlKeys.UP_ARROW) {
-            changeFocus(currentlyFocused > 0 ? currentlyFocused - 1 : lastMenuItemsIndex);
-        } else if (e.key === IDropdownControlKeys.DOWN_ARROW) {
-            changeFocus(currentlyFocused < lastMenuItemsIndex ? currentlyFocused + 1 : 0);
-        } else if (e.key === props.closeOnKey && props.onClose) {
-            e.stopPropagation();
-            props.onClose();
-        }
-    };
-
-    return (
-        <DropdownContainer
-            { ...props }
-            rawProps={ { ...props.rawProps, role: 'menu' } }
-            ref={ menuRef }
-            width={ props.minWidth }
-            lockProps={ { onKeyDown: handleArrowKeys } }
-            cx={ [props.cx, css.root] }
-        />
-    );
-}
-
-export const DropdownMenuBody = withMods<DropdownMenuContainerProps>(
-    DropdownMenuContainer,
-    () => [css.bodyRoot],
-    (props) => {
-        return ({ closeOnKey: IDropdownControlKeys.ESCAPE, ...props });
-    },
-);
-
-export const DropdownMenuButton = React.forwardRef<any, IDropdownMenuItemProps>((props, ref) => {
-    const context = useContext(UuiContext);
-
-    const {
-        icon, iconPosition, onIconClick, caption, isDisabled, isSelected, isActive, link, href, onClick, toggleDropdownOpening, isDropdown, isOpen, target,
-    } = props;
-
-    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-        if (isDisabled || !onClick) return;
-        onClick(event);
-        context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
-    };
-
-    const handleOpenDropdown = (event: React.KeyboardEvent<HTMLElement>) => {
-        if (event.key === IDropdownControlKeys.RIGHT_ARROW && isDropdown) {
-            toggleDropdownOpening(true);
-        } else if (event.key === IDropdownControlKeys.ENTER && onClick) {
-            onClick(event);
-        }
-    };
-
-    const getMenuButtonContent = () => {
-        const isIconBefore = Boolean(icon && iconPosition !== 'right');
-        const isIconAfter = Boolean(icon && iconPosition === 'right');
-        const iconElement = (
-            <IconButton
-                icon={ icon }
-                color={ isActive ? 'info' : 'neutral' }
-                onClick={ onIconClick }
-                isDisabled={ isDisabled }
-                cx={ cx(css.root, css.icon, iconPosition === 'right' ? css.iconAfter : css.iconBefore) }
-            />
-        );
-
-        return (
-            <>
-                { isIconBefore && iconElement }
-                <Text cx={ props.indent && css.indent }>{ caption }</Text>
-                { isIconAfter && (
-                    <>
-                        <FlexSpacer />
-                        { iconElement }
-                    </>
-                ) }
-            </>
-        );
-    };
-
-    const isAnchor = Boolean(link || href);
-
-    const itemClassNames = cx(css.root, props.cx, css.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened);
-
-    return isAnchor ? (
-        <Anchor
-            cx={ cx(css.link, itemClassNames) }
-            link={ link }
-            href={ href }
-            rawProps={ { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 } }
-            onClick={ handleClick }
-            isLinkActive={ isActive }
-            isDisabled={ isDisabled }
-            forwardedRef={ ref }
-            target={ target }
-        >
-            { getMenuButtonContent() }
-        </Anchor>
-    ) : (
-        <FlexRow
-            rawProps={ {
-                tabIndex: isDisabled ? -1 : 0,
-                role: 'menuitem',
-                onKeyDown: isDisabled ? null : handleOpenDropdown,
-            } }
-            cx={ itemClassNames }
-            onClick={ handleClick }
-            ref={ ref }
-        >
-            { getMenuButtonContent() }
-            { isSelected && <IconContainer icon={ icons.accept } cx={ cx(css.root, css.selectedCheckmark) } /> }
-        </FlexRow>
-    );
-});
-
-DropdownMenuButton.displayName = 'DropdownMenuButton';
-
-export function DropdownMenuSplitter(props: IHasCX) {
-    return (
-        <div className={ cx(css.root, props.cx, css.splitterRoot) }>
-            <hr className={ css.splitter } />
-        </div>
-    );
-}
-
-interface IDropdownMenuHeader extends IHasCX, IHasCaption {}
-
-export function DropdownMenuHeader(props: IDropdownMenuHeader) {
-    return (
-        <div className={ cx('uui-dropdown-menu-header', css.root, props.cx, css.headerRoot) }>
-            <span className={ css.header }>{ props.caption }</span>
-        </div>
-    );
-}
-
-interface IDropdownSubMenu extends IHasChildren, IHasCaption, IHasIcon, IDropdownMenuItemProps {
-    openOnHover?: boolean;
-}
-
-export function DropdownSubMenu(props: IDropdownSubMenu) {
-    const subMenuModifiers = [
-        {
-            name: 'offset',
-            options: {
-                offset: ({ placement }: { placement: string }) => {
-                    if (placement === 'right-start') {
-                        return [-6, 0];
-                    } else {
-                        return [6, 0];
-                    }
-                },
-            },
-        },
-    ];
-
-    return (
-        <Dropdown
-            openOnHover={ props.openOnHover || true }
-            closeOnMouseLeave="boundary"
-            openDelay={ 400 }
-            closeDelay={ 400 }
-            placement="right-start"
-            modifiers={ subMenuModifiers }
-            renderBody={ (dropdownProps) => <DropdownMenuBody closeOnKey={ IDropdownControlKeys.LEFT_ARROW } { ...props } { ...dropdownProps } /> }
-            renderTarget={ ({ toggleDropdownOpening, ...targetProps }) => (
-                <DropdownMenuButton
-                    cx={ cx(css.root, css.submenuRootItem) }
-                    icon={ icons.foldingArrow }
-                    iconPosition="right"
-                    isDropdown={ true }
-                    toggleDropdownOpening={ toggleDropdownOpening }
-                    { ...props }
-                    { ...targetProps }
-                />
-            ) }
-        />
-    );
-}
-
-interface IDropdownMenuSwitchButton extends IHasCX, IHasCaption, IHasIcon, IDisableable, IAnalyticableClick, IClickable {
-    onValueChange: (value: boolean) => void;
-    isSelected: boolean;
-}
-
-export function DropdownMenuSwitchButton(props: IDropdownMenuSwitchButton) {
-    const context = useContext(UuiContext);
-
-    const {
-        icon, caption, isDisabled, isSelected, onValueChange,
-    } = props;
-
-    const onHandleValueChange = (value: boolean) => {
-        if (isDisabled || !onValueChange) return;
-        onValueChange(value);
-        context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
-    };
-
-    const handleKeySelect = (e: React.KeyboardEvent<HTMLElement>) => {
-        if (e.key === IDropdownControlKeys.ENTER) {
-            onHandleValueChange(!isSelected);
-        }
-    };
-
-    return (
-        <FlexRow
-            cx={ cx(props.cx, css.itemRoot, isDisabled && uuiMod.disabled) }
-            onClick={ () => onHandleValueChange(!isSelected) }
-            rawProps={ { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } }
-        >
-            { icon && <IconContainer icon={ icon } cx={ css.iconBefore } /> }
-            <Text>{ caption }</Text>
-            <FlexSpacer />
-            <Switch value={ isSelected } tabIndex={ -1 } onValueChange={ onHandleValueChange } />
-        </FlexRow>
-    );
-}

package/components/overlays/Modals.module.scss

@@ -1,63 +0,0 @@
-@use  '../../assets/styles/index' as *;
-
-.root {
-    --uui-modals-shadow: var(--uui-shadow-level-3);
-    --uui-modals-bg: var(--uui-surface-main);
-
-    --uui-modals-border-radius: var(--uui-border-radius);
-}
-
-.modal-blocker {
-    animation-duration: 0.3s;
-    animation-name: animateModalBlocker;
-    opacity: 1;
-    transition: all 0.3s ease-out;
-    background-color: var(--uui-overlay);
-
-    @keyframes animateModalBlocker {
-        from { opacity: 0; }
-        to { opacity: 1; }
-    }
-}
-
-.modal {
-    &:global(.uui-modal-window) {
-        background-color: var(--uui-modals-bg);
-        overflow: auto;
-        border-radius: var(--uui-modals-border-radius);
-        max-height: 80vh;
-        max-width: 100vw;
-        box-shadow: var(--uui-modals-shadow);
-
-        @media (max-width: 640px) {
-            min-width: 100vw;
-            max-height: 100dvh;
-            border-radius: 0;
-        }
-
-        :global(.uui-shadow-top)::before {
-            background: var(--uui-divider);
-            height: 1px;
-        }
-
-        :global(.uui-shadow-bottom)::after {
-            background: var(--uui-divider);
-            height: 1px;
-        }
-    }
-}
-
-.modal-footer {
-    border-bottom-left-radius: var(--uui-modals-border-radius);
-    border-bottom-right-radius: var(--uui-modals-border-radius);
-
-    &.border-top {
-        border-top: 1px solid var(--uui-divider);
-    }
-}
-
-.modal-header {
-    border-top-left-radius: var(--uui-modals-border-radius);
-    border-top-right-radius: var(--uui-modals-border-radius);
-}
-

package/components/overlays/Modals.tsx

@@ -1,82 +0,0 @@
-import * as React from 'react';
-import { withMods, ModalFooterCoreProps, ModalWindowProps as UuiModalWindowProps, ModalBlockerProps, ModalHeaderCoreProps } from '@epam/uui-core';
-import { ModalBlocker as uuiModalBlocker, ModalWindow as uuiModalWindow } from '@epam/uui-components';
-import { FlexRow, FlexSpacer, RowMods, FlexCell } from '../layout/FlexItems';
-import { IconButton } from '../buttons';
-import { Text } from '../typography';
-import { ReactComponent as CrossIcon } from '../../icons/navigation-close-24.svg';
-import css from './Modals.module.scss';
-
-export const ModalBlocker = withMods<ModalBlockerProps>(uuiModalBlocker, () => [css.modalBlocker]);
-
-export interface ModalWindowMods {
-    width?: number;
-    height?: number;
-}
-
-export type ModalWindowProps = UuiModalWindowProps & ModalWindowMods;
-
-export const ModalWindow = withMods<UuiModalWindowProps, ModalWindowMods>(
-    uuiModalWindow,
-    () => [css.root, css.modal],
-    (props) => ({
-        style: {
-            ...props.style,
-            width: `${props.width || 420}px`,
-            height: props.height ? `${props.height}px` : 'auto',
-        },
-    }),
-);
-
-export interface ModalHeaderProps extends RowMods, ModalHeaderCoreProps {}
-
-export class ModalHeader extends React.Component<ModalHeaderProps> {
-    render() {
-        return (
-            <FlexRow
-                padding={ this.props.padding || '24' }
-                vPadding="12"
-                borderBottom={ this.props.borderBottom }
-                cx={ [css.root, css.modalHeader, this.props.cx] }
-                spacing="12"
-                rawProps={ this.props.rawProps }
-            >
-                {this.props.title && (
-                    <Text size="48" fontSize="18" fontWeight="600">
-                        {this.props.title}
-                    </Text>
-                )}
-                {this.props.children}
-                {this.props.onClose && <FlexSpacer />}
-                {this.props.onClose && (
-                    <FlexCell shrink={ 0 } width="auto">
-                        <IconButton rawProps={ { 'aria-label': 'Close modal' } } icon={ CrossIcon } onClick={ this.props.onClose } />
-                    </FlexCell>
-                )}
-            </FlexRow>
-        );
-    }
-}
-
-export interface ModalFooterProps extends RowMods, ModalFooterCoreProps {}
-
-export class ModalFooter extends React.Component<ModalFooterProps> {
-    render() {
-        return (
-            <FlexRow
-                spacing={ this.props.spacing || '12' }
-                cx={ [
-                    css.root,
-                    css.modalFooter,
-                    this.props.borderTop && css.borderTop,
-                    this.props.cx,
-                ] }
-                padding={ this.props.padding || '24' }
-                vPadding={ this.props.vPadding || '24' }
-                rawProps={ this.props.rawProps }
-            >
-                {this.props.children}
-            </FlexRow>
-        );
-    }
-}

package/components/overlays/NotificationCard.module.scss

@@ -1,76 +0,0 @@
-@use '../../assets/styles/index' as *;
-
-.root {
-    --uui-notification_card-bg: var(--uui-surface-main);
-    --uui-notification_card-border: var(--uui-color-50);
-    --uui-notification_card-fill: var(--uui-color-50);
-
-    --uui-notification_card-border-radius: var(--uui-border-radius);
-    --uui-notification_card-border-width: 0;
-    --uui-notification_card-border-top-width: 6px;
-    --uui-notification_card-shadow: var(--uui-shadow-level-2); //TODO: may change in the future
-    //
-    border-style: solid;
-    border-color: var(--uui-notification_card-border, transparent);
-    border-width: var(--uui-notification_card-border-width);
-    border-top-width: var(--uui-notification_card-border-top-width);
-    padding: 6px 18px;
-    width: 360px;
-    background: var(--uui-notification_card-bg, var(--uui-surface-main));
-    display: flex;
-    overflow: hidden;
-    border-radius: var(--uui-notification_card-border-radius);
-    box-shadow: var(--uui-notification_card-shadow);
-
-    @media (max-width: 720px) {
-        width: 100%;
-    }
-
-    .icon-wrapper {
-        padding: 6px 0;
-    }
-
-    .action-wrapper {
-        display: flex;
-    }
-
-    .action-link:not(:last-child) {
-        margin-right: 12px;
-    }
-
-    .close-icon {
-        padding: 6px 0;
-    }
-
-    .main-path {
-        width: 100%;
-        display: flex;
-        align-self: baseline;
-    }
-
-    .content {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        width: 100%;
-        margin: 0 12px;
-    }
-
-    .clear-button {
-        justify-content: center;
-        align-items: center;
-        height: 48px;
-        padding: 0 18px;
-    }
-
-    .close-wrapper {
-        display: flex;
-        align-items: flex-start;
-    }
-
-    .icon-wrapper {
-        :global(.uui-icon) {
-            fill: var(--uui-notification_card-fill);
-        }
-    }
-}

package/components/overlays/NotificationCard.tsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { IconContainer } from '@epam/uui-components';
-import { INotification, Icon, IHasChildren, IHasCX, UuiContext, UuiContexts, IHasRawProps } from '@epam/uui-core';
-import { IconButton, LinkButton } from '../buttons';
-import { SemanticColor } from '../types';
-import { i18n } from '../../i18n';
-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/snackbar/cross.svg';
-import css from './NotificationCard.module.scss';
-
-interface NotificationAction extends IHasRawProps<React.ButtonHTMLAttributes<HTMLButtonElement>> {
-    name: string;
-    action: () => void;
-}
-
-export interface DefaultNotificationProps extends INotification, IHasChildren, IHasCX, IHasRawProps<React.HTMLAttributes<HTMLDivElement>> {
-    actions?: NotificationAction[];
-}
-
-export interface NotificationCardProps extends DefaultNotificationProps {
-    icon?: Icon;
-    color?: SemanticColor;
-}
-
-export const NotificationCard = React.forwardRef<HTMLDivElement, NotificationCardProps>((props, ref) => {
-    const notificationCardNode = React.useRef(null);
-
-    React.useImperativeHandle(ref, () => notificationCardNode.current, [notificationCardNode.current]);
-
-    React.useLayoutEffect(() => {
-        notificationCardNode.current?.addEventListener('mouseenter', props.clearTimer);
-        notificationCardNode.current?.addEventListener('mouseleave', props.refreshTimer);
-        return () => {
-            notificationCardNode.current?.removeEventListener('mouseenter', props.clearTimer);
-            notificationCardNode.current?.removeEventListener('mouseleave', props.refreshTimer);
-        };
-    }, []);
-
-    return (
-        <div role="alert" className={ cx('uui-notification_card', props.color && `uui-color-${props.color}`, css.root, props.cx) } ref={ notificationCardNode } { ...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="36" rawProps={ action.rawProps } />
-                            ))}
-                        </div>
-                    )}
-                </div>
-                {props.onClose && (
-                    <div className={ css.closeWrapper }>
-                        <IconButton icon={ CrossIcon } color="neutral" onClick={ props.onClose } cx={ css.closeIcon } />
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-});
-
-export const WarningNotification = React.forwardRef<HTMLDivElement, DefaultNotificationProps>((props, ref) => (
-    <NotificationCard icon={ WarningIcon } color="warning" { ...props } ref={ ref } cx={ props.cx } />
-));
-
-export const SuccessNotification = React.forwardRef<HTMLDivElement, DefaultNotificationProps>((props, ref) => (
-    <NotificationCard icon={ SuccessIcon } color="success" { ...props } ref={ ref } cx={ props.cx } />
-));
-
-export const HintNotification = React.forwardRef<HTMLDivElement, DefaultNotificationProps>((props, ref) => (
-    <NotificationCard icon={ HintIcon } color="info" { ...props } ref={ ref } cx={ props.cx } />
-));
-
-export const ErrorNotification = React.forwardRef<HTMLDivElement, DefaultNotificationProps>((props, ref) => (
-    <NotificationCard icon={ ErrorIcon } color="error" { ...props } ref={ ref } cx={ props.cx } />
-));
-
-export class ClearNotification extends React.Component<{}> {
-    public static contextType = UuiContext;
-    public context: UuiContexts;
-    render() {
-        return (
-            <div className={ cx(css.notificationWrapper, css.clearButton) }>
-                <LinkButton caption={ i18n.notificationCard.closeAllNotificationsButton } onClick={ () => this.context.uuiNotifications.clearAll() } />
-            </div>
-        );
-    }
-}

package/components/overlays/Tooltip.module.scss

@@ -1,74 +0,0 @@
-.root {
-    --uui-tooltip-bg: var(--uui-color-50);
-    --uui-tooltip-border: var(--uui-tooltip-bg);
-    --uui-tooltip-text: var(--uui-color-contrast);
-    --uui-tooltip-shadow: var(--uui-shadow-level-2, 0 2px 18px 0 rgba(44, 47, 60, 0.3), 0 1px 4px 0 rgba(44, 47, 60, 0.5)); /* WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442 */
-    --uui-tooltip-arrow-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
-
-    --uui-tooltip-border-radius: var(--uui-border-radius);
-    --uui-tooltip-font: var(--uui-font);
-    --uui-tooltip-font-weight: 400;
-    //
-    :global(.uui-tooltip-body) {
-        padding: 6px 12px;
-        line-height: 24px;
-        font-size: 14px;
-        font-family: var(--uui-tooltip-font);
-        font-weight: var(--uui-tooltip-font-weight);
-        box-shadow: var(--uui-tooltip-shadow);
-        word-wrap: break-word;
-        border-radius: var(--uui-tooltip-border-radius);
-        border: 1px solid var(--uui-tooltip-border);
-    }
-
-    :global(.uui-popover-arrow) {
-        position: absolute;
-        width: 12px;
-        height: 12px;
-        overflow: hidden;
-    }
-
-    :global(.uui-popover-arrow)::after {
-        content: '';
-        position: absolute;
-        width: 8px;
-        height: 8px;
-        box-shadow: var(--uui-tooltip-arrow-shadow);
-        box-sizing: border-box;
-    }
-
-    //Colors
-    :global(.uui-tooltip-body) {
-        background-color: var(--uui-tooltip-bg);
-        color: var(--uui-tooltip-text);
-    }
-
-    &:global(.uui-tooltip-container) {
-        :global(.uui-popover-arrow[data-placement^='right'])::after,
-        :global(.uui-popover-arrow[data-placement^='left'])::after,
-        :global(.uui-popover-arrow[data-placement^='top'])::after,
-        :global(.uui-popover-arrow[data-placement^='bottom'])::after {
-            background: var(--uui-tooltip-bg);
-        }
-
-        :global(.uui-popover-arrow[data-placement^='right'])::after {
-            border-bottom: 1px solid var(--uui-tooltip-border);
-            border-left: 1px solid var(--uui-tooltip-border);
-        }
-
-        :global(.uui-popover-arrow[data-placement^='left'])::after {
-            border-top: 1px solid var(--uui-tooltip-border);
-            border-right: 1px solid var(--uui-tooltip-border);
-        }
-
-        :global(.uui-popover-arrow[data-placement^='bottom'])::after {
-            border-top: 1px solid var(--uui-tooltip-border);
-            border-left: 1px solid var(--uui-tooltip-border);
-        }
-
-        :global(.uui-popover-arrow[data-placement^='top'])::after {
-            border-bottom: 1px solid var(--uui-tooltip-border);
-            border-right: 1px solid var(--uui-tooltip-border);
-        }
-    }
-}

package/components/overlays/Tooltip.tsx

@@ -1,19 +0,0 @@
-import { withMods } from '@epam/uui-core';
-import { Tooltip as uuiTooltip, TooltipProps as UuiTooltipProps } from '@epam/uui-components';
-import css from './Tooltip.module.scss';
-
-export interface TooltipMods {
-    /** Tooltip color */
-    color?: 'neutral' | 'inverted' | 'critical';
-}
-
-export type TooltipProps = UuiTooltipProps & TooltipMods;
-
-function applyTooltipMods(mods: TooltipMods) {
-    return [
-        css.root,
-        `uui-color-${mods.color || 'inverted'}`,
-    ];
-}
-
-export const Tooltip = withMods<TooltipProps, TooltipMods>(uuiTooltip, applyTooltipMods);