@jetbrains/ring-ui-built 7.0.124 → 8.0.0-beta.10

package/components/table/internal/reorder-layout-context.d.ts

@@ -0,0 +1,16 @@
+interface ItemBounds {
+    start: number;
+    end: number;
+}
+export interface InsertionPoint {
+    itemIndex: number;
+    after: boolean;
+}
+interface ReorderLayoutContextValue {
+    registerReorderItem(index: number, getBounds: () => ItemBounds): () => void;
+    getItemBounds(index: number): ItemBounds | undefined;
+    getClosestInsertionPoint(clientOffset: number, canReorder: (insertionIndex: number) => boolean): InsertionPoint | undefined;
+}
+export declare const ReorderLayoutContext: import("react").Context<ReorderLayoutContextValue>;
+export declare function useReorderLayoutContextValue(): ReorderLayoutContextValue;
+export {};

package/components/table/internal/table-header.d.ts

@@ -0,0 +1 @@
+export declare function TableHeader<T>(): import("react").JSX.Element | null;

package/components/table/internal/virtualization.d.ts

@@ -0,0 +1,41 @@
+import { type RefObject } from 'react';
+import { type IntersectionObserverHandle } from '../../global/intersection-observer-context';
+export type VirtualItem = MaterializedItem | Spacer;
+interface MaterializedItem {
+    type: 'materialized';
+    index: number;
+}
+interface Spacer {
+    type: 'spacer';
+    from: number;
+    to: number;
+    height: number;
+    key: string;
+}
+type CollapseItemIntoSpacerCallback = (index: number, height: number) => void;
+interface VirtualizationContextValue {
+    intersectionObserverHandle: IntersectionObserverHandle;
+    collapseItemIntoSpacer: CollapseItemIntoSpacerCallback;
+}
+export declare const VirtualizationContext: import("react").Context<VirtualizationContextValue>;
+export declare function useVirtualItems<T>({ enabled, data, data: { length }, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }: {
+    enabled: boolean;
+    data: readonly T[];
+    scrollerRef: RefObject<HTMLElement | null> | undefined;
+    tableRef: RefObject<HTMLTableElement | null>;
+    estimateHeight: (item: T, index: number, items: readonly T[]) => number;
+    lookaheadPx: number;
+    retentionMarginPx: number;
+    minScrollAndResizeDeltaPx: number;
+}): {
+    virtualItems: VirtualItem[];
+    virtualizationContextValue: {
+        intersectionObserverHandle: IntersectionObserverHandle;
+        collapseItemIntoSpacer: (index: number, height: number) => void;
+    };
+};
+export declare function SpacerRow({ spacer: { from, to, height }, colSpan }: {
+    spacer: Spacer;
+    colSpan: number;
+}): import("react").JSX.Element;
+export {};

package/components/table/item-virtualization.d.ts

@@ -0,0 +1,37 @@
+import { type RefObject } from 'react';
+/**
+ * Use in an item renderer to control item virtualization.
+ */
+export declare function useItemVirtualization({ index, refs, onIntersectionChange, }: {
+    /**
+     * Index of the item.
+     */
+    index: number;
+    /**
+     * One or more elements representing this item.
+     *
+     * When multiple elements are provided, the virtualization callback receives
+     * the intersection state of all of them.
+     *
+     * If you pass multiple refs, pass a stable array reference to avoid restarting
+     * observation on every render — for example, memoize it with `useMemo()`,
+     * unless you use the React Compiler.
+     */
+    refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[];
+    /**
+     * Invoked when the `isIntersecting` state of the observed elements changes.
+     * Pass a stable function reference to avoid restarting observation on every render —
+     * for example, wrap it with `useCallback()`, unless you use the React Compiler.
+     *
+     * @param intersectionStates - Current intersection state of every observed element.
+     * Entries are initially `undefined` until the corresponding element
+     * has been reported by `IntersectionObserver`.
+     * @param changedIndex - Index of the element whose intersection state changed.
+     * @param elements - The observed elements. Note that some elements may
+     * already be disconnected from the DOM when this callback is invoked.
+     * Use additional checks like `element.isConnected`.
+     * @returns Return the height of an item to collapse the item into spacer,
+     * or `undefined` to keep the item rendered.
+     */
+    onIntersectionChange: (intersectionStates: (boolean | undefined)[], changedIndex: number, elements: (Element | null)[]) => number | undefined;
+}): void;

