react-restyle-components 0.4.39 → 0.4.40

package/lib/src/core-components/src/components/Table/hooks.js

@@ -1,2 +1,536 @@
-"use strict";import{useState as g,useCallback as S,useMemo as D,useEffect as R}from"react";export function useTableDebounce(r,e){const[s,t]=g(r);return R(()=>{const a=setTimeout(()=>{t(r)},e);return()=>clearTimeout(a)},[r,e]),s}export function useSortState(r,e,s=!1){const[t,a]=g(r||{field:"",order:null}),i=e??t,o=S((n,l)=>{let c;i.field!==n||l===null?c="asc":l==="asc"?c="desc":c=null;const u={field:n,order:c};return a(u),u},[i.field]);return{sort:i,handleSort:o,setSort:a}}export function useFilterState(r,e){const[s,t]=g(r||{}),a=e??s,i=S((n,l)=>{t(c=>{if(l==null||l===""){const{[n]:u,...x}=c;return x}return{...c,[n]:l}})},[]),o=S(()=>{t({})},[]);return{filters:a,setFilter:i,clearFilters:o,setFilters:t}}export function usePaginationState(r=0,e=10,s=0){const[t,a]=g(r),[i,o]=g(e),n=Math.ceil(s/i)||1,l=S(w=>{const d=Math.max(0,Math.min(w,n-1));a(d)},[n]),c=S(()=>{l(t+1)},[t,l]),u=S(()=>{l(t-1)},[t,l]),x=S(()=>{l(0)},[l]),m=S(()=>{l(n-1)},[n,l]),f=S(w=>{o(w),a(0)},[]);return{page:t,pageSize:i,totalPages:n,goToPage:l,goToNextPage:c,goToPrevPage:u,goToFirstPage:x,goToLastPage:m,changePageSize:f,setPage:a,setPageSize:o}}export function useRowSelection(r,e="_id",s="none",t,a){const[i,o]=g(new Set),n=t?new Set(t):i,l=S(w=>n.has(w),[n]),c=S(w=>{const d=w[e];if(a?.(w)?.disabled)return;if(s==="single")return o(new Set([d])),{selectedKeys:[d],selectedRows:[w]};o(b=>{const E=new Set(b);return E.has(d)?E.delete(d):E.add(d),E});const h=n.has(d)?Array.from(n).filter(b=>b!==d):[...Array.from(n),d];return{selectedKeys:h,selectedRows:r.filter(b=>h.includes(b[e]))}},[r,e,s,n,a]),u=S(w=>{if(w){const d=r.filter(p=>!a?.(p)?.disabled).map(p=>p[e]);return o(new Set(d)),{selectedKeys:d,selectedRows:r.filter(p=>d.includes(p[e]))}}else return o(new Set),{selectedKeys:[],selectedRows:[]}},[r,e,a]),x=D(()=>r.length===0?!1:r.filter(d=>!a?.(d)?.disabled).every(d=>n.has(d[e])),[r,n,e,a]),m=D(()=>{if(r.length===0)return!1;const w=r.filter(p=>!a?.(p)?.disabled),d=w.filter(p=>n.has(p[e])).length;return d>0&&d<w.length},[r,n,e,a]),f=S(()=>{o(new Set)},[]);return{selectedKeys:n,isSelected:l,toggleRow:c,toggleAll:u,isAllSelected:x,isIndeterminate:m,clearSelection:f,setSelected:o}}export function useRowExpansion(r="_id",e,s,t=!1){const[a,i]=g(new Set(e||[])),o=s?new Set(s):a,n=S(c=>o.has(c),[o]),l=S(c=>{const u=c[r];return i(m=>{const f=t?new Set:new Set(m);return m.has(u)?f.delete(u):f.add(u),f}),{expandedKeys:o.has(u)?Array.from(o).filter(m=>m!==u):t?[u]:[...Array.from(o),u],expanded:!o.has(u),row:c}},[r,o,t]);return{expandedKeys:o,isExpanded:n,toggleExpand:l,setExpanded:i}}export function useColumnVisibility(r,e){const[s,t]=g(()=>{if(e&&typeof window<"u"){const n=localStorage.getItem(`table_columns_${e}`);if(n)try{return new Set(JSON.parse(n))}catch{}}return new Set(r.filter(n=>n.hidden).map(n=>n.dataField))}),a=D(()=>r.filter(n=>!s.has(n.dataField)),[r,s]),i=S(n=>{t(l=>{const c=new Set(l);return c.has(n)?c.delete(n):c.add(n),e&&typeof window<"u"&&localStorage.setItem(`table_columns_${e}`,JSON.stringify(Array.from(c))),c})},[e]),o=S(()=>{t(new Set),e&&typeof window<"u"&&localStorage.removeItem(`table_columns_${e}`)},[e]);return{hiddenColumns:s,visibleColumns:a,toggleColumn:i,showAllColumns:o,isColumnHidden:n=>s.has(n)}}export function sortData(r,e,s){if(!e.field||!e.order)return r;const t=s.find(i=>i.dataField===e.field);return t?[...r].sort((i,o)=>{const n=getNestedValue(i,e.field),l=getNestedValue(o,e.field);if(t.sortFunc)return t.sortFunc(n,l,e.order,i,o);if(n===l)return 0;if(n==null)return 1;if(l==null)return-1;const c=typeof n=="string"?n.localeCompare(l):n<l?-1:1;return e.order==="asc"?c:-c}):r}export function filterData(r,e,s,t){let a=r;for(const[i,o]of Object.entries(e))o==null||o===""||!s.find(l=>l.dataField===i)||(a=a.filter(l=>{const c=getNestedValue(l,i);return typeof o=="object"&&o!==null?"number"in o&&"comparator"in o?y(c,o.number,o.comparator):"startDate"in o?F(c,o):!0:c==null?!1:String(c).toLowerCase().includes(String(o).toLowerCase())}));if(t){const i=t.toLowerCase();a=a.filter(o=>s.some(n=>{const l=getNestedValue(o,n.dataField);return l==null?!1:String(l).toLowerCase().includes(i)}))}return a}export function paginateData(r,e,s){const t=e*s;return r.slice(t,t+s)}export function getNestedValue(r,e){return e.split(".").reduce((s,t)=>s?.[t],r)}function y(r,e,s){const t=parseFloat(r),a=parseFloat(e);if(isNaN(t)||isNaN(a))return!1;switch(s){case"=":return t===a;case"!=":return t!==a;case">":return t>a;case">=":return t>=a;case"<":return t<a;case"<=":return t<=a;default:return!0}}function F(r,e){if(!r)return!1;const s=new Date(r);if(isNaN(s.getTime()))return!1;if(e.diffFlag&&e.startDate&&e.endDate){const t=new Date(e.startDate),a=new Date(e.endDate);return s>=t&&s<=a}if(e.startDate){const t=new Date(e.startDate);switch(e.comparator){case"=":return s.toDateString()===t.toDateString();case">=":return s>=t;case"<":return s<t;default:return s>=t}}return!0}export function exportToCSV(r,e,s){const t=e.filter(u=>u.csvExport!==!1),a=t.map(u=>`"${u.text}"`).join(","),i=r.map((u,x)=>t.map(m=>{const f=m.csvFormatter?m.csvFormatter(getNestedValue(u,m.dataField),u,x):getNestedValue(u,m.dataField);return f==null?'""':typeof f=="string"?`"${f.replace(/"/g,'""')}"`:typeof f=="object"?`"${JSON.stringify(f).replace(/"/g,'""')}"`:`"${f}"`}).join(",")),o=[a,...i].join(`
-`),n=new Blob([o],{type:"text/csv;charset=utf-8;"}),l=URL.createObjectURL(n),c=document.createElement("a");c.href=l,c.download=`${s}_${new Date().toISOString().slice(0,10)}.csv`,c.click(),URL.revokeObjectURL(l)}async function j(){return window.ExcelJS?window.ExcelJS:new Promise((r,e)=>{const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js",s.async=!0,s.onload=()=>r(window.ExcelJS),s.onerror=()=>e(new Error("Failed to load ExcelJS from CDN")),document.head.appendChild(s)})}export async function exportToExcel(r,e,s,t){try{const a=await j(),i=new a.Workbook,o=i.addWorksheet(t?.sheetName||"Sheet1"),n=e.filter(f=>f.csvExport!==!1);o.columns=n.map(f=>({header:f.text,key:f.dataField,width:Math.max(f.text.length+5,15)}));const l=o.getRow(1);l.font={bold:t?.headerStyle?.font?.bold??!0,size:t?.headerStyle?.font?.size??12},t?.headerStyle?.fill?.color&&(l.fill={type:"pattern",pattern:"solid",fgColor:{argb:t.headerStyle.fill.color.replace("#","")}}),l.commit(),r.forEach((f,w)=>{const d={};n.forEach(p=>{const h=p.csvFormatter?p.csvFormatter(getNestedValue(f,p.dataField),f,w):getNestedValue(f,p.dataField);h==null?d[p.dataField]="":typeof h=="object"?d[p.dataField]=JSON.stringify(h):d[p.dataField]=h}),o.addRow(d)});const c=await i.xlsx.writeBuffer(),u=new Blob([c],{type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}),x=URL.createObjectURL(u),m=document.createElement("a");m.href=x,m.download=`${s}_${new Date().toISOString().slice(0,10)}.xlsx`,m.click(),URL.revokeObjectURL(x)}catch(a){console.error("Excel export failed:",a),console.warn("Falling back to CSV export"),exportToCSV(r,e,s)}}
+import { useState, useCallback, useMemo, useEffect } from 'react';
+/**
+ * Debounce function for table
+ */
+export function useTableDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        return () => clearTimeout(handler);
+    }, [value, delay]);
+    return debouncedValue;
+}
+/**
+ * Hook for managing sort state
+ */
+export function useSortState(defaultSort, controlledSort, multiSort = false) {
+    const [internalSort, setInternalSort] = useState(defaultSort || { field: '', order: null });
+    const sort = controlledSort ?? internalSort;
+    const handleSort = useCallback((field, currentOrder) => {
+        let nextOrder;
+        if (sort.field !== field) {
+            nextOrder = 'asc';
+        }
+        else if (currentOrder === null) {
+            nextOrder = 'asc';
+        }
+        else if (currentOrder === 'asc') {
+            nextOrder = 'desc';
+        }
+        else {
+            nextOrder = null;
+        }
+        const newSort = { field, order: nextOrder };
+        setInternalSort(newSort);
+        return newSort;
+    }, [sort.field]);
+    return { sort, handleSort, setSort: setInternalSort };
+}
+/**
+ * Hook for managing filter state
+ */
+export function useFilterState(defaultFilters, controlledFilters) {
+    const [internalFilters, setInternalFilters] = useState(defaultFilters || {});
+    const filters = controlledFilters ?? internalFilters;
+    const setFilter = useCallback((field, value) => {
+        setInternalFilters((prev) => {
+            if (value === undefined || value === null || value === '') {
+                const { [field]: _, ...rest } = prev;
+                return rest;
+            }
+            return { ...prev, [field]: value };
+        });
+    }, []);
+    const clearFilters = useCallback(() => {
+        setInternalFilters({});
+    }, []);
+    return { filters, setFilter, clearFilters, setFilters: setInternalFilters };
+}
+/**
+ * Hook for managing pagination state
+ */
+export function usePaginationState(defaultPage = 0, defaultPageSize = 10, totalSize = 0) {
+    const [page, setPage] = useState(defaultPage);
+    const [pageSize, setPageSize] = useState(defaultPageSize);
+    const totalPages = Math.ceil(totalSize / pageSize) || 1;
+    const goToPage = useCallback((newPage) => {
+        const validPage = Math.max(0, Math.min(newPage, totalPages - 1));
+        setPage(validPage);
+    }, [totalPages]);
+    const goToNextPage = useCallback(() => {
+        goToPage(page + 1);
+    }, [page, goToPage]);
+    const goToPrevPage = useCallback(() => {
+        goToPage(page - 1);
+    }, [page, goToPage]);
+    const goToFirstPage = useCallback(() => {
+        goToPage(0);
+    }, [goToPage]);
+    const goToLastPage = useCallback(() => {
+        goToPage(totalPages - 1);
+    }, [totalPages, goToPage]);
+    const changePageSize = useCallback((newSize) => {
+        setPageSize(newSize);
+        setPage(0); // Reset to first page
+    }, []);
+    return {
+        page,
+        pageSize,
+        totalPages,
+        goToPage,
+        goToNextPage,
+        goToPrevPage,
+        goToFirstPage,
+        goToLastPage,
+        changePageSize,
+        setPage,
+        setPageSize,
+    };
+}
+/**
+ * Hook for managing row selection
+ */
+export function useRowSelection(data, keyField = '_id', mode = 'none', controlledSelectedKeys, getCheckboxProps) {
+    const [internalSelected, setInternalSelected] = useState(new Set());
+    const selectedKeys = controlledSelectedKeys
+        ? new Set(controlledSelectedKeys)
+        : internalSelected;
+    const isSelected = useCallback((key) => selectedKeys.has(key), [selectedKeys]);
+    const toggleRow = useCallback((row) => {
+        const key = row[keyField];
+        const props = getCheckboxProps?.(row);
+        if (props?.disabled)
+            return;
+        if (mode === 'single') {
+            setInternalSelected(new Set([key]));
+            return { selectedKeys: [key], selectedRows: [row] };
+        }
+        setInternalSelected((prev) => {
+            const next = new Set(prev);
+            if (next.has(key)) {
+                next.delete(key);
+            }
+            else {
+                next.add(key);
+            }
+            return next;
+        });
+        const newSelected = selectedKeys.has(key)
+            ? Array.from(selectedKeys).filter((k) => k !== key)
+            : [...Array.from(selectedKeys), key];
+        return {
+            selectedKeys: newSelected,
+            selectedRows: data.filter((r) => newSelected.includes(r[keyField])),
+        };
+    }, [data, keyField, mode, selectedKeys, getCheckboxProps]);
+    const toggleAll = useCallback((selectAll) => {
+        if (selectAll) {
+            const selectableKeys = data
+                .filter((row) => {
+                const props = getCheckboxProps?.(row);
+                return !props?.disabled;
+            })
+                .map((row) => row[keyField]);
+            setInternalSelected(new Set(selectableKeys));
+            return {
+                selectedKeys: selectableKeys,
+                selectedRows: data.filter((r) => selectableKeys.includes(r[keyField])),
+            };
+        }
+        else {
+            setInternalSelected(new Set());
+            return { selectedKeys: [], selectedRows: [] };
+        }
+    }, [data, keyField, getCheckboxProps]);
+    const isAllSelected = useMemo(() => {
+        if (data.length === 0)
+            return false;
+        const selectableRows = data.filter((row) => {
+            const props = getCheckboxProps?.(row);
+            return !props?.disabled;
+        });
+        return selectableRows.every((row) => selectedKeys.has(row[keyField]));
+    }, [data, selectedKeys, keyField, getCheckboxProps]);
+    const isIndeterminate = useMemo(() => {
+        if (data.length === 0)
+            return false;
+        const selectableRows = data.filter((row) => {
+            const props = getCheckboxProps?.(row);
+            return !props?.disabled;
+        });
+        const selectedCount = selectableRows.filter((row) => selectedKeys.has(row[keyField])).length;
+        return selectedCount > 0 && selectedCount < selectableRows.length;
+    }, [data, selectedKeys, keyField, getCheckboxProps]);
+    const clearSelection = useCallback(() => {
+        setInternalSelected(new Set());
+    }, []);
+    return {
+        selectedKeys,
+        isSelected,
+        toggleRow,
+        toggleAll,
+        isAllSelected,
+        isIndeterminate,
+        clearSelection,
+        setSelected: setInternalSelected,
+    };
+}
+/**
+ * Hook for managing row expansion
+ */
+export function useRowExpansion(keyField = '_id', defaultExpandedKeys, controlledExpandedKeys, accordion = false) {
+    const [internalExpanded, setInternalExpanded] = useState(new Set(defaultExpandedKeys || []));
+    const expandedKeys = controlledExpandedKeys
+        ? new Set(controlledExpandedKeys)
+        : internalExpanded;
+    const isExpanded = useCallback((key) => expandedKeys.has(key), [expandedKeys]);
+    const toggleExpand = useCallback((row) => {
+        const key = row[keyField];
+        setInternalExpanded((prev) => {
+            const next = accordion ? new Set() : new Set(prev);
+            if (prev.has(key)) {
+                next.delete(key);
+            }
+            else {
+                next.add(key);
+            }
+            return next;
+        });
+        const newExpanded = expandedKeys.has(key)
+            ? Array.from(expandedKeys).filter((k) => k !== key)
+            : accordion
+                ? [key]
+                : [...Array.from(expandedKeys), key];
+        return { expandedKeys: newExpanded, expanded: !expandedKeys.has(key), row };
+    }, [keyField, expandedKeys, accordion]);
+    return {
+        expandedKeys,
+        isExpanded,
+        toggleExpand,
+        setExpanded: setInternalExpanded,
+    };
+}
+/**
+ * Hook for managing column visibility
+ */
+export function useColumnVisibility(columns, storageKey) {
+    const [hiddenColumns, setHiddenColumns] = useState(() => {
+        // Load from storage if available
+        if (storageKey && typeof window !== 'undefined') {
+            const stored = localStorage.getItem(`table_columns_${storageKey}`);
+            if (stored) {
+                try {
+                    return new Set(JSON.parse(stored));
+                }
+                catch (e) {
+                    // Ignore
+                }
+            }
+        }
+        return new Set(columns.filter((c) => c.hidden).map((c) => c.dataField));
+    });
+    const visibleColumns = useMemo(() => columns.filter((c) => !hiddenColumns.has(c.dataField)), [columns, hiddenColumns]);
+    const toggleColumn = useCallback((dataField) => {
+        setHiddenColumns((prev) => {
+            const next = new Set(prev);
+            if (next.has(dataField)) {
+                next.delete(dataField);
+            }
+            else {
+                next.add(dataField);
+            }
+            // Save to storage
+            if (storageKey && typeof window !== 'undefined') {
+                localStorage.setItem(`table_columns_${storageKey}`, JSON.stringify(Array.from(next)));
+            }
+            return next;
+        });
+    }, [storageKey]);
+    const showAllColumns = useCallback(() => {
+        setHiddenColumns(new Set());
+        if (storageKey && typeof window !== 'undefined') {
+            localStorage.removeItem(`table_columns_${storageKey}`);
+        }
+    }, [storageKey]);
+    return {
+        hiddenColumns,
+        visibleColumns,
+        toggleColumn,
+        showAllColumns,
+        isColumnHidden: (field) => hiddenColumns.has(field),
+    };
+}
+/**
+ * Sort data locally
+ */
+export function sortData(data, sort, columns) {
+    if (!sort.field || !sort.order)
+        return data;
+    const column = columns.find((c) => c.dataField === sort.field);
+    if (!column)
+        return data;
+    const sorted = [...data].sort((a, b) => {
+        const aVal = getNestedValue(a, sort.field);
+        const bVal = getNestedValue(b, sort.field);
+        if (column.sortFunc) {
+            return column.sortFunc(aVal, bVal, sort.order, a, b);
+        }
+        // Default sorting
+        if (aVal === bVal)
+            return 0;
+        if (aVal === null || aVal === undefined)
+            return 1;
+        if (bVal === null || bVal === undefined)
+            return -1;
+        const comparison = typeof aVal === 'string'
+            ? aVal.localeCompare(bVal)
+            : aVal < bVal
+                ? -1
+                : 1;
+        return sort.order === 'asc' ? comparison : -comparison;
+    });
+    return sorted;
+}
+/**
+ * Filter data locally
+ */
+export function filterData(data, filters, columns, searchValue) {
+    let filtered = data;
+    // Apply column filters
+    for (const [field, value] of Object.entries(filters)) {
+        if (value === undefined || value === null || value === '')
+            continue;
+        const column = columns.find((c) => c.dataField === field);
+        if (!column)
+            continue;
+        filtered = filtered.filter((row) => {
+            const cellValue = getNestedValue(row, field);
+            if (typeof value === 'object' && value !== null) {
+                // Complex filter (number range, date range, etc.)
+                if ('number' in value && 'comparator' in value) {
+                    return compareNumber(cellValue, value.number, value.comparator);
+                }
+                if ('startDate' in value) {
+                    return compareDateRange(cellValue, value);
+                }
+                return true;
+            }
+            // Simple text filter
+            if (cellValue === null || cellValue === undefined)
+                return false;
+            return String(cellValue)
+                .toLowerCase()
+                .includes(String(value).toLowerCase());
+        });
+    }
+    // Apply global search
+    if (searchValue) {
+        const searchLower = searchValue.toLowerCase();
+        filtered = filtered.filter((row) => {
+            return columns.some((column) => {
+                const value = getNestedValue(row, column.dataField);
+                if (value === null || value === undefined)
+                    return false;
+                return String(value).toLowerCase().includes(searchLower);
+            });
+        });
+    }
+    return filtered;
+}
+/**
+ * Paginate data locally
+ */
+export function paginateData(data, page, pageSize) {
+    const start = page * pageSize;
+    return data.slice(start, start + pageSize);
+}
+/**
+ * Get nested value from object
+ */
+export function getNestedValue(obj, path) {
+    return path.split('.').reduce((acc, part) => acc?.[part], obj);
+}
+/**
+ * Compare numbers with comparator
+ */
+function compareNumber(value, filterValue, comparator) {
+    const num = parseFloat(value);
+    const filterNum = parseFloat(filterValue);
+    if (isNaN(num) || isNaN(filterNum))
+        return false;
+    switch (comparator) {
+        case '=':
+            return num === filterNum;
+        case '!=':
+            return num !== filterNum;
+        case '>':
+            return num > filterNum;
+        case '>=':
+            return num >= filterNum;
+        case '<':
+            return num < filterNum;
+        case '<=':
+            return num <= filterNum;
+        default:
+            return true;
+    }
+}
+/**
+ * Compare date range
+ */
+function compareDateRange(value, filter) {
+    if (!value)
+        return false;
+    const date = new Date(value);
+    if (isNaN(date.getTime()))
+        return false;
+    if (filter.diffFlag && filter.startDate && filter.endDate) {
+        const start = new Date(filter.startDate);
+        const end = new Date(filter.endDate);
+        return date >= start && date <= end;
+    }
+    if (filter.startDate) {
+        const start = new Date(filter.startDate);
+        switch (filter.comparator) {
+            case '=':
+                return date.toDateString() === start.toDateString();
+            case '>=':
+                return date >= start;
+            case '<':
+                return date < start;
+            default:
+                return date >= start;
+        }
+    }
+    return true;
+}
+/**
+ * Export data to CSV
+ */
+export function exportToCSV(data, columns, fileName) {
+    const exportColumns = columns.filter((c) => c.csvExport !== false);
+    // Header row
+    const header = exportColumns.map((c) => `"${c.text}"`).join(',');
+    // Data rows
+    const rows = data.map((row, rowIndex) => {
+        return exportColumns
+            .map((col) => {
+            const value = col.csvFormatter
+                ? col.csvFormatter(getNestedValue(row, col.dataField), row, rowIndex)
+                : getNestedValue(row, col.dataField);
+            if (value === null || value === undefined)
+                return '""';
+            if (typeof value === 'string')
+                return `"${value.replace(/"/g, '""')}"`;
+            if (typeof value === 'object')
+                return `"${JSON.stringify(value).replace(/"/g, '""')}"`;
+            return `"${value}"`;
+        })
+            .join(',');
+    });
+    const csv = [header, ...rows].join('\n');
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${fileName}_${new Date().toISOString().slice(0, 10)}.csv`;
+    link.click();
+    URL.revokeObjectURL(url);
+}
+/**
+ * Dynamically load ExcelJS from CDN (no bundle impact)
+ */
+async function loadExcelJS() {
+    // Check if already loaded
+    if (window.ExcelJS) {
+        return window.ExcelJS;
+    }
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src =
+            'https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js';
+        script.async = true;
+        script.onload = () => resolve(window.ExcelJS);
+        script.onerror = () => reject(new Error('Failed to load ExcelJS from CDN'));
+        document.head.appendChild(script);
+    });
+}
+/**
+ * Export data to Excel (.xlsx) - loads ExcelJS dynamically from CDN
+ */
+export async function exportToExcel(data, columns, fileName, options) {
+    try {
+        const ExcelJS = await loadExcelJS();
+        const workbook = new ExcelJS.Workbook();
+        const worksheet = workbook.addWorksheet(options?.sheetName || 'Sheet1');
+        const exportColumns = columns.filter((c) => c.csvExport !== false);
+        // Set up columns with headers
+        worksheet.columns = exportColumns.map((col) => ({
+            header: col.text,
+            key: col.dataField,
+            width: Math.max(col.text.length + 5, 15),
+        }));
+        // Style header row
+        const headerRow = worksheet.getRow(1);
+        headerRow.font = {
+            bold: options?.headerStyle?.font?.bold ?? true,
+            size: options?.headerStyle?.font?.size ?? 12,
+        };
+        if (options?.headerStyle?.fill?.color) {
+            headerRow.fill = {
+                type: 'pattern',
+                pattern: 'solid',
+                fgColor: { argb: options.headerStyle.fill.color.replace('#', '') },
+            };
+        }
+        headerRow.commit();
+        // Add data rows
+        data.forEach((row, rowIndex) => {
+            const rowData = {};
+            exportColumns.forEach((col) => {
+                const value = col.csvFormatter
+                    ? col.csvFormatter(getNestedValue(row, col.dataField), row, rowIndex)
+                    : getNestedValue(row, col.dataField);
+                if (value === null || value === undefined) {
+                    rowData[col.dataField] = '';
+                }
+                else if (typeof value === 'object') {
+                    rowData[col.dataField] = JSON.stringify(value);
+                }
+                else {
+                    rowData[col.dataField] = value;
+                }
+            });
+            worksheet.addRow(rowData);
+        });
+        // Generate and download
+        const buffer = await workbook.xlsx.writeBuffer();
+        const blob = new Blob([buffer], {
+            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${fileName}_${new Date().toISOString().slice(0, 10)}.xlsx`;
+        link.click();
+        URL.revokeObjectURL(url);
+    }
+    catch (error) {
+        console.error('Excel export failed:', error);
+        // Fallback to CSV if Excel export fails
+        console.warn('Falling back to CSV export');
+        exportToCSV(data, columns, fileName);
+    }
+}

