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

package/components/global/composeRefs.d.ts

@@ -1,6 +0,0 @@
-import { createComposedRef as _createComposedRef } from './compose-refs';
-/**
- * @deprecated Use createComposedRef from './compose-refs' instead
- */
-declare const createComposedRef: typeof _createComposedRef;
-export { createComposedRef };

package/components/global/composeRefs.js

@@ -1,9 +0,0 @@
-import { createComposedRef as createComposedRef$1 } from './compose-refs.js';
-import 'memoize-one';
-
-/**
- * @deprecated Use createComposedRef from './compose-refs' instead
- */
-const createComposedRef = createComposedRef$1;
-
-export { createComposedRef };

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

@@ -1,80 +0,0 @@
-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;

package/components/table/table-component.js

@@ -1,290 +0,0 @@
-import { c } from 'react/compiler-runtime';
-import { useRef } from 'react';
-import classNames from 'classnames';
-import { mergeRefs } from 'react-merge-refs';
-import { IntersectionObserverContext } from '../global/intersection-observer-context.js';
-import { useTableVirtualize, SpacerRow } from './table-virtualize.js';
-import { DefaultItemRenderer } from './default-item-renderer.js';
-import { TablePropsContext, CollapseItemIntoSpacerContext, defaultMinScrollAndResizeDeltaPx, defaultLookaheadPx, defaultRetentionMarginPx, ColumnIndexContext, defaultRowHeight } from './table-const.js';
-import { onBlurCaptureTbody, onKeyDownTbody } from './table-row-focus.js';
-import { s as styles } from '../_helpers/table.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import './table-primitives.js';
-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';
-
-function Table(props) {
-  const $ = c(56);
-  if ($[0] !== "9306af42aa8ad63ab7b8766f741b6ce2a028dd9b7f320f9f4ee30c0e95ec844f") {
-    for (let $i = 0; $i < 56; $i += 1) {
-      $[$i] = Symbol.for("react.memo_cache_sentinel");
-    }
-    $[0] = "9306af42aa8ad63ab7b8766f741b6ce2a028dd9b7f320f9f4ee30c0e95ec844f";
-  }
-  let className;
-  let columns;
-  let data;
-  let getKey;
-  let noHeader;
-  let renderItem;
-  let restProps;
-  let scrollerRef;
-  let t0;
-  let t1;
-  let t2;
-  let t3;
-  let t4;
-  let tbodyClassName;
-  let theadClassName;
-  let theadTrClassName;
-  let userRef;
-  if ($[1] !== props) {
-    const {
-      data: t5,
-      columns: t6,
-      getKey: t7,
-      noHeader: t8,
-      onItemMove,
-      onSort,
-      onColumnDelete,
-      onColumnMove,
-      renderItem: t9,
-      virtualizeRows: t10,
-      scrollerRef: t11,
-      estimateHeight: t12,
-      lookaheadPx: t13,
-      retentionMarginPx: t14,
-      minScrollAndResizeDeltaPx: t15,
-      columnEditButton,
-      theadClassName: t16,
-      theadTrClassName: t17,
-      tbodyClassName: t18,
-      ref: t19,
-      className: t20,
-      ...t21
-    } = props;
-    data = t5;
-    columns = t6;
-    getKey = t7;
-    noHeader = t8;
-    renderItem = t9;
-    t0 = t10;
-    scrollerRef = t11;
-    t1 = t12;
-    t2 = t13;
-    t3 = t14;
-    t4 = t15;
-    theadClassName = t16;
-    theadTrClassName = t17;
-    tbodyClassName = t18;
-    userRef = t19;
-    className = t20;
-    restProps = t21;
-    $[1] = props;
-    $[2] = className;
-    $[3] = columns;
-    $[4] = data;
-    $[5] = getKey;
-    $[6] = noHeader;
-    $[7] = renderItem;
-    $[8] = restProps;
-    $[9] = scrollerRef;
-    $[10] = t0;
-    $[11] = t1;
-    $[12] = t2;
-    $[13] = t3;
-    $[14] = t4;
-    $[15] = tbodyClassName;
-    $[16] = theadClassName;
-    $[17] = theadTrClassName;
-    $[18] = userRef;
-  } else {
-    className = $[2];
-    columns = $[3];
-    data = $[4];
-    getKey = $[5];
-    noHeader = $[6];
-    renderItem = $[7];
-    restProps = $[8];
-    scrollerRef = $[9];
-    t0 = $[10];
-    t1 = $[11];
-    t2 = $[12];
-    t3 = $[13];
-    t4 = $[14];
-    tbodyClassName = $[15];
-    theadClassName = $[16];
-    theadTrClassName = $[17];
-    userRef = $[18];
-  }
-  const virtualizeRows = t0 === undefined ? false : t0;
-  const estimateHeight = t1 === undefined ? _temp : t1;
-  const lookaheadPx = t2 === undefined ? defaultLookaheadPx : t2;
-  const retentionMarginPx = t3 === undefined ? defaultRetentionMarginPx : t3;
-  const minScrollAndResizeDeltaPx = t4 === undefined ? defaultMinScrollAndResizeDeltaPx : t4;
-  const localRef = useRef(null);
-  const {
-    virtualItems,
-    intersectionObserverHandle,
-    collapseItemIntoSpacer
-  } = useTableVirtualize({
-    enabled: virtualizeRows,
-    data,
-    scrollerRef,
-    tableRef: localRef,
-    estimateHeight,
-    lookaheadPx,
-    retentionMarginPx,
-    minScrollAndResizeDeltaPx
-  });
-  const T0 = TablePropsContext;
-  const T1 = IntersectionObserverContext;
-  let t5;
-  if ($[19] !== className) {
-    t5 = classNames(styles.table, className);
-    $[19] = className;
-    $[20] = t5;
-  } else {
-    t5 = $[20];
-  }
-  const t6 = mergeRefs([userRef, localRef]);
-  let t7;
-  if ($[21] !== columns || $[22] !== noHeader || $[23] !== theadClassName || $[24] !== theadTrClassName) {
-    t7 = !noHeader && /*#__PURE__*/jsx("thead", {
-      className: theadClassName,
-      children: /*#__PURE__*/jsx("tr", {
-        className: classNames(styles.headerRow, theadTrClassName),
-        children: columns.map(_temp2)
-      })
-    });
-    $[21] = columns;
-    $[22] = noHeader;
-    $[23] = theadClassName;
-    $[24] = theadTrClassName;
-    $[25] = t7;
-  } else {
-    t7 = $[25];
-  }
-  let t8;
-  if ($[26] !== collapseItemIntoSpacer || $[27] !== columns || $[28] !== data || $[29] !== getKey || $[30] !== renderItem || $[31] !== virtualItems) {
-    let t9;
-    if ($[33] !== collapseItemIntoSpacer || $[34] !== columns || $[35] !== data || $[36] !== getKey || $[37] !== renderItem) {
-      t9 = virtualItem => {
-        if (virtualItem.type === "spacer") {
-          return /*#__PURE__*/jsx(SpacerRow, {
-            spacer: virtualItem,
-            colSpan: columns.length
-          }, virtualItem.key);
-        }
-        const index = virtualItem.index;
-        const item = data[index];
-        const key = getKey(item, index, data);
-        return /*#__PURE__*/jsx(CollapseItemIntoSpacerContext, {
-          value: height => collapseItemIntoSpacer(index, height),
-          children: renderItem ? renderItem(item, index, data) : /*#__PURE__*/jsx(DefaultItemRenderer, {
-            index: index
-          })
-        }, key);
-      };
-      $[33] = collapseItemIntoSpacer;
-      $[34] = columns;
-      $[35] = data;
-      $[36] = getKey;
-      $[37] = renderItem;
-      $[38] = t9;
-    } else {
-      t9 = $[38];
-    }
-    t8 = virtualItems.map(t9);
-    $[26] = collapseItemIntoSpacer;
-    $[27] = columns;
-    $[28] = data;
-    $[29] = getKey;
-    $[30] = renderItem;
-    $[31] = virtualItems;
-    $[32] = t8;
-  } else {
-    t8 = $[32];
-  }
-  let t9;
-  if ($[39] !== t8 || $[40] !== tbodyClassName) {
-    t9 = /*#__PURE__*/jsx("tbody", {
-      className: tbodyClassName,
-      onKeyDown: onKeyDownTbody,
-      onBlurCapture: onBlurCaptureTbody,
-      children: t8
-    });
-    $[39] = t8;
-    $[40] = tbodyClassName;
-    $[41] = t9;
-  } else {
-    t9 = $[41];
-  }
-  let t10;
-  if ($[42] !== restProps || $[43] !== t5 || $[44] !== t6 || $[45] !== t7 || $[46] !== t9) {
-    t10 = /*#__PURE__*/jsxs("table", {
-      className: t5,
-      ref: t6,
-      ...restProps,
-      children: [t7, t9]
-    });
-    $[42] = restProps;
-    $[43] = t5;
-    $[44] = t6;
-    $[45] = t7;
-    $[46] = t9;
-    $[47] = t10;
-  } else {
-    t10 = $[47];
-  }
-  let t11;
-  if ($[48] !== T1 || $[49] !== intersectionObserverHandle || $[50] !== t10) {
-    t11 = /*#__PURE__*/jsx(T1, {
-      value: intersectionObserverHandle,
-      children: t10
-    });
-    $[48] = T1;
-    $[49] = intersectionObserverHandle;
-    $[50] = t10;
-    $[51] = t11;
-  } else {
-    t11 = $[51];
-  }
-  let t12;
-  if ($[52] !== T0 || $[53] !== props || $[54] !== t11) {
-    t12 = /*#__PURE__*/jsx(T0, {
-      value: props,
-      children: t11
-    });
-    $[52] = T0;
-    $[53] = props;
-    $[54] = t11;
-    $[55] = t12;
-  } else {
-    t12 = $[55];
-  }
-  return t12;
-}
-function _temp2(column, columnIndex) {
-  var _ref, _column$renderHeader;
-  return /*#__PURE__*/jsx("th", {
-    className: classNames(styles.headerCell, column.thClassName),
-    "aria-sort": column.sortOrder,
-    children: /*#__PURE__*/jsx(ColumnIndexContext, {
-      value: columnIndex,
-      children: (_ref = (_column$renderHeader = column.renderHeader?.()) !== null && _column$renderHeader !== void 0 ? _column$renderHeader : column.name) !== null && _ref !== void 0 ? _ref : String(column.key)
-    })
-  }, column.key);
-}
-function _temp() {
-  return defaultRowHeight;
-}
-
-export { Table as default };

