@epam/uui 5.3.0 → 5.4.0

package/components/navigation/MainMenu/MainMenuDropdown.tsx

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import FocusLock from 'react-focus-lock';
-import cx from 'classnames';
-import { Dropdown, MainMenuDropdownProps } from '@epam/uui-components';
-import { MainMenuButton } from './MainMenuButton';
-import css from './MainMenuDropdown.module.scss';
-
-export class MainMenuDropdown extends React.Component<MainMenuDropdownProps> {
-    render() {
-        return (
-            <Dropdown
-                renderTarget={ (props) => (
-                    <MainMenuButton caption={ this.props.caption } { ...props } rawProps={ this.props.rawProps } isLinkActive={ this.props.isLinkActive } isDropdown />
-                ) }
-                renderBody={ (props) => {
-                    const handleEscape = (e: React.KeyboardEvent<HTMLElement>) => {
-                        if (e.key === 'Escape' && props.isOpen) {
-                            props.onClose();
-                        }
-                    };
-
-                    return (
-                        <FocusLock returnFocus persistentFocus lockProps={ { onKeyDown: handleEscape } }>
-                            <div className={ cx(css.dropdownBody, 'uui-main_menu-dropdown') }>
-                                {this.props.renderBody
-                                    ? this.props.renderBody({ ...props })
-                                    : React.Children.map<React.ReactElement, React.ReactElement>(this.props.children as React.ReactElement[], (item) => {
-                                        if (!item) return item;
-                                        return React.createElement(item.type, {
-                                            ...item.props,
-                                            onClick: item.props.onClick
-                                                ? () => {
-                                                    item.props.onClick();
-                                                    props.onClose();
-                                                }
-                                                : null,
-                                        });
-                                    })}
-                            </div>
-                        </FocusLock>
-                    );
-                } }
-                placement="bottom-start"
-            />
-        );
-    }
-}

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

@@ -1,25 +0,0 @@
-.container {
-    height: 60px;
-    min-width: 48px;
-    padding-left: 12px;
-    padding-right: 12px;
-    display: flex;
-    justify-content: center;
-    flex-shrink: 0;
-    cursor: pointer;
-    fill: var(--uui-main_menu-icon);
-
-    &:global(.-clickable) {
-        &:hover {
-            background: var(--uui-main_menu-hover);
-            fill: var(--uui-main_menu-icon-hover);
-        }
-
-        &:active {
-            background-color: var(--uui-main_menu-active);
-            fill: var(--uui-main_menu-icon-active);
-        }
-    }
-}
-
-

package/components/navigation/MainMenu/MainMenuIcon.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { Icon, IAdaptiveItem, cx } from '@epam/uui-core';
-import { ButtonProps } from '@epam/uui-components';
-import { IconButton } from '../../buttons';
-import css from './MainMenuIcon.module.scss';
-
-export interface MainMenuIconProps extends ButtonProps, IAdaptiveItem {
-    icon: Icon;
-}
-
-export const MainMenuIcon = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, MainMenuIconProps>((props, ref) => (
-    <IconButton ref={ ref } icon={ props.icon } cx={ cx(props.cx, css.container) } { ...props } />
-));

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

@@ -1,51 +0,0 @@
-.search-input {
-    flex-basis: 200px;
-    max-width: 500px;
-    height: 36px;
-    min-width: 36px;
-    border-radius: 18px;
-    background-color: var(--uui-main_menu-search-bg);
-    fill: var(--uui-main_menu-search-icon);
-    padding: 0 6px;
-    margin: 0 12px;
-    transition: background-color 0.3s ease-out, flex-basis 0.3s ease-in-out;
-
-    :global(.uui-input) {
-        color: var(--uui-main_menu-search-text);
-        font-family: var(--uui-main_menu-search-font);
-        font-weight: var(--uui-main_menu-search-font-weight, normal);
-
-        &::placeholder {
-            color: var(--uui-main_menu-search-placeholder);
-        }
-    }
-
-    :global(.uui-caption),
-    :global(.uui-input) {
-        padding: 8px 6px;
-        line-height: 18px;
-        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;
-        }
-    }
-
-    &:global(.uui-input-box) {
-        min-height: 36px;
-    }
-}

