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

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

@@ -0,0 +1,181 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, Input, InputGroup, InputLeftElement, InputRightElement, Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon, VStack, Button, Flex, Icon, IconButton, HStack, } from "@chakra-ui/react";
+import { Search, X } from "lucide-react";
+import { motion } from "framer-motion";
+import { usePrefersReducedMotion } from "../../../Theme/chakra/motion.js";
+import { useOutsideClick } from "@chakra-ui/react";
+import CheckBox from "../../Checkbox/Checkbox.js";
+import ToolTip from "../../ToolTip/ToolTip.js";
+import { RadioButtonGroup } from "../../RadioButton/RadioButton.js";
+import { TextOperationControls } from "./TextOperationControls.js";
+import { SelectOperationControls } from "./SelectOperationControls.js";
+import CompactSelect from "./CompactSelect.js";
+import FilterDatePicker, { preloadFilterDatePicker } from "./FilterDatePicker.js";
+import { bandOn, cardRule } from "../../../Theme/tokens/builders/planeStep.js";
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+const getSectionItems = (selected, sectionId) => {
+    const value = selected[sectionId];
+    return Array.isArray(value) ? value : [];
+};
+const LABEL_MAX_LENGTH = 18;
+function formatHeaderLabel(label) {
+    const text = (label || "").trim();
+    if (text.length <= LABEL_MAX_LENGTH)
+        return text;
+    let parts = text.split(/\s+/);
+    if (parts.length < 2)
+        return text;
+    const removable = new Set(["filters", "fields", "modules", "status", "action"]);
+    if (removable.has(parts[parts.length - 1].toLowerCase())) {
+        parts = parts.slice(0, -1);
+    }
+    while (parts.join(" ").length > LABEL_MAX_LENGTH && parts.length > 2) {
+        parts = parts.slice(0, -1);
+    }
+    return `${parts.join(" ")}..`;
+}
+const SectionLabel = ({ label, flex = false }) => {
+    const needsTooltip = label.length > LABEL_MAX_LENGTH;
+    const content = (_jsx(Box, { as: "span", flex: flex ? "1" : undefined, textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: formatHeaderLabel(label) }));
+    if (!needsTooltip)
+        return content;
+    return (_jsx(ToolTip, { label: label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: content }));
+};
+const ActiveItemControls = ({ activeItem, sec, setTextOperator, setTextValue }) => {
+    var _a;
+    if (!activeItem)
+        return null;
+    if (activeItem.type === "date") {
+        return (_jsx(FilterDatePicker, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, activeItem.id, val) }));
+    }
+    if (activeItem.type === "text") {
+        return (_jsx(TextOperationControls, { operator: activeItem.condition || "contains", value: String((_a = activeItem.value) !== null && _a !== void 0 ? _a : ""), onOperatorChange: (op) => setTextOperator(sec.id, activeItem.id, op), onValueChange: (val) => setTextValue(sec.id, activeItem.id, val) }));
+    }
+    if (activeItem.type === "select" || activeItem.type === "user") {
+        const def = (sec.items || []).find((i) => i.id === activeItem.id);
+        const opts = (def === null || def === void 0 ? void 0 : def.selectOption) || (def === null || def === void 0 ? void 0 : def.option) || [];
+        return (_jsxs(_Fragment, { children: [_jsx(SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: (op) => setTextOperator(sec.id, activeItem.id, op), size: "xs", ml: "1.25rem", mt: 2 }), _jsx(Box, { mt: 2, ml: "1.25rem", children: _jsx(CompactSelect, { placeholder: def === null || def === void 0 ? void 0 : def.label, size: "xs", height: "22px", options: opts, value: activeItem.value, onSelect: (option) => setTextValue(sec.id, activeItem.id, option) }) })] }));
+    }
+    return null;
+};
+const SectionContent = ({ sec, selected, toggleItem, setTextOperator, setTextValue, setSelected, }) => {
+    if (sec.radio) {
+        const activeItem = getSectionItems(selected, sec.id)[0];
+        return (_jsxs(_Fragment, { children: [_jsx(RadioButtonGroup, { value: (activeItem === null || activeItem === void 0 ? void 0 : activeItem.id) || "", onChange: (val) => {
+                        const item = (sec.items || []).find((i) => i.id === val);
+                        setSelected((prev) => ({
+                            ...prev,
+                            [sec.id]: val
+                                ? [{ id: val, type: item === null || item === void 0 ? void 0 : item.type, condition: (item === null || item === void 0 ? void 0 : item.type) === "text" ? "contains" : "is", value: "" }]
+                                : [],
+                        }));
+                    }, options: (sec.items || []).map((it) => ({ label: it.label, id: it.id })), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: (item) => item.label.length > LABEL_MAX_LENGTH }), activeItem && (_jsx(ActiveItemControls, { activeItem: activeItem, sec: sec, setTextOperator: setTextOperator, setTextValue: setTextValue }))] }));
+    }
+    return (_jsx(VStack, { spacing: 2, align: "stretch", children: (sec.items || []).map((it) => {
+            var _a;
+            const sectionItems = getSectionItems(selected, sec.id);
+            const activeItem = sectionItems.find((i) => i.id === it.id);
+            const checked = !!activeItem;
+            return (_jsxs(React.Fragment, { children: [_jsx(CheckBox, { label: it.label, labelFontSize: "0.75rem", showLabelTooltip: it.label.length > LABEL_MAX_LENGTH, labelTooltip: it.label, labelClampLines: 1, isChecked: checked, onChange: (e) => toggleItem(sec.id, it.id, e.target.checked, it.type), size: "sm", iconSize: "0.5rem", spacing: "0.5rem", sx: {
+                            gap: "0.5rem",
+                            hiteSpace: "normal",
+                            wordBreak: "break-word",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            ".chakra-checkbox__control": { width: "12px", height: "12px", mt: "2px" },
+                            ".chakra-checkbox__label": { lineHeight: "1rem", whiteSpace: "normal", wordBreak: "break-word" },
+                        } }), checked && it.type === "date" && (_jsx(Box, { ml: "1.25rem", children: _jsx(FilterDatePicker, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, it.id, val) }) })), checked && it.type === "text" && (_jsx(TextOperationControls, { operator: activeItem.condition || "contains", value: String((_a = activeItem.value) !== null && _a !== void 0 ? _a : ""), onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), onValueChange: (val) => setTextValue(sec.id, it.id, val) })), checked && (it.type === "select" || it.type === "user") && (_jsxs(Box, { children: [_jsx(SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), size: "xs", ml: "1.25rem" }), _jsx(Box, { mt: 2, ml: "1.25rem", children: _jsx(CompactSelect, { placeholder: it.label, size: "xs", height: "30px", options: it.selectOption || it.option || [], value: activeItem.value, onSelect: (option) => setTextValue(sec.id, it.id, option) }) })] }))] }, it.id));
+        }) }));
+};
+// ─── Main Component ───────────────────────────────────────────────────────────
+const LeftFilterPane = ({ title = "Filter", height = 300, sections, selected: selectedProp, onApply, onClear, theme, isApplyLoading = false, filterMode = "sidebar", }) => {
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const [isSearching, setIsSearching] = useState(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search));
+    const [localSelected, setLocalSelected] = useState({});
+    const searchRef = useRef(null);
+    const hasDateItem = sections.some((sec) => { var _a; return (_a = sec.items) === null || _a === void 0 ? void 0 : _a.some((item) => item.type === "date"); });
+    useEffect(() => {
+        if (hasDateItem)
+            preloadFilterDatePicker();
+    }, [hasDateItem]);
+    useEffect(() => {
+        setLocalSelected(selectedProp || {});
+        if (selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)
+            setIsSearching(true);
+    }, [selectedProp]);
+    const search = typeof localSelected.search === "string" ? localSelected.search : "";
+    const setSelected = (updater) => {
+        setLocalSelected((prev) => (typeof updater === "function" ? updater(prev) : updater));
+    };
+    const setSearch = (val) => {
+        setSelected((prev) => ({ ...prev, search: val }));
+    };
+    const updateItem = (sectionId, itemId, updates) => {
+        setSelected((prev) => {
+            const items = getSectionItems(prev, sectionId);
+            const idx = items.findIndex((i) => i.id === itemId);
+            if (idx === -1)
+                return prev;
+            const updated = [...items];
+            updated[idx] = { ...updated[idx], ...updates };
+            return { ...prev, [sectionId]: updated };
+        });
+    };
+    const setTextOperator = (sectionId, itemId, operator) => updateItem(sectionId, itemId, { condition: operator });
+    const setTextValue = (sectionId, itemId, value) => updateItem(sectionId, itemId, { value });
+    const toggleItem = (sectionId, itemId, checked, type) => {
+        setSelected((prev) => {
+            const items = getSectionItems(prev, sectionId);
+            if (checked) {
+                if (items.some((i) => i.id === itemId))
+                    return prev;
+                const condition = type === "select" || type === "user" ? "is" : "contains";
+                return { ...prev, [sectionId]: [...items, { id: itemId, type, condition, value: "" }] };
+            }
+            return { ...prev, [sectionId]: items.filter((i) => i.id !== itemId) };
+        });
+    };
+    useOutsideClick({
+        ref: searchRef,
+        handler: () => {
+            if (isSearching && !search.trim())
+                setIsSearching(false);
+        },
+    });
+    const filteredSections = useMemo(() => {
+        if (!search.trim())
+            return sections;
+        const q = search.toLowerCase();
+        return sections
+            .map((sec) => ({ ...sec, items: (sec.items || []).filter((i) => i.label.toLowerCase().includes(q)) }))
+            .filter((sec) => (sec.items || []).length > 0);
+    }, [search, sections]);
+    const hasActiveFilters = useMemo(() => {
+        return Object.entries(localSelected).some(([key, value]) => {
+            if (key === "search")
+                return !!(value && typeof value === "string" && value.trim());
+            return Array.isArray(value) && value.length > 0;
+        });
+    }, [localSelected]);
+    const handleApply = () => onApply === null || onApply === void 0 ? void 0 : onApply(localSelected);
+    const handleClear = () => {
+        const cleared = { search: "" };
+        setLocalSelected(cleared);
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+        if (filterMode === "sidebar")
+            onApply === null || onApply === void 0 ? void 0 : onApply(cleared);
+    };
+    const sectionContentProps = { selected: localSelected, toggleItem, setTextOperator, setTextValue, setSelected };
+    const renderSections = () => {
+        if (filteredSections.length === 0) {
+            return (_jsx(Box, { p: 4, textAlign: "center", children: _jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, children: "No filters found" }) }));
+        }
+        if (filteredSections.length > 1) {
+            return (_jsx(Accordion, { allowMultiple: true, defaultIndex: filteredSections.map((s, i) => (s.initiallyExpanded ? i : -1)).filter((i) => i >= 0), children: filteredSections.map((sec) => (_jsxs(AccordionItem, { border: "none", children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 3, py: 2, _expanded: { bg: bandOn(theme.colors.background[100], theme.colors.background[50]) }, children: [_jsx(SectionLabel, { label: sec.label, flex: true, theme: theme }), _jsx(AccordionIcon, {})] }) }), _jsx(AccordionPanel, { px: 3, pt: 2, pb: 1, children: _jsx(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id))) }));
+        }
+        return filteredSections.map((sec) => (_jsxs(Box, { children: [_jsx(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: cardRule(theme.colors), children: _jsx(SectionLabel, { label: sec.label, theme: theme }) }), _jsx(Box, { px: 3, pt: 2, pb: 1, children: _jsx(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id)));
+    };
+    return (_jsxs(Box, { width: filterMode === "modal" ? "100%" : "180px", height: filterMode === "modal" ? "100%" : height, minHeight: "32rem", bg: theme.colors.background[50], borderRight: "1px solid", borderColor: cardRule(theme.colors), borderRadius: "xl", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0, children: [_jsx(Box, { p: 3, borderBottom: "1px solid", borderColor: cardRule(theme.colors), children: !isSearching ? (_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Text, { fontWeight: "semibold", fontSize: "sm", children: title }), _jsx(IconButton, { "aria-label": "Search filters", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 4 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: theme.colors.text[500], onClick: () => setIsSearching(true), mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 })] })) : (_jsx(motion.div, { ref: searchRef, initial: prefersReducedMotion ? false : { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 }, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 16, color: theme.colors.text[500] }) }), _jsx(Input, { placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true }), search.length > 0 && (_jsx(InputRightElement, { children: _jsx(IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: _jsx(X, { size: 14 }), onClick: () => { setSearch(""); setIsSearching(false); } }) }))] }) })) }), _jsx(Box, { flex: "1", overflowY: "auto", children: renderSections() }), hasActiveFilters && (_jsxs(HStack, { px: 2, py: 1, borderTop: "1px solid", borderColor: cardRule(theme.colors), spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: theme.colors.background[50], children: [_jsx(Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red", children: "Clear All" }), _jsx(Button, { flex: 1, colorScheme: "primary", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
+};
+export default LeftFilterPane;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VStack } from "@chakra-ui/react";
+import Select from "../../Select/Select.js";
+const OPERATOR_OPTIONS = [
+    { id: "is", label: "is" },
+    { id: "is not", label: "is not" },
+];
+export function SelectOperationControls({ operator, onOperatorChange, size = "xs", ml = "1.25rem", mt = 2, }) {
+    return (_jsx(VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: _jsx(Select, { native: false, isSearchable: false, "aria-label": "Operator", size: size, width: "90px", options: OPERATOR_OPTIONS, value: operator, onChange: (option) => option && onOperatorChange(String(option.id)) }) }));
+}

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useRef } from "react";
+import { Icon, IconButton, Input, InputGroup, InputLeftElement, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, useTheme, } from "@chakra-ui/react";
+import { columnLabelText } from "../columnLabel.js";
+import { EllipsisVertical, Search } from "lucide-react";
+const TableFilters = memo(({ header, setColumnsSearch, columnsSearch, onClose, isOpen, onOpen, }) => {
+    const theme = useTheme();
+    const searchRef = useRef(null);
+    const setColumnsSearchRef = useRef(setColumnsSearch);
+    setColumnsSearchRef.current = setColumnsSearch;
+    const debounceTimerRef = useRef(null);
+    const debouncedSearch = useCallback((value) => {
+        if (debounceTimerRef.current)
+            clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = setTimeout(() => {
+            setColumnsSearchRef.current(value);
+        }, 700);
+    }, []);
+    // Auto-focus input when popover opens
+    useEffect(() => {
+        if (isOpen && searchRef.current) {
+            // Small delay to ensure popover is fully rendered
+            setTimeout(() => {
+                var _a;
+                (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
+        }
+    }, [isOpen]);
+    return (_jsxs(Popover, { isOpen: isOpen, onClose: onClose, onOpen: onOpen, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": `Filter ${columnLabelText(header)}`, icon: _jsx(EllipsisVertical, { size: 17, color: theme.colors.primary[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } }) }), isOpen && (_jsx(Portal, { children: _jsx(PopoverContent, { width: "200px", bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 2, children: _jsxs(InputGroup, { flex: "1", size: "xs", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: Search, color: theme.colors.textMuted, boxSize: 4 }) }), _jsx(Input, { autoFocus: true, placeholder: `Search ${columnLabelText(header)}...`, size: "xs", ref: searchRef, defaultValue: columnsSearch, onChange: (e) => {
+                                        e.stopPropagation();
+                                        debouncedSearch(e.target.value);
+                                    }, onFocus: (e) => e.stopPropagation() })] }) }) }) }))] }));
+});
+export default TableFilters;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VStack } from "@chakra-ui/react";
+import { useMemo } from "react";
+import Select from "../../Select/Select.js";
+import TextInput from "../../Input/TextInput.js";
+export const TEXT_OPERATORS = [
+    "is",
+    "is not",
+    "contains",
+    "does not contain",
+    "starts with",
+    "ends with",
+    "is empty",
+    "is not empty",
+];
+export const requiresValue = (op) => !(op === "is empty" || op === "is not empty");
+export function TextOperationControls({ operator, value, onOperatorChange, onValueChange, size = "xs", ml = "1.25rem", mt = 2, }) {
+    const options = useMemo(() => TEXT_OPERATORS.map((op) => ({ id: op, label: op })), []);
+    return (_jsxs(VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: [_jsx(Select, { native: false, isSearchable: false, "aria-label": "Operator", size: size, width: "110px", options: options, value: operator, onChange: (option) => option && onOperatorChange(String(option.id)) }), requiresValue(operator) && (_jsx(TextInput, { size: size, placeholder: "Type here", value: value, onChange: (e) => onValueChange(e.target.value), width: "100%" }))] }));
+}