package/lib/src/core-components/src/components/Table/index.d.ts

@@ -3,3 +3,7 @@ export * from './types';
 export { useSortState, useFilterState, usePaginationState, useRowSelection, useRowExpansion, useColumnVisibility, useTableDebounce, sortData, filterData, paginateData, getNestedValue, exportToCSV, exportToExcel, } from './hooks';
 export { TextFilter, NumberFilter, DateFilter, SelectFilter, getFilterComponent, } from './filters';
 export type { TextFilterOptions, TextFilterInstance, NumberFilterOptions, NumberFilterInstance, SelectFilterOptions, SelectFilterInstance, DateFilterOptions, DateFilterInstance, } from './filters';
+export { useColumnResize, getColumnStyle, ResizeHandle, ResizeLine, ResizableHeaderCell, } from './columnResize';
+export type { ColumnResizeConfig, UseColumnResizeReturn } from './columnResize';
+export { useColumnReorder, DragGhost, DropIndicator, DraggableHeader, ColumnReorderGhost, ColumnDropIndicator, getReorderableHeaderProps, } from './columnReorder';
+export type { ColumnReorderConfig, UseColumnReorderReturn } from './columnReorder';

package/lib/src/core-components/src/components/Table/index.js

@@ -1 +1,6 @@
-"use strict";export{Table,default}from"./Table";export*from"./types";export{useSortState,useFilterState,usePaginationState,useRowSelection,useRowExpansion,useColumnVisibility,useTableDebounce,sortData,filterData,paginateData,getNestedValue,exportToCSV,exportToExcel}from"./hooks";export{TextFilter,NumberFilter,DateFilter,SelectFilter,getFilterComponent}from"./filters";
+export { Table, default } from './Table';
+export * from './types';
+export { useSortState, useFilterState, usePaginationState, useRowSelection, useRowExpansion, useColumnVisibility, useTableDebounce, sortData, filterData, paginateData, getNestedValue, exportToCSV, exportToExcel, } from './hooks';
+export { TextFilter, NumberFilter, DateFilter, SelectFilter, getFilterComponent, } from './filters';
+export { useColumnResize, getColumnStyle, ResizeHandle, ResizeLine, ResizableHeaderCell, } from './columnResize';
+export { useColumnReorder, DragGhost, DropIndicator, DraggableHeader, ColumnReorderGhost, ColumnDropIndicator, getReorderableHeaderProps, } from './columnReorder';

