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

package/components/table/default-item-renderer.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export interface DefaultItemRendererProps {
+    /**
+     * Installed on the `<tr>` element
+     */
+    ref?: React.RefObject<HTMLTableRowElement | null>;
+    /**
+     * The index of the `data` item to render
+     */
+    index: number;
+    /**
+     * Changes the highlight on hover and applies the pointer cursor.
+     * Note that `false` doesn't mean it cannot handle `onClick`.
+     */
+    clickable?: boolean;
+    /**
+     * A level of a nested item. Results in an indent for columns with `indent: true`.
+     * 0, negative and not set mean no indent.
+     */
+    level?: number;
+}
+/**
+ * @see TableProps.renderItem
+ */
+export declare function DefaultItemRenderer<T>({ ref: userRef, index, clickable, level, className, onKeyDown, onBlur, ...restProps }: DefaultItemRendererProps & ComponentPropsWithoutRef<'tr'>): import("react").JSX.Element;

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

@@ -0,0 +1,241 @@
+import { c } from 'react-compiler-runtime';
+import { useRef, useContext, useEffect } 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 { 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';
+
+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) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "68402cdde9f06be4c8d26ab88d5718c4da4a28557eb40dcae73e15c87a598408";
+  }
+  let className;
+  let clickable;
+  let index;
+  let level;
+  let onBlur;
+  let onKeyDown;
+  let restProps;
+  let userRef;
+  if ($[1] !== t0) {
+    ({
+      ref: userRef,
+      index,
+      clickable,
+      level,
+      className,
+      onKeyDown,
+      onBlur,
+      ...restProps
+    } = t0);
+    $[1] = t0;
+    $[2] = className;
+    $[3] = clickable;
+    $[4] = index;
+    $[5] = level;
+    $[6] = onBlur;
+    $[7] = onKeyDown;
+    $[8] = restProps;
+    $[9] = userRef;
+  } else {
+    className = $[2];
+    clickable = $[3];
+    index = $[4];
+    level = $[5];
+    onBlur = $[6];
+    onKeyDown = $[7];
+    restProps = $[8];
+    userRef = $[9];
+  }
+  const selfRef = useRef(null);
+  const ref = (_userRef = userRef) !== null && _userRef !== void 0 ? _userRef : selfRef;
+  const collapseItemIntoSpacer = useContext(CollapseItemIntoSpacerContext);
+  let t1;
+  if ($[10] !== collapseItemIntoSpacer || $[11] !== ref) {
+    t1 = isIntersecting => {
+      if (ref.current && !isIntersecting) {
+        collapseItemIntoSpacer(ref.current.getBoundingClientRect().height);
+      }
+    };
+    $[10] = collapseItemIntoSpacer;
+    $[11] = ref;
+    $[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;
+  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();
+      }
+    };
+    t5 = [focused, ref];
+    $[22] = focused;
+    $[23] = ref;
+    $[24] = t4;
+    $[25] = t5;
+  } else {
+    t4 = $[24];
+    t5 = $[25];
+  }
+  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) => {
+        var _column$renderCell;
+        return /*#__PURE__*/jsx(TableCell, {
+          className: column.tdClassName?.(item, index, data),
+          style: column.indent && level != null && level > 0 ? {
+            paddingInlineStart: `${level * INDENT_SIZE}px`
+          } : undefined,
+          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;
+    } else {
+      t11 = $[41];
+    }
+    t10 = columns.map(t11);
+    $[31] = columns;
+    $[32] = data;
+    $[33] = index;
+    $[34] = item;
+    $[35] = level;
+    $[36] = t10;
+  } else {
+    t10 = $[36];
+  }
+  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,
+      ...restProps,
+      children: t10
+    });
+    $[42] = T0;
+    $[43] = handleKeyDown;
+    $[44] = ref;
+    $[45] = restProps;
+    $[46] = t10;
+    $[47] = t7;
+    $[48] = t8;
+    $[49] = t9;
+    $[50] = t11;
+  } else {
+    t11 = $[50];
+  }
+  return t11;
+}
+function getDefaultCellValue(item, columnIndex) {
+  if (Array.isArray(item)) {
+    var _item$columnIndex;
+    return String((_item$columnIndex = item[columnIndex]) !== null && _item$columnIndex !== void 0 ? _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 : '');
+  }
+  if (columnIndex === 0) {
+    return String(item);
+  }
+  return '';
+}
+
+export { DefaultItemRenderer };

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

