@infinite-table/infinite-react 0.0.1-canary.11 → 0.0.1

package/index.esm.js

@@ -630,6 +630,41 @@ function isControlled(propName, props) {
   return controlled;
 }
 
+// src/components/VirtualBrain/ScrollListener.ts
+var initialScrollPosition = {
+  scrollLeft: 0,
+  scrollTop: 0
+};
+var ScrollListener = class {
+  constructor() {
+    this.scrollPosition = initialScrollPosition;
+    this.onScrollFns = [];
+    this.getScrollPosition = () => {
+      return this.scrollPosition;
+    };
+    this.onScroll = (fn) => {
+      this.onScrollFns.push(fn);
+      return () => {
+        this.onScrollFns = this.onScrollFns.filter((f) => f !== fn);
+      };
+    };
+    this.setScrollPosition = (scrollPosition) => {
+      this.scrollPosition = scrollPosition;
+      this.notifyScrollChange();
+    };
+    this.destroy = () => {
+      this.onScrollFns = [];
+    };
+  }
+  notifyScrollChange() {
+    const { scrollPosition } = this;
+    const fns = this.onScrollFns;
+    for (let i = 0, len = fns.length; i < len; i++) {
+      fns[i](scrollPosition);
+    }
+  }
+};
+
 // src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
 function computeColumnGroupsDepths(columnGroups) {
   const map = new Map();
@@ -687,6 +722,8 @@ function getInitialState(params) {
     generatedColumns,
     columnOrder: (_c = isControlled("columnOrder", props) ? props.columnOrder : props.defaultColumnOrder) != null ? _c : true,
     computedColumnGroups,
+    pinnedStartScrollListener: new ScrollListener(),
+    pinnedEndScrollListener: new ScrollListener(),
     columnGroups,
     collapsedColumnGroups,
     columnGroupsDepthsMap,
@@ -718,6 +755,8 @@ function deriveReadOnlyState(params) {
     rowStyle: props.rowStyle,
     rowProps: props.rowProps,
     rowClassName: props.rowClassName,
+    pinnedStartMaxWidth: props.pinnedStartMaxWidth,
+    pinnedEndMaxWidth: props.pinnedEndMaxWidth,
     groupRenderStrategy: (_e = props.groupRenderStrategy) != null ? _e : "multi-column",
     pivotTotalColumnPosition,
     columnMinWidth: (_f = props.columnMinWidth) != null ? _f : 30,
@@ -1019,6 +1058,8 @@ var getComputedVisibleColumns = ({
   columnMinWidth,
   columnMaxWidth,
   columnDefaultWidth,
+  pinnedStartMaxWidth,
+  pinnedEndMaxWidth,
   sortable,
   sortInfo,
   setSortInfo,
@@ -1200,6 +1241,8 @@ var getComputedVisibleColumns = ({
     }
     prevPinned = computedPinned;
   });
+  const computedPinnedStartWidth = pinnedStartMaxWidth != null ? Math.min(pinnedStartMaxWidth, computedPinnedStartColumnsWidth) : computedPinnedStartColumnsWidth;
+  const computedPinnedEndWidth = pinnedEndMaxWidth != null ? Math.min(pinnedEndMaxWidth, computedPinnedEndColumnsWidth) : computedPinnedEndColumnsWidth;
   const result = {
     computedRemainingSpace: bodySize.width - (totalPinnedStartWidth + totalPinnedEndWidth + totalUnpinnedWidth),
     computedPinnedStartColumnsWidth,
@@ -1212,7 +1255,9 @@ var getComputedVisibleColumns = ({
     computedPinnedEndOffset: computedPinnedStartColumnsWidth + computedUnpinnedColumnsWidth,
     computedUnpinnedColumns,
     computedVisibleColumns,
-    computedVisibleColumnsMap
+    computedVisibleColumnsMap,
+    computedPinnedEndWidth,
+    computedPinnedStartWidth
   };
   return result;
 };
@@ -1318,6 +1363,8 @@ var useComputedVisibleColumns = ({
   setSortInfo,
   columnOrder,
   columnPinning,
+  pinnedEndMaxWidth,
+  pinnedStartMaxWidth,
   columnVisibility,
   columnVisibilityAssumeVisible
 }) => {
@@ -1336,7 +1383,9 @@ var useComputedVisibleColumns = ({
     computedPinnedEndColumnsWidth,
     computedUnpinnedColumnsWidth,
     computedUnpinnedOffset,
-    computedPinnedEndOffset
+    computedPinnedEndOffset,
+    computedPinnedEndWidth,
+    computedPinnedStartWidth
   } = useMemo2(() => {
     return getComputedVisibleColumns({
       columns,
@@ -1349,6 +1398,8 @@ var useComputedVisibleColumns = ({
       sortInfo,
       setSortInfo,
       multiSort,
+      pinnedEndMaxWidth,
+      pinnedStartMaxWidth,
       draggableColumns,
       columnOrder,
       columnPinning,
@@ -1369,6 +1420,8 @@ var useComputedVisibleColumns = ({
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible,
+    pinnedEndMaxWidth,
+    pinnedStartMaxWidth,
     columnPinning,
     columnsRenderId,
     visibilityRenderId,
@@ -1376,6 +1429,8 @@ var useComputedVisibleColumns = ({
   ]);
   const result = {
     columns,
+    computedPinnedEndWidth,
+    computedPinnedStartWidth,
     computedRemainingSpace,
     computedUnpinnedOffset,
     computedPinnedEndOffset,
@@ -3172,13 +3227,17 @@ function useComputed() {
     computedUnpinnedColumnsWidth,
     computedUnpinnedOffset,
     computedPinnedEndOffset,
-    computedRemainingSpace
+    computedRemainingSpace,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth
   } = useComputedVisibleColumns({
     columns: componentState.computedPivotColumns || componentState.columns,
     generatedColumns: componentState.generatedColumns,
     columnMinWidth: componentState.columnMinWidth,
     columnMaxWidth: componentState.columnMaxWidth,
     columnDefaultWidth: componentState.columnDefaultWidth,
+    pinnedStartMaxWidth: componentState.pinnedStartMaxWidth,
+    pinnedEndMaxWidth: componentState.pinnedEndMaxWidth,
     bodySize,
     sortable: componentState.sortable,
     draggableColumns: componentState.draggableColumns,
@@ -3213,7 +3272,13 @@ function useComputed() {
   if (colWidthSum > scrollLeft) {
     columnRenderStartIndex--;
   }
+  const computedPinnedStartOverflow = computedPinnedStartWidth ? computedPinnedStartColumnsWidth > computedPinnedStartWidth : false;
+  const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   return {
+    computedPinnedStartOverflow,
+    computedPinnedEndOverflow,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth,
     computedVisibleColumns,
     computedColumnOrder,
     computedRemainingSpace,
@@ -3291,8 +3356,8 @@ import {
   memo as memo2
 } from "react";
 function HorizontalScrollbarPlaceholderFn(props) {
-  const height = getScrollbarWidth();
-  if (!height) {
+  const scrollbarWidth2 = getScrollbarWidth();
+  if (!scrollbarWidth2) {
     return null;
   }
   return /* @__PURE__ */ createElement8("div", {
@@ -3301,15 +3366,14 @@ function HorizontalScrollbarPlaceholderFn(props) {
       position: "absolute",
       overflow: "visible",
       overflowX: "scroll",
-      height,
       bottom: 0
     }, props.style)
   });
 }
 var HorizontalScrollbarPlaceholder = memo2(HorizontalScrollbarPlaceholderFn);
 function VerticalScrollbarPlaceholderFn(props) {
-  const width = getScrollbarWidth();
-  if (!width) {
+  const scrollbarWidth2 = getScrollbarWidth();
+  if (!scrollbarWidth2) {
     return null;
   }
   return /* @__PURE__ */ createElement8("div", {
@@ -3318,7 +3382,6 @@ function VerticalScrollbarPlaceholderFn(props) {
       position: "absolute",
       overflow: "visible",
       overflowY: "scroll",
-      width,
       bottom: 0
     }, props.style)
   });
@@ -4334,7 +4397,23 @@ var UPDATE_SCROLL = (node, scrollPosition) => {
   node.style.transform = `translate3d(${-scrollPosition.scrollLeft}px, 0px, 0px)`;
 };
 function InfiniteTableHeaderUnvirtualizedFn(props) {
-  const _a = props, { columns, scrollable, brain, totalWidth } = _a, domProps = __objRest(_a, ["columns", "scrollable", "brain", "totalWidth"]);
+  const _a = props, {
+    columns,
+    scrollable,
+    classNameModifiers,
+    brain,
+    scrollListener,
+    totalWidth,
+    availableWidth
+  } = _a, domProps = __objRest(_a, [
+    "columns",
+    "scrollable",
+    "classNameModifiers",
+    "brain",
+    "scrollListener",
+    "totalWidth",
+    "availableWidth"
+  ]);
   const {
     componentState: {
       computedColumnGroups,
@@ -4375,23 +4454,27 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
   });
   const style = __spreadValues({}, domProps == null ? void 0 : domProps.style);
   if (totalWidth != null) {
-    style.width = totalWidth;
+    style.width = availableWidth;
   }
   useEffect13(() => {
-    if (!brain || !scrollable) {
+    const scroller = brain || scrollListener;
+    if (!scroller || !scrollable) {
       return;
     }
     const onScroll = (scrollPosition) => {
       UPDATE_SCROLL(domRef.current, scrollPosition);
     };
-    const removeOnScroll = brain.onScroll(onScroll);
+    const removeOnScroll = scroller.onScroll(onScroll);
     return removeOnScroll;
-  }, [brain]);
+  }, [brain, scrollListener]);
   return /* @__PURE__ */ createElement18("div", __spreadProps(__spreadValues({}, domProps), {
-    ref: domRef,
-    className: join(ICSS.flexFlow.row, ICSS.display.flex, TableHeaderClassName2, `${TableHeaderClassName2}--unvirtualized`, domProps.className),
+    className: join(TableHeaderClassName2, `${TableHeaderClassName2}--unvirtualized`, domProps.className, ...(classNameModifiers || []).filter(Boolean).map((modifier) => `${TableHeaderClassName2}--${modifier}`)),
     style
-  }), children);
+  }), /* @__PURE__ */ createElement18("div", {
+    style: { width: totalWidth },
+    className: join(ICSS.flexFlow.row, ICSS.display.flex),
+    ref: domRef
+  }, children));
 }
 var InfiniteTableHeaderUnvirtualized = memo7(InfiniteTableHeaderUnvirtualizedFn);
 
@@ -4404,11 +4487,21 @@ function TableHeaderWrapper(props) {
     computedPinnedStartColumns,
     computedPinnedEndColumns,
     computedPinnedStartColumnsWidth,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth,
     computedPinnedEndColumnsWidth,
-    computedUnpinnedColumnsWidth
+    computedUnpinnedColumnsWidth,
+    computedPinnedStartOverflow,
+    computedPinnedEndOverflow
   } = tableContextValue.computed;
   const {
-    componentState: { virtualizeHeader, headerHeight, columnGroupsMaxDepth }
+    componentState: {
+      virtualizeHeader,
+      headerHeight,
+      columnGroupsMaxDepth,
+      pinnedStartScrollListener,
+      pinnedEndScrollListener
+    }
   } = tableContextValue;
   const hasPinnedStart = computedPinnedStartColumns.length > 0;
   const hasPinnedEnd = computedPinnedEndColumns.length > 0;
@@ -4419,15 +4512,17 @@ function TableHeaderWrapper(props) {
     brain,
     style: {
       position: "absolute",
-      left: computedPinnedStartColumnsWidth,
+      left: computedPinnedStartWidth,
       width: computedUnpinnedColumnsWidth,
       height: columnGroupsMaxDepth || headerHeight
     },
+    availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
   }) : /* @__PURE__ */ createElement19(InfiniteTableHeaderUnvirtualized, {
     brain,
     scrollable: true,
     columns: computedUnpinnedColumns,
+    availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
   });
   return /* @__PURE__ */ createElement19("div", {
@@ -4440,18 +4535,34 @@ function TableHeaderWrapper(props) {
     style: {
       left: 0,
       position: "absolute",
-      width: computedPinnedStartColumnsWidth
+      width: computedPinnedStartWidth
     },
+    availableWidth: computedPinnedStartWidth,
+    totalWidth: computedPinnedStartColumnsWidth,
     columns: computedPinnedStartColumns,
-    totalWidth: computedPinnedStartColumnsWidth
+    scrollable: computedPinnedStartOverflow,
+    classNameModifiers: [
+      "pinned",
+      "pinned-start",
+      computedPinnedStartOverflow ? "overflow" : ""
+    ],
+    scrollListener: computedPinnedStartOverflow ? pinnedStartScrollListener : void 0
   }) : null, header, hasPinnedEnd ? /* @__PURE__ */ createElement19(InfiniteTableHeaderUnvirtualized, {
     style: {
       right: scrollbars.vertical ? getScrollbarWidth() : 0,
       position: "absolute",
-      width: computedPinnedEndColumnsWidth
+      width: computedPinnedEndWidth
     },
     columns: computedPinnedEndColumns,
-    totalWidth: computedPinnedEndColumnsWidth
+    availableWidth: computedPinnedEndWidth,
+    totalWidth: computedPinnedEndColumnsWidth,
+    scrollable: computedPinnedEndOverflow,
+    classNameModifiers: [
+      "pinned",
+      "pinned-end",
+      computedPinnedEndOverflow ? "overflow" : ""
+    ],
+    scrollListener: computedPinnedEndOverflow ? pinnedEndScrollListener : void 0
   }) : null, scrollbars.vertical ? /* @__PURE__ */ createElement19(VerticalScrollbarPlaceholder, {
     style: {
       height: "100%",
@@ -4504,13 +4615,6 @@ var getScrollableClassName = (scrollable) => {
 
 // src/components/VirtualScrollContainer/index.tsx
 var rootClassName6 = "IT-VirtualScrollContainer";
-var defaultClasName = [
-  ICSS.position.fixed,
-  ICSS.height["100%"],
-  ICSS.width["100%"],
-  ICSS.left[0],
-  ICSS.top[0]
-].join(" ");
 var VirtualScrollContainer = forwardRef2(function VirtualScrollContainer2(props, ref) {
   const {
     children,
@@ -4527,7 +4631,6 @@ var VirtualScrollContainer = forwardRef2(function VirtualScrollContainer2(props,
     className: [
       className,
       rootClassName6,
-      defaultClasName,
       getScrollableClassName(scrollable)
     ].join(" ")
   }, children);
@@ -4558,7 +4661,7 @@ function SpacePlaceholderFn(props) {
 var SpacePlaceholder = memo8(SpacePlaceholderFn);
 
 // src/components/InfiniteTable/hooks/useListRendering.tsx
-import { useCallback as useCallback17, useEffect as useEffect19, useMemo as useMemo8, useRef as useRef14 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect19, useMemo as useMemo9, useRef as useRef14 } from "react";
 
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
 import {
@@ -4584,7 +4687,6 @@ var UPDATE_SCROLL2 = (node, scrollPosition) => {
 var CLASSES = join(ICSS.height["0"], ICSS.width["0"], ICSS.willChange.transform);
 var debug4 = dbg("VirtuaList");
 var rootClassName7 = "IList";
-var defaultClasses = [ICSS.position.relative, ICSS.transform.translate3D000];
 var VirtualList = (props) => {
   const _a = props, {
     scrollable,
@@ -4648,7 +4750,7 @@ var VirtualList = (props) => {
   const width = mainAxis === "horizontal" ? totalSize : itemCrossAxisSize != null ? itemCrossAxisSize : 0;
   const height = mainAxis === "vertical" ? totalSize : itemCrossAxisSize != null ? itemCrossAxisSize : 0;
   const domProps = __spreadProps(__spreadValues({}, restDOMProps), {
-    className: join(props.className, rootClassName7, `${rootClassName7}--${mainAxis}`, ...defaultClasses)
+    className: join(props.className, rootClassName7, `${rootClassName7}--${mainAxis}`, ICSS.transform.translate3D000)
   });
   if (false) {
     domProps["data-cmp-name"] = `VirtualList`;
@@ -4658,7 +4760,8 @@ var VirtualList = (props) => {
     onContainerScroll
   }, /* @__PURE__ */ createElement22("div", {
     ref: domRef,
-    className: CLASSES
+    className: CLASSES,
+    "data-name": "scroll-transform-target"
   }, /* @__PURE__ */ createElement22(RawList, {
     brain: virtualBrain,
     renderItem,
@@ -4945,8 +5048,8 @@ function useUnpinnedRendering(params) {
     verticalVirtualBrain,
     horizontalVirtualBrain,
     computedUnpinnedColumnsWidth,
-    computedPinnedStartColumnsWidth,
-    computedPinnedEndColumnsWidth,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth,
     computedUnpinnedColumns,
     getState
   } = params;
@@ -5001,8 +5104,8 @@ function useUnpinnedRendering(params) {
       height: bodySize.height,
       top: 0,
       position: "absolute",
-      left: computedPinnedStartColumnsWidth,
-      right: computedPinnedEndColumnsWidth
+      left: computedPinnedStartWidth,
+      right: computedPinnedEndWidth
     },
     count: getData().length,
     rowHeight,
@@ -5080,7 +5183,8 @@ var useOnContainerScroll = ({
 
 // src/components/InfiniteTable/hooks/usePinnedRendering.tsx
 import {
-  createElement as createElement29
+  createElement as createElement29,
+  useMemo as useMemo8
 } from "react";
 import { useCallback as useCallback15 } from "react";
 
@@ -5105,7 +5209,7 @@ function useOnMount(domRef, props) {
 
 // src/components/VirtualList/RowListWithExternalScrolling.tsx
 var rootClassName10 = "IList";
-var defaultClasses2 = [
+var defaultClasses = [
   ICSS.willChange.transform,
   ICSS.position.relative,
   ICSS.transform.translate3D000
@@ -5139,8 +5243,6 @@ var RowListWithExternalScrolling = (props) => {
           const { renderStartIndex, renderEndIndex } = brain.getRenderRange();
           node.dataset.renderStartIndex = renderStartIndex;
           node.dataset.renderEndIndex = renderEndIndex;
-          node.dataset.scrollLeft = scrollPosition.scrollLeft;
-          node.dataset.scrollTop = scrollPosition.scrollTop;
         }
         if (updateScroll) {
           updateScroll(node, scrollPosition);
@@ -5157,7 +5259,7 @@ var RowListWithExternalScrolling = (props) => {
   const domProps = {
     ref: domRef,
     style,
-    className: join(className, rootClassName10, `${rootClassName10}--vertical`, ...defaultClasses2)
+    className: join(className, rootClassName10, `${rootClassName10}--vertical`, ...defaultClasses)
   };
   if (false) {
     domProps["data-cmp-name"] = "RowListWithExternalScrolling";
@@ -5170,9 +5272,74 @@ var RowListWithExternalScrolling = (props) => {
 };
 
 // src/components/InfiniteTable/hooks/usePinnedRendering.tsx
-var UPDATE_SCROLL3 = (node, scrollPosition) => {
-  node.style.transform = `translate3d(0px, ${-scrollPosition.scrollTop}px, 0px)`;
+var UPDATE_SCROLL3 = (node, brainScrollPosition, horizontalPinnedScrollPosition) => {
+  node.style.transform = `translate3d(${horizontalPinnedScrollPosition ? -horizontalPinnedScrollPosition.scrollLeft : 0}px, ${-brainScrollPosition.scrollTop}px, 0px)`;
 };
+var PinnedRowsContainerClassName = `ITablePinnedRows`;
+function PinnedRowsContainer(props) {
+  const {
+    maxWidth,
+    pinning,
+    rowWidth,
+    height,
+    pinnedScrollListener,
+    hasOverflow,
+    brain,
+    renderRow
+  } = props;
+  const style = useMemo8(() => {
+    const result = pinning === "end" ? {
+      width: rowWidth,
+      height,
+      right: 0
+    } : {};
+    if (!hasOverflow && pinning === "end") {
+      result.position = "absolute";
+    }
+    if (hasOverflow) {
+      result.height = getScrollbarWidth();
+      result.width = getScrollbarWidth();
+    }
+    return result;
+  }, [height, rowWidth, pinning, hasOverflow]);
+  const updateScroll = useCallback15((node, scrollPosition) => {
+    UPDATE_SCROLL3(node, scrollPosition, hasOverflow ? pinnedScrollListener.getScrollPosition() : void 0);
+  }, [hasOverflow, pinnedScrollListener]);
+  const rowListProps = {
+    style,
+    brain,
+    renderRow,
+    updateScroll,
+    className: join(`${PinnedRowsContainerClassName}`, `${PinnedRowsContainerClassName}--pinned-${pinning}`, `${PinnedRowsContainerClassName}--overflow`)
+  };
+  if (hasOverflow) {
+    return /* @__PURE__ */ createElement29(VirtualScrollContainer, {
+      scrollable: {
+        horizontal: true,
+        vertical: false
+      },
+      style: {
+        width: maxWidth,
+        height,
+        position: "absolute",
+        [pinning === "start" ? "left" : "right"]: 0,
+        [pinning === "start" ? "right" : "left"]: "unset"
+      },
+      onContainerScroll: pinnedScrollListener == null ? void 0 : pinnedScrollListener.setScrollPosition,
+      className: join(`${PinnedRowsContainerClassName}Container`, `${PinnedRowsContainerClassName}Container--pinned-${pinning}`)
+    }, /* @__PURE__ */ createElement29(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
+      onMount: (node) => {
+        pinnedScrollListener == null ? void 0 : pinnedScrollListener.onScroll((scrollPosition) => {
+          updateScroll(node, brain.getScrollPosition(), scrollPosition);
+        });
+      }
+    })), /* @__PURE__ */ createElement29(SpacePlaceholder, {
+      width: rowWidth,
+      height: 1
+    }));
+  }
+  return /* @__PURE__ */ createElement29(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
+}
 function useRenderPinnedRow(params) {
   const { getData, getState, columnsWidth, columns } = params;
   const renderPinnedRow = useCallback15((rowInfo) => {
@@ -5192,7 +5359,7 @@ function useRenderPinnedRow(params) {
   }, [columnsWidth, columns]);
   return renderPinnedRow;
 }
-function usePinnedEndRendering(params) {
+function usePinnedRenderingForSide(side, params) {
   const {
     getState,
     getData,
@@ -5200,7 +5367,15 @@ function usePinnedEndRendering(params) {
     bodySize,
     computedPinnedEndColumns,
     computedPinnedEndColumnsWidth,
+    computedPinnedStartColumns,
+    computedPinnedStartColumnsWidth,
     verticalVirtualBrain,
+    computedPinnedEndWidth,
+    computedPinnedEndOverflow,
+    computedPinnedStartWidth,
+    computedPinnedStartOverflow,
+    pinnedStartScrollListener,
+    pinnedEndScrollListener,
     repaintId,
     toggleGroupRow,
     scrollbars: {
@@ -5208,31 +5383,54 @@ function usePinnedEndRendering(params) {
       horizontal: hasHorizontalScrollbar
     }
   } = params;
-  const renderRowPinnedEnd = useRenderPinnedRow({
+  const count = getData().length;
+  const rowWidth = side === "start" ? computedPinnedStartColumnsWidth : computedPinnedEndColumnsWidth;
+  const columns = side === "start" ? computedPinnedStartColumns : computedPinnedEndColumns;
+  const columnsWidth = side === "start" ? computedPinnedStartColumnsWidth : computedPinnedEndColumnsWidth;
+  const maxWidth = side === "start" ? computedPinnedStartWidth : computedPinnedEndWidth;
+  const hasOverflow = side === "start" ? computedPinnedStartOverflow : computedPinnedEndOverflow;
+  const pinnedScrollListener = side === "start" ? pinnedStartScrollListener : pinnedEndScrollListener;
+  const renderRowPinned = useRenderPinnedRow({
     getData,
     getState,
     toggleGroupRow,
-    columns: computedPinnedEndColumns,
-    columnsWidth: computedPinnedEndColumnsWidth
+    columns,
+    columnsWidth
   });
-  const pinnedEndList = computedPinnedEndColumns.length && rowHeight !== 0 ? /* @__PURE__ */ createElement29(RowListWithExternalScrolling, {
-    repaintId: `${repaintId}-pin-end-${rowHeight}`,
+  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ createElement29(PinnedRowsContainer, {
+    pinning: side,
+    pinnedScrollListener,
+    hasOverflow,
+    rowHeight,
+    rowWidth,
+    maxWidth,
+    height: bodySize.height,
+    count,
+    repaintId: `${repaintId}-pin-${side}-${rowHeight}`,
     brain: verticalVirtualBrain,
-    renderRow: renderRowPinnedEnd,
-    style: {
-      position: "absolute",
-      height: bodySize.height,
-      width: computedPinnedEndColumnsWidth,
-      right: 0
-    },
-    updateScroll: UPDATE_SCROLL3
+    renderRow: renderRowPinned
   }) : null;
-  const pinnedEndScrollbarPlaceholder = pinnedEndList && hasHorizontalScrollbar ? /* @__PURE__ */ createElement29(HorizontalScrollbarPlaceholder, {
-    style: {
-      width: computedPinnedEndColumnsWidth,
+  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ createElement29(HorizontalScrollbarPlaceholder, {
+    style: side === "end" ? {
+      width: columnsWidth,
       right: hasVerticalScrollbar ? getScrollbarWidth() : 0
+    } : {
+      width: columnsWidth,
+      left: 0
     }
   }) : null;
+  return {
+    renderRowPinned,
+    pinnedList,
+    pinnedScrollbarPlaceholder
+  };
+}
+function usePinnedEndRendering(params) {
+  const {
+    renderRowPinned: renderRowPinnedEnd,
+    pinnedList: pinnedEndList,
+    pinnedScrollbarPlaceholder: pinnedEndScrollbarPlaceholder
+  } = usePinnedRenderingForSide("end", params);
   return {
     renderRowPinnedEnd,
     pinnedEndList,
@@ -5241,40 +5439,16 @@ function usePinnedEndRendering(params) {
 }
 function usePinnedStartRendering(params) {
   const {
-    getData,
-    getState,
-    rowHeight,
-    computedPinnedStartColumns,
-    computedPinnedStartColumnsWidth,
-    verticalVirtualBrain,
-    toggleGroupRow,
-    repaintId,
-    scrollbars: { horizontal: hasHorizontalScrollbar }
-  } = params;
-  const renderRowPinnedStart = useRenderPinnedRow({
-    getData,
-    getState,
-    toggleGroupRow,
-    columns: computedPinnedStartColumns,
-    columnsWidth: computedPinnedStartColumnsWidth
-  });
-  const pinnedStartList = computedPinnedStartColumns.length && rowHeight !== 0 ? /* @__PURE__ */ createElement29(RowListWithExternalScrolling, {
-    repaintId: `${repaintId}-pin-start-${rowHeight}`,
-    brain: verticalVirtualBrain,
-    renderRow: renderRowPinnedStart,
-    updateScroll: UPDATE_SCROLL3
-  }) : null;
-  const pinnedStartScrollbarPlaceholder = pinnedStartList && hasHorizontalScrollbar ? /* @__PURE__ */ createElement29(HorizontalScrollbarPlaceholder, {
-    style: {
-      width: computedPinnedStartColumnsWidth,
-      left: 0
-    }
-  }) : null;
-  return {
+    renderRowPinned: renderRowPinnedStart,
+    pinnedList: pinnedStartList,
+    pinnedScrollbarPlaceholder: pinnedStartScrollbarPlaceholder
+  } = usePinnedRenderingForSide("start", params);
+  const result = {
     renderRowPinnedStart,
     pinnedStartList,
     pinnedStartScrollbarPlaceholder
   };
+  return result;
 }
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
@@ -5282,7 +5456,7 @@ import { useEffect as useEffect18 } from "react";
 
 // src/components/VirtualBrain/index.ts
 var import_binary_search2 = __toModule(require_binary_search());
-var initialScrollPosition = {
+var initialScrollPosition2 = {
   scrollLeft: 0,
   scrollTop: 0
 };
@@ -5291,7 +5465,7 @@ var SORT_ASC = (a, b) => a - b;
 var VirtualBrain = class extends Logger {
   constructor(options) {
     super(`VirtualBrain:${options.mainAxis}`);
-    this.scrollPosition = initialScrollPosition;
+    this.scrollPosition = initialScrollPosition2;
     this.scrollPositionOnMainAxis = 0;
     this.totalSize = 0;
     this.onScrollFns = [];
@@ -5645,8 +5819,8 @@ function useYourBrain(param) {
   const {
     dataArray,
     computedUnpinnedColumns,
-    computedPinnedStartColumnsWidth,
-    computedPinnedEndColumnsWidth,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth,
     rowHeight,
     bodySize
   } = param;
@@ -5679,13 +5853,9 @@ function useYourBrain(param) {
   useEffect18(() => {
     horizontalVirtualBrain.setAvailableSize({
       height: 0,
-      width: Math.max(bodySize.width - computedPinnedStartColumnsWidth - computedPinnedEndColumnsWidth, 0)
+      width: Math.max(bodySize.width - computedPinnedStartWidth - computedPinnedEndWidth, 0)
     });
-  }, [
-    bodySize.width,
-    computedPinnedStartColumnsWidth,
-    computedPinnedEndColumnsWidth
-  ]);
+  }, [bodySize.width, computedPinnedStartWidth, computedPinnedEndWidth]);
   return { horizontalVirtualBrain, verticalVirtualBrain };
 }
 
@@ -5722,13 +5892,23 @@ function useListRendering(param) {
     computedPinnedEndColumns,
     computedPinnedStartColumnsWidth,
     computedPinnedEndColumnsWidth,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth,
     computedUnpinnedColumns,
-    computedUnpinnedColumnsWidth
+    computedUnpinnedColumnsWidth,
+    computedPinnedStartOverflow,
+    computedPinnedEndOverflow
   } = computed;
-  const { componentState: dataSourceState } = useDataSourceContextValue();
+  const { componentState: dataSourceState, getState: getDataSourceState } = useDataSourceContextValue();
   const { dataArray } = dataSourceState;
   const getData = useLatest(dataArray);
-  const { rowHeightComputed: rowHeight } = componentState;
+  const {
+    rowHeightComputed: rowHeight,
+    pinnedStartMaxWidth,
+    pinnedEndMaxWidth,
+    pinnedStartScrollListener,
+    pinnedEndScrollListener
+  } = componentState;
   const prevDataSourceTimestamp = usePrevious(dataSourceState.updatedAt);
   const repaintIdRef = useRef14(0);
   if (!shallowEqualObjects(prevComputed, computed) || prevDataSourceTimestamp !== dataSourceState.updatedAt) {
@@ -5736,9 +5916,9 @@ function useListRendering(param) {
   }
   const repaintId = repaintIdRef.current;
   const { horizontalVirtualBrain, verticalVirtualBrain } = useYourBrain({
+    computedPinnedStartWidth: computed.computedPinnedStartWidth,
+    computedPinnedEndWidth: computed.computedPinnedEndWidth,
     computedUnpinnedColumns: computed.computedUnpinnedColumns,
-    computedPinnedStartColumnsWidth: computed.computedPinnedStartColumnsWidth,
-    computedPinnedEndColumnsWidth: computed.computedPinnedEndColumnsWidth,
     rowHeight,
     dataArray,
     bodySize
@@ -5746,7 +5926,7 @@ function useListRendering(param) {
   const hasHorizontalScrollbar = computedUnpinnedColumnsWidth > bodySize.width - computedPinnedStartColumnsWidth - computedPinnedEndColumnsWidth;
   const reservedContentHeight = verticalVirtualBrain.getTotalSize() + (hasHorizontalScrollbar ? getScrollbarWidth() : 0);
   const hasVerticalScrollbar = bodySize.height < reservedContentHeight;
-  const scrollbars = useMemo8(() => ({
+  const scrollbars = useMemo9(() => ({
     vertical: hasVerticalScrollbar,
     horizontal: hasHorizontalScrollbar
   }), [hasVerticalScrollbar, hasHorizontalScrollbar]);
@@ -5763,7 +5943,9 @@ function useListRendering(param) {
         setColumnVisibility: (columnVisibility) => {
           componentActions.columnVisibility = columnVisibility;
         },
-        setColumnAggregations: (columnAggregations) => componentActions.columnAggregations = columnAggregations
+        setColumnAggregations: (columnAggregations) => componentActions.columnAggregations = columnAggregations,
+        getState,
+        getDataSourceState
       };
       onReady(imperativeApi);
     }
@@ -5773,7 +5955,7 @@ function useListRendering(param) {
     horizontalVirtualBrain,
     domRef
   });
-  const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
+  const { componentActions: dataSourceActions } = useDataSourceContextValue();
   const toggleGroupRow = useCallback17((groupKeys) => {
     const newState = new GroupRowsState(getDataSourceState().groupRowsState);
     newState.toggleGroupRow(groupKeys);
@@ -5784,14 +5966,22 @@ function useListRendering(param) {
     scrollbars,
     computedPinnedStartColumns,
     computedPinnedEndColumns,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth,
+    computedPinnedStartOverflow,
+    computedPinnedEndOverflow,
     computedPinnedStartColumnsWidth,
     computedPinnedEndColumnsWidth,
     getData,
     getState,
     toggleGroupRow,
+    pinnedStartMaxWidth,
+    pinnedEndMaxWidth,
     repaintId,
     rowHeight,
-    verticalVirtualBrain
+    verticalVirtualBrain,
+    pinnedStartScrollListener,
+    pinnedEndScrollListener
   };
   const centerRenderingParams = __spreadProps(__spreadValues({}, pinnedRenderingParams), {
     columnShifts,
@@ -5908,7 +6098,7 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
 });
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo10 } from "react";
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -6054,10 +6244,10 @@ var decode = (licenseKey) => {
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
 var useLicense = (licenseKey) => {
-  const valid = useMemo9(() => {
+  const valid = useMemo10(() => {
     return isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.0.1-canary.11"
+      version: "0.0.1"
     });
   }, [licenseKey]);
   return valid;
@@ -6147,7 +6337,6 @@ var InfiniteTableComponent = memo12(function InfiniteTableComponent2() {
     headerHeightCSSVar
   } = componentState;
   const { columnShifts, bodySize } = componentState;
-  const className = join(InfiniteTableClassName, columnShifts ? `${InfiniteTableClassName}--shifting` : "", domProps == null ? void 0 : domProps.className);
   const {
     pinnedStartList,
     pinnedEndList,
@@ -6167,6 +6356,7 @@ var InfiniteTableComponent = memo12(function InfiniteTableComponent2() {
     computed
   });
   const licenseValid = useLicense(licenseKey);
+  const className = join(InfiniteTableClassName, columnShifts ? `${InfiniteTableClassName}--shifting` : "", domProps == null ? void 0 : domProps.className, pinnedStartList ? `${InfiniteTableClassName}--has-pinned-start` : null, pinnedEndList ? `${InfiniteTableClassName}--has-pinned-end` : null, computed.computedPinnedStartOverflow ? `${InfiniteTableClassName}--has-pinned-start-overflow` : null, computed.computedPinnedEndOverflow ? `${InfiniteTableClassName}--has-pinned-end-overflow` : null);
   return /* @__PURE__ */ createElement32("div", __spreadProps(__spreadValues({
     ref: domRef
   }, domProps), {
@@ -6202,7 +6392,10 @@ function InfiniteTableContextProvider() {
   const computed = useComputed();
   const getComputed = useLatest(computed);
   const getState = useLatest(componentState);
-  globalThis.getState = getState;
+  if (false) {
+    globalThis.getState = getState;
+    globalThis.getComputed = getComputed;
+  }
   const contextValue = {
     componentActions,
     componentState,