package/lib/src/core-components/src/components/Table/types.d.ts

@@ -658,4 +658,62 @@ export interface TableProps<T = any> {
         rowSelected?: string;
         rowExpanded?: string;
     };
+    /**
+     * Enable column resizing via drag handle
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * Column resize configuration
+     * Only used when resizable={true}
+     */
+    resizeConfig?: {
+        /** Minimum column width in pixels (default: 50) */
+        minWidth?: number;
+        /** Maximum column width in pixels (default: 800) */
+        maxWidth?: number;
+        /** Enable double-click to auto-fit width (default: true) */
+        autoFit?: boolean;
+        /** Callback when column is resized */
+        onResize?: (columnWidths: Record<string, number>) => void;
+        /** Callback when resize starts */
+        onResizeStart?: (dataField: string, width: number) => void;
+        /** Callback when resize ends */
+        onResizeEnd?: (dataField: string, width: number) => void;
+        /** Initial column widths */
+        defaultWidths?: Record<string, number>;
+        /** Handle color */
+        handleColor?: string;
+        /** Handle hover color */
+        handleHoverColor?: string;
+        /** Handle width in pixels (default: 4) */
+        handleWidth?: number;
+    };
+    /**
+     * Enable column reordering via long press and drag
+     * @default true
+     */
+    reorderable?: boolean;
+    /**
+     * Column reorder configuration
+     * Only used when reorderable={true}
+     */
+    reorderConfig?: {
+        /** Long press delay in ms before drag starts (default: 200) */
+        longPressDelay?: number;
+        /** Callback when columns are reordered */
+        onReorder?: (newColumns: TableColumn<T>[], fromIndex: number, toIndex: number) => void;
+        /** Callback when drag starts */
+        onDragStart?: (column: TableColumn<T>, index: number) => void;
+        /** Callback when drag ends */
+        onDragEnd?: (column: TableColumn<T>, index: number) => void;
+        /** Disable specific columns from being dragged */
+        disabledColumns?: string[];
+        /** Ghost element opacity (default: 0.8) */
+        ghostOpacity?: number;
+        /** Drop indicator color */
+        dropIndicatorColor?: string;
+        /** Enable animation (default: true) */
+        animated?: boolean;
+    };
 }

