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

package/dist/Components/Table/components/TableGroupRow.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableGroupRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+/** Monday-style colored, collapsible group header row. */
+const TableGroupRow = ({ label, value, count, color, collapsed, colSpan, ariaRowIndex, onToggle, onAddItem, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Tr, { "aria-rowindex": ariaRowIndex, children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: colSpan, p: 0, border: "none", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: `inset 4px 0 0 ${color.solid}`, borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${theme.colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": collapsed ? "Expand group" : "Collapse group", size: "xs", variant: "ghost", color: color.text, onClick: onToggle, icon: collapsed ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.8125rem", fontWeight: 700, color: color.text, isTruncated: true, maxW: "20rem", children: label }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, color: color.text, bg: theme.colors.background[50], borderRadius: "full", px: "0.5rem", py: "px", children: count }), onAddItem && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 1, ml: "auto", px: 2, py: 1, borderRadius: "lg", fontSize: "0.75rem", fontWeight: 500, color: theme.colors.text[500], _hover: { bg: theme.colors.background[50], color: color.text }, onClick: () => onAddItem(value), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14 }), " Add item"] }))] }) }) }));
+};
+exports.TableGroupRow = TableGroupRow;
+exports.default = exports.TableGroupRow;

package/dist/Components/Table/components/TableHeader.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TableHeaderPageProps } from "../TableProps";
+declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, hasDetail, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }: TableHeaderPageProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

