From 40051bc8505285386a135cf8b9f630ca482c9585 Mon Sep 17 00:00:00 2001
From: rayetzki <rayetzkiillya@gmail.com>
Date: Thu, 20 Jan 2022 10:21:50 +0200
Subject: [PATCH 1/2] [VirtualList, DataTable]: Fix recalculation of
 estimatedHeight

---
 .../examples/virtualList/Advanced.example.tsx |  4 +-
 .../__snapshots__/DataTable.test.tsx.snap     | 55 +++++++++++++++++++
 .../DataTableHeaderRow.test.tsx.snap          | 10 ++++
 .../src/table/DataTableRowContainer.tsx       |  1 +
 uui/hooks/useVirtualList.ts                   |  7 +--
 5 files changed, 70 insertions(+), 7 deletions(-)

diff --git a/app/src/docs/examples/virtualList/Advanced.example.tsx b/app/src/docs/examples/virtualList/Advanced.example.tsx
index 67350bac5e..1562f905bc 100644
--- a/app/src/docs/examples/virtualList/Advanced.example.tsx
+++ b/app/src/docs/examples/virtualList/Advanced.example.tsx
@@ -22,14 +22,14 @@ export default function AdvancedVirtualList() {
 
     const citiesDataSource = useLazyDataSource<City, string, string>({ api: svc.api.demo.cities }, []);
     const { getVisibleRows, getListProps } = citiesDataSource.useView(value, onValueChange, {});
-    const { listContainerRef, offsetY, handleScroll, scrollContainerRef } = useVirtualList({
+    const { listContainerRef, offsetY, handleScroll, scrollContainerRef, estimatedHeight } = useVirtualList({
         value, onValueChange, rowsCount: getListProps().rowsCount,
     });
 
     return (
         <div ref={ scrollContainerRef } onScroll={ handleScroll } className={ css.mainContainer }>
             <Header />
-            <div className={ css.mainContainerWrapper }>
+            <div className={ css.mainContainerWrapper } style={ { minHeight: `${estimatedHeight}px` } }>
                 <ul ref={ listContainerRef } style={ { marginTop: `${offsetY}px` } } className={ css.mainContainerList }>
                     { getVisibleRows().map(row => (
                         <li className={ cx(css.mainContainerListItem, css.text) } key={ row.key + String(row.index) }>
diff --git a/loveship/components/tables/__tests__/__snapshots__/DataTable.test.tsx.snap b/loveship/components/tables/__tests__/__snapshots__/DataTable.test.tsx.snap
index d9d517050c..6ed6bd08d8 100644
--- a/loveship/components/tables/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/loveship/components/tables/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -43,6 +43,11 @@ exports[`DataTable should be rendered correctly 1`] = `
       >
         <div
           className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+          style={
+            Object {
+              "flex": "0 0 96px",
+            }
+          }
         >
           <div
             aria-sort="none"
@@ -262,6 +267,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -361,6 +371,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -460,6 +475,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -559,6 +579,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -658,6 +683,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -757,6 +787,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -856,6 +891,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -955,6 +995,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -1054,6 +1099,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -1153,6 +1203,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
diff --git a/loveship/components/tables/__tests__/__snapshots__/DataTableHeaderRow.test.tsx.snap b/loveship/components/tables/__tests__/__snapshots__/DataTableHeaderRow.test.tsx.snap
index 5c5c04e0b9..7f826fde8c 100644
--- a/loveship/components/tables/__tests__/__snapshots__/DataTableHeaderRow.test.tsx.snap
+++ b/loveship/components/tables/__tests__/__snapshots__/DataTableHeaderRow.test.tsx.snap
@@ -7,6 +7,11 @@ exports[`DataTableHeaderRow should be rendered correctly with extra props 1`] =
 >
   <div
     className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+    style={
+      Object {
+        "flex": "0 0 96px",
+      }
+    }
   >
     <div
       aria-sort="none"
@@ -261,6 +266,11 @@ exports[`DataTableHeaderRow should render with default props 1`] = `
 >
   <div
     className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+    style={
+      Object {
+        "flex": "0 0 96px",
+      }
+    }
   >
     <div
       aria-sort="none"
diff --git a/uui-components/src/table/DataTableRowContainer.tsx b/uui-components/src/table/DataTableRowContainer.tsx
index ab57370d01..94bde68632 100644
--- a/uui-components/src/table/DataTableRowContainer.tsx
+++ b/uui-components/src/table/DataTableRowContainer.tsx
@@ -38,6 +38,7 @@ export class DataTableRowContainer<TItem, TId, TFilter> extends React.Component<
 
     wrapFixedSection = (cells: DataColumnProps<TItem, TId, TFilter>[], direction: 'left' | 'right') => (
         <div
+            style={ { flex: `0 0 ${this.getSectionWidth(cells)}px` } }
             className={ cx({
                 [css.fixedColumnsSectionLeft]: direction === 'left',
                 [uuiDataTableRowContainer.uuiTableFixedSectionLeft]: direction === 'left',
diff --git a/uui/hooks/useVirtualList.ts b/uui/hooks/useVirtualList.ts
index c2cffaa987..e302a09737 100644
--- a/uui/hooks/useVirtualList.ts
+++ b/uui/hooks/useVirtualList.ts
@@ -66,13 +66,10 @@ export function useVirtualList<List extends HTMLElement = any, ScrollContainer e
         };
     }, [onValueChange, blockAlign, rowOffsets.current, rowsCount, value, onScroll, scrollContainer.current]);
 
-    const listOffset = React.useMemo(() => {
-        if (!listContainer.current) return undefined;
-        return listContainer.current.offsetTop;
-    }, [listContainer.current]);
+    const listOffset = React.useMemo(() => listContainer.current?.offsetTop || 0, [listContainer.current]);
 
     const updateRowHeights = React.useCallback(() => {
-        if (!listContainer.current || (listContainer.current.offsetTop > 0 && !listOffset)) return;
+        if (!listContainer.current) return;
 
         Array.from(listContainer.current.children).forEach((node, index) => {
             const topIndex = value?.topIndex || 0;

From be518b85d2573b76cd092a59846663f939aba461 Mon Sep 17 00:00:00 2001
From: rayetzki <rayetzkiillya@gmail.com>
Date: Thu, 20 Jan 2022 15:29:50 +0200
Subject: [PATCH 2/2] [DataTableHeaderCell]: Remove key to allow dnd, resizing

---
 epam-promo/components/tables/DataTableHeaderRow.tsx | 1 -
 loveship/components/tables/DataTableHeaderRow.tsx   | 1 -
 uui-components/src/table/DataTableRowContainer.tsx  | 2 +-
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/epam-promo/components/tables/DataTableHeaderRow.tsx b/epam-promo/components/tables/DataTableHeaderRow.tsx
index 05e6a3b6d2..075318dd69 100644
--- a/epam-promo/components/tables/DataTableHeaderRow.tsx
+++ b/epam-promo/components/tables/DataTableHeaderRow.tsx
@@ -10,7 +10,6 @@ export const DataTableHeaderRow = withMods<DataTableHeaderRowProps, DataTableHea
     mods => [css.root],
     mods => ({
         renderCell: props => <DataTableHeaderCell
-            key={ props.column.key }
             { ...props }
             size={ mods.size }
             textCase={ mods.textCase || 'normal' }
diff --git a/loveship/components/tables/DataTableHeaderRow.tsx b/loveship/components/tables/DataTableHeaderRow.tsx
index 20ab32dd1d..ef45a1c9ec 100644
--- a/loveship/components/tables/DataTableHeaderRow.tsx
+++ b/loveship/components/tables/DataTableHeaderRow.tsx
@@ -12,7 +12,6 @@ export const DataTableHeaderRow = withMods<DataTableHeaderRowProps, DataTableHea
     mods => [css.root],
     mods => ({
         renderCell: props => <DataTableHeaderCell
-            key={ props.column.key }
             { ...props }
             size={ mods.size }
             textCase={ mods.textCase || 'normal' }
diff --git a/uui-components/src/table/DataTableRowContainer.tsx b/uui-components/src/table/DataTableRowContainer.tsx
index 94bde68632..1dd702dde9 100644
--- a/uui-components/src/table/DataTableRowContainer.tsx
+++ b/uui-components/src/table/DataTableRowContainer.tsx
@@ -44,7 +44,7 @@ export class DataTableRowContainer<TItem, TId, TFilter> extends React.Component<
                 [uuiDataTableRowContainer.uuiTableFixedSectionLeft]: direction === 'left',
                 [css.fixedColumnsSectionRight]: direction === 'right',
                 [uuiDataTableRowContainer.uuiTableFixedSectionRight]: direction === 'right',
-            })}>
+            }) }>
             { this.renderCells(cells) }
             { direction === 'right' && <div className={ uuiDataTableRowContainer.uuiScrollShadowLeft } /> }
             { direction === 'left' && <div className={ uuiDataTableRowContainer.uuiScrollShadowRight } /> }