@epam/uui 5.3.0 → 5.4.1

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 } />,
-    }),
-);

package/components/tables/DataTableRow.module.scss

@@ -1,58 +0,0 @@
-@use  '../../assets/styles/index' as *;
-@use  '../../assets/styles/dnd' as *;
-
-.root {
-    &:global(.uui-dt-row-border.uui-table-row) {
-        --uui-dt-row-border-width: 1px;
-    }
-
-    &:global(.-clickable) {
-        cursor: pointer;
-
-        &:hover {
-            --uui-dt-row-bg: var(--uui-dt-row-bg-hover);
-        }
-    }
-
-    &:global(.-draggable) {
-        @include dnd-cursor-style();
-    }
-
-    &:global(.uui-selected.uui-table-row) {
-        --uui-dt-row-bg: var(--uui-dt-row-bg-selected);
-    }
-
-    &:global(.uui-invalid.uui-table-row) {
-        --uui-dt-row-bg: var(--uui-dt-row-bg-invalid);
-    }
-
-    &:global(.uui-dragged-out) {
-        opacity: 0.5;
-    }
-
-    &:global(.uui-drag-ghost) {
-        @include dnd-ghost-shadow();
-    }
-
-    &:global(.uui-focus) {
-        //border: 1px solid $blue;
-    }
-
-    &:global(.uui-dt-row-border) {
-        border-bottom-color: var(--uui-dt-border);
-    }
-}
-
-:global(.uui-dt-row-border) {
-    :global(.uui-table-fixed-section), :global(.uui-table-scrolling-section) {
-        border-bottom-color: var(--uui-dt-border);
-    }
-}
-
-// Sizes
-
-.size-24 { min-height: 24px; }
-.size-30 { min-height: 30px; }
-.size-36 { min-height: 36px; }
-.size-48 { min-height: 48px; }
-.size-60 { min-height: 60px; }

package/components/tables/DataTableRow.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { DataTableRow as uuiDataTableRow } from '@epam/uui-components';
-import {
-    withMods, DataTableCellProps, DndActorRenderParams, DataTableRowProps,
-} from '@epam/uui-core';
-import { DataTableCell } from './DataTableCell';
-import { DataTableRowMods } from './types';
-import { DropMarker } from '../dnd';
-import css from './DataTableRow.module.scss';
-import './variables.scss';
-
-// Here we define a single instance of the renderCell function to make DataTableRow#shouldComponentUpdate work.
-// As we need our mods to style the cell properly, we extract them from DataTableCellProps.rowProps, which is a hack, but it's reliable enough.
-export const renderCell = (props: DataTableCellProps) => {
-    const mods = props.rowProps as DataTableRowMods & DataTableRowProps;
-    return <DataTableCell size={ mods.size } { ...props } />;
-};
-
-export const renderDropMarkers = (props: DndActorRenderParams) => <DropMarker { ...props } enableBlocker={ true } />;
-
-export const propsMods = { renderCell, renderDropMarkers };
-
-export const DataTableRow = withMods<DataTableRowProps, DataTableRowMods>(
-    uuiDataTableRow,
-    ({ borderBottom = true, size }) => {
-        return [
-            css.root, 'uui-dt-vars', borderBottom && 'uui-dt-row-border', css['size-' + (size || '36')],
-        ];
-    },
-    () => propsMods,
-);