package/components/navigation/MainMenu/MainMenuSearch.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { TextInputProps, TextInput } from '@epam/uui-components';
-import { ReactComponent as LensIcon } from '../../../icons/search-18.svg';
-import { ReactComponent as CancelIcon } from '../../../icons/menu_input_cancel.svg';
-import { cx, IAdaptiveItem, IEditableDebouncer } from '@epam/uui-core';
-import css from './MainMenuSearch.module.scss';
-
-export interface MainMenuSearchProps extends TextInputProps, IAdaptiveItem {}
-
-export const MainMenuSearch = React.forwardRef<HTMLInputElement, MainMenuSearchProps>((props, ref) => (
-    <IEditableDebouncer
-        { ...props }
-        render={ (iEditable) => (
-            <TextInput
-                iconPosition="left"
-                icon={ LensIcon }
-                cancelIcon={ props.value?.length > 0 && CancelIcon }
-                { ...props }
-                { ...iEditable }
-                ref={ ref }
-                cx={ cx(css.searchInput, props.cx) }
-                { ...props.rawProps }
-            />
-        ) }
-    />
-));

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

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

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import { MainMenu } from '../MainMenu';
-import { MainMenuButton } from '../MainMenuButton';
-import { BurgerButton } from '../Burger';
-import ReactDOM from 'react-dom';
-import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
-
-describe('MainMenu', () => {
-    const oldPortal = ReactDOM.createPortal;
-
-    beforeAll(() => {
-        ReactDOM.createPortal = (node) => node as any;
-    });
-
-    afterAll(() => {
-        ReactDOM.createPortal = oldPortal;
-    });
-
-    it('should be rendered correctly', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <MainMenu>
-                <MainMenuButton />
-            </MainMenu>,
-        );
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <MainMenu
-                renderBurger={ () => <BurgerButton /> }
-                logoLink={ { pathname: '/' } }
-                appLogoUrl=""
-                logoWidth={ 120 }
-                isTransparent
-                serverBadge="Dev"
-                tooltipTechInfo="Tech Info"
-            >
-                <MainMenuButton />
-            </MainMenu>,
-        );
-
-        expect(tree).toMatchSnapshot();
-    });
-});

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

