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

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;

package/components/table/internal/reorder-handle.js

@@ -0,0 +1,334 @@
+/* eslint-disable max-lines */
+import { use, useEffect, useEffectEvent, useRef, } from 'react';
+import classNames from 'classnames';
+import dragIcon from '@jetbrains/icons/drag-12px';
+import { TablePropsContext } from '../table-const';
+import Icon from '../../icon';
+import { useComposedRef } from '../../global/compose-refs';
+import { parseCssDuration } from '../../global/parse-css-duration';
+import { ReorderAnimationContext } from './reorder-animation-context';
+import { ReorderLayoutContext } from './reorder-layout-context';
+import styles from '../table.css';
+const columnDragFrameAdjustmentPx = -1;
+const itemDragFrameAdjustmentPx = -2;
+const scrollAreaPx = 100;
+const scrollStepPx = 100;
+const scrollIntervalMs = 200;
+export function ReorderHandle({ direction, index, noDragFrame, noHandleTranslate, onUserDrag, ref: userRef, className, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, ...restProps }) {
+    const localRef = useRef(null);
+    const composedRef = useComposedRef(localRef, userRef);
+    const isColumn = direction === 'columns';
+    const tableProps = use(TablePropsContext);
+    const data = tableProps?.data;
+    const columns = tableProps?.columns;
+    const canReorderItem = tableProps?.canReorderItem;
+    const onItemReorder = tableProps?.onItemReorder;
+    const onColumnReorder = tableProps?.onColumnReorder;
+    function canReorder(insertionIndex) {
+        const columnBeingReordered = columns?.[index];
+        if (isColumn && columnBeingReordered) {
+            const canReorderColumn = columnBeingReordered.canReorder;
+            if (canReorderColumn === true)
+                return true;
+            if (typeof canReorderColumn === 'function')
+                return canReorderColumn(columnBeingReordered, index, insertionIndex, columns);
+            return false;
+        }
+        if (!isColumn && data) {
+            return canReorderItem ? canReorderItem(data[index], index, insertionIndex, data) : true;
+        }
+        return false;
+    }
+    const { expectReorder } = use(ReorderAnimationContext);
+    function onReorder(insertionIndex) {
+        if (isColumn && columns) {
+            expectReorder({ direction, fromIndex: index, insertionIndex });
+            onColumnReorder?.(columns[index], index, insertionIndex, columns);
+        }
+        else if (!isColumn && data) {
+            expectReorder({ direction, fromIndex: index, insertionIndex });
+            onItemReorder?.(data[index], index, insertionIndex, data);
+        }
+    }
+    const activeDragRef = useRef(null);
+    function getDragFrame() {
+        return document.body.querySelector(`.${styles.dragFrame}`);
+    }
+    function getInsertionIndicator() {
+        return document.body.querySelector(`.${styles.insertionIndicator}`);
+    }
+    const { getItemBounds, getClosestInsertionPoint } = use(ReorderLayoutContext);
+    function renderDragFrame(clientX, clientY) {
+        const drag = activeDragRef.current;
+        if (noDragFrame || !drag)
+            return;
+        const { startX, startY, initialItemStart, initialItemEnd, indicatorStart, indicatorSize } = drag;
+        let dragFrame = getDragFrame();
+        if (!dragFrame) {
+            dragFrame = document.createElement('div');
+            dragFrame.className = styles.dragFrame;
+            const frameStart = `calc(max(0px, ${indicatorStart - 2}px))`;
+            const frameAcrossSize = `${initialItemEnd - initialItemStart}px`;
+            const frameAlongSize = indicatorSize;
+            dragFrame.style[isColumn ? 'top' : 'left'] = frameStart;
+            dragFrame.style[isColumn ? 'width' : 'height'] = frameAcrossSize;
+            dragFrame.style[isColumn ? 'height' : 'width'] = frameAlongSize;
+            document.body.appendChild(dragFrame);
+        }
+        if (isColumn) {
+            dragFrame.style.left = `${initialItemStart + clientX - startX + columnDragFrameAdjustmentPx}px`;
+        }
+        else {
+            dragFrame.style.top = `${initialItemStart + clientY - startY + itemDragFrameAdjustmentPx}px`;
+        }
+    }
+    function translateButton(clientX, clientY) {
+        const btn = localRef.current;
+        const drag = activeDragRef.current;
+        if (noHandleTranslate || !btn || !drag)
+            return;
+        const { startX, startY, initialItemStart } = drag;
+        const offsetByPointerMove = isColumn ? clientX - startX : clientY - startY;
+        const { start: itemStart } = getItemBounds(index) ?? { start: 0, end: 0 };
+        const offsetByItemMove = itemStart - initialItemStart;
+        const offset = offsetByPointerMove - offsetByItemMove;
+        btn.style.transform = isColumn ? `translateX(${offset}px)` : `translateY(${offset}px)`;
+    }
+    function getClosestInsertionPointLocal(clientX, clientY) {
+        const clientOffset = isColumn ? clientX : clientY;
+        return getClosestInsertionPoint(clientOffset, canReorder);
+    }
+    function renderInsertionIndicator({ itemIndex, after }) {
+        const drag = activeDragRef.current;
+        if (!drag)
+            return;
+        const { indicatorStart, indicatorSize } = drag;
+        const itemBounds = getItemBounds(itemIndex);
+        if (!itemBounds)
+            return;
+        const { start: itemStart, end: itemEnd } = itemBounds;
+        let indicator = getInsertionIndicator();
+        if (!indicator) {
+            indicator = document.createElement('div');
+            indicator.className = styles.insertionIndicator;
+            indicator.style[isColumn ? 'top' : 'left'] = `${indicatorStart}px`;
+            indicator.style[isColumn ? 'height' : 'width'] = indicatorSize;
+            indicator.style[isColumn ? 'width' : 'height'] = '2px';
+            document.body.appendChild(indicator);
+        }
+        const itemOffset = `${(after ? itemEnd : itemStart) - 1}px`;
+        indicator.style[isColumn ? 'left' : 'top'] = itemOffset;
+    }
+    function cleanupDrag() {
+        if (activeDragRef.current) {
+            activeDragRef.current.cleanup();
+            activeDragRef.current = null;
+        }
+        const btn = localRef.current;
+        if (btn) {
+            btn.style.removeProperty('transform');
+            btn.style.removeProperty('transition');
+        }
+        getDragFrame()?.remove();
+        getInsertionIndicator()?.remove();
+        onUserDrag?.(undefined);
+    }
+    function animateNoChangeThenCleanup() {
+        const drag = activeDragRef.current;
+        if (drag?.state !== 'is-dragging')
+            return;
+        drag.state = 'ended-with-no-change';
+        drag.cleanup();
+        drag.cleanup = () => { };
+        const dragFrame = getDragFrame();
+        if (dragFrame) {
+            const { initialItemStart } = drag;
+            if (isColumn) {
+                dragFrame.style.left = `${initialItemStart + columnDragFrameAdjustmentPx}px`;
+            }
+            else {
+                dragFrame.style.top = `${initialItemStart + itemDragFrameAdjustmentPx}px`;
+            }
+            dragFrame.style.transition = 'left var(--ring-ease), top var(--ring-ease), opacity var(--ring-ease)';
+            dragFrame.style.opacity = '0';
+        }
+        const indicator = getInsertionIndicator();
+        if (indicator) {
+            indicator.style.opacity = '0';
+            indicator.style.transition = 'opacity var(--ring-ease)';
+        }
+        const btn = localRef.current;
+        if (btn) {
+            btn.style.transform = isColumn ? 'translateX(0)' : 'translateY(0)';
+            btn.style.transition = 'transform var(--ring-ease)';
+        }
+        onUserDrag?.('cancelled');
+        const ringEaseMs = parseCssDuration(window.getComputedStyle(document.documentElement).getPropertyValue('--ring-ease'));
+        setTimeout(cleanupDrag, ringEaseMs);
+    }
+    function handlePointerDown(e) {
+        onPointerDown?.(e);
+        if (e.defaultPrevented)
+            return;
+        const { clientX, clientY, pointerId, currentTarget } = e;
+        const { start: initialItemStart, end: initialItemEnd } = getItemBounds(index) ?? { start: 0, end: 0 };
+        let indicatorStart;
+        let indicatorSize;
+        if (isColumn) {
+            const thead = currentTarget.closest('thead');
+            const table = thead?.closest('table');
+            if (!thead || !table)
+                return;
+            const { top: headerTop } = thead.getBoundingClientRect();
+            indicatorStart = headerTop;
+            const { bottom: tableBottom } = table.getBoundingClientRect();
+            const visibleTableHeight = tableBottom - headerTop;
+            const viewportBottomRelativeToHeaderTop = window.innerHeight - headerTop;
+            indicatorSize = `min(${visibleTableHeight}px, calc(${viewportBottomRelativeToHeaderTop}px - .5rem))`;
+        }
+        else {
+            const tr = currentTarget.closest('tr');
+            const tbody = tr?.closest('tbody');
+            if (!tr || !tbody)
+                return;
+            const { left: itemLeft, right: itemRight } = tr.getBoundingClientRect();
+            indicatorStart = itemLeft;
+            const visibleItemWidth = itemRight - itemLeft;
+            const viewportRightRelativeToTableLeft = window.innerWidth - itemLeft;
+            indicatorSize = `min(${visibleItemWidth}px, calc(${viewportRightRelativeToTableLeft}px - .5rem))`;
+        }
+        function keydownListener(keyEvent) {
+            if (keyEvent.key === 'Escape') {
+                animateNoChangeThenCleanup();
+                keyEvent.stopPropagation();
+                keyEvent.preventDefault();
+            }
+        }
+        currentTarget.setPointerCapture(pointerId);
+        document.addEventListener('keydown', keydownListener);
+        currentTarget.style.cursor = 'grabbing';
+        activeDragRef.current = {
+            state: 'is-dragging',
+            startX: clientX,
+            startY: clientY,
+            initialItemStart,
+            initialItemEnd,
+            indicatorStart,
+            indicatorSize,
+            cleanup: () => {
+                currentTarget.releasePointerCapture(pointerId);
+                document.removeEventListener('keydown', keydownListener);
+                currentTarget.style.removeProperty('cursor');
+            },
+        };
+        renderDragFrame(clientX, clientY);
+        onUserDrag?.('pointerdown');
+        e.preventDefault();
+    }
+    const scrollerRef = tableProps?.scrollerRef;
+    const lastScrolledRef = useRef(0);
+    function scrollThrottled(scrollDirection) {
+        const now = performance.now();
+        if (now > lastScrolledRef.current + scrollIntervalMs) {
+            lastScrolledRef.current = now;
+            const top = scrollDirection === 'up' ? -scrollStepPx : scrollStepPx;
+            const scroller = scrollerRef?.current ?? window;
+            scroller?.scrollBy({ top, behavior: 'smooth' });
+        }
+    }
+    function handlePointerMove(e) {
+        onPointerMove?.(e);
+        if (e.defaultPrevented)
+            return;
+        const drag = activeDragRef.current;
+        if (drag?.state !== 'is-dragging')
+            return;
+        const { clientX, clientY } = e;
+        renderDragFrame(clientX, clientY);
+        translateButton(clientX, clientY);
+        const insertionPoint = getClosestInsertionPointLocal(clientX, clientY);
+        if (insertionPoint)
+            renderInsertionIndicator(insertionPoint);
+        onUserDrag?.(isColumn ? clientX - drag.startX : clientY - drag.startY);
+        if (!isColumn) {
+            const scrollerRect = scrollerRef?.current?.getBoundingClientRect();
+            const scrollerTop = scrollerRect?.top ?? 0;
+            const scrollerBottom = scrollerRect ? Math.min(scrollerRect.bottom, window.innerHeight) : window.innerHeight;
+            if (clientY < scrollerTop + scrollAreaPx) {
+                scrollThrottled('up');
+            }
+            else if (clientY > scrollerBottom - scrollAreaPx) {
+                scrollThrottled('down');
+            }
+        }
+    }
+    function handlePointerUp(e) {
+        onPointerUp?.(e);
+        if (e.defaultPrevented)
+            return;
+        if (activeDragRef.current?.state !== 'is-dragging')
+            return;
+        const { clientX, clientY } = e;
+        const insertionPoint = getClosestInsertionPointLocal(clientX, clientY);
+        const insertionIndex = insertionPoint && insertionPoint.itemIndex + (insertionPoint.after ? 1 : 0);
+        if (insertionIndex == null || insertionIndex === index || insertionIndex === index + 1) {
+            animateNoChangeThenCleanup();
+            return;
+        }
+        cleanupDrag();
+        onReorder(insertionIndex);
+    }
+    function handleKeyDown(e) {
+        onKeyDown?.(e);
+        if (e.defaultPrevented)
+            return;
+        const left = isColumn && e.key === 'ArrowLeft';
+        const right = isColumn && e.key === 'ArrowRight';
+        const up = !isColumn && e.key === 'ArrowUp';
+        const down = !isColumn && e.key === 'ArrowDown';
+        if ((!left && !right && !up && !down) || !columns || !data)
+            return;
+        const backward = left || up;
+        const initialInsertionIndex = backward ? index - 1 : index + 2;
+        const maxInsertionIndex = isColumn ? columns.length : data.length;
+        const step = backward ? -1 : 1;
+        // eslint-disable-next-line yoda
+        for (let i = initialInsertionIndex; 0 <= i && i <= maxInsertionIndex; i += step) {
+            if (canReorder(i)) {
+                onReorder(i);
+                e.preventDefault();
+                return;
+            }
+        }
+    }
+    function handlePointerCancel(e) {
+        onPointerCancel?.(e);
+        if (!e.defaultPrevented)
+            animateNoChangeThenCleanup();
+    }
+    function handleLostPointerCapture(e) {
+        onLostPointerCapture?.(e);
+        if (!e.defaultPrevented)
+            animateNoChangeThenCleanup();
+    }
+    const cleanupComponent = useEffectEvent(() => {
+        if (activeDragRef.current) {
+            cleanupDrag();
+        }
+    });
+    useEffect(() => {
+        return cleanupComponent;
+    }, []);
+    const hint = isColumn
+        ? `Reorder column ${columns?.[index]?.name ?? String(columns?.[index]?.key)}.`
+        : `Reorder item ${index + 1}.`;
+    const description = isColumn
+        ? 'Use Left and Right arrow keys to move the column.'
+        : 'Use Up and Down arrow keys to move the item.';
+    const shortcuts = isColumn ? 'ArrowLeft ArrowRight' : 'ArrowUp ArrowDown';
+    return (
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+    <button ref={composedRef} type='button' className={classNames(styles.tableButton, isColumn ? styles.columnReorderHandle : styles.itemReorderHandle, className)} aria-label={hint} aria-description={description} aria-keyshortcuts={shortcuts} onKeyDown={handleKeyDown} onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} onPointerUp={handlePointerUp} onPointerCancel={handlePointerCancel} onLostPointerCapture={handleLostPointerCapture} {...restProps}>
+      <Icon glyph={dragIcon} aria-hidden='true'/>
+    </button>);
+}

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/reorder-layout-context.js

