@jetbrains/ring-ui 7.0.115 → 8.0.0-beta.2

package/components/table/table-virtualize.js

@@ -0,0 +1,150 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import useEventCallback from '../global/use-event-callback';
+import { useIntersectionObserverHandle } from '../global/intersection-observer-context';
+import styles from './table.css';
+/**
+ * RAF is somewhat too frequent. Most updates happen on virtualization boundaries
+ * within the invisible overscroll area, so they don't require such a high update rate.
+ * Therefore, we throttle with a custom delay.
+ */
+const virtualizationThrottleDelay = 50;
+export function useTableVirtualize({ enabled, length, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }) {
+    const itemsMaterialization = useRef([]);
+    const [virtualItems, setVirtualItems] = useState(() => [
+        {
+            type: 'spacer',
+            from: 0,
+            to: length,
+            height: Array.from({ length }, (_, i) => estimateHeight(i)).reduce((a, b) => a + b, 0),
+            key: `${styles.spacerRow}-0`,
+        },
+    ]);
+    const materializeVisibleSpacerItems = useEventCallback(() => {
+        if (!tableRef.current)
+            return;
+        const containerHeight = scrollerRef?.current?.clientHeight ?? window.innerHeight;
+        for (const spacerRow of tableRef.current.querySelectorAll(`.${styles.spacerRow}`)) {
+            const rect = spacerRow.getBoundingClientRect();
+            const spacerIntersectsLookaheadArea = rect.top < containerHeight + lookaheadPx && rect.bottom > -lookaheadPx;
+            if (!spacerIntersectsLookaheadArea) {
+                continue;
+            }
+            const visibleOffsetStart = Math.max(0, -rect.top);
+            const visibleOffsetEnd = Math.min(rect.height, containerHeight - rect.top);
+            const materializeOffsetStart = visibleOffsetStart - lookaheadPx;
+            const materializeOffsetEnd = visibleOffsetEnd + lookaheadPx;
+            let offsetInSpacer = 0;
+            const from = Number(spacerRow.dataset.from);
+            const to = Number(spacerRow.dataset.to);
+            for (let i = from; i < to; i++) {
+                const itemMaterialization = itemsMaterialization.current[i];
+                const itemHeight = typeof itemMaterialization === 'number' ? itemMaterialization : estimateHeight(i);
+                const itemOffsetStart = offsetInSpacer;
+                const itemOffsetEnd = offsetInSpacer + itemHeight;
+                if (itemOffsetStart < materializeOffsetEnd && itemOffsetEnd > materializeOffsetStart) {
+                    itemsMaterialization.current[i] = true;
+                }
+                else if (itemOffsetStart > materializeOffsetEnd) {
+                    break;
+                }
+                offsetInSpacer += itemHeight;
+            }
+        }
+    });
+    const recomputeVirtualItems = useEventCallback(() => {
+        const newVirtualItems = [];
+        let spacerCounter = 0;
+        for (let i = 0; i < length; i++) {
+            const itemMaterialization = itemsMaterialization.current[i];
+            if (itemMaterialization === true) {
+                newVirtualItems.push({ type: 'rendered', index: i });
+            }
+            else {
+                const lastItemOrSpacer = newVirtualItems[newVirtualItems.length - 1];
+                const lastSpacer = lastItemOrSpacer?.type === 'spacer' ? lastItemOrSpacer : undefined;
+                const height = typeof itemMaterialization === 'number' ? itemMaterialization : estimateHeight(i);
+                if (lastSpacer) {
+                    lastSpacer.to = i + 1;
+                    lastSpacer.height += height;
+                }
+                else {
+                    newVirtualItems.push({
+                        type: 'spacer',
+                        from: i,
+                        to: i + 1,
+                        height,
+                        key: `${styles.spacerRow}-${spacerCounter++}`,
+                    });
+                }
+            }
+        }
+        setVirtualItems(newVirtualItems);
+    });
+    const timerIdRef = useRef(null);
+    const callbacksRef = useRef(null);
+    const throttle = useEventCallback((...callbacks) => {
+        if (timerIdRef.current != null) {
+            callbacks.forEach(cb => {
+                callbacksRef.current.delete(cb);
+                callbacksRef.current.add(cb);
+            });
+            return;
+        }
+        callbacksRef.current = new Set(callbacks);
+        timerIdRef.current = window.setTimeout(() => {
+            callbacksRef.current.forEach(cb => cb());
+            timerIdRef.current = null;
+            callbacksRef.current = null;
+        }, virtualizationThrottleDelay);
+    });
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const scroller = scrollerRef?.current;
+        let lastHandledScrollTop = -Infinity;
+        let lastHandledHeight = -Infinity;
+        let lastHandledWidth = -Infinity;
+        function handleViewportChange() {
+            const scrollTop = scroller ? scroller.scrollTop : window.scrollY;
+            const height = scroller ? scroller.clientHeight : window.innerHeight;
+            const width = scroller ? scroller.clientWidth : window.innerWidth;
+            if (Math.abs(scrollTop - lastHandledScrollTop) >= minScrollAndResizeDeltaPx ||
+                Math.abs(height - lastHandledHeight) >= minScrollAndResizeDeltaPx ||
+                Math.abs(width - lastHandledWidth) >= minScrollAndResizeDeltaPx) {
+                lastHandledScrollTop = scrollTop;
+                lastHandledHeight = height;
+                lastHandledWidth = width;
+                throttle(materializeVisibleSpacerItems, recomputeVirtualItems);
+            }
+        }
+        const scrollTarget = scroller ?? window;
+        scrollTarget.addEventListener('scroll', handleViewportChange, { passive: true });
+        const resizeObserver = new ResizeObserver(handleViewportChange);
+        const resizeTarget = scroller ?? document.documentElement;
+        resizeObserver.observe(resizeTarget);
+        handleViewportChange();
+        return () => {
+            scrollTarget.removeEventListener('scroll', handleViewportChange);
+            resizeObserver.unobserve(resizeTarget);
+            resizeObserver.disconnect();
+        };
+    }, [enabled, materializeVisibleSpacerItems, minScrollAndResizeDeltaPx, recomputeVirtualItems, scrollerRef, throttle]);
+    const intersectionObserverHandle = useIntersectionObserverHandle(scrollerRef, scrollerRef ? retentionMarginPx : undefined, !scrollerRef ? retentionMarginPx : undefined);
+    const collapseItemIntoSpacer = useEventCallback((index, height) => {
+        if (!enabled)
+            return;
+        itemsMaterialization.current[index] = height;
+        throttle(recomputeVirtualItems);
+    });
+    const allVisibleVirtualItems = useMemo(() => Array.from({ length: enabled ? 0 : length }, (_, index) => ({ type: 'rendered', index })), [enabled, length]);
+    return {
+        virtualItems: enabled ? virtualItems : allVisibleVirtualItems,
+        intersectionObserverHandle,
+        collapseItemIntoSpacer,
+    };
+}
+export function SpacerRow({ spacer: { from, to, height }, colSpan }) {
+    return (<tr className={styles.spacerRow} data-from={from} data-to={to}>
+      <td className={styles.spacerCell} colSpan={colSpan} style={{ height }}/>
+    </tr>);
+}

