@apple-pie/slice 0.1.59 → 0.2.0

package/dist/esm/chunks/viewState-D7e7CrHf.mjs

@@ -0,0 +1,659 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+
+import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
+
+import "../theme/colors.mjs";
+
+import { corners } from "../theme/corners.mjs";
+
+import "../theme/type.mjs";
+
+import "./resolveColor-Kvs7kDyy.mjs";
+
+import "./breakpoints-Dn9DgpJe.mjs";
+
+import "./tslib.es6-CpnJrDBv.mjs";
+
+import { s as setStyle, b as accessibleKeyDown } from "./misc-DI5GSqkt.mjs";
+
+import "./broadcastChannel-CPT0S33H.mjs";
+
+import "./files-6nwSZlJK.mjs";
+
+import "./webRTCStore-BepH2O9l.mjs";
+
+import "./microphoneStore-BzSEbtfK.mjs";
+
+import "./volumeStore-mqWIRL0J.mjs";
+
+import { useObserveResize } from "../hooks/useObserveResize.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { I as Icon } from "./Icon-43T0fkr6.mjs";
+
+import { r as rafThrottle } from "./rafThrottle-Dl8Z5sJ-.mjs";
+
+var styles = {
+    tableWrapper: "DataTable-module_tableWrapper__BzoJE",
+    resizeBar: "DataTable-module_resizeBar__LmzEF",
+    table: "DataTable-module_table__oL4Dz",
+    baseCell: "DataTable-module_baseCell__DQl-z",
+    baseCellWrapper: "DataTable-module_baseCellWrapper__WMgNm",
+    headerCellWrapper: "DataTable-module_headerCellWrapper__ytVYY",
+    colResizeHandle: "DataTable-module_colResizeHandle__dF5Es",
+    header: "DataTable-module_header__QgdCY",
+    headerTitle: "DataTable-module_headerTitle__K0pmX",
+    m: "DataTable-module_m__G9QOp type-module_body-m-regular__LuQBA",
+    scroll: "DataTable-module_scroll__grEU0 scrollBars-module_scrollbars__c-ZPl",
+    fixedCell: "DataTable-module_fixedCell__dgbUW",
+    cellViewport: "DataTable-module_cellViewport__WZBIX"
+};
+
+function createColumnHelper() {
+    return {
+        accessor: (accessor, def) => Object.assign({
+            accessor: accessor
+        }, def)
+    };
+}
+
+const resolveAlignValue = value => {
+    switch (value) {
+      case "start":
+        return "flex-start";
+
+      case "center":
+      default:
+        return "center";
+
+      case "end":
+        return "flex-end";
+    }
+}, resolveDragHandleXPos = elements => {
+    const {cell: cell, handle: handle, parent: parent, position: position = "right"} = null != elements ? elements : {};
+    if (!cell || !parent || !handle) return;
+    const {left: left, width: width} = cell.getBoundingClientRect(), x = left - parent.getBoundingClientRect().left - parent.clientLeft + parent.scrollLeft;
+    handle.style.left = "right" === position ? `${x + width}px` : `${x}px`;
+};
+
+const DEFAULT_OVERSCAN = 6;
+
+function DataTable(rawProps) {
+    const props = resolveColorProps(rawProps), {backgroundColor: backgroundColor = "var(--core-surface-primary)", headerBackgroundColor: headerBackgroundColor = "var(--core-surface-secondary)", headerBackgroundColorHover: headerBackgroundColorHover = "var(--core-surface-primary-tint)", candyStripeBackgroundColor: candyStripeBackgroundColor = "var(--core-surface-primary-tint)", backgroundColorHoverRow: backgroundColorHoverRow = "var(--core-surface-primary-tint)", handleHoverColor: handleHoverColor = "var(--core-button-primary)", freezeColumn: freezeColumn = !1, headerSticky: headerSticky = !0, height: height = "auto", width: width = "100%", maxWidth: maxWidth, colResize: colResize = !0, colReorder: colReorder = !0, columnOrder: controlledColumnOrder, columnWidths: controlledColumnWidths, defaultSort: defaultSort, onRowClick: onRowClick, freezeColumnBackgroundColor: freezeColumnBackgroundColor, borderColor: borderColor = "var(--core-outline-primary)", borderStyle: borderStyle = "box", columnDefinitions: columnDefinitions = [], tableData: tableData = [], getRowId: getRowId, filter: filter, caption: caption = "Data Table", onDoubleClick: onDoubleClick, onClick: onClick, onMouseOut: onMouseOut, onMouseOver: onMouseOver, sort: sort, onSortChange: onSortChange, onColumnResize: onColumnResize, onColumnReorder: onColumnReorder, borderRadius: borderRadius = corners["corner-m"], virtualizeRows: virtualizeRows, virtualizeRowThreshold: virtualizeRowThreshold = 500, rowHeight: rowHeight = 44, overscanRows: overscanRows, margin: margin} = props, [hScroll, setHScroll] = useState(!1), [vScroll, setVScroll] = useState(!1), [internalSort, setInternalSort] = useState(defaultSort), sortControlled = Object.hasOwn(rawProps, "sort"), sortKey = sortControlled ? sort : internalSort, [internalColumnWidths, setInternalColumnWidths] = useState({}), [internalColumnOrder, setInternalColumnOrder] = useState(null), columnOrder = null != controlledColumnOrder ? controlledColumnOrder : internalColumnOrder, columnWidths = null != controlledColumnWidths ? controlledColumnWidths : internalColumnWidths, setColumnWidths = useCallback(next => {
+        void 0 === controlledColumnWidths && setInternalColumnWidths(next);
+    }, [ controlledColumnWidths ]), setColumnOrder = useCallback(next => {
+        void 0 === controlledColumnOrder && setInternalColumnOrder(next);
+    }, [ controlledColumnOrder ]), [draggedColId, setDraggedColId] = useState(null), wrapperRef = React.useRef(null), headerRef = React.useRef(null), headerSize = useObserveResize(headerRef, {
+        ignore: "width"
+    }), resizeBarRef = React.useRef(null), colRefs = React.useRef({}), elements = useMemo(() => ({
+        handle: resizeBarRef,
+        parent: wrapperRef
+    }), []), cornerBoxShadow = useMemo(() => {
+        const shadows = [];
+        return hScroll && freezeColumn && shadows.push("1px 0 0 var(--core-outline-primary)", "5px 0 0 rgba(0,0,0,0.1)"), 
+        vScroll && headerSticky && shadows.push("0 1px 0 var(--core-outline-primary)"), 
+        vScroll && headerSticky && !hScroll && shadows.push("0 5px 0 rgba(0,0,0,0.1)"), 
+        shadows.length > 0 ? shadows.join(",") : "none";
+    }, [ hScroll, vScroll, freezeColumn, headerSticky ]), columnBoxShadow = useMemo(() => {
+        const shadows = [];
+        return hScroll && freezeColumn && shadows.push("1px 0 0 var(--core-outline-primary)", "5px 0 0 rgba(0,0,0,0.1)"), 
+        shadows.length > 0 ? shadows.join(",") : "none";
+    }, [ hScroll, freezeColumn ]), headerBoxShadow = useMemo(() => {
+        const shadows = [];
+        return vScroll && headerSticky && shadows.push("0 1px 0 var(--core-outline-primary)", "0 5px 0 rgba(0,0,0,0.1)"), 
+        shadows.length > 0 ? shadows.join(",") : "none";
+    }, [ vScroll, headerSticky ]), cssVars = useMemo(() => ({
+        "--table-width": setStyle(width),
+        "--table-max-width": setStyle(maxWidth),
+        "--table-height": setStyle(height),
+        "--table-margin": setStyle(margin, 0),
+        "--table-background-color": backgroundColor,
+        "--table-hover-background": backgroundColorHoverRow,
+        "--table-row-height": `${rowHeight}px`,
+        "--table-column-box-shadow": columnBoxShadow,
+        "--table-header-box-shadow": headerBoxShadow,
+        "--table-corner-box-shadow": cornerBoxShadow,
+        "--table-header-background-color": headerBackgroundColor,
+        "--table-header-background-color-hover": headerBackgroundColorHover,
+        "--table-candy-stripe-background-color": candyStripeBackgroundColor,
+        "--table-freeze-column-position": freezeColumn ? "sticky" : "relative",
+        "--table-header-sticky-position": headerSticky ? "sticky" : "relative",
+        "--table-border-color": borderColor,
+        "--table-corner-position": freezeColumn || headerSticky ? "sticky" : "relative",
+        "--table-corner-left": freezeColumn ? "0px" : "unset",
+        "--table-corner-top": headerSticky ? "0px" : "auto",
+        "--table-border-width": "none" === borderStyle ? "0" : "1px",
+        "--table-border-sides": "box" === borderStyle ? "1px" : "0",
+        "--table-handle-hover-color": handleHoverColor,
+        "--table-border-radius": "box" === borderStyle ? setStyle(borderRadius) : corners["corner-none"]
+    }), [ backgroundColor, backgroundColorHoverRow, rowHeight, headerBackgroundColor, headerBackgroundColorHover, candyStripeBackgroundColor, cornerBoxShadow, columnBoxShadow, headerBoxShadow, freezeColumn, headerSticky, width, height, borderColor, borderStyle, handleHoverColor, borderRadius, maxWidth, margin ]), handleCreateRefs = useCallback((el, id) => {
+        colRefs.current[id] = el;
+    }, []), orderedColumns = useMemo(() => {
+        if (!columnOrder) return columnDefinitions;
+        const byId = new Map(columnDefinitions.map(column => [ column.id, column ])), ordered = columnOrder.map(id => byId.get(id)).filter(column => !!column), seen = new Set(columnOrder);
+        return [ ...ordered, ...columnDefinitions.filter(column => !seen.has(column.id)) ];
+    }, [ columnDefinitions, columnOrder ]), finishResize = useCallback((id, width) => {
+        var _a;
+        const element = colRefs.current[id];
+        if (void 0 !== controlledColumnWidths && element) {
+            const column = orderedColumns.find(column => column.id === id);
+            element.style.width = setStyle(null !== (_a = controlledColumnWidths[id]) && void 0 !== _a ? _a : null == column ? void 0 : column.width);
+        }
+        null == onColumnResize || onColumnResize(id, width);
+    }, [ controlledColumnWidths, orderedColumns, onColumnResize ]), {dragResize: dragResize, hoverResize: hoverResize} = function(elements, colResize, setColumnWidths, onColumnResize) {
+        const resizeCallback = useRef(onColumnResize);
+        resizeCallback.current = onColumnResize;
+        const [resizeCol, setResizeCol] = useState(null), [client, setClient] = useState(null), [resizing, setResizing] = useState(!1), didSetListenersRef = useRef(!1), previousStyles = useRef({
+            userSelect: "",
+            webkitUserSelect: "",
+            cursor: ""
+        }), originalWidth = useRef(""), colStartX = useRef(0), lastWidthRef = useRef(0), hasMovedRef = useRef(!1), resolveStartingXPos = useCallback(() => (null == resizeCol ? void 0 : resizeCol.cell) ? resizeCol.cell.getBoundingClientRect().left : 0, [ resizeCol ]), applyHandlePos = useCallback(show => {
+            var _a, _b;
+            const {cell: cell} = null != resizeCol ? resizeCol : {}, handle = null === (_a = elements.handle) || void 0 === _a ? void 0 : _a.current, parent = null === (_b = elements.parent) || void 0 === _b ? void 0 : _b.current;
+            !show && handle ? handle.style.left = "-500px" : resolveDragHandleXPos({
+                cell: cell,
+                handle: handle,
+                parent: parent
+            });
+        }, [ resizeCol, elements ]), applyWidth = useCallback(clientX => {
+            if (!(null == resizeCol ? void 0 : resizeCol.col)) return;
+            const newWidth = Math.max(40, clientX - colStartX.current);
+            resizeCol.col.style.width = `${newWidth}px`, lastWidthRef.current = newWidth, hasMovedRef.current = !0;
+        }, [ resizeCol ]), handleMouseMove = useCallback(e => {
+            e.stopPropagation(), e.preventDefault(), setResizing(!0);
+            const nextClientPos = (e => {
+                var _a, _b, _c, _d;
+                if (e.type.startsWith("touch")) {
+                    const touchEvent = e;
+                    return {
+                        x: null !== (_b = null === (_a = touchEvent.touches[0]) || void 0 === _a ? void 0 : _a.clientX) && void 0 !== _b ? _b : 0,
+                        y: null !== (_d = null === (_c = touchEvent.touches[0]) || void 0 === _c ? void 0 : _c.clientY) && void 0 !== _d ? _d : 0
+                    };
+                }
+                const mouseEvent = e;
+                return {
+                    x: mouseEvent.clientX,
+                    y: mouseEvent.clientY
+                };
+            })(e);
+            setClient(nextClientPos), applyWidth(nextClientPos.x), applyHandlePos(!0);
+        }, [ applyWidth, applyHandlePos ]), handleMouseUp = useCallback(e => {
+            var _a;
+            if (e.stopPropagation(), e.preventDefault(), resizeCol && hasMovedRef.current) {
+                const colId = resizeCol.id, width = lastWidthRef.current;
+                setColumnWidths(prev => Object.assign(Object.assign({}, prev), {
+                    [colId]: width
+                })), null === (_a = resizeCallback.current) || void 0 === _a || _a.call(resizeCallback, colId, width);
+            }
+            setResizing(!1), setClient(null), applyHandlePos(!1), setResizeCol(null);
+        }, [ resizeCol, applyHandlePos, setColumnWidths ]), cancelResize = useCallback(() => {
+            resizeCol && (resizeCol.col.style.width = originalWidth.current), setResizing(!1), 
+            setClient(null), applyHandlePos(!1), setResizeCol(null);
+        }, [ resizeCol, applyHandlePos ]), initListeners = useCallback(() => {
+            didSetListenersRef.current || (document.documentElement.addEventListener("mousemove", handleMouseMove, !1), 
+            document.documentElement.addEventListener("mouseup", handleMouseUp, !1), document.documentElement.addEventListener("touchmove", handleMouseMove, {
+                passive: !1
+            }), document.documentElement.addEventListener("touchend", handleMouseUp, !1), document.documentElement.addEventListener("touchcancel", cancelResize, !1), 
+            window.addEventListener("blur", cancelResize), previousStyles.current = {
+                userSelect: document.documentElement.style.userSelect,
+                webkitUserSelect: document.documentElement.style.webkitUserSelect,
+                cursor: document.documentElement.style.cursor
+            }, document.documentElement.style.userSelect = "none", document.documentElement.style.webkitUserSelect = "none", 
+            document.documentElement.style.cursor = "col-resize", colStartX.current = resolveStartingXPos(), 
+            didSetListenersRef.current = !0);
+        }, [ handleMouseMove, handleMouseUp, resolveStartingXPos, cancelResize ]), clearListeners = useCallback(() => {
+            didSetListenersRef.current && (document.documentElement.removeEventListener("mousemove", handleMouseMove), 
+            document.documentElement.removeEventListener("mouseup", handleMouseUp), document.documentElement.removeEventListener("touchmove", handleMouseMove, !1), 
+            document.documentElement.removeEventListener("touchend", handleMouseUp, !1), document.documentElement.removeEventListener("touchcancel", cancelResize, !1), 
+            window.removeEventListener("blur", cancelResize), document.documentElement.style.userSelect = previousStyles.current.userSelect, 
+            document.documentElement.style.webkitUserSelect = previousStyles.current.webkitUserSelect, 
+            document.documentElement.style.cursor = previousStyles.current.cursor, colStartX.current = 0, 
+            lastWidthRef.current = 0, hasMovedRef.current = !1, didSetListenersRef.current = !1);
+        }, [ handleMouseMove, handleMouseUp, cancelResize ]), dragResize = useCallback((id, e, colRefs) => {
+            if (e.stopPropagation(), e.preventDefault(), !colResize) return;
+            const cell = e.currentTarget.parentElement, col = colRefs.current[id];
+            cell && col && (originalWidth.current = col.style.width, setResizeCol({
+                id: id,
+                cell: cell,
+                col: col
+            }));
+        }, [ colResize ]), hoverResize = useCallback((show, e) => {
+            var _a, _b;
+            if (!colResize || resizeCol) return;
+            const cell = e.currentTarget.parentElement, handle = null === (_a = elements.handle) || void 0 === _a ? void 0 : _a.current, parent = null === (_b = elements.parent) || void 0 === _b ? void 0 : _b.current;
+            !show && handle ? handle.style.left = "-500px" : resolveDragHandleXPos({
+                cell: cell,
+                handle: handle,
+                parent: parent
+            });
+        }, [ resizeCol, colResize, elements ]);
+        return useEffect(() => {
+            if (!resizeCol || colResize) return resizeCol ? initListeners() : clearListeners(), 
+            () => clearListeners();
+            cancelResize();
+        }, [ resizeCol, initListeners, clearListeners, colResize, cancelResize ]), {
+            clientX: null == client ? void 0 : client.x,
+            clientY: null == client ? void 0 : client.y,
+            resizing: resizing,
+            dragResize: dragResize,
+            hoverResize: hoverResize
+        };
+    }(elements, colResize, setColumnWidths, finishResize), {dragStart: dragStart, dragOver: dragOver, dragDrop: dragDrop} = function(columnDefinitions, setColumnOrder, setDraggedColId, onColumnReorder, freezeColumn) {
+        const [isDragging, setIsDragging] = React.useState(!1), draggedColId = React.useRef(null), draggedColIndex = React.useRef(null), draggedOverColId = React.useRef(null), currentOrderRef = React.useRef(columnDefinitions.map(column => column.id)), initialColumnOrder = React.useRef(null), moveColumn = useCallback((draggedId, targetId) => {
+            if (draggedId !== targetId) {
+                const currentOrder = currentOrderRef.current, draggedIndex = currentOrder.indexOf(draggedId), targetIndex = currentOrder.indexOf(targetId);
+                if (-1 === draggedIndex || -1 === targetIndex) return;
+                if (freezeColumn && (0 === draggedIndex || 0 === targetIndex)) return;
+                let next, insertAt;
+                initialColumnOrder.current || (initialColumnOrder.current = currentOrder), targetIndex < draggedIndex ? (next = currentOrder.filter(id => id !== draggedId), 
+                insertAt = next.indexOf(targetId)) : (next = currentOrder.filter(id => id !== draggedId), 
+                insertAt = next.indexOf(targetId) + 1), next.splice(insertAt, 0, draggedId), currentOrderRef.current = next, 
+                setColumnOrder(next), null == onColumnReorder || onColumnReorder(next);
+            }
+        }, [ freezeColumn, onColumnReorder, setColumnOrder ]), dragStart = useCallback((col, e) => {
+            currentOrderRef.current = columnDefinitions.map(column => column.id), e.dataTransfer.setData("text/plain", col.id), 
+            draggedColId.current = col.id, setDraggedColId(col.id), setIsDragging(!0), initialColumnOrder.current = null;
+        }, [ setDraggedColId, columnDefinitions ]), dragOver = useCallback((col, colIndex, e) => {
+            draggedColId.current && (e.preventDefault(), e.stopPropagation(), draggedColIndex.current = colIndex, 
+            freezeColumn && 0 === colIndex || draggedOverColId.current !== col.id && draggedColId.current !== col.id && (draggedOverColId.current = col.id, 
+            draggedColId.current && moveColumn(draggedColId.current, col.id)));
+        }, [ freezeColumn, moveColumn ]), dragDrop = useCallback((e, global = !1) => {
+            e.preventDefault(), e.stopPropagation(), initialColumnOrder.current && (global || freezeColumn && 0 === draggedColIndex.current) && (setColumnOrder(initialColumnOrder.current), 
+            null == onColumnReorder || onColumnReorder(initialColumnOrder.current)), setDraggedColId(null), 
+            setIsDragging(!1), draggedOverColId.current = null, draggedColId.current = null, 
+            draggedColIndex.current = null, initialColumnOrder.current = null;
+        }, [ setColumnOrder, setDraggedColId, freezeColumn, onColumnReorder ]), handleGlobalOver = useCallback(e => {
+            e.preventDefault(), draggedOverColId.current = null, draggedColIndex.current = null;
+        }, []), handleGlobalDrop = useCallback(e => dragDrop(e, !0), [ dragDrop ]);
+        return useEffect(() => {
+            if (isDragging) return document.addEventListener("drop", handleGlobalDrop), document.addEventListener("dragover", handleGlobalOver), 
+            () => {
+                document.removeEventListener("drop", handleGlobalDrop), document.removeEventListener("dragover", handleGlobalOver);
+            };
+        }, [ isDragging, handleGlobalDrop, handleGlobalOver ]), {
+            dragStart: dragStart,
+            dragOver: dragOver,
+            dragDrop: dragDrop
+        };
+    }(orderedColumns, setColumnOrder, setDraggedColId, onColumnReorder, freezeColumn), rows = useMemo(() => {
+        const filtered = filter ? tableData.filter((row, index, array) => filter(row, index, array)) : tableData;
+        return void 0 === (null == sortKey ? void 0 : sortKey.key) ? filtered : [ ...filtered ].sort((a, b) => {
+            var _a;
+            if (void 0 === (null == sortKey ? void 0 : sortKey.key)) return 0;
+            const compare = null === (_a = orderedColumns.find(column => column.sort === sortKey.key)) || void 0 === _a ? void 0 : _a.compare;
+            if (compare) return compare(a, b) * ("desc" === sortKey.dir ? -1 : 1);
+            const {key: key, dir: dir} = sortKey;
+            /** Deterministic comparison for default field sorting; missing values stay last in either direction. */
+            return function(a, b, direction) {
+                if (Object.is(a, b)) return 0;
+                const missingA = null == a || "number" == typeof a && Number.isNaN(a), missingB = null == b || "number" == typeof b && Number.isNaN(b);
+                if (missingA && missingB) return 0;
+                if (missingA) return 1;
+                if (missingB) return -1;
+                const multiplier = "desc" === direction ? -1 : 1;
+                return "number" == typeof a && "number" == typeof b ? (a - b) * multiplier : a instanceof Date && b instanceof Date ? (a.getTime() - b.getTime()) * multiplier : String(a).localeCompare(String(b), void 0, {
+                    numeric: !0
+                }) * multiplier;
+            }(a[key], b[key], dir);
+        });
+    }, [ tableData, filter, sortKey, orderedColumns ]), requestedVirtualization = (explicit = virtualizeRows, 
+    rowCount = rows.length, threshold = virtualizeRowThreshold, null != explicit ? explicit : rowCount > threshold);
+    var explicit, rowCount, threshold;
+    const shouldVirtualize = requestedVirtualization && "auto" !== height, rowWindow = function(wrapperRef, rowCount, options) {
+        const {enabled: enabled, rowHeight: rowHeight, overscan: rawOverscan = DEFAULT_OVERSCAN, headerHeight: headerHeight = 0} = options, overscan = Number.isFinite(rawOverscan) ? Math.max(0, Math.floor(rawOverscan)) : DEFAULT_OVERSCAN, viewport = useObserveResize(enabled ? wrapperRef : void 0, {
+            ignore: "width"
+        }), [scrollTop, setScrollTop] = useState(0), throttledSetScrollTop = useMemo(() => rafThrottle(value => setScrollTop(value)), []);
+        useEffect(() => () => throttledSetScrollTop.cancel(), [ throttledSetScrollTop ]);
+        const handleScroll = useCallback(nextScrollTop => {
+            enabled && throttledSetScrollTop(nextScrollTop);
+        }, [ enabled, throttledSetScrollTop ]);
+        return useEffect(() => {
+            if (!enabled) return;
+            const maxScrollTop = Math.max(0, headerHeight + rowCount * rowHeight - (viewport.height || 0));
+            setScrollTop(prev => prev <= maxScrollTop ? prev : (wrapperRef.current && (wrapperRef.current.scrollTop = 0), 
+            0));
+        }, [ enabled, rowCount, rowHeight, viewport.height, wrapperRef, headerHeight ]), 
+        useMemo(() => {
+            if (!enabled || !Number.isFinite(rowHeight) || rowHeight <= 0) return {
+                enabled: !1,
+                startIndex: 0,
+                endIndex: rowCount,
+                topSpacerHeight: 0,
+                bottomSpacerHeight: 0,
+                handleScroll: handleScroll
+            };
+            const viewportHeight = viewport.height || 0, visibleCount = Math.ceil(viewportHeight / rowHeight), firstVisible = Math.floor(Math.max(0, scrollTop - headerHeight) / rowHeight), startIndex = Math.max(0, firstVisible - overscan), endIndex = Math.min(rowCount, firstVisible + visibleCount + overscan);
+            return {
+                enabled: !0,
+                startIndex: startIndex,
+                endIndex: endIndex,
+                topSpacerHeight: startIndex * rowHeight,
+                bottomSpacerHeight: Math.max(0, rowCount - endIndex) * rowHeight,
+                handleScroll: handleScroll
+            };
+        }, [ enabled, rowHeight, overscan, rowCount, viewport.height, scrollTop, handleScroll, headerHeight ]);
+    }(wrapperRef, rows.length, {
+        enabled: shouldVirtualize,
+        rowHeight: rowHeight,
+        headerHeight: headerSize.height,
+        overscan: overscanRows
+    });
+    useEffect(() => {
+        "production" !== process.env.NODE_ENV && (requestedVirtualization && "auto" === height && console.warn('[DataTable] `virtualizeRows` needs a bounded `height` (e.g. a fixed px or vh value) to create a scrollable viewport smaller than the full row count - with height="auto" the wrapper grows to fit every row and there\'s nothing to trim.'), 
+        shouldVirtualize && !getRowId && console.warn("[DataTable] `virtualizeRows` is on without `getRowId`. Rows fall back to index-based keys, which can misattach hover/focus state to the wrong row as the window scrolls - pass `getRowId` for stable identity."));
+    }, [ shouldVirtualize, requestedVirtualization, height, getRowId ]);
+    const handleScroll = useCallback(() => {
+        var _a, _b, _c, _d;
+        const hScrollAmount = null !== (_b = null === (_a = wrapperRef.current) || void 0 === _a ? void 0 : _a.scrollLeft) && void 0 !== _b ? _b : 0, vScrollAmount = null !== (_d = null === (_c = wrapperRef.current) || void 0 === _c ? void 0 : _c.scrollTop) && void 0 !== _d ? _d : 0;
+        setHScroll(hScrollAmount > 0), setVScroll(vScrollAmount > 0), rowWindow.handleScroll(vScrollAmount);
+    }, [ rowWindow.handleScroll ]), handleClick = useCallback((col, colId, row, rowId, dbl) => {
+        dbl && onDoubleClick ? onDoubleClick(col, colId, row, rowId) : !dbl && onClick && onClick(col, colId, row, rowId);
+    }, [ onDoubleClick, onClick ]), handleSort = useCallback(key => {
+        if (void 0 === key) return;
+        const next = (null == sortKey ? void 0 : sortKey.key) === key ? {
+            key: key,
+            dir: "asc" === (null == sortKey ? void 0 : sortKey.dir) ? "desc" : "asc"
+        } : {
+            key: key,
+            dir: "asc"
+        };
+        let didChange = !0;
+        (null == sortKey ? void 0 : sortKey.key) === (null == next ? void 0 : next.key) && (null == sortKey ? void 0 : sortKey.dir) === (null == next ? void 0 : next.dir) && (didChange = !1), 
+        didChange && (sortControlled || setInternalSort(next), null == onSortChange || onSortChange(next));
+    }, [ sortKey, onSortChange, sortControlled ]), resolveAriaSort = useCallback(column => {
+        const sortable = void 0 !== column.sort, isSortedColumn = sortable && (null == sortKey ? void 0 : sortKey.key) === column.sort;
+        if (sortable) return isSortedColumn ? "asc" === (null == sortKey ? void 0 : sortKey.dir) ? "ascending" : "descending" : void 0;
+    }, [ sortKey ]), renderCellResizeHandle = useCallback((last, col) => {
+        var _a, _b;
+        return last || !colResize ? null : jsx("div", {
+            className: styles.colResizeHandle,
+            role: "separator",
+            "aria-label": `Resize ${col.title}`,
+            "aria-orientation": "vertical",
+            "aria-valuenow": "number" == typeof (null !== (_a = columnWidths[col.id]) && void 0 !== _a ? _a : col.width) ? Number(null !== (_b = columnWidths[col.id]) && void 0 !== _b ? _b : col.width) : 40,
+            "aria-valuemin": 40,
+            tabIndex: 0,
+            onClick: event => event.stopPropagation(),
+            onKeyDown: event => {
+                if ("ArrowLeft" !== event.key && "ArrowRight" !== event.key) return;
+                event.preventDefault(), event.stopPropagation();
+                const element = colRefs.current[col.id];
+                if (!element) return;
+                const current = element.getBoundingClientRect().width, width = Math.max(40, current + ("ArrowRight" === event.key ? 10 : -10));
+                setColumnWidths(previous => Object.assign(Object.assign({}, previous), {
+                    [col.id]: width
+                })), null == onColumnResize || onColumnResize(col.id, width);
+            },
+            onTouchStart: e => dragResize(col.id, e, colRefs),
+            onMouseDown: e => dragResize(col.id, e, colRefs),
+            onMouseOver: e => hoverResize(!0, e),
+            onFocus: e => hoverResize(!0, e),
+            onMouseOut: e => hoverResize(!1, e),
+            onBlur: e => hoverResize(!1, e)
+        });
+    }, [ colResize, dragResize, hoverResize, columnWidths, setColumnWidths, onColumnResize ]), renderHeader = useCallback((col, sortKey) => {
+        if (col.renderHeader) {
+            return (0, col.renderHeader)({
+                column: col,
+                sortKey: sortKey
+            });
+        }
+        return jsx(DefaultHeaderRenderer, {
+            col: col,
+            sortKey: sortKey
+        });
+    }, []), renderBodyCell = useCallback((col, row, rowIndex) => {
+        const value = function(col, row) {
+            return col.accessor ? col.accessor(row) : void 0 !== col.key ? row[col.key] : void 0;
+        }(col, row);
+        if (col.renderCell) {
+            return (0, col.renderCell)({
+                row: row,
+                value: value,
+                rowIndex: rowIndex
+            });
+        }
+        return jsx(DefaultCellRenderer, {
+            value: value
+        });
+    }, []);
+    return jsxs("div", {
+        ref: wrapperRef,
+        className: `${styles.tableWrapper} ${styles.scroll}`,
+        style: cssVars,
+        onScroll: handleScroll,
+        children: [ jsxs("table", {
+            className: styles.table,
+            "aria-rowcount": rowWindow.enabled ? rows.length + 1 : void 0,
+            children: [ jsx("caption", {
+                children: caption
+            }), jsx("colgroup", {
+                children: orderedColumns.map(column => {
+                    var _a;
+                    return jsx("col", {
+                        ref: el => handleCreateRefs(el, column.id),
+                        style: {
+                            width: setStyle(null !== (_a = columnWidths[column.id]) && void 0 !== _a ? _a : column.width)
+                        }
+                    }, column.id);
+                })
+            }), jsx("thead", {
+                ref: headerRef,
+                children: jsx("tr", {
+                    children: orderedColumns.map((col, colIndex) => {
+                        var _a, _b;
+                        const padding = setStyle(col.padding, "var(--spacing-m)"), sortable = void 0 !== col.sort, cursor = sortable ? "pointer" : "default", last = colIndex === orderedColumns.length - 1, background = draggedColId === col.id ? backgroundColor : headerBackgroundColor;
+                        return jsxs("th", {
+                            "data-column-id": col.id,
+                            "aria-label": col.title,
+                            className: `${styles.baseCell} ${styles.headerCell} ${styles.m}`,
+                            onClick: event => {
+                                isInteractiveTarget(event.target, event.currentTarget) || handleSort(col.sort);
+                            },
+                            onKeyDown: event => {
+                                if (event.target === event.currentTarget) {
+                                    if (colReorder && event.altKey && ("ArrowLeft" === event.key || "ArrowRight" === event.key)) {
+                                        event.preventDefault();
+                                        const next = orderedColumns.map(column => column.id), target = colIndex + ("ArrowRight" === event.key ? 1 : -1);
+                                        if (target < 0 || target >= next.length || freezeColumn && (0 === colIndex || 0 === target)) return;
+                                        return [next[colIndex], next[target]] = [ next[target], next[colIndex] ], setColumnOrder(next), 
+                                        void (null == onColumnReorder || onColumnReorder(next));
+                                    }
+                                    accessibleKeyDown(event, () => handleSort(col.sort));
+                                }
+                            },
+                            style: {
+                                cursor: cursor,
+                                "--table-header-cell-background": background
+                            },
+                            tabIndex: sortable || colReorder ? 0 : void 0,
+                            role: sortable ? "columnheader" : void 0,
+                            "aria-sort": resolveAriaSort(col),
+                            draggable: colReorder && !(freezeColumn && 0 === colIndex),
+                            onDragStart: e => {
+                                colReorder && dragStart(col, e);
+                            },
+                            onDragOver: e => {
+                                colReorder && dragOver(col, colIndex, e);
+                            },
+                            onDrop: e => dragDrop(e),
+                            onDragEnd: e => dragDrop(e, !0),
+                            children: [ renderCellResizeHandle(last, col), jsx("div", {
+                                className: styles.headerCellWrapper,
+                                style: {
+                                    padding: padding,
+                                    justifyContent: resolveAlignValue(null !== (_b = null !== (_a = col.justifyHeader) && void 0 !== _a ? _a : col.justify) && void 0 !== _b ? _b : "start")
+                                },
+                                children: renderHeader(col, sortKey)
+                            }) ]
+                        }, col.id);
+                    })
+                })
+            }), jsxs("tbody", {
+                children: [ rowWindow.enabled && rowWindow.topSpacerHeight > 0 && jsx("tr", {
+                    "aria-hidden": "true",
+                    "data-spacer": "true",
+                    children: jsx("td", {
+                        role: "presentation",
+                        colSpan: Math.max(1, orderedColumns.length),
+                        style: {
+                            height: rowWindow.topSpacerHeight,
+                            padding: 0,
+                            border: 0,
+                            background: backgroundColor
+                        }
+                    })
+                }), (rowWindow.enabled ? rows.slice(rowWindow.startIndex, rowWindow.endIndex) : rows).map((row, localIndex) => {
+                    const rowIndex = rowWindow.enabled ? rowWindow.startIndex + localIndex : localIndex, isLastRow = rowIndex === rows.length - 1;
+                    return jsx("tr", {
+                        "aria-rowindex": rowWindow.enabled ? rowIndex + 2 : void 0,
+                        tabIndex: onRowClick ? 0 : void 0,
+                        onClick: event => {
+                            isInteractiveTarget(event.target, event.currentTarget) || null == onRowClick || onRowClick(row, rowIndex);
+                        },
+                        onKeyDown: event => {
+                            event.target === event.currentTarget && onRowClick && accessibleKeyDown(event, () => onRowClick(row, rowIndex));
+                        },
+                        children: orderedColumns.map((col, colIndex) => {
+                            var _a;
+                            const justifyContent = resolveAlignValue(null !== (_a = col.justify) && void 0 !== _a ? _a : "start"), alignItems = resolveAlignValue(col.align), padding = setStyle(col.padding, "var(--spacing-m)"), whiteSpace = col.nowrap ? "nowrap" : "", background = candyStripeBackgroundColor && rowIndex % 2 != 0 ? candyStripeBackgroundColor : backgroundColor, opacity = draggedColId === col.id ? .2 : 1, borderBottom = rowWindow.enabled && isLastRow && rowWindow.bottomSpacerHeight > 0 ? 0 : void 0;
+                            return jsx("td", {
+                                "data-column-id": `${colIndex}.${rowIndex}`,
+                                className: `${styles.baseCell} ${styles.m}${rowWindow.enabled ? ` ${styles.fixedCell}` : ""}`,
+                                onClick: event => {
+                                    isInteractiveTarget(event.target, event.currentTarget) || handleClick(col, colIndex, row, rowIndex, !1);
+                                },
+                                onDoubleClick: event => {
+                                    isInteractiveTarget(event.target, event.currentTarget) || handleClick(col, colIndex, row, rowIndex, !0);
+                                },
+                                tabIndex: onClick && !onRowClick ? 0 : void 0,
+                                onKeyDown: e => {
+                                    e.target === e.currentTarget && onClick && (e.stopPropagation(), accessibleKeyDown(e, () => handleClick(col, colIndex, row, rowIndex, !1)));
+                                },
+                                onMouseEnter: () => null == onMouseOver ? void 0 : onMouseOver(col, colIndex, row, rowIndex),
+                                onFocus: () => null == onMouseOver ? void 0 : onMouseOver(col, colIndex, row, rowIndex),
+                                onMouseLeave: () => null == onMouseOut ? void 0 : onMouseOut(col, colIndex, row, rowIndex),
+                                onBlur: () => null == onMouseOut ? void 0 : onMouseOut(col, colIndex, row, rowIndex),
+                                style: {
+                                    "--table-cell-background": freezeColumn && 0 === colIndex && null != freezeColumnBackgroundColor ? freezeColumnBackgroundColor : background,
+                                    opacity: opacity,
+                                    borderBottom: borderBottom
+                                },
+                                children: jsx("div", {
+                                    className: styles.cellViewport,
+                                    children: jsx("div", {
+                                        className: styles.baseCellWrapper,
+                                        style: {
+                                            justifyContent: justifyContent,
+                                            alignItems: alignItems,
+                                            padding: padding,
+                                            whiteSpace: whiteSpace
+                                        },
+                                        children: renderBodyCell(col, row, rowIndex)
+                                    })
+                                })
+                            }, col.id);
+                        })
+                    }, getRowId ? getRowId(row, rowIndex) : rowIndex);
+                }), rowWindow.enabled && rowWindow.bottomSpacerHeight > 0 && jsx("tr", {
+                    "aria-hidden": "true",
+                    "data-spacer": "true",
+                    children: jsx("td", {
+                        role: "presentation",
+                        colSpan: Math.max(1, orderedColumns.length),
+                        style: {
+                            height: rowWindow.bottomSpacerHeight,
+                            padding: 0,
+                            border: 0,
+                            background: backgroundColor
+                        }
+                    })
+                }) ]
+            }) ]
+        }), jsx("div", {
+            className: styles.resizeBar,
+            ref: resizeBarRef
+        }) ]
+    });
+}
+
+function DefaultHeaderRenderer(props) {
+    var _a, _b, _c;
+    const {col: col, sortKey: sortKey} = props, sortable = void 0 !== col.sort, sorted = void 0 !== (null == sortKey ? void 0 : sortKey.key) && sortKey.key === col.sort, sortIcon = "asc" === (null == sortKey ? void 0 : sortKey.dir) ? "arrows.arrow-top" : "arrows.arrow-bottom", justify = null !== (_b = null !== (_a = col.justifyHeader) && void 0 !== _a ? _a : col.justify) && void 0 !== _b ? _b : "start", indicator = sortable && (null === (_c = col.showSortIcon) || void 0 === _c || _c) ? jsx(Icon, {
+        name: sorted ? sortIcon : "system.blank",
+        pointerEvents: "none",
+        size: 16
+    }) : null;
+    return jsxs("div", {
+        className: styles.header,
+        style: {
+            justifyContent: resolveAlignValue(justify)
+        },
+        children: [ "end" === justify && indicator, jsx("div", {
+            className: styles.headerTitle,
+            style: {
+                flex: "0 1 auto"
+            },
+            children: col.title
+        }), "end" !== justify && indicator ]
+    });
+}
+
+function DefaultCellRenderer(props) {
+    var _a;
+    const {value: value} = props;
+    return null !== (_a = null == value ? void 0 : value.toString()) && void 0 !== _a ? _a : "";
+}
+
+function isInteractiveTarget(target, row) {
+    return target instanceof Element && Boolean(target.closest('button, a, input, select, textarea, summary, [contenteditable]:not([contenteditable="false"]), [role="button"], [role="checkbox"], [role="switch"], [role="link"], [role="slider"], [role="combobox"], [role="textbox"], [role="radio"]')) && target !== row;
+}
+
+function createDefaultViewState(columns) {
+    return {
+        columnOrder: columns.map(column => column.id)
+    };
+}
+
+function applyDataTableViewState(columns, state) {
+    var _a;
+    if (!state) return columns;
+    const byId = new Map(columns.map(column => [ column.id, column ])), hidden = new Set(null !== (_a = state.hiddenColumns) && void 0 !== _a ? _a : []), seen = new Set, ordered = [];
+    for (const id of state.columnOrder) {
+        if (seen.has(id) || hidden.has(id)) continue;
+        const column = byId.get(id);
+        column && (seen.add(id), ordered.push(column));
+    }
+    for (const column of columns) seen.has(column.id) || hidden.has(column.id) || (seen.add(column.id), 
+    ordered.push(column));
+    if (!state.columnWidths) return ordered;
+    const widths = state.columnWidths;
+    return ordered.map(column => column.id in widths ? Object.assign(Object.assign({}, column), {
+        width: widths[column.id]
+    }) : column);
+}
+
+function resolveSortFromViewState(columns, state) {
+    if (!(null == state ? void 0 : state.sort)) return;
+    const column = columns.find(c => {
+        var _a;
+        return c.id === (null === (_a = state.sort) || void 0 === _a ? void 0 : _a.columnId);
+    });
+    return void 0 !== (null == column ? void 0 : column.sort) ? {
+        key: column.sort,
+        dir: state.sort.dir
+    } : void 0;
+}
+
+function captureSortToViewState(columns, sort) {
+    if (void 0 === (null == sort ? void 0 : sort.key)) return;
+    const column = columns.find(c => c.sort === sort.key);
+    return column ? {
+        columnId: column.id,
+        dir: sort.dir
+    } : void 0;
+}
+
+export { DataTable as D, applyDataTableViewState as a, createColumnHelper as b, captureSortToViewState as c, createDefaultViewState as d, resolveSortFromViewState as r };