@epam/uui 5.3.0-rc.0 → 5.3.0

package/components/layout/LabeledInput.module.scss

@@ -0,0 +1,139 @@
+@use '../../assets/styles/index' as *;
+
+.root {
+    --uui-labeled_input: var(--uui-text-primary);
+    --uui-labeled_input-disabled: var(--uui-text-disabled);
+    --uui-labeled_input-error: var(--uui-error-50);
+    --uui-labeled_input-fill: var(--uui-icon);
+    --uui-labeled_input-info-fill: var(--uui-icon);
+    --uui-labeled_input-optional-text: var(--uui-text-tertiary);
+    --uui-labeled_input-asterisk: var(--uui-error-50);
+    --uui-labeled_input-char-counter: var(--uui-text-tertiary);
+    --uui-labeled_input-footnote: var(--uui-text-tertiary);
+    --uui-labeled_input-sidenote: var(--uui-text-tertiary);
+
+    --uui-labeled_input-font: var(--uui-font);
+    --uui-labeled_input-font-weight: 600;
+    --uui-labeled_input-optional-font: var(--uui-font);
+    --uui-labeled_input-optional-font-weight: 400;
+    --uui-labeled_input-optional-font-style: italic;
+    --uui-labeled_input-invalid-msg-font: var(--uui-font);
+    --uui-labeled_input-invalid-msg-font-weight: 400;
+    --uui-labeled_input-char-counter-font: var(--uui-font);
+    --uui-labeled_input-char-counter-font-weight: 400;
+    --uui-labeled_input-footnote-font: var(--uui-font);
+    --uui-labeled_input-footnote-font-weight: 400;
+    --uui-labeled_input-sidenote-font: var(--uui-font);
+    --uui-labeled_input-sidenote-font-weight: 400;
+    //
+    width: 100%;
+
+    :global(.uui-label) {
+        @include overflow-ellipsis();
+        font-family: var(--uui-labeled_input-font);
+        font-weight: var(--uui-labeled_input-font-weight);
+        color: var(--uui-labeled_input);
+        padding: 6px 0;
+
+        :global(.uui-labeled-input-info-icon) {
+            flex-shrink: 0;
+            margin-left: 6px;
+            fill: var(--uui-labeled_input-info-fill);
+        }
+
+        :global(.uui-labeled-input-asterisk) {
+            color: var(--uui-labeled_input-asterisk);
+        }
+
+        :global(.uui-labeled-input-optional) {
+            font-family: var(--uui-labeled_input-optional-font);
+            font-weight: var(--uui-labeled_input-optional-font-weight);
+            font-style: var(--uui-labeled_input-optional-font-style);
+            font-size: 12px;
+            line-height: 18px;
+            color: var(--uui-labeled_input-optional-text);
+            margin-left: 6px;
+        }
+    }
+
+    :global(.uui-label-left) {
+        :global(.uui-label) {
+            margin-right: 5px;
+        }
+    }
+
+    :global(.uui-invalid-message) {
+        line-height: 18px;
+        font-size: 12px;
+        color: var(--uui-labeled_input-error);
+        font-family: var(--uui-labeled_input-invalid-msg-font);
+        font-weight: var(--uui-labeled_input-invalid-msg-font-weight);
+        margin-top: 3px;
+    }
+
+    :global(.uui-labeled-input-char-counter) {
+        flex-grow: 1;
+        text-align: right;
+        line-height: 18px;
+        font-size: 12px;
+        color: var(--uui-labeled_input-char-counter);
+        font-family: var(--uui-labeled_input-char-counter-font);
+        font-weight: var(--uui-labeled_input-char-counter-font-weight);
+        margin-top: 3px;
+    }
+
+    :global(.uui-labeled-input-footnote) {
+        line-height: 18px;
+        font-size: 12px;
+        color: var(--uui-labeled_input-footnote);
+        font-family: var(--uui-labeled_input-footnote-font);
+        font-weight: var(--uui-labeled_input-footnote-font-weight);
+        margin-top: 3px;
+    }
+
+    :global(.uui-labeled-input-sidenote) {
+        align-self: center;
+        text-align: right;
+        line-height: 18px;
+        font-size: 12px;
+        color: var(--uui-labeled_input-sidenote);
+        font-family: var(--uui-labeled_input-sidenote-font);
+        font-weight: var(--uui-labeled_input-sidenote-font-weight);
+    }
+
+    // Sizes
+    &.size-24 {
+        :global(.uui-label) {
+            font-size: 12px;
+            line-height: 18px;
+        }
+    }
+
+    &.size-30 {
+        :global(.uui-label) {
+            font-size: 12px;
+            line-height: 18px;
+        }
+    }
+
+    &.size-36 {
+        :global(.uui-label) {
+            font-size: 14px;
+            line-height: 18px;
+        }
+    }
+
+    &.size-42 {
+        :global(.uui-label) {
+            font-size: 14px;
+            line-height: 18px;
+        }
+    }
+
+    &.size-48 {
+        :global(.uui-label) {
+            font-size: 14px;
+            line-height: 18px;
+        }
+    }
+}

package/components/layout/LabeledInput.tsx

@@ -0,0 +1,21 @@
+import * as types from '../types';
+import { withMods } from '@epam/uui-core';
+import * as uuiComponents from '@epam/uui-components';
+import { Tooltip } from '../overlays/Tooltip';
+import { systemIcons } from '../../icons/icons';
+import css from './LabeledInput.module.scss';
+
+const defaultSize = '36';
+
+export interface LabeledInputMods extends types.SizeMod {}
+
+export type LabeledInputProps = uuiComponents.LabeledInputProps & LabeledInputMods;
+
+function applyLabeledInputMods(mods: LabeledInputMods) {
+    return [css.root, css['size-' + (mods.size || defaultSize)]];
+}
+
+export const LabeledInput = withMods<uuiComponents.LabeledInputProps, LabeledInputMods>(uuiComponents.LabeledInput, applyLabeledInputMods, (props) => ({
+    Tooltip,
+    infoIcon: systemIcons[props.size || defaultSize].help,
+}));

package/components/layout/RadioGroup.module.scss

@@ -0,0 +1,15 @@
+.root {
+    &:global(.uui-horizontal-direction) {
+        gap: 12px 18px;
+    }
+
+    &:global(.uui-vertical-direction) {
+        > * {
+            margin-bottom: 12px;
+        }
+
+        :last-child {
+            margin-bottom: 0;
+        }
+    }
+}

package/components/layout/RadioGroup.tsx

@@ -0,0 +1,10 @@
+import { withMods } from '@epam/uui-core';
+import { RadioGroup as uuiRadioGroup, RadioGroupProps } from '@epam/uui-components';
+import { RadioInput } from '../inputs/RadioInput';
+import css from './RadioGroup.module.scss';
+
+export const RadioGroup = withMods<RadioGroupProps<any>>(
+    uuiRadioGroup,
+    () => [css.root],
+    () => ({ RadioInput }),
+);

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,127 @@
+import * as React from 'react';
+import {
+    IHasCX, IEditable, VirtualListState, IHasRawProps, useVirtualList, useScrollShadows, cx, uuiMarkers, IHasChildren,
+} from '@epam/uui-core';
+import { PositionValues, 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>> {
+    rowsCount?: number;
+    role?: React.HTMLAttributes<HTMLDivElement>['role'];
+    onScroll?(value: PositionValues): void;
+    rowsSelector?: string;
+    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>
+`;