@jetbrains/ring-ui-built 8.0.0-beta.2 → 8.0.0-beta.4

package/components/table/default-item-renderer.js

@@ -1,236 +1,183 @@
-import { c } from 'react-compiler-runtime';
-import { useRef, useContext, useEffect } from 'react';
+import { c } from 'react/compiler-runtime';
+import { useRef, use } from 'react';
 import classNames from 'classnames';
-import { CollapseItemIntoSpacerContext, TablePropsContext } from './table-const.js';
-import { useIsIntersectingListener } from '../global/intersection-observer-context.js';
-import { TableRow, TableCell } from './table-base.js';
+import { TablePropsContext, ColumnAnimationContext } from './table-const.js';
+import { useComposedRef } from '../global/compose-refs.js';
+import { useItemVirtualization } from './item-virtualization.js';
+import { TableRow, TableCell } from './table-primitives.js';
 import { s as styles } from '../_helpers/table.js';
 import { jsx } from 'react/jsx-runtime';
-import '@jetbrains/icons/unsorted-12px';
-import '@jetbrains/icons/arrow-12px-down';
-import '@jetbrains/icons/arrow-12px-up';
-import '@jetbrains/icons/trash-12px';
-import '../icon/icon.js';
-import 'util-deprecate';
-import '../icon/icon.constants.js';
-import '../_helpers/icon-svg.js';
-import '../global/memoize.js';
+import 'memoize-one';
+import '../global/intersection-observer-context.js';
+import '../internal/virtual-items.js';
+import '../global/schedule-with-cleanup.js';
 
