@jetbrains/ring-ui 8.0.0-beta.3 → 8.0.0-beta.4

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,130 +0,0 @@
-import { useRef } from 'react';
-import classNames from 'classnames';
-import { mergeRefs } from 'react-merge-refs';
-import { IntersectionObserverContext } from '../global/intersection-observer-context';
-import { SpacerRow, useTableVirtualize } from './table-virtualize';
-import { DefaultItemRenderer } from './default-item-renderer';
-import { CollapseItemIntoSpacerContext, ColumnIndexContext, defaultLookaheadPx, defaultMinScrollAndResizeDeltaPx, defaultRetentionMarginPx, defaultRowHeight, TablePropsContext, } from './table-const';
-import { onBlurCaptureTbody, onKeyDownTbody } from './table-row-focus';
-import styles from './table.css';
-/**
- * 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(props) {
-    const { data, columns, getKey, noHeader, onItemMove, onSort, onColumnDelete, onColumnMove, renderItem, virtualizeRows = false, scrollerRef, estimateHeight = () => defaultRowHeight, lookaheadPx = defaultLookaheadPx, retentionMarginPx = defaultRetentionMarginPx, minScrollAndResizeDeltaPx = defaultMinScrollAndResizeDeltaPx, columnEditButton, theadClassName, theadTrClassName, tbodyClassName, ref: userRef, className, ...restProps } = props;
-    const localRef = useRef(null);
-    const { virtualItems, intersectionObserverHandle, collapseItemIntoSpacer } = useTableVirtualize({
-        enabled: virtualizeRows,
-        data,
-        scrollerRef,
-        tableRef: localRef,
-        estimateHeight,
-        lookaheadPx,
-        retentionMarginPx,
-        minScrollAndResizeDeltaPx,
-    });
-    return (<TablePropsContext value={props}>
-      <IntersectionObserverContext value={intersectionObserverHandle}>
-        <table className={classNames(styles.table, className)} ref={mergeRefs([userRef, localRef])} {...restProps}>
-          {!noHeader && (<thead className={theadClassName}>
-              <tr className={classNames(styles.headerRow, theadTrClassName)}>
-                {columns.map((column, columnIndex) => (<th key={column.key} className={classNames(styles.headerCell, column.thClassName)} aria-sort={column.sortOrder}>
-                    <ColumnIndexContext value={columnIndex}>
-                      {column.renderHeader?.() ?? column.name ?? String(column.key)}
-                    </ColumnIndexContext>
-                  </th>))}
-              </tr>
-            </thead>)}
-
-          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-          <tbody className={tbodyClassName} onKeyDown={onKeyDownTbody} onBlurCapture={onBlurCaptureTbody}>
-            {virtualItems.map(virtualItem => {
-            if (virtualItem.type === 'spacer') {
-                return <SpacerRow key={virtualItem.key} spacer={virtualItem} colSpan={columns.length}/>;
-            }
-            const index = virtualItem.index;
-            const item = data[index];
-            const key = getKey(item, index, data);
-            return (<CollapseItemIntoSpacerContext value={height => collapseItemIntoSpacer(index, height)} key={key}>
-                  {renderItem ? renderItem(item, index, data) : <DefaultItemRenderer index={index}/>}
-                </CollapseItemIntoSpacerContext>);
-        })}
-          </tbody>
-        </table>
-      </IntersectionObserverContext>
-    </TablePropsContext>);
-}

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,42 +0,0 @@
-export const keyboardFocusableAttrName = 'data-keyboard-focusable';
-const temporaryTabIndexAttrName = 'data-temporary-tabindex';
-export function focusRow(row) {
-    if (!row.hasAttribute('tabindex')) {
-        row.tabIndex = 0;
-        row.setAttribute(temporaryTabIndexAttrName, '');
-    }
-    row.focus();
-}
-export 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;
-        }
-    }
-}
-export 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);
-    }
-}

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 {};