@jetbrains/ring-ui-built 7.0.115 → 8.0.0-beta.3

package/components/table/table-component.js

@@ -0,0 +1,290 @@
+import { c } from 'react/compiler-runtime';
+import { useRef } from 'react';
+import classNames from 'classnames';
+import { mergeRefs } from 'react-merge-refs';
+import { IntersectionObserverContext } from '../global/intersection-observer-context.js';
+import { useTableVirtualize, SpacerRow } from './table-virtualize.js';
+import { DefaultItemRenderer } from './default-item-renderer.js';
+import { TablePropsContext, CollapseItemIntoSpacerContext, defaultMinScrollAndResizeDeltaPx, defaultLookaheadPx, defaultRetentionMarginPx, ColumnIndexContext, defaultRowHeight } from './table-const.js';
+import { onBlurCaptureTbody, onKeyDownTbody } from './table-row-focus.js';
+import { s as styles } from '../_helpers/table.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import './table-primitives.js';
+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';
+
+function Table(props) {
+  const $ = c(56);
+  if ($[0] !== "9306af42aa8ad63ab7b8766f741b6ce2a028dd9b7f320f9f4ee30c0e95ec844f") {
+    for (let $i = 0; $i < 56; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "9306af42aa8ad63ab7b8766f741b6ce2a028dd9b7f320f9f4ee30c0e95ec844f";
+  }
+  let className;
+  let columns;
+  let data;
+  let getKey;
+  let noHeader;
+  let renderItem;
+  let restProps;
+  let scrollerRef;
+  let t0;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let tbodyClassName;
+  let theadClassName;
+  let theadTrClassName;
+  let userRef;
+  if ($[1] !== props) {
+    const {
+      data: t5,
+      columns: t6,
+      getKey: t7,
+      noHeader: t8,
+      onItemMove,
+      onSort,
+      onColumnDelete,
+      onColumnMove,
+      renderItem: t9,
+      virtualizeRows: t10,
+      scrollerRef: t11,
+      estimateHeight: t12,
+      lookaheadPx: t13,
+      retentionMarginPx: t14,
+      minScrollAndResizeDeltaPx: t15,
+      columnEditButton,
+      theadClassName: t16,
+      theadTrClassName: t17,
+      tbodyClassName: t18,
+      ref: t19,
+      className: t20,
+      ...t21
+    } = props;
+    data = t5;
+    columns = t6;
+    getKey = t7;
+    noHeader = t8;
+    renderItem = t9;
+    t0 = t10;
+    scrollerRef = t11;
+    t1 = t12;
+    t2 = t13;
+    t3 = t14;
+    t4 = t15;
+    theadClassName = t16;
+    theadTrClassName = t17;
+    tbodyClassName = t18;
+    userRef = t19;
+    className = t20;
+    restProps = t21;
+    $[1] = props;
+    $[2] = className;
+    $[3] = columns;
+    $[4] = data;
+    $[5] = getKey;
+    $[6] = noHeader;
+    $[7] = renderItem;
+    $[8] = restProps;
+    $[9] = scrollerRef;
+    $[10] = t0;
+    $[11] = t1;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = tbodyClassName;
+    $[16] = theadClassName;
+    $[17] = theadTrClassName;
+    $[18] = userRef;
+  } else {
+    className = $[2];
+    columns = $[3];
+    data = $[4];
+    getKey = $[5];
+    noHeader = $[6];
+    renderItem = $[7];
+    restProps = $[8];
+    scrollerRef = $[9];
+    t0 = $[10];
+    t1 = $[11];
+    t2 = $[12];
+    t3 = $[13];
+    t4 = $[14];
+    tbodyClassName = $[15];
+    theadClassName = $[16];
+    theadTrClassName = $[17];
+    userRef = $[18];
+  }
+  const virtualizeRows = t0 === undefined ? false : t0;
+  const estimateHeight = t1 === undefined ? _temp : t1;
+  const lookaheadPx = t2 === undefined ? defaultLookaheadPx : t2;
+  const retentionMarginPx = t3 === undefined ? defaultRetentionMarginPx : t3;
+  const minScrollAndResizeDeltaPx = t4 === undefined ? defaultMinScrollAndResizeDeltaPx : t4;
+  const localRef = useRef(null);
+  const {
+    virtualItems,
+    intersectionObserverHandle,
+    collapseItemIntoSpacer
+  } = useTableVirtualize({
+    enabled: virtualizeRows,
+    data,
+    scrollerRef,
+    tableRef: localRef,
+    estimateHeight,
+    lookaheadPx,
+    retentionMarginPx,
+    minScrollAndResizeDeltaPx
+  });
+  const T0 = TablePropsContext;
+  const T1 = IntersectionObserverContext;
+  let t5;
+  if ($[19] !== className) {
+    t5 = classNames(styles.table, className);
+    $[19] = className;
+    $[20] = t5;
+  } else {
+    t5 = $[20];
+  }
+  const t6 = mergeRefs([userRef, localRef]);
+  let t7;
+  if ($[21] !== columns || $[22] !== noHeader || $[23] !== theadClassName || $[24] !== theadTrClassName) {
+    t7 = !noHeader && /*#__PURE__*/jsx("thead", {
+      className: theadClassName,
+      children: /*#__PURE__*/jsx("tr", {
+        className: classNames(styles.headerRow, theadTrClassName),
+        children: columns.map(_temp2)
+      })
+    });
+    $[21] = columns;
+    $[22] = noHeader;
+    $[23] = theadClassName;
+    $[24] = theadTrClassName;
+    $[25] = t7;
+  } else {
+    t7 = $[25];
+  }
+  let t8;
+  if ($[26] !== collapseItemIntoSpacer || $[27] !== columns || $[28] !== data || $[29] !== getKey || $[30] !== renderItem || $[31] !== virtualItems) {
+    let t9;
+    if ($[33] !== collapseItemIntoSpacer || $[34] !== columns || $[35] !== data || $[36] !== getKey || $[37] !== renderItem) {
+      t9 = virtualItem => {
+        if (virtualItem.type === "spacer") {
+          return /*#__PURE__*/jsx(SpacerRow, {
+            spacer: virtualItem,
+            colSpan: columns.length
+          }, virtualItem.key);
+        }
+        const index = virtualItem.index;
+        const item = data[index];
+        const key = getKey(item, index, data);
+        return /*#__PURE__*/jsx(CollapseItemIntoSpacerContext, {
+          value: height => collapseItemIntoSpacer(index, height),
+          children: renderItem ? renderItem(item, index, data) : /*#__PURE__*/jsx(DefaultItemRenderer, {
+            index: index
+          })
+        }, key);
+      };
+      $[33] = collapseItemIntoSpacer;
+      $[34] = columns;
+      $[35] = data;
+      $[36] = getKey;
+      $[37] = renderItem;
+      $[38] = t9;
+    } else {
+      t9 = $[38];
+    }
+    t8 = virtualItems.map(t9);
+    $[26] = collapseItemIntoSpacer;
+    $[27] = columns;
+    $[28] = data;
+    $[29] = getKey;
+    $[30] = renderItem;
+    $[31] = virtualItems;
+    $[32] = t8;
+  } else {
+    t8 = $[32];
+  }
+  let t9;
+  if ($[39] !== t8 || $[40] !== tbodyClassName) {
+    t9 = /*#__PURE__*/jsx("tbody", {
+      className: tbodyClassName,
+      onKeyDown: onKeyDownTbody,
+      onBlurCapture: onBlurCaptureTbody,
+      children: t8
+    });
+    $[39] = t8;
+    $[40] = tbodyClassName;
+    $[41] = t9;
+  } else {
+    t9 = $[41];
+  }
+  let t10;
+  if ($[42] !== restProps || $[43] !== t5 || $[44] !== t6 || $[45] !== t7 || $[46] !== t9) {
+    t10 = /*#__PURE__*/jsxs("table", {
+      className: t5,
+      ref: t6,
+      ...restProps,
+      children: [t7, t9]
+    });
+    $[42] = restProps;
+    $[43] = t5;
+    $[44] = t6;
+    $[45] = t7;
+    $[46] = t9;
+    $[47] = t10;
+  } else {
+    t10 = $[47];
+  }
+  let t11;
+  if ($[48] !== T1 || $[49] !== intersectionObserverHandle || $[50] !== t10) {
+    t11 = /*#__PURE__*/jsx(T1, {
+      value: intersectionObserverHandle,
+      children: t10
+    });
+    $[48] = T1;
+    $[49] = intersectionObserverHandle;
+    $[50] = t10;
+    $[51] = t11;
+  } else {
+    t11 = $[51];
+  }
+  let t12;
+  if ($[52] !== T0 || $[53] !== props || $[54] !== t11) {
+    t12 = /*#__PURE__*/jsx(T0, {
+      value: props,
+      children: t11
+    });
+    $[52] = T0;
+    $[53] = props;
+    $[54] = t11;
+    $[55] = t12;
+  } else {
+    t12 = $[55];
+  }
+  return t12;
+}
+function _temp2(column, columnIndex) {
+  var _ref, _column$renderHeader;
+  return /*#__PURE__*/jsx("th", {
+    className: classNames(styles.headerCell, column.thClassName),
+    "aria-sort": column.sortOrder,
+    children: /*#__PURE__*/jsx(ColumnIndexContext, {
+      value: columnIndex,
+      children: (_ref = (_column$renderHeader = column.renderHeader?.()) !== null && _column$renderHeader !== void 0 ? _column$renderHeader : column.name) !== null && _ref !== void 0 ? _ref : String(column.key)
+    })
+  }, column.key);
+}
+function _temp() {
+  return defaultRowHeight;
+}
+
+export { Table as default };

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

@@ -0,0 +1,8 @@
+import type { TableProps } from './table';
+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>;
+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

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+const TablePropsContext = /*#__PURE__*/createContext(null);
+const ColumnIndexContext = /*#__PURE__*/createContext(-1);
+const CollapseItemIntoSpacerContext = /*#__PURE__*/createContext(() => {});
+const defaultRowHeight = 37;
+const defaultLookaheadPx = 400;
+const defaultRetentionMarginPx = 450;
+const defaultMinScrollAndResizeDeltaPx = 50;
+
+export { CollapseItemIntoSpacerContext, ColumnIndexContext, TablePropsContext, defaultLookaheadPx, defaultMinScrollAndResizeDeltaPx, defaultRetentionMarginPx, defaultRowHeight };

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

@@ -0,0 +1,28 @@
+import { type ComponentPropsWithRef } from 'react';
+/**
+ * Include it in a column header to make the column sortable.
+ * Handle clicks with {@link TableProps.onSort}.
+ */
+export declare function SortButton<T>({ className, children, onClick, ...restProps }: ComponentPropsWithRef<'button'>): import("react").JSX.Element | null;
+/**
+ * Include it in a column header to make the column deletable.
+ * Beware that `column.name ?? String(column.key)` is used in the aria-label.
+ * Handle clicks with {@link TableProps.onColumnDelete}.
+ */
+export declare function DeleteColumnButton<T>({ className, onClick, ...restProps }: ComponentPropsWithRef<'button'>): import("react").JSX.Element | null;
+export interface TableRowProps {
+    /**
+     * @see DefaultItemRendererProps.keyboardFocusable
+     */
+    keyboardFocusable?: boolean;
+}
+/**
+ * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
+ * Applies the standard row classnames.
+ */
+export declare function TableRow(props: TableRowProps & ComponentPropsWithRef<'tr'>): import("react").JSX.Element;
+/**
+ * A helper `<td>` component for a custom {@link TableProps.renderItem} implementations.
+ * Applies the standard cell classnames, but not data-dependent `tdClassName`.
+ */
+export declare function TableCell(props: ComponentPropsWithRef<'td'>): import("react").JSX.Element;

package/components/table/table-primitives.js

@@ -0,0 +1,323 @@
+import { c } from 'react/compiler-runtime';
+import { use } from 'react';
+import classNames from 'classnames';
+import unsortedIcon from '@jetbrains/icons/unsorted-12px';
+import arrowDownIcon from '@jetbrains/icons/arrow-12px-down';
+import arrowUpIcon from '@jetbrains/icons/arrow-12px-up';
+import trashIcon from '@jetbrains/icons/trash-12px';
+import Icon from '../icon/icon.js';
+import { TablePropsContext, ColumnIndexContext } from './table-const.js';
+import { keyboardFocusableAttrName } from './table-row-focus.js';
+import { s as styles } from '../_helpers/table.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'util-deprecate';
+import '../icon/icon.constants.js';
+import '../_helpers/icon-svg.js';
+import '../global/memoize.js';
+
+function SortButton(t0) {
+  var _column$sortOrder;
+  const $ = c(21);
+  if ($[0] !== "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6") {
+    for (let $i = 0; $i < 21; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6";
+  }
+  let children;
+  let className;
+  let onClick;
+  let restProps;
+  if ($[1] !== t0) {
+    ({
+      className,
+      children,
+      onClick,
+      ...restProps
+    } = t0);
+    $[1] = t0;
+    $[2] = children;
+    $[3] = className;
+    $[4] = onClick;
+    $[5] = restProps;
+  } else {
+    children = $[2];
+    className = $[3];
+    onClick = $[4];
+    restProps = $[5];
+  }
+  const tableProps = use(TablePropsContext);
+  const columnIndex = use(ColumnIndexContext);
+  const column = tableProps?.columns[columnIndex];
+  const sortOrder = (_column$sortOrder = column?.sortOrder) !== null && _column$sortOrder !== void 0 ? _column$sortOrder : "none";
+  const glyph = sortOrder === "none" ? unsortedIcon : sortOrder === "ascending" ? arrowUpIcon : arrowDownIcon;
+  let t1;
+  if ($[6] !== columnIndex || $[7] !== onClick || $[8] !== sortOrder || $[9] !== tableProps) {
+    t1 = e => {
+      onClick?.(e);
+      if (!e.defaultPrevented) {
+        const sequence = ["none", "ascending", "descending"];
+        const nextOrder = sequence[(sequence.indexOf(sortOrder) + 1) % sequence.length];
+        tableProps.onSort?.(columnIndex, nextOrder, tableProps.columns);
+      }
+    };
+    $[6] = columnIndex;
+    $[7] = onClick;
+    $[8] = sortOrder;
+    $[9] = tableProps;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  const handleClick = t1;
+  if (!tableProps || !column) {
+    return null;
+  }
+  let t2;
+  if ($[11] !== className) {
+    t2 = classNames(styles.headerButton, className);
+    $[11] = className;
+    $[12] = t2;
+  } else {
+    t2 = $[12];
+  }
+  let t3;
+  if ($[13] !== glyph) {
+    t3 = /*#__PURE__*/jsx(Icon, {
+      glyph: glyph,
+      "aria-hidden": true
+    });
+    $[13] = glyph;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  let t4;
+  if ($[15] !== children || $[16] !== handleClick || $[17] !== restProps || $[18] !== t2 || $[19] !== t3) {
+    t4 = /*#__PURE__*/jsxs("button", {
+      type: "button",
+      className: t2,
+      onClick: handleClick,
+      ...restProps,
+      children: [children, " ", t3]
+    });
+    $[15] = children;
+    $[16] = handleClick;
+    $[17] = restProps;
+    $[18] = t2;
+    $[19] = t3;
+    $[20] = t4;
+  } else {
+    t4 = $[20];
+  }
+  return t4;
+}
+/**
+ * Include it in a column header to make the column deletable.
+ * Beware that `column.name ?? String(column.key)` is used in the aria-label.
+ * Handle clicks with {@link TableProps.onColumnDelete}.
+ */
+function DeleteColumnButton(t0) {
+  var _column$name;
+  const $ = c(17);
+  if ($[0] !== "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6") {
+    for (let $i = 0; $i < 17; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6";
+  }
+  let className;
+  let onClick;
+  let restProps;
+  if ($[1] !== t0) {
+    ({
+      className,
+      onClick,
+      ...restProps
+    } = t0);
+    $[1] = t0;
+    $[2] = className;
+    $[3] = onClick;
+    $[4] = restProps;
+  } else {
+    className = $[2];
+    onClick = $[3];
+    restProps = $[4];
+  }
+  const tableProps = use(TablePropsContext);
+  const columnIndex = use(ColumnIndexContext);
+  const column = tableProps?.columns[columnIndex];
+  let t1;
+  if ($[5] !== columnIndex || $[6] !== onClick || $[7] !== tableProps) {
+    t1 = e => {
+      onClick?.(e);
+      if (!e.defaultPrevented) {
+        tableProps.onColumnDelete?.(columnIndex, tableProps.columns);
+      }
+    };
+    $[5] = columnIndex;
+    $[6] = onClick;
+    $[7] = tableProps;
+    $[8] = t1;
+  } else {
+    t1 = $[8];
+  }
+  const handleClick = t1;
+  if (!tableProps || !column) {
+    return null;
+  }
+  let t2;
+  if ($[9] !== className) {
+    t2 = classNames(styles.headerButton, styles.deleteColumnButton, className);
+    $[9] = className;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  const t3 = `Delete column ${(_column$name = column.name) !== null && _column$name !== void 0 ? _column$name : String(column.key)}`;
+  let t4;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = /*#__PURE__*/jsx(Icon, {
+      glyph: trashIcon
+    });
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== handleClick || $[13] !== restProps || $[14] !== t2 || $[15] !== t3) {
+    t5 = /*#__PURE__*/jsx("button", {
+      type: "button",
+      className: t2,
+      onClick: handleClick,
+      "aria-label": t3,
+      ...restProps,
+      children: t4
+    });
+    $[12] = handleClick;
+    $[13] = restProps;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  return t5;
+}
+/**
+ * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
+ * Applies the standard row classnames.
+ */
+function TableRow(props) {
+  const $ = c(13);
+  if ($[0] !== "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6") {
+    for (let $i = 0; $i < 13; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6";
+  }
+  let className;
+  let keyboardFocusable;
+  let restProps;
+  if ($[1] !== props) {
+    ({
+      keyboardFocusable,
+      className,
+      ...restProps
+    } = props);
+    $[1] = props;
+    $[2] = className;
+    $[3] = keyboardFocusable;
+    $[4] = restProps;
+  } else {
+    className = $[2];
+    keyboardFocusable = $[3];
+    restProps = $[4];
+  }
+  let t0;
+  if ($[5] !== className) {
+    t0 = classNames(styles.row, className);
+    $[5] = className;
+    $[6] = t0;
+  } else {
+    t0 = $[6];
+  }
+  const classes = t0;
+  let t1;
+  if ($[7] !== keyboardFocusable || $[8] !== restProps) {
+    t1 = keyboardFocusable ? {
+      [keyboardFocusableAttrName]: "",
+      ...restProps
+    } : restProps;
+    $[7] = keyboardFocusable;
+    $[8] = restProps;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  const trRestProps = t1;
+  let t2;
+  if ($[10] !== classes || $[11] !== trRestProps) {
+    t2 = /*#__PURE__*/jsx("tr", {
+      className: classes,
+      ...trRestProps
+    });
+    $[10] = classes;
+    $[11] = trRestProps;
+    $[12] = t2;
+  } else {
+    t2 = $[12];
+  }
+  return t2;
+}
+/**
+ * A helper `<td>` component for a custom {@link TableProps.renderItem} implementations.
+ * Applies the standard cell classnames, but not data-dependent `tdClassName`.
+ */
+function TableCell(props) {
+  const $ = c(9);
+  if ($[0] !== "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6") {
+    for (let $i = 0; $i < 9; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6";
+  }
+  let className;
+  let restProps;
+  if ($[1] !== props) {
+    ({
+      className,
+      ...restProps
+    } = props);
+    $[1] = props;
+    $[2] = className;
+    $[3] = restProps;
+  } else {
+    className = $[2];
+    restProps = $[3];
+  }
+  let t0;
+  if ($[4] !== className) {
+    t0 = classNames(styles.cell, className);
+    $[4] = className;
+    $[5] = t0;
+  } else {
+    t0 = $[5];
+  }
+  const classes = t0;
+  let t1;
+  if ($[6] !== classes || $[7] !== restProps) {
+    t1 = /*#__PURE__*/jsx("td", {
+      className: classes,
+      ...restProps
+    });
+    $[6] = classes;
+    $[7] = restProps;
+    $[8] = t1;
+  } else {
+    t1 = $[8];
+  }
+  return t1;
+}
+
+export { DeleteColumnButton, SortButton, TableCell, TableRow };

package/components/table/table-row-focus.d.ts

@@ -0,0 +1,4 @@
+export declare const keyboardFocusableAttrName = "data-keyboard-focusable";
+export declare function focusRow(row: HTMLTableRowElement): void;
+export declare function onKeyDownTbody(e: React.KeyboardEvent<HTMLTableSectionElement>): void;
+export declare function onBlurCaptureTbody(e: React.FocusEvent<HTMLTableSectionElement>): void;

package/components/table/table-row-focus.js

@@ -0,0 +1,41 @@
+const keyboardFocusableAttrName = 'data-keyboard-focusable';
+const temporaryTabIndexAttrName = 'data-temporary-tabindex';
+function focusRow(row) {
+  if (!row.hasAttribute('tabindex')) {
+    row.tabIndex = 0;
+    row.setAttribute(temporaryTabIndexAttrName, '');
+  }
+  row.focus();
+}
+function onKeyDownTbody(e) {
+  if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') {
+    return;
+  }
+  const tbody = e.currentTarget;
+  const currentRow = e.target.closest('tr');
+  if (!(currentRow instanceof HTMLTableRowElement) || currentRow.parentElement !== tbody) {
+    return;
+  }
+  let candidate = currentRow;
+  while (candidate) {
+    candidate = e.key === 'ArrowUp' ? candidate.previousElementSibling : candidate.nextElementSibling;
+    if (candidate?.hasAttribute(keyboardFocusableAttrName)) {
+      focusRow(candidate);
+      e.preventDefault();
+      return;
+    }
+  }
+}
+function onBlurCaptureTbody(e) {
+  const tbody = e.currentTarget;
+  if (!(e.target instanceof HTMLTableRowElement) || e.target.parentElement !== tbody) {
+    return;
+  }
+  const row = e.target;
+  if (row.hasAttribute(temporaryTabIndexAttrName)) {
+    row.removeAttribute('tabindex');
+    row.removeAttribute(temporaryTabIndexAttrName);
+  }
+}
+
+export { focusRow, keyboardFocusableAttrName, onBlurCaptureTbody, onKeyDownTbody };