@infinite-table/infinite-react 6.2.9 → 6.2.11

package/index.dev.js

@@ -1453,7 +1453,7 @@ var internalProps = {
 };
 
 // src/components/InfiniteTable/internalVars.css.ts
-var InternalVars = { currentColumnTransformX: "var(--_16hkbkc0)", y: "var(--_16hkbkc1)", currentFlashingBackground: "var(--_16hkbkc2)", currentFlashingDuration: "var(--_16hkbkc3)", activeCellRowOffset: "var(--_16hkbkc4)", activeCellRowOffsetX: "var(--_16hkbkc5)", activeCellRowHeight: "var(--_16hkbkc6)", activeCellOffsetX: "var(--_16hkbkc7)", activeCellOffsetY: "var(--_16hkbkc8)", scrollTopForActiveRow: "var(--_16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--_16hkbkca)", activeCellColWidth: "var(--_16hkbkcb)", activeCellColOffset: "var(--_16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--_16hkbkcd)", columnWidthAtIndex: "var(--_16hkbkce)", columnOffsetAtIndex: "var(--_16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--_16hkbkcg)", columnZIndexAtIndex: "var(--_16hkbkch)", pinnedStartWidth: "var(--_16hkbkci)", pinnedEndWidth: "var(--_16hkbkcj)", pinnedEndOffset: "var(--_16hkbkck)", computedVisibleColumnsCount: "var(--_16hkbkcl)", baseZIndexForCells: "var(--_16hkbkcm)", bodyWidth: "var(--_16hkbkcn)", bodyHeight: "var(--_16hkbkco)", scrollbarWidthHorizontal: "var(--_16hkbkcp)", scrollbarWidthVertical: "var(--_16hkbkcq)", scrollLeft: "var(--_16hkbkcr)", scrollTop: "var(--_16hkbkcs)", virtualScrollLeftOffset: "var(--_16hkbkct)", virtualScrollTopOffset: "var(--_16hkbkcu)" };
+var InternalVars = { currentColumnTransformX: "var(--_16hkbkc0)", y: "var(--_16hkbkc1)", currentFlashingBackground: "var(--_16hkbkc2)", currentFlashingDuration: "var(--_16hkbkc3)", activeCellRowOffset: "var(--_16hkbkc4)", activeCellRowOffsetX: "var(--_16hkbkc5)", activeCellRowHeight: "var(--_16hkbkc6)", activeCellOffsetX: "var(--_16hkbkc7)", activeCellOffsetY: "var(--_16hkbkc8)", scrollTopForActiveRow: "var(--_16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--_16hkbkca)", activeCellColWidth: "var(--_16hkbkcb)", activeCellColOffset: "var(--_16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--_16hkbkcd)", columnWidthAtIndex: "var(--_16hkbkce)", columnOffsetAtIndex: "var(--_16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--_16hkbkcg)", columnZIndexAtIndex: "var(--_16hkbkch)", pinnedStartWidth: "var(--_16hkbkci)", pinnedEndWidth: "var(--_16hkbkcj)", pinnedEndOffset: "var(--_16hkbkck)", computedVisibleColumnsCount: "var(--_16hkbkcl)", baseZIndexForCells: "var(--_16hkbkcm)", bodyWidth: "var(--_16hkbkcn)", bodyHeight: "var(--_16hkbkco)", scrollbarWidthHorizontal: "var(--_16hkbkcp)", scrollbarWidthVertical: "var(--_16hkbkcq)", scrollLeft: "var(--_16hkbkcr)", scrollTop: "var(--_16hkbkcs)" };
 
 // src/components/InfiniteTable/vars.css.ts
 var CSS_LOADED_VALUE = "true";
@@ -5407,8 +5407,6 @@ var CELL_DETACHED_CLASSNAMES = [
 ];
 
 // src/components/HeadlessTable/index.tsx
