@epam/uui 5.3.0-rc.0 → 5.3.0

package/components/pickers/__tests__/__snapshots__/PickerToggler.test.tsx.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PickerToggler should render with maximum props 1`] = `
+<div
+  className="container uui-input-box -clickable root size-48 mode-form"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={0}
+>
+  <div
+    className="body multiline"
+  >
+    <button
+      className="container uui-button-box uui-enabled size-42 root uui-color-neutral uui-tag"
+      onClick={[Function]}
+      tabIndex={-1}
+      type="button"
+    >
+      <div
+        className="uui-caption"
+      >
+        test
+      </div>
+      <div
+        className="container uui-icon uui-enabled -clickable -clickable"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        <svg
+          className=""
+        />
+      </div>
+    </button>
+  </div>
+  <div
+    className="actions"
+  >
+    <div
+      aria-label="Clear"
+      className="container uui-icon uui-enabled -clickable uui-icon-cancel -clickable"
+      onClick={[Function]}
+      role="button"
+      style={Object {}}
+      tabIndex={-1}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`PickerToggler should render with minimum props 1`] = `
+<div
+  className="container uui-input-box root size-36 mode-form"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  tabIndex={0}
+>
+  <div
+    className="body"
+  >
+    <input
+      aria-haspopup={true}
+      autoComplete="no"
+      className="uui-input singleInput"
+      onChange={[Function]}
+      tabIndex={-1}
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="actions"
+  />
+</div>
+`;

package/components/pickers/__tests__/highlight.test.tsx

@@ -0,0 +1,37 @@
+import { getHighlightRanges } from '../highlight';
+
+describe('getHighlightRanges', () => {
+    it('should return no ranges, if no search matches were found', () => {
+        expect(getHighlightRanges('some string', '.')).toEqual([]);
+    });
+    
+    it('should return ranges of found search matches and not matched tokens', () => {
+        expect(getHighlightRanges('some string', 'so str')).toEqual([
+            { from: 0, to: 2, isHighlighted: true },
+            { from: 2, to: 5, isHighlighted: false },
+            { from: 5, to: 8, isHighlighted: true },
+            { from: 8, to: 11, isHighlighted: false },            
+        ]);
+    });
+
+    it('should return merged ranges', () => {
+        expect(getHighlightRanges('merged ranges of found search string', 'rge ged ange ge es')).toEqual([
+            { from: 0, to: 2, isHighlighted: false },
+            { from: 2, to: 6, isHighlighted: true },
+            { from: 6, to: 8, isHighlighted: false },
+            { from: 8, to: 13, isHighlighted: true },
+            { from: 13, to: 36, isHighlighted: false },
+        ]);
+    });
+    
+    it('should treat special chars as part of the string, not as regexp special chars', () => {
+        expect(getHighlightRanges('merged? yes.', '? y .')).toEqual([
+            { from: 0, to: 6, isHighlighted: false },
+            { from: 6, to: 7, isHighlighted: true },
+            { from: 7, to: 8, isHighlighted: false },
+            { from: 8, to: 9, isHighlighted: true },
+            { from: 9, to: 11, isHighlighted: false },
+            { from: 11, to: 12, isHighlighted: true },
+        ]);
+    });
+});

package/components/pickers/__tests__/mocks.ts

