@feathery/react 2.15.1 → 2.16.0

package/dist/{fthry_index.BAhh3Pz6.js → fthry_index.DclC8fSK.js}

@@ -1,4 +1,4 @@
-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 { _ 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.uXGVOaal.js';
 import { useState, useRef, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import 'react/jsx-runtime';
@@ -105,7 +105,8 @@ var searchInputStyle = {
     color: colors.gray900,
     fontSize: '14px',
     borderRadius: '8px',
-    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)'
+    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    boxSizing: 'border-box'
 };
 var tableStyle = {
     width: '100%',
@@ -115,8 +116,7 @@ var tableStyle = {
     color: colors.gray600,
     textIndent: 0,
     borderColor: 'inherit',
-    borderCollapse: 'collapse',
-    tableLayout: 'fixed'
+    borderCollapse: 'collapse'
 };
 var theadStyle = {
     fontSize: '14px',
@@ -253,7 +253,12 @@ function SearchIcon() {
 }
 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); } })] })) })));
+    var handleKeyDown = function (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+        }
+    };
+    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); }, onKeyDown: handleKeyDown })] })) })));
 }
 
 function SortIcon(_a) {
@@ -265,7 +270,8 @@ function SortHeader(_a) {
     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));
+            var isFirstColumn = index === 0;
+            return (jsx("th", __assign({ scope: 'col', onClick: function () { return isSortable && onSort(column.name); }, css: __assign(__assign(__assign(__assign({}, thStyle), (isFirstColumn ? {} : { paddingLeft: 0 })), 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));
         }) }));
 }
 
@@ -313,16 +319,15 @@ 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;
+    var actions = _a.actions, rowIndex = _a.rowIndex, columnData = _a.columnData, fieldValuesProp = _a.fieldValues, onClick = _a.onClick, _b = _a.forceInlineButtons, forceInlineButtons = _b === void 0 ? false : _b;
     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 _c = __read(useState(false), 2), isMenuOpen = _c[0], setIsMenuOpen = _c[1];