@@ -0,0 +1,119 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = require("react");
+const table_1 = require("../../../Utils/table");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const TableFilters_1 = __importDefault(require("../filters/TableFilters"));
+const columnLabel_1 = require("../columnLabel");
+const lucide_react_1 = require("lucide-react");
+const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+const Skeletons_1 = __importDefault(require("../../Skeletons/Skeletons"));
+const TableVariantContext_1 = require("../variants/TableVariantContext");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+const motion_2 = require("../../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const rowDetail_1 = require("./rowDetail");
+const TableLoading_1 = require("./TableLoading");
+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] = (0, react_2.useState)(null);
+    const variant = (0, TableVariantContext_1.useTableVariant)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && (0, jsx_runtime_1.jsx)(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && ((0, jsx_runtime_1.jsx)(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), hasDetail && ((0, jsx_runtime_1.jsx)(rowDetail_1.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)) && ((0, jsx_runtime_1.jsx)(LoadingHeaderCells, { noBorders: noBorders })), columns.map((header, index) => {
+                if (header === null || header === void 0 ? void 0 : header.isHidden)
+                    return null;
+                return ((0, jsx_runtime_1.jsx)(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, slotWidth: slotWidth, detailWidth: hasDetail ? rowDetail_1.DETAIL_SLOT_PX : 0, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, (0, columnLabel_1.columnLabelText)(header)));
+            }), isLink && (0, jsx_runtime_1.jsx)(ViewSpacerCell, { noBorders: noBorders, isActionFreeze: isActionFreeze })] }));
+};
+exports.default = (0, react_2.memo)(TableHeader);
+const SelectAllCell = (0, react_2.memo)(({ slotRef, freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const variant = (0, TableVariantContext_1.useTableVariant)();
+    return ((0, jsx_runtime_1.jsx)(react_1.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" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, children: (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", children: isSelecting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: theme.colors.accentText })) : ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { "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 = (0, TableVariantContext_1.useTableVariant)();
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: TableLoading_1.LOADING_PLACEHOLDER_COLUMNS }, (_, i) => ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", "aria-hidden": "true", px: 3, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: i % 2 ? "50%" : "70%", borderRadius: "full" }) }, i))) }));
+};
+const ContentSpacerCell = (0, react_2.memo)(({ noBorders }) => {
+    const variant = (0, TableVariantContext_1.useTableVariant)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
+});
+const ViewSpacerCell = (0, react_2.memo)(({ noBorders, isActionFreeze, }) => {
+    const variant = (0, TableVariantContext_1.useTableVariant)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
+});
+const SortingIcon = (0, react_2.memo)(({ label, sortState, isVisible, handleSortClick, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const variant = (0, TableVariantContext_1.useTableVariant)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.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: (0, motion_1.transitionFor)(["color", "opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), borderRadius: "sm", opacity: isVisible ? 1 : 0, _focus: { opacity: 1 }, _focusVisible: { opacity: 1, ...(0, focusRing_styles_1.focusVisibleRing)(theme.colors) }, color: theme.colors.textMuted, _hover: {
+            opacity: 1,
+            color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, variant.header.bg),
+        }, children: [sortState === "none" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { size: 14 }), sortState === "asc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), sortState === "desc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 })] }));
+});
+const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, slotWidth, detailWidth = 0, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
+    var _a, _b;
+    const [isHovered, setIsHovered] = (0, react_2.useState)(false);
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const variant = (0, TableVariantContext_1.useTableVariant)();
+    const isFrozen = header.isFreeze;
+    const align = (_a = header.align) !== null && _a !== void 0 ? _a : "start";
+    const leftOffset = isFrozen
+        ? (0, table_1.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 = (0, react_2.useCallback)(() => handleSort(header.id, NEXT_SORT[sortState]), [handleSort, header.id, sortState]);
+    const handleSearch = (0, react_2.useCallback)((searchVal) => setColumnsSearch((prev) => ({ ...prev, [header.id]: searchVal })), [setColumnsSearch, header.id]);
+    const handleFilterClose = (0, react_2.useCallback)(() => {
+        setIsHovered(false);
+        setOpenFilterId(null);
+    }, [setOpenFilterId]);
+    const handleFilterOpen = (0, react_2.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 ((0, jsx_runtime_1.jsx)(react_1.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" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, borderRight: noBorders || !variant.header.showColumnRule
+            ? "none"
+            : `${borderWidths_1.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: (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.Box, { textAlign: align, textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", opacity: showActions ? 1 : 0, transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), _focusWithin: { opacity: 1 }, children: [header.isSort && ((0, jsx_runtime_1.jsx)(SortingIcon, { label: (0, columnLabel_1.columnLabelText)(header), sortState: sortState, isVisible: isHovered || isSortActive, handleSortClick: handleSortClick })), sortPriority > 0 && ((0, jsx_runtime_1.jsx)(react_1.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: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, variant.header.bg), children: sortPriority })), (0, jsx_runtime_1.jsx)(TableFilters_1.default, { header: header, setColumnsSearch: handleSearch, columnsSearch: columnsSearch[header.id] || "", onClose: handleFilterClose, isOpen: openFilterId === header.id, onOpen: handleFilterOpen })] }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle", onMouseDown: handleMouseDown })] }) }, index + 1));
+});

package/dist/Components/Table/components/TableLoading.d.ts

@@ -0,0 +1,11 @@
+declare const TableLoading: () => import("react/jsx-runtime").JSX.Element;
+export default TableLoading;
+export declare const LOADING_PLACEHOLDER_COLUMNS = 4;
+export type LoadingCell = "bar" | "checkbox" | "blank";
+export declare const TableBodyLoading: ({ noOfColumns, cells, borderColor, rowsCount, rowHeight, }: {
+    noOfColumns: number;
+    cells?: LoadingCell[];
+    borderColor: string;
+    rowsCount?: number;
+    rowHeight?: number;
+}) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const table_1 = require("../../../Utils/table");
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const TableSearch = ({ onSearch }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [showInput, setShowInput] = (0, react_1.useState)(false);
+    const [query, setQuery] = (0, react_1.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 = (0, table_1.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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Search", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Search", icon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.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 ? ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", maxW: "12.5rem", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "lg", borderColor: colors.boxborder[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { display: "flex", alignItems: "center", height: "100%", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear search", icon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
+};
+exports.default = TableSearch;

package/dist/Components/Table/components/rowDetail.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { CustomThemeProps } from "../../../Theme/themeProps";
+export declare const DETAIL_SLOT_PX = 40;
+export declare const detailDomIds: (prefix: string, rowId: string | number) => {
+    cellId: string;
+    detailId: string;
+};
+export declare const RowDetailHeaderCell: ({ left, bg, ruleColor, noBorders, }: {
+    left: number;
+    bg: string;
+    ruleColor: string;
+    noBorders?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+type ToggleProps = {
+    isOpen: boolean;
+    detailId: string;
+    color: string;
+    theme: CustomThemeProps;
+    onToggle: () => void;
+};
+export declare const RowDetailToggle: ({ isOpen, detailId, color, theme, onToggle }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+type DetailRowProps = {
+    id: string;
+    labelledBy: string;
+    colSpan: number;
+    bg: string;
+    borderColor: string;
+    noBorders?: boolean;
+    children: React.ReactNode;
+};
+export declare const RowDetailRow: React.ForwardRefExoticComponent<DetailRowProps & React.RefAttributes<HTMLTableRowElement>>;
+export {};

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowDetailRow = exports.RowDetailToggle = exports.RowDetailHeaderCell = exports.detailDomIds = exports.DETAIL_SLOT_PX = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+exports.DETAIL_SLOT_PX = 40;
+const detailDomIds = (prefix, rowId) => {
+    const safe = `${prefix}-${rowId}`.replace(/\s+/g, "_");
+    return { cellId: `${safe}-cell`, detailId: `${safe}-detail` };
+};
+exports.detailDomIds = detailDomIds;
+const RowDetailHeaderCell = ({ left, bg, ruleColor, noBorders, }) => ((0, jsx_runtime_1.jsx)(react_2.Th, { scope: "col", w: `${exports.DETAIL_SLOT_PX}px`, minW: `${exports.DETAIL_SLOT_PX}px`, maxW: `${exports.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" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${ruleColor}`, children: (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: "Row details" }) }));
+exports.RowDetailHeaderCell = RowDetailHeaderCell;
+const RowDetailToggle = ({ isOpen, detailId, color, theme, onToggle }) => ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": isOpen ? "Collapse row details" : "Expand row details", "aria-expanded": isOpen, "aria-controls": detailId, icon: isOpen ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 }), color: color, size: "sm", variant: "ghost", onClick: onToggle, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors) }));
+exports.RowDetailToggle = RowDetailToggle;
+exports.RowDetailRow = (0, react_1.forwardRef)(({ id, labelledBy, colSpan, bg, borderColor, noBorders, children }, ref) => ((0, jsx_runtime_1.jsx)(react_2.Tr, { ref: ref, id: id, "aria-labelledby": labelledBy, children: (0, jsx_runtime_1.jsx)(react_2.Td, { colSpan: colSpan, p: 0, bg: bg, borderBottom: noBorders ? "none" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${borderColor}`, children: (0, jsx_runtime_1.jsx)(react_2.Box, { px: 4, py: 3, children: children }) }) })));
+exports.RowDetailRow.displayName = "RowDetailRow";

package/dist/Components/Table/components/rowFocusRing.d.ts

@@ -0,0 +1,21 @@
+import type { FocusRingTokens } from "../../../Theme/tokens/types";
+export declare const rowFocusRingSx: (colors: {
+    focusRing: FocusRingTokens;
+}) => {
+    "&:focus-visible": {
+        outline: string;
+        outlineOffset: string;
+    };
+    "&:focus-visible > td": {
+        boxShadow: string;
+    };
+    "&:focus-visible > td:first-of-type": {
+        boxShadow: string;
+    };
+    "&:focus-visible > td:last-of-type": {
+        boxShadow: string;
+    };
+    "&:focus-visible > td:only-of-type": {
+        boxShadow: string;
+    };
+};

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rowFocusRingSx = void 0;
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const TOP = [0, 1];
+const BOTTOM = [0, -1];
+const LEFT = [1, 0];
+const RIGHT = [-1, 0];
+const RING_BAND = focusRing_styles_1.FOCUS_RING_WIDTH - focusRing_styles_1.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, focusRing_styles_1.FOCUS_RING_WIDTH, halo))].join(", ");
+// NOTE: each cell draws its slice, so sticky cells keep the ring above scrolled content.
+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) },
+});
+exports.rowFocusRingSx = rowFocusRingSx;

package/dist/Components/Table/components/rowMeasurer.d.ts

@@ -0,0 +1,8 @@
+type RowId = string | number;
+export type RowMeasurer = {
+    track: (id: RowId, elements: HTMLElement[]) => () => void;
+    dispose: () => void;
+};
+export declare const createRowMeasurer: (onHeights: (heights: Map<RowId, number>) => void) => RowMeasurer;
+export declare const useRowMeasurer: (onHeights: (heights: Map<RowId, number>) => void) => RowMeasurer;
+export {};

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRowMeasurer = exports.createRowMeasurer = void 0;
+const react_1 = require("react");
+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();
+        },
+    };
+};
+exports.createRowMeasurer = createRowMeasurer;
+const useRowMeasurer = (onHeights) => {
+    const measurer = (0, react_1.useMemo)(() => (0, exports.createRowMeasurer)(onHeights), [onHeights]);
+    (0, react_1.useEffect)(() => () => measurer.dispose(), [measurer]);
+    return measurer;
+};
+exports.useRowMeasurer = useRowMeasurer;

package/dist/Components/Table/components/rowMetrics.d.ts

@@ -0,0 +1,11 @@
+import type { TableDensity } from "../TableProps";
+export declare const DENSITY_ROWS: Record<TableDensity, {
+    height: number;
+    py: string;
+}>;
+export declare const TOOLBAR_HEIGHT = 45;
+export declare const GROUP_HEADER_HEIGHT = 42;
+export declare const EMPTY_STATE_HEIGHT = 200;
+export declare const MAX_TABLE_HEIGHT = 500;
+export declare const rowHeightFor: (density: TableDensity | undefined) => number;
+export declare const pxOf: (length: string) => number;

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

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

package/dist/Components/Table/components/tableRowHoverStyle.d.ts

@@ -0,0 +1,13 @@
+import type { PaletteProps } from "../../../Theme/tokens/types";
+/**
+ * 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 declare const getTableRowHoverStyle: (colors: PaletteProps, isDark: boolean) => Record<string, string>;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTableRowHoverStyle = void 0;
+/**
+ * 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.
+ */
+const getTableRowHoverStyle = (colors, isDark) => {
+    if (isDark) {
+        return {
+            backgroundColor: colors.table.hover[500],
+        };
+    }
+    return {
+        backgroundColor: colors.table.hover[300],
+    };
+};
+exports.getTableRowHoverStyle = getTableRowHoverStyle;

package/dist/Components/Table/filterTypes.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Column / sidebar filter payloads (dynamic keys, heterogeneous values).
+ */
+export type FilterValues = Record<string, unknown>;

package/dist/Components/Table/filterTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,89 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const columnLabel_1 = require("../columnLabel");
+const Divider_1 = __importDefault(require("../../Divider/Divider"));
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+const ActiveFilters = react_1.default.memo(({ columns, columnsSearch, setColumnsSearch, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const stripFill = (0, planeStep_1.bandOn)(theme.colors.background[100], theme.colors.background[50]);
+    const filterTone = (0, tone_1.resolveSoftTone)(theme.colors, theme.colors.primary, (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? stripFill : undefined);
+    const columnLabelMap = (0, react_1.useMemo)(() => {
+        const map = new Map();
+        for (const col of columns) {
+            map.set(col.id, (0, columnLabel_1.columnLabelText)(col));
+        }
+        return map;
+    }, [columns]);
+    const activeFilters = (0, react_1.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 = (0, react_1.useCallback)((columnId) => {
+        setColumnsSearch((prev) => {
+            const newSearch = { ...prev };
+            delete newSearch[columnId];
+            return newSearch;
+        });
+    }, [setColumnsSearch]);
+    const handleClearAll = (0, react_1.useCallback)(() => {
+        setColumnsSearch({});
+    }, [setColumnsSearch]);
+    if (activeFilters.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 2, py: 1, bg: stripFill, overflowX: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && (0, jsx_runtime_1.jsx)(Divider_1.default, {}), activeFilters.map((filter) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: filterTone.bg, borderRadius: "full", border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${filterTone.border}`, flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: filterTone.fg, whiteSpace: "nowrap", children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", className: "clear-all-text", "aria-label": "Clear all filters", fontSize: "sm", bg: "transparent", border: "none", p: 0, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, stripFill), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
+                        textDecoration: "underline",
+                    }, flexShrink: 0, whiteSpace: "nowrap", borderRadius: "sm", sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: "Clear All" }))] }) }));
+});
+exports.default = ActiveFilters;

package/dist/Components/Table/filters/CompactSelect.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+/** CompactSelect's option shape — also what SelectedFilterItem.value holds for select/user filters. */
+export type Options = {
+    id: string | number;
+    label: string;
+};
+type Props = {
+    options: Options[];
+    value?: Options;
+    placeholder?: string;
+    height?: string | number;
+    onSelect?: (option: Options) => void;
+    size?: "xs" | "sm";
+};
+declare const CompactSelect: React.FC<Props>;
+export default CompactSelect;