-const INDENT_SIZE = 24;
-/**
- * @see TableProps.renderItem
- */
 function DefaultItemRenderer(t0) {
-  var _userRef;
-  const $ = c(51);
-  if ($[0] !== "68402cdde9f06be4c8d26ab88d5718c4da4a28557eb40dcae73e15c87a598408") {
-    for (let $i = 0; $i < 51; $i += 1) {
+  const $ = c(39);
+  if ($[0] !== "814543263ebfe37ed20c6e2945771deb8a681b9bdb7c32cb1fc590d5f0122c82") {
+    for (let $i = 0; $i < 39; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "68402cdde9f06be4c8d26ab88d5718c4da4a28557eb40dcae73e15c87a598408";
+    $[0] = "814543263ebfe37ed20c6e2945771deb8a681b9bdb7c32cb1fc590d5f0122c82";
   }
   let className;
   let clickable;
   let index;
+  let keyboardFocusable;
   let level;
-  let onBlur;
-  let onKeyDown;
+  let noItemVirtualization;
   let restProps;
+  let selected;
   let userRef;
   if ($[1] !== t0) {
     ({
-      ref: userRef,
       index,
+      keyboardFocusable,
       clickable,
+      selected,
       level,
+      noItemVirtualization,
+      ref: userRef,
       className,
-      onKeyDown,
-      onBlur,
       ...restProps
     } = t0);
     $[1] = t0;
     $[2] = className;
     $[3] = clickable;
     $[4] = index;
-    $[5] = level;
-    $[6] = onBlur;
-    $[7] = onKeyDown;
+    $[5] = keyboardFocusable;
+    $[6] = level;
+    $[7] = noItemVirtualization;
     $[8] = restProps;
-    $[9] = userRef;
+    $[9] = selected;
+    $[10] = userRef;
   } else {
     className = $[2];
     clickable = $[3];
     index = $[4];
-    level = $[5];
-    onBlur = $[6];
-    onKeyDown = $[7];
+    keyboardFocusable = $[5];
+    level = $[6];
+    noItemVirtualization = $[7];
     restProps = $[8];
-    userRef = $[9];
+    selected = $[9];
+    userRef = $[10];
   }
-  const selfRef = useRef(null);
-  const ref = (_userRef = userRef) !== null && _userRef !== void 0 ? _userRef : selfRef;
-  const collapseItemIntoSpacer = useContext(CollapseItemIntoSpacerContext);
+  const localRef = useRef(null);
+  const composedRef = useComposedRef(userRef, localRef);
   let t1;
-  if ($[10] !== collapseItemIntoSpacer || $[11] !== ref) {
-    t1 = isIntersecting => {
-      if (ref.current && !isIntersecting) {
-        collapseItemIntoSpacer(ref.current.getBoundingClientRect().height);
-      }
+  if ($[11] !== noItemVirtualization) {
+    t1 = (t2, _i, t3) => {
+      const [isIntersecting] = t2;
+      const [element] = t3;
+      return isIntersecting === false && !noItemVirtualization && element?.isConnected && !element.contains(document.activeElement) && !element.previousElementSibling?.contains(document.activeElement) && !element.nextElementSibling?.contains(document.activeElement) ? element.getBoundingClientRect().height : undefined;
     };
-    $[10] = collapseItemIntoSpacer;
-    $[11] = ref;
+    $[11] = noItemVirtualization;
     $[12] = t1;
   } else {
     t1 = $[12];
   }
-  useIsIntersectingListener(ref, t1);
-  const {
-    data,
-    columns,
-    selection,
-    isItemKeyboardFocusable,
-    onItemFocus
-  } = useContext(TablePropsContext);
-  const item = data[index];
-  const selected = selection?.isSelected(item);
-  let t2;
-  if ($[13] !== data || $[14] !== index || $[15] !== isItemKeyboardFocusable || $[16] !== onItemFocus || $[17] !== onKeyDown) {
-    t2 = function handleKeyDown(e) {
-      onKeyDown?.(e);
-      if (!e.defaultPrevented && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
-        const step = e.key === "ArrowUp" ? -1 : 1;
-        for (let i = index + step; 0 <= i && i < data.length; i = i + step, i) {
-          if (isItemKeyboardFocusable?.(data[i], i, data)) {
-            onItemFocus?.(data[i], i, data);
-            break;
-          }
-        }
-      }
-    };
-    $[13] = data;
-    $[14] = index;
-    $[15] = isItemKeyboardFocusable;
-    $[16] = onItemFocus;
-    $[17] = onKeyDown;
-    $[18] = t2;
-  } else {
-    t2 = $[18];
-  }
-  const handleKeyDown = t2;
+  const t2 = t1;
   let t3;
-  if ($[19] !== item || $[20] !== selection) {
-    t3 = selection?.isFocused(item);
-    $[19] = item;
-    $[20] = selection;
-    $[21] = t3;
-  } else {
-    t3 = $[21];
-  }
-  const focused = t3;
-  let t4;
-  let t5;
-  if ($[22] !== focused || $[23] !== ref) {
-    t4 = () => {
-      if (focused) {
-        ref.current?.focus();
-      }
+  if ($[13] !== index || $[14] !== t2) {
+    t3 = {
+      index,
+      refs: localRef,
+      onIntersectionChange: t2
     };
-    t5 = [focused, ref];
-    $[22] = focused;
-    $[23] = ref;
-    $[24] = t4;
-    $[25] = t5;
+    $[13] = index;
+    $[14] = t2;
+    $[15] = t3;
   } else {
-    t4 = $[24];
-    t5 = $[25];
+    t3 = $[15];
+  }
+  useItemVirtualization(t3);
+  const tableProps = use(TablePropsContext);
+  if (!tableProps) {
+    return null;
   }
-  useEffect(t4, t5);
+  const animatedColumn = use(ColumnAnimationContext);
+  const {
+    data,
+    columns
+  } = tableProps;
+  const item = data[index];
+  const t4 = clickable && styles.clickableRow;
+  const t5 = selected && styles.selectedRow;
   let t6;
-  if ($[26] !== data || $[27] !== focused || $[28] !== onBlur || $[29] !== onItemFocus) {
-    t6 = function handleBlur(e_0) {
-      onBlur?.(e_0);
-      if (!e_0.defaultPrevented && focused) {
-        onItemFocus?.(null, -1, data);
-      }
-    };
-    $[26] = data;
-    $[27] = focused;
-    $[28] = onBlur;
-    $[29] = onItemFocus;
-    $[30] = t6;
+  if ($[16] !== className || $[17] !== t4 || $[18] !== t5) {
+    t6 = classNames(className, t4, t5);
+    $[16] = className;
+    $[17] = t4;
+    $[18] = t5;
+    $[19] = t6;
   } else {
-    t6 = $[30];
+    t6 = $[19];
   }
-  const handleBlur = t6;
-  const T0 = TableRow;
-  const t7 = classNames(className, clickable && styles.clickableRow, selected && styles.selectedRow);
-  const t8 = focused ? 0 : undefined;
-  const t9 = focused ? handleBlur : undefined;
-  let t10;
-  if ($[31] !== columns || $[32] !== data || $[33] !== index || $[34] !== item || $[35] !== level) {
-    let t11;
-    if ($[37] !== data || $[38] !== index || $[39] !== item || $[40] !== level) {
-      t11 = (column, columnIndex) => {
+  let t7;
+  if ($[20] !== animatedColumn || $[21] !== columns || $[22] !== data || $[23] !== index || $[24] !== item || $[25] !== level) {
+    let t8;
+    if ($[27] !== animatedColumn || $[28] !== data || $[29] !== index || $[30] !== item || $[31] !== level) {
+      t8 = (column, columnIndex) => {
         var _column$renderCell;
+        const {
+          key,
+          tdClassName,
+          indent
+        } = column;
         return /*#__PURE__*/jsx(TableCell, {
-          className: column.tdClassName?.(item, index, data),
-          style: column.indent && level != null && level > 0 ? {
-            paddingInlineStart: `${level * INDENT_SIZE}px`
+          className: classNames(columnIndex === animatedColumn?.columnIndex && animatedColumn.cellClassName, typeof tdClassName === "function" ? tdClassName(item, index, data) : tdClassName),
+          style: indent && level != null && level > 0 ? {
+            paddingInlineStart: `${level * 24}px`
           } : undefined,
-          children: (_column$renderCell = column.renderCell?.(item, index, data)) !== null && _column$renderCell !== void 0 ? _column$renderCell : getDefaultCellValue(item, columnIndex)
-        }, column.key);
+          children: (_column$renderCell = column.renderCell?.(item, index, data)) !== null && _column$renderCell !== void 0 ? _column$renderCell : getDefaultCellValue(item, columnIndex, key)
+        }, key);
       };
-      $[37] = data;
-      $[38] = index;
-      $[39] = item;
-      $[40] = level;
-      $[41] = t11;
+      $[27] = animatedColumn;
+      $[28] = data;
+      $[29] = index;
+      $[30] = item;
+      $[31] = level;
+      $[32] = t8;
     } else {
-      t11 = $[41];
+      t8 = $[32];
     }
-    t10 = columns.map(t11);
-    $[31] = columns;
-    $[32] = data;
-    $[33] = index;
-    $[34] = item;
-    $[35] = level;
-    $[36] = t10;
+    t7 = columns.map(t8);
+    $[20] = animatedColumn;
+    $[21] = columns;
+    $[22] = data;
+    $[23] = index;
+    $[24] = item;
+    $[25] = level;
+    $[26] = t7;
   } else {
-    t10 = $[36];
+    t7 = $[26];
   }
-  let t11;
-  if ($[42] !== T0 || $[43] !== handleKeyDown || $[44] !== ref || $[45] !== restProps || $[46] !== t10 || $[47] !== t7 || $[48] !== t8 || $[49] !== t9) {
-    t11 = /*#__PURE__*/jsx(T0, {
-      ref: ref,
-      className: t7,
-      onKeyDown: handleKeyDown,
-      tabIndex: t8,
-      onBlur: t9,
+  let t8;
+  if ($[33] !== composedRef || $[34] !== keyboardFocusable || $[35] !== restProps || $[36] !== t6 || $[37] !== t7) {
+    t8 = /*#__PURE__*/jsx(TableRow, {
+      ref: composedRef,
+      keyboardFocusable: keyboardFocusable,
+      className: t6,
       ...restProps,
-      children: t10
+      children: t7
     });
-    $[42] = T0;
-    $[43] = handleKeyDown;
-    $[44] = ref;
-    $[45] = restProps;
-    $[46] = t10;
-    $[47] = t7;
-    $[48] = t8;
-    $[49] = t9;
-    $[50] = t11;
+    $[33] = composedRef;
+    $[34] = keyboardFocusable;
+    $[35] = restProps;
+    $[36] = t6;
+    $[37] = t7;
+    $[38] = t8;
   } else {
-    t11 = $[50];
+    t8 = $[38];
   }
-  return t11;
+  return t8;
 }
-function getDefaultCellValue(item, columnIndex) {
+function getDefaultCellValue(item, columnIndex, columnKey) {
   if (Array.isArray(item)) {
-    var _item$columnIndex;
-    return String((_item$columnIndex = item[columnIndex]) !== null && _item$columnIndex !== void 0 ? _item$columnIndex : '');
+    return String(item[columnIndex]);
   }
   if (item !== null && typeof item === 'object') {
-    var _Object$values$column;
-    return String((_Object$values$column = Object.values(item)[columnIndex]) !== null && _Object$values$column !== void 0 ? _Object$values$column : '');
+    return String(item[String(columnKey)]);
   }
   if (columnIndex === 0) {
     return String(item);

package/components/table/internal/column-animation.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from 'react';
+import type { Column } from '../table-props';
+import type { ColumnAnimation } from '../table-const';
+export interface ReorderSpec {
+    fromIndex: number;
+    insertionIndex: number;
+}
+export type ExpectColumnReorder = (reorderSpec: ReorderSpec) => void;
+export declare function useColumnAnimation<T>({ disabled, tableRef, columns, }: {
+    disabled: boolean | undefined;
+    tableRef: RefObject<HTMLTableElement | null>;
+    columns: readonly Column<T>[];
+}): {
+    columnAnimation: ColumnAnimation | null;
+    expectColumnReorder: ExpectColumnReorder;
+};

package/components/table/internal/table-header.d.ts

@@ -0,0 +1,4 @@
+import { type ExpectColumnReorder } from './column-animation';
+export declare function TableHeader<T>({ expectColumnReorder }: {
+    expectColumnReorder: ExpectColumnReorder;
+}): import("react").JSX.Element | null;

package/components/table/internal/virtual-items.d.ts

@@ -0,0 +1,34 @@
+import { type RefObject } from 'react';
+export type VirtualItem = MaterializedItem | Spacer;
+interface MaterializedItem {
+    type: 'materialized';
+    index: number;
+}
+interface Spacer {
+    type: 'spacer';
+    from: number;
+    to: number;
+    height: number;
+    key: string;
+}
+type CollapseItemIntoSpacerCallback = (index: number, height: number) => void;
+export declare const CollapseItemIntoSpacerContext: import("react").Context<CollapseItemIntoSpacerCallback>;
+export declare function useVirtualItems<T>({ enabled, data, data: { length }, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }: {
+    enabled: boolean;
+    data: readonly T[];
+    scrollerRef: RefObject<HTMLElement | null> | undefined;
+    tableRef: RefObject<HTMLTableElement | null>;
+    estimateHeight: (item: T, index: number, items: readonly T[]) => number;
+    lookaheadPx: number;
+    retentionMarginPx: number;
+    minScrollAndResizeDeltaPx: number;
+}): {
+    virtualItems: VirtualItem[];
+    intersectionObserverHandle: import("../../global/intersection-observer-context").IntersectionObserverHandle;
+    collapseItemIntoSpacer: CollapseItemIntoSpacerCallback;
+};
+export declare function SpacerRow({ spacer: { from, to, height }, colSpan }: {
+    spacer: Spacer;
+    colSpan: number;
+}): import("react").JSX.Element;
+export {};

package/components/table/item-virtualization.d.ts

@@ -0,0 +1,35 @@
+import { type RefObject } from 'react';
+/**
+ * Use in an item renderer to control item virtualization.
+ */
+export declare function useItemVirtualization({ index, refs, onIntersectionChange, }: {
+    /**
+     * Index of the item.
+     */
+    index: number;
+    /**
+     * One or more elements representing this item.
+     *
+     * When multiple elements are provided, the virtualization callback receives
+     * the intersection state of all of them.
+     *
+     * If you pass multiple refs, memoize the array (for example with `useMemo()`)
+     * to avoid restarting observation on every render.
+     */
+    refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[];
+    /**
+     * Invoked when the `isIntersecting` state of the observed elements changes.
+     * Consider wrapping a callback to `useCallback()` to avoid restarting observation on every render.
+     *
+     * @param intersectionStates - Current intersection state of every observed element.
+     * Entries are initially `undefined` until the corresponding element
+     * has been reported by `IntersectionObserver`.
+     * @param changedIndex - Index of the element whose intersection state changed.
+     * @param elements - The observed elements. Note that some elements may
+     * already be disconnected from the DOM when this callback is invoked.
+     * Use additional checks like `element.isConnected`.
+     * @returns Return the height of an item to collapse the item into spacer,
+     * or `undefined` to keep the item rendered.
+     */
+    onIntersectionChange: (intersectionStates: (boolean | undefined)[], changedIndex: number, elements: (Element | null)[]) => number | undefined;
+}): void;

package/components/table/item-virtualization.js

@@ -0,0 +1,71 @@
+import { c } from 'react/compiler-runtime';
+import { use, useEffect } from 'react';
+import { IntersectionObserverContext } from '../global/intersection-observer-context.js';
+import { CollapseItemIntoSpacerContext } from '../internal/virtual-items.js';
+import '../global/schedule-with-cleanup.js';
+import '../_helpers/table.js';
+import 'react/jsx-runtime';
+
+/**
+ * Use in an item renderer to control item virtualization.
+ */
+function useItemVirtualization(t0) {
+  const $ = c(8);
+  if ($[0] !== "15177a0e107705dc6d84a0fc97d3302da4c04a0058a1b771c145ee537ccae2cf") {
+    for (let $i = 0; $i < 8; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "15177a0e107705dc6d84a0fc97d3302da4c04a0058a1b771c145ee537ccae2cf";
+  }
+  const {
+    index,
+    refs,
+    onIntersectionChange
+  } = t0;
+  const handle = use(IntersectionObserverContext);
+  const collapseItemIntoSpacer = use(CollapseItemIntoSpacerContext);
+  let t1;
+  let t2;
+  if ($[1] !== collapseItemIntoSpacer || $[2] !== handle || $[3] !== index || $[4] !== onIntersectionChange || $[5] !== refs) {
+    t1 = () => {
+      const intersectionStates = Array.isArray(refs) ? refs.map(_temp) : [undefined];
+      const elements = Array.isArray(refs) ? refs.map(_temp2) : [refs.current];
+      const cleanups = [];
+      elements.forEach((element, elementIndex) => {
+        if (!element) {
+          return;
+        }
+        const cleanup = handle.observe(element, isIntersecting => {
+          intersectionStates[elementIndex] = isIntersecting;
+          const height = onIntersectionChange(intersectionStates, elementIndex, elements);
+          if (height != null) {
+            collapseItemIntoSpacer(index, height);
+          }
+        });
+        cleanups.push(cleanup);
+      });
+      return () => cleanups.forEach(_temp3);
+    };
+    t2 = [collapseItemIntoSpacer, handle, index, onIntersectionChange, refs];
+    $[1] = collapseItemIntoSpacer;
+    $[2] = handle;
+    $[3] = index;
+    $[4] = onIntersectionChange;
+    $[5] = refs;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t1 = $[6];
+    t2 = $[7];
+  }
+  useEffect(t1, t2);
+}
+function _temp3(cleanup_0) {
+  return cleanup_0();
+}
+function _temp2(r) {
+  return r.current;
+}
+function _temp() {}
+
+export { useItemVirtualization };

package/components/table/table-const.d.ts

@@ -1,8 +1,42 @@
-import type { TableProps } from './table';
+import type { TableProps } from './table-props';
+/**
+ * Use anywhere inside the table to get access to the props passed to it.
+ * Cast to `Context<TableProps<T>>` in usage place.
+ */
 export declare const TablePropsContext: import("react").Context<TableProps<unknown> | null>;
-export declare const ColumnIndexContext: import("react").Context<number>;
-export declare const CollapseItemIntoSpacerContext: import("react").Context<(height: number) => void>;
+/**
+ * Information about a column reorder animation.
+ *
+ * Available through {@link ColumnAnimationContext} to allow custom cell
+ * renderers to animate reordered columns consistently with the default
+ * table renderer.
+ */
+export interface ColumnAnimation {
+    /**
+     * Index of the column being animated.
+     */
+    columnIndex: number;
+    /**
+     * Current animation phase.
+     */
+    phase: 'initial' | 'fade-out';
+    /**
+     * CSS class to apply to the animated cell or another element used to
+     * render the animation.
+     *
+     * The class only defines the `background-color` and `transition`
+     * properties.
+     */
+    cellClassName: string;
+}
+/**
+ * Provides information about the currently animated column.
+ *
+ * Use in a custom cell renderer to animate reordered columns
+ * consistently with the default table renderer.
+ */
+export declare const ColumnAnimationContext: import("react").Context<ColumnAnimation | null>;
+/**
+ * When a row only contains unformatted single-line text, it will be exactly of this height.
+ */
 export declare const defaultRowHeight = 37;
-export declare const defaultLookaheadPx = 400;
-export declare const defaultRetentionMarginPx = 450;
-export declare const defaultMinScrollAndResizeDeltaPx = 50;

package/components/table/table-const.js

@@ -1,11 +1,20 @@
 import { createContext } from 'react';
 
+/**
+ * Use anywhere inside the table to get access to the props passed to it.
+ * Cast to `Context<TableProps<T>>` in usage place.
+ */
 const TablePropsContext = /*#__PURE__*/createContext(null);
-const ColumnIndexContext = /*#__PURE__*/createContext(-1);
-const CollapseItemIntoSpacerContext = /*#__PURE__*/createContext(() => {});
+/**
+ * Provides information about the currently animated column.
+ *
+ * Use in a custom cell renderer to animate reordered columns
+ * consistently with the default table renderer.
+ */
+const ColumnAnimationContext = /*#__PURE__*/createContext(null);
+/**
+ * When a row only contains unformatted single-line text, it will be exactly of this height.
+ */
 const defaultRowHeight = 37;
-const defaultLookaheadPx = 400;
-const defaultRetentionMarginPx = 450;
-const defaultMinScrollAndResizeDeltaPx = 50;
 
-export { CollapseItemIntoSpacerContext, ColumnIndexContext, TablePropsContext, defaultLookaheadPx, defaultMinScrollAndResizeDeltaPx, defaultRetentionMarginPx, defaultRowHeight };
+export { ColumnAnimationContext, TablePropsContext, defaultRowHeight };

package/components/table/table-primitives.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentPropsWithRef } from 'react';
+export interface TableRowProps {
+    /**
+     * @see DefaultItemRendererProps.keyboardFocusable
+     */
+    keyboardFocusable?: boolean;
+}
+/**
+ * @internal
+ */
+export declare const keyboardFocusableAttrName = "data-keyboard-focusable";
+/**
+ * A helper `<tr>` component for custom {@link TableProps.renderItem} implementations.
+ * Applies the standard row class names.
+ */
+export declare function TableRow(props: TableRowProps & ComponentPropsWithRef<'tr'>): import("react").JSX.Element;
+/**
+ * A helper `<td>` component for custom {@link TableProps.renderItem} implementations.
+ * Applies the standard cell class names, but not data-dependent `tdClassName`.
+ */
+export declare function TableCell(props: ComponentPropsWithRef<'td'>): import("react").JSX.Element;