@epam/uui 5.3.0 → 5.4.0

package/components/navigation/MainMenu/Burger/BurgerGroupHeader.module.scss

@@ -1,31 +0,0 @@
-.root {
-    --uui-burger_group-text: var(--uui-text-disabled);
-    --uui-burger_group-bg: var(--uui-neutral-90);
-    --uui-burger_group-line: var(--uui-text-secondary);
-
-    --uui-burger_group-font: var(--uui-font);
-    --uui-burger_group-font-weight: 400;
-}
-
-.group-header {
-    padding: 17px 0 0 0;
-}
-
-.group-name {
-    font-family: var(--uui-burger_group-font);
-    font-weight: var(--uui-burger_group-font-weight);
-    font-size: 12px;
-    color: var(--uui-burger_group-text);
-    background: var(--uui-burger_group-bg);
-    padding: 0 14px 0 18px;
-}
-
-.line {
-    position: absolute;
-    width: 100%;
-    height: 1px;
-    border: 0;
-    background-color: var(--uui-burger_group-line);
-    z-index: -1;
-    margin-top: 11px;
-}

package/components/navigation/MainMenu/Burger/BurgerGroupHeader.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import css from './BurgerGroupHeader.module.scss';
-
-export interface BurgerGroupHeaderProps {
-    caption: string;
-}
-
-export function BurgerGroupHeader(props: BurgerGroupHeaderProps) {
-    return (
-        <div className={ cx(css.root, css.groupHeader, 'uui-burger-group-header') }>
-            <hr className={ css.line } />
-            <span className={ css.groupName }>{props.caption}</span>
-        </div>
-    );
-}

package/components/navigation/MainMenu/Burger/BurgerSearch.module.scss

@@ -1,51 +0,0 @@
-.search-input {
-    --uui-burger_search: var(--uui-neutral-5);
-    --uui-burger_search-fill: var(--uui-text-disabled);
-    --uui-burger_search-bg: var(--uui-neutral-80);
-    --uui-burger_search-placeholder: var(--uui-text-disabled);
-
-    --uui-burger_search-font: var(--uui-font);
-    --uui-burger_search-font-weight: 400;
-    //
-    height: 60px;
-    background-color: var(--uui-burger_search-bg);
-    fill: var(--uui-burger_search-fill);
-    padding: 0 24px;
-    flex-shrink: 0;
-    width: auto;
-
-    :global(.uui-input) {
-        color: var(--uui-burger_search);
-        font-family: var(--uui-burger_search-font);
-        font-weight: var(--uui-burger_search-font-weight);
-
-        &::placeholder {
-            color: var(--uui-burger_search-placeholder);
-        }
-    }
-
-    :global(.uui-caption),
-    :global(.uui-input) {
-        padding: 18px 16px;
-        line-height: 24px;
-        font-size: 14px;
-    }
-
-    :global(.uui-icon) {
-        svg {
-            height: 16px;
-            max-width: 16px;
-        }
-    }
-
-    :global(.uui-icon-cancel) {
-        svg {
-            height: 24px;
-            max-width: 24px;
-        }
-
-        &:hover {
-            cursor: pointer;
-        }
-    }
-}

package/components/navigation/MainMenu/Burger/BurgerSearch.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { TextInput, TextInputProps } from '@epam/uui-components';
-import { ReactComponent as LensIcon } from '../../../../icons/search-18.svg';
-import { ReactComponent as CancelIcon } from '../../../../icons/menu_input_cancel.svg';
-import css from './BurgerSearch.module.scss';
-import cx from 'classnames';
-
-export interface BurgerSearchProps extends TextInputProps {}
-
-export function BurgerSearch(props: BurgerSearchProps) {
-    return (
-        <TextInput
-            cx={ cx(css.searchInput, 'uui-main_menu-burger-search') }
-            iconPosition="left"
-            icon={ LensIcon }
-            placeholder={ props.placeholder }
-            value={ props.value }
-            onValueChange={ props.onValueChange }
-            onCancel={ props.onCancel }
-            cancelIcon={ props.value && CancelIcon }
-        />
-    );
-}

