pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/esm/Components/Table/components/TableHeader.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Spinner, Th, Tr } from "@chakra-ui/react";
+import { memo, useCallback, useState } from "react";
+import { calculateLeftOffset } from "../../../Utils/table.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import TableFilters from "../filters/TableFilters.js";
+import { columnLabelText } from "../columnLabel.js";
+import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
+import CheckBox from "../../Checkbox/Checkbox.js";
+import Skeletons from "../../Skeletons/Skeletons.js";
+import { useTableVariant } from "../variants/TableVariantContext.js";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
+import { focusVisibleRing } from "../../../Theme/chakra/focusRing.styles.js";
+import { DETAIL_SLOT_PX, RowDetailHeaderCell } from "./rowDetail.js";
+import { LOADING_PLACEHOLDER_COLUMNS } from "./TableLoading.js";
+const LABEL_JUSTIFY = { start: "space-between", center: "center", end: "flex-start" };
+const NEXT_SORT = { none: "asc", asc: "desc", desc: "none" };
+const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, hasDetail = false, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
+    const [openFilterId, setOpenFilterId] = useState(null);
+    const variant = useTableVariant();
+    return (_jsxs(Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && _jsx(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && (_jsx(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), hasDetail && (_jsx(RowDetailHeaderCell, { left: isCheckbox ? slotWidth : 0, bg: variant.header.bg, ruleColor: variant.header.ruleColor, noBorders: noBorders })), isLoading && !columns.some((header) => !(header === null || header === void 0 ? void 0 : header.isHidden)) && (_jsx(LoadingHeaderCells, { noBorders: noBorders })), columns.map((header, index) => {
+                if (header === null || header === void 0 ? void 0 : header.isHidden)
+                    return null;
+                return (_jsx(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, slotWidth: slotWidth, detailWidth: hasDetail ? DETAIL_SLOT_PX : 0, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, columnLabelText(header)));
+            }), isLink && _jsx(ViewSpacerCell, { noBorders: noBorders, isActionFreeze: isActionFreeze })] }));
+};
+export default memo(TableHeader);
+const SelectAllCell = memo(({ slotRef, freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
+    const theme = useCustomTheme();
+    const variant = useTableVariant();
+    return (_jsx(Th, { ref: slotRef, scope: "col", w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: "sm", fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: variant.header.bg, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `${BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, children: _jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", children: isSelecting ? (_jsx(Spinner, { size: "sm", color: theme.colors.accentText })) : (_jsx(CheckBox, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isDisabled: isLoading, isIndeterminate: checked === "indeterminate" })) }) }));
+});
+const LoadingHeaderCells = ({ noBorders }) => {
+    const variant = useTableVariant();
+    return (_jsx(_Fragment, { children: Array.from({ length: LOADING_PLACEHOLDER_COLUMNS }, (_, i) => (_jsx(Th, { scope: "col", "aria-hidden": "true", px: 3, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `${BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, children: _jsx(Skeletons, { type: "skeleton", height: "0.75rem", width: i % 2 ? "50%" : "70%", borderRadius: "full" }) }, i))) }));
+};
+const ContentSpacerCell = memo(({ noBorders }) => {
+    const variant = useTableVariant();
+    return (_jsx(Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `${BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
+});
+const ViewSpacerCell = memo(({ noBorders, isActionFreeze, }) => {
+    const variant = useTableVariant();
+    return (_jsx(Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `${BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
+});
+const SortingIcon = memo(({ label, sortState, isVisible, handleSortClick, }) => {
+    const theme = useCustomTheme();
+    const variant = useTableVariant();
+    return (_jsxs(Box, { as: "button", type: "button", "aria-label": `Sort by ${label}`, display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, p: 0, border: "none", bg: "transparent", lineHeight: "1", onClick: handleSortClick, transition: transitionFor(["color", "opacity"], "base"), sx: reducedMotionSx(), borderRadius: "sm", opacity: isVisible ? 1 : 0, _focus: { opacity: 1 }, _focusVisible: { opacity: 1, ...focusVisibleRing(theme.colors) }, color: theme.colors.textMuted, _hover: {
+            opacity: 1,
+            color: accentTextOnCanvas(theme.colors.secondary, variant.header.bg),
+        }, children: [sortState === "none" && _jsx(ChevronsUpDown, { size: 14 }), sortState === "asc" && _jsx(ChevronUp, { size: 14 }), sortState === "desc" && _jsx(ChevronDown, { size: 14 })] }));
+});
+const ColumnHeader = memo(({ header, index, columnWidths, slotWidth, detailWidth = 0, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
+    var _a, _b;
+    const [isHovered, setIsHovered] = useState(false);
+    const theme = useCustomTheme();
+    const variant = useTableVariant();
+    const isFrozen = header.isFreeze;
+    const align = (_a = header.align) !== null && _a !== void 0 ? _a : "start";
+    const leftOffset = isFrozen
+        ? calculateLeftOffset(columnWidths, index) + (isCheckbox ? slotWidth : 0) + detailWidth
+        : undefined;
+    const isSorting = header.isSort
+        ? columnsSort.find((o) => o.column === header.id)
+        : undefined;
+    const sortState = (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none";
+    const activeSorts = columnsSort.filter((o) => o.direction !== "none");
+    const sortPriority = activeSorts.length > 1 && isSorting && isSorting.direction !== "none"
+        ? activeSorts.findIndex((o) => o.column === header.id) + 1
+        : 0;
+    const ariaSort = (isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc"
+        ? "ascending"
+        : (isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc"
+            ? "descending"
+            : undefined;
+    const handleSortClick = useCallback(() => handleSort(header.id, NEXT_SORT[sortState]), [handleSort, header.id, sortState]);
+    const handleSearch = useCallback((searchVal) => setColumnsSearch((prev) => ({ ...prev, [header.id]: searchVal })), [setColumnsSearch, header.id]);
+    const handleFilterClose = useCallback(() => {
+        setIsHovered(false);
+        setOpenFilterId(null);
+    }, [setOpenFilterId]);
+    const handleFilterOpen = useCallback(() => setOpenFilterId(header.id), [setOpenFilterId, header.id]);
+    const handleMouseDown = (e) => {
+        const parentBox = e.target
+            .parentElement;
+        const th = parentBox.parentElement;
+        const startX = e.pageX;
+        const startWidth = th.offsetWidth;
+        const onMouseMove = (moveEvent) => {
+            const newWidth = startWidth + (moveEvent.pageX - startX);
+            th.style.width = `${newWidth}px`;
+        };
+        const onMouseUp = () => {
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+    };
+    const isSortActive = !!(isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none";
+    // Studio keeps the kebab out of the resting header — nine of them read louder than
+    // the labels. A column that is filtering or sorting keeps its control on show.
+    const showActions = variant.header.actions === "always" ||
+        isHovered ||
+        isSortActive ||
+        openFilterId === header.id ||
+        !!columnsSearch[header.id];
+    return (_jsx(Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textAlign: align, textTransform: variant.header.textTransform, fontSize: variant.header.fontSize, fontWeight: variant.header.fontWeight, letterSpacing: variant.header.letterSpacing, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffset}px` : undefined, minWidth: 120, backgroundColor: variant.header.bg, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: align === "end" ? undefined : 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `${BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, borderRight: noBorders || !variant.header.showColumnRule
+            ? "none"
+            : `${BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: variant.header.height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(Box, { display: "flex", color: variant.header.ink, lineHeight: "1.25rem", justifyContent: LABEL_JUSTIFY[align], flexDirection: align === "end" ? "row-reverse" : "row", gap: align === "end" ? 1 : undefined, alignItems: "center", position: "relative", children: [_jsx(Box, { textAlign: align, textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), _jsxs(Box, { display: "inline-flex", alignItems: "center", opacity: showActions ? 1 : 0, transition: transitionFor(["opacity"], "base"), sx: reducedMotionSx(), _focusWithin: { opacity: 1 }, children: [header.isSort && (_jsx(SortingIcon, { label: columnLabelText(header), sortState: sortState, isVisible: isHovered || isSortActive, handleSortClick: handleSortClick })), sortPriority > 0 && (_jsx(Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: theme.colors.primary.opacity[16], color: accentTextOnCanvas(theme.colors.primary, variant.header.bg), children: sortPriority })), _jsx(TableFilters, { header: header, setColumnsSearch: handleSearch, columnsSearch: columnsSearch[header.id] || "", onClose: handleFilterClose, isOpen: openFilterId === header.id, onOpen: handleFilterOpen })] }), _jsx("div", { className: "resize-handle", onMouseDown: handleMouseDown })] }) }, index + 1));
+});

package/dist/esm/Components/Table/components/TableLoading.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, SkeletonText, Table, Tbody, Td, Th, Thead, Tr, } from "@chakra-ui/react";
+import Skeletons from "../../Skeletons/Skeletons.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+const CHECKBOX_PLACEHOLDER_STYLE = { display: "inline-block", verticalAlign: "middle" };
+const TableLoading = () => {
+    return (_jsx(Box, { overflowX: "auto", p: 4, children: _jsxs(Table, { variant: "simple", width: "full", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { p: 2, children: _jsx(Skeletons, { type: "skeleton", height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeletons, { type: "skeleton", height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeletons, { type: "skeleton", height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeletons, { type: "skeleton", height: "20px" }) })] }) }), _jsx(Tbody, { children: Array.from({ length: 5 }).map((_, rowIndex) => (_jsxs(Tr, { children: [_jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) })] }, rowIndex))) })] }) }));
+};
+export default TableLoading;
+export const LOADING_PLACEHOLDER_COLUMNS = 4;
+const BAR_WIDTHS = ["72%", "58%", "84%", "46%", "66%", "78%"];
+export const TableBodyLoading = ({ noOfColumns, cells, borderColor, rowsCount = 4, rowHeight = 45, }) => {
+    const layout = cells !== null && cells !== void 0 ? cells : Array.from({ length: noOfColumns }, () => "bar");
+    return (_jsx(_Fragment, { children: Array.from({ length: rowsCount }).map((_, row) => (_jsx(Tr, { "aria-hidden": "true", children: layout.map((kind, col) => (_jsxs(Td, { px: kind === "checkbox" ? 0 : 3, py: 0, height: `${rowHeight}px`, boxSizing: "border-box", border: "none", borderBottom: `${BORDER_WIDTHS.hairline} solid ${borderColor}`, textAlign: kind === "checkbox" ? "center" : undefined, children: [kind === "checkbox" && (_jsx(Skeletons, { type: "skeleton", height: "1rem", width: "1rem", borderRadius: "sm", style: CHECKBOX_PLACEHOLDER_STYLE })), kind === "bar" && (_jsx(Skeletons, { type: "skeleton", height: "0.75rem", width: BAR_WIDTHS[(row * 3 + col) % BAR_WIDTHS.length], borderRadius: "full" }))] }, col))) }, row))) }));
+};

package/dist/esm/Components/Table/components/TableSearch.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Icon, IconButton, Input, InputGroup, InputRightElement, } from "@chakra-ui/react";
+import { Search, X } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { useDebounce } from "../../../Utils/table.js";
+import ToolTip from "../../ToolTip/ToolTip.js";
+const TableSearch = ({ onSearch }) => {
+    const { colors } = useCustomTheme();
+    const [showInput, setShowInput] = useState(false);
+    const [query, setQuery] = useState("");
+    const handleSearchClick = () => {
+        setShowInput((prev) => !prev);
+        if (showInput) {
+            setQuery("");
+            if (query)
+                onSearch === null || onSearch === void 0 ? void 0 : onSearch(""); // clear search on close
+        }
+    };
+    const handleDebounce = useDebounce((value) => {
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
+    }, 700);
+    const handleInputChange = (e) => {
+        const value = e.target.value;
+        setQuery(value);
+        handleDebounce(value);
+    };
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? (_jsxs(InputGroup, { size: "sm", maxW: "12.5rem", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "lg", borderColor: colors.boxborder[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), _jsx(InputRightElement, { display: "flex", alignItems: "center", height: "100%", children: _jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(Icon, { as: X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
+};
+export default TableSearch;

package/dist/esm/Components/Table/components/rowDetail.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box, IconButton, Td, Th, Tr, VisuallyHidden } from "@chakra-ui/react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { focusVisibleRing } from "../../../Theme/chakra/focusRing.styles.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+export const DETAIL_SLOT_PX = 40;
+export const detailDomIds = (prefix, rowId) => {
+    const safe = `${prefix}-${rowId}`.replace(/\s+/g, "_");
+    return { cellId: `${safe}-cell`, detailId: `${safe}-detail` };
+};
+export const RowDetailHeaderCell = ({ left, bg, ruleColor, noBorders, }) => (_jsx(Th, { scope: "col", w: `${DETAIL_SLOT_PX}px`, minW: `${DETAIL_SLOT_PX}px`, maxW: `${DETAIL_SLOT_PX}px`, p: 0, boxSizing: "border-box", backgroundColor: bg, position: "sticky", left: `${left}px`, zIndex: 9, className: "columns sticky-columns", borderBottom: noBorders ? "none" : `${BORDER_WIDTHS.hairline} solid ${ruleColor}`, children: _jsx(VisuallyHidden, { children: "Row details" }) }));
+export const RowDetailToggle = ({ isOpen, detailId, color, theme, onToggle }) => (_jsx(IconButton, { "aria-label": isOpen ? "Collapse row details" : "Expand row details", "aria-expanded": isOpen, "aria-controls": detailId, icon: isOpen ? _jsx(ChevronDown, { size: 16 }) : _jsx(ChevronRight, { size: 16 }), color: color, size: "sm", variant: "ghost", onClick: onToggle, _focusVisible: focusVisibleRing(theme.colors) }));
+export const RowDetailRow = forwardRef(({ id, labelledBy, colSpan, bg, borderColor, noBorders, children }, ref) => (_jsx(Tr, { ref: ref, id: id, "aria-labelledby": labelledBy, children: _jsx(Td, { colSpan: colSpan, p: 0, bg: bg, borderBottom: noBorders ? "none" : `${BORDER_WIDTHS.hairline} solid ${borderColor}`, children: _jsx(Box, { px: 4, py: 3, children: children }) }) })));
+RowDetailRow.displayName = "RowDetailRow";

package/dist/esm/Components/Table/components/rowFocusRing.js

@@ -0,0 +1,16 @@
+import { FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH } from "../../../Theme/chakra/focusRing.styles.js";
+const TOP = [0, 1];
+const BOTTOM = [0, -1];
+const LEFT = [1, 0];
+const RIGHT = [-1, 0];
+const RING_BAND = FOCUS_RING_WIDTH - FOCUS_HALO_WIDTH;
+const band = ([x, y], width, color) => `inset ${x * width}px ${y * width}px 0 0 ${color}`;
+const edgeShadow = (edges, { ring, halo }) => [...edges.map((edge) => band(edge, RING_BAND, ring)), ...edges.map((edge) => band(edge, FOCUS_RING_WIDTH, halo))].join(", ");
+// NOTE: each cell draws its slice, so sticky cells keep the ring above scrolled content.
+export const rowFocusRingSx = (colors) => ({
+    "&:focus-visible": { outline: "2px solid transparent", outlineOffset: "-2px" },
+    "&:focus-visible > td": { boxShadow: edgeShadow([TOP, BOTTOM], colors.focusRing) },
+    "&:focus-visible > td:first-of-type": { boxShadow: edgeShadow([TOP, BOTTOM, LEFT], colors.focusRing) },
+    "&:focus-visible > td:last-of-type": { boxShadow: edgeShadow([TOP, BOTTOM, RIGHT], colors.focusRing) },
+    "&:focus-visible > td:only-of-type": { boxShadow: edgeShadow([TOP, BOTTOM, LEFT, RIGHT], colors.focusRing) },
+});

package/dist/esm/Components/Table/components/rowMeasurer.js

@@ -0,0 +1,66 @@
+import { useEffect, useMemo } from "react";
+export const createRowMeasurer = (onHeights) => {
+    const rowOf = new Map();
+    const heightOf = new Map();
+    const elementsOf = new Map();
+    let observer = null;
+    const totalOf = (id) => {
+        var _a, _b;
+        let total = 0;
+        for (const el of (_a = elementsOf.get(id)) !== null && _a !== void 0 ? _a : [])
+            total += (_b = heightOf.get(el)) !== null && _b !== void 0 ? _b : 0;
+        return total;
+    };
+    const onResize = (entries) => {
+        const touched = new Set();
+        for (const { target } of entries) {
+            const id = rowOf.get(target);
+            if (id === undefined)
+                continue;
+            heightOf.set(target, target.offsetHeight);
+            touched.add(id);
+        }
+        const heights = new Map();
+        touched.forEach((id) => {
+            const total = totalOf(id);
+            if (total > 0)
+                heights.set(id, total);
+        });
+        if (heights.size > 0)
+            onHeights(heights);
+    };
+    const untrack = (id, elements) => {
+        for (const el of elements) {
+            observer === null || observer === void 0 ? void 0 : observer.unobserve(el);
+            rowOf.delete(el);
+            heightOf.delete(el);
+        }
+        if (elementsOf.get(id) === elements)
+            elementsOf.delete(id);
+    };
+    return {
+        track(id, elements) {
+            elementsOf.set(id, elements);
+            if (typeof ResizeObserver === "undefined")
+                return () => untrack(id, elements);
+            observer !== null && observer !== void 0 ? observer : (observer = new ResizeObserver(onResize));
+            for (const el of elements) {
+                rowOf.set(el, id);
+                observer.observe(el);
+            }
+            return () => untrack(id, elements);
+        },
+        dispose() {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            observer = null;
+            rowOf.clear();
+            heightOf.clear();
+            elementsOf.clear();
+        },
+    };
+};
+export const useRowMeasurer = (onHeights) => {
+    const measurer = useMemo(() => createRowMeasurer(onHeights), [onHeights]);
+    useEffect(() => () => measurer.dispose(), [measurer]);
+    return measurer;
+};

package/dist/esm/Components/Table/components/rowMetrics.js

@@ -0,0 +1,11 @@
+export const DENSITY_ROWS = {
+    compact: { height: 32, py: "0.125rem" },
+    normal: { height: 40, py: "0.5rem" },
+    comfortable: { height: 52, py: "0.875rem" },
+};
+export const TOOLBAR_HEIGHT = 45;
+export const GROUP_HEADER_HEIGHT = 42;
+export const EMPTY_STATE_HEIGHT = 200;
+export const MAX_TABLE_HEIGHT = 500;
+export const rowHeightFor = (density) => DENSITY_ROWS[density !== null && density !== void 0 ? density : "normal"].height;
+export const pxOf = (length) => parseFloat(length);

package/dist/esm/Components/Table/components/tableRowHoverStyle.js

@@ -0,0 +1,21 @@
+/**
+ * Per-cell hover fill for a table row. `table.hover[300]` works in light mode — a pale tint on a
+ * white canvas — but in dark mode that rung sits within ~10 lightness points of the near-black
+ * canvas, computing to ~1.2:1: invisible, as QA reported.
+ *
+ * The first fix for that overshot to `background[900]`, the palette's BRIGHTEST rung (~10:1), and
+ * had to invert the row's ink to keep it readable — a near-white slab in a dark table. Dark-mode
+ * hover is a *lifted surface*, not an inversion: `table.hover[500]` is a visible step up from the
+ * canvas while staying dark enough that the row's resting `text[500]` ink is still legible, so no
+ * `color` flip is needed. Pinned by tableRowHoverStyle.test.ts.
+ */
+export const getTableRowHoverStyle = (colors, isDark) => {
+    if (isDark) {
+        return {
+            backgroundColor: colors.table.hover[500],
+        };
+    }
+    return {
+        backgroundColor: colors.table.hover[300],
+    };
+};

package/dist/esm/Components/Table/filterTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Table/filters/ActiveFilters.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from "react";
+import { Box, Flex, Text, IconButton } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas, isDarkCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../../Theme/tokens/builders/planeStep.js";
+import { resolveSoftTone } from "../../../Theme/tokens/builders/tone.js";
+import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
+import { focusVisibleStyles } from "../../../Theme/chakra/focusRing.styles.js";
+import { columnLabelText } from "../columnLabel.js";
+import VerticalDivider from "../../Divider/Divider.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, }) => {
+    const theme = useCustomTheme();
+    const stripFill = bandOn(theme.colors.background[100], theme.colors.background[50]);
+    const filterTone = resolveSoftTone(theme.colors, theme.colors.primary, isDarkCanvas(theme.colors.backgroundColor.main) ? stripFill : undefined);
+    const columnLabelMap = useMemo(() => {
+        const map = new Map();
+        for (const col of columns) {
+            map.set(col.id, columnLabelText(col));
+        }
+        return map;
+    }, [columns]);
+    const activeFilters = useMemo(() => Object.entries(columnsSearch)
+        .filter(([, value]) => value && value.trim() !== "")
+        .map(([columnId, value]) => ({
+        columnId,
+        label: columnLabelMap.get(columnId) || columnId,
+        value: value.trim(),
+    })), [columnsSearch, columnLabelMap]);
+    const handleRemoveFilter = useCallback((columnId) => {
+        setColumnsSearch((prev) => {
+            const newSearch = { ...prev };
+            delete newSearch[columnId];
+            return newSearch;
+        });
+    }, [setColumnsSearch]);
+    const handleClearAll = useCallback(() => {
+        setColumnsSearch({});
+    }, [setColumnsSearch]);
+    if (activeFilters.length === 0) {
+        return null;
+    }
+    return (_jsx(Box, { px: 2, py: 1, bg: stripFill, overflowX: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && _jsx(VerticalDivider, {}), activeFilters.map((filter) => (_jsxs(Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: filterTone.bg, borderRadius: "full", border: `${BORDER_WIDTHS.hairline} solid ${filterTone.border}`, flexShrink: 0, children: [_jsxs(Text, { fontSize: "sm", color: filterTone.fg, whiteSpace: "nowrap", children: [_jsxs(Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), _jsx(IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", onClick: () => handleRemoveFilter(filter.columnId), _hover: {
+                                bg: filterTone.hoverBg,
+                            }, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })] }, filter.columnId))), activeFilters.length > 1 && (_jsx(Box, { as: "button", type: "button", className: "clear-all-text", "aria-label": "Clear all filters", fontSize: "sm", bg: "transparent", border: "none", p: 0, color: accentTextOnCanvas(theme.colors.primary, stripFill), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
+                        textDecoration: "underline",
+                    }, flexShrink: 0, whiteSpace: "nowrap", borderRadius: "sm", sx: focusVisibleStyles(theme.colors), children: "Clear All" }))] }) }));
+});
+export default ActiveFilters;

package/dist/esm/Components/Table/filters/CompactSelect.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, Input, Popover, PopoverTrigger, PopoverContent, PopoverBody, VStack, Portal } from "@chakra-ui/react";
+import { ChevronDown, ChevronUp, Check } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../../Theme/tokens/builders/surfaceRaised.js";
+import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
+import { optionRowSpec, OPTION_ROW_RADIUS } from "../../../Theme/tokens/primitives/optionRowSizes.js";
+import { optionRowCursorSx, optionRowInk, optionRowWeight } from "../../Select/optionRowInk.js";
+import { useExclusiveOverlay } from "../../../Hooks/useExclusiveOverlay.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+const CompactSelect = ({ options, value, placeholder = "Select", height = "22px", onSelect, size = "xs" }) => {
+    const theme = useCustomTheme();
+    const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
+    const spec = optionRowSpec("xs");
+    const [isOpen, setIsOpen] = useState(false);
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, () => setIsOpen(false));
+    const openDropdown = () => {
+        requestExclusiveOpen();
+        setIsOpen(true);
+    };
+    const [query, setQuery] = useState("");
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return options;
+        return options.filter((o) => (o.label || "").toLowerCase().includes(q));
+    }, [query, options]);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const optionRefs = useRef([]);
+    useEffect(() => setActiveIndex(0), [query, isOpen]);
+    const focusOption = useCallback((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const handleListKeyDown = useCallback((e) => {
+        if (filtered.length === 0)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const step = e.key === "ArrowDown" ? 1 : -1;
+            focusOption((activeIndex + step + filtered.length) % filtered.length);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            focusOption(0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            focusOption(filtered.length - 1);
+        }
+    }, [activeIndex, filtered.length, focusOption]);
+    return (_jsxs(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [_jsx(PopoverTrigger, { children: _jsxs(Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? `${height}px` : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: `${BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], borderRadius: "lg", onClick: () => (isOpen ? setIsOpen(false) : openDropdown()), children: [_jsx(Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: theme.colors.text[500], noOfLines: 1, textAlign: "left", children: (value === null || value === void 0 ? void 0 : value.label) || placeholder }), isOpen ? _jsx(ChevronUp, { size: 12 }) : _jsx(ChevronDown, { size: 12 })] }) }), _jsx(Portal, { children: _jsx(PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 2, children: _jsxs(VStack, { spacing: 2, align: "stretch", children: [_jsx(Input, { size: size, placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === "ArrowDown" && filtered.length > 0) {
+                                            e.preventDefault();
+                                            focusOption(0);
+                                        }
+                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), _jsxs(Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: raisedRule(theme.colors), onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => {
+                                            const selected = (value === null || value === void 0 ? void 0 : value.id) === opt.id;
+                                            const isActive = i === activeIndex;
+                                            return (_jsxs(Box, { as: "button", type: "button", role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, ref: (el) => {
+                                                    optionRefs.current[i] = el;
+                                                }, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", display: "flex", alignItems: "center", gap: spec.gap, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: OPTION_ROW_RADIUS, cursor: "pointer", color: optionRowInk(theme.colors, selected), fontSize: spec.fontSize, fontWeight: optionRowWeight(selected), bg: "transparent", ...optionRowCursorSx(rowBackgrounds), onClick: () => {
+                                                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
+                                                    setIsOpen(false);
+                                                    setQuery("");
+                                                }, children: [_jsx(Text, { flex: 1, minW: 0, isTruncated: true, children: opt.label }), selected && (_jsx(Box, { as: Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, opt.id));
+                                        }), filtered.length === 0 && (_jsx(Box, { px: 2, py: 2, children: _jsx(Text, { fontSize: "0.75rem", color: theme.colors.textMuted, children: "No results" }) }))] })] }) }) }) })] }));
+};
+export default CompactSelect;

package/dist/esm/Components/Table/filters/FilterDatePicker.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, useState } from "react";
+import Skeletons from "../../Skeletons/Skeletons.js";
+import { lazyWithRetry } from "../../../Utils/lazyWithRetry.js";
+import { CONTROL_SIZES } from "../../../Theme/tokens/primitives/controlSizes.js";
+let loadedPicker = null;
+const loadDatePicker = () => import("../../DatePicker/DatePicker.js").then((mod) => {
+    loadedPicker = mod.default;
+    return mod;
+});
+const LazyDatePicker = lazyWithRetry(loadDatePicker);
+export const preloadFilterDatePicker = () => {
+    if (!loadedPicker)
+        loadDatePicker().catch(() => undefined);
+};
+/** The Table's date filter control; DatePicker and date-fns load on first use. */
+export default function FilterDatePicker(props) {
+    const [DatePicker] = useState(() => loadedPicker !== null && loadedPicker !== void 0 ? loadedPicker : LazyDatePicker);
+    return (_jsx(Suspense, { fallback: _jsx(Skeletons, { type: "skeleton", height: CONTROL_SIZES.sm.height, borderRadius: "md" }), children: _jsx(DatePicker, { ...props }) }));
+}