@@ -0,0 +1,87 @@
+import { ArrayDataSource, AsyncDataSource } from '@epam/uui-core';
+import { delay } from '@epam/uui-test-utils';
+
+export type TestItemType = {
+    id: number;
+    level: string;
+    name: string;
+};
+
+export type Item = {
+    id: number;
+    name: string;
+};
+
+const smallDataSet: Item[] = [
+    { id: 2, name: 'Elementary' },
+    { id: 3, name: 'Elementary+' },
+];
+
+export const languageLevels: TestItemType[] = [
+    { id: 2, level: 'A1', name: 'Elementary' },
+    { id: 3, level: 'A1+', name: 'Elementary+' },
+    { id: 4, level: 'A2', name: 'Pre-Intermediate' },
+    { id: 5, level: 'A2+', name: 'Pre-Intermediate+' },
+    { id: 6, level: 'B1', name: 'Intermediate' },
+    { id: 7, level: 'B1+', name: 'Intermediate+' },
+    { id: 8, level: 'B2', name: 'Upper-Intermediate' },
+    { id: 9, level: 'B2+', name: 'Upper-Intermediate+' },
+    { id: 10, level: 'C1', name: 'Advanced' },
+    { id: 11, level: 'C1+', name: 'Advanced+' },
+    { id: 12, level: 'C2', name: 'Proficiency' },
+];
+
+export type TestTreeItem = {
+    id: number;
+    name: string;
+    parentId?: number;
+};
+
+const treeLikeData: TestTreeItem[] = [
+    { id: 1, name: 'Parent 1' },
+    { id: 1.1, parentId: 1, name: 'Child 1.1' },
+    { id: 1.2, parentId: 1, name: 'Child 1.2' },
+    { id: 1.3, parentId: 1, name: 'Child 1.3' },
+    { id: 2, name: 'Parent 2' },
+    { id: 2.1, parentId: 2, name: 'Child 2.1' },
+    { id: 2.2, parentId: 2, name: 'Child 2.2' },
+    { id: 2.3, parentId: 2, name: 'Child 2.3' },
+    { id: 3, name: 'Parent 3' },
+    { id: 3.1, parentId: 3, name: 'Child 3.1' },
+    { id: 3.2, parentId: 3, name: 'Child 3.2' },
+    { id: 3.3, parentId: 3, name: 'Child 3.3' },
+];
+
+export const mockDataSource = new ArrayDataSource({
+    items: languageLevels,
+});
+
+export const mockEmptyDataSource = new ArrayDataSource({
+    items: [],
+});
+
+export const mockSmallDataSource = new ArrayDataSource({
+    items: smallDataSet,
+});
+
+export const mockSmallDataSourceAsync = new AsyncDataSource({
+    api: async () => {
+        await delay(50);
+        return smallDataSet;
+    },
+});
+
+export const mockDataSourceAsync = new AsyncDataSource({
+    api: async () => {
+        await delay(50);
+        return languageLevels;
+    },
+});
+
+export const mockTreeLikeDataSourceAsync = new AsyncDataSource<TestTreeItem, number, any>({
+    api: async () => {
+        await delay(50);
+        return treeLikeData;
+    },
+    getParentId: ({ parentId }) => parentId,
+});

package/components/pickers/helpers.ts

@@ -0,0 +1,4 @@
+const MAX_ITEMS = 100;
+
+export const getMaxItems = (maxItems: number | undefined) =>
+    maxItems || maxItems === 0 ? maxItems : MAX_ITEMS;

