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

package/components/tab-trap/tab-trap.d.ts

@@ -2,6 +2,7 @@ import { type HTMLAttributes, type ReactNode } from 'react';
 import * as React from 'react';
 export declare const FOCUSABLE_ELEMENTS = "input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])";
 export interface TabTrapProps extends HTMLAttributes<HTMLElement> {
+    ref?: React.Ref<TabTrapObject>;
     children: ReactNode;
     trapDisabled?: boolean;
     autoFocusFirst?: boolean;
@@ -11,8 +12,7 @@ export interface TabTrapProps extends HTMLAttributes<HTMLElement> {
 /**
  * @name TabTrap
  */
-interface TabTrap {
+export interface TabTrapObject {
     node: HTMLElement | null;
 }
-declare const TabTrap: React.ForwardRefExoticComponent<TabTrapProps & React.RefAttributes<TabTrap>>;
-export default TabTrap;
+export default function TabTrap({ ref, children, trapDisabled, autoFocusFirst, focusBackOnClose, focusBackOnExit, ...restProps }: TabTrapProps): React.JSX.Element;

package/components/tab-trap/tab-trap.js

@@ -1,21 +1,21 @@
-import { c } from 'react-compiler-runtime';
-import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
+import { c } from 'react/compiler-runtime';
+import { useRef, useImperativeHandle, useEffect } from 'react';
 import { isNodeInVisiblePartOfPage } from '../global/dom.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var styles = {"trapButton":"ring-tab-trap-trapButton"};
 
 const FOCUSABLE_ELEMENTS = 'input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])';
-// eslint-disable-next-line no-shadow
-const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
-  const $ = c(38);
-  if ($[0] !== "2100b1464fbf6825dd3f080feb9e20c095c3f9f9256eec8ae18adf474c19d1f2") {
-    for (let $i = 0; $i < 38; $i += 1) {
+function TabTrap(t0) {
+  const $ = c(39);
+  if ($[0] !== "daf3c9f73144edaae4842be22241426b0a063f37615637c8bca095939d2fdeaf") {
+    for (let $i = 0; $i < 39; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "2100b1464fbf6825dd3f080feb9e20c095c3f9f9256eec8ae18adf474c19d1f2";
+    $[0] = "daf3c9f73144edaae4842be22241426b0a063f37615637c8bca095939d2fdeaf";
   }
   let children;
+  let ref;
   let restProps;
   let t1;
   let t2;
@@ -23,6 +23,7 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
   let t4;
   if ($[1] !== t0) {
     ({
+      ref,
       children,
       trapDisabled: t1,
       autoFocusFirst: t2,
@@ -32,18 +33,20 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
     } = t0);
     $[1] = t0;
     $[2] = children;
-    $[3] = restProps;
-    $[4] = t1;
-    $[5] = t2;
-    $[6] = t3;
-    $[7] = t4;
+    $[3] = ref;
+    $[4] = restProps;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
   } else {
     children = $[2];
-    restProps = $[3];
-    t1 = $[4];
-    t2 = $[5];
-    t3 = $[6];
-    t4 = $[7];
+    ref = $[3];
+    restProps = $[4];
+    t1 = $[5];
+    t2 = $[6];
+    t3 = $[7];
+    t4 = $[8];
   }
   const trapDisabled = t1 === undefined ? false : t1;
   const autoFocusFirst = t2 === undefined ? true : t2;
@@ -59,20 +62,20 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
   }
   let t5;
   let t6;
-  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
     t5 = () => ({
       node: nodeRef.current
     });
     t6 = [];
-    $[8] = t5;
-    $[9] = t6;
+    $[9] = t5;
+    $[10] = t6;
   } else {
-    t5 = $[8];
-    t6 = $[9];
+    t5 = $[9];
+    t6 = $[10];
   }
   useImperativeHandle(ref, t5, t6);
   let t7;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
     t7 = function restoreFocusIfUnmounted(orElse) {
       const previousFocusedNode = previousFocusedNodeRef.current;
       if (previousFocusedNode instanceof HTMLElement && previousFocusedNode.focus && isNodeInVisiblePartOfPage(previousFocusedNode) && mountedRef.current === false) {
@@ -83,13 +86,13 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
         orElse?.();
       }
     };
-    $[10] = t7;
+    $[11] = t7;
   } else {
-    t7 = $[10];
+    t7 = $[11];
   }
   const restoreFocusIfUnmounted = t7;
   let t8;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
     t8 = function focusElement(t9) {
       const first = t9 === undefined ? true : t9;
       const node = nodeRef.current;
@@ -102,30 +105,30 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
         toBeFocused.focus();
       }
     };
-    $[11] = t8;
+    $[12] = t8;
   } else {
-    t8 = $[11];
+    t8 = $[12];
   }
   const focusElement = t8;
   let t9;
-  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
     t9 = () => focusElement(true);
-    $[12] = t9;
+    $[13] = t9;
   } else {
-    t9 = $[12];
+    t9 = $[13];
   }
   const focusFirst = t9;
   let t10;
-  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
     t10 = () => focusElement(false);
-    $[13] = t10;
+    $[14] = t10;
   } else {
-    t10 = $[13];
+    t10 = $[14];
   }
   const focusLast = t10;
   let t11;
   let t12;