package/components/navigation/MainMenu/Burger/__tests__/Burger.test.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { renderer, mockReactPortalsForSnapshots } from '@epam/uui-test-utils';
-import { Burger } from '../Burger';
-import { BurgerButton } from '../BurgerButton';
-
-describe('Burger', () => {
-    it('should render with maximum props', () => {
-        const { mockClear } = mockReactPortalsForSnapshots();
-        const tree = renderer.create(<Burger width={ 160 } renderBurgerContent={ () => <BurgerButton caption="Home" link={ { pathname: '/' } } /> } />).toJSON();
-        mockClear();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/navigation/MainMenu/Burger/__tests__/BurgerButton.test.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { BurgerButton } from '../BurgerButton';
-import { renderer } from '@epam/uui-test-utils';
-import { ReactComponent as CalendarIcon } from '../../../../../icons/calendar-18.svg';
-
-describe('BurgerButton', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<BurgerButton />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(<BurgerButton caption="Test button" icon={ CalendarIcon } href="#" target="_blank" type="secondary" isDropdown isOpen={ false } />)
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/navigation/MainMenu/Burger/__tests__/BurgerGroupHeader.test.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { BurgerGroupHeader } from '../BurgerGroupHeader';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('BurgerSearch', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<BurgerGroupHeader caption="Test" />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/navigation/MainMenu/Burger/__tests__/BurgerSearch.test.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { BurgerSearch } from '../BurgerSearch';
-import { ReactComponent as CalendarIcon } from '../../../../../icons/calendar-18.svg';
-import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
-
-describe('BurgerSearch', () => {
-    it('should be rendered correctly', async () => {
-        const tree = await renderSnapshotWithContextAsync(<BurgerSearch value={ null } onValueChange={ () => {} } />);
-
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <BurgerSearch value={ null } onValueChange={ () => {} } onAccept={ () => {} } onCancel={ () => {} } icon={ CalendarIcon } iconPosition="right" isDropdown isOpen />,
-        );
-
-        expect(tree).toMatchSnapshot();
-    });
-});

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

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Burger should render with maximum props 1`] = `
-<div
-  className="root uui-burger uui-burger-menu container"
->
-  <button
-    className="uui-burger-button"
-    onClick={[Function]}
-  >
-    <div
-      className="container uui-icon uui-enabled"
-      style={Object {}}
-    >
-      <svg
-        className=""
-      />
-    </div>
-  </button>
-</div>
-`;

package/components/navigation/MainMenu/Burger/__tests__/__snapshots__/BurgerButton.test.tsx.snap

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BurgerButton should be rendered correctly 1`] = `
-<button
-  className="container uui-button-box uui-enabled root uui-main_menu-burger-button button-primary indent-0"
-  onClick={[Function]}
-  tabIndex={-1}
-  type="button"
-/>
-`;
-
-exports[`BurgerButton should be rendered correctly 2`] = `
-<a
-  aria-expanded={false}
-  aria-haspopup={true}
-  className="container uui-button-box uui-enabled -clickable root uui-main_menu-burger-button button-secondary indent-0 dropdown hasIcon"
-  href="#"
-  onClick={[Function]}
-  rel="noopener noreferrer"
-  role="link"
-  tabIndex={0}
-  target="_blank"
->
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-  <div
-    className="uui-caption"
-  >
-    Test button
-  </div>
-</a>
-`;

package/components/navigation/MainMenu/Burger/__tests__/__snapshots__/BurgerGroupHeader.test.tsx.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BurgerSearch should be rendered correctly 1`] = `
-<div
-  className="root groupHeader uui-burger-group-header"
->
-  <hr
-    className="line"
-  />
-  <span
-    className="groupName"
-  >
-    Test
-  </span>
-</div>
-`;

package/components/navigation/MainMenu/Burger/__tests__/__snapshots__/BurgerSearch.test.tsx.snap

@@ -1,53 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BurgerSearch should be rendered correctly 1`] = `
-<div
-  className="container uui-input-box -clickable searchInput uui-main_menu-burger-search"
-  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[`BurgerSearch should be rendered correctly 2`] = `
-<div
-  className="container uui-input-box -clickable searchInput uui-main_menu-burger-search"
-  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>
-`;

package/components/navigation/MainMenu/Burger/index.ts

@@ -1,4 +0,0 @@
-export * from './Burger';
-export * from './BurgerButton';
-export * from './BurgerSearch';
-export * from './BurgerGroupHeader';

package/components/navigation/MainMenu/GlobalMenu.module.scss

@@ -1,32 +0,0 @@
-
-@use  '../../../assets/styles/effects' as *;
-
-.global-menu-btn {
-    display: block;
-    height: 60px;
-    width: 60px;
-    fill: var(--uui-main_menu-icon);
-    flex-shrink: 0;
-    cursor: pointer;
-    background: transparent;
-    border: 0 none;
-    padding: 0;
-
-    &:focus, &:hover {
-        background-color: var(--uui-main_menu-hover);
-        outline: none;
-    }
-
-    &:active {
-        background-color: var(--uui-main_menu-active);
-    }
-
-    &:focus-visible {
-        @include focus-visible-effect(-2px, 0);
-    }
-}
-
-.globalMenuIcon svg {
-    width: 60px;
-    height: 60px;
-}

package/components/navigation/MainMenu/GlobalMenu.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { IAdaptiveItem, IHasCX, IHasRawProps } from '@epam/uui-core';
-import { IconContainer } from '@epam/uui-components';
-import { ReactComponent as GlobalMenuIcon } from '../../../icons/global_menu.svg';
-import css from './GlobalMenu.module.scss';
-
-export interface GlobalMenuProps extends IAdaptiveItem, IHasCX, IHasRawProps<React.HTMLAttributes<HTMLButtonElement>> {}
-
-export const GlobalMenu = React.forwardRef<HTMLButtonElement, GlobalMenuProps>((props, ref) => (
-    <button ref={ ref } id="global_menu_toggle" className={ cx(css.globalMenuBtn, props.cx) } { ...props.rawProps }>
-        <IconContainer icon={ GlobalMenuIcon } cx={ css.globalMenuIcon } />
-    </button>
-));

package/components/navigation/MainMenu/MainMenu.module.scss

@@ -1,53 +0,0 @@
-@use  '../../../assets/styles/effects' as *;
-
-.root {
-    --uui-main_menu-text: var(--uui-neutral-5);
-    --uui-main_menu-text-active: var(--uui-neutral-5);
-    --uui-main_menu-bg: var(--uui-neutral-80);
-    --uui-main_menu-hover: var(--uui-neutral-90);
-    --uui-main_menu-active: var(--uui-neutral-90);
-    --uui-main_menu-border-active: var(--uui-primary-50);
-
-    --uui-main_menu-search-bg: var(--uui-neutral-70);
-    --uui-main_menu-search-border: var(--uui-neutral-70);
-    --uui-main_menu-search-placeholder: var(--uui-text-disabled);
-    --uui-main_menu-search-text: var(--uui-text-disabled);
-    --uui-main_menu-search-icon: var(--uui-icon-disabled);
-
-    --uui-main_menu-icon: var(--uui-neutral-5);
-    --uui-main_menu-icon-hover: var(--uui-neutral-5);
-    --uui-main_menu-icon-active: var(--uui-neutral-5);
-
-    --uui-main_menu-font: var(--uui-font);
-    --uui-main_menu-font-weight: 600;
-    --uui-main_menu-search-font: var(--uui-font);
-    --uui-main_menu-search-font-weight: 400;
-    //
-    height: 60px;
-    min-height: 60px;
-    min-width: 360px;
-    background-color: var(--uui-main_menu-bg);
-    color: var(--uui-main_menu-text);
-    fill: var(--uui-main_menu-icon);
-
-    :global(.uui-mainmenu-server-badge) {
-        position: absolute;
-        left: 80px;
-        bottom: 0;
-    }
-
-    :global(.uui-mainmenu-server-badge-label) {
-        padding: 0 5px;
-        border: 2px solid var(--uui-neutral-0); /* for CI/CD, not themeable  */
-        border-radius: 5px 5px 0 0;
-        border-bottom: 0;
-        font-family: var(--uui-main_menu-font);
-        font-weight: var(--uui-main_menu-font-weight);
-        font-size: 9px;
-        text-transform: uppercase;
-    }
-
-    :global(.-clickable):focus-visible {
-        @include focus-visible-effect(-2px, 0);
-    }
-}

package/components/navigation/MainMenu/MainMenu.tsx

@@ -1,21 +0,0 @@
-import css from './MainMenu.module.scss';
-import { withMods } from '@epam/uui-core';
-import * as uuiComponents from '@epam/uui-components';
-import { Burger } from './Burger';
-import { MainMenuDropdown } from './MainMenuDropdown';
-
-export interface MainMenuMods {}
-
-export type MainMenuProps = uuiComponents.MainMenuProps & MainMenuMods;
-
-function applyMainMenuMods() {
-    return [
-        css.root,
-        'uui-main_menu',
-    ];
-}
-
-export const MainMenu = withMods<uuiComponents.MainMenuProps, MainMenuMods>(uuiComponents.MainMenu, applyMainMenuMods, () => ({
-    Burger,
-    MainMenuDropdown,
-}));

package/components/navigation/MainMenu/MainMenuAvatar.module.scss

@@ -1,41 +0,0 @@
-@use  '../../../assets/styles/effects' as *;
-
-.container {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    height: 60px;
-    padding-left: 18px;
-    padding-right: 6px;
-    background-color: transparent;
-    border: 0 none;
-
-    :global(.uui-caption), :global(.uui-input) {
-        padding-top: 21px;
-        padding-bottom: 21px;
-        min-width: 60px;
-        line-height: 18px;
-        font-size: 18px;
-    }
-
-    &:global(.-clickable) {
-        cursor: pointer;
-
-        &:focus, &:hover {
-            background: var(--uui-main_menu-dropdown-bg);
-            outline: none;
-        }
-
-        &:active {
-            background-color: var(--uui-main_menu-dropdown-bg);
-        }
-
-        &:focus-visible {
-            @include focus-visible-effect(-2px, 0);
-        }
-    }
-}
-
-.open {
-    background: var(--uui-main_menu-dropdown-bg);
-}

package/components/navigation/MainMenu/MainMenuAvatar.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import css from './MainMenuAvatar.module.scss';
-import cx from 'classnames';
-import {
-    IAdaptiveItem, IDropdownToggler, Icon, IHasCX, uuiMarkers,
-} from '@epam/uui-core';
-import { IconContainer } from '@epam/uui-components';
-import { ReactComponent as FoldingArrow } from '../../../icons/folding-arrow-18.svg';
-import { Avatar } from '@epam/uui-components';
-
-export interface MainMenuAvatarProps extends IAdaptiveItem, IDropdownToggler, IHasCX {
-    avatarUrl?: string;
-    icon?: Icon;
-}
-
-export const MainMenuAvatar = React.forwardRef<HTMLButtonElement, MainMenuAvatarProps>((props, ref) => (
-    <button
-        ref={ ref }
-        className={ cx(css.container, props.isDropdown && css.dropdown, props.isOpen && css.open, props.onClick && uuiMarkers.clickable, props.cx) }
-        onClick={ props.onClick }
-    >
-        <Avatar size="36" img={ props.avatarUrl } />
-        {props.icon && <IconContainer icon={ props.icon } />}
-        {props.isDropdown && (
-            <div>
-                <IconContainer icon={ FoldingArrow } flipY={ props.isOpen } />
-            </div>
-        )}
-    </button>
-));

package/components/navigation/MainMenu/MainMenuButton.module.scss

@@ -1,58 +0,0 @@
-@use  '../../../assets/styles/index' as *;
-
-.root {
-    --uui-main_menu-button-font: var(--uui-font);
-    --uui-main_menu-button-font-weight: 600;
-    //
-    flex-shrink: 0;
-    color: var(--uui-main_menu-text);
-    fill: var(--uui-main_menu-icon);
-
-    :global(.uui-caption), :global(.uui-input) {
-        padding: 22px 6px;
-        line-height: 16px;
-        margin-bottom: -3px;
-        font-family: var(--uui-main_menu-button-font);
-        font-weight: var(--uui-main_menu-button-font-weight);
-    }
-
-    &:global(.uui-button-box), &:global(.uui-input-box) {
-        min-height: 60px;
-        padding-right: 6px;
-        padding-left: 6px;
-    }
-
-    :global(.uui-caption) {
-        white-space: nowrap;
-        font-size: 16px;
-    }
-
-    :global(.uui-icon) {
-        svg {
-            width: 18px;
-        }
-    }
-
-    &.type-primary {
-        @include icon-layout(36px);
-    }
-
-    &.type-secondary {
-        @include icon-layout(36px);
-    }
-
-    &:global(.-clickable) {
-        &:hover, &:focus {
-            background-color: var(--uui-main_menu-hover);
-            color: var(--uui-main_menu-text);
-            fill: var(--uui-main_menu-icon-hover);
-        }
-    }
-
-    &:global(.uui-active) {
-        background-color: var(--uui-main_menu-hover);
-        border-bottom: 3px solid var(--uui-main_menu-border-active);
-        color: var(--uui-main_menu-text-active);
-        fill: var(--uui-main_menu-icon-active);
-    }
-}

package/components/navigation/MainMenu/MainMenuButton.tsx

@@ -1,14 +0,0 @@
-import css from './MainMenuButton.module.scss';
-import { Button, ButtonProps } from '@epam/uui-components';
-import { IAdaptiveItem, withMods } from '@epam/uui-core';
-import { ReactComponent as SvgTriangle } from '../../../icons/chevron-down-24.svg';
-
-export interface MainMenuButtonMods {
-    type?: 'primary' | 'secondary';
-}
-
-export const MainMenuButton = withMods<ButtonProps, MainMenuButtonMods & IAdaptiveItem>(
-    Button,
-    (mods) => [css.root, css['type-' + (mods.type || 'primary')]],
-    () => ({ dropdownIcon: SvgTriangle, role: 'menuitem' }),
-);

package/components/navigation/MainMenu/MainMenuDropdown.module.scss

@@ -1,44 +0,0 @@
-@use  '../../../assets/styles/effects' as *;
-
-.dropdown-body {
-    --uui-main_menu-text: var(--uui-neutral-5);
-    --uui-main_menu-text-active: var(--uui-neutral-5);
-    --uui-main_menu-active: var(--uui-neutral-90);
-    --uui-main_menu-border-active: var(--uui-primary-50);
-
-    --uui-main_menu-dropdown-bg: var(--uui-neutral-90);
-    --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-80);
-    --uui-main_menu-dropdown-shadow: none;
-    --uui-main_menu-dropdown-border-radius: none;
-
-    --uui-main_menu-icon: var(--uui-neutral-5);
-    --uui-main_menu-icon-hover: var(--uui-neutral-5);
-    --uui-main_menu-icon-active: var(--uui-neutral-5);
-
-    //
-    display: flex;
-    flex-direction: column;
-    min-width: 200px;
-    background-color: var(--uui-main_menu-dropdown-bg);
-    box-shadow: var(--uui-main_menu-dropdown-shadow);
-    border-radius: var(--uui-main_menu-dropdown-border-radius);
-    overflow: hidden; // to hide children border radius on dropdown body
-
-    :global(.-clickable) {
-        &:global(.uui-button-box):hover {
-            background-color: var(--uui-main_menu-dropdown-bg-hover);
-        }
-
-        &:focus-visible {
-            @include focus-visible-effect(-2px, null);
-        }
-    }
-
-    :global(.uui-button-box) {
-        &:global(.uui-active) {
-            border: 0 none;
-            border-left: 3px solid var(--uui-main_menu-border-active);
-            background-color: var(--uui-main_menu-hover);
-        }
-    }
-}