@kne/table-page 0.1.3 → 0.1.5

package/dist/index.js

@@ -1082,7 +1082,7 @@ const computeColumnsDisplay = ({
 computeColumnsValue.computeDisplay = computeDisplay;
 computeColumnsValue.computeColumnsDisplay = computeColumnsDisplay;
 
-var style$5 = {"table":"kne-table-page_lZgIW","tableView":"kne-table-page_fUw6j","grid":"kne-table-page_JlDmf","header-cell":"kne-table-page_P-ebv","col-content":"kne-table-page_HT5Rr","body-row":"kne-table-page_Z6mVv","col":"kne-table-page_KNy4z","body-cell":"kne-table-page_BSOzz","body":"kne-table-page_9qon1","is-selected-all":"kne-table-page_f2i1e","is-selected":"kne-table-page_n3V6m","is-disabled":"kne-table-page_AfmkR","col-width-based":"kne-table-page_ZvnDi","col-width-fill":"kne-table-page_cV7PE","single-checked":"kne-table-page_9UAoL","col-fixed":"kne-table-page_aB-1c","empty":"kne-table-page_SRI8Q"};
+var style$5 = {"table":"kne-table-page_lZgIW","header":"kne-table-page_d1qN5","col":"kne-table-page_KNy4z","tableView":"kne-table-page_fUw6j","grid":"kne-table-page_JlDmf","header-cell":"kne-table-page_P-ebv","col-content":"kne-table-page_HT5Rr","body-row":"kne-table-page_Z6mVv","body-cell":"kne-table-page_BSOzz","body":"kne-table-page_9qon1","is-selected-all":"kne-table-page_f2i1e","is-selected":"kne-table-page_n3V6m","is-disabled":"kne-table-page_AfmkR","col-width-based":"kne-table-page_ZvnDi","col-width-fill":"kne-table-page_cV7PE","single-checked":"kne-table-page_9UAoL","col-fixed":"kne-table-page_aB-1c","empty":"kne-table-page_SRI8Q"};
 
 var style$4 = {"table":"kne-table-page_awa1L","is-selected-all":"kne-table-page_692q3","is-selected":"kne-table-page_IWgjl","is-disabled":"kne-table-page_YUG4k","has-summary":"kne-table-page_Cb-du","has-group-header":"kne-table-page_7qTC5","is-sticky":"kne-table-page_jGzIR","is-sticky-scroll-y":"kne-table-page_P6lxG","is-sticky-viewport":"kne-table-page_Kr-p6","table-cell":"kne-table-page_HPmr3","selection-col":"kne-table-page_D7YhS","radio-col":"kne-table-page_df9z3","is-computed":"kne-table-page_ZA1Je","is-resize":"kne-table-page_CA0uL","column-resize-guide":"kne-table-page_JARA2"};
 
@@ -2094,7 +2094,251 @@ const getColumnEllipsis = column => {
   return typeof column.ellipsis === 'object' ? column.ellipsis : true;
 };
 
-const _excluded$2 = ["className", "dataSource", "columns", "rowKey", "rowSelection", "valueIsEmpty", "emptyIsPlaceholder", "placeholder", "empty", "onRowSelect", "render", "context", "sticky", "stickyOffset", "getStickyContainer", "headerStyle", "pagination", "sortRender", "name", "controllerOpen", "tableServerApis", "scroll", "summary"],
+const parsePixelValue = value => {
+  const num = parseFloat(value);
+  return Number.isNaN(num) ? 0 : num;
+};
+const isDocumentScrollContainer = container => {
+  return !container || container === document.body || container === document.documentElement || container === document.scrollingElement;
+};
+const normalizeScrollTopInsetCSSValue = value => {
+  if (value == null) {
+    return undefined;
+  }
+  if (typeof value === 'number') {
+    return `${value}px`;
+  }
+  return String(value);
+};
+const resolveScrollTopInset = (scrollTopInset, stickyOffset) => scrollTopInset ?? stickyOffset;
+const parseInsetPixels = (inset, element) => {
+  if (inset == null) {
+    return 0;
+  }
+  if (typeof inset === 'number') {
+    return inset;
+  }
+  if (typeof inset === 'string') {
+    const trimmed = inset.trim();
+    if (trimmed.endsWith('px')) {
+      return parsePixelValue(trimmed);
+    }
+    const variableMatch = trimmed.match(/var\(\s*(--[^,\s)]+)/);
+    if (variableMatch) {
+      return readCssVariableLength(element, variableMatch[1], '0px');
+    }
+  }
+  return 0;
+};
+const readScrollTopInsetPixels = element => {
+  const fromVar = readCssVariableLength(element, '--scroll-top-inset', '0px') || readCssVariableLength(element, '--sticky-offset', '0px') || readCssVariableLength(element, '--nav-height', '0px');
+  return fromVar;
+};
+const getViewportRect = () => {
+  const visualViewport = window.visualViewport;
+  if (visualViewport) {
+    return {
+      top: visualViewport.offsetTop,
+      bottom: visualViewport.offsetTop + visualViewport.height,
+      left: visualViewport.offsetLeft,
+      right: visualViewport.offsetLeft + visualViewport.width,
+      height: visualViewport.height
+    };
+  }
+  return {
+    top: 0,
+    bottom: window.innerHeight,
+    left: 0,
+    right: window.innerWidth,
+    height: window.innerHeight
+  };
+};
+const getTableElement = root => {
+  if (!root) {
+    return null;
+  }
+  return root.querySelector('.info-page-table') || root;
+};
+const getScrollAnchorElement = (root, {
+  preferToolbar = false
+} = {}) => {
+  if (!root) {
+    return null;
+  }
+  if (preferToolbar) {
+    return root.querySelector('.table-page-toolbar-section') || root.querySelector('.table-with-toolbar') || getTableElement(root);
+  }
+  return getTableElement(root);
+};
+const readCssVariableLength = (element, variableName, fallback = '0px') => {
+  if (typeof document === 'undefined') {
+    return 0;
+  }
+  const host = element || document.documentElement;
+  const probe = document.createElement('div');
+  probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;height:0;width:0;overflow:hidden;';
+  probe.style.marginTop = `var(${variableName}, ${fallback})`;
+  host.appendChild(probe);
+  const value = parsePixelValue(getComputedStyle(probe).marginTop);
+  host.removeChild(probe);
+  return value;
+};
+const resolveScrollContainer = (element, getScrollContainer) => {
+  const explicitContainer = typeof getScrollContainer === 'function' ? getScrollContainer() : null;
+  if (explicitContainer) {
+    return explicitContainer;
+  }
+  let parent = element?.parentElement;
+  while (parent) {
+    const {
+      overflowY
+    } = getComputedStyle(parent);
+    if (/(auto|scroll|overlay)/.test(overflowY) && parent.scrollHeight > parent.clientHeight + 1) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return document.scrollingElement || document.documentElement;
+};
+const scrollToElement = (element, {
+  offsetTop = 0,
+  getScrollContainer
+} = {}) => {
+  const scrollContainer = resolveScrollContainer(element, getScrollContainer);
+  const targetRect = element.getBoundingClientRect();
+  if (scrollContainer === document.scrollingElement || scrollContainer === document.documentElement || scrollContainer === document.body) {
+    const scrollTop = window.pageYOffset + targetRect.top - offsetTop;
+    window.scrollTo({
+      top: Math.max(0, scrollTop),
+      behavior: 'auto'
+    });
+    return;
+  }
+  const containerRect = scrollContainer.getBoundingClientRect();
+  const nextScrollTop = scrollContainer.scrollTop + targetRect.top - containerRect.top - offsetTop;
+  scrollContainer.scrollTo({
+    top: Math.max(0, nextScrollTop),
+    behavior: 'auto'
+  });
+};
+const scrollAnchorIntoView = (root, {
+  getScrollContainer,
+  preferToolbar = false
+} = {}) => {
+  const target = getScrollAnchorElement(root, {
+    preferToolbar
+  });
+  if (!target) {
+    return;
+  }
+  const offsetTop = readScrollTopInsetPixels(target);
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      if (isTopEdgeInViewport(target, offsetTop, getScrollContainer)) {
+        return;
+      }
+      scrollToElement(target, {
+        offsetTop,
+        getScrollContainer
+      });
+    });
+  });
+};
+const getTableScrollElement = root => {
+  if (!root) {
+    return null;
+  }
+  return root.querySelector('.ant-table-body') || root.querySelector('.ant-table-content');
+};
+const getElementViewportState = element => {
+  if (!element) {
+    return {
+      isBottomInViewport: true,
+      isPartiallyInViewport: false,
+      isTopInViewport: true,
+      rect: null,
+      viewport: getViewportRect()
+    };
+  }
+  const rect = element.getBoundingClientRect();
+  const viewport = getViewportRect();
+  return {
+    isBottomInViewport: rect.bottom > viewport.top && rect.bottom <= viewport.bottom,
+    isPartiallyInViewport: rect.top < viewport.bottom && rect.bottom > viewport.top,
+    isTopInViewport: rect.top >= viewport.top && rect.top < viewport.bottom,
+    rect,
+    viewport
+  };
+};
+const isTopEdgeInViewport = (element, scrollMarginTop = 0, getScrollContainer) => {
+  if (!element) {
+    return true;
+  }
+  const rect = element.getBoundingClientRect();
+  const explicitContainer = typeof getScrollContainer === 'function' ? getScrollContainer() : null;
+  if (!isDocumentScrollContainer(explicitContainer)) {
+    const containerRect = explicitContainer.getBoundingClientRect();
+    const viewportTop = containerRect.top + scrollMarginTop;
+    return rect.top >= viewportTop && rect.top < containerRect.bottom;
+  }
+  const {
+    isTopInViewport,
+    viewport
+  } = getElementViewportState(element);
+  if (!rect) {
+    return true;
+  }
+  const viewportTop = viewport.top + scrollMarginTop;
+  return rect.top >= viewportTop && rect.top < viewport.bottom;
+};
+const shouldShowFloatingScrollbar = (scrollEl, viewportState, getScrollContainer) => {
+  if (!scrollEl || scrollEl.scrollWidth <= scrollEl.clientWidth + 1) {
+    return false;
+  }
+  const explicitContainer = typeof getScrollContainer === 'function' ? getScrollContainer() : null;
+  if (!isDocumentScrollContainer(explicitContainer)) {
+    const rect = scrollEl.getBoundingClientRect();
+    const containerRect = explicitContainer.getBoundingClientRect();
+    return rect.top < containerRect.bottom && rect.bottom > containerRect.bottom;
+  }
+  const state = viewportState || getElementViewportState(scrollEl);
+  if (!state.isPartiallyInViewport) {
+    return false;
+  }
+  return !state.isBottomInViewport;
+};
+const observeViewportIntersection = (element, onChange) => {
+  if (!element) {
+    return () => {};
+  }
+  const notify = entry => {
+    onChange(getElementViewportState(element));
+  };
+  const observer = new IntersectionObserver(([entry]) => {
+    notify();
+  }, {
+    root: null,
+    threshold: [0, 0.01, 0.25, 0.5, 0.75, 1]
+  });
+  observer.observe(element);
+  const handleViewportChange = () => {
+    notify();
+  };
+  window.addEventListener('scroll', handleViewportChange, true);
+  window.addEventListener('resize', handleViewportChange);
+  window.visualViewport?.addEventListener('resize', handleViewportChange);
+  window.visualViewport?.addEventListener('scroll', handleViewportChange);
+  notify();
+  return () => {
+    observer.disconnect();
+    window.removeEventListener('scroll', handleViewportChange, true);
+    window.removeEventListener('resize', handleViewportChange);
+    window.visualViewport?.removeEventListener('resize', handleViewportChange);
+    window.visualViewport?.removeEventListener('scroll', handleViewportChange);
+  };
+};
+
+const _excluded$2 = ["className", "dataSource", "columns", "rowKey", "rowSelection", "valueIsEmpty", "emptyIsPlaceholder", "placeholder", "empty", "onRowSelect", "render", "context", "sticky", "scrollTopInset", "stickyOffset", "getStickyContainer", "headerStyle", "pagination", "sortRender", "name", "controllerOpen", "tableServerApis", "scroll", "summary"],
   _excluded2$1 = ["getContainer"];
 const mapJustifyToAlign = justify => {
   if (justify === 'center') {
@@ -2163,6 +2407,7 @@ const Table = p => {
     render = props.render,
     context = props.context,
     sticky = props.sticky,
+    scrollTopInset = props.scrollTopInset,
     stickyOffset = props.stickyOffset,
     getStickyContainer = props.getStickyContainer,
     headerStyle = props.headerStyle,
@@ -2413,6 +2658,20 @@ const Table = p => {
     } : {}, scroll);
   }, [hasFixedColumn, controllerOpen, totalWidth, tableWidth, scroll]);
   const hasScrollY = (scroll == null ? void 0 : scroll.y) != null && (scroll == null ? void 0 : scroll.y) !== false;
