@epam/uui 5.3.0 → 5.4.0

package/components/layout/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap

@@ -1,103 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CheckboxGroup should be rendered correctly 1`] = `
-<fieldset
-  className="uui-vertical-direction root container"
->
-  <label
-    className="container uui-checkbox-container root size-18 mode-form uui-color-primary -clickable"
-    tabIndex={-1}
-  >
-    <div
-      className="uui-checkbox"
-    >
-      <input
-        aria-checked={false}
-        checked={false}
-        onChange={[Function]}
-        tabIndex={0}
-        type="checkbox"
-      />
-    </div>
-    <div
-      className="uui-input-label"
-    >
-      Test1
-    </div>
-  </label>
-  <label
-    className="container uui-checkbox-container root size-18 mode-form uui-color-primary -clickable"
-    tabIndex={-1}
-  >
-    <div
-      className="uui-checkbox"
-    >
-      <input
-        aria-checked={false}
-        checked={false}
-        onChange={[Function]}
-        tabIndex={0}
-        type="checkbox"
-      />
-    </div>
-    <div
-      className="uui-input-label"
-    >
-      Test2
-    </div>
-  </label>
-</fieldset>
-`;
-
-exports[`CheckboxGroup should be rendered correctly with props 1`] = `
-<fieldset
-  className="uui-horizontal-direction root container"
->
-  <label
-    className="container uui-checkbox-container root size-18 mode-form uui-color-primary uui-disabled"
-    tabIndex={-1}
-  >
-    <div
-      className="uui-checkbox"
-    >
-      <input
-        aria-checked={false}
-        aria-disabled={true}
-        checked={false}
-        disabled={true}
-        onChange={[Function]}
-        tabIndex={-1}
-        type="checkbox"
-      />
-    </div>
-    <div
-      className="uui-input-label"
-    >
-      Test1
-    </div>
-  </label>
-  <label
-    className="container uui-checkbox-container root size-18 mode-form uui-color-primary uui-disabled"
-    tabIndex={-1}
-  >
-    <div
-      className="uui-checkbox"
-    >
-      <input
-        aria-checked={false}
-        aria-disabled={true}
-        checked={false}
-        disabled={true}
-        onChange={[Function]}
-        tabIndex={-1}
-        type="checkbox"
-      />
-    </div>
-    <div
-      className="uui-input-label"
-    >
-      Test2
-    </div>
-  </label>
-</fieldset>
-`;

package/components/layout/__tests__/__snapshots__/ControlGroup.test.tsx.snap

@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ControlGroup should be rendered correctly 1`] = `
-<div
-  className="container root"
-  role="group"
->
-  <button
-    className="container uui-button-box uui-enabled root uui-button uui-fill-solid uui-color-primary uui-size-36"
-    onClick={[Function]}
-    tabIndex={-1}
-    type="button"
-  >
-    <div
-      className="uui-caption"
-    >
-      On
-    </div>
-  </button>
-  <button
-    className="container uui-button-box uui-enabled root uui-button uui-fill-solid uui-color-primary uui-size-36"
-    onClick={[Function]}
-    tabIndex={-1}
-    type="button"
-  >
-    <div
-      className="uui-caption"
-    >
-      Off
-    </div>
-  </button>
-</div>
-`;

package/components/layout/__tests__/__snapshots__/LabeledInput.test.tsx.snap

@@ -1,87 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LabeledInput should be rendered correctly 1`] = `
-<div
-  className="container root size-36"
->
-  <div
-    className="uui-label-top"
-  >
-    <div>
-      <div
-        className="container uui-input-box -clickable root size-36 mode-form"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        tabIndex={-1}
-      >
-        <input
-          className="uui-input"
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          tabIndex={0}
-          type="text"
-          value=""
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`LabeledInput should be rendered correctly with props 1`] = `
-<div
-  className="container root size-36"
->
-  <div
-    className="uui-label-left"
-  >
-    <div
-      className="labelWrapper"
-    >
-      <label
-        className="uui-label"
-      >
-        Test label
-        <svg
-          className="uui-labeled-input-info-icon"
-        />
-      </label>
-    </div>
-    <div
-      className="rightChildrenPosition"
-    >
-      <div
-        className="container uui-input-box -clickable root size-36 mode-form"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        tabIndex={-1}
-      >
-        <input
-          className="uui-input"
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          tabIndex={0}
-          type="text"
-          value=""
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="uui-flex-row container align-items-top"
-    style={
-      Object {
-        "columnGap": "12px",
-        "rowGap": undefined,
-      }
-    }
-  >
-    <div
-      className="uui-invalid-message"
-      role="alert"
-    >
-      Test invalid message
-    </div>
-  </div>
-</div>
-`;

