fix table col resize with groups (#1066)

finos · Dec 8, 2023 · 2868938 · 2868938
1 parent d314642
commit 2868938
Show file tree

Hide file tree

Showing 31 changed files with 2,769 additions and 148 deletions.
diff --git a/vuu-ui/packages/vuu-data/src/inlined-worker.js b/vuu-ui/packages/vuu-data/src/inlined-worker.js
diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCell.css b/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCell.css
@@ -1,4 +1,4 @@
-.vuuTableNext td:has(> .vuuBackgroundCell){
+.vuuTable td:has(> .vuuBackgroundCell){
   padding: 0;
   text-align: right;
 } 

diff --git a/vuu-ui/packages/vuu-table/src/Row.css b/vuu-ui/packages/vuu-table/src/Row.css
@@ -1,4 +1,4 @@
-.vuuTableNextRow {
+.vuuTableRow {
   background: var(--row-background,#fff);
     border-bottom: 1px solid var(--row-borderColor);
     box-sizing: border-box;
@@ -9,41 +9,41 @@
     white-space: nowrap;
     }
 
-    .vuuTableNextRow-even {
+    .vuuTableRow-even {
       --row-background: var(--row-background-even);
     }
 
-    .vuuTableNextRow-highlighted {
+    .vuuTableRow-highlighted {
       background-color: var(--vuu-color-gray-10);
     }
 
 
-    .vuuTableNextRow-selected,
-    .vuuTableNextRow-selectedEnd {
+    .vuuTableRow-selected,
+    .vuuTableRow-selectedEnd {
       /* background-color: rgb(133,133,137,.16); */
       background-color: rgb(235,235,236);
     }
 
-    .vuuTableNextRow-selectedStart {
+    .vuuTableRow-selectedStart {
         --vuu-selection-decorator-left-radius: 5px 0 0 0;
         --vuu-selection-decorator-right-radius: 0 5px 0 0;
         border-radius: 5px 5px 0 0;
       }
 
-      .vuuTableNextRow-selectedEnd {
+      .vuuTableRow-selectedEnd {
         --vuu-selection-decorator-left-radius: 0 0 0 5px;
         --vuu-selection-decorator-right-radius: 0 0 5px 0;
         border-radius: 0 0 5px 5px;
       }
 
-      .vuuTableNextRow-selectedStart.vuuTableNextRow-selectedEnd {
+      .vuuTableRow-selectedStart.vuuTableRow-selectedEnd {
         --vuu-selection-decorator-left-radius: 5px 0 0 5px;
         --vuu-selection-decorator-right-radius: 0 5px 5px 0;
         border-radius: 5px 5px 5px 5px;
 
       }
 
-    .vuuTableNextRow-selectedStart:after {
+    .vuuTableRow-selectedStart:after {
         content: '';
         position: absolute;
         top:0;
@@ -54,11 +54,11 @@
         z-index: 1;
       }
 
-    .vuuTableNextRow-selectedEnd {
+    .vuuTableRow-selectedEnd {
         border-bottom-color: var(--vuu-color-purple-10);
       }
 
-      .vuuTableNextRow-selectionDecorator {
+      .vuuTableRow-selectionDecorator {
         background-color: var(--vuu-selection-decorator-bg, white);
         display: inline-block;
         position: relative;
@@ -67,55 +67,55 @@
         z-index: 2;
       }
 
-      .vuuTableNextRow-selectionDecorator.vuuStickyLeft {
+      .vuuTableRow-selectionDecorator.vuuStickyLeft {
         left:0;
         position: sticky;
       }
 
-      .vuuTableNextRow-selectionDecorator.vuuStickyRight {
+      .vuuTableRow-selectionDecorator.vuuStickyRight {
         right:0;
         position: sticky;
       }
 
-      .vuuTableNextRow-selected {
+      .vuuTableRow-selected {
         --vuu-selection-decorator-bg: var(--vuu-color-purple-10);
 
       }
 
-      .vuuTableNextRow-selectedStart {
+      .vuuTableRow-selectedStart {
         --vuu-selection-decorator-bg: white;
       }
 
-      .vuuTableNextRow-selectedEnd {
+      .vuuTableRow-selectedEnd {
         --vuu-selection-decorator-bg: white;
       }
 
-      .vuuTableNextRow-selectedStart.vuuTableNextRow-selectedEnd {
+      .vuuTableRow-selectedStart.vuuTableRow-selectedEnd {
 
       }
 
-      .vuuTableNextRow-selectedStart .vuuTableNextRow-selectionDecorator:before,
-      .vuuTableNextRow-selectedEnd .vuuTableNextRow-selectionDecorator:before {
+      .vuuTableRow-selectedStart .vuuTableRow-selectionDecorator:before,
+      .vuuTableRow-selectedEnd .vuuTableRow-selectionDecorator:before {
         content: '';
         inset: 0;
         position: absolute;
         background-color: var(--vuu-color-purple-10);
       }
 
 
-      .vuuTableNextRow-selectionDecorator.vuuStickyLeft:before {
+      .vuuTableRow-selectionDecorator.vuuStickyLeft:before {
         border-radius: var(--vuu-selection-decorator-left-radius, 0);
       }
 
-      .vuuTableNextRow-selectionDecorator.vuuStickyRight:before {
+      .vuuTableRow-selectionDecorator.vuuStickyRight:before {
         border-radius: var(--vuu-selection-decorator-right-radius, 0);
       }
 
-      .vuuTableNextRow-expanded {
+      .vuuTableRow-expanded {
         --toggle-icon-transform: rotate(90deg);
       }
 
-      .vuuDraggable .vuuTableNextRow {
+      .vuuDraggable .vuuTableRow {
         --cell-borderColor: transparent;
         --vuu-selection-decorator-bg: transparent;
         transform: none!important;

diff --git a/vuu-ui/packages/vuu-table/src/Row.tsx b/vuu-ui/packages/vuu-table/src/Row.tsx
@@ -34,7 +34,7 @@ export interface RowProps {
 }
 
 const { IDX, IS_EXPANDED, SELECTED } = metadataKeys;
-const classBase = "vuuTableNextRow";
+const classBase = "vuuTableRow";
 
 // export const Row = memo(
 export const Row = memo(

diff --git a/vuu-ui/packages/vuu-table/src/Table.css b/vuu-ui/packages/vuu-table/src/Table.css
@@ -1,4 +1,4 @@
-.vuuTableNext {
+.vuuTable {
   --vuu-table-cell-outlineWidth: 1px;
   --table-height: var(--measured-px-height);
   --table-width: var(--measured-px-width);
@@ -13,23 +13,23 @@
   user-select: none;
 }
 
-.vuuTableNext-zebra {
+.vuuTable-zebra {
   --row-background-even: var(--vuu-color-gray-25)
 }
 
-.vuuTableNext-colLines {
+.vuuTable-colLines {
   --cell-borderColor: var(--salt-separable-tertiary-borderColor);
 }
 
-.vuuTableNext-rowLines {
+.vuuTable-rowLines {
   --row-borderColor: var(--salt-separable-tertiary-borderColor);
 }
 
-.vuuTableNext-highlight .vuuTableNextRow:hover {
+.vuuTable-highlight .vuuTableRow:hover {
   background-color: var(--vuu-color-pink-10-fade-20);
 }
 
-.vuuTableNext-scrollbarContainer {
+.vuuTable-scrollbarContainer {
   --scroll-content-width: 1100px;
   border-bottom: none !important;
   border-top: none !important;
@@ -46,33 +46,33 @@
 }
 
 
-.vuuTableNext-scrollbarContainer::-webkit-scrollbar {
+.vuuTable-scrollbarContainer::-webkit-scrollbar {
   border: none;
   width: 10px;
 }
 
-.vuuTableNext-scrollbarContainer::-webkit-scrollbar:horizontal {
+.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {
   height: 10px;
 }
 
 
-.vuuTableNext-scrollbarContainer::-webkit-scrollbar-track {
+.vuuTable-scrollbarContainer::-webkit-scrollbar-track {
   background-color: white;
 }
-.vuuTableNext-scrollbarContainer::-webkit-scrollbar-thumb {
+.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {
   background-clip: padding-box;
   border-radius: 10px;
   border: 2px solid rgba(0, 0, 0, 0);
   background-color: var(--vuu-color-gray-30);
 }
 
-.vuuTableNext-scrollbarContent {
+.vuuTable-scrollbarContent {
   height: calc(var(--content-height) + var(--horizontal-scrollbar-height));
   position: absolute;
   width: var(--content-width);
 }
 
-.vuuTableNext-contentContainer {
+.vuuTable-contentContainer {
   background-color: var(--salt-container-primary-background);
   height: calc(var(--table-height) - var(--horizontal-scrollbar-height));
   position: relative;
@@ -81,12 +81,12 @@
   width: calc(var(--table-width) - var(--vertical-scrollbar-width));
 }
 
-.vuuTableNext-contentContainer::-webkit-scrollbar {
+.vuuTable-contentContainer::-webkit-scrollbar {
   display: none;
 }
 
 
-.vuuTableNext-table {
+.vuuTable-table {
   position: absolute;
   top: 0;
   left: 0;
@@ -99,7 +99,7 @@
   border-spacing: 0;
 }
 
-.vuuTableNext-body {
+.vuuTable-body {
   height: var(--content-height)
 }
 
@@ -109,7 +109,7 @@
   z-index: 1;
 }
 
-.vuuTableNext-col-headings {
+.vuuTable-col-headings {
   background-color: white;
   padding: 0 var(--vuu-table-next-selection-bookend-width, 0);
 
@@ -119,7 +119,7 @@
     z-index: 1;
 }
 
-  .vuuTableNext-col-headers {
+  .vuuTable-col-headers {
     background-color: var(--table-background);
     white-space: nowrap;
   }
@@ -131,10 +131,10 @@
     height: 0px;
   }
 
-  .vuuDraggable-vuuTableNext {
+  .vuuDraggable-vuuTable {
     --header-height: 25px;
-    --vuuTableNextHeaderCell-background: var(--vuu-color-gray-25);
+    --vuuTableHeaderCell-background: var(--vuu-color-gray-25);
   }
-.vuuDraggable-vuuTableNext {
+.vuuDraggable-vuuTable {
   --row-height: 25px;
 } 
diff --git a/vuu-ui/packages/vuu-table/src/Table.tsx b/vuu-ui/packages/vuu-table/src/Table.tsx
@@ -39,7 +39,7 @@ import { useTable } from "./useTable";
 
 import "./Table.css";
 
-const classBase = "vuuTableNext";
+const classBase = "vuuTable";
 
 const { IDX, RENDER_IDX } = metadataKeys;
 

diff --git a/vuu-ui/packages/vuu-table/src/cell-renderers/input-cell/InputCell.css b/vuu-ui/packages/vuu-table/src/cell-renderers/input-cell/InputCell.css
@@ -7,7 +7,7 @@
     font-weight: 500;
 }
 
-.vuuTableNextCell:focus .vuuTableInputCell.saltInput-primary,
+.vuuTableCell:focus .vuuTableInputCell.saltInput-primary,
 .vuuTableInputCell.saltInput-primary.saltInput-focused {
     border: solid 2px var(--vuu-color-purple-10);
     padding: 0 3px;
@@ -20,7 +20,7 @@
     border-radius: 10px;
 }
 
-.vuuTableNextCell:focus .vuuTableInputCell.saltInput-primary.vuuTableInputCell-error,
+.vuuTableCell:focus .vuuTableInputCell.saltInput-primary.vuuTableInputCell-error,
 .vuuTableInputCell.saltInput-primary.saltInput-focused.vuuTableInputCell-error {
     border: solid 2px var(--vuu-color-red-50);
 }

diff --git a/vuu-ui/packages/vuu-table/src/cell-renderers/toggle-cell/ToggleCell.css b/vuu-ui/packages/vuu-table/src/cell-renderers/toggle-cell/ToggleCell.css
@@ -18,7 +18,7 @@
 
 }
 
-.vuuTableNextCell .vuuTableToggleCell:focus {
+.vuuTableCell .vuuTableToggleCell:focus {
     /* TODO fix use of important */
     border: solid 2px var(--vuu-color-purple-10) !important;
     color: white !important;

diff --git a/vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCell.css b/vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCell.css
@@ -3,7 +3,7 @@
  --svg-spinner: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="rgb(38, 112, 169)" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /></path></svg>');
 }
 
-.vuuTableNextGroupHeaderCell.vuuTableNextHeaderCell {
+.vuuTableGroupHeaderCell {
   --vuuColumnHeaderPill-margin: 0;
   --cell-align: 'flex-start';
     text-align: left;
@@ -14,15 +14,15 @@
   }
 
 
-  .vuuTableNextGroupHeaderCell-inner {
+  .vuuTableGroupHeaderCell-inner {
     align-items: center;
     display: flex;
     gap: 4px;
     height: 100%;
     padding-left: 1px;
   }
 
-  .vuuTableNextGroupHeaderCell-col {
+  .vuuTableGroupHeaderCell-col {
     align-items: center;
     background-color: inherit;
     display: inline-flex;
@@ -33,29 +33,29 @@
     position: relative;
   }
 
-  .vuuTableNextGroupHeaderCell-label {
+  .vuuTableGroupHeaderCell-label {
     align-items: center;
     display: flex;
     flex: 0 0 auto;
   }
 
-  .vuuTableNextGroupHeaderCell-close {
+  .vuuTableGroupHeaderCell-close {
     --vuu-icon-height: 18px;
     --vuu-icon-width: 18px;
     cursor: pointer;
     left: 3px;
   }
 
-  .vuuTableNextGroupHeaderCell-resizing {
+  .vuuTableGroupHeaderCell-resizing {
     --columnResizer-color: var(--salt-color-blue-500);
     --columnResizer-height: var(--table-height);
     --columnResizer-width: 2px;
   }
-  .vuuTableNextGroupHeaderCell-pending {
+  .vuuTableGroupHeaderCell-pending {
     --pending-content: '';
   }
 
-  .vuuTableNextGroupHeaderCell-col:has(+ .vuuColumnResizer):after {
+  .vuuTableGroupHeaderCell-col:has(+ .vuuColumnResizer):after {
     content: var(--pending-content);
     width: 24px;
     height:24px;

diff --git a/vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCellNext.tsx b/vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCellNext.tsx
@@ -13,7 +13,7 @@ import { OverflowContainer, useLayoutEffectSkipFirst } from "@finos/vuu-layout";
 
 import "./GroupHeaderCell.css";
 
-const classBase = "vuuTableNextGroupHeaderCell";
+const classBase = "vuuTableGroupHeaderCell";
 
 const switchIfChanged = (
   columns: RuntimeColumnDescriptor[],
@@ -84,7 +84,7 @@ export const GroupHeaderCellNext = ({
   return (
     <div
       {...htmlAttributes}
-      className={cx(className, "vuuTableNextHeaderCell", classNameProp, {
+      className={cx(className, classNameProp, {
         [`${classBase}-pending`]: groupColumn.groupConfirmed === false,
       })}
       ref={rootRef}