package/components/table/table.css

@@ -1,260 +1,137 @@
 @import '../global/variables.css';
 
-.tableWrapper {
-  --ring-table-compensate: 2px;
-  --ring-table-compensated: calc(calc(4 * var(--ring-unit)) - var(--ring-table-compensate));
-  --ring-table-top: -3px;
-
-  position: relative;
-  font-variant-numeric: var(--ring-font-variant-numeric);
-}
-
 .table {
   width: 100%;
 
-  border-spacing: 0;
+  border-collapse: collapse;
+  border-style: none;
 }
 
-.userSelectNone {
-  user-select: none;
+.headerRow {
+  border-bottom: 1px solid var(--ring-line-color);
 }
 
 .headerCell {
-  composes: font-smaller-lower from '../global/global.css';
+  position: relative;
 
-  box-sizing: border-box;
-  height: calc(var(--ring-unit) * 3);
-  padding-right: calc(var(--ring-unit) * 5);
+  padding: calc(var(--ring-unit) * 0.75) var(--ring-unit);
+
+  transition: background-color var(--ring-fast-ease), border-color var(--ring-fast-ease);
 
   text-align: left;
-  white-space: nowrap;
 
   color: var(--ring-secondary-color);
+  border-left: 1px solid transparent;
 
+  font-size: var(--ring-font-size-smaller);
   font-weight: normal;
-}
-
-.headerCell:first-child {
-  padding-left: calc(var(--ring-unit) * 4);
-}
-
-.headerCell:last-child {
-  width: 100%;
-  padding-right: calc(var(--ring-unit) * 4);
-}
-
-.headerCell:first-child:only-child {
-  width: initial;
-  max-width: none;
-}
-
-.headerCell.headerCellSorted {
-  font-weight: var(--ring-font-weight-bold);
-}
 
-.headerCell.headerCellSortable {
-  cursor: pointer;
-}
+  &:last-child {
+    border-right: 1px solid transparent;
+  }
 
-.headerCell .sorter {
-  position: absolute;
-  top: 5px;
+  &:hover {
+    border-left-color: var(--ring-line-color);
+    background-color: var(--ring-grey-container-light-color);
 
-  display: none;
+    &:last-child {
+      border-right-color: var(--ring-line-color);
+    }
 
-  margin-left: 5px;
-
-  user-select: none;
+    & + .headerCell {
+      border-left-color: var(--ring-line-color);
+    }
+  }
 }
 
-.headerCell.headerCellSortable .sorter {
-  display: inline-block;
-}
-
-.sortedUp .icon {
-  transform: rotate(180deg);
-  transform-origin: center 44%;
-}
-
-.caption {
-  padding-top: var(--ring-unit);
-  padding-bottom: 6px;
-
-  color: var(--ring-text-color);
-  border-bottom: 0;
-
-  font-size: var(--ring-font-size);
-  font-weight: var(--ring-font-weight-bold);
-  line-height: var(--ring-line-height-lower);
-}
-
-.tableHead::after {
-  position: absolute;
-
-  width: 100%;
-
-  height: 1px;
-
-  content: '';
+.spacerRow {
+  margin: 0;
+  padding: 0;
 
-  background-color: var(--ring-line-color);
+  border: 0;
 }
 
-.subHeaderSticky {
-  position: sticky;
-
-  z-index: var(--ring-fixed-z-index);
-  top: 0;
+.spacerCell {
+  margin: 0;
+  padding: 0;
 
-  background-color: rgba(var(--ring-content-background-components), 0.9);
+  border: 0;
 }
 
 .row {
-  outline: none;
+  border-bottom: 1px solid var(--ring-line-color);
 
-  line-height: var(--ring-table-compensated);
+  &:focus {
+    border-radius: var(--ring-border-radius);
+    outline: 2px solid var(--ring-button-focus-border-color);
+  }
 }
 
-/* stylelint-disable-next-line selector-max-specificity */
-.table:not(.disabledHover) .row:hover {
-  background-color: var(--ring-hover-background-color);
-}
+.clickableRow {
+  cursor: pointer;
 
-.rowSelected {
-  background-color: var(--ring-selected-background-color);
-}
+  transition: background-color var(--ring-fast-ease);
 
-.rowFocused {
-  background-color: var(--ring-hover-background-color);
-}
-/* stylelint-disable-next-line selector-max-specificity */
-.rowFocused .cell:nth-child(1) {
-  box-shadow: inset 2px 0 var(--ring-main-color);
+  &:not(.selectedRow):hover {
+    background-color: var(--ring-hover-background-color);
+  }
 }
 
-.loadingOverlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background-color: var(--ring-table-loader-background-color);
+.selectedRow {
+  background-color: var(--ring-selected-background-color);
 }
 
 .cell {
-  composes: ellipsis from '../global/global.css';
-
-  box-sizing: content-box;
-
-  min-width: 0;
-
-  height: calc(4 * var(--ring-unit));
-  padding: 0;
-  padding-right: calc(var(--ring-unit) * 5);
-
-  color: var(--ring-text-color);
-}
-
-.cell:first-child {
-  padding-left: calc(var(--ring-unit) * 4);
+  padding: var(--ring-unit);
 }
 
-.cell:last-child {
-  width: 100%;
-
-  /* Markup hack, allows cell to have content which is wider than cell and collapses it */
-
-  max-width: 0;
-  padding-right: calc(var(--ring-unit) * 4);
-}
-
-.wideFirstColumn .cell:first-child {
-  min-width: calc(var(--ring-unit) * 37);
-  max-width: calc(var(--ring-unit) * 77);
-}
-
-.cell:first-child:only-child {
-  width: initial;
-  max-width: none;
-}
+.headerButton {
+  margin: unset;
+  padding: unset;
 
-.cellUnlimited {
-  width: 100%;
-}
-
-.cellRight {
-  text-align: right;
-}
-
-.metaColumn {
-  position: relative;
-
-  float: left;
-
-  height: 16px;
-  padding-right: var(--ring-table-compensate);
-}
-
-.metaColumn.headerMetaColumn {
-  padding-top: 1px;
-}
-
-.dragHandle {
-  top: var(--ring-table-top);
-  left: calc(-2 * var(--ring-unit));
+  cursor: pointer;
 
-  cursor: grab;
+  transition: color var(--ring-fast-ease);
+  text-align: unset;
 
-  opacity: 0;
-}
+  color: unset;
+  border: unset;
+  background: unset;
 
-/* override button */
-.dragHandle.dragHandle {
-  position: absolute;
+  font: unset;
 
-  height: calc(calc(4 * var(--ring-unit)) - var(--ring-table-top));
-  padding: 0;
-}
+  &:hover {
+    color: var(--ring-main-hover-color);
+  }
 
-.dragHandle.visibleDragHandle,
-.row:hover .dragHandle {
-  opacity: 1;
+  &:focus-visible {
+    border-radius: 2px;
+    outline: 2px solid var(--ring-button-focus-border-color);
+  }
 }
 
-.rowCollapseExpandButton {
-  padding-right: calc(var(--ring-unit) / 2);
-  padding-left: 7px;
-}
+.deleteColumnButton {
+  float: right;
 
-.draggingRow {
-  z-index: var(--ring-overlay-z-index);
+  pointer-events: none;
 
-  background-color: var(--ring-hover-background-color);
-}
-
-.draggingRow .dragHandle {
-  cursor: grabbing;
+  color: transparent;
 
-  opacity: 1;
 }
 
-.draggingRow .dragHandle svg {
-  color: var(--ring-main-color);
-}
+.headerCell:hover .deleteColumnButton {
+  pointer-events: all;
 
-.draggingTable {
-  z-index: var(--ring-overlay-z-index);
+  color: unset;
 
-  border-spacing: 0;
+  /* stylelint-disable-next-line selector-max-specificity */
+  &:hover {
+    color: var(--ring-main-hover-color);
+  }
 }
 
-.tableMessage {
-  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
+.deleteColumnButton:focus-within {
+  pointer-events: all;
 
-  color: var(--ring-secondary-color);
+  color: var(--ring-main-hover-color);
 }