@epam/uui 5.5.0 → 5.5.2

package/components/tables/DataTableRow.module.scss

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

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

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

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

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

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

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

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

@@ -0,0 +1,138 @@
+// 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
+    aria-hidden={false}
+    className="uui-popper"
+    data-placement="bottom-start"
+    role="dialog"
+    style={
+      Object {
+        "zIndex": undefined,
+      }
+    }
+  >
+    <div
+      className="uui-dropdown-body -lock-focus root container container"
+      style={
+        Object {
+          "maxHeight": undefined,
+          "maxWidth": "auto",
+          "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>,
+]
+`;

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

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

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

@@ -0,0 +1,34 @@
+// 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>
+`;

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

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataTableHeaderRow should be rendered correctly 1`] = `
+<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>
+`;
+
+exports[`DataTableHeaderRow should be rendered correctly 2`] = `
+<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>
+`;