package/components/layout/__tests__/__snapshots__/RadioGroup.test.tsx.snap

@@ -1,95 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RadioGroup should be rendered correctly 1`] = `
-<fieldset
-  className="uui-vertical-direction root container"
->
-  <label
-    className="container root size-18 uui-color-primary -clickable"
-  >
-    <div
-      className="uui-radioinput"
-    >
-      <input
-        aria-checked={false}
-        checked={false}
-        onChange={[Function]}
-        type="radio"
-      />
-    </div>
-    <div
-      className="uui-input-label"
-    >
-      Test1
-    </div>
-  </label>
-  <label
-    className="container root size-18 uui-color-primary -clickable"
-  >
-    <div
-      className="uui-radioinput"
-    >
-      <input
-        aria-checked={false}
-        checked={false}
-        onChange={[Function]}
-        type="radio"
-      />
-    </div>
-    <div
-      className="uui-input-label"
-    >
-      Test2
-    </div>
-  </label>
-</fieldset>
-`;
-
-exports[`RadioGroup should be rendered correctly with props 1`] = `
-<fieldset
-  className="uui-horizontal-direction root container"
->
-  <label
-    className="container uui-disabled root size-18 uui-color-primary"
-  >
-    <div
-      className="uui-radioinput"
-    >
-      <input
-        aria-checked={false}
-        aria-disabled={true}
-        checked={false}
-        disabled={true}
-        onChange={[Function]}
-        type="radio"
-      />
-    </div>
-    <div
-      className="uui-input-label"
-    >
-      Test1
-    </div>
-  </label>
-  <label
-    className="container uui-disabled root size-18 uui-color-primary"
-  >
-    <div
-      className="uui-radioinput"
-    >
-      <input
-        aria-checked={false}
-        aria-disabled={true}
-        checked={false}
-        disabled={true}
-        onChange={[Function]}
-        type="radio"
-      />
-    </div>
-    <div
-      className="uui-input-label"
-    >
-      Test2
-    </div>
-  </label>
-</fieldset>
-`;

package/components/layout/__tests__/__snapshots__/ScrollBars.test.tsx.snap

@@ -1,68 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ScrollBars should be rendered correctly 1`] = `
-<div
-  className="root root uui-scroll-bars uui-shadow-top uui-shadow-bottom"
-  style={
-    Object {
-      "display": "flex",
-      "height": "100%",
-      "overflow": "hidden",
-      "position": "relative",
-      "width": "100%",
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "WebkitOverflowScrolling": "touch",
-        "bottom": 0,
-        "flex": "1 1 auto",
-        "left": 0,
-        "marginBottom": 0,
-        "marginRight": 0,
-        "overflow": "scroll",
-        "position": "relative",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  >
-    <button
-      className="container uui-button-box uui-enabled root uui-button uui-fill-solid uui-color-primary uui-size-36"
-      onClick={[Function]}
-      tabIndex={-1}
-      type="button"
-    />
-  </div>
-  <div
-    className="uui-track-horizontal"
-    style={
-      Object {
-        "display": "none",
-        "height": 6,
-        "position": "absolute",
-      }
-    }
-  >
-    <div
-      className="uui-thumb-horizontal"
-    />
-  </div>
-  <div
-    className="uui-track-vertical"
-    style={
-      Object {
-        "display": "none",
-        "position": "absolute",
-        "width": 6,
-      }
-    }
-  >
-    <div
-      className="uui-thumb-vertical"
-    />
-  </div>
-</div>
-`;

package/components/layout/__tests__/__snapshots__/VirtualList.test.tsx.snap