package/components/tables/__tests__/ColumnHeaderDropdown.test.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
-import { Button } from '../../buttons';
-import { ColumnHeaderDropdown } from '../ColumnHeaderDropdown';
-import { mockReactPortalsForSnapshots } from '@epam/uui-test-utils';
-
-describe('ColumnHeaderDropdown', () => {
-    it('should be rendered correctly', async () => {
-        const portalMock = mockReactPortalsForSnapshots();
-        const tree = await renderSnapshotWithContextAsync(
-            <ColumnHeaderDropdown
-                title=""
-                renderTarget={ (props) => <Button caption="Test" { ...props } /> }
-                isOpen
-                onOpenChange={ jest.fn }
-                isSortable
-                sortDirection="asc"
-                onSort={ jest.fn }
-                renderFilter={ () => <div>Picker</div> }
-            />,
-        );
-        portalMock.mockClear();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/tables/__tests__/DataTable.test.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { renderSnapshotWithContextAsync, renderWithContextAsync, screen } from '@epam/uui-test-utils';
-import { DataTable } from '../DataTable';
-
-class ResizeObserverMock {
-    observe = () => jest.fn();
-    unobserve = () => jest.fn();
-    disconnect = () => jest.fn();
-}
-
-global.ResizeObserver = ResizeObserverMock;
-
-describe('DataTable', () => {
-    it('should be rendered correctly', async () => {
-        const tree = await renderSnapshotWithContextAsync(<DataTable columns={ [] } getRows={ () => [] } value={ {} } onValueChange={ jest.fn } />);
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should have role=table', async () => {
-        await renderWithContextAsync(<DataTable columns={ [] } getRows={ () => [] } value={ {} } onValueChange={ jest.fn } />);
-        expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-});

package/components/tables/__tests__/DataTableCell.test.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { DataTableCell } from '../DataTableCell';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('DataTableCell', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <DataTableCell
-                    column={ {
-                        key: 'test',
-                        caption: 'Test',
-                        render: () => <div>Test</div>,
-                        width: 150,
-                        fix: 'left',
-                    } }
-                    rowProps={ {
-                        id: '1',
-                        rowKey: '1',
-                        index: 1,
-                        dnd: {
-                            canAcceptDrop: () => null,
-                            onDrop: jest.fn,
-                            srcData: {},
-                            dstData: {},
-                        },
-                    } }
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <DataTableCell
-                    column={ {
-                        key: 'test',
-                        caption: 'Test',
-                        render: () => <div>Test</div>,
-                        width: 150,
-                        fix: 'left',
-                        info: 'test',
-                        isSortable: true,
-                    } }
-                    rowProps={ {
-                        id: '1',
-                        rowKey: '1',
-                        index: 1,
-                        dnd: {
-                            canAcceptDrop: () => null,
-                            onDrop: jest.fn,
-                            srcData: {},
-                            dstData: {},
-                        },
-                    } }
-                    isLastColumn
-                    padding="24"
-                    size="48"
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/tables/__tests__/DataTableHeaderCell.test.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { DataTableHeaderCell } from '../DataTableHeaderCell';
-import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
-import { DataColumnProps } from '@epam/uui-core';
-
-describe('DataTableHeaderCell', () => {
-    it('should be rendered correctly', async () => {
-        const col: DataColumnProps = {
-            key: 'test',
-            caption: 'Test',
-            render: () => <div>Test</div>,
-            width: 150,
-            fix: 'left',
-        };
-        const tree = await renderSnapshotWithContextAsync(
-            <DataTableHeaderCell key="test" column={ col } onSort={ jest.fn } isFirstColumn isLastColumn={ false } value={ {} } onValueChange={ jest.fn } />,
-        );
-
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/tables/__tests__/DataTableHeaderRow.test.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { DataTableHeaderRow } from '../DataTableHeaderRow';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('DataTableHeaderRow', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<DataTableHeaderRow value={ null } onValueChange={ jest.fn } columns={ [] } />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <DataTableHeaderRow
-                    value={ {
-                        topIndex: 0,
-                        visibleCount: 10,
-                    } }
-                    onValueChange={ jest.fn }
-                    columns={ [] }
-                    size="42"
-                    textCase="upper"
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/tables/__tests__/DataTableRow.test.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { DataTableRow } from '../DataTableRow';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('DataTableRow', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <DataTableRow
-                    id="test"
-                    index={ 1 }
-                    rowKey="testRowKey"
-                    columns={ [
-                        {
-                            key: 'id',
-                            caption: 'ID',
-                            render: (product) => <div>{product}</div>,
-                            isSortable: true,
-                            isAlwaysVisible: true,
-                            grow: 0,
-                            shrink: 0,
-                            width: 96,
-                        },
-                    ] }
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/tables/__tests__/__snapshots__/ColumnHeaderDropdown.test.tsx.snap

@@ -1,181 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ColumnHeaderDropdown should be rendered correctly 1`] = `
-Array [
-  <button
-    aria-expanded={true}
-    aria-haspopup={true}
-    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-solid uui-color-primary uui-size-36"
-    onClick={[Function]}
-    tabIndex={0}
-    type="button"
-  >
-    <div
-      className="uui-caption"
-    >
-      Test
-    </div>
-    <div
-      className="container uui-icon uui-enabled"
-      style={Object {}}
-    >
-      <svg
-        className="flipY"
-      />
-    </div>
-  </button>,
-  <div
-    data-no-focus-lock={true}
-  >
-    <div
-      aria-hidden={false}
-      className="uui-popper"
-      data-placement="bottom-start"
-      role="dialog"
-      style={
-        Object {
-          "left": "0",
-          "position": "fixed",
-          "top": "0",
-          "zIndex": undefined,
-        }
-      }
-    >
-      <div
-        data-focus-guard={true}
-        style={
-          Object {
-            "height": "0px",
-            "left": "1px",
-            "overflow": "hidden",
-            "padding": 0,
-            "position": "fixed",
-            "top": "1px",
-            "width": "1px",
-          }
-        }
-        tabIndex={0}
-      />
-      <div
-        data-focus-lock-disabled={false}
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-      >
-        <div
-          className="uui-dropdown-body -lock-focus root container container"
-          style={
-            Object {
-              "maxWidth": undefined,
-              "minHeight": undefined,
-              "minWidth": 280,
-            }
-          }
-          tabIndex={-1}
-        >
-          <div
-            className="flexCell sortingPanelContainer"
-            style={
-              Object {
-                "alignSelf": undefined,
-                "flexBasis": "0",
-                "flexGrow": undefined,
-                "flexShrink": undefined,
-                "minWidth": 0,
-                "textAlign": undefined,
-              }
-            }
-          >
-            <div
-              className="uui-flex-row root itemRoot uui-active container -clickable align-items-center"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role="menuitem"
-              style={
-                Object {
-                  "columnGap": undefined,
-                  "rowGap": undefined,
-                }
-              }
-              tabIndex={0}
-            >
-              <button
-                className="container uui-button-box uui-enabled uui-icon_button uui-color-info root root icon iconBefore"
-                onClick={[Function]}
-                tabIndex={-1}
-                type="button"
-              >
-                <div
-                  className="container uui-icon uui-enabled"
-                  style={Object {}}
-                >
-                  <svg
-                    className=""
-                  />
-                </div>
-              </button>
-              <div
-                className="container"
-              >
-                Sort Ascending
-              </div>
-            </div>
-            <div
-              className="uui-flex-row root itemRoot container -clickable align-items-center"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role="menuitem"
-              style={
-                Object {
-                  "columnGap": undefined,
-                  "rowGap": undefined,
-                }
-              }
-              tabIndex={0}
-            >
-              <button
-                className="container uui-button-box uui-enabled uui-icon_button uui-color-neutral root root icon iconBefore"
-                onClick={[Function]}
-                tabIndex={-1}
-                type="button"
-              >
-                <div
-                  className="container uui-icon uui-enabled"
-                  style={Object {}}
-                >
-                  <svg
-                    className=""
-                  />
-                </div>
-              </button>
-              <div
-                className="container"
-              >
-                Sort Descending
-              </div>
-            </div>
-          </div>
-          <div>
-            Picker
-          </div>
-        </div>
-      </div>
-      <div
-        data-focus-guard={true}
-        style={
-          Object {
-            "height": "0px",
-            "left": "1px",
-            "overflow": "hidden",
-            "padding": 0,
-            "position": "fixed",
-            "top": "1px",
-            "width": "1px",
-          }
-        }
-        tabIndex={0}
-      />
-    </div>
-  </div>,
-]
-`;

package/components/tables/__tests__/__snapshots__/DataTable.test.tsx.snap

@@ -1,122 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DataTable should be rendered correctly 1`] = `
-<div
-  className="root root uui-scroll-bars uui-shadow-top uui-shadow-bottom scrollContainer table uui-dt-vars"
-  style={
-    Object {
-      "display": "flex",
-      "height": "100%",
-      "overflow": "hidden",
-      "position": "relative",
-      "width": "100%",
-    }
-  }
->
-  <div
-    aria-colcount={0}
-    role="table"
-    style={
-      Object {
-        "WebkitOverflowScrolling": "touch",
-        "bottom": 0,
-        "display": "flex",
-        "flex": "1 1 auto",
-        "flexDirection": "column",
-        "left": 0,
-        "marginBottom": 0,
-        "marginRight": 0,
-        "overflow": "scroll",
-        "position": "relative",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  >
-    <div
-      className="stickyHeader"
-    >
-      <div
-        className="uui-flex-row container uui-table-row-container root root uui-dt-vars uui-table-header-row container align-items-center"
-        role="row"
-        style={
-          Object {
-            "columnGap": undefined,
-            "minWidth": "0px",
-            "rowGap": undefined,
-          }
-        }
-      >
-        <div
-          className="section scrollingSection uui-table-scrolling-section"
-          style={
-            Object {
-              "--uui-dt-cell-border-width": "1px",
-              "flex": "1 0 0px",
-              "minWidth": "0px",
-            }
-          }
-        />
-      </div>
-      <div
-        className="uui-scroll-shadow-top"
-      />
-    </div>
-    <div
-      className="listContainer"
-      style={
-        Object {
-          "minHeight": "0px",
-        }
-      }
-    >
-      <div
-        role="rowgroup"
-        style={
-          Object {
-            "marginTop": 0,
-          }
-        }
-      />
-    </div>
-  </div>
-  <div
-    className="container uui-blocker-container root"
-    style={
-      Object {
-        "minHeight": undefined,
-      }
-    }
-  >
-    <div />
-  </div>
-  <div
-    className="uui-track-horizontal"
-    style={
-      Object {
-        "display": "none",
-        "height": 6,
-        "position": "absolute",
-      }
-    }
-  >
-    <div
-      className="uui-thumb-horizontal"
-    />
-  </div>
-  <div
-    className="uui-track-vertical"
-    style={
-      Object {
-        "display": "none",
-        "position": "absolute",
-        "width": 6,
-      }
-    }
-  >
-    <div
-      className="uui-thumb-vertical"
-    />
-  </div>
-</div>
-`;

package/components/tables/__tests__/__snapshots__/DataTableCell.test.tsx.snap

@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DataTableCell should be rendered correctly 1`] = `
-<div
-  className="uui-table-cell cell uui-dt-vars data-table-cell cell size-36 padding-12 align-widgets-top"
-  role="cell"
-  style={
-    Object {
-      "alignSelf": undefined,
-      "flexBasis": "150px",
-      "flexGrow": undefined,
-      "flexShrink": undefined,
-      "justifyContent": undefined,
-      "minWidth": "150px",
-      "textAlign": undefined,
-    }
-  }
->
-  <div>
-    Test
-  </div>
-</div>
-`;
-
-exports[`DataTableCell should be rendered correctly 2`] = `
-<div
-  className="uui-table-cell cell uui-dt-vars data-table-cell cell size-48 padding-24 padding-right-24 align-widgets-top"
-  role="cell"
-  style={
-    Object {
-      "alignSelf": undefined,
-      "flexBasis": "150px",
-      "flexGrow": undefined,
-      "flexShrink": undefined,
-      "justifyContent": undefined,
-      "minWidth": "150px",
-      "textAlign": undefined,
-    }
-  }
->
-  <div>
-    Test
-  </div>
-</div>
-`;

package/components/tables/__tests__/__snapshots__/DataTableHeaderCell.test.tsx.snap

@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DataTableHeaderCell should be rendered correctly 1`] = `
-<div
-  aria-sort="none"
-  className="flexCell uui-dt-vars uui-table-header-cell cell size-36 padding-left-24"
-  onClick={[Function]}
-  role="columnheader"
-  style={
-    Object {
-      "alignSelf": undefined,
-      "flexBasis": "150px",
-      "flexGrow": undefined,
-      "flexShrink": undefined,
-      "minWidth": "150px",
-      "textAlign": undefined,
-    }
-  }
->
-  <div
-    className="tooltipWrapper"
-  >
-    <div
-      className="iconCell align-undefined uui-table-header-caption-wrapper"
-    >
-      <div
-        className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-30 font-size-14 v-padding-0 caption font-size-14 uui-table-header-caption container"
-      >
-        Test
-      </div>
-    </div>
-  </div>
-</div>
-`;