@kne/table-page 0.1.4 → 0.1.5

package/dist/index.modern.js

@@ -3080,29 +3080,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","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-thumb":"kne-table-page_RjZsu","is-moving":"kne-table-page_y-4Ou"};
+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, getPortalContainer) => {
   const rect = scrollEl.getBoundingClientRect();
   const portalContainer = typeof getPortalContainer === 'function' ? getPortalContainer() : null;
-  const useContainerScroll = !isDocumentScrollContainer(portalContainer);
-  const viewport = getViewportRect();
-  const anchorRect = useContainerScroll ? portalContainer.getBoundingClientRect() : viewport;
+  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,
-    bottom: window.innerHeight - anchorRect.bottom,
+    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, getPortalContainer)
+    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,
@@ -3137,10 +3155,18 @@ const FloatingScrollBar = ({
   if (!(metrics != null && metrics.visible)) {
     return null;
   }
-  const portalTarget = document.body;
+  const portalContainer = typeof getPortalContainer === 'function' ? getPortalContainer() : null;
+  const useEmbeddedPlacement = metrics.placement === 'embedded';
+  const portalTarget = useEmbeddedPlacement && portalContainer ? portalContainer : document.body;
   return /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
-    className: classnames(style$1['floating-scrollbar'], 'table-page-floating-scrollbar'),
-    style: {
+    className: classnames(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,
@@ -3172,6 +3198,7 @@ const HorizontalScroller = /*#__PURE__*/forwardRef(({
   const containerRef = useRef(null);
   const scrollElRef = useRef(null);
   const viewportStateRef = useRef(null);
+  const metricsRef = useRef(null);
   const setContainerRef = useRefCallback(node => {
     containerRef.current = node;
     if (typeof forwardedRef === 'function') {
@@ -3183,10 +3210,16 @@ const HorizontalScroller = /*#__PURE__*/forwardRef(({
   const updateMetrics = useRefCallback(() => {
     const scrollEl = scrollElRef.current;
     if (!scrollEl) {
+      metricsRef.current = null;
       setMetrics(null);
       return;
     }
-    setMetrics(computeBarMetrics(scrollEl, viewportStateRef.current, getPortalContainer));
+    const nextMetrics = computeBarMetrics(scrollEl, viewportStateRef.current, getPortalContainer);
+    if (metricsEqual(metricsRef.current, nextMetrics)) {
+      return;
+    }
+    metricsRef.current = nextMetrics;
+    setMetrics(nextMetrics);
   });
   const handleThumbDrag = useRefCallback(deltaX => {
     const scrollEl = scrollElRef.current;
@@ -3207,6 +3240,7 @@ const HorizontalScroller = /*#__PURE__*/forwardRef(({
     if (!_enabled) {
       scrollElRef.current = null;
       viewportStateRef.current = null;
+      metricsRef.current = null;
       setMetrics(null);
       return undefined;
     }
@@ -3217,6 +3251,8 @@ const HorizontalScroller = /*#__PURE__*/forwardRef(({
     let scrollEl = null;
     let unobserveViewport = null;
     let contentResizeObserver = null;
+    const portalContainer = typeof getPortalContainer === 'function' ? getPortalContainer() : null;
+    const useEmbeddedPlacement = !isDocumentScrollContainer(portalContainer);
     const detachScrollEl = () => {
       var _contentResizeObserve;
       unobserveViewport == null || unobserveViewport();
@@ -3238,10 +3274,12 @@ const HorizontalScroller = /*#__PURE__*/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
       });
@@ -3258,16 +3296,38 @@ const HorizontalScroller = /*#__PURE__*/forwardRef(({
     const containerResizeObserver = new ResizeObserver(onLayoutChange);
     containerResizeObserver.observe(root);
     onLayoutChange();
-    const portalContainer = typeof getPortalContainer === 'function' ? getPortalContainer() : null;
-    if (!isDocumentScrollContainer(portalContainer)) {
+    const onWindowChange = () => {
+      if (!useEmbeddedPlacement) {
+        updateMetrics();
+      }
+    };
+    if (!useEmbeddedPlacement) {
+      var _window$visualViewpor, _window$visualViewpor2;
+      window.addEventListener('scroll', onWindowChange, true);
+      window.addEventListener('resize', onWindowChange);
+      (_window$visualViewpor = window.visualViewport) == null || _window$visualViewpor.addEventListener('resize', onWindowChange);
+      (_window$visualViewpor2 = window.visualViewport) == null || _window$visualViewpor2.addEventListener('scroll', onWindowChange);
+    }
+    if (useEmbeddedPlacement && portalContainer) {
       portalContainer.addEventListener('scroll', updateMetrics, {
         passive: true
       });
+      window.addEventListener('resize', updateMetrics);
     }
     return () => {
       detachScrollEl();
       containerResizeObserver.disconnect();
-      portalContainer == null || portalContainer.removeEventListener('scroll', updateMetrics);
+      if (!useEmbeddedPlacement) {
+        var _window$visualViewpor3, _window$visualViewpor4;
+        window.removeEventListener('scroll', onWindowChange, true);
+        window.removeEventListener('resize', onWindowChange);
+        (_window$visualViewpor3 = window.visualViewport) == null || _window$visualViewpor3.removeEventListener('resize', onWindowChange);
+        (_window$visualViewpor4 = window.visualViewport) == null || _window$visualViewpor4.removeEventListener('scroll', onWindowChange);
+      }
+      if (useEmbeddedPlacement && portalContainer) {
+        portalContainer.removeEventListener('scroll', updateMetrics);
+        window.removeEventListener('resize', updateMetrics);
+      }
     };
   }, [_enabled, updateMetrics, getPortalContainer]);
   return /*#__PURE__*/jsxs(Fragment, {