@@ -1,27 +0,0 @@
-import React from 'react';
-import { renderer } from '@epam/uui-test-utils';
-import { MainMenuAvatar } from '../MainMenuAvatar';
-
-describe('MainMenuAvatar', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<MainMenuAvatar />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <MainMenuAvatar
-                    avatarUrl="https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/avatar_placeholder.jpg"
-                    isDropdown
-                    isOpen={ false }
-                    collapseToMore
-                    estimatedWidth={ 120 }
-                    showInBurgerMenu
-                    priority={ 6 }
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import { renderer } from '@epam/uui-test-utils';
-import { MainMenuButton } from '../MainMenuButton';
-
-describe('MainMenuButton', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<MainMenuButton />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <MainMenuButton
-                    caption="Test button"
-                    type="primary"
-                    target="_blank"
-                    link={ { pathname: '/' } }
-                    isDropdown
-                    isOpen={ false }
-                    collapseToMore
-                    estimatedWidth={ 120 }
-                    showInBurgerMenu
-                    priority={ 6 }
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { renderer } from '@epam/uui-test-utils';
-import { MainMenuDropdown } from '../MainMenuDropdown';
-import { MainMenuButton } from '../MainMenuButton';
-
-describe('MainMenuDropdown', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<MainMenuDropdown />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <MainMenuDropdown caption="Test button" estimatedWidth={ 120 } priority={ 6 }>
-                    <MainMenuButton collapseToMore caption="Impact" />
-                    <MainMenuButton collapseToMore caption="ENGX" />
-                    <MainMenuButton collapseToMore caption="Cloud" />
-                </MainMenuDropdown>,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

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

@@ -1,18 +0,0 @@
-import React from 'react';
-import { renderer } from '@epam/uui-test-utils';
-import { MainMenuIcon } from '../MainMenuIcon';
-import { ReactComponent as CalendarIcon } from '../../../../icons/calendar-18.svg';
-
-describe('MainMenuIcon', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<MainMenuIcon icon={ CalendarIcon } />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(<MainMenuIcon icon={ CalendarIcon } target="_blank" link={ { pathname: '/' } } collapseToMore estimatedWidth={ 120 } priority={ 6 } />)
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { MainMenuSearch } from '../MainMenuSearch';
-import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
-
-describe('MainMenuSearch', () => {
-    it('should be rendered correctly', async () => {
-        const tree = await renderSnapshotWithContextAsync(<MainMenuSearch value={ null } onValueChange={ jest.fn } />);
-
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <MainMenuSearch
-                value="test"
-                onValueChange={ jest.fn }
-                caption="Test button"
-                type="primary"
-                collapseToMore
-                estimatedWidth={ 120 }
-                showInBurgerMenu
-                priority={ 6 }
-            />,
-        );
-
-        expect(tree).toMatchSnapshot();
-    });
-});

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

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GlobalMenu should be rendered correctly 1`] = `
-<button
-  className="globalMenuBtn"
-  id="global_menu_toggle"
->
-  <div
-    className="container uui-icon uui-enabled globalMenuIcon"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-</button>
-`;

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

@@ -1,103 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MainMenu should be rendered correctly 1`] = `
-<nav
-  className="root uui-main_menu uui-mainmenu-container container"
->
-  <div
-    className="itemsContainer mainWrapper"
-  >
-    <div
-      className="uui-flex-row container align-items-center"
-      style={
-        Object {
-          "columnGap": undefined,
-          "rowGap": undefined,
-        }
-      }
-    >
-      <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>
-      <button
-        className="container uui-button-box uui-enabled root type-primary"
-        onClick={[Function]}
-        tabIndex={-1}
-        type="button"
-      />
-    </div>
-  </div>
-</nav>
-`;
-
-exports[`MainMenu should be rendered correctly 2`] = `
-<nav
-  className="root uui-main_menu uui-mainmenu-container container uui-mainmenu-transparent"
->
-  <div
-    className="itemsContainer mainWrapper"
-  >
-    <div
-      className="uui-flex-row container align-items-center"
-      style={
-        Object {
-          "columnGap": undefined,
-          "rowGap": undefined,
-        }
-      }
-    >
-      <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>
-      <button
-        className="container uui-button-box uui-enabled root type-primary"
-        onClick={[Function]}
-        tabIndex={-1}
-        type="button"
-      />
-    </div>
-  </div>
-  <div
-    className="uui-mainmenu-server-badge"
-  >
-    <div
-      className="uui-mainmenu-server-badge-label"
-      style={
-        Object {
-          "background": "#39b7ac",
-        }
-      }
-    >
-      Dev
-    </div>
-  </div>
-</nav>
-`;

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

@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MainMenuAvatar should be rendered correctly 1`] = `
-<button
-  className="container"
->
-  <img
-    className="avatar"
-    height="36"
-    onError={[Function]}
-    src="https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/avatar_placeholder.jpg"
-    width="36"
-  />
-</button>
-`;
-
-exports[`MainMenuAvatar should be rendered correctly 2`] = `
-<button
-  className="container dropdown"
->
-  <img
-    className="avatar"
-    height="36"
-    onError={[Function]}
-    src="https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/avatar_placeholder.jpg"
-    width="36"
-  />
-  <div>
-    <div
-      className="container uui-icon uui-enabled"
-      style={Object {}}
-    >
-      <svg
-        className=""
-      />
-    </div>
-  </div>
-</button>
-`;

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

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

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

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MainMenuDropdown should be rendered correctly 1`] = `
-<button
-  aria-expanded={false}
-  aria-haspopup={true}
-  className="container uui-button-box uui-enabled -clickable root type-primary"
-  onClick={[Function]}
-  tabIndex={0}
-  type="button"
->
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-</button>
-`;
-
-exports[`MainMenuDropdown should be rendered correctly 2`] = `
-<button
-  aria-expanded={false}
-  aria-haspopup={true}
-  className="container uui-button-box uui-enabled -clickable root type-primary"
-  onClick={[Function]}
-  tabIndex={0}
-  type="button"
->
-  <div
-    className="uui-caption"
-  >
-    Test button
-  </div>
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-</button>
-`;

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

@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MainMenuIcon should be rendered correctly 1`] = `
-<button
-  className="container uui-button-box uui-enabled uui-icon_button uui-color-neutral root container"
-  onClick={[Function]}
-  tabIndex={-1}
-  type="button"
->
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-</button>
-`;
-
-exports[`MainMenuIcon should be rendered correctly 2`] = `
-<a
-  className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root container"
-  onClick={[Function]}
-  rel="noopener noreferrer"
-  role="link"
-  tabIndex={0}
-  target="_blank"
->
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-</a>
-`;