@@ -0,0 +1,69 @@
+import { createContext, useRef } from 'react';
+export const ReorderLayoutContext = createContext({
+    registerReorderItem: () => () => { },
+    getItemBounds: () => undefined,
+    getClosestInsertionPoint: () => undefined,
+});
+export function useReorderLayoutContextValue() {
+    const getBoundsByItemIndex = useRef([]);
+    function registerReorderItem(index, getBounds) {
+        getBoundsByItemIndex.current[index] = getBounds;
+        return () => {
+            delete getBoundsByItemIndex.current[index];
+        };
+    }
+    function getItemBounds(index) {
+        const getBounds = getBoundsByItemIndex.current[index];
+        return getBounds?.();
+    }
+    function getClosestInsertionPoint(clientOffset, canReorder) {
+        const candidates = getBoundsByItemIndex.current
+            .map((getBounds, itemIndex) => ({
+            itemIndex,
+            getBounds,
+            beforeAllowed: canReorder(itemIndex),
+            afterAllowed: canReorder(itemIndex + 1),
+        }))
+            .filter(({ beforeAllowed, afterAllowed }) => beforeAllowed || afterAllowed);
+        if (!candidates.length)
+            return undefined;
+        // Lazily computed closest insertion side and distance for each candidate
+        const closest = [];
+        function computeClosest(i) {
+            if (!closest[i]) {
+                const { getBounds, beforeAllowed, afterAllowed } = candidates[i];
+                const { start, end } = getBounds();
+                const beforeDist = Math.abs(clientOffset - start);
+                const afterDist = Math.abs(clientOffset - end);
+                if (!afterAllowed) {
+                    closest[i] = { distance: beforeDist, after: false };
+                }
+                else if (!beforeAllowed) {
+                    closest[i] = { distance: afterDist, after: true };
+                }
+                else {
+                    const after = afterDist < beforeDist;
+                    closest[i] = { distance: after ? afterDist : beforeDist, after };
+                }
+            }
+            return closest[i];
+        }
+        let l = 0;
+        let r = candidates.length - 1;
+        while (l < r) {
+            const m = Math.floor((l + r) / 2);
+            const { distance } = computeClosest(m);
+            if (l <= m - 1 && computeClosest(m - 1).distance < distance) {
+                r = m - 1;
+            }
+            else if (m + 1 <= r && computeClosest(m + 1).distance < distance) {
+                l = m + 1;
+            }
+            else {
+                return { itemIndex: candidates[m].itemIndex, after: computeClosest(m).after };
+            }
+        }
+        return { itemIndex: candidates[l].itemIndex, after: computeClosest(l).after };
+    }
+    return { registerReorderItem, getItemBounds, getClosestInsertionPoint };
+}

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

@@ -1,4 +1 @@
-import { type ExpectColumnReorder } from './column-animation';
-export declare function TableHeader<T>({ expectColumnReorder }: {
-    expectColumnReorder: ExpectColumnReorder;
-}): import("react").JSX.Element | null;
+export declare function TableHeader<T>(): import("react").JSX.Element | null;