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

package/components/table/table-const.js

@@ -5,16 +5,9 @@ import { createContext } from 'react';
  * Cast to `Context<TableProps<T>>` in usage place.
  */
 const TablePropsContext = /*#__PURE__*/createContext(null);
-/**
- * Provides information about the currently animated column.
- *
- * Use in a custom cell renderer to animate reordered columns
- * consistently with the default table renderer.
- */
-const ColumnAnimationContext = /*#__PURE__*/createContext(null);
 /**
  * When a row only contains unformatted single-line text, it will be exactly of this height.
  */
 const defaultRowHeight = 37;
 
-export { ColumnAnimationContext, TablePropsContext, defaultRowHeight };
+export { TablePropsContext, defaultRowHeight };

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

@@ -19,3 +19,46 @@ export declare function TableRow(props: TableRowProps & ComponentPropsWithRef<'t
  * 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,7 +1,22 @@
 import { c } from 'react/compiler-runtime';
 import classNames from 'classnames';
+import { ReorderHandle } from '../internal/reorder-handle.js';
 import { s as styles } from '../_helpers/table.js';
 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';
 
 const keyboardFocusableAttrName = 'data-keyboard-focusable';
 /**
@@ -10,11 +25,11 @@ const keyboardFocusableAttrName = 'data-keyboard-focusable';
  */
 function TableRow(props) {
   const $ = c(13);
-  if ($[0] !== "cabc2a5dbbf0c25c3facc4244a2cfb0e9361a7af6c622110f3bd4ba41a3d1955") {
+  if ($[0] !== "93324b17cadcfd02a0d3ded987965c5c50fdfc14a72160047cf34b19f7c0c48d") {
     for (let $i = 0; $i < 13; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "cabc2a5dbbf0c25c3facc4244a2cfb0e9361a7af6c622110f3bd4ba41a3d1955";
+    $[0] = "93324b17cadcfd02a0d3ded987965c5c50fdfc14a72160047cf34b19f7c0c48d";
   }
   let className;
   let keyboardFocusable;
@@ -76,11 +91,11 @@ function TableRow(props) {
  */
 function TableCell(props) {
   const $ = c(9);
-  if ($[0] !== "cabc2a5dbbf0c25c3facc4244a2cfb0e9361a7af6c622110f3bd4ba41a3d1955") {
+  if ($[0] !== "93324b17cadcfd02a0d3ded987965c5c50fdfc14a72160047cf34b19f7c0c48d") {
     for (let $i = 0; $i < 9; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "cabc2a5dbbf0c25c3facc4244a2cfb0e9361a7af6c622110f3bd4ba41a3d1955";
+    $[0] = "93324b17cadcfd02a0d3ded987965c5c50fdfc14a72160047cf34b19f7c0c48d";
   }
   let className;
   let restProps;
@@ -119,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 { TableCell, TableRow, keyboardFocusableAttrName };
+export { ItemReorderHandle, TableCell, TableRow, keyboardFocusableAttrName };

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

@@ -34,7 +34,7 @@ export interface TableProps<T> {
      * Called when the user clicks on a column delete button in the header.
      * The client is expected to update the `columns` prop with the column removed.
      */
-    onColumnDelete?: (columnIndex: number, columns: readonly Column<T>[]) => void;
+    onColumnDelete?: (column: Column<T>, columnIndex: number, columns: readonly Column<T>[]) => void;
     /**
      * Called when the user reorders columns by dragging a column.
      * The `insertionIndex` parameter represents an insertion position in the original,
@@ -43,20 +43,44 @@ export interface TableProps<T> {
      * One possible implementation is:
      *
      * ```ts
-     * const [moved] = columns.splice(fromIndex, 1);
-     * columns.splice(fromIndex < insertionIndex ? insertionIndex - 1 : insertionIndex, 0, moved);
+     * columns.splice(fromIndex, 1);
+     * columns.splice(fromIndex < insertionIndex ? insertionIndex - 1 : insertionIndex, 0, columnBeingReordered);
      * ```
      *
      * The callback is not called when the reorder operation would not change the
      * column order, i.e. when
      * `insertionIndex === fromIndex || insertionIndex === fromIndex + 1`.
      */
-    onColumnReorder?: (fromIndex: number, insertionIndex: number, columns: readonly Column<T>[]) => void;
+    onColumnReorder?: (columnBeingReordered: Column<T>, fromIndex: number, insertionIndex: number, columns: readonly Column<T>[]) => void;
     /**
      * By default, when a column is reordered, the moved column is highlighted
      * with a temporary background color. Set `true` to disable this animation.
      */
     noColumnReorderAnimation?: boolean;
+    /**
+     * If defined, determines whether an item may be reordered to a specific insertion position.
+     * If not defined, any item may be reordered to any position.
+     */
+    canReorderItem?: (itemBeingReordered: T, fromIndex: number, insertionIndex: number, items: readonly T[]) => boolean;
+    /**
+     * Called when the user reorders items by dragging a handle.
+     * The `insertionIndex` parameter represents an insertion position in the original,
+     * unchanged `data` array before the item is removed. See {@link TableProps.onColumnReorder}
+     * for an example implementation.
+     *
+     * To make reorder possible, render `ItemReorderHandle` (from `table-primitives`)
+     * anywhere in a row.
+     *
+     * The callback is not called when the reorder operation would not change the
+     * item order, i.e. when
+     * `insertionIndex === fromIndex || insertionIndex === fromIndex + 1`.
+     */
+    onItemReorder?: (itemBeingReordered: T, fromIndex: number, insertionIndex: number, items: readonly T[]) => void;
+    /**
+     * By default, when an item is reordered, the moved item is highlighted
+     * with a temporary background color. Set `true` to disable this animation.
+     */
+    noItemReorderAnimation?: boolean;
     /**
      * Customizes how an item is rendered.
      *
@@ -266,7 +290,7 @@ export interface Column<T> {
      * Make sure {@link Column.name} or {@link Column.key} is meaningful,
      * as it will be included in the `aria-label` of the reorder button.
      */
-    canReorder?: boolean | ((insertionIndex: number, columns: readonly Column<T>[]) => boolean);
+    canReorder?: boolean | ((columnBeingReordered: Column<T>, fromIndex: number, insertionIndex: number, columns: readonly Column<T>[]) => boolean);
     /**
      * The class name to apply to the `th` element inside `table > thead`.
      */

package/components/table/table.d.ts

@@ -89,7 +89,7 @@ import type { TableProps } from './table-props';
  * Note that for accessibility reasons, you should have a cell with a checkbox
  * to display and toggle item selection.
  *
- * ## Rows focus
+ * ## Row focus
  *
  * The table implements 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.
@@ -157,6 +157,23 @@ import type { TableProps } from './table-props';
  *   expected to update `columns` by moving the corresponding column to the
  *   new position.
  *
+ * ## Item reorder
+ *
+ * To allow the user to reorder rows by dragging:
+ *
+ * - Place `ItemReorderHandle` (from `table/table-primitives`) anywhere inside
+ *   a cell. It renders a drag icon button the user can grab to reorder the row.
+ * - Handle `TableProps.onItemReorder`. It is expected to update `data` by
+ *   moving the item to the new position.
+ * - Optionally, set `TableProps.canReorderItem` to restrict which positions
+ *   an item may be dropped into.
+ *
+ * By default, dragging shows a drag frame (a border around the dragged row)
+ * and an insertion indicator (a line between rows showing where the item will
+ * land). To implement fully custom drag visuals, set `noDragFrame` and
+ * `noHandleTranslate` on `ItemReorderHandle` and use its `onUserDrag` callback
+ * to track the drag lifecycle.
+ *
  * ## Row virtualization
  *
  * To render only rows near the viewport while replacing off-screen rows with
@@ -198,10 +215,19 @@ import type { TableProps } from './table-props';
  * set the `noItemVirtualization` prop to `true`, otherwise it will also try
  * to control the virtualization, possibly reporting incorrect item height.
  *
- * ### Column reorder animation
+ * ### Item reorder
+ *
+ * If `TableProps.onItemReorder` is set and your item spans multiple rows, call
+ * `useReorderItemLayout()` (from `table/reorder-item-layout`) to register the
+ * item's boundaries so the insertion indicator and insertion point calculation
+ * are correct. If `DefaultItemRenderer` is included inside your custom renderer,
+ * set its `noReorderLayout` prop to `true` to prevent double registration.
+ *
+ * ### Reorder animation
  *
- * Default-rendered rows highlight the column that was just reordered. To apply
- * the same animation to your custom-rendered rows, use `ColumnAnimationContext`
- * (from `table/table-const`) to get information about the currently animated column.
+ * After a column or item is reordered, the table briefly highlights the moved
+ * element. To apply the same animation in your custom-rendered rows, use
+ * `useReorderAnimation()` (from `table/reorder-animation`) to get information
+ * about the currently animated column or item.
  */
 export default function Table<T>(props: TableProps<T> & ComponentPropsWithRef<'table'>): React.JSX.Element;