@jetbrains/ring-ui 8.0.0-beta.1 → 8.0.0-beta.10

package/components/selection-toolbar/selection-toolbar.css

@@ -0,0 +1,86 @@
+@import '../global/variables.css';
+
+.toolbar {
+  display: inline-flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  max-width: 100%;
+  height: calc(var(--ring-unit) * 5);
+  padding: 10px calc(var(--ring-unit) * 2);
+
+  pointer-events: auto;
+
+  color: var(--ring-white-text-color);
+  border-radius: var(--ring-border-radius-large);
+  background-color: var(--ring-sidebar-background-color);
+  box-shadow:
+    0 2px 8px rgb(0 28 54 / 10%),
+    0 1px 2px rgb(0 28 54 / 4%);
+
+  line-height: var(--ring-line-height);
+  gap: calc(var(--ring-unit) * 2);
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--ring-unit) * 3);
+}
+
+.selectAll {
+  flex: none;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--ring-unit) * 2);
+
+  min-width: 0;
+}
+
+.closeAction {
+  flex: none;
+}
+
+.separator {
+  flex: none;
+
+  width: 1px;
+  height: calc(var(--ring-unit) * 2);
+  margin-inline: var(--ring-unit);
+
+  background-color: var(--ring-line-color);
+}
+
+.compact {
+  min-width: 0;
+  max-width: 100%;
+  padding-inline: 12px;
+}
+
+.compact .content {
+  min-width: 0;
+  gap: var(--ring-unit);
+}
+
+.compact .label {
+  overflow: hidden;
+
+  flex: 1 1 auto;
+
+  min-width: 0;
+
+  white-space: nowrap;
+
+  text-overflow: ellipsis;
+}
+
+.compact .actions {
+  flex-shrink: 1;
+}
+
+.compact .separator {
+  margin-inline: 2px;
+}

package/components/selection-toolbar/selection-toolbar.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+export interface SelectionToolbarProps extends ComponentPropsWithRef<'div'> {
+    label: ReactNode;
+    selectAll?: ReactNode;
+    closeAction: ReactNode;
+    compact?: boolean;
+    'data-test'?: string | null;
+}
+export declare function SelectionToolbar({ ref, label, selectAll, closeAction, compact, className, children, 'data-test': dataTest, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...restProps }: SelectionToolbarProps): import("react").JSX.Element;
+export declare function SelectionToolbarSeparator(): import("react").JSX.Element;
+export default SelectionToolbar;

package/components/selection-toolbar/selection-toolbar.js

@@ -0,0 +1,23 @@
+import { useId } from 'react';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+import Theme, { ThemeProvider } from '../global/theme';
+import styles from './selection-toolbar.css';
+export function SelectionToolbar({ ref, label, selectAll, closeAction, compact, className, children, 'data-test': dataTest, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...restProps }) {
+    const labelId = useId();
+    const hasSelectAll = selectAll != null;
+    return (<ThemeProvider {...restProps} ref={ref} theme={Theme.DARK} role='group' aria-label={ariaLabel} aria-labelledby={ariaLabelledBy ?? (ariaLabel == null ? labelId : undefined)} data-test={dataTests('ring-selection-toolbar', dataTest)} className={classNames(styles.toolbar, { [styles.compact]: compact }, className)}>
+      <div className={styles.content}>
+        <span id={labelId} className={styles.label}>
+          {label}
+        </span>
+        {hasSelectAll && <span className={styles.selectAll}>{selectAll}</span>}
+        <div className={styles.actions}>{children}</div>
+      </div>
+      <div className={styles.closeAction}>{closeAction}</div>
+    </ThemeProvider>);
+}
+export function SelectionToolbarSeparator() {
+    return <span role='separator' aria-orientation='vertical' className={styles.separator}/>;
+}
+export default SelectionToolbar;

package/components/slider/slider.js

@@ -1,11 +1,10 @@
-import { Fragment, useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useEffectEvent, useRef, useState } from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
 import { isArray } from '../global/typescript-utils';
 import Shortcuts from '../shortcuts/shortcuts';
 import getUID from '../global/get-uid';
 import { adjustValues, calculateMarks, calculateValue, HUNDRED, toPercent, toRange, validateValue } from './slider.utils';
-import useEventCallback from '../global/use-event-callback';
 import styles from './slider.css';
 export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1, disabled, marks, showTicks, showTag, className, renderTag, onChange, }) => {
     const ref = useRef(null);
@@ -86,7 +85,7 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
         setIsDragging(true);
         previouslyDragged.current = false;
     };