@@ -0,0 +1,24 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * Include it in a column header to make the column sortable.
+ * Handle clicks with {@link TableProps.onSort}.
+ */
+export declare function SortButton<T>(props: ComponentPropsWithoutRef<'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>(props: ComponentPropsWithoutRef<'button'>): import("react").JSX.Element | null;
+/**
+ * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
+ * Applies the standard row classnames.
+ */
+export declare function TableRow(props: {
+    ref?: React.Ref<HTMLTableRowElement>;
+} & ComponentPropsWithoutRef<'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: ComponentPropsWithoutRef<'td'>): import("react").JSX.Element;

package/components/table/table-base.js

@@ -0,0 +1,311 @@
+import { c } from 'react-compiler-runtime';
+import { useContext } 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 { 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(props) {
+  var _column$sortOrder;
+  const $ = c(21);
+  if ($[0] !== "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369") {
+    for (let $i = 0; $i < 21; $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;
+  }
+  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) {
+    ({
+      className,
+      children,
+      onClick,
+      ...restProps
+    } = props);
+    $[1] = props;
+    $[2] = children;
+    $[3] = className;
+    $[4] = onClick;
+    $[5] = restProps;
+  } else {
+    children = $[2];
+    className = $[3];
+    onClick = $[4];
+    restProps = $[5];
+  }
+  let t0;
+  if ($[6] !== columnIndex || $[7] !== onClick || $[8] !== sortOrder || $[9] !== tableProps) {
+    t0 = function handleClick(e) {
+      onClick?.(e);
+      if (!e.defaultPrevented) {
+        const sequence = ["none", "ascending", "descending"];
+        const nextOrder = sequence[(sequence.indexOf(sortOrder) + 1) % sequence.length];
+        tableProps.onSort?.(columnIndex, nextOrder);
+      }
+    };
+    $[6] = columnIndex;
+    $[7] = onClick;
+    $[8] = sortOrder;
+    $[9] = tableProps;
+    $[10] = t0;
+  } else {
+    t0 = $[10];
+  }
+  const handleClick = t0;
+  let t1;
+  if ($[11] !== className) {
+    t1 = classNames(styles.headerButton, className);
+    $[11] = className;
+    $[12] = t1;
+  } else {
+    t1 = $[12];
+  }
+  let t2;
+  if ($[13] !== glyph) {
+    t2 = /*#__PURE__*/jsx(Icon, {
+      glyph: glyph,
+      "aria-hidden": true
+    });
+    $[13] = glyph;
+    $[14] = t2;
+  } else {
+    t2 = $[14];
+  }
+  let t3;
+  if ($[15] !== children || $[16] !== handleClick || $[17] !== restProps || $[18] !== t1 || $[19] !== t2) {
+    t3 = /*#__PURE__*/jsxs("button", {
+      type: "button",
+      className: t1,
+      onClick: handleClick,
+      ...restProps,
+      children: [children, " ", t2]
+    });
+    $[15] = children;
+    $[16] = handleClick;
+    $[17] = restProps;
+    $[18] = t1;
+    $[19] = t2;
+    $[20] = t3;
+  } else {
+    t3 = $[20];
+  }
+  return t3;
+}
+/**
+ * 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) {
+  var _column$name;
+  const $ = c(17);
+  if ($[0] !== "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369") {
+    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;
+  }
+  let className;
+  let onClick;
+  let restProps;
+  if ($[1] !== props) {
+    ({
+      className,
+      onClick,
+      ...restProps
+    } = props);
+    $[1] = props;
+    $[2] = className;
+    $[3] = onClick;
+    $[4] = restProps;
+  } else {
+    className = $[2];
+    onClick = $[3];
+    restProps = $[4];
+  }
+  let t0;
+  if ($[5] !== columnIndex || $[6] !== onClick || $[7] !== tableProps) {
+    t0 = function handleClick(e) {
+      onClick?.(e);
+      if (!e.defaultPrevented) {
+        tableProps.onColumnDelete?.(columnIndex);
+      }
+    };
+    $[5] = columnIndex;
+    $[6] = onClick;
+    $[7] = tableProps;
+    $[8] = t0;
+  } else {
+    t0 = $[8];
+  }
+  const handleClick = t0;
+  let t1;
+  if ($[9] !== className) {
+    t1 = classNames(styles.headerButton, styles.deleteColumnButton, className);
+    $[9] = className;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  const t2 = `Delete column ${(_column$name = column.name) !== null && _column$name !== void 0 ? _column$name : String(column.key)}`;
+  let t3;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /*#__PURE__*/jsx(Icon, {
+      glyph: trashIcon
+    });
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  let t4;
+  if ($[12] !== handleClick || $[13] !== restProps || $[14] !== t1 || $[15] !== t2) {
+    t4 = /*#__PURE__*/jsx("button", {
+      type: "button",
+      className: t1,
+      onClick: handleClick,
+      "aria-label": t2,
+      ...restProps,
+      children: t3
+    });
+    $[12] = handleClick;
+    $[13] = restProps;
+    $[14] = t1;
+    $[15] = t2;
+    $[16] = t4;
+  } else {
+    t4 = $[16];
+  }
+  return t4;
+}
+/**
+ * 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) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369";
+  }
+  let className;
+  let ref;
+  let restProps;
+  if ($[1] !== props) {
+    ({
+      ref,
+      className,
+      ...restProps
+    } = props);
+    $[1] = props;
+    $[2] = className;
+    $[3] = ref;
+    $[4] = restProps;
+  } else {
+    className = $[2];
+    ref = $[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] !== classes || $[8] !== ref || $[9] !== restProps) {
+    t1 = /*#__PURE__*/jsx("tr", {
+      ref: ref,
+      className: classes,
+      ...restProps
+    });
+    $[7] = classes;
+    $[8] = ref;
+    $[9] = restProps;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  return t1;
+}
+/**
+ * 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] !== "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369") {
+    for (let $i = 0; $i < 9; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "41002a734705c9c4f3ba11120213f00b7457aedaa8304bff045a817c65d54369";
+  }
+  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-component.d.ts

@@ -0,0 +1,53 @@
+import { type ComponentPropsWithoutRef } 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:
+ * - `data`
+ * - `getKey`
+ * - `columns`
+ *   - `key`
+ *   - `renderCell` (not required, but usually needed)
+ *
+ * ## Selection
+ *
+ * Following three props support the selection:
+ *
+ * - `selection`
+ * - `isItemClickable`
+ * - `DefaultItemRenderer.onClick`
+ *
+ * Only `selection` is required: you can display and modify selection your way, e.g., via
+ * checkboxes in cells.
+ *
+ * ## 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.
+ * - 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.
+ *
+ * ## 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 />`.
+ * - 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.
+ *
+ * ## Row virtualization
+ *
+ * To render only rows near the viewport and replace others with spacers, use:
+ *
+ * - `virtualizeRows`
+ * - `scrollerRef` — required when the scrollable container is not the whole document
+ * - `estimateHeight` — recommended when rows are expected to be taller than
+ *   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;