@epam/uui 5.3.0-rc.0 → 5.3.0

package/components/overlays/DropdownMenu.tsx

@@ -0,0 +1,262 @@
+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

@@ -0,0 +1,63 @@
+@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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,76 @@
+@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

@@ -0,0 +1,97 @@
+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

@@ -0,0 +1,74 @@
+.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

@@ -0,0 +1,19 @@
+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);