package/components/table/item-virtualization.js

@@ -0,0 +1,73 @@
+import { c } from 'react/compiler-runtime';
+import { use, useEffect } from 'react';
+import { VirtualizationContext } from '../internal/virtualization.js';
+import '../global/intersection-observer-context.js';
+import '../global/schedule-with-cleanup.js';
+import '../_helpers/table.js';
+import 'react/jsx-runtime';
+
+/**
+ * Use in an item renderer to control item virtualization.
+ */
+function useItemVirtualization(t0) {
+  const $ = c(8);
+  if ($[0] !== "28d3fc0a1c743c2e72a27a83caad5b78c5438f38b7abdd065da2a832e4f9fcec") {
+    for (let $i = 0; $i < 8; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "28d3fc0a1c743c2e72a27a83caad5b78c5438f38b7abdd065da2a832e4f9fcec";
+  }
+  const {
+    index,
+    refs,
+    onIntersectionChange
+  } = t0;
+  const {
+    intersectionObserverHandle,
+    collapseItemIntoSpacer
+  } = use(VirtualizationContext);
+  let t1;
+  let t2;
+  if ($[1] !== collapseItemIntoSpacer || $[2] !== index || $[3] !== intersectionObserverHandle || $[4] !== onIntersectionChange || $[5] !== refs) {
+    t1 = () => {
+      const intersectionStates = Array.isArray(refs) ? refs.map(_temp) : [undefined];
+      const elements = Array.isArray(refs) ? refs.map(_temp2) : [refs.current];
+      const cleanups = [];
+      elements.forEach((element, elementIndex) => {
+        if (!element) {
+          return;
+        }
+        const cleanup = intersectionObserverHandle.observe(element, isIntersecting => {
+          intersectionStates[elementIndex] = isIntersecting;
+          const height = onIntersectionChange(intersectionStates, elementIndex, elements);
+          if (height != null) {
+            collapseItemIntoSpacer(index, height);
+          }
+        });
+        cleanups.push(cleanup);
+      });
+      return () => cleanups.forEach(_temp3);
+    };
+    t2 = [collapseItemIntoSpacer, intersectionObserverHandle, index, onIntersectionChange, refs];
+    $[1] = collapseItemIntoSpacer;
+    $[2] = index;
+    $[3] = intersectionObserverHandle;
+    $[4] = onIntersectionChange;
+    $[5] = refs;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t1 = $[6];
+    t2 = $[7];
+  }
+  useEffect(t1, t2);
+}
+function _temp3(cleanup_0) {
+  return cleanup_0();
+}
+function _temp2(r) {
+  return r.current;
+}
+function _temp() {}
+
+export { useItemVirtualization };

package/components/table/reorder-animation.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Information about a column or item currently being animated after reorder.
+ *
+ * Available through {@link useReorderAnimation} to allow custom cell
+ * renderers to animate reordered columns and items consistently with the default
+ * table renderer.
+ */
+export interface ReorderAnimation {
+    /**
+     * What is animated: columns or items (rows).
+     */
+    direction: 'columns' | 'items';
+    /**
+     * Index of the column or item being animated.
+     */
+    index: number;
+    /**
+     * Current animation phase.
+     */
+    phase: 'initial' | 'fade-out';
+    /**
+     * CSS class to apply to the animated row, cell, or another element used to
+     * render the animation on this phase.
+     *
+     * The class sets `background-color` and `transition`. If your custom styles
+     * also define `transition` on the same element, they may conflict with the
+     * animation.
+     */
+    className: string;
+}
+/**
+ * Provides information about the currently animated column or item after reorder.
+ *
+ * Use in a custom cell renderer to animate reordered columns and items
+ * consistently with the default table renderer.
+ */
+export declare function useReorderAnimation(): ReorderAnimation | null;

package/components/table/reorder-animation.js

@@ -0,0 +1,18 @@
+import { use } from 'react';
+import { ReorderAnimationContext } from '../internal/reorder-animation-context.js';
+import 'react/compiler-runtime';
+import '../global/parse-css-duration.js';
+import '../global/schedule-with-cleanup.js';
+import '../_helpers/table.js';
+
+/**
+ * Provides information about the currently animated column or item after reorder.
+ *
+ * Use in a custom cell renderer to animate reordered columns and items
+ * consistently with the default table renderer.
+ */
+function useReorderAnimation() {
+  return use(ReorderAnimationContext).reorderAnimation;
+}
+
+export { useReorderAnimation };

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

@@ -0,0 +1,10 @@
+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>;
+/**
+ * When a row only contains unformatted single-line text, it will be exactly of this height.
+ */
+export declare const defaultRowHeight = 37;

package/components/table/table-const.js

@@ -0,0 +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);
+/**
+ * When a row only contains unformatted single-line text, it will be exactly of this height.
+ */
+const defaultRowHeight = 37;
+
+export { TablePropsContext, defaultRowHeight };

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

