@epam/uui 5.5.2 → 5.5.3

package/components/tables/DataTable.tsx

@@ -1,172 +0,0 @@
-import * as React from 'react';
-import { IconContainer, DataTableSelectionProvider, DataTableFocusManager, DataTableFocusProvider } from '@epam/uui-components';
-import { useColumnsWithFilters } from '../../helpers';
-import {
-    ColumnsConfig, DataRowProps, useUuiContext, uuiScrollShadows, useColumnsConfig, IEditable, DataTableState, DataTableColumnsConfigOptions,
-    DataSourceListProps, DataColumnProps, cx, TableFiltersConfig, DataTableRowProps, DataTableSelectedCellData,
-} from '@epam/uui-core';
-import { DataTableHeaderRow } from './DataTableHeaderRow';
-import { DataTableRow } from './DataTableRow';
-import { DataTableMods, DataTableRowMods } from './types';
-import { ColumnsConfigurationModal, ColumnsConfigurationModalProps } from './columnsConfigurationModal';
-import { VirtualList, VirtualListRenderRowsParams, VirtualListProps } from '../layout';
-import { DataRowsContainer } from './DataRowsContainer';
-import { ReactComponent as EmptyTableIcon } from '../../icons/empty-table.svg';
-import { Text } from '../typography';
-import css from './DataTable.module.scss';
-import './variables.scss';
-import { i18n } from '../../i18n';
-
-export interface DataTableProps<TItem, TId, TFilter = any> extends IEditable<DataTableState>, DataSourceListProps, DataTableColumnsConfigOptions, Pick<VirtualListProps, 'onScroll'> {
-    /** Callback to get rows that will be rendered in table */
-    getRows(): DataRowProps<TItem, TId>[];
-    /** Array of all possible columns for the table */
-    columns: DataColumnProps<TItem, TId>[];
-    /** Render callback for the table row.
-     * If omitted, default DataTableRow implementation will be rendered.
-     * */
-    renderRow?(props: DataTableRowProps<TItem, TId>): React.ReactNode;
-    /** Render callback for the 'No results' block. Will be rendered when table doesn't have rows for displaying, e.g. after search applying.
-     * If omitted, default implementation will be rendered.
-     * */
-    renderNoResultsBlock?(): React.ReactNode;
-    /** Pass true to enable the column configuration button in the last column header. On this button click will show the columns configuration modal.
-     * Note that you need to have at least one column fixed to the right for proper display
-     * */
-    showColumnsConfig?: boolean;
-    /** Array of filters to be added to the column header.
-     * For each filter, you need to specify the `columnKey` of the column where it will be attached.
-     * */
-    filters?: TableFiltersConfig<any>[];
-    /** Called when cell content is copied to other cells via the DataTable cell copying mechanism.
-     * This callback is typically used to update the state according to the changes.
-     * To enable cell copying, provide the canCopy prop for the column.
-     * */
-    onCopy?: (copyFrom: DataTableSelectedCellData<TItem, TId, TFilter>, selectedCells: DataTableSelectedCellData<TItem, TId, TFilter>[]) => void;
-    /** Render callback for column configuration modal.
-     * If omitted, default `ColumnsConfigurationModal` implementation will be rendered.
-     */
-    renderColumnsConfigurationModal?: (props: ColumnsConfigurationModalProps<TItem, TId, TFilter>) => React.ReactNode;
-    dataTableFocusManager?: DataTableFocusManager<TId>;
-}
-
-export function DataTable<TItem, TId>(props: React.PropsWithChildren<DataTableProps<TItem, TId> & DataTableMods>) {
-    const { uuiModals } = useUuiContext();
-    const headerRef = React.useRef<HTMLDivElement>();
-    const columnsWithFilters = useColumnsWithFilters(props.columns, props.filters);
-    const { columns, config, defaultConfig } = useColumnsConfig(columnsWithFilters, props.value?.columnsConfig);
-
-    const defaultRenderRow = React.useCallback((rowProps: DataRowProps<TItem, TId> & DataTableRowMods) => {
-        return <DataTableRow key={ rowProps.rowKey } size={ props.size } borderBottom={ props.border } { ...rowProps } cx={ css.cell } />;
-    }, []);
-
-    const renderRow = (row: DataRowProps<TItem, TId>) => (props.renderRow ?? defaultRenderRow)({ ...row, columns });
-    const rows = props.getRows();
-
-    const renderNoResultsBlock = React.useCallback(() => {
-        return (
-            <div className={ css.noResults }>
-                {props.renderNoResultsBlock ? (
-                    props.renderNoResultsBlock?.()
-                ) : (
-                    <>
-                        <IconContainer cx={ css.noResultsIcon } icon={ EmptyTableIcon } />
-                        <Text cx={ css.noResultsTitle } fontSize="24" lineHeight="30" color="primary" fontWeight="600">
-                            {i18n.tables.noResultsBlock.title}
-                        </Text>
-                        <Text fontSize="16" lineHeight="24" color="primary">
-                            {i18n.tables.noResultsBlock.message}
-                        </Text>
-                    </>
-                )}
-            </div>
-        );
-    }, [props.renderNoResultsBlock]);
-
-    const onConfigurationButtonClick = React.useCallback(() => {
-        const configProps = { columns: props.columns, columnsConfig: { ...config }, defaultConfig };
-
-        uuiModals
-            .show<ColumnsConfig>((modalProps) => {
-            return (
-                props.renderColumnsConfigurationModal
-                    ? props.renderColumnsConfigurationModal({ ...configProps, ...modalProps })
-                    : (
-                        <ColumnsConfigurationModal
-                            { ...modalProps }
-                            columns={ props.columns }
-                            columnsConfig={ config }
-                            defaultConfig={ defaultConfig }
-                        />
-                    )
-            );
-        })
-            .then((columnsConfig) => props.onValueChange({ ...props.value, columnsConfig }))
-            .catch(() => null);
-    }, [
-        props.columns, config, defaultConfig, props.value, props.onValueChange, props.renderColumnsConfigurationModal,
-    ]);
-
-    const renderRowsContainer = React.useCallback(
-        ({ listContainerRef, estimatedHeight, offsetY, scrollShadows }: VirtualListRenderRowsParams) => (
-            <>
-                <div className={ css.stickyHeader } ref={ headerRef }>
-                    <DataTableHeaderRow
-                        columns={ columns }
-                        onConfigButtonClick={ props.showColumnsConfig && onConfigurationButtonClick }
-                        selectAll={ props.selectAll }
-                        size={ props.size }
-                        textCase={ props.headerTextCase }
-                        allowColumnsReordering={ props.allowColumnsReordering }
-                        allowColumnsResizing={ props.allowColumnsResizing }
-                        value={ { ...props.value, columnsConfig: config } }
-                        onValueChange={ props.onValueChange }
-                    />
-                    <div
-                        className={ cx(uuiScrollShadows.top, {
-                            [uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
-                        }) }
-                    />
-                </div>
-                {props.exactRowsCount !== 0 ? (
-                    <DataRowsContainer
-                        headerRef={ headerRef }
-                        listContainerRef={ listContainerRef }
-                        estimatedHeight={ estimatedHeight }
-                        offsetY={ offsetY }
-                        scrollShadows={ scrollShadows }
-                        renderRow={ renderRow }
-                        rows={ rows }
-                    />
-                ) : (
-                    renderNoResultsBlock?.()
-                )}
-            </>
-        ),
-        [
-            props, columns, rows, renderNoResultsBlock, onConfigurationButtonClick,
-        ],
-    );
-
-    return (
-        <DataTableSelectionProvider onCopy={ props.onCopy } rows={ rows } columns={ columns }>
-            <DataTableFocusProvider dataTableFocusManager={ props.dataTableFocusManager }>
-                <VirtualList
-                    value={ props.value }
-                    onValueChange={ props.onValueChange }
-                    onScroll={ props.onScroll }
-                    rowsCount={ props.rowsCount }
-                    renderRows={ renderRowsContainer }
-                    cx={ cx(css.table, 'uui-dt-vars') }
-                    isLoading={ props.isReloading }
-                    rowsSelector="[role=row]"
-                    rawProps={ {
-                        role: 'table',
-                        'aria-colcount': columns.length,
-                        'aria-rowcount': props.rowsCount,
-                    } }
-                />
-            </DataTableFocusProvider>
-        </DataTableSelectionProvider>
-    );
-}

package/components/tables/DataTableCell.module.scss

@@ -1,65 +0,0 @@
-.cell {
-    &.wrapper {
-        display: flex;
-        align-items: flex-start;
-    }
-
-    &.align-widgets-top {
-        &.size-24, &.size-30 {
-            :global(.uui-checkbox), :global(.uui-folding-arrow) {
-                margin-top: 6px;
-            }
-        }
-
-        &.size-36 {
-            :global(.uui-checkbox), :global(.uui-folding-arrow) {
-                margin-top: 9px;
-            }
-        }
-
-        &.size-42 {
-            :global(.uui-checkbox), :global(.uui-folding-arrow) {
-                margin-top: 12px;
-            }
-        }
-
-        &.size-48 {
-            :global(.uui-checkbox), :global(.uui-folding-arrow) {
-                margin-top: 15px;
-            }
-        }
-
-        &.size-60 {
-            :global(.uui-checkbox), :global(.uui-folding-arrow) {
-                margin-top: 21px;
-            }
-        }
-    }
-
-    &.align-widgets-center :global(.uui-checkbox-container) {
-        align-self: center;
-    }
-
-    &.padding-12 { padding: 0 12px; }
-    &.padding-24 { padding: 0 24px; }
-
-    &.padding-left-12 { padding-left: 12px; }
-    &.padding-left-24 { padding-left: 24px; }
-
-    &.padding-right-24 { padding-right: 24px; }
-
-    &:global(.uui-invalid) {
-        background-color: var(--uui-dt-cell-bg-invalid);
-    }
-}
-
-:global(.uui-dt-vertical-cell-border) {
-    border-left-color: var(--uui-dt-border);
-    border-right-color: var(--uui-dt-border);
-}
-
-.loading-cell {
-    div[aria-busy='true'] > span {
-        margin: 0 3px 0 0;
-    }
-}

package/components/tables/DataTableCell.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react';
-import { DataTableCellProps } from '@epam/uui-core';
-import { DataTableCell as UuiDataTableCell } from '@epam/uui-components';
-import { DataRowAddons } from '../widgets';
-import { DataTableCellMods } from './types';
-import { TextPlaceholder, Text } from '../typography';
-import { Tooltip } from '../overlays';
-import css from './DataTableCell.module.scss';
-import './variables.scss';
-
-export function DataTableCell<TItem, TId, TCellValue>(props: DataTableCellProps<TItem, TId, TCellValue> & DataTableCellMods) {
-    props = { ...props };
-
-    if (props.isFirstColumn) {
-        props.addons = <DataRowAddons { ...props } />;
-    }
-
-    props.renderPlaceholder = props.renderPlaceholder
-        || (() => (
-            // remove `css.loadingCell` after` removing `margin: 0 3px 3px 0` from `TextPlaceholder` `loadingWord` class styles.
-            <Text key="t" size={ props.size !== '60' ? props.size : '48' } cx={ css.loadingCell }>
-                <TextPlaceholder />
-            </Text>
-        ));
-
-    props.renderUnknown = props.renderUnknown
-        || (() => (
-            <Text key="t" size={ props.size !== '60' ? props.size : '48' }>
-                Unknown
-            </Text>
-        ));
-
-    props.renderTooltip = (tooltipProps) => <Tooltip color="critical" { ...tooltipProps } />;
-
-    const isEditable = !!props.onValueChange;
-
-    props.cx = [
-        'uui-dt-vars',
-        'data-table-cell',
-        props.cx,
-        css.cell,
-        css['size-' + (props.size || '36')],
-        css[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
-        props.isFirstColumn && css[`padding-left-${props.padding || (isEditable && !props.rowProps.isLoading && '12') || '24'}`],
-        props.isLastColumn && css['padding-right-24'],
-        css[`align-widgets-${props.alignActions || 'top'}`],
-        (props.border || isEditable) && 'uui-dt-vertical-cell-border',
-    ];
-
-    return <UuiDataTableCell { ...props } />;
-}

package/components/tables/DataTableHeaderCell.module.scss

@@ -1,161 +0,0 @@
-@use  '../../assets/styles/index' as *;
-
-@mixin icon() {
-    flex: 0 0 16px;
-    width: 16px;
-    cursor: pointer;
-}
-
-.cell {
-    color: var(--uui-text-primary);
-    display: flex;
-    box-sizing: border-box;
-    align-items: center;
-    padding: 0 12px;
-    position: relative;
-    width: 0;
-
-    // to align with cell's borders. TBD: move this to uui-components.
-    border-right: 1px solid transparent;
-    margin-left: -1px;
-    background-clip: padding-box;
-
-    &:global(.-clickable) {
-        cursor: pointer;
-
-        &:hover {
-            background: var(--uui-dt-row-bg-hover);
-            box-shadow: inset 1px 0 0 var(--uui-dt-border), inset -1px 0 0 var(--uui-dt-border);
-
-            .sort-icon, .dropdown-icon, .infoIcon {
-                fill: var(--uui-icon-hover);
-            }
-        }
-    }
-
-    &.resizable {
-        &:hover {
-            box-shadow: inset 1px 0 0 var(--uui-dt-border), inset -1px 0 0 var(--uui-dt-border);
-        }
-    }
-
-    &.size-24 { height: 24px; }
-    &.size-30 { height: 30px; }
-    &.size-36 { height: 36px; }
-    &.size-42 { height: 42px; }
-    &.size-48 { height: 48px; }
-
-    &.padding-left-24 { padding-left: 24px; }
-
-    &.padding-right-24 { padding-right: 24px; }
-
-
-    .caption {
-        font-family: var(--uui-dt-header-cell-font);
-        font-weight: var(--uui-dt-header-cell-font-weight);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin-right: 6px;
-    }
-
-    .checkbox {
-        margin-right: 12px;
-    }
-
-    .icon {
-        display: flex;
-        flex-shrink: 0;
-        cursor: pointer;
-    }
-
-    .icon-cell {
-        display: flex;
-        overflow: hidden;
-
-        &.align-right {
-            flex-direction: row-reverse;
-
-            .caption {
-                margin-right: 0;
-                margin-left: 6px;
-            }
-        }
-
-        &.align-center {
-            justify-content: center;
-        }
-    }
-
-    .tooltip-wrapper {
-        width: 100%;
-        min-width: 0;
-    }
-
-    .cell-tooltip {
-        top: 0;
-    }
-
-    .upper-case {
-        text-transform: uppercase;
-        font-size: 12px;
-    }
-
-    .font-size-14 {
-        font-size: 14px;
-    }
-
-    .resize-mark {
-        position: absolute;
-        width: 12px;
-        right: 0;
-        height: 100%;
-        cursor: col-resize;
-
-        &:hover {
-            background-color: var(--uui-dt-cell-bg-resize);
-        }
-    }
-
-    &.draggable {
-        cursor: pointer;
-    }
-
-    &.ghost {
-        @include dnd-ghost-shadow();
-        background-color: var(--uui-dt-row-bg-hover);
-    }
-
-    &.is-dragged-out {
-        background-color: var(--uui-dt-row-bg-hover);
-        opacity: 0.5;
-    }
-
-    &.dnd-marker-left {
-        box-shadow: inset 2px 0 0 0 var(--uui-dt-header-drop_marker);
-
-        &:global(.-clickable), &:local(.resizable) {
-            box-shadow: inset 2px 0 0 0 var(--uui-dt-header-drop_marker);
-        }
-    }
-
-    &.dnd-marker-right {
-        box-shadow: inset -2px 0 0 0 var(--uui-dt-header-drop_marker);
-
-        &:global(.-clickable), &:local(.resizable) {
-            box-shadow: inset -2px 0 0 0 var(--uui-dt-header-drop_marker);
-        }
-    }
-}
-
-.cell-tooltip-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    row-gap: 3px;
-
-    .cell-tooltip-text {
-        color: var(--uui-tooltip-text);
-        padding: 0;
-    }
-}

package/components/tables/DataTableHeaderCell.tsx

@@ -1,151 +0,0 @@
-import * as React from 'react';
-import {
-    DataTableHeaderCellProps, uuiMarkers, uuiDataTableHeaderCell, IDropdownToggler, cx, DataColumnProps,
-} from '@epam/uui-core';
-import { DataTableHeaderCell as UuiDataTableHeaderCell, HeaderCellContentProps } from '@epam/uui-components';
-import { ColumnHeaderDropdown } from './ColumnHeaderDropdown';
-import { DataTableHeaderCellMods } from './types';
-import { FlexCell } from '../layout';
-import { IconButton } from '../buttons';
-import { Checkbox } from '../inputs';
-import { Tooltip } from '../overlays';
-import { Text } from '../typography';
-import css from './DataTableHeaderCell.module.scss';
-import './variables.scss';
-import { ReactComponent as DefaultSortIcon } from '@epam/assets/icons/common/table-swap-18.svg';
-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 { ReactComponent as FilterIcon } from '@epam/assets/icons/common/content-filtration-18.svg';
-import { ReactComponent as DropdownIcon } from '@epam/assets/icons/common/navigation-chevron-down-18.svg';
-import { ReactComponent as OpenedDropdownIcon } from '@epam/assets/icons/common/navigation-chevron-up-18.svg';
-
-interface DataTableHeaderCellState {
-    isDropdownOpen: boolean;
-}
-
-export class DataTableHeaderCell<TItem, TId> extends React.Component<DataTableHeaderCellProps<TItem, TId> & DataTableHeaderCellMods, DataTableHeaderCellState> {
-    state: DataTableHeaderCellState = {
-        isDropdownOpen: null,
-    };
-
-    getTextStyle = () => {
-        if (this.props.textCase === 'upper') return css.upperCase;
-        return css['font-size-14'];
-    };
-
-    getTooltipContent = (column: DataColumnProps<TItem, TId>) => (
-        <div className={ css.cellTooltipWrapper }>
-            <Text fontSize="14" fontWeight="600" cx={ css.cellTooltipText }>{ column.caption }</Text>
-            { column.info && <Text fontSize="12" cx={ css.cellTooltipText }>{ column.info }</Text> }
-        </div>
-    );
-
-    getColumnCaption = () => {
-        const renderTooltip = this.props.column.renderTooltip || this.getTooltipContent;
-
-        return (
-            <div className={ css.tooltipWrapper }>
-                <div className={ cx(css.iconCell, css['align-' + this.props.column.textAlign], uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) }>
-                    <Tooltip
-                        placement="top"
-                        color="inverted"
-                        content={ renderTooltip(this.props.column) }
-                        cx={ css.cellTooltip }
-                        openDelay={ 600 }
-                    >
-                        <Text key="text" lineHeight="30" fontSize="14" size="30" cx={ cx(css.caption, this.getTextStyle(), uuiDataTableHeaderCell.uuiTableHeaderCaption) }>
-                            {this.props.column.caption}
-                        </Text>
-                    </Tooltip>
-                    {this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (
-                        <IconButton
-                            key="sort"
-                            cx={ cx(css.icon, css.sortIcon, this.props.sortDirection && css.sortIconActive, uuiDataTableHeaderCell.uuiTableHeaderSortIcon) }
-                            color={ this.props.sortDirection ? 'neutral' : 'secondary' }
-                            icon={ this.props.sortDirection === 'desc' ? SortIconDesc : this.props.sortDirection === 'asc' ? SortIcon : DefaultSortIcon }
-                        />
-                    )}
-                    {this.props.isFilterActive && (
-                        <IconButton
-                            key="filter"
-                            cx={ cx(css.icon, !this.props.sortDirection && css.filterIcon, uuiDataTableHeaderCell.uuiTableHeaderFilterIcon) }
-                            color="neutral"
-                            icon={ FilterIcon }
-                        />
-                    )}
-                    {this.props.column.renderFilter && (
-                        <IconButton
-                            key="dropdown"
-                            cx={ cx(css.icon, css.dropdownIcon, uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon) }
-                            color="secondary"
-                            icon={ this.state.isDropdownOpen ? OpenedDropdownIcon : DropdownIcon }
-                        />
-                    )}
-                </div>
-            </div>
-        );
-    };
-
-    renderHeaderCheckbox = () =>
-        this.props.selectAll
-        && this.props.isFirstColumn && (
-            <Checkbox size={ +this.props.size < 36 ? '12' : '18' } { ...this.props.selectAll } cx={ cx(css.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) } />
-        );
-
-    renderResizeMark = (props: HeaderCellContentProps) => <div onMouseDown={ props.onResizeStart } className={ cx(css.resizeMark, uuiMarkers.draggable) } />;
-    renderCellContent = (props: HeaderCellContentProps, dropdownProps?: IDropdownToggler) => {
-        const isResizable = this.props.column.allowResizing ?? this.props.allowColumnsResizing;
-        return (
-            <FlexCell
-                { ...this.props.column }
-                minWidth={ this.props.column.width }
-                ref={ (ref) => {
-                    (props.ref as React.RefCallback<HTMLElement>)(ref);
-                    (dropdownProps?.ref as React.RefCallback<HTMLElement>)?.(ref);
-                } }
-                cx={ cx(
-                    'uui-dt-vars',
-                    uuiDataTableHeaderCell.uuiTableHeaderCell,
-                    (this.props.column.isSortable || this.props.isDropdown) && uuiMarkers.clickable,
-                    css.cell,
-                    css['size-' + (this.props.size || '36')],
-                    this.props.isFirstColumn && css['padding-left-24'],
-                    this.props.isLastColumn && css['padding-right-24'],
-                    this.props.column.cx,
-                    isResizable && css.resizable,
-                    props.isDraggable && css.draggable,
-                    props.isDragGhost && css.ghost,
-                    props.isDraggedOut && css.isDraggedOut,
-                    props.isDndInProgress && css['dnd-marker-' + props.position],
-                ) }
-                onClick={ !this.props.column.renderFilter ? props.toggleSort : dropdownProps?.onClick }
-                rawProps={ {
-                    role: 'columnheader',
-                    'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none',
-                    ...props.eventHandlers,
-                } }
-            >
-                {this.renderHeaderCheckbox()}
-                {this.getColumnCaption()}
-                { isResizable && this.renderResizeMark(props) }
-            </FlexCell>
-        );
-    };
-
-    renderCellWithFilter = (props: HeaderCellContentProps) => (
-        <ColumnHeaderDropdown
-            isOpen={ this.state.isDropdownOpen }
-            isSortable={ this.props.column.isSortable }
-            renderTarget={ (dropdownProps) => this.renderCellContent(props, dropdownProps) }
-            renderFilter={ this.props.renderFilter }
-            onSort={ this.props.onSort }
-            sortDirection={ this.props.sortDirection }
-            onOpenChange={ (isDropdownOpen) => this.setState({ isDropdownOpen }) }
-            title={ this.props.column.caption as string }
-        />
-    );
-
-    render() {
-        return <UuiDataTableHeaderCell { ...this.props } renderCellContent={ this.props.column.renderFilter ? this.renderCellWithFilter : this.renderCellContent } />;
-    }
-}

package/components/tables/DataTableHeaderRow.module.scss

@@ -1,23 +0,0 @@
-@use  '../../assets/styles/index' as *;
-
-.header-cell {
-    background: none;
-}
-
-.config-icon {
-    position: absolute;
-    height: 100%;
-    right: 24px;
-    z-index: 2;
-}
-
-:global(.uui-table-header-row) {
-    :global(.uui-table-fixed-section), :global(.uui-table-scrolling-section) {
-        border-bottom-color: var(--uui-dt-border);
-    }
-}
-
-:global(.uui-table-header-row) {
-    --uui-dt-row-bg: var(--uui-dt-header-row-bg);
-    --uui-dt-row-bg-hover: var(--uui-dt-header-row-bg-hover);
-}

package/components/tables/DataTableHeaderRow.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { DataTableHeaderRow as uuiDataTableHeaderRow } from '@epam/uui-components';
-import { DataTableHeaderRowProps, withMods } from '@epam/uui-core';
-import { DataTableHeaderRowMods } from './types';
-import { DataTableHeaderCell } from './DataTableHeaderCell';
-import { IconButton } from '../buttons/IconButton';
-
-import css from './DataTableHeaderRow.module.scss';
-import './variables.scss';
-import { ReactComponent as MoreIcon } from '@epam/assets/icons/common/action-settings-18.svg';
-
-export const DataTableHeaderRow = withMods<DataTableHeaderRowProps, DataTableHeaderRowMods>(
-    uuiDataTableHeaderRow,
-    () => [css.root, 'uui-dt-vars'],
-    (mods) => ({
-        renderCell: (props) => <DataTableHeaderCell { ...props } size={ mods.size } textCase={ mods.textCase || 'normal' } key={ props.column.key } />,
-        renderConfigButton: () => <IconButton key="configuration" onClick={ mods.onConfigButtonClick } cx={ css.configIcon } color="neutral" icon={ MoreIcon } />,
-    }),
-);