@epam/uui 5.5.2 → 5.5.4

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

@@ -1,81 +0,0 @@
-// 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-fill-solid 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

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

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

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

package/components/pickers/highlight.tsx

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

@@ -1,12 +0,0 @@
-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/pickers/types.ts

@@ -1,7 +0,0 @@
-import { ControlSize } from '../types';
-
-export interface PickerCellMods {
-    size?: ControlSize | '60';
-    padding?: '0' | '12' | '24';
-    alignActions?: 'top' | 'center';
-}

package/components/tables/ColumnHeaderDropdown/ColumnHeaderDropdown.tsx

@@ -1,46 +0,0 @@
-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 } maxWidth="auto" 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

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

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

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

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

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

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

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

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

package/components/tables/DataRowsContainer/utils.ts

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

@@ -1,54 +0,0 @@
-.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;
-    }
-}