-var virtualScrollLeftOffset = stripVar(InternalVars.virtualScrollLeftOffset);
-var virtualScrollTopOffset = stripVar(InternalVars.virtualScrollTopOffset);
 function useMatrixBrain(brain, brainOptions, fixedCellsInfo) {
   if (fixedCellsInfo && (fixedCellsInfo.fixedColsStart || fixedCellsInfo.fixedColsEnd || fixedCellsInfo.fixedRowsStart || fixedCellsInfo.fixedRowsEnd)) {
     brain.updateFixedCells({
@@ -5482,25 +5480,14 @@ function HeadlessTable(props) {
   }, [wrapRowsHorizontally, brain]);
   const updateDOMTransform = (0, import_react10.useCallback)((scrollPos) => {
     requestAnimationFrame(() => {
-      const scrollVarHost = scrollVarHostRef?.current;
-      if (!scrollVarHost) {
-        if (!domRef.current) {
-          return;
-        }
-        domRef.current.style.setProperty(
-          "transform",
-          `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`
-        );
+      if (!domRef.current) {
         return;
       }
-      scrollVarHost.style.setProperty(
-        virtualScrollLeftOffset,
-        `-${scrollPos.scrollLeft}px`
-      );
-      scrollVarHost.style.setProperty(
-        virtualScrollTopOffset,
-        `-${scrollPos.scrollTop}px`
+      domRef.current.style.setProperty(
+        "transform",
+        `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`
       );
+      return;
     });
   }, []);
   const onContainerScroll = (0, import_react10.useCallback)(
@@ -9409,7 +9396,10 @@ function getRawValueForCell(column, rowInfo) {
   const groupBy = dataSourceHasGrouping ? rowInfo.groupBy : void 0;
   let value = isGroupRow && groupBy && column.groupByForColumn && // if this is a multi-group column we're good
   (Array.isArray(column.groupByForColumn) || // or it has to be a group column for the current group row
-  column.groupByForColumn === groupBy[groupBy.length - 1]) ? rowInfo.value : isColumnWithField(column) ? data?.[column.field] : null;
+  column.groupByForColumn === groupBy[groupBy.length - 1]) ? rowInfo.value : isColumnWithField(column) ? (
+    // @ts-ignore
+    data?.[column.field]
+  ) : null;
   if (column.field && rowInfo.isGroupRow && rowInfo.reducerData && rowInfo.reducerData[column.field] != null) {
     value = rowInfo.reducerData[column.field];
   }
@@ -11540,6 +11530,18 @@ function InfiniteTableHeaderFn(props) {
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
   const domRef = (0, import_react31.useRef)(null);
+  const updateDOMTransform = (0, import_react31.useCallback)((scrollPosition) => {
+    if (domRef.current) {
+      domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
+    }
+  }, []);
+  (0, import_react31.useEffect)(() => {
+    const removeOnScroll = headerBrain.onScroll(updateDOMTransform);
+    updateDOMTransform(
+      headerBrain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
+    );
+    return removeOnScroll;
+  }, [headerBrain]);
   const domProps = {
     ref: domRef,
     className: join(
@@ -23600,7 +23602,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.2.9"
+      version: "6.2.11"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -27112,9 +27114,17 @@ var import_react65 = require("react");
 function useHorizontalLayout() {
   const { getState, actions, dataSourceActions, getDataSourceState } = useInfiniteTable();
   const { groupBy, isTree } = getDataSourceState();
-  const { brain, wrapRowsHorizontally, repeatWrappedGroupRows } = getState();
+  const state = getState();
+  const { brain, wrapRowsHorizontally } = state;
+  let repeatWrappedGroupRows = state.repeatWrappedGroupRows;
+  if (!wrapRowsHorizontally) {
+    repeatWrappedGroupRows = false;
+  }
   (0, import_react65.useEffect)(() => {
     if (!wrapRowsHorizontally) {
+      if (getDataSourceState().repeatWrappedGroupRows) {
+        dataSourceActions.repeatWrappedGroupRows = false;
+      }
       return;
     }
     const onVerticalRenderRangeChange = () => {