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

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

@@ -1,9 +1,10 @@
-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 { mergeRefs } from 'react-merge-refs';
 import { CollapseItemIntoSpacerContext, TablePropsContext } from './table-const.js';
 import { useIsIntersectingListener } from '../global/intersection-observer-context.js';
-import { TableRow, TableCell } from './table-base.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';
@@ -15,162 +16,107 @@ import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import '../global/memoize.js';
+import './table-row-focus.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(35);
+  if ($[0] !== "550d56d2b4709142d4ace07b800bfd11367b60c980b981f1e1be21c6b691222c") {
+    for (let $i = 0; $i < 35; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "68402cdde9f06be4c8d26ab88d5718c4da4a28557eb40dcae73e15c87a598408";
+    $[0] = "550d56d2b4709142d4ace07b800bfd11367b60c980b981f1e1be21c6b691222c";
   }
   let className;
   let clickable;
   let index;
+  let keyboardFocusable;
   let level;
-  let onBlur;
-  let onKeyDown;
   let restProps;
+  let selected;
   let userRef;
   if ($[1] !== t0) {
     ({
-      ref: userRef,
       index,
+      keyboardFocusable,
       clickable,
+      selected,
       level,
+      ref: userRef,
       className,
-      onKeyDown,
-      onBlur,
       ...restProps
     } = t0);
     $[1] = t0;
     $[2] = className;
     $[3] = clickable;
     $[4] = index;
-    $[5] = level;
-    $[6] = onBlur;
-    $[7] = onKeyDown;
-    $[8] = restProps;
+    $[5] = keyboardFocusable;
+    $[6] = level;
+    $[7] = restProps;
+    $[8] = selected;
     $[9] = userRef;
   } else {
     className = $[2];
     clickable = $[3];
     index = $[4];
-    level = $[5];
-    onBlur = $[6];
-    onKeyDown = $[7];
-    restProps = $[8];
+    keyboardFocusable = $[5];
+    level = $[6];
+    restProps = $[7];
+    selected = $[8];
     userRef = $[9];
   }
-  const selfRef = useRef(null);
-  const ref = (_userRef = userRef) !== null && _userRef !== void 0 ? _userRef : selfRef;
-  const collapseItemIntoSpacer = useContext(CollapseItemIntoSpacerContext);
+  const localRef = useRef(null);
+  const collapseItemIntoSpacer = use(CollapseItemIntoSpacerContext);
   let t1;
-  if ($[10] !== collapseItemIntoSpacer || $[11] !== ref) {
+  if ($[10] !== collapseItemIntoSpacer) {
     t1 = isIntersecting => {
-      if (ref.current && !isIntersecting) {
-        collapseItemIntoSpacer(ref.current.getBoundingClientRect().height);
+      if (localRef.current && !isIntersecting) {
+        collapseItemIntoSpacer(localRef.current.getBoundingClientRect().height);
       }
     };
     $[10] = collapseItemIntoSpacer;
-    $[11] = ref;
-    $[12] = t1;
+    $[11] = t1;
   } else {
-    t1 = $[12];
+    t1 = $[11];
+  }
+  useIsIntersectingListener(localRef, t1);
+  const tableProps = use(TablePropsContext);
+  if (!tableProps) {
+    return null;
   }
-  useIsIntersectingListener(ref, t1);
   const {
     data,
-    columns,
-    selection,
-    isItemKeyboardFocusable,
-    onItemFocus
-  } = useContext(TablePropsContext);
+    columns
+  } = tableProps;
   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;
-  let t3;
-  if ($[19] !== item || $[20] !== selection) {
-    t3 = selection?.isFocused(item);
-    $[19] = item;
-    $[20] = selection;
-    $[21] = t3;
+  if ($[12] !== userRef) {
+    t2 = mergeRefs([userRef, localRef]);
+    $[12] = userRef;
+    $[13] = t2;
   } else {
-    t3 = $[21];
+    t2 = $[13];
   }
-  const focused = t3;
-  let t4;
+  const t3 = clickable && styles.clickableRow;
+  const t4 = selected && styles.selectedRow;
   let t5;
-  if ($[22] !== focused || $[23] !== ref) {
-    t4 = () => {
-      if (focused) {
-        ref.current?.focus();
-      }
-    };
-    t5 = [focused, ref];
-    $[22] = focused;
-    $[23] = ref;
-    $[24] = t4;
-    $[25] = t5;
+  if ($[14] !== className || $[15] !== t3 || $[16] !== t4) {
+    t5 = classNames(className, t3, t4);
+    $[14] = className;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
   } else {
-    t4 = $[24];
-    t5 = $[25];
+    t5 = $[17];
   }
-  useEffect(t4, t5);
   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;
-  } else {
-    t6 = $[30];
-  }
-  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) => {
+  if ($[18] !== columns || $[19] !== data || $[20] !== index || $[21] !== item || $[22] !== level) {
+    let t7;
+    if ($[24] !== data || $[25] !== index || $[26] !== item || $[27] !== level) {
+      t7 = (column, columnIndex) => {
         var _column$renderCell;
         return /*#__PURE__*/jsx(TableCell, {
           className: column.tdClassName?.(item, index, data),
@@ -180,48 +126,43 @@ function DefaultItemRenderer(t0) {
           children: (_column$renderCell = column.renderCell?.(item, index, data)) !== null && _column$renderCell !== void 0 ? _column$renderCell : getDefaultCellValue(item, columnIndex)
         }, column.key);
       };
-      $[37] = data;
-      $[38] = index;
-      $[39] = item;
-      $[40] = level;
-      $[41] = t11;
+      $[24] = data;
+      $[25] = index;
+      $[26] = item;
+      $[27] = level;
+      $[28] = t7;
     } else {
-      t11 = $[41];
+      t7 = $[28];
     }
-    t10 = columns.map(t11);
-    $[31] = columns;
-    $[32] = data;
-    $[33] = index;
-    $[34] = item;
-    $[35] = level;
-    $[36] = t10;
+    t6 = columns.map(t7);
+    $[18] = columns;
+    $[19] = data;
+    $[20] = index;
+    $[21] = item;
+    $[22] = level;
+    $[23] = t6;
   } else {
-    t10 = $[36];
+    t6 = $[23];
   }
-  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 t7;
+  if ($[29] !== keyboardFocusable || $[30] !== restProps || $[31] !== t2 || $[32] !== t5 || $[33] !== t6) {
+    t7 = /*#__PURE__*/jsx(TableRow, {
+      ref: t2,
+      keyboardFocusable: keyboardFocusable,
+      className: t5,
       ...restProps,
-      children: t10
+      children: t6
     });
-    $[42] = T0;
-    $[43] = handleKeyDown;
-    $[44] = ref;
-    $[45] = restProps;
-    $[46] = t10;
-    $[47] = t7;
-    $[48] = t8;
-    $[49] = t9;
-    $[50] = t11;
+    $[29] = keyboardFocusable;
+    $[30] = restProps;
+    $[31] = t2;
+    $[32] = t5;
+    $[33] = t6;
+    $[34] = t7;
   } else {
-    t11 = $[50];
+    t7 = $[34];
   }
-  return t11;
+  return t7;
 }
 function getDefaultCellValue(item, columnIndex) {
   if (Array.isArray(item)) {

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

@@ -1,44 +1,71 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithRef } from 'react';
 import type { TableProps } from './table';
 /**
  * The new Table component. Use it instead of tables in the `legacy-table` folder.
  *
- * Minimal usage requires the following props:
+ * For every prop and component referenced here, see the corresponding docs
+ * for detailed behavior.
+ *
+ * ## Minimal usage
+ *
+ * You need the following props:
  * - `data`
  * - `getKey`
  * - `columns`
  *   - `key`
- *   - `renderCell` (not required, but usually needed)
+ *   - `name` (not required but needed in most cases)
+ *   - `renderCell` (not required but needed in most cases)
  *
  * ## Selection
  *
- * Following three props support the selection:
+ * Selection is handled on item level via `renderItem` (often with
+ * `DefaultItemRenderer`) and its props:
+ *
+ * - `clickable`
+ * - `selected`
+ * - `onClick` or `onPointerUp`, etc.
  *
- * - `selection`
- * - `isItemClickable`
- * - `DefaultItemRenderer.onClick`
+ * You may use the TableSelection from `global/table-selection.ts` for the selection control:
  *
- * Only `selection` is required: you can display and modify selection your way, e.g., via
- * checkboxes in cells.
+ * - `selected={tableSelection.isSelected(item)}`
+ * - `onClick={() => setTableSelection(tableSelection.toggle(item))}`
+ *
+ * See the stories for examples with this utility.
+ *
+ * Additionally, for accessibility, you will likely need a cell with a checkbox
+ * to toggle item selection.
  *
  * ## Sorting
+ *
  * You need the following to support sorting:
  *
  * - Include `<SortButton />` in a column header
- * - Set initial `Column.sortOrder` to `none`, `ascending`.
- * Do not leave `undefined` for the accessibility reasons.
+ * - Set initial `Column.sortOrder` to `none`. Do not leave `undefined`
+ *   for accessibility reasons.
  * - Handle `TableProps.onSort` callback in the client code. It is expected
- * to update `columns`, by setting the new `sortOrder` value for
- * the corresponding column, and updating the data accordingly.
+ *   to update `columns` by setting the new `sortOrder` value for
+ *   the corresponding column, and updating the data accordingly.
+ *
+ * ## Focus
+ *
+ * The table supports the ["roving tabindex"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets#technique_1_roving_tabindex)
+ * technique to focus rows with the up/down arrow keys and, possibly, with the pointer.
+ * To support it, use the following props of the `DefaultItemRenderer`:
+ *
+ * - `keyboardFocusable`
+ * - Possibly `onClick` invoking `focusRow(e.currentTarget)`
+ *
+ * In your custom row renderer, use `TableRow`, which also has the `keyboardFocusable` prop.
  *
  * ## Deleting columns
+ *
  * You need the following to support deleting columns:
  *
  * - Make sure the `column` has a proper `name` or `key` prop, which will be
- * automatically included in the aria-label of `<DeleteColumnButton />`.
+ *   automatically included in the aria-label of `<DeleteColumnButton />`.
  * - Include `<DeleteColumnButton />` in a column header
  * - Handle `TableProps.onColumnDelete` callback in the client code. It is expected
- * to update `columns` by removing the corresponding column.
+ *   to update `columns` by removing the corresponding column.
  *
  * ## Row virtualization
  *
@@ -50,4 +77,4 @@ import type { TableProps } from './table';
  *   the default height (e.g. multiline or custom content)
  * - Fine-tuning props: `lookaheadPx`, `retentionMarginPx`, `minScrollAndResizeDeltaPx`
  */
-export default function Table<T>(props: TableProps<T> & ComponentPropsWithoutRef<'table'>): import("react").JSX.Element;
+export default function Table<T>(props: TableProps<T> & ComponentPropsWithRef<'table'>): import("react").JSX.Element;