@infinite-table/infinite-react 5.0.0-canary.0 → 5.0.0-canary.1

package/index.mjs

@@ -1364,7 +1364,7 @@ function stripVar(cssVariableWithVarString) {
 }
 
 // src/components/InfiniteTable/internalVars.css.ts
-var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc2)", activeCellRowHeight: "var(--activeCellRowHeight__16hkbkc3)", activeCellOffsetX: "var(--activeCellOffsetX__16hkbkc4)", activeCellOffsetY: "var(--activeCellOffsetY__16hkbkc5)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__16hkbkc6)", activeCellColWidth: "var(--activeCellColWidth__16hkbkc7)", activeCellColOffset: "var(--activeCellColOffset__16hkbkc8)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__16hkbkc9)", columnWidthAtIndex: "var(--columnWidthAtIndex__16hkbkca)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__16hkbkcb)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__16hkbkcc)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__16hkbkcd)", pinnedStartWidth: "var(--pinnedStartWidth__16hkbkce)", pinnedEndWidth: "var(--pinnedEndWidth__16hkbkcf)", pinnedEndOffset: "var(--pinnedEndOffset__16hkbkcg)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__16hkbkch)", baseZIndexForCells: "var(--baseZIndexForCells__16hkbkci)", bodyWidth: "var(--bodyWidth__16hkbkcj)", bodyHeight: "var(--bodyHeight__16hkbkck)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__16hkbkcl)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__16hkbkcm)", scrollLeft: "var(--scrollLeft__16hkbkcn)", scrollTop: "var(--scrollTop__16hkbkco)" };
+var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc2)", activeCellRowOffsetX: "var(--activeCellRowOffsetX__16hkbkc3)", activeCellRowHeight: "var(--activeCellRowHeight__16hkbkc4)", activeCellOffsetX: "var(--activeCellOffsetX__16hkbkc5)", activeCellOffsetY: "var(--activeCellOffsetY__16hkbkc6)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__16hkbkc7)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--scrollLeftForActiveRowWhenHorizontalLayout__16hkbkc8)", activeCellColWidth: "var(--activeCellColWidth__16hkbkc9)", activeCellColOffset: "var(--activeCellColOffset__16hkbkca)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__16hkbkcb)", columnWidthAtIndex: "var(--columnWidthAtIndex__16hkbkcc)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__16hkbkcd)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__16hkbkce)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__16hkbkcf)", pinnedStartWidth: "var(--pinnedStartWidth__16hkbkcg)", pinnedEndWidth: "var(--pinnedEndWidth__16hkbkch)", pinnedEndOffset: "var(--pinnedEndOffset__16hkbkci)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__16hkbkcj)", baseZIndexForCells: "var(--baseZIndexForCells__16hkbkck)", bodyWidth: "var(--bodyWidth__16hkbkcl)", bodyHeight: "var(--bodyHeight__16hkbkcm)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__16hkbkcn)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__16hkbkco)", scrollLeft: "var(--scrollLeft__16hkbkcp)", scrollTop: "var(--scrollTop__16hkbkcq)" };
 
 // src/utils/selectParent.ts
 function selectParent(el, selector2) {
@@ -3076,11 +3076,13 @@ var ReactHeadlessTableRenderer = class extends Logger {
       return { start: startRow, end: endRow };
     };
     this.getScrollPositionForScrollRowIntoView = (rowIndex, config = { offset: 0 }) => {
+      var _a;
       if (this.destroyed) {
         return null;
       }
       const { brain } = this;
       const scrollPosition = brain.getScrollPosition();
+      let scrollLeft2 = scrollPosition.scrollLeft;
       let { scrollAdjustPosition, offset = 0 } = config;
       if (this.isRowFullyVisible(rowIndex) && !scrollAdjustPosition) {
         return scrollPosition;
@@ -3110,9 +3112,22 @@ var ReactHeadlessTableRenderer = class extends Logger {
         offset += rowHeight;
         scrollTop2 += rowOffset - bottom + offset + fixedEndRowsHeight;
       }
-      return __spreadProps(__spreadValues({}, scrollPosition), {
+      if (this.brain.isHorizontalLayoutBrain) {
+        const colIndex = (_a = config.colIndex) != null ? _a : Math.ceil(this.brain.getInitialCols() / 2);
+        const colScrollPosition = this.getScrollPositionForScrollColumnIntoView(
+          colIndex,
+          __spreadProps(__spreadValues({}, config), {
+            horizontalLayoutPageIndex: this.brain.getPageIndexForRow(rowIndex)
+          })
+        );
+        if (colScrollPosition) {
+          scrollLeft2 = colScrollPosition.scrollLeft;
+        }
+      }
+      return {
+        scrollLeft: scrollLeft2,
         scrollTop: scrollTop2
-      });
+      };
     };
     this.getScrollPositionForScrollColumnIntoView = (colIndex, config = { offset: 0 }) => {
       if (this.destroyed) {
@@ -4223,9 +4238,9 @@ var HorizontalLayoutTableRenderer = class extends ReactHeadlessTableRenderer {
         element.style.setProperty(currentTransformY, currentTransformYValue);
       }
       const xOffset = `calc(var(${columnOffsetX}) + ${pageOffset})`;
-      const transformX = `var(${columnOffsetXWhileReordering}, ${xOffset})`;
+      const transformX2 = `var(${columnOffsetXWhileReordering}, ${xOffset})`;
       const transformY = `var(${currentTransformY})`;
-      const transformValue = `translate3d(${transformX}, ${transformY}, 0px)`;
+      const transformValue = `translate3d(${transformX2}, ${transformY}, 0px)`;
       if (element.__transformValue !== transformValue) {
         element.__transformValue = transformValue;
         element.style.transform = transformValue;
@@ -4349,46 +4364,169 @@ var useRerender = () => {
 var ActiveCellIndicatorCls = { visible: "ActiveCellIndicator_ActiveCellIndicatorCls_visible__nxbq1c2 ActiveCellIndicator_ActiveCellIndicator__nxbq1c1 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2", hidden: "ActiveCellIndicator_ActiveCellIndicatorCls_hidden__nxbq1c3 ActiveCellIndicator_ActiveCellIndicator__nxbq1c1 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2" };
 var ActiveIndicatorWrapperCls = "ActiveCellIndicator_ActiveIndicatorWrapperCls__nxbq1c0 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_left_0__16lm1iw1e utilities_top_0__16lm1iw1c utilities_height_0__16lm1iw18 utilities_zIndex_1000000__16lm1iwu";
 
+// ../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
+function toPrimitive(t, r) {
+  if ("object" != typeof t || !t)
+    return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i)
+      return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : String(i);
+}
+function _defineProperty(obj, key, value) {
+  key = toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
+    });
+  }
+  return e;
+}
+function mapValues(input, fn) {
+  var result = {};
+  for (var _key in input) {
+    result[_key] = fn(input[_key], _key);
+  }
+  return result;
+}
+var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
+  for (var key of Object.keys(compoundCheck)) {
+    var _selections$key;
+    if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
+      return false;
+    }
+  }
+  return true;
+};
+var createRuntimeFn = (config) => {
+  var runtimeFn = (options) => {
+    var className = config.defaultClassName;
+    var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+    for (var variantName in selections) {
+      var _selections$variantNa;
+      var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
+      if (variantSelection != null) {
+        var selection = variantSelection;
+        if (typeof selection === "boolean") {
+          selection = selection === true ? "true" : "false";
+        }
+        var selectionClassName = (
+          // @ts-expect-error
+          config.variantClassNames[variantName][selection]
+        );
+        if (selectionClassName) {
+          className += " " + selectionClassName;
+        }
+      }
+    }
+    for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
+      if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
+        className += " " + compoundClassName;
+      }
+    }
+    return className;
+  };
+  runtimeFn.variants = () => Object.keys(config.variantClassNames);
+  runtimeFn.classNames = {
+    get base() {
+      return config.defaultClassName.split(" ")[0];
+    },
+    get variants() {
+      return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
+    }
+  };
+  return runtimeFn;
+};
+
 // src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
