From 30424e98920e1481ef5f0feb927a26cce5fe5d97 Mon Sep 17 00:00:00 2001
From: Dmitry Balashov <a.marcius26@gmail.com>
Date: Mon, 13 Mar 2023 14:11:25 +0700
Subject: [PATCH 1/2] [fix]: refactor heights watcher, close #517

---
 .changeset/wise-trees-applaud.md              |  5 +++
 .../src/components/Table/use-table-heights.ts | 35 +++++++++----------
 2 files changed, 21 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/wise-trees-applaud.md

diff --git a/.changeset/wise-trees-applaud.md b/.changeset/wise-trees-applaud.md
new file mode 100644
index 00000000..97d680d7
--- /dev/null
+++ b/.changeset/wise-trees-applaud.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`STable`): refactor internal table-heights watcher
diff --git a/packages/ui/src/components/Table/use-table-heights.ts b/packages/ui/src/components/Table/use-table-heights.ts
index 8b53a2a4..13ada984 100644
--- a/packages/ui/src/components/Table/use-table-heights.ts
+++ b/packages/ui/src/components/Table/use-table-heights.ts
@@ -35,32 +35,29 @@ export function useTableHeights({
     }
   })
 
-  const bodyHeightStyles = ref({})
+  const bodyHeightStyles = shallowReactive<Pick<CSSStyleDeclaration, 'height' | 'maxHeight'>>({
+    height: '',
+    maxHeight: '',
+  })
 
   watch(
-    [headerHeight, tableHeight],
-    (): void => {
-      if (propHeight.value) {
-        const bodyHeight = tableHeight.value - headerHeight.value
-
-        bodyHeightStyles.value = {
-          height: bodyHeight ? bodyHeight + 'px' : '',
-        }
-
-        return
+    [headerHeight, tableHeight, propHeight, propMaxHeight],
+    ([header, table, prop, propMax]) => {
+      let heightFinal = ''
+      if (prop) {
+        const bodyHeight = table - header
+        heightFinal = bodyHeight ? bodyHeight + 'px' : ''
       }
+      bodyHeightStyles.height = heightFinal
 
-      if (propMaxHeight.value) {
-        const maxHeight = parseHeight(propMaxHeight.value)
-
+      let maxHeightFinal = ''
+      if (propMax) {
+        const maxHeight = parseHeight(propMax)
         if (typeof maxHeight === 'number') {
-          // FIXME https://github.com/soramitsu/soramitsu-js-ui-library/issues/517
-          // @ts-ignore
-          return {
-            'max-height': maxHeight - headerHeight.value + 'px',
-          }
+          maxHeightFinal = maxHeight - header + 'px'
         }
       }
+      bodyHeightStyles.maxHeight = maxHeightFinal
     },
     { immediate: true },
   )

From 05de0484427b425fa91c7acf935ac9778b819b7e Mon Sep 17 00:00:00 2001
From: Dmitry Balashov <a.marcius26@gmail.com>
Date: Tue, 14 Mar 2023 07:27:31 +0700
Subject: [PATCH 2/2] [fix]: remove props from watch sources

---
 packages/ui/src/components/Table/use-table-heights.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/Table/use-table-heights.ts b/packages/ui/src/components/Table/use-table-heights.ts
index 13ada984..7202db04 100644
--- a/packages/ui/src/components/Table/use-table-heights.ts
+++ b/packages/ui/src/components/Table/use-table-heights.ts
@@ -41,18 +41,18 @@ export function useTableHeights({
   })
 
   watch(
-    [headerHeight, tableHeight, propHeight, propMaxHeight],
-    ([header, table, prop, propMax]) => {
+    [headerHeight, tableHeight],
+    ([header, table]) => {
       let heightFinal = ''
-      if (prop) {
+      if (propHeight.value) {
         const bodyHeight = table - header
         heightFinal = bodyHeight ? bodyHeight + 'px' : ''
       }
       bodyHeightStyles.height = heightFinal
 
       let maxHeightFinal = ''
-      if (propMax) {
-        const maxHeight = parseHeight(propMax)
+      if (propMaxHeight.value) {
+        const maxHeight = parseHeight(propMaxHeight.value)
         if (typeof maxHeight === 'number') {
           maxHeightFinal = maxHeight - header + 'px'
         }