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

package/components/table/table-component.js

@@ -1,14 +1,15 @@
-import { c } from 'react-compiler-runtime';
+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 { defaultMinScrollAndResizeDeltaPx, defaultRetentionMarginPx, defaultLookaheadPx, TablePropsContext, CollapseItemIntoSpacerContext, defaultRowHeight, ColumnIndexContext } from './table-const.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 { jsxs, jsx } from 'react/jsx-runtime';
-import '../global/use-event-callback.js';
-import './table-base.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';
@@ -20,17 +21,18 @@ import '../_helpers/icon-svg.js';
 import '../global/memoize.js';
 
 function Table(props) {
-  var _userRef;
-  const $ = c(66);
-  if ($[0] !== "c5cbf342ef76906cf21ee6f16da41c5d4e7db7a707456ae37dfa4f28ed5d910a") {
-    for (let $i = 0; $i < 66; $i += 1) {
+  const $ = c(56);
+  if ($[0] !== "9306af42aa8ad63ab7b8766f741b6ce2a028dd9b7f320f9f4ee30c0e95ec844f") {
+    for (let $i = 0; $i < 56; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "c5cbf342ef76906cf21ee6f16da41c5d4e7db7a707456ae37dfa4f28ed5d910a";
+    $[0] = "9306af42aa8ad63ab7b8766f741b6ce2a028dd9b7f320f9f4ee30c0e95ec844f";
   }
   let className;
   let columns;
   let data;
+  let getKey;
+  let noHeader;
   let renderItem;
   let restProps;
   let scrollerRef;
@@ -47,166 +49,134 @@ function Table(props) {
     const {
       data: t5,
       columns: t6,
-      getKey,
-      selection,
-      isItemKeyboardFocusable,
-      onItemFocus,
+      getKey: t7,
+      noHeader: t8,
       onItemMove,
       onSort,
       onColumnDelete,
       onColumnMove,
-      renderItem: t7,
-      virtualizeRows: t8,
-      scrollerRef: t9,
-      estimateHeight: t10,
-      lookaheadPx: t11,
-      retentionMarginPx: t12,
-      minScrollAndResizeDeltaPx: t13,
+      renderItem: t9,
+      virtualizeRows: t10,
+      scrollerRef: t11,
+      estimateHeight: t12,
+      lookaheadPx: t13,
+      retentionMarginPx: t14,
+      minScrollAndResizeDeltaPx: t15,
       columnEditButton,
-      ref: t14,
-      className: t15,
       theadClassName: t16,
       theadTrClassName: t17,
       tbodyClassName: t18,
-      ...t19
+      ref: t19,
+      className: t20,
+      ...t21
     } = props;
     data = t5;
     columns = t6;
-    renderItem = t7;
-    t0 = t8;
-    scrollerRef = t9;
-    t1 = t10;
-    t2 = t11;
-    t3 = t12;
-    t4 = t13;
-    userRef = t14;
-    className = t15;
+    getKey = t7;
+    noHeader = t8;
+    renderItem = t9;
+    t0 = t10;
+    scrollerRef = t11;
+    t1 = t12;
+    t2 = t13;
+    t3 = t14;
+    t4 = t15;
     theadClassName = t16;
     theadTrClassName = t17;
     tbodyClassName = t18;
-    restProps = t19;
+    userRef = t19;
+    className = t20;
+    restProps = t21;
     $[1] = props;
     $[2] = className;
     $[3] = columns;
     $[4] = data;
-    $[5] = renderItem;
-    $[6] = restProps;
-    $[7] = scrollerRef;
-    $[8] = t0;
-    $[9] = t1;
-    $[10] = t2;
-    $[11] = t3;
-    $[12] = t4;
-    $[13] = tbodyClassName;
-    $[14] = theadClassName;
-    $[15] = theadTrClassName;
-    $[16] = userRef;
+    $[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];
-    renderItem = $[5];
-    restProps = $[6];
-    scrollerRef = $[7];
-    t0 = $[8];
-    t1 = $[9];
-    t2 = $[10];
-    t3 = $[11];
-    t4 = $[12];
-    tbodyClassName = $[13];
-    theadClassName = $[14];
-    theadTrClassName = $[15];
-    userRef = $[16];
+    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 selfRef = useRef(null);
-  const tableRef = (_userRef = userRef) !== null && _userRef !== void 0 ? _userRef : selfRef;
-  let t5;
-  if ($[17] !== data.length || $[18] !== estimateHeight || $[19] !== lookaheadPx || $[20] !== minScrollAndResizeDeltaPx || $[21] !== retentionMarginPx || $[22] !== scrollerRef || $[23] !== tableRef || $[24] !== virtualizeRows) {
-    t5 = {
-      enabled: virtualizeRows,
-      length: data.length,
-      scrollerRef,
-      tableRef,
-      estimateHeight,
-      lookaheadPx,
-      retentionMarginPx,
-      minScrollAndResizeDeltaPx
-    };
-    $[17] = data.length;
-    $[18] = estimateHeight;
-    $[19] = lookaheadPx;
-    $[20] = minScrollAndResizeDeltaPx;
-    $[21] = retentionMarginPx;
-    $[22] = scrollerRef;
-    $[23] = tableRef;
-    $[24] = virtualizeRows;
-    $[25] = t5;
-  } else {
-    t5 = $[25];
-  }
+  const localRef = useRef(null);
   const {
     virtualItems,
     intersectionObserverHandle,
     collapseItemIntoSpacer
-  } = useTableVirtualize(t5);
-  let t6;
-  if ($[26] !== className) {
-    t6 = classNames(styles.table, className);
-    $[26] = className;
-    $[27] = t6;
+  } = 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 {
-    t6 = $[27];
+    t5 = $[20];
   }
+  const t6 = mergeRefs([userRef, localRef]);
   let t7;
-  if ($[28] !== theadTrClassName) {
-    t7 = classNames(styles.headerRow, theadTrClassName);
-    $[28] = theadTrClassName;
-    $[29] = t7;
-  } else {
-    t7 = $[29];
-  }
-  let t8;
-  if ($[30] !== columns) {
-    t8 = columns.map(_temp2);
-    $[30] = columns;
-    $[31] = t8;
-  } else {
-    t8 = $[31];
-  }
-  let t9;
-  if ($[32] !== t7 || $[33] !== t8) {
-    t9 = /*#__PURE__*/jsx("tr", {
-      className: t7,
-      children: t8
-    });
-    $[32] = t7;
-    $[33] = t8;
-    $[34] = t9;
-  } else {
-    t9 = $[34];
-  }
-  let t10;
-  if ($[35] !== t9 || $[36] !== theadClassName) {
-    t10 = /*#__PURE__*/jsx("thead", {
+  if ($[21] !== columns || $[22] !== noHeader || $[23] !== theadClassName || $[24] !== theadTrClassName) {
+    t7 = !noHeader && /*#__PURE__*/jsx("thead", {
       className: theadClassName,
-      children: t9
+      children: /*#__PURE__*/jsx("tr", {
+        className: classNames(styles.headerRow, theadTrClassName),
+        children: columns.map(_temp2)
+      })
     });
-    $[35] = t9;
-    $[36] = theadClassName;
-    $[37] = t10;
+    $[21] = columns;
+    $[22] = noHeader;
+    $[23] = theadClassName;
+    $[24] = theadTrClassName;
+    $[25] = t7;
   } else {
-    t10 = $[37];
+    t7 = $[25];
   }
-  let t11;
-  if ($[38] !== collapseItemIntoSpacer || $[39] !== columns.length || $[40] !== data || $[41] !== props || $[42] !== renderItem || $[43] !== virtualItems) {
-    let t12;
-    if ($[45] !== collapseItemIntoSpacer || $[46] !== columns.length || $[47] !== data || $[48] !== props || $[49] !== renderItem) {
-      t12 = virtualItem => {
+  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,
@@ -215,95 +185,99 @@ function Table(props) {
         }
         const index = virtualItem.index;
         const item = data[index];
-        const key = props.getKey(item, index);
-        return /*#__PURE__*/jsx(CollapseItemIntoSpacerContext.Provider, {
+        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);
       };
-      $[45] = collapseItemIntoSpacer;
-      $[46] = columns.length;
-      $[47] = data;
-      $[48] = props;
-      $[49] = renderItem;
-      $[50] = t12;
+      $[33] = collapseItemIntoSpacer;
+      $[34] = columns;
+      $[35] = data;
+      $[36] = getKey;
+      $[37] = renderItem;
+      $[38] = t9;
     } else {
-      t12 = $[50];
+      t9 = $[38];
     }
-    t11 = virtualItems.map(t12);
-    $[38] = collapseItemIntoSpacer;
-    $[39] = columns.length;
-    $[40] = data;
-    $[41] = props;
-    $[42] = renderItem;
-    $[43] = virtualItems;
-    $[44] = t11;
+    t8 = virtualItems.map(t9);
+    $[26] = collapseItemIntoSpacer;
+    $[27] = columns;
+    $[28] = data;
+    $[29] = getKey;
+    $[30] = renderItem;
+    $[31] = virtualItems;
+    $[32] = t8;
   } else {
-    t11 = $[44];
+    t8 = $[32];
   }
-  let t12;
-  if ($[51] !== t11 || $[52] !== tbodyClassName) {
-    t12 = /*#__PURE__*/jsx("tbody", {
+  let t9;
+  if ($[39] !== t8 || $[40] !== tbodyClassName) {
+    t9 = /*#__PURE__*/jsx("tbody", {
       className: tbodyClassName,
-      children: t11
+      onKeyDown: onKeyDownTbody,
+      onBlurCapture: onBlurCaptureTbody,
+      children: t8
     });
-    $[51] = t11;
-    $[52] = tbodyClassName;
-    $[53] = t12;
+    $[39] = t8;
+    $[40] = tbodyClassName;
+    $[41] = t9;
   } else {
-    t12 = $[53];
+    t9 = $[41];
   }
-  let t13;
-  if ($[54] !== restProps || $[55] !== t10 || $[56] !== t12 || $[57] !== t6 || $[58] !== tableRef) {
-    t13 = /*#__PURE__*/jsxs("table", {
-      className: t6,
-      ref: tableRef,
+  let t10;
+  if ($[42] !== restProps || $[43] !== t5 || $[44] !== t6 || $[45] !== t7 || $[46] !== t9) {
+    t10 = /*#__PURE__*/jsxs("table", {
+      className: t5,
+      ref: t6,
       ...restProps,
-      children: [t10, t12]
+      children: [t7, t9]
     });
-    $[54] = restProps;
-    $[55] = t10;
-    $[56] = t12;
-    $[57] = t6;
-    $[58] = tableRef;
-    $[59] = t13;
+    $[42] = restProps;
+    $[43] = t5;
+    $[44] = t6;
+    $[45] = t7;
+    $[46] = t9;
+    $[47] = t10;
   } else {
-    t13 = $[59];
+    t10 = $[47];
   }
-  let t14;
-  if ($[60] !== intersectionObserverHandle || $[61] !== t13) {
-    t14 = /*#__PURE__*/jsx(IntersectionObserverContext.Provider, {
+  let t11;
+  if ($[48] !== T1 || $[49] !== intersectionObserverHandle || $[50] !== t10) {
+    t11 = /*#__PURE__*/jsx(T1, {
       value: intersectionObserverHandle,
-      children: t13
+      children: t10
     });
-    $[60] = intersectionObserverHandle;
-    $[61] = t13;
-    $[62] = t14;
+    $[48] = T1;
+    $[49] = intersectionObserverHandle;
+    $[50] = t10;
+    $[51] = t11;
   } else {
-    t14 = $[62];
+    t11 = $[51];
   }
-  let t15;
-  if ($[63] !== props || $[64] !== t14) {
-    t15 = /*#__PURE__*/jsx(TablePropsContext.Provider, {
+  let t12;
+  if ($[52] !== T0 || $[53] !== props || $[54] !== t11) {
+    t12 = /*#__PURE__*/jsx(T0, {
       value: props,
-      children: t14
+      children: t11
     });
-    $[63] = props;
-    $[64] = t14;
-    $[65] = t15;
+    $[52] = T0;
+    $[53] = props;
+    $[54] = t11;
+    $[55] = t12;
   } else {
-    t15 = $[65];
+    t12 = $[55];
   }
-  return t15;
+  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.Provider, {
+    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)
     })

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;