-var ActiveRowIndicatorCls = { visible: "ActiveRowIndicator_ActiveRowIndicatorCls_visible__j26lrx1 ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e", hidden: "ActiveRowIndicator_ActiveRowIndicatorCls_hidden__j26lrx2 ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e" };
+var ActiveRowIndicatorRecipe = createRuntimeFn({ defaultClassName: "ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e", variantClassNames: { active: { true: "ActiveRowIndicator_ActiveRowIndicatorRecipe_active_true__j26lrx2", false: "ActiveRowIndicator_ActiveRowIndicatorRecipe_active_false__j26lrx3" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.tsx
 var { rootClassName: rootClassName3 } = internalProps;
 var baseCls = `${rootClassName3}-ActiveRowIndicator`;
+var transformX = `calc(${InternalVars.activeCellRowOffsetX} + var(${stripVar(
+  InternalVars.scrollLeftForActiveRowWhenHorizontalLayout
+)}, 0px))`;
 var ActiveStyle = {
   [stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
-  transform: `translate3d(0px, calc( ${InternalVars.activeCellOffsetY} + var(${stripVar(InternalVars.scrollTopForActiveRow)}, 0px)), 0px)`,
+  transform: `translate3d(${transformX}, calc( ${InternalVars.activeCellOffsetY} + var(${stripVar(InternalVars.scrollTopForActiveRow)}, 0px)), 0px)`,
   height: InternalVars.activeCellRowHeight,
   maxWidth: ThemeVars.runtime.totalVisibleColumnsWidthVar
 };
 var ActiveRowIndicatorFn = (props) => {
   const { brain } = props;
   const domRef = useRef5(null);
-  const active = props.activeRowIndex != null && brain.getRowCount() > props.activeRowIndex;
+  const active = props.activeRowIndex != null && brain.getInitialRows() > props.activeRowIndex;
   const [_rerenderId, rerender] = useRerender();
   useLayoutEffect4(() => {
     if (props.activeRowIndex == null) {
       return;
     }
-    const rowIndex = props.activeRowIndex;
+    let activeCellRowOffsetX = "0px";
+    let rowIndex = props.activeRowIndex;
+    if (brain.isHorizontalLayoutBrain && brain.rowsPerPage) {
+      const pageIndex = brain.getPageIndexForRow(rowIndex);
+      if (pageIndex > 0) {
+        activeCellRowOffsetX = `calc(${ThemeVars.runtime.totalVisibleColumnsWidthVar} * ${pageIndex})`;
+      }
+      rowIndex = rowIndex % brain.rowsPerPage;
+    }
     const activeCellRowHeight = brain.getRowHeight(rowIndex);
     const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
     const node = domRef.current;
     const vars = {
       activeCellRowHeight: `${activeCellRowHeight}px`,
-      activeCellRowOffset: `${activeCellRowOffset}px`
+      activeCellRowOffset: `${activeCellRowOffset}px`,
+      activeCellRowOffsetX
     };
     setInfiniteVarsOnNode(vars, node);
-  }, [props.activeRowIndex]);
+  }, [props.activeRowIndex, brain]);
   useEffect5(() => {
-    const removeOnScroll = brain.onScroll((scrollPosition) => {
+    const updateVars = (scrollPosition) => {
       setInfiniteVarsOnNode(
         {
-          scrollTopForActiveRow: `${-scrollPosition.scrollTop}px`
+          scrollTopForActiveRow: `${-scrollPosition.scrollTop}px`,
+          scrollLeftForActiveRowWhenHorizontalLayout: `${-scrollPosition.scrollLeft}px`
         },
         domRef.current
       );
-    });
+    };
+    updateVars(brain.getScrollPosition());
+    const removeOnScroll = brain.onScroll(updateVars);
     const removeOnRenderCountChange = brain.onRenderCountChange(rerender);
     return () => {
       removeOnRenderCountChange();
@@ -4402,7 +4540,9 @@ var ActiveRowIndicatorFn = (props) => {
       {
         ref: domRef,
         "data-name": "active-row-indicator",
-        className: `${baseCls} ${active ? ActiveRowIndicatorCls.visible : ActiveRowIndicatorCls.hidden}`,
+        className: `${baseCls} ${ActiveRowIndicatorRecipe({
+          active
+        })}`,
         style: active ? ActiveStyle : void 0
       }
     ))
@@ -4444,7 +4584,7 @@ var ActiveCellIndicatorFn = (props) => {
   const active = props.activeCellIndex != null && brain.getInitialRows() > props.activeCellIndex[0];
   useLayoutEffect5(() => {
     reposition(brain, props.activeCellIndex, props.rowHeight, domRef);
-  }, [props.activeCellIndex, props.rowHeight]);
+  }, [props.activeCellIndex, props.rowHeight, brain]);
   useEffect6(() => {
     const removeOnRenderCountChange = brain.onRenderCountChange(() => {
       rerender();
@@ -5216,114 +5356,6 @@ var useInfiniteTableState = () => {
 import * as React26 from "react";
 import { useEffect as useEffect10, useLayoutEffect as useLayoutEffect8, useState as useState5 } from "react";
 
-// ../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
-function toPrimitive(t, r) {
-  if ("object" != typeof t || !t)
-    return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i)
-      return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function toPropertyKey(t) {
-  var i = toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : String(i);
-}
-function _defineProperty(obj, key, value) {
-  key = toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread2(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
-function mapValues(input, fn) {
-  var result = {};
-  for (var _key in input) {
-    result[_key] = fn(input[_key], _key);
-  }
-  return result;
-}
-var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
-  for (var key of Object.keys(compoundCheck)) {
-    var _selections$key;
-    if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
-      return false;
-    }
-  }
-  return true;
-};
-var createRuntimeFn = (config) => {
-  var runtimeFn = (options) => {
-    var className = config.defaultClassName;
-    var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
-    for (var variantName in selections) {
-      var _selections$variantNa;
-      var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
-      if (variantSelection != null) {
-        var selection = variantSelection;
-        if (typeof selection === "boolean") {
-          selection = selection === true ? "true" : "false";
-        }
-        var selectionClassName = (
-          // @ts-expect-error
-          config.variantClassNames[variantName][selection]
-        );
-        if (selectionClassName) {
-          className += " " + selectionClassName;
-        }
-      }
-    }
-    for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
-      if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
-        className += " " + compoundClassName;
-      }
-    }
-    return className;
-  };
-  runtimeFn.variants = () => Object.keys(config.variantClassNames);
-  runtimeFn.classNames = {
-    get base() {
-      return config.defaultClassName.split(" ")[0];
-    },
-    get variants() {
-      return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
-    }
-  };
-  return runtimeFn;
-};
-
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
 var CellCls = "cell_CellCls__1eexc2a5 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_position_absolute__16lm1iw2 utilities_willChange_transform__16lm1iw22 utilities_whiteSpace_nowrap__16lm1iw23 utilities_userSelect_none__16lm1iw17";
 var HeaderCellContentRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellContentRecipe__12zfob122 utilities_height_100%__16lm1iw19 utilities_width_100%__16lm1iw1b utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_justifyContent_start__16lm1iw1v", variantClassNames: { filtered: { false: "header_HeaderCellContentRecipe_filtered_false__12zfob123", true: "header_HeaderCellContentRecipe_filtered_true__12zfob124" }, verticalAlign: { start: "header_HeaderCellContentRecipe_verticalAlign_start__12zfob125", end: "header_HeaderCellContentRecipe_verticalAlign_end__12zfob126", center: "header_HeaderCellContentRecipe_verticalAlign_center__12zfob127" }, align: { start: "header_HeaderCellContentRecipe_align_start__12zfob128", end: "header_HeaderCellContentRecipe_align_end__12zfob129", center: "header_HeaderCellContentRecipe_align_center__12zfob12a" } }, defaultVariants: {}, compoundVariants: [] });
@@ -16988,22 +17020,35 @@ var InfiniteTableApiImpl = class {
     state.scrollerDOMRef.current.scrollTop = Math.max(scrollTop2, 0);
   }
   scrollRowIntoView(rowIndex, config = { offset: 0 }) {
+    var _a;
     const state = this.getState();
+    const computed = this.getComputed();
+    const currentScrollPosition = state.brain.getScrollPosition();
+    let columnId = config.columnId;
+    let colIndex = void 0;
+    if (!columnId && state.brain.isHorizontalLayoutBrain && computed.computedVisibleColumns.length > 0) {
+      columnId = computed.computedVisibleColumns[Math.ceil(computed.computedVisibleColumns.length / 2)].id;
+      colIndex = (_a = computed.computedVisibleColumnsMap.get(columnId)) == null ? void 0 : _a.computedVisibleIndex;
+    }
     const scrollPosition = state.renderer.getScrollPositionForScrollRowIntoView(
       rowIndex,
-      config
+      __spreadProps(__spreadValues({}, config), { colIndex })
     );
     if (!scrollPosition) {
       return false;
     }
-    const currentScrollPosition = state.brain.getScrollPosition();
     const scrollTopMax = state.brain.scrollTopMax;
-    if (scrollPosition.scrollTop > scrollTopMax + (config.offset || 0)) {
+    const scrollLeftChanged = scrollPosition.scrollLeft !== currentScrollPosition.scrollLeft;
+    const scrollTopValid = scrollPosition.scrollTop <= scrollTopMax + (config.offset || 0);
+    if (!scrollTopValid && !scrollLeftChanged) {
       return false;
     }
-    if (scrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
+    if (scrollTopValid && scrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
       state.scrollerDOMRef.current.scrollTop = scrollPosition.scrollTop;
     }
+    if (scrollLeftChanged) {
+      state.scrollerDOMRef.current.scrollLeft = scrollPosition.scrollLeft;
+    }
     return true;
   }
   scrollColumnIntoView(columnId, config = { offset: 0 }) {
@@ -19691,7 +19736,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "5.0.0-canary.0"
+      version: "5.0.0-canary.1"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -19952,6 +19997,15 @@ function handleRowNavigation(options, event) {
     },
     ArrowLeft: () => {
       const rowInfo = dataArray[activeRowIndex];
+      if (brain.isHorizontalLayoutBrain) {
+        const rowsPerPage = brain.rowsPerPage;
+        if (activeRowIndex - rowsPerPage >= min) {
+          activeRowIndex = activeRowIndex - rowsPerPage;
+        } else {
+          KeyToFunction.ArrowUp();
+        }
+        return;
+      }
       if (rowInfo && rowInfo.isGroupRow) {
         return api.collapseGroupRow(rowInfo.groupKeys);
       }
@@ -19962,6 +20016,15 @@ function handleRowNavigation(options, event) {
     },
     ArrowRight: () => {
       const rowInfo = dataArray[activeRowIndex];
+      if (brain.isHorizontalLayoutBrain) {
+        const rowsPerPage = brain.rowsPerPage;
+        if (activeRowIndex + rowsPerPage <= max) {
+          activeRowIndex = activeRowIndex + rowsPerPage;
+        } else {
+          KeyToFunction.ArrowDown();
+        }
+        return;
+      }
       if (rowInfo && rowInfo.isGroupRow) {
         return api.expandGroupRow(rowInfo.groupKeys);
       }

package/package.json

@@ -25,7 +25,7 @@
   "bugs": {
     "url": "https://github.com/infinite-table/infinite-react/issues"
   },
-  "version": "5.0.0-canary.0",
+  "version": "5.0.0-canary.1",
   "main": "index.js",
   "module": "index.mjs",
   "typings": "index.d.ts",
@@ -34,5 +34,5 @@
   },
   "license": "Commercial & Open Source",
   "//": "will be updated at build time",
-  "publishedAt": 1726753329029
+  "publishedAt": 1726844089529
 }