+    var _d = __read(useState({ top: 0, left: 0 }), 2), menuPosition = _d[0], setMenuPosition = _d[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;
+    var useOverflow = !forceInlineButtons && actions.length > 1;
     useEffect(function () {
         var handleClickOutside = function (event) {
             if (menuRef.current &&
@@ -341,9 +346,10 @@ function ActionButtons(_a) {
     }, [isMenuOpen]);
     var handleActionClick = function (action) {
         setIsMenuOpen(false);
+        var activeFieldValues = fieldValuesProp || fieldValues;
         var rowData = {};
         columnData.forEach(function (col) {
-            var fValue = fieldValues[col.field_key];
+            var fValue = activeFieldValues[col.field_key];
             var cValue = Array.isArray(fValue) ? fValue[rowIndex] : fValue;
             rowData[col.name] = cValue;
         });
@@ -481,21 +487,95 @@ function generateExampleData(columns, numRows) {
     return exampleData;
 }
 
+/**
+ * Transpose table data: columns become rows, rows become columns
+ * Returns new columns and transposed field values
+ */
+function transposeTableData(columns, activeFieldValues, numRows, rowIndicesToInclude) {
+    var e_1, _a, e_2, _b, e_3, _c;
+    var includedRowIndices = rowIndicesToInclude || Array.from({ length: numRows }, function (_, i) { return i; });
+    var transposedColumns = [
+        {
+            name: '',
+            field_id: '_transpose_field_name',
+            field_type: 'text',
+            field_key: '_transpose_field_name'
+        }
+    ];
+    try {
+        // Add a column for each original row
+        for (var includedRowIndices_1 = __values(includedRowIndices), includedRowIndices_1_1 = includedRowIndices_1.next(); !includedRowIndices_1_1.done; includedRowIndices_1_1 = includedRowIndices_1.next()) {
+            var rowIdx = includedRowIndices_1_1.value;
+            transposedColumns.push({
+                name: '',
+                field_id: "_transpose_row_".concat(rowIdx),
+                field_type: 'text',
+                field_key: "_transpose_row_".concat(rowIdx),
+                originalRowIndex: rowIdx
+            });
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (includedRowIndices_1_1 && !includedRowIndices_1_1.done && (_a = includedRowIndices_1.return)) _a.call(includedRowIndices_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    var transposedFieldValues = {
+        _transpose_field_name: columns.map(function (col) { return col.name; })
+    };
+    try {
+        for (var includedRowIndices_2 = __values(includedRowIndices), includedRowIndices_2_1 = includedRowIndices_2.next(); !includedRowIndices_2_1.done; includedRowIndices_2_1 = includedRowIndices_2.next()) {
+            var rowIdx = includedRowIndices_2_1.value;
+            var transposedRowValues = [];
+            try {
+                for (var columns_1 = (e_3 = void 0, __values(columns)), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
+                    var column = columns_1_1.value;
+                    var fieldValue = activeFieldValues[column.field_key];
+                    var cellValue = Array.isArray(fieldValue)
+                        ? fieldValue[rowIdx]
+                        : fieldValue;
+                    transposedRowValues.push(cellValue);
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (columns_1_1 && !columns_1_1.done && (_c = columns_1.return)) _c.call(columns_1);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+            transposedFieldValues["_transpose_row_".concat(rowIdx)] = transposedRowValues;
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (includedRowIndices_2_1 && !includedRowIndices_2_1.done && (_b = includedRowIndices_2.return)) _b.call(includedRowIndices_2);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    return {
+        transposedColumns: transposedColumns,
+        transposedFieldValues: transposedFieldValues,
+        includedRowIndices: includedRowIndices
+    };
+}
 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 _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var element = _a.element, _m = _a.editMode, editMode = _m === void 0 ? false : _m;
     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 enableTranspose = (_j = (_h = element.properties) === null || _h === void 0 ? void 0 : _h.transpose) !== null && _j !== void 0 ? _j : false;
+    var paginationSetting = (_l = (_k = element.properties) === null || _k === void 0 ? void 0 : _k.pagination) !== null && _l !== void 0 ? _l : 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 baseColumns = useMemo(function () {
         var cols = userColumns;
         // In edit mode, replace field_key with a unique example key
         if (editMode) {
@@ -504,16 +584,112 @@ function useTableData(_a) {
         return cols;
     }, [editMode, userColumns]);
     // Use example data in edit mode
-    var activeFieldValues = useMemo(function () {
+    var baseFieldValues = useMemo(function () {
         if (editMode) {
-            return generateExampleData(columns);
+            return generateExampleData(baseColumns);
         }
         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];
+    }, [editMode, baseColumns, userColumns.length]);
+    var _o = __read(useState(''), 2), searchQuery = _o[0], setSearchQuery = _o[1];
+    var _p = __read(useState(null), 2), sortColumn = _p[0], setSortColumn = _p[1];
+    var _q = __read(useState('asc'), 2), sortDirection = _q[0], setSortDirection = _q[1];
+    var _r = __read(useState(0), 2), currentPage = _r[0], setCurrentPage = _r[1];
+    var baseNumRows = useMemo(function () {
+        return baseColumns.reduce(function (maxRows, column) {
+            var fieldValue = baseFieldValues[column.field_key];
+            if (Array.isArray(fieldValue)) {
+                return Math.max(maxRows, fieldValue.length);
+            }
+            return maxRows;
+        }, 0);
+    }, [baseColumns, baseFieldValues]);
+    var allBaseRowIndices = useMemo(function () { return Array.from({ length: baseNumRows }, function (_, i) { return i; }); }, [baseNumRows]);
+    var filteredBaseRowIndices = useMemo(function () {
+        if (!enableTranspose || !enableSearch || !searchQuery.trim()) {
+            return allBaseRowIndices;
+        }
+        return allBaseRowIndices.filter(function (baseRowIdx) {
+            return baseColumns.some(function (column) {
+                var _a;
+                var fieldValue = baseFieldValues[column.field_key];
+                var cellValue = Array.isArray(fieldValue)
+                    ? fieldValue[baseRowIdx]
+                    : fieldValue;
+                var stringValue = (_a = stringifyWithNull(cellValue)) !== null && _a !== void 0 ? _a : '';
+                return stringValue
+                    .toLowerCase()
+                    .includes(searchQuery.toLowerCase().trim());
+            });
+        });
+    }, [
+        enableTranspose,
+        allBaseRowIndices,
+        baseColumns,
+        searchQuery,
+        enableSearch,
+        baseFieldValues
+    ]);
+    var _s = __read(useState(null), 2), sortedColumnIndex = _s[0], setSortedColumnIndex = _s[1];
+    var sortedBaseRowIndices = useMemo(function () {
+        if (!enableTranspose || !enableSort || sortedColumnIndex === null) {
+            return filteredBaseRowIndices;
+        }
+        var column = baseColumns[sortedColumnIndex];
+        if (!column)
+            return filteredBaseRowIndices;
+        return __spreadArray([], __read(filteredBaseRowIndices), false).sort(function (aIdx, bIdx) {
+            var fieldValue = baseFieldValues[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;
+        });
+    }, [
+        enableTranspose,
+        filteredBaseRowIndices,
+        sortedColumnIndex,
+        sortDirection,
+        baseColumns,
+        baseFieldValues,
+        enableSort
+    ]);
+    var paginatedBaseRowIndices = useMemo(function () {
+        if (!enableTranspose || !enablePagination) {
+            return sortedBaseRowIndices;
+        }
+        var startIdx = currentPage * rowsPerPage;
+        var endIdx = startIdx + rowsPerPage;
+        return sortedBaseRowIndices.slice(startIdx, endIdx);
+    }, [
+        enableTranspose,
+        sortedBaseRowIndices,
+        currentPage,
+        rowsPerPage,
+        enablePagination
+    ]);
+    var _t = useMemo(function () {
+        if (!enableTranspose || baseNumRows === 0) {
+            return {
+                columns: baseColumns,
+                activeFieldValues: baseFieldValues,
+                transposedRowIndices: []
+            };
+        }
+        var _a = transposeTableData(baseColumns, baseFieldValues, baseNumRows, paginatedBaseRowIndices), transposedColumns = _a.transposedColumns, transposedFieldValues = _a.transposedFieldValues, includedRowIndices = _a.includedRowIndices;
+        return {
+            columns: transposedColumns,
+            activeFieldValues: transposedFieldValues,
+            transposedRowIndices: includedRowIndices
+        };
+    }, [
+        enableTranspose,
+        baseColumns,
+        baseFieldValues,
+        baseNumRows,
+        paginatedBaseRowIndices
+    ]), columns = _t.columns, activeFieldValues = _t.activeFieldValues, transposedRowIndices = _t.transposedRowIndices;
     var numRows = useMemo(function () {
         return columns.reduce(function (maxRows, column) {
             var fieldValue = activeFieldValues[column.field_key];
@@ -525,6 +701,8 @@ function useTableData(_a) {
     }, [columns, activeFieldValues]);
     var allRowIndices = useMemo(function () { return Array.from({ length: numRows }, function (_, i) { return i; }); }, [numRows]);
     var filteredRowIndices = useMemo(function () {
+        if (enableTranspose)
+            return allRowIndices; // Already filtered during transpose
         if (!enableSearch || !searchQuery.trim())
             return allRowIndices;
         return allRowIndices.filter(function (rowIndex) {
@@ -540,8 +718,17 @@ function useTableData(_a) {
                     .includes(searchQuery.toLowerCase().trim());
             });
         });
-    }, [allRowIndices, columns, searchQuery, enableSearch, activeFieldValues]);
+    }, [
+        enableTranspose,
+        allRowIndices,
+        columns,
+        searchQuery,
+        enableSearch,
+        activeFieldValues
+    ]);
     var sortedRowIndices = useMemo(function () {
+        if (enableTranspose)
+            return filteredRowIndices; // Already sorted during transpose
         if (!enableSort || !sortColumn)
             return filteredRowIndices;
         var column = columns.find(function (col) { return col.name === sortColumn; });
@@ -557,6 +744,7 @@ function useTableData(_a) {
             return sortDirection === 'asc' ? comparison : -comparison;
         });
     }, [
+        enableTranspose,
         filteredRowIndices,
         sortColumn,
         sortDirection,
@@ -565,19 +753,30 @@ function useTableData(_a) {
         activeFieldValues
     ]);
     var paginatedRowIndices = useMemo(function () {
+        if (enableTranspose)
+            return allRowIndices; // Already paginated during transpose
         if (!enablePagination)
             return sortedRowIndices;
         var startIdx = currentPage * rowsPerPage;
         var endIdx = startIdx + rowsPerPage;
         return sortedRowIndices.slice(startIdx, endIdx);
-    }, [sortedRowIndices, currentPage, rowsPerPage, enablePagination]);
+    }, [
+        enableTranspose,
+        allRowIndices,
+        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;
+    // For transposed tables, totalRows and totalPages are based on original rows (now columns)
+    var totalRows = enableTranspose
+        ? sortedBaseRowIndices.length
+        : sortedRowIndices.length;
+    var totalPages = enablePagination ? Math.ceil(totalRows / rowsPerPage) : 1;
     var handleSort = function (columnName) {
         if (!enableSort)
             return;
@@ -596,8 +795,29 @@ function useTableData(_a) {
             setSortDirection('asc');
         }
     };
+    var handleTransposedSort = function (rowIndex) {
+        if (!enableSort || !enableTranspose)
+            return;
+        if (sortedColumnIndex === rowIndex) {
+            // Cycle through: asc → desc → none
+            if (sortDirection === 'asc') {
+                setSortDirection('desc');
+            }
+            else {
+                setSortedColumnIndex(null);
+                setSortDirection('asc');
+            }
+        }
+        else {
+            setSortedColumnIndex(rowIndex);
+            setSortDirection('asc');
+        }
+    };
     var hasData = numRows > 0;
-    var hasSearchResults = filteredRowIndices.length > 0;
+    var hasSearchResults = enableTranspose
+        ? filteredBaseRowIndices.length > 0
+        : filteredRowIndices.length > 0;
+    var isTransposed = enableTranspose && baseNumRows > 0;
     return {
         enableSearch: enableSearch,
         searchQuery: searchQuery,
@@ -606,7 +826,9 @@ function useTableData(_a) {
         enableSort: enableSort,
         sortColumn: sortColumn,
         sortDirection: sortDirection,
+        sortedColumnIndex: sortedColumnIndex,
         handleSort: handleSort,
+        handleTransposedSort: handleTransposedSort,
         enablePagination: enablePagination,
         currentPage: currentPage,
         paginatedRowIndices: paginatedRowIndices,
@@ -614,10 +836,14 @@ function useTableData(_a) {
         setCurrentPage: setCurrentPage,
         columns: columns,
         actions: actions,
-        totalRows: sortedRowIndices.length,
+        isTransposed: isTransposed,
+        transposedRowIndices: transposedRowIndices,
+        totalRows: totalRows,
         totalPages: totalPages,
         hasData: hasData,
-        activeFieldValues: activeFieldValues
+        activeFieldValues: activeFieldValues,
+        baseColumns: baseColumns,
+        baseFieldValues: baseFieldValues
     };
 }
 
@@ -632,36 +858,82 @@ function TableElement(_a) {
     // search
     enableSearch = _d.enableSearch, searchQuery = _d.searchQuery, setSearchQuery = _d.setSearchQuery, 
     // sort
-    enableSort = _d.enableSort, sortColumn = _d.sortColumn, sortDirection = _d.sortDirection, handleSort = _d.handleSort, 
+    enableSort = _d.enableSort, sortColumn = _d.sortColumn, sortDirection = _d.sortDirection, sortedColumnIndex = _d.sortedColumnIndex, handleSort = _d.handleSort, handleTransposedSort = _d.handleTransposedSort, 
     // 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;
+    columns = _d.columns, actions = _d.actions, isTransposed = _d.isTransposed, transposedRowIndices = _d.transposedRowIndices, totalRows = _d.totalRows, totalPages = _d.totalPages, hasData = _d.hasData, hasSearchResults = _d.hasSearchResults, activeFieldValues = _d.activeFieldValues, baseColumns = _d.baseColumns, baseFieldValues = _d.baseFieldValues;
     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 }))] })) })));
+    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: [!isTransposed && (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(__assign({}, thStyle), { paddingLeft: 0 }), styles.getTarget('th')) }))] }) }))), jsxs("tbody", __assign({ css: styles.getTarget('tbody') }, { children: [paginatedRowIndices.map(function (rowIndex) {
+                                    var rowData = {};
+                                    if (!isTransposed) {
+                                        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 () {
+                                        if (!isTransposed) {
+                                            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, _b;
+                                                var fieldValue = activeFieldValues[column.field_key];
+                                                var cellValue = Array.isArray(fieldValue)
+                                                    ? fieldValue[rowIndex]
+                                                    : fieldValue;
+                                                var isFirstColInTranspose = isTransposed && colIndex === 0;
+                                                var isSortable = isFirstColInTranspose && enableSort;
+                                                var isSorted = sortedColumnIndex === rowIndex;
+                                                var isFirstColumn = colIndex === 0;
+                                                var isSecondColumn = colIndex === 1;
+                                                // In transposed mode, get the original row index from the column
+                                                var originalRowIndex = isTransposed && !isFirstColInTranspose
+                                                    ? column.originalRowIndex
+                                                    : undefined;
+                                                var cellCss = isFirstColInTranspose
+                                                    ? __assign(__assign(__assign(__assign({}, thStyle), { backgroundColor: '#f9fafb', borderRight: '1px solid #e5e7eb', width: '1px', whiteSpace: 'nowrap' }), styles.getTarget('th')), (isSortable ? { cursor: 'pointer' } : {})) : __assign(__assign(__assign(__assign({}, cellStyle), (isTransposed
+                                                    ? isSecondColumn
+                                                        ? {}
+                                                        : { paddingLeft: 0 }
+                                                    : isFirstColumn
+                                                        ? {}
+                                                        : { paddingLeft: 0 })), (isTransposed && !isFirstColInTranspose
+                                                    ? { cursor: 'pointer' }
+                                                    : {})), styles.getTarget('td'));
+                                                var CellElement = isFirstColInTranspose ? 'th' : 'td';
+                                                var handleCellClick = function (e) {
+                                                    if (isSortable) {
+                                                        handleTransposedSort(rowIndex);
+                                                    }
+                                                    else if (isTransposed &&
+                                                        originalRowIndex !== undefined) {
+                                                        // In transposed mode, clicking a cell triggers with original row data
+                                                        e.stopPropagation();
+                                                        var originalRowData_1 = {};
+                                                        baseColumns.forEach(function (col) {
+                                                            var fValue = baseFieldValues[col.field_key];
+                                                            var cValue = Array.isArray(fValue)
+                                                                ? fValue[originalRowIndex]
+                                                                : fValue;
+                                                            originalRowData_1[col.name] = cValue;
+                                                        });
+                                                        onClick({
+                                                            rowIndex: originalRowIndex,
+                                                            rowData: originalRowData_1
+                                                        });
+                                                    }
+                                                };
+                                                return (jsx(CellElement, __assign({ css: cellCss, onClick: handleCellClick }, (isFirstColInTranspose ? { scope: 'row' } : {}), { children: isFirstColInTranspose && isSortable ? (jsxs("div", __assign({ css: __assign(__assign({}, sortHeaderContentStyle), { justifyContent: 'space-between' }) }, { children: [jsx("span", { children: (_a = stringifyWithNull(cellValue)) !== null && _a !== void 0 ? _a : '' }), jsx("span", __assign({ css: sortIconContainerStyle }, { children: jsx(SortIcon, { isSorted: isSorted, sortDirection: sortDirection }) }))] }))) : ((_b = stringifyWithNull(cellValue)) !== null && _b !== void 0 ? _b : '') }), colIndex));
+                                            }), !isTransposed && actions.length > 0 && (jsx("td", __assign({ css: __assign(__assign(__assign({}, cellStyle), { paddingLeft: 0 }), styles.getTarget('td')) }, { children: jsx(ActionButtons, { actions: actions, rowIndex: rowIndex, columnData: baseColumns, fieldValues: baseFieldValues, onClick: onClick }) })))] }), rowIndex));
+                                }), isTransposed && actions.length > 0 && (jsxs("tr", __assign({ css: __assign(__assign({}, rowStyle), styles.getTarget('tr')) }, { children: [jsx("th", { scope: 'row', css: __assign(__assign(__assign({}, thStyle), { backgroundColor: '#f9fafb', borderRight: '1px solid #e5e7eb', width: '1px', whiteSpace: 'nowrap' }), styles.getTarget('th')) }), transposedRowIndices.map(function (originalRowIndex, idx) { return (jsx("td", __assign({ css: __assign(__assign(__assign({}, cellStyle), (idx === 0 ? {} : { paddingLeft: 0 })), styles.getTarget('td')) }, { children: jsx("div", __assign({ css: { display: 'flex', justifyContent: 'flex-start' } }, { children: jsx(ActionButtons, { actions: actions, rowIndex: originalRowIndex, columnData: baseColumns, fieldValues: baseFieldValues, onClick: onClick, forceInlineButtons: true }) })) }), originalRowIndex)); })] })))] }))] }))), !showEmptyState && enablePagination && (jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, totalItems: totalRows, rowsPerPage: rowsPerPage, onPageChange: setCurrentPage }))] })) })));
 }
 
 export { TableElement as default };

