@orcestr/ui 0.0.1

package/dist/components/ContextMenu/ContextMenu.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useCallback, useEffect, useRef, useState, } from 'react';
+import { cn } from '../../utils/cn';
+import { ActionConfirmModal } from '../Action/ActionConfirmModal';
+import { isActionItemDisabled } from '../Action/ActionTypes';
+import { useOverlayContext, useOverlayLayerIndex } from '../Overlay/OverlayProvider';
+import { Portal } from '../Portal/Portal';
+import { Spinner } from '../Spinner/Spinner';
+export function ContextMenu({ children, items, className, testId, }) {
+    const overlay = useOverlayContext();
+    const [point, setPoint] = useState(null);
+    const [confirmItem, setConfirmItem] = useState(null);
+    const layerRef = useRef(null);
+    const close = useCallback(() => setPoint(null), []);
+    const layerIndex = useOverlayLayerIndex(point !== null);
+    useEffect(() => {
+        if (!point)
+            return;
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (target instanceof Node && layerRef.current?.contains(target))
+                return;
+            close();
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape')
+                close();
+        };
+        document.addEventListener('pointerdown', handlePointerDown, true);
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDown, true);
+            document.removeEventListener('keydown', handleKeyDown, true);
+        };
+    }, [close, point]);
+    const childProps = children.props;
+    const trigger = cloneElement(children, {
+        onContextMenu: (event) => {
+            childProps.onContextMenu?.(event);
+            if (event.defaultPrevented)
+                return;
+            event.preventDefault();
+            setPoint({ x: event.clientX, y: event.clientY });
+        },
+    });
+    return (_jsxs(_Fragment, { children: [trigger, point ? (_jsx(Portal, { children: _jsx("div", { ref: layerRef, className: cn('oui-popover-content oui-menu oui-action-menu-content oui-context-menu-content', className), "data-state": 'opening', "data-layer": 'dropdown', "data-testid": testId, style: {
+                        left: point.x,
+                        top: point.y,
+                        zIndex: overlay.zIndex.dropdown + layerIndex * 10,
+                    }, onClick: (event) => event.stopPropagation(), children: _jsx(ContextMenuContent, { items: items, close: close, requestConfirmation: setConfirmItem, testId: testId ? `${testId}-list` : undefined }) }) })) : null, _jsx(ActionConfirmModal, { item: confirmItem, open: confirmItem !== null, onCancel: () => setConfirmItem(null), onConfirm: () => {
+                    confirmItem?.onSelect?.();
+                    setConfirmItem(null);
+                } })] }));
+}
+function ContextMenuContent({ items, close, requestConfirmation, testId, }) {
+    return (_jsx("div", { className: 'oui-menu-list', role: 'menu', "data-testid": testId, children: items.map((item) => (_jsxs("div", { children: [item.separatorBefore ? _jsx("div", { className: 'oui-menu-separator' }) : null, _jsxs("button", { type: 'button', role: 'menuitem', className: 'oui-menu-item oui-combobox-option', "data-tone": item.tone, "data-selected": 'false', "data-loading": item.loading ? 'true' : undefined, "data-testid": testId ? `${testId}-${item.key}` : undefined, "aria-busy": item.loading ? 'true' : undefined, disabled: isActionItemDisabled(item) || Boolean(item.children?.length), onClick: () => {
+                        if (isActionItemDisabled(item) || item.children?.length)
+                            return;
+                        if (item.confirm) {
+                            close();
+                            requestConfirmation(item);
+                            return;
+                        }
+                        item.onSelect?.();
+                        close();
+                    }, children: [item.icon || item.loading ? (_jsx("span", { className: 'oui-menu-icon', children: item.loading ? _jsx(Spinner, { size: 1 }) : item.icon })) : null, _jsx("span", { className: 'oui-menu-label', children: item.label })] })] }, item.key))) }));
+}

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,88 @@
+import { type ReactNode } from 'react';
+import type { OrcestrActionItem } from '../Action/ActionTypes';
+export type DataTableSortDirection = 'asc' | 'desc';
+export type DataTableSort = {
+    key: string;
+    direction: DataTableSortDirection;
+};
+export type DataTableColumn<T> = {
+    key: string;
+    title: ReactNode;
+    render: (row: T) => ReactNode;
+    width?: number | string;
+    minWidth?: number;
+    maxWidth?: number;
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    resizable?: boolean;
+    hideable?: boolean;
+    defaultVisible?: boolean;
+    pinned?: 'left' | 'right';
+};
+export type DataTableColumnSettings<T> = {
+    columns?: ReadonlyArray<DataTableColumn<T>>;
+    visibleColumnKeys: ReadonlyArray<string>;
+    onVisibleColumnKeysChange: (keys: string[]) => void;
+    columnWidths?: Record<string, number>;
+    onColumnWidthsChange?: (widths: Record<string, number>) => void;
+    columnOrder?: ReadonlyArray<string>;
+    onColumnOrderChange?: (keys: string[]) => void;
+    onReset?: () => void;
+    label?: ReactNode;
+    resetLabel?: ReactNode;
+    emptyLabel?: ReactNode;
+};
+export type DataTableRowAction<T> = OrcestrActionItem<T>;
+export type DataTableRowGroup<T> = {
+    key: string;
+    label: ReactNode;
+    rows?: ReadonlyArray<T>;
+};
+export type DataTableExpansion<T> = {
+    expandedRowKeys: ReadonlyArray<string>;
+    onExpandedRowKeysChange: (keys: string[]) => void;
+    renderExpandedRow: (row: T) => ReactNode;
+    expandLabel?: string;
+    collapseLabel?: string;
+};
+export type DataTableProps<T> = {
+    rows: ReadonlyArray<T>;
+    columns: ReadonlyArray<DataTableColumn<T>>;
+    rowKey?: (row: T, index: number) => string;
+    sort?: DataTableSort | ReadonlyArray<DataTableSort> | null;
+    onSortChange?: (sort: DataTableSort | DataTableSort[] | null) => void;
+    selectedRowKeys?: ReadonlyArray<string>;
+    onSelectedRowKeysChange?: (keys: string[]) => void;
+    selectable?: boolean;
+    isLoading?: boolean;
+    isFetchingNext?: boolean;
+    hasNext?: boolean;
+    sentinelRef?: (node: HTMLTableRowElement | null) => void;
+    scrollRootRef?: (node: HTMLDivElement | null) => void;
+    emptyText?: ReactNode;
+    loadingText?: ReactNode;
+    error?: ReactNode;
+    errorTitle?: ReactNode;
+    retryLabel?: ReactNode;
+    onRetry?: () => void;
+    onRowClick?: (row: T) => void;
+    rowContextMenuActions?: (row: T) => ReadonlyArray<DataTableRowAction<T>>;
+    rowGroup?: (row: T) => DataTableRowGroup<T> | null;
+    expansion?: DataTableExpansion<T>;
+    height?: number | string;
+    total?: number;
+    toolbar?: ReactNode;
+    columnSettings?: DataTableColumnSettings<T>;
+    virtualized?: boolean;
+    virtualRowHeight?: number;
+    virtualOverscan?: number;
+    virtualWindow?: {
+        start: number;
+        end: number;
+        beforeHeight?: number;
+        afterHeight?: number;
+    };
+    testId?: string;
+};
+export declare function DataTable<T>({ rows, columns, rowKey, sort, onSortChange, selectedRowKeys, onSelectedRowKeysChange, selectable, isLoading, isFetchingNext, hasNext, sentinelRef, scrollRootRef, emptyText, loadingText, error, errorTitle, retryLabel, onRetry, onRowClick, rowContextMenuActions, rowGroup, expansion, height, total, toolbar, columnSettings, virtualized, virtualRowHeight, virtualOverscan, virtualWindow, testId, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/components/DataTable/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,415 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { LuArrowDown, LuArrowUp, LuChevronDown, LuChevronRight, LuRefreshCw, LuRotateCcw, LuSettings2, } from 'react-icons/lu';
+import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
+import { Button } from '../Button/Button';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { ContextMenu } from '../ContextMenu/ContextMenu';
+import { IconButton } from '../IconButton/IconButton';
+import { Popover } from '../Popover/Popover';
+import { Spinner } from '../Spinner/Spinner';
+import { Text } from '../Text/Text';
+export function DataTable({ rows, columns, rowKey, sort, onSortChange, selectedRowKeys = [], onSelectedRowKeysChange, selectable = false, isLoading = false, isFetchingNext = false, hasNext = false, sentinelRef, scrollRootRef, emptyText, loadingText, error, errorTitle, retryLabel, onRetry, onRowClick, rowContextMenuActions, rowGroup, expansion, height, total, toolbar, columnSettings, virtualized = false, virtualRowHeight = 44, virtualOverscan = 8, virtualWindow, testId, }) {
+    const { copy } = useOrcestrUiLocale();
+    const [columnWidths, setColumnWidths] = useState({});
+    const actualColumnWidths = columnSettings?.columnWidths ?? columnWidths;
+    const [resizingColumnKey, setResizingColumnKey] = useState(null);
+    const [scrollState, setScrollState] = useState({ top: 0, height: 0 });
+    const [activeRowIndex, setActiveRowIndex] = useState(null);
+    const horizontalScrollAnimationRef = useRef(null);
+    const horizontalScrollTargetRef = useRef(null);
+    const sortItems = normalizeSort(sort);
+    const settingsColumns = columnSettings?.columns ?? columns;
+    const visibleColumns = useMemo(() => orderColumns(columns.filter((column) => columnVisible(column, columnSettings)), columnSettings?.columnOrder), [columnSettings, columns]);
+    const keyedRows = useMemo(() => rows.map((row, index) => ({
+        row,
+        key: rowKey?.(row, index) ?? String(index),
+    })), [rowKey, rows]);
+    const internalVirtualWindow = useMemo(() => {
+        if (!virtualized || virtualWindow || scrollState.height <= 0)
+            return null;
+        const start = Math.max(0, Math.floor(scrollState.top / virtualRowHeight) - virtualOverscan);
+        const visibleCount = Math.ceil(scrollState.height / virtualRowHeight) + virtualOverscan * 2;
+        const end = Math.min(keyedRows.length, start + visibleCount);
+        return {
+            start,
+            end,
+            beforeHeight: start * virtualRowHeight,
+            afterHeight: Math.max(0, keyedRows.length - end) * virtualRowHeight,
+        };
+    }, [
+        keyedRows.length,
+        scrollState.height,
+        scrollState.top,
+        virtualized,
+        virtualOverscan,
+        virtualRowHeight,
+        virtualWindow,
+    ]);
+    const actualVirtualWindow = virtualWindow ?? internalVirtualWindow;
+    const renderedRows = useMemo(() => {
+        if (!virtualized || !actualVirtualWindow)
+            return keyedRows;
+        return keyedRows.slice(actualVirtualWindow.start, actualVirtualWindow.end);
+    }, [actualVirtualWindow, keyedRows, virtualized]);
+    const selectedSet = useMemo(() => new Set(selectedRowKeys), [selectedRowKeys]);
+    const expandedSet = useMemo(() => new Set(expansion?.expandedRowKeys ?? []), [expansion?.expandedRowKeys]);
+    const visibleKeys = renderedRows.map((item) => item.key);
+    const selectedVisibleCount = visibleKeys.filter((key) => selectedSet.has(key)).length;
+    const allVisibleSelected = visibleKeys.length > 0 && selectedVisibleCount === visibleKeys.length;
+    const someVisibleSelected = selectedVisibleCount > 0 && !allVisibleSelected;
+    const colSpan = visibleColumns.length + (selectable ? 1 : 0) + (expansion ? 1 : 0);
+    const pinnedLeftOffset = (selectable ? 42 : 0) + (expansion ? 34 : 0);
+    const tableMinWidth = useMemo(() => tableMinimumWidth({
+        columns: visibleColumns,
+        columnWidths: actualColumnWidths,
+        selectable,
+        expandable: Boolean(expansion),
+    }), [actualColumnWidths, expansion, selectable, visibleColumns]);
+    const attachScrollRoot = useCallback((node) => {
+        scrollRootRef?.(node);
+        if (!node)
+            return;
+        setScrollState({
+            top: node.scrollTop,
+            height: node.clientHeight,
+        });
+    }, [scrollRootRef]);
+    const handleScroll = useCallback((event) => {
+        const node = event.currentTarget;
+        setScrollState({
+            top: node.scrollTop,
+            height: node.clientHeight,
+        });
+    }, []);
+    const cancelHorizontalScrollAnimation = useCallback(() => {
+        horizontalScrollTargetRef.current = null;
+        if (horizontalScrollAnimationRef.current !== null) {
+            window.cancelAnimationFrame(horizontalScrollAnimationRef.current);
+            horizontalScrollAnimationRef.current = null;
+        }
+    }, []);
+    const animateHorizontalScroll = useCallback((node) => {
+        if (horizontalScrollAnimationRef.current !== null)
+            return;
+        const tick = () => {
+            const target = horizontalScrollTargetRef.current;
+            if (target === null) {
+                horizontalScrollAnimationRef.current = null;
+                return;
+            }
+            const distance = target - node.scrollLeft;
+            if (Math.abs(distance) < 0.5) {
+                node.scrollLeft = target;
+                horizontalScrollAnimationRef.current = null;
+                horizontalScrollTargetRef.current = null;
+                return;
+            }
+            node.scrollLeft += distance * 0.24;
+            horizontalScrollAnimationRef.current = window.requestAnimationFrame(tick);
+        };
+        horizontalScrollAnimationRef.current = window.requestAnimationFrame(tick);
+    }, []);
+    const handleWheel = useCallback((event) => {
+        if (!event.shiftKey || Math.abs(event.deltaY) <= Math.abs(event.deltaX))
+            return;
+        const node = event.currentTarget;
+        if (node.scrollWidth <= node.clientWidth)
+            return;
+        event.preventDefault();
+        const currentTarget = horizontalScrollTargetRef.current ?? node.scrollLeft;
+        const maxScroll = Math.max(0, node.scrollWidth - node.clientWidth);
+        horizontalScrollTargetRef.current = clamp(currentTarget + normalizeWheelDelta(event, node), 0, maxScroll);
+        animateHorizontalScroll(node);
+    }, [animateHorizontalScroll]);
+    useEffect(() => {
+        if (!resizingColumnKey || typeof document === 'undefined')
+            return;
+        const previousCursor = document.body.style.cursor;
+        const previousUserSelect = document.body.style.userSelect;
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        return () => {
+            document.body.style.cursor = previousCursor;
+            document.body.style.userSelect = previousUserSelect;
+        };
+    }, [resizingColumnKey]);
+    useEffect(() => () => cancelHorizontalScrollAnimation(), [cancelHorizontalScrollAnimation]);
+    const setSelectedKeys = (keys) => {
+        onSelectedRowKeysChange?.(keys);
+    };
+    const toggleAllVisible = () => {
+        if (!onSelectedRowKeysChange)
+            return;
+        if (allVisibleSelected) {
+            setSelectedKeys(selectedRowKeys.filter((key) => !visibleKeys.includes(key)));
+            return;
+        }
+        setSelectedKeys(Array.from(new Set([...selectedRowKeys, ...visibleKeys])));
+    };
+    const toggleRow = (key) => {
+        if (!onSelectedRowKeysChange)
+            return;
+        if (selectedSet.has(key)) {
+            setSelectedKeys(selectedRowKeys.filter((item) => item !== key));
+            return;
+        }
+        setSelectedKeys([...selectedRowKeys, key]);
+    };
+    const toggleExpandedRow = (key) => {
+        if (!expansion)
+            return;
+        if (expandedSet.has(key)) {
+            expansion.onExpandedRowKeysChange(expansion.expandedRowKeys.filter((item) => item !== key));
+            return;
+        }
+        expansion.onExpandedRowKeysChange([...expansion.expandedRowKeys, key]);
+    };
+    const toggleSort = (column, event) => {
+        if (!column.sortable || !onSortChange)
+            return;
+        const existing = sortItems.find((item) => item.key === column.key);
+        const nextForColumn = !existing
+            ? { key: column.key, direction: 'asc' }
+            : existing.direction === 'asc'
+                ? { key: column.key, direction: 'desc' }
+                : null;
+        const keepOthers = event?.shiftKey ? sortItems.filter((item) => item.key !== column.key) : [];
+        const next = nextForColumn ? [...keepOthers, nextForColumn] : keepOthers;
+        onSortChange(next.length === 0 ? null : event?.shiftKey ? next : next[0]);
+    };
+    const startResize = (column, event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const startX = event.clientX;
+        const headerCell = event.currentTarget.closest('th');
+        const measuredWidth = Math.round(headerCell?.getBoundingClientRect().width ?? 0);
+        const startWidth = actualColumnWidths[column.key] ??
+            (measuredWidth > 0 ? measuredWidth : undefined) ??
+            numericWidth(column.width) ??
+            column.minWidth ??
+            160;
+        setResizingColumnKey(column.key);
+        const onMove = (moveEvent) => {
+            const next = clamp(Math.round(startWidth + moveEvent.clientX - startX), column.minWidth ?? 72, column.maxWidth ?? 720);
+            if (columnSettings?.onColumnWidthsChange) {
+                columnSettings.onColumnWidthsChange({
+                    ...actualColumnWidths,
+                    [column.key]: next,
+                });
+                return;
+            }
+            setColumnWidths((current) => ({ ...current, [column.key]: next }));
+        };
+        const onUp = () => {
+            setResizingColumnKey(null);
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+    };
+    const handleKeyDown = (event) => {
+        if (renderedRows.length === 0)
+            return;
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            setActiveRowIndex((current) => Math.min(renderedRows.length - 1, (current ?? -1) + 1));
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            setActiveRowIndex((current) => Math.max(0, (current ?? renderedRows.length) - 1));
+        }
+        else if (event.key === 'Enter') {
+            if (activeRowIndex == null)
+                return;
+            const item = renderedRows[activeRowIndex];
+            if (item)
+                onRowClick?.(item.row);
+        }
+        else if (event.key === ' ' && selectable) {
+            if (activeRowIndex == null)
+                return;
+            const item = renderedRows[activeRowIndex];
+            if (item) {
+                event.preventDefault();
+                toggleRow(item.key);
+            }
+        }
+        else if (event.key === 'ArrowRight' && expansion) {
+            if (activeRowIndex == null)
+                return;
+            const item = renderedRows[activeRowIndex];
+            if (item && !expandedSet.has(item.key))
+                toggleExpandedRow(item.key);
+        }
+        else if (event.key === 'ArrowLeft' && expansion) {
+            if (activeRowIndex == null)
+                return;
+            const item = renderedRows[activeRowIndex];
+            if (item && expandedSet.has(item.key))
+                toggleExpandedRow(item.key);
+        }
+    };
+    return (_jsxs("div", { className: 'oui-data-table-shell', "data-testid": testId ? `${testId}-shell` : undefined, children: [toolbar || columnSettings ? (_jsxs("div", { className: 'oui-data-table-toolbar', children: [toolbar ? (_jsx("div", { className: 'oui-data-table-toolbar-content', children: toolbar })) : null, columnSettings ? (_jsx(ColumnSettingsPanel, { columns: settingsColumns, visibleColumnKeys: columnSettings.visibleColumnKeys, columnOrder: columnSettings.columnOrder, label: columnSettings.label ?? copy.table.columnSettings, resetLabel: columnSettings.resetLabel ?? copy.common.reset, emptyLabel: columnSettings.emptyLabel ?? copy.common.noData, onVisibleColumnKeysChange: columnSettings.onVisibleColumnKeysChange, onColumnOrderChange: columnSettings.onColumnOrderChange, onReset: columnSettings.onReset, testId: testId ? `${testId}-columns` : undefined })) : null] })) : null, _jsx("div", { ref: attachScrollRoot, className: 'oui-data-table-wrap', style: { height }, role: 'grid', tabIndex: 0, "data-testid": testId, onScroll: virtualized ? handleScroll : undefined, onWheel: handleWheel, onPointerDown: cancelHorizontalScrollAnimation, onMouseDown: cancelHorizontalScrollAnimation, onKeyDown: handleKeyDown, children: _jsxs("table", { className: 'oui-data-table', "aria-rowcount": total ?? rows.length, style: {
+                        minWidth: tableMinWidth ? `${tableMinWidth}px` : undefined,
+                        '--oui-data-table-select-left-offset': expansion ? '34px' : '0px',
+                        '--oui-data-table-pinned-left-offset': `${pinnedLeftOffset}px`,
+                    }, children: [_jsxs("colgroup", { children: [expansion ? _jsx("col", { style: { width: 34 } }) : null, selectable ? _jsx("col", { style: { width: 42 } }) : null, visibleColumns.map((column) => (_jsx("col", { style: {
+                                        width: formatCssSize(actualColumnWidths[column.key] ?? column.width),
+                                        minWidth: formatCssSize(column.minWidth),
+                                        maxWidth: formatCssSize(column.maxWidth),
+                                    } }, column.key)))] }), _jsx("thead", { children: _jsxs("tr", { children: [expansion ? (_jsx("th", { className: 'oui-data-table-expand-cell', role: 'columnheader', "aria-hidden": 'true' })) : null, selectable ? (_jsx("th", { className: 'oui-data-table-select-cell', role: 'columnheader', scope: 'col', children: _jsx("span", { className: 'oui-data-table-select-control', children: _jsx(Checkbox, { "aria-label": copy.table.selectAllRows, checked: allVisibleSelected, ref: (node) => {
+                                                    if (node)
+                                                        node.indeterminate = someVisibleSelected;
+                                                }, disabled: !onSelectedRowKeysChange || visibleKeys.length === 0, onChange: toggleAllVisible }) }) })) : null, visibleColumns.map((column) => {
+                                        const activeSort = sortItems.find((item) => item.key === column.key) ?? null;
+                                        return (_jsx("th", { role: 'columnheader', scope: 'col', "data-pinned": column.pinned, "data-resizing": resizingColumnKey === column.key ? 'true' : undefined, style: {
+                                                width: formatCssSize(actualColumnWidths[column.key] ?? column.width),
+                                                minWidth: formatCssSize(column.minWidth),
+                                                maxWidth: formatCssSize(column.maxWidth),
+                                                textAlign: column.align,
+                                            }, children: _jsxs("span", { className: 'oui-data-table-header-cell', children: [column.sortable ? (_jsxs("button", { type: 'button', className: 'oui-data-table-sort', "data-active": activeSort ? 'true' : undefined, onClick: (event) => toggleSort(column, event), children: [_jsx("span", { className: 'oui-data-table-sort-label', children: column.title }), activeSort?.direction === 'asc' ? (_jsx(LuArrowUp, { size: 13 })) : activeSort?.direction === 'desc' ? (_jsx(LuArrowDown, { size: 13 })) : (_jsx("span", { className: 'oui-data-table-sort-placeholder' }))] })) : (column.title), column.resizable ? (_jsx("span", { role: 'separator', "aria-orientation": 'vertical', tabIndex: 0, className: 'oui-data-table-resize', "aria-label": copy.common.resizeColumn, onPointerDown: (event) => startResize(column, event) })) : null] }) }, column.key));
+                                    })] }) }), _jsx("tbody", { children: error ? (_jsxs(DataTableMessageRow, { colSpan: colSpan, children: [_jsx(Text, { fw: 700, children: errorTitle ?? copy.table.unableToLoad }), _jsx(Text, { fs: '12px', tone: 'muted', children: error }), onRetry ? (_jsx(Button, { size: 1, v: 'surface', leftIcon: _jsx(LuRefreshCw, { size: 14 }), onClick: onRetry, children: retryLabel ?? copy.common.retry })) : null] })) : isLoading ? (_jsxs(DataTableMessageRow, { colSpan: colSpan, children: [_jsx(Spinner, {}), _jsx(Text, { fs: '12px', tone: 'muted', children: loadingText ?? copy.table.loadingRows })] })) : renderedRows.length === 0 ? (_jsx(DataTableMessageRow, { colSpan: colSpan, children: _jsx(Text, { fs: '12px', tone: 'muted', children: emptyText ?? copy.common.noData }) })) : (_jsxs(_Fragment, { children: [virtualized && actualVirtualWindow?.beforeHeight ? (_jsx("tr", { role: 'row', "aria-hidden": 'true', children: _jsx("td", { colSpan: colSpan, style: { height: actualVirtualWindow.beforeHeight, padding: 0 } }) })) : null, renderGroupedRows({
+                                        activeRowIndex,
+                                        colSpan,
+                                        columns: visibleColumns,
+                                        copy,
+                                        expandedSet,
+                                        expansion,
+                                        renderedRows,
+                                        rowContextMenuActions,
+                                        rowGroup,
+                                        onRowClick,
+                                        onSelectToggle: toggleRow,
+                                        onExpandToggle: toggleExpandedRow,
+                                        selectable,
+                                        selectedSet,
+                                        canSelect: Boolean(onSelectedRowKeysChange),
+                                    }), virtualized && actualVirtualWindow?.afterHeight ? (_jsx("tr", { role: 'row', "aria-hidden": 'true', children: _jsx("td", { colSpan: colSpan, style: { height: actualVirtualWindow.afterHeight, padding: 0 } }) })) : null, hasNext ? (_jsx("tr", { ref: sentinelRef, role: 'row', "aria-hidden": 'true', children: _jsx("td", { colSpan: colSpan, children: _jsx("div", { className: 'oui-data-table-next-loader', children: isFetchingNext ? _jsx(Spinner, { size: 1 }) : null }) }) })) : null] })) })] }) })] }));
+}
+function ColumnSettingsPanel({ columns, visibleColumnKeys, columnOrder, label, resetLabel, emptyLabel, onVisibleColumnKeysChange, onColumnOrderChange, onReset, testId, }) {
+    const configurableColumns = orderColumns(columns.filter((column) => column.hideable !== false), columnOrder);
+    const visibleSet = new Set(visibleColumnKeys);
+    const orderedKeys = configurableColumns.map((column) => column.key);
+    const selectedCount = orderedKeys.filter((key) => visibleSet.has(key)).length;
+    const toggleColumn = (key) => {
+        if (visibleSet.has(key)) {
+            if (selectedCount <= 1)
+                return;
+            onVisibleColumnKeysChange(visibleColumnKeys.filter((item) => item !== key));
+            return;
+        }
+        onVisibleColumnKeysChange([...visibleColumnKeys, key]);
+    };
+    const moveColumn = (key, direction) => {
+        if (!onColumnOrderChange)
+            return;
+        const current = columnOrder?.length ? [...columnOrder] : columns.map((column) => column.key);
+        const index = current.indexOf(key);
+        const nextIndex = index + direction;
+        if (index < 0 || nextIndex < 0 || nextIndex >= current.length)
+            return;
+        const next = [...current];
+        [next[index], next[nextIndex]] = [next[nextIndex], next[index]];
+        onColumnOrderChange(next);
+    };
+    return (_jsxs(Popover, { trigger: (_jsx(IconButton, { v: 'surface', icon: _jsx(LuSettings2, { size: 16 }), "aria-label": typeof label === 'string' ? label : undefined, testId: testId })), align: 'end', className: 'oui-data-table-column-settings', testId: testId ? `${testId}-popover` : undefined, children: [_jsxs("div", { className: 'oui-data-table-column-settings-head', children: [_jsx(Text, { fs: '13px', fw: 760, children: label }), onReset ? (_jsx(Button, { className: 'oui-data-table-settings-reset', size: 1, v: 'ghost', leftIcon: _jsx(LuRotateCcw, { size: 13 }), onClick: onReset, children: resetLabel })) : null] }), _jsx("div", { className: 'oui-data-table-column-settings-list', children: configurableColumns.length === 0 ? (_jsx(Text, { fs: '12px', tone: 'muted', children: emptyLabel })) : configurableColumns.map((column, index) => {
+                    const visible = visibleSet.has(column.key);
+                    return (_jsxs("div", { className: 'oui-data-table-column-settings-row', children: [_jsxs("label", { className: 'oui-data-table-column-toggle', children: [_jsx(Checkbox, { checked: visible, disabled: visible && selectedCount <= 1, onChange: () => toggleColumn(column.key) }), _jsx("span", { children: column.title })] }), onColumnOrderChange ? (_jsxs("span", { className: 'oui-data-table-column-settings-order', children: [_jsx("button", { type: 'button', disabled: index === 0, onClick: () => moveColumn(column.key, -1), children: _jsx(LuArrowUp, { size: 13 }) }), _jsx("button", { type: 'button', disabled: index === configurableColumns.length - 1, onClick: () => moveColumn(column.key, 1), children: _jsx(LuArrowDown, { size: 13 }) })] })) : null] }, column.key));
+                }) })] }));
+}
+function DataTableRow({ row, columns, active, expanded, expansion, selected, selectable, canSelect, onToggle, onExpandToggle, onRowClick, actions, selectLabel, }) {
+    const rowNode = (_jsxs("tr", { role: 'row', "data-selected": selected ? 'true' : undefined, "data-active": active ? 'true' : undefined, "data-clickable": onRowClick ? 'true' : undefined, onClick: () => onRowClick?.(row), children: [expansion ? (_jsx("td", { className: 'oui-data-table-expand-cell', role: 'gridcell', children: _jsx("button", { type: 'button', className: 'oui-data-table-expand', "aria-label": expanded ? expansion.collapseLabel : expansion.expandLabel, "aria-expanded": expanded, onClick: (event) => {
+                        event.stopPropagation();
+                        onExpandToggle();
+                    }, children: expanded ? _jsx(LuChevronDown, { size: 14 }) : _jsx(LuChevronRight, { size: 14 }) }) })) : null, selectable ? (_jsx("td", { className: 'oui-data-table-select-cell', role: 'gridcell', children: _jsx("span", { className: 'oui-data-table-select-control', children: _jsx(Checkbox, { "aria-label": selectLabel, checked: selected, disabled: !canSelect, onClick: (event) => event.stopPropagation(), onChange: onToggle }) }) })) : null, columns.map((column) => (_jsx("td", { role: 'gridcell', "data-pinned": column.pinned, style: { textAlign: column.align }, children: column.render(row) }, column.key)))] }));
+    if (actions.length === 0)
+        return rowNode;
+    const menuItems = actions.map(({ children: _children, onSelect, ...action }) => ({
+        ...action,
+        onSelect: () => onSelect?.(row),
+    }));
+    return (_jsx(ContextMenu, { items: menuItems, children: rowNode }));
+}
+function renderGroupedRows({ activeRowIndex, colSpan, columns, copy, expandedSet, expansion, renderedRows, rowContextMenuActions, rowGroup, onRowClick, onSelectToggle, onExpandToggle, selectable, selectedSet, canSelect, }) {
+    let previousGroupKey = null;
+    return renderedRows.map(({ row, key }, index) => {
+        const group = rowGroup?.(row) ?? null;
+        const showGroup = group && group.key !== previousGroupKey;
+        if (group)
+            previousGroupKey = group.key;
+        const expanded = expandedSet.has(key);
+        return (_jsxs(Fragment, { children: [showGroup ? (_jsx("tr", { className: 'oui-data-table-group-row', role: 'row', children: _jsx("td", { role: 'gridcell', colSpan: colSpan, children: group.label }) })) : null, _jsx(DataTableRow, { row: row, columns: columns, active: index === activeRowIndex, expanded: expanded, expansion: expansion
+                        ? {
+                            ...expansion,
+                            expandLabel: expansion.expandLabel ?? copy.table.expandRow,
+                            collapseLabel: expansion.collapseLabel ?? copy.table.collapseRow,
+                        }
+                        : undefined, selected: selectedSet.has(key), selectable: selectable, canSelect: canSelect, onToggle: () => onSelectToggle(key), onExpandToggle: () => onExpandToggle(key), onRowClick: onRowClick, actions: rowContextMenuActions?.(row) ?? [], selectLabel: copy.table.selectRow }), expanded && expansion ? (_jsx("tr", { className: 'oui-data-table-expanded-row', role: 'row', children: _jsx("td", { role: 'gridcell', colSpan: colSpan, children: expansion.renderExpandedRow(row) }) })) : null] }, key));
+    });
+}
+function DataTableMessageRow({ colSpan, children, }) {
+    return (_jsx("tr", { role: 'row', children: _jsx("td", { role: 'gridcell', colSpan: colSpan, children: _jsx("div", { className: 'oui-data-table-message', children: children }) }) }));
+}
+function normalizeSort(sort) {
+    if (!sort)
+        return [];
+    return Array.isArray(sort) ? [...sort] : [sort];
+}
+function columnVisible(column, settings) {
+    if (!settings)
+        return column.defaultVisible !== false;
+    return settings.visibleColumnKeys.includes(column.key);
+}
+function orderColumns(columns, order) {
+    const ordered = order
+        ? [...columns].sort((left, right) => {
+            const leftIndex = order.indexOf(left.key);
+            const rightIndex = order.indexOf(right.key);
+            return indexOrEnd(leftIndex) - indexOrEnd(rightIndex);
+        })
+        : [...columns];
+    return [
+        ...ordered.filter((column) => column.pinned === 'left'),
+        ...ordered.filter((column) => !column.pinned),
+        ...ordered.filter((column) => column.pinned === 'right'),
+    ];
+}
+function indexOrEnd(index) {
+    return index === -1 ? Number.MAX_SAFE_INTEGER : index;
+}
+function formatCssSize(value) {
+    if (value === undefined)
+        return undefined;
+    return typeof value === 'number' ? `${value}px` : value;
+}
+function numericWidth(value) {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value === 'string' && /^\d+px$/.test(value)) {
+        return Number.parseInt(value, 10);
+    }
+    return undefined;
+}
+function tableMinimumWidth({ columns, columnWidths, selectable, expandable, }) {
+    const base = (selectable ? 42 : 0) + (expandable ? 34 : 0);
+    return columns.reduce((total, column) => {
+        const width = columnWidths[column.key] ??
+            numericWidth(column.width) ??
+            column.minWidth ??
+            120;
+        return total + width;
+    }, base);
+}
+function normalizeWheelDelta(event, node) {
+    if (event.deltaMode === 1)
+        return event.deltaY * 16;
+    if (event.deltaMode === 2)
+        return event.deltaY * node.clientWidth;
+    return event.deltaY;
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}

package/dist/components/DataTable/DataTableStateAdapters.d.ts

@@ -0,0 +1,41 @@
+import type { DataTableSort } from './DataTable';
+export type DataTablePreferenceScope = {
+    tableKey: string;
+    tenantId?: string | number | null;
+    userId?: string | number | null;
+};
+export type DataTablePersistedState = {
+    visibleColumnKeys?: string[];
+    columnOrder?: string[];
+    columnWidths?: Record<string, number>;
+    sort?: DataTableSort[];
+    page?: number;
+    pageSize?: number;
+    savedViewKey?: string;
+};
+export type DataTableSavedView = DataTablePersistedState & {
+    key: string;
+    label: string;
+    default?: boolean;
+};
+export type DataTableStateStorage = Pick<Storage, 'getItem' | 'removeItem' | 'setItem'>;
+export declare function dataTablePreferenceStorageKey(scope: DataTablePreferenceScope): string;
+export declare function readDataTableState(scope: DataTablePreferenceScope, storage?: DataTableStateStorage | null): DataTablePersistedState | null;
+export declare function writeDataTableState(scope: DataTablePreferenceScope, state: DataTablePersistedState, storage?: DataTableStateStorage | null): void;
+export declare function clearDataTableState(scope: DataTablePreferenceScope, storage?: DataTableStateStorage | null): void;
+export declare function dataTableStateToSearchParams(state: DataTablePersistedState): URLSearchParams;
+export declare function dataTableStateFromSearchParams(params: URLSearchParams): DataTablePersistedState;
+export declare function dataTablePaginationToSearchParams({ page, pageSize, }: {
+    page?: number;
+    pageSize?: number;
+}): URLSearchParams;
+export declare function dataTablePaginationFromSearchParams(params: URLSearchParams): Pick<DataTablePersistedState, 'page' | 'pageSize'>;
+export declare function resolveDataTableState({ defaultState, persistedState, urlState, }: {
+    defaultState?: DataTablePersistedState | null;
+    persistedState?: DataTablePersistedState | null;
+    urlState?: DataTablePersistedState | null;
+}): DataTablePersistedState;
+export declare function defaultDataTableSavedView(views: ReadonlyArray<DataTableSavedView>): DataTableSavedView | null;
+export declare function applyDataTableSavedView(state: DataTablePersistedState, view: DataTableSavedView): DataTablePersistedState;
+export declare function resetDataTableStateToDefault(defaultState?: DataTablePersistedState): DataTablePersistedState;
+//# sourceMappingURL=DataTableStateAdapters.d.ts.map

package/dist/components/DataTable/DataTableStateAdapters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableStateAdapters.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableStateAdapters.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE/C,MAAM,MAAM,wBAAwB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IAClC,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,uBAAuB,GAAG;IACvD,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC,CAAC;AAExF,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,wBAAwB,GAAG,MAAM,CAIrF;AAED,wBAAgB,kBAAkB,CAC9B,KAAK,EAAE,wBAAwB,EAC/B,OAAO,GAAE,qBAAqB,GAAG,IAAuB,GACzD,uBAAuB,GAAG,IAAI,CAShC;AAED,wBAAgB,mBAAmB,CAC/B,KAAK,EAAE,wBAAwB,EAC/B,KAAK,EAAE,uBAAuB,EAC9B,OAAO,GAAE,qBAAqB,GAAG,IAAuB,QAI3D;AAED,wBAAgB,mBAAmB,CAC/B,KAAK,EAAE,wBAAwB,EAC/B,OAAO,GAAE,qBAAqB,GAAG,IAAuB,QAG3D;AAED,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,uBAAuB,GAAG,eAAe,CAiB5F;AAED,wBAAgB,8BAA8B,CAC1C,MAAM,EAAE,eAAe,GACxB,uBAAuB,CAUzB;AAED,wBAAgB,iCAAiC,CAAC,EAC9C,IAAI,EACJ,QAAQ,GACX,EAAE;IACC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,eAAe,CAElB;AAED,wBAAgB,mCAAmC,CAC/C,MAAM,EAAE,eAAe,GACxB,IAAI,CAAC,uBAAuB,EAAE,MAAM,GAAG,UAAU,CAAC,CAMpD;AAED,wBAAgB,qBAAqB,CAAC,EAClC,YAAY,EACZ,cAAc,EACd,QAAQ,GACX,EAAE;IACC,YAAY,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;CAC7C,GAAG,uBAAuB,CAM1B;AAED,wBAAgB,yBAAyB,CACrC,KAAK,EAAE,aAAa,CAAC,kBAAkB,CAAC,GACzC,kBAAkB,GAAG,IAAI,CAE3B;AAED,wBAAgB,uBAAuB,CACnC,KAAK,EAAE,uBAAuB,EAC9B,IAAI,EAAE,kBAAkB,GACzB,uBAAuB,CAWzB;AAED,wBAAgB,4BAA4B,CACxC,YAAY,GAAE,uBAA4B,GAC3C,uBAAuB,CAEzB"}