-    const handleMouseUp = useEventCallback(({ pageX }) => {
+    const handleMouseUp = useEffectEvent(({ pageX }) => {
         const nextValues = adjustValues(validValues, ref, draggedIndex, pageX, max, min, validStep);
         if (nextValues[0] > nextValues[1]) {
             nextValues.reverse();
@@ -96,7 +95,7 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
         setIsDragging(false);
         previouslyDragged.current = true;
     });
-    const handleMouseMove = useEventCallback(({ pageX }) => {
+    const handleMouseMove = useEffectEvent(({ pageX }) => {
         const nextValues = adjustValues(validValues, ref, draggedIndex, pageX, max, min, validStep);
         if (nextValues[0] > nextValues[1]) {
             nextValues.reverse();
@@ -120,7 +119,7 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
             window.removeEventListener('mousemove', handleMouseMove);
             window.removeEventListener('mouseup', handleMouseUp);
         };
-    }, [isDragging, disabled, handleMouseMove, handleMouseUp]);
+    }, [isDragging, disabled]);
     return (<div ref={ref} role='presentation' // contains interactive elements
      className={classNames(styles.slider, className, {
             [styles.disabled]: disabled,

package/components/tab-trap/tab-trap.d.ts

@@ -2,6 +2,7 @@ import { type HTMLAttributes, type ReactNode } from 'react';
 import * as React from 'react';
 export declare const FOCUSABLE_ELEMENTS = "input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])";
 export interface TabTrapProps extends HTMLAttributes<HTMLElement> {
+    ref?: React.Ref<TabTrapObject>;
     children: ReactNode;
     trapDisabled?: boolean;
     autoFocusFirst?: boolean;
@@ -11,8 +12,7 @@ export interface TabTrapProps extends HTMLAttributes<HTMLElement> {
 /**
  * @name TabTrap
  */
-interface TabTrap {
+export interface TabTrapObject {
     node: HTMLElement | null;
 }
-declare const TabTrap: React.ForwardRefExoticComponent<TabTrapProps & React.RefAttributes<TabTrap>>;
-export default TabTrap;
+export default function TabTrap({ ref, children, trapDisabled, autoFocusFirst, focusBackOnClose, focusBackOnExit, ...restProps }: TabTrapProps): React.JSX.Element;

package/components/tab-trap/tab-trap.js

@@ -1,10 +1,9 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, } from 'react';
+import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
 import * as React from 'react';
 import { isNodeInVisiblePartOfPage } from '../global/dom';
 import styles from './tab-trap.css';
 export const FOCUSABLE_ELEMENTS = 'input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])';
-// eslint-disable-next-line no-shadow
-const TabTrap = forwardRef(function TabTrap({ children, trapDisabled = false, autoFocusFirst = true, focusBackOnClose = true, focusBackOnExit = false, ...restProps }, ref) {
+export default function TabTrap({ ref, children, trapDisabled = false, autoFocusFirst = true, focusBackOnClose = true, focusBackOnExit = false, ...restProps }) {
     const nodeRef = useRef(null);
     const trapButtonNodeRef = useRef(null);
     const previousFocusedNodeRef = useRef(null);
@@ -121,5 +120,4 @@ const TabTrap = forwardRef(function TabTrap({ children, trapDisabled = false, au
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     tabIndex={0} onFocus={restoreFocusOrFocusFirst} data-trap-button/>
     </div>);
-});
-export default TabTrap;
+}

package/components/table/default-item-renderer.d.ts

@@ -1,25 +1,55 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithRef } from 'react';
 export interface DefaultItemRendererProps {
     /**
-     * Installed on the `<tr>` element
+     * The index of the `data` item to render.
      */
-    ref?: React.RefObject<HTMLTableRowElement | null>;
+    index: number;
     /**
-     * The index of the `data` item to render
+     * If `true`, the row will be focusable with up/down arrow keys.
+     * Focus is implemented using the
+     * ["roving tabindex"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets#technique_1_roving_tabindex)
+     * technique, that is, only the focused row has `tabIndex={0}`.
      */
-    index: number;
+    keyboardFocusable?: boolean;
     /**
-     * Changes the highlight on hover and applies the pointer cursor.
-     * Note that `false` doesn't mean it cannot handle `onClick`.
+     * Changes the background on hover and applies the pointer cursor.
+     * Note that `false` does not mean the row cannot handle `onClick`.
      */
     clickable?: boolean;
     /**
-     * A level of a nested item. Results in an indent for columns with `indent: true`.
-     * 0, negative and not set mean no indent.
+     * If `true`, the row is highlighted as selected with a different background color.
+     */
+    selected?: boolean;
+    /**
+     * The nesting level of an item. Applies an indent for columns with
+     * `Column.indent` set to `true`. `0`, negative values, and an unset value
+     * mean no indent.
      */
     level?: number;
+    /**
+     * When set to `true`, does not control item virtualization.
+     * Useful when you include `DefaultItemRenderer` as a part of a custom row renderer,
+     * and track the visibility yourself.
+     */
+    noItemVirtualization?: boolean;
+    /**
+     * When set to `true`, does not report the item's boundaries to the reorder system.
+     * Useful when you include `DefaultItemRenderer` as a part of a custom row renderer
+     * that registers boundaries itself.
+     */
+    noReorderLayout?: boolean;
 }
 /**
- * @see TableProps.renderItem
+ * Standard component for rendering a table row.
+ *
+ * Renders an item using the table's column definitions and lets you
+ * configure item-scoped behavior such as selection, keyboard navigation,
+ * event handlers, `className`, and `ref`.
+ *
+ * Note that row-level click and keyboard handlers are not discoverable
+ * by assistive technologies. Make sure that any functionality relying on
+ * them (such as selection or expand/collapse) is also available through
+ * accessible controls, such as checkboxes or buttons with accessible
+ * labels.
  */
-export declare function DefaultItemRenderer<T>({ ref: userRef, index, clickable, level, className, onKeyDown, onBlur, ...restProps }: DefaultItemRendererProps & ComponentPropsWithoutRef<'tr'>): import("react").JSX.Element;
+export declare function DefaultItemRenderer<T>({ index, keyboardFocusable, clickable, selected, level, noItemVirtualization, noReorderLayout, ref: userRef, className, ...restProps }: DefaultItemRendererProps & ComponentPropsWithRef<'tr'>): import("react").JSX.Element | null;

package/components/table/default-item-renderer.js

@@ -1,61 +1,74 @@
-import { useContext, useEffect, useRef } from 'react';
+import { use, useCallback, useRef } from 'react';
 import classNames from 'classnames';
-import { CollapseItemIntoSpacerContext, TablePropsContext } from './table-const';
-import { useIsIntersectingListener } from '../global/intersection-observer-context';
-import { TableCell, TableRow } from './table-base';
+import { TablePropsContext } from './table-const';
+import { useComposedRef } from '../global/compose-refs';
+import { useItemVirtualization } from './item-virtualization';
+import { TableCell, TableRow } from './table-primitives';
+import { ReorderAnimationContext } from './internal/reorder-animation-context';
+import { useReorderItemLayout } from './reorder-item-layout';
 import styles from './table.css';
-const INDENT_SIZE = 24;
 /**
- * @see TableProps.renderItem
+ * Standard component for rendering a table row.
+ *
+ * Renders an item using the table's column definitions and lets you
+ * configure item-scoped behavior such as selection, keyboard navigation,
+ * event handlers, `className`, and `ref`.
+ *
+ * Note that row-level click and keyboard handlers are not discoverable
+ * by assistive technologies. Make sure that any functionality relying on
+ * them (such as selection or expand/collapse) is also available through
+ * accessible controls, such as checkboxes or buttons with accessible
+ * labels.
  */
-export function DefaultItemRenderer({ ref: userRef, index, clickable, level, className, onKeyDown, onBlur, ...restProps }) {
-    const selfRef = useRef(null);
-    const ref = userRef ?? selfRef;
-    const collapseItemIntoSpacer = useContext(CollapseItemIntoSpacerContext);
-    useIsIntersectingListener(ref, isIntersecting => {
-        if (ref.current && !isIntersecting) {
-            collapseItemIntoSpacer(ref.current.getBoundingClientRect().height);
-        }
+export function DefaultItemRenderer({ index, keyboardFocusable, clickable, selected, level, noItemVirtualization, noReorderLayout, ref: userRef, className, ...restProps }) {
+    const localRef = useRef(null);
+    const composedRef = useComposedRef(userRef, localRef);
+    useItemVirtualization({
+        index,
+        refs: localRef,
+        onIntersectionChange: useCallback(([isIntersecting], _i, [element]) => isIntersecting === false &&
+            !noItemVirtualization &&
+            element?.isConnected &&
+            !element.contains(document.activeElement) &&
+            !element.previousElementSibling?.contains(document.activeElement) &&
+            !element.nextElementSibling?.contains(document.activeElement)
+            ? element.getBoundingClientRect().height
+            : undefined, [noItemVirtualization]),
     });
-    const { data, columns, selection, isItemKeyboardFocusable, onItemFocus } = useContext(TablePropsContext);
-    const item = data[index];
-    const selected = selection?.isSelected(item);
-    function handleKeyDown(e) {
-        onKeyDown?.(e);
-        if (!e.defaultPrevented && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
-            const step = e.key === 'ArrowUp' ? -1 : 1;
-            // eslint-disable-next-line yoda
-            for (let i = index + step; 0 <= i && i < data.length; i += step) {
-                if (isItemKeyboardFocusable?.(data[i], i, data)) {
-                    onItemFocus?.(data[i], i, data);
-                    break;
-                }
-            }
-        }
-    }
-    const focused = selection?.isFocused(item);
-    useEffect(() => {
-        if (focused)
-            ref.current?.focus();
-    }, [focused, ref]);
-    function handleBlur(e) {
-        onBlur?.(e);
-        if (!e.defaultPrevented && focused) {
-            onItemFocus?.(null, -1, data);
-        }
+    useReorderItemLayout({
+        disabled: noReorderLayout,
+        index,
+        getBounds: () => {
+            const r = localRef.current?.getBoundingClientRect();
+            return { start: r?.top ?? 0, end: r?.bottom ?? 0 };
+        },
+    });
+    const tableProps = use(TablePropsContext);
+    if (!tableProps) {
+        return null;
     }
-    return (<TableRow ref={ref} className={classNames(className, clickable && styles.clickableRow, selected && styles.selectedRow)} onKeyDown={handleKeyDown} tabIndex={focused ? 0 : undefined} onBlur={focused ? handleBlur : undefined} {...restProps}>
-      {columns.map((column, columnIndex) => (<TableCell key={column.key} className={column.tdClassName?.(item, index, data)} style={column.indent && level != null && level > 0 ? { paddingInlineStart: `${level * INDENT_SIZE}px` } : undefined}>
-          {column.renderCell?.(item, index, data) ?? getDefaultCellValue(item, columnIndex)}
-        </TableCell>))}
+    const { reorderAnimation } = use(ReorderAnimationContext);
+    const isAnimatedItem = reorderAnimation?.direction === 'items' && reorderAnimation.index === index;
+    const animatedColumnIndex = reorderAnimation?.direction === 'columns' ? reorderAnimation.index : undefined;
+    const animateClassName = reorderAnimation?.className;
+    const { data, columns } = tableProps;
+    const item = data[index];
+    const indentSize = 24;
+    return (<TableRow ref={composedRef} keyboardFocusable={keyboardFocusable} className={classNames(className, clickable && styles.clickableRow, selected && styles.selectedRow, isAnimatedItem && animateClassName)} {...restProps}>
+      {columns.map((column, columnIndex) => {
+            const { key, tdClassName, indent } = column;
+            return (<TableCell key={key} className={classNames(columnIndex === animatedColumnIndex && animateClassName, typeof tdClassName === 'function' ? tdClassName(item, index, data) : tdClassName)} style={indent && level != null && level > 0 ? { paddingInlineStart: `${level * indentSize}px` } : undefined}>
+            {column.renderCell?.(item, index, data) ?? getDefaultCellValue(item, columnIndex, key)}
+          </TableCell>);
+        })}
     </TableRow>);
 }
-function getDefaultCellValue(item, columnIndex) {
+function getDefaultCellValue(item, columnIndex, columnKey) {
     if (Array.isArray(item)) {
-        return String(item[columnIndex] ?? '');
+        return String(item[columnIndex]);
     }
     if (item !== null && typeof item === 'object') {
-        return String(Object.values(item)[columnIndex] ?? '');
+        return String(item[String(columnKey)]);
     }
     if (columnIndex === 0) {
         return String(item);

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

@@ -0,0 +1,21 @@
+import { type RefObject } from 'react';
+import type { Column } from '../table-props';
+import type { ReorderAnimation } from '../reorder-animation';
+export interface ReorderSpec {
+    direction: 'columns' | 'items';
+    fromIndex: number;
+    insertionIndex: number;
+}
+interface ReorderAnimationContextValue {
+    reorderAnimation: ReorderAnimation | null;
+    expectReorder: (reorderSpec: ReorderSpec) => void;
+}
+export declare const ReorderAnimationContext: import("react").Context<ReorderAnimationContextValue>;
+export declare function useReorderAnimationContextValue<T>({ noColumnReorderAnimation, noItemReorderAnimation, tableRef, data, columns, }: {
+    noColumnReorderAnimation: boolean | undefined;
+    noItemReorderAnimation: boolean | undefined;
+    tableRef: RefObject<HTMLTableElement | null>;
+    data: readonly T[];
+    columns: readonly Column<T>[];
+}): ReorderAnimationContextValue;
+export {};

package/components/table/internal/reorder-animation-context.js

@@ -0,0 +1,60 @@
+import { createContext, useEffect, useRef, useState } from 'react';
+import { parseCssDuration } from '../../global/parse-css-duration';
+import { requestAnimationFrameWithCleanup, setTimeoutWithCleanup } from '../../global/schedule-with-cleanup';
+import styles from '../table.css';
+/** How long to wait for the data to change after {@link expectReorder} is called. */
+const pendingReorderTimeoutMs = 1000;
+export const ReorderAnimationContext = createContext({
+    reorderAnimation: null,
+    expectReorder: () => { },
+});
+export function useReorderAnimationContextValue({ noColumnReorderAnimation, noItemReorderAnimation, tableRef, data, columns, }) {
+    const [reorderAnimation, setReorderAnimation] = useState(null);
+    const pendingReorderRef = useRef(null);
+    function expectReorder(reorderSpec) {
+        const isColumn = reorderSpec.direction === 'columns';
+        if ((isColumn && noColumnReorderAnimation) || (!isColumn && noItemReorderAnimation))
+            return;
+        if (pendingReorderRef.current) {
+            window.clearTimeout(pendingReorderRef.current.timerId);
+        }
+        const timerId = window.setTimeout(() => {
+            pendingReorderRef.current = null;
+        }, pendingReorderTimeoutMs);
+        pendingReorderRef.current = { ...reorderSpec, timerId, columns, data };
+    }
+    useEffect(() => {
+        return () => {
+            if (pendingReorderRef.current) {
+                window.clearTimeout(pendingReorderRef.current.timerId);
+                pendingReorderRef.current = null;
+            }
+        };
+    }, []);
+    useEffect(() => {
+        const table = tableRef.current;
+        const pendingReorder = pendingReorderRef.current;
+        if (!table || !pendingReorder)
+            return;
+        const { direction, data: pendingData, columns: pendingColumns } = pendingReorder;
+        const isColumn = direction === 'columns';
+        if ((isColumn && columns === pendingColumns) || (!isColumn && data === pendingData))
+            return;
+        pendingReorderRef.current = null;
+        const { fromIndex, insertionIndex } = pendingReorder;
+        // Moving forward shifts the array by one, hence -1
+        const index = fromIndex < insertionIndex ? insertionIndex - 1 : insertionIndex;
+        return requestAnimationFrameWithCleanup(() => setReorderAnimation(prev => prev == null ? { direction, index, phase: 'initial', className: styles.reorderAnimationInitial } : prev));
+    }, [data, columns, tableRef]);
+    useEffect(() => {
+        if (reorderAnimation?.phase === 'initial') {
+            return requestAnimationFrameWithCleanup(() => setReorderAnimation(prev => prev === reorderAnimation ? { ...prev, phase: 'fade-out', className: styles.reorderAnimationFadeOut } : prev));
+        }
+        if (reorderAnimation?.phase === 'fade-out') {
+            const fadeOutMs = parseCssDuration(window.getComputedStyle(tableRef.current).getPropertyValue('--reorder-animation-fade-out-duration'));
+            return setTimeoutWithCleanup(() => setReorderAnimation(prev => (prev === reorderAnimation ? null : prev)), fadeOutMs);
+        }
+        return undefined;
+    }, [reorderAnimation, tableRef]);
+    return { reorderAnimation, expectReorder };
+}

package/components/table/internal/reorder-handle.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithRef } from 'react';
+import type { DragState } from '../table-primitives';
+export declare function ReorderHandle<T>({ direction, index, noDragFrame, noHandleTranslate, onUserDrag, ref: userRef, className, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, ...restProps }: {
+    direction: 'columns' | 'items';
+    index: number;
+    noDragFrame?: boolean;
+    noHandleTranslate?: boolean;
+    onUserDrag?: (state: DragState) => void;
+} & ComponentPropsWithRef<'button'>): import("react").JSX.Element;