@epam/uui 5.5.2 → 5.5.3

package/components/layout/ScrollBars.module.scss

@@ -1,56 +0,0 @@
-.root {
-    --uui-scroll_bars-bg: var(--uui-neutral-40);
-    --uui-scroll_bars-bg-active: var(--uui-neutral-60);
-}
-
-:global(.uui-shadow-top)::before {
-    background: var(--scroll-bars-shadow);
-}
-
-:global(.uui-shadow-bottom)::after {
-    background: var(--scroll-bars-shadow);
-}
-
-:global(.uui-thumb-vertical), :global(.uui-thumb-horizontal) {
-    background: var(--uui-scroll_bars-bg);
-    border-radius: 1.5px;
-
-    &:hover {
-        border-radius: 3px;
-    }
-
-    &:active {
-        border-radius: 3px;
-        background: var(--uui-scroll_bars-bg-active);
-    }
-}
-
-:global(.uui-thumb-vertical) {
-    width: 3px;
-    margin-left: 3px;
-
-    &:hover {
-        width: 6px;
-        margin-left: 0;
-    }
-
-    &:active {
-        width: 6px;
-        margin-left: 0;
-    }
-}
-
-:global(.uui-thumb-horizontal) {
-    height: 3px;
-    margin-top: 3px;
-
-    &:hover {
-        height: 6px;
-        margin-top: 0;
-    }
-
-    &:active {
-        height: 6px;
-        margin-top: 0;
-    }
-}

package/components/layout/ScrollBars.tsx

@@ -1,11 +0,0 @@
-import { ScrollBars as uuiScrollBars, ScrollbarProps } from '@epam/uui-components';
-import { withMods } from '@epam/uui-core';
-import css from './ScrollBars.module.scss';
-
-function applyScrollBarsMods() {
-    return [
-        css.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
-    ];
-}
-
-export const ScrollBars = withMods<ScrollbarProps>(uuiScrollBars, applyScrollBarsMods);

package/components/layout/VirtualList.module.scss

@@ -1,10 +0,0 @@
-.scroll-container {
-    display: flex;
-    flex-direction: column;
-    align-self: stretch;
-}
-
-.list-container {
-    display: grid;
-    grid-template-rows: 1fr;
-}

package/components/layout/VirtualList.tsx