package/dist/esm/Components/Table/hooks/useRowExpansion.js

@@ -0,0 +1,23 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+/** Expanded-row ids, controlled when `controlled` is given and uncontrolled otherwise. */
+export const useRowExpansion = (controlled, onChange) => {
+    const [internal, setInternal] = useState([]);
+    const isControlled = controlled !== undefined;
+    const current = isControlled ? controlled : internal;
+    const currentRef = useRef(current);
+    currentRef.current = current;
+    const isControlledRef = useRef(isControlled);
+    isControlledRef.current = isControlled;
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const toggle = useCallback((id) => {
+        var _a;
+        const prev = currentRef.current;
+        const next = prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id];
+        if (!isControlledRef.current)
+            setInternal(next);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, next);
+    }, []);
+    const expandedIds = useMemo(() => new Set(current), [current]);
+    return { expandedIds, toggle };
+};

package/dist/esm/Components/Table/hooks/useTable.js

@@ -0,0 +1,260 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { searchAndSortData, SortMultiColumnData } from "../../../Utils/table.js";
+import { isPrimitiveLabel, toSavedColumns } from "../columnLabel.js";
+export const DEFAULT_PAGE_SIZE = 20;
+const defaultPageSize = DEFAULT_PAGE_SIZE;
+const mergeColumnWithPreference = (pref, originalCol) => {
+    var _a;
+    if (!pref || typeof pref !== "object") {
+        return { ...originalCol };
+    }
+    const next = { ...originalCol };
+    next.isHidden =
+        typeof pref.isHidden === "boolean" ? pref.isHidden : (_a = originalCol === null || originalCol === void 0 ? void 0 : originalCol.isHidden) !== null && _a !== void 0 ? _a : false;
+    if (isPrimitiveLabel(pref.label) && isPrimitiveLabel(originalCol === null || originalCol === void 0 ? void 0 : originalCol.label)) {
+        next.label = pref.label;
+    }
+    return next;
+};
+const sameColumn = (a, b) => {
+    const keys = Object.keys(a);
+    return keys.length === Object.keys(b).length && keys.every((key) => Object.is(a[key], b[key]));
+};
+const sameColumns = (a, b) => a === b || (a.length === b.length && a.every((col, i) => sameColumn(col, b[i])));
+const useTable = ({ data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, columnsSearch, }) => {
+    const headerRefs = useRef([]);
+    const slotObserver = useRef(null);
+    const [columnWidths, setColumnWidths] = useState([]);
+    const [slotWidth, setSlotWidth] = useState(0);
+    // Frozen columns butt against the select-all cell, so its width is watched, not assumed.
+    const slotRef = useCallback((node) => {
+        var _a;
+        (_a = slotObserver.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        slotObserver.current = null;
+        if (!node) {
+            setSlotWidth(0);
+            return;
+        }
+        const observer = new ResizeObserver(() => setSlotWidth(node.offsetWidth));
+        observer.observe(node);
+        slotObserver.current = observer;
+    }, []);
+    const [selection, setSelection] = useState(selections !== null && selections !== void 0 ? selections : []);
+    const [columnsSort, setColumnsSort] = useState([]);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize);
+    // Keep the internal page size in sync with the `noOfRowsPerPage` prop when the
+    // consumer changes it (e.g. a page-size control outside the table).
+    useEffect(() => {
+        if (noOfRowsPerPage !== undefined) {
+            setRowsPerPage(noOfRowsPerPage);
+        }
+    }, [noOfRowsPerPage]);
+    const tableData = data;
+    const [columnsList, setColumnsList] = useState(() => {
+        return columns.map((col, i) => {
+            var _a;
+            return ({
+                ...col,
+                isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false),
+            });
+        });
+    });
+    useEffect(() => {
+        var _a;
+        const columnPreference = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns) !== null && _a !== void 0 ? _a : [];
+        const next = Array.isArray(columnPreference) && columnPreference.length > 0
+            ? columnPreference.map((originalCol) => {
+                const prefCol = columns.find((c) => c.id === originalCol.id);
+                return prefCol
+                    ? mergeColumnWithPreference(originalCol, prefCol)
+                    : { ...originalCol };
+            })
+            : columns.map((col, i) => {
+                var _a;
+                return ({
+                    ...col,
+                    isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false),
+                });
+            });
+        // NOTE: an equal list keeps its identity so memoised rows skip re-rendering.
+        setColumnsList((prev) => (sameColumns(prev, next) ? prev : next));
+    }, [tablePreferences, columns, defaultVisibleColumns]);
+    const { isContent, isLink } = useMemo(() => {
+        let content = false;
+        let link = false;
+        for (const row of tableData) {
+            content = content || Boolean(row.content);
+            link = link || Boolean(row.onLink || row.onDelete || row.onEdit);
+            if (content && link)
+                break;
+        }
+        return { isContent: content, isLink: link };
+    }, [tableData]);
+    useEffect(() => {
+        const widths = headerRefs.current.map((ref) => (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0);
+        setColumnWidths(widths);
+    }, []);
+    const prevLengthRef = useRef(tableData.length);
+    useEffect(() => {
+        if (prevLengthRef.current === tableData.length)
+            return;
+        prevLengthRef.current = tableData.length;
+        if (!isServerPagination)
+            setCurrentPage(0);
+    }, [tableData.length, isServerPagination]);
+    const hasColumnSearch = useMemo(() => Object.values(columnsSearch).some((value) => value.trim() !== ""), [columnsSearch]);
+    // Column search runs before the page slice, or it would only ever see one page.
+    const searchedData = useMemo(() => (hasColumnSearch ? searchAndSortData(tableData, columnsSearch) : tableData), [hasColumnSearch, columnsSearch, tableData]);
+    const pages = useMemo(() => {
+        if (isServerPagination) {
+            return Math.ceil(totalRecords / (rowsPerPage || 1));
+        }
+        return isPagination ? Math.ceil(searchedData.length / rowsPerPage) : 0;
+    }, [
+        isPagination,
+        rowsPerPage,
+        searchedData.length,
+        totalRecords,
+        isServerPagination,
+    ]);
+    const startRow = useMemo(() => (!isPagination ? 0 : currentPage * rowsPerPage), [currentPage, isPagination, rowsPerPage]);
+    const endRow = useMemo(() => (!isPagination ? searchedData.length : startRow + rowsPerPage), [isPagination, rowsPerPage, startRow, searchedData.length]);
+    const filteredData = useMemo(() => {
+        if (isServerPagination) {
+            return searchedData;
+        }
+        const sortedData = SortMultiColumnData(searchedData, columnsSort);
+        return sortedData.slice(startRow, endRow);
+    }, [columnsSort, startRow, endRow, searchedData, isServerPagination]);
+    const searchKey = useMemo(() => JSON.stringify(columnsSearch), [columnsSearch]);
+    const prevSearchKey = useRef(searchKey);
+    useEffect(() => {
+        if (prevSearchKey.current === searchKey)
+            return;
+        prevSearchKey.current = searchKey;
+        setCurrentPage(0);
+    }, [searchKey]);
+    // A narrower result set can strand the user on a page that no longer exists.
+    useEffect(() => {
+        if (isServerPagination || !isPagination)
+            return;
+        const lastPage = Math.max(0, pages - 1);
+        setCurrentPage((page) => Math.min(page, lastPage));
+    }, [pages, isServerPagination, isPagination]);
+    const handlePageSizeChange = (size) => {
+        const value = Number(size);
+        setRowsPerPage(value !== 0 ? value : defaultPageSize);
+        if (onNoOfRowsPerPageChange) {
+            onNoOfRowsPerPageChange(value !== 0 ? value : defaultPageSize);
+        }
+        setCurrentPage(0);
+    };
+    const handleSort = useCallback((field, sort) => {
+        if (!sort)
+            return;
+        setColumnsSort((prev) => {
+            const newSortState = [...prev];
+            const existingIndex = newSortState.findIndex((s) => s.column === field);
+            if (existingIndex === -1) {
+                newSortState.push({
+                    column: field,
+                    direction: "asc",
+                });
+            }
+            else {
+                newSortState[existingIndex] = {
+                    ...newSortState[existingIndex],
+                    direction: sort,
+                };
+            }
+            return newSortState;
+        });
+    }, []);
+    useEffect(() => {
+        setSelection(selections !== null && selections !== void 0 ? selections : []);
+    }, [selections]);
+    const [isSelecting, setIsSelecting] = useState(false);
+    const selectionRef = useRef(selection);
+    selectionRef.current = selection;
+    const onSelectionRef = useRef(onSelection);
+    onSelectionRef.current = onSelection;
+    const tableDataRef = useRef(tableData);
+    tableDataRef.current = tableData;
+    // Rows that "select all" should toggle. Defaults to `tableData`, but in grouped
+    // "load more" mode the parent points this at the accumulated/rendered rows so
+    // select-all covers everything on screen (not just the latest page).
+    const selectAllRowsRef = useRef(null);
+    const handleCheckbox = useCallback((id) => {
+        var _a, _b;
+        const current = selectionRef.current;
+        if (id === 0) {
+            const rows = (_a = selectAllRowsRef.current) !== null && _a !== void 0 ? _a : tableDataRef.current;
+            const ids = rows.map((item) => item.id);
+            const idSet = new Set(ids);
+            const currentSet = new Set(current);
+            const allSelected = ids.length > 0 && ids.every((i) => currentSet.has(i));
+            setIsSelecting(true);
+            setTimeout(() => {
+                var _a;
+                // Toggle the rendered rows while preserving any selection outside them.
+                const selectedItems = allSelected
+                    ? current.filter((i) => !idSet.has(i))
+                    : Array.from(new Set([...current, ...ids]));
+                setSelection(selectedItems);
+                (_a = onSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(onSelectionRef, selectedItems);
+                setIsSelecting(false);
+            }, 0);
+        }
+        else {
+            let selectedItems;
+            if (current.includes(id)) {
+                selectedItems = current.filter((item) => item !== id);
+            }
+            else {
+                selectedItems = [...current, id];
+            }
+            setSelection(selectedItems);
+            (_b = onSelectionRef.current) === null || _b === void 0 ? void 0 : _b.call(onSelectionRef, selectedItems);
+        }
+    }, 
+    // Empty deps: rows/selection come from refs, so memoized rows survive a new `data`.
+    []);
+    const handleColumnPreferences = (columns, extra = {}) => {
+        setColumnsList(columns);
+        if (savePreferences) {
+            savePreferences({
+                ...tablePreferences,
+                columns: toSavedColumns(columns),
+                ...extra,
+            });
+        }
+    };
+    return {
+        tableData,
+        isContent,
+        isLink,
+        headerRefs,
+        columnWidths,
+        slotRef,
+        slotWidth,
+        handleSort,
+        handleCheckbox,
+        filteredData,
+        searchedData,
+        startRow,
+        endRow,
+        selection,
+        columnsSort,
+        handlePageSizeChange,
+        pages,
+        currentPage,
+        rowsPerPage,
+        setCurrentPage,
+        columnsList,
+        handleColumnPreferences,
+        isSelecting,
+        selectAllRowsRef,
+    };
+};
+export default useTable;

package/dist/esm/Components/Table/settings/ManageColumns.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, useMemo, useState, useEffect } from "react";
+import { Box, Flex, IconButton, Input, List, ListItem, Text, } from "@chakra-ui/react";
+import Checkbox from "../../Checkbox/Checkbox.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { raisedRule } from "../../../Theme/tokens/builders/surfaceRaised.js";
+import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
+import { columnLabelText } from "../columnLabel.js";
+import { ChevronDown, ChevronUp, GripVertical } from "lucide-react";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
+    const theme = useCustomTheme();
+    const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [draggedItemIndex, setDraggedItemIndex] = useState(null);
+    const [error, setError] = useState(null);
+    const visibleCount = useMemo(() => items.filter((i) => !i.isHidden).length, [items]);
+    useEffect(() => {
+        setItems(columns);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [columns]);
+    useImperativeHandle(childInputMethodsRef, () => ({ getManageColumnsData: () => items }), [items]);
+    const handleDragStart = (index) => setDraggedItemIndex(index);
+    const handleDragOver = (e, index) => {
+        e.preventDefault();
+        if (draggedItemIndex === null || draggedItemIndex === index)
+            return;
+        const newItems = [...items];
+        const draggedItem = newItems[draggedItemIndex];
+        newItems.splice(draggedItemIndex, 1);
+        newItems.splice(index, 0, draggedItem);
+        setDraggedItemIndex(index);
+        setItems(newItems);
+    };
+    const handleDragEnd = () => setDraggedItemIndex(null);
+    // Keyboard/single-pointer alternative to the drag reorder (WCAG 2.1.1, 2.5.7).
+    const moveItem = (itemId, offset) => {
+        const realIndex = items.findIndex((i) => i.id === itemId);
+        const target = realIndex + offset;
+        if (realIndex === -1 || target < 0 || target >= items.length)
+            return;
+        const newItems = [...items];
+        [newItems[realIndex], newItems[target]] = [newItems[target], newItems[realIndex]];
+        setItems(newItems);
+    };
+    // Fix: use the item's actual index in `items`, not the filtered list index
+    const toggleCheckbox = (itemId) => {
+        const realIndex = items.findIndex((i) => i.id === itemId);
+        if (realIndex === -1)
+            return;
+        const currentVisibleCount = items.filter((i) => !i.isHidden).length;
+        if (!items[realIndex].isHidden && currentVisibleCount === 2) {
+            setError("At least two columns must remain visible.");
+            return;
+        }
+        const newItems = [...items];
+        newItems[realIndex] = {
+            ...newItems[realIndex],
+            isHidden: !newItems[realIndex].isHidden,
+        };
+        setItems(newItems);
+        setError(null);
+    };
+    const filteredItems = items.filter((item) => columnLabelText(item).toLowerCase().includes(searchTerm.toLowerCase()));
+    const allChecked = items.every((item) => !item.isHidden);
+    const someChecked = items.some((item) => !item.isHidden) && !allChecked;
+    const handleSelectAll = () => {
+        if (allChecked) {
+            setItems(items.map((item, i) => ({ ...item, isHidden: i >= 2 })));
+            setError("At least two columns must remain visible.");
+        }
+        else {
+            setItems(items.map((item) => ({ ...item, isHidden: false })));
+            setError(null);
+        }
+    };
+    return (_jsxs(Box, { mt: 2, children: [error && (_jsx(Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "lg", border: "1px solid", borderColor: theme.colors.red[200], children: _jsx(Text, { color: accentTextOnCanvas(theme.colors.red, theme.colors.red[50]), fontSize: "xs", fontWeight: 500, children: error }) })), _jsx(Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), size: "sm", borderRadius: "lg" }), !searchTerm.length && (_jsx(Flex, { align: "center", mb: 1, bg: theme.colors.backgroundColor.subtle, px: 2, py: 1, borderRadius: "lg", children: _jsx(Checkbox, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }) })), _jsx(List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
+                    const isDraggingThisItem = draggedItemIndex === index;
+                    const isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
+                    const realIndex = items.findIndex((i) => i.id === item.id);
+                    return (_jsxs(ListItem, { draggable: true, onDragStart: () => handleDragStart(index), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, bg: isDraggingThisItem
+                            ? theme.colors.primary[100]
+                            : isDropZone
+                                ? rowBackgrounds.selected
+                                : "transparent", display: "flex", alignItems: "center", borderRadius: "lg", border: "1px solid", borderColor: isDraggingThisItem
+                            ? theme.colors.primary[400]
+                            : "transparent", cursor: "grab", fontSize: "xs-plus", px: 2, py: "3px", mb: "3px", transition: transitionFor(["background-color", "border-color"]), _hover: {
+                            bg: rowBackgrounds.active,
+                            borderColor: raisedRule(theme.colors),
+                        }, _active: { cursor: "grabbing" }, children: [_jsx(Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.textMuted }, children: _jsx(GripVertical, { size: 14 }) }), _jsx(Checkbox, { isChecked: !item.isHidden, label: columnLabelText(item), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
+                                    color: item.isHidden ? theme.colors.textMuted : theme.colors.text[700],
+                                } }), _jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, ml: 'auto', children: index + 1 }), _jsx(IconButton, { "aria-label": `Move ${columnLabelText(item)} up`, icon: _jsx(ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), _jsx(IconButton, { "aria-label": `Move ${columnLabelText(item)} down`, icon: _jsx(ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
+                })) : (_jsx(Text, { color: theme.colors.textMuted, textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), _jsxs(Text, { fontSize: "xs", color: theme.colors.textMuted, mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
+};
+export default ManageColumns;