-  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
     t11 = () => {
       mountedRef.current = true;
       return () => {
@@ -133,16 +136,16 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
       };
     };
     t12 = [];
-    $[14] = t11;
-    $[15] = t12;
+    $[15] = t11;
+    $[16] = t12;
   } else {
-    t11 = $[14];
-    t12 = $[15];
+    t11 = $[15];
+    t12 = $[16];
   }
   useEffect(t11, t12);
   let t13;
   let t14;
-  if ($[16] !== autoFocusFirst || $[17] !== focusBackOnClose || $[18] !== trapDisabled) {
+  if ($[17] !== autoFocusFirst || $[18] !== focusBackOnClose || $[19] !== trapDisabled) {
     t13 = () => {
       if (autoFocusFirst) {
         focusFirst();
@@ -163,18 +166,18 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
       };
     };
     t14 = [autoFocusFirst, trapDisabled, focusBackOnClose, focusFirst];
-    $[16] = autoFocusFirst;
-    $[17] = focusBackOnClose;
-    $[18] = trapDisabled;
-    $[19] = t13;
-    $[20] = t14;
+    $[17] = autoFocusFirst;
+    $[18] = focusBackOnClose;
+    $[19] = trapDisabled;
+    $[20] = t13;
+    $[21] = t14;
   } else {
-    t13 = $[19];
-    t14 = $[20];
+    t13 = $[20];
+    t14 = $[21];
   }
   useEffect(t13, t14);
   let t15;
-  if ($[21] !== focusBackOnExit) {
+  if ($[22] !== focusBackOnExit) {
     t15 = function focusLastIfEnabled(event) {
       if (trapWithoutFocusRef.current) {
         return;
@@ -188,14 +191,14 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
         focusLast();
       }
     };
-    $[21] = focusBackOnExit;
-    $[22] = t15;
+    $[22] = focusBackOnExit;
+    $[23] = t15;
   } else {
-    t15 = $[22];
+    t15 = $[23];
   }
   const focusLastIfEnabled = t15;
   let t16;
-  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
     t16 = function handleBlurIfWithoutFocus(event_0) {
       if (!trapWithoutFocusRef.current) {
         return;
@@ -210,13 +213,13 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
       }
       focusLast();
     };
-    $[23] = t16;
+    $[24] = t16;
   } else {
-    t16 = $[23];
+    t16 = $[24];
   }
   const handleBlurIfWithoutFocus = t16;
   let t17;
-  if ($[24] !== focusBackOnExit) {
+  if ($[25] !== focusBackOnExit) {
     t17 = function restoreFocusOrFocusFirst() {
       if (focusBackOnExit) {
         restoreFocusIfUnmounted(focusFirst);
@@ -224,30 +227,30 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
         focusFirst();
       }
     };
-    $[24] = focusBackOnExit;
-    $[25] = t17;
+    $[25] = focusBackOnExit;
+    $[26] = t17;
   } else {
-    t17 = $[25];
+    t17 = $[26];
   }
   const restoreFocusOrFocusFirst = t17;
   if (trapDisabled) {
     let t18;
-    if ($[26] !== children || $[27] !== restProps) {
+    if ($[27] !== children || $[28] !== restProps) {
       t18 = /*#__PURE__*/jsx("div", {
         ref: nodeRef,
         ...restProps,
         children: children
       });
-      $[26] = children;
-      $[27] = restProps;
-      $[28] = t18;
+      $[27] = children;
+      $[28] = restProps;
+      $[29] = t18;
     } else {
-      t18 = $[28];
+      t18 = $[29];
     }
     return t18;
   }
   let t18;
-  if ($[29] !== focusLastIfEnabled) {
+  if ($[30] !== focusLastIfEnabled) {
     t18 = /*#__PURE__*/jsx("div", {
       tabIndex: 0,
       ref: trapButtonNodeRef,
@@ -256,40 +259,40 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(t0, ref) {
       onBlur: handleBlurIfWithoutFocus,
       "data-trap-button": true
     });
-    $[29] = focusLastIfEnabled;
-    $[30] = t18;
+    $[30] = focusLastIfEnabled;
+    $[31] = t18;
   } else {
-    t18 = $[30];
+    t18 = $[31];
   }
   let t19;
-  if ($[31] !== restoreFocusOrFocusFirst) {
+  if ($[32] !== restoreFocusOrFocusFirst) {
     t19 = /*#__PURE__*/jsx("div", {
       tabIndex: 0,
       onFocus: restoreFocusOrFocusFirst,
       "data-trap-button": true
     });
-    $[31] = restoreFocusOrFocusFirst;
-    $[32] = t19;
+    $[32] = restoreFocusOrFocusFirst;
+    $[33] = t19;
   } else {
-    t19 = $[32];
+    t19 = $[33];
   }
   let t20;
-  if ($[33] !== children || $[34] !== restProps || $[35] !== t18 || $[36] !== t19) {
+  if ($[34] !== children || $[35] !== restProps || $[36] !== t18 || $[37] !== t19) {
     t20 = /*#__PURE__*/jsxs("div", {
       ref: nodeRef,
       ...restProps,
       children: [t18, children, t19]
     });
-    $[33] = children;
-    $[34] = restProps;
-    $[35] = t18;
-    $[36] = t19;
-    $[37] = t20;
+    $[34] = children;
+    $[35] = restProps;
+    $[36] = t18;
+    $[37] = t19;
+    $[38] = t20;
   } else {
-    t20 = $[37];
+    t20 = $[38];
   }
   return t20;
-});
+}
 function _temp(item) {
   return item.tabIndex >= 0;
 }

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

@@ -0,0 +1,36 @@
+import { type ComponentPropsWithRef } from 'react';
+export interface DefaultItemRendererProps {
+    /**
+     * The index of the `data` item to render.
+     */
+    index: number;
+    /**
+     * If true, the row will be focusable with up/down arrow keys.
+     * Focus is implemented using the
+     * ["roving tabindex"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets#technique_1_roving_tabindex)
+     * technique, that is, only the focused row has `tabIndex={0}`.
+     *
+     * To focus the row on click or other user interaction, add e.g. `onClick()`
+     * and invoke `focusRow(e.currentTarget)` imported from `table-row-focus.ts`.
+     */
+    keyboardFocusable?: boolean;
+    /**
+     * Changes the background on hover and applies the pointer cursor.
+     * Note that `false` does not mean the row cannot handle `onClick`.
+     */
+    clickable?: boolean;
+    /**
+     * If true, the row is highlighted as selected, that is, with the
+     * a different background color.
+     */
+    selected?: boolean;
+    /**
+     * A level of a nested item. Results in an indent for columns with `indent: true`.
+     * 0, negative values, and an unset value mean no indent.
+     */
+    level?: number;
+}
+/**
+ * @see TableProps.renderItem
+ */
+export declare function DefaultItemRenderer<T>({ index, keyboardFocusable, clickable, selected, level, ref: userRef, className, ...restProps }: DefaultItemRendererProps & ComponentPropsWithRef<'tr'>): import("react").JSX.Element | null;

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

@@ -0,0 +1,182 @@
+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-primitives.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';
+import './table-row-focus.js';
+
+const INDENT_SIZE = 24;
+/**
+ * @see TableProps.renderItem
+ */
+function DefaultItemRenderer(t0) {
+  const $ = c(35);
+  if ($[0] !== "550d56d2b4709142d4ace07b800bfd11367b60c980b981f1e1be21c6b691222c") {
+    for (let $i = 0; $i < 35; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "550d56d2b4709142d4ace07b800bfd11367b60c980b981f1e1be21c6b691222c";
+  }
+  let className;
+  let clickable;
+  let index;
+  let keyboardFocusable;
+  let level;
+  let restProps;
+  let selected;
+  let userRef;
+  if ($[1] !== t0) {
+    ({
+      index,
+      keyboardFocusable,
+      clickable,
+      selected,
+      level,
+      ref: userRef,
+      className,
+      ...restProps
+    } = t0);
+    $[1] = t0;
+    $[2] = className;
+    $[3] = clickable;
+    $[4] = index;
+    $[5] = keyboardFocusable;
+    $[6] = level;
+    $[7] = restProps;
+    $[8] = selected;
+    $[9] = userRef;
+  } else {
+    className = $[2];
+    clickable = $[3];
+    index = $[4];
+    keyboardFocusable = $[5];
+    level = $[6];
+    restProps = $[7];
+    selected = $[8];
+    userRef = $[9];
+  }
+  const localRef = useRef(null);
+  const collapseItemIntoSpacer = use(CollapseItemIntoSpacerContext);
+  let t1;
+  if ($[10] !== collapseItemIntoSpacer) {
+    t1 = isIntersecting => {
+      if (localRef.current && !isIntersecting) {
+        collapseItemIntoSpacer(localRef.current.getBoundingClientRect().height);
+      }
+    };
+    $[10] = collapseItemIntoSpacer;
+    $[11] = t1;
+  } else {
+    t1 = $[11];
+  }
+  useIsIntersectingListener(localRef, t1);
+  const tableProps = use(TablePropsContext);
+  if (!tableProps) {
+    return null;
+  }
+  const {
+    data,
+    columns
+  } = tableProps;
+  const item = data[index];
+  let t2;
+  if ($[12] !== userRef) {
+    t2 = mergeRefs([userRef, localRef]);
+    $[12] = userRef;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  const t3 = clickable && styles.clickableRow;
+  const t4 = selected && styles.selectedRow;
+  let t5;
+  if ($[14] !== className || $[15] !== t3 || $[16] !== t4) {
+    t5 = classNames(className, t3, t4);
+    $[14] = className;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  let t6;
+  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),
+          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);
+      };
+      $[24] = data;
+      $[25] = index;
+      $[26] = item;
+      $[27] = level;
+      $[28] = t7;
+    } else {
+      t7 = $[28];
+    }
+    t6 = columns.map(t7);
+    $[18] = columns;
+    $[19] = data;
+    $[20] = index;
+    $[21] = item;
+    $[22] = level;
+    $[23] = t6;
+  } else {
+    t6 = $[23];
+  }
+  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: t6
+    });
+    $[29] = keyboardFocusable;
+    $[30] = restProps;
+    $[31] = t2;
+    $[32] = t5;
+    $[33] = t6;
+    $[34] = t7;
+  } else {
+    t7 = $[34];
+  }
+  return t7;
+}
+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-component.d.ts

@@ -0,0 +1,80 @@
+import { type ComponentPropsWithRef } from 'react';
+import type { TableProps } from './table';
+/**
+ * The new Table component. Use it instead of tables in the `legacy-table` folder.
+ *
+ * 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`
+ *   - `name` (not required but needed in most cases)
+ *   - `renderCell` (not required but needed in most cases)
+ *
+ * ## Selection
+ *
+ * Selection is handled on item level via `renderItem` (often with
+ * `DefaultItemRenderer`) and its props:
+ *
+ * - `clickable`
+ * - `selected`
+ * - `onClick` or `onPointerUp`, etc.
+ *
+ * You may use the TableSelection from `global/table-selection.ts` for the selection control:
+ *
+ * - `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`. 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.
+ *
+ * ## 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 />`.
+ * - 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> & ComponentPropsWithRef<'table'>): import("react").JSX.Element;