@feathery/react 2.14.0 → 2.15.1

package/dist/fthry_index.BAhh3Pz6.js

@@ -0,0 +1,667 @@
+import { _ as __assign, j as jsx, a as jsxs, F as Fragment, b as __read, f as featheryDoc, c as fieldValues, s as stringifyWithNull, d as __values, e as __spreadArray } from './fthry_index.y4j9reIZ.js';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'jszip';
+
+var colors = {
+    white: '#ffffff',
+    gray50: '#f9fafb',
+    gray100: '#f3f4f6',
+    gray200: '#e5e7eb',
+    gray300: '#d1d5db',
+    gray400: '#9ca3af',
+    gray600: '#4b5563',
+    gray700: '#374151',
+    gray900: '#111827',
+    blue50: '#eff6ff',
+    blue700: '#1d4ed8'
+};
+var searchIconStyle = {
+    width: '16px',
+    height: '16px',
+    color: '#6b7280'
+};
+var sortIconContainerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '2px',
+    '& svg': {
+        marginInlineStart: '4px',
+        width: '20px',
+        height: '20px'
+    }
+};
+var sortArrowStyle = {
+    width: '12px',
+    height: '12px',
+    color: colors.gray400,
+    opacity: 0.3,
+    '&[data-active="true"]': {
+        color: colors.blue700,
+        opacity: 1
+    }
+};
+var sortHeaderContentStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px'
+};
+var containerStyle = {
+    position: 'relative',
+    overflowX: 'auto',
+    overflowY: 'auto',
+    backgroundColor: colors.white,
+    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    borderRadius: '8px',
+    border: "1px solid ".concat(colors.gray200),
+    minWidth: '100%',
+    maxWidth: '100%',
+    height: '100%',
+    boxSizing: 'border-box'
+};
+var emptyStateContainerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '64px 24px',
+    textAlign: 'center'
+};
+var emptyStateTextStyle = {
+    color: colors.gray600,
+    fontSize: '16px',
+    fontWeight: '500',
+    margin: 0
+};
+var searchContainerStyle = {
+    padding: '16px',
+    borderBottom: "1px solid ".concat(colors.gray200)
+};
+var searchWrapperStyle = {
+    position: 'relative'
+};
+var searchIconWrapperStyle = {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    display: 'flex',
+    alignItems: 'center',
+    paddingLeft: '12px',
+    pointerEvents: 'none'
+};
+var searchInputStyle = {
+    display: 'block',
+    width: '100%',
+    maxWidth: '384px',
+    paddingLeft: '36px',
+    paddingRight: '12px',
+    paddingTop: '10px',
+    paddingBottom: '10px',
+    backgroundColor: colors.gray50,
+    border: "1px solid ".concat(colors.gray200),
+    color: colors.gray900,
+    fontSize: '14px',
+    borderRadius: '8px',
+    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)'
+};
+var tableStyle = {
+    width: '100%',
+    maxWidth: '100%',
+    fontSize: '14px',
+    textAlign: 'left',
+    color: colors.gray600,
+    textIndent: 0,
+    borderColor: 'inherit',
+    borderCollapse: 'collapse',
+    tableLayout: 'fixed'
+};
+var theadStyle = {
+    fontSize: '14px',
+    color: colors.gray600,
+    backgroundColor: colors.gray50,
+    borderBottom: "1px solid ".concat(colors.gray200)
+};
+var thStyle = {
+    padding: '12px 24px',
+    fontWeight: '500',
+    userSelect: 'none'
+};
+var rowStyle = {
+    backgroundColor: colors.white,
+    borderBottom: "1px solid ".concat(colors.gray200),
+    transition: 'background-color 0.2s'
+};
+var cellStyle = {
+    padding: '16px 24px',
+    wordBreak: 'break-word',
+    overflowWrap: 'anywhere'
+};
+var navStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    padding: '16px',
+    gap: '8px'
+};
+var navTextStyle = {
+    fontSize: '14px',
+    fontWeight: 'normal',
+    color: colors.gray600
+};
+var navTextBoldStyle = {
+    fontWeight: '600',
+    color: colors.gray900
+};
+var paginationListStyle = {
+    display: 'flex',
+    marginLeft: '-1px',
+    fontSize: '14px',
+    listStyle: 'none',
+    padding: 0,
+    margin: 0
+};
+var buttonStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: colors.gray600,
+    backgroundColor: colors.gray50,
+    boxSizing: 'border-box',
+    border: "1px solid ".concat(colors.gray200),
+    fontWeight: '500',
+    fontSize: '14px',
+    textDecoration: 'none',
+    cursor: 'pointer',
+    height: '36px',
+    wordBreak: 'keep-all',
+    overflowWrap: 'normal',
+    '&:hover': {
+        backgroundColor: colors.gray100,
+        color: colors.gray900
+    }
+};
+var actionButtonStyle = __assign(__assign({}, buttonStyle), { borderRadius: '4px', paddingInline: '8px', width: 'auto', height: '28px' });
+var menuIconStyle = {
+    width: '16px',
+    height: '16px',
+    color: colors.gray600
+};
+var actionMenuStyle = {
+    position: 'fixed',
+    backgroundColor: colors.white,
+    border: "1px solid ".concat(colors.gray300),
+    borderRadius: '4px',
+    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+    zIndex: 9999,
+    minWidth: '120px'
+};
+var actionMenuItemStyle = {
+    display: 'block',
+    width: '100%',
+    textAlign: 'left',
+    paddingLeft: '12px',
+    paddingRight: '12px',
+    paddingTop: '8px',
+    paddingBottom: '8px',
+    fontSize: '14px',
+    color: colors.gray700,
+    backgroundColor: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    whiteSpace: 'nowrap',
+    '&:hover': {
+        backgroundColor: colors.gray100
+    },
+    '&:first-of-type': {
+        borderTopLeftRadius: '4px',
+        borderTopRightRadius: '4px'
+    },
+    '&:last-of-type': {
+        borderBottomLeftRadius: '4px',
+        borderBottomRightRadius: '4px'
+    }
+};
+var actionIconButtonStyle = __assign(__assign({}, actionButtonStyle), { aspectRatio: 1, paddingLeft: 0, paddingRight: 0 });
+var actionContainerStyle = {
+    display: 'flex',
+    gap: '8px',
+    justifyContent: 'flex-end'
+};
+var pageButtonStyle = __assign(__assign({}, buttonStyle), { width: '36px', borderRightWidth: 0 });
+var pageButtonPrevStyle = __assign(__assign({}, pageButtonStyle), { borderTopLeftRadius: '8px', borderBottomLeftRadius: '8px', paddingLeft: '12px', paddingRight: '12px', width: 'auto' });
+var pageButtonNextStyle = __assign(__assign({}, pageButtonStyle), { borderTopRightRadius: '8px', borderBottomRightRadius: '8px', paddingLeft: '12px', paddingRight: '12px', width: 'auto', borderRightWidth: 1 });
+var pageButtonActiveStyle = __assign(__assign({}, pageButtonStyle), { color: colors.blue700, backgroundColor: colors.blue50, border: "1px solid ".concat(colors.gray200) });
+var pageButtonEllipsisStyle = __assign(__assign({}, pageButtonStyle), { cursor: 'default', '&:focus': {
+        outline: 'none'
+    } });
+var pageButtonDisabledStyle = {
+    opacity: 0.8,
+    cursor: 'default',
+    color: colors.gray400,
+    '&:hover': {
+        backgroundColor: colors.gray50,
+        color: colors.gray400
+    }
+};
+
+function SearchIcon() {
+    return (jsx("svg", __assign({ css: searchIconStyle, fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 }, { children: jsx("path", { strokeLinecap: 'round', d: 'M21 21l-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z' }) })));
+}
+function Search(_a) {
+    var searchQuery = _a.searchQuery, onSearchChange = _a.onSearchChange;
+    return (jsx("div", __assign({ css: searchContainerStyle }, { children: jsxs("div", __assign({ css: searchWrapperStyle }, { children: [jsx("div", __assign({ css: searchIconWrapperStyle }, { children: jsx(SearchIcon, {}) })), jsx("input", { type: 'text', css: searchInputStyle, placeholder: 'Search', value: searchQuery, onChange: function (e) { return onSearchChange(e.target.value); } })] })) })));
+}
+
+function SortIcon(_a) {
+    var isSorted = _a.isSorted, sortDirection = _a.sortDirection;
+    return (jsxs("svg", __assign({ xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true' }, { children: [jsx("path", { css: sortArrowStyle, stroke: 'currentColor', "data-active": (isSorted && sortDirection === 'asc') || undefined, strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'm8 9 4-4 4 4' }), jsx("path", { css: sortArrowStyle, stroke: 'currentColor', "data-active": (isSorted && sortDirection === 'desc') || undefined, strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'm8 15 4 4 4-4' })] })));
+}
+function SortHeader(_a) {
+    var columns = _a.columns, enableSort = _a.enableSort, sortColumn = _a.sortColumn, sortDirection = _a.sortDirection, onSort = _a.onSort, styles = _a.styles;
+    return (jsx(Fragment, { children: columns.map(function (column, index) {
+            var isSortable = enableSort;
+            var isSorted = sortColumn === column.name;
+            return (jsx("th", __assign({ scope: 'col', onClick: function () { return isSortable && onSort(column.name); }, css: __assign(__assign(__assign({}, thStyle), styles.getTarget('th')), (isSortable ? { cursor: 'pointer' } : {})) }, { children: jsxs("div", __assign({ css: sortHeaderContentStyle }, { children: [jsx("span", { children: column.name }), isSortable && (jsx("span", __assign({ css: sortIconContainerStyle }, { children: jsx(SortIcon, { isSorted: isSorted, sortDirection: sortDirection }) })))] })) }), index));
+        }) }));
+}
+
+// ex. Showing 1-10 of 30
+function PageInfo(_a) {
+    var currentPage = _a.currentPage, totalItems = _a.totalItems, rowsPerPage = _a.rowsPerPage;
+    return (jsxs("span", __assign({ css: navTextStyle }, { children: ["Showing", ' ', jsxs("span", __assign({ css: navTextBoldStyle }, { children: [currentPage * rowsPerPage + 1, "-", Math.min((currentPage + 1) * rowsPerPage, totalItems)] })), ' ', "of ", jsx("span", __assign({ css: navTextBoldStyle }, { children: totalItems }))] })));
+}
+function PreviousButton(_a) {
+    var disabled = _a.disabled, onClick = _a.onClick;
+    return (jsx("button", __assign({ type: 'button', onClick: onClick, disabled: disabled, css: __assign(__assign({}, pageButtonPrevStyle), (disabled ? pageButtonDisabledStyle : {})) }, { children: "Previous" })));
+}
+function NextButton(_a) {
+    var disabled = _a.disabled, onClick = _a.onClick;
+    return (jsx("button", __assign({ type: 'button', onClick: onClick, disabled: disabled, css: __assign(__assign({}, pageButtonNextStyle), (disabled ? pageButtonDisabledStyle : {})) }, { children: "Next" })));
+}
+function PageNumbers(_a) {
+    var currentPage = _a.currentPage, totalPages = _a.totalPages, onPageChange = _a.onPageChange;
+    return (jsx(Fragment, { children: Array.from({ length: totalPages }, function (_, i) {
+            // Show first page, last page, current page, and pages around current
+            var showPage = i === 0 || i === totalPages - 1 || Math.abs(i - currentPage) <= 1;
+            var showEllipsis = (i === 1 && currentPage > 2) ||
+                (i === totalPages - 2 && currentPage < totalPages - 3);
+            if (showEllipsis) {
+                return (jsx("li", { children: jsx("button", __assign({ type: 'button', disabled: true, css: pageButtonEllipsisStyle }, { children: "..." })) }, i));
+            }
+            if (!showPage)
+                return null;
+            var isActive = i === currentPage;
+            return (jsx("li", { children: jsx("button", __assign({ type: 'button', onClick: function () { return onPageChange(i); }, "aria-current": isActive ? 'page' : undefined, css: isActive
+                        ? pageButtonActiveStyle
+                        : pageButtonStyle }, { children: i + 1 })) }, i));
+        }) }));
+}
+function Pagination(_a) {
+    var currentPage = _a.currentPage, totalPages = _a.totalPages, totalItems = _a.totalItems, rowsPerPage = _a.rowsPerPage, onPageChange = _a.onPageChange;
+    if (totalPages <= 1)
+        return null;
+    return (jsxs("nav", __assign({ css: navStyle, "aria-label": 'Table navigation' }, { children: [jsx(PageInfo, { currentPage: currentPage, totalItems: totalItems, rowsPerPage: rowsPerPage }), jsxs("ul", __assign({ css: paginationListStyle }, { children: [jsx("li", { children: jsx(PreviousButton, { disabled: currentPage === 0, onClick: function () { return onPageChange(Math.max(0, currentPage - 1)); } }) }), jsx(PageNumbers, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange }), jsx("li", { children: jsx(NextButton, { disabled: currentPage >= totalPages - 1, onClick: function () {
+                                onPageChange(Math.min(totalPages - 1, currentPage + 1));
+                            } }) })] }))] })));
+}
+
+function MenuIcon() {
+    return (jsxs("svg", __assign({ css: menuIconStyle, fill: 'currentColor', viewBox: '0 0 24 24' }, { children: [jsx("circle", { cx: '12', cy: '5', r: '2' }), jsx("circle", { cx: '12', cy: '12', r: '2' }), jsx("circle", { cx: '12', cy: '19', r: '2' })] })));
+}
+function ActionButtons(_a) {
+    var actions = _a.actions, rowIndex = _a.rowIndex, columnData = _a.columnData, onClick = _a.onClick;
+    if (actions.length === 0)
+        return null;
+    var _b = __read(useState(false), 2), isMenuOpen = _b[0], setIsMenuOpen = _b[1];
+    var _c = __read(useState({ top: 0, left: 0 }), 2), menuPosition = _c[0], setMenuPosition = _c[1];
+    var containerRef = useRef(null);
+    var menuRef = useRef(null);
+    var menuButtonRef = useRef(null);
+    // If more than 1 action, show overflow menu; otherwise show inline buttons
+    var useOverflow = actions.length > 1;
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (menuRef.current &&
+                !menuRef.current.contains(event.target) &&
+                menuButtonRef.current &&
+                !menuButtonRef.current.contains(event.target)) {
+                setIsMenuOpen(false);
+            }
+        };
+        if (isMenuOpen) {
+            featheryDoc().addEventListener('mousedown', handleClickOutside);
+        }
+        return function () {
+            featheryDoc().removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isMenuOpen]);
+    var handleActionClick = function (action) {
+        setIsMenuOpen(false);
+        var rowData = {};
+        columnData.forEach(function (col) {
+            var fValue = fieldValues[col.field_key];
+            var cValue = Array.isArray(fValue) ? fValue[rowIndex] : fValue;
+            rowData[col.name] = cValue;
+        });
+        onClick({
+            action: action.label,
+            rowIndex: rowIndex,
+            rowData: rowData
+        });
+    };
+    var handleMenuToggle = function () {
+        if (!isMenuOpen && menuButtonRef.current) {
+            var rect = menuButtonRef.current.getBoundingClientRect();
+            setMenuPosition({
+                top: rect.bottom + 4,
+                left: rect.right
+            });
+        }
+        setIsMenuOpen(!isMenuOpen);
+    };
+    return (jsx("div", __assign({ ref: containerRef, css: actionContainerStyle }, { children: useOverflow ? (jsxs(Fragment, { children: [jsx("button", __assign({ ref: menuButtonRef, type: 'button', onClick: function (e) {
+                        e.stopPropagation();
+                        handleMenuToggle();
+                    }, css: actionIconButtonStyle }, { children: jsx(MenuIcon, {}) })), isMenuOpen &&
+                    createPortal(jsx("div", __assign({ ref: menuRef, css: __assign(__assign({}, actionMenuStyle), { top: "".concat(menuPosition.top, "px"), left: "".concat(menuPosition.left, "px"), transform: 'translateX(-100%)' }) }, { children: actions.map(function (action, index) { return (jsx("button", __assign({ type: 'button', onClick: function () { return handleActionClick(action); }, css: actionMenuItemStyle }, { children: action.label }), index)); }) })), featheryDoc().body)] })) : (actions.map(function (action, index) { return (jsx("button", __assign({ type: 'button', onClick: function (e) {
+                e.stopPropagation();
+                handleActionClick(action);
+            }, css: actionButtonStyle }, { children: action.label }), index)); })) })));
+}
+
+function EmptyState(_a) {
+    var hasSearchQuery = _a.hasSearchQuery;
+    return (jsxs("div", __assign({ css: emptyStateContainerStyle }, { children: [hasSearchQuery && (jsx("svg", __assign({ css: {
+                    width: '48px',
+                    height: '48px',
+                    color: '#9ca3af',
+                    marginBottom: '16px'
+                }, fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 1.5 }, { children: jsx("path", { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' }) }))), jsx("p", __assign({ css: emptyStateTextStyle }, { children: hasSearchQuery ? 'No results found' : 'No data available' })), hasSearchQuery && (jsx("p", __assign({ css: __assign(__assign({}, emptyStateTextStyle), { fontSize: '14px', marginTop: '8px' }) }, { children: "Try adjusting your search query" })))] })));
+}
+
+// Utility functions for sorting strings as numbers and dates
+function tryParseNumber(value) {
+    if (value === null || value === undefined || value === '')
+        return null;
+    var stringValue = String(value).trim();
+    // Remove common number formatting characters
+    var cleaned = stringValue
+        .replace(/[$€£¥]/g, '') // Currency symbols
+        .replace(/[,%]/g, '') // Commas and percent
+        .replace(/\s/g, ''); // Spaces
+    var parsed = parseFloat(cleaned);
+    return isNaN(parsed) ? null : parsed;
+}
+function tryParseDate(value) {
+    var e_1, _a, _b, _c;
+    if (value === null || value === undefined || value === '')
+        return null;
+    var stringValue = String(value).trim();
+    // Try standard Date constructor first
+    var standardDate = new Date(stringValue);
+    if (!isNaN(standardDate.getTime())) {
+        return standardDate;
+    }
+    var formats = [
+        // US format: MM/DD/YYYY or M/D/YY
+        /^(\d{1,2})[/-](\d{1,2})[/-](\d{2,4})$/,
+        // ISO-ish: YYYY/MM/DD or YYYY-MM-DD
+        /^(\d{4})[/-](\d{1,2})[/-](\d{1,2})$/
+    ];
+    try {
+        for (var formats_1 = __values(formats), formats_1_1 = formats_1.next(); !formats_1_1.done; formats_1_1 = formats_1.next()) {
+            var format = formats_1_1.value;
+            var match = stringValue.match(format);
+            if (match) {
+                var year = void 0, month = void 0, day = void 0;
+                if (match[1].length === 4) {
+                    // YYYY-MM-DD format
+                    _b = __read(match, 4), year = _b[1], month = _b[2], day = _b[3];
+                }
+                else {
+                    // MM/DD/YYYY format
+                    _c = __read(match, 4), month = _c[1], day = _c[2], year = _c[3];
+                }
+                // Handle 2-digit years
+                if (year.length === 2) {
+                    var yearNum = parseInt(year);
+                    year = yearNum < 50 ? "20".concat(year) : "19".concat(year);
+                }
+                var date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+                if (!isNaN(date.getTime())) {
+                    return date;
+                }
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (formats_1_1 && !formats_1_1.done && (_a = formats_1.return)) _a.call(formats_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return null;
+}
+function parseSortableValue(value) {
+    var _a;
+    var asNumber = tryParseNumber(value);
+    var asDate = tryParseDate(value);
+    var asString = (_a = stringifyWithNull(value)) !== null && _a !== void 0 ? _a : '';
+    return {
+        original: value,
+        asNumber: asNumber,
+        asDate: asDate,
+        asString: asString
+    };
+}
+function compareSortableValues(a, b) {
+    // Try number comparison first
+    if (a.asNumber !== null && b.asNumber !== null) {
+        return a.asNumber - b.asNumber;
+    }
+    // Try date comparison
+    if (a.asDate !== null && b.asDate !== null) {
+        return a.asDate.getTime() - b.asDate.getTime();
+    }
+    // Fall back to string comparison
+    return a.asString.localeCompare(b.asString);
+}
+
+function generateExampleData(columns, numRows) {
+    if (numRows === void 0) { numRows = 2; }
+    var exampleData = {};
+    columns.forEach(function (column) {
+        exampleData[column.field_key] = Array(numRows).fill('Sample');
+    });
+    return exampleData;
+}
+
+function useTableData(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var element = _a.element, _k = _a.editMode, editMode = _k === void 0 ? false : _k;
+    var userColumns = ((_b = element.properties) === null || _b === void 0 ? void 0 : _b.columns) || [];
+    var actions = (((_c = element.properties) === null || _c === void 0 ? void 0 : _c.actions) || []).filter(function (action) { return action.label && action.label.trim() !== ''; });
+    var enableSearch = (_e = (_d = element.properties) === null || _d === void 0 ? void 0 : _d.search) !== null && _e !== void 0 ? _e : false;
+    var enableSort = (_g = (_f = element.properties) === null || _f === void 0 ? void 0 : _f.sort) !== null && _g !== void 0 ? _g : false;
+    var paginationSetting = (_j = (_h = element.properties) === null || _h === void 0 ? void 0 : _h.pagination) !== null && _j !== void 0 ? _j : 0;
+    var rowsPerPage = typeof paginationSetting === 'number' && paginationSetting > 0
+        ? Math.floor(paginationSetting)
+        : 0;
+    var enablePagination = rowsPerPage > 0;
+    // Use example columns if in edit mode and no columns provided
+    // Also ensure all columns have field_key in edit mode
+    var columns = useMemo(function () {
+        var cols = userColumns;
+        // In edit mode, replace field_key with a unique example key
+        if (editMode) {
+            cols = cols.map(function (col, index) { return (__assign(__assign({}, col), { field_key: "example_column_".concat(index) })); });
+        }
+        return cols;
+    }, [editMode, userColumns]);
+    // Use example data in edit mode
+    var activeFieldValues = useMemo(function () {
+        if (editMode) {
+            return generateExampleData(columns);
+        }
+        return fieldValues;
+    }, [editMode, columns, userColumns.length]);
+    var _l = __read(useState(''), 2), searchQuery = _l[0], setSearchQuery = _l[1];
+    var _m = __read(useState(null), 2), sortColumn = _m[0], setSortColumn = _m[1];
+    var _o = __read(useState('asc'), 2), sortDirection = _o[0], setSortDirection = _o[1];
+    var _p = __read(useState(0), 2), currentPage = _p[0], setCurrentPage = _p[1];
+    var numRows = useMemo(function () {
+        return columns.reduce(function (maxRows, column) {
+            var fieldValue = activeFieldValues[column.field_key];
+            if (Array.isArray(fieldValue)) {
+                return Math.max(maxRows, fieldValue.length);
+            }
+            return maxRows;
+        }, 0);
+    }, [columns, activeFieldValues]);
+    var allRowIndices = useMemo(function () { return Array.from({ length: numRows }, function (_, i) { return i; }); }, [numRows]);
+    var filteredRowIndices = useMemo(function () {
+        if (!enableSearch || !searchQuery.trim())
+            return allRowIndices;
+        return allRowIndices.filter(function (rowIndex) {
+            return columns.some(function (column) {
+                var _a;
+                var fieldValue = activeFieldValues[column.field_key];
+                var cellValue = Array.isArray(fieldValue)
+                    ? fieldValue[rowIndex]
+                    : fieldValue;
+                var stringValue = (_a = stringifyWithNull(cellValue)) !== null && _a !== void 0 ? _a : '';
+                return stringValue
+                    .toLowerCase()
+                    .includes(searchQuery.toLowerCase().trim());
+            });
+        });
+    }, [allRowIndices, columns, searchQuery, enableSearch, activeFieldValues]);
+    var sortedRowIndices = useMemo(function () {
+        if (!enableSort || !sortColumn)
+            return filteredRowIndices;
+        var column = columns.find(function (col) { return col.name === sortColumn; });
+        if (!column)
+            return filteredRowIndices;
+        return __spreadArray([], __read(filteredRowIndices), false).sort(function (aIdx, bIdx) {
+            var fieldValue = activeFieldValues[column.field_key];
+            var aValue = Array.isArray(fieldValue) ? fieldValue[aIdx] : fieldValue;
+            var bValue = Array.isArray(fieldValue) ? fieldValue[bIdx] : fieldValue;
+            var aParsed = parseSortableValue(aValue);
+            var bParsed = parseSortableValue(bValue);
+            var comparison = compareSortableValues(aParsed, bParsed);
+            return sortDirection === 'asc' ? comparison : -comparison;
+        });
+    }, [
+        filteredRowIndices,
+        sortColumn,
+        sortDirection,
+        columns,
+        enableSort,
+        activeFieldValues
+    ]);
+    var paginatedRowIndices = useMemo(function () {
+        if (!enablePagination)
+            return sortedRowIndices;
+        var startIdx = currentPage * rowsPerPage;
+        var endIdx = startIdx + rowsPerPage;
+        return sortedRowIndices.slice(startIdx, endIdx);
+    }, [sortedRowIndices, currentPage, rowsPerPage, enablePagination]);
+    // Reset to first page when search or sort changes
+    useEffect(function () {
+        setCurrentPage(0);
+    }, [searchQuery, sortColumn, sortDirection]);
+    var totalPages = enablePagination
+        ? Math.ceil(sortedRowIndices.length / rowsPerPage)
+        : 1;
+    var handleSort = function (columnName) {
+        if (!enableSort)
+            return;
+        if (sortColumn === columnName) {
+            // Cycle through: asc → desc → none
+            if (sortDirection === 'asc') {
+                setSortDirection('desc');
+            }
+            else {
+                setSortColumn(null);
+                setSortDirection('asc');
+            }
+        }
+        else {
+            setSortColumn(columnName);
+            setSortDirection('asc');
+        }
+    };
+    var hasData = numRows > 0;
+    var hasSearchResults = filteredRowIndices.length > 0;
+    return {
+        enableSearch: enableSearch,
+        searchQuery: searchQuery,
+        hasSearchResults: hasSearchResults,
+        setSearchQuery: setSearchQuery,
+        enableSort: enableSort,
+        sortColumn: sortColumn,
+        sortDirection: sortDirection,
+        handleSort: handleSort,
+        enablePagination: enablePagination,
+        currentPage: currentPage,
+        paginatedRowIndices: paginatedRowIndices,
+        rowsPerPage: rowsPerPage,
+        setCurrentPage: setCurrentPage,
+        columns: columns,
+        actions: actions,
+        totalRows: sortedRowIndices.length,
+        totalPages: totalPages,
+        hasData: hasData,
+        activeFieldValues: activeFieldValues
+    };
+}
+
+function applyTableStyles(responsiveStyles) {
+    responsiveStyles.addTargets('table', 'thead', 'tbody', 'th', 'td', 'tr');
+    return responsiveStyles;
+}
+function TableElement(_a) {
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.editMode, editMode = _c === void 0 ? false : _c;
+    var styles = useMemo(function () { return applyTableStyles(responsiveStyles); }, [responsiveStyles]);
+    var _d = useTableData({ element: element, editMode: editMode }), 
+    // search
+    enableSearch = _d.enableSearch, searchQuery = _d.searchQuery, setSearchQuery = _d.setSearchQuery, 
+    // sort
+    enableSort = _d.enableSort, sortColumn = _d.sortColumn, sortDirection = _d.sortDirection, handleSort = _d.handleSort, 
+    // pagination
+    enablePagination = _d.enablePagination, currentPage = _d.currentPage, setCurrentPage = _d.setCurrentPage, paginatedRowIndices = _d.paginatedRowIndices, rowsPerPage = _d.rowsPerPage, 
+    // data
+    columns = _d.columns, actions = _d.actions, totalRows = _d.totalRows, totalPages = _d.totalPages, hasData = _d.hasData, hasSearchResults = _d.hasSearchResults, activeFieldValues = _d.activeFieldValues;
+    var showEmptyState = !hasData || (hasData && !hasSearchResults);
+    return (jsx("div", __assign({ css: __assign(__assign({}, containerStyle), styles.getTarget('container')) }, { children: jsxs("div", __assign({ css: { minWidth: 'fit-content' } }, { children: [enableSearch && (jsx(Search, { searchQuery: searchQuery, onSearchChange: setSearchQuery })), showEmptyState ? (jsx(EmptyState, { hasSearchQuery: searchQuery.trim().length > 0 })) : (jsxs("table", __assign({ css: __assign(__assign({}, tableStyle), styles.getTarget('table')) }, { children: [jsx("thead", __assign({ css: theadStyle }, { children: jsxs("tr", { children: [jsx(SortHeader, { columns: columns, enableSort: enableSort, sortColumn: sortColumn, sortDirection: sortDirection, onSort: handleSort, styles: styles }), actions.length > 0 && (jsx("th", { scope: 'col', css: __assign(__assign({}, thStyle), styles.getTarget('th')) }))] }) })), jsx("tbody", __assign({ css: styles.getTarget('tbody') }, { children: paginatedRowIndices.map(function (rowIndex) {
+                                var rowData = {};
+                                columns.forEach(function (col) {
+                                    var fValue = activeFieldValues[col.field_key];
+                                    var cValue = Array.isArray(fValue)
+                                        ? fValue[rowIndex]
+                                        : fValue;
+                                    rowData[col.name] = cValue;
+                                });
+                                var handleRowClick = function () {
+                                    onClick({
+                                        rowIndex: rowIndex,
+                                        rowData: rowData
+                                    });
+                                };
+                                return (jsxs("tr", __assign({ css: __assign(__assign({}, rowStyle), styles.getTarget('tr')), onClick: handleRowClick }, { children: [columns.map(function (column, colIndex) {
+                                            var _a;
+                                            var fieldValue = activeFieldValues[column.field_key];
+                                            var cellValue = Array.isArray(fieldValue)
+                                                ? fieldValue[rowIndex]
+                                                : fieldValue;
+                                            return (jsx("td", __assign({ css: __assign(__assign({}, cellStyle), styles.getTarget('td')) }, { children: (_a = stringifyWithNull(cellValue)) !== null && _a !== void 0 ? _a : '' }), colIndex));
+                                        }), actions.length > 0 && (jsx("td", __assign({ css: __assign(__assign({}, cellStyle), styles.getTarget('td')) }, { children: jsx(ActionButtons, { actions: actions, rowIndex: rowIndex, columnData: columns, onClick: onClick }) })))] }), rowIndex));
+                            }) }))] }))), !showEmptyState && enablePagination && (jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, totalItems: totalRows, rowsPerPage: rowsPerPage, onPageChange: setCurrentPage }))] })) })));
+}
+
+export { TableElement as default };