package/components/pickers/highlight.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+
+export interface HighlightRange {
+    from: number;
+    to: number;
+    isHighlighted: boolean;
+}
+
+const mergeHighlightRanges = (ranges: HighlightRange[]) => {
+    const mergedRanges: HighlightRange[] = [];
+    ranges.forEach((range) => {
+        if (!mergedRanges.length) {
+            mergedRanges.push({ ...range, isHighlighted: true });
+        }
+
+        const lastRange = mergedRanges[mergedRanges.length - 1];
+        if (range.from >= lastRange.from && range.from <= lastRange.to && range.to > lastRange.to) {
+            lastRange.to = range.to;
+        }
+
+        if (lastRange.to < range.from) {
+            mergedRanges.push({ ...range, isHighlighted: true });
+        }
+    });
+
+    return mergedRanges;
+};
+
+const addNotHighlightedRanges = (ranges: HighlightRange[], str: string) => {
+    const allRanges: HighlightRange[] = [];
+    ranges.forEach((range, index) => {
+        if (index === 0 && range.from !== 0) {
+            allRanges.push({ from: 0, to: range.from, isHighlighted: false });
+        }
+        const prevRange = ranges[index - 1];
+        if (prevRange && prevRange.to < range.from) {
+            allRanges.push({ from: prevRange.to, to: range.from, isHighlighted: false });
+        }
+
+        allRanges.push(range);
+        const lastIndex = ranges.length - 1;
+        if (index === lastIndex && range.to < str.length) {
+            allRanges.push({ from: range.to, to: str.length, isHighlighted: false });
+        }
+    });
+    return allRanges;
+};
+
+export const getHighlightRanges = (str: string, search: string) => {
+    const words = search
+        .split(' ')
+        .filter(Boolean)
+        .map((word) => word.trim().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')) // esape regex characters inside the string
+        .map((word) => new RegExp(word, 'ig'));
+    const matches = words.flatMap((word) => [...str.matchAll(word)]);
+
+    const ranges = matches
+        .map((match) => ({ from: match.index, to: match[0].length + match.index, isHighlighted: true }))
+        .sort((range1, range2) => range1.from - range2.from);
+
+    if (!ranges) {
+        return [];
+    }
+
+    const mergedRanges = mergeHighlightRanges(ranges);
+    return addNotHighlightedRanges(mergedRanges, str);
+};
+
+const getDecoratedText = (str: string, ranges: HighlightRange[]) => 
+    ranges.map((range, index) => {
+        const rangeStr = str.substring(range.from, range.to);
+        return (
+            <span
+                key={ `${rangeStr}-${index}` }
+                { ...(range.isHighlighted ? { className: 'uui-highlight' } : {}) }
+            >
+                {rangeStr}
+            </span>
+        );
+    });
+
+export const getHighlightedSearchMatches = (str: string, search?: string) => {
+    if (!search || !str) {
+        return str;
+    }
+    
+    const ranges = getHighlightRanges(str, search);
+    if (!ranges.length) {
+        return str;
+    }
+    
+    return getDecoratedText(str, ranges);
+};

package/components/pickers/index.ts

@@ -0,0 +1,12 @@
+export * from './DataPickerBody';
+export * from './DataPickerFooter';
+export * from './DataPickerHeader';
+export * from './DataPickerRow';
+export * from './MobileDropdownWrapper';
+export * from './PickerInput';
+export * from './PickerItem';
+export * from './PickerList';
+export * from './PickerListItem';
+export * from './PickerModal';
+export * from './PickerToggler';
+export * from './highlight';

package/components/tables/ColumnHeaderDropdown/ColumnHeaderDropdown.tsx

@@ -0,0 +1,46 @@
+import React, { useCallback, useMemo } from 'react';
+import { Modifier } from 'react-popper';
+import { IDropdownToggler, DropdownBodyProps, mobilePopperModifier } from '@epam/uui-core';
+import { Dropdown } from '@epam/uui-components';
+import { MobileDropdownWrapper } from '../../pickers';
+import { SortingPanel, SortingPanelProps } from './SortingPanel';
+
+type ColumnHeaderDropdownProps = SortingPanelProps & {
+    isOpen: boolean;
+    isSortable: boolean;
+    renderTarget: (props: IDropdownToggler) => React.ReactNode;
+    renderFilter?: (dropdownProps: DropdownBodyProps) => React.ReactNode;
+    onOpenChange(nV: boolean): void;
+    title: string;
+};
+
+const ColumnHeaderDropdownImpl: React.FC<ColumnHeaderDropdownProps> = (props) => {
+    const popperModifiers: Modifier<any>[] = useMemo(
+        () => [
+            {
+                name: 'offset',
+                options: { offset: [0, 1] },
+            }, mobilePopperModifier,
+        ],
+        [],
+    );
+
+    const closeDropdown = useCallback(() => props.onOpenChange(false), [props.onOpenChange]);
+
+    return (
+        <Dropdown
+            renderTarget={ props.renderTarget }
+            renderBody={ (dropdownProps) => (
+                <MobileDropdownWrapper width={ 280 } title={ props.title } onClose={ closeDropdown }>
+                    {props.isSortable && <SortingPanel sortDirection={ props.sortDirection } onSort={ props.onSort } />}
+                    {props.renderFilter(dropdownProps)}
+                </MobileDropdownWrapper>
+            ) }
+            modifiers={ popperModifiers }
+            value={ props.isOpen }
+            onValueChange={ props.onOpenChange }
+        />
+    );
+};
+
+export const ColumnHeaderDropdown = React.memo(ColumnHeaderDropdownImpl);

package/components/tables/ColumnHeaderDropdown/SortingPanel.module.scss

@@ -0,0 +1,14 @@
+@use  '../../../assets/styles/index' as *;
+
+.sorting-panel-container {
+    padding: 6px 0;
+    border-bottom: 1px solid var(--uui-divider);
+    
+    @media screen and (max-width: 720px) {
+        padding: 0;
+    }
+}
+
+.sort-active {
+    margin-right: 12px;
+}

package/components/tables/ColumnHeaderDropdown/SortingPanel.tsx

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+import css from './SortingPanel.module.scss';
+import { ReactComponent as SortIcon } from '@epam/assets/icons/common/table-sort_asc-18.svg';
+import { ReactComponent as SortIconDesc } from '@epam/assets/icons/common/table-sort_desc-18.svg';
+import { SortDirection } from '@epam/uui-core';
+import { FlexCell } from '../../layout';
+import { i18n } from '../../../i18n';
+import { DropdownMenuButton } from '../../overlays';
+
+export interface SortingPanelProps {
+    sortDirection: SortDirection;
+    onSort(dir: SortDirection): void;
+}
+
+const SortingPanelImpl: React.FC<SortingPanelProps> = ({ sortDirection, onSort }) => {
+    const sortAsc = useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
+    const sortDesc = useCallback(() => onSort(sortDirection === 'desc' ? undefined : 'desc'), [onSort]);
+
+    return (
+        <FlexCell cx={ css.sortingPanelContainer }>
+            <DropdownMenuButton isActive={ sortDirection === 'asc' } caption={ i18n.pickerFilterHeader.sortAscending } icon={ SortIcon } onClick={ sortAsc } />
+            <DropdownMenuButton isActive={ sortDirection === 'desc' } caption={ i18n.pickerFilterHeader.sortDescending } icon={ SortIconDesc } onClick={ sortDesc } />
+        </FlexCell>
+    );
+};
+
+export const SortingPanel = React.memo(SortingPanelImpl);

package/components/tables/ColumnHeaderDropdown/index.ts

@@ -0,0 +1 @@
+export * from './ColumnHeaderDropdown';

package/components/tables/DataRowsContainer/DataRowsContainer.module.scss

@@ -0,0 +1,21 @@
+.listContainer {
+    margin-top: 1px;
+    isolation: isolate;
+}
+
+.header {
+    top: 0;
+    z-index: 10;
+}
+
+.group {
+    margin-top: 0;
+    isolation: isolate;
+}
+
+.stickyHeader {
+    position: sticky;
+    top: 0;
+    isolation: isolate;
+    z-index: 5;
+}

package/components/tables/DataRowsContainer/DataRowsContainer.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { DataRowProps } from '@epam/uui-core';
+import { VirtualListRenderRowsParams } from '../../layout';
+import { DataRowsGroups } from './DataRowsGroups';
+import css from './DataRowsContainer.module.scss';
+
+export interface DataRowsContainerProps<TItem, TId, List extends HTMLDivElement = any> extends VirtualListRenderRowsParams<List> {
+    rows: DataRowProps<TItem, TId>[];
+    renderRow: (row: DataRowProps<TItem, TId>) => React.ReactNode;
+    headerRef?: React.MutableRefObject<HTMLDivElement>;
+}
+
+export function DataRowsContainer<TItem, TId, List extends HTMLDivElement = any>({ 
+    estimatedHeight, listContainerRef, offsetY, rows, renderRow, headerRef,
+}: DataRowsContainerProps<TItem, TId, List>) {
+    return (
+        <div className={ css.listContainer } style={ { minHeight: `${estimatedHeight}px` } }>
+            <div ref={ listContainerRef } role="rowgroup" style={ { marginTop: offsetY } }>
+                <DataRowsGroups
+                    rows={ rows }
+                    renderRow={ renderRow }
+                    top={ headerRef?.current?.clientHeight }
+                />
+            </div>
+        </div>
+    );
+}

package/components/tables/DataRowsContainer/DataRowsGroups.tsx

@@ -0,0 +1,86 @@
+import React, { useRef } from 'react';
+import { DataRowProps } from '@epam/uui-core';
+import css from './DataRowsContainer.module.scss';
+import { getChildrenAndRest } from './utils';
+
+interface DataRowsGroupProps<TItem, TId> {
+    row: DataRowProps<TItem, TId>;
+    childRows: DataRowProps<TItem, TId>[];
+    renderRow: (props: DataRowProps<TItem, TId>) => React.ReactNode;
+    top: number;
+}
+
+export interface DataRowsGroupsProps<TItem, TId> {
+    rows: DataRowProps<TItem, TId>[],
+    renderRow: (props: DataRowProps<TItem, TId>) => React.ReactNode;
+    top: number;
+}
+
+function DataRowsGroup<TItem, TId>({
+    row,
+    childRows,
+    renderRow,
+    top = 1,
+}: DataRowsGroupProps<TItem, TId>) {
+    const rowRef = useRef<HTMLDivElement>();
+    const childrenPinnedTop = row.isPinned ? (top + (rowRef.current?.clientHeight ?? 0)) : top;
+    return ( 
+        <div className={ css.group } key={ row.rowKey }>
+            <div
+                className={ row.isPinned ? css.stickyHeader : css.header }
+                // Gaps between pinned parents should be removed by -1 from top height.
+                // Otherwise, sometimes top value is rounded top.
+                style={ { zIndex: row.depth + 10, top: top - 1 } }
+                ref={ rowRef }
+            >
+                {renderRow(row)}
+            </div>
+            {childRows.length > 0 && (
+                <div>
+                    <DataRowsGroups rows={ childRows } renderRow={ renderRow } top={ childrenPinnedTop } />
+                </div>
+            )}
+        </div>
+    );
+}
+
+export const renderRows = <TItem, TId>(
+    rows: DataRowProps<TItem, TId>[],
+    renderRow: (props: DataRowProps<TItem, TId>) => React.ReactNode,
+    top?: number,
+): React.ReactNode[] => {
+    if (!rows.length) return [];
+
+    const [row, ...rest] = rows;
+    
+    if (!rest.length) {
+        return [renderRow(row)];
+    }
+    const [next] = rest;
+    if (next.depth <= row.depth && !row.isPinned) {
+        return [renderRow(row)].concat(renderRows(rest, renderRow, top));
+    }
+    
+    const [children, otherRows] = getChildrenAndRest(row, rest);
+    const group: React.ReactNode = (
+        <DataRowsGroup 
+            row={ row } 
+            childRows={ children }
+            renderRow={ renderRow }
+            top={ top }
+            key={ row.rowKey }
+        />
+    );
+
+    return [group].concat(renderRows(otherRows, renderRow, top) as JSX.Element[]);
+};
+
+export function DataRowsGroups<TItem, TId>({
+    rows,
+    renderRow,
+    top = 1,
+}: DataRowsGroupsProps<TItem, TId>) {
+    const rowsWithGroups = renderRows(rows, renderRow, top);
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return (<>{ rowsWithGroups }</>);
+}

package/components/tables/DataRowsContainer/index.tsx

@@ -0,0 +1 @@
+export { DataRowsContainer, type DataRowsContainerProps } from './DataRowsContainer';

package/components/tables/DataRowsContainer/utils.ts

@@ -0,0 +1,15 @@
+import { DataRowProps } from '@epam/uui-core';
+
+export const getChildrenAndRest = <TItem, TId>(row: DataRowProps<TItem, TId>, rows: DataRowProps<TItem, TId>[]) => {
+    const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
+    if (firstNotChildIndex === -1) {
+        return [rows, []];
+    }
+    if (firstNotChildIndex === 0) {
+        return [[], rows];
+    }
+
+    const children = rows.slice(0, firstNotChildIndex);
+    const rest = rows.slice(firstNotChildIndex, rows.length);
+    return [children, rest];
+};

package/components/tables/DataTable.module.scss

@@ -0,0 +1,54 @@
+.sticky-header {
+    position: sticky;
+    top: 0;
+    isolation: isolate;
+    z-index: 5;
+}
+
+.table {
+    &:global(.-scrolled-left) {
+        :global(.uui-scroll-shadow-left) {
+            opacity: 1;
+        }
+    }
+
+    &:global(.-scrolled-right) {
+        :global(.uui-scroll-shadow-right) {
+            opacity: 1;
+        }
+    }
+
+    :global(.uui-scroll-shadow-top) {
+        position: absolute;
+        pointer-events: none;
+        left: 0;
+        right: 0;
+        bottom: -5px;
+    }
+
+    :global(.uui-scroll-shadow-top-visible) {
+        display: block;
+        height: 5px;
+        background: var(--uui-dt-top-shadow, linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%));
+        transition: display 200ms;
+    }
+}
+
+.no-results {
+    position: sticky;
+    left: 0;
+    display: flex;
+    flex: 1 0 auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    &-icon {
+        align-items: center;
+    }
+
+    &-title {
+        padding: 0;
+        margin-top: 30px;
+    }
+}