package/lib/src/core-components/src/components/Table/types.js

@@ -1 +1 @@
-"use strict";export{};
+export {};

package/lib/src/core-components/src/components/Tabs/tabs.component.js

@@ -1 +1,22 @@
-"use strict";import{jsx as i,jsxs as h,Fragment as x}from"react/jsx-runtime";import s,{useState as m}from"react";import t from"../../tc.module.css";import{cn as l}from"../../utils";export const Tab=({title:n,children:d,className:b,style:o})=>i("div",{className:l(t.flex,b),style:o,children:d},n),Tabs=({options:n,onSelect:d,children:b,classNames:o={},styles:c={}})=>{const[a,u]=m(0),[f,v]=m(n[0].title),p=s.Children.toArray(b).filter(e=>s.isValidElement(e)&&e.type===Tab);return i(x,{children:h("div",{className:l(t.flex,t["flex-col"],t["w-full"],o.container),style:c.container,children:[i("div",{className:l(t.flex,t["border-b"],o.tabsHeader),style:c.tabsHeader,children:n?.map((e,r)=>i("button",{type:"button",className:l(t["py-2"],t["px-4"],t["mr-1"],t["border-none"],t["rounded-t-md"],t["shadow-inner"],t["cursor-pointer"],a===r&&t["bg-blue-500"],a===r&&t["border-none"],a===r&&t["text-white"],o.tabButton,a===r&&o.activeTabButton),style:{...c.tabButton,...a===r?c.activeTabButton:{}},onClick:()=>{v(e?.title),d&&d(e,r),!e.inActive&&u(r)},disabled:e.inActive,children:e.title},r))}),i("div",{className:l(t["p-2"],t.border,t["border-solid"],t["border-slate-600"],t["rounded-b-md"],o.contentContainer),style:c.contentContainer,children:n[a]?.content?n[a]?.content:p[n?.findIndex(e=>e.title===f)]})]})})};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+export const Tab = ({ title, children, className, style }) => {
+    return (_jsx("div", { className: cn(s.flex, className), style: style, children: children }, title));
+};
+export const Tabs = ({ options, onSelect, children, classNames = {}, styles = {}, }) => {
+    const [activeTab, setActiveTab] = useState(0);
+    const [selected, setSelected] = useState(options[0].title);
+    const tabs = React.Children.toArray(children).filter((child) => React.isValidElement(child) && child.type === Tab);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s.flex, s['flex-col'], s['w-full'], classNames.container), style: styles.container, children: [_jsx("div", { className: cn(s.flex, s['border-b'], classNames.tabsHeader), style: styles.tabsHeader, children: options?.map((tab, index) => (_jsx("button", { type: "button", className: cn(s['py-2'], s['px-4'], s['mr-1'], s['border-none'], s['rounded-t-md'], s['shadow-inner'], s['cursor-pointer'], activeTab === index && s['bg-blue-500'], activeTab === index && s['border-none'], activeTab === index && s['text-white'], classNames.tabButton, activeTab === index && classNames.activeTabButton), style: {
+                            ...styles.tabButton,
+                            ...(activeTab === index ? styles.activeTabButton : {}),
+                        }, onClick: () => {
+                            setSelected(tab?.title);
+                            onSelect && onSelect(tab, index);
+                            !tab.inActive && setActiveTab(index);
+                        }, disabled: tab.inActive, children: tab.title }, index))) }), _jsx("div", { className: cn(s['p-2'], s.border, s['border-solid'], s['border-slate-600'], s['rounded-b-md'], classNames.contentContainer), style: styles.contentContainer, children: options[activeTab]?.content
+                        ? options[activeTab]?.content
+                        : tabs[options?.findIndex((item) => item.title === selected)] })] }) }));
+};