@@ -0,0 +1,64 @@
+import type { ComponentPropsWithRef } from 'react';
+export interface TableRowProps {
+    /**
+     * @see DefaultItemRendererProps.keyboardFocusable
+     */
+    keyboardFocusable?: boolean;
+}
+/**
+ * @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 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

@@ -0,0 +1,180 @@
+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';
+/**
+ * A helper `<tr>` component for custom {@link TableProps.renderItem} implementations.
+ * Applies the standard row class names.
+ */
+function TableRow(props) {
+  const $ = c(13);
+  if ($[0] !== "93324b17cadcfd02a0d3ded987965c5c50fdfc14a72160047cf34b19f7c0c48d") {
+    for (let $i = 0; $i < 13; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "93324b17cadcfd02a0d3ded987965c5c50fdfc14a72160047cf34b19f7c0c48d";
+  }
+  let className;
+  let keyboardFocusable;
+  let restProps;
+  if ($[1] !== props) {
+    ({
+      keyboardFocusable,
+      className,
+      ...restProps
+    } = props);
+    $[1] = props;
+    $[2] = className;
+    $[3] = keyboardFocusable;
+    $[4] = restProps;
+  } else {
+    className = $[2];
+    keyboardFocusable = $[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] !== keyboardFocusable || $[8] !== restProps) {
+    t1 = keyboardFocusable ? {
+      [keyboardFocusableAttrName]: "",
+      ...restProps
+    } : restProps;
+    $[7] = keyboardFocusable;
+    $[8] = restProps;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  const trRestProps = t1;
+  let t2;
+  if ($[10] !== classes || $[11] !== trRestProps) {
+    t2 = /*#__PURE__*/jsx("tr", {
+      className: classes,
+      ...trRestProps
+    });
+    $[10] = classes;
+    $[11] = trRestProps;
+    $[12] = t2;
+  } else {
+    t2 = $[12];
+  }
+  return t2;
+}
+/**
+ * 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] !== "93324b17cadcfd02a0d3ded987965c5c50fdfc14a72160047cf34b19f7c0c48d") {
+    for (let $i = 0; $i < 9; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "93324b17cadcfd02a0d3ded987965c5c50fdfc14a72160047cf34b19f7c0c48d";
+  }
+  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;
+}
+/**
+ * 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 { ItemReorderHandle, TableCell, TableRow, keyboardFocusableAttrName };