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

package/components/date-picker/use-intersection-observer.js

@@ -1,48 +0,0 @@
-import { useEffect, useState } from 'react';
-export function useIntersectionObserver(containerRef, scrollMargin = 0) {
-    const [handle, setHandle] = useState(null);
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const elementToSetVisible = new Map();
-        const observer = new IntersectionObserver(entries => {
-            for (const entry of entries) {
-                const setVisible = elementToSetVisible.get(entry.target);
-                setVisible?.(entry.isIntersecting);
-            }
-        }, {
-            root: container,
-            ...(scrollMargin
-                ? {
-                    scrollMargin: `${scrollMargin}px`,
-                }
-                : {}),
-        });
-        setHandle({
-            observeVisibility(element, setVisible) {
-                elementToSetVisible.set(element, setVisible);
-                observer.observe(element);
-                return () => {
-                    elementToSetVisible.delete(element);
-                    observer.unobserve(element);
-                };
-            },
-        });
-        return () => {
-            observer.disconnect();
-            setHandle(null);
-        };
-    }, [containerRef, scrollMargin]);
-    return handle;
-}
-export function useVisibility(handle, elementRef) {
-    const [isVisible, setIsVisible] = useState(false);
-    useEffect(() => {
-        const element = elementRef.current;
-        if (!element || !handle)
-            return;
-        return handle.observeVisibility(element, setIsVisible);
-    }, [handle, elementRef, setIsVisible]);
-    return isVisible;
-}

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,7 +0,0 @@
-/* eslint-disable unicorn/filename-case */
-import { createComposedRef as _createComposedRef } from './compose-refs';
-/**
- * @deprecated Use createComposedRef from './compose-refs' instead
- */
-const createComposedRef = _createComposedRef;
-export { createComposedRef };

package/components/global/use-event-callback.d.ts

@@ -1 +0,0 @@
-export default function useEventCallback<I extends unknown[], O>(fn: (...args: I) => O): (...args: I) => O;

package/components/global/use-event-callback.js

@@ -1,15 +0,0 @@
-import { useCallback, useLayoutEffect, useRef } from 'react';
-// TODO deprecate in favor of useEffectEvent after dropping support for React < 19.2
-export default function useEventCallback(fn) {
-    const ref = useRef(null);
-    useLayoutEffect(() => {
-        ref.current = fn;
-    });
-    return useCallback((...args) => {
-        const { current } = ref;
-        if (current === null || current === undefined) {
-            throw new Error('callback created in useEventCallback can only be called from event handlers');
-        }
-        return current(...args);
-    }, []);
-}

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

