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

package/components/table/reorder-item-layout.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Registers the physical boundaries of a custom-rendered item with the reorder
+ * system, so that the insertion indicator and insertion point calculation are
+ * correct for items that span multiple rows or have non-standard sizing.
+ *
+ * `DefaultItemRenderer` calls this automatically. Use this hook in a custom item
+ * renderer when the default boundary measurement is insufficient — for example,
+ * when the item spans multiple rows, or when you don't use
+ * the `DefaultItemRenderer` at all.
+ *
+ * If you include `DefaultItemRenderer` inside your custom renderer, set its
+ * `noReorderLayout` prop to `true` to prevent double registration.
+ */
+export declare function useReorderItemLayout({ disabled, index, getBounds, }: {
+    /**
+     * When `true`, the item is not registered. Use to disable without violating
+     * the rules of hooks.
+     */
+    disabled?: boolean;
+    /**
+     * Index of the item in the `data` array.
+     */
+    index: number;
+    /**
+     * Returns the item's top and bottom client coordinates (in pixels, relative
+     * to the viewport).
+     */
+    getBounds: () => {
+        start: number;
+        end: number;
+    };
+}): void;

package/components/table/reorder-item-layout.js

@@ -0,0 +1,57 @@
+import { c } from 'react/compiler-runtime';
+import { use, useEffect } from 'react';
+import { ReorderLayoutContext } from '../internal/reorder-layout-context.js';
+
+/**
+ * Registers the physical boundaries of a custom-rendered item with the reorder
+ * system, so that the insertion indicator and insertion point calculation are
+ * correct for items that span multiple rows or have non-standard sizing.
+ *
+ * `DefaultItemRenderer` calls this automatically. Use this hook in a custom item
+ * renderer when the default boundary measurement is insufficient — for example,
+ * when the item spans multiple rows, or when you don't use
+ * the `DefaultItemRenderer` at all.
+ *
+ * If you include `DefaultItemRenderer` inside your custom renderer, set its
+ * `noReorderLayout` prop to `true` to prevent double registration.
+ */
+function useReorderItemLayout(t0) {
+  const $ = c(7);
+  if ($[0] !== "f6c2f22ac6ea5d08fd2648f9af507c996aa6e89216dff089c71921e1eb0bbd40") {
+    for (let $i = 0; $i < 7; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "f6c2f22ac6ea5d08fd2648f9af507c996aa6e89216dff089c71921e1eb0bbd40";
+  }
+  const {
+    disabled,
+    index,
+    getBounds
+  } = t0;
+  const {
+    registerReorderItem
+  } = use(ReorderLayoutContext);
+  let t1;
+  let t2;
+  if ($[1] !== disabled || $[2] !== getBounds || $[3] !== index || $[4] !== registerReorderItem) {
+    t1 = () => {
+      if (disabled) {
+        return;
+      }
+      return registerReorderItem(index, getBounds);
+    };
+    t2 = [index, getBounds, registerReorderItem, disabled];
+    $[1] = disabled;
+    $[2] = getBounds;
+    $[3] = index;
+    $[4] = registerReorderItem;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t1 = $[5];
+    t2 = $[6];
+  }
+  useEffect(t1, t2);
+}
+
+export { useReorderItemLayout };

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

@@ -1,8 +1,10 @@
-import type { TableProps } from './table';
+import type { TableProps } from './table-props';
+/**
+ * Use anywhere inside the table to get access to the props passed to it.
+ * Cast to `Context<TableProps<T>>` in usage place.
+ */
 export declare const TablePropsContext: import("react").Context<TableProps<unknown> | null>;
-export declare const ColumnIndexContext: import("react").Context<number>;
-export declare const CollapseItemIntoSpacerContext: import("react").Context<(height: number) => void>;
+/**
+ * When a row only contains unformatted single-line text, it will be exactly of this height.
+ */
 export declare const defaultRowHeight = 37;
-export declare const defaultLookaheadPx = 400;
-export declare const defaultRetentionMarginPx = 450;
-export declare const defaultMinScrollAndResizeDeltaPx = 50;

package/components/table/table-const.js

@@ -1,11 +1,13 @@
 import { createContext } from 'react';
 
+/**
+ * Use anywhere inside the table to get access to the props passed to it.
+ * Cast to `Context<TableProps<T>>` in usage place.
+ */
 const TablePropsContext = /*#__PURE__*/createContext(null);
-const ColumnIndexContext = /*#__PURE__*/createContext(-1);
-const CollapseItemIntoSpacerContext = /*#__PURE__*/createContext(() => {});
+/**
+ * When a row only contains unformatted single-line text, it will be exactly of this height.
+ */
 const defaultRowHeight = 37;
-const defaultLookaheadPx = 400;
-const defaultRetentionMarginPx = 450;
-const defaultMinScrollAndResizeDeltaPx = 50;
 
-export { CollapseItemIntoSpacerContext, ColumnIndexContext, TablePropsContext, defaultLookaheadPx, defaultMinScrollAndResizeDeltaPx, defaultRetentionMarginPx, defaultRowHeight };
+export { TablePropsContext, defaultRowHeight };

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

@@ -1,15 +1,4 @@
-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;
+import type { ComponentPropsWithRef } from 'react';
 export interface TableRowProps {
     /**
      * @see DefaultItemRendererProps.keyboardFocusable
@@ -17,12 +6,59 @@ export interface TableRowProps {
     keyboardFocusable?: boolean;
 }
 /**
- * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard row classnames.
+ * @internal
+ */
+export declare const keyboardFocusableAttrName = "data-keyboard-focusable";
+/**
+ * A helper `<tr>` component for custom {@link TableProps.renderItem} implementations.
+ * Applies the standard row class names.
  */
 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`.
+ * A helper `<td>` component for custom {@link TableProps.renderItem} implementations.
+ * Applies the standard cell class names, but not data-dependent `tdClassName`.
  */
 export declare function TableCell(props: ComponentPropsWithRef<'td'>): import("react").JSX.Element;
+/**
+ * - `'pointerdown'` means the user has pressed the mouse button or touched the handle.
+ * - `number` means the distance in pixels the user has dragged the handle along
+ *   the Y axis.
+ * - `'cancelled'` means the reorder was aborted — e.g. the user pressed Escape,
+ *   released the pointer outside the browser, or dropped the item at its original
+ *   position. Use this phase to play a cancellation animation in your custom renderer.
+ *   This state lasts 600 ms (matching the built-in cancel animation), after which
+ *   `undefined` is sent.
+ * - `undefined` means the drag interaction is fully over. Sent after a successful
+ *   reorder as well as after the `'cancelled'` phase, so you can always do cleanup
+ *   here without managing your own timer.
+ */
+export type DragState = 'pointerdown' | number | 'cancelled' | undefined;
+export interface ItemReorderHandleProps {
+    /**
+     * The index of the item in the table data array.
+     */
+    index: number;
+    /**
+     * When `true`, the drag frame, indicating the currently dragged item,
+     * will not be rendered.
+     */
+    noDragFrame?: boolean;
+    /**
+     * When `true`, the drag handle stays fixed in place instead of following
+     * the pointer during drag.
+     */
+    noHandleTranslate?: boolean;
+    /**
+     * Callback that is called when the user drags the handle.
+     * Use it for custom drag indication.
+     * The `TableProps.onItemReorder` will be called after this callback.
+     * @param state The current drag state.
+     */
+    onUserDrag?: (state: DragState) => void;
+}
+/**
+ * A drag handle that allows the user to reorder the row. Place it anywhere
+ * inside a row renderer.
+ * Use {@link TableProps.canReorderItem} and {@link TableProps.onItemReorder}.
+ */
+export declare function ItemReorderHandle({ index, ...restProps }: ItemReorderHandleProps & ComponentPropsWithRef<'button'>): import("react").JSX.Element;

package/components/table/table-primitives.js

@@ -1,220 +1,35 @@
 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';
-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 { ReorderHandle } from '../internal/reorder-handle.js';
 import { s as styles } from '../_helpers/table.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import '@jetbrains/icons/drag-12px';
+import './table-const.js';
+import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import '../global/memoize.js';
+import '../global/compose-refs.js';
+import 'memoize-one';
+import '../global/parse-css-duration.js';
+import '../internal/reorder-animation-context.js';
+import '../global/schedule-with-cleanup.js';
+import '../internal/reorder-layout-context.js';
 
-function SortButton(t0) {
-  var _column$sortOrder;
-  const $ = c(21);
-  if ($[0] !== "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6") {
-    for (let $i = 0; $i < 21; $i += 1) {
-      $[$i] = Symbol.for("react.memo_cache_sentinel");
-    }
-    $[0] = "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6";
-  }
-  let children;
-  let className;
-  let onClick;
-  let restProps;
-  if ($[1] !== t0) {
-    ({
-      className,
-      children,
-      onClick,
-      ...restProps
-    } = t0);
-    $[1] = t0;
-    $[2] = children;
-    $[3] = className;
-    $[4] = onClick;
-    $[5] = restProps;
-  } else {
-    children = $[2];
-    className = $[3];
-    onClick = $[4];
-    restProps = $[5];
-  }
-  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) {
-    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.columns);
-      }
-    };
-    $[6] = columnIndex;
-    $[7] = onClick;
-    $[8] = sortOrder;
-    $[9] = tableProps;
-    $[10] = t1;
-  } else {
-    t1 = $[10];
-  }
-  const handleClick = t1;
-  if (!tableProps || !column) {
-    return null;
-  }
-  let t2;
-  if ($[11] !== className) {
-    t2 = classNames(styles.headerButton, className);
-    $[11] = className;
-    $[12] = t2;
-  } else {
-    t2 = $[12];
-  }
-  let t3;
-  if ($[13] !== glyph) {
-    t3 = /*#__PURE__*/jsx(Icon, {
-      glyph: glyph,
-      "aria-hidden": true
-    });
-    $[13] = glyph;
-    $[14] = t3;
-  } else {
-    t3 = $[14];
-  }
-  let t4;
-  if ($[15] !== children || $[16] !== handleClick || $[17] !== restProps || $[18] !== t2 || $[19] !== t3) {
-    t4 = /*#__PURE__*/jsxs("button", {
-      type: "button",
-      className: t2,
-      onClick: handleClick,
-      ...restProps,
-      children: [children, " ", t3]
-    });
-    $[15] = children;
-    $[16] = handleClick;
-    $[17] = restProps;
-    $[18] = t2;
-    $[19] = t3;
-    $[20] = t4;
-  } else {
-    t4 = $[20];
-  }
-  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(t0) {
-  var _column$name;
-  const $ = c(17);
-  if ($[0] !== "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6") {
-    for (let $i = 0; $i < 17; $i += 1) {
-      $[$i] = Symbol.for("react.memo_cache_sentinel");
-    }
-    $[0] = "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6";
-  }
-  let className;
-  let onClick;
-  let restProps;
-  if ($[1] !== t0) {
-    ({
-      className,
-      onClick,
-      ...restProps
-    } = t0);
-    $[1] = t0;
-    $[2] = className;
-    $[3] = onClick;
-    $[4] = restProps;
-  } else {
-    className = $[2];
-    onClick = $[3];
-    restProps = $[4];
-  }
-  const tableProps = use(TablePropsContext);
-  const columnIndex = use(ColumnIndexContext);
-  const column = tableProps?.columns[columnIndex];
-  let t1;
-  if ($[5] !== columnIndex || $[6] !== onClick || $[7] !== tableProps) {
-    t1 = e => {
-      onClick?.(e);
-      if (!e.defaultPrevented) {
-        tableProps.onColumnDelete?.(columnIndex, tableProps.columns);
-      }
-    };
-    $[5] = columnIndex;
-    $[6] = onClick;
-    $[7] = tableProps;
-    $[8] = t1;
-  } else {
-    t1 = $[8];
-  }
-  const handleClick = t1;
-  if (!tableProps || !column) {
-    return null;
-  }
-  let t2;
-  if ($[9] !== className) {
-    t2 = classNames(styles.headerButton, styles.deleteColumnButton, className);
-    $[9] = className;
-    $[10] = t2;
-  } else {
-    t2 = $[10];
-  }
-  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")) {
-    t4 = /*#__PURE__*/jsx(Icon, {
-      glyph: trashIcon
-    });
-    $[11] = t4;
-  } else {
-    t4 = $[11];
-  }
-  let t5;
-  if ($[12] !== handleClick || $[13] !== restProps || $[14] !== t2 || $[15] !== t3) {
-    t5 = /*#__PURE__*/jsx("button", {
-      type: "button",
-      className: t2,
-      onClick: handleClick,
-      "aria-label": t3,
-      ...restProps,
-      children: t4
-    });
-    $[12] = handleClick;
-    $[13] = restProps;
-    $[14] = t2;
-    $[15] = t3;
-    $[16] = t5;
-  } else {
-    t5 = $[16];
-  }
-  return t5;
-}
+const keyboardFocusableAttrName = 'data-keyboard-focusable';
 /**
- * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard row classnames.
+ * A helper `<tr>` component for custom {@link TableProps.renderItem} implementations.
+ * Applies the standard row class names.
  */
 function TableRow(props) {
   const $ = c(13);
-  if ($[0] !== "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6") {
+  if ($[0] !== "93324b17cadcfd02a0d3ded987965c5c50fdfc14a72160047cf34b19f7c0c48d") {
     for (let $i = 0; $i < 13; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6";
+    $[0] = "93324b17cadcfd02a0d3ded987965c5c50fdfc14a72160047cf34b19f7c0c48d";
   }
   let className;
   let keyboardFocusable;
@@ -271,16 +86,16 @@ function TableRow(props) {
   return t2;
 }
 /**
- * A helper `<td>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard cell classnames, but not data-dependent `tdClassName`.
+ * A helper `<td>` component for custom {@link TableProps.renderItem} implementations.
+ * Applies the standard cell class names, but not data-dependent `tdClassName`.
  */
 function TableCell(props) {
   const $ = c(9);
-  if ($[0] !== "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6") {
+  if ($[0] !== "93324b17cadcfd02a0d3ded987965c5c50fdfc14a72160047cf34b19f7c0c48d") {
     for (let $i = 0; $i < 9; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "a3c4e3796f16ce90212b13068ef9cd73f05ae49747114b4d67f34019d7274ef6";
+    $[0] = "93324b17cadcfd02a0d3ded987965c5c50fdfc14a72160047cf34b19f7c0c48d";
   }
   let className;
   let restProps;
@@ -319,5 +134,47 @@ function TableCell(props) {
   }
   return t1;
 }
+/**
+ * A drag handle that allows the user to reorder the row. Place it anywhere
+ * inside a row renderer.
+ * Use {@link TableProps.canReorderItem} and {@link TableProps.onItemReorder}.
+ */
+function ItemReorderHandle(t0) {
+  const $ = c(7);
+  if ($[0] !== "93324b17cadcfd02a0d3ded987965c5c50fdfc14a72160047cf34b19f7c0c48d") {
+    for (let $i = 0; $i < 7; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "93324b17cadcfd02a0d3ded987965c5c50fdfc14a72160047cf34b19f7c0c48d";
+  }
+  let index;
+  let restProps;
+  if ($[1] !== t0) {
+    ({
+      index,
+      ...restProps
+    } = t0);
+    $[1] = t0;
+    $[2] = index;
+    $[3] = restProps;
+  } else {
+    index = $[2];
+    restProps = $[3];
+  }
+  let t1;
+  if ($[4] !== index || $[5] !== restProps) {
+    t1 = /*#__PURE__*/jsx(ReorderHandle, {
+      direction: "items",
+      index: index,
+      ...restProps
+    });
+    $[4] = index;
+    $[5] = restProps;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
+}
 
-export { DeleteColumnButton, SortButton, TableCell, TableRow };
+export { ItemReorderHandle, TableCell, TableRow, keyboardFocusableAttrName };