package/components/table/table-row-focus.d.ts

@@ -1,4 +0,0 @@
-export declare const keyboardFocusableAttrName = "data-keyboard-focusable";
-export declare function focusRow(row: HTMLTableRowElement): void;
-export declare function onKeyDownTbody(e: React.KeyboardEvent<HTMLTableSectionElement>): void;
-export declare function onBlurCaptureTbody(e: React.FocusEvent<HTMLTableSectionElement>): void;

package/components/table/table-row-focus.js

@@ -1,41 +0,0 @@
-const keyboardFocusableAttrName = 'data-keyboard-focusable';
-const temporaryTabIndexAttrName = 'data-temporary-tabindex';
-function focusRow(row) {
-  if (!row.hasAttribute('tabindex')) {
-    row.tabIndex = 0;
-    row.setAttribute(temporaryTabIndexAttrName, '');
-  }
-  row.focus();
-}
-function onKeyDownTbody(e) {
-  if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') {
-    return;
-  }
-  const tbody = e.currentTarget;
-  const currentRow = e.target.closest('tr');
-  if (!(currentRow instanceof HTMLTableRowElement) || currentRow.parentElement !== tbody) {
-    return;
-  }
-  let candidate = currentRow;
-  while (candidate) {
-    candidate = e.key === 'ArrowUp' ? candidate.previousElementSibling : candidate.nextElementSibling;
-    if (candidate?.hasAttribute(keyboardFocusableAttrName)) {
-      focusRow(candidate);
-      e.preventDefault();
-      return;
-    }
-  }
-}
-function onBlurCaptureTbody(e) {
-  const tbody = e.currentTarget;
-  if (!(e.target instanceof HTMLTableRowElement) || e.target.parentElement !== tbody) {
-    return;
-  }
-  const row = e.target;
-  if (row.hasAttribute(temporaryTabIndexAttrName)) {
-    row.removeAttribute('tabindex');
-    row.removeAttribute(temporaryTabIndexAttrName);
-  }
-}
-
-export { focusRow, keyboardFocusableAttrName, onBlurCaptureTbody, onKeyDownTbody };

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

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