@@ -1,126 +0,0 @@
-import * as React from 'react';
-import {
-    IHasCX, IEditable, VirtualListState, IHasRawProps, useVirtualList, useScrollShadows, cx, uuiMarkers, IHasChildren, UseVirtualListProps,
-} from '@epam/uui-core';
-import { ScrollbarsApi } from '@epam/uui-components';
-import { ScrollBars } from './ScrollBars';
-import css from './VirtualList.module.scss';
-import { Blocker } from './Blocker';
-import { HTMLAttributes } from 'react';
-
-export interface VirtualListRenderRowsParams<ListContainer extends HTMLElement = any> {
-    listContainerRef: React.MutableRefObject<ListContainer>;
-    estimatedHeight: number;
-    offsetY: number;
-    scrollShadows: {
-        verticalTop: boolean;
-        verticalBottom: boolean;
-        horizontalLeft: boolean;
-        horizontalRight: boolean;
-    };
-}
-type VirtualListRenderRows<List extends HTMLElement = any> = {
-    rows?: React.ReactNode[];
-    renderRows: (config: VirtualListRenderRowsParams<List>) => React.ReactNode;
-} | {
-    rows: React.ReactNode[];
-    renderRows?: (config: VirtualListRenderRowsParams<List>) => React.ReactNode;
-};
-
-interface BaseVirtualListProps
-    extends IHasCX,
-    IEditable<VirtualListState>,
-    IHasRawProps<HTMLAttributes<HTMLDivElement>>, Pick<UseVirtualListProps, 'rowsCount' | 'rowsSelector' | 'onScroll'> {
-    /** HTML role attribute to place on list container */
-    role?: React.HTMLAttributes<HTMLDivElement>['role'];
-    /** Pass true, to enable Blocker while list loading */
-    isLoading?: boolean;
-}
-
-export type VirtualListProps<List extends HTMLElement = any> = BaseVirtualListProps & VirtualListRenderRows<List>;
-
-export const VirtualList = React.forwardRef<ScrollbarsApi, VirtualListProps>((props, ref) => {
-    const {
-        listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef,
-    } = useVirtualList({
-        value: props.value,
-        onValueChange: props.onValueChange,
-        onScroll: props.onScroll,
-        rowsCount: props.rowsCount,
-        rowsSelector: props.rowsSelector,
-    });
-
-    React.useImperativeHandle(ref, () => scrollContainerRef.current, [scrollContainerRef.current]);
-
-    const scrollShadows = useScrollShadows({ root: scrollContainerRef.current });
-
-    const renderRows = () =>
-        props.renderRows?.({
-            listContainerRef, estimatedHeight, offsetY, scrollShadows,
-        }) || (
-            <div className={ css.listContainer } style={ { minHeight: `${estimatedHeight}px` } }>
-                <div ref={ listContainerRef } role={ props.role } style={ { marginTop: offsetY } }>
-                    {props.rows}
-                </div>
-            </div>
-        );
-
-    const renderView = ({ style }: any) => (
-        <VirtualListView
-            isLoading={ props.isLoading }
-            style={ style }
-            rawProps={ props.rawProps }
-        />
-    );
-
-    const scrollBarsRef = React.useCallback((scrollbars: ScrollbarsApi) => {
-        if (!scrollbars?.container?.firstChild) return;
-        scrollContainerRef.current = scrollbars.container.firstChild as HTMLDivElement;
-    }, []);
-    return (
-        <ScrollBars
-            cx={ cx(css.scrollContainer, props.cx, {
-                [uuiMarkers.scrolledLeft]: scrollShadows.horizontalLeft,
-                [uuiMarkers.scrolledRight]: scrollShadows.horizontalRight,
-                [uuiMarkers.scrolledTop]: scrollShadows.verticalTop,
-                [uuiMarkers.scrolledBottom]: scrollShadows.verticalBottom,
-            }) }
-            onScroll={ handleScroll }
-            renderView={ renderView }
-            ref={ scrollBarsRef }
-        >
-            {renderRows()}
-        </ScrollBars>
-    );
-});
-
-interface VirtualListViewProps extends IHasRawProps<HTMLAttributes<HTMLDivElement>>, IHasChildren {
-    style?: React.CSSProperties;
-    isLoading: boolean;
-}
-
-const VirtualListView = React.forwardRef<HTMLDivElement, VirtualListViewProps>((props, ref) => {
-    return (
-        <>
-            <div
-                { ...props.rawProps }
-                style={ {
-                    ...props.style,
-                    position: 'relative',
-                    flex: '1 1 auto',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    overflow: props.isLoading ? 'hidden' : 'scroll',
-                    marginRight: props.isLoading ? 0 : props.style.marginRight,
-                    marginBottom: props.isLoading ? 0 : props.style.marginBottom,
-                } }
-                ref={ ref }
-            >
-                { props.children }
-            </div>
-            <Blocker isEnabled={ props.isLoading } />
-        </>
-    );
-});
-
-VirtualList.displayName = 'VirtualList';