@@ -1,90 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VirtualList should be rendered correctly 1`] = `
-<div
-  className="root root uui-scroll-bars uui-shadow-top uui-shadow-bottom scrollContainer"
-  style={
-    Object {
-      "display": "flex",
-      "height": "100%",
-      "overflow": "hidden",
-      "position": "relative",
-      "width": "100%",
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "WebkitOverflowScrolling": "touch",
-        "bottom": 0,
-        "display": "flex",
-        "flex": "1 1 auto",
-        "flexDirection": "column",
-        "left": 0,
-        "marginBottom": 0,
-        "marginRight": 0,
-        "overflow": "scroll",
-        "position": "relative",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  >
-    <div
-      className="listContainer"
-      style={
-        Object {
-          "minHeight": "0px",
-        }
-      }
-    >
-      <div
-        style={
-          Object {
-            "marginTop": 0,
-          }
-        }
-      />
-    </div>
-  </div>
-  <div
-    className="container uui-blocker-container root"
-    style={
-      Object {
-        "minHeight": undefined,
-      }
-    }
-  >
-    <div />
-  </div>
-  <div
-    className="uui-track-horizontal"
-    style={
-      Object {
-        "display": "none",
-        "height": 6,
-        "position": "absolute",
-      }
-    }
-  >
-    <div
-      className="uui-thumb-horizontal"
-    />
-  </div>
-  <div
-    className="uui-track-vertical"
-    style={
-      Object {
-        "display": "none",
-        "position": "absolute",
-        "width": 6,
-      }
-    }
-  >
-    <div
-      className="uui-thumb-vertical"
-    />
-  </div>
-</div>
-`;

package/components/layout/index.ts

@@ -1,10 +0,0 @@
-export * from './Accordion';
-export * from './ControlGroup';
-export * from './FlexItems';
-export { IconContainer } from '@epam/uui-components';
-export * from './LabeledInput';
-export * from './RadioGroup';
-export * from './ScrollBars';
-export * from './VirtualList';
-export * from './Blocker';
-export * from './CheckboxGroup';

package/components/navigation/Anchor.module.scss

@@ -1,7 +0,0 @@
-@use  '../../assets/styles/effects' as *;
-
-.root {
-    &:global(.-clickable):focus-visible {
-        @include focus-visible-effect();
-    }
-}

package/components/navigation/Anchor.tsx

@@ -1,5 +0,0 @@
-import { Anchor as uuiAnchor, AnchorProps } from '@epam/uui-components';
-import { withMods } from '@epam/uui-core';
-import css from './Anchor.module.scss';
-
-export const Anchor = withMods<AnchorProps>(uuiAnchor, () => [css.root]);

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

@@ -1,81 +0,0 @@
-@use  '../../../../assets/styles/effects' as *;
-
-.root {
-    --uui-burger_menu-bg: var(--uui-neutral-90);
-    --uui-burger_menu-bg-hover: var(--uui-neutral-90);
-    --uui-burger_menu-overlay: var(--uui-overlay);
-    --uui-burger_menu-icon: var(--uui-neutral-5);
-    --uui-burger_menu-item: var(--uui-text-brand);
-    //
-    position: relative;
-    display: flex;
-
-    &:global(.uui-burger-menu-open) {
-        z-index: 1001;
-    }
-
-    :global(.uui-burger-button) {
-        width: 60px;
-        cursor: pointer;
-        fill: var(--uui-burger_menu-icon);
-        background: transparent;
-        padding: 0;
-        border: 0 none;
-
-        &:hover {
-            background-color: var(--uui-burger_menu-bg-hover);
-        }
-
-        &:active {
-            background-color: var(--uui-burger_menu-bg-hover);
-        }
-
-        &:focus-visible {
-            @include focus-visible-effect(-2px, 0);
-        }
-
-        :global(.uui-icon) svg {
-            width: 60px;
-            height: 60px;
-        }
-    }
-
-    :global(.uui-burger-logo-container) {
-        position: absolute;
-        left: 60px;
-        top: 0;
-    }
-
-    :global(.uui-burger-logo) {
-        display: block;
-        height: 60px;
-    }
-}
-
-.burger-content {
-    &:global(.uui-burger-overlay) {
-        &:global(.uui-burger-overlay-visible) {
-            position: fixed;
-            z-index: 1000;
-            top: 60px;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: var(--uui-burger_menu-overlay);
-        }
-    }
-
-    :global(.uui-burger-items) {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        top: 0;
-        width: 300px;
-        background: var(--uui-burger_menu-item);
-        transform: translateX(-100px);
-
-        &:global(.uui-burger-items-visible) {
-            transform: translateX(0);
-        }
-    }
-}

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

@@ -1,18 +0,0 @@
-import { withMods } from '@epam/uui-core';
-import cx from 'classnames';
-import { Burger as uuiBurger, BurgerProps } from '@epam/uui-components';
-import css from './Burger.module.scss';
-import { ReactComponent as BurgerIcon } from '../../../../icons/burger.svg';
-import { ReactComponent as CrossIcon } from '../../../../icons/burger-close.svg';
-
-export interface BurgerMods {}
-
-function applyBurgerMods() {
-    return [cx(css.root, 'uui-burger')];
-}
-
-export const Burger = withMods<BurgerProps, BurgerMods>(uuiBurger, applyBurgerMods, () => ({
-    burgerIcon: BurgerIcon,
-    crossIcon: CrossIcon,
-    burgerContentCx: css.burgerContent,
-}));

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

@@ -1,69 +0,0 @@
-@use  '../../../../assets/styles/index' as *;
-
-.root {
-    --uui-burger_btn_caption: var(--uui-neutral-5);
-    --uui-burger_btn_caption-hover: var(--uui-primary-50);
-    --uui-burger_btn_caption-active: var(--uui-primary-50);
-    --uui-burger_btn-border: var(--uui-neutral-30);
-
-    --uui-burger_btn-font: var(--uui-font);
-    --uui-burger_btn-font-weight: 400;
-    //
-    padding: 0 24px;
-    background: none;
-    border: 0;
-    outline: none;
-    font-family: var(--uui-burger_btn-font);
-    font-weight: var(--uui-burger_btn-font-weight);
-    line-height: 48px;
-    flex-shrink: 0;
-
-    &:global(.uui-enabled) {
-        color: var(--uui-burger_btn_caption);
-        fill: var(--uui-burger_btn_caption);
-
-        &:global(.-clickable) {
-            &:hover {
-                color: var(--uui-burger_btn_caption-hover);
-                fill: var(--uui-burger_btn_caption-hover);
-            }
-
-            &:focus-visible {
-                @include focus-visible-effect(-2px, null);
-            }
-        }
-    }
-
-    &:global(.uui-active) {
-        color: var(--uui-burger_btn_caption-active);
-        fill: var(--uui-burger_btn_caption-active);
-    }
-
-    :global(.uui-icon) {
-        padding: 0 12px 0 24px;
-    }
-
-    &.button-primary {
-        font-size: 18px;
-    }
-
-    &.button-secondary {
-        font-size: 14px;
-        padding-left: 18px;
-        margin-left: 48px;
-        border-left: 1px var(--uui-burger_btn-border) solid;
-    }
-
-    &.hasIcon,
-    &.dropdown {
-        padding-left: 0;
-    }
-
-    &.hasIcon {
-        @include icon-layout(24px);
-
-        :global(.uui-icon) {
-            padding: 0 12px 0 20px;
-        }
-    }
-}

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

@@ -1,22 +0,0 @@
-import { withMods, IHasIcon, IDropdownToggler } from '@epam/uui-core';
-import { Button, ButtonProps } from '@epam/uui-components';
-import { ReactComponent as SvgTriangle } from '../../../../icons/triangle.svg';
-import css from './BurgerButton.module.scss';
-
-export interface BurgerButtonMods extends IHasIcon, IDropdownToggler {
-    type?: 'primary' | 'secondary';
-    indentLevel?: number;
-}
-
-export const BurgerButton = withMods<ButtonProps, BurgerButtonMods>(
-    Button,
-    (props) => [
-        css.root,
-        'uui-main_menu-burger-button',
-        css['button-' + (props.type || 'primary')],
-        css['indent-' + (props.indentLevel || 0)],
-        props.isDropdown && css.dropdown,
-        props.icon && css.hasIcon,
-    ],
-    () => ({ dropdownIcon: SvgTriangle, dropdownIconPosition: 'left', role: 'menuitem' }),
-);