+  const isStickyViewport = !!sticky && !hasScrollY;
+  const resolvedScrollTopInset = resolveScrollTopInset(scrollTopInset, stickyOffset);
+  const stickyGetContainer = react.useMemo(() => {
+    if (!getStickyContainer || hasScrollY) {
+      return undefined;
+    }
+    return () => getStickyContainer() || window;
+  }, [getStickyContainer, hasScrollY]);
+  const parsedScrollTopInset = react.useMemo(() => {
+    if (!sticky || hasScrollY) {
+      return 0;
+    }
+    return parseInsetPixels(resolvedScrollTopInset, tableRef.current);
+  }, [sticky, hasScrollY, resolvedScrollTopInset, isLayout, dataSource]);
   const antdSticky = react.useMemo(() => {
     if (!sticky) {
       return undefined;
@@ -2425,19 +2684,20 @@ const Table = p => {
       }, scrollSticky);
     }
     return Object.assign({
-      offsetHeader: 0
-    }, config, getStickyContainer ? {
-      getContainer: getStickyContainer
+      offsetHeader: parsedScrollTopInset
+    }, config, stickyGetContainer ? {
+      getContainer: stickyGetContainer
     } : null);
-  }, [sticky, getStickyContainer, hasScrollY]);
+  }, [sticky, stickyGetContainer, hasScrollY, parsedScrollTopInset]);
   const tableWrapperStyle = react.useMemo(() => {
-    if (!sticky || stickyOffset == null || hasScrollY) {
+    const cssValue = normalizeScrollTopInsetCSSValue(resolvedScrollTopInset);
+    if (!cssValue) {
       return undefined;
     }
     return {
-      '--sticky-offset': stickyOffset
+      '--scroll-top-inset': cssValue
     };
-  }, [sticky, stickyOffset, hasScrollY]);
+  }, [resolvedScrollTopInset]);
   const tableElement = /*#__PURE__*/jsxRuntime.jsx(antd.Table, _extends({}, others, {
     showHeader: true,
     dataSource: dataSource,
@@ -2484,14 +2744,14 @@ const Table = p => {
   }));
   const wrappedTable = /*#__PURE__*/jsxRuntime.jsxs("div", {
     ref: tableRef,
-    className: classnames__default["default"](style$5['table'], style$4['table'], 'info-page-table', className, {
+    className: classnames__default["default"](style$4['table'], 'info-page-table', className, {
       [style$4['is-resize']]: currentMoveColumnIndex !== null,
       [style$4['is-computed']]: isLayout,
       [style$4['has-group-header']]: hasGroupHeader,
       [style$4['has-summary']]: typeof summary === 'function',
       [style$4['is-sticky']]: !!sticky,
       [style$4['is-sticky-scroll-y']]: !!sticky && hasScrollY,
-      [style$4['is-sticky-viewport']]: !!sticky && !hasScrollY
+      [style$4['is-sticky-viewport']]: isStickyViewport
     }),
     style: tableWrapperStyle,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -2879,134 +3139,47 @@ TableView.useSelectedRow = useSelectedRow;
 TableView.useSort = useSort;
 TableView.sortDataSource = useSort.sortDataSource;
 
-var style$1 = {"table-page":"kne-table-page_ut9rJ","table-content":"kne-table-page_dxN6N","table-with-toolbar":"kne-table-page_sf06r","table-in-toolbar":"kne-table-page_sawIT","pagination":"kne-table-page_DSTEf","total_text":"kne-table-page_pJhKr","floating-scrollbar":"kne-table-page_iu8E1","floating-scrollbar-thumb":"kne-table-page_RjZsu","is-moving":"kne-table-page_y-4Ou"};
-
-const parsePixelValue = value => {
-  const num = parseFloat(value);
-  return Number.isNaN(num) ? 0 : num;
-};
-const getViewportRect = () => {
-  const visualViewport = window.visualViewport;
-  if (visualViewport) {
-    return {
-      top: visualViewport.offsetTop,
-      bottom: visualViewport.offsetTop + visualViewport.height,
-      left: visualViewport.offsetLeft,
-      right: visualViewport.offsetLeft + visualViewport.width,
-      height: visualViewport.height
-    };
-  }
-  return {
-    top: 0,
-    bottom: window.innerHeight,
-    left: 0,
-    right: window.innerWidth,
-    height: window.innerHeight
-  };
-};
-const getTableElement = root => {
-  if (!root) {
-    return null;
-  }
-  return root.querySelector('.info-page-table') || root;
-};
-const getTableScrollElement = root => {
-  if (!root) {
-    return null;
-  }
-  return root.querySelector('.ant-table-body') || root.querySelector('.ant-table-content');
-};
-const getElementViewportState = element => {
-  if (!element) {
-    return {
-      isBottomInViewport: true,
-      isPartiallyInViewport: false,
-      isTopInViewport: true,
-      rect: null,
-      viewport: getViewportRect()
-    };
-  }
-  const rect = element.getBoundingClientRect();
-  const viewport = getViewportRect();
-  return {
-    isBottomInViewport: rect.bottom > viewport.top && rect.bottom <= viewport.bottom,
-    isPartiallyInViewport: rect.top < viewport.bottom && rect.bottom > viewport.top,
-    isTopInViewport: rect.top >= viewport.top && rect.top < viewport.bottom,
-    rect,
-    viewport
-  };
-};
-const isTopEdgeInViewport = (element, scrollMarginTop = 0) => {
-  const {
-    isTopInViewport,
-    rect,
-    viewport
-  } = getElementViewportState(element);
-  if (!rect) {
-    return true;
-  }
-  const viewportTop = viewport.top + scrollMarginTop;
-  return rect.top >= viewportTop && rect.top < viewport.bottom;
-};
-const shouldShowFloatingScrollbar = (scrollEl, viewportState) => {
-  if (!scrollEl || scrollEl.scrollWidth <= scrollEl.clientWidth + 1) {
-    return false;
-  }
-  const state = viewportState || getElementViewportState(scrollEl);
-  if (!state.isPartiallyInViewport) {
-    return false;
-  }
-  return !state.isBottomInViewport;
-};
-const observeViewportIntersection = (element, onChange) => {
-  if (!element) {
-    return () => {};
-  }
-  const notify = entry => {
-    onChange(getElementViewportState(element));
-  };
-  const observer = new IntersectionObserver(([entry]) => {
-    notify();
-  }, {
-    root: null,
-    threshold: [0, 0.01, 0.25, 0.5, 0.75, 1]
-  });
-  observer.observe(element);
-  const handleViewportChange = () => {
-    notify();
-  };
-  window.addEventListener('scroll', handleViewportChange, true);
-  window.addEventListener('resize', handleViewportChange);
-  window.visualViewport?.addEventListener('resize', handleViewportChange);
-  window.visualViewport?.addEventListener('scroll', handleViewportChange);
-  notify();
-  return () => {
-    observer.disconnect();
-    window.removeEventListener('scroll', handleViewportChange, true);
-    window.removeEventListener('resize', handleViewportChange);
-    window.visualViewport?.removeEventListener('resize', handleViewportChange);
-    window.visualViewport?.removeEventListener('scroll', handleViewportChange);
-  };
-};
+var style$1 = {"table-page":"kne-table-page_ut9rJ","table-content":"kne-table-page_dxN6N","table-with-toolbar":"kne-table-page_sf06r","has-summary":"kne-table-page_IRdzb","table-in-toolbar":"kne-table-page_sawIT","pagination":"kne-table-page_DSTEf","total_text":"kne-table-page_pJhKr","floating-scrollbar":"kne-table-page_iu8E1","floating-scrollbar-embedded":"kne-table-page_PIv-C","floating-scrollbar-thumb":"kne-table-page_RjZsu","is-moving":"kne-table-page_y-4Ou"};
 
 const BAR_HEIGHT = 15;
 const THUMB_MARGIN = 2;
-const computeBarMetrics = (scrollEl, viewportState) => {
+const computeBarMetrics = (scrollEl, viewportState, getPortalContainer) => {
   const rect = scrollEl.getBoundingClientRect();
-  const viewport = getViewportRect();
+  const portalContainer = typeof getPortalContainer === 'function' ? getPortalContainer() : null;
+  const useEmbeddedPlacement = !isDocumentScrollContainer(portalContainer);
   const trackWidth = rect.width;
   const thumbWidth = Math.max(trackWidth * scrollEl.clientWidth / scrollEl.scrollWidth - THUMB_MARGIN * 2, 24);
   const maxThumbOffset = trackWidth - thumbWidth - THUMB_MARGIN * 2;
   const scrollRatio = scrollEl.scrollWidth > scrollEl.clientWidth ? scrollEl.scrollLeft / (scrollEl.scrollWidth - scrollEl.clientWidth) : 0;
+  const visible = shouldShowFloatingScrollbar(scrollEl, viewportState, getPortalContainer);
+  if (useEmbeddedPlacement) {
+    const containerRect = portalContainer.getBoundingClientRect();
+    return {
+      placement: 'embedded',
+      offsetLeft: Math.round(rect.left - containerRect.left),
+      width: Math.round(trackWidth),
+      thumbWidth,
+      thumbLeft: THUMB_MARGIN + maxThumbOffset * scrollRatio,
+      visible
+    };
+  }
+  const viewport = getViewportRect();
   return {
-    left: rect.left,
-    width: trackWidth,
+    placement: 'fixed',
+    left: Math.round(rect.left),
+    width: Math.round(trackWidth),
     bottom: window.innerHeight - viewport.bottom,
     thumbWidth,
     thumbLeft: THUMB_MARGIN + maxThumbOffset * scrollRatio,
-    visible: shouldShowFloatingScrollbar(scrollEl, viewportState)
+    visible
   };
 };
+const metricsEqual = (prev, next) => {
+  if (!prev || !next) {
+    return prev === next;
+  }
+  return prev.placement === next.placement && prev.visible === next.visible && prev.width === next.width && prev.thumbWidth === next.thumbWidth && prev.thumbLeft === next.thumbLeft && (prev.placement === 'embedded' ? prev.offsetLeft === next.offsetLeft : prev.left === next.left && prev.bottom === next.bottom);
+};
 const FloatingScrollBar = ({
   metrics,
   onThumbDrag,
@@ -3041,10 +3214,18 @@ const FloatingScrollBar = ({
   if (!metrics?.visible) {
     return null;
   }
-  const portalTarget = getPortalContainer?.() || document.body;
+  const portalContainer = typeof getPortalContainer === 'function' ? getPortalContainer() : null;
+  const useEmbeddedPlacement = metrics.placement === 'embedded';
+  const portalTarget = useEmbeddedPlacement && portalContainer ? portalContainer : document.body;
   return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classnames__default["default"](style$1['floating-scrollbar'], 'table-page-floating-scrollbar'),
-    style: {
+    className: classnames__default["default"](style$1['floating-scrollbar'], 'table-page-floating-scrollbar', {
+      [style$1['floating-scrollbar-embedded']]: useEmbeddedPlacement
+    }),
+    style: useEmbeddedPlacement ? {
+      marginLeft: metrics.offsetLeft,
+      width: metrics.width,
+      height: BAR_HEIGHT
+    } : {
       left: metrics.left,
       width: metrics.width,
       height: BAR_HEIGHT,
@@ -3076,6 +3257,7 @@ const HorizontalScroller = /*#__PURE__*/react.forwardRef(({
   const containerRef = react.useRef(null);
   const scrollElRef = react.useRef(null);
   const viewportStateRef = react.useRef(null);
+  const metricsRef = react.useRef(null);
   const setContainerRef = useRefCallback__default["default"](node => {
     containerRef.current = node;
     if (typeof forwardedRef === 'function') {
@@ -3087,10 +3269,16 @@ const HorizontalScroller = /*#__PURE__*/react.forwardRef(({
   const updateMetrics = useRefCallback__default["default"](() => {
     const scrollEl = scrollElRef.current;
     if (!scrollEl) {
+      metricsRef.current = null;
       setMetrics(null);
       return;
     }
-    setMetrics(computeBarMetrics(scrollEl, viewportStateRef.current));
+    const nextMetrics = computeBarMetrics(scrollEl, viewportStateRef.current, getPortalContainer);
+    if (metricsEqual(metricsRef.current, nextMetrics)) {
+      return;
+    }
+    metricsRef.current = nextMetrics;
+    setMetrics(nextMetrics);
   });
   const handleThumbDrag = useRefCallback__default["default"](deltaX => {
     const scrollEl = scrollElRef.current;
@@ -3111,6 +3299,7 @@ const HorizontalScroller = /*#__PURE__*/react.forwardRef(({
     if (!enabled) {
       scrollElRef.current = null;
       viewportStateRef.current = null;
+      metricsRef.current = null;
       setMetrics(null);
       return undefined;
     }
@@ -3121,6 +3310,8 @@ const HorizontalScroller = /*#__PURE__*/react.forwardRef(({
     let scrollEl = null;
     let unobserveViewport = null;
     let contentResizeObserver = null;
+    const portalContainer = typeof getPortalContainer === 'function' ? getPortalContainer() : null;
+    const useEmbeddedPlacement = !isDocumentScrollContainer(portalContainer);
     const detachScrollEl = () => {
       unobserveViewport?.();
       unobserveViewport = null;
@@ -3141,10 +3332,12 @@ const HorizontalScroller = /*#__PURE__*/react.forwardRef(({
       detachScrollEl();
       scrollEl = nextScrollEl;
       scrollElRef.current = scrollEl;
-      unobserveViewport = observeViewportIntersection(scrollEl, state => {
-        viewportStateRef.current = state;
-        updateMetrics();
-      });
+      if (!useEmbeddedPlacement) {
+        unobserveViewport = observeViewportIntersection(scrollEl, state => {
+          viewportStateRef.current = state;
+          updateMetrics();
+        });
+      }
       scrollEl.addEventListener('scroll', updateMetrics, {
         passive: true
       });
@@ -3161,11 +3354,38 @@ const HorizontalScroller = /*#__PURE__*/react.forwardRef(({
     const containerResizeObserver = new ResizeObserver(onLayoutChange);
     containerResizeObserver.observe(root);
     onLayoutChange();
+    const onWindowChange = () => {
+      if (!useEmbeddedPlacement) {
+        updateMetrics();
+      }
+    };
+    if (!useEmbeddedPlacement) {
+      window.addEventListener('scroll', onWindowChange, true);
+      window.addEventListener('resize', onWindowChange);
+      window.visualViewport?.addEventListener('resize', onWindowChange);
+      window.visualViewport?.addEventListener('scroll', onWindowChange);
+    }
+    if (useEmbeddedPlacement && portalContainer) {
+      portalContainer.addEventListener('scroll', updateMetrics, {
+        passive: true
+      });
+      window.addEventListener('resize', updateMetrics);
+    }
     return () => {
       detachScrollEl();
       containerResizeObserver.disconnect();
+      if (!useEmbeddedPlacement) {
+        window.removeEventListener('scroll', onWindowChange, true);
+        window.removeEventListener('resize', onWindowChange);
+        window.visualViewport?.removeEventListener('resize', onWindowChange);
+        window.visualViewport?.removeEventListener('scroll', onWindowChange);
+      }
+      if (useEmbeddedPlacement && portalContainer) {
+        portalContainer.removeEventListener('scroll', updateMetrics);
+        window.removeEventListener('resize', updateMetrics);
+      }
     };
-  }, [enabled, updateMetrics]);
+  }, [enabled, updateMetrics, getPortalContainer]);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       ref: setContainerRef,
@@ -3256,7 +3476,7 @@ const TableToolbar = ({
         'table-page-toolbar-section--has-value': hasValueDisplay
       }),
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: style['table-toolbar'],
+        className: classnames__default["default"](style['table-toolbar'], 'table-page-toolbar'),
         children: [showBatch ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
             className: style['table-toolbar-batch'],
@@ -3323,7 +3543,7 @@ const TableToolbar = ({
   });
 };
 
-const _excluded = ["data", "refresh", "reload", "requestParams", "fetchProps", "isComplete", "loadMore", "send", "dataFormat", "className", "columns", "getColumns", "pagination", "columnRenderProps", "summary", "sticky", "renderType", "horizontalScroller", "getScrollContainer", "filter", "search", "batchActions", "selectedRows", "rowSelection"],
+const _excluded = ["data", "refresh", "reload", "requestParams", "fetchProps", "isComplete", "loadMore", "send", "dataFormat", "className", "columns", "getColumns", "pagination", "columnRenderProps", "summary", "sticky", "scrollTopInset", "stickyOffset", "renderType", "horizontalScroller", "getScrollContainer", "filter", "search", "batchActions", "selectedRows", "rowSelection"],
   _excluded2 = ["pagination", "horizontalScroller", "getScrollContainer"];
 const readPageSize = key => {
   try {
@@ -3344,27 +3564,6 @@ const writePageSize = (key, size) => {
     // ignore quota errors
   }
 };
-const isTableTopInViewport = target => {
-  const scrollMarginTop = parsePixelValue(getComputedStyle(target).scrollMarginTop);
-  return isTopEdgeInViewport(target, scrollMarginTop);
-};
-const scrollTableIntoView = root => {
-  const target = getTableElement(root);
-  if (!target) {
-    return;
-  }
-  requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      if (isTableTopInViewport(target)) {
-        return;
-      }
-      target.scrollIntoView({
-        block: 'start',
-        inline: 'nearest'
-      });
-    });
-  });
-};
 const TABLE_COMPONENTS = {
   Table,
   TableView
@@ -3424,6 +3623,8 @@ const TablePageInnerContent = withLocale(_ref => {
     columnRenderProps = _ref$columnRenderProp === void 0 ? {} : _ref$columnRenderProp,
     summary = _ref.summary,
     sticky = _ref.sticky,
+    scrollTopInset = _ref.scrollTopInset,
+    stickyOffset = _ref.stickyOffset,
     _ref$renderType = _ref.renderType,
     renderType = _ref$renderType === void 0 ? 'Table' : _ref$renderType,
     _ref$horizontalScroll = _ref.horizontalScroller,
@@ -3471,8 +3672,22 @@ const TablePageInnerContent = withLocale(_ref => {
     dataFormat,
     pagination
   }), [data, fetchProps, requestParams, refresh, reload, loadMore, send, dataFormat, pagination]);
+  const hasToolbar = !!(filter != null && (_filter$list = filter.list) != null && _filter$list.length || search && search.name || batchActions && batchActions.length);
+  const resolvedScrollTopInset = resolveScrollTopInset(scrollTopInset, stickyOffset);
+  const scrollTopInsetStyle = react.useMemo(() => {
+    const cssValue = normalizeScrollTopInsetCSSValue(resolvedScrollTopInset);
+    if (!cssValue) {
+      return undefined;
+    }
+    return {
+      '--scroll-top-inset': cssValue
+    };
+  }, [resolvedScrollTopInset]);
   const scrollTable = useRefCallback__default["default"](() => {
-    scrollTableIntoView(tableContentRef.current);
+    scrollAnchorIntoView(tableContentRef.current, {
+      getScrollContainer,
+      preferToolbar: hasToolbar
+    });
   });
   const handleFilterChange = useRefCallback__default["default"](value => {
     if (!isFilterControlled) {
@@ -3526,7 +3741,7 @@ const TablePageInnerContent = withLocale(_ref => {
         })]
       }),
       current: get__default["default"](requestParams, [pagination.paramsType, pagination.currentName], 1),
-      pageSize: Number(get__default["default"](requestParams, [pagination.paramsType, pagination.pageSizeName], pagination.pageSize)) || pagination.pageSize || 20,
+      pageSize: Number(get__default["default"](requestParams, [pagination.paramsType, pagination.pageSizeName], pagination.pageSize)) || pagination.pageSize || 50,
       onChange: handlePaginationChange,
       size: pagination.size,
       hideOnSinglePage: pagination.hideOnSinglePage,
@@ -3535,7 +3750,6 @@ const TablePageInnerContent = withLocale(_ref => {
       pageSizeOptions: pagination.pageSizeOptions
     };
   }, [pagination, formatData.total, requestParams, formatMessage, handlePaginationChange]);
-  const hasToolbar = !!(filter != null && (_filter$list = filter.list) != null && _filter$list.length || search && search.name || batchActions && batchActions.length);
   const batchContext = react.useMemo(() => ({
     data,
     fetchProps,
@@ -3557,6 +3771,7 @@ const TablePageInnerContent = withLocale(_ref => {
     dataSource: formatData.list,
     pagination: false,
     sticky,
+    scrollTopInset: resolvedScrollTopInset,
     getStickyContainer: getScrollContainer,
     className: classnames__default["default"](className, {
       [style$1['table-in-toolbar']]: hasToolbar
@@ -3574,6 +3789,7 @@ const TablePageInnerContent = withLocale(_ref => {
   const tableElement = /*#__PURE__*/jsxRuntime.jsx(TableComponent, _extends({}, tableProps));
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: style$1['table-page'],
+    style: scrollTopInsetStyle,
     children: [/*#__PURE__*/jsxRuntime.jsx(HorizontalScroller, {
       ref: tableContentRef,
       enabled: horizontalScroller && renderType === 'Table',
@@ -3615,12 +3831,13 @@ const TablePage = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
     requestType: 'reload',
     currentName: 'currentPage',
     pageSizeName: 'perPage',
-    pageSize: 20
+    pageSize: 50
   }, pagination);
   const pageSizeKey = (props.name || 'common').toUpperCase() + "_TABLE_PAGE_SIZE";
+  const cachePageSize = pagination.cachePageSize !== false;
   const _useState2 = react.useState(() => {
-      var _readPageSize;
-      return (_readPageSize = readPageSize(pageSizeKey)) != null ? _readPageSize : pagination.pageSize;
+      var _ref3;
+      return (_ref3 = cachePageSize ? readPageSize(pageSizeKey) : null) != null ? _ref3 : pagination.pageSize;
     }),
     pageSize = _useState2[0],
     setPageSize = _useState2[1];
@@ -3647,7 +3864,9 @@ const TablePage = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
       pageSize,
       onShowSizeChange: (current, size) => {
         const nextSize = Number(size);
-        writePageSize(pageSizeKey, nextSize);
+        if (cachePageSize) {
+          writePageSize(pageSizeKey, nextSize);
+        }
         setPageSize(nextSize);
       }
     }),