@epam/uui 5.5.0 → 5.5.2

package/components/layout/ScrollBars.module.scss

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

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

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

package/components/layout/VirtualList.tsx

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,33 @@
+// 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>
+`;