@@ -1,24 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-/**
- * Include it in a column header to make the column sortable.
- * Handle clicks with {@link TableProps.onSort}.
- */
-export declare function SortButton<T>(props: ComponentPropsWithoutRef<'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>(props: ComponentPropsWithoutRef<'button'>): import("react").JSX.Element | null;
-/**
- * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard row classnames.
- */
-export declare function TableRow(props: {
-    ref?: React.Ref<HTMLTableRowElement>;
-} & ComponentPropsWithoutRef<'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`.
- */
-export declare function TableCell(props: ComponentPropsWithoutRef<'td'>): import("react").JSX.Element;

package/components/table/table-base.js

@@ -1,79 +0,0 @@
-import { useContext } 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';
-import { ColumnIndexContext, TablePropsContext } from './table-const';
-import styles from './table.css';
-/**
- * Include it in a column header to make the column sortable.
- * Handle clicks with {@link TableProps.onSort}.
- */
-export function SortButton(props) {
-    const tableProps = useContext(TablePropsContext);
-    const columnIndex = useContext(ColumnIndexContext);
-    const column = tableProps?.columns[columnIndex];
-    if (!tableProps || !column) {
-        return null;
-    }
-    const sortOrder = column.sortOrder ?? 'none';
-    // eslint-disable-next-line no-nested-ternary, prettier/prettier
-    const glyph = sortOrder === 'none' ? unsortedIcon
-        : sortOrder === 'ascending' ? arrowUpIcon
-            : arrowDownIcon;
-    const { className, children, onClick, ...restProps } = props;
-    function handleClick(e) {
-        onClick?.(e);
-        if (!e.defaultPrevented) {
-            const sequence = ['none', 'ascending', 'descending'];
-            const nextOrder = sequence[(sequence.indexOf(sortOrder) + 1) % sequence.length];
-            tableProps.onSort?.(columnIndex, nextOrder);
-        }
-    }
-    return (<button type='button' className={classNames(styles.headerButton, className)} onClick={handleClick} {...restProps}>
-      {children} <Icon glyph={glyph} aria-hidden/>
-    </button>);
-}
-/**
- * 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 function DeleteColumnButton(props) {
-    const tableProps = useContext(TablePropsContext);
-    const columnIndex = useContext(ColumnIndexContext);
-    const column = tableProps?.columns[columnIndex];
-    if (!tableProps || !column) {
-        return null;
-    }
-    const { className, onClick, ...restProps } = props;
-    function handleClick(e) {
-        onClick?.(e);
-        if (!e.defaultPrevented) {
-            tableProps.onColumnDelete?.(columnIndex);
-        }
-    }
-    return (<button type='button' className={classNames(styles.headerButton, styles.deleteColumnButton, className)} onClick={handleClick} aria-label={`Delete column ${column.name ?? String(column.key)}`} {...restProps}>
-      <Icon glyph={trashIcon}/>
-    </button>);
-}
-/**
- * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard row classnames.
- */
-export function TableRow(props) {
-    const { ref, className, ...restProps } = props;
-    const classes = classNames(styles.row, className);
-    return <tr ref={ref} className={classes} {...restProps}/>;
-}
-/**
- * A helper `<td>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard cell classnames, but not data-dependent `tdClassName`.
- */
-export function TableCell(props) {
-    const { className, ...restProps } = props;
-    const classes = classNames(styles.cell, className);
-    return <td className={classes} {...restProps}/>;
-}

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

@@ -1,53 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import type { TableProps } from './table';
-/**
- * The new Table component. Use it instead of tables in the `legacy-table` folder.
- *
- * Minimal usage requires the following props:
- * - `data`
- * - `getKey`
- * - `columns`
- *   - `key`
- *   - `renderCell` (not required, but usually needed)
- *
- * ## Selection
- *
- * Following three props support the selection:
- *
- * - `selection`
- * - `isItemClickable`
- * - `DefaultItemRenderer.onClick`
- *
- * Only `selection` is required: you can display and modify selection your way, e.g., via
- * checkboxes in cells.
- *
- * ## Sorting
- * You need the following to support sorting:
- *
- * - Include `<SortButton />` in a column header
- * - Set initial `Column.sortOrder` to `none`, `ascending`.
- * Do not leave `undefined` for the 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.
- *
- * ## 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> & ComponentPropsWithoutRef<'table'>): import("react").JSX.Element;

package/components/table/table-component.js

@@ -1,101 +0,0 @@
-import { useRef } from 'react';
-import classNames from 'classnames';
-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 styles from './table.css';
-/**
- * The new Table component. Use it instead of tables in the `legacy-table` folder.
- *
- * Minimal usage requires the following props:
- * - `data`
- * - `getKey`
- * - `columns`
- *   - `key`
- *   - `renderCell` (not required, but usually needed)
- *
- * ## Selection
- *
- * Following three props support the selection:
- *
- * - `selection`
- * - `isItemClickable`
- * - `DefaultItemRenderer.onClick`
- *
- * Only `selection` is required: you can display and modify selection your way, e.g., via
- * checkboxes in cells.
- *
- * ## Sorting
- * You need the following to support sorting:
- *
- * - Include `<SortButton />` in a column header
- * - Set initial `Column.sortOrder` to `none`, `ascending`.
- * Do not leave `undefined` for the 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.
- *
- * ## 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, selection, isItemKeyboardFocusable, onItemFocus, onItemMove, onSort, onColumnDelete, onColumnMove, renderItem, virtualizeRows = false, scrollerRef, estimateHeight = () => defaultRowHeight, lookaheadPx = defaultLookaheadPx, retentionMarginPx = defaultRetentionMarginPx, minScrollAndResizeDeltaPx = defaultMinScrollAndResizeDeltaPx, columnEditButton, ref: userRef, className, theadClassName, theadTrClassName, tbodyClassName, ...restProps } = props;
-    const selfRef = useRef(null);
-    const tableRef = userRef ?? selfRef;
-    const { virtualItems, intersectionObserverHandle, collapseItemIntoSpacer } = useTableVirtualize({
-        enabled: virtualizeRows,
-        length: data.length,
-        scrollerRef,
-        tableRef,
-        estimateHeight,
-        lookaheadPx,
-        retentionMarginPx,
-        minScrollAndResizeDeltaPx,
-    });
-    return (<TablePropsContext.Provider value={props}>
-      <IntersectionObserverContext.Provider value={intersectionObserverHandle}>
-        <table className={classNames(styles.table, className)} ref={tableRef} {...restProps}>
-          <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.Provider value={columnIndex}>
-                    {column.renderHeader?.() ?? column.name ?? String(column.key)}
-                  </ColumnIndexContext.Provider>
-                </th>))}
-            </tr>
-          </thead>
-
-          <tbody className={tbodyClassName}>
-            {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 = props.getKey(item, index);
-            return (<CollapseItemIntoSpacerContext.Provider value={height => collapseItemIntoSpacer(index, height)} key={key}>
-                  {renderItem ? renderItem(item, index, data) : <DefaultItemRenderer index={index}/>}
-                </CollapseItemIntoSpacerContext.Provider>);
-        })}
-          </tbody>
-        </table>
-      </IntersectionObserverContext.Provider>
-    </TablePropsContext.Provider>);
-}

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({ enabled, length, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }: {
-    enabled: boolean;
-    length: number;
-    scrollerRef: RefObject<HTMLElement | null> | undefined;
-    tableRef: RefObject<HTMLTableElement | null>;
-    estimateHeight: (index: number) => 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 {};