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

package/components/table/{table-base.js → table-primitives.js}

@@ -1,5 +1,5 @@
-import { c } from 'react-compiler-runtime';
-import { useContext } from 'react';
+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';
@@ -7,6 +7,7 @@ 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';
@@ -14,35 +15,27 @@ import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import '../global/memoize.js';
 
-function SortButton(props) {
+function SortButton(t0) {
   var _column$sortOrder;
   const $ = c(21);
-  if ($[0] !== "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369") {
+  if ($[0] !== "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6") {
     for (let $i = 0; $i < 21; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369";
+    $[0] = "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6";
   }
-  const tableProps = useContext(TablePropsContext);
-  const columnIndex = useContext(ColumnIndexContext);
-  const column = tableProps?.columns[columnIndex];
-  if (!tableProps || !column) {
-    return null;
-  }
-  const sortOrder = (_column$sortOrder = column.sortOrder) !== null && _column$sortOrder !== void 0 ? _column$sortOrder : "none";
-  const glyph = sortOrder === "none" ? unsortedIcon : sortOrder === "ascending" ? arrowUpIcon : arrowDownIcon;
   let children;
   let className;
   let onClick;
   let restProps;
-  if ($[1] !== props) {
+  if ($[1] !== t0) {
     ({
       className,
       children,
       onClick,
       ...restProps
-    } = props);
-    $[1] = props;
+    } = t0);
+    $[1] = t0;
     $[2] = children;
     $[3] = className;
     $[4] = onClick;
@@ -53,94 +46,96 @@ function SortButton(props) {
     onClick = $[4];
     restProps = $[5];
   }
-  let t0;
+  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) {
-    t0 = function handleClick(e) {
+    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.onSort?.(columnIndex, nextOrder, tableProps.columns);
       }
     };
     $[6] = columnIndex;
     $[7] = onClick;
     $[8] = sortOrder;
     $[9] = tableProps;
-    $[10] = t0;
+    $[10] = t1;
   } else {
-    t0 = $[10];
+    t1 = $[10];
   }
-  const handleClick = t0;
-  let t1;
+  const handleClick = t1;
+  if (!tableProps || !column) {
+    return null;
+  }
+  let t2;
   if ($[11] !== className) {
-    t1 = classNames(styles.headerButton, className);
+    t2 = classNames(styles.headerButton, className);
     $[11] = className;
-    $[12] = t1;
+    $[12] = t2;
   } else {
-    t1 = $[12];
+    t2 = $[12];
   }
-  let t2;
+  let t3;
   if ($[13] !== glyph) {
-    t2 = /*#__PURE__*/jsx(Icon, {
+    t3 = /*#__PURE__*/jsx(Icon, {
       glyph: glyph,
       "aria-hidden": true
     });
     $[13] = glyph;
-    $[14] = t2;
+    $[14] = t3;
   } else {
-    t2 = $[14];
+    t3 = $[14];
   }
-  let t3;
-  if ($[15] !== children || $[16] !== handleClick || $[17] !== restProps || $[18] !== t1 || $[19] !== t2) {
-    t3 = /*#__PURE__*/jsxs("button", {
+  let t4;
+  if ($[15] !== children || $[16] !== handleClick || $[17] !== restProps || $[18] !== t2 || $[19] !== t3) {
+    t4 = /*#__PURE__*/jsxs("button", {
       type: "button",
-      className: t1,
+      className: t2,
       onClick: handleClick,
       ...restProps,
-      children: [children, " ", t2]
+      children: [children, " ", t3]
     });
     $[15] = children;
     $[16] = handleClick;
     $[17] = restProps;
-    $[18] = t1;
-    $[19] = t2;
-    $[20] = t3;
+    $[18] = t2;
+    $[19] = t3;
+    $[20] = t4;
   } else {
-    t3 = $[20];
+    t4 = $[20];
   }
-  return t3;
+  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(props) {
+function DeleteColumnButton(t0) {
   var _column$name;
   const $ = c(17);
-  if ($[0] !== "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369") {
+  if ($[0] !== "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6") {
     for (let $i = 0; $i < 17; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369";
-  }
-  const tableProps = useContext(TablePropsContext);
-  const columnIndex = useContext(ColumnIndexContext);
-  const column = tableProps?.columns[columnIndex];
-  if (!tableProps || !column) {
-    return null;
+    $[0] = "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6";
   }
   let className;
   let onClick;
   let restProps;
-  if ($[1] !== props) {
+  if ($[1] !== t0) {
     ({
       className,
       onClick,
       ...restProps
-    } = props);
-    $[1] = props;
+    } = t0);
+    $[1] = t0;
     $[2] = className;
     $[3] = onClick;
     $[4] = restProps;
@@ -149,88 +144,94 @@ function DeleteColumnButton(props) {
     onClick = $[3];
     restProps = $[4];
   }
-  let t0;
+  const tableProps = use(TablePropsContext);
+  const columnIndex = use(ColumnIndexContext);
+  const column = tableProps?.columns[columnIndex];
+  let t1;
   if ($[5] !== columnIndex || $[6] !== onClick || $[7] !== tableProps) {
-    t0 = function handleClick(e) {
+    t1 = e => {
       onClick?.(e);
       if (!e.defaultPrevented) {
-        tableProps.onColumnDelete?.(columnIndex);
+        tableProps.onColumnDelete?.(columnIndex, tableProps.columns);
       }
     };
     $[5] = columnIndex;
     $[6] = onClick;
     $[7] = tableProps;
-    $[8] = t0;
+    $[8] = t1;
   } else {
-    t0 = $[8];
+    t1 = $[8];
   }
-  const handleClick = t0;
-  let t1;
+  const handleClick = t1;
+  if (!tableProps || !column) {
+    return null;
+  }
+  let t2;
   if ($[9] !== className) {
-    t1 = classNames(styles.headerButton, styles.deleteColumnButton, className);
+    t2 = classNames(styles.headerButton, styles.deleteColumnButton, className);
     $[9] = className;
-    $[10] = t1;
+    $[10] = t2;
   } else {
-    t1 = $[10];
+    t2 = $[10];
   }
-  const t2 = `Delete column ${(_column$name = column.name) !== null && _column$name !== void 0 ? _column$name : String(column.key)}`;
-  let t3;
+  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")) {
-    t3 = /*#__PURE__*/jsx(Icon, {
+    t4 = /*#__PURE__*/jsx(Icon, {
       glyph: trashIcon
     });
-    $[11] = t3;
+    $[11] = t4;
   } else {
-    t3 = $[11];
+    t4 = $[11];
   }
-  let t4;
-  if ($[12] !== handleClick || $[13] !== restProps || $[14] !== t1 || $[15] !== t2) {
-    t4 = /*#__PURE__*/jsx("button", {
+  let t5;
+  if ($[12] !== handleClick || $[13] !== restProps || $[14] !== t2 || $[15] !== t3) {
+    t5 = /*#__PURE__*/jsx("button", {
       type: "button",
-      className: t1,
+      className: t2,
       onClick: handleClick,
-      "aria-label": t2,
+      "aria-label": t3,
       ...restProps,
-      children: t3
+      children: t4
     });
     $[12] = handleClick;
     $[13] = restProps;
-    $[14] = t1;
-    $[15] = t2;
-    $[16] = t4;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t5;
   } else {
-    t4 = $[16];
+    t5 = $[16];
   }
-  return t4;
+  return t5;
 }
 /**
  * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
  * Applies the standard row classnames.
  */
 function TableRow(props) {
-  const $ = c(11);
-  if ($[0] !== "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369") {
-    for (let $i = 0; $i < 11; $i += 1) {
+  const $ = c(13);
+  if ($[0] !== "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6") {
+    for (let $i = 0; $i < 13; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369";
+    $[0] = "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6";
   }
   let className;
-  let ref;
+  let keyboardFocusable;
   let restProps;
   if ($[1] !== props) {
     ({
-      ref,
+      keyboardFocusable,
       className,
       ...restProps
     } = props);
     $[1] = props;
     $[2] = className;
-    $[3] = ref;
+    $[3] = keyboardFocusable;
     $[4] = restProps;
   } else {
     className = $[2];
-    ref = $[3];
+    keyboardFocusable = $[3];
     restProps = $[4];
   }
   let t0;
@@ -243,20 +244,31 @@ function TableRow(props) {
   }
   const classes = t0;
   let t1;
-  if ($[7] !== classes || $[8] !== ref || $[9] !== restProps) {
-    t1 = /*#__PURE__*/jsx("tr", {
-      ref: ref,
-      className: classes,
+  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
     });
-    $[7] = classes;
-    $[8] = ref;
-    $[9] = restProps;
-    $[10] = t1;
+    $[10] = classes;
+    $[11] = trRestProps;
+    $[12] = t2;
   } else {
-    t1 = $[10];
+    t2 = $[12];
   }
-  return t1;
+  return t2;
 }
 /**
  * A helper `<td>` component for a custom {@link TableProps.renderItem} implementations.
@@ -264,11 +276,11 @@ function TableRow(props) {
  */
 function TableCell(props) {
   const $ = c(9);
-  if ($[0] !== "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369") {
+  if ($[0] !== "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6") {
     for (let $i = 0; $i < 9; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369";
+    $[0] = "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6";
   }
   let className;
   let restProps;

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 };

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

@@ -11,12 +11,12 @@ interface Spacer {
     height: number;
     key: string;
 }
-export declare function useTableVirtualize({ enabled, length, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }: {
+export declare function useTableVirtualize<T>({ enabled, data, data: { length }, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }: {
     enabled: boolean;
-    length: number;
+    data: T[];
     scrollerRef: RefObject<HTMLElement | null> | undefined;
     tableRef: RefObject<HTMLTableElement | null>;
-    estimateHeight: (index: number) => number;
+    estimateHeight: (item: T, index: number, items: T[]) => number;
     lookaheadPx: number;
     retentionMarginPx: number;
     minScrollAndResizeDeltaPx: number;