package/components/layout/__tests__/Accordion.test.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Accordion } from '../Accordion';
-import { renderer } from '@epam/uui-test-utils';
-import { systemIcons } from '../../../icons/icons';
-
-describe('Accordion', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<Accordion title="Test title" />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly with props', () => {
-        const tree = renderer.create(<Accordion title="Test title" mode="inline" dropdownIcon={ systemIcons['60'].foldingArrow } padding="18" />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/layout/__tests__/Blocker.test.tsx

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

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

@@ -1,33 +0,0 @@
-import React from 'react';
-import { CheckboxGroup } from '../CheckboxGroup';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('CheckboxGroup', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <CheckboxGroup
-                    value={ null }
-                    onValueChange={ () => {} }
-                    items={ [{ id: 1, name: 'Test1' }, { id: 2, name: 'Test2' }] }
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly with props', () => {
-        const tree = renderer
-            .create(
-                <CheckboxGroup
-                    value={ null }
-                    onValueChange={ () => {} }
-                    items={ [{ id: 1, name: 'Test1' }, { id: 2, name: 'Test2' }] }
-                    direction="horizontal"
-                    isDisabled
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

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

@@ -1,18 +0,0 @@
-import React from 'react';
-import { renderer } from '@epam/uui-test-utils';
-import { ControlGroup } from '../ControlGroup';
-import { Button } from '../../buttons';
-
-describe('ControlGroup', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <ControlGroup>
-                    <Button caption="On" />
-                    <Button caption="Off" color="primary" />
-                </ControlGroup>,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import { LabeledInput } from '../LabeledInput';
-import { TextInput } from '../../inputs';
-import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
-
-describe('LabeledInput', () => {
-    it('should be rendered correctly', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <LabeledInput>
-                <TextInput value={ null } onValueChange={ () => {} } />
-            </LabeledInput>,
-        );
-
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly with props', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <LabeledInput label="Test label" size="36" info="Test" isInvalid validationMessage="Test invalid message" labelPosition="left">
-                <TextInput value={ null } onValueChange={ () => {} } />
-            </LabeledInput>,
-        );
-
-        expect(tree).toMatchSnapshot();
-    });
-});

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

@@ -1,33 +0,0 @@
-import React from 'react';
-import { RadioGroup } from '../RadioGroup';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('RadioGroup', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <RadioGroup
-                    value={ null }
-                    onValueChange={ () => {} }
-                    items={ [{ id: 1, name: 'Test1' }, { id: 2, name: 'Test2' }] }
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly with props', () => {
-        const tree = renderer
-            .create(
-                <RadioGroup
-                    value={ null }
-                    onValueChange={ () => {} }
-                    items={ [{ id: 1, name: 'Test1' }, { id: 2, name: 'Test2' }] }
-                    direction="horizontal"
-                    isDisabled
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

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

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

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

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

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

@@ -1,65 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Accordion should be rendered correctly 1`] = `
-<div
-  aria-expanded={false}
-  className="uui-accordion-container container root mode-block"
->
-  <div
-    className="uui-accordion-toggler"
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    tabIndex={0}
-  >
-    <div
-      className="uui-accordion-toggle-container"
-    >
-      <div
-        className="uui-accordion-title"
-      >
-        Test title
-      </div>
-      <div
-        className="container uui-icon uui-enabled arrow"
-        style={Object {}}
-      >
-        <svg
-          className=""
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Accordion should be rendered correctly with props 1`] = `
-<div
-  aria-expanded={false}
-  className="uui-accordion-container container root mode-inline padding-18"
->
-  <div
-    className="uui-accordion-toggler"
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    tabIndex={0}
-  >
-    <div
-      className="uui-accordion-toggle-container"
-    >
-      <div
-        className="uui-accordion-title"
-      >
-        Test title
-      </div>
-      <div
-        className="container uui-icon uui-enabled arrow"
-        style={Object {}}
-      >
-        <svg
-          className=""
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;

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

@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Blocker should be rendered correctly 1`] = `
-<div
-  className="container uui-blocker-container root"
-  style={
-    Object {
-      "minHeight": undefined,
-    }
-  }
->
-  <div>
-    <div
-      className="uui-blocker"
-    >
-      <div
-        className="container uui-spinner-container root uui-spinner"
-      >
-        <div
-          className="uui-spinner-animation"
-        >
-          <div
-            className="uui-spinner-dot uui-spinner-dot-1"
-          />
-          <div
-            className="uui-spinner-dot uui-spinner-dot-2"
-          />
-          <div
-            className="uui-spinner-dot uui-spinner-dot-3"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

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

@@ -1,99 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CheckboxGroup should be rendered correctly 1`] = `
-<fieldset
-  className="root uui-vertical-direction"
->
-  <label
-    className="container uui-checkbox-container root size-18 mode-form uui-color-primary -clickable"
-  >
-    <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"
-  >
-    <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="root uui-horizontal-direction"
->
-  <label
-    className="container uui-checkbox-container root size-18 mode-form uui-color-primary uui-disabled"
-  >
-    <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"
-  >
-    <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>
-`;