package/dist/{fthry_index.m7CZv4YY.js → fthry_index.DeVEe6wK.js}

@@ -1,12 +1,12 @@
-import { u as useBorder, a as jsxs, _ as __assign, j as jsx, h as hoverStylesGuard, o as imgMaxSizeStyles, p as noTextSelectStyles, E as ErrorInput } from './fthry_index.y4j9reIZ.js';
+import { u as useBorder, a as jsxs, _ as __assign, j as jsx, h as hoverStylesGuard, o as imgMaxSizeStyles, p as noTextSelectStyles, E as ErrorInput } from './fthry_index.uXGVOaal.js';
 import { useRef, useMemo } from 'react';
-import { I as InlineTooltip } from './fthry_InlineTooltip.BpfxcSEn.js';
-import { u as useSalesforceSync } from './fthry_useSalesforceSync.Cae_lMG1.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.B5HOzwap.js';
+import { u as useSalesforceSync } from './fthry_useSalesforceSync.CksS0l4W.js';
 import 'react/jsx-runtime';
 import 'react-dom/client';
 import 'jszip';
 import 'react-dom';
-import './fthry_Overlay.CJVfag7c.js';
+import './fthry_Overlay.Bimyn9cP.js';
 
 function ButtonGroupField(_a) {
     var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, inlineError = _a.inlineError, _b = _a.fieldVal, fieldVal = _b === void 0 ? null : _b, _c = _a.repeatIndex, repeatIndex = _c === void 0 ? null : _c, editMode = _a.editMode, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.elementProps, elementProps = _e === void 0 ? {} : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, children = _a.children;

package/dist/{fthry_index.Bz07r-AM.js → fthry_index.DuaCIs62.js}

@@ -1,4 +1,4 @@
-import { j as jsx, _ as __assign, a as jsxs, b as __read, k as __awaiter, l as __generator, t as featheryWindow, F as Fragment, E as ErrorInput } from './fthry_index.y4j9reIZ.js';
+import { j as jsx, _ as __assign, a as jsxs, b as __read, k as __awaiter, l as __generator, t as featheryWindow, F as Fragment, E as ErrorInput } from './fthry_index.uXGVOaal.js';
 import { useRef, useState, useEffect, memo, useMemo } from 'react';
 import 'react/jsx-runtime';
 import 'react-dom/client';

package/dist/{fthry_index.Dgmpm9wy.js → fthry_index.DuaZsChW.js}

@@ -1,14 +1,14 @@
-import { b as __read, a as jsxs, _ as __assign, j as jsx, i as iosScrollOnFocus, r as resetStyles } from './fthry_index.y4j9reIZ.js';
+import { b as __read, a as jsxs, _ as __assign, j as jsx, i as iosScrollOnFocus, r as resetStyles } from './fthry_index.uXGVOaal.js';
 import { useRef, useState, useMemo } from 'react';
-import { F as FormControl } from './fthry_FormControl.CikgGb3C.js';
-import { applyCheckableInputStyles, composeCheckableInputStyle, applyHeightWidthMarginByFontSize } from './fthry_index.Dy4nSWZa.js';
-import { I as InlineTooltip } from './fthry_InlineTooltip.BpfxcSEn.js';
-import { u as useSalesforceSync } from './fthry_useSalesforceSync.Cae_lMG1.js';
+import { F as FormControl } from './fthry_FormControl.XVhBC21r.js';
+import { applyCheckableInputStyles, composeCheckableInputStyle, applyHeightWidthMarginByFontSize } from './fthry_index.DucoThu1.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.B5HOzwap.js';
+import { u as useSalesforceSync } from './fthry_useSalesforceSync.CksS0l4W.js';
 import 'react/jsx-runtime';
 import 'react-dom/client';
 import 'jszip';
 import 'react-dom';
-import './fthry_Overlay.CJVfag7c.js';
+import './fthry_Overlay.Bimyn9cP.js';
 
 var applyRadioGroupStyles = function (element, responsiveStyles) {
     responsiveStyles.addTargets('radioGroup');

package/dist/{fthry_index.Dy4nSWZa.js → fthry_index.DucoThu1.js}

@@ -1,4 +1,4 @@
-import { _ as __assign, h as hoverStylesGuard, a as jsxs, j as jsx, i as iosScrollOnFocus } from './fthry_index.y4j9reIZ.js';
+import { _ as __assign, h as hoverStylesGuard, a as jsxs, j as jsx, i as iosScrollOnFocus } from './fthry_index.uXGVOaal.js';
 import { useMemo } from 'react';
 import 'react/jsx-runtime';
 import 'react-dom/client';

package/dist/{fthry_index.BsEfTy-x.js → fthry_index.Duj4YwU5.js}

@@ -1,16 +1,16 @@
-import { a as jsxs, _ as __assign, j as jsx, D as DROPDOWN_Z_INDEX, b as __read, u as useBorder, as as getFieldValue, s as stringifyWithNull, h as hoverStylesGuard, i as iosScrollOnFocus, q as FORM_Z_INDEX, r as resetStyles, at as emailPatternStr } from './fthry_index.y4j9reIZ.js';
+import { a as jsxs, _ as __assign, j as jsx, D as DROPDOWN_Z_INDEX, b as __read, u as useBorder, as as getFieldValue, s as stringifyWithNull, h as hoverStylesGuard, i as iosScrollOnFocus, q as FORM_Z_INDEX, r as resetStyles, at as emailPatternStr } from './fthry_index.uXGVOaal.js';
 import { memo, useRef, useState } from 'react';
-import { P as Placeholder } from './fthry_Placeholder.DwCFN6a9.js';
-import { I as InlineTooltip } from './fthry_InlineTooltip.BpfxcSEn.js';
-import { O as Overlay } from './fthry_Overlay.CJVfag7c.js';
-import { u as useElementSize } from './fthry_useElementSize.CBdpS9aW.js';
-import { S as ShowEyeIcon, a as ShowEyeIcon$1 } from './fthry_ShowEyeIcon.D6nQhesH.js';
-import { a as IMaskInput } from './fthry_input.Cb2u4VEf.js';
+import { P as Placeholder } from './fthry_Placeholder.BSJmJpdc.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.B5HOzwap.js';
+import { O as Overlay } from './fthry_Overlay.Bimyn9cP.js';
+import { u as useElementSize } from './fthry_useElementSize.rXTn4Y2Q.js';
+import { S as ShowEyeIcon, a as ShowEyeIcon$1 } from './fthry_ShowEyeIcon.B9PAnnc8.js';
+import { a as IMaskInput } from './fthry_input.ByujwKdQ.js';
 import 'react/jsx-runtime';
 import 'react-dom/client';
 import 'jszip';
 import 'react-dom';
-import './fthry_index.OHN-Iv2R.js';
+import './fthry_index.CZMlc0Uq.js';
 
 function TextAutocomplete(_a) {
     var _b = _a.allOptions, allOptions = _b === void 0 ? [] : _b, showOptions = _a.showOptions, _c = _a.onSelect, onSelect = _c === void 0 ? function () { } : _c, _d = _a.onHide, onHide = _d === void 0 ? function () { } : _d, _e = _a.onInputFocus, onInputFocus = _e === void 0 ? function () { } : _e, _f = _a.value, value = _f === void 0 ? '' : _f, containerRef = _a.containerRef, responsiveStyles = _a.responsiveStyles, listItemRef = _a.listItemRef, children = _a.children;

package/dist/{fthry_index.B-oHlMGi.js → fthry_index.dbHyG7ZF.js}

@@ -1,6 +1,6 @@
-import { k as __awaiter, l as __generator, e as __spreadArray, b as __read, d as __values, t as featheryWindow, ak as loadQRScanner, al as throttle, j as jsx, a as jsxs, _ as __assign, F as Fragment, E as ErrorInput, am as qrPromise } from './fthry_index.y4j9reIZ.js';
+import { k as __awaiter, l as __generator, e as __spreadArray, b as __read, d as __values, t as featheryWindow, ak as loadQRScanner, al as throttle, j as jsx, a as jsxs, _ as __assign, F as Fragment, E as ErrorInput, am as qrPromise } from './fthry_index.uXGVOaal.js';
 import React__default, { useEffect, useCallback } from 'react';
-import { S as SliderStyles, a as Slider } from './fthry_styles.DGB23xLr.js';
+import { S as SliderStyles, a as Slider } from './fthry_styles.ChVA_k1Q.js';
 import 'react/jsx-runtime';
 import 'react-dom/client';
 import 'jszip';