@oliasoft-open-source/react-ui-library 4.16.2-beta-3 → 4.16.2-beta-4

package/dist/global.css

@@ -9140,80 +9140,80 @@ button:active .remirror-menu-pane-shortcut,
   width: 8px;
   height: 14px;
 }
-._inputInTable_1p5u4_1 {
+._inputInTable_xkoxm_1 {
   background-color: transparent;
   border-radius: inherit !important;
   height: var(--size);
   min-height: 100%;
 }
-._inputInTable_1p5u4_1:not(:hover):not([data-error]):not([data-warning]) {
+._inputInTable_xkoxm_1:not(:hover):not([data-error]):not([data-warning]) {
   border-color: transparent;
 }
-._inputInTable_1p5u4_1:not(:focus) {
+._inputInTable_xkoxm_1:not(:focus) {
   box-shadow: none;
 }
-._inputHover_1p5u4_13 {
+._inputHover_xkoxm_13 {
   position: relative;
   border-color: var(--color-border-hover);
   z-index: 2;
 }
-._inputFocus_1p5u4_18 {
+._inputFocus_xkoxm_18 {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputError_1p5u4_25,
-._inputWarning_1p5u4_26 {
+._inputError_xkoxm_25,
+._inputWarning_xkoxm_26 {
   position: relative;
 }
-._inputError_1p5u4_25 {
+._inputError_xkoxm_25 {
   z-index: 2;
   border-color: var(--color-border-error);
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error-muted);
 }
-._inputError_1p5u4_25:hover {
+._inputError_xkoxm_25:hover {
   border-color: var(--color-border-error-hover) !important;
 }
-._inputError_1p5u4_25:focus {
+._inputError_xkoxm_25:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputWarning_1p5u4_26 {
+._inputWarning_xkoxm_26 {
   z-index: 1;
   border-color: var(--color-border-warning);
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning-muted);
 }
-._inputWarning_1p5u4_26:hover {
+._inputWarning_xkoxm_26:hover {
   border-color: var(--color-border-warning-hover) !important;
 }
-._inputWarning_1p5u4_26:focus {
+._inputWarning_xkoxm_26:focus {
   position: relative;
   outline: none !important;
   border-color: var(--color-border-focus) !important;
   box-shadow: var(--shadow-focus);
   z-index: 3;
 }
-._inputDisabled_1p5u4_61 {
+._inputDisabled_xkoxm_61 {
   pointer-events: none;
   background-color: var(--color-background-disabled);
   color: var(--color-text-muted);
   box-shadow: none;
 }
-._hideScrollbars_1p5u4_67 {
+._hideScrollbars_xkoxm_67 {
   /* Firefox */
   scrollbar-width: none;
   /* IE 10+ */
   -ms-overflow-style: none;
   /* Chrome, Safari and Opera */
 }
-._hideScrollbars_1p5u4_67::-webkit-scrollbar {
+._hideScrollbars_xkoxm_67::-webkit-scrollbar {
   display: none;
 }
 :root {
@@ -9224,7 +9224,7 @@ html[data-theme='dark'] {
   --color-background-table-header: var(--color-neutral-800);
   --color-background-table-row-tinted: var(--color-neutral-800);
 }
-._wrapper_1p5u4_85 {
+._wrapper_xkoxm_85 {
   border-radius: inherit;
   max-height: 100%;
   max-width: 100%;
@@ -9232,23 +9232,23 @@ html[data-theme='dark'] {
   flex-direction: column;
   overflow: hidden;
 }
-._wrapper_1p5u4_85._bordered_1p5u4_93 {
+._wrapper_xkoxm_85._bordered_xkoxm_93 {
   border-radius: var(--border-radius);
   border: 1px solid var(--color-border);
   box-shadow: var(--shadow-card);
 }
-._scroll_1p5u4_98 {
+._scroll_xkoxm_98 {
   background: var(--color-background);
   overflow-y: auto;
   border-radius: inherit;
   flex: 1;
   min-height: 0;
 }
-._scroll_1p5u4_98:not(:first-child) {
+._scroll_xkoxm_98:not(:first-child) {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-._table_1p5u4_109 {
+._table_xkoxm_109 {
   color: var(--color-text);
   border-collapse: separate;
   border-spacing: 0;
@@ -9256,35 +9256,35 @@ html[data-theme='dark'] {
   width: 100%;
   font-variant-numeric: tabular-nums;
 }
-._table_1p5u4_109 > :first-child {
+._table_xkoxm_109 > :first-child {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
-._table_1p5u4_109 > :first-child > :first-child {
+._table_xkoxm_109 > :first-child > :first-child {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
-._table_1p5u4_109 > :first-child > :first-child > :first-child {
+._table_xkoxm_109 > :first-child > :first-child > :first-child {
   border-top-left-radius: inherit;
 }
-._table_1p5u4_109 > :first-child > :first-child > :last-child {
+._table_xkoxm_109 > :first-child > :first-child > :last-child {
   border-top-right-radius: inherit;
 }
-._table_1p5u4_109 > :last-child {
+._table_xkoxm_109 > :last-child {
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 }
-._table_1p5u4_109 > :last-child > :last-child {
+._table_xkoxm_109 > :last-child > :last-child {
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 }
-._table_1p5u4_109 > :last-child > :last-child > :first-child {
+._table_xkoxm_109 > :last-child > :last-child > :first-child {
   border-bottom-left-radius: inherit;
 }
-._table_1p5u4_109 > :last-child > :last-child > :last-child {
+._table_xkoxm_109 > :last-child > :last-child > :last-child {
   border-bottom-right-radius: inherit;
 }
-._dragOverlay_1p5u4_145 {
+._dragOverlay_xkoxm_145 {
   box-shadow: var(--shadow-layer);
   border-radius: var(--border-radius);
   overflow: hidden;
@@ -9303,10 +9303,10 @@ th:not(:first-child),
 td:not(:first-child) {
   border-left-width: 1px;
 }
-._table_1p5u4_109 > *:not(:last-child) > tr th,
-._table_1p5u4_109 > *:not(:last-child) > tr td,
-._table_1p5u4_109 > *:last-child > tr:not(:last-child) th,
-._table_1p5u4_109 > *:last-child > tr:not(:last-child) td {
+._table_xkoxm_109 > *:not(:last-child) > tr th,
+._table_xkoxm_109 > *:not(:last-child) > tr td,
+._table_xkoxm_109 > *:last-child > tr:not(:last-child) th,
+._table_xkoxm_109 > *:last-child > tr:not(:last-child) td {
   border-bottom-width: 1px;
 }
 @-moz-document url-prefix() {
@@ -9333,9 +9333,19 @@ tbody {
 tbody tr {
   background-color: var(--color-background-raised);
 }
-._striped_1p5u4_194 tbody [data-even='true'] {
+._striped_xkoxm_194 tbody [data-even='true'] {
   background-color: var(--color-background-table-row-tinted);
 }
+tbody:before {
+  display: block;
+  padding-top: var(--virtualPaddingTop);
+  content: '';
+}
+tbody:after {
+  display: block;
+  padding-bottom: var(--virtualPaddingBottom);
+  content: '';
+}
 ._title_zn5s7_1 {
   background-color: var(--color-background-cardheader);
   border-bottom: 1px solid var(--color-border);

package/dist/index.js

@@ -51091,19 +51091,19 @@ const Spacer = ({
     }
   }
 );
-const inputInTable$2 = "_inputInTable_1p5u4_1";
-const inputHover$2 = "_inputHover_1p5u4_13";
-const inputFocus$2 = "_inputFocus_1p5u4_18";
-const inputError$2 = "_inputError_1p5u4_25";
-const inputWarning$2 = "_inputWarning_1p5u4_26";
-const inputDisabled$2 = "_inputDisabled_1p5u4_61";
-const hideScrollbars$2 = "_hideScrollbars_1p5u4_67";
-const wrapper = "_wrapper_1p5u4_85";
-const bordered = "_bordered_1p5u4_93";
-const scroll = "_scroll_1p5u4_98";
-const table = "_table_1p5u4_109";
-const dragOverlay = "_dragOverlay_1p5u4_145";
-const striped = "_striped_1p5u4_194";
+const inputInTable$2 = "_inputInTable_xkoxm_1";
+const inputHover$2 = "_inputHover_xkoxm_13";
+const inputFocus$2 = "_inputFocus_xkoxm_18";
+const inputError$2 = "_inputError_xkoxm_25";
+const inputWarning$2 = "_inputWarning_xkoxm_26";
+const inputDisabled$2 = "_inputDisabled_xkoxm_61";
+const hideScrollbars$2 = "_hideScrollbars_xkoxm_67";
+const wrapper = "_wrapper_xkoxm_85";
+const bordered = "_bordered_xkoxm_93";
+const scroll = "_scroll_xkoxm_98";
+const table = "_table_xkoxm_109";
+const dragOverlay = "_dragOverlay_xkoxm_145";
+const striped = "_striped_xkoxm_194";
 const styles$b = {
   inputInTable: inputInTable$2,
   inputHover: inputHover$2,
@@ -51922,8 +51922,6 @@ const Row = ({
   hasRowActions: hasRowActions2,
   draggableTable = false,
   columnWidths,
-  height: height2,
-  translateY,
   testId
   //TODO: add testId
 }) => {
@@ -51980,9 +51978,7 @@ const Row = ({
     animateLayoutChanges: () => false
   });
   const style = {
-    height: `${height2}px`,
-    // Combine 1. offset from virtualized list + 2. drag and drop offset
-    transform: `translateY(${(translateY ?? 0) + ((transform == null ? void 0 : transform.y) ?? 0)}px)`,
+    transform: CSS.Transform.toString(transform),
     transition,
     opacity: isDragging ? 0 : void 0
   };
@@ -52249,73 +52245,73 @@ const Table = (props) => {
         rowActions,
         rows,
         tbodyRef,
-        children: /* @__PURE__ */ jsx(TableScrollWrapper, { table: table2, theadRef, children: ({ virtualizer }) => /* @__PURE__ */ jsxs(
-          "table",
-          {
-            className: cx$2(styles$b.table, striped2 ? styles$b.striped : ""),
-            "data-testid": testId,
-            children: [
-              /* @__PURE__ */ jsx(
-                "thead",
-                {
-                  ref: theadRef,
-                  style: virtualizer ? {
-                    position: "relative",
-                    transition: "transform 0.2s",
-                    transform: `translateY(${!virtualizer.isScrolling ? virtualizer.scrollOffset : 0}px)`
-                  } : {},
-                  children: headers.map((row2, rowIndex) => {
-                    return /* @__PURE__ */ jsx(
-                      Row,
-                      {
-                        rowIndex,
-                        isHeader: true,
-                        row: row2,
-                        columnCount,
-                        columnWidths,
-                        colSpan,
-                        hasRowActions: rowActions,
-                        columnAlignment,
-                        columnHeaderAlignments,
-                        draggableTable: draggable
-                      },
-                      `0_${rowIndex}`
-                    );
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsx("tbody", { ref: tbodyRef, children: virtualizer ? virtualizer.getVirtualItems().map((virtualRow2, rowIndex) => /* @__PURE__ */ jsx(
-                Row,
-                {
-                  rowIndex: virtualRow2.index,
-                  row: rows[virtualRow2.index],
-                  columnCount,
-                  columnWidths,
-                  colSpan,
-                  hasRowActions: rowActions,
-                  columnAlignment,
-                  draggableTable: draggable,
-                  height: virtualRow2.size,
-                  translateY: virtualRow2.start - rowIndex * virtualRow2.size
-                },
-                `1_${rowIndex}`
-              )) : rows.map((row2, index2) => /* @__PURE__ */ jsx(
-                Row,
-                {
-                  rowIndex: index2,
-                  row: row2,
-                  columnCount,
-                  columnWidths,
-                  colSpan,
-                  hasRowActions: rowActions,
-                  columnAlignment,
-                  draggableTable: draggable
-                },
-                `1_${index2}`
-              )) })
-            ]
+        children: /* @__PURE__ */ jsx(TableScrollWrapper, { table: table2, theadRef, children: ({ virtualizer }) => {
+          let style = {};
+          if (virtualizer) {
+            const items = virtualizer.getVirtualItems();
+            const paddingTop = items.length > 0 ? items[0].start : 0;
+            const paddingBottom = items.length > 0 ? virtualizer.getTotalSize() - items[items.length - 1].end : 0;
+            style = {
+              "--virtualPaddingTop": paddingTop + "px",
+              "--virtualPaddingBottom": paddingBottom + "px"
+            };
           }
-        ) })
+          return /* @__PURE__ */ jsxs(
+            "table",
+            {
+              className: cx$2(styles$b.table, striped2 ? styles$b.striped : ""),
+              "data-testid": testId,
+              style,
+              children: [
+                /* @__PURE__ */ jsx("thead", { ref: theadRef, children: headers.map((row2, rowIndex) => {
+                  return /* @__PURE__ */ jsx(
+                    Row,
+                    {
+                      rowIndex,
+                      isHeader: true,
+                      row: row2,
+                      columnCount,
+                      columnWidths,
+                      colSpan,
+                      hasRowActions: rowActions,
+                      columnAlignment,
+                      columnHeaderAlignments,
+                      draggableTable: draggable
+                    },
+                    `0_${rowIndex}`
+                  );
+                }) }),
+                /* @__PURE__ */ jsx("tbody", { ref: tbodyRef, children: virtualizer ? virtualizer.getVirtualItems().map((virtualRow2, rowIndex) => /* @__PURE__ */ jsx(
+                  Row,
+                  {
+                    rowIndex: virtualRow2.index,
+                    row: rows[virtualRow2.index],
+                    columnCount,
+                    columnWidths,
+                    colSpan,
+                    hasRowActions: rowActions,
+                    columnAlignment,
+                    draggableTable: draggable
+                  },
+                  `1_${rowIndex}`
+                )) : rows.map((row2, index2) => /* @__PURE__ */ jsx(
+                  Row,
+                  {
+                    rowIndex: index2,
+                    row: row2,
+                    columnCount,
+                    columnWidths,
+                    colSpan,
+                    hasRowActions: rowActions,
+                    columnAlignment,
+                    draggableTable: draggable
+                  },
+                  `1_${index2}`
+                )) })
+              ]
+            }
+          );
+        } })
       }
     ),
     footer2 && /* @__PURE__ */ jsx(